@opensite/ui 1.0.8 → 1.1.0

package/dist/registry.cjs

@@ -57108,6 +57108,7 @@ var NavbarMobileMenu = ({
   children,
   className,
   contentClassName,
+  closeContainerClassName = "",
   title = "Mobile Navigation"
 }) => {
   React52__namespace.useEffect(() => {
@@ -57132,18 +57133,27 @@ var NavbarMobileMenu = ({
       "data-state": open ? "open" : "closed",
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { children: title }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-4 right-4 z-10", children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
           {
-            onClick: onClose,
-            className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
-            "aria-label": "Close mobile menu",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
-            ]
+            className: cn(
+              closeContainerClassName,
+              "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                onClick: onClose,
+                className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
+                "aria-label": "Close mobile menu",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
+                ]
+              }
+            )
           }
-        ) }),
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
@@ -58662,7 +58672,7 @@ var DesktopMenuItem2 = ({
   if (hasDropdown) {
     return /* @__PURE__ */ jsxRuntime.jsxs(NavigationMenuItem, { value: `${index}`, children: [
       /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuTrigger, { className: "h-auto bg-transparent px-3 py-2 font-normal hover:bg-muted focus:bg-muted data-[state=open]:bg-muted/50", children: item.label }),
-      /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuContent, { className: "!rounded-xl !border-0 !p-6", children: renderDropdownContent(
+      /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuContent, { className: "rounded-xl! border-0! p-4!", children: renderDropdownContent(
         { ...item, layout: effectiveLayout },
         optixFlowConfig
       ) })
@@ -58733,12 +58743,12 @@ var renderDropdownContent = (item, optixFlowConfig) => {
 var renderMobileDropdownContent = (item) => {
   switch (item.layout) {
     case "solutions-with-platform":
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: item.solutionCards?.map((solution) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col space-y-2", children: item.solutionCards?.map((solution) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           Pressable,
           {
             href: solution.href,
-            className: "block pb-2 text-sm font-medium",
+            className: "block pt-4 text-sm font-medium",
             children: solution.title
           }
         ),
@@ -58761,7 +58771,7 @@ var renderMobileDropdownContent = (item) => {
           Pressable,
           {
             href: product.href,
-            className: "flex items-center gap-2 text-sm text-muted-foreground",
+            className: "flex items-center pl-4 gap-2 text-sm text-muted-foreground",
             children: product.title
           },
           product.id
@@ -58772,7 +58782,7 @@ var renderMobileDropdownContent = (item) => {
         Pressable,
         {
           href: resource.href,
-          className: "flex items-center gap-2 text-sm text-muted-foreground",
+          className: "flex items-center pl-4 gap-2 text-sm text-muted-foreground",
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: resource.icon, size: 14 }),
             resource.title
@@ -58861,7 +58871,7 @@ var MobileNavigationMenu = ({
             typeof item.label === "string" ? item.label : `nav-${index}`
           );
         }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-6 flex flex-col gap-4", actionsClassName), children: renderActions })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4 flex flex-col gap-4", actionsClassName), children: renderActions })
       ] })
     }
   );
@@ -60029,41 +60039,17 @@ var MobileNavigationMenu2 = ({
   authActions,
   authActionsSlot
 }) => {
-  const renderMobileNavigation = React52.useMemo(() => {
-    if (mobileNavigationSlot) return mobileNavigationSlot;
-    if (!mobileNavigation || mobileNavigation.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid w-full grid-cols-1 gap-x-4 gap-y-10", children: mobileNavigation.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: cn("flex flex-col gap-4 ", item.className),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs uppercase", children: item.title }),
-          /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-3", children: item.links?.map((link, i) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
-            Pressable,
-            {
-              href: getLinkUrl(link),
-              className: cn(
-                "leading-normal font-medium",
-                index === 0 ? "" : "text-base"
-              ),
-              children: link.label
-            }
-          ) }, `mobile-nav-link-${i}`)) })
-        ]
-      },
-      `mobile-menu-item-${index}`
-    )) });
-  }, [mobileNavigationSlot, mobileNavigation]);
+  const handleClose = () => setOpen(false);
   const renderSocialLinks = React52.useMemo(() => {
     if (socialLinksSlot) return socialLinksSlot;
     if (!socialLinks || socialLinks.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-2 flex flex-col gap-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs uppercase", children: "SOCIAL" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-4", children: socialLinks.map((link, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 mt-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 text-[10px] text-muted-foreground uppercase", children: "SOCIAL" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-4 px-4", children: socialLinks.map((link, index) => /* @__PURE__ */ jsxRuntime.jsxs(
         Pressable,
         {
           href: link.url,
-          className: "",
+          onClick: handleClose,
           children: [
             link.icon ?? (link.iconName && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: link.iconName, size: 20 })),
             !link.icon && !link.iconName && link.label
@@ -60072,11 +60058,11 @@ var MobileNavigationMenu2 = ({
         `social-link-${index}`
       )) })
     ] });
-  }, [socialLinksSlot, socialLinks]);
+  }, [socialLinksSlot, socialLinks, handleClose]);
   const renderMobileAuthActions = React52.useMemo(() => {
     if (authActionsSlot) return authActionsSlot;
     if (!authActions || authActions.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: authActions.map((action, index) => {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4 mt-6", children: authActions.map((action, index) => {
       const {
         label,
         icon,
@@ -60090,6 +60076,7 @@ var MobileNavigationMenu2 = ({
         {
           asButton: true,
           className: cn("w-full", actionClassName),
+          onClick: handleClose,
           ...pressableProps,
           children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             icon,
@@ -60100,20 +60087,63 @@ var MobileNavigationMenu2 = ({
         index
       );
     }) });
-  }, [authActionsSlot, authActions]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    NavbarMobileMenu,
-    {
-      open,
-      onClose: () => setOpen(false),
-      title: "Mobile Navigation",
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-screen-sm mx-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col justify-between gap-30", children: [
-        renderMobileNavigation,
-        renderSocialLinks,
-        renderMobileAuthActions
-      ] }) })
-    }
-  );
+  }, [authActionsSlot, authActions, handleClose]);
+  if (mobileNavigationSlot) {
+    return /* @__PURE__ */ jsxRuntime.jsx(NavbarMobileMenu, { open, onClose: handleClose, title: "Mobile Navigation", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-screen-sm mx-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6", children: [
+      mobileNavigationSlot,
+      renderSocialLinks,
+      renderMobileAuthActions
+    ] }) }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(NavbarMobileMenu, { open, onClose: handleClose, title: "Mobile Navigation", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-screen-sm mx-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Accordion, { type: "multiple", className: "w-full", children: mobileNavigation.map((item, index) => {
+      if (item.links && item.links.length > 0) {
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          AccordionItem,
+          {
+            value: `nav-${index}`,
+            className: "border-b-0",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(AccordionTrigger, { className: "h-15 items-center p-0 px-4! text-base leading-[3.75] font-normal text-muted-foreground hover:bg-muted hover:no-underline", children: item.title }),
+              /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: "overflow-x-none", children: item.links.map((link, linkIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
+                Pressable,
+                {
+                  href: getLinkUrl(link),
+                  className: "flex min-h-12 items-center gap-2 rounded-lg px-4 text-muted-foreground transition-colors duration-300 hover:bg-muted hover:text-foreground",
+                  onClick: handleClose,
+                  children: [
+                    link.icon ? link.icon : link.iconName ? /* @__PURE__ */ jsxRuntime.jsx(
+                      DynamicIcon,
+                      {
+                        name: link.iconName,
+                        size: 16,
+                        className: "stroke-muted-foreground"
+                      }
+                    ) : null,
+                    link.label
+                  ]
+                },
+                `mobile-link-${linkIndex}`
+              )) })
+            ]
+          },
+          `nav-item-${index}`
+        );
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Pressable,
+        {
+          href: item.url,
+          className: "flex h-15 items-center rounded-md p-0 px-4 text-left text-base leading-[3.75] font-normal text-muted-foreground ring-ring/10 outline-ring/50 transition-all hover:bg-muted focus-visible:ring-4 focus-visible:outline-1",
+          onClick: handleClose,
+          children: item.title
+        },
+        `nav-link-${index}`
+      );
+    }) }),
+    renderSocialLinks,
+    renderMobileAuthActions
+  ] }) }) });
 };
 var MOBILE_BREAKPOINT3 = 1024;
 var NavbarDarkIcons = ({
@@ -60768,7 +60798,7 @@ var GroupedLinksImageDropdown = ({
   imageLink,
   optixFlowConfig
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-8", children: [
     /* @__PURE__ */ jsxRuntime.jsx(GroupLinks, { groupLinks }),
     /* @__PURE__ */ jsxRuntime.jsx(FeaturedImageLink, { link: imageLink, optixFlowConfig })
   ] });
@@ -60789,7 +60819,7 @@ var GroupLinks = ({ groupLinks }) => {
   };
   if (!groupLinks) return null;
   let linkIndex = 0;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between gap-4", children: groupLinks.map((group, index1) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-4", children: groupLinks.map((group, index1) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 text-xs", children: group.label }),
     /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-4", children: group.links.map((link, index2) => {
       const idx = linkIndex++;
@@ -60847,7 +60877,7 @@ var FeaturedLink = ({ link, optixFlowConfig }) => {
     Pressable,
     {
       href: getLinkUrl(link),
-      className: "group relative flex w-full overflow-hidden rounded-xl bg-muted px-8 py-12",
+      className: "group relative flex w-full overflow-hidden rounded-xl bg-muted px-4 pt-12 pb-4",
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative z-10 flex w-full items-center gap-6", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-12 shrink-0 rounded-lg border bg-background shadow-lg", children: link.icon ? link.icon : link.iconName ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -60963,10 +60993,10 @@ var renderMobileMenuItem4 = (item, index) => {
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(AccordionTrigger, { className: "h-10 items-center text-base font-normal text-foreground hover:no-underline", children: item.label }),
           /* @__PURE__ */ jsxRuntime.jsxs(AccordionContent, { className: "flex flex-col gap-6 p-2", children: [
-            item.featuredLinks && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2 p-2", children: item.featuredLinks.map((link, idx) => /* @__PURE__ */ jsxRuntime.jsx(NavLink, { link }, `default-nav-link-${idx}`)) }),
-            item.links && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2 p-2", children: item.links.map((link, idx) => /* @__PURE__ */ jsxRuntime.jsx(NavLink, { link }, `default-nav-link-${idx}`)) }),
-            item.groupLinks && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2 p-2", children: item.groupLinks.map((group, groupIdx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-8 last:mb-0", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 text-xs text-muted-foreground", children: group.label }),
+            item.featuredLinks && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4 p-2", children: item.featuredLinks.map((link, idx) => /* @__PURE__ */ jsxRuntime.jsx(NavLink, { link }, `default-nav-link-${idx}`)) }),
+            item.links && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4 p-2", children: item.links.map((link, idx) => /* @__PURE__ */ jsxRuntime.jsx(NavLink, { link }, `default-nav-link-${idx}`)) }),
+            item.groupLinks && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4 p-2", children: item.groupLinks.map((group, groupIdx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+              group.label && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 text-xs text-muted-foreground", children: group.label }),
               /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-2", children: group.links.map((link, linkIdx) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(NavLink, { link }) }, `group-link-${groupIdx}-${linkIdx}`)) })
             ] }, `group-link-${groupIdx}`)) })
           ] })
