@opensite/ui 1.6.3 → 1.6.5

package/dist/link-page-newsletter-social.cjs

@@ -36,62 +36,6 @@ var TextInput = inputs.TextInput;
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-function getNestedCardBg(parentBg, variant = "muted", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "muted":
-        return "bg-background";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-background/50";
-    }
-  } else {
-    switch (variant) {
-      case "muted":
-        return "bg-muted";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-muted/50";
-    }
-  }
-}
-function getNestedCardTextColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-foreground" : "";
-}
-function getTextColor(parentBg, variant = "default", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-foreground/80";
-      case "subtle":
-        return "text-foreground/60";
-      case "accent":
-        return "text-accent-foreground";
-    }
-  } else {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-muted-foreground";
-      case "subtle":
-        return "text-muted-foreground/70";
-      case "accent":
-        return "text-primary";
-    }
-  }
-}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -615,10 +559,6 @@ function processSvgForCurrentColor(svg) {
   );
   return processed;
 }
-
-// lib/blockBrandedIconsAndPlaceholders.ts
-var blockBrandedIconsAndPlaceholders = {
-  avatar3: "https://cdn.ing/assets/i/r/286241/05vbqt3lls0q974r8fv4zn0njllq/avatar-3.webp"};
 var PageSpeedFormSubmissionError = class extends Error {
   constructor(message, options = {}) {
     super(message);
@@ -1117,7 +1057,7 @@ function LinkPageNewsletterSocial({
   name,
   bio,
   avatar,
-  avatarUrl = blockBrandedIconsAndPlaceholders.avatar3,
+  avatarUrl,
   profileSlot,
   newsletterHeading,
   newsletterDescription,
@@ -1136,7 +1076,6 @@ function LinkPageNewsletterSocial({
   footerAction,
   footerSlot,
   className,
-  containerClassName,
   contentClassName,
   headerClassName,
   avatarClassName,
@@ -1157,8 +1096,9 @@ function LinkPageNewsletterSocial({
   linkLabelClassName,
   linkChevronClassName,
   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,
@@ -1248,32 +1188,24 @@ function LinkPageNewsletterSocial({
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-            name && (typeof name === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-              "h1",
-              {
-                className: cn(
-                  "text-2xl 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-2xl 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 text-balance", bioClassName), children: bio }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: bioClassName, children: bio }))
           ] })
         ]
       }
     );
-  }, [profileSlot, resolvedAvatar, avatarClassName, optixFlowConfig, name, resolvedBackground, nameClassName, bio, bioClassName, headerClassName]);
+  }, [
+    profileSlot,
+    resolvedAvatar,
+    avatarClassName,
+    optixFlowConfig,
+    name,
+    resolvedBackground,
+    nameClassName,
+    bio,
+    bioClassName,
+    headerClassName
+  ]);
   const renderSocialLinks = React.useMemo(() => {
     if (socialLinksSlot) return socialLinksSlot;
     if (!socialLinks || socialLinks.length === 0) return null;
@@ -1300,12 +1232,10 @@ function LinkPageNewsletterSocial({
             {
               ...socialPressableProps,
               "aria-label": ariaLabel,
+              asButton: true,
+              size: "icon-lg",
               className: cn(
                 "rounded-full p-2.5 transition-all duration-200",
-                "hover:scale-110 active:scale-95",
-                getNestedCardBg(resolvedBackground),
-                getNestedCardTextColor(resolvedBackground),
-                "hover:opacity-80",
                 socialLinkClassName,
                 social.className
               ),
@@ -1316,7 +1246,14 @@ function LinkPageNewsletterSocial({
         })
       }
     );
-  }, [socialLinksSlot, socialLinks, socialLinksClassName, socialIconClassName, resolvedBackground, socialLinkClassName]);
+  }, [
+    socialLinksSlot,
+    socialLinks,
+    socialLinksClassName,
+    socialIconClassName,
+    resolvedBackground,
+    socialLinkClassName
+  ]);
   const renderFormFields = React.useMemo(() => {
     if (formSlot) return formSlot;
     const {
@@ -1335,10 +1272,7 @@ function LinkPageNewsletterSocial({
           type: "email",
           placeholder: emailPlaceholder,
           error: meta.touched && !!meta.error,
-          className: cn(
-            "w-full",
-            inputClassName
-          ),
+          className: cn("w-full", inputClassName),
           "aria-label": emailPlaceholder || "Email address"
         }
       ) }),
@@ -1364,7 +1298,16 @@ function LinkPageNewsletterSocial({
         }
       )
     ] });
