@opensite/ui 0.5.5 → 0.5.6

package/dist/navbar-enterprise-mega.js

@@ -1,10 +1,10 @@
 "use client";
 import * as React from 'react';
-import React__default, { useState, useEffect, Fragment } from 'react';
+import React__default, { useState, useEffect, useMemo, Fragment as Fragment$1 } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
-import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Img } from '@page-speed/img';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
@@ -1228,8 +1228,8 @@ var NavbarEnterpriseMega = ({
   actions,
   actionsSlot,
   layoutVariant = "fullScreenContainerizedLinks",
-  background = "white",
-  spacing = "none",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   optixFlowConfig
@@ -1251,7 +1251,7 @@ var NavbarEnterpriseMega = ({
   const handleMobileMenu = () => {
     setOpen(!open);
   };
-  const renderLogo = () => {
+  const renderLogo = useMemo(() => {
     if (logoSlot) return logoSlot;
     if (!logo) return null;
     return /* @__PURE__ */ jsxs(
@@ -1276,8 +1276,8 @@ var NavbarEnterpriseMega = ({
         ]
       }
     );
-  };
-  const renderActions = () => {
+  }, [logoSlot, logo, logoClassName, optixFlowConfig]);
+  const renderActions = useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
@@ -1289,13 +1289,13 @@ var NavbarEnterpriseMega = ({
         className: actionClassName,
         ...pressableProps
       } = action;
-      return /* @__PURE__ */ jsx(Pressable, { className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      return /* @__PURE__ */ jsx(Pressable, { className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
         icon,
         label,
         iconAfter
       ] }) }, index);
     });
-  };
+  }, [actionsSlot, actions]);
   const {
     sectionClasses,
     containerWrapperClasses,
@@ -1305,7 +1305,7 @@ var NavbarEnterpriseMega = ({
     sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsx(
       Section,
       {
@@ -1327,7 +1327,7 @@ var NavbarEnterpriseMega = ({
               navClassName
             ),
             children: [
-              renderLogo(),
+              renderLogo,
               /* @__PURE__ */ jsx(
                 NavigationMenu,
                 {
@@ -1345,7 +1345,7 @@ var NavbarEnterpriseMega = ({
                 }
               ),
               /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-3", actionsClassName), children: [
-                /* @__PURE__ */ jsx("div", { className: "hidden lg:flex lg:items-center lg:gap-3", children: renderActions() }),
+                /* @__PURE__ */ jsx("div", { className: "hidden lg:flex lg:items-center lg:gap-3", children: renderActions }),
                 /* @__PURE__ */ jsx("div", { className: "lg:hidden", children: /* @__PURE__ */ jsx(
                   Pressable,
                   {
@@ -1970,7 +1970,7 @@ var MobileNavigationMenu = ({
   actionsSlot,
   optixFlowConfig
 }) => {
-  const renderActions = () => {
+  const renderActions = useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
@@ -1988,7 +1988,7 @@ var MobileNavigationMenu = ({
           asButton: true,
           className: actionClassName,
           ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+          children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
             icon,
             label,
             iconAfter
@@ -1997,7 +1997,7 @@ var MobileNavigationMenu = ({
         index
       );
     });
-  };
+  }, [actionsSlot, actions]);
   return /* @__PURE__ */ jsx(Sheet, { open, children: /* @__PURE__ */ jsx(
     SheetContent,
     {
@@ -2006,7 +2006,7 @@ var MobileNavigationMenu = ({
       className: "inset-0 z-998 h-dvh w-full bg-background pt-16 [&>button]:hidden",
       children: /* @__PURE__ */ jsx("div", { className: "h-full overflow-y-auto pt-4 pb-20", children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
         /* @__PURE__ */ jsx("div", { className: "absolute -m-px h-px w-px overflow-hidden border-0 mask-clip-border p-0 text-nowrap whitespace-nowrap", children: /* @__PURE__ */ jsx(SheetTitle, { className: "text-primary", children: "Mobile Navigation" }) }),
-        /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-4", actionsClassName), children: renderActions() }),
+        /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-4", actionsClassName), children: renderActions }),
         /* @__PURE__ */ jsx(Accordion, { type: "multiple", className: "mt-6 w-full", children: menuLinks.map((item, index) => {
           const hasDropdown = Boolean(item.layout);
           if (hasDropdown) {

package/dist/navbar-feature-grid.cjs

@@ -1,9 +1,9 @@
 "use client";
 'use strict';
 
+var React = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
-var React = require('react');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
 var img = require('@page-speed/img');
@@ -34,7 +34,7 @@ var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrim
 var NavigationMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(NavigationMenuPrimitive);
 var SheetPrimitive__namespace = /*#__PURE__*/_interopNamespace(SheetPrimitive);
 
-// lib/utils.ts
+// components/blocks/navbars/navbar-feature-grid.tsx
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
@@ -1266,13 +1266,13 @@ var NavbarFeatureGrid = ({
   authActions,
   authActionsSlot,
   layoutVariant = "fullScreenContainerizedLinks",
-  background = "white",
-  spacing = "sm",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   optixFlowConfig
 }) => {
-  const renderLogo = () => {
+  const renderLogo = React.useMemo(() => {
     if (logoSlot) return logoSlot;
     if (!logo) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1294,8 +1294,8 @@ var NavbarFeatureGrid = ({
         ]
       }
     );
-  };
-  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) => {
@@ -1313,7 +1313,7 @@ var NavbarFeatureGrid = ({
         iconAfter
       ] }) }, index);
     });
-  };
+  }, [authActionsSlot, authActions]);
   const {
     sectionClasses,
     containerWrapperClasses,
@@ -1338,52 +1338,26 @@ var NavbarFeatureGrid = ({
         {
           className: cn("flex items-center justify-between", navClassName),
           children: [
-            renderLogo(),
+            renderLogo,
             /* @__PURE__ */ jsxRuntime.jsx(
               NavigationMenu,
               {
                 className: cn("hidden lg:block", navigationMenuClassName),
-                children: /* @__PURE__ */ jsxRuntime.jsxs(NavigationMenuList, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs(NavigationMenuItem, { children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuTrigger, { children: "Features" }),
-                    /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuContent, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid w-[600px] grid-cols-2 p-3", children: features?.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsx(
-                      NavigationMenuLink,
-                      {
-                        href: feature.href,
-                        className: "rounded-md p-3 transition-colors hover:bg-muted/70",
-                        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-1 font-semibold text-foreground", children: feature.title }),
-                          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: feature.description })
-                        ] })
-                      },
-                      index
-                    )) }) })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsxRuntime.jsx(
-                    NavigationMenuLink,
-                    {
-                      href: "#",
-                      className: navigationMenuTriggerStyle(),
-                      children: "Products"
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                children: /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuList, { children: features && features.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(NavigationMenuItem, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuTrigger, { children: "Features" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuContent, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid w-[600px] grid-cols-2 p-3", children: features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsx(
                     NavigationMenuLink,
                     {
-                      href: "#",
-                      className: navigationMenuTriggerStyle(),
-                      children: "Resources"
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsxRuntime.jsx(
-                    NavigationMenuLink,
-                    {
-                      href: "#",
-                      className: navigationMenuTriggerStyle(),
-                      children: "Contact"
-                    }
-                  ) })
-                ] })
+                      href: feature.href,
+                      className: "rounded-md p-3 transition-colors hover:bg-muted/70",
+                      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-1 font-semibold text-foreground", children: feature.title }),
+                        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: feature.description })
+                      ] })
+                    },
+                    index
+                  )) }) })
+                ] }) })
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -1393,7 +1367,7 @@ var NavbarFeatureGrid = ({
                   "hidden items-center gap-4 lg:flex",
                   actionsClassName
                 ),
-                children: renderAuthActions()
+                children: renderAuthActions
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsxs(Sheet, { children: [
@@ -1409,11 +1383,11 @@ var NavbarFeatureGrid = ({
                 }
               ) }),
               /* @__PURE__ */ jsxRuntime.jsxs(SheetContent, { side: "top", className: "max-h-screen overflow-auto", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(SheetHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { children: renderLogo() }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(SheetHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { children: renderLogo }) }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col p-4", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Accordion, { type: "single", collapsible: true, className: "mt-4 mb-2", children: /* @__PURE__ */ jsxRuntime.jsxs(AccordionItem, { value: "solutions", className: "border-none", children: [
+                  features && features.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Accordion, { type: "single", collapsible: true, className: "mt-4 mb-2", children: /* @__PURE__ */ jsxRuntime.jsxs(AccordionItem, { value: "solutions", className: "border-none", children: [
                     /* @__PURE__ */ jsxRuntime.jsx(AccordionTrigger, { className: "text-base hover:no-underline", children: "Features" }),
-                    /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid md:grid-cols-2", children: features?.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                    /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid md:grid-cols-2", children: features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsx(
                       Pressable,
                       {
                         href: feature.href,
@@ -1426,16 +1400,11 @@ var NavbarFeatureGrid = ({
                       index
                     )) }) })
                   ] }) }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: "#", className: "font-medium", children: "Templates" }),
-                    /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: "#", className: "font-medium", children: "Blog" }),
-                    /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: "#", className: "font-medium", children: "Pricing" })
-                  ] }),
                   /* @__PURE__ */ jsxRuntime.jsx(
                     "div",
                     {
                       className: cn("mt-6 flex flex-col gap-4", actionsClassName),
-                      children: renderAuthActions()
+                      children: renderAuthActions
                     }
                   )
                 ] })

