@opensite/ui 2.6.4 → 2.6.6

package/dist/article-compact-toc.cjs

@@ -38,6 +38,13 @@ var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitiv
 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:")) {
@@ -959,7 +966,6 @@ function PopoverContent({
 }
 function ArticleCompactTocComponent({
   className,
-  containerClassName,
   breadcrumbClassName,
   contentClassName,
   titleClassName,
@@ -988,7 +994,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
 }) {
@@ -1096,7 +1103,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))
         }
       )
@@ -1149,11 +1156,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",
               {
@@ -1163,7 +1171,7 @@ function ArticleCompactTocComponent({
                 ),
                 children: title
               }
-            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
+            ) : title),
             (authorName || publishDate || readTime) && /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
               {
@@ -1187,7 +1195,7 @@ function ArticleCompactTocComponent({
               "article",
               {
                 className: cn(
-                  "prose max-w-none dark:prose-invert",
+                  getProseClassName(background, "max-w-none"),
                   articleClassName
                 ),
                 children: [

package/dist/article-compact-toc.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-C0hgXSQJ.cjs';
-import { i as SocialLinkItem, O as OptixFlowConfig } from './blocks-CtBLU2p2.cjs';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-CEwp5AFN.cjs';
+import { i as SocialLinkItem, O as OptixFlowConfig } from './blocks-BlLF8sLO.cjs';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 import '@opensite/hooks/usePlatformFromUrl';
 
@@ -150,6 +150,6 @@ interface ArticleCompactTocProps {
      */
     patternOpacity?: number;
 }
-declare function ArticleCompactTocComponent({ className, containerClassName, breadcrumbClassName, contentClassName, titleClassName, metaClassName, shareClassName, tocClassName, articleClassName, heroImageClassName, breadcrumbs, breadcrumbsSlot, currentPage, title, authorName, authorHref, publishDate, readTime, sections, tocSlot, renderSectionLink, socialLinks, shareSlot, heroImageSrc, heroImageAlt, heroMediaSlot, children, enableTocTracking, optixFlowConfig, background, spacing, pattern, patternOpacity, }: ArticleCompactTocProps): react_jsx_runtime.JSX.Element;
+declare function ArticleCompactTocComponent({ className, breadcrumbClassName, contentClassName, titleClassName, metaClassName, shareClassName, tocClassName, articleClassName, heroImageClassName, breadcrumbs, breadcrumbsSlot, currentPage, title, authorName, authorHref, publishDate, readTime, sections, tocSlot, renderSectionLink, socialLinks, shareSlot, heroImageSrc, heroImageAlt, heroMediaSlot, children, enableTocTracking, optixFlowConfig, background, containerClassName, spacing, pattern, patternOpacity, }: ArticleCompactTocProps): react_jsx_runtime.JSX.Element;
 
 export { ArticleCompactTocComponent as ArticleCompactToc, type ArticleCompactTocProps, type ArticleCompactTocSection };

package/dist/article-compact-toc.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-yvApKT-I.js';
-import { i as SocialLinkItem, O as OptixFlowConfig } from './blocks-D9BXWpQN.js';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-Cz9FycbA.js';
+import { i as SocialLinkItem, O as OptixFlowConfig } from './blocks-BJ3CyHu6.js';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 import '@opensite/hooks/usePlatformFromUrl';
 
@@ -150,6 +150,6 @@ interface ArticleCompactTocProps {
      */
     patternOpacity?: number;
 }
-declare function ArticleCompactTocComponent({ className, containerClassName, breadcrumbClassName, contentClassName, titleClassName, metaClassName, shareClassName, tocClassName, articleClassName, heroImageClassName, breadcrumbs, breadcrumbsSlot, currentPage, title, authorName, authorHref, publishDate, readTime, sections, tocSlot, renderSectionLink, socialLinks, shareSlot, heroImageSrc, heroImageAlt, heroMediaSlot, children, enableTocTracking, optixFlowConfig, background, spacing, pattern, patternOpacity, }: ArticleCompactTocProps): react_jsx_runtime.JSX.Element;
+declare function ArticleCompactTocComponent({ className, breadcrumbClassName, contentClassName, titleClassName, metaClassName, shareClassName, tocClassName, articleClassName, heroImageClassName, breadcrumbs, breadcrumbsSlot, currentPage, title, authorName, authorHref, publishDate, readTime, sections, tocSlot, renderSectionLink, socialLinks, shareSlot, heroImageSrc, heroImageAlt, heroMediaSlot, children, enableTocTracking, optixFlowConfig, background, containerClassName, spacing, pattern, patternOpacity, }: ArticleCompactTocProps): react_jsx_runtime.JSX.Element;
 
 export { ArticleCompactTocComponent as ArticleCompactToc, type ArticleCompactTocProps, type ArticleCompactTocSection };

package/dist/article-compact-toc.js

@@ -15,6 +15,13 @@ import * as PopoverPrimitive from '@radix-ui/react-popover';
 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:")) {
@@ -936,7 +943,6 @@ function PopoverContent({
 }
 function ArticleCompactTocComponent({
   className,
-  containerClassName,
   breadcrumbClassName,
   contentClassName,
   titleClassName,
@@ -965,7 +971,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
 }) {
@@ -1073,7 +1080,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))
         }
       )
@@ -1126,11 +1133,12 @@ function ArticleCompactTocComponent({
       pattern,
       patternOpacity,
       className: cn("relative", className),
+      containerClassName,
       children: [
         desktopTocContent,
         /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
           breadcrumbsContent,
-          /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-3xl", contentClassName), children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative", children: [
             title && (typeof title === "string" ? /* @__PURE__ */ jsx(
               "h1",
               {
@@ -1140,7 +1148,7 @@ function ArticleCompactTocComponent({
                 ),
                 children: title
               }
-            ) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title })),
+            ) : title),
             (authorName || publishDate || readTime) && /* @__PURE__ */ jsxs(
               "div",
               {
@@ -1164,7 +1172,7 @@ function ArticleCompactTocComponent({
               "article",
               {
                 className: cn(
-                  "prose max-w-none dark:prose-invert",
+                  getProseClassName(background, "max-w-none"),
                   articleClassName
                 ),
                 children: [

package/dist/article-hero-prose.cjs

@@ -35,6 +35,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:")) {
@@ -889,7 +896,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
@@ -996,11 +1003,12 @@ function ArticleHeroProseComponent({
             ]
           }
         ) }),
-        children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
+        children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col items-center", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             className: cn(
-              "mx-auto prose max-w-3xl dark:prose-invert",
+              getProseClassName(background, "max-w-3xl"),
+              "mx-auto",
               proseClassName
             ),
             children

package/dist/article-hero-prose.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-C0hgXSQJ.cjs';
-import { O as OptixFlowConfig } from './blocks-CtBLU2p2.cjs';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-CEwp5AFN.cjs';
+import { O as OptixFlowConfig } from './blocks-BlLF8sLO.cjs';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 import '@opensite/hooks/usePlatformFromUrl';
 

package/dist/article-hero-prose.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-yvApKT-I.js';
-import { O as OptixFlowConfig } from './blocks-D9BXWpQN.js';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-Cz9FycbA.js';
+import { O as OptixFlowConfig } from './blocks-BJ3CyHu6.js';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 import '@opensite/hooks/usePlatformFromUrl';
 

package/dist/article-hero-prose.js

@@ -13,6 +13,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:")) {
@@ -867,7 +874,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
@@ -974,11 +981,12 @@ function ArticleHeroProseComponent({
             ]
           }
         ) }),
-        children && /* @__PURE__ */ jsx("div", { className: cn("relative", containerClassName), children: /* @__PURE__ */ jsx(
+        children && /* @__PURE__ */ jsx("div", { className: cn("flex flex-col items-center", containerClassName), children: /* @__PURE__ */ jsx(
           "div",
           {
             className: cn(
-              "mx-auto prose max-w-3xl dark:prose-invert",
+              getProseClassName(background, "max-w-3xl"),
+              "mx-auto",
               proseClassName
             ),
             children

package/dist/article-sidebar-sticky.cjs

@@ -35,6 +35,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:")) {
@@ -880,7 +887,6 @@ var Section = React__namespace.default.forwardRef(
 Section.displayName = "Section";
 function ArticleSidebarStickyComponent({
   className,
-  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   sidebarClassName,
   articleClassName,
   titleClassName,
@@ -905,7 +911,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
@@ -1001,7 +1008,7 @@ function ArticleSidebarStickyComponent({
           "article",
           {
             className: cn(
-              "prose max-w-none dark:prose-invert",
+              getProseClassName(background, "max-w-none"),
               articleClassName
             ),
             children: [

package/dist/article-sidebar-sticky.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-C0hgXSQJ.cjs';
-import { O as OptixFlowConfig } from './blocks-CtBLU2p2.cjs';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-CEwp5AFN.cjs';
+import { O as OptixFlowConfig } from './blocks-BlLF8sLO.cjs';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 import '@opensite/hooks/usePlatformFromUrl';
 
@@ -129,6 +129,6 @@ interface ArticleSidebarStickyProps {
      */
     patternOpacity?: number;
 }
-declare function ArticleSidebarStickyComponent({ className, containerClassName, sidebarClassName, articleClassName, titleClassName, authorClassName, heroImageClassName, backLinkClassName, backHref, backText, backIcon, backLinkSlot, title, summary, summaryClassName, authorName, authorImage, authorHref, publishDate, authorSlot, heroImageSrc, heroImageAlt, heroMediaSlot, children, optixFlowConfig, background, spacing, pattern, patternOpacity, sidebarContent, }: ArticleSidebarStickyProps): react_jsx_runtime.JSX.Element;
+declare function ArticleSidebarStickyComponent({ className, sidebarClassName, articleClassName, titleClassName, authorClassName, heroImageClassName, backLinkClassName, backHref, backText, backIcon, backLinkSlot, title, summary, summaryClassName, authorName, authorImage, authorHref, publishDate, authorSlot, heroImageSrc, heroImageAlt, heroMediaSlot, children, optixFlowConfig, background, containerClassName, spacing, pattern, patternOpacity, sidebarContent, }: ArticleSidebarStickyProps): react_jsx_runtime.JSX.Element;
 
 export { ArticleSidebarStickyComponent as ArticleSidebarSticky, type ArticleSidebarStickyProps };

package/dist/article-sidebar-sticky.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-yvApKT-I.js';
-import { O as OptixFlowConfig } from './blocks-D9BXWpQN.js';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-Cz9FycbA.js';
+import { O as OptixFlowConfig } from './blocks-BJ3CyHu6.js';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 import '@opensite/hooks/usePlatformFromUrl';
 
@@ -129,6 +129,6 @@ interface ArticleSidebarStickyProps {
      */
     patternOpacity?: number;
 }
-declare function ArticleSidebarStickyComponent({ className, containerClassName, sidebarClassName, articleClassName, titleClassName, authorClassName, heroImageClassName, backLinkClassName, backHref, backText, backIcon, backLinkSlot, title, summary, summaryClassName, authorName, authorImage, authorHref, publishDate, authorSlot, heroImageSrc, heroImageAlt, heroMediaSlot, children, optixFlowConfig, background, spacing, pattern, patternOpacity, sidebarContent, }: ArticleSidebarStickyProps): react_jsx_runtime.JSX.Element;
+declare function ArticleSidebarStickyComponent({ className, sidebarClassName, articleClassName, titleClassName, authorClassName, heroImageClassName, backLinkClassName, backHref, backText, backIcon, backLinkSlot, title, summary, summaryClassName, authorName, authorImage, authorHref, publishDate, authorSlot, heroImageSrc, heroImageAlt, heroMediaSlot, children, optixFlowConfig, background, containerClassName, spacing, pattern, patternOpacity, sidebarContent, }: ArticleSidebarStickyProps): react_jsx_runtime.JSX.Element;
 
 export { ArticleSidebarStickyComponent as ArticleSidebarSticky, type ArticleSidebarStickyProps };

package/dist/article-sidebar-sticky.js

@@ -13,6 +13,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:")) {
@@ -858,7 +865,6 @@ var Section = React__default.forwardRef(
 Section.displayName = "Section";
 function ArticleSidebarStickyComponent({
   className,
-  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   sidebarClassName,
   articleClassName,
   titleClassName,
@@ -883,7 +889,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
@@ -979,7 +986,7 @@ function ArticleSidebarStickyComponent({
           "article",
           {
             className: cn(
-              "prose max-w-none dark:prose-invert",
+              getProseClassName(background, "max-w-none"),
               articleClassName
             ),
             children: [

package/dist/article-split-animated.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-C0hgXSQJ.cjs';
-import { A as ActionConfig, O as OptixFlowConfig } from './blocks-CtBLU2p2.cjs';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-CEwp5AFN.cjs';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-BlLF8sLO.cjs';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 import '@opensite/hooks/usePlatformFromUrl';
 

package/dist/article-split-animated.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-yvApKT-I.js';
-import { A as ActionConfig, O as OptixFlowConfig } from './blocks-D9BXWpQN.js';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-Cz9FycbA.js';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-BJ3CyHu6.js';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 import '@opensite/hooks/usePlatformFromUrl';
 

package/dist/article-toc-sidebar.cjs

@@ -35,6 +35,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:")) {
@@ -971,7 +978,7 @@ function ArticleTocSidebarComponent({
   const categoryContent = React5__namespace.useMemo(() => {
     if (categorySlot) return categorySlot;
     if (!category) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", children: category });
+    return /* @__PURE__ */ jsxRuntime.jsx(Badge, { children: category });
   }, [categorySlot, category]);
   const authorContent = React5__namespace.useMemo(() => {
     if (authorSlot) return authorSlot;
@@ -1099,25 +1106,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

package/dist/article-toc-sidebar.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-C0hgXSQJ.cjs';
-import { A as ActionConfig, O as OptixFlowConfig } from './blocks-CtBLU2p2.cjs';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-CEwp5AFN.cjs';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-BlLF8sLO.cjs';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 import '@opensite/hooks/usePlatformFromUrl';
 

package/dist/article-toc-sidebar.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-yvApKT-I.js';
-import { A as ActionConfig, O as OptixFlowConfig } from './blocks-D9BXWpQN.js';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-Cz9FycbA.js';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-BJ3CyHu6.js';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 import '@opensite/hooks/usePlatformFromUrl';
 

package/dist/article-toc-sidebar.js

@@ -13,6 +13,13 @@ import { Slot } from '@radix-ui/react-slot';
 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:")) {
@@ -949,7 +956,7 @@ function ArticleTocSidebarComponent({
   const categoryContent = React5.useMemo(() => {
     if (categorySlot) return categorySlot;
     if (!category) return null;
-    return /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: category });
+    return /* @__PURE__ */ jsx(Badge, { children: category });
   }, [categorySlot, category]);
   const authorContent = React5.useMemo(() => {
     if (authorSlot) return authorSlot;
@@ -1077,25 +1084,34 @@ function ArticleTocSidebarComponent({
       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-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,
-          children
-        ] }),
+        /* @__PURE__ */ jsxs(
+          "article",
+          {
+            className: cn(
+              getProseClassName(background, "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-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,
+              children
+            ]
+          }
+        ),
         /* @__PURE__ */ jsx("aside", { className: cn("hidden lg:block", sidebarClassName), children: /* @__PURE__ */ jsxs("div", { className: "sticky top-8 space-y-6", children: [
           tocContent,
           ctaContent