@opensite/ui 0.5.5 → 0.5.6

package/dist/hero-overlay-cta-grid.cjs

@@ -1,11 +1,11 @@
 "use client";
 'use strict';
 
+var React = require('react');
 var framerMotion = require('framer-motion');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var img = require('@page-speed/img');
-var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var classVarianceAuthority = require('class-variance-authority');
 
@@ -935,36 +935,41 @@ function HeroOverlayCtaGrid({
   badgeSlot,
   heading,
   description,
-  primaryCta = { label: "Get a Free Quote", href: "/quote" },
-  secondaryCta = { label: "Explore Coverage", href: "/coverage" },
+  primaryCta,
+  secondaryCta,
   actionsSlot,
   cards,
   cardsSlot,
   backgroundImage,
   backgroundAlt = "OpenSite AI coverage advisory hero background",
   backgroundSlot,
+  background,
+  spacing,
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   headingClassName,
   descriptionClassName,
   optixFlowConfig
 }) {
-  const renderBadge = () => {
+  const renderBadge = React.useMemo(() => {
     if (badgeSlot) return badgeSlot;
     if (!badgeText) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-center gap-2 rounded-full border border-white/30 bg-white/15 px-6 py-2 text-sm font-semibold uppercase tracking-[0.2em]", children: [
       badgeIcon ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: badgeIcon, size: 18 }) : null,
       badgeText
     ] });
-  };
-  const renderActions = () => {
+  }, [badgeSlot, badgeText, badgeIcon]);
+  const renderActions = React.useMemo(() => {
     if (actionsSlot) return actionsSlot;
+    if (!primaryCta && !secondaryCta) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-8 flex flex-col items-center justify-center gap-4 sm:flex-row", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: primaryCta.href, size: "lg", variant: "default", children: primaryCta.label }),
-      /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: secondaryCta.href, size: "lg", variant: "secondary", children: secondaryCta.label })
+      primaryCta && /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: primaryCta.href, size: "lg", variant: "default", children: primaryCta.label }),
+      secondaryCta && /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: secondaryCta.href, size: "lg", variant: "secondary", children: secondaryCta.label })
     ] });
-  };
-  const renderCards = () => {
+  }, [actionsSlot, primaryCta, secondaryCta]);
+  const renderCards = React.useMemo(() => {
     if (cardsSlot) return cardsSlot;
     if (!cards || cards.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto w-full max-w-6xl overflow-hidden rounded-3xl border border-border bg-background/95 shadow-2xl", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 divide-y divide-border md:grid-cols-3 md:divide-x md:divide-y-0", children: cards.map((card) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -990,8 +995,8 @@ function HeroOverlayCtaGrid({
       },
       card.label
     )) }) });
-  };
-  const renderBackground = () => {
+  }, [cardsSlot, cards]);
+  const renderBackground = React.useMemo(() => {
     if (backgroundSlot) return backgroundSlot;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -1006,16 +1011,20 @@ function HeroOverlayCtaGrid({
       ),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-linear-to-r from-foreground/80 via-foreground/65 to-foreground/20" })
     ] });
-  };
+  }, [backgroundSlot, backgroundImage, backgroundAlt, optixFlowConfig]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
       className: cn(
         "relative flex min-h-dvh items-center justify-center overflow-hidden bg-background pb-20 pt-32 md:pt-36",
         className
       ),
       children: [
-        renderBackground(),
+        renderBackground,
         /* @__PURE__ */ jsxRuntime.jsxs(
           Container,
           {
@@ -1029,7 +1038,7 @@ function HeroOverlayCtaGrid({
                   transition: { duration: 0.6, ease: "easeOut" },
                   className: "mx-auto max-w-3xl text-center text-balance text-white",
                   children: [
-                    renderBadge(),
+                    renderBadge,
                     heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                       "h1",
                       {
@@ -1068,11 +1077,11 @@ function HeroOverlayCtaGrid({
                         children: description
                       }
                     )),
-                    renderActions()
+                    renderActions
                   ]
                 }
               ),
-              renderCards()
+              renderCards
             ]
           }
         )

package/dist/hero-overlay-cta-grid.d.cts

@@ -1,4 +1,11 @@
 import * as React from 'react';
