@stoplight/elements-core 7.3.11 → 7.5.1

package/index.js

@@ -5,7 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var json = require('@stoplight/json');
-var _ = require('lodash');
+var isArray = require('lodash/isArray.js');
+var isObject = require('lodash/isObject.js');
+var isPlainObject = require('lodash/isPlainObject.js');
 var markdown = require('@stoplight/markdown');
 var types = require('@stoplight/types');
 var yaml = require('@stoplight/yaml');
@@ -13,23 +15,42 @@ var mosaic = require('@stoplight/mosaic');
 var reactErrorBoundary = require('@stoplight/react-error-boundary');
 var markdownViewer = require('@stoplight/markdown-viewer');
 var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
-var reactFontawesome = require('@fortawesome/react-fontawesome');
+var throttle = require('lodash/throttle.js');
 var unistUtilSelect = require('unist-util-select');
 var cn = require('classnames');
+var utils = require('jotai/utils');
 var jotai = require('jotai');
 var URI = require('urijs');
 var mosaicCodeViewer = require('@stoplight/mosaic-code-viewer');
 var HTTPSnippet = require('httpsnippet');
+var flatten = require('lodash/flatten.js');
+var capitalize = require('lodash/capitalize.js');
+var filter = require('lodash/filter.js');
 var nanoid = require('nanoid');
+var curry = require('lodash/curry.js');
+var omit = require('lodash/omit.js');
+var keyBy = require('lodash/keyBy.js');
+var map = require('lodash/map.js');
+var mapValues = require('lodash/mapValues.js');
+var isString = require('lodash/isString.js');
+var pickBy = require('lodash/pickBy.js');
 var mosaicCodeEditor = require('@stoplight/mosaic-code-editor');
 var Sampler = require('@stoplight/json-schema-sampler');
+var compact = require('lodash/compact.js');
+var uniq = require('lodash/uniq.js');
+var orderBy = require('lodash/orderBy.js');
+var uniqBy = require('lodash/uniqBy.js');
 var formatXml = require('xml-formatter');
-var reactRouterDom = require('react-router-dom');
+var entries = require('lodash/entries.js');
+var keys = require('lodash/keys.js');
 var jsonSchemaViewer = require('@stoplight/json-schema-viewer');
+var sortBy = require('lodash/sortBy.js');
+var reactRouterDom = require('react-router-dom');
 var reactRouterHashLink = require('react-router-hash-link');
 var reactQuery = require('react-query');
 var $RefParser = require('@stoplight/json-schema-ref-parser');
 var PropTypes = require('prop-types');
+var isEqual = require('lodash/isEqual.js');
 var ReactDOM = require('react-dom');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -54,14 +75,35 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
+var isArray__default = /*#__PURE__*/_interopDefaultLegacy(isArray);
+var isObject__default = /*#__PURE__*/_interopDefaultLegacy(isObject);
+var isPlainObject__default = /*#__PURE__*/_interopDefaultLegacy(isPlainObject);
+var throttle__default = /*#__PURE__*/_interopDefaultLegacy(throttle);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 var URI__default = /*#__PURE__*/_interopDefaultLegacy(URI);
 var HTTPSnippet__default = /*#__PURE__*/_interopDefaultLegacy(HTTPSnippet);
+var flatten__default = /*#__PURE__*/_interopDefaultLegacy(flatten);
+var capitalize__default = /*#__PURE__*/_interopDefaultLegacy(capitalize);
+var filter__default = /*#__PURE__*/_interopDefaultLegacy(filter);
+var curry__default = /*#__PURE__*/_interopDefaultLegacy(curry);
+var omit__default = /*#__PURE__*/_interopDefaultLegacy(omit);
+var keyBy__default = /*#__PURE__*/_interopDefaultLegacy(keyBy);
+var map__default = /*#__PURE__*/_interopDefaultLegacy(map);
+var mapValues__default = /*#__PURE__*/_interopDefaultLegacy(mapValues);
+var isString__default = /*#__PURE__*/_interopDefaultLegacy(isString);
+var pickBy__default = /*#__PURE__*/_interopDefaultLegacy(pickBy);
 var Sampler__namespace = /*#__PURE__*/_interopNamespace(Sampler);
+var compact__default = /*#__PURE__*/_interopDefaultLegacy(compact);
+var uniq__default = /*#__PURE__*/_interopDefaultLegacy(uniq);
+var orderBy__default = /*#__PURE__*/_interopDefaultLegacy(orderBy);
+var uniqBy__default = /*#__PURE__*/_interopDefaultLegacy(uniqBy);
 var formatXml__default = /*#__PURE__*/_interopDefaultLegacy(formatXml);
+var entries__default = /*#__PURE__*/_interopDefaultLegacy(entries);
+var keys__default = /*#__PURE__*/_interopDefaultLegacy(keys);
+var sortBy__default = /*#__PURE__*/_interopDefaultLegacy(sortBy);
 var $RefParser__default = /*#__PURE__*/_interopDefaultLegacy($RefParser);
 var PropTypes__namespace = /*#__PURE__*/_interopNamespace(PropTypes);
