@redocly/reference-docs 2.36.0 → 2.37.0

package/lib-esm/components/Tabs/CollapsingTabs/CollapsingTabsBase.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { ReactNode } from 'react';
 import type { TabProps as ReactTabProps } from 'react-tabs';
 import type { OperationModel } from '../../../redoc-lib';
 export interface TabProps extends ReactTabProps {
@@ -7,12 +7,12 @@ export interface TabProps extends ReactTabProps {
 export interface TabsProps {
     tabs: TabProps[];
     hidden?: boolean;
-    children: React.ReactNode;
+    children: ReactNode;
     operation: OperationModel;
 }
 interface CollapsingTabsComponentProps extends TabsProps {
     activeIndex: number;
     onChange: (idx: number) => void;
 }
-export declare const CollapsingTabsBase: React.NamedExoticComponent<CollapsingTabsComponentProps>;
+export declare const CollapsingTabsBase: import("react").NamedExoticComponent<CollapsingTabsComponentProps>;
 export {};

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

@@ -1,2 +1,2 @@
-import React,{memo,useContext,useEffect,useMemo,useState}from"react";import{Tabs}from"react-tabs";import{OptionsContext}from"../../../redoc-lib";import{CollapsingDropdown}from"../../common/Dropdown";import{CollapsingTabList}from"./CollapsingTabList";import{CollapsingTab}from"./CollapsingTab";function CollapsingTabsBaseComponent(e){var t=e.tabs,o=e.children,n=e.hidden,a=e.activeIndex,l=e.onChange,i=useContext(OptionsContext).samplesTabsMaxCount,s=useMemo((function(){return t.slice(i).map((function(e,t){return{idx:t,value:e.title}}))}),[t,i]),r=s.length+" more",c=useState(r),m=c[0],p=c[1],u=React.useCallback((function(){var e=a>=i;m!==r&&m===t[a].title||!e?m===r||e||p(r):p(t[a].title)}),[a,i,m,r,t]);useEffect((function(){setTimeout(u,0)}),[a,i,u]);return React.createElement(Tabs,{selectedIndex:a,onSelect:l},React.createElement(CollapsingTabList,{hidden:n},t.map((function(e,t){return React.createElement(CollapsingTab,{key:e.key,disabled:t>=i},e.title)})),s.length?React.createElement(CollapsingDropdown,{options:s,onChange:function(e){l(i+e.idx)},placeholder:r,value:m,active:a>=i}):null),o)}export var CollapsingTabsBase=memo(CollapsingTabsBaseComponent);
+import{__assign}from"tslib";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{memo,useCallback,useContext,useEffect,useMemo,useState}from"react";import{Tabs}from"react-tabs";import{OptionsContext}from"../../../redoc-lib";import{CollapsingDropdown}from"../../common/Dropdown";import{CollapsingTabList}from"./CollapsingTabList";import{CollapsingTab}from"./CollapsingTab";function CollapsingTabsBaseComponent(e){var o=e.tabs,s=e.children,n=e.hidden,t=e.activeIndex,i=e.onChange,a=useContext(OptionsContext).samplesTabsMaxCount,l=useMemo((function(){return o.slice(a).map((function(e,o){return{idx:o,value:e.title}}))}),[o,a]),r=l.length+" more",m=useState(r),p=m[0],u=m[1],c=useCallback((function(){var e=t>=a;p!==r&&p===o[t].title||!e?p===r||e||u(r):u(o[t].title)}),[t,a,p,r,o]);useEffect((function(){setTimeout(c,0)}),[t,a,c]);return _jsxs(Tabs,__assign({selectedIndex:t,onSelect:i},{children:[_jsxs(CollapsingTabList,__assign({hidden:n},{children:[o.map((function(e,o){return _jsx(CollapsingTab,__assign({disabled:o>=a},{children:e.title}),e.key)})),l.length?_jsx(CollapsingDropdown,{options:l,onChange:function(e){i(a+e.idx)},placeholder:r,value:p,active:t>=a},void 0):null]}),void 0),s]}),void 0)}export var CollapsingTabsBase=memo(CollapsingTabsBaseComponent);
 //# sourceMappingURL=CollapsingTabsBase.js.map

package/lib-esm/components/VersionSwitcher.js

@@ -1,2 +1,2 @@
-import{__makeTemplateObject}from"tslib";import*as React from"react";import{styled}from"../redoc-lib";import{VersionDropdown}from"./common/Dropdown";export var VersionSwitcher=function(e){var n=e.spec,t=e.onChange,i=n.versionsInfo.map((function(e,n){return{idx:n,value:e.title}}));return React.createElement(VersionWrapper,null,React.createElement(VersionDropdown,{options:i,value:i[n.activeVersionIdx].value,onChange:t,ariaLabel:"Version"}))};var templateObject_1,VersionWrapper=styled.div(templateObject_1||(templateObject_1=__makeTemplateObject(["\n  padding: ",";\n  width: 100%;\n  display: inline-block;\n  font-size: 12px;\n"],["\n  padding: ",";\n  width: 100%;\n  display: inline-block;\n  font-size: 12px;\n"])),(function(e){var n=e.theme;return 2*n.spacing.unit+"px "+4*n.spacing.unit+"px"}));
+import{__makeTemplateObject}from"tslib";import{jsx as _jsx}from"react/jsx-runtime";import{styled}from"../redoc-lib";import{VersionDropdown}from"./common/Dropdown";export var VersionSwitcher=function(e){var n=e.spec,i=e.onChange,t=n.versionsInfo.map((function(e,n){return{idx:n,value:e.title}}));return _jsx(VersionWrapper,{children:_jsx(VersionDropdown,{options:t,value:t[n.activeVersionIdx].value,onChange:i,ariaLabel:"Version"},void 0)},void 0)};var templateObject_1,VersionWrapper=styled.div(templateObject_1||(templateObject_1=__makeTemplateObject(["\n  padding: ",";\n  width: 100%;\n  display: inline-block;\n  font-size: 12px;\n"],["\n  padding: ",";\n  width: 100%;\n  display: inline-block;\n  font-size: 12px;\n"])),(function(e){var n=e.theme;return 2*n.spacing.unit+"px "+4*n.spacing.unit+"px"}));
 //# sourceMappingURL=VersionSwitcher.js.map

package/lib-esm/components/common/Checkbox.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+/// <reference types="react" />
 export declare const StyledInput: import("styled-components").StyledComponent<"input", import("../../services/extendTheme").ProTheme, {
     fullWidth?: boolean | undefined;
 }, never>;
@@ -7,4 +7,4 @@ export interface CheckboxExtraProps {
     label?: string;
     nowrap?: boolean;
 }
-export declare const Checkbox: React.ForwardRefExoticComponent<React.InputHTMLAttributes<Omit<HTMLInputElement, "type">> & CheckboxExtraProps & React.RefAttributes<HTMLInputElement>>;
+export declare const Checkbox: import("react").ForwardRefExoticComponent<import("react").InputHTMLAttributes<Omit<HTMLInputElement, "type">> & CheckboxExtraProps & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -1,2 +1,2 @@
-import{__assign,__makeTemplateObject}from"tslib";import*as React from"react";import styled from"../../redoc-lib/src/styled-components";export var StyledInput=styled.input(templateObject_1||(templateObject_1=__makeTemplateObject(["\n  cursor: pointer;\n  margin-left: 0;\n  margin-right: 5px;\n  height: 20px;\n\n  align-self: baseline;\n  margin-top: 0;\n  margin-bottom: 0;\n"],["\n  cursor: pointer;\n  margin-left: 0;\n  margin-right: 5px;\n  height: 20px;\n\n  align-self: baseline;\n  margin-top: 0;\n  margin-bottom: 0;\n"])));var templateObject_1,templateObject_2,templateObject_3,CheckboxLabel=styled.label(templateObject_2||(templateObject_2=__makeTemplateObject(["\n  display: inline-block;\n  cursor: pointer;\n  vertical-align: middle;\n  position: relative;\n  text-overflow: ellipsis;\n  overflow: hidden;\n\n  overflow-wrap: break-word;\n  line-height: 20px;\n"],["\n  display: inline-block;\n  cursor: pointer;\n  vertical-align: middle;\n  position: relative;\n  text-overflow: ellipsis;\n  overflow: hidden;\n\n  overflow-wrap: break-word;\n  line-height: 20px;\n"]))),CheckBoxWrap=styled.div(templateObject_3||(templateObject_3=__makeTemplateObject(["\n  width: ",";\n  display: inline-flex;\n  align-items: center;\n\n  & > label {\n    white-space: ",";\n  }\n\n  ","\n"],["\n  width: ",";\n  display: inline-flex;\n  align-items: center;\n\n  & > label {\n    white-space: ",";\n  }\n\n  ","\n"])),(function(e){return e.fullWidth?"100%":"50%"}),(function(e){return e.nowrap?"nowrap":"normal"}),(function(e){return e.nowrap?"":"\n    :not(:first-child) {\n      margin-top: 5px;\n    }\n  "}));function CheckboxComponent(e,n){var t=e.fullWidth,l=e.id,i=e.label,r=e.nowrap;return React.createElement(CheckBoxWrap,{fullWidth:t,nowrap:r},React.createElement(StyledInput,__assign({},e,{type:"checkbox",ref:n})),React.createElement(CheckboxLabel,{htmlFor:l},i))}export var Checkbox=React.forwardRef(CheckboxComponent);
+import{__assign,__makeTemplateObject}from"tslib";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{forwardRef}from"react";import styled from"../../redoc-lib/src/styled-components";export var StyledInput=styled.input(templateObject_1||(templateObject_1=__makeTemplateObject(["\n  cursor: pointer;\n  margin-left: 0;\n  margin-right: 5px;\n  height: 20px;\n\n  align-self: baseline;\n  margin-top: 0;\n  margin-bottom: 0;\n"],["\n  cursor: pointer;\n  margin-left: 0;\n  margin-right: 5px;\n  height: 20px;\n\n  align-self: baseline;\n  margin-top: 0;\n  margin-bottom: 0;\n"])));var templateObject_1,templateObject_2,templateObject_3,CheckboxLabel=styled.label(templateObject_2||(templateObject_2=__makeTemplateObject(["\n  display: inline-block;\n  cursor: pointer;\n  vertical-align: middle;\n  position: relative;\n  text-overflow: ellipsis;\n  overflow: hidden;\n\n  overflow-wrap: break-word;\n  line-height: 20px;\n"],["\n  display: inline-block;\n  cursor: pointer;\n  vertical-align: middle;\n  position: relative;\n  text-overflow: ellipsis;\n  overflow: hidden;\n\n  overflow-wrap: break-word;\n  line-height: 20px;\n"]))),CheckBoxWrap=styled.div(templateObject_3||(templateObject_3=__makeTemplateObject(["\n  width: ",";\n  display: inline-flex;\n  align-items: center;\n\n  & > label {\n    white-space: ",";\n  }\n\n  ","\n"],["\n  width: ",";\n  display: inline-flex;\n  align-items: center;\n\n  & > label {\n    white-space: ",";\n  }\n\n  ","\n"])),(function(e){return e.fullWidth?"100%":"50%"}),(function(e){return e.nowrap?"nowrap":"normal"}),(function(e){return e.nowrap?"":"\n    :not(:first-child) {\n      margin-top: 5px;\n    }\n  "}));function CheckboxComponent(e,n){var t=e.fullWidth,i=e.id,l=e.label,r=e.nowrap;return _jsxs(CheckBoxWrap,__assign({fullWidth:t,nowrap:r},{children:[_jsx(StyledInput,__assign({},e,{type:"checkbox",ref:n}),void 0),_jsx(CheckboxLabel,__assign({htmlFor:i},{children:l}),void 0)]}),void 0)}export var Checkbox=forwardRef(CheckboxComponent);
 //# sourceMappingURL=Checkbox.js.map

package/lib-esm/components/common/CheckboxList.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
 import type { ChangeEvent } from 'react';
+import { Component } from 'react';
 import type { FieldContext } from 'informed';
 declare type FieldValue = string[];
 interface CheckboxListComponentState {
@@ -12,7 +12,7 @@ export interface CheckboxListComponentProps {
     showControls?: boolean;
     trimItemsLength?: boolean;
 }
-export declare class CheckboxListComponent extends React.Component<FieldContext<FieldValue> & CheckboxListComponentProps, CheckboxListComponentState> {
+export declare class CheckboxListComponent extends Component<FieldContext<FieldValue> & CheckboxListComponentProps, CheckboxListComponentState> {
     state: CheckboxListComponentState;
     onCheckBoxClick(event: ChangeEvent<Omit<HTMLInputElement, 'type'>>): void;
     private isFieldChecked;
@@ -21,5 +21,5 @@ export declare class CheckboxListComponent extends React.Component<FieldContext<
     private clearAll;
     render(): JSX.Element;
 }
-export declare const CheckboxList: React.ComponentType<import("informed").FieldProps<FieldValue, any> & CheckboxListComponentProps>;
+export declare const CheckboxList: import("react").ComponentType<import("informed").FieldProps<FieldValue, any> & CheckboxListComponentProps>;
 export {};

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

@@ -1,2 +1,2 @@
-import{__extends,__makeTemplateObject,__spreadArray}from"tslib";import React from"react";import{asField}from"informed";import{styled}from"../../redoc-lib";import{SampleControls,SamplesControlButton}from"../../redoc-lib/src/common-elements";import{FormError}from"./form";import{Checkbox}from"./Checkbox";var DEFAULT_MAX_ITEMS=11,CheckboxListComponent=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return Object.defineProperty(t,"state",{enumerable:!0,configurable:!0,writable:!0,value:{collapsed:!0}}),t}return __extends(t,e),Object.defineProperty(t.prototype,"onCheckBoxClick",{enumerable:!1,configurable:!0,writable:!0,value:function(e){var t=e.target.value,l=e.target.checked;this.props.fieldApi.setTouched(!0);var r,o=this.props.fieldApi.getValue()||[];if(l)r=__spreadArray(__spreadArray([],o,!0),[t],!1);else{var a=o.indexOf(t);r=__spreadArray(__spreadArray([],o.slice(0,a),!0),o.slice(a+1),!0)}this.props.fieldApi.setValue(r)}}),Object.defineProperty(t.prototype,"isFieldChecked",{enumerable:!1,configurable:!0,writable:!0,value:function(e){return this.props.fieldApi.getValue().includes(e)}}),Object.defineProperty(t.prototype,"toggle",{enumerable:!1,configurable:!0,writable:!0,value:function(){this.setState({collapsed:!this.state.collapsed})}}),Object.defineProperty(t.prototype,"selectAll",{enumerable:!1,configurable:!0,writable:!0,value:function(){this.props.fieldApi.setValue(this.props.items)}}),Object.defineProperty(t.prototype,"clearAll",{enumerable:!1,configurable:!0,writable:!0,value:function(){this.props.fieldApi.setValue([])}}),Object.defineProperty(t.prototype,"render",{enumerable:!1,configurable:!0,writable:!0,value:function(){var e=this,t=this.props,l=t.items,r=t.fieldApi,o=t.validateOnChange,a=t.maxDisplayedItems,n=t.showControls,i=t.trimItemsLength,c=this.state.collapsed,p=r.getError(),s=a||DEFAULT_MAX_ITEMS,m=i&&this.state.collapsed?l.slice(0,s):l;return React.createElement("div",null,n?React.createElement(ControlButtonsWrapper,null,React.createElement(SamplesControlButton,{onClick:function(){e.selectAll()}},"Select all"),React.createElement(SamplesControlButton,{onClick:function(){e.clearAll()}},"Clear")):null,React.createElement("div",null,m.map((function(t){return React.createElement(Checkbox,{fullWidth:!0,id:t,value:t,checked:e.isFieldChecked(t),label:t,key:t,onChange:function(t){e.onCheckBoxClick(t),o&&r.validate()}})})),l.length>s&&i?React.createElement(ToggleButton,{onClick:function(){e.toggle()}},c?"Show all":"Collapse"):null),p?React.createElement(FormError,null,p):"")}}),t}(React.Component);export{CheckboxListComponent};export var CheckboxList=asField(CheckboxListComponent);var templateObject_1,templateObject_2,ControlButtonsWrapper=styled(SampleControls)(templateObject_1||(templateObject_1=__makeTemplateObject(["\n  opacity: 1;\n  text-align: left;\n"],["\n  opacity: 1;\n  text-align: left;\n"]))),ToggleButton=styled(SamplesControlButton)(templateObject_2||(templateObject_2=__makeTemplateObject(["\n  float: right;\n"],["\n  float: right;\n"])));
+import{__assign,__extends,__makeTemplateObject,__spreadArray}from"tslib";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{Component}from"react";import{asField}from"informed";import{styled}from"../../redoc-lib";import{SampleControls,SamplesControlButton}from"../../redoc-lib/src/common-elements";import{FormError}from"./form";import{Checkbox}from"./Checkbox";var DEFAULT_MAX_ITEMS=11,CheckboxListComponent=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return Object.defineProperty(t,"state",{enumerable:!0,configurable:!0,writable:!0,value:{collapsed:!0}}),t}return __extends(t,e),Object.defineProperty(t.prototype,"onCheckBoxClick",{enumerable:!1,configurable:!0,writable:!0,value:function(e){var t=e.target.value,o=e.target.checked;this.props.fieldApi.setTouched(!0);var l,r=this.props.fieldApi.getValue()||[];if(o)l=__spreadArray(__spreadArray([],r,!0),[t],!1);else{var i=r.indexOf(t);l=__spreadArray(__spreadArray([],r.slice(0,i),!0),r.slice(i+1),!0)}this.props.fieldApi.setValue(l)}}),Object.defineProperty(t.prototype,"isFieldChecked",{enumerable:!1,configurable:!0,writable:!0,value:function(e){return this.props.fieldApi.getValue().includes(e)}}),Object.defineProperty(t.prototype,"toggle",{enumerable:!1,configurable:!0,writable:!0,value:function(){this.setState({collapsed:!this.state.collapsed})}}),Object.defineProperty(t.prototype,"selectAll",{enumerable:!1,configurable:!0,writable:!0,value:function(){this.props.fieldApi.setValue(this.props.items)}}),Object.defineProperty(t.prototype,"clearAll",{enumerable:!1,configurable:!0,writable:!0,value:function(){this.props.fieldApi.setValue([])}}),Object.defineProperty(t.prototype,"render",{enumerable:!1,configurable:!0,writable:!0,value:function(){var e=this,t=this.props,o=t.items,l=t.fieldApi,r=t.validateOnChange,i=t.maxDisplayedItems,n=t.showControls,a=t.trimItemsLength,s=this.state.collapsed,p=l.getError(),c=i||DEFAULT_MAX_ITEMS,d=a&&this.state.collapsed?o.slice(0,c):o;return _jsxs("div",{children:[n?_jsxs(ControlButtonsWrapper,{children:[_jsx(SamplesControlButton,__assign({onClick:function(){e.selectAll()}},{children:"Select all"}),void 0),_jsx(SamplesControlButton,__assign({onClick:function(){e.clearAll()}},{children:"Clear"}),void 0)]},void 0):null,_jsxs("div",{children:[d.map((function(t){return _jsx(Checkbox,{fullWidth:!0,id:t,value:t,checked:e.isFieldChecked(t),label:t,onChange:function(t){e.onCheckBoxClick(t),r&&l.validate()}},t)})),o.length>c&&a?_jsx(ToggleButton,__assign({onClick:function(){e.toggle()}},{children:s?"Show all":"Collapse"}),void 0):null]},void 0),p?_jsx(FormError,{children:p},void 0):""]},void 0)}}),t}(Component);export{CheckboxListComponent};export var CheckboxList=asField(CheckboxListComponent);var templateObject_1,templateObject_2,ControlButtonsWrapper=styled(SampleControls)(templateObject_1||(templateObject_1=__makeTemplateObject(["\n  opacity: 1;\n  text-align: left;\n"],["\n  opacity: 1;\n  text-align: left;\n"]))),ToggleButton=styled(SamplesControlButton)(templateObject_2||(templateObject_2=__makeTemplateObject(["\n  float: right;\n"],["\n  float: right;\n"])));
 //# sourceMappingURL=CheckboxList.js.map

