@opensite/ui 0.8.1 → 0.8.2

package/dist/feature-capabilities-grid.cjs

@@ -574,49 +574,52 @@ function FeatureCapabilitiesGrid({
   patternOpacity,
   patternClassName
 }) {
-  const renderItemIcon = (item) => {
+  const renderItemIcon = React__namespace.useCallback((item) => {
     if (item.icon) return item.icon;
     if (item.iconName) return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.iconName, size: 20 });
-    return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/star", size: 20 });
-  };
+    return null;
+  }, []);
   const itemsContent = React.useMemo(() => {
     if (itemsSlot) return itemsSlot;
     if (!items || items.length === 0) return null;
-    return items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-      Card,
-      {
-        className: cn("group relative overflow-visible border-white/10 bg-white/5 p-0 transition-colors duration-300 hover:border-white/20", cardClassName, item.className),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -inset-px rounded-xl bg-linear-to-br from-white/10 via-white/5 to-transparent" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-0 rounded-xl bg-linear-to-tr from-white/0 to-white/0 transition-colors group-hover:from-white/3 group-hover:to-white/6" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pointer-events-none absolute inset-0 hidden group-hover:block", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -left-2 -top-2 h-3 w-3 bg-white" }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -right-2 -top-2 h-3 w-3 bg-white" }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -left-2 -bottom-2 h-3 w-3 bg-white" }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -right-2 -bottom-2 h-3 w-3 bg-white" })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "relative z-10 flex flex-row items-start gap-3 p-6", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex h-10 w-10 items-center justify-center rounded-xl border border-white/15 bg-white/5 text-white", item.iconClassName), children: renderItemIcon(item) }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-              item.title && (typeof item.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: cn("text-lg font-medium text-white", item.titleClassName), children: item.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-lg font-medium text-white", item.titleClassName), children: item.title })),
-              item.badge && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("rounded-full border border-white/20 px-2 py-0.5 text-[10px] leading-none text-white/70", item.badgeClassName), children: item.badge })
-            ] }) })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: cn("relative z-10 px-6 pb-6 text-sm text-white/70", item.descriptionClassName), children: item.description }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            framerMotion.motion.div,
-            {
-              className: "pointer-events-none absolute inset-0 rounded-xl ring-0 ring-white/0",
-              initial: { opacity: 0 },
-              whileHover: { opacity: 1 },
-              transition: { duration: 0.25 }
-            }
-          )
-        ]
-      },
-      `${typeof item.title === "string" ? item.title : "item"}-${index}`
-    ));
-  }, [itemsSlot, items, cardClassName]);
+    return items.map((item, index) => {
+      const iconContent = renderItemIcon(item);
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        Card,
+        {
+          className: cn("group relative overflow-visible border-white/10 bg-white/5 p-0 transition-colors duration-300 hover:border-white/20", cardClassName, item.className),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -inset-px rounded-xl bg-linear-to-br from-white/10 via-white/5 to-transparent" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-0 rounded-xl bg-linear-to-tr from-white/0 to-white/0 transition-colors group-hover:from-white/3 group-hover:to-white/6" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pointer-events-none absolute inset-0 hidden group-hover:block", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -left-2 -top-2 h-3 w-3 bg-white" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -right-2 -top-2 h-3 w-3 bg-white" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -left-2 -bottom-2 h-3 w-3 bg-white" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -right-2 -bottom-2 h-3 w-3 bg-white" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "relative z-10 flex flex-row items-start gap-3 p-6", children: [
+              iconContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex h-10 w-10 items-center justify-center rounded-xl border border-white/15 bg-white/5 text-white", item.iconClassName), children: iconContent }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                item.title && (typeof item.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: cn("text-lg font-medium text-white", item.titleClassName), children: item.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-lg font-medium text-white", item.titleClassName), children: item.title })),
+                item.badge && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("rounded-full border border-white/20 px-2 py-0.5 text-[10px] leading-none text-white/70", item.badgeClassName), children: item.badge })
+              ] }) })
+            ] }),
+            item.description && /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: cn("relative z-10 px-6 pb-6 text-sm text-white/70", item.descriptionClassName), children: item.description }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              framerMotion.motion.div,
+              {
+                className: "pointer-events-none absolute inset-0 rounded-xl ring-0 ring-white/0",
+                initial: { opacity: 0 },
+                whileHover: { opacity: 1 },
+                transition: { duration: 0.25 }
+              }
+            )
+          ]
+        },
+        `${typeof item.title === "string" ? item.title : "item"}-${index}`
+      );
+    });
+  }, [itemsSlot, items, cardClassName, renderItemIcon]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {

package/dist/feature-capabilities-grid.js

@@ -553,49 +553,52 @@ function FeatureCapabilitiesGrid({
   patternOpacity,
   patternClassName
 }) {
-  const renderItemIcon = (item) => {
+  const renderItemIcon = React.useCallback((item) => {
     if (item.icon) return item.icon;
     if (item.iconName) return /* @__PURE__ */ jsx(DynamicIcon, { name: item.iconName, size: 20 });
-    return /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/star", size: 20 });
-  };
+    return null;
+  }, []);
   const itemsContent = useMemo(() => {
     if (itemsSlot) return itemsSlot;
     if (!items || items.length === 0) return null;
-    return items.map((item, index) => /* @__PURE__ */ jsxs(
-      Card,
-      {
-        className: cn("group relative overflow-visible border-white/10 bg-white/5 p-0 transition-colors duration-300 hover:border-white/20", cardClassName, item.className),
-        children: [
-          /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100", children: /* @__PURE__ */ jsx("div", { className: "absolute -inset-px rounded-xl bg-linear-to-br from-white/10 via-white/5 to-transparent" }) }),
-          /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 rounded-xl bg-linear-to-tr from-white/0 to-white/0 transition-colors group-hover:from-white/3 group-hover:to-white/6" }),
-          /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute inset-0 hidden group-hover:block", children: [
-            /* @__PURE__ */ jsx("div", { className: "absolute -left-2 -top-2 h-3 w-3 bg-white" }),
-            /* @__PURE__ */ jsx("div", { className: "absolute -right-2 -top-2 h-3 w-3 bg-white" }),
-            /* @__PURE__ */ jsx("div", { className: "absolute -left-2 -bottom-2 h-3 w-3 bg-white" }),
-            /* @__PURE__ */ jsx("div", { className: "absolute -right-2 -bottom-2 h-3 w-3 bg-white" })
-          ] }),
-          /* @__PURE__ */ jsxs(CardHeader, { className: "relative z-10 flex flex-row items-start gap-3 p-6", children: [
-            /* @__PURE__ */ jsx("div", { className: cn("flex h-10 w-10 items-center justify-center rounded-xl border border-white/15 bg-white/5 text-white", item.iconClassName), children: renderItemIcon(item) }),
-            /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-              item.title && (typeof item.title === "string" ? /* @__PURE__ */ jsx(CardTitle, { className: cn("text-lg font-medium text-white", item.titleClassName), children: item.title }) : /* @__PURE__ */ jsx("div", { className: cn("text-lg font-medium text-white", item.titleClassName), children: item.title })),
-              item.badge && /* @__PURE__ */ jsx("span", { className: cn("rounded-full border border-white/20 px-2 py-0.5 text-[10px] leading-none text-white/70", item.badgeClassName), children: item.badge })
-            ] }) })
-          ] }),
-          /* @__PURE__ */ jsx(CardContent, { className: cn("relative z-10 px-6 pb-6 text-sm text-white/70", item.descriptionClassName), children: item.description }),
-          /* @__PURE__ */ jsx(
-            motion.div,
-            {
-              className: "pointer-events-none absolute inset-0 rounded-xl ring-0 ring-white/0",
-              initial: { opacity: 0 },
-              whileHover: { opacity: 1 },
-              transition: { duration: 0.25 }
-            }
-          )
-        ]
-      },
-      `${typeof item.title === "string" ? item.title : "item"}-${index}`
-    ));
-  }, [itemsSlot, items, cardClassName]);
+    return items.map((item, index) => {
+      const iconContent = renderItemIcon(item);
+      return /* @__PURE__ */ jsxs(
+        Card,
+        {
+          className: cn("group relative overflow-visible border-white/10 bg-white/5 p-0 transition-colors duration-300 hover:border-white/20", cardClassName, item.className),
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100", children: /* @__PURE__ */ jsx("div", { className: "absolute -inset-px rounded-xl bg-linear-to-br from-white/10 via-white/5 to-transparent" }) }),
+            /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 rounded-xl bg-linear-to-tr from-white/0 to-white/0 transition-colors group-hover:from-white/3 group-hover:to-white/6" }),
+            /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute inset-0 hidden group-hover:block", children: [
+              /* @__PURE__ */ jsx("div", { className: "absolute -left-2 -top-2 h-3 w-3 bg-white" }),
+              /* @__PURE__ */ jsx("div", { className: "absolute -right-2 -top-2 h-3 w-3 bg-white" }),
+              /* @__PURE__ */ jsx("div", { className: "absolute -left-2 -bottom-2 h-3 w-3 bg-white" }),
+              /* @__PURE__ */ jsx("div", { className: "absolute -right-2 -bottom-2 h-3 w-3 bg-white" })
+            ] }),
+            /* @__PURE__ */ jsxs(CardHeader, { className: "relative z-10 flex flex-row items-start gap-3 p-6", children: [
+              iconContent && /* @__PURE__ */ jsx("div", { className: cn("flex h-10 w-10 items-center justify-center rounded-xl border border-white/15 bg-white/5 text-white", item.iconClassName), children: iconContent }),
+              /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                item.title && (typeof item.title === "string" ? /* @__PURE__ */ jsx(CardTitle, { className: cn("text-lg font-medium text-white", item.titleClassName), children: item.title }) : /* @__PURE__ */ jsx("div", { className: cn("text-lg font-medium text-white", item.titleClassName), children: item.title })),
+                item.badge && /* @__PURE__ */ jsx("span", { className: cn("rounded-full border border-white/20 px-2 py-0.5 text-[10px] leading-none text-white/70", item.badgeClassName), children: item.badge })
+              ] }) })
+            ] }),
+            item.description && /* @__PURE__ */ jsx(CardContent, { className: cn("relative z-10 px-6 pb-6 text-sm text-white/70", item.descriptionClassName), children: item.description }),
+            /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                className: "pointer-events-none absolute inset-0 rounded-xl ring-0 ring-white/0",
+                initial: { opacity: 0 },
+                whileHover: { opacity: 1 },
+                transition: { duration: 0.25 }
+              }
+            )
+          ]
+        },
+        `${typeof item.title === "string" ? item.title : "item"}-${index}`
+      );
+    });
+  }, [itemsSlot, items, cardClassName, renderItemIcon]);
   return /* @__PURE__ */ jsxs(
     Section,
     {

package/dist/feature-card-grid-linked.cjs

@@ -842,28 +842,28 @@ function FeatureCardGridLinked({
   patternOpacity,
   patternClassName
 }) {
+  const renderImage = React.useCallback((feature, imageAlt) => {
+    if (feature.imageSlot) return feature.imageSlot;
+    if (feature.image) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        img.Img,
+        {
+          src: feature.image,
+          alt: imageAlt,
+          className: "h-full w-full rounded-t-lg object-cover transition-opacity hover:opacity-80",
+          loading: "lazy",
+          optixFlowConfig
+        }
+      );
+    }
+    return null;
+  }, [optixFlowConfig]);
   const featuresContent = React.useMemo(() => {
     if (featuresSlot) return featuresSlot;
     if (!features || features.length === 0) return null;
     return features.map((feature, index) => {
       const featureKey = feature.id || `feature-${index}`;
       const imageAlt = feature.imageAlt || (typeof feature.heading === "string" ? feature.heading : "Feature image");
-      const renderImage = () => {
-        if (feature.imageSlot) return feature.imageSlot;
-        if (feature.image) {
-          return /* @__PURE__ */ jsxRuntime.jsx(
-            img.Img,
-            {
-              src: feature.image,
-              alt: imageAlt,
-              className: "h-full w-full rounded-t-lg object-cover transition-opacity hover:opacity-80",
-              loading: "lazy",
-              optixFlowConfig
-            }
-          );
-        }
-        return null;
-      };
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
@@ -874,7 +874,7 @@ function FeatureCardGridLinked({
                 feature.label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("font-mono text-xs text-muted-foreground", feature.labelClassName), children: feature.label }),
                 feature.heading && /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: feature.url, children: typeof feature.heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("text-2xl transition-all hover:text-primary hover:opacity-80 sm:text-3xl lg:text-4xl", feature.headingClassName), children: feature.heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-2xl transition-all hover:text-primary hover:opacity-80 sm:text-3xl lg:text-4xl", feature.headingClassName), children: feature.heading }) })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "md:1/3 w-2/5 shrink-0 rounded-r-lg border-l", children: /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: feature.url, children: renderImage() }) })
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "md:1/3 w-2/5 shrink-0 rounded-r-lg border-l", children: /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: feature.url, children: renderImage(feature, imageAlt) }) })
             ] }),
             feature.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("p-4 text-muted-foreground md:p-8", feature.descriptionClassName), children: feature.description })
           ]
