@opensite/ui 0.4.5 → 0.4.6

package/dist/registry.js

@@ -48814,7 +48814,7 @@ function NavigationMenuList({
     {
       "data-slot": "navigation-menu-list",
       className: cn(
-        "group flex flex-1 list-none items-center justify-center gap-6",
+        "group flex flex-1 list-none items-center justify-center gap-2 lg:gap-4 xl:gap-6",
         className
       ),
       ...props
@@ -48854,8 +48854,9 @@ function NavigationMenuTrigger({
         /* @__PURE__ */ jsx(
           DynamicIcon,
           {
+            size: 18,
             name: "lucide/chevron-down",
-            className: "relative top-[1px] ml-1 size-2 transition duration-300 group-data-[state=open]:rotate-180",
+            className: "relative top-px opacity-50 transition duration-300 group-data-[state=open]:rotate-180",
             "aria-hidden": "true"
           }
         )
@@ -48895,7 +48896,7 @@ function NavigationMenuViewport({
         {
           "data-slot": "navigation-menu-viewport",
           className: cn(
-            "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
+            "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden rounded-md border border-border/50 shadow-sm md:w-(--radix-navigation-menu-viewport-width)",
             className
           ),
           ...props
@@ -48913,7 +48914,7 @@ function NavigationMenuLink({
     {
       "data-slot": "navigation-menu-link",
       className: cn(
-        "data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 data-[active=true]:text-foreground hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
+        "group inline-flex w-max items-center justify-center rounded-md text-sm disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-muted data-[state=open]:focus:bg-muted focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 group h-auto bg-transparent px-3 py-2 font-normal text-foreground/80 hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground data-[state=open]:bg-muted/50 data-[state=open]:text-foreground",
         className
       ),
       ...props
@@ -49022,6 +49023,36 @@ function SheetDescription({
     }
   );
 }
+
+// components/blocks/navbars/layout-variant-utils.ts
+function getNavbarLayoutClasses(layoutVariant = "fullScreenContainerizedLinks", customClasses) {
+  const isFloatingBar = layoutVariant === "floatingBar";
+  const isFullWidthLinks = layoutVariant === "fullScreenFullWidthLinks";
+  return {
+    // Section wrapper classes
+    sectionClasses: cn(
+      "inset-x-0 z-20",
+      isFloatingBar ? "sticky top-4" : "top-0",
+      customClasses?.className
+    ),
+    // Outer container wrapper (only for floating bar)
+    containerWrapperClasses: cn(
+      isFloatingBar && "mx-auto w-full px-2 sm:px-4 lg:px-8 max-w-7xl relative z-10"
+    ),
+    // Inner container classes
+    innerContainerClasses: cn(
+      !isFloatingBar && !isFullWidthLinks && "container",
+      isFullWidthLinks && "mx-auto w-full px-2 sm:px-4 lg:px-8",
+      customClasses?.containerClassName
+    ),
+    // Navigation wrapper classes (for border and shadow)
+    navWrapperClasses: cn(
+      isFloatingBar ? "border border-border/50 shadow-sm rounded-full" : "border-b border-border/50 shadow-sm"
+    ),
+    // Spacing adjustment for Section component
+    spacingOverride: isFloatingBar ? "none" : void 0
+  };
+}
 var SubMenuLink = ({
   item,
   optixFlowConfig
@@ -49098,6 +49129,7 @@ var NavbarDropdownMenu = ({
   mobileNavClassName,
   navigationMenuClassName,
   actionsClassName,
+  layoutVariant = "fullScreenContainerizedLinks",
   background = "white",
   spacing = "sm",
   pattern,
@@ -49165,72 +49197,70 @@ var NavbarDropdownMenu = ({
     if (!menu || menu.length === 0) return null;
     return menu.map((item) => renderMobileMenuItem(item, optixFlowConfig));
   };
+  const {
+    sectionClasses,
+    containerWrapperClasses,
+    innerContainerClasses,
+    navWrapperClasses,
+    spacingOverride
+  } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsx(
     Section,
     {
       background,
-      spacing,
-      className: cn(className),
+      spacing: spacingOverride ?? spacing,
+      className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: cn(
-            "container border-b border-border/50 shadow-sm",
-            containerClassName
-          ),
-          children: [
-            /* @__PURE__ */ jsxs(
-              "nav",
+      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxs("div", { className: cn(innerContainerClasses, navWrapperClasses), children: [
+        /* @__PURE__ */ jsxs(
+          "nav",
+          {
+            className: cn(
+              "hidden items-center justify-between lg:flex",
+              desktopNavClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-6", children: [
+                renderLogo(),
+                /* @__PURE__ */ jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsx(NavigationMenu, { className: navigationMenuClassName, children: /* @__PURE__ */ jsx(NavigationMenuList, { children: renderMenu() }) }) })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: cn("flex gap-2", actionsClassName), children: renderAuthActions() })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: cn("block lg:hidden", mobileNavClassName), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          renderLogo(),
+          /* @__PURE__ */ jsxs(Sheet, { children: [
+            /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+              Pressable,
               {
-                className: cn(
-                  "hidden items-center justify-between lg:flex",
-                  desktopNavClassName
-                ),
-                children: [
-                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-6", children: [
-                    renderLogo(),
-                    /* @__PURE__ */ jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsx(NavigationMenu, { className: navigationMenuClassName, children: /* @__PURE__ */ jsx(NavigationMenuList, { children: renderMenu() }) }) })
-                  ] }),
-                  /* @__PURE__ */ jsx("div", { className: cn("flex gap-2", actionsClassName), children: renderAuthActions() })
-                ]
+                variant: "outline",
+                size: "icon",
+                asButton: true,
+                onClick: () => {
+                },
+                children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/menu", size: 16 })
               }
-            ),
-            /* @__PURE__ */ jsx("div", { className: cn("block lg:hidden", mobileNavClassName), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-              renderLogo(),
-              /* @__PURE__ */ jsxs(Sheet, { children: [
-                /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-                  Pressable,
+            ) }),
+            /* @__PURE__ */ jsxs(SheetContent, { className: "overflow-y-auto", children: [
+              /* @__PURE__ */ jsx(SheetHeader, { children: /* @__PURE__ */ jsx(SheetTitle, { children: renderLogo() }) }),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 p-4", children: [
+                /* @__PURE__ */ jsx(
+                  Accordion,
                   {
-                    variant: "outline",
-                    size: "icon",
-                    asButton: true,
-                    onClick: () => {
-                    },
-                    children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/menu", size: 16 })
+                    type: "single",
+                    collapsible: true,
+                    className: "flex w-full flex-col gap-4",
+                    children: renderMobileMenu()
                   }
-                ) }),
-                /* @__PURE__ */ jsxs(SheetContent, { className: "overflow-y-auto", children: [
-                  /* @__PURE__ */ jsx(SheetHeader, { children: /* @__PURE__ */ jsx(SheetTitle, { children: renderLogo() }) }),
-                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 p-4", children: [
-                    /* @__PURE__ */ jsx(
-                      Accordion,
-                      {
-                        type: "single",
-                        collapsible: true,
-                        className: "flex w-full flex-col gap-4",
-                        children: renderMobileMenu()
-                      }
-                    ),
-                    /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-3", actionsClassName), children: renderAuthActions() })
-                  ] })
-                ] })
+                ),
+                /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-3", actionsClassName), children: renderAuthActions() })
               ] })
-            ] }) })
-          ]
-        }
-      )
+            ] })
+          ] })
+        ] }) })
+      ] }) })
     }
   );
 };
