@opensite/ui 2.2.8 → 2.3.0

package/dist/registry.cjs

@@ -17072,7 +17072,7 @@ var DEFAULT_FORM_FIELDS25 = [
 function ContactPhotography({
   heading,
   description,
-  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  containerClassName = "mx-auto w-full max-w-full relative z-10 px-0",
   className,
   headingClassName,
   descriptionClassName,
@@ -18948,7 +18948,7 @@ function ContactHelpCenter({
   patternOpacity,
   className,
   contactItemsSlot,
-  spacing = "py-8 md:py-32",
+  spacing = "py-16 md:py-322",
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   contentClassName,
   leftColumnClassName,
@@ -18966,10 +18966,10 @@ function ContactHelpCenter({
       Pressable,
       {
         href: item.href,
-        className: "flex items-start gap-4 rounded-lg p-4 ",
+        className: "flex items-start gap-4",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.icon, size: 20 }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-12 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.icon, size: 20 }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start gap-1", children: [
             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold", children: item.title }),
             item.subtitle ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: item.subtitle }) : null
           ] })
@@ -18987,7 +18987,7 @@ function ContactHelpCenter({
       patternOpacity,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("rounded-3xl p-8 md:p-12", contentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 items-center gap-8 lg:grid-cols-2", children: [
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative", contentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 items-center gap-8 lg:grid-cols-2", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-5", leftColumnClassName), children: [
           eyebrow && (typeof eyebrow === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "p",
@@ -19003,23 +19003,23 @@ function ContactHelpCenter({
             "h2",
             {
               className: cn(
-                "text-3xl font-bold md:text-4xl text-balance",
+                "text-3xl font-bold md:text-4xl text-pretty",
                 headingClassName
               ),
               children: heading
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-balance", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+          ) : heading),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-balance", descriptionClassName), children: description }) : description)
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             className: cn(
-              "rounded-2xl bg-background p-8 shadow-lg",
+              "rounded-2xl bg-card text-card-foreground py-8 px-4 md:px-8 shadow-lg",
               cardPanelClassName
             ),
             children: [
-              cardTitle ? typeof cardTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("text-xl font-bold", cardTitleClassName), children: cardTitle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cardTitleClassName, children: cardTitle }) : null,
+              cardTitle ? typeof cardTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("text-xl font-bold", cardTitleClassName), children: cardTitle }) : cardTitle : null,
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-6 space-y-4", contactItemsClassName), children: renderContactItems() })
             ]
           }
@@ -98168,13 +98168,6 @@ function TimelineScrollHighlight({
     }
   );
 }
