@redocly/openapi-docs 3.0.0-alpha.59 → 3.0.0-alpha.61

package/lib/utils/queryString.d.ts

@@ -0,0 +1,9 @@
+declare class QueryString {
+    parse(query: string): Record<string, any>;
+    stringify(params: Record<string, any>, options?: {
+        encode?: boolean;
+        sort?: boolean;
+    }): string;
+}
+declare const queryString: QueryString;
+export { queryString };

package/lib/utils/queryString.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.queryString=void 0;class QueryString{parse(e){const t={};if(!e)return t;const o=e.startsWith("?")?e.substring(1).split("&"):e.split("&");for(const e of o){const[o,n]=e.split("=");if(o&&n){const e=decodeURIComponent(o),r=decodeURIComponent(n);if(e in t)Array.isArray(t[e])?t[e].push(r):t[e]=[t[e],r];else{const o=[",","|"].find((e=>r.includes(e)));t[e]=o?r.split(o):r}}}return t}stringify(e,t={encode:!0,sort:!0}){const o=[];for(const[n,r]of Object.entries(e))if(Object.prototype.hasOwnProperty.call(e,n)){const e=t.encode?encodeURIComponent(n):n;if(Array.isArray(r)){for(const n of r)if(n){const r=t.encode?encodeURIComponent(n):n;o.push(`${e}=${r}`)}}else if(r){const n=t.encode?encodeURIComponent(r):r;o.push(`${e}=${n}`)}}return t.sort&&o.sort(),o.join("&")}}const queryString=new QueryString;exports.queryString=queryString;
+//# sourceMappingURL=queryString.js.map

package/lib-esm/components/Callbacks/CallbackSummary.js

@@ -1,2 +1,2 @@
-import React from"react";import{PanelHeader}from"@redocly/theme";import{Trigger}from"../Panel";import{HttpVerb}from"../shared";import{ShelfIcon}from"../icons";import{l}from"../../services";import{shortenHTTPVerb}from"../../utils";import{Badge}from"../common";import{CallbackTitle}from"./styled";export function CallbackSummary({expanded:e=!1,toggle:t,operation:{name:r,httpVerb:a,deprecated:o}}){return React.createElement(PanelHeader,{expanded:e,onClick:t},React.createElement(Trigger,null,React.createElement(HttpVerb,{type:a},shortenHTTPVerb(a)),React.createElement(CallbackTitle,{deprecated:o},r),o?React.createElement(Badge,{deprecated:!0},l("deprecated")):null),React.createElement(ShelfIcon,{direction:e?"down":"right"}))}
+import React from"react";import{PanelHeader}from"@redocly/theme";import{Trigger}from"../Panel";import{HttpVerb}from"../shared";import{ShelfIcon}from"../icons";import{l}from"../../services";import{shortenHTTPVerb}from"../../utils";import{Badge}from"../common";import{CallbackTitle}from"./styled";export function CallbackSummary({expanded:e=!1,toggle:r,operation:{name:t,httpVerb:a,deprecated:o}}){return React.createElement(PanelHeader,{expanded:e,onClick:r},React.createElement(Trigger,null,React.createElement(HttpVerb,{color:a},shortenHTTPVerb(a)),React.createElement(CallbackTitle,{deprecated:o},t),o?React.createElement(Badge,{deprecated:!0},l("deprecated")):null),React.createElement(ShelfIcon,{direction:e?"down":"right"}))}
 //# sourceMappingURL=CallbackSummary.js.map

package/lib-esm/components/Download/DownloadButtonWithLabel.js

@@ -1,20 +1,12 @@
-import React,{useState,useEffect,memo}from"react";import{useRecoilValue}from"recoil";import styled from"styled-components";import{baseButtonStyles}from"@redocly/theme";import{l}from"../../services";import{useDownloadInfo}from"./useDownloadInfo";import{globalStoreSelector}from"../../recoil/store";function DownloadButtonWithLabelComponent({wrapped:o}){const{options:e,parser:t}=useRecoilValue(globalStoreSelector),{definition:n,definitionUrl:r}=t,{downloadDefinitionUrl:a}=e,[i,c]=useState(a),{downloadFileName:d,getDownloadLink:s}=useDownloadInfo({definition:n,definitionUrl:r});useEffect((()=>{a||c(s())}),[a,s]);return React.createElement(DownloadWrapper,{wrapped:o},l("downloadSpecification"),":",React.createElement(DownloadButton,{download:d||!0,target:"_blank",href:i,onClick:({target:o})=>{o.href||(o.href=i)}},l("download")))}export const DownloadButtonWithLabel=memo(DownloadButtonWithLabelComponent);const DownloadButton=styled.a.attrs({className:"download-specification-button button-color-secondary"})`
+import React,{useState,useEffect,memo}from"react";import{useRecoilValue}from"recoil";import styled from"styled-components";import{baseButtonStyles}from"@redocly/theme";import{l}from"../../services";import{useDownloadInfo}from"./useDownloadInfo";import{globalStoreSelector}from"../../recoil/store";function DownloadButtonWithLabelComponent({wrapped:o}){const{options:t,parser:e}=useRecoilValue(globalStoreSelector),{definition:n,definitionUrl:a}=e,{downloadDefinitionUrl:i}=t,[r,d]=useState(i),{downloadFileName:s,getDownloadLink:f}=useDownloadInfo({definition:n,definitionUrl:a});useEffect((()=>{i||d(f())}),[i,f]);return React.createElement(DownloadWrapper,{wrapped:o},l("downloadSpecification"),":",React.createElement(DownloadButton,{download:s||!0,target:"_blank",href:r,onClick:({target:o})=>{o.href||(o.href=r)}},l("download")))}export const DownloadButtonWithLabel=memo(DownloadButtonWithLabelComponent);const DownloadButton=styled.a.attrs({className:"download-specification-button button-default"})`
   ${baseButtonStyles};
-
-  color: var(--button-color);
-  background-color: var(--button-background-color);
-  &:hover {
-    background-color: var(--button-hover-background-color);
-  }
-
-  &:active {
-    background-color: var(--button-active-background-color);
-  }
-
-  margin-left: 0.5em;
+  font-size: var(--button-small-font-size);
+  padding: var(--button-small-padding);
+  min-width: var(--button-small-min-width);
   text-decoration: none;
-  vertical-align: middle;
 `,DownloadWrapper=styled.p`
+  display: flex;
+  align-items: center;
   align-self: flex-start;
   padding-left: ${({wrapped:o})=>o?0:"var(--spacing-horizontal)"};
 `;

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

@@ -3,6 +3,6 @@ var __rest=this&&this.__rest||function(e,t){var o={};for(var r in e)Object.proto
   font-size: 14px;
   text-transform: none;
   font-weight: 400;
-  color: var(--text-color);
+  color: var(--text-primary);
 `;export function DropdownOrLabel(e){var{Label:t=MimeLabel,Dropdown:o=SimpleDropdown}=e,r=__rest(e,["Label","Dropdown"]);return 1===r.options.length?React.createElement(t,null,r.options[0].value):React.createElement(o,Object.assign({},r))}
 //# sourceMappingURL=DropdownOrLabel.js.map

