@gitbook/react-openapi 1.1.10 → 1.2.1

package/dist/OpenAPIExample.jsx

@@ -1,7 +1,6 @@
-import { generateSchemaExample } from './generateSchemaExample';
 import { json2xml } from './json2xml';
 import { stringifyOpenAPI } from './stringifyOpenAPI';
-import { checkIsReference } from './utils';
+import { t } from './translate';
 /**
  * Display an example.
  */
@@ -9,7 +8,7 @@ export function OpenAPIExample(props) {
     var example = props.example, context = props.context, syntax = props.syntax;
     var code = stringifyExample({ example: example, xml: syntax === 'xml' });
     if (code === null) {
-        return <OpenAPIEmptyExample />;
+        return <OpenAPIEmptyExample context={context}/>;
     }
     return context.renderCodeBlock({ code: code, syntax: syntax });
 }
@@ -29,75 +28,9 @@ function stringifyExample(args) {
 /**
  * Empty response example.
  */
-export function OpenAPIEmptyExample() {
+export function OpenAPIEmptyExample(props) {
+    var context = props.context;
     return (<pre className="openapi-example-empty">
-            <p>No Content</p>
+            <p>{t(context.translation, 'no_content')}</p>
         </pre>);
 }
-/**
- * Generate an example from a reference object.
- */
-export function getExampleFromReference(ref) {
-    return { summary: 'Unresolved reference', value: { $ref: ref.$ref } };
-}
-/**
- * Get examples from a media type object.
- */
-export function getExamplesFromMediaTypeObject(args) {
-    var _a;
-    var _b, _c;
-    var mediaTypeObject = args.mediaTypeObject, mediaType = args.mediaType;
-    if (mediaTypeObject.examples) {
-        return Object.entries(mediaTypeObject.examples).map(function (_a) {
-            var key = _a[0], example = _a[1];
-            return {
-                key: key,
-                example: checkIsReference(example) ? getExampleFromReference(example) : example,
-            };
-        });
-    }
-    if (mediaTypeObject.example) {
-        return [{ key: 'default', example: { value: mediaTypeObject.example } }];
-    }
-    if (mediaTypeObject.schema) {
-        if (mediaType === 'application/xml') {
-            // @TODO normally we should use the name of the schema but we don't have it
-            // fix it when we got the reference name
-            var root = (_c = (_b = mediaTypeObject.schema.xml) === null || _b === void 0 ? void 0 : _b.name) !== null && _c !== void 0 ? _c : 'object';
-            return [
-                {
-                    key: 'default',
-                    example: {
-                        value: (_a = {},
-                            _a[root] = generateSchemaExample(mediaTypeObject.schema, {
-                                xml: mediaType === 'application/xml',
-                                mode: 'read',
-                            }),
-                            _a),
-                    },
-                },
-            ];
-        }
-        return [
-            {
-                key: 'default',
-                example: {
-                    value: generateSchemaExample(mediaTypeObject.schema, {
-                        mode: 'read',
-                    }),
-                },
-            },
-        ];
-    }
-    return [];
-}
-/**
- * Get example from a schema object.
- */
-export function getExampleFromSchema(args) {
-    var schema = args.schema;
-    if (schema.example) {
-        return { value: schema.example };
-    }
-    return { value: generateSchemaExample(schema, { mode: 'read' }) };
-}

package/dist/OpenAPIMediaType.d.ts

@@ -0,0 +1,21 @@
+import type { Key } from 'react-aria';
+import { OpenAPISelectItem } from './OpenAPISelect';
+import type { OpenAPIClientContext } from './context';
+type OpenAPIMediaTypeItem = OpenAPISelectItem & {
+    body: React.ReactNode;
+    examples?: OpenAPIMediaTypeItem[];
+};
+/**
+ * Get the state of the response examples select.
+ */
+export declare function useMediaTypesState(stateKey: string | undefined, initialKey?: Key): {
+    key: (string | number) | null;
+    setKey: (key: Key | null) => void;
+};
+export declare function OpenAPIMediaTypeContent(props: {
+    items: OpenAPIMediaTypeItem[];
+    selectIcon?: React.ReactNode;
+    stateKey: string;
+    context: OpenAPIClientContext;
+}): import("react").JSX.Element | null;
+export {};

package/dist/OpenAPIMediaType.jsx

@@ -0,0 +1,61 @@
+'use client';
+import { OpenAPIEmptyExample } from './OpenAPIExample';
+import { OpenAPISelect, OpenAPISelectItem, useSelectState } from './OpenAPISelect';
+import { StaticSection } from './StaticSection';
+/**
+ * Get the state of the response examples select.
+ */
+export function useMediaTypesState(stateKey, initialKey) {
+    if (initialKey === void 0) { initialKey = 'default'; }
+    return useSelectState(stateKey, initialKey);
+}
+function useMediaTypeExamplesState(stateKey, initialKey) {
+    if (initialKey === void 0) { initialKey = 'default'; }
+    return useSelectState(stateKey, initialKey);
+}
+export function OpenAPIMediaTypeContent(props) {
+    var _a, _b, _c;
+    var stateKey = props.stateKey, items = props.items, selectIcon = props.selectIcon, context = props.context;
+    var state = useMediaTypesState(stateKey, (_a = items[0]) === null || _a === void 0 ? void 0 : _a.key);
+    var examples = (_c = (_b = items.find(function (item) { return item.key === state.key; })) === null || _b === void 0 ? void 0 : _b.examples) !== null && _c !== void 0 ? _c : [];
+    if (!items.length && !examples.length) {
+        return null;
+    }
+    return (<StaticSection footer={items.length > 1 || examples.length > 1 ? (<OpenAPIMediaTypeFooter items={items} examples={examples} selectIcon={selectIcon} stateKey={stateKey}/>) : null} className="openapi-response-media-types-examples">
+            <OpenAPIMediaTypeBody context={context} stateKey={stateKey} items={items} examples={examples}/>
+        </StaticSection>);
+}
+function OpenAPIMediaTypeFooter(props) {
+    var items = props.items, examples = props.examples, stateKey = props.stateKey, selectIcon = props.selectIcon;
+    return (<>
+            {items.length > 1 && (<OpenAPISelect icon={selectIcon} items={items} stateKey={stateKey} placement="bottom start">
+                    {items.map(function (item) { return (<OpenAPISelectItem key={item.key} id={item.key} value={item}>
+                            <span>{item.label}</span>
+                        </OpenAPISelectItem>); })}
+                </OpenAPISelect>)}
+
+            {examples && examples.length > 1 ? (<OpenAPISelect icon={selectIcon} items={examples} stateKey={"".concat(stateKey, "-examples")} placement="bottom start">
+                    {examples.map(function (example) { return (<OpenAPISelectItem key={example.key} id={example.key} value={example}>
+                            <span>{example.label}</span>
+                        </OpenAPISelectItem>); })}
+                </OpenAPISelect>) : null}
+        </>);
+}
+function OpenAPIMediaTypeBody(props) {
+    var _a, _b, _c, _d, _e;
+    var stateKey = props.stateKey, items = props.items, examples = props.examples, context = props.context;
+    var state = useMediaTypesState(stateKey, (_a = items[0]) === null || _a === void 0 ? void 0 : _a.key);
+    var selectedItem = (_b = items.find(function (item) { return item.key === state.key; })) !== null && _b !== void 0 ? _b : items[0];
+    var exampleState = useMediaTypeExamplesState("".concat(stateKey, "-examples"), (_d = (_c = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.examples) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.key);
+    if (!selectedItem) {
+        return null;
+    }
+    if (examples) {
+        var selectedExample = (_e = examples.find(function (example) { return example.key === exampleState.key; })) !== null && _e !== void 0 ? _e : examples[0];
+        if (!selectedExample) {
+            return <OpenAPIEmptyExample context={context}/>;
+        }
+        return selectedExample.body;
+    }
+    return selectedItem.body;
+}

package/dist/OpenAPIOperation.d.ts

@@ -1,9 +1,10 @@
-import type { OpenAPIContext, OpenAPIOperationData } from './types';
+import { type OpenAPIContextInput } from './context';
+import type { OpenAPIOperationData } from './types';
 /**
  * Display an interactive OpenAPI operation.
  */
 export declare function OpenAPIOperation(props: {
     className?: string;
     data: OpenAPIOperationData;
-    context: OpenAPIContext;
+    context: OpenAPIContextInput;
 }): import("react").JSX.Element;

package/dist/OpenAPIOperation.jsx

@@ -1,84 +1,25 @@
 import clsx from 'clsx';
-import { Markdown } from './Markdown';
 import { OpenAPICodeSample } from './OpenAPICodeSample';
-import { OpenAPIPath } from './OpenAPIPath';
 import { OpenAPIResponseExample } from './OpenAPIResponseExample';
-import { OpenAPISpec } from './OpenAPISpec';
-import { getOpenAPIClientContext } from './context';
-import { resolveDescription } from './utils';
+import { OpenAPIColumnSpec } from './common/OpenAPIColumnSpec';
+import { OpenAPISummary } from './common/OpenAPISummary';
+import { resolveOpenAPIContext } from './context';
 /**
  * Display an interactive OpenAPI operation.
  */
 export function OpenAPIOperation(props) {
-    var _a;
-    var className = props.className, data = props.data, context = props.context;
-    var operation = data.operation;
-    var clientContext = getOpenAPIClientContext(context);
+    var className = props.className, data = props.data, contextInput = props.context;
+    var context = resolveOpenAPIContext(contextInput);
     return (<div className={clsx('openapi-operation', className)}>
-            <div className="openapi-summary" id={operation.summary ? undefined : context.id}>
-                {(operation.deprecated || operation['x-stability']) && (<div className="openapi-summary-tags">
-                        {operation.deprecated && (<div className="openapi-deprecated">Deprecated</div>)}
-                        {operation['x-stability'] && (<OpenAPIOperationStability stability={operation['x-stability']}/>)}
-                    </div>)}
-                {operation.summary
-            ? context.renderHeading({
-                deprecated: (_a = operation.deprecated) !== null && _a !== void 0 ? _a : false,
-                stability: operation['x-stability'],
-                title: operation.summary,
-            })
-            : null}
-                <OpenAPIPath data={data}/>
-            </div>
+            <OpenAPISummary data={data} context={context}/>
             <div className="openapi-columns">
-                <div className="openapi-column-spec">
-                    {operation['x-deprecated-sunset'] ? (<div className="openapi-deprecated-sunset openapi-description openapi-markdown">
-                            This operation is deprecated and will be sunset on{' '}
-                            <span className="openapi-deprecated-sunset-date">
-                                {operation['x-deprecated-sunset']}
-                            </span>
-                            {'.'}
-                        </div>) : null}
-                    <OpenAPIOperationDescription operation={operation} context={context}/>
-                    <OpenAPISpec data={data} context={clientContext}/>
-                </div>
+                <OpenAPIColumnSpec data={data} context={context}/>
                 <div className="openapi-column-preview">
                     <div className="openapi-column-preview-body">
-                        <OpenAPICodeSample {...props}/>
-                        <OpenAPIResponseExample {...props}/>
+                        <OpenAPICodeSample data={data} context={context}/>
+                        <OpenAPIResponseExample data={data} context={context}/>
                     </div>
                 </div>
             </div>
         </div>);
 }
-function OpenAPIOperationDescription(props) {
-    var operation = props.operation;
-    if (operation['x-gitbook-description-document']) {
-        return (<div className="openapi-intro">
-                {props.context.renderDocument({
-                document: operation['x-gitbook-description-document'],
-            })}
-            </div>);
-    }
-    var description = resolveDescription(operation);
-    if (!description) {
-        return null;
-    }
-    return (<div className="openapi-intro">
-            <Markdown className="openapi-description" source={description}/>
-        </div>);
-}
-var stabilityEnum = {
-    experimental: 'Experimental',
-    alpha: 'Alpha',
-    beta: 'Beta',
-};
-function OpenAPIOperationStability(props) {
-    var stability = props.stability;
-    var foundStability = stabilityEnum[stability];
-    if (!foundStability) {
-        return null;
-    }
-    return (<div className={"openapi-stability openapi-stability-".concat(foundStability.toLowerCase())}>
-            {foundStability}
-        </div>);
-}

package/dist/OpenAPIOperationDescription.d.ts

@@ -0,0 +1,9 @@
+import type { OpenAPICustomOperationProperties, OpenAPIV3 } from '@gitbook/openapi-parser';
+import type { OpenAPIContext } from './context';
+/**
+ * Display the description of an OpenAPI operation.
+ */
+export declare function OpenAPIOperationDescription(props: {
+    operation: OpenAPIV3.OperationObject<OpenAPICustomOperationProperties>;
+    context: OpenAPIContext;
+}): import("react").JSX.Element | null;

package/dist/OpenAPIOperationDescription.jsx

@@ -0,0 +1,22 @@
+import { Markdown } from './Markdown';
+import { resolveDescription } from './utils';
+/**
+ * Display the description of an OpenAPI operation.
+ */
+export function OpenAPIOperationDescription(props) {
+    var operation = props.operation;
+    if (operation['x-gitbook-description-document']) {
+        return (<div className="openapi-intro">
+                {props.context.renderDocument({
+                document: operation['x-gitbook-description-document'],
+            })}
+            </div>);
+    }
+    var description = resolveDescription(operation);
+    if (!description) {
+        return null;
+    }
+    return (<div className="openapi-intro">
+            <Markdown className="openapi-description" source={description}/>
+        </div>);
+}

package/dist/OpenAPIOperationStability.d.ts

@@ -0,0 +1,9 @@
+import type { OpenAPIStability } from '@gitbook/openapi-parser';
+import type { OpenAPIContext } from './context';
+/**
+ * Display the stability of an OpenAPI operation.
+ */
+export declare function OpenAPIOperationStability(props: {
+    stability: OpenAPIStability;
+    context: OpenAPIContext;
+}): import("react").JSX.Element | null;

package/dist/OpenAPIOperationStability.jsx

@@ -0,0 +1,27 @@
+import { t } from './translate';
+/**
+ * Display the stability of an OpenAPI operation.
+ */
+export function OpenAPIOperationStability(props) {
+    var stability = props.stability, context = props.context;
+    var stabilityLabel = getStabilityLabel(stability, context);
+    if (!stabilityLabel) {
+        return null;
+    }
+    return (<div className={"openapi-stability openapi-stability-".concat(stability)}>{stabilityLabel}</div>);
+}
+/**
+ * Get the stability label for the given stability level.
+ */
+function getStabilityLabel(stability, context) {
+    switch (stability) {
+        case 'experimental':
+            return t(context.translation, 'stability_experimental');
+        case 'alpha':
+            return t(context.translation, 'stability_alpha');
+        case 'beta':
+            return t(context.translation, 'stability_beta');
+        default:
+            return null;
+    }
+}

package/dist/OpenAPIPath.d.ts

@@ -1,9 +1,11 @@
+import { type OpenAPIUniversalContext } from './context';
 import type { OpenAPIOperationData } from './types';
 /**
  * Display the path of an operation.
  */
 export declare function OpenAPIPath(props: {
     data: OpenAPIOperationData;
+    context: OpenAPIUniversalContext;
     /** Whether to show the server URL.
      * @default true
      */

package/dist/OpenAPIPath.jsx

@@ -1,10 +1,11 @@
 import { OpenAPICopyButton } from './OpenAPICopyButton';
+import { getOpenAPIClientContext } from './context';
 import { getDefaultServerURL } from './util/server';
 /**
  * Display the path of an operation.
  */
 export function OpenAPIPath(props) {
-    var data = props.data, _a = props.withServer, withServer = _a === void 0 ? true : _a, _b = props.canCopy, canCopy = _b === void 0 ? true : _b;
+    var data = props.data, context = props.context, _a = props.withServer, withServer = _a === void 0 ? true : _a, _b = props.canCopy, canCopy = _b === void 0 ? true : _b;
     var method = data.method, path = data.path, operation = data.operation;
     var server = getDefaultServerURL(data.servers);
     var formattedPath = formatPath(path);
@@ -17,7 +18,7 @@ export function OpenAPIPath(props) {
     return (<div className="openapi-path">
             <div className={"openapi-method openapi-method-".concat(method)}>{method}</div>
 
-            <OpenAPICopyButton value={"".concat(withServer ? server : '').concat(path)} className="openapi-path-title" data-deprecated={operation.deprecated} isDisabled={!canCopy}>
+            <OpenAPICopyButton value={"".concat(withServer ? server : '').concat(path)} className="openapi-path-title" data-deprecated={operation.deprecated} isDisabled={!canCopy} context={getOpenAPIClientContext(context)}>
                 {element}
             </OpenAPICopyButton>
         </div>);

package/dist/OpenAPIRequestBody.d.ts

@@ -1,9 +1,11 @@
 import type { OpenAPIV3 } from '@gitbook/openapi-parser';
-import type { OpenAPIClientContext } from './types';
+import type { OpenAPIClientContext } from './context';
+import type { OpenAPIOperationData, OpenAPIWebhookData } from './types';
 /**
  * Display an interactive request body.
  */
 export declare function OpenAPIRequestBody(props: {
     requestBody: OpenAPIV3.RequestBodyObject | OpenAPIV3.ReferenceObject;
     context: OpenAPIClientContext;
+    data: OpenAPIOperationData | OpenAPIWebhookData;
 }): import("react").JSX.Element | null;

package/dist/OpenAPIRequestBody.jsx

@@ -1,16 +1,17 @@
 import { InteractiveSection } from './InteractiveSection';
 import { OpenAPIRootSchema } from './OpenAPISchemaServer';
-import { checkIsReference } from './utils';
+import { t } from './translate';
+import { checkIsReference, createStateKey } from './utils';
 /**
  * Display an interactive request body.
  */
 export function OpenAPIRequestBody(props) {
     var _a;
-    var requestBody = props.requestBody, context = props.context;
+    var requestBody = props.requestBody, context = props.context, data = props.data;
     if (checkIsReference(requestBody)) {
         return null;
     }
-    return (<InteractiveSection header="Body" className="openapi-requestbody" tabs={Object.entries((_a = requestBody.content) !== null && _a !== void 0 ? _a : {}).map(function (_a) {
+    return (<InteractiveSection header={t(context.translation, 'name' in data ? 'payload' : 'body')} className="openapi-requestbody" stateKey={createStateKey('request-body-media-type', context.blockKey)} selectIcon={context.icons.chevronDown} tabs={Object.entries((_a = requestBody.content) !== null && _a !== void 0 ? _a : {}).map(function (_a) {
             var _b;
             var contentType = _a[0], mediaTypeObject = _a[1];
             return {

package/dist/OpenAPIResponse.d.ts

@@ -1,5 +1,5 @@
 import type { OpenAPIV3 } from '@gitbook/openapi-parser';
-import type { OpenAPIClientContext } from './types';
+import type { OpenAPIClientContext } from './context';
 /**
  * Display an interactive response body.
  */

package/dist/OpenAPIResponse.jsx

@@ -28,7 +28,7 @@ export function OpenAPIResponse(props) {
         return null;
     }
     return (<div className="openapi-response-body">
-            {headers.length > 0 ? (<OpenAPIDisclosure context={context} label="Headers">
+            {headers.length > 0 ? (<OpenAPIDisclosure icon={context.icons.plus} label="Headers">
                     <OpenAPISchemaProperties properties={headers.map(function (_a) {
                 var name = _a[0], header = _a[1];
                 return parameterToProperty(__assign({ name: name }, header));

package/dist/OpenAPIResponseExample.d.ts

@@ -1,8 +1,9 @@
-import type { OpenAPIContext, OpenAPIOperationData } from './types';
+import { type OpenAPIContext } from './context';
+import type { OpenAPIOperationData, OpenAPIWebhookData } from './types';
 /**
  * Display an example of the response content.
  */
 export declare function OpenAPIResponseExample(props: {
-    data: OpenAPIOperationData;
+    data: OpenAPIOperationData | OpenAPIWebhookData;
     context: OpenAPIContext;
 }): import("react").JSX.Element | null;

package/dist/OpenAPIResponseExample.jsx

@@ -1,8 +1,11 @@
 import { Markdown } from './Markdown';
-import { OpenAPIEmptyExample, OpenAPIExample, getExampleFromReference, getExamplesFromMediaTypeObject, } from './OpenAPIExample';
-import { OpenAPITabs, OpenAPITabsList, OpenAPITabsPanels } from './OpenAPITabs';
-import { StaticSection } from './StaticSection';
-import { checkIsReference, createStateKey, resolveDescription } from './utils';
+import { OpenAPIEmptyExample, OpenAPIExample } from './OpenAPIExample';
+import { OpenAPIMediaTypeContent } from './OpenAPIMediaType';
+import { OpenAPIResponseExampleContent } from './OpenAPIResponseExampleContent';
+import { getOpenAPIClientContext } from './context';
+import { getExampleFromReference, getExamples } from './util/example';
+import { createStateKey, getStatusCodeDefaultLabel } from './utils';
+import { checkIsReference, resolveDescription } from './utils';
 /**
  * Display an example of the response content.
  */
@@ -34,37 +37,34 @@ export function OpenAPIResponseExample(props) {
     var tabs = responses.map(function (_a) {
         var key = _a[0], responseObject = _a[1];
         var description = resolveDescription(responseObject);
+        var label = description ? (<Markdown source={description}/>) : (getStatusCodeDefaultLabel(key, context));
         if (checkIsReference(responseObject)) {
             return {
                 key: key,
-                label: key,
-                body: (<OpenAPIExample example={getExampleFromReference(responseObject)} context={context} syntax="json"/>),
-                footer: description ? <Markdown source={description}/> : undefined,
+                label: label,
+                statusCode: key,
+                body: (<OpenAPIExample example={getExampleFromReference(responseObject, context)} context={context} syntax="json"/>),
             };
         }
         if (!responseObject.content || Object.keys(responseObject.content).length === 0) {
             return {
                 key: key,
-                label: key,
-                body: <OpenAPIEmptyExample />,
-                footer: description ? <Markdown source={description}/> : undefined,
+                label: label,
+                statusCode: key,
+                body: <OpenAPIEmptyExample context={context}/>,
             };
         }
         return {
             key: key,
-            label: key,
+            label: label,
+            statusCode: key,
             body: <OpenAPIResponse context={context} content={responseObject.content}/>,
-            footer: description ? <Markdown source={description}/> : undefined,
         };
     });
     if (tabs.length === 0) {
         return null;
     }
-    return (<OpenAPITabs stateKey={createStateKey('response-example')} items={tabs}>
-            <StaticSection header={<OpenAPITabsList />} className="openapi-panel">
-                <OpenAPITabsPanels />
-            </StaticSection>
-        </OpenAPITabs>);
+    return (<OpenAPIResponseExampleContent selectIcon={context.icons.chevronDown} blockKey={context.blockKey} items={tabs}/>);
 }
 function OpenAPIResponse(props) {
     var context = props.context, content = props.content;
@@ -73,57 +73,18 @@ function OpenAPIResponse(props) {
     if (!firstEntry) {
         throw new Error('One media type is required');
     }
-    if (entries.length === 1) {
-        var mediaType = firstEntry[0], mediaTypeObject = firstEntry[1];
-        return (<OpenAPIResponseMediaType context={context} mediaType={mediaType} mediaTypeObject={mediaTypeObject}/>);
-    }
     var tabs = entries.map(function (entry) {
         var mediaType = entry[0], mediaTypeObject = entry[1];
         return {
             key: mediaType,
             label: mediaType,
-            body: (<OpenAPIResponseMediaType context={context} mediaType={mediaType} mediaTypeObject={mediaTypeObject}/>),
-        };
-    });
-    return (<OpenAPITabs stateKey={createStateKey('response-media-types')} items={tabs}>
-            <StaticSection header={<OpenAPITabsList />} className="openapi-response-media-types">
-                <OpenAPITabsPanels />
-            </StaticSection>
-        </OpenAPITabs>);
-}
-function OpenAPIResponseMediaType(props) {
-    var mediaTypeObject = props.mediaTypeObject, mediaType = props.mediaType;
-    var examples = getExamplesFromMediaTypeObject({ mediaTypeObject: mediaTypeObject, mediaType: mediaType });
-    var syntax = getSyntaxFromMediaType(mediaType);
-    var firstExample = examples[0];
-    if (!firstExample) {
-        return <OpenAPIEmptyExample />;
-    }
-    if (examples.length === 1) {
-        return (<OpenAPIExample example={firstExample.example} context={props.context} syntax={syntax}/>);
-    }
-    var tabs = examples.map(function (example) {
-        return {
-            key: example.key,
-            label: example.example.summary || example.key,
-            body: (<OpenAPIExample example={example.example} context={props.context} syntax={syntax}/>),
+            body: <></>,
+            examples: getExamples({
+                mediaTypeObject: mediaTypeObject,
+                mediaType: mediaType,
+                context: context,
+            }),
         };
     });
-    return (<OpenAPITabs stateKey={createStateKey('response-media-type-examples')} items={tabs}>
-            <StaticSection header={<OpenAPITabsList />} className="openapi-response-media-type-examples">
-                <OpenAPITabsPanels />
-            </StaticSection>
-        </OpenAPITabs>);
-}
-/**
- * Get the syntax from a media type.
- */
-function getSyntaxFromMediaType(mediaType) {
-    if (mediaType.includes('json')) {
-        return 'json';
-    }
-    if (mediaType === 'application/xml') {
-        return 'xml';
-    }
-    return 'text';
+    return (<OpenAPIMediaTypeContent selectIcon={context.icons.chevronDown} stateKey={createStateKey('response-media-types', context.blockKey)} items={tabs} context={getOpenAPIClientContext(context)}/>);
 }

package/dist/OpenAPIResponseExampleContent.d.ts

@@ -0,0 +1,19 @@
+import type { Key } from 'react-aria';
+import { OpenAPISelectItem } from './OpenAPISelect';
+type OpenAPIResponseExampleItem = OpenAPISelectItem & {
+    statusCode: string;
+    body: React.ReactNode;
+};
+/**
+ * Get the state of the response examples select.
+ */
+export declare function useResponseExamplesState(blockKey: string | undefined, initialKey?: Key): {
+    key: (string | number) | null;
+    setKey: (key: Key | null) => void;
+};
+export declare function OpenAPIResponseExampleContent(props: {
+    items: OpenAPIResponseExampleItem[];
+    blockKey?: string;
+    selectIcon?: React.ReactNode;
+}): import("react").JSX.Element;
+export {};