-
-// lib/blockBrandedIconsAndPlaceholders.ts
-var blockBrandedIconsAndPlaceholders = {
-  avatar1: "https://cdn.ing/assets/i/r/286239/ebm7o3j2kx48vw98emnwjaf5qvl6/avatar-1.webp",
-  avatar2: "https://cdn.ing/assets/i/r/286240/vgf3rrkwn0769pfdtpal60uo5vpw/avatar-2.webp",
-  avatar4: "https://cdn.ing/assets/i/r/286242/y0zkazxawxrl3twwkw63twf04pdt/avatar-4.webp",
-  avatar5: "https://cdn.ing/assets/i/r/286243/alziyfoo570m3vade3usufzlzj6x/avatar-5.webp"};
 function LinkTreeBlock({
   brandName,
   brandTagline,
@@ -98260,7 +98253,7 @@ function LinkTreeBlock({
     return value;
   };
   const nameForAlt = typeof brandName === "string" ? brandName : "Brand avatar";
-  const resolvedAvatar = resolveImage(brandAvatar || brandLogo, nameForAlt) || resolveImage(blockBrandedIconsAndPlaceholders.avatar1, nameForAlt);
+  const resolvedAvatar = resolveImage(brandAvatar || brandLogo, nameForAlt);
   const renderBrandHeader = React26__namespace.useMemo(() => {
     if (brandSlot) return brandSlot;
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -98294,7 +98287,7 @@ function LinkTreeBlock({
               "div",
               {
                 className: cn(
-                  "absolute -bottom-1 -right-1 rounded-full bg-primary p-1",
+                  "absolute -bottom-1 -right-1 rounded-full bg-primary text-primary-foreground p-1",
                   verifiedBadgeClassName
                 ),
                 children: verifiedIcon ?? /* @__PURE__ */ jsxRuntime.jsx(
@@ -98421,7 +98414,7 @@ function LinkTreeBlock({
                 {
                   className: cn(
                     "mt-0.5 block truncate text-xs",
-                    isFeatured ? "text-primary-foreground/70" : "",
+                    isFeatured ? "text-primary-foreground" : "",
                     linkDescriptionClassName
                   ),
                   children: description
@@ -98443,7 +98436,7 @@ function LinkTreeBlock({
                 size: 16,
                 className: cn(
                   "shrink-0 transition-transform group-hover:translate-x-0.5",
-                  isFeatured ? "text-primary-foreground/70" : "",
+                  isFeatured ? "text-primary-foreground" : "",
                   linkChevronClassName
                 )
               }
@@ -98702,7 +98695,7 @@ function LinkPageMinimalProfile({
   name,
   bio,
   avatar,
-  avatarUrl = blockBrandedIconsAndPlaceholders.avatar2,
+  avatarUrl,
   profileSlot,
   links,
   linksSlot,
@@ -98711,7 +98704,6 @@ function LinkPageMinimalProfile({
   footerAction,
   footerSlot,
   className,
-  containerClassName,
   contentClassName,
   headerClassName,
   avatarClassName,
@@ -98725,20 +98717,20 @@ function LinkPageMinimalProfile({
   socialLinkClassName,
   socialIconClassName,
   footerClassName,
-  background = "default",
-  spacing,
+  background,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-12 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
   optixFlowConfig
 }) {
-  const resolvedBackground = background;
-  const resolvedAvatar = avatar || (avatarUrl ? {
-    src: avatarUrl,
-    alt: typeof name === "string" ? name : "Profile avatar"
-  } : void 0);
   const renderProfile = React26.useMemo(() => {
     if (profileSlot) return profileSlot;
+    const resolvedAvatar = avatar || (avatarUrl ? {
+      src: avatarUrl,
+      alt: typeof name === "string" ? name : "Profile avatar"
+    } : void 0);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -98752,7 +98744,6 @@ function LinkPageMinimalProfile({
             {
               className: cn(
                 "h-20 w-20 overflow-hidden rounded-full",
-                getNestedCardBg(resolvedBackground),
                 avatarClassName
               ),
               children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -98767,32 +98758,24 @@ function LinkPageMinimalProfile({
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-            name && (typeof name === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-              "h1",
-              {
-                className: cn(
-                  "text-xl font-semibold",
-                  nameClassName
-                ),
-                children: name
-              }
-            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: nameClassName, children: name })),
-            bio && (typeof bio === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-              "p",
-              {
-                className: cn(
-                  "text-sm",
-                  getTextColor(resolvedBackground, "muted"),
-                  bioClassName
-                ),
-                children: bio
-              }
-            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: bioClassName, children: bio }))
+            name && (typeof name === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-xl font-semibold", nameClassName), children: name }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: nameClassName, children: name })),
+            bio && (typeof bio === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm", bioClassName), children: bio }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: bioClassName, children: bio }))
           ] })
         ]
       }
     );
-  }, [profileSlot, resolvedAvatar, avatarClassName, optixFlowConfig, name, resolvedBackground, nameClassName, bio, bioClassName, headerClassName]);
+  }, [
+    avatar,
+    avatarUrl,
+    profileSlot,
+    avatarClassName,
+    optixFlowConfig,
+    name,
+    nameClassName,
+    bio,
+    bioClassName,
+    headerClassName
+  ]);
   const renderLinks = React26.useMemo(() => {
     if (linksSlot) return linksSlot;
     if (!links || links.length === 0) return null;
@@ -98819,8 +98802,6 @@ function LinkPageMinimalProfile({
           {
             className: cn(
               "flex w-full items-center gap-3 rounded-lg px-4 py-3 transition-colors",
-              getNestedCardBg(resolvedBackground),
-              getNestedCardTextColor(resolvedBackground),
               "hover:opacity-80",
               linkClassName,
               linkItemClassName
@@ -98836,8 +98817,6 @@ function LinkPageMinimalProfile({
         {
           className: cn(
             "flex w-full items-center gap-3 rounded-lg px-4 py-3 transition-colors",
-            getNestedCardBg(resolvedBackground),
-            getNestedCardTextColor(resolvedBackground),
             "hover:opacity-80",
             linkClassName,
             linkItemClassName
@@ -98857,7 +98836,14 @@ function LinkPageMinimalProfile({
         link.id ?? index
       );
     }) });
-  }, [linksSlot, links, linksClassName, linkIconClassName, resolvedBackground, linkClassName, linkLabelClassName]);
+  }, [
+    linksSlot,
+    links,
+    linksClassName,
+    linkIconClassName,
+    linkClassName,
+    linkLabelClassName
+  ]);
   const renderSocialLinks = React26.useMemo(() => {
     if (socialLinksSlot) return socialLinksSlot;
     if (!socialLinks || socialLinks.length === 0) return null;
@@ -98886,7 +98872,6 @@ function LinkPageMinimalProfile({
               "aria-label": ariaLabel,
               className: cn(
                 "rounded-full p-2 transition-colors",
-                getTextColor(resolvedBackground, "muted"),
                 "hover:opacity-80",
                 socialLinkClassName,
                 social.className
@@ -98898,7 +98883,13 @@ function LinkPageMinimalProfile({
         })
       }
     );
-  }, [socialLinksSlot, socialLinks, socialLinksClassName, socialIconClassName, resolvedBackground, socialLinkClassName]);
+  }, [
+    socialLinksSlot,
+    socialLinks,
+    socialLinksClassName,
+    socialIconClassName,
+    socialLinkClassName
+  ]);
   const renderFooter = React26.useMemo(() => {
     if (footerSlot) return footerSlot;
     if (!footerAction) return null;
@@ -98917,7 +98908,6 @@ function LinkPageMinimalProfile({
       {
         className: cn(
           "flex items-center justify-center gap-1.5 text-xs transition-opacity hover:opacity-80",
-          getTextColor(resolvedBackground, "subtle"),
           footerClassName,
           actionClassName
         ),
@@ -98929,11 +98919,11 @@ function LinkPageMinimalProfile({
         ] })
       }
     );
-  }, [footerSlot, footerAction, resolvedBackground, footerClassName]);
+  }, [footerSlot, footerAction, footerClassName]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
-      background: resolvedBackground,
+      background,
       spacing,
       className,
       pattern,
@@ -98957,6 +98947,22 @@ function LinkPageMinimalProfile({
     }
   );
 }
+var DEFAULT_STYLE_RULES43 = {
+  formContainer: "w-full flex flex-col gap-3",
+  fieldsContainer: "",
+  fieldClassName: "",
+  formClassName: ""
+};
+var DEFAULT_FORM_FIELDS47 = [
+  {
+    name: "email",
+    type: "email",
+    label: "Email Address",
+    placeholder: "Enter your email",
+    required: true,
+    columnSpan: 12
+  }
+];
 function LinkPageNewsletterSocial({
   name,
   bio,
@@ -98965,13 +98971,11 @@ function LinkPageNewsletterSocial({
   profileSlot,
   newsletterHeading,
   newsletterDescription,
-  emailPlaceholder,
-  buttonText,
-  submitAction,
+  formEngineSetup,
+  buttonAction,
+  helperText,
   newsletterSlot,
   formSlot,
-  submittingLabel,
-  submittingIcon = /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/loader-2", size: 16, className: "animate-spin" }),
   links,
   linksSlot,
   linkChevronIcon,
@@ -98991,9 +98995,6 @@ function LinkPageNewsletterSocial({
   newsletterCardClassName,
   newsletterHeadingClassName,
   newsletterDescriptionClassName,
-  formClassName,
-  inputClassName,
-  submitButtonClassName,
   linksClassName,
   linkClassName,
   linkIconClassName,
@@ -99006,75 +99007,15 @@ function LinkPageNewsletterSocial({
   pattern,
   patternOpacity,
   patternClassName,
-  formConfig,
-  onSubmit,
-  onSuccess,
-  onError,
   optixFlowConfig
 }) {
-  const resolvedBackground = background;
-  const resolvedAvatar = avatar || (avatarUrl ? {
-    src: avatarUrl,
-    alt: typeof name === "string" ? name : "Profile avatar"
-  } : void 0);
-  const form = 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();
-          }
-          onSuccess?.(result);
-        }
-      } catch (error) {
-        if (error instanceof integration.PageSpeedFormSubmissionError && error.formErrors) {
-          helpers.setErrors(error.formErrors);
-        }
-        onError?.(error);
-        throw error;
-      }
-    }
-  });
-  const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
-  const resolvedSubmitAction = React26.useMemo(() => {
-    if (submitAction) {
-      return {
-        ...submitAction,
-        label: buttonText || submitAction?.label || "Submit",
-        variant: submitAction?.variant || "default",
-        size: submitAction?.size || "lg"
-      };
-    }
-    return {
-      label: buttonText || "Submit",
-      variant: "default",
-      size: "lg"
-    };
-  }, [submitAction, buttonText]);
   const resolvedChevronIcon = linkChevronIcon ?? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 16 });
   const renderProfile = React26.useMemo(() => {
     if (profileSlot) return profileSlot;
+    const resolvedAvatar = avatar || (avatarUrl ? {
+      src: avatarUrl,
+      alt: typeof name === "string" ? name : "Profile avatar"
+    } : void 0);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -99110,11 +99051,11 @@ function LinkPageNewsletterSocial({
     );
   }, [
     profileSlot,
-    resolvedAvatar,
+    avatar,
+    avatarUrl,
     avatarClassName,
     optixFlowConfig,
     name,
-    resolvedBackground,
     nameClassName,
     bio,
     bioClassName,
@@ -99165,63 +99106,43 @@ function LinkPageNewsletterSocial({
     socialLinks,
     socialLinksClassName,
     socialIconClassName,
-    resolvedBackground,
     socialLinkClassName
   ]);
-  const renderFormFields = React26.useMemo(() => {
+  const renderForm = React26.useMemo(() => {
     if (formSlot) return formSlot;
-    const {
-      label,
-      icon,
-      iconAfter,
-      children,
-      className: actionClassName,
-      ...pressableProps
-    } = resolvedSubmitAction;
+    if (!formEngineSetup) return null;
+    const defaultButtonAction = {
+      label: "Submit",
+      variant: "default"
+    };
+    const action = buttonAction || defaultButtonAction;
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "email", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsx(
-        TextInput,
-        {
-          ...field,
-          type: "email",
-          placeholder: emailPlaceholder,
-          error: meta.touched && !!meta.error,
-          className: cn("w-full", inputClassName),
-          "aria-label": emailPlaceholder || "Email address"
-        }
-      ) }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        Pressable,
+        integration.FormEngine,
         {
-          componentType: "button",
-          type: "submit",
-          variant: resolvedSubmitAction.variant ?? "default",
-          size: resolvedSubmitAction.size ?? "lg",
-          className: cn("w-full", submitButtonClassName, actionClassName),
-          asButton: true,
-          disabled: form.isSubmitting,
-          ...pressableProps,
-          children: form.isSubmitting ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            submittingIcon,
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: submittingLabel })
-          ] }) : children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
+          formEngineSetup: {
+            ...formEngineSetup,
+            formLayoutSettings: {
+              ...formEngineSetup.formLayoutSettings,
+              formLayout: "button-group",
+              buttonGroupSetup: {
+                ...formEngineSetup.formLayoutSettings?.buttonGroupSetup,
+                size: "lg",
+                submitLabel: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  action.label,
+                  action.iconAfter
+                ] }),
+                submitVariant: action.variant || "default"
+              }
+            }
+          },
+          defaultFields: DEFAULT_FORM_FIELDS47,
+          defaultStyleRules: DEFAULT_STYLE_RULES43
         }
-      )
+      ),
+      helperText && (typeof helperText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm mt-2 text-center"), children: helperText }) : helperText)
     ] });
-  }, [
-    formSlot,
-    resolvedSubmitAction,
-    emailPlaceholder,
-    inputClassName,
-    submitButtonClassName,
-    form.isSubmitting,
-    submittingIcon,
-    submittingLabel
-  ]);
+  }, [formSlot, formEngineSetup, buttonAction, helperText]);
   const renderNewsletter = React26.useMemo(() => {
     if (newsletterSlot) return newsletterSlot;
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -99246,16 +99167,7 @@ function LinkPageNewsletterSocial({
             ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: newsletterHeadingClassName, children: newsletterHeading })),
             newsletterDescription && (typeof newsletterDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm", newsletterDescriptionClassName), children: newsletterDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: newsletterDescriptionClassName, children: newsletterDescription }))
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            forms.Form,
-            {
-              form,
-              action: formConfig?.endpoint,
-              method: formMethod,
-              className: cn("space-y-3", formClassName),
-              children: renderFormFields
-            }
-          )
+          renderForm
         ]
       }
     );
