@redocly/openapi-docs 3.18.0-next.0 → 3.18.0-next.10

package/lib/components/Callbacks/CallbackDetails.js

@@ -1,6 +1,6 @@
-import{jsx as l,jsxs as s,Fragment as t}from"react/jsx-runtime";import{memo as r,useCallback as m}from"react";import{LinkIcon as p}from"@redocly/theme/icons/LinkIcon/LinkIcon";import{OperationResponseList as d}from"../Responses/index.js";import{RequestDetails as k}from"../Request/RequestDetails.js";import{LinkToField as a}from"../common/LinkToField.js";import{makeDeepLink as c}from"../../services/index.js";import{styled as b}from"../../styled-components.js";function f({operation:e,translate:i}){const n=m(o=>s(h,{children:[l(a,{to:c(e.id,`${e.callbackId}/callback-response&c=${o.key}`)}),i("openapi.callbackResponse","Callback Response")]}),[e.callbackId,e.id,i]);return s(t,{children:[l(k,{operation:e,title:s(t,{children:[l(a,{to:c(e.id,`${e.callbackId}/callback-request`)}),i("openapi.callbackRequest","Callback Request")]})}),e.responses?.length?l(d,{responses:e.responses,operationId:e.id,operationPointer:e.pointer,callbackId:e.callbackId,renderTitle:n}):null]})}const j=r(f),h=b.h4`
+import{jsx as l,jsxs as s,Fragment as t}from"react/jsx-runtime";import{memo as r,useCallback as m}from"react";import{LinkIcon as p}from"@redocly/theme/icons/LinkIcon/LinkIcon";import{OperationResponseList as d}from"../Responses/index.js";import{RequestDetails as k}from"../Request/RequestDetails.js";import{LinkToField as a}from"../common/LinkToField.js";import{makeDeepLink as c}from"../../services/index.js";import{styled as b}from"../../styled-components.js";function h({operation:e,translate:i}){const n=m(o=>s(f,{children:[l(a,{to:c(e.id,`${e.callbackId}/callback-response&c=${o.key}`)}),i("openapi.callbackResponse","Callback Response")]}),[e.callbackId,e.id,i]);return s(t,{children:[l(k,{operation:e,title:s(t,{children:[l(a,{to:c(e.id,`${e.callbackId}/callback-request`)}),i("openapi.callbackRequest","Callback Request")]})}),e.responses?.length?l(d,{responses:e.responses,operationId:e.id,operationPointer:e.pointer,callbackId:e.callbackId,renderTitle:n}):null]})}const j=r(h),f=b.h4`
   position: relative;
-  font-size: var(--font-size-lg);
+  font-size: var(--h4-font-size);
   font-weight: var(--h4-font-weight);
   line-height: var(--h4-line-height);
   padding: 0;

package/lib/components/ExpandAllButton/ExpandAllButton.js

@@ -1,3 +1,3 @@
-import{jsx as n}from"react/jsx-runtime";import{useAtom as m}from"jotai";import{MaximizeIcon as d}from"@redocly/theme/icons/MaximizeIcon/MaximizeIcon";import{Button as c}from"@redocly/theme/components/Button/Button";import{operationStore as x}from"../../jotai/operation.js";import{useTelemetry as u,useTranslate as f}from"../../hooks/index.js";import{styled as A}from"../../styled-components.js";const k=({operationPointer:a,type:e,onPanelToggle:s})=>{const t=f(),[l,r]=m(x(a)),i=u(),p=()=>{const o=!l[e].expandedAll;i.sendExpandCollapseAllClickedMessage({isExpanded:o}),r({[e]:{expandedAll:o}}),s?.(o,e==="request"?"request":"responses")};return n(g,{icon:n(d,{}),iconPosition:"right",size:"small",variant:"ghost",onClick:p,children:l[e].expandedAll?t("openapi.collapseAll","Collapse all"):t("openapi.expandAll","Expand all")})},g=A(c)`
+import{jsx as n}from"react/jsx-runtime";import{useAtom as d}from"jotai";import{MaximizeIcon as m}from"@redocly/theme/icons/MaximizeIcon/MaximizeIcon";import{Button as c}from"@redocly/theme/components/Button/Button";import{operationStore as x}from"../../jotai/operation.js";import{useTelemetry as u,useTranslate as f}from"../../hooks/index.js";import{styled as A}from"../../styled-components.js";const _=({operationPointer:a,type:e,onPanelToggle:s})=>{const l=f(),[t,r]=d(x(a)),i=u(),p=()=>{const o=!t[e].expandedAll;i.sendExpandCollapseAllClickedMessage([{id:`expand-collapse-${e}-panel`,object:"expand_collapse_all",uri:window.location.href,isExpanded:o}]),r({[e]:{expandedAll:o}}),s?.(o,e==="request"?"request":"responses")};return n(g,{icon:n(m,{}),iconPosition:"right",size:"small",variant:"ghost",onClick:p,children:t[e].expandedAll?l("openapi.collapseAll","Collapse all"):l("openapi.expandAll","Expand all")})},g=A(c)`
   margin-left: auto;
-`;export{k as ExpandAllButton};
+`;export{_ as ExpandAllButton};

package/lib/components/Language/LanguageList.js

@@ -1 +1 @@
-import{jsx as a,jsxs as I}from"react/jsx-runtime";import{useLayoutEffect as T,useRef as A,useState as L,useCallback as S,memo as j,useMemo as E}from"react";import{useAtomValue as H,useSetAtom as V}from"jotai";import{Button as W}from"@redocly/theme/components/Button/Button";import{OverflowMenuVerticalIcon as v}from"@redocly/theme/icons/OverflowMenuVerticalIcon/OverflowMenuVerticalIcon";import{LanguageDropdown as D}from"./LanguageDropdown.js";import{languageAtom as R,layoutAtom as _}from"../../jotai/app.js";import{LanguageListContainer as M,LanguageListItem as O,Container as z}from"./styled.js";import{LanguageItem as G}from"./LanguageItem.js";import{DROPDOWN_TRIGGER_WIDTH as B,ITEM_WIDTH as w}from"./constants.js";import{LanguageListSkeleton as N}from"../common/Skeleton/LanguageListSkeleton.js";import{useTelemetry as P}from"../../hooks/index.js";function $({languages:o,activeLanguage:t}){const[n,i]=L([]),[s,l]=L([]),u=P(),f=A(null),g=H(_),h=V(R),p=e=>{u.sendSelectLanguageClickedMessage({language:e})},k=e=>{h(e),p(e)},C=e=>{const m=s.findIndex(r=>r.key===e);if(m!==-1){const r=[...s],c=[...n];y(c,r,m),i(c),l(r),p(e),h(e)}},d=S(()=>{const e=f?.current?.offsetWidth;if(!e)return;const{newVisibleItems:m,newHiddenItems:r}=q(e,[...o]),c=r.findIndex(b=>b.key===t);c!==-1&&y(m,r,c),i(m),l(r)},[t,o]);T(()=>(d(),window.addEventListener("resize",d),()=>{window.removeEventListener("resize",d)}),[g,t]);const x=E(()=>n.length>=5||s.length?"space-between":"start",[s.length,n.length]);return I(z,{ref:f,children:[I(M,{$justifyContent:x,children:[!n.length&&a(N,{}),n.map(e=>a(O,{onClick:()=>k(e.key),active:t===e.key,children:a(G,{item:e,withIcon:!0})},e.key))]}),s.length?a(D,{activeTab:t,samples:s,onChange:C,trigger:a(W,{icon:a(v,{}),variant:"text",style:{height:"100%"}}),withArrow:!1,withCheckmark:!1,width:156}):null]})}const se=j($);function q(o,t){let n=0;const i=[],s=[];return t.forEach((l,u)=>{const g=u===t.length-1&&s.length===0?0:B;o&&n+w+g<=o?(i.push(l),n+=w):s.push(l)}),{newVisibleItems:i,newHiddenItems:s}}function y(o,t,n){const i=o[o.length-1];i&&(o[o.length-1]=t[n],t[n]=i)}export{se as LanguageList};
+import{jsx as a,jsxs as I}from"react/jsx-runtime";import{useLayoutEffect as T,useRef as j,useState as L,useCallback as A,memo as S,useMemo as E}from"react";import{useAtomValue as H,useSetAtom as V}from"jotai";import{Button as W}from"@redocly/theme/components/Button/Button";import{OverflowMenuVerticalIcon as _}from"@redocly/theme/icons/OverflowMenuVerticalIcon/OverflowMenuVerticalIcon";import{LanguageDropdown as v}from"./LanguageDropdown.js";import{languageAtom as D,layoutAtom as R}from"../../jotai/app.js";import{LanguageListContainer as M,LanguageListItem as O,Container as z}from"./styled.js";import{LanguageItem as G}from"./LanguageItem.js";import{DROPDOWN_TRIGGER_WIDTH as B,ITEM_WIDTH as w}from"./constants.js";import{LanguageListSkeleton as N}from"../common/Skeleton/LanguageListSkeleton.js";import{useTelemetry as P}from"../../hooks/index.js";function $({languages:o,activeLanguage:t}){const[n,i]=L([]),[s,l]=L([]),u=P(),g=j(null),f=H(R),h=V(D),p=e=>{u.sendSelectLanguageClickedMessage([{object:"select_language",language:e}])},k=e=>{h(e),p(e)},C=e=>{const m=s.findIndex(r=>r.key===e);if(m!==-1){const r=[...s],c=[...n];y(c,r,m),i(c),l(r),p(e),h(e)}},d=A(()=>{const e=g?.current?.offsetWidth;if(!e)return;const{newVisibleItems:m,newHiddenItems:r}=q(e,[...o]),c=r.findIndex(x=>x.key===t);c!==-1&&y(m,r,c),i(m),l(r)},[t,o]);T(()=>(d(),window.addEventListener("resize",d),()=>{window.removeEventListener("resize",d)}),[f,t]);const b=E(()=>n.length>=5||s.length?"space-between":"start",[s.length,n.length]);return I(z,{ref:g,children:[I(M,{$justifyContent:b,children:[!n.length&&a(N,{}),n.map(e=>a(O,{onClick:()=>k(e.key),active:t===e.key,children:a(G,{item:e,withIcon:!0})},e.key))]}),s.length?a(v,{activeTab:t,samples:s,onChange:C,trigger:a(W,{icon:a(_,{}),variant:"text",style:{height:"100%"}}),withArrow:!1,withCheckmark:!1,width:156}):null]})}const se=S($);function q(o,t){let n=0;const i=[],s=[];return t.forEach((l,u)=>{const f=u===t.length-1&&s.length===0?0:B;o&&n+w+f<=o?(i.push(l),n+=w):s.push(l)}),{newVisibleItems:i,newHiddenItems:s}}function y(o,t,n){const i=o[o.length-1];i&&(o[o.length-1]=t[n],t[n]=i)}export{se as LanguageList};

package/lib/components/OperationItem/OperationItem.js

