@stoplight/elements-core 8.0.0 → 8.0.1

package/index.esm.js

@@ -7,10 +7,10 @@ import isArray from 'lodash/isArray.js';
 import isPlainObject from 'lodash/isPlainObject.js';
 import { NodeType, HttpParamStyles } from '@stoplight/types';
 import { parse } from '@stoplight/yaml';
-import { isArray as isArray$1, Box, useBreakpoints, Panel, CopyButton, Menu, Button, Text, Flex, Input, Icon, Select, FieldButton, Image, Link, useThemeIsDark, HStack, VStack, InvertTheme, Tooltip, Badge, LinkHeading as LinkHeading$1, NodeAnnotation, Callout, useModalState, Modal, ListBox, ListBoxItem, TabList, Tab, Tabs, TabPanels, TabPanel, Heading, useClipboard, useMosaicContext, Provider as Provider$1 } from '@stoplight/mosaic';
+import { isArray as isArray$1, Box, useBreakpoints, Panel, CopyButton, Menu, Button, Text, Flex, Input, Icon, Select, FieldButton, Image, Link, useThemeIsDark, HStack, VStack, InvertTheme, Tooltip, Badge, LinkHeading as LinkHeading$1, NodeAnnotation, Callout, useModalState, Modal, ListBox, ListBoxItem, TabList, Tab, Tabs, TabPanels, TabPanel, Heading, useClipboard, Drawer, useMosaicContext, Provider as Provider$1 } from '@stoplight/mosaic';
 import isObject from 'lodash/isObject.js';
 import { withErrorBoundary } from '@stoplight/react-error-boundary';
-import { useLocation, BrowserRouter, MemoryRouter, HashRouter, StaticRouter, Route } from 'react-router-dom';
+import { useLocation, Link as Link$1, BrowserRouter, MemoryRouter, HashRouter, StaticRouter, Route } from 'react-router-dom';
 import { MarkdownViewer as MarkdownViewer$1, DefaultSMDComponents, MarkdownViewerProvider } from '@stoplight/markdown-viewer';
 export { DefaultSMDComponents } from '@stoplight/markdown-viewer';
 import cn from 'classnames';
