@opensite/ui 0.8.0 → 0.8.2

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.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 FeatureIconGridAccentItem {

package/dist/feature-icon-grid-accent.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 FeatureIconGridAccentItem {

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 })
       ]
     }
   );

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

@@ -527,39 +527,37 @@ function FeatureIconGridBordered({
   patternOpacity,
   patternClassName
 }) {
+  const renderIcon = React.useCallback((feature) => {
+    if (feature.icon) return feature.icon;
+    if (feature.iconName) {
+      return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: feature.iconName, size: 20, className: "md:size-6" });
+    }
+    return null;
+  }, []);
   const featuresContent = React.useMemo(() => {
     if (featuresSlot) return featuresSlot;
     if (!features || features.length === 0) return null;
-    return features.map((feature, index) => {
-      const renderIcon = () => {
-        if (feature.icon) return feature.icon;
-        if (feature.iconName) {
-          return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: feature.iconName, size: 20, className: "md:size-6" });
-        }
-        return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/star", size: 20, className: "md:size-6" });
-      };
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: cn("relative flex gap-3 rounded-lg border-dashed md:block md:border-l md:p-5", cardClassName, feature.className),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("mb-8 flex size-10 shrink-0 items-center justify-center rounded-full bg-accent md:size-12", feature.iconClassName), children: renderIcon() }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: cn("font-medium md:mb-2 md:text-xl", feature.titleClassName), children: [
-                feature.title,
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -left-px hidden h-6 w-px bg-primary md:inline-block" })
-              ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("font-medium md:mb-2 md:text-xl", feature.titleClassName), children: [
-                feature.title,
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -left-px hidden h-6 w-px bg-primary md:inline-block" })
-              ] })),
-              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) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn("relative flex gap-3 rounded-lg border-dashed md:block md:border-l md:p-5", cardClassName, feature.className),
+        children: [
+          (feature.icon || feature.iconName) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("mb-8 flex size-10 shrink-0 items-center justify-center rounded-full bg-accent md:size-12", feature.iconClassName), children: renderIcon(feature) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: cn("font-medium md:mb-2 md:text-xl", feature.titleClassName), children: [
+              feature.title,
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -left-px hidden h-6 w-px bg-primary md:inline-block" })
+            ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("font-medium md:mb-2 md:text-xl", feature.titleClassName), children: [
+              feature.title,
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -left-px hidden h-6 w-px bg-primary md:inline-block" })
+            ] })),
+            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, renderIcon]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -573,7 +571,7 @@ function FeatureIconGridBordered({
       children: [
         label && (typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-4 text-xs text-muted-foreground", labelClassName), children: label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4 text-xs text-muted-foreground", labelClassName), children: label })),
         title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-medium lg:text-4xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-3xl font-medium lg:text-4xl", titleClassName), children: title })),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-14 grid gap-6 md:grid-cols-2 lg:mt-20 lg:grid-cols-4", gridClassName), children: featuresContent })
+        (featuresSlot || features && features.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-14 grid gap-6 md:grid-cols-2 lg:mt-20 lg:grid-cols-4", gridClassName), children: featuresContent })
       ]
     }
   );

