@redocly/openapi-docs 3.0.0 → 3.0.1

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface ExtensionsProps {
+    extensions: {
+        [k: string]: string | Record<string, unknown>;
+    };
+}
+export declare const Extensions: import("react").NamedExoticComponent<ExtensionsProps>;

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

@@ -0,0 +1,4 @@
+import{jsxs as _jsxs,jsx as _jsx}from"react/jsx-runtime";import{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:o}){const{showExtensions:s}=useAtomValue(globalOptionsAtom);return s?_jsx("div",{children:Object.keys(o).map((s=>_jsxs(Extension,{children:[_jsxs(FieldLabel,{children:[s.substring(2),": "]})," ",_jsx(ExtensionValue,{children:"string"==typeof o[s]?o[s]:JSON.stringify(o[s])})]},s)))}):null}export const Extensions=memo(ExtensionsComponent);
+//# sourceMappingURL=Extensions.js.map

package/lib-esm/components/common/Fields/fields-layout.js

@@ -1,8 +1,8 @@
-import styled,{css}from"styled-components";import{typography}from"../../../utils";import{deprecatedCss}from"../mixins";export const getCssVariable=e=>"undefined"!=typeof document?getComputedStyle(document.documentElement).getPropertyValue(e).trim():"";export const PropertiesTableCaption=styled.caption`
+import styled,{css}from"styled-components";import{breakpoints}from"@redocly/theme";import{typography}from"../../../utils";import{deprecatedCss}from"../mixins";export const getCssVariable=e=>"undefined"!=typeof document?getComputedStyle(document.documentElement).getPropertyValue(e).trim():"";export const PropertiesTableCaption=styled.caption`
   text-align: right;
   font-size: 0.9em;
   font-weight: normal;
