@opensite/ui 2.6.5 → 2.6.6

package/dist/registry.cjs

@@ -37620,7 +37620,7 @@ function ArticleHeroProseComponent({
   dateFormat = "MMMM d, yyyy",
   optixFlowConfig,
   background,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   spacing = "hero",
   pattern,
   patternOpacity
@@ -37744,7 +37744,6 @@ function ArticleHeroProseComponent({
 }
 function ArticleSidebarStickyComponent({
   className,
-  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   sidebarClassName,
   articleClassName,
   titleClassName,
@@ -37769,7 +37768,8 @@ function ArticleSidebarStickyComponent({
   children,
   optixFlowConfig,
   background,
-  spacing = "py-6 md:py-32",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "hero",
   pattern,
   patternOpacity,
   sidebarContent
@@ -37865,7 +37865,7 @@ function ArticleSidebarStickyComponent({
           "article",
           {
             className: cn(
-              "prose max-w-none dark:prose-invert",
+              getProseClassName(background, "max-w-none"),
               articleClassName
             ),
             children: [
@@ -38087,25 +38087,34 @@ function ArticleTocSidebarComponent({
       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-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.jsxs(
+          "article",
+          {
+            className: cn(
+              getProseClassName(background, "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-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
@@ -38116,7 +38125,6 @@ function ArticleTocSidebarComponent({
 }
 function ArticleBreadcrumbSocialComponent({
   className,
-  containerClassName,
   breadcrumbClassName,
   articleClassName,
   sidebarClassName,
@@ -38128,10 +38136,7 @@ function ArticleBreadcrumbSocialComponent({
   breadcrumbsSlot,
   currentPage,
   title,
-  author: authorProp,
-  authorName,
-  authorImage,
-  authorRole,
+  author,
   authorSlot,
   publishDate,
   readTime,
@@ -38146,11 +38151,11 @@ function ArticleBreadcrumbSocialComponent({
   enableBackToTop,
   optixFlowConfig,
   background,
-  spacing = "py-6 md:py-32",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "hero",
   pattern,
   patternOpacity
 }) {
-  const author = authorProp ?? (authorName ? { name: authorName, image: authorImage, role: authorRole } : void 0);
   const [activeSection, setActiveSection] = React30__namespace.useState(
     sections?.[0]?.id || ""
   );
@@ -38277,15 +38282,16 @@ function ArticleBreadcrumbSocialComponent({
       pattern,
       patternOpacity,
       className,
+      containerClassName,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
           breadcrumbsContent,
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-10 lg:grid-cols-[minmax(0,1fr)_280px]", children: [
             children && /* @__PURE__ */ jsxRuntime.jsxs(
               "article",
               {
                 className: cn(
-                  "prose max-w-none dark:prose-invert",
+                  getProseClassName(background, "max-w-none"),
                   articleClassName
                 ),
                 children: [
@@ -38298,7 +38304,7 @@ function ArticleBreadcrumbSocialComponent({
                       ),
                       children: title
                     }
-                  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
+                  ) : title),
                   authorContent,
                   /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "my-8" }),
                   heroMediaContent,
@@ -38324,7 +38330,6 @@ function ArticleBreadcrumbSocialComponent({
 }
 function ArticleCompactTocComponent({
   className,
-  containerClassName,
   breadcrumbClassName,
   contentClassName,
   titleClassName,
@@ -38353,7 +38358,8 @@ function ArticleCompactTocComponent({
   enableTocTracking = true,
   optixFlowConfig,
   background,
-  spacing = "py-6 md:py-32",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "hero",
   pattern,
   patternOpacity
 }) {
@@ -38461,7 +38467,7 @@ function ArticleCompactTocComponent({
         PopoverContent,
         {
           align: "start",
-          className: "w-[var(--radix-popover-trigger-width)] space-y-2 p-4",
+          className: "w-(--radix-popover-trigger-width) space-y-2 p-4",
           children: renderTocLinks(() => setIsTocOpen(false))
         }
       )
@@ -38514,11 +38520,12 @@ function ArticleCompactTocComponent({
       pattern,
       patternOpacity,
       className: cn("relative", className),
+      containerClassName,
       children: [
         desktopTocContent,
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
           breadcrumbsContent,
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-3xl", contentClassName), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
             title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
               "h1",
               {
@@ -38528,7 +38535,7 @@ function ArticleCompactTocComponent({
                 ),
                 children: title
               }
-            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
+            ) : title),
             (authorName || publishDate || readTime) && /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
               {
@@ -38552,7 +38559,7 @@ function ArticleCompactTocComponent({
               "article",
               {
                 className: cn(
-                  "prose max-w-none dark:prose-invert",
+                  getProseClassName(background, "max-w-none"),
                   articleClassName
                 ),
                 children: [
@@ -38569,7 +38576,6 @@ function ArticleCompactTocComponent({
 }
 function ArticleChaptersAuthorComponent({
   className,
-  containerClassName,
   breadcrumbClassName,
   headerClassName,
   titleClassName,
@@ -38595,25 +38601,17 @@ function ArticleChaptersAuthorComponent({
   heroMediaSlot,
   conclusionTitle,
   conclusionDescription,
-  conclusionActions: conclusionActionsProp,
-  conclusionButtonText,
-  conclusionButtonHref,
+  conclusionActions,
   conclusionSlot,
   children,
   enableChapterTracking = true,
   optixFlowConfig,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "hero",
   pattern,
   patternOpacity
 }) {
-  const conclusionActions = conclusionActionsProp ?? (conclusionButtonText ? [
-    {
-      label: conclusionButtonText,
-      href: conclusionButtonHref || "#",
-      variant: "default"
-    }
-  ] : []);
   const [activeChapter, setActiveChapter] = React30__namespace.useState(
     chapters?.[0]?.id || ""
   );
@@ -38664,10 +38662,20 @@ function ArticleChaptersAuthorComponent({
             href: `#${chapter.id}`,
             className: cn(
               "flex items-center gap-3 text-sm transition-colors",
-              isActive ? "font-medium" : "text-muted-foreground hover:text-foreground"
+              isActive ? "font-medium" : ""
             ),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("flex h-6 w-6 items-center justify-center rounded-full text-xs", getNestedCardBg(background), getNestedCardTextColor(background)), children: chapter.number }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: cn(
+                    "flex h-6 w-6 items-center justify-center rounded-full text-xs",
+                    getNestedCardBg(background),
+                    getNestedCardTextColor(background)
+                  ),
+                  children: chapter.number
+                }
+              ),
               chapter.title
             ]
           },
@@ -38694,7 +38702,7 @@ function ArticleChaptersAuthorComponent({
             {
               href: link.href,
               className: cn(
-                "flex h-8 w-8 items-center justify-center rounded-md border hover:bg-muted",
+                "flex h-8 w-8 items-center justify-center rounded-md border",
                 link.className
               ),
               "aria-label": link["aria-label"],
@@ -38780,7 +38788,7 @@ function ArticleChaptersAuthorComponent({
         ),
         children: [
           conclusionTitle && (typeof conclusionTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold", children: conclusionTitle }) : conclusionTitle),
-          conclusionDescription && (typeof conclusionDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-muted-foreground", children: conclusionDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: conclusionDescription })),
+          conclusionDescription && (typeof conclusionDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2", children: conclusionDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: conclusionDescription })),
           conclusionActions && conclusionActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 flex flex-wrap gap-2", children: conclusionActions.map((action, index) => {
             const {
               label,
@@ -38823,7 +38831,8 @@ function ArticleChaptersAuthorComponent({
       pattern,
       patternOpacity,
       className,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
         breadcrumbsContent,
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 text-center px-8 md:px-0", headerClassName), children: [
           title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -38835,17 +38844,17 @@ function ArticleChaptersAuthorComponent({
               ),
               children: title
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
+          ) : title),
           subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "p",
             {
               className: cn(
-                "mt-4 text-lg text-muted-foreground md:text-xl text-balance",
+                "mt-4 text-lg md:text-xl text-balance",
                 subtitleClassName
               ),
               children: subtitle
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", subtitleClassName), children: subtitle }))
+          ) : subtitle)
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-10 lg:grid-cols-[280px_minmax(0,1fr)]", children: [
           /* @__PURE__ */ jsxRuntime.jsx("aside", { className: cn("hidden lg:block", sidebarClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky top-8 space-y-6", children: [
@@ -38856,7 +38865,7 @@ function ArticleChaptersAuthorComponent({
             "article",
             {
               className: cn(
-                "prose max-w-none dark:prose-invert",
+                getProseClassName(background, "max-w-none"),
                 articleClassName
               ),
               children: [
@@ -46668,12 +46677,12 @@ function CaseStudyProseSidebar({
   companyLogoSlot,
   details,
   sidebarSlot,
-  background = "white",
-  spacing = "xl",
+  background,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "hero",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
   articleClassName,
   heroImageClassName,
   proseClassName,
@@ -46691,16 +46700,25 @@ function CaseStudyProseSidebar({
       {
         src: heroImageSrc,
         alt: heroImageAlt,
-        className: cn("mb-8 aspect-video w-full max-w-3xl rounded-lg border object-cover", heroImageClassName),
+        className: cn(
+          "mb-8 aspect-video w-full max-w-3xl rounded-lg border object-cover",
+          heroImageClassName
+        ),
         loading: "lazy",
         optixFlowConfig
       }
     );
-  }, [heroMediaSlot, heroImageSrc, heroImageAlt, heroImageClassName, optixFlowConfig]);
+  }, [
+    heroMediaSlot,
+    heroImageSrc,
+    heroImageAlt,
+    heroImageClassName,
+    optixFlowConfig
+  ]);
   const contentArea = React30.useMemo(() => {
     if (contentSlot) return contentSlot;
     if (!content) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("prose dark:prose-invert", proseClassName), children: content });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(getProseClassName(background, ""), proseClassName), children: content });
   }, [contentSlot, content, proseClassName]);
   const logoContent = React30.useMemo(() => {
     if (companyLogoSlot) return companyLogoSlot;
@@ -46715,14 +46733,30 @@ function CaseStudyProseSidebar({
         optixFlowConfig
       }
     ) });
-  }, [companyLogoSlot, companyLogoSrc, companyLogoAlt, companyLogoClassName, optixFlowConfig]);
-  const renderDetailItem = React30.useCallback((detail, index, isFirstAfterBorder = false) => {
-    const baseClassName = isFirstAfterBorder ? "mb-5 w-full border-t border-border px-6 pt-5 last:mb-0" : "mb-5 px-6 last:mb-0";
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(baseClassName, detail.className, detailItemClassName), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 text-xs font-semibold", children: detail.label }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden text-xs text-muted-foreground md:text-sm", children: detail.href ? /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: detail.href, className: "underline", children: detail.value }) : detail.value })
-    ] }, index);
-  }, [detailItemClassName]);
+  }, [
+    companyLogoSlot,
+    companyLogoSrc,
+    companyLogoAlt,
+    companyLogoClassName,
+    optixFlowConfig
+  ]);
+  const renderDetailItem = React30.useCallback(
+    (detail, index, isFirstAfterBorder = false) => {
+      const baseClassName = isFirstAfterBorder ? "mb-5 w-full border-t border-border px-6 pt-5 last:mb-0" : "mb-5 px-6 last:mb-0";
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(baseClassName, detail.className, detailItemClassName),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 text-xs font-semibold", children: detail.label }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden text-xs md:text-sm", children: detail.href ? /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: detail.href, className: "underline", children: detail.value }) : detail.value })
+          ]
+        },
+        index
+      );
+    },
+    [detailItemClassName]
+  );
   const detailsContent = React30.useMemo(() => {
     if (!details || details.length === 0) return null;
     return details.map((detail, index) => {
@@ -46733,20 +46767,36 @@ function CaseStudyProseSidebar({
   const sidebarContent = React30.useMemo(() => {
     if (sidebarSlot) return sidebarSlot;
     if (!logoContent && !detailsContent) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("aside", { className: cn("lg:max-w-[300px]", sidebarClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-start rounded-lg border border-border py-6 md:py-8", getNestedCardBg(background, "accent"), getNestedCardTextColor(background), sidebarCardClassName), children: [
-      logoContent,
-      detailsContent
-    ] }) });
-  }, [sidebarSlot, logoContent, detailsContent, sidebarClassName, sidebarCardClassName]);
+    return /* @__PURE__ */ jsxRuntime.jsx("aside", { className: cn("lg:max-w-[300px]", sidebarClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "flex flex-col items-start rounded-lg border border-border py-6 md:py-8",
+          sidebarCardClassName
+        ),
+        children: [
+          logoContent,
+          detailsContent
+        ]
+      }
+    ) });
+  }, [
+    sidebarSlot,
+    logoContent,
+    detailsContent,
+    sidebarClassName,
+    sidebarCardClassName
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
       background,
       spacing,
-      className: cn(className),
+      className: cn(pattern && "overflow-visible", className),
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container flex flex-col gap-12 lg:flex-row lg:gap-24", containerClassName), children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "container flex flex-col gap-12 lg:flex-row lg:gap-24", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("article", { className: cn("mx-auto", articleClassName), children: [
           heroMediaContent,
           contentArea
@@ -46855,16 +46905,31 @@ function CaseStudyTocSocialSidebar({
       {
         src: heroImageSrc,
         alt: heroImageAlt,
-        className: cn("max-h-[524px] w-full rounded-xl object-cover lg:w-auto", heroImageClassName),
+        className: cn(
+          "max-h-[524px] w-full rounded-xl object-cover lg:w-auto",
+          heroImageClassName
+        ),
         loading: "lazy",
         optixFlowConfig
       }
     );
-  }, [heroMediaSlot, heroImageSrc, heroImageAlt, heroImageClassName, optixFlowConfig]);
+  }, [
+    heroMediaSlot,
+    heroImageSrc,
+    heroImageAlt,
+    heroImageClassName,
+    optixFlowConfig
+  ]);
   const authorContent = React30.useMemo(() => {
     if (authorSlot) return authorSlot;
     if (!author) return null;
-    const avatarContent = author.avatarSlot ?? (author.avatarSrc && /* @__PURE__ */ jsxRuntime.jsx(Avatar, { className: "size-16 rounded-xl border", children: /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: author.avatarSrc, alt: typeof author.name === "string" ? author.name : "Author" }) }));
+    const avatarContent = author.avatarSlot ?? (author.avatarSrc && /* @__PURE__ */ jsxRuntime.jsx(Avatar, { className: "size-16 rounded-xl border", children: /* @__PURE__ */ jsxRuntime.jsx(
+      AvatarImage,
+      {
+        src: author.avatarSrc,
+        alt: typeof author.name === "string" ? author.name : "Author"
+      }
+    ) }));
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-16", authorClassName), children: [
       authorLabel && (typeof authorLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium", children: authorLabel }) : authorLabel),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-4 flex items-center gap-4", author.className), children: [
@@ -46889,7 +46954,13 @@ function CaseStudyTocSocialSidebar({
         optixFlowConfig
       }
     );
-  }, [companyLogoSlot, companyLogoSrc, companyLogoAlt, companyLogoClassName, optixFlowConfig]);
+  }, [
+    companyLogoSlot,
+    companyLogoSrc,
+    companyLogoAlt,
+    companyLogoClassName,
+    optixFlowConfig
+  ]);
   const detailsContent = React30.useMemo(() => {
     if (!details || details.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-6 grid grid-cols-2 gap-5 lg:grid-cols-1", children: details.map((detail, index) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -46902,7 +46973,14 @@ function CaseStudyTocSocialSidebar({
         ),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "font-semibold", children: detail.label }),
-          detail.href ? /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: detail.href, className: "mt-1 text-sm text-muted-foreground underline", children: detail.value }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: detail.value })
+          detail.href ? /* @__PURE__ */ jsxRuntime.jsx(
+            Pressable,
+            {
+              href: detail.href,
+              className: "mt-1 text-sm text-muted-foreground underline",
+              children: detail.value
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: detail.value })
         ]
       },
       index
@@ -46917,7 +46995,10 @@ function CaseStudyTocSocialSidebar({
         Pressable,
         {
           href: social.href,
-          className: cn("text-muted-foreground hover:text-primary", social.className),
+          className: cn(
+            "text-muted-foreground hover:text-primary",
+            social.className
+          ),
           "aria-label": social.label,
           children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: social.icon, size: 20, className: "size-5" })
         },
@@ -46927,33 +47008,65 @@ function CaseStudyTocSocialSidebar({
   }, [socialLinksSlot, socialLinks, socialLinksLabel, socialLinksClassName]);
   const sidebarContent = React30.useMemo(() => {
     if (sidebarSlot) return sidebarSlot;
-    return /* @__PURE__ */ jsxRuntime.jsxs("aside", { className: cn("mx-auto h-fit max-w-prose lg:sticky lg:top-10 lg:mx-0 lg:w-64 lg:max-w-none", sidebarClassName), children: [
-      logoContent,
-      detailsContent,
-      socialLinksContent
-    ] });
-  }, [sidebarSlot, sidebarClassName, logoContent, detailsContent, socialLinksContent]);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "aside",
+      {
+        className: cn(
+          "mx-auto h-fit max-w-prose lg:sticky lg:top-10 lg:mx-0 lg:w-64 lg:max-w-none",
+          sidebarClassName
+        ),
+        children: [
+          logoContent,
+          detailsContent,
+          socialLinksContent
+        ]
+      }
+    );
+  }, [
+    sidebarSlot,
+    sidebarClassName,
+    logoContent,
+    detailsContent,
+    socialLinksContent
+  ]);
   const summaryContent = React30.useMemo(() => {
     if (summarySlot) return summarySlot;
-    if (!problem && !approach && (!outcomes || outcomes.length === 0)) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-x-10 gap-y-7 rounded-3xl border p-6 lg:grid-cols-2 lg:gap-y-10 lg:border-none lg:p-0", summaryClassName), children: [
-      problem && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-semibold", children: "Problem" }),
-        typeof problem === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-3 text-muted-foreground", children: problem }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 text-muted-foreground", children: problem })
-      ] }),
-      problem && approach && /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "w-full lg:hidden" }),
-      approach && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-semibold", children: "Approach" }),
-        typeof approach === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-3 text-muted-foreground", children: approach }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 text-muted-foreground", children: approach })
-      ] }),
-      outcomes && outcomes.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t pt-10 lg:col-span-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-semibold", children: "Outcomes" }),
-        /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "mt-3 grid gap-x-10 gap-y-3 lg:grid-cols-2", children: outcomes.map((outcome, index) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: cn("flex gap-3", outcome.className), children: [
-          outcome.icon ?? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: outcome.iconName ?? "lucide/check-circle-2", size: 20, className: "mt-0.5 size-5 shrink-0" }),
-          typeof outcome.text === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold", children: outcome.text }) : outcome.text
-        ] }, index)) })
-      ] })
-    ] });
+    if (!problem && !approach && (!outcomes || outcomes.length === 0))
+      return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "grid gap-x-10 gap-y-7 rounded-3xl border p-6 lg:grid-cols-2 lg:gap-y-10 lg:border-none lg:p-0",
+          summaryClassName
+        ),
+        children: [
+          problem && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-semibold", children: "Problem" }),
+            typeof problem === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-3 ", children: problem }) : problem
+          ] }),
+          problem && approach && /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "w-full lg:hidden" }),
+          approach && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-semibold", children: "Approach" }),
+            typeof approach === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-3", children: approach }) : approach
+          ] }),
+          outcomes && outcomes.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t pt-10 lg:col-span-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-semibold", children: "Outcomes" }),
+            /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "mt-3 grid gap-x-10 gap-y-3 lg:grid-cols-2", children: outcomes.map((outcome, index) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: cn("flex gap-3", outcome.className), children: [
+              outcome.icon ?? /* @__PURE__ */ jsxRuntime.jsx(
+                DynamicIcon,
+                {
+                  name: outcome.iconName ?? "lucide/check-circle-2",
+                  size: 20,
+                  className: "mt-0.5 size-5 shrink-0"
+                }
+              ),
+              typeof outcome.text === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold", children: outcome.text }) : outcome.text
+            ] }, index)) })
+          ] })
+        ]
+      }
+    );
   }, [summarySlot, problem, approach, outcomes, summaryClassName]);
   const contentSections = React30.useMemo(() => {
     if (contentSlot) return contentSlot;
@@ -46963,7 +47076,11 @@ function CaseStudyTocSocialSidebar({
       {
         id: section.id,
         ref: (ref) => addSectionRef(section.id, ref),
-        className: cn("prose mb-8 dark:prose-invert", section.className, proseClassName),
+        className: cn(
+          getProseClassName(background, "mb-8"),
+          section.className,
+          proseClassName
+        ),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("h2", { children: section.title }),
           section.content
@@ -46975,51 +47092,88 @@ function CaseStudyTocSocialSidebar({
   const tocContent = React30.useMemo(() => {
     if (tocSlot) return tocSlot;
     if (!sections || sections.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("sticky top-8 hidden h-fit shrink-0 lg:block", tocClassName), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2 text-sm", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/align-left", size: 16, className: "h-4 w-4" }),
-        tocLabel
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "mt-2 text-sm", children: /* @__PURE__ */ jsxRuntime.jsx("ul", { children: sections.map((section) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
-        Pressable,
-        {
-          href: `#${section.id}`,
-          className: cn(
-            "block py-1 transition-colors duration-200",
-            activeSection === section.id ? "font-medium text-primary" : "text-muted-foreground hover:text-primary"
-          ),
-          children: section.title
-        }
-      ) }, section.id)) }) })
-    ] });
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "sticky top-8 hidden h-fit shrink-0 lg:block",
+          tocClassName
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2 text-sm", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/align-left", size: 16, className: "h-4 w-4" }),
+            tocLabel
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "mt-2 text-sm", children: /* @__PURE__ */ jsxRuntime.jsx("ul", { children: sections.map((section) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
+            Pressable,
+            {
+              href: `#${section.id}`,
+              className: cn(
+                "block py-1 transition-colors duration-200 underline",
+                activeSection === section.id ? "font-medium" : "hover:opacity-80"
+              ),
+              children: section.title
+            }
+          ) }, section.id)) }) })
+        ]
+      }
+    );
   }, [tocSlot, sections, tocClassName, tocLabel, activeSection]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
       background,
       spacing,
