@opensite/ui 0.8.9 → 0.9.1

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

@@ -66,6 +66,32 @@ 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:")) {
@@ -1131,8 +1157,7 @@ function LinkPageNewsletterSocial({
   linkLabelClassName,
   linkChevronClassName,
   footerClassName,
-  theme = "light",
-  background,
+  background = "white",
   spacing,
   pattern,
   patternOpacity,
@@ -1143,8 +1168,7 @@ function LinkPageNewsletterSocial({
   onError,
   optixFlowConfig
 }) {
-  const isDark = theme === "dark";
-  const resolvedBackground = background ?? (isDark ? "dark" : "white");
+  const resolvedBackground = background;
   const resolvedAvatar = avatar || (avatarUrl ? {
     src: avatarUrl,
     alt: typeof name === "string" ? name : "Profile avatar"
@@ -1238,7 +1262,8 @@ function LinkPageNewsletterSocial({
               "p",
               {
                 className: cn(
-                  "max-w-xs text-sm text-muted-foreground",
+                  "max-w-xs text-sm",
+                  getTextColor(resolvedBackground, "muted"),
                   bioClassName
                 ),
                 children: bio
@@ -1248,7 +1273,7 @@ function LinkPageNewsletterSocial({
         ]
       }
     );
-  }, [profileSlot, resolvedAvatar, avatarClassName, optixFlowConfig, name, isDark, 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;
@@ -1260,10 +1285,11 @@ function LinkPageNewsletterSocial({
           socialLinksClassName
         ),
         children: socialLinks.map((social, index) => {
-          const icon = social.icon || (social.iconName ? /* @__PURE__ */ jsxRuntime.jsx(
+          const { iconName, ...socialPressableProps } = social;
+          const icon = social.icon || (iconName ? /* @__PURE__ */ jsxRuntime.jsx(
             DynamicIcon,
             {
-              name: social.iconName,
+              name: iconName,
               size: 20,
               className: socialIconClassName
             }
@@ -1272,14 +1298,14 @@ function LinkPageNewsletterSocial({
           return /* @__PURE__ */ jsxRuntime.jsx(
             Pressable,
             {
-              href: social.href,
+              ...socialPressableProps,
               "aria-label": ariaLabel,
               className: cn(
                 "rounded-full p-2.5 transition-all duration-200",
                 "hover:scale-110 active:scale-95",
                 getNestedCardBg(resolvedBackground),
                 getNestedCardTextColor(resolvedBackground),
-                isDark ? "hover:bg-muted/20" : "hover:bg-muted/80",
+                "hover:opacity-80",
                 socialLinkClassName,
                 social.className
               ),
@@ -1290,7 +1316,7 @@ function LinkPageNewsletterSocial({
         })
       }
     );
-  }, [socialLinksSlot, socialLinks, socialLinksClassName, socialIconClassName, isDark, socialLinkClassName]);
+  }, [socialLinksSlot, socialLinks, socialLinksClassName, socialIconClassName, resolvedBackground, socialLinkClassName]);
   const renderFormFields = React.useMemo(() => {
     if (formSlot) return formSlot;
     const {
@@ -1311,7 +1337,6 @@ function LinkPageNewsletterSocial({
           error: meta.touched && !!meta.error,
           className: cn(
             "w-full",
-            isDark && "border-border/20 bg-muted/10 placeholder:text-muted-foreground/50",
             inputClassName
           ),
           "aria-label": emailPlaceholder || "Email address"
@@ -1339,7 +1364,7 @@ function LinkPageNewsletterSocial({
         }
       )
     ] });
-  }, [formSlot, resolvedSubmitAction, emailPlaceholder, isDark, 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(
@@ -1347,7 +1372,7 @@ function LinkPageNewsletterSocial({
       {
         className: cn(
           "space-y-4 rounded-2xl p-6",
-          isDark ? "border border-border/10 bg-muted/5" : "border border-border bg-card shadow-sm",
+          "border border-border bg-card shadow-sm",
           newsletterCardClassName
         ),
         children: [
@@ -1366,7 +1391,8 @@ function LinkPageNewsletterSocial({
               "p",
               {
                 className: cn(
-                  "text-sm text-muted-foreground",
+                  "text-sm",
+                  getTextColor(resolvedBackground, "muted"),
                   newsletterDescriptionClassName
                 ),
                 children: newsletterDescription
@@ -1386,7 +1412,7 @@ function LinkPageNewsletterSocial({
         ]
       }
     );
-  }, [newsletterSlot, isDark, newsletterCardClassName, newsletterHeading, newsletterHeadingClassName, newsletterDescription, 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;
@@ -1396,12 +1422,13 @@ function LinkPageNewsletterSocial({
         icon,
         children,
         className: linkItemClassName,
+        iconName,
         ...pressableProps
       } = link;
-      const iconElement = icon || (link.iconName ? /* @__PURE__ */ jsxRuntime.jsx(
+      const iconElement = icon || (iconName ? /* @__PURE__ */ jsxRuntime.jsx(
         DynamicIcon,
         {
-          name: link.iconName,
+          name: iconName,
           size: 18,
           className: linkIconClassName
         }
@@ -1413,7 +1440,7 @@ function LinkPageNewsletterSocial({
             className: cn(
               "flex w-full items-center gap-3 rounded-xl px-4 py-3 transition-all duration-200",
               "hover:scale-[1.02] active:scale-[0.98]",
-              isDark ? "border border-border/10 bg-muted/5 hover:bg-muted/10" : "border border-border bg-card hover:bg-muted/50",
+              "border border-border bg-card hover:opacity-80",
               linkClassName,
               linkItemClassName
             ),
@@ -1429,7 +1456,7 @@ function LinkPageNewsletterSocial({
           className: cn(
             "flex w-full items-center gap-3 rounded-xl px-4 py-3 transition-all duration-200",
             "hover:scale-[1.02] active:scale-[0.98]",
-            isDark ? "border border-border/10 bg-muted/5 hover:bg-muted/10" : "border border-border bg-card hover:bg-muted/50",
+            "border border-border bg-card hover:opacity-80",
             linkClassName,
             linkItemClassName
           ),
@@ -1450,7 +1477,7 @@ function LinkPageNewsletterSocial({
               "span",
               {
                 className: cn(
-                  "text-muted-foreground",
+                  getTextColor(resolvedBackground, "muted"),
                   linkChevronClassName
                 ),
                 children: resolvedChevronIcon
@@ -1461,7 +1488,7 @@ function LinkPageNewsletterSocial({
         link.id ?? index
       );
     }) });
-  }, [linksSlot, links, linksClassName, linkIconClassName, isDark, 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;
@@ -1480,7 +1507,8 @@ function LinkPageNewsletterSocial({
       {
         className: cn(
           "flex items-center justify-center gap-1.5 text-xs transition-opacity hover:opacity-80",
-          "text-muted-foreground/50",
+          getTextColor(resolvedBackground, "muted"),
+          "opacity-50",
           footerClassName,
           actionClassName
         ),
@@ -1492,16 +1520,13 @@ function LinkPageNewsletterSocial({
         ] })
       }
     );
-  }, [footerSlot, footerAction, isDark, footerClassName]);
+  }, [footerSlot, footerAction, resolvedBackground, footerClassName]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
       background: resolvedBackground,
       spacing,
-      className: cn(
-        isDark ? "bg-foreground" : "bg-gradient-to-b from-background to-muted/30",
-        className
-      ),
+      className,
       pattern,
       patternOpacity,
       patternClassName,

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

@@ -197,10 +197,6 @@ interface LinkPageNewsletterSocialProps {
      * Additional CSS classes for the footer
      */
     footerClassName?: string;
-    /**
-     * Theme variation: "light" or "dark"
-     */
-    theme?: "light" | "dark";
     /**
      * Background style for the section
      */
@@ -317,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, theme, 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, 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;
 
 export { LinkPageNewsletterSocial, type LinkPageNewsletterSocialProps, type NewsletterSocialLink, type NewsletterSocialSocialLink };

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

@@ -197,10 +197,6 @@ interface LinkPageNewsletterSocialProps {
      * Additional CSS classes for the footer
      */
     footerClassName?: string;
-    /**
-     * Theme variation: "light" or "dark"
-     */
-    theme?: "light" | "dark";
     /**
      * Background style for the section
      */
@@ -317,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, theme, 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, 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;
 
 export { LinkPageNewsletterSocial, type LinkPageNewsletterSocialProps, type NewsletterSocialLink, type NewsletterSocialSocialLink };

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

@@ -45,6 +45,32 @@ 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:")) {
@@ -1110,8 +1136,7 @@ function LinkPageNewsletterSocial({
   linkLabelClassName,
   linkChevronClassName,
   footerClassName,
-  theme = "light",
-  background,
+  background = "white",
   spacing,
   pattern,
   patternOpacity,
@@ -1122,8 +1147,7 @@ function LinkPageNewsletterSocial({
   onError,
   optixFlowConfig
 }) {
-  const isDark = theme === "dark";
-  const resolvedBackground = background ?? (isDark ? "dark" : "white");
+  const resolvedBackground = background;
   const resolvedAvatar = avatar || (avatarUrl ? {
     src: avatarUrl,
     alt: typeof name === "string" ? name : "Profile avatar"
@@ -1217,7 +1241,8 @@ function LinkPageNewsletterSocial({
               "p",
               {
                 className: cn(
-                  "max-w-xs text-sm text-muted-foreground",
+                  "max-w-xs text-sm",
+                  getTextColor(resolvedBackground, "muted"),
                   bioClassName
                 ),
                 children: bio
@@ -1227,7 +1252,7 @@ function LinkPageNewsletterSocial({
         ]
       }
     );
-  }, [profileSlot, resolvedAvatar, avatarClassName, optixFlowConfig, name, isDark, 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;
@@ -1239,10 +1264,11 @@ function LinkPageNewsletterSocial({
           socialLinksClassName
         ),
         children: socialLinks.map((social, index) => {
-          const icon = social.icon || (social.iconName ? /* @__PURE__ */ jsx(
+          const { iconName, ...socialPressableProps } = social;
+          const icon = social.icon || (iconName ? /* @__PURE__ */ jsx(
             DynamicIcon,
             {
-              name: social.iconName,
+              name: iconName,
               size: 20,
               className: socialIconClassName
             }
@@ -1251,14 +1277,14 @@ function LinkPageNewsletterSocial({
           return /* @__PURE__ */ jsx(
             Pressable,
             {
-              href: social.href,
+              ...socialPressableProps,
               "aria-label": ariaLabel,
               className: cn(
                 "rounded-full p-2.5 transition-all duration-200",
                 "hover:scale-110 active:scale-95",
                 getNestedCardBg(resolvedBackground),
                 getNestedCardTextColor(resolvedBackground),
-                isDark ? "hover:bg-muted/20" : "hover:bg-muted/80",
+                "hover:opacity-80",
                 socialLinkClassName,
                 social.className
               ),
@@ -1269,7 +1295,7 @@ function LinkPageNewsletterSocial({
         })
       }
     );
-  }, [socialLinksSlot, socialLinks, socialLinksClassName, socialIconClassName, isDark, socialLinkClassName]);
+  }, [socialLinksSlot, socialLinks, socialLinksClassName, socialIconClassName, resolvedBackground, socialLinkClassName]);
   const renderFormFields = useMemo(() => {
     if (formSlot) return formSlot;
     const {
@@ -1290,7 +1316,6 @@ function LinkPageNewsletterSocial({
           error: meta.touched && !!meta.error,
           className: cn(
             "w-full",
-            isDark && "border-border/20 bg-muted/10 placeholder:text-muted-foreground/50",
             inputClassName
           ),
           "aria-label": emailPlaceholder || "Email address"
@@ -1318,7 +1343,7 @@ function LinkPageNewsletterSocial({
         }
       )
     ] });
-  }, [formSlot, resolvedSubmitAction, emailPlaceholder, isDark, 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(
@@ -1326,7 +1351,7 @@ function LinkPageNewsletterSocial({
       {
         className: cn(
           "space-y-4 rounded-2xl p-6",
-          isDark ? "border border-border/10 bg-muted/5" : "border border-border bg-card shadow-sm",
+          "border border-border bg-card shadow-sm",
           newsletterCardClassName
         ),
         children: [
@@ -1345,7 +1370,8 @@ function LinkPageNewsletterSocial({
               "p",
               {
                 className: cn(
-                  "text-sm text-muted-foreground",
+                  "text-sm",
+                  getTextColor(resolvedBackground, "muted"),
                   newsletterDescriptionClassName
                 ),
                 children: newsletterDescription
@@ -1365,7 +1391,7 @@ function LinkPageNewsletterSocial({
         ]
       }
     );
-  }, [newsletterSlot, isDark, newsletterCardClassName, newsletterHeading, newsletterHeadingClassName, newsletterDescription, 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;
@@ -1375,12 +1401,13 @@ function LinkPageNewsletterSocial({
         icon,
         children,
         className: linkItemClassName,
+        iconName,
         ...pressableProps
       } = link;
-      const iconElement = icon || (link.iconName ? /* @__PURE__ */ jsx(
+      const iconElement = icon || (iconName ? /* @__PURE__ */ jsx(
         DynamicIcon,
         {
-          name: link.iconName,
+          name: iconName,
           size: 18,
           className: linkIconClassName
         }
@@ -1392,7 +1419,7 @@ function LinkPageNewsletterSocial({
             className: cn(
               "flex w-full items-center gap-3 rounded-xl px-4 py-3 transition-all duration-200",
               "hover:scale-[1.02] active:scale-[0.98]",
-              isDark ? "border border-border/10 bg-muted/5 hover:bg-muted/10" : "border border-border bg-card hover:bg-muted/50",
+              "border border-border bg-card hover:opacity-80",
               linkClassName,
               linkItemClassName
             ),
@@ -1408,7 +1435,7 @@ function LinkPageNewsletterSocial({
           className: cn(
             "flex w-full items-center gap-3 rounded-xl px-4 py-3 transition-all duration-200",
             "hover:scale-[1.02] active:scale-[0.98]",
-            isDark ? "border border-border/10 bg-muted/5 hover:bg-muted/10" : "border border-border bg-card hover:bg-muted/50",
+            "border border-border bg-card hover:opacity-80",
             linkClassName,
             linkItemClassName
           ),
@@ -1429,7 +1456,7 @@ function LinkPageNewsletterSocial({
               "span",
               {
                 className: cn(
-                  "text-muted-foreground",
+                  getTextColor(resolvedBackground, "muted"),
                   linkChevronClassName
                 ),
                 children: resolvedChevronIcon
@@ -1440,7 +1467,7 @@ function LinkPageNewsletterSocial({
         link.id ?? index
       );
     }) });
-  }, [linksSlot, links, linksClassName, linkIconClassName, isDark, linkClassName, linkLabelClassName, linkChevronClassName, resolvedChevronIcon]);
+  }, [linksSlot, links, linksClassName, linkIconClassName, resolvedBackground, linkClassName, linkLabelClassName, linkChevronClassName, resolvedChevronIcon]);
   const renderFooter = useMemo(() => {
     if (footerSlot) return footerSlot;
     if (!footerAction) return null;
@@ -1459,7 +1486,8 @@ function LinkPageNewsletterSocial({
       {
         className: cn(
           "flex items-center justify-center gap-1.5 text-xs transition-opacity hover:opacity-80",
-          "text-muted-foreground/50",
+          getTextColor(resolvedBackground, "muted"),
+          "opacity-50",
           footerClassName,
           actionClassName
         ),
@@ -1471,16 +1499,13 @@ function LinkPageNewsletterSocial({
         ] })
       }
     );
-  }, [footerSlot, footerAction, isDark, footerClassName]);
+  }, [footerSlot, footerAction, resolvedBackground, footerClassName]);
   return /* @__PURE__ */ jsx(
     Section,
     {
       background: resolvedBackground,
       spacing,
-      className: cn(
-        isDark ? "bg-foreground" : "bg-gradient-to-b from-background to-muted/30",
-        className
-      ),
+      className,
       pattern,
       patternOpacity,
       patternClassName,