@@ -1,7 +1,7 @@
-import{jsx as e,jsxs as t,Fragment as V}from"react/jsx-runtime";import{memo as K,useState as F,useCallback as L,useMemo as j}from"react";import{useAtomValue as g}from"jotai";import{LayoutVariant as $}from"@redocly/config";import{AfterOpenApiOperation as z}from"@redocly/theme/components/OpenApiDocs/hooks/AfterOpenApiOperation";import{BeforeOpenApiOperation as G}from"@redocly/theme/components/OpenApiDocs/hooks/BeforeOpenApiOperation";import{PageActions as J}from"@redocly/theme/components/PageActions/PageActions";import{Feedback as Q}from"@redocly/theme/components/Feedback/Feedback";import{SamplesMiddlePanel as s,SamplesPanel as U,ShareLink as X,Row as W,CustomBadges as Y}from"../common/index.js";import{CallbacksList as Z}from"../Callbacks/index.js";import{CallbackSamples as ee}from"../CallbackSamples/index.js";import{RequestSamples as ae}from"../RequestSamples/index.js";import{OperationResponseList as te}from"../Responses/index.js";import{ResponseSamples as oe}from"../ResponseSamples/index.js";import{makeDeepLink as ne,joinWithSeparator as se}from"../../services/index.js";import{layoutAtom as re,userClaimsAtom as ie}from"../../jotai/app.js";import{globalOptionsAtom as le,globalStoreAtom as ce}from"../../jotai/store.js";import{getOperation as pe}from"../../models/operation.js";import{RenderHook as B}from"../RenderHook/index.js";import{Heading as de,HeadingWrapper as me,Title as ge}from"../common/OperationItemTitle.js";import{LinkToField as ke}from"../common/LinkToField.js";import{RequestDetails as he}from"../Request/RequestDetails.js";import{StyledBadge as H}from"../common/Badges.js";import{useTranslate as ue}from"../../hooks/index.js";import{styled as k}from"../../styled-components.js";import{createPanelToggleEvent as be}from"../../events/index.js";import{SchemaCatalogLink as fe}from"../SchemaCatalogLink/SchemaCatalogLink.js";function Se({item:{operationDefinition:S,parent:v,href:h}}){const r=ue(),{parser:y,options:l}=g(ce),{events:x}=g(le),T=g(ie),n=g(re),[c,I]=F(),{unstable_hooks:C,feedback:p}=l,a=j(()=>pe(y,S,v,l,h,void 0,T),[h,S,l,v,y,T]),{name:O,deprecated:_,isWebhook:q,badges:D}=a||{},o=n===$.STACKED,R=p?.type||"sentiment",A=p?.hide!==!0,u=se(l.routingBasePath,a.href),[b,E]=F(null),P=L(m=>{c!==m&&I(m)},[c]),d=L((m,w)=>{if(!w)return;const N=be({operation:a,isExpanded:m,panelType:w});x?.panelToggle?.(N)},[x,a]),M=j(()=>A?e(ve,{children:e(Q,{type:R,settings:p.settings,path:u})}):null,[A,R,p.settings,u]);return t(ye,{layout:n,children:[e(i,{layout:n,children:t(s,{isStacked:o,children:[e(B,{Hook:G||C?.BeforeOperation,props:{operation:a}}),t(me,{children:[t(de,{"data-testid":"operation-item-header",children:[e(X,{to:h,"aria-label":`link to ${O}`}),e(Y,{badges:D,children:O}),_&&e(H,{deprecated:!0,children:r("openapi.badges.deprecated","Deprecated")}),q&&e(H,{children:r("openapi.badges.webhook","Webhook")})]}),e(J,{pageSlug:u})]})]})}),e(s,{isStacked:o,children:e(fe,{schemaRef:"#"+a.pointer})}),t(i,{layout:n,children:[e(s,{isStacked:o,children:e(he,{operation:a,translate:r,onPanelToggle:d})}),e(f,{isStacked:o,"data-testid":"samples-block",className:"panel-container-request-samples",children:e(ae,{operation:a,onPanelToggle:d})})]}),t(i,{layout:n,children:[e(s,{isStacked:o,children:a.responses?.length?e(te,{responses:a.responses,operationId:a.id,operationPointer:a.pointer,callbackId:a.callbackId,activeResponseTab:c,onTabChange:P,onPanelToggle:d}):null}),e(f,{isStacked:o,"data-testid":"samples-block",className:"panel-container-response-samples",children:e(oe,{operation:a,activeResponseTab:c,onTabChange:P,onPanelToggle:d})})]}),t(i,{layout:n,children:[t(s,{isStacked:o,children:[a.callbacks?.length?t(V,{children:[t(ge,{children:[e(ke,{to:ne(a.id,"callbacks")}),r("openapi.callbacks","Callbacks")]}),e(Z,{callbacks:a.callbacks,onExpand:E,selectedCallback:b})]}):null,e(B,{Hook:z||C?.AfterOperation,props:{operation:a}})]}),b?e(f,{isStacked:o,"data-testid":"samples-block",children:e(ee,{callback:b,translate:r})}):null]}),e(i,{layout:n,children:e(s,{isStacked:o,fullWidth:!0,children:M})})]})}const Qe=K(Se),f=k(U)`
+import{jsx as e,jsxs as t,Fragment as V}from"react/jsx-runtime";import{memo as K,useState as L,useCallback as j,useMemo as W}from"react";import{useAtomValue as g}from"jotai";import{LayoutVariant as $}from"@redocly/config";import{AfterOpenApiOperation as z}from"@redocly/theme/components/OpenApiDocs/hooks/AfterOpenApiOperation";import{BeforeOpenApiOperation as G}from"@redocly/theme/components/OpenApiDocs/hooks/BeforeOpenApiOperation";import{PageActions as J}from"@redocly/theme/components/PageActions/PageActions";import{Feedback as Q}from"@redocly/theme/components/Feedback/Feedback";import{SamplesMiddlePanel as s,SamplesPanel as U,ShareLink as X,Row as f,CustomBadges as Y}from"../common/index.js";import{CallbacksList as Z}from"../Callbacks/index.js";import{CallbackSamples as ee}from"../CallbackSamples/index.js";import{RequestSamples as ae}from"../RequestSamples/index.js";import{OperationResponseList as te}from"../Responses/index.js";import{ResponseSamples as oe}from"../ResponseSamples/index.js";import{makeDeepLink as ne,joinWithSeparator as se}from"../../services/index.js";import{layoutAtom as re,userClaimsAtom as ie}from"../../jotai/app.js";import{globalOptionsAtom as le,globalStoreAtom as ce}from"../../jotai/store.js";import{getOperation as pe}from"../../models/operation.js";import{RenderHook as B}from"../RenderHook/index.js";import{Heading as de,HeadingWrapper as me,Title as ge}from"../common/OperationItemTitle.js";import{LinkToField as ke}from"../common/LinkToField.js";import{RequestDetails as be}from"../Request/RequestDetails.js";import{StyledBadge as H}from"../common/Badges.js";import{useTranslate as he}from"../../hooks/index.js";import{styled as i}from"../../styled-components.js";import{createPanelToggleEvent as ue}from"../../events/index.js";import{SchemaCatalogLink as fe}from"../SchemaCatalogLink/SchemaCatalogLink.js";function Se({item:{operationDefinition:v,parent:x,href:b}}){const r=he(),{parser:y,options:l}=g(ce),{events:C}=g(le),T=g(ie),n=g(re),[c,I]=L(),{unstable_hooks:O,feedback:p}=l,a=W(()=>pe(y,v,x,l,b,void 0,T),[b,v,l,x,y,T]),{name:R,deprecated:_,isWebhook:q,badges:D}=a||{},o=n===$.STACKED,A=p?.type||"sentiment",P=p?.hide!==!0,h=se(l.routingBasePath,a.href),[u,E]=L(null),w=j(m=>{c!==m&&I(m)},[c]),d=j((m,F)=>{if(!F)return;const N=ue({operation:a,isExpanded:m,panelType:F});C?.panelToggle?.(N)},[C,a]),M=W(()=>P?e(ve,{children:e(Q,{type:A,settings:p.settings,path:h})}):null,[P,A,p.settings,h]);return t(xe,{layout:n,children:[e(k,{layout:n,children:t(s,{isStacked:o,children:[e(B,{Hook:G||O?.BeforeOperation,props:{operation:a}}),t(me,{children:[t(de,{"data-testid":"operation-item-header",children:[e(X,{to:b,"aria-label":`link to ${R}`}),e(Y,{badges:D,children:R}),_&&e(H,{deprecated:!0,children:r("openapi.badges.deprecated","Deprecated")}),q&&e(H,{children:r("openapi.badges.webhook","Webhook")})]}),e(J,{pageSlug:h})]})]})}),e(s,{isStacked:o,children:e(fe,{schemaRef:"#"+a.pointer})}),t(k,{layout:n,children:[e(s,{isStacked:o,children:e(be,{operation:a,translate:r,onPanelToggle:d})}),e(S,{isStacked:o,"data-testid":"samples-block",className:"panel-container-request-samples",children:e(ae,{operation:a,onPanelToggle:d})})]}),t(k,{layout:n,children:[e(s,{isStacked:o,children:a.responses?.length?e(te,{responses:a.responses,operationId:a.id,operationPointer:a.pointer,callbackId:a.callbackId,activeResponseTab:c,onTabChange:w,onPanelToggle:d}):null}),e(S,{isStacked:o,"data-testid":"samples-block",className:"panel-container-response-samples",children:e(oe,{operation:a,activeResponseTab:c,onTabChange:w,onPanelToggle:d})})]}),t(ye,{layout:n,children:[t(s,{isStacked:o,children:[a.callbacks?.length?t(V,{children:[t(ge,{children:[e(ke,{to:ne(a.id,"callbacks")}),r("openapi.callbacks","Callbacks")]}),e(Z,{callbacks:a.callbacks,onExpand:E,selectedCallback:u})]}):null,e(B,{Hook:z||O?.AfterOperation,props:{operation:a}})]}),u?e(S,{isStacked:o,"data-testid":"samples-block",children:e(ee,{callback:u,translate:r})}):null]}),e(k,{layout:n,children:e(s,{isStacked:o,fullWidth:!0,children:M})})]})}const Ue=K(Se),S=i(U)`
   margin-left: auto;
   --code-block-padding: var(--spacing-xs) 0 var(--spacing-xs) 20px;
