@opensite/ui 0.6.4 → 0.6.6

package/dist/blog-category-overlay.cjs

@@ -981,19 +981,30 @@ function BlogCategoryOverlay({
   postCardClassName,
   categoryBadgeClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing,
   pattern,
   patternOpacity
 }) {
   const viewAllActionContent = React__namespace.useMemo(() => {
     if (viewAllSlot) return viewAllSlot;
     if (!viewAllAction) return null;
-    const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = viewAllAction;
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: actionClassName,
+      ...pressableProps
+    } = viewAllAction;
     return /* @__PURE__ */ jsxRuntime.jsx(
       Pressable,
       {
-        className: cn("flex items-center gap-1 text-sm font-semibold", actionClassName, viewAllClassName),
+        className: cn(
+          "flex items-center gap-1 text-sm font-semibold",
+          actionClassName,
+          viewAllClassName
+        ),
         ...pressableProps,
         children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           icon,
@@ -1024,7 +1035,10 @@ function BlogCategoryOverlay({
             Badge,
             {
               variant: "secondary",
-              className: cn("absolute top-4 right-4 bg-background/70 px-3 py-1 text-sm backdrop-blur-sm", categoryBadgeClassName),
+              className: cn(
+                "absolute top-4 right-4 bg-background/70 px-3 py-1 text-sm backdrop-blur-sm",
+                categoryBadgeClassName
+              ),
               children: post.category || post.label
             }
           )
@@ -1033,18 +1047,39 @@ function BlogCategoryOverlay({
           post.title && (typeof post.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "mb-5 text-xl font-semibold", children: post.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-5 text-xl font-semibold", children: post.title })),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between gap-6 text-sm", children: [
             (post.date || post.published) && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1 text-muted-foreground", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/calendar", size: 16, className: "h-4 w-4" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                DynamicIcon,
+                {
+                  name: "lucide/calendar",
+                  size: 16,
+                  className: "h-4 w-4"
+                }
+              ),
               post.date || post.published
             ] }),
             readMoreText && /* @__PURE__ */ jsxRuntime.jsxs(Pressable, { href: postHref, className: "flex items-center gap-1", children: [
               readMoreText,
-              /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 12, className: "h-full w-3" })
+              /* @__PURE__ */ jsxRuntime.jsx(
+                DynamicIcon,
+                {
+                  name: "lucide/chevron-right",
+                  size: 12,
+                  className: "h-full w-3"
+                }
+              )
             ] })
           ] })
         ] })
       ] }, postId);
     });
