@opensite/ui 2.3.2 → 2.3.4

package/dist/registry.cjs

@@ -546,13 +546,46 @@ var Section = React26__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
+function TextInner({ as, className, children, ...props }, ref) {
+  const Component = as || "span";
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, className: cn(className), ...props, children });
+}
+var Text = React26__namespace.forwardRef(TextInner);
+Text.displayName = "Text";
+function isContentTextItem(item) {
+  return item !== null && typeof item === "object" && !React26__namespace.isValidElement(item) && "_type" in item && item._type === "text";
+}
+var ContentGroup = React26__namespace.forwardRef(
+  ({ items, className, children, ...props }, ref) => {
+    const hasContent = items && items.length > 0;
+    if (!hasContent) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn(className), ...props, children: [
+      items.map((item, idx) => {
+        if (isContentTextItem(item)) {
+          const { _type, ...textProps } = item;
+          return /* @__PURE__ */ jsxRuntime.jsx(Text, { ...textProps }, idx);
+        }
+        const reactNode = item;
+        if (React26__namespace.isValidElement(reactNode)) {
+          return React26__namespace.cloneElement(reactNode, { key: reactNode.key ?? idx });
+        }
+        return /* @__PURE__ */ jsxRuntime.jsx(React26__namespace.Fragment, { children: reactNode }, idx);
+      }),
+      children
+    ] });
+  }
+);
+ContentGroup.displayName = "ContentGroup";
 function AlternatingBlocks({
   sections,
   sectionsSlot,
   title,
   subtitle,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "lg",
   className,
   contentClassName,
   sectionsClassName,
@@ -568,9 +601,21 @@ function AlternatingBlocks({
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-12", sectionsClassName), children: sections.map((section, index) => /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: cn("grid items-center gap-8 md:grid-cols-2 md:gap-12", sectionItemClassName),
+        className: cn(
+          "grid items-center gap-8 md:grid-cols-2 md:gap-12",
+          sectionItemClassName
+        ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(section.mediaLeft ? "md:order-2" : "", sectionContentClassName), children: section.content }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                section.mediaLeft ? "md:order-2" : "",
+                sectionContentClassName
+              ),
+              children: section.content
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
@@ -586,22 +631,55 @@ function AlternatingBlocks({
       },
       index
     )) });
-  }, [sectionsSlot, sections, sectionsClassName, sectionItemClassName, sectionContentClassName, sectionMediaClassName]);
+  }, [
+    sectionsSlot,
+    sections,
+    sectionsClassName,
+    sectionItemClassName,
+    sectionContentClassName,
+    sectionMediaClassName
+  ]);
+  const headerItems = React26.useMemo(() => {
+    const items = [];
+    if (subtitle) {
+      items.push(
+        typeof subtitle === "string" ? {
+          _type: "text",
+          as: "p",
+          className: "mb-2 text-sm font-semibold uppercase tracking-wider",
+          children: subtitle
+        } : subtitle
+      );
+    }
+    if (title) {
+      items.push(
+        typeof title === "string" ? {
+          _type: "text",
+          as: "h2",
+          className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl",
+          children: title
+        } : title
+      );
+    }
+    return items;
+  }, [title, subtitle]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
-      title: typeof title === "string" ? title : void 0,
-      subtitle: typeof subtitle === "string" ? subtitle : void 0,
       background,
       spacing,
       pattern,
       patternOpacity,
       className,
+      containerClassName,
       children: [
-        title && typeof title !== "string" || subtitle && typeof subtitle !== "string" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
-          subtitle && typeof subtitle !== "string" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-2 text-sm font-semibold uppercase tracking-wider", getAccentColor(background)), children: subtitle }),
-          title && typeof title !== "string" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
-        ] }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ContentGroup,
+          {
+            className: "mb-12 text-center md:mb-16",
+            items: headerItems
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto w-full max-w-[900px]", contentClassName), children: sectionsContent })
       ]
     }
