@opensite/ui 1.2.5 → 1.2.7

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
-import { O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CPyEa7IX.cjs';
+import { O as OptixFlowConfig } from './blocks-tmd_MRJv.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-8mtEHxev.cjs';
 import 'class-variance-authority/types';
 
 interface FeatureBentoUtilitiesCardItem {

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

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

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CPyEa7IX.cjs';
 import 'react/jsx-runtime';
-import './blocks-Cohq4eio.cjs';
+import './blocks-tmd_MRJv.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-8mtEHxev.cjs';
 import 'class-variance-authority/types';
 
 interface FeatureCapabilitiesGridItem {

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-hxnFe3w6.js';
 import 'react/jsx-runtime';
-import './blocks-k17uluAz.js';
+import './blocks-DRE-f6cS.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-8mtEHxev.js';
 import 'class-variance-authority/types';
 
 interface FeatureCapabilitiesGridItem {

package/dist/feature-card-grid-linked.d.cts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
-import { O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CPyEa7IX.cjs';
+import { O as OptixFlowConfig } from './blocks-tmd_MRJv.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-8mtEHxev.cjs';
 import 'class-variance-authority/types';
 
 interface FeatureCardGridLinkedItem {

package/dist/feature-card-grid-linked.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
-import { O as OptixFlowConfig } from './blocks-k17uluAz.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-hxnFe3w6.js';
+import { O as OptixFlowConfig } from './blocks-DRE-f6cS.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-8mtEHxev.js';
 import 'class-variance-authority/types';
 
 interface FeatureCardGridLinkedItem {

package/dist/feature-carousel-progress.cjs

@@ -1357,10 +1357,22 @@ function FeatureCarouselProgress({
                   children: title
                 }
               )),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-lg md:max-w-md", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx(
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "max-w-lg md:max-w-md text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
-                  className: cn("max-w-lg md:max-w-md", descriptionClassName),
+                  className: cn(
+                    "max-w-lg md:max-w-md text-balance",
+                    descriptionClassName
+                  ),
                   children: description
                 }
               ))

package/dist/feature-carousel-progress.d.cts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CPyEa7IX.cjs';
 import 'react/jsx-runtime';
-import './blocks-Cohq4eio.cjs';
+import './blocks-tmd_MRJv.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-8mtEHxev.cjs';
 import 'class-variance-authority/types';
 
 interface FeatureCarouselProgressItem {

package/dist/feature-carousel-progress.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-hxnFe3w6.js';
 import 'react/jsx-runtime';
-import './blocks-k17uluAz.js';
+import './blocks-DRE-f6cS.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-8mtEHxev.js';
 import 'class-variance-authority/types';
 
 interface FeatureCarouselProgressItem {

package/dist/feature-carousel-progress.js

@@ -1332,10 +1332,22 @@ function FeatureCarouselProgress({
                   children: title
                 }
               )),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-lg md:max-w-md", descriptionClassName), children: description }) : /* @__PURE__ */ jsx(
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "max-w-lg md:max-w-md text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: cn("max-w-lg md:max-w-md", descriptionClassName),
+                  className: cn(
+                    "max-w-lg md:max-w-md text-balance",
+                    descriptionClassName
+                  ),
                   children: description
                 }
               ))

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

@@ -17,62 +17,6 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-function getNestedCardBg(parentBg, variant = "muted", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "muted":
-        return "bg-background";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-background/50";
-    }
-  } else {
-    switch (variant) {
-      case "muted":
-        return "bg-muted";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-muted/50";
-    }
-  }
-}
-function getNestedCardTextColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-foreground" : "";
-}
-function getTextColor(parentBg, variant = "default", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-foreground/80";
-      case "subtle":
-        return "text-foreground/60";
-      case "accent":
-        return "text-accent-foreground";
-    }
-  } else {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-muted-foreground";
-      case "subtle":
-        return "text-muted-foreground/70";
-      case "accent":
-        return "text-primary";
-    }
-  }
-}
 var badgeVariants = classVarianceAuthority.cva(
   "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
   {
@@ -543,7 +487,7 @@ function FeatureCategoryImageCards({
   features,
   featuresSlot,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headerClassName,
   badgeClassName,
   titleClassName,
@@ -552,43 +496,74 @@ function FeatureCategoryImageCards({
   cardClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-12 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
 }) {
-  const renderFeatureImage = React.useCallback((feature) => {
-    if (feature.imageSlot) return feature.imageSlot;
-    if (feature.imageSrc) {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        img.Img,
-        {
-          src: feature.imageSrc,
-          alt: feature.imageAlt || "Feature image",
-          className: cn("w-full rounded-xl object-cover", feature.imageClassName),
-          loading: "lazy",
-          optixFlowConfig
-        }
-      );
-    }
-    return null;
-  }, [optixFlowConfig]);
+  const renderFeatureImage = React.useCallback(
+    (feature) => {
+      if (feature.imageSlot) return feature.imageSlot;
+      if (feature.imageSrc) {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          img.Img,
+          {
+            src: feature.imageSrc,
+            alt: feature.imageAlt || "Feature image",
+            className: cn(
+              "w-full rounded-xl object-cover",
+              feature.imageClassName
+            ),
+            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) => /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: cn(
-      "border-none",
-      getNestedCardBg(background),
-      getNestedCardTextColor(background),
-      cardClassName,
-      feature.className
-    ), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "text-center", children: [
-        feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: cn("text-lg font-semibold md:text-2xl", feature.titleClassName), children: feature.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-lg font-semibold md:text-2xl", feature.titleClassName), children: feature.title })),
-        feature.category && (typeof feature.category === "string" ? /* @__PURE__ */ jsxRuntime.jsx(CardDescription, { className: cn("md:text-lg", getTextColor(background, "muted"), feature.categoryClassName), children: feature.category }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("md:text-lg", getTextColor(background, "muted"), feature.categoryClassName), children: feature.category }))
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "px-7 pb-7", children: renderFeatureImage(feature) })
-    ] }, index));
+    return features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+      Card,
+      {
+        className: cn("border-none", cardClassName, feature.className),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "text-center", children: [
+            feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              CardTitle,
+              {
+                className: cn(
+                  "text-lg font-semibold md:text-2xl",
+                  feature.titleClassName
+                ),
+                children: feature.title
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "text-lg font-semibold md:text-2xl",
+                  feature.titleClassName
+                ),
+                children: feature.title
+              }
+            )),
+            feature.category && (typeof feature.category === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              CardDescription,
+              {
+                className: cn("md:text-lg", feature.categoryClassName),
+                children: feature.category
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("md:text-lg", feature.categoryClassName), children: feature.category }))
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "px-7 pb-7", children: renderFeatureImage(feature) })
+        ]
+      },
+      index
+    ));
   }, [featuresSlot, features, cardClassName, renderFeatureImage]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
