@redocly/openapi-docs 0.0.0-beta-20240215154132

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

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

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

@@ -0,0 +1,10 @@
+import type { TabType } from '../../models/tab';
+interface UseTabsStateProps {
+    tabs: TabType[];
+    defaultTab?: TabType;
+}
+export declare function useTabsState({ tabs, defaultTab }: UseTabsStateProps): {
+    activeTab: TabType;
+    handleTabChange: (tab: TabType) => void;
+};
+export {};

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

@@ -0,0 +1,2 @@
+import{useCallback,useState}from"react";import{useMount}from"@redocly/theme";export function useTabsState({tabs:e,defaultTab:t}){const[a,u]=useState(t||e[0]);useMount((()=>{t&&u(t)}));const o=useCallback((e=>{a.key!==e.key&&u(e)}),[a]);return{activeTab:a,handleTabChange:o}}
+//# sourceMappingURL=useTabsState.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);
+  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/ViewNested/ViewNested.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+interface ViewNestedProps {
+    expandByDefault?: boolean;
+    deepLink?: string;
+    level?: number;
+    openByDefault?: boolean;
+    expandable?: boolean;
+    isArray?: boolean | string;
+    propertyLength?: number | string;
+    expandText?: string;
+    hideText?: string;
+    hideDivider?: boolean;
+}
+export declare const ViewNested: React.NamedExoticComponent<React.PropsWithChildren<ViewNestedProps>>;
+export {};

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

@@ -0,0 +1,31 @@
+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 ViewNestedComponent({expandByDefault:e,deepLink:r,level:o,expandable:t=!1,isArray:a="",propertyLength:i="",expandText:n,hideText:s,hideDivider:c=!1,children:l}){const d=useLocation(),p=pathIncludesLink(d,r),[m,y]=useState(e||p),v=m?cycleColorsByLevel(o):void 0;return t?React.createElement(Wrapper,{$divider:!c&&!m},React.createElement(ShowProperty,{onClick:()=>y(!m)},React.createElement(CircleIcon,{sign:m?"-":"+",color:v}),!m&&(n||`Show ${1===Number(i)?"":i} ${a&&"array "}${1!==i?"properties":"property"}`),m&&(s||"")),m&&React.createElement(StyledNested,{color:v},l)):l}export const ViewNested=memo(ViewNestedComponent);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);
+  width: 100%;
+`,StyledNested=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};
+      }
+    `}
+`,Wrapper=styled.div`
+  width: 100%;
+  ${({$divider:e})=>e&&css`
+      border-bottom: 1px solid var(--border-color-primary);
+      padding-bottom: var(--schema-property-details-spacing);
+    `}
+`;
+//# sourceMappingURL=ViewNested.js.map

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

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

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

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

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

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

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

@@ -0,0 +1,31 @@
+import React,{memo}from"react";import styled from"styled-components";import{useAtom}from"jotai";import{LinkIcon}from"@redocly/theme";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";import{LinkToField}from"../LinkToField";import{joinWithSeparator}from"../../../services";function BodyContentComponent({required:e,skipReadOnly:t,skipWriteOnly:o,description:i,content:r,operationId:n}){const[a,m]=useAtom(activeMimeNameAtom);if(!r)return null;const{schema:l,examples:s,operation:c,name:p}=getActiveMediaType(r,a);return React.createElement(React.Fragment,null,React.createElement(Title,null,React.createElement(LinkToField,{to:"#"+joinWithSeparator(n,"body")}),"Body",React.createElement(Dropdown,{options:r.mediaTypes.map((({name:e})=>({label:e,value:e}))),value:p,onChange:({value:e})=>m(e)})),e&&React.createElement(RequiredLabel,null,"required"),React.createElement(StyledMarkdown,{source:i}),"object"===(null==l?void 0:l.type)&&(null==l?void 0:l.constraints)&&React.createElement(ConstraintsView,{constraints:(null==l?void 0:l.constraints)||[]}),React.createElement(Schema,{skipReadOnly:t,skipWriteOnly:o,key:"schema",schema:l,examples:s,operation:c}))}export const BodyContent=memo(BodyContentComponent);const StyledMarkdown=styled(Markdown)`
+  margin: var(--spacing-xxs) 0 0;
+`,Title=styled.span`
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-color-primary);
+  margin-top: var(--spacing-base);
+
+  :hover {
+    ${LinkIcon} {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+
+  &,
+  button {
+    font-size: var(--font-size-lg);
+    line-height: var(--line-height-lg);
+  }
+
+  :after {
+    content: '';
+    flex: auto;
+    border-top: 1px solid var(--border-color-primary);
+  }
+`;
+//# 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,4 @@
+import React,{memo}from"react";import styled from"styled-components";import{Tag}from"./Fields";function ConstraintsViewComponent({constraints:t}){return 0===t.length?null:React.createElement(Wrapper,null,t.map((t=>React.createElement(Tag,{key:t}," ",t," "))))}export const ConstraintsView=memo(ConstraintsViewComponent);const Wrapper=styled.div`
+  margin-top: var(--spacing-xxs);
+`;
+//# 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,2 @@
+import React,{memo,useMemo}from"react";import{ClearButton}from"../ClearButton";import{normalizeText}from"../../../utils";import{Arrow}from"./styled";const DropdownComponent=({options:e,onChange:t,handleClear:o,clearable:a,placeholder:l,value:n="",className:r})=>{var c;const m=useMemo((()=>e.map((({idx:e,value:t,title:o},a)=>{const l=normalizeText(t);return React.createElement("option",{key:e||l+a,value:l,className:"dropdown-option"},o||l)}))),[e]),d=normalizeText(n),i=(null===(c=e.find((e=>e.value===n)))||void 0===c?void 0:c.title)||d;return React.createElement("div",{className:r+" dropdown-wrapper"},React.createElement(Arrow,null),a&&(null==d?void 0:d.length)>0&&React.createElement(ClearButton,{handleClear:o}),React.createElement("select",{onChange:o=>{const{selectedIndex:a}=o.target;t(e[l||!n?a-1:a])},value:d,className:"dropdown-select","aria-label":"dropdown select"},l&&React.createElement("option",{disabled:!0,hidden:!0,value:l},l),!d&&!l&&React.createElement("option",{disabled:!0}),m),React.createElement("label",null,i))};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,31 @@
+/// <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>;
+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/Dropdown/styled.js

@@ -0,0 +1,125 @@
+import styled,{css}from"styled-components";import{ChevronDownIcon}from"@redocly/theme";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);
+  }
+`;export const Arrow=styled(ChevronDownIcon)`
+  position: absolute;
+  right: 10px;
+  top: 10px;
+`;
+//# sourceMappingURL=styled.js.map

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

@@ -0,0 +1,20 @@
+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';
+}

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 styled from"styled-components";import{Dropdown as DropdownTheme,typedMemo,CheckmarkIcon}from"@redocly/theme";function DropdownComponent({options:e,value:t,onChange:o}){var n;const a=null===(n=e.find((e=>e.value===t)))||void 0===n?void 0:n.label;return 1===e.length?React.createElement(Title,null,a):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,a))}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-medium)"};
+`,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{Markdown as 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>;