@opensite/ui 2.4.9 → 2.5.1

package/dist/footer-newsletter-contact.d.ts

@@ -1,11 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
 import { F as FooterSocialLink } from './types-Cs1jk79n.js';
-import { PageSpeedFormConfig } from '@page-speed/forms/integration';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-C2nDtDDs.js';
-import 'react';
-import './blocks-Y0T7PIol.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-BphRfrhZ.js';
+import { FormEngineProps } from '@page-speed/forms/integration';
+import { A as ActionConfig } from './blocks-BzFuQGP0.js';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 import '@opensite/hooks/usePlatformFromUrl';
 
@@ -37,11 +37,11 @@ interface FooterNewsletterContactDetail {
     /**
      * Display text
      */
-    text: string;
+    label: React.ReactNode;
     /**
      * Link type: "none" | "email" | "phone"
      */
-    type: "none" | "email" | "phone";
+    type?: "none" | "email" | "phone";
     /**
      * Link value (email address or phone number)
      */
@@ -56,14 +56,6 @@ interface FooterNewsletterContactProps {
      * Newsletter description
      */
     newsletterDescription?: string;
-    /**
-     * Newsletter placeholder text
-     */
-    newsletterPlaceholder?: string;
-    /**
-     * Newsletter button text
-     */
-    newsletterButtonText?: string;
     /**
      * Footer link sections
      */
@@ -112,24 +104,21 @@ interface FooterNewsletterContactProps {
         compression?: number;
     };
     /**
-     * Optional form submission configuration for newsletter signup.
-     * Requires `token` to render the newsletter UI.
+     * Full form engine setup and props
      */
-    formConfig?: PageSpeedFormConfig & {
-        token: string;
-    };
+    formEngineSetup?: FormEngineProps;
     /**
-     * Optional custom submission handler for newsletter signup.
+     * Submit button configuration
      */
-    onSubmit?: (email: string) => void | Promise<void>;
+    buttonAction?: ActionConfig;
     /**
-     * Optional success callback invoked after successful submission.
+     * Custom slot for the form (overrides form props)
      */
-    onSuccess?: (data: unknown) => void;
+    formSlot?: React.ReactNode;
     /**
-     * Optional error callback invoked if submission fails.
+     * Additional CSS classes for the newsletter form
      */
-    onError?: (error: Error) => void;
+    newsletterFormClassName?: string;
 }
 /**
  * Footer Newsletter Contact - A comprehensive footer with newsletter signup,
@@ -139,11 +128,17 @@ interface FooterNewsletterContactProps {
  * Key features: Newsletter form, contact details with icons, social links.
  * Best for: E-commerce sites, business websites, service-based companies.
  *
+ * The newsletter form is powered by `FormEngine` from `@page-speed/forms/integration`,
+ * which handles validation, submission, error handling, and success states.
+ *
  * @example
  * ```tsx
  * <FooterNewsletterContact
  *   newsletterTitle="Newsletter"
  *   newsletterDescription="Join our newsletter for exclusive deals."
+ *   formEngineSetup={{
+ *     formConfig: { endpoint: "/api/subscribe", format: "json" },
+ *   }}
  *   footerLinks={[
  *     { title: "Information", items: [...] },
  *   ]}
@@ -153,6 +148,6 @@ interface FooterNewsletterContactProps {
  * />
  * ```
  */
-declare function FooterNewsletterContact({ newsletterTitle, newsletterDescription, newsletterPlaceholder, newsletterButtonText, footerLinks, contactDetails, socialLinks, logo, copyright, className, background, containerClassName, spacing, pattern, patternOpacity, optixFlowConfig, formConfig, onSubmit, onSuccess, onError, }: FooterNewsletterContactProps): react_jsx_runtime.JSX.Element;
+declare function FooterNewsletterContact({ newsletterTitle, newsletterDescription, footerLinks, contactDetails, socialLinks, logo, copyright, className, background, containerClassName, spacing, pattern, patternOpacity, optixFlowConfig, formEngineSetup, buttonAction, formSlot, newsletterFormClassName, }: FooterNewsletterContactProps): react_jsx_runtime.JSX.Element;
 
 export { FooterNewsletterContact, type FooterNewsletterContactDetail, type FooterNewsletterContactLink, type FooterNewsletterContactProps, type FooterNewsletterContactSection, FooterSocialLink };

package/dist/footer-newsletter-contact.js

@@ -1,8 +1,6 @@
 "use client";
 import * as React from 'react';
 import React__default, { useMemo } from 'react';
-import { useForm, Form, Field } 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';
@@ -10,11 +8,10 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Img } from '@page-speed/img';
 import { Icon } from '@page-speed/icon';
 import { usePlatformFromUrl } from '@opensite/hooks/usePlatformFromUrl';
