@opensite/ui 0.6.6 → 0.6.8

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

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

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

package/dist/animated-dialog.d.cts

@@ -1,10 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { h as AnimatedDialogProps } from './community-initiatives-CODGexkN.cjs';
+import { h as AnimatedDialogProps } from './community-initiatives-CoT4WfJd.cjs';
 import 'react';
 import './pattern-background-a7gKHzHy.cjs';
-import './blocks-Cohq4eio.cjs';
+import './blocks-B53JjGZ5.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CfOeYrR-.cjs';
 import 'class-variance-authority/types';
 
 /**

package/dist/animated-dialog.d.ts

@@ -1,10 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { h as AnimatedDialogProps } from './community-initiatives-31vhKBa1.js';
+import { h as AnimatedDialogProps } from './community-initiatives-DTKUzkJp.js';
 import 'react';
 import './pattern-background-a7gKHzHy.js';
-import './blocks-k17uluAz.js';
+import './blocks-CyUmnmEM.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CfOeYrR-.js';
 import 'class-variance-authority/types';
 
 /**

package/dist/article-breadcrumb-social.cjs

@@ -1112,15 +1112,25 @@ function ArticleBreadcrumbSocialComponent({
   const author = authorProp ?? (authorName ? { name: authorName, image: authorImage, role: authorRole } : void 0);
   const platformLabels = {
     twitter: "Twitter",
+    x: "X",
     facebook: "Facebook",
     linkedin: "LinkedIn",
     instagram: "Instagram",
     github: "GitHub"
   };
+  const socialIconMap = {
+    twitter: "simple-icons/x",
+    // Twitter is now X
+    x: "simple-icons/x",
+    facebook: "simple-icons/facebook",
+    linkedin: "simple-icons/linkedin",
+    instagram: "simple-icons/instagram",
+    github: "simple-icons/github"
+  };
   const socialLinks = socialLinksProp ?? (shareUrls ? Object.entries(shareUrls).filter(([, href]) => href).map(([platform, href]) => ({
     platform,
     href,
-    icon: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: `lucide/${platform}`, size: 16 }),
+    icon: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: socialIconMap[platform] || `simple-icons/${platform}`, size: 16 }),
     "aria-label": `Share on ${platformLabels[platform] || platform.charAt(0).toUpperCase() + platform.slice(1)}`,
     className: void 0
   })) : []);
@@ -1261,7 +1271,8 @@ function ArticleBreadcrumbSocialComponent({
               authorContent,
               /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "my-8" }),
               heroMediaContent,
-              children
+              children,
+              shareButtonsContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "not-prose mt-8 lg:hidden", children: shareButtonsContent })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx("aside", { className: cn("hidden lg:block", sidebarClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky top-8 space-y-6", children: [
               tocContent,

package/dist/article-breadcrumb-social.d.cts

@@ -1,10 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-CODGexkN.cjs';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-CoT4WfJd.cjs';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-import { a as SocialLinkItem, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
+import { a as SocialLinkItem, O as OptixFlowConfig } from './blocks-B53JjGZ5.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CfOeYrR-.cjs';
 import 'class-variance-authority/types';
 
 interface ArticleBreadcrumbSection {

package/dist/article-breadcrumb-social.d.ts

@@ -1,10 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-31vhKBa1.js';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-DTKUzkJp.js';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-import { a as SocialLinkItem, O as OptixFlowConfig } from './blocks-k17uluAz.js';
+import { a as SocialLinkItem, O as OptixFlowConfig } from './blocks-CyUmnmEM.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CfOeYrR-.js';
 import 'class-variance-authority/types';
 
 interface ArticleBreadcrumbSection {

package/dist/article-breadcrumb-social.js

@@ -1089,15 +1089,25 @@ function ArticleBreadcrumbSocialComponent({
   const author = authorProp ?? (authorName ? { name: authorName, image: authorImage, role: authorRole } : void 0);
   const platformLabels = {
     twitter: "Twitter",
+    x: "X",
     facebook: "Facebook",
     linkedin: "LinkedIn",
     instagram: "Instagram",
     github: "GitHub"
   };
+  const socialIconMap = {
+    twitter: "simple-icons/x",
+    // Twitter is now X
+    x: "simple-icons/x",
+    facebook: "simple-icons/facebook",
+    linkedin: "simple-icons/linkedin",
+    instagram: "simple-icons/instagram",
+    github: "simple-icons/github"
+  };
   const socialLinks = socialLinksProp ?? (shareUrls ? Object.entries(shareUrls).filter(([, href]) => href).map(([platform, href]) => ({
     platform,
     href,
-    icon: /* @__PURE__ */ jsx(DynamicIcon, { name: `lucide/${platform}`, size: 16 }),
+    icon: /* @__PURE__ */ jsx(DynamicIcon, { name: socialIconMap[platform] || `simple-icons/${platform}`, size: 16 }),
     "aria-label": `Share on ${platformLabels[platform] || platform.charAt(0).toUpperCase() + platform.slice(1)}`,
     className: void 0
   })) : []);
