@opensite/ui 0.8.8 → 0.8.9

package/dist/comparison-legacy-modern.cjs

@@ -32,6 +32,36 @@ var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespace(SeparatorPrim
 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" : "";
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -559,7 +589,12 @@ function ComparisonLegacyModern({
     if (!legacyFeatures || legacyFeatures.length === 0 || !modernFeatures || modernFeatures.length === 0)
       return null;
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("rounded-3xl bg-muted p-6 lg:rounded-r-none lg:p-12", legacyColumnClassName), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
+        "rounded-3xl p-6 lg:rounded-r-none lg:p-12",
+        getNestedCardBg(background),
+        getNestedCardTextColor(background),
+        legacyColumnClassName
+      ), children: [
         legacyTitle && (typeof legacyTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-2xl font-medium", children: legacyTitle }) : legacyTitle),
         /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "mt-9 space-y-3", children: legacyFeatures.map((feature, idx) => /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [

package/dist/comparison-legacy-modern.d.cts

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-Sm_ZSgyv.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
 import 'react/jsx-runtime';
 import './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';

package/dist/comparison-legacy-modern.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BeWIIjA4.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
 import 'react/jsx-runtime';
 import './blocks-k17uluAz.js';
 import 'class-variance-authority';

package/dist/comparison-legacy-modern.js

@@ -10,6 +10,36 @@ import * as SeparatorPrimitive from '@radix-ui/react-separator';
 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" : "";
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -537,7 +567,12 @@ function ComparisonLegacyModern({
     if (!legacyFeatures || legacyFeatures.length === 0 || !modernFeatures || modernFeatures.length === 0)
       return null;
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs("div", { className: cn("rounded-3xl bg-muted p-6 lg:rounded-r-none lg:p-12", legacyColumnClassName), children: [
+      /* @__PURE__ */ jsxs("div", { className: cn(
+        "rounded-3xl p-6 lg:rounded-r-none lg:p-12",
+        getNestedCardBg(background),
+        getNestedCardTextColor(background),
+        legacyColumnClassName
+      ), children: [
         legacyTitle && (typeof legacyTitle === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-2xl font-medium", children: legacyTitle }) : legacyTitle),
         /* @__PURE__ */ jsx("ul", { className: "mt-9 space-y-3", children: legacyFeatures.map((feature, idx) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [

package/dist/comparison-metrics-rows.d.cts

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-Sm_ZSgyv.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
 import { A as ActionConfig } from './blocks-Cohq4eio.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';

package/dist/comparison-metrics-rows.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BeWIIjA4.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
 import { A as ActionConfig } from './blocks-k17uluAz.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';

package/dist/comparison-table-tabs.d.cts

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-Sm_ZSgyv.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
 import 'react/jsx-runtime';
 import './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';

package/dist/comparison-table-tabs.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BeWIIjA4.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
 import 'react/jsx-runtime';
 import './blocks-k17uluAz.js';
 import 'class-variance-authority';

package/dist/comparison-table-tooltips.cjs

@@ -32,6 +32,36 @@ var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitiv
 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 Table({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -582,12 +612,22 @@ function ComparisonTableTooltips({
     return /* @__PURE__ */ jsxRuntime.jsxs(Table, { className: cn("rounded border text-left shadow-lg", tableClassName), children: [
       /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: tableHeaderClassName }),
-        optionALabel && /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: cn("bg-muted px-6 py-4 font-semibold", tableHeaderClassName), children: optionALabel }),
+        optionALabel && /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: cn(
+          "px-6 py-4 font-semibold",
+          getNestedCardBg(background),
+          getNestedCardTextColor(background),
+          tableHeaderClassName
+        ), children: optionALabel }),
         optionBLabel && /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: cn("px-6 py-4 font-semibold", tableHeaderClassName), children: optionBLabel })
       ] }) }),
       /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: rows.map((row, idx) => /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: cn("px-6 py-4", tableCellClassName), children: row.feature }),
-        /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: cn("bg-muted px-6 py-4", tableCellClassName), children: renderCellContent(row.optionA, true) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: cn(
+          "px-6 py-4",
+          getNestedCardBg(background),
+          getNestedCardTextColor(background),
+          tableCellClassName
+        ), children: renderCellContent(row.optionA, true) }),
         /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: cn("px-6 py-4", tableCellClassName), children: renderCellContent(row.optionB, false) })
       ] }, idx)) })
     ] });