-`,ve=k.div`
+`,ve=i.div`
   & > div {
     flex: 1 1 auto;
     display: flex;
@@ -12,10 +12,14 @@ import{jsx as e,jsxs as t,Fragment as V}from"react/jsx-runtime";import{memo as K
     width: 100%;
     max-width: var(--feedback-width);
   }
-`,ye=k(W)`
+`,xe=i(f)`
   flex-direction: column;
   align-items: flex-start;
   padding: var(--spacing-base) 0 calc(var(--spacing-xl) + var(--spacing-xs));
-`,i=k(W)`
-  margin: calc(var(--spacing-unit) * 2) 0;
-`;export{Qe as OperationItem,f as OperationSamplesPanel};
+`,k=i(f)`
+  && {
+    margin: calc(var(--spacing-unit) * 2) 0;
+  }
+`,ye=i(f)`
+  margin-top: var(--spacing-xl);
+`;export{Ue as OperationItem,S as OperationSamplesPanel};

package/lib/components/RedoclyOpenAPIDocs/RedoclyOpenAPIDocs.js

@@ -1 +1 @@
-import{jsx as t,jsxs as s,Fragment as C}from"react/jsx-runtime";import{memo as O,useRef as T,useEffect as w}from"react";import{LayoutVariant as d}from"@redocly/config";import{useSetAtom as A}from"jotai";import{ThreePanelLayout as I}from"@redocly/theme/layouts/ThreePanelLayout";import{SidebarLogo as j}from"@redocly/theme/components/SidebarLogo/SidebarLogo";import{GlobalStyle as M,useMount as N}from"@redocly/theme/core/openapi";import{StoreProvider as _}from"./Providers.js";import{Overlay as D}from"../Overlay.js";import{RedocWrap as V}from"./styled.js";import{StickyResponsiveSidebar as k}from"../StickySidebar/index.js";import{SideMenu as v}from"../SideMenu/index.js";import{Content as B}from"../Content/index.js";import{useContentItems as K,useUppercase2LowercaseRedirect as F,useTelemetry as H,usePerformanceMetrics as U}from"../../hooks/index.js";import{withRouter as Y}from"../../hoc/withRouter.js";import{withStore as G}from"../../hoc/withStore.js";import{compose as W}from"../../utils/index.js";import{useLicense as q}from"../../hooks/useLicense.js";import{allOperationsAtom as z}from"../../jotai/replay.js";const J=W(Y,G,O)(({licenseKey:m,onLoaded:a,children:e,options:o,layout:i,collapsedSidebar:u,parser:c,withCommonStyles:g})=>{const R=T(null),{isValid:l,licenseInfo:S}=q(m),h=A(z),y=H();F();const{contentItems:b,flatItems:f}=K({parser:c,options:o});U({sendTelemetry:p=>{const r=Object.fromEntries(Object.entries(p).map(([E,x])=>[E.toLowerCase(),x]));y.sendPerformanceMetricsMessage({cls:r.cls,lcp:r.lcp,fcp:r.fcp,ttfb:r.ttfb})}}),w(()=>{if(!o.hideReplay&&f.length>0){const p=f.filter(r=>r.type==="operation");h(p)}},[f,o.hideReplay,h]),N(()=>{a?.(),y.sendViewedMessage({layout:i})});const{hideSidebar:P,scrollYOffset:L}=o||{},n=c.definition?.info?.["x-logo"];return s(C,{children:[g&&t(M,{}),s(V,{className:"redoc-wrap",ref:R,children:[!l&&t(D,{licenseInfo:S}),!P&&s(k,{scrollYOffset:L,className:"menu-content",collapsedSidebar:!u,children:[t(j,{imageUrl:n?.url,href:n?.href||c.definition?.info?.contact?.url,altText:n?.altText,backgroundColor:n?.backgroundColor}),t(v,{items:l?b:[]})]}),s(I,{className:"api-content",id:"api-content",layout:i===d.THREE_PANEL?d.THREE_PANEL:d.STACKED,collapsedSidebar:u,children:[t(B,{items:l?b:[],routingBasePath:o.routingBasePath}),e]})]})]})});function he({onLoaded:m,children:a,store:e,withCommonStyles:o,router:i}){return e?.definition?t(_,{...e,children:t(J,{onLoaded:m,basePath:e.options?.routingBasePath,licenseKey:e.options?.licenseKey,disableRouter:e.options?.disableRouter,withCommonStyles:o,router:i,children:a})}):null}export{he as RedoclyOpenAPIDocs};
+import{jsx as t,jsxs as s,Fragment as x}from"react/jsx-runtime";import{memo as C,useRef as O,useEffect as T}from"react";import{LayoutVariant as d}from"@redocly/config";import{useSetAtom as j}from"jotai";import{ThreePanelLayout as A}from"@redocly/theme/layouts/ThreePanelLayout";import{SidebarLogo as I}from"@redocly/theme/components/SidebarLogo/SidebarLogo";import{GlobalStyle as M,useMount as _}from"@redocly/theme/core/openapi";import{StoreProvider as N}from"./Providers.js";import{Overlay as v}from"../Overlay.js";import{RedocWrap as D}from"./styled.js";import{StickyResponsiveSidebar as V}from"../StickySidebar/index.js";import{SideMenu as k}from"../SideMenu/index.js";import{Content as B}from"../Content/index.js";import{useContentItems as K,useUppercase2LowercaseRedirect as F,useTelemetry as H,usePerformanceMetrics as U}from"../../hooks/index.js";import{withRouter as Y}from"../../hoc/withRouter.js";import{withStore as G}from"../../hoc/withStore.js";import{compose as W}from"../../utils/index.js";import{useLicense as q}from"../../hooks/useLicense.js";import{allOperationsAtom as z}from"../../jotai/replay.js";const J=W(Y,G,C)(({licenseKey:m,onLoaded:a,children:e,options:o,layout:i,collapsedSidebar:u,parser:c,withCommonStyles:g})=>{const R=O(null),{isValid:l,licenseInfo:S}=q(m),h=j(z),y=H();F();const{contentItems:b,flatItems:f}=K({parser:c,options:o});U({sendTelemetry:p=>{const r=Object.fromEntries(Object.entries(p).map(([E,w])=>[E.toLowerCase(),w]));y.sendPerformanceMetricsMessage([{object:"metrics",cls:r.cls,lcp:r.lcp,fcp:r.fcp,ttfb:r.ttfb}])}}),T(()=>{if(!o.hideReplay&&f.length>0){const p=f.filter(r=>r.type==="operation");h(p)}},[f,o.hideReplay,h]),_(()=>{a?.(),y.sendViewedMessage([{object:"view_stats",layout:i}])});const{hideSidebar:P,scrollYOffset:L}=o||{},n=c.definition?.info?.["x-logo"];return s(x,{children:[g&&t(M,{}),s(D,{className:"redoc-wrap",ref:R,children:[!l&&t(v,{licenseInfo:S}),!P&&s(V,{scrollYOffset:L,className:"menu-content",collapsedSidebar:!u,children:[t(I,{imageUrl:n?.url,href:n?.href||c.definition?.info?.contact?.url,altText:n?.altText,backgroundColor:n?.backgroundColor}),t(k,{items:l?b:[]})]}),s(A,{className:"api-content",id:"api-content",layout:i===d.THREE_PANEL?d.THREE_PANEL:d.STACKED,collapsedSidebar:u,children:[t(B,{items:l?b:[],routingBasePath:o.routingBasePath}),e]})]})]})});function he({onLoaded:m,children:a,store:e,withCommonStyles:o,router:i}){return e?.definition?t(N,{...e,children:t(J,{onLoaded:m,basePath:e.options?.routingBasePath,licenseKey:e.options?.licenseKey,disableRouter:e.options?.disableRouter,withCommonStyles:o,router:i,children:a})}):null}export{he as RedoclyOpenAPIDocs};

package/lib/components/Request/RequestDetails.js

@@ -1,3 +1,9 @@
-import{jsx as e,jsxs as i,Fragment as v}from"react/jsx-runtime";import{memo as A,useMemo as P}from"react";import{useAtomValue as R}from"jotai";import{Row as q}from"../common/index.js";import{Title as D}from"../common/OperationItemTitle.js";import{LinkToField as E}from"../common/LinkToField.js";import{makeDeepLink as F}from"../../services/index.js";import{Description as M}from"../OperationItem/Description.js";import{Security as N}from"../Security/index.js";import{hasNestedFields as T}from"../../utils/index.js";import{ExpandAllButton as b}from"../ExpandAllButton/index.js";import{RequestParameters as w}from"../RequestParameters/index.js";import{activeMimeNameAtom as y}from"../../jotai/app.js";import{getActiveMediaType as C}from"../../models/mediaContent.js";import{styled as _}from"../../styled-components.js";import{Extensions as I}from"../common/Extensions.js";function L({operation:{id:o,description:m,externalDocs:n,parameters:r,requestBody:t,pointer:l,security:f,extensions:s,callbackId:u},title:d,translate:h,onPanelToggle:x}){const a=R(y),g=P(()=>{const p=r.some(({schema:c})=>!c.isPrimitive&&!c.isCircular);if(!t?.content||p)return p;const{schema:k}=C(t.content,a)||{};return T(k)},[a,r,t?.content]),j=Object.keys(s||{}).length>0;return i(v,{children:[e(q,{children:i(H,{children:[i(D,{children:[o&&e(E,{to:F(o,"request")}),d||h?.("openapi.request","Request"),g&&e(b,{operationPointer:l,type:"request",onPanelToggle:x})]}),e(M,{description:m||n?m:void 0,externalDocs:n}),j&&e(I,{extensions:s}),e(N,{securities:f})]})}),e(w,{parameters:r,body:t,operationId:o,callbackId:u})]})}const H=_.div`
+import{jsx as e,jsxs as o,Fragment as T}from"react/jsx-runtime";import{memo as j,useMemo as k}from"react";import{useAtomValue as A}from"jotai";import{Title as P}from"../common/OperationItemTitle.js";import{LinkToField as y}from"../common/LinkToField.js";import{makeDeepLink as D}from"../../services/index.js";import{Description as E}from"../OperationItem/Description.js";import{Security as F}from"../Security/index.js";import{hasNestedFields as M}from"../../utils/index.js";import{ExpandAllButton as N}from"../ExpandAllButton/index.js";import{RequestParameters as b}from"../RequestParameters/index.js";import{activeMimeNameAtom as C}from"../../jotai/app.js";import{getActiveMediaType as _}from"../../models/mediaContent.js";import{styled as n}from"../../styled-components.js";import{Extensions as w}from"../common/Extensions.js";function I({operation:{id:i,description:s,externalDocs:m,parameters:r,requestBody:t,pointer:u,security:f,extensions:a,callbackId:d},title:x,translate:h,onPanelToggle:g}){const p=A(C),v=k(()=>{const c=r.some(({schema:l})=>!l.isPrimitive&&!l.isCircular);if(!t?.content||c)return c;const{schema:R}=_(t.content,p)||{};return M(R)},[p,r,t?.content]),q=Object.keys(a||{}).length>0;return o(T,{children:[o(L,{children:[o(H,{children:[o(O,{children:[i&&e(y,{to:D(i,"request")}),x||h?.("openapi.request","Request"),v&&e(N,{operationPointer:u,type:"request",onPanelToggle:g})]}),e(E,{description:s||m?s:void 0,externalDocs:m})]}),q&&e(w,{extensions:a}),e(F,{securities:f})]}),e(b,{parameters:r,body:t,operationId:i,callbackId:d})]})}const L=n.div`
   width: 100%;
-`,te=A(L);export{te as RequestDetails};
+`,H=n.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+`,O=n(P)`
+  margin: 0;
+`,te=j(I);export{te as RequestDetails};

package/lib/components/RequestSamples/Example.js

@@ -1 +1 @@
-import{jsx as E,Fragment as h,jsxs as u}from"react/jsx-runtime";import{memo as O}from"react";import{useAtom as g}from"jotai";import{ExampleSwitch as v,useExampleKey as K}from"../Samples/index.js";import{useActivateExample as j,useTelemetry as C}from"../../hooks/index.js";import{operationStore as P}from"../../jotai/operation.js";function b({mediaType:e,mediaContent:m,renderSample:a}){const l=C(),p=e.operation.pointer,[n,x]=g(P(p)),s=e.examples||e.formExamples||{},t=Object.keys(s),i=j(m),{exampleKey:c}=K(e.operation,s),r=t[n.activeOneOf[e?.examplesPointer||e.operation.pointer]]||c;return!t.length||t.length===1?a():u(h,{children:[E(v,{examples:s,exampleKey:r,onChange:o=>{const f=e.examplesPointer&&e.examplesPointer.startsWith(e.operation.pointer)?e.examplesPointer:e.operation.pointer;l.sendExamplesSwitcherClickedMessage({exampleNumber:t.indexOf(o),totalExamples:t.length}),x({...n,activeExampleName:o,activeOneOf:{...n.activeOneOf,[f]:t.indexOf(o)},requestValues:{body:null}}),i(o)}}),a(r)]})}const M=O(b);export{M as Example};
+import{jsx as h,Fragment as u,jsxs as E}from"react/jsx-runtime";import{memo as O}from"react";import{useAtom as g}from"jotai";import{ExampleSwitch as v,useExampleKey as j}from"../Samples/index.js";import{useActivateExample as w,useTelemetry as K}from"../../hooks/index.js";import{operationStore as b}from"../../jotai/operation.js";function C({mediaType:e,mediaContent:l,renderSample:r}){const m=K(),p=e.operation.pointer,[n,i]=g(b(p)),s=e.examples||e.formExamples||{},t=Object.keys(s),x=w(l),{exampleKey:c}=j(e.operation,s),a=t[n.activeOneOf[e?.examplesPointer||e.operation.pointer]]||c;return!t.length||t.length===1?r():E(u,{children:[h(v,{examples:s,exampleKey:a,onChange:o=>{const f=e.examplesPointer&&e.examplesPointer.startsWith(e.operation.pointer)?e.examplesPointer:e.operation.pointer;m.sendExamplesSwitcherClickedMessage([{id:"examples-switcher-request-body",uri:window.location.href,object:"examples_switcher",exampleNumber:t.indexOf(o),totalExamples:t.length}]),i({...n,activeExampleName:o,activeOneOf:{...n.activeOneOf,[f]:t.indexOf(o)},requestValues:{body:null}}),x(o)}}),r(a)]})}const M=O(C);export{M as Example};

package/lib/components/RequestSamples/RequestSamples.js

@@ -1,4 +1,4 @@
-import{jsx as o,jsxs as D}from"react/jsx-runtime";import{memo as T,useCallback as L,useMemo as k}from"react";import{useAtomValue as y,useAtom as U}from"jotai";import{PanelHeader as W}from"@redocly/theme/components/Panel/PanelHeader";import{PayloadSamples as B}from"../PayloadSamples/index.js";import{CodeSample as F}from"./CodeSample.js";import{useCodeSamples as H}from"./useCodeSamples.js";import{isPayloadSample as O}from"../../models/index.js";import{createCodeSampleCopyEvent as _,createLanguageSwitchEvent as V}from"../../events/index.js";import{globalStoreAtom as $}from"../../jotai/store.js";import{ServerListDropdown as z}from"../ServerListDropdown/index.js";import{LanguageDropdown as G}from"../Language/index.js";import{activeMimeNameAtom as J,languageAtom as K}from"../../jotai/app.js";import{Replay as A}from"../Replay/index.js";import{CodeBlockPanel as w}from"../common/index.js";import{useActiveWithFallback as Q,useTelemetry as X}from"../../hooks/index.js";import{operationStore as Y}from"../../jotai/operation.js";import{styled as S}from"../../styled-components.js";function Z({operation:a,disableFooter:P,onPanelToggle:v,...p}){const m=X(),[{activeLanguage:q,languages:c},R]=U(K),{samples:n}=H(a),{parser:d,options:{events:l,corsProxyUrl:g,hideReplay:E}}=y($),i=!P&&!a.isWebhook&&!E&&!a.hideReplay,t=!!c?.length,u=Q(n,q),j=e=>{R(e),m.sendSelectLanguageClickedMessage({language:e});const r=c?.find(s=>s.key===e);if(l?.codeSamplesLanguageSwitch&&r){const s=V({operation:a,sample:{lang:r.lang,label:r.title}});l.codeSamplesLanguageSwitch(s)}},h=y(J),{activeExampleName:C}=y(Y(a.pointer)),f=L(({lang:e,title:r})=>()=>{const s=_({operation:a,label:r,lang:e,type:"request",activeMimeName:h,activeExampleName:C});m.sendCopyCodeSnippetClickedMessage({snippetType:"request",language:e}),l?.codeSamplesCopy?.(s)},[a,m,l,h,C]),x=L(e=>{v?.(e,"request-samples")},[v]),b=()=>D(I,{isExpandable:!1,withReplay:!t&&i,children:[o(ee,{operation:a}),t&&o(G,{activeTab:u,samples:n,onChange:j}),!t&&i&&o(A,{operation:a,corsProxyUrl:g,fullOpenApi:d.definition})]}),M=k(()=>{if(i&&t)return o(ae,{children:o(A,{operation:a,corsProxyUrl:g,fullOpenApi:d.definition})})},[i,t,a,g,d.definition]),N=k(()=>n.map(e=>e.key===u?o("div",{children:O(e)?o(B,{content:e.requestBodyContent,onCopyClick:f(e),onPanelToggle:x,...p}):o(F,{lang:e.lang,source:e.source,externalSample:e,operation:a,onCopyClick:f(e),...p})},e.key+a.id):null),[u,f,x,a,p,n]);return c&&!n.length?o(w,{className:"panel-request-samples",header:b,isExpandable:!1,expanded:!1}):n.length?o(w,{className:"panel-request-samples",header:b,footer:M,isExpandable:!1,children:N}):null}const Ce=T(Z),I=S(W)`
+import{jsx as o,jsxs as D}from"react/jsx-runtime";import{memo as T,useCallback as L,useMemo as k}from"react";import{useAtomValue as y,useAtom as _}from"jotai";import{PanelHeader as U}from"@redocly/theme/components/Panel/PanelHeader";import{PayloadSamples as W}from"../PayloadSamples/index.js";import{CodeSample as B}from"./CodeSample.js";import{useCodeSamples as F}from"./useCodeSamples.js";import{isPayloadSample as H}from"../../models/index.js";import{createCodeSampleCopyEvent as O,createLanguageSwitchEvent as V}from"../../events/index.js";import{globalStoreAtom as $}from"../../jotai/store.js";import{ServerListDropdown as z}from"../ServerListDropdown/index.js";import{LanguageDropdown as G}from"../Language/index.js";import{activeMimeNameAtom as J,languageAtom as K}from"../../jotai/app.js";import{Replay as A}from"../Replay/index.js";import{CodeBlockPanel as w}from"../common/index.js";import{useActiveWithFallback as Q,useTelemetry as X}from"../../hooks/index.js";import{operationStore as Y}from"../../jotai/operation.js";import{styled as S}from"../../styled-components.js";function Z({operation:a,disableFooter:P,onPanelToggle:v,...p}){const m=X(),[{activeLanguage:q,languages:c},R]=_(K),{samples:n}=F(a),{parser:d,options:{events:l,corsProxyUrl:g,hideReplay:j}}=y($),i=!P&&!a.isWebhook&&!j&&!a.hideReplay,t=!!c?.length,u=Q(n,q),E=e=>{R(e),m.sendSelectLanguageClickedMessage([{object:"select_language",language:e}]);const r=c?.find(s=>s.key===e);if(l?.codeSamplesLanguageSwitch&&r){const s=V({operation:a,sample:{lang:r.lang,label:r.title}});l.codeSamplesLanguageSwitch(s)}},h=y(J),{activeExampleName:C}=y(Y(a.pointer)),f=L(({lang:e,title:r})=>()=>{const s=O({operation:a,label:r,lang:e,type:"request",activeMimeName:h,activeExampleName:C});m.sendCopyCodeSnippetClickedMessage([{object:"code_snippet",snippetType:"request",language:e}]),l?.codeSamplesCopy?.(s)},[a,m,l,h,C]),b=L(e=>{v?.(e,"request-samples")},[v]),x=()=>D(I,{isExpandable:!1,withReplay:!t&&i,children:[o(ee,{operation:a}),t&&o(G,{activeTab:u,samples:n,onChange:E}),!t&&i&&o(A,{operation:a,corsProxyUrl:g,fullOpenApi:d.definition})]}),M=k(()=>{if(i&&t)return o(ae,{children:o(A,{operation:a,corsProxyUrl:g,fullOpenApi:d.definition})})},[i,t,a,g,d.definition]),N=k(()=>n.map(e=>e.key===u?o("div",{children:H(e)?o(W,{content:e.requestBodyContent,onCopyClick:f(e),onPanelToggle:b,...p}):o(B,{lang:e.lang,source:e.source,externalSample:e,operation:a,onCopyClick:f(e),...p})},e.key+a.id):null),[u,f,b,a,p,n]);return c&&!n.length?o(w,{className:"panel-request-samples",header:x,isExpandable:!1,expanded:!1}):n.length?o(w,{className:"panel-request-samples",header:x,footer:M,isExpandable:!1,children:N}):null}const Ce=T(Z),I=S(U)`
   flex-wrap: nowrap;
   ${({withReplay:a})=>a&&"padding: var(--spacing-xs) var(--spacing-sm);"}
 `,ee=S(z)`

package/lib/components/ResponseSamples/ResponseSamples.js

@@ -1 +1 @@
-import{jsx as t}from"react/jsx-runtime";import{memo as b,useCallback as i}from"react";import{useAtomValue as n}from"jotai";import{PayloadSamples as h,StyledCodeBlock as v}from"../PayloadSamples/index.js";import{createCodeSampleCopyEvent as k}from"../../events/index.js";import{globalOptionsAtom as T}from"../../jotai/store.js";import{Summary as g}from"./Summary.js";import{Tabs as x}from"../Tabs/index.js";import{CodeBlockPanel as N}from"../common/index.js";import{useTelemetry as A,useTranslate as E}from"../../hooks/index.js";import{activeMimeNameAtom as M}from"../../jotai/app.js";import{operationStore as P}from"../../jotai/operation.js";function R({operation:o,activeResponseTab:d,onTabChange:f,onPanelToggle:a}){const m=A(),{events:r}=n(T),y=E(),C=o.responses.filter(e=>e.content?.hasSample??!1),s=o.responses.map(({code:e})=>({key:e,title:e})),p=s?.find(({key:e})=>e===d)||s?.[0],l=n(M),{activeExampleName:c}=n(P(o.pointer)),u=i(()=>{m.sendCopyCodeSnippetClickedMessage({snippetType:"response"});const e=k({operation:o,type:"response",activeMimeName:l,activeExampleName:c});r?.codeSamplesCopy?.(e)},[m,o,r,l,c]),S=i(e=>{a?.(e,"response-samples")},[a]);return C.length?t(N,{className:"panel-response-samples",header:()=>t(g,{tabs:t(x,{tabs:s,activeTab:p,onChange:e=>f(e.key)})}),isExpandable:!1,children:o.responses.map(e=>e.code===p.key?t("div",{"data-testid":"response-payload-sample",children:e?.content?.hasSample?t(h,{content:e.content,onCopyClick:u,onPanelToggle:S}):t(v,{source:y("openapi.noResponseContent","No content")})},e.code):null)}):null}const J=b(R);export{J as ResponseSamples};
+import{jsx as t}from"react/jsx-runtime";import{memo as b,useCallback as i}from"react";import{useAtomValue as n}from"jotai";import{PayloadSamples as h,StyledCodeBlock as v}from"../PayloadSamples/index.js";import{createCodeSampleCopyEvent as k}from"../../events/index.js";import{globalOptionsAtom as T}from"../../jotai/store.js";import{Summary as g}from"./Summary.js";import{Tabs as x}from"../Tabs/index.js";import{CodeBlockPanel as N}from"../common/index.js";import{useTelemetry as j,useTranslate as A}from"../../hooks/index.js";import{activeMimeNameAtom as E}from"../../jotai/app.js";import{operationStore as M}from"../../jotai/operation.js";function P({operation:o,activeResponseTab:d,onTabChange:f,onPanelToggle:a}){const m=j(),{events:p}=n(T),y=A(),C=o.responses.filter(e=>e.content?.hasSample??!1),s=o.responses.map(({code:e})=>({key:e,title:e})),r=s?.find(({key:e})=>e===d)||s?.[0],l=n(E),{activeExampleName:c}=n(M(o.pointer)),u=i(()=>{m.sendCopyCodeSnippetClickedMessage([{object:"code_snippet",snippetType:"response"}]);const e=k({operation:o,type:"response",activeMimeName:l,activeExampleName:c});p?.codeSamplesCopy?.(e)},[m,o,p,l,c]),S=i(e=>{a?.(e,"response-samples")},[a]);return C.length?t(N,{className:"panel-response-samples",header:()=>t(g,{tabs:t(x,{tabs:s,activeTab:r,onChange:e=>f(e.key)})}),isExpandable:!1,children:o.responses.map(e=>e.code===r.key?t("div",{"data-testid":"response-payload-sample",children:e?.content?.hasSample?t(h,{content:e.content,onCopyClick:u,onPanelToggle:S}):t(v,{source:y("openapi.noResponseContent","No content")})},e.code):null)}):null}const J=b(P);export{J as ResponseSamples};

package/lib/components/Responses/OperationResponseList.js

@@ -1,4 +1,5 @@
-import{jsx as n,jsxs as a,Fragment as v}from"react/jsx-runtime";import{memo as A,useMemo as L}from"react";import{useLocation as j}from"react-router-dom";import{useAtomValue as w}from"jotai";import{Tabs as F,useTabsState as M}from"../Tabs/index.js";import{ResponseDetails as C}from"./ResponseDetails.js";import{makeDeepLink as N}from"../../services/index.js";import{Row as R,StyledTitle as _}from"./styled.js";import{LinkToField as B}from"../common/LinkToField.js";import{pathIncludesLink as c,hasNestedFields as D}from"../../utils/index.js";import{ExpandAllButton as E}from"../ExpandAllButton/index.js";import{useTranslate as P}from"../../hooks/index.js";import{getActiveMediaType as S}from"../../models/index.js";import{activeMimeNameAtom as $}from"../../jotai/app.js";import{styled as I}from"../../styled-components.js";const oe=A(({responses:i,renderTitle:f,operationId:s,operationPointer:d,activeResponseTab:m,onTabChange:u,callbackId:h,onPanelToggle:T})=>{const p=j(),b=P(),l=w($),r=i.map(({code:e})=>({key:e,title:e})),g=r.find(({key:e})=>e===m||c(p,s)&&c(p,`c=${e}`)),{activeTab:k,handleTabChange:x}=M({tabs:r,defaultTab:g?.key,onChange:u}),o=r.find(e=>e.key===(m||k)),t=i.find(e=>e.code===o?.key),y=L(()=>{if(!t?.content)return!1;const{schema:e}=S(t?.content,l)||{};return D(e)},[l,t?.content]);return o?a(v,{children:[a(O,{children:[f?.(o)||a(_,{children:[n(B,{to:N(s,`response&c=${o.key}`)}),b("openapi.responses","Responses")]}),n(F,{tabs:r,activeTab:o,onChange:x}),y&&n(E,{type:"response",operationPointer:d,onPanelToggle:T})]}),t?n("div",{children:n(C,{response:t,operationId:s,callbackId:h})},t.code):null]}):null}),O=I(R)`
+import{jsx as n,jsxs as s,Fragment as v}from"react/jsx-runtime";import{memo as A,useMemo as L}from"react";import{useLocation as j}from"react-router-dom";import{useAtomValue as w}from"jotai";import{Tabs as F,useTabsState as M}from"../Tabs/index.js";import{ResponseDetails as C}from"./ResponseDetails.js";import{makeDeepLink as N}from"../../services/index.js";import{Row as R,StyledTitle as _}from"./styled.js";import{LinkToField as B}from"../common/LinkToField.js";import{pathIncludesLink as c,hasNestedFields as D}from"../../utils/index.js";import{ExpandAllButton as E}from"../ExpandAllButton/index.js";import{useTranslate as P}from"../../hooks/index.js";import{getActiveMediaType as S}from"../../models/index.js";import{activeMimeNameAtom as $}from"../../jotai/app.js";import{styled as I}from"../../styled-components.js";const oe=A(({responses:i,renderTitle:f,operationId:a,operationPointer:d,activeResponseTab:m,onTabChange:u,callbackId:g,onPanelToggle:h})=>{const p=j(),T=P(),l=w($),r=i.map(({code:e})=>({key:e,title:e})),b=r.find(({key:e})=>e===m||c(p,a)&&c(p,`c=${e}`)),{activeTab:k,handleTabChange:x}=M({tabs:r,defaultTab:b?.key,onChange:u}),o=r.find(e=>e.key===(m||k)),t=i.find(e=>e.code===o?.key),y=L(()=>{if(!t?.content)return!1;const{schema:e}=S(t?.content,l)||{};return D(e)},[l,t?.content]);return o?s(v,{children:[s(O,{children:[f?.(o)||s(_,{children:[n(B,{to:N(a,`response&c=${o.key}`)}),T("openapi.responses","Responses")]}),n(F,{tabs:r,activeTab:o,onChange:x}),y&&n(E,{type:"response",operationPointer:d,onPanelToggle:h})]}),t?n("div",{children:n(C,{response:t,operationId:a,callbackId:g})},t.code):null]}):null}),O=I(R)`
   flex-wrap: wrap;
   gap: var(--spacing-unit);
+  margin-top: var(--spacing-xl);
 `;export{oe as OperationResponseList};

package/lib/components/Responses/styled.js

@@ -15,8 +15,10 @@ import{Title as t}from"../common/OperationItemTitle.js";import{Markdown as e}fro
   align-items: center;
   margin-top: var(--spacing-base);
 `,l=i(t)`
-  margin: 0 var(--spacing-sm) 0 0;
-  position: relative;
+  && {
+    margin: 0 var(--spacing-sm) 0 0;
+    position: relative;
+  }
 `,g=i(e)`
   margin-top: var(--spacing-xs);
 `;export{n as HeadersCaption,p as Row,g as StyledDescription,s as StyledHeadersProperties,l as StyledTitle};

package/lib/components/Samples/ExampleSwitch.js

@@ -1 +1 @@
-import{jsx as n}from"react/jsx-runtime";import{useState as d,useEffect as h}from"react";import{MimeLabel as x,Container as v,Select as S}from"../common/index.js";import{SelectOrLabel as b}from"../SelectOrLabel/index.js";import{normalizeText as g}from"../../utils/index.js";import{useTelemetry as C}from"../../hooks/index.js";const L=({exampleKey:a,examples:s,onChange:m,className:i})=>{const c=C(),r=Object.keys(s),t=a?r.indexOf(a):0,[u,l]=d(t>-1?t:0);h(()=>l(t>-1?t:0),[a,t]);const o=r.map((e,f)=>({value:g(s[e].summary)||e,idx:f})),p=({idx:e})=>{c.sendExamplesSwitcherClickedMessage({exampleNumber:e,totalExamples:r.length}),l(e),m(r[e])};return o.length<2?null:n(v,{"data-testid":"example-switch",className:i,children:n(b,{Select:S,Label:x,variant:"dark",fullWidth:!0,options:o,value:o[u]?.value,onChange:p})})};export{L as ExampleSwitch};
+import{jsx as i}from"react/jsx-runtime";import{useState as d,useEffect as p}from"react";import{MimeLabel as h,Container as x,Select as v}from"../common/index.js";import{SelectOrLabel as S}from"../SelectOrLabel/index.js";import{normalizeText as b}from"../../utils/index.js";const O=({exampleKey:o,examples:n,onChange:l,className:c})=>{const a=Object.keys(n),t=o?a.indexOf(o):0,[m,s]=d(t>-1?t:0);p(()=>s(t>-1?t:0),[o,t]);const r=a.map((e,f)=>({value:b(n[e].summary)||e,idx:f})),u=({idx:e})=>{s(e),l(a[e])};return r.length<2?null:i(x,{"data-testid":"example-switch",className:c,children:i(S,{Select:v,Label:h,variant:"dark",fullWidth:!0,options:r,value:r[m]?.value,onChange:u})})};export{O as ExampleSwitch};

package/lib/components/Schema/Schema.js

@@ -1,4 +1,4 @@
-import{jsx as r}from"react/jsx-runtime";import{memo as S}from"react";import{useAtomValue as g}from"jotai";import{useLocation as I}from"react-router-dom";import{ArraySchema as b}from"./ArraySchema.js";import{ObjectSchema as p}from"./ObjectSchema.js";import{OneOfSchema as C}from"./OneOfSchema.js";import{RecursiveSchema as s}from"./RecursiveSchema.js";import{operationStore as j}from"../../jotai/operation.js";import{FieldDetails as A}from"../PropertyDetails/index.js";import{pathIncludesLink as L}from"../../utils/index.js";import{styled as P}from"../../styled-components.js";function k({schema:e,onDiscriminatorChange:u,onOneOfChange:n,...i}){const{activeOneOf:d}=g(j(e?.operationPointer||"")),h=I();if(!e)return null;const{type:t,oneOf:o,discriminatorProp:f,isCircular:O}=e;if(O)return r(s,{schema:e});if(f!==void 0){if(!o||!o.length)return console.warn(`Looks like you are using discriminator wrong: you don't have any definition inherited from the ${e.title}`),null;const m=o.findIndex((N,y)=>L(h,`d=${y}`)),l=m===-1?0:m,x=d[e.pointer]!==void 0?d[e.pointer]:l,a=o[x];return a?.isCircular?r(s,{schema:a}):r(p,{...i,schema:a,discriminator:{fieldName:f,parentSchema:e,activeOneOfIdx:l,onChange:u},onOneOfChange:n})}if(o!==void 0&&o.length>1)return r(C,{...i,schema:e,onChange:n});const c=Array.isArray(t)?t:[t];if(c.includes("object")){if(e.fields?.length)return r(p,{...i,schema:e,onOneOfChange:n})}else if(c.includes("array"))return r(b,{...i,schema:e,onOneOfChange:n});const v={schema:e,name:"",description:i.oneOfLevel?"":e.description,required:!1,deprecated:!1};return r(w,{children:r(A,{field:v,fieldParentsName:i.fieldParentsName})})}const H=S(k),w=P.div`
+import{jsx as r}from"react/jsx-runtime";import{memo as S}from"react";import{useAtomValue as g}from"jotai";import{useLocation as I}from"react-router-dom";import{ArraySchema as b}from"./ArraySchema.js";import{ObjectSchema as p}from"./ObjectSchema.js";import{OneOfSchema as C}from"./OneOfSchema.js";import{RecursiveSchema as s}from"./RecursiveSchema.js";import{operationStore as j}from"../../jotai/operation.js";import{FieldDetails as A}from"../PropertyDetails/index.js";import{pathIncludesLink as L}from"../../utils/index.js";import{styled as P}from"../../styled-components.js";function k({schema:e,onDiscriminatorChange:u,onOneOfChange:n,...i}){const{activeOneOf:d}=g(j(e?.operationPointer||"")),h=I();if(!e)return null;const{type:t,oneOf:o,discriminatorProp:f,isCircular:O}=e;if(O)return r(s,{schema:e});if(f!==void 0){if(!o||!o.length)return console.warn(`Looks like you are using discriminator wrong: you don't have any definition inherited from the ${e.title}`),null;const m=o.findIndex((N,y)=>L(h,`d=${y}`)),l=m===-1?0:m,x=d[e.pointer]!==void 0?d[e.pointer]:l,a=o[x];return a?.isCircular?r(s,{schema:a}):r(p,{...i,schema:a,discriminator:{fieldName:f,parentSchema:e,activeOneOfIdx:l,onChange:u},onOneOfChange:n})}if(o!==void 0&&o.length>=1)return r(C,{...i,schema:e,onChange:n});const c=Array.isArray(t)?t:[t];if(c.includes("object")){if(e.fields?.length)return r(p,{...i,schema:e,onOneOfChange:n})}else if(c.includes("array"))return r(b,{...i,schema:e,onOneOfChange:n});const v={schema:e,name:"",description:i.oneOfLevel?"":e.description,required:!1,deprecated:!1};return r(w,{children:r(A,{field:v,fieldParentsName:i.fieldParentsName})})}const H=S(k),w=P.div`
   width: 100%;
   padding: var(--spacing-xxs) 0;
   border-bottom: 1px solid var(--border-color-primary);

package/lib/components/SchemaDefinition/SchemaDefinition.js

@@ -1,3 +1,6 @@
-import{jsx as o,jsxs as S}from"react/jsx-runtime";import{memo as C,useCallback as M,useMemo as k}from"react";import{LayoutVariant as A}from"@redocly/config";import{useAtom as j,useAtomValue as x}from"jotai";import{useWriteAtom as T}from"../../jotai/use-write-atom.js";import{SamplesMiddlePanel as D,SamplesPanel as E,Row as N,Section as b,CodeBlockPanel as P}from"../common/index.js";import{getMediaType as w}from"../../models/index.js";import{MediaTypeSamples as I}from"../PayloadSamples/index.js";import{Schema as L}from"../Schema/index.js";import{Markdown as V}from"../Markdown/index.js";import{layoutAtom as W}from"../../jotai/app.js";import{globalStoreAtom as _}from"../../jotai/store.js";import{operationStore as O}from"../../jotai/operation.js";import{styled as $}from"../../styled-components.js";import{SchemaCatalogLink as B}from"../SchemaCatalogLink/SchemaCatalogLink.js";const K=(t,i)=>{if(!t)return{};const n={schema:{$ref:t}};return i&&(n.examples={example:{$ref:i}}),n};function q({schemaRef:t,exampleRef:i,showReadOnly:n=!0,showWriteOnly:v=!1}){const s=x(W),{parser:c,options:p}=x(_),l=T(),e=k(()=>w(c,"json",!1,K(t,i),p,{operation:{pointer:"SchemaDefinitionComponent"}}),[i,p,c,t]),[f,d]=j(O(e.operation?.pointer)),y=M(r=>{if(!e.schema)return;const a=e.schema,u=a.oneOf;if(u&&e?.examples&&Object.keys(e?.examples).includes(r)){const m=u.findIndex(g=>g.title===r);m!==-1&&a&&l(O(a.operationPointer),{activeExampleName:a.oneOf?.[m]?.title,activeOneOf:{[a.pointer]:m}})}f.activeExampleName!==r&&d({activeExampleName:r})},[e?.examples,e.schema,f.activeExampleName,d,l]),h=s===A.STACKED;return o(b,{children:S(N,{layout:s,children:[S(D,{isStacked:h,children:[t&&o(B,{schemaRef:t}),e.schema?.description&&o(z,{children:o(V,{source:e.schema?.description})}),o(L,{skipWriteOnly:!v,skipReadOnly:!n,schema:e.schema,level:1})]}),o(E,{isStacked:h,children:o(P,{className:"panel-response-samples",children:o(I,{mediaType:e,onChange:y})})})]})})}const ne=C(q),z=$.div`
+import{jsx as o,jsxs as S}from"react/jsx-runtime";import{memo as C,useCallback as k,useMemo as A}from"react";import{LayoutVariant as j}from"@redocly/config";import{useAtom as D,useAtomValue as x}from"jotai";import{useWriteAtom as N}from"../../jotai/use-write-atom.js";import{SamplesMiddlePanel as T,SamplesPanel as E,Row as P,Section as b,CodeBlockPanel as w}from"../common/index.js";import{getMediaType as I}from"../../models/index.js";import{MediaTypeSamples as L}from"../PayloadSamples/index.js";import{Schema as V}from"../Schema/index.js";import{Markdown as W}from"../Markdown/index.js";import{layoutAtom as _}from"../../jotai/app.js";import{globalStoreAtom as $}from"../../jotai/store.js";import{operationStore as O}from"../../jotai/operation.js";import{styled as g}from"../../styled-components.js";import{SchemaCatalogLink as B}from"../SchemaCatalogLink/SchemaCatalogLink.js";const K=(t,i)=>{if(!t)return{};const n={schema:{$ref:t}};return i&&(n.examples={example:{$ref:i}}),n};function q({schemaRef:t,exampleRef:i,showReadOnly:n=!0,showWriteOnly:v=!1}){const s=x(_),{parser:c,options:p}=x($),l=N(),e=A(()=>I(c,"json",!1,K(t,i),p,{operation:{pointer:"SchemaDefinitionComponent"}}),[i,p,c,t]),[d,f]=D(O(e.operation?.pointer)),y=k(r=>{if(!e.schema)return;const a=e.schema,u=a.oneOf;if(u&&e?.examples&&Object.keys(e?.examples).includes(r)){const m=u.findIndex(M=>M.title===r);m!==-1&&a&&l(O(a.operationPointer),{activeExampleName:a.oneOf?.[m]?.title,activeOneOf:{[a.pointer]:m}})}d.activeExampleName!==r&&f({activeExampleName:r})},[e?.examples,e.schema,d.activeExampleName,f,l]),h=s===j.STACKED;return o(b,{className:"schema-definition",children:S(P,{layout:s,children:[S(F,{isStacked:h,children:[t&&o(B,{schemaRef:t}),e.schema?.description&&o(z,{children:o(W,{source:e.schema?.description})}),o(V,{skipWriteOnly:!v,skipReadOnly:!n,schema:e.schema,level:1})]}),o(E,{isStacked:h,children:o(w,{className:"panel-response-samples",children:o(L,{mediaType:e,onChange:y})})})]})})}const re=C(q),z=g.div`
   margin-bottom: var(--spacing-vertical);
-`;export{ne as SchemaDefinition};
+`,F=g(T)`
+  padding-left: 0;
+  padding-right: 0;
+`;export{re as SchemaDefinition};

package/lib/components/SectionContent/SectionContent.js

@@ -1,13 +1,15 @@
-import{jsx as t,jsxs as s,Fragment as x}from"react/jsx-runtime";import{useMemo as p}from"react";import{useAtomValue as d}from"jotai";import{LayoutVariant as c}from"@redocly/config";import{breakpoints as k}from"@redocly/theme/core/openapi";import{OpenApiHeader as u}from"@redocly/theme/components/OpenApiDocs/hooks/OpenApiHeader";import{PageFooter as v}from"../PageFooter/index.js";import{globalOptionsAtom as b}from"../../jotai/store.js";import{RenderHook as y}from"../RenderHook/index.js";import{RightPanel as C}from"../RightPanel/index.js";import{layoutAtom as w}from"../../jotai/app.js";import{Row as B,SamplesMiddlePanel as j,SamplesPanel as M}from"../common/index.js";import{Items as f}from"../ContentItems/Items.js";import{ContentItem as g}from"../ContentItem/index.js";import{styled as m}from"../../styled-components.js";function G({items:e,hideFooterAndHeader:n}){const{unstable_hooks:{MiddlePanelHeader:a},routingBasePath:i}=d(b),l=d(w),o=l===c.STACKED,P=p(()=>n?null:t(h,{isStacked:o,children:t(v,{})}),[n,o]),S=p(()=>n||!u&&!a?null:t(h,{isStacked:o,children:a?t(y,{Hook:a,props:void 0}):t(u,{})}),[a,n,o]);return e.length===0?null:s(x,{children:[S,s(B,{layout:l,children:[t(R,{layout:l,children:e.filter(({type:r})=>r==="section").map(r=>t(g,{item:r,routingBasePath:i,children:t(f,{items:r.items,routingBasePath:i})},r.id))}),t(_,{isStacked:o,tabIndex:0,children:t(C,{item:e[0]})})]}),e.filter(({type:r})=>r!=="section").map(r=>t(g,{item:r,routingBasePath:i,children:t(f,{items:r.items,routingBasePath:i})},r.id)),P]})}const h=m(j)`
+import{jsx as t,jsxs as m,Fragment as x}from"react/jsx-runtime";import{useMemo as p}from"react";import{useAtomValue as d}from"jotai";import{LayoutVariant as c}from"@redocly/config";import{breakpoints as S}from"@redocly/theme/core/openapi";import{OpenApiHeader as u}from"@redocly/theme/components/OpenApiDocs/hooks/OpenApiHeader";import{PageFooter as k}from"../PageFooter/index.js";import{globalOptionsAtom as b}from"../../jotai/store.js";import{RenderHook as w}from"../RenderHook/index.js";import{RightPanel as y}from"../RightPanel/index.js";import{layoutAtom as C}from"../../jotai/app.js";import{Row as B,SamplesMiddlePanel as R,SamplesPanel as j}from"../common/index.js";import{Items as f}from"../ContentItems/Items.js";import{ContentItem as g}from"../ContentItem/index.js";import{styled as l}from"../../styled-components.js";function J({items:e,hideFooterAndHeader:n}){const{unstable_hooks:{MiddlePanelHeader:a},routingBasePath:i}=d(b),s=d(C),o=s===c.STACKED,P=p(()=>n?null:t(h,{isStacked:o,children:t(k,{})}),[n,o]),v=p(()=>n||!u&&!a?null:t(h,{isStacked:o,children:a?t(w,{Hook:a,props:void 0}):t(u,{})}),[a,n,o]);return e.length===0?null:m(x,{children:[v,m(A,{layout:s,children:[t(M,{layout:s,children:e.filter(({type:r})=>r==="section").map(r=>t(g,{item:r,routingBasePath:i,children:t(f,{items:r.items,routingBasePath:i})},r.id))}),t(_,{isStacked:o,tabIndex:0,children:t(y,{item:e[0]})})]}),e.filter(({type:r})=>r!=="section").map(r=>t(g,{item:r,routingBasePath:i,children:t(f,{items:r.items,routingBasePath:i})},r.id)),P]})}const h=l(R)`
   align-self: flex-start;
   padding-top: var(--panel-gap-vertical);
   padding-bottom: var(--panel-gap-vertical);
-`,R=m.div`
+`,M=l.div`
   width: 100%;
 
-  @media screen and (min-width: ${k.large}) {
+  @media screen and (min-width: ${S.large}) {
     width: ${({layout:e})=>e===c.STACKED?"100%":"calc(100% - var(--panel-samples-width))"};
   }
-`,_=m(M)`
+`,_=l(j)`
   margin: var(--spacing-base) 0;
-`;export{_ as RightPanelContainer,R as SectionContainer,G as SectionContent};
+`,A=l(B)`
+  padding-bottom: var(--spacing-xl);
+`;export{_ as RightPanelContainer,M as SectionContainer,J as SectionContent};

package/lib/components/SectionItem/SectionItem.js

@@ -1 +1 @@
-import{jsx as t,Fragment as l,jsxs as p}from"react/jsx-runtime";import{memo as d}from"react";import{LayoutVariant as u}from"@redocly/config";import{SamplesMiddlePanel as a,Row as f}from"../common/index.js";import{Markdown as h}from"../Markdown/index.js";import{ExternalDocumentation as x}from"../ExternalDocumentation/index.js";function S({item:o,layout:s}){const{externalDocs:r,ast:c,description:i}=o,e=s===u.STACKED,n=!o.parent||o.parent.type!=="tag";return p(l,{children:[t(h,{ast:c,source:i,htmlWrap:m=>t(a,{compact:!0,fullWidth:n,isStacked:e,children:m})}),r&&t(f,{children:t(a,{compact:!0,fullWidth:n,isStacked:e,children:t(x,{externalDocs:r})})})]})}const _=d(S);export{_ as SectionItem};
+import{jsx as t,Fragment as l,jsxs as p}from"react/jsx-runtime";import{memo as d}from"react";import{LayoutVariant as f}from"@redocly/config";import{SamplesMiddlePanel as a,Row as u}from"../common/index.js";import{Markdown as h}from"../Markdown/index.js";import{ExternalDocumentation as x}from"../ExternalDocumentation/index.js";function S({item:o,layout:s}){const{externalDocs:r,ast:i,description:c}=o,e=s===f.STACKED,n=!o.parent||o.parent.type!=="tag";return p(l,{children:[t(h,{ast:i,source:c,htmlWrap:m=>t(a,{fullWidth:n,isStacked:e,children:m})}),r&&t(u,{children:t(a,{compact:!0,fullWidth:n,isStacked:e,children:t(x,{externalDocs:r})})})]})}const _=d(S);export{_ as SectionItem};

package/lib/components/Security/OAuthScopes.d.ts

@@ -1,11 +1,11 @@
 import type { PropsWithChildren } from 'react';
-import type { OpenAPISecurityScheme } from '../../types/index.js';
 import type { SecurityRequirement } from '../../models/index.js';
-type Flow = OpenAPISecurityScheme['flows'];
+import type { OAuth2Flow, OAuth2Flows } from '../../types/index.js';
 interface OAuthScopesMainProps {
     id: string;
     securities: SecurityRequirement[];
-    flows?: Flow;
+    flow?: OAuth2Flow;
+    flows?: OAuth2Flows;
 }
 export declare const OAuthScopes: import("react").NamedExoticComponent<PropsWithChildren<OAuthScopesMainProps>>;
 export {};

package/lib/components/Security/OAuthScopes.js

@@ -1,33 +1,34 @@
-import{jsx as r,Fragment as p,jsxs as c}from"react/jsx-runtime";import{memo as S,useState as v}from"react";import{ChevronRightIcon as b}from"@redocly/theme/icons/ChevronRightIcon/ChevronRightIcon";import{Markdown as d}from"../Markdown/index.js";import{SecuritySchemeItem as a}from"./SecuritySchemeItem.js";import{Tag as m}from"./styled.js";import{useTranslate as l}from"../../hooks/index.js";import{getOptionalScopes as O,getRequiredScopes as x}from"./helper.js";import{styled as i}from"../../styled-components.js";function y({id:e,securities:t,flows:n}){const o=x(e,t);return c(p,{children:[r(w,{flows:n,requiredScopes:o}),r(q,{flows:n,requiredScopes:o})]})}function q({flows:e,requiredScopes:t}){return e&&Object.keys(e).map(n=>r(j,{flow:e[n],requiredScopes:t},n))}function j({flow:e,requiredScopes:t}){const n=l(),[o,h]=v(!1),f=Object.keys(e?.scopes||{}),u=O(t,f);return u.length===0?null:c(p,{children:[r(a,{label:c(A,{onClick:()=>{h(s=>!s)},children:[n(o?"openapi.hideOptionalScopes":"openapi.showOptionalScopes",o?"Hide optional scopes":"Show optional scopes"),r(C,{isOpen:o,children:r(b,{size:"var(--font-size-base)",color:"var(--tree-content-color-default)"})})]}),value:" "}),r(z,{isOpen:o,children:u.map(s=>r(a,{label:r(g,{className:"tag-grey",children:s}),value:r(d,{source:e?.scopes[s]||""})},s))})]})}function w({requiredScopes:e,flows:t}){const n=l();return e.length===0?null:t&&Object.keys(t).length>0?Object.keys(t).map(o=>r(k,{flow:t[o],requiredScopes:e},o)):r(a,{label:n("openapi.requiredScopes","Required scopes"),value:r(R,{children:e.map(o=>r(m,{className:"tag-grey",children:o},o))})})}function k({flow:e,requiredScopes:t}){const n=l();return c(p,{children:[r(a,{label:n("openapi.requiredScopes","Required scopes"),value:" "}),t.map(o=>r(a,{label:r(g,{className:"tag-grey",children:o}),value:r(d,{source:e?.scopes[o]||""})},o))]})}const g=i(m)`
+import{jsx as o,jsxs as c,Fragment as g}from"react/jsx-runtime";import{memo as f,useState as u}from"react";import{ChevronRightIcon as S}from"@redocly/theme/icons/ChevronRightIcon/ChevronRightIcon";import{Markdown as h}from"../Markdown/index.js";import{SecuritySchemeItem as l}from"./SecuritySchemeItem.js";import{Tag as v}from"./styled.js";import{useTranslate as x}from"../../hooks/index.js";import{getOptionalScopes as y,getRequiredScopes as O}from"./helper.js";import{styled as t}from"../../styled-components.js";import{ScopeTagWithTooltip as b}from"./ScopeTagWithTooltip.js";import{RequiredScopesList as w}from"./RequiredScopesList.js";import{normalizeScopes as C}from"../../utils/security-scope.js";const j=24;function q({id:e,securities:n,flow:a,flows:r}){const i=O(e,n);return a?o(z,{flow:a,requiredScopes:i}):o(I,{children:o(w,{schemeId:e,securities:n,flows:r})})}function z({flow:e,requiredScopes:n}){const a=x(),[r,i]=u(!1),m=Object.keys(e.scopes||{}),d=C(n),p=y(d,m);return p.length===0?null:c(g,{children:[o(l,{label:c(R,{onClick:()=>{i(s=>!s)},children:[a(r?"openapi.hideOptionalScopes":"openapi.showOptionalScopes",r?"Hide optional scopes":"Show optional scopes"),o(_,{isOpen:r,children:o(S,{size:"var(--font-size-base)",color:"var(--tree-content-color-default)"})})]}),value:" "}),o(T,{isOpen:r,children:p.map(s=>o(l,{label:o(b,{className:"tag-grey",text:s,maxChars:j,TagComponent:A,compact:!0}),value:o(W,{children:o(h,{source:e.scopes[s]||""})})},s))})]})}const A=t(v)`
   font-family: var(--font-family-base);
   font-size: var(--font-size-base);
-  line-height: var(--line-height-base);
   align-self: flex-start;
   padding: 0 var(--spacing-xs);
   border: var(--tag-border-width) var(--tag-border-style) var(--tag-bg-color);
   border-radius: var(--tag-border-radius);
-`,A=i.div`
+  color: var(--color-warm-grey-8);
+`,R=t.div`
   cursor: pointer;
   display: flex;
   gap: var(--spacing-xxs);
   align-items: center;
   user-select: none;
-`,R=i.div`
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--spacing-xxs);
-  word-break: normal;
-`,z=i.div`
+`,T=t.div`
   max-height: ${e=>e.isOpen?"1000px":"0"};
   opacity: ${e=>e.isOpen?"1":"0"};
   overflow: hidden;
   transition:
     max-height 0.5s ease-in-out,
     opacity 0.5s ease-in-out;
-`,C=i.span`
+`,_=t.span`
   display: inline-flex;
   align-items: center;
   justify-content: center;
   transform: ${e=>e.isOpen?"rotate(90deg)":"rotate(0deg)"};
   transition: transform 0.5s ease-in-out;
-`,B=S(y);export{B as OAuthScopes};
+`,I=t.div`
+  margin-top: var(--spacing-xs);
+`,W=t.div`
+  p {
+    margin-bottom: 0;
+  }
+`,G=f(q);export{G as OAuthScopes};

package/lib/components/Security/RequiredScopes.d.ts

@@ -0,0 +1,6 @@
+import type { ReactElement } from 'react';
+interface RequiredScopesProps {
+    scopes?: string[];
+}
+export declare function RequiredScopes({ scopes }: RequiredScopesProps): ReactElement | null;
+export {};

package/lib/components/Security/RequiredScopes.js

@@ -0,0 +1,17 @@
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{styled as o}from"../../styled-components.js";import{normalizeScopes as m}from"../../utils/security-scope.js";import{useTranslate as g}from"../../hooks/index.js";import{ScopeTagWithTooltip as c}from"./ScopeTagWithTooltip.js";const l=4,S=32;function j({scopes:d}){const t=g(),s=m(d);if(s.length===0)return null;const h=s.slice(0,l),a=s.slice(l),n=a.length;return r(x,{children:[e(p,{children:"("}),r(u,{children:[t("openapi.requiredScopes","Required scopes"),":"," "]}),r(f,{children:[h.map(i=>e(c,{className:"tag-grey",text:i,maxChars:S},i)),n>0&&e(c,{arrowPosition:"left",className:"tag-grey",text:`+${n}`,tip:e(v,{children:a.map(i=>e("div",{children:i},i))}),ariaLabel:t("openapi.showMoreScopes",`Show ${n} more scopes`)})]}),e(p,{children:")"})]})}const x=o.span`
+  display: inline;
+  margin-left: var(--spacing-xxs);
+`,u=o.span`
+  color: var(--color-warm-grey-8);
+  line-height: var(--line-height-base);
+`,f=o.span`
+  display: inline;
+  padding: 0 var(--spacing-xxs);
+`,v=o.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xxs);
+`,p=o.span`
+  color: var(--text-color-description);
+  line-height: var(--line-height-base);
+`;export{j as RequiredScopes};

package/lib/components/Security/RequiredScopesList.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentType, ReactElement, ReactNode } from 'react';
+import type { SecurityRequirement } from '../../models/index.js';
+import type { OAuth2Flows } from '../../types/index.js';
+interface RequiredScopesListProps {
+    schemeId: string;
+    securities: SecurityRequirement[];
+    flows?: OAuth2Flows;
+    TagComponent?: ComponentType<{
+        className?: string;
+        children: ReactNode;
+    }>;
+}
+export declare function RequiredScopesList({ schemeId, securities, flows, TagComponent, }: RequiredScopesListProps): ReactElement | null;
+export {};

