@opensite/ui 3.0.5 → 3.0.7

package/dist/article-compact-toc.js

@@ -1,17 +1,17 @@
 "use client";
-import * as React4 from 'react';
-import React4__default from 'react';
+import * as React5 from 'react';
+import React5__default from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Img } from '@page-speed/img';
 import { Pressable } from '@page-speed/pressable';
 import { Icon } from '@page-speed/icon';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
-import { Markdown } from '@page-speed/markdown-to-jsx/core';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { SocialShare } from '@page-speed/social-share';
+import { Markdown } from '@page-speed/markdown-to-jsx/core';
 
 // components/blocks/article/article-compact-toc.tsx
 function cn(...inputs) {
@@ -25,7 +25,7 @@ function getProseClassName(parentBg, additionalClasses) {
   return additionalClasses ? `${baseClasses} ${additionalClasses}` : baseClasses;
 }
 var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
-var DynamicIcon = React4.memo(function DynamicIcon2({
+var DynamicIcon = React5.memo(function DynamicIcon2({
   apiKey,
   ...props
 }) {
@@ -132,7 +132,7 @@ var maxWidthStyles = {
   "4xl": "max-w-[1536px]",
   full: "max-w-full"
 };
-var Container = React4__default.forwardRef(
+var Container = React5__default.forwardRef(
   ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
     const Component = as;
     return /* @__PURE__ */ jsx(
@@ -438,7 +438,7 @@ var spacingStyles = {
 };
 var predefinedSpacings = ["none", "sm", "md", "lg", "xl", "hero"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
-var Section = React4__default.forwardRef(
+var Section = React5__default.forwardRef(
   ({
     id,
     title,
@@ -529,7 +529,37 @@ function PopoverContent({
     }
   ) });
 }
+function LongformContent({
+  children,
+  renderMode = "jsx",
+  markdownString,
+  optixFlowConfig,
+  markdownStyles
+}) {
+  const shouldRenderMarkdown = React5.useMemo(() => {
+    return renderMode === "markdown" && typeof markdownString === "string" && markdownString.length > 0;
+  }, [renderMode, markdownString]);
+  if (shouldRenderMarkdown && markdownString) {
+    return /* @__PURE__ */ jsx(
+      Markdown,
+      {
+        markdownStyles,
+        optixFlowConfig,
+        overrides: {
+          img: Img,
+          a: Pressable
+        },
+        children: markdownString
+      }
+    );
+  }
+  if (children) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  return null;
+}
 function ArticleCompactTocComponent({
+  sectionId = "article-compact-toc",
   className,
   breadcrumbClassName,
   contentClassName,
@@ -566,11 +596,11 @@ function ArticleCompactTocComponent({
   patternOpacity,
   patternClassName
 }) {
-  const [activeSection, setActiveSection] = React4.useState(
+  const [activeSection, setActiveSection] = React5.useState(
     sections?.[0]?.id || ""
   );
-  const [isTocOpen, setIsTocOpen] = React4.useState(false);
-  React4.useEffect(() => {
+  const [isTocOpen, setIsTocOpen] = React5.useState(false);
+  React5.useEffect(() => {
     if (!enableTocTracking) return;
     const observer = new IntersectionObserver(
       (entries) => {
@@ -588,12 +618,12 @@ function ArticleCompactTocComponent({
     });
     return () => observer.disconnect();
   }, [sections, enableTocTracking]);
-  const breadcrumbsContent = React4.useMemo(() => {
+  const breadcrumbsContent = React5.useMemo(() => {
     if (breadcrumbsSlot) return breadcrumbsSlot;
     if (!breadcrumbs && !currentPage) return null;
     return /* @__PURE__ */ jsx(Breadcrumb, { className: cn("mb-6 md:mb-20", breadcrumbClassName), children: /* @__PURE__ */ jsxs(BreadcrumbList, { children: [
       /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbLink, { asChild: true, children: /* @__PURE__ */ jsx(Pressable, { href: "#", children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/home", size: 16 }) }) }) }),
-      breadcrumbs?.map((crumb, index) => /* @__PURE__ */ jsxs(React4.Fragment, { children: [
+      breadcrumbs?.map((crumb, index) => /* @__PURE__ */ jsxs(React5.Fragment, { children: [
         /* @__PURE__ */ jsx(BreadcrumbSeparator, {}),
         /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbLink, { asChild: true, children: /* @__PURE__ */ jsx(Pressable, { href: crumb.href, children: crumb.label }) }) })
       ] }, index)),
@@ -601,13 +631,13 @@ function ArticleCompactTocComponent({
       /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbPage, { children: currentPage }) })
     ] }) });
   }, [breadcrumbsSlot, breadcrumbs, currentPage, breadcrumbClassName]);
-  const renderTocLinks = React4.useCallback(
+  const renderTocLinks = React5.useCallback(
     (onLinkClick) => {
       if (!sections) return null;
       return sections.map((section) => {
         const isActive = activeSection === section.id;
         if (renderSectionLink) {
-          return /* @__PURE__ */ jsx(React4.Fragment, { children: renderSectionLink(section, isActive) }, section.id);
+          return /* @__PURE__ */ jsx(React5.Fragment, { children: renderSectionLink(section, isActive) }, section.id);
         }
         return /* @__PURE__ */ jsx(
           Pressable,
@@ -626,7 +656,7 @@ function ArticleCompactTocComponent({
     },
     [sections, activeSection, renderSectionLink]
   );
-  const tocContent = React4.useMemo(() => {
+  const tocContent = React5.useMemo(() => {
     if (tocSlot) return tocSlot;
     if (!sections || sections.length === 0) return null;
     return /* @__PURE__ */ jsx("div", { className: "mb-8 lg:hidden", children: /* @__PURE__ */ jsxs(Popover, { open: isTocOpen, onOpenChange: setIsTocOpen, children: [
@@ -660,14 +690,14 @@ function ArticleCompactTocComponent({
     ] }) });
   }, [tocSlot, sections, isTocOpen, tocClassName, renderTocLinks]);
   const hasDesktopToc = !tocSlot && sections && sections.length > 0;
-  const desktopTocContent = React4.useMemo(() => {
+  const desktopTocContent = React5.useMemo(() => {
     if (!hasDesktopToc) return null;
     return /* @__PURE__ */ jsx("aside", { className: cn("hidden lg:block w-64 shrink-0", tocClassName), children: /* @__PURE__ */ jsxs("nav", { className: "sticky top-24 max-h-[calc(100vh-8rem)] overflow-y-auto space-y-2 rounded-lg border p-4", children: [
       /* @__PURE__ */ jsx("span", { className: "mb-3 block text-sm font-semibold", children: "Table of Contents" }),
       renderTocLinks()
     ] }) });
   }, [hasDesktopToc, tocClassName, renderTocLinks]);
-  const heroMediaContent = React4.useMemo(() => {
+  const heroMediaContent = React5.useMemo(() => {
     if (heroMediaSlot) return heroMediaSlot;
     if (!heroImageSrc) return null;
     return /* @__PURE__ */ jsx(
@@ -692,6 +722,7 @@ function ArticleCompactTocComponent({
   return /* @__PURE__ */ jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,
@@ -739,25 +770,22 @@ function ArticleCompactTocComponent({
                 ),
                 children: [
                   heroMediaContent,
-                  renderMode === "markdown" && markdownString ? /* @__PURE__ */ jsx(
-                    Markdown,
+                  /* @__PURE__ */ jsx(
+                    LongformContent,
                     {
-                      overrides: {
-                        img: (props) => /* @__PURE__ */ jsx(Img, { ...props, optixFlowConfig }),
-                        a: Pressable
-                      },
+                      renderMode,
+                      markdownString,
+                      optixFlowConfig,
                       markdownStyles,
-                      children: markdownString
+                      children
                     }
-                  ) : children,
-                  /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-24", children: /* @__PURE__ */ jsx(
+                  ),
+                  /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsx(
                     SocialShare,
                     {
                       variant: "combo",
-                      postTitle: title && typeof title === "string" ? title : "",
-                      shareUrl: window?.location?.href,
-                      summaryContent: description && typeof description === "string" ? description : "",
-                      disableImageAttachments: true
+                      postTitle: title,
+                      summaryContent: description
                     }
                   ) })
                 ]

package/dist/article-hero-prose.cjs

@@ -2,7 +2,7 @@
 'use strict';
 
 var socialShare = require('@page-speed/social-share');
-var React3 = require('react');
+var React4 = require('react');
 var format = require('date-fns/format');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
@@ -30,7 +30,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
+var React4__namespace = /*#__PURE__*/_interopNamespace(React4);
 var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive);
 
 // components/blocks/article/article-hero-prose.tsx
@@ -98,7 +98,7 @@ var maxWidthStyles = {
   "4xl": "max-w-[1536px]",
   full: "max-w-full"
 };
-var Container = React3__namespace.default.forwardRef(
+var Container = React4__namespace.default.forwardRef(
   ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
     const Component = as;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -404,7 +404,7 @@ var spacingStyles = {
 };
 var predefinedSpacings = ["none", "sm", "md", "lg", "xl", "hero"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
-var Section = React3__namespace.default.forwardRef(
+var Section = React4__namespace.default.forwardRef(
   ({
     id,
     title,
@@ -465,7 +465,37 @@ var Section = React3__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
+function LongformContent({
+  children,
+  renderMode = "jsx",
+  markdownString,
+  optixFlowConfig,
+  markdownStyles
+}) {
+  const shouldRenderMarkdown = React4__namespace.useMemo(() => {
+    return renderMode === "markdown" && typeof markdownString === "string" && markdownString.length > 0;
+  }, [renderMode, markdownString]);
+  if (shouldRenderMarkdown && markdownString) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      core.Markdown,
+      {
+        markdownStyles,
+        optixFlowConfig,
+        overrides: {
+          img: img.Img,
+          a: pressable.Pressable
+        },
+        children: markdownString
+      }
+    );
+  }
+  if (children) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+  }
+  return null;
+}
 function ArticleHeroProseComponent({
+  sectionId = "article-hero-prose",
   post,
   className,
   headerClassName,
@@ -497,7 +527,7 @@ function ArticleHeroProseComponent({
     description,
     authorImage
   } = post ?? {};
-  const authorContent = React3__namespace.useMemo(() => {
+  const authorContent = React4__namespace.useMemo(() => {
     if (authorSlot) return authorSlot;
     if (!authorName) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -531,7 +561,7 @@ function ArticleHeroProseComponent({
     dateFormat,
     authorClassName
   ]);
-  const heroMediaContent = React3__namespace.useMemo(() => {
+  const heroMediaContent = React4__namespace.useMemo(() => {
     if (heroMediaSlot) return heroMediaSlot;
     if (!image) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -550,6 +580,7 @@ function ArticleHeroProseComponent({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,
@@ -598,27 +629,24 @@ function ArticleHeroProseComponent({
               "mx-auto",
               proseClassName
             ),
-            children: renderMode === "markdown" && markdownString ? /* @__PURE__ */ jsxRuntime.jsx(
-              core.Markdown,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              LongformContent,
               {
-                overrides: {
-                  img: (props) => /* @__PURE__ */ jsxRuntime.jsx(img.Img, { ...props, optixFlowConfig }),
-                  a: pressable.Pressable
-                },
+                renderMode,
+                markdownString,
+                optixFlowConfig,
                 markdownStyles,
-                children: markdownString
+                children
               }
-            ) : children
+            )
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-24", children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsxRuntime.jsx(
           socialShare.SocialShare,
           {
             variant: "combo",
-            postTitle: title && typeof title === "string" ? title : "",
-            shareUrl: window?.location?.href,
-            summaryContent: description && typeof description === "string" ? description : "",
-            disableImageAttachments: true
+            postTitle: title,
+            summaryContent: description
           }
         ) })
       ]

package/dist/article-hero-prose.d.cts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { MarkdownStylesMap } from '@page-speed/markdown-to-jsx';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-2nI4WPsD.cjs';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-D8cbIf_y.cjs';
 import { O as OptixFlowConfig } from './blocks-DL92rOxr.cjs';
 import 'class-variance-authority';
 import '@page-speed/pressable';
@@ -104,7 +104,9 @@ interface ArticleHeroProseProps {
      * Pattern opacity (0-1)
      */
     patternOpacity?: number;
+    /** Optional Section ID */
+    sectionId?: string;
 }
-declare function ArticleHeroProseComponent({ post, className, headerClassName, titleClassName, descriptionClassName, authorClassName, heroImageClassName, proseClassName, heroMediaSlot, authorSlot, children, renderMode, markdownString, markdownStyles, dateFormat, optixFlowConfig, background, containerClassName, spacing, pattern, patternOpacity, }: ArticleHeroProseProps): react_jsx_runtime.JSX.Element;
+declare function ArticleHeroProseComponent({ sectionId, post, className, headerClassName, titleClassName, descriptionClassName, authorClassName, heroImageClassName, proseClassName, heroMediaSlot, authorSlot, children, renderMode, markdownString, markdownStyles, dateFormat, optixFlowConfig, background, containerClassName, spacing, pattern, patternOpacity, }: ArticleHeroProseProps): react_jsx_runtime.JSX.Element;
 
 export { ArticleHeroProseComponent as ArticleHeroProse, type ArticleHeroProsePost, type ArticleHeroProseProps };

package/dist/article-hero-prose.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { MarkdownStylesMap } from '@page-speed/markdown-to-jsx';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-RgHoLtLt.js';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-qC2HCInM.js';
 import { O as OptixFlowConfig } from './blocks-DL92rOxr.js';
 import 'class-variance-authority';
 import '@page-speed/pressable';
@@ -104,7 +104,9 @@ interface ArticleHeroProseProps {
      * Pattern opacity (0-1)
      */
     patternOpacity?: number;
+    /** Optional Section ID */
+    sectionId?: string;
 }
-declare function ArticleHeroProseComponent({ post, className, headerClassName, titleClassName, descriptionClassName, authorClassName, heroImageClassName, proseClassName, heroMediaSlot, authorSlot, children, renderMode, markdownString, markdownStyles, dateFormat, optixFlowConfig, background, containerClassName, spacing, pattern, patternOpacity, }: ArticleHeroProseProps): react_jsx_runtime.JSX.Element;
+declare function ArticleHeroProseComponent({ sectionId, post, className, headerClassName, titleClassName, descriptionClassName, authorClassName, heroImageClassName, proseClassName, heroMediaSlot, authorSlot, children, renderMode, markdownString, markdownStyles, dateFormat, optixFlowConfig, background, containerClassName, spacing, pattern, patternOpacity, }: ArticleHeroProseProps): react_jsx_runtime.JSX.Element;
 
 export { ArticleHeroProseComponent as ArticleHeroProse, type ArticleHeroProsePost, type ArticleHeroProseProps };

package/dist/article-hero-prose.js

@@ -1,14 +1,14 @@
 "use client";
 import { SocialShare } from '@page-speed/social-share';
-import * as React3 from 'react';
-import React3__default from 'react';
+import * as React4 from 'react';
+import React4__default from 'react';
 import { format } from 'date-fns/format';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Img } from '@page-speed/img';
 import { Pressable } from '@page-speed/pressable';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Markdown } from '@page-speed/markdown-to-jsx/core';
 
 // components/blocks/article/article-hero-prose.tsx
@@ -76,7 +76,7 @@ var maxWidthStyles = {
   "4xl": "max-w-[1536px]",
   full: "max-w-full"
 };
-var Container = React3__default.forwardRef(
+var Container = React4__default.forwardRef(
   ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
     const Component = as;
     return /* @__PURE__ */ jsx(
@@ -382,7 +382,7 @@ var spacingStyles = {
 };
 var predefinedSpacings = ["none", "sm", "md", "lg", "xl", "hero"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
-var Section = React3__default.forwardRef(
+var Section = React4__default.forwardRef(
   ({
     id,
     title,
@@ -443,7 +443,37 @@ var Section = React3__default.forwardRef(
   }
 );
 Section.displayName = "Section";
+function LongformContent({
+  children,
+  renderMode = "jsx",
+  markdownString,
+  optixFlowConfig,
+  markdownStyles
+}) {
+  const shouldRenderMarkdown = React4.useMemo(() => {
+    return renderMode === "markdown" && typeof markdownString === "string" && markdownString.length > 0;
+  }, [renderMode, markdownString]);
+  if (shouldRenderMarkdown && markdownString) {
+    return /* @__PURE__ */ jsx(
+      Markdown,
+      {
+        markdownStyles,
+        optixFlowConfig,
+        overrides: {
+          img: Img,
+          a: Pressable
+        },
+        children: markdownString
+      }
+    );
+  }
+  if (children) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  return null;
+}
 function ArticleHeroProseComponent({
+  sectionId = "article-hero-prose",
   post,
   className,
   headerClassName,
@@ -475,7 +505,7 @@ function ArticleHeroProseComponent({
     description,
     authorImage
   } = post ?? {};
-  const authorContent = React3.useMemo(() => {
+  const authorContent = React4.useMemo(() => {
     if (authorSlot) return authorSlot;
     if (!authorName) return null;
     return /* @__PURE__ */ jsxs(
@@ -509,7 +539,7 @@ function ArticleHeroProseComponent({
     dateFormat,
     authorClassName
   ]);
-  const heroMediaContent = React3.useMemo(() => {
+  const heroMediaContent = React4.useMemo(() => {
     if (heroMediaSlot) return heroMediaSlot;
     if (!image) return null;
     return /* @__PURE__ */ jsx(
@@ -528,6 +558,7 @@ function ArticleHeroProseComponent({
   return /* @__PURE__ */ jsxs(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,
@@ -576,27 +607,24 @@ function ArticleHeroProseComponent({
               "mx-auto",
               proseClassName
             ),
-            children: renderMode === "markdown" && markdownString ? /* @__PURE__ */ jsx(
-              Markdown,
+            children: /* @__PURE__ */ jsx(
+              LongformContent,
               {
-                overrides: {
-                  img: (props) => /* @__PURE__ */ jsx(Img, { ...props, optixFlowConfig }),
-                  a: Pressable
-                },
+                renderMode,
+                markdownString,
+                optixFlowConfig,
                 markdownStyles,
-                children: markdownString
+                children
               }
-            ) : children
+            )
           }
         ) }),
-        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-24", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsx(
           SocialShare,
           {
             variant: "combo",
-            postTitle: title && typeof title === "string" ? title : "",
-            shareUrl: window?.location?.href,
-            summaryContent: description && typeof description === "string" ? description : "",
-            disableImageAttachments: true
+            postTitle: title,
+            summaryContent: description
           }
         ) })
       ]

package/dist/article-sidebar-sticky.cjs

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var React4 = require('react');
+var React5 = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var img = require('@page-speed/img');
@@ -9,8 +9,8 @@ var pressable = require('@page-speed/pressable');
 var icon = require('@page-speed/icon');
 var jsxRuntime = require('react/jsx-runtime');
 var AvatarPrimitive = require('@radix-ui/react-avatar');
-var core = require('@page-speed/markdown-to-jsx/core');
 var socialShare = require('@page-speed/social-share');
+var core = require('@page-speed/markdown-to-jsx/core');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -30,7 +30,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React4__namespace = /*#__PURE__*/_interopNamespace(React4);
+var React5__namespace = /*#__PURE__*/_interopNamespace(React5);
 var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive);
 
 // components/blocks/article/article-sidebar-sticky.tsx
@@ -45,7 +45,7 @@ function getProseClassName(parentBg, additionalClasses) {
   return additionalClasses ? `${baseClasses} ${additionalClasses}` : baseClasses;
 }
 var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
-var DynamicIcon = React4__namespace.memo(function DynamicIcon2({
+var DynamicIcon = React5__namespace.memo(function DynamicIcon2({
   apiKey,
   ...props
 }) {
@@ -106,7 +106,7 @@ var maxWidthStyles = {
   "4xl": "max-w-[1536px]",
   full: "max-w-full"
 };
-var Container = React4__namespace.default.forwardRef(
+var Container = React5__namespace.default.forwardRef(
   ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
     const Component = as;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -412,7 +412,7 @@ var spacingStyles = {
 };
 var predefinedSpacings = ["none", "sm", "md", "lg", "xl", "hero"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
-var Section = React4__namespace.default.forwardRef(
+var Section = React5__namespace.default.forwardRef(
   ({
     id,
     title,
@@ -473,7 +473,37 @@ var Section = React4__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
+function LongformContent({
+  children,
+  renderMode = "jsx",
+  markdownString,
+  optixFlowConfig,
+  markdownStyles
+}) {
+  const shouldRenderMarkdown = React5__namespace.useMemo(() => {
+    return renderMode === "markdown" && typeof markdownString === "string" && markdownString.length > 0;
+  }, [renderMode, markdownString]);
+  if (shouldRenderMarkdown && markdownString) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      core.Markdown,
+      {
+        markdownStyles,
+        optixFlowConfig,
+        overrides: {
+          img: img.Img,
+          a: pressable.Pressable
+        },
+        children: markdownString
+      }
+    );
+  }
+  if (children) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+  }
+  return null;
+}
 function ArticleSidebarStickyComponent({
+  sectionId = "article-sidebar-sticky",
   className,
   sidebarClassName,
   articleClassName,
@@ -508,7 +538,7 @@ function ArticleSidebarStickyComponent({
   patternOpacity,
   sidebarContent
 }) {
-  const backLinkContent = React4__namespace.useMemo(() => {
+  const backLinkContent = React5__namespace.useMemo(() => {
     if (backLinkSlot) return backLinkSlot;
     if (!backHref && !backText) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -526,7 +556,7 @@ function ArticleSidebarStickyComponent({
       }
     );
   }, [backLinkSlot, backHref, backText, backIcon, backLinkClassName]);
-  const renderAuthor = React4__namespace.useCallback(
+  const renderAuthor = React5__namespace.useCallback(
     (isMobile = false) => {
       if (authorSlot) return authorSlot;
       if (!authorName) return null;
@@ -558,7 +588,7 @@ function ArticleSidebarStickyComponent({
       authorClassName
     ]
   );
-  const heroMediaContent = React4__namespace.useMemo(() => {
+  const heroMediaContent = React5__namespace.useMemo(() => {
     if (heroMediaSlot) return heroMediaSlot;
     if (!heroImageSrc) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -583,6 +613,7 @@ function ArticleSidebarStickyComponent({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,
@@ -620,25 +651,22 @@ function ArticleSidebarStickyComponent({
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "not-prose mt-4 lg:hidden", children: renderAuthor(true) }),
               sidebarContent ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "not-prose mt-4 lg:hidden", children: sidebarContent }) : null,
               heroMediaContent,
-              renderMode === "markdown" && markdownString ? /* @__PURE__ */ jsxRuntime.jsx(
-                core.Markdown,
+              /* @__PURE__ */ jsxRuntime.jsx(
+                LongformContent,
                 {
-                  overrides: {
-                    img: (props) => /* @__PURE__ */ jsxRuntime.jsx(img.Img, { ...props, optixFlowConfig }),
-                    a: pressable.Pressable
-                  },
+                  renderMode,
+                  markdownString,
+                  optixFlowConfig,
                   markdownStyles,
-                  children: markdownString
+                  children
                 }
-              ) : children,
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-24", children: /* @__PURE__ */ jsxRuntime.jsx(
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsxRuntime.jsx(
                 socialShare.SocialShare,
                 {
                   variant: "combo",
-                  postTitle: title && typeof title === "string" ? title : "",
-                  shareUrl: window?.location?.href,
-                  summaryContent: summary && typeof summary === "string" ? summary : "",
-                  disableImageAttachments: true
+                  postTitle: title,
+                  summaryContent: summary
                 }
               ) })
             ]