-  }, [formSlot, resolvedSubmitAction, emailPlaceholder, inputClassName, submitButtonClassName, form.isSubmitting, submittingIcon, submittingLabel]);
+  }, [
+    formSlot,
+    resolvedSubmitAction,
+    emailPlaceholder,
+    inputClassName,
+    submitButtonClassName,
+    form.isSubmitting,
+    submittingIcon,
+    submittingLabel
+  ]);
   const renderNewsletter = React.useMemo(() => {
     if (newsletterSlot) return newsletterSlot;
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1387,17 +1330,7 @@ function LinkPageNewsletterSocial({
                 children: newsletterHeading
               }
             ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: newsletterHeadingClassName, children: newsletterHeading })),
-            newsletterDescription && (typeof newsletterDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-              "p",
-              {
-                className: cn(
-                  "text-sm",
-                  getTextColor(resolvedBackground, "muted"),
-                  newsletterDescriptionClassName
-                ),
-                children: newsletterDescription
-              }
-            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: newsletterDescriptionClassName, children: newsletterDescription }))
+            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,
@@ -1412,7 +1345,20 @@ function LinkPageNewsletterSocial({
         ]
       }
     );
-  }, [newsletterSlot, newsletterCardClassName, newsletterHeading, newsletterHeadingClassName, newsletterDescription, resolvedBackground, newsletterDescriptionClassName, form, formConfig?.endpoint, formMethod, formClassName, renderFormFields]);
+  }, [
+    newsletterSlot,
+    newsletterCardClassName,
+    newsletterHeading,
+    newsletterHeadingClassName,
+    newsletterDescription,
+    resolvedBackground,
+    newsletterDescriptionClassName,
+    form,
+    formConfig?.endpoint,
+    formMethod,
+    formClassName,
+    renderFormFields
+  ]);
   const renderLinks = React.useMemo(() => {
     if (linksSlot) return linksSlot;
     if (!links || links.length === 0) return null;
@@ -1454,7 +1400,7 @@ function LinkPageNewsletterSocial({
         Pressable,
         {
           className: cn(
-            "flex w-full items-center gap-3 rounded-xl px-4 py-3 transition-all duration-200",
+            "flex w-full bg-card text-card-foreground items-center gap-3 rounded-xl px-4 py-3 transition-all duration-200",
             "hover:scale-[1.02] active:scale-[0.98]",
             "border border-border bg-card hover:opacity-80",
             linkClassName,
@@ -1473,22 +1419,23 @@ function LinkPageNewsletterSocial({
                 children: label
               }
             ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex-1", linkLabelClassName), children: label })),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "span",
-              {
-                className: cn(
-                  getTextColor(resolvedBackground, "muted"),
-                  linkChevronClassName
-                ),
-                children: resolvedChevronIcon
-              }
-            )
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(linkChevronClassName), children: resolvedChevronIcon })
           ]
         },
         link.id ?? index
       );
     }) });
