@opensite/ui 2.6.1 → 2.6.3

package/dist/article-hero-prose.cjs

@@ -877,7 +877,6 @@ Section.displayName = "Section";
 function ArticleHeroProseComponent({
   post,
   className,
-  containerClassName,
   headerClassName,
   titleClassName,
   descriptionClassName,
@@ -890,7 +889,8 @@ function ArticleHeroProseComponent({
   dateFormat = "MMMM d, yyyy",
   optixFlowConfig,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "hero",
   pattern,
   patternOpacity
 }) {
@@ -961,8 +961,9 @@ function ArticleHeroProseComponent({
       pattern,
       patternOpacity,
       className,
+      containerClassName,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             className: cn(
@@ -974,7 +975,7 @@ function ArticleHeroProseComponent({
                 "h1",
                 {
                   className: cn(
-                    "max-w-3xl text-5xl font-semibold text-pretty md:text-6xl",
+                    "max-w-full md:max-w-3xl text-2xl font-semibold text-pretty md:text-5xl",
                     titleClassName
                   ),
                   children: title
@@ -984,7 +985,7 @@ function ArticleHeroProseComponent({
                 "h3",
                 {
                   className: cn(
-                    "max-w-3xl text-lg text-muted-foreground md:text-xl text-balance",
+                    "max-w-full md:max-w-3xl text-lg text-muted-foreground md:text-xl text-balance",
                     descriptionClassName
                   ),
                   children: description
@@ -995,7 +996,7 @@ function ArticleHeroProseComponent({
             ]
           }
         ) }),
-        children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
+        children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             className: cn(

package/dist/article-hero-prose.d.cts

@@ -91,6 +91,6 @@ interface ArticleHeroProseProps {
      */
     patternOpacity?: number;
 }
-declare function ArticleHeroProseComponent({ post, className, containerClassName, headerClassName, titleClassName, descriptionClassName, authorClassName, heroImageClassName, proseClassName, heroMediaSlot, authorSlot, children, dateFormat, optixFlowConfig, background, spacing, pattern, patternOpacity, }: ArticleHeroProseProps): react_jsx_runtime.JSX.Element;
+declare function ArticleHeroProseComponent({ post, className, headerClassName, titleClassName, descriptionClassName, authorClassName, heroImageClassName, proseClassName, heroMediaSlot, authorSlot, children, dateFormat, optixFlowConfig, background, containerClassName, spacing, pattern, patternOpacity, }: ArticleHeroProseProps): react_jsx_runtime.JSX.Element;
 
 export { ArticleHeroProseComponent as ArticleHeroProse, type ArticleHeroProsePost, type ArticleHeroProseProps };

package/dist/article-hero-prose.d.ts

@@ -91,6 +91,6 @@ interface ArticleHeroProseProps {
      */
     patternOpacity?: number;
 }
-declare function ArticleHeroProseComponent({ post, className, containerClassName, headerClassName, titleClassName, descriptionClassName, authorClassName, heroImageClassName, proseClassName, heroMediaSlot, authorSlot, children, dateFormat, optixFlowConfig, background, spacing, pattern, patternOpacity, }: ArticleHeroProseProps): react_jsx_runtime.JSX.Element;
+declare function ArticleHeroProseComponent({ post, className, headerClassName, titleClassName, descriptionClassName, authorClassName, heroImageClassName, proseClassName, heroMediaSlot, authorSlot, children, dateFormat, optixFlowConfig, background, containerClassName, spacing, pattern, patternOpacity, }: ArticleHeroProseProps): react_jsx_runtime.JSX.Element;
 
 export { ArticleHeroProseComponent as ArticleHeroProse, type ArticleHeroProsePost, type ArticleHeroProseProps };

package/dist/article-hero-prose.js

@@ -855,7 +855,6 @@ Section.displayName = "Section";
 function ArticleHeroProseComponent({
   post,
   className,
-  containerClassName,
   headerClassName,
   titleClassName,
   descriptionClassName,
@@ -868,7 +867,8 @@ function ArticleHeroProseComponent({
   dateFormat = "MMMM d, yyyy",
   optixFlowConfig,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "hero",
   pattern,
   patternOpacity
 }) {
@@ -939,8 +939,9 @@ function ArticleHeroProseComponent({
       pattern,
       patternOpacity,
       className,
+      containerClassName,
       children: [
-        /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs(
           "div",
           {
             className: cn(
@@ -952,7 +953,7 @@ function ArticleHeroProseComponent({
                 "h1",
                 {
                   className: cn(
-                    "max-w-3xl text-5xl font-semibold text-pretty md:text-6xl",
+                    "max-w-full md:max-w-3xl text-2xl font-semibold text-pretty md:text-5xl",
                     titleClassName
                   ),
                   children: title
@@ -962,7 +963,7 @@ function ArticleHeroProseComponent({
                 "h3",
                 {
                   className: cn(
-                    "max-w-3xl text-lg text-muted-foreground md:text-xl text-balance",
+                    "max-w-full md:max-w-3xl text-lg text-muted-foreground md:text-xl text-balance",
                     descriptionClassName
                   ),
                   children: description
@@ -973,7 +974,7 @@ function ArticleHeroProseComponent({
             ]
           }
         ) }),
-        children && /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsx(
+        children && /* @__PURE__ */ jsx("div", { className: cn("relative", containerClassName), children: /* @__PURE__ */ jsx(
           "div",
           {
             className: cn(

package/dist/article-toc-sidebar.cjs

@@ -35,36 +35,6 @@ var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive)
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-function getNestedCardBg(parentBg, variant = "muted", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "muted":
-        return "bg-background";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-background/50";
-    }
-  } else {
-    switch (variant) {
-      case "muted":
-        return "bg-muted";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-muted/50";
-    }
-  }
-}
-function getNestedCardTextColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-foreground" : "";
-}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -938,7 +908,6 @@ var Section = React5__namespace.default.forwardRef(
 Section.displayName = "Section";
 function ArticleTocSidebarComponent({
   className,
-  containerClassName,
   articleClassName,
   sidebarClassName,
   headerClassName,
@@ -966,19 +935,18 @@ function ArticleTocSidebarComponent({
   heroMediaSlot,
   ctaTitle,
   ctaDescription,
-  ctaActions: ctaActionsProp,
-  ctaButtonText,
-  ctaButtonHref,
+  ctaActions,
   ctaSlot,
   children,
   enableTocTracking = true,
   optixFlowConfig,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "hero",
   pattern,
-  patternOpacity
+  patternOpacity,
+  patternClassName
 }) {
-  const ctaActions = ctaActionsProp ?? (ctaButtonText ? [{ label: ctaButtonText, href: ctaButtonHref || "#", variant: "default", className: "w-full" }] : []);
   const [activeSection, setActiveSection] = React5__namespace.useState(
     sections?.[0]?.id || ""
   );
@@ -1014,7 +982,14 @@ function ArticleTocSidebarComponent({
         /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { children: authorName.charAt(0) })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        authorHref ? /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: authorHref, className: "text-sm font-medium hover:underline", children: authorName }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: authorName }),
+        authorHref ? /* @__PURE__ */ jsxRuntime.jsx(
+          Pressable,
+          {
+            href: authorHref,
+            className: "text-sm font-medium hover:underline",
+            children: authorName
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: authorName }),
         /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-muted-foreground", children: [
           publishDate,
           readTime && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -1024,7 +999,15 @@ function ArticleTocSidebarComponent({
         ] })
       ] })
     ] });
-  }, [authorSlot, authorName, authorImage, authorHref, publishDate, readTime, authorClassName]);
+  }, [
+    authorSlot,
+    authorName,
+    authorImage,
+    authorHref,
+    publishDate,
+    readTime,
+    authorClassName
+  ]);
   const heroMediaContent = React5__namespace.useMemo(() => {
     if (heroMediaSlot) return heroMediaSlot;
     if (!heroImageSrc) return null;
@@ -1033,11 +1016,20 @@ function ArticleTocSidebarComponent({
       {
         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 tocContent = React5__namespace.useMemo(() => {
     if (tocSlot) return tocSlot;
     if (!sections || sections.length === 0) return null;
@@ -1065,12 +1057,20 @@ function ArticleTocSidebarComponent({
   }, [tocSlot, sections, activeSection, renderSectionLink, tocClassName]);
   const ctaContent = React5__namespace.useMemo(() => {
     if (ctaSlot) return ctaSlot;
-    if (!ctaTitle && !ctaDescription && (!ctaActions || ctaActions.length === 0)) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("rounded-lg border p-4", getNestedCardBg(background, "subtle"), getNestedCardTextColor(background), ctaClassName), children: [
+    if (!ctaTitle && !ctaDescription && (!ctaActions || ctaActions.length === 0))
+      return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("rounded-lg border p-4", ctaClassName), children: [
       ctaTitle && (typeof ctaTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-2 text-sm font-semibold", children: ctaTitle }) : ctaTitle),
-      ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-4 text-sm text-muted-foreground", children: ctaDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: ctaDescription })),
+      ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-4 text-sm", children: ctaDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: ctaDescription })),
       ctaActions && ctaActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: ctaActions.map((action, index) => {
-        const { label, icon, iconAfter, children: actionChildren, className: actionClassName, ...pressableProps } = action;
+        const {
+          label,
+          icon,
+          iconAfter,
+          children: actionChildren,
+          className: actionClassName,
+          ...pressableProps
+        } = action;
         return /* @__PURE__ */ jsxRuntime.jsx(
           Pressable,
           {
@@ -1095,18 +1095,38 @@ function ArticleTocSidebarComponent({
       spacing,
       pattern,
       patternOpacity,
-      className,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-10 lg:grid-cols-[minmax(0,1fr)_300px]", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("article", { className: cn("prose max-w-none dark:prose-invert", articleClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-8 not-prose", headerClassName), children: [
-            categoryContent,
-            title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mt-4 text-4xl font-bold tracking-tight md:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", titleClassName), children: title })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", descriptionClassName), children: description })),
-            authorContent
-          ] }),
-          heroMediaContent,
-          children
-        ] }),
+      patternClassName,
+      className: cn(pattern && "overflow-visible", className),
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-10 lg:grid-cols-[minmax(0,1fr)_300px]", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "article",
+          {
+            className: cn(
+              "prose max-w-none dark:prose-invert",
+              articleClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-8 not-prose", headerClassName), children: [
+                categoryContent,
+                title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "h1",
+                  {
+                    className: cn(
+                      "mt-4 text-2xl font-bold tracking-tight md:text-4xl",
+                      titleClassName
+                    ),
+                    children: title
+                  }
+                ) : title),
+                description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 text-lg", descriptionClassName), children: description }) : description),
+                authorContent
+              ] }),
+              heroMediaContent,
+              children
+            ]
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx("aside", { className: cn("hidden lg:block", sidebarClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky top-8 space-y-6", children: [
           tocContent,
           ctaContent

package/dist/article-toc-sidebar.d.cts

@@ -132,16 +132,6 @@ interface ArticleTocSidebarProps {
      * CTA actions
      */
     ctaActions?: ActionConfig[];
-    /**
-     * @deprecated Use ctaActions instead
-     * CTA button text (backward compatibility)
-     */
-    ctaButtonText?: string;
-    /**
-     * @deprecated Use ctaActions instead
-     * CTA button href (backward compatibility)
-     */
-    ctaButtonHref?: string;
     /**
      * Custom slot for CTA section (overrides CTA props)
      */
@@ -175,7 +165,11 @@ interface ArticleTocSidebarProps {
      * Pattern opacity (0-1)
      */
     patternOpacity?: number;
+    /**
+     * Additional CSS classes for the pattern overlay
+     */
+    patternClassName?: string;
 }
-declare function ArticleTocSidebarComponent({ className, containerClassName, articleClassName, sidebarClassName, headerClassName, titleClassName, descriptionClassName, authorClassName, tocClassName, ctaClassName, heroImageClassName, title, description, authorName, authorImage, authorHref, publishDate, readTime, authorSlot, category, categorySlot, sections, tocSlot, renderSectionLink, heroImageSrc, heroImageAlt, heroMediaSlot, ctaTitle, ctaDescription, ctaActions: ctaActionsProp, ctaButtonText, ctaButtonHref, ctaSlot, children, enableTocTracking, optixFlowConfig, background, spacing, pattern, patternOpacity, }: ArticleTocSidebarProps): react_jsx_runtime.JSX.Element;
+declare function ArticleTocSidebarComponent({ className, articleClassName, sidebarClassName, headerClassName, titleClassName, descriptionClassName, authorClassName, tocClassName, ctaClassName, heroImageClassName, title, description, authorName, authorImage, authorHref, publishDate, readTime, authorSlot, category, categorySlot, sections, tocSlot, renderSectionLink, heroImageSrc, heroImageAlt, heroMediaSlot, ctaTitle, ctaDescription, ctaActions, ctaSlot, children, enableTocTracking, optixFlowConfig, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, }: ArticleTocSidebarProps): react_jsx_runtime.JSX.Element;
 
 export { type ArticleTocSection, ArticleTocSidebarComponent as ArticleTocSidebar, type ArticleTocSidebarProps };

package/dist/article-toc-sidebar.d.ts

@@ -132,16 +132,6 @@ interface ArticleTocSidebarProps {
      * CTA actions
      */
     ctaActions?: ActionConfig[];
-    /**
-     * @deprecated Use ctaActions instead
-     * CTA button text (backward compatibility)
-     */
-    ctaButtonText?: string;
-    /**
-     * @deprecated Use ctaActions instead
-     * CTA button href (backward compatibility)
-     */
-    ctaButtonHref?: string;
     /**
      * Custom slot for CTA section (overrides CTA props)
      */
@@ -175,7 +165,11 @@ interface ArticleTocSidebarProps {
      * Pattern opacity (0-1)
      */
     patternOpacity?: number;
+    /**
+     * Additional CSS classes for the pattern overlay
+     */
+    patternClassName?: string;
 }
-declare function ArticleTocSidebarComponent({ className, containerClassName, articleClassName, sidebarClassName, headerClassName, titleClassName, descriptionClassName, authorClassName, tocClassName, ctaClassName, heroImageClassName, title, description, authorName, authorImage, authorHref, publishDate, readTime, authorSlot, category, categorySlot, sections, tocSlot, renderSectionLink, heroImageSrc, heroImageAlt, heroMediaSlot, ctaTitle, ctaDescription, ctaActions: ctaActionsProp, ctaButtonText, ctaButtonHref, ctaSlot, children, enableTocTracking, optixFlowConfig, background, spacing, pattern, patternOpacity, }: ArticleTocSidebarProps): react_jsx_runtime.JSX.Element;
+declare function ArticleTocSidebarComponent({ className, articleClassName, sidebarClassName, headerClassName, titleClassName, descriptionClassName, authorClassName, tocClassName, ctaClassName, heroImageClassName, title, description, authorName, authorImage, authorHref, publishDate, readTime, authorSlot, category, categorySlot, sections, tocSlot, renderSectionLink, heroImageSrc, heroImageAlt, heroMediaSlot, ctaTitle, ctaDescription, ctaActions, ctaSlot, children, enableTocTracking, optixFlowConfig, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, }: ArticleTocSidebarProps): react_jsx_runtime.JSX.Element;
 
 export { type ArticleTocSection, ArticleTocSidebarComponent as ArticleTocSidebar, type ArticleTocSidebarProps };

package/dist/article-toc-sidebar.js

@@ -13,36 +13,6 @@ import { Slot } from '@radix-ui/react-slot';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-function getNestedCardBg(parentBg, variant = "muted", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "muted":
-        return "bg-background";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-background/50";
-    }
-  } else {
-    switch (variant) {
-      case "muted":
-        return "bg-muted";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-muted/50";
-    }
-  }
-}
-function getNestedCardTextColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-foreground" : "";
-}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -916,7 +886,6 @@ var Section = React5__default.forwardRef(
 Section.displayName = "Section";
 function ArticleTocSidebarComponent({
   className,
-  containerClassName,
   articleClassName,
   sidebarClassName,
   headerClassName,
@@ -944,19 +913,18 @@ function ArticleTocSidebarComponent({
   heroMediaSlot,
   ctaTitle,
   ctaDescription,
-  ctaActions: ctaActionsProp,
-  ctaButtonText,
-  ctaButtonHref,
+  ctaActions,
   ctaSlot,
   children,
   enableTocTracking = true,
   optixFlowConfig,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "hero",
   pattern,
-  patternOpacity
+  patternOpacity,
+  patternClassName
 }) {
-  const ctaActions = ctaActionsProp ?? (ctaButtonText ? [{ label: ctaButtonText, href: ctaButtonHref || "#", variant: "default", className: "w-full" }] : []);
   const [activeSection, setActiveSection] = React5.useState(
     sections?.[0]?.id || ""
   );
@@ -992,7 +960,14 @@ function ArticleTocSidebarComponent({
         /* @__PURE__ */ jsx(AvatarFallback, { children: authorName.charAt(0) })
       ] }),
       /* @__PURE__ */ jsxs("div", { children: [
-        authorHref ? /* @__PURE__ */ jsx(Pressable, { href: authorHref, className: "text-sm font-medium hover:underline", children: authorName }) : /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: authorName }),
+        authorHref ? /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            href: authorHref,
+            className: "text-sm font-medium hover:underline",
+            children: authorName
+          }
+        ) : /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: authorName }),
         /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
           publishDate,
           readTime && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -1002,7 +977,15 @@ function ArticleTocSidebarComponent({
         ] })
       ] })
     ] });
-  }, [authorSlot, authorName, authorImage, authorHref, publishDate, readTime, authorClassName]);
+  }, [
+    authorSlot,
+    authorName,
+    authorImage,
+    authorHref,
+    publishDate,
+    readTime,
+    authorClassName
+  ]);
   const heroMediaContent = React5.useMemo(() => {
     if (heroMediaSlot) return heroMediaSlot;
     if (!heroImageSrc) return null;
@@ -1011,11 +994,20 @@ function ArticleTocSidebarComponent({
       {
         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 tocContent = React5.useMemo(() => {
     if (tocSlot) return tocSlot;
     if (!sections || sections.length === 0) return null;
@@ -1043,12 +1035,20 @@ function ArticleTocSidebarComponent({
   }, [tocSlot, sections, activeSection, renderSectionLink, tocClassName]);
   const ctaContent = React5.useMemo(() => {
     if (ctaSlot) return ctaSlot;
-    if (!ctaTitle && !ctaDescription && (!ctaActions || ctaActions.length === 0)) return null;
-    return /* @__PURE__ */ jsxs("div", { className: cn("rounded-lg border p-4", getNestedCardBg(background, "subtle"), getNestedCardTextColor(background), ctaClassName), children: [
+    if (!ctaTitle && !ctaDescription && (!ctaActions || ctaActions.length === 0))
+      return null;
+    return /* @__PURE__ */ jsxs("div", { className: cn("rounded-lg border p-4", ctaClassName), children: [
       ctaTitle && (typeof ctaTitle === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-2 text-sm font-semibold", children: ctaTitle }) : ctaTitle),
-      ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsx("p", { className: "mb-4 text-sm text-muted-foreground", children: ctaDescription }) : /* @__PURE__ */ jsx("div", { className: "mb-4", children: ctaDescription })),
+      ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsx("p", { className: "mb-4 text-sm", children: ctaDescription }) : /* @__PURE__ */ jsx("div", { className: "mb-4", children: ctaDescription })),
       ctaActions && ctaActions.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: ctaActions.map((action, index) => {
-        const { label, icon, iconAfter, children: actionChildren, className: actionClassName, ...pressableProps } = action;
+        const {
+          label,
+          icon,
+          iconAfter,
+          children: actionChildren,
+          className: actionClassName,
+          ...pressableProps
+        } = action;
         return /* @__PURE__ */ jsx(
           Pressable,
           {
@@ -1073,18 +1073,38 @@ function ArticleTocSidebarComponent({
       spacing,
       pattern,
       patternOpacity,
-      className,
-      children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid gap-10 lg:grid-cols-[minmax(0,1fr)_300px]", children: [
-        /* @__PURE__ */ jsxs("article", { className: cn("prose max-w-none dark:prose-invert", articleClassName), children: [
-          /* @__PURE__ */ jsxs("div", { className: cn("mb-8 not-prose", headerClassName), children: [
-            categoryContent,
-            title && (typeof title === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mt-4 text-4xl font-bold tracking-tight md:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", titleClassName), children: title })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", descriptionClassName), children: description })),
-            authorContent
-          ] }),
-          heroMediaContent,
-          children
-        ] }),
+      patternClassName,
+      className: cn(pattern && "overflow-visible", className),
+      containerClassName,
+      children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: "grid gap-10 lg:grid-cols-[minmax(0,1fr)_300px]", children: [
+        /* @__PURE__ */ jsxs(
+          "article",
+          {
+            className: cn(
+              "prose max-w-none dark:prose-invert",
+              articleClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: cn("mb-8 not-prose", headerClassName), children: [
+                categoryContent,
+                title && (typeof title === "string" ? /* @__PURE__ */ jsx(
+                  "h1",
+                  {
+                    className: cn(
+                      "mt-4 text-2xl font-bold tracking-tight md:text-4xl",
+                      titleClassName
+                    ),
+                    children: title
+                  }
+                ) : title),
+                description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-lg", descriptionClassName), children: description }) : description),
+                authorContent
+              ] }),
+              heroMediaContent,
+              children
+            ]
+          }
+        ),
         /* @__PURE__ */ jsx("aside", { className: cn("hidden lg:block", sidebarClassName), children: /* @__PURE__ */ jsxs("div", { className: "sticky top-8 space-y-6", children: [
           tocContent,
           ctaContent