@@ -882,7 +882,7 @@ function FeatureCardGridLinked({
         featureKey
       );
     });
-  }, [featuresSlot, features, cardClassName, optixFlowConfig]);
+  }, [featuresSlot, features, cardClassName, renderImage]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {

package/dist/feature-card-grid-linked.js

@@ -1,6 +1,6 @@
 "use client";
 import * as React from 'react';
-import React__default, { useMemo } from 'react';
+import React__default, { useCallback, useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
@@ -821,28 +821,28 @@ function FeatureCardGridLinked({
   patternOpacity,
   patternClassName
 }) {
+  const renderImage = useCallback((feature, imageAlt) => {
+    if (feature.imageSlot) return feature.imageSlot;
+    if (feature.image) {
+      return /* @__PURE__ */ jsx(
+        Img,
+        {
+          src: feature.image,
+          alt: imageAlt,
+          className: "h-full w-full rounded-t-lg object-cover transition-opacity hover:opacity-80",
+          loading: "lazy",
+          optixFlowConfig
+        }
+      );
+    }
+    return null;
+  }, [optixFlowConfig]);
   const featuresContent = useMemo(() => {
     if (featuresSlot) return featuresSlot;
     if (!features || features.length === 0) return null;
     return features.map((feature, index) => {
       const featureKey = feature.id || `feature-${index}`;
       const imageAlt = feature.imageAlt || (typeof feature.heading === "string" ? feature.heading : "Feature image");
-      const renderImage = () => {
-        if (feature.imageSlot) return feature.imageSlot;
-        if (feature.image) {
-          return /* @__PURE__ */ jsx(
-            Img,
-            {
-              src: feature.image,
-              alt: imageAlt,
-              className: "h-full w-full rounded-t-lg object-cover transition-opacity hover:opacity-80",
-              loading: "lazy",
-              optixFlowConfig
-            }
-          );
-        }
-        return null;
-      };
       return /* @__PURE__ */ jsxs(
         "div",
         {
@@ -853,7 +853,7 @@ function FeatureCardGridLinked({
                 feature.label && /* @__PURE__ */ jsx("span", { className: cn("font-mono text-xs text-muted-foreground", feature.labelClassName), children: feature.label }),
                 feature.heading && /* @__PURE__ */ jsx(Pressable, { href: feature.url, children: typeof feature.heading === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("text-2xl transition-all hover:text-primary hover:opacity-80 sm:text-3xl lg:text-4xl", feature.headingClassName), children: feature.heading }) : /* @__PURE__ */ jsx("div", { className: cn("text-2xl transition-all hover:text-primary hover:opacity-80 sm:text-3xl lg:text-4xl", feature.headingClassName), children: feature.heading }) })
               ] }),
-              /* @__PURE__ */ jsx("div", { className: "md:1/3 w-2/5 shrink-0 rounded-r-lg border-l", children: /* @__PURE__ */ jsx(Pressable, { href: feature.url, children: renderImage() }) })
+              /* @__PURE__ */ jsx("div", { className: "md:1/3 w-2/5 shrink-0 rounded-r-lg border-l", children: /* @__PURE__ */ jsx(Pressable, { href: feature.url, children: renderImage(feature, imageAlt) }) })
             ] }),
             feature.description && /* @__PURE__ */ jsx("p", { className: cn("p-4 text-muted-foreground md:p-8", feature.descriptionClassName), children: feature.description })
           ]
@@ -861,7 +861,7 @@ function FeatureCardGridLinked({
         featureKey
       );
     });
-  }, [featuresSlot, features, cardClassName, optixFlowConfig]);
+  }, [featuresSlot, features, cardClassName, renderImage]);
   return /* @__PURE__ */ jsxs(
     Section,
     {

package/dist/feature-carousel-progress.cjs

@@ -1237,10 +1237,10 @@ function FeatureCarouselProgress({
       );
     });
   }, [api, slidesLength]);
