@redocly/openapi-docs 3.0.0-alpha.91 → 3.0.1

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

@@ -1,9 +1,9 @@
-import React from 'react';
+/// <reference types="react" />
 interface SchemaDefinitionProps {
     schemaRef?: string;
     exampleRef?: string;
     showReadOnly?: boolean;
     showWriteOnly?: boolean;
 }
-export declare const SchemaDefinition: React.NamedExoticComponent<SchemaDefinitionProps>;
+export declare const SchemaDefinition: import("react").NamedExoticComponent<SchemaDefinitionProps>;
 export {};

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

@@ -1,7 +1,4 @@
-import React,{memo,useCallback,useMemo}from"react";import styled from"styled-components";import{PanelBody,LayoutVariant}from"@redocly/theme";import{useAtom,useAtomValue}from"jotai";import{writeAtom}from"../../jotai/nexus";import{SamplesMiddlePanel,SamplesPanel,Row,Section}from"../common";import{getMediaType}from"../../models";import{MediaTypeSamples}from"../PayloadSamples";import{Schema}from"../Schema";import{Markdown}from"../Markdown";import{CodePanel}from"../Panel";import{layoutAtom,showRightPanelToggleAtom}from"../../jotai/app";import{globalStoreAtom}from"../../jotai/store";import{operationStore}from"../../jotai/operation";const getMediaTypeInfo=(e,o)=>{if(!e)return{};const a={schema:{$ref:e}};return o&&(a.examples={example:{$ref:o}}),a};function SchemaDefinitionComponent({schemaRef:e,exampleRef:o,showReadOnly:a=!0,showWriteOnly:t=!1}){var n,i,l;const m=useAtomValue(layoutAtom),{parser:r,options:s}=useAtomValue(globalStoreAtom),c=useAtomValue(showRightPanelToggleAtom),p=useMemo((()=>getMediaType(r,"json",!1,getMediaTypeInfo(e,o),s,{operation:{pointer:"SchemaDefinitionComponent"}})),[o,s,r,e]),[d,u]=useAtom(operationStore(null===(n=p.operation)||void 0===n?void 0:n.pointer)),f=useCallback((e=>{if(!p.schema)return;const o=p.schema,a=o.oneOf;if(a&&(null==p?void 0:p.examples)&&Object.keys(null==p?void 0:p.examples).includes(e)){const t=a.findIndex((o=>o.title===e));-1!==t&&o&&writeAtom(operationStore(o.deps.operation.pointer),(e=>{var a,n;return Object.assign(Object.assign({},e),{activeExampleName:(null===(n=null===(a=o.oneOf)||void 0===a?void 0:a[t])||void 0===n?void 0:n.title)||e.activeExampleName,activeOneOf:Object.assign(Object.assign({},e.activeOneOf),{[o.pointer]:t})})}))}d.activeExampleName!==e&&u((o=>Object.assign(Object.assign({},o),{activeExampleName:e})))}),[null==p?void 0:p.examples,p.schema,d.activeExampleName,u]);return React.createElement(Section,null,React.createElement(Row,{layout:m},React.createElement(SamplesMiddlePanel,{isStacked:m===LayoutVariant.STACKED||!c},(null===(i=p.schema)||void 0===i?void 0:i.description)&&React.createElement(Description,null,React.createElement(Markdown,{source:null===(l=p.schema)||void 0===l?void 0:l.description})),React.createElement(StyledPanelBody,{className:"panel-default"},React.createElement(Schema,{skipWriteOnly:!t,skipReadOnly:!a,schema:p.schema}))),c?React.createElement(SamplesPanel,null,React.createElement(CodePanel,{className:"panel-response-samples"},React.createElement(MediaTypeSamples,{mediaType:p,onChange:f}))):null))}export const SchemaDefinition=memo(SchemaDefinitionComponent);const Description=styled.div`
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{memo,useCallback,useMemo}from"react";import styled from"styled-components";import{LayoutVariant}from"@redocly/theme";import{useAtom,useAtomValue}from"jotai";import{writeAtom}from"../../jotai/nexus";import{SamplesMiddlePanel,SamplesPanel,Row,Section,CodeBlockPanel}from"../common";import{getMediaType}from"../../models";import{MediaTypeSamples}from"../PayloadSamples";import{Schema}from"../Schema";import{Markdown}from"../Markdown";import{layoutAtom}from"../../jotai/app";import{globalStoreAtom}from"../../jotai/store";import{operationStore}from"../../jotai/operation";const getMediaTypeInfo=(e,o)=>{if(!e)return{};const a={schema:{$ref:e}};return o&&(a.examples={example:{$ref:o}}),a};function SchemaDefinitionComponent({schemaRef:e,exampleRef:o,showReadOnly:a=!0,showWriteOnly:t=!1}){var i,n,m;const s=useAtomValue(layoutAtom),{parser:r,options:l}=useAtomValue(globalStoreAtom),p=useMemo((()=>getMediaType(r,"json",!1,getMediaTypeInfo(e,o),l,{operation:{pointer:"SchemaDefinitionComponent"}})),[o,l,r,e]),[c,d]=useAtom(operationStore(null===(i=p.operation)||void 0===i?void 0:i.pointer)),u=useCallback((e=>{if(!p.schema)return;const o=p.schema,a=o.oneOf;if(a&&(null==p?void 0:p.examples)&&Object.keys(null==p?void 0:p.examples).includes(e)){const t=a.findIndex((o=>o.title===e));-1!==t&&o&&writeAtom(operationStore(o.operationPointer),(e=>{var a,i;return Object.assign(Object.assign({},e),{activeExampleName:(null===(i=null===(a=o.oneOf)||void 0===a?void 0:a[t])||void 0===i?void 0:i.title)||e.activeExampleName,activeOneOf:Object.assign(Object.assign({},e.activeOneOf),{[o.pointer]:t})})}))}c.activeExampleName!==e&&d((o=>Object.assign(Object.assign({},o),{activeExampleName:e})))}),[null==p?void 0:p.examples,p.schema,c.activeExampleName,d]),f=s===LayoutVariant.STACKED;return _jsx(Section,{children:_jsxs(Row,{layout:s,children:[_jsxs(SamplesMiddlePanel,{isStacked:f,children:[(null===(n=p.schema)||void 0===n?void 0:n.description)&&_jsx(Description,{children:_jsx(Markdown,{source:null===(m=p.schema)||void 0===m?void 0:m.description})}),_jsx(Schema,{skipWriteOnly:!t,skipReadOnly:!a,schema:p.schema,level:1})]}),_jsx(SamplesPanel,{isStacked:f,children:_jsx(CodeBlockPanel,{className:"panel-response-samples",children:_jsx(MediaTypeSamples,{mediaType:p,onChange:u})})})]})})}export const SchemaDefinition=memo(SchemaDefinitionComponent);const Description=styled.div`
   margin-bottom: var(--spacing-vertical);
