@opensite/ui 1.3.6 → 1.3.8

package/dist/index.cjs

@@ -6,12 +6,13 @@ var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
 var framerMotion = require('framer-motion');
-var useOnClickOutside = require('@opensite/hooks/core/useOnClickOutside');
+var useOnClickOutside = require('@opensite/hooks/useOnClickOutside');
 var react = require('motion/react');
 var img = require('@page-speed/img');
 var reactSlot = require('@radix-ui/react-slot');
 var classVarianceAuthority = require('class-variance-authority');
 var PopoverPrimitive = require('@radix-ui/react-popover');
+var usePlatformFromUrl = require('@opensite/hooks/usePlatformFromUrl');
 var TabsPrimitive = require('@radix-ui/react-tabs');
 var forms = require('@page-speed/forms');
 var inputs = require('@page-speed/forms/inputs');
@@ -1687,7 +1688,26 @@ var platformIconMap = {
   yelp: "cib/yelp",
   spotify: "cib/spotify",
   apple: "cib/apple",
-  x: "line-md/twitter-x"
+  x: "line-md/twitter-x",
+  github: "cib/github",
+  snapchat: "cib/snapchat",
+  discord: "cib/discord",
+  dev: "simple-icons/devdotto",
+  substack: "simple-icons/substack",
+  reddit: "cib/reddit",
+  pinterest: "cib/pinterest",
+  threads: "simple-icons/threads",
+  twitch: "cib/twitch",
+  whatsapp: "cib/whatsapp",
+  telegram: "cib/telegram",
+  medium: "simple-icons/medium",
+  patreon: "cib/patreon",
+  onlyfans: "simple-icons/onlyfans",
+  eventbrite: "cib/eventbrite",
+  npmjs: "simple-icons/npm",
+  crates: "cib/rust",
+  rubygems: "cib/rubygems",
+  unknown: "icon-park-solid/circular-connection"
 };
 var SocialLinkIcon = React4__namespace.forwardRef(
   ({
@@ -1695,12 +1715,22 @@ var SocialLinkIcon = React4__namespace.forwardRef(
     label,
     iconSize = 20,
     iconColor,
+    href,
     iconClassName,
     className,
+    iconNameOverride,
     ...pressableProps
   }, ref) => {
-    const iconName = platformIconMap[platformName];
-    const accessibleLabel = label || platformName;
+    const platform = usePlatformFromUrl.usePlatformFromUrl(href);
+    const smartPlatformName = React4__namespace.useMemo(() => {
+      return platform || platformName;
+    }, [platform, platformName]);
+    const iconName = React4__namespace.useMemo(() => {
+      return iconNameOverride || platformIconMap[smartPlatformName];
+    }, [iconNameOverride, smartPlatformName]);
+    const accessibleLabel = React4__namespace.useMemo(() => {
+      return label || platformName;
+    }, [label, platformName]);
     return /* @__PURE__ */ jsxRuntime.jsx(
       Pressable,
       {
@@ -2891,6 +2921,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__ */ jsxRuntime.jsx(jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      logo.light && /* @__PURE__ */ jsxRuntime.jsx(
+        img.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__ */ jsxRuntime.jsx(
+        img.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__ */ jsxRuntime.jsx(
+      img.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+      Pressable,
+      {
+        href: logo.url,
+        className: cn("inline-flex items-center", logoClassName),
+        children: logoContent
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("inline-flex items-center", logoClassName), children: logoContent });
+};
 function FooterLinksGrid({
   logo,
   className,
@@ -2901,10 +3002,11 @@ function FooterLinksGrid({
   attributionHref,
   bottomLinks,
   background,
-  spacing,
   pattern,
   patternOpacity,
-  optixFlowConfig
+  optixFlowConfig,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-6 md:py-32"
 }) {
   const currentYear = React4.useMemo(() => (/* @__PURE__ */ new Date()).getFullYear(), []);
   const copyrightText = copyright ?? `\xA9 ${currentYear}`;
@@ -2916,36 +3018,26 @@ function FooterLinksGrid({
       pattern,
       patternOpacity,
       className: cn(className),
+      containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsxs("footer", { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-8 lg:grid-cols-6", children: [
-          (logo || tagline) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-2 mb-8 lg:mb-0", children: [
-            logo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 lg:justify-start", children: /* @__PURE__ */ jsxRuntime.jsxs(Pressable, { href: logo.url, className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                img.Img,
-                {
-                  src: logo.src,
-                  alt: logo.alt,
-                  className: "h-10 dark:invert",
-                  optixFlowConfig
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xl font-semibold", children: logo.title })
-            ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4 md:gap-8 md:grid-cols-6", children: [
+          (logo || tagline) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex space-y-2 col-span-2 flex-col mb-6 md:mb-0 pr-0 md:pr-6", children: [
+            logo && /* @__PURE__ */ jsxRuntime.jsx(
+              FooterLogo,
+              {
+                logo,
+                logoClassName: "flex items-center gap-2 lg:justify-start",
+                optixFlowConfig
+              }
+            ),
             tagline && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 font-bold", children: tagline })
           ] }),
           menuItems && menuItems.length > 0 && menuItems.map((section, sectionIdx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4 font-bold", children: section.title }),
-            /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-4 text-muted-foreground", children: section.links.map((link, linkIdx) => /* @__PURE__ */ jsxRuntime.jsx(
-              "li",
-              {
-                className: "font-medium hover:text-primary",
-                children: /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: link.url, children: link.text })
-              },
-              linkIdx
-            )) })
+            /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-4", children: section.links.map((link, linkIdx) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "text-sm font-medium", children: /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: link.url, children: link.text }) }, linkIdx)) })
           ] }, sectionIdx))
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-24 flex flex-col justify-between gap-4 border-t pt-8 text-sm font-medium text-muted-foreground md:flex-row md:items-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-24 flex flex-col justify-between gap-4 border-t pt-8 text-sm font-medium md:flex-row md:items-center", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 md:flex-row md:items-center md:gap-4", children: [
             /* @__PURE__ */ jsxRuntime.jsx("p", { children: copyrightText }),
             attributionText && /* @__PURE__ */ jsxRuntime.jsx(
@@ -2957,7 +3049,7 @@ function FooterLinksGrid({
               }
             )
           ] }),
-          bottomLinks && bottomLinks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex gap-4", children: bottomLinks.map((link, linkIdx) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "underline hover:text-primary", children: /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: link.url, children: link.text }) }, linkIdx)) })
+          bottomLinks && bottomLinks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex gap-4", children: bottomLinks.map((link, linkIdx) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "underline", children: /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: link.url, children: link.text }) }, linkIdx)) })
         ] })
       ] })
     }