-  }, [linksSlot, links, linksClassName, linkIconClassName, resolvedBackground, linkClassName, linkLabelClassName, linkChevronClassName, resolvedChevronIcon]);
+  }, [
+    linksSlot,
+    links,
+    linksClassName,
+    linkIconClassName,
+    resolvedBackground,
+    linkClassName,
+    linkLabelClassName,
+    linkChevronClassName,
+    resolvedChevronIcon
+  ]);
   const renderFooter = React.useMemo(() => {
     if (footerSlot) return footerSlot;
     if (!footerAction) return null;
@@ -1507,7 +1454,6 @@ function LinkPageNewsletterSocial({
       {
         className: cn(
           "flex items-center justify-center gap-1.5 text-xs transition-opacity hover:opacity-80",
-          getTextColor(resolvedBackground, "muted"),
           "opacity-50",
           footerClassName,
           actionClassName
@@ -1530,22 +1476,14 @@ function LinkPageNewsletterSocial({
       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-md space-y-8", contentClassName), children: [
-            renderProfile,
-            renderSocialLinks,
-            renderNewsletter,
-            renderLinks,
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-4", children: renderFooter })
-          ] })
-        }
-      )
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-screen w-full items-start justify-center py-12", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full space-y-8", contentClassName), children: [
+        renderProfile,
+        renderSocialLinks,
+        renderNewsletter,
+        renderLinks,
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-4", children: renderFooter })
+      ] }) })
     }
   );
 }

package/dist/link-page-newsletter-social.d.cts

@@ -313,6 +313,6 @@ interface LinkPageNewsletterSocialProps {
  * />
  * ```
  */
-declare function LinkPageNewsletterSocial({ name, bio, avatar, avatarUrl, profileSlot, newsletterHeading, newsletterDescription, emailPlaceholder, buttonText, submitAction, newsletterSlot, formSlot, submittingLabel, submittingIcon, links, linksSlot, linkChevronIcon, socialLinks, socialLinksSlot, footerAction, footerSlot, className, containerClassName, contentClassName, headerClassName, avatarClassName, nameClassName, bioClassName, socialLinksClassName, socialLinkClassName, socialIconClassName, newsletterCardClassName, newsletterHeadingClassName, newsletterDescriptionClassName, formClassName, inputClassName, submitButtonClassName, linksClassName, linkClassName, linkIconClassName, linkLabelClassName, linkChevronClassName, footerClassName, background, spacing, pattern, patternOpacity, patternClassName, formConfig, onSubmit, onSuccess, onError, optixFlowConfig, }: LinkPageNewsletterSocialProps): React.JSX.Element;
+declare function LinkPageNewsletterSocial({ name, bio, avatar, avatarUrl, profileSlot, newsletterHeading, newsletterDescription, emailPlaceholder, buttonText, submitAction, newsletterSlot, formSlot, submittingLabel, submittingIcon, links, linksSlot, linkChevronIcon, socialLinks, socialLinksSlot, footerAction, footerSlot, className, contentClassName, headerClassName, avatarClassName, nameClassName, bioClassName, socialLinksClassName, socialLinkClassName, socialIconClassName, newsletterCardClassName, newsletterHeadingClassName, newsletterDescriptionClassName, formClassName, inputClassName, submitButtonClassName, linksClassName, linkClassName, linkIconClassName, linkLabelClassName, linkChevronClassName, footerClassName, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, formConfig, onSubmit, onSuccess, onError, optixFlowConfig, }: LinkPageNewsletterSocialProps): React.JSX.Element;
 
 export { LinkPageNewsletterSocial, type LinkPageNewsletterSocialProps, type NewsletterSocialLink, type NewsletterSocialSocialLink };

package/dist/link-page-newsletter-social.d.ts

@@ -313,6 +313,6 @@ interface LinkPageNewsletterSocialProps {
  * />
  * ```
  */
-declare function LinkPageNewsletterSocial({ name, bio, avatar, avatarUrl, profileSlot, newsletterHeading, newsletterDescription, emailPlaceholder, buttonText, submitAction, newsletterSlot, formSlot, submittingLabel, submittingIcon, links, linksSlot, linkChevronIcon, socialLinks, socialLinksSlot, footerAction, footerSlot, className, containerClassName, contentClassName, headerClassName, avatarClassName, nameClassName, bioClassName, socialLinksClassName, socialLinkClassName, socialIconClassName, newsletterCardClassName, newsletterHeadingClassName, newsletterDescriptionClassName, formClassName, inputClassName, submitButtonClassName, linksClassName, linkClassName, linkIconClassName, linkLabelClassName, linkChevronClassName, footerClassName, background, spacing, pattern, patternOpacity, patternClassName, formConfig, onSubmit, onSuccess, onError, optixFlowConfig, }: LinkPageNewsletterSocialProps): React.JSX.Element;
+declare function LinkPageNewsletterSocial({ name, bio, avatar, avatarUrl, profileSlot, newsletterHeading, newsletterDescription, emailPlaceholder, buttonText, submitAction, newsletterSlot, formSlot, submittingLabel, submittingIcon, links, linksSlot, linkChevronIcon, socialLinks, socialLinksSlot, footerAction, footerSlot, className, contentClassName, headerClassName, avatarClassName, nameClassName, bioClassName, socialLinksClassName, socialLinkClassName, socialIconClassName, newsletterCardClassName, newsletterHeadingClassName, newsletterDescriptionClassName, formClassName, inputClassName, submitButtonClassName, linksClassName, linkClassName, linkIconClassName, linkLabelClassName, linkChevronClassName, footerClassName, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, formConfig, onSubmit, onSuccess, onError, optixFlowConfig, }: LinkPageNewsletterSocialProps): React.JSX.Element;
 
 export { LinkPageNewsletterSocial, type LinkPageNewsletterSocialProps, type NewsletterSocialLink, type NewsletterSocialSocialLink };

package/dist/link-page-newsletter-social.js

@@ -15,62 +15,6 @@ var TextInput = TextInput$1;
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-function getNestedCardBg(parentBg, variant = "muted", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "muted":
-        return "bg-background";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-background/50";
-    }
-  } else {
-    switch (variant) {
-      case "muted":
-        return "bg-muted";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-muted/50";
-    }
-  }
-}
-function getNestedCardTextColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-foreground" : "";
-}
-function getTextColor(parentBg, variant = "default", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-foreground/80";
-      case "subtle":
-        return "text-foreground/60";
-      case "accent":
-        return "text-accent-foreground";
-    }
-  } else {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-muted-foreground";
-      case "subtle":
-        return "text-muted-foreground/70";
-      case "accent":
-        return "text-primary";
-    }
-  }
-}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -594,10 +538,6 @@ function processSvgForCurrentColor(svg) {
   );
   return processed;
 }
