@opensite/ui 0.5.4 → 0.5.6

package/dist/hero-ui-library-showcase.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 * 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';
 import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
 
-// lib/utils.ts
+// components/blocks/hero/hero-ui-library-showcase.tsx
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -817,8 +817,8 @@ function HeroUiLibraryShowcase({
   actionsSlot,
   image,
   imageSlot,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   className,
@@ -828,7 +828,7 @@ function HeroUiLibraryShowcase({
   imageClassName,
   optixFlowConfig
 }) {
-  const renderActions = () => {
+  const renderActions = useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
@@ -848,8 +848,8 @@ function HeroUiLibraryShowcase({
         index
       );
     });
-  };
-  const renderLogo = () => {
+  }, [actionsSlot, actions]);
+  const renderLogo = useMemo(() => {
     if (logoSlot) return logoSlot;
     if (!logo) return null;
     return /* @__PURE__ */ jsx(
@@ -861,8 +861,8 @@ function HeroUiLibraryShowcase({
         optixFlowConfig
       }
     );
-  };
-  const renderImage = () => {
+  }, [logoSlot, logo, optixFlowConfig]);
+  const renderImage = useMemo(() => {
     if (imageSlot) return imageSlot;
     if (!image) return null;
     return /* @__PURE__ */ jsx("div", { className: "w-full overflow-hidden rounded-lg", children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 1.916786227 / 1, children: /* @__PURE__ */ jsx(
@@ -874,7 +874,7 @@ function HeroUiLibraryShowcase({
         optixFlowConfig
       }
     ) }) });
-  };
+  }, [imageSlot, image, imageClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -884,14 +884,14 @@ function HeroUiLibraryShowcase({
       ),
       children: [
         /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-10 md:items-center", headerClassName), children: [
-          renderLogo(),
+          renderLogo,
           /* @__PURE__ */ jsxs("div", { className: "flex max-w-[880px] flex-col items-center gap-6", children: [
             heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-4xl tracking-tighter text-foreground capitalize md:text-5xl lg:text-6xl", headingClassName), children: /* @__PURE__ */ jsx("p", { children: heading }) }) : /* @__PURE__ */ jsx("h1", { className: cn("text-4xl tracking-tighter text-foreground capitalize md:text-5xl lg:text-6xl", headingClassName), children: heading })),
             description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
           ] }),
-          renderActions()
+          renderActions
         ] }),
-        renderImage()
+        renderImage
       ]
     }
   );

package/dist/hero-video-background-dark.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');
 
@@ -27,7 +27,7 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-// lib/utils.ts
+// components/blocks/hero/hero-video-background-dark.tsx
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
@@ -830,8 +830,8 @@ function HeroVideoBackgroundDark({
   actionsSlot,
   videoSrc,
   videoSlot,
-  background = "dark",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   className,
@@ -839,7 +839,7 @@ function HeroVideoBackgroundDark({
   headingClassName,
   descriptionClassName
 }) {
-  const renderActions = () => {
+  const renderActions = React.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex lg:justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-fit flex-col gap-5 text-sm leading-[.96] whitespace-nowrap lg:flex-row lg:items-stretch", children: actions.map((action, index) => {
@@ -859,8 +859,8 @@ function HeroVideoBackgroundDark({
         index
       );
     }) }) });
-  };
-  const renderVideo = () => {
+  }, [actionsSlot, actions]);
+  const renderVideo = React.useMemo(() => {
     if (videoSlot) return videoSlot;
     return /* @__PURE__ */ jsxRuntime.jsx(
       "video",
@@ -873,7 +873,7 @@ function HeroVideoBackgroundDark({
         muted: true
       }
     );
-  };
+  }, [videoSlot, videoSrc]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -887,9 +887,9 @@ function HeroVideoBackgroundDark({
           badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: badgeText }) : badgeText),
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-5xl font-bold text-foreground lg:text-[4.2rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-5xl font-bold text-foreground lg:text-[4.2rem]", headingClassName), children: heading })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-          renderActions()
+          renderActions
         ] }),
-        renderVideo()
+        renderVideo
       ]
     }
   );

package/dist/hero-video-background-dark.d.cts

@@ -1,10 +1,10 @@
 import * as React from 'react';
