@redocly/openapi-docs 0.0.0-new-redoc-20240202162301

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

@@ -0,0 +1,28 @@
+import styled,{css}from"styled-components";import React,{memo,useState}from"react";import{useLocation}from"react-router-dom";import{pathIncludesLink}from"../../utils";import{cycleColorsByLevel}from"../PropertyDetails/cycleColorsByLevel";import{CircleIcon}from"../PropertyDetails/PlusCircleIcon";function SubSchemaComponent({expandByDefault:e,deepLink:r,level:o,schema:t,expandable:a=!1,isArray:c="",propertyLength:n=""}){const l=useLocation(),i=pathIncludesLink(l,r),[s,m]=useState(e||i),p=s?cycleColorsByLevel(o):void 0;return a?React.createElement(React.Fragment,null,React.createElement(ShowProperty,{onClick:()=>m(!s)},React.createElement(CircleIcon,{sign:s?"-":"+",color:p}),!s&&`Show ${1===Number(n)?"":n} ${c&&"array "}${1!==n?"properties":"property"}`),s&&React.createElement(StyledSchema,{color:p},t),!s&&React.createElement(Divider,null)):t}export const SubSchema=memo(SubSchemaComponent);const ShowProperty=styled.button`
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  padding: 0;
+  gap: var(--spacing-xxs);
+  color: var(--text-color-secondary);
+  font-size: var(--font-size-base);
+  font-family: var(--font-family-base);
+  line-height: var(--line-height-base);
+  margin-top: var(--spacing-xxs);
+`,StyledSchema=styled.div`
+  padding-left: var(--schema-nested-offset);
+  border-left: 1px solid ${({color:e})=>e||"var(--border-color-primary)"};
+  margin: -10px 0 0 9px;
+  ${({color:e})=>e&&css`
+      .schema-name {
+        color: ${e};
+      }
+    `}
+`,Divider=styled.div`
+  width: 100%;
+  border-bottom: 1px solid var(--border-color-primary);
+  padding-top: var(--schema-property-details-spacing);
+`;
+//# sourceMappingURL=SubSchema.js.map

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

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

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

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

package/lib-esm/components/Tabs/Tab.d.ts

@@ -0,0 +1,3 @@
+export declare const Tab: import("styled-components").StyledComponent<"li", any, {
+    $active: boolean;
+}, never>;

package/lib-esm/components/Tabs/Tab.js

@@ -0,0 +1,27 @@
+import styled,{css}from"styled-components";export const Tab=styled.li`
+  display: inline-flex;
+  align-items: center;
+  list-style: none;
+  cursor: pointer;
+
+  color: var(--text-color-secondary);
+  font-size: var(--font-size-base);
+  font-family: var(--font-family-base);
+  font-weight: var(--font-weight-regular);
+  background-color: transparent;
+  border-radius: var(--border-radius);
+  padding: 0 var(--spacing-sm);
+  line-height: var(--line-height-base);
+  height: 24px;
+
+  ${({$active:r})=>r?css`
+          color: var(--text-color-secondary);
+          background-color: var(--tab-bg-color-filled);
+        `:css`
+          &:hover {
+            color: var(--text-color-primary);
+            background-color: var(--bg-color-raised);
+          }
+        `}
+`;
+//# sourceMappingURL=Tab.js.map

package/lib-esm/components/Tabs/TabContent.d.ts

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

package/lib-esm/components/Tabs/TabContent.js

@@ -0,0 +1,2 @@
+import styled from"styled-components";export const TabContent=styled.div``;
+//# sourceMappingURL=TabContent.js.map

package/lib-esm/components/Tabs/TabList.d.ts

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

package/lib-esm/components/Tabs/TabList.js

@@ -0,0 +1,8 @@
+import styled from"styled-components";export const TabList=styled.ol`
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+`;
+//# sourceMappingURL=TabList.js.map

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

@@ -0,0 +1,4 @@
+export * from './Tab';
+export * from './TabList';
+export * from './TabContent';
+export * from './useTabs';

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

@@ -0,0 +1,2 @@
+export*from"./Tab";export*from"./TabList";export*from"./TabContent";export*from"./useTabs";
+//# sourceMappingURL=index.js.map