-import { submitPageSpeedForm, PageSpeedFormSubmissionError, isValidEmail } from '@page-speed/forms/integration';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import { FormEngine } from '@page-speed/forms/integration';
 
 // components/blocks/footers/footer-newsletter-contact.tsx
-var TextInput = TextInput$1;
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -1457,7 +1454,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);
@@ -1522,11 +1520,25 @@ var Section = React__default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var DEFAULT_STYLE_RULES = {
+  formContainer: "space-y-4",
+  fieldsContainer: "",
+  fieldClassName: "",
+  formClassName: ""
+};
+var DEFAULT_FORM_FIELDS = [
+  {
+    name: "email",
+    type: "email",
+    label: "Email Address",
+    placeholder: "Enter your email",
+    required: true,
+    columnSpan: 12
+  }
+];
 function FooterNewsletterContact({
   newsletterTitle,
   newsletterDescription,
-  newsletterPlaceholder,
-  newsletterButtonText,
   footerLinks,
   contactDetails,
   socialLinks,
@@ -1539,12 +1551,12 @@ function FooterNewsletterContact({
   pattern,
   patternOpacity,
   optixFlowConfig,
-  formConfig,
-  onSubmit,
-  onSuccess,
-  onError
+  formEngineSetup,
+  buttonAction,
+  formSlot,
+  newsletterFormClassName
 }) {
-  const linkSectionsContent = useMemo(() => {
+  const linkSectionsContent = React.useMemo(() => {
     if (!footerLinks || footerLinks.length === 0) return null;
     return footerLinks.map((section, idx) => /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx("h2", { className: "mb-6 text-sm font-medium uppercase leading-tight opacity-70", children: section.title }),
@@ -1558,21 +1570,21 @@ function FooterNewsletterContact({
       ) }, itemIdx)) })
     ] }, idx));
   }, [footerLinks]);
-  const contactDetailsContent = useMemo(() => {
+  const contactDetailsContent = React.useMemo(() => {
     if (!contactDetails || contactDetails.length === 0) return null;
-    return contactDetails.map((item, idx) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-3", children: [
-      /* @__PURE__ */ jsx(DynamicIcon, { name: item.icon, size: 16, className: "shrink-0" }),
-      /* @__PURE__ */ jsx("div", { className: "flex-1", children: item.type === "none" ? /* @__PURE__ */ jsx("p", { children: item.text }) : /* @__PURE__ */ jsx(
+    return contactDetails.map((item, idx) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-3", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center shrink-0 mt-1", children: /* @__PURE__ */ jsx(DynamicIcon, { name: item.icon, size: 16 }) }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
         Pressable,
         {
-          href: item.type === "email" ? `mailto:${item.link}` : `tel:${item.link}`,
+          href: item.link,
           className: "underline-offset-4 hover:underline",
-          children: item.text
+          children: item.label
         }
       ) })
     ] }, idx));
   }, [contactDetails]);
-  const socialLinksContent = useMemo(() => {
+  const socialLinksContent = React.useMemo(() => {
     if (!socialLinks || socialLinks.length === 0) return null;
     return socialLinks.map((social, idx) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
       SocialLinkIcon,
@@ -1586,46 +1598,42 @@ function FooterNewsletterContact({
       }
     ) }, idx));
   }, [socialLinks]);