@@ -619,7 +697,6 @@ function AboutMissionFeatures({
   features,
   featuresSlot,
   className,
-  containerClassName,
   titleClassName,
   descriptionClassName,
   missionLabelClassName,
@@ -631,7 +708,8 @@ function AboutMissionFeatures({
   featuresClassName,
   optixFlowConfig,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity
 }) {
@@ -662,7 +740,8 @@ function AboutMissionFeatures({
       pattern,
       patternOpacity,
       className: cn(className),
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-8 lg:gap-16", containerClassName), children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 lg:gap-8", children: [
           title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "h1",
@@ -767,7 +846,6 @@ function AboutMissionFeatures({
 }
 function AboutStatsShowcase({
   className,
-  containerClassName,
   title,
   titleClassName,
   description,
@@ -792,7 +870,8 @@ function AboutStatsShowcase({
   benefitsClassName,
   optixFlowConfig,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity
 }) {
@@ -830,10 +909,7 @@ function AboutStatsShowcase({
   const logosContent = React26.useMemo(() => {
     if (logosSlot) return logosSlot;
     if (!logos || logos.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
-      "py-24",
-      getNestedCardBg(background, "subtle")
-    ), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "container flex flex-col items-center gap-11", children: [
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("py-24", getNestedCardBg(background, "subtle")), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "container flex flex-col items-center gap-11", children: [
       logosTitle && (typeof logosTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
         "p",
         {
@@ -902,15 +978,21 @@ function AboutStatsShowcase({
                 optixFlowConfig
               }
             ),
-            benefit.stat && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
-              "flex flex-col justify-center rounded-xl p-8",
-              getNestedCardBg(background),
-              getNestedCardTextColor(background)
-            ), children: [
-              benefit.stat.value && (typeof benefit.stat.value === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-4xl font-medium", children: benefit.stat.value }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: benefit.stat.value })),
-              benefit.stat.label && (typeof benefit.stat.label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-6 font-semibold", children: benefit.stat.label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6", children: benefit.stat.label })),
-              benefit.stat.description && (typeof benefit.stat.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: getTextColor(background, "muted"), children: benefit.stat.description }) : benefit.stat.description)
-            ] }),
+            benefit.stat && /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex flex-col justify-center rounded-xl p-8",
+                  getNestedCardBg(background),
+                  getNestedCardTextColor(background)
+                ),
+                children: [
+                  benefit.stat.value && (typeof benefit.stat.value === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-4xl font-medium", children: benefit.stat.value }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: benefit.stat.value })),
+                  benefit.stat.label && (typeof benefit.stat.label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-6 font-semibold", children: benefit.stat.label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6", children: benefit.stat.label })),
+                  benefit.stat.description && (typeof benefit.stat.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: getTextColor(background, "muted"), children: benefit.stat.description }) : benefit.stat.description)
+                ]
+              }
+            ),
             benefit.testimonial && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl bg-background p-4", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 flex items-center gap-2", children: [
                 benefit.testimonial.logo && /* @__PURE__ */ jsxRuntime.jsx(
@@ -930,7 +1012,16 @@ function AboutStatsShowcase({
                   benefit.testimonial.author,
                   ","
                 ] }) : benefit.testimonial.author),
-                benefit.testimonial.role && (typeof benefit.testimonial.role === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-sm", getTextColor(background, "muted")), children: benefit.testimonial.role }) : benefit.testimonial.role)
+                benefit.testimonial.role && (typeof benefit.testimonial.role === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "text-sm",
+                      getTextColor(background, "muted")
+                    ),
+                    children: benefit.testimonial.role
+                  }
+                ) : benefit.testimonial.role)
               ] })
             ] })
           ] }, idx))
@@ -1445,7 +1536,7 @@ function AboutCompanyProfile({
   optixFlowConfig,
   background,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "py-12 md:py-32",
+  spacing = "xl",
   pattern,
   patternOpacity
 }) {
@@ -1639,7 +1730,6 @@ function AboutCompanyProfile({
 }
 function AboutVisionGallery({
   className,
-  containerClassName,
   title,
   titleClassName,
   subtitle,
@@ -1664,7 +1754,8 @@ function AboutVisionGallery({
   ctaClassName,
   optixFlowConfig,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity
 }) {
@@ -2376,7 +2467,10 @@ function AboutSplitHero({
       case "dark":
         return "bg-foreground text-background";
       case "gray":
-        return cn(getNestedCardBg(background), getNestedCardTextColor(background));
+        return cn(
+          getNestedCardBg(background),
+          getNestedCardTextColor(background)
+        );
       case "white":
         return "bg-background";
       default:
@@ -2395,52 +2489,63 @@ function AboutSplitHero({
       ),
       children: [
         pattern && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(PatternBackground, { pattern, opacity: patternOpacity }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10 w-full px-8 py-16 sm:px-12 sm:py-20 lg:px-16 lg:py-24 xl:px-24", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-xl space-y-8", children: [
-          (brandText || brandHighlight) && /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              className: cn(
-                "text-xl font-semibold uppercase tracking-wider sm:text-2xl",
-                brandTextClassName
-              ),
-              children: [
-                brandText,
-                brandText && brandHighlight && " ",
-                brandHighlight && /* @__PURE__ */ jsxRuntime.jsx(
-                  "span",
-                  {
-                    className: cn(
-                      "bg-linear-to-r from-primary to-primary/60 bg-clip-text text-transparent",
-                      brandHighlightClassName
-                    ),
-                    children: brandHighlight
-                  }
-                )
-              ]
-            }
-          ),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-            "h1",
-            {
-              className: cn(
-                "text-3xl font-bold leading-tight tracking-tight sm:text-4xl lg:text-5xl xl:text-6xl",
-                headingClassName
-              ),
-              children: heading
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-            "p",
-            {
-              className: cn(
-                "text-base leading-relaxed opacity-90 sm:text-lg",
-                descriptionClassName
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "relative z-10 w-full",
+              "px-8 sm:px-12 lg:px-16 xl:px-24",
+              directionConfig.mobile === "mediaTop" ? "pt-16" : "pt-32",
+              "pb-16 md:pb-24 md:pt-24"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-xl space-y-8", children: [
+              (brandText || brandHighlight) && /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: cn(
+                    "text-xl font-semibold uppercase tracking-wider sm:text-2xl",
+                    brandTextClassName
+                  ),
+                  children: [
+                    brandText,
+                    brandText && brandHighlight && " ",
+                    brandHighlight && /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        className: cn(
+                          "bg-linear-to-r from-primary to-primary/60 bg-clip-text text-transparent",
+                          brandHighlightClassName
+                        ),
+                        children: brandHighlight
+                      }
+                    )
+                  ]
+                }
               ),
-              children: description
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-          ctaContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-4", children: ctaContent })
-        ] }) })
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h1",
+                {
+                  className: cn(
+                    "text-3xl font-bold leading-tight tracking-tight sm:text-4xl lg:text-5xl xl:text-6xl",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "text-base leading-relaxed opacity-90 sm:text-lg",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+              ctaContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-4", children: ctaContent })
+            ] })
+          }
+        )
       ]
     }
   );
