@stoplight/elements-core 7.16.6 → 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';
@@ -180,6 +180,11 @@ function isHttpService(maybeHttpService) {
 function isHttpOperation(maybeHttpOperation) {
     return isStoplightNode(maybeHttpOperation) && 'method' in maybeHttpOperation && 'path' in maybeHttpOperation;
 }
+function isHttpWebhookOperation(maybeHttpWebhookOperation) {
+    return (isStoplightNode(maybeHttpWebhookOperation) &&
+        'method' in maybeHttpWebhookOperation &&
+        'name' in maybeHttpWebhookOperation);
+}
 const properUrl = new RegExp(/((([A-Za-z]{3,9}:(?:\/\/)?)(?:[\-;:&=\+\$,\w]+@)?[A-Za-z0-9\.\-]+|(?:www\.|[\-;:&=\+\$,\w]+@)[A-Za-z0-9\.\-]+)((?:\/[\+~%\/\.\w\-_]*)?\??(?:[\-\+=&;%@\.\w_]*)#?(?:[\.\!\/\\\w]*))?)/);
 function isProperUrl(url) {
     return properUrl.test(url);
@@ -191,6 +196,7 @@ function useParsedData(nodeType, data) {
 const parserMap = {
     [NodeType.Article]: parseArticleData,
     [NodeType.HttpOperation]: parseHttpOperation,
+    [NodeType.HttpWebhook]: parseHttpWebhookOperation,
     [NodeType.HttpService]: parseHttpService,
     [NodeType.Model]: parseModel,
     [NodeType.HttpServer]: parseUnknown,
@@ -223,6 +229,16 @@ function parseHttpOperation(rawData) {
     }
     return undefined;
 }
+function parseHttpWebhookOperation(rawData) {
+    const data = tryParseYamlOrObject(rawData);
+    if (isHttpWebhookOperation(data)) {
+        return {
+            type: NodeType.HttpWebhook,
+            data: data,
+        };
+    }
+    return undefined;
+}
 function parseHttpService(rawData) {
     const data = tryParseYamlOrObject(rawData);
     if (isHttpService(data)) {
@@ -292,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',
@@ -338,6 +359,16 @@ var faDatabase = {
   iconName: 'database',
   icon: [448, 512, [], "f1c0", "M448 80V128C448 172.2 347.7 208 224 208C100.3 208 0 172.2 0 128V80C0 35.82 100.3 0 224 0C347.7 0 448 35.82 448 80zM393.2 214.7C413.1 207.3 433.1 197.8 448 186.1V288C448 332.2 347.7 368 224 368C100.3 368 0 332.2 0 288V186.1C14.93 197.8 34.02 207.3 54.85 214.7C99.66 230.7 159.5 240 224 240C288.5 240 348.3 230.7 393.2 214.7V214.7zM54.85 374.7C99.66 390.7 159.5 400 224 400C288.5 400 348.3 390.7 393.2 374.7C413.1 367.3 433.1 357.8 448 346.1V432C448 476.2 347.7 512 224 512C100.3 512 0 476.2 0 432V346.1C14.93 357.8 34.02 367.3 54.85 374.7z"]
 };
+var faEnvelope = {
+  prefix: 'fas',
+  iconName: 'envelope',
+  icon: [512, 512, [128386, 61443, 9993], "f0e0", "M464 64C490.5 64 512 85.49 512 112C512 127.1 504.9 141.3 492.8 150.4L275.2 313.6C263.8 322.1 248.2 322.1 236.8 313.6L19.2 150.4C7.113 141.3 0 127.1 0 112C0 85.49 21.49 64 48 64H464zM217.6 339.2C240.4 356.3 271.6 356.3 294.4 339.2L512 176V384C512 419.3 483.3 448 448 448H64C28.65 448 0 419.3 0 384V176L217.6 339.2z"]
+};
+var faEnvelopesBulk = {
+  prefix: 'fas',
+  iconName: 'envelopes-bulk',
+  icon: [640, 512, ["mail-bulk"], "f674", "M191.9 448.6c-9.766 0-19.48-2.969-27.78-8.891L32 340.2V480c0 17.62 14.38 32 32 32h256c17.62 0 32-14.38 32-32v-139.8L220.2 439.5C211.7 445.6 201.8 448.6 191.9 448.6zM192 192c0-35.25 28.75-64 64-64h224V32c0-17.62-14.38-32-32-32H128C110.4 0 96 14.38 96 32v192h96V192zM320 256H64C46.38 256 32 270.4 32 288v12.18l151 113.8c5.25 3.719 12.7 3.734 18.27-.25L352 300.2V288C352 270.4 337.6 256 320 256zM576 160H256C238.4 160 224 174.4 224 192v32h96c33.25 0 60.63 25.38 63.75 57.88L384 416h192c17.62 0 32-14.38 32-32V192C608 174.4 593.6 160 576 160zM544 288h-64V224h64V288z"]
+};
 var faEye = {
   prefix: 'fas',
   iconName: 'eye',
@@ -353,9 +384,15 @@ 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',
+    http_webhook: 'primary',
     http_service: '#e056fd',
     article: '#399da6',
     model: '#ef932b',
@@ -372,6 +409,7 @@ const NodeTypeColors = {
 };
 const NodeTypePrettyName = {
     http_operation: 'Endpoint',
+    http_webhook: 'Webhook',
     http_service: 'API',
     article: 'Article',
     model: 'Model',
@@ -388,6 +426,7 @@ const NodeTypePrettyName = {
 };
 const NodeTypeIconDefs = {
     http_operation: faCrosshairs,
+    http_webhook: faEnvelope,
     http_service: faCloud,
     article: faBookOpen,
     model: faCube,
@@ -2137,7 +2176,7 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
     }, [servers, firstServer, chosenServer, setChosenServer]);
     React.useEffect(() => {
         let isMounted = true;
-        if (onRequestChange || embeddedInMd) {
+        if (isHttpOperation(httpOperation) && (onRequestChange || embeddedInMd)) {
             buildHarRequest(Object.assign(Object.assign({ mediaTypeContent, parameterValues: parameterValuesWithDefaults, serverVariableValues,
                 httpOperation, bodyInput: formDataState.isFormDataBody ? getValues() : textRequestBody, auth: operationAuthValue }, (isMockingEnabled && { mockData: getMockData(mockUrl, httpOperation, mockingOptions) })), { chosenServer,
                 corsProxy })).then(request => {
@@ -2170,7 +2209,7 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
     ]);
     const handleSendRequest = () => __awaiter(void 0, void 0, void 0, function* () {
         setValidateParameters(true);
-        if (hasRequiredButEmptyParameters)
+        if (hasRequiredButEmptyParameters || !isHttpOperation(httpOperation))
             return;
         try {
             setLoading(true);
@@ -2218,23 +2257,33 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
     const isOnlySendButton = !((_d = httpOperation.security) === null || _d === void 0 ? void 0 : _d.length) && !allParameters.length && !formDataState.isFormDataBody && !mediaTypeContent;
     const tryItPanelContents = (React.createElement(React.Fragment, null,
         ((_e = httpOperation.security) === null || _e === void 0 ? void 0 : _e.length) ? (React.createElement(TryItAuth, { operationSecuritySchemes: httpOperation.security, operationAuthValue: operationAuthValue, setOperationAuthValue: setOperationAuthValue, setCurrentScheme: setCurrentScheme })) : null,
-        serverVariables.length > 0 && (React.createElement(ServerVariables, { variables: serverVariables, values: serverVariableValues, onChangeValue: updateServerVariableValue })),
+        isHttpOperation(httpOperation) && serverVariables.length > 0 && (React.createElement(ServerVariables, { variables: serverVariables, values: serverVariableValues, onChangeValue: updateServerVariableValue })),
         allParameters.length > 0 && (React.createElement(OperationParameters, { parameters: allParameters, values: parameterValuesWithDefaults, onChangeValue: updateParameterValue, validate: validateParameters })),
-        formDataState.isFormDataBody ? (React.createElement(FormDataBody, { specification: formDataState.bodySpecification, values: bodyParameterValues, onChangeValues: setBodyParameterValues, onChangeParameterAllow: setAllowedEmptyValues, isAllowedEmptyValues: isAllowedEmptyValues })) : mediaTypeContent ? (React.createElement(RequestBody, { examples: (_f = mediaTypeContent.examples) !== null && _f !== void 0 ? _f : [], requestBody: textRequestBody, onChange: setTextRequestBody })) : null,
-        React.createElement(Panel.Content, { className: "SendButtonHolder", mt: 4, pt: !isOnlySendButton && !embeddedInMd ? 0 : undefined },
+        React.createElement(Box, { pb: 1 }, formDataState.isFormDataBody ? (React.createElement(FormDataBody, { specification: formDataState.bodySpecification, values: bodyParameterValues, onChangeValues: setBodyParameterValues, onChangeParameterAllow: setAllowedEmptyValues, isAllowedEmptyValues: isAllowedEmptyValues })) : mediaTypeContent ? (React.createElement(RequestBody, { examples: (_f = mediaTypeContent.examples) !== null && _f !== void 0 ? _f : [], requestBody: textRequestBody, onChange: setTextRequestBody })) : null),
+        isHttpOperation(httpOperation) ? (React.createElement(Panel.Content, { className: "SendButtonHolder", pt: !isOnlySendButton && !embeddedInMd ? 0 : undefined },
             React.createElement(HStack, { alignItems: "center", spacing: 2 },
                 React.createElement(Button, { appearance: "primary", loading: loading, disabled: loading, onPress: handleSendRequest, size: "sm" }, "Send API Request"),
                 servers.length > 1 && React.createElement(ServersDropdown, { servers: servers }),
                 isMockingEnabled && (React.createElement(MockingButton, { options: mockingOptions, onOptionsChange: setMockingOptions, operation: httpOperation }))),
             validateParameters && hasRequiredButEmptyParameters && (React.createElement(Box, { mt: 4, color: "danger-light", fontSize: "sm" },
                 React.createElement(Icon, { icon: ['fas', 'exclamation-triangle'], className: "sl-mr-1" }),
-                "You didn't provide all of the required parameters!")))));
+                "You didn't provide all of the required parameters!")))) : null));
     let tryItPanelElem;
     if (embeddedInMd) {
+        let path;
+        if (isHttpOperation(httpOperation)) {
+            path = httpOperation.path;
+        }
+        else if (isHttpWebhookOperation(httpOperation)) {
+            path = httpOperation.name;
+        }
+        else {
+            throw new RangeError('unsupported type');
+        }
         tryItPanelElem = (React.createElement(Panel, { isCollapsible: false, p: 0, className: "TryItPanel" },
             React.createElement(Panel.Titlebar, { bg: "canvas-300" },
                 React.createElement(Box, { fontWeight: "bold", color: !isDark ? HttpMethodColors[httpOperation.method] : undefined }, httpOperation.method.toUpperCase()),
-                React.createElement(Box, { fontWeight: "medium", ml: 2, textOverflow: "truncate", overflowX: "hidden" }, `${(chosenServer === null || chosenServer === void 0 ? void 0 : chosenServer.url) || ''}${httpOperation.path}`)),
+                React.createElement(Box, { fontWeight: "medium", ml: 2, textOverflow: "truncate", overflowX: "hidden" }, `${(chosenServer === null || chosenServer === void 0 ? void 0 : chosenServer.url) || ''}${path}`)),
             tryItPanelContents));
     }
     else {
@@ -2712,7 +2761,17 @@ const HttpOperationComponent = React.memo(({ className, data: unresolvedData, la
     const [requestBodyIndex, setTextRequestBodyIndex] = React.useState(0);
     const prettyName = (data.summary || data.iid || '').trim();
     const hasBadges = isDeprecated || isInternal;
-    const header = (React.createElement(OperationHeader, { id: data.id, method: data.method, path: data.path, noHeading: layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.noHeading, hasBadges: hasBadges, name: prettyName, isDeprecated: isDeprecated, isInternal: isInternal }));
+    let path;
+    if (isHttpOperation(data)) {
+        path = data.path;
+    }
+    else if (isHttpWebhookOperation(data)) {
+        path = data.name;
+    }
+    else {
+        throw new RangeError('unsupported node type');
+    }
+    const header = (React.createElement(OperationHeader, { id: data.id, method: data.method, path: path, noHeading: layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.noHeading, hasBadges: hasBadges, name: prettyName, isDeprecated: isDeprecated, isInternal: isInternal, hideServerUrl: !isHttpOperation(data) }));
     const tryItPanel = !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideTryItPanel) && (React.createElement(TryItWithRequestSamples, { httpOperation: data, responseMediaType: responseMediaType, responseStatusCode: responseStatusCode, requestBodyIndex: requestBodyIndex, hideTryIt: layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideTryIt, tryItCredentialsPolicy: tryItCredentialsPolicy, mockUrl: mocking.hideMocking ? undefined : mocking.mockUrl, corsProxy: tryItCorsProxy }));
     const descriptionChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: data.id, attr: 'description' });
     const description = (React.createElement(VStack, { spacing: 10 },
@@ -3035,6 +3094,7 @@ const ParsedDocs = (_a) => {
         case 'article':
             return React.createElement(Article, Object.assign({ data: node.data }, commonProps));
         case 'http_operation':
+        case 'http_webhook':
             return React.createElement(HttpOperation, Object.assign({ data: node.data }, commonProps));
         case 'http_service':
             return React.createElement(HttpService, Object.assign({ data: node.data }, commonProps));
@@ -3046,188 +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 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() {
@@ -3240,21 +3165,26 @@ function useFirstRender() {
 const NODE_TYPE_TITLE_ICON = {
     http_service: faCloud,
     http_operation: faBullseye,
+    http_webhook: faEnvelope,
     model: faCube,
 };
-const NODE_TITLE_ICON = {
-    Schemas: faCubes,
+const NODE_GROUP_ICON = {
+    http_webhook: faEnvelopesBulk,
+    model: faCubes,
 };
 const NODE_TYPE_META_ICON = {
+    webhook: faEnvelope,
     model: faCube,
 };
 const NODE_TYPE_ICON_COLOR = {
     model: 'warning',
     http_service: '#D812EA',
     http_operation: '#9747FF',
+    http_webhook: 'primary',
 };
-const NODE_TITLE_ICON_COLOR = {
-    Schemas: 'warning',
+const NODE_GROUP_ICON_COLOR = {
+    http_webhook: 'primary',
+    model: 'warning',
 };
 const NODE_META_COLOR = {
     get: 'success',
@@ -3307,7 +3237,7 @@ function isDivider(item) {
     return Object.keys(item).length === 1 && 'title' in item;
 }
 function isGroup(item) {
-    return Object.keys(item).length === 2 && 'title' in item && 'items' in item;
+    return Object.keys(item).length >= 2 && 'title' in item && 'items' in item;
 }
 function isNodeGroup(item) {
     return 'title' in item && 'items' in item && 'slug' in item && 'id' in item && 'meta' in item && 'type' in item;
@@ -3321,6 +3251,7 @@ function isExternalLink(item) {
 
 const ActiveIdContext = React.createContext(undefined);
 const LinkContext = React.createContext(undefined);
+LinkContext.displayName = 'LinkContext';
 const TableOfContents = React.memo(({ tree, activeId, Link, maxDepthOpenByDefault, externalScrollbar = false, isInResponsiveMode = false, onLinkClick, }) => {
     const container = React.useRef(null);
     const child = React.useRef(null);
@@ -3349,9 +3280,11 @@ const TableOfContents = React.memo(({ tree, activeId, Link, maxDepthOpenByDefaul
                     return (React.createElement(GroupItem, { key: key, item: item, depth: 0, maxDepthOpenByDefault: maxDepthOpenByDefault, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode, makeSlugAbsoluteRoute: makeSlugAbsoluteRoute }));
                 }))))));
 });
+TableOfContents.displayName = 'TableOfContents';
 const Divider = React.memo(({ item, isInResponsiveMode = false }) => {
     return (React.createElement(Box, { pl: 4, mb: 2, mt: 6, textTransform: "uppercase", fontSize: isInResponsiveMode ? 'lg' : 'sm', lineHeight: "relaxed", letterSpacing: "wide", fontWeight: "bold" }, item.title));
 });
+Divider.displayName = 'Divider';
 const GroupItem = React.memo(({ item, depth, maxDepthOpenByDefault, isInResponsiveMode, makeSlugAbsoluteRoute, onLinkClick }) => {
     if (isExternalLink(item)) {
         return (React.createElement(Box, { as: "a", href: item.url, target: "_blank", rel: "noopener noreferrer", display: "block" },
@@ -3367,6 +3300,7 @@ const GroupItem = React.memo(({ item, depth, maxDepthOpenByDefault, isInResponsi
     }
     return null;
 });
+GroupItem.displayName = 'GroupItem';
 const Group = React.memo(({ depth, item, maxDepthOpenByDefault, isInResponsiveMode, makeSlugAbsoluteRoute, onLinkClick = () => { } }) => {
     const activeId = React.useContext(ActiveIdContext);
     const [isOpen, setIsOpen] = React.useState(() => isGroupOpenByDefault(depth, item, activeId, maxDepthOpenByDefault));
@@ -3398,7 +3332,8 @@ const Group = React.memo(({ depth, item, maxDepthOpenByDefault, isInResponsiveMo
         elem = (React.createElement(Node, { depth: depth, item: item, meta: meta, showAsActive: showAsActive, onClick: handleClick, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode, makeSlugAbsoluteRoute: makeSlugAbsoluteRoute }));
     }
     else {
-        elem = (React.createElement(Item, { isInResponsiveMode: isInResponsiveMode, title: item.title, meta: meta, onClick: handleClick, depth: depth, isActive: showAsActive, icon: NODE_TITLE_ICON[item.title] && (React.createElement(Box, { as: Icon, color: NODE_TITLE_ICON_COLOR[item.title], icon: NODE_TITLE_ICON[item.title] })) }));
+        elem = (React.createElement(Item, { isInResponsiveMode: isInResponsiveMode, title: item.title, meta: meta, onClick: handleClick, depth: depth, isActive: showAsActive, icon: item.itemsType &&
+                NODE_GROUP_ICON[item.itemsType] && (React.createElement(Box, { as: Icon, color: NODE_GROUP_ICON_COLOR[item.itemsType], icon: NODE_GROUP_ICON[item.itemsType] })) }));
     }
     return (React.createElement(React.Fragment, null,
         elem,
@@ -3407,6 +3342,7 @@ const Group = React.memo(({ depth, item, maxDepthOpenByDefault, isInResponsiveMo
                 return (React.createElement(GroupItem, { key: key, item: groupItem, depth: depth + 1, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode, makeSlugAbsoluteRoute: makeSlugAbsoluteRoute }));
             })));
 });
+Group.displayName = 'Group';
 const Item = React.memo(({ depth, isActive, id, title, meta, icon, isInResponsiveMode, onClick }) => {
     return (React.createElement(Flex, { id: id, bg: {
             default: isInResponsiveMode ? 'canvas' : isActive ? 'primary-tint' : 'canvas-100',
@@ -3416,6 +3352,7 @@ const Item = React.memo(({ depth, isActive, id, title, meta, icon, isInResponsiv
         React.createElement(Box, { alignItems: "center", flex: 1, mr: meta ? 1.5 : undefined, ml: icon && 1.5, textOverflow: "truncate", fontSize: isInResponsiveMode ? 'lg' : 'base' }, title),
         React.createElement(Flex, { alignItems: "center", fontSize: isInResponsiveMode ? 'base' : 'xs' }, meta)));
 });
+Item.displayName = 'Item';
 const Node = React.memo(({ item, depth, meta, showAsActive, isInResponsiveMode, makeSlugAbsoluteRoute, onClick, onLinkClick = () => { } }) => {
     const activeId = React.useContext(ActiveIdContext);
     const isActive = activeId === item.slug || activeId === item.id;
@@ -3435,11 +3372,270 @@ const Node = React.memo(({ item, depth, meta, showAsActive, isInResponsiveMode,
     return (React.createElement(Box, { as: LinkComponent, to: makeSlugAbsoluteRoute && !item.slug.startsWith('/') ? `/${item.slug}` : item.slug, display: "block", textDecoration: "no-underline", className: "ElementsTableOfContentsItem" },
         React.createElement(Item, { id: getHtmlIdFromItemId(item.slug || item.id), isActive: isActive || showAsActive, depth: depth, title: item.title, icon: NODE_TYPE_TITLE_ICON[item.type] && (React.createElement(Box, { as: Icon, color: NODE_TYPE_ICON_COLOR[item.type], icon: NODE_TYPE_TITLE_ICON[item.type] })), meta: meta, isInResponsiveMode: isInResponsiveMode, onClick: handleClick })));
 });
+Node.displayName = 'Node';
 const Version = ({ value }) => {
     return (React.createElement(Box, { mr: 2 },
         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 }),
@@ -3698,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, 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 };