-  const renderSlideIcon = React4.useMemo(() => (slide) => {
+  const renderSlideIcon = React4.useCallback((slide) => {
     if (slide.icon) return slide.icon;
     if (slide.iconName) return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: slide.iconName, size: 16 });
-    return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/star", size: 16 });
+    return null;
   }, []);
   const slidesContent = React4.useMemo(() => {
     if (slidesSlot) return slidesSlot;
@@ -1250,7 +1250,7 @@ function FeatureCarouselProgress({
       {
         className: "basis-full md:basis-1/2 lg:basis-1/3",
         children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-1", children: /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cn(cardClassName, slide.className), children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "flex flex-col justify-center p-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("mb-5 flex size-8 items-center justify-center rounded-full bg-accent lg:size-10", slide.iconClassName), children: renderSlideIcon(slide) }),
+          (slide.icon || slide.iconName) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("mb-5 flex size-8 items-center justify-center rounded-full bg-accent lg:size-10", slide.iconClassName), children: renderSlideIcon(slide) }),
           slide.title && (typeof slide.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-xl font-semibold md:text-2xl lg:text-2xl", slide.titleClassName), children: slide.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-xl font-semibold md:text-2xl lg:text-2xl", slide.titleClassName), children: slide.title })),
           slide.description && (typeof slide.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("pt-2 text-muted-foreground", slide.descriptionClassName), children: slide.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("pt-2 text-muted-foreground", slide.descriptionClassName), children: slide.description }))
         ] }) }) }) })