-  }, [postsSlot, posts, postCardClassName, categoryBadgeClassName, optixFlowConfig, readMoreText]);
+  }, [
+    postsSlot,
+    posts,
+    postCardClassName,
+    categoryBadgeClassName,
+    optixFlowConfig,
+    readMoreText
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -1054,13 +1089,40 @@ function BlogCategoryOverlay({
       pattern,
       patternOpacity,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto flex max-w-3xl flex-col items-center gap-6 text-center", headerClassName), children: [
-          badge && /* @__PURE__ */ jsxRuntime.jsx("div", { className: badgeClassName, children: typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", children: badge }) : badge }),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-semibold text-balance", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-          viewAllActionContent
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-20 grid gap-6 md:grid-cols-2 lg:grid-cols-3", postsClassName), children: postsContent })
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "mx-auto flex max-w-3xl flex-col items-center gap-6 text-center",
+              headerClassName
+            ),
+            children: [
+              badge && /* @__PURE__ */ jsxRuntime.jsx("div", { className: badgeClassName, children: typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", children: badge }) : badge }),
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h1",
+                {
+                  className: cn(
+                    "text-4xl font-semibold text-balance",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+              viewAllActionContent
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "mt-20 grid gap-6 md:grid-cols-2 lg:grid-cols-3",
+              postsClassName
+            ),
+            children: postsContent
+          }
+        )
       ] })
     }
   );

package/dist/blog-category-overlay.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-CoT4WfJd.cjs';
-import { e as BlogPostItem, A as ActionConfig, O as OptixFlowConfig } from './blocks-B53JjGZ5.cjs';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-CODGexkN.cjs';
+import { e as BlogPostItem, A as ActionConfig, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-CfOeYrR-.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface BlogCategoryOverlayProps {

package/dist/blog-category-overlay.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-DTKUzkJp.js';
-import { e as BlogPostItem, A as ActionConfig, O as OptixFlowConfig } from './blocks-CyUmnmEM.js';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-31vhKBa1.js';
+import { e as BlogPostItem, A as ActionConfig, O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-CfOeYrR-.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface BlogCategoryOverlayProps {

package/dist/blog-category-overlay.js

@@ -960,19 +960,30 @@ function BlogCategoryOverlay({
   postCardClassName,
   categoryBadgeClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing,
   pattern,
   patternOpacity
 }) {
   const viewAllActionContent = React.useMemo(() => {
     if (viewAllSlot) return viewAllSlot;
     if (!viewAllAction) return null;
-    const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = viewAllAction;
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: actionClassName,
+      ...pressableProps
+    } = viewAllAction;
     return /* @__PURE__ */ jsx(
       Pressable,
       {
-        className: cn("flex items-center gap-1 text-sm font-semibold", actionClassName, viewAllClassName),
+        className: cn(
+          "flex items-center gap-1 text-sm font-semibold",
+          actionClassName,
+          viewAllClassName
+        ),
         ...pressableProps,
         children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
           icon,
@@ -1003,7 +1014,10 @@ function BlogCategoryOverlay({
             Badge,
             {
               variant: "secondary",
-              className: cn("absolute top-4 right-4 bg-background/70 px-3 py-1 text-sm backdrop-blur-sm", categoryBadgeClassName),
+              className: cn(
+                "absolute top-4 right-4 bg-background/70 px-3 py-1 text-sm backdrop-blur-sm",
+                categoryBadgeClassName
+              ),
               children: post.category || post.label
             }
           )
@@ -1012,18 +1026,39 @@ function BlogCategoryOverlay({
           post.title && (typeof post.title === "string" ? /* @__PURE__ */ jsx("h2", { className: "mb-5 text-xl font-semibold", children: post.title }) : /* @__PURE__ */ jsx("div", { className: "mb-5 text-xl font-semibold", children: post.title })),
           /* @__PURE__ */ jsxs("div", { className: "flex justify-between gap-6 text-sm", children: [
             (post.date || post.published) && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-muted-foreground", children: [
-              /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/calendar", size: 16, className: "h-4 w-4" }),
+              /* @__PURE__ */ jsx(
+                DynamicIcon,
+                {
+                  name: "lucide/calendar",
+                  size: 16,
+                  className: "h-4 w-4"
+                }
+              ),
               post.date || post.published
             ] }),
             readMoreText && /* @__PURE__ */ jsxs(Pressable, { href: postHref, className: "flex items-center gap-1", children: [
               readMoreText,
-              /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-right", size: 12, className: "h-full w-3" })
+              /* @__PURE__ */ jsx(
+                DynamicIcon,
+                {
+                  name: "lucide/chevron-right",
+                  size: 12,
+                  className: "h-full w-3"
+                }
+              )
             ] })
           ] })
         ] })
       ] }, postId);
     });
-  }, [postsSlot, posts, postCardClassName, categoryBadgeClassName, optixFlowConfig, readMoreText]);
+  }, [
+    postsSlot,
+    posts,
+    postCardClassName,
+    categoryBadgeClassName,
+    optixFlowConfig,
+    readMoreText
+  ]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -1033,13 +1068,40 @@ function BlogCategoryOverlay({
       pattern,
       patternOpacity,
       children: /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("mx-auto flex max-w-3xl flex-col items-center gap-6 text-center", headerClassName), children: [
-          badge && /* @__PURE__ */ jsx("div", { className: badgeClassName, children: typeof badge === "string" ? /* @__PURE__ */ jsx(Badge, { variant: "outline", children: badge }) : badge }),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-4xl font-semibold text-balance", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-          viewAllActionContent
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: cn("mt-20 grid gap-6 md:grid-cols-2 lg:grid-cols-3", postsClassName), children: postsContent })
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "mx-auto flex max-w-3xl flex-col items-center gap-6 text-center",
+              headerClassName
+            ),
+            children: [
+              badge && /* @__PURE__ */ jsx("div", { className: badgeClassName, children: typeof badge === "string" ? /* @__PURE__ */ jsx(Badge, { variant: "outline", children: badge }) : badge }),
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  className: cn(
+                    "text-4xl font-semibold text-balance",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+              viewAllActionContent
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "mt-20 grid gap-6 md:grid-cols-2 lg:grid-cols-3",
+              postsClassName
+            ),
+            children: postsContent
+          }
+        )
       ] })
     }
   );

package/dist/blog-featured-popular.cjs