+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';
+import './button-variants-lRElsmTc.cjs';
+import 'class-variance-authority/types';
+import 'react/jsx-runtime';
 
 interface HeroOverlayCtaGridCard {
     /**
@@ -77,6 +84,22 @@ interface HeroOverlayCtaGridProps {
      * Custom slot for background (overrides backgroundImage)
      */
     backgroundSlot?: React.ReactNode;
+    /**
+     * Background style for the section
+     */
+    background?: SectionBackground;
+    /**
+     * Vertical spacing for the section
+     */
+    spacing?: SectionSpacing;
+    /**
+     * Background pattern
+     */
+    pattern?: PatternName;
+    /**
+     * Pattern opacity (0-1)
+     */
+    patternOpacity?: number;
     /**
      * Additional CSS classes for the section wrapper
      */
@@ -106,6 +129,6 @@ interface HeroOverlayCtaGridProps {
  * and a supporting grid of icon cards. Ideal for service-focused landing pages that
  * need a strong hero statement plus quick navigation to top offerings.
  */
-declare function HeroOverlayCtaGrid({ badgeText, badgeIcon, badgeSlot, heading, description, primaryCta, secondaryCta, actionsSlot, cards, cardsSlot, backgroundImage, backgroundAlt, backgroundSlot, className, containerClassName, headingClassName, descriptionClassName, optixFlowConfig, }: HeroOverlayCtaGridProps): React.JSX.Element;
+declare function HeroOverlayCtaGrid({ badgeText, badgeIcon, badgeSlot, heading, description, primaryCta, secondaryCta, actionsSlot, cards, cardsSlot, backgroundImage, backgroundAlt, backgroundSlot, background, spacing, pattern, patternOpacity, className, containerClassName, headingClassName, descriptionClassName, optixFlowConfig, }: HeroOverlayCtaGridProps): React.JSX.Element;
 
 export { HeroOverlayCtaGrid, type HeroOverlayCtaGridProps };

package/dist/hero-overlay-cta-grid.d.ts

@@ -1,4 +1,11 @@
 import * as React from 'react';
+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';
+import './button-variants-lRElsmTc.js';
+import 'class-variance-authority/types';
+import 'react/jsx-runtime';
 
 interface HeroOverlayCtaGridCard {
     /**
@@ -77,6 +84,22 @@ interface HeroOverlayCtaGridProps {
      * Custom slot for background (overrides backgroundImage)
      */
     backgroundSlot?: React.ReactNode;
+    /**
+     * Background style for the section
+     */
+    background?: SectionBackground;
+    /**
+     * Vertical spacing for the section
+     */
+    spacing?: SectionSpacing;
+    /**
+     * Background pattern
+     */
+    pattern?: PatternName;
+    /**
+     * Pattern opacity (0-1)
+     */
+    patternOpacity?: number;
     /**
      * Additional CSS classes for the section wrapper
      */
@@ -106,6 +129,6 @@ interface HeroOverlayCtaGridProps {
  * and a supporting grid of icon cards. Ideal for service-focused landing pages that
  * need a strong hero statement plus quick navigation to top offerings.
  */
-declare function HeroOverlayCtaGrid({ badgeText, badgeIcon, badgeSlot, heading, description, primaryCta, secondaryCta, actionsSlot, cards, cardsSlot, backgroundImage, backgroundAlt, backgroundSlot, className, containerClassName, headingClassName, descriptionClassName, optixFlowConfig, }: HeroOverlayCtaGridProps): React.JSX.Element;
+declare function HeroOverlayCtaGrid({ badgeText, badgeIcon, badgeSlot, heading, description, primaryCta, secondaryCta, actionsSlot, cards, cardsSlot, backgroundImage, backgroundAlt, backgroundSlot, background, spacing, pattern, patternOpacity, className, containerClassName, headingClassName, descriptionClassName, optixFlowConfig, }: HeroOverlayCtaGridProps): React.JSX.Element;
 
 export { HeroOverlayCtaGrid, type HeroOverlayCtaGridProps };

package/dist/hero-overlay-cta-grid.js

@@ -1,10 +1,10 @@
 "use client";
+import * as React from 'react';
+import React__default, { useMemo } from 'react';
 import { motion } from 'framer-motion';
 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 { jsx, jsxs } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
 
@@ -914,36 +914,41 @@ function HeroOverlayCtaGrid({
   badgeSlot,
   heading,
   description,
-  primaryCta = { label: "Get a Free Quote", href: "/quote" },
-  secondaryCta = { label: "Explore Coverage", href: "/coverage" },
+  primaryCta,
+  secondaryCta,
   actionsSlot,
   cards,
   cardsSlot,
   backgroundImage,
   backgroundAlt = "OpenSite AI coverage advisory hero background",
   backgroundSlot,
+  background,
+  spacing,
+  pattern,
+  patternOpacity,
   className,
   containerClassName,
   headingClassName,
   descriptionClassName,
   optixFlowConfig
 }) {
-  const renderBadge = () => {
+  const renderBadge = useMemo(() => {
     if (badgeSlot) return badgeSlot;
     if (!badgeText) return null;
     return /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-2 rounded-full border border-white/30 bg-white/15 px-6 py-2 text-sm font-semibold uppercase tracking-[0.2em]", children: [
       badgeIcon ? /* @__PURE__ */ jsx(DynamicIcon, { name: badgeIcon, size: 18 }) : null,
       badgeText
     ] });
-  };
-  const renderActions = () => {
+  }, [badgeSlot, badgeText, badgeIcon]);
+  const renderActions = useMemo(() => {
     if (actionsSlot) return actionsSlot;
+    if (!primaryCta && !secondaryCta) return null;
     return /* @__PURE__ */ jsxs("div", { className: "mt-8 flex flex-col items-center justify-center gap-4 sm:flex-row", children: [
-      /* @__PURE__ */ jsx(Pressable, { href: primaryCta.href, size: "lg", variant: "default", children: primaryCta.label }),
-      /* @__PURE__ */ jsx(Pressable, { href: secondaryCta.href, size: "lg", variant: "secondary", children: secondaryCta.label })
+      primaryCta && /* @__PURE__ */ jsx(Pressable, { href: primaryCta.href, size: "lg", variant: "default", children: primaryCta.label }),
+      secondaryCta && /* @__PURE__ */ jsx(Pressable, { href: secondaryCta.href, size: "lg", variant: "secondary", children: secondaryCta.label })
     ] });
-  };
-  const renderCards = () => {
+  }, [actionsSlot, primaryCta, secondaryCta]);
+  const renderCards = useMemo(() => {
     if (cardsSlot) return cardsSlot;
     if (!cards || cards.length === 0) return null;
     return /* @__PURE__ */ jsx("div", { className: "mx-auto w-full max-w-6xl overflow-hidden rounded-3xl border border-border bg-background/95 shadow-2xl", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 divide-y divide-border md:grid-cols-3 md:divide-x md:divide-y-0", children: cards.map((card) => /* @__PURE__ */ jsxs(
@@ -969,8 +974,8 @@ function HeroOverlayCtaGrid({
       },
       card.label
     )) }) });
-  };
-  const renderBackground = () => {
+  }, [cardsSlot, cards]);
+  const renderBackground = useMemo(() => {
     if (backgroundSlot) return backgroundSlot;
     return /* @__PURE__ */ jsxs("div", { className: "absolute inset-0", children: [
       /* @__PURE__ */ jsx(
@@ -985,16 +990,20 @@ function HeroOverlayCtaGrid({
       ),
       /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-linear-to-r from-foreground/80 via-foreground/65 to-foreground/20" })
     ] });
-  };
+  }, [backgroundSlot, backgroundImage, backgroundAlt, optixFlowConfig]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
       className: cn(
         "relative flex min-h-dvh items-center justify-center overflow-hidden bg-background pb-20 pt-32 md:pt-36",
         className
       ),
       children: [
-        renderBackground(),
+        renderBackground,
         /* @__PURE__ */ jsxs(
           Container,
           {
@@ -1008,7 +1017,7 @@ function HeroOverlayCtaGrid({
                   transition: { duration: 0.6, ease: "easeOut" },
                   className: "mx-auto max-w-3xl text-center text-balance text-white",
                   children: [
-                    renderBadge(),
+                    renderBadge,
                     heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
                       "h1",
                       {
@@ -1047,11 +1056,11 @@ function HeroOverlayCtaGrid({
                         children: description
                       }
                     )),
-                    renderActions()
+                    renderActions
                   ]
                 }
               ),
-              renderCards()
+              renderCards
             ]
           }
         )

package/dist/hero-pattern-badge-logos.cjs

@@ -1,12 +1,12 @@
 "use client";
 'use strict';
 
+var React = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var reactSlot = require('@radix-ui/react-slot');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
 var img = require('@page-speed/img');
 
 function _interopNamespace(e) {
@@ -29,7 +29,7 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-// lib/utils.ts
+// components/blocks/hero/hero-pattern-badge-logos.tsx
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
@@ -881,7 +881,7 @@ function HeroPatternBadgeLogos({
   backgroundClassName,
   optixFlowConfig
 }) {
-  const renderActions = () => {
+  const renderActions = React.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
@@ -901,8 +901,8 @@ function HeroPatternBadgeLogos({
         index
       );
     });
-  };
-  const renderLogos = () => {
+  }, [actionsSlot, actions]);
+  const renderLogos = React.useMemo(() => {
     if (logosSlot) return logosSlot;
     if (!logos || logos.length === 0) return null;
     return logos.map((logo, index) => {
@@ -941,7 +941,7 @@ function HeroPatternBadgeLogos({
       }
       return /* @__PURE__ */ jsxRuntime.jsx("div", { className: logoClassName, children: imgElement }, index);
     });
-  };
+  }, [logosSlot, logos, optixFlowConfig]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -968,10 +968,10 @@ function HeroPatternBadgeLogos({
             heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-6 text-4xl font-bold tracking-tight text-pretty md:text-5xl lg:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
             description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto max-w-2xl text-muted-foreground md:text-lg lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
           ] }),
-          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-6 flex items-center gap-4", actionsClassName), children: renderActions() }),
+          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-6 flex items-center gap-4", actionsClassName), children: renderActions }),
           (logosSlot || logos && logos.length > 0 || logosTagline) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-12 flex flex-col items-center gap-4 lg:mt-16", logosClassName), children: [
             logosTagline && (typeof logosTagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center text-sm text-muted-foreground", children: logosTagline }) : logosTagline),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 place-items-center items-center justify-center gap-6 opacity-80 sm:grid-cols-4 sm:gap-4", children: renderLogos() })
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 place-items-center items-center justify-center gap-6 opacity-80 sm:grid-cols-4 sm:gap-4", children: renderLogos })
           ] })
         ] }) }) })
       ]