-`,StyledPanelBody=styled(PanelBody)`
-  --panel-schemas-body-padding: var(--panel-body-padding);
-  --panel-body-border-local: var(--panel-border);
 `;
 //# sourceMappingURL=SchemaDefinition.js.map

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

@@ -1,16 +1,8 @@
-/// <reference types="react" />
+import type { ReactElement } from 'react';
 import type { ContentItemModel } from '../../models';
-import type { Options } from '../../services';
-import { Pagination } from '../../services';
 interface SectionContentProps {
     items: ContentItemModel[];
-    pagination: Pagination;
-    nextSectionLink?: {
-        name: string;
-        href?: string;
-    };
-    showNextButton: Options['showNextButton'];
     hideFooterAndHeader?: boolean;
 }
-export declare function SectionContent({ items, pagination, nextSectionLink, showNextButton, hideFooterAndHeader, }: SectionContentProps): JSX.Element | null;
+export declare function SectionContent({ items, hideFooterAndHeader, }: SectionContentProps): ReactElement | null;
 export {};

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

@@ -1,2 +1,16 @@
-import React,{useMemo}from"react";import{OpenApiHeader}from"@redocly/theme";import{useAtomValue}from"jotai";import{ContentItem}from"../ContentItem";import{Pagination}from"../../services";import{MiddlePanelWrapper}from"../Panel";import{PageFooter}from"../PageFooter";import{globalOptionsAtom}from"../../jotai/store";import{RenderHook}from"../RenderHook";export function SectionContent({items:e,pagination:t,nextSectionLink:o,showNextButton:n,hideFooterAndHeader:r}){const a=useMemo((()=>t===Pagination.None?e:null==e?void 0:e.filter((e=>"section"===e.type))),[e,t]),{hooks:{MiddlePanelHeader:i}}=useAtomValue(globalOptionsAtom),l=useMemo((()=>r?null:React.createElement(MiddlePanelWrapper,null,React.createElement(PageFooter,{showNextButton:n,pagination:t,nextSectionLink:o}))),[o,t,n,r]),m=useMemo((()=>r||!OpenApiHeader&&!i?null:React.createElement(MiddlePanelWrapper,null,i?React.createElement(RenderHook,{Hook:i,props:void 0}):React.createElement(OpenApiHeader,null))),[i,r]);return 0===a.length?null:React.createElement(React.Fragment,null,m,a.map((e=>React.createElement(ContentItem,{key:e.id,item:e}))),l)}
+import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";import{useMemo}from"react";import{breakpoints,LayoutVariant,OpenApiHeader}from"@redocly/theme";import{useAtomValue}from"jotai";import styled from"styled-components";import{ContentItem}from"../ContentItem";import{PageFooter}from"../PageFooter";import{globalOptionsAtom}from"../../jotai/store";import{RenderHook}from"../RenderHook";import{RightPanel}from"../RightPanel";import{layoutAtom}from"../../jotai/app";import{Row,SamplesMiddlePanel,SamplesPanel}from"../common";export function SectionContent({items:e,hideFooterAndHeader:t}){const{unstable_hooks:{MiddlePanelHeader:a},routingBasePath:o}=useAtomValue(globalOptionsAtom),n=useAtomValue(layoutAtom),r=n===LayoutVariant.STACKED,i=useMemo((()=>t?null:_jsx(MiddlePanelWrapper,{isStacked:r,children:_jsx(PageFooter,{})})),[t,r]),l=useMemo((()=>t||!OpenApiHeader&&!a?null:_jsx(MiddlePanelWrapper,{isStacked:r,children:a?_jsx(RenderHook,{Hook:a,props:void 0}):_jsx(OpenApiHeader,{})})),[a,t,r]);return 0===e.length?null:_jsxs(_Fragment,{children:[l,_jsxs(Row,{layout:n,children:[_jsx(SectionContainer,{layout:n,children:e.filter((({type:e})=>"section"===e)).map((e=>_jsx(ContentItem,{item:e,routingBasePath:o},e.id)))}),_jsx(RightPanelContainer,{isStacked:r,tabIndex:0,children:_jsx(RightPanel,{item:e[0]})})]}),e.filter((({type:e})=>"section"!==e)).map((e=>_jsx(ContentItem,{item:e,routingBasePath:o},e.id))),i]})}const MiddlePanelWrapper=styled(SamplesMiddlePanel)`
+  align-self: flex-start;
+  padding-top: var(--panel-gap-vertical);
+  padding-bottom: var(--panel-gap-vertical);
+`,SectionContainer=styled.div`
+  width: 100%;
+
+  @media screen and (min-width: ${breakpoints.large}) {
+    width: ${({layout:e})=>e===LayoutVariant.STACKED?"100%":"calc(100% - var(--panel-samples-width))"};
+  }
+`,RightPanelContainer=styled(SamplesPanel)`
+  margin: var(--spacing-base) 0 var(--spacing-xs);
+  overflow-y: auto;
+  max-height: calc(100vh - var(--navbar-height) - var(--panel-gap-vertical) * 2);
+`;
 //# sourceMappingURL=SectionContent.js.map

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

@@ -1,6 +1,6 @@
-import React from 'react';
+/// <reference types="react" />
 import type { GroupModel } from '../../models';
 export interface SectionItemProps {
     item: GroupModel;
 }
-export declare const SectionItem: React.NamedExoticComponent<SectionItemProps>;
+export declare const SectionItem: import("react").NamedExoticComponent<SectionItemProps>;

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

@@ -1,2 +1,2 @@
-import React,{memo}from"react";import{SamplesMiddlePanel,Row}from"../common";import{Markdown}from"../Markdown";import{ExternalDocumentation}from"../ExternalDocumentation";function SectionItemComponent({item:e}){const{externalDocs:t,ast:n,description:o}=e;return React.createElement(React.Fragment,null,React.createElement(Markdown,{ast:n,source:o,htmlWrap:e=>React.createElement(SamplesMiddlePanel,null,e)}),t&&React.createElement(Row,null,React.createElement(SamplesMiddlePanel,null,React.createElement(ExternalDocumentation,{externalDocs:t}))))}export const SectionItem=memo(SectionItemComponent);
+import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";import{memo}from"react";import{useAtomValue}from"jotai";import{LayoutVariant}from"@redocly/theme";import{SamplesMiddlePanel,Row}from"../common";import{Markdown}from"../Markdown";import{ExternalDocumentation}from"../ExternalDocumentation";import{layoutAtom}from"../../jotai/app";function SectionItemComponent({item:t}){const{externalDocs:o,ast:e,description:a}=t,m=useAtomValue(layoutAtom)===LayoutVariant.STACKED,r=!t.parent||"tag"!==t.parent.type;return _jsxs(_Fragment,{children:[_jsx(Markdown,{ast:e,source:a,htmlWrap:t=>_jsx(SamplesMiddlePanel,{compact:!0,fullWidth:r,isStacked:m,children:t})}),o&&_jsx(Row,{children:_jsx(SamplesMiddlePanel,{compact:!0,fullWidth:r,isStacked:m,children:_jsx(ExternalDocumentation,{externalDocs:o})})})]})}export const SectionItem=memo(SectionItemComponent);
 //# sourceMappingURL=SectionItem.js.map

package/lib-esm/components/Security/Divider.d.ts

@@ -0,0 +1,3 @@
+export declare function Divider({ label }: {
+    label: string;
+}): import("react/jsx-runtime").JSX.Element;

package/lib-esm/components/Security/Divider.js

@@ -0,0 +1,15 @@
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import styled from"styled-components";import{Tag}from"./styled";export function Divider({label:r}){return _jsxs(Wrapper,{children:[_jsx(Tag,{className:"tag-grey",children:r})," ",_jsx("hr",{})]})}const Wrapper=styled.div`
+  font-size: var(--font-size-sm);
+  width: 100%;
+  display: flex;
+  align-items: center;
+  margin: var(--spacing-base) 0;
+  hr {
+    height: 1px;
+    border: none;
+    background: var(--border-color-primary);
+    width: 100%;
+    margin-left: var(--spacing-xs);
+  }
+`;
+//# sourceMappingURL=Divider.js.map

package/lib-esm/components/Security/OAuthFlow.d.ts

@@ -0,0 +1,6 @@
+import type { PropsWithChildren } from 'react';
+import type { OpenAPISecurityScheme } from '../../types';
+export interface OAuthFlowProps {
+    flow: OpenAPISecurityScheme['flows'][keyof OpenAPISecurityScheme['flows']];
+}
+export declare const OAuthFlow: import("react").NamedExoticComponent<PropsWithChildren<OAuthFlowProps>>;

package/lib-esm/components/Security/OAuthFlow.js

@@ -0,0 +1,4 @@
+import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";import{memo}from"react";import styled from"styled-components";import{Markdown}from"../Markdown";import{SecuritySchemeItem}from"./SecuritySchemeItem";import{StyledLink,Tag}from"./styled";function OAuthFlowComponent({flow:e}){const t=Object.keys((null==e?void 0:e.scopes)||{});return _jsxs(_Fragment,{children:[_jsx(SecuritySchemeItem,{label:"Authorization URL:",value:(null==e?void 0:e.authorizationUrl)&&_jsx(StyledLink,{target:"_blank",rel:"noopener noreferrer",href:null==e?void 0:e.authorizationUrl,children:null==e?void 0:e.authorizationUrl})}),_jsx(SecuritySchemeItem,{label:"Token URL:",value:null==e?void 0:e.tokenUrl}),_jsx(SecuritySchemeItem,{label:"Refresh URL:",value:null==e?void 0:e.refreshUrl}),t.length&&_jsxs(_Fragment,{children:[_jsx(SecuritySchemeItem,{label:"Scopes",value:" "}),t.map((t=>_jsx(SecuritySchemeItem,{label:_jsx(StyledTag,{className:"tag-grey",children:t}),value:_jsx(Markdown,{source:(null==e?void 0:e.scopes[t])||""})},t)))]})||null]})}const StyledTag=styled(Tag)`
+  margin-left: var(--spacing-xs);
+`;export const OAuthFlow=memo(OAuthFlowComponent);
+//# sourceMappingURL=OAuthFlow.js.map

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

@@ -0,0 +1,7 @@
+import type { ReactElement } from 'react';
+import type { SecurityRequirement } from '../../models';
+interface SecurityProps {
+    securities: SecurityRequirement[];
+}
+export declare function Security({ securities }: SecurityProps): ReactElement | null;
+export {};

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

@@ -0,0 +1,2 @@
+import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";import{useState}from"react";import{Portal,useModalScrollLock}from"@redocly/theme";import{SecurityButton}from"./SecurityButton";import{SecurityModal}from"./SecurityModal";export function Security({securities:t}){const[r,e]=useState(!1);return useModalScrollLock(r),t.length?_jsxs(_Fragment,{children:[_jsx(SecurityButton,{securities:t,onClick:()=>e(!0)}),r&&_jsx(Portal,{mountId:"api-content",children:_jsx(SecurityModal,{securities:t,onClose:()=>e(!1)})})]}):null}
+//# sourceMappingURL=Security.js.map

package/lib-esm/components/Security/SecurityButton.d.ts

@@ -0,0 +1,10 @@
+import type { ReactElement } from 'react';
+import type { SecurityRequirement } from '../../models';
+interface SecurityRequirementsProps {
+    securities: SecurityRequirement[];
+}
+export interface SecurityButtonProps extends SecurityRequirementsProps {
+    onClick: () => void;
+}
+export declare function SecurityButton({ securities, onClick }: SecurityButtonProps): ReactElement;
+export {};

package/lib-esm/components/Security/SecurityButton.js

@@ -0,0 +1,28 @@
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import styled from"styled-components";import{SecurityIcon}from"@redocly/theme";export function SecurityButton({securities:e,onClick:t}){return _jsxs(StyledButton,{onClick:t,children:[_jsx(SecurityIcon,{}),_jsx(Title,{children:"Security:"}),_jsx(SecurityList,{children:e.map((t=>{const i=e.length>1&&t.schemes.length>1;return`\n          ${i?"(":""}\n          ${t.schemes.map((({id:e})=>e)).join(" and ")}\n          ${i?")":""}\n          `})).join(" or ")})]})}const StyledButton=styled.button`
+  display: flex;
+  align-items: center;
+  align-self: flex-start;
+  gap: var(--spacing-xxs);
+  min-height: 32px;
+  background: var(--color-info-bg);
+  padding: 0 var(--spacing-xs);
+  margin-top: var(--spacing-base);
+  color: var(--link-color-primary);
+  border: none;
+  font-size: var(--font-size-base);
+  font-family: var(--font-family-base);
+  line-height: var(--line-height-base);
+  border-radius: var(--border-radius-md);
+  max-width: 100%;
+`,Title=styled.span`
+  font-family: var(--font-family-monospaced);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: -0.5px;
+`,SecurityList=styled.span`
+  flex: 1;
+  cursor: pointer;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+`;
+//# sourceMappingURL=SecurityButton.js.map

package/lib-esm/components/Security/SecurityFlow.d.ts

@@ -0,0 +1,5 @@
+import type { ReactElement } from 'react';
+import type { SecurityRequirement, ExtendedOpenAPISecurityScheme } from '../../models';
+export declare function SecurityFlow({ type, bearerFormat, name, flows, openIdConnectUrl, description, id, securities, in: apiKeyIn, }: Partial<ExtendedOpenAPISecurityScheme> & {
+    securities: SecurityRequirement[];
+}): ReactElement | null;

package/lib-esm/components/Security/SecurityFlow.js

@@ -0,0 +1,21 @@
+import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";import styled from"styled-components";import{SecuritySchemeItem}from"./SecuritySchemeItem";import{titleize}from"../../utils";import{OAuthFlow}from"./OAuthFlow";import{StyledLink,Tag}from"./styled";import{Markdown}from"../Markdown";import{getRequiredScopes}from"./helper";export function SecurityFlow({type:e,bearerFormat:r,name:t,flows:a,openIdConnectUrl:i,description:s,id:o,securities:l,in:n}){if(!e||!o)return null;const m=getRequiredScopes(o,l),c={http:_jsxs(_Fragment,{children:[_jsx(SecuritySchemeItem,{label:"HTTP Authorization Scheme",value:e}),_jsx(SecuritySchemeItem,{label:"Bearer Format",value:r})]}),apiKey:_jsx(SecuritySchemeItem,{label:`${titleize(n||"")} parameter name:`,value:t}),oauth2:_jsxs(_Fragment,{children:[_jsx(SecuritySchemeItem,{label:"Flow type:",value:e}),a&&Object.keys(a).map((e=>_jsx(OAuthFlow,{flow:a[e]},e)))]}),openIdConnect:_jsx(SecuritySchemeItem,{label:"Connect URL:",value:i&&_jsx(StyledLink,{target:"_blank",rel:"noopener noreferrer",href:i,children:i})})};return _jsxs(Wrapper,{children:[_jsx(TitleSchema,{children:o}),_jsx(Markdown,{source:s}),_jsxs(List,{children:[c[e]||null,_jsx(SecuritySchemeItem,{label:"Required scopes",value:m.length&&_jsx(Row,{children:m.map((e=>_jsx(Tag,{className:"tag-grey",children:e},e)))})})]})]})}const Wrapper=styled.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);
+`,List=styled.div`
+  width: 100%;
+  margin-top: var(--spacing-md);
+`,Row=styled.div`
+  display: flex;
+  gap: var(--spacing-xxs);
+  word-break: normal;
+`,TitleSchema=styled.p`
+  font-size: var(--font-size-base);
+  margin: 0 0 var(--spacing-xs);
+  text-transform: capitalize;
+  font-weight: var(--font-weight-semibold);
+`;
+//# sourceMappingURL=SecurityFlow.js.map

