@opensite/ui 2.6.5 → 2.6.6

package/dist/resource-detail-article-hero.cjs

@@ -34,6 +34,13 @@ var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive)
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
+function isDarkBackground(bg) {
+  return bg === "dark" || bg === "gradient" || bg === "primary" || bg === "secondary";
+}
+function getProseClassName(parentBg, additionalClasses) {
+  const baseClasses = isDarkBackground(parentBg) ? "prose prose-invert" : "prose dark:prose-invert";
+  return additionalClasses ? `${baseClasses} ${additionalClasses}` : baseClasses;
+}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -874,7 +881,6 @@ var Section = React__namespace.default.forwardRef(
 );
 Section.displayName = "Section";
 function ResourceDetailArticleHero({
-  className,
   navigation,
   navigationSlot,
   navigationClassName,
@@ -894,15 +900,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
 }) {
@@ -928,7 +931,13 @@ function ResourceDetailArticleHero({
         )
       }
     );
-  }, [navigationSlot, navigationClassName, navigation?.backHref, navigation?.backIcon, navigation?.backText]);
+  }, [
+    navigationSlot,
+    navigationClassName,
+    navigation?.backHref,
+    navigation?.backIcon,
+    navigation?.backText
+  ]);
   const renderedBlogMeta = React.useMemo(() => {
     if (blogMetaSlot) return blogMetaSlot;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-2", blogMetaClassName), children: [
@@ -939,36 +948,45 @@ function ResourceDetailArticleHero({
         blog?.readTime && (typeof blog.readTime === "string" ? blog.readTime : blog.readTime)
       ] })
     ] });
-  }, [blogMetaSlot, blogMetaClassName, blog?.author, blog?.date, blog?.readTime]);
-  const renderShareActions = React.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 = React.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 = React.useMemo(() => {
     if (illustrationSlot) return illustrationSlot;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -986,7 +1004,13 @@ function ResourceDetailArticleHero({
         )
       }
     );
-  }, [illustrationSlot, illustrationClassName, illustration?.imageSrc, illustration?.imageAlt, optixFlowConfig]);
+  }, [
+    illustrationSlot,
+    illustrationClassName,
+    illustration?.imageSrc,
+    illustration?.imageAlt,
+    optixFlowConfig
+  ]);
   const renderedAuthor = React.useMemo(() => {
     if (authorSlot) return authorSlot;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-3", authorClassName), children: [
@@ -996,24 +1020,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 = React.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,
@@ -1037,23 +1068,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
@@ -1066,10 +1087,10 @@ function ResourceDetailArticleHero({
               renderShareActions("content")
             ] })
           ] })
-        ] })
-      }
-    )
-  ] });
+        ] }) })
+      ]
+    }
+  );
 }
 
 exports.ResourceDetailArticleHero = ResourceDetailArticleHero;

package/dist/resource-detail-article-hero.d.cts

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-dO-3eRo7.cjs';
-import { A as ActionConfig, a as AuthorInfo, O as OptixFlowConfig } from './blocks-YvQVRIDa.cjs';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-CEwp5AFN.cjs';
+import { A as ActionConfig, a as AuthorInfo, O as OptixFlowConfig } from './blocks-BlLF8sLO.cjs';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 import '@opensite/hooks/usePlatformFromUrl';
 
