@opensite/ui 0.8.8 → 0.9.0

package/dist/footer-comprehensive-links.js

@@ -11,6 +11,36 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 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 normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -534,6 +564,34 @@ function processSvgForCurrentColor(svg) {
   );
   return processed;
 }
+var maxWidthStyles = {
+  sm: "max-w-screen-sm",
+  md: "max-w-screen-md",
+  lg: "max-w-screen-lg",
+  xl: "max-w-7xl",
+  "2xl": "max-w-screen-2xl",
+  "4xl": "max-w-[1536px]",
+  full: "max-w-full"
+};
+var Container = React__default.forwardRef(
+  ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
+    const Component = as;
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        ref,
+        className: cn(
+          "mx-auto w-full px-2 sm:px-4 lg:px-8",
+          maxWidthStyles[maxWidth],
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Container.displayName = "Container";
 
 // lib/patternSvgs.ts
 var patternSvgs = {
@@ -800,34 +858,87 @@ function PatternBackground({
     }
   );
 }
-var maxWidthStyles = {
-  sm: "max-w-screen-sm",
-  md: "max-w-screen-md",
-  lg: "max-w-screen-lg",
-  xl: "max-w-7xl",
-  "2xl": "max-w-screen-2xl",
-  "4xl": "max-w-[1536px]",
-  full: "max-w-full"
+var backgroundStyles = {
+  default: "bg-background text-foreground",
+  white: "bg-white text-dark",
+  gray: "bg-muted/30 text-foreground",
+  dark: "bg-foreground text-background",
+  transparent: "bg-transparent text-foreground",
+  gradient: "bg-linear-to-br from-primary via-primary/90 to-foreground text-primary-foreground",
+  primary: "bg-primary text-primary-foreground",
+  secondary: "bg-secondary text-secondary-foreground",
+  muted: "bg-muted text-muted-foreground"
 };
-var Container = React__default.forwardRef(
-  ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
-    const Component = as;
-    return /* @__PURE__ */ jsx(
-      Component,
+var spacingStyles = {
+  none: "py-0 md:py-0",
+  sm: "py-12 md:py-16",
+  md: "py-16 md:py-24",
+  lg: "py-20 md:py-32",
+  xl: "py-24 md:py-40"
+};
+var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
+var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
+var Section = React__default.forwardRef(
+  ({
+    id,
+    title,
+    subtitle,
+    children,
+    className,
+    style,
+    background = "default",
+    spacing = "lg",
+    pattern,
+    patternOpacity,
+    patternClassName,
+    containerClassName,
+    containerMaxWidth = "xl",
+    ...props
+  }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
+    return /* @__PURE__ */ jsxs(
+      "section",
       {
         ref,
+        id,
         className: cn(
-          "mx-auto w-full px-2 sm:px-4 lg:px-8",
-          maxWidthStyles[maxWidth],
+          "relative",
+          pattern ? "overflow-hidden" : null,
+          backgroundStyles[background],
+          isPredefinedSpacing(spacing) ? spacingStyles[spacing] : spacing,
           className
         ),
+        style,
         ...props,
-        children
+        children: [
+          /* @__PURE__ */ jsx(
+            PatternBackground,
+            {
+              pattern,
+              opacity: effectivePatternOpacity,
+              className: patternClassName
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Container,
+            {
+              maxWidth: containerMaxWidth,
+              className: cn("relative z-10", containerClassName),
+              children: [
+                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
+                  subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
+                ] }),
+                children
+              ]
+            }
+          )
+        ]
       }
     );
   }
 );
-Container.displayName = "Container";
+Section.displayName = "Section";
 var socialIconMap = {
   facebook: "simple-icons/facebook",
   x: "simple-icons/x",
@@ -852,156 +963,160 @@ function FooterComprehensiveLinks({
   pattern,
   patternOpacity,
   className,
-  optixFlowConfig
+  optixFlowConfig,
+  background = "white"
 }) {
   const year = useMemo(() => (/* @__PURE__ */ new Date()).getFullYear(), []);
   const copyrightText = copyright || `\xA9 ${year} ${companyName || ""}. All rights reserved.`;
   return /* @__PURE__ */ jsxs(
-    "footer",
+    Section,
     {
-      className: cn(
-        "relative overflow-hidden",
-        className
-      ),
+      background,
+      spacing: "lg",
+      pattern,
+      patternOpacity,
+      className,
+      containerClassName: "relative z-10",
       children: [
-        /* @__PURE__ */ jsx(PatternBackground, { pattern, opacity: patternOpacity }),
-        /* @__PURE__ */ jsxs(Container, { className: "relative z-10 py-12 lg:py-16", children: [
-          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-10 lg:gap-12", children: [
-            /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-12", children: [
-              (logoSrc || tagline || summary) && /* @__PURE__ */ jsx("div", { className: "sm:col-span-2 lg:col-span-3", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
-                logoSrc && /* @__PURE__ */ jsx(Pressable, { href: logoHref || "/", className: "inline-flex w-fit", children: /* @__PURE__ */ jsx(
-                  Img,
-                  {
-                    src: logoSrc,
-                    alt: logoAlt || "Logo",
-                    className: "h-9 w-auto",
-                    loading: "eager",
-                    optixFlowConfig
-                  }
-                ) }),
-                tagline && /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: tagline }),
-                summary && /* @__PURE__ */ jsx("p", { className: "text-sm leading-relaxed text-muted-foreground", children: summary })
-              ] }) }),
-              linkColumns && linkColumns.length > 0 && linkColumns.map((column) => /* @__PURE__ */ jsx("div", { className: "lg:col-span-2", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
-                /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold", children: column.title }),
-                /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-2.5", children: column.links.map((link) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-10 lg:gap-12", children: [
+          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-12", children: [
+            (logoSrc || tagline || summary) && /* @__PURE__ */ jsx("div", { className: "sm:col-span-2 lg:col-span-3", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+              logoSrc && /* @__PURE__ */ jsx(Pressable, { href: logoHref || "/", className: "inline-flex w-fit", children: /* @__PURE__ */ jsx(
+                Img,
+                {
+                  src: logoSrc,
+                  alt: logoAlt || "Logo",
+                  className: "h-9 w-auto",
+                  loading: "eager",
+                  optixFlowConfig
+                }
+              ) }),
+              tagline && /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: tagline }),
+              summary && /* @__PURE__ */ jsx("p", { className: "text-sm leading-relaxed text-muted-foreground", children: summary })
+            ] }) }),
+            linkColumns && linkColumns.length > 0 && linkColumns.map((column) => /* @__PURE__ */ jsx("div", { className: "lg:col-span-2", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold", children: column.title }),
+              /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-2.5", children: column.links.map((link) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                Pressable,
+                {
+                  href: link.href,
+                  className: "text-sm text-muted-foreground transition-colors hover:text-primary",
+                  children: link.label
+                }
+              ) }, link.href)) })
+            ] }) }, column.title)),
+            contact || (socialLinks?.length ?? 0) > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 lg:col-span-3", children: [
+              contact ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+                /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold", children: "Contact" }),
+                /* @__PURE__ */ jsxs("ul", { className: "flex flex-col gap-3", children: [
+                  contact.email ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+                    Pressable,
+                    {
+                      href: contact.email,
+                      className: "group flex items-center gap-2.5 text-sm text-muted-foreground transition-colors hover:text-primary",
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          DynamicIcon,
+                          {
+                            name: "lucide/mail",
+                            size: 16,
+                            className: "text-muted-foreground transition-colors group-hover:text-primary"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("span", { className: "underline underline-offset-2", children: contact.email })
+                      ]
+                    }
+                  ) }) : null,
+                  contact.phone ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+                    Pressable,
+                    {
+                      href: contact.phone,
+                      className: "group flex items-center gap-2.5 text-sm text-muted-foreground transition-colors hover:text-primary",
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          DynamicIcon,
+                          {
+                            name: "lucide/phone",
+                            size: 16,
+                            className: "text-muted-foreground transition-colors group-hover:text-primary"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("span", { className: "underline underline-offset-2", children: contact.phone })
+                      ]
+                    }
+                  ) }) : null,
+                  contact.address ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+                    Pressable,
+                    {
+                      href: `https://maps.google.com/?q=${encodeURIComponent(
+                        contact.address
+                      )}`,
+                      className: "group flex items-start gap-2.5 text-sm text-muted-foreground transition-colors hover:text-primary",
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          DynamicIcon,
+                          {
+                            name: "lucide/map-pin",
+                            size: 16,
+                            className: "mt-0.5 text-muted-foreground transition-colors group-hover:text-primary"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("span", { className: "underline underline-offset-2", children: contact.address })
+                      ]
+                    }
+                  ) }) : null
+                ] })
+              ] }) : null,
+              (socialLinks?.length ?? 0) > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+                /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold", children: "Follow Us" }),
+                /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: socialLinks?.map((link) => /* @__PURE__ */ jsx(
                   Pressable,
                   {
                     href: link.href,
-                    className: "text-sm text-muted-foreground transition-colors hover:text-primary",
-                    children: link.label
-                  }
-                ) }, link.href)) })
-              ] }) }, column.title)),
-              contact || (socialLinks?.length ?? 0) > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 lg:col-span-3", children: [
-                contact ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
-                  /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold", children: "Contact" }),
-                  /* @__PURE__ */ jsxs("ul", { className: "flex flex-col gap-3", children: [
-                    contact.email ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
-                      Pressable,
+                    "aria-label": link.label || `Follow us on ${link.platform}`,
+                    className: cn(
+                      "flex h-9 w-9 items-center justify-center rounded-full transition-colors hover:bg-muted/80 hover:text-primary",
+                      getNestedCardBg(background),
+                      getNestedCardTextColor(background)
+                    ),
+                    children: /* @__PURE__ */ jsx(
+                      DynamicIcon,
                       {
-                        href: contact.email,
-                        className: "group flex items-center gap-2.5 text-sm text-muted-foreground transition-colors hover:text-primary",
-                        children: [
-                          /* @__PURE__ */ jsx(
-                            DynamicIcon,
-                            {
-                              name: "lucide/mail",
-                              size: 16,
-                              className: "text-muted-foreground transition-colors group-hover:text-primary"
-                            }
-                          ),
-                          /* @__PURE__ */ jsx("span", { className: "underline underline-offset-2", children: contact.email })
-                        ]
+                        name: socialIconMap[link.platform],
+                        size: 16
                       }
-                    ) }) : null,
-                    contact.phone ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
-                      Pressable,
-                      {
-                        href: contact.phone,
-                        className: "group flex items-center gap-2.5 text-sm text-muted-foreground transition-colors hover:text-primary",
-                        children: [
-                          /* @__PURE__ */ jsx(
-                            DynamicIcon,
-                            {
-                              name: "lucide/phone",
-                              size: 16,
-                              className: "text-muted-foreground transition-colors group-hover:text-primary"
-                            }
-                          ),
-                          /* @__PURE__ */ jsx("span", { className: "underline underline-offset-2", children: contact.phone })
-                        ]
-                      }
-                    ) }) : null,
-                    contact.address ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
-                      Pressable,
-                      {
-                        href: `https://maps.google.com/?q=${encodeURIComponent(
-                          contact.address
-                        )}`,
-                        className: "group flex items-start gap-2.5 text-sm text-muted-foreground transition-colors hover:text-primary",
-                        children: [
-                          /* @__PURE__ */ jsx(
-                            DynamicIcon,
-                            {
-                              name: "lucide/map-pin",
-                              size: 16,
-                              className: "mt-0.5 text-muted-foreground transition-colors group-hover:text-primary"
-                            }
-                          ),
-                          /* @__PURE__ */ jsx("span", { className: "underline underline-offset-2", children: contact.address })
-                        ]
-                      }
-                    ) }) : null
-                  ] })
-                ] }) : null,
-                (socialLinks?.length ?? 0) > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
-                  /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold", children: "Follow Us" }),
-                  /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: socialLinks?.map((link) => /* @__PURE__ */ jsx(
-                    Pressable,
-                    {
-                      href: link.href,
-                      "aria-label": link.label || `Follow us on ${link.platform}`,
-                      className: "flex h-9 w-9 items-center justify-center rounded-full bg-muted text-muted-foreground transition-colors hover:bg-muted/80 hover:text-primary",
-                      children: /* @__PURE__ */ jsx(
-                        DynamicIcon,
-                        {
-                          name: socialIconMap[link.platform],
-                          size: 16
-                        }
-                      )
-                    },
-                    `${link.platform}-${link.href}`
-                  )) })
-                ] }) : null
+                    )
+                  },
+                  `${link.platform}-${link.href}`
+                )) })
               ] }) : null