@@ -875,8 +875,8 @@ function BlogFeaturedPopular({
   postsClassName,
   postCardClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing,
   pattern,
   patternOpacity
 }) {
@@ -891,7 +891,10 @@ function BlogFeaturedPopular({
     return /* @__PURE__ */ jsxRuntime.jsxs(
       PostWrapper,
       {
-        className: cn("my-16 grid grid-cols-1 items-center gap-8 md:grid-cols-2 lg:gap-16", featuredClassName),
+        className: cn(
+          "my-16 grid grid-cols-1 items-center gap-8 md:grid-cols-2 lg:gap-16",
+          featuredClassName
+        ),
         ...wrapperProps,
         children: [
           featuredPost.image && /* @__PURE__ */ jsxRuntime.jsx(
@@ -899,19 +902,38 @@ function BlogFeaturedPopular({
             {
               src: featuredPost.image,
               alt: typeof featuredPost.title === "string" ? featuredPost.title : "Featured post",
-              className: cn("aspect-video rounded-lg object-cover", featuredImageClassName),
+              className: cn(
+                "aspect-video rounded-lg object-cover",
+                featuredImageClassName
+              ),
               optixFlowConfig
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-start gap-4", featuredContentClassName), children: [
-            (featuredPost.category || featuredPost.label) && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", className: "shrink", children: featuredPost.category || featuredPost.label }),
-            featuredPost.title && (typeof featuredPost.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-semibold text-balance md:max-w-lg lg:text-3xl", children: featuredPost.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-2xl font-semibold text-balance md:max-w-lg lg:text-3xl", children: featuredPost.title })),
-            (featuredPost.description || featuredPost.summary) && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground md:max-w-lg", children: featuredPost.description || featuredPost.summary })
-          ] })
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "flex flex-col items-start gap-4",
+                featuredContentClassName
+              ),
+              children: [
+                (featuredPost.category || featuredPost.label) && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", className: "shrink", children: featuredPost.category || featuredPost.label }),
+                featuredPost.title && (typeof featuredPost.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-semibold text-balance md:max-w-lg lg:text-3xl", children: featuredPost.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-2xl font-semibold text-balance md:max-w-lg lg:text-3xl", children: featuredPost.title })),
+                (featuredPost.description || featuredPost.summary) && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground md:max-w-lg", children: featuredPost.description || featuredPost.summary })
+              ]
+            }
+          )
         ]
       }
     );
-  }, [featuredSlot, featuredPost, featuredClassName, featuredImageClassName, featuredContentClassName, optixFlowConfig]);
+  }, [
+    featuredSlot,
+    featuredPost,
+    featuredClassName,
+    featuredImageClassName,
+    featuredContentClassName,
+    optixFlowConfig
+  ]);
   const renderedPopularPosts = React__namespace.useMemo(() => {
     if (postsSlot) return postsSlot;
     if (!popularPosts || popularPosts.length === 0) return null;
@@ -954,13 +976,49 @@ function BlogFeaturedPopular({
       patternOpacity,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
         (heading || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-16 text-center", headerClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-5xl font-medium md:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto mt-4 max-w-xl text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h1",
+            {
+              className: cn(
+                "text-5xl font-medium md:text-6xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "mx-auto mt-4 max-w-xl text-lg text-muted-foreground",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-7xl", children: [
           renderedFeaturedPost,
-          popularHeading && (typeof popularHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-2xl font-medium md:text-3xl", popularHeadingClassName), children: popularHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: popularHeadingClassName, children: popularHeading })),
-          renderedPopularPosts && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-8 grid grid-cols-1 gap-10 md:grid-cols-3 md:gap-6", postsClassName), children: renderedPopularPosts })
+          popularHeading && (typeof popularHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "text-2xl font-medium md:text-3xl",
+                popularHeadingClassName
+              ),
+              children: popularHeading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: popularHeadingClassName, children: popularHeading })),
+          renderedPopularPosts && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "mt-8 grid grid-cols-1 gap-10 md:grid-cols-3 md:gap-6",
+                postsClassName
+              ),
+              children: renderedPopularPosts
+            }
+          )
         ] })
       ] })
     }