package/lib-esm/components/Endpoint/Summary.js

@@ -1,2 +1,2 @@
-import React from"react";import{PanelHeader,ShelfIcon}from"@redocly/theme";import{HttpVerb}from"../shared";import{Path,PathWrapper,TryItButton}from"./styled";export const Summary=({operation:e,expanded:t=!1,toggle:r,onToggleConsole:o,tryItOverride:l,showConsole:a})=>{const n=(null==l?void 0:l.label)||"Try it",c=(null==l?void 0:l.link)?TryItButton.withComponent("a"):TryItButton;return React.createElement(PanelHeader,{onClick:r,expanded:t},React.createElement(PathWrapper,null,React.createElement(HttpVerb,{type:e.httpVerb},e.httpVerb),React.createElement(Path,null,e.path),React.createElement(ShelfIcon,{direction:t?"down":"right"})),!e.isWebhook&&!e.isCallback&&a&&React.createElement(c,{color:"primary",onClick:l?e=>{var t;null===(t=null==l?void 0:l.onClick)||void 0===t||t.call(l),e.stopPropagation()}:o,"data-cy":"try-it",href:null==l?void 0:l.link},n)||null)};
+import React from"react";import{PanelHeader,RocketIcon,ShelfIcon}from"@redocly/theme";import{HttpVerb}from"../shared";import{Path,PathWrapper,TryItButton}from"./styled";export const Summary=({operation:e,expanded:t=!1,toggle:o,onToggleConsole:r,tryItOverride:l,showConsole:n})=>{const a=(null==l?void 0:l.label)||"Try it",c=(null==l?void 0:l.link)?TryItButton.withComponent("a"):TryItButton;return React.createElement(PanelHeader,{onClick:o,expanded:t},React.createElement(PathWrapper,null,React.createElement(HttpVerb,{color:e.httpVerb},e.httpVerb),React.createElement(Path,null,e.path),React.createElement(ShelfIcon,{direction:t?"down":"right"})),!e.isWebhook&&!e.isCallback&&n&&React.createElement(c,{color:"primary",onClick:l?e=>{var t;null===(t=null==l?void 0:l.onClick)||void 0===t||t.call(l),e.stopPropagation()}:r,"data-cy":"try-it",href:null==l?void 0:l.link,icon:React.createElement(RocketIcon,null)},a)||null)};
 //# sourceMappingURL=Summary.js.map

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

@@ -1,10 +1,10 @@
-import styled from"styled-components";import{Button}from"@redocly/theme";import{invertedInputStyles}from"../rightPanel/styled";export const DescriptionWrapper=styled.div`
+import styled from"styled-components";import{Button}from"@redocly/theme";import{getInvertedInputStyles}from"../common/TextField";export const DescriptionWrapper=styled.div`
   display: flex;
   justify-content: space-between;
   margin-bottom: 10px;
 `;export const Path=styled.span`
   margin: 0 4px;
-  color: var(--text-color-inverse);
+  color: var(--text-secondary);
   overflow-x: hidden;
   text-overflow: ellipsis;
   white-space: ${({wrap:t})=>t?"normal":"nowrap"};
