@stoplight/elements-core 7.5.20 → 7.6.0

package/components/Docs/Docs.d.ts

@@ -22,6 +22,7 @@ interface BaseDocsProps {
         hideServerInfo?: boolean;
         hideSecurityInfo?: boolean;
         hideExport?: boolean;
+        compact?: number | boolean;
     };
 }
 export interface DocsProps extends BaseDocsProps {

package/components/Docs/TwoColumnLayout.d.ts

@@ -5,4 +5,4 @@ export interface TwoColumnLayoutProps {
     left: React.ReactNode;
     className?: string;
 }
-export declare const TwoColumnLayout: ({ header, right, left, className }: TwoColumnLayoutProps) => JSX.Element;
+export declare const TwoColumnLayout: React.ForwardRefExoticComponent<TwoColumnLayoutProps & React.RefAttributes<HTMLDivElement>>;

package/hooks/useIsCompact.d.ts

@@ -0,0 +1,6 @@
+import { Ref } from 'react';
+import { DocsProps } from '../components/Docs';
+export declare function useIsCompact(layoutOptions: DocsProps['layoutOptions']): {
+    ref: Ref<HTMLDivElement>;
+    isCompact: boolean;
+};

package/index.d.ts

@@ -1,4 +1,4 @@
-export { Docs, ParsedDocs } from './components/Docs';
+export { Docs, DocsProps, ParsedDocs } from './components/Docs';
 export { DeprecatedBadge } from './components/Docs/HttpOperation/Badges';
 export { ExportButton, ExportButtonProps } from './components/Docs/HttpService/ExportButton';
 export { SidebarLayout } from './components/Layout/SidebarLayout';

package/index.esm.js

@@ -7,13 +7,12 @@ import isObject from 'lodash/isObject.js';
 import isPlainObject from 'lodash/isPlainObject.js';
 import { NodeType, HttpParamStyles } from '@stoplight/types';
 import { parse } from '@stoplight/yaml';
-import { isArray as isArray$1, Box, Panel, CopyButton, Menu, Button, Text, Flex, Input, Icon, Select, FieldButton, Image, Link, useThemeIsDark, HStack, VStack, InvertTheme, Tooltip, Badge, LinkHeading, Tabs, TabList, Tab, TabPanels, TabPanel, Heading, useClipboard, useMosaicContext, Provider as Provider$1 } from '@stoplight/mosaic';
+import { isArray as isArray$1, Box, Panel, CopyButton, Menu, Button, Text, Flex, Input, Icon, Select, FieldButton, Image, Link, useThemeIsDark, HStack, VStack, InvertTheme, Tooltip, Badge, LinkHeading, Tabs, TabList, Tab, TabPanels, TabPanel, Heading, useClipboard, useBreakpoints, useMosaicContext, Provider as Provider$1 } from '@stoplight/mosaic';
 import { withErrorBoundary } from '@stoplight/react-error-boundary';
 import { MarkdownViewer as MarkdownViewer$1, DefaultSMDComponents, MarkdownViewerProvider } from '@stoplight/markdown-viewer';
 export { DefaultSMDComponents } from '@stoplight/markdown-viewer';
 import cn from 'classnames';
 import { atomWithStorage, useAtomValue } from 'jotai/utils';
-import { faCrosshairs, faCloud, faBookOpen, faCube, faDatabase, faQuestionCircle, faExclamationCircle, faServer, faExclamationTriangle, faEye, faBolt, faCopy, faCheck } from '@fortawesome/free-solid-svg-icons';
 import { atom, useAtom, Provider } from 'jotai';
 import URI from 'urijs';
 import { CodeViewer } from '@stoplight/mosaic-code-viewer';
@@ -226,6 +225,58 @@ const ArticleComponent = React.memo(({ data }) => {
 });
 const Article = withErrorBoundary(ArticleComponent, { recoverableProps: ['data'] });
 
+/*!
+ * Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2022 Fonticons, Inc.
+ */
+var faBolt = {
+  prefix: 'fas',
+  iconName: 'bolt',
+  icon: [384, 512, [9889, "zap"], "f0e7", "M240.5 224H352C365.3 224 377.3 232.3 381.1 244.7C386.6 257.2 383.1 271.3 373.1 280.1L117.1 504.1C105.8 513.9 89.27 514.7 77.19 505.9C65.1 497.1 60.7 481.1 66.59 467.4L143.5 288H31.1C18.67 288 6.733 279.7 2.044 267.3C-2.645 254.8 .8944 240.7 10.93 231.9L266.9 7.918C278.2-1.92 294.7-2.669 306.8 6.114C318.9 14.9 323.3 30.87 317.4 44.61L240.5 224z"]
+};
+var faBookOpen = {
+  prefix: 'fas',
+  iconName: 'book-open',
+  icon: [576, 512, [128366, 128214], "f518", "M144.3 32.04C106.9 31.29 63.7 41.44 18.6 61.29c-11.42 5.026-18.6 16.67-18.6 29.15l0 357.6c0 11.55 11.99 19.55 22.45 14.65c126.3-59.14 219.8 11 223.8 14.01C249.1 478.9 252.5 480 256 480c12.4 0 16-11.38 16-15.98V80.04c0-5.203-2.531-10.08-6.781-13.08C263.3 65.58 216.7 33.35 144.3 32.04zM557.4 61.29c-45.11-19.79-88.48-29.61-125.7-29.26c-72.44 1.312-118.1 33.55-120.9 34.92C306.5 69.96 304 74.83 304 80.04v383.1C304 468.4 307.5 480 320 480c3.484 0 6.938-1.125 9.781-3.328c3.925-3.018 97.44-73.16 223.8-14c10.46 4.896 22.45-3.105 22.45-14.65l.0001-357.6C575.1 77.97 568.8 66.31 557.4 61.29z"]
+};
+var faCircleQuestion = {
+  prefix: 'fas',
+  iconName: 'circle-question',
+  icon: [512, 512, [62108, "question-circle"], "f059", "M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 400c-18 0-32-14-32-32s13.1-32 32-32c17.1 0 32 14 32 32S273.1 400 256 400zM325.1 258L280 286V288c0 13-11 24-24 24S232 301 232 288V272c0-8 4-16 12-21l57-34C308 213 312 206 312 198C312 186 301.1 176 289.1 176h-51.1C225.1 176 216 186 216 198c0 13-11 24-24 24s-24-11-24-24C168 159 199 128 237.1 128h51.1C329 128 360 159 360 198C360 222 347 245 325.1 258z"]
+};
+var faQuestionCircle = faCircleQuestion;
+var faCloud = {
+  prefix: 'fas',
+  iconName: 'cloud',
+  icon: [640, 512, [9729], "f0c2", "M96.2 200.1C96.07 197.4 96 194.7 96 192C96 103.6 167.6 32 256 32C315.3 32 367 64.25 394.7 112.2C409.9 101.1 428.3 96 448 96C501 96 544 138.1 544 192C544 204.2 541.7 215.8 537.6 226.6C596 238.4 640 290.1 640 352C640 422.7 582.7 480 512 480H144C64.47 480 0 415.5 0 336C0 273.2 40.17 219.8 96.2 200.1z"]
+};
+var faCrosshairs = {
+  prefix: 'fas',
+  iconName: 'crosshairs',
+  icon: [512, 512, [], "f05b", "M224 256C224 238.3 238.3 224 256 224C273.7 224 288 238.3 288 256C288 273.7 273.7 288 256 288C238.3 288 224 273.7 224 256zM256 0C273.7 0 288 14.33 288 32V42.35C381.7 56.27 455.7 130.3 469.6 224H480C497.7 224 512 238.3 512 256C512 273.7 497.7 288 480 288H469.6C455.7 381.7 381.7 455.7 288 469.6V480C288 497.7 273.7 512 256 512C238.3 512 224 497.7 224 480V469.6C130.3 455.7 56.27 381.7 42.35 288H32C14.33 288 0 273.7 0 256C0 238.3 14.33 224 32 224H42.35C56.27 130.3 130.3 56.27 224 42.35V32C224 14.33 238.3 0 256 0V0zM224 404.6V384C224 366.3 238.3 352 256 352C273.7 352 288 366.3 288 384V404.6C346.3 392.1 392.1 346.3 404.6 288H384C366.3 288 352 273.7 352 256C352 238.3 366.3 224 384 224H404.6C392.1 165.7 346.3 119.9 288 107.4V128C288 145.7 273.7 160 256 160C238.3 160 224 145.7 224 128V107.4C165.7 119.9 119.9 165.7 107.4 224H128C145.7 224 160 238.3 160 256C160 273.7 145.7 288 128 288H107.4C119.9 346.3 165.7 392.1 224 404.6z"]
+};
+var faCube = {
+  prefix: 'fas',
+  iconName: 'cube',
+  icon: [512, 512, [], "f1b2", "M234.5 5.709C248.4 .7377 263.6 .7377 277.5 5.709L469.5 74.28C494.1 83.38 512 107.5 512 134.6V377.4C512 404.5 494.1 428.6 469.5 437.7L277.5 506.3C263.6 511.3 248.4 511.3 234.5 506.3L42.47 437.7C17 428.6 0 404.5 0 377.4V134.6C0 107.5 17 83.38 42.47 74.28L234.5 5.709zM256 65.98L82.34 128L256 190L429.7 128L256 65.98zM288 434.6L448 377.4V189.4L288 246.6V434.6z"]
+};
+var faDatabase = {
+  prefix: 'fas',
+  iconName: 'database',
+  icon: [448, 512, [], "f1c0", "M448 80V128C448 172.2 347.7 208 224 208C100.3 208 0 172.2 0 128V80C0 35.82 100.3 0 224 0C347.7 0 448 35.82 448 80zM393.2 214.7C413.1 207.3 433.1 197.8 448 186.1V288C448 332.2 347.7 368 224 368C100.3 368 0 332.2 0 288V186.1C14.93 197.8 34.02 207.3 54.85 214.7C99.66 230.7 159.5 240 224 240C288.5 240 348.3 230.7 393.2 214.7V214.7zM54.85 374.7C99.66 390.7 159.5 400 224 400C288.5 400 348.3 390.7 393.2 374.7C413.1 367.3 433.1 357.8 448 346.1V432C448 476.2 347.7 512 224 512C100.3 512 0 476.2 0 432V346.1C14.93 357.8 34.02 367.3 54.85 374.7z"]
+};
+var faEye = {
+  prefix: 'fas',
+  iconName: 'eye',
+  icon: [576, 512, [128065], "f06e", "M279.6 160.4C282.4 160.1 285.2 160 288 160C341 160 384 202.1 384 256C384 309 341 352 288 352C234.1 352 192 309 192 256C192 253.2 192.1 250.4 192.4 247.6C201.7 252.1 212.5 256 224 256C259.3 256 288 227.3 288 192C288 180.5 284.1 169.7 279.6 160.4zM480.6 112.6C527.4 156 558.7 207.1 573.5 243.7C576.8 251.6 576.8 260.4 573.5 268.3C558.7 304 527.4 355.1 480.6 399.4C433.5 443.2 368.8 480 288 480C207.2 480 142.5 443.2 95.42 399.4C48.62 355.1 17.34 304 2.461 268.3C-.8205 260.4-.8205 251.6 2.461 243.7C17.34 207.1 48.62 156 95.42 112.6C142.5 68.84 207.2 32 288 32C368.8 32 433.5 68.84 480.6 112.6V112.6zM288 112C208.5 112 144 176.5 144 256C144 335.5 208.5 400 288 400C367.5 400 432 335.5 432 256C432 176.5 367.5 112 288 112z"]
+};
+var faServer = {
+  prefix: 'fas',
+  iconName: 'server',
+  icon: [512, 512, [], "f233", "M480 288H32c-17.62 0-32 14.38-32 32v128c0 17.62 14.38 32 32 32h448c17.62 0 32-14.38 32-32v-128C512 302.4 497.6 288 480 288zM352 408c-13.25 0-24-10.75-24-24s10.75-24 24-24s24 10.75 24 24S365.3 408 352 408zM416 408c-13.25 0-24-10.75-24-24s10.75-24 24-24s24 10.75 24 24S429.3 408 416 408zM480 32H32C14.38 32 0 46.38 0 64v128c0 17.62 14.38 32 32 32h448c17.62 0 32-14.38 32-32V64C512 46.38 497.6 32 480 32zM352 152c-13.25 0-24-10.75-24-24S338.8 104 352 104S376 114.8 376 128S365.3 152 352 152zM416 152c-13.25 0-24-10.75-24-24S402.8 104 416 104S440 114.8 440 128S429.3 152 416 152z"]
+};
+
 const NodeTypeColors = {
     http_operation: '#6a6acb',
     http_service: '#e056fd',
@@ -1605,7 +1656,7 @@ const TryItResponse = ({ response }) => {
                         ? parseBody(response.bodyText, responseType)
                         : response.bodyText })) : response.blob && responseType === 'image' ? (React.createElement(Flex, { justifyContent: "center" },
                     React.createElement(Image, { src: URL.createObjectURL(response.blob), alt: "response image" }))) : (React.createElement("p", null,
-                    React.createElement(Box, { as: Icon, icon: faExclamationCircle, mr: 2 }),
+                    React.createElement(Box, { as: Icon, icon: ['fas', 'exclamation-circle'], mr: 2 }),
                     "No supported response body returned"))))));
 };
 const ResponseMenu = ({ types, type, onChange }) => {
@@ -1785,7 +1836,7 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
                 servers.length > 1 && React.createElement(ServersDropdown, { servers: servers }),
                 isMockingEnabled && (React.createElement(MockingButton, { options: mockingOptions, onOptionsChange: setMockingOptions, operation: httpOperation }))),
             validateParameters && hasRequiredButEmptyParameters && (React.createElement(Box, { mt: 4, color: "danger-light", fontSize: "sm" },
-                React.createElement(Icon, { icon: faExclamationTriangle, className: "sl-mr-1" }),
+                React.createElement(Icon, { icon: ['fas', 'exclamation-triangle'], className: "sl-mr-1" }),
                 "You didn't provide all of the required parameters!")))));
     let tryItPanelElem;
     if (embeddedInMd) {
@@ -1835,7 +1886,7 @@ const ResponseExamples = ({ httpOperation, responseMediaType, responseStatusCode
         return null;
     const examplesSelect = userDefinedExamples && userDefinedExamples.length > 1 && (React__default.createElement(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.createElement(Panel, { rounded: true, isCollapsible: false },
-        React__default.createElement(Panel.Titlebar, null, examplesSelect || React__default.createElement(Text, { color: "body" }, "Response Example")),
+        React__default.createElement(Panel.Titlebar, { rightComponent: React__default.createElement(CopyButton, { size: "sm", copyValue: responseExample || '' }) }, examplesSelect || React__default.createElement(Text, { color: "body" }, "Response Example")),
         React__default.createElement(Panel.Content, { p: 0 }, show || !exceedsSize(responseExample) ? (React__default.createElement(CodeViewer, { "aria-label": responseExample, noCopyButton: true, maxHeight: "500px", language: "json", value: responseExample, showLineNumbers: true, style: {
                 '--fs-code': 12,
             } })) : (React__default.createElement(LoadMore, { loading: loading, onClick: handleLoadMore })))));
@@ -1852,13 +1903,13 @@ const TryItWithRequestSamples = (_a) => {
         React.createElement(ResponseExamples, Object.assign({}, props))));
 };
 
-const TwoColumnLayout = ({ header, right, left, className }) => (React__default.createElement(VStack, { w: "full", className: className, spacing: 8 },
+const TwoColumnLayout = React__default.forwardRef(({ header, right, left, className }, ref) => (React__default.createElement(VStack, { ref: ref, w: "full", className: className, spacing: 8 },
     header,
     React__default.createElement(Flex, null,
-        React__default.createElement(Box, { w: 0, flex: 1 }, left),
-        right && (React__default.createElement(Box, { ml: 16, pos: "relative", w: "2/5", style: { maxWidth: 500 } }, right)))));
+        React__default.createElement(Box, { "data-testid": "two-column-left", w: 0, flex: 1 }, left),
+        right && (React__default.createElement(Box, { "data-testid": "two-column-right", ml: 16, pos: "relative", w: "2/5", style: { maxWidth: 500 } }, right))))));
 
-const DeprecatedBadge = () => (React__default.createElement(Tooltip, { renderTrigger: React__default.createElement(Badge, { intent: "warning", icon: faExclamationCircle, "data-testid": "badge-deprecated" }, "Deprecated") }, "This operation has been marked as deprecated, which means it could be removed at some point in the future."));
+const DeprecatedBadge = () => (React__default.createElement(Tooltip, { renderTrigger: React__default.createElement(Badge, { intent: "warning", icon: ['fas', 'exclamation-circle'], "data-testid": "badge-deprecated" }, "Deprecated") }, "This operation has been marked as deprecated, which means it could be removed at some point in the future."));
 const InternalBadge = ({ isHttpService }) => (React__default.createElement(Tooltip, { renderTrigger: React__default.createElement(Badge, { icon: faEye, "data-testid": "badge-internal", 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.createElement(Badge, { appearance: "solid", size: "sm", border: 0, style: {
         backgroundColor: backgroundColor || badgeDefaultBackgroundColor,
@@ -2249,10 +2300,10 @@ const ServerUrl = ({ description, url, marginBottom = true }) => {
         React.createElement(Tooltip, { placement: "right", renderTrigger: () => React.createElement(Text, { "aria-label": description }, url) },
             !hasCopied && (React.createElement(Box, { p: 1, onClick: onCopy, cursor: "pointer" },
                 "Copy Server URL ",
-                React.createElement(Icon, { className: "sl-ml-1", icon: faCopy }))),
+                React.createElement(Icon, { className: "sl-ml-1", icon: ['fas', 'copy'] }))),
             hasCopied && (React.createElement(Box, { p: 1 },
                 "Copied Server URL ",
-                React.createElement(Icon, { className: "sl-ml-1", icon: faCheck }))))));
+                React.createElement(Icon, { className: "sl-ml-1", icon: ['fas', 'check'] }))))));
 };
 
 const HttpServiceComponent = React.memo(({ data, location = {}, layoutOptions, exportProps }) => {
@@ -2276,35 +2327,58 @@ const HttpServiceComponent = React.memo(({ data, location = {}, layoutOptions, e
 HttpServiceComponent.displayName = 'HttpService.Component';
 const HttpService = withErrorBoundary(HttpServiceComponent, { recoverableProps: ['data'] });
 
+const getBreakpoints = (compact) => {
+    if (!compact)
+        return undefined;
+    if (typeof compact === 'number') {
+        return [
+            ['compact', compact],
+            ['regular', Infinity],
+        ];
+    }
+    return [['compact', Infinity]];
+};
+function useIsCompact(layoutOptions) {
+    const { ref, breakpoint } = useBreakpoints(getBreakpoints(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.compact));
+    return { ref: ref, isCompact: breakpoint === 'compact' };
+}
+
 const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOptions, exportProps, }) => {
     var _a;
-    const [chosenExampleIndex, setChosenExampleIndex] = React.useState(0);
-    const [show, setShow] = React.useState(false);
-    const [loading, setLoading] = React.useState(false);
     const resolveRef = useInlineRefResolver();
     const data = useResolvedObject(unresolvedData);
+    const { ref: layoutRef, isCompact } = useIsCompact(layoutOptions);
     const title = (_a = data.title) !== null && _a !== void 0 ? _a : nodeTitle;
     const isInternal = !!data['x-internal'];
-    const handleLoadMorePress = () => {
-        setLoading(true);
-        setTimeout(() => setShow(true), 50);
-    };
-    const examples = React.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.createElement(Flex, { justifyContent: "between", alignItems: "center" },
         React.createElement(HStack, { spacing: 5 },
             title && (React.createElement(Heading, { size: 1, fontWeight: "semibold" }, title)),
             React.createElement(HStack, { spacing: 2 }, isInternal && React.createElement(InternalBadge, null))),
         exportProps && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideExport) && React.createElement(ExportButton, Object.assign({}, exportProps))));
+    const modelExamples = !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideModelExamples) && React.createElement(ModelExamples, { data: data, isCollapsible: isCompact });
     const description = (React.createElement(VStack, { spacing: 10 },
         data.description && data.type === 'object' && React.createElement(MarkdownViewer, { role: "textbox", markdown: data.description }),
+        isCompact && modelExamples,
         React.createElement(JsonSchemaViewer, { resolveRef: resolveRef, schema: getOriginalObject(data) })));
-    const examplesSelect = examples.length > 1 && (React.createElement(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.createElement(Panel, { rounded: true, isCollapsible: false },
-        React.createElement(Panel.Titlebar, null, examplesSelect || (React.createElement(Text, { color: "body", role: "heading" }, "Example"))),
-        React.createElement(Panel.Content, { p: 0 }, show || !exceedsSize(examples[chosenExampleIndex].data) ? (React.createElement(CodeViewer, { "aria-label": examples[chosenExampleIndex].data, noCopyButton: true, maxHeight: "500px", language: "json", value: examples[chosenExampleIndex].data, showLineNumbers: true })) : (React.createElement(LoadMore, { loading: loading, onClick: handleLoadMorePress })))));
-    return (React.createElement(TwoColumnLayout, { className: cn('Model', className), header: header, left: description, right: modelExamples }));
+    return (React.createElement(TwoColumnLayout, { ref: layoutRef, className: cn('Model', className), header: header, left: description, right: !isCompact && modelExamples }));
 };
+const ModelExamples = React.memo(({ data, isCollapsible = false }) => {
+    var _a;
+    const [chosenExampleIndex, setChosenExampleIndex] = React.useState(0);
+    const [show, setShow] = React.useState(false);
+    const [loading, setLoading] = React.useState(false);
+    const examples = React.useMemo(() => generateExamplesFromJsonSchema(data), [data]);
+    const selectedExample = (_a = examples[chosenExampleIndex]) === null || _a === void 0 ? void 0 : _a.data;
+    const handleLoadMorePress = React.useCallback(() => {
+        setLoading(true);
+        setTimeout(() => setShow(true), 50);
+    }, []);
+    const examplesSelect = examples.length > 1 && (React.createElement(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: " }));
+    return (React.createElement(Panel, { rounded: true, isCollapsible: isCollapsible, defaultIsOpen: !isCollapsible },
+        React.createElement(Panel.Titlebar, { rightComponent: selectedExample ? React.createElement(CopyButton, { size: "sm", copyValue: selectedExample }) : null }, examplesSelect || (React.createElement(Text, { color: "body", role: "heading" }, "Example"))),
+        React.createElement(Panel.Content, { p: 0 }, show || !exceedsSize(selectedExample) ? (React.createElement(CodeViewer, { "aria-label": selectedExample, noCopyButton: true, maxHeight: "500px", language: "json", value: selectedExample, showLineNumbers: true })) : (React.createElement(LoadMore, { loading: loading, onClick: handleLoadMorePress })))));
+});
 const Model = withErrorBoundary(ModelComponent, { recoverableProps: ['data'] });
 
 const Docs = React.memo((_a) => {
@@ -2663,7 +2737,7 @@ const Version = ({ value }) => {
 
 const NonIdealState = ({ description, icon, title }) => {
     return (React.createElement(Flex, { flexDirection: "col", alignItems: "center", justifyContent: "center", textAlign: "center", w: "full", h: "full" },
-        React.createElement(Box, { as: Icon, icon: icon || faExclamationTriangle, color: "light", fontSize: "6xl", mb: 4 }),
+        React.createElement(Box, { as: Icon, icon: icon || ['fas', 'exclamation-triangle'], color: "light", fontSize: "6xl", mb: 4 }),
         React.createElement(Heading, { size: 4, mb: 4 }, title),
         React.createElement(Text, null, description)));
 };

package/index.js

@@ -15,7 +15,6 @@ var reactErrorBoundary = require('@stoplight/react-error-boundary');
 var markdownViewer = require('@stoplight/markdown-viewer');
 var cn = require('classnames');
 var utils = require('jotai/utils');
-var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
 var jotai = require('jotai');
 var URI = require('urijs');
 var mosaicCodeViewer = require('@stoplight/mosaic-code-viewer');
@@ -280,6 +279,58 @@ const ArticleComponent = React__namespace.memo(({ data }) => {
 });
 const Article = reactErrorBoundary.withErrorBoundary(ArticleComponent, { recoverableProps: ['data'] });
 
+/*!
+ * Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2022 Fonticons, Inc.
+ */
+var faBolt = {
+  prefix: 'fas',
+  iconName: 'bolt',
+  icon: [384, 512, [9889, "zap"], "f0e7", "M240.5 224H352C365.3 224 377.3 232.3 381.1 244.7C386.6 257.2 383.1 271.3 373.1 280.1L117.1 504.1C105.8 513.9 89.27 514.7 77.19 505.9C65.1 497.1 60.7 481.1 66.59 467.4L143.5 288H31.1C18.67 288 6.733 279.7 2.044 267.3C-2.645 254.8 .8944 240.7 10.93 231.9L266.9 7.918C278.2-1.92 294.7-2.669 306.8 6.114C318.9 14.9 323.3 30.87 317.4 44.61L240.5 224z"]
+};
+var faBookOpen = {
+  prefix: 'fas',
+  iconName: 'book-open',
+  icon: [576, 512, [128366, 128214], "f518", "M144.3 32.04C106.9 31.29 63.7 41.44 18.6 61.29c-11.42 5.026-18.6 16.67-18.6 29.15l0 357.6c0 11.55 11.99 19.55 22.45 14.65c126.3-59.14 219.8 11 223.8 14.01C249.1 478.9 252.5 480 256 480c12.4 0 16-11.38 16-15.98V80.04c0-5.203-2.531-10.08-6.781-13.08C263.3 65.58 216.7 33.35 144.3 32.04zM557.4 61.29c-45.11-19.79-88.48-29.61-125.7-29.26c-72.44 1.312-118.1 33.55-120.9 34.92C306.5 69.96 304 74.83 304 80.04v383.1C304 468.4 307.5 480 320 480c3.484 0 6.938-1.125 9.781-3.328c3.925-3.018 97.44-73.16 223.8-14c10.46 4.896 22.45-3.105 22.45-14.65l.0001-357.6C575.1 77.97 568.8 66.31 557.4 61.29z"]
+};
+var faCircleQuestion = {
+  prefix: 'fas',
+  iconName: 'circle-question',
+  icon: [512, 512, [62108, "question-circle"], "f059", "M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 400c-18 0-32-14-32-32s13.1-32 32-32c17.1 0 32 14 32 32S273.1 400 256 400zM325.1 258L280 286V288c0 13-11 24-24 24S232 301 232 288V272c0-8 4-16 12-21l57-34C308 213 312 206 312 198C312 186 301.1 176 289.1 176h-51.1C225.1 176 216 186 216 198c0 13-11 24-24 24s-24-11-24-24C168 159 199 128 237.1 128h51.1C329 128 360 159 360 198C360 222 347 245 325.1 258z"]
+};
+var faQuestionCircle = faCircleQuestion;
+var faCloud = {
+  prefix: 'fas',
+  iconName: 'cloud',
+  icon: [640, 512, [9729], "f0c2", "M96.2 200.1C96.07 197.4 96 194.7 96 192C96 103.6 167.6 32 256 32C315.3 32 367 64.25 394.7 112.2C409.9 101.1 428.3 96 448 96C501 96 544 138.1 544 192C544 204.2 541.7 215.8 537.6 226.6C596 238.4 640 290.1 640 352C640 422.7 582.7 480 512 480H144C64.47 480 0 415.5 0 336C0 273.2 40.17 219.8 96.2 200.1z"]
+};
+var faCrosshairs = {
+  prefix: 'fas',
+  iconName: 'crosshairs',
+  icon: [512, 512, [], "f05b", "M224 256C224 238.3 238.3 224 256 224C273.7 224 288 238.3 288 256C288 273.7 273.7 288 256 288C238.3 288 224 273.7 224 256zM256 0C273.7 0 288 14.33 288 32V42.35C381.7 56.27 455.7 130.3 469.6 224H480C497.7 224 512 238.3 512 256C512 273.7 497.7 288 480 288H469.6C455.7 381.7 381.7 455.7 288 469.6V480C288 497.7 273.7 512 256 512C238.3 512 224 497.7 224 480V469.6C130.3 455.7 56.27 381.7 42.35 288H32C14.33 288 0 273.7 0 256C0 238.3 14.33 224 32 224H42.35C56.27 130.3 130.3 56.27 224 42.35V32C224 14.33 238.3 0 256 0V0zM224 404.6V384C224 366.3 238.3 352 256 352C273.7 352 288 366.3 288 384V404.6C346.3 392.1 392.1 346.3 404.6 288H384C366.3 288 352 273.7 352 256C352 238.3 366.3 224 384 224H404.6C392.1 165.7 346.3 119.9 288 107.4V128C288 145.7 273.7 160 256 160C238.3 160 224 145.7 224 128V107.4C165.7 119.9 119.9 165.7 107.4 224H128C145.7 224 160 238.3 160 256C160 273.7 145.7 288 128 288H107.4C119.9 346.3 165.7 392.1 224 404.6z"]
+};
+var faCube = {
+  prefix: 'fas',
+  iconName: 'cube',
+  icon: [512, 512, [], "f1b2", "M234.5 5.709C248.4 .7377 263.6 .7377 277.5 5.709L469.5 74.28C494.1 83.38 512 107.5 512 134.6V377.4C512 404.5 494.1 428.6 469.5 437.7L277.5 506.3C263.6 511.3 248.4 511.3 234.5 506.3L42.47 437.7C17 428.6 0 404.5 0 377.4V134.6C0 107.5 17 83.38 42.47 74.28L234.5 5.709zM256 65.98L82.34 128L256 190L429.7 128L256 65.98zM288 434.6L448 377.4V189.4L288 246.6V434.6z"]
+};
+var faDatabase = {
+  prefix: 'fas',
+  iconName: 'database',
+  icon: [448, 512, [], "f1c0", "M448 80V128C448 172.2 347.7 208 224 208C100.3 208 0 172.2 0 128V80C0 35.82 100.3 0 224 0C347.7 0 448 35.82 448 80zM393.2 214.7C413.1 207.3 433.1 197.8 448 186.1V288C448 332.2 347.7 368 224 368C100.3 368 0 332.2 0 288V186.1C14.93 197.8 34.02 207.3 54.85 214.7C99.66 230.7 159.5 240 224 240C288.5 240 348.3 230.7 393.2 214.7V214.7zM54.85 374.7C99.66 390.7 159.5 400 224 400C288.5 400 348.3 390.7 393.2 374.7C413.1 367.3 433.1 357.8 448 346.1V432C448 476.2 347.7 512 224 512C100.3 512 0 476.2 0 432V346.1C14.93 357.8 34.02 367.3 54.85 374.7z"]
+};
+var faEye = {
+  prefix: 'fas',
+  iconName: 'eye',
+  icon: [576, 512, [128065], "f06e", "M279.6 160.4C282.4 160.1 285.2 160 288 160C341 160 384 202.1 384 256C384 309 341 352 288 352C234.1 352 192 309 192 256C192 253.2 192.1 250.4 192.4 247.6C201.7 252.1 212.5 256 224 256C259.3 256 288 227.3 288 192C288 180.5 284.1 169.7 279.6 160.4zM480.6 112.6C527.4 156 558.7 207.1 573.5 243.7C576.8 251.6 576.8 260.4 573.5 268.3C558.7 304 527.4 355.1 480.6 399.4C433.5 443.2 368.8 480 288 480C207.2 480 142.5 443.2 95.42 399.4C48.62 355.1 17.34 304 2.461 268.3C-.8205 260.4-.8205 251.6 2.461 243.7C17.34 207.1 48.62 156 95.42 112.6C142.5 68.84 207.2 32 288 32C368.8 32 433.5 68.84 480.6 112.6V112.6zM288 112C208.5 112 144 176.5 144 256C144 335.5 208.5 400 288 400C367.5 400 432 335.5 432 256C432 176.5 367.5 112 288 112z"]
+};
+var faServer = {
+  prefix: 'fas',
+  iconName: 'server',
+  icon: [512, 512, [], "f233", "M480 288H32c-17.62 0-32 14.38-32 32v128c0 17.62 14.38 32 32 32h448c17.62 0 32-14.38 32-32v-128C512 302.4 497.6 288 480 288zM352 408c-13.25 0-24-10.75-24-24s10.75-24 24-24s24 10.75 24 24S365.3 408 352 408zM416 408c-13.25 0-24-10.75-24-24s10.75-24 24-24s24 10.75 24 24S429.3 408 416 408zM480 32H32C14.38 32 0 46.38 0 64v128c0 17.62 14.38 32 32 32h448c17.62 0 32-14.38 32-32V64C512 46.38 497.6 32 480 32zM352 152c-13.25 0-24-10.75-24-24S338.8 104 352 104S376 114.8 376 128S365.3 152 352 152zM416 152c-13.25 0-24-10.75-24-24S402.8 104 416 104S440 114.8 440 128S429.3 152 416 152z"]
+};
+
 const NodeTypeColors = {
     http_operation: '#6a6acb',
     http_service: '#e056fd',
@@ -305,16 +356,16 @@ const NodeTypePrettyName = {
     styleguide: '',
 };
 const NodeTypeIconDefs = {
-    http_operation: freeSolidSvgIcons.faCrosshairs,
-    http_service: freeSolidSvgIcons.faCloud,
-    article: freeSolidSvgIcons.faBookOpen,
-    model: freeSolidSvgIcons.faCube,
-    http_server: freeSolidSvgIcons.faDatabase,
-    unknown: freeSolidSvgIcons.faQuestionCircle,
-    generic: freeSolidSvgIcons.faQuestionCircle,
-    table_of_contents: freeSolidSvgIcons.faQuestionCircle,
-    spectral_ruleset: freeSolidSvgIcons.faQuestionCircle,
-    styleguide: freeSolidSvgIcons.faQuestionCircle,
+    http_operation: faCrosshairs,
+    http_service: faCloud,
+    article: faBookOpen,
+    model: faCube,
+    http_server: faDatabase,
+    unknown: faQuestionCircle,
+    generic: faQuestionCircle,
+    table_of_contents: faQuestionCircle,
+    spectral_ruleset: faQuestionCircle,
+    styleguide: faQuestionCircle,
 };
 const HttpMethodColors = {
     get: 'success',
@@ -1659,7 +1710,7 @@ 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(mosaic.Box, { as: mosaic.Icon, icon: freeSolidSvgIcons.faExclamationCircle, mr: 2 }),
+                    React__namespace.createElement(mosaic.Box, { as: mosaic.Icon, icon: ['fas', 'exclamation-circle'], mr: 2 }),
                     "No supported response body returned"))))));
 };
 const ResponseMenu = ({ types, type, onChange }) => {
@@ -1711,7 +1762,7 @@ const ServersDropdown = ({ servers }) => {
             ],
         },
     ];
