@opensite/ui 0.8.9 → 0.9.0

package/dist/link-page-grid-cards.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:")) {
@@ -994,16 +1020,14 @@ function LinkPageGridCards({
   cardLabelClassName,
   cardDescriptionClassName,
   footerClassName,
-  theme = "light",
-  background,
+  background = "gray",
   spacing,
   pattern,
   patternOpacity,
   patternClassName,
   optixFlowConfig
 }) {
-  const isDark = theme === "dark";
-  const resolvedBackground = background ?? (isDark ? "dark" : "gray");
+  const resolvedBackground = background;
   const resolvedAvatar = avatar || (avatarUrl ? {
     src: avatarUrl,
     alt: typeof name === "string" ? name : "Profile avatar"
@@ -1022,8 +1046,7 @@ function LinkPageGridCards({
             "div",
             {
               className: cn(
-                "h-20 w-20 overflow-hidden rounded-2xl shadow-lg",
-                isDark ? "ring-2 ring-white/10" : "ring-2 ring-neutral-200",
+                "h-20 w-20 overflow-hidden rounded-2xl shadow-lg ring-2 ring-neutral-200",
                 avatarClassName
               ),
               children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1052,7 +1075,8 @@ function LinkPageGridCards({
               "p",
               {
                 className: cn(
-                  "text-sm text-muted-foreground",
+                  "text-sm",
+                  getTextColor(resolvedBackground, "muted"),
                   bioClassName
                 ),
                 children: bio
@@ -1062,7 +1086,7 @@ function LinkPageGridCards({
         ]
       }
     );
-  }, [profileSlot, resolvedAvatar, isDark, avatarClassName, optixFlowConfig, name, nameClassName, bio, bioClassName, headerClassName]);
+  }, [profileSlot, resolvedAvatar, resolvedBackground, avatarClassName, optixFlowConfig, name, nameClassName, bio, bioClassName, headerClassName]);
   const renderSocialLinks = React.useMemo(() => {
     if (socialLinksSlot) return socialLinksSlot;
     if (!socialLinks || socialLinks.length === 0) return null;
@@ -1074,10 +1098,11 @@ function LinkPageGridCards({
           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
             }
@@ -1086,12 +1111,13 @@ function LinkPageGridCards({
           return /* @__PURE__ */ jsxRuntime.jsx(
             Pressable,
             {
-              href: social.href,
+              ...socialPressableProps,
               "aria-label": ariaLabel,
               className: cn(
                 "rounded-lg p-2 transition-all duration-200",
                 "hover:scale-110 active:scale-95",
-                isDark ? "bg-muted/5 text-muted-foreground hover:bg-muted/10" : "bg-card text-muted-foreground hover:bg-muted",
+                "bg-card hover:opacity-80",
+                getTextColor(resolvedBackground, "muted"),
                 socialLinkClassName,
                 social.className
               ),
@@ -1102,7 +1128,7 @@ function LinkPageGridCards({
         })
       }
     );
-  }, [socialLinksSlot, socialLinks, socialLinksClassName, socialIconClassName, isDark, socialLinkClassName]);
+  }, [socialLinksSlot, socialLinks, socialLinksClassName, socialIconClassName, resolvedBackground, socialLinkClassName]);
   const renderLinks = React.useMemo(() => {
     if (linksSlot) return linksSlot;
     if (!links || links.length === 0) return null;
@@ -1121,12 +1147,13 @@ function LinkPageGridCards({
             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: 24,
               className: cardIconClassName
             }
@@ -1138,7 +1165,7 @@ function LinkPageGridCards({
                 className: cn(
                   "group flex flex-col items-center gap-2 rounded-xl p-4 transition-all duration-200",
                   "hover:scale-[1.03] active:scale-[0.97]",
-                  isDark ? "border border-border/10 bg-muted/5 hover:bg-muted/10" : "border border-border bg-card shadow-sm hover:shadow-md",
+                  "border border-border bg-card shadow-sm hover:shadow-md",
                   cardClassName,
                   linkClassName
                 ),
@@ -1154,7 +1181,7 @@ function LinkPageGridCards({
               className: cn(
                 "group flex flex-col items-center gap-2 rounded-xl p-4 transition-all duration-200",
                 "hover:scale-[1.03] active:scale-[0.97]",
-                isDark ? "border border-border/10 bg-muted/5 hover:bg-muted/10" : "border border-border bg-card shadow-sm hover:shadow-md",
+                "border border-border bg-card shadow-sm hover:shadow-md",
                 cardClassName,
                 linkClassName
               ),
@@ -1167,7 +1194,7 @@ function LinkPageGridCards({
                       "flex h-12 w-12 items-center justify-center rounded-xl transition-colors",
                       getNestedCardBg(resolvedBackground),
                       getNestedCardTextColor(resolvedBackground),
-                      isDark ? "group-hover:bg-muted/20" : "group-hover:bg-muted/80",
+                      "group-hover:opacity-80",
                       cardIconWrapperClassName
                     ),
                     children: iconElement
@@ -1188,7 +1215,8 @@ function LinkPageGridCards({
                     "span",
                     {
                       className: cn(
-                        "block text-xs text-muted-foreground",
+                        "block text-xs",
+                        getTextColor(resolvedBackground, "muted"),
                         cardDescriptionClassName
                       ),
                       children: description
@@ -1202,7 +1230,7 @@ function LinkPageGridCards({
         })
       }
     );
-  }, [linksSlot, links, columns, gridClassName, cardIconClassName, isDark, cardClassName, cardIconWrapperClassName, cardLabelClassName, cardDescriptionClassName]);
+  }, [linksSlot, links, columns, gridClassName, cardIconClassName, resolvedBackground, cardClassName, cardIconWrapperClassName, cardLabelClassName, cardDescriptionClassName]);
   const renderFooter = React.useMemo(() => {
     if (footerSlot) return footerSlot;
     if (!footerAction) return null;
@@ -1221,7 +1249,8 @@ function LinkPageGridCards({
       {
         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
         ),
@@ -1233,13 +1262,13 @@ function LinkPageGridCards({
         ] })
       }
     );
-  }, [footerSlot, footerAction, isDark, footerClassName]);
+  }, [footerSlot, footerAction, resolvedBackground, footerClassName]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
       background: resolvedBackground,
       spacing,
-      className: cn(isDark ? "bg-foreground" : "bg-muted/30", className),
+      className,
       pattern,
       patternOpacity,
       patternClassName,

package/dist/link-page-grid-cards.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';
 
 /**
@@ -141,10 +141,6 @@ interface LinkPageGridCardsProps {
      * Additional CSS classes for the footer
      */
     footerClassName?: string;
-    /**
-     * Theme variation: "light" or "dark"
-     */
-    theme?: "light" | "dark";
     /**
      * Background style for the section
      */
@@ -196,6 +192,6 @@ interface LinkPageGridCardsProps {
  * />
  * ```
  */
-declare function LinkPageGridCards({ name, bio, avatar, avatarUrl, profileSlot, links, linksSlot, socialLinks, socialLinksSlot, columns, footerAction, footerSlot, className, containerClassName, contentClassName, headerClassName, avatarClassName, nameClassName, bioClassName, socialLinksClassName, socialLinkClassName, socialIconClassName, gridClassName, cardClassName, cardIconWrapperClassName, cardIconClassName, cardLabelClassName, cardDescriptionClassName, footerClassName, theme, background, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: LinkPageGridCardsProps): React.JSX.Element;
+declare function LinkPageGridCards({ name, bio, avatar, avatarUrl, profileSlot, links, linksSlot, socialLinks, socialLinksSlot, columns, footerAction, footerSlot, className, containerClassName, contentClassName, headerClassName, avatarClassName, nameClassName, bioClassName, socialLinksClassName, socialLinkClassName, socialIconClassName, gridClassName, cardClassName, cardIconWrapperClassName, cardIconClassName, cardLabelClassName, cardDescriptionClassName, footerClassName, background, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: LinkPageGridCardsProps): React.JSX.Element;
 
 export { type GridCardLink, type GridCardSocialLink, LinkPageGridCards, type LinkPageGridCardsProps };

package/dist/link-page-grid-cards.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';
 
 /**
@@ -141,10 +141,6 @@ interface LinkPageGridCardsProps {
      * Additional CSS classes for the footer
      */
     footerClassName?: string;
-    /**
-     * Theme variation: "light" or "dark"
-     */
-    theme?: "light" | "dark";
     /**
      * Background style for the section
      */
@@ -196,6 +192,6 @@ interface LinkPageGridCardsProps {
  * />
  * ```
  */
-declare function LinkPageGridCards({ name, bio, avatar, avatarUrl, profileSlot, links, linksSlot, socialLinks, socialLinksSlot, columns, footerAction, footerSlot, className, containerClassName, contentClassName, headerClassName, avatarClassName, nameClassName, bioClassName, socialLinksClassName, socialLinkClassName, socialIconClassName, gridClassName, cardClassName, cardIconWrapperClassName, cardIconClassName, cardLabelClassName, cardDescriptionClassName, footerClassName, theme, background, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: LinkPageGridCardsProps): React.JSX.Element;
+declare function LinkPageGridCards({ name, bio, avatar, avatarUrl, profileSlot, links, linksSlot, socialLinks, socialLinksSlot, columns, footerAction, footerSlot, className, containerClassName, contentClassName, headerClassName, avatarClassName, nameClassName, bioClassName, socialLinksClassName, socialLinkClassName, socialIconClassName, gridClassName, cardClassName, cardIconWrapperClassName, cardIconClassName, cardLabelClassName, cardDescriptionClassName, footerClassName, background, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: LinkPageGridCardsProps): React.JSX.Element;
 
 export { type GridCardLink, type GridCardSocialLink, LinkPageGridCards, type LinkPageGridCardsProps };

package/dist/link-page-grid-cards.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:")) {
@@ -973,16 +999,14 @@ function LinkPageGridCards({
   cardLabelClassName,
   cardDescriptionClassName,
   footerClassName,
-  theme = "light",
-  background,
+  background = "gray",
   spacing,
   pattern,
   patternOpacity,
   patternClassName,
   optixFlowConfig
 }) {
-  const isDark = theme === "dark";
-  const resolvedBackground = background ?? (isDark ? "dark" : "gray");
+  const resolvedBackground = background;
   const resolvedAvatar = avatar || (avatarUrl ? {
     src: avatarUrl,
     alt: typeof name === "string" ? name : "Profile avatar"
@@ -1001,8 +1025,7 @@ function LinkPageGridCards({
             "div",
             {
               className: cn(
-                "h-20 w-20 overflow-hidden rounded-2xl shadow-lg",
-                isDark ? "ring-2 ring-white/10" : "ring-2 ring-neutral-200",
+                "h-20 w-20 overflow-hidden rounded-2xl shadow-lg ring-2 ring-neutral-200",
                 avatarClassName
               ),
               children: /* @__PURE__ */ jsx(
@@ -1031,7 +1054,8 @@ function LinkPageGridCards({
               "p",
               {
                 className: cn(
-                  "text-sm text-muted-foreground",
+                  "text-sm",
+                  getTextColor(resolvedBackground, "muted"),
                   bioClassName
                 ),
                 children: bio
@@ -1041,7 +1065,7 @@ function LinkPageGridCards({
         ]
       }
     );
-  }, [profileSlot, resolvedAvatar, isDark, avatarClassName, optixFlowConfig, name, nameClassName, bio, bioClassName, headerClassName]);
+  }, [profileSlot, resolvedAvatar, resolvedBackground, avatarClassName, optixFlowConfig, name, nameClassName, bio, bioClassName, headerClassName]);
   const renderSocialLinks = useMemo(() => {
     if (socialLinksSlot) return socialLinksSlot;
     if (!socialLinks || socialLinks.length === 0) return null;
@@ -1053,10 +1077,11 @@ function LinkPageGridCards({
           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
             }
@@ -1065,12 +1090,13 @@ function LinkPageGridCards({
           return /* @__PURE__ */ jsx(
             Pressable,
             {
-              href: social.href,
+              ...socialPressableProps,
               "aria-label": ariaLabel,
               className: cn(
                 "rounded-lg p-2 transition-all duration-200",
                 "hover:scale-110 active:scale-95",
-                isDark ? "bg-muted/5 text-muted-foreground hover:bg-muted/10" : "bg-card text-muted-foreground hover:bg-muted",
+                "bg-card hover:opacity-80",
+                getTextColor(resolvedBackground, "muted"),
                 socialLinkClassName,
                 social.className
               ),
@@ -1081,7 +1107,7 @@ function LinkPageGridCards({
         })
       }
     );
-  }, [socialLinksSlot, socialLinks, socialLinksClassName, socialIconClassName, isDark, socialLinkClassName]);
+  }, [socialLinksSlot, socialLinks, socialLinksClassName, socialIconClassName, resolvedBackground, socialLinkClassName]);
   const renderLinks = useMemo(() => {
     if (linksSlot) return linksSlot;
     if (!links || links.length === 0) return null;
@@ -1100,12 +1126,13 @@ function LinkPageGridCards({
             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: 24,
               className: cardIconClassName
             }
@@ -1117,7 +1144,7 @@ function LinkPageGridCards({
                 className: cn(
                   "group flex flex-col items-center gap-2 rounded-xl p-4 transition-all duration-200",
                   "hover:scale-[1.03] active:scale-[0.97]",
-                  isDark ? "border border-border/10 bg-muted/5 hover:bg-muted/10" : "border border-border bg-card shadow-sm hover:shadow-md",
+                  "border border-border bg-card shadow-sm hover:shadow-md",
                   cardClassName,
                   linkClassName
                 ),
@@ -1133,7 +1160,7 @@ function LinkPageGridCards({
               className: cn(
                 "group flex flex-col items-center gap-2 rounded-xl p-4 transition-all duration-200",
                 "hover:scale-[1.03] active:scale-[0.97]",
-                isDark ? "border border-border/10 bg-muted/5 hover:bg-muted/10" : "border border-border bg-card shadow-sm hover:shadow-md",
+                "border border-border bg-card shadow-sm hover:shadow-md",
                 cardClassName,
                 linkClassName
               ),
@@ -1146,7 +1173,7 @@ function LinkPageGridCards({
                       "flex h-12 w-12 items-center justify-center rounded-xl transition-colors",
                       getNestedCardBg(resolvedBackground),
                       getNestedCardTextColor(resolvedBackground),
-                      isDark ? "group-hover:bg-muted/20" : "group-hover:bg-muted/80",
+                      "group-hover:opacity-80",
                       cardIconWrapperClassName
                     ),
                     children: iconElement
@@ -1167,7 +1194,8 @@ function LinkPageGridCards({
                     "span",
                     {
                       className: cn(
-                        "block text-xs text-muted-foreground",
+                        "block text-xs",
+                        getTextColor(resolvedBackground, "muted"),
                         cardDescriptionClassName
                       ),
                       children: description
@@ -1181,7 +1209,7 @@ function LinkPageGridCards({
         })
       }
     );
-  }, [linksSlot, links, columns, gridClassName, cardIconClassName, isDark, cardClassName, cardIconWrapperClassName, cardLabelClassName, cardDescriptionClassName]);
+  }, [linksSlot, links, columns, gridClassName, cardIconClassName, resolvedBackground, cardClassName, cardIconWrapperClassName, cardLabelClassName, cardDescriptionClassName]);
   const renderFooter = useMemo(() => {
     if (footerSlot) return footerSlot;
     if (!footerAction) return null;
@@ -1200,7 +1228,8 @@ function LinkPageGridCards({
       {
         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
         ),
@@ -1212,13 +1241,13 @@ function LinkPageGridCards({
         ] })
       }
     );
-  }, [footerSlot, footerAction, isDark, footerClassName]);
+  }, [footerSlot, footerAction, resolvedBackground, footerClassName]);
   return /* @__PURE__ */ jsx(
     Section,
     {
       background: resolvedBackground,
       spacing,
-      className: cn(isDark ? "bg-foreground" : "bg-muted/30", className),
+      className,
       pattern,
       patternOpacity,
       patternClassName,

package/dist/link-page-minimal-profile.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:")) {
@@ -991,16 +1017,14 @@ function LinkPageMinimalProfile({
   socialLinkClassName,
   socialIconClassName,
   footerClassName,
-  theme = "light",
-  background,
+  background = "default",
   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"
@@ -1049,7 +1073,8 @@ function LinkPageMinimalProfile({
               "p",
               {
                 className: cn(
-                  "text-sm text-muted-foreground",
+                  "text-sm",
+                  getTextColor(resolvedBackground, "muted"),
                   bioClassName
                 ),
                 children: bio
@@ -1059,7 +1084,7 @@ function LinkPageMinimalProfile({
         ]
       }
     );
-  }, [profileSlot, resolvedAvatar, avatarClassName, optixFlowConfig, name, isDark, nameClassName, bio, bioClassName, headerClassName]);
+  }, [profileSlot, resolvedAvatar, avatarClassName, optixFlowConfig, name, resolvedBackground, nameClassName, bio, bioClassName, headerClassName]);
   const renderLinks = React.useMemo(() => {
     if (linksSlot) return linksSlot;
     if (!links || links.length === 0) return null;
@@ -1069,12 +1094,13 @@ function LinkPageMinimalProfile({
         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
         }
@@ -1087,7 +1113,7 @@ function LinkPageMinimalProfile({
               "flex w-full items-center gap-3 rounded-lg px-4 py-3 transition-colors",
               getNestedCardBg(resolvedBackground),
               getNestedCardTextColor(resolvedBackground),
-              isDark ? "hover:bg-muted/30" : "hover:bg-muted/80",
+              "hover:opacity-80",
               linkClassName,
               linkItemClassName
             ),
@@ -1104,7 +1130,7 @@ function LinkPageMinimalProfile({
             "flex w-full items-center gap-3 rounded-lg px-4 py-3 transition-colors",
             getNestedCardBg(resolvedBackground),
             getNestedCardTextColor(resolvedBackground),
-            isDark ? "hover:bg-muted/30" : "hover:bg-muted/80",
+            "hover:opacity-80",
             linkClassName,
             linkItemClassName
           ),
@@ -1123,7 +1149,7 @@ function LinkPageMinimalProfile({
         link.id ?? index
       );
     }) });
-  }, [linksSlot, links, linksClassName, linkIconClassName, isDark, linkClassName, linkLabelClassName]);
+  }, [linksSlot, links, linksClassName, linkIconClassName, resolvedBackground, linkClassName, linkLabelClassName]);
   const renderSocialLinks = React.useMemo(() => {
     if (socialLinksSlot) return socialLinksSlot;
     if (!socialLinks || socialLinks.length === 0) return null;
@@ -1135,10 +1161,11 @@ function LinkPageMinimalProfile({
           socialLinksClassName
         ),
         children: socialLinks.map((social, index) => {
-          const icon = social.icon || (social.iconName ? /* @__PURE__ */ jsxRuntime.jsx(
+          const { iconName: socialIconName, ...socialRest } = social;
+          const icon = social.icon || (socialIconName ? /* @__PURE__ */ jsxRuntime.jsx(
             DynamicIcon,
             {
-              name: social.iconName,
+              name: socialIconName,
               size: 20,
               className: socialIconClassName
             }
@@ -1151,7 +1178,8 @@ function LinkPageMinimalProfile({
               "aria-label": ariaLabel,
               className: cn(
                 "rounded-full p-2 transition-colors",
-                isDark ? "text-muted-foreground hover:bg-muted/20" : "text-muted-foreground hover:bg-muted",
+                getTextColor(resolvedBackground, "muted"),
+                "hover:opacity-80",
                 socialLinkClassName,
                 social.className
               ),
@@ -1162,7 +1190,7 @@ function LinkPageMinimalProfile({
         })
       }
     );
-  }, [socialLinksSlot, socialLinks, socialLinksClassName, socialIconClassName, isDark, socialLinkClassName]);
+  }, [socialLinksSlot, socialLinks, socialLinksClassName, socialIconClassName, resolvedBackground, socialLinkClassName]);
   const renderFooter = React.useMemo(() => {
     if (footerSlot) return footerSlot;
     if (!footerAction) return null;
@@ -1181,7 +1209,7 @@ function LinkPageMinimalProfile({
       {
         className: cn(
           "flex items-center justify-center gap-1.5 text-xs transition-opacity hover:opacity-80",
-          "text-muted-foreground/50",
+          getTextColor(resolvedBackground, "subtle"),
           footerClassName,
           actionClassName
         ),
@@ -1193,13 +1221,13 @@ function LinkPageMinimalProfile({
         ] })
       }
     );
-  }, [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,