package/dist/feature-carousel-progress.js

@@ -1,6 +1,6 @@
 "use client";
 import * as React4 from 'react';
-import React4__default, { useState, useEffect, useMemo } from 'react';
+import React4__default, { useState, useEffect, useCallback, useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -1212,10 +1212,10 @@ function FeatureCarouselProgress({
       );
     });
   }, [api, slidesLength]);
-  const renderSlideIcon = useMemo(() => (slide) => {
+  const renderSlideIcon = useCallback((slide) => {
     if (slide.icon) return slide.icon;
     if (slide.iconName) return /* @__PURE__ */ jsx(DynamicIcon, { name: slide.iconName, size: 16 });
-    return /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/star", size: 16 });
+    return null;
   }, []);
   const slidesContent = useMemo(() => {
     if (slidesSlot) return slidesSlot;
@@ -1225,7 +1225,7 @@ function FeatureCarouselProgress({
       {
         className: "basis-full md:basis-1/2 lg:basis-1/3",
         children: /* @__PURE__ */ jsx("div", { className: "p-1", children: /* @__PURE__ */ jsx(Card, { className: cn(cardClassName, slide.className), children: /* @__PURE__ */ jsx(CardContent, { className: "flex flex-col justify-center p-6", children: /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("span", { className: cn("mb-5 flex size-8 items-center justify-center rounded-full bg-accent lg:size-10", slide.iconClassName), children: renderSlideIcon(slide) }),
+          (slide.icon || slide.iconName) && /* @__PURE__ */ jsx("span", { className: cn("mb-5 flex size-8 items-center justify-center rounded-full bg-accent lg:size-10", slide.iconClassName), children: renderSlideIcon(slide) }),
           slide.title && (typeof slide.title === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-xl font-semibold md:text-2xl lg:text-2xl", slide.titleClassName), children: slide.title }) : /* @__PURE__ */ jsx("div", { className: cn("text-xl font-semibold md:text-2xl lg:text-2xl", slide.titleClassName), children: slide.title })),
           slide.description && (typeof slide.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("pt-2 text-muted-foreground", slide.descriptionClassName), children: slide.description }) : /* @__PURE__ */ jsx("div", { className: cn("pt-2 text-muted-foreground", slide.descriptionClassName), children: slide.description }))
         ] }) }) }) })

package/dist/feature-category-image-cards.cjs

@@ -501,7 +501,7 @@ function FeatureCategoryImageCards({
   patternOpacity,
   patternClassName
 }) {
-  const renderFeatureImage = (feature) => {
+  const renderFeatureImage = React.useCallback((feature) => {
     if (feature.imageSlot) return feature.imageSlot;
     if (feature.imageSrc) {
       return /* @__PURE__ */ jsxRuntime.jsx(
@@ -516,7 +516,7 @@ function FeatureCategoryImageCards({
       );
     }
     return null;
-  };
+  }, [optixFlowConfig]);
   const featuresContent = React.useMemo(() => {
     if (featuresSlot) return featuresSlot;
     if (!features || features.length === 0) return null;
@@ -527,7 +527,7 @@ function FeatureCategoryImageCards({
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "px-7 pb-7", children: renderFeatureImage(feature) })
     ] }, index));
-  }, [featuresSlot, features, cardClassName, optixFlowConfig]);
+  }, [featuresSlot, features, cardClassName, renderFeatureImage]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {

package/dist/feature-category-image-cards.js

@@ -1,5 +1,5 @@
 "use client";
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Slot } from '@radix-ui/react-slot';
@@ -495,7 +495,7 @@ function FeatureCategoryImageCards({
   patternOpacity,
   patternClassName
 }) {
-  const renderFeatureImage = (feature) => {
+  const renderFeatureImage = useCallback((feature) => {
     if (feature.imageSlot) return feature.imageSlot;
     if (feature.imageSrc) {
       return /* @__PURE__ */ jsx(
@@ -510,7 +510,7 @@ function FeatureCategoryImageCards({
       );
     }
     return null;
-  };
+  }, [optixFlowConfig]);
   const featuresContent = useMemo(() => {
     if (featuresSlot) return featuresSlot;
     if (!features || features.length === 0) return null;
@@ -521,7 +521,7 @@ function FeatureCategoryImageCards({
       ] }),
       /* @__PURE__ */ jsx(CardContent, { className: "px-7 pb-7", children: renderFeatureImage(feature) })
     ] }, index));
-  }, [featuresSlot, features, cardClassName, optixFlowConfig]);
+  }, [featuresSlot, features, cardClassName, renderFeatureImage]);
   return /* @__PURE__ */ jsxs(
     Section,
     {

package/dist/feature-checklist-image.cjs

@@ -1039,8 +1039,8 @@ function FeatureChecklistImage({
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("lg:p-10", contentClassName), children: [
           title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-medium text-balance md:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-3xl font-medium text-balance md:text-5xl", titleClassName), children: title })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-1 text-muted-foreground md:mt-6", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-1 text-muted-foreground md:mt-6", descriptionClassName), children: description })),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: actionsClassName, children: actionsContent }),
-          /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("mt-10 flex-wrap items-center gap-6 space-y-6 md:flex md:space-y-0", checklistClassName), children: checklistContent })
+          actionsContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: actionsClassName, children: actionsContent }),
+          checklistContent && /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("mt-10 flex-wrap items-center gap-6 space-y-6 md:flex md:space-y-0", checklistClassName), children: checklistContent })
         ] })
       ] })
     }