package/lib/components/Security/RequiredScopesList.js

@@ -0,0 +1,13 @@
+import{jsx as r,Fragment as g,jsxs as u}from"react/jsx-runtime";import{SecuritySchemeItem as s}from"./SecuritySchemeItem.js";import{useTranslate as f}from"../../hooks/index.js";import{getRequiredScopes as S}from"./helper.js";import{normalizeScopes as b,buildScopeDescriptionIndex as v}from"../../utils/security-scope.js";import{ScopeTagWithTooltip as x}from"./ScopeTagWithTooltip.js";import{Tag as h}from"./styled.js";import{Markdown as y}from"../Markdown/index.js";import{styled as i}from"../../styled-components.js";const T=24;function A({schemeId:n,securities:m,flows:o,TagComponent:c=q}){const p=f(),l=S(n,m),t=b(l);if(t.length===0)return null;const a=o?v(o):null,d=!!a;return u(g,{children:[r(s,{label:p("openapi.requiredScopes","Required scopes"),value:" "}),t.map(e=>r(s,{label:r(x,{className:"tag-grey",text:e,maxChars:T,TagComponent:c,compact:!0}),value:d?r(_,{children:r(y,{source:a?.get(e)||""})}):" "},e))]})}const _=i.div`
+  p {
+    margin-bottom: 0;
+  }
+`,q=i(h)`
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-base);
+  align-self: flex-start;
+  padding: 0 var(--spacing-xs);
+  border: var(--tag-border-width) var(--tag-border-style) var(--tag-bg-color);
+  border-radius: var(--tag-border-radius);
+  color: var(--color-warm-grey-8);
+`;export{A as RequiredScopesList};

