@opensite/ui 1.3.5 → 1.3.7

package/dist/components.js

@@ -5,12 +5,13 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { AnimatePresence, motion } from 'framer-motion';
-import { useOnClickOutside } from '@opensite/hooks/core/useOnClickOutside';
+import { useOnClickOutside } from '@opensite/hooks/useOnClickOutside';
 import { AnimatePresence as AnimatePresence$1, motion as motion$1 } from 'motion/react';
 import { Img } from '@page-speed/img';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { usePlatformFromUrl } from '@opensite/hooks/usePlatformFromUrl';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import { useForm, Form, Field } from '@page-speed/forms';
 import { TextInput as TextInput$1 } from '@page-speed/forms/inputs';
@@ -1633,7 +1634,8 @@ var platformIconMap = {
   yelp: "cib/yelp",
   spotify: "cib/spotify",
   apple: "cib/apple",
-  x: "line-md/twitter-x"
+  x: "line-md/twitter-x",
+  unknown: "icon-park-solid/circular-connection"
 };
 var SocialLinkIcon = React4.forwardRef(
   ({
@@ -1641,12 +1643,22 @@ var SocialLinkIcon = React4.forwardRef(
     label,
     iconSize = 20,
     iconColor,
+    href,
     iconClassName,
     className,
+    iconNameOverride,
     ...pressableProps
   }, ref) => {
-    const iconName = platformIconMap[platformName];
-    const accessibleLabel = label || platformName;
+    const platform = usePlatformFromUrl(href);
+    const smartPlatformName = React4.useMemo(() => {
+      return platform || platformName;
+    }, [platform, platformName]);
+    const iconName = React4.useMemo(() => {
+      return iconNameOverride || platformIconMap[smartPlatformName];
+    }, [iconNameOverride, smartPlatformName]);
+    const accessibleLabel = React4.useMemo(() => {
+      return label || platformName;
+    }, [label, platformName]);
     return /* @__PURE__ */ jsx(
       Pressable,
       {
@@ -2837,6 +2849,77 @@ function MediaHoverCtas({
     }
   );
 }
+function isThemedLogo(logo) {
+  return "light" in logo || "dark" in logo;
+}
+var FooterLogo = ({
+  logo,
+  logoSlot,
+  logoClassName,
+  logoImageClassName,
+  logoTitleClassName,
+  optixFlowConfig
+}) => {
+  if (logoSlot) return /* @__PURE__ */ jsx(Fragment, { children: logoSlot });
+  if (!logo) return null;
+  const hasThemedSources = isThemedLogo(logo) && (logo.light || logo.dark);
+  const hasStandardSource = !isThemedLogo(logo) && logo.src;
+  const logoContent = hasThemedSources ? (
+    // Themed logo with light/dark mode sources
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      logo.light && /* @__PURE__ */ jsx(
+        Img,
+        {
+          src: logo.light,
+          alt: logo.alt || "Logo",
+          className: cn(
+            "h-8 w-auto object-contain dark:hidden md:h-10",
+            logoImageClassName
+          ),
+          optixFlowConfig
+        }
+      ),
+      logo.dark && /* @__PURE__ */ jsx(
+        Img,
+        {
+          src: logo.dark,
+          alt: logo.alt || "Logo",
+          className: cn(
+            "hidden h-8 w-auto object-contain dark:block md:h-10",
+            logoImageClassName
+          ),
+          optixFlowConfig
+        }
+      )
+    ] })
+  ) : hasStandardSource ? (
+    // Standard single logo image
+    /* @__PURE__ */ jsx(
+      Img,
+      {
+        src: logo.src,
+        alt: logo.alt || "Logo",
+        className: cn("h-8 w-auto object-contain md:h-10", logoImageClassName),
+        optixFlowConfig
+      }
+    )
+  ) : logo.title ? (
+    // Text-based logo fallback
+    /* @__PURE__ */ jsx("span", { className: cn("text-lg font-semibold md:text-xl", logoTitleClassName), children: logo.title })
+  ) : null;
+  if (!logoContent) return null;
+  if (logo.url) {
+    return /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        href: logo.url,
+        className: cn("inline-flex items-center", logoClassName),
+        children: logoContent
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { className: cn("inline-flex items-center", logoClassName), children: logoContent });
+};
 function FooterLinksGrid({
   logo,
   className,
@@ -2865,18 +2948,14 @@ function FooterLinksGrid({
       children: /* @__PURE__ */ jsxs("footer", { children: [
         /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-8 lg:grid-cols-6", children: [
           (logo || tagline) && /* @__PURE__ */ jsxs("div", { className: "col-span-2 mb-8 lg:mb-0", children: [
-            logo && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 lg:justify-start", children: /* @__PURE__ */ jsxs(Pressable, { href: logo.url, className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx(
-                Img,
-                {
-                  src: logo.src,
-                  alt: logo.alt,
-                  className: "h-10 dark:invert",
-                  optixFlowConfig
-                }
-              ),
-              /* @__PURE__ */ jsx("span", { className: "text-xl font-semibold", children: logo.title })
-            ] }) }),
+            logo && /* @__PURE__ */ jsx(
+              FooterLogo,
+              {
+                logo,
+                logoClassName: "flex items-center gap-2 lg:justify-start",
+                optixFlowConfig
+              }
+            ),
             tagline && /* @__PURE__ */ jsx("p", { className: "mt-4 font-bold", children: tagline })
           ] }),
           menuItems && menuItems.length > 0 && menuItems.map((section, sectionIdx) => /* @__PURE__ */ jsxs("div", { children: [
@@ -2926,7 +3005,6 @@ function FooterSocialNewsletter({
   contentClassName,
   logoWrapperClassName,
   logoClassName,
-  logoTitleClassName,
   gridClassName,
   navSectionClassName,
   navTitleClassName,
@@ -2958,18 +3036,15 @@ function FooterSocialNewsletter({
       patternOpacity,
       className: cn(className),
       children: /* @__PURE__ */ jsx("div", { className: cn(contentClassName), children: /* @__PURE__ */ jsxs("footer", { children: [
-        logo && /* @__PURE__ */ jsxs(Pressable, { href: logo.url, className: cn("flex items-center gap-2", logoWrapperClassName), children: [
-          /* @__PURE__ */ jsx(
-            Img,
-            {
-              src: logo.src,
-              alt: logo.alt,
-              className: cn("h-10", logoClassName),
-              optixFlowConfig
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { className: cn("text-xl font-semibold", logoTitleClassName), children: logo.title })
-        ] }),
+        logo && /* @__PURE__ */ jsx(
+          FooterLogo,
+          {
+            logo,
+            logoClassName: cn("flex items-center gap-2", logoWrapperClassName),
+            logoImageClassName: cn("h-10", logoClassName),
+            optixFlowConfig
+          }
+        ),
         (sections && sections.length > 0 || socialLinks && socialLinks.length > 0 || newsletterLabel || newsletterButtonText) && /* @__PURE__ */ jsxs("div", { className: cn("mt-14 grid gap-8 md:grid-cols-2 lg:grid-cols-5 xl:grid-cols-4", gridClassName), children: [
           sections && sections.length > 0 && sections.map((section, sectionIdx) => /* @__PURE__ */ jsxs("div", { className: cn(navSectionClassName), children: [
             /* @__PURE__ */ jsx("h3", { className: cn("mb-4 font-bold", navTitleClassName), children: section.title }),
@@ -2983,12 +3058,21 @@ function FooterSocialNewsletter({
             )) })
           ] }, sectionIdx)),
           (socialLinks && socialLinks.length > 0 || newsletterLabel || newsletterButtonText) && /* @__PURE__ */ jsxs("div", { className: cn("lg:col-span-2 xl:col-span-1", socialColumnClassName), children: [
-            socialLinks && socialLinks.length > 0 && /* @__PURE__ */ jsx("ul", { className: cn("mb-10 flex items-center gap-2 text-muted-foreground", socialLinksClassName), children: socialLinks.map((social, idx) => /* @__PURE__ */ jsx("li", { className: "font-medium", children: /* @__PURE__ */ jsx(Pressable, { href: social.href, "aria-label": social.label, children: /* @__PURE__ */ 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__ */ jsx(DynamicIcon, { name: social.icon, size: 24 }) }) }) }, idx)) }),
+            socialLinks && socialLinks.length > 0 && /* @__PURE__ */ jsx("ul", { className: cn("mb-10 flex items-center gap-2 text-muted-foreground", socialLinksClassName), children: socialLinks.map((social, idx) => /* @__PURE__ */ jsx("li", { className: "font-medium", children: /* @__PURE__ */ jsx(
+              SocialLinkIcon,
+              {
+                href: social.href,
+                label: social.label,
+                iconNameOverride: social.iconNameOverride,
+                iconSize: 24,
+                className: cn(
+                  "flex size-12 items-center justify-center rounded-full transition-colors hover:text-primary",
+                  getNestedCardBg(background),
+                  getNestedCardTextColor(background),
+                  socialLinkClassName
+                )
+              }
+            ) }, idx)) }),
             (newsletterLabel || newsletterButtonText) && /* @__PURE__ */ jsxs("div", { className: cn("grid w-full max-w-sm items-center gap-1.5", newsletterClassName), children: [
               newsletterLabel && /* @__PURE__ */ jsx("label", { htmlFor: "newsletter-email", className: "text-sm font-medium", children: newsletterLabel }),
               /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-sm items-center space-x-2", children: [
@@ -3068,12 +3152,21 @@ function FooterSocialApps({
   }, [sections]);
   const socialLinksContent = useMemo(() => {
     if (!socialLinks || socialLinks.length === 0) return null;
-    return socialLinks.map((social, idx) => /* @__PURE__ */ jsx("li", { className: "font-medium", children: /* @__PURE__ */ jsx(Pressable, { href: social.href, "aria-label": social.label, children: /* @__PURE__ */ jsx("span", { className: cn(
-      "flex size-12 items-center justify-center rounded-full transition-colors hover:text-primary",
-      getNestedCardBg(background),
-      getNestedCardTextColor(background)
-    ), children: /* @__PURE__ */ jsx(DynamicIcon, { name: social.icon, size: 24 }) }) }) }, idx));
-  }, [socialLinks]);
+    return socialLinks.map((social, idx) => /* @__PURE__ */ jsx("li", { className: "font-medium", children: /* @__PURE__ */ jsx(
+      SocialLinkIcon,
+      {
+        href: social.href,
+        label: social.label,
+        iconNameOverride: social.iconNameOverride,
+        iconSize: 24,
+        className: cn(
+          "flex size-12 items-center justify-center rounded-full transition-colors hover:text-primary",
+          getNestedCardBg(background),
+          getNestedCardTextColor(background)
+        )
+      }
+    ) }, idx));
+  }, [socialLinks, background]);
   const appLinksContent = useMemo(() => {
     if (!appLinks || appLinks.length === 0) return null;
     return appLinks.map((app, idx) => /* @__PURE__ */ jsx("li", { className: "font-medium", children: /* @__PURE__ */ jsx(Pressable, { href: app.href, "aria-label": app.label, children: /* @__PURE__ */ jsx("span", { className: cn(
@@ -3092,18 +3185,15 @@ function FooterSocialApps({
       className: cn(className),
       children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("footer", { children: [
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-between gap-10 lg:flex-row lg:gap-20", children: [
-          logo && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-6", children: /* @__PURE__ */ jsxs(Pressable, { href: logo.url, className: "flex items-center gap-2", children: [
-            logo.src && /* @__PURE__ */ jsx(
-              Img,
-              {
-                src: logo.src,
-                alt: logo.alt,
-                className: "h-10",
-                optixFlowConfig
-              }
-            ),
-            logo.title && /* @__PURE__ */ jsx("span", { className: "text-xl font-semibold", children: logo.title })
-          ] }) }),
+          logo && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-6", children: /* @__PURE__ */ jsx(
+            FooterLogo,
+            {
+              logo,
+              logoClassName: "flex items-center gap-2",
+              logoImageClassName: "h-10",
+              optixFlowConfig
+            }
+          ) }),
           sections && sections.length > 0 && /* @__PURE__ */ jsx("div", { className: "grid flex-1 gap-8 sm:grid-cols-2 md:grid-cols-3", children: sectionsContent }),
           (socialLinks && socialLinks.length > 0 || appLinks && appLinks.length > 0) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
             socialLinks && socialLinks.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
@@ -3135,7 +3225,6 @@ function FooterSimpleCentered({
   brandClassName,
   logoWrapperClassName,
   logoClassName,
-  logoTitleClassName,
   taglineClassName,
   sitemapWrapperClassName,
   sitemapSectionClassName,
@@ -3204,32 +3293,21 @@ function FooterSimpleCentered({
             ),
             children: [
               /* @__PURE__ */ jsxs("div", { className: cn("max-w-96", brandClassName), children: [
-                (logo?.src || logo?.title) && /* @__PURE__ */ jsxs(
+                (logo?.src || logo?.title) && /* @__PURE__ */ jsx(
                   "div",
                   {
                     className: cn(
                       "mb-6 flex items-center gap-3",
                       logoWrapperClassName
                     ),
-                    children: [
-                      logo?.src && /* @__PURE__ */ 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__ */ jsx(
-                        Img,
-                        {
-                          src: logo.src,
-                          alt: logo?.alt,
-                          className: cn(
-                            "size-12 h-full w-full object-contain object-center",
-                            logoClassName
-                          ),
-                          optixFlowConfig
-                        }
-                      ) }),
-                      logo?.title && /* @__PURE__ */ jsx("h3", { className: cn("text-xl font-bold", logoTitleClassName), children: logo.title })
-                    ]
+                    children: /* @__PURE__ */ jsx(
+                      FooterLogo,
+                      {
+                        logo,
+                        logoClassName,
+                        optixFlowConfig
+                      }
+                    )
                   }
                 ),
                 tagline && /* @__PURE__ */ jsx(
@@ -3318,7 +3396,6 @@ function FooterBrandDescription({
   brandColumnClassName,
   logoWrapperClassName,
   logoClassName,
-  logoTitleClassName,
   descriptionClassName,
   socialLinksClassName,
   socialLinkClassName,
@@ -3348,51 +3425,158 @@ function FooterBrandDescription({
       patternOpacity,
       className: cn(className),
       children: /* @__PURE__ */ jsxs("div", { className: cn(contentClassName), children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("flex w-full flex-col justify-between gap-10 lg:flex-row lg:items-start lg:text-left", layoutClassName), children: [
-          (logo || description || socialLinks && socialLinks.length > 0) && /* @__PURE__ */ jsxs("div", { className: cn("flex w-full flex-col justify-between gap-6 lg:items-start", brandColumnClassName), children: [
-            logo && /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2 lg:justify-start", logoWrapperClassName), children: [
-              /* @__PURE__ */ jsx(Pressable, { href: logo.url, children: /* @__PURE__ */ jsx(
-                Img,
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex w-full flex-col justify-between gap-10 lg:flex-row lg:items-start lg:text-left",
+              layoutClassName
+            ),
+            children: [
+              (logo || description || socialLinks && socialLinks.length > 0) && /* @__PURE__ */ jsxs(
+                "div",
                 {
-                  src: logo.src,
-                  alt: logo.alt,
-                  className: cn("h-8", logoClassName),
-                  optixFlowConfig
+                  className: cn(
+                    "flex w-full flex-col justify-between gap-6 lg:items-start",
+                    brandColumnClassName
+                  ),
+                  children: [
+                    logo && /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: cn(
+                          "flex items-center gap-2 lg:justify-start",
+                          logoWrapperClassName
+                        ),
+                        children: /* @__PURE__ */ jsx(
+                          FooterLogo,
+                          {
+                            logo,
+                            logoImageClassName: logoClassName,
+                            optixFlowConfig
+                          }
+                        )
+                      }
+                    ),
+                    description && /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        className: cn(
+                          "max-w-[70%] text-sm text-muted-foreground",
+                          descriptionClassName
+                        ),
+                        children: description
+                      }
+                    ),
+                    socialLinks && socialLinks.length > 0 && /* @__PURE__ */ jsx(
+                      "ul",
+                      {
+                        className: cn(
+                          "flex items-center space-x-6 text-muted-foreground",
+                          socialLinksClassName
+                        ),
+                        children: socialLinks.map((social, idx) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                          SocialLinkIcon,
+                          {
+                            href: social.href,
+                            label: social.label,
+                            iconNameOverride: social.iconNameOverride,
+                            className: cn(
+                              "font-medium hover:text-primary",
+                              socialLinkClassName
+                            )
+                          }
+                        ) }, idx))
+                      }
+                    )
+                  ]
                 }
-              ) }),
-              /* @__PURE__ */ jsx("h2", { className: cn("text-xl font-semibold", logoTitleClassName), children: logo.title })
-            ] }),
-            description && /* @__PURE__ */ jsx("p", { className: cn("max-w-[70%] text-sm text-muted-foreground", descriptionClassName), children: description }),
-            socialLinks && socialLinks.length > 0 && /* @__PURE__ */ jsx("ul", { className: cn("flex items-center space-x-6 text-muted-foreground", socialLinksClassName), children: socialLinks.map((social, idx) => /* @__PURE__ */ jsx("li", { className: cn("font-medium hover:text-primary", socialLinkClassName), children: /* @__PURE__ */ jsx(Pressable, { href: social.href, "aria-label": social.label, children: /* @__PURE__ */ jsx(DynamicIcon, { name: social.icon, size: 20 }) }) }, idx)) })
-          ] }),
-          sections && sections.length > 0 && /* @__PURE__ */ jsx("div", { className: cn("grid w-full gap-6 md:grid-cols-3 lg:gap-20", navGridClassName), children: sections.map((section, sectionIdx) => /* @__PURE__ */ jsxs("div", { className: cn(navSectionClassName), children: [
-            /* @__PURE__ */ jsx("h3", { className: cn("mb-4 font-bold", navTitleClassName), children: section.title }),
-            /* @__PURE__ */ jsx("ul", { className: cn("space-y-3 text-sm text-muted-foreground", navLinksClassName), children: section.links.map((link, linkIdx) => /* @__PURE__ */ jsx(
-              "li",
-              {
-                className: cn("font-medium hover:text-primary", navLinkClassName),
-                children: /* @__PURE__ */ jsx(Pressable, { href: link.href, children: link.name })
-              },
-              linkIdx
-            )) })
-          ] }, sectionIdx)) })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: cn("mt-8 flex flex-col justify-between gap-4 border-t py-8 text-xs font-medium text-muted-foreground md:flex-row md:items-center md:text-left", bottomClassName), children: [
-          /* @__PURE__ */ jsxs("div", { className: cn("order-2 flex flex-col gap-2 lg:order-1 lg:flex-row lg:items-center lg:gap-4", copyrightClassName), children: [
-            /* @__PURE__ */ jsx("p", { children: copyrightText }),
-            attributionText && /* @__PURE__ */ jsx(
-              Pressable,
-              {
-                href: attributionHref || "https://opensite.ai",
-                className: "hover:text-primary",
-                target: "_blank",
-                rel: "noopener noreferrer",
-                children: attributionText
-              }
-            )
-          ] }),
-          legalLinks && legalLinks.length > 0 && /* @__PURE__ */ jsx("ul", { className: cn("order-1 flex flex-col gap-2 md:order-2 md:flex-row", legalLinksClassName), children: legalLinks.map((link, idx) => /* @__PURE__ */ jsx("li", { className: cn("hover:text-primary", legalLinkClassName), children: /* @__PURE__ */ jsx(Pressable, { href: link.href, children: link.name }) }, idx)) })
-        ] })
+              ),
+              sections && sections.length > 0 && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "grid w-full gap-6 md:grid-cols-3 lg:gap-20",
+                    navGridClassName
+                  ),
+                  children: sections.map((section, sectionIdx) => /* @__PURE__ */ jsxs("div", { className: cn(navSectionClassName), children: [
+                    /* @__PURE__ */ jsx("h3", { className: cn("mb-4 font-bold", navTitleClassName), children: section.title }),
+                    /* @__PURE__ */ jsx(
+                      "ul",
+                      {
+                        className: cn(
+                          "space-y-3 text-sm text-muted-foreground",
+                          navLinksClassName
+                        ),
+                        children: section.links.map((link, linkIdx) => /* @__PURE__ */ jsx(
+                          "li",
+                          {
+                            className: cn(
+                              "font-medium hover:text-primary",
+                              navLinkClassName
+                            ),
+                            children: /* @__PURE__ */ jsx(Pressable, { href: link.href, children: link.name })
+                          },
+                          linkIdx
+                        ))
+                      }
+                    )
+                  ] }, sectionIdx))
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "mt-8 flex flex-col justify-between gap-4 border-t py-8 text-xs font-medium text-muted-foreground md:flex-row md:items-center md:text-left",
+              bottomClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "order-2 flex flex-col gap-2 lg:order-1 lg:flex-row lg:items-center lg:gap-4",
+                    copyrightClassName
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx("p", { children: copyrightText }),
+                    attributionText && /* @__PURE__ */ jsx(
+                      Pressable,
+                      {
+                        href: attributionHref || "https://opensite.ai",
+                        className: "hover:text-primary",
+                        target: "_blank",
+                        rel: "noopener noreferrer",
+                        children: attributionText
+                      }
+                    )
+                  ]
+                }
+              ),
+              legalLinks && legalLinks.length > 0 && /* @__PURE__ */ jsx(
+                "ul",
+                {
+                  className: cn(
+                    "order-1 flex flex-col gap-2 md:order-2 md:flex-row",
+                    legalLinksClassName
+                  ),
+                  children: legalLinks.map((link, idx) => /* @__PURE__ */ jsx(
+                    "li",
+                    {
+                      className: cn("hover:text-primary", legalLinkClassName),
+                      children: /* @__PURE__ */ jsx(Pressable, { href: link.href, children: link.name })
+                    },
+                    idx
+                  ))
+                }
+              )
+            ]
+          }
+        )
       ] })
     }
   );
@@ -3432,14 +3616,16 @@ function FooterNewsletterGrid({
   }, [sections]);
   const socialLinksContent = useMemo(() => {
     if (!socialLinks || socialLinks.length === 0) return null;
-    return socialLinks.map((social, idx) => /* @__PURE__ */ jsx(
-      "li",
+    return socialLinks.map((social, idx) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+      SocialLinkIcon,
       {
-        className: "font-medium duration-200 hover:scale-110 hover:text-muted-foreground",
-        children: /* @__PURE__ */ jsx(Pressable, { href: social.href, "aria-label": social.label, children: /* @__PURE__ */ jsx(DynamicIcon, { name: social.icon, size: 24 }) })
-      },
-      idx
-    ));
+        href: social.href,
+        label: social.label,
+        iconNameOverride: social.iconNameOverride,
+        iconSize: 24,
+        className: "font-medium duration-200 hover:scale-110 hover:text-muted-foreground"
+      }
+    ) }, idx));
   }, [socialLinks]);
   return /* @__PURE__ */ jsx(
     Section,
@@ -3452,18 +3638,14 @@ function FooterNewsletterGrid({
       children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("footer", { children: [
         /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-4 justify-between gap-10 lg:grid-cols-6 lg:text-left", children: [
           /* @__PURE__ */ jsxs("div", { className: "col-span-4 flex w-full flex-col gap-6 lg:col-span-2", children: [
-            logo && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 lg:justify-start", children: [
-              /* @__PURE__ */ jsx(Pressable, { href: logo.url, children: logo.src && /* @__PURE__ */ jsx(
-                Img,
-                {
-                  src: logo.src,
-                  alt: logo.alt,
-                  className: "h-8",
-                  optixFlowConfig
-                }
-              ) }),
-              logo.title && /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold", children: logo.title })
-            ] }),
+            logo && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 lg:justify-start", children: /* @__PURE__ */ jsx(
+              FooterLogo,
+              {
+                logo,
+                logoImageClassName: "h-8",
+                optixFlowConfig
+              }
+            ) }),
             description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: description }),
             socialLinks && socialLinks.length > 0 && /* @__PURE__ */ jsx("ul", { className: "flex items-center space-x-6", children: socialLinksContent })
           ] }),
@@ -3531,7 +3713,6 @@ function FooterCtaBanner({
   brandClassName,
   logoWrapperClassName,
   logoClassName,
-  logoTitleClassName,
   newsletterClassName,
   newsletterInputClassName,
   newsletterButtonClassName,
@@ -3576,23 +3757,13 @@ function FooterCtaBanner({
         ] }),
         /* @__PURE__ */ jsxs("div", { className: cn("grid gap-10 lg:grid-cols-5", gridClassName), children: [
           /* @__PURE__ */ jsxs("div", { className: cn("lg:col-span-2", brandClassName), children: [
-            logo && /* @__PURE__ */ jsxs(
-              Pressable,
+            logo && /* @__PURE__ */ jsx(
+              FooterLogo,
               {
-                href: logo.url,
-                className: cn("mb-6 flex items-center gap-2", logoWrapperClassName),
-                children: [
-                  logo.src && /* @__PURE__ */ jsx(
-                    Img,
-                    {
-                      src: logo.src,
-                      alt: logo.alt,
-                      className: cn("h-8 invert", logoClassName),
-                      optixFlowConfig
-                    }
-                  ),
-                  logo.title && /* @__PURE__ */ jsx("span", { className: cn("text-xl font-semibold", logoTitleClassName), children: logo.title })
-                ]
+                logo,
+                logoClassName: cn("mb-6", logoWrapperClassName),
+                logoImageClassName: logoClassName,
+                optixFlowConfig
               }
             ),
             /* @__PURE__ */ jsxs("div", { className: cn("mb-6", newsletterClassName), children: [
@@ -3617,12 +3788,12 @@ function FooterCtaBanner({
               ] })
             ] }),
             /* @__PURE__ */ jsx("ul", { className: cn("flex items-center gap-4", socialLinksClassName), children: socialLinks?.map((social, idx) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-              Pressable,
+              SocialLinkIcon,
               {
                 href: social.href,
-                "aria-label": social.label,
-                className: cn("text-muted-foreground transition-colors hover:text-primary", socialLinkClassName),
-                children: /* @__PURE__ */ jsx(DynamicIcon, { name: social.icon, size: 20 })
+                label: social.label,
+                iconNameOverride: social.iconNameOverride,
+                className: cn("text-muted-foreground transition-colors hover:text-primary", socialLinkClassName)
               }
             ) }, idx)) })
           ] }),
@@ -3678,7 +3849,6 @@ function FooterContactCard({
   leftColumnClassName,
   logoWrapperClassName,
   logoClassName,
-  logoTitleClassName,
   headingClassName,
   contactClassName,
   rightColumnClassName,
@@ -3710,23 +3880,13 @@ function FooterContactCard({
       children: /* @__PURE__ */ jsx("div", { className: cn(contentClassName), children: /* @__PURE__ */ jsxs("footer", { children: [
         /* @__PURE__ */ jsxs("div", { className: cn("grid gap-12 lg:grid-cols-2", gridClassName), children: [
           /* @__PURE__ */ jsxs("div", { className: cn(leftColumnClassName), children: [
-            logo && /* @__PURE__ */ jsxs(
-              Pressable,
+            logo && /* @__PURE__ */ jsx(
+              FooterLogo,
               {
-                href: logo.url,
-                className: cn("mb-8 flex items-center gap-2", logoWrapperClassName),
-                children: [
-                  /* @__PURE__ */ jsx(
-                    Img,
-                    {
-                      src: logo.src,
-                      alt: logo.alt,
-                      className: cn("h-10", logoClassName),
-                      optixFlowConfig
-                    }
-                  ),
-                  /* @__PURE__ */ jsx("span", { className: cn("text-xl font-semibold", logoTitleClassName), children: logo.title })
-                ]
+                logo,
+                logoClassName: cn("mb-8", logoWrapperClassName),
+                logoImageClassName: logoClassName,
+                optixFlowConfig
               }
             ),
             heading && /* @__PURE__ */ jsx("h2", { className: cn("mb-8 text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading }),
@@ -3754,17 +3914,17 @@ function FooterContactCard({
             (socialTitle || socialLinks && socialLinks.length > 0) && /* @__PURE__ */ jsxs("div", { className: cn(socialSectionClassName), children: [
               socialTitle && /* @__PURE__ */ jsx("p", { className: cn("mb-4 font-medium", socialTitleClassName), children: socialTitle }),
               socialLinks && socialLinks.length > 0 && /* @__PURE__ */ jsx("ul", { className: cn("flex items-center gap-4", socialLinksClassName), children: socialLinks.map((social, idx) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-                Pressable,
+                SocialLinkIcon,
                 {
                   href: social.href,
-                  "aria-label": social.label,
+                  label: social.label,
+                  iconNameOverride: social.iconNameOverride,
                   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)) })
             ] }),
@@ -3979,7 +4139,7 @@ function FooterAnimatedSocial({
 }) {
   const socialLinksContent = useMemo(() => {
     if (!socialLinks || socialLinks.length === 0) return null;
-    return socialLinks.map((link) => /* @__PURE__ */ jsx(
+    return socialLinks.map((link, idx) => /* @__PURE__ */ jsx(
       motion.div,
       {
         variants: itemVariants,
@@ -3989,26 +4149,18 @@ function FooterAnimatedSocial({
           stiffness: 300,
           damping: 20
         },
-        children: /* @__PURE__ */ jsxs(
-          Pressable,
+        children: /* @__PURE__ */ jsx(
+          SocialLinkIcon,
           {
             href: link.href,
-            className: cn("group flex items-center gap-2 py-2 transition-colors hover:text-muted-foreground", socialLinkClassName),
-            children: [
-              /* @__PURE__ */ jsx("span", { className: "text-xl font-medium", children: link.name }),
-              /* @__PURE__ */ jsx(
-                DynamicIcon,
-                {
-                  name: "lucide/arrow-up-right",
-                  size: 24,
-                  className: "transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5"
-                }
-              )
-            ]
+            label: link.label,
+            iconNameOverride: link.iconNameOverride,
+            iconSize: 24,
+            className: cn("group flex items-center gap-2 py-2 transition-colors hover:text-muted-foreground", socialLinkClassName)
           }
         )
       },
-      link.name
+      idx
     ));
   }, [socialLinks, socialLinkClassName]);
   return /* @__PURE__ */ jsx(
@@ -4266,25 +4418,16 @@ function FooterNewsletterMinimal({
   }, [navLinks, navLinkClassName]);
   const socialLinksContent = useMemo(() => {
     if (!socialLinks || socialLinks.length === 0) return null;
-    return socialLinks.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
-      Pressable,
+    return socialLinks.map((item, idx) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+      SocialLinkIcon,
       {
         href: item.href,
-        className: cn("group flex items-center gap-1 tracking-tight hover:text-muted-foreground", socialLinkClassName),
-        children: [
-          item.label,
-          " ",
-          /* @__PURE__ */ jsx(
-            DynamicIcon,
-            {
-              name: "lucide/arrow-up-right",
-              size: 14,
-              className: "group-hover:text-muted-foreground/50"
-            }
-          )
-        ]
+        label: item.label,
+        iconNameOverride: item.iconNameOverride,
+        iconSize: 14,
+        className: cn("group flex items-center gap-1 tracking-tight hover:text-muted-foreground", socialLinkClassName)
       }
-    ) }, item.label));
+    ) }, idx));
   }, [socialLinks, socialLinkClassName]);
   const footerLinksContent = useMemo(() => {
     if (!footerLinks || footerLinks.length === 0) return null;
@@ -4462,17 +4605,17 @@ function FooterCtaSocial({
   const socialLinksContent = useMemo(() => {
     if (!socialLinks || socialLinks.length === 0) return null;
     return socialLinks.map((link) => /* @__PURE__ */ jsx(
-      Pressable,
+      SocialLinkIcon,
       {
-        href: link.url,
+        href: link.href,
+        label: link.label,
+        iconNameOverride: link.iconNameOverride,
+        asButton: true,
         variant: "outline",
         size: "icon",
-        asButton: true,
-        className: cn("h-12 w-12 rounded-full", socialLinkClassName),
-        "aria-label": link.label,
-        children: /* @__PURE__ */ jsx(DynamicIcon, { name: link.icon, size: 20 })
+        className: cn("h-12 w-12 rounded-full", socialLinkClassName)
       },
-      link.url
+      link.href
     ));
   }, [socialLinks, socialLinkClassName]);
   return /* @__PURE__ */ jsx(
@@ -4554,7 +4697,6 @@ function FooterNavSocial({
   leftColumnClassName,
   logoWrapperClassName,
   logoClassName,
-  logoTitleClassName,
   navGridClassName,
   navSectionClassName,
   navTitleClassName,
@@ -4596,12 +4738,12 @@ function FooterNavSocial({
   const socialLinksContent = useMemo(() => {
     if (!socialLinks || socialLinks.length === 0) return null;
     return socialLinks.map((social, idx) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-      Pressable,
+      SocialLinkIcon,
       {
         href: social.href,
-        "aria-label": social.label,
-        className: cn("text-muted-foreground transition-colors hover:text-primary", socialLinkClassName),
-        children: /* @__PURE__ */ jsx(DynamicIcon, { name: social.icon, size: 20 })
+        label: social.label,
+        iconNameOverride: social.iconNameOverride,
+        className: cn("text-muted-foreground transition-colors hover:text-primary", socialLinkClassName)
       }
     ) }, idx));
   }, [socialLinks, socialLinkClassName]);
@@ -4620,23 +4762,13 @@ function FooterNavSocial({
       children: /* @__PURE__ */ jsx("div", { className: cn(contentClassName), children: /* @__PURE__ */ jsxs("footer", { children: [
         /* @__PURE__ */ jsxs("div", { className: cn("grid gap-10 lg:grid-cols-2", gridClassName), children: [
           /* @__PURE__ */ jsxs("div", { className: cn(leftColumnClassName), children: [
-            logo && /* @__PURE__ */ jsxs(
-              Pressable,
+            logo && /* @__PURE__ */ jsx(
+              FooterLogo,
               {
-                href: logo.url,
-                className: cn("mb-8 flex items-center gap-2", logoWrapperClassName),
-                children: [
-                  logo.src && /* @__PURE__ */ jsx(
-                    Img,
-                    {
-                      src: logo.src,
-                      alt: logo.alt,
-                      className: cn("h-10", logoClassName),
-                      optixFlowConfig
-                    }
-                  ),
-                  logo.title && /* @__PURE__ */ jsx("span", { className: cn("text-xl font-semibold", logoTitleClassName), children: logo.title })
-                ]
+                logo,
+                logoClassName: cn("mb-8", logoWrapperClassName),
+                logoImageClassName: logoClassName,
+                optixFlowConfig
               }
             ),
             /* @__PURE__ */ jsx("div", { className: cn("grid gap-8 sm:grid-cols-3", navGridClassName), children: sectionsContent })