@@ -2479,9 +2584,9 @@ function AboutMissionPrinciples({
   visionActionSlot,
   visionClassName,
   className,
-  containerClassName,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity
 }) {
@@ -2523,9 +2628,22 @@ function AboutMissionPrinciples({
         children: principles.map((principle, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: cn("relative rounded-lg border p-6 transition-colors", `hover:${getNestedCardBg(background, "muted")}`),
+            className: cn(
+              "relative rounded-lg border p-6 transition-colors",
+              `hover:${getNestedCardBg(background, "muted")}`
+            ),
             children: [
-              principle.number && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("absolute right-4 top-4 text-3xl font-bold", getAccentColor(background), "opacity-20"), children: principle.number }),
+              principle.number && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "absolute right-4 top-4 text-3xl font-bold",
+                    getAccentColor(background),
+                    "opacity-20"
+                  ),
+                  children: principle.number
+                }
+              ),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
                 principle.title && (typeof principle.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-bold", children: principle.title }) : principle.title),
                 principle.description && (typeof principle.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: getTextColor(background, "muted"), children: principle.description }) : principle.description)
@@ -2898,7 +3016,6 @@ function CommunityInitiatives({
   actions,
   actionsSlot,
   className,
-  containerClassName,
   headerClassName,
   badgeClassName,
   headingClassName,
@@ -2910,7 +3027,8 @@ function CommunityInitiatives({
   actionsClassName,
   optixFlowConfig,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity
 }) {
@@ -2999,20 +3117,47 @@ function CommunityInitiatives({
                           ),
                           children: [
                             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-                              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("rounded-md p-2", getNestedCardBg(background, "muted")), children: /* @__PURE__ */ jsxRuntime.jsx(
-                                DynamicIcon,
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                "div",
                                 {
-                                  name: initiative.icon,
-                                  size: 24,
-                                  className: cn(getAccentColor(background))
+                                  className: cn(
+                                    "rounded-md p-2",
+                                    getNestedCardBg(background, "muted")
+                                  ),
+                                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                                    DynamicIcon,
+                                    {
+                                      name: initiative.icon,
+                                      size: 24,
+                                      className: cn(getAccentColor(background))
+                                    }
+                                  )
                                 }
-                              ) }),
+                              ),
                               /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-2xl font-bold", children: initiative.title })
                             ] }),
                             /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(getTextColor(background, "muted")), children: initiative.description }),
                             initiative.metrics && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-3 gap-4 pt-2", children: initiative.metrics.map((metric, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
-                              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-2xl font-bold", getAccentColor(background)), children: metric.value }),
-                              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-1 text-xs", getTextColor(background, "muted")), children: metric.label })
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                "div",
+                                {
+                                  className: cn(
+                                    "text-2xl font-bold",
+                                    getAccentColor(background)
+                                  ),
+                                  children: metric.value
+                                }
+                              ),
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                "div",
+                                {
+                                  className: cn(
+                                    "mt-1 text-xs",
+                                    getTextColor(background, "muted")
+                                  ),
+                                  children: metric.label
+                                }
+                              )
                             ] }, i)) })
                           ]
                         }
