@opensite/ui 2.3.3 → 2.3.4

package/dist/registry.js

@@ -41901,9 +41901,24 @@ function FooterNewsletterContact({
     }
   );
 }
+var DEFAULT_STYLE_RULES41 = {
+  formContainer: "flex items-stretch w-full",
+  fieldsContainer: "",
+  fieldClassName: "",
+  formClassName: ""
+};
+var DEFAULT_FORM_FIELDS42 = [
+  {
+    name: "email",
+    type: "email",
+    label: "Email Address",
+    placeholder: "Enter your email",
+    required: true,
+    columnSpan: 12
+  }
+];
 function FooterSplitImageAccordion({
   newsletterTitle,
-  emailPlaceholder,
   footerLinks,
   socialLinks,
   paymentPlatforms,
@@ -41912,7 +41927,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,
@@ -41934,51 +41949,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 = React26.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_FIELDS42,
+        defaultStyleRules: {
+          ...DEFAULT_STYLE_RULES41,
+          formContainer: cn(
+            DEFAULT_STYLE_RULES41.formContainer,
+            newsletterFormClassName
+          )
         }
-        onError?.(error);
-        throw error;
       }
-    }
-  });
-  const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
+    );
+  }, [formSlot, formEngineSetup, buttonAction, newsletterFormClassName]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -42019,40 +42029,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",
               {
@@ -42077,19 +42054,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",
@@ -47763,13 +47752,13 @@ function HeroImageLeftContent({
     }
   );
 }
