@redocly/openapi-docs 0.74.2-pingfed.3 → 0.81.2-rc.2

package/lib-esm/components/Markdown/Markdown.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import type { ReactElement } from 'react';
 import type { MarkdownProps } from './types';
-export declare const Markdown: ({ source, ast, htmlWrap, ...props }: MarkdownProps) => JSX.Element | null;
+export declare const Markdown: ({ source, ast, htmlWrap, ...props }: MarkdownProps) => ReactElement | null;

package/lib-esm/components/Markdown/Markdown.js

@@ -1,2 +1,2 @@
-var __rest=this&&this.__rest||function(r,t){var o={};for(var e in r)Object.prototype.hasOwnProperty.call(r,e)&&t.indexOf(e)<0&&(o[e]=r[e]);if(null!=r&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(e=Object.getOwnPropertySymbols(r);n<e.length;n++)t.indexOf(e[n])<0&&Object.prototype.propertyIsEnumerable.call(r,e[n])&&(o[e[n]]=r[e[n]])}return o};import React,{Fragment}from"react";import{parse,transform,renderers,Ast}from"@markdoc/markdoc";import{useAtomValue}from"jotai";import DOMPurify from"dompurify";import{MarkdownWrapper}from"@redocly/theme";import{globalOptionsAtom}from"../../jotai/store";import{isString}from"../../utils";const TAGS_NOT_TO_WRAP=["OpenApiResponse","OpenApiTryIt","OpenApiRequestBody"];export const Markdown=r=>{var t,o,e,n,i,s,a,l,d,{source:m,ast:p,htmlWrap:u}=r,c=__rest(r,["source","ast","htmlWrap"]);const v=useAtomValue(globalOptionsAtom);if(!m&&!p)return null;const f=(null==v?void 0:v.markdocOptions)&&{tags:null===(t=v.markdocOptions)||void 0===t?void 0:t.tags,nodes:null===(o=v.markdocOptions)||void 0===o?void 0:o.nodes,partials:null===(e=v.markdocOptions)||void 0===e?void 0:e.partials,variables:null===(n=v.markdocOptions)||void 0===n?void 0:n.variables,functions:null===(i=v.markdocOptions)||void 0===i?void 0:i.functions},O=(null==v?void 0:v.markdocOptions)&&{components:null===(s=v.markdocOptions)||void 0===s?void 0:s.components};let y;if(m)if(isString(m)){const r=(null===(a=null==v?void 0:v.hooks)||void 0===a?void 0:a.sanitize)?null===(d=null===(l=v.hooks)||void 0===l?void 0:l.sanitize)||void 0===d?void 0:d.call(l,m):(null==v?void 0:v.untrustedDefinition)?DOMPurify.sanitize(m):m,t=parse(r);y=transform(t,f)}else{const r=Ast.fromJSON("object"==typeof m.result?JSON.stringify(m.result):m.result);y=(Array.isArray(r),transform(r,f))}else p&&(y=transform(p,f));const A=r=>{const t=renderers.react(r,React,O);return React.createElement(MarkdownWrapper,Object.assign({},c,{children:t,as:"div"}))};if(!u)return A(y);return y=Array.isArray(y)?y:y.children,React.createElement(React.Fragment,null,y.map(((r,t)=>{var o,e,n;return React.createElement(Fragment,{key:(null===(o=null==r?void 0:r.attributes)||void 0===o?void 0:o.id)||t},(e=(r=>{var t;return!1!==(null===(t=r.attributes)||void 0===t?void 0:t.htmlWrap)&&!TAGS_NOT_TO_WRAP.includes(null==r?void 0:r.name)})(r),n=r,e?u(A(n)):A(n)))})))};
+var __rest=this&&this.__rest||function(r,o){var t={};for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&o.indexOf(n)<0&&(t[n]=r[n]);if(null!=r&&"function"==typeof Object.getOwnPropertySymbols){var e=0;for(n=Object.getOwnPropertySymbols(r);e<n.length;e++)o.indexOf(n[e])<0&&Object.prototype.propertyIsEnumerable.call(r,n[e])&&(t[n[e]]=r[n[e]])}return t};import{jsx as _jsx,Fragment as _Fragment}from"react/jsx-runtime";import React,{Fragment}from"react";import{parse,transform,renderers,Ast}from"@markdoc/markdoc";import{useAtomValue}from"jotai";import DOMPurify from"dompurify";import{Markdown as MarkdownWrapper,isString}from"@redocly/theme";import{globalOptionsAtom}from"../../jotai/store";const TAGS_NOT_TO_WRAP=["OpenApiResponse","OpenApiRequestBody"];export const Markdown=r=>{var o,t,n,e,i,s,a,l,d,{source:m,ast:u,htmlWrap:p}=r,c=__rest(r,["source","ast","htmlWrap"]);const v=useAtomValue(globalOptionsAtom);if(!m&&!u)return null;const f=(null==v?void 0:v.markdocOptions)&&{tags:null===(o=v.markdocOptions)||void 0===o?void 0:o.tags,nodes:null===(t=v.markdocOptions)||void 0===t?void 0:t.nodes,partials:null===(n=v.markdocOptions)||void 0===n?void 0:n.partials,variables:null===(e=v.markdocOptions)||void 0===e?void 0:e.variables,functions:null===(i=v.markdocOptions)||void 0===i?void 0:i.functions},O=(null==v?void 0:v.markdocOptions)&&{components:null===(s=v.markdocOptions)||void 0===s?void 0:s.components};let y;if(m)if(isString(m)){const r=(null===(a=null==v?void 0:v.unstable_hooks)||void 0===a?void 0:a.sanitize)?null===(d=null===(l=v.unstable_hooks)||void 0===l?void 0:l.sanitize)||void 0===d?void 0:d.call(l,m):(null==v?void 0:v.sanitize)?DOMPurify.sanitize(m):m,o=parse(r);y=transform(o,f)}else{const r=Ast.fromJSON("object"==typeof m.result?JSON.stringify(m.result):m.result);y=(Array.isArray(r),transform(r,f))}else u&&(y=transform(u,f));const _=r=>{const o=renderers.react(r,React,O);return _jsx(MarkdownWrapper,Object.assign({},c,{children:o,as:"div"}))};if(!p)return _(y);const b=r=>{var o;return!1!==(null===(o=r.attributes)||void 0===o?void 0:o.htmlWrap)&&!TAGS_NOT_TO_WRAP.includes(null==r?void 0:r.name)};return y=Array.isArray(y)?y:y.children,_jsx(_Fragment,{children:y.map(((r,o)=>{var t,n,e;return _jsx(Fragment,{children:(n=b(r),e=r,n?p(_(e)):_(e))},(null===(t=null==r?void 0:r.attributes)||void 0===t?void 0:t.id)||o)}))})};
 //# sourceMappingURL=Markdown.js.map

package/lib-esm/components/Markdown/index.d.ts

@@ -1,3 +1,2 @@
 export { Markdown } from './Markdown';
-export * from './styled';
 export * from './types';

package/lib-esm/components/Markdown/index.js

@@ -1,2 +1,2 @@
-export{Markdown}from"./Markdown";export*from"./styled";export*from"./types";
+export{Markdown}from"./Markdown";export*from"./types";
 //# sourceMappingURL=index.js.map

package/lib-esm/components/Markdown/types.d.ts

@@ -1,9 +1,10 @@
-/// <reference types="react" />
+import type { ReactElement } from 'react';
 import type { Node } from '@markdoc/markdoc';
 export type MarkdownProps = {
     sanitize?: boolean;
+    base?: boolean;
     source?: string | GenericObject;
     ast?: Node[];
     className?: string;
-    htmlWrap?: (part: JSX.Element) => JSX.Element;
+    htmlWrap?: (part: ReactElement) => ReactElement;
 };

package/lib-esm/components/MediaTypeSwitch/MediaTypesSwitch.d.ts

