@stoplight/elements-core 7.5.8 → 7.5.12

package/components/Docs/Article/index.d.ts

@@ -1,5 +1,5 @@
-import { MDAST } from '@stoplight/markdown';
+import { IMarkdownViewerProps } from '@stoplight/markdown-viewer';
 import { DocsComponentProps } from '..';
-declare type ArticleProps = DocsComponentProps<string | MDAST.Root>;
+declare type ArticleProps = DocsComponentProps<IMarkdownViewerProps['markdown']>;
 export declare const Article: import("react").FunctionComponent<ArticleProps & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;
 export {};

package/components/Docs/story-helper.d.ts

@@ -5,5 +5,5 @@ interface HelperReturn<P> {
     createStory(name: string, input: Partial<P>): Story<P>;
     createHoistedStory(input: Partial<P>): Story<P>;
 }
-export declare const createStoriesForDocsComponent: <P>(Component: React.ComponentType<P>) => HelperReturn<P>;
+export declare const createStoriesForDocsComponent: <P>(Component: React.ComponentType<P>, title?: string | undefined) => HelperReturn<P>;
 export {};

package/components/MarkdownViewer/CustomComponents/ResolvedImage.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { BundledBranchNode } from '../../../types';
-export declare const createResolvedImageComponent: (branchNode: BundledBranchNode) => React.NamedExoticComponent<import("react").ImgHTMLAttributes<unknown> & import("@stoplight/markdown/ast-types/hast").ImageProperties>;
+export declare const createResolvedImageComponent: (branchNode: BundledBranchNode) => React.NamedExoticComponent<import("react").ImgHTMLAttributes<HTMLImageElement> & import("@stoplight/markdown/ast-types/hast").ImageProperties>;

package/core.css

@@ -0,0 +1,77 @@
+.sl-elements {
+  font-size: 13px;
+}
+
+.sl-elements .svg-inline--fa {
+  display: inline-block;
+}
+
+/* Docs */
+
+.sl-elements .DocsSkeleton {
+  animation: 500ms linear infinite alternate skeleton-glow;
+  background: rgba(206, 217, 224, 0.2);
+  background-clip: padding-box !important;
+  border-color: rgba(206, 217, 224, 0.2) !important;
+  border-radius: 2px;
+  box-shadow: none !important;
+  color: transparent !important;
+  cursor: default;
+  pointer-events: none;
+  user-select: none;
+}
+
+.sl-elements .Model {
+  --fs-code: 12px;
+}
+
+/* Table of Contents */
+
+.sl-elements .ElementsTableOfContentsItem:hover {
+  text-decoration: none;
+  color: inherit;
+}
+
+/* TryIt */
+
+.sl-elements .ParameterGrid {
+  display: grid;
+  grid-template-columns: fit-content(120px) 20px auto;
+  row-gap: 3px;
+  align-items: center;
+  padding-bottom: 0;
+  margin-bottom: 16px;
+}
+
+.sl-elements .TryItPanel > :nth-child(2) {
+  /* This, along with the padding:0 margin: 16s above causes margin collapse to guarantee correct spacing around the panels & send button */
+  overflow: auto;
+}
+
+.sl-elements .OperationParametersContent {
+  max-height: 162px; /* 4.5 lines plus padding */
+}
+
+.sl-elements .TextRequestBody {
+  max-height: 200px;
+  overflow-y: auto;
+  padding-bottom: 0;
+  margin-bottom: 16px;
+}
+
+/* HttpOperation */
+
+.sl-elements .HttpOperation .JsonSchemaViewer .sl-markdown-viewer p {
+  font-size: 12px;
+  line-height: 1.5em;
+}
+
+.sl-elements .HttpOperation__Parameters .sl-markdown-viewer p {
+  font-size: 12px;
+  line-height: 1.5em;
+}
+
+.sl-elements .Model .JsonSchemaViewer .sl-markdown-viewer p {
+  font-size: 12px;
+  line-height: 1.5em;
+}

package/index.esm.js