package/lib/components/Security/ScopeTagWithTooltip.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentType, ReactElement, ReactNode } from 'react';
+type TagComponentProps = {
+    className?: string;
+    children: ReactNode;
+};
+interface ScopeTagWithTooltipProps {
+    className?: string;
+    text: string;
+    maxChars?: number;
+    tip?: string | ReactNode;
+    ariaLabel?: string;
+    TagComponent?: ComponentType<TagComponentProps>;
+    arrowPosition?: 'left' | 'right' | 'center';
+    compact?: boolean;
+}
+export declare function ScopeTagWithTooltip({ className, text, maxChars, tip, ariaLabel, TagComponent, arrowPosition, compact, }: ScopeTagWithTooltipProps): ReactElement;
+export {};

package/lib/components/Security/ScopeTagWithTooltip.js

@@ -0,0 +1,33 @@
+import{jsx as e}from"react/jsx-runtime";import{css as l}from"styled-components";import{Tooltip as h}from"@redocly/theme/components/Tooltip/Tooltip";import{styled as a}from"../../styled-components.js";import{getVisibleScopeLabel as b,isScopeTruncated as v}from"../../utils/security-scope.js";import{Tag as g}from"./styled.js";function k({className:i,text:r,maxChars:n=32,tip:s,ariaLabel:f,TagComponent:t=g,arrowPosition:u="center",compact:o=!1}){const c=b(r,n),d=s===void 0&&v(r,n)?r:s;return d?e(m,{$compact:o,children:e(h,{placement:"bottom",arrowPosition:u,tip:d,children:e(T,{role:"button",tabIndex:0,"aria-label":f??r,children:e(t,{className:i,children:e(p,{$compact:o,children:c})})})})}):e(m,{$compact:o,children:e(t,{className:i,children:e(p,{$compact:o,children:c})})})}const p=a.span`
+  display: inline-flex;
+  font-family: var(--font-family-base);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 16rem;
+  color: var(--color-warm-grey-8);
+  ${({$compact:i})=>!i&&l`
+      &&& {
+        font-size: var(--font-size-sm);
+      }
+    `}
+`,T=a.span`
+  cursor: default;
+
+  &:focus-visible {
+    outline: 1px solid var(--link-color-primary);
+    border-radius: var(--border-radius-md);
+  }
+`,m=a.span`
+  display: inline-block;
+  vertical-align: baseline;
+  line-height: var(--line-height-base);
+  ${({$compact:i})=>i?l`
+          margin: 0;
+        `:l`
+          margin: calc(var(--spacing-unit) / 2) var(--spacing-xxs) calc(var(--spacing-unit) / 2) 0;
+          &:last-child {
+            margin-right: 0;
+          }
+        `}
+`;export{k as ScopeTagWithTooltip};