package/dist/blog-featured-popular.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-CoT4WfJd.cjs';
-import { e as BlogPostItem, O as OptixFlowConfig } from './blocks-B53JjGZ5.cjs';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-CODGexkN.cjs';
+import { e as BlogPostItem, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-CfOeYrR-.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface BlogFeaturedPopularProps {

package/dist/blog-featured-popular.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-DTKUzkJp.js';
-import { e as BlogPostItem, O as OptixFlowConfig } from './blocks-CyUmnmEM.js';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-31vhKBa1.js';
+import { e as BlogPostItem, O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-CfOeYrR-.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface BlogFeaturedPopularProps {

package/dist/blog-featured-popular.js

@@ -854,8 +854,8 @@ function BlogFeaturedPopular({
   postsClassName,
   postCardClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing,
   pattern,
   patternOpacity
 }) {
@@ -870,7 +870,10 @@ function BlogFeaturedPopular({
     return /* @__PURE__ */ jsxs(
       PostWrapper,
       {
-        className: cn("my-16 grid grid-cols-1 items-center gap-8 md:grid-cols-2 lg:gap-16", featuredClassName),
+        className: cn(
+          "my-16 grid grid-cols-1 items-center gap-8 md:grid-cols-2 lg:gap-16",
+          featuredClassName
+        ),
         ...wrapperProps,
         children: [
           featuredPost.image && /* @__PURE__ */ jsx(
@@ -878,19 +881,38 @@ function BlogFeaturedPopular({
             {
               src: featuredPost.image,
               alt: typeof featuredPost.title === "string" ? featuredPost.title : "Featured post",
-              className: cn("aspect-video rounded-lg object-cover", featuredImageClassName),
+              className: cn(
+                "aspect-video rounded-lg object-cover",
+                featuredImageClassName
+              ),
               optixFlowConfig
             }
           ),
-          /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-start gap-4", featuredContentClassName), children: [
-            (featuredPost.category || featuredPost.label) && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "shrink", children: featuredPost.category || featuredPost.label }),
-            featuredPost.title && (typeof featuredPost.title === "string" ? /* @__PURE__ */ jsx("h2", { className: "text-2xl font-semibold text-balance md:max-w-lg lg:text-3xl", children: featuredPost.title }) : /* @__PURE__ */ jsx("div", { className: "text-2xl font-semibold text-balance md:max-w-lg lg:text-3xl", children: featuredPost.title })),
-            (featuredPost.description || featuredPost.summary) && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground md:max-w-lg", children: featuredPost.description || featuredPost.summary })
-          ] })
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "flex flex-col items-start gap-4",
+                featuredContentClassName
+              ),
+              children: [
+                (featuredPost.category || featuredPost.label) && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "shrink", children: featuredPost.category || featuredPost.label }),
+                featuredPost.title && (typeof featuredPost.title === "string" ? /* @__PURE__ */ jsx("h2", { className: "text-2xl font-semibold text-balance md:max-w-lg lg:text-3xl", children: featuredPost.title }) : /* @__PURE__ */ jsx("div", { className: "text-2xl font-semibold text-balance md:max-w-lg lg:text-3xl", children: featuredPost.title })),
+                (featuredPost.description || featuredPost.summary) && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground md:max-w-lg", children: featuredPost.description || featuredPost.summary })
+              ]
+            }
+          )
         ]
       }
     );
-  }, [featuredSlot, featuredPost, featuredClassName, featuredImageClassName, featuredContentClassName, optixFlowConfig]);
+  }, [
+    featuredSlot,
+    featuredPost,
+    featuredClassName,
+    featuredImageClassName,
+    featuredContentClassName,
+    optixFlowConfig
+  ]);
   const renderedPopularPosts = React.useMemo(() => {
     if (postsSlot) return postsSlot;
     if (!popularPosts || popularPosts.length === 0) return null;
@@ -933,13 +955,49 @@ function BlogFeaturedPopular({
       patternOpacity,
       children: /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
         (heading || description) && /* @__PURE__ */ jsxs("div", { className: cn("mb-16 text-center", headerClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-5xl font-medium md:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto mt-4 max-w-xl text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+            "h1",
+            {
+              className: cn(
+                "text-5xl font-medium md:text-6xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "mx-auto mt-4 max-w-xl text-lg text-muted-foreground",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-7xl", children: [
           renderedFeaturedPost,
-          popularHeading && (typeof popularHeading === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-2xl font-medium md:text-3xl", popularHeadingClassName), children: popularHeading }) : /* @__PURE__ */ jsx("div", { className: popularHeadingClassName, children: popularHeading })),
-          renderedPopularPosts && /* @__PURE__ */ jsx("div", { className: cn("mt-8 grid grid-cols-1 gap-10 md:grid-cols-3 md:gap-6", postsClassName), children: renderedPopularPosts })
+          popularHeading && (typeof popularHeading === "string" ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "text-2xl font-medium md:text-3xl",
+                popularHeadingClassName
+              ),
+              children: popularHeading
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: popularHeadingClassName, children: popularHeading })),
+          renderedPopularPosts && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "mt-8 grid grid-cols-1 gap-10 md:grid-cols-3 md:gap-6",
+                postsClassName
+              ),
+              children: renderedPopularPosts
+            }
+          )
         ] })
       ] })
     }