@opensite/ui 2.2.9 → 2.3.1

package/dist/link-page-grid-cards.cjs

@@ -33,62 +33,6 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 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:")) {
@@ -511,10 +455,6 @@ var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
 function DynamicIcon({ apiKey, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
 }
-
-// lib/blockBrandedIconsAndPlaceholders.ts
-var blockBrandedIconsAndPlaceholders = {
-  avatar4: "https://cdn.ing/assets/i/r/286242/y0zkazxawxrl3twwkw63twf04pdt/avatar-4.webp"};
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -894,7 +834,7 @@ function LinkPageGridCards({
   name,
   bio,
   avatar,
-  avatarUrl = blockBrandedIconsAndPlaceholders.avatar4,
+  avatarUrl,
   profileSlot,
   links,
   linksSlot,
@@ -904,7 +844,6 @@ function LinkPageGridCards({
   footerAction,
   footerSlot,
   className,
-  containerClassName,
   contentClassName,
   headerClassName,
   avatarClassName,
@@ -920,20 +859,20 @@ function LinkPageGridCards({
   cardLabelClassName,
   cardDescriptionClassName,
   footerClassName,
-  background = "gray",
-  spacing,
+  background,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-12 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
   optixFlowConfig
 }) {
-  const resolvedBackground = background;
-  const resolvedAvatar = avatar || (avatarUrl ? {
-    src: avatarUrl,
-    alt: typeof name === "string" ? name : "Profile avatar"
-  } : void 0);
   const renderProfile = React.useMemo(() => {
     if (profileSlot) return profileSlot;
+    const resolvedAvatar = avatar || (avatarUrl ? {
+      src: avatarUrl,
+      alt: typeof name === "string" ? name : "Profile avatar"
+    } : void 0);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -946,7 +885,7 @@ function LinkPageGridCards({
             "div",
             {
               className: cn(
-                "h-20 w-20 overflow-hidden rounded-2xl shadow-lg ring-2 ring-neutral-200",
+                "h-20 w-20 overflow-hidden rounded-2xl shadow-lg ring-2 ring-primary",
                 avatarClassName
               ),
               children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -961,32 +900,24 @@ function LinkPageGridCards({
             }
           ),
           /* @__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(
-                  "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("text-sm", bioClassName), children: bio }) : bio)
           ] })
         ]
       }
     );
-  }, [profileSlot, resolvedAvatar, resolvedBackground, avatarClassName, optixFlowConfig, name, nameClassName, bio, bioClassName, headerClassName]);
+  }, [
+    profileSlot,
+    avatar,
+    avatarUrl,
+    avatarClassName,
+    optixFlowConfig,
+    name,
+    nameClassName,
+    bio,
+    bioClassName,
+    headerClassName
+  ]);
   const renderSocialLinks = React.useMemo(() => {
     if (socialLinksSlot) return socialLinksSlot;
     if (!socialLinks || socialLinks.length === 0) return null;
@@ -1015,9 +946,8 @@ function LinkPageGridCards({
               "aria-label": ariaLabel,
               className: cn(
                 "rounded-lg p-2 transition-all duration-200",
-                "hover:scale-110 active:scale-95",
-                "bg-card hover:opacity-80",
-                getTextColor(resolvedBackground, "muted"),
+                "bg-card text-card-foreground hover:opacity-80",
+                "size-12 flex items-center justify-center",
                 socialLinkClassName,
                 social.className
               ),
@@ -1028,7 +958,13 @@ function LinkPageGridCards({
         })
       }
     );
-  }, [socialLinksSlot, socialLinks, socialLinksClassName, socialIconClassName, resolvedBackground, socialLinkClassName]);
+  }, [
+    socialLinksSlot,
+    socialLinks,
+    socialLinksClassName,
+    socialIconClassName,
+    socialLinkClassName
+  ]);
   const renderLinks = React.useMemo(() => {
     if (linksSlot) return linksSlot;
     if (!links || links.length === 0) return null;
@@ -1063,9 +999,10 @@ function LinkPageGridCards({
               Pressable,
               {
                 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]",
-                  "border border-border bg-card shadow-sm hover:shadow-md",
+                  "group flex flex-col items-center gap-2 rounded-xl p-4",
+                  "transition-all duration-200 shadow-md",
+                  "border border-border hover:shadow-xl",
+                  "text-card-foreground bg-card",
                   cardClassName,
                   linkClassName
                 ),
@@ -1079,8 +1016,9 @@ function LinkPageGridCards({
             Pressable,
             {
               className: cn(
-                "group flex flex-col items-center gap-2 rounded-xl p-4 transition-all duration-200",
+                "group flex flex-col items-center gap-2 rounded-xl",
                 "hover:scale-[1.03] active:scale-[0.97]",
+                "transition-all duration-200 p-4",
                 "border border-border bg-card shadow-sm hover:shadow-md",
                 cardClassName,
                 linkClassName
@@ -1091,9 +1029,8 @@ function LinkPageGridCards({
                   "div",
                   {
                     className: cn(
-                      "flex h-12 w-12 items-center justify-center rounded-xl transition-colors",
-                      getNestedCardBg(resolvedBackground),
-                      getNestedCardTextColor(resolvedBackground),
+                      "flex size-12 items-center justify-center",
+                      "rounded-xl transition-colors",
                       "group-hover:opacity-80",
                       cardIconWrapperClassName
                     ),
@@ -1110,18 +1047,14 @@ function LinkPageGridCards({
                       ),
                       children: label
                     }
-                  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cardLabelClassName, children: label })),
+                  ) : label),
                   description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                     "span",
                     {
-                      className: cn(
-                        "block text-xs",
-                        getTextColor(resolvedBackground, "muted"),
-                        cardDescriptionClassName
-                      ),
+                      className: cn("block text-sm", cardDescriptionClassName),
                       children: description
                     }
-                  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cardDescriptionClassName, children: description }))
+                  ) : description)
                 ] })
               ]
             },
@@ -1130,7 +1063,17 @@ function LinkPageGridCards({
         })
       }
     );
-  }, [linksSlot, links, columns, gridClassName, cardIconClassName, resolvedBackground, cardClassName, cardIconWrapperClassName, cardLabelClassName, cardDescriptionClassName]);
+  }, [
+    linksSlot,
+    links,
+    columns,
+    gridClassName,
+    cardIconClassName,
+    cardClassName,
+    cardIconWrapperClassName,
+    cardLabelClassName,
+    cardDescriptionClassName
+  ]);
   const renderFooter = React.useMemo(() => {
     if (footerSlot) return footerSlot;
     if (!footerAction) return null;
@@ -1148,9 +1091,9 @@ function LinkPageGridCards({
       Pressable,
       {
         className: cn(
-          "flex items-center justify-center gap-1.5 text-xs transition-opacity hover:opacity-80",
-          getTextColor(resolvedBackground, "muted"),
-          "opacity-50",
+          "flex items-center justify-center",
+          "text-xs transition-opacity hover:opacity-80",
+          "opacity-50 gap-1.5",
           footerClassName,
           actionClassName
         ),
@@ -1162,11 +1105,11 @@ function LinkPageGridCards({
         ] })
       }
     );
-  }, [footerSlot, footerAction, resolvedBackground, footerClassName]);
+  }, [footerSlot, footerAction, footerClassName]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
-      background: resolvedBackground,
+      background,
       spacing,
       className,
       pattern,

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-r_NhxVet.cjs';
+import { I as ImageItem, A as ActionConfig, a as SocialLinkItem, O as OptixFlowConfig } from './blocks-DP3Vofl4.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CdNtNOuP.cjs';
 import 'class-variance-authority/types';
 
 /**
@@ -192,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, 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, contentClassName, headerClassName, avatarClassName, nameClassName, bioClassName, socialLinksClassName, socialLinkClassName, socialIconClassName, gridClassName, cardClassName, cardIconWrapperClassName, cardIconClassName, cardLabelClassName, cardDescriptionClassName, footerClassName, background, containerClassName, 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-DmVsuoHE.js';
+import { I as ImageItem, A as ActionConfig, a as SocialLinkItem, O as OptixFlowConfig } from './blocks-XLPGq8A5.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CdNtNOuP.js';
 import 'class-variance-authority/types';
 
 /**
@@ -192,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, 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, contentClassName, headerClassName, avatarClassName, nameClassName, bioClassName, socialLinksClassName, socialLinkClassName, socialIconClassName, gridClassName, cardClassName, cardIconWrapperClassName, cardIconClassName, cardLabelClassName, cardDescriptionClassName, footerClassName, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: LinkPageGridCardsProps): React.JSX.Element;
 
 export { type GridCardLink, type GridCardSocialLink, LinkPageGridCards, type LinkPageGridCardsProps };

package/dist/link-page-grid-cards.js

@@ -12,62 +12,6 @@ import { Img } from '@page-speed/img';
 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:")) {
@@ -490,10 +434,6 @@ var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
 function DynamicIcon({ apiKey, ...props }) {
   return /* @__PURE__ */ jsx(Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
 }
-
-// lib/blockBrandedIconsAndPlaceholders.ts
-var blockBrandedIconsAndPlaceholders = {
-  avatar4: "https://cdn.ing/assets/i/r/286242/y0zkazxawxrl3twwkw63twf04pdt/avatar-4.webp"};
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -873,7 +813,7 @@ function LinkPageGridCards({
   name,
   bio,
   avatar,
-  avatarUrl = blockBrandedIconsAndPlaceholders.avatar4,
+  avatarUrl,
   profileSlot,
   links,
   linksSlot,
@@ -883,7 +823,6 @@ function LinkPageGridCards({
   footerAction,
   footerSlot,
   className,
-  containerClassName,
   contentClassName,
   headerClassName,
   avatarClassName,
@@ -899,20 +838,20 @@ function LinkPageGridCards({
   cardLabelClassName,
   cardDescriptionClassName,
   footerClassName,
-  background = "gray",
-  spacing,
+  background,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-12 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
   optixFlowConfig
 }) {
-  const resolvedBackground = background;
-  const resolvedAvatar = avatar || (avatarUrl ? {
-    src: avatarUrl,
-    alt: typeof name === "string" ? name : "Profile avatar"
-  } : void 0);
   const renderProfile = useMemo(() => {
     if (profileSlot) return profileSlot;
+    const resolvedAvatar = avatar || (avatarUrl ? {
+      src: avatarUrl,
+      alt: typeof name === "string" ? name : "Profile avatar"
+    } : void 0);
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -925,7 +864,7 @@ function LinkPageGridCards({
             "div",
             {
               className: cn(
-                "h-20 w-20 overflow-hidden rounded-2xl shadow-lg ring-2 ring-neutral-200",
+                "h-20 w-20 overflow-hidden rounded-2xl shadow-lg ring-2 ring-primary",
                 avatarClassName
               ),
               children: /* @__PURE__ */ jsx(
@@ -940,32 +879,24 @@ function LinkPageGridCards({
             }
           ),
           /* @__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(
-                  "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("text-sm", bioClassName), children: bio }) : bio)
           ] })
         ]
       }
     );
-  }, [profileSlot, resolvedAvatar, resolvedBackground, avatarClassName, optixFlowConfig, name, nameClassName, bio, bioClassName, headerClassName]);
+  }, [
+    profileSlot,
+    avatar,
+    avatarUrl,
+    avatarClassName,
+    optixFlowConfig,
+    name,
+    nameClassName,
+    bio,
+    bioClassName,
+    headerClassName
+  ]);
   const renderSocialLinks = useMemo(() => {
     if (socialLinksSlot) return socialLinksSlot;
     if (!socialLinks || socialLinks.length === 0) return null;
@@ -994,9 +925,8 @@ function LinkPageGridCards({
               "aria-label": ariaLabel,
               className: cn(
                 "rounded-lg p-2 transition-all duration-200",
-                "hover:scale-110 active:scale-95",
-                "bg-card hover:opacity-80",
-                getTextColor(resolvedBackground, "muted"),
+                "bg-card text-card-foreground hover:opacity-80",
+                "size-12 flex items-center justify-center",
                 socialLinkClassName,
                 social.className
               ),
@@ -1007,7 +937,13 @@ function LinkPageGridCards({
         })
       }
     );
-  }, [socialLinksSlot, socialLinks, socialLinksClassName, socialIconClassName, resolvedBackground, socialLinkClassName]);
+  }, [
+    socialLinksSlot,
+    socialLinks,
+    socialLinksClassName,
+    socialIconClassName,
+    socialLinkClassName
+  ]);
   const renderLinks = useMemo(() => {
     if (linksSlot) return linksSlot;
     if (!links || links.length === 0) return null;
@@ -1042,9 +978,10 @@ function LinkPageGridCards({
               Pressable,
               {
                 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]",
-                  "border border-border bg-card shadow-sm hover:shadow-md",
+                  "group flex flex-col items-center gap-2 rounded-xl p-4",
+                  "transition-all duration-200 shadow-md",
+                  "border border-border hover:shadow-xl",
+                  "text-card-foreground bg-card",
                   cardClassName,
                   linkClassName
                 ),
@@ -1058,8 +995,9 @@ function LinkPageGridCards({
             Pressable,
             {
               className: cn(
-                "group flex flex-col items-center gap-2 rounded-xl p-4 transition-all duration-200",
+                "group flex flex-col items-center gap-2 rounded-xl",
                 "hover:scale-[1.03] active:scale-[0.97]",
+                "transition-all duration-200 p-4",
                 "border border-border bg-card shadow-sm hover:shadow-md",
                 cardClassName,
                 linkClassName
@@ -1070,9 +1008,8 @@ function LinkPageGridCards({
                   "div",
                   {
                     className: cn(
-                      "flex h-12 w-12 items-center justify-center rounded-xl transition-colors",
-                      getNestedCardBg(resolvedBackground),
-                      getNestedCardTextColor(resolvedBackground),
+                      "flex size-12 items-center justify-center",
+                      "rounded-xl transition-colors",
                       "group-hover:opacity-80",
                       cardIconWrapperClassName
                     ),
@@ -1089,18 +1026,14 @@ function LinkPageGridCards({
                       ),
                       children: label
                     }
-                  ) : /* @__PURE__ */ jsx("div", { className: cardLabelClassName, children: label })),
+                  ) : label),
                   description && (typeof description === "string" ? /* @__PURE__ */ jsx(
                     "span",
                     {
-                      className: cn(
-                        "block text-xs",
-                        getTextColor(resolvedBackground, "muted"),
-                        cardDescriptionClassName
-                      ),
+                      className: cn("block text-sm", cardDescriptionClassName),
                       children: description
                     }
-                  ) : /* @__PURE__ */ jsx("div", { className: cardDescriptionClassName, children: description }))
+                  ) : description)
                 ] })
               ]
             },
@@ -1109,7 +1042,17 @@ function LinkPageGridCards({
         })
       }
     );
-  }, [linksSlot, links, columns, gridClassName, cardIconClassName, resolvedBackground, cardClassName, cardIconWrapperClassName, cardLabelClassName, cardDescriptionClassName]);
+  }, [
+    linksSlot,
+    links,
+    columns,
+    gridClassName,
+    cardIconClassName,
+    cardClassName,
+    cardIconWrapperClassName,
+    cardLabelClassName,
+    cardDescriptionClassName
+  ]);
   const renderFooter = useMemo(() => {
     if (footerSlot) return footerSlot;
     if (!footerAction) return null;
@@ -1127,9 +1070,9 @@ function LinkPageGridCards({
       Pressable,
       {
         className: cn(
-          "flex items-center justify-center gap-1.5 text-xs transition-opacity hover:opacity-80",
-          getTextColor(resolvedBackground, "muted"),
-          "opacity-50",
+          "flex items-center justify-center",
+          "text-xs transition-opacity hover:opacity-80",
+          "opacity-50 gap-1.5",
           footerClassName,
           actionClassName
         ),
@@ -1141,11 +1084,11 @@ function LinkPageGridCards({
         ] })
       }
     );
-  }, [footerSlot, footerAction, resolvedBackground, footerClassName]);
+  }, [footerSlot, footerAction, footerClassName]);
   return /* @__PURE__ */ jsx(
     Section,
     {
-      background: resolvedBackground,
+      background,
       spacing,
       className,
       pattern,