@opensite/ui 0.8.9 → 0.9.0

package/dist/link-page-bento-layout.cjs

@@ -62,6 +62,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:")) {
@@ -1002,16 +1028,14 @@ function LinkPageBentoLayout({
   regularLinkIconClassName,
   regularLinkLabelClassName,
   footerClassName,
-  theme = "light",
-  background,
+  background = "white",
   spacing,
   pattern,
   patternOpacity,
   patternClassName,
   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"
@@ -1022,10 +1046,11 @@ function LinkPageBentoLayout({
     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 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: 18,
           className: socialIconClassName
         }
@@ -1034,12 +1059,13 @@ function LinkPageBentoLayout({
       return /* @__PURE__ */ jsxRuntime.jsx(
         Pressable,
         {
-          href: social.href,
+          ...socialPressableProps,
           "aria-label": ariaLabel,
           className: cn(
             "rounded-full p-2 transition-all duration-200",
             "hover:scale-110 active:scale-95",
-            isDark ? "text-muted-foreground hover:bg-muted/10" : "text-muted-foreground hover:bg-muted",
+            getTextColor(resolvedBackground, "muted"),
+            "hover:opacity-80",
             socialLinkClassName,
             social.className
           ),
@@ -1048,7 +1074,7 @@ function LinkPageBentoLayout({
         social.id ?? index
       );
     }) });
-  }, [socialLinksSlot, socialLinks, socialLinksClassName, socialIconClassName, isDark, socialLinkClassName]);
+  }, [socialLinksSlot, socialLinks, socialLinksClassName, socialIconClassName, resolvedBackground, socialLinkClassName]);
   const renderFeaturedLinks = React.useMemo(() => {
     if (featuredLinksSlot) return featuredLinksSlot;
     if (!featuredLinks || featuredLinks.length === 0) return null;
@@ -1061,14 +1087,15 @@ function LinkPageBentoLayout({
         className: linkClassName,
         featured: _featured,
         // Destructure to prevent passing to DOM
+        iconName,
         ...pressableProps
       } = link;
       const imageSource = link.image?.src ?? link.imageUrl;
       const imageAlt = link.image?.alt || (typeof label === "string" ? label : "");
-      const iconElement = icon || (link.iconName ? /* @__PURE__ */ jsxRuntime.jsx(
+      const iconElement = icon || (iconName ? /* @__PURE__ */ jsxRuntime.jsx(
         DynamicIcon,
         {
-          name: link.iconName,
+          name: iconName,
           size: 18,
           className: featuredLinkIconClassName
         }
@@ -1080,7 +1107,7 @@ function LinkPageBentoLayout({
             className: cn(
               "group relative aspect-4/3 overflow-hidden rounded-2xl transition-all duration-200",
               "hover:scale-[1.02] active:scale-[0.98]",
-              isDark ? "border border-border/10 bg-muted/5" : "border border-border bg-muted",
+              "border border-border bg-muted",
               featuredLinkClassName,
               linkClassName
             ),
@@ -1096,7 +1123,7 @@ function LinkPageBentoLayout({
           className: cn(
             "group relative aspect-4/3 overflow-hidden rounded-2xl transition-all duration-200",
             "hover:scale-[1.02] active:scale-[0.98]",
-            isDark ? "border border-border/10 bg-muted/5" : "border border-border bg-muted",
+            "border border-border bg-muted",
             featuredLinkClassName,
             linkClassName
           ),
@@ -1119,7 +1146,7 @@ function LinkPageBentoLayout({
               {
                 className: cn(
                   "absolute inset-0 transition-opacity",
-                  imageSource ? "bg-linear-to-t from-black/80 via-black/40 to-transparent" : isDark ? "bg-linear-to-t from-white/10 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" : "bg-linear-to-t from-neutral-200/50 to-transparent",
                   featuredLinkOverlayClassName
                 )
               }
@@ -1144,7 +1171,7 @@ function LinkPageBentoLayout({
                 {
                   className: cn(
                     "mt-0.5 text-xs",
-                    imageSource ? "text-background/70" : "text-muted-foreground",
+                    imageSource ? "text-background/70" : getTextColor(resolvedBackground, "muted"),
                     featuredLinkDescriptionClassName
                   ),
                   children: description
@@ -1156,7 +1183,7 @@ function LinkPageBentoLayout({
         link.id ?? index
       );
     });
-  }, [featuredLinksSlot, featuredLinks, isDark, featuredLinkClassName, featuredLinkImageClassName, optixFlowConfig, featuredLinkOverlayClassName, featuredLinkIconClassName, featuredLinkLabelClassName, featuredLinkDescriptionClassName]);
+  }, [featuredLinksSlot, featuredLinks, resolvedBackground, featuredLinkClassName, featuredLinkImageClassName, optixFlowConfig, featuredLinkOverlayClassName, featuredLinkIconClassName, featuredLinkLabelClassName, featuredLinkDescriptionClassName]);
   const renderRegularLinks = React.useMemo(() => {
     if (regularLinksSlot) return regularLinksSlot;
     if (!regularLinks || regularLinks.length === 0) return null;
@@ -1166,12 +1193,13 @@ function LinkPageBentoLayout({
         icon,
         children,
         className: linkClassName,
+        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: 20,
           className: regularLinkIconClassName
         }
@@ -1183,7 +1211,7 @@ function LinkPageBentoLayout({
             className: cn(
               "group flex items-center gap-3 rounded-xl p-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-muted/50 hover:bg-muted",
+              "border border-border bg-muted/50 hover:opacity-80",
               regularLinkClassName,
               linkClassName
             ),
@@ -1199,7 +1227,7 @@ function LinkPageBentoLayout({
           className: cn(
             "group flex items-center gap-3 rounded-xl p-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-muted/50 hover:bg-muted",
+            "border border-border bg-muted/50 hover:opacity-80",
             regularLinkClassName,
             linkClassName
           ),
@@ -1232,7 +1260,7 @@ function LinkPageBentoLayout({
         link.id ?? index
       );
     });
-  }, [regularLinksSlot, regularLinks, isDark, regularLinkClassName, regularLinkIconWrapperClassName, regularLinkIconClassName, regularLinkLabelClassName]);
+  }, [regularLinksSlot, regularLinks, resolvedBackground, regularLinkClassName, regularLinkIconWrapperClassName, regularLinkIconClassName, regularLinkLabelClassName]);
   const renderLinks = React.useMemo(() => {
     if (linksSlot) return linksSlot;
     if (!links || links.length === 0) return null;
@@ -1257,8 +1285,7 @@ function LinkPageBentoLayout({
             "div",
             {
               className: cn(
-                "h-20 w-20 overflow-hidden rounded-full",
-                isDark ? "ring-2 ring-white/20" : "ring-2 ring-neutral-200",
+                "h-20 w-20 overflow-hidden rounded-full ring-2 ring-neutral-200",
                 avatarClassName
               ),
               children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1287,7 +1314,8 @@ function LinkPageBentoLayout({
               "p",
               {
                 className: cn(
-                  "max-w-xs text-sm text-muted-foreground",
+                  "max-w-xs text-sm",
+                  getTextColor(resolvedBackground, "muted"),
                   bioClassName
                 ),
                 children: bio
@@ -1298,7 +1326,7 @@ function LinkPageBentoLayout({
         ]
       }
     );
-  }, [profileSlot, resolvedAvatar, isDark, avatarClassName, optixFlowConfig, name, nameClassName, bio, bioClassName, renderSocialLinks, headerClassName]);
+  }, [profileSlot, resolvedAvatar, resolvedBackground, avatarClassName, optixFlowConfig, name, nameClassName, bio, bioClassName, renderSocialLinks, headerClassName]);
   const renderFooter = React.useMemo(() => {
     if (footerSlot) return footerSlot;
     if (!footerAction) return null;
@@ -1317,7 +1345,8 @@ function LinkPageBentoLayout({
       {
         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
         ),
@@ -1329,13 +1358,13 @@ function LinkPageBentoLayout({
         ] })
       }
     );
-  }, [footerSlot, footerAction, isDark, footerClassName]);
+  }, [footerSlot, footerAction, resolvedBackground, footerClassName]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
       background: resolvedBackground,
       spacing,
-      className: cn(isDark ? "bg-foreground" : "bg-background", className),
+      className,
       pattern,
       patternOpacity,
       patternClassName,

package/dist/link-page-bento-layout.d.cts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
-import { I as ImageItem, A as ActionConfig, a as SocialLinkItem, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CPyEa7IX.cjs';
+import { I as ImageItem, A as ActionConfig, a as SocialLinkItem, O as OptixFlowConfig } from './blocks-tmd_MRJv.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-8mtEHxev.cjs';
 import 'class-variance-authority/types';
 
 /**
@@ -176,10 +176,6 @@ interface LinkPageBentoLayoutProps {
      * Additional CSS classes for the footer
      */
     footerClassName?: string;
-    /**
-     * Theme variation: "light" or "dark"
-     */
-    theme?: "light" | "dark";
     /**
      * Background style for the section
      */
@@ -238,6 +234,6 @@ interface LinkPageBentoLayoutProps {
  * />
  * ```
  */
-declare function LinkPageBentoLayout({ name, bio, avatar, avatarUrl, profileSlot, links, linksSlot, featuredLinksSlot, regularLinksSlot, socialLinks, socialLinksSlot, footerAction, footerSlot, className, containerClassName, contentClassName, headerClassName, avatarClassName, nameClassName, bioClassName, socialLinksClassName, socialLinkClassName, socialIconClassName, linksClassName, featuredLinksClassName, featuredLinkClassName, featuredLinkOverlayClassName, featuredLinkImageClassName, featuredLinkIconClassName, featuredLinkLabelClassName, featuredLinkDescriptionClassName, regularLinksClassName, regularLinkClassName, regularLinkIconWrapperClassName, regularLinkIconClassName, regularLinkLabelClassName, footerClassName, theme, background, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: LinkPageBentoLayoutProps): React.JSX.Element;
+declare function LinkPageBentoLayout({ name, bio, avatar, avatarUrl, profileSlot, links, linksSlot, featuredLinksSlot, regularLinksSlot, socialLinks, socialLinksSlot, footerAction, footerSlot, className, containerClassName, contentClassName, headerClassName, avatarClassName, nameClassName, bioClassName, socialLinksClassName, socialLinkClassName, socialIconClassName, linksClassName, featuredLinksClassName, featuredLinkClassName, featuredLinkOverlayClassName, featuredLinkImageClassName, featuredLinkIconClassName, featuredLinkLabelClassName, featuredLinkDescriptionClassName, regularLinksClassName, regularLinkClassName, regularLinkIconWrapperClassName, regularLinkIconClassName, regularLinkLabelClassName, footerClassName, background, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: LinkPageBentoLayoutProps): React.JSX.Element;
 
 export { type BentoLink, type BentoSocialLink, LinkPageBentoLayout, type LinkPageBentoLayoutProps };

package/dist/link-page-bento-layout.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
-import { I as ImageItem, A as ActionConfig, a as SocialLinkItem, O as OptixFlowConfig } from './blocks-k17uluAz.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-hxnFe3w6.js';
+import { I as ImageItem, A as ActionConfig, a as SocialLinkItem, O as OptixFlowConfig } from './blocks-DRE-f6cS.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-8mtEHxev.js';
 import 'class-variance-authority/types';
 
 /**
@@ -176,10 +176,6 @@ interface LinkPageBentoLayoutProps {
      * Additional CSS classes for the footer
      */
     footerClassName?: string;
-    /**
-     * Theme variation: "light" or "dark"
-     */
-    theme?: "light" | "dark";
     /**
      * Background style for the section
      */
@@ -238,6 +234,6 @@ interface LinkPageBentoLayoutProps {
  * />
  * ```
  */
-declare function LinkPageBentoLayout({ name, bio, avatar, avatarUrl, profileSlot, links, linksSlot, featuredLinksSlot, regularLinksSlot, socialLinks, socialLinksSlot, footerAction, footerSlot, className, containerClassName, contentClassName, headerClassName, avatarClassName, nameClassName, bioClassName, socialLinksClassName, socialLinkClassName, socialIconClassName, linksClassName, featuredLinksClassName, featuredLinkClassName, featuredLinkOverlayClassName, featuredLinkImageClassName, featuredLinkIconClassName, featuredLinkLabelClassName, featuredLinkDescriptionClassName, regularLinksClassName, regularLinkClassName, regularLinkIconWrapperClassName, regularLinkIconClassName, regularLinkLabelClassName, footerClassName, theme, background, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: LinkPageBentoLayoutProps): React.JSX.Element;
+declare function LinkPageBentoLayout({ name, bio, avatar, avatarUrl, profileSlot, links, linksSlot, featuredLinksSlot, regularLinksSlot, socialLinks, socialLinksSlot, footerAction, footerSlot, className, containerClassName, contentClassName, headerClassName, avatarClassName, nameClassName, bioClassName, socialLinksClassName, socialLinkClassName, socialIconClassName, linksClassName, featuredLinksClassName, featuredLinkClassName, featuredLinkOverlayClassName, featuredLinkImageClassName, featuredLinkIconClassName, featuredLinkLabelClassName, featuredLinkDescriptionClassName, regularLinksClassName, regularLinkClassName, regularLinkIconWrapperClassName, regularLinkIconClassName, regularLinkLabelClassName, footerClassName, background, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: LinkPageBentoLayoutProps): React.JSX.Element;
 
 export { type BentoLink, type BentoSocialLink, LinkPageBentoLayout, type LinkPageBentoLayoutProps };

package/dist/link-page-bento-layout.js

@@ -41,6 +41,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:")) {
@@ -981,16 +1007,14 @@ function LinkPageBentoLayout({
   regularLinkIconClassName,
   regularLinkLabelClassName,
   footerClassName,
-  theme = "light",
-  background,
+  background = "white",
   spacing,
   pattern,
   patternOpacity,
   patternClassName,
   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"
@@ -1001,10 +1025,11 @@ function LinkPageBentoLayout({
     if (socialLinksSlot) return socialLinksSlot;
     if (!socialLinks || socialLinks.length === 0) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-2 pt-1", socialLinksClassName), children: socialLinks.map((social, index) => {
-      const 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: 18,
           className: socialIconClassName
         }
@@ -1013,12 +1038,13 @@ function LinkPageBentoLayout({
       return /* @__PURE__ */ jsx(
         Pressable,
         {
-          href: social.href,
+          ...socialPressableProps,
           "aria-label": ariaLabel,
           className: cn(
             "rounded-full p-2 transition-all duration-200",
             "hover:scale-110 active:scale-95",
-            isDark ? "text-muted-foreground hover:bg-muted/10" : "text-muted-foreground hover:bg-muted",
+            getTextColor(resolvedBackground, "muted"),
+            "hover:opacity-80",
             socialLinkClassName,
             social.className
           ),
@@ -1027,7 +1053,7 @@ function LinkPageBentoLayout({
         social.id ?? index
       );
     }) });
-  }, [socialLinksSlot, socialLinks, socialLinksClassName, socialIconClassName, isDark, socialLinkClassName]);
+  }, [socialLinksSlot, socialLinks, socialLinksClassName, socialIconClassName, resolvedBackground, socialLinkClassName]);
   const renderFeaturedLinks = useMemo(() => {
     if (featuredLinksSlot) return featuredLinksSlot;
     if (!featuredLinks || featuredLinks.length === 0) return null;
@@ -1040,14 +1066,15 @@ function LinkPageBentoLayout({
         className: linkClassName,
         featured: _featured,
         // Destructure to prevent passing to DOM
+        iconName,
         ...pressableProps
       } = link;
       const imageSource = link.image?.src ?? link.imageUrl;
       const imageAlt = link.image?.alt || (typeof label === "string" ? label : "");
-      const iconElement = icon || (link.iconName ? /* @__PURE__ */ jsx(
+      const iconElement = icon || (iconName ? /* @__PURE__ */ jsx(
         DynamicIcon,
         {
-          name: link.iconName,
+          name: iconName,
           size: 18,
           className: featuredLinkIconClassName
         }
@@ -1059,7 +1086,7 @@ function LinkPageBentoLayout({
             className: cn(
               "group relative aspect-4/3 overflow-hidden rounded-2xl transition-all duration-200",
               "hover:scale-[1.02] active:scale-[0.98]",
-              isDark ? "border border-border/10 bg-muted/5" : "border border-border bg-muted",
+              "border border-border bg-muted",
               featuredLinkClassName,
               linkClassName
             ),
@@ -1075,7 +1102,7 @@ function LinkPageBentoLayout({
           className: cn(
             "group relative aspect-4/3 overflow-hidden rounded-2xl transition-all duration-200",
             "hover:scale-[1.02] active:scale-[0.98]",
-            isDark ? "border border-border/10 bg-muted/5" : "border border-border bg-muted",
+            "border border-border bg-muted",
             featuredLinkClassName,
             linkClassName
           ),
@@ -1098,7 +1125,7 @@ function LinkPageBentoLayout({
               {
                 className: cn(
                   "absolute inset-0 transition-opacity",
-                  imageSource ? "bg-linear-to-t from-black/80 via-black/40 to-transparent" : isDark ? "bg-linear-to-t from-white/10 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" : "bg-linear-to-t from-neutral-200/50 to-transparent",
                   featuredLinkOverlayClassName
                 )
               }
@@ -1123,7 +1150,7 @@ function LinkPageBentoLayout({
                 {
                   className: cn(
                     "mt-0.5 text-xs",
-                    imageSource ? "text-background/70" : "text-muted-foreground",
+                    imageSource ? "text-background/70" : getTextColor(resolvedBackground, "muted"),
                     featuredLinkDescriptionClassName
                   ),
                   children: description
@@ -1135,7 +1162,7 @@ function LinkPageBentoLayout({
         link.id ?? index
       );
     });
-  }, [featuredLinksSlot, featuredLinks, isDark, featuredLinkClassName, featuredLinkImageClassName, optixFlowConfig, featuredLinkOverlayClassName, featuredLinkIconClassName, featuredLinkLabelClassName, featuredLinkDescriptionClassName]);
+  }, [featuredLinksSlot, featuredLinks, resolvedBackground, featuredLinkClassName, featuredLinkImageClassName, optixFlowConfig, featuredLinkOverlayClassName, featuredLinkIconClassName, featuredLinkLabelClassName, featuredLinkDescriptionClassName]);
   const renderRegularLinks = useMemo(() => {
     if (regularLinksSlot) return regularLinksSlot;
     if (!regularLinks || regularLinks.length === 0) return null;
@@ -1145,12 +1172,13 @@ function LinkPageBentoLayout({
         icon,
         children,
         className: linkClassName,
+        iconName,
         ...pressableProps
       } = link;
-      const iconElement = icon || (link.iconName ? /* @__PURE__ */ jsx(
+      const iconElement = icon || (iconName ? /* @__PURE__ */ jsx(
         DynamicIcon,
         {
-          name: link.iconName,
+          name: iconName,
           size: 20,
           className: regularLinkIconClassName
         }
@@ -1162,7 +1190,7 @@ function LinkPageBentoLayout({
             className: cn(
               "group flex items-center gap-3 rounded-xl p-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-muted/50 hover:bg-muted",
+              "border border-border bg-muted/50 hover:opacity-80",
               regularLinkClassName,
               linkClassName
             ),
@@ -1178,7 +1206,7 @@ function LinkPageBentoLayout({
           className: cn(
             "group flex items-center gap-3 rounded-xl p-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-muted/50 hover:bg-muted",
+            "border border-border bg-muted/50 hover:opacity-80",
             regularLinkClassName,
             linkClassName
           ),
@@ -1211,7 +1239,7 @@ function LinkPageBentoLayout({
         link.id ?? index
       );
     });
-  }, [regularLinksSlot, regularLinks, isDark, regularLinkClassName, regularLinkIconWrapperClassName, regularLinkIconClassName, regularLinkLabelClassName]);
+  }, [regularLinksSlot, regularLinks, resolvedBackground, regularLinkClassName, regularLinkIconWrapperClassName, regularLinkIconClassName, regularLinkLabelClassName]);
   const renderLinks = useMemo(() => {
     if (linksSlot) return linksSlot;
     if (!links || links.length === 0) return null;
@@ -1236,8 +1264,7 @@ function LinkPageBentoLayout({
             "div",
             {
               className: cn(
-                "h-20 w-20 overflow-hidden rounded-full",
-                isDark ? "ring-2 ring-white/20" : "ring-2 ring-neutral-200",
+                "h-20 w-20 overflow-hidden rounded-full ring-2 ring-neutral-200",
                 avatarClassName
               ),
               children: /* @__PURE__ */ jsx(
@@ -1266,7 +1293,8 @@ function LinkPageBentoLayout({
               "p",
               {
                 className: cn(
-                  "max-w-xs text-sm text-muted-foreground",
+                  "max-w-xs text-sm",
+                  getTextColor(resolvedBackground, "muted"),
                   bioClassName
                 ),
                 children: bio
@@ -1277,7 +1305,7 @@ function LinkPageBentoLayout({
         ]
       }
     );
-  }, [profileSlot, resolvedAvatar, isDark, avatarClassName, optixFlowConfig, name, nameClassName, bio, bioClassName, renderSocialLinks, headerClassName]);
+  }, [profileSlot, resolvedAvatar, resolvedBackground, avatarClassName, optixFlowConfig, name, nameClassName, bio, bioClassName, renderSocialLinks, headerClassName]);
   const renderFooter = useMemo(() => {
     if (footerSlot) return footerSlot;
     if (!footerAction) return null;
@@ -1296,7 +1324,8 @@ function LinkPageBentoLayout({
       {
         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
         ),
@@ -1308,13 +1337,13 @@ function LinkPageBentoLayout({
         ] })
       }
     );
-  }, [footerSlot, footerAction, isDark, footerClassName]);
+  }, [footerSlot, footerAction, resolvedBackground, footerClassName]);
   return /* @__PURE__ */ jsx(
     Section,
     {
       background: resolvedBackground,
       spacing,
-      className: cn(isDark ? "bg-foreground" : "bg-background", className),
+      className,
       pattern,
       patternOpacity,
       patternClassName,