@redocly/openapi-docs 3.0.0 → 3.0.1

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

@@ -0,0 +1,28 @@
+"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.BodyContent=void 0;const jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),styled_components_1=__importDefault(require("styled-components")),jotai_1=require("jotai"),theme_1=require("@redocly/theme"),Dropdown_1=require("../Dropdown"),Fields_1=require("../Fields"),ConstraintsView_1=require("../ConstraintsView"),Schema_1=require("../../Schema"),models_1=require("../../../models"),Markdown_1=require("../../Markdown"),app_1=require("../../../jotai/app"),LinkToField_1=require("../LinkToField");function BodyContentComponent({required:e,skipReadOnly:i,skipWriteOnly:t,description:n,content:r,deepLink:o}){const[s,a]=(0,jotai_1.useAtom)(app_1.activeMimeNameAtom);if(!r)return null;const{schema:l,examples:d,operation:_,name:m}=(0,models_1.getActiveMediaType)(r,s),p=r.mediaTypes.map((({name:e})=>({label:e,value:e})));return(0,jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment,{children:[(0,jsx_runtime_1.jsxs)(Title,{children:[o&&(0,jsx_runtime_1.jsx)(LinkToField_1.LinkToField,{to:o}),"Body",(0,jsx_runtime_1.jsx)(Dropdown_1.Dropdown,{options:p,value:m,triggerVariant:"ghost",triggerSize:"large",onChange:({value:e})=>a(e)})]}),e&&(0,jsx_runtime_1.jsx)(Fields_1.RequiredLabel,{children:"required"}),(0,jsx_runtime_1.jsx)(StyledMarkdown,{source:n}),"object"===(null==l?void 0:l.type)&&(null==l?void 0:l.constraints)&&(0,jsx_runtime_1.jsx)(ConstraintsView_1.ConstraintsView,{constraints:(null==l?void 0:l.constraints)||[]}),(0,jsx_runtime_1.jsx)(Schema_1.Schema,{skipReadOnly:i,skipWriteOnly:t,schema:l,examples:d,operation:_,level:1,disableDeepLinks:!o},"schema")]})}exports.BodyContent=(0,react_1.memo)(BodyContentComponent);const StyledMarkdown=(0,styled_components_1.default)(Markdown_1.Markdown)`
+  margin: var(--spacing-xxs) 0 0;
+`,Title=styled_components_1.default.span`
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xxs);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-color-primary);
+  margin-top: var(--spacing-md);
+  font-size: 18px;
+  line-height: var(--line-height-lg);
+  padding: var(--spacing-xxs) 0;
+
+  :hover {
+    ${theme_1.LinkIcon} {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+
+  & button:not(:has(*)) {
+    font-family: var(--font-family-monospaced);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-lg);
+  }
+`;
+//# sourceMappingURL=BodyContent.js.map

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

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

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.BodyContent=void 0;var BodyContent_1=require("./BodyContent");Object.defineProperty(exports,"BodyContent",{enumerable:!0,get:function(){return BodyContent_1.BodyContent}});
+//# sourceMappingURL=index.js.map

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

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

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

@@ -1,2 +1,2 @@
-"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,r,n){void 0===n&&(n=r);var o=Object.getOwnPropertyDescriptor(t,r);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,n,o)}:function(e,t,r,n){void 0===n&&(n=r),e[n]=t[r]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&__createBinding(t,e,r);return __setModuleDefault(t,e),t};Object.defineProperty(exports,"__esModule",{value:!0}),exports.ClearButton=void 0;const react_1=__importStar(require("react")),ClearButtonComponent=({className:e,style:t,handleClear:r})=>react_1.default.createElement("button",{className:e,style:t,onClick:r},"✕");exports.ClearButton=(0,react_1.memo)(ClearButtonComponent);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ClearButton=void 0;const jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),ClearButtonComponent=({className:e,style:t,handleClear:r})=>(0,jsx_runtime_1.jsx)("button",{className:e,style:t,onClick:r,children:"✕"});exports.ClearButton=(0,react_1.memo)(ClearButtonComponent);
 //# sourceMappingURL=ClearButton.js.map

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

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

package/lib/components/common/CodeBlockPanel.d.ts

@@ -0,0 +1,2 @@
+import { Panel } from '@redocly/theme';
+export declare const CodeBlockPanel: import("styled-components").StyledComponent<typeof Panel, any, {}, never>;

package/lib/components/common/CodeBlockPanel.js

@@ -0,0 +1,6 @@
+"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.CodeBlockPanel=void 0;const styled_components_1=__importDefault(require("styled-components")),theme_1=require("@redocly/theme");exports.CodeBlockPanel=(0,styled_components_1.default)(theme_1.Panel)`
+  ${theme_1.PanelBody} {
+    padding: var(--spacing-sm) 0 0;
+  }
+`;
+//# sourceMappingURL=CodeBlockPanel.js.map

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export interface ConstraintsViewProps {
+    constraints: string[];
+}
+export declare const ConstraintsView: import("react").NamedExoticComponent<ConstraintsViewProps>;

package/lib/components/common/ConstraintsView.js

@@ -0,0 +1,4 @@
+"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.ConstraintsView=void 0;const jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),styled_components_1=__importDefault(require("styled-components")),Fields_1=require("./Fields");function ConstraintsViewComponent({constraints:e}){return 0===e.length?null:(0,jsx_runtime_1.jsx)(Wrapper,{children:e.map((e=>(0,jsx_runtime_1.jsxs)(Fields_1.Tag,{children:[" ",e," "]},e)))})}exports.ConstraintsView=(0,react_1.memo)(ConstraintsViewComponent);const Wrapper=styled_components_1.default.div`
+  margin-top: var(--spacing-xxs);
+`;
+//# sourceMappingURL=ConstraintsView.js.map

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

@@ -1,3 +1,15 @@
-import React from 'react';
-import type { DropdownProps } from './types';
-export declare const Dropdown: React.NamedExoticComponent<DropdownProps>;
+import type { SelectOption } from '@redocly/theme';
+export interface DropdownProps<T> {
+    value: T;
+    onChange: ({ label, value }: {
+        label: any;
+        value: any;
+    }) => void;
+    options: SelectOption<T>[];
+    className?: string;
+    triggerVariant?: 'ghost' | 'outlined';
+    triggerSize?: string;
+}
+declare function DropdownComponent<T>({ options, value, onChange, className, triggerVariant, triggerSize, }: DropdownProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare const Dropdown: typeof DropdownComponent;
+export {};

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

@@ -1,16 +1,27 @@
-"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,r,n){void 0===n&&(n=r);var o=Object.getOwnPropertyDescriptor(t,r);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,n,o)}:function(e,t,r,n){void 0===n&&(n=r),e[n]=t[r]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&__createBinding(t,e,r);return __setModuleDefault(t,e),t},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.Dropdown=void 0;const react_1=__importStar(require("react")),styled_components_1=__importDefault(require("styled-components")),ClearButton_1=require("../ClearButton"),utils_1=require("../../../utils"),ArrowSvg=({className:e,style:t})=>react_1.default.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_1.default.createElement("polyline",{points:"6 9 12 15 18 9"})),ArrowIcon=(0,styled_components_1.default)(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:r,clearable:n,placeholder:o,value:a="",className:l})=>{var i;const u=(0,react_1.useMemo)((()=>e.map((({idx:e,value:t,title:r},n)=>{const o=(0,utils_1.normalizeText)(t);return react_1.default.createElement("option",{key:e||o+n,value:o,className:"dropdown-option"},r||o)}))),[e]),s=(0,utils_1.normalizeText)(a),c=(null===(i=e.find((e=>e.value===a)))||void 0===i?void 0:i.title)||s;return react_1.default.createElement("div",{className:l+" dropdown-wrapper"},react_1.default.createElement(ArrowIcon,null),n&&(null==s?void 0:s.length)>0&&react_1.default.createElement(ClearButton_1.ClearButton,{handleClear:r}),react_1.default.createElement("select",{onChange:r=>{const{selectedIndex:n}=r.target;t(e[o||!a?n-1:n])},value:s,className:"dropdown-select"},o&&react_1.default.createElement("option",{disabled:!0,hidden:!0,value:o},o),!s&&!o&&react_1.default.createElement("option",{disabled:!0}),u),react_1.default.createElement("label",null,c))};exports.Dropdown=(0,react_1.memo)(DropdownComponent);
+"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.Dropdown=void 0;const jsx_runtime_1=require("react/jsx-runtime"),styled_components_1=__importDefault(require("styled-components")),theme_1=require("@redocly/theme");function DropdownComponent({options:e,value:t,onChange:n,className:r,triggerVariant:o="outlined",triggerSize:i="small"}){var a;const s=null===(a=e.find((e=>e.value===t)))||void 0===a?void 0:a.label;return 1===e.length?(0,jsx_runtime_1.jsx)(Title,{children:s}):(0,jsx_runtime_1.jsx)(theme_1.Dropdown,{className:r,trigger:(0,jsx_runtime_1.jsx)(theme_1.Button,{variant:o,size:i,type:"button",children:s}),withArrow:!0,children:(0,jsx_runtime_1.jsx)(theme_1.DropdownMenu,{children:e.map((e=>(0,jsx_runtime_1.jsx)(StyledDropdownMenuItem,{active:e.value===t,onAction:()=>n(e),suffix:e.value===t&&(0,jsx_runtime_1.jsx)(StyledCheckmarkIcon,{}),children:e.label},e.label)))})})}exports.Dropdown=(0,theme_1.typedMemo)(DropdownComponent);const StyledCheckmarkIcon=(0,styled_components_1.default)(theme_1.CheckmarkIcon)`
+  width: 16px;
+  height: 16px;
+  margin-left: auto;
+`,StyledDropdownMenuItem=(0,styled_components_1.default)(theme_1.DropdownMenuItem)`
+  --dropdown-menu-item-justify-content: space-between;
+
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+  padding: var(--spacing-xxs) var(--spacing-sm);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+`,Title=styled_components_1.default.span`
+  margin-right: var(--spacing-unit);
+  cursor: default;
+  background: none;
+  border: none;
+  padding: 0;
+  color: var(--text-color-primary);
+  font-size: var(--font-size-lg);
+  line-height: var(--line-height-lg);
+  font-family: var(--font-family-base);
+  font-weight: var(--font-weight-regular);
+`;
 //# sourceMappingURL=Dropdown.js.map

package/lib/components/common/Dropdown/index.d.ts

@@ -1,2 +1,2 @@
-export * from './styled';
-export * from './types';
+export { Dropdown } from './Dropdown';
+export type { DropdownProps } from './Dropdown';

package/lib/components/common/Dropdown/index.js

@@ -1,2 +1,2 @@
-"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,r,i){void 0===i&&(i=r);var o=Object.getOwnPropertyDescriptor(t,r);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,i,o)}:function(e,t,r,i){void 0===i&&(i=r),e[i]=t[r]}),__exportStar=this&&this.__exportStar||function(e,t){for(var r in e)"default"===r||Object.prototype.hasOwnProperty.call(t,r)||__createBinding(t,e,r)};Object.defineProperty(exports,"__esModule",{value:!0}),__exportStar(require("./styled"),exports),__exportStar(require("./types"),exports);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Dropdown=void 0;var Dropdown_1=require("./Dropdown");Object.defineProperty(exports,"Dropdown",{enumerable:!0,get:function(){return Dropdown_1.Dropdown}});
 //# sourceMappingURL=index.js.map

package/lib/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/components/common/Extensions.js

@@ -0,0 +1,4 @@
+"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.Extensions=void 0;const jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),styled_components_1=__importDefault(require("styled-components")),jotai_1=require("jotai"),theme_1=require("@redocly/theme"),index_1=require("./index"),store_1=require("../../jotai/store"),Extension=(0,styled_components_1.default)(theme_1.Markdown)`
+  margin: 2px 0;
+`;function ExtensionsComponent({extensions:e}){const{showExtensions:t}=(0,jotai_1.useAtomValue)(store_1.globalOptionsAtom);return t?(0,jsx_runtime_1.jsx)("div",{children:Object.keys(e).map((t=>(0,jsx_runtime_1.jsxs)(Extension,{children:[(0,jsx_runtime_1.jsxs)(index_1.FieldLabel,{children:[t.substring(2),": "]})," ",(0,jsx_runtime_1.jsx)(index_1.ExtensionValue,{children:"string"==typeof e[t]?e[t]:JSON.stringify(e[t])})]},t)))}):null}exports.Extensions=(0,react_1.memo)(ExtensionsComponent);
+//# sourceMappingURL=Extensions.js.map

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

@@ -1,8 +1,8 @@
-"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,r,t,o){void 0===o&&(o=t);var a=Object.getOwnPropertyDescriptor(r,t);a&&!("get"in a?!r.__esModule:a.writable||a.configurable)||(a={enumerable:!0,get:function(){return r[t]}}),Object.defineProperty(e,o,a)}:function(e,r,t,o){void 0===o&&(o=t),e[o]=r[t]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,r){Object.defineProperty(e,"default",{enumerable:!0,value:r})}:function(e,r){e.default=r}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var r={};if(null!=e)for(var t in e)"default"!==t&&Object.prototype.hasOwnProperty.call(e,t)&&__createBinding(r,e,t);return __setModuleDefault(r,e),r};Object.defineProperty(exports,"__esModule",{value:!0}),exports.PropertiesTable=exports.InnerPropertiesWrap=exports.PropertyBullet=exports.PropertyDetailsCell=exports.PropertyNameCell=exports.PropertyCellWithInner=exports.PropertyCell=exports.PropertiesTableCaption=exports.getCssVariable=void 0;const styled_components_1=__importStar(require("styled-components")),utils_1=require("../../../utils"),mixins_1=require("../mixins"),getCssVariable=e=>"undefined"!=typeof document?getComputedStyle(document.documentElement).getPropertyValue(e).trim():"";exports.getCssVariable=getCssVariable,exports.PropertiesTableCaption=styled_components_1.default.caption`
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,r,t,o){void 0===o&&(o=t);var n=Object.getOwnPropertyDescriptor(r,t);n&&!("get"in n?!r.__esModule:n.writable||n.configurable)||(n={enumerable:!0,get:function(){return r[t]}}),Object.defineProperty(e,o,n)}:function(e,r,t,o){void 0===o&&(o=t),e[o]=r[t]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,r){Object.defineProperty(e,"default",{enumerable:!0,value:r})}:function(e,r){e.default=r}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var r={};if(null!=e)for(var t in e)"default"!==t&&Object.prototype.hasOwnProperty.call(e,t)&&__createBinding(r,e,t);return __setModuleDefault(r,e),r};Object.defineProperty(exports,"__esModule",{value:!0}),exports.PropertiesTable=exports.InnerPropertiesWrap=exports.PropertyBullet=exports.PropertyDetailsCell=exports.PropertyNameCell=exports.PropertyCellWithInner=exports.PropertyCell=exports.PropertiesTableCaption=exports.getCssVariable=void 0;const styled_components_1=__importStar(require("styled-components")),theme_1=require("@redocly/theme"),utils_1=require("../../../utils"),mixins_1=require("../mixins"),getCssVariable=e=>"undefined"!=typeof document?getComputedStyle(document.documentElement).getPropertyValue(e).trim():"";exports.getCssVariable=getCssVariable,exports.PropertiesTableCaption=styled_components_1.default.caption`
   text-align: right;
   font-size: 0.9em;
   font-weight: normal;
-  color: var(--text-secondary);
+  color: var(--text-color-secondary);
 `;const repeatingGradient=styled_components_1.css`
   repeating-linear-gradient(0deg,
   var(--schemas-lines-color),
@@ -21,7 +21,7 @@
   padding: 0 20px;
   margin-bottom: 2px;
 
-  ${({theme:e})=>e.mediaQueries.small} {
+  @media screen and (min-width: ${theme_1.breakpoints.small}) {
     display: table-cell;
     overflow: initial;
     padding: 10px;
@@ -39,7 +39,7 @@
     padding-bottom: 0;
     background-size: 0.9px 100%;
 
-    ${({theme:e})=>e.mediaQueries.small} {
+    @media screen and (min-width: ${theme_1.breakpoints.small}) {
       background-size: 0.9px 22px;
     }
   }
@@ -53,7 +53,7 @@
     background-size: 0.9px 100%;
     background-position: 0 20px;
 
-    ${({theme:e})=>e.mediaQueries.small} {
+    @media screen and (min-width: ${theme_1.breakpoints.small}) {
       background-size: 0.9px 22px;
       background-position: 0 0;
     }
@@ -121,8 +121,8 @@
   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: ${theme_1.breakpoints.small}) {
+    border-bottom: 1px solid var(--border-color-primary);
     border-left: none;
     padding: 10px 0;
   }
@@ -134,7 +134,7 @@
   border-left: 1px dashed var(--schemas-lines-color);
   padding: 5px 10px;
 
-  ${({theme:e})=>e.mediaQueries.small} {
+  @media screen and (min-width: ${theme_1.breakpoints.small}) {
     border-left: none;
     padding: 10px;
   }
@@ -156,7 +156,7 @@
   font-size: var(--font-size-base);
   display: block;
 
-  ${({theme:e})=>e.mediaQueries.small} {
+  @media screen and (min-width: ${theme_1.breakpoints.small}) {
     display: table;
   }
 
@@ -166,11 +166,10 @@
     margin-bottom: 10px;
     border-spacing: 0;
 
-    ${({theme:e})=>e.mediaQueries.small} {
+    @media screen and (min-width: ${theme_1.breakpoints.small}) {
       display: table-row;
       margin-bottom: 0;
       border-spacing: 0 2px;
-      margin-bottom: 0;
     }
   }
 
@@ -178,7 +177,7 @@
     vertical-align: middle;
   }
 
-  @media screen and (max-width: ${({theme:e})=>e.mediaQueries.small}) and (-ms-high-contrast: none) {
+  @media screen and (max-width: ${theme_1.breakpoints.small}) and (-ms-high-contrast: none) {
     td {
       float: left;
       width: 100%;
@@ -218,7 +217,7 @@
     ${exports.InnerPropertiesWrap}
     ${exports.InnerPropertiesWrap}
     ${exports.InnerPropertiesWrap} {
-    background: var(--panel-background-color, #fff);
+    background: var(--panel-bg-color, #fff);
   }
 `;
 //# sourceMappingURL=fields-layout.js.map