@@ -61156,8 +61186,8 @@ var NavbarMultiColumnGroups = ({
         open,
         setOpen,
         navigation: navigation ?? [],
-        authActions: mobileAuthActions,
-        authActionsSlot: mobileAuthActionsSlot
+        authActions: mobileAuthActions ?? authActions,
+        authActionsSlot: mobileAuthActionsSlot ?? authActionsSlot
       }
     )
   ] });
@@ -61208,10 +61238,11 @@ var MobileNavigationMenu5 = ({
   authActions,
   authActionsSlot
 }) => {
+  const handleClose = () => setOpen(false);
   const renderMobileAuthActions = React52.useMemo(() => {
     if (authActionsSlot) return authActionsSlot;
     if (!authActions || authActions.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4", children: authActions.map((action, index) => {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4 mt-6", children: authActions.map((action, index) => {
       const {
         label,
         icon,
@@ -61225,6 +61256,7 @@ var MobileNavigationMenu5 = ({
         {
           asButton: true,
           className: cn("w-full", actionClassName),
+          onClick: handleClose,
           ...pressableProps,
           children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             icon,
@@ -61235,57 +61267,74 @@ var MobileNavigationMenu5 = ({
         index
       );
     }) });
-  }, [authActionsSlot, authActions]);
+  }, [authActionsSlot, authActions, handleClose]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     NavbarMobileMenu,
     {
       open,
-      onClose: () => setOpen(false),
+      onClose: handleClose,
       title: "Mobile Navigation",
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-screen-sm mx-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
-        navigation.map((item, index) => renderMobileMenuItem5(item, index)),
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-screen-sm mx-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Accordion, { type: "multiple", className: "w-full", children: navigation.map((item, index) => {
+          if (item.groups && item.groups.length > 0) {
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              AccordionItem,
+              {
+                value: `nav-${index}`,
+                className: "border-b-0",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(AccordionTrigger, { className: "h-15 items-center p-0 px-4! text-base leading-[3.75] font-normal text-muted-foreground hover:bg-muted hover:no-underline", children: item.title }),
+                  /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: "overflow-x-none", children: item.groups.map((group, groupIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
+                    "div",
+                    {
+                      className: "mb-4",
+                      children: [
+                        group.title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 px-4 text-xs font-semibold text-muted-foreground uppercase", children: group.title }),
+                        group.links.map((link, linkIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
+                          Pressable,
+                          {
+                            href: link.url,
+                            className: "flex min-h-12 items-center gap-2 rounded-lg px-4 text-muted-foreground transition-colors duration-300 hover:bg-muted hover:text-foreground",
+                            onClick: handleClose,
+                            children: [
+                              link.icon ? link.icon : link.iconName ? /* @__PURE__ */ jsxRuntime.jsx(
+                                DynamicIcon,
+                                {
+                                  name: link.iconName,
+                                  size: 16,
+                                  className: "stroke-muted-foreground"
+                                }
+                              ) : null,
+                              link.label
+                            ]
+                          },
+                          `mobile-link-${groupIndex}-${linkIndex}`
+                        ))
+                      ]
+                    },
+                    `mobile-group-${groupIndex}`
+                  )) })
+                ]
+              },
+              `nav-item-${index}`
+            );
+          }
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            Pressable,
+            {
+              href: item.url,
+              className: "flex h-15 items-center rounded-md p-0 px-4 text-left text-base leading-[3.75] font-normal text-muted-foreground ring-ring/10 outline-ring/50 transition-all hover:bg-muted focus-visible:ring-4 focus-visible:outline-1",
+              onClick: handleClose,
+              children: item.title
+            },
+            `nav-link-${index}`
+          );
+        }) }),
         renderMobileAuthActions
       ] }) })
     }
   );
 };