-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 { A as ActionConfig } from './blocks-DP3Vofl4.cjs';
+import { A as ActionConfig } from './blocks-Cohq4eio.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface HeroVideoBackgroundDarkProps {

package/dist/hero-video-background-dark.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
-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 { A as ActionConfig } from './blocks-XLPGq8A5.js';
+import { A as ActionConfig } from './blocks-k17uluAz.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface HeroVideoBackgroundDarkProps {

package/dist/hero-video-background-dark.js

@@ -1,12 +1,12 @@
 "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';
 
-// lib/utils.ts
+// components/blocks/hero/hero-video-background-dark.tsx
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -809,8 +809,8 @@ function HeroVideoBackgroundDark({
   actionsSlot,
   videoSrc,
   videoSlot,
-  background = "dark",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   className,
@@ -818,7 +818,7 @@ function HeroVideoBackgroundDark({
   headingClassName,
   descriptionClassName
 }) {
-  const renderActions = () => {
+  const renderActions = useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return /* @__PURE__ */ jsx("div", { className: "flex lg:justify-center", children: /* @__PURE__ */ jsx("div", { className: "flex min-w-fit flex-col gap-5 text-sm leading-[.96] whitespace-nowrap lg:flex-row lg:items-stretch", children: actions.map((action, index) => {
@@ -838,8 +838,8 @@ function HeroVideoBackgroundDark({
         index
       );
     }) }) });
-  };
-  const renderVideo = () => {
+  }, [actionsSlot, actions]);
+  const renderVideo = useMemo(() => {
     if (videoSlot) return videoSlot;
     return /* @__PURE__ */ jsx(
       "video",
@@ -852,7 +852,7 @@ function HeroVideoBackgroundDark({
         muted: true
       }
     );
-  };
+  }, [videoSlot, videoSrc]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -866,9 +866,9 @@ function HeroVideoBackgroundDark({
           badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: badgeText }) : badgeText),
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-5xl font-bold text-foreground lg:text-[4.2rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("text-5xl font-bold text-foreground lg:text-[4.2rem]", headingClassName), children: heading })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-          renderActions()
+          renderActions
         ] }),
-        renderVideo()
+        renderVideo
       ]
     }
   );

package/dist/hero-video-dialog-gradient.cjs

@@ -1029,8 +1029,8 @@ function HeroVideoDialogGradient({
   image,
   imageSlot,
   videoDialog,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   className,
@@ -1060,7 +1060,7 @@ function HeroVideoDialogGradient({
       icon: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/play", size: 16, className: "mr-2" })
     }
   ];
-  const renderActions = () => {
+  const renderActions = React.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     const actionsToRender = actions || defaultActions;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-center gap-4 sm:flex-row", children: actionsToRender.map((action, index) => {
@@ -1081,8 +1081,8 @@ function HeroVideoDialogGradient({
         index
       );
     }) });
-  };
-  const renderImage = () => {
+  }, [actionsSlot, actions, defaultActions, setIsVideoOpen]);
+  const renderImage = React.useMemo(() => {
     if (imageSlot) return imageSlot;
     if (!image) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto mt-16 w-full max-w-[1000px] overflow-hidden rounded-xl shadow-[4px_2px_3.123rem_rgba(0,0,0,.15)]", children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: 1.406469761 / 1, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1094,7 +1094,7 @@ function HeroVideoDialogGradient({
         optixFlowConfig
       }
     ) }) });
-  };
+  }, [imageSlot, image, imageClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       Section,
@@ -1110,9 +1110,9 @@ function HeroVideoDialogGradient({
                 heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("max-w-[920px] text-center text-4xl leading-tight font-semibold text-foreground md:text-6xl lg:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("max-w-[920px] text-center text-4xl leading-tight font-semibold text-foreground md:text-6xl lg:text-7xl", headingClassName), children: heading })),
                 description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-[750px] text-center text-base leading-relaxed font-normal text-muted-foreground md:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
               ] }),
-              renderActions()
+              renderActions
             ] }),
-            renderImage()
+            renderImage
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-auto bottom-[32%] left-[31%] z-10 size-full md:top-[-6%] md:bottom-auto md:left-55.5", children: /* @__PURE__ */ jsxRuntime.jsx(
             AspectRatio,

package/dist/hero-video-dialog-gradient.d.cts

@@ -1,10 +1,10 @@
 import * as React from 'react';
