@redocly/openapi-docs 3.11.0-next.10 → 3.11.0-next.2

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

@@ -0,0 +1,33 @@
+import styled from"styled-components";import{LinkIcon,H2}from"@redocly/theme";export const Title=styled.h4`
+  font-size: var(--h4-font-size);
+  font-weight: var(--h4-font-weight);
+  line-height: var(--h4-line-height);
+  padding: 0;
+  color: var(--h4-text-color);
+  margin: 0 0 var(--h4-margin-bottom) 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+
+  :hover {
+    ${LinkIcon} {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+`;export const Heading=styled(H2)`
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  flex-wrap: wrap;
+
+  :hover {
+    ${LinkIcon} {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+`;
+//# sourceMappingURL=OperationItemTitle.js.map

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

@@ -0,0 +1,12 @@
+import type { SelectOption } from '@redocly/theme';
+import type { SchemaModel } from '../../../models';
+interface SchemaSelectionProps {
+    options: SelectOption<number>[];
+    onChange?: (idx: number) => void;
+    pointer: string;
+    schema: SchemaModel;
+    defaultOneOfIdx: number;
+}
+declare function SchemaSelectionComponent({ options, onChange, pointer, schema, defaultOneOfIdx, }: SchemaSelectionProps): import("react/jsx-runtime").JSX.Element | null;
+export declare const SchemaSelection: typeof SchemaSelectionComponent;
+export {};

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

@@ -0,0 +1,2 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{useCallback,useEffect,useRef,useState}from"react";import{useAtom}from"jotai";import{Segmented,isUndefined}from"@redocly/theme";import{Dropdown}from"../Dropdown";import{operationStore}from"../../../jotai/operation";const LIMIT_FOR_SEGMENTED=5;function SchemaSelectionComponent({options:e,onChange:o,pointer:t,schema:n,defaultOneOfIdx:r}){var i,a;const[s,l]=useAtom(operationStore(t)),u=null===(a=e[null!==(i=s.activeOneOf[n.pointer])&&void 0!==i?i:r])||void 0===a?void 0:a.value,[d,m]=useState(!1),c=useRef(null);useEffect((()=>{if(!c.current)return;const e=()=>{var e;const o=null===(e=c.current)||void 0===e?void 0:e.querySelectorAll('button[role="tab"]'),t=Array.from(o||[]).some((e=>e.offsetWidth<e.scrollWidth));t!==d&&m(t)};return e(),window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)}),[d,e]);const f=useCallback((({value:e})=>{var t,r;void 0!==e&&(o?o(e):l({activeExampleName:null===(r=null===(t=n.oneOf)||void 0===t?void 0:t[e])||void 0===r?void 0:r.title,activeOneOf:{[n.pointer]:e},requestValues:{body:null}}))}),[o,n.oneOf,n.pointer,l]);return isUndefined(u)?null:e.length>LIMIT_FOR_SEGMENTED||d?_jsx(Dropdown,{options:e,value:u,onChange:f}):_jsx(Segmented,{ref:c,value:u,onChange:f,options:e,size:"small","data-testid":"segmented-schema"})}export const SchemaSelection=SchemaSelectionComponent;
+//# sourceMappingURL=SchemaSelection.js.map

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

@@ -0,0 +1 @@
+export { SchemaSelection } from './SchemaSelection';

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

@@ -0,0 +1,2 @@
+export{SchemaSelection}from"./SchemaSelection";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,2 @@
+import type { SelectProps } from './types';
+export declare const Select: import("react").NamedExoticComponent<SelectProps>;

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

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

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

@@ -0,0 +1,5 @@
+import type { ReactElement } from 'react';
+export declare const SkeletonBox: import("styled-components").StyledComponent<"div", any, {
+    width?: string;
+}, never>;
+export declare function Skeleton(): ReactElement;

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