-var renderMobileMenuItem5 = (item, index) => {
-  if (item.groups) {
-    return /* @__PURE__ */ jsxRuntime.jsx(Accordion, { type: "single", className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsxs(AccordionItem, { value: `nav-${index}`, className: "border-b-0", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(AccordionTrigger, { className: "h-15 items-center p-0 px-4! text-base leading-[3.75] font-normal text-muted-foreground hover:bg-muted hover:no-underline", children: item.title }),
-      /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: "overflow-x-none", children: item.groups.flatMap(
-        (group, groupIndex) => group.links.map((link, linkIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
-          Pressable,
-          {
-            href: link.url,
-            className: "flex min-h-12 items-center gap-2 rounded-lg px-4 text-muted-foreground transition-colors duration-300 hover:bg-muted hover:text-foreground",
-            children: [
-              link.icon ? link.icon : link.iconName ? /* @__PURE__ */ jsxRuntime.jsx(
-                DynamicIcon,
-                {
-                  name: link.iconName,
-                  size: 16,
-                  className: "stroke-muted-foreground"
-                }
-              ) : null,
-              link.label
-            ]
-          },
-          `mobile-link-${groupIndex}-${linkIndex}`
-        ))
-      ) })
-    ] }) }, `nav-item-${index}`);
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Pressable,
-    {
-      href: item.url,
-      className: "flex h-15 items-center rounded-md p-0 px-4 text-left text-base leading-[3.75] font-normal text-muted-foreground ring-ring/10 outline-ring/50 transition-all hover:bg-muted focus-visible:ring-4 focus-visible:outline-1 nth-last-1:border-0",
-      children: item.title
-    },
-    `nav-link-${index}`
-  );
-};
 var NavbarSidebarMobile = ({
   logo,
   logoSlot,
@@ -61406,6 +61455,7 @@ var NavbarSidebarMobile = ({
                   NavigationMenu,
                   {
                     className: cn("hidden lg:flex", navigationMenuClassName),
+                    viewport: false,
                     children: /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuList, { children: menuSlot ? menuSlot : renderMenu()?.map(
                       (item, index) => item.items ? /* @__PURE__ */ jsxRuntime.jsxs(NavigationMenuItem, { children: [
                         /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuTrigger, { children: item.title }),
@@ -61902,6 +61952,7 @@ var MobileNavigationMenu7 = ({
       title: "Mobile Navigation",
       className: cn("bg-black/95", mobileMenuClassName),
       contentClassName: "flex flex-col items-center justify-center",
+      closeContainerClassName: "bg-black/95",
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col items-center justify-center", children: [
         /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "flex flex-col items-center gap-8", children: navItems?.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
           Pressable,
@@ -62115,36 +62166,44 @@ var DesktopMenuItem7 = ({
         ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4", children: [
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-3 text-[10px] text-muted-foreground uppercase", children: group.label }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: group.links.map((link) => /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuLink, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
-            Pressable,
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: group.links.map((link) => /* @__PURE__ */ jsxRuntime.jsx(
+            NavigationMenuLink,
             {
-              href: link.href,
-              className: "group flex cursor-pointer flex-row gap-3",
-              children: [
-                link.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-md border border-border bg-background", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: link.icon, size: 20 }) }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-0.5 text-sm font-medium whitespace-nowrap", children: [
-                    link.title,
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      DynamicIcon,
-                      {
-                        name: "lucide/chevron-right",
-                        size: 16,
-                        className: "text-primary! opacity-0 transition-all duration-200 group-hover:translate-x-0.5 group-hover:opacity-100"
-                      }
-                    )
-                  ] }),
-                  link.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs whitespace-nowrap text-muted-foreground", children: link.description })
-                ] })
-              ]
-            }
-          ) }, link.title)) }),
+              asChild: true,
+              className: "w-full",
+              children: /* @__PURE__ */ jsxRuntime.jsxs(
+                Pressable,
+                {
+                  href: link.href,
+                  className: "group flex cursor-pointer flex-row gap-3",
+                  children: [
+                    link.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-md border border-border bg-background", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: link.icon, size: 20 }) }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-0.5 text-sm font-medium whitespace-nowrap", children: [
+                        link.title,
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          DynamicIcon,
+                          {
+                            name: "lucide/chevron-right",
+                            size: 16,
+                            className: "opacity-0 transition-all duration-200 group-hover:translate-x-0.5 group-hover:opacity-100"
+                          }
+                        )
+                      ] }),
+                      link.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs whitespace-nowrap text-muted-foreground", children: link.description })
+                    ] })
+                  ]
+                }
+              )
+            },
+            link.title
+          )) }),
           group.featuredImage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuLink, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: group.featuredImage.href || "#", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg bg-muted p-3", children: /* @__PURE__ */ jsxRuntime.jsx(
             img.Img,
             {
               src: group.featuredImage.src,
               alt: group.featuredImage.alt || "Featured image",
-              className: "aspect-video w-full max-w-[240px] rounded-md object-cover object-center",
+              className: "aspect-video w-full max-w-60 rounded-md object-cover object-center",
               optixFlowConfig
             }
           ) }) }) }) })
