@opensite/ui 2.6.1 → 2.6.3

package/dist/blog-masonry-featured.cjs

@@ -828,11 +828,11 @@ var Section = React__namespace.default.forwardRef(
 Section.displayName = "Section";
 function BlogMasonryFeaturedComponent({
   heading,
+  description,
   posts,
   featuredSlot,
   postsSlot,
   className,
-  containerClassName,
   headingClassName,
   postsClassName,
   featuredClassName,
@@ -840,7 +840,8 @@ function BlogMasonryFeaturedComponent({
   postCardClassName,
   optixFlowConfig,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-12 md:py-32",
   pattern,
   patternOpacity
 }) {
@@ -849,7 +850,7 @@ function BlogMasonryFeaturedComponent({
   const featuredPostContent = React__namespace.useMemo(() => {
     if (featuredSlot) return featuredSlot;
     if (!featuredPost) return null;
-    const postHref = featuredPost.href || featuredPost.url || featuredPost.link || "#";
+    const postHref = featuredPost.href || featuredPost.url || featuredPost.link;
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -876,13 +877,13 @@ function BlogMasonryFeaturedComponent({
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-5", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2.5 flex items-center gap-1 text-sm text-muted-foreground", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2.5 flex items-center gap-1 text-sm", children: [
                   (featuredPost.date || featuredPost.published) && /* @__PURE__ */ jsxRuntime.jsx("time", { children: featuredPost.date || featuredPost.published }),
                   (featuredPost.date || featuredPost.published) && featuredPost.author && "\xB7",
                   featuredPost.author && /* @__PURE__ */ jsxRuntime.jsx("span", { children: featuredPost.author })
                 ] }),
-                featuredPost.title && (typeof featuredPost.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg md:text-3xl lg:text-4xl", children: featuredPost.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg md:text-3xl lg:text-4xl", children: featuredPost.title })),
-                (featuredPost.description || featuredPost.summary) && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 text-muted-foreground", children: featuredPost.description || featuredPost.summary })
+                featuredPost.title && (typeof featuredPost.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg", children: featuredPost.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg", children: featuredPost.title })),
+                (featuredPost.description || featuredPost.summary) && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4", children: featuredPost.description || featuredPost.summary })
               ] })
             ]
           }