@@ -49318,6 +49348,7 @@ var NavbarCenteredMenu = ({
   mobileNavClassName,
   navigationMenuClassName,
   actionsClassName,
+  layoutVariant = "fullScreenContainerizedLinks",
   background = "white",
   spacing = "sm",
   pattern,
@@ -49385,73 +49416,71 @@ var NavbarCenteredMenu = ({
     if (!menu || menu.length === 0) return null;
     return menu.map((item) => renderMobileMenuItem2(item));
   };
+  const {
+    sectionClasses,
+    containerWrapperClasses,
+    innerContainerClasses,
+    navWrapperClasses,
+    spacingOverride
+  } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsx(
     Section,
     {
       background,
-      spacing,
-      className: cn(className),
+      spacing: spacingOverride ?? spacing,
+      className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: cn(
-            "container border-b border-border/50 shadow-sm",
-            containerClassName
-          ),
-          children: [
-            /* @__PURE__ */ jsxs(
-              "nav",
+      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxs("div", { className: cn(innerContainerClasses, navWrapperClasses), children: [
+        /* @__PURE__ */ jsxs(
+          "nav",
+          {
+            className: cn("hidden justify-between lg:flex", desktopNavClassName),
+            children: [
+              renderLogo(),
+              /* @__PURE__ */ jsx("div", { className: "flex items-center gap-6", children: /* @__PURE__ */ jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsx(
+                NavigationMenuWithoutViewport,
+                {
+                  className: navigationMenuClassName,
+                  children: /* @__PURE__ */ jsx(NavigationMenuList, { className: "relative", children: renderMenu() })
+                }
+              ) }) }),
+              /* @__PURE__ */ jsx("div", { className: cn("flex gap-2", actionsClassName), children: renderAuthActions() })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: cn("block lg:hidden", mobileNavClassName), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          renderLogo(),
+          /* @__PURE__ */ jsxs(Sheet, { children: [
+            /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+              Pressable,
               {
-                className: cn("hidden justify-between lg:flex", desktopNavClassName),
-                children: [
-                  renderLogo(),
-                  /* @__PURE__ */ jsx("div", { className: "flex items-center gap-6", children: /* @__PURE__ */ jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsx(
-                    NavigationMenuWithoutViewport,
-                    {
-                      className: navigationMenuClassName,
-                      children: /* @__PURE__ */ jsx(NavigationMenuList, { className: "relative", children: renderMenu() })
-                    }
-                  ) }) }),
-                  /* @__PURE__ */ jsx("div", { className: cn("flex gap-2", actionsClassName), children: renderAuthActions() })
-                ]
+                variant: "outline",
+                size: "icon",
+                asButton: true,
+                onClick: () => {
+                },
+                children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/menu", size: 16 })
               }
-            ),
-            /* @__PURE__ */ jsx("div", { className: cn("block lg:hidden", mobileNavClassName), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-              renderLogo(),
-              /* @__PURE__ */ jsxs(Sheet, { children: [
-                /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-                  Pressable,
+            ) }),
+            /* @__PURE__ */ jsxs(SheetContent, { className: "overflow-y-auto", children: [
+              /* @__PURE__ */ jsx(SheetHeader, { children: /* @__PURE__ */ jsx(SheetTitle, { children: renderLogo() }) }),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 p-4", children: [
+                /* @__PURE__ */ jsx(
+                  Accordion,
                   {
-                    variant: "outline",
-                    size: "icon",
-                    asButton: true,
-                    onClick: () => {
-                    },
-                    children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/menu", size: 16 })
+                    type: "single",
+                    collapsible: true,
+                    className: "flex w-full flex-col gap-4",
+                    children: renderMobileMenu()
                   }
-                ) }),
-                /* @__PURE__ */ jsxs(SheetContent, { className: "overflow-y-auto", children: [
-                  /* @__PURE__ */ jsx(SheetHeader, { children: /* @__PURE__ */ jsx(SheetTitle, { children: renderLogo() }) }),
-                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 p-4", children: [
-                    /* @__PURE__ */ jsx(
-                      Accordion,
-                      {
-                        type: "single",
-                        collapsible: true,
-                        className: "flex w-full flex-col gap-4",
-                        children: renderMobileMenu()
-                      }
-                    ),
-                    /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-3", actionsClassName), children: renderAuthActions() })
-                  ] })
-                ] })
+                ),
+                /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-3", actionsClassName), children: renderAuthActions() })
               ] })
-            ] }) })
-          ]
-        }
-      )
+            ] })
+          ] })
+        ] }) })
+      ] }) })
     }
   );
 };