package/lib-esm/components/Tabs/useTabs.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import type { TabType } from '../../models/tab';
+interface UseTabsProps {
+    tabs: TabType[];
+    defaultTab?: TabType;
+}
+interface TabContentProps {
+    value: string;
+    children: ReactNode;
+}
+export declare const useTabs: ({ tabs, defaultTab }: UseTabsProps) => {
+    TabList: () => React.JSX.Element;
+    TabContent: ({ children, value }: TabContentProps) => React.JSX.Element;
+    activeTab: TabType;
+    onChangeTab: (tab: TabType) => void;
+};
+export {};

package/lib-esm/components/Tabs/useTabs.js

@@ -0,0 +1,2 @@
+import React,{useCallback,useState}from"react";import{StatusCode,useMount}from"@redocly/theme";import{TabContent as StyledTabContent}from"./TabContent";import{TabList as StyledTabList}from"./TabList";import{Tab as StyledTab}from"./Tab";export const useTabs=({tabs:e,defaultTab:t})=>{const[a,l]=useState(t||e[0]);useMount((()=>{t&&l(t)}));const n=useCallback((e=>{a.key!==e.key&&l(e)}),[a]);return{TabList:useCallback((()=>React.createElement(StyledTabList,null,e.map((e=>React.createElement(StyledTab,{key:e.key,$active:e.key===a.key,onClick:()=>n(e)},React.createElement(StatusCode,{status:e.key},e.title)))))),[a,n,e]),TabContent:useCallback((({children:e,value:t})=>React.createElement(StyledTabContent,null,t===a.key?e:null)),[a]),activeTab:a,onChangeTab:n}};
+//# sourceMappingURL=useTabs.js.map

package/lib-esm/components/TagItem/OperationsNavigation.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { OperationMenuItem } from '../../models';
+type OperationsNavigationProps = {
+    items: OperationMenuItem[];
+    routingBasePath: string;
+};
+export declare function OperationsNavigationComponent({ items, routingBasePath, }: OperationsNavigationProps): React.JSX.Element | null;
+export declare const OperationsNavigation: React.NamedExoticComponent<OperationsNavigationProps>;
+export {};

package/lib-esm/components/TagItem/OperationsNavigation.js

@@ -0,0 +1,40 @@
+import React,{useMemo,memo,useState}from"react";import{useNavigate}from"react-router-dom";import{H3}from"@redocly/theme";import styled from"styled-components";import{HttpVerb}from"../shared";import{SamplesPanel}from"../common";import{encodeBackSlashes}from"../../utils";import{joinWithSeparator}from"../../services";const MAX_OPERATIONS=8;export function OperationsNavigationComponent({items:e,routingBasePath:t}){const[o,a]=useState(!1),r=useNavigate(),{operations:n,webhooks:i,count:l}=useMemo((()=>{const t=e.filter((e=>"operation"===e.type)),a=o?t:t.slice(0,MAX_OPERATIONS),{operations:r,webhooks:n}=a.reduce(((e,t)=>t.isWebhook?Object.assign(Object.assign({},e),{webhooks:[...e.webhooks,t]}):Object.assign(Object.assign({},e),{operations:[...e.operations,t]})),{operations:[],webhooks:[]});return{operations:r,webhooks:n,count:!o&&t.length>MAX_OPERATIONS?t.length-MAX_OPERATIONS:0}}),[o,e]);if(!n.length&&!i.length)return null;const s=e=>{r(e)};return React.createElement(Wrapper,null,n.length>0&&React.createElement(React.Fragment,null,React.createElement(H3,null,"Operations"),n.map((e=>React.createElement(Item,{key:e.id,onClick:()=>s(joinWithSeparator(t,encodeBackSlashes(e.href)))},React.createElement("span",null,React.createElement(HttpVerb,{color:e.httpVerb},e.httpVerb),React.createElement(Path,null,e.path)))))),i.length>0&&React.createElement(React.Fragment,null,React.createElement(H3,null,"Webhooks"),i.map((e=>React.createElement(Item,{key:e.id,onClick:()=>s(joinWithSeparator(t,encodeBackSlashes(e.href)))},React.createElement("span",null,React.createElement(HttpVerb,{color:e.httpVerb},e.httpVerb),React.createElement(Path,null,e.path)))))),!o&&Boolean(l)&&React.createElement(ButtonLink,{onClick:()=>a(!0)},"Show ",l," more..."))}export const OperationsNavigation=memo(OperationsNavigationComponent);const Wrapper=styled(SamplesPanel)`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding-top: 24px;
+`,Item=styled.button`
+  border-radius: var(--border-radius-lg);
+  border: 1px solid var(--border-color-primary);
+  background: var(--bg-color);
+  display: flex;
+  height: 40px;
+  padding: 0 var(--spacing-base);
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  align-self: stretch;
+  cursor: pointer;
+
+  & > span {
+    display: flex;
+    align-items: baseline;
+    gap: var(--spacing-unit);
+  }
+
+  &:hover::after {
+    content: '→';
+  }
+`,Path=styled.span`
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+  color: var(--text-color-primary);
+  text-decoration: none;
+`,ButtonLink=styled.button`
+  font-size: var(--font-size-lg);
+  background: none;
+  margin: 10px auto;
+  color: var(--link-color-primary);
+`;
+//# sourceMappingURL=OperationsNavigation.js.map

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { ReactElement } from 'react';
+import type { SectionItemProps } from '../SectionItem/SectionItem';
+interface TagItemProps extends SectionItemProps {
+    routingBasePath?: string;
+    isExpanded: boolean;
+}
+export declare function TagItemComponent({ item, routingBasePath, isExpanded, }: TagItemProps): ReactElement;
+export declare const TagItem: React.NamedExoticComponent<TagItemProps>;
+export {};

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