-      className: cn(className),
+      className: cn(pattern && "overflow-visible", className),
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto flex max-w-prose flex-col items-center justify-between gap-10 lg:max-w-none lg:flex-row", headerClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            breadcrumbsContent,
-            title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mt-10 text-5xl font-semibold text-balance lg:text-7xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-10", titleClassName), children: title })),
-            authorContent
-          ] }),
-          heroMediaContent
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative mt-20 flex flex-col gap-x-6 gap-y-16 lg:flex-row", layoutClassName), children: [
-          sidebarContent,
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex", mainClassName), children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-prose lg:max-w-4xl lg:px-20", children: [
-              summaryContent,
-              contentSections
-            ] }),
-            tocContent
-          ] })
-        ] })
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "mx-auto flex max-w-prose flex-col items-center justify-between gap-10 lg:max-w-none lg:flex-row",
+              headerClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                breadcrumbsContent,
+                title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "h1",
+                  {
+                    className: cn(
+                      "mt-10 text-5xl font-semibold text-balance lg:text-7xl",
+                      titleClassName
+                    ),
+                    children: title
+                  }
+                ) : title),
+                authorContent
+              ] }),
+              heroMediaContent
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "relative mt-20 flex flex-col gap-x-6 gap-y-16 lg:flex-row",
+              layoutClassName
+            ),
+            children: [
+              sidebarContent,
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex", mainClassName), children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-prose lg:max-w-4xl lg:px-20", children: [
+                  summaryContent,
+                  contentSections
+                ] }),
+                tocContent
+              ] })
+            ]
+          }
+        )
       ] })
     }
   );