-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 { A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-DP3Vofl4.cjs';
+import { A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface VideoDialogConfig {

package/dist/hero-video-dialog-gradient.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
-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 { A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-XLPGq8A5.js';
+import { A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface VideoDialogConfig {

package/dist/hero-video-dialog-gradient.js

@@ -1,10 +1,10 @@
 "use client";
 import * as React from 'react';
-import React__default, { useState, Fragment } from 'react';
+import React__default, { useState, 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 AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
@@ -1006,8 +1006,8 @@ function HeroVideoDialogGradient({
   image,
   imageSlot,
   videoDialog,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   className,
@@ -1037,7 +1037,7 @@ function HeroVideoDialogGradient({
       icon: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/play", size: 16, className: "mr-2" })
     }
   ];
-  const renderActions = () => {
+  const renderActions = useMemo(() => {
     if (actionsSlot) return actionsSlot;
     const actionsToRender = actions || defaultActions;
     return /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center gap-4 sm:flex-row", children: actionsToRender.map((action, index) => {
@@ -1049,7 +1049,7 @@ function HeroVideoDialogGradient({
           className: actionClassName,
           onClick: onClick || (index === 1 && !actions ? () => setIsVideoOpen(true) : void 0),
           ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+          children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
             icon,
             label,
             iconAfter
@@ -1058,8 +1058,8 @@ function HeroVideoDialogGradient({
         index
       );
     }) });
-  };
-  const renderImage = () => {
+  }, [actionsSlot, actions, defaultActions, setIsVideoOpen]);
+  const renderImage = useMemo(() => {
     if (imageSlot) return imageSlot;
     if (!image) return null;
     return /* @__PURE__ */ jsx("div", { className: "mx-auto mt-16 w-full max-w-[1000px] overflow-hidden rounded-xl shadow-[4px_2px_3.123rem_rgba(0,0,0,.15)]", children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 1.406469761 / 1, children: /* @__PURE__ */ jsx(
@@ -1071,8 +1071,8 @@ function HeroVideoDialogGradient({
         optixFlowConfig
       }
     ) }) });
-  };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  }, [imageSlot, image, imageClassName, optixFlowConfig]);
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsxs(
       Section,
       {
@@ -1087,9 +1087,9 @@ function HeroVideoDialogGradient({
                 heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("max-w-[920px] text-center text-4xl leading-tight font-semibold text-foreground md:text-6xl lg:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("max-w-[920px] text-center text-4xl leading-tight font-semibold text-foreground md:text-6xl lg:text-7xl", headingClassName), children: heading })),
                 description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-[750px] text-center text-base leading-relaxed font-normal text-muted-foreground md:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
               ] }),
-              renderActions()
+              renderActions
             ] }),
-            renderImage()
+            renderImage
           ] }),
           /* @__PURE__ */ jsx("div", { className: "absolute top-auto bottom-[32%] left-[31%] z-10 size-full md:top-[-6%] md:bottom-auto md:left-55.5", children: /* @__PURE__ */ jsx(
             AspectRatio,

package/dist/hero-video-overlay-stars.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');
 
@@ -27,7 +27,7 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-// lib/utils.ts
+// components/blocks/hero/hero-video-overlay-stars.tsx
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
@@ -933,8 +933,8 @@ function HeroVideoOverlayStars({
   actionSlot,
   trust,
   trustSlot,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   className,
@@ -942,7 +942,7 @@ function HeroVideoOverlayStars({
   videoSrc,
   videoSlot
 }) {
-  const renderAction = () => {
+  const renderAction = React.useMemo(() => {
     if (actionSlot) return actionSlot;
     if (!action) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -958,8 +958,8 @@ function HeroVideoOverlayStars({
         ]
       }
     );
-  };
-  const renderTrust = () => {
+  }, [actionSlot, action]);
+  const renderTrust = React.useMemo(() => {
     if (trustSlot) return trustSlot;
     if (!trust) return null;
     const starCount = trust.starCount ?? 5;
@@ -975,8 +975,8 @@ function HeroVideoOverlayStars({
       )) }),
       trust.message && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1.5 max-w-40 text-center text-xs leading-snug font-medium text-foreground/60", children: trust.message })
     ] });
-  };
-  const renderVideo = () => {
+  }, [trustSlot, trust]);
+  const renderVideo = React.useMemo(() => {
     if (videoSlot) return videoSlot;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 size-full before:absolute before:inset-0 before:bg-background/85 before:content-['']", children: /* @__PURE__ */ jsxRuntime.jsx(
       "video",
@@ -989,7 +989,7 @@ function HeroVideoOverlayStars({
         className: "size-full object-cover object-center"
       }
     ) });
-  };
+  }, [videoSlot, videoSrc]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -1000,10 +1000,10 @@ function HeroVideoOverlayStars({
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10 flex size-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "m-auto flex max-w-100 flex-col items-center gap-9 sm:max-w-125 md:max-w-200", children: [
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("bg-linear-to-br from-neutral-100 to-neutral-600 bg-clip-text text-center text-4xl leading-tight font-semibold text-transparent sm:text-5xl md:text-[4rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("bg-linear-to-br from-neutral-100 to-neutral-600 bg-clip-text text-center text-4xl leading-tight font-semibold text-transparent sm:text-5xl md:text-[4rem]", headingClassName), children: heading })),
-          renderAction(),
-          renderTrust()
+          renderAction,
+          renderTrust
         ] }) }),
-        renderVideo()
+        renderVideo
       ]
     }
   );