@@ -0,0 +1,9 @@
+import React,{memo,useCallback}from"react";import{Button,H2}from"@redocly/theme";import{useNavigate}from"react-router-dom";import styled from"styled-components";import{Row,SamplesMiddlePanel,ShareLink}from"../common";import{Markdown}from"../Markdown";import{OperationsNavigation}from"./OperationsNavigation";export function TagItemComponent({item:e,routingBasePath:t="",isExpanded:a}){const{description:n,name:o,href:r}=e,i=useNavigate(),m=useCallback((()=>{i(t+e.href)}),[e.href,i,t]),l=Boolean(e.items.length);return React.createElement(React.Fragment,null,React.createElement(Row,null,React.createElement(SamplesMiddlePanel,{fullWidth:!l},React.createElement(H2,null,React.createElement(ShareLink,{to:r,"aria-label":`link to ${o}`}),o),React.createElement(Markdown,{source:n})),Boolean(e.items.length)&&React.createElement(OperationsNavigation,{items:e.items,routingBasePath:t})),l&&!a&&React.createElement(ShowButton,{type:"button",variant:"text",size:"default",onClick:m},"+ Show"))}export const TagItem=memo(TagItemComponent);const ShowButton=styled(Button)`
+  margin: var(--spacing-md) var(--spacing-md) var(--spacing-unit);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-regular);
+  width: calc(100% - var(--spacing-md) * 2);
+  padding: var(--spacing-unit) 0;
+  line-height: var(--line-height-base);
+`;
+//# sourceMappingURL=TagItem.js.map

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

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

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

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

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

@@ -0,0 +1,9 @@
+import type { ReactElement } from 'react';
+import type { DropdownOption } from './common/Dropdown';
+import type { OpenAPIDefinitionVersion } from '../jotai/store';
+export interface VersionSwitcherProps {
+    onChange: (o: DropdownOption) => void;
+    versions: OpenAPIDefinitionVersion[];
+    activeVersionIdx: number;
+}
+export declare const VersionSwitcher: ({ versions, onChange, activeVersionIdx, }: VersionSwitcherProps) => ReactElement | null;

package/lib-esm/components/VersionSwitcher.js

@@ -0,0 +1,7 @@
+import React from"react";import styled from"styled-components";import{VersionDropdown}from"./common/Dropdown";export const VersionSwitcher=({versions:e,onChange:n,activeVersionIdx:o})=>{const r=e.map(((e,n)=>({idx:n,value:e.title||e.id})));return React.createElement(VersionWrapper,null,React.createElement(VersionDropdown,{options:r,value:r[o].value,onChange:n,ariaLabel:"Version"}))};const VersionWrapper=styled.div`
+  padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 4);
+  width: 100%;
+  display: inline-block;
+  font-size: 12px;
+`;
+//# sourceMappingURL=VersionSwitcher.js.map

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { MediaContentModel } from '../../../models';
+interface BodyContentProps {
+    skipReadOnly?: boolean;
+    skipWriteOnly?: boolean;
+    required?: boolean;
+    description?: string | GenericObject;
+    content?: MediaContentModel;
+}
+export declare const BodyContent: React.NamedExoticComponent<BodyContentProps>;
+export {};

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

