@opensite/ui 0.9.1 → 0.9.4

package/dist/link-page-bento-layout.cjs

@@ -1074,7 +1074,14 @@ function LinkPageBentoLayout({
         social.id ?? index
       );
     }) });
-  }, [socialLinksSlot, socialLinks, socialLinksClassName, socialIconClassName, resolvedBackground, socialLinkClassName]);
+  }, [
+    socialLinksSlot,
+    socialLinks,
+    socialLinksClassName,
+    socialIconClassName,
+    resolvedBackground,
+    socialLinkClassName
+  ]);
   const renderFeaturedLinks = React.useMemo(() => {
     if (featuredLinksSlot) return featuredLinksSlot;
     if (!featuredLinks || featuredLinks.length === 0) return null;
@@ -1183,7 +1190,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 = React.useMemo(() => {
     if (regularLinksSlot) return regularLinksSlot;
     if (!regularLinks || regularLinks.length === 0) return null;
@@ -1260,7 +1278,15 @@ function LinkPageBentoLayout({
         link.id ?? index
       );
     });
-  }, [regularLinksSlot, regularLinks, resolvedBackground, regularLinkClassName, regularLinkIconWrapperClassName, regularLinkIconClassName, regularLinkLabelClassName]);
+  }, [
+    regularLinksSlot,
+    regularLinks,
+    resolvedBackground,
+    regularLinkClassName,
+    regularLinkIconWrapperClassName,
+    regularLinkIconClassName,
+    regularLinkLabelClassName
+  ]);
   const renderLinks = React.useMemo(() => {
     if (linksSlot) return linksSlot;
     if (!links || links.length === 0) return null;
@@ -1270,7 +1296,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 = React.useMemo(() => {
     if (profileSlot) return profileSlot;
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1300,16 +1338,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",
               {
@@ -1326,7 +1355,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 = React.useMemo(() => {
     if (footerSlot) return footerSlot;
     if (!footerAction) return null;

package/dist/link-page-bento-layout.js

@@ -1053,7 +1053,14 @@ function LinkPageBentoLayout({
         social.id ?? index
       );
     }) });
-  }, [socialLinksSlot, socialLinks, socialLinksClassName, socialIconClassName, resolvedBackground, socialLinkClassName]);
+  }, [
+    socialLinksSlot,
+    socialLinks,
+    socialLinksClassName,
+    socialIconClassName,
+    resolvedBackground,
+    socialLinkClassName
+  ]);
   const renderFeaturedLinks = useMemo(() => {
     if (featuredLinksSlot) return featuredLinksSlot;
     if (!featuredLinks || featuredLinks.length === 0) return null;
@@ -1162,7 +1169,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(() => {
     if (regularLinksSlot) return regularLinksSlot;
     if (!regularLinks || regularLinks.length === 0) return null;
@@ -1239,7 +1257,15 @@ function LinkPageBentoLayout({
         link.id ?? index
       );
     });
-  }, [regularLinksSlot, regularLinks, resolvedBackground, regularLinkClassName, regularLinkIconWrapperClassName, regularLinkIconClassName, regularLinkLabelClassName]);
+  }, [
+    regularLinksSlot,
+    regularLinks,
+    resolvedBackground,
+    regularLinkClassName,
+    regularLinkIconWrapperClassName,
+    regularLinkIconClassName,
+    regularLinkLabelClassName
+  ]);
   const renderLinks = useMemo(() => {
     if (linksSlot) return linksSlot;
     if (!links || links.length === 0) return null;
@@ -1249,7 +1275,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(() => {
     if (profileSlot) return profileSlot;
     return /* @__PURE__ */ jsxs(
@@ -1279,16 +1317,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",
               {
@@ -1305,7 +1334,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(() => {
     if (footerSlot) return footerSlot;
     if (!footerAction) return null;

package/dist/link-tree-block.cjs

@@ -34,84 +34,6 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-function getNestedCardBg(parentBg, variant = "muted", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "muted":
-        return "bg-background";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-background/50";
-    }
-  } else {
-    switch (variant) {
-      case "muted":
-        return "bg-muted";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-muted/50";
-    }
-  }
-}
-function getNestedCardTextColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-foreground" : "";
-}
-function getTextColor(parentBg, variant = "default", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-foreground/80";
-      case "subtle":
-        return "text-foreground/60";
-      case "accent":
-        return "text-accent-foreground";
-    }
-  } else {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-muted-foreground";
-      case "subtle":
-        return "text-muted-foreground/70";
-      case "accent":
-        return "text-primary";
-    }
-  }
-}
-function getBorderColor(parentBg, variant = "default", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "default":
-        return "border-foreground/20";
-      case "muted":
-        return "border-foreground/10";
-      case "accent":
-        return "border-accent-foreground";
-    }
-  } else {
-    switch (variant) {
-      case "default":
-        return "border-border";
-      case "muted":
-        return "border-muted";
-      case "accent":
-        return "border-primary";
-    }
-  }
-}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -1196,7 +1118,6 @@ function LinkTreeBlock({
               {
                 className: cn(
                   "max-w-xs text-balance text-sm",
-                  getTextColor(resolvedBackground, "muted"),
                   taglineClassName
                 ),
                 children: brandTagline
@@ -1217,7 +1138,6 @@ function LinkTreeBlock({
     verifiedIcon,
     verifiedIconClassName,
     brandName,
-    resolvedBackground,
     nameClassName,
     brandTagline,
     taglineClassName
@@ -1295,7 +1215,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
@@ -1317,7 +1237,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
                 )
               }
@@ -1332,7 +1252,6 @@ function LinkTreeBlock({
     links,
     linksClassName,
     linkIconClassName,
-    resolvedBackground,
     linkClassName,
     featuredLinkClassName,
     linkLabelClassName,
@@ -1366,7 +1285,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
               ),
@@ -1484,8 +1402,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
               ),
@@ -1501,7 +1417,6 @@ function LinkTreeBlock({
     socialLinks,
     socialLinksClassName,
     socialIconClassName,
-    resolvedBackground,
     socialLinkClassName
   ]);
   const renderFooter = React.useMemo(() => {

package/dist/link-tree-block.js

@@ -13,84 +13,6 @@ import { Lightbox } from '@page-speed/lightbox';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-function getNestedCardBg(parentBg, variant = "muted", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "muted":
-        return "bg-background";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-background/50";
-    }
-  } else {
-    switch (variant) {
-      case "muted":
-        return "bg-muted";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-muted/50";
-    }
-  }
-}
-function getNestedCardTextColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-foreground" : "";
-}
-function getTextColor(parentBg, variant = "default", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-foreground/80";
-      case "subtle":
-        return "text-foreground/60";
-      case "accent":
-        return "text-accent-foreground";
-    }
-  } else {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-muted-foreground";
-      case "subtle":
-        return "text-muted-foreground/70";
-      case "accent":
-        return "text-primary";
-    }
-  }
-}
-function getBorderColor(parentBg, variant = "default", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "default":
-        return "border-foreground/20";
-      case "muted":
-        return "border-foreground/10";
-      case "accent":
-        return "border-accent-foreground";
-    }
-  } else {
-    switch (variant) {
-      case "default":
-        return "border-border";
-      case "muted":
-        return "border-muted";
-      case "accent":
-        return "border-primary";
-    }
-  }
-}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -1175,7 +1097,6 @@ function LinkTreeBlock({
               {
                 className: cn(
                   "max-w-xs text-balance text-sm",
-                  getTextColor(resolvedBackground, "muted"),
                   taglineClassName
                 ),
                 children: brandTagline
@@ -1196,7 +1117,6 @@ function LinkTreeBlock({
     verifiedIcon,
     verifiedIconClassName,
     brandName,
-    resolvedBackground,
     nameClassName,
     brandTagline,
     taglineClassName
@@ -1274,7 +1194,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
@@ -1296,7 +1216,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
                 )
               }
@@ -1311,7 +1231,6 @@ function LinkTreeBlock({
     links,
     linksClassName,
     linkIconClassName,
-    resolvedBackground,
     linkClassName,
     featuredLinkClassName,
     linkLabelClassName,
@@ -1345,7 +1264,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
               ),
@@ -1463,8 +1381,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
               ),
@@ -1480,7 +1396,6 @@ function LinkTreeBlock({
     socialLinks,
     socialLinksClassName,
     socialIconClassName,
-    resolvedBackground,
     socialLinkClassName
   ]);
   const renderFooter = useMemo(() => {

package/dist/navbar-animated-preview.cjs

@@ -1418,7 +1418,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",

package/dist/navbar-animated-preview.js

@@ -1392,7 +1392,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",

package/dist/navbar-centered-menu.cjs

@@ -1202,7 +1202,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",

package/dist/navbar-centered-menu.js

@@ -1178,7 +1178,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",

package/dist/navbar-dark-icons.cjs

@@ -1234,7 +1234,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",

package/dist/navbar-dark-icons.js

@@ -1210,7 +1210,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",

package/dist/navbar-dropdown-menu.cjs

@@ -1249,7 +1249,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",

package/dist/navbar-dropdown-menu.js

@@ -1225,7 +1225,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",

package/dist/navbar-education-platform.cjs

@@ -1302,7 +1302,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",

package/dist/navbar-education-platform.js

@@ -1278,7 +1278,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",