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

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

@@ -0,0 +1,28 @@
+import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";import{memo}from"react";import styled from"styled-components";import{useAtom}from"jotai";import{LinkIcon}from"@redocly/theme";import{Dropdown}from"../Dropdown";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{useTranslate}from"../../../hooks";function BodyContentComponent({required:e,skipReadOnly:o,skipWriteOnly:i,description:t,content:n,deepLink:r}){const a=useTranslate(),[s,m]=useAtom(activeMimeNameAtom);if(!n)return null;const{schema:l,examples:p,operation:d,name:c}=getActiveMediaType(n,s),g=n.mediaTypes.map((({name:e})=>({label:e,value:e})));return _jsxs(_Fragment,{children:[_jsxs(Title,{children:[r&&_jsx(LinkToField,{to:r}),a("openapi.body","Body"),_jsx(Dropdown,{options:g,value:c,triggerVariant:"ghost",triggerSize:"large",onChange:({value:e})=>m(e)})]}),e&&_jsx(RequiredLabel,{children:a("openapi.badges.required","required")}),_jsx(StyledMarkdown,{source:t}),"object"===(null==l?void 0:l.type)&&(null==l?void 0:l.constraints)&&_jsx(ConstraintsView,{constraints:(null==l?void 0:l.constraints)||[]}),_jsx(Schema,{skipReadOnly:o,skipWriteOnly:i,schema:l,examples:p,operation:d,level:1,disableDeepLinks:!r},"schema")]})}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-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 {
+    ${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-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,2 @@
+import type { ClearButtonProps } from './types';
+export declare const ClearButton: import("react").NamedExoticComponent<ClearButtonProps>;

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

@@ -0,0 +1,2 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{memo}from"react";const ClearButtonComponent=({className:t,style:e,handleClear:o})=>_jsx("button",{className:t,style:e,onClick:o,children:"✕"});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 @@
+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/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-esm/components/common/CodeBlockPanel.js

@@ -0,0 +1,6 @@
+import styled from"styled-components";import{Panel,PanelBody}from"@redocly/theme";export const CodeBlockPanel=styled(Panel)`
+  ${PanelBody} {
+    padding: var(--spacing-sm) 0 0;
+  }
+`;
+//# sourceMappingURL=CodeBlockPanel.js.map

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

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

package/lib-esm/components/common/ConstraintsView.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{Tag}from"./Fields";function ConstraintsViewComponent({constraints:s}){return 0===s.length?null:_jsx(Wrapper,{children:s.map((s=>_jsxs(Tag,{children:[" ",s," "]},s)))})}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,12 @@
+import type { SelectOption } from '@redocly/theme';
+export interface DropdownProps<T> {
+    value: T;
+    onChange: ({ label, value }: SelectOption<T>) => 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-esm/components/common/Dropdown/Dropdown.js

@@ -0,0 +1,27 @@
+import{jsx as _jsx}from"react/jsx-runtime";import styled from"styled-components";import{Dropdown as DropdownTheme,typedMemo,CheckmarkIcon,DropdownMenu,DropdownMenuItem,Button}from"@redocly/theme";function DropdownComponent({options:e,value:n,onChange:o,className:t,triggerVariant:r="outlined",triggerSize:i="small"}){var a;const l=null===(a=e.find((e=>e.value===n)))||void 0===a?void 0:a.label;return 1===e.length?_jsx(Title,{children:l}):_jsx(DropdownTheme,{className:t,trigger:_jsx(Button,{variant:r,size:i,type:"button",children:l}),withArrow:!0,children:_jsx(DropdownMenu,{children:e.map((e=>_jsx(StyledDropdownMenuItem,{active:e.value===n,onAction:()=>o(e),suffix:e.value===n&&_jsx(StyledCheckmarkIcon,{}),children:e.label},e.label)))})})}export const Dropdown=typedMemo(DropdownComponent);const StyledCheckmarkIcon=styled(CheckmarkIcon)`
+  width: 16px;
+  height: 16px;
+  margin-left: auto;
+`,StyledDropdownMenuItem=styled(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.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-esm/components/common/Dropdown/index.d.ts

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

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

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

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

@@ -0,0 +1,5 @@
+import type { ReactElement } from 'react';
+export interface ExpandableExampleProps {
+    value: string;
+}
+export declare function ExpandableExample({ value }: ExpandableExampleProps): ReactElement;

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

@@ -0,0 +1,10 @@
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import styled from"styled-components";import{Button}from"@redocly/theme";import{useMemo,useState}from"react";import{Markdown}from"../../Markdown";import{ExampleValue}from"../Fields";import{useTranslate}from"../../../hooks";const MAX_EXAMPLE_LENGTH=150;export function ExpandableExample({value:e}){const s=useTranslate(),[o,a]=useState(!1),t=useMemo((()=>e.slice(0,MAX_EXAMPLE_LENGTH)),[e]);return _jsxs(Container,{children:[_jsx(Markdown,{source:o?e:t}),(e!==t||o)&&_jsx(ButtonWrap,{children:_jsx(Button,{variant:"link",size:"small",onClick:()=>{a(!o)},children:o?s("openapi.hideExample","Hide example"):s("openapi.showExample","Show example")})})]})}const Container=styled(ExampleValue)`
+  display: inline;
+
+  & * {
+    display: inline;
+  }
+`,ButtonWrap=styled.span`
+  margin-left: var(--spacing-xs);
+`;
+//# sourceMappingURL=ExpandableExample.js.map

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

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

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

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

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

@@ -0,0 +1,6 @@
+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.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;
+}, never>;
+export declare const PropertyCellWithInner: import("styled-components").StyledComponent<"td", any, {
+    kind?: string;
+}, never>;
+export declare const PropertyNameCell: import("styled-components").StyledComponent<"td", any, {
+    kind?: string;
+}, 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>;

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

@@ -0,0 +1,223 @@
+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-color-secondary);
+`;const repeatingGradient=css`
+  repeating-linear-gradient(0deg,
+  var(--schemas-lines-color),
+  var(--schemas-lines-color) 3px,
+  transparent 3px,
+  transparent 5px,
+  var(--schemas-lines-color) 5px);
+`;export const PropertyCell=styled.td`
+  box-sizing: border-box;
+  position: relative;
+  background-image: ${repeatingGradient};
+  background-repeat: no-repeat;
+  background-size: 1px 100%;
+  display: block;
+  overflow: hidden;
+  padding: 0 20px;
+  margin-bottom: 2px;
+
+  @media screen and (min-width: ${breakpoints.small}) {
+    display: table-cell;
+    overflow: initial;
+    padding: 10px;
+    margin-bottom: 0;
+  }
+
+  tr:first-of-type > & {
+    background-image: ${repeatingGradient};
+    background-position: 0 10px;
+    padding-top: 0;
+  }
+
+  tr.last > & {
+    background-image: ${repeatingGradient};
+    padding-bottom: 0;
+    background-size: 0.9px 100%;
+
+    @media screen and (min-width: ${breakpoints.small}) {
+      background-size: 0.9px 22px;
+    }
+  }
+
+  tr.last + tr > & {
+    background: none;
+  }
+
+  tr.last:first-child > & {
+    background-image: ${repeatingGradient};
+    background-size: 0.9px 100%;
+    background-position: 0 20px;
+
+    @media screen and (min-width: ${breakpoints.small}) {
+      background-size: 0.9px 22px;
+      background-position: 0 0;
+    }
+  }
+`;export const PropertyCellWithInner=styled(PropertyCell)`
+  padding: 0;
+`;export const PropertyNameCell=styled(PropertyCell)`
+  vertical-align: top;
+  line-height: 23px;
+  white-space: nowrap;
+  font-size: 14px;
+  font-family: var(--field-name-font-family);
+
+  &.deprecated {
+    ${deprecatedCss};
+  }
+
+  ${({kind:e})=>"patternProperties"===e&&css`
+      span.field-name {
+        white-space: break-spaces;
+        text-align: left;
+        display: inline-table;
+        line-height: 1.5;
+      }
+    `}
+
+  ${()=>{const e=(r="--schema-field-name-word-break","undefined"!=typeof document?getComputedStyle(document.documentElement).getPropertyValue(r).trim():"");var r;if(["break-all","break-word"].includes(e)){const r=`\n      && span:last-child {\n        white-space: normal;\n        word-break: ${e};\n        vertical-align: top;\n        max-width: calc(100% - 21px);\n        display: inline-flex;\n      }\n    `;return css`
+        ${typography("schemas-property-name")}
+        ${r}
+      `}return typography("schemas-property-name")}};
+
+  .field-name {
+    display: inline-flex;
+    align-items: center;
+  }
+`;export const PropertyDetailsCell=styled.td`
+  box-sizing: border-box;
+  vertical-align: top;
+
+  tr.expanded & {
+    border-bottom: none;
+  }
+
+  tr.last > & {
+    border: none;
+    background-position: top left;
+    background-repeat: no-repeat;
+    background-size: 1px 100%;
+    padding-bottom: 0;
+
+    /* workaround for discriminator dropdown oveflowing scrolling container,
+    fixes the issue for the last item in the schema only */
+    & > div > div.dropdown > .dropdown-selector-content {
+      position: relative;
+    }
+  }
+
+  tr:first-of-type > & {
+    padding-top: 0;
+  }
+
+  border-bottom: none;
+  border-left: 1px solid var(--schemas-lines-color);
+  padding: 0 20px;
+  width: var(--schema-default-details-width);
+  min-width: 200px;
+
+  @media screen and (min-width: ${breakpoints.small}) {
+    border-bottom: 1px solid var(--border-color-primary);
+    border-left: none;
+    padding: 10px 0;
+  }
+`;export const PropertyBullet=styled.span`
+  margin-right: 10px;
+  color: var(--schemas-lines-color);
+  font-family: var(--code-font-family);
+  width: var(--schema-default-details-width);
+  border-left: 1px dashed var(--schemas-lines-color);
+  padding: 5px 10px;
+
+  @media screen and (min-width: ${breakpoints.small}) {
+    border-left: none;
+    padding: 10px;
+  }
+
+  &::before {
+    content: '';
+    display: inline-block;
+    vertical-align: middle;
+    width: 10px;
+    height: 1px;
+    background: var(--schemas-lines-color);
+  }
+`;export const InnerPropertiesWrap=styled.div`
+  padding: var(--schema-nested-offset);
+`;export const PropertiesTable=styled.table`
+  border-collapse: separate;
+  border-radius: var(--border-radius);
+  width: 100%;
+  font-size: var(--font-size-base);
+  display: block;
+
+  @media screen and (min-width: ${breakpoints.small}) {
+    display: table;
+  }
+
+  > tr,
+  > tbody > tr {
+    display: block;
+    margin-bottom: 10px;
+    border-spacing: 0;
+
+    @media screen and (min-width: ${breakpoints.small}) {
+      display: table-row;
+      margin-bottom: 0;
+      border-spacing: 0 2px;
+    }
+  }
+
+  > tr {
+    vertical-align: middle;
+  }
+
+  @media screen and (max-width: ${breakpoints.small}) and (-ms-high-contrast: none) {
+    td {
+      float: left;
+      width: 100%;
+    }
+  }
+
+  &
+    ${InnerPropertiesWrap},
+    &
+    ${InnerPropertiesWrap}
+    ${InnerPropertiesWrap}
+    ${InnerPropertiesWrap},
+    &
+    ${InnerPropertiesWrap}
+    ${InnerPropertiesWrap}
+    ${InnerPropertiesWrap}
+    ${InnerPropertiesWrap}
+    ${InnerPropertiesWrap} {
+    margin-left: var(--schema-nested-offset);
+    margin-bottom: var(--schema-nested-offset);
+    background: var(--schema-nested-background-color);
+    border-radius: var(--panel-border-radius);
+  }
+
+  &
+    ${InnerPropertiesWrap}
+    ${InnerPropertiesWrap},
+    &
+    ${InnerPropertiesWrap}
+    ${InnerPropertiesWrap}
+    ${InnerPropertiesWrap}
+    ${InnerPropertiesWrap},
+    &
+    ${InnerPropertiesWrap}
+    ${InnerPropertiesWrap}
+    ${InnerPropertiesWrap}
+    ${InnerPropertiesWrap}
+    ${InnerPropertiesWrap}
+    ${InnerPropertiesWrap} {
+    background: var(--panel-bg-color, #fff);
+  }
+`;
+//# sourceMappingURL=fields-layout.js.map

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

@@ -0,0 +1,38 @@
+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 PropertyLabel: 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 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

@@ -0,0 +1,93 @@
+import styled from"styled-components";import{Button}from"@redocly/theme";export const FieldLabel=styled.span`
+  vertical-align: middle;
+  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)`
+  color: var(--schema-type-text-color);
+`;export const TypeTitle=styled(FieldLabel)`
+  color: var(--schema-type-title-text-color);
+  word-break: break-word;
+`;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;
+  display: block;
+`;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 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);
+  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: 0 var(--spacing-unit);
+  width: fit-content;
+`;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);
+  padding: 0 var(--spacing-xs);
+`;export const EnumValue=styled(FieldValueLabel)`
+  background-color: var(--schema-enum-bg-color);
+  border-color: var(--schema-enum-border-color);
+  color: var(--schema-enum-text-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(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);
+
+  & + & {
+    margin-left: 0;
+  }
+
+  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-bg-color);
+  border-color: var(--schema-constraint-border-color);
+  color: var(--schema-constraint-text-color);
+  word-break: var(--code-word-break);
+  margin: 0 var(--spacing-unit);
+
+  & + & {
+    margin-left: 0;
+  }
+`;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/Fields/index.d.ts

@@ -0,0 +1,2 @@
+export * from './fields';
+export * from './fields-layout';

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

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

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

@@ -0,0 +1,13 @@
+import type { PropsWithChildren, ReactElement } from 'react';
+import type { FieldModel } from '../../models';
+import { ShareLink } from './linkify';
+interface LinkToFieldProps {
+    className?: string;
+    to?: string;
+}
+export declare function generateDeepLink(field: FieldModel, activeMimeName?: string): 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>;
+export {};

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

@@ -0,0 +1,20 @@
+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,o){const e=i.deps.operation,r=constructFieldDeepFragment(i,o);if(!(null==e?void 0:e.id)&&!e.isCallback)return"#"+r.toLowerCase();const t=joinWithSeparator(e.href,joinWithSeparator(e.id,r),"#");return encodeBackSlashes(t.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;
+  ${LinkIcon} {
+    visibility: hidden;
+    cursor: pointer;
+    background-color: var(--bg-color);
+  }
+
+  ${({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>;