-    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')) }));
+    return (React__namespace.createElement(mosaic.Menu, { "aria-label": "Server", items: serverItems, closeOnPress: true, renderTrigger: ({ isOpen }) => (React__namespace.createElement(mosaic.FieldButton, { icon: 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';
 
@@ -1839,7 +1890,7 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
                 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" }),
+                React__namespace.createElement(mosaic.Icon, { icon: ['fas', 'exclamation-triangle'], className: "sl-mr-1" }),
                 "You didn't provide all of the required parameters!")))));
     let tryItPanelElem;
     if (embeddedInMd) {
@@ -1889,7 +1940,7 @@ const ResponseExamples = ({ httpOperation, responseMediaType, responseStatusCode
         return null;
     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.Titlebar, { rightComponent: React__default["default"].createElement(mosaic.CopyButton, { size: "sm", copyValue: responseExample || '' }) }, 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: "500px", language: "json", value: responseExample, showLineNumbers: true, style: {
                 '--fs-code': 12,
             } })) : (React__default["default"].createElement(LoadMore, { loading: loading, onClick: handleLoadMore })))));
@@ -1906,14 +1957,14 @@ const TryItWithRequestSamples = (_a) => {
         React__namespace.createElement(ResponseExamples, Object.assign({}, props))));
 };
 