@@ -49488,8 +49517,8 @@ var DesktopMenuItem = ({
   if (layout === "animated-image-preview" && link.links) {
     return /* @__PURE__ */ jsxs(NavigationMenuItem, { children: [
       /* @__PURE__ */ jsx(NavigationMenuTrigger, { className: "h-auto bg-transparent px-3 py-2 font-normal text-foreground/80 hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground data-[state=open]:bg-muted/50 data-[state=open]:text-foreground", children: link.label }),
-      /* @__PURE__ */ jsx(NavigationMenuContent, { className: "!rounded-2xl !p-0", children: /* @__PURE__ */ jsxs("div", { className: "grid min-h-[18.75rem] w-[45.25rem] grid-cols-[22.5rem_1fr] gap-4 p-3", children: [
-        /* @__PURE__ */ jsx("div", { className: "relative aspect-square w-full overflow-hidden rounded-xl", children: link.links.map((item, idx) => /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(NavigationMenuContent, { className: "rounded-2xl! p-0!", children: /* @__PURE__ */ jsxs("div", { className: "grid min-h-75 w-181 grid-cols-[22.5rem_1fr] gap-4 p-3", children: [
+        /* @__PURE__ */ jsx("div", { className: "relative aspect-square w-full overflow-hidden rounded-xl shadow-xl", children: link.links.map((item, idx) => /* @__PURE__ */ jsx(
           Img,
           {
             ref: (el) => {
@@ -49518,7 +49547,7 @@ var DesktopMenuItem = ({
               onMouseEnter: handleMouseEnter,
               onMouseLeave: handleMouseLeave,
               children: /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx("h3", { className: "text-sm leading-normal font-medium", children: item.label }),
+                /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: item.label }),
                 item.description && /* @__PURE__ */ jsx("p", { className: "text-xs leading-normal text-muted-foreground", children: item.description })
               ] })
             }
@@ -49646,6 +49675,7 @@ var NavbarMegaMenu = ({
   logoSlot,
   menuLinks,
   actions,
+  layoutVariant = "fullScreenContainerizedLinks",
   background = "white",
   spacing = "none",
   pattern,
@@ -49705,15 +49735,27 @@ var NavbarMegaMenu = ({
       ] }) }, index);
     });
   };
+  const {
+    sectionClasses,
+    containerWrapperClasses,
+    innerContainerClasses,
+    navWrapperClasses: baseNavWrapperClasses,
+    spacingOverride
+  } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
+  const navWrapperClasses = cn(
+    "flex w-full items-center justify-between gap-12 py-4",
+    baseNavWrapperClasses,
+    layoutVariant === "floatingBar" && "pr-4 pl-8"
+  );
   return /* @__PURE__ */ jsx(
     Section,
     {
       background,
-      spacing,
-      className: cn("inset-x-0 top-0 z-20", className),
+      spacing: spacingOverride ?? spacing,
+      className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
         NavigationMenu,
         {
           className: cn(
@@ -49721,7 +49763,7 @@ var NavbarMegaMenu = ({
             navClassName
           ),
           children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between gap-12 border-b border-border/50 py-4 shadow-sm", children: [
+            /* @__PURE__ */ jsxs("div", { className: navWrapperClasses, children: [
               /* @__PURE__ */ jsxs("div", { children: [
                 (!open || submenuIndex === null) && renderLogo(),
                 open && submenuIndex !== null && /* @__PURE__ */ jsxs(
@@ -49866,7 +49908,7 @@ var NavbarMegaMenu = ({
             )
           ]
         }
-      ) })
+      ) }) })
     }
   );
 };
@@ -49886,6 +49928,7 @@ var NavbarEnterpriseMega = ({
   menuLinks,
   actions,
   actionsSlot,
+  layoutVariant = "fullScreenContainerizedLinks",
   background = "white",
   spacing = "none",
   pattern,
@@ -49954,23 +49997,31 @@ var NavbarEnterpriseMega = ({
       ] }) }, index);
     });
   };
+  const {
+    sectionClasses,
+    containerWrapperClasses,
+    innerContainerClasses,
+    navWrapperClasses,
+    spacingOverride
+  } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsx(
       Section,
       {
         background,
-        spacing,
+        spacing: spacingOverride ?? spacing,
         className: cn(
-          "pointer-events-auto fixed top-0 z-999 flex w-full items-center justify-center border-b border-border/50 shadow-sm",
-          className
+          "pointer-events-auto fixed top-0 z-999 flex w-full items-center justify-center",
+          sectionClasses
         ),
         pattern,
         patternOpacity,
-        children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs(
-          "div",
+        children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
+          "nav",
           {
             className: cn(
               "flex h-16 items-center justify-between gap-8",
+              navWrapperClasses,
               navClassName
             ),
             children: [
@@ -50021,7 +50072,7 @@ var NavbarEnterpriseMega = ({
               ] })
             ]
           }
-        ) })
+        ) }) })
       }
     ),
     /* @__PURE__ */ jsx(
@@ -50699,6 +50750,7 @@ var NavbarFeatureGrid = ({
   features,
   authActions,
   authActionsSlot,
+  layoutVariant = "fullScreenContainerizedLinks",
   background = "white",
   spacing = "sm",
   pattern,
@@ -50747,15 +50799,22 @@ var NavbarFeatureGrid = ({
       ] }) }, index);
     });
   };
+  const {
+    sectionClasses,
+    containerWrapperClasses,
+    innerContainerClasses,
+    navWrapperClasses,
+    spacingOverride
+  } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsx(
     Section,
     {
       background,
-      spacing,
-      className: cn(className),
+      spacing: spacingOverride ?? spacing,
+      className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs("nav", { className: cn("flex items-center justify-between", navClassName), children: [
+      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs("nav", { className: cn("flex items-center justify-between", navWrapperClasses, navClassName), children: [
         renderLogo(),
         /* @__PURE__ */ jsx(
           NavigationMenu,
@@ -50859,7 +50918,7 @@ var NavbarFeatureGrid = ({
             ] })
           ] })
         ] })
-      ] }) })
+      ] }) }) })
     }
   );
 };
@@ -50879,6 +50938,7 @@ var NavbarFloatingPill = ({
   pillWrapperClassName,
   navigationMenuClassName,
   actionsClassName,
+  layoutVariant = "fullScreenContainerizedLinks",
   background = "white",
   spacing = "none",
   pattern,
@@ -50943,20 +51003,27 @@ var NavbarFloatingPill = ({
     if (!items || items.length === 0) return null;
     return items;
   };
+  const {
+    sectionClasses,
+    containerWrapperClasses,
+    innerContainerClasses,
+    navWrapperClasses,
+    spacingOverride
+  } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsx(
     Section,
     {
       background,
-      spacing,
-      className: cn(className),
+      spacing: spacingOverride ?? spacing,
+      className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxs(
-        "div",
+      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
+        "nav",
         {
           className: cn(
-            "absolute top-5 left-1/2 z-50 w-[min(90%,700px)] -translate-x-1/2 rounded-full border bg-background/70 backdrop-blur-md lg:top-12",
-            containerClassName
+            "absolute top-5 left-1/2 z-50 w-[min(90%,700px)] -translate-x-1/2 rounded-full bg-background/70 backdrop-blur-md lg:top-12",
+            navWrapperClasses
           ),
           children: [
             /* @__PURE__ */ jsxs(
@@ -51112,7 +51179,7 @@ var NavbarFloatingPill = ({
             )
           ]
         }
-      )
+      ) }) })
     }
   );
 };
@@ -51131,6 +51198,7 @@ var NavbarPlatformResources = ({
   logoSlot,
   menuLinks,
   actions,
+  layoutVariant = "fullScreenContainerizedLinks",
   background = "white",
   spacing = "none",
   pattern,
@@ -51422,173 +51490,171 @@ var NavbarPlatformResources = ({
       ] }) }, index);
     });
   };