package/lib/components/Security/Security.js

@@ -1 +1 @@
-import{jsx as r,Fragment as f,jsxs as y}from"react/jsx-runtime";import{useState as h,useRef as C}from"react";import{Portal as b}from"@redocly/theme/components/Portal/Portal";import{useModalScrollLock as w}from"@redocly/theme/core/openapi";import{SecurityButton as M}from"./SecurityButton.js";import{SecurityModal as S}from"./SecurityModal.js";import{useTelemetry as g}from"../../hooks/index.js";function _({securities:t}){const[i,c]=h(!1),l=g(),e=C(null);if(w(i),!t.length)return null;const m=()=>{const o=t.flatMap(s=>s.schemes),n=[...new Set(o.map(s=>s.type))],u=o.length,a=n.length>1,p=Date.now();e.current={securityTypes:n,schemesCount:u,isCombined:a,modalOpenTime:p},l.sendViewSecurityDetailsClickedMessage({id:"openapi-docs-security-button",object:"button",uri:window.location.href,securityTypes:n,schemesCount:u,isCombined:a}),c(!0)},d=()=>{if(e.current){const o=Date.now()-e.current.modalOpenTime;l.sendViewSecurityDetailsClosedMessage({id:"openapi-docs-security-button",object:"button",uri:window.location.href,securityTypes:e.current.securityTypes,schemesCount:e.current.schemesCount,isCombined:e.current.isCombined,timeInModalMs:o}),e.current=null}c(!1)};return y(f,{children:[r(M,{securities:t,onClick:m}),i&&r(b,{mountId:"api-content",children:r(S,{securities:t,onClose:d})})]})}export{_ as Security};
+import{jsx as r,Fragment as f,jsxs as y}from"react/jsx-runtime";import{useState as h,useRef as C}from"react";import{Portal as b}from"@redocly/theme/components/Portal/Portal";import{useModalScrollLock as w}from"@redocly/theme/core/openapi";import{SecurityButton as M}from"./SecurityButton.js";import{SecurityModal as S}from"./SecurityModal.js";import{useTelemetry as g}from"../../hooks/index.js";function _({securities:t}){const[i,c]=h(!1),l=g(),e=C(null);if(w(i),!t.length)return null;const m=()=>{const o=t.flatMap(s=>s.schemes),n=[...new Set(o.map(s=>s.type))],u=o.length,a=n.length>1,p=Date.now();e.current={securityTypes:n,schemesCount:u,isCombined:a,modalOpenTime:p},l.sendViewSecurityDetailsClickedMessage([{id:"openapi-docs-security-button",object:"button",uri:window.location.href,securityTypes:n,schemesCount:u,isCombined:a}]),c(!0)},d=()=>{if(e.current){const o=Date.now()-e.current.modalOpenTime;l.sendViewSecurityDetailsClosedMessage([{id:"openapi-docs-security-button",object:"button",uri:window.location.href,securityTypes:e.current.securityTypes,schemesCount:e.current.schemesCount,isCombined:e.current.isCombined,timeInModalMs:o}]),e.current=null}c(!1)};return y(f,{children:[r(M,{securities:t,onClick:m}),i&&r(b,{mountId:"api-content",children:r(S,{securities:t,onClose:d})})]})}export{_ as Security};