-
-// lib/blockBrandedIconsAndPlaceholders.ts
-var blockBrandedIconsAndPlaceholders = {
-  avatar3: "https://cdn.ing/assets/i/r/286241/05vbqt3lls0q974r8fv4zn0njllq/avatar-3.webp"};
 var PageSpeedFormSubmissionError = class extends Error {
   constructor(message, options = {}) {
     super(message);
@@ -1096,7 +1036,7 @@ function LinkPageNewsletterSocial({
   name,
   bio,
   avatar,
-  avatarUrl = blockBrandedIconsAndPlaceholders.avatar3,
+  avatarUrl,
   profileSlot,
   newsletterHeading,
   newsletterDescription,
@@ -1115,7 +1055,6 @@ function LinkPageNewsletterSocial({
   footerAction,
   footerSlot,
   className,
-  containerClassName,
   contentClassName,
   headerClassName,
   avatarClassName,
@@ -1136,8 +1075,9 @@ function LinkPageNewsletterSocial({
   linkLabelClassName,
   linkChevronClassName,
   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,
@@ -1227,32 +1167,24 @@ function LinkPageNewsletterSocial({
             }
           ),
           /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-            name && (typeof name === "string" ? /* @__PURE__ */ jsx(
-              "h1",
-              {
-                className: cn(
-                  "text-2xl font-bold",
-                  nameClassName
-                ),
-                children: name
-              }
-            ) : /* @__PURE__ */ jsx("div", { className: nameClassName, children: name })),
-            bio && (typeof bio === "string" ? /* @__PURE__ */ jsx(
-              "p",
-              {
-                className: cn(
-                  "max-w-xs text-sm",
-                  getTextColor(resolvedBackground, "muted"),
-                  bioClassName
-                ),
-                children: bio
-              }
-            ) : /* @__PURE__ */ jsx("div", { className: bioClassName, children: bio }))
+            name && (typeof name === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-2xl font-bold", nameClassName), children: name }) : /* @__PURE__ */ jsx("div", { className: nameClassName, children: name })),
+            bio && (typeof bio === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-xs text-sm text-balance", bioClassName), children: bio }) : /* @__PURE__ */ jsx("div", { className: bioClassName, children: bio }))
           ] })
         ]
       }
     );
-  }, [profileSlot, resolvedAvatar, avatarClassName, optixFlowConfig, name, resolvedBackground, nameClassName, bio, bioClassName, headerClassName]);
+  }, [
+    profileSlot,
+    resolvedAvatar,
+    avatarClassName,
+    optixFlowConfig,
+    name,
+    resolvedBackground,
+    nameClassName,
+    bio,
+    bioClassName,
+    headerClassName
+  ]);
   const renderSocialLinks = useMemo(() => {
     if (socialLinksSlot) return socialLinksSlot;
     if (!socialLinks || socialLinks.length === 0) return null;
@@ -1279,12 +1211,10 @@ function LinkPageNewsletterSocial({
             {
               ...socialPressableProps,
               "aria-label": ariaLabel,
+              asButton: true,
+              size: "icon-lg",
               className: cn(
                 "rounded-full p-2.5 transition-all duration-200",
-                "hover:scale-110 active:scale-95",
-                getNestedCardBg(resolvedBackground),
-                getNestedCardTextColor(resolvedBackground),
-                "hover:opacity-80",
                 socialLinkClassName,
                 social.className
               ),
@@ -1295,7 +1225,14 @@ function LinkPageNewsletterSocial({
         })
       }
     );
-  }, [socialLinksSlot, socialLinks, socialLinksClassName, socialIconClassName, resolvedBackground, socialLinkClassName]);
+  }, [
+    socialLinksSlot,
+    socialLinks,
+    socialLinksClassName,
+    socialIconClassName,
+    resolvedBackground,
+    socialLinkClassName
+  ]);
   const renderFormFields = useMemo(() => {
     if (formSlot) return formSlot;
     const {
@@ -1314,10 +1251,7 @@ function LinkPageNewsletterSocial({
           type: "email",
           placeholder: emailPlaceholder,
           error: meta.touched && !!meta.error,
-          className: cn(
-            "w-full",
-            inputClassName
-          ),
+          className: cn("w-full", inputClassName),
           "aria-label": emailPlaceholder || "Email address"
         }
       ) }),
@@ -1343,7 +1277,16 @@ function LinkPageNewsletterSocial({
         }
       )
     ] });