@@ -20,8 +20,8 @@ import styled from"styled-components";import{Button}from"@redocly/theme";import{
 `;export const ServerItem=styled.div`
   padding: 5px 0;
 `;export const ServerUrl=styled.div`
-  ${invertedInputStyles};
-  border-radius: 0 0 var(--border-radius) var(--border-radius);
+  ${getInvertedInputStyles("try-it")};
+  border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
   padding: 7px 12px;
   overflow-wrap: break-word;
 `;export const TryItButton=styled(Button)`
@@ -32,6 +32,7 @@ import styled from"styled-components";import{Button}from"@redocly/theme";import{
   color: var(--panel-try-it-action-button-text-color);
   background-color: var(--panel-try-it-action-button-background-color);
   border-color: var(--panel-try-it-action-button-border-color);
+  text-wrap: var(--panel-try-it-action-button-text-wrap);
 
   &:active {
     color: var(--panel-try-it-action-button-active-text-color);

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

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

package/lib-esm/components/Fields/FieldDetails.js

@@ -1,2 +1,2 @@
-import React,{memo,useState}from"react";import{useRecoilValue}from"recoil";import{PatternLabel,RecursiveLabel,TypeFormat,TypeName,TypePrefix,TypeTitle,ToggleButton,Badge}from"../common";import{ExternalDocumentation}from"../ExternalDocumentation";import{Markdown}from"../Markdown";import{l}from"../../services";import{FieldDetail}from"./FieldDetail";import{ConstraintsView}from"./ConstraintsView";import{Extensions}from"./Extensions";import{EnumValues}from"./EnumValues";import{Examples,getSerializedValue}from"./Examples";import{TypeWrapper,FieldDescriptionWrapper}from"./styled";import{globalOptionsSelector}from"../../recoil/store";const MAX_PATTERN_LENGTH=45;function FieldDetailsComponent({showExamples:e,field:t,renderDiscriminatorSwitch:a}){const[n,r]=useState(!1),{enumSkipQuotes:i,hideSchemaTitles:o,hideSchemaPattern:c}=useRecoilValue(globalOptionsSelector),{schema:m,description:s,example:p,deprecated:u,examples:d}=t,E=Boolean(i)||"header"===t.in;let R=null;if(e&&(void 0!==p||void 0!==d))if(void 0!==d)R=React.createElement(Examples,{field:t});else{const e=!!t.in;R=React.createElement(FieldDetail,{label:"example",value:getSerializedValue(t,t.example),raw:e})}return React.createElement("div",null,React.createElement(TypeWrapper,null,React.createElement(TypePrefix,null,m.typePrefix),React.createElement(TypeName,null,m.displayType),m.displayFormat&&React.createElement(TypeFormat,null," ","<",m.displayFormat,">"," "),m.contentEncoding&&React.createElement(TypeFormat,null," ","<",m.contentEncoding,">"," "),m.contentMediaType&&React.createElement(TypeFormat,null," ","<",m.contentMediaType,">"," "),m.title&&!o&&React.createElement(TypeTitle,null," (",m.title,") "),React.createElement(ConstraintsView,{constraints:m.constraints}),m.pattern&&!c&&React.createElement(React.Fragment,null,React.createElement(PatternLabel,null,n||m.pattern.length<MAX_PATTERN_LENGTH?m.pattern:`${m.pattern.substr(0,MAX_PATTERN_LENGTH)}...`),m.pattern.length>MAX_PATTERN_LENGTH&&React.createElement(ToggleButton,{onClick:()=>{r(!n)}},n?"Hide pattern":"Show pattern"))," ",m.isCircular&&React.createElement(RecursiveLabel,null,l("recursive"))),u&&React.createElement("div",null,React.createElement(Badge,{deprecated:!0,style:{marginLeft:0}}," ",l("deprecated")," ")),React.createElement(FieldDetail,{raw:E,label:"default",value:m.default}),React.createElement(FieldDescriptionWrapper,null,React.createElement(Markdown,{source:s})),!a&&React.createElement(EnumValues,{type:m.type,values:m["x-enumDescriptions"]||m.enum})," ",R,React.createElement(Extensions,{extensions:Object.assign(Object.assign({},t.extensions),m.extensions)}),m.externalDocs&&React.createElement(ExternalDocumentation,{externalDocs:m.externalDocs,compact:!0}),null==a?void 0:a(),t.const&&React.createElement(FieldDetail,{label:"const",value:t.const})||null)}export const FieldDetails=memo(FieldDetailsComponent);
+import React,{memo,useState}from"react";import{useRecoilValue}from"recoil";import{PatternLabel,RecursiveLabel,TypeFormat,TypeName,TypePrefix,TypeTitle,ToggleButton,DeprecatedLabel}from"../common";import{ExternalDocumentation}from"../ExternalDocumentation";import{Markdown}from"../Markdown";import{l}from"../../services";import{FieldDetail}from"./FieldDetail";import{ConstraintsView}from"./ConstraintsView";import{Extensions}from"./Extensions";import{EnumValues}from"./EnumValues";import{Examples,getSerializedValue}from"./Examples";import{TypeWrapper,FieldDescriptionWrapper}from"./styled";import{globalOptionsSelector}from"../../recoil/store";const MAX_PATTERN_LENGTH=45;function FieldDetailsComponent({showExamples:e,field:t,renderDiscriminatorSwitch:a}){const[n,r]=useState(!1),{enumSkipQuotes:i,hideSchemaTitles:o,hideSchemaPattern:c}=useRecoilValue(globalOptionsSelector),{schema:m,description:s,example:p,deprecated:u,examples:E}=t,d=Boolean(i)||"header"===t.in;let R=null;if(e&&(void 0!==p||void 0!==E))if(void 0!==E)R=React.createElement(Examples,{field:t});else{const e=!!t.in;R=React.createElement(FieldDetail,{label:"example",value:getSerializedValue(t,t.example),raw:e})}return React.createElement("div",null,React.createElement(TypeWrapper,null,React.createElement(TypePrefix,null,m.typePrefix),React.createElement(TypeName,null,m.displayType),m.displayFormat&&React.createElement(TypeFormat,null," ","<",m.displayFormat,">"," "),m.contentEncoding&&React.createElement(TypeFormat,null," ","<",m.contentEncoding,">"," "),m.contentMediaType&&React.createElement(TypeFormat,null," ","<",m.contentMediaType,">"," "),m.title&&!o&&React.createElement(TypeTitle,null," (",m.title,") "),React.createElement(ConstraintsView,{constraints:m.constraints}),m.pattern&&!c&&React.createElement(React.Fragment,null,React.createElement(PatternLabel,null,n||m.pattern.length<MAX_PATTERN_LENGTH?m.pattern:`${m.pattern.substr(0,MAX_PATTERN_LENGTH)}...`),m.pattern.length>MAX_PATTERN_LENGTH&&React.createElement(ToggleButton,{onClick:()=>{r(!n)}},n?"Hide pattern":"Show pattern"))," ",m.isCircular&&React.createElement(RecursiveLabel,null,l("recursive"))),u&&React.createElement("div",null,React.createElement(DeprecatedLabel,null,l("deprecated"))),React.createElement(FieldDetail,{raw:d,label:"default",value:m.default}),React.createElement(FieldDescriptionWrapper,null,React.createElement(Markdown,{source:s})),!a&&React.createElement(EnumValues,{type:m.type,values:m["x-enumDescriptions"]||m.enum})," ",R,React.createElement(Extensions,{extensions:Object.assign(Object.assign({},t.extensions),m.extensions)}),m.externalDocs&&React.createElement(ExternalDocumentation,{externalDocs:m.externalDocs,compact:!0}),null==a?void 0:a(),t.const&&React.createElement(FieldDetail,{label:"const",value:t.const})||null)}export const FieldDetails=memo(FieldDetailsComponent);
 //# sourceMappingURL=FieldDetails.js.map

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

@@ -1,2 +1,2 @@
-import{Button}from"@redocly/theme";import React from"react";import{Link}from"../common";export function NextSectionButton({pagination:t,href:e,label:o}){return t&&"none"!==t?React.createElement(Link,{to:e},React.createElement(Button,{extraClass:"next-section-button",color:"secondary"},"➔ Next to ",React.createElement("strong",null,o))):null}
+import{Button}from"@redocly/theme";import React from"react";import{Link}from"../common";export function NextSectionButton({pagination:t,href:e,label:n}){return t&&"none"!==t?React.createElement(Link,{to:e},React.createElement(Button,{extraClass:"next-section-button"},"➔ Next to ",React.createElement("strong",null,n))):null}
 //# sourceMappingURL=NextSectionButton.js.map

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

@@ -1,12 +1,15 @@
 import styled from"styled-components";import{PanelHeader}from"@redocly/theme";export const CodeHeader=styled(PanelHeader)`
   cursor: default;
-  border-bottom-right-radius: 0 !important;
-  border-bottom-left-radius: 0 !important;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
   min-height: 50px;
   --panel-heading-background-color: var(--panel-samples-heading-background-color);
   --panel-heading-padding-local: var(--panel-samples-heading-padding);
   --panel-heading-text-color: var(--panel-samples-heading-text-color);
 `;export const StyledCodeHeader=styled(CodeHeader)`
+  --panel-heading-font-size-local: var(--panel-heading-font-size);
+  --panel-heading-white-space-local: var(--panel-heading-white-space);
+  --panel-heading-line-height-local: var(--panel-heading-line-height);
   --panel-heading-padding-local: 10px 20px;
 `;
 //# sourceMappingURL=CodeHeader.js.map

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

@@ -1,6 +1,2 @@
-import styled from"styled-components";import{Panel,PanelHeader}from"@redocly/theme";export const CodePanel=styled(Panel)`
-  > ${PanelHeader} {
-    min-height: 50px;
-  }
-`;
+import styled from"styled-components";import{Panel}from"@redocly/theme";export const CodePanel=styled(Panel)``;
 //# sourceMappingURL=CodePanel.js.map

package/lib-esm/components/Parameters/ParametersGroup.js

@@ -1,7 +1,7 @@
 import React,{memo}from"react";import styled from"styled-components";import{FieldsGroupHeader,PropertiesTable}from"../../components";import{Field}from"../Fields";import{mapWithLast}from"../../utils";function ParametersGroupComponent({place:e,parameters:t}){return t&&t.length?React.createElement(Wrap,{key:e},React.createElement(FieldsGroupHeader,null,e," Parameters"),React.createElement(PropertiesTable,null,React.createElement("tbody",null,mapWithLast(t,((e,t)=>React.createElement(Field,{key:e.name,isLast:t,field:e,showExamples:!0})))))):null}export const ParametersGroup=memo(ParametersGroupComponent);export const Wrap=styled.div`
   margin: 20px 0 0 0;
   padding-bottom: 20px;
-  border-bottom: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--border-primary);
 
   &:first-child {
     margin: 0;

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

@@ -10,7 +10,7 @@ import{LayoutVariant}from"@redocly/theme";import styled,{createGlobalStyle,css}f
   font-size: var(--font-size-base);
   line-height: var(--line-height-base);
   font-weight: var(--font-weight-regular);
-  color: var(--text-color);
+  color: var(--text-base);
   -webkit-font-text-smoothing: var(--text-smoothing);
 
   * {
@@ -70,7 +70,7 @@ import{LayoutVariant}from"@redocly/theme";import styled,{createGlobalStyle,css}f
     (
         100% - min(100% - var(--sidebar-width) - var(--layout-controls-width), var(${a})) -
           var(--sidebar-width) + var(--layout-controls-width)
-      ) / 2 + 2px /* 2px to account for rounding errors */
+      ) / 2 - 4px /* -4px fix overlap for panels */
   );
 `;export const BackgroundStubFix=styled.div`
   position: absolute;

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

@@ -2,7 +2,7 @@ import React from"react";import styled from"styled-components";export const Cros
   cursor: pointer;
   position: absolute;
   right: 15px;
-  color: var(--text-color);
+  color: var(--text-secondary);
 `;export const ButtonClear=styled.i.attrs((()=>({className:"button-clear"})))`
   cursor: pointer;
   position: absolute;
@@ -97,8 +97,10 @@ import React from"react";import styled from"styled-components";export const Cros
     background-color: var(--search-modal-clear-button-background-color);
     padding: 4px 16px;
     border-radius: var(--border-radius);
+    border: var(--search-modal-clear-button-border);
     &:hover {
       background-color: var(--search-modal-clear-button-hover-background-color);
+      border: var(--search-modal-clear-button-hover-border);
     }
   }
 `;export const TextContainer=styled.div`

package/lib-esm/components/SecurityRequirement/RequirementElement.js

@@ -12,7 +12,7 @@ import React from"react";import styled from"styled-components";import{linksCss}f
 `,SecurityRequirementOrWrap=styled.span`
   ${linksCss};
 `,ScopeName=styled.code`
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--border-primary);
   margin: 0 3px;
   padding: 0.2em;
   line-height: 1;

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

@@ -1,5 +1,5 @@
 import React,{Fragment,memo,useState}from"react";import styled from"styled-components";import{useRecoilValue}from"recoil";import{MarkdownWrapper}from"@redocly/theme";import{Markdown}from"../Markdown";import{OAuthFlow}from"../SecuritySchemes";import{PanelDescription}from"./PanelDescription";import{RequirementElement}from"./RequirementElement";import{RequiredScopesRow}from"./RequiredScopesRow";import{LockIcon}from"../icons";import{Row}from"./styled";import{AUTH_TYPES}from"./constants";import{l}from"../../services";import{titleize}from"../../utils";import{ContentPanel}from"../Panel";import{globalStoreSelector}from"../../recoil/store";import{useSecurityRequirements}from"./useSecurityRequirements";function getRequiredScopes(e,t){const r=[];let o=t.length;for(;o--;){const n=t[o];let c=n.schemes.length;for(;c--;){const t=n.schemes[c];t.id===e&&r.push(...t.scopes)}}return Array.from(new Set(r))}function SecurityRequirementsComponent({securities:e}){const[t,r]=useState(!1),{options:{showSecuritySchemeType:o,hideSecuritySection:n},parser:c}=useRecoilValue(globalStoreSelector),a=useSecurityRequirements({parser:c,securities:e});return!e.length||n?null:React.createElement(ContentPanel,{className:"panel-security-schemas",header:l("authorizations"),onToggle:e=>r(e),description:!t&&React.createElement(PanelDescription,{securities:e,showSecuritySchemeType:o}),expanded:t},t&&a&&a.length>1?React.createElement(SecurityRequirementBlock,null,e.map(((t,r)=>{let n,c,a="";return e.length>1&&t.schemes.length>1&&(c=0===r?"(":"",a=")"),r!==e.length-1&&(a+=" or",n=React.createElement("br",null)),React.createElement(Fragment,{key:t.schemes.map((({id:e})=>e)).join("")},c,React.createElement(RequirementElement,{security:t,showSecuritySchemeType:o}),a,n)}))):null,t?a.map((t=>{const r=getRequiredScopes(t.id,e);return React.createElement(SecurityDetails,{key:t.id},React.createElement("h5",null,React.createElement(LockIcon,{size:"11px",style:{verticalAlign:"baseline"},color:"--panel-body-text-color"})," ",AUTH_TYPES[t.type]||t.type,": ",t.id),React.createElement(Markdown,{source:t.description||""}),React.createElement(MarkdownWrapper,{key:t.id},t.apiKey?React.createElement(React.Fragment,null,React.createElement(Row,null,React.createElement("b",null,titleize(t.apiKey.in||"")," parameter name: "),React.createElement("code",null,t.apiKey.name)),React.createElement(RequiredScopesRow,{scopes:r})):t.http?React.createElement(React.Fragment,null,React.createElement(Row,null,React.createElement("b",null,"HTTP Authorization Scheme: "),React.createElement("code",null,t.http.scheme)),React.createElement(Row,null,"bearer"===t.http.scheme&&t.http.bearerFormat&&React.createElement(React.Fragment,null,React.createElement("b",null,"Bearer format: "),React.createElement("code",null,t.http.bearerFormat))),React.createElement(RequiredScopesRow,{scopes:r})):t.openId?React.createElement(React.Fragment,null,React.createElement(Row,null,React.createElement("b",null,"Connect URL: "),React.createElement("code",null,React.createElement("a",{target:"_blank",rel:"noopener noreferrer",href:t.openId.connectUrl},t.openId.connectUrl))),React.createElement(RequiredScopesRow,{scopes:r})):t.flows?Object.keys(t.flows).map((e=>React.createElement(OAuthFlow,{key:e,type:e,flow:t.flows[e]},React.createElement(RequiredScopesRow,{scopes:r})))):null))})):null)}export const SecurityRequirements=memo(SecurityRequirementsComponent);const SecurityDetails=styled.div`
-  border-bottom: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--border-primary);
   margin-bottom: 1.5em;
   padding-bottom: 0.7em;
   &:last-child {

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

@@ -1,2 +1,2 @@
-import React,{memo,useCallback}from"react";import{Badge}from"@redocly/theme";import{Pagination}from"../../services";import{MenuItemLi,MenuItemTitle}from"./styled";import{MenuItems}from"./MenuItems";import{MenuItemLink}from"./MenuItemLink";import{MenuOperationItemContent}from"./MenuOperationItemContent";import{ShelfIcon}from"../icons";import{encodeBackSlashes}from"../../utils";import{useMenuItemExpanded}from"./hooks";function MenuItemComponent({item:e,children:t,onClick:n,pagination:m}){var i;const[o,a]=useMenuItemExpanded(e),r=getLink(e,m),c=useCallback((()=>{r&&e.hasActiveSubItem||a(!o)}),[r,e.hasActiveSubItem,a,o]),l=(null===(i=e.items)||void 0===i?void 0:i.length)>0;return React.createElement(MenuItemLi,{depth:e.depth,"data-item-id":e.id,onClick:n},"operation"===e.type?React.createElement(MenuOperationItemContent,{item:e,to:r,active:e.active},t):React.createElement(MenuItemLink,{to:r,depth:e.depth,type:e.type,hasChildren:l,active:e.active,onClick:c},e.depth>0&&l&&React.createElement(ShelfIcon,{direction:o?"down":"right"})||null,e.isSchema?React.createElement(Badge,{type:"schema"},"schema"):null,React.createElement(MenuItemTitle,{title:e.name},e.name,t)),l&&React.createElement(MenuItems,{expanded:o,items:e.items}))}export const MenuItem=memo(MenuItemComponent);export function getLink(e,t){return"tag"!==e.type||e.description||t!==Pagination.Item?encodeBackSlashes(e.href):""}
+import React,{memo,useCallback}from"react";import{Tag}from"@redocly/theme";import{Pagination}from"../../services";import{MenuItemLi,MenuItemTitle}from"./styled";import{MenuItems}from"./MenuItems";import{MenuItemLink}from"./MenuItemLink";import{MenuOperationItemContent}from"./MenuOperationItemContent";import{ShelfIcon}from"../icons";import{encodeBackSlashes}from"../../utils";import{useMenuItemExpanded}from"./hooks";function MenuItemComponent({item:e,children:t,onClick:n,pagination:m}){var o;const[i,a]=useMenuItemExpanded(e),r=getLink(e,m),c=useCallback((()=>{r&&e.hasActiveSubItem||a(!i)}),[r,e.hasActiveSubItem,a,i]),l=(null===(o=e.items)||void 0===o?void 0:o.length)>0;return React.createElement(MenuItemLi,{depth:e.depth,"data-item-id":e.id,onClick:n},"operation"===e.type?React.createElement(MenuOperationItemContent,{item:e,to:r,active:e.active},t):React.createElement(MenuItemLink,{to:r,depth:e.depth,type:e.type,hasChildren:l,active:e.active,onClick:c},e.depth>0&&l&&React.createElement(ShelfIcon,{direction:i?"down":"right"})||null,e.isSchema?React.createElement(Tag,{color:"schema"},"schema"):null,React.createElement(MenuItemTitle,{title:e.name},e.name,t)),l&&React.createElement(MenuItems,{expanded:i,items:e.items}))}export const MenuItem=memo(MenuItemComponent);export function getLink(e,t){return"tag"!==e.type||e.description||t!==Pagination.Item?encodeBackSlashes(e.href):""}
 //# sourceMappingURL=MenuItem.js.map

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

@@ -1,8 +1,8 @@
-import React,{memo}from"react";import{Badge}from"@redocly/theme";import styled from"styled-components";import{useRecoilValue}from"recoil";import{MenuItemPath,MenuItemTitle}from"./styled";import{MenuItemLink}from"./MenuItemLink";import{SideNavStyle,l}from"../../services";import{shortenHTTPVerb}from"../../utils";import{globalOptionsSelector}from"../../recoil/store";const MenuItemOperationLink=styled(MenuItemLink)`
+import React,{memo}from"react";import{HttpTag}from"@redocly/theme";import styled from"styled-components";import{useRecoilValue}from"recoil";import{MenuItemPath,MenuItemTitle}from"./styled";import{MenuItemLink}from"./MenuItemLink";import{SideNavStyle,l}from"../../services";import{shortenHTTPVerb}from"../../utils";import{globalOptionsSelector}from"../../recoil/store";const MenuItemOperationLink=styled(MenuItemLink)`
   flex-wrap: wrap;
 `,MenuItemDescription=styled.small`
   display: block;
   font-size: 0.87em;
   line-height: 1.2;
-`;function MenuOperationItemContentComponent({item:e,to:t,children:o,active:n}){let r,i;const{sideNavStyle:m,showWebhookVerb:a}=useRecoilValue(globalOptionsSelector);return m!==SideNavStyle.PathFirst&&!e.search||"operation"!==e.type?(r=m===SideNavStyle.IdOnly?e.operationId||e.path:e.name,i=null):(r=React.createElement(MenuItemPath,{title:e.path}," ",e.path," "),i=React.createElement(MenuItemDescription,null," ",e.name," ")),React.createElement(MenuItemOperationLink,{depth:e.depth,deprecated:e.deprecated,to:t,active:n},e.isWebhook?React.createElement(Badge,{type:"hook"},a?e.httpVerb:l("webhook")):React.createElement(Badge,{type:e.httpVerb},shortenHTTPVerb(e.httpVerb)),React.createElement(MenuItemTitle,{width:"calc(100% - 42px)"},r,o),i)}export const MenuOperationItemContent=memo(MenuOperationItemContentComponent);
+`;function MenuOperationItemContentComponent({item:e,to:t,children:o,active:n}){let r,i;const{sideNavStyle:m,showWebhookVerb:a}=useRecoilValue(globalOptionsSelector);return m!==SideNavStyle.PathFirst&&!e.search||"operation"!==e.type?(r=m===SideNavStyle.IdOnly?e.operationId||e.path:e.name,i=null):(r=React.createElement(MenuItemPath,{title:e.path}," ",e.path," "),i=React.createElement(MenuItemDescription,null," ",e.name," ")),React.createElement(MenuItemOperationLink,{depth:e.depth,deprecated:e.deprecated,to:t,active:n},e.isWebhook?React.createElement(HttpTag,{color:"hook"},a?e.httpVerb:l("webhook")):React.createElement(HttpTag,{color:e.httpVerb},shortenHTTPVerb(e.httpVerb)),React.createElement(MenuItemTitle,{width:"calc(100% - 42px)"},r,o),i)}export const MenuOperationItemContent=memo(MenuOperationItemContentComponent);
 //# sourceMappingURL=MenuOperationItemContent.js.map

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

@@ -1,2 +1,2 @@
-import React from"react";import{CodeBlockContainer,CodeBlockControls}from"@redocly/theme";import styled from"styled-components";import{DownloadLink}from"../Download";import{FileIcon}from"../icons";export function SourceCodeWithFile({fileInfo:e}){return React.createElement(Wrapper,null,React.createElement(CodeBlockControls,null,React.createElement(DownloadLink,{fileInfo:e})),React.createElement(CodeBlockContainer,null,React.createElement(FileIcon,{color:"--text-color-inverse"}),null==e?void 0:e.fileName))}const Wrapper=styled.div``;
+import React from"react";import{CodeBlockContainer,CodeBlockControls}from"@redocly/theme";import styled from"styled-components";import{DownloadLink}from"../Download";import{FileIcon}from"../icons";export function SourceCodeWithFile({fileInfo:e}){return React.createElement(Wrapper,null,React.createElement(CodeBlockControls,null,React.createElement(DownloadLink,{fileInfo:e})),React.createElement(CodeBlockContainer,null,React.createElement(FileIcon,{color:"--text-secondary"}),null==e?void 0:e.fileName))}const Wrapper=styled.div``;
 //# sourceMappingURL=SourceCodeWithFile.js.map

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

@@ -24,8 +24,8 @@ import React,{memo,useEffect,useRef,useState}from"react";import styled,{css}from
     }
   `}
 `,FloatingButton=styled(MobileSidebarButton)`
-  --fab-background-color: var(--color-secondary-900);
-  --fab-active-background: var(--color-secondary-900);
+  --fab-background-color: var(--bg-overlay);
+  --fab-active-background: var(--bg-raised);
 
   ${({theme:e})=>css`
     ${e.mediaQueries[e.showAtBreakpoint.sidebar]} {
@@ -35,5 +35,5 @@ import React,{memo,useEffect,useRef,useState}from"react";import styled,{css}from
       display: none;
     }
   `}
-`;function StickyResponsiveSidebarComponent({scrollYOffset:e,hideFab:t,className:i,children:o,collapsedSidebar:r}){const[a,l]=useState("0px"),s=useRef(null),c=useLocation(),[n,d]=useRecoilState(isSidebarOpenedSelector);useEffect((()=>{c.hash&&d(!1)}),[c.pathname,c.hash,d]),useMount((()=>{stickyfill&&stickyfill.add(s.current);const t=e();l(`${t}px`)})),useUnmount((()=>{stickyfill&&stickyfill.remove(s.current)}));return React.createElement(React.Fragment,null,React.createElement(StyledStickySidebar,{open:n,className:i,offsetTop:a,style:{top:a},ref:s,collapsedSidebar:r},r||n?o:null,React.createElement(Actions,null)),!t&&React.createElement(FloatingButton,{opened:n,onClick:()=>{d(!n)}},React.createElement(MobileSidebarIcon,null)))}export const StickyResponsiveSidebar=memo(StickyResponsiveSidebarComponent);
+`;function StickyResponsiveSidebarComponent({scrollYOffset:e,hideFab:t,className:i,children:o,collapsedSidebar:r}){const[a,l]=useState("0px"),s=useRef(null),n=useLocation(),[c,d]=useRecoilState(isSidebarOpenedSelector);useEffect((()=>{n.hash&&d(!1)}),[n.pathname,n.hash,d]),useMount((()=>{stickyfill&&stickyfill.add(s.current);const t=e();l(`${t}px`)})),useUnmount((()=>{stickyfill&&stickyfill.remove(s.current)}));return React.createElement(React.Fragment,null,React.createElement(StyledStickySidebar,{open:c,className:i,offsetTop:a,style:{top:a},ref:s,collapsedSidebar:r},r||c?o:null,React.createElement(Actions,null)),!t&&React.createElement(FloatingButton,{opened:c,onClick:()=>{d(!c)}},React.createElement(MobileSidebarIcon,null)))}export const StickyResponsiveSidebar=memo(StickyResponsiveSidebarComponent);
 //# sourceMappingURL=StickyResponsiveSidebar.js.map

package/lib-esm/components/Tabs/CollapsingTabs/CollapsingTabList.js

@@ -1,4 +1,12 @@
 import styled from"styled-components";import{TabList}from"../TabList";export const CollapsingTabList=styled(TabList)`
-  margin: 0 0 10px;
+  background-color: var(--bg-overlay);
+  border-radius: var(--border-radius-lg);
+  padding: 2px;
+  margin: 0 0 15px;
+
+  li[class^='Tab'] {
+    margin: 0;
+    list-style: none;
+  }
 `;
 //# sourceMappingURL=CollapsingTabList.js.map

package/lib-esm/components/Tabs/Tab.js

@@ -1,32 +1,28 @@
 import{Tab as ReactTab}from"react-tabs";import styled from"styled-components";export const Tab=styled(ReactTab)`
   flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   cursor: pointer;
-  padding: 5px 10px;
+  padding: 0px 8px;
   font-size: var(--panel-samples-tabs-font-size);
   line-height: 26px;
   font-weight: var(--panel-samples-tabs-font-weight);
   text-align: center;
   color: var(--panel-samples-tabs-text-color);
   background-color: var(--panel-samples-tabs-background-color);
-  border-bottom: 4px solid var(--panel-samples-tabs-border-color);
-  margin-bottom: -4px;
+  border-radius: var(--border-radius-lg);
 
   &:hover {
     border-color: var(--panel-samples-tabs-hover-border-color);
     background-color: var(--panel-samples-tabs-hover-background-color);
+    color: var(--panel-samples-tabs-hover-text-color);
   }
 
   &.react-tabs__tab--selected {
     background-color: var(--panel-samples-tabs-active-background-color);
     border-color: var(--panel-samples-tabs-active-border-color);
-  }
-
-  &:first-child {
-    border-top-left-radius: var(--border-radius);
-  }
-
-  &:last-child {
-    border-top-right-radius: var(--border-radius);
+    color: var(--panel-samples-tabs-active-text-color);
   }
 `;
 //# sourceMappingURL=Tab.js.map

package/lib-esm/components/common/CheckboxList.js

@@ -1,7 +1,7 @@
-import{asField}from"informed";import{CodeBlockControls,CodeBlockControlButton}from"@redocly/theme";import React,{useState}from"react";import styled from"styled-components";import{FormError}from"./form";import{Checkbox}from"./Checkbox";const DEFAULT_MAX_ITEMS=11;export const CheckboxListComponent=({items:e,fieldApi:t,validateOnChange:o,maxDisplayedItems:l,showControls:r,trimItemsLength:c})=>{const[a,n]=useState(!0),s=e=>t.getValue().includes(e),i=t.getError(),d=l||11,m=c&&a?e.slice(0,d):e;return React.createElement("div",null,r?React.createElement(CodeBlockControls,{controls:{select:{onClick:()=>{t.setValue(e)},label:"Select all",tooltipText:"Select all checkboxes"},deselect:{onClick:()=>{t.setValue([])},label:"Deselect all",tooltipText:"Deselect all checkboxes"}}}):null,React.createElement(ListWrapper,null,m.map((e=>React.createElement(Checkbox,{fullWidth:!0,id:e,value:e,checked:s(e),label:e,key:e,onChange:e=>{(e=>{const o=e.target.value,l=e.target.checked;t.setTouched(!0);const r=t.getValue()||[];let c;if(l)c=[...r,o];else{const e=r.indexOf(o);c=[...r.slice(0,e),...r.slice(e+1)]}t.setValue(c)})(e),o&&t.validate()}}))),e.length>d&&c?React.createElement(ToggleButton,{onClick:()=>{n((e=>!e))}},a?"Show all":"Collapse"):null),i?React.createElement(FormError,null,i):"")};export const CheckboxList=asField(CheckboxListComponent);const ListWrapper=styled.div`
+import{asField}from"informed";import{CodeBlockControls,CodeBlockControlButton}from"@redocly/theme";import React,{useState}from"react";import styled from"styled-components";import{FormError}from"./form";import{Checkbox}from"./Checkbox";const DEFAULT_MAX_ITEMS=11;export const CheckboxListComponent=({items:e,fieldApi:t,validateOnChange:o,maxDisplayedItems:l,showControls:r,trimItemsLength:c})=>{const[a,s]=useState(!0),n=e=>t.getValue().includes(e),i=t.getError(),d=l||11,m=c&&a?e.slice(0,d):e;return React.createElement("div",null,r?React.createElement(CodeBlockControls,{controls:{select:{onClick:()=>{t.setValue(e)},label:"Select all",tooltipText:"Select all checkboxes"},deselect:{onClick:()=>{t.setValue([])},label:"Deselect all",tooltipText:"Deselect all checkboxes"}}}):null,React.createElement(ListWrapper,null,m.map((e=>React.createElement(Checkbox,{fullWidth:!0,id:e,value:e,checked:n(e),label:e,key:e,onChange:e=>{(e=>{const o=e.target.value,l=e.target.checked;t.setTouched(!0);const r=t.getValue()||[];let c;if(l)c=[...r,o];else{const e=r.indexOf(o);c=[...r.slice(0,e),...r.slice(e+1)]}t.setValue(c)})(e),o&&t.validate()}}))),e.length>d&&c?React.createElement(ToggleButton,{onClick:()=>{s((e=>!e))}},a?"Show all":"Collapse"):null),i?React.createElement(FormError,null,i):"")};export const CheckboxList=asField(CheckboxListComponent);const ListWrapper=styled.div`
   padding: 10px;
-  background-color: var(--panel-samples-input-background-color);
-  border-radius: 0 0 var(--border-radius) var(--border-radius);
+  border: 1px solid var(--border-primary);
+  border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
 `,ToggleButton=styled(CodeBlockControlButton)`
   float: right;
 `;

package/lib-esm/components/common/Dropdown/Dropdown.js

@@ -10,7 +10,7 @@ import React,{memo,useMemo}from"react";import styled from"styled-components";imp
   margin: auto;
   text-align: center;
   polyline {
-    color: ${e=>"dark"===e.variant&&"white"};
+    color: inherit;
   }
-`,DropdownComponent=({options:e,onChange:t,handleClear:o,clearable:n,placeholder:a,value:r="",className:l,variant:s="light"})=>{var i;const c=useMemo((()=>e.map((({idx:e,value:t,title:o},n)=>{const a=normalizeText(t);return React.createElement("option",{key:e||a+n,value:a,className:"dropdown-option"},o||a)}))),[e]),m=normalizeText(r),d=(null===(i=e.find((e=>e.value===r)))||void 0===i?void 0:i.title)||m;return React.createElement("div",{className:l+" dropdown-wrapper"},React.createElement(ArrowIcon,{variant:s}),n&&(null==m?void 0:m.length)>0&&React.createElement(ClearButton,{handleClear:o}),React.createElement("select",{onChange:o=>{const{selectedIndex:n}=o.target;t(e[a||!r?n-1:n])},value:m,className:"dropdown-select"},a&&React.createElement("option",{disabled:!0,hidden:!0,value:a},a),!m&&!a&&React.createElement("option",{disabled:!0}),c),React.createElement("label",null,d))};export const Dropdown=memo(DropdownComponent);
+`,DropdownComponent=({options:e,onChange:t,handleClear:o,clearable:n,placeholder:r,value:a="",className:l})=>{var s;const c=useMemo((()=>e.map((({idx:e,value:t,title:o},n)=>{const r=normalizeText(t);return React.createElement("option",{key:e||r+n,value:r,className:"dropdown-option"},o||r)}))),[e]),i=normalizeText(a),m=(null===(s=e.find((e=>e.value===a)))||void 0===s?void 0:s.title)||i;return React.createElement("div",{className:l+" dropdown-wrapper"},React.createElement(ArrowIcon,null),n&&(null==i?void 0:i.length)>0&&React.createElement(ClearButton,{handleClear:o}),React.createElement("select",{onChange:o=>{const{selectedIndex:n}=o.target;t(e[r||!a?n-1:n])},value:i,className:"dropdown-select"},r&&React.createElement("option",{disabled:!0,hidden:!0,value:r},r),!i&&!r&&React.createElement("option",{disabled:!0}),c),React.createElement("label",null,m))};export const Dropdown=memo(DropdownComponent);
 //# sourceMappingURL=Dropdown.js.map

package/lib-esm/components/common/Dropdown/styled.js

@@ -6,14 +6,12 @@ import styled,{css}from"styled-components";import{Dropdown as DropdownComponent}
   &,
   &:hover,
   &:focus-within {
-    border: none;
     box-shadow: none;
   }
 `;export const Dropdown=styled(DropdownComponent)`
   box-sizing: border-box;
   outline: none;
   display: inline-block;
-  border-radius: var(--border-radius);
   vertical-align: bottom;
   position: relative;
   width: ${({fullWidth:o})=>o?"100%":"auto"};
@@ -27,8 +25,7 @@ import styled,{css}from"styled-components";import{Dropdown as DropdownComponent}
     outline: none;
     display: inline-block;
     color: var(--docs-dropdown-text-color);
-    border-radius: var(--border-radius);
-    border: var(--docs-dropdown-border);
+    border-radius: var(--border-radius-md);
     padding: var(--docs-dropdown-padding);
     vertical-align: bottom;
     width: ${({fullWidth:o})=>o?"100%":"auto"};
@@ -43,7 +40,6 @@ import styled,{css}from"styled-components";import{Dropdown as DropdownComponent}
     &,
     &:hover,
     &:focus-within {
-      border: 1px solid var(--border-color);
       box-shadow: none;
     }
 
@@ -61,9 +57,9 @@ import styled,{css}from"styled-components";import{Dropdown as DropdownComponent}
     appearance: none;
     cursor: pointer;
 
-    color: var(--text-color);
+    color: var(--text-secondary);
     line-height: inherit;
-    font-size: 14px;
+    font-size: var(--font-size-base);
     font-family: inherit;
     padding: var(--docs-dropdown-padding);
     ${({variant:o})=>"dark"===o?darkDropdownStyle:""};
@@ -75,16 +71,14 @@ import styled,{css}from"styled-components";import{Dropdown as DropdownComponent}
   }
   label {
     padding: 0 26px 0 4px;
-    border: none;
     background: transparent;
-    font-size: 14px;
-    font-weight: 400;
+    font-size: var(--font-size-base);
+    font-weight: var(--font-weight-regular);
     appearance: none;
     height: auto;
 
     &:hover,
     &:focus-within {
-      border: none;
       box-shadow: none;
     }
   }
@@ -96,22 +90,16 @@ import styled,{css}from"styled-components";import{Dropdown as DropdownComponent}
   label {
     ${darkDropdownStyle};
 
-    height: 40px;
-    border-radius: 0 var(--border-radius) 0 0;
-    margin: 0 0 -4px;
+    border-radius: var(--border-radius-lg);
+    margin-left: 5px;
     transition: none;
     min-width: auto;
-    background: ${({active:o})=>o?"var(--panel-samples-tabs-active-background-color)":"none"};
+    background-color: ${({active:o})=>o?"var(--panel-samples-tabs-active-background-color)":"var(--bg-base)"};
     & {
-      border-bottom: 4px solid
-        ${({active:o})=>o?"var(--panel-samples-tabs-active-border-color)":"transparent"};
-
       &[open],
       &:focus-within,
       &:hover {
-        background: var(--border-color-secondary);
-        border-bottom: 4px solid
-          ${({active:o})=>o?"var( --panel-samples-tabs-active-border-color)":"transparent"};
+        background-color: var(--bg-raised);
       }
     }
   }
@@ -120,7 +108,7 @@ import styled,{css}from"styled-components";import{Dropdown as DropdownComponent}
   label {
     width: 100%;
     font-weight: 600;
-    color: var(--text-color);
+    color: var(--text-secondary);
   }
 `;export const SchemaDiscriminatorDropdown=styled(Dropdown)`
   .dropdown-select {

package/lib-esm/components/common/Dropdown/types.d.ts

@@ -21,6 +21,5 @@ export interface DropdownProps {
 }
 export interface ArrowIconProps {
     className?: string;
-    variant?: 'light' | 'dark';
     style?: React.CSSProperties;
 }

package/lib-esm/components/common/Fields/fields-layout.js

@@ -2,7 +2,7 @@ import styled,{css}from"styled-components";import{typography}from"../../../utils
   text-align: right;
   font-size: 0.9em;
   font-weight: normal;
-  color: var(--text-color-secondary);
+  color: var(--text-secondary);
 `;const repeatingGradient=css`
   repeating-linear-gradient(0deg,
   var(--schemas-lines-color),
@@ -122,7 +122,7 @@ import styled,{css}from"styled-components";import{typography}from"../../../utils
   min-width: 200px;
 
   ${({theme:e})=>e.mediaQueries.small} {
-    border-bottom: 1px solid var(--border-color);
+    border-bottom: 1px solid var(--border-primary);
     border-left: none;
     padding: 10px 0;
   }

package/lib-esm/components/common/Fields/fields.d.ts

@@ -12,6 +12,7 @@ export declare const AdditionalPropertiesLabel: import("styled-components").Styl
 export declare const AccessLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const FieldValueLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const RecursiveLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const DeprecatedLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const EnumValue: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const DefaultValue: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const ExampleValue: import("styled-components").StyledComponent<"span", any, {}, never>;

package/lib-esm/components/common/Fields/fields.js

@@ -5,7 +5,7 @@ import styled,{css}from"styled-components";import{typography}from"../../../utils
     outline: 0;
     cursor: pointer;
     padding: 0 10px 0 0;
-    color: var(--text-color);
+    color: var(--text-primary);
     &:focus {
       font-weight: var(--font-weight-bold);
     }
@@ -40,7 +40,7 @@ import styled,{css}from"styled-components";import{typography}from"../../../utils
   color: var(--schema-type-title-text-color);
   word-break: break-word;
 `;export const TypeFormat=TypeName;export const PropertyLabel=styled(FieldLabel.withComponent("div"))`
-  color: var(--text-color-secondary);
+  color: var(--text-secondary);
   font-size: var(--schema-labels-font-size);
   font-weight: normal;
   line-height: 1;
@@ -62,6 +62,10 @@ import styled,{css}from"styled-components";import{typography}from"../../../utils
   background-color: var(--schema-recursive-background-color);
   border-color: var(--schema-recursive-border-color);
   color: var(--schema-recursive-text-color);
+`;export const DeprecatedLabel=styled(FieldValueLabel)`
+  color: var(--badge-deprecated-text-color);
+  background-color: var(--badge-deprecated-background-color);
+  border-color: var(--badge-deprecated-border-color);
 `;export const EnumValue=styled(FieldValueLabel)`
   background-color: var(--schema-enum-background-color);
   border-color: var(--schema-enum-border-color);
@@ -97,11 +101,11 @@ import styled,{css}from"styled-components";import{typography}from"../../../utils
 `;export const PatternLabel=styled(ConstraintItem)``;export const ToggleButton=styled.button`
   background-color: transparent;
   border: 0;
-  color: var(--text-color-secondary);
+  color: var(--text-secondary);
   margin-left: var(--spacing-unit);
   border-radius: var(--border-radius);
   cursor: pointer;
-  outline-color: var(--text-color-secondary);
+  outline-color: var(--text-secondary);
   font-size: 12px;
 `;
 //# sourceMappingURL=fields.js.map

package/lib-esm/components/common/form.js

@@ -30,18 +30,18 @@ import styled,{css}from"styled-components";export const Table=styled.div`
         display: inline-block;
         content: '*';
         margin-left: 4px;
-        color: var(--color-error-500);
+        color: var(--color-error);
       }
     `}
 `;export const FormError=styled.div`
-  color: var(--color-error-500);
+  color: var(--color-error);
   font-size: 0.9em;
   & pre {
     word-break: break-word;
     white-space: pre-wrap;
   }
 `;export const FormWarning=styled.div`
-  color: var(--color-warning-500);
+  color: var(--color-warning);
   font-size: 0.9em;
 `;function placeholder(o,e){let t="";for(let r=0;r<o;r++)t+=e;return'"'+t+'"'}export const TokenField=styled.div`
   position: relative;
@@ -55,7 +55,7 @@ import styled,{css}from"styled-components";export const Table=styled.div`
   padding: 0 5px;
   cursor: pointer;
 `;export const TokenClear=styled(TokenShowHide)`
-  color: var(--color-error-500);
+  color: var(--color-error);
 `;export const FormHeader=styled.div`
   font-weight: bold;
   font-size: 1.2em;

package/lib-esm/components/common/headers.js

@@ -3,7 +3,7 @@ import styled from"styled-components";import{typography}from"../../utils";export
 
   ${typography("right-panel-header")};
 `;export const FieldsGroupHeader=styled.h5`
-  color: var(--text-color-secondary);
+  color: var(--text-secondary);
   font-weight: bold;
   text-transform: uppercase;
   font-size: 14px;

package/lib-esm/components/common/panels.js

@@ -46,7 +46,7 @@ import{H2,LayoutVariant}from"@redocly/theme";import styled,{css}from"styled-comp
         width: 100%;
         display: block;
         content: '';
-        border-bottom: 1px solid var(--border-color);
+        border-bottom: 1px solid var(--border-primary);
       }
     `}
   ${H2} {