@opensite/ui 0.5.5 → 0.5.7

package/dist/project-studio-hover-preview.js

@@ -1,6 +1,6 @@
 "use client";
 import { useMotionValue, useSpring, AnimatePresence, motion } from 'framer-motion';
-import React, { useState, useRef, useCallback } from 'react';
+import React, { useState, useRef, useCallback, useMemo } from 'react';
 import { Img } from '@page-speed/img';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -387,6 +387,7 @@ function ProjectStudioHoverPreview({
   heading,
   projects,
   projectsSlot,
+  tooltipLabel,
   optixFlowConfig,
   background,
   spacing,
@@ -433,7 +434,7 @@ function ProjectStudioHoverPreview({
     setHoveredIndex(null);
     setIsHovering(false);
   }, []);
-  const renderProjects = () => {
+  const renderedProjects = useMemo(() => {
     if (projectsSlot) return projectsSlot;
     if (!projects || projects.length === 0) return null;
     return projects.map((project, index) => /* @__PURE__ */ jsxs("div", { className: cn("group relative", cardClassName), children: [
@@ -464,7 +465,7 @@ function ProjectStudioHoverPreview({
         ] })
       ] })
     ] }, index));
-  };
+  }, [projectsSlot, projects, cardClassName, optixFlowConfig, hoveredIndex]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -495,7 +496,7 @@ function ProjectStudioHoverPreview({
             onMouseMove: handleContainerMouseMove,
             onMouseLeave: handleContainerMouseLeave,
             children: [
-              renderProjects(),
+              renderedProjects,
               /* @__PURE__ */ jsx(AnimatePresence, { children: isHovering && hoveredIndex !== null && /* @__PURE__ */ jsx(
                 motion.div,
                 {
@@ -525,7 +526,7 @@ function ProjectStudioHoverPreview({
                   children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
                     /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-xl border border-white/10 bg-black/95 shadow-2xl shadow-black/30 backdrop-blur-md" }),
                     /* @__PURE__ */ jsxs("div", { className: "relative flex items-center gap-3 px-3 py-3 text-sm font-medium whitespace-nowrap text-white", children: [
-                      /* @__PURE__ */ jsx("span", { className: "text-base", children: "Explore" }),
+                      /* @__PURE__ */ jsx("span", { className: "text-base", children: tooltipLabel ?? "Explore" }),
                       /* @__PURE__ */ jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-full border border-white/30 bg-white/10", children: /* @__PURE__ */ jsx(
                         motion.span,
                         {

package/dist/project-table-list.cjs

@@ -1,10 +1,10 @@
 "use client";
 'use strict';
 
+var React = require('react');
 var img = require('@page-speed/img');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
-var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -391,6 +391,9 @@ Section.displayName = "Section";
 function ProjectTableList({
   projects,
   projectsSlot,
+  projectsHeaderLabel,
+  descriptionHeaderLabel,
+  galleryHeaderLabel,
   optixFlowConfig,
   background,
   spacing,
@@ -405,7 +408,7 @@ function ProjectTableList({
   descriptionColumnClassName,
   galleryColumnClassName
 }) {
-  const renderProjects = () => {
+  const renderedProjects = React.useMemo(() => {
     if (projectsSlot) return projectsSlot;
     if (!projects || projects.length === 0) return null;
     return projects.map((project, index) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -471,7 +474,7 @@ function ProjectTableList({
       },
       project.id
     ));
-  };
+  }, [projectsSlot, projects, rowClassName, infoColumnClassName, descriptionColumnClassName, galleryColumnClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -489,13 +492,13 @@ function ProjectTableList({
               headerClassName
             ),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "w-1/4", children: "PROJECTS" }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "w-2/4", children: "DESCRIPTION" }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "w-1/4 text-right", children: "GALLERY" })
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "w-1/4", children: projectsHeaderLabel ?? "PROJECTS" }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "w-2/4", children: descriptionHeaderLabel ?? "DESCRIPTION" }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "w-1/4 text-right", children: galleryHeaderLabel ?? "GALLERY" })
             ]
           }
         ),
-        renderProjects()
+        renderedProjects
       ] }) })
     }
   );

package/dist/project-table-list.d.cts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-import { SectionBackground, SectionSpacing } from './types.cjs';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BudEyO90.cjs';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
 import './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
@@ -24,6 +24,18 @@ interface ProjectTableListProps {
      * Custom slot for rendering projects (overrides projects array)
      */
     projectsSlot?: React.ReactNode;
+    /**
+     * Label for "PROJECTS" header column
+     */
+    projectsHeaderLabel?: React.ReactNode;
+    /**
+     * Label for "DESCRIPTION" header column
+     */
+    descriptionHeaderLabel?: React.ReactNode;
+    /**
+     * Label for "GALLERY" header column
+     */
+    galleryHeaderLabel?: React.ReactNode;
     /**
      * OptixFlow image optimization configuration
      */
@@ -87,6 +99,6 @@ interface ProjectTableListProps {
  * case studies, portfolio items, or any project listing where detailed descriptions
  * and chronological ordering are important. Responsive layout stacks columns on mobile.
  */
-declare function ProjectTableList({ projects, projectsSlot, optixFlowConfig, background, spacing, pattern, patternOpacity, className, containerClassName, listClassName, headerClassName, rowClassName, infoColumnClassName, descriptionColumnClassName, galleryColumnClassName, }: ProjectTableListProps): react_jsx_runtime.JSX.Element;
+declare function ProjectTableList({ projects, projectsSlot, projectsHeaderLabel, descriptionHeaderLabel, galleryHeaderLabel, optixFlowConfig, background, spacing, pattern, patternOpacity, className, containerClassName, listClassName, headerClassName, rowClassName, infoColumnClassName, descriptionColumnClassName, galleryColumnClassName, }: ProjectTableListProps): react_jsx_runtime.JSX.Element;
 
 export { ProjectTableList, type ProjectTableListItem, type ProjectTableListProps };

package/dist/project-table-list.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-import { SectionBackground, SectionSpacing } from './types.js';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-FG_f_Y4z.js';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
 import './blocks-k17uluAz.js';
 import 'class-variance-authority';
@@ -24,6 +24,18 @@ interface ProjectTableListProps {
      * Custom slot for rendering projects (overrides projects array)
      */
     projectsSlot?: React.ReactNode;
+    /**
+     * Label for "PROJECTS" header column
+     */
+    projectsHeaderLabel?: React.ReactNode;
+    /**
+     * Label for "DESCRIPTION" header column
+     */
+    descriptionHeaderLabel?: React.ReactNode;
+    /**
+     * Label for "GALLERY" header column
+     */
+    galleryHeaderLabel?: React.ReactNode;
     /**
      * OptixFlow image optimization configuration
      */
@@ -87,6 +99,6 @@ interface ProjectTableListProps {
  * case studies, portfolio items, or any project listing where detailed descriptions
  * and chronological ordering are important. Responsive layout stacks columns on mobile.
  */
-declare function ProjectTableList({ projects, projectsSlot, optixFlowConfig, background, spacing, pattern, patternOpacity, className, containerClassName, listClassName, headerClassName, rowClassName, infoColumnClassName, descriptionColumnClassName, galleryColumnClassName, }: ProjectTableListProps): react_jsx_runtime.JSX.Element;
+declare function ProjectTableList({ projects, projectsSlot, projectsHeaderLabel, descriptionHeaderLabel, galleryHeaderLabel, optixFlowConfig, background, spacing, pattern, patternOpacity, className, containerClassName, listClassName, headerClassName, rowClassName, infoColumnClassName, descriptionColumnClassName, galleryColumnClassName, }: ProjectTableListProps): react_jsx_runtime.JSX.Element;
 
 export { ProjectTableList, type ProjectTableListItem, type ProjectTableListProps };

package/dist/project-table-list.js

@@ -1,8 +1,8 @@
 "use client";
+import React, { useMemo } from 'react';
 import { Img } from '@page-speed/img';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import React from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // components/blocks/project-list/project-table-list.tsx
@@ -385,6 +385,9 @@ Section.displayName = "Section";
 function ProjectTableList({
   projects,
   projectsSlot,
+  projectsHeaderLabel,
+  descriptionHeaderLabel,
+  galleryHeaderLabel,
   optixFlowConfig,
   background,
   spacing,
@@ -399,7 +402,7 @@ function ProjectTableList({
   descriptionColumnClassName,
   galleryColumnClassName
 }) {
-  const renderProjects = () => {
+  const renderedProjects = useMemo(() => {
     if (projectsSlot) return projectsSlot;
     if (!projects || projects.length === 0) return null;
     return projects.map((project, index) => /* @__PURE__ */ jsxs(
@@ -465,7 +468,7 @@ function ProjectTableList({
       },
       project.id
     ));
-  };
+  }, [projectsSlot, projects, rowClassName, infoColumnClassName, descriptionColumnClassName, galleryColumnClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -483,13 +486,13 @@ function ProjectTableList({
               headerClassName
             ),
             children: [
-              /* @__PURE__ */ jsx("p", { className: "w-1/4", children: "PROJECTS" }),
-              /* @__PURE__ */ jsx("p", { className: "w-2/4", children: "DESCRIPTION" }),
-              /* @__PURE__ */ jsx("p", { className: "w-1/4 text-right", children: "GALLERY" })
+              /* @__PURE__ */ jsx("p", { className: "w-1/4", children: projectsHeaderLabel ?? "PROJECTS" }),
+              /* @__PURE__ */ jsx("p", { className: "w-2/4", children: descriptionHeaderLabel ?? "DESCRIPTION" }),
+              /* @__PURE__ */ jsx("p", { className: "w-1/4 text-right", children: galleryHeaderLabel ?? "GALLERY" })
             ]
           }
         ),
-        renderProjects()
+        renderedProjects
       ] }) })
     }
   );

package/dist/project-video-carousel.cjs

@@ -1208,7 +1208,7 @@ function ProjectVideoCarousel({
   carouselClassName,
   cardClassName
 }) {
-  const renderVideoSections = () => {
+  const renderedVideoSections = React6.useMemo(() => {
     if (videoSectionsSlot) return videoSectionsSlot;
     if (!videoSections || videoSections.length === 0) return null;
     return videoSections.map((section, index) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -1231,7 +1231,7 @@ function ProjectVideoCarousel({
       },
       index
     ));
-  };
+  }, [videoSectionsSlot, videoSections, cardClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -1275,7 +1275,7 @@ function ProjectVideoCarousel({
             },
             className: cn("w-full", carouselClassName),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(CarouselContent, { className: "-ml-2 md:-ml-4", children: renderVideoSections() }),
+              /* @__PURE__ */ jsxRuntime.jsx(CarouselContent, { className: "-ml-2 md:-ml-4", children: renderedVideoSections }),
               /* @__PURE__ */ jsxRuntime.jsx(CarouselPrevious, { className: "left-4 md:left-8" }),
               /* @__PURE__ */ jsxRuntime.jsx(CarouselNext, { className: "right-4 md:right-8" })
             ]

package/dist/project-video-carousel.d.cts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-import { SectionBackground, SectionSpacing } from './types.cjs';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BudEyO90.cjs';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
 import './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';

package/dist/project-video-carousel.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-import { SectionBackground, SectionSpacing } from './types.js';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-FG_f_Y4z.js';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
 import './blocks-k17uluAz.js';
 import 'class-variance-authority';

package/dist/project-video-carousel.js

@@ -1,6 +1,6 @@
 "use client";
 import * as React6 from 'react';
-import React6__default, { useRef, useState, useEffect } from 'react';
+import React6__default, { useMemo, useRef, useState, useEffect } from 'react';
 import { Img } from '@page-speed/img';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -1184,7 +1184,7 @@ function ProjectVideoCarousel({
   carouselClassName,
   cardClassName
 }) {
-  const renderVideoSections = () => {
+  const renderedVideoSections = useMemo(() => {
     if (videoSectionsSlot) return videoSectionsSlot;
     if (!videoSections || videoSections.length === 0) return null;
     return videoSections.map((section, index) => /* @__PURE__ */ jsx(
@@ -1207,7 +1207,7 @@ function ProjectVideoCarousel({
       },
       index
     ));
-  };
+  }, [videoSectionsSlot, videoSections, cardClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -1251,7 +1251,7 @@ function ProjectVideoCarousel({
             },
             className: cn("w-full", carouselClassName),
             children: [
-              /* @__PURE__ */ jsx(CarouselContent, { className: "-ml-2 md:-ml-4", children: renderVideoSections() }),
+              /* @__PURE__ */ jsx(CarouselContent, { className: "-ml-2 md:-ml-4", children: renderedVideoSections }),
               /* @__PURE__ */ jsx(CarouselPrevious, { className: "left-4 md:left-8" }),
               /* @__PURE__ */ jsx(CarouselNext, { className: "right-4 md:right-8" })
             ]

package/dist/project-video-hover-bento.cjs

@@ -597,7 +597,7 @@ function ProjectVideoHoverBento({
   subheadingClassName,
   cardClassName
 }) {
-  const renderVideoSections = () => {
+  const renderedVideoSections = React.useMemo(() => {
     if (videoSectionsSlot) return videoSectionsSlot;
     if (!videoSections || videoSections.length === 0) return null;
     return videoSections.map((section, index) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cardClassName, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -610,7 +610,7 @@ function ProjectVideoHoverBento({
         optixFlowConfig
       }
     ) }, index));
-  };
+  }, [videoSectionsSlot, videoSections, gridClassName, cardClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -649,7 +649,7 @@ function ProjectVideoHoverBento({
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "opacity-60", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/audio-lines", size: 24 }) })
               ] })
             ] }) }) }),
-            renderVideoSections()
+            renderedVideoSections
           ]
         }
       )

package/dist/project-video-hover-bento.d.cts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-import { SectionBackground, SectionSpacing } from './types.cjs';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BudEyO90.cjs';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
 import './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';

package/dist/project-video-hover-bento.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-import { SectionBackground, SectionSpacing } from './types.js';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-FG_f_Y4z.js';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
 import './blocks-k17uluAz.js';
 import 'class-variance-authority';

package/dist/project-video-hover-bento.js

@@ -1,6 +1,6 @@
 "use client";
 import * as React from 'react';
-import React__default, { useRef, useState, useEffect } from 'react';
+import React__default, { useMemo, useRef, useState, useEffect } from 'react';
 import { Img } from '@page-speed/img';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -576,7 +576,7 @@ function ProjectVideoHoverBento({
   subheadingClassName,
   cardClassName
 }) {
-  const renderVideoSections = () => {
+  const renderedVideoSections = useMemo(() => {
     if (videoSectionsSlot) return videoSectionsSlot;
     if (!videoSections || videoSections.length === 0) return null;
     return videoSections.map((section, index) => /* @__PURE__ */ jsx("div", { className: cardClassName, children: /* @__PURE__ */ jsx(
@@ -589,7 +589,7 @@ function ProjectVideoHoverBento({
         optixFlowConfig
       }
     ) }, index));
-  };
+  }, [videoSectionsSlot, videoSections, gridClassName, cardClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -628,7 +628,7 @@ function ProjectVideoHoverBento({
                 /* @__PURE__ */ jsx("div", { className: "opacity-60", children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/audio-lines", size: 24 }) })
               ] })
             ] }) }) }),