package/lib-esm/components/Security/SecurityModal.d.ts

@@ -0,0 +1,8 @@
+import type { ReactElement } from 'react';
+import type { SecurityRequirement } from '../../models';
+interface SecurityModalProps {
+    securities: SecurityRequirement[];
+    onClose: () => void;
+}
+export declare function SecurityModal({ securities, onClose }: SecurityModalProps): ReactElement;
+export {};

package/lib-esm/components/Security/SecurityModal.js

@@ -0,0 +1,45 @@
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{Fragment,useState,useRef}from"react";import styled from"styled-components";import{useOutsideClick,Typography,CloseIcon,SecurityIcon,Segmented,Button,useFocusTrap}from"@redocly/theme";import{SecurityFlow}from"./SecurityFlow";import{Divider}from"./Divider";export function SecurityModal({securities:e,onClose:t}){const[s,i]=useState(0),o=useRef(null),{schemes:r}=e[s]||{};useOutsideClick(o,t),useFocusTrap(o);const a=e.map((({schemes:e},t)=>({label:e.map((({id:e})=>e)).join(" and "),value:t})));return _jsx(StyledBackground,{children:_jsxs(Wrapper,{ref:o,tabIndex:0,children:[_jsx(Close,{onClick:t,"data-testid":"close",variant:"ghost",icon:_jsx(CloseIcon,{})}),_jsxs(Title,{children:[_jsx(SecurityIcon,{size:"24px"}),"Security"]}),_jsx(Segmented,{value:s,onChange:({value:e})=>i(e),options:a}),r.map(((t,s)=>_jsxs(Fragment,{children:[_jsx(SecurityFlow,Object.assign({},t,{securities:e})),s!==r.length-1&&_jsx(Divider,{label:"and"})]},t.id)))]})})}const Wrapper=styled.div`
+  background: var(--bg-color);
+  box-shadow: var(--bg-raised-shadow);
+  border-radius: var(--border-radius-lg);
+  padding: var(--spacing-lg);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  position: absolute;
+  width: 720px;
+  max-width: 100%;
+  height: auto;
+  max-height: 600px;
+  overflow-y: scroll;
+  left: 50%;
+  top: 100px;
+  transform: translateX(-50%);
+  .tag-grey span {
+    font-size: var(--font-size-base);
+    line-height: var(--line-height-base);
+  }
+`,StyledBackground=styled.div`
+  background: var(--bg-color-modal-overlay);
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  z-index: var(--z-index-popover);
+  left: 0;
+  top: 0;
+  pointer-events: auto;
+`,Close=styled(Button)`
+  position: absolute;
+  right: var(--spacing-md);
+  top: var(--spacing-md);
+`,Title=styled(Typography)`
+  display: flex;
+  align-items: center;
+  font-size: var(--h4-font-size);
+  font-weight: var(--h4-font-weight);
+  margin-bottom: var(--spacing-lg);
+  svg {
+    margin-right: var(--spacing-xs);
+  }
+`;
+//# sourceMappingURL=SecurityModal.js.map