@@ -0,0 +1,11 @@
+import React,{memo}from"react";import styled from"styled-components";import{useAtom}from"jotai";import{Dropdown}from"../DropdownTheme";import{RequiredLabel}from"../Fields";import{ConstraintsView}from"../ConstraintsView";import{Schema}from"../../Schema";import{getActiveMediaType}from"../../../models";import{Markdown}from"../../Markdown";import{activeMimeNameAtom}from"../../../jotai/app";function BodyContentComponent({required:e,skipReadOnly:t,skipWriteOnly:o,description:n,content:a}){const[r,i]=useAtom(activeMimeNameAtom);if(!a)return null;const{schema:m,examples:l,operation:c,name:s}=getActiveMediaType(a,r);return React.createElement(React.Fragment,null,React.createElement(Row,null,"Body",React.createElement(Dropdown,{options:a.mediaTypes.map((({name:e})=>({label:e,value:e}))),value:s,onChange:({value:e})=>i(e)})),e&&React.createElement(RequiredLabel,null,"required"),React.createElement(StyledMarkdown,{source:n}),"object"===(null==m?void 0:m.type)&&(null==m?void 0:m.constraints)&&React.createElement(ConstraintsView,{constraints:(null==m?void 0:m.constraints)||[]}),React.createElement(Schema,{skipReadOnly:t,skipWriteOnly:o,key:"schema",schema:m,examples:l,operation:c}))}export const BodyContent=memo(BodyContentComponent);const StyledMarkdown=styled(Markdown)`
+  margin: var(--spacing-xxs) 0 0;
+`,Row=styled.div`
+  display: flex;
+  font-size: var(--font-size-lg);
+  line-height: var(--line-height-lg);
+  color: var(--text-color-primary);
+  gap: var(--spacing-unit);
+  margin-top: var(--spacing-lg);
+`;
+//# sourceMappingURL=BodyContent.js.map

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

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

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

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

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

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

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

@@ -0,0 +1,2 @@
+import React,{memo}from"react";const ClearButtonComponent=({className:e,style:t,handleClear:o})=>React.createElement("button",{className:e,style:t,onClick:o},"✕");export const ClearButton=memo(ClearButtonComponent);
+//# sourceMappingURL=ClearButton.js.map

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

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

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

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

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ClearButton: import("styled-components").StyledComponent<import("react").NamedExoticComponent<import("./types").ClearButtonProps>, any, {}, never>;

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

@@ -0,0 +1,16 @@
+import styled from"styled-components";import{ClearButton as ClearButtonComponent}from"./ClearButton";export const ClearButton=styled(ClearButtonComponent)`
+  z-index: 1;
+  position: absolute;
+  right: 24px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #89949f;
+  background: none;
+  border: none;
+  cursor: pointer;
+
+  &:hover {
+    color: #fff;
+  }
+`;
+//# sourceMappingURL=styled.js.map

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

@@ -0,0 +1,6 @@
+import type { CSSProperties } from 'react';
+export interface ClearButtonProps {
+    className?: string;
+    style?: CSSProperties;
+    handleClear?: () => void;
+}

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

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

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface ConstraintsViewProps {
+    constraints: string[];
+}
+export declare const ConstraintsView: React.NamedExoticComponent<ConstraintsViewProps>;

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

@@ -0,0 +1,2 @@
+import React,{memo}from"react";import{Tag}from"./Fields";function ConstraintsViewComponent({constraints:t}){return 0===t.length?null:React.createElement("span",null," ",t.map((t=>React.createElement(Tag,{key:t}," ",t," "))))}export const ConstraintsView=memo(ConstraintsViewComponent);
+//# sourceMappingURL=ConstraintsView.js.map

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

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

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