+  const {
+    sectionClasses,
+    containerWrapperClasses,
+    innerContainerClasses,
+    navWrapperClasses,
+    spacingOverride
+  } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsx(
     Section,
     {
       background,
-      spacing,
-      className: cn("inset-x-0 top-0 z-20", className),
+      spacing: spacingOverride ?? spacing,
+      className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cn(
-            "container px-4 sm:px-6 md:px-8 lg:px-40 xl:px-52",
-            containerClassName
-          ),
-          children: /* @__PURE__ */ jsxs(NavigationMenu, { className: cn("min-w-full", navigationMenuClassName), children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between gap-12 py-4", children: [
-              renderLogo(),
-              /* @__PURE__ */ jsx(
-                NavigationMenuList,
-                {
-                  className: cn("hidden lg:flex", navigationMenuListClassName),
-                  children: menuLinks?.map((link, index) => {
-                    if (hasDropdownItems(link)) {
-                      return /* @__PURE__ */ jsxs(
-                        NavigationMenuItem,
-                        {
-                          children: [
-                            /* @__PURE__ */ jsx(NavigationMenuTrigger, { className: "h-auto bg-transparent px-0 py-0 font-normal text-foreground/60 hover:bg-transparent hover:text-foreground focus:bg-transparent focus:text-foreground data-[state=open]:bg-transparent data-[state=open]:text-foreground", children: link.label }),
-                            renderDropdownContent3(link)
-                          ]
-                        },
-                        `${typeof link.label === "string" ? link.label : "menu"}-${index}`
-                      );
-                    }
-                    if (!link.href) {
-                      return null;
-                    }
-                    return /* @__PURE__ */ jsx(
-                      NavigationMenuItem,
-                      {
-                        children: /* @__PURE__ */ jsx(
-                          NavigationMenuLink,
-                          {
-                            href: link.href,
-                            className: "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-muted hover:text-accent-foreground",
-                            children: link.label
-                          }
-                        )
-                      },
-                      `${typeof link.label === "string" ? link.label : "menu"}-${index}`
-                    );
-                  })
+      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: cn(innerContainerClasses, navWrapperClasses), children: /* @__PURE__ */ jsxs(NavigationMenu, { className: cn("min-w-full", navigationMenuClassName), children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between gap-12 py-4", children: [
+          renderLogo(),
+          /* @__PURE__ */ jsx(
+            NavigationMenuList,
+            {
+              className: cn("hidden lg:flex", navigationMenuListClassName),
+              children: menuLinks?.map((link, index) => {
+                if (hasDropdownItems(link)) {
+                  return /* @__PURE__ */ jsxs(
+                    NavigationMenuItem,
+                    {
+                      children: [
+                        /* @__PURE__ */ jsx(NavigationMenuTrigger, { className: "h-auto bg-transparent px-0 py-0 font-normal text-foreground/60 hover:bg-transparent hover:text-foreground focus:bg-transparent focus:text-foreground data-[state=open]:bg-transparent data-[state=open]:text-foreground", children: link.label }),
+                        renderDropdownContent3(link)
+                      ]
+                    },
+                    `${typeof link.label === "string" ? link.label : "menu"}-${index}`
+                  );
                 }
-              ),
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: cn(
-                    "hidden items-center gap-4 lg:flex",
-                    actionsClassName
-                  ),
-                  children: renderActions()
+                if (!link.href) {
+                  return null;
                 }
+                return /* @__PURE__ */ jsx(
+                  NavigationMenuItem,
+                  {
+                    children: /* @__PURE__ */ jsx(
+                      NavigationMenuLink,
+                      {
+                        href: link.href,
+                        className: "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-muted hover:text-accent-foreground",
+                        children: link.label
+                      }
+                    )
+                  },
+                  `${typeof link.label === "string" ? link.label : "menu"}-${index}`
+                );
+              })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "hidden items-center gap-4 lg:flex",
+                actionsClassName
               ),
-              /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4 lg:hidden", children: /* @__PURE__ */ jsxs(
-                Pressable,
-                {
-                  variant: "outline",
-                  size: "icon",
-                  asButton: true,
-                  "aria-label": "Main Menu",
-                  onClick: () => setOpen(!open),
-                  children: [
-                    !open && /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/menu", size: 16 }),
-                    open && /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", size: 16 })
-                  ]
-                }
-              ) })
-            ] }),
-            open && /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: cn(
-                  "absolute inset-0 top-[72px] flex h-[calc(100vh-72px)] w-full flex-col overflow-scroll border-t border-border bg-background lg:hidden",
-                  mobileMenuClassName
-                ),
-                children: [
-                  /* @__PURE__ */ jsx(Accordion, { type: "single", collapsible: true, className: "w-full", children: menuLinks?.map((link, index) => {
-                    if (hasDropdownItems(link)) {
-                      return /* @__PURE__ */ jsxs(
-                        AccordionItem,
-                        {
-                          value: `menu-${index}`,
-                          className: "border-b-2 border-dashed",
-                          children: [
-                            /* @__PURE__ */ jsx(AccordionTrigger, { className: "px-2 py-4 text-left hover:no-underline", children: link.label }),
-                            /* @__PURE__ */ jsx(AccordionContent, { className: "px-2 pb-4", children: /* @__PURE__ */ jsx("div", { className: "space-y-3", children: link.links?.map((item, itemIndex) => /* @__PURE__ */ jsxs(
-                              Pressable,
-                              {
-                                href: getLinkUrl(item),
-                                className: "group flex items-start gap-4 rounded-lg p-2 hover:bg-muted",
-                                children: [
-                                  item.image && /* @__PURE__ */ jsx("div", { className: "h-10 w-10 overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsx(
-                                    Img,
-                                    {
-                                      src: item.image,
-                                      alt: typeof item.label === "string" ? item.label : "Menu item",
-                                      className: "h-full w-full object-cover object-center",
-                                      optixFlowConfig
-                                    }
-                                  ) }),
-                                  !item.image && (item.icon || item.iconName) && /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-md border border-border bg-muted/40 text-muted-foreground", children: item.icon ? item.icon : item.iconName ? /* @__PURE__ */ jsx(
-                                    DynamicIcon,
-                                    {
-                                      name: item.iconName,
-                                      size: 16
-                                    }
-                                  ) : null }),
-                                  /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
-                                    /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-foreground", children: item.label }),
-                                    item.description && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: item.description })
-                                  ] })
-                                ]
-                              },
-                              `${typeof item.label === "string" ? item.label : "item"}-${itemIndex}`
-                            )) }) })
-                          ]
-                        },
-                        `${typeof link.label === "string" ? link.label : "menu"}-${index}`
-                      );
-                    }
-                    if (!link.href) {
-                      return null;
-                    }
-                    return /* @__PURE__ */ jsx(
-                      "div",
+              children: renderActions()
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4 lg:hidden", children: /* @__PURE__ */ jsxs(
+            Pressable,
+            {
+              variant: "outline",
+              size: "icon",
+              asButton: true,
+              "aria-label": "Main Menu",
+              onClick: () => setOpen(!open),
+              children: [
+                !open && /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/menu", size: 16 }),
+                open && /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", size: 16 })
+              ]
+            }
+          ) })
+        ] }),
+        open && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "absolute inset-0 top-[72px] flex h-[calc(100vh-72px)] w-full flex-col overflow-scroll border-t border-border bg-background lg:hidden",
+              mobileMenuClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsx(Accordion, { type: "single", collapsible: true, className: "w-full", children: menuLinks?.map((link, index) => {
+                if (hasDropdownItems(link)) {
+                  return /* @__PURE__ */ jsxs(
+                    AccordionItem,
+                    {
+                      value: `menu-${index}`,
+                      className: "border-b-2 border-dashed",
+                      children: [
+                        /* @__PURE__ */ jsx(AccordionTrigger, { className: "px-2 py-4 text-left hover:no-underline", children: link.label }),
+                        /* @__PURE__ */ jsx(AccordionContent, { className: "px-2 pb-4", children: /* @__PURE__ */ jsx("div", { className: "space-y-3", children: link.links?.map((item, itemIndex) => /* @__PURE__ */ jsxs(
+                          Pressable,
+                          {
+                            href: getLinkUrl(item),
+                            className: "group flex items-start gap-4 rounded-lg p-2 hover:bg-muted",
+                            children: [
+                              item.image && /* @__PURE__ */ jsx("div", { className: "h-10 w-10 overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsx(
+                                Img,
+                                {
+                                  src: item.image,
+                                  alt: typeof item.label === "string" ? item.label : "Menu item",
+                                  className: "h-full w-full object-cover object-center",
+                                  optixFlowConfig
+                                }
+                              ) }),
+                              !item.image && (item.icon || item.iconName) && /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-md border border-border bg-muted/40 text-muted-foreground", children: item.icon ? item.icon : item.iconName ? /* @__PURE__ */ jsx(
+                                DynamicIcon,
+                                {
+                                  name: item.iconName,
+                                  size: 16
+                                }
+                              ) : null }),
+                              /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+                                /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-foreground", children: item.label }),
+                                item.description && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: item.description })
+                              ] })
+                            ]
+                          },
+                          `${typeof item.label === "string" ? item.label : "item"}-${itemIndex}`
+                        )) }) })
+                      ]
+                    },
+                    `${typeof link.label === "string" ? link.label : "menu"}-${index}`
+                  );
+                }
+                if (!link.href) {
+                  return null;
+                }
+                return /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "border-b-2 border-dashed",
+                    children: /* @__PURE__ */ jsx(
+                      Pressable,
                       {
-                        className: "border-b-2 border-dashed",
-                        children: /* @__PURE__ */ jsx(
-                          Pressable,
-                          {
-                            href: link.href,
-                            className: "flex w-full items-center px-2 py-4 text-left text-sm font-medium",
-                            children: link.label
-                          }
-                        )
-                      },
-                      `${typeof link.label === "string" ? link.label : "menu"}-${index}`
-                    );
-                  }) }),
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: cn(
-                        "mx-8 mt-auto flex flex-col gap-4 py-12",
-                        actionsClassName
-                      ),
-                      children: renderActions()
-                    }
-                  )
-                ]
-              }
-            )
-          ] })
-        }
-      )
+                        href: link.href,
+                        className: "flex w-full items-center px-2 py-4 text-left text-sm font-medium",
+                        children: link.label
+                      }
+                    )
+                  },
+                  `${typeof link.label === "string" ? link.label : "menu"}-${index}`
+                );
+              }) }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "mx-8 mt-auto flex flex-col gap-4 py-12",
+                    actionsClassName
+                  ),
+                  children: renderActions()
+                }
+              )
+            ]
+          }
+        )
+      ] }) }) })
     }
   );
 };
