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

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.DeprecatedLabel=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;
@@ -62,6 +62,10 @@
   background-color: var(--schema-recursive-background-color);
   border-color: var(--schema-recursive-border-color);
   color: var(--schema-recursive-text-color);
+`,exports.DeprecatedLabel=(0,styled_components_1.default)(exports.FieldValueLabel)`
+  color: var(--badge-deprecated-text-color);
+  background-color: var(--badge-deprecated-background-color);
+  border-color: var(--badge-deprecated-border-color);
 `,exports.EnumValue=(0,styled_components_1.default)(exports.FieldValueLabel)`
   background-color: var(--schema-enum-background-color);
   border-color: var(--schema-enum-border-color);
@@ -97,11 +101,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/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,10 +1,13 @@
 "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;
-    font-family: var(--code-font-family);
-    line-height: 18px;
-    padding: 10px;
+    background-color: var(--bg-overlay) !important;
+    color: var(--code-block-text-color) !important;
+    font-family: var(--code-block-font-family);
+    font-weight: var(--code-block-font-weight);
+    font-size: var(--code-block-font-size);
+    line-height: var(--code-block-line-height);
+    padding: var(--code-block-padding);
+    white-space: var(--code-wrap, pre);
   }
 
   .CodeMirror-lint-mark-error {
@@ -12,10 +15,6 @@
     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAYAAAD+Bd/7AAAAVUlEQVR42mNgQAL/GRjigPg/EP8FYntkCX4gtoVKgvE/BoabcEVAhj6S5DUgfgFl/wFJ2gPxL6iuT1DF+kD2R5AYA5KRj6CS/FAMYvszIBltz4AFAAD9fz0YtLg13wAAAABJRU5ErkJggg==') !important;
   }
 
-  .cm-s-material.CodeMirror-focused div.CodeMirror-selected {
-    background: rgba(255, 255, 255, 0.3) !important;
-  }
-
   .cm-s-material .CodeMirror-code .cm-string.cm-property {
     color: var(--code-block-tokens-property-string-color);
   }
@@ -25,12 +24,17 @@
   }
 
   .cm-s-material .CodeMirror-code .cm-atom {
-    color: var(--text-color-inverse);
+    color: var(--text-secondary);
   }
 
   div .cm-s-material .CodeMirror-matchingbracket {
     outline: 1px solid grey;
     text-decoration: none;
+    color: var(--color-gold-8) !important;
+  }
+
+  div .cm-s-material .CodeMirror-nonmatchingbracket {
+    color: var(--color-red-8) !important;
   }
 
   .react-codemirror2 {

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

@@ -8,7 +8,6 @@ export declare const ConsoleWrap: import("styled-components").StyledComponent<"d
 }, never>;
 export declare const ConsoleBody: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CloseButton: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const invertedInputStyles: import("styled-components").FlattenSimpleInterpolation;
 export declare const TryItDropdown: import("styled-components").StyledComponent<import("react").NamedExoticComponent<DropdownProps>, any, DropdownProps & {
     fullWidth?: boolean | undefined;
     variant?: "dark" | "light" | undefined;

package/lib/components/rightPanel/styled.js

@@ -1,4 +1,4 @@
-"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(o,e,r,t){void 0===t&&(t=r);var n=Object.getOwnPropertyDescriptor(e,r);n&&!("get"in n?!e.__esModule:n.writable||n.configurable)||(n={enumerable:!0,get:function(){return e[r]}}),Object.defineProperty(o,t,n)}:function(o,e,r,t){void 0===t&&(t=r),o[t]=e[r]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(o,e){Object.defineProperty(o,"default",{enumerable:!0,value:e})}:function(o,e){o.default=e}),__importStar=this&&this.__importStar||function(o){if(o&&o.__esModule)return o;var e={};if(null!=o)for(var r in o)"default"!==r&&Object.prototype.hasOwnProperty.call(o,r)&&__createBinding(e,o,r);return __setModuleDefault(e,o),e};Object.defineProperty(exports,"__esModule",{value:!0}),exports.FlowName=exports.ResponseHeader=exports.TryItDropdown=exports.invertedInputStyles=exports.CloseButton=exports.ConsoleBody=exports.ConsoleWrap=exports.blink=void 0;const styled_components_1=__importStar(require("styled-components")),Dropdown_1=require("../common/Dropdown"),shake=styled_components_1.keyframes`
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,o,r,t){void 0===t&&(t=r);var n=Object.getOwnPropertyDescriptor(o,r);n&&!("get"in n?!o.__esModule:n.writable||n.configurable)||(n={enumerable:!0,get:function(){return o[r]}}),Object.defineProperty(e,t,n)}: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.FlowName=exports.ResponseHeader=exports.TryItDropdown=exports.CloseButton=exports.ConsoleBody=exports.ConsoleWrap=exports.blink=void 0;const styled_components_1=__importStar(require("styled-components")),Dropdown_1=require("../common/Dropdown"),shake=styled_components_1.keyframes`
   10%, 90% {
     transform: translate3d(-1px, 0, 0);
   }
@@ -37,18 +37,17 @@
   z-index: var(--z-index-surface);
   display: flex;
   flex-direction: column;
-  max-height: calc(85vh - ${({scrollYOffset:o})=>o?o():0}px);
+  max-height: calc(85vh - ${({scrollYOffset:e})=>e?e():0}px);
   margin-bottom: 10px;
-  ${({shaking:o})=>o&&shakeAnimation};
+  ${({shaking:e})=>e&&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;
   padding: var(--panel-samples-body-padding);
   overflow: auto;
-  display: ${({hidden:o})=>o?"none":"flex"};
+  display: ${({hidden:e})=>e?"none":"flex"};
   flex-direction: column;
   position: relative;
   background-color: var(--panel-samples-body-background-color);
@@ -56,26 +55,7 @@
   cursor: pointer;
   font-size: 18px;
   font-weight: bold;
-  color: var(--text-color-inverse);
-`,exports.invertedInputStyles=styled_components_1.css`
-  border: none;
-  outline: none;
-  padding: 8px;
-  border-radius: var(--border-radius);
-  background-color: var(--panel-try-it-input-background-color);
-  color: var(--panel-try-it-input-text-color);
-  font-family: var(--code-font-family);
-  font-size: var(--font-size-base);
-  border: var(--panel-try-it-input-border);
-
-  &::placeholder {
-    opacity: 0.6;
-    color: var(--text-color-inverse);
-  }
-
-  &:-webkit-autofill {
-    background-color: var(--panel-samples-background-color);
-  }
+  color: var(--text-secondary);
 `,exports.TryItDropdown=(0,styled_components_1.default)(Dropdown_1.Dropdown)`
   .dropdown-select,
   label {

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(--code-font-size);
   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-esm/components/Callbacks/CallbackSummary.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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