@opensite/ui 0.5.5 → 0.5.6

package/dist/navbar-floating-pill.js

@@ -1,6 +1,6 @@
 "use client";
 import * as React from 'react';
-import React__default, { useState } from 'react';
+import React__default, { useState, useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
@@ -1103,15 +1103,15 @@ var NavbarFloatingPill = ({
   navigationMenuClassName,
   actionsClassName,
   layoutVariant = "fullScreenContainerizedLinks",
-  background = "white",
-  spacing = "none",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   optixFlowConfig
 }) => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const [openDropdown, setOpenDropdown] = useState(null);
-  const renderLogo = () => {
+  const renderLogo = useMemo(() => {
     if (logoSlot) return logoSlot;
     if (!logo) return null;
     return /* @__PURE__ */ jsxs(
@@ -1133,8 +1133,8 @@ var NavbarFloatingPill = ({
         ]
       }
     );
-  };
-  const renderAuthActions = () => {
+  }, [logoSlot, logo, logoClassName, optixFlowConfig]);
+  const renderAuthActions = useMemo(() => {
     if (authActionsSlot) return authActionsSlot;
     if (!authActions || authActions.length === 0) return null;
     return authActions.map((action, index) => {
@@ -1161,12 +1161,12 @@ var NavbarFloatingPill = ({
         index
       );
     });
-  };
-  const renderMenu = () => {
+  }, [authActionsSlot, authActions]);
+  const renderMenu = useMemo(() => {
     if (menuSlot) return null;
     if (!items || items.length === 0) return null;
     return items;
-  };
+  }, [menuSlot, items]);
   const {
     sectionClasses,
     containerWrapperClasses,
@@ -1202,12 +1202,12 @@ var NavbarFloatingPill = ({
                   pillWrapperClassName
                 ),
                 children: [
-                  renderLogo(),
+                  renderLogo,
                   /* @__PURE__ */ jsx(
                     NavigationMenu,
                     {
                       className: cn("max-lg:hidden", navigationMenuClassName),
-                      children: /* @__PURE__ */ jsx(NavigationMenuList, { children: menuSlot ? menuSlot : renderMenu()?.map(
+                      children: /* @__PURE__ */ jsx(NavigationMenuList, { children: menuSlot ? menuSlot : renderMenu?.map(
                         (link) => link.dropdownItems ? /* @__PURE__ */ jsxs(NavigationMenuItem, { children: [
                           /* @__PURE__ */ jsx(NavigationMenuTrigger, { className: "bg-transparent! px-1.5 data-[state=open]:bg-accent/50", children: link.label }),
                           /* @__PURE__ */ jsx(NavigationMenuContent, { children: /* @__PURE__ */ jsx("ul", { className: "w-[400px] space-y-2 p-4", children: link.dropdownItems.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavigationMenuLink, { asChild: true, children: /* @__PURE__ */ jsx(
@@ -1235,7 +1235,7 @@ var NavbarFloatingPill = ({
                     }
                   ),
                   /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2.5", actionsClassName), children: [
-                    /* @__PURE__ */ jsx("div", { className: "max-lg:hidden", children: renderAuthActions() }),
+                    /* @__PURE__ */ jsx("div", { className: "max-lg:hidden", children: renderAuthActions }),
                     /* @__PURE__ */ jsxs(
                       "button",
                       {
@@ -1280,7 +1280,7 @@ var NavbarFloatingPill = ({
                   "fixed inset-x-0 top-[calc(100%+1rem)] flex flex-col rounded-2xl border bg-background p-6 transition-all duration-300 ease-in-out lg:hidden",
                   isMenuOpen ? "visible translate-y-0 opacity-100" : "invisible -translate-y-4 opacity-0"
                 ),
-                children: /* @__PURE__ */ jsx("nav", { className: "flex flex-1 flex-col divide-y divide-border", children: menuSlot ? menuSlot : renderMenu()?.map(
+                children: /* @__PURE__ */ jsx("nav", { className: "flex flex-1 flex-col divide-y divide-border", children: menuSlot ? menuSlot : renderMenu?.map(
                   (link) => link.dropdownItems ? /* @__PURE__ */ jsxs("div", { className: "py-4 first:pt-0 last:pb-0", children: [
                     /* @__PURE__ */ jsxs(
                       "button",

package/dist/navbar-fullscreen-menu.cjs

@@ -881,15 +881,15 @@ var NavbarFullscreenMenu = ({
   menuItemsClassName,
   socialLinksClassName,
   layoutVariant = "fullScreenContainerizedLinks",
-  background = "white",
-  spacing = "none",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   optixFlowConfig
 }) => {
   const [isOpen, setIsOpen] = React.useState(false);
   const toggleMenu = () => setIsOpen(!isOpen);
-  const renderLogo = () => {
+  const renderLogo = React.useMemo(() => {
     if (logoSlot) return logoSlot;
     if (!logo) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -911,8 +911,8 @@ var NavbarFullscreenMenu = ({
         ]
       }
     );
-  };
-  const renderMenuItems = () => {
+  }, [logoSlot, logo, logoClassName, optixFlowConfig]);
+  const renderMenuItems = React.useMemo(() => {
     if (menuSlot) return menuSlot;
     if (!menuItems || menuItems.length === 0) return null;
     return menuItems.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -930,8 +930,8 @@ var NavbarFullscreenMenu = ({
       },
       item.label
     ));
-  };
-  const renderSocialLinks = () => {
+  }, [menuSlot, menuItems]);
+  const renderSocialLinks = React.useMemo(() => {
     if (socialLinksSlot) return socialLinksSlot;
     if (!socialLinks || socialLinks.length === 0) return null;
     return socialLinks.map((link, index) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -946,7 +946,7 @@ var NavbarFullscreenMenu = ({
       },
       link.label
     ));
-  };
+  }, [socialLinksSlot, socialLinks]);
   const {
     sectionClasses,
     containerWrapperClasses,
@@ -975,7 +975,7 @@ var NavbarFullscreenMenu = ({
               headerClassName
             ),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "z-50", children: renderLogo() }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "z-50", children: renderLogo }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "z-50", children: /* @__PURE__ */ jsxRuntime.jsxs(
                 "button",
                 {
@@ -987,7 +987,7 @@ var NavbarFullscreenMenu = ({
                       {
                         className: `inline-block transition-all duration-200 ${isOpen ? "opacity-0 -translate-y-2" : "opacity-100 translate-y-0"}`,
                         style: { display: isOpen ? "none" : "inline-block" },
-                        children: "MENU"
+                        children: isOpen ? "" : "\u2630"
                       }
                     ),
                     /* @__PURE__ */ jsxRuntime.jsx(
@@ -995,7 +995,7 @@ var NavbarFullscreenMenu = ({
                       {
                         className: `inline-block transition-all duration-200 ${isOpen ? "opacity-100 translate-y-0" : "opacity-0 translate-y-2"}`,
                         style: { display: isOpen ? "inline-block" : "none" },
-                        children: "CLOSE"
+                        children: isOpen ? "\u2715" : ""
                       }
                     )
                   ]
@@ -1012,7 +1012,7 @@ var NavbarFullscreenMenu = ({
               overlayClassName
             ),
             children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col items-center justify-center px-6", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-16 text-center", menuItemsClassName), children: renderMenuItems() }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-16 text-center", menuItemsClassName), children: renderMenuItems }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
@@ -1021,7 +1021,7 @@ var NavbarFullscreenMenu = ({
                     socialLinksClassName
                   ),
                   style: { animationDelay: "0.7s", animationFillMode: "both" },
-                  children: renderSocialLinks()
+                  children: renderSocialLinks
                 }
               )
             ] })

package/dist/navbar-fullscreen-menu.d.cts

@@ -1,7 +1,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 { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BudEyO90.cjs';
 import { L as LogoConfig, N as NavbarLayoutVariant } from './types-COVDidbn.cjs';
 import { O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';

package/dist/navbar-fullscreen-menu.d.ts

@@ -1,7 +1,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 { f as SectionBackground, g as SectionSpacing } from './community-initiatives-FG_f_Y4z.js';
 import { L as LogoConfig, N as NavbarLayoutVariant } from './types-COVDidbn.js';
 import { O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'class-variance-authority';

package/dist/navbar-fullscreen-menu.js

@@ -1,6 +1,6 @@
 "use client";
 import * as React from 'react';
-import React__default, { useState } from 'react';
+import React__default, { useState, useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
@@ -860,15 +860,15 @@ var NavbarFullscreenMenu = ({
   menuItemsClassName,
   socialLinksClassName,
   layoutVariant = "fullScreenContainerizedLinks",
-  background = "white",
-  spacing = "none",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   optixFlowConfig
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const toggleMenu = () => setIsOpen(!isOpen);
-  const renderLogo = () => {
+  const renderLogo = useMemo(() => {
     if (logoSlot) return logoSlot;
     if (!logo) return null;
     return /* @__PURE__ */ jsxs(
@@ -890,8 +890,8 @@ var NavbarFullscreenMenu = ({
         ]
       }
     );
-  };
-  const renderMenuItems = () => {
+  }, [logoSlot, logo, logoClassName, optixFlowConfig]);
+  const renderMenuItems = useMemo(() => {
     if (menuSlot) return menuSlot;
     if (!menuItems || menuItems.length === 0) return null;
     return menuItems.map((item, index) => /* @__PURE__ */ jsx(
@@ -909,8 +909,8 @@ var NavbarFullscreenMenu = ({
       },
       item.label
     ));
-  };
-  const renderSocialLinks = () => {
+  }, [menuSlot, menuItems]);
+  const renderSocialLinks = useMemo(() => {
     if (socialLinksSlot) return socialLinksSlot;
     if (!socialLinks || socialLinks.length === 0) return null;
     return socialLinks.map((link, index) => /* @__PURE__ */ jsx(
@@ -925,7 +925,7 @@ var NavbarFullscreenMenu = ({
       },
       link.label
     ));
-  };
+  }, [socialLinksSlot, socialLinks]);
   const {
     sectionClasses,
     containerWrapperClasses,
@@ -954,7 +954,7 @@ var NavbarFullscreenMenu = ({
               headerClassName
             ),
             children: [
-              /* @__PURE__ */ jsx("div", { className: "z-50", children: renderLogo() }),
+              /* @__PURE__ */ jsx("div", { className: "z-50", children: renderLogo }),
               /* @__PURE__ */ jsx("div", { className: "z-50", children: /* @__PURE__ */ jsxs(
                 "button",
                 {
@@ -966,7 +966,7 @@ var NavbarFullscreenMenu = ({
                       {
                         className: `inline-block transition-all duration-200 ${isOpen ? "opacity-0 -translate-y-2" : "opacity-100 translate-y-0"}`,
                         style: { display: isOpen ? "none" : "inline-block" },
-                        children: "MENU"
+                        children: isOpen ? "" : "\u2630"
                       }
                     ),
                     /* @__PURE__ */ jsx(
@@ -974,7 +974,7 @@ var NavbarFullscreenMenu = ({
                       {
                         className: `inline-block transition-all duration-200 ${isOpen ? "opacity-100 translate-y-0" : "opacity-0 translate-y-2"}`,
                         style: { display: isOpen ? "inline-block" : "none" },
-                        children: "CLOSE"
+                        children: isOpen ? "\u2715" : ""
                       }
                     )
                   ]
@@ -991,7 +991,7 @@ var NavbarFullscreenMenu = ({
               overlayClassName
             ),
             children: /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col items-center justify-center px-6", children: [
-              /* @__PURE__ */ jsx("div", { className: cn("mb-16 text-center", menuItemsClassName), children: renderMenuItems() }),
+              /* @__PURE__ */ jsx("div", { className: cn("mb-16 text-center", menuItemsClassName), children: renderMenuItems }),
               /* @__PURE__ */ jsx(
                 "div",
                 {
@@ -1000,7 +1000,7 @@ var NavbarFullscreenMenu = ({
                     socialLinksClassName
                   ),
                   style: { animationDelay: "0.7s", animationFillMode: "both" },
-                  children: renderSocialLinks()
+                  children: renderSocialLinks
                 }
               )
             ] })

package/dist/navbar-icon-links.cjs

@@ -1206,15 +1206,15 @@ var NavbarIconLinks = ({
   navigationMenuClassName,
   actionsClassName,
   layoutVariant = "fullScreenContainerizedLinks",
-  background = "white",
-  spacing = "none",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   optixFlowConfig
 }) => {
   const [activeItem, setActiveItem] = React.useState(navItems?.[0]?.title || "");
   const [isOpen, setIsOpen] = React.useState(false);
-  const renderLogo = () => {
+  const renderLogo = React.useMemo(() => {
     if (logoSlot) return logoSlot;
     if (!logo) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1236,8 +1236,8 @@ var NavbarIconLinks = ({
         ]
       }
     );
-  };
-  const renderAuthActions = () => {
+  }, [logoSlot, logo, logoClassName, optixFlowConfig]);
+  const renderAuthActions = React.useMemo(() => {
     if (authActionsSlot) return authActionsSlot;
     if (!authActions || authActions.length === 0) return null;
     return authActions.map((action, index) => {
@@ -1266,12 +1266,12 @@ var NavbarIconLinks = ({
         label && /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "bottom", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: label }) })
       ] }) }, index);
     });
-  };
-  const renderNavItems = () => {
+  }, [authActionsSlot, authActions]);
+  const renderNavItems = React.useMemo(() => {
     if (navItemsSlot) return null;
     if (!navItems || navItems.length === 0) return null;
     return navItems;
-  };
+  }, [navItemsSlot, navItems]);
   const {
     sectionClasses,
     containerWrapperClasses,
@@ -1300,12 +1300,12 @@ var NavbarIconLinks = ({
           ),
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-6", children: [
-              renderLogo(),
+              renderLogo,
               /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsxRuntime.jsx(
                 NavigationMenu,
                 {
                   className: cn("hidden lg:flex", navigationMenuClassName),
-                  children: /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuList, { className: "gap-1", children: navItemsSlot ? navItemsSlot : renderNavItems()?.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+                  children: /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuList, { className: "gap-1", children: navItemsSlot ? navItemsSlot : renderNavItems?.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
                     /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuLink, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
                       Pressable,
                       {
@@ -1333,7 +1333,7 @@ var NavbarIconLinks = ({
                   "hidden items-center gap-2 lg:flex",
                   actionsClassName
                 ),
-                children: renderAuthActions()
+                children: renderAuthActions
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsxs(Sheet, { open: isOpen, onOpenChange: setIsOpen, children: [
@@ -1354,7 +1354,7 @@ var NavbarIconLinks = ({
               /* @__PURE__ */ jsxRuntime.jsxs(SheetContent, { side: "right", className: "w-[280px]", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { className: "sr-only", children: "Navigation Menu" }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 pt-8", children: [
-                  navItemsSlot ? navItemsSlot : renderNavItems()?.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+                  navItemsSlot ? navItemsSlot : renderNavItems?.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
                     Pressable,
                     {
                       href: item.url,

package/dist/navbar-icon-links.d.cts

@@ -1,7 +1,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 { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BudEyO90.cjs';
 import { L as LogoConfig, N as NavbarLayoutVariant } from './types-COVDidbn.cjs';
 import { A as ActionConfig, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';

package/dist/navbar-icon-links.d.ts

@@ -1,7 +1,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 { f as SectionBackground, g as SectionSpacing } from './community-initiatives-FG_f_Y4z.js';
 import { L as LogoConfig, N as NavbarLayoutVariant } from './types-COVDidbn.js';
 import { A as ActionConfig, O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'class-variance-authority';

package/dist/navbar-icon-links.js

@@ -1,6 +1,6 @@
 "use client";
 import * as React from 'react';
-import React__default, { useState } from 'react';
+import React__default, { useState, useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
@@ -1182,15 +1182,15 @@ var NavbarIconLinks = ({
   navigationMenuClassName,
   actionsClassName,
   layoutVariant = "fullScreenContainerizedLinks",
-  background = "white",
-  spacing = "none",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   optixFlowConfig
 }) => {
   const [activeItem, setActiveItem] = useState(navItems?.[0]?.title || "");
   const [isOpen, setIsOpen] = useState(false);
-  const renderLogo = () => {
+  const renderLogo = useMemo(() => {
     if (logoSlot) return logoSlot;
     if (!logo) return null;
     return /* @__PURE__ */ jsxs(
@@ -1212,8 +1212,8 @@ var NavbarIconLinks = ({
         ]
       }
     );
-  };
-  const renderAuthActions = () => {
+  }, [logoSlot, logo, logoClassName, optixFlowConfig]);
+  const renderAuthActions = useMemo(() => {
     if (authActionsSlot) return authActionsSlot;
     if (!authActions || authActions.length === 0) return null;
     return authActions.map((action, index) => {
@@ -1242,12 +1242,12 @@ var NavbarIconLinks = ({
         label && /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", children: /* @__PURE__ */ jsx("p", { children: label }) })
       ] }) }, index);
     });
-  };
-  const renderNavItems = () => {
+  }, [authActionsSlot, authActions]);
+  const renderNavItems = useMemo(() => {
     if (navItemsSlot) return null;
     if (!navItems || navItems.length === 0) return null;
     return navItems;
-  };
+  }, [navItemsSlot, navItems]);
   const {
     sectionClasses,
     containerWrapperClasses,
@@ -1276,12 +1276,12 @@ var NavbarIconLinks = ({
           ),
           children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-6", children: [
-              renderLogo(),
+              renderLogo,
               /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsx(
                 NavigationMenu,
                 {
                   className: cn("hidden lg:flex", navigationMenuClassName),
-                  children: /* @__PURE__ */ jsx(NavigationMenuList, { className: "gap-1", children: navItemsSlot ? navItemsSlot : renderNavItems()?.map((item, index) => /* @__PURE__ */ jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+                  children: /* @__PURE__ */ jsx(NavigationMenuList, { className: "gap-1", children: navItemsSlot ? navItemsSlot : renderNavItems?.map((item, index) => /* @__PURE__ */ jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
                     /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(NavigationMenuLink, { asChild: true, children: /* @__PURE__ */ jsxs(
                       Pressable,
                       {
@@ -1309,7 +1309,7 @@ var NavbarIconLinks = ({
                   "hidden items-center gap-2 lg:flex",
                   actionsClassName
                 ),
-                children: renderAuthActions()
+                children: renderAuthActions
               }
             ),
             /* @__PURE__ */ jsxs(Sheet, { open: isOpen, onOpenChange: setIsOpen, children: [
@@ -1330,7 +1330,7 @@ var NavbarIconLinks = ({
               /* @__PURE__ */ jsxs(SheetContent, { side: "right", className: "w-[280px]", children: [
                 /* @__PURE__ */ jsx(SheetTitle, { className: "sr-only", children: "Navigation Menu" }),
                 /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 pt-8", children: [
-                  navItemsSlot ? navItemsSlot : renderNavItems()?.map((item, index) => /* @__PURE__ */ jsxs(
+                  navItemsSlot ? navItemsSlot : renderNavItems?.map((item, index) => /* @__PURE__ */ jsxs(
                     Pressable,
                     {
                       href: item.url,

package/dist/navbar-image-preview.cjs

@@ -1328,8 +1328,8 @@ var NavbarImagePreview = ({
   socialLinks,
   socialLinksSlot,
   layoutVariant = "fullScreenContainerizedLinks",
-  background = "white",
-  spacing = "none",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   optixFlowConfig
@@ -1369,7 +1369,7 @@ var NavbarImagePreview = ({
   const handleMobileMenu = () => {
     setOpen(!open);
   };
-  const renderLogo = () => {
+  const renderLogo = React.useMemo(() => {
     if (logoSlot) return logoSlot;
     if (!logo) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1394,8 +1394,8 @@ var NavbarImagePreview = ({
         ]
       }
     );
-  };
-  const renderNavigation = () => {
+  }, [logoSlot, logo, logoClassName, optixFlowConfig]);
+  const renderNavigation = React.useMemo(() => {
     if (navigationSlot) return navigationSlot;
     if (!navigation || navigation.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuList, { children: navigation.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -1407,8 +1407,8 @@ var NavbarImagePreview = ({
       },
       `desktop-link-${index}`
     )) });
-  };
-  const renderAuthActions = () => {
+  }, [navigationSlot, navigation, optixFlowConfig]);
+  const renderAuthActions = React.useMemo(() => {
     if (authActionsSlot) return authActionsSlot;
     if (!authActions || authActions.length === 0) return null;
     return authActions.map((action, index) => {
@@ -1435,7 +1435,7 @@ var NavbarImagePreview = ({
         index
       );
     });
-  };
+  }, [authActionsSlot, authActions]);
   const {
     sectionClasses,
     containerWrapperClasses,
@@ -1472,7 +1472,7 @@ var NavbarImagePreview = ({
                   navClassName
                 ),
                 children: [
-                  renderLogo(),
+                  renderLogo,
                   /* @__PURE__ */ jsxRuntime.jsx(
                     NavigationMenu,
                     {
@@ -1480,11 +1480,11 @@ var NavbarImagePreview = ({
                         "hidden lg:flex [&>div:nth-child(2)]:left-1/2 [&>div:nth-child(2)]:-translate-x-1/2",
                         navigationMenuClassName
                       ),
-                      children: renderNavigation()
+                      children: renderNavigation
                     }
                   ),
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-3.5", actionsClassName), children: [
-                    renderAuthActions(),
+                    renderAuthActions,
                     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
                       Pressable,
                       {
@@ -1601,7 +1601,7 @@ var MobileNavigationMenu = ({
   authActions,
   authActionsSlot
 }) => {
-  const renderMobileNavigation = () => {
+  const renderMobileNavigation = React.useMemo(() => {
     if (mobileNavigationSlot) return mobileNavigationSlot;
     if (!mobileNavigation || mobileNavigation.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid w-full grid-cols-2 gap-x-4 gap-y-10", children: mobileNavigation.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1628,8 +1628,8 @@ var MobileNavigationMenu = ({
       },
       `mobile-menu-item-${index}`
     )) });
-  };
-  const renderSocialLinks = () => {
+  }, [mobileNavigationSlot, mobileNavigation]);
+  const renderSocialLinks = React.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: [
@@ -1647,8 +1647,8 @@ var MobileNavigationMenu = ({
         `social-link-${index}`
       )) })
     ] });
-  };
-  const renderMobileAuthActions = () => {
+  }, [socialLinksSlot, socialLinks]);
+  const renderMobileAuthActions = React.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) => {
@@ -1675,7 +1675,7 @@ var MobileNavigationMenu = ({
         index
       );
     }) });
-  };
+  }, [authActionsSlot, authActions]);
   return /* @__PURE__ */ jsxRuntime.jsx(Sheet, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxRuntime.jsx(
     SheetContent,
     {
@@ -1695,9 +1695,9 @@ var MobileNavigationMenu = ({
           }
         ) }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col justify-between gap-30 pt-24", children: [
-          renderMobileNavigation(),
-          renderSocialLinks(),
-          renderMobileAuthActions()
+          renderMobileNavigation,
+          renderSocialLinks,
+          renderMobileAuthActions
         ] })
       ] }) })
     }

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

@@ -1,7 +1,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 { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BudEyO90.cjs';
 import { L as LogoConfig, b as ILinkItem, N as NavbarLayoutVariant } from './types-COVDidbn.cjs';
 import { A as ActionConfig, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';

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

@@ -1,7 +1,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 { f as SectionBackground, g as SectionSpacing } from './community-initiatives-FG_f_Y4z.js';
 import { L as LogoConfig, b as ILinkItem, N as NavbarLayoutVariant } from './types-COVDidbn.js';
 import { A as ActionConfig, O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'class-variance-authority';