-            ] }),
-            (articleLinks?.length ?? 0) > 0 ? /* @__PURE__ */ jsx("div", { className: "border-t pt-8", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
-              /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold", children: articleSectionTitle }),
-              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-x-8 gap-y-2.5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4", children: articleLinks?.map((link) => /* @__PURE__ */ jsx(
-                Pressable,
-                {
-                  href: link.href,
-                  className: "truncate text-sm text-muted-foreground transition-colors hover:text-primary",
-                  children: link.label
-                },
-                link.href
-              )) })
-            ] }) }) : null
+            ] }) : null
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "mt-10 border-t pt-8", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-between gap-4 sm:flex-row", children: [
-            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: copyrightText }),
-            (bottomLinks?.length ?? 0) > 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4 sm:gap-6", children: bottomLinks?.map((link) => /* @__PURE__ */ jsx(
+          (articleLinks?.length ?? 0) > 0 ? /* @__PURE__ */ jsx("div", { className: "border-t pt-8", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold", children: articleSectionTitle }),
+            /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-x-8 gap-y-2.5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4", children: articleLinks?.map((link) => /* @__PURE__ */ jsx(
               Pressable,
               {
                 href: link.href,
-                className: "text-sm text-muted-foreground underline underline-offset-2 transition-colors hover:text-primary",
+                className: "truncate text-sm text-muted-foreground transition-colors hover:text-primary",
                 children: link.label
               },
               link.href
-            )) }) : null
-          ] }) })
-        ] })
+            )) })
+          ] }) }) : null
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "mt-10 border-t pt-8", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-between gap-4 sm:flex-row", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: copyrightText }),
+          (bottomLinks?.length ?? 0) > 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4 sm:gap-6", children: bottomLinks?.map((link) => /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              href: link.href,
+              className: "text-sm text-muted-foreground underline underline-offset-2 transition-colors hover:text-primary",
+              children: link.label
+            },
+            link.href
+          )) }) : null
+        ] }) })
       ]
     }
   );

