@redocly/openapi-docs 0.74.2-pingfed.3 → 0.81.2-rc.2

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

@@ -0,0 +1,2 @@
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{memo,useMemo}from"react";import{ClearButton}from"../ClearButton";import{normalizeText}from"../../../utils";import{Arrow}from"./styled";function SelectComponent({options:e,onChange:o,handleClear:l,clearable:t,placeholder:r,value:n="",className:a}){var s;const i=useMemo((()=>e.map((({idx:e,value:o,title:l},t)=>{const r=normalizeText(o);return _jsx("option",{value:r,className:"dropdown-option",children:l||r},e||r+t)}))),[e]),d=normalizeText(n),m=(null===(s=e.find((e=>e.value===n)))||void 0===s?void 0:s.title)||d;return _jsxs("div",{className:a+" dropdown-wrapper",children:[_jsx(Arrow,{}),t&&(null==d?void 0:d.length)>0&&_jsx(ClearButton,{handleClear:l}),_jsxs("select",{onChange:l=>{const{selectedIndex:t}=l.target;o(e[r||!n?t-1:t])},value:d,className:"dropdown-select","aria-label":"dropdown select",children:[r&&_jsx("option",{disabled:!0,hidden:!0,value:r,children:r}),!d&&!r&&_jsx("option",{disabled:!0}),i]}),_jsx("label",{children:m})]})}export const Select=memo(SelectComponent);
+//# sourceMappingURL=Select.js.map

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

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

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

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

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

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import type { SelectProps } from './types';
+export declare const Select: import("styled-components").StyledComponent<import("react").NamedExoticComponent<SelectProps>, any, SelectProps & {
+    fullWidth?: boolean | undefined;
+    variant?: "dark" | "light" | undefined;
+}, never>;
+export declare const SimpleSelect: import("styled-components").StyledComponent<import("react").NamedExoticComponent<SelectProps>, any, SelectProps & {
+    fullWidth?: boolean | undefined;
+    variant?: "dark" | "light" | undefined;
+}, never>;
+export declare const CollapsingSelect: import("styled-components").StyledComponent<import("react").NamedExoticComponent<SelectProps>, any, SelectProps & {
+    fullWidth?: boolean | undefined;
+    variant?: "dark" | "light" | undefined;
+} & {
+    active?: boolean | undefined;
+}, never>;
+export declare const Arrow: import("styled-components").StyledComponent<(props: import("@redocly/theme/lib/icons/types").IconProps) => import("react").JSX.Element, any, {
+    'data-component-name': string;
+} & {
+    color?: string | undefined;
+    size?: string | undefined;
+    className?: string | undefined;
+} & import("react").SVGProps<SVGSVGElement>, "data-component-name">;

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