@@ -51613,6 +51679,7 @@ var NavbarImagePreview = ({
   authActionsSlot,
   socialLinks,
   socialLinksSlot,
+  layoutVariant = "fullScreenContainerizedLinks",
   background = "white",
   spacing = "none",
   pattern,
@@ -51721,12 +51788,19 @@ var NavbarImagePreview = ({
       );
     });
   };
+  const {
+    sectionClasses,
+    containerWrapperClasses,
+    innerContainerClasses,
+    navWrapperClasses,
+    spacingOverride
+  } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsxs(
     Section,
     {
       background,
-      spacing,
-      className: cn("", className),
+      spacing: spacingOverride ?? spacing,
+      className: sectionClasses,
       pattern,
       patternOpacity,
       children: [
@@ -51735,10 +51809,10 @@ var NavbarImagePreview = ({
           {
             className: cn(
               "fixed top-0 z-500 w-full bg-transparent transition-colors duration-500",
-              containerClassName
+              containerWrapperClasses
             ),
             ref: navRef,
-            children: /* @__PURE__ */ jsx("div", { className: "container border-b border-border/50 shadow-sm", children: /* @__PURE__ */ jsxs(
+            children: /* @__PURE__ */ jsx("div", { className: cn(innerContainerClasses, navWrapperClasses), children: /* @__PURE__ */ jsxs(
               "div",
               {
                 className: cn(
@@ -51996,6 +52070,7 @@ var NavbarDarkIcons = ({
   authActionsSlot,
   githubUrl = "https://github.com/opensite-ai/opensite-ui",
   githubSlot,
+  layoutVariant = "fullScreenContainerizedLinks",
   background = "white",
   spacing = "none",
   pattern,
@@ -52095,20 +52170,28 @@ var NavbarDarkIcons = ({
     if (!githubUrl) return null;
     return /* @__PURE__ */ jsx(GithubStars, { repoUrl: githubUrl });
   };
+  const {
+    sectionClasses,
+    containerWrapperClasses,
+    innerContainerClasses,
+    navWrapperClasses,
+    spacingOverride
+  } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsxs(
     Section,
     {
       background,
-      spacing,
-      className: cn("dark pointer-events-auto relative z-999", className),
+      spacing: spacingOverride ?? spacing,
+      className: cn("dark pointer-events-auto relative z-999", sectionClasses),
       pattern,
       patternOpacity,
       children: [
-        /* @__PURE__ */ jsx("div", { className: cn("container h-16", containerClassName), children: /* @__PURE__ */ jsxs(
-          "div",
+        /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
+          "nav",
           {
             className: cn(
-              "flex h-full items-center justify-between",
+              "flex h-16 items-center justify-between",
+              navWrapperClasses,
               navClassName
             ),
             children: [
@@ -52151,7 +52234,7 @@ var NavbarDarkIcons = ({
               ] })
             ]
           }
-        ) }),
+        ) }) }),
         /* @__PURE__ */ jsx(
           MobileNavigationMenu3,
           {
@@ -52347,6 +52430,7 @@ var NavbarAnimatedPreview = ({
   navigationSlot,
   actions,
   actionsSlot,
+  layoutVariant = "fullScreenContainerizedLinks",
   background = "white",
   spacing = "none",
   pattern,
@@ -52442,68 +52526,70 @@ var NavbarAnimatedPreview = ({
       `desktop-link-${index}`
     )) });
   };
-  return /* @__PURE__ */ jsxs(
+  const {
+    sectionClasses,
+    containerWrapperClasses,
+    innerContainerClasses,
+    navWrapperClasses: baseNavWrapperClasses,
+    spacingOverride
+  } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
+  const navWrapperClasses = cn(
+    "h-20 max-w-full after:absolute after:inset-0 after:z-998 after:block after:size-full after:bg-background after:content-[''] [&>div:last-child>div]:mt-0 [&>div:last-child>div]:animate-none [&>div:last-child>div]:rounded-none [&>div:last-child>div]:border-0 [&>div:last-child>div]:shadow-[0px_-1px_0px_0px_rgba(0,0,0,0.05),0px_0px_0px_1px_rgba(17,26,37,0.05),0px_2px_5px_0px_rgba(16,25,36,0.1),0px_5px_20px_0px_rgba(16,25,36,0.1)]!",
+    baseNavWrapperClasses,
+    navigationMenuClassName
+  );
+  return /* @__PURE__ */ jsx(
     Section,
     {
       background,
-      spacing,
+      spacing: spacingOverride ?? spacing,
       className: cn(
         "pointer-events-auto fixed top-0 z-999 flex w-full items-center justify-center",
-        className
+        sectionClasses
       ),
       pattern,
       patternOpacity,
-      children: [
-        /* @__PURE__ */ jsx(
-          NavigationMenu,
+      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxs("div", { className: innerContainerClasses, children: [
+        /* @__PURE__ */ jsx(NavigationMenu, { className: navWrapperClasses, children: /* @__PURE__ */ jsxs(
+          "div",
           {
             className: cn(
-              "h-20 max-w-full border-b border-border/50 shadow-sm after:absolute after:inset-0 after:z-998 after:block after:size-full after:bg-background after:content-[''] [&>div:last-child>div]:mt-0 [&>div:last-child>div]:animate-none [&>div:last-child>div]:rounded-none [&>div:last-child>div]:border-0 [&>div:last-child>div]:shadow-[0px_-1px_0px_0px_rgba(0,0,0,0.05),0px_0px_0px_1px_rgba(17,26,37,0.05),0px_2px_5px_0px_rgba(16,25,36,0.1),0px_5px_20px_0px_rgba(16,25,36,0.1)]!",
-              navigationMenuClassName
+              "relative z-999 grid w-full grid-cols-2 items-center justify-between gap-8 xl:grid-cols-3"
             ),
-            children: /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: cn(
-                  "relative z-999 container grid w-full grid-cols-2 items-center justify-between gap-8 xl:grid-cols-3",
-                  containerClassName
-                ),
-                children: [
-                  renderLogo(),
-                  /* @__PURE__ */ jsx("div", { className: cn("hidden xl:flex", navClassName), children: renderNavigation() }),
-                  /* @__PURE__ */ jsxs("div", { className: cn("justify-self-end", actionsClassName), children: [
-                    /* @__PURE__ */ jsx("div", { className: "hidden xl:block", children: renderActions() }),
-                    /* @__PURE__ */ jsx("div", { className: "xl:hidden", children: /* @__PURE__ */ jsx(
-                      Pressable,
+            children: [
+              renderLogo(),
+              /* @__PURE__ */ jsx("div", { className: cn("hidden xl:flex", navClassName), children: renderNavigation() }),
+              /* @__PURE__ */ jsxs("div", { className: cn("justify-self-end", actionsClassName), children: [
+                /* @__PURE__ */ jsx("div", { className: "hidden xl:block", children: renderActions() }),
+                /* @__PURE__ */ jsx("div", { className: "xl:hidden", children: /* @__PURE__ */ jsx(
+                  Pressable,
+                  {
+                    className: "size-11",
+                    variant: "ghost",
+                    size: "icon",
+                    asButton: true,
+                    onClick: handleMobileMenu,
+                    children: open ? /* @__PURE__ */ jsx(
+                      DynamicIcon,
                       {
-                        className: "size-11",
-                        variant: "ghost",
-                        size: "icon",
-                        asButton: true,
-                        onClick: handleMobileMenu,
-                        children: open ? /* @__PURE__ */ jsx(
-                          DynamicIcon,
-                          {
-                            name: "lucide/x",
-                            size: 22,
-                            className: "stroke-foreground"
-                          }
-                        ) : /* @__PURE__ */ jsx(
-                          DynamicIcon,
-                          {
-                            name: "lucide/menu",
-                            size: 22,
-                            className: "stroke-foreground"
-                          }
-                        )
+                        name: "lucide/x",
+                        size: 22,
+                        className: "stroke-foreground"
                       }
-                    ) })
-                  ] })
-                ]
-              }
-            )
+                    ) : /* @__PURE__ */ jsx(
+                      DynamicIcon,
+                      {
+                        name: "lucide/menu",
+                        size: 22,
+                        className: "stroke-foreground"
+                      }
+                    )
+                  }
+                ) })
+              ] })
+            ]
           }
-        ),
+        ) }),
         /* @__PURE__ */ jsx(
           MobileNavigationMenu4,
           {
@@ -52513,7 +52599,7 @@ var NavbarAnimatedPreview = ({
             actionsSlot
           }
         )
-      ]
+      ] }) })
     }
   );
 };
@@ -52902,6 +52988,7 @@ var NavbarMultiColumnGroups = ({
   authActionsSlot,
   mobileAuthActions,
   mobileAuthActionsSlot,
+  layoutVariant = "fullScreenContainerizedLinks",
   background = "white",
   spacing = "none",
   pattern,
@@ -52996,19 +53083,23 @@ var NavbarMultiColumnGroups = ({
       );
     });
   };
+  const {
+    sectionClasses,
+    containerWrapperClasses,
+    innerContainerClasses,
+    navWrapperClasses,
+    spacingOverride
+  } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsxs(
     Section,
     {
       background,
-      spacing,
-      className: cn(
-        "pointer-events-auto fixed top-0 z-999 flex h-16 w-full items-center justify-center",
-        className
-      ),
+      spacing: spacingOverride ?? spacing,
+      className: sectionClasses,
       pattern,
       patternOpacity,
       children: [
-        /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: cn(innerContainerClasses, navWrapperClasses), children: /* @__PURE__ */ jsxs(
           "div",
           {
             className: cn(
@@ -53063,7 +53154,7 @@ var NavbarMultiColumnGroups = ({
               ) })
             ]
           }
-        ) }),
+        ) }) }),
         /* @__PURE__ */ jsx(
           MobileNavigationMenu5,
           {
@@ -53231,6 +53322,7 @@ var NavbarSidebarMobile = ({
   navClassName,
   navigationMenuClassName,
   actionsClassName,
+  layoutVariant = "fullScreenContainerizedLinks",
   background = "white",
   spacing = "none",
   pattern,
@@ -53299,15 +53391,22 @@ var NavbarSidebarMobile = ({
     if (!mobileExtraLinks || mobileExtraLinks.length === 0) return null;
     return mobileExtraLinks;
   };
+  const {
+    sectionClasses,
+    containerWrapperClasses,
+    innerContainerClasses,
+    navWrapperClasses,
+    spacingOverride
+  } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsx(
     Section,
     {
       background,
-      spacing,
-      className: cn("border-b", className),
+      spacing: spacingOverride ?? spacing,
+      className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: cn(innerContainerClasses, navWrapperClasses), children: /* @__PURE__ */ jsxs(
         "nav",
         {
           className: cn("flex items-center justify-between py-4", navClassName),
@@ -53432,7 +53531,7 @@ var NavbarSidebarMobile = ({
             ] })
           ]
         }
-      ) })
+      ) }) })
     }
   );
 };
@@ -53454,6 +53553,7 @@ var NavbarTransparentOverlay = ({
   authActionsSlot,
   mobileAuthActions,
   mobileAuthActionsSlot,
+  layoutVariant = "fullScreenContainerizedLinks",
   background = "white",
   spacing = "none",
   pattern,
@@ -53598,16 +53698,23 @@ var NavbarTransparentOverlay = ({
       );
     });
   };
+  const {
+    sectionClasses,
+    containerWrapperClasses,
+    innerContainerClasses,
+    navWrapperClasses,
+    spacingOverride
+  } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsxs(
     Section,
     {
       background,
-      spacing,
-      className: cn("", className),
+      spacing: spacingOverride ?? spacing,
+      className: sectionClasses,
       pattern,
       patternOpacity,
       children: [
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: cn(innerContainerClasses, navWrapperClasses), children: /* @__PURE__ */ jsx(
           "nav",
           {
             className: cn(
@@ -53615,7 +53722,7 @@ var NavbarTransparentOverlay = ({
               isScrolled ? "bg-background/95 shadow-sm backdrop-blur-sm" : "bg-transparent",
               navClassName
             ),
-            children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "flex h-16 items-center justify-between", children: [
+            children: /* @__PURE__ */ jsxs("div", { className: "flex h-16 items-center justify-between", children: [
               renderLogo(),
               /* @__PURE__ */ jsx(
                 NavigationMenu,
@@ -53673,9 +53780,9 @@ var NavbarTransparentOverlay = ({
                   ]
                 }
               )
-            ] }) })
+            ] })
           }
-        ),
+        ) }) }),
         /* @__PURE__ */ jsx(
           "div",
           {
@@ -53741,6 +53848,7 @@ var NavbarEducationPlatform = ({
   company,
   authActions,
   authActionsSlot,
+  layoutVariant = "fullScreenContainerizedLinks",
   background = "white",
   spacing = "none",
   pattern,
@@ -53790,23 +53898,29 @@ var NavbarEducationPlatform = ({
       ] }) }, index);
     });
   };
