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

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

@@ -1,11 +1,11 @@
-"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,o,r,t){void 0===t&&(t=r);var a=Object.getOwnPropertyDescriptor(o,r);a&&!("get"in a?!o.__esModule:a.writable||a.configurable)||(a={enumerable:!0,get:function(){return o[r]}}),Object.defineProperty(e,t,a)}:function(e,o,r,t){void 0===t&&(t=r),e[t]=o[r]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,o){Object.defineProperty(e,"default",{enumerable:!0,value:o})}:function(e,o){e.default=o}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var o={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&__createBinding(o,e,r);return __setModuleDefault(o,e),o};Object.defineProperty(exports,"__esModule",{value:!0}),exports.ToggleButton=exports.PatternLabel=exports.ConstraintItem=exports.ExtensionValue=exports.ExampleValue=exports.DefaultValue=exports.EnumValue=exports.RecursiveLabel=exports.FieldValueLabel=exports.AccessLabel=exports.AdditionalPropertiesLabel=exports.RequiredLabel=exports.PropertyLabel=exports.TypeFormat=exports.TypeTitle=exports.TypeName=exports.TypePrefix=exports.FieldLabel=exports.ClickablePropertyNameCell=void 0;const styled_components_1=__importStar(require("styled-components")),utils_1=require("../../../utils"),fields_layout_1=require("./fields-layout"),icons_1=require("../../icons");exports.ClickablePropertyNameCell=(0,styled_components_1.default)(fields_layout_1.PropertyNameCell)`
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,r,o,t){void 0===t&&(t=o);var a=Object.getOwnPropertyDescriptor(r,o);a&&!("get"in a?!r.__esModule:a.writable||a.configurable)||(a={enumerable:!0,get:function(){return r[o]}}),Object.defineProperty(e,t,a)}:function(e,r,o,t){void 0===t&&(t=o),e[t]=r[o]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,r){Object.defineProperty(e,"default",{enumerable:!0,value:r})}:function(e,r){e.default=r}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var r={};if(null!=e)for(var o in e)"default"!==o&&Object.prototype.hasOwnProperty.call(e,o)&&__createBinding(r,e,o);return __setModuleDefault(r,e),r};Object.defineProperty(exports,"__esModule",{value:!0}),exports.ToggleButton=exports.PatternLabel=exports.ConstraintItem=exports.ExtensionValue=exports.ExampleValue=exports.DefaultValue=exports.EnumValue=exports.RecursiveLabel=exports.FieldValueLabel=exports.AccessLabel=exports.AdditionalPropertiesLabel=exports.RequiredLabel=exports.PropertyLabel=exports.TypeFormat=exports.TypeTitle=exports.TypeName=exports.TypePrefix=exports.FieldLabel=exports.ClickablePropertyNameCell=void 0;const styled_components_1=__importStar(require("styled-components")),utils_1=require("../../../utils"),fields_layout_1=require("./fields-layout"),icons_1=require("../../icons");exports.ClickablePropertyNameCell=(0,styled_components_1.default)(fields_layout_1.PropertyNameCell)`
   button {
     background-color: transparent;
     border: 0;
     outline: 0;
     cursor: pointer;
     padding: 0 10px 0 0;
-    color: var(--text-color);
+    color: var(--text-primary);
     &:focus {
       font-weight: var(--font-weight-bold);
     }
@@ -18,10 +18,10 @@
     margin-top: -1px;
   }
 
-  ${()=>{const e=(0,fields_layout_1.getCssVariable)("--schema-field-name-word-break");if(["break-all","break-word"].includes(e)){const o=`\n      && button {\n        max-width: calc(100% - 21px); /* left padding + toggle button width: 16px/2 + 13px */\n        text-align: left;\n        span {\n          white-space: normal;\n          word-break: ${e};\n          vertical-align: top;\n          display: inline-flex;\n        }\n      }\n    `;return styled_components_1.css`
+  ${()=>{const e=(0,fields_layout_1.getCssVariable)("--schema-field-name-word-break");if(["break-all","break-word"].includes(e)){const r=`\n      && button {\n        max-width: calc(100% - 21px); /* left padding + toggle button width: 16px/2 + 13px */\n        text-align: left;\n        span {\n          white-space: normal;\n          word-break: ${e};\n          vertical-align: top;\n          display: inline-flex;\n        }\n      }\n    `;return styled_components_1.css`
         button {
           ${(0,utils_1.typography)("schema-property-name")};
-          ${o};
+          ${r};
         }
       `}return styled_components_1.css`
       button {
@@ -40,7 +40,7 @@
   color: var(--schema-type-title-text-color);
   word-break: break-word;
 `,exports.TypeFormat=exports.TypeName,exports.PropertyLabel=(0,styled_components_1.default)(exports.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;
@@ -97,11 +97,11 @@
 `,exports.PatternLabel=(0,styled_components_1.default)(exports.ConstraintItem)``,exports.ToggleButton=styled_components_1.default.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/components/common/form.js

@@ -30,18 +30,18 @@
         display: inline-block;
         content: '*';
         margin-left: 4px;
-        color: var(--color-error-500);
+        color: var(--color-error);
       }
     `}
 `,exports.FormError=styled_components_1.default.div`
-  color: var(--color-error-500);
+  color: var(--color-error);
   font-size: 0.9em;
   & pre {
     word-break: break-word;
     white-space: pre-wrap;
   }
 `,exports.FormWarning=styled_components_1.default.div`
-  color: var(--color-warning-500);
+  color: var(--color-warning);
   font-size: 0.9em;
 `,exports.TokenField=styled_components_1.default.div`
   position: relative;
@@ -55,7 +55,7 @@
   padding: 0 5px;
   cursor: pointer;
 `,exports.TokenClear=(0,styled_components_1.default)(exports.TokenShowHide)`
-  color: var(--color-error-500);
+  color: var(--color-error);
 `,exports.FormHeader=styled_components_1.default.div`
   font-weight: bold;
   font-size: 1.2em;

package/lib/components/common/headers.js

@@ -3,7 +3,7 @@
 
   ${(0,utils_1.typography)("right-panel-header")};
 `,exports.FieldsGroupHeader=styled_components_1.default.h5`
-  color: var(--text-color-secondary);
+  color: var(--text-secondary);
   font-weight: bold;
   text-transform: uppercase;
   font-size: 14px;

package/lib/components/common/panels.js

@@ -46,7 +46,7 @@
         width: 100%;
         display: block;
         content: '';
-        border-bottom: 1px solid var(--border-color);
+        border-bottom: 1px solid var(--border-primary);
       }
     `}
   ${theme_1.H2} {

package/lib/components/icons/LinkIcon.js

@@ -5,7 +5,7 @@
   color: var(--link-text-color);
   &:active,
   &:visited {
-    color: var(--text-color);
+    color: var(--link-visited-text-color);
   }
 `;
 //# sourceMappingURL=LinkIcon.js.map

package/lib/components/pluggable/RedocRequestBody.js

@@ -1,2 +1,2 @@
-"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.RedocRequestBody=void 0;const react_1=__importDefault(require("react")),recoil_1=require("recoil"),models_1=require("../../models"),common_1=require("../common"),styled_components_1=require("./styled.components"),PayloadSamples_1=require("../PayloadSamples"),Parameters_1=require("../Parameters"),store_1=require("../../recoil/store"),app_1=require("../..//recoil/app"),RedocRequestBody=({pointer:e,hideSamples:t})=>{const{options:o,parser:r}=(0,recoil_1.useRecoilValue)(store_1.globalStoreSelector),a=(0,recoil_1.useRecoilValue)(app_1.layoutSelector),l=(0,models_1.getOperation)(r,{pointer:e,pathName:"",httpVerb:"",pathParameters:[],pathServers:[],isWebhook:!1,responses:{}},void 0,o,""),n=(0,models_1.getRequestBody)({parser:r,infoOrRef:{$ref:e},options:o,operation:l}),s=t?styled_components_1.FullWidthPanel:common_1.SamplesMiddlePanel;return react_1.default.createElement(common_1.Row,{layout:a},react_1.default.createElement(s,null,n.content&&react_1.default.createElement(Parameters_1.BodyContent,{content:n.content,description:n.description})),!t&&react_1.default.createElement(common_1.SamplesPanel,null,react_1.default.createElement(styled_components_1.SamplesWrap,null,n.content&&react_1.default.createElement(PayloadSamples_1.PayloadSamples,{content:n.content})))||react_1.default.createElement("span",null))};exports.RedocRequestBody=RedocRequestBody;
+"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.RedocRequestBody=void 0;const react_1=__importDefault(require("react")),recoil_1=require("recoil"),models_1=require("../../models"),common_1=require("../common"),styled_components_1=require("./styled.components"),PayloadSamples_1=require("../PayloadSamples"),Parameters_1=require("../Parameters"),store_1=require("../../recoil/store"),app_1=require("../..//recoil/app"),RedocRequestBody=({pointer:e,hideSamples:t})=>{const{options:r,parser:o}=(0,recoil_1.useRecoilValue)(store_1.globalStoreSelector),a=(0,recoil_1.useRecoilValue)(app_1.layoutSelector),l=(0,models_1.getOperation)(o,{pointer:e,pathName:"",httpVerb:"",pathParameters:[],pathServers:[],isWebhook:!1,responses:{}},void 0,r,""),{content:s,description:n,required:c}=(0,models_1.getRequestBody)({parser:o,infoOrRef:{$ref:e},options:r,operation:l})||{},u=t?styled_components_1.FullWidthPanel:common_1.SamplesMiddlePanel;return react_1.default.createElement(common_1.Row,{layout:a},react_1.default.createElement(u,null,s&&react_1.default.createElement(Parameters_1.BodyContent,{content:s,description:n,required:c})),!t&&react_1.default.createElement(common_1.SamplesPanel,null,react_1.default.createElement(styled_components_1.SamplesWrap,null,s&&react_1.default.createElement(PayloadSamples_1.PayloadSamples,{content:s})))||react_1.default.createElement("span",null))};exports.RedocRequestBody=RedocRequestBody;
 //# sourceMappingURL=RedocRequestBody.js.map

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

@@ -1,6 +1,7 @@
 "use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.FullWidthPanel=exports.ExamplesWrap=exports.SamplesWrap=void 0;const styled_components_1=__importDefault(require("styled-components")),panels_1=require("../common/panels");exports.SamplesWrap=styled_components_1.default.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);
 `,exports.ExamplesWrap=(0,styled_components_1.default)(exports.SamplesWrap)`
   width: 100%;

package/lib/components/rightPanel/ActionPanel.js

@@ -1,4 +1,4 @@
-"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,n,r){void 0===r&&(r=n);var a=Object.getOwnPropertyDescriptor(t,n);a&&!("get"in a?!t.__esModule:a.writable||a.configurable)||(a={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,r,a)}:function(e,t,n,r){void 0===r&&(r=n),e[r]=t[n]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&__createBinding(t,e,n);return __setModuleDefault(t,e),t},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.ActionPanel=exports.ActionPanelComponent=void 0;const react_1=__importStar(require("react")),styled_components_1=__importDefault(require("styled-components")),utils_1=require("../../utils"),Panel_1=require("../Panel"),Endpoint_1=require("../Endpoint"),shared_1=require("../shared"),utils_2=require("./utils");function formatPath(e,t,n){const r=t.path||{},a=t.query||{},o=Object.keys(a);let i=(0,utils_2.expandVariables)(e,r);return o.length&&(i+="?"+o.map((e=>{if(!a[e])return"";const t=(e=>n.find((t=>t.name===e&&"query"===t.in)))(e);return t?(0,utils_1.serializeParameterValue)(t,a[e]):`${e}=${encodeURIComponent(a[e])}`})).filter(Boolean).join("&")),i}const ActionPanelComponent=({loading:e,operation:t,hasResponse:n,execute:r,params:a={}})=>react_1.default.createElement(Panel_1.CodeHeader,null,react_1.default.createElement(Endpoint_1.PathWrapper,null,react_1.default.createElement(shared_1.HttpVerb,{type:t.httpVerb},t.httpVerb),react_1.default.createElement(Endpoint_1.Path,{wrap:"true"},formatPath(t.path,a,t.parameters))),react_1.default.createElement(SendButton,{"data-cy":"send-button",color:"primary",blinking:e,onClick:()=>!e&&r()},e?"Sending...":n?"Resend":"Send"));exports.ActionPanelComponent=ActionPanelComponent;const SendButton=(0,styled_components_1.default)(Endpoint_1.TryItButton)`
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,n,r){void 0===r&&(r=n);var o=Object.getOwnPropertyDescriptor(t,n);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,r,o)}:function(e,t,n,r){void 0===r&&(r=n),e[r]=t[n]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&__createBinding(t,e,n);return __setModuleDefault(t,e),t},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.ActionPanel=exports.ActionPanelComponent=void 0;const react_1=__importStar(require("react")),styled_components_1=__importDefault(require("styled-components")),utils_1=require("../../utils"),Panel_1=require("../Panel"),Endpoint_1=require("../Endpoint"),shared_1=require("../shared"),utils_2=require("./utils");function formatPath(e,t,n){const r=t.path||{},o=t.query||{},a=Object.keys(o);let i=(0,utils_2.expandVariables)(e,r);return a.length&&(i+="?"+a.map((e=>{if(!o[e])return"";const t=(e=>n.find((t=>t.name===e&&"query"===t.in)))(e);return t?(0,utils_1.serializeParameterValue)(t,o[e]):`${e}=${encodeURIComponent(o[e])}`})).filter(Boolean).join("&")),i}const ActionPanelComponent=({loading:e,operation:t,hasResponse:n,execute:r,params:o={}})=>react_1.default.createElement(Panel_1.CodeHeader,null,react_1.default.createElement(Endpoint_1.PathWrapper,null,react_1.default.createElement(shared_1.HttpVerb,{color:t.httpVerb},t.httpVerb),react_1.default.createElement(Endpoint_1.Path,{wrap:"true"},formatPath(t.path,o,t.parameters))),react_1.default.createElement(SendButton,{"data-cy":"send-button",color:"primary",blinking:e,onClick:()=>!e&&r()},e?"Sending...":n?"Resend":"Send"));exports.ActionPanelComponent=ActionPanelComponent;const SendButton=(0,styled_components_1.default)(Endpoint_1.TryItButton)`
   width: var(--panel-try-it-action-button-width);
 `;exports.ActionPanel=(0,react_1.memo)(exports.ActionPanelComponent);
 //# sourceMappingURL=ActionPanel.js.map

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

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.CodeMirrorStyles=void 0;const styled_components_1=require("styled-components");exports.CodeMirrorStyles=styled_components_1.createGlobalStyle`
   .cm-s-material.CodeMirror {
-    background-color: var(--panel-samples-controls-background-color)!important;
-    color: var(--text-color-inverse)!important;
+    background-color: var(--code-block-controls-background-color)!important;
+    color: var(--text-secondary)!important;
     font-family: var(--code-font-family);
     line-height: 18px;
     padding: 10px;
@@ -25,7 +25,7 @@
   }
 
   .cm-s-material .CodeMirror-code .cm-atom {
-    color: var(--text-color-inverse);
+    color: var(--text-secondary);
   }
 
   div .cm-s-material .CodeMirror-matchingbracket {

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

@@ -1,4 +1,4 @@
-"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(r,t,e,o){void 0===o&&(o=e);var a=Object.getOwnPropertyDescriptor(t,e);a&&!("get"in a?!t.__esModule:a.writable||a.configurable)||(a={enumerable:!0,get:function(){return t[e]}}),Object.defineProperty(r,o,a)}:function(r,t,e,o){void 0===o&&(o=e),r[o]=t[e]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(r,t){Object.defineProperty(r,"default",{enumerable:!0,value:t})}:function(r,t){r.default=t}),__importStar=this&&this.__importStar||function(r){if(r&&r.__esModule)return r;var t={};if(null!=r)for(var e in r)"default"!==e&&Object.prototype.hasOwnProperty.call(r,e)&&__createBinding(t,r,e);return __setModuleDefault(t,r),t};Object.defineProperty(exports,"__esModule",{value:!0}),exports.Tab=exports.TabsWrap=void 0;const styled_components_1=__importStar(require("styled-components"));exports.TabsWrap=styled_components_1.default.div`
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(t,e,r,o){void 0===o&&(o=r);var a=Object.getOwnPropertyDescriptor(e,r);a&&!("get"in a?!e.__esModule:a.writable||a.configurable)||(a={enumerable:!0,get:function(){return e[r]}}),Object.defineProperty(t,o,a)}:function(t,e,r,o){void 0===o&&(o=r),t[o]=e[r]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(t,e){Object.defineProperty(t,"default",{enumerable:!0,value:e})}:function(t,e){t.default=e}),__importStar=this&&this.__importStar||function(t){if(t&&t.__esModule)return t;var e={};if(null!=t)for(var r in t)"default"!==r&&Object.prototype.hasOwnProperty.call(t,r)&&__createBinding(e,t,r);return __setModuleDefault(e,t),e};Object.defineProperty(exports,"__esModule",{value:!0}),exports.Tab=exports.TabsWrap=void 0;const styled_components_1=__importStar(require("styled-components"));exports.TabsWrap=styled_components_1.default.div`
   display: flex;
   font-size: 12px;
   button {
@@ -13,34 +13,24 @@
   color: var(--panel-try-it-tabs-text-color);
   min-width: 80px;
   min-height: 30px;
-  border-radius: var(--border-radius);
+  border-radius: var(--border-radius-lg);
   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:r})=>r&&styled_components_1.css`
