@opensite/ui 0.5.5 → 0.5.7

package/dist/logos-partner-network.d.cts

@@ -1,6 +1,6 @@
 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 { A as ActionConfig, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';

package/dist/logos-partner-network.d.ts

@@ -1,6 +1,6 @@
 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 { A as ActionConfig, O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';

package/dist/logos-partner-network.js

@@ -1,14 +1,14 @@
 "use client";
+import * as React from 'react';
+import React__default, { useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Img } from '@page-speed/img';
-import * as React from 'react';
-import React__default from 'react';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 
-// lib/utils.ts
+// components/blocks/logos/logos-partner-network.tsx
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -851,13 +851,13 @@ function LogosPartnerNetwork({
   logosSlot,
   logosClassName,
   logoWrapperClassName,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   optixFlowConfig
 }) {
-  const renderActions = () => {
+  const renderActions = useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => /* @__PURE__ */ jsxs(
@@ -876,8 +876,8 @@ function LogosPartnerNetwork({
       },
       index
     ));
-  };
-  const renderLogos = () => {
+  }, [actions, actionsSlot]);
+  const renderLogos = useMemo(() => {
     if (logosSlot) return logosSlot;
     if (!logos || logos.length === 0) return null;
     return logos.map((partner, index) => /* @__PURE__ */ jsx(
@@ -902,7 +902,7 @@ function LogosPartnerNetwork({
       },
       index
     ));
-  };
+  }, [logos, logosSlot, logoWrapperClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -941,7 +941,7 @@ function LogosPartnerNetwork({
                   children: description
                 }
               ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-              /* @__PURE__ */ jsx("div", { className: actionsClassName, children: renderActions() })
+              /* @__PURE__ */ jsx("div", { className: actionsClassName, children: renderActions })
             ]
           }
         ),
@@ -952,7 +952,7 @@ function LogosPartnerNetwork({
               "mt-16 grid grid-cols-2 gap-8 sm:grid-cols-3 md:grid-cols-4",
               logosClassName
             ),
-            children: renderLogos()
+            children: renderLogos
           }
         )
       ]

package/dist/logos-two-row-grid.cjs

@@ -1,10 +1,10 @@
 "use client";
 'use strict';
 
+var React = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var img = require('@page-speed/img');
-var React = require('react');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -28,7 +28,7 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-// lib/utils.ts
+// components/blocks/logos/logos-two-row-grid.tsx
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
@@ -832,38 +832,47 @@ function LogosTwoRowGrid({
   logosClassName,
   rowClassName,
   logoWrapperClassName,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   optixFlowConfig
 }) {
-  const firstRow = companies?.slice(0, Math.ceil((companies?.length ?? 0) / 2)) ?? [];
-  const secondRow = companies?.slice(Math.ceil((companies?.length ?? 0) / 2)) ?? [];
-  const renderCompanyLogo = (company, index) => /* @__PURE__ */ jsxRuntime.jsx(
-    Pressable,
-    {
-      href: company.url,
-      className: cn(
-        "opacity-70 grayscale transition-all hover:opacity-100 hover:grayscale-0",
-        logoWrapperClassName,
-        company.className
-      ),
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        img.Img,
-        {
-          src: company.logo,
-          alt: `${company.name} logo`,
-          width: 120,
-          height: 40,
-          className: cn("h-10 w-auto object-contain", company.imgClassName),
-          optixFlowConfig
-        }
-      )
-    },
-    index
+  const firstRow = React.useMemo(
+    () => companies?.slice(0, Math.ceil((companies?.length ?? 0) / 2)) ?? [],
+    [companies]
+  );
+  const secondRow = React.useMemo(
+    () => companies?.slice(Math.ceil((companies?.length ?? 0) / 2)) ?? [],
+    [companies]
   );
-  const renderCompanies = () => {
+  const renderCompanyLogo = React.useMemo(
+    () => (company, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      Pressable,
+      {
+        href: company.url,
+        className: cn(
+          "opacity-70 grayscale transition-all hover:opacity-100 hover:grayscale-0",
+          logoWrapperClassName,
+          company.className
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          img.Img,
+          {
+            src: company.logo,
+            alt: `${company.name} logo`,
+            width: 120,
+            height: 40,
+            className: cn("h-10 w-auto object-contain", company.imgClassName),
+            optixFlowConfig
+          }
+        )
+      },
+      index
+    ),
+    [logoWrapperClassName, optixFlowConfig]
+  );
+  const renderCompanies = React.useMemo(() => {
     if (companiesSlot) return companiesSlot;
     if (!companies || companies.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-8", logosClassName), children: [
@@ -890,7 +899,7 @@ function LogosTwoRowGrid({
         }
       )
     ] });
-  };
+  }, [companiesSlot, companies, logosClassName, rowClassName, firstRow, secondRow, renderCompanyLogo]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -910,7 +919,7 @@ function LogosTwoRowGrid({
             children: heading
           }
         ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-        renderCompanies()
+        renderCompanies
       ]
     }
   );