@@ -99265,13 +99177,8 @@ function LinkPageNewsletterSocial({
     newsletterHeading,
     newsletterHeadingClassName,
     newsletterDescription,
-    resolvedBackground,
     newsletterDescriptionClassName,
-    form,
-    formConfig?.endpoint,
-    formMethod,
-    formClassName,
-    renderFormFields
+    renderForm
   ]);
   const renderLinks = React26.useMemo(() => {
     if (linksSlot) return linksSlot;
@@ -99344,7 +99251,6 @@ function LinkPageNewsletterSocial({
     links,
     linksClassName,
     linkIconClassName,
-    resolvedBackground,
     linkClassName,
     linkLabelClassName,
     linkChevronClassName,
@@ -99380,11 +99286,11 @@ function LinkPageNewsletterSocial({
         ] })
       }
     );
-  }, [footerSlot, footerAction, resolvedBackground, footerClassName]);
+  }, [footerSlot, footerAction, footerClassName]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
-      background: resolvedBackground,
+      background,
       spacing,
       className,
       pattern,
@@ -99401,6 +99307,10 @@ function LinkPageNewsletterSocial({
     }
   );
 }
+
+// lib/blockBrandedIconsAndPlaceholders.ts
+var blockBrandedIconsAndPlaceholders = {
+  avatar4: "https://cdn.ing/assets/i/r/286242/y0zkazxawxrl3twwkw63twf04pdt/avatar-4.webp"};
 function LinkPageGridCards({
   name,
   bio,
@@ -99705,7 +99615,7 @@ function LinkPageBentoLayout({
   name,
   bio,
   avatar,
-  avatarUrl = blockBrandedIconsAndPlaceholders.avatar5,
+  avatarUrl,
   profileSlot,
   links,
   linksSlot,
@@ -99716,7 +99626,6 @@ function LinkPageBentoLayout({
   footerAction,
   footerSlot,
   className,
-  containerClassName,
   contentClassName,
   headerClassName,
   avatarClassName,
@@ -99739,14 +99648,14 @@ function LinkPageBentoLayout({
   regularLinkIconClassName,
   regularLinkLabelClassName,
   footerClassName,
-  background = "white",
-  spacing,
+  background,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-12 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
   optixFlowConfig
 }) {
-  const resolvedBackground = background;
   const resolvedAvatar = avatar || (avatarUrl ? {
     src: avatarUrl,
     alt: typeof name === "string" ? name : "Profile avatar"
@@ -99775,7 +99684,6 @@ function LinkPageBentoLayout({
           className: cn(
             "rounded-full p-2 transition-all duration-200",
             "hover:scale-110 active:scale-95",
-            getTextColor(resolvedBackground, "muted"),
             "hover:opacity-80",
             socialLinkClassName,
             social.className
@@ -99790,7 +99698,6 @@ function LinkPageBentoLayout({
     socialLinks,
     socialLinksClassName,
     socialIconClassName,
-    resolvedBackground,
     socialLinkClassName
   ]);
   const renderFeaturedLinks = React26.useMemo(() => {
@@ -99823,9 +99730,7 @@ function LinkPageBentoLayout({
           Pressable,
           {
             className: cn(
-              "group relative aspect-4/3 overflow-hidden rounded-2xl transition-all duration-200",
-              "hover:scale-[1.02] active:scale-[0.98]",
-              "border border-border bg-muted",
+              "group relative aspect-4/3 overflow-hidden rounded-xl",
               featuredLinkClassName,
               linkClassName
             ),
@@ -99839,9 +99744,7 @@ function LinkPageBentoLayout({
         Pressable,
         {
           className: cn(
-            "group relative aspect-4/3 overflow-hidden rounded-2xl transition-all duration-200",
-            "hover:scale-[1.02] active:scale-[0.98]",
-            "border border-border bg-muted",
+            "group relative aspect-4/3 overflow-hidden rounded-xl",
             featuredLinkClassName,
             linkClassName
           ),
@@ -99853,7 +99756,7 @@ function LinkPageBentoLayout({
                 src: imageSource,
                 alt: imageAlt,
                 className: cn(
-                  "absolute inset-0 h-full w-full object-cover transition-transform duration-300 group-hover:scale-105",
+                  "absolute inset-0 h-full w-full object-cover",
                   featuredLinkImageClassName
                 ),
                 optixFlowConfig
@@ -99864,7 +99767,7 @@ function LinkPageBentoLayout({
               {
                 className: cn(
                   "absolute inset-0 transition-opacity",
-                  imageSource ? "bg-linear-to-t from-black/80 via-black/40 to-transparent" : "bg-linear-to-t from-neutral-200/50 to-transparent",
+                  imageSource ? "bg-linear-to-t from-black/80 via-black/40 to-transparent text-white" : "bg-primary text-primary-foreground",
                   featuredLinkOverlayClassName
                 )
               }
@@ -99877,7 +99780,6 @@ function LinkPageBentoLayout({
                   {
                     className: cn(
                       "text-sm font-semibold",
-                      imageSource && "text-background",
                       featuredLinkLabelClassName
                     ),
                     children: label
@@ -99889,12 +99791,11 @@ function LinkPageBentoLayout({
                 {
                   className: cn(
                     "mt-0.5 text-xs",
-                    imageSource ? "text-background/70" : getTextColor(resolvedBackground, "muted"),
                     featuredLinkDescriptionClassName
                   ),
                   children: description
                 }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: featuredLinkDescriptionClassName, children: description }))
+              ) : description)
             ] })
           ]
         },
@@ -99904,7 +99805,6 @@ function LinkPageBentoLayout({
   }, [
     featuredLinksSlot,
     featuredLinks,
-    resolvedBackground,
     featuredLinkClassName,
     featuredLinkImageClassName,
     optixFlowConfig,
@@ -99938,9 +99838,7 @@ function LinkPageBentoLayout({
           Pressable,
           {
             className: cn(
-              "group flex items-center gap-3 rounded-xl p-3 transition-all duration-200",
-              "hover:scale-[1.02] active:scale-[0.98]",
-              "border border-border bg-muted/50 hover:opacity-80",
+              "group flex items-center gap-3 rounded-xl p-3",
               regularLinkClassName,
               linkClassName
             ),
@@ -99954,9 +99852,8 @@ function LinkPageBentoLayout({
         Pressable,
         {
           className: cn(
-            "group flex items-center gap-3 rounded-xl p-3 transition-all duration-200",
-            "hover:scale-[1.02] active:scale-[0.98]",
-            "border border-border bg-muted/50 hover:opacity-80",
+            "group flex items-center gap-3 rounded-xl p-3",
+            "bg-card text-card-foreground",
             regularLinkClassName,
             linkClassName
           ),
@@ -99967,8 +99864,6 @@ function LinkPageBentoLayout({
               {
                 className: cn(
                   "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg",
-                  getNestedCardBg(resolvedBackground, "card"),
-                  getNestedCardTextColor(resolvedBackground),
                   regularLinkIconWrapperClassName
                 ),
                 children: iconElement
@@ -99992,7 +99887,6 @@ function LinkPageBentoLayout({
   }, [
     regularLinksSlot,
     regularLinks,
-    resolvedBackground,
     regularLinkClassName,
     regularLinkIconWrapperClassName,
     regularLinkIconClassName,
@@ -100004,8 +99898,8 @@ function LinkPageBentoLayout({
     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-2 gap-3", featuredLinksClassName), children: renderFeaturedLinks }),
-      hasRegular && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid grid-cols-2 gap-3", regularLinksClassName), children: renderRegularLinks })
+      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 })
     ] });
   }, [
     linksSlot,
@@ -100049,18 +99943,8 @@ 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 }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: nameClassName, children: name })),
-            bio && (typeof bio === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-              "p",
-              {
-                className: cn(
-                  "max-w-xs text-sm",
-                  getTextColor(resolvedBackground, "muted"),
-                  bioClassName
-                ),
-                children: bio
-              }
-            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: bioClassName, children: bio }))
+            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)
           ] }),
           renderSocialLinks
         ]
@@ -100069,7 +99953,6 @@ function LinkPageBentoLayout({
   }, [
     profileSlot,
     resolvedAvatar,
-    resolvedBackground,
     avatarClassName,
     optixFlowConfig,
     name,
@@ -100097,7 +99980,6 @@ function LinkPageBentoLayout({
       {
         className: cn(
           "flex items-center justify-center gap-1.5 text-xs transition-opacity hover:opacity-80",
-          getTextColor(resolvedBackground, "muted"),
           "opacity-50",
           footerClassName,
           actionClassName
@@ -100110,30 +99992,22 @@ function LinkPageBentoLayout({
         ] })
       }
     );
-  }, [footerSlot, footerAction, resolvedBackground, footerClassName]);
+  }, [footerSlot, footerAction, footerClassName]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
-      background: resolvedBackground,
+      background,
       spacing,
       className,
       pattern,
       patternOpacity,
       patternClassName,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: cn(
-            "flex min-h-screen w-full items-start justify-center py-12",
-            containerClassName
-          ),
-          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full max-w-lg space-y-6", contentClassName), children: [
-            renderProfile,
-            renderLinks,
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-4", children: renderFooter })
-          ] })
-        }
-      )
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full max-w-lg space-y-6", contentClassName), children: [
+        renderProfile,
+        renderLinks,
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-4", children: renderFooter })
+      ] }) })
     }
   );
 }
@@ -116386,7 +116260,7 @@ var BLOCK_REGISTRY = {
   "link-page-newsletter-social": {
     id: "link-page-newsletter-social",
     name: "Link Page Newsletter Social",
-    description: "A link page with integrated newsletter signup form. Features profile section with avatar, newsletter signup form with email validation and @page-speed/forms integration, social media links, and additional links section. Supports universal REST API integration, custom submission handlers, and DashTrack Rails backend. Ideal for content creators, bloggers, and marketers who want to grow their email list.",
+    description: "A link page with integrated newsletter signup form powered by FormEngine. Features profile section with avatar, newsletter signup form with email validation via @page-speed/forms/integration, social media links, and additional links section. Supports universal REST API integration via formEngineSetup. Ideal for content creators, bloggers, and marketers who want to grow their email list.",
     semanticTags: [
       "link-page",
       "newsletter",
@@ -116407,8 +116281,10 @@ var BLOCK_REGISTRY = {
   name="Content Creator"
   bio="Weekly tips on growing your audience"
   newsletterHeading="Join my newsletter"
-  formConfig={{ endpoint: "/api/subscribe" }}
-  onSuccess={() => console.log("Subscribed!")}
+  formEngineSetup={{
+    formConfig: { endpoint: "/api/subscribe", format: "json" },
+  }}
+  buttonAction={{ label: "Subscribe", variant: "default" }}
   links={[
     { id: "1", label: "My Website", href: "https://example.com", icon: "lucide/globe" }
   ]}