package/dist/feature-checklist-image.js

@@ -1018,8 +1018,8 @@ function FeatureChecklistImage({
         /* @__PURE__ */ jsxs("div", { className: cn("lg:p-10", contentClassName), children: [
           title && (typeof title === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-medium text-balance md:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: cn("text-3xl font-medium text-balance md:text-5xl", titleClassName), children: title })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-1 text-muted-foreground md:mt-6", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mt-1 text-muted-foreground md:mt-6", descriptionClassName), children: description })),
-          /* @__PURE__ */ jsx("div", { className: actionsClassName, children: actionsContent }),
-          /* @__PURE__ */ jsx("ul", { className: cn("mt-10 flex-wrap items-center gap-6 space-y-6 md:flex md:space-y-0", checklistClassName), children: checklistContent })
+          actionsContent && /* @__PURE__ */ jsx("div", { className: actionsClassName, children: actionsContent }),
+          checklistContent && /* @__PURE__ */ jsx("ul", { className: cn("mt-10 flex-wrap items-center gap-6 space-y-6 md:flex md:space-y-0", checklistClassName), children: checklistContent })
         ] })
       ] })
     }

package/dist/feature-checklist-three-column.cjs

@@ -985,15 +985,15 @@ function FeatureChecklistThreeColumn({
   patternOpacity,
   patternClassName
 }) {
-  const getCheckItemContent = React.useMemo(() => (item) => {
+  const getCheckItemContent = React.useCallback((item) => {
     if (typeof item === "string") return item;
     return item.content;
   }, []);
-  const getCheckItemClassName = React.useMemo(() => (item) => {
+  const getCheckItemClassName = React.useCallback((item) => {
     if (typeof item === "string") return void 0;
     return item.className;
   }, []);
-  const renderChecklistColumn = React.useMemo(() => (items, slot, gapClass) => {
+  const renderChecklistColumn = React.useCallback((items, slot, gapClass) => {
     if (slot) return slot;
     if (!items || items.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("flex flex-col text-muted-foreground", gapClass, checklistClassName), children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: cn("flex items-center gap-2", getCheckItemClassName(item)), children: [
@@ -1001,7 +1001,7 @@ function FeatureChecklistThreeColumn({
       getCheckItemContent(item)
     ] }, index)) });
   }, [checklistClassName, getCheckItemContent, getCheckItemClassName]);
-  const renderCardImage = React.useMemo(() => (card) => {
+  const renderCardImage = React.useCallback((card) => {
     if (card.imageSlot) return card.imageSlot;
     if (card.image) {
       return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1017,7 +1017,7 @@ function FeatureChecklistThreeColumn({
     }
     return null;
   }, [optixFlowConfig]);
-  const renderCardLink = React.useMemo(() => (card) => {
+  const renderCardLink = React.useCallback((card) => {
     if (card.linkSlot) return card.linkSlot;
     if (!card.link) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1080,7 +1080,7 @@ function FeatureChecklistThreeColumn({
       pattern,
       patternOpacity,
       patternClassName,
-      className: cn("py-16 sm:py-24 md:py-32", className),
+      className,
       containerClassName,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-4 sm:grid-cols-2 sm:gap-8 md:gap-12 lg:grid-cols-3 lg:gap-16", headerGridClassName), children: [

package/dist/feature-checklist-three-column.js

@@ -1,6 +1,6 @@
 "use client";
 import * as React from 'react';
-import React__default, { useMemo } from 'react';
+import React__default, { useCallback, useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -964,15 +964,15 @@ function FeatureChecklistThreeColumn({
   patternOpacity,
   patternClassName
 }) {
-  const getCheckItemContent = useMemo(() => (item) => {
+  const getCheckItemContent = useCallback((item) => {
     if (typeof item === "string") return item;
     return item.content;
   }, []);
-  const getCheckItemClassName = useMemo(() => (item) => {
+  const getCheckItemClassName = useCallback((item) => {
     if (typeof item === "string") return void 0;
     return item.className;
   }, []);
-  const renderChecklistColumn = useMemo(() => (items, slot, gapClass) => {
+  const renderChecklistColumn = useCallback((items, slot, gapClass) => {
     if (slot) return slot;
     if (!items || items.length === 0) return null;
     return /* @__PURE__ */ jsx("ul", { className: cn("flex flex-col text-muted-foreground", gapClass, checklistClassName), children: items.map((item, index) => /* @__PURE__ */ jsxs("li", { className: cn("flex items-center gap-2", getCheckItemClassName(item)), children: [
@@ -980,7 +980,7 @@ function FeatureChecklistThreeColumn({
       getCheckItemContent(item)
     ] }, index)) });
   }, [checklistClassName, getCheckItemContent, getCheckItemClassName]);
-  const renderCardImage = useMemo(() => (card) => {
+  const renderCardImage = useCallback((card) => {
     if (card.imageSlot) return card.imageSlot;
     if (card.image) {
       return /* @__PURE__ */ jsx(
@@ -996,7 +996,7 @@ function FeatureChecklistThreeColumn({
     }
     return null;
   }, [optixFlowConfig]);
-  const renderCardLink = useMemo(() => (card) => {
+  const renderCardLink = useCallback((card) => {
     if (card.linkSlot) return card.linkSlot;
     if (!card.link) return null;
     return /* @__PURE__ */ jsxs(
@@ -1059,7 +1059,7 @@ function FeatureChecklistThreeColumn({
       pattern,
       patternOpacity,
       patternClassName,
-      className: cn("py-16 sm:py-24 md:py-32", className),
+      className,
       containerClassName,
       children: [
         /* @__PURE__ */ jsxs("div", { className: cn("grid gap-4 sm:grid-cols-2 sm:gap-8 md:gap-12 lg:grid-cols-3 lg:gap-16", headerGridClassName), children: [

package/dist/feature-icon-grid-accent.cjs

@@ -566,12 +566,12 @@ function FeatureIconGridAccent({
       className,
       containerClassName,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex w-full flex-col items-center", headerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center space-y-4 text-center sm:space-y-6 md:max-w-3xl md:text-center", children: [
+        (label || title || description) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex w-full flex-col items-center", headerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center space-y-4 text-center sm:space-y-6 md:max-w-3xl md:text-center", children: [
           label && (typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm text-muted-foreground", labelClassName), children: label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: labelClassName, children: label })),
           title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-medium md:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-muted-foreground md:max-w-2xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
         ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto mt-20 grid max-w-5xl gap-6 md:grid-cols-2", gridClassName), children: featuresContent })
+        featuresContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto mt-20 grid max-w-5xl gap-6 md:grid-cols-2", gridClassName), children: featuresContent })
       ]
     }
   );

package/dist/feature-icon-grid-accent.js

@@ -545,12 +545,12 @@ function FeatureIconGridAccent({
       className,
       containerClassName,
       children: [
-        /* @__PURE__ */ jsx("div", { className: cn("flex w-full flex-col items-center", headerClassName), children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center space-y-4 text-center sm:space-y-6 md:max-w-3xl md:text-center", children: [
+        (label || title || description) && /* @__PURE__ */ jsx("div", { className: cn("flex w-full flex-col items-center", headerClassName), children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center space-y-4 text-center sm:space-y-6 md:max-w-3xl md:text-center", children: [
           label && (typeof label === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm text-muted-foreground", labelClassName), children: label }) : /* @__PURE__ */ jsx("div", { className: labelClassName, children: label })),
           title && (typeof title === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-medium md:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground md:max-w-2xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
         ] }) }),
-        /* @__PURE__ */ jsx("div", { className: cn("mx-auto mt-20 grid max-w-5xl gap-6 md:grid-cols-2", gridClassName), children: featuresContent })
+        featuresContent && /* @__PURE__ */ jsx("div", { className: cn("mx-auto mt-20 grid max-w-5xl gap-6 md:grid-cols-2", gridClassName), children: featuresContent })
       ]
     }
   );