@@ -2980,7 +3072,6 @@ function FooterSocialNewsletter({
   contentClassName,
   logoWrapperClassName,
   logoClassName,
-  logoTitleClassName,
   gridClassName,
   navSectionClassName,
   navTitleClassName,
@@ -2996,7 +3087,8 @@ function FooterSocialNewsletter({
   bottomClassName,
   copyrightClassName,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   optixFlowConfig
@@ -3011,82 +3103,150 @@ function FooterSocialNewsletter({
       pattern,
       patternOpacity,
       className: cn(className),
+      containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(contentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("footer", { children: [
-        logo && /* @__PURE__ */ jsxRuntime.jsxs(Pressable, { href: logo.url, className: cn("flex items-center gap-2", logoWrapperClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            img.Img,
+        logo && /* @__PURE__ */ jsxRuntime.jsx(
+          FooterLogo,
+          {
+            logo,
+            logoClassName: cn(
+              "flex items-center gap-2",
+              logoWrapperClassName
+            ),
+            logoImageClassName: cn("h-10", logoClassName),
+            optixFlowConfig
+          }
+        ),
+        sections && sections.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+          "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__ */ jsxRuntime.jsxs("div", { className: cn(navSectionClassName), children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-4 font-bold", navTitleClassName), children: section.title }),
+              /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("space-y-4", navLinksClassName), children: section.links.map((link, linkIdx) => /* @__PURE__ */ jsxRuntime.jsx(
+                "li",
+                {
+                  className: cn("font-medium", navLinkClassName),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: link.href, children: link.name })
+                },
+                linkIdx
+              )) })
+            ] }, sectionIdx))
+          }
+        ) : null,
+        (socialLinks && socialLinks.length > 0 || newsletterLabel || newsletterButtonText) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("lg:col-span-2 xl:col-span-1"), children: [
+          (newsletterLabel || newsletterButtonText) && /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
             {
-              src: logo.src,
-              alt: logo.alt,
-              className: cn("h-10", logoClassName),
-              optixFlowConfig
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-xl font-semibold", logoTitleClassName), children: logo.title })
-        ] }),
-        (sections && sections.length > 0 || socialLinks && socialLinks.length > 0 || newsletterLabel || newsletterButtonText) && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: cn(navSectionClassName), children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-4 font-bold", navTitleClassName), children: section.title }),
-            /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("space-y-4 text-muted-foreground", navLinksClassName), children: section.links.map((link, linkIdx) => /* @__PURE__ */ jsxRuntime.jsx(
-              "li",
-              {
-                className: cn("font-medium hover:text-primary", navLinkClassName),
-                children: /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: link.href, children: link.name })
-              },
-              linkIdx
-            )) })
-          ] }, 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 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: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "input",
+              className: cn(
+                "grid w-full max-w-sm items-center gap-1.5",
+                newsletterClassName
+              ),
+              children: [
+                newsletterLabel && /* @__PURE__ */ jsxRuntime.jsx(
+                  "label",
                   {
-                    type: "email",
-                    id: "newsletter-email",
-                    placeholder: newsletterPlaceholder || "Email",
-                    className: cn("flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", newsletterInputClassName)
+                    htmlFor: "newsletter-email",
+                    className: "text-sm font-medium",
+                    children: newsletterLabel
                   }
                 ),
-                newsletterButtonText && /* @__PURE__ */ jsxRuntime.jsx(
-                  Pressable,
-                  {
-                    onClick: (e) => {
-                      e.preventDefault();
-                    },
-                    variant: "default",
-                    size: "default",
-                    asButton: true,
-                    className: cn(newsletterButtonClassName),
-                    children: newsletterButtonText
-                  }
-                )
-              ] }),
-              (privacyConsentText || privacyLinkText) && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cn("mt-1 text-xs text-muted-foreground", privacyClassName), children: [
-                privacyConsentText,
-                privacyLinkText && /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: privacyLinkUrl || "#", className: "ml-1 text-primary hover:underline", children: privacyLinkText })
-              ] })
-            ] })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-20 flex flex-col justify-between gap-4 border-t pt-8 text-sm font-medium text-muted-foreground md:flex-row md:items-center", bottomClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-2 md:flex-row md:items-center md:gap-4", copyrightClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { children: copyrightText }),
-          attributionText && /* @__PURE__ */ jsxRuntime.jsx(
-            Pressable,
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-sm items-center space-x-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "input",
+                    {
+                      type: "email",
+                      id: "newsletter-email",
+                      placeholder: newsletterPlaceholder || "Email",
+                      className: cn(
+                        "flex h-10 w-full rounded-md border border-input  px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium  focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+                        newsletterInputClassName
+                      )
+                    }
+                  ),
+                  newsletterButtonText && /* @__PURE__ */ jsxRuntime.jsx(
+                    Pressable,
+                    {
+                      onClick: (e) => {
+                        e.preventDefault();
+                      },
+                      variant: "default",
+                      size: "default",
+                      asButton: true,
+                      className: cn(newsletterButtonClassName),
+                      children: newsletterButtonText
+                    }
+                  )
+                ] }),
+                (privacyConsentText || privacyLinkText) && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cn("mt-1 text-xs ", privacyClassName), children: [
+                  privacyConsentText,
+                  privacyLinkText && /* @__PURE__ */ jsxRuntime.jsx(
+                    Pressable,
+                    {
+                      href: privacyLinkUrl || "#",
+                      className: "ml-1  hover:underline",
+                      children: privacyLinkText
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          socialLinks && socialLinks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("", socialColumnClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
+            "ul",
             {
-              href: attributionHref || "https://opensite.ai",
-              className: "hover:text-primary",
-              children: attributionText
+              className: cn(
+                "mb-10 flex items-center gap-2",
+                socialLinksClassName
+              ),
+              children: socialLinks.map((social, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "font-medium", children: /* @__PURE__ */ jsxRuntime.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",
+                    socialLinkClassName
+                  )
+                }
+              ) }, idx))
             }