-            renderVideoSections()
+            renderedVideoSections
           ]
         }
       )

package/dist/project-video-hover-grid.cjs

@@ -598,7 +598,7 @@ function ProjectVideoHoverGrid({
   gridClassName,
   cardClassName
 }) {
-  const renderVideoSections = () => {
+  const renderedVideoSections = React.useMemo(() => {
     if (videoSectionsSlot) return videoSectionsSlot;
     if (!videoSections || videoSections.length === 0) return null;
     return videoSections.map((section, index) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cardClassName, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -611,7 +611,7 @@ function ProjectVideoHoverGrid({
         optixFlowConfig
       }
     ) }, index));
-  };
+  }, [videoSectionsSlot, videoSections, gridClassName, cardClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -659,7 +659,7 @@ function ProjectVideoHoverGrid({
           "div",
           {
             className: cn("grid w-full grid-cols-1 md:grid-cols-2", gridClassName),
-            children: renderVideoSections()
+            children: renderedVideoSections
           }
         )
       ]

package/dist/project-video-hover-grid.d.cts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-import { SectionBackground, SectionSpacing } from './types.cjs';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BudEyO90.cjs';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
 import './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';

package/dist/project-video-hover-grid.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-import { SectionBackground, SectionSpacing } from './types.js';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-FG_f_Y4z.js';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
 import './blocks-k17uluAz.js';
 import 'class-variance-authority';

package/dist/project-video-hover-grid.js

@@ -1,6 +1,6 @@
 "use client";
 import * as React from 'react';
-import React__default, { useRef, useState, useEffect } from 'react';
+import React__default, { useMemo, useRef, useState, useEffect } from 'react';
 import { Img } from '@page-speed/img';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -577,7 +577,7 @@ function ProjectVideoHoverGrid({
   gridClassName,
   cardClassName
 }) {
-  const renderVideoSections = () => {
+  const renderedVideoSections = useMemo(() => {
     if (videoSectionsSlot) return videoSectionsSlot;
     if (!videoSections || videoSections.length === 0) return null;
     return videoSections.map((section, index) => /* @__PURE__ */ jsx("div", { className: cardClassName, children: /* @__PURE__ */ jsx(
@@ -590,7 +590,7 @@ function ProjectVideoHoverGrid({
         optixFlowConfig
       }
     ) }, index));
-  };
+  }, [videoSectionsSlot, videoSections, gridClassName, cardClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -638,7 +638,7 @@ function ProjectVideoHoverGrid({
           "div",
           {
             className: cn("grid w-full grid-cols-1 md:grid-cols-2", gridClassName),
-            children: renderVideoSections()
+            children: renderedVideoSections
           }
         )
       ]

package/dist/project-video-hover-rounded.cjs

@@ -598,7 +598,7 @@ function ProjectVideoHoverRounded({
   listClassName,
   cardClassName
 }) {
-  const renderVideoSections = () => {
+  const renderedVideoSections = React.useMemo(() => {
     if (videoSectionsSlot) return videoSectionsSlot;
     if (!videoSections || videoSections.length === 0) return null;
     return videoSections.map((section, index) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cardClassName, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -611,7 +611,7 @@ function ProjectVideoHoverRounded({
         optixFlowConfig
       }
     ) }, index));
-  };
+  }, [videoSectionsSlot, videoSections, cardClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -646,7 +646,7 @@ function ProjectVideoHoverRounded({
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "opacity-60", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/audio-lines", size: 24 }) })
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-8 md:space-y-12", listClassName), children: renderVideoSections() })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-8 md:space-y-12", listClassName), children: renderedVideoSections })
       ] })
     }
   );

