@opensite/ui 2.6.2 → 2.6.4

package/dist/registry.cjs

@@ -484,7 +484,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 = React30__namespace.default.forwardRef(
   ({
@@ -21120,7 +21120,7 @@ function CarouselPortfolioHero({
   navigationClassName,
   counterClassName,
   optixFlowConfig,
-  background = "dark",
+  background,
   spacing = "none",
   pattern,
   patternOpacity,
@@ -21154,34 +21154,6 @@ function CarouselPortfolioHero({
       }
     };
   }, [resetInterval]);
-  const renderActions = () => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return actions.map((action, index) => {
-      const {
-        label,
-        icon,
-        iconAfter,
-        children,
-        className: actionClassName,
-        ...pressableProps
-      } = action;
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        Pressable,
-        {
-          asButton: true,
-          className: actionClassName,
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    });
-  };
   const currentSlide = slides?.[currentIndex];
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
@@ -21223,22 +21195,13 @@ function CarouselPortfolioHero({
             className: cn(
               "relative z-10 flex h-full w-full flex-col justify-end px-6 pb-16 md:px-8 lg:px-12"
             ),
-            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("max-w-4xl", contentClassName), children: [
-              currentSlide?.tag && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: typeof currentSlide.tag === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  className: cn(
-                    "inline-block rounded-full bg-primary px-3 py-1 text-sm font-medium",
-                    tagClassName
-                  ),
-                  children: currentSlide.tag
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: tagClassName, children: currentSlide.tag }) }),
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full", contentClassName), children: [
+              currentSlide?.tag && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: typeof currentSlide.tag === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: cn("px-3 py-1", tagClassName), children: currentSlide.tag }) : currentSlide.tag }),
               currentSlide?.title && (typeof currentSlide.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                 "h1",
                 {
                   className: cn(
-                    "text-4xl font-bold sm:text-5xl md:text-6xl text-balance text-shadow",
+                    "text-4xl font-bold sm:text-5xl md:text-6xl text-balance text-shadow-lg text-white",
                     titleClassName
                   ),
                   children: currentSlide.title
@@ -21248,7 +21211,7 @@ function CarouselPortfolioHero({
                 "p",
                 {
                   className: cn(
-                    "mt-4 text-lg opacity-80 sm:text-xl md:max-w-2xl  text-balance text-shadow",
+                    "mt-4 text-lg opacity-80 sm:text-xl md:max-w-2xl text-balance text-shadow-lg text-white",
                     descriptionClassName
                   ),
                   children: currentSlide.description
@@ -21259,7 +21222,14 @@ function CarouselPortfolioHero({
                 {
                   className: cn("mt-8 flex items-center gap-4", actionsClassName),
                   children: [
-                    renderActions(),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      BlockActions,
+                      {
+                        actions,
+                        actionsSlot,
+                        actionsClassName
+                      }
+                    ),
                     /* @__PURE__ */ jsxRuntime.jsxs(
                       "div",
                       {
@@ -21273,7 +21243,11 @@ function CarouselPortfolioHero({
                             {
                               variant: "outline",
                               size: "icon",
-                              className: cn("rounded-full border-foreground/40", getNestedCardBg(background), getNestedCardTextColor(background)),
+                              className: cn(
+                                "rounded-full border-foreground/40",
+                                getNestedCardBg(background),
+                                getNestedCardTextColor(background)
+                              ),
                               onClick: goToPrev,
                               asButton: true,
                               children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-left", size: 20 })
@@ -23889,7 +23863,6 @@ function FeatureBadgeGridSix({
                 {
                   className: cn(
                     "text-sm md:text-base",
-                    getTextColor(background, "muted"),
                     feature.descriptionClassName
                   ),
                   children: feature.description
@@ -23899,7 +23872,6 @@ function FeatureBadgeGridSix({
                 {
                   className: cn(
                     "text-sm md:text-base",
-                    getTextColor(background, "muted"),
                     feature.descriptionClassName
                   ),
                   children: feature.description
@@ -23970,16 +23942,7 @@ function FeatureBadgeGridSix({
               ),
               children: title
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: cn(
-                "text-2xl font-bold md:text-3xl lg:text-4xl",
-                titleClassName
-              ),
-              children: title
-            }
-          ))
+          ) : title)
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
@@ -24739,7 +24702,7 @@ function FeatureBentoUtilities({
       }
       return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: cardClasses, children: [
         renderTitle(),
-        card.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: getTextColor(background, "muted"), children: card.description })
+        card.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "relative", children: card.description })
       ] }, index);
     },
     [optixFlowConfig]
@@ -24768,20 +24731,10 @@ function FeatureBentoUtilities({
       className,
       containerClassName: cn("max-w-7xl", containerClassName),
       children: [
-        (labelIconElement || label) && /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: cn(
-              "flex items-center gap-2",
-              getTextColor(background, "muted"),
-              labelClassName
-            ),
-            children: [
-              labelIconElement,
-              label && (typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm", children: label }))
-            ]
-          }
-        ),
+        (labelIconElement || label) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2", labelClassName), children: [
+          labelIconElement,
+          label && (typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm", children: label }))
+        ] }),
         /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "mt-3 mb-8" }),
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
@@ -25977,7 +25930,6 @@ function FeatureBentoImageGrid({
   items,
   itemsSlot,
   className,
-  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   titleClassName,
   descriptionClassName,
   gridClassName,
@@ -25985,6 +25937,7 @@ function FeatureBentoImageGrid({
   smallCardClassName,
   optixFlowConfig,
   background,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   spacing = "py-12 md:py-32",
   pattern,
   patternOpacity,
@@ -26024,7 +25977,7 @@ function FeatureBentoImageGrid({
       const cardContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         renderItemImage(
           item,
-          "h-full max-h-[580px] w-full rounded-xl object-cover object-center"
+          "h-full max-h-[580px] w-full rounded-xl object-cover object-center shadow-lg"
         ),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 right-0 bottom-0 left-0 translate-y-10 rounded-xl bg-linear-to-t from-black to-transparent transition-transform duration-300 group-hover:translate-y-0" }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-0 flex h-full w-full flex-col justify-between px-5 md:px-8 py-6 md:py-6", children: [
@@ -26041,26 +25994,17 @@ function FeatureBentoImageGrid({
               ]
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 md:gap-5 text-white", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 md:gap-4 text-white text-shadow-lg", children: [
             item.title && (typeof item.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
               "h4",
               {
                 className: cn(
-                  "text-2xl font-medium lg:text-3xl",
-                  item.titleClassName
-                ),
-                children: item.title
-              }
-            ) : /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: cn(
-                  "text-2xl font-medium lg:text-3xl",
+                  "text-2xl font-semibold lg:text-3xl",
                   item.titleClassName
                 ),
                 children: item.title
               }
-            )),
+            ) : item.title),
             item.linkText && /* @__PURE__ */ jsxRuntime.jsxs(
               "p",
               {
@@ -26113,45 +26057,27 @@ function FeatureBentoImageGrid({
         renderItemImage(
           item,
           cn(
-            "h-full w-full rounded-xl object-cover object-center",
+            "h-full w-full rounded-xl object-cover object-center shadow-lg",
             index === 0 ? "max-h-44" : "max-h-96"
           )
         ),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 right-0 bottom-0 left-0 translate-y-10 rounded-xl bg-linear-to-t from-black to-transparent opacity-80 transition-transform duration-300 group-hover:translate-y-0" }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-0 flex h-full w-full flex-col justify-between p-7", children: [
-          hasIconBadgeContent && /* @__PURE__ */ jsxRuntime.jsxs(
-            "span",
-            {
-              className: cn(
-                "ml-auto flex w-fit items-center gap-1 p-2.5 text-sm font-semibold ",
-                item.iconBadgeClassName
-              ),
-              children: [
-                iconContent,
-                item.iconBadge
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-5 ", children: [
+          hasIconBadgeContent && /* @__PURE__ */ jsxRuntime.jsxs(Badge, { className: cn("px-2 py-1", item.iconBadgeClassName), children: [
+            iconContent,
+            item.iconBadge
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-0 text-white text-shadow-lg", children: [
             item.title && (typeof item.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
               "h4",
               {
                 className: cn(
-                  "text-2xl font-semibold lg:text-3xl",
+                  "text-xl font-semibold lg:text-2xl",
                   item.titleClassName
                 ),
                 children: item.title
               }
-            ) : /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: cn(
-                  "text-2xl font-semibold lg:text-3xl",
-                  item.titleClassName
-                ),
-                children: item.title
-              }
-            )),
+            ) : item.title),
             item.linkText && /* @__PURE__ */ jsxRuntime.jsxs(
               "p",
               {
@@ -26230,17 +26156,8 @@ function FeatureBentoImageGrid({
             ),
             children: title
           }
-        ) : /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: cn(
-              "mb-4 text-center text-4xl font-semibold text-balance",
-              titleClassName
-            ),
-            children: title
-          }
-        )),
-        description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-center text-balance", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-center text-balance", descriptionClassName), children: description })),
+        ) : title),
+        description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-center text-balance", descriptionClassName), children: description }) : description),
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
@@ -36963,11 +36880,11 @@ function BlogFilteredResultsComponent({
 }
 function BlogMasonryFeaturedComponent({
   heading,
+  description,
   posts,
   featuredSlot,
   postsSlot,
   className,
-  containerClassName,
   headingClassName,
   postsClassName,
   featuredClassName,
@@ -36975,7 +36892,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
 }) {
@@ -36984,7 +36902,7 @@ function BlogMasonryFeaturedComponent({
   const featuredPostContent = React30__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",
       {
@@ -37004,20 +36922,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 })
               ] })
             ]
           }
@@ -37048,12 +36966,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 })
@@ -37074,22 +36992,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: [
@@ -37678,7 +37598,6 @@ function BlogCarouselAppleComponent({
 function ArticleHeroProseComponent({
   post,
   className,
-  containerClassName,
   headerClassName,
   titleClassName,
   descriptionClassName,
@@ -37691,7 +37610,8 @@ function ArticleHeroProseComponent({
   dateFormat = "MMMM d, yyyy",
   optixFlowConfig,
   background,
-  spacing,
+  containerClassName,
+  spacing = "hero",
   pattern,
   patternOpacity
 }) {
@@ -37762,8 +37682,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(
@@ -37775,7 +37696,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-balance md:text-5xl",
                     titleClassName
                   ),
                   children: title
@@ -37785,7 +37706,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 md:text-xl text-balance",
                     descriptionClassName
                   ),
                   children: description
@@ -37796,7 +37717,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(
@@ -37964,7 +37885,6 @@ function ArticleSidebarStickyComponent({
 }
 function ArticleTocSidebarComponent({
   className,
-  containerClassName,
   articleClassName,
   sidebarClassName,
   headerClassName,
@@ -37992,19 +37912,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] = React30__namespace.useState(
     sections?.[0]?.id || ""
   );
@@ -38040,8 +37959,15 @@ 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 }),
-        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-muted-foreground", 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 }),
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs", children: [
           publishDate,
           readTime && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             " \xB7 ",
@@ -38050,7 +37976,15 @@ function ArticleTocSidebarComponent({
         ] })
       ] })
     ] });
-  }, [authorSlot, authorName, authorImage, authorHref, publishDate, readTime, authorClassName]);
+  }, [
+    authorSlot,
+    authorName,
+    authorImage,
+    authorHref,
+    publishDate,
+    readTime,
+    authorClassName
+  ]);
   const heroMediaContent = React30__namespace.useMemo(() => {
     if (heroMediaSlot) return heroMediaSlot;
     if (!heroImageSrc) return null;
@@ -38059,11 +37993,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 = React30__namespace.useMemo(() => {
     if (tocSlot) return tocSlot;
     if (!sections || sections.length === 0) return null;
@@ -38080,7 +38023,7 @@ function ArticleTocSidebarComponent({
             href: `#${section.id}`,
             className: cn(
               "block text-sm transition-colors",
-              isActive ? "font-medium" : "text-muted-foreground hover:text-foreground"
+              isActive ? "font-medium" : ""
             ),
             children: section.title
           },
@@ -38091,12 +38034,20 @@ function ArticleTocSidebarComponent({
   }, [tocSlot, sections, activeSection, renderSectionLink, tocClassName]);
   const ctaContent = React30__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,
           {
@@ -38121,13 +38072,24 @@ 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: [
+      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", 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 })),
+            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,