@@ -62208,29 +62267,36 @@ var MobileNavigationMenu8 = ({
                 className: "border-b-0",
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx(AccordionTrigger, { className: "h-15 items-center p-0 px-4! text-base leading-[3.75] font-normal text-muted-foreground hover:bg-muted hover:no-underline", children: item.label }),
-                  /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: "overflow-x-none", children: item.groups.map((group, groupIndex) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 px-4 text-[10px] text-muted-foreground uppercase", children: group.label }),
-                    group.links.map((link) => /* @__PURE__ */ jsxRuntime.jsxs(
-                      Pressable,
-                      {
-                        href: link.href,
-                        className: "flex min-h-12 items-center gap-2 rounded-lg px-4 text-muted-foreground transition-colors duration-300 hover:bg-muted hover:text-foreground",
-                        onClick: onClose,
-                        children: [
-                          link.icon && /* @__PURE__ */ jsxRuntime.jsx(
-                            DynamicIcon,
-                            {
-                              name: link.icon,
-                              size: 16,
-                              className: "stroke-muted-foreground"
-                            }
-                          ),
+                  /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: "overflow-x-none", children: item.groups.map((group, groupIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
+                    "div",
+                    {
+                      className: "mb-4",
+                      children: [
+                        group.label && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "block mt-4 mb-2 px-4 text-[10px] text-muted-foreground uppercase", children: group.label }),
+                        group.links.map((link) => /* @__PURE__ */ jsxRuntime.jsxs(
+                          Pressable,
+                          {
+                            href: link.href,
+                            className: "flex min-h-12 items-center gap-2 rounded-lg pl-6 pr-4 text-muted-foreground transition-colors duration-300 hover:bg-muted hover:text-foreground",
+                            onClick: onClose,
+                            children: [
+                              link.icon && /* @__PURE__ */ jsxRuntime.jsx(
+                                DynamicIcon,
+                                {
+                                  name: link.icon,
+                                  size: 16,
+                                  className: "stroke-muted-foreground"
+                                }
+                              ),
+                              link.title
+                            ]
+                          },
                           link.title
-                        ]
-                      },
-                      link.title
-                    ))
-                  ] }, `mobile-group-${groupIndex}`)) })
+                        ))
+                      ]
+                    },
+                    `mobile-group-${groupIndex}`
+                  )) })
                 ]
               },
               `nav-item-${index}`