@@ -0,0 +1,111 @@
+import styled,{css}from"styled-components";import{ChevronDownIcon}from"@redocly/theme";import{Select as SelectComponent}from"./Select";const darkSelectStyle=css`
+  background-color: var(--panel-samples-dropdown-bg-color);
+  border: var(--panel-samples-dropdown-border);
+  color: var(--panel-samples-dropdown-color);
+
+  &,
+  &:hover,
+  &:focus-within {
+    box-shadow: none;
+  }
+`;export const Select=styled(SelectComponent)`
+  box-sizing: border-box;
+  outline: none;
+  display: inline-block;
+  vertical-align: bottom;
+  position: relative;
+  width: ${({fullWidth:o})=>o?"100%":"auto"};
+  cursor: pointer;
+  text-transform: none;
+
+  label {
+    box-sizing: border-box;
+    min-width: 90px;
+    height: 36px;
+    outline: none;
+    display: inline-block;
+    color: var(--docs-dropdown-text-color);
+    border-radius: var(--border-radius-md);
+    padding: var(--docs-dropdown-padding);
+    vertical-align: bottom;
+    width: ${({fullWidth:o})=>o?"100%":"auto"};
+    text-transform: none;
+    line-height: inherit;
+    font-size: var(--docs-dropdown-font-size);
+    font-family: inherit;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+
+    &,
+    &:hover,
+    &:focus-within {
+      box-shadow: none;
+    }
+
+    ${({variant:o})=>"dark"===o?darkSelectStyle:""};
+  }
+
+  .dropdown-select {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    border: none;
+    appearance: none;
+    cursor: pointer;
+
+    color: var(--text-color-secondary);
+    line-height: inherit;
+    font-size: var(--font-size-base);
+    font-family: inherit;
+    padding: var(--docs-dropdown-padding);
+    ${({variant:o})=>"dark"===o?darkSelectStyle:""};
+  }
+`;export const SimpleSelect=styled(Select)`
+  svg {
+    top: 60%;
+    transform: translateY(-60%);
+  }
+  label {
+    padding: 0 26px 0 4px;
+    background: transparent;
+    font-size: var(--font-size-base);
+    font-weight: var(--font-weight-regular);
+    appearance: none;
+    height: auto;
+
+    &:hover,
+    &:focus-within {
+      box-shadow: none;
+    }
+  }
+`;export const CollapsingSelect=styled(Select)`
+  svg {
+    top: 60%;
+    transform: translateY(-60%);
+  }
+  label {
+    ${darkSelectStyle};
+
+    border-radius: var(--border-radius-lg);
+    margin-left: 5px;
+    transition: none;
+    min-width: auto;
+    background-color: ${({active:o})=>o?"var(--panel-samples-tabs-bg-color-active)":"var(--bg-color-raised)"};
+    & {
+      &[open],
+      &:focus-within,
+      &:hover {
+        background-color: var(--bg-color-tonal);
+      }
+    }
+  }
+`;export const Arrow=styled(ChevronDownIcon)`
+  position: absolute;
+  right: 10px;
+  top: 10px;
+`;
+//# sourceMappingURL=styled.js.map

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

@@ -0,0 +1,20 @@
+export interface SelectOption {
+    idx?: number;
+    value: string;
+    title?: string;
+    serverUrl?: string;
+    label?: string;
+}
+export interface SelectProps {
+    options: SelectOption[];
+    onChange: (option: SelectOption) => void;
+    handleClear?: () => void;
+    clearable?: boolean;
+    ariaLabel?: string;
+    className?: string;
+    placeholder?: string;
+    value?: string;
+    dense?: boolean;
+    fullWidth?: boolean;
+    variant?: 'dark' | 'light';
+}

package/lib-esm/components/common/Skeleton/LanguageListSkeleton.d.ts

@@ -0,0 +1,4 @@
+import { type ReactElement } from 'react';
+declare function LanguageListSkeletonComponent(): ReactElement;
+export declare const LanguageListSkeleton: import("react").MemoExoticComponent<typeof LanguageListSkeletonComponent>;
+export {};

package/lib-esm/components/common/Skeleton/LanguageListSkeleton.js

@@ -0,0 +1,23 @@
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{memo}from"react";import styled from"styled-components";const Container=styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-xs) 0;
+`,Item=styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  gap: var(--spacing-sm);
+`,SkeletonBox=styled.div`
+  display: inline-block;
+  height: ${({type:e})=>"icon"===e?"var(--control-height-sm)":"calc(var(--control-height-sm) * 0.5)"};
+  position: relative;
+  overflow: hidden;
+  background-color: var(--layer-color-hover);
+  border-radius: var(--border-radius);
+  width: ${({type:e})=>"icon"===e?"var(--control-height-sm)":"64px"};
+`;function LanguageListSkeletonComponent(){return _jsxs(Container,{children:[_jsxs(Item,{children:[_jsx(SkeletonBox,{type:"icon"}),_jsx(SkeletonBox,{type:"label"})]}),_jsxs(Item,{children:[_jsx(SkeletonBox,{type:"icon"}),_jsx(SkeletonBox,{type:"label"})]}),_jsxs(Item,{children:[_jsx(SkeletonBox,{type:"icon"}),_jsx(SkeletonBox,{type:"label"})]}),_jsxs(Item,{children:[_jsx(SkeletonBox,{type:"icon"}),_jsx(SkeletonBox,{type:"label"})]})]})}export const LanguageListSkeleton=memo(LanguageListSkeletonComponent);
+//# sourceMappingURL=LanguageListSkeleton.js.map

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