@@ -308,6 +308,11 @@ const Article = withErrorBoundary(ArticleComponent, { recoverableProps: ['data']
  * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
  * Copyright 2022 Fonticons, Inc.
  */
+var faBars = {
+  prefix: 'fas',
+  iconName: 'bars',
+  icon: [448, 512, ["navicon"], "f0c9", "M0 96C0 78.33 14.33 64 32 64H416C433.7 64 448 78.33 448 96C448 113.7 433.7 128 416 128H32C14.33 128 0 113.7 0 96zM0 256C0 238.3 14.33 224 32 224H416C433.7 224 448 238.3 448 256C448 273.7 433.7 288 416 288H32C14.33 288 0 273.7 0 256zM416 448H32C14.33 448 0 433.7 0 416C0 398.3 14.33 384 32 384H416C433.7 384 448 398.3 448 416C448 433.7 433.7 448 416 448z"]
+};
 var faBolt = {
   prefix: 'fas',
   iconName: 'bolt',
@@ -379,6 +384,11 @@ var faServer = {
   iconName: 'server',
   icon: [512, 512, [], "f233", "M480 288H32c-17.62 0-32 14.38-32 32v128c0 17.62 14.38 32 32 32h448c17.62 0 32-14.38 32-32v-128C512 302.4 497.6 288 480 288zM352 408c-13.25 0-24-10.75-24-24s10.75-24 24-24s24 10.75 24 24S365.3 408 352 408zM416 408c-13.25 0-24-10.75-24-24s10.75-24 24-24s24 10.75 24 24S429.3 408 416 408zM480 32H32C14.38 32 0 46.38 0 64v128c0 17.62 14.38 32 32 32h448c17.62 0 32-14.38 32-32V64C512 46.38 497.6 32 480 32zM352 152c-13.25 0-24-10.75-24-24S338.8 104 352 104S376 114.8 376 128S365.3 152 352 152zM416 152c-13.25 0-24-10.75-24-24S402.8 104 416 104S440 114.8 440 128S429.3 152 416 152z"]
 };
+var faX = {
+  prefix: 'fas',
+  iconName: 'x',
+  icon: [384, 512, [120], "58", "M376.6 427.5c11.31 13.58 9.484 33.75-4.094 45.06c-5.984 4.984-13.25 7.422-20.47 7.422c-9.172 0-18.27-3.922-24.59-11.52L192 305.1l-135.4 162.5c-6.328 7.594-15.42 11.52-24.59 11.52c-7.219 0-14.48-2.438-20.47-7.422c-13.58-11.31-15.41-31.48-4.094-45.06l142.9-171.5L7.422 84.5C-3.891 70.92-2.063 50.75 11.52 39.44c13.56-11.34 33.73-9.516 45.06 4.094L192 206l135.4-162.5c11.3-13.58 31.48-15.42 45.06-4.094c13.58 11.31 15.41 31.48 4.094 45.06l-142.9 171.5L376.6 427.5z"]
+};
 
 const NodeTypeColors = {
     http_operation: '#6a6acb',
@@ -3096,195 +3106,53 @@ const ParsedDocs = (_a) => {
     }
 };
 
-const MAX_CONTENT_WIDTH = 1800;
-const SIDEBAR_MIN_WIDTH = 300;
-const SIDEBAR_MAX_WIDTH = 1.5 * SIDEBAR_MIN_WIDTH;
-const SidebarLayout = React.forwardRef(({ sidebar, children, maxContentWidth = MAX_CONTENT_WIDTH, sidebarWidth = SIDEBAR_MIN_WIDTH }, ref) => {
-    const scrollRef = React.useRef(null);
-    const [sidebarRef, currentSidebarWidth, startResizing] = useResizer(sidebarWidth);
-    const { pathname } = useLocation();
-    React.useEffect(() => {
-        var _a;
-        (_a = scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo(0, 0);
-    }, [pathname]);
-    return (React.createElement(Flex, { ref: ref, className: "sl-elements-api", pin: true, h: "full" },
-        React.createElement(Flex, { ref: sidebarRef, onMouseDown: (e) => e.preventDefault(), style: { maxWidth: `${SIDEBAR_MAX_WIDTH}px` } },
-            React.createElement(Flex, { direction: "col", bg: "canvas-100", borderR: true, pt: 8, pos: "sticky", pinY: true, overflowY: "auto", style: {
-                    paddingLeft: `calc((100% - ${maxContentWidth}px) / 2)`,
-                    width: `${currentSidebarWidth}px`,
-                    minWidth: `${SIDEBAR_MIN_WIDTH}px`,
-                } }, sidebar),
-            React.createElement(Flex, { justifySelf: "end", flexGrow: 0, flexShrink: 0, resize: "x", onMouseDown: startResizing, style: { width: '1em', flexBasis: '6px', cursor: 'ew-resize' } })),
-        React.createElement(Box, { ref: scrollRef, bg: "canvas", px: 24, flex: 1, w: "full", overflowY: "auto" },
-            React.createElement(Box, { style: { maxWidth: `${maxContentWidth - currentSidebarWidth}px` }, py: 16 }, children))));
-});
-function useResizer(sidebarWidth) {
-    const sidebarRef = React.useRef(null);
-    const [isResizing, setIsResizing] = React.useState(false);
-    const [currentSidebarWidth, setCurrentSidebarWidth] = React.useState(sidebarWidth);
-    const startResizing = React.useCallback(() => {
-        setIsResizing(true);
-    }, []);
-    const stopResizing = React.useCallback(() => {
-        setIsResizing(false);
-    }, []);
-    const resize = React.useCallback(mouseMoveEvent => {
-        if (isResizing) {
-            const value = mouseMoveEvent.clientX - sidebarRef.current.getBoundingClientRect().left;
-            setCurrentSidebarWidth(Math.min(Math.max(SIDEBAR_MIN_WIDTH, value), SIDEBAR_MAX_WIDTH));
-        }
-    }, [isResizing]);
-    React.useEffect(() => {
-        window.addEventListener('mousemove', resize);
-        window.addEventListener('mouseup', stopResizing, { passive: true });
-        return () => {
-            window.removeEventListener('mousemove', resize);
-            window.removeEventListener('mouseup', stopResizing);
-        };
-    }, [resize, stopResizing]);
-    return [sidebarRef, currentSidebarWidth, startResizing];
-}
-
-const Logo = ({ logo }) => {
-    var _a;
-    return (React.createElement(Box, { display: "inline", mr: 3, rounded: "lg", overflowY: "hidden", overflowX: "hidden", style: { backgroundColor: (_a = logo.backgroundColor) !== null && _a !== void 0 ? _a : 'transparent' } }, logo.href ? (React.createElement("a", { href: logo.href, target: "_blank", rel: "noopener noreferrer" },
-        React.createElement("img", { src: logo.url, height: "30px", width: "30px", alt: logo.altText }))) : (React.createElement("img", { src: logo.url, height: "30px", width: "30px", alt: logo.altText }))));
-};
-
-function getDisplayName(WrappedComponent) {
-    return WrappedComponent.displayName || WrappedComponent.name || 'Component';
-}
-
-const PersistenceContextProvider = Provider;
-function withPersistenceBoundary(WrappedComponent) {
-    const WithPersistenceBoundary = props => {
-        return (React.createElement(PersistenceContextProvider, null,
-            React.createElement(WrappedComponent, Object.assign({}, props))));
-    };
-    WithPersistenceBoundary.displayName = `withPersistenceBoundary(${getDisplayName(WrappedComponent)})`;
-    return WithPersistenceBoundary;
-}
-
-function useParsedValue(value) {
-    return React.useMemo(() => {
-        let parsedValue = value;
-        if (typeof value === 'string') {
-            try {
-                parsedValue = parse(value);
-            }
-            catch (error) {
-            }
-        }
-        return parsedValue;
-    }, [value]);
-}
-
-function isPartialHttpRequest(maybeHttpRequest) {
-    return (isObject(maybeHttpRequest) &&
-        'method' in maybeHttpRequest &&
-        typeof maybeHttpRequest['method'] === 'string' &&
-        'url' in maybeHttpRequest &&
-        typeof maybeHttpRequest['url'] === 'string');
-}
-const SchemaAndDescription = ({ title: titleProp, schema }) => {
-    const [resolveRef, maxRefDepth] = useSchemaInlineRefResolver();
-    const title = titleProp !== null && titleProp !== void 0 ? titleProp : schema.title;
-    return (React__default.createElement(Box, { py: 2 },
-        title && (React__default.createElement(Flex, { alignItems: "center", p: 2 },
-            React__default.createElement(Icon, { icon: NodeTypeIconDefs[NodeType.Model], color: NodeTypeColors[NodeType.Model] }),
-            React__default.createElement(Box, { color: "muted", px: 2 }, title))),
-        React__default.createElement(JsonSchemaViewer, { resolveRef: resolveRef, maxRefDepth: maxRefDepth, schema: getOriginalObject(schema) })));
+const ElementsBreakpoints = {
+    docs: 700,
 };
-const CodeComponent = props => {
-    const { title, jsonSchema, http, resolved, children } = props;
-    const resolver = useInlineRefResolver();
-    const value = resolved || String(Array.isArray(children) ? children[0] : children);
-    const parsedValue = useParsedValue(value);
-    if (jsonSchema) {
-        if (!isJSONSchema(parsedValue)) {
-            return null;
-        }
-        return (React__default.createElement(InlineRefResolverProvider, { document: parsedValue, resolver: resolver === null || resolver === void 0 ? void 0 : resolver.resolver, maxRefDepth: resolver === null || resolver === void 0 ? void 0 : resolver.maxRefDepth },
-            React__default.createElement(SchemaAndDescription, { title: title, schema: parsedValue })));
+var ScreenType;
+(function (ScreenType) {
+    ScreenType[ScreenType["Phone"] = 415] = "Phone";
+    ScreenType[ScreenType["Tablet"] = 750] = "Tablet";
+    ScreenType[ScreenType["Resized_Browser"] = 980] = "Resized_Browser";
+    ScreenType[ScreenType["Normal_Browser"] = 1000000] = "Normal_Browser";
+})(ScreenType || (ScreenType = {}));
+const getScreenType = () => {
+    if ((window === null || window === void 0 ? void 0 : window.innerWidth) <= ScreenType.Phone) {
+        return ScreenType.Phone;
     }
-    if (http) {
-        if (!isObject(parsedValue) || (!isPartialHttpRequest(parsedValue) && !isHttpOperation(parsedValue))) {
-            return null;
-        }
-        return (React__default.createElement(PersistenceContextProvider, null,
-            React__default.createElement(TryIt, { httpOperation: isHttpOperation(parsedValue) ? parsedValue : parseHttpRequest(parsedValue), embeddedInMd: true })));
+    else if ((window === null || window === void 0 ? void 0 : window.innerWidth) <= ScreenType.Tablet) {
+        return ScreenType.Tablet;
     }
-    const DefaultCode = DefaultSMDComponents.code;
-    return React__default.createElement(DefaultCode, Object.assign({}, props));
+    else if ((window === null || window === void 0 ? void 0 : window.innerWidth) <= ScreenType.Resized_Browser) {
+        return ScreenType.Resized_Browser;
+    }
+    return ScreenType.Normal_Browser;
 };
-function parseHttpRequest(data) {
-    const uri = URI(data.url);
-    const pathParam = data.url.match(/[^{\}]+(?=})/g);
+const useResponsiveLayout = () => {
+    const [screenType, setScreenType] = React.useState();
+    const getElementsBreakpoint = (node) => {
+        return ElementsBreakpoints[node];
+    };
+    React.useLayoutEffect(() => {
+        function handleResize() {
+            setScreenType(getScreenType());
+        }
+        window === null || window === void 0 ? void 0 : window.addEventListener('resize', handleResize);
+        handleResize();
+        return () => window === null || window === void 0 ? void 0 : window.removeEventListener('resize', handleResize);
+    }, []);
+    const isResponsiveLayoutEnabled = screenType !== ScreenType.Normal_Browser;
     return {
-        id: '?http-operation-id?',
-        method: data.method,
-        path: uri.is('absolute') ? uri.path() : data.url,
-        servers: [{ id: `?http-server-${uri.href()}?`, url: uri.is('absolute') ? uri.origin() : data.baseUrl || '' }],
-        request: Object.assign({ query: Object.entries(data.query || {}).map(([key, value]) => {
-                const defaultVal = Array.isArray(value) ? value[0] : value;
-                return {
-                    id: `?http-query-${key}-id?`,
-                    name: key,
-                    style: HttpParamStyles.Form,
-                    schema: { default: defaultVal },
-                    required: isHttpRequestParamRequired(defaultVal),
-                };
-            }), headers: Object.entries(data.headers || {}).map(([key, value]) => ({
-                id: `?http-header-${key}-id?`,
-                name: key,
-                style: HttpParamStyles.Simple,
-                schema: { default: value },
-                required: isHttpRequestParamRequired(value),
-            })), path: pathParam === null || pathParam === void 0 ? void 0 : pathParam.map(name => ({
-                id: `?http-param-${name}-id?`,
-                name,
-                style: HttpParamStyles.Simple,
-                required: true,
-            })) }, (data.body
-            ? {
-                body: {
-                    id: '?http-request-body?',
-                    contents: [
-                        {
-                            id: '?http-request-body-media?',
-                            mediaType: 'application/json',
-                            schema: { default: data.body },
-                        },
-                    ],
-                },
-            }
-            : null)),
-        responses: [],
+        isResponsiveLayoutEnabled,
+        screenType,
+        getElementsBreakpoint,
     };
-}
-function isHttpRequestParamRequired(value) {
-    return typeof value !== 'undefined';
-}
-
-const MarkdownComponentsProvider = ({ value, children }) => {
-    return React.createElement(MarkdownViewerProvider, { components: Object.assign({ code: CodeComponent }, value) }, children);
 };
 
-const externalRegex = new RegExp('^(?:[a-z]+:)?//', 'i');
-const ReactRouterMarkdownLink = ({ title, to, href: _href, children, }) => {
-    const href = to || _href;
-    const isExternal = href !== undefined && externalRegex.test(href);
-    if (isExternal) {
-        return (React__default.createElement("a", { target: "_blank", rel: "noreferrer noopener", href: href, title: title }, children));
-    }
-    return (React__default.createElement(HashLink, { to: href, title: title }, children));
-};
-
-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 || ['fas', 'exclamation-triangle'], color: "light", fontSize: "6xl", mb: 4 }),
-        React.createElement(Heading, { size: 4, mb: 4 }, title),
-        React.createElement(Text, null, description)));
+const Logo = ({ logo }) => {
+    var _a;
+    return (React.createElement(Box, { display: "inline", mr: 3, rounded: "lg", overflowY: "hidden", overflowX: "hidden", style: { backgroundColor: (_a = logo.backgroundColor) !== null && _a !== void 0 ? _a : 'transparent' } }, logo.href ? (React.createElement("a", { href: logo.href, target: "_blank", rel: "noopener noreferrer" },
+        React.createElement("img", { src: logo.url, height: "30px", width: "30px", alt: logo.altText }))) : (React.createElement("img", { src: logo.url, height: "30px", width: "30px", alt: logo.altText }))));
 };
 
 function useFirstRender() {
@@ -3510,6 +3378,271 @@ const Version = ({ value }) => {
         React.createElement(VersionBadge, { value: value, backgroundColor: "#909DAB" })));
 };
 
+const MobileTopNav = ({ name, logo, tree, pathname, onTocClick, }) => {
+    const [isSidebarOpen, setIsSidebarOpen] = React.useState(false);
+    const handleTocClick = () => {
+        onTocClick();
+        setIsSidebarOpen(false);
+    };
+    return (React.createElement(Flex, { className: "TopNav--mosaic", alignItems: "center", h: "3xl", pl: 4, pr: 4, bg: "canvas", borderB: true, pos: "fixed", w: "full", zIndex: 20 },
+        React.createElement(Flex, { "data-test": "mobile-top-nav", w: "full", alignItems: "center", justifyContent: "between" },
+            React.createElement(Button, { "data-test": "show-left-sidebar-btn", onPress: () => setIsSidebarOpen(true), appearance: "minimal" },
+                React.createElement(Icon, { size: "lg", icon: faBars })),
+            React.createElement(NavHeading, { heading: name })),
+        React.createElement(Drawer, { isOpen: isSidebarOpen, position: "left" },
+            React.createElement(Flex, { justifyContent: "end" },
+                React.createElement(Button, { className: "sl-mr-4 sl-mt-2", onPress: () => setIsSidebarOpen(false), appearance: "minimal", justifySelf: "end" },
+                    React.createElement(Icon, { size: "lg", icon: faX }))),
+            React.createElement(Sidebar, { name: name, logo: logo, tree: tree, pathname: pathname, onTocClick: () => handleTocClick(), isInResponsiveMode: true }))));
+};
+const NavHeading = ({ heading }) => (React.createElement(Flex, { flex: 1, "data-test": "mobile-project-top-nav", style: { minWidth: 0 } },
+    React.createElement(Box, { fontSize: "xl", fontWeight: "semibold", whitespace: "nowrap", textOverflow: "overflow-ellipsis", overflowX: "hidden", overflowY: "hidden", w: "full", textAlign: "center" }, heading)));
+
+const MAX_CONTENT_WIDTH$1 = 1800;
+const SIDEBAR_MIN_WIDTH$1 = 300;
+const SIDEBAR_MAX_WIDTH$1 = 1.5 * SIDEBAR_MIN_WIDTH$1;
+const ResponsiveSidebarLayout = React.forwardRef(({ children, name, logo, tree, onTocClick, maxContentWidth = MAX_CONTENT_WIDTH$1, sidebarWidth = SIDEBAR_MIN_WIDTH$1 }, ref) => {
+    const scrollRef = React.useRef(null);
+    const [sidebarRef, currentSidebarWidth, startResizing] = useResizer$1(sidebarWidth);
+    const { pathname } = useLocation();
+    React.useEffect(() => {
+        var _a;
+        (_a = scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo(0, 0);
+    }, [pathname]);
+    const { isResponsiveLayoutEnabled } = useResponsiveLayout();
+    return (React.createElement(Flex, { ref: ref, className: "sl-elements-api", pin: true, h: "full" },
+        !isResponsiveLayoutEnabled ? (React.createElement(Flex, { ref: sidebarRef, onMouseDown: (e) => e.preventDefault(), style: { maxWidth: `${SIDEBAR_MAX_WIDTH$1}px` } },
+            React.createElement(Flex, { direction: "col", bg: "canvas-100", borderR: true, pt: 8, pos: "sticky", pinY: true, overflowY: "auto", style: {
+                    paddingLeft: `calc((100% - ${maxContentWidth}px) / 2)`,
+                    width: `${currentSidebarWidth}px`,
+                    minWidth: `${SIDEBAR_MIN_WIDTH$1}px`,
+                } },
+                React.createElement(Sidebar, { name: name, logo: logo, tree: tree, pathname: pathname, onTocClick: onTocClick, isInResponsiveMode: false })),
+            React.createElement(Flex, { justifySelf: "end", flexGrow: 0, flexShrink: 0, resize: "x", onMouseDown: startResizing, style: { width: '1em', flexBasis: '6px', cursor: 'ew-resize' } }))) : (React.createElement(MobileTopNav, { onTocClick: onTocClick, name: name, logo: logo, tree: tree, pathname: pathname })),
+        React.createElement(Box, { ref: scrollRef, bg: "canvas", px: !isResponsiveLayoutEnabled ? 24 : 6, flex: 1, w: "full", overflowY: "auto" },
+            React.createElement(Box, { style: { maxWidth: `${maxContentWidth - currentSidebarWidth}px` }, py: 16 }, children))));
+});
+const Sidebar = ({ name, logo, tree, pathname, onTocClick, isInResponsiveMode, }) => {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Flex, { ml: 4, mb: 5, alignItems: "center" },
+            typeof logo === 'string' ? (React.createElement(Logo, { logo: { url: logo, altText: 'logo' } })) : (typeof logo === 'object' && React.createElement(Logo, { logo: logo })),
+            React.createElement(Heading, { size: 4 }, name)),
+        React.createElement(Flex, { flexGrow: true, flexShrink: true, overflowY: "auto", direction: "col" },
+            React.createElement(TableOfContents, { tree: tree, activeId: pathname, Link: Link$1, onLinkClick: onTocClick, isInResponsiveMode: isInResponsiveMode })),
+        React.createElement(PoweredByLink, { source: name, pathname: pathname, packageType: "elements" })));
+};
+function useResizer$1(sidebarWidth) {
+    const sidebarRef = React.useRef(null);
+    const [isResizing, setIsResizing] = React.useState(false);
+    const [currentSidebarWidth, setCurrentSidebarWidth] = React.useState(sidebarWidth);
+    const startResizing = React.useCallback(() => {
+        setIsResizing(true);
+    }, []);
+    const stopResizing = React.useCallback(() => {
+        setIsResizing(false);
+    }, []);
+    const resize = React.useCallback(mouseMoveEvent => {
+        if (isResizing) {
+            const value = mouseMoveEvent.clientX - sidebarRef.current.getBoundingClientRect().left;
+            setCurrentSidebarWidth(Math.min(Math.max(SIDEBAR_MIN_WIDTH$1, value), SIDEBAR_MAX_WIDTH$1));
+        }
+    }, [isResizing]);
+    React.useEffect(() => {
+        window === null || window === void 0 ? void 0 : window.addEventListener('mousemove', resize);
+        window === null || window === void 0 ? void 0 : window.addEventListener('mouseup', stopResizing, { passive: true });
+        return () => {
+            window === null || window === void 0 ? void 0 : window.removeEventListener('mousemove', resize);
+            window === null || window === void 0 ? void 0 : window.removeEventListener('mouseup', stopResizing);
+        };
+    }, [resize, stopResizing]);
+    return [sidebarRef, currentSidebarWidth, startResizing];
+}
+
+const MAX_CONTENT_WIDTH = 1800;
+const SIDEBAR_MIN_WIDTH = 300;
+const SIDEBAR_MAX_WIDTH = 1.5 * SIDEBAR_MIN_WIDTH;
+const SidebarLayout = React.forwardRef(({ sidebar, children, maxContentWidth = MAX_CONTENT_WIDTH, sidebarWidth = SIDEBAR_MIN_WIDTH }, ref) => {
+    const scrollRef = React.useRef(null);
+    const [sidebarRef, currentSidebarWidth, startResizing] = useResizer(sidebarWidth);
+    const { pathname } = useLocation();
+    React.useEffect(() => {
+        var _a;
+        (_a = scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo(0, 0);
+    }, [pathname]);
+    return (React.createElement(Flex, { ref: ref, className: "sl-elements-api", pin: true, h: "full" },
+        React.createElement(Flex, { ref: sidebarRef, onMouseDown: (e) => e.preventDefault(), style: { maxWidth: `${SIDEBAR_MAX_WIDTH}px` } },
+            React.createElement(Flex, { direction: "col", bg: "canvas-100", borderR: true, pt: 8, pos: "sticky", pinY: true, overflowY: "auto", style: {
+                    paddingLeft: `calc((100% - ${maxContentWidth}px) / 2)`,
+                    width: `${currentSidebarWidth}px`,
+                    minWidth: `${SIDEBAR_MIN_WIDTH}px`,
+                } }, sidebar),
+            React.createElement(Flex, { justifySelf: "end", flexGrow: 0, flexShrink: 0, resize: "x", onMouseDown: startResizing, style: { width: '1em', flexBasis: '6px', cursor: 'ew-resize' } })),
+        React.createElement(Box, { ref: scrollRef, bg: "canvas", px: 24, flex: 1, w: "full", overflowY: "auto" },
+            React.createElement(Box, { style: { maxWidth: `${maxContentWidth - currentSidebarWidth}px` }, py: 16 }, children))));
+});
+function useResizer(sidebarWidth) {
+    const sidebarRef = React.useRef(null);
+    const [isResizing, setIsResizing] = React.useState(false);
+    const [currentSidebarWidth, setCurrentSidebarWidth] = React.useState(sidebarWidth);
+    const startResizing = React.useCallback(() => {
+        setIsResizing(true);
+    }, []);
+    const stopResizing = React.useCallback(() => {
+        setIsResizing(false);
+    }, []);
+    const resize = React.useCallback(mouseMoveEvent => {
+        if (isResizing) {
+            const value = mouseMoveEvent.clientX - sidebarRef.current.getBoundingClientRect().left;
+            setCurrentSidebarWidth(Math.min(Math.max(SIDEBAR_MIN_WIDTH, value), SIDEBAR_MAX_WIDTH));
+        }
+    }, [isResizing]);
+    React.useEffect(() => {
+        window.addEventListener('mousemove', resize);
+        window.addEventListener('mouseup', stopResizing, { passive: true });
+        return () => {
+            window.removeEventListener('mousemove', resize);
+            window.removeEventListener('mouseup', stopResizing);
+        };
+    }, [resize, stopResizing]);
+    return [sidebarRef, currentSidebarWidth, startResizing];
+}
+
+function getDisplayName(WrappedComponent) {
+    return WrappedComponent.displayName || WrappedComponent.name || 'Component';
+}
+
+const PersistenceContextProvider = Provider;
+function withPersistenceBoundary(WrappedComponent) {
+    const WithPersistenceBoundary = props => {
+        return (React.createElement(PersistenceContextProvider, null,
+            React.createElement(WrappedComponent, Object.assign({}, props))));
+    };
+    WithPersistenceBoundary.displayName = `withPersistenceBoundary(${getDisplayName(WrappedComponent)})`;
+    return WithPersistenceBoundary;
+}
+
+function useParsedValue(value) {
+    return React.useMemo(() => {
+        let parsedValue = value;
+        if (typeof value === 'string') {
+            try {
+                parsedValue = parse(value);
+            }
+            catch (error) {
+            }
+        }
+        return parsedValue;
+    }, [value]);
+}
+
+function isPartialHttpRequest(maybeHttpRequest) {
+    return (isObject(maybeHttpRequest) &&
+        'method' in maybeHttpRequest &&
+        typeof maybeHttpRequest['method'] === 'string' &&
+        'url' in maybeHttpRequest &&
+        typeof maybeHttpRequest['url'] === 'string');
+}
+const SchemaAndDescription = ({ title: titleProp, schema }) => {
+    const [resolveRef, maxRefDepth] = useSchemaInlineRefResolver();
+    const title = titleProp !== null && titleProp !== void 0 ? titleProp : schema.title;
+    return (React__default.createElement(Box, { py: 2 },
+        title && (React__default.createElement(Flex, { alignItems: "center", p: 2 },
+            React__default.createElement(Icon, { icon: NodeTypeIconDefs[NodeType.Model], color: NodeTypeColors[NodeType.Model] }),
+            React__default.createElement(Box, { color: "muted", px: 2 }, title))),
+        React__default.createElement(JsonSchemaViewer, { resolveRef: resolveRef, maxRefDepth: maxRefDepth, schema: getOriginalObject(schema) })));
+};
+const CodeComponent = props => {
+    const { title, jsonSchema, http, resolved, children } = props;
+    const resolver = useInlineRefResolver();
+    const value = resolved || String(Array.isArray(children) ? children[0] : children);
+    const parsedValue = useParsedValue(value);
+    if (jsonSchema) {
+        if (!isJSONSchema(parsedValue)) {
+            return null;
+        }
+        return (React__default.createElement(InlineRefResolverProvider, { document: parsedValue, resolver: resolver === null || resolver === void 0 ? void 0 : resolver.resolver, maxRefDepth: resolver === null || resolver === void 0 ? void 0 : resolver.maxRefDepth },
+            React__default.createElement(SchemaAndDescription, { title: title, schema: parsedValue })));
+    }
+    if (http) {
+        if (!isObject(parsedValue) || (!isPartialHttpRequest(parsedValue) && !isHttpOperation(parsedValue))) {
+            return null;
+        }
+        return (React__default.createElement(PersistenceContextProvider, null,
+            React__default.createElement(TryIt, { httpOperation: isHttpOperation(parsedValue) ? parsedValue : parseHttpRequest(parsedValue), embeddedInMd: true })));
+    }
+    const DefaultCode = DefaultSMDComponents.code;
+    return React__default.createElement(DefaultCode, Object.assign({}, props));
+};
+function parseHttpRequest(data) {
+    const uri = URI(data.url);
+    const pathParam = data.url.match(/[^{\}]+(?=})/g);
+    return {
+        id: '?http-operation-id?',
+        method: data.method,
+        path: uri.is('absolute') ? uri.path() : data.url,
+        servers: [{ id: `?http-server-${uri.href()}?`, url: uri.is('absolute') ? uri.origin() : data.baseUrl || '' }],
+        request: Object.assign({ query: Object.entries(data.query || {}).map(([key, value]) => {
+                const defaultVal = Array.isArray(value) ? value[0] : value;
+                return {
+                    id: `?http-query-${key}-id?`,
+                    name: key,
+                    style: HttpParamStyles.Form,
+                    schema: { default: defaultVal },
+                    required: isHttpRequestParamRequired(defaultVal),
+                };
+            }), headers: Object.entries(data.headers || {}).map(([key, value]) => ({
+                id: `?http-header-${key}-id?`,
+                name: key,
+                style: HttpParamStyles.Simple,
+                schema: { default: value },
+                required: isHttpRequestParamRequired(value),
+            })), path: pathParam === null || pathParam === void 0 ? void 0 : pathParam.map(name => ({
+                id: `?http-param-${name}-id?`,
+                name,
+                style: HttpParamStyles.Simple,
+                required: true,
+            })) }, (data.body
+            ? {
+                body: {
+                    id: '?http-request-body?',
+                    contents: [
+                        {
+                            id: '?http-request-body-media?',
+                            mediaType: 'application/json',
+                            schema: { default: data.body },
+                        },
+                    ],
+                },
+            }
+            : null)),
+        responses: [],
+    };
+}
+function isHttpRequestParamRequired(value) {
+    return typeof value !== 'undefined';
+}
+
+const MarkdownComponentsProvider = ({ value, children }) => {
+    return React.createElement(MarkdownViewerProvider, { components: Object.assign({ code: CodeComponent }, value) }, children);
+};
+
+const externalRegex = new RegExp('^(?:[a-z]+:)?//', 'i');
+const ReactRouterMarkdownLink = ({ title, to, href: _href, children, }) => {
+    const href = to || _href;
+    const isExternal = href !== undefined && externalRegex.test(href);
+    if (isExternal) {
+        return (React__default.createElement("a", { target: "_blank", rel: "noreferrer noopener", href: href, title: title }, children));
+    }
+    return (React__default.createElement(HashLink, { to: href, title: title }, children));
+};
+
+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 || ['fas', 'exclamation-triangle'], color: "light", fontSize: "6xl", mb: 4 }),
+        React.createElement(Heading, { size: 4, mb: 4 }, title),
+        React.createElement(Text, null, description)));
+};
+
 function withMosaicProvider(WrappedComponent) {
     const WithMosaicProvider = (props) => {
         try {
@@ -3761,4 +3894,4 @@ const createElementClass = (Component, propDescriptors) => {
     };
 };
 
-export { DeprecatedBadge, Docs, ExportButton, HttpMethodColors, InlineRefResolverProvider, Logo, MarkdownComponentsProvider, MockingProvider, NodeTypeColors, NodeTypeIconDefs, NodeTypePrettyName, NonIdealState, ParsedDocs, PersistenceContextProvider, PoweredByLink, ReactRouterMarkdownLink, RouterTypeContext, SidebarLayout, Styled, TableOfContents, TryIt, TryItWithRequestSamples, createElementClass, createResolvedObject, findFirstNode, isHttpOperation, isHttpService, isHttpWebhookOperation, slugify, useBundleRefsIntoDocument, useParsedData, useParsedValue, useRouter, withMosaicProvider, withPersistenceBoundary, withQueryClientProvider, withRouter, withStyles };
+export { DeprecatedBadge, Docs, ExportButton, HttpMethodColors, InlineRefResolverProvider, LinkHeading, Logo, MarkdownComponentsProvider, MockingProvider, NodeTypeColors, NodeTypeIconDefs, NodeTypePrettyName, NonIdealState, ParsedDocs, PersistenceContextProvider, PoweredByLink, ReactRouterMarkdownLink, ResponsiveSidebarLayout, RouterTypeContext, SidebarLayout, Styled, TableOfContents, TryIt, TryItWithRequestSamples, createElementClass, createResolvedObject, findFirstNode, isHttpOperation, isHttpService, isHttpWebhookOperation, slugify, useBundleRefsIntoDocument, useParsedData, useParsedValue, useResponsiveLayout, useRouter, withMosaicProvider, withPersistenceBoundary, withQueryClientProvider, withRouter, withStyles };