package/dist/logos-two-row-grid.d.cts

@@ -1,6 +1,6 @@
 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 { O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';

package/dist/logos-two-row-grid.d.ts

@@ -1,6 +1,6 @@
 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 { O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';

package/dist/logos-two-row-grid.js

@@ -1,13 +1,13 @@
 "use client";
+import * as React from 'react';
+import React__default, { useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Img } from '@page-speed/img';
-import * as React from 'react';
-import React__default from 'react';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-// lib/utils.ts
+// components/blocks/logos/logos-two-row-grid.tsx
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -811,38 +811,47 @@ function LogosTwoRowGrid({
   logosClassName,
   rowClassName,
   logoWrapperClassName,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   optixFlowConfig
 }) {
-  const firstRow = companies?.slice(0, Math.ceil((companies?.length ?? 0) / 2)) ?? [];
-  const secondRow = companies?.slice(Math.ceil((companies?.length ?? 0) / 2)) ?? [];
-  const renderCompanyLogo = (company, index) => /* @__PURE__ */ jsx(
-    Pressable,
-    {
-      href: company.url,
-      className: cn(
-        "opacity-70 grayscale transition-all hover:opacity-100 hover:grayscale-0",
-        logoWrapperClassName,
-        company.className
-      ),
-      children: /* @__PURE__ */ jsx(
-        Img,
-        {
-          src: company.logo,
-          alt: `${company.name} logo`,
-          width: 120,
-          height: 40,
-          className: cn("h-10 w-auto object-contain", company.imgClassName),
-          optixFlowConfig
-        }
-      )
-    },
-    index
+  const firstRow = useMemo(
+    () => companies?.slice(0, Math.ceil((companies?.length ?? 0) / 2)) ?? [],
+    [companies]
+  );
+  const secondRow = useMemo(
+    () => companies?.slice(Math.ceil((companies?.length ?? 0) / 2)) ?? [],
+    [companies]
   );
-  const renderCompanies = () => {
+  const renderCompanyLogo = useMemo(
+    () => (company, index) => /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        href: company.url,
+        className: cn(
+          "opacity-70 grayscale transition-all hover:opacity-100 hover:grayscale-0",
+          logoWrapperClassName,
+          company.className
+        ),
+        children: /* @__PURE__ */ jsx(
+          Img,
+          {
+            src: company.logo,
+            alt: `${company.name} logo`,
+            width: 120,
+            height: 40,
+            className: cn("h-10 w-auto object-contain", company.imgClassName),
+            optixFlowConfig
+          }
+        )
+      },
+      index
+    ),
+    [logoWrapperClassName, optixFlowConfig]
+  );
+  const renderCompanies = useMemo(() => {
     if (companiesSlot) return companiesSlot;
     if (!companies || companies.length === 0) return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("space-y-8", logosClassName), children: [
@@ -869,7 +878,7 @@ function LogosTwoRowGrid({
         }
       )
     ] });
-  };
+  }, [companiesSlot, companies, logosClassName, rowClassName, firstRow, secondRow, renderCompanyLogo]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -889,7 +898,7 @@ function LogosTwoRowGrid({
             children: heading
           }
         ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-        renderCompanies()
+        renderCompanies
       ]
     }
   );