package/dist/project-video-hover-rounded.d.cts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-import { SectionBackground, SectionSpacing } from './types.cjs';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BudEyO90.cjs';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
 import './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';

package/dist/project-video-hover-rounded.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-import { SectionBackground, SectionSpacing } from './types.js';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-FG_f_Y4z.js';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
 import './blocks-k17uluAz.js';
 import 'class-variance-authority';

package/dist/project-video-hover-rounded.js

@@ -1,6 +1,6 @@
 "use client";
 import * as React from 'react';
-import React__default, { useRef, useState, useEffect } from 'react';
+import React__default, { useMemo, useRef, useState, useEffect } from 'react';
 import { Img } from '@page-speed/img';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -577,7 +577,7 @@ function ProjectVideoHoverRounded({
   listClassName,
   cardClassName
 }) {
-  const renderVideoSections = () => {
+  const renderedVideoSections = useMemo(() => {
     if (videoSectionsSlot) return videoSectionsSlot;
     if (!videoSections || videoSections.length === 0) return null;
     return videoSections.map((section, index) => /* @__PURE__ */ jsx("div", { className: cardClassName, children: /* @__PURE__ */ jsx(
@@ -590,7 +590,7 @@ function ProjectVideoHoverRounded({
         optixFlowConfig
       }
     ) }, index));
-  };
+  }, [videoSectionsSlot, videoSections, cardClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -625,7 +625,7 @@ function ProjectVideoHoverRounded({
             /* @__PURE__ */ jsx("div", { className: "opacity-60", children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/audio-lines", size: 24 }) })
           ] })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: cn("space-y-8 md:space-y-12", listClassName), children: renderVideoSections() })
+        /* @__PURE__ */ jsx("div", { className: cn("space-y-8 md:space-y-12", listClassName), children: renderedVideoSections })
       ] })
     }
   );

