@opensite/ui 2.8.0 → 2.8.1

package/dist/community-initiatives.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 TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
 
 // components/blocks/about/community-initiatives.tsx
@@ -37,9 +37,13 @@ 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";
 function Tabs({
   className,
   ...props
@@ -162,7 +166,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(
@@ -468,7 +472,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,
@@ -604,7 +608,7 @@ function useNavigation({
   href,
   onClick
 } = {}) {
-  const linkType = React3__namespace.useMemo(() => {
+  const linkType = React4__namespace.useMemo(() => {
     if (!href || href.trim() === "") {
       return onClick ? "none" : "none";
     }
@@ -625,7 +629,7 @@ function useNavigation({
       return "internal";
     }
   }, [href, onClick]);
-  const normalizedHref = React3__namespace.useMemo(() => {
+  const normalizedHref = React4__namespace.useMemo(() => {
     if (!href || href.trim() === "") {
       return void 0;
     }
@@ -643,7 +647,7 @@ function useNavigation({
         return trimmed;
     }
   }, [href, linkType]);
-  const target = React3__namespace.useMemo(() => {
+  const target = React4__namespace.useMemo(() => {
     switch (linkType) {
       case "external":
         return "_blank";
@@ -656,7 +660,7 @@ function useNavigation({
         return void 0;
     }
   }, [linkType]);
-  const rel = React3__namespace.useMemo(() => {
+  const rel = React4__namespace.useMemo(() => {
     if (linkType === "external") {
       return "noopener noreferrer";
     }
@@ -665,7 +669,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 {
@@ -849,7 +853,7 @@ var buttonVariants = classVarianceAuthority.cva(baseStyles, {
     size: "default"
   }
 });
-var Pressable = React3__namespace.forwardRef(
+var Pressable = React4__namespace.forwardRef(
   ({
     children,
     className,
@@ -1039,17 +1043,17 @@ function CommunityInitiatives({
   pattern,
   patternOpacity
 }) {
-  const [activeCategory, setActiveCategory] = React3__namespace.useState(
+  const [activeCategory, setActiveCategory] = React4__namespace.useState(
     categories?.[0]?.id || ""
   );
   const currentCategory = categories?.find((category) => category.id === activeCategory) || categories?.[0];
-  const handleCategoryChange = React3.useCallback(
+  const handleCategoryChange = React4.useCallback(
     (e) => {
       setActiveCategory(e.target.value);
     },
     []
   );
-  const categoriesContent = React3.useMemo(() => {
+  const categoriesContent = React4.useMemo(() => {
     if (categoriesSlot) return categoriesSlot;
     if (!categories || categories.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs(

package/dist/community-initiatives.js

@@ -1,6 +1,6 @@
 "use client";
-import * as React3 from 'react';
-import React3__default, { useCallback, useMemo } from 'react';
+import * as React4 from 'react';
+import React4__default, { useCallback, useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Img } from '@page-speed/img';
@@ -15,9 +15,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";
 function Tabs({
   className,
   ...props
@@ -140,7 +144,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(
@@ -446,7 +450,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,
@@ -582,7 +586,7 @@ function useNavigation({
   href,
   onClick
 } = {}) {
-  const linkType = React3.useMemo(() => {
+  const linkType = React4.useMemo(() => {
     if (!href || href.trim() === "") {
       return onClick ? "none" : "none";
     }
@@ -603,7 +607,7 @@ function useNavigation({
       return "internal";
     }
   }, [href, onClick]);
-  const normalizedHref = React3.useMemo(() => {
+  const normalizedHref = React4.useMemo(() => {
     if (!href || href.trim() === "") {
       return void 0;
     }
@@ -621,7 +625,7 @@ function useNavigation({
         return trimmed;
     }
   }, [href, linkType]);
-  const target = React3.useMemo(() => {
+  const target = React4.useMemo(() => {
     switch (linkType) {
       case "external":
         return "_blank";
@@ -634,7 +638,7 @@ function useNavigation({
         return void 0;
     }
   }, [linkType]);
-  const rel = React3.useMemo(() => {
+  const rel = React4.useMemo(() => {
     if (linkType === "external") {
       return "noopener noreferrer";
     }
@@ -643,7 +647,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 {
@@ -827,7 +831,7 @@ var buttonVariants = cva(baseStyles, {
     size: "default"
   }
 });
-var Pressable = React3.forwardRef(
+var Pressable = React4.forwardRef(
   ({
     children,
     className,
@@ -1017,7 +1021,7 @@ function CommunityInitiatives({
   pattern,
   patternOpacity
 }) {
-  const [activeCategory, setActiveCategory] = React3.useState(
+  const [activeCategory, setActiveCategory] = React4.useState(
     categories?.[0]?.id || ""
   );
   const currentCategory = categories?.find((category) => category.id === activeCategory) || categories?.[0];

package/dist/comparison-ai-models.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');
@@ -26,7 +26,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
+var React4__namespace = /*#__PURE__*/_interopNamespace(React4);
 
 // components/blocks/comparison/comparison-ai-models.tsx
 function cn(...inputs) {
@@ -63,9 +63,13 @@ function getNestedCardTextColor(parentBg, options) {
   return isDark ? "text-foreground" : "";
 }
 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 Table({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -151,7 +155,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(
@@ -457,7 +461,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,
@@ -538,8 +542,8 @@ function ComparisonAiModels({
   patternOpacity,
   optixFlowConfig
 }) {
-  const [hoveredModel, setHoveredModel] = React3.useState(null);
-  const renderStatusIcon = React3__namespace.useCallback((status) => {
+  const [hoveredModel, setHoveredModel] = React4.useState(null);
+  const renderStatusIcon = React4__namespace.useCallback((status) => {
     if (status === "best") {
       return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/circle-check", size: 16, className: "text-success" });
     }
@@ -548,7 +552,7 @@ function ComparisonAiModels({
     }
     return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/minus", size: 16, className: "text-muted-foreground" });
   }, []);
-  const getCellClassName = React3__namespace.useCallback(
+  const getCellClassName = React4__namespace.useCallback(
     (status, modelKey) => {
       const baseClass = "cursor-pointer py-4 text-center font-medium transition-all duration-300";
       let statusClass = "";
@@ -569,7 +573,7 @@ function ComparisonAiModels({
     },
     [hoveredModel]
   );
-  const getSummaryCardClassName = React3__namespace.useCallback(
+  const getSummaryCardClassName = React4__namespace.useCallback(
     (modelKey) => {
       const baseClass = "rounded border border-border/30 bg-background/50 p-3 transition-all duration-300";
       if (hoveredModel === modelKey) {
@@ -584,7 +588,7 @@ function ComparisonAiModels({
     },
     [hoveredModel]
   );
-  const tableContent = React3__namespace.useMemo(() => {
+  const tableContent = React4__namespace.useMemo(() => {
     if (tableSlot) return tableSlot;
     if (!models || !comparisonData || comparisonData.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -662,7 +666,7 @@ function ComparisonAiModels({
     getCellClassName,
     renderStatusIcon
   ]);
-  const analysisContent = React3__namespace.useMemo(() => {
+  const analysisContent = React4__namespace.useMemo(() => {
     if (analysisSlot) return analysisSlot;
     if (!models) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
@@ -703,14 +707,14 @@ function ComparisonAiModels({
       ] })
     ] }) });
   }, [analysisSlot, models, analysisClassName, getSummaryCardClassName]);
-  const headingContent = React3__namespace.useMemo(() => {
+  const headingContent = React4__namespace.useMemo(() => {
     if (!heading) return null;
     if (typeof heading === "string") {
       return /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-bold md:text-4xl lg:text-5xl", headingClassName), children: heading });
     }
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading });
   }, [heading, headingClassName]);
-  const descriptionContent = React3__namespace.useMemo(() => {
+  const descriptionContent = React4__namespace.useMemo(() => {
     if (!description) return null;
     if (typeof description === "string") {
       return /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 text-muted-foreground md:text-lg", descriptionClassName), children: description });

package/dist/comparison-ai-models.js

@@ -1,6 +1,6 @@
 "use client";
-import * as React3 from 'react';
-import React3__default, { useState } from 'react';
+import * as React4 from 'react';
+import React4__default, { useState } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Icon } from '@page-speed/icon';
@@ -42,9 +42,13 @@ function getNestedCardTextColor(parentBg, options) {
   return isDark ? "text-foreground" : "";
 }
 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 Table({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -130,7 +134,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(
@@ -436,7 +440,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,
@@ -518,7 +522,7 @@ function ComparisonAiModels({
   optixFlowConfig
 }) {
   const [hoveredModel, setHoveredModel] = useState(null);
-  const renderStatusIcon = React3.useCallback((status) => {
+  const renderStatusIcon = React4.useCallback((status) => {
     if (status === "best") {
       return /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/circle-check", size: 16, className: "text-success" });
     }
@@ -527,7 +531,7 @@ function ComparisonAiModels({
     }
     return /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/minus", size: 16, className: "text-muted-foreground" });
   }, []);
-  const getCellClassName = React3.useCallback(
+  const getCellClassName = React4.useCallback(
     (status, modelKey) => {
       const baseClass = "cursor-pointer py-4 text-center font-medium transition-all duration-300";
       let statusClass = "";
@@ -548,7 +552,7 @@ function ComparisonAiModels({
     },
     [hoveredModel]
   );
-  const getSummaryCardClassName = React3.useCallback(
+  const getSummaryCardClassName = React4.useCallback(
     (modelKey) => {
       const baseClass = "rounded border border-border/30 bg-background/50 p-3 transition-all duration-300";
       if (hoveredModel === modelKey) {
@@ -563,7 +567,7 @@ function ComparisonAiModels({
     },
     [hoveredModel]
   );
-  const tableContent = React3.useMemo(() => {
+  const tableContent = React4.useMemo(() => {
     if (tableSlot) return tableSlot;
     if (!models || !comparisonData || comparisonData.length === 0) return null;
     return /* @__PURE__ */ jsx(
@@ -641,7 +645,7 @@ function ComparisonAiModels({
     getCellClassName,
     renderStatusIcon
   ]);
-  const analysisContent = React3.useMemo(() => {
+  const analysisContent = React4.useMemo(() => {
     if (analysisSlot) return analysisSlot;
     if (!models) return null;
     return /* @__PURE__ */ jsx("div", { className: cn(
@@ -682,14 +686,14 @@ function ComparisonAiModels({
       ] })
     ] }) });
   }, [analysisSlot, models, analysisClassName, getSummaryCardClassName]);
-  const headingContent = React3.useMemo(() => {
+  const headingContent = React4.useMemo(() => {
     if (!heading) return null;
     if (typeof heading === "string") {
       return /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-bold md:text-4xl lg:text-5xl", headingClassName), children: heading });
     }
     return /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading });
   }, [heading, headingClassName]);
-  const descriptionContent = React3.useMemo(() => {
+  const descriptionContent = React4.useMemo(() => {
     if (!description) return null;
     if (typeof description === "string") {
       return /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-muted-foreground md:text-lg", descriptionClassName), children: description });

package/dist/comparison-feature-cards.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');
@@ -27,7 +27,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
+var React4__namespace = /*#__PURE__*/_interopNamespace(React4);
 var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespace(SeparatorPrimitive);
 
 // components/blocks/comparison/comparison-feature-cards.tsx
@@ -35,9 +35,13 @@ 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";
 function Separator({
   className,
   orientation = "horizontal",
@@ -67,7 +71,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(
@@ -373,7 +377,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,
@@ -458,7 +462,7 @@ function ComparisonFeatureCards({
   patternOpacity,
   optixFlowConfig
 }) {
-  const renderCard = React3__namespace.useCallback(
+  const renderCard = React4__namespace.useCallback(
     (product, isHighlighted) => /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -514,7 +518,7 @@ function ComparisonFeatureCards({
     ),
     [cardClassName, optixFlowConfig]
   );
-  const cardsContent = React3__namespace.useMemo(() => {
+  const cardsContent = React4__namespace.useMemo(() => {
     if (cardsSlot) return cardsSlot;
     if (!productA || !productB) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -522,28 +526,28 @@ function ComparisonFeatureCards({
       renderCard(productB, productB.highlighted ?? false)
     ] });
   }, [cardsSlot, productA, productB, renderCard]);
-  const headingContent = React3__namespace.useMemo(() => {
+  const headingContent = React4__namespace.useMemo(() => {
     if (!heading) return null;
     if (typeof heading === "string") {
       return /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-6 text-4xl font-semibold md:text-7xl", headingClassName), children: heading });
     }
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading });
   }, [heading, headingClassName]);
-  const descriptionContent = React3__namespace.useMemo(() => {
+  const descriptionContent = React4__namespace.useMemo(() => {
     if (!description) return null;
     if (typeof description === "string") {
       return /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto max-w-4xl text-muted-foreground md:text-xl", descriptionClassName), children: description });
     }
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description });
   }, [description, descriptionClassName]);
-  const suitabilityContent = React3__namespace.useMemo(() => {
+  const suitabilityContent = React4__namespace.useMemo(() => {
     if (!suitabilityTitle && !suitabilityDescription) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: suitabilityClassName, children: [
       suitabilityTitle && (typeof suitabilityTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "mb-4 text-3xl font-semibold", children: suitabilityTitle }) : suitabilityTitle),
       suitabilityDescription && (typeof suitabilityDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "leading-6 text-muted-foreground md:text-lg", children: suitabilityDescription }) : suitabilityDescription)
     ] });
   }, [suitabilityTitle, suitabilityDescription, suitabilityClassName]);
-  const differencesContent = React3__namespace.useMemo(() => {
+  const differencesContent = React4__namespace.useMemo(() => {
     if (!differencesTitle && !differencesDescription) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-16", differencesClassName), children: [
       differencesTitle && (typeof differencesTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "mb-4 text-3xl font-semibold", children: differencesTitle }) : differencesTitle),

package/dist/comparison-feature-cards.js

@@ -1,6 +1,6 @@
 "use client";
-import * as React3 from 'react';
-import React3__default from 'react';
+import * as React4 from 'react';
+import React4__default from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Icon } from '@page-speed/icon';
@@ -13,9 +13,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";
 function Separator({
   className,
   orientation = "horizontal",
@@ -45,7 +49,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(
@@ -351,7 +355,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,
@@ -436,7 +440,7 @@ function ComparisonFeatureCards({
   patternOpacity,
   optixFlowConfig
 }) {
-  const renderCard = React3.useCallback(
+  const renderCard = React4.useCallback(
     (product, isHighlighted) => /* @__PURE__ */ jsxs(
       "div",
       {
@@ -492,7 +496,7 @@ function ComparisonFeatureCards({
     ),
     [cardClassName, optixFlowConfig]
   );
-  const cardsContent = React3.useMemo(() => {
+  const cardsContent = React4.useMemo(() => {
     if (cardsSlot) return cardsSlot;
     if (!productA || !productB) return null;
     return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -500,28 +504,28 @@ function ComparisonFeatureCards({
       renderCard(productB, productB.highlighted ?? false)
     ] });
   }, [cardsSlot, productA, productB, renderCard]);
-  const headingContent = React3.useMemo(() => {
+  const headingContent = React4.useMemo(() => {
     if (!heading) return null;
     if (typeof heading === "string") {
       return /* @__PURE__ */ jsx("h1", { className: cn("mb-6 text-4xl font-semibold md:text-7xl", headingClassName), children: heading });
     }
     return /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading });
   }, [heading, headingClassName]);
-  const descriptionContent = React3.useMemo(() => {
+  const descriptionContent = React4.useMemo(() => {
     if (!description) return null;
     if (typeof description === "string") {
       return /* @__PURE__ */ jsx("p", { className: cn("mx-auto max-w-4xl text-muted-foreground md:text-xl", descriptionClassName), children: description });
     }
     return /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description });
   }, [description, descriptionClassName]);
-  const suitabilityContent = React3.useMemo(() => {
+  const suitabilityContent = React4.useMemo(() => {
     if (!suitabilityTitle && !suitabilityDescription) return null;
     return /* @__PURE__ */ jsxs("div", { className: suitabilityClassName, children: [
       suitabilityTitle && (typeof suitabilityTitle === "string" ? /* @__PURE__ */ jsx("h2", { className: "mb-4 text-3xl font-semibold", children: suitabilityTitle }) : suitabilityTitle),
       suitabilityDescription && (typeof suitabilityDescription === "string" ? /* @__PURE__ */ jsx("p", { className: "leading-6 text-muted-foreground md:text-lg", children: suitabilityDescription }) : suitabilityDescription)
     ] });
   }, [suitabilityTitle, suitabilityDescription, suitabilityClassName]);
-  const differencesContent = React3.useMemo(() => {
+  const differencesContent = React4.useMemo(() => {
     if (!differencesTitle && !differencesDescription) return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("mt-16", differencesClassName), children: [
       differencesTitle && (typeof differencesTitle === "string" ? /* @__PURE__ */ jsx("h2", { className: "mb-4 text-3xl font-semibold", children: differencesTitle }) : differencesTitle),