package/dist/comparison-table-tooltips.d.cts

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-Sm_ZSgyv.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
 import 'react/jsx-runtime';
 import './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';

package/dist/comparison-table-tooltips.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BeWIIjA4.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
 import 'react/jsx-runtime';
 import './blocks-k17uluAz.js';
 import 'class-variance-authority';

package/dist/comparison-table-tooltips.js

@@ -10,6 +10,36 @@ import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 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 Table({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -560,12 +590,22 @@ function ComparisonTableTooltips({
     return /* @__PURE__ */ jsxs(Table, { className: cn("rounded border text-left shadow-lg", tableClassName), children: [
       /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
         /* @__PURE__ */ jsx(TableHead, { className: tableHeaderClassName }),
-        optionALabel && /* @__PURE__ */ jsx(TableHead, { className: cn("bg-muted px-6 py-4 font-semibold", tableHeaderClassName), children: optionALabel }),
+        optionALabel && /* @__PURE__ */ jsx(TableHead, { className: cn(
+          "px-6 py-4 font-semibold",
+          getNestedCardBg(background),
+          getNestedCardTextColor(background),
+          tableHeaderClassName
+        ), children: optionALabel }),
         optionBLabel && /* @__PURE__ */ jsx(TableHead, { className: cn("px-6 py-4 font-semibold", tableHeaderClassName), children: optionBLabel })
       ] }) }),
       /* @__PURE__ */ jsx(TableBody, { children: rows.map((row, idx) => /* @__PURE__ */ jsxs(TableRow, { children: [
         /* @__PURE__ */ jsx(TableCell, { className: cn("px-6 py-4", tableCellClassName), children: row.feature }),
-        /* @__PURE__ */ jsx(TableCell, { className: cn("bg-muted px-6 py-4", tableCellClassName), children: renderCellContent(row.optionA, true) }),
+        /* @__PURE__ */ jsx(TableCell, { className: cn(
+          "px-6 py-4",
+          getNestedCardBg(background),
+          getNestedCardTextColor(background),
+          tableCellClassName
+        ), children: renderCellContent(row.optionA, true) }),
         /* @__PURE__ */ jsx(TableCell, { className: cn("px-6 py-4", tableCellClassName), children: renderCellContent(row.optionB, false) })
       ] }, idx)) })
     ] });