package/lib/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/components/common/Fields/fields.js

@@ -1,37 +1,8 @@
-"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,r,o,t){void 0===t&&(t=o);var a=Object.getOwnPropertyDescriptor(r,o);a&&!("get"in a?!r.__esModule:a.writable||a.configurable)||(a={enumerable:!0,get:function(){return r[o]}}),Object.defineProperty(e,t,a)}:function(e,r,o,t){void 0===t&&(t=o),e[t]=r[o]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,r){Object.defineProperty(e,"default",{enumerable:!0,value:r})}:function(e,r){e.default=r}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var r={};if(null!=e)for(var o in e)"default"!==o&&Object.prototype.hasOwnProperty.call(e,o)&&__createBinding(r,e,o);return __setModuleDefault(r,e),r};Object.defineProperty(exports,"__esModule",{value:!0}),exports.ToggleButton=exports.PatternLabel=exports.ConstraintItem=exports.ExtensionValue=exports.ExampleValue=exports.DefaultValue=exports.EnumValue=exports.DeprecatedLabel=exports.RecursiveLabel=exports.FieldValueLabel=exports.AccessLabel=exports.AdditionalPropertiesLabel=exports.RequiredLabel=exports.PropertyLabel=exports.TypeFormat=exports.TypeTitle=exports.TypeName=exports.TypePrefix=exports.FieldLabel=exports.ClickablePropertyNameCell=void 0;const styled_components_1=__importStar(require("styled-components")),utils_1=require("../../../utils"),fields_layout_1=require("./fields-layout"),icons_1=require("../../icons");exports.ClickablePropertyNameCell=(0,styled_components_1.default)(fields_layout_1.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);
-    }
-  }
-  ${icons_1.ShelfIcon} {
-    margin-left: 4px;
-    height: var(--schema-chevron-size);
-    width: var(--schema-chevron-size);
-    fill: var(--schema-chevron-color);
-    margin-top: -1px;
-  }
-
-  ${()=>{const e=(0,fields_layout_1.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 styled_components_1.css`
-        button {
-          ${(0,utils_1.typography)("schema-property-name")};
-          ${r};
-        }
-      `}return styled_components_1.css`
-      button {
-        ${(0,utils_1.typography)("schema-property-name")};
-      }
-    `}};
-`,exports.FieldLabel=styled_components_1.default.span`
+"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.ToggleButton=exports.ConstraintItem=exports.ExtensionValue=exports.ExampleValue=exports.DefaultValue=exports.EnumValue=exports.RecursiveLabel=exports.FieldValueLabel=exports.AccessLabel=exports.Tag=exports.AdditionalPropertiesLabel=exports.RequiredLabel=exports.PropertyLabel=exports.TypeTitle=exports.TypeName=exports.TypePrefix=exports.FieldLabel=void 0;const styled_components_1=__importDefault(require("styled-components")),theme_1=require("@redocly/theme");exports.FieldLabel=styled_components_1.default.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);
 `,exports.TypePrefix=(0,styled_components_1.default)(exports.FieldLabel)`
   color: var(--schema-type-text-color);
 `,exports.TypeName=(0,styled_components_1.default)(exports.FieldLabel)`