@@ -47085,24 +47239,62 @@ function CaseStudyStatsMetrics({
       {
         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
+        ),
         loading: "lazy",
         optixFlowConfig
       }
     );
-  }, [heroMediaSlot, heroImageSrc, heroImageAlt, heroImageClassName, optixFlowConfig]);
+  }, [
+    heroMediaSlot,
+    heroImageSrc,
+    heroImageAlt,
+    heroImageClassName,
+    optixFlowConfig
+  ]);
   const statsContent = React30.useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-8 grid grid-cols-2 gap-5 lg:grid-cols-4", statsClassName), children: stats.map((stat, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-2", stat.className, statItemClassName), children: [
-      typeof stat.value === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-4xl font-semibold sm:text-5xl", children: stat.value }) : stat.value,
-      stat.label && (typeof stat.label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: stat.label }) : stat.label)
-    ] }, index)) });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "mb-8 grid grid-cols-2 gap-5 lg:grid-cols-4",
+          statsClassName
+        ),
+        children: stats.map((stat, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "flex flex-col gap-2",
+              stat.className,
+              statItemClassName
+            ),
+            children: [
+              typeof stat.value === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-4xl font-semibold sm:text-5xl", children: stat.value }) : stat.value,
+              stat.label && (typeof stat.label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: stat.label }) : stat.label)
+            ]
+          },
+          index
+        ))
+      }
+    );
   }, [statsSlot, stats, statsClassName, statItemClassName]);
   const contentArea = React30.useMemo(() => {
     if (contentSlot) return contentSlot;
     if (!content) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("prose mb-8 max-w-full lg:max-w-prose dark:prose-invert", proseClassName), children: content });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          getProseClassName(background, "mb-8 max-w-full"),