package/dist/masonry-motion-grid.cjs

@@ -404,8 +404,8 @@ function MasonryMotionGrid({
   animationDuration = 0.5,
   animationDelayMultiplier = 0.1,
   showDuplicateGrid = true,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   patternClassName,

package/dist/masonry-motion-grid.d.cts

@@ -1,6 +1,6 @@
 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 { O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';

package/dist/masonry-motion-grid.d.ts

@@ -1,6 +1,6 @@
 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 { O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';

package/dist/masonry-motion-grid.js

@@ -398,8 +398,8 @@ function MasonryMotionGrid({
   animationDuration = 0.5,
   animationDelayMultiplier = 0.1,
   showDuplicateGrid = true,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   patternClassName,

package/dist/media-hover-ctas.d.cts

@@ -1,6 +1,6 @@
 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 'react/jsx-runtime';
 import './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';

package/dist/media-hover-ctas.d.ts

@@ -1,6 +1,6 @@
 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 'react/jsx-runtime';
 import './blocks-k17uluAz.js';
 import 'class-variance-authority';

package/dist/navbar-animated-preview.cjs

@@ -1437,8 +1437,8 @@ var NavbarAnimatedPreview = ({
   actions,
   actionsSlot,
   layoutVariant = "fullScreenContainerizedLinks",
-  background = "white",
-  spacing = "none",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   optixFlowConfig
@@ -1465,7 +1465,7 @@ var NavbarAnimatedPreview = ({
   const handleMobileMenu = () => {
     setOpen(!open);
   };
-  const renderLogo = () => {
+  const renderLogo = React.useMemo(() => {
     if (logoSlot) return logoSlot;
     if (!logo) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1490,8 +1490,8 @@ var NavbarAnimatedPreview = ({
         ]
       }
     );
-  };
-  const renderActions = () => {
+  }, [logoSlot, logo, logoClassName, optixFlowConfig]);
+  const renderActions = React.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
@@ -1518,8 +1518,8 @@ var NavbarAnimatedPreview = ({
         index
       );
     });
-  };
-  const renderNavigation = () => {
+  }, [actionsSlot, actions]);
+  const renderNavigation = React.useMemo(() => {
     if (navigationSlot) return navigationSlot;
     if (!menuLinks || menuLinks.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuList, { children: menuLinks.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -1531,7 +1531,7 @@ var NavbarAnimatedPreview = ({
       },
       `desktop-link-${index}`
     )) });
-  };
+  }, [navigationSlot, menuLinks, optixFlowConfig]);
   const {
     sectionClasses,
     containerWrapperClasses,
@@ -1566,10 +1566,10 @@ var NavbarAnimatedPreview = ({
               "relative z-999 grid w-full grid-cols-2 items-center justify-between gap-8 xl:grid-cols-3"
             ),
             children: [
-              renderLogo(),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("hidden xl:flex", navClassName), children: renderNavigation() }),
+              renderLogo,
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("hidden xl:flex", navClassName), children: renderNavigation }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("justify-self-end", actionsClassName), children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden xl:block", children: renderActions() }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden xl:block", children: renderActions }),
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "xl:hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
                   Pressable,
                   {
@@ -1900,7 +1900,7 @@ var MobileNavigationMenu = ({
   actions,
   actionsSlot
 }) => {
-  const renderMobileActions = () => {
+  const renderMobileActions = React.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
@@ -1927,7 +1927,7 @@ var MobileNavigationMenu = ({
         index
       );
     });
-  };
+  }, [actionsSlot, actions]);
   return /* @__PURE__ */ jsxRuntime.jsx(Sheet, { open, children: /* @__PURE__ */ jsxRuntime.jsx(
     SheetContent,
     {
@@ -1940,7 +1940,7 @@ var MobileNavigationMenu = ({
           /* @__PURE__ */ jsxRuntime.jsx(Accordion, { type: "multiple", className: "w-full", children: menuLinks.map(
             (item, index) => renderMobileMenuItem(item, index)
           ) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: renderMobileActions() })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: renderMobileActions })
         ] })
       ] }) })
     }