package/dist/hero-pattern-badge-logos.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, L as LogoItem, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';

package/dist/hero-pattern-badge-logos.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, L as LogoItem, O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';

package/dist/hero-pattern-badge-logos.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 { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import * as React from 'react';
-import React__default from 'react';
 import { Img } from '@page-speed/img';
 
-// lib/utils.ts
+// components/blocks/hero/hero-pattern-badge-logos.tsx
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -860,7 +860,7 @@ function HeroPatternBadgeLogos({
   backgroundClassName,
   optixFlowConfig
 }) {
-  const renderActions = () => {
+  const renderActions = useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
@@ -880,8 +880,8 @@ function HeroPatternBadgeLogos({
         index
       );
     });
-  };
-  const renderLogos = () => {
+  }, [actionsSlot, actions]);
+  const renderLogos = useMemo(() => {
     if (logosSlot) return logosSlot;
     if (!logos || logos.length === 0) return null;
     return logos.map((logo, index) => {
@@ -920,7 +920,7 @@ function HeroPatternBadgeLogos({
       }
       return /* @__PURE__ */ jsx("div", { className: logoClassName, children: imgElement }, index);
     });
-  };
+  }, [logosSlot, logos, optixFlowConfig]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -947,10 +947,10 @@ function HeroPatternBadgeLogos({
             heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mb-6 text-4xl font-bold tracking-tight text-pretty md:text-5xl lg:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
             description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto max-w-2xl text-muted-foreground md:text-lg lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
           ] }),