package/dist/footer-contact-card.cjs

@@ -32,6 +32,36 @@ 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" : "";
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -1030,7 +1060,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/footer-contact-card.d.cts

@@ -1,10 +1,9 @@
-import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-Sm_ZSgyv.cjs';
-import { O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
-import 'react/jsx-runtime';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CPyEa7IX.cjs';
+import { O as OptixFlowConfig } from './blocks-tmd_MRJv.cjs';
 import 'react';
+import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-8mtEHxev.cjs';
 import 'class-variance-authority/types';
 
 /**

package/dist/footer-contact-card.d.ts

@@ -1,10 +1,9 @@
-import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BeWIIjA4.js';
-import { O as OptixFlowConfig } from './blocks-k17uluAz.js';
-import 'react/jsx-runtime';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-hxnFe3w6.js';
+import { O as OptixFlowConfig } from './blocks-DRE-f6cS.js';
 import 'react';
+import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-8mtEHxev.js';
 import 'class-variance-authority/types';
 
 /**

package/dist/footer-contact-card.js

@@ -11,6 +11,36 @@ import { cva } from 'class-variance-authority';
 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,
@@ -1009,7 +1039,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__ */ jsx(DynamicIcon, { name: social.icon, size: 20 })
                 }
               ) }, idx)) })