@@ -0,0 +1,33 @@
+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%);
+  }
+`;export const SkeletonBox=styled.div`
+  display: inline-block;
+  height: 1em;
+  position: relative;
+  overflow: hidden;
+  background-color: var(--bg-color-raised);
+  border-radius: var(--border-radius);
+  margin-top: var(--spacing-base);
+  width: ${({width:e})=>e||"100%"};
+
+  &::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    transform: translateX(-100%);
+    background-image: linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 0) 0,
+      rgba(255, 255, 255, 0.2) 20%,
+      rgba(255, 255, 255, 0.5) 60%,
+      rgba(255, 255, 255, 0)
+    );
+    animation: ${shimmer} 2s infinite;
+    content: '';
+  }
+`;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/Skeleton/index.d.ts

@@ -0,0 +1 @@
+export { Skeleton } from './Skeleton';

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

@@ -0,0 +1,2 @@
+export{Skeleton}from"./Skeleton";
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,8 @@
+import styled from"styled-components";export const FieldsGroupHeader=styled.h5`
+  color: var(--text-color-secondary);
+  font-weight: bold;
+  text-transform: uppercase;
+  font-size: 14px;
+  line-height: 20px;
+`;
+//# sourceMappingURL=headers.js.map

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

@@ -0,0 +1,14 @@
+export { Select } from './Select';
+export type { SelectProps, SelectOption } from './Select';
+export { ShareLinkToField, generateDeepLink } from './LinkToField';
+export { deprecatedCss } from './mixins';
+export { Container, HttpVerb, MimeLabel } from './styled';
+export { CodeBlockPanel } from './CodeBlockPanel';
+export { CustomBadges, StyledBadge, NavigationBadge } from './Badges';
+export { ExpandableExample } from './ExpandableExample';
+export * from './Fields';
+export * from './panels';
+export { FieldsGroupHeader } from './headers';
+export { ShareLink, Link } from './linkify';
+export * from './schema';
+export { Skeleton } from './Skeleton';

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

@@ -0,0 +1,2 @@
+export{Select}from"./Select";export{ShareLinkToField,generateDeepLink}from"./LinkToField";export{deprecatedCss}from"./mixins";export{Container,HttpVerb,MimeLabel}from"./styled";export{CodeBlockPanel}from"./CodeBlockPanel";export{CustomBadges,StyledBadge,NavigationBadge}from"./Badges";export{ExpandableExample}from"./ExpandableExample";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

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

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

@@ -0,0 +1,21 @@
+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";import{tryDecodeURIComponent}from"../../utils";export function Link(i){var o;const{routingBasePath:t,unstable_hooks:e,onDeepLinkClick:n}=useAtomValue(globalOptionsAtom),r=i.security?null===(o=null==e?void 0:e.replaceSecurityLink)||void 0===o?void 0:o.call(e,{securityRequirementId:i.to}):i.to,a=n&&{onClick:i=>{i.preventDefault(),n((t||"")+r)}};return r?_jsx(LinkRouter,Object.assign({"aria-label":i["aria-label"]||`link to ${r}`,id:tryDecodeURIComponent(i.id||""),className:i.className||"",to:(null==r?void 0:r.startsWith("#"))?r:(t||"")+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;
+  top: 50%;
+  left: 0;
+  transform: translate(-100%, -50%);
+  padding-right: var(--heading-anchor-offset-right);
+  z-index: 1;
+
+  ${LinkIcon} {
+    opacity: 0;
+    transition:
+      visibility 0.3s linear,
+      opacity 0.3s linear;
+  }
+
+  :hover ${LinkIcon}, :focus ${LinkIcon} {
+    visibility: visible;
+    opacity: 1;
+  }
+`;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/mixins.d.ts

@@ -0,0 +1 @@
+export declare const deprecatedCss: import("styled-components").FlattenSimpleInterpolation;

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

@@ -0,0 +1,5 @@
+import{css}from"styled-components";export const deprecatedCss=css`
+  text-decoration: line-through;
+  color: var(--schemas-property-deprecated-text-color);
+`;
+//# sourceMappingURL=mixins.js.map

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

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

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

@@ -0,0 +1,123 @@
+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;
+      }
+
+      @media screen and (min-width: ${breakpoints.large}) {
+        width: ${t||i?"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: ${i?"var(--spacing-vertical)":0};
+      }
+
+      @media print {
+        width: 100%;
+        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;
+  }
+
+  @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;
+
+      &:not(:last-of-type):after {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        display: block;
+        content: '';
+        border-bottom: 1px solid var(--border-color-primary);
+      }
+    `}
+  ${H2} {
+    position: relative;
+  }
+`;export const SamplesPanel=styled.div`
+  color: var(--panel-samples-text-color);
+  width: 100%;
+  height: fit-content;
+  padding-top: var(--panel-gap-vertical);
+  padding-bottom: var(--panel-gap-vertical);
+  padding-left: var(--panel-gap-horizontal);
+  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;
+  }
+
+  @media screen and (min-width: ${breakpoints.large}) {
+    width: ${({isStacked:a})=>a?"100%":"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)"};
+  }
+
+  @media print {
+    width: 100%;
+    padding-top: var(--spacing-vertical);
+    padding-bottom: var(--spacing-vertical);
+  }
+`;export const Row=styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0;
+
+  @media screen and (min-width: ${breakpoints.large}) {
+    flex-direction: ${({layout:a})=>a!==LayoutVariant.STACKED?"row":"column"};
+  }
+
+  @media print {
+    flex-direction: column;
+  }
+`;
+//# sourceMappingURL=panels.js.map

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

@@ -0,0 +1,7 @@
+export declare const OneOfButton: import("styled-components").StyledComponent<"button", any, {
+    selected: boolean;
+    deprecated: boolean;
+}, never>;
+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 SelectionTitle: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,74 @@
+import styled,{css}from"styled-components";import{deprecatedCss}from"./mixins";export const OneOfButton=styled.button`
+  border: 1px solid var(--schema-buttons-border-color);
+  height: 24px;
+  border-radius: var(--border-radius);
+  cursor: pointer;
+  outline: none;
+  font-family: var(--schema-buttons-font-family);
+  font-weight: var(--schema-buttons-font-weight);
+  font-size: var(--schema-buttons-font-size);
+  line-height: 1em;
+  color: var(--schema-buttons-text-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-bg-color-hover);
+  }
+
+  &:active {
+    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-bg-color);
+      color: var(--schema-buttons-selected-text-color);
+
+      &:hover {
+        background-color: var(--schema-buttons-selected-bg-color-hover);
+      }
+      &:active {
+        background-color: var(--schema-buttons-active-hover-background-color);
+      }
+    `}
+`;export const OneOfList=styled.div`
+  display: inline;
+
+  flex-wrap: wrap;
+  margin: 4px -3px;
+  margin-left: 10px;
+
+  ${OneOfButton} {
+    margin: 2px;
+  }
+`;export const Wrapper=styled.div`
+  margin-bottom: 1em;
+`;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,7 @@
+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>;
+export declare const ArrayLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const LabelValue: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const ArrayClosingLabel: import("styled-components").StyledComponent<"span", any, {}, never>;