@opensite/ui 0.5.3 → 0.5.5

package/dist/hero-spiral-pattern-cards.cjs

@@ -828,8 +828,8 @@ function HeroSpiralPatternCards({
   description,
   actions,
   actionsSlot,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   className,

package/dist/hero-spiral-pattern-cards.js

@@ -807,8 +807,8 @@ function HeroSpiralPatternCards({
   description,
   actions,
   actionsSlot,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   className,

package/dist/hero-split-geometric-shapes.cjs

@@ -829,8 +829,8 @@ function HeroSplitGeometricShapes({
   actions,
   actionsSlot,
   shapesSlot,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   className,

package/dist/hero-split-geometric-shapes.js

@@ -808,8 +808,8 @@ function HeroSplitGeometricShapes({
   actions,
   actionsSlot,
   shapesSlot,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   className,

package/dist/hero-split-icon-cards.cjs

@@ -950,7 +950,7 @@ function HeroSplitIconCards({
   children,
   cardItems,
   cardsSlot,
-  background = "white",
+  background,
   verticalSpacing = "lg",
   className,
   contentClassName,

package/dist/hero-split-icon-cards.js

@@ -929,7 +929,7 @@ function HeroSplitIconCards({
   children,
   cardItems,
   cardsSlot,
-  background = "white",
+  background,
   verticalSpacing = "lg",
   className,
   contentClassName,

package/dist/hero-split-image-newsletter.cjs

@@ -846,8 +846,8 @@ function HeroSplitImageNewsletter({
   newsletterFormSlot,
   image,
   imageSlot,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   className,

package/dist/hero-split-image-newsletter.js

@@ -825,8 +825,8 @@ function HeroSplitImageNewsletter({
   newsletterFormSlot,
   image,
   imageSlot,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   className,

package/dist/hero-split-spiral-shapes.cjs

@@ -829,8 +829,8 @@ function HeroSplitSpiralShapes({
   actions,
   actionsSlot,
   shapesSlot,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   className,

package/dist/hero-split-spiral-shapes.js

@@ -808,8 +808,8 @@ function HeroSplitSpiralShapes({
   actions,
   actionsSlot,
   shapesSlot,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   className,

package/dist/hero-startup-launch-cta.cjs

@@ -837,8 +837,8 @@ function HeroStartupLaunchCta({
   imageAlt = "Startup dashboard",
   badgeCard,
   badgeCardSlot,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   className,

package/dist/hero-startup-launch-cta.js

@@ -816,8 +816,8 @@ function HeroStartupLaunchCta({
   imageAlt = "Startup dashboard",
   badgeCard,
   badgeCardSlot,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   className,

package/dist/hero-stats-social-proof.cjs

@@ -836,8 +836,8 @@ function HeroStatsSocialProof({
   imageAlt = "Platform dashboard",
   statusCard,
   statusCardSlot,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   className,

package/dist/hero-stats-social-proof.js

@@ -815,8 +815,8 @@ function HeroStatsSocialProof({
   imageAlt = "Platform dashboard",
   statusCard,
   statusCardSlot,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   className,

package/dist/hero-task-timer-animated.cjs

@@ -941,8 +941,8 @@ function HeroTaskTimerAnimated({
   actionsSlot,
   images,
   imagesSlot,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   className,

package/dist/hero-task-timer-animated.js

@@ -919,8 +919,8 @@ function HeroTaskTimerAnimated({
   actionsSlot,
   images,
   imagesSlot,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   className,

package/dist/hero-tech-carousel.cjs

@@ -545,8 +545,8 @@ function HeroTechCarousel({
   technologies,
   carouselSlot,
   autoplayDelay = 4e3,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   className,

package/dist/hero-tech-carousel.js

@@ -520,8 +520,8 @@ function HeroTechCarousel({
   technologies,
   carouselSlot,
   autoplayDelay = 4e3,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   className,

package/dist/hero-therapy-testimonial-grid.cjs

@@ -832,8 +832,8 @@ function HeroTherapyTestimonialGrid({
   imagesSlot,
   testimonial,
   testimonialSlot,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   className,

package/dist/hero-therapy-testimonial-grid.js

@@ -811,8 +811,8 @@ function HeroTherapyTestimonialGrid({
   imagesSlot,
   testimonial,
   testimonialSlot,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   className,

package/dist/hero-ui-library-showcase.cjs

@@ -839,8 +839,8 @@ function HeroUiLibraryShowcase({
   actionsSlot,
   image,
   imageSlot,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   className,

package/dist/hero-ui-library-showcase.js

@@ -817,8 +817,8 @@ function HeroUiLibraryShowcase({
   actionsSlot,
   image,
   imageSlot,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   className,

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

@@ -830,8 +830,8 @@ function HeroVideoBackgroundDark({
   actionsSlot,
   videoSrc,
   videoSlot,
-  background = "dark",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   className,

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

@@ -809,8 +809,8 @@ function HeroVideoBackgroundDark({
   actionsSlot,
   videoSrc,
   videoSlot,
-  background = "dark",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   className,

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,

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

@@ -1006,8 +1006,8 @@ function HeroVideoDialogGradient({
   image,
   imageSlot,
   videoDialog,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   className,

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

@@ -933,8 +933,8 @@ function HeroVideoOverlayStars({
   actionSlot,
   trust,
   trustSlot,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   className,

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

@@ -912,8 +912,8 @@ function HeroVideoOverlayStars({
   actionSlot,
   trust,
   trustSlot,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   className,

package/dist/hero-welcome-asymmetric-images.cjs

@@ -830,8 +830,8 @@ function HeroWelcomeAsymmetricImages({
   actionsSlot,
   images,
   imagesSlot,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   className,

package/dist/hero-welcome-asymmetric-images.js

@@ -809,8 +809,8 @@ function HeroWelcomeAsymmetricImages({
   actionsSlot,
   images,
   imagesSlot,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   className,

package/dist/index.cjs

@@ -1540,7 +1540,7 @@ function AlternatingBlocks({
   sectionContentClassName,
   sectionMediaClassName
 }) {
-  const renderSections = () => {
+  const sectionsContent = React4.useMemo(() => {
     if (sectionsSlot) return sectionsSlot;
     if (!sections || sections.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-12", sectionsClassName), children: sections.map((section, index) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1564,7 +1564,7 @@ function AlternatingBlocks({
       },
       index
     )) });
-  };
+  }, [sectionsSlot, sections, sectionsClassName, sectionItemClassName, sectionContentClassName, sectionMediaClassName]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -1578,7 +1578,7 @@ function AlternatingBlocks({
           subtitle && typeof subtitle !== "string" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
           title && typeof title !== "string" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
         ] }) : null,
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto w-full max-w-[900px]", contentClassName), children: renderSections() })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto w-full max-w-[900px]", contentClassName), children: sectionsContent })
       ]
     }
   );
@@ -1589,14 +1589,14 @@ function MediaHoverCtas({
   gridClassName,
   items,
   itemsSlot,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   optixFlowConfig
 }) {
   const resolvedItems = items ?? [];
-  const renderItems = () => {
+  const itemsContent = React4.useMemo(() => {
     if (itemsSlot) return itemsSlot;
     return resolvedItems.map((item, index) => {
       const CardComponent = item.cardHref ? "a" : "div";
@@ -1646,7 +1646,7 @@ function MediaHoverCtas({
         index
       );
     });
-  };
+  }, [itemsSlot, resolvedItems, optixFlowConfig]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -1662,7 +1662,7 @@ function MediaHoverCtas({
             "grid min-h-100 grid-cols-1 gap-1 lg:grid-cols-2",
             gridClassName
           ),
-          children: renderItems()
+          children: itemsContent
         }
       )
     }

package/dist/index.js

@@ -1,6 +1,6 @@
 "use client";
 import * as React4 from 'react';
-import React4__default, { useId, useRef, useEffect } from 'react';
+import React4__default, { useId, useRef, useEffect, useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -1518,7 +1518,7 @@ function AlternatingBlocks({
   sectionContentClassName,
   sectionMediaClassName
 }) {
-  const renderSections = () => {
+  const sectionsContent = useMemo(() => {
     if (sectionsSlot) return sectionsSlot;
     if (!sections || sections.length === 0) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("space-y-12", sectionsClassName), children: sections.map((section, index) => /* @__PURE__ */ jsxs(
@@ -1542,7 +1542,7 @@ function AlternatingBlocks({
       },
       index
     )) });
-  };
+  }, [sectionsSlot, sections, sectionsClassName, sectionItemClassName, sectionContentClassName, sectionMediaClassName]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -1556,7 +1556,7 @@ function AlternatingBlocks({
           subtitle && typeof subtitle !== "string" && /* @__PURE__ */ jsx("div", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
           title && typeof title !== "string" && /* @__PURE__ */ jsx("div", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
         ] }) : null,
-        /* @__PURE__ */ jsx("div", { className: cn("mx-auto w-full max-w-[900px]", contentClassName), children: renderSections() })
+        /* @__PURE__ */ jsx("div", { className: cn("mx-auto w-full max-w-[900px]", contentClassName), children: sectionsContent })
       ]
     }
   );
@@ -1567,14 +1567,14 @@ function MediaHoverCtas({
   gridClassName,
   items,
   itemsSlot,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   optixFlowConfig
 }) {
   const resolvedItems = items ?? [];
-  const renderItems = () => {
+  const itemsContent = useMemo(() => {
     if (itemsSlot) return itemsSlot;
     return resolvedItems.map((item, index) => {
       const CardComponent = item.cardHref ? "a" : "div";
@@ -1624,7 +1624,7 @@ function MediaHoverCtas({
         index
       );
     });
-  };
+  }, [itemsSlot, resolvedItems, optixFlowConfig]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -1640,7 +1640,7 @@ function MediaHoverCtas({
             "grid min-h-100 grid-cols-1 gap-1 lg:grid-cols-2",
             gridClassName
           ),
-          children: renderItems()
+          children: itemsContent
         }
       )
     }

package/dist/media-hover-ctas.cjs

@@ -1,17 +1,17 @@
 "use client";
 'use strict';
 
+var React = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var img = require('@page-speed/img');
-var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 
-// lib/utils.ts
+// components/blocks/cta/media-hover-ctas.tsx
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
@@ -394,14 +394,14 @@ function MediaHoverCtas({
   gridClassName,
   items,
   itemsSlot,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   optixFlowConfig
 }) {
   const resolvedItems = items ?? [];
-  const renderItems = () => {
+  const itemsContent = React.useMemo(() => {
     if (itemsSlot) return itemsSlot;
     return resolvedItems.map((item, index) => {
       const CardComponent = item.cardHref ? "a" : "div";
@@ -451,7 +451,7 @@ function MediaHoverCtas({
         index
       );
     });
-  };
+  }, [itemsSlot, resolvedItems, optixFlowConfig]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -467,7 +467,7 @@ function MediaHoverCtas({
             "grid min-h-100 grid-cols-1 gap-1 lg:grid-cols-2",
             gridClassName
           ),
-          children: renderItems()
+          children: itemsContent
         }
       )
     }

package/dist/media-hover-ctas.js

@@ -1,11 +1,11 @@
 "use client";
+import React, { useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Img } from '@page-speed/img';
-import React from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-// lib/utils.ts
+// components/blocks/cta/media-hover-ctas.tsx
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -388,14 +388,14 @@ function MediaHoverCtas({
   gridClassName,
   items,
   itemsSlot,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   optixFlowConfig
 }) {
   const resolvedItems = items ?? [];
-  const renderItems = () => {
+  const itemsContent = useMemo(() => {
     if (itemsSlot) return itemsSlot;
     return resolvedItems.map((item, index) => {
       const CardComponent = item.cardHref ? "a" : "div";
@@ -445,7 +445,7 @@ function MediaHoverCtas({
         index
       );
     });
-  };
+  }, [itemsSlot, resolvedItems, optixFlowConfig]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -461,7 +461,7 @@ function MediaHoverCtas({
             "grid min-h-100 grid-cols-1 gap-1 lg:grid-cols-2",
             gridClassName
           ),
-          children: renderItems()
+          children: itemsContent
         }
       )
     }