package/dist/footer-cta-banner.d.cts

@@ -1,11 +1,10 @@
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-Sm_ZSgyv.cjs';
-import { O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
-import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CPyEa7IX.cjs';
+import { O as OptixFlowConfig } from './blocks-tmd_MRJv.cjs';
 import 'react';
+import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-8mtEHxev.cjs';
 import 'class-variance-authority/types';
-import 'react/jsx-runtime';
 
 /**
  * Logo configuration for the footer

package/dist/footer-cta-banner.d.ts

@@ -1,11 +1,10 @@
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BeWIIjA4.js';
-import { O as OptixFlowConfig } from './blocks-k17uluAz.js';
-import { P as PatternName } from './pattern-background-a7gKHzHy.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-hxnFe3w6.js';
+import { O as OptixFlowConfig } from './blocks-DRE-f6cS.js';
 import 'react';
+import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-8mtEHxev.js';
 import 'class-variance-authority/types';
-import 'react/jsx-runtime';
 
 /**
  * Logo configuration for the footer

package/dist/footer-cta-social.d.cts

@@ -1,11 +1,10 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-Sm_ZSgyv.cjs';
-import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-import './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CPyEa7IX.cjs';
+import 'react/jsx-runtime';
+import './blocks-tmd_MRJv.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-8mtEHxev.cjs';
 import 'class-variance-authority/types';
-import 'react/jsx-runtime';
 
 /**
  * Social link configuration with icon