@opensite/ui 2.6.2 → 2.6.4

package/dist/article-hero-prose.js

@@ -789,7 +789,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 = React__default.forwardRef(
   ({
@@ -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,
+  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-balance 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 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-sidebar-sticky.cjs

@@ -815,7 +815,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 = React__namespace.default.forwardRef(
   ({

package/dist/article-sidebar-sticky.js

@@ -793,7 +793,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 = React__default.forwardRef(
   ({

package/dist/article-split-animated.cjs

@@ -833,7 +833,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 = React__namespace.default.forwardRef(
   ({

package/dist/article-split-animated.js

@@ -810,7 +810,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 = React__default.forwardRef(
   ({

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:")) {
@@ -873,7 +843,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 = React5__namespace.default.forwardRef(
   ({
@@ -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,8 +982,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 ",
@@ -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;
@@ -1054,7 +1046,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
           },
@@ -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,13 +1095,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,

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:")) {
@@ -851,7 +821,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 = React5__default.forwardRef(
   ({
@@ -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,8 +960,15 @@ 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 }),
-        /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", 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 }),
+        /* @__PURE__ */ jsxs("p", { className: "text-xs", children: [
           publishDate,
           readTime && /* @__PURE__ */ jsxs(Fragment, { children: [
             " \xB7 ",
@@ -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;
@@ -1032,7 +1024,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
           },
@@ -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,13 +1073,24 @@ 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: [
+      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", 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 })),
+            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,

package/dist/auto-scroll-carousel.cjs

@@ -903,7 +903,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 = React3__namespace.default.forwardRef(
   ({

package/dist/auto-scroll-carousel.js

@@ -878,7 +878,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 = React3__default.forwardRef(
   ({

package/dist/banner-announcement-dismissible.cjs

@@ -767,7 +767,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 = React__namespace.default.forwardRef(
   ({

package/dist/banner-announcement-dismissible.js

@@ -746,7 +746,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 = React__default.forwardRef(
   ({

package/dist/banner-countdown-sale.cjs

@@ -327,7 +327,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 = React__default.default.forwardRef(
   ({

package/dist/banner-countdown-sale.js

@@ -321,7 +321,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 = React.forwardRef(
   ({

package/dist/banner-delivery-countdown.cjs

@@ -348,7 +348,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 = React__namespace.default.forwardRef(
   ({

package/dist/banner-delivery-countdown.js

@@ -327,7 +327,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 = React__default.forwardRef(
   ({