@redocly/openapi-docs 3.12.0-rc.7 → 3.12.1

package/lib/components/Tabs/Tabs.js

@@ -1,10 +1,18 @@
-import{jsx as e}from"react/jsx-runtime";import{css as t}from"styled-components";import{StatusCode as n}from"@redocly/theme/components/StatusCode/StatusCode";import{styled as i}from"../../styled-components.js";function g({tabs:o,onChange:a,activeTab:l}){return e(s,{children:o.map(r=>e(c,{$active:r.key===l?.key,onClick:()=>a(r),children:e(n,{status:r.key,children:r.title})},r.key))})}const s=i.ol`
+import { jsx as _jsx } from "react/jsx-runtime";
+import { css } from 'styled-components';
+import { StatusCode } from '@redocly/theme/components/StatusCode/StatusCode';
+import { styled } from '../../styled-components.js';
+export function Tabs({ tabs, onChange, activeTab }) {
+    return (_jsx(TabList, { children: tabs.map((tab) => (_jsx(Tab, { "$active": tab.key === activeTab?.key, onClick: () => onChange(tab), children: _jsx(StatusCode, { status: tab.key, children: tab.title }) }, tab.key))) }));
+}
+const TabList = styled.ol `
   display: flex;
   flex-wrap: wrap;
   list-style: none;
   margin: 0;
   padding: 0;
-`,c=i.li`
+`;
+const Tab = styled.li `
   display: inline-flex;
   align-items: center;
   list-style: none;