@@ -1238,7 +1248,8 @@ function ArticleBreadcrumbSocialComponent({
               authorContent,
               /* @__PURE__ */ jsx(Separator, { className: "my-8" }),
               heroMediaContent,
-              children
+              children,
+              shareButtonsContent && /* @__PURE__ */ jsx("div", { className: "not-prose mt-8 lg:hidden", children: shareButtonsContent })
             ] }),
             /* @__PURE__ */ jsx("aside", { className: cn("hidden lg:block", sidebarClassName), children: /* @__PURE__ */ jsxs("div", { className: "sticky top-8 space-y-6", children: [
               tocContent,

package/dist/article-chapters-author.cjs

@@ -1087,7 +1087,13 @@ function ArticleChaptersAuthorComponent({
   pattern,
   patternOpacity
 }) {
-  const conclusionActions = conclusionActionsProp ?? (conclusionButtonText ? [{ label: conclusionButtonText, href: conclusionButtonHref || "#", variant: "default" }] : []);
+  const conclusionActions = conclusionActionsProp ?? (conclusionButtonText ? [
+    {
+      label: conclusionButtonText,
+      href: conclusionButtonHref || "#",
+      variant: "default"
+    }
+  ] : []);
   const [activeChapter, setActiveChapter] = React6__namespace.useState(
     chapters?.[0]?.id || ""
   );
@@ -1112,7 +1118,7 @@ function ArticleChaptersAuthorComponent({
   const breadcrumbsContent = React6__namespace.useMemo(() => {
     if (breadcrumbsSlot) return breadcrumbsSlot;
     if (!breadcrumbs || breadcrumbs.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx(Breadcrumb, { className: cn("mb-8", breadcrumbClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(BreadcrumbList, { children: [
+    return /* @__PURE__ */ jsxRuntime.jsx(Breadcrumb, { className: cn("mb-8 md:mb-20", breadcrumbClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(BreadcrumbList, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbLink, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: "#", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/home", size: 16 }) }) }) }),
       breadcrumbs.map((crumb, index) => /* @__PURE__ */ jsxRuntime.jsxs(React6__namespace.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbSeparator, {}),
@@ -1149,7 +1155,13 @@ function ArticleChaptersAuthorComponent({
         );
       }) })
     ] });
-  }, [chaptersSlot, chapters, activeChapter, renderChapterLink, chaptersClassName]);
+  }, [
+    chaptersSlot,
+    chapters,
+    activeChapter,
+    renderChapterLink,
+    chaptersClassName
+  ]);
   const authorCardContent = React6__namespace.useMemo(() => {
     if (authorSlot) return authorSlot;
     if (!author) return null;
@@ -1219,36 +1231,68 @@ function ArticleChaptersAuthorComponent({
       {
         src: heroImageSrc,
         alt: heroImageAlt,
-        className: cn("my-8 aspect-video w-full rounded-lg object-cover", heroImageClassName),
+        className: cn(
+          "my-8 aspect-video w-full rounded-lg object-cover",
+          heroImageClassName
+        ),
         optixFlowConfig
       }
     );
-  }, [heroMediaSlot, heroImageSrc, heroImageAlt, heroImageClassName, optixFlowConfig]);
+  }, [
+    heroMediaSlot,
+    heroImageSrc,
+    heroImageAlt,
+    heroImageClassName,
+    optixFlowConfig
+  ]);
   const conclusionContent = React6__namespace.useMemo(() => {
     if (conclusionSlot) return conclusionSlot;
-    if (!conclusionTitle && !conclusionDescription && (!conclusionActions || conclusionActions.length === 0)) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-12 rounded-lg border bg-muted/50 p-6 not-prose", conclusionClassName), children: [
-      conclusionTitle && (typeof conclusionTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold", children: conclusionTitle }) : conclusionTitle),
-      conclusionDescription && (typeof conclusionDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-muted-foreground", children: conclusionDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: conclusionDescription })),
-      conclusionActions && conclusionActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 flex flex-wrap gap-2", children: conclusionActions.map((action, index) => {
-        const { label, icon, iconAfter, children: actionChildren, className: actionClassName, ...pressableProps } = action;
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          Pressable,
-          {
-            asButton: true,
-            className: actionClassName,
-            ...pressableProps,
-            children: actionChildren ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              icon,
+    if (!conclusionTitle && !conclusionDescription && (!conclusionActions || conclusionActions.length === 0))
+      return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "mt-12 rounded-lg border bg-muted/50 p-6 not-prose",
+          conclusionClassName
+        ),
+        children: [
+          conclusionTitle && (typeof conclusionTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold", children: conclusionTitle }) : conclusionTitle),
+          conclusionDescription && (typeof conclusionDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-muted-foreground", children: conclusionDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: conclusionDescription })),
+          conclusionActions && conclusionActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 flex flex-wrap gap-2", children: conclusionActions.map((action, index) => {
+            const {
               label,
-              iconAfter
-            ] })
-          },
-          index
-        );
-      }) })
-    ] });
-  }, [conclusionSlot, conclusionTitle, conclusionDescription, conclusionActions, conclusionClassName]);
+              icon,
+              iconAfter,
+              children: actionChildren,
+              className: actionClassName,
+              ...pressableProps
+            } = action;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              Pressable,
+              {
+                asButton: true,
+                className: actionClassName,
+                ...pressableProps,
+                children: actionChildren ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  icon,
+                  label,
+                  iconAfter
+                ] })
+              },
+              index
+            );
+          }) })
+        ]
+      }
+    );
+  }, [
+    conclusionSlot,
+    conclusionTitle,
+    conclusionDescription,
+    conclusionActions,
+    conclusionClassName
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -1259,20 +1303,47 @@ function ArticleChaptersAuthorComponent({
       className,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
         breadcrumbsContent,
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
-          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
-          subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 text-lg text-muted-foreground md:text-xl", subtitleClassName), children: subtitle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", subtitleClassName), children: subtitle }))
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 text-center px-8 md:px-0", headerClassName), children: [
+          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h1",
+            {
+              className: cn(
+                "text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl text-balance",
+                titleClassName
+              ),
+              children: title
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
+          subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "mt-4 text-lg text-muted-foreground md:text-xl text-balance",
+                subtitleClassName
+              ),
+              children: subtitle
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", subtitleClassName), children: subtitle }))
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-10 lg:grid-cols-[280px_minmax(0,1fr)]", children: [
           /* @__PURE__ */ jsxRuntime.jsx("aside", { className: cn("hidden lg:block", sidebarClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky top-8 space-y-6", children: [
             chaptersNavContent,
             authorCardContent
           ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("article", { className: cn("prose max-w-none dark:prose-invert", articleClassName), children: [
-            heroMediaContent,
-            children,
-            conclusionContent
-          ] })
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "article",
+            {
+              className: cn(
+                "prose max-w-none dark:prose-invert",
+                articleClassName
+              ),
+              children: [
+                heroMediaContent,
+                children,
+                conclusionContent
+              ]
+            }
+          )
         ] })
       ] })
     }

