@stoplight/elements-core 7.3.11 → 7.4.0

package/index.esm.js

@@ -2,32 +2,56 @@ import { __rest, __awaiter } from 'tslib';
 import * as React from 'react';
 import React__default, { useContext, useMemo } from 'react';
 import { resolveInlineRef, isPlainObject as isPlainObject$1, safeParse, safeStringify } from '@stoplight/json';
-import _, { isObject, isPlainObject, isArray, throttle, filter, capitalize, flatten, curry, map, omit, pickBy, isString, compact, uniq, uniqBy, orderBy, sortBy, get, omitBy, isEmpty, keys, entries, mapValues, isEqual } from 'lodash';
+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, Flex, Box, Popover, Button, Panel, CopyButton, Menu, Text, Input, Icon, Select, Image, Link, useThemeIsDark, Tooltip, VStack, InvertTheme, Badge, Tabs, TabList, Tab, TabPanels, TabPanel, Heading as Heading$1, HStack, useClipboard, useMosaicContext, Provider as Provider$1 } from '@stoplight/mosaic';
+import { isArray as isArray$1, Box, Flex, Icon, Popover, Button, Panel, CopyButton, Menu, Text, Input, Select, Image, Link, useThemeIsDark, Tooltip, VStack, InvertTheme, Badge, Tabs, TabList, Tab, TabPanels, TabPanel, Heading as Heading$1, HStack, 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, faExclamationTriangle, faEye, faLock, faBolt, faCopy, faCheck } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faStream, faCrosshairs, faCloud, faBookOpen, faCube, faDatabase, faQuestionCircle, faExclamationCircle, 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 { atom, useAtom, Provider } from 'jotai';
 import URI from 'urijs';
 import { CodeViewer } from '@stoplight/mosaic-code-viewer';
 import HTTPSnippet from 'httpsnippet';
+import flatten from 'lodash/flatten.js';
+import capitalize from 'lodash/capitalize.js';
+import filter from 'lodash/filter.js';
 import { nanoid } from 'nanoid';
+import curry from 'lodash/curry.js';
+import omit from 'lodash/omit.js';
+import keyBy from 'lodash/keyBy.js';
+import map from 'lodash/map.js';
+import mapValues from 'lodash/mapValues.js';
+import isString from 'lodash/isString.js';
+import pickBy from 'lodash/pickBy.js';
 import { CodeEditor } from '@stoplight/mosaic-code-editor';
 import * as Sampler from '@stoplight/json-schema-sampler';
+import compact from 'lodash/compact.js';
+import uniq from 'lodash/uniq.js';
+import orderBy from 'lodash/orderBy.js';
+import uniqBy from 'lodash/uniqBy.js';
 import formatXml from 'xml-formatter';
-import { Link as Link$1, useLocation, BrowserRouter, MemoryRouter, HashRouter, Route } from 'react-router-dom';
+import { atomWithStorage } from 'jotai/utils';
+import entries from 'lodash/entries.js';
+import keys from 'lodash/keys.js';
 import { JsonSchemaViewer, Validations } from '@stoplight/json-schema-viewer';
+import get from 'lodash/get.js';
+import isEmpty from 'lodash/isEmpty.js';
+import omitBy from 'lodash/omitBy.js';
+import sortBy from 'lodash/sortBy.js';
+import { useLocation, BrowserRouter, MemoryRouter, HashRouter, Route } from 'react-router-dom';
 import { HashLink } from 'react-router-hash-link';
 import { QueryClient, useQueryClient, QueryClientProvider } from 'react-query';
 import $RefParser from '@stoplight/json-schema-ref-parser';
 import * as PropTypes from 'prop-types';
+import isEqual from 'lodash/isEqual.js';
 import * as ReactDOM from 'react-dom';
 
 const defaultResolver = (contextObject) => ({ pointer }, _, currentObject) => {
@@ -262,15 +286,15 @@ 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 });
+    return React.createElement(Headings, { className: "ArticleHeadings", headings: headings, minimal: !showHeadings, maxWidth: 300 });
 };