+  const {
+    sectionClasses,
+    containerWrapperClasses,
+    innerContainerClasses,
+    navWrapperClasses,
+    spacingOverride
+  } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsxs(
     Section,
     {
       background,
-      spacing,
+      spacing: spacingOverride ?? spacing,
       className: cn(
-        "border-b border-border lg:border-b",
         isOpen && "border-b-0",
-        className
+        sectionClasses
       ),
       pattern,
       patternOpacity,
       children: [
-        /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
           "nav",
           {
-            className: cn("flex items-center justify-between py-4", navClassName),
+            className: cn("flex items-center justify-between py-4", navWrapperClasses, navClassName),
             children: [
               /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center gap-9", children: [
                 renderLogo(),
@@ -53997,7 +54111,7 @@ var NavbarEducationPlatform = ({
               )
             ]
           }
-        ) }),
+        ) }) }),
         isOpen && /* @__PURE__ */ jsx(
           "div",
           {
@@ -54134,6 +54248,7 @@ var NavbarStickyCompact = ({
   containerClassName,
   navClassName,
   actionsClassName,
+  layoutVariant = "fullScreenContainerizedLinks",
   background = "white",
   spacing = "none",
   pattern,
@@ -54287,19 +54402,26 @@ var NavbarStickyCompact = ({
       )
     );
   };
+  const {
+    sectionClasses,
+    containerWrapperClasses,
+    innerContainerClasses,
+    navWrapperClasses,
+    spacingOverride
+  } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsx(
     Section,
     {
       background,
-      spacing,
+      spacing: spacingOverride ?? spacing,
       className: cn(
-        "fixed top-0 left-0 z-50 w-full border-b bg-background/95 backdrop-blur-sm transition-all duration-300",
-        isScrolled ? "shadow-sm" : "",
-        className
+        sectionClasses,
+        "fixed top-0 left-0 z-50 w-full bg-background/95 backdrop-blur-sm transition-all duration-300",
+        isScrolled ? "shadow-sm" : ""
       ),
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: cn(innerContainerClasses, navWrapperClasses), children: /* @__PURE__ */ jsxs(
         "nav",
         {
           className: cn(
@@ -54355,7 +54477,7 @@ var NavbarStickyCompact = ({
             ] })
           ]
         }
-      ) })
+      ) }) })
     }
   );
 };