-var DEFAULT_STYLE_RULES41 = {
+var DEFAULT_STYLE_RULES42 = {
   formContainer: "",
   fieldsContainer: "",
   fieldClassName: "",
   formClassName: "space-y-4"
 };
-var DEFAULT_FORM_FIELDS42 = [
+var DEFAULT_FORM_FIELDS43 = [
   {
     name: "firstName",
     type: "text",
@@ -48006,8 +47995,8 @@ function HeroImageSlider({
                             }
                           }
                         },
-                        defaultFields: DEFAULT_FORM_FIELDS42,
-                        defaultStyleRules: DEFAULT_STYLE_RULES41
+                        defaultFields: DEFAULT_FORM_FIELDS43,
+                        defaultStyleRules: DEFAULT_STYLE_RULES42
                       }
                     ),
                     privacyNotice && /* @__PURE__ */ jsx(
@@ -53504,7 +53493,7 @@ function HeroHiringAnimatedText({
     }
   );
 }
-var DEFAULT_FORM_FIELDS43 = [
+var DEFAULT_FORM_FIELDS44 = [
   {
     name: "email",
     type: "email",
@@ -53517,7 +53506,7 @@ var DEFAULT_FORM_FIELDS43 = [
 function HeroSplitImageNewsletter({
   heading,
   description,
-  formFields = DEFAULT_FORM_FIELDS43,
+  formFields = DEFAULT_FORM_FIELDS44,
   formConfig,
   onSubmit,
   onSuccess,
@@ -55008,7 +54997,7 @@ function HeroProductShowcaseFloating({
     }
   );
 }
-var DEFAULT_FORM_FIELDS44 = [
+var DEFAULT_FORM_FIELDS45 = [
   {
     name: "email",
     type: "email",
@@ -55024,7 +55013,7 @@ function HeroSaasDashboardPreview({
   badgeSlot,
   heading,
   description,
-  formFields = DEFAULT_FORM_FIELDS44,
+  formFields = DEFAULT_FORM_FIELDS45,
   formConfig,
   onSubmit,
   onSuccess,
@@ -57813,13 +57802,13 @@ function HeroPricingComparison({
     }
   );
 }
-var DEFAULT_STYLE_RULES42 = {
+var DEFAULT_STYLE_RULES43 = {
   formContainer: "mt-10 flex justify-center items-center w-full max-w-md flex-col gap-4 sm:flex-row",
   fieldsContainer: "",
   fieldClassName: "",
   formClassName: ""
 };
-var DEFAULT_FORM_FIELDS45 = [
+var DEFAULT_FORM_FIELDS46 = [
   {
     name: "email",
     type: "email",
@@ -57905,8 +57894,8 @@ function HeroNewsletterMinimal({
               }
             }
           },
-          defaultFields: DEFAULT_FORM_FIELDS45,
-          defaultStyleRules: DEFAULT_STYLE_RULES42
+          defaultFields: DEFAULT_FORM_FIELDS46,
+          defaultStyleRules: DEFAULT_STYLE_RULES43
         }
       ),
       helperText && (typeof helperText === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm mt-2 text-center"), children: helperText }) : helperText)
@@ -57964,7 +57953,7 @@ function HeroNewsletterMinimal({
     }
   );
 }
-var DEFAULT_FORM_FIELDS46 = [
+var DEFAULT_FORM_FIELDS47 = [
   {
     name: "email",
     type: "email",
@@ -58019,7 +58008,7 @@ function HeroComingSoonCountdown({
   description,
   countdownDate,
   countdownSlot,
-  formFields = DEFAULT_FORM_FIELDS46,
+  formFields = DEFAULT_FORM_FIELDS47,
   formConfig,
   onSubmit,
   onSuccess,
@@ -81868,7 +81857,7 @@ function ListSearchableGrid({
     }
   );
 }
-var { useMemo: useMemo412 } = React26;
+var { useMemo: useMemo413 } = React26;
 function OfferModalNewsletterDiscount({
   title,
   emailPlaceholder,
@@ -81936,7 +81925,7 @@ function OfferModalNewsletterDiscount({
   });
   const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
   const dialogProps = open !== void 0 ? { open, onOpenChange } : { defaultOpen };
-  const renderCloseButton = useMemo412(() => {
+  const renderCloseButton = useMemo413(() => {
     if (closeButtonSlot) return closeButtonSlot;
     if (!closeButtonText) return null;
     return /* @__PURE__ */ jsx("div", { className: "absolute end-1.5 top-1.5", children: /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(
@@ -81950,12 +81939,12 @@ function OfferModalNewsletterDiscount({
       }
     ) }) });
   }, [closeButtonSlot, closeButtonText, closeClassName]);
-  const renderHeader = useMemo412(() => {
+  const renderHeader = useMemo413(() => {
     if (headerSlot) return headerSlot;
     if (!title) return null;
     return /* @__PURE__ */ jsx(DialogHeader, { className: headerClassName, children: typeof title === "string" ? /* @__PURE__ */ jsx(DialogTitle, { className: cn("text-start font-serif text-2xl font-normal leading-snug", titleClassName), children: title }) : /* @__PURE__ */ jsx(DialogTitle, { className: cn("text-start font-serif text-2xl font-normal leading-snug", titleClassName), children: title }) });
   }, [headerSlot, title, headerClassName, titleClassName]);
-  const renderForm = useMemo412(() => {
+  const renderForm = useMemo413(() => {
     if (formSlot) return formSlot;
     return /* @__PURE__ */ jsxs(
       Form,
@@ -82017,7 +82006,7 @@ function OfferModalNewsletterDiscount({
     }
   ) });
 }
-var { useMemo: useMemo413 } = React26;
+var { useMemo: useMemo414 } = React26;
 function OfferModalMembershipImage({
   overline,
   title,
@@ -82094,7 +82083,7 @@ function OfferModalMembershipImage({
   });
   const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
   const dialogProps = open !== void 0 ? { open, onOpenChange } : { defaultOpen };
-  const renderImage = useMemo413(() => {
+  const renderImage = useMemo414(() => {
     if (imageSlot) return imageSlot;
     if (!image) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("max-h-[290px] h-full overflow-hidden max-lg:hidden", imageWrapperClassName), children: /* @__PURE__ */ jsx(
@@ -82107,7 +82096,7 @@ function OfferModalMembershipImage({
       }
     ) });
   }, [imageSlot, image, imageWrapperClassName, imageClassName, optixFlowConfig]);
-  const renderCloseButton = useMemo413(() => {
+  const renderCloseButton = useMemo414(() => {
     if (closeButtonSlot) return closeButtonSlot;
     return /* @__PURE__ */ jsx("div", { className: "absolute -end-px -top-px z-10", children: /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(
       Pressable,
@@ -82123,7 +82112,7 @@ function OfferModalMembershipImage({
       }
     ) }) });
   }, [closeButtonSlot, closeClassName]);
-  const renderForm = useMemo413(() => {
+  const renderForm = useMemo414(() => {
     if (formSlot) return formSlot;
     return /* @__PURE__ */ jsxs(
       Form,
@@ -82186,7 +82175,7 @@ function OfferModalMembershipImage({
       }
     );
   }, [formSlot, form, formConfig, formMethod, emailPlaceholder, inputClassName, submitClassName, buttonText, formClassName]);
-  const renderFooter = useMemo413(() => {
+  const renderFooter = useMemo414(() => {
     if (footerSlot) return footerSlot;
     if (!description) return null;
     return /* @__PURE__ */ jsx(DialogFooter, { className: footerClassName, children: /* @__PURE__ */ jsx(DialogDescription, { className: cn("text-muted-foreground text-center text-xs leading-relaxed", descriptionClassName), children: description }) });
@@ -82306,7 +82295,7 @@ function SheetDescription({
     }
   );
 }
-var { useMemo: useMemo414 } = React26;
+var { useMemo: useMemo415 } = React26;
 function OfferModalSheetNewsletter({
   logo,
   logoSlot,
@@ -82389,7 +82378,7 @@ function OfferModalSheetNewsletter({
   });
   const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
   const sheetProps = open !== void 0 ? { open, onOpenChange } : { defaultOpen };
-  const renderLogo = useMemo414(() => {
+  const renderLogo = useMemo415(() => {
     if (logoSlot) return logoSlot;
     if (!logo) return null;
     const logoSrc = typeof logo.src === "string" ? logo.src : logo.src.light;
@@ -82403,7 +82392,7 @@ function OfferModalSheetNewsletter({
       }
     );
   }, [logoSlot, logo, logoClassName, optixFlowConfig]);
-  const renderHeader = useMemo414(() => {
+  const renderHeader = useMemo415(() => {
     if (headerSlot) return headerSlot;
     return /* @__PURE__ */ jsxs(SheetHeader, { className: cn("gap-8 p-0", headerClassName), children: [
       renderLogo,
@@ -82413,7 +82402,7 @@ function OfferModalSheetNewsletter({
       ] })
     ] });
   }, [headerSlot, renderLogo, headerClassName, title, titleClassName, description, descriptionClassName]);
-  const renderForm = useMemo414(() => {
+  const renderForm = useMemo415(() => {
     if (formSlot) return formSlot;
     return /* @__PURE__ */ jsx(
       Form,
@@ -82461,7 +82450,7 @@ function OfferModalSheetNewsletter({
       }
     );
   }, [formSlot, form, formConfig, formMethod, emailPlaceholder, inputClassName, submitClassName, buttonText, formClassName]);
-  const renderLegal = useMemo414(() => {
+  const renderLegal = useMemo415(() => {
     if (legalSlot) return legalSlot;
     if (!termsUrl || !termsText || !privacyUrl || !privacyText) return null;
     return /* @__PURE__ */ jsxs("p", { className: cn("text-muted-foreground text-xs", legalClassName), children: [
@@ -82475,7 +82464,7 @@ function OfferModalSheetNewsletter({
       "."
     ] });
   }, [legalSlot, termsUrl, termsText, privacyUrl, privacyText, legalClassName]);
-  const renderImage = useMemo414(() => {
+  const renderImage = useMemo415(() => {
     if (imageSlot) return imageSlot;
     if (!image) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("h-1/2 basis-1/2", imageWrapperClassName), children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 1, className: "overflow-hidden", children: /* @__PURE__ */ jsx(
@@ -98661,32 +98650,20 @@ function LinkTreeBlock({
           "flex flex-wrap items-center justify-center gap-2",
           socialLinksClassName
         ),
-        children: socialLinks.map((social, index) => {
-          const { iconName, ...socialPressableProps } = social;
-          const icon = social.icon || (iconName ? /* @__PURE__ */ jsx(
-            DynamicIcon,
-            {
-              name: iconName,
-              size: 20,
-              className: socialIconClassName
-            }
-          ) : null);
-          const ariaLabel = social["aria-label"] || (typeof social.label === "string" ? social.label : void 0) || social.platform;
-          return /* @__PURE__ */ jsx(
-            Pressable,
-            {
-              ...socialPressableProps,
-              "aria-label": ariaLabel,
-              className: cn(
-                "flex h-12 w-12 items-center justify-center rounded-full p-2.5 transition-all duration-200",
-                socialLinkClassName,
-                social.className
-              ),
-              children: icon
-            },
-            social.id ?? index
-          );
-        })
+        children: socialLinks.map((social, index) => /* @__PURE__ */ jsx(
+          SocialLinkIcon,
+          {
+            href: social.href,
+            label: social["aria-label"] || (typeof social.label === "string" ? social.label : void 0),
+            className: cn(
+              "flex h-12 w-12 items-center justify-center rounded-full p-2.5 transition-all duration-200",
+              socialLinkClassName,
+              social.className
+            ),
+            iconClassName: socialIconClassName
+          },
+          social.id ?? social.href ?? index
+        ))
       }
     );
   }, [
@@ -98934,33 +98911,16 @@ function LinkPageMinimalProfile({
           "flex items-center justify-center gap-4 pt-4",
           socialLinksClassName
         ),
-        children: socialLinks.map((social, index) => {
-          const { iconName: socialIconName, ...socialRest } = social;
-          const icon = social.icon || (socialIconName ? /* @__PURE__ */ jsx(
-            DynamicIcon,
-            {
-              name: socialIconName,
-              size: 20,
-              className: socialIconClassName
-            }
-          ) : null);
-          const ariaLabel = social["aria-label"] || (typeof social.label === "string" ? social.label : void 0) || social.platform;
-          return /* @__PURE__ */ jsx(
-            Pressable,
-            {
-              href: social.href,
-              "aria-label": ariaLabel,
-              className: cn(
-                "rounded-full p-2 transition-colors",
-                "hover:opacity-80",
-                socialLinkClassName,
-                social.className
-              ),
-              children: icon
-            },
-            social.id ?? index
-          );
-        })
+        children: socialLinks.map((social, index) => /* @__PURE__ */ jsx(
+          SocialLinkIcon,
+          {
+            href: social.href,
+            label: social["aria-label"] || (typeof social.label === "string" ? social.label : void 0),
+            className: cn(socialLinkClassName, social.className),
+            iconClassName: socialIconClassName
+          },
+          social.href || index
+        ))
       }
     );
   }, [
@@ -99027,13 +98987,13 @@ function LinkPageMinimalProfile({
     }
   );
 }
-var DEFAULT_STYLE_RULES43 = {
+var DEFAULT_STYLE_RULES44 = {
   formContainer: "w-full flex flex-col gap-3 justify-center items-center",
   fieldsContainer: "",
   fieldClassName: "",
   formClassName: ""
 };
-var DEFAULT_FORM_FIELDS47 = [
+var DEFAULT_FORM_FIELDS48 = [
   {
     name: "email",
     type: "email",
@@ -99151,34 +99111,22 @@ function LinkPageNewsletterSocial({
           "flex items-center justify-center gap-3",
           socialLinksClassName
         ),
-        children: socialLinks.map((social, index) => {
-          const { iconName, ...socialPressableProps } = social;
-          const icon = social.icon || (iconName ? /* @__PURE__ */ jsx(
-            DynamicIcon,
-            {
-              name: iconName,
-              size: 20,
-              className: socialIconClassName
-            }
-          ) : null);
-          const ariaLabel = social["aria-label"] || (typeof social.label === "string" ? social.label : void 0) || social.platform;
-          return /* @__PURE__ */ jsx(
-            Pressable,
-            {
-              ...socialPressableProps,
-              "aria-label": ariaLabel,
-              asButton: true,
-              size: "icon-lg",
-              className: cn(
-                "rounded-full p-2.5 transition-all duration-200",
-                socialLinkClassName,
-                social.className
-              ),
-              children: icon
-            },
-            social.id ?? index
-          );
-        })
+        children: socialLinks.map((social, index) => /* @__PURE__ */ jsx(
+          SocialLinkIcon,
+          {
+            href: social.href,
+            label: social["aria-label"] || (typeof social.label === "string" ? social.label : void 0),
+            asButton: true,
+            size: "icon-lg",
+            className: cn(
+              "rounded-full p-2.5 transition-all duration-200",
+              socialLinkClassName,
+              social.className
+            ),
+            iconClassName: socialIconClassName
+          },
+          social.id ?? social.href ?? index
+        ))
       }
     );
   }, [
@@ -99216,8 +99164,8 @@ function LinkPageNewsletterSocial({
               }
             }
           },
-          defaultFields: DEFAULT_FORM_FIELDS47,
-          defaultStyleRules: DEFAULT_STYLE_RULES43
+          defaultFields: DEFAULT_FORM_FIELDS48,
+          defaultStyleRules: DEFAULT_STYLE_RULES44
         }
       ),
       helperText && (typeof helperText === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm mt-2 text-center"), children: helperText }) : helperText)
@@ -99485,34 +99433,22 @@ function LinkPageGridCards({
           "flex items-center justify-center gap-2",
           socialLinksClassName
         ),
-        children: socialLinks.map((social, index) => {
-          const { iconName, ...socialPressableProps } = social;
-          const icon = social.icon || (iconName ? /* @__PURE__ */ jsx(
-            DynamicIcon,
-            {
-              name: iconName,
-              size: 18,
-              className: socialIconClassName
-            }
-          ) : null);
-          const ariaLabel = social["aria-label"] || (typeof social.label === "string" ? social.label : void 0) || social.platform;
-          return /* @__PURE__ */ jsx(
-            Pressable,
-            {
-              ...socialPressableProps,
-              "aria-label": ariaLabel,
-              className: cn(
-                "rounded-lg p-2 transition-all duration-200",
-                "bg-card text-card-foreground hover:opacity-80",
-                "size-12 flex items-center justify-center",
-                socialLinkClassName,
-                social.className
-              ),
-              children: icon
-            },
-            social.id ?? index
-          );
-        })
+        children: socialLinks.map((social, index) => /* @__PURE__ */ jsx(
+          SocialLinkIcon,
+          {
+            href: social.href,
+            label: social["aria-label"] || (typeof social.label === "string" ? social.label : void 0),
+            className: cn(
+              "rounded-lg p-2 transition-all duration-200",
+              "bg-card text-card-foreground hover:opacity-80",
+              "size-12 flex items-center justify-center",
+              socialLinkClassName,
+              social.className
+            ),
+            iconClassName: socialIconClassName
+          },
+          social.id ?? social.href ?? index
+        ))
       }
     );
   }, [
@@ -99745,34 +99681,22 @@ function LinkPageBentoLayout({
   const renderSocialLinks = useMemo(() => {
     if (socialLinksSlot) return socialLinksSlot;
     if (!socialLinks || socialLinks.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-2 pt-1", socialLinksClassName), children: socialLinks.map((social, index) => {
-      const { iconName, ...socialPressableProps } = social;
-      const icon = social.icon || (iconName ? /* @__PURE__ */ jsx(
-        DynamicIcon,
-        {
-          name: iconName,
-          size: 18,
-          className: socialIconClassName
-        }
-      ) : null);
-      const ariaLabel = social["aria-label"] || (typeof social.label === "string" ? social.label : void 0) || social.platform;
-      return /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          ...socialPressableProps,
-          "aria-label": ariaLabel,
-          className: cn(
-            "rounded-full p-2 transition-all duration-200",
-            "hover:scale-110 active:scale-95",
-            "hover:opacity-80",
-            socialLinkClassName,
-            social.className
-          ),
-          children: icon
-        },
-        social.id ?? index
-      );
-    }) });
+    return /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-2 pt-1", socialLinksClassName), children: socialLinks.map((social, index) => /* @__PURE__ */ jsx(
+      SocialLinkIcon,
+      {
+        href: social.href,
+        label: social["aria-label"] || (typeof social.label === "string" ? social.label : void 0),
+        className: cn(
+          "rounded-full p-2 transition-all duration-200",
+          "hover:scale-110 active:scale-95",
+          "hover:opacity-80",
+          socialLinkClassName,
+          social.className
+        ),
+        iconClassName: socialIconClassName
+      },
+      social.id ?? social.href ?? index
+    )) });
   }, [
     socialLinksSlot,
     socialLinks,
@@ -116670,7 +116594,7 @@ var BLOCK_REGISTRY = {
   "footer-split-image-accordion": {
     id: "footer-split-image-accordion",
     name: "Footer Split Image Accordion",
-    description: "A split-layout footer with large image, newsletter signup, accordion navigation, and payment methods. Features a two-column split with image on left, content on right, and responsive accordion links for mobile. Best for e-commerce sites, fashion brands, and lifestyle businesses.",
+    description: "A split-layout footer with large image, newsletter signup powered by FormEngine, accordion navigation, and payment methods. Features a two-column split with image on left, content on right, and responsive accordion links for mobile. Uses @page-speed/forms/integration for form handling. Best for e-commerce sites, fashion brands, and lifestyle businesses.",
     semanticTags: [
       "footer",
       "split",
@@ -116687,6 +116611,9 @@ var BLOCK_REGISTRY = {
     exampleUsage: `
 <FooterSplitImageAccordion
   newsletterTitle="Get updates and save 20%"
+  formEngineSetup={{
+    formConfig: { endpoint: "/api/subscribe", format: "json" },
+  }}
   footerLinks={[
     { title: "Collections", id: "collections", items: [...] },
   ]}