-  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();
+  const renderForm = React.useMemo(() => {
+    if (formSlot) return formSlot;
+    if (!formEngineSetup) return null;
+    const defaultButtonAction = {
+      label: "",
+      variant: "default",
+      icon: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
+    };
+    const action = buttonAction || defaultButtonAction;
+    return /* @__PURE__ */ jsx(
+      FormEngine,
+      {
+        formEngineSetup: {
+          ...formEngineSetup,
+          formLayoutSettings: {
+            ...formEngineSetup.formLayoutSettings,
+            formLayout: "button-group",
+            buttonGroupSetup: {
+              ...formEngineSetup.formLayoutSettings?.buttonGroupSetup,
+              size: "default",
+              submitLabel: action.icon || action.label,
+              submitVariant: action.variant || "default"
+            }
           }
-          onSuccess?.(result);
-        }
-      } catch (error) {
-        if (error instanceof PageSpeedFormSubmissionError && error.formErrors) {
-          helpers.setErrors(error.formErrors);
+        },
+        defaultFields: DEFAULT_FORM_FIELDS,
+        defaultStyleRules: {
+          ...DEFAULT_STYLE_RULES,
+          formContainer: cn(
+            DEFAULT_STYLE_RULES.formContainer,
+            newsletterFormClassName
+          )
         }
-        onError?.(error);
-        throw error;
       }
-    }
-  });
-  const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
+    );
+  }, [formSlot, formEngineSetup, buttonAction, newsletterFormClassName]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -1636,44 +1644,11 @@ function FooterNewsletterContact({
       className,
       containerClassName,
       children: /* @__PURE__ */ jsxs("div", { className: "space-y-10", children: [
-        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-x-16 gap-y-8 md:grid-cols-2 xl:grid-cols-4", children: [
-          formConfig?.token && (newsletterTitle || newsletterDescription || newsletterButtonText) && /* @__PURE__ */ jsxs("div", { className: "space-y-6 col-span-2 md:col-span-1", children: [
-            newsletterTitle && /* @__PURE__ */ jsx("h3", { className: "text-3xl font-medium font-serif leading-none", children: newsletterTitle }),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-x-6 md:gap-x-8 lg:gap-x-12 xl:gap-x-16 gap-y-8 md:grid-cols-2 lg:grid-cols-4", children: [
+          formEngineSetup && /* @__PURE__ */ jsxs("div", { className: "space-y-4 md:space-y-6 col-span-2 md:col-span-1", children: [
+            newsletterTitle && /* @__PURE__ */ jsx("h3", { className: "text-2xl md:text-3xl font-medium leading-none", children: newsletterTitle }),
             newsletterDescription && /* @__PURE__ */ jsx("p", { className: "font-light leading-normal", children: newsletterDescription }),
-            /* @__PURE__ */ jsxs(
-              Form,
-              {
-                form,
-                action: formConfig?.endpoint,
-                method: formMethod,
-                className: "space-y-4",
-                children: [
-                  /* @__PURE__ */ jsx(Field, { name: "email", children: ({ field, meta }) => /* @__PURE__ */ jsx(
-                    TextInput,
-                    {
-                      ...field,
-                      type: "email",
-                      placeholder: newsletterPlaceholder,
-                      error: meta.touched && !!meta.error,
-                      className: "flex h-10 w-full rounded-md border border-input px-3 py-2 text-sm ring-offset-background placeholder:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-                      "aria-label": newsletterPlaceholder || "Email address"
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsx(
-                    Pressable,
-                    {
-                      componentType: "button",
-                      type: "submit",
-                      variant: "default",
-                      asButton: true,
-                      className: "w-full",
-                      disabled: form.isSubmitting,
-                      children: newsletterButtonText
-                    }
-                  )
-                ]
-              }
-            )
+            renderForm
           ] }),
           linkSectionsContent,
           (contactDetailsContent || socialLinksContent) && /* @__PURE__ */ jsxs("div", { className: "col-span-2 md:col-span-1", children: [

package/dist/footer-newsletter-grid.cjs

@@ -1368,7 +1368,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);

package/dist/footer-newsletter-grid.d.cts

@@ -1,10 +1,10 @@
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-DcLp6ycJ.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-B658AD6n.cjs';
 import { F as FooterSocialLink } from './types-Cs1jk79n.cjs';
 import 'react';
 import 'react/jsx-runtime';
-import './blocks-C1EhIN1e.cjs';
+import './blocks-DUr75v0S.cjs';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 import '@opensite/hooks/usePlatformFromUrl';
 

package/dist/footer-newsletter-grid.d.ts

@@ -1,10 +1,10 @@
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-C2nDtDDs.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-BphRfrhZ.js';
 import { F as FooterSocialLink } from './types-Cs1jk79n.js';
 import 'react';
 import 'react/jsx-runtime';
-import './blocks-Y0T7PIol.js';
+import './blocks-BzFuQGP0.js';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 import '@opensite/hooks/usePlatformFromUrl';
 

package/dist/footer-newsletter-grid.js

@@ -1347,7 +1347,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);

package/dist/footer-newsletter-minimal.cjs

@@ -2,8 +2,6 @@
 'use strict';
 
 var React2 = require('react');
-var forms = require('@page-speed/forms');
-var inputs = require('@page-speed/forms/inputs');
 var framerMotion = require('framer-motion');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
@@ -34,7 +32,6 @@ function _interopNamespace(e) {
 var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
 
 // components/blocks/footers/footer-newsletter-minimal.tsx
-var TextInput = inputs.TextInput;
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
@@ -1386,7 +1383,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);
@@ -1451,6 +1449,22 @@ var Section = React2__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var DEFAULT_STYLE_RULES = {
+  formContainer: "flex w-full items-end border-b border-b-foreground/10",
+  fieldsContainer: "",
+  fieldClassName: "",
+  formClassName: ""
+};
+var DEFAULT_FORM_FIELDS = [
+  {
+    name: "email",
+    type: "email",
+    label: "Email Address",
+    placeholder: "Enter your email",
+    required: true,
+    columnSpan: 12
+  }
+];
 function FooterNewsletterMinimal({
   heading,
   supportLabel,
@@ -1459,7 +1473,6 @@ function FooterNewsletterMinimal({
   socialLinks,
   footerLinks,
   newsletterLabel,
-  newsletterPlaceholder,
   brandText,
   copyright,
   location,
@@ -1475,8 +1488,6 @@ function FooterNewsletterMinimal({
   socialLinkClassName,
   newsletterSectionClassName,
   newsletterFormClassName,
-  newsletterInputClassName,
-  newsletterButtonClassName,
   bottomGridClassName,
   locationClassName,
   footerLinksClassName,
@@ -1489,12 +1500,11 @@ function FooterNewsletterMinimal({
   spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
-  formConfig,
-  onSubmit,
-  onSuccess,
-  onError
+  formEngineSetup,
+  buttonAction,
+  formSlot
 }) {
-  const navLinksContent = React2.useMemo(() => {
+  const navLinksContent = React2__namespace.useMemo(() => {
     if (!navLinks || navLinks.length === 0) return null;
     return navLinks.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
       Pressable,
@@ -1505,7 +1515,7 @@ function FooterNewsletterMinimal({
       }
     ) }, idx));
   }, [navLinks, navLinkClassName]);
-  const socialLinksContent = React2.useMemo(() => {
+  const socialLinksContent = React2__namespace.useMemo(() => {
     if (!socialLinks || socialLinks.length === 0) return null;
     return socialLinks.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
       SocialLinkIcon,
@@ -1521,7 +1531,7 @@ function FooterNewsletterMinimal({
       }
     ) }, idx));
   }, [socialLinks, socialLinkClassName]);
-  const footerLinksContent = React2.useMemo(() => {
+  const footerLinksContent = React2__namespace.useMemo(() => {
     if (!footerLinks || footerLinks.length === 0) return null;
     return footerLinks.map((item) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
       Pressable,
@@ -1535,46 +1545,42 @@ function FooterNewsletterMinimal({
       }
     ) }, item.label));
   }, [footerLinks, footerLinkClassName]);
-  const form = forms.useForm({
-    initialValues: {
-      email: ""
-    },
-    validationSchema: {
-      email: (value) => {
-        if (!value) return "Email is required";
-        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();
+  const renderForm = React2__namespace.useMemo(() => {
+    if (formSlot) return formSlot;
+    if (!formEngineSetup) return null;
+    const defaultButtonAction = {
+      label: "",
+      variant: "default",
+      icon: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 20 })
+    };
+    const action = buttonAction || defaultButtonAction;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      integration.FormEngine,
+      {
+        formEngineSetup: {
+          ...formEngineSetup,
+          formLayoutSettings: {
+            ...formEngineSetup.formLayoutSettings,
+            formLayout: "button-group",
+            buttonGroupSetup: {
+              ...formEngineSetup.formLayoutSettings?.buttonGroupSetup,
+              size: "default",
+              submitLabel: action.icon || action.label,
+              submitVariant: action.variant || "default"
+            }
           }
-          onSuccess?.(result);
-        }
-      } catch (error) {
-        if (error instanceof integration.PageSpeedFormSubmissionError && error.formErrors) {
-          helpers.setErrors(error.formErrors);
+        },
+        defaultFields: DEFAULT_FORM_FIELDS,
+        defaultStyleRules: {
+          ...DEFAULT_STYLE_RULES,
+          formContainer: cn(
+            DEFAULT_STYLE_RULES.formContainer,
+            newsletterFormClassName
+          )
         }
-        onError?.(error);
-        throw error;
       }
-    }
-  });
-  const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
+    );
+  }, [formSlot, formEngineSetup, buttonAction, newsletterFormClassName]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -1642,50 +1648,9 @@ function FooterNewsletterMinimal({
               newsletterSectionClassName
             ),
             children: [
-              formConfig?.token && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full max-w-md flex-col gap-10", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1 text-sm font-light tracking-tight lg:text-base", children: [
+              formEngineSetup && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full max-w-md flex-col gap-10", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1 text-sm font-light tracking-tight lg:text-base", children: [
                 newsletterLabel && /* @__PURE__ */ jsxRuntime.jsx("p", { children: newsletterLabel }),
-                /* @__PURE__ */ jsxRuntime.jsxs(
-                  forms.Form,
-                  {
-                    form,
-                    action: formConfig?.endpoint,
-                    method: formMethod,
-                    className: cn(
-                      "flex w-full items-end border-b border-b-foreground/10",
-                      newsletterFormClassName
-                    ),
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "email", className: "flex-1", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsx(
-                        TextInput,
-                        {
-                          ...field,
-                          type: "email",
-                          placeholder: newsletterPlaceholder,
-                          error: meta.touched && !!meta.error,
-                          className: cn(
-                            "mt-10 h-auto w-full rounded-none border-0 bg-transparent p-0 uppercase shadow-none placeholder:text-foreground/20 focus:outline-none focus:ring-0 lg:text-base",
-                            newsletterInputClassName
-                          ),
-                          "aria-label": newsletterPlaceholder || "Email address"
-                        }
-                      ) }),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        Pressable,
-                        {
-                          componentType: "button",
-                          type: "submit",
-                          className: cn(
-                            "p-2 hover:opacity-80",
-                            newsletterButtonClassName
-                          ),
-                          asButton: false,
-                          disabled: form.isSubmitting,
-                          children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 20 })
-                        }
-                      )
-                    ]
-                  }
-                )
+                renderForm
               ] }) }),
               /* @__PURE__ */ jsxRuntime.jsxs(
                 "div",