-  color: var(--text-secondary);
+  color: var(--text-color-secondary);
 `;const repeatingGradient=css`
   repeating-linear-gradient(0deg,
   var(--schemas-lines-color),
@@ -21,7 +21,7 @@ import styled,{css}from"styled-components";import{typography}from"../../../utils
   padding: 0 20px;
   margin-bottom: 2px;
 
-  ${({theme:e})=>e.mediaQueries.small} {
+  @media screen and (min-width: ${breakpoints.small}) {
     display: table-cell;
     overflow: initial;
     padding: 10px;
@@ -39,7 +39,7 @@ import styled,{css}from"styled-components";import{typography}from"../../../utils
     padding-bottom: 0;
     background-size: 0.9px 100%;
 
-    ${({theme:e})=>e.mediaQueries.small} {
+    @media screen and (min-width: ${breakpoints.small}) {
       background-size: 0.9px 22px;
     }
   }
@@ -53,7 +53,7 @@ import styled,{css}from"styled-components";import{typography}from"../../../utils
     background-size: 0.9px 100%;
     background-position: 0 20px;
 
-    ${({theme:e})=>e.mediaQueries.small} {
+    @media screen and (min-width: ${breakpoints.small}) {
       background-size: 0.9px 22px;
       background-position: 0 0;
     }
@@ -121,8 +121,8 @@ import styled,{css}from"styled-components";import{typography}from"../../../utils
   width: var(--schema-default-details-width);
   min-width: 200px;
 
-  ${({theme:e})=>e.mediaQueries.small} {
-    border-bottom: 1px solid var(--border-primary);
+  @media screen and (min-width: ${breakpoints.small}) {
+    border-bottom: 1px solid var(--border-color-primary);
     border-left: none;
     padding: 10px 0;
   }
@@ -134,7 +134,7 @@ import styled,{css}from"styled-components";import{typography}from"../../../utils
   border-left: 1px dashed var(--schemas-lines-color);
   padding: 5px 10px;
 
-  ${({theme:e})=>e.mediaQueries.small} {
+  @media screen and (min-width: ${breakpoints.small}) {
     border-left: none;
     padding: 10px;
   }
@@ -156,7 +156,7 @@ import styled,{css}from"styled-components";import{typography}from"../../../utils
   font-size: var(--font-size-base);
   display: block;
 
-  ${({theme:e})=>e.mediaQueries.small} {
+  @media screen and (min-width: ${breakpoints.small}) {
     display: table;
   }
 
@@ -166,11 +166,10 @@ import styled,{css}from"styled-components";import{typography}from"../../../utils
     margin-bottom: 10px;
     border-spacing: 0;
 
-    ${({theme:e})=>e.mediaQueries.small} {
+    @media screen and (min-width: ${breakpoints.small}) {
       display: table-row;
       margin-bottom: 0;
       border-spacing: 0 2px;
-      margin-bottom: 0;
     }
   }
 
@@ -178,7 +177,7 @@ import styled,{css}from"styled-components";import{typography}from"../../../utils
     vertical-align: middle;
   }
 
-  @media screen and (max-width: ${({theme:e})=>e.mediaQueries.small}) and (-ms-high-contrast: none) {
+  @media screen and (max-width: ${breakpoints.small}) and (-ms-high-contrast: none) {
     td {
       float: left;
       width: 100%;
@@ -218,7 +217,7 @@ import styled,{css}from"styled-components";import{typography}from"../../../utils
     ${InnerPropertiesWrap}
     ${InnerPropertiesWrap}
     ${InnerPropertiesWrap} {
-    background: var(--panel-background-color, #fff);
+    background: var(--panel-bg-color, #fff);
   }
 `;
 //# sourceMappingURL=fields-layout.js.map

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

@@ -1,22 +1,39 @@
-export declare const ClickablePropertyNameCell: import("styled-components").StyledComponent<"td", any, {
-    kind?: string | undefined;
-}, never>;
+/// <reference types="react" />
 export declare const FieldLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const TypePrefix: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const TypeName: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const TypeTitle: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const TypeFormat: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const PropertyLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const RequiredLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RequiredLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const AdditionalPropertiesLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const AccessLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const FieldValueLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const RecursiveLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const DeprecatedLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const EnumValue: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const DefaultValue: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const ExampleValue: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const ExtensionValue: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const ConstraintItem: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const PatternLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const ToggleButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const Tag: import("styled-components").StyledComponent<"span", any, {
+    className: "tag-grey";
+}, "className">;
+export declare const AccessLabel: import("styled-components").StyledComponent<"span", any, {
+    className: "tag-grey";
+}, "className">;
+export declare const FieldValueLabel: import("styled-components").StyledComponent<"span", any, {
+    className: "tag-grey";
+}, "className">;
+export declare const RecursiveLabel: import("styled-components").StyledComponent<"span", any, {
+    className: "tag-grey";
+}, "className">;
+export declare const EnumValue: import("styled-components").StyledComponent<"span", any, {
+    className: "tag-grey";
+}, "className">;
+export declare const DefaultValue: import("styled-components").StyledComponent<"span", any, {
+    className: "tag-grey";
+}, "className">;
+export declare const ExampleValue: import("styled-components").StyledComponent<"span", any, {
+    className: "tag-grey";
+}, "className">;
+export declare const ExtensionValue: import("styled-components").StyledComponent<"span", any, {
+    className: "tag-grey";
+}, "className">;
+export declare const ConstraintItem: import("styled-components").StyledComponent<"span", any, {
+    className: "tag-grey";
+}, "className">;
+export declare const ToggleButton: import("styled-components").StyledComponent<import("react").FC<import("@redocly/theme").ButtonProps>, any, import("@redocly/theme").ButtonProps & {
+    variant: "link";
+    size: "small";
+}, "variant" | "size">;

package/lib-esm/components/common/Fields/fields.js

@@ -1,37 +1,8 @@
-import styled,{css}from"styled-components";import{typography}from"../../../utils";import{PropertyNameCell,getCssVariable}from"./fields-layout";import{ShelfIcon}from"../../icons";export const ClickablePropertyNameCell=styled(PropertyNameCell)`
-  button {
-    background-color: transparent;
-    border: 0;
-    outline: 0;
-    cursor: pointer;
-    padding: 0 10px 0 0;
-    color: var(--text-primary);
-    &:focus {
-      font-weight: var(--font-weight-bold);
-    }
-  }
-  ${ShelfIcon} {
-    margin-left: 4px;
-    height: var(--schema-chevron-size);
-    width: var(--schema-chevron-size);
-    fill: var(--schema-chevron-color);
-    margin-top: -1px;
-  }
-
-  ${()=>{const e=getCssVariable("--schema-field-name-word-break");if(["break-all","break-word"].includes(e)){const r=`\n      && button {\n        max-width: calc(100% - 21px); /* left padding + toggle button width: 16px/2 + 13px */\n        text-align: left;\n        span {\n          white-space: normal;\n          word-break: ${e};\n          vertical-align: top;\n          display: inline-flex;\n        }\n      }\n    `;return css`
-        button {
-          ${typography("schema-property-name")};
-          ${r};
-        }
-      `}return css`
-      button {
-        ${typography("schema-property-name")};
-      }
-    `}};
-`;export const FieldLabel=styled.span`
+import styled from"styled-components";import{Button}from"@redocly/theme";export const FieldLabel=styled.span`
   vertical-align: middle;
-  line-height: 20px;
+  line-height: var(--schema-labels-line-height);
   font-size: var(--schema-property-labels-font-size);
+  color: var(--schema-labels--text-color);
 `;export const TypePrefix=styled(FieldLabel)`
   color: var(--schema-type-text-color);
 `;export const TypeName=styled(FieldLabel)`
@@ -39,43 +10,52 @@ import styled,{css}from"styled-components";import{typography}from"../../../utils
 `;export const TypeTitle=styled(FieldLabel)`
   color: var(--schema-type-title-text-color);
   word-break: break-word;
-`;export const TypeFormat=TypeName;export const PropertyLabel=styled(FieldLabel.withComponent("div"))`
-  color: var(--text-secondary);
+`;export const PropertyLabel=styled(FieldLabel.withComponent("div"))`
+  color: var(--text-color-secondary);
   font-size: var(--schema-labels-font-size);
+  line-height: var(--schema-labels-line-height);
   font-weight: normal;
-  line-height: 1;
   display: block;
-`;export const RequiredLabel=styled(PropertyLabel)`
+`;export const RequiredLabel=styled(FieldLabel)`
   color: var(--schema-property-required-label-text-color);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
 `;export const AdditionalPropertiesLabel=styled(PropertyLabel)`
   color: var(--schema-property-additional-label-text-color);
-`;export const AccessLabel=styled(PropertyLabel)`
+`;export const Tag=styled.span.attrs((()=>({className:"tag-grey"})))`
+  background: var(--tag-bg-color);
+  padding: 0 var(--spacing-xxs);
+  font-family: var(--font-family-monospaced);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
+  border-radius: var(--border-radius);
+  color: var(--text-color-secondary);
+  display: inline-flex;
+  word-break: var(--code-word-break);
+`;export const AccessLabel=styled(Tag)`
   color: var(--schema-property-access-label-text-color);
-`;export const FieldValueLabel=styled(FieldLabel)`
-  background-color: var(--schema-inline-background-color);
+  background-color: var(--bg-color);
+  border: 1px solid var(--border-color-secondary);
+`;export const FieldValueLabel=styled(Tag)`
+  background-color: var(--schema-inline-bg-color);
   border-radius: var(--border-radius);
   border: var(--schema-inline-border);
-  padding: 1px var(--spacing-unit);
-
-  ${typography("schema-inline-code")}
-`;export const RecursiveLabel=styled(FieldValueLabel)`
-  background-color: var(--schema-recursive-background-color);
+  padding: 0 var(--spacing-unit);
+`;export const RecursiveLabel=styled(Tag)`
+  background-color: var(--schema-recursive-bg-color);
   border-color: var(--schema-recursive-border-color);
   color: var(--schema-recursive-text-color);
-`;export const DeprecatedLabel=styled(FieldValueLabel)`
-  color: var(--badge-deprecated-text-color);
-  background-color: var(--badge-deprecated-background-color);
-  border-color: var(--badge-deprecated-border-color);
+  padding: 0 var(--spacing-xs);
 `;export const EnumValue=styled(FieldValueLabel)`
-  background-color: var(--schema-enum-background-color);
+  background-color: var(--schema-enum-bg-color);
   border-color: var(--schema-enum-border-color);
   color: var(--schema-enum-text-color);
-`;export const DefaultValue=styled(FieldValueLabel)`
-  background-color: var(--schema-default-background-color);
+`;export const DefaultValue=styled(Tag)`
+  background-color: var(--schema-default-bg-color);
   border-color: var(--schema-default-border-color);
   color: var(--schema-default-text-color);
-`;export const ExampleValue=styled(FieldValueLabel)`
-  background-color: var(--schema-example-background-color);
+`;export const ExampleValue=styled(Tag)`
+  background-color: var(--schema-example-bg-color);
   border-color: var(--schema-example-border-color);
   color: var(--schema-example-text-color);
   word-break: var(--code-word-break);
@@ -84,12 +64,18 @@ import styled,{css}from"styled-components";import{typography}from"../../../utils
     margin-left: 0;
   }
 
-  line-height: 1.2em;
   display: inline-flex;
   white-space: pre-wrap;
   overflow-wrap: anywhere;
+
+  & p,
+  p:only-of-type {
+    font-size: var(--schema-inline-code-font-size);
+    font-family: var(--schema-inline-code-font-family);
+    margin: 0;
+  }
 `;export const ExtensionValue=styled(ExampleValue)``;export const ConstraintItem=styled(FieldValueLabel)`
-  background-color: var(--schema-constraint-background-color);
+  background-color: var(--schema-constraint-bg-color);
   border-color: var(--schema-constraint-border-color);
   color: var(--schema-constraint-text-color);
   word-break: var(--code-word-break);
@@ -98,14 +84,9 @@ import styled,{css}from"styled-components";import{typography}from"../../../utils
   & + & {
     margin-left: 0;
   }
-`;export const PatternLabel=styled(ConstraintItem)``;export const ToggleButton=styled.button`
-  background-color: transparent;
-  border: 0;
-  color: var(--text-secondary);
-  margin-left: var(--spacing-unit);
-  border-radius: var(--border-radius);
-  cursor: pointer;
-  outline-color: var(--text-secondary);
-  font-size: 12px;
+`;export const ToggleButton=styled(Button).attrs((()=>({variant:"link",size:"small"})))`
+  padding: 0;
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
 `;
 //# sourceMappingURL=fields.js.map

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

@@ -1,17 +1,12 @@
-import type { Location } from 'react-router-dom';
-import type { PropsWithChildren } from 'react';
+import type { PropsWithChildren, ReactElement } from 'react';
 import type { FieldModel } from '../../models';
-import { Pagination } from '../../services';
 import { ShareLink } from './linkify';
 interface LinkToFieldProps {
     className?: string;
     to?: string;
-    location: Location;
 }
-export declare function generateDeepLink(field: FieldModel, options: {
-    pagination: Pagination;
-}): string;
-export declare const LinkToField: (props: PropsWithChildren<LinkToFieldProps>) => JSX.Element;
+export declare function generateDeepLink(field: FieldModel): string;
+export declare const LinkToField: ({ to, className, }: PropsWithChildren<LinkToFieldProps>) => ReactElement | null;
 export declare const ShareLinkToField: import("styled-components").StyledComponent<typeof ShareLink, any, {
     isActive: boolean;
 }, never>;

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

@@ -1,14 +1,20 @@
-import styled from"styled-components";import React from"react";import{AnchorIcon}from"@redocly/theme";import{joinWithSeparator,Pagination}from"../../services";import{constructFieldDeepFragment}from"../../services/history/helpers";import{pathMatchedLink}from"../../utils";import{ShareLink}from"./linkify";export function generateDeepLink(i,e){const t=i.deps.operation,o=constructFieldDeepFragment(i);if(!(null==t?void 0:t.id)&&!t.isCallback)return"#"+o;let n=e.pagination===Pagination.Item?"#":t.href;return joinWithSeparator(n,o,"!")}export const LinkToField=i=>{const e=i.to;return React.createElement(ShareLinkToField,{className:i.className,isActive:!(!(null==i?void 0:i.location)||!pathMatchedLink(i.location,e)),to:e,id:null==e?void 0:e.split("#")[1]})};export const ShareLinkToField=styled(ShareLink)`
-  left: 10px;
+import{jsx as _jsx}from"react/jsx-runtime";import styled,{css}from"styled-components";import{useLocation}from"react-router-dom";import{LinkIcon}from"@redocly/theme";import{encodeBackSlashes}from"../../utils";import{joinWithSeparator}from"../../services";import{constructFieldDeepFragment}from"../../services/history/helpers";import{ShareLink}from"./linkify";export function generateDeepLink(i){const o=i.deps.operation,e=constructFieldDeepFragment(i);if(!(null==o?void 0:o.id)&&!o.isCallback)return"#"+e.toLowerCase();const r=joinWithSeparator(o.href,joinWithSeparator(o.id,e),"#");return encodeBackSlashes(r.toLowerCase())}export const LinkToField=({to:i,className:o})=>{const e=i,r=useLocation(),t=null==e?void 0:e.split("#")[1],s=!!r&&r.hash===`#${t}`;return _jsx(ShareLinkToField,{ariaLabel:`link  to ${e}`,className:o,isActive:s,to:e,id:t})};export const ShareLinkToField=styled(ShareLink)`
   display: flex;
-  ${({isActive:i})=>i&&`\n    ${AnchorIcon} {\n      visibility: visible;\n    }\n  `}
-  :hover ${AnchorIcon}, :focus ${AnchorIcon} {
-    visibility: visible;
+  ${LinkIcon} {
+    visibility: hidden;
+    cursor: pointer;
+    background-color: var(--bg-color);
   }
 
-  ${AnchorIcon} {
-    width: 13px;
-    height: 13px;
+  ${({isActive:i})=>i&&css`
+      ${LinkIcon} {
+        visibility: visible;
+        opacity: 1;
+      }
+    `}
+  :hover ${LinkIcon}, :focus ${LinkIcon} {
+    visibility: visible;
+    opacity: 1;
   }
 `;
 //# sourceMappingURL=LinkToField.js.map

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

@@ -0,0 +1,2 @@
+export declare const Title: import("styled-components").StyledComponent<"h4", any, {}, never>;
+export declare const Heading: import("styled-components").StyledComponent<"h2", any, {}, never>;

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}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:n,schema:t,defaultOneOfIdx:i}){var a,r;const[s,m]=useAtom(operationStore(n)),l=null===(r=e[null!==(a=s.activeOneOf[t.pointer])&&void 0!==a?a:i])||void 0===r?void 0:r.value,c=useCallback((({value:e})=>{void 0!==e&&(o?o(e):m((o=>{var n,i;return Object.assign(Object.assign({},o),{activeExampleName:(null===(i=null===(n=t.oneOf)||void 0===n?void 0:n[e])||void 0===i?void 0:i.title)||o.activeExampleName,activeOneOf:Object.assign(Object.assign({},o.activeOneOf),{[t.pointer]:e})})})))}),[o,t.oneOf,t.pointer,m]);return isUndefined(l)?null:e.length>LIMIT_FOR_SEGMENTED?_jsx(Dropdown,{options:e,value:l,onChange:c}):_jsx(Segmented,{value:l,onChange:c,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,3 @@
+/// <reference types="react" />
+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,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