package/dist/comparison-table-two-column.d.cts

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-Sm_ZSgyv.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
 import { O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';

package/dist/comparison-table-two-column.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BeWIIjA4.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
 import { O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';

package/dist/components.cjs

@@ -43,6 +43,36 @@ var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
 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" : "";
+}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -1683,7 +1713,7 @@ function AboutSplitHero({
       case "dark":
         return "bg-foreground text-background";
       case "gray":
-        return "bg-muted";
+        return cn(getNestedCardBg(background), getNestedCardTextColor(background));
       case "white":
         return "bg-background";
       default:
@@ -1920,7 +1950,9 @@ function AboutMissionPrinciples({
           "div",
           {
             className: cn(
-              "mt-6 md:mt-24 rounded-lg bg-muted p-8 lg:p-12",
+              "mt-6 md:mt-24 rounded-lg p-8 lg:p-12",
+              getNestedCardBg(background),
+              getNestedCardTextColor(background),
               visionClassName
             ),
             children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 items-center gap-8 lg:grid-cols-3", children: [
@@ -2007,7 +2039,9 @@ function AboutExpandableValues({
       "div",
       {
         className: cn(
-          "group overflow-hidden rounded-xl border bg-card text-card-foreground transition-all duration-300",
+          "group overflow-hidden rounded-xl border transition-all duration-300",
+          getNestedCardBg(background, "card"),
+          getNestedCardTextColor(background),
           expandedValue === value.id ? "col-span-1 shadow-lg md:col-span-2 lg:col-span-3" : ""
         ),
         children: [
@@ -2040,7 +2074,10 @@ function AboutExpandableValues({
             }
           ),
           expandedValue === value.id && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6 px-6 pb-6", children: [
-            value.longDescription && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg bg-muted/50 p-4", children: typeof value.longDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: value.longDescription }) : value.longDescription }),
+            value.longDescription && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
+              "rounded-lg p-4",
+              getNestedCardBg(background, "subtle")
+            ), children: typeof value.longDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: value.longDescription }) : value.longDescription }),
             value.examples && value.examples.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
               /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "mb-2 text-sm font-semibold text-muted-foreground", children: "How we put this into practice:" }),
               /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-2", children: value.examples.map((example, index) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-start gap-2", children: [
@@ -2117,7 +2154,9 @@ function AboutExpandableValues({
           "div",
           {
             className: cn(
-              "relative mt-8 rounded-lg bg-accent/50 p-8",
+              "relative mt-8 rounded-lg p-8",
+              getNestedCardBg(background, "accent"),
+              getNestedCardTextColor(background),
               ctaClassName
             ),
             children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-3xl space-y-6 text-center", children: [
@@ -2350,7 +2389,10 @@ function CommunityInitiatives({
                             "flex h-full items-center justify-center md:col-span-5",
                             isEven ? "md:order-2" : "md:order-1"
                           ),
-                          children: /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "flex h-full min-h-[280px] w-full items-center justify-center bg-muted/30", children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "p-6 text-center", children: [
+                          children: /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cn(
+                            "flex h-full min-h-[280px] w-full items-center justify-center",
+                            getNestedCardBg(background, "subtle")
+                          ), children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "p-6 text-center", children: [
                             /* @__PURE__ */ jsxRuntime.jsx(
                               DynamicIcon,
                               {
@@ -2433,7 +2475,10 @@ function CommunityInitiatives({
         ),
         categoriesContent,
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-20 text-center", ctaClassName), children: [
-          ctaBadgeText && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-8 inline-flex items-center justify-center rounded-full bg-muted p-1", children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: "rounded-full bg-primary px-4 py-1 text-primary-foreground", children: ctaBadgeText }) }),
+          ctaBadgeText && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
+            "mb-8 inline-flex items-center justify-center rounded-full p-1",
+            getNestedCardBg(background)
+          ), children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: "rounded-full bg-primary px-4 py-1 text-primary-foreground", children: ctaBadgeText }) }),
           ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-4 text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", ctaHeadingClassName), children: ctaHeading })),
           ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "p",
@@ -2858,7 +2903,12 @@ function FooterSocialNewsletter({
             )) })
           ] }, sectionIdx)),
           (socialLinks && socialLinks.length > 0 || newsletterLabel || newsletterButtonText) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("lg:col-span-2 xl:col-span-1", socialColumnClassName), children: [
-            socialLinks && socialLinks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("mb-10 flex items-center gap-2 text-muted-foreground", socialLinksClassName), children: socialLinks.map((social, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "font-medium", children: /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: social.href, "aria-label": social.label, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("flex size-12 items-center justify-center rounded-full bg-muted transition-colors hover:text-primary", socialLinkClassName), children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: social.icon, size: 24 }) }) }) }, idx)) }),
+            socialLinks && socialLinks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("mb-10 flex items-center gap-2 text-muted-foreground", socialLinksClassName), children: socialLinks.map((social, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "font-medium", children: /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: social.href, "aria-label": social.label, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
+              "flex size-12 items-center justify-center rounded-full transition-colors hover:text-primary",
+              getNestedCardBg(background),
+              getNestedCardTextColor(background),
+              socialLinkClassName
+            ), children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: social.icon, size: 24 }) }) }) }, idx)) }),
             (newsletterLabel || newsletterButtonText) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid w-full max-w-sm items-center gap-1.5", newsletterClassName), children: [
               newsletterLabel && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "newsletter-email", className: "text-sm font-medium", children: newsletterLabel }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-sm items-center space-x-2", children: [