@@ -0,0 +1,16 @@
+import React,{memo,useMemo}from"react";import styled from"styled-components";import{ClearButton}from"../ClearButton";import{normalizeText}from"../../../utils";const ArrowSvg=({className:e,style:t})=>React.createElement("svg",{className:e,style:t,xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"},React.createElement("polyline",{points:"6 9 12 15 18 9"})),ArrowIcon=styled(ArrowSvg)`
+  position: absolute;
+  pointer-events: none;
+  z-index: 1;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+  right: 8px;
+  margin: auto;
+  text-align: center;
+  polyline {
+    color: inherit;
+  }
+`,DropdownComponent=({options:e,onChange:t,handleClear:o,clearable:n,placeholder:a,value:r="",className:l})=>{var s;const c=useMemo((()=>e.map((({idx:e,value:t,title:o},n)=>{const a=normalizeText(t);return React.createElement("option",{key:e||a+n,value:a,className:"dropdown-option"},o||a)}))),[e]),i=normalizeText(r),m=(null===(s=e.find((e=>e.value===r)))||void 0===s?void 0:s.title)||i;return React.createElement("div",{className:l+" dropdown-wrapper"},React.createElement(ArrowIcon,null),n&&(null==i?void 0:i.length)>0&&React.createElement(ClearButton,{handleClear:o}),React.createElement("select",{onChange:o=>{const{selectedIndex:n}=o.target;t(e[a||!r?n-1:n])},value:i,className:"dropdown-select","aria-label":"dropdown select"},a&&React.createElement("option",{disabled:!0,hidden:!0,value:a},a),!i&&!a&&React.createElement("option",{disabled:!0}),c),React.createElement("label",null,m))};export const Dropdown=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,24 @@
+/// <reference types="react" />
+import type { DropdownProps } from './types';
+export declare const Dropdown: import("styled-components").StyledComponent<import("react").NamedExoticComponent<DropdownProps>, any, DropdownProps & {
+    fullWidth?: boolean | undefined;
+    variant?: "dark" | "light" | undefined;
+}, never>;
+export declare const SimpleDropdown: import("styled-components").StyledComponent<import("react").NamedExoticComponent<DropdownProps>, any, DropdownProps & {
+    fullWidth?: boolean | undefined;
+    variant?: "dark" | "light" | undefined;
+}, never>;
+export declare const CollapsingDropdown: import("styled-components").StyledComponent<import("react").NamedExoticComponent<DropdownProps>, any, DropdownProps & {
+    fullWidth?: boolean | undefined;
+    variant?: "dark" | "light" | undefined;
+} & {
+    active?: boolean | undefined;
+}, never>;
+export declare const VersionDropdown: import("styled-components").StyledComponent<import("react").NamedExoticComponent<DropdownProps>, any, DropdownProps & {
+    fullWidth?: boolean | undefined;
+    variant?: "dark" | "light" | undefined;
+}, never>;
+export declare const SchemaMimeTypeDropdown: import("styled-components").StyledComponent<import("react").NamedExoticComponent<DropdownProps>, any, DropdownProps & {
+    fullWidth?: boolean | undefined;
+    variant?: "dark" | "light" | undefined;
+}, never>;

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

@@ -0,0 +1,121 @@
+import styled,{css}from"styled-components";import{Dropdown as DropdownComponent}from"./Dropdown";const darkDropdownStyle=css`
+  background-color: var(--panel-samples-dropdown-background-color);
+  border: var(--panel-samples-dropdown-border);
+  color: var(--panel-samples-dropdown-color);
+
+  &,
+  &:hover,
+  &:focus-within {
+    box-shadow: none;
+  }
+`;export const Dropdown=styled(DropdownComponent)`
+  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?darkDropdownStyle:""};
+  }
+
+  .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?darkDropdownStyle:""};
+  }
+`;export const SimpleDropdown=styled(Dropdown)`
+  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 CollapsingDropdown=styled(Dropdown)`
+  svg {
+    top: 60%;
+    transform: translateY(-60%);
+  }
+  label {
+    ${darkDropdownStyle};
+
+    border-radius: var(--border-radius-lg);
+    margin-left: 5px;
+    transition: none;
+    min-width: auto;
+    background-color: ${({active:o})=>o?"var(--panel-samples-tabs-active-background-color)":"var(--bg-color-raised)"};
+    & {
+      &[open],
+      &:focus-within,
+      &:hover {
+        background-color: var(--bg-color-tonal);
+      }
+    }
+  }
+`;export const VersionDropdown=styled(Dropdown)`
+  width: 90%;
+  label {
+    width: 100%;
+    font-weight: 600;
+    color: var(--text-color-secondary);
+  }
+`;export const SchemaMimeTypeDropdown=styled(SimpleDropdown)`
+  label {
+    padding: var(--schemas-mime-type-dropdown-padding);
+    border: var(--schemas-mime-type-dropdown-border);
+    font-size: var(--schemas-mime-type-dropdown-font-size);
+    color: var(--schemas-mime-type-dropdown-text-color);
+  }
+`;
+//# sourceMappingURL=styled.js.map

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

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

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

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

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { SelectOption } from '@redocly/theme';
+interface DropdownProps<T> {
+    value: T;
+    onChange: ({ label, value }: {
+        label: any;
+        value: any;
+    }) => void;
+    options: SelectOption<T>[];
+}
+declare function DropdownComponent<T>({ options, value, onChange }: DropdownProps<T>): React.JSX.Element;
+export declare const Dropdown: typeof DropdownComponent;
+export {};

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