package/lib-esm/components/common/ClearButton/ClearButton.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
+/// <reference types="react" />
 import type { ClearButtonProps } from './types';
-export declare const ClearButton: React.NamedExoticComponent<ClearButtonProps>;
+export declare const ClearButton: import("react").NamedExoticComponent<ClearButtonProps>;

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

@@ -1,2 +1,2 @@
-import React from"react";var ClearButtonComponent=function(e){var t=e.className,a=e.style,n=e.handleClear;return React.createElement("button",{className:t,style:a,onClick:n},"✕")};export var ClearButton=React.memo(ClearButtonComponent);
+import{__assign}from"tslib";import{jsx as _jsx}from"react/jsx-runtime";import{memo}from"react";var ClearButtonComponent=function(t){var o=t.className,r=t.style,e=t.handleClear;return _jsx("button",__assign({className:o,style:r,onClick:e},{children:"✕"}),void 0)};export var ClearButton=memo(ClearButtonComponent);
 //# sourceMappingURL=ClearButton.js.map

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

@@ -1,3 +1,3 @@
-import React from 'react';
+/// <reference types="react" />
 import type { DropdownProps } from './types';
-export declare const Dropdown: React.NamedExoticComponent<DropdownProps>;
+export declare const Dropdown: import("react").NamedExoticComponent<DropdownProps>;

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