@@ -2938,11 +2988,19 @@ function FooterSocialApps({
   }, [sections]);
   const socialLinksContent = React4.useMemo(() => {
     if (!socialLinks || socialLinks.length === 0) return null;
-    return socialLinks.map((social, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "font-medium", children: /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: social.href, "aria-label": social.label, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-12 items-center justify-center rounded-full bg-muted transition-colors hover:text-primary", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: social.icon, size: 24 }) }) }) }, idx));
+    return socialLinks.map((social, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "font-medium", children: /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: social.href, "aria-label": social.label, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
+      "flex size-12 items-center justify-center rounded-full transition-colors hover:text-primary",
+      getNestedCardBg(background),
+      getNestedCardTextColor(background)
+    ), children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: social.icon, size: 24 }) }) }) }, idx));
   }, [socialLinks]);
   const appLinksContent = React4.useMemo(() => {
     if (!appLinks || appLinks.length === 0) return null;
-    return appLinks.map((app, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "font-medium", children: /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: app.href, "aria-label": app.label, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-12 items-center justify-center rounded-full bg-muted transition-colors hover:text-primary", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: app.icon, size: 24 }) }) }) }, idx));
+    return appLinks.map((app, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "font-medium", children: /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: app.href, "aria-label": app.label, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
+      "flex size-12 items-center justify-center rounded-full transition-colors hover:text-primary",
+      getNestedCardBg(background),
+      getNestedCardTextColor(background)
+    ), children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: app.icon, size: 24 }) }) }) }, idx));
   }, [appLinks]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
@@ -3074,7 +3132,11 @@ function FooterSimpleCentered({
                       logoWrapperClassName
                     ),
                     children: [
-                      logo?.src && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-12 items-center justify-center rounded-lg border border-border bg-accent p-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+                      logo?.src && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
+                        "flex size-12 items-center justify-center rounded-lg border border-border p-2",
+                        getNestedCardBg(background, "accent"),
+                        getNestedCardTextColor(background)
+                      ), children: /* @__PURE__ */ jsxRuntime.jsx(
                         img.Img,
                         {
                           src: logo.src,
@@ -3616,7 +3678,12 @@ function FooterContactCard({
                 {
                   href: social.href,
                   "aria-label": social.label,
-                  className: cn("flex size-12 items-center justify-center rounded-full bg-muted text-muted-foreground transition-colors hover:bg-primary hover:text-primary-foreground", socialLinkClassName),
+                  className: cn(
+                    "flex size-12 items-center justify-center rounded-full transition-colors hover:bg-primary hover:text-primary-foreground",
+                    getNestedCardBg(background),
+                    getNestedCardTextColor(background),
+                    socialLinkClassName
+                  ),
                   children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: social.icon, size: 20 })
                 }
               ) }, idx)) })

package/dist/components.d.cts

@@ -11,7 +11,7 @@ export { DynamicIcon } from './dynamic-icon.cjs';
 export { CarouselPagination, CarouselPaginationProps } from './carousel-pagination.cjs';
 export { Pressable, PressableProps } from './pressable.cjs';
 export { AlternatingBlocks } from './alternating-blocks.cjs';