@@ -0,0 +1,27 @@
+import React from"react";import{Dropdown as DropdownTheme,typedMemo}from"@redocly/theme";import styled from"styled-components";import{CheckmarkIcon}from"../../icons/Checkmark";function DropdownComponent({options:e,value:t,onChange:o}){var n;const r=null===(n=e.find((e=>e.value===t)))||void 0===n?void 0:n.label;return 1===e.length?React.createElement(Title,null,r):React.createElement(StyledDropdown,{withArrow:!0,items:e.map((e=>React.createElement(Option,{key:e.label,isActive:e.value===t,onClick:()=>o(e)},e.label,e.label===t&&React.createElement(StyledCheckmarkIcon,null))))},React.createElement(Title,null,r))}export const Dropdown=typedMemo(DropdownComponent);const StyledCheckmarkIcon=styled(CheckmarkIcon)`
+  width: 16px;
+  height: 16px;
+  margin-left: auto;
+`,Option=styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+  padding: var(--spacing-xxs) var(--spacing-sm);
+  font-weight: ${({isActive:e})=>e&&"var(--font-weight-bold)"};
+`,Title=styled.button`
+  margin-right: var(--spacing-unit);
+  cursor: default;
+  background: none;
+  border: none;
+  padding: 0;
+  color: var(--text-color-primary);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+  font-family: var(--font-family-base);
+`,StyledDropdown=styled(DropdownTheme)`
+  ${Title} {
+    cursor: pointer;
+  }
+`;
+//# sourceMappingURL=Dropdown.js.map

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

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

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

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

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

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface ExtensionsProps {
+    extensions: {
+        [k: string]: string | Record<string, unknown>;
+    };
+}
+export declare const Extensions: React.NamedExoticComponent<ExtensionsProps>;

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

@@ -0,0 +1,4 @@
+import React,{memo}from"react";import styled from"styled-components";import{useAtomValue}from"jotai";import{MarkdownWrapper}from"@redocly/theme";import{ExtensionValue,FieldLabel}from"./index";import{globalOptionsAtom}from"../../jotai/store";const Extension=styled(MarkdownWrapper)`
+  margin: 2px 0;
+`;function ExtensionsComponent({extensions:e}){const{showExtensions:t,preserveOriginalExtensionsName:o}=useAtomValue(globalOptionsAtom);return t?React.createElement("div",null,Object.keys(e).map((t=>React.createElement(Extension,{key:t},React.createElement(FieldLabel,null,o?t:t.substring(2),": ")," ",React.createElement(ExtensionValue,null,"string"==typeof e[t]?e[t]:JSON.stringify(e[t])))))):null}export const Extensions=memo(ExtensionsComponent);
+//# sourceMappingURL=Extensions.js.map

package/lib-esm/components/common/Fields/fields-layout.d.ts

@@ -0,0 +1,15 @@
+export declare const getCssVariable: (variable: string) => string;
+export declare const PropertiesTableCaption: import("styled-components").StyledComponent<"caption", any, {}, never>;
+export declare const PropertyCell: import("styled-components").StyledComponent<"td", any, {
+    kind?: string | undefined;
+}, never>;
+export declare const PropertyCellWithInner: import("styled-components").StyledComponent<"td", any, {
+    kind?: string | undefined;
+}, never>;
+export declare const PropertyNameCell: import("styled-components").StyledComponent<"td", any, {
+    kind?: string | undefined;
+}, never>;
+export declare const PropertyDetailsCell: import("styled-components").StyledComponent<"td", any, {}, never>;
+export declare const PropertyBullet: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const InnerPropertiesWrap: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PropertiesTable: import("styled-components").StyledComponent<"table", any, {}, never>;