@opensite/ui 0.5.4 → 0.5.6

package/dist/hero-community-survey-cta.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-community-survey-cta.tsx
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -921,8 +921,8 @@ function HeroCommunitySurveyCta({
   leftOverlayImage,
   rightOverlayImage,
   imagesSlot,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   className,
@@ -934,7 +934,7 @@ function HeroCommunitySurveyCta({
   imagesClassName,
   optixFlowConfig
 }) {
-  const renderAnnouncement = () => {
+  const renderAnnouncement = useMemo(() => {
     if (announcementSlot) return announcementSlot;
     return /* @__PURE__ */ jsxs(
       Pressable,
@@ -949,8 +949,8 @@ function HeroCommunitySurveyCta({
         ]
       }
     );
-  };
-  const renderActions = () => {
+  }, [announcementSlot, announcementHref, announcementClassName, announcementPrimary, announcementSecondary, announcementLinkText]);
+  const renderActions = useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
@@ -970,8 +970,8 @@ function HeroCommunitySurveyCta({
         index
       );
     });
-  };
-  const renderImages = () => {
+  }, [actionsSlot, actions]);
+  const renderImages = useMemo(() => {
     if (imagesSlot) return imagesSlot;
     return /* @__PURE__ */ jsxs("div", { className: cn("relative mx-auto max-w-5xl", imagesClassName), children: [
       mainImage && /* @__PURE__ */ jsx(
@@ -1002,7 +1002,7 @@ function HeroCommunitySurveyCta({
         }
       )
     ] });
-  };
+  }, [imagesSlot, imagesClassName, mainImage, leftOverlayImage, rightOverlayImage, optixFlowConfig]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -1013,14 +1013,14 @@ function HeroCommunitySurveyCta({
       className: cn(className),
       children: [
         /* @__PURE__ */ jsxs("div", { className: cn("container flex flex-col gap-7 text-center", containerClassName), children: [
-          renderAnnouncement(),
+          renderAnnouncement,
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mx-auto max-w-4xl text-4xl font-semibold text-balance lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto max-w-4xl text-muted-foreground lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("flex flex-col justify-center gap-4 sm:flex-row", actionsClassName), children: renderActions() })
+          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("flex flex-col justify-center gap-4 sm:flex-row", actionsClassName), children: renderActions })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "relative px-8", children: [
           /* @__PURE__ */ jsx("div", { className: "absolute inset-0 top-1/2 h-full w-full bg-linear-to-b from-muted to-transparent to-50%" }),
-          renderImages()
+          renderImages
         ] })
       ]
     }

package/dist/hero-conversation-intelligence.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');
@@ -30,7 +30,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var AspectRatioPrimitive__namespace = /*#__PURE__*/_interopNamespace(AspectRatioPrimitive);
 
-// lib/utils.ts
+// components/blocks/hero/hero-conversation-intelligence.tsx
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
@@ -838,8 +838,8 @@ function HeroConversationIntelligence({
   actionsSlot,
   image,
   imageSlot,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   className,
@@ -851,7 +851,7 @@ function HeroConversationIntelligence({
   imageClassName,
   optixFlowConfig
 }) {
-  const renderActions = () => {
+  const renderActions = React.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
@@ -871,8 +871,8 @@ function HeroConversationIntelligence({
         index
       );
     });
-  };
-  const renderImage = () => {
+  }, [actionsSlot, actions]);
+  const renderImage = React.useMemo(() => {
     if (imageSlot) return imageSlot;
     if (!image) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto w-full max-w-325", imageClassName), children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: 1.818181818 / 1, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex size-full flex-col justify-between", children: [
@@ -907,7 +907,7 @@ function HeroConversationIntelligence({
         }
       ) })
     ] }) }) });
-  };
+  }, [imageSlot, image, imageClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -920,9 +920,9 @@ function HeroConversationIntelligence({
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative text-nowrap after:absolute after:top-1/2 after:left-0 after:z-[-1] after:block after:h-[65%] after:w-full after:-translate-y-1/3 after:bg-muted after:content-['']", children: headingHighlight })
           ] }),
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-center text-xl leading-normal text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center justify-center gap-5", actionsClassName), children: renderActions() })
+          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center justify-center gap-5", actionsClassName), children: renderActions })
         ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderImage() })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderImage })
       ] }) })
     }
   );