+          proseClassName
+        ),
+        children: content
+      }
+    );
   }, [contentSlot, content, proseClassName]);
   const logoContent = React30.useMemo(() => {
     if (companyLogoSlot) return companyLogoSlot;
@@ -47117,7 +47309,13 @@ function CaseStudyStatsMetrics({
         optixFlowConfig
       }
     );
-  }, [companyLogoSlot, companyLogoSrc, companyLogoAlt, companyLogoClassName, optixFlowConfig]);
+  }, [
+    companyLogoSlot,
+    companyLogoSrc,
+    companyLogoAlt,
+    companyLogoClassName,
+    optixFlowConfig
+  ]);
   const solutionContent = React30.useMemo(() => {
     if (solutionSlot) return solutionSlot;
     if (!solutionLabel && !solutionHref) return null;
@@ -47139,67 +47337,119 @@ function CaseStudyStatsMetrics({
   const ctaContent = React30.useMemo(() => {
     if (ctaSlot) return ctaSlot;
     if (!ctaAction) return null;
-    const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = ctaAction;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Pressable,
-      {
-        asButton: true,
-        className: actionClassName,
-        ...pressableProps,
-        children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          icon,
-          label,
-          iconAfter
-        ] })
-      }
-    );
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: actionClassName,
+      ...pressableProps
+    } = ctaAction;
+    return /* @__PURE__ */ jsxRuntime.jsx(Pressable, { asButton: true, className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      icon,
+      label,
+      iconAfter
+    ] }) });
   }, [ctaSlot, ctaAction]);
   const sidebarContent = React30.useMemo(() => {
     if (sidebarSlot) return sidebarSlot;
-    if (!logoContent && !overview && !sector && !solutionContent && !ctaContent) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("h-fit lg:sticky lg:top-8 lg:max-w-80", sidebarClassName), children: [
-      logoContent,
-      overview && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-1.5 text-sm font-semibold", children: "Overview" }),
-        typeof overview === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-5 text-sm text-muted-foreground", children: overview }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-5 text-sm text-muted-foreground", children: overview })
-      ] }),
-      sector && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-1.5 text-sm font-semibold", children: "Sector" }),
-        typeof sector === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-5 text-sm text-muted-foreground", children: sector }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-5 text-sm text-muted-foreground", children: sector })
-      ] }),
-      solutionContent && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-1.5 text-sm font-semibold", children: "Solution" }),
-        solutionContent
-      ] }),
-      (overview || sector || solutionContent) && ctaContent && /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "my-5" }),
-      ctaContent && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        ctaLabel && (typeof ctaLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-3 text-sm font-semibold", children: ctaLabel }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-3 text-sm font-semibold", children: ctaLabel })),
-        ctaContent
-      ] })
-    ] });
-  }, [sidebarSlot, logoContent, overview, sector, solutionContent, ctaContent, ctaLabel, sidebarClassName]);
+    if (!logoContent && !overview && !sector && !solutionContent && !ctaContent)
+      return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn("h-fit lg:sticky lg:top-8 lg:max-w-80", sidebarClassName),
+        children: [
+          logoContent,
+          overview && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-1.5 text-sm font-semibold", children: "Overview" }),
+            typeof overview === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-5 text-sm", children: overview }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-5 text-sm", children: overview })
+          ] }),
+          sector && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-1.5 text-sm font-semibold", children: "Sector" }),
+            typeof sector === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-5 text-sm text-muted-foreground", children: sector }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-5 text-sm text-muted-foreground", children: sector })
+          ] }),
+          solutionContent && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-1.5 text-sm font-semibold", children: "Solution" }),
+            solutionContent
+          ] }),
+          (overview || sector || solutionContent) && ctaContent && /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "my-5" }),
+          ctaContent && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            ctaLabel && (typeof ctaLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-3 text-sm font-semibold", children: ctaLabel }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-3 text-sm font-semibold", children: ctaLabel })),
+            ctaContent
+          ] })
+        ]
+      }
+    );
+  }, [
+    sidebarSlot,
+    logoContent,
+    overview,
+    sector,
+    solutionContent,
+    ctaContent,
+    ctaLabel,
+    sidebarClassName
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
       background,
       spacing,
-      className: cn(className),
+      className: cn(pattern && "overflow-visible", className),
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-7xl", contentWrapperClassName), children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-7xl", contentWrapperClassName), children: [
         breadcrumbsContent,
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative flex-col gap-10 lg:flex lg:flex-row lg:justify-between", layoutClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("lg:max-w-[692px]", mainClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max lg:col-span-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-3xl font-extrabold text-pretty", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
-              subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-2 text-lg text-muted-foreground", subtitleClassName), children: subtitle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-2 text-lg text-muted-foreground", subtitleClassName), children: subtitle })),
-              heroMediaContent,
-              statsContent
-            ] }),
-            contentArea
-          ] }) }),
-          sidebarContent
-        ] })
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "relative flex-col gap-10 lg:flex lg:flex-row lg:justify-between",
+              layoutClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("lg:max-w-[692px]", mainClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max lg:col-span-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                  title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "h1",
+                    {
+                      className: cn(
+                        "text-3xl font-extrabold text-pretty",
+                        titleClassName
+                      ),
+                      children: title
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
+                  subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "p",
+                    {
+                      className: cn(
+                        "mt-2 text-lg text-muted-foreground",
+                        subtitleClassName
+                      ),
+                      children: subtitle
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "mt-2 text-lg text-muted-foreground",
+                        subtitleClassName
+                      ),
+                      children: subtitle
+                    }
+                  )),
+                  heroMediaContent,
+                  statsContent
+                ] }),
+                contentArea
+              ] }) }),
+              sidebarContent
+            ]
+          }
+        )
       ] }) })
     }
   );