package/lib/components/Security/SecurityButton.js

@@ -1,15 +1,14 @@
-import{jsx as r,jsxs as o}from"react/jsx-runtime";import{Fragment as d}from"react";import{SecurityIcon as v}from"@redocly/theme/icons/SecurityIcon/SecurityIcon";import{Panel as u}from"@redocly/theme/components/Panel/Panel";import{Button as h}from"@redocly/theme/components/Button/Button";import{Tooltip as y}from"@redocly/theme/components/Tooltip/Tooltip";import{WarningFilledIcon as b}from"@redocly/theme/icons/WarningFilledIcon/WarningFilledIcon";import{useTranslate as x}from"../../hooks/index.js";import{styled as e}from"../../styled-components.js";import{deprecatedCss as w}from"../common/index.js";function N({securities:a,onClick:m}){const i=x();return r(j,{header:()=>o(k,{children:[r(v,{}),r(B,{children:i("openapi.security","Security")}),r(T,{onClick:m,variant:"link",children:i("openapi.viewSecurityDetails","View details")})]}),isExpandable:!1,children:r(C,{children:a.map((t,n)=>{const s=a.length>1&&t.schemes.length>1,f=t.schemes.map(({id:l,deprecated:c=!1},g)=>o(d,{children:[o(S,{deprecated:c,children:[l,c&&r(y,{tip:i("openapi.badges.deprecated","Deprecated"),children:r(b,{color:"var(--badge-deprecated-bg-color)"})})]}),g<t.schemes.length-1&&r(p,{children:" and "})]},l));return o(d,{children:[s?"(":"",f,s?")":"",n<a.length-1&&r(p,{children:" or "})]},n)})})})}const S=e.span`
-  ${({deprecated:a})=>a&&w}
-  display: flex;
+import{jsx as e,jsxs as i}from"react/jsx-runtime";import{Fragment as d}from"react";import{SecurityIcon as v}from"@redocly/theme/icons/SecurityIcon/SecurityIcon";import{Panel as u}from"@redocly/theme/components/Panel/Panel";import{Button as b}from"@redocly/theme/components/Button/Button";import{Tooltip as y}from"@redocly/theme/components/Tooltip/Tooltip";import{WarningFilledIcon as x}from"@redocly/theme/icons/WarningFilledIcon/WarningFilledIcon";import{useTranslate as w}from"../../hooks/index.js";import{styled as r}from"../../styled-components.js";import{deprecatedCss as S}from"../common/index.js";import{RequiredScopes as j}from"./RequiredScopes.js";function W({securities:a,onClick:m}){const o=w();return e(T,{header:()=>i(B,{children:[e(v,{}),e(D,{children:o("openapi.security","Security")}),e(C,{onClick:m,variant:"link",children:o("openapi.viewSecurityDetails","View details")})]}),isExpandable:!1,children:e(H,{children:a.map((t,n)=>{const s=a.length>1&&t.schemes.length>1,h=t.schemes.map(({id:l,scopes:g,deprecated:c=!1},f)=>i(d,{children:[i(k,{deprecated:c,children:[l,c&&e(y,{tip:o("openapi.badges.deprecated","Deprecated"),children:e(x,{color:"var(--badge-deprecated-bg-color)"})})]}),e(j,{scopes:g}),f<t.schemes.length-1&&e(p,{children:" and "})]},l));return i(d,{children:[s?"(":"",h,s?")":"",n<a.length-1&&e(p,{children:" or "})]},n)})})})}const k=r.span`
+  ${({deprecated:a})=>a&&S}
+  display: inline-flex;
   align-items: center;
   gap: var(--spacing-xxs);