@@ -3041,25 +3186,35 @@ function CommunityInitiatives({
                             "flex h-full items-center justify-center md:col-span-5",
                             isEven ? "md:order-2" : "md:order-1"
                           ),
-                          children: /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cn(
-                            "flex h-full min-h-[280px] w-full items-center justify-center",
-                            getNestedCardBg(background, "subtle")
-                          ), children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "p-6 text-center", children: [
-                            /* @__PURE__ */ jsxRuntime.jsx(
-                              DynamicIcon,
-                              {
-                                name: initiative.icon,
-                                size: 64,
-                                className: cn("mx-auto mb-4", getTextColor(background, "muted"), "opacity-50")
-                              }
-                            ),
-                            /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: "secondary", className: "mx-auto", children: [
-                              "Learn more about our",
-                              " ",
-                              initiative.title.toLowerCase(),
-                              " initiative"
-                            ] })
-                          ] }) })
+                          children: /* @__PURE__ */ jsxRuntime.jsx(
+                            Card,
+                            {
+                              className: cn(
+                                "flex h-full min-h-[280px] w-full items-center justify-center",
+                                getNestedCardBg(background, "subtle")
+                              ),
+                              children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "p-6 text-center", children: [
+                                /* @__PURE__ */ jsxRuntime.jsx(
+                                  DynamicIcon,
+                                  {
+                                    name: initiative.icon,
+                                    size: 64,
+                                    className: cn(
+                                      "mx-auto mb-4",
+                                      getTextColor(background, "muted"),
+                                      "opacity-50"
+                                    )
+                                  }
+                                ),
+                                /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: "secondary", className: "mx-auto", children: [
+                                  "Learn more about our",
+                                  " ",
+                                  initiative.title.toLowerCase(),
+                                  " initiative"
+                                ] })
+                              ] })
+                            }
+                          )
                         }
                       )
                     ]
@@ -3090,7 +3245,7 @@ function CommunityInitiatives({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
+      className,
       containerClassName,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
@@ -3101,18 +3256,7 @@ function CommunityInitiatives({
               headerClassName
             ),
             children: [
-              badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: cn(
-                    "inline-block rounded-lg px-3 py-1 text-sm",
-                    getNestedCardBg(background, "muted"),
-                    getAccentColor(background),
-                    badgeClassName
-                  ),
-                  children: badgeText
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: badgeClassName, children: badgeText })),
+              badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: cn("px-3", badgeClassName), children: badgeText }) : badgeText),
               heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                 "h2",
                 {
@@ -3122,18 +3266,23 @@ function CommunityInitiatives({
                   ),
                   children: heading
                 }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+              ) : heading),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(descriptionClassName), children: description }) : description)
             ]
           }
         ),
         categoriesContent,
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-20 text-center", ctaClassName), children: [
-          ctaBadgeText && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
-            "mb-8 inline-flex items-center justify-center rounded-full p-1",
-            getNestedCardBg(background)
-          ), children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: "rounded-full bg-primary px-4 py-1 text-primary-foreground", children: ctaBadgeText }) }),
-          ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-4 text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", ctaHeadingClassName), children: ctaHeading })),
+          ctaBadgeText && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "mb-8 inline-flex items-center justify-center rounded-full p-1"
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: "rounded-full bg-primary px-4 py-1 text-primary-foreground", children: ctaBadgeText })
+            }
+          ),
+          ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-4 text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : ctaHeading),
           ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "p",
             {
@@ -3144,51 +3293,13 @@ function CommunityInitiatives({
               ),
               children: ctaDescription
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: cn("mx-auto mb-8 max-w-2xl", ctaDescriptionClassName),
-              children: ctaDescription
-            }
-          )),
+          ) : ctaDescription),
           actionsContent
         ] })
       ]
     }
   );
 }
-function TextInner({ as, className, children, ...props }, ref) {
-  const Component = as || "span";
-  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, className: cn(className), ...props, children });
-}
-var Text = React26__namespace.forwardRef(TextInner);
-Text.displayName = "Text";
-function isContentTextItem(item) {
-  return item !== null && typeof item === "object" && !React26__namespace.isValidElement(item) && "_type" in item && item._type === "text";
-}
-var ContentGroup = React26__namespace.forwardRef(
-  ({ items, className, children, ...props }, ref) => {
-    const hasContent = items && items.length > 0;
-    if (!hasContent) {
-      return null;
-    }
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn(className), ...props, children: [
-      items.map((item, idx) => {
-        if (isContentTextItem(item)) {
-          const { _type, ...textProps } = item;
-          return /* @__PURE__ */ jsxRuntime.jsx(Text, { ...textProps }, idx);
-        }
-        const reactNode = item;
-        if (React26__namespace.isValidElement(reactNode)) {
-          return React26__namespace.cloneElement(reactNode, { key: reactNode.key ?? idx });
-        }
-        return /* @__PURE__ */ jsxRuntime.jsx(React26__namespace.Fragment, { children: reactNode }, idx);
-      }),
-      children
-    ] });
-  }
-);
-ContentGroup.displayName = "ContentGroup";
 function AboutCultureTabs({
   badgeText,
   heading,
@@ -7764,7 +7875,6 @@ function AboutStoryGallery({
 }
 function AboutStreamlineTeam({
   className,
-  containerClassName,
   title,
   titleClassName,
   description,
@@ -7786,7 +7896,8 @@ function AboutStreamlineTeam({
   teamSectionClassName,
   optixFlowConfig,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity
 }) {
@@ -7806,7 +7917,13 @@ function AboutStreamlineTeam({
       ),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold", children: feature.title }) : feature.title),
-        feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm", getTextColor(background, "muted")), children: feature.description }) : feature.description)
+        feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            className: cn("text-sm", getTextColor(background, "muted")),
+            children: feature.description
+          }
+        ) : feature.description)
       ] })
     ] }, idx)) });
   }, [featuresSlot, features, featuresClassName, background]);
