@opensite/ui 2.6.2 → 2.6.4

package/dist/banner-event-promo.cjs

@@ -762,7 +762,7 @@ var spacingStyles = {
   xl: "py-24 md:py-40",
   hero: "pt-32 pb-12 md:pt-40 md:pb-40"
 };
-var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
+var predefinedSpacings = ["none", "sm", "md", "lg", "xl", "hero"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
 var Section = React__namespace.default.forwardRef(
   ({

package/dist/banner-event-promo.js

@@ -741,7 +741,7 @@ var spacingStyles = {
   xl: "py-24 md:py-40",
   hero: "pt-32 pb-12 md:pt-40 md:pb-40"
 };
-var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
+var predefinedSpacings = ["none", "sm", "md", "lg", "xl", "hero"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
 var Section = React__default.forwardRef(
   ({

package/dist/banner-floating-offer.cjs

@@ -767,7 +767,7 @@ var spacingStyles = {
   xl: "py-24 md:py-40",
   hero: "pt-32 pb-12 md:pt-40 md:pb-40"
 };
-var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
+var predefinedSpacings = ["none", "sm", "md", "lg", "xl", "hero"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
 var Section = React__namespace.default.forwardRef(
   ({

package/dist/banner-floating-offer.js

@@ -746,7 +746,7 @@ var spacingStyles = {
   xl: "py-24 md:py-40",
   hero: "pt-32 pb-12 md:pt-40 md:pb-40"
 };
-var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
+var predefinedSpacings = ["none", "sm", "md", "lg", "xl", "hero"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
 var Section = React__default.forwardRef(
   ({

package/dist/banner-gdpr-rights.cjs

@@ -767,7 +767,7 @@ var spacingStyles = {
   xl: "py-24 md:py-40",
   hero: "pt-32 pb-12 md:pt-40 md:pb-40"
 };
-var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
+var predefinedSpacings = ["none", "sm", "md", "lg", "xl", "hero"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
 var Section = React__namespace.default.forwardRef(
   ({

package/dist/banner-gdpr-rights.js

@@ -746,7 +746,7 @@ var spacingStyles = {
   xl: "py-24 md:py-40",
   hero: "pt-32 pb-12 md:pt-40 md:pb-40"
 };
-var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
+var predefinedSpacings = ["none", "sm", "md", "lg", "xl", "hero"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
 var Section = React__default.forwardRef(
   ({

package/dist/banner-privacy-notice.cjs

@@ -767,7 +767,7 @@ var spacingStyles = {
   xl: "py-24 md:py-40",
   hero: "pt-32 pb-12 md:pt-40 md:pb-40"
 };
-var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
+var predefinedSpacings = ["none", "sm", "md", "lg", "xl", "hero"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
 var Section = React__namespace.default.forwardRef(
   ({

package/dist/banner-privacy-notice.js

@@ -746,7 +746,7 @@ var spacingStyles = {
   xl: "py-24 md:py-40",
   hero: "pt-32 pb-12 md:pt-40 md:pb-40"
 };
-var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
+var predefinedSpacings = ["none", "sm", "md", "lg", "xl", "hero"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
 var Section = React__default.forwardRef(
   ({

package/dist/banner-promo-cta.cjs

@@ -762,7 +762,7 @@ var spacingStyles = {
   xl: "py-24 md:py-40",
   hero: "pt-32 pb-12 md:pt-40 md:pb-40"
 };
-var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
+var predefinedSpacings = ["none", "sm", "md", "lg", "xl", "hero"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
 var Section = React__namespace.default.forwardRef(
   ({

package/dist/banner-promo-cta.js

@@ -741,7 +741,7 @@ var spacingStyles = {
   xl: "py-24 md:py-40",
   hero: "pt-32 pb-12 md:pt-40 md:pb-40"
 };
-var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
+var predefinedSpacings = ["none", "sm", "md", "lg", "xl", "hero"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
 var Section = React__default.forwardRef(
   ({

package/dist/banner-social-follow.cjs

@@ -767,7 +767,7 @@ var spacingStyles = {
   xl: "py-24 md:py-40",
   hero: "pt-32 pb-12 md:pt-40 md:pb-40"
 };
-var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
+var predefinedSpacings = ["none", "sm", "md", "lg", "xl", "hero"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
 var Section = React__namespace.default.forwardRef(
   ({

package/dist/banner-social-follow.js

@@ -746,7 +746,7 @@ var spacingStyles = {
   xl: "py-24 md:py-40",
   hero: "pt-32 pb-12 md:pt-40 md:pb-40"
 };
-var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
+var predefinedSpacings = ["none", "sm", "md", "lg", "xl", "hero"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
 var Section = React__default.forwardRef(
   ({

package/dist/banner-survey-incentive.cjs

@@ -767,7 +767,7 @@ var spacingStyles = {
   xl: "py-24 md:py-40",
   hero: "pt-32 pb-12 md:pt-40 md:pb-40"
 };
-var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
+var predefinedSpacings = ["none", "sm", "md", "lg", "xl", "hero"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
 var Section = React__namespace.default.forwardRef(
   ({

package/dist/banner-survey-incentive.js

@@ -746,7 +746,7 @@ var spacingStyles = {
   xl: "py-24 md:py-40",
   hero: "pt-32 pb-12 md:pt-40 md:pb-40"
 };
-var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
+var predefinedSpacings = ["none", "sm", "md", "lg", "xl", "hero"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
 var Section = React__default.forwardRef(
   ({

package/dist/blog-cards-read-time.cjs

@@ -854,7 +854,7 @@ var spacingStyles = {
   xl: "py-24 md:py-40",
   hero: "pt-32 pb-12 md:pt-40 md:pb-40"
 };
-var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
+var predefinedSpacings = ["none", "sm", "md", "lg", "xl", "hero"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
 var Section = React__namespace.default.forwardRef(
   ({

package/dist/blog-cards-read-time.js

@@ -831,7 +831,7 @@ var spacingStyles = {
   xl: "py-24 md:py-40",
   hero: "pt-32 pb-12 md:pt-40 md:pb-40"
 };
-var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
+var predefinedSpacings = ["none", "sm", "md", "lg", "xl", "hero"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
 var Section = React__default.forwardRef(
   ({

package/dist/blog-cards-tagline-cta.cjs

@@ -847,7 +847,7 @@ var spacingStyles = {
   xl: "py-24 md:py-40",
   hero: "pt-32 pb-12 md:pt-40 md:pb-40"
 };
-var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
+var predefinedSpacings = ["none", "sm", "md", "lg", "xl", "hero"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
 var Section = React__namespace.default.forwardRef(
   ({

package/dist/blog-cards-tagline-cta.js

@@ -826,7 +826,7 @@ var spacingStyles = {
   xl: "py-24 md:py-40",
   hero: "pt-32 pb-12 md:pt-40 md:pb-40"
 };
-var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
+var predefinedSpacings = ["none", "sm", "md", "lg", "xl", "hero"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
 var Section = React__default.forwardRef(
   ({

package/dist/blog-carousel-apple.cjs

@@ -1002,7 +1002,7 @@ var spacingStyles = {
   xl: "py-24 md:py-40",
   hero: "pt-32 pb-12 md:pt-40 md:pb-40"
 };
-var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
+var predefinedSpacings = ["none", "sm", "md", "lg", "xl", "hero"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
 var Section = React__namespace.default.forwardRef(
   ({

package/dist/blog-carousel-apple.js

@@ -981,7 +981,7 @@ var spacingStyles = {
   xl: "py-24 md:py-40",
   hero: "pt-32 pb-12 md:pt-40 md:pb-40"
 };
-var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
+var predefinedSpacings = ["none", "sm", "md", "lg", "xl", "hero"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
 var Section = React__default.forwardRef(
   ({

package/dist/blog-category-overlay.cjs

@@ -801,7 +801,7 @@ var spacingStyles = {
   xl: "py-24 md:py-40",
   hero: "pt-32 pb-12 md:pt-40 md:pb-40"
 };
-var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
+var predefinedSpacings = ["none", "sm", "md", "lg", "xl", "hero"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
 var Section = React__namespace.default.forwardRef(
   ({

package/dist/blog-category-overlay.js

@@ -780,7 +780,7 @@ var spacingStyles = {
   xl: "py-24 md:py-40",
   hero: "pt-32 pb-12 md:pt-40 md:pb-40"
 };
-var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
+var predefinedSpacings = ["none", "sm", "md", "lg", "xl", "hero"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
 var Section = React__default.forwardRef(
   ({

package/dist/blog-featured-popular.cjs

@@ -796,7 +796,7 @@ var spacingStyles = {
   xl: "py-24 md:py-40",
   hero: "pt-32 pb-12 md:pt-40 md:pb-40"
 };
-var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
+var predefinedSpacings = ["none", "sm", "md", "lg", "xl", "hero"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
 var Section = React__namespace.default.forwardRef(
   ({

package/dist/blog-featured-popular.js

@@ -775,7 +775,7 @@ var spacingStyles = {
   xl: "py-24 md:py-40",
   hero: "pt-32 pb-12 md:pt-40 md:pb-40"
 };
-var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
+var predefinedSpacings = ["none", "sm", "md", "lg", "xl", "hero"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
 var Section = React__default.forwardRef(
   ({

package/dist/blog-filtered-results.cjs

@@ -931,7 +931,7 @@ var spacingStyles = {
   xl: "py-24 md:py-40",
   hero: "pt-32 pb-12 md:pt-40 md:pb-40"
 };
-var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
+var predefinedSpacings = ["none", "sm", "md", "lg", "xl", "hero"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
 var Section = React5__namespace.default.forwardRef(
   ({

package/dist/blog-filtered-results.js

@@ -907,7 +907,7 @@ var spacingStyles = {
   xl: "py-24 md:py-40",
   hero: "pt-32 pb-12 md:pt-40 md:pb-40"
 };
-var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
+var predefinedSpacings = ["none", "sm", "md", "lg", "xl", "hero"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
 var Section = React5__default.forwardRef(
   ({

package/dist/blog-grid-author-cards.cjs

@@ -843,7 +843,7 @@ var spacingStyles = {
   xl: "py-24 md:py-40",
   hero: "pt-32 pb-12 md:pt-40 md:pb-40"
 };
-var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
+var predefinedSpacings = ["none", "sm", "md", "lg", "xl", "hero"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
 var Section = React__namespace.default.forwardRef(
   ({

package/dist/blog-grid-author-cards.js

@@ -821,7 +821,7 @@ var spacingStyles = {
   xl: "py-24 md:py-40",
   hero: "pt-32 pb-12 md:pt-40 md:pb-40"
 };
-var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
+var predefinedSpacings = ["none", "sm", "md", "lg", "xl", "hero"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
 var Section = React__default.forwardRef(
   ({

package/dist/blog-grid-nine-posts.cjs

@@ -843,7 +843,7 @@ var spacingStyles = {
   xl: "py-24 md:py-40",
   hero: "pt-32 pb-12 md:pt-40 md:pb-40"
 };
-var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
+var predefinedSpacings = ["none", "sm", "md", "lg", "xl", "hero"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
 var Section = React__namespace.default.forwardRef(
   ({

package/dist/blog-grid-nine-posts.js

@@ -821,7 +821,7 @@ var spacingStyles = {
   xl: "py-24 md:py-40",
   hero: "pt-32 pb-12 md:pt-40 md:pb-40"
 };
-var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
+var predefinedSpacings = ["none", "sm", "md", "lg", "xl", "hero"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
 var Section = React__default.forwardRef(
   ({

package/dist/blog-horizontal-cards.cjs

@@ -814,7 +814,7 @@ var spacingStyles = {
   xl: "py-24 md:py-40",
   hero: "pt-32 pb-12 md:pt-40 md:pb-40"
 };
-var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
+var predefinedSpacings = ["none", "sm", "md", "lg", "xl", "hero"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
 var Section = React__namespace.default.forwardRef(
   ({

package/dist/blog-horizontal-cards.js

@@ -793,7 +793,7 @@ var spacingStyles = {
   xl: "py-24 md:py-40",
   hero: "pt-32 pb-12 md:pt-40 md:pb-40"
 };
-var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
+var predefinedSpacings = ["none", "sm", "md", "lg", "xl", "hero"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
 var Section = React__default.forwardRef(
   ({

package/dist/blog-horizontal-timeline.cjs

@@ -791,7 +791,7 @@ var spacingStyles = {
   xl: "py-24 md:py-40",
   hero: "pt-32 pb-12 md:pt-40 md:pb-40"
 };
-var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
+var predefinedSpacings = ["none", "sm", "md", "lg", "xl", "hero"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
 var Section = React__namespace.default.forwardRef(
   ({

package/dist/blog-horizontal-timeline.js

@@ -770,7 +770,7 @@ var spacingStyles = {
   xl: "py-24 md:py-40",
   hero: "pt-32 pb-12 md:pt-40 md:pb-40"
 };
-var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
+var predefinedSpacings = ["none", "sm", "md", "lg", "xl", "hero"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
 var Section = React__default.forwardRef(
   ({

package/dist/blog-masonry-featured.cjs

@@ -763,7 +763,7 @@ var spacingStyles = {
   xl: "py-24 md:py-40",
   hero: "pt-32 pb-12 md:pt-40 md:pb-40"
 };
-var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
+var predefinedSpacings = ["none", "sm", "md", "lg", "xl", "hero"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
 var Section = React__namespace.default.forwardRef(
   ({
@@ -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",
       {
@@ -869,20 +870,20 @@ function BlogMasonryFeaturedComponent({
                   src: featuredPost.image,
                   alt: typeof featuredPost.title === "string" ? featuredPost.title : "Featured content",
                   className: cn(
-                    "h-48 w-full rounded-lg object-cover hover:opacity-80 md:h-80 lg:h-96",
+                    "h-48 w-full rounded-xl shadow-xl object-cover md:h-80 lg:h-96 transition-all duration-500 hover:opacity-80",
                     featuredImageClassName
                   ),
                   optixFlowConfig
                 }
               ),
               /* @__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 }) : featuredPost.title),
+                (featuredPost.description || featuredPost.summary) && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 text-sm font-normal", children: featuredPost.description || featuredPost.summary })
               ] })
             ]
           }
@@ -913,12 +914,12 @@ function BlogMasonryFeaturedComponent({
               {
                 src: post.image,
                 alt: typeof post.title === "string" ? post.title : "Content item",
-                className: "h-48 w-full rounded-lg object-cover hover:opacity-80",
+                className: "h-48 w-full rounded-xl shadow-lg object-cover transition-all duration-500 hover:opacity-80",
                 optixFlowConfig
               }
             ),
             /* @__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: [
                 (post.date || post.published) && /* @__PURE__ */ jsxRuntime.jsx("time", { children: post.date || post.published }),
                 (post.date || post.published) && post.author && "\xB7",
                 post.author && /* @__PURE__ */ jsxRuntime.jsx("span", { children: post.author })
@@ -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-4 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 text-left text-lg", 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

@@ -742,7 +742,7 @@ var spacingStyles = {
   xl: "py-24 md:py-40",
   hero: "pt-32 pb-12 md:pt-40 md:pb-40"
 };
-var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
+var predefinedSpacings = ["none", "sm", "md", "lg", "xl", "hero"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
 var Section = React__default.forwardRef(
   ({
@@ -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",
       {
@@ -848,20 +849,20 @@ function BlogMasonryFeaturedComponent({
                   src: featuredPost.image,
                   alt: typeof featuredPost.title === "string" ? featuredPost.title : "Featured content",
                   className: cn(
-                    "h-48 w-full rounded-lg object-cover hover:opacity-80 md:h-80 lg:h-96",
+                    "h-48 w-full rounded-xl shadow-xl object-cover md:h-80 lg:h-96 transition-all duration-500 hover:opacity-80",
                     featuredImageClassName
                   ),
                   optixFlowConfig
                 }
               ),
               /* @__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 }) : featuredPost.title),
+                (featuredPost.description || featuredPost.summary) && /* @__PURE__ */ jsx("p", { className: "mt-4 text-sm font-normal", children: featuredPost.description || featuredPost.summary })
               ] })
             ]
           }
@@ -892,12 +893,12 @@ function BlogMasonryFeaturedComponent({
               {
                 src: post.image,
                 alt: typeof post.title === "string" ? post.title : "Content item",
-                className: "h-48 w-full rounded-lg object-cover hover:opacity-80",
+                className: "h-48 w-full rounded-xl shadow-lg object-cover transition-all duration-500 hover:opacity-80",
                 optixFlowConfig
               }
             ),
             /* @__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: [
                 (post.date || post.published) && /* @__PURE__ */ jsx("time", { children: post.date || post.published }),
                 (post.date || post.published) && post.author && "\xB7",
                 post.author && /* @__PURE__ */ jsx("span", { children: post.author })
@@ -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-4 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 text-left text-lg", 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/blog-related-articles.cjs

@@ -762,7 +762,7 @@ var spacingStyles = {
   xl: "py-24 md:py-40",
   hero: "pt-32 pb-12 md:pt-40 md:pb-40"
 };
-var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
+var predefinedSpacings = ["none", "sm", "md", "lg", "xl", "hero"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
 var Section = React__namespace.default.forwardRef(
   ({