@opensite/ui 0.9.1 → 0.9.4

package/dist/registry.cjs

@@ -57234,7 +57234,7 @@ function getNavbarLayoutClasses(layoutVariant = "fullScreenContainerizedLinks",
     // Navigation wrapper classes (for border and shadow)
     navWrapperClasses: cn(
       "w-full",
-      isFloatingBar ? "border border-border/50 shadow-sm rounded-full" : "border-b border-border/50 shadow-sm"
+      isFloatingBar ? "border border-border/50 shadow-sm rounded-full" : "border-b border-border/50 shadow-sm  flex justify-center"
     ),
     // Section container configuration for full-width navbars
     sectionContainerClassName: "px-0 sm:px-0 lg:px-0",
@@ -57878,13 +57878,16 @@ var NavbarMegaMenu = ({
       Pressable,
       {
         href: logo.url || "/",
-        className: cn("flex items-center gap-2", logoClassName),
+        className: cn("flex items-center h-16 py-2", logoClassName),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             img.Img,
             {
               src: logo.desktopSrc,
-              className: cn("hidden h-7 dark:invert md:block", logo.className),
+              className: cn(
+                "hidden h-full w-auto object-contain dark:invert md:block",
+                logo.className
+              ),
               alt: logo.alt || "Logo",
               optixFlowConfig
             }
@@ -57893,7 +57896,10 @@ var NavbarMegaMenu = ({
             img.Img,
             {
               src: logo.mobileSrc,
-              className: cn("h-7 dark:invert md:hidden", logo.className),
+              className: cn(
+                "h-full w-auto object-contain dark:invert md:hidden",
+                logo.className
+              ),
               alt: logo.alt || "Logo",
               optixFlowConfig
             }
@@ -58048,7 +58054,13 @@ var NavbarMegaMenu = ({
                           onClick: () => setSubmenuIndex(index),
                           children: [
                             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children: link.label }),
-                            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 16 }) })
+                            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+                              DynamicIcon,
+                              {
+                                name: "lucide/chevron-right",
+                                size: 16
+                              }
+                            ) })
                           ]
                         },
                         `mobile-menu-link-${index}`