@@ -22,13 +30,16 @@ import{jsx as e}from"react/jsx-runtime";import{css as t}from"styled-components";
   button {
     color: var(--text-color-secondary);
 
-    ${({$active:o})=>o?t`
+    ${({ $active }) => $active
+    ? css `
             color: var(--text-color-primary);
             background-color: var(--tab-bg-color-filled);
-          `:t`
+          `
+    : css `
             &:hover {
               color: var(--text-color-primary);
             }
           `}
   }
-`;export{g as Tabs};
+`;
+//# sourceMappingURL=Tabs.js.map

package/lib/components/Tabs/index.js

@@ -1 +1,3 @@
-import{Tabs as r}from"./Tabs.js";import{useTabsState as a}from"./useTabsState.js";export{r as Tabs,a as useTabsState};
+export { Tabs } from './Tabs.js';
+export { useTabsState } from './useTabsState.js';
+//# sourceMappingURL=index.js.map

package/lib/components/Tabs/useTabsState.js

@@ -1 +1,22 @@
-import{useCallback as k,useState as m}from"react";import{useMount as n}from"@redocly/theme/core/openapi";function p({tabs:r,defaultTab:e,onChange:t}){const[s,o]=m(e||r[0].key);n(()=>{e&&(o(e),t?.(e))});const c=k(i=>{s!==i.key&&o(i.key),t?.(i.key)},[s,t]);return{activeTab:s,handleTabChange:c}}export{p as useTabsState};
+import { useCallback, useState } from 'react';
+import { useMount } from '@redocly/theme/core/openapi';
+export function useTabsState({ tabs, defaultTab, onChange }) {
+    const [activeTab, setActiveTab] = useState(defaultTab || tabs[0].key);
+    useMount(() => {
+        if (defaultTab) {
+            setActiveTab(defaultTab);
+            onChange?.(defaultTab);
+        }
+    });
+    const handleTabChange = useCallback((tab) => {
+        if (activeTab !== tab.key) {
+            setActiveTab(tab.key);
+        }
+        onChange?.(tab.key);
+    }, [activeTab, onChange]);
+    return {
+        activeTab,
+        handleTabChange,
+    };
+}
+//# sourceMappingURL=useTabsState.js.map

package/lib/components/TagItem/OperationNavigationItems.js

@@ -1,10 +1,22 @@
-import{jsx as e,jsxs as i,Fragment as b}from"react/jsx-runtime";import{memo as x}from"react";import{joinWithSeparator as u}from"../../services/index.js";import{encodeBackSlashes as w}from"../../utils/index.js";import{HttpVerb as y,NavigationBadge as n}from"../common/index.js";import{styled as r}from"../../styled-components.js";import{StyledButton as j}from"./styled.js";function z({title:s,items:l,onClick:c,routingBasePath:p,translate:d}){return i(b,{children:[e(k,{children:s}),l.map(({id:h,href:m,httpVerb:o,path:g,deprecated:a,badges:f})=>e(B,{variant:"outlined",size:"large",onClick:()=>c(u(p,w(m))),children:i("span",{children:[e(y,{color:a?"http-deprecated":o,children:o}),e(I,{children:g}),a&&e(n,{deprecated:!0,children:d("openapi.badges.deprecated","Deprecated")}),f?.map(({name:t,color:v})=>e(n,{color:v,children:t},t))]})},h))]})}const D=x(z),k=r.span`
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo } from 'react';
+import { joinWithSeparator } from '../../services/index.js';
+import { encodeBackSlashes } from '../../utils/index.js';
+import { HttpVerb, NavigationBadge } from '../common/index.js';
+import { styled } from '../../styled-components.js';
+import { StyledButton } from './styled.js';
+function OperationNavigationItemsComponent({ title, items, onClick, routingBasePath, translate, }) {
+    return (_jsxs(_Fragment, { children: [_jsx(Heading, { children: title }), items.map(({ id, href, httpVerb, path, deprecated, badges }) => (_jsx(Item, { variant: "outlined", size: "large", onClick: () => onClick(joinWithSeparator(routingBasePath, encodeBackSlashes(href))), children: _jsxs("span", { children: [_jsx(HttpVerb, { color: deprecated ? 'http-deprecated' : httpVerb, children: httpVerb }), _jsx(Path, { children: path }), deprecated && (_jsx(NavigationBadge, { deprecated: true, children: translate('openapi.badges.deprecated', 'Deprecated') })), badges?.map(({ name, color }) => (_jsx(NavigationBadge, { color: color, children: name }, name)))] }) }, id)))] }));
+}
+export const OperationNavigationItems = memo(OperationNavigationItemsComponent);
+const Heading = styled.span `
   font-size: var(--font-size-base);
   line-height: var(--line-height-base);
   font-weight: var(--font-weight-bold);
   color: var(--text-color-primary);
   margin: var(--spacing-sm) 0 var(--spacing-xxs) 0;
-`,B=r(j)`
+`;
+const Item = styled(StyledButton) `
   border-radius: var(--border-radius);
   background: var(--bg-color);
   justify-content: space-between;
@@ -24,7 +36,8 @@ import{jsx as e,jsxs as i,Fragment as b}from"react/jsx-runtime";import{memo as x
     content: '→';
     line-height: var(--line-height-base);
   }
-`,I=r.span`
+`;
+const Path = styled.span `
   font-family: var(--font-family-base);
   font-size: var(--font-size-base);
   line-height: var(--line-height-base);
@@ -33,4 +46,5 @@ import{jsx as e,jsxs as i,Fragment as b}from"react/jsx-runtime";import{memo as x
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow-x: hidden;
-`;export{D as OperationNavigationItems};
+`;
+//# sourceMappingURL=OperationNavigationItems.js.map

package/lib/components/TagItem/OperationsNavigation.js

@@ -1,6 +1,50 @@
-import{jsx as h,jsxs as d}from"react/jsx-runtime";import{useMemo as w,memo as y,useState as S,useCallback as C}from"react";import{useNavigate as O}from"react-router-dom";import{LayoutVariant as A}from"@redocly/config";import{useAtomValue as N}from"jotai/index";import{SamplesPanel as j}from"../common/index.js";import{layoutAtom as E}from"../../jotai/app.js";import{OperationNavigationItems as f}from"./OperationNavigationItems.js";import{StyledButton as W}from"./styled.js";import{useTranslate as B}from"../../hooks/index.js";import{styled as I}from"../../styled-components.js";const r=8;function P({items:l,routingBasePath:p}){const o=B(),[n,g]=S(!1),m=O(),k=N(E)===A.STACKED,{operations:a,webhooks:s,count:c}=w(()=>{const t=l.filter(e=>e.type==="operation"),x=n?t:t.slice(0,r),{operations:v,webhooks:b}=x.reduce((e,i)=>(i.isWebhook?e.webhooks.push(i):e.operations.push(i),e),{operations:[],webhooks:[]});return{operations:v,webhooks:b,count:!n&&t.length>r?t.length-r:0}},[n,l]),u=C(t=>m(t),[m]);return!a.length&&!s.length?null:d(T,{isStacked:k,"data-testid":"operation-navigation-list",children:[a.length>0&&h(f,{items:a,onClick:u,routingBasePath:p,translate:o,title:o("openapi.operations","Operations")}),s.length>0&&h(f,{items:s,onClick:u,routingBasePath:p,translate:o,title:o("openapi.webhooks","Webhooks")}),!n&&!!c&&d(W,{variant:"link",size:"large","data-testid":"show-more-operations",fullWidth:!0,onClick:()=>g(!0),children:[o("openapi.actions.show","Show")," ",c," ",o("openapi.actions.more","more"),"..."]})]})}const H=y(P),T=I(j)`
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, memo, useState, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { LayoutVariant } from '@redocly/config';
+import { useAtomValue } from 'jotai/index';
+import { SamplesPanel } from '../common/index.js';
+import { layoutAtom } from '../../jotai/app.js';
+import { OperationNavigationItems } from './OperationNavigationItems.js';
+import { StyledButton } from './styled.js';
+import { useTranslate } from '../../hooks/index.js';
+import { styled } from '../../styled-components.js';
+const MAX_OPERATIONS = 8;
+export function OperationsNavigationComponent({ items, routingBasePath, }) {
+    const translate = useTranslate();
+    const [isExpanded, setIsExpanded] = useState(false);
+    const navigate = useNavigate();
+    const layout = useAtomValue(layoutAtom);
+    const isStacked = layout === LayoutVariant.STACKED;
+    const { operations, webhooks, count } = useMemo(() => {
+        const all = items.filter((item) => item.type === 'operation');
+        const list = isExpanded ? all : all.slice(0, MAX_OPERATIONS);
+        const { operations, webhooks } = list.reduce((acc, item) => {
+            if (item.isWebhook) {
+                acc.webhooks.push(item);
+            }
+            else {
+                acc.operations.push(item);
+            }
+            return acc;
+        }, { operations: [], webhooks: [] });
+        return {
+            operations,
+            webhooks,
+            count: !isExpanded && all.length > MAX_OPERATIONS ? all.length - MAX_OPERATIONS : 0,
+        };
+    }, [isExpanded, items]);
+    const handleOnClick = useCallback((link) => navigate(link), [navigate]);
+    if (!operations.length && !webhooks.length) {
+        return null;
+    }
+    return (_jsxs(Wrapper, { isStacked: isStacked, "data-testid": "operation-navigation-list", children: [operations.length > 0 && (_jsx(OperationNavigationItems, { items: operations, onClick: handleOnClick, routingBasePath: routingBasePath, translate: translate, title: translate('openapi.operations', 'Operations') })), webhooks.length > 0 && (_jsx(OperationNavigationItems, { items: webhooks, onClick: handleOnClick, routingBasePath: routingBasePath, translate: translate, title: translate('openapi.webhooks', 'Webhooks') })), !isExpanded && Boolean(count) && (_jsxs(StyledButton, { variant: "link", size: "large", "data-testid": "show-more-operations", fullWidth: true, onClick: () => setIsExpanded(true), children: [translate('openapi.actions.show', 'Show'), " ", count, ' ', translate('openapi.actions.more', 'more'), "..."] }))] }));
+}
+export const OperationsNavigation = memo(OperationsNavigationComponent);
+const Wrapper = styled(SamplesPanel) `
   display: flex;
   flex-direction: column;
   gap: var(--spacing-xxs);
   padding-top: var(--spacing-xxl);
-`;export{H as OperationsNavigation,P as OperationsNavigationComponent};
+`;
+//# sourceMappingURL=OperationsNavigation.js.map

package/lib/components/TagItem/TagItem.js

@@ -1,23 +1,56 @@
-import{jsx as i,jsxs as t}from"react/jsx-runtime";import{memo as u,useCallback as h}from"react";import{useNavigate as v}from"react-router-dom";import{useAtomValue as x}from"jotai";import{LayoutVariant as b}from"@redocly/config";import{breakpoints as k}from"@redocly/theme/core/openapi";import{Button as w}from"@redocly/theme/components/Button/Button";import{H2 as y}from"@redocly/theme/components/Typography/H2";import{LinkIcon as S}from"@redocly/theme/icons/LinkIcon/LinkIcon";import{Row as C,SamplesMiddlePanel as j,ShareLink as T}from"../common/index.js";import{Markdown as $}from"../Markdown/index.js";import{OperationsNavigation as A}from"./OperationsNavigation.js";import{layoutAtom as I}from"../../jotai/app.js";import{useTranslate as L}from"../../hooks/index.js";import{styled as n}from"../../styled-components.js";function B({item:o,routingBasePath:r="",isExpanded:e}){const l=L(),{description:p,name:m,href:d}=o,s=v(),c=x(I),g=h(()=>{s(r+o.href)},[o.href,s,r]),a=!!o.items.length,f=c===b.STACKED;return t(H,{expanded:e,children:[t(C,{layout:c,children:[t(j,{fullWidth:!a,isStacked:f,children:[t(N,{children:[i(T,{to:d,"aria-label":`link to ${m}`}),m]}),i($,{source:p})]}),a&&i(A,{items:o.items,routingBasePath:r})]}),a&&!e&&t(M,{type:"button",variant:"text",size:"medium",onClick:g,children:["+ ",l("openapi.actions.show","Show")]})]})}const U=u(B),H=n.div`
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAtomValue } from 'jotai';
+import { LayoutVariant } from '@redocly/config';
+import { breakpoints } from '@redocly/theme/core/openapi';
+import { Button } from '@redocly/theme/components/Button/Button';
+import { PageActions } from '@redocly/theme/components/PageActions/PageActions';
+import { H2 } from '@redocly/theme/components/Typography/H2';
+import { LinkIcon } from '@redocly/theme/icons/LinkIcon/LinkIcon';
+import { Row, SamplesMiddlePanel, ShareLink } from '../common/index.js';
+import { Markdown } from '../Markdown/index.js';
+import { OperationsNavigation } from './OperationsNavigation.js';
+import { layoutAtom } from '../../jotai/app.js';
+import { useTranslate } from '../../hooks/index.js';
+import { styled } from '../../styled-components.js';
+export function TagItemComponent({ item, routingBasePath = '', isExpanded, }) {
+    const translate = useTranslate();
+    const { description, name, href } = item;
+    const navigate = useNavigate();
+    const layout = useAtomValue(layoutAtom);
+    const tagItemSlug = routingBasePath + item.href;
+    const handleClick = useCallback(() => {
+        navigate(tagItemSlug);
+    }, [navigate, tagItemSlug]);
+    const expandable = Boolean(item.items.length);
+    const isStacked = layout === LayoutVariant.STACKED;
+    return (_jsxs(Wrapper, { expanded: isExpanded, children: [_jsxs(Row, { layout: layout, children: [_jsxs(SamplesMiddlePanel, { fullWidth: !expandable, isStacked: isStacked, children: [_jsxs(Heading, { children: [_jsx(ShareLink, { to: href, "aria-label": `link to ${name}` }), name, _jsx(PageActions, { pageSlug: tagItemSlug })] }), _jsx(Markdown, { source: description })] }), expandable && (_jsx(OperationsNavigation, { items: item.items, routingBasePath: routingBasePath }))] }), expandable && !isExpanded && (_jsxs(ShowButton, { type: "button", variant: "text", size: "medium", onClick: handleClick, children: ["+ ", translate('openapi.actions.show', 'Show')] }))] }));
+}
+export const TagItem = memo(TagItemComponent);
+const Wrapper = styled.div `
   padding-top: var(--spacing-lg);
-  padding-bottom: ${({expanded:o})=>o?"var(--spacing-xxl)":""};
-`,M=n(w)`
+  padding-bottom: ${({ expanded }) => (expanded ? 'var(--spacing-xxl)' : '')};
+`;
+const ShowButton = styled(Button) `
   margin: var(--spacing-md) var(--spacing-xl) var(--spacing-xxs);
   width: calc(100% - var(--spacing-xl) * 2);
 
-  @media screen and (min-width: ${k.medium}) {
+  @media screen and (min-width: ${breakpoints.medium}) {
     --button-margin-md: calc(var(--spacing-xl) * 2);
 
     margin-left: var(--button-margin-md);
     margin-right: var(--button-margin-md);
     width: calc(100% - var(--button-margin-md) * 2);
   }
-`,N=n(y)`
+`;
+const Heading = styled(H2) `
+  display: flex;
   :hover {
-    ${S} {
+    ${LinkIcon} {
       opacity: 1;
       visibility: visible;
     }
   }
-  overflow-wrap: break-word;
-`;export{U as TagItem,B as TagItemComponent};
+`;
+//# sourceMappingURL=TagItem.js.map

package/lib/components/TagItem/index.js

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

package/lib/components/TagItem/styled.js

@@ -1,5 +1,8 @@
-import{Button as t}from"@redocly/theme/components/Button/Button";import{styled as o}from"../../styled-components.js";const e=o(t)`
+import { Button } from '@redocly/theme/components/Button/Button';
+import { styled } from '../../styled-components.js';
+export const StyledButton = styled(Button) `
   & + & {
     margin-left: 0;
   }
-`;export{e as StyledButton};
+`;
+//# sourceMappingURL=styled.js.map

package/lib/components/TagItem/types.js

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

package/lib/components/ViewNested/ViewNested.js

@@ -1,4 +1,31 @@
-import{jsx as o,Fragment as l,jsxs as t}from"react/jsx-runtime";import{css as c}from"styled-components";import{memo as w,useEffect as $,useState as j}from"react";import{isUndefined as C}from"@redocly/theme/core/openapi";import{cycleColorsByLevel as N}from"../PropertyDetails/cycleColorsByLevel.js";import{CircleIcon as S}from"../PropertyDetails/PlusCircleIcon.js";import{LabelValue as V}from"../common/styled.js";import{styled as d}from"../../styled-components.js";function _({expandByDefault:e,level:g,expandable:h=!1,expandText:v,hideText:x,hideDivider:y=!1,children:i,expandedAll:a,isNestedArray:n}){const[r,p]=j((e||n)??!1);$(()=>{C(a)||p(a)},[a]);const s=r?N(g):void 0;if(!h)return i;const b=()=>{p(u=>!u)};return n?t(l,{children:[o(V,{children:"Array ["}),o(f,{$isArrayInsideArray:n,className:"view-nested-wrapper",children:o(m,{color:s,children:i})})]}):o(l,{children:t(f,{$divider:!y&&!r,className:"view-nested-wrapper",children:[t(k,{onClick:b,children:[o(S,{sign:r?"-":"+",color:s}),!r&&v,r&&(x||"")]}),r&&o(m,{color:s,children:i})]})})}const U=w(_),k=d.button`
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { css } from 'styled-components';
+import { memo, useEffect, useState } from 'react';
+import { isUndefined } from '@redocly/theme/core/openapi';
+import { cycleColorsByLevel } from '../PropertyDetails/cycleColorsByLevel.js';
+import { CircleIcon } from '../PropertyDetails/PlusCircleIcon.js';
+import { LabelValue } from '../common/styled.js';
+import { styled } from '../../styled-components.js';
+function ViewNestedComponent({ expandByDefault, level, expandable = false, expandText, hideText, hideDivider = false, children, expandedAll, isNestedArray, }) {
+    const [expanded, setExpanded] = useState((expandByDefault || isNestedArray) ?? false);
+    useEffect(() => {
+        if (!isUndefined(expandedAll)) {
+            setExpanded(expandedAll);
+        }
+    }, [expandedAll]);
+    const color = expanded ? cycleColorsByLevel(level) : undefined;
+    if (!expandable)
+        return children;
+    const handleToggle = () => {
+        setExpanded((prev) => !prev);
+    };
+    if (isNestedArray) {
+        return (_jsxs(_Fragment, { children: [_jsx(LabelValue, { children: "Array [" }), _jsx(Wrapper, { "$isArrayInsideArray": isNestedArray, className: "view-nested-wrapper", children: _jsx(StyledNested, { color: color, children: children }) })] }));
+    }
+    return (_jsx(_Fragment, { children: _jsxs(Wrapper, { "$divider": !hideDivider && !expanded, className: "view-nested-wrapper", children: [_jsxs(ShowProperty, { onClick: handleToggle, children: [_jsx(CircleIcon, { sign: expanded ? '-' : '+', color: color }), !expanded && expandText, expanded && (hideText || '')] }), expanded && _jsx(StyledNested, { color: color, children: children })] }) }));
+}
+export const ViewNested = memo(ViewNestedComponent);
+const ShowProperty = styled.button `
   background: none;
   border: none;
   cursor: pointer;
@@ -12,23 +39,29 @@ import{jsx as o,Fragment as l,jsxs as t}from"react/jsx-runtime";import{css as c}
   line-height: var(--line-height-base);
   margin: var(--spacing-xxs) 0 var(--spacing-xs);
   width: 100%;
-`,m=d.div`
+`;
+const StyledNested = styled.div `
   padding-left: var(--schema-nested-offset);
-  border-left: 1px solid ${({color:e})=>e||"var(--border-color-primary)"};
+  border-left: 1px solid ${({ color }) => color || 'var(--border-color-primary)'};
   margin: -10px 0 0 9px;
-  ${({color:e})=>e&&c`
+  ${({ color }) => color &&
+    css `
       .schema-name {
-        color: ${e};
+        color: ${color};
       }
     `}