@@ -601,12 +576,48 @@ function FeatureCategoryImageCards({
       className,
       containerClassName,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center justify-center gap-4 text-center", headerClassName), children: [
-          badge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", className: badgeClassName, children: badge }),
-          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-3xl font-semibold md:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-3xl font-semibold md:text-5xl", titleClassName), children: title })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-2xl md:text-lg", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("max-w-2xl md:text-lg", getTextColor(background, "muted"), descriptionClassName), children: description }))
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto mt-20 grid max-w-7xl gap-7 md:grid-cols-2 lg:grid-cols-3", gridClassName), children: featuresContent })
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "flex flex-col items-center justify-center gap-4 text-center",
+              headerClassName
+            ),
+            children: [
+              badge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", className: badgeClassName, children: badge }),
+              title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h2",
+                {
+                  className: cn(
+                    "text-3xl font-semibold md:text-5xl",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "text-3xl font-semibold md:text-5xl",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              )),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-2xl md:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("max-w-2xl md:text-lg", descriptionClassName), children: description }))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "mx-auto mt-20 grid max-w-7xl gap-7 md:grid-cols-2 lg:grid-cols-3",
+              gridClassName
+            ),
+            children: featuresContent
+          }
+        )
       ]
     }
   );

package/dist/feature-category-image-cards.d.cts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
-import { O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CPyEa7IX.cjs';
+import { O as OptixFlowConfig } from './blocks-tmd_MRJv.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-8mtEHxev.cjs';
 import 'class-variance-authority/types';
 
 interface FeatureCategoryImageCardsItem {

package/dist/feature-category-image-cards.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
-import { O as OptixFlowConfig } from './blocks-k17uluAz.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-hxnFe3w6.js';
+import { O as OptixFlowConfig } from './blocks-DRE-f6cS.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-8mtEHxev.js';
 import 'class-variance-authority/types';
 
 interface FeatureCategoryImageCardsItem {

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

@@ -11,62 +11,6 @@ import { Img } from '@page-speed/img';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-function getNestedCardBg(parentBg, variant = "muted", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "muted":
-        return "bg-background";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-background/50";
-    }
-  } else {
-    switch (variant) {
-      case "muted":
-        return "bg-muted";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-muted/50";
-    }
-  }
-}
-function getNestedCardTextColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-foreground" : "";
-}
-function getTextColor(parentBg, variant = "default", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-foreground/80";
-      case "subtle":
-        return "text-foreground/60";
-      case "accent":
-        return "text-accent-foreground";
-    }
-  } else {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-muted-foreground";
-      case "subtle":
-        return "text-muted-foreground/70";
-      case "accent":
-        return "text-primary";
-    }
-  }
-}
 var badgeVariants = cva(
   "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
   {
@@ -537,7 +481,7 @@ function FeatureCategoryImageCards({
   features,
   featuresSlot,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headerClassName,
   badgeClassName,
   titleClassName,
@@ -546,43 +490,74 @@ function FeatureCategoryImageCards({
   cardClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-12 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
 }) {
-  const renderFeatureImage = useCallback((feature) => {
-    if (feature.imageSlot) return feature.imageSlot;
-    if (feature.imageSrc) {
-      return /* @__PURE__ */ jsx(
-        Img,
-        {
-          src: feature.imageSrc,
-          alt: feature.imageAlt || "Feature image",
-          className: cn("w-full rounded-xl object-cover", feature.imageClassName),
-          loading: "lazy",
-          optixFlowConfig
-        }
-      );
-    }
-    return null;
-  }, [optixFlowConfig]);
+  const renderFeatureImage = useCallback(
+    (feature) => {
+      if (feature.imageSlot) return feature.imageSlot;
+      if (feature.imageSrc) {
+        return /* @__PURE__ */ jsx(
+          Img,
+          {
+            src: feature.imageSrc,
+            alt: feature.imageAlt || "Feature image",
+            className: cn(
+              "w-full rounded-xl object-cover",
+              feature.imageClassName
+            ),
+            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) => /* @__PURE__ */ jsxs(Card, { className: cn(
-      "border-none",
-      getNestedCardBg(background),
-      getNestedCardTextColor(background),
-      cardClassName,
-      feature.className
-    ), children: [
-      /* @__PURE__ */ jsxs(CardHeader, { className: "text-center", children: [
-        feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsx(CardTitle, { className: cn("text-lg font-semibold md:text-2xl", feature.titleClassName), children: feature.title }) : /* @__PURE__ */ jsx("div", { className: cn("text-lg font-semibold md:text-2xl", feature.titleClassName), children: feature.title })),
-        feature.category && (typeof feature.category === "string" ? /* @__PURE__ */ jsx(CardDescription, { className: cn("md:text-lg", getTextColor(background, "muted"), feature.categoryClassName), children: feature.category }) : /* @__PURE__ */ jsx("div", { className: cn("md:text-lg", getTextColor(background, "muted"), feature.categoryClassName), children: feature.category }))
-      ] }),
-      /* @__PURE__ */ jsx(CardContent, { className: "px-7 pb-7", children: renderFeatureImage(feature) })
-    ] }, index));
+    return features.map((feature, index) => /* @__PURE__ */ jsxs(
+      Card,
+      {
+        className: cn("border-none", cardClassName, feature.className),
+        children: [
+          /* @__PURE__ */ jsxs(CardHeader, { className: "text-center", children: [
+            feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsx(
+              CardTitle,
+              {
+                className: cn(
+                  "text-lg font-semibold md:text-2xl",
+                  feature.titleClassName
+                ),
+                children: feature.title
+              }
+            ) : /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "text-lg font-semibold md:text-2xl",
+                  feature.titleClassName
+                ),
+                children: feature.title
+              }
+            )),
+            feature.category && (typeof feature.category === "string" ? /* @__PURE__ */ jsx(
+              CardDescription,
+              {
+                className: cn("md:text-lg", feature.categoryClassName),
+                children: feature.category
+              }
+            ) : /* @__PURE__ */ jsx("div", { className: cn("md:text-lg", feature.categoryClassName), children: feature.category }))
+          ] }),
+          /* @__PURE__ */ jsx(CardContent, { className: "px-7 pb-7", children: renderFeatureImage(feature) })
+        ]
+      },
+      index
+    ));
   }, [featuresSlot, features, cardClassName, renderFeatureImage]);
   return /* @__PURE__ */ jsxs(
     Section,
@@ -595,12 +570,48 @@ function FeatureCategoryImageCards({
       className,
       containerClassName,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center justify-center gap-4 text-center", headerClassName), children: [
-          badge && /* @__PURE__ */ jsx(Badge, { variant: "outline", className: badgeClassName, children: badge }),
-          title && (typeof title === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-3xl font-semibold md:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: cn("text-3xl font-semibold md:text-5xl", titleClassName), children: title })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-2xl md:text-lg", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("max-w-2xl md:text-lg", getTextColor(background, "muted"), descriptionClassName), children: description }))
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: cn("mx-auto mt-20 grid max-w-7xl gap-7 md:grid-cols-2 lg:grid-cols-3", gridClassName), children: featuresContent })
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex flex-col items-center justify-center gap-4 text-center",
+              headerClassName
+            ),
+            children: [
+              badge && /* @__PURE__ */ jsx(Badge, { variant: "outline", className: badgeClassName, children: badge }),
+              title && (typeof title === "string" ? /* @__PURE__ */ jsx(
+                "h2",
+                {
+                  className: cn(
+                    "text-3xl font-semibold md:text-5xl",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              ) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "text-3xl font-semibold md:text-5xl",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              )),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-2xl md:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("max-w-2xl md:text-lg", descriptionClassName), children: description }))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "mx-auto mt-20 grid max-w-7xl gap-7 md:grid-cols-2 lg:grid-cols-3",
+              gridClassName
+            ),
+            children: featuresContent
+          }
+        )
       ]
     }
   );