@@ -62351,37 +62417,6 @@ var NavbarStickyCompact = ({
       ) }, index)
     );
   }, [menuSlot, menu, isScrolled]);
-  const renderMobileMenu = React52.useMemo(() => {
-    if (menuSlot) return menuSlot;
-    if (!menu || menu.length === 0) return null;
-    return menu.map(
-      (item, index) => item.items ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-muted-foreground", children: item.title }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-1 pl-2", children: item.items.map((subItem, subIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
-          Pressable,
-          {
-            href: subItem.url,
-            className: "flex items-center gap-2 rounded-md py-2 text-sm hover:text-foreground",
-            onClick: () => setIsOpen(false),
-            children: [
-              subItem.icon && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: subItem.icon, size: 14 }),
-              subItem.title
-            ]
-          },
-          subIndex
-        )) })
-      ] }, index) : /* @__PURE__ */ jsxRuntime.jsx(
-        Pressable,
-        {
-          href: item.url,
-          className: "text-sm font-medium",
-          onClick: () => setIsOpen(false),
-          children: item.title
-        },
-        index
-      )
-    );
-  }, [menuSlot, menu]);
   const {
     sectionClasses,
     containerWrapperClasses,
@@ -62391,99 +62426,175 @@ var NavbarStickyCompact = ({
     sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Section,
-    {
-      background,
-      spacing: spacingOverride ?? spacing,
-      className: cn(
-        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,
-      containerClassName: sectionContainerClassName,
-      containerMaxWidth: sectionContainerMaxWidth,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxRuntime.jsxs(
-        "nav",
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Section,
+      {
+        background,
+        spacing: spacingOverride ?? spacing,
+        className: cn(
+          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,
+        containerClassName: sectionContainerClassName,
+        containerMaxWidth: sectionContainerMaxWidth,
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "nav",
+          {
+            className: cn(
+              "flex items-center justify-between transition-all duration-300",
+              isScrolled ? "h-14" : "h-16",
+              navClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                NavbarLogo,
+                {
+                  logo,
+                  logoSlot,
+                  logoClassName: cn(
+                    isScrolled ? "[&_img]:h-6 [&_span]:text-base" : "[&_img]:h-8 [&_span]:text-lg",
+                    "[&_img]:transition-all [&_img]:duration-300 [&_span]:transition-all [&_span]:duration-300",
+                    logoClassName
+                  ),
+                  optixFlowConfig
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu, { className: "hidden lg:flex", viewport: false, children: /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuList, { children: renderMenu }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "hidden items-center gap-2 lg:flex",
+                    actionsClassName
+                  ),
+                  children: renderAuthActions
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                Pressable,
+                {
+                  variant: "ghost",
+                  size: isScrolled ? "sm" : "icon",
+                  asButton: true,
+                  className: "lg:hidden transition-all duration-300",
+                  onClick: () => setIsOpen(!isOpen),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      DynamicIcon,
+                      {
+                        name: "lucide/menu",
+                        size: isScrolled ? 18 : 20
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Toggle menu" })
+                  ]
+                }
+              )
+            ]
+          }
+        ) }) }) })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      MobileNavigationMenu9,
+      {
+        open: isOpen,
+        setOpen: setIsOpen,
+        menu: menu ?? [],
+        menuSlot,
+        authActions,
+        authActionsSlot
+      }
+    )
+  ] });
+};
+var MobileNavigationMenu9 = ({
+  open,
+  setOpen,
+  menu,
+  menuSlot,
+  authActions,
+  authActionsSlot
+}) => {
+  const handleClose = () => setOpen(false);
+  const renderMobileAuthActions = React52.useMemo(() => {
+    if (authActionsSlot) return authActionsSlot;
+    if (!authActions || authActions.length === 0) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-6 flex flex-col gap-4", children: authActions.map((action, index) => {
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Pressable,
         {
-          className: cn(
-            "flex items-center justify-between transition-all duration-300",
-            isScrolled ? "h-14" : "h-16",
-            navClassName
-          ),
+          asButton: true,
+          className: cn("w-full", actionClassName),
+          onClick: handleClose,
+          ...pressableProps,
+          children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            icon,
+            label,
+            iconAfter
+          ] })
+        },
+        index
+      );
+    }) });
+  }, [authActionsSlot, authActions]);
+  return /* @__PURE__ */ jsxRuntime.jsx(NavbarMobileMenu, { open, onClose: handleClose, title: "Navigation Menu", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-screen-sm mx-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Accordion, { type: "multiple", className: "w-full", children: menuSlot ? menuSlot : menu.map(
+      (item, index) => item.items ? /* @__PURE__ */ jsxRuntime.jsxs(
+        AccordionItem,
+        {
+          value: `nav-${index}`,
+          className: "border-b-0",
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              NavbarLogo,
-              {
-                logo,
-                logoSlot,
-                logoClassName: cn(
-                  isScrolled ? "[&_img]:h-6 [&_span]:text-base" : "[&_img]:h-8 [&_span]:text-lg",
-                  "[&_img]:transition-all [&_img]:duration-300 [&_span]:transition-all [&_span]:duration-300",
-                  logoClassName
-                ),
-                optixFlowConfig
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu, { className: "hidden lg:flex", children: /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuList, { children: renderMenu }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: cn(
-                  "hidden items-center gap-2 lg:flex",
-                  actionsClassName
-                ),
-                children: renderAuthActions
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs(
+            /* @__PURE__ */ jsxRuntime.jsx(AccordionTrigger, { className: "h-15 items-center p-0 px-4! text-base leading-[3.75] font-normal text-muted-foreground hover:bg-muted hover:no-underline", children: item.title }),
+            /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: "overflow-x-none", children: item.items.map((subItem, subIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
               Pressable,
               {
-                variant: "ghost",
-                size: isScrolled ? "sm" : "icon",
-                asButton: true,
-                className: "lg:hidden transition-all duration-300",
-                onClick: () => setIsOpen(!isOpen),
+                href: subItem.url,
+                className: "flex min-h-12 items-center gap-2 rounded-lg px-4 text-muted-foreground transition-colors duration-300 hover:bg-muted hover:text-foreground",
+                onClick: handleClose,
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
+                  subItem.icon && /* @__PURE__ */ jsxRuntime.jsx(
                     DynamicIcon,
                     {
-                      name: "lucide/menu",
-                      size: isScrolled ? 18 : 20
+                      name: subItem.icon,
+                      size: 16,
+                      className: "stroke-muted-foreground"
                     }
                   ),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Toggle menu" })
+                  subItem.title
                 ]
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              NavbarMobileMenu,
-              {
-                open: isOpen,
-                onClose: () => setIsOpen(false),
-                title: "Navigation Menu",
-                children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-screen-sm mx-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
-                  renderMobileMenu,
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "div",
-                    {
-                      className: cn(
-                        "mt-4 flex flex-col gap-2 border-t pt-4",
-                        actionsClassName
-                      ),
-                      children: renderAuthActions
-                    }
-                  )
-                ] }) })
-              }
-            )
+              },
+              `mobile-link-${index}-${subIndex}`
+            )) })
           ]