package/dist/feature-icon-grid-bordered.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 FeatureIconGridBorderedItem {
@@ -17,11 +17,11 @@ interface FeatureIconGridBorderedItem {
      */
     iconName?: string;
     /**
-     * Feature title content
+     * Item title content
      */
     title?: React.ReactNode;
     /**
-     * Feature description content
+     * Item description content
      */
     description?: React.ReactNode;
     /**
@@ -51,11 +51,11 @@ interface FeatureIconGridBorderedProps {
      */
     title?: React.ReactNode;
     /**
-     * Array of feature items to display
+     * Array of items to display
      */
     features?: FeatureIconGridBorderedItem[];
     /**
-     * Custom slot for rendering features (overrides features array)
+     * Custom slot for rendering items (overrides features array)
      */
     featuresSlot?: React.ReactNode;
     /**
@@ -79,7 +79,7 @@ interface FeatureIconGridBorderedProps {
      */
     gridClassName?: string;
     /**
-     * Additional CSS classes for each feature card
+     * Additional CSS classes for each card
      */
     cardClassName?: string;
     /**
@@ -104,18 +104,18 @@ interface FeatureIconGridBorderedProps {
     patternClassName?: string;
 }
 /**
- * Feature Icon Grid Bordered - Four-column grid of features with icons and
+ * Feature Icon Grid Bordered - Four-column grid of items with icons and
  * dashed left borders creating a visual timeline effect.
  *
  * Layout: Four-column responsive grid with icon badges and dashed borders.
  * Key features: Icon badges in accent circles, dashed border separators, accent line indicators.
- * Best for: Why us sections, value propositions, capability highlights, process steps.
+ * Best for: Value propositions, capability highlights, process steps, benefits showcase.
  *
  * @example
  * ```tsx
  * <FeatureIconGridBordered
- *   label="Why Us?"
- *   title="A better way to build websites"
+ *   label="Why Choose Us?"
+ *   title="A better way to build"
  *   features={[
  *     { iconName: "lucide/timer", title: "Performance", description: "Fast and optimized" },
  *     { iconName: "lucide/zap", title: "Innovation", description: "Cutting-edge tech" },

package/dist/feature-icon-grid-bordered.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 FeatureIconGridBorderedItem {
@@ -17,11 +17,11 @@ interface FeatureIconGridBorderedItem {
      */
     iconName?: string;
     /**
-     * Feature title content
+     * Item title content
      */
     title?: React.ReactNode;
     /**
-     * Feature description content
+     * Item description content
      */
     description?: React.ReactNode;
     /**
@@ -51,11 +51,11 @@ interface FeatureIconGridBorderedProps {
      */
     title?: React.ReactNode;
     /**
-     * Array of feature items to display
+     * Array of items to display
      */
     features?: FeatureIconGridBorderedItem[];
     /**
-     * Custom slot for rendering features (overrides features array)
+     * Custom slot for rendering items (overrides features array)
      */
     featuresSlot?: React.ReactNode;
     /**
@@ -79,7 +79,7 @@ interface FeatureIconGridBorderedProps {
      */
     gridClassName?: string;
     /**
-     * Additional CSS classes for each feature card
+     * Additional CSS classes for each card
      */
     cardClassName?: string;
     /**
@@ -104,18 +104,18 @@ interface FeatureIconGridBorderedProps {
     patternClassName?: string;
 }
 /**
- * Feature Icon Grid Bordered - Four-column grid of features with icons and
+ * Feature Icon Grid Bordered - Four-column grid of items with icons and
  * dashed left borders creating a visual timeline effect.
  *
  * Layout: Four-column responsive grid with icon badges and dashed borders.
  * Key features: Icon badges in accent circles, dashed border separators, accent line indicators.
- * Best for: Why us sections, value propositions, capability highlights, process steps.
+ * Best for: Value propositions, capability highlights, process steps, benefits showcase.
  *
  * @example
  * ```tsx
  * <FeatureIconGridBordered
- *   label="Why Us?"
- *   title="A better way to build websites"
+ *   label="Why Choose Us?"
+ *   title="A better way to build"
  *   features={[
  *     { iconName: "lucide/timer", title: "Performance", description: "Fast and optimized" },
  *     { iconName: "lucide/zap", title: "Innovation", description: "Cutting-edge tech" },

package/dist/feature-icon-grid-bordered.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';
@@ -506,39 +506,37 @@ function FeatureIconGridBordered({
   patternOpacity,
   patternClassName
 }) {
+  const renderIcon = useCallback((feature) => {
+    if (feature.icon) return feature.icon;
+    if (feature.iconName) {
+      return /* @__PURE__ */ jsx(DynamicIcon, { name: feature.iconName, size: 20, className: "md:size-6" });
+    }
+    return null;
+  }, []);
   const featuresContent = useMemo(() => {
     if (featuresSlot) return featuresSlot;
     if (!features || features.length === 0) return null;
-    return features.map((feature, index) => {
-      const renderIcon = () => {
-        if (feature.icon) return feature.icon;
-        if (feature.iconName) {
-          return /* @__PURE__ */ jsx(DynamicIcon, { name: feature.iconName, size: 20, className: "md:size-6" });
-        }
-        return /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/star", size: 20, className: "md:size-6" });
-      };
-      return /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: cn("relative flex gap-3 rounded-lg border-dashed md:block md:border-l md:p-5", cardClassName, feature.className),
-          children: [
-            /* @__PURE__ */ jsx("span", { className: cn("mb-8 flex size-10 shrink-0 items-center justify-center rounded-full bg-accent md:size-12", feature.iconClassName), children: renderIcon() }),
-            /* @__PURE__ */ jsxs("div", { children: [
-              feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsxs("h3", { className: cn("font-medium md:mb-2 md:text-xl", feature.titleClassName), children: [
-                feature.title,
-                /* @__PURE__ */ jsx("span", { className: "absolute -left-px hidden h-6 w-px bg-primary md:inline-block" })
-              ] }) : /* @__PURE__ */ jsxs("div", { className: cn("font-medium md:mb-2 md:text-xl", feature.titleClassName), children: [
-                feature.title,
-                /* @__PURE__ */ jsx("span", { className: "absolute -left-px hidden h-6 w-px bg-primary md:inline-block" })
-              ] })),
-              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) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("relative flex gap-3 rounded-lg border-dashed md:block md:border-l md:p-5", cardClassName, feature.className),
+        children: [
+          (feature.icon || feature.iconName) && /* @__PURE__ */ jsx("span", { className: cn("mb-8 flex size-10 shrink-0 items-center justify-center rounded-full bg-accent md:size-12", feature.iconClassName), children: renderIcon(feature) }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsxs("h3", { className: cn("font-medium md:mb-2 md:text-xl", feature.titleClassName), children: [
+              feature.title,
+              /* @__PURE__ */ jsx("span", { className: "absolute -left-px hidden h-6 w-px bg-primary md:inline-block" })
+            ] }) : /* @__PURE__ */ jsxs("div", { className: cn("font-medium md:mb-2 md:text-xl", feature.titleClassName), children: [
+              feature.title,
+              /* @__PURE__ */ jsx("span", { className: "absolute -left-px hidden h-6 w-px bg-primary md:inline-block" })
+            ] })),
+            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, renderIcon]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -552,7 +550,7 @@ function FeatureIconGridBordered({
       children: [
         label && (typeof label === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-4 text-xs text-muted-foreground", labelClassName), children: label }) : /* @__PURE__ */ jsx("div", { className: cn("mb-4 text-xs text-muted-foreground", labelClassName), children: label })),
         title && (typeof title === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-medium lg:text-4xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: cn("text-3xl font-medium lg:text-4xl", titleClassName), children: title })),
-        /* @__PURE__ */ jsx("div", { className: cn("mt-14 grid gap-6 md:grid-cols-2 lg:mt-20 lg:grid-cols-4", gridClassName), children: featuresContent })
+        (featuresSlot || features && features.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mt-14 grid gap-6 md:grid-cols-2 lg:mt-20 lg:grid-cols-4", gridClassName), children: featuresContent })
       ]
     }
   );

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

@@ -528,11 +528,11 @@ function FeatureIconGridMuted({
   patternOpacity,
   patternClassName
 }) {
-  const renderFeatureIcon = (feature) => {
+  const renderFeatureIcon = React.useCallback((feature) => {
     if (feature.icon) return feature.icon;
     if (feature.iconName) return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: feature.iconName, size: 24, className: feature.iconClassName });
     return null;
-  };
+  }, []);
   const featuresContent = React.useMemo(() => {
     if (featuresSlot) return featuresSlot;
     if (!features || features.length === 0) return null;
@@ -541,14 +541,14 @@ function FeatureIconGridMuted({
       {
         className: cn("flex flex-col gap-2.5 rounded-xl border bg-background p-7", cardClassName, feature.className),
         children: [
-          renderFeatureIcon(feature),
+          (feature.icon || feature.iconName) && renderFeatureIcon(feature),
           feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("font-semibold", feature.titleClassName), children: feature.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("font-semibold", feature.titleClassName), children: feature.title })),
           feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm text-muted-foreground", feature.descriptionClassName), children: feature.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm text-muted-foreground", feature.descriptionClassName), children: feature.description }))
         ]
       },
       index
     ));