package/dist/hero-conversation-intelligence.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 { A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-DP3Vofl4.cjs';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BudEyO90.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 HeroConversationIntelligenceProps {

package/dist/hero-conversation-intelligence.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 { A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-XLPGq8A5.js';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-FG_f_Y4z.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 HeroConversationIntelligenceProps {

package/dist/hero-conversation-intelligence.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-conversation-intelligence.tsx
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -816,8 +816,8 @@ function HeroConversationIntelligence({
   actionsSlot,
   image,
   imageSlot,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   className,
@@ -829,7 +829,7 @@ function HeroConversationIntelligence({
   imageClassName,
   optixFlowConfig
 }) {
-  const renderActions = () => {
+  const renderActions = useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
@@ -849,8 +849,8 @@ function HeroConversationIntelligence({
         index
       );
     });
-  };
-  const renderImage = () => {
+  }, [actionsSlot, actions]);
+  const renderImage = useMemo(() => {
     if (imageSlot) return imageSlot;
     if (!image) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("mx-auto w-full max-w-325", imageClassName), children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 1.818181818 / 1, children: /* @__PURE__ */ jsxs("div", { className: "relative flex size-full flex-col justify-between", children: [
@@ -885,7 +885,7 @@ function HeroConversationIntelligence({
         }
       ) })
     ] }) }) });
-  };
+  }, [imageSlot, image, imageClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -898,9 +898,9 @@ function HeroConversationIntelligence({
             /* @__PURE__ */ jsx("span", { className: "relative text-nowrap after:absolute after:top-1/2 after:left-0 after:z-[-1] after:block after:h-[65%] after:w-full after:-translate-y-1/3 after:bg-muted after:content-['']", children: headingHighlight })
           ] }),
           description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-center text-xl leading-normal text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("flex items-center justify-center gap-5", actionsClassName), children: renderActions() })
+          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("flex items-center justify-center gap-5", actionsClassName), children: renderActions })
         ] }) }),
-        /* @__PURE__ */ jsx("div", { children: renderImage() })
+        /* @__PURE__ */ jsx("div", { children: renderImage })
       ] }) })
     }
   );

package/dist/hero-conversion-video-play.cjs

@@ -1034,8 +1034,8 @@ function HeroConversionVideoPlay({
   logosTagline = "Trusted by these brands and many others",
   logos,
   logosSlot,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   className,
@@ -1049,7 +1049,7 @@ function HeroConversionVideoPlay({
   optixFlowConfig
 }) {
   const [isVideoOpen, setIsVideoOpen] = React.useState(false);
-  const renderActions = () => {
+  const renderActions = React.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       primaryAction && (() => {
@@ -1093,8 +1093,8 @@ function HeroConversionVideoPlay({
         }
       )
     ] });
-  };
-  const renderLogos = () => {
+  }, [actionsSlot, primaryAction, videoButtonLabel, setIsVideoOpen]);
+  const renderLogos = React.useMemo(() => {
     if (logosSlot) return logosSlot;
     if (!logos || logos.length === 0) return null;
     return logos.map((logo, index) => {
@@ -1110,7 +1110,7 @@ function HeroConversionVideoPlay({
         index
       );
     });
-  };
+  }, [logosSlot, logos, optixFlowConfig]);
   return /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       Section,
@@ -1127,7 +1127,7 @@ function HeroConversionVideoPlay({
                 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("div", { className: 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 }))
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-wrap items-center justify-center gap-8", actionsClassName), children: renderActions() })
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-wrap items-center justify-center gap-8", actionsClassName), children: renderActions })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: imageSlot ? imageSlot : image ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative h-fit w-full", imageClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-20 w-full max-w-330 overflow-hidden rounded-t-xl md:rounded-t-3xl", children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: 2.095238095 / 1, children: /* @__PURE__ */ jsxRuntime.jsx(
               img.Img,
@@ -1141,7 +1141,7 @@ function HeroConversionVideoPlay({
           ] }) }) }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center gap-16 py-20", logosClassName), children: [
             logosTagline && (typeof logosTagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center text-xl font-medium text-primary", children: logosTagline }) : logosTagline),
-            (logosSlot || logos && logos.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center justify-center gap-20", children: renderLogos() })
+            (logosSlot || logos && logos.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center justify-center gap-20", children: renderLogos })
           ] }) })
         ]
       }

