@redocly/openapi-docs 3.0.0-alpha.55.patch.0 → 3.0.0-alpha.56

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

@@ -1,28 +1,32 @@
 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: 0px 8px;
+  padding: 5px 10px;
   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-radius: var(--border-radius-lg);
+  border-bottom: 4px solid var(--panel-samples-tabs-border-color);
+  margin-bottom: -4px;
 
   &: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);
-    color: var(--panel-samples-tabs-active-text-color);
+  }
+
+  &:first-child {
+    border-top-left-radius: var(--border-radius);
+  }
+
+  &:last-child {
+    border-top-right-radius: var(--border-radius);
   }
 `;
 //# 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,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`
+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`
   padding: 10px;
-  border: 1px solid var(--border-primary);
-  border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
+  background-color: var(--panel-samples-input-background-color);
+  border-radius: 0 0 var(--border-radius) var(--border-radius);
 `,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: inherit;
+    color: ${e=>"dark"===e.variant&&"white"};
   }
-`,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);
+`,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);
 //# sourceMappingURL=Dropdown.js.map

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

@@ -6,12 +6,14 @@ 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"};
@@ -23,10 +25,10 @@ import styled,{css}from"styled-components";import{Dropdown as DropdownComponent}
     min-width: 90px;
     height: 36px;
     outline: none;
-    display: flex;
-    align-items: center;
+    display: inline-block;
     color: var(--docs-dropdown-text-color);
-    border-radius: var(--border-radius-md);
+    border-radius: var(--border-radius);
+    border: var(--docs-dropdown-border);
     padding: var(--docs-dropdown-padding);
     vertical-align: bottom;
     width: ${({fullWidth:o})=>o?"100%":"auto"};
@@ -41,6 +43,7 @@ import styled,{css}from"styled-components";import{Dropdown as DropdownComponent}
     &,
     &:hover,
     &:focus-within {
+      border: 1px solid var(--border-color);
       box-shadow: none;
     }
 
@@ -58,7 +61,7 @@ import styled,{css}from"styled-components";import{Dropdown as DropdownComponent}
     appearance: none;
     cursor: pointer;
 
-    color: var(--text-secondary);
+    color: var(--text-color);
     line-height: inherit;
     font-size: 14px;
     font-family: inherit;
@@ -72,6 +75,7 @@ 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;
@@ -80,6 +84,7 @@ import styled,{css}from"styled-components";import{Dropdown as DropdownComponent}
 
     &:hover,
     &:focus-within {
+      border: none;
       box-shadow: none;
     }
   }
@@ -91,16 +96,22 @@ import styled,{css}from"styled-components";import{Dropdown as DropdownComponent}
   label {
     ${darkDropdownStyle};
 
-    border-radius: var(--border-radius-lg);
-    margin-left: 5px;
+    height: 40px;
+    border-radius: 0 var(--border-radius) 0 0;
+    margin: 0 0 -4px;
     transition: none;
     min-width: auto;
-    background-color: ${({active:o})=>o?"var(--panel-samples-tabs-active-background-color)":"var(--bg-base)"};
+    background: ${({active:o})=>o?"var(--panel-samples-tabs-active-background-color)":"none"};
     & {
+      border-bottom: 4px solid
+        ${({active:o})=>o?"var(--panel-samples-tabs-active-border-color)":"transparent"};
+
       &[open],
       &:focus-within,
       &:hover {
-        background-color: var(--bg-raised);
+        background: var(--border-color-secondary);
+        border-bottom: 4px solid
+          ${({active:o})=>o?"var( --panel-samples-tabs-active-border-color)":"transparent"};
       }
     }
   }
@@ -109,7 +120,7 @@ import styled,{css}from"styled-components";import{Dropdown as DropdownComponent}
   label {
     width: 100%;
     font-weight: 600;
-    color: var(--text-secondary);
+    color: var(--text-color);
   }
 `;export const SchemaDiscriminatorDropdown=styled(Dropdown)`
   .dropdown-select {

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

@@ -21,5 +21,6 @@ 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-secondary);
+  color: var(--text-color-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-primary);
+    border-bottom: 1px solid var(--border-color);
     border-left: none;
     padding: 10px 0;
   }

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-primary);
+    color: var(--text-color);
     &: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-secondary);
+  color: var(--text-color-secondary);
   font-size: var(--schema-labels-font-size);
   font-weight: normal;
   line-height: 1;
@@ -97,11 +97,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-secondary);
+  color: var(--text-color-secondary);
   margin-left: var(--spacing-unit);
   border-radius: var(--border-radius);
   cursor: pointer;
-  outline-color: var(--text-secondary);
+  outline-color: var(--text-color-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);
+        color: var(--color-error-500);
       }
     `}
 `;export const FormError=styled.div`
-  color: var(--color-error);
+  color: var(--color-error-500);
   font-size: 0.9em;
   & pre {
     word-break: break-word;
     white-space: pre-wrap;
   }
 `;export const FormWarning=styled.div`
-  color: var(--color-warning);
+  color: var(--color-warning-500);
   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);
+  color: var(--color-error-500);
 `;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-secondary);