-          )
-        ] }) })
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "mt-20 flex flex-col justify-between gap-4 border-t pt-8 text-sm font-medium  md:flex-row md:items-center",
+              bottomClassName
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex flex-col gap-2 md:flex-row md:items-center md:gap-4",
+                  copyrightClassName
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { children: copyrightText }),
+                  attributionText && /* @__PURE__ */ jsxRuntime.jsx(
+                    Pressable,
+                    {
+                      href: attributionHref || "https://opensite.ai",
+                      className: "hover:text-primary",
+                      children: attributionText
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        )
       ] }) })
     }
   );
@@ -3122,12 +3282,21 @@ 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: 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]);
+    return socialLinks.map((social, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "font-medium", children: /* @__PURE__ */ jsxRuntime.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 = 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: cn(
@@ -3146,18 +3315,15 @@ function FooterSocialApps({
       className: cn(className),
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("footer", { children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-between gap-10 lg:flex-row lg:gap-20", children: [
-          logo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-6", children: /* @__PURE__ */ jsxRuntime.jsxs(Pressable, { href: logo.url, className: "flex items-center gap-2", children: [
-            logo.src && /* @__PURE__ */ jsxRuntime.jsx(
-              img.Img,
-              {
-                src: logo.src,
-                alt: logo.alt,
-                className: "h-10",
-                optixFlowConfig
-              }
-            ),
-            logo.title && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xl font-semibold", children: logo.title })
-          ] }) }),
+          logo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-6", children: /* @__PURE__ */ jsxRuntime.jsx(
+            FooterLogo,
+            {
+              logo,
+              logoClassName: "flex items-center gap-2",
+              logoImageClassName: "h-10",
+              optixFlowConfig
+            }
+          ) }),
           sections && sections.length > 0 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6", children: [
             socialLinks && socialLinks.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -3189,7 +3355,6 @@ function FooterSimpleCentered({
   brandClassName,
   logoWrapperClassName,
   logoClassName,
-  logoTitleClassName,
   taglineClassName,
   sitemapWrapperClassName,
   sitemapSectionClassName,
@@ -3258,32 +3423,21 @@ function FooterSimpleCentered({
             ),
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("max-w-96", brandClassName), children: [
-                (logo?.src || logo?.title) && /* @__PURE__ */ jsxRuntime.jsxs(
+                (logo?.src || logo?.title) && /* @__PURE__ */ jsxRuntime.jsx(
                   "div",
                   {
                     className: cn(
                       "mb-6 flex items-center gap-3",
                       logoWrapperClassName
                     ),
-                    children: [
-                      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,
-                          alt: logo?.alt,
-                          className: cn(
-                            "size-12 h-full w-full object-contain object-center",
-                            logoClassName
-                          ),
-                          optixFlowConfig
-                        }
-                      ) }),
-                      logo?.title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("text-xl font-bold", logoTitleClassName), children: logo.title })
-                    ]
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      FooterLogo,
+                      {
+                        logo,
+                        logoClassName,
+                        optixFlowConfig
+                      }
+                    )
                   }
                 ),
                 tagline && /* @__PURE__ */ jsxRuntime.jsx(
@@ -3372,7 +3526,6 @@ function FooterBrandDescription({
   brandColumnClassName,
   logoWrapperClassName,
   logoClassName,
-  logoTitleClassName,
   descriptionClassName,
   socialLinksClassName,
   socialLinkClassName,
@@ -3402,51 +3555,158 @@ function FooterBrandDescription({
       patternOpacity,
       className: cn(className),
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(contentClassName), children: [
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: cn("flex w-full flex-col justify-between gap-6 lg:items-start", brandColumnClassName), children: [
-            logo && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2 lg:justify-start", logoWrapperClassName), children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: logo.url, children: /* @__PURE__ */ jsxRuntime.jsx(
-                img.Img,
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        className: cn(
+                          "flex items-center gap-2 lg:justify-start",
+                          logoWrapperClassName
+                        ),
+                        children: /* @__PURE__ */ jsxRuntime.jsx(
+                          FooterLogo,
+                          {
+                            logo,
+                            logoImageClassName: logoClassName,
+                            optixFlowConfig
+                          }
+                        )
+                      }
+                    ),
+                    description && /* @__PURE__ */ jsxRuntime.jsx(
+                      "p",
+                      {
+                        className: cn(
+                          "max-w-[70%] text-sm text-muted-foreground",
+                          descriptionClassName
+                        ),
+                        children: description
+                      }
+                    ),
+                    socialLinks && socialLinks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                      "ul",
+                      {
+                        className: cn(
+                          "flex items-center space-x-6 text-muted-foreground",
+                          socialLinksClassName
+                        ),
+                        children: socialLinks.map((social, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
+                          SocialLinkIcon,
+                          {
+                            href: social.href,
+                            label: social.label,
+                            iconNameOverride: social.iconNameOverride,
+                            className: cn(
+                              "font-medium hover:text-primary",
+                              socialLinkClassName
+                            )
+                          }
+                        ) }, idx))
+                      }
+                    )
+                  ]
                 }