-  }, [featuresSlot, features, cardClassName]);
+  }, [featuresSlot, features, cardClassName, renderFeatureIcon]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -560,11 +560,11 @@ function FeatureIconGridMuted({
       className: cn("bg-muted/60", className),
       containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-10", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto flex max-w-xl flex-col gap-2.5 text-center", headerClassName), children: [
+        (title || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto flex max-w-xl flex-col gap-2.5 text-center", headerClassName), children: [
           title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-semibold md:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-4xl font-semibold md:text-5xl", titleClassName), children: title })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-muted-foreground", descriptionClassName), children: description }))
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto grid max-w-7xl gap-7 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5", gridClassName), children: featuresContent })
+        (featuresSlot || features && features.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto grid max-w-7xl gap-7 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5", gridClassName), children: featuresContent })
       ] })
     }
   );

package/dist/feature-icon-grid-muted.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 FeatureIconGridMutedItem {
@@ -17,11 +17,11 @@ interface FeatureIconGridMutedItem {
      */
     iconName?: string;
     /**
-     * Feature title content
+     * Item title content
      */
     title?: React.ReactNode;
     /**
-     * Feature description content
+     * Item description content
      */
     description?: React.ReactNode;
     /**
@@ -51,11 +51,11 @@ interface FeatureIconGridMutedProps {
      */
     description?: React.ReactNode;
     /**
-     * Array of feature items
+     * Array of items to display
      */
     features?: FeatureIconGridMutedItem[];
     /**
-     * Custom slot for rendering features (overrides features array)
+     * Custom slot for rendering items (overrides features array)
      */
     featuresSlot?: React.ReactNode;
     /**
@@ -108,20 +108,20 @@ interface FeatureIconGridMutedProps {
     patternClassName?: string;
 }
 /**
- * Feature Icon Grid Muted - Five-feature grid with muted background and
+ * Feature Icon Grid Muted - Five-column grid with muted background and
  * icon badges showcasing key capabilities.
  *
  * Layout: Muted background section with centered header and five-column grid.
  * Key features: Muted background, icon badges, centered text, responsive grid.
- * Best for: Key features, time-saving tools, capability highlights.
+ * Best for: Capability highlights, benefits showcase, service offerings.
  *
  * @example
  * ```tsx
  * <FeatureIconGridMuted
- *   title="Key Features That Save You Time"
- *   description="Explore tools specifically built to enhance your workflow."
+ *   title="Key Capabilities"
+ *   description="Explore tools built to enhance your workflow."
  *   features={[
- *     { iconName: "lucide/check-circle-2", title: "Instant Approvals", description: "Get quick approvals" },
+ *     { iconName: "lucide/check-circle-2", title: "Quick Processing", description: "Fast results" },
  *   ]}
  * />
  * ```

package/dist/feature-icon-grid-muted.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 FeatureIconGridMutedItem {
@@ -17,11 +17,11 @@ interface FeatureIconGridMutedItem {
      */
     iconName?: string;
     /**
-     * Feature title content
+     * Item title content
      */
     title?: React.ReactNode;
     /**
-     * Feature description content
+     * Item description content
      */
     description?: React.ReactNode;
     /**
@@ -51,11 +51,11 @@ interface FeatureIconGridMutedProps {
      */
     description?: React.ReactNode;
     /**
-     * Array of feature items
+     * Array of items to display
      */
     features?: FeatureIconGridMutedItem[];
     /**
-     * Custom slot for rendering features (overrides features array)
+     * Custom slot for rendering items (overrides features array)
      */
     featuresSlot?: React.ReactNode;
     /**
@@ -108,20 +108,20 @@ interface FeatureIconGridMutedProps {
     patternClassName?: string;
 }
 /**
- * Feature Icon Grid Muted - Five-feature grid with muted background and
+ * Feature Icon Grid Muted - Five-column grid with muted background and
  * icon badges showcasing key capabilities.
  *
  * Layout: Muted background section with centered header and five-column grid.
  * Key features: Muted background, icon badges, centered text, responsive grid.
- * Best for: Key features, time-saving tools, capability highlights.
+ * Best for: Capability highlights, benefits showcase, service offerings.
  *
  * @example
  * ```tsx
  * <FeatureIconGridMuted
- *   title="Key Features That Save You Time"
- *   description="Explore tools specifically built to enhance your workflow."
+ *   title="Key Capabilities"
+ *   description="Explore tools built to enhance your workflow."
  *   features={[
- *     { iconName: "lucide/check-circle-2", title: "Instant Approvals", description: "Get quick approvals" },
+ *     { iconName: "lucide/check-circle-2", title: "Quick Processing", description: "Fast results" },
  *   ]}
  * />
  * ```

package/dist/feature-icon-grid-muted.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';
@@ -507,11 +507,11 @@ function FeatureIconGridMuted({
   patternOpacity,
   patternClassName
 }) {
-  const renderFeatureIcon = (feature) => {
+  const renderFeatureIcon = useCallback((feature) => {
     if (feature.icon) return feature.icon;
     if (feature.iconName) return /* @__PURE__ */ jsx(DynamicIcon, { name: feature.iconName, size: 24, className: feature.iconClassName });
     return null;
-  };
+  }, []);
   const featuresContent = useMemo(() => {
     if (featuresSlot) return featuresSlot;
     if (!features || features.length === 0) return null;
@@ -520,14 +520,14 @@ function FeatureIconGridMuted({
       {
         className: cn("flex flex-col gap-2.5 rounded-xl border bg-background p-7", cardClassName, feature.className),
         children: [
-          renderFeatureIcon(feature),
+          (feature.icon || feature.iconName) && renderFeatureIcon(feature),
           feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("font-semibold", feature.titleClassName), children: feature.title }) : /* @__PURE__ */ jsx("div", { className: cn("font-semibold", feature.titleClassName), children: feature.title })),
           feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm text-muted-foreground", feature.descriptionClassName), children: feature.description }) : /* @__PURE__ */ jsx("div", { className: cn("text-sm text-muted-foreground", feature.descriptionClassName), children: feature.description }))
         ]
       },
       index
     ));
-  }, [featuresSlot, features, cardClassName]);
+  }, [featuresSlot, features, cardClassName, renderFeatureIcon]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -539,11 +539,11 @@ function FeatureIconGridMuted({
       className: cn("bg-muted/60", className),
       containerClassName,
       children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-10", children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("mx-auto flex max-w-xl flex-col gap-2.5 text-center", headerClassName), children: [
+        (title || description) && /* @__PURE__ */ jsxs("div", { className: cn("mx-auto flex max-w-xl flex-col gap-2.5 text-center", headerClassName), children: [
           title && (typeof title === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-4xl font-semibold md:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: cn("text-4xl font-semibold md:text-5xl", titleClassName), children: title })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("text-muted-foreground", descriptionClassName), children: description }))
         ] }),
-        /* @__PURE__ */ jsx("div", { className: cn("mx-auto grid max-w-7xl gap-7 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5", gridClassName), children: featuresContent })
+        (featuresSlot || features && features.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mx-auto grid max-w-7xl gap-7 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5", gridClassName), children: featuresContent })
       ] })
     }
   );