@@ -1,11 +1,11 @@
-import React from 'react';
-import type { DropdownProps } from '../common';
+import type { ReactElement } from 'react';
+import type { SelectProps } from '../common';
 import type { MediaContentModel, MediaTypeModel } from '../../models';
 interface MediaTypesSwitchProps {
     content?: MediaContentModel;
     withLabel?: boolean;
-    renderDropdown: (props: DropdownProps) => JSX.Element | null;
-    children: (activeMime: MediaTypeModel) => JSX.Element;
+    renderSelect: (props: SelectProps) => ReactElement | null;
+    children: (activeMime: MediaTypeModel) => ReactElement;
 }
-export declare const MediaTypesSwitch: React.NamedExoticComponent<MediaTypesSwitchProps>;
+export declare const MediaTypesSwitch: import("react").NamedExoticComponent<MediaTypesSwitchProps>;
 export {};

package/lib-esm/components/MediaTypeSwitch/MediaTypesSwitch.js

@@ -1,2 +1,2 @@
-import React,{memo,useCallback,useRef}from"react";import{useAtom}from"jotai";import{DropdownLabel,DropdownWrapper}from"../PayloadSamples";import{FormControl}from"../common";import{activeMimeNameAtom}from"../../jotai/app";import{getActiveMediaType}from"../../models";function Wrapper({children:e,withLabel:t,innerRef:n}){return t?React.createElement(DropdownWrapper,{ref:n},React.createElement(DropdownLabel,null,"Content type"),e):React.createElement(FormControl,{ref:n},e)}function MediaTypesSwitchComponent({content:e,withLabel:t,renderDropdown:n,children:r}){const[o,a]=useAtom(activeMimeNameAtom),i=useCallback((({value:t})=>{if(!e||!m.current)return null;const n=m.current.getBoundingClientRect().y;a(t),requestAnimationFrame((()=>{if(!m.current||null==n)return;const e=m.current.getBoundingClientRect().y;window.scrollBy(0,e-n)}))}),[e,a]),m=useRef(null);if(!e||!e.mediaTypes||!e.mediaTypes.length)return null;const l=e.mediaTypes.map(((e,t)=>({value:e.name,idx:t}))),c=getActiveMediaType(e,o);return React.createElement(React.Fragment,null,React.createElement(Wrapper,{innerRef:m,withLabel:t},n({value:c.name,options:l,onChange:i,ariaLabel:"Content type"})),r(c))}export const MediaTypesSwitch=memo(MediaTypesSwitchComponent);
+import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";import{memo,useCallback,useRef}from"react";import{useAtom}from"jotai";import{SelectLabel,SelectWrapper}from"../PayloadSamples";import{Container}from"../common";import{activeMimeNameAtom}from"../../jotai/app";import{getActiveMediaType}from"../../models";function Wrapper({children:e,withLabel:t,innerRef:n}){return e?t?_jsxs(SelectWrapper,{ref:n,children:[_jsx(SelectLabel,{children:"Content type"}),e]}):_jsx(Container,{ref:n,children:e}):null}function MediaTypesSwitchComponent({content:e,withLabel:t,renderSelect:n,children:r}){const[i,a]=useAtom(activeMimeNameAtom),o=useCallback((({value:t})=>{if(!e||!m.current)return null;const n=m.current.getBoundingClientRect().y;a(t),requestAnimationFrame((()=>{if(!m.current||null==n)return;const e=m.current.getBoundingClientRect().y;window.scrollBy(0,e-n)}))}),[e,a]),m=useRef(null);if(!e||!e.mediaTypes||!e.mediaTypes.length)return null;const l=e.mediaTypes.map(((e,t)=>({value:e.name,idx:t}))),c=getActiveMediaType(e,i);return _jsxs(_Fragment,{children:[_jsx(Wrapper,{innerRef:m,withLabel:t,children:n({value:c.name,options:l,onChange:o,ariaLabel:"Content type"})}),r(c)]})}export const MediaTypesSwitch=memo(MediaTypesSwitchComponent);
 //# sourceMappingURL=MediaTypesSwitch.js.map

package/lib-esm/components/OperationItem/Description.d.ts