-              ) }),
-              /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-xl font-semibold", logoTitleClassName), children: logo.title })
-            ] }),
-            description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-[70%] text-sm text-muted-foreground", descriptionClassName), children: description }),
-            socialLinks && socialLinks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("flex items-center space-x-6 text-muted-foreground", socialLinksClassName), children: socialLinks.map((social, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: cn("font-medium hover:text-primary", socialLinkClassName), children: /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: social.href, "aria-label": social.label, children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: social.icon, size: 20 }) }) }, idx)) })
-          ] }),
-          sections && sections.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid w-full gap-6 md:grid-cols-3 lg:gap-20", navGridClassName), children: sections.map((section, sectionIdx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(navSectionClassName), children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-4 font-bold", navTitleClassName), children: section.title }),
-            /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("space-y-3 text-sm text-muted-foreground", navLinksClassName), children: section.links.map((link, linkIdx) => /* @__PURE__ */ jsxRuntime.jsx(
-              "li",
-              {
-                className: cn("font-medium hover:text-primary", navLinkClassName),
-                children: /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: link.href, children: link.name })
-              },
-              linkIdx
-            )) })
-          ] }, sectionIdx)) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { children: copyrightText }),
-            attributionText && /* @__PURE__ */ jsxRuntime.jsx(
-              Pressable,
-              {
-                href: attributionHref || "https://opensite.ai",
-                className: "hover:text-primary",
-                target: "_blank",
-                rel: "noopener noreferrer",
-                children: attributionText
-              }
-            )
-          ] }),
-          legalLinks && legalLinks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("order-1 flex flex-col gap-2 md:order-2 md:flex-row", legalLinksClassName), children: legalLinks.map((link, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: cn("hover:text-primary", legalLinkClassName), children: /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: link.href, children: link.name }) }, idx)) })
-        ] })
+              ),
+              sections && sections.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "grid w-full gap-6 md:grid-cols-3 lg:gap-20",
+                    navGridClassName
+                  ),
+                  children: sections.map((section, sectionIdx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(navSectionClassName), children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-4 font-bold", navTitleClassName), children: section.title }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "ul",
+                      {
+                        className: cn(
+                          "space-y-3 text-sm text-muted-foreground",
+                          navLinksClassName
+                        ),
+                        children: section.links.map((link, linkIdx) => /* @__PURE__ */ jsxRuntime.jsx(
+                          "li",
+                          {
+                            className: cn(
+                              "font-medium hover:text-primary",
+                              navLinkClassName
+                            ),
+                            children: /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: link.href, children: link.name })
+                          },
+                          linkIdx
+                        ))
+                      }
+                    )
+                  ] }, sectionIdx))
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { children: copyrightText }),
+                    attributionText && /* @__PURE__ */ jsxRuntime.jsx(
+                      Pressable,
+                      {
+                        href: attributionHref || "https://opensite.ai",
+                        className: "hover:text-primary",
+                        target: "_blank",
+                        rel: "noopener noreferrer",
+                        children: attributionText
+                      }
+                    )
+                  ]
+                }
+              ),
+              legalLinks && legalLinks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                "ul",
+                {
+                  className: cn(
+                    "order-1 flex flex-col gap-2 md:order-2 md:flex-row",
+                    legalLinksClassName
+                  ),
+                  children: legalLinks.map((link, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+                    "li",
+                    {
+                      className: cn("hover:text-primary", legalLinkClassName),
+                      children: /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: link.href, children: link.name })
+                    },
+                    idx
+                  ))
+                }
+              )
+            ]
+          }
+        )
       ] })
     }
   );