-`,f=d.div`
+`;
+const Wrapper = styled.div `
   width: 100%;
-  ${({$isArrayInsideArray:e})=>e&&c`
+  ${({ $isArrayInsideArray }) => $isArrayInsideArray &&
+    css `
       padding-top: var(--schema-property-details-spacing);
     `}
 
-  ${({$divider:e})=>e&&c`
+  ${({ $divider }) => $divider &&
+    css `
       border-bottom: 1px solid var(--border-color-primary);
       padding-bottom: var(--schema-property-details-spacing);
     `}
-`;export{U as ViewNested};
+`;
+//# sourceMappingURL=ViewNested.js.map

package/lib/components/ViewNested/index.js

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

package/lib/components/common/Badges.js

@@ -1,12 +1,27 @@
-import{Fragment as i,jsx as t,jsxs as l}from"react/jsx-runtime";import{memo as m}from"react";import{css as f}from"styled-components";import{Badge as g}from"@redocly/theme/components/Badge/Badge";import{styled as d}from"../../styled-components.js";function p({badges:e,children:s}){if(!e)return t(i,{children:s});const n=e.filter(({position:r})=>r==="before"),c=e.filter(({position:r})=>r==="after");return l(i,{children:[n.map(({name:r,color:o})=>t(a,{color:o,children:r},r)),s,c.map(({name:r,color:o})=>t(a,{color:o,children:r},r))]})}const B=m(p),a=d(g)`
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { css } from 'styled-components';
+import { Badge } from '@redocly/theme/components/Badge/Badge';
+import { styled } from '../../styled-components.js';
+function CustomBadgesComponent({ badges, children }) {
+    if (!badges)
+        return _jsx(_Fragment, { children: children });
+    const badgesBefore = badges.filter(({ position }) => position === 'before');
+    const badgesAfter = badges.filter(({ position }) => position === 'after');
+    return (_jsxs(_Fragment, { children: [badgesBefore.map(({ name, color }) => (_jsx(StyledBadge, { color: color, children: name }, name))), children, badgesAfter.map(({ name, color }) => (_jsx(StyledBadge, { color: color, children: name }, name)))] }));
+}
+export const CustomBadges = memo(CustomBadgesComponent);
+export const StyledBadge = styled(Badge) `
   margin-left: 0;
-  background-color: ${({color:e})=>e||"var(--color-info-base)"};
-  ${({deprecated:e})=>e&&f`
+  background-color: ${({ color }) => color || 'var(--color-info-base)'};
+  ${({ deprecated }) => deprecated &&
+    css `
       color: var(--badge-deprecated-text-color);
       background-color: var(--badge-deprecated-bg-color);
       border-radius: var(--badge-deprecated-border-radius);
     `};
-`,w=d(a)`
+`;
+export const NavigationBadge = styled(StyledBadge) `
   margin-left: 0;
   font-size: var(--font-size-sm);
   line-height: var(--line-height-sm);
@@ -15,4 +30,5 @@ import{Fragment as i,jsx as t,jsxs as l}from"react/jsx-runtime";import{memo as m
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
-`;export{B as CustomBadges,w as NavigationBadge,a as StyledBadge};
+`;
+//# sourceMappingURL=Badges.js.map

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

@@ -1,6 +1,32 @@
-import{jsx as e,jsxs as n,Fragment as x}from"react/jsx-runtime";import{memo as u}from"react";import{useAtom as b}from"jotai";import{LinkIcon as w}from"@redocly/theme/icons/LinkIcon/LinkIcon";import{Dropdown as M}from"../Dropdown/index.js";import{RequiredLabel as T}from"../Fields/index.js";import{ConstraintsView as j}from"../ConstraintsView.js";import{Schema as k}from"../../Schema/index.js";import{getActiveMediaType as C}from"../../../models/index.js";import{Markdown as z}from"../../Markdown/index.js";import{activeMimeNameAtom as A}from"../../../jotai/app.js";import{LinkToField as q}from"../LinkToField.js";import{useTranslate as B}from"../../../hooks/index.js";import{styled as s}from"../../../styled-components.js";function F({required:m,skipReadOnly:p,skipWriteOnly:l,description:c,content:t,deepLink:r}){const a=B(),[g,f]=b(A);if(!t)return null;const{schema:i,examples:d,operation:h,name:v}=C(t,g),y=t.mediaTypes.map(({name:o})=>({label:o,value:o}));return n(x,{children:[n(O,{children:[r&&e(q,{to:r}),a("openapi.body","Body"),e(M,{options:y,value:v,triggerVariant:"ghost",triggerSize:"large",onChange:({value:o})=>f(o)})]}),m&&e(T,{children:a("openapi.badges.required","required")}),e(N,{source:c}),i?.type==="object"&&i?.constraints&&e(j,{constraints:i?.constraints||[]}),e(k,{skipReadOnly:p,skipWriteOnly:l,schema:i,examples:d,operation:h,level:1,disableDeepLinks:!r},"schema")]})}const P=u(F),N=s(z)`
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo } from 'react';
+import { useAtom } from 'jotai';
+import { LinkIcon } from '@redocly/theme/icons/LinkIcon/LinkIcon';
+import { Dropdown } from '../Dropdown/index.js';
+import { RequiredLabel } from '../Fields/index.js';
+import { ConstraintsView } from '../ConstraintsView.js';
+import { Schema } from '../../Schema/index.js';
+import { getActiveMediaType } from '../../../models/index.js';
+import { Markdown } from '../../Markdown/index.js';
+import { activeMimeNameAtom } from '../../../jotai/app.js';
+import { LinkToField } from '../LinkToField.js';
+import { useTranslate } from '../../../hooks/index.js';
+import { styled } from '../../../styled-components.js';
+function BodyContentComponent({ required, skipReadOnly, skipWriteOnly, description, content, deepLink, }) {
+    const translate = useTranslate();
+    const [activeMimeName, setActiveMimeName] = useAtom(activeMimeNameAtom);
+    if (!content) {
+        return null;
+    }
+    const { schema, examples, operation, name } = getActiveMediaType(content, activeMimeName);
+    const mimeTypeOptions = content.mediaTypes.map(({ name }) => ({ label: name, value: name }));
+    return (_jsxs(_Fragment, { children: [_jsxs(Title, { children: [deepLink && _jsx(LinkToField, { to: deepLink }), translate('openapi.body', 'Body'), _jsx(Dropdown, { options: mimeTypeOptions, value: name, triggerVariant: "ghost", triggerSize: "large", onChange: ({ value }) => setActiveMimeName(value) })] }), required && (_jsx(RequiredLabel, { children: translate('openapi.badges.required', 'required') })), _jsx(StyledMarkdown, { source: description }), schema?.type === 'object' && schema?.constraints && (_jsx(ConstraintsView, { constraints: schema?.constraints || [] })), _jsx(Schema, { skipReadOnly: skipReadOnly, skipWriteOnly: skipWriteOnly, schema: schema, examples: examples, operation: operation, level: 1, disableDeepLinks: !deepLink }, "schema")] }));
+}
+export const BodyContent = memo(BodyContentComponent);
+const StyledMarkdown = styled(Markdown) `
   margin: var(--spacing-xxs) 0 0;
-`,O=s.span`
+`;
+const Title = styled.span `
   position: relative;
   display: flex;
   align-items: center;
@@ -13,7 +39,7 @@ import{jsx as e,jsxs as n,Fragment as x}from"react/jsx-runtime";import{memo as u
   padding: var(--spacing-xxs) 0;
 
   :hover {
-    ${w} {
+    ${LinkIcon} {
       opacity: 1;
       visibility: visible;
     }
@@ -24,4 +50,5 @@ import{jsx as e,jsxs as n,Fragment as x}from"react/jsx-runtime";import{memo as u
     font-size: var(--font-size-sm);
     line-height: var(--line-height-lg);
   }
-`;export{P as BodyContent};
+`;
+//# sourceMappingURL=BodyContent.js.map

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

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

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

@@ -1 +1,5 @@
-import{jsx as e}from"react/jsx-runtime";import{memo as m}from"react";const r=({className:o,style:t,handleClear:n})=>e("button",{className:o,style:t,onClick:n,children:"\u2715"}),a=m(r);export{a as ClearButton};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+const ClearButtonComponent = ({ className, style, handleClear, }) => (_jsx("button", { className: className, style: style, onClick: handleClear, children: "\u2715" }));
+export const ClearButton = memo(ClearButtonComponent);
+//# sourceMappingURL=ClearButton.js.map

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

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

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

@@ -1,4 +1,6 @@
-import{styled as o}from"../../../styled-components.js";import{ClearButton as r}from"./ClearButton.js";const e=o(r)`
+import { styled } from '../../../styled-components.js';
+import { ClearButton as ClearButtonComponent } from './ClearButton.js';
+export const ClearButton = styled(ClearButtonComponent) `
   z-index: 1;
   position: absolute;
   right: 24px;
@@ -12,4 +14,5 @@ import{styled as o}from"../../../styled-components.js";import{ClearButton as r}f
   &:hover {
     color: #fff;
   }
-`;export{e as ClearButton};
+`;
+//# sourceMappingURL=styled.js.map

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

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

package/lib/components/common/CodeBlockPanel.js

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

package/lib/components/common/ConstraintsView.js

@@ -1,3 +1,15 @@
-import{jsxs as n,jsx as s}from"react/jsx-runtime";import{memo as t}from"react";import{Tag as i}from"./Fields/index.js";import{styled as m}from"../../styled-components.js";function e({constraints:r}){return r.length===0?null:s(p,{children:r.map(o=>n(i,{children:[" ",o," "]},o))})}const c=t(e),p=m.div`
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { Tag } from './Fields/index.js';
+import { styled } from '../../styled-components.js';
+function ConstraintsViewComponent({ constraints }) {
+    if (constraints.length === 0) {
+        return null;
+    }
+    return (_jsx(Wrapper, { children: constraints.map((constraint) => (_jsxs(Tag, { children: [" ", constraint, " "] }, constraint))) }));
+}
+export const ConstraintsView = memo(ConstraintsViewComponent);
+const Wrapper = styled.div `
   margin-top: var(--spacing-xxs);
-`;export{c as ConstraintsView};
+`;
+//# sourceMappingURL=ConstraintsView.js.map

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

@@ -1,8 +1,24 @@
-import{jsx as n}from"react/jsx-runtime";import{Dropdown as d}from"@redocly/theme/components/Dropdown/Dropdown";import{CheckmarkIcon as c}from"@redocly/theme/icons/CheckmarkIcon/CheckmarkIcon";import{DropdownMenu as p}from"@redocly/theme/components/Dropdown/DropdownMenu";import{DropdownMenuItem as f}from"@redocly/theme/components/Dropdown/DropdownMenuItem";import{Button as g}from"@redocly/theme/components/Button/Button";import{typedMemo as h}from"@redocly/theme/core/openapi";import{styled as o}from"../../../styled-components.js";function u({options:r,value:t,onChange:a,className:l,triggerVariant:m="outlined",triggerSize:s="small"}){const i=r.find(e=>e.value===t)?.label;return r.length===1?n(b,{children:i}):n(d,{className:l,trigger:n(g,{variant:m,size:s,type:"button",children:i}),withArrow:!0,children:n(p,{children:r.map(e=>n(w,{active:e.value===t,onAction:()=>a(e),suffix:e.value===t&&n(v,{}),children:e.label},e.label))})})}const C=h(u),v=o(c)`
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dropdown as DropdownTheme } from '@redocly/theme/components/Dropdown/Dropdown';
+import { CheckmarkIcon } from '@redocly/theme/icons/CheckmarkIcon/CheckmarkIcon';
+import { DropdownMenu } from '@redocly/theme/components/Dropdown/DropdownMenu';
+import { DropdownMenuItem } from '@redocly/theme/components/Dropdown/DropdownMenuItem';
+import { Button } from '@redocly/theme/components/Button/Button';
+import { typedMemo } from '@redocly/theme/core/openapi';
+import { styled } from '../../../styled-components.js';
+function DropdownComponent({ options, value, onChange, className, triggerVariant = 'outlined', triggerSize = 'small', }) {
+    const activeLabel = options.find((opt) => opt.value === value)?.label;
+    if (options.length === 1)
+        return _jsx(Title, { children: activeLabel });
+    return (_jsx(DropdownTheme, { className: className, trigger: _jsx(Button, { variant: triggerVariant, size: triggerSize, type: "button", children: activeLabel }), withArrow: true, children: _jsx(DropdownMenu, { children: options.map((opt) => (_jsx(StyledDropdownMenuItem, { active: opt.value === value, onAction: () => onChange(opt), suffix: opt.value === value && _jsx(StyledCheckmarkIcon, {}), children: opt.label }, opt.label))) }) }));
+}
+export const Dropdown = typedMemo(DropdownComponent);
+const StyledCheckmarkIcon = styled(CheckmarkIcon) `
   width: 16px;
   height: 16px;
   margin-left: auto;
-`,w=o(f)`
+`;
+const StyledDropdownMenuItem = styled(DropdownMenuItem) `
   --dropdown-menu-item-justify-content: space-between;
 
   width: 100%;
@@ -12,7 +28,8 @@ import{jsx as n}from"react/jsx-runtime";import{Dropdown as d}from"@redocly/theme
   padding: var(--spacing-xxs) var(--spacing-sm);
   font-size: var(--font-size-base);
   line-height: var(--line-height-base);
-`,b=o.span`
+`;
+const Title = styled.span `
   margin-right: var(--spacing-unit);
   cursor: default;
   background: none;
@@ -23,4 +40,5 @@ import{jsx as n}from"react/jsx-runtime";import{Dropdown as d}from"@redocly/theme
   line-height: var(--line-height-lg);
   font-family: var(--font-family-base);
   font-weight: var(--font-weight-regular);
-`;export{C as Dropdown};
+`;
+//# sourceMappingURL=Dropdown.js.map

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

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

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

@@ -1,9 +1,30 @@
-import{jsx as o,jsxs as p}from"react/jsx-runtime";import{useMemo as l,useState as m}from"react";import{Button as c}from"@redocly/theme/components/Button/Button";import{Markdown as d}from"../../Markdown/index.js";import{ExampleValue as x}from"../Fields/index.js";import{useTranslate as E}from"../../../hooks/index.js";import{styled as a}from"../../../styled-components.js";const f=150;function A({value:e}){const s=E(),[n,i]=m(!1),t=l(()=>e.slice(0,f),[e]),r=()=>{i(!n)};return p(u,{children:[o(d,{source:n?e:t}),(e!==t||n)&&o(h,{children:o(c,{variant:"link",size:"small",onClick:r,children:n?s("openapi.hideExample","Hide example"):s("openapi.showExample","Show example")})})]})}const u=a(x)`
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { Button } from '@redocly/theme/components/Button/Button';
+import { Markdown } from '../../Markdown/index.js';
+import { ExampleValue } from '../Fields/index.js';
+import { useTranslate } from '../../../hooks/index.js';
+import { styled } from '../../../styled-components.js';
+const MAX_EXAMPLE_LENGTH = 150;
+export function ExpandableExample({ value }) {
+    const translate = useTranslate();
+    const [isExpanded, setIsExpanded] = useState(false);
+    const truncatedValue = useMemo(() => value.slice(0, MAX_EXAMPLE_LENGTH), [value]);
+    const toggleExpand = () => {
+        setIsExpanded(!isExpanded);
+    };
+    return (_jsxs(Container, { children: [_jsx(Markdown, { source: isExpanded ? value : truncatedValue }), (value !== truncatedValue || isExpanded) && (_jsx(ButtonWrap, { children: _jsx(Button, { variant: "link", size: "small", onClick: toggleExpand, children: isExpanded
+                        ? translate('openapi.hideExample', 'Hide example')
+                        : translate('openapi.showExample', 'Show example') }) }))] }));
+}
+const Container = styled(ExampleValue) `
   display: inline;
 
   & * {
     display: inline;
   }
-`,h=a.span`
+`;
+const ButtonWrap = styled.span `
   margin-left: var(--spacing-xs);
-`;export{A as ExpandableExample};
+`;
+//# sourceMappingURL=ExpandableExample.js.map

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

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

package/lib/components/common/Extensions.js

@@ -1,3 +1,18 @@
-import{jsxs as t,jsx as n}from"react/jsx-runtime";import{memo as i}from"react";import{useAtomValue as m}from"jotai";import{Markdown as p}from"@redocly/theme/components/Markdown/Markdown";import{ExtensionValue as e,FieldLabel as l}from"./index.js";import{globalOptionsAtom as a}from"../../jotai/store.js";import{styled as f}from"../../styled-components.js";const c=f(p)`
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { useAtomValue } from 'jotai';
+import { Markdown as MarkdownWrapper } from '@redocly/theme/components/Markdown/Markdown';
+import { ExtensionValue, FieldLabel } from './index.js';
+import { globalOptionsAtom } from '../../jotai/store.js';
+import { styled } from '../../styled-components.js';
+const Extension = styled(MarkdownWrapper) `
   margin: 2px 0;
-`;function d({extensions:r}){const{showExtensions:s}=m(a);return s?n("div",{children:Object.keys(r).map(o=>t(c,{children:[t(l,{children:[o.substring(2),": "]})," ",n(e,{children:typeof r[o]=="string"?r[o]:JSON.stringify(r[o])})]},o))}):null}const w=i(d);export{w as Extensions};
+`;
+function ExtensionsComponent({ extensions }) {
+    const { showExtensions } = useAtomValue(globalOptionsAtom);
+    return showExtensions ? (_jsx("div", { children: Object.keys(extensions).map((key) => (_jsxs(Extension, { children: [_jsxs(FieldLabel, { children: [key.substring(2), ": "] }), ' ', _jsx(ExtensionValue, { children: typeof extensions[key] === 'string'
+                        ? extensions[key]
+                        : JSON.stringify(extensions[key]) })] }, key))) })) : null;
+}
+export const Extensions = memo(ExtensionsComponent);
+//# sourceMappingURL=Extensions.js.map