@@ -58264,6 +58276,7 @@ var NavbarEnterpriseMega = ({
       MobileNavigationMenu,
       {
         open,
+        setOpen,
         menuLinks: menuLinks ?? [],
         actionsClassName,
         actions,
@@ -58283,7 +58296,7 @@ var DesktopMenuItem2 = ({
   if (hasDropdown) {
     return /* @__PURE__ */ jsxRuntime.jsxs(NavigationMenuItem, { value: `${index}`, children: [
       /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuTrigger, { className: "h-auto bg-transparent px-3 py-2 font-normal hover:bg-muted focus:bg-muted data-[state=open]:bg-muted/50", children: item.label }),
-      /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuContent, { className: "rounded-xl! border-0! p-0!", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-dvw px-8 pt-6 pb-12", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container", children: renderDropdownContent(
+      /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuContent, { className: "!rounded-xl !border-0 !p-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-dvw px-8 pt-6 pb-12", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container", children: renderDropdownContent(
         { ...item, layout: effectiveLayout },
         optixFlowConfig
       ) }) }) })
@@ -58381,7 +58394,7 @@ var SolutionsMenu = ({
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-xs text-primary-foreground/85", children: featuredHeroCard.description })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative aspect-2/1 overflow-clip rounded-t pl-6 lg:max-w-64 lg:pl-0 xl:max-w-96", children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative aspect-2/1 overflow-clip rounded-t pl-6 lg:max-w-80 lg:pl-0 xl:max-w-[30rem]", children: /* @__PURE__ */ jsxRuntime.jsx(
           img.Img,
           {
             src: featuredHeroCard.image,
@@ -58472,7 +58485,7 @@ var ProductsMenu = ({
   featuredHeroCard,
   optixFlowConfig
 }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-y-12 lg:flex lg:space-x-8", children: [
-  featuredHeroCard && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full shrink-0 lg:max-w-[18rem]", children: /* @__PURE__ */ jsxRuntime.jsx(
+  featuredHeroCard && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full shrink-0 lg:max-w-[24rem]", children: /* @__PURE__ */ jsxRuntime.jsx(
     Pressable,
     {
       href: featuredHeroCard.href,
@@ -58481,7 +58494,7 @@ var ProductsMenu = ({
         featuredHeroCard.variant === "accent" ? "bg-accent text-accent-foreground" : "bg-primary"
       ),
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative z-10 flex w-full flex-col text-left", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex aspect-2/1 max-h-44 w-full flex-1 justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex aspect-2/1 max-h-64 w-full flex-1 justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
           img.Img,
           {
             src: featuredHeroCard.image,
@@ -58515,12 +58528,12 @@ var ProductsMenu = ({
         href: product.href,
         className: "group flex flex-row items-center space-x-6 border-b border-border py-5 text-left sm:py-7 lg:space-x-4 lg:border-0 lg:py-2",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex aspect-square w-6 shrink-0 items-center justify-center overflow-clip rounded md:size-9 md:p-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex aspect-square w-16 shrink-0 items-center justify-center overflow-clip rounded md:size-20 md:p-2", children: /* @__PURE__ */ jsxRuntime.jsx(
             img.Img,
             {
               src: product.image,
               alt: product.title,
-              className: "dark:invert",
+              className: "object-cover",
               optixFlowConfig
             }
           ) }),
@@ -58847,6 +58860,7 @@ var renderMobileDropdownContent = (item) => {
 };
 var MobileNavigationMenu = ({
   open,
+  setOpen,
   menuLinks,
   actionsClassName,
   actions,
@@ -58881,12 +58895,12 @@ var MobileNavigationMenu = ({
       );
     });
   }, [actionsSlot, actions]);
-  return /* @__PURE__ */ jsxRuntime.jsx(Sheet, { open, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(Sheet, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxRuntime.jsx(
     SheetContent,
     {
       "aria-describedby": void 0,
       side: "top",
-      className: "inset-0 z-998 h-dvh w-full bg-background pt-16 [&>button]:hidden",
+      className: "inset-0 z-998 h-dvh w-full bg-background pt-16",
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full overflow-y-auto pt-4 pb-20", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "container", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -m-px h-px w-px overflow-hidden border-0 mask-clip-border p-0 text-nowrap whitespace-nowrap", children: /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { className: "text-primary", children: "Mobile Navigation" }) }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col gap-4", actionsClassName), children: renderActions }),
@@ -96145,7 +96159,6 @@ function LinkTreeBlock({
               {
                 className: cn(
                   "max-w-xs text-balance text-sm",
-                  getTextColor(resolvedBackground, "muted"),
                   taglineClassName
                 ),
                 children: brandTagline
@@ -96166,7 +96179,6 @@ function LinkTreeBlock({
     verifiedIcon,
     verifiedIconClassName,
     brandName,
-    resolvedBackground,
     nameClassName,
     brandTagline,
     taglineClassName
@@ -96244,7 +96256,7 @@ function LinkTreeBlock({
                 {
                   className: cn(
                     "mt-0.5 block truncate text-xs",
-                    isFeatured ? "text-primary-foreground/70" : getTextColor(resolvedBackground, "muted"),
+                    isFeatured ? "text-primary-foreground/70" : "",
                     linkDescriptionClassName
                   ),
                   children: description
@@ -96266,7 +96278,7 @@ function LinkTreeBlock({
                 size: 16,
                 className: cn(
                   "shrink-0 transition-transform group-hover:translate-x-0.5",
-                  isFeatured ? "text-primary-foreground/70" : getTextColor(resolvedBackground, "muted"),
+                  isFeatured ? "text-primary-foreground/70" : "",
                   linkChevronClassName
                 )
               }
@@ -96281,7 +96293,6 @@ function LinkTreeBlock({
     links,
     linksClassName,
     linkIconClassName,
-    resolvedBackground,
     linkClassName,
     featuredLinkClassName,
     linkLabelClassName,
@@ -96315,7 +96326,6 @@ function LinkTreeBlock({
                 "group relative aspect-square overflow-hidden rounded-lg cursor-pointer",
                 "transition-all duration-200 hover:scale-[1.02]",
                 "ring-1",
-                getBorderColor(resolvedBackground, "muted"),
                 mediaGalleryItemClassName,
                 item.className
               ),
@@ -96433,8 +96443,6 @@ function LinkTreeBlock({
               className: cn(
                 "flex h-12 w-12 items-center justify-center rounded-full p-2.5 transition-all duration-200",
                 "hover:scale-110 active:scale-95",
-                getNestedCardBg(resolvedBackground),
-                getNestedCardTextColor(resolvedBackground),
                 socialLinkClassName,
                 social.className
               ),
@@ -96450,7 +96458,6 @@ function LinkTreeBlock({
     socialLinks,
     socialLinksClassName,
     socialIconClassName,
-    resolvedBackground,
     socialLinkClassName
   ]);
   const renderFooter = React52.useMemo(() => {
@@ -97614,7 +97621,14 @@ function LinkPageBentoLayout({
         social.id ?? index
       );
     }) });
-  }, [socialLinksSlot, socialLinks, socialLinksClassName, socialIconClassName, resolvedBackground, socialLinkClassName]);
+  }, [
+    socialLinksSlot,
+    socialLinks,
+    socialLinksClassName,
+    socialIconClassName,
+    resolvedBackground,
+    socialLinkClassName
+  ]);
   const renderFeaturedLinks = React52.useMemo(() => {
     if (featuredLinksSlot) return featuredLinksSlot;
     if (!featuredLinks || featuredLinks.length === 0) return null;
@@ -97723,7 +97737,18 @@ function LinkPageBentoLayout({
         link.id ?? index
       );
     });
-  }, [featuredLinksSlot, featuredLinks, resolvedBackground, featuredLinkClassName, featuredLinkImageClassName, optixFlowConfig, featuredLinkOverlayClassName, featuredLinkIconClassName, featuredLinkLabelClassName, featuredLinkDescriptionClassName]);
+  }, [
+    featuredLinksSlot,
+    featuredLinks,
+    resolvedBackground,
+    featuredLinkClassName,
+    featuredLinkImageClassName,
+    optixFlowConfig,
+    featuredLinkOverlayClassName,
+    featuredLinkIconClassName,
+    featuredLinkLabelClassName,
+    featuredLinkDescriptionClassName
+  ]);
   const renderRegularLinks = React52.useMemo(() => {
     if (regularLinksSlot) return regularLinksSlot;
     if (!regularLinks || regularLinks.length === 0) return null;
@@ -97800,7 +97825,15 @@ function LinkPageBentoLayout({
         link.id ?? index
       );
     });
-  }, [regularLinksSlot, regularLinks, resolvedBackground, regularLinkClassName, regularLinkIconWrapperClassName, regularLinkIconClassName, regularLinkLabelClassName]);
+  }, [
+    regularLinksSlot,
+    regularLinks,
+    resolvedBackground,
+    regularLinkClassName,
+    regularLinkIconWrapperClassName,
+    regularLinkIconClassName,
+    regularLinkLabelClassName
+  ]);
   const renderLinks = React52.useMemo(() => {
     if (linksSlot) return linksSlot;
     if (!links || links.length === 0) return null;
@@ -97810,7 +97843,19 @@ function LinkPageBentoLayout({
       hasFeatured && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid grid-cols-2 gap-3", featuredLinksClassName), children: renderFeaturedLinks }),
       hasRegular && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid grid-cols-2 gap-3", regularLinksClassName), children: renderRegularLinks })
     ] });
-  }, [linksSlot, links, linksClassName, featuredLinksSlot, featuredLinks, featuredLinksClassName, renderFeaturedLinks, regularLinksSlot, regularLinks, regularLinksClassName, renderRegularLinks]);
+  }, [
+    linksSlot,
+    links,
+    linksClassName,
+    featuredLinksSlot,
+    featuredLinks,
+    featuredLinksClassName,
+    renderFeaturedLinks,
+    regularLinksSlot,
+    regularLinks,
+    regularLinksClassName,
+    renderRegularLinks
+  ]);
   const renderProfile = React52.useMemo(() => {
     if (profileSlot) return profileSlot;
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -97840,16 +97885,7 @@ function LinkPageBentoLayout({
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-            name && (typeof name === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-              "h1",
-              {
-                className: cn(
-                  "text-xl font-bold",
-                  nameClassName
-                ),
-                children: name
-              }
-            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: nameClassName, children: name })),
+            name && (typeof name === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-xl font-bold", nameClassName), children: name }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: nameClassName, children: name })),
             bio && (typeof bio === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
               "p",
               {
@@ -97866,7 +97902,19 @@ function LinkPageBentoLayout({
         ]
       }
     );
-  }, [profileSlot, resolvedAvatar, resolvedBackground, avatarClassName, optixFlowConfig, name, nameClassName, bio, bioClassName, renderSocialLinks, headerClassName]);
+  }, [
+    profileSlot,
+    resolvedAvatar,
+    resolvedBackground,
+    avatarClassName,
+    optixFlowConfig,
+    name,
+    nameClassName,
+    bio,
+    bioClassName,
+    renderSocialLinks,
+    headerClassName
+  ]);
   const renderFooter = React52.useMemo(() => {
     if (footerSlot) return footerSlot;
     if (!footerAction) return null;

package/dist/registry.js

@@ -57194,7 +57194,7 @@ function getNavbarLayoutClasses(layoutVariant = "fullScreenContainerizedLinks",
     // Navigation wrapper classes (for border and shadow)
     navWrapperClasses: cn(
       "w-full",
-      isFloatingBar ? "border border-border/50 shadow-sm rounded-full" : "border-b border-border/50 shadow-sm"
+      isFloatingBar ? "border border-border/50 shadow-sm rounded-full" : "border-b border-border/50 shadow-sm  flex justify-center"
     ),
     // Section container configuration for full-width navbars
     sectionContainerClassName: "px-0 sm:px-0 lg:px-0",
@@ -57838,13 +57838,16 @@ var NavbarMegaMenu = ({
       Pressable,
       {
         href: logo.url || "/",
-        className: cn("flex items-center gap-2", logoClassName),
+        className: cn("flex items-center h-16 py-2", logoClassName),
         children: [
           /* @__PURE__ */ jsx(
             Img,
             {
               src: logo.desktopSrc,
-              className: cn("hidden h-7 dark:invert md:block", logo.className),
+              className: cn(
+                "hidden h-full w-auto object-contain dark:invert md:block",
+                logo.className
+              ),
               alt: logo.alt || "Logo",
               optixFlowConfig
             }
@@ -57853,7 +57856,10 @@ var NavbarMegaMenu = ({
             Img,
             {
               src: logo.mobileSrc,
-              className: cn("h-7 dark:invert md:hidden", logo.className),
+              className: cn(
+                "h-full w-auto object-contain dark:invert md:hidden",
+                logo.className
+              ),
               alt: logo.alt || "Logo",
               optixFlowConfig
             }
@@ -58008,7 +58014,13 @@ var NavbarMegaMenu = ({
                           onClick: () => setSubmenuIndex(index),
                           children: [
                             /* @__PURE__ */ jsx("span", { className: "flex-1", children: link.label }),
-                            /* @__PURE__ */ jsx("span", { className: "shrink-0", children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-right", size: 16 }) })
+                            /* @__PURE__ */ jsx("span", { className: "shrink-0", children: /* @__PURE__ */ jsx(
+                              DynamicIcon,
+                              {
+                                name: "lucide/chevron-right",
+                                size: 16
+                              }
+                            ) })
                           ]
                         },
                         `mobile-menu-link-${index}`
@@ -58224,6 +58236,7 @@ var NavbarEnterpriseMega = ({
       MobileNavigationMenu,
       {
         open,
+        setOpen,
         menuLinks: menuLinks ?? [],
         actionsClassName,
         actions,
@@ -58243,7 +58256,7 @@ var DesktopMenuItem2 = ({
   if (hasDropdown) {
     return /* @__PURE__ */ jsxs(NavigationMenuItem, { value: `${index}`, children: [
       /* @__PURE__ */ jsx(NavigationMenuTrigger, { className: "h-auto bg-transparent px-3 py-2 font-normal hover:bg-muted focus:bg-muted data-[state=open]:bg-muted/50", children: item.label }),
-      /* @__PURE__ */ jsx(NavigationMenuContent, { className: "rounded-xl! border-0! p-0!", children: /* @__PURE__ */ jsx("div", { className: "w-dvw px-8 pt-6 pb-12", children: /* @__PURE__ */ jsx("div", { className: "container", children: renderDropdownContent(
+      /* @__PURE__ */ jsx(NavigationMenuContent, { className: "!rounded-xl !border-0 !p-0", children: /* @__PURE__ */ jsx("div", { className: "w-dvw px-8 pt-6 pb-12", children: /* @__PURE__ */ jsx("div", { className: "container", children: renderDropdownContent(
         { ...item, layout: effectiveLayout },
         optixFlowConfig
       ) }) }) })
@@ -58341,7 +58354,7 @@ var SolutionsMenu = ({
           ] }),
           /* @__PURE__ */ jsx("p", { className: "mt-2 text-xs text-primary-foreground/85", children: featuredHeroCard.description })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "relative aspect-2/1 overflow-clip rounded-t pl-6 lg:max-w-64 lg:pl-0 xl:max-w-96", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: "relative aspect-2/1 overflow-clip rounded-t pl-6 lg:max-w-80 lg:pl-0 xl:max-w-[30rem]", children: /* @__PURE__ */ jsx(
           Img,
           {
             src: featuredHeroCard.image,
@@ -58432,7 +58445,7 @@ var ProductsMenu = ({
   featuredHeroCard,
   optixFlowConfig
 }) => /* @__PURE__ */ jsxs("div", { className: "grid gap-y-12 lg:flex lg:space-x-8", children: [
-  featuredHeroCard && /* @__PURE__ */ jsx("div", { className: "w-full shrink-0 lg:max-w-[18rem]", children: /* @__PURE__ */ jsx(
+  featuredHeroCard && /* @__PURE__ */ jsx("div", { className: "w-full shrink-0 lg:max-w-[24rem]", children: /* @__PURE__ */ jsx(
     Pressable,
     {
       href: featuredHeroCard.href,
@@ -58441,7 +58454,7 @@ var ProductsMenu = ({
         featuredHeroCard.variant === "accent" ? "bg-accent text-accent-foreground" : "bg-primary"
       ),
       children: /* @__PURE__ */ jsxs("div", { className: "relative z-10 flex w-full flex-col text-left", children: [
-        /* @__PURE__ */ jsx("div", { className: "relative flex aspect-2/1 max-h-44 w-full flex-1 justify-center", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: "relative flex aspect-2/1 max-h-64 w-full flex-1 justify-center", children: /* @__PURE__ */ jsx(
           Img,
           {
             src: featuredHeroCard.image,
@@ -58475,12 +58488,12 @@ var ProductsMenu = ({
         href: product.href,
         className: "group flex flex-row items-center space-x-6 border-b border-border py-5 text-left sm:py-7 lg:space-x-4 lg:border-0 lg:py-2",
         children: [
-          /* @__PURE__ */ jsx("div", { className: "relative flex aspect-square w-6 shrink-0 items-center justify-center overflow-clip rounded md:size-9 md:p-2", children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("div", { className: "relative flex aspect-square w-16 shrink-0 items-center justify-center overflow-clip rounded md:size-20 md:p-2", children: /* @__PURE__ */ jsx(
             Img,
             {
               src: product.image,
               alt: product.title,
-              className: "dark:invert",
+              className: "object-cover",
               optixFlowConfig
             }
           ) }),
@@ -58807,6 +58820,7 @@ var renderMobileDropdownContent = (item) => {
 };
 var MobileNavigationMenu = ({
   open,
+  setOpen,
   menuLinks,
   actionsClassName,
   actions,
@@ -58841,12 +58855,12 @@ var MobileNavigationMenu = ({
       );
     });
   }, [actionsSlot, actions]);
-  return /* @__PURE__ */ jsx(Sheet, { open, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Sheet, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsx(
     SheetContent,
     {
       "aria-describedby": void 0,
       side: "top",
-      className: "inset-0 z-998 h-dvh w-full bg-background pt-16 [&>button]:hidden",
+      className: "inset-0 z-998 h-dvh w-full bg-background pt-16",
       children: /* @__PURE__ */ jsx("div", { className: "h-full overflow-y-auto pt-4 pb-20", children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
         /* @__PURE__ */ jsx("div", { className: "absolute -m-px h-px w-px overflow-hidden border-0 mask-clip-border p-0 text-nowrap whitespace-nowrap", children: /* @__PURE__ */ jsx(SheetTitle, { className: "text-primary", children: "Mobile Navigation" }) }),
         /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-4", actionsClassName), children: renderActions }),
@@ -96105,7 +96119,6 @@ function LinkTreeBlock({
               {
                 className: cn(
                   "max-w-xs text-balance text-sm",
-                  getTextColor(resolvedBackground, "muted"),
                   taglineClassName
                 ),
                 children: brandTagline
@@ -96126,7 +96139,6 @@ function LinkTreeBlock({
     verifiedIcon,
     verifiedIconClassName,
     brandName,
-    resolvedBackground,
     nameClassName,
     brandTagline,
     taglineClassName
@@ -96204,7 +96216,7 @@ function LinkTreeBlock({
                 {
                   className: cn(
                     "mt-0.5 block truncate text-xs",
-                    isFeatured ? "text-primary-foreground/70" : getTextColor(resolvedBackground, "muted"),
+                    isFeatured ? "text-primary-foreground/70" : "",
                     linkDescriptionClassName
                   ),
                   children: description
@@ -96226,7 +96238,7 @@ function LinkTreeBlock({
                 size: 16,
                 className: cn(
                   "shrink-0 transition-transform group-hover:translate-x-0.5",
-                  isFeatured ? "text-primary-foreground/70" : getTextColor(resolvedBackground, "muted"),
+                  isFeatured ? "text-primary-foreground/70" : "",
                   linkChevronClassName
                 )
               }
@@ -96241,7 +96253,6 @@ function LinkTreeBlock({
     links,
     linksClassName,
     linkIconClassName,
-    resolvedBackground,
     linkClassName,
     featuredLinkClassName,
     linkLabelClassName,
@@ -96275,7 +96286,6 @@ function LinkTreeBlock({
                 "group relative aspect-square overflow-hidden rounded-lg cursor-pointer",
                 "transition-all duration-200 hover:scale-[1.02]",
                 "ring-1",
-                getBorderColor(resolvedBackground, "muted"),
                 mediaGalleryItemClassName,
                 item.className
               ),
@@ -96393,8 +96403,6 @@ function LinkTreeBlock({
               className: cn(
                 "flex h-12 w-12 items-center justify-center rounded-full p-2.5 transition-all duration-200",
                 "hover:scale-110 active:scale-95",
-                getNestedCardBg(resolvedBackground),
-                getNestedCardTextColor(resolvedBackground),
                 socialLinkClassName,
                 social.className
               ),
@@ -96410,7 +96418,6 @@ function LinkTreeBlock({
     socialLinks,
     socialLinksClassName,
     socialIconClassName,
-    resolvedBackground,
     socialLinkClassName
   ]);
   const renderFooter = useMemo$1(() => {
@@ -97574,7 +97581,14 @@ function LinkPageBentoLayout({
         social.id ?? index
       );
     }) });
-  }, [socialLinksSlot, socialLinks, socialLinksClassName, socialIconClassName, resolvedBackground, socialLinkClassName]);
+  }, [
+    socialLinksSlot,
+    socialLinks,
+    socialLinksClassName,
+    socialIconClassName,
+    resolvedBackground,
+    socialLinkClassName
+  ]);
   const renderFeaturedLinks = useMemo$1(() => {
     if (featuredLinksSlot) return featuredLinksSlot;
     if (!featuredLinks || featuredLinks.length === 0) return null;
@@ -97683,7 +97697,18 @@ function LinkPageBentoLayout({
         link.id ?? index
       );
     });
-  }, [featuredLinksSlot, featuredLinks, resolvedBackground, featuredLinkClassName, featuredLinkImageClassName, optixFlowConfig, featuredLinkOverlayClassName, featuredLinkIconClassName, featuredLinkLabelClassName, featuredLinkDescriptionClassName]);
+  }, [
+    featuredLinksSlot,
+    featuredLinks,
+    resolvedBackground,
+    featuredLinkClassName,
+    featuredLinkImageClassName,
+    optixFlowConfig,
+    featuredLinkOverlayClassName,
+    featuredLinkIconClassName,
+    featuredLinkLabelClassName,
+    featuredLinkDescriptionClassName
+  ]);
   const renderRegularLinks = useMemo$1(() => {
     if (regularLinksSlot) return regularLinksSlot;
     if (!regularLinks || regularLinks.length === 0) return null;
@@ -97760,7 +97785,15 @@ function LinkPageBentoLayout({
         link.id ?? index
       );
     });
-  }, [regularLinksSlot, regularLinks, resolvedBackground, regularLinkClassName, regularLinkIconWrapperClassName, regularLinkIconClassName, regularLinkLabelClassName]);
+  }, [
+    regularLinksSlot,
+    regularLinks,
+    resolvedBackground,
+    regularLinkClassName,
+    regularLinkIconWrapperClassName,
+    regularLinkIconClassName,
+    regularLinkLabelClassName
+  ]);
   const renderLinks = useMemo$1(() => {
     if (linksSlot) return linksSlot;
     if (!links || links.length === 0) return null;
@@ -97770,7 +97803,19 @@ function LinkPageBentoLayout({
       hasFeatured && /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-2 gap-3", featuredLinksClassName), children: renderFeaturedLinks }),
       hasRegular && /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-2 gap-3", regularLinksClassName), children: renderRegularLinks })
     ] });
-  }, [linksSlot, links, linksClassName, featuredLinksSlot, featuredLinks, featuredLinksClassName, renderFeaturedLinks, regularLinksSlot, regularLinks, regularLinksClassName, renderRegularLinks]);
+  }, [
+    linksSlot,
+    links,
+    linksClassName,
+    featuredLinksSlot,
+    featuredLinks,
+    featuredLinksClassName,
+    renderFeaturedLinks,
+    regularLinksSlot,
+    regularLinks,
+    regularLinksClassName,
+    renderRegularLinks
+  ]);
   const renderProfile = useMemo$1(() => {
     if (profileSlot) return profileSlot;
     return /* @__PURE__ */ jsxs(
@@ -97800,16 +97845,7 @@ function LinkPageBentoLayout({
             }
           ),
           /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-            name && (typeof name === "string" ? /* @__PURE__ */ jsx(
-              "h1",
-              {
-                className: cn(
-                  "text-xl font-bold",
-                  nameClassName
-                ),
-                children: name
-              }
-            ) : /* @__PURE__ */ jsx("div", { className: nameClassName, children: name })),
+            name && (typeof name === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-xl font-bold", nameClassName), children: name }) : /* @__PURE__ */ jsx("div", { className: nameClassName, children: name })),
             bio && (typeof bio === "string" ? /* @__PURE__ */ jsx(
               "p",
               {
@@ -97826,7 +97862,19 @@ function LinkPageBentoLayout({
         ]
       }
     );
-  }, [profileSlot, resolvedAvatar, resolvedBackground, avatarClassName, optixFlowConfig, name, nameClassName, bio, bioClassName, renderSocialLinks, headerClassName]);
+  }, [
+    profileSlot,
+    resolvedAvatar,
+    resolvedBackground,
+    avatarClassName,
+    optixFlowConfig,
+    name,
+    nameClassName,
+    bio,
+    bioClassName,
+    renderSocialLinks,
+    headerClassName
+  ]);
   const renderFooter = useMemo$1(() => {
     if (footerSlot) return footerSlot;
     if (!footerAction) return null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opensite/ui",
-  "version": "0.9.1",
+  "version": "0.9.4",
   "description": "Foundational UI component library for OpenSite Semantic Site Builder with tree-shakable exports and abstract styling",
   "keywords": [
     "react",