-          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mt-6 flex items-center gap-4", actionsClassName), children: renderActions() }),
+          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mt-6 flex items-center gap-4", actionsClassName), children: renderActions }),
           (logosSlot || logos && logos.length > 0 || logosTagline) && /* @__PURE__ */ jsxs("div", { className: cn("mt-12 flex flex-col items-center gap-4 lg:mt-16", logosClassName), children: [
             logosTagline && (typeof logosTagline === "string" ? /* @__PURE__ */ jsx("p", { className: "text-center text-sm text-muted-foreground", children: logosTagline }) : logosTagline),
-            /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 place-items-center items-center justify-center gap-6 opacity-80 sm:grid-cols-4 sm:gap-4", children: renderLogos() })
+            /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 place-items-center items-center justify-center gap-6 opacity-80 sm:grid-cols-4 sm:gap-4", children: renderLogos })
           ] })
         ] }) }) })
       ]

package/dist/hero-pattern-logo-tech-stack.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');
@@ -28,7 +28,7 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-// lib/utils.ts
+// components/blocks/hero/hero-pattern-logo-tech-stack.tsx
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
@@ -848,7 +848,7 @@ function HeroPatternLogoTechStack({
   techLogosClassName,
   optixFlowConfig
 }) {
-  const renderLogo = () => {
+  const renderLogo = React.useMemo(() => {
     if (logoSlot) return logoSlot;
     if (!logo) return null;
     const logoSrc = typeof logo.src === "string" ? logo.src : logo.src.light;
@@ -861,8 +861,8 @@ function HeroPatternLogoTechStack({
         optixFlowConfig
       }
     ) });
-  };
-  const renderActions = () => {
+  }, [logoSlot, logo, optixFlowConfig]);
+  const renderActions = React.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-6 flex justify-center gap-3", actionsClassName), children: actions.map((action, index) => {
@@ -882,8 +882,8 @@ function HeroPatternLogoTechStack({
         index
       );
     }) });
