@redocly/openapi-docs 3.18.0-next.6 → 3.18.0-next.7

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/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/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/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/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?: 'top' | 'bottom' | '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/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};

package/lib/components/TagItem/TagItem.js

@@ -1,59 +1,72 @@
-import{jsx as r,jsxs as t}from"react/jsx-runtime";import{memo as w,useCallback as $}from"react";import{useNavigate as y}from"react-router-dom";import{useAtomValue as z}from"jotai";import{LayoutVariant as j}from"@redocly/config";import{css as M}from"styled-components";import{Markdown as p}from"@redocly/theme/components/Markdown/Markdown";import{breakpoints as T}from"@redocly/theme/core/openapi";import{Button as C}from"@redocly/theme/components/Button/Button";import{PageActions as I}from"@redocly/theme/components/PageActions/PageActions";import{H2 as A}from"@redocly/theme/components/Typography/H2";import{LinkIcon as L}from"@redocly/theme/icons/LinkIcon/LinkIcon";import{joinWithSeparator as P}from"../../services/history/helpers.js";import{Row as W,SamplesMiddlePanel as m,SamplesPanel as f,ShareLink as B}from"../common/index.js";import{Markdown as D}from"../Markdown/index.js";import{OperationsNavigation as H}from"./OperationsNavigation.js";import{layoutAtom as N}from"../../jotai/app.js";import{useTranslate as V}from"../../hooks/index.js";import{styled as l}from"../../styled-components.js";import{StyledShareLink as _}from"../common/linkify.js";function E({item:a,routingBasePath:i="",isExpanded:d}){const v=V(),{description:o,name:s,href:S}=a,c=y(),g=z(N),e=P(i,a.href),x=$(()=>{c(e)},[c,e]),n=!!a.items.length,k=typeof o=="object"?o?.raw:o,h=g===j.STACKED,b=k?.includes?.("{% schemaDefinition");return t(K,{expanded:d,isSchema:b,isStacked:h,children:[t(W,{layout:g,children:[t(m,{fullWidth:!n,isStacked:h,children:[t(u,{expandable:n,children:[r(B,{to:S,"aria-label":`link to ${s}`}),s,r(I,{pageSlug:e})]}),r(D,{source:o})]}),n&&r(H,{items:a.items,routingBasePath:i})]}),n&&!d&&t(O,{type:"button",variant:"text",size:"medium",onClick:x,children:["+ ",v("openapi.actions.show","Show")]})]})}const da=w(E),K=l.div`
+import{jsx as t,jsxs as n}from"react/jsx-runtime";import{memo as x,useCallback as S}from"react";import{useNavigate as b}from"react-router-dom";import{useAtomValue as y}from"jotai";import{LayoutVariant as T}from"@redocly/config";import{Markdown as m}from"@redocly/theme/components/Markdown/Markdown";import{breakpoints as r}from"@redocly/theme/core/openapi";import{Button as W}from"@redocly/theme/components/Button/Button";import{PageActions as M}from"@redocly/theme/components/PageActions/PageActions";import{H2 as z}from"@redocly/theme/components/Typography/H2";import{LinkIcon as j}from"@redocly/theme/icons/LinkIcon/LinkIcon";import{joinWithSeparator as C}from"../../services/history/helpers.js";import{Row as I,SamplesMiddlePanel as f,SamplesPanel as u,ShareLink as P}from"../common/index.js";import{Markdown as A}from"../Markdown/index.js";import{OperationsNavigation as L}from"./OperationsNavigation.js";import{layoutAtom as B}from"../../jotai/app.js";import{useTranslate as H}from"../../hooks/index.js";import{styled as e}from"../../styled-components.js";import{StyledShareLink as D}from"../common/linkify.js";function N({item:a,routingBasePath:i="",isExpanded:s}){const v=H(),{description:w,name:g,href:$}=a,c=b(),h=y(B),o=C(i,a.href),k=S(()=>{c(o)},[c,o]),d=!!a.items.length,l=h===T.STACKED,p=!d;return n(V,{expanded:s,children:[n(I,{layout:h,children:[n(_,{fullWidth:p,isStacked:l,children:[n(E,{fullWidth:p,isStacked:l,children:[n(K,{children:[t(P,{to:$,"aria-label":`link to ${g}`}),g]}),t(M,{pageSlug:o})]}),t(F,{fullWidth:p,isStacked:l,children:t(A,{source:w})})]}),d&&t(L,{items:a.items,routingBasePath:i})]}),d&&!s&&n(O,{type:"button",variant:"text",size:"medium",onClick:k,children:["+ ",v("openapi.actions.show","Show")]})]})}const ma=x(N),V=e.div`
   padding-top: var(--spacing-lg);
   padding-bottom: ${({expanded:a})=>a?"var(--spacing-xxl)":""};