@@ -83124,7 +83374,7 @@ function ProjectDetailCaseStudyProse(props) {
       Pressable,
       {
         className: cn(
-          "inline-flex items-center gap-2 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground",
+          "inline-flex items-center gap-2 text-sm font-medium transition-colors",
           actionClassName
         ),
         ...pressableProps,
@@ -83144,7 +83394,8 @@ function ProjectDetailCaseStudyProse(props) {
       pattern,
       patternOpacity,
       className,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("article", { className: cn("max-w-4xl mx-auto", containerClassName), children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("article", { className: cn("max-w-4xl mx-auto"), children: [
         (backActionSlot || backAction) && /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.div, { ...fadeInUp2, className: "mb-12", children: renderedBackAction }),
         /* @__PURE__ */ jsxRuntime.jsxs(
           framerMotion.motion.header,
@@ -83152,12 +83403,8 @@ function ProjectDetailCaseStudyProse(props) {
             ...fadeInUp2,
             className: cn("mb-16 space-y-6", headerClassName),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-4 text-sm text-muted-foreground", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
-                  "rounded-full px-3 py-1 font-medium",
-                  getNestedCardBg(background),
-                  getNestedCardTextColor(background)
-                ), children: category }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-4 text-sm", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("rounded-full px-3 py-1 font-medium"), children: category }),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { children: year }),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children: "|" }),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { children: client })
@@ -83171,17 +83418,8 @@ function ProjectDetailCaseStudyProse(props) {
                   ),
                   children: title
                 }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title }),
-              subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "p",
-                {
-                  className: cn(
-                    "text-xl text-muted-foreground",
-                    subtitleClassName
-                  ),
-                  children: subtitle
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: subtitleClassName, children: subtitle }))
+              ) : title,
+              subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-xl", subtitleClassName), children: subtitle }) : subtitle)
             ]
           }
         ),