@@ -0,0 +1,10 @@
+import type { OpenAPIExternalDocumentation } from '../../types';
+interface DescriptionProps {
+    description?: string | GenericObject;
+    externalDocs?: OpenAPIExternalDocumentation;
+    extensions: {
+        [p: string]: string | Record<string, unknown>;
+    };
+}
+export declare function Description({ description, externalDocs, extensions }: DescriptionProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/lib-esm/components/OperationItem/Description.js

@@ -0,0 +1,2 @@
+import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";import{Markdown}from"../Markdown";import{ExternalDocumentation}from"../ExternalDocumentation";import{Extensions}from"../common/Extensions";export function Description({description:n,externalDocs:t,extensions:e}){return n?_jsxs(_Fragment,{children:[_jsx(Markdown,{source:n}),t&&_jsx(ExternalDocumentation,{externalDocs:t}),Object.keys(e||{}).length?_jsx(Extensions,{extensions:e}):null]}):null}
+//# sourceMappingURL=Description.js.map

package/lib-esm/components/OperationItem/OperationItem.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
+/// <reference types="react" />
 import type { OperationItemProps } from './types';
-export declare const OperationItem: React.NamedExoticComponent<OperationItemProps>;
+export declare const OperationItem: import("react").NamedExoticComponent<OperationItemProps>;

package/lib-esm/components/OperationItem/OperationItem.js

@@ -1,17 +1,25 @@
-import React,{memo,useCallback}from"react";import styled from"styled-components";import{useAtomValue,useSetAtom}from"jotai";import{H2,useMount,Feedback,LayoutVariant,BeforeOpenApiOperation,BeforeOpenApiOperationSummary,AfterOpenApiOperationSummary,AfterOpenApiOperation}from"@redocly/theme";import{Endpoint}from"../Endpoint";import{Row}from"../common/panels";import{Badge,SamplesMiddlePanel,SamplesPanel,ShareLink}from"../common";import{CallbacksList}from"../Callbacks";import{CallbackSamples}from"../CallbackSamples";import{ExternalDocumentation}from"../ExternalDocumentation";import{Extensions}from"../Fields";import{Markdown}from"../Markdown";import{Parameters}from"../Parameters";import{RequestSamples}from"../RequestSamples";import{OperationResponseList}from"../Responses";import{ResponseSamples}from"../ResponseSamples";import{SecurityRequirements}from"../SecurityRequirement";import{ContentPanel}from"../Panel";import{l}from"../../services";import{createPanelToggleEvent}from"../../events";import{showRightPanelToggleAtom,layoutAtom}from"../../jotai/app";import{globalStoreAtom}from"../../jotai/store";import{getOperation}from"../../models/operation";import{operationStore}from"../../jotai/operation";import{RenderHook}from"../RenderHook";const OperationRow=styled(Row)`
+import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";import{memo,useState,useCallback,useMemo}from"react";import styled from"styled-components";import{useAtomValue}from"jotai";import{Feedback,LayoutVariant,BeforeOpenApiOperation,AfterOpenApiOperation,Badge}from"@redocly/theme";import{SamplesMiddlePanel,SamplesPanel,ShareLink,Row}from"../common";import{CallbacksList}from"../Callbacks";import{CallbackSamples}from"../CallbackSamples";import{RequestSamples}from"../RequestSamples";import{OperationResponseList}from"../Responses";import{ResponseSamples}from"../ResponseSamples";import{makeDeepLink}from"../../services";import{layoutAtom}from"../../jotai/app";import{globalStoreAtom}from"../../jotai/store";import{getOperation}from"../../models/operation";import{RenderHook}from"../RenderHook";import{Heading,Title}from"../common/OperationItemTitle";import{LinkToField}from"../common/LinkToField";import{RequestDetails}from"../Request/RequestDetails";const OperationSamplesPanel=styled(SamplesPanel)`
+  margin-left: auto;
+  --code-block-padding: var(--spacing-xs) 0 var(--spacing-xs) 20px;
+`;function OperationItemComponent({item:{operationDefinition:e,parent:a,href:o}}){var t,s;const{parser:l,options:i}=useAtomValue(globalStoreAtom),n=useAtomValue(layoutAtom),[r,p]=useState(),{unstable_hooks:d,feedback:m}=i,c=useMemo((()=>getOperation(l,e,a,i,o)),[o,e,i,a,l]),{name:u,deprecated:k,isWebhook:x,badges:S}=c,b=n===LayoutVariant.STACKED,f=(null==m?void 0:m.type)||"sentiment",j=!0!==(null==m?void 0:m.hide),h=S.filter((({position:e})=>"before"===e)),_=S.filter((({position:e})=>"after"===e)),[g,O]=useState(null),R=useCallback((e=>{r!==e&&p(e)}),[r]);return _jsxs(OperationRow,{layout:n,children:[_jsx(OperationSubRowStyled,{layout:n,children:_jsxs(SamplesMiddlePanel,{isStacked:b,children:[_jsx(RenderHook,{Hook:BeforeOpenApiOperation||(null==d?void 0:d.BeforeOperation),props:{operation:c}}),_jsxs(Heading,{"data-testid":"operation-item-header",children:[_jsx(ShareLink,{to:o,"aria-label":`link to ${u}`}),h.map((({name:e,color:a})=>_jsx(OperationBadge,{color:a,children:e},e))),u,_.map((({name:e,color:a})=>_jsx(OperationBadge,{color:a,children:e},e))),k&&_jsx(OperationBadge,{deprecated:!0,children:"Deprecated"}),x&&_jsx(OperationBadge,{children:"Webhook"})]})]})}),_jsxs(OperationSubRowStyled,{layout:n,children:[_jsx(SamplesMiddlePanel,{isStacked:b,children:_jsx(RequestDetails,{operation:c})}),_jsx(OperationSamplesPanel,{isStacked:b,"data-testid":"samples-block",className:"panel-container-request-samples",children:_jsx(RequestSamples,{operation:c})})]}),_jsxs(OperationSubRowStyled,{layout:n,children:[_jsx(SamplesMiddlePanel,{isStacked:b,children:(null===(t=c.responses)||void 0===t?void 0:t.length)?_jsx(OperationResponseList,{responses:c.responses,operationId:c.id,operationPointer:c.pointer,callbackId:c.callbackId,activeResponseTab:r,onTabChange:R}):null}),_jsx(OperationSamplesPanel,{isStacked:b,"data-testid":"samples-block",className:"panel-container-response-samples",children:_jsx(ResponseSamples,{operation:c,activeResponseTab:r,onTabChange:R})})]}),_jsxs(OperationSubRowStyled,{layout:n,children:[_jsxs(SamplesMiddlePanel,{isStacked:b,children:[(null===(s=c.callbacks)||void 0===s?void 0:s.length)?_jsxs(_Fragment,{children:[_jsxs(Title,{children:[_jsx(LinkToField,{to:makeDeepLink(c.id,"callbacks")}),"Callbacks"]}),_jsx(CallbacksList,{callbacks:c.callbacks,onExpand:O,selectedCallback:g})]}):null,_jsx(RenderHook,{Hook:AfterOpenApiOperation||(null==d?void 0:d.AfterOperation),props:{operation:c}})]}),g?_jsx(OperationSamplesPanel,{isStacked:b,"data-testid":"samples-block",children:_jsx(CallbackSamples,{callback:g})}):null]}),_jsx(OperationSubRowStyled,{layout:n,children:_jsx(SamplesMiddlePanel,{isStacked:b,fullWidth:!0,children:j?_jsx(FeedbackWrapper,{children:_jsx(Feedback,{type:f,settings:m.settings,path:c.href})}):null})})]})}export const OperationItem=memo(OperationItemComponent);const FeedbackWrapper=styled.div`
+  & > div {
+    flex: 1 1 auto;
+    display: flex;
+    justify-content: center;
+  }
+
+  & > div > div {
+    width: 100%;
+    max-width: var(--feedback-width);
+  }
+`,OperationRow=styled(Row)`
   flex-direction: column;
   align-items: flex-start;
-  ${H2} {
-    position: relative;
-  }
+  padding: var(--spacing-base) 0 calc(var(--spacing-xl) + var(--spacing-xs));
 `,OperationSubRowStyled=styled(Row)`
   margin: calc(var(--spacing-unit) * 2) 0;
-`,Description=styled.div`
-  margin-bottom: calc(var(--spacing-unit) * 4);
-`,OperationSamplesPanel=styled(SamplesPanel)`
-  margin-left: auto;
-`;function OperationItemComponent({item:{operationDefinition:e,parent:t,href:a}}){var o,n,r;const i=useAtomValue(layoutAtom),m=useAtomValue(showRightPanelToggleAtom),{parser:s,options:p}=useAtomValue(globalStoreAtom),{hooks:c,events:d,feedback:u,showWebhookVerb:R,pathInMiddlePanel:S,expandDefaultRequest:E,expandDefaultResponse:f}=p,k=getOperation(s,e,t,p,a),{name:y,description:O,deprecated:b,externalDocs:g,isWebhook:v,httpVerb:h}=k,A=useSetAtom(operationStore(k.pointer)),P=i===LayoutVariant.STACKED||!m,x=(null==u?void 0:u.type)||"sentiment",w=!0!==(null==u?void 0:u.hide);useMount((()=>{A((e=>Object.assign(Object.assign({},e),{activeExampleName:k.activeExampleName,activeServer:k.activeServer})))}));const C=!(!O&&!g),H=useCallback((e=>t=>{var a;const o=createPanelToggleEvent({operation:k,isExpanded:t,panelType:e});null===(a=null==d?void 0:d.panelToggle)||void 0===a||a.call(d,o)}),[d,k]);return React.createElement(OperationRow,{layout:i},React.createElement(OperationSubRowStyled,{layout:i},React.createElement(SamplesMiddlePanel,{isStacked:P},React.createElement(RenderHook,{Hook:BeforeOpenApiOperation||(null==c?void 0:c.BeforeOperation),props:{operation:k}}),React.createElement(H2,null,React.createElement(ShareLink,{to:a}),React.createElement(RenderHook,{Hook:BeforeOpenApiOperationSummary||(null==c?void 0:c.BeforeOperationSummary),props:{operation:k}}),y,React.createElement(RenderHook,{Hook:AfterOpenApiOperationSummary||(null==c?void 0:c.AfterOperationSummary),props:{operation:k}}),b&&React.createElement(Badge,{deprecated:!0},"Deprecated"),v&&React.createElement(React.Fragment,null,React.createElement(Badge,null,"Webhook"),R&&h&&React.createElement(Badge,null,h.toUpperCase()))),S&&!v&&React.createElement(Endpoint,{operation:k}))),React.createElement(OperationSubRowStyled,{layout:i},React.createElement(SamplesMiddlePanel,{isStacked:P},C&&React.createElement(Description,null,void 0!==O&&React.createElement(Markdown,{source:O}),g&&React.createElement(ExternalDocumentation,{externalDocs:g}),Object.keys(k.extensions||{}).length?React.createElement(Extensions,{extensions:k.extensions}):null),React.createElement(SecurityRequirements,{securities:k.security}),(null===(o=k.parameters)||void 0===o?void 0:o.length)||k.requestBody?React.createElement(ContentPanel,{header:l("request"),onToggle:H("request"),expanded:E,className:"panel-request-schemas"},React.createElement(Parameters,{parameters:k.parameters,body:k.requestBody})):null),m?React.createElement(OperationSamplesPanel,{"data-cy":"samples-block"},!S&&!v&&React.createElement(Endpoint,{operation:k}),React.createElement(RequestSamples,{operation:k})):null),React.createElement(OperationSubRowStyled,{layout:i},React.createElement(SamplesMiddlePanel,{isStacked:P},(null===(n=k.responses)||void 0===n?void 0:n.length)?React.createElement(ContentPanel,{header:l("responses"),onToggle:H("responses"),expanded:f,className:"panel-response-schemas"},React.createElement(OperationResponseList,{responses:k.responses,operationPointer:k.pointer})):null),m?React.createElement(OperationSamplesPanel,{"data-cy":"samples-block"},React.createElement(ResponseSamples,{operation:k})):null),React.createElement(OperationSubRowStyled,{layout:i},React.createElement(SamplesMiddlePanel,{isStacked:P},(null===(r=k.callbacks)||void 0===r?void 0:r.length)?React.createElement(ContentPanel,{className:"panel-callback-schemas",header:l("callbacks")},React.createElement(CallbacksList,{callbacks:k.callbacks})):null,React.createElement(RenderHook,{Hook:AfterOpenApiOperation||(null==c?void 0:c.AfterOperation),props:{operation:k}})),m?React.createElement(OperationSamplesPanel,{"data-cy":"samples-block"},React.createElement(CallbackSamples,{callbacks:k.callbacks})):null),React.createElement(OperationSubRowStyled,{layout:i},React.createElement(SamplesMiddlePanel,{isStacked:P},w?React.createElement(FeedbackWrapper,null,React.createElement(Feedback,{type:x,settings:u.settings,path:k.href})):null)))}export const OperationItem=memo(OperationItemComponent);const FeedbackWrapper=styled.div`
-  display: flex;
-  justify-content: center;
+`,OperationBadge=styled(Badge)`
+  margin: 0;
+  background-color: ${({color:e})=>e};
 `;
 //# sourceMappingURL=OperationItem.js.map

package/lib-esm/components/OperationItem/_tests_/OperationItem.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib-esm/components/OperationItem/_tests_/OperationItem.test.js

@@ -0,0 +1,2 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{render}from"@testing-library/react";import{BrowserRouter}from"react-router-dom";import{OperationItem}from"../OperationItem";import{normalizeOptions}from"../../../services";import spec from"./fixtures/petstore.json";import definition from"./fixtures/operationDefinition.json";import{environmentAtom}from"../../../jotai/app";import{globalStoreAtom}from"../../../jotai/store";jest.mock("jotai",(()=>Object.assign(Object.assign({},jest.requireActual("jotai")),{useAtomValue:jest.fn((e=>e===globalStoreAtom?{parser:{definition:spec},options:normalizeOptions({codeSamples:{languages:[{lang:"curl",label:"curl"}]}})}:e===environmentAtom?[{},""]:{})),useAtom:jest.fn((e=>e===environmentAtom?[[{server:{}}],jest.fn()]:[{activeOneOf:{"/paths/~1pet/post":0},requestValues:{},request:{expandedFields:{}},response:{expandedFields:{}},activeLanguage:"curl"},jest.fn()]))}))),describe("OperationItem",(()=>{it("should render badges with correct position",(()=>{const{getByTestId:e}=render(_jsx(OperationItem,{item:{operationDefinition:definition,parent:void 0,href:"test"}}),{wrapper:BrowserRouter}),t=e("operation-item-header").childNodes;expect(t[1].textContent).toBe("Alpha"),expect(t[3].textContent).toBe("Beta"),expect(t[4].textContent).toBe("Gamma")}))}));
+//# sourceMappingURL=OperationItem.test.js.map

package/lib-esm/components/Overlay.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import type { ReactElement } from 'react';
 import type { LicenseInfo } from '../services/check';
 export interface LicenseCheckProps {
     licenseInfo: LicenseInfo;
 }
-export declare const Overlay: ({ licenseInfo }: LicenseCheckProps) => JSX.Element | null;
+export declare const Overlay: ({ licenseInfo }: LicenseCheckProps) => ReactElement | null;

package/lib-esm/components/Overlay.js

@@ -1,4 +1,4 @@
-import React,{useState,useEffect}from"react";import styled from"styled-components";const INVALID_KEY="Invalid license key",INVALID_KEY_MISSING=INVALID_KEY+": missing key",EXPIRED="Invalid license key: expired",TRIAL_EXPIRED=EXPIRED,INVALID_HOST="Invalid license key: host not allowed";export const Overlay=({licenseInfo:e})=>{const[t,l]=useState(null),[a,i]=useState(-1),[n,r]=useState(!1);return useEffect((()=>{var t;e.local?r(!0):(e.valid?e.allowed?e.expired&&l(e.t?EXPIRED:TRIAL_EXPIRED):l(INVALID_HOST):l(!1===e.valid?INVALID_KEY+(e.cryptoMissing?": works only with https":""):INVALID_KEY_MISSING),e.t&&i(Math.ceil(((null!==(t=null==e?void 0:e.e)&&void 0!==t?t:0)-Date.now()/1e3)/60/60/24)))}),[e]),n?React.createElement(TrialWrap,null,React.createElement("a",{href:"https://redoc.ly"},"Redocly API reference docs")," preview"):!t&&a>-1?React.createElement(TrialWrap,null," Trial version: ",a," days remaining "):t?React.createElement(Flash,null,React.createElement("span",null,t," ",React.createElement("br",null),React.createElement("small",null,"Please contact ",React.createElement("a",{href:"mailto:team@redoc.ly"},"team@redoc.ly")," to remedy the problem."," "))):null};const TrialWrap=styled.div`
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useState,useEffect}from"react";import styled from"styled-components";const INVALID_KEY="Invalid license key",INVALID_KEY_MISSING=INVALID_KEY+": missing key",EXPIRED="Invalid license key: expired",TRIAL_EXPIRED=EXPIRED,INVALID_HOST="Invalid license key: host not allowed";export const Overlay=({licenseInfo:e})=>{const[i,s]=useState(null),[t,r]=useState(-1),[l,n]=useState(!1);return useEffect((()=>{var i;e.local?n(!0):(e.valid?e.allowed?e.expired&&s(e.t?EXPIRED:TRIAL_EXPIRED):s(INVALID_HOST):s(!1===e.valid?INVALID_KEY+(e.cryptoMissing?": works only with https":""):INVALID_KEY_MISSING),e.t&&r(Math.ceil(((null!==(i=null==e?void 0:e.e)&&void 0!==i?i:0)-Date.now()/1e3)/60/60/24)))}),[e]),l?_jsxs(TrialWrap,{children:[_jsx("a",{href:"https://redoc.ly",children:"Redocly API reference docs"})," preview"]}):!i&&t>-1?_jsxs(TrialWrap,{children:[" Trial version: ",t," days remaining "]}):i?_jsx(Flash,{children:_jsxs("span",{children:[i," ",_jsx("br",{}),_jsxs("small",{children:["Please contact ",_jsx("a",{href:"mailto:team@redoc.ly",children:"team@redoc.ly"})," to remedy the problem."," "]})]})}):null};const TrialWrap=styled.div`
   padding: 10px 40px;
   position: fixed;
   text-align: right;

package/lib-esm/components/Overview/Overview.d.ts

@@ -0,0 +1,4 @@
+import type { ReactElement } from 'react';
+export declare function Overview({ info }: {
+    info: any;
+}): ReactElement;

package/lib-esm/components/Overview/Overview.js

@@ -0,0 +1,2 @@
+import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";import{CopyButton,NewTabButton,EmailButton}from"@redocly/theme";import{PanelItem,PanelItemDescription,PanelItemsList}from"../PanelItem";export function Overview({info:e}){const t=e.contact&&e.contact.url&&_jsx(PanelItem,{header:_jsx(PanelItemDescription,{children:"URL"}),title:_jsx("a",{href:e.contact.url,target:"_blank",rel:"noreferrer",children:e.contact.url}),actions:[_jsx(NewTabButton,{data:e.contact.url},"NewTabButton")]})||null,n=e.contact&&e.contact.email&&_jsx(PanelItem,{header:_jsx(PanelItemDescription,{children:e.contact.name||"E-mail"}),title:_jsx("a",{href:"mailto:"+e.contact.email,children:e.contact.email}),actions:[_jsx(CopyButton,{data:e.contact.email},"CopyButton"),_jsx(EmailButton,{data:e.contact.email},"EmailButton")]})||null,a=e.license&&_jsx(PanelItem,{header:_jsx(PanelItemDescription,{children:"License"}),title:e.license.identifier?e.license.identifier:_jsx("a",{href:e.license.url,target:"_blank",rel:"noreferrer",children:e.license.name}),actions:[_jsx(NewTabButton,{data:e.license.url},"NewTabButton")]})||null,r=e.termsOfService&&_jsx(PanelItem,{title:_jsx("a",{href:e.termsOfService,target:"_blank",rel:"noreferrer",children:"Terms of Service"}),actions:[_jsx(NewTabButton,{data:e.termsOfService},e.termsOfService)]})||null;return _jsx(_Fragment,{children:_jsxs(PanelItemsList,{children:[t,n,a,r]})})}
+//# sourceMappingURL=Overview.js.map

package/lib-esm/components/Overview/index.d.ts

@@ -0,0 +1 @@
+export { Overview } from './Overview';

package/lib-esm/components/Overview/index.js

@@ -0,0 +1,2 @@
+export{Overview}from"./Overview";
+//# sourceMappingURL=index.js.map

package/lib-esm/components/PageFooter/PageFooter.d.ts

@@ -1,14 +1,3 @@
-import React from 'react';
-import type { HookConfig, Options, Pagination } from '../../services';
-interface PageFooterProps {
-    footerHook?: HookConfig<undefined>;
-    showNextButton: Options['showNextButton'];
-    nextSectionLink?: {
-        name: string;
-        href?: string;
-    };
-    pagination: Pagination;
-}
-export declare function PageFooterComponent({ showNextButton, nextSectionLink, pagination, }: PageFooterProps): React.JSX.Element | null;
-export declare const PageFooter: React.NamedExoticComponent<PageFooterProps>;
-export {};
+/// <reference types="react" />
+export declare function PageFooterComponent(): import("react/jsx-runtime").JSX.Element | null;
+export declare const PageFooter: import("react").MemoExoticComponent<typeof PageFooterComponent>;

package/lib-esm/components/PageFooter/PageFooter.js

@@ -1,2 +1,2 @@
-import{OpenApiFooter}from"@redocly/theme";import React,{memo}from"react";import{useAtomValue}from"jotai";import{NextSectionButton}from"../NextSectionButton";import{globalOptionsAtom}from"../../jotai/store";import{RenderHook}from"../RenderHook";export function PageFooterComponent({showNextButton:o,nextSectionLink:e,pagination:t}){const{hooks:{MiddlePanelFooter:n}}=useAtomValue(globalOptionsAtom);switch(!0){case Boolean(n):return React.createElement(RenderHook,{Hook:n,props:void 0});case Boolean(OpenApiFooter):return React.createElement(OpenApiFooter,null);case Boolean(o&&e):return React.createElement(NextSectionButton,{href:(null==e?void 0:e.href)||"",label:null==e?void 0:e.name,pagination:t});default:return null}}export const PageFooter=memo(PageFooterComponent);
+import{jsx as _jsx}from"react/jsx-runtime";import{OpenApiFooter}from"@redocly/theme";import{memo}from"react";import{useAtomValue}from"jotai";import{globalOptionsAtom}from"../../jotai/store";import{RenderHook}from"../RenderHook";export function PageFooterComponent(){const{unstable_hooks:{MiddlePanelFooter:o}}=useAtomValue(globalOptionsAtom);switch(!0){case Boolean(o):return _jsx(RenderHook,{Hook:o,props:void 0});case Boolean(OpenApiFooter):return _jsx(OpenApiFooter,{});default:return null}}export const PageFooter=memo(PageFooterComponent);
 //# sourceMappingURL=PageFooter.js.map

package/lib-esm/components/Panel/ContentPanel.d.ts

@@ -1,4 +1,2 @@
-export declare const ContentPanel: import("styled-components").StyledComponent<typeof import("@redocly/theme").PanelComponent, any, {
-    'data-component-name': string;
-    className: string;
-}, "className" | "data-component-name">;
+import { Panel } from '@redocly/theme';
+export declare const ContentPanel: import("styled-components").StyledComponent<typeof Panel, any, {}, never>;

package/lib-esm/components/Panel/ResponsePanel.d.ts

@@ -1,8 +1,3 @@
-export declare const StyledResponsePanel: import("styled-components").StyledComponent<typeof import("@redocly/theme").PanelComponent, any, {
-    'data-component-name': string;
-    className: string;
-}, "className" | "data-component-name">;
-export declare const CallbackPanel: import("styled-components").StyledComponent<typeof import("@redocly/theme").PanelComponent, any, {
-    'data-component-name': string;
-    className: string;
-}, "className" | "data-component-name">;
+import { Panel } from '@redocly/theme';
+export declare const StyledResponsePanel: import("styled-components").StyledComponent<typeof Panel, any, {}, never>;
+export declare const CallbackPanel: import("styled-components").StyledComponent<typeof Panel, any, {}, never>;

package/lib-esm/components/Panel/ResponsePanel.js

@@ -1,4 +1,4 @@
-import styled from"styled-components";import{Panel,PanelHeaderTitle}from"@redocly/theme";import{FieldsGroupHeader}from"../common/headers";import{StyledMarkdownSpan}from"../Markdown/styled";import{Trigger}from"./Trigger";export const StyledResponsePanel=styled(Panel)`
+import styled from"styled-components";import{Panel}from"@redocly/theme";import{FieldsGroupHeader}from"../common/headers";import{Trigger}from"./Trigger";export const StyledResponsePanel=styled(Panel)`
   ${FieldsGroupHeader} {
     &:first-child {
       margin-top: 0;
@@ -10,14 +10,13 @@ import styled from"styled-components";import{Panel,PanelHeaderTitle}from"@redocl
     max-width: 100%;
     justify-content: space-between;
   }
-
-  ${PanelHeaderTitle} {
-    ${StyledMarkdownSpan} > p:first-child {
-      margin-left: 4px;
-      display: inline;
-    }
-  }
 `;export const CallbackPanel=styled(StyledResponsePanel)`
+  border-bottom: 1px solid var(--border-color-primary);
+  &:not(:last-child) {
+    margin-bottom: 0;
+    border-radius: 0;
+  }
+
   ${Trigger} {
     max-width: calc(100% - 9px - var(--spacing-unit)); /* shelf icon size and small padding */
     justify-content: flex-start;

package/lib-esm/components/Panel/index.d.ts

@@ -1,8 +1,4 @@
 export * from './Trigger';
 export * from './Description';
-export * from './CodePanel';
-export * from './CodeHeader';
 export * from './ContentPanel';
 export * from './ResponsePanel';
-export * from './Accordion';
-export * from './MiddlePanelWrapper';

package/lib-esm/components/Panel/index.js

@@ -1,2 +1,2 @@
-export*from"./Trigger";export*from"./Description";export*from"./CodePanel";export*from"./CodeHeader";export*from"./ContentPanel";export*from"./ResponsePanel";export*from"./Accordion";export*from"./MiddlePanelWrapper";
+export*from"./Trigger";export*from"./Description";export*from"./ContentPanel";export*from"./ResponsePanel";
 //# sourceMappingURL=index.js.map

package/lib-esm/components/PanelItem/PanelItem.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+export interface PanelItemProps {
+    header?: string | ReactNode;
+    title?: string | ReactNode;
+    actions?: any[];
+    active?: boolean;
+    withCheckmark?: boolean;
+}
+export declare const PanelItem: ({ header, title, actions, active, withCheckmark }: PanelItemProps) => import("react/jsx-runtime").JSX.Element;

package/lib-esm/components/PanelItem/PanelItem.js

@@ -0,0 +1,2 @@
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{PanelItemWrap,Item,Header,Title,ActionsWrap,StyledCheckmarkIcon}from"./styled";export const PanelItem=({header:e,title:s,actions:t,active:r,withCheckmark:a})=>_jsxs(PanelItemWrap,{children:[_jsxs(Item,{children:[e&&("string"==typeof e?_jsx(Header,{children:e}):e),_jsxs(Title,{active:r,suppressHydrationWarning:!0,children:[a&&r&&_jsx(StyledCheckmarkIcon,{})," ",s]})]}),_jsx(ActionsWrap,{children:null==t?void 0:t.map((e=>e))})]});
+//# sourceMappingURL=PanelItem.js.map

package/lib-esm/components/PanelItem/index.d.ts

@@ -0,0 +1,2 @@
+export { PanelItem } from './PanelItem';
+export * from './styled';

package/lib-esm/components/PanelItem/index.js

@@ -0,0 +1,2 @@
+export{PanelItem}from"./PanelItem";export*from"./styled";
+//# sourceMappingURL=index.js.map

package/lib-esm/components/PanelItem/styled.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+export declare const PanelItemWrap: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const Item: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const Header: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const Title: import("styled-components").StyledComponent<"span", any, {
+    active?: boolean | undefined;
+}, never>;
+export declare const ActionsWrap: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PanelItemsList: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PanelItemDescription: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledCheckmarkIcon: import("styled-components").StyledComponent<(props: import("@redocly/theme/lib/icons/types").IconProps) => import("react").JSX.Element, any, {
+    'data-component-name': string;
+} & {
+    color?: string | undefined;
+    size?: string | undefined;
+    className?: string | undefined;
+} & import("react").SVGProps<SVGSVGElement>, "data-component-name">;

package/lib-esm/components/PanelItem/styled.js

@@ -0,0 +1,53 @@
+import styled from"styled-components";import{CheckmarkIcon}from"@redocly/theme";export const PanelItemWrap=styled.span`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0;
+  position: relative;
+  width: 100%;
+`;export const Item=styled.span`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  overflow: hidden;
+`;export const Header=styled.span`
+  text-align: left;
+  color: var(--menu-content-title-color);
+  font-size: var(--h6-font-size);
+  line-height: var(--line-height-xsm);
+`;export const Title=styled.span`
+  margin: 0;
+  color: var(--text-color-secondary);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-weight: ${({active:t})=>t&&"var(--font-weight-medium)"};
+`;export const ActionsWrap=styled.div`
+  display: flex;
+  gap: var(--spacing-xs);
+`;export const PanelItemsList=styled.div`
+  & > span {
+    border-bottom: 1px solid var(--border-color-secondary);
+    margin-bottom: var(--spacing-xs);
+    padding-bottom: var(--spacing-xs);
+  }
+
+  & > span:last-child {
+    border-bottom: none;
+    margin-bottom: 0;
+    padding-bottom: 0;
+  }
+`;export const PanelItemDescription=styled.span`
+  color: var(--text-color-secondary);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+  font-weight: var(--font-weight-medium);
+`;export const StyledCheckmarkIcon=styled(CheckmarkIcon)`
+  width: 14px;
+  height: 14px;
+  position: absolute;
+  left: -18px;
+  bottom: 3px;
+`;
+//# sourceMappingURL=styled.js.map

package/lib-esm/components/PayloadSamples/Example.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import type { ReactElement } from 'react';
 import type { ExampleProps } from './types';
-export declare function Example({ example, mimeType, onCopyClick }: ExampleProps): JSX.Element;
+export declare function Example({ example, mimeType, onCopyClick }: ExampleProps): ReactElement;

package/lib-esm/components/PayloadSamples/Example.js

@@ -1,2 +1,2 @@
-import React from"react";import{ExampleValue}from"./ExampleValue";import{ExternalExample}from"./ExternalExample";export function Example({example:e,mimeType:l,onCopyClick:a}){return void 0===e.value&&e.externalValueUrl?e.externalValueUrl.endsWith(".pdf")?React.createElement(ExampleValue,{value:"PDF file",mimeType:l,encoding:e.encoding,onCopyClick:a}):React.createElement(ExternalExample,{example:e,mimeType:l,onCopyClick:a}):React.createElement(ExampleValue,{value:e.value,mimeType:l,encoding:e.encoding,onCopyClick:a})}
+import{jsx as _jsx}from"react/jsx-runtime";import{ExampleValue}from"./ExampleValue";import{ExternalExample}from"./ExternalExample";export function Example({example:e,mimeType:l,onCopyClick:a}){return void 0===e.value&&e.externalValueUrl?e.externalValueUrl.endsWith(".pdf")?_jsx(ExampleValue,{value:"PDF file",mimeType:l,encoding:e.encoding,onCopyClick:a}):_jsx(ExternalExample,{example:e,mimeType:l,onCopyClick:a}):_jsx(ExampleValue,{value:e.value,mimeType:l,encoding:e.encoding,onCopyClick:a})}
 //# sourceMappingURL=Example.js.map

package/lib-esm/components/PayloadSamples/ExampleValue.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import type { ExampleValueProps } from './types';
-export declare function ExampleValue({ value, mimeType, encoding, onCopyClick, }: ExampleValueProps): JSX.Element;
+export declare function ExampleValue({ value, mimeType, encoding, onCopyClick, }: ExampleValueProps): React.ReactNode;

package/lib-esm/components/PayloadSamples/ExampleValue.js

@@ -1,2 +1,2 @@
-import React from"react";import{CodeBlock,JsonViewer}from"@redocly/theme";import{useAtomValue}from"jotai";import{isFormUrlEncoded,isJsonLike,langFromMime,urlFormEncodePayload}from"../../utils";import{globalOptionsAtom}from"../../jotai/store";export function ExampleValue({value:o,mimeType:e,encoding:l,onCopyClick:r}){const{jsonSampleExpandLevel:t}=useAtomValue(globalOptionsAtom);return isJsonLike(e)?React.createElement(JsonViewer,{data:o,jsonSampleExpandLevel:t,onCopyClick:r}):("object"==typeof o&&(o=isFormUrlEncoded(e)?urlFormEncodePayload(o,l):JSON.stringify(o,null,2)),React.createElement(CodeBlock,{lang:langFromMime(e),source:o,header:{controls:{copy:{onClick:r}}}}))}
+import{jsx as _jsx}from"react/jsx-runtime";import{useAtomValue}from"jotai";import{JsonViewer}from"@redocly/theme";import{isFormUrlEncoded,isJsonLike,langFromMime,urlFormEncodePayload}from"../../utils";import{globalOptionsAtom}from"../../jotai/store";import{StyledCodeBlock}from"./styled";export function ExampleValue({value:o,mimeType:e,encoding:l,onCopyClick:r}){const{jsonSamplesExpandLevel:m}=useAtomValue(globalOptionsAtom);return isJsonLike(e)?_jsx(JsonViewer,{data:o,expandLevel:m,onCopyClick:r}):("object"==typeof o&&(o=isFormUrlEncoded(e)?urlFormEncodePayload(o,l):JSON.stringify(o,null,2)),_jsx(StyledCodeBlock,{lang:langFromMime(e),source:o,header:{className:"code-block-header",controls:{copy:{onClick:r}}}}))}
 //# sourceMappingURL=ExampleValue.js.map

package/lib-esm/components/PayloadSamples/ExternalExample.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import type { ReactElement } from 'react';
 import type { ExampleProps } from './types';
-export declare function ExternalExample({ example, mimeType, onCopyClick }: ExampleProps): JSX.Element;
+export declare function ExternalExample({ example, mimeType, onCopyClick }: ExampleProps): ReactElement;

package/lib-esm/components/PayloadSamples/ExternalExample.js

@@ -1,2 +1,2 @@
-import{CodeBlockContainer}from"@redocly/theme";import React from"react";import{useExternalExample}from"./useExternalExample";import{ExampleValue}from"./ExampleValue";export function ExternalExample({example:e,mimeType:a,onCopyClick:r}){const l=useExternalExample(e,a);return void 0===l?React.createElement("span",null,"Loading..."):l instanceof Error?React.createElement(CodeBlockContainer,null,"Error loading external example: ",React.createElement("br",null),React.createElement("a",{className:"token string",href:e.externalValueUrl,target:"_blank",rel:"noopener noreferrer"},e.externalValueUrl)):React.createElement(ExampleValue,{value:l,mimeType:a,onCopyClick:r})}
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{CodeBlockContainer}from"@redocly/theme";import{useExternalExample}from"./useExternalExample";import{ExampleValue}from"./ExampleValue";export function ExternalExample({example:e,mimeType:r,onCopyClick:a}){const l=useExternalExample(e,r);return void 0===l?_jsx("span",{children:"Loading..."}):l instanceof Error?_jsxs(CodeBlockContainer,{children:["Error loading external example: ",_jsx("br",{}),_jsx("a",{className:"token string",href:e.externalValueUrl,target:"_blank",rel:"noopener noreferrer",children:e.externalValueUrl})]}):_jsx(ExampleValue,{value:l,mimeType:r,onCopyClick:a})}
 //# sourceMappingURL=ExternalExample.js.map

package/lib-esm/components/PayloadSamples/MediaTypeSamples.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
+/// <reference types="react" />
 import type { MediaTypeSamplesProps } from './types';
-export declare const MediaTypeSamples: React.NamedExoticComponent<MediaTypeSamplesProps>;
+export declare const MediaTypeSamples: import("react").NamedExoticComponent<MediaTypeSamplesProps>;

package/lib-esm/components/PayloadSamples/MediaTypeSamples.js

@@ -1,2 +1,4 @@
-import React,{memo}from"react";import merge from"deepmerge";import{NoSampleLabel}from"../shared";import{Markdown}from"../Markdown";import{Example}from"./Example";import{ExampleWrapper}from"./styled";import{ExampleSwitch,useExampleKey}from"../Samples";import{arrayMergeStrategy}from"../../services/utils";function MediaTypeSamplesComponent({mediaType:e,onlyDefaultSample:a,properties:t,onChange:m,onCopyClick:r}){const l=e.examples||{},p=e.name,o=Object.keys(l),{exampleKey:n,defaultExampleName:c}=useExampleKey(e.operation,l),i=1===o.length?Object.values(l)[0]:l[n];if(!o.length)return React.createElement(NoSampleLabel,null,"Sample not available");const s=t?Object.assign(Object.assign({},i),{value:merge(i.value,t,{arrayMerge:arrayMergeStrategy})}):i,y=s.description;return c&&a?React.createElement(React.Fragment,null,s.description&&React.createElement(Markdown,{source:s.description}),React.createElement(Example,{example:s,mimeType:p,onCopyClick:r})):React.createElement(React.Fragment,null,React.createElement(ExampleSwitch,{examples:l,exampleKey:n,onChange:m}),React.createElement(ExampleWrapper,null,y&&React.createElement(Markdown,{source:y}),React.createElement(Example,{example:s,mimeType:p,onCopyClick:r})))}export const MediaTypeSamples=memo(MediaTypeSamplesComponent);
+import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";import{memo}from"react";import merge from"deepmerge";import styled from"styled-components";import{Markdown}from"../Markdown";import{Example}from"./Example";import{ExampleSwitch,useExampleKey}from"../Samples";import{arrayMergeStrategy}from"../../services/utils";import{StyledCodeBlock}from"./styled";function MediaTypeSamplesComponent({mediaType:e,properties:r,onChange:a,onCopyClick:m}){const o=e.examples||e.formExamples||{},s=e.name,t=Object.keys(o),{exampleKey:p}=useExampleKey(e.operation,o),n=1===t.length?Object.values(o)[0]:o[p];if(!t.length)return _jsx(StyledCodeBlock,{lang:"clike",source:"No response example",header:{controls:!1}});const l=r?Object.assign(Object.assign({},n),{value:merge(n.value,r,{arrayMerge:arrayMergeStrategy})}):n,i=l.description;return _jsxs(_Fragment,{children:[_jsx(ExampleSwitch,{examples:o,exampleKey:p,onChange:a}),i&&_jsx(StyledMarkdown,{source:i}),_jsx(Example,{example:l,mimeType:s,onCopyClick:m})]})}const StyledMarkdown=styled(Markdown)`
+  margin: 0 var(--spacing-md) var(--spacing-sm);
+`;export const MediaTypeSamples=memo(MediaTypeSamplesComponent);
 //# sourceMappingURL=MediaTypeSamples.js.map

package/lib-esm/components/PayloadSamples/PayloadSamples.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
+/// <reference types="react" />
 import type { PayloadSamplesProps } from './types';
-export declare const PayloadSamples: React.NamedExoticComponent<PayloadSamplesProps>;
+export declare const PayloadSamples: import("react").NamedExoticComponent<PayloadSamplesProps>;

package/lib-esm/components/PayloadSamples/PayloadSamples.js

@@ -1,2 +1,2 @@
-var __rest=this&&this.__rest||function(e,o){var t={};for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&o.indexOf(a)<0&&(t[a]=e[a]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(a=Object.getOwnPropertySymbols(e);r<a.length;r++)o.indexOf(a[r])<0&&Object.prototype.propertyIsEnumerable.call(e,a[r])&&(t[a[r]]=e[a[r]])}return t};import React,{memo,useCallback}from"react";import{useAtomValue}from"jotai";import{DropdownOrLabel}from"../DropdownOrLabel";import{MediaTypesSwitch}from"../MediaTypeSwitch";import{MimeLabel}from"../shared";import{Dropdown}from"../common/Dropdown";import{MediaTypeSamples}from"./MediaTypeSamples";import{DropdownWrapper}from"./styled";import{activeMimeNameAtom}from"../../jotai/app";import{useActivateExample}from"../../hooks";function PayloadSamplesComponent(e){var{onlyDefaultMimeType:o,content:t}=e,a=__rest(e,["onlyDefaultMimeType","content"]);const r=useActivateExample(t),m=useAtomValue(activeMimeNameAtom),p=o&&m,n=useCallback((e=>p?null:React.createElement(DropdownWrapper,null,React.createElement(DropdownOrLabel,Object.assign({Label:MimeLabel,Dropdown:Dropdown,variant:"dark",fullWidth:!0},e)))),[p]),l=e=>r(e);return React.createElement(MediaTypesSwitch,{content:t,renderDropdown:n},(e=>React.createElement(MediaTypeSamples,Object.assign({key:"samples",mediaType:e},a,{onChange:l}))))}export const PayloadSamples=memo(PayloadSamplesComponent);
+var __rest=this&&this.__rest||function(e,t){var o={};for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&t.indexOf(a)<0&&(o[a]=e[a]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(a=Object.getOwnPropertySymbols(e);r<a.length;r++)t.indexOf(a[r])<0&&Object.prototype.propertyIsEnumerable.call(e,a[r])&&(o[a[r]]=e[a[r]])}return o};import{jsx as _jsx}from"react/jsx-runtime";import{memo,useCallback}from"react";import{useAtomValue}from"jotai";import{SelectOrLabel}from"../SelectOrLabel";import{MediaTypesSwitch}from"../MediaTypeSwitch";import{MimeLabel,Select}from"../common";import{MediaTypeSamples}from"./MediaTypeSamples";import{SelectWrapper,StyledCodeBlock}from"./styled";import{activeMimeNameAtom}from"../../jotai/app";import{useActivateExample}from"../../hooks";function PayloadSamplesComponent(e){var{onlyDefaultMimeType:t,content:o}=e,a=__rest(e,["onlyDefaultMimeType","content"]);const r=useActivateExample(o),l=useAtomValue(activeMimeNameAtom),m=t&&l,i=useCallback((e=>m?null:_jsx(SelectWrapper,{children:_jsx(SelectOrLabel,Object.assign({Label:MimeLabel,Select:Select,variant:"dark",fullWidth:!0},e))})),[m]),p=e=>r(e);return o?_jsx(MediaTypesSwitch,{content:o,renderSelect:i,children:e=>_jsx(MediaTypeSamples,Object.assign({mediaType:e},a,{onChange:p}),"samples")}):_jsx(StyledCodeBlock,{lang:"text",source:"No request payload",header:{controls:!1}})}export const PayloadSamples=memo(PayloadSamplesComponent);
 //# sourceMappingURL=PayloadSamples.js.map

package/lib-esm/components/PayloadSamples/styled.d.ts

@@ -1,3 +1,4 @@
-export declare const DropdownLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const DropdownWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ExampleWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+import { CodeBlock } from '@redocly/theme';
+export declare const SelectLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const SelectWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledCodeBlock: import("styled-components").StyledComponent<typeof CodeBlock, any, {}, never>;

package/lib-esm/components/PayloadSamples/styled.js

@@ -1,4 +1,4 @@
-import styled from"styled-components";export const DropdownLabel=styled.span`
+import styled from"styled-components";import{CodeBlock}from"@redocly/theme";export const SelectLabel=styled.span`
   font-size: 12px;
   position: absolute;
   z-index: 1;
@@ -8,10 +8,15 @@ import styled from"styled-components";export const DropdownLabel=styled.span`
   color: var(--panel-samples-text-color);
   opacity: 0.7;
   font-family: var(--font-family-base);