-  }, [formSlot, resolvedSubmitAction, emailPlaceholder, inputClassName, submitButtonClassName, form.isSubmitting, submittingIcon, submittingLabel]);
+  }, [
+    formSlot,
+    resolvedSubmitAction,
+    emailPlaceholder,
+    inputClassName,
+    submitButtonClassName,
+    form.isSubmitting,
+    submittingIcon,
+    submittingLabel
+  ]);
   const renderNewsletter = useMemo(() => {
     if (newsletterSlot) return newsletterSlot;
     return /* @__PURE__ */ jsxs(
@@ -1366,17 +1309,7 @@ function LinkPageNewsletterSocial({
                 children: newsletterHeading
               }
             ) : /* @__PURE__ */ jsx("div", { className: newsletterHeadingClassName, children: newsletterHeading })),
-            newsletterDescription && (typeof newsletterDescription === "string" ? /* @__PURE__ */ jsx(
-              "p",
-              {
-                className: cn(
-                  "text-sm",
-                  getTextColor(resolvedBackground, "muted"),
-                  newsletterDescriptionClassName
-                ),
-                children: newsletterDescription
-              }
-            ) : /* @__PURE__ */ jsx("div", { className: newsletterDescriptionClassName, children: newsletterDescription }))
+            newsletterDescription && (typeof newsletterDescription === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm", newsletterDescriptionClassName), children: newsletterDescription }) : /* @__PURE__ */ jsx("div", { className: newsletterDescriptionClassName, children: newsletterDescription }))
           ] }),
           /* @__PURE__ */ jsx(
             Form,
@@ -1391,7 +1324,20 @@ function LinkPageNewsletterSocial({
         ]
       }
     );
