@opensite/ui 3.0.4 → 3.0.6

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 markdownToJsx = require('@page-speed/markdown-to-jsx');
 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,
@@ -499,6 +529,7 @@ function ArticleSidebarStickyComponent({
   children,
   renderMode = "jsx",
   markdownString,
+  markdownStyles,
   optixFlowConfig,
   background,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
@@ -507,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(
@@ -525,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;
@@ -557,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(
@@ -582,6 +613,7 @@ function ArticleSidebarStickyComponent({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,
@@ -619,24 +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(
-                markdownToJsx.Markdown,
+              /* @__PURE__ */ jsxRuntime.jsx(
+                LongformContent,
                 {
-                  overrides: {
-                    img: (props) => /* @__PURE__ */ jsxRuntime.jsx(img.Img, { ...props, optixFlowConfig }),
-                    a: pressable.Pressable
-                  },
-                  children: markdownString
+                  renderMode,
+                  markdownString,
+                  optixFlowConfig,
+                  markdownStyles,
+                  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
                 }
               ) })
             ]

package/dist/article-sidebar-sticky.d.cts

@@ -1,6 +1,7 @@
 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-2nI4WPsD.cjs';
+import { MarkdownStylesMap } from '@page-speed/markdown-to-jsx';
+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';
@@ -112,6 +113,11 @@ interface ArticleSidebarStickyProps {
      * Markdown string to render (when renderMode is "markdown")
      */
     markdownString?: string;
+    /**
+     * Custom className mappings for markdown elements
+     * @example { h2: 'text-3xl font-bold', img: 'rounded-lg shadow-md' }
+     */
+    markdownStyles?: MarkdownStylesMap;
     /**
      * Sidebar content
      */
@@ -136,7 +142,9 @@ interface ArticleSidebarStickyProps {
      * Pattern opacity (0-1)
      */
     patternOpacity?: number;
+    /** Optional Section ID */
+    sectionId?: string;
 }
-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, renderMode, markdownString, optixFlowConfig, background, containerClassName, spacing, pattern, patternOpacity, sidebarContent, }: ArticleSidebarStickyProps): react_jsx_runtime.JSX.Element;
+declare function ArticleSidebarStickyComponent({ sectionId, className, sidebarClassName, articleClassName, titleClassName, authorClassName, heroImageClassName, backLinkClassName, backHref, backText, backIcon, backLinkSlot, title, summary, summaryClassName, authorName, authorImage, authorHref, publishDate, authorSlot, heroImageSrc, heroImageAlt, heroMediaSlot, children, renderMode, markdownString, markdownStyles, 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,6 +1,7 @@
 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-RgHoLtLt.js';
+import { MarkdownStylesMap } from '@page-speed/markdown-to-jsx';
+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';
@@ -112,6 +113,11 @@ interface ArticleSidebarStickyProps {
      * Markdown string to render (when renderMode is "markdown")
      */
     markdownString?: string;
+    /**
+     * Custom className mappings for markdown elements
+     * @example { h2: 'text-3xl font-bold', img: 'rounded-lg shadow-md' }
+     */
+    markdownStyles?: MarkdownStylesMap;
     /**
      * Sidebar content
      */
@@ -136,7 +142,9 @@ interface ArticleSidebarStickyProps {
      * Pattern opacity (0-1)
      */
     patternOpacity?: number;
+    /** Optional Section ID */
+    sectionId?: string;
 }
-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, renderMode, markdownString, optixFlowConfig, background, containerClassName, spacing, pattern, patternOpacity, sidebarContent, }: ArticleSidebarStickyProps): react_jsx_runtime.JSX.Element;
+declare function ArticleSidebarStickyComponent({ sectionId, className, sidebarClassName, articleClassName, titleClassName, authorClassName, heroImageClassName, backLinkClassName, backHref, backText, backIcon, backLinkSlot, title, summary, summaryClassName, authorName, authorImage, authorHref, publishDate, authorSlot, heroImageSrc, heroImageAlt, heroMediaSlot, children, renderMode, markdownString, markdownStyles, 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

@@ -1,15 +1,15 @@
 "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 * as AvatarPrimitive from '@radix-ui/react-avatar';
-import { Markdown } from '@page-speed/markdown-to-jsx';
 import { SocialShare } from '@page-speed/social-share';
+import { Markdown } from '@page-speed/markdown-to-jsx/core';
 
 // components/blocks/article/article-sidebar-sticky.tsx
 function cn(...inputs) {
@@ -23,7 +23,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
 }) {
@@ -84,7 +84,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(
@@ -390,7 +390,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,
@@ -451,7 +451,37 @@ var Section = React4__default.forwardRef(
   }
 );
 Section.displayName = "Section";
+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 ArticleSidebarStickyComponent({
+  sectionId = "article-sidebar-sticky",
   className,
   sidebarClassName,
   articleClassName,
@@ -477,6 +507,7 @@ function ArticleSidebarStickyComponent({
   children,
   renderMode = "jsx",
   markdownString,
+  markdownStyles,
   optixFlowConfig,
   background,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
@@ -485,7 +516,7 @@ function ArticleSidebarStickyComponent({
   patternOpacity,
   sidebarContent
 }) {
-  const backLinkContent = React4.useMemo(() => {
+  const backLinkContent = React5.useMemo(() => {
     if (backLinkSlot) return backLinkSlot;
     if (!backHref && !backText) return null;
     return /* @__PURE__ */ jsxs(
@@ -503,7 +534,7 @@ function ArticleSidebarStickyComponent({
       }
     );
   }, [backLinkSlot, backHref, backText, backIcon, backLinkClassName]);
-  const renderAuthor = React4.useCallback(
+  const renderAuthor = React5.useCallback(
     (isMobile = false) => {
       if (authorSlot) return authorSlot;
       if (!authorName) return null;
@@ -535,7 +566,7 @@ function ArticleSidebarStickyComponent({
       authorClassName
     ]
   );
-  const heroMediaContent = React4.useMemo(() => {
+  const heroMediaContent = React5.useMemo(() => {
     if (heroMediaSlot) return heroMediaSlot;
     if (!heroImageSrc) return null;
     return /* @__PURE__ */ jsx(
@@ -560,6 +591,7 @@ function ArticleSidebarStickyComponent({
   return /* @__PURE__ */ jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,
@@ -597,24 +629,22 @@ function ArticleSidebarStickyComponent({
               /* @__PURE__ */ jsx("div", { className: "not-prose mt-4 lg:hidden", children: renderAuthor(true) }),
               sidebarContent ? /* @__PURE__ */ jsx("div", { className: "not-prose mt-4 lg:hidden", children: sidebarContent }) : null,
               heroMediaContent,
-              renderMode === "markdown" && markdownString ? /* @__PURE__ */ jsx(
-                Markdown,
+              /* @__PURE__ */ jsx(
+                LongformContent,
                 {
-                  overrides: {
-                    img: (props) => /* @__PURE__ */ jsx(Img, { ...props, optixFlowConfig }),
-                    a: Pressable
-                  },
-                  children: markdownString
+                  renderMode,
+                  markdownString,
+                  optixFlowConfig,
+                  markdownStyles,
+                  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: summary && typeof summary === "string" ? summary : "",
-                  disableImageAttachments: true
+                  postTitle: title,
+                  summaryContent: summary
                 }
               ) })
             ]

package/dist/article-split-animated.cjs

@@ -479,6 +479,7 @@ var Section = React3__namespace.default.forwardRef(
 );
 Section.displayName = "Section";
 function ArticleSplitAnimatedComponent({
+  sectionId = "article-split-animated",
   className,
   imageContainerClassName,
   contentClassName,
@@ -613,6 +614,7 @@ function ArticleSplitAnimatedComponent({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/article-split-animated.d.cts

@@ -1,6 +1,6 @@
 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-2nI4WPsD.cjs';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-D8cbIf_y.cjs';
 import { A as ActionConfig, O as OptixFlowConfig } from './blocks-DL92rOxr.cjs';
 import 'class-variance-authority';
 import '@page-speed/pressable';
@@ -140,7 +140,9 @@ interface ArticleSplitAnimatedProps {
      * Pattern opacity (0-1)
      */
     patternOpacity?: number;
+    /** Optional Section ID */
+    sectionId?: string;
 }
-declare function ArticleSplitAnimatedComponent({ className, imageContainerClassName, contentClassName, titleClassName, descriptionClassName, authorClassName, categoryClassName, metaClassName, ctaClassName, title, description, image, imageAlt, heroMediaSlot, authorName, authorImage, authorRole, authorHref, authorSlot, publishDate, readTime, category, categoryHref, categorySlot, ctaActions, ctaSlot, enableAnimations, optixFlowConfig, background, pattern, patternOpacity, containerClassName, spacing, }: ArticleSplitAnimatedProps): react_jsx_runtime.JSX.Element;
+declare function ArticleSplitAnimatedComponent({ sectionId, className, imageContainerClassName, contentClassName, titleClassName, descriptionClassName, authorClassName, categoryClassName, metaClassName, ctaClassName, title, description, image, imageAlt, heroMediaSlot, authorName, authorImage, authorRole, authorHref, authorSlot, publishDate, readTime, category, categoryHref, categorySlot, ctaActions, ctaSlot, enableAnimations, optixFlowConfig, background, pattern, patternOpacity, containerClassName, spacing, }: ArticleSplitAnimatedProps): react_jsx_runtime.JSX.Element;
 
 export { ArticleSplitAnimatedComponent as ArticleSplitAnimated, type ArticleSplitAnimatedProps };

package/dist/article-split-animated.d.ts

@@ -1,6 +1,6 @@
 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-RgHoLtLt.js';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-qC2HCInM.js';
 import { A as ActionConfig, O as OptixFlowConfig } from './blocks-DL92rOxr.js';
 import 'class-variance-authority';
 import '@page-speed/pressable';
@@ -140,7 +140,9 @@ interface ArticleSplitAnimatedProps {
      * Pattern opacity (0-1)
      */
     patternOpacity?: number;
+    /** Optional Section ID */
+    sectionId?: string;
 }
-declare function ArticleSplitAnimatedComponent({ className, imageContainerClassName, contentClassName, titleClassName, descriptionClassName, authorClassName, categoryClassName, metaClassName, ctaClassName, title, description, image, imageAlt, heroMediaSlot, authorName, authorImage, authorRole, authorHref, authorSlot, publishDate, readTime, category, categoryHref, categorySlot, ctaActions, ctaSlot, enableAnimations, optixFlowConfig, background, pattern, patternOpacity, containerClassName, spacing, }: ArticleSplitAnimatedProps): react_jsx_runtime.JSX.Element;
+declare function ArticleSplitAnimatedComponent({ sectionId, className, imageContainerClassName, contentClassName, titleClassName, descriptionClassName, authorClassName, categoryClassName, metaClassName, ctaClassName, title, description, image, imageAlt, heroMediaSlot, authorName, authorImage, authorRole, authorHref, authorSlot, publishDate, readTime, category, categoryHref, categorySlot, ctaActions, ctaSlot, enableAnimations, optixFlowConfig, background, pattern, patternOpacity, containerClassName, spacing, }: ArticleSplitAnimatedProps): react_jsx_runtime.JSX.Element;
 
 export { ArticleSplitAnimatedComponent as ArticleSplitAnimated, type ArticleSplitAnimatedProps };

package/dist/article-split-animated.js

@@ -456,6 +456,7 @@ var Section = React3__default.forwardRef(
 );
 Section.displayName = "Section";
 function ArticleSplitAnimatedComponent({
+  sectionId = "article-split-animated",
   className,
   imageContainerClassName,
   contentClassName,
@@ -590,6 +591,7 @@ function ArticleSplitAnimatedComponent({
   return /* @__PURE__ */ jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,