@opensite/ui 0.4.5 → 0.4.6

package/dist/navbar-animated-preview.cjs

@@ -1015,7 +1015,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
@@ -1055,8 +1055,9 @@ function NavigationMenuTrigger({
         /* @__PURE__ */ jsxRuntime.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"
           }
         )
@@ -1096,7 +1097,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
@@ -1114,7 +1115,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
@@ -1373,6 +1374,36 @@ var imagePlaceholders = [
 function getLinkUrl(item) {
   return item.href || item.url || "#";
 }
+
+// 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 MOBILE_BREAKPOINT = 1280;
 var NavbarAnimatedPreview = ({
   className,
@@ -1390,6 +1421,7 @@ var NavbarAnimatedPreview = ({
   navigationSlot,
   actions,
   actionsSlot,
+  layoutVariant = "fullScreenContainerizedLinks",
   background = "white",
   spacing = "none",
   pattern,
@@ -1485,68 +1517,70 @@ var NavbarAnimatedPreview = ({
       `desktop-link-${index}`
     )) });
   };
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-          NavigationMenu,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: innerContainerClasses, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu, { className: navWrapperClasses, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: cn("hidden xl:flex", navClassName), children: renderNavigation() }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("justify-self-end", actionsClassName), children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden xl:block", children: renderActions() }),
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "xl:hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
-                      Pressable,
+            children: [
+              renderLogo(),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("hidden xl:flex", navClassName), children: renderNavigation() }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("justify-self-end", actionsClassName), children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden xl:block", children: renderActions() }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "xl:hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  Pressable,
+                  {
+                    className: "size-11",
+                    variant: "ghost",
+                    size: "icon",
+                    asButton: true,
+                    onClick: handleMobileMenu,
+                    children: open ? /* @__PURE__ */ jsxRuntime.jsx(
+                      DynamicIcon,
                       {
-                        className: "size-11",
-                        variant: "ghost",
-                        size: "icon",
-                        asButton: true,
-                        onClick: handleMobileMenu,
-                        children: open ? /* @__PURE__ */ jsxRuntime.jsx(
-                          DynamicIcon,
-                          {
-                            name: "lucide/x",
-                            size: 22,
-                            className: "stroke-foreground"
-                          }
-                        ) : /* @__PURE__ */ jsxRuntime.jsx(
-                          DynamicIcon,
-                          {
-                            name: "lucide/menu",
-                            size: 22,
-                            className: "stroke-foreground"
-                          }
-                        )
+                        name: "lucide/x",
+                        size: 22,
+                        className: "stroke-foreground"
                       }
-                    ) })
-                  ] })
-                ]
-              }
-            )
+                    ) : /* @__PURE__ */ jsxRuntime.jsx(
+                      DynamicIcon,
+                      {
+                        name: "lucide/menu",
+                        size: 22,
+                        className: "stroke-foreground"
+                      }
+                    )
+                  }
+                ) })
+              ] })
+            ]
           }
-        ),
+        ) }),
         /* @__PURE__ */ jsxRuntime.jsx(
           MobileNavigationMenu,
           {
@@ -1556,7 +1590,7 @@ var NavbarAnimatedPreview = ({
             actionsSlot
           }
         )
-      ]
+      ] }) })
     }
   );
 };

package/dist/navbar-animated-preview.d.cts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
 import { SectionBackground, SectionSpacing } from './types.cjs';
-import { L as LogoConfig, b as ILinkItem, a as IMenuLinkGroup } from './types-D2b35ylu.cjs';
+import { L as LogoConfig, b as ILinkItem, a as IMenuLinkGroup, N as NavbarLayoutVariant } from './types-COVDidbn.cjs';
 import { A as ActionConfig, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.cjs';
@@ -101,6 +101,10 @@ interface NavbarAnimatedPreviewProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
+    /**
+     * Layout variant for the navbar
+     */
+    layoutVariant?: NavbarLayoutVariant;
     /**
      * OptixFlow image optimization configuration
      */
@@ -115,6 +119,6 @@ interface NavbarAnimatedPreviewProps {
  * menu spans full width with smooth fade-in animations. Mobile view uses a full-screen sheet with
  * accordion navigation. Ideal for complex SaaS products and developer platforms.
  */
-declare const NavbarAnimatedPreview: ({ className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, logo, logoSlot, logoClassName, menuLinks, navigationSlot, actions, actionsSlot, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarAnimatedPreviewProps) => react_jsx_runtime.JSX.Element;
+declare const NavbarAnimatedPreview: ({ className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, logo, logoSlot, logoClassName, menuLinks, navigationSlot, actions, actionsSlot, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarAnimatedPreviewProps) => react_jsx_runtime.JSX.Element;
 
 export { type AnimatedPreviewLayout, type IFeaturedImageLink, ILinkItem, type IMenuLink, IMenuLinkGroup, LogoConfig, NavbarAnimatedPreview, type NavbarAnimatedPreviewProps };

package/dist/navbar-animated-preview.d.ts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
 import { SectionBackground, SectionSpacing } from './types.js';
-import { L as LogoConfig, b as ILinkItem, a as IMenuLinkGroup } from './types-D2b35ylu.js';
+import { L as LogoConfig, b as ILinkItem, a as IMenuLinkGroup, N as NavbarLayoutVariant } from './types-COVDidbn.js';
 import { A as ActionConfig, O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.js';
@@ -101,6 +101,10 @@ interface NavbarAnimatedPreviewProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
+    /**
+     * Layout variant for the navbar
+     */
+    layoutVariant?: NavbarLayoutVariant;
     /**
      * OptixFlow image optimization configuration
      */
@@ -115,6 +119,6 @@ interface NavbarAnimatedPreviewProps {
  * menu spans full width with smooth fade-in animations. Mobile view uses a full-screen sheet with
  * accordion navigation. Ideal for complex SaaS products and developer platforms.
  */
-declare const NavbarAnimatedPreview: ({ className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, logo, logoSlot, logoClassName, menuLinks, navigationSlot, actions, actionsSlot, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarAnimatedPreviewProps) => react_jsx_runtime.JSX.Element;
+declare const NavbarAnimatedPreview: ({ className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, logo, logoSlot, logoClassName, menuLinks, navigationSlot, actions, actionsSlot, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarAnimatedPreviewProps) => react_jsx_runtime.JSX.Element;
 
 export { type AnimatedPreviewLayout, type IFeaturedImageLink, ILinkItem, type IMenuLink, IMenuLinkGroup, LogoConfig, NavbarAnimatedPreview, type NavbarAnimatedPreviewProps };

package/dist/navbar-animated-preview.js

@@ -989,7 +989,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
@@ -1029,8 +1029,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"
           }
         )
@@ -1070,7 +1071,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
@@ -1088,7 +1089,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
@@ -1347,6 +1348,36 @@ var imagePlaceholders = [
 function getLinkUrl(item) {
   return item.href || item.url || "#";
 }
+
+// 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 MOBILE_BREAKPOINT = 1280;
 var NavbarAnimatedPreview = ({
   className,
@@ -1364,6 +1395,7 @@ var NavbarAnimatedPreview = ({
   navigationSlot,
   actions,
   actionsSlot,
+  layoutVariant = "fullScreenContainerizedLinks",
   background = "white",
   spacing = "none",
   pattern,
@@ -1459,68 +1491,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(
           MobileNavigationMenu,
           {
@@ -1530,7 +1564,7 @@ var NavbarAnimatedPreview = ({
             actionsSlot
           }
         )
-      ]
+      ] }) })
     }
   );
 };