-  }, [newsletterSlot, newsletterCardClassName, newsletterHeading, newsletterHeadingClassName, newsletterDescription, resolvedBackground, newsletterDescriptionClassName, form, formConfig?.endpoint, formMethod, formClassName, renderFormFields]);
+  }, [
+    newsletterSlot,
+    newsletterCardClassName,
+    newsletterHeading,
+    newsletterHeadingClassName,
+    newsletterDescription,
+    resolvedBackground,
+    newsletterDescriptionClassName,
+    form,
+    formConfig?.endpoint,
+    formMethod,
+    formClassName,
+    renderFormFields
+  ]);
   const renderLinks = useMemo(() => {
     if (linksSlot) return linksSlot;
     if (!links || links.length === 0) return null;
@@ -1433,7 +1379,7 @@ function LinkPageNewsletterSocial({
         Pressable,
         {
           className: cn(
-            "flex w-full items-center gap-3 rounded-xl px-4 py-3 transition-all duration-200",
+            "flex w-full bg-card text-card-foreground items-center gap-3 rounded-xl px-4 py-3 transition-all duration-200",
             "hover:scale-[1.02] active:scale-[0.98]",
             "border border-border bg-card hover:opacity-80",
             linkClassName,
@@ -1452,22 +1398,23 @@ function LinkPageNewsletterSocial({
                 children: label
               }
             ) : /* @__PURE__ */ jsx("div", { className: cn("flex-1", linkLabelClassName), children: label })),
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: cn(
-                  getTextColor(resolvedBackground, "muted"),
-                  linkChevronClassName
-                ),
-                children: resolvedChevronIcon
-              }
-            )
+            /* @__PURE__ */ jsx("span", { className: cn(linkChevronClassName), children: resolvedChevronIcon })
           ]
         },
         link.id ?? index
       );
     }) });
-  }, [linksSlot, links, linksClassName, linkIconClassName, resolvedBackground, linkClassName, linkLabelClassName, linkChevronClassName, resolvedChevronIcon]);
+  }, [
+    linksSlot,
+    links,
+    linksClassName,
+    linkIconClassName,
+    resolvedBackground,
+    linkClassName,
+    linkLabelClassName,
+    linkChevronClassName,
+    resolvedChevronIcon
+  ]);
   const renderFooter = useMemo(() => {
     if (footerSlot) return footerSlot;
     if (!footerAction) return null;
@@ -1486,7 +1433,6 @@ function LinkPageNewsletterSocial({
       {
         className: cn(
           "flex items-center justify-center gap-1.5 text-xs transition-opacity hover:opacity-80",
-          getTextColor(resolvedBackground, "muted"),
           "opacity-50",
           footerClassName,
           actionClassName
@@ -1509,22 +1455,14 @@ function LinkPageNewsletterSocial({
       pattern,
       patternOpacity,
       patternClassName,
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cn(
-            "flex min-h-screen w-full items-start justify-center py-12",
-            containerClassName
-          ),
-          children: /* @__PURE__ */ jsxs("div", { className: cn("w-full max-w-md space-y-8", contentClassName), children: [
-            renderProfile,
-            renderSocialLinks,
-            renderNewsletter,
-            renderLinks,
-            /* @__PURE__ */ jsx("div", { className: "pt-4", children: renderFooter })
-          ] })
-        }
-      )
+      containerClassName,
+      children: /* @__PURE__ */ jsx("div", { className: "flex min-h-screen w-full items-start justify-center py-12", children: /* @__PURE__ */ jsxs("div", { className: cn("w-full space-y-8", contentClassName), children: [
+        renderProfile,
+        renderSocialLinks,
+        renderNewsletter,
+        renderLinks,
+        /* @__PURE__ */ jsx("div", { className: "pt-4", children: renderFooter })
+      ] }) })
     }
   );
 }