@@ -145,35 +145,23 @@ interface ResourceDetailArticleHeroProps {
     /**
      * Hero section background style
      */
-    heroBackground?: SectionBackground;
+    background?: SectionBackground;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
     /**
      * Hero section spacing
      */
-    heroSpacing?: SectionSpacing;
+    spacing?: SectionSpacing;
     /**
      * Hero section pattern
      */
-    heroPattern?: PatternName | undefined;
+    battern?: PatternName | undefined;
     /**
      * Hero section pattern opacity
      */
-    heroPatternOpacity?: number;
-    /**
-     * Additional CSS classes for the hero section
-     */
-    heroClassName?: string;
-    /**
-     * Content section background style
-     */
-    contentBackground?: SectionBackground;
-    /**
-     * Content section spacing
-     */
-    contentSpacing?: SectionSpacing;
-    /**
-     * Content section pattern
-     */
-    contentPattern?: PatternName | undefined;
+    patternOpacity?: number;
     /**
      * Content section pattern opacity
      */
@@ -186,6 +174,10 @@ interface ResourceDetailArticleHeroProps {
      * OptixFlow image optimization configuration
      */
     optixFlowConfig?: OptixFlowConfig;
+    /**
+     * Background pattern
+     */
+    pattern?: PatternName;
 }
 /**
  * ResourceDetailArticleHero - A full-width article hero with dark background,
@@ -213,11 +205,10 @@ interface ResourceDetailArticleHeroProps {
  *     imageSrc: "/images/hero.jpg",
  *     imageAlt: "Article hero image",
  *   }}
- *   heroBackground="primary"
- *   contentBackground="white"
+ *   background="dark"
  * />
  * ```
  */
-declare function ResourceDetailArticleHero({ className, navigation, navigationSlot, navigationClassName, blog, blogMetaSlot, blogMetaClassName, titleClassName, shareActions, shareActionsSlot, shareActionsClassName, shareHeading, illustration, illustrationSlot, illustrationClassName, author, authorSlot, authorClassName, contentClassName, contentSlot, heroBackground, heroSpacing, heroPattern, heroPatternOpacity, heroClassName, contentBackground, contentSpacing, contentPattern, contentPatternOpacity, contentSectionClassName, optixFlowConfig, }: ResourceDetailArticleHeroProps): react_jsx_runtime.JSX.Element;
+declare function ResourceDetailArticleHero({ navigation, navigationSlot, navigationClassName, blog, blogMetaSlot, blogMetaClassName, titleClassName, shareActions, shareActionsSlot, shareActionsClassName, shareHeading, illustration, illustrationSlot, illustrationClassName, author, authorSlot, authorClassName, contentClassName, contentSlot, background, containerClassName, spacing, pattern, patternOpacity, className, contentSectionClassName, optixFlowConfig, }: ResourceDetailArticleHeroProps): react_jsx_runtime.JSX.Element;
 
 export { ResourceDetailArticleHero, type ResourceDetailArticleHeroProps };

package/dist/resource-detail-article-hero.d.ts

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-DIltDQCC.js';
-import { A as ActionConfig, a as AuthorInfo, O as OptixFlowConfig } from './blocks-IjaKB9Ev.js';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-Cz9FycbA.js';
+import { A as ActionConfig, a as AuthorInfo, O as OptixFlowConfig } from './blocks-BJ3CyHu6.js';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 import '@opensite/hooks/usePlatformFromUrl';
 
@@ -145,35 +145,23 @@ interface ResourceDetailArticleHeroProps {
     /**
      * Hero section background style
      */
-    heroBackground?: SectionBackground;
+    background?: SectionBackground;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
     /**
      * Hero section spacing
      */
-    heroSpacing?: SectionSpacing;
+    spacing?: SectionSpacing;
     /**
      * Hero section pattern
      */
-    heroPattern?: PatternName | undefined;
+    battern?: PatternName | undefined;
     /**
      * Hero section pattern opacity
      */
-    heroPatternOpacity?: number;
-    /**
-     * Additional CSS classes for the hero section
-     */
-    heroClassName?: string;
-    /**
-     * Content section background style
-     */
-    contentBackground?: SectionBackground;
-    /**
-     * Content section spacing
-     */
-    contentSpacing?: SectionSpacing;
-    /**
-     * Content section pattern
-     */
-    contentPattern?: PatternName | undefined;
+    patternOpacity?: number;
     /**
      * Content section pattern opacity
      */
@@ -186,6 +174,10 @@ interface ResourceDetailArticleHeroProps {
      * OptixFlow image optimization configuration
      */
     optixFlowConfig?: OptixFlowConfig;
+    /**
+     * Background pattern
+     */
+    pattern?: PatternName;
 }
 /**
  * ResourceDetailArticleHero - A full-width article hero with dark background,
@@ -213,11 +205,10 @@ interface ResourceDetailArticleHeroProps {
  *     imageSrc: "/images/hero.jpg",
  *     imageAlt: "Article hero image",
  *   }}
- *   heroBackground="primary"
- *   contentBackground="white"
+ *   background="dark"
  * />
  * ```
  */
-declare function ResourceDetailArticleHero({ className, navigation, navigationSlot, navigationClassName, blog, blogMetaSlot, blogMetaClassName, titleClassName, shareActions, shareActionsSlot, shareActionsClassName, shareHeading, illustration, illustrationSlot, illustrationClassName, author, authorSlot, authorClassName, contentClassName, contentSlot, heroBackground, heroSpacing, heroPattern, heroPatternOpacity, heroClassName, contentBackground, contentSpacing, contentPattern, contentPatternOpacity, contentSectionClassName, optixFlowConfig, }: ResourceDetailArticleHeroProps): react_jsx_runtime.JSX.Element;
+declare function ResourceDetailArticleHero({ navigation, navigationSlot, navigationClassName, blog, blogMetaSlot, blogMetaClassName, titleClassName, shareActions, shareActionsSlot, shareActionsClassName, shareHeading, illustration, illustrationSlot, illustrationClassName, author, authorSlot, authorClassName, contentClassName, contentSlot, background, containerClassName, spacing, pattern, patternOpacity, className, contentSectionClassName, optixFlowConfig, }: ResourceDetailArticleHeroProps): react_jsx_runtime.JSX.Element;
 
 export { ResourceDetailArticleHero, type ResourceDetailArticleHeroProps };

package/dist/resource-detail-article-hero.js

@@ -12,6 +12,13 @@ import * as AvatarPrimitive from '@radix-ui/react-avatar';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+function isDarkBackground(bg) {
+  return bg === "dark" || bg === "gradient" || bg === "primary" || bg === "secondary";
+}
+function getProseClassName(parentBg, additionalClasses) {
+  const baseClasses = isDarkBackground(parentBg) ? "prose prose-invert" : "prose dark:prose-invert";
+  return additionalClasses ? `${baseClasses} ${additionalClasses}` : baseClasses;
+}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -852,7 +859,6 @@ var Section = React__default.forwardRef(
 );
 Section.displayName = "Section";
 function ResourceDetailArticleHero({
-  className,
   navigation,
   navigationSlot,
   navigationClassName,
@@ -872,15 +878,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
 }) {
@@ -906,7 +909,13 @@ function ResourceDetailArticleHero({
         )
       }
     );
-  }, [navigationSlot, navigationClassName, navigation?.backHref, navigation?.backIcon, navigation?.backText]);
+  }, [
+    navigationSlot,
+    navigationClassName,
+    navigation?.backHref,
+    navigation?.backIcon,
+    navigation?.backText
+  ]);
   const renderedBlogMeta = useMemo(() => {
     if (blogMetaSlot) return blogMetaSlot;
     return /* @__PURE__ */ jsxs("div", { className: cn("space-y-2", blogMetaClassName), children: [
@@ -917,36 +926,45 @@ function ResourceDetailArticleHero({
         blog?.readTime && (typeof blog.readTime === "string" ? blog.readTime : blog.readTime)
       ] })
     ] });
-  }, [blogMetaSlot, blogMetaClassName, blog?.author, blog?.date, blog?.readTime]);
-  const renderShareActions = 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__ */ jsx("div", { className: cn("flex gap-3", shareActionsClassName), children: shareActions.map((action, index) => {
-      const {
-        icon,
-        iconAfter,
-        children,
-        className: actionClassName,
-        label,
-        ...pressableProps
-      } = action;
-      return /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          asButton: true,
-          className: cn(baseClassName, actionClassName),
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-            icon,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    }) });
-  }, [shareActionsSlot, shareActions, shareActionsClassName]);
+  }, [
+    blogMetaSlot,
+    blogMetaClassName,
+    blog?.author,
+    blog?.date,
+    blog?.readTime
+  ]);
+  const renderShareActions = 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__ */ jsx("div", { className: cn("flex gap-3", shareActionsClassName), children: shareActions.map((action, index) => {
+        const {
+          icon,
+          iconAfter,
+          children,
+          className: actionClassName,
+          label,
+          ...pressableProps
+        } = action;
+        return /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            asButton: true,
+            className: cn(baseClassName, actionClassName),
+            ...pressableProps,
+            children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+              icon,
+              iconAfter
+            ] })
+          },
+          index
+        );
+      }) });
+    },
+    [shareActionsSlot, shareActions, shareActionsClassName]
+  );
   const renderedIllustration = useMemo(() => {
     if (illustrationSlot) return illustrationSlot;
     return /* @__PURE__ */ jsx(
@@ -964,7 +982,13 @@ function ResourceDetailArticleHero({
         )
       }
     );
-  }, [illustrationSlot, illustrationClassName, illustration?.imageSrc, illustration?.imageAlt, optixFlowConfig]);
+  }, [
+    illustrationSlot,
+    illustrationClassName,
+    illustration?.imageSrc,
+    illustration?.imageAlt,
+    optixFlowConfig
+  ]);
   const renderedAuthor = useMemo(() => {
     if (authorSlot) return authorSlot;
     return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-3", authorClassName), children: [
@@ -974,24 +998,31 @@ function ResourceDetailArticleHero({
       ] }),
       /* @__PURE__ */ jsxs("div", { children: [
         author?.name && (typeof author.name === "string" ? /* @__PURE__ */ jsx("p", { className: "font-medium", children: author.name }) : author.name),
-        author?.role && (typeof author.role === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: author.role }) : author.role)
+        author?.role && (typeof author.role === "string" ? /* @__PURE__ */ 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 = useMemo(() => {
     if (contentSlot) return contentSlot;
     return blog?.content;
   }, [contentSlot, blog?.content]);
-  return /* @__PURE__ */ jsxs("div", { className: cn(className), children: [
-    /* @__PURE__ */ jsx(
-      Section,
-      {
-        background: heroBackground,
-        spacing: heroSpacing,
-        pattern: heroPattern,
-        patternOpacity: heroPatternOpacity,
-        className: cn("text-primary-foreground", heroClassName),
-        children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-start gap-8 lg:grid-cols-3", children: [
+  return /* @__PURE__ */ jsxs(
+    Section,
+    {
+      background,
+      spacing,
+      className,
+      pattern,
+      patternOpacity,
+      containerClassName,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-start gap-8 lg:grid-cols-3", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex h-full max-w-md flex-col justify-between gap-8", children: [
             /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
               renderedNavigation,
@@ -1015,23 +1046,13 @@ function ResourceDetailArticleHero({
             ] })
           ] }),
           /* @__PURE__ */ jsx("div", { className: "col-span-2 h-full w-full", children: renderedIllustration })
-        ] })
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Section,
-      {
-        background: contentBackground,
-        spacing: contentSpacing,
-        pattern: contentPattern,
-        patternOpacity: contentPatternOpacity,
-        className: contentSectionClassName,
-        children: /* @__PURE__ */ jsxs("div", { className: "mx-auto md:max-w-2xl xl:max-w-5xl", children: [
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: contentSectionClassName, children: /* @__PURE__ */ jsxs("div", { className: "mx-auto md:max-w-2xl xl:max-w-5xl", children: [
           /* @__PURE__ */ 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
@@ -1044,10 +1065,10 @@ function ResourceDetailArticleHero({
               renderShareActions("content")
             ] })
           ] })
-        ] })
-      }
-    )
-  ] });
+        ] }) })
+      ]
+    }
+  );
 }
 
 export { ResourceDetailArticleHero };