-  };
-  const renderTechLogos = () => {
+  }, [actionsSlot, actions, actionsClassName]);
+  const renderTechLogos = React.useMemo(() => {
     if (techLogosSlot) return techLogosSlot;
     if (!techLogos || techLogos.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-20 flex flex-col items-center gap-5", techLogosClassName), children: [
@@ -913,7 +913,7 @@ function HeroPatternLogoTechStack({
         );
       }) })
     ] });
-  };
+  }, [techLogosSlot, techLogos, techStackLabel, techLogosClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -933,7 +933,7 @@ function HeroPatternLogoTechStack({
           }
         ) }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative z-10 container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto flex max-w-5xl flex-col items-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center gap-6 text-center", contentClassName), children: [
-          renderLogo(),
+          renderLogo,
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsxs("h1", { className: cn("mb-6 text-2xl font-bold tracking-tight text-pretty lg:text-5xl", headingClassName), children: [
               heading,
@@ -942,8 +942,8 @@ function HeroPatternLogoTechStack({
             ] }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-6 text-2xl font-bold tracking-tight text-pretty lg:text-5xl", headingClassName), children: heading })),
             description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto max-w-3xl text-muted-foreground lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
           ] }),
-          renderActions(),
-          renderTechLogos()
+          renderActions,
+          renderTechLogos
         ] }) }) })
       ]
     }

package/dist/hero-pattern-logo-tech-stack.d.cts

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

package/dist/hero-pattern-logo-tech-stack.d.ts

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

package/dist/hero-pattern-logo-tech-stack.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 * 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';
 
-// lib/utils.ts
+// components/blocks/hero/hero-pattern-logo-tech-stack.tsx
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -827,7 +827,7 @@ function HeroPatternLogoTechStack({
   techLogosClassName,
   optixFlowConfig
 }) {
-  const renderLogo = () => {
+  const renderLogo = useMemo(() => {
     if (logoSlot) return logoSlot;
     if (!logo) return null;
     const logoSrc = typeof logo.src === "string" ? logo.src : logo.src.light;
@@ -840,8 +840,8 @@ function HeroPatternLogoTechStack({
         optixFlowConfig
       }
     ) });
-  };
-  const renderActions = () => {
+  }, [logoSlot, logo, optixFlowConfig]);
+  const renderActions = useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("mt-6 flex justify-center gap-3", actionsClassName), children: actions.map((action, index) => {
@@ -861,8 +861,8 @@ function HeroPatternLogoTechStack({
         index
       );
     }) });
-  };
-  const renderTechLogos = () => {
+  }, [actionsSlot, actions, actionsClassName]);
+  const renderTechLogos = useMemo(() => {
     if (techLogosSlot) return techLogosSlot;
     if (!techLogos || techLogos.length === 0) return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("mt-20 flex flex-col items-center gap-5", techLogosClassName), children: [
@@ -892,7 +892,7 @@ function HeroPatternLogoTechStack({
         );
       }) })
     ] });
-  };
+  }, [techLogosSlot, techLogos, techStackLabel, techLogosClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -912,7 +912,7 @@ function HeroPatternLogoTechStack({
           }
         ) }),
         /* @__PURE__ */ jsx("div", { className: cn("relative z-10 container", containerClassName), children: /* @__PURE__ */ jsx("div", { className: "mx-auto flex max-w-5xl flex-col items-center", children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center gap-6 text-center", contentClassName), children: [
-          renderLogo(),
+          renderLogo,
           /* @__PURE__ */ jsxs("div", { children: [
             heading && (typeof heading === "string" ? /* @__PURE__ */ jsxs("h1", { className: cn("mb-6 text-2xl font-bold tracking-tight text-pretty lg:text-5xl", headingClassName), children: [
               heading,
@@ -921,8 +921,8 @@ function HeroPatternLogoTechStack({
             ] }) : /* @__PURE__ */ jsx("h1", { className: cn("mb-6 text-2xl font-bold tracking-tight text-pretty lg:text-5xl", headingClassName), children: heading })),
             description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto max-w-3xl text-muted-foreground lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
           ] }),
-          renderActions(),
-          renderTechLogos()
+          renderActions,
+          renderTechLogos
         ] }) }) })
       ]
     }