@opensite/ui 2.2.8 → 2.3.0

package/dist/link-page-newsletter-social.d.cts

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { PageSpeedFormConfig } from '@page-speed/forms/integration';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
-import { I as ImageItem, A as ActionConfig, a as SocialLinkItem, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CPyEa7IX.cjs';
+import { FormEngineProps } from '@page-speed/forms/integration';
+import { I as ImageItem, A as ActionConfig, a as SocialLinkItem, O as OptixFlowConfig } from './blocks-tmd_MRJv.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-8mtEHxev.cjs';
 import 'class-variance-authority/types';
 
 /**
@@ -54,17 +54,17 @@ interface LinkPageNewsletterSocialProps {
      */
     newsletterDescription?: React.ReactNode;
     /**
-     * Email input placeholder text
+     * Full form engine setup and props
      */
-    emailPlaceholder?: string;
+    formEngineSetup?: FormEngineProps;
     /**
-     * Submit button text (used when submitAction is not provided)
+     * Submit button configuration
      */
-    buttonText?: React.ReactNode;
+    buttonAction?: ActionConfig;
     /**
-     * Submit action configuration
+     * Helper text below form
      */
-    submitAction?: ActionConfig;
+    helperText?: React.ReactNode;
     /**
      * Custom slot for rendering the newsletter card
      */
@@ -73,14 +73,6 @@ interface LinkPageNewsletterSocialProps {
      * Custom slot for rendering form fields inside the newsletter card
      */
     formSlot?: React.ReactNode;
-    /**
-     * Label to show while submitting
-     */
-    submittingLabel?: React.ReactNode;
-    /**
-     * Icon to show while submitting
-     */
-    submittingIcon?: React.ReactNode;
     /**
      * Array of links to display below the newsletter
      */
@@ -161,18 +153,6 @@ interface LinkPageNewsletterSocialProps {
      * Additional CSS classes for the newsletter description
      */
     newsletterDescriptionClassName?: string;
-    /**
-     * Additional CSS classes for the form container
-     */
-    formClassName?: string;
-    /**
-     * Additional CSS classes for the input field
-     */
-    inputClassName?: string;
-    /**
-     * Additional CSS classes for the submit button
-     */
-    submitButtonClassName?: string;
     /**
      * Additional CSS classes for the links container
      */
@@ -217,60 +197,6 @@ interface LinkPageNewsletterSocialProps {
      * Additional CSS classes for the pattern overlay
      */
     patternClassName?: string;
-    /**
-     * 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 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, campaign: "link-page" })
-     *   });
-     * }}
-     */
-    onSubmit?: (email: string) => void | Promise<void>;
-    /**
-     * 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;
     /**
      * OptixFlow image optimization configuration
      */
@@ -281,38 +207,36 @@ interface LinkPageNewsletterSocialProps {
  *
  * This component provides a link page with:
  * - Profile section with avatar, name, and bio
- * - Newsletter signup form with email validation
- * - Form integration with @page-speed/forms library
+ * - Newsletter signup form powered by FormEngine
  * - Links section below the newsletter
  * - Social media links
  * - Light and dark theme support
  *
- * The newsletter form supports:
- * - Universal REST API integration via formConfig
- * - Custom submission handlers via onSubmit
- * - Success and error callbacks
- * - DashTrack Rails backend integration
+ * The newsletter form is powered by `FormEngine` from `@page-speed/forms/integration`,
+ * which handles validation, submission, error handling, and success states.
  *
  * @example
  * ```tsx
- * // Basic usage
+ * // Basic usage with FormEngine
  * <LinkPageNewsletterSocial
  *   name="Content Creator"
  *   bio="Weekly tips on growing your audience"
  *   newsletterHeading="Join my newsletter"
- *   formConfig={{ endpoint: "/api/subscribe" }}
+ *   formEngineSetup={{
+ *     formConfig: { endpoint: "/api/subscribe", format: "json" },
+ *   }}
  * />
  *
- * // With custom submission handler
+ * // With custom button action
  * <LinkPageNewsletterSocial
  *   name="Content Creator"
- *   onSubmit={async (email) => {
- *     await myCustomApi.subscribe(email);
+ *   formEngineSetup={{
+ *     formConfig: { endpoint: "/api/subscribe" },
  *   }}
- *   onSuccess={() => toast.success("Subscribed!")}
+ *   buttonAction={{ label: "Subscribe Now", variant: "default" }}
  * />
  * ```
  */
-declare function LinkPageNewsletterSocial({ name, bio, avatar, avatarUrl, profileSlot, newsletterHeading, newsletterDescription, emailPlaceholder, buttonText, submitAction, newsletterSlot, formSlot, submittingLabel, submittingIcon, links, linksSlot, linkChevronIcon, socialLinks, socialLinksSlot, footerAction, footerSlot, className, contentClassName, headerClassName, avatarClassName, nameClassName, bioClassName, socialLinksClassName, socialLinkClassName, socialIconClassName, newsletterCardClassName, newsletterHeadingClassName, newsletterDescriptionClassName, formClassName, inputClassName, submitButtonClassName, linksClassName, linkClassName, linkIconClassName, linkLabelClassName, linkChevronClassName, footerClassName, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, formConfig, onSubmit, onSuccess, onError, optixFlowConfig, }: LinkPageNewsletterSocialProps): React.JSX.Element;
+declare function LinkPageNewsletterSocial({ name, bio, avatar, avatarUrl, profileSlot, newsletterHeading, newsletterDescription, formEngineSetup, buttonAction, helperText, newsletterSlot, formSlot, links, linksSlot, linkChevronIcon, socialLinks, socialLinksSlot, footerAction, footerSlot, className, contentClassName, headerClassName, avatarClassName, nameClassName, bioClassName, socialLinksClassName, socialLinkClassName, socialIconClassName, newsletterCardClassName, newsletterHeadingClassName, newsletterDescriptionClassName, linksClassName, linkClassName, linkIconClassName, linkLabelClassName, linkChevronClassName, footerClassName, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: LinkPageNewsletterSocialProps): React.JSX.Element;
 
 export { LinkPageNewsletterSocial, type LinkPageNewsletterSocialProps, type NewsletterSocialLink, type NewsletterSocialSocialLink };

package/dist/link-page-newsletter-social.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { PageSpeedFormConfig } from '@page-speed/forms/integration';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
-import { I as ImageItem, A as ActionConfig, a as SocialLinkItem, O as OptixFlowConfig } from './blocks-k17uluAz.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-hxnFe3w6.js';
+import { FormEngineProps } from '@page-speed/forms/integration';
+import { I as ImageItem, A as ActionConfig, a as SocialLinkItem, O as OptixFlowConfig } from './blocks-DRE-f6cS.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-8mtEHxev.js';
 import 'class-variance-authority/types';
 
 /**
@@ -54,17 +54,17 @@ interface LinkPageNewsletterSocialProps {
      */
     newsletterDescription?: React.ReactNode;
     /**
-     * Email input placeholder text
+     * Full form engine setup and props
      */
-    emailPlaceholder?: string;
+    formEngineSetup?: FormEngineProps;
     /**
-     * Submit button text (used when submitAction is not provided)
+     * Submit button configuration
      */
-    buttonText?: React.ReactNode;
+    buttonAction?: ActionConfig;
     /**
-     * Submit action configuration
+     * Helper text below form
      */
-    submitAction?: ActionConfig;
+    helperText?: React.ReactNode;
     /**
      * Custom slot for rendering the newsletter card
      */
@@ -73,14 +73,6 @@ interface LinkPageNewsletterSocialProps {
      * Custom slot for rendering form fields inside the newsletter card
      */
     formSlot?: React.ReactNode;
-    /**
-     * Label to show while submitting
-     */
-    submittingLabel?: React.ReactNode;
-    /**
-     * Icon to show while submitting
-     */
-    submittingIcon?: React.ReactNode;
     /**
      * Array of links to display below the newsletter
      */
@@ -161,18 +153,6 @@ interface LinkPageNewsletterSocialProps {
      * Additional CSS classes for the newsletter description
      */
     newsletterDescriptionClassName?: string;
-    /**
-     * Additional CSS classes for the form container
-     */
-    formClassName?: string;
-    /**
-     * Additional CSS classes for the input field
-     */
-    inputClassName?: string;
-    /**
-     * Additional CSS classes for the submit button
-     */
-    submitButtonClassName?: string;
     /**
      * Additional CSS classes for the links container
      */
@@ -217,60 +197,6 @@ interface LinkPageNewsletterSocialProps {
      * Additional CSS classes for the pattern overlay
      */
     patternClassName?: string;
-    /**
-     * 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 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, campaign: "link-page" })
-     *   });
-     * }}
-     */
-    onSubmit?: (email: string) => void | Promise<void>;
-    /**
-     * 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;
     /**
      * OptixFlow image optimization configuration
      */
@@ -281,38 +207,36 @@ interface LinkPageNewsletterSocialProps {
  *
  * This component provides a link page with:
  * - Profile section with avatar, name, and bio
- * - Newsletter signup form with email validation
- * - Form integration with @page-speed/forms library
+ * - Newsletter signup form powered by FormEngine
  * - Links section below the newsletter
  * - Social media links
  * - Light and dark theme support
  *
- * The newsletter form supports:
- * - Universal REST API integration via formConfig
- * - Custom submission handlers via onSubmit
- * - Success and error callbacks
- * - DashTrack Rails backend integration
+ * The newsletter form is powered by `FormEngine` from `@page-speed/forms/integration`,
+ * which handles validation, submission, error handling, and success states.
  *
  * @example
  * ```tsx
- * // Basic usage
+ * // Basic usage with FormEngine
  * <LinkPageNewsletterSocial
  *   name="Content Creator"
  *   bio="Weekly tips on growing your audience"
  *   newsletterHeading="Join my newsletter"
- *   formConfig={{ endpoint: "/api/subscribe" }}
+ *   formEngineSetup={{
+ *     formConfig: { endpoint: "/api/subscribe", format: "json" },
+ *   }}
  * />
  *
- * // With custom submission handler
+ * // With custom button action
  * <LinkPageNewsletterSocial
  *   name="Content Creator"
- *   onSubmit={async (email) => {
- *     await myCustomApi.subscribe(email);
+ *   formEngineSetup={{
+ *     formConfig: { endpoint: "/api/subscribe" },
  *   }}
- *   onSuccess={() => toast.success("Subscribed!")}
+ *   buttonAction={{ label: "Subscribe Now", variant: "default" }}
  * />
  * ```
  */
-declare function LinkPageNewsletterSocial({ name, bio, avatar, avatarUrl, profileSlot, newsletterHeading, newsletterDescription, emailPlaceholder, buttonText, submitAction, newsletterSlot, formSlot, submittingLabel, submittingIcon, links, linksSlot, linkChevronIcon, socialLinks, socialLinksSlot, footerAction, footerSlot, className, contentClassName, headerClassName, avatarClassName, nameClassName, bioClassName, socialLinksClassName, socialLinkClassName, socialIconClassName, newsletterCardClassName, newsletterHeadingClassName, newsletterDescriptionClassName, formClassName, inputClassName, submitButtonClassName, linksClassName, linkClassName, linkIconClassName, linkLabelClassName, linkChevronClassName, footerClassName, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, formConfig, onSubmit, onSuccess, onError, optixFlowConfig, }: LinkPageNewsletterSocialProps): React.JSX.Element;
+declare function LinkPageNewsletterSocial({ name, bio, avatar, avatarUrl, profileSlot, newsletterHeading, newsletterDescription, formEngineSetup, buttonAction, helperText, newsletterSlot, formSlot, links, linksSlot, linkChevronIcon, socialLinks, socialLinksSlot, footerAction, footerSlot, className, contentClassName, headerClassName, avatarClassName, nameClassName, bioClassName, socialLinksClassName, socialLinkClassName, socialIconClassName, newsletterCardClassName, newsletterHeadingClassName, newsletterDescriptionClassName, linksClassName, linkClassName, linkIconClassName, linkLabelClassName, linkChevronClassName, footerClassName, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: LinkPageNewsletterSocialProps): React.JSX.Element;
 
 export { LinkPageNewsletterSocial, type LinkPageNewsletterSocialProps, type NewsletterSocialLink, type NewsletterSocialSocialLink };

package/dist/link-page-newsletter-social.js

@@ -1,18 +1,15 @@
 "use client";
 import * as React from 'react';
 import React__default, { useMemo } from 'react';
-import { useForm, Field, Form } from '@page-speed/forms';
-import { TextInput as TextInput$1 } from '@page-speed/forms/inputs';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Icon } from '@page-speed/icon';
-import { submitPageSpeedForm, PageSpeedFormSubmissionError, isValidEmail } from '@page-speed/forms/integration';
 import { Img } from '@page-speed/img';
+import { FormEngine } from '@page-speed/forms/integration';
 
 // components/blocks/link-page/link-page-newsletter-social.tsx
-var TextInput = TextInput$1;
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -813,6 +810,22 @@ var Section = React__default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var DEFAULT_STYLE_RULES = {
+  formContainer: "w-full flex flex-col gap-3",
+  fieldsContainer: "",
+  fieldClassName: "",
+  formClassName: ""
+};
+var DEFAULT_FORM_FIELDS = [
+  {
+    name: "email",
+    type: "email",
+    label: "Email Address",
+    placeholder: "Enter your email",
+    required: true,
+    columnSpan: 12
+  }
+];
 function LinkPageNewsletterSocial({
   name,
   bio,
@@ -821,13 +834,11 @@ function LinkPageNewsletterSocial({
   profileSlot,
   newsletterHeading,
   newsletterDescription,
-  emailPlaceholder,
-  buttonText,
-  submitAction,
+  formEngineSetup,
+  buttonAction,
+  helperText,
   newsletterSlot,
   formSlot,
-  submittingLabel,
-  submittingIcon = /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/loader-2", size: 16, className: "animate-spin" }),
   links,
   linksSlot,
   linkChevronIcon,
@@ -847,9 +858,6 @@ function LinkPageNewsletterSocial({
   newsletterCardClassName,
   newsletterHeadingClassName,
   newsletterDescriptionClassName,
-  formClassName,
-  inputClassName,
-  submitButtonClassName,
   linksClassName,
   linkClassName,
   linkIconClassName,
@@ -862,75 +870,15 @@ function LinkPageNewsletterSocial({
   pattern,
   patternOpacity,
   patternClassName,
-  formConfig,
-  onSubmit,
-  onSuccess,
-  onError,
   optixFlowConfig
 }) {
-  const resolvedBackground = background;
-  const resolvedAvatar = avatar || (avatarUrl ? {
-    src: avatarUrl,
-    alt: typeof name === "string" ? name : "Profile avatar"
-  } : void 0);
-  const form = useForm({
-    initialValues: {
-      email: ""
-    },
-    validationSchema: {
-      email: (value) => {
-        if (!value) return "Email is required";
-        if (!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 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 PageSpeedFormSubmissionError && error.formErrors) {
-          helpers.setErrors(error.formErrors);
-        }
-        onError?.(error);
-        throw error;
-      }
-    }
-  });
-  const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
-  const resolvedSubmitAction = useMemo(() => {
-    if (submitAction) {
-      return {
-        ...submitAction,
-        label: buttonText || submitAction?.label || "Submit",
-        variant: submitAction?.variant || "default",
-        size: submitAction?.size || "lg"
-      };
-    }
-    return {
-      label: buttonText || "Submit",
-      variant: "default",
-      size: "lg"
-    };
-  }, [submitAction, buttonText]);
   const resolvedChevronIcon = linkChevronIcon ?? /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-right", size: 16 });
   const renderProfile = useMemo(() => {
     if (profileSlot) return profileSlot;
+    const resolvedAvatar = avatar || (avatarUrl ? {
+      src: avatarUrl,
+      alt: typeof name === "string" ? name : "Profile avatar"
+    } : void 0);
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -966,11 +914,11 @@ function LinkPageNewsletterSocial({
     );
   }, [
     profileSlot,
-    resolvedAvatar,
+    avatar,
+    avatarUrl,
     avatarClassName,
     optixFlowConfig,
     name,
-    resolvedBackground,
     nameClassName,
     bio,
     bioClassName,
@@ -1021,63 +969,43 @@ function LinkPageNewsletterSocial({
     socialLinks,
     socialLinksClassName,
     socialIconClassName,
-    resolvedBackground,
     socialLinkClassName
   ]);
-  const renderFormFields = useMemo(() => {
+  const renderForm = useMemo(() => {
     if (formSlot) return formSlot;
-    const {
-      label,
-      icon,
-      iconAfter,
-      children,
-      className: actionClassName,
-      ...pressableProps
-    } = resolvedSubmitAction;
+    if (!formEngineSetup) return null;
+    const defaultButtonAction = {
+      label: "Submit",
+      variant: "default"
+    };
+    const action = buttonAction || defaultButtonAction;
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Field, { name: "email", children: ({ field, meta }) => /* @__PURE__ */ jsx(
-        TextInput,
-        {
-          ...field,
-          type: "email",
-          placeholder: emailPlaceholder,
-          error: meta.touched && !!meta.error,
-          className: cn("w-full", inputClassName),
-          "aria-label": emailPlaceholder || "Email address"
-        }
-      ) }),
       /* @__PURE__ */ jsx(
-        Pressable,
+        FormEngine,
         {
-          componentType: "button",
-          type: "submit",
-          variant: resolvedSubmitAction.variant ?? "default",
-          size: resolvedSubmitAction.size ?? "lg",
-          className: cn("w-full", submitButtonClassName, actionClassName),
-          asButton: true,
-          disabled: form.isSubmitting,
-          ...pressableProps,
-          children: form.isSubmitting ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            submittingIcon,
-            /* @__PURE__ */ jsx("span", { children: submittingLabel })
-          ] }) : children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
+          formEngineSetup: {
+            ...formEngineSetup,
+            formLayoutSettings: {
+              ...formEngineSetup.formLayoutSettings,
+              formLayout: "button-group",
+              buttonGroupSetup: {
+                ...formEngineSetup.formLayoutSettings?.buttonGroupSetup,
+                size: "lg",
+                submitLabel: /* @__PURE__ */ jsxs(Fragment, { children: [
+                  action.label,
+                  action.iconAfter
+                ] }),
+                submitVariant: action.variant || "default"
+              }
+            }
+          },
+          defaultFields: DEFAULT_FORM_FIELDS,
+          defaultStyleRules: DEFAULT_STYLE_RULES
         }
-      )
+      ),
+      helperText && (typeof helperText === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm mt-2 text-center"), children: helperText }) : helperText)
     ] });
-  }, [
-    formSlot,
-    resolvedSubmitAction,
-    emailPlaceholder,
-    inputClassName,
-    submitButtonClassName,
-    form.isSubmitting,
-    submittingIcon,
-    submittingLabel
-  ]);
+  }, [formSlot, formEngineSetup, buttonAction, helperText]);
   const renderNewsletter = useMemo(() => {
     if (newsletterSlot) return newsletterSlot;
     return /* @__PURE__ */ jsxs(
@@ -1102,16 +1030,7 @@ function LinkPageNewsletterSocial({
             ) : /* @__PURE__ */ jsx("div", { className: newsletterHeadingClassName, children: newsletterHeading })),
             newsletterDescription && (typeof newsletterDescription === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm", newsletterDescriptionClassName), children: newsletterDescription }) : /* @__PURE__ */ jsx("div", { className: newsletterDescriptionClassName, children: newsletterDescription }))
           ] }),
-          /* @__PURE__ */ jsx(
-            Form,
-            {
-              form,
-              action: formConfig?.endpoint,
-              method: formMethod,
-              className: cn("space-y-3", formClassName),
-              children: renderFormFields
-            }
-          )
+          renderForm
         ]
       }
     );
@@ -1121,13 +1040,8 @@ function LinkPageNewsletterSocial({
     newsletterHeading,
     newsletterHeadingClassName,
     newsletterDescription,
-    resolvedBackground,
     newsletterDescriptionClassName,
-    form,
-    formConfig?.endpoint,
-    formMethod,
-    formClassName,
-    renderFormFields
+    renderForm
   ]);
   const renderLinks = useMemo(() => {
     if (linksSlot) return linksSlot;
@@ -1200,7 +1114,6 @@ function LinkPageNewsletterSocial({
     links,
     linksClassName,
     linkIconClassName,
-    resolvedBackground,
     linkClassName,
     linkLabelClassName,
     linkChevronClassName,
@@ -1236,11 +1149,11 @@ function LinkPageNewsletterSocial({
         ] })
       }
     );
-  }, [footerSlot, footerAction, resolvedBackground, footerClassName]);
+  }, [footerSlot, footerAction, footerClassName]);
   return /* @__PURE__ */ jsx(
     Section,
     {
-      background: resolvedBackground,
+      background,
       spacing,
       className,
       pattern,