@@ -1,2 +1,5 @@
-/// <reference types="react" />
-export declare function Skeleton(): JSX.Element;
+import type { ReactElement } from 'react';
+export declare const SkeletonBox: import("styled-components").StyledComponent<"div", any, {
+    width?: string | undefined;
+}, never>;
+export declare function Skeleton(): ReactElement;

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

@@ -1,14 +1,16 @@
-import React from"react";import styled,{keyframes}from"styled-components";import{H2}from"@redocly/theme";import{Section,SamplesMiddlePanel}from"../panels";const shimmer=keyframes`
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import styled,{keyframes}from"styled-components";import{H2}from"@redocly/theme";import{Section,SamplesMiddlePanel}from"../panels";const shimmer=keyframes`
   100% {
       transform: translateX(100%);
   }
-`,SkeletonBox=styled.div`
+`;export const SkeletonBox=styled.div`
   display: inline-block;
   height: 1em;
   position: relative;
   overflow: hidden;
-  background-color: #eeeeee;
-  border-radius: var(--global-border-radius);
+  background-color: var(--bg-color-raised);
+  border-radius: var(--border-radius);
+  margin-top: var(--spacing-base);
+  width: ${({width:e})=>e||"100%"};
 
   &::after {
     position: absolute;
@@ -27,5 +29,5 @@ import React from"react";import styled,{keyframes}from"styled-components";import
     animation: ${shimmer} 2s infinite;
     content: '';
   }
-`;export function Skeleton(){return React.createElement(Section,null,React.createElement(SamplesMiddlePanel,null,React.createElement(H2,null,React.createElement(SkeletonBox,{style:{width:"40%"}})),React.createElement(SkeletonBox,{style:{width:"80%"}}),React.createElement(SkeletonBox,{style:{width:"90%"}}),React.createElement(SkeletonBox,{style:{width:"83%"}}),React.createElement(SkeletonBox,{style:{width:"80%"}})))}
+`;export function Skeleton(){return _jsx(Section,{children:_jsxs(SamplesMiddlePanel,{children:[_jsx(H2,{children:_jsx(SkeletonBox,{width:"40%"})}),_jsx(SkeletonBox,{width:"80%"}),_jsx(SkeletonBox,{width:"90%"}),_jsx(SkeletonBox,{width:"83%"}),_jsx(SkeletonBox,{width:"80%"})]})})}
 //# sourceMappingURL=Skeleton.js.map

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

@@ -1,2 +1 @@
-export declare const SamplesPanelHeader: import("styled-components").StyledComponent<"h3", any, {}, never>;
 export declare const FieldsGroupHeader: import("styled-components").StyledComponent<"h5", any, {}, never>;

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

@@ -1,9 +1,5 @@
-import styled from"styled-components";import{typography}from"../../utils";export const SamplesPanelHeader=styled.h3`
-  color: var(--panel-samples-text-color);
-
-  ${typography("right-panel-header")};
-`;export const FieldsGroupHeader=styled.h5`
-  color: var(--text-secondary);
+import styled from"styled-components";export const FieldsGroupHeader=styled.h5`
+  color: var(--text-color-secondary);
   font-weight: bold;
   text-transform: uppercase;
   font-size: 14px;

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

@@ -1,14 +1,12 @@
-export { Dropdown, SchemaDiscriminatorDropdown } from './Dropdown';
-export type { DropdownProps, DropdownOption } from './Dropdown';
+export { Select } from './Select';
+export type { SelectProps, SelectOption } from './Select';
 export { ShareLinkToField } from './LinkToField';
 export { deprecatedCss } from './mixins';
-export { FormControl } from './form';
+export { Container, HttpVerb, MimeLabel } from './styled';
+export { CodeBlockPanel } from './CodeBlockPanel';
 export * from './Fields';
 export * from './panels';
-export { FieldsGroupHeader, SamplesPanelHeader } from './headers';
+export { FieldsGroupHeader } from './headers';
 export { ShareLink, Link } from './linkify';
-export * from './shelfs';
 export * from './schema';