+var isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
 var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
 
 const defaultResolver = (contextObject) => ({ pointer }, _, currentObject) => {
@@ -107,7 +149,7 @@ const recursivelyCreateResolvedObject = (currentObject, rootCurrentObject, prope
             else {
                 resolvedValue = value;
             }
-            if (_.isPlainObject(resolvedValue) || _.isArray(resolvedValue)) {
+            if (isPlainObject__default["default"](resolvedValue) || isArray__default["default"](resolvedValue)) {
                 return recursivelyCreateResolvedObject(resolvedValue, rootCurrentObject, newPropertyPath, objectToProxiedObjectCache, mergedOptions);
             }
             return resolvedValue;
@@ -122,7 +164,7 @@ const isResolvedObjectProxy = (someObject) => {
 const getOriginalObject = (resolvedObject) => {
     return resolvedObject[originalObjectSymbol] || resolvedObject;
 };
-const isReference = (value) => _.isObject(value) && typeof value['$ref'] === 'string';
+const isReference = (value) => isObject__default["default"](value) && typeof value['$ref'] === 'string';
 
 const InlineRefResolverContext = React__namespace.createContext(undefined);
 InlineRefResolverContext.displayName = 'InlineRefResolverContext';
@@ -143,13 +185,13 @@ const useResolvedObject = (currentObject) => {
 };
 
 function isSMDASTRoot(maybeAst) {
-    return _.isObject(maybeAst) && maybeAst['type'] === 'root' && mosaic.isArray(maybeAst['children']);
+    return isObject__default["default"](maybeAst) && maybeAst['type'] === 'root' && mosaic.isArray(maybeAst['children']);
 }
 function isJSONSchema(maybeSchema) {
-    return _.isPlainObject(maybeSchema);
+    return isPlainObject__default["default"](maybeSchema);
 }
 function isStoplightNode(maybeNode) {
-    return _.isObject(maybeNode) && 'id' in maybeNode;
+    return isObject__default["default"](maybeNode) && 'id' in maybeNode;
 }
 function isHttpService(maybeHttpService) {
     return isStoplightNode(maybeHttpService) && 'name' in maybeHttpService && 'version' in maybeHttpService;
@@ -247,7 +289,7 @@ function useComponentSize(container) {
         if (!container) {
             return;
         }
-        const updateComponentSize = _.throttle(() => (container ? setComponentSize(container.getBoundingClientRect()) : { width: 0, height: 0 }), 1000, {
+        const updateComponentSize = throttle__default["default"](() => (container ? setComponentSize(container.getBoundingClientRect()) : { width: 0, height: 0 }), 1000, {
             trailing: true,
         });
         updateComponentSize();
@@ -280,7 +322,7 @@ const findTitle = (parent) => {
 };
 
 function useLocationHash() {
-    const isBrowser = typeof window !== undefined;
+    const isBrowser = typeof window !== 'undefined';
     const [locationHash, setLocationHash] = React__namespace.useState(isBrowser && window.location.hash);
     React__namespace.useEffect(() => {
         if (!isBrowser)
@@ -296,20 +338,21 @@ const ArticleHeadings = ({ tree, container }) => {
     const { width } = useComponentSize(container);
     const showHeadings = width >= 768;
     const headings = useComputeMarkdownHeadings(tree);
-    return React__namespace.createElement(Headings, { className: "ArticleHeadings", headings: headings, minimal: !showHeadings });
+    return React__namespace.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__namespace.createElement("div", { style: { maxHeight: '85vh', overflow: 'auto' } },
+    const component = (React__namespace.createElement(mosaic.Box, { overflowY: "auto", style: { maxHeight: '85vh', maxWidth } },
         title && (React__namespace.createElement(mosaic.Flex, { py: 2, alignItems: "center", fontSize: "sm", fontWeight: "medium", color: "muted", style: { paddingLeft: 18 } },
-            React__namespace.createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faStream, className: "sl-mr-2" }),
+            React__namespace.createElement(mosaic.Box, { as: mosaic.Icon, icon: freeSolidSvgIcons.faStream, mr: 2 }),
             title)),
         headings.map((heading, i) => (React__namespace.createElement(Heading, { key: i, item: heading, isSelected: locationHash === `#${heading.id}` })))));
+    const button = React__namespace.createElement(mosaic.Button, { pos: "sticky", size: "sm", borderColor: "light", icon: freeSolidSvgIcons.faStream, style: { top: 10 } });
     if (minimal) {
-        return (React__namespace.createElement(mosaic.Box, { pos: "absolute", top: 0, right: 0, style: { top: 10 } },
-            React__namespace.createElement(mosaic.Popover, { renderTrigger: React__namespace.createElement(mosaic.Button, { size: "sm", borderColor: "light", icon: freeSolidSvgIcons.faStream }), placement: "bottom" },
+        return (React__namespace.createElement(mosaic.Box, { pos: "sticky", top: 0, right: 0, style: { top: 10 } },
+            React__namespace.createElement(mosaic.Popover, { renderTrigger: button, placement: "bottom" },
                 React__namespace.createElement(mosaic.Box, { className: className }, component))));
     }
     return (React__namespace.createElement(mosaic.Box, { pos: "sticky", pr: 4, pl: 16, h: "full", overflowX: "auto", overflowY: "auto", className: className, style: { top: 30 } },
@@ -324,59 +367,13 @@ const ArticleComponent = React__namespace.memo(({ data }) => {
     const tree = React__namespace.useMemo(() => (typeof data === 'object' ? data : markdown.parse(data)), [data]);
     if (tree === null)
         return null;
-    return (React__namespace.createElement(mosaic.Flex, { className: "sl-elements-article", w: "full", pos: "relative", ref: setContainer },
+    return (React__namespace.createElement(mosaic.Flex, { className: "sl-elements-article", justifyContent: "evenly", w: "full", pos: "relative", ref: setContainer },
         React__namespace.createElement(mosaic.Box, { className: "sl-elements-article-content", style: { width: 0 }, flex: 1 },
             React__namespace.createElement(MarkdownViewer, { markdown: tree })),
         React__namespace.createElement(ArticleHeadings, { tree: tree, container: container })));
 });
 const Article = reactErrorBoundary.withErrorBoundary(ArticleComponent, { recoverableProps: ['data'] });
 
-const MockingContext = createNamedContext('MockingContext', { mockUrl: undefined, hideMocking: undefined });
-const MockingProvider = ({ mockUrl, hideMocking, children }) => {
-    const info = {
-        mockUrl,
-        hideMocking: hideMocking || !mockUrl,
-    };
-    return React__namespace.createElement(MockingContext.Provider, { value: info }, children);
-};
-function createNamedContext(name, defaultValue) {
-    const context = React__namespace.createContext(defaultValue);
-    context.displayName = name;
-    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',
@@ -493,10 +490,36 @@ const HttpCodeDescriptions = {
 const badgeDefaultBackgroundColor = '#293742';
 const badgeDefaultColor = '#FFFFFF';
 
-const getServersToDisplay = (originalServers) => {
-    return originalServers
-        .map((server, i) => (Object.assign(Object.assign({}, server), { url: getServerUrlWithDefaultValues(server), description: server.description || `Server ${i + 1}` })))
+const MockingContext = createNamedContext('MockingContext', { mockUrl: undefined, hideMocking: undefined });
+const MockingProvider = ({ mockUrl, hideMocking, children }) => {
+    const info = {
+        mockUrl,
+        hideMocking: hideMocking || !mockUrl,
+    };
+    return React__namespace.createElement(MockingContext.Provider, { value: info }, children);
+};
+function createNamedContext(name, defaultValue) {
+    const context = React__namespace.createContext(defaultValue);
+    context.displayName = name;
+    return context;
+}
+
+const chosenServerAtom = jotai.atom(undefined);
+
+const getServersToDisplay = (originalServers, mockUrl) => {
+    const servers = originalServers
+        .map((server, i) => {
+        const fallbackDescription = originalServers.length === 1 ? 'Live Server' : `Server ${i + 1}`;
+        return Object.assign(Object.assign({}, server), { url: getServerUrlWithDefaultValues(server), description: server.description || fallbackDescription });
+    })
         .filter(server => isProperUrl(server.url));
+    if (mockUrl) {
+        servers.push({
+            description: 'Mock Server',
+            url: mockUrl,
+        });
+    }
+    return servers;
 };
 const getServerUrlWithDefaultValues = (server) => {
     var _a;
@@ -762,9 +785,42 @@ const RequestSamples = React__default["default"].memo(({ request, embeddedInMd =
                         " ",
                         selectedLibrary ? ` / ${selectedLibrary}` : '')) }))),
         React__default["default"].createElement(mosaic.Panel.Content, { p: 0 },
-            React__default["default"].createElement(mosaicCodeViewer.CodeViewer, { "aria-label": requestSample !== null && requestSample !== void 0 ? requestSample : fallbackText, noCopyButton: true, maxHeight: "400px", language: mosaicCodeViewerLanguage, value: requestSample || fallbackText }))));
+            React__default["default"].createElement(mosaicCodeViewer.CodeViewer, { "aria-label": requestSample !== null && requestSample !== void 0 ? requestSample : fallbackText, noCopyButton: true, maxHeight: "400px", language: mosaicCodeViewerLanguage, value: requestSample || fallbackText, style: embeddedInMd
+                    ? undefined
+                    :
+                        {
+                            '--fs-code': 12,
+                        } }))));
 });
 
+function getReadableSecurityName(securityScheme, includeKey = false) {
+    let name = '';
+    switch (securityScheme.type) {
+        case 'apiKey':
+            name = 'API Key';
+            break;
+        case 'http':
+            name = `${capitalize__default["default"](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__default["default"](maybeFlow) && 'authorizationUrl' in maybeFlow && !('tokenUrl' in maybeFlow);
+const isOauth2AuthorizationCodeFlow = (maybeFlow) => isObject__default["default"](maybeFlow) && 'authorizationUrl' in maybeFlow && 'tokenUrl' in maybeFlow;
+const isOauth2ClientCredentialsOrPasswordFlow = (maybeFlow) => isObject__default["default"](maybeFlow) && !('authorizationUrl' in maybeFlow) && 'tokenUrl' in maybeFlow;
+function shouldIncludeKey(schemes, type) {
+    return filter__default["default"](schemes, { type }).length > 1;
+}
+
 const useUniqueId = (prefix = 'id_') => React__namespace.useRef(`${prefix}${nanoid.nanoid(8)}`).current;
 
 const AuthTokenInput = ({ type, name, value, onChange }) => {
@@ -837,7 +893,7 @@ const OAuth2Auth = ({ value, onChange }) => {
 
 const TryItAuth = ({ operationSecurityScheme: operationAuth, onChange, value }) => {
     var _a;
-    const operationSecurityArray = _.flatten(operationAuth);
+    const operationSecurityArray = flatten__default["default"](operationAuth);
     const filteredSecurityItems = operationSecurityArray.filter(scheme => securitySchemeKeys.includes(scheme === null || scheme === void 0 ? void 0 : scheme.type));
     const securityScheme = value ? value.scheme : filteredSecurityItems[0];
     const menuName = securityScheme ? getReadableSecurityName(securityScheme) : 'Security Scheme';
@@ -899,15 +955,22 @@ const SecuritySchemeComponent = (_a) => {
 };
 const securitySchemeKeys = ['apiKey', 'http', 'oauth2', 'openIdConnect'];
 
-const caseInsensitivelyEquals = _.curry((a, b) => a.toUpperCase() === b.toUpperCase());
+const caseInsensitivelyEquals = curry__default["default"]((a, b) => a.toUpperCase() === b.toUpperCase());
+function slugify(name) {
+    return name
+        .replace(/\/|{|}|\s/g, '-')
+        .replace(/-{2,}/, '-')
+        .replace(/^-/, '')
+        .replace(/-$/, '');
+}
 
-const isApiKeySecurityScheme = (maybeIApiKey) => _.isObject(maybeIApiKey) && maybeIApiKey.type === 'apiKey';
-const isOAuth2SecurityScheme = (maybeIOAuth2) => _.isObject(maybeIOAuth2) && maybeIOAuth2.type === 'oauth2';
-const isBasicSecurityScheme = (maybeIBasic) => _.isObject(maybeIBasic) && maybeIBasic.type === 'http' && maybeIBasic.scheme === 'basic';
-const isBearerSecurityScheme = (maybeIBearer) => _.isObject(maybeIBearer) && maybeIBearer.type === 'http' && maybeIBearer.scheme === 'bearer';
-const isDigestSecurityScheme = (maybeIBearer) => _.isObject(maybeIBearer) && maybeIBearer.type === 'http' && maybeIBearer.scheme === 'digest';
+const isApiKeySecurityScheme = (maybeIApiKey) => isObject__default["default"](maybeIApiKey) && maybeIApiKey.type === 'apiKey';
+const isOAuth2SecurityScheme = (maybeIOAuth2) => isObject__default["default"](maybeIOAuth2) && maybeIOAuth2.type === 'oauth2';
+const isBasicSecurityScheme = (maybeIBasic) => isObject__default["default"](maybeIBasic) && maybeIBasic.type === 'http' && maybeIBasic.scheme === 'basic';
+const isBearerSecurityScheme = (maybeIBearer) => isObject__default["default"](maybeIBearer) && maybeIBearer.type === 'http' && maybeIBearer.scheme === 'bearer';
+const isDigestSecurityScheme = (maybeIBearer) => isObject__default["default"](maybeIBearer) && maybeIBearer.type === 'http' && maybeIBearer.scheme === 'digest';
 function filterOutAuthorizationParams(queryParams, securitySchemes = []) {
-    const flattenedSecuritySchemes = _.flatten(securitySchemes);
+    const flattenedSecuritySchemes = flatten__default["default"](securitySchemes);
     const securitySchemeNames = getSecuritySchemeNames(flattenedSecuritySchemes);
     return queryParams.filter(queryParam => !securitySchemeNames.some(caseInsensitivelyEquals(queryParam.name)));
 }
@@ -978,7 +1041,7 @@ const booleanOptions = [
     { label: 'True', value: 'true' },
 ];
 function enumOptions(enumValues, required) {
-    const options = _.map(enumValues, v => ({ value: Number.isNaN(Number(v)) ? String(v) : Number(v) }));
+    const options = map__default["default"](enumValues, v => ({ value: Number.isNaN(Number(v)) ? String(v) : Number(v) }));
     return required ? options : [{ label: 'Not Set', value: '' }, ...options];
 }
 function parameterOptions(parameter) {
@@ -1010,40 +1073,41 @@ function exampleValue(example) {
 }
 function getPlaceholderForParameter(parameter) {
     var _a, _b;
-    const parameterValue = getValueForParameter(parameter);
+    const { value: parameterValue, isDefault } = getValueForParameter(parameter);
     if (parameterValue)
-        return `example: ${parameterValue}`;
-    return parameterValue || String((_b = (_a = parameter.schema) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : '');
+        return `${isDefault ? 'defaults to' : 'example'}: ${parameterValue}`;
+    return String((_b = (_a = parameter.schema) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : '');
 }
 function retrieveDefaultFromSchema(parameter) {
     var _a;
     const defaultValue = (_a = parameter.schema) === null || _a === void 0 ? void 0 : _a.default;
-    return _.isObject(defaultValue) ? json.safeStringify(defaultValue) : defaultValue;
+    return isObject__default["default"](defaultValue) ? json.safeStringify(defaultValue) : defaultValue;
 }
 const getValueForParameter = (parameter) => {
     var _a, _b, _c;
-    const examples = (_a = parameter.examples) !== null && _a !== void 0 ? _a : [];
-    if (examples.length > 0)
-        return exampleValue(examples[0]);
     const defaultValue = retrieveDefaultFromSchema(parameter);
-    if (defaultValue)
-        return String(defaultValue);
+    if (typeof defaultValue !== 'undefined') {
+        return { value: String(defaultValue), isDefault: true };
+    }
+    const examples = (_a = parameter.examples) !== null && _a !== void 0 ? _a : [];
+    if (examples.length > 0) {
+        return { value: exampleValue(examples[0]) };
+    }
     const enums = (_c = (_b = parameter.schema) === null || _b === void 0 ? void 0 : _b.enum) !== null && _c !== void 0 ? _c : [];
-    if (enums.length > 0)
-        return String(enums[0]);
-    return '';
+    if (enums.length > 0) {
+        return { value: String(enums[0]) };
+    }
+    return { value: '' };
 };
 const getInitialValueForParameter = (parameter) => {
     const isRequired = !!parameter.required;
     if (!isRequired)
         return '';
-    return getValueForParameter(parameter);
+    return getValueForParameter(parameter).value;
 };
 const initialParameterValues = params => {
-    return ___default["default"].chain(params)
-        .keyBy((param) => param.name)
-        .mapValues(param => getInitialValueForParameter(param))
-        .value();
+    const paramsByName = keyBy__default["default"](params, (param) => param.name);
+    return mapValues__default["default"](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 }))));
@@ -1085,7 +1149,7 @@ const FormDataBody = ({ specification, values, onChangeValues }) => {
             if (supportsFileUpload) {
                 return (React__namespace.createElement(FileUploadParameterEditor, { key: parameter.name, parameter: parameter, value: value instanceof File ? value : undefined, onChange: newValue => newValue
                         ? onChangeValues(Object.assign(Object.assign({}, values), { [parameter.name]: newValue }))
-                        : onChangeValues(_.omit(values, parameter.name)) }));
+                        : onChangeValues(omit__default["default"](values, parameter.name)) }));
             }
             return (React__namespace.createElement(ParameterEditor, { key: parameter.name, parameter: parameter, value: typeof value === 'string' ? value : undefined, onChange: (value) => onChangeValues(Object.assign(Object.assign({}, values), { [parameter.name]: typeof value === 'number' ? String(value) : value })) }));
         }))));
@@ -1119,7 +1183,7 @@ function createRequestBody(mediaTypeContent, bodyParameterValues) {
     });
 }
 const createUrlEncodedRequestBody = ({ bodyParameterValues = {} }) => tslib.__awaiter(void 0, void 0, void 0, function* () {
-    const filteredValues = _.pickBy(bodyParameterValues, _.isString);
+    const filteredValues = pickBy__default["default"](bodyParameterValues, isString__default["default"]);
     return new URLSearchParams(filteredValues);
 });
 const createMultipartRequestBody = ({ mediaTypeContent, bodyParameterValues = {} }) => tslib.__awaiter(void 0, void 0, void 0, function* () {
@@ -1184,7 +1248,9 @@ const RequestBody = ({ examples, requestBody, onChange }) => {
     return (React__namespace.createElement(mosaic.Panel, { defaultIsOpen: true },
         React__namespace.createElement(mosaic.Panel.Titlebar, { rightComponent: examples.length > 1 && React__namespace.createElement(ExampleMenu, { examples: examples, requestBody: requestBody, onChange: onChange }) }, "Body"),
         React__namespace.createElement(mosaic.Panel.Content, { className: "TextRequestBody" },
-            React__namespace.createElement(mosaicCodeEditor.CodeEditor, { onChange: onChange, language: "json", value: requestBody, showLineNumbers: true, padding: 0 }))));
+            React__namespace.createElement(mosaicCodeEditor.CodeEditor, { onChange: onChange, language: "json", value: requestBody, showLineNumbers: true, padding: 0, style: {
+                    fontSize: 12,
+                } }))));
 };
 function ExampleMenu({ examples, requestBody, onChange }) {
     const handleClick = React__namespace.useCallback((example) => {
@@ -1269,7 +1335,6 @@ const generateExamplesFromJsonSchema = (schema) => {
             : [{ label: 'default', data: '' }];
     }
     catch (e) {
-        console.error(e);
         return [{ label: '', data: `Example cannot be created for this schema\n${e}` }];
     }
 };
@@ -1443,8 +1508,8 @@ const formatMultiValueHeader = (...keyValuePairs) => {
         .join(', ');
 };
 
-function getMockData(url, httpOperation, { isEnabled, code, dynamic, example }) {
-    return isEnabled && url ? { url, header: buildPreferHeader({ code, dynamic, example }, httpOperation) } : undefined;
+function getMockData(url, httpOperation, { code, dynamic, example }) {
+    return url ? { url, header: buildPreferHeader({ code, dynamic, example }, httpOperation) } : undefined;
 }
 function buildPreferHeader({ code, example, dynamic }, httpOperation) {
     if (!code) {
@@ -1452,7 +1517,7 @@ function buildPreferHeader({ code, example, dynamic }, httpOperation) {
     }
     const isCodeSupported = supportsResponseCode(httpOperation, code);
     const isExampleSupported = isCodeSupported && supportsExample(httpOperation, code, example);
-    const args = _.compact([
+    const args = compact__default["default"]([
         code && isCodeSupported ? ['code', code] : undefined,
         dynamic ? ['dynamic', String(dynamic)] : undefined,
         example && isExampleSupported ? ['example', example] : undefined,
@@ -1473,32 +1538,23 @@ function supportsExample(httpOperation, code, exampleKey) {
     const response = (_a = httpOperation.responses) === null || _a === void 0 ? void 0 : _a.find(response => response.code === code);
     if (!response)
         return false;
-    const exampleKeys = _.uniq((_b = response.contents) === null || _b === void 0 ? void 0 : _b.flatMap(c => c.examples || []).map(example => example.key));
+    const exampleKeys = uniq__default["default"]((_b = response.contents) === null || _b === void 0 ? void 0 : _b.flatMap(c => c.examples || []).map(example => example.key));
     return exampleKeys.includes(exampleKey);
 }
 
-const MockingButton = ({ operation, options: { isEnabled, code, example, dynamic }, onOptionsChange, }) => {
-    const toggleEnabled = React__namespace.useCallback(() => {
-        onOptionsChange({ isEnabled: !isEnabled });
-    }, [isEnabled, onOptionsChange]);
+const MockingButton = ({ operation, options: { code, example, dynamic }, onOptionsChange, }) => {
     const operationResponses = operation.responses;
     const setMockingOptions = React__namespace.useCallback(({ code, example, dynamic }) => {
-        onOptionsChange({ isEnabled, code, example, dynamic });
-    }, [isEnabled, onOptionsChange]);
+        onOptionsChange({ code, example, dynamic });
+    }, [onOptionsChange]);
     const menuItems = React__namespace.useMemo(() => {
         var _a;
-        const items = [
-            { id: 'mocking-enabled', title: 'Enabled', isChecked: isEnabled, onPress: toggleEnabled },
-            {
-                type: 'group',
-                children: (_a = operationResponses === null || operationResponses === void 0 ? void 0 : operationResponses.filter(operationResponse => Number.isInteger(parseFloat(operationResponse.code)))) === null || _a === void 0 ? void 0 : _a.map(generateOperationResponseMenu),
-            },
-        ];
+        const items = (_a = operationResponses === null || operationResponses === void 0 ? void 0 : operationResponses.filter(operationResponse => Number.isInteger(parseFloat(operationResponse.code)))) === null || _a === void 0 ? void 0 : _a.map(generateOperationResponseMenu);
         function generateOperationResponseMenu(operationResponse) {
             var _a;
             const menuId = `response-${operationResponse.code}`;
             const isActive = operationResponse.code === code;
-            const exampleKeys = _.uniq((_a = operationResponse.contents) === null || _a === void 0 ? void 0 : _a.flatMap(c => c.examples || []).map(example => example.key));
+            const exampleKeys = uniq__default["default"]((_a = operationResponse.contents) === null || _a === void 0 ? void 0 : _a.flatMap(c => c.examples || []).map(example => example.key));
             const exampleChildren = exampleKeys === null || exampleKeys === void 0 ? void 0 : exampleKeys.map(exampleKey => ({
                 id: `${menuId}-example-${exampleKey}`,
                 title: exampleKey,
@@ -1527,7 +1583,6 @@ const MockingButton = ({ operation, options: { isEnabled, code, example, dynamic
             ];
             const menuItem = {
                 id: menuId,
-                isDisabled: !isEnabled,
                 isChecked: isActive,
                 title: operationResponse.code,
                 onPress: () => {
@@ -1541,13 +1596,13 @@ const MockingButton = ({ operation, options: { isEnabled, code, example, dynamic
             return menuItem;
         }
         return items;
-    }, [code, dynamic, example, isEnabled, operationResponses, setMockingOptions, toggleEnabled]);
+    }, [code, dynamic, example, operationResponses, setMockingOptions]);
     return (React__namespace.createElement(mosaic.Box, null,
-        React__namespace.createElement(mosaic.Menu, { "aria-label": "Mocking", items: menuItems, renderTrigger: ({ isOpen }) => (React__namespace.createElement(mosaic.Button, { iconRight: "chevron-down", icon: isEnabled ? 'check' : undefined, appearance: isEnabled ? 'primary' : 'minimal', ml: 2, active: isOpen, size: "sm" }, "Mocking")) })));
+        React__namespace.createElement(mosaic.Menu, { "aria-label": "Mock settings", items: menuItems, renderTrigger: ({ isOpen }) => (React__namespace.createElement(mosaic.FieldButton, { active: isOpen, size: "sm" }, "Mock Settings")) })));
 };
 
-const persistedMockingOptionsAtom = jotai.atom({ isEnabled: false });
-const useMockingOptions = () => jotai.useAtom(persistedMockingOptionsAtom);
+const mockingOptionsAtom = jotai.atom({});
+const useMockingOptions = () => jotai.useAtom(mockingOptionsAtom);
 
 const OperationParameters = ({ parameters, values, onChangeValue, validate, }) => {
     return (React__namespace.createElement(mosaic.Panel, { defaultIsOpen: true },
@@ -1586,10 +1641,10 @@ const useRequestParameters = (httpOperation) => {
 function extractAllParameters(httpOperation) {
     var _a, _b, _c, _d, _e, _f;
     const getRequired = (obj) => { var _a; return (_a = obj.required) !== null && _a !== void 0 ? _a : false; };
-    const pathParameters = _.orderBy((_b = (_a = httpOperation.request) === null || _a === void 0 ? void 0 : _a.path) !== null && _b !== void 0 ? _b : [], [getRequired, 'name'], ['desc', 'asc']);
-    const queryParameters = filterOutAuthorizationParams(_.orderBy((_d = (_c = httpOperation.request) === null || _c === void 0 ? void 0 : _c.query) !== null && _d !== void 0 ? _d : [], [getRequired, 'name'], ['desc', 'asc']), httpOperation.security);
-    const headerParameters = filterOutAuthorizationParams(_.orderBy((_f = (_e = httpOperation.request) === null || _e === void 0 ? void 0 : _e.headers) !== null && _f !== void 0 ? _f : [], [getRequired, 'name'], ['desc', 'asc']), httpOperation.security);
-    return _.uniqBy([...pathParameters, ...queryParameters, ...headerParameters], p => p.name);
+    const pathParameters = orderBy__default["default"]((_b = (_a = httpOperation.request) === null || _a === void 0 ? void 0 : _a.path) !== null && _b !== void 0 ? _b : [], [getRequired, 'name'], ['desc', 'asc']);
+    const queryParameters = filterOutAuthorizationParams(orderBy__default["default"]((_d = (_c = httpOperation.request) === null || _c === void 0 ? void 0 : _c.query) !== null && _d !== void 0 ? _d : [], [getRequired, 'name'], ['desc', 'asc']), httpOperation.security);
+    const headerParameters = filterOutAuthorizationParams(orderBy__default["default"]((_f = (_e = httpOperation.request) === null || _e === void 0 ? void 0 : _e.headers) !== null && _f !== void 0 ? _f : [], [getRequired, 'name'], ['desc', 'asc']), httpOperation.security);
+    return uniqBy__default["default"]([...pathParameters, ...queryParameters, ...headerParameters], p => p.name);
 }
 
 function getHttpCodeColor(code) {
@@ -1645,19 +1700,19 @@ const TryItResponse = ({ response }) => {
                         ? parseBody(response.bodyText, responseType)
                         : response.bodyText })) : response.blob && responseType === 'image' ? (React__namespace.createElement(mosaic.Flex, { justifyContent: "center" },
                     React__namespace.createElement(mosaic.Image, { src: URL.createObjectURL(response.blob), alt: "response image" }))) : (React__namespace.createElement("p", null,
-                    React__namespace.createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faExclamationCircle, className: "sl-mr-2" }),
+                    React__namespace.createElement(mosaic.Box, { as: mosaic.Icon, icon: freeSolidSvgIcons.faExclamationCircle, mr: 2 }),
                     "No supported response body returned"))))));
 };
 const ResponseMenu = ({ types, type, onChange }) => {
     const menuItems = React__namespace.useMemo(() => {
         const items = types.map(type => ({
             id: type,
-            title: _.capitalize(type),
+            title: capitalize__default["default"](type),
             onPress: () => onChange(type),
         }));
         return items;
     }, [types, onChange]);
-    return (React__namespace.createElement(mosaic.Menu, { "aria-label": "Body Format", items: menuItems, renderTrigger: ({ isOpen }) => (React__namespace.createElement(mosaic.Button, { appearance: "minimal", size: "sm", iconRight: ['fas', 'sort'], active: isOpen }, _.capitalize(type))) }));
+    return (React__namespace.createElement(mosaic.Menu, { "aria-label": "Body Format", items: menuItems, renderTrigger: ({ isOpen }) => (React__namespace.createElement(mosaic.Button, { appearance: "minimal", size: "sm", iconRight: ['fas', 'sort'], active: isOpen }, capitalize__default["default"](type))) }));
 };
 const ResponseError = ({ state: { error } }) => (React__namespace.createElement(mosaic.Panel, { defaultIsOpen: true },
     React__namespace.createElement(mosaic.Panel.Titlebar, null, "Error"),
@@ -1676,7 +1731,32 @@ class NetworkError extends Error {
 }
 const isNetworkError = (error) => error instanceof NetworkError;
 
-const chosenServerAtom = jotai.atom(undefined);
+const ServersDropdown = ({ servers }) => {
+    const [chosenServer, setChosenServer] = jotai.useAtom(chosenServerAtom);
+    const serverItems = [
+        {
+            type: 'option_group',
+            title: 'Servers',
+            value: (chosenServer === null || chosenServer === void 0 ? void 0 : chosenServer.url) || '',
+            onChange: url => {
+                const server = servers.find(server => server.url === url);
+                setChosenServer(server);
+            },
+            children: [
+                ...servers.map((server, i) => ({
+                    id: server.url,
+                    title: server.name || server.description,
+                    description: server.name ? server.description || server.url : server.description ? server.url : undefined,
+                    value: server.url,
+                })),
+            ],
+        },
+    ];
+    return (React__namespace.createElement(mosaic.Menu, { "aria-label": "Server", items: serverItems, closeOnPress: true, renderTrigger: ({ isOpen }) => (React__namespace.createElement(mosaic.FieldButton, { icon: freeSolidSvgIcons.faServer, size: "sm", active: isOpen }, (chosenServer === null || chosenServer === void 0 ? void 0 : chosenServer.name) || (chosenServer === null || chosenServer === void 0 ? void 0 : chosenServer.description) || 'Server')) }));
+};
+ServersDropdown.displayName = 'ServersDropdown';
+
+const defaultServers = [];
 const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embeddedInMd = false, tryItCredentialsPolicy, corsProxy, }) => {
     var _a, _b, _c, _d, _e, _f, _g;
     const isDark = mosaic.useThemeIsDark();
@@ -1690,27 +1770,41 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
     const [bodyParameterValues, setBodyParameterValues, formDataState] = useBodyParameterState(mediaTypeContent);
     const [textRequestBody, setTextRequestBody] = useTextRequestBodyState(mediaTypeContent);
     const [operationAuthValue, setOperationAuthValue] = usePersistedSecuritySchemeWithValues();
-    const servers = getServersToDisplay(httpOperation.servers || []);
+    const servers = React__namespace.useMemo(() => {
+        const toDisplay = getServersToDisplay(httpOperation.servers || defaultServers, mockUrl);
+        return toDisplay;
+    }, [httpOperation.servers, mockUrl]);
+    const firstServer = servers[0] || null;
     const [chosenServer, setChosenServer] = jotai.useAtom(chosenServerAtom);
+    const isMockingEnabled = mockUrl && (chosenServer === null || chosenServer === void 0 ? void 0 : chosenServer.url) === mockUrl;
     const hasRequiredButEmptyParameters = allParameters.some(parameter => parameter.required && !parameterValuesWithDefaults[parameter.name]);
     React__namespace.useEffect(() => {
-        if (!chosenServer) {
-            setChosenServer(servers[0]);
+        const currentUrl = chosenServer === null || chosenServer === void 0 ? void 0 : chosenServer.url;
+        const exists = currentUrl && servers.find(s => s.url === currentUrl);
+        if (!exists) {
+            setChosenServer(firstServer);
         }
-    }, []);
+        else if (exists !== chosenServer) {
+            setChosenServer(exists);
+        }
+    }, [servers, firstServer, chosenServer, setChosenServer]);
     React__namespace.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,
+            buildHarRequest(Object.assign(Object.assign({ mediaTypeContent, parameterValues: parameterValuesWithDefaults, httpOperation, bodyInput: formDataState.isFormDataBody ? bodyParameterValues : textRequestBody, auth: operationAuthValue }, (isMockingEnabled && { 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,
@@ -1724,13 +1818,13 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
         corsProxy,
         embeddedInMd,
     ]);
-    const handleClick = () => tslib.__awaiter(void 0, void 0, void 0, function* () {
+    const handleSendRequest = () => tslib.__awaiter(void 0, void 0, void 0, function* () {
         setValidateParameters(true);
         if (hasRequiredButEmptyParameters)
             return;
         try {
             setLoading(true);
-            const mockData = getMockData(mockUrl, httpOperation, mockingOptions);
+            const mockData = isMockingEnabled ? getMockData(mockUrl, httpOperation, mockingOptions) : undefined;
             const request = yield buildFetchRequest({
                 parameterValues: parameterValuesWithDefaults,
                 httpOperation,
@@ -1767,29 +1861,32 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
             setLoading(false);
         }
     });
-    const serversSelect = (React__namespace.createElement(mosaic.Select, { "aria-label": "Servers", options: servers.map(server => ({ value: server.description || '' })), value: (chosenServer === null || chosenServer === void 0 ? void 0 : chosenServer.description) || '', onChange: (value) => {
-            const server = servers.find(server => server.description === value);
-            setChosenServer(server);
-        } }));
-    const serverDescription = (React__namespace.createElement(mosaic.Tooltip, { renderTrigger: React__namespace.createElement(mosaic.Box, { ml: 2, mr: 1, flexShrink: 0 }, (_d = servers[0]) === null || _d === void 0 ? void 0 : _d.description) },
-        "Server Host: ", (_e = servers[0]) === null || _e === void 0 ? void 0 :
-        _e.url));
+    const isOnlySendButton = !((_d = httpOperation.security) === null || _d === void 0 ? void 0 : _d.length) && !allParameters.length && !formDataState.isFormDataBody && !mediaTypeContent;
+    const tryItPanelContents = (React__namespace.createElement(React__namespace.Fragment, null,
+        ((_e = httpOperation.security) === null || _e === void 0 ? void 0 : _e.length) ? (React__namespace.createElement(TryItAuth, { onChange: setOperationAuthValue, operationSecurityScheme: (_f = httpOperation.security) !== null && _f !== void 0 ? _f : [], value: operationAuthValue })) : null,
+        allParameters.length > 0 && (React__namespace.createElement(OperationParameters, { parameters: allParameters, values: parameterValuesWithDefaults, onChangeValue: updateParameterValue, validate: validateParameters })),
+        formDataState.isFormDataBody ? (React__namespace.createElement(FormDataBody, { specification: formDataState.bodySpecification, values: bodyParameterValues, onChangeValues: setBodyParameterValues })) : mediaTypeContent ? (React__namespace.createElement(RequestBody, { examples: (_g = mediaTypeContent.examples) !== null && _g !== void 0 ? _g : [], requestBody: textRequestBody, onChange: setTextRequestBody })) : null,
+        React__namespace.createElement(mosaic.Panel.Content, { className: "SendButtonHolder", mt: 4, pt: !isOnlySendButton && !embeddedInMd ? 0 : undefined },
+            React__namespace.createElement(mosaic.HStack, { alignItems: "center", spacing: 2 },
+                React__namespace.createElement(mosaic.Button, { appearance: "primary", loading: loading, disabled: loading, onPress: handleSendRequest, size: "sm" }, "Send API Request"),
+                servers.length > 1 && React__namespace.createElement(ServersDropdown, { servers: servers }),
+                isMockingEnabled && (React__namespace.createElement(MockingButton, { options: mockingOptions, onOptionsChange: setMockingOptions, operation: httpOperation }))),
+            validateParameters && hasRequiredButEmptyParameters && (React__namespace.createElement(mosaic.Box, { mt: 4, color: "danger-light", fontSize: "sm" },
+                React__namespace.createElement(mosaic.Icon, { icon: freeSolidSvgIcons.faExclamationTriangle, className: "sl-mr-1" }),
+                "You didn't provide all of the required parameters!")))));
+    let tryItPanelElem;
+    if (embeddedInMd) {
+        tryItPanelElem = (React__namespace.createElement(mosaic.Panel, { isCollapsible: false, p: 0, className: "TryItPanel" },
+            React__namespace.createElement(mosaic.Panel.Titlebar, { bg: "canvas-300" },
+                React__namespace.createElement(mosaic.Box, { fontWeight: "bold", color: !isDark ? HttpMethodColors[httpOperation.method] : undefined }, httpOperation.method.toUpperCase()),
+                React__namespace.createElement(mosaic.Box, { fontWeight: "medium", ml: 2, textOverflow: "truncate", overflowX: "hidden" }, `${(chosenServer === null || chosenServer === void 0 ? void 0 : chosenServer.url) || ''}${httpOperation.path}`)),
+            tryItPanelContents));
+    }
+    else {
+        tryItPanelElem = (React__namespace.createElement(mosaic.Box, { className: "TryItPanel", bg: "canvas-100", rounded: "lg" }, tryItPanelContents));
+    }
     return (React__namespace.createElement(mosaic.Box, { rounded: "lg", overflowY: "hidden" },
-        React__namespace.createElement(mosaic.Panel, { isCollapsible: false, p: 0, className: "TryItPanel" },
-            React__namespace.createElement(mosaic.Panel.Titlebar, { rightComponent: servers.length > 1 ? serversSelect : serverDescription, bg: "canvas-300" },
-                React__namespace.createElement("div", { role: "heading", className: "sl-font-bold" },
-                    React__namespace.createElement(mosaic.Text, { color: !isDark ? HttpMethodColors[httpOperation.method] : undefined }, httpOperation.method.toUpperCase()),
-                    React__namespace.createElement(mosaic.Text, { ml: 2 }, httpOperation.path))),
-            React__namespace.createElement(TryItAuth, { onChange: setOperationAuthValue, operationSecurityScheme: (_f = httpOperation.security) !== null && _f !== void 0 ? _f : [], value: operationAuthValue }),
-            allParameters.length > 0 && (React__namespace.createElement(OperationParameters, { parameters: allParameters, values: parameterValuesWithDefaults, onChangeValue: updateParameterValue, validate: validateParameters })),
-            formDataState.isFormDataBody ? (React__namespace.createElement(FormDataBody, { specification: formDataState.bodySpecification, values: bodyParameterValues, onChangeValues: setBodyParameterValues })) : mediaTypeContent ? (React__namespace.createElement(RequestBody, { examples: (_g = mediaTypeContent.examples) !== null && _g !== void 0 ? _g : [], requestBody: textRequestBody, onChange: setTextRequestBody })) : null,
-            React__namespace.createElement(mosaic.Panel.Content, { className: "SendButtonHolder" },
-                React__namespace.createElement(mosaic.Flex, { alignItems: "center" },
-                    React__namespace.createElement(mosaic.Button, { appearance: "primary", loading: loading, disabled: loading, onPress: handleClick, size: "sm" }, "Send Request"),
-                    mockUrl && (React__namespace.createElement(MockingButton, { options: mockingOptions, onOptionsChange: setMockingOptions, operation: httpOperation }))),
-                validateParameters && hasRequiredButEmptyParameters && (React__namespace.createElement(mosaic.Box, { mt: 4, color: "danger-light", fontSize: "sm" },
-                    React__namespace.createElement(mosaic.Icon, { icon: freeSolidSvgIcons.faExclamationTriangle, className: "sl-mr-1" }),
-                    "You didn't provide all of the required parameters!")))),
+        tryItPanelElem,
         requestData && embeddedInMd && React__namespace.createElement(RequestSamples, { request: requestData, embeddedInMd: true }),
         response && !('error' in response) && React__namespace.createElement(TryItResponse, { response: response }),
         response && 'error' in response && React__namespace.createElement(ResponseError, { state: response })));
@@ -1826,7 +1923,9 @@ const ResponseExamples = ({ httpOperation, responseMediaType, responseStatusCode
     const examplesSelect = userDefinedExamples && userDefinedExamples.length > 1 && (React__default["default"].createElement(mosaic.Select, { "aria-label": "Response Example", value: String(chosenExampleIndex), options: userDefinedExamples.map((example, index) => ({ value: index, label: example.key })), onChange: (value) => setChosenExampleIndex(parseInt(String(value), 10)), size: "sm", triggerTextPrefix: "Response Example: " }));
     return (React__default["default"].createElement(mosaic.Panel, { rounded: true, isCollapsible: false },
         React__default["default"].createElement(mosaic.Panel.Titlebar, null, examplesSelect || React__default["default"].createElement(mosaic.Text, { color: "body" }, "Response Example")),
-        React__default["default"].createElement(mosaic.Panel.Content, { p: 0 }, show || !exceedsSize(responseExample) ? (React__default["default"].createElement(mosaicCodeViewer.CodeViewer, { "aria-label": responseExample, noCopyButton: true, maxHeight: "400px", language: "json", value: responseExample, showLineNumbers: true })) : (React__default["default"].createElement(LoadMore, { loading: loading, onClick: handleLoadMore })))));
+        React__default["default"].createElement(mosaic.Panel.Content, { p: 0 }, show || !exceedsSize(responseExample) ? (React__default["default"].createElement(mosaicCodeViewer.CodeViewer, { "aria-label": responseExample, noCopyButton: true, maxHeight: "500px", language: "json", value: responseExample, showLineNumbers: true, style: {
+                '--fs-code': 12,
+            } })) : (React__default["default"].createElement(LoadMore, { loading: loading, onClick: handleLoadMore })))));
 };
 
 const TryItWithRequestSamples = (_a) => {
@@ -1840,21 +1939,16 @@ const TryItWithRequestSamples = (_a) => {
         React__namespace.createElement(ResponseExamples, Object.assign({}, props))));
 };
 
-const TwoColumnLayout = ({ header, right, left, className }) => (React__default["default"].createElement(mosaic.Box, { w: "full", className: className },
+const TwoColumnLayout = ({ header, right, left, className }) => (React__default["default"].createElement(mosaic.VStack, { w: "full", className: className, spacing: 8 },
     header,
-    React__default["default"].createElement(mosaic.Flex, { mt: header ? 12 : undefined },
-        React__default["default"].createElement(mosaic.Box, { style: { width: 0 }, flex: 1 }, left),
+    React__default["default"].createElement(mosaic.Flex, null,
+        React__default["default"].createElement(mosaic.Box, { w: 0, flex: 1 }, left),
         right && (React__default["default"].createElement(mosaic.Box, { ml: 16, pos: "relative", w: "2/5", style: { maxWidth: 500 } }, right)))));
 
 const DeprecatedBadge = () => (React__default["default"].createElement(mosaic.Tooltip, { renderTrigger: React__default["default"].createElement(mosaic.Badge, { intent: "warning", icon: freeSolidSvgIcons.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["default"].createElement(mosaic.Tooltip, { renderTrigger: React__default["default"].createElement(mosaic.Badge, { icon: freeSolidSvgIcons.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["default"].createElement(mosaic.Badge, { icon: freeSolidSvgIcons.faLock, "data-testid": "badge-security", className: "sl-truncate", style: { backgroundColor: badgeDefaultBackgroundColor, color: badgeDefaultColor } }, getReadableSecurityName(scheme, includeKey)));
-    return httpServiceUri ? (React__default["default"].createElement(reactRouterDom.Link, { to: `${httpServiceUri}?security=${scheme.key}`, className: "sl-no-underline sl-block" }, badge)) : (badge);
-};
-const VersionBadge = ({ value, backgroundColor }) => (React__default["default"].createElement(mosaic.Badge, { appearance: "solid", size: "sm", style: {
+const InternalBadge = ({ isHttpService }) => (React__default["default"].createElement(mosaic.Tooltip, { renderTrigger: React__default["default"].createElement(mosaic.Badge, { icon: freeSolidSvgIcons.faEye, "data-testid": "badge-internal", bg: "danger" }, "Internal") }, `This ${isHttpService ? 'operation' : 'model'} is marked as internal and won't be visible in public docs.`));
+const VersionBadge = ({ value, backgroundColor }) => (React__default["default"].createElement(mosaic.Badge, { appearance: "solid", size: "sm", border: 0, style: {
         backgroundColor: backgroundColor || badgeDefaultBackgroundColor,
-        border: 'none',
         color: badgeDefaultColor,
     } }, enhanceVersionString(value)));
 const enhanceVersionString = (version) => {
@@ -1863,32 +1957,112 @@ const enhanceVersionString = (version) => {
     return `v${version}`;
 };
 
-const SectionTitle = ({ title, children }) => {
-    return (React__namespace.createElement(mosaic.Flex, { role: "heading", borderB: true, mb: 3, pb: 3, "aria-label": title, align: "baseline" },
-        React__namespace.createElement(mosaic.Text, { size: "xl", fontWeight: "semibold", mr: 5 }, title),
+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__default["default"](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__default["default"](flow.scopes);
+    if (scopes.length) {
+        description += `\n\nScopes:
+${scopes.map(([key, value]) => `- \`${key}\` - ${value}`).join('\n')}`;
+    }
+    return description;
+}
+
+const SectionTitle = ({ title, id, size = 2, children }) => {
+    return (React__namespace.createElement(mosaic.HStack, { spacing: 6 },
+        React__namespace.createElement(mosaic.Box, { as: mosaic.LinkHeading, size: size, "aria-label": title, id: id || slugify(title) }, title),
         children));
 };
-const SubSectionPanel = ({ title, children, hasContent, rightComponent }) => {
-    return (React__namespace.createElement(mosaic.Panel, { appearance: "minimal", isCollapsible: hasContent, defaultIsOpen: true },
+const SectionSubtitle = props => {
+    return React__namespace.createElement(SectionTitle, Object.assign({}, props, { size: 3 }));
+};
+const SubSectionPanel = ({ title, children, hasContent, rightComponent, defaultIsOpen = true, onChange, }) => {
+    return (React__namespace.createElement(mosaic.Panel, { isCollapsible: hasContent, defaultIsOpen: defaultIsOpen, onChange: onChange, appearance: "outlined" },
         React__namespace.createElement(mosaic.Panel.Titlebar, { fontWeight: "medium", rightComponent: rightComponent },
             React__namespace.createElement("div", { role: "heading" }, title)),
-        hasContent !== false && (React__namespace.createElement(mosaic.Panel.Content, { pr: 3, className: "sl-py-0 sl-pl-0" }, children))));
+        hasContent !== false && React__namespace.createElement(mosaic.Panel.Content, null, children)));
 };
 
-const Body = ({ body: { contents = [], description }, onChange }) => {
+const isBodyEmpty = (body) => {
+    if (!body)
+        return true;
+    const { contents = [], description } = body;
+    return contents.length === 0 && !(description === null || description === void 0 ? void 0 : description.trim());
+};
+const Body = ({ body, onChange }) => {
     var _a;
     const refResolver = useInlineRefResolver();
     const [chosenContent, setChosenContent] = React__namespace.useState(0);
     React__namespace.useEffect(() => {
         onChange(chosenContent);
     }, [chosenContent]);
-    if (contents.length === 0 && !description)
+    if (isBodyEmpty(body))
         return null;
+    const { contents = [], description } = body;
     const schema = (_a = contents[chosenContent]) === null || _a === void 0 ? void 0 : _a.schema;
-    return (React__namespace.createElement(SubSectionPanel, { title: "Body", rightComponent: contents.length > 0 && (React__namespace.createElement(mosaic.Select, { "aria-label": "Request Body Content Type", value: String(chosenContent), onChange: (value) => setChosenContent(parseInt(String(value), 10)), options: contents.map((content, index) => ({ label: content.mediaType, value: index })), size: "sm" })) },
-        description && React__namespace.createElement(MarkdownViewer, { className: "sl-my-2", markdown: description }),
-        isJSONSchema(schema) && (React__namespace.createElement(mosaic.Box, null,
-            React__namespace.createElement(jsonSchemaViewer.JsonSchemaViewer, { resolveRef: refResolver, schema: getOriginalObject(schema), viewMode: "write", hideExamples: true })))));
+    return (React__namespace.createElement(mosaic.VStack, { spacing: 6 },
+        React__namespace.createElement(SectionSubtitle, { title: "Body", id: "request-body" }, contents.length > 0 && (React__namespace.createElement(mosaic.Flex, { flex: 1, justify: "end" },
+            React__namespace.createElement(mosaic.Select, { "aria-label": "Request Body Content Type", value: String(chosenContent), onChange: (value) => setChosenContent(parseInt(String(value), 10)), options: contents.map((content, index) => ({ label: content.mediaType, value: index })), size: "sm" })))),
+        description && React__namespace.createElement(MarkdownViewer, { markdown: description }),
+        isJSONSchema(schema) && (React__namespace.createElement(jsonSchemaViewer.JsonSchemaViewer, { resolveRef: refResolver, schema: getOriginalObject(schema), viewMode: "write", hideExamples: true, renderRootTreeLines: true }))));
 };
 Body.displayName = 'HttpOperation.Body';
 
@@ -1912,87 +2086,100 @@ const defaultStyle = {
     cookie: types.HttpParamStyles.Form,
 };
 const Parameters = ({ parameters, parameterType }) => {
-    if (!parameters || !parameters.length)
+    const schema = React__namespace.useMemo(() => httpOperationParamsToSchema({ parameters, parameterType }), [parameters, parameterType]);
+    if (!schema)
         return null;
-    return (React__namespace.createElement(mosaic.VStack, { spacing: 2, pl: 6, divider: React__namespace.createElement(mosaic.Box, { borderT: true, borderColor: "light", w: "full" }) }, _.sortBy(parameters, ['required', 'name']).map(parameter => {
-        return React__namespace.createElement(Parameter, { key: parameter.name, parameter: parameter, parameterType: parameterType });
-    })));
+    return React__namespace.createElement(jsonSchemaViewer.JsonSchemaViewer, { schema: schema, disableCrumbs: true });
 };
 Parameters.displayName = 'HttpOperation.Parameters';
-const Parameter = ({ parameter, parameterType }) => {
-    var _a, _b, _c, _d, _e;
-    if (!parameter)
+const httpOperationParamsToSchema = ({ parameters, parameterType }) => {
+    var _a;
+    if (!parameters || !parameters.length)
         return null;
-    const description = _.get(parameter, 'description') || _.get(parameter, 'schema.description');
-    const rootType = _.get(parameter, 'schema.type', 'unknown');
-    const type = ((_b = (_a = parameter.schema) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b['type']) && rootType === 'array' ? `array[${parameter.schema.items['type']}]` : rootType;
-    const format = (_c = parameter.schema) === null || _c === void 0 ? void 0 : _c.format;
-    const deprecated = _.get(parameter, 'deprecated') || _.get(parameter, 'schema.deprecated', false);
-    const parameterExamples = ((_d = parameter.examples) === null || _d === void 0 ? void 0 : _d.map(example => {
-        if (isNodeExample(example)) {
-            return example.value;
+    const schema = {
+        properties: {},
+        required: [],
+    };
+    const sortedParams = sortBy__default["default"](parameters, ['required', 'name']);
+    for (const p of sortedParams) {
+        if (!p.schema)
+            continue;
+        const { name, description, required, deprecated, examples, style } = p;
+        const paramExamples = (examples === null || examples === void 0 ? void 0 : examples.map(example => {
+            if (isNodeExample(example)) {
+                return example.value;
+            }
+            return example.externalValue;
+        })) || [];
+        const schemaExamples = (_a = p.schema) === null || _a === void 0 ? void 0 : _a.examples;
+        const schemaExamplesArray = Array.isArray(schemaExamples) ? schemaExamples : [];
+        const paramDescription = description || p.schema.description;
+        const paramDeprecated = deprecated || p.schema.deprecated;
+        const paramStyle = style && defaultStyle[parameterType] !== style ? readableStyles[style] || style : undefined;
+        schema.properties[p.name] = Object.assign(Object.assign({}, p.schema), { description: paramDescription, examples: [...paramExamples, ...schemaExamplesArray], deprecated: paramDeprecated, style: paramStyle });
+        if (required) {
+            schema.required.push(name);
         }
-        return example.externalValue;
-    })) || [];
-    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__namespace.createElement("div", { className: "HttpOperation__Parameters" },
-        React__namespace.createElement("div", { className: "sl-flex sl-items-center sl-my-2" },
-            React__namespace.createElement("div", { className: "sl-flex sl-items-baseline sl-text-base sl-flex-1" },
-                React__namespace.createElement("div", { className: "sl-font-mono sl-font-bold" }, parameter.name),
-                React__namespace.createElement("div", { className: 'sl-ml-2 sl-text-muted' }, format ? `${type}<${format}>` : type)),
-            React__namespace.createElement("div", { className: "sl-text-sm sl-text-warning" },
-                deprecated && React__namespace.createElement("span", { className: "sl-ml-2" }, "deprecated"),
-                parameter.required && React__namespace.createElement("span", { className: "sl-ml-2" }, "required"))),
-        description && (React__namespace.createElement("div", { className: "sl-w-full sl-text-muted sl-text-sm sl-my-2" },
-            React__namespace.createElement(markdownViewer.MarkdownViewer, { markdown: description }))),
-        React__namespace.createElement("div", { className: "sl-text-sm" },
-            React__namespace.createElement(jsonSchemaViewer.Validations, { validations: validations })),
-        parameter.style && defaultStyle[parameterType] !== parameter.style && (React__namespace.createElement("div", { className: "sl-flex sl-my-2" },
-            React__namespace.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.displayName = 'HttpOperation.Parameter';
+    }
+    return schema;
+};
 
-const Request = ({ operation: { path, method, request, request: { path: pathParams = [], headers: headerParams = [], cookie: cookieParams = [], body, query: queryParams = [], } = {}, security, }, onChange, }) => {
+const Request = ({ operation: { request, request: { path: pathParams = [], headers: headerParams = [], cookie: cookieParams = [], body, query: queryParams = [], } = {}, security, }, onChange, }) => {
     if (!request || typeof request !== 'object')
         return null;
-    const pathParamBlock = (React__namespace.createElement("div", null,
-        React__namespace.createElement(mosaic.Text, { textTransform: "uppercase", mr: 1, color: HttpMethodColors[method] }, method),
-        ' ',
-        path));
-    return (React__namespace.createElement(mosaic.Box, { mb: 10 },
+    const bodyIsEmpty = isBodyEmpty(body);
+    const securitySchemes = flatten__default["default"](security);
+    const hasRequestData = Boolean(securitySchemes.length ||
+        pathParams.length ||
+        queryParams.length ||
+        headerParams.length ||
+        cookieParams.length ||
+        !bodyIsEmpty);
+    if (!hasRequestData)
+        return null;
+    return (React__namespace.createElement(mosaic.VStack, { spacing: 8 },
         React__namespace.createElement(SectionTitle, { title: "Request" }),
-        React__namespace.createElement(SubSectionPanel, { title: pathParamBlock, hasContent: pathParams.length > 0 },
-            React__namespace.createElement(Parameters, { parameterType: "path", parameters: pathParams })),
-        queryParams.length > 0 && (React__namespace.createElement(SubSectionPanel, { title: "Query" },
+        securitySchemes.length > 0 && (React__namespace.createElement(mosaic.VStack, { spacing: 3 }, securitySchemes.map((scheme, i) => (React__namespace.createElement(SecurityPanel, { key: i, scheme: scheme, includeKey: shouldIncludeKey(securitySchemes, scheme.type) }))))),
+        pathParams.length > 0 && (React__namespace.createElement(mosaic.VStack, { spacing: 5 },
+            React__namespace.createElement(SectionSubtitle, { title: "Path Parameters" }),
+            React__namespace.createElement(Parameters, { parameterType: "path", parameters: pathParams }))),
+        queryParams.length > 0 && (React__namespace.createElement(mosaic.VStack, { spacing: 5 },
+            React__namespace.createElement(SectionSubtitle, { title: "Query Parameters" }),
             React__namespace.createElement(Parameters, { parameterType: "query", parameters: queryParams }))),
-        headerParams.length > 0 && (React__namespace.createElement(SubSectionPanel, { title: "Headers" },
+        headerParams.length > 0 && (React__namespace.createElement(mosaic.VStack, { spacing: 5 },
+            React__namespace.createElement(SectionSubtitle, { title: "Headers", id: "request-headers" }),
             React__namespace.createElement(Parameters, { parameterType: "header", parameters: headerParams }))),
-        cookieParams.length > 0 && (React__namespace.createElement(SubSectionPanel, { title: "Cookie" },
+        cookieParams.length > 0 && (React__namespace.createElement(mosaic.VStack, { spacing: 5 },
+            React__namespace.createElement(SectionSubtitle, { title: "Cookies", id: "request-cookies" }),
             React__namespace.createElement(Parameters, { parameterType: "cookie", parameters: cookieParams }))),
         body && React__namespace.createElement(Body, { onChange: onChange, body: body })));
 };
-Request.displayName = 'HttpOperation.Request';
+Request.displayName = 'HttpOperation.Request';
+const schemeExpandedState = utils.atomWithStorage('HttpOperation_security_expanded', {});
+const SecurityPanel = ({ scheme, includeKey }) => {
+    const [expandedState, setExpanded] = jotai.useAtom(schemeExpandedState);
+    return (React__namespace.createElement(SubSectionPanel, { title: `Security: ${getReadableSecurityName(scheme, includeKey)}`, defaultIsOpen: !!expandedState[scheme.key], onChange: isOpen => setExpanded(Object.assign(Object.assign({}, expandedState), { [scheme.key]: isOpen })) },
+        React__namespace.createElement(MarkdownViewer, { style: { fontSize: 12 }, markdown: `${scheme.description || ''}\n\n` + getDefaultDescription(scheme) })));
+};
 
 const Responses = ({ responses: unsortedResponses, onStatusCodeChange, onMediaTypeChange }) => {
     var _a, _b;
-    const responses = _.sortBy(_.uniqBy(unsortedResponses, r => r.code), r => r.code);
+    const responses = sortBy__default["default"](uniqBy__default["default"](unsortedResponses, r => r.code), r => r.code);
     const [activeResponseId, setActiveResponseId] = React__namespace.useState((_b = (_a = responses[0]) === null || _a === void 0 ? void 0 : _a.code) !== null && _b !== void 0 ? _b : '');
     React__namespace.useEffect(() => {
         onStatusCodeChange(activeResponseId);
     }, [activeResponseId]);
     if (!responses.length)
         return null;
-    return (React__namespace.createElement(mosaic.Tabs, { selectedId: activeResponseId, onChange: setActiveResponseId },
-        React__namespace.createElement(mosaic.Box, null,
-            React__namespace.createElement(SectionTitle, { title: "Responses" },
-                React__namespace.createElement(mosaic.TabList, null, responses.map(({ code }) => (React__namespace.createElement(mosaic.Tab, { key: code, id: code }, code))))),
-            React__namespace.createElement(mosaic.Box, { as: mosaic.TabPanels, mt: 4 }, responses.map(response => (React__namespace.createElement(mosaic.TabPanel, { key: response.code, id: response.code },
-                React__namespace.createElement(Response, { response: response, onMediaTypeChange: onMediaTypeChange }))))))));
+    return (React__namespace.createElement(mosaic.VStack, { spacing: 8, as: mosaic.Tabs, selectedId: activeResponseId, onChange: setActiveResponseId, appearance: "pill" },
+        React__namespace.createElement(SectionTitle, { title: "Responses" },
+            React__namespace.createElement(mosaic.TabList, { density: "compact" }, responses.map(({ code }) => (React__namespace.createElement(mosaic.Tab, { key: code, id: code, intent: codeToIntentVal(code) }, code))))),
+        React__namespace.createElement(mosaic.TabPanels, { p: 0 }, responses.map(response => (React__namespace.createElement(mosaic.TabPanel, { key: response.code, id: response.code },
+            React__namespace.createElement(Response, { response: response, onMediaTypeChange: onMediaTypeChange })))))));
 };
 Responses.displayName = 'HttpOperation.Responses';
-const Response = ({ response: { contents = [], headers = [], description }, onMediaTypeChange }) => {
+const Response = ({ response, onMediaTypeChange }) => {
+    const { contents = [], headers = [], description } = response;
     const [chosenContent, setChosenContent] = React__namespace.useState(0);
     const refResolver = useInlineRefResolver();
     const responseContent = contents[chosenContent];
@@ -2000,16 +2187,33 @@ const Response = ({ response: { contents = [], headers = [], description }, onMe
     React__namespace.useEffect(() => {
         responseContent && onMediaTypeChange(responseContent.mediaType);
     }, [responseContent]);
-    return (React__namespace.createElement(mosaic.Box, null,
-        description && React__namespace.createElement(MarkdownViewer, { className: "sl-ml-1 sl-mb-6", markdown: description }),
-        headers.length > 0 && (React__namespace.createElement(SubSectionPanel, { title: "Headers" },
+    return (React__namespace.createElement(mosaic.VStack, { spacing: 8, pt: 8 },
+        description && React__namespace.createElement(MarkdownViewer, { markdown: description }),
+        headers.length > 0 && (React__namespace.createElement(mosaic.VStack, { spacing: 5 },
+            React__namespace.createElement(SectionSubtitle, { title: "Headers", id: "response-headers" }),
             React__namespace.createElement(Parameters, { parameterType: "header", parameters: headers }))),
-        contents.length > 0 && (React__namespace.createElement(SubSectionPanel, { title: "Body", rightComponent: React__namespace.createElement(mosaic.Select, { "aria-label": "Response Body Content Type", value: String(chosenContent), onChange: (value) => setChosenContent(parseInt(String(value), 10)), options: contents.map((content, index) => ({ label: content.mediaType, value: index })), size: "sm" }) }, schema && (React__namespace.createElement(mosaic.Box, null,
-            React__namespace.createElement(jsonSchemaViewer.JsonSchemaViewer, { schema: getOriginalObject(schema), resolveRef: refResolver, viewMode: "read", hideExamples: true })))))));
+        contents.length > 0 && (React__namespace.createElement(React__namespace.Fragment, null,
+            React__namespace.createElement(SectionSubtitle, { title: "Body", id: "response-body" },
+                React__namespace.createElement(mosaic.Flex, { flex: 1, justify: "end" },
+                    React__namespace.createElement(mosaic.Select, { "aria-label": "Response Body Content Type", value: String(chosenContent), onChange: (value) => setChosenContent(parseInt(String(value), 10)), options: contents.map((content, index) => ({ label: content.mediaType, value: index })), size: "sm" }))),
+            schema && (React__namespace.createElement(jsonSchemaViewer.JsonSchemaViewer, { schema: getOriginalObject(schema), resolveRef: refResolver, viewMode: "read", hideExamples: true, parentCrumbs: ['responses', response.code], renderRootTreeLines: true }))))));
 };
-Response.displayName = 'HttpOperation.Response';
+Response.displayName = 'HttpOperation.Response';
+const codeToIntentVal = (code) => {
+    const firstChar = code.charAt(0);
+    switch (firstChar) {
+        case '2':
+            return 'success';
+        case '4':
+            return 'warning';
+        case '5':
+            return 'danger';
+        default:
+            return 'default';
+    }
+};
 
-const HttpOperationComponent = React__namespace.memo(({ className, data: unresolvedData, uri, allowRouting = false, layoutOptions, tryItCredentialsPolicy, tryItCorsProxy, }) => {
+const HttpOperationComponent = React__namespace.memo(({ className, data: unresolvedData, layoutOptions, tryItCredentialsPolicy, tryItCorsProxy }) => {
     const data = useResolvedObject(unresolvedData);
     const mocking = React__namespace.useContext(MockingContext);
     const isDeprecated = !!data.deprecated;
@@ -2017,32 +2221,50 @@ const HttpOperationComponent = React__namespace.memo(({ className, data: unresol
     const [responseMediaType, setResponseMediaType] = React__namespace.useState('');
     const [responseStatusCode, setResponseStatusCode] = React__namespace.useState('');
     const [requestBodyIndex, setTextRequestBodyIndex] = React__namespace.useState(0);
-    const httpServiceUri = uri && getServiceUriFromOperation(uri);
-    const securitySchemes = _.flatten(data.security);
-    const hasBadges = isDeprecated || securitySchemes.length > 0 || isInternal;
-    const header = (!(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.noHeading) || hasBadges) && (React__namespace.createElement(React__namespace.Fragment, null,
-        !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.noHeading) && (React__namespace.createElement(mosaic.Heading, { size: 1, mb: 4, fontWeight: "semibold" }, data.summary || data.iid || `${data.method} ${data.path}`)),
-        hasBadges && (React__namespace.createElement(mosaic.HStack, { spacing: 2 },
-            isDeprecated && React__namespace.createElement(DeprecatedBadge, null),
-            _.sortBy(securitySchemes, 'type').map((scheme, i) => (React__namespace.createElement(SecurityBadge, { key: i, scheme: scheme, httpServiceUri: allowRouting ? httpServiceUri : undefined, includeKey: shouldIncludeKey(securitySchemes, scheme.type) }))),
-            isInternal && React__namespace.createElement(InternalBadge, { isHttpService: true })))));
-    const description = (React__namespace.createElement(React__namespace.Fragment, null,
-        data.description && (React__namespace.createElement(MarkdownViewer, { className: "HttpOperation__Description sl-mb-10", markdown: data.description })),
+    const prettyName = (data.summary || data.iid || '').trim();
+    const hasBadges = isDeprecated || isInternal;
+    const header = (!(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.noHeading) || hasBadges) && (React__namespace.createElement(mosaic.VStack, { spacing: 5 },
+        React__namespace.createElement(mosaic.HStack, { spacing: 5 },
+            !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.noHeading) && prettyName ? (React__namespace.createElement(mosaic.Heading, { size: 1, fontWeight: "semibold" }, prettyName)) : null,
+            React__namespace.createElement(mosaic.HStack, { spacing: 2 },
+                isDeprecated && React__namespace.createElement(DeprecatedBadge, null),
+                isInternal && React__namespace.createElement(InternalBadge, { isHttpService: true }))),
+        React__namespace.createElement(MethodPath, { method: data.method, path: data.path })));
+    const description = (React__namespace.createElement(mosaic.VStack, { spacing: 10 },
+        data.description && React__namespace.createElement(MarkdownViewer, { className: "HttpOperation__Description", markdown: data.description }),
         React__namespace.createElement(Request, { onChange: setTextRequestBodyIndex, operation: data }),
         data.responses && (React__namespace.createElement(Responses, { responses: data.responses, onMediaTypeChange: setResponseMediaType, onStatusCodeChange: setResponseStatusCode }))));
-    const tryItPanel = !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideTryItPanel) && (React__namespace.createElement(mosaic.Box, { className: "HttpOperation__gutter" },
-        React__namespace.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__namespace.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__namespace.createElement(TwoColumnLayout, { className: cn__default["default"]('HttpOperation', className), header: header, left: description, right: tryItPanel }));
 });
 HttpOperationComponent.displayName = 'HttpOperation.Component';
 const HttpOperation = reactErrorBoundary.withErrorBoundary(HttpOperationComponent, {
     recoverableProps: ['data'],
-});
+});
+function MethodPath({ method, path }) {
+    const chosenServer = utils.useAtomValue(chosenServerAtom);
+    let chosenServerUrl = '';
+    if (chosenServer) {
+        chosenServerUrl = chosenServer.url.endsWith('/') ? chosenServer.url.slice(0, -1) : chosenServer.url;
+    }
+    return (React__namespace.createElement(mosaic.Box, null,
+        React__namespace.createElement(MethodPathInner, { method: method, path: path, chosenServerUrl: chosenServerUrl })));
+}
+function MethodPathInner({ method, path, chosenServerUrl }) {
+    const isDark = mosaic.useThemeIsDark();
+    const fullUrl = `${chosenServerUrl}${path}`;
+    const pathElem = (React__namespace.createElement(mosaic.Flex, { overflowX: "hidden" },
+        chosenServerUrl ? (React__namespace.createElement(mosaic.Box, { dir: "rtl", color: "muted", fontSize: "lg", textOverflow: "truncate", overflowX: "hidden" }, chosenServerUrl)) : null,
+        React__namespace.createElement(mosaic.Box, { fontSize: "lg", fontWeight: "semibold", flex: 1 }, path)));
+    return (React__namespace.createElement(mosaic.HStack, { spacing: 3, pl: 2.5, pr: 4, py: 2, bg: "canvas-50", rounded: "lg", fontFamily: "mono", display: "inline-flex", maxW: "full", title: fullUrl },
+        React__namespace.createElement(mosaic.Box, { py: 1, px: 2.5, rounded: "lg", bg: !isDark ? HttpMethodColors[method] : 'canvas-100', color: !isDark ? 'on-primary' : 'body', fontSize: "lg", fontWeight: "semibold", textTransform: "uppercase" }, method),
+        pathElem));
+}
 
 const PoweredByLink = ({ source, pathname, packageType, layout = 'sidebar' }) => {
     return (React__namespace.createElement(mosaic.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__namespace.createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faBolt, className: "sl-mr-1 fa-fw", style: { color: 'rgba(144, 97, 249, 1)' } }),
-        React__namespace.createElement("div", null,
+        React__namespace.createElement(mosaic.Box, { as: mosaic.Icon, icon: freeSolidSvgIcons.faBolt, mr: 1, className: "fa-fw", style: { color: 'rgba(144, 97, 249, 1)' } }),
+        React__namespace.createElement(mosaic.Box, null,
             "powered by\u00A0",
             React__namespace.createElement("strong", null, "Stoplight"))));
 };
@@ -2073,91 +2295,28 @@ const ExportButton = ({ original, bundled }) => {
         return items;
     }, [original, bundled]);
     return (React__namespace.createElement(mosaic.Box, null,
-        React__namespace.createElement(mosaic.Menu, { "aria-label": "Export", items: menuItems, renderTrigger: ({ isOpen }) => (React__namespace.createElement(mosaic.Button, { iconRight: "chevron-down", appearance: "default", ml: 2, active: isOpen, size: "sm" }, "Export")) })));
+        React__namespace.createElement(mosaic.Menu, { "aria-label": "Export", items: menuItems, placement: "bottom right", renderTrigger: ({ isOpen }) => (React__namespace.createElement(mosaic.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["default"].createElement(mosaic.Panel, { rounded: true, isCollapsible: false },
+const SecuritySchemes = ({ schemes, defaultScheme, defaultCollapsed = false, }) => {
+    return (React__default["default"].createElement(mosaic.Panel, { rounded: true, isCollapsible: defaultCollapsed },
         React__default["default"].createElement(mosaic.Panel.Titlebar, { bg: "canvas-300" },
-            React__default["default"].createElement("span", { role: "heading" }, "Security")),
-        React__default["default"].createElement(mosaic.Panel.Content, { p: 0 }, _.sortBy(schemes, 'type').map((scheme, i) => (React__default["default"].createElement(mosaic.Panel, { key: i, defaultIsOpen: defaultScheme ? scheme.key === defaultScheme : i === 0, isCollapsible: schemes.length > 1 },
-            React__default["default"].createElement(mosaic.Panel.Titlebar, null,
-                React__default["default"].createElement("span", { role: "heading" }, getReadableSecurityName(scheme, shouldIncludeKey(schemes, scheme.type)))),
-            React__default["default"].createElement(mosaic.Panel.Content, null,
-                React__default["default"].createElement(MarkdownViewer, { style: { fontSize: 12 }, markdown: `${scheme.description || ''}\n\n` + getDefaultDescription(scheme) }))))))));
+            React__default["default"].createElement(mosaic.Box, { as: "span", role: "heading" }, "Security")),
+        React__default["default"].createElement(mosaic.Panel.Content, { p: 0 }, sortBy__default["default"](schemes, 'type').map((scheme, i) => (React__default["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["default"].createElement(mosaic.Panel, { defaultIsOpen: defaultIsOpen, isCollapsible: isCollapsible },
+        React__default["default"].createElement(mosaic.Panel.Titlebar, null,
+            React__default["default"].createElement(mosaic.Box, { as: "span", role: "heading" }, getReadableSecurityName(scheme, showSchemeKey))),
+        React__default["default"].createElement(mosaic.Panel.Content, null,
+            React__default["default"].createElement(MarkdownViewer, { style: { fontSize: 12 }, markdown: `${scheme.description || ''}\n\n` + getDefaultDescription(scheme) }))));
+};
 
 const ServerInfo = ({ servers, mockUrl }) => {
     const mocking = React__namespace.useContext(MockingContext);
     const showMocking = !mocking.hideMocking && mockUrl && isProperUrl(mockUrl);
-    const serversToDisplay = getServersToDisplay(servers);
+    const $mockUrl = showMocking ? mockUrl || mocking.mockUrl : undefined;
+    const serversToDisplay = getServersToDisplay(servers, $mockUrl);
     if (!showMocking && serversToDisplay.length === 0) {
         return null;
     }
@@ -2166,14 +2325,11 @@ const ServerInfo = ({ servers, mockUrl }) => {
             React__namespace.createElement(mosaic.Panel.Titlebar, { whitespace: "nowrap" }, "API Base URL"),
             React__namespace.createElement(mosaic.Box, { overflowX: "auto" },
                 React__namespace.createElement(mosaic.Panel.Content, { w: "full", className: "sl-flex sl-flex-col" },
-                    serversToDisplay.map((server, index) => (React__namespace.createElement(ServerUrl, Object.assign({}, server, { key: index })))),
-                    showMocking && (React__namespace.createElement(React__namespace.Fragment, null,
-                        React__namespace.createElement(mosaic.Box, { borderT: 2, pt: 2, borderColor: "light", w: "full" }),
-                        React__namespace.createElement(ServerUrl, { description: "Mock Server", url: mockUrl || '', marginBottom: false }))))))));
+                    React__namespace.createElement(mosaic.VStack, { spacing: 1, divider: true }, serversToDisplay.map((server, index) => (React__namespace.createElement(ServerUrl, Object.assign({}, server, { key: index }))))))))));
 };
 const ServerUrl = ({ description, url, marginBottom = true }) => {
     const { onCopy, hasCopied } = mosaic.useClipboard(url);
-    return (React__namespace.createElement(mosaic.Box, { whitespace: "nowrap", mb: marginBottom ? 2 : 0 },
+    return (React__namespace.createElement(mosaic.Box, { whitespace: "nowrap" },
         React__namespace.createElement(mosaic.Text, { pr: 2, fontWeight: "bold" },
             description,
             ":"),
@@ -2222,14 +2378,13 @@ const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOpti
     };
     const examples = React__namespace.useMemo(() => generateExamplesFromJsonSchema(data), [data]);
     const shouldDisplayHeader = !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.noHeading) && (title !== undefined || (exportProps && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideExport)));
-    const header = (shouldDisplayHeader || isInternal) && (React__namespace.createElement(React__namespace.Fragment, null,
-        shouldDisplayHeader && (React__namespace.createElement(mosaic.Flex, { justifyContent: "between", alignItems: "center" },
-            React__namespace.createElement(mosaic.Heading, { size: 1, mb: 4, fontWeight: "semibold" }, title),
-            exportProps && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideExport) && React__namespace.createElement(ExportButton, Object.assign({}, exportProps)))),
-        isInternal && (React__namespace.createElement(mosaic.HStack, { spacing: 2, mb: 12 },
-            React__namespace.createElement(InternalBadge, null)))));
-    const description = (React__namespace.createElement(React__namespace.Fragment, null,
-        data.description && data.type === 'object' && (React__namespace.createElement(MarkdownViewer, { className: "sl-mb-6", role: "textbox", markdown: data.description })),
+    const header = (shouldDisplayHeader || isInternal) && (React__namespace.createElement(mosaic.Flex, { justifyContent: "between", alignItems: "center" },
+        React__namespace.createElement(mosaic.HStack, { spacing: 5 },
+            title && (React__namespace.createElement(mosaic.Heading, { size: 1, fontWeight: "semibold" }, title)),
+            React__namespace.createElement(mosaic.HStack, { spacing: 2 }, isInternal && React__namespace.createElement(InternalBadge, null))),
+        exportProps && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideExport) && React__namespace.createElement(ExportButton, Object.assign({}, exportProps))));
+    const description = (React__namespace.createElement(mosaic.VStack, { spacing: 10 },
+        data.description && data.type === 'object' && React__namespace.createElement(MarkdownViewer, { role: "textbox", markdown: data.description }),
         React__namespace.createElement(jsonSchemaViewer.JsonSchemaViewer, { resolveRef: resolveRef, schema: getOriginalObject(data) })));
     const examplesSelect = examples.length > 1 && (React__namespace.createElement(mosaic.Select, { "aria-label": "Example", value: String(chosenExampleIndex), options: examples.map(({ label }, index) => ({ value: index, label })), onChange: (value) => setChosenExampleIndex(parseInt(String(value), 10)), size: "sm", triggerTextPrefix: "Example: " }));
     const modelExamples = !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideModelExamples) && (React__namespace.createElement(mosaic.Panel, { rounded: true, isCollapsible: false },
@@ -2282,7 +2437,7 @@ const SidebarLayout = React__namespace.forwardRef(({ sidebar, children, maxConte
                 paddingLeft: `calc((100% - ${maxContentWidth}px) / 2)`,
                 minWidth: `${sidebarWidth}px`,
             } }, sidebar),
-        React__namespace.createElement(mosaic.Box, { ref: scrollRef, bg: "canvas", px: 24, flex: 1, overflowY: "auto", overflowX: "hidden", w: "full" },
+        React__namespace.createElement(mosaic.Box, { ref: scrollRef, bg: "canvas", px: 24, flex: 1, w: "full" },
             React__namespace.createElement(mosaic.Box, { style: { maxWidth: `${maxContentWidth - sidebarWidth}px` }, py: 16 }, children))));
 });
 
@@ -2307,7 +2462,7 @@ function useParsedValue(value) {
 }
 
 function isPartialHttpRequest(maybeHttpRequest) {
-    return (_.isObject(maybeHttpRequest) &&
+    return (isObject__default["default"](maybeHttpRequest) &&
         'method' in maybeHttpRequest &&
         typeof maybeHttpRequest['method'] === 'string' &&
         'url' in maybeHttpRequest &&
@@ -2318,7 +2473,7 @@ const SchemaAndDescription = ({ title: titleProp, schema }) => {
     const title = titleProp !== null && titleProp !== void 0 ? titleProp : schema.title;
     return (React__default["default"].createElement(mosaic.Box, { py: 2 },
         title && (React__default["default"].createElement(mosaic.Flex, { alignItems: "center", p: 2 },
-            React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: NodeTypeIconDefs[types.NodeType.Model], color: NodeTypeColors[types.NodeType.Model] }),
+            React__default["default"].createElement(mosaic.Icon, { icon: NodeTypeIconDefs[types.NodeType.Model], color: NodeTypeColors[types.NodeType.Model] }),
             React__default["default"].createElement(mosaic.Box, { color: "muted", px: 2 }, title))),
         React__default["default"].createElement(jsonSchemaViewer.JsonSchemaViewer, { resolveRef: resolveRef, schema: getOriginalObject(schema) })));
 };
@@ -2333,7 +2488,7 @@ const CodeComponent = props => {
         return React__default["default"].createElement(SchemaAndDescription, { title: title, schema: parsedValue });
     }
     if (http) {
-        if (!_.isObject(parsedValue) || (!isPartialHttpRequest(parsedValue) && !isHttpOperation(parsedValue))) {
+        if (!isObject__default["default"](parsedValue) || (!isPartialHttpRequest(parsedValue) && !isHttpOperation(parsedValue))) {
             return null;
         }
         return (React__default["default"].createElement(TryIt, { httpOperation: isHttpOperation(parsedValue) ? parsedValue : parseHttpRequest(parsedValue), embeddedInMd: true }));
@@ -2614,10 +2769,11 @@ const RouterComponent = {
     history: reactRouterDom.BrowserRouter,
     memory: reactRouterDom.MemoryRouter,
     hash: reactRouterDom.HashRouter,
+    static: reactRouterDom.StaticRouter,
 };
-const useRouter = (router, basePath) => {
+const useRouter = (router, basePath, staticRouterPath) => {
     const Router = RouterComponent[router];
-    const routerProps = Object.assign({}, (router !== 'memory' && { basename: basePath }));
+    const routerProps = Object.assign(Object.assign({}, (router !== 'memory' && { basename: basePath })), (router === 'static' && { location: staticRouterPath }));
     return {
         Router,
         routerProps,
@@ -2626,9 +2782,10 @@ const useRouter = (router, basePath) => {
 
 function withRouter(WrappedComponent) {
     const WithRouter = (props) => {
-        var _a, _b;
+        var _a, _b, _c;
         const basePath = (_a = props.basePath) !== null && _a !== void 0 ? _a : '/';
-        const { Router, routerProps } = useRouter((_b = props.router) !== null && _b !== void 0 ? _b : 'history', basePath);
+        const staticRouterPath = (_b = props.staticRouterPath) !== null && _b !== void 0 ? _b : '';
+        const { Router, routerProps } = useRouter((_c = props.router) !== null && _c !== void 0 ? _c : 'history', basePath, staticRouterPath);
         return (React__namespace.createElement(Router, Object.assign({}, routerProps, { key: basePath }),
             React__namespace.createElement(reactRouterDom.Route, { path: "/" },
                 React__namespace.createElement(MarkdownComponentsProvider, { value: { link: ReactRouterMarkdownLink } },
@@ -2642,28 +2799,30 @@ function useBundleRefsIntoDocument(document, options) {
     const [bundledData, setBundledData] = React__namespace.useState(document);
     const baseUrl = options === null || options === void 0 ? void 0 : options.baseUrl;
     React__namespace.useEffect(() => {
-        if (!_.isObject(document)) {
+        if (!isObject__default["default"](document)) {
             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;
@@ -2706,7 +2865,7 @@ const createElementClass = (Component, propDescriptors) => {
         constructor() {
             super();
             this._props = {};
-            Object.defineProperties(this, _.mapValues(propDescriptors, (_, key) => ({
+            Object.defineProperties(this, mapValues__default["default"](propDescriptors, (_, key) => ({
                 get: () => {
                     return this._props[key];
                 },
@@ -2727,7 +2886,7 @@ const createElementClass = (Component, propDescriptors) => {
         attributeChangedCallback(name, oldValue, newValue) {
             if (propDescriptors[name]) {
                 const newPropValue = this._safeReadAttribute(name);
-                if (!_.isEqual(this._props[name], newPropValue)) {
+                if (!isEqual__default["default"](this._props[name], newPropValue)) {
                     this._props[name] = newPropValue;
                     this._renderComponent();
                 }
@@ -2793,7 +2952,7 @@ const createElementClass = (Component, propDescriptors) => {
         }
         _renderComponent() {
             if (this._mountPoint) {
-                const props = _.mapValues(propDescriptors, (descriptor, key) => { var _a; return (_a = this._props[key]) !== null && _a !== void 0 ? _a : descriptor.defaultValue; });
+                const props = mapValues__default["default"](propDescriptors, (descriptor, key) => { var _a; return (_a = this._props[key]) !== null && _a !== void 0 ? _a : descriptor.defaultValue; });
                 ReactDOM__namespace.render(React__namespace.createElement(Component, props), this._mountPoint);
             }
         }
@@ -2830,6 +2989,7 @@ exports.createResolvedObject = createResolvedObject;
 exports.findFirstNode = findFirstNode;
 exports.isHttpOperation = isHttpOperation;
 exports.isHttpService = isHttpService;
+exports.slugify = slugify;
 exports.useBundleRefsIntoDocument = useBundleRefsIntoDocument;
 exports.useParsedData = useParsedData;
 exports.useParsedValue = useParsedValue;