-const Headings = ({ headings, className, title = 'On This Page', minimal }) => {
+const Headings = ({ headings, className, title = 'On This Page', minimal, maxWidth }) => {
     const locationHash = useLocationHash();
     if (!headings || !headings.length)
         return null;
-    const component = (React.createElement("div", { style: { maxHeight: '85vh', overflow: 'auto' } },
+    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(FontAwesomeIcon, { icon: faStream, className: "sl-mr-2" }),
+            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}` })))));
     if (minimal) {
@@ -290,7 +314,7 @@ const ArticleComponent = React.memo(({ data }) => {
     const tree = React.useMemo(() => (typeof data === 'object' ? data : parse(data)), [data]);
     if (tree === null)
         return null;
-    return (React.createElement(Flex, { className: "sl-elements-article", w: "full", pos: "relative", ref: setContainer },
+    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 })));
@@ -311,38 +335,6 @@ function createNamedContext(name, defaultValue) {
     return context;
 }
 
-function getReadableSecurityName(securityScheme, includeKey = false) {
-    let name = '';
-    switch (securityScheme.type) {
-        case 'apiKey':
-            name = 'API Key';
-            break;
-        case 'http':
-            name = `${capitalize(securityScheme.scheme)} Auth`;
-            break;
-        case 'oauth2':
-            name = 'OAuth 2.0';
-            break;
-        case 'openIdConnect':
-            name = 'OpenID Connect';
-            break;
-        case 'mutualTLS':
-            name = 'Mutual TLS';
-            break;
-    }
-    return includeKey ? `${name} (${securityScheme.key})` : name;
-}
-function getServiceUriFromOperation(uri) {
-    const match = uri === null || uri === void 0 ? void 0 : uri.match(/(.*)\/(paths|operations)/);
-    return match && match.length > 1 ? match[1] || '/' : undefined;
-}
-const isOAuth2ImplicitFlow = (maybeFlow) => isObject(maybeFlow) && 'authorizationUrl' in maybeFlow && !('tokenUrl' in maybeFlow);
-const isOauth2AuthorizationCodeFlow = (maybeFlow) => isObject(maybeFlow) && 'authorizationUrl' in maybeFlow && 'tokenUrl' in maybeFlow;
-const isOauth2ClientCredentialsOrPasswordFlow = (maybeFlow) => isObject(maybeFlow) && !('authorizationUrl' in maybeFlow) && 'tokenUrl' in maybeFlow;
-function shouldIncludeKey(schemes, type) {
-    return filter(schemes, { type }).length > 1;
-}
-
 const NodeTypeColors = {
     http_operation: '#6a6acb',
     http_service: '#e056fd',
@@ -731,6 +723,34 @@ const RequestSamples = React__default.memo(({ request, embeddedInMd = false }) =
             React__default.createElement(CodeViewer, { "aria-label": requestSample !== null && requestSample !== void 0 ? requestSample : fallbackText, noCopyButton: true, maxHeight: "400px", language: mosaicCodeViewerLanguage, value: requestSample || fallbackText }))));
 });
 
+function getReadableSecurityName(securityScheme, includeKey = false) {
+    let name = '';
+    switch (securityScheme.type) {
+        case 'apiKey':
+            name = 'API Key';
+            break;
+        case 'http':
+            name = `${capitalize(securityScheme.scheme)} Auth`;
+            break;
+        case 'oauth2':
+            name = 'OAuth 2.0';
+            break;
+        case 'openIdConnect':
+            name = 'OpenID Connect';
+            break;
+        case 'mutualTLS':
+            name = 'Mutual TLS';
+            break;
+    }
+    return includeKey ? `${name} (${securityScheme.key})` : name;
+}
+const isOAuth2ImplicitFlow = (maybeFlow) => isObject(maybeFlow) && 'authorizationUrl' in maybeFlow && !('tokenUrl' in maybeFlow);
+const isOauth2AuthorizationCodeFlow = (maybeFlow) => isObject(maybeFlow) && 'authorizationUrl' in maybeFlow && 'tokenUrl' in maybeFlow;
+const isOauth2ClientCredentialsOrPasswordFlow = (maybeFlow) => isObject(maybeFlow) && !('authorizationUrl' in maybeFlow) && 'tokenUrl' in maybeFlow;
+function shouldIncludeKey(schemes, type) {
+    return filter(schemes, { type }).length > 1;
+}
+
 const useUniqueId = (prefix = 'id_') => React.useRef(`${prefix}${nanoid(8)}`).current;
 
 const AuthTokenInput = ({ type, name, value, onChange }) => {
@@ -1006,10 +1026,8 @@ const getInitialValueForParameter = (parameter) => {
     return getValueForParameter(parameter);
 };
 const initialParameterValues = params => {
-    return _.chain(params)
-        .keyBy((param) => param.name)
-        .mapValues(param => getInitialValueForParameter(param))
-        .value();
+    const paramsByName = keyBy(params, (param) => param.name);
+    return mapValues(paramsByName, param => getInitialValueForParameter(param));
 };
 function mapSchemaPropertiesToParameters(properties, required) {
     return Object.entries(properties).map(([name, schema]) => (Object.assign({ name, schema: typeof schema !== 'boolean' ? schema : undefined, examples: typeof schema !== 'boolean' && schema.examples ? [{ key: 'example', value: schema.examples }] : undefined }, ((required === null || required === void 0 ? void 0 : required.includes(name)) && { required: true }))));
@@ -1235,7 +1253,6 @@ const generateExamplesFromJsonSchema = (schema) => {
             : [{ label: 'default', data: '' }];
     }
     catch (e) {
-        console.error(e);
         return [{ label: '', data: `Example cannot be created for this schema\n${e}` }];
     }
 };
@@ -1611,7 +1628,7 @@ const TryItResponse = ({ response }) => {
                         ? parseBody(response.bodyText, responseType)
                         : response.bodyText })) : response.blob && responseType === 'image' ? (React.createElement(Flex, { justifyContent: "center" },
                     React.createElement(Image, { src: URL.createObjectURL(response.blob), alt: "response image" }))) : (React.createElement("p", null,
-                    React.createElement(FontAwesomeIcon, { icon: faExclamationCircle, className: "sl-mr-2" }),
+                    React.createElement(Box, { as: Icon, icon: faExclamationCircle, mr: 2 }),
                     "No supported response body returned"))))));
 };
 const ResponseMenu = ({ types, type, onChange }) => {
@@ -1665,18 +1682,22 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
         }
     }, []);
     React.useEffect(() => {
-        let isActive = true;
+        let isMounted = true;
         if (onRequestChange || embeddedInMd) {
             buildHarRequest(Object.assign(Object.assign({ mediaTypeContent, parameterValues: parameterValuesWithDefaults, httpOperation, bodyInput: formDataState.isFormDataBody ? bodyParameterValues : textRequestBody, auth: operationAuthValue }, (mockingOptions.isEnabled && { mockData: getMockData(mockUrl, httpOperation, mockingOptions) })), { chosenServer,
                 corsProxy })).then(request => {
-                if (onRequestChange && isActive)
-                    onRequestChange(request);
-                if (embeddedInMd)
-                    setRequestData(request);
+                if (isMounted) {
+                    if (onRequestChange) {
+                        onRequestChange(request);
+                    }
+                    if (embeddedInMd) {
+                        setRequestData(request);
+                    }
+                }
             });
         }
         return () => {
-            isActive = false;
+            isMounted = false;
         };
     }, [
         httpOperation,
@@ -1809,18 +1830,13 @@ const TryItWithRequestSamples = (_a) => {
 const TwoColumnLayout = ({ header, right, left, className }) => (React__default.createElement(Box, { w: "full", className: className },
     header,
     React__default.createElement(Flex, { mt: header ? 12 : undefined },
-        React__default.createElement(Box, { style: { width: 0 }, flex: 1 }, left),
+        React__default.createElement(Box, { w: 0, flex: 1 }, left),
         right && (React__default.createElement(Box, { ml: 16, pos: "relative", w: "2/5", style: { maxWidth: 500 } }, right)))));
 
 const DeprecatedBadge = () => (React__default.createElement(Tooltip, { renderTrigger: React__default.createElement(Badge, { intent: "warning", icon: faExclamationCircle, "data-testid": "badge-deprecated" }, "Deprecated") }, "This operation has been marked as deprecated, which means it could be removed at some point in the future."));
-const InternalBadge = ({ isHttpService }) => (React__default.createElement(Tooltip, { renderTrigger: React__default.createElement(Badge, { icon: faEye, "data-testid": "badge-internal", className: "sl-bg-danger sl-ml-0" }, "Internal") }, `This ${isHttpService ? 'operation' : 'model'} is marked as internal and won't be visible in public docs.`));
-const SecurityBadge = ({ scheme, httpServiceUri, includeKey }) => {
-    const badge = (React__default.createElement(Badge, { icon: faLock, "data-testid": "badge-security", className: "sl-truncate", style: { backgroundColor: badgeDefaultBackgroundColor, color: badgeDefaultColor } }, getReadableSecurityName(scheme, includeKey)));
-    return httpServiceUri ? (React__default.createElement(Link$1, { to: `${httpServiceUri}?security=${scheme.key}`, className: "sl-no-underline sl-block" }, badge)) : (badge);
-};
-const VersionBadge = ({ value, backgroundColor }) => (React__default.createElement(Badge, { appearance: "solid", size: "sm", style: {
+const InternalBadge = ({ isHttpService }) => (React__default.createElement(Tooltip, { renderTrigger: React__default.createElement(Badge, { icon: faEye, "data-testid": "badge-internal", bg: "danger", ml: 0 }, "Internal") }, `This ${isHttpService ? 'operation' : 'model'} is marked as internal and won't be visible in public docs.`));
+const VersionBadge = ({ value, backgroundColor }) => (React__default.createElement(Badge, { appearance: "solid", size: "sm", border: 0, style: {
         backgroundColor: backgroundColor || badgeDefaultBackgroundColor,
-        border: 'none',
         color: badgeDefaultColor,
     } }, enhanceVersionString(value)));
 const enhanceVersionString = (version) => {
@@ -1829,16 +1845,85 @@ const enhanceVersionString = (version) => {
     return `v${version}`;
 };
 
+const oauthFlowNames = {
+    implicit: 'Implicit',
+    authorizationCode: 'Authorization Code',
+    clientCredentials: 'Client Credentials',
+    password: 'Password',
+};
+function getDefaultDescription(scheme) {
+    switch (scheme.type) {
+        case 'apiKey':
+            return getApiKeyDescription(scheme.in, scheme.name);
+        case 'http':
+            switch (scheme.scheme) {
+                case 'basic':
+                    return getBasicAuthDescription();
+                case 'bearer':
+                    return getBearerAuthDescription();
+                case 'digest':
+                    return getDigestAuthDescription();
+            }
+        case 'oauth2':
+            return getOAuthDescription(scheme);
+    }
+    return '';
+}
+function getApiKeyDescription(inProperty, name) {
+    return `An API key is a token that you provide when making API calls. Include the token in a ${inProperty} parameter called \`${name}\`.
+
+  Example: ${inProperty === 'query' ? `\`?${name}=123\`` : `\`${name}: 123\``}`;
+}
+function getBasicAuthDescription() {
+    return `Basic authentication is a simple authentication scheme built into the HTTP protocol.
+  To use it, send your HTTP requests with an Authorization header that contains the word Basic
+  followed by a space and a base64-encoded string \`username:password\`.
+
+  Example: \`Authorization: Basic ZGVtbzpwQDU1dzByZA==\``;
+}
+function getBearerAuthDescription() {
+    return `Provide your bearer token in the Authorization header when making requests to protected resources.
+
+  Example: \`Authorization: Bearer 123\``;
+}
+function getDigestAuthDescription() {
+    return `Provide your encrypted digest scheme data in the Authorization header when making requests to protected resources.
+
+  Example: \`Authorization: Digest username=guest, realm="test", nonce="2", uri="/uri", response="123"\``;
+}
+function getOAuthDescription(scheme) {
+    const flows = keys(scheme.flows);
+    return flows.map(flow => getOAuthFlowDescription(oauthFlowNames[flow], scheme.flows[flow])).join('\n\n');
+}
+function getOAuthFlowDescription(title, flow) {
+    let description = `**${title} OAuth Flow**`;
+    description +=
+        isOAuth2ImplicitFlow(flow) || isOauth2AuthorizationCodeFlow(flow)
+            ? `\n\nAuthorize URL: ${flow.authorizationUrl}`
+            : '';
+    description +=
+        isOauth2AuthorizationCodeFlow(flow) || isOauth2ClientCredentialsOrPasswordFlow(flow)
+            ? `\n\nToken URL: ${flow.tokenUrl}`
+            : '';
+    description += flow.refreshUrl ? `\n\nRefresh URL: ${flow.refreshUrl}` : '';
+    const scopes = entries(flow.scopes);
+    if (scopes.length) {
+        description += `\n\nScopes:
+${scopes.map(([key, value]) => `- \`${key}\` - ${value}`).join('\n')}`;
+    }
+    return description;
+}
+
 const SectionTitle = ({ title, children }) => {
     return (React.createElement(Flex, { role: "heading", borderB: true, mb: 3, pb: 3, "aria-label": title, align: "baseline" },
         React.createElement(Text, { size: "xl", fontWeight: "semibold", mr: 5 }, title),
         children));
 };
-const SubSectionPanel = ({ title, children, hasContent, rightComponent }) => {
-    return (React.createElement(Panel, { appearance: "minimal", isCollapsible: hasContent, defaultIsOpen: true },
+const SubSectionPanel = ({ title, children, hasContent, rightComponent, defaultIsOpen = true, onChange, }) => {
+    return (React.createElement(Panel, { appearance: "minimal", isCollapsible: hasContent, defaultIsOpen: defaultIsOpen, onChange: onChange },
         React.createElement(Panel.Titlebar, { fontWeight: "medium", rightComponent: rightComponent },
             React.createElement("div", { role: "heading" }, title)),
-        hasContent !== false && (React.createElement(Panel.Content, { pr: 3, className: "sl-py-0 sl-pl-0" }, children))));
+        hasContent !== false && (React.createElement(Panel.Content, { pr: 3, pl: 6, p: 0 }, children))));
 };
 
 const Body = ({ body: { contents = [], description }, onChange }) => {
@@ -1880,7 +1965,7 @@ const defaultStyle = {
 const Parameters = ({ parameters, parameterType }) => {
     if (!parameters || !parameters.length)
         return null;
-    return (React.createElement(VStack, { spacing: 2, pl: 6, divider: React.createElement(Box, { borderT: true, borderColor: "light", w: "full" }) }, sortBy(parameters, ['required', 'name']).map(parameter => {
+    return (React.createElement(VStack, { spacing: 2, divider: React.createElement(Box, { borderT: true, borderColor: "light", w: "full" }) }, sortBy(parameters, ['required', 'name']).map(parameter => {
         return React.createElement(Parameter, { key: parameter.name, parameter: parameter, parameterType: parameterType });
     })));
 };
@@ -1903,32 +1988,34 @@ const Parameter = ({ parameter, parameterType }) => {
     const schemaExamples = (_e = parameter.schema) === null || _e === void 0 ? void 0 : _e.examples;
     const schemaExamplesArray = Array.isArray(schemaExamples) ? schemaExamples : [];
     const validations = omitBy(Object.assign(Object.assign(Object.assign(Object.assign({}, omit(parameter, ['name', 'required', 'deprecated', 'description', 'schema', 'style', 'examples'])), omit(get(parameter, 'schema'), ['description', 'type', 'deprecated'])), omit(get(parameter, 'schema.items'), ['description', 'type', 'deprecated'])), { examples: [...parameterExamples, ...schemaExamplesArray] }), value => (typeof value === 'object' && isEmpty(value)) || typeof value === 'undefined');
-    return (React.createElement("div", { className: "HttpOperation__Parameters" },
-        React.createElement("div", { className: "sl-flex sl-items-center sl-my-2" },
-            React.createElement("div", { className: "sl-flex sl-items-baseline sl-text-base sl-flex-1" },
-                React.createElement("div", { className: "sl-font-mono sl-font-bold" }, parameter.name),
-                React.createElement("div", { className: 'sl-ml-2 sl-text-muted' }, format ? `${type}<${format}>` : type)),
-            React.createElement("div", { className: "sl-text-sm sl-text-warning" },
-                deprecated && React.createElement("span", { className: "sl-ml-2" }, "deprecated"),
-                parameter.required && React.createElement("span", { className: "sl-ml-2" }, "required"))),
-        description && (React.createElement("div", { className: "sl-w-full sl-text-muted sl-text-sm sl-my-2" },
+    return (React.createElement(Box, { className: "HttpOperation__Parameters" },
+        React.createElement(Flex, { alignItems: "center", my: 2 },
+            React.createElement(Flex, { alignItems: "baseline", fontSize: "base", flex: 1 },
+                React.createElement(Box, { fontFamily: "mono", fontWeight: "bold" }, parameter.name),
+                React.createElement(Box, { ml: 2, color: "muted" }, format ? `${type}<${format}>` : type)),
+            React.createElement(Box, { fontSize: "sm", color: "warning" },
+                deprecated && (React.createElement(Box, { as: "span", ml: 2 }, "deprecated")),
+                parameter.required && (React.createElement(Box, { as: "span", ml: 2 }, "required")))),
+        description && (React.createElement(Box, { w: "full", color: "muted", fontSize: "sm", my: 2 },
             React.createElement(MarkdownViewer$1, { markdown: description }))),
-        React.createElement("div", { className: "sl-text-sm" },
+        React.createElement(Box, { fontSize: "sm" },
             React.createElement(Validations, { validations: validations })),
-        parameter.style && defaultStyle[parameterType] !== parameter.style && (React.createElement("div", { className: "sl-flex sl-my-2" },
-            React.createElement("span", { className: "sl-px-1 sl-text-muted sl-font-mono sl-border sl-rounded-lg sl-text-sm sl-capitalize", style: { backgroundColor: '#EDF2F7' } }, readableStyles[parameter.style] || parameter.style)))));
+        parameter.style && defaultStyle[parameterType] !== parameter.style && (React.createElement(Flex, { my: 2 },
+            React.createElement(Box, { as: "span", px: 1, color: "muted", fontFamily: "mono", rounded: "lg", fontSize: "sm", textTransform: "capitalize", style: { backgroundColor: '#EDF2F7' } }, readableStyles[parameter.style] || parameter.style)))));
 };
 Parameter.displayName = 'HttpOperation.Parameter';
 
 const Request = ({ operation: { path, method, request, request: { path: pathParams = [], headers: headerParams = [], cookie: cookieParams = [], body, query: queryParams = [], } = {}, security, }, onChange, }) => {
     if (!request || typeof request !== 'object')
         return null;
-    const pathParamBlock = (React.createElement("div", null,
+    const securitySchemes = flatten(security);
+    const pathParamBlock = (React.createElement(Box, null,
         React.createElement(Text, { textTransform: "uppercase", mr: 1, color: HttpMethodColors[method] }, method),
         ' ',
         path));
-    return (React.createElement(Box, { mb: 10 },
+    return (React.createElement(Box, null,
         React.createElement(SectionTitle, { title: "Request" }),
+        securitySchemes.map((scheme, i) => (React.createElement(SecurityPanel, { key: i, scheme: scheme, includeKey: shouldIncludeKey(securitySchemes, scheme.type) }))),
         React.createElement(SubSectionPanel, { title: pathParamBlock, hasContent: pathParams.length > 0 },
             React.createElement(Parameters, { parameterType: "path", parameters: pathParams })),
         queryParams.length > 0 && (React.createElement(SubSectionPanel, { title: "Query" },
@@ -1939,7 +2026,13 @@ const Request = ({ operation: { path, method, request, request: { path: pathPara
             React.createElement(Parameters, { parameterType: "cookie", parameters: cookieParams }))),
         body && React.createElement(Body, { onChange: onChange, body: body })));
 };
-Request.displayName = 'HttpOperation.Request';
+Request.displayName = 'HttpOperation.Request';
+const schemeExpandedState = atomWithStorage('HttpOperation_security_expanded', {});
+const SecurityPanel = ({ scheme, includeKey }) => {
+    const [expandedState, setExpanded] = useAtom(schemeExpandedState);
+    return (React.createElement(SubSectionPanel, { title: `Security: ${getReadableSecurityName(scheme, includeKey)}`, defaultIsOpen: !!expandedState[scheme.key], onChange: isOpen => setExpanded(Object.assign(Object.assign({}, expandedState), { [scheme.key]: isOpen })) },
+        React.createElement(MarkdownViewer, { style: { fontSize: 12 }, markdown: `${scheme.description || ''}\n\n` + getDefaultDescription(scheme) })));
+};
 
 const Responses = ({ responses: unsortedResponses, onStatusCodeChange, onMediaTypeChange }) => {
     var _a, _b;
@@ -1975,7 +2068,7 @@ const Response = ({ response: { contents = [], headers = [], description }, onMe
 };
 Response.displayName = 'HttpOperation.Response';
 
-const HttpOperationComponent = React.memo(({ className, data: unresolvedData, uri, allowRouting = false, layoutOptions, tryItCredentialsPolicy, tryItCorsProxy, }) => {
+const HttpOperationComponent = React.memo(({ className, data: unresolvedData, layoutOptions, tryItCredentialsPolicy, tryItCorsProxy }) => {
     const data = useResolvedObject(unresolvedData);
     const mocking = React.useContext(MockingContext);
     const isDeprecated = !!data.deprecated;
@@ -1983,21 +2076,17 @@ const HttpOperationComponent = React.memo(({ className, data: unresolvedData, ur
     const [responseMediaType, setResponseMediaType] = React.useState('');
     const [responseStatusCode, setResponseStatusCode] = React.useState('');
     const [requestBodyIndex, setTextRequestBodyIndex] = React.useState(0);
-    const httpServiceUri = uri && getServiceUriFromOperation(uri);
-    const securitySchemes = flatten(data.security);
-    const hasBadges = isDeprecated || securitySchemes.length > 0 || isInternal;
+    const hasBadges = isDeprecated || isInternal;
     const header = (!(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.noHeading) || hasBadges) && (React.createElement(React.Fragment, null,
         !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.noHeading) && (React.createElement(Heading$1, { size: 1, mb: 4, fontWeight: "semibold" }, data.summary || data.iid || `${data.method} ${data.path}`)),
         hasBadges && (React.createElement(HStack, { spacing: 2 },
             isDeprecated && React.createElement(DeprecatedBadge, null),
-            sortBy(securitySchemes, 'type').map((scheme, i) => (React.createElement(SecurityBadge, { key: i, scheme: scheme, httpServiceUri: allowRouting ? httpServiceUri : undefined, includeKey: shouldIncludeKey(securitySchemes, scheme.type) }))),
             isInternal && React.createElement(InternalBadge, { isHttpService: true })))));
-    const description = (React.createElement(React.Fragment, null,
-        data.description && (React.createElement(MarkdownViewer, { className: "HttpOperation__Description sl-mb-10", markdown: data.description })),
+    const description = (React.createElement(VStack, { spacing: 6 },
+        data.description && React.createElement(MarkdownViewer, { className: "HttpOperation__Description", markdown: data.description }),
         React.createElement(Request, { onChange: setTextRequestBodyIndex, operation: data }),
         data.responses && (React.createElement(Responses, { responses: data.responses, onMediaTypeChange: setResponseMediaType, onStatusCodeChange: setResponseStatusCode }))));
-    const tryItPanel = !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideTryItPanel) && (React.createElement(Box, { className: "HttpOperation__gutter" },
-        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 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 }));
     return (React.createElement(TwoColumnLayout, { className: cn('HttpOperation', className), header: header, left: description, right: tryItPanel }));
 });
 HttpOperationComponent.displayName = 'HttpOperation.Component';
@@ -2007,8 +2096,8 @@ const HttpOperation = withErrorBoundary(HttpOperationComponent, {
 
 const PoweredByLink = ({ source, pathname, packageType, layout = 'sidebar' }) => {
     return (React.createElement(Flex, { as: "a", align: "center", borderT: layout === 'stacked' ? undefined : true, px: layout === 'stacked' ? 1 : 4, py: 3, justify: layout === 'stacked' ? 'end' : undefined, href: `https://stoplight.io/?utm_source=${packageType}&utm_medium=${source}&utm_campaign=powered_by&utm_content=${pathname}`, target: "_blank", rel: "noopener noreferrer" },
-        React.createElement(FontAwesomeIcon, { icon: faBolt, className: "sl-mr-1 fa-fw", style: { color: 'rgba(144, 97, 249, 1)' } }),
-        React.createElement("div", null,
+        React.createElement(Box, { as: Icon, icon: faBolt, mr: 1, className: "fa-fw", style: { color: 'rgba(144, 97, 249, 1)' } }),
+        React.createElement(Box, null,
             "powered by\u00A0",
             React.createElement("strong", null, "Stoplight"))));
 };
@@ -2042,83 +2131,19 @@ const ExportButton = ({ original, bundled }) => {
         React.createElement(Menu, { "aria-label": "Export", items: menuItems, renderTrigger: ({ isOpen }) => (React.createElement(Button, { iconRight: "chevron-down", appearance: "default", ml: 2, active: isOpen, size: "sm" }, "Export")) })));
 };
 
-const oauthFlowNames = {
-    implicit: 'Implicit',
-    authorizationCode: 'Authorization Code',
-    clientCredentials: 'Client Credentials',
-    password: 'Password',
-};
-const SecuritySchemes = ({ schemes, defaultScheme }) => {
-    return (React__default.createElement(Panel, { rounded: true, isCollapsible: false },
+const SecuritySchemes = ({ schemes, defaultScheme, defaultCollapsed = false, }) => {
+    return (React__default.createElement(Panel, { rounded: true, isCollapsible: defaultCollapsed },
         React__default.createElement(Panel.Titlebar, { bg: "canvas-300" },
-            React__default.createElement("span", { role: "heading" }, "Security")),
-        React__default.createElement(Panel.Content, { p: 0 }, sortBy(schemes, 'type').map((scheme, i) => (React__default.createElement(Panel, { key: i, defaultIsOpen: defaultScheme ? scheme.key === defaultScheme : i === 0, isCollapsible: schemes.length > 1 },
-            React__default.createElement(Panel.Titlebar, null,
-                React__default.createElement("span", { role: "heading" }, getReadableSecurityName(scheme, shouldIncludeKey(schemes, scheme.type)))),
-            React__default.createElement(Panel.Content, null,
-                React__default.createElement(MarkdownViewer, { style: { fontSize: 12 }, markdown: `${scheme.description || ''}\n\n` + getDefaultDescription(scheme) }))))))));
+            React__default.createElement(Box, { as: "span", role: "heading" }, "Security")),
+        React__default.createElement(Panel.Content, { p: 0 }, sortBy(schemes, 'type').map((scheme, i) => (React__default.createElement(SecurityScheme, { key: i, scheme: scheme, defaultIsOpen: defaultScheme ? scheme.key === defaultScheme : i === 0, isCollapsible: schemes.length > 1, showSchemeKey: shouldIncludeKey(schemes, scheme.type) }))))));
 };
-function getDefaultDescription(scheme) {
-    switch (scheme.type) {
-        case 'apiKey':
-            return getApiKeyDescription(scheme.in, scheme.name);
-        case 'http':
-            switch (scheme.scheme) {
-                case 'basic':
-                    return getBasicAuthDescription();
-                case 'bearer':
-                    return getBearerAuthDescription();
-                case 'digest':
-                    return getDigestAuthDescription();
-            }
-        case 'oauth2':
-            return getOAuthDescription(scheme);
-    }
-    return '';
-}
-function getApiKeyDescription(inProperty, name) {
-    return `An API key is a token that you provide when making API calls. Include the token in a ${inProperty} parameter called \`${name}\`.
-
-  Example: ${inProperty === 'query' ? `\`?${name}=123\`` : `\`${name}: 123\``}`;
-}
-function getBasicAuthDescription() {
-    return `Basic authentication is a simple authentication scheme built into the HTTP protocol.
-  To use it, send your HTTP requests with an Authorization header that contains the word Basic
-  followed by a space and a base64-encoded string \`username:password\`.
-
-  Example: \`Authorization: Basic ZGVtbzpwQDU1dzByZA==\``;
-}
-function getBearerAuthDescription() {
-    return `Provide your bearer token in the Authorization header when making requests to protected resources.
-
-  Example: \`Authorization: Bearer 123\``;
-}
-function getDigestAuthDescription() {
-    return `Provide your encrypted digest scheme data in the Authorization header when making requests to protected resources.
-
-  Example: \`Authorization: Digest username=guest, realm="test", nonce="2", uri="/uri", response="123"\``;
-}
-function getOAuthDescription(scheme) {
-    const flows = keys(scheme.flows);
-    return flows.map(flow => getOAuthFlowDescription(oauthFlowNames[flow], scheme.flows[flow])).join('\n\n');
-}
-function getOAuthFlowDescription(title, flow) {
-    let description = `**${title} OAuth Flow**`;
-    description +=
-        isOAuth2ImplicitFlow(flow) || isOauth2AuthorizationCodeFlow(flow)
-            ? `\n\nAuthorize URL: ${flow.authorizationUrl}`
-            : '';
-    description +=
-        isOauth2AuthorizationCodeFlow(flow) || isOauth2ClientCredentialsOrPasswordFlow(flow)
-            ? `\n\nToken URL: ${flow.tokenUrl}`
-            : '';
-    description += flow.refreshUrl ? `\n\nRefresh URL: ${flow.refreshUrl}` : '';
-    description += `\n\nScopes:
-${entries(flow.scopes)
-        .map(([key, value]) => `- \`${key}\` - ${value}`)
-        .join('\n')}`;
-    return description;
-}
+const SecurityScheme = ({ scheme, defaultIsOpen, isCollapsible, showSchemeKey }) => {
+    return (React__default.createElement(Panel, { defaultIsOpen: defaultIsOpen, isCollapsible: isCollapsible },
+        React__default.createElement(Panel.Titlebar, null,
+            React__default.createElement(Box, { as: "span", role: "heading" }, getReadableSecurityName(scheme, showSchemeKey))),
+        React__default.createElement(Panel.Content, null,
+            React__default.createElement(MarkdownViewer, { style: { fontSize: 12 }, markdown: `${scheme.description || ''}\n\n` + getDefaultDescription(scheme) }))));
+};
 
 const ServerInfo = ({ servers, mockUrl }) => {
     const mocking = React.useContext(MockingContext);
@@ -2284,7 +2309,7 @@ const SchemaAndDescription = ({ title: titleProp, schema }) => {
     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(FontAwesomeIcon, { icon: NodeTypeIconDefs[NodeType.Model], color: NodeTypeColors[NodeType.Model] }),
+            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, schema: getOriginalObject(schema) })));
 };
@@ -2612,24 +2637,26 @@ function useBundleRefsIntoDocument(document, options) {
             setBundledData(document);
             return;
         }
-        let isActive = true;
+        let isMounted = true;
         doBundle(document, baseUrl)
             .then(res => {
-            if (isActive) {
+            if (isMounted) {
                 setBundledData(Object.assign({}, res));
             }
         })
             .catch(reason => {
             var _a;
             if (typeof reason === 'object' && reason !== null && 'files' in reason) {
-                setBundledData(Object.assign({}, reason.files.schema));
+                if (isMounted) {
+                    setBundledData(Object.assign({}, reason.files.schema));
+                }
             }
             else {
                 console.warn(`Could bundle: ${(_a = reason === null || reason === void 0 ? void 0 : reason.message) !== null && _a !== void 0 ? _a : 'Unknown error'}`);
             }
         });
         return () => {
-            isActive = false;
+            isMounted = false;
         };
     }, [document, baseUrl]);
     return bundledData;