package/dist/article-chapters-author.d.cts

@@ -1,10 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-CODGexkN.cjs';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-CoT4WfJd.cjs';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-import { a as SocialLinkItem, A as ActionConfig, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
+import { a as SocialLinkItem, A as ActionConfig, O as OptixFlowConfig } from './blocks-B53JjGZ5.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CfOeYrR-.cjs';
 import 'class-variance-authority/types';
 
 interface ArticleChapter {

package/dist/article-chapters-author.d.ts

@@ -1,10 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-31vhKBa1.js';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-DTKUzkJp.js';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-import { a as SocialLinkItem, A as ActionConfig, O as OptixFlowConfig } from './blocks-k17uluAz.js';
+import { a as SocialLinkItem, A as ActionConfig, O as OptixFlowConfig } from './blocks-CyUmnmEM.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CfOeYrR-.js';
 import 'class-variance-authority/types';
 
 interface ArticleChapter {

package/dist/article-chapters-author.js

@@ -1065,7 +1065,13 @@ function ArticleChaptersAuthorComponent({
   pattern,
   patternOpacity
 }) {
-  const conclusionActions = conclusionActionsProp ?? (conclusionButtonText ? [{ label: conclusionButtonText, href: conclusionButtonHref || "#", variant: "default" }] : []);
+  const conclusionActions = conclusionActionsProp ?? (conclusionButtonText ? [
+    {
+      label: conclusionButtonText,
+      href: conclusionButtonHref || "#",
+      variant: "default"
+    }
+  ] : []);
   const [activeChapter, setActiveChapter] = React6.useState(
     chapters?.[0]?.id || ""
   );
@@ -1090,7 +1096,7 @@ function ArticleChaptersAuthorComponent({
   const breadcrumbsContent = React6.useMemo(() => {
     if (breadcrumbsSlot) return breadcrumbsSlot;
     if (!breadcrumbs || breadcrumbs.length === 0) return null;
-    return /* @__PURE__ */ jsx(Breadcrumb, { className: cn("mb-8", breadcrumbClassName), children: /* @__PURE__ */ jsxs(BreadcrumbList, { children: [
+    return /* @__PURE__ */ jsx(Breadcrumb, { className: cn("mb-8 md:mb-20", breadcrumbClassName), children: /* @__PURE__ */ jsxs(BreadcrumbList, { children: [
       /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbLink, { asChild: true, children: /* @__PURE__ */ jsx(Pressable, { href: "#", children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/home", size: 16 }) }) }) }),
       breadcrumbs.map((crumb, index) => /* @__PURE__ */ jsxs(React6.Fragment, { children: [
         /* @__PURE__ */ jsx(BreadcrumbSeparator, {}),
@@ -1127,7 +1133,13 @@ function ArticleChaptersAuthorComponent({
         );
       }) })
     ] });
-  }, [chaptersSlot, chapters, activeChapter, renderChapterLink, chaptersClassName]);
+  }, [
+    chaptersSlot,
+    chapters,
+    activeChapter,
+    renderChapterLink,
+    chaptersClassName
+  ]);
   const authorCardContent = React6.useMemo(() => {
     if (authorSlot) return authorSlot;
     if (!author) return null;
@@ -1197,36 +1209,68 @@ function ArticleChaptersAuthorComponent({
       {
         src: heroImageSrc,
         alt: heroImageAlt,
-        className: cn("my-8 aspect-video w-full rounded-lg object-cover", heroImageClassName),
+        className: cn(
+          "my-8 aspect-video w-full rounded-lg object-cover",
+          heroImageClassName
+        ),
         optixFlowConfig
       }
     );
-  }, [heroMediaSlot, heroImageSrc, heroImageAlt, heroImageClassName, optixFlowConfig]);
+  }, [
+    heroMediaSlot,
+    heroImageSrc,
+    heroImageAlt,
+    heroImageClassName,
+    optixFlowConfig
+  ]);
   const conclusionContent = React6.useMemo(() => {
     if (conclusionSlot) return conclusionSlot;
-    if (!conclusionTitle && !conclusionDescription && (!conclusionActions || conclusionActions.length === 0)) return null;
-    return /* @__PURE__ */ jsxs("div", { className: cn("mt-12 rounded-lg border bg-muted/50 p-6 not-prose", conclusionClassName), children: [
-      conclusionTitle && (typeof conclusionTitle === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: conclusionTitle }) : conclusionTitle),
-      conclusionDescription && (typeof conclusionDescription === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-2 text-muted-foreground", children: conclusionDescription }) : /* @__PURE__ */ jsx("div", { className: "mt-2", children: conclusionDescription })),
-      conclusionActions && conclusionActions.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-wrap gap-2", children: conclusionActions.map((action, index) => {
-        const { label, icon, iconAfter, children: actionChildren, className: actionClassName, ...pressableProps } = action;
-        return /* @__PURE__ */ jsx(
-          Pressable,
-          {
-            asButton: true,
-            className: actionClassName,
-            ...pressableProps,
-            children: actionChildren ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-              icon,
+    if (!conclusionTitle && !conclusionDescription && (!conclusionActions || conclusionActions.length === 0))
+      return null;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "mt-12 rounded-lg border bg-muted/50 p-6 not-prose",
+          conclusionClassName
+        ),
+        children: [
+          conclusionTitle && (typeof conclusionTitle === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: conclusionTitle }) : conclusionTitle),
+          conclusionDescription && (typeof conclusionDescription === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-2 text-muted-foreground", children: conclusionDescription }) : /* @__PURE__ */ jsx("div", { className: "mt-2", children: conclusionDescription })),
+          conclusionActions && conclusionActions.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-wrap gap-2", children: conclusionActions.map((action, index) => {
+            const {
               label,
-              iconAfter
-            ] })
-          },
-          index
-        );
-      }) })
-    ] });
-  }, [conclusionSlot, conclusionTitle, conclusionDescription, conclusionActions, conclusionClassName]);
+              icon,
+              iconAfter,
+              children: actionChildren,
+              className: actionClassName,
+              ...pressableProps
+            } = action;
+            return /* @__PURE__ */ jsx(
+              Pressable,
+              {
+                asButton: true,
+                className: actionClassName,
+                ...pressableProps,
+                children: actionChildren ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  icon,
+                  label,
+                  iconAfter
+                ] })
+              },
+              index
+            );
+          }) })
+        ]
+      }
+    );
+  }, [
+    conclusionSlot,
+    conclusionTitle,
+    conclusionDescription,
+    conclusionActions,
+    conclusionClassName
+  ]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -1237,20 +1281,47 @@ function ArticleChaptersAuthorComponent({
       className,
       children: /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
         breadcrumbsContent,
-        /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
-          title && (typeof title === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title })),
-          subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-lg text-muted-foreground md:text-xl", subtitleClassName), children: subtitle }) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", subtitleClassName), children: subtitle }))
+        /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-center px-8 md:px-0", headerClassName), children: [
+          title && (typeof title === "string" ? /* @__PURE__ */ jsx(
+            "h1",
+            {
+              className: cn(
+                "text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl text-balance",
+                titleClassName
+              ),
+              children: title
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title })),
+          subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "mt-4 text-lg text-muted-foreground md:text-xl text-balance",
+                subtitleClassName
+              ),
+              children: subtitle
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", subtitleClassName), children: subtitle }))
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "grid gap-10 lg:grid-cols-[280px_minmax(0,1fr)]", children: [
           /* @__PURE__ */ jsx("aside", { className: cn("hidden lg:block", sidebarClassName), children: /* @__PURE__ */ jsxs("div", { className: "sticky top-8 space-y-6", children: [
             chaptersNavContent,
             authorCardContent
           ] }) }),
-          /* @__PURE__ */ jsxs("article", { className: cn("prose max-w-none dark:prose-invert", articleClassName), children: [
-            heroMediaContent,
-            children,
-            conclusionContent
-          ] })
+          /* @__PURE__ */ jsxs(
+            "article",
+            {
+              className: cn(
+                "prose max-w-none dark:prose-invert",
+                articleClassName
+              ),
+              children: [
+                heroMediaContent,
+                children,
+                conclusionContent
+              ]
+            }
+          )
         ] })
       ] })
     }