-`;export const DropdownWrapper=styled.div`
+`;export const SelectWrapper=styled.div`
   position: relative;
-  margin-bottom: 10px;
-`;export const ExampleWrapper=styled.div`
-  margin-top: 5px;
+`;export const StyledCodeBlock=styled(CodeBlock)`
+  border: none;
+  margin: 0;
+
+  .code-block-header {
+    border-bottom: 0;
+    padding-right: var(--spacing-sm);
+  }
 `;
 //# sourceMappingURL=styled.js.map

package/lib-esm/components/PayloadSamples/types.d.ts

@@ -13,7 +13,6 @@ export interface ExampleValueProps extends Pick<MediaTypeSamplesProps, 'onCopyCl
 }
 export interface MediaTypeSamplesProps {
     mediaType: MediaTypeModel;
-    onlyDefaultSample?: boolean;
     properties?: GenericObject;
     onChange: (key: any) => void;
     onCopyClick?: () => void;

package/lib-esm/components/PropertyDetails/DescriptionEnums.d.ts

@@ -0,0 +1,4 @@
+import type { ReactElement } from 'react';
+import type { DescriptionEnumsProps } from './types';
+export declare function DescriptionEnumsComponent({ enums, toggle, showToggleButton, toggleButtonText, type, }: DescriptionEnumsProps): ReactElement;
+export declare const DescriptionEnums: import("react").NamedExoticComponent<DescriptionEnumsProps>;

package/lib-esm/components/PropertyDetails/DescriptionEnums.js

@@ -0,0 +1,10 @@
+import{jsxs as _jsxs,jsx as _jsx,Fragment as _Fragment}from"react/jsx-runtime";import{memo}from"react";import styled from"styled-components";import{Markdown}from"../Markdown";import{DescriptionEnumsBlock}from"./styled";import{ToggleButton}from"../common";const EnumValueStyled=styled.td`
+  word-wrap: break-word;
+  font-size: var(--md-table-font-size);
+`,DescriptionValueStyled=styled.td`
+  & p,
+  p:only-of-type {
+    margin: 0;
+  }
+`;export function DescriptionEnumsComponent({enums:e,toggle:t,showToggleButton:n,toggleButtonText:o,type:r}){return _jsx(_Fragment,{children:_jsx(DescriptionEnumsBlock,{children:_jsxs("table",{className:"md",children:[_jsx("thead",{children:_jsxs("tr",{children:[_jsxs("th",{style:{width:"30%"},children:["array"===r?"Items":""," ",1===e.length?"Value":"Enum Value"]}),_jsx("th",{children:"Description"})]})}),_jsx("tbody",{children:e.map((({description:e,value:t})=>_jsxs("tr",{children:[_jsx(EnumValueStyled,{children:t}),_jsx(DescriptionValueStyled,{children:_jsx(Markdown,{source:e})})]},t)))}),n?_jsx("tfoot",{children:_jsx("tr",{children:_jsx("td",{colSpan:2,children:_jsx(ToggleButton,{onClick:t,children:o})})})}):null]})})})}export const DescriptionEnums=memo(DescriptionEnumsComponent);
+//# sourceMappingURL=DescriptionEnums.js.map

package/lib-esm/components/PropertyDetails/EnumValues.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { EnumValuesProps } from './types';
+export declare const EnumValues: import("react").NamedExoticComponent<EnumValuesProps>;

package/lib-esm/components/PropertyDetails/EnumValues.js

@@ -0,0 +1,2 @@
+import{jsx as _jsx,Fragment as _Fragment}from"react/jsx-runtime";import{useState,memo,useCallback,useMemo}from"react";import{useAtomValue}from"jotai";import{SimpleEnums}from"./SimpleEnums";import{DescriptionEnums}from"./DescriptionEnums";import{globalOptionsAtom}from"../../jotai/store";function getEnums(e){return Array.isArray(e)&&e||Object.entries(e||{}).map((([e,t])=>({value:e,description:t})))}function EnumValuesComponent({values:e,type:t}){const[o,m]=useState(!0),{maxDisplayedEnumValues:n}=useAtomValue(globalOptionsAtom),s=useCallback((()=>{m(!o)}),[o]),r=!Array.isArray(e),u=getEnums(e),l=useMemo((()=>o&&n?u.slice(0,n):u),[u,o,n]);if(!u.length)return null;const a=!!n&&u.length>n,i=n?o?`+${u.length-n} more`:"Hide":"";return _jsx(_Fragment,{children:r?_jsx(DescriptionEnums,{enums:l,toggle:s,showToggleButton:a,toggleButtonText:i,type:t}):_jsx(SimpleEnums,{enums:l,type:t,toggle:s,toggleButtonText:i,showToggleButton:a})})}export const EnumValues=memo(EnumValuesComponent);
+//# sourceMappingURL=EnumValues.js.map

package/lib-esm/components/PropertyDetails/Examples.d.ts

@@ -0,0 +1,5 @@
+import type { FieldModel } from '../../models';
+export declare function Examples({ field }: {
+    field: FieldModel;
+}): import("react/jsx-runtime").JSX.Element | null;
+export declare function getSerializedValue(field: FieldModel, example: any): any;

package/lib-esm/components/PropertyDetails/Examples.js

@@ -0,0 +1,2 @@
+import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";import{ExampleValue,FieldLabel}from"../common";import{normalizeText,serializeParameterValue}from"../../utils";import{ExampleWrap,ExamplesList,ExampleSummary,ExampleDescription}from"./styled";export function Examples({field:e}){return e.examples?_jsxs(_Fragment,{children:[_jsx(FieldLabel,{children:" Examples: "}),_jsx(ExamplesList,{children:Object.entries(e.examples).map((([r,a])=>{const l=normalizeText(a.description);return _jsxs(ExampleWrap,{children:[_jsxs(ExampleSummary,{children:[normalizeText(a.summary)||r," "]}),l&&_jsxs(ExampleDescription,{children:[l," "]}),_jsx(ExampleValue,{children:getSerializedValue(e,a.value)})]},r)}))})]}):null}export function getSerializedValue(e,r){return e.in?decodeURIComponent(serializeParameterValue(e,r)):r}
+//# sourceMappingURL=Examples.js.map

package/lib-esm/components/PropertyDetails/Extensions.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { ExtensionsProps } from './types';
+export declare const Extensions: import("react").NamedExoticComponent<ExtensionsProps>;