@@ -3486,14 +3746,16 @@ function FooterNewsletterGrid({
   }, [sections]);
   const socialLinksContent = React4.useMemo(() => {
     if (!socialLinks || socialLinks.length === 0) return null;
-    return socialLinks.map((social, idx) => /* @__PURE__ */ jsxRuntime.jsx(
-      "li",
+    return socialLinks.map((social, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
+      SocialLinkIcon,
       {
-        className: "font-medium duration-200 hover:scale-110 hover:text-muted-foreground",
-        children: /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: social.href, "aria-label": social.label, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
     Section,
@@ -3506,18 +3768,14 @@ function FooterNewsletterGrid({
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("footer", { children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-4 justify-between gap-10 lg:grid-cols-6 lg:text-left", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-4 flex w-full flex-col gap-6 lg:col-span-2", children: [
-            logo && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 lg:justify-start", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: logo.url, children: logo.src && /* @__PURE__ */ jsxRuntime.jsx(
-                img.Img,
-                {
-                  src: logo.src,
-                  alt: logo.alt,
-                  className: "h-8",
-                  optixFlowConfig
-                }
-              ) }),
-              logo.title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-semibold", children: logo.title })
-            ] }),
+            logo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 lg:justify-start", children: /* @__PURE__ */ jsxRuntime.jsx(
+              FooterLogo,
+              {
+                logo,
+                logoImageClassName: "h-8",
+                optixFlowConfig
+              }
+            ) }),
             description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: description }),
             socialLinks && socialLinks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex items-center space-x-6", children: socialLinksContent })
           ] }),