@@ -83204,7 +83442,7 @@ function ProjectDetailCaseStudyProse(props) {
           }
         ) }),
         overview && /* @__PURE__ */ jsxRuntime.jsxs(framerMotion.motion.div, { ...fadeInUp2, className: cn("mb-16", overviewClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "mb-4 text-sm font-medium tracking-wider text-muted-foreground uppercase", children: "Overview" }),
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "mb-4 text-sm font-medium tracking-wider uppercase", children: "Overview" }),
           typeof overview === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg leading-relaxed", children: overview }) : overview
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-16", sectionsClassName), children: sections?.map((section, index) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -83215,7 +83453,17 @@ function ProjectDetailCaseStudyProse(props) {
             className: section.className,
             children: [
               typeof section.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "mb-6 text-2xl font-semibold", children: section.title }) : section.title,
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "prose prose-lg max-w-none text-muted-foreground", children: typeof section.content === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "leading-relaxed", children: section.content }) : section.content })
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    getProseClassName(background, "prose-lg"),
+                    section.className,
+                    "max-w-none"
+                  ),
+                  children: typeof section.content === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "leading-relaxed", children: section.content }) : section.content
+                }
+              )
             ]
           },
           section.id
@@ -87742,7 +87990,6 @@ function ResourceDetailWhitepaperSidebar({
   );
 }
 function ResourceDetailArticleHero({
-  className,
   navigation,
   navigationSlot,
   navigationClassName,
@@ -87762,15 +88009,12 @@ function ResourceDetailArticleHero({
   authorClassName,
   contentClassName,
   contentSlot,
-  heroBackground,
-  heroSpacing,
-  heroPattern,
-  heroPatternOpacity,
-  heroClassName,
-  contentBackground,
-  contentSpacing,
-  contentPattern,
-  contentPatternOpacity,
+  background,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "hero",
+  pattern,
+  patternOpacity,
+  className,
   contentSectionClassName,
   optixFlowConfig
 }) {
@@ -87796,7 +88040,13 @@ function ResourceDetailArticleHero({
         )
       }
     );
-  }, [navigationSlot, navigationClassName, navigation?.backHref, navigation?.backIcon, navigation?.backText]);
+  }, [
+    navigationSlot,
+    navigationClassName,
+    navigation?.backHref,
+    navigation?.backIcon,
+    navigation?.backText
+  ]);
   const renderedBlogMeta = React30.useMemo(() => {
     if (blogMetaSlot) return blogMetaSlot;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-2", blogMetaClassName), children: [
@@ -87807,36 +88057,45 @@ function ResourceDetailArticleHero({
         blog?.readTime && (typeof blog.readTime === "string" ? blog.readTime : blog.readTime)
       ] })
     ] });