@@ -54380,6 +54502,7 @@ var NavbarSearchFocused = ({
   authActionsSlot,
   mobileMenuActions,
   mobileMenuActionsSlot,
+  layoutVariant = "fullScreenContainerizedLinks",
   background = "white",
   spacing = "none",
   pattern,
@@ -54475,15 +54598,22 @@ var NavbarSearchFocused = ({
       );
     }) });
   };
+  const {
+    sectionClasses,
+    containerWrapperClasses,
+    innerContainerClasses,
+    navWrapperClasses,
+    spacingOverride
+  } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsx(
     Section,
     {
       background,
-      spacing,
-      className: cn("border-b", className),
+      spacing: spacingOverride ?? spacing,
+      className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: cn(innerContainerClasses, navWrapperClasses), children: /* @__PURE__ */ jsxs(
         "nav",
         {
           className: cn("flex items-center gap-4 py-3 lg:gap-8", navClassName),
@@ -54551,7 +54681,7 @@ var NavbarSearchFocused = ({
             ] })
           ]
         }
-      ) })
+      ) }) })
     }
   );
 };
@@ -54653,6 +54783,7 @@ var NavbarSimpleLinks = ({
   defaultActiveItem,
   actions,
   actionsSlot,
+  layoutVariant = "fullScreenContainerizedLinks",
   background = "white",
   spacing = "sm",
   pattern,
@@ -54744,73 +54875,71 @@ var NavbarSimpleLinks = ({
       );
     });
   };