package/dist/navbar-animated-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, a as IMenuLinkGroup, N as NavbarLayoutVariant } from './types-COVDidbn.cjs';
 import { A as ActionConfig, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';

package/dist/navbar-animated-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, a as IMenuLinkGroup, N as NavbarLayoutVariant } from './types-COVDidbn.js';
 import { A as ActionConfig, O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'class-variance-authority';

package/dist/navbar-animated-preview.js

@@ -1,6 +1,6 @@
 "use client";
 import * as React from 'react';
-import React__default, { forwardRef, useState, useEffect, useRef } from 'react';
+import React__default, { forwardRef, useState, useEffect, useMemo, useRef } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
@@ -1411,8 +1411,8 @@ var NavbarAnimatedPreview = ({
   actions,
   actionsSlot,
   layoutVariant = "fullScreenContainerizedLinks",
-  background = "white",
-  spacing = "none",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   optixFlowConfig
@@ -1439,7 +1439,7 @@ var NavbarAnimatedPreview = ({
   const handleMobileMenu = () => {
     setOpen(!open);
   };
-  const renderLogo = () => {
+  const renderLogo = useMemo(() => {
     if (logoSlot) return logoSlot;
     if (!logo) return null;
     return /* @__PURE__ */ jsxs(
@@ -1464,8 +1464,8 @@ var NavbarAnimatedPreview = ({
         ]
       }
     );
-  };
-  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) => {
@@ -1492,8 +1492,8 @@ var NavbarAnimatedPreview = ({
         index
       );
     });
-  };
-  const renderNavigation = () => {
+  }, [actionsSlot, actions]);
+  const renderNavigation = useMemo(() => {
     if (navigationSlot) return navigationSlot;
     if (!menuLinks || menuLinks.length === 0) return null;
     return /* @__PURE__ */ jsx(NavigationMenuList, { children: menuLinks.map((item, index) => /* @__PURE__ */ jsx(
@@ -1505,7 +1505,7 @@ var NavbarAnimatedPreview = ({
       },
       `desktop-link-${index}`
     )) });
-  };
+  }, [navigationSlot, menuLinks, optixFlowConfig]);
   const {
     sectionClasses,
     containerWrapperClasses,
@@ -1540,10 +1540,10 @@ var NavbarAnimatedPreview = ({
               "relative z-999 grid w-full grid-cols-2 items-center justify-between gap-8 xl:grid-cols-3"
             ),
             children: [
-              renderLogo(),
-              /* @__PURE__ */ jsx("div", { className: cn("hidden xl:flex", navClassName), children: renderNavigation() }),
+              renderLogo,
+              /* @__PURE__ */ jsx("div", { className: cn("hidden xl:flex", navClassName), children: renderNavigation }),
               /* @__PURE__ */ jsxs("div", { className: cn("justify-self-end", actionsClassName), children: [
-                /* @__PURE__ */ jsx("div", { className: "hidden xl:block", children: renderActions() }),
+                /* @__PURE__ */ jsx("div", { className: "hidden xl:block", children: renderActions }),
                 /* @__PURE__ */ jsx("div", { className: "xl:hidden", children: /* @__PURE__ */ jsx(
                   Pressable,
                   {
@@ -1874,7 +1874,7 @@ var MobileNavigationMenu = ({
   actions,
   actionsSlot
 }) => {
-  const renderMobileActions = () => {
+  const renderMobileActions = useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
@@ -1901,7 +1901,7 @@ var MobileNavigationMenu = ({
         index
       );
     });
-  };
+  }, [actionsSlot, actions]);
   return /* @__PURE__ */ jsx(Sheet, { open, children: /* @__PURE__ */ jsx(
     SheetContent,
     {
@@ -1914,7 +1914,7 @@ var MobileNavigationMenu = ({
           /* @__PURE__ */ jsx(Accordion, { type: "multiple", className: "w-full", children: menuLinks.map(
             (item, index) => renderMobileMenuItem(item, index)
           ) }),
-          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: renderMobileActions() })
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: renderMobileActions })
         ] })
       ] }) })
     }