@opensite/ui 0.8.0 → 0.8.2

package/dist/feature-badge-grid-six.cjs

@@ -989,7 +989,7 @@ function FeatureBadgeGridSix({
     if (!label) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", className: badgeClassName, children: label });
   }, [badgeSlot, label, badgeClassName]);
-  const renderFeatureIcon = (feature) => {
+  const renderFeatureIcon = React.useCallback((feature) => {
     if (feature.icon) return feature.icon;
     if (feature.iconName) {
       return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1002,25 +1002,28 @@ function FeatureBadgeGridSix({
       );
     }
     return null;
-  };
+  }, []);
   const featuresContent = React.useMemo(() => {
     if (featuresSlot) return featuresSlot;
     if (!features || features.length === 0) return null;
-    return features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: cn("flex gap-6 space-y-4 rounded-lg md:block", cardClassName, feature.className),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-full bg-accent md:size-12", children: renderFeatureIcon(feature) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            feature.heading && (typeof feature.heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("font-medium md:mb-2 md:text-xl", feature.headingClassName), children: feature.heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("font-medium md:mb-2 md:text-xl", feature.headingClassName), children: feature.heading })),
-            feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm text-muted-foreground md:text-base", feature.descriptionClassName), children: feature.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm text-muted-foreground md:text-base", feature.descriptionClassName), children: feature.description }))
-          ] })
-        ]
-      },
-      index
-    ));
-  }, [featuresSlot, features, cardClassName]);
+    return features.map((feature, index) => {
+      const iconContent = renderFeatureIcon(feature);
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn("flex gap-6 space-y-4 rounded-lg md:block", cardClassName, feature.className),
+          children: [
+            iconContent && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-full bg-accent md:size-12", children: iconContent }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              feature.heading && (typeof feature.heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("font-medium md:mb-2 md:text-xl", feature.headingClassName), children: feature.heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("font-medium md:mb-2 md:text-xl", feature.headingClassName), children: feature.heading })),
+              feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm text-muted-foreground md:text-base", feature.descriptionClassName), children: feature.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm text-muted-foreground md:text-base", feature.descriptionClassName), children: feature.description }))
+            ] })
+          ]
+        },
+        index
+      );
+    });
+  }, [featuresSlot, features, cardClassName, renderFeatureIcon]);
   const actionContent = React.useMemo(() => {
     if (actionSlot) return actionSlot;
     if (!action) return null;

package/dist/feature-badge-grid-six.d.cts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-CES_LEJI.cjs';
-import { A as ActionConfig } from './blocks-tmd_MRJv.cjs';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-Sm_ZSgyv.cjs';
+import { A as ActionConfig } from './blocks-Cohq4eio.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface FeatureBadgeGridSixItem {

package/dist/feature-badge-grid-six.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BRz60ABw.js';
-import { A as ActionConfig } from './blocks-DRE-f6cS.js';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BeWIIjA4.js';
+import { A as ActionConfig } from './blocks-k17uluAz.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface FeatureBadgeGridSixItem {

package/dist/feature-badge-grid-six.js

@@ -1,6 +1,6 @@
 "use client";
 import * as React from 'react';
-import React__default, { useMemo } from 'react';
+import React__default, { useMemo, useCallback } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -968,7 +968,7 @@ function FeatureBadgeGridSix({
     if (!label) return null;
     return /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: badgeClassName, children: label });
   }, [badgeSlot, label, badgeClassName]);
