@opensite/ui 2.6.5 → 2.6.6

package/dist/case-study-toc-social-sidebar.cjs

@@ -38,6 +38,13 @@ var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespace(SeparatorPrim
 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:")) {
@@ -1055,16 +1062,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 = React.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: [
@@ -1089,7 +1111,13 @@ function CaseStudyTocSocialSidebar({
         optixFlowConfig
       }
     );
-  }, [companyLogoSlot, companyLogoSrc, companyLogoAlt, companyLogoClassName, optixFlowConfig]);
+  }, [
+    companyLogoSlot,
+    companyLogoSrc,
+    companyLogoAlt,
+    companyLogoClassName,
+    optixFlowConfig
+  ]);
   const detailsContent = React.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(
@@ -1102,7 +1130,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
@@ -1117,7 +1152,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" })
         },
@@ -1127,33 +1165,65 @@ function CaseStudyTocSocialSidebar({
   }, [socialLinksSlot, socialLinks, socialLinksLabel, socialLinksClassName]);
   const sidebarContent = React.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 = React.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 = React.useMemo(() => {
     if (contentSlot) return contentSlot;
@@ -1163,7 +1233,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
@@ -1175,51 +1249,88 @@ function CaseStudyTocSocialSidebar({
   const tocContent = React.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
+              ] })
+            ]
+          }
+        )
       ] })
     }
   );

package/dist/case-study-toc-social-sidebar.d.cts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-dO-3eRo7.cjs';
-import { g as BreadcrumbItem, a as AuthorInfo, D as DetailItem, h as OutcomeItem, S as SectionItem, O as OptixFlowConfig } from './blocks-YvQVRIDa.cjs';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-CEwp5AFN.cjs';
+import { g as BreadcrumbItem, a as AuthorInfo, D as DetailItem, h as OutcomeItem, S as SectionItem, O as OptixFlowConfig } from './blocks-BlLF8sLO.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 import '@opensite/hooks/usePlatformFromUrl';
 

package/dist/case-study-toc-social-sidebar.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-DIltDQCC.js';
-import { g as BreadcrumbItem, a as AuthorInfo, D as DetailItem, h as OutcomeItem, S as SectionItem, O as OptixFlowConfig } from './blocks-IjaKB9Ev.js';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-Cz9FycbA.js';
+import { g as BreadcrumbItem, a as AuthorInfo, D as DetailItem, h as OutcomeItem, S as SectionItem, O as OptixFlowConfig } from './blocks-BJ3CyHu6.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 import '@opensite/hooks/usePlatformFromUrl';