@@ -1,2 +1,2 @@
-import{__makeTemplateObject}from"tslib";import React from"react";import styled from"../../../redoc-lib/src/styled-components";import{ClearButton}from"../ClearButton";var templateObject_1,ArrowSvg=function(e){var t=e.className,n=e.style;return React.createElement("svg",{className:t,style:n,xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"},React.createElement("polyline",{points:"6 9 12 15 18 9"}))},ArrowIcon=styled(ArrowSvg)(templateObject_1||(templateObject_1=__makeTemplateObject(["\n  position: absolute;\n  pointer-events: none;\n  z-index: 1;\n  top: 50%;\n  -webkit-transform: translateY(-50%);\n  -ms-transform: translateY(-50%);\n  transform: translateY(-50%);\n  right: 8px;\n  margin: auto;\n  text-align: center;\n  polyline {\n    color: ",";\n  }\n"],["\n  position: absolute;\n  pointer-events: none;\n  z-index: 1;\n  top: 50%;\n  -webkit-transform: translateY(-50%);\n  -ms-transform: translateY(-50%);\n  transform: translateY(-50%);\n  right: 8px;\n  margin: auto;\n  text-align: center;\n  polyline {\n    color: ",";\n  }\n"])),(function(e){return"dark"===e.variant&&"white"})),DropdownComponent=function(e){var t=e.options,n=e.onChange,a=e.handleClear,r=e.clearable,o=e.placeholder,l=e.value,i=void 0===l?"":l,c=e.className,s=e.variant,m=void 0===s?"light":s;return React.createElement("div",{className:c+" dropdown-wrapper"},React.createElement(ArrowIcon,{variant:m}),r&&(null==i?void 0:i.length)>0&&React.createElement(ClearButton,{handleClear:a}),React.createElement("select",{onChange:function(e){var a=e.target.selectedIndex;n(t[o||!i?a-1:a])},value:i,className:"dropdown-select"},o&&React.createElement("option",{disabled:!0,hidden:!0,value:o},o),!i&&!o&&React.createElement("option",{disabled:!0}),t.map((function(e,t){var n=e.idx,a=e.value,r=e.title;return React.createElement("option",{key:n||a+t,value:a,className:"dropdown-option"},r||a)}))),React.createElement("label",null,i))};export var Dropdown=React.memo(DropdownComponent);
+import{__assign,__makeTemplateObject}from"tslib";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{memo}from"react";import styled from"../../../redoc-lib/src/styled-components";import{ClearButton}from"../ClearButton";var templateObject_1,ArrowSvg=function(n){var e=n.className,t=n.style;return _jsx("svg",__assign({className:e,style:t,xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"},{children:_jsx("polyline",{points:"6 9 12 15 18 9"},void 0)}),void 0)},ArrowIcon=styled(ArrowSvg)(templateObject_1||(templateObject_1=__makeTemplateObject(["\n  position: absolute;\n  pointer-events: none;\n  z-index: 1;\n  top: 50%;\n  -webkit-transform: translateY(-50%);\n  -ms-transform: translateY(-50%);\n  transform: translateY(-50%);\n  right: 8px;\n  margin: auto;\n  text-align: center;\n  polyline {\n    color: ",";\n  }\n"],["\n  position: absolute;\n  pointer-events: none;\n  z-index: 1;\n  top: 50%;\n  -webkit-transform: translateY(-50%);\n  -ms-transform: translateY(-50%);\n  transform: translateY(-50%);\n  right: 8px;\n  margin: auto;\n  text-align: center;\n  polyline {\n    color: ",";\n  }\n"])),(function(n){return"dark"===n.variant&&"white"})),DropdownComponent=function(n){var e=n.options,t=n.onChange,o=n.handleClear,r=n.clearable,a=n.placeholder,s=n.value,i=void 0===s?"":s,l=n.className,d=n.variant;return _jsxs("div",__assign({className:l+" dropdown-wrapper"},{children:[_jsx(ArrowIcon,{variant:void 0===d?"light":d},void 0),r&&(null==i?void 0:i.length)>0&&_jsx(ClearButton,{handleClear:o},void 0),_jsxs("select",__assign({onChange:function(n){var o=n.target.selectedIndex;t(e[a||!i?o-1:o])},value:i,className:"dropdown-select"},{children:[a&&_jsx("option",__assign({disabled:!0,hidden:!0,value:a},{children:a}),void 0),!i&&!a&&_jsx("option",{disabled:!0},void 0),e.map((function(n,e){var t=n.idx,o=n.value,r=n.title;return _jsx("option",__assign({value:o,className:"dropdown-option"},{children:r||o}),t||o+e)}))]}),void 0),_jsx("label",{children:i},void 0)]}),void 0)};export var Dropdown=memo(DropdownComponent);
 //# sourceMappingURL=Dropdown.js.map

package/lib-esm/components/common/FileUpload/FileUpload.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+/// <reference types="react" />
 import type { SchemaModel } from '../../../redoc-lib/src/services/models/Schema';
 import type { UploadFileType } from '../../../models';
 export interface FileUploadProps {
@@ -7,4 +7,4 @@ export interface FileUploadProps {
     onChange(key: string, file: UploadFileType): void;
     name: string;
 }
-export declare const FileUpload: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> & FileUploadProps & React.RefAttributes<HTMLInputElement>>;
+export declare const FileUpload: import("react").ForwardRefExoticComponent<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "onChange"> & FileUploadProps & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -1,2 +1,2 @@
-import{__assign,__awaiter,__generator,__rest}from"tslib";import*as React from"react";import{useField}from"informed";import{getFileToUpload}from"./helper";export var FileUpload=React.forwardRef((function(e,a){var t=__rest(e,[]),r=t.schema,i=t.contentName,n=t.onChange,o=t.name,l=__rest(t,["schema","contentName","onChange","name"]);return(0,useField(__assign({field:o},l)).render)(React.createElement("input",{"data-cy":"file-upload-input",type:"file",id:t.id,className:t.className,name:t.name,onChange:function(e){return __awaiter(void 0,void 0,void 0,(function(){var a;return __generator(this,(function(t){switch(t.label){case 0:return[4,getFileToUpload(e.target.files,r)];case 1:return a=t.sent(),n(i,a),[2]}}))}))},multiple:t.multiple,accept:t.accept,ref:a}))}));FileUpload.displayName="FileUpload";
+import{__assign,__awaiter,__generator,__rest}from"tslib";import{jsx as _jsx}from"react/jsx-runtime";import{forwardRef}from"react";import{useField}from"informed";import{getFileToUpload}from"./helper";export var FileUpload=forwardRef((function(e,a){var r=__rest(e,[]),t=r.schema,i=r.contentName,n=r.onChange,o=r.name,l=__rest(r,["schema","contentName","onChange","name"]);return(0,useField(__assign({field:o},l)).render)(_jsx("input",{"data-cy":"file-upload-input",type:"file",id:r.id,className:r.className,name:r.name,onChange:function(e){return __awaiter(void 0,void 0,void 0,(function(){var a;return __generator(this,(function(r){switch(r.label){case 0:return[4,getFileToUpload(e.target.files,t)];case 1:return a=r.sent(),n(i,a),[2]}}))}))},multiple:r.multiple,accept:r.accept,ref:a},void 0))}));FileUpload.displayName="FileUpload";
 //# sourceMappingURL=FileUpload.js.map

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

@@ -1,2 +1,2 @@
-import{__makeTemplateObject}from"tslib";import*as React from"react";import{styled}from"../../redoc-lib";var templateObject_1,LoadingLine=styled.div(templateObject_1||(templateObject_1=__makeTemplateObject(["\n  position: relative;\n  height: 4px;\n  display: block;\n  width: 100%;\n  background-color: ",";\n  border-radius: ",";\n  background-clip: padding-box;\n  margin: 0.5rem 0 1rem 0;\n  overflow: hidden;\n\n  .determinate {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    background-color: ",";\n    transition: width 0.3s linear;\n  }\n  .indeterminate {\n    background-color: ",";\n  }\n  .indeterminate:before {\n    content: '';\n    position: absolute;\n    background-color: inherit;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    will-change: left, right;\n    -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;\n    animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;\n  }\n  .indeterminate:after {\n    content: '';\n    position: absolute;\n    background-color: inherit;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    will-change: left, right;\n    -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;\n    animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;\n    -webkit-animation-delay: 1.15s;\n    animation-delay: 1.15s;\n  }\n\n  @-webkit-keyframes indeterminate {\n    0% {\n      left: -35%;\n      right: 100%;\n    }\n    60% {\n      left: 100%;\n      right: -90%;\n    }\n    100% {\n      left: 100%;\n      right: -90%;\n    }\n  }\n  @keyframes indeterminate {\n    0% {\n      left: -35%;\n      right: 100%;\n    }\n    60% {\n      left: 100%;\n      right: -90%;\n    }\n    100% {\n      left: 100%;\n      right: -90%;\n    }\n  }\n  @-webkit-keyframes indeterminate-short {\n    0% {\n      left: -200%;\n      right: 100%;\n    }\n    60% {\n      left: 107%;\n      right: -8%;\n    }\n    100% {\n      left: 107%;\n      right: -8%;\n    }\n  }\n  @keyframes indeterminate-short {\n    0% {\n      left: -200%;\n      right: 100%;\n    }\n    60% {\n      left: 107%;\n      right: -8%;\n    }\n    100% {\n      left: 107%;\n      right: -8%;\n    }\n  }\n"],["\n  position: relative;\n  height: 4px;\n  display: block;\n  width: 100%;\n  background-color: ",";\n  border-radius: ",";\n  background-clip: padding-box;\n  margin: 0.5rem 0 1rem 0;\n  overflow: hidden;\n\n  .determinate {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    background-color: ",";\n    transition: width 0.3s linear;\n  }\n  .indeterminate {\n    background-color: ",";\n  }\n  .indeterminate:before {\n    content: '';\n    position: absolute;\n    background-color: inherit;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    will-change: left, right;\n    -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;\n    animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;\n  }\n  .indeterminate:after {\n    content: '';\n    position: absolute;\n    background-color: inherit;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    will-change: left, right;\n    -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;\n    animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;\n    -webkit-animation-delay: 1.15s;\n    animation-delay: 1.15s;\n  }\n\n  @-webkit-keyframes indeterminate {\n    0% {\n      left: -35%;\n      right: 100%;\n    }\n    60% {\n      left: 100%;\n      right: -90%;\n    }\n    100% {\n      left: 100%;\n      right: -90%;\n    }\n  }\n  @keyframes indeterminate {\n    0% {\n      left: -35%;\n      right: 100%;\n    }\n    60% {\n      left: 100%;\n      right: -90%;\n    }\n    100% {\n      left: 100%;\n      right: -90%;\n    }\n  }\n  @-webkit-keyframes indeterminate-short {\n    0% {\n      left: -200%;\n      right: 100%;\n    }\n    60% {\n      left: 107%;\n      right: -8%;\n    }\n    100% {\n      left: 107%;\n      right: -8%;\n    }\n  }\n  @keyframes indeterminate-short {\n    0% {\n      left: -200%;\n      right: 100%;\n    }\n    60% {\n      left: 107%;\n      right: -8%;\n    }\n    100% {\n      left: 107%;\n      right: -8%;\n    }\n  }\n"])),(function(n){return n.theme.colors.accent.light}),(function(n){return n.theme.shape.borderRadius}),(function(n){return n.theme.colors.accent.main}),(function(n){return n.theme.colors.accent.main}));export var LinearProgress=function(){return React.createElement(LoadingLine,null,React.createElement("div",{className:"indeterminate"}))};
+import{__makeTemplateObject}from"tslib";import{jsx as _jsx}from"react/jsx-runtime";import{styled}from"../../redoc-lib";var templateObject_1,LoadingLine=styled.div(templateObject_1||(templateObject_1=__makeTemplateObject(["\n  position: relative;\n  height: 4px;\n  display: block;\n  width: 100%;\n  background-color: ",";\n  border-radius: ",";\n  background-clip: padding-box;\n  margin: 0.5rem 0 1rem 0;\n  overflow: hidden;\n\n  .determinate {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    background-color: ",";\n    transition: width 0.3s linear;\n  }\n  .indeterminate {\n    background-color: ",";\n  }\n  .indeterminate:before {\n    content: '';\n    position: absolute;\n    background-color: inherit;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    will-change: left, right;\n    -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;\n    animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;\n  }\n  .indeterminate:after {\n    content: '';\n    position: absolute;\n    background-color: inherit;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    will-change: left, right;\n    -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;\n    animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;\n    -webkit-animation-delay: 1.15s;\n    animation-delay: 1.15s;\n  }\n\n  @-webkit-keyframes indeterminate {\n    0% {\n      left: -35%;\n      right: 100%;\n    }\n    60% {\n      left: 100%;\n      right: -90%;\n    }\n    100% {\n      left: 100%;\n      right: -90%;\n    }\n  }\n  @keyframes indeterminate {\n    0% {\n      left: -35%;\n      right: 100%;\n    }\n    60% {\n      left: 100%;\n      right: -90%;\n    }\n    100% {\n      left: 100%;\n      right: -90%;\n    }\n  }\n  @-webkit-keyframes indeterminate-short {\n    0% {\n      left: -200%;\n      right: 100%;\n    }\n    60% {\n      left: 107%;\n      right: -8%;\n    }\n    100% {\n      left: 107%;\n      right: -8%;\n    }\n  }\n  @keyframes indeterminate-short {\n    0% {\n      left: -200%;\n      right: 100%;\n    }\n    60% {\n      left: 107%;\n      right: -8%;\n    }\n    100% {\n      left: 107%;\n      right: -8%;\n    }\n  }\n"],["\n  position: relative;\n  height: 4px;\n  display: block;\n  width: 100%;\n  background-color: ",";\n  border-radius: ",";\n  background-clip: padding-box;\n  margin: 0.5rem 0 1rem 0;\n  overflow: hidden;\n\n  .determinate {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    background-color: ",";\n    transition: width 0.3s linear;\n  }\n  .indeterminate {\n    background-color: ",";\n  }\n  .indeterminate:before {\n    content: '';\n    position: absolute;\n    background-color: inherit;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    will-change: left, right;\n    -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;\n    animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;\n  }\n  .indeterminate:after {\n    content: '';\n    position: absolute;\n    background-color: inherit;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    will-change: left, right;\n    -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;\n    animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;\n    -webkit-animation-delay: 1.15s;\n    animation-delay: 1.15s;\n  }\n\n  @-webkit-keyframes indeterminate {\n    0% {\n      left: -35%;\n      right: 100%;\n    }\n    60% {\n      left: 100%;\n      right: -90%;\n    }\n    100% {\n      left: 100%;\n      right: -90%;\n    }\n  }\n  @keyframes indeterminate {\n    0% {\n      left: -35%;\n      right: 100%;\n    }\n    60% {\n      left: 100%;\n      right: -90%;\n    }\n    100% {\n      left: 100%;\n      right: -90%;\n    }\n  }\n  @-webkit-keyframes indeterminate-short {\n    0% {\n      left: -200%;\n      right: 100%;\n    }\n    60% {\n      left: 107%;\n      right: -8%;\n    }\n    100% {\n      left: 107%;\n      right: -8%;\n    }\n  }\n  @keyframes indeterminate-short {\n    0% {\n      left: -200%;\n      right: 100%;\n    }\n    60% {\n      left: 107%;\n      right: -8%;\n    }\n    100% {\n      left: 107%;\n      right: -8%;\n    }\n  }\n"])),(function(n){return n.theme.colors.accent.light}),(function(n){return n.theme.shape.borderRadius}),(function(n){return n.theme.colors.accent.main}),(function(n){return n.theme.colors.accent.main}));export var LinearProgress=function(){return _jsx(LoadingLine,{children:_jsx("div",{className:"indeterminate"},void 0)},void 0)};
 //# sourceMappingURL=LinearProgress.js.map

package/lib-esm/components/common/TextField.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
 import type { FieldProps } from 'informed';
+import type { EventHandler, InputHTMLAttributes, SyntheticEvent } from 'react';
 import type { DropdownOption, DropdownProps } from './Dropdown';
 export declare const invertedInputStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("../../services/extendTheme").ProTheme>>;
 export declare const StyledInput: import("styled-components").StyledComponent<"input", import("../../services/extendTheme").ProTheme, {
@@ -9,17 +9,17 @@ export declare const StyledInput: import("styled-components").StyledComponent<"i
 }, never>;
 export interface InputActionButtonProps {
     label: string;
-    onClick: React.EventHandler<React.SyntheticEvent>;
+    onClick: EventHandler<SyntheticEvent>;
 }
-export interface TextFieldExtraProps extends React.InputHTMLAttributes<HTMLInputElement> {
+export interface TextFieldExtraProps extends InputHTMLAttributes<HTMLInputElement> {
     fullWidth?: boolean;
     errorMessage?: string;
     inputActionButton?: InputActionButtonProps;
 }
-export declare const TextField: React.ForwardRefExoticComponent<TextFieldExtraProps & React.RefAttributes<HTMLInputElement>>;
+export declare const TextField: import("react").ForwardRefExoticComponent<TextFieldExtraProps & import("react").RefAttributes<HTMLInputElement>>;
 export declare function FormTextField(props: FieldProps<string, GenericObject> & TextFieldExtraProps): JSX.Element;
 export interface FormDropdownProps extends Partial<DropdownProps> {
     options: DropdownOption[];
     initValue?: string;
 }
-export declare const FormDropdown: React.ComponentType<FieldProps<string, any> & FormDropdownProps>;
+export declare const FormDropdown: import("react").ComponentType<FieldProps<string, any> & FormDropdownProps>;

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

@@ -1,2 +1,2 @@
-import{__assign,__makeTemplateObject}from"tslib";import React from"react";import{asField,useField}from"informed";import styled,{css,mediaCSS}from"../../redoc-lib/src/styled-components";import{FormError}from"./form";import{Dropdown}from"./Dropdown";export var invertedInputStyles=css(templateObject_1||(templateObject_1=__makeTemplateObject(["\n  border: none;\n  outline: none;\n  padding: 8px;\n  border-radius: ",";\n  background-color: ",";\n  ","\n\n  &::placeholder {\n    opacity: 0.6;\n    color: ",";\n  }\n\n  &:-webkit-autofill {\n    background-color: ",";\n  }\n"],["\n  border: none;\n  outline: none;\n  padding: 8px;\n  border-radius: ",";\n  background-color: ",";\n  ","\n\n  &::placeholder {\n    opacity: 0.6;\n    color: ",";\n  }\n\n  &:-webkit-autofill {\n    background-color: ",";\n  }\n"])),(function(e){return e.theme.shape.borderRadius}),(function(e){return e.theme.rightPanel.panelControlsBackgroundColor}),(function(e){var t=e.theme;return mediaCSS({color:t.colors.text.light,fontFamily:t.typography.code.fontFamily,fontSize:t.typography.fontSize})}),(function(e){return e.theme.colors.text.light}),(function(e){return e.theme.rightPanel.panelBackgroundColor}));var TextFieldWrapper=styled.div(templateObject_2||(templateObject_2=__makeTemplateObject(["\n  display: ",";\n  ","\n"],["\n  display: ",";\n  ","\n"])),(function(e){return"hidden"===e.type?"none":"inline-block"}),(function(e){return e.fullWidth?"width: 100%;":""})),InputWrap=styled.div(templateObject_3||(templateObject_3=__makeTemplateObject(["\n  position: relative;\n"],["\n  position: relative;\n"])));export var StyledInput=styled.input(templateObject_4||(templateObject_4=__makeTemplateObject(["\n  ","\n  ",";\n  ","\n"],["\n  ","\n  ",";\n  ","\n"])),invertedInputStyles,(function(e){var t=e.inputType,n=e.inputActionButton;return"password"===t||n?"padding-right: 40px;":""}),(function(e){return e.fullWidth?"width: 100%;":""}));var InputActionButton=styled.span(templateObject_5||(templateObject_5=__makeTemplateObject(["\n  position: absolute;\n  right: 0;\n  line-height: normal;\n\n  font-size: 0.8em;\n  padding: calc(8px / 0.8);\n  cursor: pointer;\n  text-align: center;\n  ","\n"],["\n  position: absolute;\n  right: 0;\n  line-height: normal;\n\n  font-size: 0.8em;\n  padding: calc(8px / 0.8);\n  cursor: pointer;\n  text-align: center;\n  ","\n"])),(function(e){var t=e.theme;return mediaCSS({color:t.rightPanel.textColor})}));function TextFieldComponent(e,t){var n=e.fullWidth,r=e.errorMessage,o=e.type,a=React.useState("password"===o),l=a[0],i=a[1],c=React.useCallback((function(){i(!l)}),[l]);return React.createElement(TextFieldWrapper,{fullWidth:n,type:o},React.createElement(InputWrap,null,React.createElement(StyledInput,__assign({},e,{type:l?"password":"text",inputType:o,ref:t})),e.inputActionButton?React.createElement(InputActionButton,{onClick:e.inputActionButton.onClick},e.inputActionButton.label):"password"===o?React.createElement(InputActionButton,{onClick:c},l?"show":"hide"):null),r?React.createElement(FormError,null,r):null)}export var TextField=React.forwardRef(TextFieldComponent);export function FormTextField(e){var t=useField(__assign({fieldType:"text"},e)),n=t.userProps,r=t.render,o=t.fieldState,a=t.informed;return r(React.createElement(TextField,__assign({},n,a,{errorMessage:o.error})))}var templateObject_1,templateObject_2,templateObject_3,templateObject_4,templateObject_5,FormDropdownInt=function(e){var t=e.initValue,n=e.options,r=e.fieldApi,o=e.fieldState,a=n.map((function(e,t){return{value:e.title||e.value,idx:t,origValue:e.value}})),l=a.find((function(e){return e.origValue===t})),i=React.useState(null==l?void 0:l.value),c=i[0],p=i[1];React.useEffect((function(){t&&r.setValue(t)}),[]);var u=React.useCallback((function(e){r.setValue(a[e.idx].origValue),p(a[e.idx].value)}),[a]);return React.createElement(TextFieldWrapper,{fullWidth:!0},React.createElement(Dropdown,{fullWidth:!0,variant:"dark",value:c,options:a,onChange:u}),o.error?React.createElement(FormError,null,o.error):null)};export var FormDropdown=asField(FormDropdownInt);
+import{__assign,__makeTemplateObject}from"tslib";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{asField,useField}from"informed";import{forwardRef,useCallback,useState}from"react";import styled,{css,mediaCSS}from"../../redoc-lib/src/styled-components";import{useMount}from"../../hooks";import{FormError}from"./form";import{Dropdown}from"./Dropdown";export var invertedInputStyles=css(templateObject_1||(templateObject_1=__makeTemplateObject(["\n  border: none;\n  outline: none;\n  padding: 8px;\n  border-radius: ",";\n  background-color: ",";\n  ","\n\n  &::placeholder {\n    opacity: 0.6;\n    color: ",";\n  }\n\n  &:-webkit-autofill {\n    background-color: ",";\n  }\n"],["\n  border: none;\n  outline: none;\n  padding: 8px;\n  border-radius: ",";\n  background-color: ",";\n  ","\n\n  &::placeholder {\n    opacity: 0.6;\n    color: ",";\n  }\n\n  &:-webkit-autofill {\n    background-color: ",";\n  }\n"])),(function(e){return e.theme.shape.borderRadius}),(function(e){return e.theme.rightPanel.panelControlsBackgroundColor}),(function(e){var t=e.theme;return mediaCSS({color:t.colors.text.light,fontFamily:t.typography.code.fontFamily,fontSize:t.typography.fontSize})}),(function(e){return e.theme.colors.text.light}),(function(e){return e.theme.rightPanel.panelBackgroundColor}));var TextFieldWrapper=styled.div(templateObject_2||(templateObject_2=__makeTemplateObject(["\n  display: ",";\n  ","\n"],["\n  display: ",";\n  ","\n"])),(function(e){return"hidden"===e.type?"none":"inline-block"}),(function(e){return e.fullWidth?"width: 100%;":""})),InputWrap=styled.div(templateObject_3||(templateObject_3=__makeTemplateObject(["\n  position: relative;\n"],["\n  position: relative;\n"])));export var StyledInput=styled.input(templateObject_4||(templateObject_4=__makeTemplateObject(["\n  ","\n  ",";\n  ","\n"],["\n  ","\n  ",";\n  ","\n"])),invertedInputStyles,(function(e){var t=e.inputType,n=e.inputActionButton;return"password"===t||n?"padding-right: 40px;":""}),(function(e){return e.fullWidth?"width: 100%;":""}));var InputActionButton=styled.span(templateObject_5||(templateObject_5=__makeTemplateObject(["\n  position: absolute;\n  right: 0;\n  line-height: normal;\n\n  font-size: 0.8em;\n  padding: calc(8px / 0.8);\n  cursor: pointer;\n  text-align: center;\n  ","\n"],["\n  position: absolute;\n  right: 0;\n  line-height: normal;\n\n  font-size: 0.8em;\n  padding: calc(8px / 0.8);\n  cursor: pointer;\n  text-align: center;\n  ","\n"])),(function(e){var t=e.theme;return mediaCSS({color:t.rightPanel.textColor})}));function TextFieldComponent(e,t){var n=e.fullWidth,o=e.errorMessage,r=e.type,i=useState("password"===r),l=i[0],a=i[1],p=useCallback((function(){a(!l)}),[l]);return _jsxs(TextFieldWrapper,__assign({fullWidth:n,type:r},{children:[_jsxs(InputWrap,{children:[_jsx(StyledInput,__assign({},e,{type:l?"password":"text",inputType:r,ref:t}),void 0),e.inputActionButton?_jsx(InputActionButton,__assign({onClick:e.inputActionButton.onClick},{children:e.inputActionButton.label}),void 0):"password"===r?_jsx(InputActionButton,__assign({onClick:p},{children:l?"show":"hide"}),void 0):null]},void 0),o?_jsx(FormError,{children:o},void 0):null]}),void 0)}export var TextField=forwardRef(TextFieldComponent);export function FormTextField(e){var t=useField(__assign({fieldType:"text"},e)),n=t.userProps,o=t.render,r=t.fieldState,i=t.informed;return o(_jsx(TextField,__assign({},n,i,{errorMessage:r.error}),void 0))}var templateObject_1,templateObject_2,templateObject_3,templateObject_4,templateObject_5,FormDropdownInt=function(e){var t=e.initValue,n=e.options,o=e.fieldApi,r=e.fieldState,i=n.map((function(e,t){return{value:e.title||e.value,idx:t,origValue:e.value}})),l=i.find((function(e){return e.origValue===t})),a=useState(null==l?void 0:l.value),p=a[0],d=a[1];useMount((function(){t&&o.setValue(t)}));var u=useCallback((function(e){o.setValue(i[e.idx].origValue),d(i[e.idx].value)}),[o,i]);return _jsxs(TextFieldWrapper,__assign({fullWidth:!0},{children:[_jsx(Dropdown,{fullWidth:!0,variant:"dark",value:p,options:i,onChange:u},void 0),r.error?_jsx(FormError,{children:r.error},void 0):null]}),void 0)};export var FormDropdown=asField(FormDropdownInt);
 //# sourceMappingURL=TextField.js.map

package/lib-esm/components/console/ActionPanel.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+/// <reference types="react" />
 import type { FormValues } from 'informed';
 import type { OperationModel } from '../../redoc-lib';
 export interface ActionPanelProps {
@@ -9,4 +9,4 @@ export interface ActionPanelProps {
     hasResponse: boolean;
 }
 export declare const ActionPanelComponent: ({ loading, operation, hasResponse, execute, params, }: ActionPanelProps) => JSX.Element;
-export declare const ActionPanel: React.NamedExoticComponent<ActionPanelProps>;
+export declare const ActionPanel: import("react").NamedExoticComponent<ActionPanelProps>;

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

@@ -1,2 +1,2 @@
-import{__makeTemplateObject}from"tslib";import*as React from"react";import{serializeParameterValue,styled}from"../../redoc-lib";import{CodeHeader}from"../Panel";import{Path,PathWrapper}from"../Endpoint";import{HttpVerb,Button}from"../shared";import{expandVariables}from"./utils";function formatPath(e,t,n){var r=t.path||{},a=t.query||{},o=Object.keys(a),m=expandVariables(e,r);return o.length&&(m+="?"+o.map((function(e){if(!a[e])return"";var t=function(e){return n.find((function(t){return t.name===e&&"query"===t.in}))}(e);return t?serializeParameterValue(t,a[e]):e+"="+encodeURIComponent(a[e])})).filter(Boolean).join("&")),m}export var ActionPanelComponent=function(e){var t=e.loading,n=e.operation,r=e.hasResponse,a=e.execute,o=e.params,m=void 0===o?{}:o;return React.createElement(TryItHeader,null,React.createElement(PathWrapper,null,React.createElement(HttpVerb,{type:n.httpVerb},n.httpVerb),React.createElement(Path,{wrap:"true"},formatPath(n.path,m,n.parameters))),React.createElement(SendButton,{"data-cy":"send-button",color:"primary",blinking:t,onClick:function(){return!t&&a()}},t?"Sending...":r?"Resend":"Send"))};var templateObject_1,templateObject_2,SendButton=styled(Button)(templateObject_1||(templateObject_1=__makeTemplateObject(["\n  width: ",";\n"],["\n  width: ",";\n"])),(function(e){return e.theme.components.tryItSendButton.fullWidth?"100%":"auto"})),TryItHeader=styled(CodeHeader)(templateObject_2||(templateObject_2=__makeTemplateObject(["\n  ",";\n"],["\n  ",";\n"])),(function(e){return e.theme.components.tryItSendButton.fullWidth?"\n    flex-direction: column;\n    align-items: flex-start;":""}));export var ActionPanel=React.memo(ActionPanelComponent);
+import{__assign,__makeTemplateObject}from"tslib";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{memo}from"react";import{serializeParameterValue,styled}from"../../redoc-lib";import{CodeHeader}from"../Panel";import{Path,PathWrapper}from"../Endpoint";import{HttpVerb,Button}from"../shared";import{expandVariables}from"./utils";function formatPath(e,t,n){var r=t.path||{},a=t.query||{},o=Object.keys(a),i=expandVariables(e,r);return o.length&&(i+="?"+o.map((function(e){if(!a[e])return"";var t=function(e){return n.find((function(t){return t.name===e&&"query"===t.in}))}(e);return t?serializeParameterValue(t,a[e]):e+"="+encodeURIComponent(a[e])})).filter(Boolean).join("&")),i}export var ActionPanelComponent=function(e){var t=e.loading,n=e.operation,r=e.hasResponse,a=e.execute,o=e.params,i=void 0===o?{}:o;return _jsxs(TryItHeader,{children:[_jsxs(PathWrapper,{children:[_jsx(HttpVerb,__assign({type:n.httpVerb},{children:n.httpVerb}),void 0),_jsx(Path,__assign({wrap:"true"},{children:formatPath(n.path,i,n.parameters)}),void 0)]},void 0),_jsx(SendButton,__assign({"data-cy":"send-button",color:"primary",blinking:t,onClick:function(){return!t&&a()}},{children:t?"Sending...":r?"Resend":"Send"}),void 0)]},void 0)};var templateObject_1,templateObject_2,SendButton=styled(Button)(templateObject_1||(templateObject_1=__makeTemplateObject(["\n  width: ",";\n"],["\n  width: ",";\n"])),(function(e){return e.theme.components.tryItSendButton.fullWidth?"100%":"auto"})),TryItHeader=styled(CodeHeader)(templateObject_2||(templateObject_2=__makeTemplateObject(["\n  ",";\n"],["\n  ",";\n"])),(function(e){return e.theme.components.tryItSendButton.fullWidth?"\n    flex-direction: column;\n    align-items: flex-start;":""}));export var ActionPanel=memo(ActionPanelComponent);
 //# sourceMappingURL=ActionPanel.js.map

package/lib-esm/components/console/AuthPanel.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { Component } from 'react';
 import type { FormApi, FormState } from 'informed';
 import type { OperationModel } from '../../redoc-lib';
 import type { SecurityDetails } from '../../types';
@@ -15,7 +15,7 @@ export interface AuthPanelProps {
 export interface AuthPanelState {
     activeScheme: number;
 }
-export declare class AuthPanel extends React.Component<AuthPanelProps, AuthPanelState> {
+export declare class AuthPanel extends Component<AuthPanelProps, AuthPanelState> {
     static getDerivedStateFromProps(props: AuthPanelProps): AuthPanelState;
     state: {
         activeScheme: number;

package/lib-esm/components/console/AuthPanel.js

@@ -1,2 +1,2 @@
-import{__assign,__extends}from"tslib";import*as React from"react";import{fromSessionStorage,getSecurityDetailsOptions,toSessionStorage,escapeFormId}from"../../utils";import{FormDropdown,FormTextField}from"../common/TextField";import{FormControl,FormLabel,FormWrapper}from"../common/form";import{l}from"../../redoc-lib/src/services/Labels";import{Dropdown}from"../common/Dropdown";import{OpenIDConnect,Error}from"./OpenIDConnect";import{OAuth2Flow}from"./OAuth2Flow";import OAuth2TokenInput from"./OAuth2TokenInput";export function requiredValidator(e){if(!e)return"Field is required"}var getCookie=function(e){var t=document.cookie.match("\\b"+e+"=([^;]*)\\b");return t?t[1]:void 0};function fromCookie(e){if("cookie"===e.in)return getCookie(e.name)}var AuthPanel=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return Object.defineProperty(t,"state",{enumerable:!0,configurable:!0,writable:!0,value:{activeScheme:0}}),Object.defineProperty(t,"handleSchemeChange",{enumerable:!0,configurable:!0,writable:!0,value:function(e){t.setState({activeScheme:e.idx}),toSessionStorage("securityRequirementName",e.value)}}),t}return __extends(t,e),Object.defineProperty(t,"getDerivedStateFromProps",{enumerable:!1,configurable:!0,writable:!0,value:function(e){var t=e.operation.security.map((function(e){return e.schemes.map((function(e){return e.id})).join(" and ")})),r=fromSessionStorage("securityRequirementName"),o=t.findIndex((function(e){return e===r}));return{activeScheme:o<0?0:o}}}),Object.defineProperty(t.prototype,"render",{enumerable:!1,configurable:!0,writable:!0,value:function(){var e=this,t=this.props.securityDefaults,r=this.state.activeScheme,o=this.props.operation.security,a=o.map((function(e){return e.schemes.map((function(e){return e.id})).join(" and ")})).filter(Boolean).map((function(e,t){return{value:e,idx:t}}));return 0===a.length?React.createElement(Error,{message:"Cannot find security schema in the definition"}):React.createElement(React.Fragment,null,React.createElement(FormWrapper,null,a.length>1&&React.createElement(FormControl,null,React.createElement(FormLabel,null," Security scheme: "),React.createElement(Dropdown,{variant:"dark",fullWidth:!0,options:a,value:a[r].value,onChange:this.handleSchemeChange}))||null,o[r].schemes.map((function(r){var o,a,n,i,u,s,c,m=escapeFormId(r.id);if("apiKey"===r.type){var d=getSecurityDetailsOptions(m,""),p={field:"auth."+m,fullWidth:!0,initialValue:fromCookie(r)||fromSessionStorage("auth."+m)||(null==t?void 0:t[m]),initValue:fromCookie(r)||fromSessionStorage("auth."+m)||(null==t?void 0:t[m]),validate:requiredValidator,validateOnBlur:!0,validateOnChange:!0};return React.createElement(FormControl,{key:m},React.createElement(FormLabel,null," ",r.name,": "),d?React.createElement(FormDropdown,__assign({},p,{options:d})):React.createElement(FormTextField,__assign({},p,{type:"password","data-cy":"apiKey-auth-password"})))}if("http"===r.type){if("basic"===r.scheme){var f=getSecurityDetailsOptions(m,"username");p={field:"auth."+m+".username",fullWidth:!0,initialValue:fromSessionStorage("auth."+m+".username")||(null===(o=null==t?void 0:t[m])||void 0===o?void 0:o.username),initValue:fromSessionStorage("auth."+m+".username")||(null===(a=null==t?void 0:t[m])||void 0===a?void 0:a.username),validate:requiredValidator,validateOnBlur:!0,validateOnChange:!0};return React.createElement(React.Fragment,{key:m},React.createElement(FormControl,null,React.createElement(FormLabel,null," ",l("tryItAuthBasicUsername"),": "),f?React.createElement(FormDropdown,__assign({},p,{options:f})):React.createElement(FormTextField,__assign({},p))),React.createElement(FormControl,null,React.createElement(FormLabel,null," ",l("tryItAuthBasicPassword"),": "),React.createElement(FormTextField,{type:"password","data-cy":"http-auth-password",fullWidth:!0,field:"auth."+m+".password",initialValue:fromSessionStorage("auth."+m+".password")||(null===(n=null==t?void 0:t[m])||void 0===n?void 0:n.password)||"",validateOnBlur:!0,validateOnChange:!0})))}if("bearer"===r.scheme){var h=getSecurityDetailsOptions(m,"");p={field:"auth."+m,fullWidth:!0,initialValue:fromSessionStorage("auth."+m)||(null==t?void 0:t[m]),initValue:fromSessionStorage("auth."+m)||(null==t?void 0:t[m]),validate:requiredValidator,validateOnBlur:!0,validateOnChange:!0};return React.createElement(React.Fragment,{key:m},React.createElement(FormControl,null,React.createElement(FormLabel,null," Bearer Token: "),h?React.createElement(FormDropdown,__assign({},p,{options:h})):React.createElement(FormTextField,__assign({},p,{type:"password",placeholder:"(without 'Bearer')"}))))}}else{if("oauth2"===r.type&&r.flows&&r.flows.clientCredentials)return React.createElement(OAuth2TokenInput,{key:m,flow:r.flows.clientCredentials,server:e.props.activeServer,authCorsProxyUrl:e.props.authCorsProxyUrl,id:m,form:e.props.form,formApi:e.props.formApi,clientId:r.flows.clientCredentials["x-defaultClientId"]||r["x-defaultClientId"],defaultValues:null==t?void 0:t[m]});if("oauth2"===r.type&&r.flows&&r.flows.implicit)return React.createElement(OAuth2Flow,{key:m,authorizationUrl:r.flows.implicit.authorizationUrl,authCorsProxyUrl:e.props.authCorsProxyUrl,scopes:Object.keys((null===(u=null===(i=null==r?void 0:r.flows)||void 0===i?void 0:i.implicit)||void 0===u?void 0:u.scopes)||{}),server:e.props.activeServer,id:m,form:e.props.form,formApi:e.props.formApi,clientId:r.flows.implicit["x-defaultClientId"]||r["x-defaultClientId"],flow:"implicit",defaultValues:null==t?void 0:t[m]});if("oauth2"===r.type&&r.flows&&r.flows.authorizationCode)return React.createElement(OAuth2Flow,{key:m,authorizationUrl:r.flows.authorizationCode.authorizationUrl,tokenUrl:r.flows.authorizationCode.tokenUrl,authCorsProxyUrl:e.props.authCorsProxyUrl,scopes:Object.keys((null===(s=r.flows.authorizationCode)||void 0===s?void 0:s.scopes)||{}),server:e.props.activeServer,id:m,form:e.props.form,formApi:e.props.formApi,clientId:r.flows.authorizationCode["x-defaultClientId"]||r["x-defaultClientId"],flow:"authorizationCode",tokenEndpointAuthMethod:r.flows.authorizationCode["x-tokenEndpointAuthMethod"],usePkce:r.flows.authorizationCode["x-usePkce"],defaultValues:null==t?void 0:t[m]});if("oauth2"===r.type){var v=fromSessionStorage("auth."+m+".token")||JSON.stringify(null===(c=null==t?void 0:t[m])||void 0===c?void 0:c.token);return v=v?JSON.parse(v):{},React.createElement(React.Fragment,{key:m},React.createElement(FormControl,null,React.createElement(FormLabel,null," Access Token Type: "),React.createElement(FormTextField,{fullWidth:!0,field:"auth."+m+".token.token_type",initialValue:v.token_type||"Bearer"})),React.createElement(FormControl,null,React.createElement(FormLabel,null," Access Token: "),React.createElement(FormTextField,{type:"password",fullWidth:!0,field:"auth."+m+".token.access_token",validate:requiredValidator,initialValue:v.access_token,validateOnBlur:!0,validateOnChange:!0})))}if("openIdConnect"===r.type)return React.createElement(OpenIDConnect,{key:m,server:e.props.activeServer,authCorsProxyUrl:e.props.authCorsProxyUrl,id:m,form:e.props.form,formApi:e.props.formApi,scheme:r,clientId:r["x-defaultClientId"],defaultValues:null==t?void 0:t[m]})}}))),React.createElement("small",null,React.createElement("strong",null,"Note"),": Your credentials will be saved until the end of the browser session"))}}),t}(React.Component);export{AuthPanel};
+import{__assign,__extends}from"tslib";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";import{Component,Fragment}from"react";import{fromSessionStorage,getSecurityDetailsOptions,toSessionStorage,escapeFormId}from"../../utils";import{FormDropdown,FormTextField}from"../common/TextField";import{FormControl,FormLabel,FormWrapper}from"../common/form";import{l}from"../../redoc-lib/src/services/Labels";import{Dropdown}from"../common/Dropdown";import{OpenIDConnect,Error}from"./OpenIDConnect";import{OAuth2Flow}from"./OAuth2Flow";import OAuth2TokenInput from"./OAuth2TokenInput";export function requiredValidator(e){if(!e)return"Field is required"}var getCookie=function(e){var o=document.cookie.match("\\b"+e+"=([^;]*)\\b");return o?o[1]:void 0};function fromCookie(e){if("cookie"===e.in)return getCookie(e.name)}var AuthPanel=function(e){function o(){var o=null!==e&&e.apply(this,arguments)||this;return Object.defineProperty(o,"state",{enumerable:!0,configurable:!0,writable:!0,value:{activeScheme:0}}),Object.defineProperty(o,"handleSchemeChange",{enumerable:!0,configurable:!0,writable:!0,value:function(e){o.setState({activeScheme:e.idx}),toSessionStorage("securityRequirementName",e.value)}}),o}return __extends(o,e),Object.defineProperty(o,"getDerivedStateFromProps",{enumerable:!1,configurable:!0,writable:!0,value:function(e){var o=e.operation.security.map((function(e){return e.schemes.map((function(e){return e.id})).join(" and ")})),r=fromSessionStorage("securityRequirementName"),i=o.findIndex((function(e){return e===r}));return{activeScheme:i<0?0:i}}}),Object.defineProperty(o.prototype,"render",{enumerable:!1,configurable:!0,writable:!0,value:function(){var e=this,o=this.props.securityDefaults,r=this.state.activeScheme,i=this.props.operation.security,t=i.map((function(e){return e.schemes.map((function(e){return e.id})).join(" and ")})).filter(Boolean).map((function(e,o){return{value:e,idx:o}}));return 0===t.length?_jsx(Error,{message:"Cannot find security schema in the definition"},void 0):_jsxs(_Fragment,{children:[_jsxs(FormWrapper,{children:[t.length>1&&_jsxs(FormControl,{children:[_jsx(FormLabel,{children:" Security scheme: "},void 0),_jsx(Dropdown,{variant:"dark",fullWidth:!0,options:t,value:t[r].value,onChange:this.handleSchemeChange},void 0)]},void 0)||null,i[r].schemes.map((function(r){var i,t,n,a,s,d,u,m=escapeFormId(r.id);if("apiKey"===r.type){var p=getSecurityDetailsOptions(m,""),c={field:"auth."+m,fullWidth:!0,initialValue:fromCookie(r)||fromSessionStorage("auth."+m)||(null==o?void 0:o[m]),initValue:fromCookie(r)||fromSessionStorage("auth."+m)||(null==o?void 0:o[m]),validate:requiredValidator,validateOnBlur:!0,validateOnChange:!0};return _jsxs(FormControl,{children:[_jsxs(FormLabel,{children:[" ",r.name,": "]},void 0),p?_jsx(FormDropdown,__assign({},c,{options:p}),void 0):_jsx(FormTextField,__assign({},c,{type:"password","data-cy":"apiKey-auth-password"}),void 0)]},m)}if("http"===r.type){if("basic"===r.scheme){var f=getSecurityDetailsOptions(m,"username");c={field:"auth."+m+".username",fullWidth:!0,initialValue:fromSessionStorage("auth."+m+".username")||(null===(i=null==o?void 0:o[m])||void 0===i?void 0:i.username),initValue:fromSessionStorage("auth."+m+".username")||(null===(t=null==o?void 0:o[m])||void 0===t?void 0:t.username),validate:requiredValidator,validateOnBlur:!0,validateOnChange:!0};return _jsxs(Fragment,{children:[_jsxs(FormControl,{children:[_jsxs(FormLabel,{children:[" ",l("tryItAuthBasicUsername"),": "]},void 0),f?_jsx(FormDropdown,__assign({},c,{options:f}),void 0):_jsx(FormTextField,__assign({},c),void 0)]},void 0),_jsxs(FormControl,{children:[_jsxs(FormLabel,{children:[" ",l("tryItAuthBasicPassword"),": "]},void 0),_jsx(FormTextField,{type:"password","data-cy":"http-auth-password",fullWidth:!0,field:"auth."+m+".password",initialValue:fromSessionStorage("auth."+m+".password")||(null===(n=null==o?void 0:o[m])||void 0===n?void 0:n.password)||"",validateOnBlur:!0,validateOnChange:!0},void 0)]},void 0)]},m)}if("bearer"===r.scheme){var h=getSecurityDetailsOptions(m,"");c={field:"auth."+m,fullWidth:!0,initialValue:fromSessionStorage("auth."+m)||(null==o?void 0:o[m]),initValue:fromSessionStorage("auth."+m)||(null==o?void 0:o[m]),validate:requiredValidator,validateOnBlur:!0,validateOnChange:!0};return _jsx(Fragment,{children:_jsxs(FormControl,{children:[_jsx(FormLabel,{children:" Bearer Token: "},void 0),h?_jsx(FormDropdown,__assign({},c,{options:h}),void 0):_jsx(FormTextField,__assign({},c,{type:"password",placeholder:"(without 'Bearer')"}),void 0)]},void 0)},m)}}else{if("oauth2"===r.type&&r.flows&&r.flows.clientCredentials)return _jsx(OAuth2TokenInput,{flow:r.flows.clientCredentials,server:e.props.activeServer,authCorsProxyUrl:e.props.authCorsProxyUrl,id:m,form:e.props.form,formApi:e.props.formApi,clientId:r.flows.clientCredentials["x-defaultClientId"]||r["x-defaultClientId"],defaultValues:null==o?void 0:o[m]},m);if("oauth2"===r.type&&r.flows&&r.flows.implicit)return _jsx(OAuth2Flow,{authorizationUrl:r.flows.implicit.authorizationUrl,authCorsProxyUrl:e.props.authCorsProxyUrl,scopes:Object.keys((null===(s=null===(a=null==r?void 0:r.flows)||void 0===a?void 0:a.implicit)||void 0===s?void 0:s.scopes)||{}),server:e.props.activeServer,id:m,form:e.props.form,formApi:e.props.formApi,clientId:r.flows.implicit["x-defaultClientId"]||r["x-defaultClientId"],flow:"implicit",defaultValues:null==o?void 0:o[m]},m);if("oauth2"===r.type&&r.flows&&r.flows.authorizationCode)return _jsx(OAuth2Flow,{authorizationUrl:r.flows.authorizationCode.authorizationUrl,tokenUrl:r.flows.authorizationCode.tokenUrl,authCorsProxyUrl:e.props.authCorsProxyUrl,scopes:Object.keys((null===(d=r.flows.authorizationCode)||void 0===d?void 0:d.scopes)||{}),server:e.props.activeServer,id:m,form:e.props.form,formApi:e.props.formApi,clientId:r.flows.authorizationCode["x-defaultClientId"]||r["x-defaultClientId"],flow:"authorizationCode",tokenEndpointAuthMethod:r.flows.authorizationCode["x-tokenEndpointAuthMethod"],usePkce:r.flows.authorizationCode["x-usePkce"],defaultValues:null==o?void 0:o[m]},m);if("oauth2"===r.type){var v=fromSessionStorage("auth."+m+".token")||JSON.stringify(null===(u=null==o?void 0:o[m])||void 0===u?void 0:u.token);return v=v?JSON.parse(v):{},_jsxs(Fragment,{children:[_jsxs(FormControl,{children:[_jsx(FormLabel,{children:" Access Token Type: "},void 0),_jsx(FormTextField,{fullWidth:!0,field:"auth."+m+".token.token_type",initialValue:v.token_type||"Bearer"},void 0)]},void 0),_jsxs(FormControl,{children:[_jsx(FormLabel,{children:" Access Token: "},void 0),_jsx(FormTextField,{type:"password",fullWidth:!0,field:"auth."+m+".token.access_token",validate:requiredValidator,initialValue:v.access_token,validateOnBlur:!0,validateOnChange:!0},void 0)]},void 0)]},m)}if("openIdConnect"===r.type)return _jsx(OpenIDConnect,{server:e.props.activeServer,authCorsProxyUrl:e.props.authCorsProxyUrl,id:m,form:e.props.form,formApi:e.props.formApi,scheme:r,clientId:r["x-defaultClientId"],defaultValues:null==o?void 0:o[m]},m)}}))]},void 0),_jsxs("small",{children:[_jsx("strong",{children:"Note"},void 0),": Your credentials will be saved until the end of the browser session"]},void 0)]},void 0)}}),o}(Component);export{AuthPanel};
 //# sourceMappingURL=AuthPanel.js.map

package/lib-esm/components/console/CodemirrorInput.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentType, LegacyRef } from 'react';
-import React from 'react';
+import { PureComponent } from 'react';
 import type { FieldApi, FieldState } from 'informed';
 import { Controlled as CodeMirror } from 'react-codemirror2-react-17';
 import type { Editor } from 'codemirror';
@@ -23,7 +23,7 @@ export interface CodemirrorInputProps extends CodemirrorInputBase {
     userProps: any;
     ref: any;
 }
-export declare class CodemirrorInput extends React.PureComponent<CodemirrorInputProps> {
+export declare class CodemirrorInput extends PureComponent<CodemirrorInputProps> {
     editor: Editor;
     _onKeyUp: (_cm: CodeMirror.Doc, event: {
         key: string;

package/lib-esm/components/console/CodemirrorInput.js

@@ -1,2 +1,2 @@
-import{__extends,__makeTemplateObject}from"tslib";import React from"react";import{asField}from"informed";import{Controlled as CodeMirror}from"react-codemirror2-react-17";import{createGlobalStyle}from"../../redoc-lib";import"./codemirror-helpers";import{MediaTypes}from"../../types";var templateObject_1,CodeMirrorStyles=createGlobalStyle(templateObject_1||(templateObject_1=__makeTemplateObject(["\n  .cm-s-material.CodeMirror {\n    background-color: ","!important;\n    color: ","!important;\n    font-family: ",";\n    line-height: 18px;\n    padding: 10px;\n  }\n\n  .CodeMirror-lint-mark-error {\n    background-size: 4px;\n    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAYAAAD+Bd/7AAAAVUlEQVR42mNgQAL/GRjigPg/EP8FYntkCX4gtoVKgvE/BoabcEVAhj6S5DUgfgFl/wFJ2gPxL6iuT1DF+kD2R5AYA5KRj6CS/FAMYvszIBltz4AFAAD9fz0YtLg13wAAAABJRU5ErkJggg==') !important;\n  }\n\n  .cm-s-material.CodeMirror-focused div.CodeMirror-selected {\n    background: rgba(255, 255, 255, 0.3) !important;\n  }\n\n  .cm-s-material .CodeMirror-code .cm-string.cm-property {\n    color: #9EFAA7;\n  }\n\n  .cm-s-material .CodeMirror-code .cm-string {\n    color: #FEE39E;\n  }\n\n  .cm-s-material .CodeMirror-code .cm-atom {\n    color: ",";\n  }\n\n  div .cm-s-material .CodeMirror-matchingbracket {\n    outline: 1px solid grey;\n    text-decoration: none;\n  }\n\n  .react-codemirror2 {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    overflow: hidden;\n\n    flex: 1;\n  }\n\n  .CodeMirror {\n    flex: 1;\n    border-radius: ",";\n  }\n"],["\n  .cm-s-material.CodeMirror {\n    background-color: ","!important;\n    color: ","!important;\n    font-family: ",";\n    line-height: 18px;\n    padding: 10px;\n  }\n\n  .CodeMirror-lint-mark-error {\n    background-size: 4px;\n    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAYAAAD+Bd/7AAAAVUlEQVR42mNgQAL/GRjigPg/EP8FYntkCX4gtoVKgvE/BoabcEVAhj6S5DUgfgFl/wFJ2gPxL6iuT1DF+kD2R5AYA5KRj6CS/FAMYvszIBltz4AFAAD9fz0YtLg13wAAAABJRU5ErkJggg==') !important;\n  }\n\n  .cm-s-material.CodeMirror-focused div.CodeMirror-selected {\n    background: rgba(255, 255, 255, 0.3) !important;\n  }\n\n  .cm-s-material .CodeMirror-code .cm-string.cm-property {\n    color: #9EFAA7;\n  }\n\n  .cm-s-material .CodeMirror-code .cm-string {\n    color: #FEE39E;\n  }\n\n  .cm-s-material .CodeMirror-code .cm-atom {\n    color: ",";\n  }\n\n  div .cm-s-material .CodeMirror-matchingbracket {\n    outline: 1px solid grey;\n    text-decoration: none;\n  }\n\n  .react-codemirror2 {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    overflow: hidden;\n\n    flex: 1;\n  }\n\n  .CodeMirror {\n    flex: 1;\n    border-radius: ",";\n  }\n"])),(function(e){return e.theme.rightPanel.panelControlsBackgroundColor}),(function(e){return e.theme.colors.text.light}),(function(e){return e.theme.typography.code.fontFamily}),(function(e){return e.theme.colors.text.light}),(function(e){return e.theme.components.panels.borderRadius})),CodemirrorInput=function(e){function r(){var r=null!==e&&e.apply(this,arguments)||this;return Object.defineProperty(r,"editor",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(r,"_onKeyUp",{enumerable:!0,configurable:!0,writable:!0,value:function(e,t){/^[a-zA-Z0-9_":]$/.test(t.key)&&r.editor.execCommand("autocomplete")}}),Object.defineProperty(r,"initEditor",{enumerable:!0,configurable:!0,writable:!0,value:function(e){r.editor=e,e.on("keyup",r._onKeyUp)}}),Object.defineProperty(r,"refreshEditor",{enumerable:!0,configurable:!0,writable:!0,value:function(){r.editor.refresh()}}),Object.defineProperty(r,"showHintHandler",{enumerable:!0,configurable:!0,writable:!0,value:function(){return r.editor.showHint({completeSingle:!0})}}),r}return __extends(r,e),Object.defineProperty(r.prototype,"componentDidMount",{enumerable:!1,configurable:!0,writable:!0,value:function(){var e=this;setTimeout((function(){e.editor.refresh()}),0),document.addEventListener("click",this.refreshEditor)}}),Object.defineProperty(r.prototype,"componentWillUnmount",{enumerable:!1,configurable:!0,writable:!0,value:function(){document.removeEventListener("click",this.refreshEditor)}}),Object.defineProperty(r.prototype,"render",{enumerable:!1,configurable:!0,writable:!0,value:function(){var e=this.props.fieldState.value,r=this.props.fieldApi,t=r.setValue,n=r.setTouched,o=r.setError,i=this.props,a=i.onChange,l=i.onBlur,c=i.forwardedRef;return React.createElement(React.Fragment,null,React.createElement(CodeMirrorStyles,null),React.createElement(CodeMirror,{editorDidMount:this.initEditor,value:e||"",ref:c,onBeforeChange:function(e,r,n){t(n),a&&a(n)},onBlur:function(e){n(!1),l&&l(e)},options:{mode:this.props.mode||MediaTypes.JSON,theme:"material",matchBrackets:!0,autoCloseBrackets:!0,tabSize:2,foldGutter:!0,extraKeys:{"Cmd-Space":this.showHintHandler,"Ctrl-Space":this.showHintHandler},hintOptions:{id:this.props.id,completeSingle:!1,schema:this.props.schema},lint:{id:this.props.id,schema:this.props.schema,setError:o}}}))}}),r}(React.PureComponent);export{CodemirrorInput};export default asField(CodemirrorInput);
+import{__extends,__makeTemplateObject}from"tslib";import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";import{PureComponent}from"react";import{asField}from"informed";import{Controlled as CodeMirror}from"react-codemirror2-react-17";import{createGlobalStyle}from"../../redoc-lib";import"./codemirror-helpers";import{MediaTypes}from"../../types";var templateObject_1,CodeMirrorStyles=createGlobalStyle(templateObject_1||(templateObject_1=__makeTemplateObject(["\n  .cm-s-material.CodeMirror {\n    background-color: ","!important;\n    color: ","!important;\n    font-family: ",";\n    line-height: 18px;\n    padding: 10px;\n  }\n\n  .CodeMirror-lint-mark-error {\n    background-size: 4px;\n    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAYAAAD+Bd/7AAAAVUlEQVR42mNgQAL/GRjigPg/EP8FYntkCX4gtoVKgvE/BoabcEVAhj6S5DUgfgFl/wFJ2gPxL6iuT1DF+kD2R5AYA5KRj6CS/FAMYvszIBltz4AFAAD9fz0YtLg13wAAAABJRU5ErkJggg==') !important;\n  }\n\n  .cm-s-material.CodeMirror-focused div.CodeMirror-selected {\n    background: rgba(255, 255, 255, 0.3) !important;\n  }\n\n  .cm-s-material .CodeMirror-code .cm-string.cm-property {\n    color: #9EFAA7;\n  }\n\n  .cm-s-material .CodeMirror-code .cm-string {\n    color: #FEE39E;\n  }\n\n  .cm-s-material .CodeMirror-code .cm-atom {\n    color: ",";\n  }\n\n  div .cm-s-material .CodeMirror-matchingbracket {\n    outline: 1px solid grey;\n    text-decoration: none;\n  }\n\n  .react-codemirror2 {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    overflow: hidden;\n\n    flex: 1;\n  }\n\n  .CodeMirror {\n    flex: 1;\n    border-radius: ",";\n  }\n"],["\n  .cm-s-material.CodeMirror {\n    background-color: ","!important;\n    color: ","!important;\n    font-family: ",";\n    line-height: 18px;\n    padding: 10px;\n  }\n\n  .CodeMirror-lint-mark-error {\n    background-size: 4px;\n    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAYAAAD+Bd/7AAAAVUlEQVR42mNgQAL/GRjigPg/EP8FYntkCX4gtoVKgvE/BoabcEVAhj6S5DUgfgFl/wFJ2gPxL6iuT1DF+kD2R5AYA5KRj6CS/FAMYvszIBltz4AFAAD9fz0YtLg13wAAAABJRU5ErkJggg==') !important;\n  }\n\n  .cm-s-material.CodeMirror-focused div.CodeMirror-selected {\n    background: rgba(255, 255, 255, 0.3) !important;\n  }\n\n  .cm-s-material .CodeMirror-code .cm-string.cm-property {\n    color: #9EFAA7;\n  }\n\n  .cm-s-material .CodeMirror-code .cm-string {\n    color: #FEE39E;\n  }\n\n  .cm-s-material .CodeMirror-code .cm-atom {\n    color: ",";\n  }\n\n  div .cm-s-material .CodeMirror-matchingbracket {\n    outline: 1px solid grey;\n    text-decoration: none;\n  }\n\n  .react-codemirror2 {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    overflow: hidden;\n\n    flex: 1;\n  }\n\n  .CodeMirror {\n    flex: 1;\n    border-radius: ",";\n  }\n"])),(function(e){return e.theme.rightPanel.panelControlsBackgroundColor}),(function(e){return e.theme.colors.text.light}),(function(e){return e.theme.typography.code.fontFamily}),(function(e){return e.theme.colors.text.light}),(function(e){return e.theme.components.panels.borderRadius})),CodemirrorInput=function(e){function r(){var r=null!==e&&e.apply(this,arguments)||this;return Object.defineProperty(r,"editor",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(r,"_onKeyUp",{enumerable:!0,configurable:!0,writable:!0,value:function(e,o){/^[a-zA-Z0-9_":]$/.test(o.key)&&r.editor.execCommand("autocomplete")}}),Object.defineProperty(r,"initEditor",{enumerable:!0,configurable:!0,writable:!0,value:function(e){r.editor=e,e.on("keyup",r._onKeyUp)}}),Object.defineProperty(r,"refreshEditor",{enumerable:!0,configurable:!0,writable:!0,value:function(){r.editor.refresh()}}),Object.defineProperty(r,"showHintHandler",{enumerable:!0,configurable:!0,writable:!0,value:function(){return r.editor.showHint({completeSingle:!0})}}),r}return __extends(r,e),Object.defineProperty(r.prototype,"componentDidMount",{enumerable:!1,configurable:!0,writable:!0,value:function(){var e=this;setTimeout((function(){e.editor.refresh()}),0),document.addEventListener("click",this.refreshEditor)}}),Object.defineProperty(r.prototype,"componentWillUnmount",{enumerable:!1,configurable:!0,writable:!0,value:function(){document.removeEventListener("click",this.refreshEditor)}}),Object.defineProperty(r.prototype,"render",{enumerable:!1,configurable:!0,writable:!0,value:function(){var e=this.props.fieldState.value,r=this.props.fieldApi,o=r.setValue,n=r.setTouched,t=r.setError,i=this.props,a=i.onChange,l=i.onBlur,c=i.forwardedRef;return _jsxs(_Fragment,{children:[_jsx(CodeMirrorStyles,{},void 0),_jsx(CodeMirror,{editorDidMount:this.initEditor,value:e||"",ref:c,onBeforeChange:function(e,r,n){o(n),a&&a(n)},onBlur:function(e){n(!1),l&&l(e)},options:{mode:this.props.mode||MediaTypes.JSON,theme:"material",matchBrackets:!0,autoCloseBrackets:!0,tabSize:2,foldGutter:!0,extraKeys:{"Cmd-Space":this.showHintHandler,"Ctrl-Space":this.showHintHandler},hintOptions:{id:this.props.id,completeSingle:!1,schema:this.props.schema},lint:{id:this.props.id,schema:this.props.schema,setError:t}}},void 0)]},void 0)}}),r}(PureComponent);export{CodemirrorInput};export default asField(CodemirrorInput);
 //# sourceMappingURL=CodemirrorInput.js.map

package/lib-esm/components/console/Console.d.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import type { FormApi, FormState } from 'informed';
+import { Component } from 'react';
 import type { SecurityDetails } from '../../types';
 import type { ProStore } from '../../services';
 import type { OperationModel, Server } from '../../redoc-lib';
@@ -31,7 +31,7 @@ export interface ConsoleState {
     time?: number;
     server: Server;
 }
-export declare class Console extends React.Component<ConsoleProps, ConsoleState> {
+export declare class Console extends Component<ConsoleProps, ConsoleState> {
     formApi: FormApi | undefined;
     constructor(props: ConsoleProps);
     setFormApi: (formApi: FormApi, { values, ...rest }?: FormState<import("informed").FormValues>) => void;

package/lib-esm/components/console/Console.js

@@ -1,2 +1,2 @@
-import{__assign,__awaiter,__decorate,__extends,__generator,__rest}from"tslib";import*as React from"react";import{Form,useField}from"informed";import{observer}from"mobx-react";import Swagger from"swagger-client";import{unescapeFormId}from"../../utils";import{AnalyticsEventType}from"../../services";import{JsonPointer}from"../../redoc-lib";import{RenderHook}from"../../redoc-lib/src/components/RenderHook";import{l}from"../../redoc-lib/src/services/Labels";import{CodeHeader,Accordion}from"../Panel";import{OAuth2}from"../../services/OAuth2";import{isFileUploadMime}from"../common/FileUpload/helper";import{OperationParameters}from"../OperationParameters";import{useDimensions}from"../../hooks";import{getFileNameFromHeaders,getParameters,makeRequestInterceptor,unescapeQueryParams,updateStorage}from"./utils";import{AuthPanel,requiredValidator}from"./AuthPanel";import{ConsoleBadges}from"./ConsoleBadges";import{RequestBody}from"./RequestBody";import{ResponsePanel}from"./ResponsePanel";import{ActionPanel}from"./ActionPanel";import{ServersDropdown}from"./ServersDropdown";import{TryItPanel}from"./TryItPanel";import{CloseButton,ConsoleBody,ConsoleWrap}from"./styled";function normalizeUrlProtocol(e){return e.startsWith("//")?"https:"+e:e}var flexColumn={flex:1,display:"flex",flexDirection:"column"},Console=function(e){function t(t){var r=e.call(this,t)||this;return Object.defineProperty(r,"formApi",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(r,"setFormApi",{enumerable:!0,configurable:!0,writable:!0,value:function(e,t){void 0===t&&(t=e.getState());var o=t.values,a=__rest(t,["values"]);r.formApi=e,setTimeout((function(){var e=__assign(__assign({},a),{values:__assign(__assign({},o),{query:unescapeQueryParams(o.query||{})})});r.setState({form:e})}),0)}}),Object.defineProperty(r,"handleChange",{enumerable:!0,configurable:!0,writable:!0,value:function(e){var t=e.values,o=__rest(e,["values"]),a=__assign(__assign({},o),{values:__assign(__assign({},t),{query:unescapeQueryParams(t.query||{})})});r.setState({form:a}),updateStorage(a),r.props.operation.setRequestValues(t)}}),Object.defineProperty(r,"handleTabChange",{enumerable:!0,configurable:!0,writable:!0,value:function(e){r.setState({activeTab:e})}}),Object.defineProperty(r,"handleServerChange",{enumerable:!0,configurable:!0,writable:!0,value:function(e){r.setState({server:e}),r.props.operation.setActiveServer(e)}}),Object.defineProperty(r,"handleExecute",{enumerable:!0,configurable:!0,writable:!0,value:function(){return __awaiter(r,void 0,void 0,(function(){var e,t,r,o,a,n,s,i,l,u,c,p,d,m,h,v,f,y,g,_,b,P,R,S,C,w,A,E,I,k,q,T,O,B,F,x,H,j,D,V,U,N,W=this;return __generator(this,(function(z){switch(z.label){case 0:if(e=this.props,t=e.store,r=e.operation,o=e.onResponse,a=this.state.form,n=a.values,s=a.invalid,null===(F=this.formApi)||void 0===F||F.submitForm(),s)return this.setState({shaking:!0}),setTimeout((function(){return W.setState({shaking:!1})}),1e3),null===(H=null===(x=null==t?void 0:t.options.events)||void 0===x?void 0:x.tryItSent)||void 0===H||H.call(x,{eventType:AnalyticsEventType.TryItSent,resource:"Redocly_OperationTryIt",action:"ValidationFailed",operationId:r.operationId,operationPath:r.path,operationHttpVerb:r.httpVerb,operationSummary:r.description}),[2];if(i=this.props.operation,l=i.servers,u=i.requestBody,c=u&&u.content&&u.content.active&&u.content.active.name||"",p=n.body,/json/.test(c))try{p=JSON.parse(p)}catch(e){console.error(e)}if(this.setState({loading:!0}),d=this.state.resolvedRawSpec,m=(r.httpVerb||"").toLowerCase(),!l)throw console.error("Servers are not specified in your OpenAPI file. You can't use Try It Out console without specifying servers. If you use OpenAPI 2, make sure you configured host and basepath"),new Error("Servers are not specified");h=l.find((function(e){return W.state.server.url.endsWith(e.url.endsWith("/")?e.url.substring(0,e.url.length-1):e.url)})),v=Date.now(),f=!!window.document.documentMode,g=n.auth,n.auth?(_=Object.keys(n.auth)[0],b=unescapeFormId(_),y=__assign(__assign({},d),{components:__assign(__assign({},null==d?void 0:d.components),{securitySchemes:__assign(__assign({},null==d?void 0:d.components.securitySchemes),(q={},q[b]=__assign(__assign({},null==d?void 0:d.components.securitySchemes[b]),{type:"openIdConnect"===(null==d?void 0:d.components.securitySchemes[b].type)?"oauth2":null==d?void 0:d.components.securitySchemes[b].type}),q))})}),g=__assign(__assign({},g),((T={})[b]=g[_],T))):y=__assign({},d),y.servers=l,(P=t.options.corsProxyUrl)&&l.length&&(y.servers=l.map((function(e){return __assign(__assign({},e),{url:P+normalizeUrlProtocol(e.url)})})),y.paths=__assign(__assign({},y.paths),((O={})[r.path]=__assign(__assign({},y.paths[r.path]),((B={})[m]=__assign(__assign({},y.paths[r.path][m]),{servers:void 0}),B.servers=void 0,B)),O))),(R=(null===(D=null===(j=null==u?void 0:u.content)||void 0===j?void 0:j.active)||void 0===D?void 0:D.name)||null)&&p&&isFileUploadMime(R)&&(S=Object.values(p),p=S.length>1?S:S[0]),C={userFetch:f&&require("cross-fetch").fetch,server:P?P+normalizeUrlProtocol(h.url):h.url,serverVariables:this.state.server.variables,spec:y,pathName:r.path,method:r.httpVerb,parameters:__assign(__assign(__assign(__assign({},n.path),n.query),n.header),n.cookie),securities:{authorized:g},requestBody:p,requestContentType:R,responseContentType:(null===(V=n.header)||void 0===V?void 0:V.Accept)||null,requestInterceptor:makeRequestInterceptor(t.options,r,null==g?void 0:g.Authorization)},z.label=1;case 1:return z.trys.push([1,5,8,9]),[4,Swagger.execute(C)];case 2:return w=z.sent(),(A=null==w?void 0:w.data)instanceof Blob?(isFileUploadMime(A.type)&&(w.fileInfo={rawData:A,fileName:getFileNameFromHeaders(w.headers)}),E=w,[4,A.text()]):[3,4];case 3:E.data=z.sent(),z.label=4;case 4:return null==o||o({request:C,response:w}),this.setState({response:w,error:void 0}),[3,9];case 5:return(I=z.sent())&&I.response&&I.response.data instanceof Blob?(k=I.response,[4,I.response.data.text()]):[3,7];case 6:k.data=z.sent(),null==o||o({request:C,response:I.response}),z.label=7;case 7:return this.setState({response:void 0,error:I}),[3,9];case 8:return this.setState({loading:!1,activeTab:1,time:Date.now()-v}),null===(N=null===(U=null==t?void 0:t.options.events)||void 0===U?void 0:U.tryItSent)||void 0===N||N.call(U,{eventType:AnalyticsEventType.TryItSent,resource:"Redocly_OperationTryIt",action:"Sent",operationId:r.operationId,operationPath:r.path,operationHttpVerb:r.httpVerb,operationSummary:r.description}),[7];case 9:return[2]}}))}))}}),r.state={form:{values:{path:getParameters(t.operation.parameters,"path"),cookie:getParameters(t.operation.parameters,"cookie"),header:getParameters(t.operation.parameters,"header"),query:getParameters(t.operation.parameters,"query")}},shaking:!1,loading:!1,activeTab:0,server:{}},r}return __extends(t,e),Object.defineProperty(t.prototype,"componentDidMount",{enumerable:!1,configurable:!0,writable:!0,value:function(){var e;return __awaiter(this,void 0,void 0,(function(){var t,r,o,a;return __generator(this,(function(n){switch(n.label){case 0:return t=this.props,r=t.store,o=t.operation,[4,r.dereferenceSpecForTryIt(o)];case 1:return a=n.sent(),this.setState({resolvedRawSpec:a}),null===(e=this.formApi)||void 0===e||e.setValues({}),[2]}}))}))}}),Object.defineProperty(t.prototype,"componentDidUpdate",{enumerable:!1,configurable:!0,writable:!0,value:function(e){e.operation!==this.props.operation&&this.setState({response:void 0,error:void 0,activeTab:0})}}),Object.defineProperty(t.prototype,"render",{enumerable:!1,configurable:!0,writable:!0,value:function(){var e=this.props,t=e.operation,r=e.className,o=e.rootElement,a=this.state,n=a.shaking,s=a.activeTab,i=a.form,l=a.response,u=a.loading,c=a.error,p=!(!l&&!c);return React.createElement(ConsoleWrapHook,{shaking:n,className:r,rootElement:o},React.createElement(CodeHeader,null,React.createElement(ConsoleBadges,{active:s,hasResponse:p,onChange:this.handleTabChange}),this.props.onClose&&React.createElement(CloseButton,{onClick:this.props.onClose}," ✕ ")),React.createElement(ConsoleBody,{hidden:0!==s,"data-cy":"console-request-body"},this.renderRequest()),React.createElement(ConsoleBody,{hidden:1!==s,"data-cy":"console-response-body"},this.renderResponse()),React.createElement(ActionPanel,{hasResponse:p,params:i.values,operation:t,loading:u,execute:this.handleExecute}))}}),Object.defineProperty(t.prototype,"renderRequest",{enumerable:!1,configurable:!0,writable:!0,value:function(){var e,t=this.props,r=t.operation,o=t.store,a=t.properties,n=t.securityDefaults,s=this.state,i=s.form,u=s.resolvedRawSpec,c=s.server,p=i.errors||{},d=p.path||p.cookie||p.header||p.query,m=u&&JsonPointer.get(u,r.pointer),h=i.values&&i.values.auth&&Object.keys(i.values.auth)[0];h&&i.values.auth[h]||(h=void 0),!h||void 0===i.values.auth[h].token&&void 0===i.values.auth[h].client_id&&void 0===i.values.auth[h].client_secret||i.values.auth[h].token&&i.values.auth[h].token.access_token||(h=void 0),h&&null!=i.values.auth[h].username&&(i.values.auth[h].username&&i.values.auth[h].password||(h=void 0));var v=r.parameters||[],f=null===(e=null==o?void 0:o.options.hooks)||void 0===e?void 0:e.ReplaceTryItSecurityPanel;return!u&&React.createElement(React.Fragment,null,"Loading...")||React.createElement(Form,{onChange:this.handleChange,getApi:this.setFormApi,style:__assign(__assign({},flexColumn),{margin:0})},React.createElement(ServersDropdown,{operation:r,onChange:this.handleServerChange}),React.createElement(Accordion,{initialActiveIdx:r.security.length&&h?1:0},r.security.length&&this.formApi&&React.createElement(TryItPanel,{header:l("tryItAuth"),"data-cy":"security-trigger",renderChildrenHidden:!0,error:!h&&!!p.auth,success:!!h},f?React.createElement(AuthPanelHook,{field:"auth",validate:requiredValidator},(function(e){return React.createElement(RenderHook,{Hook:f,props:{server:c,operation:r,onChange:e,OAuth2:OAuth2}})})):React.createElement(AuthPanel,{formApi:this.formApi,form:i,operation:r,activeServer:c.url,authCorsProxyUrl:o.options.authCorsProxyUrl,securityDefaults:n}))||null,r.requestBody&&this.formApi&&React.createElement(TryItPanel,{header:l("tryItBody"),"data-cy":"body-trigger",renderChildrenHidden:!0,error:!!p.body},React.createElement(RequestBody,{validate:allowBodyErrors,formApi:this.formApi,body:r.requestBody,id:r.id,resolvedBody:null==m?void 0:m.requestBody,properties:a}))||null,v.length&&React.createElement(TryItPanel,{header:l("tryItParameters"),"data-cy":"parameters-trigger",error:d,renderChildrenHidden:!0},React.createElement(OperationParameters,{operation:r,values:i.values,errors:i.errors||{}}))||null))}}),Object.defineProperty(t.prototype,"renderResponse",{enumerable:!1,configurable:!0,writable:!0,value:function(){var e=this.state,t=e.response,r=e.error,o=e.time;return React.createElement(ResponsePanel,{response:t,error:r,time:o})}}),t=__decorate([observer],t)}(React.Component);export{Console};function allowBodyErrors(){}function ConsoleWrapHook(e){var t=e.shaking,r=e.className,o=e.children,a=e.rootElement,n=useDimensions(a)[0];return React.createElement(ConsoleWrap,{shaking:t,className:r,"data-cy":"console",fullWidth:null==n?void 0:n.width},o)}function AuthPanelHook(e){var t=useField(__assign({},e)),r=t.fieldApi,o=t.render,a=t.userProps,n=r.setValue,s=a.children;return o(React.createElement(React.Fragment,null,s(n)))}
+import{__assign,__awaiter,__decorate,__extends,__generator,__rest}from"tslib";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";import{Form,useField}from"informed";import{observer}from"mobx-react";import Swagger from"swagger-client";import{Component}from"react";import{unescapeFormId}from"../../utils";import{JsonPointer}from"../../redoc-lib";import{RenderHook}from"../../redoc-lib/src/components/RenderHook";import{l}from"../../redoc-lib/src/services/Labels";import{CodeHeader,Accordion}from"../Panel";import{OAuth2}from"../../services/OAuth2";import{isFileUploadMime}from"../common/FileUpload/helper";import{OperationParameters}from"../OperationParameters";import{useDimensions}from"../../hooks";import{AnalyticsEventType}from"../../events";import{getFileNameFromHeaders,getParameters,makeRequestInterceptor,unescapeQueryParams,updateStorage}from"./utils";import{AuthPanel,requiredValidator}from"./AuthPanel";import{ConsoleBadges}from"./ConsoleBadges";import{RequestBody}from"./RequestBody";import{ResponsePanel}from"./ResponsePanel";import{ActionPanel}from"./ActionPanel";import{ServersDropdown}from"./ServersDropdown";import{TryItPanel}from"./TryItPanel";import{CloseButton,ConsoleBody,ConsoleWrap}from"./styled";function normalizeUrlProtocol(e){return e.startsWith("//")?"https:"+e:e}var flexColumn={flex:1,display:"flex",flexDirection:"column"},Console=function(e){function r(r){var t=e.call(this,r)||this;return Object.defineProperty(t,"formApi",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(t,"setFormApi",{enumerable:!0,configurable:!0,writable:!0,value:function(e,r){void 0===r&&(r=e.getState());var o=r.values,s=__rest(r,["values"]);t.formApi=e,setTimeout((function(){var e=__assign(__assign({},s),{values:__assign(__assign({},o),{query:unescapeQueryParams(o.query||{})})});t.setState({form:e})}),0)}}),Object.defineProperty(t,"handleChange",{enumerable:!0,configurable:!0,writable:!0,value:function(e){var r=e.values,o=__rest(e,["values"]),s=__assign(__assign({},o),{values:__assign(__assign({},r),{query:unescapeQueryParams(r.query||{})})});t.setState({form:s}),updateStorage(s),t.props.operation.setRequestValues(r)}}),Object.defineProperty(t,"handleTabChange",{enumerable:!0,configurable:!0,writable:!0,value:function(e){t.setState({activeTab:e})}}),Object.defineProperty(t,"handleServerChange",{enumerable:!0,configurable:!0,writable:!0,value:function(e){t.setState({server:e}),t.props.operation.setActiveServer(e)}}),Object.defineProperty(t,"handleExecute",{enumerable:!0,configurable:!0,writable:!0,value:function(){return __awaiter(t,void 0,void 0,(function(){var e,r,t,o,s,n,a,i,l,u,d,p,c,h,m,v,_,g,f,y,b,P,x,S,j,C,w,A,I,k,q,T,O,R,F,B,H,D,V,E,U,N,W=this;return __generator(this,(function(z){switch(z.label){case 0:if(e=this.props,r=e.store,t=e.operation,o=e.onResponse,s=this.state.form,n=s.values,a=s.invalid,null===(F=this.formApi)||void 0===F||F.submitForm(),a)return this.setState({shaking:!0}),setTimeout((function(){return W.setState({shaking:!1})}),1e3),null===(H=null===(B=null==r?void 0:r.options.events)||void 0===B?void 0:B.tryItSent)||void 0===H||H.call(B,{eventType:AnalyticsEventType.TryItSent,resource:"Redocly_OperationTryIt",action:"ValidationFailed",operationId:t.operationId,operationPath:t.path,operationHttpVerb:t.httpVerb,operationSummary:t.description}),[2];if(i=this.props.operation,l=i.servers,u=i.requestBody,d=u&&u.content&&u.content.active&&u.content.active.name||"",p=n.body,/json/.test(d))try{p=JSON.parse(p)}catch(e){console.error(e)}if(this.setState({loading:!0}),c=this.state.resolvedRawSpec,h=(t.httpVerb||"").toLowerCase(),!l)throw console.error("Servers are not specified in your OpenAPI file. You can't use Try It Out console without specifying servers. If you use OpenAPI 2, make sure you configured host and basepath"),new Error("Servers are not specified");m=l.find((function(e){return W.state.server.url.endsWith(e.url.endsWith("/")?e.url.substring(0,e.url.length-1):e.url)})),v=Date.now(),_=!!window.document.documentMode,f=n.auth,n.auth?(y=Object.keys(n.auth)[0],b=unescapeFormId(y),g=__assign(__assign({},c),{components:__assign(__assign({},null==c?void 0:c.components),{securitySchemes:__assign(__assign({},null==c?void 0:c.components.securitySchemes),(q={},q[b]=__assign(__assign({},null==c?void 0:c.components.securitySchemes[b]),{type:"openIdConnect"===(null==c?void 0:c.components.securitySchemes[b].type)?"oauth2":null==c?void 0:c.components.securitySchemes[b].type}),q))})}),f=__assign(__assign({},f),((T={})[b]=f[y],T))):g=__assign({},c),g.servers=l,(P=r.options.corsProxyUrl)&&l.length&&(g.servers=l.map((function(e){return __assign(__assign({},e),{url:P+normalizeUrlProtocol(e.url)})})),g.paths=__assign(__assign({},g.paths),((O={})[t.path]=__assign(__assign({},g.paths[t.path]),((R={})[h]=__assign(__assign({},g.paths[t.path][h]),{servers:void 0}),R.servers=void 0,R)),O))),(x=(null===(V=null===(D=null==u?void 0:u.content)||void 0===D?void 0:D.active)||void 0===V?void 0:V.name)||null)&&p&&isFileUploadMime(x)&&(S=Object.values(p),p=S.length>1?S:S[0]),j={userFetch:_&&require("cross-fetch").fetch,server:P?P+normalizeUrlProtocol(m.url):m.url,serverVariables:this.state.server.variables,spec:g,pathName:t.path,method:t.httpVerb,parameters:__assign(__assign(__assign(__assign({},n.path),n.query),n.header),n.cookie),securities:{authorized:f},requestBody:p,requestContentType:x,responseContentType:(null===(E=n.header)||void 0===E?void 0:E.Accept)||null,requestInterceptor:makeRequestInterceptor(r.options,t,null==f?void 0:f.Authorization)},z.label=1;case 1:return z.trys.push([1,5,8,9]),[4,Swagger.execute(j)];case 2:return C=z.sent(),(w=null==C?void 0:C.data)instanceof Blob?(isFileUploadMime(w.type)&&(C.fileInfo={rawData:w,fileName:getFileNameFromHeaders(C.headers)}),A=C,[4,w.text()]):[3,4];case 3:A.data=z.sent(),z.label=4;case 4:return null==o||o({request:j,response:C}),this.setState({response:C,error:void 0}),[3,9];case 5:return(I=z.sent())&&I.response&&I.response.data instanceof Blob?(k=I.response,[4,I.response.data.text()]):[3,7];case 6:k.data=z.sent(),null==o||o({request:j,response:I.response}),z.label=7;case 7:return this.setState({response:void 0,error:I}),[3,9];case 8:return this.setState({loading:!1,activeTab:1,time:Date.now()-v}),null===(N=null===(U=null==r?void 0:r.options.events)||void 0===U?void 0:U.tryItSent)||void 0===N||N.call(U,{eventType:AnalyticsEventType.TryItSent,resource:"Redocly_OperationTryIt",action:"Sent",operationId:t.operationId,operationPath:t.path,operationHttpVerb:t.httpVerb,operationSummary:t.description}),[7];case 9:return[2]}}))}))}}),t.state={form:{values:{path:getParameters(r.operation.parameters,"path"),cookie:getParameters(r.operation.parameters,"cookie"),header:getParameters(r.operation.parameters,"header"),query:getParameters(r.operation.parameters,"query")}},shaking:!1,loading:!1,activeTab:0,server:{}},t}return __extends(r,e),Object.defineProperty(r.prototype,"componentDidMount",{enumerable:!1,configurable:!0,writable:!0,value:function(){var e;return __awaiter(this,void 0,void 0,(function(){var r,t,o,s;return __generator(this,(function(n){switch(n.label){case 0:return r=this.props,t=r.store,o=r.operation,[4,t.dereferenceSpecForTryIt(o)];case 1:return s=n.sent(),this.setState({resolvedRawSpec:s}),null===(e=this.formApi)||void 0===e||e.setValues({}),[2]}}))}))}}),Object.defineProperty(r.prototype,"componentDidUpdate",{enumerable:!1,configurable:!0,writable:!0,value:function(e){e.operation!==this.props.operation&&this.setState({response:void 0,error:void 0,activeTab:0})}}),Object.defineProperty(r.prototype,"render",{enumerable:!1,configurable:!0,writable:!0,value:function(){var e=this.props,r=e.operation,t=e.className,o=e.rootElement,s=this.state,n=s.shaking,a=s.activeTab,i=s.form,l=s.response,u=s.loading,d=s.error,p=!(!l&&!d);return _jsxs(ConsoleWrapHook,__assign({shaking:n,className:t,rootElement:o},{children:[_jsxs(CodeHeader,{children:[_jsx(ConsoleBadges,{active:a,hasResponse:p,onChange:this.handleTabChange},void 0),this.props.onClose&&_jsx(CloseButton,__assign({onClick:this.props.onClose},{children:" ✕ "}),void 0)]},void 0),_jsx(ConsoleBody,__assign({hidden:0!==a,"data-cy":"console-request-body"},{children:this.renderRequest()}),void 0),_jsx(ConsoleBody,__assign({hidden:1!==a,"data-cy":"console-response-body"},{children:this.renderResponse()}),void 0),_jsx(ActionPanel,{hasResponse:p,params:i.values,operation:r,loading:u,execute:this.handleExecute},void 0)]}),void 0)}}),Object.defineProperty(r.prototype,"renderRequest",{enumerable:!1,configurable:!0,writable:!0,value:function(){var e,r=this.props,t=r.operation,o=r.store,s=r.properties,n=r.securityDefaults,a=this.state,i=a.form,u=a.resolvedRawSpec,d=a.server,p=i.errors||{},c=p.path||p.cookie||p.header||p.query,h=u&&JsonPointer.get(u,t.pointer),m=i.values&&i.values.auth&&Object.keys(i.values.auth)[0];m&&i.values.auth[m]||(m=void 0),!m||void 0===i.values.auth[m].token&&void 0===i.values.auth[m].client_id&&void 0===i.values.auth[m].client_secret||i.values.auth[m].token&&i.values.auth[m].token.access_token||(m=void 0),m&&null!=i.values.auth[m].username&&(i.values.auth[m].username&&i.values.auth[m].password||(m=void 0));var v=t.parameters||[],_=null===(e=null==o?void 0:o.options.hooks)||void 0===e?void 0:e.ReplaceTryItSecurityPanel;return!u&&_jsx(_Fragment,{children:"Loading..."},void 0)||_jsxs(Form,__assign({onChange:this.handleChange,getApi:this.setFormApi,style:__assign(__assign({},flexColumn),{margin:0})},{children:[_jsx(ServersDropdown,{operation:t,onChange:this.handleServerChange},void 0),_jsxs(Accordion,__assign({initialActiveIdx:t.security.length&&m?1:0},{children:[t.security.length&&this.formApi&&_jsx(TryItPanel,__assign({header:l("tryItAuth"),"data-cy":"security-trigger",renderChildrenHidden:!0,error:!m&&!!p.auth,success:!!m},{children:_?_jsx(AuthPanelHook,__assign({field:"auth",validate:requiredValidator},{children:function(e){return _jsx(RenderHook,{Hook:_,props:{server:d,operation:t,onChange:e,OAuth2:OAuth2}},void 0)}}),void 0):_jsx(AuthPanel,{formApi:this.formApi,form:i,operation:t,activeServer:d.url,authCorsProxyUrl:o.options.authCorsProxyUrl,securityDefaults:n},void 0)}),void 0)||null,t.requestBody&&this.formApi&&_jsx(TryItPanel,__assign({header:l("tryItBody"),"data-cy":"body-trigger",renderChildrenHidden:!0,error:!!p.body},{children:_jsx(RequestBody,{validate:allowBodyErrors,formApi:this.formApi,body:t.requestBody,id:t.id,resolvedBody:null==h?void 0:h.requestBody,properties:s},void 0)}),void 0)||null,v.length&&_jsx(TryItPanel,__assign({header:l("tryItParameters"),"data-cy":"parameters-trigger",error:c,renderChildrenHidden:!0},{children:_jsx(OperationParameters,{operation:t,values:i.values,errors:i.errors||{}},void 0)}),void 0)||null]}),void 0)]}),void 0)}}),Object.defineProperty(r.prototype,"renderResponse",{enumerable:!1,configurable:!0,writable:!0,value:function(){var e=this.state,r=e.response,t=e.error,o=e.time;return _jsx(ResponsePanel,{response:r,error:t,time:o},void 0)}}),r=__decorate([observer],r)}(Component);export{Console};function allowBodyErrors(){}function ConsoleWrapHook(e){var r=e.shaking,t=e.className,o=e.children,s=e.rootElement,n=useDimensions(s)[0];return _jsx(ConsoleWrap,__assign({shaking:r,className:t,"data-cy":"console",fullWidth:null==n?void 0:n.width},{children:o}),void 0)}function AuthPanelHook(e){var r=useField(__assign({},e)),t=r.fieldApi,o=r.render,s=r.userProps,n=t.setValue,a=s.children;return o(_jsx(_Fragment,{children:a(n)},void 0))}
 //# sourceMappingURL=Console.js.map

package/lib-esm/components/console/ConsoleBadges.d.ts

@@ -1,9 +1,9 @@
-import * as React from 'react';
+import { Component } from 'react';
 export interface ConsoleBadgesProps {
     onChange: (activeBadge: number) => void;
     active: number;
     hasResponse: boolean;
 }
-export declare class ConsoleBadges extends React.Component<ConsoleBadgesProps> {
+export declare class ConsoleBadges extends Component<ConsoleBadgesProps> {
     render(): JSX.Element;
 }

package/lib-esm/components/console/ConsoleBadges.js

@@ -1,2 +1,2 @@
-import{__extends,__makeTemplateObject}from"tslib";import*as React from"react";import{darken,transparentize}from"polished";import{styled}from"../../redoc-lib";var templateObject_1,templateObject_2,BadgesWrap=styled.div(templateObject_1||(templateObject_1=__makeTemplateObject(["\n  display: flex;\n  font-size: 12px;\n  button {\n    margin: 0;\n  }\n"],["\n  display: flex;\n  font-size: 12px;\n  button {\n    margin: 0;\n  }\n"]))),Badge=styled.button(templateObject_2||(templateObject_2=__makeTemplateObject(["\n  outline: none;\n  border: none;\n  background-color: ",";\n  text-align: center;\n  cursor: pointer;\n  color: ",";\n  min-width: 80px;\n  min-height: 30px;\n  border-radius: ",";\n  font-size: 12px;\n\n  padding: 0 10px;\n\n  border-top: 4px solid transparent;\n  border-bottom: 4px solid transparent;\n\n  &:first-child {\n    border-top-left-radius: ",";\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    border-bottom-left-radius: ",";\n  }\n\n  &:last-child {\n    border-top-left-radius: 0;\n    border-top-right-radius: ",";\n    border-bottom-right-radius: ",";\n    border-bottom-left-radius: 0;\n  }\n\n  ","\n\n  ","\n"],["\n  outline: none;\n  border: none;\n  background-color: ",";\n  text-align: center;\n  cursor: pointer;\n  color: ",";\n  min-width: 80px;\n  min-height: 30px;\n  border-radius: ",";\n  font-size: 12px;\n\n  padding: 0 10px;\n\n  border-top: 4px solid transparent;\n  border-bottom: 4px solid transparent;\n\n  &:first-child {\n    border-top-left-radius: ",";\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    border-bottom-left-radius: ",";\n  }\n\n  &:last-child {\n    border-top-left-radius: 0;\n    border-top-right-radius: ",";\n    border-bottom-right-radius: ",";\n    border-bottom-left-radius: 0;\n  }\n\n  ","\n\n  ","\n"])),(function(e){return e.theme.rightPanel.panelBackgroundColor}),(function(e){return e.theme.colors.text.light}),(function(e){return e.theme.shape.borderRadius}),(function(e){return e.theme.shape.borderRadius}),(function(e){return e.theme.shape.borderRadius}),(function(e){return e.theme.shape.borderRadius}),(function(e){return e.theme.shape.borderRadius}),(function(e){var n=e.active,t=e.theme;return n&&"\n    border-bottom: 4px solid "+t.colors.accent.main+";\n    background-color: "+darken(.05,t.rightPanel.panelBackgroundColor)+";\n  "||""}),(function(e){var n=e.disabled,t=e.theme;return n&&"\n    cursor: default;\n    color:  "+transparentize(.3,t.colors.text.light)+";\n  "||""})),ConsoleBadges=function(e){function n(){return null!==e&&e.apply(this,arguments)||this}return __extends(n,e),Object.defineProperty(n.prototype,"render",{enumerable:!1,configurable:!0,writable:!0,value:function(){var e=this.props,n=e.onChange,t=e.active,r=e.hasResponse;return React.createElement(BadgesWrap,null,React.createElement(Badge,{onClick:function(){return n(0)},active:0===t},r?"Edit Request":"Request"),React.createElement(Badge,{onClick:function(){return r&&n(1)},active:1===t,disabled:!r}," ","Response"," "))}}),n}(React.Component);export{ConsoleBadges};
+import{__assign,__extends,__makeTemplateObject}from"tslib";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{Component}from"react";import{darken,transparentize}from"polished";import{styled}from"../../redoc-lib";var templateObject_1,templateObject_2,BadgesWrap=styled.div(templateObject_1||(templateObject_1=__makeTemplateObject(["\n  display: flex;\n  font-size: 12px;\n  button {\n    margin: 0;\n  }\n"],["\n  display: flex;\n  font-size: 12px;\n  button {\n    margin: 0;\n  }\n"]))),Badge=styled.button(templateObject_2||(templateObject_2=__makeTemplateObject(["\n  outline: none;\n  border: none;\n  background-color: ",";\n  text-align: center;\n  cursor: pointer;\n  color: ",";\n  min-width: 80px;\n  min-height: 30px;\n  border-radius: ",";\n  font-size: 12px;\n\n  padding: 0 10px;\n\n  border-top: 4px solid transparent;\n  border-bottom: 4px solid transparent;\n\n  &:first-child {\n    border-top-left-radius: ",";\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    border-bottom-left-radius: ",";\n  }\n\n  &:last-child {\n    border-top-left-radius: 0;\n    border-top-right-radius: ",";\n    border-bottom-right-radius: ",";\n    border-bottom-left-radius: 0;\n  }\n\n  ","\n\n  ","\n"],["\n  outline: none;\n  border: none;\n  background-color: ",";\n  text-align: center;\n  cursor: pointer;\n  color: ",";\n  min-width: 80px;\n  min-height: 30px;\n  border-radius: ",";\n  font-size: 12px;\n\n  padding: 0 10px;\n\n  border-top: 4px solid transparent;\n  border-bottom: 4px solid transparent;\n\n  &:first-child {\n    border-top-left-radius: ",";\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    border-bottom-left-radius: ",";\n  }\n\n  &:last-child {\n    border-top-left-radius: 0;\n    border-top-right-radius: ",";\n    border-bottom-right-radius: ",";\n    border-bottom-left-radius: 0;\n  }\n\n  ","\n\n  ","\n"])),(function(n){return n.theme.rightPanel.panelBackgroundColor}),(function(n){return n.theme.colors.text.light}),(function(n){return n.theme.shape.borderRadius}),(function(n){return n.theme.shape.borderRadius}),(function(n){return n.theme.shape.borderRadius}),(function(n){return n.theme.shape.borderRadius}),(function(n){return n.theme.shape.borderRadius}),(function(n){var e=n.active,r=n.theme;return e&&"\n    border-bottom: 4px solid "+r.colors.accent.main+";\n    background-color: "+darken(.05,r.rightPanel.panelBackgroundColor)+";\n  "||""}),(function(n){var e=n.disabled,r=n.theme;return e&&"\n    cursor: default;\n    color:  "+transparentize(.3,r.colors.text.light)+";\n  "||""})),ConsoleBadges=function(n){function e(){return null!==n&&n.apply(this,arguments)||this}return __extends(e,n),Object.defineProperty(e.prototype,"render",{enumerable:!1,configurable:!0,writable:!0,value:function(){var n=this.props,e=n.onChange,r=n.active,t=n.hasResponse;return _jsxs(BadgesWrap,{children:[_jsx(Badge,__assign({onClick:function(){return e(0)},active:0===r},{children:t?"Edit Request":"Request"}),void 0),_jsxs(Badge,__assign({onClick:function(){return t&&e(1)},active:1===r,disabled:!t},{children:[" ","Response"," "]}),void 0)]},void 0)}}),e}(Component);export{ConsoleBadges};
 //# sourceMappingURL=ConsoleBadges.js.map

package/lib-esm/components/console/ConsoleLazy.js

@@ -1,2 +1,2 @@
-import{__assign,__awaiter,__generator}from"tslib";import*as React from"react";import{useDimensions}from"../../hooks";import{CodeHeader}from"../Panel";import{ConsoleWrap}from"./styled";export function Console(e){var o=this,t=React.useState({}),n=t[0],r=t[1],a=useDimensions(e.rootElement)[0];return React.useEffect((function(){__awaiter(o,void 0,void 0,(function(){var e;return __generator(this,(function(o){switch(o.label){case 0:return[4,import("./Console")];case 1:return e=o.sent(),r({Console:e.Console}),[2]}}))}))}),[]),n.Console?React.createElement(n.Console,__assign({},e)):React.createElement(ConsoleWrap,{className:e.className,fullWidth:null==a?void 0:a.width},React.createElement(CodeHeader,null,"Loading..."))}
+import{__assign,__awaiter,__generator}from"tslib";import{jsx as _jsx}from"react/jsx-runtime";import{useState,useEffect}from"react";import{useDimensions}from"../../hooks";import{CodeHeader}from"../Panel";import{ConsoleWrap}from"./styled";export function Console(e){var o=this,s=useState({}),r=s[0],t=s[1],n=useDimensions(e.rootElement)[0];return useEffect((function(){__awaiter(o,void 0,void 0,(function(){var e;return __generator(this,(function(o){switch(o.label){case 0:return[4,import("./Console")];case 1:return e=o.sent(),t({Console:e.Console}),[2]}}))}))}),[]),r.Console?_jsx(r.Console,__assign({},e),void 0):_jsx(ConsoleWrap,__assign({className:e.className,fullWidth:null==n?void 0:n.width},{children:_jsx(CodeHeader,{children:"Loading..."},void 0)}),void 0)}
 //# sourceMappingURL=ConsoleLazy.js.map

package/lib-esm/components/console/OAuth2Flow.d.ts

@@ -1,5 +1,6 @@
-import * as React from 'react';
 import type { FormApi, FormState } from 'informed';
+import type { ChangeEvent, Context } from 'react';
+import { Component } from 'react';
 import type { InputActionButtonProps } from '../common/TextField';
 import type { SecurityDetails } from '../../types';
 import type { RedocProNormalizedOptions } from '../../services';
@@ -29,8 +30,8 @@ interface OAuth2FlowState {
     codeChallenge?: string;
     validCodeChallenge?: string;
 }
-export declare class OAuth2Flow extends React.Component<OAuth2FlowProps, OAuth2FlowState> {
-    static contextType: React.Context<RedocProNormalizedOptions>;
+export declare class OAuth2Flow extends Component<OAuth2FlowProps, OAuth2FlowState> {
+    static contextType: Context<RedocProNormalizedOptions>;
     context: RedocProNormalizedOptions;
     state: OAuth2FlowState;
     get values(): {
@@ -50,7 +51,7 @@ export declare class OAuth2Flow extends React.Component<OAuth2FlowProps, OAuth2F
     handleCancel(): void;
     clearToken: () => void;
     togglePkceOptions: () => void;
-    handleCodeVerifierChange: ({ target: { value: codeVerifier }, }: React.ChangeEvent<HTMLInputElement>) => Promise<void>;
+    handleCodeVerifierChange: ({ target: { value: codeVerifier }, }: ChangeEvent<HTMLInputElement>) => Promise<void>;
     render(): JSX.Element;
 }
 export {};