package/lib-esm/components/Security/SecuritySchemeItem.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+interface SecuritySchemeItemProps {
+    label: string | ReactNode;
+    value: string | ReactNode;
+}
+export declare function SecuritySchemeItem({ label, value }: SecuritySchemeItemProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/lib-esm/components/Security/SecuritySchemeItem.js

@@ -0,0 +1,20 @@
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import styled from"styled-components";export function SecuritySchemeItem({label:e,value:t}){return e&&t?_jsxs(Row,{children:[_jsx(Label,{children:e}),_jsx(Value,{children:t})]}):null}const Row=styled.div`
+  display: flex;
+  justify-content: flex-start;
+  margin-bottom: var(--spacing-xxs);
+  font-size: var(--font-size-sm);
+  color: var(--text-color-secondary);
+`,Label=styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+  flex: 1;
+`,Value=styled.div`
+  flex: 1;
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+  word-break: break-word;
+`;
+//# sourceMappingURL=SecuritySchemeItem.js.map

package/lib-esm/components/Security/helper.d.ts

@@ -0,0 +1,2 @@
+import type { SecurityRequirement } from '../../models';
+export declare function getRequiredScopes(id: string, securities: SecurityRequirement[]): string[];

package/lib-esm/components/Security/helper.js

@@ -0,0 +1,2 @@
+export function getRequiredScopes(e,r){const o=new Set;return r.forEach((({schemes:r})=>{r.forEach((({id:r,scopes:c})=>{r===e&&c.forEach((e=>o.add(e)))}))})),Array.from(o)}
+//# sourceMappingURL=helper.js.map

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

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

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

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

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

@@ -0,0 +1,2 @@
+export declare const Tag: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledLink: import("styled-components").StyledComponent<"a", any, {}, never>;

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

@@ -0,0 +1,14 @@
+import styled from"styled-components";export const Tag=styled.div`
+  border-radius: var(--border-radius);
+  padding: 0 var(--spacing-xxs);
+  font-family: var(--font-family-monospaced);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
+  color: var(--text-color-primary);
+  background-color: var(--tag-bg-color);
+`;export const StyledLink=styled.a`
+  color: var(--link-color-primary);
+  text-decoration: none;
+  word-wrap: break-word;
+`;
+//# sourceMappingURL=styled.js.map

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

@@ -0,0 +1,7 @@
+import type { FC, PropsWithChildren, ReactElement } from 'react';
+import type { SelectProps } from '../common/Select';
+export interface SelectOrLabelProps extends SelectProps {
+    Label?: FC<PropsWithChildren>;
+    Select?: FC<SelectProps>;
+}
+export declare function SelectOrLabel({ Label, Select, ...selectProps }: SelectOrLabelProps): ReactElement;

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

@@ -0,0 +1,8 @@
+var __rest=this&&this.__rest||function(e,t){var r={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(o=Object.getOwnPropertySymbols(e);n<o.length;n++)t.indexOf(o[n])<0&&Object.prototype.propertyIsEnumerable.call(e,o[n])&&(r[o[n]]=e[o[n]])}return r};import{jsx as _jsx}from"react/jsx-runtime";import styled from"styled-components";import{SimpleSelect}from"../common/Select";const MimeLabel=styled.span`
+  margin-left: 4px;
+  font-size: 14px;
+  text-transform: none;
+  font-weight: 400;
+  color: var(--text-color-primary);
+`;export function SelectOrLabel(e){var{Label:t=MimeLabel,Select:r=SimpleSelect}=e,o=__rest(e,["Label","Select"]);return 1===o.options.length?_jsx(t,{children:o.options[0].value}):_jsx(r,Object.assign({},o))}
+//# sourceMappingURL=SelectOrLabel.js.map

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

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

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

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

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

@@ -0,0 +1,3 @@
+import type { ReactElement } from 'react';
+import type { ServerListProps } from './types';
+export declare const ServerList: ({ servers, path }: ServerListProps) => ReactElement;

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

@@ -0,0 +1,60 @@
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{CopyButton}from"@redocly/theme";import styled from"styled-components";import{PanelItemDescription,Title}from"../PanelItem";import{ViewNested}from"../ViewNested";import{Tag}from"../common";import{Markdown}from"../Markdown";export const ServerList=({servers:e,path:r})=>_jsx(ItemsList,{children:e.map((e=>{const i=e.url+r,a=Object.keys(e.variables||{}).length,t=`${1===Number(a)?"":a} ${1!==a?"variables":"variable"}`;return _jsxs("div",{children:[_jsx(PanelItemDescription,{children:e.description}),_jsxs(TitleWrap,{children:[_jsx(Title,{suppressHydrationWarning:!0,children:i}),_jsx(CopyButton,{data:i},i)]}),e.variables&&_jsx(ViewNested,{expandText:`Show ${t}`,hideText:`Hide ${t}`,expandByDefault:!1,expandable:!0,hideDivider:!0,children:_jsx(ServerVariablesContainer,{children:Object.entries(e.variables||{}).map((([e,r])=>_jsxs(ServerVariableContainer,{children:[_jsx(ServerVariableName,{children:e}),_jsxs(Variable,{children:["Default ",_jsx(StyledTag,{children:r.default})]}),_jsx(Description,{source:r.description}),r.enum&&_jsxs(Variable,{children:["Enum",_jsx(TagWrapper,{children:r.enum.map((e=>_jsx(StyledTag,{children:e},e)))})]})]},e)))})})]},e.url)}))});const ItemsList=styled.div`
+  & > div {
+    border-bottom: 1px solid var(--border-color-secondary);
+    margin-bottom: var(--spacing-xs);
+    padding-bottom: var(--spacing-sm);
+  }
+
+  & > div:last-child {
+    border-bottom: none;
+    margin-bottom: 0;
+    padding-bottom: 0;
+  }
+`,ServerVariablesContainer=styled.div`
+  padding-left: var(--spacing-xxs);
+  & > div {
+    border-bottom: 1px solid var(--border-color-secondary);
+    margin-bottom: var(--spacing-xs);
+    padding-bottom: var(--spacing-sm);
+  }
+
+  & > div:first-child {
+    margin-top: var(--spacing-sm);
+    padding-top: 0;
+  }
+
+  & > div:last-child {
+    border-bottom: none;
+    margin-bottom: 0;
+    padding-bottom: 0;
+  }
+`,ServerVariableContainer=styled.div`
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+`,Description=styled(Markdown)`
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
+  color: var(--text-color-primary);
+`,Variable=styled.span`
+  display: flex;
+  gap: var(--spacing-xxs);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
+  color: var(--text-color-primary);
+`,ServerVariableName=styled(Variable)`
+  padding-bottom: var(--spacing-xxs);
+  font-weight: var(--font-weight-semibold);
+`,TagWrapper=styled.span`
+  display: flex;
+  gap: var(--spacing-xxs);
+  flex-wrap: wrap;
+`,StyledTag=styled(Tag)`
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
+`,TitleWrap=styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+//# sourceMappingURL=ServerList.js.map

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

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

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

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

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

@@ -0,0 +1,2 @@
+import type { OperationModel } from '../../models';
+export type ServerListProps = Pick<OperationModel, 'servers' | 'path'>;

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

@@ -0,0 +1,7 @@
+import type { ReactElement } from 'react';
+import type { OperationModel } from '../../models';
+export interface ServerListDropdownProps {
+    operation: OperationModel;
+    className?: string;
+}
+export declare const ServerListDropdown: ({ operation, className, }: ServerListDropdownProps) => ReactElement;

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

@@ -0,0 +1,2 @@
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useMemo,useCallback}from"react";import{Dropdown,DropdownMenu}from"@redocly/theme";import{useAtom}from"jotai";import{HttpVerb}from"../common";import{PathWrapper,Path,StyledCopyButton,StyledDropdownMenuItem}from"./styled";import{PanelItem}from"../PanelItem";import{joinWithSeparator}from"../../services";import{replaceVariables}from"../../utils";import{environmentAtom}from"../../jotai/app";import{useActiveWithFallback}from"../../hooks";import{getServerEnvName}from"../../utils/environments";export const ServerListDropdown=({operation:e,className:r})=>{const[[t],o]=useAtom(environmentAtom),a=useActiveWithFallback(e.servers.map((e=>Object.assign(Object.assign({},e),{key:e.url}))),t.server),s=useCallback((e=>{e.stopPropagation()}),[]),n=useCallback((r=>()=>{1!==e.servers.length&&o({environment:getServerEnvName(r)})}),[e.servers.length,o]),i=useMemo((()=>e.servers.map((r=>{const t=replaceVariables(r),o=joinWithSeparator(t,e.path);return _jsx(StyledDropdownMenuItem,{onAction:n(r),children:_jsx(PanelItem,{header:r.description,title:replaceVariables(r),actions:[_jsx(StyledCopyButton,{data:o,toasterPlacement:"left",onCopyClick:s},o)],active:r.url===a,withCheckmark:!0})},o)}))),[e.servers,e.path,n,s,a]);return _jsx(Dropdown,{className:r,trigger:_jsxs(PathWrapper,{variant:"ghost",children:[_jsx(HttpVerb,{color:e.httpVerb,children:e.httpVerb}),_jsx(Path,{children:e.path})]}),withArrow:!0,children:_jsx(DropdownMenu,{children:i})})};
+//# sourceMappingURL=ServerListDropdown.js.map

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

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

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

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

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { DropdownMenuItem } from '@redocly/theme';
+export declare const PathWrapper: import("styled-components").StyledComponent<import("react").FC<import("@redocly/theme").ButtonProps>, any, import("@redocly/theme").ButtonProps, never>;
+export declare const Path: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledDropdownMenuItem: import("styled-components").StyledComponent<typeof DropdownMenuItem, any, {}, never>;
+export declare const StyledCopyButton: import("styled-components").StyledComponent<import("react").NamedExoticComponent<import("@redocly/theme").CopyButtonProps>, any, {}, never>;

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

@@ -0,0 +1,23 @@
+import styled from"styled-components";import{breakpoints,Button,CopyButton,DropdownMenuItem}from"@redocly/theme";export const PathWrapper=styled(Button)`
+  display: inline-flex;
+  overflow-x: hidden;
+  font-weight: var(--font-weight-regular);
+`;export const Path=styled.span`
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline-block;
+  line-height: var(--line-height-base);
+  font-size: var(--font-size-base);
+`;export const StyledDropdownMenuItem=styled(DropdownMenuItem)`
+  padding: calc(var(--spacing-unit) * 1.5) var(--spacing-xs) calc(var(--spacing-unit) * 1.5)
+    var(--spacing-lg);
+  @media screen and (max-width: ${breakpoints.large}) {
+    max-width: 280px;
+  }
+`;export const StyledCopyButton=styled(CopyButton)`
+  :hover {
+    background-color: var(--dropdown-menu-item-bg-color-hover);
+  }
+`;
+//# sourceMappingURL=styled.js.map

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

@@ -1,8 +1,9 @@
-import React from 'react';
+/// <reference types="react" />
 import type { ExtendedMenuItem, IMenuItem } from '../../services';
 interface SideMenuProps {
     items: (ExtendedMenuItem & IMenuItem)[];
     className?: string;
 }
-export declare const SideMenu: React.NamedExoticComponent<SideMenuProps>;
+export declare const SideMenu: import("react").NamedExoticComponent<SideMenuProps>;
+export declare const MenuWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

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

@@ -1,2 +1,4 @@
-import React,{memo,useRef}from"react";import{useAtomValue}from"jotai";import{RedocAttribution}from"./styled";import{MenuItems}from"./MenuItems";import{PerfectScrollbarWrap}from"../common";import{globalOptionsAtom}from"../../jotai/store";import{useMenuItems}from"./hooks";const SideMenuComponent=({items:e,className:t})=>{const{sidebarLinks:o,whiteLabel:r,pagination:n}=useAtomValue(globalOptionsAtom),m=useRef(),a=useMenuItems({items:e,pagination:n});return React.createElement(PerfectScrollbarWrap,{updateFn:e=>{m.current=e},className:t,options:{wheelPropagation:!1}},React.createElement(MenuItems,{items:a,root:!0,linksBefore:null==o?void 0:o.beforeInfo,linksAfter:null==o?void 0:o.end}),r&&React.createElement(RedocAttribution,null,React.createElement("a",{href:"https://redoc.ly",target:"_blank",rel:"noreferrer"},"Powered by Redocly")))};export const SideMenu=memo(SideMenuComponent);
+import{jsx as _jsx}from"react/jsx-runtime";import{memo}from"react";import{Menu}from"@redocly/theme";import styled from"styled-components";import{useMenuItems}from"./hooks/useMenuItems";const SideMenuComponent=({items:e,className:o})=>{const t=useMenuItems({items:e});return _jsx(MenuWrapper,{className:o,children:_jsx(Menu,{items:t})})};export const SideMenu=memo(SideMenuComponent);export const MenuWrapper=styled.div`
+  overflow: auto;
+`;
 //# sourceMappingURL=SideMenu.js.map

package/lib-esm/components/SideMenu/hooks/useMenuItems.d.ts

@@ -1,9 +1,7 @@
 import type { IMenuItem } from '../../../services';
 import type { ExtendedMenuItem } from '../types';
-import { Pagination } from '../../../services';
 type UseMenuItemsInput = {
     items: IMenuItem[];
-    pagination: Pagination;
 };
-export declare function useMenuItems({ items, pagination }: UseMenuItemsInput): ExtendedMenuItem[];
+export declare function useMenuItems({ items }: UseMenuItemsInput): ExtendedMenuItem[];
 export {};

package/lib-esm/components/SideMenu/hooks/useMenuItems.js

@@ -1,2 +1,2 @@
-import{useActiveSectionId}from"@redocly/theme";import{useMemo}from"react";import{useLocation}from"react-router-dom";import{Pagination}from"../../../services";import{normalizeHashPath,pathMatchedLink}from"../../../utils";export function useMenuItems({items:e,pagination:t}){const i=useLocation(),m=useActiveSectionId(i,!1,!1);return useMemo((()=>mapAndSetActiveItems(e,m,i,t)),[m,e,i,t])}function mapAndSetActiveItems(e,t="",i,m){return e.map((e=>{const n=isItemActive(e,t,i),o=isSubItemActive(e,t,i);return m===Pagination.Item&&(e.href=normalizeHashPath(e.href)),Object.assign(Object.assign({},e),{items:mapAndSetActiveItems(e.items||[],t,i,m),active:n&&!o,hasActiveSubItem:o})})).filter(Boolean)}function isItemActive(e,t="",i){return!!e.href&&(t?e.id===t:pathMatchedLink(i,e.href))}function isSubItemActive(e,t="",i){return(e.items||[]).some((e=>isItemActive(e,t,i)||isSubItemActive(e,t,i)))}
+import{useActiveSectionId}from"@redocly/theme";import{useMemo}from"react";import{useLocation}from"react-router-dom";import{pathMatchedLink}from"../../../utils";export function useMenuItems({items:e}){const t=useLocation(),i=useActiveSectionId(t,!1,!1);return useMemo((()=>mapAndSetActiveItems(e,i,t)),[i,e,t])}function mapAndSetActiveItems(e,t="",i){const s=[];return convertOpenAPIDocs2Sidebar({contentItems:e,sidebarItems:s,activeItemId:t,location:i}),s}function isItemActive(e,t="",i){return!!e.href&&(t?e.id===t:pathMatchedLink(i,e.href))}function isSubItemActive(e,t="",i){return(e.items||[]).some((e=>isItemActive(e,t,i)||isSubItemActive(e,t,i)))}function convertOpenAPIDocs2Sidebar(e){const{contentItems:t,sidebarItems:i,activeItemId:s,location:c}=e;let o=!0;for(const n of t){const t=isItemActive(n,s,c),a=isSubItemActive(n,s,c);switch(n.type){case"group":i.push({type:"separator",label:n.name,active:t,hasActiveSubItem:a}),convertOpenAPIDocs2Sidebar(Object.assign(Object.assign({},e),{contentItems:n.items,sidebarItems:i}));break;case"tag":const m={type:"group",label:n.name,items:[],link:n.href,active:t,hasActiveSubItem:a,modified:!0};i.push(m),convertOpenAPIDocs2Sidebar({contentItems:n.items,sidebarItems:m.items||[],activeItemId:s,location:c});break;case"operation":case"schema":n.isWebhook&&o&&(i.push({type:"separator",label:"Webhooks",variant:"secondary"}),o=!1),i.push({type:"link",label:n.name,httpVerb:"schema"===n.type?"schema":n.httpVerb,link:n.href,badges:n.badges,active:t,hasActiveSubItem:a,modified:!0,deprecated:n.deprecated});break;case"section":if(-1===n.depth)continue;const r={type:n.items.length?"group":"link",label:n.name,link:n.href,items:[],active:t,hasActiveSubItem:a,modified:!0};i.push(r),n.items.length&&convertOpenAPIDocs2Sidebar({contentItems:n.items,sidebarItems:r.items,activeItemId:s,location:c})}}}
 //# sourceMappingURL=useMenuItems.js.map

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

@@ -1,4 +1 @@
-export { MenuItem } from './MenuItem';
-export { MenuItems } from './MenuItems';
 export { SideMenu } from './SideMenu';
-export * from './styled';

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

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

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

@@ -1,5 +1,4 @@
-import type { CSSProperties } from 'react';
-import type { ExternalLink, IMenuItem } from '../../services';
+import type { IMenuItem } from '../../services';
 export interface MenuItemLinkProps {
     depth: number;
     active: boolean;
@@ -10,19 +9,6 @@ export interface MenuItemLinkProps {
     href?: string;
     onClick?: () => void;
 }
-export interface MenuItemsProps {
-    items: ExtendedMenuItem[];
-    expanded?: boolean;
-    style?: CSSProperties;
-    root?: boolean;
-    className?: string;
-    linksBefore?: ExternalLink[];
-    linksAfter?: ExternalLink[];
-}
-export type StyledMenuItemLinkProps = Omit<MenuItemLinkProps, 'active' | 'hasChildren'> & {
-    $active: MenuItemLinkProps['active'];
-    $hasChildren: MenuItemLinkProps['hasChildren'];
-};
 export type ExtendedMenuItem = IMenuItem & {
     active: boolean;
     hasActiveSubItem: boolean;

package/lib-esm/components/StickySidebar/SidebarActions.d.ts

@@ -0,0 +1 @@
+export declare const SidebarActions: () => import("react/jsx-runtime").JSX.Element;

package/lib-esm/components/StickySidebar/SidebarActions.js

@@ -0,0 +1,6 @@
+import{jsx as _jsx,Fragment as _Fragment}from"react/jsx-runtime";import{useAtom}from"jotai";import{LayoutVariant,SidebarActions as ThemeSidebarActions}from"@redocly/theme";import styled from"styled-components";import{collapsedSidebarAtom,layoutAtom}from"../../jotai/app";export const SidebarActions=()=>{const[a,o]=useAtom(layoutAtom),[t,e]=useAtom(collapsedSidebarAtom);return _jsx(_Fragment,{children:_jsx(Wrapper,{children:_jsx(ThemeSidebarActions,{layout:a,onChangeViewClick:()=>o(a===LayoutVariant.STACKED?LayoutVariant.THREE_PANEL:LayoutVariant.STACKED),collapsedSidebar:t,onChangeCollapseSidebarClick:()=>e(!t),isOpenapiDocs:!0})})})};const Wrapper=styled.div`
+  position: sticky;
+  top: calc(100vh);
+  padding: var(--spacing-sm) var(--spacing-md);
+`;
+//# sourceMappingURL=SidebarActions.js.map