-  display: inline-flex;
-};
-`,j=e(u)`
+  font-weight: var(--font-weight-medium);
+`,T=r(u)`
   margin-top: var(--spacing-base);
   border: var(--panel-border);
   border-radius: var(--panel-border-radius);
-`,k=e.div`
+`,B=r.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -19,19 +18,20 @@ import{jsx as r,jsxs as o}from"react/jsx-runtime";import{Fragment as d}from"reac
   background-color: var(--layer-color);
   border-bottom: var(--panel-border);
   border-radius: var(--panel-border-radius) var(--panel-border-radius) 0 0;
-`,T=e(h)`
+`,C=r(b)`
   margin-left: auto;
   font-size: var(--font-size-sm);
-`,B=e.span`
+`,D=r.span`
   font-family: var(--font-family-base);
   font-weight: var(--font-weight-medium);
   color: var(--text-color-primary);
-`,C=e.div`
-  flex: 1;
-  text-overflow: ellipsis;
+`,H=r.div`
+  display: block;
   overflow: hidden;
   padding: var(--spacing-xs) var(--spacing-sm);
   color: var(--text-color-primary);
-`,p=e.span`
+  line-height: var(--line-height-base);
+`,p=r.span`
   color: var(--text-color-description);
-`;export{N as SecurityButton};
+  line-height: var(--line-height-base);
+`;export{W as SecurityButton};

package/lib/components/Security/SecurityFlow.js

@@ -1,21 +1,34 @@
-import{jsx as e,Fragment as m,jsxs as t}from"react/jsx-runtime";import{Badge as S}from"@redocly/theme/components/Badge/Badge";import{SecuritySchemeItem as a}from"./SecuritySchemeItem.js";import{titleize as w}from"../../utils/index.js";import{OAuthFlow as y}from"./OAuthFlow.js";import{StyledLink as d}from"./styled.js";import{Markdown as F}from"../Markdown/index.js";import{useTranslate as T}from"../../hooks/index.js";import{OAuthScopes as k}from"./OAuthScopes.js";import{styled as n}from"../../styled-components.js";function N({type:o,bearerFormat:h,name:u,flows:i,openIdConnectUrl:l,description:f,id:p,securities:g,in:b,deprecated:v=!1,oauth2MetadataUrl:s}){const r=T();if(!o||!p)return null;const x={http:t(m,{children:[e(a,{label:r("openapi.httpAuthorizationScheme","HTTP Authorization Scheme"),value:o}),e(a,{label:r("openapi.bearerFormat","Bearer Format"),value:h})]}),apiKey:e(a,{label:`${w(b||"")} ${r("openapi.parameterName","parameter name")}:`,value:u}),oauth2:t(m,{children:[e(a,{label:r("openapi.flowType","Flow type"),value:o}),i&&Object.keys(i).map(c=>e(y,{flow:i[c]},c))]}),openIdConnect:e(a,{label:r("openapi.connectUrl","Connect URL"),value:l&&e(d,{target:"_blank",rel:"noopener noreferrer",href:l,children:l})})};return t(j,{children:[t(z,{children:[e(_,{children:p}),v&&e(S,{deprecated:!0,children:r("openapi.badges.deprecated","Deprecated")})]}),e(F,{source:f}),s&&e(a,{label:r("openapi.oauth2MetadataUrl","OAuth2 Metadata URL"),value:e(d,{target:"_blank",rel:"noopener noreferrer",href:s,children:s})}),t(A,{children:[x[o]||null,e(k,{id:p,securities:g,flows:i})]})]})}const z=n.div`
+import{jsx as e,jsxs as r,Fragment as p}from"react/jsx-runtime";import{Badge as z}from"@redocly/theme/components/Badge/Badge";import{SecuritySchemeItem as n}from"./SecuritySchemeItem.js";import{titleize as A}from"../../utils/index.js";import{OAuthFlow as L}from"./OAuthFlow.js";import{StyledLink as v,Tag as O}from"./styled.js";import{Markdown as _}from"../Markdown/index.js";import{useTranslate as w}from"../../hooks/index.js";import{OAuthScopes as b}from"./OAuthScopes.js";import{styled as o}from"../../styled-components.js";import{RequiredScopesList as g}from"./RequiredScopesList.js";const j=["authorizationCode","clientCredentials","implicit","password","deviceAuthorization"];function k({flowType:l,flow:m,schemeId:h,securities:a}){const c=w();return r(p,{children:[e(n,{label:r(H,{className:"tag-grey",children:[e(N,{children:c("openapi.flowType","Flow type")})," ",e(P,{children:l})]}),value:e("span",{})}),r(C,{children:[e(L,{flow:m}),e(b,{id:h,securities:a,flow:m})]})]})}function V({type:l,bearerFormat:m,name:h,flows:a,openIdConnectUrl:c,description:y,id:t,securities:s,in:x,deprecated:T=!1,oauth2MetadataUrl:f}){const i=w();if(!l||!t)return null;const F={http:r(p,{children:[e(n,{label:i("openapi.httpAuthorizationScheme","HTTP Authorization Scheme"),value:l}),e(n,{label:i("openapi.bearerFormat","Bearer Format"),value:m}),e(g,{schemeId:t,securities:s,flows:a})]}),apiKey:r(p,{children:[e(n,{label:`${A(x||"")} ${i("openapi.parameterName","parameter name")}:`,value:h}),e(g,{schemeId:t,securities:s,flows:a})]}),oauth2:r(p,{children:[a&&Object.entries(a).filter(d=>{const[u,S]=d;return!!S&&j.includes(u)}).map(([d,u])=>e(k,{flowType:d,flow:u,schemeId:t,securities:s},d)),e(b,{id:t,securities:s,flows:a})]}),openIdConnect:r(p,{children:[e(n,{label:i("openapi.connectUrl","Connect URL"),value:c&&e(v,{target:"_blank",rel:"noopener noreferrer",href:c,children:c})}),e(g,{schemeId:t,securities:s,flows:a})]})};return r(W,{children:[r(I,{children:[e(R,{children:t}),T&&e(z,{deprecated:!0,children:i("openapi.badges.deprecated","Deprecated")})]}),e(_,{source:y}),f&&e(n,{label:i("openapi.oauth2MetadataUrl","OAuth2 Metadata URL"),value:e(v,{target:"_blank",rel:"noopener noreferrer",href:f,children:f})}),e(B,{children:F[l]||null})]})}const I=o.div`
   display: flex;
   align-items: center;
   gap: var(--spacing-xxs);
   margin: 0 0 var(--spacing-xs);
-`,j=n.div`
+`,W=o.div`
   background: var(--layer-color);
   padding: var(--spacing-base);
   border-radius: var(--border-radius);
   border: 1px solid var(--border-color-secondary);
   width: 100%;
   margin-top: var(--spacing-base);
-`,A=n.div`
+`,B=o.div`
   width: 100%;
   margin-top: var(--spacing-md);
-`,_=n.p`
+`,R=o.p`
   font-size: var(--font-size-base);
   margin: 0;
   text-transform: capitalize;
   font-weight: var(--font-weight-semibold);
-`;export{N as SecurityFlow};
+`,C=o.div`
+  display: flex;
+  flex-direction: column;
+  padding-left: var(--spacing-xs);
+  margin-bottom: var(--spacing-xxs);
+`,H=o(O)`
+  color: var(--color-warm-grey-8);
+  font-family: var(--font-family-base);
+`,N=o.span`
+  font-weight: var(--font-weight-regular);
+`,P=o.span`
+  color: var(--color-warm-grey-11);
+  font-weight: var(--font-weight-medium);
+`;export{V as SecurityFlow};