-  }, [blogMetaSlot, blogMetaClassName, blog?.author, blog?.date, blog?.readTime]);
-  const renderShareActions = React30.useCallback((variant) => {
-    if (shareActionsSlot) return shareActionsSlot;
-    if (!shareActions || shareActions.length === 0) return null;
-    const isHero = variant === "hero";
-    const baseClassName = isHero ? "group/btn h-12 w-12 rounded-full border-border/10 bg-muted/20 transition-colors hover:bg-transparent hover:text-muted" : "group/btn h-12 w-12 rounded-full border-border bg-muted transition-colors hover:bg-transparent hover:text-muted";
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex gap-3", shareActionsClassName), children: shareActions.map((action, index) => {
-      const {
-        icon,
-        iconAfter,
-        children,
-        className: actionClassName,
-        label,
-        ...pressableProps
-      } = action;
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        Pressable,
-        {
-          asButton: true,
-          className: cn(baseClassName, actionClassName),
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            icon,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    }) });
-  }, [shareActionsSlot, shareActions, shareActionsClassName]);
+  }, [
+    blogMetaSlot,
+    blogMetaClassName,
+    blog?.author,
+    blog?.date,
+    blog?.readTime
+  ]);
+  const renderShareActions = React30.useCallback(
+    (variant) => {
+      if (shareActionsSlot) return shareActionsSlot;
+      if (!shareActions || shareActions.length === 0) return null;
+      const isHero = variant === "hero";
+      const baseClassName = isHero ? "group/btn h-12 w-12 rounded-full border-border/10 transition-colors " : "group/btn h-12 w-12 rounded-full border-border transition-colors ";
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex gap-3", shareActionsClassName), children: shareActions.map((action, index) => {
+        const {
+          icon,
+          iconAfter,
+          children,
+          className: actionClassName,
+          label,
+          ...pressableProps
+        } = action;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          Pressable,
+          {
+            asButton: true,
+            className: cn(baseClassName, actionClassName),
+            ...pressableProps,
+            children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              icon,
+              iconAfter
+            ] })
+          },
+          index
+        );
+      }) });
+    },
+    [shareActionsSlot, shareActions, shareActionsClassName]
+  );
   const renderedIllustration = React30.useMemo(() => {
     if (illustrationSlot) return illustrationSlot;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -87854,7 +88113,13 @@ function ResourceDetailArticleHero({
         )
       }
     );
-  }, [illustrationSlot, illustrationClassName, illustration?.imageSrc, illustration?.imageAlt, optixFlowConfig]);
+  }, [
+    illustrationSlot,
+    illustrationClassName,
+    illustration?.imageSrc,
+    illustration?.imageAlt,
+    optixFlowConfig
+  ]);
   const renderedAuthor = React30.useMemo(() => {
     if (authorSlot) return authorSlot;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-3", authorClassName), children: [
@@ -87864,24 +88129,31 @@ function ResourceDetailArticleHero({
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         author?.name && (typeof author.name === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium", children: author.name }) : author.name),
-        author?.role && (typeof author.role === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: author.role }) : author.role)
+        author?.role && (typeof author.role === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm ", children: author.role }) : author.role)
       ] })
     ] });
