@opensite/ui 2.6.1 → 2.6.3

package/dist/feature-bento-image-grid.d.ts

@@ -167,6 +167,6 @@ interface FeatureBentoImageGridProps {
  * />
  * ```
  */
-declare function FeatureBentoImageGrid({ title, description, items, itemsSlot, className, containerClassName, titleClassName, descriptionClassName, gridClassName, largeCardClassName, smallCardClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, patternClassName, }: FeatureBentoImageGridProps): React.JSX.Element;
+declare function FeatureBentoImageGrid({ title, description, items, itemsSlot, className, titleClassName, descriptionClassName, gridClassName, largeCardClassName, smallCardClassName, optixFlowConfig, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, }: FeatureBentoImageGridProps): React.JSX.Element;
 
 export { FeatureBentoImageGrid, type FeatureBentoImageGridProps };

package/dist/feature-bento-image-grid.js

@@ -816,7 +816,6 @@ function FeatureBentoImageGrid({
   items,
   itemsSlot,
   className,
-  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   titleClassName,
   descriptionClassName,
   gridClassName,
@@ -824,6 +823,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,
@@ -1069,17 +1069,8 @@ function FeatureBentoImageGrid({
             ),
             children: title
           }
-        ) : /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              "mb-4 text-center text-4xl font-semibold text-balance",
-              titleClassName
-            ),
-            children: title
-          }
-        )),
-        description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-center text-balance", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("text-center text-balance", descriptionClassName), children: description })),
+        ) : title),
+        description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-center text-balance", descriptionClassName), children: description }) : description),
         /* @__PURE__ */ jsx(
           "div",
           {

package/dist/feature-bento-utilities.cjs

@@ -36,32 +36,6 @@ var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespace(SeparatorPrim
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-function getTextColor(parentBg, variant = "default", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-foreground/80";
-      case "subtle":
-        return "text-foreground/60";
-      case "accent":
-        return "text-accent-foreground";
-    }
-  } else {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-muted-foreground";
-      case "subtle":
-        return "text-muted-foreground/70";
-      case "accent":
-        return "text-primary";
-    }
-  }
-}
 var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
 function DynamicIcon({ apiKey, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
@@ -1001,7 +975,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]
@@ -1030,20 +1004,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",

package/dist/feature-bento-utilities.js

@@ -14,32 +14,6 @@ import { Img } from '@page-speed/img';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-function getTextColor(parentBg, variant = "default", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-foreground/80";
-      case "subtle":
-        return "text-foreground/60";
-      case "accent":
-        return "text-accent-foreground";
-    }
-  } else {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-muted-foreground";
-      case "subtle":
-        return "text-muted-foreground/70";
-      case "accent":
-        return "text-primary";
-    }
-  }
-}
 var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
 function DynamicIcon({ apiKey, ...props }) {
   return /* @__PURE__ */ jsx(Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
@@ -979,7 +953,7 @@ function FeatureBentoUtilities({
       }
       return /* @__PURE__ */ jsxs(Card, { className: cardClasses, children: [
         renderTitle(),
-        card.description && /* @__PURE__ */ jsx("p", { className: getTextColor(background, "muted"), children: card.description })
+        card.description && /* @__PURE__ */ jsx("p", { className: "relative", children: card.description })
       ] }, index);
     },
     [optixFlowConfig]
@@ -1008,20 +982,10 @@ function FeatureBentoUtilities({
       className,
       containerClassName: cn("max-w-7xl", containerClassName),
       children: [
-        (labelIconElement || label) && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn(
-              "flex items-center gap-2",
-              getTextColor(background, "muted"),
-              labelClassName
-            ),
-            children: [
-              labelIconElement,
-              label && (typeof label === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm", children: label }) : /* @__PURE__ */ jsx("div", { className: "text-sm", children: label }))
-            ]
-          }
-        ),
+        (labelIconElement || label) && /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", labelClassName), children: [
+          labelIconElement,
+          label && (typeof label === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm", children: label }) : /* @__PURE__ */ jsx("div", { className: "text-sm", children: label }))
+        ] }),
         /* @__PURE__ */ jsx(Separator, { className: "mt-3 mb-8" }),
         /* @__PURE__ */ jsxs(
           "div",

package/dist/registry.cjs

@@ -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,7 +21195,7 @@ 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: [
+            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(
                 "span",
                 {
@@ -21259,7 +21231,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 +21252,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 +23872,6 @@ function FeatureBadgeGridSix({
                 {
                   className: cn(
                     "text-sm md:text-base",
-                    getTextColor(background, "muted"),
                     feature.descriptionClassName
                   ),
                   children: feature.description
@@ -23899,7 +23881,6 @@ function FeatureBadgeGridSix({
                 {
                   className: cn(
                     "text-sm md:text-base",
-                    getTextColor(background, "muted"),
                     feature.descriptionClassName
                   ),
                   children: feature.description
@@ -23970,16 +23951,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 +24711,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 +24740,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 +25939,6 @@ function FeatureBentoImageGrid({
   items,
   itemsSlot,
   className,
-  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   titleClassName,
   descriptionClassName,
   gridClassName,
@@ -25985,6 +25946,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,
@@ -26230,17 +26192,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 +36916,11 @@ function BlogFilteredResultsComponent({
 }
 function BlogMasonryFeaturedComponent({
   heading,
+  description,
   posts,
   featuredSlot,
   postsSlot,
   className,
-  containerClassName,
   headingClassName,
   postsClassName,
   featuredClassName,
@@ -36975,7 +36928,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 +36938,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",
       {
@@ -37011,13 +36965,13 @@ function BlogMasonryFeaturedComponent({
                 }
               ),
               /* @__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 }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg", children: featuredPost.title })),
+                (featuredPost.description || featuredPost.summary) && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4", children: featuredPost.description || featuredPost.summary })
               ] })
             ]
           }
@@ -37074,22 +37028,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-6 md:mb-12 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", 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 +37634,6 @@ function BlogCarouselAppleComponent({
 function ArticleHeroProseComponent({
   post,
   className,
-  containerClassName,
   headerClassName,
   titleClassName,
   descriptionClassName,
@@ -37691,7 +37646,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
 }) {
@@ -37762,8 +37718,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 +37732,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
@@ -37785,7 +37742,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
@@ -37796,7 +37753,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 +37921,6 @@ function ArticleSidebarStickyComponent({
 }
 function ArticleTocSidebarComponent({
   className,
-  containerClassName,
   articleClassName,
   sidebarClassName,
   headerClassName,
@@ -37992,19 +37948,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,7 +37995,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: [
@@ -38050,7 +38012,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 +38029,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;
@@ -38091,12 +38070,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,18 +38108,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