@@ -39,43 +10,52 @@
 `,exports.TypeTitle=(0,styled_components_1.default)(exports.FieldLabel)`
   color: var(--schema-type-title-text-color);
   word-break: break-word;
-`,exports.TypeFormat=exports.TypeName,exports.PropertyLabel=(0,styled_components_1.default)(exports.FieldLabel.withComponent("div"))`
-  color: var(--text-secondary);
+`,exports.PropertyLabel=(0,styled_components_1.default)(exports.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;
-`,exports.RequiredLabel=(0,styled_components_1.default)(exports.PropertyLabel)`
+`,exports.RequiredLabel=(0,styled_components_1.default)(exports.FieldLabel)`
   color: var(--schema-property-required-label-text-color);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
 `,exports.AdditionalPropertiesLabel=(0,styled_components_1.default)(exports.PropertyLabel)`
   color: var(--schema-property-additional-label-text-color);
-`,exports.AccessLabel=(0,styled_components_1.default)(exports.PropertyLabel)`
+`,exports.Tag=styled_components_1.default.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);
+`,exports.AccessLabel=(0,styled_components_1.default)(exports.Tag)`
   color: var(--schema-property-access-label-text-color);
-`,exports.FieldValueLabel=(0,styled_components_1.default)(exports.FieldLabel)`
-  background-color: var(--schema-inline-background-color);
+  background-color: var(--bg-color);
+  border: 1px solid var(--border-color-secondary);
+`,exports.FieldValueLabel=(0,styled_components_1.default)(exports.Tag)`
+  background-color: var(--schema-inline-bg-color);
   border-radius: var(--border-radius);
   border: var(--schema-inline-border);