package/dist/hero-conversion-video-play.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 { A as ActionConfig, I as ImageItem, L as LogoItem, O as OptixFlowConfig } from './blocks-DP3Vofl4.cjs';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BudEyO90.cjs';
+import { A as ActionConfig, I as ImageItem, L as LogoItem, 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 HeroConversionVideoPlayProps {

package/dist/hero-conversion-video-play.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 { A as ActionConfig, I as ImageItem, L as LogoItem, O as OptixFlowConfig } from './blocks-XLPGq8A5.js';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-FG_f_Y4z.js';
+import { A as ActionConfig, I as ImageItem, L as LogoItem, 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 HeroConversionVideoPlayProps {

package/dist/hero-conversion-video-play.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';
@@ -1011,8 +1011,8 @@ function HeroConversionVideoPlay({
   logosTagline = "Trusted by these brands and many others",
   logos,
   logosSlot,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   className,
@@ -1026,9 +1026,9 @@ function HeroConversionVideoPlay({
   optixFlowConfig
 }) {
   const [isVideoOpen, setIsVideoOpen] = useState(false);
-  const renderActions = () => {
+  const renderActions = useMemo(() => {
     if (actionsSlot) return actionsSlot;
-    return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
       primaryAction && (() => {
         const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = primaryAction;
         return /* @__PURE__ */ jsxs(
@@ -1038,7 +1038,7 @@ function HeroConversionVideoPlay({
             className: actionClassName,
             ...pressableProps,
             children: [
-              /* @__PURE__ */ jsx("div", { className: "relative z-10 flex items-center gap-2.5", children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+              /* @__PURE__ */ jsx("div", { className: "relative z-10 flex items-center gap-2.5", children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
                 icon,
                 /* @__PURE__ */ jsx("span", { children: label }),
                 iconAfter
@@ -1070,8 +1070,8 @@ function HeroConversionVideoPlay({
         }
       )
     ] });
-  };
-  const renderLogos = () => {
+  }, [actionsSlot, primaryAction, videoButtonLabel, setIsVideoOpen]);
+  const renderLogos = useMemo(() => {
     if (logosSlot) return logosSlot;
     if (!logos || logos.length === 0) return null;
     return logos.map((logo, index) => {
@@ -1087,8 +1087,8 @@ function HeroConversionVideoPlay({
         index
       );
     });
-  };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  }, [logosSlot, logos, optixFlowConfig]);
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsxs(
       Section,
       {
@@ -1104,7 +1104,7 @@ function HeroConversionVideoPlay({
                 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("div", { className: 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 }))
               ] }),
-              /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap items-center justify-center gap-8", actionsClassName), children: renderActions() })
+              /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap items-center justify-center gap-8", actionsClassName), children: renderActions })
             ] }),
             /* @__PURE__ */ jsx("div", { className: "w-full", children: imageSlot ? imageSlot : image ? /* @__PURE__ */ jsx("div", { className: cn("relative h-fit w-full", imageClassName), children: /* @__PURE__ */ jsx("div", { className: "relative z-20 w-full max-w-330 overflow-hidden rounded-t-xl md:rounded-t-3xl", children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 2.095238095 / 1, children: /* @__PURE__ */ jsx(
               Img,
@@ -1118,7 +1118,7 @@ function HeroConversionVideoPlay({
           ] }) }) }),
           /* @__PURE__ */ jsx("div", { className: "container", children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center gap-16 py-20", logosClassName), children: [
             logosTagline && (typeof logosTagline === "string" ? /* @__PURE__ */ jsx("p", { className: "text-center text-xl font-medium text-primary", children: logosTagline }) : logosTagline),
-            (logosSlot || logos && logos.length > 0) && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center justify-center gap-20", children: renderLogos() })
+            (logosSlot || logos && logos.length > 0) && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center justify-center gap-20", children: renderLogos })
           ] }) })
         ]
       }

package/dist/hero-creative-studio-stacked.cjs

@@ -1032,8 +1032,8 @@ function HeroCreativeStudioStacked({
   actionsSlot,
   images,
   imagesSlot,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   className,
@@ -1047,7 +1047,7 @@ function HeroCreativeStudioStacked({
   optixFlowConfig
 }) {
   const [isVideoOpen, setIsVideoOpen] = React.useState(false);
-  const renderActions = () => {
+  const renderActions = React.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!primaryAction) return null;
     const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = primaryAction;
@@ -1087,8 +1087,8 @@ function HeroCreativeStudioStacked({
         }
       )
     ] });
-  };
-  const renderImages = () => {
+  }, [actionsSlot, primaryAction, videoButtonLabel, setIsVideoOpen]);
+  const renderImages = React.useMemo(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative mx-auto aspect-[0.789340102/1] max-w-100", imagesClassName), children: [
@@ -1141,7 +1141,7 @@ function HeroCreativeStudioStacked({
         }
       ) })
     ] });
-  };
+  }, [imagesSlot, images, imagesClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       Section,
@@ -1158,9 +1158,9 @@ function HeroCreativeStudioStacked({
               heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl leading-tight font-medium md:text-5xl xl:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
               description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-xl text-balance text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-wrap gap-4 py-4", actionsClassName), children: renderActions() })
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-wrap gap-4 py-4", actionsClassName), children: renderActions })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderImages() })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderImages })
         ] }) })
       }
     ),