package/dist/hero-video-overlay-stars.d.cts

@@ -1,10 +1,10 @@
 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-DP3Vofl4.cjs';
+import './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 /**

package/dist/hero-video-overlay-stars.d.ts

@@ -1,10 +1,10 @@
 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-XLPGq8A5.js';
+import './blocks-k17uluAz.js';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 /**

package/dist/hero-video-overlay-stars.js

@@ -1,12 +1,12 @@
 "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 } from 'react/jsx-runtime';
 
-// lib/utils.ts
+// components/blocks/hero/hero-video-overlay-stars.tsx
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -912,8 +912,8 @@ function HeroVideoOverlayStars({
   actionSlot,
   trust,
   trustSlot,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   className,
@@ -921,7 +921,7 @@ function HeroVideoOverlayStars({
   videoSrc,
   videoSlot
 }) {
-  const renderAction = () => {
+  const renderAction = useMemo(() => {
     if (actionSlot) return actionSlot;
     if (!action) return null;
     return /* @__PURE__ */ jsxs(
@@ -937,8 +937,8 @@ function HeroVideoOverlayStars({
         ]
       }
     );
-  };
-  const renderTrust = () => {
+  }, [actionSlot, action]);
+  const renderTrust = useMemo(() => {
     if (trustSlot) return trustSlot;
     if (!trust) return null;
     const starCount = trust.starCount ?? 5;
@@ -954,8 +954,8 @@ function HeroVideoOverlayStars({
       )) }),
       trust.message && /* @__PURE__ */ jsx("p", { className: "mt-1.5 max-w-40 text-center text-xs leading-snug font-medium text-foreground/60", children: trust.message })
     ] });
-  };
-  const renderVideo = () => {
+  }, [trustSlot, trust]);
+  const renderVideo = useMemo(() => {
     if (videoSlot) return videoSlot;
     return /* @__PURE__ */ jsx("div", { className: "absolute inset-0 size-full before:absolute before:inset-0 before:bg-background/85 before:content-['']", children: /* @__PURE__ */ jsx(
       "video",
@@ -968,7 +968,7 @@ function HeroVideoOverlayStars({
         className: "size-full object-cover object-center"
       }
     ) });
-  };
+  }, [videoSlot, videoSrc]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -979,10 +979,10 @@ function HeroVideoOverlayStars({
       children: [
         /* @__PURE__ */ jsx("div", { className: "relative z-10 flex size-full", children: /* @__PURE__ */ jsxs("div", { className: "m-auto flex max-w-100 flex-col items-center gap-9 sm:max-w-125 md:max-w-200", children: [
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("bg-linear-to-br from-neutral-100 to-neutral-600 bg-clip-text text-center text-4xl leading-tight font-semibold text-transparent sm:text-5xl md:text-[4rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("bg-linear-to-br from-neutral-100 to-neutral-600 bg-clip-text text-center text-4xl leading-tight font-semibold text-transparent sm:text-5xl md:text-[4rem]", headingClassName), children: heading })),
-          renderAction(),
-          renderTrust()
+          renderAction,
+          renderTrust
         ] }) }),
-        renderVideo()
+        renderVideo
       ]
     }
   );