-  const renderFeatureIcon = (feature) => {
+  const renderFeatureIcon = useCallback((feature) => {
     if (feature.icon) return feature.icon;
     if (feature.iconName) {
       return /* @__PURE__ */ jsx(
@@ -981,25 +981,28 @@ function FeatureBadgeGridSix({
       );
     }
     return null;
-  };
+  }, []);
   const featuresContent = useMemo(() => {
     if (featuresSlot) return featuresSlot;
     if (!features || features.length === 0) return null;
-    return features.map((feature, index) => /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: cn("flex gap-6 space-y-4 rounded-lg md:block", cardClassName, feature.className),
-        children: [
-          /* @__PURE__ */ jsx("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-full bg-accent md:size-12", children: renderFeatureIcon(feature) }),
-          /* @__PURE__ */ jsxs("div", { children: [
-            feature.heading && (typeof feature.heading === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("font-medium md:mb-2 md:text-xl", feature.headingClassName), children: feature.heading }) : /* @__PURE__ */ jsx("div", { className: cn("font-medium md:mb-2 md:text-xl", feature.headingClassName), children: feature.heading })),
-            feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm text-muted-foreground md:text-base", feature.descriptionClassName), children: feature.description }) : /* @__PURE__ */ jsx("div", { className: cn("text-sm text-muted-foreground md:text-base", feature.descriptionClassName), children: feature.description }))
-          ] })
-        ]
-      },
-      index
-    ));
-  }, [featuresSlot, features, cardClassName]);
+    return features.map((feature, index) => {
+      const iconContent = renderFeatureIcon(feature);
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn("flex gap-6 space-y-4 rounded-lg md:block", cardClassName, feature.className),
+          children: [
+            iconContent && /* @__PURE__ */ jsx("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-full bg-accent md:size-12", children: iconContent }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              feature.heading && (typeof feature.heading === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("font-medium md:mb-2 md:text-xl", feature.headingClassName), children: feature.heading }) : /* @__PURE__ */ jsx("div", { className: cn("font-medium md:mb-2 md:text-xl", feature.headingClassName), children: feature.heading })),
+              feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm text-muted-foreground md:text-base", feature.descriptionClassName), children: feature.description }) : /* @__PURE__ */ jsx("div", { className: cn("text-sm text-muted-foreground md:text-base", feature.descriptionClassName), children: feature.description }))
+            ] })
+          ]
+        },
+        index
+      );
+    });
+  }, [featuresSlot, features, cardClassName, renderFeatureIcon]);
   const actionContent = useMemo(() => {
     if (actionSlot) return actionSlot;
     if (!action) return null;

package/dist/feature-bento-image-grid.cjs

@@ -949,12 +949,12 @@ function FeatureBentoImageGrid({
   patternOpacity,
   patternClassName
 }) {
-  const renderItemIcon = React.useMemo(() => (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: 24 });
     return null;
   }, []);
-  const renderItemImage = React.useMemo(() => (item, imageClassName) => {
+  const renderItemImage = React__namespace.useCallback((item, imageClassName) => {
     if (item.imageSlot) return item.imageSlot;
     if (item.imageSrc) {
       return /* @__PURE__ */ jsxRuntime.jsx(
@@ -970,13 +970,15 @@ function FeatureBentoImageGrid({
     }
     return null;
   }, [optixFlowConfig]);
-  const renderLargeCard = React.useMemo(() => (item) => {
+  const renderLargeCard = React__namespace.useCallback((item) => {
+    const iconContent = renderItemIcon(item);
+    const hasIconBadgeContent = iconContent || item.iconBadge;
     const cardContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       renderItemImage(item, "h-full max-h-[580px] w-full rounded-xl object-cover object-center"),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 right-0 bottom-0 left-0 translate-y-20 rounded-xl bg-linear-to-t from-primary to-transparent transition-transform duration-300 group-hover:translate-y-0" }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-0 flex h-full w-full flex-col justify-between p-7", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("ml-auto flex w-fit items-center gap-1 p-2.5 text-sm font-semibold text-background", item.iconBadgeClassName), children: [
-          renderItemIcon(item),
+        hasIconBadgeContent && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("ml-auto flex w-fit items-center gap-1 p-2.5 text-sm font-semibold text-background", item.iconBadgeClassName), children: [
+          iconContent,
           item.iconBadge
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-5 text-background", children: [
@@ -1000,7 +1002,9 @@ function FeatureBentoImageGrid({
     }
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("group relative col-span-2 row-span-3 overflow-hidden rounded-xl", largeCardClassName, item.className), children: cardContent });
   }, [largeCardClassName, renderItemImage, renderItemIcon]);
-  const renderSmallCard = React.useMemo(() => (item, index) => {
+  const renderSmallCard = React__namespace.useCallback((item, index) => {
+    const iconContent = renderItemIcon(item);
+    const hasIconBadgeContent = iconContent || item.iconBadge;
     const cardContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       renderItemImage(item, cn(
         "h-full w-full rounded-xl object-cover object-center",
@@ -1008,8 +1012,8 @@ function FeatureBentoImageGrid({
       )),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 right-0 bottom-0 left-0 translate-y-10 rounded-xl bg-linear-to-t from-primary to-transparent opacity-80 transition-transform duration-300 group-hover:translate-y-0" }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-0 flex h-full w-full flex-col justify-between p-7", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("ml-auto flex w-fit items-center gap-1 p-2.5 text-sm font-semibold text-background", item.iconBadgeClassName), children: [
-          renderItemIcon(item),
+        hasIconBadgeContent && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("ml-auto flex w-fit items-center gap-1 p-2.5 text-sm font-semibold text-background", item.iconBadgeClassName), children: [
+          iconContent,
           item.iconBadge
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-5 text-background", children: [

package/dist/feature-bento-image-grid.d.cts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-CES_LEJI.cjs';
-import { O as OptixFlowConfig } from './blocks-tmd_MRJv.cjs';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-Sm_ZSgyv.cjs';
+import { O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface FeatureBentoImageGridItem {

package/dist/feature-bento-image-grid.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BRz60ABw.js';
-import { O as OptixFlowConfig } from './blocks-DRE-f6cS.js';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BeWIIjA4.js';
+import { O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface FeatureBentoImageGridItem {

package/dist/feature-bento-image-grid.js

@@ -928,12 +928,12 @@ function FeatureBentoImageGrid({
   patternOpacity,
   patternClassName
 }) {
-  const renderItemIcon = useMemo(() => (item) => {
+  const renderItemIcon = React.useCallback((item) => {
     if (item.icon) return item.icon;
     if (item.iconName) return /* @__PURE__ */ jsx(DynamicIcon, { name: item.iconName, size: 24 });
     return null;
   }, []);
-  const renderItemImage = useMemo(() => (item, imageClassName) => {
+  const renderItemImage = React.useCallback((item, imageClassName) => {
     if (item.imageSlot) return item.imageSlot;
     if (item.imageSrc) {
       return /* @__PURE__ */ jsx(
@@ -949,13 +949,15 @@ function FeatureBentoImageGrid({
     }
     return null;
   }, [optixFlowConfig]);
-  const renderLargeCard = useMemo(() => (item) => {
+  const renderLargeCard = React.useCallback((item) => {
+    const iconContent = renderItemIcon(item);
+    const hasIconBadgeContent = iconContent || item.iconBadge;
     const cardContent = /* @__PURE__ */ jsxs(Fragment, { children: [
       renderItemImage(item, "h-full max-h-[580px] w-full rounded-xl object-cover object-center"),
       /* @__PURE__ */ jsx("div", { className: "absolute top-0 right-0 bottom-0 left-0 translate-y-20 rounded-xl bg-linear-to-t from-primary to-transparent transition-transform duration-300 group-hover:translate-y-0" }),
       /* @__PURE__ */ jsxs("div", { className: "absolute top-0 flex h-full w-full flex-col justify-between p-7", children: [
-        /* @__PURE__ */ jsxs("span", { className: cn("ml-auto flex w-fit items-center gap-1 p-2.5 text-sm font-semibold text-background", item.iconBadgeClassName), children: [
-          renderItemIcon(item),
+        hasIconBadgeContent && /* @__PURE__ */ jsxs("span", { className: cn("ml-auto flex w-fit items-center gap-1 p-2.5 text-sm font-semibold text-background", item.iconBadgeClassName), children: [
+          iconContent,
           item.iconBadge
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5 text-background", children: [
@@ -979,7 +981,9 @@ function FeatureBentoImageGrid({
     }
     return /* @__PURE__ */ jsx("div", { className: cn("group relative col-span-2 row-span-3 overflow-hidden rounded-xl", largeCardClassName, item.className), children: cardContent });
   }, [largeCardClassName, renderItemImage, renderItemIcon]);
-  const renderSmallCard = useMemo(() => (item, index) => {
+  const renderSmallCard = React.useCallback((item, index) => {
+    const iconContent = renderItemIcon(item);
+    const hasIconBadgeContent = iconContent || item.iconBadge;
     const cardContent = /* @__PURE__ */ jsxs(Fragment, { children: [
       renderItemImage(item, cn(
         "h-full w-full rounded-xl object-cover object-center",
@@ -987,8 +991,8 @@ function FeatureBentoImageGrid({
       )),
       /* @__PURE__ */ jsx("div", { className: "absolute top-0 right-0 bottom-0 left-0 translate-y-10 rounded-xl bg-linear-to-t from-primary to-transparent opacity-80 transition-transform duration-300 group-hover:translate-y-0" }),
       /* @__PURE__ */ jsxs("div", { className: "absolute top-0 flex h-full w-full flex-col justify-between p-7", children: [
-        /* @__PURE__ */ jsxs("span", { className: cn("ml-auto flex w-fit items-center gap-1 p-2.5 text-sm font-semibold text-background", item.iconBadgeClassName), children: [
-          renderItemIcon(item),
+        hasIconBadgeContent && /* @__PURE__ */ jsxs("span", { className: cn("ml-auto flex w-fit items-center gap-1 p-2.5 text-sm font-semibold text-background", item.iconBadgeClassName), children: [
+          iconContent,
           item.iconBadge
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5 text-background", children: [

package/dist/feature-bento-utilities.cjs

@@ -582,7 +582,7 @@ var Section = React__namespace.default.forwardRef(
 Section.displayName = "Section";
 function FeatureBentoUtilities({
   label,
-  labelIconName = "lucide/square-dashed-mouse-pointer",
+  labelIconName,
   labelIcon,
   title,
   description,
@@ -605,7 +605,7 @@ function FeatureBentoUtilities({
   patternOpacity,
   patternClassName
 }) {
-  const renderCard = React.useMemo(() => (card, index) => {
+  const renderCard = React__namespace.useCallback((card, index) => {
     const hasImage = card.imageSrc || card.imageSlot;
     const cardClasses = cn(
       hasImage ? "overflow-hidden pt-0" : "p-6",
@@ -651,12 +651,16 @@ function FeatureBentoUtilities({
       card.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: card.description })
     ] }, index);
   }, [optixFlowConfig]);
-  const renderColumn = React.useMemo(() => (cards, slot) => {
+  const renderColumn = React__namespace.useCallback((cards, slot) => {
     if (slot) return slot;
     if (!cards || cards.length === 0) return null;
     return cards.map((card, index) => renderCard(card, index));
   }, [renderCard]);
-  const labelIconElement = React.useMemo(() => labelIcon ?? (labelIconName ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: labelIconName, size: 20 }) : null), [labelIcon, labelIconName]);
+  const labelIconElement = React.useMemo(() => {
+    if (labelIcon) return labelIcon;
+    if (labelIconName) return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: labelIconName, size: 20 });
+    return null;
+  }, [labelIcon, labelIconName]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -668,7 +672,7 @@ function FeatureBentoUtilities({
       className: cn("bg-gray-50 dark:bg-background", className),
       containerClassName: cn("max-w-7xl", containerClassName),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2 text-muted-foreground", labelClassName), children: [
+        (labelIconElement || label) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2 text-muted-foreground", labelClassName), children: [
           labelIconElement,
           label && (typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm", children: label }))
         ] }),

package/dist/feature-bento-utilities.d.cts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-CES_LEJI.cjs';
-import { O as OptixFlowConfig } from './blocks-tmd_MRJv.cjs';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-Sm_ZSgyv.cjs';
+import { O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface FeatureBentoUtilitiesCardItem {

package/dist/feature-bento-utilities.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BRz60ABw.js';
-import { O as OptixFlowConfig } from './blocks-DRE-f6cS.js';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BeWIIjA4.js';
+import { O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface FeatureBentoUtilitiesCardItem {

package/dist/feature-bento-utilities.js

@@ -560,7 +560,7 @@ var Section = React__default.forwardRef(
 Section.displayName = "Section";
 function FeatureBentoUtilities({
   label,
-  labelIconName = "lucide/square-dashed-mouse-pointer",
+  labelIconName,
   labelIcon,
   title,
   description,
@@ -583,7 +583,7 @@ function FeatureBentoUtilities({
   patternOpacity,
   patternClassName
 }) {
-  const renderCard = useMemo(() => (card, index) => {
+  const renderCard = React.useCallback((card, index) => {
     const hasImage = card.imageSrc || card.imageSlot;
     const cardClasses = cn(
       hasImage ? "overflow-hidden pt-0" : "p-6",
@@ -629,12 +629,16 @@ function FeatureBentoUtilities({
       card.description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: card.description })
     ] }, index);
   }, [optixFlowConfig]);
-  const renderColumn = useMemo(() => (cards, slot) => {
+  const renderColumn = React.useCallback((cards, slot) => {
     if (slot) return slot;
     if (!cards || cards.length === 0) return null;
     return cards.map((card, index) => renderCard(card, index));
   }, [renderCard]);
-  const labelIconElement = useMemo(() => labelIcon ?? (labelIconName ? /* @__PURE__ */ jsx(DynamicIcon, { name: labelIconName, size: 20 }) : null), [labelIcon, labelIconName]);
+  const labelIconElement = useMemo(() => {
+    if (labelIcon) return labelIcon;
+    if (labelIconName) return /* @__PURE__ */ jsx(DynamicIcon, { name: labelIconName, size: 20 });
+    return null;
+  }, [labelIcon, labelIconName]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -646,7 +650,7 @@ function FeatureBentoUtilities({
       className: cn("bg-gray-50 dark:bg-background", className),
       containerClassName: cn("max-w-7xl", containerClassName),
       children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2 text-muted-foreground", labelClassName), children: [
+        (labelIconElement || label) && /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2 text-muted-foreground", labelClassName), children: [
           labelIconElement,
           label && (typeof label === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm", children: label }) : /* @__PURE__ */ jsx("div", { className: "text-sm", children: label }))
         ] }),

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.d.cts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-CES_LEJI.cjs';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-Sm_ZSgyv.cjs';
 import 'react/jsx-runtime';
-import './blocks-tmd_MRJv.cjs';
+import './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface FeatureCapabilitiesGridItem {

package/dist/feature-capabilities-grid.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BRz60ABw.js';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BeWIIjA4.js';
 import 'react/jsx-runtime';
-import './blocks-DRE-f6cS.js';
+import './blocks-k17uluAz.js';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface FeatureCapabilitiesGridItem {