-  padding: 1px var(--spacing-unit);
-
-  ${(0,utils_1.typography)("schema-inline-code")}
-`,exports.RecursiveLabel=(0,styled_components_1.default)(exports.FieldValueLabel)`
-  background-color: var(--schema-recursive-background-color);
+  padding: 0 var(--spacing-unit);
+`,exports.RecursiveLabel=(0,styled_components_1.default)(exports.Tag)`
+  background-color: var(--schema-recursive-bg-color);
   border-color: var(--schema-recursive-border-color);
   color: var(--schema-recursive-text-color);
-`,exports.DeprecatedLabel=(0,styled_components_1.default)(exports.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);
 `,exports.EnumValue=(0,styled_components_1.default)(exports.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);
-`,exports.DefaultValue=(0,styled_components_1.default)(exports.FieldValueLabel)`
-  background-color: var(--schema-default-background-color);
+`,exports.DefaultValue=(0,styled_components_1.default)(exports.Tag)`
+  background-color: var(--schema-default-bg-color);
   border-color: var(--schema-default-border-color);
   color: var(--schema-default-text-color);
-`,exports.ExampleValue=(0,styled_components_1.default)(exports.FieldValueLabel)`
-  background-color: var(--schema-example-background-color);
+`,exports.ExampleValue=(0,styled_components_1.default)(exports.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 @@
     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;
+  }
 `,exports.ExtensionValue=(0,styled_components_1.default)(exports.ExampleValue)``,exports.ConstraintItem=(0,styled_components_1.default)(exports.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 @@
   & + & {
     margin-left: 0;
   }
-`,exports.PatternLabel=(0,styled_components_1.default)(exports.ConstraintItem)``,exports.ToggleButton=styled_components_1.default.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;
+`,exports.ToggleButton=(0,styled_components_1.default)(theme_1.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/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/components/common/LinkToField.js

@@ -1,14 +1,20 @@
-"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.ShareLinkToField=exports.LinkToField=exports.generateDeepLink=void 0;const styled_components_1=__importDefault(require("styled-components")),react_1=__importDefault(require("react")),theme_1=require("@redocly/theme"),services_1=require("../../services"),helpers_1=require("../../services/history/helpers"),utils_1=require("../../utils"),linkify_1=require("./linkify");function generateDeepLink(e,i){const t=e.deps.operation,r=(0,helpers_1.constructFieldDeepFragment)(e);if(!(null==t?void 0:t.id)&&!t.isCallback)return"#"+r;let n=i.pagination===services_1.Pagination.Item?"#":t.href;return(0,services_1.joinWithSeparator)(n,r,"!")}exports.generateDeepLink=generateDeepLink;const LinkToField=e=>{const i=e.to;return react_1.default.createElement(exports.ShareLinkToField,{className:e.className,isActive:!(!(null==e?void 0:e.location)||!(0,utils_1.pathMatchedLink)(e.location,i)),to:i,id:null==i?void 0:i.split("#")[1]})};exports.LinkToField=LinkToField,exports.ShareLinkToField=(0,styled_components_1.default)(linkify_1.ShareLink)`
-  left: 10px;
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,i,r){void 0===r&&(r=i);var o=Object.getOwnPropertyDescriptor(t,i);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[i]}}),Object.defineProperty(e,r,o)}:function(e,t,i,r){void 0===r&&(r=i),e[r]=t[i]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var i in e)"default"!==i&&Object.prototype.hasOwnProperty.call(e,i)&&__createBinding(t,e,i);return __setModuleDefault(t,e),t};Object.defineProperty(exports,"__esModule",{value:!0}),exports.ShareLinkToField=exports.LinkToField=exports.generateDeepLink=void 0;const jsx_runtime_1=require("react/jsx-runtime"),styled_components_1=__importStar(require("styled-components")),react_router_dom_1=require("react-router-dom"),theme_1=require("@redocly/theme"),utils_1=require("../../utils"),services_1=require("../../services"),helpers_1=require("../../services/history/helpers"),linkify_1=require("./linkify");function generateDeepLink(e){const t=e.deps.operation,i=(0,helpers_1.constructFieldDeepFragment)(e);if(!(null==t?void 0:t.id)&&!t.isCallback)return"#"+i.toLowerCase();const r=(0,services_1.joinWithSeparator)(t.href,(0,services_1.joinWithSeparator)(t.id,i),"#");return(0,utils_1.encodeBackSlashes)(r.toLowerCase())}exports.generateDeepLink=generateDeepLink;const LinkToField=({to:e,className:t})=>{const i=e,r=(0,react_router_dom_1.useLocation)(),o=null==i?void 0:i.split("#")[1],n=!!r&&r.hash===`#${o}`;return(0,jsx_runtime_1.jsx)(exports.ShareLinkToField,{ariaLabel:`link  to ${i}`,className:t,isActive:n,to:i,id:o})};exports.LinkToField=LinkToField,exports.ShareLinkToField=(0,styled_components_1.default)(linkify_1.ShareLink)`
   display: flex;
-  ${({isActive:e})=>e&&`\n    ${theme_1.AnchorIcon} {\n      visibility: visible;\n    }\n  `}
-  :hover ${theme_1.AnchorIcon}, :focus ${theme_1.AnchorIcon} {
-    visibility: visible;
+  ${theme_1.LinkIcon} {
+    visibility: hidden;
+    cursor: pointer;
+    background-color: var(--bg-color);
   }
 
-  ${theme_1.AnchorIcon} {
-    width: 13px;
-    height: 13px;
+  ${({isActive:e})=>e&&styled_components_1.css`
+      ${theme_1.LinkIcon} {
+        visibility: visible;
+        opacity: 1;
+      }
+    `}
+  :hover ${theme_1.LinkIcon}, :focus ${theme_1.LinkIcon} {
+    visibility: visible;
+    opacity: 1;
   }
 `;
 //# sourceMappingURL=LinkToField.js.map

package/lib/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/components/common/OperationItemTitle.js

@@ -0,0 +1,33 @@
+"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.Heading=exports.Title=void 0;const styled_components_1=__importDefault(require("styled-components")),theme_1=require("@redocly/theme");exports.Title=styled_components_1.default.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 {
+    ${theme_1.LinkIcon} {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+`,exports.Heading=(0,styled_components_1.default)(theme_1.H2)`
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  flex-wrap: wrap;
+
+  :hover {
+    ${theme_1.LinkIcon} {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+`;
+//# sourceMappingURL=OperationItemTitle.js.map

package/lib/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 {};