+  const {
+    sectionClasses,
+    containerWrapperClasses,
+    innerContainerClasses,
+    navWrapperClasses,
+    spacingOverride
+  } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsx(
     Section,
     {
       background,
-      spacing,
-      className: cn(className),
+      spacing: spacingOverride ?? spacing,
+      className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cn(
-            "container border-b border-border/50 shadow-sm",
-            containerClassName
-          ),
-          children: /* @__PURE__ */ jsxs("nav", { className: cn("flex items-center justify-between", navClassName), children: [
-            renderLogo(),
-            /* @__PURE__ */ jsx(
-              NavigationMenu,
-              {
-                className: cn("hidden lg:block", navigationMenuClassName),
-                children: /* @__PURE__ */ jsxs(
-                  NavigationMenuList,
-                  {
-                    ref: menuRef,
-                    className: cn(
-                      "flex items-center gap-6 rounded-4xl px-8 py-3",
-                      menuListClassName
-                    ),
-                    children: [
-                      renderNavItems(),
-                      /* @__PURE__ */ jsx(
-                        "div",
-                        {
-                          ref: indicatorRef,
-                          className: "absolute bottom-2 flex h-1 items-center justify-center px-2 transition-all duration-300",
-                          children: /* @__PURE__ */ jsx("div", { className: "h-0.5 w-full rounded-t-none bg-foreground transition-all duration-300" })
-                        }
-                      )
-                    ]
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              MobileNav,
-              {
-                navItems: navItems ?? [],
-                activeItem,
-                setActiveItem,
-                actions,
-                actionsSlot
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "div",
+      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs("nav", { className: cn("flex items-center justify-between", navWrapperClasses, navClassName), children: [
+        renderLogo(),
+        /* @__PURE__ */ jsx(
+          NavigationMenu,
+          {
+            className: cn("hidden lg:block", navigationMenuClassName),
+            children: /* @__PURE__ */ jsxs(
+              NavigationMenuList,
               {
+                ref: menuRef,
                 className: cn(
-                  "hidden items-center gap-2 lg:flex",
-                  actionsClassName
+                  "flex items-center gap-6 rounded-4xl px-8 py-3",
+                  menuListClassName
                 ),
-                children: renderActions()
+                children: [
+                  renderNavItems(),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      ref: indicatorRef,
+                      className: "absolute bottom-2 flex h-1 items-center justify-center px-2 transition-all duration-300",
+                      children: /* @__PURE__ */ jsx("div", { className: "h-0.5 w-full rounded-t-none bg-foreground transition-all duration-300" })
+                    }
+                  )
+                ]
               }
             )
-          ] })
-        }
-      )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          MobileNav,
+          {
+            navItems: navItems ?? [],
+            activeItem,
+            setActiveItem,
+            actions,
+            actionsSlot
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "hidden items-center gap-2 lg:flex",
+              actionsClassName
+            ),
+            children: renderActions()
+          }
+        )
+      ] }) }) })
     }
   );
 };
@@ -54832,6 +54961,7 @@ var NavbarSplitCta = ({
   navClassName,
   navigationMenuClassName,
   actionsClassName,
+  layoutVariant = "fullScreenContainerizedLinks",
   background = "white",
   spacing = "none",
   pattern,
@@ -54921,15 +55051,22 @@ var NavbarSplitCta = ({
     if (!menu || menu.length === 0) return null;
     return menu;
   };
+  const {
+    sectionClasses,
+    containerWrapperClasses,
+    innerContainerClasses,
+    navWrapperClasses,
+    spacingOverride
+  } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsx(
     Section,
     {
       background,
-      spacing,
-      className: cn("border-b", className),
+      spacing: spacingOverride ?? spacing,
+      className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: cn(innerContainerClasses, navWrapperClasses), children: /* @__PURE__ */ jsxs(
         "nav",
         {
           className: cn("flex items-center justify-between py-4", navClassName),
@@ -55042,7 +55179,7 @@ var NavbarSplitCta = ({
             ] })
           ]
         }
-      ) })
+      ) }) })
     }
   );
 };
@@ -55062,6 +55199,7 @@ var NavbarIconLinks = ({
   navClassName,
   navigationMenuClassName,
   actionsClassName,
+  layoutVariant = "fullScreenContainerizedLinks",
   background = "white",
   spacing = "none",
   pattern,
@@ -55128,18 +55266,25 @@ var NavbarIconLinks = ({
     if (!navItems || navItems.length === 0) return null;
     return navItems;
   };
+  const {
+    sectionClasses,
+    containerWrapperClasses,
+    innerContainerClasses,
+    navWrapperClasses,
+    spacingOverride
+  } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsx(
     Section,
     {
       background,
-      spacing,
-      className: cn("border-b", className),
+      spacing: spacingOverride ?? spacing,
+      className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
         "nav",
         {
-          className: cn("flex items-center justify-between py-3", navClassName),
+          className: cn("flex items-center justify-between py-3", navWrapperClasses, navClassName),
           children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-6", children: [
               renderLogo(),
@@ -55233,7 +55378,7 @@ var NavbarIconLinks = ({
             ] })
           ]
         }
-      ) })
+      ) }) })
     }
   );
 };
@@ -55252,6 +55397,7 @@ var NavbarTabbedSections = ({
   containerClassName,
   navClassName,
   actionsClassName,
+  layoutVariant = "fullScreenContainerizedLinks",
   background = "white",
   spacing = "none",
   pattern,
@@ -55415,15 +55561,22 @@ var NavbarTabbedSections = ({
       )
     );
   };
+  const {
+    sectionClasses,
+    containerWrapperClasses,
+    innerContainerClasses,
+    navWrapperClasses,
+    spacingOverride
+  } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsx(
     Section,
     {
       background,
-      spacing,
-      className: cn("border-b bg-background", className),
+      spacing: spacingOverride ?? spacing,
+      className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: cn(innerContainerClasses, navWrapperClasses), children: /* @__PURE__ */ jsxs(
         "nav",
         {
           className: cn("flex items-center justify-between py-4", navClassName),
@@ -55476,7 +55629,7 @@ var NavbarTabbedSections = ({
             ] })
           ]
         }
-      ) })
+      ) }) })
     }
   );
 };
@@ -55497,6 +55650,7 @@ var NavbarFullscreenMenu = ({
   overlayClassName,
   menuItemsClassName,
   socialLinksClassName,
+  layoutVariant = "fullScreenContainerizedLinks",
   background = "white",
   spacing = "none",
   pattern,
@@ -55563,20 +55717,28 @@ var NavbarFullscreenMenu = ({
       link.label
     ));
   };
+  const {
+    sectionClasses,
+    containerWrapperClasses,
+    innerContainerClasses,
+    navWrapperClasses,
+    spacingOverride
+  } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsx(
     Section,
     {
       background,
-      spacing,
-      className: cn(className),
+      spacing: spacingOverride ?? spacing,
+      className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxs("div", { className: cn(containerClassName), children: [
+      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxs("div", { className: innerContainerClasses, children: [
         /* @__PURE__ */ jsxs(
-          "div",
+          "nav",
           {
             className: cn(
               "flex items-center justify-between px-6 py-6",
+              navWrapperClasses,
               headerClassName
             ),
             children: [
@@ -55632,7 +55794,7 @@ var NavbarFullscreenMenu = ({
             ] })
           }
         )
-      ] })
+      ] }) })
     }
   );
 };