package/dist/project-video-hover-stack.cjs

@@ -597,7 +597,7 @@ function ProjectVideoHoverStack({
   videoContainerClassName,
   cardClassName
 }) {
-  const renderVideoSections = () => {
+  const renderedVideoSections = React.useMemo(() => {
     if (videoSectionsSlot) return videoSectionsSlot;
     if (!videoSections || videoSections.length === 0) return null;
     return videoSections.map((section, index) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cardClassName, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -610,7 +610,7 @@ function ProjectVideoHoverStack({
         optixFlowConfig
       }
     ) }, index));
-  };
+  }, [videoSectionsSlot, videoSections, cardClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -645,7 +645,7 @@ function ProjectVideoHoverStack({
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "opacity-60", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/audio-lines", size: 24 }) })
           ] })
         ] }) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full", videoContainerClassName), children: renderVideoSections() })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full", videoContainerClassName), children: renderedVideoSections })
       ]
     }
   );

package/dist/project-video-hover-stack.d.cts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-import { SectionBackground, SectionSpacing } from './types.cjs';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BudEyO90.cjs';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
 import './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';

package/dist/project-video-hover-stack.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-import { SectionBackground, SectionSpacing } from './types.js';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-FG_f_Y4z.js';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
 import './blocks-k17uluAz.js';
 import 'class-variance-authority';