-export * from './perfect-scrollbar';
-export { Portal } from './Portal';
 export { Skeleton } from './Skeleton';

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

@@ -1,2 +1,2 @@
-export{Dropdown,SchemaDiscriminatorDropdown}from"./Dropdown";export{ShareLinkToField}from"./LinkToField";export{deprecatedCss}from"./mixins";export{FormControl}from"./form";export*from"./Fields";export*from"./panels";export{FieldsGroupHeader,SamplesPanelHeader}from"./headers";export{ShareLink,Link}from"./linkify";export*from"./shelfs";export*from"./schema";export*from"./perfect-scrollbar";export{Portal}from"./Portal";export{Skeleton}from"./Skeleton";
+export{Select}from"./Select";export{ShareLinkToField}from"./LinkToField";export{deprecatedCss}from"./mixins";export{Container,HttpVerb,MimeLabel}from"./styled";export{CodeBlockPanel}from"./CodeBlockPanel";export*from"./Fields";export*from"./panels";export{FieldsGroupHeader}from"./headers";export{ShareLink,Link}from"./linkify";export*from"./schema";export{Skeleton}from"./Skeleton";
 //# sourceMappingURL=index.js.map

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

@@ -1,9 +1,10 @@
-import type { PropsWithChildren } from 'react';
+import type { PropsWithChildren, ReactElement } from 'react';
 export declare function Link(props: PropsWithChildren<{
     to: string;
     className?: string;
     security?: boolean;
     id?: string;
-}>): JSX.Element | null;
+    'aria-label'?: string;
+}>): ReactElement | null;
 export declare const StyledShareLink: import("styled-components").StyledComponent<typeof Link, any, {}, never>;
-export declare function ShareLink(props: any): JSX.Element;
+export declare function ShareLink(props: any): ReactElement;

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

@@ -1,10 +1,19 @@
-import React from"react";import styled from"styled-components";import{useAtomValue}from"jotai";import{AnchorIcon}from"@redocly/theme";import{Link as LinkRouter}from"react-router-dom";import{globalOptionsAtom}from"../../jotai/store";export function Link(e){var t;const{routingBasePath:o,hooks:r,onDeepLinkClick:n}=useAtomValue(globalOptionsAtom),i=e.security?null===(t=null==r?void 0:r.replaceSecurityLink)||void 0===t?void 0:t.call(r,{securityRequirementId:e.to}):e.to,a=n&&{onClick:e=>{e.preventDefault(),n(o+i)}};return i?React.createElement(LinkRouter,Object.assign({id:e.id,className:e.className||"",to:(null==i?void 0:i.startsWith("#"))?i:o+i},a),e.children):e.children?React.createElement("span",{className:e.className}," ",e.children," "):null}export const StyledShareLink=styled(Link)`
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import styled from"styled-components";import{useAtomValue}from"jotai";import{Link as LinkRouter}from"react-router-dom";import{LinkIcon}from"@redocly/theme";import{globalOptionsAtom}from"../../jotai/store";export function Link(i){var o;const{routingBasePath:e,unstable_hooks:t,onDeepLinkClick:n}=useAtomValue(globalOptionsAtom),r=i.security?null===(o=null==t?void 0:t.replaceSecurityLink)||void 0===o?void 0:o.call(t,{securityRequirementId:i.to}):i.to,a=n&&{onClick:i=>{i.preventDefault(),n(e+r)}};return r?_jsx(LinkRouter,Object.assign({"aria-label":i["aria-label"]||`link to ${r}`,id:decodeURIComponent(i.id||""),className:i.className||"",to:(null==r?void 0:r.startsWith("#"))?r:e+r},a,{children:i.children})):i.children?_jsxs("span",{"aria-label":i["aria-label"]||`link to ${r}`,className:i.className,children:[" ",i.children," "]}):null}export const StyledShareLink=styled(Link)`
   position: absolute;
-  transform: translateX(-100%);
+  top: 50%;
+  left: 0;
+  transform: translate(-100%, -50%);
   padding-right: var(--heading-anchor-offset-right);
+  z-index: 1;
 
