@opensite/ui 2.8.0 → 2.8.2

package/dist/hero-pricing-comparison.cjs

@@ -530,9 +530,13 @@ var Pressable = React__namespace.forwardRef(
 );
 Pressable.displayName = "Pressable";
 var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
-function DynamicIcon({ apiKey, ...props }) {
+var DynamicIcon = React__namespace.memo(function DynamicIcon2({
+  apiKey,
+  ...props
+}) {
   return /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
-}
+});
+DynamicIcon.displayName = "DynamicIcon";
 var badgeVariants = classVarianceAuthority.cva(
   "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
   {

package/dist/hero-pricing-comparison.js

@@ -509,9 +509,13 @@ var Pressable = React.forwardRef(
 );
 Pressable.displayName = "Pressable";
 var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
-function DynamicIcon({ apiKey, ...props }) {
+var DynamicIcon = React.memo(function DynamicIcon2({
+  apiKey,
+  ...props
+}) {
   return /* @__PURE__ */ jsx(Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
-}
+});
+DynamicIcon.displayName = "DynamicIcon";
 var badgeVariants = cva(
   "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
   {

package/dist/hero-product-showcase-floating.cjs

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var React3 = require('react');
+var React4 = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var icon = require('@page-speed/icon');
@@ -28,16 +28,20 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
+var React4__namespace = /*#__PURE__*/_interopNamespace(React4);
 
 // components/blocks/hero/hero-product-showcase-floating.tsx
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
 var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
-function DynamicIcon({ apiKey, ...props }) {
+var DynamicIcon = React4__namespace.memo(function DynamicIcon2({
+  apiKey,
+  ...props
+}) {
   return /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
-}
+});
+DynamicIcon.displayName = "DynamicIcon";
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -47,7 +51,7 @@ var maxWidthStyles = {
   "4xl": "max-w-[1536px]",
   full: "max-w-full"
 };
-var Container = React3__namespace.default.forwardRef(
+var Container = React4__namespace.default.forwardRef(
   ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
     const Component = as;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -353,7 +357,7 @@ var spacingStyles = {
 };
 var predefinedSpacings = ["none", "sm", "md", "lg", "xl", "hero"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
-var Section = React3__namespace.default.forwardRef(
+var Section = React4__namespace.default.forwardRef(
   ({
     id,
     title,
@@ -489,7 +493,7 @@ function useNavigation({
   href,
   onClick
 } = {}) {
-  const linkType = React3__namespace.useMemo(() => {
+  const linkType = React4__namespace.useMemo(() => {
     if (!href || href.trim() === "") {
       return onClick ? "none" : "none";
     }
@@ -510,7 +514,7 @@ function useNavigation({
       return "internal";
     }
   }, [href, onClick]);
-  const normalizedHref = React3__namespace.useMemo(() => {
+  const normalizedHref = React4__namespace.useMemo(() => {
     if (!href || href.trim() === "") {
       return void 0;
     }
@@ -528,7 +532,7 @@ function useNavigation({
         return trimmed;
     }
   }, [href, linkType]);
-  const target = React3__namespace.useMemo(() => {
+  const target = React4__namespace.useMemo(() => {
     switch (linkType) {
       case "external":
         return "_blank";
@@ -541,7 +545,7 @@ function useNavigation({
         return void 0;
     }
   }, [linkType]);
-  const rel = React3__namespace.useMemo(() => {
+  const rel = React4__namespace.useMemo(() => {
     if (linkType === "external") {
       return "noopener noreferrer";
     }
@@ -550,7 +554,7 @@ function useNavigation({
   const isExternal = linkType === "external";
   const isInternal = linkType === "internal";
   const shouldUseRouter = isInternal && typeof normalizedHref === "string" && normalizedHref.startsWith("/");
-  const handleClick = React3__namespace.useCallback(
+  const handleClick = React4__namespace.useCallback(
     (event) => {
       if (onClick) {
         try {
@@ -734,7 +738,7 @@ var buttonVariants = classVarianceAuthority.cva(baseStyles, {
     size: "default"
   }
 });
-var Pressable = React3__namespace.forwardRef(
+var Pressable = React4__namespace.forwardRef(
   ({
     children,
     className,
@@ -868,12 +872,12 @@ function TextInner({ as, className, children, ...props }, ref) {
   const Component = as || "span";
   return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, className: cn(className), ...props, children });
 }
-var Text = React3__namespace.forwardRef(TextInner);
+var Text = React4__namespace.forwardRef(TextInner);
 Text.displayName = "Text";
 function isContentTextItem(item) {
-  return item !== null && typeof item === "object" && !React3__namespace.isValidElement(item) && "_type" in item && item._type === "text";
+  return item !== null && typeof item === "object" && !React4__namespace.isValidElement(item) && "_type" in item && item._type === "text";
 }
-var ContentGroup = React3__namespace.forwardRef(
+var ContentGroup = React4__namespace.forwardRef(
   ({ items, className, children, ...props }, ref) => {
     const hasContent = items && items.length > 0;
     if (!hasContent) {
@@ -886,10 +890,10 @@ var ContentGroup = React3__namespace.forwardRef(
           return /* @__PURE__ */ jsxRuntime.jsx(Text, { ...textProps }, idx);
         }
         const reactNode = item;
-        if (React3__namespace.isValidElement(reactNode)) {
-          return React3__namespace.cloneElement(reactNode, { key: reactNode.key ?? idx });
+        if (React4__namespace.isValidElement(reactNode)) {
+          return React4__namespace.cloneElement(reactNode, { key: reactNode.key ?? idx });
         }
-        return /* @__PURE__ */ jsxRuntime.jsx(React3__namespace.Fragment, { children: reactNode }, idx);
+        return /* @__PURE__ */ jsxRuntime.jsx(React4__namespace.Fragment, { children: reactNode }, idx);
       }),
       children
     ] });
@@ -988,14 +992,14 @@ function HeroProductShowcaseFloating({
   showcaseClassName,
   optixFlowConfig
 }) {
-  const renderBadge = React3.useMemo(() => {
+  const renderBadge = React4.useMemo(() => {
     if (badgeSlot) return badgeSlot;
     return /* @__PURE__ */ jsxRuntime.jsxs(Badge, { className: "px-3 py-1", children: [
       badgeIcon && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: badgeIcon, size: 16 }),
       badgeText && /* @__PURE__ */ jsxRuntime.jsx("span", { children: badgeText })
     ] });
   }, [badgeSlot, badgeIcon, badgeText]);
-  const renderFloatingStat = React3.useMemo(() => {
+  const renderFloatingStat = React4.useMemo(() => {
     if (floatingStatSlot) return floatingStatSlot;
     if (!floatingStat) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -top-4 -right-4 rounded-xl bg-card text-card-foreground p-4 shadow-lg border", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
@@ -1006,7 +1010,7 @@ function HeroProductShowcaseFloating({
       ] })
     ] }) });
   }, [floatingStatSlot, floatingStat]);
-  const renderUserCount = React3.useMemo(() => {
+  const renderUserCount = React4.useMemo(() => {
     if (userCountSlot) return userCountSlot;
     if (!userCount) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -bottom-4 -left-4 rounded-xl bg-card text-card-foreground p-4 shadow-lg border", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
@@ -1029,7 +1033,7 @@ function HeroProductShowcaseFloating({
       ] })
     ] }) });
   }, [userCountSlot, userCount, optixFlowConfig]);
-  const renderProductShowcase = React3.useMemo(() => {
+  const renderProductShowcase = React4.useMemo(() => {
     if (productImageSlot) return productImageSlot;
     if (!productImage) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("order-1", showcaseClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
@@ -1056,7 +1060,7 @@ function HeroProductShowcaseFloating({
     renderFloatingStat,
     renderUserCount
   ]);
-  const contentItems = React3.useMemo(() => {
+  const contentItems = React4.useMemo(() => {
     const items = [];
     if (heading) {
       if (typeof heading === "string") {

package/dist/hero-product-showcase-floating.js

@@ -1,6 +1,6 @@
 "use client";
-import * as React3 from 'react';
-import React3__default, { useMemo } from 'react';
+import * as React4 from 'react';
+import React4__default, { useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Icon } from '@page-speed/icon';
@@ -14,9 +14,13 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
-function DynamicIcon({ apiKey, ...props }) {
+var DynamicIcon = React4.memo(function DynamicIcon2({
+  apiKey,
+  ...props
+}) {
   return /* @__PURE__ */ jsx(Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
-}
+});
+DynamicIcon.displayName = "DynamicIcon";
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -26,7 +30,7 @@ var maxWidthStyles = {
   "4xl": "max-w-[1536px]",
   full: "max-w-full"
 };
-var Container = React3__default.forwardRef(
+var Container = React4__default.forwardRef(
   ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
     const Component = as;
     return /* @__PURE__ */ jsx(
@@ -332,7 +336,7 @@ var spacingStyles = {
 };
 var predefinedSpacings = ["none", "sm", "md", "lg", "xl", "hero"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
-var Section = React3__default.forwardRef(
+var Section = React4__default.forwardRef(
   ({
     id,
     title,
@@ -468,7 +472,7 @@ function useNavigation({
   href,
   onClick
 } = {}) {
-  const linkType = React3.useMemo(() => {
+  const linkType = React4.useMemo(() => {
     if (!href || href.trim() === "") {
       return onClick ? "none" : "none";
     }
@@ -489,7 +493,7 @@ function useNavigation({
       return "internal";
     }
   }, [href, onClick]);
-  const normalizedHref = React3.useMemo(() => {
+  const normalizedHref = React4.useMemo(() => {
     if (!href || href.trim() === "") {
       return void 0;
     }
@@ -507,7 +511,7 @@ function useNavigation({
         return trimmed;
     }
   }, [href, linkType]);
-  const target = React3.useMemo(() => {
+  const target = React4.useMemo(() => {
     switch (linkType) {
       case "external":
         return "_blank";
@@ -520,7 +524,7 @@ function useNavigation({
         return void 0;
     }
   }, [linkType]);
-  const rel = React3.useMemo(() => {
+  const rel = React4.useMemo(() => {
     if (linkType === "external") {
       return "noopener noreferrer";
     }
@@ -529,7 +533,7 @@ function useNavigation({
   const isExternal = linkType === "external";
   const isInternal = linkType === "internal";
   const shouldUseRouter = isInternal && typeof normalizedHref === "string" && normalizedHref.startsWith("/");
-  const handleClick = React3.useCallback(
+  const handleClick = React4.useCallback(
     (event) => {
       if (onClick) {
         try {
@@ -713,7 +717,7 @@ var buttonVariants = cva(baseStyles, {
     size: "default"
   }
 });
-var Pressable = React3.forwardRef(
+var Pressable = React4.forwardRef(
   ({
     children,
     className,
@@ -847,12 +851,12 @@ function TextInner({ as, className, children, ...props }, ref) {
   const Component = as || "span";
   return /* @__PURE__ */ jsx(Component, { ref, className: cn(className), ...props, children });
 }
-var Text = React3.forwardRef(TextInner);
+var Text = React4.forwardRef(TextInner);
 Text.displayName = "Text";
 function isContentTextItem(item) {
-  return item !== null && typeof item === "object" && !React3.isValidElement(item) && "_type" in item && item._type === "text";
+  return item !== null && typeof item === "object" && !React4.isValidElement(item) && "_type" in item && item._type === "text";
 }
-var ContentGroup = React3.forwardRef(
+var ContentGroup = React4.forwardRef(
   ({ items, className, children, ...props }, ref) => {
     const hasContent = items && items.length > 0;
     if (!hasContent) {
@@ -865,10 +869,10 @@ var ContentGroup = React3.forwardRef(
           return /* @__PURE__ */ jsx(Text, { ...textProps }, idx);
         }
         const reactNode = item;
-        if (React3.isValidElement(reactNode)) {
-          return React3.cloneElement(reactNode, { key: reactNode.key ?? idx });
+        if (React4.isValidElement(reactNode)) {
+          return React4.cloneElement(reactNode, { key: reactNode.key ?? idx });
         }
-        return /* @__PURE__ */ jsx(React3.Fragment, { children: reactNode }, idx);
+        return /* @__PURE__ */ jsx(React4.Fragment, { children: reactNode }, idx);
       }),
       children
     ] });

package/dist/hero-saas-dashboard-preview.cjs

@@ -454,9 +454,13 @@ var Pressable = React__namespace.forwardRef(
 );
 Pressable.displayName = "Pressable";
 var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
-function DynamicIcon({ apiKey, ...props }) {
+var DynamicIcon = React__namespace.memo(function DynamicIcon2({
+  apiKey,
+  ...props
+}) {
   return /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
-}
+});
+DynamicIcon.displayName = "DynamicIcon";
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",

package/dist/hero-saas-dashboard-preview.js

@@ -433,9 +433,13 @@ var Pressable = React.forwardRef(
 );
 Pressable.displayName = "Pressable";
 var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
-function DynamicIcon({ apiKey, ...props }) {
+var DynamicIcon = React.memo(function DynamicIcon2({
+  apiKey,
+  ...props
+}) {
   return /* @__PURE__ */ jsx(Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
-}
+});
+DynamicIcon.displayName = "DynamicIcon";
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",

package/dist/hero-simple-centered-image.cjs

@@ -953,7 +953,7 @@ function HeroSimpleCenteredImage({
           "div",
           {
             className: cn(
-              "flex flex-col items-center text-center",
+              "flex flex-col items-center text-center gap-6 md:gap-2",
               contentClassName
             ),
             children: [
@@ -961,22 +961,22 @@ function HeroSimpleCenteredImage({
                 "h1",
                 {
                   className: cn(
-                    "my-3 text-3xl font-bold text-balance sm:text-4xl md:my-6 lg:text-6xl",
+                    "my-4 text-4xl font-bold text-balance md:my-6 md:text-6xl",
                     headingClassName
                   ),
                   children: heading
                 }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+              ) : heading),
               description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                 "p",
                 {
                   className: cn(
-                    "max-w-xl md:max-w-md lg:text-2xl text-balance",
+                    "max-w-full md:max-w-md text-lg text-balance opacity-75 leading-relaxed",
                     descriptionClassName
                   ),
                   children: description
                 }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+              ) : description),
               /* @__PURE__ */ jsxRuntime.jsx(
                 BlockActions,
                 {

package/dist/hero-simple-centered-image.js

@@ -932,7 +932,7 @@ function HeroSimpleCenteredImage({
           "div",
           {
             className: cn(
-              "flex flex-col items-center text-center",
+              "flex flex-col items-center text-center gap-6 md:gap-2",
               contentClassName
             ),
             children: [
@@ -940,22 +940,22 @@ function HeroSimpleCenteredImage({
                 "h1",
                 {
                   className: cn(
-                    "my-3 text-3xl font-bold text-balance sm:text-4xl md:my-6 lg:text-6xl",
+                    "my-4 text-4xl font-bold text-balance md:my-6 md:text-6xl",
                     headingClassName
                   ),
                   children: heading
                 }
-              ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+              ) : heading),
               description && (typeof description === "string" ? /* @__PURE__ */ jsx(
                 "p",
                 {
                   className: cn(
-                    "max-w-xl md:max-w-md lg:text-2xl text-balance",
+                    "max-w-full md:max-w-md text-lg text-balance opacity-75 leading-relaxed",
                     descriptionClassName
                   ),
                   children: description
                 }
-              ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+              ) : description),
               /* @__PURE__ */ jsx(
                 BlockActions,
                 {

package/dist/hero-software-growth-video-dialog.cjs

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var React3 = require('react');
+var React4 = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var img = require('@page-speed/img');
@@ -29,7 +29,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
+var React4__namespace = /*#__PURE__*/_interopNamespace(React4);
 var AspectRatioPrimitive__namespace = /*#__PURE__*/_interopNamespace(AspectRatioPrimitive);
 var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
 
@@ -43,9 +43,13 @@ function AspectRatio({
   return /* @__PURE__ */ jsxRuntime.jsx(AspectRatioPrimitive__namespace.Root, { "data-slot": "aspect-ratio", ...props });
 }
 var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
-function DynamicIcon({ apiKey, ...props }) {
+var DynamicIcon = React4__namespace.memo(function DynamicIcon2({
+  apiKey,
+  ...props
+}) {
   return /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
-}
+});
+DynamicIcon.displayName = "DynamicIcon";
 function Dialog({
   ...props
 }) {
@@ -139,7 +143,7 @@ var maxWidthStyles = {
   "4xl": "max-w-[1536px]",
   full: "max-w-full"
 };
-var Container = React3__namespace.default.forwardRef(
+var Container = React4__namespace.default.forwardRef(
   ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
     const Component = as;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -445,7 +449,7 @@ var spacingStyles = {
 };
 var predefinedSpacings = ["none", "sm", "md", "lg", "xl", "hero"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
-var Section = React3__namespace.default.forwardRef(
+var Section = React4__namespace.default.forwardRef(
   ({
     id,
     title,
@@ -581,7 +585,7 @@ function useNavigation({
   href,
   onClick
 } = {}) {
-  const linkType = React3__namespace.useMemo(() => {
+  const linkType = React4__namespace.useMemo(() => {
     if (!href || href.trim() === "") {
       return onClick ? "none" : "none";
     }
@@ -602,7 +606,7 @@ function useNavigation({
       return "internal";
     }
   }, [href, onClick]);
-  const normalizedHref = React3__namespace.useMemo(() => {
+  const normalizedHref = React4__namespace.useMemo(() => {
     if (!href || href.trim() === "") {
       return void 0;
     }
@@ -620,7 +624,7 @@ function useNavigation({
         return trimmed;
     }
   }, [href, linkType]);
-  const target = React3__namespace.useMemo(() => {
+  const target = React4__namespace.useMemo(() => {
     switch (linkType) {
       case "external":
         return "_blank";
@@ -633,7 +637,7 @@ function useNavigation({
         return void 0;
     }
   }, [linkType]);
-  const rel = React3__namespace.useMemo(() => {
+  const rel = React4__namespace.useMemo(() => {
     if (linkType === "external") {
       return "noopener noreferrer";
     }
@@ -642,7 +646,7 @@ function useNavigation({
   const isExternal = linkType === "external";
   const isInternal = linkType === "internal";
   const shouldUseRouter = isInternal && typeof normalizedHref === "string" && normalizedHref.startsWith("/");
-  const handleClick = React3__namespace.useCallback(
+  const handleClick = React4__namespace.useCallback(
     (event) => {
       if (onClick) {
         try {
@@ -826,7 +830,7 @@ var buttonVariants = classVarianceAuthority.cva(baseStyles, {
     size: "default"
   }
 });
-var Pressable = React3__namespace.forwardRef(
+var Pressable = React4__namespace.forwardRef(
   ({
     children,
     className,
@@ -972,7 +976,7 @@ function HeroSoftwareGrowthVideoDialog({
   showcaseClassName,
   optixFlowConfig
 }) {
-  const [isVideoOpen, setIsVideoOpen] = React3.useState(false);
+  const [isVideoOpen, setIsVideoOpen] = React4.useState(false);
   const handleVideoClick = () => {
     if (onVideoClick) {
       onVideoClick();
@@ -980,7 +984,7 @@ function HeroSoftwareGrowthVideoDialog({
       setIsVideoOpen(true);
     }
   };
-  const renderShowcaseImages = React3.useMemo(() => {
+  const renderShowcaseImages = React4.useMemo(() => {
     if (showcaseImagesSlot) return showcaseImagesSlot;
     if (!showcaseImages || showcaseImages.length < 4) return null;
     const imageConfigs = [
@@ -1026,7 +1030,7 @@ function HeroSoftwareGrowthVideoDialog({
       }
     ) });
   }, [showcaseImagesSlot, showcaseImages, showcaseClassName, optixFlowConfig]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(React3.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(React4.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       Section,
       {

package/dist/hero-software-growth-video-dialog.js

@@ -1,6 +1,6 @@
 "use client";
-import * as React3 from 'react';
-import React3__default, { useState, useMemo, Fragment } from 'react';
+import * as React4 from 'react';
+import React4__default, { useState, useMemo, Fragment } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Img } from '@page-speed/img';
@@ -20,9 +20,13 @@ function AspectRatio({
   return /* @__PURE__ */ jsx(AspectRatioPrimitive.Root, { "data-slot": "aspect-ratio", ...props });
 }
 var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
-function DynamicIcon({ apiKey, ...props }) {
+var DynamicIcon = React4.memo(function DynamicIcon2({
+  apiKey,
+  ...props
+}) {
   return /* @__PURE__ */ jsx(Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
-}
+});
+DynamicIcon.displayName = "DynamicIcon";
 function Dialog({
   ...props
 }) {
@@ -116,7 +120,7 @@ var maxWidthStyles = {
   "4xl": "max-w-[1536px]",
   full: "max-w-full"
 };
-var Container = React3__default.forwardRef(
+var Container = React4__default.forwardRef(
   ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
     const Component = as;
     return /* @__PURE__ */ jsx(
@@ -422,7 +426,7 @@ var spacingStyles = {
 };
 var predefinedSpacings = ["none", "sm", "md", "lg", "xl", "hero"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
-var Section = React3__default.forwardRef(
+var Section = React4__default.forwardRef(
   ({
     id,
     title,
@@ -558,7 +562,7 @@ function useNavigation({
   href,
   onClick
 } = {}) {
-  const linkType = React3.useMemo(() => {
+  const linkType = React4.useMemo(() => {
     if (!href || href.trim() === "") {
       return onClick ? "none" : "none";
     }
@@ -579,7 +583,7 @@ function useNavigation({
       return "internal";
     }
   }, [href, onClick]);
-  const normalizedHref = React3.useMemo(() => {
+  const normalizedHref = React4.useMemo(() => {
     if (!href || href.trim() === "") {
       return void 0;
     }
@@ -597,7 +601,7 @@ function useNavigation({
         return trimmed;
     }
   }, [href, linkType]);
-  const target = React3.useMemo(() => {
+  const target = React4.useMemo(() => {
     switch (linkType) {
       case "external":
         return "_blank";
@@ -610,7 +614,7 @@ function useNavigation({
         return void 0;
     }
   }, [linkType]);
-  const rel = React3.useMemo(() => {
+  const rel = React4.useMemo(() => {
     if (linkType === "external") {
       return "noopener noreferrer";
     }
@@ -619,7 +623,7 @@ function useNavigation({
   const isExternal = linkType === "external";
   const isInternal = linkType === "internal";
   const shouldUseRouter = isInternal && typeof normalizedHref === "string" && normalizedHref.startsWith("/");
-  const handleClick = React3.useCallback(
+  const handleClick = React4.useCallback(
     (event) => {
       if (onClick) {
         try {
@@ -803,7 +807,7 @@ var buttonVariants = cva(baseStyles, {
     size: "default"
   }
 });
-var Pressable = React3.forwardRef(
+var Pressable = React4.forwardRef(
   ({
     children,
     className,