package/dist/hero-creative-studio-stacked.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 { A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-DP3Vofl4.cjs';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BudEyO90.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 HeroCreativeStudioStackedProps {

package/dist/hero-creative-studio-stacked.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 { A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-XLPGq8A5.js';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-FG_f_Y4z.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 HeroCreativeStudioStackedProps {

package/dist/hero-creative-studio-stacked.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';
@@ -1009,8 +1009,8 @@ function HeroCreativeStudioStacked({
   actionsSlot,
   images,
   imagesSlot,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   className,
@@ -1024,18 +1024,18 @@ function HeroCreativeStudioStacked({
   optixFlowConfig
 }) {
   const [isVideoOpen, setIsVideoOpen] = useState(false);
-  const renderActions = () => {
+  const renderActions = useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!primaryAction) return null;
     const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = primaryAction;
-    return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         Pressable,
         {
           asButton: true,
           className: actionClassName,
           ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+          children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
             icon,
             label,
             iconAfter
@@ -1064,8 +1064,8 @@ function HeroCreativeStudioStacked({
         }
       )
     ] });
-  };
-  const renderImages = () => {
+  }, [actionsSlot, primaryAction, videoButtonLabel, setIsVideoOpen]);
+  const renderImages = useMemo(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length === 0) return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("relative mx-auto aspect-[0.789340102/1] max-w-100", imagesClassName), children: [
@@ -1118,8 +1118,8 @@ function HeroCreativeStudioStacked({
         }
       ) })
     ] });
-  };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  }, [imagesSlot, images, imagesClassName, optixFlowConfig]);
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsx(
       Section,
       {
@@ -1135,9 +1135,9 @@ function HeroCreativeStudioStacked({
               heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-4xl leading-tight font-medium md:text-5xl xl:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
               description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-xl text-balance text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
             ] }),
-            /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap gap-4 py-4", actionsClassName), children: renderActions() })
+            /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap gap-4 py-4", actionsClassName), children: renderActions })
           ] }),
-          /* @__PURE__ */ jsx("div", { children: renderImages() })
+          /* @__PURE__ */ jsx("div", { children: renderImages })
         ] }) })
       }
     ),

package/dist/hero-crm-streamlined.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-crm-streamlined.tsx
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
@@ -831,8 +831,8 @@ function HeroCrmStreamlined({
   actionSlot,
   image,
   imageSlot,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   className,
@@ -844,7 +844,7 @@ function HeroCrmStreamlined({
   imageClassName,
   optixFlowConfig
 }) {
-  const renderAction = () => {
+  const renderAction = React.useMemo(() => {
     if (actionSlot) return actionSlot;
     if (!action) return null;
     const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
@@ -861,7 +861,7 @@ function HeroCrmStreamlined({
         ] })
       }
     );
-  };
+  }, [actionSlot, action]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -875,7 +875,7 @@ function HeroCrmStreamlined({
           tagline && (typeof tagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-base font-semibold text-muted-foreground", taglineClassName), children: tagline }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: taglineClassName, children: tagline })),
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-2 text-4xl leading-snug! font-medium text-black lg:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-2 text-lg text-black/80", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-          renderAction()
+          renderAction
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative basis-[42%] py-9 md:py-16", imageClassName), children: imageSlot ? imageSlot : image ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "aspect-square w-full overflow-hidden", children: [
           /* @__PURE__ */ jsxRuntime.jsx(