-  :hover ${AnchorIcon} {
+  ${LinkIcon} {
+    opacity: 0;
+    transition: visibility 0.3s linear, opacity 0.3s linear;
+  }
+
+  :hover ${LinkIcon}, :focus ${LinkIcon} {
     visibility: visible;
+    opacity: 1;
   }
-`;export function ShareLink(e){return React.createElement(StyledShareLink,Object.assign({},e),React.createElement(AnchorIcon,null))}
+`;export function ShareLink(i){return _jsx(StyledShareLink,Object.assign({},i,{children:_jsx(LinkIcon,{size:"13px",color:"--heading-anchor-color"})}))}
 //# sourceMappingURL=linkify.js.map

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

@@ -2,12 +2,16 @@ import { LayoutVariant } from '@redocly/theme';
 export declare const SamplesMiddlePanel: import("styled-components").StyledComponent<"div", any, {
     compact?: boolean | undefined;
     isStacked?: boolean | undefined;
+    fullWidth?: boolean | undefined;
 }, never>;
 export declare const Section: import("styled-components").StyledComponent<"div", any, {
     underlined?: boolean | undefined;
     sectionId?: string | undefined;
+    expanded?: boolean | undefined;
+}, never>;
+export declare const SamplesPanel: import("styled-components").StyledComponent<"div", any, {
+    isStacked: boolean;
 }, never>;
-export declare const SamplesPanel: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Row: import("styled-components").StyledComponent<"div", any, {
     layout?: LayoutVariant | undefined;
 }, never>;

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

@@ -1,42 +1,65 @@
-import{H2,LayoutVariant}from"@redocly/theme";import styled,{css}from"styled-components";import{SECTION_ATTR}from"../../constants";export const SamplesMiddlePanel=styled.div`
-  ${({compact:a,isStacked:t,theme:e})=>{const i=a?0:"var(--spacing-vertical)";return css`
+import{H2,LayoutVariant,breakpoints,Markdown}from"@redocly/theme";import styled,{css}from"styled-components";import{SECTION_ATTR}from"../../constants";export const SamplesMiddlePanel=styled.div`
+  ${({compact:a,isStacked:i,fullWidth:t})=>{const o=a?0:"var(--spacing-vertical)";return css`
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      padding: ${o} var(--panel-gap-horizontal);
+
       &:empty {
         display: none;
       }
-      width: 100%;
-      padding: ${i} var(--panel-gap-horizontal);
 
-      ${e.mediaQueries[e.showAtBreakpoint.samplesPanel]} {
-        width: calc(100% - var(--panel-samples-width));
-        padding-right: var(--panel-gap-vertical, var(--panel-gap-horizontal));
+      @media screen and (min-width: ${breakpoints.medium}) {
+        width: ${t?"100%":"calc(100% - var(--panel-samples-width))"};
+        padding-left: ${i?"var(--panel-gap-horizontal)":"calc(var(--panel-gap-horizontal) * 2)"};
+        padding-right: ${i?"var(--panel-gap-vertical)":"var(--panel-gap-horizontal)"};
         padding-top: 0;
-        padding-bottom: ${t?"var(--spacing-vertical)":0};
+        padding-bottom: ${i?"var(--spacing-vertical)":0};
       }
 
-      ${e.mediaQueries.print} {
+      @media print {
         width: 100%;
-        padding-top: ${i};
-        padding-bottom: ${i};
+        padding-top: ${o};
+        padding-bottom: ${o};
       }
-    `}}
+    `}};
+  & & {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  &:last-child > ${Markdown} :last-child,
+  ${Markdown} article :last-child {
+    margin-bottom: 0;
+  }
 `;export const Section=styled.div.attrs((a=>({[SECTION_ATTR]:a.sectionId,id:a.id})))`
   z-index: 0;
   padding: 0;
   width: 100%;
 
+  ${({expanded:a})=>a&&css`
+      background-color: var(--layer-color);
+      border-bottom: 1px solid var(--border-color-secondary);
+      --code-block-bg-color: var(--bg-color);
+      --code-block-controls-bg-color: var(--bg-color);
+    `}
+
   & > &:last-child {
     min-height: initial;
   }
-  ${({theme:a})=>css`
-    ${a.mediaQueries[a.showAtBreakpoint.samplesPanel]} {
-      padding-top: var(--spacing-vertical);
-      padding-bottom: var(--spacing-vertical);
-    }
-
-    ${a.mediaQueries.print} {
-      padding: 0;
-    }
-  `}
+
+  @media screen and (min-width: ${breakpoints.medium}) {
+    padding-top: var(--spacing-xs);
+
+    ${({expanded:a})=>!a&&css`
+        padding-bottom: var(--spacing-xs);
+      `}
+  }
+
+  @media print {
+    padding: 0;
+  }
+
   ${({underlined:a})=>a&&css`
       position: relative;
 
@@ -46,7 +69,7 @@ import{H2,LayoutVariant}from"@redocly/theme";import styled,{css}from"styled-comp
         width: 100%;
         display: block;
         content: '';
-        border-bottom: 1px solid var(--border-primary);
+        border-bottom: 1px solid var(--border-color-primary);
       }
     `}
   ${H2} {
@@ -62,26 +85,26 @@ import{H2,LayoutVariant}from"@redocly/theme";import styled,{css}from"styled-comp
   padding-right: var(--panel-gap-horizontal);
 
   position: sticky;
+  z-index: var(--panel-z-index);
   top: calc(var(--navbar-height) + var(--panel-gap-vertical));
 
   &:empty {
     display: none;
   }
 
-  ${({theme:a})=>css`
-    ${a.mediaQueries[a.showAtBreakpoint.samplesPanel]} {
-      width: var(--panel-samples-width);
-      padding-top: 0;
-      padding-bottom: 0;
-      padding-left: var(--panel-gap-vertical, var(--panel-gap-horizontal));
-    }
+  @media screen and (min-width: ${breakpoints.medium}) {
+    width: var(--panel-samples-width);
+    padding-top: 0;
+    padding-bottom: 0;
+    padding-left: ${({isStacked:a})=>a?"var(--panel-gap-vertical)":"var(--panel-gap-horizontal)"};
+    padding-right: ${({isStacked:a})=>a?"var(--panel-gap-horizontal)":"calc(var(--panel-gap-horizontal) * 2)"};
+  }
 
-    ${a.mediaQueries.print} {
-      width: 100%;
-      padding-top: var(--spacing-vertical);
-      padding-bottom: var(--spacing-vertical);
-    }
-  `}
+  @media print {
+    width: 100%;
+    padding-top: var(--spacing-vertical);
+    padding-bottom: var(--spacing-vertical);
+  }
 `;export const Row=styled.div`
   display: flex;
   flex-direction: column;
@@ -89,14 +112,12 @@ import{H2,LayoutVariant}from"@redocly/theme";import styled,{css}from"styled-comp
   width: 100%;
   padding: 0;
 
-  ${({theme:a,layout:t})=>css`
-    ${a.mediaQueries[a.showAtBreakpoint.samplesPanel]} {
-      flex-direction: ${t!==LayoutVariant.STACKED?"row":"column"};
-    }
+  @media screen and (min-width: ${breakpoints.medium}) {
+    flex-direction: ${({layout:a})=>a!==LayoutVariant.STACKED?"row":"column"};
+  }
 
-    ${a.mediaQueries.print} {
-      flex-direction: column;
-    }
-  `}
+  @media print {
+    flex-direction: column;
+  }
 `;
 //# sourceMappingURL=panels.js.map

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

@@ -5,7 +5,8 @@ export declare const OneOfButton: import("styled-components").StyledComponent<"b
 export declare const OneOfList: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const BadgeStyle: import("styled-components").StyledComponent<"span", any, {
+    'data-component-name': string;
+} & {
     deprecated?: boolean | undefined;
-}, never>;
-export declare const ArrayOpeningLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ArrayClosingLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
+}, "data-component-name">;
+export declare const SelectionTitle: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,4 +1,4 @@
-import styled,{css}from"styled-components";import{deprecatedCss}from"./mixins";import{Badge}from"./shelfs";export const OneOfButton=styled.button`
+import styled,{css}from"styled-components";import{Badge}from"@redocly/theme";import{deprecatedCss}from"./mixins";export const OneOfButton=styled.button`
   border: 1px solid var(--schema-buttons-border-color);
   height: 24px;
   border-radius: var(--border-radius);
@@ -9,28 +9,28 @@ import styled,{css}from"styled-components";import{deprecatedCss}from"./mixins";i
   font-size: var(--schema-buttons-font-size);
   line-height: 1em;
   color: var(--schema-buttons-text-color);
-  background-color: var(--schema-buttons-background-color);
+  background-color: var(--schema-buttons-bg-color);
   padding: 0 10px;
   min-width: 90px;
   transition: background-color 0.2s ease-in, border-color 0.2s ease-in;
 
   &:hover {
-    background-color: var(--schema-buttons-hover-background-color);
+    background-color: var(--schema-buttons-bg-color-hover);
   }
 
   &:active {
-    background-color: var(--schema-buttons-active-background-color);
+    background-color: var(--schema-buttons-bg-color-active);
   }
 
   ${({deprecated:o})=>o&&deprecatedCss};
 
   ${({selected:o})=>o&&css`
       border-color: var(--schema-buttons-selected-border-color);
-      background-color: var(--schema-buttons-selected-background-color);
+      background-color: var(--schema-buttons-selected-bg-color);
       color: var(--schema-buttons-selected-text-color);
 
       &:hover {
-        background-color: var(--schema-buttons-selected-hover-background-color);
+        background-color: var(--schema-buttons-selected-bg-color-hover);
       }
       &:active {
         background-color: var(--schema-buttons-active-hover-background-color);
@@ -50,19 +50,25 @@ import styled,{css}from"styled-components";import{deprecatedCss}from"./mixins";i
   margin-bottom: 1em;
 `;export const BadgeStyle=styled(Badge)`
   margin-left: 0;
-`;export const ArrayOpeningLabel=styled.div`
-  font-size: 0.9em;
-
-  font-family: var(--code-font-family);
-  &::after {
-    content: ' [';
-  }
-`;export const ArrayClosingLabel=styled.div`
-  font-size: 0.9em;
-  font-family: var(--code-font-family);
-
-  &::after {
-    content: ']';
+`;export const SelectionTitle=styled.div`
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
+  color: var(--tag-basic-content-color);
+  padding: 0 var(--spacing-xs);
+  border: 1px solid var(--border-color-secondary);
+  border-radius: var(--border-radius);
+  margin: var(--spacing-xxs) 0 var(--spacing-xs);
+  position: relative;
+  width: fit-content;
+  &:before {
+    content: ' ';
+    width: 1px;
+    height: var(--spacing-xs);
+    background: var(--border-color-secondary);
+    display: block;
+    position: absolute;
+    bottom: calc(-1 * var(--spacing-xs));
+    left: var(--spacing-xs);
   }
 `;
 //# sourceMappingURL=schema.js.map

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

@@ -0,0 +1,4 @@
+import { Tag } from '@redocly/theme';
+export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const HttpVerb: import("styled-components").StyledComponent<typeof Tag, any, {}, never>;
+export declare const MimeLabel: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,27 @@
+import styled from"styled-components";import{Tag}from"@redocly/theme";export const Container=styled.div`
+  display: flex;
+  flex-direction: column;
+  margin: var(--spacing-unit) var(--spacing-md) var(--spacing-sm);
+`;export const HttpVerb=styled(Tag)`
+  text-transform: uppercase;
+  background-color: unset;
+  border: none;
+  padding: 0;
+  margin: 0;
+  font-family: var(--font-family-monospaced);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
+  align-self: flex-end;
+`;export const MimeLabel=styled.div`
+  background-color: var(--panel-samples-dropdown-bg-color);
+  color: var(--panel-samples-text-color);
+  font-family: inherit;
+  margin-bottom: 0;
+  height: 36px;
+  padding: var(--docs-dropdown-padding);
+  font-size: var(--docs-dropdown-font-size);
+  border: var(--panel-samples-dropdown-border);
+  border-radius: var(--border-radius-md);
+`;
+//# sourceMappingURL=styled.js.map