package/dist/navbar-feature-grid.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-feature-grid.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-feature-grid.js

@@ -1,8 +1,8 @@
 "use client";
+import * as React from 'react';
+import React__default, { useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import * as React from 'react';
-import React__default from 'react';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Img } from '@page-speed/img';
@@ -10,7 +10,7 @@ import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
 import * as SheetPrimitive from '@radix-ui/react-dialog';
 
-// lib/utils.ts
+// components/blocks/navbars/navbar-feature-grid.tsx
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -1242,13 +1242,13 @@ var NavbarFeatureGrid = ({
   authActions,
   authActionsSlot,
   layoutVariant = "fullScreenContainerizedLinks",
-  background = "white",
-  spacing = "sm",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   optixFlowConfig
 }) => {
-  const renderLogo = () => {
+  const renderLogo = useMemo(() => {
     if (logoSlot) return logoSlot;
     if (!logo) return null;
     return /* @__PURE__ */ jsxs(
@@ -1270,8 +1270,8 @@ var NavbarFeatureGrid = ({
         ]
       }
     );
-  };
-  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) => {
@@ -1289,7 +1289,7 @@ var NavbarFeatureGrid = ({
         iconAfter
       ] }) }, index);
     });
-  };
+  }, [authActionsSlot, authActions]);
   const {
     sectionClasses,
     containerWrapperClasses,
@@ -1314,52 +1314,26 @@ var NavbarFeatureGrid = ({
         {
           className: cn("flex items-center justify-between", navClassName),
           children: [
-            renderLogo(),
+            renderLogo,
             /* @__PURE__ */ jsx(
               NavigationMenu,
               {
                 className: cn("hidden lg:block", navigationMenuClassName),
-                children: /* @__PURE__ */ jsxs(NavigationMenuList, { children: [
-                  /* @__PURE__ */ jsxs(NavigationMenuItem, { children: [
-                    /* @__PURE__ */ jsx(NavigationMenuTrigger, { children: "Features" }),
-                    /* @__PURE__ */ jsx(NavigationMenuContent, { children: /* @__PURE__ */ jsx("div", { className: "grid w-[600px] grid-cols-2 p-3", children: features?.map((feature, index) => /* @__PURE__ */ jsx(
-                      NavigationMenuLink,
-                      {
-                        href: feature.href,
-                        className: "rounded-md p-3 transition-colors hover:bg-muted/70",
-                        children: /* @__PURE__ */ jsxs("div", { children: [
-                          /* @__PURE__ */ jsx("p", { className: "mb-1 font-semibold text-foreground", children: feature.title }),
-                          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: feature.description })
-                        ] })
-                      },
-                      index
-                    )) }) })
-                  ] }),
-                  /* @__PURE__ */ jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsx(
-                    NavigationMenuLink,
-                    {
-                      href: "#",
-                      className: navigationMenuTriggerStyle(),
-                      children: "Products"
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsx(
+                children: /* @__PURE__ */ jsx(NavigationMenuList, { children: features && features.length > 0 && /* @__PURE__ */ jsxs(NavigationMenuItem, { children: [
+                  /* @__PURE__ */ jsx(NavigationMenuTrigger, { children: "Features" }),
+                  /* @__PURE__ */ jsx(NavigationMenuContent, { children: /* @__PURE__ */ jsx("div", { className: "grid w-[600px] grid-cols-2 p-3", children: features.map((feature, index) => /* @__PURE__ */ jsx(
                     NavigationMenuLink,
                     {
-                      href: "#",
-                      className: navigationMenuTriggerStyle(),
-                      children: "Resources"
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsx(
-                    NavigationMenuLink,
-                    {
-                      href: "#",
-                      className: navigationMenuTriggerStyle(),
-                      children: "Contact"
-                    }
-                  ) })
-                ] })
+                      href: feature.href,
+                      className: "rounded-md p-3 transition-colors hover:bg-muted/70",
+                      children: /* @__PURE__ */ jsxs("div", { children: [
+                        /* @__PURE__ */ jsx("p", { className: "mb-1 font-semibold text-foreground", children: feature.title }),
+                        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: feature.description })
+                      ] })
+                    },
+                    index
+                  )) }) })
+                ] }) })
               }
             ),
             /* @__PURE__ */ jsx(
@@ -1369,7 +1343,7 @@ var NavbarFeatureGrid = ({
                   "hidden items-center gap-4 lg:flex",
                   actionsClassName
                 ),
-                children: renderAuthActions()
+                children: renderAuthActions
               }
             ),
             /* @__PURE__ */ jsxs(Sheet, { children: [
@@ -1385,11 +1359,11 @@ var NavbarFeatureGrid = ({
                 }
               ) }),
               /* @__PURE__ */ jsxs(SheetContent, { side: "top", className: "max-h-screen overflow-auto", children: [
-                /* @__PURE__ */ jsx(SheetHeader, { children: /* @__PURE__ */ jsx(SheetTitle, { children: renderLogo() }) }),
+                /* @__PURE__ */ jsx(SheetHeader, { children: /* @__PURE__ */ jsx(SheetTitle, { children: renderLogo }) }),
                 /* @__PURE__ */ jsxs("div", { className: "flex flex-col p-4", children: [
-                  /* @__PURE__ */ jsx(Accordion, { type: "single", collapsible: true, className: "mt-4 mb-2", children: /* @__PURE__ */ jsxs(AccordionItem, { value: "solutions", className: "border-none", children: [
+                  features && features.length > 0 && /* @__PURE__ */ jsx(Accordion, { type: "single", collapsible: true, className: "mt-4 mb-2", children: /* @__PURE__ */ jsxs(AccordionItem, { value: "solutions", className: "border-none", children: [
                     /* @__PURE__ */ jsx(AccordionTrigger, { className: "text-base hover:no-underline", children: "Features" }),
-                    /* @__PURE__ */ jsx(AccordionContent, { children: /* @__PURE__ */ jsx("div", { className: "grid md:grid-cols-2", children: features?.map((feature, index) => /* @__PURE__ */ jsx(
+                    /* @__PURE__ */ jsx(AccordionContent, { children: /* @__PURE__ */ jsx("div", { className: "grid md:grid-cols-2", children: features.map((feature, index) => /* @__PURE__ */ jsx(
                       Pressable,
                       {
                         href: feature.href,
@@ -1402,16 +1376,11 @@ var NavbarFeatureGrid = ({
                       index
                     )) }) })
                   ] }) }),
-                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
-                    /* @__PURE__ */ jsx(Pressable, { href: "#", className: "font-medium", children: "Templates" }),
-                    /* @__PURE__ */ jsx(Pressable, { href: "#", className: "font-medium", children: "Blog" }),
-                    /* @__PURE__ */ jsx(Pressable, { href: "#", className: "font-medium", children: "Pricing" })
-                  ] }),
                   /* @__PURE__ */ jsx(
                     "div",
                     {
                       className: cn("mt-6 flex flex-col gap-4", actionsClassName),
-                      children: renderAuthActions()
+                      children: renderAuthActions
                     }
                   )
                 ] })

package/dist/navbar-floating-pill.cjs

@@ -1125,15 +1125,15 @@ var NavbarFloatingPill = ({
   navigationMenuClassName,
   actionsClassName,
   layoutVariant = "fullScreenContainerizedLinks",
-  background = "white",
-  spacing = "none",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   optixFlowConfig
 }) => {
   const [isMenuOpen, setIsMenuOpen] = React.useState(false);
   const [openDropdown, setOpenDropdown] = React.useState(null);
-  const renderLogo = () => {
+  const renderLogo = React.useMemo(() => {
     if (logoSlot) return logoSlot;
     if (!logo) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1155,8 +1155,8 @@ var NavbarFloatingPill = ({
         ]
       }
     );
-  };
-  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) => {
@@ -1183,12 +1183,12 @@ var NavbarFloatingPill = ({
         index
       );
     });
-  };
-  const renderMenu = () => {
+  }, [authActionsSlot, authActions]);
+  const renderMenu = React.useMemo(() => {
     if (menuSlot) return null;
     if (!items || items.length === 0) return null;
     return items;
-  };
+  }, [menuSlot, items]);
   const {
     sectionClasses,
     containerWrapperClasses,
@@ -1224,12 +1224,12 @@ var NavbarFloatingPill = ({
                   pillWrapperClassName
                 ),
                 children: [
-                  renderLogo(),
+                  renderLogo,
                   /* @__PURE__ */ jsxRuntime.jsx(
                     NavigationMenu,
                     {
                       className: cn("max-lg:hidden", navigationMenuClassName),
-                      children: /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuList, { children: menuSlot ? menuSlot : renderMenu()?.map(
+                      children: /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuList, { children: menuSlot ? menuSlot : renderMenu?.map(
                         (link) => link.dropdownItems ? /* @__PURE__ */ jsxRuntime.jsxs(NavigationMenuItem, { children: [
                           /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuTrigger, { className: "bg-transparent! px-1.5 data-[state=open]:bg-accent/50", children: link.label }),
                           /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuContent, { children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "w-[400px] space-y-2 p-4", children: link.dropdownItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuLink, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1257,7 +1257,7 @@ var NavbarFloatingPill = ({
                     }
                   ),
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2.5", actionsClassName), children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-lg:hidden", children: renderAuthActions() }),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-lg:hidden", children: renderAuthActions }),
                     /* @__PURE__ */ jsxRuntime.jsxs(
                       "button",
                       {
@@ -1302,7 +1302,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__ */ jsxRuntime.jsx("nav", { className: "flex flex-1 flex-col divide-y divide-border", children: menuSlot ? menuSlot : renderMenu()?.map(
+                children: /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "flex flex-1 flex-col divide-y divide-border", children: menuSlot ? menuSlot : renderMenu?.map(
                   (link) => link.dropdownItems ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-4 first:pt-0 last:pb-0", children: [
                     /* @__PURE__ */ jsxRuntime.jsxs(
                       "button",

package/dist/navbar-floating-pill.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-floating-pill.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';