-        border-color: var(--panel-try-it-tabs-active-border-color);
+  ${({active:t})=>t&&styled_components_1.css`
         background-color: var(--panel-try-it-tabs-active-background-color);
+        color: var(--panel-try-it-tabs-active-text-color);
       `||""}
 
-  ${({disabled:r})=>r&&styled_components_1.css`
+  ${({disabled:t})=>t&&styled_components_1.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/components/rightPanel/OAuth2Flow/OAuth2Flow.js

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

package/lib/components/rightPanel/ParameterArray.js

@@ -14,7 +14,7 @@
   span {
     cursor: pointer;
     margin-left: auto;
-    color: var(--text-color-secondary);
+    color: var(--text-secondary);
     &:hover {
       color: #fff;
     }

package/lib/components/rightPanel/ResponsePanel.js

@@ -5,7 +5,7 @@
   margin-right: 20px;
   padding: 2px 0;
   text-align: center;
-  color: var(--text-color-inverse);
+  color: var(--text-primary);
 `,ResponseBadge=(0,styled_components_1.default)(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_components_1.default.header`

package/lib/components/rightPanel/TryItPanel.js

@@ -1,13 +1,13 @@
-"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,r,o){void 0===o&&(o=r);var n=Object.getOwnPropertyDescriptor(t,r);n&&!("get"in n?!t.__esModule:n.writable||n.configurable)||(n={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,o,n)}:function(e,t,r,o){void 0===o&&(o=r),e[o]=t[r]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&__createBinding(t,e,r);return __setModuleDefault(t,e),t},__rest=this&&this.__rest||function(e,t){var r={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(o=Object.getOwnPropertySymbols(e);n<o.length;n++)t.indexOf(o[n])<0&&Object.prototype.propertyIsEnumerable.call(e,o[n])&&(r[o[n]]=e[o[n]])}return r},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.TryItPanel=void 0;const React=__importStar(require("react")),styled_components_1=__importDefault(require("styled-components")),theme_1=require("@redocly/theme"),Panel_1=require("../Panel"),icons_1=require("../icons");function TryItPanel(e){var{header:t,error:r,success:o}=e,n=__rest(e,["header","error","success"]);return React.createElement(StyledTryItPanel,Object.assign({className:"panel-try-it-nested"},n,{header:({toggle:e,expanded:a=!1})=>React.createElement(theme_1.PanelHeader,{onClick:e,expanded:a,"data-cy":n["data-cy"]},React.createElement(Panel_1.Trigger,null,React.createElement(theme_1.PanelHeaderTitle,null,t),React.createElement(theme_1.ShelfIcon,{direction:a?"down":"right"})),r&&React.createElement(icons_1.CrossIcon,{size:"14px",color:"--color-error-500"})||null,o&&React.createElement(icons_1.LockIcon,{size:"14px",color:"--color-success-500"})||null)}))}exports.TryItPanel=TryItPanel;const StyledTryItPanel=(0,styled_components_1.default)(theme_1.Panel)`
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,r,o){void 0===o&&(o=r);var n=Object.getOwnPropertyDescriptor(t,r);n&&!("get"in n?!t.__esModule:n.writable||n.configurable)||(n={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,o,n)}:function(e,t,r,o){void 0===o&&(o=r),e[o]=t[r]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&__createBinding(t,e,r);return __setModuleDefault(t,e),t},__rest=this&&this.__rest||function(e,t){var r={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(o=Object.getOwnPropertySymbols(e);n<o.length;n++)t.indexOf(o[n])<0&&Object.prototype.propertyIsEnumerable.call(e,o[n])&&(r[o[n]]=e[o[n]])}return r},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.TryItPanel=void 0;const React=__importStar(require("react")),styled_components_1=__importDefault(require("styled-components")),theme_1=require("@redocly/theme"),Panel_1=require("../Panel"),icons_1=require("../icons");function TryItPanel(e){var{header:t,error:r,success:o}=e,n=__rest(e,["header","error","success"]);return React.createElement(StyledTryItPanel,Object.assign({className:"panel-try-it-nested"},n,{header:({toggle:e,expanded:a=!1})=>React.createElement(theme_1.PanelHeader,{onClick:e,expanded:a,"data-cy":n["data-cy"]},React.createElement(Panel_1.Trigger,null,React.createElement(theme_1.PanelHeaderTitle,null,t),React.createElement(theme_1.ShelfIcon,{direction:a?"down":"right"})),r&&React.createElement(icons_1.CrossIcon,{size:"14px",color:"--color-error"})||null,o&&React.createElement(icons_1.LockIcon,{size:"14px",color:"--color-success"})||null)}))}exports.TryItPanel=TryItPanel;const StyledTryItPanel=(0,styled_components_1.default)(theme_1.Panel)`
   ${theme_1.PanelHeader} {
     border: 1px solid
-      ${({error:e})=>e?"var(--color-error-300)":"var(--panel-try-it-nested-heading-border-color)"};
+      ${({error:e})=>e?"var(--color-error-border)":"var(--panel-try-it-nested-heading-border-color)"};
     padding: 10px;
   }
 
   ${theme_1.PanelBody} {
     border: 1px solid
-      ${({error:e})=>e?"var(--color-error-300)":"var(--panel-try-it-nested-body-border-color)"};
+      ${({error:e})=>e?"var(--color-error-border)":"var(--panel-try-it-nested-body-border-color)"};
     border-top: 0;
   }
 `;

package/lib/components/rightPanel/styled.js

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

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

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

package/lib/components/shared/HttpVerb.js

@@ -1,5 +1,4 @@
-"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.HttpVerb=void 0;const styled_components_1=__importDefault(require("styled-components")),theme_1=require("@redocly/theme");exports.HttpVerb=(0,styled_components_1.default)(theme_1.OperationBadge)`
-  display: inline-block;
-  padding: 0 8px;
+"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.HttpVerb=void 0;const styled_components_1=__importDefault(require("styled-components")),theme_1=require("@redocly/theme");exports.HttpVerb=(0,styled_components_1.default)(theme_1.Tag)`
+  text-transform: uppercase;
 `;
 //# sourceMappingURL=HttpVerb.js.map

package/lib/components/shared/MimeLabel.js

@@ -1,13 +1,12 @@
-"use strict";var __importDefault=this&&this.__importDefault||function(o){return o&&o.__esModule?o:{default:o}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.MimeLabel=void 0;const styled_components_1=__importDefault(require("styled-components"));exports.MimeLabel=styled_components_1.default.div`
+"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.MimeLabel=void 0;const styled_components_1=__importDefault(require("styled-components"));exports.MimeLabel=styled_components_1.default.div`
   background-color: var(--panel-samples-dropdown-background-color);
-  color: var(---panel-samples-dropdown-color);
+  color: var(--panel-samples-text-color);
   font-family: var(--code-font-family);
   margin-bottom: 0;
   height: 36px;
   padding: var(--docs-dropdown-padding);
-  font-size: 14px;
-  line-height: 16px;
+  font-size: var(--font-size-base);
   border: var(--panel-samples-dropdown-border);
-  border-radius: var(--border-radius);
+  border-radius: var(--panel-border-radius);
 `;
 //# sourceMappingURL=MimeLabel.js.map

package/lib/components/shared/NoSampleLabel.js

@@ -4,7 +4,7 @@
 `,exports.WarnMessage=styled_components_1.default.div`
   font-size: 12px;
   padding-bottom: 10px;
-  color: var(--color-warning-500);
+  color: var(--color-warning);
   font-family: var(--code-font-family);
 `;
 //# sourceMappingURL=NoSampleLabel.js.map

package/lib/models/request.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.getRequestBody=void 0;const utils_1=require("../utils"),mediaContent_1=require("./mediaContent");function getRequestBody({parser:e,infoOrRef:t,options:o,isEvent:i,operation:n}){const{resolved:r}=e.deref(t),s=(0,utils_1.getValueFromMdParsedExtension)(r,"description")||"",u=!!r.required;let d;const a=!i,p=(0,utils_1.getContentWithLegacyExamples)(r);return void 0!==p&&(d=(0,mediaContent_1.getMediaContent)({parser:e,info:p,isRequestType:a,options:o,data:{operation:n,type:"request",absolutePointer:t.$ref||utils_1.JsonPointer.join(n.pointer,["requestBody"])}})),{description:s,required:u,content:d}}exports.getRequestBody=getRequestBody;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.getRequestBody=void 0;const utils_1=require("../utils"),mediaContent_1=require("./mediaContent");function getRequestBody({parser:e,infoOrRef:t,options:o,isEvent:i,operation:n}){const{resolved:r}=e.deref(t),s=(0,utils_1.getValueFromMdParsedExtension)(r,"description")||"",u=r.required;let d;const a=!i,p=(0,utils_1.getContentWithLegacyExamples)(r);return void 0!==p&&(d=(0,mediaContent_1.getMediaContent)({parser:e,info:p,isRequestType:a,options:o,data:{operation:n,type:"request",absolutePointer:t.$ref||utils_1.JsonPointer.join(n.pointer,["requestBody"])}})),{description:s,required:u,content:d}}exports.getRequestBody=getRequestBody;
 //# sourceMappingURL=request.js.map

package/lib/models/types.d.ts

@@ -33,7 +33,7 @@ export interface SecurityScheme {
 }
 export type RequestBodyModel = {
     description: string | GenericObject;
-    required: boolean;
+    required?: boolean;
     content: MediaContentModel | undefined;
 };
 export type ExampleModel = {

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,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,{color: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)};
 //# sourceMappingURL=Summary.js.map

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

@@ -4,7 +4,7 @@ import styled from"styled-components";import{Button}from"@redocly/theme";import{
   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"};
@@ -21,7 +21,7 @@ import styled from"styled-components";import{Button}from"@redocly/theme";import{
   padding: 5px 0;
 `;export const ServerUrl=styled.div`
   ${invertedInputStyles};
-  border-radius: 0 0 var(--border-radius) var(--border-radius);
+  border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
   padding: 7px 12px;
   overflow-wrap: break-word;
 `;export const TryItButton=styled(Button)`

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,7 +1,7 @@
 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);

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/BodyContent.d.ts

@@ -3,6 +3,7 @@ import type { MediaContentModel } from '../../models';
 interface BodyContentProps {
     content: MediaContentModel;
     description?: string | GenericObject;
+    required?: boolean;
 }
 export declare const BodyContent: React.NamedExoticComponent<BodyContentProps>;
 export {};

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

@@ -1,4 +1,4 @@
-import React,{memo}from"react";import styled from"styled-components";import{MediaTypesSwitch}from"../MediaTypeSwitch";import{Markdown}from"../Markdown";import{ConstraintsView}from"../Fields";import{Schema}from"../Schema";import{DropdownWithinHeader}from"./DropdownWithinHeader";function BodyContentComponent({content:e,description:t}){const{isRequestType:o}=e;return React.createElement(MediaTypesSwitch,{content:e,renderDropdown:DropdownWithinHeader},(({schema:e,examples:n,operation:r})=>React.createElement(React.Fragment,null,(void 0!==t||(null==e?void 0:e.constraints))&&React.createElement(Description,null,void 0!==t&&React.createElement(Markdown,{source:t}),"object"===(null==e?void 0:e.type)&&React.createElement(ConstraintsView,{constraints:(null==e?void 0:e.constraints)||[]})),React.createElement(Schema,{skipReadOnly:o,skipWriteOnly:!o,key:"schema",schema:e,examples:n,operation:r}))))}export const BodyContent=memo(BodyContentComponent);const Description=styled.div`
+import React,{memo}from"react";import styled from"styled-components";import{MediaTypesSwitch}from"../MediaTypeSwitch";import{Markdown}from"../Markdown";import{ConstraintsView}from"../Fields";import{Schema}from"../Schema";import{DropdownWithinHeader}from"./DropdownWithinHeader";function BodyContentComponent({content:e,description:t,required:n}){const{isRequestType:o}=e;return React.createElement(MediaTypesSwitch,{content:e,renderDropdown:e=>React.createElement(DropdownWithinHeader,Object.assign({required:n},e))},(({schema:e,examples:n,operation:r})=>React.createElement(React.Fragment,null,(void 0!==t||(null==e?void 0:e.constraints))&&React.createElement(Description,null,void 0!==t&&React.createElement(Markdown,{source:t}),"object"===(null==e?void 0:e.type)&&React.createElement(ConstraintsView,{constraints:(null==e?void 0:e.constraints)||[]})),React.createElement(Schema,{skipReadOnly:o,skipWriteOnly:!o,key:"schema",schema:e,examples:n,operation:r}))))}export const BodyContent=memo(BodyContentComponent);const Description=styled.div`
   margin-bottom: calc(var(--spacing-unit) * 4);
 `;
 //# sourceMappingURL=BodyContent.js.map

package/lib-esm/components/Parameters/DropdownWithinHeader.d.ts

@@ -1,2 +1,5 @@
 /// <reference types="react" />
-export declare function DropdownWithinHeader(props: any): JSX.Element;
+import type { DropdownOrLabelProps } from '../DropdownOrLabel/DropdownOrLabel';
+export declare function DropdownWithinHeader({ required, ...props }: DropdownOrLabelProps & {
+    required?: boolean;
+}): JSX.Element;

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

@@ -1,2 +1,7 @@
-import React from"react";import{FieldsGroupHeader}from"../common";import{DropdownOrLabel}from"../DropdownOrLabel";import{SchemaMimeTypeDropdown}from"../common/Dropdown";export function DropdownWithinHeader(e){return React.createElement(FieldsGroupHeader,{key:"header","data-cy":"request-body-header"},"Request Body schema: ",React.createElement(DropdownOrLabel,Object.assign({},e,{Dropdown:SchemaMimeTypeDropdown})))}
+var __rest=this&&this.__rest||function(e,o){var r={};for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&o.indexOf(t)<0&&(r[t]=e[t]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(t=Object.getOwnPropertySymbols(e);n<t.length;n++)o.indexOf(t[n])<0&&Object.prototype.propertyIsEnumerable.call(e,t[n])&&(r[t[n]]=e[t[n]])}return r};import React from"react";import styled from"styled-components";import{FieldsGroupHeader,RequiredLabel}from"../common";import{DropdownOrLabel}from"../DropdownOrLabel";import{SchemaMimeTypeDropdown}from"../common/Dropdown";export function DropdownWithinHeader(e){var{required:o}=e,r=__rest(e,["required"]);const t="boolean"==typeof o&&!!o,n="boolean"==typeof o&&!o;return React.createElement(FieldsGroupHeader,{key:"header","data-cy":"request-body-header"},"Request Body schema: ",React.createElement(DropdownOrLabel,Object.assign({},r,{Dropdown:SchemaMimeTypeDropdown})),t&&React.createElement(RequiredBody,null,"required"),n&&React.createElement(OptionalBody,null,"optional"))}const commonStyles="\n  text-transform: lowercase;\n  font-size: var(--schema-labels-font-size);\n  font-family: var(--font-family-monospaced);\n  font-weight: var(--font-weight-regular);\n",RequiredBody=styled(RequiredLabel)`
+  ${commonStyles}
+`,OptionalBody=styled("div")`
+  ${commonStyles}
+  color: var(--text-color-secondary);
+`;
 //# sourceMappingURL=DropdownWithinHeader.js.map

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

@@ -1,2 +1,2 @@
-import React from"react";import{BodyContent}from"./BodyContent";import{ParametersGroup}from"./ParametersGroup";const PARAM_PLACES=["path","query","cookie","header"];export function Parameters({body:e,parameters:t=[]}){if(void 0===e&&void 0===t)return null;const r=(e=>{const t={};return e.forEach((e=>{safePush(t,e.in,e)})),t})(t),o=t.length>0?PARAM_PLACES:[],n=e&&e.content,a=e&&e.description;return React.createElement(React.Fragment,null,o.map((e=>React.createElement(ParametersGroup,{key:e,place:e,parameters:r[e]}))),n&&React.createElement(BodyContent,{content:n,description:a}))}function safePush(e,t="",r){e[t]||(e[t]=[]),e[t].push(r)}
+import React from"react";import{BodyContent}from"./BodyContent";import{ParametersGroup}from"./ParametersGroup";const PARAM_PLACES=["path","query","cookie","header"];export function Parameters({body:e,parameters:t=[]}){if(void 0===e&&void 0===t)return null;const r=(e=>{const t={};return e.forEach((e=>{safePush(t,e.in,e)})),t})(t),o=t.length>0?PARAM_PLACES:[],{content:n,description:a,required:c}=e||{};return React.createElement(React.Fragment,null,o.map((e=>React.createElement(ParametersGroup,{key:e,place:e,parameters:r[e]}))),n&&React.createElement(BodyContent,{content:n,description:a,required:c}))}function safePush(e,t="",r){e[t]||(e[t]=[]),e[t].push(r)}
 //# sourceMappingURL=Parameters.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;