package/dist/project-video-hover-stack.js

@@ -1,6 +1,6 @@
 "use client";
 import * as React from 'react';
-import React__default, { useRef, useState, useEffect } from 'react';
+import React__default, { useMemo, useRef, useState, useEffect } from 'react';
 import { Img } from '@page-speed/img';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -576,7 +576,7 @@ function ProjectVideoHoverStack({
   videoContainerClassName,
   cardClassName
 }) {
-  const renderVideoSections = () => {
+  const renderedVideoSections = useMemo(() => {
     if (videoSectionsSlot) return videoSectionsSlot;
     if (!videoSections || videoSections.length === 0) return null;
     return videoSections.map((section, index) => /* @__PURE__ */ jsx("div", { className: cardClassName, children: /* @__PURE__ */ jsx(
@@ -589,7 +589,7 @@ function ProjectVideoHoverStack({
         optixFlowConfig
       }
     ) }, index));
-  };
+  }, [videoSectionsSlot, videoSections, cardClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -624,7 +624,7 @@ function ProjectVideoHoverStack({
             /* @__PURE__ */ jsx("div", { className: "opacity-60", children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/audio-lines", size: 24 }) })
           ] })
         ] }) }) }),
-        /* @__PURE__ */ jsx("div", { className: cn("w-full", videoContainerClassName), children: renderVideoSections() })
+        /* @__PURE__ */ jsx("div", { className: cn("w-full", videoContainerClassName), children: renderedVideoSections })
       ]
     }
   );