-  }, [authorSlot, authorClassName, author?.avatarSrc, author?.name, author?.role]);
+  }, [
+    authorSlot,
+    authorClassName,
+    author?.avatarSrc,
+    author?.name,
+    author?.role
+  ]);
   const renderedContent = React30.useMemo(() => {
     if (contentSlot) return contentSlot;
     return blog?.content;
   }, [contentSlot, blog?.content]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Section,
-      {
-        background: heroBackground,
-        spacing: heroSpacing,
-        pattern: heroPattern,
-        patternOpacity: heroPatternOpacity,
-        className: cn("text-primary-foreground", heroClassName),
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 items-start gap-8 lg:grid-cols-3", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Section,
+    {
+      background,
+      spacing,
+      className,
+      pattern,
+      patternOpacity,
+      containerClassName,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 items-start gap-8 lg:grid-cols-3", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full max-w-md flex-col justify-between gap-8", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
               renderedNavigation,
@@ -87905,23 +88177,13 @@ function ResourceDetailArticleHero({
             ] })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2 h-full w-full", children: renderedIllustration })
-        ] })
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Section,
-      {
-        background: contentBackground,
-        spacing: contentSpacing,
-        pattern: contentPattern,
-        patternOpacity: contentPatternOpacity,
-        className: contentSectionClassName,
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto md:max-w-2xl xl:max-w-5xl", children: [
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: contentSectionClassName, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto md:max-w-2xl xl:max-w-5xl", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               className: cn(
-                "prose max-w-none pb-16 prose-p:text-muted-foreground prose-blockquote:border-l-primary prose-blockquote:text-muted-foreground prose-ol:text-muted-foreground prose-ul:text-muted-foreground prose-li:text-muted-foreground",
+                getProseClassName(background, "max-w-none pb-16"),
                 contentClassName
               ),
               children: renderedContent
@@ -87934,10 +88196,10 @@ function ResourceDetailArticleHero({
               renderShareActions("content")
             ] })
           ] })
-        ] })
-      }
-    )
-  ] });
+        ] }) })
+      ]
+    }
+  );
 }
 function ResourceDetailDocumentSidebar({
   className,
@@ -87953,7 +88215,8 @@ function ResourceDetailDocumentSidebar({
   sidebarSlot,
   sidebarClassName,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "hero",
   pattern,
   patternOpacity,
   optixFlowConfig
@@ -87971,7 +88234,7 @@ function ResourceDetailDocumentSidebar({
       "article",
       {
         className: cn(
-          "order-2 mx-auto prose md:order-1 dark:prose-invert",
+          getProseClassName(background, "order-2 mx-auto md:order-1"),
           articleClassName
         ),
         children: [
@@ -87988,7 +88251,13 @@ function ResourceDetailDocumentSidebar({
         ]
       }
     );
-  }, [articleSlot, articleClassName, article?.featuredImage, article?.content, optixFlowConfig]);
+  }, [
+    articleSlot,
+    articleClassName,
+    article?.featuredImage,
+    article?.content,
+    optixFlowConfig
+  ]);
   const renderedSidebar = React30.useMemo(() => {
     if (sidebarSlot) return sidebarSlot;
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -88099,7 +88368,8 @@ function ResourceDetailDocumentSidebar({
       spacing,
       pattern,
       patternOpacity,
-      className,
+      className: cn(pattern && "overflow-visible", className),
+      containerClassName,
       children: [
         renderedBreadcrumbs,
         title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(