@redocly/reference-docs 2.11.5 → 2.11.9

package/lib-esm/components/Samples/SamplesTabs.js

@@ -1,2 +1,2 @@
-import{__assign,__rest}from"tslib";import*as React from"react";import{useContext,useEffect,useState,useMemo}from"react";import{observer}from"mobx-react";import{CollapsingTabsBase}from"../Tabs";import{StoreContext}from"../../redoc-lib";import{LoadingWrapper}from"./LoadingWrapper";import{WarnMessage}from"../shared";export var SamplesTabs=observer((function(e){var a=e.children,t=e.onChange,r=e.defaultLanguage,n=__rest(e,["children","onChange","defaultLanguage"]),o=useMemo((function(){return n.tabs.map((function(e){return e.lang}))}),[n.tabs]),s=useContext(StoreContext),i=useState(r),u=i[0],c=i[1],g=useState(o),m=g[0],f=g[1];useEffect((function(){return f(o)}),[n.tabs]),useEffect((function(){u===s.activeSampleLanguage&&c(void 0)}),[s.activeSampleLanguage]),useEffect((function(){return s.stopLoader()}),[s.activeSampleLanguage]),useEffect((function(){u&&(s.startLoader(),s.activateSampleLanguage(u))}),[u,r]);var p;return React.createElement(LoadingWrapper,{className:u&&"updated"},React.createElement(CollapsingTabsBase,__assign({},n,{activeIndex:(p=m.indexOf(u||s.activeSampleLanguage),-1===p?0:p),onChange:function(e){var a=n.tabs[e];s.setActiveSampleLanguage(a.lang),t&&t(a)}}),r&&-1===m.indexOf(r)&&React.createElement(WarnMessage,null,"Provided language is not supported"),a))}));
+import{__assign,__rest}from"tslib";import React,{useContext,useEffect,useState,useMemo}from"react";import{observer}from"mobx-react";import{CollapsingTabsBase}from"../Tabs";import{StoreContext}from"../../redoc-lib";import{LoadingWrapper}from"./LoadingWrapper";import{WarnMessage}from"../shared";export var SamplesTabs=observer((function(e){var a=e.children,t=e.onChange,n=e.defaultLanguage,r=__rest(e,["children","onChange","defaultLanguage"]),o=useMemo((function(){return r.tabs.map((function(e){return e.lang}))}),[r.tabs]),u=useContext(StoreContext),s=useState(n),i=s[0],l=s[1],c=useState(o),g=c[0],f=c[1];useEffect((function(){return f(o)}),[r.tabs]),useEffect((function(){i===(null==u?void 0:u.activeSampleLanguage)&&l(void 0)}),[null==u?void 0:u.activeSampleLanguage]),useEffect((function(){return null==u?void 0:u.stopLoader()}),[null==u?void 0:u.activeSampleLanguage]),useEffect((function(){i&&(null==u||u.startLoader(),null==u||u.activateSampleLanguage(i))}),[i,n]);var m;return React.createElement(LoadingWrapper,{className:i&&"updated"},React.createElement(CollapsingTabsBase,__assign({},r,{activeIndex:(m=g.indexOf(i||(null==u?void 0:u.activeSampleLanguage)||""),-1===m?0:m),onChange:function(e){var a=r.tabs[e];null==u||u.setActiveSampleLanguage(a.lang),t&&t(a)}}),n&&-1===g.indexOf(n)&&React.createElement(WarnMessage,null,"Provided language is not supported"),a))}));
 //# sourceMappingURL=SamplesTabs.js.map

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

@@ -1,5 +1,5 @@
+import React from 'react';
 import { TabProps as ReactTabProps } from 'react-tabs';