+  color: var(--text-color-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-primary);
+        border-bottom: 1px solid var(--border-color);
       }
     `}
   ${H2} {

package/lib-esm/components/icons/LinkIcon.js

@@ -5,7 +5,7 @@ import React from"react";import styled from"styled-components";const LinkIconInt
   color: var(--link-text-color);
   &:active,
   &:visited {
-    color: var(--link-visited-text-color);
+    color: var(--text-color);
   }
 `;
 //# sourceMappingURL=LinkIcon.js.map

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

@@ -1,7 +1,6 @@
 import styled from"styled-components";import{SamplesMiddlePanel}from"../common/panels";export const SamplesWrap=styled.div`
   padding: calc(var(--spacing-unit) * 4);
   border-radius: var(--panel-border-radius);
-  border: var(--panel-samples-border);
   background-color: var(--panel-samples-background-color);
 `;export const ExamplesWrap=styled(SamplesWrap)`
   width: 100%;

package/lib-esm/components/rightPanel/ActionPanel.js

@@ -1,4 +1,4 @@
-import React,{memo}from"react";import styled from"styled-components";import{serializeParameterValue}from"../../utils";import{CodeHeader}from"../Panel";import{Path,PathWrapper,TryItButton}from"../Endpoint";import{HttpVerb}from"../shared";import{expandVariables}from"./utils";function formatPath(e,t,r){const n=t.path||{},a=t.query||{},o=Object.keys(a);let i=expandVariables(e,n);return o.length&&(i+="?"+o.map((e=>{if(!a[e])return"";const t=(e=>r.find((t=>t.name===e&&"query"===t.in)))(e);return t?serializeParameterValue(t,a[e]):`${e}=${encodeURIComponent(a[e])}`})).filter(Boolean).join("&")),i}export const ActionPanelComponent=({loading:e,operation:t,hasResponse:r,execute:n,params:a={}})=>React.createElement(CodeHeader,null,React.createElement(PathWrapper,null,React.createElement(HttpVerb,{color:t.httpVerb},t.httpVerb),React.createElement(Path,{wrap:"true"},formatPath(t.path,a,t.parameters))),React.createElement(SendButton,{"data-cy":"send-button",color:"primary",blinking:e,onClick:()=>!e&&n()},e?"Sending...":r?"Resend":"Send"));const SendButton=styled(TryItButton)`
+import React,{memo}from"react";import styled from"styled-components";import{serializeParameterValue}from"../../utils";import{CodeHeader}from"../Panel";import{Path,PathWrapper,TryItButton}from"../Endpoint";import{HttpVerb}from"../shared";import{expandVariables}from"./utils";function formatPath(e,t,r){const n=t.path||{},a=t.query||{},o=Object.keys(a);let i=expandVariables(e,n);return o.length&&(i+="?"+o.map((e=>{if(!a[e])return"";const t=(e=>r.find((t=>t.name===e&&"query"===t.in)))(e);return t?serializeParameterValue(t,a[e]):`${e}=${encodeURIComponent(a[e])}`})).filter(Boolean).join("&")),i}export const ActionPanelComponent=({loading:e,operation:t,hasResponse:r,execute:n,params:a={}})=>React.createElement(CodeHeader,null,React.createElement(PathWrapper,null,React.createElement(HttpVerb,{type:t.httpVerb},t.httpVerb),React.createElement(Path,{wrap:"true"},formatPath(t.path,a,t.parameters))),React.createElement(SendButton,{"data-cy":"send-button",color:"primary",blinking:e,onClick:()=>!e&&n()},e?"Sending...":r?"Resend":"Send"));const SendButton=styled(TryItButton)`
   width: var(--panel-try-it-action-button-width);
 `;export const ActionPanel=memo(ActionPanelComponent);
 //# sourceMappingURL=ActionPanel.js.map

package/lib-esm/components/rightPanel/CodemirrorInput/styled.js

@@ -1,7 +1,7 @@
 import{createGlobalStyle}from"styled-components";export const CodeMirrorStyles=createGlobalStyle`
   .cm-s-material.CodeMirror {
-    background-color: var(--code-block-controls-background-color)!important;
-    color: var(--text-secondary)!important;
+    background-color: var(--panel-samples-controls-background-color)!important;
+    color: var(--text-color-inverse)!important;
     font-family: var(--code-font-family);
     line-height: 18px;
     padding: 10px;
@@ -25,7 +25,7 @@ import{createGlobalStyle}from"styled-components";export const CodeMirrorStyles=c
   }
 
   .cm-s-material .CodeMirror-code .cm-atom {
-    color: var(--text-secondary);
+    color: var(--text-color-inverse);
   }
 
   div .cm-s-material .CodeMirror-matchingbracket {

package/lib-esm/components/rightPanel/ConsoleTabs/styled.js

@@ -13,24 +13,34 @@ import styled,{css}from"styled-components";export const TabsWrap=styled.div`
   color: var(--panel-try-it-tabs-text-color);
   min-width: 80px;
   min-height: 30px;
-  border-radius: var(--border-radius-lg);
+  border-radius: var(--border-radius);
   font-size: var(--panel-try-it-tabs-font-size);
   font-family: var(--panel-try-it-tabs-font-family);
   font-weight: var(--panel-try-it-tabs-font-weight);
   padding: 0 10px;