@@ -5,18 +5,15 @@ import { resolveInlineRef, isPlainObject as isPlainObject$1, safeParse, safeStri
 import isArray from 'lodash/isArray.js';
 import isObject from 'lodash/isObject.js';
 import isPlainObject from 'lodash/isPlainObject.js';
-import { parse } from '@stoplight/markdown';
 import { NodeType, HttpParamStyles } from '@stoplight/types';
-import { parse as parse$1 } from '@stoplight/yaml';
-import { isArray as isArray$1, Box, Flex, Icon, Button, Popover, Panel, CopyButton, Menu, Text, Input, Select, FieldButton, Image, Link, useThemeIsDark, HStack, VStack, InvertTheme, Tooltip, Badge, LinkHeading, Tabs, TabList, Tab, TabPanels, TabPanel, Heading as Heading$1, useClipboard, useMosaicContext, Provider as Provider$1 } from '@stoplight/mosaic';
+import { parse } from '@stoplight/yaml';
+import { isArray as isArray$1, Box, Panel, CopyButton, Menu, Button, Text, Flex, Input, Icon, Select, FieldButton, Image, Link, useThemeIsDark, HStack, VStack, InvertTheme, Tooltip, Badge, LinkHeading, Tabs, TabList, Tab, TabPanels, TabPanel, Heading, useClipboard, useMosaicContext, Provider as Provider$1 } from '@stoplight/mosaic';
 import { withErrorBoundary } from '@stoplight/react-error-boundary';
 import { MarkdownViewer as MarkdownViewer$1, DefaultSMDComponents, MarkdownViewerProvider } from '@stoplight/markdown-viewer';
 export { DefaultSMDComponents } from '@stoplight/markdown-viewer';
-import { faStream, faCrosshairs, faCloud, faBookOpen, faCube, faDatabase, faQuestionCircle, faExclamationCircle, faServer, faExclamationTriangle, faEye, faBolt, faCopy, faCheck } from '@fortawesome/free-solid-svg-icons';
-import throttle from 'lodash/throttle.js';
-import { selectAll } from 'unist-util-select';
 import cn from 'classnames';
 import { atomWithStorage, useAtomValue } from 'jotai/utils';
+import { faCrosshairs, faCloud, faBookOpen, faCube, faDatabase, faQuestionCircle, faExclamationCircle, faServer, faExclamationTriangle, faEye, faBolt, faCopy, faCheck } from '@fortawesome/free-solid-svg-icons';
 import { atom, useAtom, Provider } from 'jotai';
 import URI from 'urijs';
 import { CodeViewer } from '@stoplight/mosaic-code-viewer';
@@ -164,13 +161,7 @@ const parserMap = {
     [NodeType.Unknown]: parseUnknown,
 };
 function parseArticleData(rawData) {
-    if (typeof rawData === 'string') {
-        return {
-            type: NodeType.Article,
-            data: parse(rawData),
-        };
-    }
-    if (isSMDASTRoot(rawData)) {
+    if (typeof rawData === 'string' || isSMDASTRoot(rawData)) {
         return {
             type: NodeType.Article,
             data: rawData,
@@ -213,7 +204,7 @@ function tryParseYamlOrObject(yamlOrObject) {
         return yamlOrObject;
     if (typeof yamlOrObject === 'string') {
         try {
-            return parse$1(yamlOrObject);
+            return parse(yamlOrObject);
         }
         catch (e) { }
     }
@@ -228,94 +219,9 @@ const MarkdownViewer = (props) => {
 };
 MarkdownViewer.displayName = 'MarkdownViewer';
 
-function useComponentSize(container) {
-    const [componentSize, setComponentSize] = React.useState({ width: 0, height: 0 });
-    React.useEffect(() => {
-        if (!container) {
-            return;
-        }
-        const updateComponentSize = throttle(() => (container ? setComponentSize(container.getBoundingClientRect()) : { width: 0, height: 0 }), 1000, {
-            trailing: true,
-        });
-        updateComponentSize();
-        window.addEventListener('resize', updateComponentSize);
-        return () => {
-            updateComponentSize.cancel();
-            window.removeEventListener('resize', updateComponentSize);
-        };
-    }, [container]);
-    return componentSize;
-}
-
-function useComputeMarkdownHeadings(tree) {
-    return React.useMemo(() => computeMarkdownHeadings(tree), [tree]);
-}
-function computeMarkdownHeadings(tree) {
-    return selectAll(':root > [type=heading]', tree)
-        .map((heading) => {
-        var _a;
-        return ({
-            title: findTitle(heading),
-            id: ((_a = heading.data) === null || _a === void 0 ? void 0 : _a.id) || '',
-            depth: heading.depth - 1,
-        });
-    })
-        .filter((item) => item.depth >= 1 && item.depth <= 2);
-}
-const findTitle = (parent) => {
-    return selectAll('[type=text]', parent).map(textNode => String(textNode.value)).join(' ');
-};
-
-function useLocationHash() {
-    const isBrowser = typeof window !== 'undefined';
-    const [locationHash, setLocationHash] = React.useState(isBrowser && window.location.hash);
-    React.useEffect(() => {
-        if (!isBrowser)
-            return;
-        const hashChange = () => setLocationHash(window.location.hash);
-        window.addEventListener('hashchange', hashChange, false);
-        return () => window.removeEventListener('hashchange', hashChange);
-    }, [isBrowser]);
-    return locationHash;
-}
-
-const ArticleHeadings = ({ tree, container }) => {
-    const { width } = useComponentSize(container);
-    const showHeadings = width >= 768;
-    const headings = useComputeMarkdownHeadings(tree);
-    return React.createElement(Headings, { className: "ArticleHeadings", headings: headings, minimal: !showHeadings, maxWidth: 300 });
-};
-const Headings = ({ headings, className, title = 'On This Page', minimal, maxWidth }) => {
-    const locationHash = useLocationHash();
-    if (!headings || !headings.length)
-        return null;
-    const component = (React.createElement(Box, { overflowY: "auto", style: { maxHeight: '85vh', maxWidth } },
-        title && (React.createElement(Flex, { py: 2, alignItems: "center", fontSize: "sm", fontWeight: "medium", color: "muted", style: { paddingLeft: 18 } },
-            React.createElement(Box, { as: Icon, icon: faStream, mr: 2 }),
-            title)),
-        headings.map((heading, i) => (React.createElement(Heading, { key: i, item: heading, isSelected: locationHash === `#${heading.id}` })))));
-    const button = React.createElement(Button, { pos: "sticky", size: "sm", borderColor: "light", icon: faStream, style: { top: 10 } });
-    if (minimal) {
-        return (React.createElement(Box, { pos: "sticky", top: 0, right: 0, style: { top: 10 } },
-            React.createElement(Popover, { renderTrigger: button, placement: "bottom" },
-                React.createElement(Box, { className: className }, component))));
-    }
-    return (React.createElement(Box, { pos: "sticky", pr: 4, pl: 16, h: "full", overflowX: "auto", overflowY: "auto", className: className, style: { top: 30 } },
-        React.createElement(Box, { borderL: true, borderColor: "light" }, component)));
-};
-const Heading = ({ item, isSelected }) => {
-    return (React.createElement(Box, { as: "a", href: `#${item.id}`, textOverflow: "truncate", display: "block", py: 2, pr: 8, fontWeight: "medium", fontSize: "sm", color: isSelected ? 'primary' : 'muted', style: { paddingLeft: `${3 + item.depth * 15}px` } }, item.title));
-};
-
 const ArticleComponent = React.memo(({ data }) => {
-    const [container, setContainer] = React.useState(null);
-    const tree = React.useMemo(() => (typeof data === 'object' ? data : parse(data)), [data]);
-    if (tree === null)
-        return null;
-    return (React.createElement(Flex, { className: "sl-elements-article", justifyContent: "evenly", w: "full", pos: "relative", ref: setContainer },
-        React.createElement(Box, { className: "sl-elements-article-content", style: { width: 0 }, flex: 1 },
-            React.createElement(MarkdownViewer, { markdown: tree })),
-        React.createElement(ArticleHeadings, { tree: tree, container: container })));
+    return (React.createElement(Box, { className: "sl-elements-article" },
+        React.createElement(MarkdownViewer, { className: "sl-elements-article-content", markdown: data, includeToc: true })));
 });
 const Article = withErrorBoundary(ArticleComponent, { recoverableProps: ['data'] });
 
@@ -2177,7 +2083,7 @@ const HttpOperationComponent = React.memo(({ className, data: unresolvedData, la
     const hasBadges = isDeprecated || isInternal;
     const header = (!(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.noHeading) || hasBadges) && (React.createElement(VStack, { spacing: 5 },
         React.createElement(HStack, { spacing: 5 },
-            !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.noHeading) && prettyName ? (React.createElement(Heading$1, { size: 1, fontWeight: "semibold" }, prettyName)) : null,
+            !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.noHeading) && prettyName ? (React.createElement(Heading, { size: 1, fontWeight: "semibold" }, prettyName)) : null,
             React.createElement(HStack, { spacing: 2 },
                 isDeprecated && React.createElement(DeprecatedBadge, null),
                 isInternal && React.createElement(InternalBadge, { isHttpService: true }))),
@@ -2301,7 +2207,7 @@ const HttpServiceComponent = React.memo(({ data, location = {}, layoutOptions, e
     const query = new URLSearchParams(search);
     return (React.createElement(Box, { mb: 10 },
         data.name && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.noHeading) && (React.createElement(Flex, { justifyContent: "between", alignItems: "center" },
-            React.createElement(Heading$1, { size: 1, mb: 4, fontWeight: "semibold" }, data.name),
+            React.createElement(Heading, { size: 1, mb: 4, fontWeight: "semibold" }, data.name),
             exportProps && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideExport) && React.createElement(ExportButton, Object.assign({}, exportProps)))),
         data.version && (React.createElement(Box, { mb: 5 },
             React.createElement(VersionBadge, { value: data.version }))),
@@ -2332,7 +2238,7 @@ const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOpti
     const shouldDisplayHeader = !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.noHeading) && (title !== undefined || (exportProps && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideExport)));
     const header = (shouldDisplayHeader || isInternal) && (React.createElement(Flex, { justifyContent: "between", alignItems: "center" },
         React.createElement(HStack, { spacing: 5 },
-            title && (React.createElement(Heading$1, { size: 1, fontWeight: "semibold" }, title)),
+            title && (React.createElement(Heading, { size: 1, fontWeight: "semibold" }, title)),
             React.createElement(HStack, { spacing: 2 }, isInternal && React.createElement(InternalBadge, null))),
         exportProps && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideExport) && React.createElement(ExportButton, Object.assign({}, exportProps))));
     const description = (React.createElement(VStack, { spacing: 10 },
@@ -2389,7 +2295,7 @@ const SidebarLayout = React.forwardRef(({ sidebar, children, maxContentWidth = M
                 paddingLeft: `calc((100% - ${maxContentWidth}px) / 2)`,
                 minWidth: `${sidebarWidth}px`,
             } }, sidebar),
-        React.createElement(Box, { ref: scrollRef, bg: "canvas", px: 24, flex: 1, overflowY: "auto", overflowX: "hidden", w: "full" },
+        React.createElement(Box, { ref: scrollRef, bg: "canvas", px: 24, flex: 1, w: "full", overflowY: "auto" },
             React.createElement(Box, { style: { maxWidth: `${maxContentWidth - sidebarWidth}px` }, py: 16 }, children))));
 });
 
@@ -2418,7 +2324,7 @@ function useParsedValue(value) {
         let parsedValue = value;
         if (typeof value === 'string') {
             try {
-                parsedValue = parse$1(value);
+                parsedValue = parse(value);
             }
             catch (error) {
             }
@@ -2444,8 +2350,8 @@ const SchemaAndDescription = ({ title: titleProp, schema }) => {
         React__default.createElement(JsonSchemaViewer, { resolveRef: resolveRef, schema: getOriginalObject(schema) })));
 };
 const CodeComponent = props => {
-    const { title, jsonSchema, http, children } = props;
-    const value = String(Array.isArray(children) ? children[0] : children);
+    const { title, jsonSchema, http, resolved, children } = props;
+    const value = resolved || String(Array.isArray(children) ? children[0] : children);
     const parsedValue = useParsedValue(value);
     if (jsonSchema) {
         if (!isJSONSchema(parsedValue)) {
@@ -2692,7 +2598,7 @@ const Version = ({ value }) => {
 const NonIdealState = ({ description, icon, title }) => {
     return (React.createElement(Flex, { flexDirection: "col", alignItems: "center", justifyContent: "center", textAlign: "center", w: "full", h: "full" },
         React.createElement(Box, { as: Icon, icon: icon || faExclamationTriangle, color: "light", fontSize: "6xl", mb: 4 }),
-        React.createElement(Heading$1, { size: 4, mb: 4 }, title),
+        React.createElement(Heading, { size: 4, mb: 4 }, title),
         React.createElement(Text, null, description)));
 };
 

package/index.js

@@ -8,17 +8,14 @@ var json = require('@stoplight/json');
 var isArray = require('lodash/isArray.js');
 var isObject = require('lodash/isObject.js');
 var isPlainObject = require('lodash/isPlainObject.js');
-var markdown = require('@stoplight/markdown');
 var types = require('@stoplight/types');
 var yaml = require('@stoplight/yaml');
 var mosaic = require('@stoplight/mosaic');
 var reactErrorBoundary = require('@stoplight/react-error-boundary');
 var markdownViewer = require('@stoplight/markdown-viewer');
-var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
-var throttle = require('lodash/throttle.js');
-var unistUtilSelect = require('unist-util-select');
 var cn = require('classnames');
 var utils = require('jotai/utils');
+var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
 var jotai = require('jotai');
 var URI = require('urijs');
 var mosaicCodeViewer = require('@stoplight/mosaic-code-viewer');
@@ -78,7 +75,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var isArray__default = /*#__PURE__*/_interopDefaultLegacy(isArray);
 var isObject__default = /*#__PURE__*/_interopDefaultLegacy(isObject);
 var isPlainObject__default = /*#__PURE__*/_interopDefaultLegacy(isPlainObject);
-var throttle__default = /*#__PURE__*/_interopDefaultLegacy(throttle);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 var URI__default = /*#__PURE__*/_interopDefaultLegacy(URI);
 var HTTPSnippet__default = /*#__PURE__*/_interopDefaultLegacy(HTTPSnippet);
@@ -219,13 +215,7 @@ const parserMap = {
     [types.NodeType.Unknown]: parseUnknown,
 };
 function parseArticleData(rawData) {
-    if (typeof rawData === 'string') {
-        return {
-            type: types.NodeType.Article,
-            data: markdown.parse(rawData),
-        };
-    }
-    if (isSMDASTRoot(rawData)) {
+    if (typeof rawData === 'string' || isSMDASTRoot(rawData)) {
         return {
             type: types.NodeType.Article,
             data: rawData,
@@ -283,94 +273,9 @@ const MarkdownViewer = (props) => {
 };
 MarkdownViewer.displayName = 'MarkdownViewer';
 
-function useComponentSize(container) {
-    const [componentSize, setComponentSize] = React__namespace.useState({ width: 0, height: 0 });
-    React__namespace.useEffect(() => {
-        if (!container) {
-            return;
-        }
-        const updateComponentSize = throttle__default["default"](() => (container ? setComponentSize(container.getBoundingClientRect()) : { width: 0, height: 0 }), 1000, {
-            trailing: true,
-        });
-        updateComponentSize();
-        window.addEventListener('resize', updateComponentSize);
-        return () => {
-            updateComponentSize.cancel();
-            window.removeEventListener('resize', updateComponentSize);
-        };
-    }, [container]);
-    return componentSize;
-}
-
-function useComputeMarkdownHeadings(tree) {
-    return React__namespace.useMemo(() => computeMarkdownHeadings(tree), [tree]);
-}
-function computeMarkdownHeadings(tree) {
-    return unistUtilSelect.selectAll(':root > [type=heading]', tree)
-        .map((heading) => {
-        var _a;
-        return ({
-            title: findTitle(heading),
-            id: ((_a = heading.data) === null || _a === void 0 ? void 0 : _a.id) || '',
-            depth: heading.depth - 1,
-        });
-    })
-        .filter((item) => item.depth >= 1 && item.depth <= 2);
-}
-const findTitle = (parent) => {
-    return unistUtilSelect.selectAll('[type=text]', parent).map(textNode => String(textNode.value)).join(' ');
-};
-
-function useLocationHash() {
-    const isBrowser = typeof window !== 'undefined';
-    const [locationHash, setLocationHash] = React__namespace.useState(isBrowser && window.location.hash);
-    React__namespace.useEffect(() => {
-        if (!isBrowser)
-            return;
-        const hashChange = () => setLocationHash(window.location.hash);
-        window.addEventListener('hashchange', hashChange, false);
-        return () => window.removeEventListener('hashchange', hashChange);
-    }, [isBrowser]);
-    return locationHash;
-}
-
-const ArticleHeadings = ({ tree, container }) => {
-    const { width } = useComponentSize(container);
-    const showHeadings = width >= 768;
-    const headings = useComputeMarkdownHeadings(tree);
-    return React__namespace.createElement(Headings, { className: "ArticleHeadings", headings: headings, minimal: !showHeadings, maxWidth: 300 });
-};
-const Headings = ({ headings, className, title = 'On This Page', minimal, maxWidth }) => {
-    const locationHash = useLocationHash();
-    if (!headings || !headings.length)
-        return null;
-    const component = (React__namespace.createElement(mosaic.Box, { overflowY: "auto", style: { maxHeight: '85vh', maxWidth } },
-        title && (React__namespace.createElement(mosaic.Flex, { py: 2, alignItems: "center", fontSize: "sm", fontWeight: "medium", color: "muted", style: { paddingLeft: 18 } },
-            React__namespace.createElement(mosaic.Box, { as: mosaic.Icon, icon: freeSolidSvgIcons.faStream, mr: 2 }),
-            title)),
-        headings.map((heading, i) => (React__namespace.createElement(Heading, { key: i, item: heading, isSelected: locationHash === `#${heading.id}` })))));
-    const button = React__namespace.createElement(mosaic.Button, { pos: "sticky", size: "sm", borderColor: "light", icon: freeSolidSvgIcons.faStream, style: { top: 10 } });
-    if (minimal) {
-        return (React__namespace.createElement(mosaic.Box, { pos: "sticky", top: 0, right: 0, style: { top: 10 } },
-            React__namespace.createElement(mosaic.Popover, { renderTrigger: button, placement: "bottom" },
-                React__namespace.createElement(mosaic.Box, { className: className }, component))));
-    }
-    return (React__namespace.createElement(mosaic.Box, { pos: "sticky", pr: 4, pl: 16, h: "full", overflowX: "auto", overflowY: "auto", className: className, style: { top: 30 } },
-        React__namespace.createElement(mosaic.Box, { borderL: true, borderColor: "light" }, component)));
-};
-const Heading = ({ item, isSelected }) => {
-    return (React__namespace.createElement(mosaic.Box, { as: "a", href: `#${item.id}`, textOverflow: "truncate", display: "block", py: 2, pr: 8, fontWeight: "medium", fontSize: "sm", color: isSelected ? 'primary' : 'muted', style: { paddingLeft: `${3 + item.depth * 15}px` } }, item.title));
-};
-
 const ArticleComponent = React__namespace.memo(({ data }) => {
-    const [container, setContainer] = React__namespace.useState(null);
-    const tree = React__namespace.useMemo(() => (typeof data === 'object' ? data : markdown.parse(data)), [data]);
-    if (tree === null)
-        return null;
-    return (React__namespace.createElement(mosaic.Flex, { className: "sl-elements-article", justifyContent: "evenly", w: "full", pos: "relative", ref: setContainer },
-        React__namespace.createElement(mosaic.Box, { className: "sl-elements-article-content", style: { width: 0 }, flex: 1 },
-            React__namespace.createElement(MarkdownViewer, { markdown: tree })),
-        React__namespace.createElement(ArticleHeadings, { tree: tree, container: container })));
+    return (React__namespace.createElement(mosaic.Box, { className: "sl-elements-article" },
+        React__namespace.createElement(MarkdownViewer, { className: "sl-elements-article-content", markdown: data, includeToc: true })));
 });
 const Article = reactErrorBoundary.withErrorBoundary(ArticleComponent, { recoverableProps: ['data'] });
 
@@ -2444,7 +2349,7 @@ const SidebarLayout = React__namespace.forwardRef(({ sidebar, children, maxConte
                 paddingLeft: `calc((100% - ${maxContentWidth}px) / 2)`,
                 minWidth: `${sidebarWidth}px`,
             } }, sidebar),
-        React__namespace.createElement(mosaic.Box, { ref: scrollRef, bg: "canvas", px: 24, flex: 1, overflowY: "auto", overflowX: "hidden", w: "full" },
+        React__namespace.createElement(mosaic.Box, { ref: scrollRef, bg: "canvas", px: 24, flex: 1, w: "full", overflowY: "auto" },
             React__namespace.createElement(mosaic.Box, { style: { maxWidth: `${maxContentWidth - sidebarWidth}px` }, py: 16 }, children))));
 });
 
@@ -2499,8 +2404,8 @@ const SchemaAndDescription = ({ title: titleProp, schema }) => {
         React__default["default"].createElement(jsonSchemaViewer.JsonSchemaViewer, { resolveRef: resolveRef, schema: getOriginalObject(schema) })));
 };
 const CodeComponent = props => {
-    const { title, jsonSchema, http, children } = props;
-    const value = String(Array.isArray(children) ? children[0] : children);
+    const { title, jsonSchema, http, resolved, children } = props;
+    const value = resolved || String(Array.isArray(children) ? children[0] : children);
     const parsedValue = useParsedValue(value);
     if (jsonSchema) {
         if (!isJSONSchema(parsedValue)) {