-export { c as AboutCultureTabs, p as AboutCultureTabsProps, b as AboutExpandableValues, n as AboutExpandableValuesProps, a as AboutMissionPrinciples, m as AboutMissionPrinciplesProps, A as AboutSplitHero, l as AboutSplitHeroProps, k as AlternatingBlockSection, j as AlternatingBlocksProps, h as AnimatedDialogProps, i as AnimatedDialogSize, C as CommunityInitiatives, o as CommunityInitiativesProps, e as ContainerMaxWidth, d as ContainerProps, q as MediaHoverCtaItem, r as MediaHoverCtaType, M as MediaHoverCtasProps, P as PageHeroBannerProps, f as SectionBackground, S as SectionProps, g as SectionSpacing } from './community-initiatives-Sm_ZSgyv.cjs';
+export { c as AboutCultureTabs, p as AboutCultureTabsProps, b as AboutExpandableValues, n as AboutExpandableValuesProps, a as AboutMissionPrinciples, m as AboutMissionPrinciplesProps, A as AboutSplitHero, l as AboutSplitHeroProps, k as AlternatingBlockSection, j as AlternatingBlocksProps, h as AnimatedDialogProps, i as AnimatedDialogSize, C as CommunityInitiatives, o as CommunityInitiativesProps, e as ContainerMaxWidth, d as ContainerProps, q as MediaHoverCtaItem, r as MediaHoverCtaType, M as MediaHoverCtasProps, P as PageHeroBannerProps, f as SectionBackground, S as SectionProps, g as SectionSpacing } from './community-initiatives-Bz_A5vLU.cjs';
 export { MediaHoverCtas } from './media-hover-ctas.cjs';
 export { FooterLinksGrid } from './footer-links-grid.cjs';
 export { FooterSocialNewsletter } from './footer-social-newsletter.cjs';
@@ -33,5 +33,4 @@ import 'class-variance-authority';
 import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 import '@radix-ui/react-popover';
-import './pattern-background-a7gKHzHy.cjs';
 import './forms-BCcwNFhk.cjs';

package/dist/components.d.ts

@@ -11,7 +11,7 @@ export { DynamicIcon } from './dynamic-icon.js';
 export { CarouselPagination, CarouselPaginationProps } from './carousel-pagination.js';
 export { Pressable, PressableProps } from './pressable.js';
 export { AlternatingBlocks } from './alternating-blocks.js';
-export { c as AboutCultureTabs, p as AboutCultureTabsProps, b as AboutExpandableValues, n as AboutExpandableValuesProps, a as AboutMissionPrinciples, m as AboutMissionPrinciplesProps, A as AboutSplitHero, l as AboutSplitHeroProps, k as AlternatingBlockSection, j as AlternatingBlocksProps, h as AnimatedDialogProps, i as AnimatedDialogSize, C as CommunityInitiatives, o as CommunityInitiativesProps, e as ContainerMaxWidth, d as ContainerProps, q as MediaHoverCtaItem, r as MediaHoverCtaType, M as MediaHoverCtasProps, P as PageHeroBannerProps, f as SectionBackground, S as SectionProps, g as SectionSpacing } from './community-initiatives-BeWIIjA4.js';
+export { c as AboutCultureTabs, p as AboutCultureTabsProps, b as AboutExpandableValues, n as AboutExpandableValuesProps, a as AboutMissionPrinciples, m as AboutMissionPrinciplesProps, A as AboutSplitHero, l as AboutSplitHeroProps, k as AlternatingBlockSection, j as AlternatingBlocksProps, h as AnimatedDialogProps, i as AnimatedDialogSize, C as CommunityInitiatives, o as CommunityInitiativesProps, e as ContainerMaxWidth, d as ContainerProps, q as MediaHoverCtaItem, r as MediaHoverCtaType, M as MediaHoverCtasProps, P as PageHeroBannerProps, f as SectionBackground, S as SectionProps, g as SectionSpacing } from './community-initiatives-Bi_ClKrO.js';
 export { MediaHoverCtas } from './media-hover-ctas.js';
 export { FooterLinksGrid } from './footer-links-grid.js';
 export { FooterSocialNewsletter } from './footer-social-newsletter.js';
@@ -33,5 +33,4 @@ import 'class-variance-authority';
 import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 import '@radix-ui/react-popover';
-import './pattern-background-a7gKHzHy.js';
 import './forms-BCcwNFhk.js';