@@ -7954,7 +8071,7 @@ function AboutDeveloperProfile({
   actionsClassName,
   optixFlowConfig,
   background,
-  spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
+  spacing = "xl",
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   pattern,
   patternOpacity
@@ -8046,7 +8163,6 @@ function AboutDeveloperProfile({
 var ALL_TAB_VALUE = "__all__";
 function AboutStartupTeam({
   className,
-  containerClassName,
   title,
   titleClassName,
   description,
@@ -8061,7 +8177,8 @@ function AboutStartupTeam({
   teamMembersClassName,
   optixFlowConfig,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
   defaultActiveTab,
@@ -8113,10 +8230,7 @@ function AboutStartupTeam({
         onClick: () => handleTabChange(link.value),
         className: cn(
           "block w-full text-left rounded-lg px-4 py-2 text-sm font-medium transition-colors",
-          activeTab === link.value ? "bg-primary text-primary-foreground" : cn(
-            getTextColor(background, "muted"),
-            "hover:bg-muted"
-          )
+          activeTab === link.value ? "bg-primary text-primary-foreground" : cn(getTextColor(background, "muted"), "hover:bg-muted")
         ),
         children: link.label
       },
@@ -8149,18 +8263,24 @@ function AboutStartupTeam({
               className: "mx-auto h-24 w-24 rounded-full object-cover",
               optixFlowConfig
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
-            "mx-auto flex h-24 w-24 items-center justify-center rounded-full",
-            getNestedCardBg(background),
-            getNestedCardTextColor(background)
-          ), children: /* @__PURE__ */ jsxRuntime.jsx(
-            DynamicIcon,
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
             {
-              name: "lucide/user",
-              size: 40,
-              className: cn(getTextColor(background, "muted"))
+              className: cn(
+                "mx-auto flex h-24 w-24 items-center justify-center rounded-full",
+                getNestedCardBg(background),
+                getNestedCardTextColor(background)
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                DynamicIcon,
+                {
+                  name: "lucide/user",
+                  size: 40,
+                  className: cn(getTextColor(background, "muted"))
+                }
+              )
             }
-          ) }),
+          ),
           member.name && (typeof member.name === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mt-4 font-semibold", children: member.name }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: member.name })),
           member.role && (typeof member.role === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm", getTextColor(background, "muted")), children: member.role }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm", children: member.role })),
           member.socialLinks && member.socialLinks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 flex justify-center gap-3", children: member.socialLinks.map((link, linkIdx) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -8214,8 +8334,9 @@ function AboutStartupTeam({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-12 lg:grid-cols-4", children: [
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-12 lg:grid-cols-4", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "aside",
           {
@@ -8284,7 +8405,6 @@ function AboutMinimalStory({
   authorSlot,
   featuredImage,
   className,
-  containerClassName,
   contentClassName,
   titleClassName,
   bodyClassName,
@@ -8292,7 +8412,8 @@ function AboutMinimalStory({
   imageClassName,
   optixFlowConfig,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity
 }) {
@@ -8308,7 +8429,16 @@ function AboutMinimalStory({
           className: "h-16 w-16 rounded-full object-cover",
           optixFlowConfig
         }
-      ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex h-16 w-16 items-center justify-center rounded-full text-2xl font-bold text-primary-foreground", getAccentColor(background)), children: author.name.charAt(0) }),
+      ) : /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "flex h-16 w-16 items-center justify-center rounded-full text-2xl font-bold text-primary-foreground",
+            getAccentColor(background)
+          ),
+          children: author.name.charAt(0)
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold", children: author.name }),
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm", getTextColor(background, "muted")), children: author.role })
@@ -8322,7 +8452,7 @@ function AboutMinimalStory({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
+      className,
       containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-3xl", contentClassName), children: [
         (authorSlot || author) && authorContent,
@@ -8371,7 +8501,6 @@ function AboutStoryHero({
   teamInfo,
   teamInfoSlot,
   className,
-  containerClassName,
   contentClassName,
   titleClassName,
   subtitleClassName,
@@ -8380,7 +8509,8 @@ function AboutStoryHero({
   imageClassName,
   optixFlowConfig,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity
 }) {
@@ -8481,36 +8611,61 @@ function AboutStatsSidebar({
   features,
   featuresSlot,
   className,
-  containerClassName,
   sidebarClassName,
   titleClassName,
   descriptionClassName,
   statsClassName,
   featuresClassName,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity
 }) {
   const statsContent = React26.useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-6 sm:grid-cols-2", statsClassName), children: stats.map((stat, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
-      "rounded-xl border p-6",
-      getNestedCardBg(background, "card"),
-      getNestedCardTextColor(background)
-    ), children: [
-      stat.icon,
-      typeof stat.value === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 text-4xl font-bold", children: stat.value }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: stat.value }),
-      typeof stat.label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 font-semibold", children: stat.label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1", children: stat.label }),
-      stat.description && (typeof stat.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-2 text-sm", getTextColor(background, "muted")), children: stat.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: stat.description }))
-    ] }, idx)) });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-6 sm:grid-cols-2", statsClassName), children: stats.map((stat, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "rounded-xl border p-6",
+          getNestedCardBg(background, "card"),
+          getNestedCardTextColor(background)
+        ),
+        children: [
+          stat.icon,
+          typeof stat.value === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 text-4xl font-bold", children: stat.value }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: stat.value }),
+          typeof stat.label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 font-semibold", children: stat.label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1", children: stat.label }),
+          stat.description && (typeof stat.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "mt-2 text-sm",
+                getTextColor(background, "muted")
+              ),
+              children: stat.description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: stat.description }))
+        ]
+      },
+      idx
+    )) });
   }, [statsSlot, stats, statsClassName]);
   const featuresContent = React26.useMemo(() => {
     if (featuresSlot) return featuresSlot;
     if (!features || features.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-12 space-y-6", featuresClassName), children: features.map((feature, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-primary/10", feature.iconBgClass), children: feature.icon }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-primary/10",
+            feature.iconBgClass
+          ),
+          children: feature.icon
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold", children: feature.title }) : feature.title),
         feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: getTextColor(background, "muted"), children: feature.description }) : feature.description)