+  border-bottom: 4px solid var(--panel-try-it-tabs-border-color);
+
+  &:first-child {
+    border-radius: var(--border-radius) 0 0 var(--border-radius);
+  }
+
+  &:last-child {
+    border-radius: 0 var(--border-radius) var(--border-radius) 0;
+  }
 
   &:hover:not(:disabled) {
+    border-color: var(--panel-try-it-tabs-hover-border-color);
     background-color: var(--panel-try-it-tabs-hover-background-color);
-    color: var(--panel-try-it-tabs-hover-text-color);
   }
 
-  ${({active:t})=>t&&css`
+  ${({active:r})=>r&&css`
+        border-color: var(--panel-try-it-tabs-active-border-color);
         background-color: var(--panel-try-it-tabs-active-background-color);
-        color: var(--panel-try-it-tabs-active-text-color);
       `||""}
 
-  ${({disabled:t})=>t&&css`
+  ${({disabled:r})=>r&&css`
         cursor: default;
+        border-color: var(--panel-try-it-tabs-disables-border-color)
         background-color: var(--panel-try-it-tabs-disabled-background-color);
         color: var(--panel-try-it-tabs-disabled-text-color);
       `||""}

package/lib-esm/components/rightPanel/OAuth2Flow/OAuth2Flow.js

@@ -1,2 +1,2 @@
-var __awaiter=this&&this.__awaiter||function(e,t,o,l){return new(o||(o=Promise))((function(n,r){function a(e){try{c(l.next(e))}catch(e){r(e)}}function i(e){try{c(l.throw(e))}catch(e){r(e)}}function c(e){var t;e.done?n(e.value):(t=e.value,t instanceof o?t:new o((function(e){e(t)}))).then(a,i)}c((l=l.apply(e,t||[])).next())}))};import React,{useEffect,useState}from"react";import{Button}from"@redocly/theme";import{useRecoilValue}from"recoil";import{ButtonsWrapper,PkceOptionsWrapper,PkceDetails}from"./styled";import{LinearProgress}from"../../common/LinearProgress";import{FormControl,FormLabel,FormError,FormWrapper}from"../../common/form";import{FormDropdown,FormTextField,TextField}from"../../common/TextField";import{Checkbox}from"../../common/Checkbox";import{OAuth2,deriveCodeChallenge}from"../../../services/OAuth2";import{fromSessionStorage,getSecurityDetailsOptions}from"../../../utils";import{isEmptyObject,randString}from"../../../services/utils";import{getOAuth2TokenEndpointAuthHeader,normalizeUrlProtocol,validateTokenEndpointMethod}from"../utils";import Scope from"../Scope";import{Error}from"./Error";import{globalOptionsSelector}from"../../../recoil/store";function requiredValidator(e){if(!e)return"Field is required"}export const OAuth2Flow=({usePkce:e,form:t,id:o,formApi:l,flow:n,tokenUrl:r,authCorsProxyUrl:a,tokenEndpointAuthMethod:i,server:c,scopes:u,authorizationUrl:d,defaultValues:s,clientId:m})=>{var p,h,f,v;const{oAuth2RedirectURI:g,routingBasePath:E}=useRecoilValue(globalOptionsSelector),[k,C]=useState(null),[R,F]=useState(!1),[S,y]=useState(!1),[O,b]=useState(void 0),[_,A]=useState(void 0),[x,W]=useState(void 0),P=(null===(h=null===(p=t.values)||void 0===p?void 0:p.auth)||void 0===h?void 0:h[o])||{},T=(null===(v=null===(f=t.errors)||void 0===f?void 0:f.auth)||void 0===v?void 0:v[o])||{},V=void 0!==O&&_!==x?{label:"sync",onClick:()=>{O&&A(x)}}:void 0;useEffect((()=>{if(e){const e=randString(43);deriveCodeChallenge(e).then((t=>{b(e),A(t),W(t)}))}}),[e]);const w=()=>{l.setValue(`auth.${o}.token`,"")};if(!d)return React.createElement(FormError,null,"No flow info");let z=fromSessionStorage(`auth.${o}.token`)||JSON.stringify(null==s?void 0:s.token);z=z?JSON.parse(z):"";const B=getSecurityDetailsOptions(o,"client_id"),U={field:`auth.${o}.client_id`,fullWidth:!0,initialValue:fromSessionStorage(`auth.${o}.client_id`)||m||(null==s?void 0:s.client_id),initValue:fromSessionStorage(`auth.${o}.client_id`)||m||(null==s?void 0:s.client_id),placeholder:"Your OAuth2 app Client ID",validate:requiredValidator,validateOnBlur:!0,validateOnChange:!0};return React.createElement("div",null,React.createElement(FormWrapper,null,React.createElement(FormControl,null,React.createElement(FormLabel,null," Client ID: "),B?React.createElement(FormDropdown,Object.assign({},U,{options:B})):React.createElement(FormTextField,Object.assign({},U,{"data-cy":"client-id-input",panel:"try-it"}))),"authorizationCode"===n&&React.createElement(React.Fragment,null,(!(null==e?void 0:e.hideClientSecretInput)||!e)&&React.createElement(FormControl,null,React.createElement(FormLabel,null,"Client Secret:"),React.createElement(FormTextField,{type:"password",fullWidth:!0,field:`auth.${o}.client_secret`,initialValue:fromSessionStorage(`auth.${o}.client_secret`)||(null==s?void 0:s.client_secret),validateOnBlur:!0,validateOnChange:!0,panel:"try-it","data-cy":"client-secret-input"})),e&&!e.disableManualConfiguration&&React.createElement(PkceOptionsWrapper,null,React.createElement(Checkbox,{id:"pkce-opitons-toggle",label:"Configure PKCE manually",checked:S,onChange:()=>{y((e=>!e))},"data-cy":"pkce-options-toggle"}),S&&React.createElement(PkceDetails,null,React.createElement(FormControl,null,React.createElement(FormLabel,null,"Code Verifier"),React.createElement(TextField,{fullWidth:!0,value:O,onChange:({target:{value:e}})=>__awaiter(void 0,void 0,void 0,(function*(){const t=yield deriveCodeChallenge(e);b(e),W(t)})),panel:"try-it","data-cy":"code-verifier-input"})),React.createElement(FormControl,null,React.createElement(FormLabel,null,"Code Challenge"),React.createElement(TextField,{fullWidth:!0,value:_,onChange:({target:{value:e}})=>{A(e)},inputActionButton:V,panel:"try-it","data-cy":"code-challenge-input"}))))),React.createElement(FormTextField,{fullWidth:!0,field:`auth.${o}.token`,type:"hidden",initialValue:z,panel:"try-it"}),React.createElement(Scope,{id:o,scopes:u}),P.token&&P.token.access_token?React.createElement(FormControl,null,React.createElement(FormLabel,null," Access Token: "),React.createElement(TextField,{disabled:!0,type:"password",fullWidth:!0,value:P.token.access_token,panel:"try-it"})):null),React.createElement(ButtonsWrapper,null,P.token&&P.token.access_token?React.createElement(Button,{fullWidth:!0,onClick:()=>{w(),C(null)}},"Log out"):R?React.createElement(React.Fragment,null,React.createElement(Button,{fullWidth:!0,onClick:()=>{F(!1),C(null),OAuth2.clearRedirectData(n)}},"Cancel"),React.createElement(LinearProgress,null)):React.createElement(Button,{fullWidth:!0,disabled:!isEmptyObject(T),onClick:()=>{(t=>{if(!t)return;if(l.validate(),!isEmptyObject(T))return;F(!0),C(null);const u=a?a+normalizeUrlProtocol(t):t,d=a&&r?a+normalizeUrlProtocol(r):r,s=l.getValue(`auth.${o}.scopes`),m={authorizationUrl:u.startsWith("http")?u:c+u,clientId:P.client_id,scopes:s,redirectUri:g,routingBasePath:E,successCallback:e=>{l.setValue(`auth.${o}.token`,e),F(!1),C(null)},errorCallback:e=>{F(!1),C((null==e?void 0:e.message)||"Failed to retrieve the access token")}};"implicit"===n&&OAuth2.authorizeImplicit(m),validateTokenEndpointMethod(i)?"authorizationCode"===n&&OAuth2.authorizeAuthorizationCode(Object.assign(Object.assign(Object.assign({},m),{tokenUrl:(null==d?void 0:d.startsWith("http"))?d:c+d,clientSecret:P.client_secret,extraHeaders:getOAuth2TokenEndpointAuthHeader({authMethod:i,clientId:P.client_id,clientSecret:P.client_secret})}),e&&{codeVerifier:O,codeChallenge:_})):console.log(`Unsupported token endpoint auth method: ${i}`)})(d)}},"Authorize")),R||k||!P.token||!P.token.access_token&&React.createElement(Error,{loading:R,error:k,token:P.token}))};
+var __awaiter=this&&this.__awaiter||function(e,t,o,l){return new(o||(o=Promise))((function(n,r){function a(e){try{c(l.next(e))}catch(e){r(e)}}function i(e){try{c(l.throw(e))}catch(e){r(e)}}function c(e){var t;e.done?n(e.value):(t=e.value,t instanceof o?t:new o((function(e){e(t)}))).then(a,i)}c((l=l.apply(e,t||[])).next())}))};import React,{useEffect,useState}from"react";import{Button}from"@redocly/theme";import{useRecoilValue}from"recoil";import{ButtonsWrapper,PkceOptionsWrapper,PkceDetails}from"./styled";import{LinearProgress}from"../../common/LinearProgress";import{FormControl,FormLabel,FormError,FormWrapper}from"../../common/form";import{FormDropdown,FormTextField,TextField}from"../../common/TextField";import{Checkbox}from"../../common/Checkbox";import{OAuth2,deriveCodeChallenge}from"../../../services/OAuth2";import{fromSessionStorage,getSecurityDetailsOptions}from"../../../utils";import{isEmptyObject,randString}from"../../../services/utils";import{getOAuth2TokenEndpointAuthHeader,normalizeUrlProtocol,validateTokenEndpointMethod}from"../utils";import Scope from"../Scope";import{Error}from"./Error";import{globalOptionsSelector}from"../../../recoil/store";function requiredValidator(e){if(!e)return"Field is required"}export const OAuth2Flow=({usePkce:e,form:t,id:o,formApi:l,flow:n,tokenUrl:r,authCorsProxyUrl:a,tokenEndpointAuthMethod:i,server:c,scopes:u,authorizationUrl:d,defaultValues:s,clientId:m})=>{var p,h,f,v;const{oAuth2RedirectURI:g,routingBasePath:E}=useRecoilValue(globalOptionsSelector),[k,C]=useState(null),[R,F]=useState(!1),[S,y]=useState(!1),[O,b]=useState(void 0),[_,A]=useState(void 0),[x,W]=useState(void 0),P=(null===(h=null===(p=t.values)||void 0===p?void 0:p.auth)||void 0===h?void 0:h[o])||{},T=(null===(v=null===(f=t.errors)||void 0===f?void 0:f.auth)||void 0===v?void 0:v[o])||{},V=void 0!==O&&_!==x?{label:"sync",onClick:()=>{O&&A(x)}}:void 0;useEffect((()=>{if(e){const e=randString(43);deriveCodeChallenge(e).then((t=>{b(e),A(t),W(t)}))}}),[e]);const w=()=>{l.setValue(`auth.${o}.token`,"")};if(!d)return React.createElement(FormError,null,"No flow info");let z=fromSessionStorage(`auth.${o}.token`)||JSON.stringify(null==s?void 0:s.token);z=z?JSON.parse(z):"";const B=getSecurityDetailsOptions(o,"client_id"),U={field:`auth.${o}.client_id`,fullWidth:!0,initialValue:fromSessionStorage(`auth.${o}.client_id`)||m||(null==s?void 0:s.client_id),initValue:fromSessionStorage(`auth.${o}.client_id`)||m||(null==s?void 0:s.client_id),placeholder:"Your OAuth2 app Client ID",validate:requiredValidator,validateOnBlur:!0,validateOnChange:!0};return React.createElement("div",null,React.createElement(FormWrapper,null,React.createElement(FormControl,null,React.createElement(FormLabel,null," Client ID: "),B?React.createElement(FormDropdown,Object.assign({},U,{options:B})):React.createElement(FormTextField,Object.assign({},U,{"data-cy":"client-id-input",panel:"try-it"}))),"authorizationCode"===n&&React.createElement(React.Fragment,null,(!(null==e?void 0:e.hideClientSecretInput)||!e)&&React.createElement(FormControl,null,React.createElement(FormLabel,null,"Client Secret:"),React.createElement(FormTextField,{type:"password",fullWidth:!0,field:`auth.${o}.client_secret`,initialValue:fromSessionStorage(`auth.${o}.client_secret`)||(null==s?void 0:s.client_secret),validateOnBlur:!0,validateOnChange:!0,panel:"try-it","data-cy":"client-secret-input"})),e&&!e.disableManualConfiguration&&React.createElement(PkceOptionsWrapper,null,React.createElement(Checkbox,{id:"pkce-opitons-toggle",label:"Configure PKCE manually",checked:S,onChange:()=>{y((e=>!e))},"data-cy":"pkce-options-toggle"}),S&&React.createElement(PkceDetails,null,React.createElement(FormControl,null,React.createElement(FormLabel,null,"Code Verifier"),React.createElement(TextField,{fullWidth:!0,value:O,onChange:({target:{value:e}})=>__awaiter(void 0,void 0,void 0,(function*(){const t=yield deriveCodeChallenge(e);b(e),W(t)})),panel:"try-it","data-cy":"code-verifier-input"})),React.createElement(FormControl,null,React.createElement(FormLabel,null,"Code Challenge"),React.createElement(TextField,{fullWidth:!0,value:_,onChange:({target:{value:e}})=>{A(e)},inputActionButton:V,panel:"try-it","data-cy":"code-challenge-input"}))))),React.createElement(FormTextField,{fullWidth:!0,field:`auth.${o}.token`,type:"hidden",initialValue:z,panel:"try-it"}),React.createElement(Scope,{id:o,scopes:u}),P.token&&P.token.access_token?React.createElement(FormControl,null,React.createElement(FormLabel,null," Access Token: "),React.createElement(TextField,{disabled:!0,type:"password",fullWidth:!0,value:P.token.access_token,panel:"try-it"})):null),React.createElement(ButtonsWrapper,null,P.token&&P.token.access_token?React.createElement(Button,{fullWidth:!0,onClick:()=>{w(),C(null)}},"Log out"):R?React.createElement(React.Fragment,null,React.createElement(Button,{fullWidth:!0,onClick:()=>{F(!1),C(null),OAuth2.clearRedirectData(n)}},"Cancel"),React.createElement(LinearProgress,null)):React.createElement(Button,{fullWidth:!0,color:"secondary",disabled:!isEmptyObject(T),onClick:()=>{(t=>{if(!t)return;if(l.validate(),!isEmptyObject(T))return;F(!0),C(null);const u=a?a+normalizeUrlProtocol(t):t,d=a&&r?a+normalizeUrlProtocol(r):r,s=l.getValue(`auth.${o}.scopes`),m={authorizationUrl:u.startsWith("http")?u:c+u,clientId:P.client_id,scopes:s,redirectUri:g,routingBasePath:E,successCallback:e=>{l.setValue(`auth.${o}.token`,e),F(!1),C(null)},errorCallback:e=>{F(!1),C((null==e?void 0:e.message)||"Failed to retrieve the access token")}};"implicit"===n&&OAuth2.authorizeImplicit(m),validateTokenEndpointMethod(i)?"authorizationCode"===n&&OAuth2.authorizeAuthorizationCode(Object.assign(Object.assign(Object.assign({},m),{tokenUrl:(null==d?void 0:d.startsWith("http"))?d:c+d,clientSecret:P.client_secret,extraHeaders:getOAuth2TokenEndpointAuthHeader({authMethod:i,clientId:P.client_id,clientSecret:P.client_secret})}),e&&{codeVerifier:O,codeChallenge:_})):console.log(`Unsupported token endpoint auth method: ${i}`)})(d)}},"Authorize")),R||k||!P.token||!P.token.access_token&&React.createElement(Error,{loading:R,error:k,token:P.token}))};
 //# sourceMappingURL=OAuth2Flow.js.map

package/lib-esm/components/rightPanel/ParameterArray.js

@@ -14,7 +14,7 @@ import React from"react";import styled from"styled-components";import{FormLabel}
   span {
     cursor: pointer;
     margin-left: auto;
-    color: var(--text-secondary);
+    color: var(--text-color-secondary);
     &:hover {
       color: #fff;
     }

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

@@ -5,7 +5,7 @@ import React from"react";import styled from"styled-components";import{ResponseBo
   margin-right: 20px;
   padding: 2px 0;
   text-align: center;
-  color: var(--text-primary);
+  color: var(--text-color-inverse);
 `,ResponseBadge=styled(ResponseBadgeBase)`
   color: ${({code:e})=>e>=200&&e<300?"var(--response-success-text-color)":e>=300&&e<400?"var(--response-redirect-text-color)":e>400?"var(--response-error-text-color)":"var(--response-info-text-color)"};
 `,ErrorHeader=styled.header`
@@ -14,5 +14,5 @@ import React from"react";import styled from"styled-components";import{ResponseBo
 `,ErrorDetails=styled.code`
   border-left: 3px solid #ff4040;
   padding-left: 5px;
-`;export const ResponsePanel=({error:e,response:t,time:n})=>{const r=t||e&&e.response,a=r&&r.data&&r.data.length||0;let s;return s=a>1e6?(a/1e6).toFixed(2)+" MB":a>1e3?(a/1e3).toFixed(2)+" KB":a+" B",e&&!e.response||!r?React.createElement(React.Fragment,null,React.createElement(ErrorHeader,null," Could not get any response "),React.createElement(ErrorDetails,null,e&&e.message||"Unknown error"),React.createElement("br",null),React.createElement(ErrorHeader,null," Why this might have happened:"),React.createElement("div",null," - CORS is misconfigured on the server"),React.createElement("div",null," - The server couldn't send a response"),React.createElement("div",null," - No internet access"),React.createElement("div",null," - Documentation issue - contact API owner"),React.createElement("div",null," - Misconfigured security definition")):r?React.createElement(React.Fragment,null,React.createElement(ResponseBadges,null,React.createElement(ResponseBadge,{code:r.status},React.createElement("span",null," Status: "),r.status," ",r.statusText),React.createElement(ResponseBadgeBase,null,React.createElement("span",null," Time: "),n,"ms"),React.createElement(ResponseBadgeBase,null,React.createElement("span",null," Size: "),s)),React.createElement("div",null,React.createElement(ResponseHeadersList,{headers:r.headers}),React.createElement(ResponseBody,{response:r}))):React.createElement(React.Fragment,null,"Something went wrong")};
+`;export const ResponsePanel=({error:e,response:t,time:n})=>{const r=t||e&&e.response,s=r&&r.data&&r.data.length||0;let a;return a=s>1e6?(s/1e6).toFixed(2)+" MB":s>1e3?(s/1e3).toFixed(2)+" KB":s+" B",e&&!e.response||!r?React.createElement(React.Fragment,null,React.createElement(ErrorHeader,null," Could not get any response "),React.createElement(ErrorDetails,null,e&&e.message||"Unknown error"),React.createElement("br",null),React.createElement(ErrorHeader,null," Why this might have happened:"),React.createElement("div",null," - CORS is misconfigured on the server"),React.createElement("div",null," - The server couldn't send a response"),React.createElement("div",null," - No internet access"),React.createElement("div",null," - Documentation issue - contact API owner"),React.createElement("div",null," - Misconfigured security definition")):r?React.createElement(React.Fragment,null,React.createElement(ResponseBadges,null,React.createElement(ResponseBadge,{code:r.status},React.createElement("span",null," Status: "),r.status," ",r.statusText),React.createElement(ResponseBadgeBase,null,React.createElement("span",null," Time: "),n,"ms"),React.createElement(ResponseBadgeBase,null,React.createElement("span",null," Size: "),a)),React.createElement("div",null,React.createElement(ResponseHeadersList,{headers:r.headers}),React.createElement(ResponseBody,{response:r}))):React.createElement(React.Fragment,null,"Something went wrong")};
 //# sourceMappingURL=ResponsePanel.js.map

package/lib-esm/components/rightPanel/TryItPanel.js

@@ -1,13 +1,13 @@
-var __rest=this&&this.__rest||function(e,r){var t={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&r.indexOf(o)<0&&(t[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(o=Object.getOwnPropertySymbols(e);a<o.length;a++)r.indexOf(o[a])<0&&Object.prototype.propertyIsEnumerable.call(e,o[a])&&(t[o[a]]=e[o[a]])}return t};import*as React from"react";import styled from"styled-components";import{PanelHeaderTitle,PanelHeader,Panel,PanelBody,ShelfIcon}from"@redocly/theme";import{Trigger}from"../Panel";import{CrossIcon,LockIcon}from"../icons";export function TryItPanel(e){var{header:r,error:t,success:o}=e,a=__rest(e,["header","error","success"]);return React.createElement(StyledTryItPanel,Object.assign({className:"panel-try-it-nested"},a,{header:({toggle:e,expanded:n=!1})=>React.createElement(PanelHeader,{onClick:e,expanded:n,"data-cy":a["data-cy"]},React.createElement(Trigger,null,React.createElement(PanelHeaderTitle,null,r),React.createElement(ShelfIcon,{direction:n?"down":"right"})),t&&React.createElement(CrossIcon,{size:"14px",color:"--color-error"})||null,o&&React.createElement(LockIcon,{size:"14px",color:"--color-success"})||null)}))}const StyledTryItPanel=styled(Panel)`
+var __rest=this&&this.__rest||function(e,r){var t={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&r.indexOf(o)<0&&(t[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(o=Object.getOwnPropertySymbols(e);a<o.length;a++)r.indexOf(o[a])<0&&Object.prototype.propertyIsEnumerable.call(e,o[a])&&(t[o[a]]=e[o[a]])}return t};import*as React from"react";import styled from"styled-components";import{PanelHeaderTitle,PanelHeader,Panel,PanelBody,ShelfIcon}from"@redocly/theme";import{Trigger}from"../Panel";import{CrossIcon,LockIcon}from"../icons";export function TryItPanel(e){var{header:r,error:t,success:o}=e,a=__rest(e,["header","error","success"]);return React.createElement(StyledTryItPanel,Object.assign({className:"panel-try-it-nested"},a,{header:({toggle:e,expanded:n=!1})=>React.createElement(PanelHeader,{onClick:e,expanded:n,"data-cy":a["data-cy"]},React.createElement(Trigger,null,React.createElement(PanelHeaderTitle,null,r),React.createElement(ShelfIcon,{direction:n?"down":"right"})),t&&React.createElement(CrossIcon,{size:"14px",color:"--color-error-500"})||null,o&&React.createElement(LockIcon,{size:"14px",color:"--color-success-500"})||null)}))}const StyledTryItPanel=styled(Panel)`
   ${PanelHeader} {
     border: 1px solid
-      ${({error:e})=>e?"var(--color-error-border)":"var(--panel-try-it-nested-heading-border-color)"};
+      ${({error:e})=>e?"var(--color-error-300)":"var(--panel-try-it-nested-heading-border-color)"};
     padding: 10px;
   }
 
   ${PanelBody} {
     border: 1px solid
-      ${({error:e})=>e?"var(--color-error-border)":"var(--panel-try-it-nested-body-border-color)"};
+      ${({error:e})=>e?"var(--color-error-300)":"var(--panel-try-it-nested-body-border-color)"};
     border-top: 0;
   }
 `;

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

@@ -41,7 +41,8 @@ import styled,{css,keyframes}from"styled-components";import{Dropdown}from"../com
   margin-bottom: 10px;
   ${({shaking:o})=>o&&shakeAnimation};
   > div:last-child {
-    border-radius: 0 0 var(--panel-border-radius) var(--panel-border-radius);
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
   }
 `;export const ConsoleBody=styled.div`
   flex: 1;
@@ -55,7 +56,7 @@ import styled,{css,keyframes}from"styled-components";import{Dropdown}from"../com
   cursor: pointer;
   font-size: 18px;
   font-weight: bold;
-  color: var(--text-secondary);
+  color: var(--text-color-inverse);
 `;export const invertedInputStyles=css`
   border: none;
   outline: none;
@@ -69,7 +70,7 @@ import styled,{css,keyframes}from"styled-components";import{Dropdown}from"../com
 
   &::placeholder {
     opacity: 0.6;
-    color: var(--text-secondary);
+    color: var(--text-color-inverse);
   }
 
   &:-webkit-autofill {

package/lib-esm/components/shared/HttpVerb.d.ts

@@ -1,2 +1,6 @@
-import { Tag } from '@redocly/theme';
-export declare const HttpVerb: import("styled-components").StyledComponent<typeof Tag, any, {}, never>;
+export declare const HttpVerb: import("styled-components").StyledComponent<"span", any, {
+    className: `operation-type ${string}`;
+    'data-component-name': string;
+} & {
+    type: string;
+}, "className" | "data-component-name">;

package/lib-esm/components/shared/HttpVerb.js

@@ -1,4 +1,5 @@
-import styled from"styled-components";import{Tag}from"@redocly/theme";export const HttpVerb=styled(Tag)`
-  text-transform: uppercase;
+import styled from"styled-components";import{OperationBadge}from"@redocly/theme";export const HttpVerb=styled(OperationBadge)`
+  display: inline-block;
+  padding: 0 8px;
 `;
 //# sourceMappingURL=HttpVerb.js.map

package/lib-esm/components/shared/MimeLabel.js

@@ -1,8 +1,6 @@
 import styled from"styled-components";export const MimeLabel=styled.div`
-  display: flex;
-  align-items: center;
   background-color: var(--panel-samples-dropdown-background-color);
-  color: var(--panel-samples-text-color);
+  color: var(---panel-samples-dropdown-color);
   font-family: var(--code-font-family);
   margin-bottom: 0;
   height: 36px;
@@ -10,6 +8,6 @@ import styled from"styled-components";export const MimeLabel=styled.div`
   font-size: 14px;
   line-height: 16px;
   border: var(--panel-samples-dropdown-border);
-  border-radius: var(--panel-border-radius);
+  border-radius: var(--border-radius);
 `;
 //# sourceMappingURL=MimeLabel.js.map

package/lib-esm/components/shared/NoSampleLabel.js

@@ -4,7 +4,7 @@ import styled from"styled-components";export const NoSampleLabel=styled.div`
 `;export const WarnMessage=styled.div`
   font-size: 12px;
   padding-bottom: 10px;
-  color: var(--color-warning);
+  color: var(--color-warning-500);
   font-family: var(--code-font-family);
 `;
 //# sourceMappingURL=NoSampleLabel.js.map

package/lib-esm/events/types.d.ts

@@ -24,14 +24,14 @@ export declare enum AnalyticsEventType {
     CodeSampleCopied = "CodeSampleCopied",
     OperationServerExpanded = "OperationServerExpanded",
     PanelToggle = "PanelToggle",
-    TryItOpen = "TryItOpen",
+    tryItToggle = "TryItToggle",
     TryItSent = "TryItSent",
     TargetServerSwitched = "TargetServerSwitched"
 }
 export interface AnalyticsEvent {
     eventType: AnalyticsEventType;
     resource: 'Redocly_CodeSample' | 'Redocly_Operation' | 'Redocly_OperationTryIt';
-    action: 'LanguageSwitched' | 'PanelToggled' | 'Opened' | 'NavigatedOverrideLink' | 'Sent' | 'ValidationFailed' | 'CodeSampleCopied' | 'TargetServerSwitched';
+    action: 'LanguageSwitched' | 'PanelToggled' | 'Opened' | 'Closed' | 'NavigatedOverrideLink' | 'Sent' | 'ValidationFailed' | 'CodeSampleCopied' | 'TargetServerSwitched';
     operationId?: string;
     operationPath: string;
     operationHttpVerb: string;
@@ -49,7 +49,8 @@ export interface CodeSamplesCopiedEvent extends AnalyticsEvent {
     exampleId?: string;
     exampleMimeType?: string;
 }
-type TryItOpenedEvent = AnalyticsEvent;
+type TryItSentEvent = AnalyticsEvent;
+type tryItToggleEvent = AnalyticsEvent;
 export interface PanelToggleEvent extends AnalyticsEvent {
     panelType: 'request' | 'responses' | 'request-samples' | 'response-samples';
     state: 'expanded' | 'collapsed';
@@ -64,8 +65,8 @@ export interface TargetServerSwitchedEvent extends AnalyticsEvent {
 export type Events = {
     codeSamplesLanguageSwitch?: (event: CodeSamplesLanguageSwitchedEvent) => void;
     codeSamplesCopy?: (event: CodeSamplesCopiedEvent) => void;
-    tryItOpen?: (event: TryItOpenedEvent) => void;
-    tryItSent?: (event: TryItOpenedEvent) => void;
+    tryItToggle?: (event: tryItToggleEvent) => void;
+    tryItSent?: (event: TryItSentEvent) => void;
     panelToggle?: (event: PanelToggleEvent) => void;
     targetServerSwitch?: (event: TargetServerSwitchedEvent) => void;
 };

package/lib-esm/events/types.js

@@ -1,2 +1,2 @@
-export var AnalyticsEventType;!function(e){e.CodeSampleLanguageSwitched="CodeSampleLanguageSwitched",e.CodeSampleCopied="CodeSampleCopied",e.OperationServerExpanded="OperationServerExpanded",e.PanelToggle="PanelToggle",e.TryItOpen="TryItOpen",e.TryItSent="TryItSent",e.TargetServerSwitched="TargetServerSwitched"}(AnalyticsEventType||(AnalyticsEventType={}));
+export var AnalyticsEventType;!function(e){e.CodeSampleLanguageSwitched="CodeSampleLanguageSwitched",e.CodeSampleCopied="CodeSampleCopied",e.OperationServerExpanded="OperationServerExpanded",e.PanelToggle="PanelToggle",e.tryItToggle="TryItToggle",e.TryItSent="TryItSent",e.TargetServerSwitched="TargetServerSwitched"}(AnalyticsEventType||(AnalyticsEventType={}));
 //# sourceMappingURL=types.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/openapi-docs",
-  "version": "3.0.0-alpha.55.patch.0",
+  "version": "3.0.0-alpha.56",
   "description": "Redocly OpenAPI Docs",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -117,7 +117,7 @@
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1",
     "workerize-loader": "github:redocly/workerize-loader#webpack-5-dist",
-    "@redocly/theme": "0.18.3-patch.0"
+    "@redocly/theme": "0.18.3"
   },
   "scripts": {
     "start": "webpack serve --mode=development --hot",