-        }
-      ) }) }) })
-    }
-  );
+        },
+        `nav-item-${index}`
+      ) : /* @__PURE__ */ jsxRuntime.jsx(
+        Pressable,
+        {
+          href: item.url,
+          className: "flex h-15 items-center rounded-md p-0 px-4 text-left text-base leading-[3.75] font-normal text-muted-foreground ring-ring/10 outline-ring/50 transition-all hover:bg-muted focus-visible:ring-4 focus-visible:outline-1",
+          onClick: handleClose,
+          children: item.title
+        },
+        `nav-link-${index}`
+      )
+    ) }),
+    renderMobileAuthActions
+  ] }) }) });
 };
 var NavbarSearchFocused = ({
   className,
@@ -62881,19 +62992,19 @@ var NavbarSimpleLinks = ({
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      MobileNavigationMenu9,
+      MobileNavigationMenu10,
       {
         open: isOpen,
         onClose: handleMobileMenuClose,
         navItems: navItems ?? [],
-        mobileActions,
-        mobileActionsSlot,
+        mobileActions: mobileActions ?? actions,
+        mobileActionsSlot: mobileActionsSlot ?? actionsSlot,
         mobileMenuClassName
       }
     )
   ] });
 };
-var MobileNavigationMenu9 = ({
+var MobileNavigationMenu10 = ({
   open,
   onClose,
   navItems,