-import * as React from 'react';
 import { OperationModel } from '../../../redoc-lib';
 export interface TabProps extends ReactTabProps {
     title: string;

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

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

package/lib-esm/components/VersionSwitcher.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { DropdownOption } from '../redoc-lib';
+import { DropdownOption } from './common/Dropdown';
 import { VersionedSpecStore } from '../services/VersionedSpecStore';
 export interface VersionSwitcherProps {
     onChange: (o: DropdownOption) => void;

package/lib-esm/components/VersionSwitcher.js

@@ -1,2 +1,2 @@
-import{__makeTemplateObject}from"tslib";import*as React from"react";import{styled,Dropdown}from"../redoc-lib";export var VersionSwitcher=function(e){var n=e.spec,t=e.onChange,o=n.versionsInfo.map((function(e,n){return{idx:n,value:e.title}}));return React.createElement(VersionWrapper,null,React.createElement(Dropdown,{options:o,value:o[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: flex;\n  flex-direction: column;\n  font-size: 12px;\n  div[role='button'] {\n    .dropdown-selector-value {\n      font-weight: 600;\n      color: ",";\n    }\n  }\n"],["\n  padding: ",";\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  font-size: 12px;\n  div[role='button'] {\n    .dropdown-selector-value {\n      font-weight: 600;\n      color: ",";\n    }\n  }\n"])),(function(e){var n=e.theme;return 2*n.spacing.unit+"px "+4*n.spacing.unit+"px"}),(function(e){return e.theme.colors.text.primary}));
+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"}));
 //# sourceMappingURL=VersionSwitcher.js.map

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { DropdownProps } from './types';
+export declare const Dropdown: React.NamedExoticComponent<DropdownProps>;

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

@@ -0,0 +1,2 @@
+import{__assign,__makeTemplateObject}from"tslib";import React from"react";import styled from"../../../redoc-lib/src/styled-components";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.placeholder,o=e.value,r=void 0===o?"":o,l=e.className,i=e.variant,s=void 0===i?"light":i,c=e.maxOptionLength,m=void 0===c?80:c,p=t.map((function(e){var t=e.title||e.value;return t.length>m&&(t=t.slice(0,m)+"..."),__assign(__assign({},e),{title:t})}));return React.createElement("span",{className:l+" dropdown-wrapper"},React.createElement(ArrowIcon,{variant:s}),React.createElement("select",{onChange:function(e){var o=e.target.selectedIndex;n(t[a?o-1:o])},value:r,className:"dropdown-select"},a&&React.createElement("option",{disabled:!0,hidden:!0,value:a},a),p.map((function(e,t){var n=e.idx,a=e.value,o=e.title;return React.createElement("option",{key:n||a+t,value:a,className:"dropdown-option"},o||a)}))))};export var Dropdown=React.memo(DropdownComponent);
+//# sourceMappingURL=Dropdown.js.map

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

@@ -0,0 +1,2 @@
+export * from './styled';
+export * from './types';

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

@@ -0,0 +1,2 @@
+export*from"./styled";export*from"./types";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+export declare const Dropdown: import("styled-components").StyledComponent<import("react").NamedExoticComponent<import("./types").DropdownProps>, any, {
+    dense?: boolean | undefined;
+    fullWidth?: boolean | undefined;
+    variant?: "light" | "dark" | undefined;
+}, never>;
+export declare const SimpleDropdown: import("styled-components").StyledComponent<import("react").NamedExoticComponent<import("./types").DropdownProps>, any, {
+    dense?: boolean | undefined;
+    fullWidth?: boolean | undefined;
+    variant?: "light" | "dark" | undefined;
+}, never>;
+export declare const CollapsingDropdown: import("styled-components").StyledComponent<import("react").NamedExoticComponent<import("./types").DropdownProps>, any, {
+    dense?: boolean | undefined;
+    fullWidth?: boolean | undefined;
+    variant?: "light" | "dark" | undefined;
+} & {
+    active?: boolean | undefined;
+}, never>;
+export declare const VersionDropdown: import("styled-components").StyledComponent<import("react").NamedExoticComponent<import("./types").DropdownProps>, any, {
+    dense?: boolean | undefined;
+    fullWidth?: boolean | undefined;
+    variant?: "light" | "dark" | undefined;
+}, never>;

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

@@ -0,0 +1,2 @@
+import{__makeTemplateObject}from"tslib";import styled,{css}from"styled-components";import{Dropdown as DropdownComponent}from"./Dropdown";var templateObject_1,templateObject_2,templateObject_3,templateObject_4,templateObject_5,darkDropdownStyle=css(templateObject_1||(templateObject_1=__makeTemplateObject(["\n  background-color: ",";\n  border-color: ",";\n  color: ",";\n\n  &,\n  &:hover,\n  &:focus-within {\n    border: none;\n    box-shadow: none;\n  }\n"],["\n  background-color: ",";\n  border-color: ",";\n  color: ",";\n\n  &,\n  &:hover,\n  &:focus-within {\n    border: none;\n    box-shadow: none;\n  }\n"])),(function(n){return n.theme.rightPanel.panelControlsBackgroundColor}),(function(n){return n.theme.rightPanel.panelControlsBackgroundColor}),(function(n){return n.theme.colors.text.light}));export var Dropdown=styled(DropdownComponent)(templateObject_2||(templateObject_2=__makeTemplateObject(["\n  box-sizing: border-box;\n  outline: none;\n  display: inline-block;\n  border-radius: ",";\n  vertical-align: bottom;\n  position: relative;\n  width: ",";\n  cursor: pointer;\n  text-transform: none;\n\n  .dropdown-select {\n    box-sizing: border-box;\n    min-width: 90px;\n    outline: none;\n    display: inline-block;\n    color: ",";\n    border-radius: ",";\n    padding: ",";\n    vertical-align: bottom;\n    position: relative;\n    width: ",";\n    cursor: pointer;\n    text-transform: none;\n\n    line-height: normal;\n    font-size: 14px;\n    font-family: inherit;\n    text-overflow: ellipsis;\n    overflow: hidden;\n\n    &,\n    &:hover,\n    &:focus-within {\n      border: 1px solid ",";\n      box-shadow: none;\n    }\n    appearance: none;\n\n    ",";\n  }\n"],["\n  box-sizing: border-box;\n  outline: none;\n  display: inline-block;\n  border-radius: ",";\n  vertical-align: bottom;\n  position: relative;\n  width: ",";\n  cursor: pointer;\n  text-transform: none;\n\n  .dropdown-select {\n    box-sizing: border-box;\n    min-width: 90px;\n    outline: none;\n    display: inline-block;\n    color: ",";\n    border-radius: ",";\n    padding: ",";\n    vertical-align: bottom;\n    position: relative;\n    width: ",";\n    cursor: pointer;\n    text-transform: none;\n\n    line-height: normal;\n    font-size: 14px;\n    font-family: inherit;\n    text-overflow: ellipsis;\n    overflow: hidden;\n\n    &,\n    &:hover,\n    &:focus-within {\n      border: 1px solid ",";\n      box-shadow: none;\n    }\n    appearance: none;\n\n    ",";\n  }\n"])),(function(n){return n.theme.shape.borderRadius}),(function(n){return n.fullWidth?"100%":"auto"}),(function(n){return n.theme.colors.text.primary}),(function(n){return n.theme.shape.borderRadius}),(function(n){return n.dense?"2px 24px 2px 8px":"8px 26px 8px 10px"}),(function(n){return n.fullWidth?"100%":"auto"}),(function(n){return n.theme.colors.border.light}),(function(n){return"dark"===n.variant?darkDropdownStyle:""}));export var SimpleDropdown=styled(Dropdown)(templateObject_3||(templateObject_3=__makeTemplateObject(["\n  .dropdown-select {\n    padding: 0 26px 0 4px;\n    border: none;\n    background: transparent;\n    font-size: 14px;\n    font-weight: 400;\n    appearance: none;\n\n    &:hover,\n    &:focus-within {\n      border: none;\n      box-shadow: none;\n    }\n  }\n"],["\n  .dropdown-select {\n    padding: 0 26px 0 4px;\n    border: none;\n    background: transparent;\n    font-size: 14px;\n    font-weight: 400;\n    appearance: none;\n\n    &:hover,\n    &:focus-within {\n      border: none;\n      box-shadow: none;\n    }\n  }\n"])));export var CollapsingDropdown=styled(Dropdown)(templateObject_4||(templateObject_4=__makeTemplateObject(["\n  flex: 1;\n  svg {\n    top: 60%;\n    transform: translateY(-60%);\n  }\n  .dropdown-select {\n    ",";\n\n    height: 40px;\n    border-radius: 0 "," 0 0;\n    margin: 0 0 -4px;\n    transition: none;\n    width: 100%;\n    background: ",";\n    & {\n      border-bottom: 4px solid\n        ",";\n\n      &[open],\n      &:focus-within,\n      &:hover {\n        background: ",";\n        border-bottom: 4px solid\n          ",";\n      }\n    }\n  }\n"],["\n  flex: 1;\n  svg {\n    top: 60%;\n    transform: translateY(-60%);\n  }\n  .dropdown-select {\n    ",";\n\n    height: 40px;\n    border-radius: 0 "," 0 0;\n    margin: 0 0 -4px;\n    transition: none;\n    width: 100%;\n    background: ",";\n    & {\n      border-bottom: 4px solid\n        ",";\n\n      &[open],\n      &:focus-within,\n      &:hover {\n        background: ",";\n        border-bottom: 4px solid\n          ",";\n      }\n    }\n  }\n"])),darkDropdownStyle,(function(n){return n.theme.shape.borderRadius}),(function(n){var o=n.theme;return n.active?o.colors.border.dark:"none"}),(function(n){var o=n.active,e=n.theme;return o?e.colors.accent.main:"transparent"}),(function(n){return n.theme.colors.border.dark}),(function(n){var o=n.active,e=n.theme;return o?e.colors.accent.main:"transparent"}));export var VersionDropdown=styled(Dropdown)(templateObject_5||(templateObject_5=__makeTemplateObject(["\n  .dropdown-select {\n    font-weight: 600;\n    color: ",";\n  }\n"],["\n  .dropdown-select {\n    font-weight: 600;\n    color: ",";\n  }\n"])),(function(n){return n.theme.colors.text.primary}));
+//# sourceMappingURL=styled.js.map

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

@@ -0,0 +1,25 @@
+import React from 'react';
+export interface DropdownOption {
+    idx?: number;
+    value: string;
+    title?: string;
+    serverUrl?: string;
+    label?: string;
+}
+export interface DropdownProps {
+    options: DropdownOption[];
+    onChange: (option: DropdownOption) => void;
+    ariaLabel?: string;
+    className?: string;
+    placeholder?: string;
+    value?: string;
+    dense?: boolean;
+    fullWidth?: boolean;
+    variant?: 'dark' | 'light';
+    maxOptionLength?: number;
+}
+export interface ArrowIconProps {
+    className?: string;
+    variant?: 'light' | 'dark';
+    style?: React.CSSProperties;
+}

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

@@ -0,0 +1,2 @@
+export{};
+//# sourceMappingURL=types.js.map

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FieldProps } from 'informed';
-import { Option, DropdownProps } from '@redocly/react-dropdown-aria';
+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, {
     fullWidth?: boolean | undefined;
@@ -19,7 +19,7 @@ export interface TextFieldExtraProps extends React.InputHTMLAttributes<HTMLInput
 export declare const TextField: React.ForwardRefExoticComponent<TextFieldExtraProps & React.RefAttributes<HTMLInputElement>>;
 export declare function FormTextField(props: FieldProps<string, GenericObject> & TextFieldExtraProps): JSX.Element;
 export interface FormDropdownProps extends Partial<DropdownProps> {
-    options: Option[];
+    options: DropdownOption[];
     initValue?: string;
 }
 export declare const FormDropdown: 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}from"informed";import{useField}from"informed";import styled,{css,mediaCSS}from"../../redoc-lib/src/styled-components";import{FormError}from"./form";import{Dropdown}from"../../redoc-lib";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 React from"react";import{asField}from"informed";import{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);
 //# sourceMappingURL=TextField.js.map

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

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { FormApi, FormState } from 'informed';
-import { Option } from '@redocly/react-dropdown-aria';
 import { OperationModel } from '../../redoc-lib';
 import { SecurityDetails } from '../../utils';
+import { DropdownOption } from '../common/Dropdown';
 export declare function requiredValidator(value: unknown): string | undefined;
 export interface AuthPanelProps {
     operation: OperationModel;
@@ -20,7 +20,7 @@ export declare class AuthPanel extends React.Component<AuthPanelProps, AuthPanel
     state: {
         activeScheme: number;
     };
-    handleSchemeChange: (option: Option & {
+    handleSchemeChange: (option: DropdownOption & {
         idx: number;
     }) => void;
     render(): JSX.Element | null;

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

@@ -1,2 +1,2 @@
-import{__assign,__extends}from"tslib";import*as React from"react";import{Dropdown}from"../../redoc-lib";import{fromSessionStorage,getSecurityDetailsOptions,toSessionStorage,escapeFormId}from"../../utils";import OAuth2TokenInput from"./OAuth2TokenInput";import{OAuth2Flow}from"./OAuth2Flow";import{OpenIDConnect}from"./OpenIDConnect";import{FormDropdown,FormTextField}from"../common/TextField";import{FormControl,FormLabel,FormWrapper}from"../common/form";import{l}from"../../redoc-lib/src/services/Labels";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 ")})).map((function(e,t){return{value:e,idx:t}}));return 0===a.length?null:React.createElement(React.Fragment,null,React.createElement(FormWrapper,null,a.length>1&&React.createElement(FormControl,null,React.createElement(Dropdown,{variant:"dark",fullWidth:!0,prefix:"Security scheme: ",options:a,value:a[r].value,onChange:this.handleSchemeChange}))||null,o[r].schemes.map((function(r){var o,a,i,n,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",validate:requiredValidator,initialValue:fromSessionStorage("auth."+m+".password")||(null===(i=null==t?void 0:t[m])||void 0===i?void 0:i.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===(n=null==r?void 0:r.flows)||void 0===n?void 0:n.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",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*as React from"react";import{fromSessionStorage,getSecurityDetailsOptions,toSessionStorage,escapeFormId}from"../../utils";import OAuth2TokenInput from"./OAuth2TokenInput";import{OAuth2Flow}from"./OAuth2Flow";import{OpenIDConnect}from"./OpenIDConnect";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";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 ")})).map((function(e,t){return{value:e,idx:t}}));return 0===a.length?null: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",validate:requiredValidator,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",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};
 //# sourceMappingURL=AuthPanel.js.map

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

@@ -1,2 +1,2 @@
-import*as React from"react";import{asField}from"informed";import{Dropdown}from"../../redoc-lib";import{useMount}from"../../hooks";var ParameterEnumDropdownComponent=function(e){var o=e.initValue,r=e.paramEnum,n=e.fieldApi,t=React.useState(o),a=t[0],u=t[1],i=r.map((function(e,o){return{id:String(o),value:e}}));return useMount((function(){o&&n.setValue(o)})),React.createElement(Dropdown,{fullWidth:!0,variant:"dark",value:a,options:i,onChange:function(e){n.setValue(e.value),u(e.value)}})};export var ParameterEnumDropdown=asField(ParameterEnumDropdownComponent);
+import*as React from"react";import{asField}from"informed";import{useMount}from"../../hooks";import{Dropdown}from"../common/Dropdown";var ParameterEnumDropdownComponent=function(o){var e=o.initValue,n=o.paramEnum,r=o.fieldApi,a=React.useState(e),t=a[0],m=a[1],u=n.map((function(o,e){return{idx:e,value:o}}));return useMount((function(){e&&r.setValue(e)})),React.createElement(Dropdown,{fullWidth:!0,variant:"dark",value:t,options:u,onChange:function(o){r.setValue(o.value),m(o.value)}})};export var ParameterEnumDropdown=asField(ParameterEnumDropdownComponent);
 //# sourceMappingURL=ParameterDropdown.js.map

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

@@ -1,2 +1,2 @@
-var _this=this;import{__assign,__awaiter,__generator,__rest}from"tslib";import*as React from"react";import{useEffect}from"react";import{observer}from"mobx-react";import merge from"deepmerge";import{DropdownOrLabel,Dropdown,MediaTypesSwitch}from"../../redoc-lib";import CodemirrorInput from"./CodemirrorInput";import{RequestMimeLabel}from"./RequestMimeLabel";import{ExampleSwitch,useExampleKey}from"../Samples";import{arrayMerge}from"../../services/utils";import{RequestBodyForm}from"./RequestBodyForm";import{isRootFileUpload}from"../common/FileUpload/helper";import{MediaTypes}from"../../models";export var RequestBody=observer((function(e){var r,o,t=e.properties,a=void 0===t?{}:t,i=__rest(e,["properties"]),n=function(e){var r,o=i.body.content;if(!o||!o.hasSample)return"";var t=null===(r=o.active)||void 0===r?void 0:r.examples;if(!(null==t?void 0:t[e]))return"";var n=merge(null==t?void 0:t[e].value,a,{arrayMerge:arrayMerge});return JSON.stringify(n,null,2)},l=null===(o=null===(r=i.body.content)||void 0===r?void 0:r.operation)||void 0===o?void 0:o.activeExampleName,m=function(e){var r,o;null===(o=null===(r=i.body.content)||void 0===r?void 0:r.operation)||void 0===o||o.activateExampleName(e),i.console.formApi.setValue("body",n(e))},d=function(e){if(!e)return"";if("application/x-www-form-urlencoded"===e.mime)return e.value;var r=merge(e.value,a,{arrayMerge:arrayMerge});return JSON.stringify(r,null,2)},u=function(e,r){return __awaiter(void 0,void 0,void 0,(function(){var o;return __generator(this,(function(t){return o=i.console.formApi,(0,o.setValue)("body."+e,r),[2]}))}))};useEffect((function(){!1!==l?l&&i.console.formApi.setValue("body",n(l)):i.console.formApi.setValue("body",JSON.stringify(a,null,2))}),[l]);var p=i.validate,s=i.body;return React.createElement(React.Fragment,null,React.createElement(MediaTypesSwitch,{content:s.content,renderDropdown:function(e){return React.createElement(DropdownOrLabel,__assign({},e,{variant:"dark",fullWidth:!0,Label:RequestMimeLabel,Dropdown:Dropdown}))}},(function(e){var r,o=e.examples||{},t=Object.keys(o),a=e.schema,n=isRootFileUpload(a||{},e.name)||e.name===MediaTypes.MULTIPART||e.name===MediaTypes.URL_ENCODED,l=useExampleKey(e.operation,o).exampleKey,s=o[l];return React.createElement(React.Fragment,null,t.length&&1!==t.length&&React.createElement(ExampleSwitch,{examples:o,onChange:m,exampleKey:l})||null,n?React.createElement(RequestBodyForm,{mediaType:e,onChange:u.bind(_this)}):React.createElement(CodemirrorInput,{id:"body"+i.id,field:"body",initialValue:d(s),schema:((null===(r=null==i?void 0:i.resolvedBody)||void 0===r?void 0:r.content[e.name])||{}).schema,mode:e.name,validate:p}))})))}));
+var _this=this;import{__assign,__awaiter,__generator,__rest}from"tslib";import*as React from"react";import{useEffect}from"react";import{observer}from"mobx-react";import merge from"deepmerge";import{DropdownOrLabel,MediaTypesSwitch}from"../../redoc-lib";import CodemirrorInput from"./CodemirrorInput";import{RequestMimeLabel}from"./RequestMimeLabel";import{ExampleSwitch,useExampleKey}from"../Samples";import{arrayMerge}from"../../services/utils";import{RequestBodyForm}from"./RequestBodyForm";import{isRootFileUpload}from"../common/FileUpload/helper";import{MediaTypes}from"../../models";import{Dropdown}from"../common/Dropdown";export var RequestBody=observer((function(e){var r,o,t=e.properties,a=void 0===t?{}:t,i=__rest(e,["properties"]),n=function(e){var r,o=i.body.content;if(!o||!o.hasSample)return"";var t=null===(r=o.active)||void 0===r?void 0:r.examples;if(!(null==t?void 0:t[e]))return"";var n=merge(null==t?void 0:t[e].value,a,{arrayMerge:arrayMerge});return JSON.stringify(n,null,2)},l=null===(o=null===(r=i.body.content)||void 0===r?void 0:r.operation)||void 0===o?void 0:o.activeExampleName,m=function(e){var r,o;null===(o=null===(r=i.body.content)||void 0===r?void 0:r.operation)||void 0===o||o.activateExampleName(e),i.console.formApi.setValue("body",n(e))},d=function(e){if(!e)return"";if("application/x-www-form-urlencoded"===e.mime)return e.value;var r=merge(e.value,a,{arrayMerge:arrayMerge});return JSON.stringify(r,null,2)},p=function(e,r){return __awaiter(void 0,void 0,void 0,(function(){var o;return __generator(this,(function(t){return o=i.console.formApi,(0,o.setValue)("body."+e,r),[2]}))}))};useEffect((function(){!1!==l?l&&i.console.formApi.setValue("body",n(l)):i.console.formApi.setValue("body",JSON.stringify(a,null,2))}),[l]);var u=i.validate,c=i.body;return React.createElement(React.Fragment,null,React.createElement(MediaTypesSwitch,{content:c.content,renderDropdown:function(e){return React.createElement(DropdownOrLabel,__assign({},e,{variant:"dark",fullWidth:!0,Label:RequestMimeLabel,Dropdown:Dropdown}))}},(function(e){var r,o=e.examples||{},t=Object.keys(o),a=e.schema,n=isRootFileUpload(a||{},e.name)||e.name===MediaTypes.MULTIPART||e.name===MediaTypes.URL_ENCODED,l=useExampleKey(e.operation,o).exampleKey,c=o[l];return React.createElement(React.Fragment,null,t.length&&1!==t.length&&React.createElement(ExampleSwitch,{examples:o,onChange:m,exampleKey:l})||null,n?React.createElement(RequestBodyForm,{mediaType:e,onChange:p.bind(_this)}):React.createElement(CodemirrorInput,{id:"body"+i.id,field:"body",initialValue:d(c),schema:((null===(r=null==i?void 0:i.resolvedBody)||void 0===r?void 0:r.content[e.name])||{}).schema,mode:e.name,validate:u}))})))}));
 //# sourceMappingURL=RequestBody.js.map

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { DropdownProps } from '@redocly/react-dropdown-aria';
-import { OperationModel, Server } from '../../redoc-lib';
+import type { OperationModel, Server } from '../../redoc-lib';
+import { DropdownOption } from '../common/Dropdown';
 export interface ServerDropdownProps {
     operation: OperationModel;
     onChange: (server: Server) => void;
@@ -17,9 +17,7 @@ export declare class ServerChooser extends React.Component<ServerDropdownProps,
         variables: {};
     };
     static getDerivedStateFromProps(props: ServerDropdownProps): ServerDropdownState;
-    handleServerChange: (option: DropdownProps & {
-        serverUrl: string;
-    }) => void;
+    handleServerChange: (option: DropdownOption) => void;
     handleVariableChange: (name: string, value: string) => void;
     componentDidMount(): void;
     render(): JSX.Element;

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

@@ -1,2 +1,2 @@
-import{__assign,__decorate,__extends,__makeTemplateObject}from"tslib";import*as React from"react";import{Dropdown,styled}from"../../redoc-lib";import{observer}from"mobx-react";import{fromSessionStorage,toSessionStorage}from"../../utils";import ServerVariable from"./ServerVariable";import{FormControl,FormLabel}from"../common/form";import{expandDefaultServerVariables,expandVariables,getServerWithVariables,getDefaultOrStoredVariables,updateVariablesStorage}from"./utils";var ServerChooser=function(e){function r(){var r=null!==e&&e.apply(this,arguments)||this;return Object.defineProperty(r,"state",{enumerable:!0,configurable:!0,writable:!0,value:{activeIdx:0,variables:{}}}),Object.defineProperty(r,"handleServerChange",{enumerable:!0,configurable:!0,writable:!0,value:function(e){var a=r.props.operation.servers.find((function(r){return r.url===e.serverUrl})),t=getDefaultOrStoredVariables(a);r.props.onChange({url:e.serverUrl,variables:t}),toSessionStorage("serverUrl",e.serverUrl),r.setState({variables:t})}}),Object.defineProperty(r,"handleVariableChange",{enumerable:!0,configurable:!0,writable:!0,value:function(e,a){var t,n=r.props.operation.servers[r.state.activeIdx],o=__assign(__assign({},r.state.variables),((t={})[e]=a||getDefaultOrStoredVariables(n)[e],t));r.setState({variables:o}),updateVariablesStorage(e,a),r.props.onChange(__assign(__assign({},n),{variables:o}))}}),r}return __extends(r,e),Object.defineProperty(r,"getDerivedStateFromProps",{enumerable:!1,configurable:!0,writable:!0,value:function(e){var r=e.operation,a=fromSessionStorage("serverUrl"),t=r.servers.findIndex((function(e){return e.url===a}));return{activeIdx:t<0?0:t}}}),Object.defineProperty(r.prototype,"componentDidMount",{enumerable:!1,configurable:!0,writable:!0,value:function(){var e=getServerWithVariables(this.props.operation.servers,this.state.activeIdx);this.props.onChange(e),this.setState({variables:e.variables})}}),Object.defineProperty(r.prototype,"render",{enumerable:!1,configurable:!0,writable:!0,value:function(){var e=this,r=this.state.activeIdx,a=this.props.operation.servers.map((function(r){return{serverUrl:r.url,value:"\n          "+expandDefaultServerVariables(expandVariables(r.url,e.state.variables),r.variables)+"\n        - "+(r.description||"Default")+"\n      "}})),t=Object.keys(this.state.variables);return React.createElement(ServerDropdownWrap,null,React.createElement(FormLabel,{htmlFor:"server"},"Target server: "),React.createElement(FormControl,null,React.createElement(Dropdown,{openUp:!0,variant:"dark",value:a[r].value,options:a,onChange:this.handleServerChange})),t.length?t.map((function(r){var a,t=null===(a=e.props.operation.servers[e.state.activeIdx].variables)||void 0===a?void 0:a[r];if(t)return React.createElement(ServerVariable,{key:r,name:r,value:e.state.variables[r],defaultValue:t.default,onChange:function(a){return e.handleVariableChange(r,a)},variableEnum:t.enum,description:t.description})})):null)}}),r=__decorate([observer],r)}(React.Component);export{ServerChooser};var templateObject_1,ServerDropdownWrap=styled.div(templateObject_1||(templateObject_1=__makeTemplateObject(["\n  margin-top: 20px;\n"],["\n  margin-top: 20px;\n"])));
+import{__assign,__decorate,__extends,__makeTemplateObject}from"tslib";import*as React from"react";import{styled}from"../../redoc-lib";import{observer}from"mobx-react";import{fromSessionStorage,toSessionStorage}from"../../utils";import ServerVariable from"./ServerVariable";import{FormControl,FormLabel}from"../common/form";import{expandDefaultServerVariables,expandVariables,getServerWithVariables,getDefaultOrStoredVariables,updateVariablesStorage}from"./utils";import{Dropdown}from"../common/Dropdown";var ServerChooser=function(e){function r(){var r=null!==e&&e.apply(this,arguments)||this;return Object.defineProperty(r,"state",{enumerable:!0,configurable:!0,writable:!0,value:{activeIdx:0,variables:{}}}),Object.defineProperty(r,"handleServerChange",{enumerable:!0,configurable:!0,writable:!0,value:function(e){var a=r.props.operation.servers.find((function(r){return r.url===e.serverUrl})),t=getDefaultOrStoredVariables(a);r.props.onChange({url:e.serverUrl||"",variables:t}),toSessionStorage("serverUrl",e.serverUrl||""),r.setState({variables:t})}}),Object.defineProperty(r,"handleVariableChange",{enumerable:!0,configurable:!0,writable:!0,value:function(e,a){var t,o=r.props.operation.servers[r.state.activeIdx],n=__assign(__assign({},r.state.variables),((t={})[e]=a||getDefaultOrStoredVariables(o)[e],t));r.setState({variables:n}),updateVariablesStorage(e,a),r.props.onChange(__assign(__assign({},o),{variables:n}))}}),r}return __extends(r,e),Object.defineProperty(r,"getDerivedStateFromProps",{enumerable:!1,configurable:!0,writable:!0,value:function(e){var r=e.operation,a=fromSessionStorage("serverUrl"),t=r.servers.findIndex((function(e){return e.url===a}));return{activeIdx:t<0?0:t}}}),Object.defineProperty(r.prototype,"componentDidMount",{enumerable:!1,configurable:!0,writable:!0,value:function(){var e=getServerWithVariables(this.props.operation.servers,this.state.activeIdx);this.props.onChange(e),this.setState({variables:e.variables})}}),Object.defineProperty(r.prototype,"render",{enumerable:!1,configurable:!0,writable:!0,value:function(){var e=this,r=this.state.activeIdx,a=this.props.operation.servers.map((function(r,a){return{idx:a,serverUrl:r.url,value:"\n          "+expandDefaultServerVariables(expandVariables(r.url,e.state.variables),r.variables)+"\n        - "+(r.description||"Default")+"\n      "}})),t=Object.keys(this.state.variables);return React.createElement(ServerDropdownWrap,null,React.createElement(FormLabel,{htmlFor:"server"},"Target server: "),React.createElement(FormControl,null,React.createElement(Dropdown,{variant:"dark",value:a[r].value,options:a,fullWidth:!0,onChange:this.handleServerChange})),t.length?t.map((function(r){var a,t=null===(a=e.props.operation.servers[e.state.activeIdx].variables)||void 0===a?void 0:a[r];if(t)return React.createElement(ServerVariable,{key:r,name:r,value:e.state.variables[r],defaultValue:t.default,onChange:function(a){return e.handleVariableChange(r,a)},variableEnum:t.enum,description:t.description})})):null)}}),r=__decorate([observer],r)}(React.Component);export{ServerChooser};var templateObject_1,ServerDropdownWrap=styled.div(templateObject_1||(templateObject_1=__makeTemplateObject(["\n  margin-top: 20px;\n"],["\n  margin-top: 20px;\n"])));
 //# sourceMappingURL=ServerDropdown.js.map

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

@@ -1,2 +1,2 @@
-import{__makeTemplateObject}from"tslib";import*as React from"react";import{Dropdown,styled}from"../../redoc-lib";import{FormControl,FormLabel}from"../common/form";import{TextField}from"../common/TextField";export default function ServerVariable(e){var t=e.name,l=e.value,n=e.description,a=e.variableEnum,r=e.onChange,o=e.defaultValue,m=a?a.map((function(e,t){return{value:e,idx:t}})):[];return React.createElement(FormControl,null,React.createElement(FormLabel,null,t,":"),m&&m.length?React.createElement(Dropdown,{fullWidth:!0,variant:"dark",openUp:!0,value:l,options:m,onChange:function(e){return r(e.value)}}):React.createElement(TextField,{fullWidth:!0,value:l,onChange:function(e){return r(e.target.value)},placeholder:o}),n&&React.createElement(Description,null,n))}var templateObject_1,Description=styled.small(templateObject_1||(templateObject_1=__makeTemplateObject(["\n  display: inline-block;\n  margin-top: 5px;\n  color: #d0d0d0;\n"],["\n  display: inline-block;\n  margin-top: 5px;\n  color: #d0d0d0;\n"])));
+import{__makeTemplateObject}from"tslib";import*as React from"react";import{styled}from"../../redoc-lib";import{Dropdown}from"../common/Dropdown";import{FormControl,FormLabel}from"../common/form";import{TextField}from"../common/TextField";export default function ServerVariable(e){var t=e.name,n=e.value,o=e.description,l=e.variableEnum,r=e.onChange,a=e.defaultValue,m=l?l.map((function(e,t){return{value:e,idx:t}})):[];return React.createElement(FormControl,null,React.createElement(FormLabel,null,t,":"),m&&m.length?React.createElement(Dropdown,{fullWidth:!0,variant:"dark",value:n,options:m,onChange:function(e){return r(e.value)}}):React.createElement(TextField,{fullWidth:!0,value:n,onChange:function(e){return r(e.target.value)},placeholder:a}),o&&React.createElement(Description,null,o))}var templateObject_1,Description=styled.small(templateObject_1||(templateObject_1=__makeTemplateObject(["\n  display: inline-block;\n  margin-top: 5px;\n  color: #d0d0d0;\n"],["\n  display: inline-block;\n  margin-top: 5px;\n  color: #d0d0d0;\n"])));
 //# sourceMappingURL=ServerVariable.js.map

package/lib-esm/components/index.d.ts

@@ -9,5 +9,7 @@ export * from './ProProviders';
 export { ToggleRightPanelButton, ControlsWrap, ChangeViewButton, BackgroundStub, NextSectionButtonWrap, ApiContentWrap, BackgroundStubFix, } from './styled.elements';
 export { TextField } from './common/TextField';
 export { Checkbox } from './common/Checkbox';
+export { Dropdown } from './common/Dropdown';
 export { FormControl, FormLabel, FormError } from './common/form';
 export type { OpenApiResponseData } from './console/ResponsePanel';
+export type { DropdownProps, DropdownOption } from './common/Dropdown';

package/lib-esm/components/index.js

@@ -1,2 +1,2 @@
-export{Button}from"./shared/Button";export*from"./NextSectionButton";export*from"./StoreProvider";export*from"./RedoclyReferenceDocs";export*from"./pluggable";export*from"./console/ConsoleLazy";export*from"./ProProviders";export{ToggleRightPanelButton,ControlsWrap,ChangeViewButton,BackgroundStub,NextSectionButtonWrap,ApiContentWrap,BackgroundStubFix}from"./styled.elements";export{TextField}from"./common/TextField";export{Checkbox}from"./common/Checkbox";export{FormControl,FormLabel,FormError}from"./common/form";
+export{Button}from"./shared/Button";export*from"./NextSectionButton";export*from"./StoreProvider";export*from"./RedoclyReferenceDocs";export*from"./pluggable";export*from"./console/ConsoleLazy";export*from"./ProProviders";export{ToggleRightPanelButton,ControlsWrap,ChangeViewButton,BackgroundStub,NextSectionButtonWrap,ApiContentWrap,BackgroundStubFix}from"./styled.elements";export{TextField}from"./common/TextField";export{Checkbox}from"./common/Checkbox";export{Dropdown}from"./common/Dropdown";export{FormControl,FormLabel,FormError}from"./common/form";
 //# sourceMappingURL=index.js.map

package/lib-esm/components/styled.elements.d.ts

@@ -18,4 +18,4 @@ export declare const ChangeViewButton: ({ store, isVisible, }: {
     store: ProStore;
     isVisible: boolean;
 }) => JSX.Element | null;
-export declare const ControlsWrap: import("styled-components").StyledComponent<"div", ProTheme, {}, never>;
+export declare const ControlsWrap: import("styled-components").StyledComponent<"span", ProTheme, {}, never>;

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

@@ -1,2 +1,2 @@
-import{__makeTemplateObject}from"tslib";import*as React from"react";import{observer}from"mobx-react";import{styled,mediaCSS,mediaMap,ZERO_BREAKPOINT,css,Tooltip}from"../redoc-lib";import{LayoutVariant}from"../services";var ShowRightPanelSVG=styled((function(){return React.createElement("svg",{width:"15",height:"10",viewBox:"0 0 15 10",fill:"none",xmlns:"http://www.w3.org/2000/svg"},React.createElement("path",{d:"M2.41421 5L5.70711 8.29289C6.09763 8.68342 6.09763 9.31658 5.7071 9.70711C5.31658 10.0976 4.68342 10.0976 4.29289 9.70711L0.292892 5.70711C-0.0976321 5.31658 -0.0976319 4.68342 0.292893 4.29289L4.29289 0.292894C4.68342 -0.0976302 5.31658 -0.09763 5.70711 0.292894C6.09763 0.683418 6.09763 1.31658 5.70711 1.70711L2.41421 5Z",fill:"#9AA6B1"}),React.createElement("path",{d:"M2 5C2 4.44772 2.44771 4 3 4L11 4C11.5523 4 12 4.44772 12 5C12 5.55229 11.5523 6 11 6L3 6C2.44771 6 2 5.55228 2 5Z",fill:"#9AA6B1"}),React.createElement("rect",{x:"15",y:"10",width:"2",height:"10",rx:"1",transform:"rotate(-180 15 10)",fill:"#9AA6B1"}))}))(templateObject_1||(templateObject_1=__makeTemplateObject(["\n  position: absolute;\n"],["\n  position: absolute;\n"]))),HideRightPanelSVG=styled((function(){return React.createElement("svg",{width:"15",height:"10",viewBox:"0 0 15 10",fill:"none",xmlns:"http://www.w3.org/2000/svg"},React.createElement("path",{d:"M12.5858 5L9.29289 1.70711C8.90237 1.31658 8.90237 0.683417 9.29289 0.292893C9.68342 -0.097631 10.3166 -0.0976309 10.7071 0.292893L14.7071 4.29289C15.0976 4.68342 15.0976 5.31658 14.7071 5.70711L10.7071 9.70711C10.3166 10.0976 9.68342 10.0976 9.29289 9.70711C8.90237 9.31658 8.90237 8.68342 9.29289 8.29289L12.5858 5Z",fill:"#9AA6B1"}),React.createElement("path",{d:"M13 5C13 5.55229 12.5523 6 12 6L4 6C3.44772 6 3 5.55228 3 5C3 4.44771 3.44772 4 4 4L12 4C12.5523 4 13 4.44772 13 5Z",fill:"#9AA6B1"}),React.createElement("rect",{width:"2",height:"10",rx:"1",fill:"#9AA6B1"}))}))(templateObject_2||(templateObject_2=__makeTemplateObject(["\n  position: absolute;\n"],["\n  position: absolute;\n"])));export var StyledToggleRightPanelButton=styled.a(templateObject_3||(templateObject_3=__makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: '#f00';\n  cursor: pointer;\n  z-index: 1;\n  /* Rectangle 201 */\n  width: ",";\n  height: ",";\n  background: #e5e8eb;\n  border-radius: ",";\n"],["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: '#f00';\n  cursor: pointer;\n  z-index: 1;\n  /* Rectangle 201 */\n  width: ",";\n  height: ",";\n  background: #e5e8eb;\n  border-radius: ",";\n"])),(function(e){return e.theme.components.layoutControls.width}),(function(e){return e.theme.components.layoutControls.height}),(function(e){return e.theme.shape.borderRadius}));export var ToggleRightPanelButton=observer((function(e){var t=e.store,n=e.isVisible;return t.options.showRightPanelToggle&&n?React.createElement(Tooltip,{tip:t.showRightPanel?"Hide samples":"Show samples",placement:"left"},React.createElement(StyledToggleRightPanelButton,{onClick:function(){t.toggleRightPanel()}},t.showRightPanel?React.createElement(HideRightPanelSVG,null):React.createElement(ShowRightPanelSVG,null))):null}));var IntArrowIcon=function(e){return React.createElement("svg",{className:e.className,version:"1.1",viewBox:"0 0 24 24",x:"0",xmlns:"http://www.w3.org/2000/svg",y:"0","aria-hidden":"true"},React.createElement("polygon",{points:"17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 "}))};export var ArrowIcon=styled(IntArrowIcon)(templateObject_4||(templateObject_4=__makeTemplateObject(["\n  width: 18px;\n  height: 18px;\n  transform: ",";\n\n  ","\n"],["\n  width: 18px;\n  height: 18px;\n  transform: ",";\n\n  ","\n"])),(function(e){return"rotate("+("left"===e.direction?"90deg":"-90deg")+")"}),(function(e){var t,n=e.theme;return mediaCSS({fill:null===(t=n.rightPanel)||void 0===t?void 0:t.textColor})}));export var RedocWrap=styled.div(templateObject_5||(templateObject_5=__makeTemplateObject(["\n  display: flex;\n  position: relative;\n  text-align: left;\n  tap-highlight-color: rgba(0, 0, 0, 0);\n  text-size-adjust: 100%;\n  ",";\n\n  ","\n\n  * {\n    box-sizing: border-box;\n    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);\n  }\n"],["\n  display: flex;\n  position: relative;\n  text-align: left;\n  tap-highlight-color: rgba(0, 0, 0, 0);\n  text-size-adjust: 100%;\n  ",";\n\n  ","\n\n  * {\n    box-sizing: border-box;\n    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);\n  }\n"])),(function(e){var t=e.theme;return"\n    -webkit-font-smoothing: "+t.typography.smoothing+";\n    "+(t.typography.optimizeSpeed?"text-rendering: optimizeSpeed !important":"")+";\n  "}),(function(e){var t=e.theme;return mediaCSS({fontFamily:t.typography.fontFamily,fontSize:t.typography.fontSize,lineHeight:t.typography.lineHeight,fontWeight:t.typography.fontWeightRegular,color:t.colors.text.primary,fontSmoothing:t.typography.smoothing})}));export var ApiContentWrap=styled.div(templateObject_7||(templateObject_7=__makeTemplateObject(["\n  position: relative;\n  overflow: hidden;\n  /* contain: layout; */\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  margin: 0 auto;\n\n  ","\n"],["\n  position: relative;\n  overflow: hidden;\n  /* contain: layout; */\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  margin: 0 auto;\n\n  ","\n"])),(function(e){var t,n=e.theme,i=e.layout;return css(templateObject_6||(templateObject_6=__makeTemplateObject(["\n    ",";\n\n    "," {\n      width: 100%;\n      padding: 0;\n    }\n  "],["\n    ",";\n\n    "," {\n      width: 100%;\n      padding: 0;\n    }\n  "])),mediaCSS({width:(t={},t[ZERO_BREAKPOINT]="auto",t.small="calc(100% - "+n.sidebar.width+")",t),maxWidth:n.layout[i||LayoutVariant.THREE_PANEL].maxWidth}),n.mediaQueries.print)}));export var BackgroundStub=styled.div(templateObject_9||(templateObject_9=__makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  ","\n"],["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  ","\n"])),(function(e){var t,n,i=e.theme;return css(templateObject_8||(templateObject_8=__makeTemplateObject(["\n    ","\n    "," {\n      display: none;\n    }\n  "],["\n    ","\n    "," {\n      display: none;\n    }\n  "])),mediaCSS({background:i.rightPanel.backgroundColor,display:(t={},t[ZERO_BREAKPOINT]="none",t[i.rightPanel.showAtBreakpoint]="initial",t),left:mediaMap(i.breakpoints,[i.rightPanel.width],(n={},n[ZERO_BREAKPOINT]=function(){return"0"},n[i.rightPanel.showAtBreakpoint]=function(e){return"calc(100% - "+e+")"},n))}),i.mediaQueries.print)}));export var BackgroundStubFix=styled.div(templateObject_11||(templateObject_11=__makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  ","\n"],["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  ","\n"])),(function(e){var t,n,i=e.theme;return css(templateObject_10||(templateObject_10=__makeTemplateObject(["\n    ","\n    "," {\n      display: none;\n    }\n  "],["\n    ","\n    "," {\n      display: none;\n    }\n  "])),mediaCSS({background:i.rightPanel.backgroundColor,display:(t={},t[ZERO_BREAKPOINT]="none",t[i.rightPanel.showAtBreakpoint]="initial",t),width:mediaMap(i.breakpoints,[i.sidebar.width,i.layout["three-panel"].maxWidth],(n={},n[ZERO_BREAKPOINT]=function(){return"0"},n[i.rightPanel.showAtBreakpoint]=function(e,t){return"calc((100% - min(100% - "+e+" - "+i.components.layoutControls.width+", "+t+") - "+e+" + "+i.components.layoutControls.width+")/2 + 2px)"},n))}),i.mediaQueries.print)}));export var NextSectionButtonWrap=styled.div(templateObject_13||(templateObject_13=__makeTemplateObject(["\n  padding: ",";\n  align-self: flex-start;\n  text-align: right;\n\n  display: flex;\n  flex-direction: row;\n\n  ","\n"],["\n  padding: ",";\n  align-self: flex-start;\n  text-align: right;\n\n  display: flex;\n  flex-direction: row;\n\n  ","\n"])),(function(e){var t=e.theme;return 4*t.spacing.unit+"px "+5*t.spacing.unit+"px"}),(function(e){var t,n,i=e.theme,a=i.layout.showDarkRightPanel?i.spacing.sectionHorizontal:i.spacing.sectionHorizontal/2;return css(templateObject_12||(templateObject_12=__makeTemplateObject(["\n      ","\n    "],["\n      ","\n    "])),mediaCSS({width:mediaMap(i.breakpoints,[i.rightPanel.width],(t={},t[ZERO_BREAKPOINT]=function(){return"100%"},t[i.rightPanel.showAtBreakpoint]=function(e){return"calc(100% - "+e+")"},t)),paddingLeft:i.spacing.sectionHorizontal,paddingRight:(n={},n[ZERO_BREAKPOINT]=i.spacing.sectionHorizontal,n[i.rightPanel.showAtBreakpoint]=a,n)}))}));var templateObject_1,templateObject_2,templateObject_3,templateObject_4,templateObject_5,templateObject_6,templateObject_7,templateObject_8,templateObject_9,templateObject_10,templateObject_11,templateObject_12,templateObject_13,templateObject_14,templateObject_15,templateObject_16,templateObject_17,templateObject_18,ChangeViewSvgColumn=styled((function(){return React.createElement("svg",{width:"15",height:"20",viewBox:"0 0 15 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},React.createElement("line",{x1:"13.2858",y1:"5.28564",x2:"1.00005",y2:"5.28564",stroke:"#9AA6B1",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}),React.createElement("line",{x1:"13.2858",y1:"1",x2:"1.00005",y2:"0.999998",stroke:"#9AA6B1",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}),React.createElement("rect",{x:"14.2858",y:"20",width:"14.2857",height:"11.4286",rx:"1",transform:"rotate(-180 14.2858 20)",fill:"#9AA6B1"}))}))(templateObject_14||(templateObject_14=__makeTemplateObject(["\n  position: absolute;\n"],["\n  position: absolute;\n"]))),ChangeViewSvgRow=styled((function(){return React.createElement("svg",{width:"20",height:"16",viewBox:"0 0 20 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},React.createElement("line",{x1:"1",y1:"4",x2:"8",y2:"4",stroke:"#9AA6B1",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}),React.createElement("line",{x1:"1",y1:"8",x2:"8",y2:"8",stroke:"#9AA6B1",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}),React.createElement("line",{x1:"1",y1:"12",x2:"8",y2:"12",stroke:"#9AA6B1",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}),React.createElement("rect",{x:"11",width:"9",height:"16",rx:"1",fill:"#9AA6B1"}))}))(templateObject_15||(templateObject_15=__makeTemplateObject(["\n  position: absolute;\n"],["\n  position: absolute;\n"]))),StyledChangeViewButton=styled.a(templateObject_16||(templateObject_16=__makeTemplateObject(["\n  display: flex;\n  position: relative;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  z-index: 1;\n  /* Rectangle 201 */\n  width: ",";\n  height: ",";\n  background: #e5e8eb;\n  border-radius: ",";\n"],["\n  display: flex;\n  position: relative;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  z-index: 1;\n  /* Rectangle 201 */\n  width: ",";\n  height: ",";\n  background: #e5e8eb;\n  border-radius: ",";\n"])),(function(e){return e.theme.components.layoutControls.width}),(function(e){return e.theme.components.layoutControls.height}),(function(e){return e.theme.shape.borderRadius}));export var ChangeViewButton=function(e){var t=e.store,n=e.isVisible;return t.options.showChangeLayoutButton&&n?React.createElement(Tooltip,{tip:"Change layout",placement:"left"},React.createElement(StyledChangeViewButton,{onClick:function(){t.toggleLayout(t.layout===LayoutVariant.STACKED?LayoutVariant.THREE_PANEL:LayoutVariant.STACKED)}},t.layout===LayoutVariant.STACKED?React.createElement(ChangeViewSvgRow,null):React.createElement(ChangeViewSvgColumn,null))):null};export var ControlsWrap=styled.div(templateObject_18||(templateObject_18=__makeTemplateObject(["\n  position: sticky;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  top: ",";\n  right: 24px;\n  height: ",";\n  z-index: 1;\n  ","\n"],["\n  position: sticky;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  top: ",";\n  right: 24px;\n  height: ",";\n  z-index: 1;\n  ","\n"])),(function(e){return e.theme.components.layoutControls.top}),(function(e){var t=e.theme;return"calc("+t.components.layoutControls.height+" * 2 + "+2*t.spacing.unit+"px)"}),(function(e){var t,n=e.theme;return css(templateObject_17||(templateObject_17=__makeTemplateObject(["\n    ","\n    "," {\n      display: none;\n    }\n  "],["\n    ","\n    "," {\n      display: none;\n    }\n  "])),mediaCSS({display:(t={},t[ZERO_BREAKPOINT]="none",t[n.rightPanel.showAtBreakpoint]="flex",t)}),n.mediaQueries.print)}));
+import{__makeTemplateObject}from"tslib";import*as React from"react";import{observer}from"mobx-react";import{styled,mediaCSS,mediaMap,ZERO_BREAKPOINT,css,Tooltip}from"../redoc-lib";import{LayoutVariant}from"../services";var ShowRightPanelSVG=styled((function(){return React.createElement("svg",{width:"15",height:"10",viewBox:"0 0 15 10",fill:"none",xmlns:"http://www.w3.org/2000/svg"},React.createElement("path",{d:"M2.41421 5L5.70711 8.29289C6.09763 8.68342 6.09763 9.31658 5.7071 9.70711C5.31658 10.0976 4.68342 10.0976 4.29289 9.70711L0.292892 5.70711C-0.0976321 5.31658 -0.0976319 4.68342 0.292893 4.29289L4.29289 0.292894C4.68342 -0.0976302 5.31658 -0.09763 5.70711 0.292894C6.09763 0.683418 6.09763 1.31658 5.70711 1.70711L2.41421 5Z",fill:"#9AA6B1"}),React.createElement("path",{d:"M2 5C2 4.44772 2.44771 4 3 4L11 4C11.5523 4 12 4.44772 12 5C12 5.55229 11.5523 6 11 6L3 6C2.44771 6 2 5.55228 2 5Z",fill:"#9AA6B1"}),React.createElement("rect",{x:"15",y:"10",width:"2",height:"10",rx:"1",transform:"rotate(-180 15 10)",fill:"#9AA6B1"}))}))(templateObject_1||(templateObject_1=__makeTemplateObject(["\n  position: absolute;\n"],["\n  position: absolute;\n"]))),HideRightPanelSVG=styled((function(){return React.createElement("svg",{width:"15",height:"10",viewBox:"0 0 15 10",fill:"none",xmlns:"http://www.w3.org/2000/svg"},React.createElement("path",{d:"M12.5858 5L9.29289 1.70711C8.90237 1.31658 8.90237 0.683417 9.29289 0.292893C9.68342 -0.097631 10.3166 -0.0976309 10.7071 0.292893L14.7071 4.29289C15.0976 4.68342 15.0976 5.31658 14.7071 5.70711L10.7071 9.70711C10.3166 10.0976 9.68342 10.0976 9.29289 9.70711C8.90237 9.31658 8.90237 8.68342 9.29289 8.29289L12.5858 5Z",fill:"#9AA6B1"}),React.createElement("path",{d:"M13 5C13 5.55229 12.5523 6 12 6L4 6C3.44772 6 3 5.55228 3 5C3 4.44771 3.44772 4 4 4L12 4C12.5523 4 13 4.44772 13 5Z",fill:"#9AA6B1"}),React.createElement("rect",{width:"2",height:"10",rx:"1",fill:"#9AA6B1"}))}))(templateObject_2||(templateObject_2=__makeTemplateObject(["\n  position: absolute;\n"],["\n  position: absolute;\n"])));export var StyledToggleRightPanelButton=styled.a(templateObject_3||(templateObject_3=__makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: '#f00';\n  cursor: pointer;\n  z-index: 1;\n  /* Rectangle 201 */\n  width: ",";\n  height: ",";\n  background: #e5e8eb;\n  border-radius: ",";\n"],["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: '#f00';\n  cursor: pointer;\n  z-index: 1;\n  /* Rectangle 201 */\n  width: ",";\n  height: ",";\n  background: #e5e8eb;\n  border-radius: ",";\n"])),(function(e){return e.theme.components.layoutControls.width}),(function(e){return e.theme.components.layoutControls.height}),(function(e){return e.theme.shape.borderRadius}));export var ToggleRightPanelButton=observer((function(e){var t=e.store,n=e.isVisible;return t.options.showRightPanelToggle&&n?React.createElement(Tooltip,{tip:t.showRightPanel?"Hide samples":"Show samples",placement:"left"},React.createElement(StyledToggleRightPanelButton,{onClick:function(){t.toggleRightPanel()}},t.showRightPanel?React.createElement(HideRightPanelSVG,null):React.createElement(ShowRightPanelSVG,null))):null}));var IntArrowIcon=function(e){return React.createElement("svg",{className:e.className,version:"1.1",viewBox:"0 0 24 24",x:"0",xmlns:"http://www.w3.org/2000/svg",y:"0","aria-hidden":"true"},React.createElement("polygon",{points:"17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 "}))};export var ArrowIcon=styled(IntArrowIcon)(templateObject_4||(templateObject_4=__makeTemplateObject(["\n  width: 18px;\n  height: 18px;\n  transform: ",";\n\n  ","\n"],["\n  width: 18px;\n  height: 18px;\n  transform: ",";\n\n  ","\n"])),(function(e){return"rotate("+("left"===e.direction?"90deg":"-90deg")+")"}),(function(e){var t,n=e.theme;return mediaCSS({fill:null===(t=n.rightPanel)||void 0===t?void 0:t.textColor})}));export var RedocWrap=styled.div(templateObject_5||(templateObject_5=__makeTemplateObject(["\n  display: flex;\n  position: relative;\n  text-align: left;\n  tap-highlight-color: rgba(0, 0, 0, 0);\n  text-size-adjust: 100%;\n  ",";\n\n  ","\n\n  * {\n    box-sizing: border-box;\n    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);\n  }\n"],["\n  display: flex;\n  position: relative;\n  text-align: left;\n  tap-highlight-color: rgba(0, 0, 0, 0);\n  text-size-adjust: 100%;\n  ",";\n\n  ","\n\n  * {\n    box-sizing: border-box;\n    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);\n  }\n"])),(function(e){var t=e.theme;return"\n    -webkit-font-smoothing: "+t.typography.smoothing+";\n    "+(t.typography.optimizeSpeed?"text-rendering: optimizeSpeed !important":"")+";\n  "}),(function(e){var t=e.theme;return mediaCSS({fontFamily:t.typography.fontFamily,fontSize:t.typography.fontSize,lineHeight:t.typography.lineHeight,fontWeight:t.typography.fontWeightRegular,color:t.colors.text.primary,fontSmoothing:t.typography.smoothing})}));export var ApiContentWrap=styled.div(templateObject_7||(templateObject_7=__makeTemplateObject(["\n  position: relative;\n  overflow: hidden;\n  /* contain: layout; */\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  margin: 0 auto;\n\n  ","\n"],["\n  position: relative;\n  overflow: hidden;\n  /* contain: layout; */\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  margin: 0 auto;\n\n  ","\n"])),(function(e){var t,n=e.theme,a=e.layout;return css(templateObject_6||(templateObject_6=__makeTemplateObject(["\n    ",";\n\n    "," {\n      width: 100%;\n      padding: 0;\n    }\n  "],["\n    ",";\n\n    "," {\n      width: 100%;\n      padding: 0;\n    }\n  "])),mediaCSS({width:(t={},t[ZERO_BREAKPOINT]="auto",t.small="calc(100% - "+n.sidebar.width+")",t),maxWidth:n.layout[a||LayoutVariant.THREE_PANEL].maxWidth}),n.mediaQueries.print)}));export var BackgroundStub=styled.div(templateObject_9||(templateObject_9=__makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  ","\n"],["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  ","\n"])),(function(e){var t,n,a=e.theme;return css(templateObject_8||(templateObject_8=__makeTemplateObject(["\n    ","\n    "," {\n      display: none;\n    }\n  "],["\n    ","\n    "," {\n      display: none;\n    }\n  "])),mediaCSS({background:a.rightPanel.backgroundColor,display:(t={},t[ZERO_BREAKPOINT]="none",t[a.rightPanel.showAtBreakpoint]="initial",t),left:mediaMap(a.breakpoints,[a.rightPanel.width],(n={},n[ZERO_BREAKPOINT]=function(){return"0"},n[a.rightPanel.showAtBreakpoint]=function(e){return"calc(100% - "+e+")"},n))}),a.mediaQueries.print)}));export var BackgroundStubFix=styled.div(templateObject_11||(templateObject_11=__makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  ","\n"],["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  ","\n"])),(function(e){var t,n,a=e.theme;return css(templateObject_10||(templateObject_10=__makeTemplateObject(["\n    ","\n    "," {\n      display: none;\n    }\n  "],["\n    ","\n    "," {\n      display: none;\n    }\n  "])),mediaCSS({background:a.rightPanel.backgroundColor,display:(t={},t[ZERO_BREAKPOINT]="none",t[a.rightPanel.showAtBreakpoint]="initial",t),width:mediaMap(a.breakpoints,[a.sidebar.width,a.layout["three-panel"].maxWidth],(n={},n[ZERO_BREAKPOINT]=function(){return"0"},n[a.rightPanel.showAtBreakpoint]=function(e,t){return"calc((100% - min(100% - "+e+" - "+a.components.layoutControls.width+", "+t+") - "+e+" + "+a.components.layoutControls.width+")/2 + 2px)"},n))}),a.mediaQueries.print)}));export var NextSectionButtonWrap=styled.div(templateObject_13||(templateObject_13=__makeTemplateObject(["\n  padding: ",";\n  align-self: flex-start;\n  text-align: right;\n\n  display: flex;\n  flex-direction: row;\n\n  ","\n"],["\n  padding: ",";\n  align-self: flex-start;\n  text-align: right;\n\n  display: flex;\n  flex-direction: row;\n\n  ","\n"])),(function(e){var t=e.theme;return 4*t.spacing.unit+"px "+5*t.spacing.unit+"px"}),(function(e){var t,n,a=e.theme,i=a.layout.showDarkRightPanel?a.spacing.sectionHorizontal:a.spacing.sectionHorizontal/2;return css(templateObject_12||(templateObject_12=__makeTemplateObject(["\n      ","\n    "],["\n      ","\n    "])),mediaCSS({width:mediaMap(a.breakpoints,[a.rightPanel.width],(t={},t[ZERO_BREAKPOINT]=function(){return"100%"},t[a.rightPanel.showAtBreakpoint]=function(e){return"calc(100% - "+e+")"},t)),paddingLeft:a.spacing.sectionHorizontal,paddingRight:(n={},n[ZERO_BREAKPOINT]=a.spacing.sectionHorizontal,n[a.rightPanel.showAtBreakpoint]=i,n)}))}));var templateObject_1,templateObject_2,templateObject_3,templateObject_4,templateObject_5,templateObject_6,templateObject_7,templateObject_8,templateObject_9,templateObject_10,templateObject_11,templateObject_12,templateObject_13,templateObject_14,templateObject_15,templateObject_16,templateObject_17,templateObject_18,ChangeViewSvgColumn=styled((function(){return React.createElement("svg",{width:"15",height:"20",viewBox:"0 0 15 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},React.createElement("line",{x1:"13.2858",y1:"5.28564",x2:"1.00005",y2:"5.28564",stroke:"#9AA6B1",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}),React.createElement("line",{x1:"13.2858",y1:"1",x2:"1.00005",y2:"0.999998",stroke:"#9AA6B1",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}),React.createElement("rect",{x:"14.2858",y:"20",width:"14.2857",height:"11.4286",rx:"1",transform:"rotate(-180 14.2858 20)",fill:"#9AA6B1"}))}))(templateObject_14||(templateObject_14=__makeTemplateObject(["\n  position: absolute;\n"],["\n  position: absolute;\n"]))),ChangeViewSvgRow=styled((function(){return React.createElement("svg",{width:"20",height:"16",viewBox:"0 0 20 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},React.createElement("line",{x1:"1",y1:"4",x2:"8",y2:"4",stroke:"#9AA6B1",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}),React.createElement("line",{x1:"1",y1:"8",x2:"8",y2:"8",stroke:"#9AA6B1",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}),React.createElement("line",{x1:"1",y1:"12",x2:"8",y2:"12",stroke:"#9AA6B1",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}),React.createElement("rect",{x:"11",width:"9",height:"16",rx:"1",fill:"#9AA6B1"}))}))(templateObject_15||(templateObject_15=__makeTemplateObject(["\n  position: absolute;\n"],["\n  position: absolute;\n"]))),StyledChangeViewButton=styled.a(templateObject_16||(templateObject_16=__makeTemplateObject(["\n  display: flex;\n  position: relative;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  z-index: 1;\n  /* Rectangle 201 */\n  width: ",";\n  height: ",";\n  background: #e5e8eb;\n  border-radius: ",";\n"],["\n  display: flex;\n  position: relative;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  z-index: 1;\n  /* Rectangle 201 */\n  width: ",";\n  height: ",";\n  background: #e5e8eb;\n  border-radius: ",";\n"])),(function(e){return e.theme.components.layoutControls.width}),(function(e){return e.theme.components.layoutControls.height}),(function(e){return e.theme.shape.borderRadius}));export var ChangeViewButton=function(e){var t=e.store,n=e.isVisible;return t.options.showChangeLayoutButton&&n?React.createElement(Tooltip,{tip:"Change layout",placement:"left"},React.createElement(StyledChangeViewButton,{onClick:function(){t.toggleLayout(t.layout===LayoutVariant.STACKED?LayoutVariant.THREE_PANEL:LayoutVariant.STACKED)}},t.layout===LayoutVariant.STACKED?React.createElement(ChangeViewSvgRow,null):React.createElement(ChangeViewSvgColumn,null))):null};export var ControlsWrap=styled.span(templateObject_18||(templateObject_18=__makeTemplateObject(["\n  position: sticky;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  top: ",";\n  right: 24px;\n  height: ",";\n  z-index: 1;\n  ","\n"],["\n  position: sticky;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  top: ",";\n  right: 24px;\n  height: ",";\n  z-index: 1;\n  ","\n"])),(function(e){return e.theme.components.layoutControls.top}),(function(e){var t=e.theme;return"calc("+t.components.layoutControls.height+" * 2 + "+2*t.spacing.unit+"px)"}),(function(e){var t,n=e.theme;return css(templateObject_17||(templateObject_17=__makeTemplateObject(["\n    ","\n    "," {\n      display: none;\n    }\n  "],["\n    ","\n    "," {\n      display: none;\n    }\n  "])),mediaCSS({display:(t={},t[ZERO_BREAKPOINT]="none",t[n.rightPanel.showAtBreakpoint]="flex",t)}),n.mediaQueries.print)}));
 //# sourceMappingURL=styled.elements.js.map

package/lib-esm/index.d.ts

@@ -2,5 +2,6 @@ export * from './components/index';
 export * from './services/index';
 export * from './redoc-lib/index';
 export * from './models/index';
-export type { setSecurityDetails, setSecurityDetailsVariants, setParameterValue, SecurityDetails, } from './utils';
+export { setSecurityDetails, setSecurityDetailsVariants, setParameterValue } from './utils';
+export type { SecurityDetails } from './utils';
 export type { OAuth2 } from './services/OAuth2';

package/lib-esm/index.js

@@ -1,2 +1,2 @@
-export*from"./components/index";export*from"./services/index";export*from"./redoc-lib/index";export*from"./models/index";
+export*from"./components/index";export*from"./services/index";export*from"./redoc-lib/index";export*from"./models/index";export{setSecurityDetails,setSecurityDetailsVariants,setParameterValue}from"./utils";
 //# sourceMappingURL=index.js.map

package/lib-esm/redoc-lib/src/common-elements/index.d.ts

@@ -4,7 +4,6 @@ export * from './linkify';
 export * from './shelfs';
 export * from './fields-layout';
 export * from './schema';
-export * from './dropdown';
 export * from './mixins';
 export * from './samples';
 export * from './perfect-scrollbar';

package/lib-esm/redoc-lib/src/common-elements/index.js

@@ -1,2 +1,2 @@
-export*from"./panels";export*from"./headers";export*from"./linkify";export*from"./shelfs";export*from"./fields-layout";export*from"./schema";export*from"./dropdown";export*from"./mixins";export*from"./samples";export*from"./perfect-scrollbar";export*from"./icons";export*from"./Tooltip";
+export*from"./panels";export*from"./headers";export*from"./linkify";export*from"./shelfs";export*from"./fields-layout";export*from"./schema";export*from"./mixins";export*from"./samples";export*from"./perfect-scrollbar";export*from"./icons";export*from"./Tooltip";
 //# sourceMappingURL=index.js.map

package/lib-esm/redoc-lib/src/components/CallbackSamples/CallbackReqSamples.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { DropdownProps } from '../../common-elements';
 import { OperationModel } from '../../services/models';
+import type { DropdownProps } from '../../../../components/common/Dropdown';
 export interface PayloadSampleProps {
     callback: OperationModel;
     renderDropdown: (props: DropdownProps) => JSX.Element;

package/lib-esm/redoc-lib/src/components/CallbackSamples/CallbackSamples.d.ts

@@ -5,7 +5,7 @@ export interface CallbackSamplesProps {
     callbacks: CallbackModel[];
 }
 export declare class CallbackSamples extends React.Component<CallbackSamplesProps> {
-    static contextType: React.Context<RedocNormalizedOptions>;
+    static contextType: React.Context<import("../../../..").RedocProNormalizedOptions>;
     context: RedocNormalizedOptions;
     private renderDropdown;
     render(): JSX.Element | null;

package/lib-esm/redoc-lib/src/components/CallbackSamples/CallbackSamples.js

@@ -1,2 +1,2 @@
-import{__assign,__decorate,__extends,__makeTemplateObject}from"tslib";import{observer}from"mobx-react";import*as React from"react";import{CodePanel}from"../../../../components/Panel";import{MimeLabel}from"../../../../components/shared";import styled,{mediaCSS}from"../../styled-components";import{OptionsContext}from"../OptionsProvider";import{GenericChildrenSwitcher}from"../GenericChildrenSwitcher/GenericChildrenSwitcher";import{DropdownOrLabel}from"../DropdownOrLabel/DropdownOrLabel";import{CallbackPayloadSample}from"./CallbackReqSamples";import{Dropdown}from"../../../src/common-elements/dropdown";import{DropdownWrapper}from"../../..";var templateObject_1,CallbackSamples=function(e){function r(){var r=null!==e&&e.apply(this,arguments)||this;return Object.defineProperty(r,"renderDropdown",{enumerable:!0,configurable:!0,writable:!0,value:function(e){return React.createElement(DropdownWrapper,null,React.createElement(DropdownOrLabel,__assign({Label:MimeLabel,Dropdown:Dropdown,fullWidth:!0,variant:"dark"},e)))}}),r}return __extends(r,e),Object.defineProperty(r.prototype,"render",{enumerable:!1,configurable:!0,writable:!0,value:function(){var e=this,r=this.props.callbacks;if(!r||0===r.length)return null;var t=r.map((function(e){return e.operations.map((function(e){return e}))})).reduce((function(e,r){return e.concat(r)}),[]);if(!t.some((function(e){return e.hasSamples})))return null;var n=t.map((function(e,r){return{value:e.httpVerb.toUpperCase()+": "+e.name,idx:r}}));return React.createElement(CodePanel,{header:"Callback payload samples"},React.createElement(GenericChildrenSwitcher,{items:t,renderDropdown:this.renderDropdown,options:n},(function(r){return React.createElement(CallbackPayloadSample,{key:"callbackPayloadSample",callback:r,renderDropdown:e.renderDropdown})})))}}),Object.defineProperty(r,"contextType",{enumerable:!0,configurable:!0,writable:!0,value:OptionsContext}),r=__decorate([observer],r)}(React.Component);export{CallbackSamples};export var SamplesWrapper=styled.div(templateObject_1||(templateObject_1=__makeTemplateObject(["\n  ","\n  padding: ","px;\n"],["\n  ","\n  padding: ","px;\n"])),(function(e){var r=e.theme;return mediaCSS({background:r.codeBlock.backgroundColor})}),(function(e){return 4*e.theme.spacing.unit}));
+import{__assign,__decorate,__extends,__makeTemplateObject}from"tslib";import{observer}from"mobx-react";import*as React from"react";import{CodePanel}from"../../../../components/Panel";import{MimeLabel}from"../../../../components/shared";import styled,{mediaCSS}from"../../styled-components";import{OptionsContext}from"../OptionsProvider";import{GenericChildrenSwitcher}from"../GenericChildrenSwitcher/GenericChildrenSwitcher";import{DropdownOrLabel}from"../DropdownOrLabel/DropdownOrLabel";import{CallbackPayloadSample}from"./CallbackReqSamples";import{Dropdown}from"../../../../components/common/Dropdown";import{DropdownWrapper}from"../../..";var templateObject_1,CallbackSamples=function(e){function r(){var r=null!==e&&e.apply(this,arguments)||this;return Object.defineProperty(r,"renderDropdown",{enumerable:!0,configurable:!0,writable:!0,value:function(e){return React.createElement(DropdownWrapper,null,React.createElement(DropdownOrLabel,__assign({Label:MimeLabel,Dropdown:Dropdown,fullWidth:!0,variant:"dark"},e)))}}),r}return __extends(r,e),Object.defineProperty(r.prototype,"render",{enumerable:!1,configurable:!0,writable:!0,value:function(){var e=this,r=this.props.callbacks;if(!r||0===r.length)return null;var n=r.map((function(e){return e.operations.map((function(e){return e}))})).reduce((function(e,r){return e.concat(r)}),[]);if(!n.some((function(e){return e.hasSamples})))return null;var t=n.map((function(e,r){return{value:e.httpVerb.toUpperCase()+": "+e.name,idx:r}}));return React.createElement(CodePanel,{header:"Callback payload samples"},React.createElement(GenericChildrenSwitcher,{items:n,renderDropdown:this.renderDropdown,options:t},(function(r){return React.createElement(CallbackPayloadSample,{key:"callbackPayloadSample",callback:r,renderDropdown:e.renderDropdown})})))}}),Object.defineProperty(r,"contextType",{enumerable:!0,configurable:!0,writable:!0,value:OptionsContext}),r=__decorate([observer],r)}(React.Component);export{CallbackSamples};export var SamplesWrapper=styled.div(templateObject_1||(templateObject_1=__makeTemplateObject(["\n  ","\n  padding: ","px;\n"],["\n  ","\n  padding: ","px;\n"])),(function(e){var r=e.theme;return mediaCSS({background:r.codeBlock.backgroundColor})}),(function(e){return 4*e.theme.spacing.unit}));
 //# sourceMappingURL=CallbackSamples.js.map

package/lib-esm/redoc-lib/src/components/DropdownOrLabel/DropdownOrLabel.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DropdownProps } from '../../common-elements/dropdown';
+import { DropdownProps } from '../../../../components/common/Dropdown';
 export interface DropdownOrLabelProps extends DropdownProps {
     Label?: React.ComponentClass;
     Dropdown?: React.ComponentClass;

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

@@ -1,2 +1,2 @@
-import{__assign}from"tslib";import*as React from"react";import{MimeLabel,SimpleDropdown}from"../../common-elements/dropdown";export function DropdownOrLabel(e){var o=e.Label,r=void 0===o?MimeLabel:o,t=e.Dropdown,n=void 0===t?SimpleDropdown:t;return 1===e.options.length?React.createElement(r,null,e.options[0].value):React.createElement(n,__assign({},e,{searchable:!1}))}
+import{__assign,__makeTemplateObject}from"tslib";import*as React from"react";import styled from"../../styled-components";import{SimpleDropdown}from"../../../../components/common/Dropdown";var templateObject_1,MimeLabel=styled.span(templateObject_1||(templateObject_1=__makeTemplateObject(["\n  margin-left: 4px;\n  font-size: 14px;\n  text-transform: none;\n  font-weight: 400;\n  color: ",";\n"],["\n  margin-left: 4px;\n  font-size: 14px;\n  text-transform: none;\n  font-weight: 400;\n  color: ",";\n"])),(function(e){return e.theme.colors.text.primary}));export function DropdownOrLabel(e){var t=e.Label,n=void 0===t?MimeLabel:t,o=e.Dropdown,r=void 0===o?SimpleDropdown:o;return 1===e.options.length?React.createElement(n,null,e.options[0].value):React.createElement(r,__assign({},e))}
 //# sourceMappingURL=DropdownOrLabel.js.map

package/lib-esm/redoc-lib/src/components/Fields/EnumValues.d.ts

@@ -11,7 +11,7 @@ export interface EnumValuesState {
 export declare class EnumValues extends React.PureComponent<EnumValuesProps, EnumValuesState> {
     constructor(props: EnumValuesProps);
     state: EnumValuesState;
-    static contextType: React.Context<import("../../services").RedocNormalizedOptions>;
+    static contextType: React.Context<import("../../../..").RedocProNormalizedOptions>;
     private toggle;
     render(): JSX.Element | null;
 }

package/lib-esm/redoc-lib/src/components/Fields/FieldDetails.d.ts

@@ -6,7 +6,7 @@ export declare class FieldDetails extends React.PureComponent<FieldProps, {
     state: {
         patternShown: boolean;
     };
-    static contextType: React.Context<import("../../services").RedocNormalizedOptions>;
+    static contextType: React.Context<import("../../../..").RedocProNormalizedOptions>;
     togglePattern: () => void;
     render(): JSX.Element;
 }

package/lib-esm/redoc-lib/src/components/GenericChildrenSwitcher/GenericChildrenSwitcher.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DropdownProps, DropdownOption } from '../../common-elements/dropdown';
+import { DropdownProps, DropdownOption } from '../../../../components/common/Dropdown';
 export interface GenericChildrenSwitcherProps<T> {
     items?: T[];
     options: DropdownOption[];

package/lib-esm/redoc-lib/src/components/GenericChildrenSwitcher/GenericChildrenSwitcher.js

@@ -1,2 +1,2 @@
-import{__decorate,__extends}from"tslib";import{observer}from"mobx-react";import*as React from"react";import{DropdownLabel,DropdownWrapper}from"../PayloadSamples/styled.elements";var GenericChildrenSwitcher=function(e){function t(t){var r=e.call(this,t)||this;return Object.defineProperty(r,"switchItem",{enumerable:!0,configurable:!0,writable:!0,value:function(e){var t=e.idx;r.props.items&&r.setState({activeItemIdx:t})}}),r.state={activeItemIdx:0},r}return __extends(t,e),Object.defineProperty(t.prototype,"render",{enumerable:!1,configurable:!0,writable:!0,value:function(){var e=this.props,t=e.items,r=e.options,a=e.renderDropdown,n=e.label,o=e.children;if(!t||!t.length)return null;return React.createElement(React.Fragment,null,React.createElement((function(e){var t=e.children;return n?React.createElement(DropdownWrapper,null,React.createElement(DropdownLabel,null,n),t):t}),null,a({value:r[this.state.activeItemIdx].value,options:r,onChange:this.switchItem,ariaLabel:n||"Callback"})),o(t[this.state.activeItemIdx]))}}),t=__decorate([observer],t)}(React.Component);export{GenericChildrenSwitcher};
+import{__decorate,__extends}from"tslib";import{observer}from"mobx-react";import*as React from"react";import{DropdownLabel,DropdownWrapper}from"../PayloadSamples/styled.elements";var GenericChildrenSwitcher=function(e){function t(t){var r=e.call(this,t)||this;return Object.defineProperty(r,"switchItem",{enumerable:!0,configurable:!0,writable:!0,value:function(e){var t=e.idx;r.props.items&&t&&r.setState({activeItemIdx:t})}}),r.state={activeItemIdx:0},r}return __extends(t,e),Object.defineProperty(t.prototype,"render",{enumerable:!1,configurable:!0,writable:!0,value:function(){var e=this.props,t=e.items,r=e.options,a=e.renderDropdown,n=e.label,o=e.children;if(!t||!t.length)return null;return React.createElement(React.Fragment,null,React.createElement((function(e){var t=e.children;return n?React.createElement(DropdownWrapper,null,React.createElement(DropdownLabel,null,n),t):t}),null,a({value:r[this.state.activeItemIdx].value,options:r,onChange:this.switchItem,ariaLabel:n||"Callback"})),o(t[this.state.activeItemIdx]))}}),t=__decorate([observer],t)}(React.Component);export{GenericChildrenSwitcher};
 //# sourceMappingURL=GenericChildrenSwitcher.js.map

package/lib-esm/redoc-lib/src/components/Markdown/Markdown.js

@@ -1,2 +1,2 @@
-import{__assign,__rest}from"tslib";import*as React from"react";import{MarkdownRenderer}from"../../services";import{SanitizedMarkdownHTML}from"./SanitizedMdBlock";export var Markdown=function(r){var e=r.source,t=__rest(r,["source"]),n=new MarkdownRenderer;return React.createElement(SanitizedMarkdownHTML,__assign({},t,{html:n.renderMd(e)}))};
+import{__assign,__rest}from"tslib";import React,{useContext}from"react";import{MarkdownRenderer}from"../../services";import{SanitizedMarkdownHTML}from"./SanitizedMdBlock";import{OptionsContext}from"../OptionsProvider";export var Markdown=function(r){var e=r.source,t=__rest(r,["source"]),o=useContext(OptionsContext),n=new MarkdownRenderer(o);return React.createElement(SanitizedMarkdownHTML,__assign({},t,{html:n.renderMd(e)}))};
 //# sourceMappingURL=Markdown.js.map

package/lib-esm/redoc-lib/src/components/MediaTypeSwitch/MediaTypesSwitch.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { DropdownProps } from '../../common-elements/dropdown';
+import { DropdownProps } from '../../../../components/common/Dropdown';
 import { MediaContentModel, MediaTypeModel, SchemaModel } from '../../services/models';
 export interface MediaTypeChildProps {
     schema: SchemaModel;