@@ -8527,10 +8682,35 @@ function AboutStatsSidebar({
       className: cn(className),
       containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-12 lg:grid-cols-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("lg:sticky lg:top-24 lg:self-start", sidebarClassName), children: [
-          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-bold tracking-tight md:text-4xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 text-lg", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", descriptionClassName), children: description }))
-        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn("lg:sticky lg:top-24 lg:self-start", sidebarClassName),
+            children: [
+              title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h2",
+                {
+                  className: cn(
+                    "text-3xl font-bold tracking-tight md:text-4xl",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "mt-4 text-lg",
+                    getTextColor(background, "muted"),
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", descriptionClassName), children: description }))
+            ]
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lg:col-span-2", children: [
           (statsSlot || stats && stats.length > 0) && statsContent,
           (featuresSlot || features && features.length > 0) && featuresContent
@@ -8558,7 +8738,7 @@ function AboutInteractiveTabs({
   optixFlowConfig,
   background,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "py-12 md:py-32",
+  spacing = "xl",
   pattern,
   patternOpacity
 }) {
@@ -8696,7 +8876,6 @@ function AboutMissionDualImage({
   actions,
   actionsSlot,
   className,
-  containerClassName,
   contentClassName,
   missionTitleClassName,
   missionContentClassName,
@@ -8707,7 +8886,8 @@ function AboutMissionDualImage({
   actionsClassName,
   optixFlowConfig,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity
 }) {
@@ -8860,7 +9040,8 @@ function AboutStoryExpertise({
   expertiseSectionClassName,
   className,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity,
   optixFlowConfig
@@ -8950,6 +9131,7 @@ function AboutStoryExpertise({
       className: cn(className),
       pattern,
       patternOpacity,
+      containerClassName,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 items-center gap-12 lg:grid-cols-2", children: [
           /* @__PURE__ */ jsxRuntime.jsxs(
@@ -9088,7 +9270,6 @@ function AboutNetworkSpotlight({
   spotlightCard,
   spotlightCardSlot,
   className,
-  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   contentClassName,
   eyebrowClassName,
   headingClassName,
@@ -9098,6 +9279,7 @@ function AboutNetworkSpotlight({
   imageClassName,
   spotlightCardClassName,
   background,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
@@ -41759,9 +41941,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,
@@ -41770,7 +41967,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,
@@ -41792,51 +41989,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 = React26__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_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__ */ jsxRuntime.jsx(
     Section,
     {
@@ -41877,40 +42069,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",
               {
@@ -41935,19 +42094,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",
@@ -47621,13 +47792,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",
@@ -47864,8 +48035,8 @@ function HeroImageSlider({
                             }
                           }
                         },
-                        defaultFields: DEFAULT_FORM_FIELDS42,
-                        defaultStyleRules: DEFAULT_STYLE_RULES41
+                        defaultFields: DEFAULT_FORM_FIELDS43,
+                        defaultStyleRules: DEFAULT_STYLE_RULES42
                       }
                     ),
                     privacyNotice && /* @__PURE__ */ jsxRuntime.jsx(
@@ -53362,7 +53533,7 @@ function HeroHiringAnimatedText({
     }
   );
 }
-var DEFAULT_FORM_FIELDS43 = [
+var DEFAULT_FORM_FIELDS44 = [
   {
     name: "email",
     type: "email",
@@ -53375,7 +53546,7 @@ var DEFAULT_FORM_FIELDS43 = [
 function HeroSplitImageNewsletter({
   heading,
   description,
-  formFields = DEFAULT_FORM_FIELDS43,
+  formFields = DEFAULT_FORM_FIELDS44,
   formConfig,
   onSubmit,
   onSuccess,
@@ -54866,7 +55037,7 @@ function HeroProductShowcaseFloating({
     }
   );
 }
-var DEFAULT_FORM_FIELDS44 = [
+var DEFAULT_FORM_FIELDS45 = [
   {
     name: "email",
     type: "email",
@@ -54882,7 +55053,7 @@ function HeroSaasDashboardPreview({
   badgeSlot,
   heading,
   description,
-  formFields = DEFAULT_FORM_FIELDS44,
+  formFields = DEFAULT_FORM_FIELDS45,
   formConfig,
   onSubmit,
   onSuccess,
@@ -57671,13 +57842,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",
@@ -57763,8 +57934,8 @@ function HeroNewsletterMinimal({
               }
             }
           },
-          defaultFields: DEFAULT_FORM_FIELDS45,
-          defaultStyleRules: DEFAULT_STYLE_RULES42
+          defaultFields: DEFAULT_FORM_FIELDS46,
+          defaultStyleRules: DEFAULT_STYLE_RULES43
         }
       ),
       helperText && (typeof helperText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm mt-2 text-center"), children: helperText }) : helperText)
@@ -57822,7 +57993,7 @@ function HeroNewsletterMinimal({
     }
   );
 }
-var DEFAULT_FORM_FIELDS46 = [
+var DEFAULT_FORM_FIELDS47 = [
   {
     name: "email",
     type: "email",
@@ -57877,7 +58048,7 @@ function HeroComingSoonCountdown({
   description,
   countdownDate,
   countdownSlot,
-  formFields = DEFAULT_FORM_FIELDS46,
+  formFields = DEFAULT_FORM_FIELDS47,
   formConfig,
   onSubmit,
   onSuccess,
@@ -81726,7 +81897,7 @@ function ListSearchableGrid({
     }
   );
 }
-var { useMemo: useMemo412 } = React26__namespace;
+var { useMemo: useMemo413 } = React26__namespace;
 function OfferModalNewsletterDiscount({
   title,
   emailPlaceholder,
@@ -81794,7 +81965,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__ */ jsxRuntime.jsx("div", { className: "absolute end-1.5 top-1.5", children: /* @__PURE__ */ jsxRuntime.jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -81808,12 +81979,12 @@ function OfferModalNewsletterDiscount({
       }
     ) }) });
   }, [closeButtonSlot, closeButtonText, closeClassName]);
-  const renderHeader = useMemo412(() => {
+  const renderHeader = useMemo413(() => {
     if (headerSlot) return headerSlot;
     if (!title) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(DialogHeader, { className: headerClassName, children: typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { className: cn("text-start font-serif text-2xl font-normal leading-snug", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
       forms.Form,
@@ -81875,7 +82046,7 @@ function OfferModalNewsletterDiscount({
     }
   ) });
 }
-var { useMemo: useMemo413 } = React26__namespace;
+var { useMemo: useMemo414 } = React26__namespace;
 function OfferModalMembershipImage({
   overline,
   title,
@@ -81952,7 +82123,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__ */ jsxRuntime.jsx("div", { className: cn("max-h-[290px] h-full overflow-hidden max-lg:hidden", imageWrapperClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -81965,7 +82136,7 @@ function OfferModalMembershipImage({
       }
     ) });
   }, [imageSlot, image, imageWrapperClassName, imageClassName, optixFlowConfig]);
-  const renderCloseButton = useMemo413(() => {
+  const renderCloseButton = useMemo414(() => {
     if (closeButtonSlot) return closeButtonSlot;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -end-px -top-px z-10", children: /* @__PURE__ */ jsxRuntime.jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
       Pressable,
@@ -81981,7 +82152,7 @@ function OfferModalMembershipImage({
       }
     ) }) });
   }, [closeButtonSlot, closeClassName]);
-  const renderForm = useMemo413(() => {
+  const renderForm = useMemo414(() => {
     if (formSlot) return formSlot;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       forms.Form,
@@ -82044,7 +82215,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__ */ jsxRuntime.jsx(DialogFooter, { className: footerClassName, children: /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { className: cn("text-muted-foreground text-center text-xs leading-relaxed", descriptionClassName), children: description }) });
@@ -82164,7 +82335,7 @@ function SheetDescription({
     }
   );
 }
-var { useMemo: useMemo414 } = React26__namespace;
+var { useMemo: useMemo415 } = React26__namespace;
 function OfferModalSheetNewsletter({
   logo,
   logoSlot,
@@ -82247,7 +82418,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;
@@ -82261,7 +82432,7 @@ function OfferModalSheetNewsletter({
       }
     );
   }, [logoSlot, logo, logoClassName, optixFlowConfig]);
-  const renderHeader = useMemo414(() => {
+  const renderHeader = useMemo415(() => {
     if (headerSlot) return headerSlot;
     return /* @__PURE__ */ jsxRuntime.jsxs(SheetHeader, { className: cn("gap-8 p-0", headerClassName), children: [
       renderLogo,
@@ -82271,7 +82442,7 @@ function OfferModalSheetNewsletter({
       ] })
     ] });
   }, [headerSlot, renderLogo, headerClassName, title, titleClassName, description, descriptionClassName]);
-  const renderForm = useMemo414(() => {
+  const renderForm = useMemo415(() => {
     if (formSlot) return formSlot;
     return /* @__PURE__ */ jsxRuntime.jsx(
       forms.Form,
@@ -82319,7 +82490,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__ */ jsxRuntime.jsxs("p", { className: cn("text-muted-foreground text-xs", legalClassName), children: [
@@ -82333,7 +82504,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__ */ jsxRuntime.jsx("div", { className: cn("h-1/2 basis-1/2", imageWrapperClassName), children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: 1, className: "overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -98519,32 +98690,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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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
+        ))
       }
     );
   }, [
@@ -98753,8 +98912,9 @@ function LinkPageMinimalProfile({
         Pressable,
         {
           className: cn(
-            "flex w-full items-center gap-3 rounded-lg px-4 py-3 transition-colors",
-            "hover:opacity-80",
+            "flex w-full items-center gap-3 rounded-lg px-4 py-3",
+            "bg-card text-card-foreground border shadow-lg",
+            "transition-all duration-500 hover:opacity-80",
             linkClassName,
             linkItemClassName
           ),
@@ -98791,33 +98951,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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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
+        ))
       }
     );
   }, [
@@ -98884,13 +99027,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",
@@ -99008,34 +99151,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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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
+        ))
       }
     );
   }, [
@@ -99073,8 +99204,8 @@ function LinkPageNewsletterSocial({
               }
             }
           },
-          defaultFields: DEFAULT_FORM_FIELDS47,
-          defaultStyleRules: DEFAULT_STYLE_RULES43
+          defaultFields: DEFAULT_FORM_FIELDS48,
+          defaultStyleRules: DEFAULT_STYLE_RULES44
         }
       ),
       helperText && (typeof helperText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm mt-2 text-center"), children: helperText }) : helperText)
@@ -99342,34 +99473,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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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
+        ))
       }
     );
   }, [
@@ -99602,34 +99721,22 @@ function LinkPageBentoLayout({
   const renderSocialLinks = React26.useMemo(() => {
     if (socialLinksSlot) return socialLinksSlot;
     if (!socialLinks || socialLinks.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: cn("flex items-center gap-2 pt-1", socialLinksClassName), children: socialLinks.map((social, index) => /* @__PURE__ */ jsxRuntime.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,
@@ -99834,9 +99941,27 @@ function LinkPageBentoLayout({
     if (!links || links.length === 0) return null;
     const hasFeatured = Boolean(featuredLinksSlot) || featuredLinks.length > 0;
     const hasRegular = Boolean(regularLinksSlot) || regularLinks.length > 0;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-3", linksClassName), children: [
-      hasFeatured && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid grid-cols-1 gap-3", featuredLinksClassName), children: renderFeaturedLinks }),
-      hasRegular && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid grid-cols-1 gap-3", regularLinksClassName), children: renderRegularLinks })
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-3 md:space-y-6", linksClassName), children: [
+      hasFeatured && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 md:gap-6",
+            featuredLinksClassName
+          ),
+          children: renderFeaturedLinks
+        }
+      ),
+      hasRegular && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 md:gap-6",
+            regularLinksClassName
+          ),
+          children: renderRegularLinks
+        }
+      )
     ] });
   }, [
     linksSlot,
@@ -99881,7 +100006,7 @@ function LinkPageBentoLayout({
           ),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
             name && (typeof name === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-xl font-bold", nameClassName), children: name }) : name),
-            bio && (typeof bio === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-xs text-sm", bioClassName), children: bio }) : bio)
+            bio && (typeof bio === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-xs text-sm text-balance", bioClassName), children: bio }) : bio)
           ] }),
           renderSocialLinks
         ]
@@ -116509,7 +116634,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",
@@ -116526,6 +116651,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: [...] },
   ]}