+`,_=e(f)`
+  @media screen and (min-width: ${r.large}) {
+    padding-left: ${({fullWidth:a,isStacked:i})=>a&&!i?"0":void 0};
+    padding-right: ${({fullWidth:a,isStacked:i})=>a&&!i?"0":void 0};
+  }
+`,E=e.div`
+  display: flex;
+  align-items: flex-start;
+  margin: var(--h2-margin-top) 0 var(--h2-margin-bottom);
+
+  @media screen and (min-width: ${r.large}) {
+    padding-left: ${({fullWidth:a,isStacked:i})=>a&&!i?"calc(var(--panel-gap-horizontal) * 2)":void 0};
+    padding-right: ${({fullWidth:a,isStacked:i})=>a&&!i?"var(--panel-gap-horizontal)":void 0};
+    width: ${({fullWidth:a,isStacked:i})=>a&&!i?"calc(100% - var(--panel-samples-width))":void 0};
 
+    ${D} {
+      left: ${({fullWidth:a,isStacked:i})=>a&&!i?"unset":void 0};
+    }
+  }
+`,F=e.div`
   /* 
     Markdoc components inside markdown that use SamplesPanel should not have padding.
     E.g. SchemaDefinition, McpTool
     padding is added by the TagItem itself
   */
-  ${p} ${f} {
-    padding-right: 0;
+  ${m} ${u} {
     padding-left: 0;
+    padding-right: 0;
   }
 
-  ${({isSchema:a,isStacked:i})=>a&&!i&&M`
-      ${m} {
-        padding-left: 0;
-        padding-right: 0;
-      }
-
-      ${p} ${m} {
-        padding-left: calc(var(--panel-gap-horizontal) * 2);
-        padding-right: var(--panel-gap-horizontal);
-      }
+  @media screen and (min-width: ${r.large}) {
+    ${m} ${f} {
+      padding-left: ${({fullWidth:a,isStacked:i})=>a&&!i?"calc(var(--panel-gap-horizontal) * 2)":void 0};
+      padding-right: ${({fullWidth:a,isStacked:i})=>a&&!i?"var(--panel-gap-horizontal)":void 0};
+    }
 
-      ${p} ${f} {
-        padding-right: calc(var(--panel-gap-horizontal) * 2);
-        padding-left: var(--panel-gap-horizontal);
-      }
+    ${m} .schema-definition ${u} {
+      padding-left: ${({fullWidth:a,isStacked:i})=>a&&!i?"var(--panel-gap-horizontal)":void 0};
+      padding-right: ${({fullWidth:a,isStacked:i})=>a&&!i?"calc(var(--panel-gap-horizontal) * 2)":void 0};
+    }
+  }
+`,K=e(z)`
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  flex-wrap: wrap;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  margin: 0;
 
-      ${u} {
-        padding-left: calc(var(--panel-gap-horizontal) * 2);
-        padding-right: var(--panel-gap-horizontal);
-        width: calc(100% - var(--panel-samples-width));
-        ${_} {
-          left: unset;
-        }
-      }
-    `}
-`,O=l(C)`
+  :hover {
+    ${j} {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+`,O=e(W)`
   margin: var(--spacing-md) var(--spacing-xl) var(--spacing-xxs);
   width: calc(100% - var(--spacing-xl) * 2);
 
-  @media screen and (min-width: ${T.medium}) {
+  @media screen and (min-width: ${r.medium}) {
     --button-margin-md: calc(var(--spacing-xl) * 2);
 
     margin-left: var(--button-margin-md);
     margin-right: var(--button-margin-md);
     width: calc(100% - var(--button-margin-md) * 2);
   }
-`,u=l(A)`
-  display: flex;
-  :hover {
-    ${L} {
-      opacity: 1;
-      visibility: visible;
-    }
-  }
-`;export{da as TagItem,E as TagItemComponent};
+`;export{ma as TagItem,N as TagItemComponent};