@@ -3585,7 +3843,6 @@ function FooterCtaBanner({
   brandClassName,
   logoWrapperClassName,
   logoClassName,
-  logoTitleClassName,
   newsletterClassName,
   newsletterInputClassName,
   newsletterButtonClassName,
@@ -3630,23 +3887,13 @@ function FooterCtaBanner({
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-10 lg:grid-cols-5", gridClassName), children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("lg:col-span-2", brandClassName), children: [
-            logo && /* @__PURE__ */ jsxRuntime.jsxs(
-              Pressable,
+            logo && /* @__PURE__ */ jsxRuntime.jsx(
+              FooterLogo,
               {
-                href: logo.url,
-                className: cn("mb-6 flex items-center gap-2", logoWrapperClassName),
-                children: [
-                  logo.src && /* @__PURE__ */ jsxRuntime.jsx(
-                    img.Img,
-                    {
-                      src: logo.src,
-                      alt: logo.alt,
-                      className: cn("h-8 invert", logoClassName),
-                      optixFlowConfig
-                    }
-                  ),
-                  logo.title && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-xl font-semibold", logoTitleClassName), children: logo.title })
-                ]
+                logo,
+                logoClassName: cn("mb-6", logoWrapperClassName),
+                logoImageClassName: logoClassName,
+                optixFlowConfig
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-6", newsletterClassName), children: [
@@ -3671,12 +3918,12 @@ function FooterCtaBanner({
               ] })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("flex items-center gap-4", socialLinksClassName), children: socialLinks?.map((social, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
-              Pressable,
+              SocialLinkIcon,
               {
                 href: social.href,
-                "aria-label": social.label,
-                className: cn("text-muted-foreground transition-colors hover:text-primary", socialLinkClassName),
-                children: /* @__PURE__ */ jsxRuntime.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)) })
           ] }),
@@ -3732,7 +3979,6 @@ function FooterContactCard({
   leftColumnClassName,
   logoWrapperClassName,
   logoClassName,
-  logoTitleClassName,
   headingClassName,
   contactClassName,
   rightColumnClassName,
@@ -3764,23 +4010,13 @@ function FooterContactCard({
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(contentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("footer", { children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-12 lg:grid-cols-2", gridClassName), children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(leftColumnClassName), children: [
-            logo && /* @__PURE__ */ jsxRuntime.jsxs(
-              Pressable,
+            logo && /* @__PURE__ */ jsxRuntime.jsx(
+              FooterLogo,
               {
-                href: logo.url,
-                className: cn("mb-8 flex items-center gap-2", logoWrapperClassName),
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    img.Img,
-                    {
-                      src: logo.src,
-                      alt: logo.alt,
-                      className: cn("h-10", logoClassName),
-                      optixFlowConfig
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-xl font-semibold", logoTitleClassName), children: logo.title })
-                ]
+                logo,
+                logoClassName: cn("mb-8", logoWrapperClassName),
+                logoImageClassName: logoClassName,
+                optixFlowConfig
               }
             ),
             heading && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-8 text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading }),
@@ -3808,17 +4044,17 @@ function FooterContactCard({
             (socialTitle || socialLinks && socialLinks.length > 0) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(socialSectionClassName), children: [
               socialTitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-4 font-medium", socialTitleClassName), children: socialTitle }),
               socialLinks && socialLinks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("flex items-center gap-4", socialLinksClassName), children: socialLinks.map((social, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(DynamicIcon, { name: social.icon, size: 20 })
+                  )
                 }
               ) }, idx)) })
             ] }),
@@ -4033,7 +4269,7 @@ function FooterAnimatedSocial({
 }) {
   const socialLinksContent = React4.useMemo(() => {
     if (!socialLinks || socialLinks.length === 0) return null;
-    return socialLinks.map((link) => /* @__PURE__ */ jsxRuntime.jsx(
+    return socialLinks.map((link, idx) => /* @__PURE__ */ jsxRuntime.jsx(
       framerMotion.motion.div,
       {
         variants: itemVariants,
@@ -4043,26 +4279,18 @@ function FooterAnimatedSocial({
           stiffness: 300,
           damping: 20
         },
-        children: /* @__PURE__ */ jsxRuntime.jsxs(
-          Pressable,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          SocialLinkIcon,
           {
             href: link.href,
-            className: cn("group flex items-center gap-2 py-2 transition-colors hover:text-muted-foreground", socialLinkClassName),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xl font-medium", children: link.name }),
-              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
@@ -4320,25 +4548,16 @@ function FooterNewsletterMinimal({
   }, [navLinks, navLinkClassName]);
   const socialLinksContent = React4.useMemo(() => {
     if (!socialLinks || socialLinks.length === 0) return null;
-    return socialLinks.map((item) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
-      Pressable,
+    return socialLinks.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
+      SocialLinkIcon,
       {
         href: item.href,
-        className: cn("group flex items-center gap-1 tracking-tight hover:text-muted-foreground", socialLinkClassName),
-        children: [
-          item.label,
-          " ",
-          /* @__PURE__ */ jsxRuntime.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 = React4.useMemo(() => {
     if (!footerLinks || footerLinks.length === 0) return null;
@@ -4516,17 +4735,17 @@ function FooterCtaSocial({
   const socialLinksContent = React4.useMemo(() => {
     if (!socialLinks || socialLinks.length === 0) return null;
     return socialLinks.map((link) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(DynamicIcon, { name: link.icon, size: 20 })
+        className: cn("h-12 w-12 rounded-full", socialLinkClassName)
       },
-      link.url
+      link.href
     ));
   }, [socialLinks, socialLinkClassName]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -4608,7 +4827,6 @@ function FooterNavSocial({
   leftColumnClassName,
   logoWrapperClassName,
   logoClassName,
-  logoTitleClassName,
   navGridClassName,
   navSectionClassName,
   navTitleClassName,
@@ -4650,12 +4868,12 @@ function FooterNavSocial({
   const socialLinksContent = React4.useMemo(() => {
     if (!socialLinks || socialLinks.length === 0) return null;
     return socialLinks.map((social, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
-      Pressable,
+      SocialLinkIcon,
       {
         href: social.href,
-        "aria-label": social.label,
-        className: cn("text-muted-foreground transition-colors hover:text-primary", socialLinkClassName),
-        children: /* @__PURE__ */ jsxRuntime.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]);
@@ -4674,23 +4892,13 @@ function FooterNavSocial({
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(contentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("footer", { children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-10 lg:grid-cols-2", gridClassName), children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(leftColumnClassName), children: [
-            logo && /* @__PURE__ */ jsxRuntime.jsxs(
-              Pressable,
+            logo && /* @__PURE__ */ jsxRuntime.jsx(
+              FooterLogo,
               {
-                href: logo.url,
-                className: cn("mb-8 flex items-center gap-2", logoWrapperClassName),
-                children: [
-                  logo.src && /* @__PURE__ */ jsxRuntime.jsx(
-                    img.Img,
-                    {
-                      src: logo.src,
-                      alt: logo.alt,
-                      className: cn("h-10", logoClassName),
-                      optixFlowConfig
-                    }
-                  ),
-                  logo.title && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-xl font-semibold", logoTitleClassName), children: logo.title })
-                ]
+                logo,
+                logoClassName: cn("mb-8", logoWrapperClassName),
+                logoImageClassName: logoClassName,
+                optixFlowConfig
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-8 sm:grid-cols-3", navGridClassName), children: sectionsContent })