-const TwoColumnLayout = ({ header, right, left, className }) => (React__default["default"].createElement(mosaic.VStack, { w: "full", className: className, spacing: 8 },
+const TwoColumnLayout = React__default["default"].forwardRef(({ header, right, left, className }, ref) => (React__default["default"].createElement(mosaic.VStack, { ref: ref, w: "full", className: className, spacing: 8 },
     header,
     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)))));
+        React__default["default"].createElement(mosaic.Box, { "data-testid": "two-column-left", w: 0, flex: 1 }, left),
+        right && (React__default["default"].createElement(mosaic.Box, { "data-testid": "two-column-right", 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", bg: "danger" }, "Internal") }, `This ${isHttpService ? 'operation' : 'model'} is marked as internal and won't be visible in public docs.`));
+const DeprecatedBadge = () => (React__default["default"].createElement(mosaic.Tooltip, { renderTrigger: React__default["default"].createElement(mosaic.Badge, { intent: "warning", icon: ['fas', 'exclamation-circle'], "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: 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,
         color: badgeDefaultColor,
@@ -2230,7 +2281,7 @@ function MethodPathInner({ method, path, chosenServerUrl }) {
 
 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(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, { as: mosaic.Icon, icon: 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"))));
@@ -2303,10 +2354,10 @@ const ServerUrl = ({ description, url, marginBottom = true }) => {
         React__namespace.createElement(mosaic.Tooltip, { placement: "right", renderTrigger: () => React__namespace.createElement(mosaic.Text, { "aria-label": description }, url) },
             !hasCopied && (React__namespace.createElement(mosaic.Box, { p: 1, onClick: onCopy, cursor: "pointer" },
                 "Copy Server URL ",
-                React__namespace.createElement(mosaic.Icon, { className: "sl-ml-1", icon: freeSolidSvgIcons.faCopy }))),
+                React__namespace.createElement(mosaic.Icon, { className: "sl-ml-1", icon: ['fas', 'copy'] }))),
             hasCopied && (React__namespace.createElement(mosaic.Box, { p: 1 },
                 "Copied Server URL ",
-                React__namespace.createElement(mosaic.Icon, { className: "sl-ml-1", icon: freeSolidSvgIcons.faCheck }))))));
+                React__namespace.createElement(mosaic.Icon, { className: "sl-ml-1", icon: ['fas', 'check'] }))))));
 };
 
 const HttpServiceComponent = React__namespace.memo(({ data, location = {}, layoutOptions, exportProps }) => {
@@ -2330,35 +2381,58 @@ const HttpServiceComponent = React__namespace.memo(({ data, location = {}, layou
 HttpServiceComponent.displayName = 'HttpService.Component';
 const HttpService = reactErrorBoundary.withErrorBoundary(HttpServiceComponent, { recoverableProps: ['data'] });
 
+const getBreakpoints = (compact) => {
+    if (!compact)
+        return undefined;
+    if (typeof compact === 'number') {
+        return [
+            ['compact', compact],
+            ['regular', Infinity],
+        ];
+    }
+    return [['compact', Infinity]];
+};
+function useIsCompact(layoutOptions) {
+    const { ref, breakpoint } = mosaic.useBreakpoints(getBreakpoints(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.compact));
+    return { ref: ref, isCompact: breakpoint === 'compact' };
+}
+
 const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOptions, exportProps, }) => {
     var _a;
-    const [chosenExampleIndex, setChosenExampleIndex] = React__namespace.useState(0);
-    const [show, setShow] = React__namespace.useState(false);
-    const [loading, setLoading] = React__namespace.useState(false);
     const resolveRef = useInlineRefResolver();
     const data = useResolvedObject(unresolvedData);
+    const { ref: layoutRef, isCompact } = useIsCompact(layoutOptions);
     const title = (_a = data.title) !== null && _a !== void 0 ? _a : nodeTitle;
     const isInternal = !!data['x-internal'];
-    const handleLoadMorePress = () => {
-        setLoading(true);
-        setTimeout(() => setShow(true), 50);
-    };
-    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(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 modelExamples = !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideModelExamples) && React__namespace.createElement(ModelExamples, { data: data, isCollapsible: isCompact });
     const description = (React__namespace.createElement(mosaic.VStack, { spacing: 10 },
         data.description && data.type === 'object' && React__namespace.createElement(MarkdownViewer, { role: "textbox", markdown: data.description }),
+        isCompact && modelExamples,
         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 },
-        React__namespace.createElement(mosaic.Panel.Titlebar, null, examplesSelect || (React__namespace.createElement(mosaic.Text, { color: "body", role: "heading" }, "Example"))),
-        React__namespace.createElement(mosaic.Panel.Content, { p: 0 }, show || !exceedsSize(examples[chosenExampleIndex].data) ? (React__namespace.createElement(mosaicCodeViewer.CodeViewer, { "aria-label": examples[chosenExampleIndex].data, noCopyButton: true, maxHeight: "500px", language: "json", value: examples[chosenExampleIndex].data, showLineNumbers: true })) : (React__namespace.createElement(LoadMore, { loading: loading, onClick: handleLoadMorePress })))));
-    return (React__namespace.createElement(TwoColumnLayout, { className: cn__default["default"]('Model', className), header: header, left: description, right: modelExamples }));
+    return (React__namespace.createElement(TwoColumnLayout, { ref: layoutRef, className: cn__default["default"]('Model', className), header: header, left: description, right: !isCompact && modelExamples }));
 };
+const ModelExamples = React__namespace.memo(({ data, isCollapsible = false }) => {
+    var _a;
+    const [chosenExampleIndex, setChosenExampleIndex] = React__namespace.useState(0);
+    const [show, setShow] = React__namespace.useState(false);
+    const [loading, setLoading] = React__namespace.useState(false);
+    const examples = React__namespace.useMemo(() => generateExamplesFromJsonSchema(data), [data]);
+    const selectedExample = (_a = examples[chosenExampleIndex]) === null || _a === void 0 ? void 0 : _a.data;
+    const handleLoadMorePress = React__namespace.useCallback(() => {
+        setLoading(true);
+        setTimeout(() => setShow(true), 50);
+    }, []);
+    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: " }));
+    return (React__namespace.createElement(mosaic.Panel, { rounded: true, isCollapsible: isCollapsible, defaultIsOpen: !isCollapsible },
+        React__namespace.createElement(mosaic.Panel.Titlebar, { rightComponent: selectedExample ? React__namespace.createElement(mosaic.CopyButton, { size: "sm", copyValue: selectedExample }) : null }, examplesSelect || (React__namespace.createElement(mosaic.Text, { color: "body", role: "heading" }, "Example"))),
+        React__namespace.createElement(mosaic.Panel.Content, { p: 0 }, show || !exceedsSize(selectedExample) ? (React__namespace.createElement(mosaicCodeViewer.CodeViewer, { "aria-label": selectedExample, noCopyButton: true, maxHeight: "500px", language: "json", value: selectedExample, showLineNumbers: true })) : (React__namespace.createElement(LoadMore, { loading: loading, onClick: handleLoadMorePress })))));
+});
 const Model = reactErrorBoundary.withErrorBoundary(ModelComponent, { recoverableProps: ['data'] });
 
 const Docs = React__namespace.memo((_a) => {
@@ -2542,10 +2616,10 @@ const ReactRouterMarkdownLink = ({ title, to, href: _href, children, }) => {
 };
 
 const NODE_TYPE_TITLE_ICON = {
-    http_service: freeSolidSvgIcons.faCloud,
+    http_service: faCloud,
 };
 const NODE_TYPE_META_ICON = {
-    model: freeSolidSvgIcons.faCube,
+    model: faCube,
 };
 const NODE_TYPE_ICON_COLOR = {
     model: 'warning',
@@ -2717,7 +2791,7 @@ const Version = ({ value }) => {
 
 const NonIdealState = ({ description, icon, title }) => {
     return (React__namespace.createElement(mosaic.Flex, { flexDirection: "col", alignItems: "center", justifyContent: "center", textAlign: "center", w: "full", h: "full" },
-        React__namespace.createElement(mosaic.Box, { as: mosaic.Icon, icon: icon || freeSolidSvgIcons.faExclamationTriangle, color: "light", fontSize: "6xl", mb: 4 }),
+        React__namespace.createElement(mosaic.Box, { as: mosaic.Icon, icon: icon || ['fas', 'exclamation-triangle'], color: "light", fontSize: "6xl", mb: 4 }),
         React__namespace.createElement(mosaic.Heading, { size: 4, mb: 4 }, title),
         React__namespace.createElement(mosaic.Text, null, description)));
 };