@opensite/ui 2.3.3 → 2.3.4

package/dist/footer-split-image-accordion.cjs

@@ -1,17 +1,16 @@
 "use client";
 'use strict';
 
-var forms = require('@page-speed/forms');
+var React = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var img = require('@page-speed/img');
 var icon = require('@page-speed/icon');
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
 var classVarianceAuthority = require('class-variance-authority');
 var usePlatformFromUrl = require('@opensite/hooks/usePlatformFromUrl');
-var integration = require('@page-speed/forms/integration');
 var SeparatorPrimitive = require('@radix-ui/react-separator');
+var integration = require('@page-speed/forms/integration');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -1586,9 +1585,24 @@ var Section = React__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
+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 FooterSplitImageAccordion({
   newsletterTitle,
-  emailPlaceholder,
   footerLinks,
   socialLinks,
   paymentPlatforms,
@@ -1597,7 +1611,7 @@ function FooterSplitImageAccordion({
   copyright,
   background,
   containerClassName = "w-screen px-0 sm:px-0 lg:px-0 max-w-screen relative z-10",
-  spacing = "py-6 md:py-0",
+  spacing = "none",
   pattern,
   patternOpacity,
   className,
@@ -1619,51 +1633,46 @@ function FooterSplitImageAccordion({
   copyrightClassName,
   submenuLinksClassName,
   optixFlowConfig,
-  formConfig,
-  onSubmit,
-  onSuccess,
-  onError
+  formEngineSetup,
+  buttonAction,
+  formSlot
 }) {
-  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 = React__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: 16 })
+    };
+    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,
     {
@@ -1704,40 +1713,7 @@ function FooterSplitImageAccordion({
                 children: newsletterTitle
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              forms.Form,
-              {
-                form,
-                action: formConfig?.endpoint,
-                method: formMethod,
-                className: cn("flex items-stretch", newsletterFormClassName),
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "email", className: "flex-1", children: ({ field }) => /* @__PURE__ */ jsxRuntime.jsx(
-                    "input",
-                    {
-                      ...field,
-                      type: "email",
-                      placeholder: emailPlaceholder,
-                      className: "flex h-10 w-full rounded-l-md rounded-r-none border border-r-0 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 disabled:cursor-not-allowed disabled:opacity-50",
-                      "aria-label": emailPlaceholder
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    Pressable,
-                    {
-                      componentType: "button",
-                      type: "submit",
-                      variant: "default",
-                      size: "icon",
-                      asButton: true,
-                      className: "rounded-l-none rounded-r-md shrink-0 h-10",
-                      disabled: form.isSubmitting,
-                      children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
-                    }
-                  )
-                ]
-              }
-            ),
+            renderForm,
             socialLinks && socialLinks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
               "ul",
               {
@@ -1762,19 +1738,31 @@ function FooterSplitImageAccordion({
             footerData.logo && /* @__PURE__ */ jsxRuntime.jsx(
               FooterLogo,
               {
-                logo: { ...footerData.logo, url: footerData.logoUrl },
+                logo: { ...footerData.logo, url: footerData.logo.url || "/" },
                 logoClassName: cn("inline-block max-w-60", logoClassName),
                 optixFlowConfig
               }
             ),
-            footerData.title && /* @__PURE__ */ jsxRuntime.jsx(
+            footerData.heading && /* @__PURE__ */ jsxRuntime.jsx(
               "h4",
               {
-                className: cn("text-xl font-semibold", brandTitleClassName),
-                children: footerData.title
+                className: cn(
+                  "text-xl font-semibold text-pretty",
+                  brandTitleClassName
+                ),
+                children: footerData.heading
               }
             ),
-            footerData.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("opacity-80", brandDescriptionClassName), children: footerData.description })
+            footerData.description && /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: cn(
+                  "opacity-80 text-balance",
+                  brandDescriptionClassName
+                ),
+                children: footerData.description
+              }
+            )
           ] }),
           footerLinks && footerLinks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
             "div",

package/dist/footer-split-image-accordion.d.cts

@@ -1,10 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { PaymentPlatformName } from './payment-platform-icon.cjs';
-import { PageSpeedFormConfig } from '@page-speed/forms/integration';
 import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-BFOWojwp.cjs';
-import { O as OptixFlowConfig } from './blocks-tmd_MRJv.cjs';
+import { O as OptixFlowConfig, A as ActionConfig } from './blocks-tmd_MRJv.cjs';
 import { F as FooterSocialLink } from './types-Cs1jk79n.cjs';
+import { FormEngineProps } from '@page-speed/forms/integration';
 import 'class-variance-authority';
 import './button-variants-8mtEHxev.cjs';
 import 'class-variance-authority/types';
@@ -40,29 +40,26 @@ interface FooterSplitImageAccordionData {
     /** Hero image configuration */
     image: {
         src: string;
-        alt: string;
+        alt?: string;
     };
     /** Logo configuration with light/dark variants */
-    logo: {
-        light: string;
-        dark: string;
+    logo?: {
+        src: string;
+        /** Logo link URL */
+        url?: string;
+        /** Brand title */
+        alt?: string;
     };
-    /** Logo link URL */
-    logoUrl: string;
-    /** Brand title */
-    title: string;
+    /** Footer heading */
+    heading?: string;
     /** Brand description */
-    description: string;
+    description?: string;
 }
 interface FooterSplitImageAccordionProps {
     /**
      * Newsletter title
      */
     newsletterTitle?: React.ReactNode;
-    /**
-     * Email input placeholder text
-     */
-    emailPlaceholder?: string;
     /**
      * Footer link sections
      */
@@ -184,21 +181,17 @@ interface FooterSplitImageAccordionProps {
      */
     optixFlowConfig?: OptixFlowConfig;
     /**
-     * Optional form submission configuration for newsletter signup.
+     * Full form engine setup and props
      */
-    formConfig?: PageSpeedFormConfig;
+    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;
-    /**
-     * Optional error callback invoked if submission fails.
-     */
-    onError?: (error: Error) => void;
+    formSlot?: React.ReactNode;
 }
 /**
  * Footer Split Image Accordion - A split-layout footer with large image,
@@ -208,10 +201,16 @@ interface FooterSplitImageAccordionProps {
  * Key features: Large hero image, organized link sections, payment icons.
  * Best for: E-commerce sites, fashion brands, lifestyle businesses.
  *
+ * The newsletter form is powered by `FormEngine` from `@page-speed/forms/integration`,
+ * which handles validation, submission, error handling, and success states.
+ *
  * @example
  * ```tsx
  * <FooterSplitImageAccordion
  *   newsletterTitle="Get updates and save 20%"
+ *   formEngineSetup={{
+ *     formConfig: { endpoint: "/api/subscribe", format: "json" },
+ *   }}
  *   footerLinks={[
  *     { title: "Collections", id: "collections", items: [...] },
  *   ]}
@@ -223,6 +222,6 @@ interface FooterSplitImageAccordionProps {
  * />
  * ```
  */
-declare function FooterSplitImageAccordion({ newsletterTitle, emailPlaceholder, footerLinks, socialLinks, paymentPlatforms, submenuLinks, footerData, copyright, background, containerClassName, spacing, pattern, patternOpacity, className, gridClassName, imageColumnClassName, imageClassName, contentColumnClassName, newsletterSectionClassName, newsletterTitleClassName, newsletterFormClassName, socialLinksClassName, brandSectionClassName, logoClassName, brandTitleClassName, brandDescriptionClassName, linksGridClassName, paymentMethodsClassName, bottomClassName, copyrightClassName, submenuLinksClassName, optixFlowConfig, formConfig, onSubmit, onSuccess, onError, }: FooterSplitImageAccordionProps): react_jsx_runtime.JSX.Element;
+declare function FooterSplitImageAccordion({ newsletterTitle, footerLinks, socialLinks, paymentPlatforms, submenuLinks, footerData, copyright, background, containerClassName, spacing, pattern, patternOpacity, className, gridClassName, imageColumnClassName, imageClassName, contentColumnClassName, newsletterSectionClassName, newsletterTitleClassName, newsletterFormClassName, socialLinksClassName, brandSectionClassName, logoClassName, brandTitleClassName, brandDescriptionClassName, linksGridClassName, paymentMethodsClassName, bottomClassName, copyrightClassName, submenuLinksClassName, optixFlowConfig, formEngineSetup, buttonAction, formSlot, }: FooterSplitImageAccordionProps): react_jsx_runtime.JSX.Element;
 
 export { FooterSocialLink, FooterSplitImageAccordion, type FooterSplitImageAccordionData, type FooterSplitImageAccordionLink, type FooterSplitImageAccordionProps, type FooterSplitImageAccordionSection, PaymentPlatformName };

package/dist/footer-split-image-accordion.d.ts

@@ -1,10 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { PaymentPlatformName } from './payment-platform-icon.js';
-import { PageSpeedFormConfig } from '@page-speed/forms/integration';
 import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CUqiRX_E.js';
-import { O as OptixFlowConfig } from './blocks-DRE-f6cS.js';
+import { O as OptixFlowConfig, A as ActionConfig } from './blocks-DRE-f6cS.js';
 import { F as FooterSocialLink } from './types-Cs1jk79n.js';
+import { FormEngineProps } from '@page-speed/forms/integration';
 import 'class-variance-authority';
 import './button-variants-8mtEHxev.js';
 import 'class-variance-authority/types';
@@ -40,29 +40,26 @@ interface FooterSplitImageAccordionData {
     /** Hero image configuration */
     image: {
         src: string;
-        alt: string;
+        alt?: string;
     };
     /** Logo configuration with light/dark variants */
-    logo: {
-        light: string;
-        dark: string;
+    logo?: {
+        src: string;
+        /** Logo link URL */
+        url?: string;
+        /** Brand title */
+        alt?: string;
     };
-    /** Logo link URL */
-    logoUrl: string;
-    /** Brand title */
-    title: string;
+    /** Footer heading */
+    heading?: string;
     /** Brand description */
-    description: string;
+    description?: string;
 }
 interface FooterSplitImageAccordionProps {
     /**
      * Newsletter title
      */
     newsletterTitle?: React.ReactNode;
-    /**
-     * Email input placeholder text
-     */
-    emailPlaceholder?: string;
     /**
      * Footer link sections
      */
@@ -184,21 +181,17 @@ interface FooterSplitImageAccordionProps {
      */
     optixFlowConfig?: OptixFlowConfig;
     /**
-     * Optional form submission configuration for newsletter signup.
+     * Full form engine setup and props
      */
-    formConfig?: PageSpeedFormConfig;
+    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;
-    /**
-     * Optional error callback invoked if submission fails.
-     */
-    onError?: (error: Error) => void;
+    formSlot?: React.ReactNode;
 }
 /**
  * Footer Split Image Accordion - A split-layout footer with large image,
@@ -208,10 +201,16 @@ interface FooterSplitImageAccordionProps {
  * Key features: Large hero image, organized link sections, payment icons.
  * Best for: E-commerce sites, fashion brands, lifestyle businesses.
  *
+ * The newsletter form is powered by `FormEngine` from `@page-speed/forms/integration`,
+ * which handles validation, submission, error handling, and success states.
+ *
  * @example
  * ```tsx
  * <FooterSplitImageAccordion
  *   newsletterTitle="Get updates and save 20%"
+ *   formEngineSetup={{
+ *     formConfig: { endpoint: "/api/subscribe", format: "json" },
+ *   }}
  *   footerLinks={[
  *     { title: "Collections", id: "collections", items: [...] },
  *   ]}
@@ -223,6 +222,6 @@ interface FooterSplitImageAccordionProps {
  * />
  * ```
  */
-declare function FooterSplitImageAccordion({ newsletterTitle, emailPlaceholder, footerLinks, socialLinks, paymentPlatforms, submenuLinks, footerData, copyright, background, containerClassName, spacing, pattern, patternOpacity, className, gridClassName, imageColumnClassName, imageClassName, contentColumnClassName, newsletterSectionClassName, newsletterTitleClassName, newsletterFormClassName, socialLinksClassName, brandSectionClassName, logoClassName, brandTitleClassName, brandDescriptionClassName, linksGridClassName, paymentMethodsClassName, bottomClassName, copyrightClassName, submenuLinksClassName, optixFlowConfig, formConfig, onSubmit, onSuccess, onError, }: FooterSplitImageAccordionProps): react_jsx_runtime.JSX.Element;
+declare function FooterSplitImageAccordion({ newsletterTitle, footerLinks, socialLinks, paymentPlatforms, submenuLinks, footerData, copyright, background, containerClassName, spacing, pattern, patternOpacity, className, gridClassName, imageColumnClassName, imageClassName, contentColumnClassName, newsletterSectionClassName, newsletterTitleClassName, newsletterFormClassName, socialLinksClassName, brandSectionClassName, logoClassName, brandTitleClassName, brandDescriptionClassName, linksGridClassName, paymentMethodsClassName, bottomClassName, copyrightClassName, submenuLinksClassName, optixFlowConfig, formEngineSetup, buttonAction, formSlot, }: FooterSplitImageAccordionProps): react_jsx_runtime.JSX.Element;
 
 export { FooterSocialLink, FooterSplitImageAccordion, type FooterSplitImageAccordionData, type FooterSplitImageAccordionLink, type FooterSplitImageAccordionProps, type FooterSplitImageAccordionSection, PaymentPlatformName };

package/dist/footer-split-image-accordion.js

@@ -1,16 +1,15 @@
 "use client";
-import { useForm, Form, Field } from '@page-speed/forms';
+import * as React from 'react';
+import React__default, { useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Img } from '@page-speed/img';
 import { Icon } from '@page-speed/icon';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import * as React from 'react';
-import React__default, { useMemo } from 'react';
 import { cva } from 'class-variance-authority';
 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-split-image-accordion.tsx
 function cn(...inputs) {
@@ -1564,9 +1563,24 @@ var Section = React__default.forwardRef(
   }
 );
 Section.displayName = "Section";
+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 FooterSplitImageAccordion({
   newsletterTitle,
-  emailPlaceholder,
   footerLinks,
   socialLinks,
   paymentPlatforms,
@@ -1575,7 +1589,7 @@ function FooterSplitImageAccordion({
   copyright,
   background,
   containerClassName = "w-screen px-0 sm:px-0 lg:px-0 max-w-screen relative z-10",
-  spacing = "py-6 md:py-0",
+  spacing = "none",
   pattern,
   patternOpacity,
   className,
@@ -1597,51 +1611,46 @@ function FooterSplitImageAccordion({
   copyrightClassName,
   submenuLinksClassName,
   optixFlowConfig,
-  formConfig,
-  onSubmit,
-  onSuccess,
-  onError
+  formEngineSetup,
+  buttonAction,
+  formSlot
 }) {
-  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,
     {
@@ -1682,40 +1691,7 @@ function FooterSplitImageAccordion({
                 children: newsletterTitle
               }
             ),
-            /* @__PURE__ */ jsxs(
-              Form,
-              {
-                form,
-                action: formConfig?.endpoint,
-                method: formMethod,
-                className: cn("flex items-stretch", newsletterFormClassName),
-                children: [
-                  /* @__PURE__ */ jsx(Field, { name: "email", className: "flex-1", children: ({ field }) => /* @__PURE__ */ jsx(
-                    "input",
-                    {
-                      ...field,
-                      type: "email",
-                      placeholder: emailPlaceholder,
-                      className: "flex h-10 w-full rounded-l-md rounded-r-none border border-r-0 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 disabled:cursor-not-allowed disabled:opacity-50",
-                      "aria-label": emailPlaceholder
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsx(
-                    Pressable,
-                    {
-                      componentType: "button",
-                      type: "submit",
-                      variant: "default",
-                      size: "icon",
-                      asButton: true,
-                      className: "rounded-l-none rounded-r-md shrink-0 h-10",
-                      disabled: form.isSubmitting,
-                      children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
-                    }
-                  )
-                ]
-              }
-            ),
+            renderForm,
             socialLinks && socialLinks.length > 0 && /* @__PURE__ */ jsx(
               "ul",
               {
@@ -1740,19 +1716,31 @@ function FooterSplitImageAccordion({
             footerData.logo && /* @__PURE__ */ jsx(
               FooterLogo,
               {
-                logo: { ...footerData.logo, url: footerData.logoUrl },
+                logo: { ...footerData.logo, url: footerData.logo.url || "/" },
                 logoClassName: cn("inline-block max-w-60", logoClassName),
                 optixFlowConfig
               }
             ),
-            footerData.title && /* @__PURE__ */ jsx(
+            footerData.heading && /* @__PURE__ */ jsx(
               "h4",
               {
-                className: cn("text-xl font-semibold", brandTitleClassName),
-                children: footerData.title
+                className: cn(
+                  "text-xl font-semibold text-pretty",
+                  brandTitleClassName
+                ),
+                children: footerData.heading
               }
             ),
-            footerData.description && /* @__PURE__ */ jsx("p", { className: cn("opacity-80", brandDescriptionClassName), children: footerData.description })
+            footerData.description && /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: cn(
+                  "opacity-80 text-balance",
+                  brandDescriptionClassName
+                ),
+                children: footerData.description
+              }
+            )
           ] }),
           footerLinks && footerLinks.length > 0 && /* @__PURE__ */ jsx(
             "div",