@@ -939,22 +940,24 @@ function BlogMasonryFeaturedComponent({
       className: cn(className),
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
         heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
           "h1",
           {
             className: cn(
-              "mb-6 md:mb-12 text-center text-4xl font-medium md:text-6xl text-balance",
+              "mb-6 md:mb-12 text-center text-2xl font-medium md:text-4xl text-balance",
               headingClassName
             ),
             children: heading
           }
-        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+        ) : heading),
+        description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-balance", children: description }) : description),
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             className: cn(
-              "xs:grid-cols-1 mt-6 md:mt-16 grid gap-4 sm:grid-cols-2 lg:grid-cols-4",
+              "grid-cols-1 mt-6 md:mt-16 grid gap-4 sm:grid-cols-2 lg:grid-cols-4",
               postsClassName
             ),
             children: [

package/dist/blog-masonry-featured.d.cts

@@ -12,6 +12,10 @@ interface BlogMasonryFeaturedProps {
      * Main heading content
      */
     heading?: React.ReactNode;
+    /**
+     * Slide description
+     */
+    description?: React.ReactNode;
     /**
      * Array of content items (first item is featured)
      */
@@ -73,6 +77,6 @@ interface BlogMasonryFeaturedProps {
      */
     patternOpacity?: number;
 }
-declare function BlogMasonryFeaturedComponent({ heading, posts, featuredSlot, postsSlot, className, containerClassName, headingClassName, postsClassName, featuredClassName, featuredImageClassName, postCardClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, }: BlogMasonryFeaturedProps): React.JSX.Element;
+declare function BlogMasonryFeaturedComponent({ heading, description, posts, featuredSlot, postsSlot, className, headingClassName, postsClassName, featuredClassName, featuredImageClassName, postCardClassName, optixFlowConfig, background, containerClassName, spacing, pattern, patternOpacity, }: BlogMasonryFeaturedProps): React.JSX.Element;
 
 export { BlogMasonryFeaturedComponent as BlogMasonryFeatured, type BlogMasonryFeaturedProps };

package/dist/blog-masonry-featured.d.ts

@@ -12,6 +12,10 @@ interface BlogMasonryFeaturedProps {
      * Main heading content
      */
     heading?: React.ReactNode;
+    /**
+     * Slide description
+     */
+    description?: React.ReactNode;
     /**
      * Array of content items (first item is featured)
      */
@@ -73,6 +77,6 @@ interface BlogMasonryFeaturedProps {
      */
     patternOpacity?: number;
 }
-declare function BlogMasonryFeaturedComponent({ heading, posts, featuredSlot, postsSlot, className, containerClassName, headingClassName, postsClassName, featuredClassName, featuredImageClassName, postCardClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, }: BlogMasonryFeaturedProps): React.JSX.Element;
+declare function BlogMasonryFeaturedComponent({ heading, description, posts, featuredSlot, postsSlot, className, headingClassName, postsClassName, featuredClassName, featuredImageClassName, postCardClassName, optixFlowConfig, background, containerClassName, spacing, pattern, patternOpacity, }: BlogMasonryFeaturedProps): React.JSX.Element;
 
 export { BlogMasonryFeaturedComponent as BlogMasonryFeatured, type BlogMasonryFeaturedProps };

package/dist/blog-masonry-featured.js

@@ -807,11 +807,11 @@ var Section = React__default.forwardRef(
 Section.displayName = "Section";
 function BlogMasonryFeaturedComponent({
   heading,
+  description,
   posts,
   featuredSlot,
   postsSlot,
   className,
-  containerClassName,
   headingClassName,
   postsClassName,
   featuredClassName,
@@ -819,7 +819,8 @@ function BlogMasonryFeaturedComponent({
   postCardClassName,
   optixFlowConfig,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-12 md:py-32",
   pattern,
   patternOpacity
 }) {
@@ -828,7 +829,7 @@ function BlogMasonryFeaturedComponent({
   const featuredPostContent = React.useMemo(() => {
     if (featuredSlot) return featuredSlot;
     if (!featuredPost) return null;
-    const postHref = featuredPost.href || featuredPost.url || featuredPost.link || "#";
+    const postHref = featuredPost.href || featuredPost.url || featuredPost.link;
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -855,13 +856,13 @@ function BlogMasonryFeaturedComponent({
                 }
               ),
               /* @__PURE__ */ jsxs("div", { className: "mt-5", children: [
-                /* @__PURE__ */ jsxs("div", { className: "mb-2.5 flex items-center gap-1 text-sm text-muted-foreground", children: [
+                /* @__PURE__ */ jsxs("div", { className: "mb-2.5 flex items-center gap-1 text-sm", children: [
                   (featuredPost.date || featuredPost.published) && /* @__PURE__ */ jsx("time", { children: featuredPost.date || featuredPost.published }),
                   (featuredPost.date || featuredPost.published) && featuredPost.author && "\xB7",
                   featuredPost.author && /* @__PURE__ */ jsx("span", { children: featuredPost.author })
                 ] }),
-                featuredPost.title && (typeof featuredPost.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-lg md:text-3xl lg:text-4xl", children: featuredPost.title }) : /* @__PURE__ */ jsx("div", { className: "text-lg md:text-3xl lg:text-4xl", children: featuredPost.title })),
-                (featuredPost.description || featuredPost.summary) && /* @__PURE__ */ jsx("p", { className: "mt-4 text-muted-foreground", children: featuredPost.description || featuredPost.summary })
+                featuredPost.title && (typeof featuredPost.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-lg", children: featuredPost.title }) : /* @__PURE__ */ jsx("div", { className: "text-lg", children: featuredPost.title })),
+                (featuredPost.description || featuredPost.summary) && /* @__PURE__ */ jsx("p", { className: "mt-4", children: featuredPost.description || featuredPost.summary })
               ] })
             ]
           }
@@ -918,22 +919,24 @@ function BlogMasonryFeaturedComponent({
       className: cn(className),
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
         heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
           "h1",
           {
             className: cn(
-              "mb-6 md:mb-12 text-center text-4xl font-medium md:text-6xl text-balance",
+              "mb-6 md:mb-12 text-center text-2xl font-medium md:text-4xl text-balance",
               headingClassName
             ),
             children: heading
           }
-        ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+        ) : heading),
+        description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: "text-balance", children: description }) : description),
         /* @__PURE__ */ jsxs(
           "div",
           {
             className: cn(
-              "xs:grid-cols-1 mt-6 md:mt-16 grid gap-4 sm:grid-cols-2 lg:grid-cols-4",
+              "grid-cols-1 mt-6 md:mt-16 grid gap-4 sm:grid-cols-2 lg:grid-cols-4",
               postsClassName
             ),
             children: [

package/dist/carousel-portfolio-hero.cjs

@@ -871,6 +871,70 @@ var Section = React5__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var MOBILE_CLASSES = {
+  "fit-left": "items-start md:items-center",
+  "fit-center": "items-center",
+  "fit-right": "items-end md:items-center",
+  "full-left": "items-stretch md:items-center",
+  "full-center": "items-stretch md:items-center",
+  "full-right": "items-stretch md:items-center"
+};
+function BlockActions({
+  mobileConfig,
+  actionsClassName,
+  verticalSpacing = "mt-4 md:mt-8",
+  actions,
+  actionsSlot
+}) {
+  const width = mobileConfig?.width ?? "full";
+  const position = mobileConfig?.position ?? "center";
+  const mobileLayoutClass = MOBILE_CLASSES[`${width}-${position}`];
+  if (actionsSlot) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { children: actionsSlot });
+  } else if (actions && actions?.length > 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "flex flex-col md:flex-row flex-wrap gap-4",
+          mobileLayoutClass,
+          actionsClassName,
+          verticalSpacing
+        ),
+        children: actions.map((action, index) => /* @__PURE__ */ jsxRuntime.jsx(ActionComponent, { action }, index))
+      }
+    );
+  } else {
+    return null;
+  }
+}
+function ActionComponent({ action }) {
+  const {
+    label,
+    icon,
+    iconAfter,
+    children,
+    href,
+    onClick,
+    className: actionClassName,
+    ...pressableProps
+  } = action;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Pressable,
+    {
+      href,
+      onClick,
+      asButton: action.asButton ?? true,
+      className: actionClassName,
+      ...pressableProps,
+      children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        icon,
+        label,
+        iconAfter
+      ] })
+    }
+  );
+}
 function CarouselPortfolioHero({
   slides,
   slidesSlot,
@@ -887,7 +951,7 @@ function CarouselPortfolioHero({
   navigationClassName,
   counterClassName,
   optixFlowConfig,
-  background = "dark",
+  background,
   spacing = "none",
   pattern,
   patternOpacity,
@@ -921,34 +985,6 @@ function CarouselPortfolioHero({
       }
     };
   }, [resetInterval]);
-  const renderActions = () => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return actions.map((action, index) => {
-      const {
-        label,
-        icon,
-        iconAfter,
-        children,
-        className: actionClassName,
-        ...pressableProps
-      } = action;
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        Pressable,
-        {
-          asButton: true,
-          className: actionClassName,
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    });
-  };
   const currentSlide = slides?.[currentIndex];
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
@@ -990,7 +1026,7 @@ function CarouselPortfolioHero({
             className: cn(
               "relative z-10 flex h-full w-full flex-col justify-end px-6 pb-16 md:px-8 lg:px-12"
             ),
-            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("max-w-4xl", contentClassName), children: [
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full", contentClassName), children: [
               currentSlide?.tag && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: typeof currentSlide.tag === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                 "span",
                 {
@@ -1026,7 +1062,14 @@ function CarouselPortfolioHero({
                 {
                   className: cn("mt-8 flex items-center gap-4", actionsClassName),
                   children: [
-                    renderActions(),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      BlockActions,
+                      {
+                        actions,
+                        actionsSlot,
+                        actionsClassName
+                      }
+                    ),
                     /* @__PURE__ */ jsxRuntime.jsxs(
                       "div",
                       {
@@ -1040,7 +1083,11 @@ function CarouselPortfolioHero({
                             {
                               variant: "outline",
                               size: "icon",
-                              className: cn("rounded-full border-foreground/40", getNestedCardBg(background), getNestedCardTextColor(background)),
+                              className: cn(
+                                "rounded-full border-foreground/40",
+                                getNestedCardBg(background),
+                                getNestedCardTextColor(background)
+                              ),
                               onClick: goToPrev,
                               asButton: true,
                               children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-left", size: 20 })

package/dist/carousel-portfolio-hero.js

@@ -850,6 +850,70 @@ var Section = React5__default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var MOBILE_CLASSES = {
+  "fit-left": "items-start md:items-center",
+  "fit-center": "items-center",
+  "fit-right": "items-end md:items-center",
+  "full-left": "items-stretch md:items-center",
+  "full-center": "items-stretch md:items-center",
+  "full-right": "items-stretch md:items-center"
+};
+function BlockActions({
+  mobileConfig,
+  actionsClassName,
+  verticalSpacing = "mt-4 md:mt-8",
+  actions,
+  actionsSlot
+}) {
+  const width = mobileConfig?.width ?? "full";
+  const position = mobileConfig?.position ?? "center";
+  const mobileLayoutClass = MOBILE_CLASSES[`${width}-${position}`];
+  if (actionsSlot) {
+    return /* @__PURE__ */ jsx("div", { children: actionsSlot });
+  } else if (actions && actions?.length > 0) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex flex-col md:flex-row flex-wrap gap-4",
+          mobileLayoutClass,
+          actionsClassName,
+          verticalSpacing
+        ),
+        children: actions.map((action, index) => /* @__PURE__ */ jsx(ActionComponent, { action }, index))
+      }
+    );
+  } else {
+    return null;
+  }
+}
+function ActionComponent({ action }) {
+  const {
+    label,
+    icon,
+    iconAfter,
+    children,
+    href,
+    onClick,
+    className: actionClassName,
+    ...pressableProps
+  } = action;
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      href,
+      onClick,
+      asButton: action.asButton ?? true,
+      className: actionClassName,
+      ...pressableProps,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        icon,
+        label,
+        iconAfter
+      ] })
+    }
+  );
+}
 function CarouselPortfolioHero({
   slides,
   slidesSlot,
@@ -866,7 +930,7 @@ function CarouselPortfolioHero({
   navigationClassName,
   counterClassName,
   optixFlowConfig,
-  background = "dark",
+  background,
   spacing = "none",
   pattern,
   patternOpacity,
@@ -900,34 +964,6 @@ function CarouselPortfolioHero({
       }
     };
   }, [resetInterval]);
-  const renderActions = () => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return actions.map((action, index) => {
-      const {
-        label,
-        icon,
-        iconAfter,
-        children,
-        className: actionClassName,
-        ...pressableProps
-      } = action;
-      return /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          asButton: true,
-          className: actionClassName,
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    });
-  };
   const currentSlide = slides?.[currentIndex];
   return /* @__PURE__ */ jsxs(
     Section,
@@ -969,7 +1005,7 @@ function CarouselPortfolioHero({
             className: cn(
               "relative z-10 flex h-full w-full flex-col justify-end px-6 pb-16 md:px-8 lg:px-12"
             ),
-            children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: cn("max-w-4xl", contentClassName), children: [
+            children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: cn("w-full", contentClassName), children: [
               currentSlide?.tag && /* @__PURE__ */ jsx("div", { className: "mb-4", children: typeof currentSlide.tag === "string" ? /* @__PURE__ */ jsx(
                 "span",
                 {
@@ -1005,7 +1041,14 @@ function CarouselPortfolioHero({
                 {
                   className: cn("mt-8 flex items-center gap-4", actionsClassName),
                   children: [
-                    renderActions(),
+                    /* @__PURE__ */ jsx(
+                      BlockActions,
+                      {
+                        actions,
+                        actionsSlot,
+                        actionsClassName
+                      }
+                    ),
                     /* @__PURE__ */ jsxs(
                       "div",
                       {
@@ -1019,7 +1062,11 @@ function CarouselPortfolioHero({
                             {
                               variant: "outline",
                               size: "icon",
-                              className: cn("rounded-full border-foreground/40", getNestedCardBg(background), getNestedCardTextColor(background)),
+                              className: cn(
+                                "rounded-full border-foreground/40",
+                                getNestedCardBg(background),
+                                getNestedCardTextColor(background)
+                              ),
                               onClick: goToPrev,
                               asButton: true,
                               children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-left", size: 20 })

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

@@ -33,32 +33,6 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-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 DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
 function DynamicIcon({ apiKey, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
@@ -970,7 +944,6 @@ function FeatureBadgeGridSix({
                 {
                   className: cn(
                     "text-sm md:text-base",
-                    getTextColor(background, "muted"),
                     feature.descriptionClassName
                   ),
                   children: feature.description
@@ -980,7 +953,6 @@ function FeatureBadgeGridSix({
                 {
                   className: cn(
                     "text-sm md:text-base",
-                    getTextColor(background, "muted"),
                     feature.descriptionClassName
                   ),
                   children: feature.description
@@ -1051,16 +1023,7 @@ function FeatureBadgeGridSix({
               ),
               children: title
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: cn(
-                "text-2xl font-bold md:text-3xl lg:text-4xl",
-                titleClassName
-              ),
-              children: title
-            }
-          ))
+          ) : title)
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",

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

@@ -12,32 +12,6 @@ import { cva } from 'class-variance-authority';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-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 DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
 function DynamicIcon({ apiKey, ...props }) {
   return /* @__PURE__ */ jsx(Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
@@ -949,7 +923,6 @@ function FeatureBadgeGridSix({
                 {
                   className: cn(
                     "text-sm md:text-base",
-                    getTextColor(background, "muted"),
                     feature.descriptionClassName
                   ),
                   children: feature.description
@@ -959,7 +932,6 @@ function FeatureBadgeGridSix({
                 {
                   className: cn(
                     "text-sm md:text-base",
-                    getTextColor(background, "muted"),
                     feature.descriptionClassName
                   ),
                   children: feature.description
@@ -1030,16 +1002,7 @@ function FeatureBadgeGridSix({
               ),
               children: title
             }
-          ) : /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn(
-                "text-2xl font-bold md:text-3xl lg:text-4xl",
-                titleClassName
-              ),
-              children: title
-            }
-          ))
+          ) : title)
         ] }),
         /* @__PURE__ */ jsx(
           "div",

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

@@ -837,7 +837,6 @@ function FeatureBentoImageGrid({
   items,
   itemsSlot,
   className,
-  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   titleClassName,
   descriptionClassName,
   gridClassName,
@@ -845,6 +844,7 @@ function FeatureBentoImageGrid({
   smallCardClassName,
   optixFlowConfig,
   background,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   spacing = "py-12 md:py-32",
   pattern,
   patternOpacity,
@@ -1090,17 +1090,8 @@ function FeatureBentoImageGrid({
             ),
             children: title
           }
-        ) : /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: cn(
-              "mb-4 text-center text-4xl font-semibold text-balance",
-              titleClassName
-            ),
-            children: title
-          }
-        )),
-        description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-center text-balance", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-center text-balance", descriptionClassName), children: description })),
+        ) : title),
+        description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-center text-balance", descriptionClassName), children: description }) : description),
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {

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

@@ -167,6 +167,6 @@ interface FeatureBentoImageGridProps {
  * />
  * ```
  */
-declare function FeatureBentoImageGrid({ title, description, items, itemsSlot, className, containerClassName, titleClassName, descriptionClassName, gridClassName, largeCardClassName, smallCardClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, patternClassName, }: FeatureBentoImageGridProps): React.JSX.Element;
+declare function FeatureBentoImageGrid({ title, description, items, itemsSlot, className, titleClassName, descriptionClassName, gridClassName, largeCardClassName, smallCardClassName, optixFlowConfig, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, }: FeatureBentoImageGridProps): React.JSX.Element;
 
 export { FeatureBentoImageGrid, type FeatureBentoImageGridProps };