@redocly/openapi-docs 3.0.0 → 3.0.1

package/lib-esm/components/SideMenu/SideMenu.d.ts

@@ -1,8 +1,9 @@
-import React from 'react';
+/// <reference types="react" />
 import type { ExtendedMenuItem, IMenuItem } from '../../services';
 interface SideMenuProps {
     items: (ExtendedMenuItem & IMenuItem)[];
     className?: string;
 }
-export declare const SideMenu: React.NamedExoticComponent<SideMenuProps>;
+export declare const SideMenu: import("react").NamedExoticComponent<SideMenuProps>;
+export declare const MenuWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

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

@@ -1,2 +1,4 @@
-import React,{memo,useRef}from"react";import{useRecoilValue}from"@redocly/recoil";import{RedocAttribution}from"./styled";import{MenuItems}from"./MenuItems";import{PerfectScrollbarWrap}from"../common";import{globalOptionsSelector}from"../../recoil/store";import{useMenuItems}from"./hooks";const SideMenuComponent=({items:e,className:o})=>{const{sidebarLinks:t,whiteLabel:r,pagination:n}=useRecoilValue(globalOptionsSelector),l=useRef(),i=useMenuItems({items:e,pagination:n});return React.createElement(PerfectScrollbarWrap,{updateFn:e=>{l.current=e},className:o,options:{wheelPropagation:!1}},React.createElement(MenuItems,{items:i,root:!0,linksBefore:null==t?void 0:t.beforeInfo,linksAfter:null==t?void 0:t.end}),r&&React.createElement(RedocAttribution,null,React.createElement("a",{href:"https://redoc.ly",target:"_blank",rel:"noreferrer"},"Powered by Redocly")))};export const SideMenu=memo(SideMenuComponent);
+import{jsx as _jsx}from"react/jsx-runtime";import{memo}from"react";import{Menu}from"@redocly/theme";import styled from"styled-components";import{useMenuItems}from"./hooks/useMenuItems";const SideMenuComponent=({items:e,className:o})=>{const t=useMenuItems({items:e});return _jsx(MenuWrapper,{className:o,children:_jsx(Menu,{items:t})})};export const SideMenu=memo(SideMenuComponent);export const MenuWrapper=styled.div`
+  overflow: auto;
+`;
 //# sourceMappingURL=SideMenu.js.map

package/lib-esm/components/SideMenu/hooks/useMenuItems.d.ts

@@ -1,9 +1,7 @@
 import type { IMenuItem } from '../../../services';
 import type { ExtendedMenuItem } from '../types';
-import { Pagination } from '../../../services';
 type UseMenuItemsInput = {
     items: IMenuItem[];
-    pagination: Pagination;
 };
-export declare function useMenuItems({ items, pagination }: UseMenuItemsInput): ExtendedMenuItem[];
+export declare function useMenuItems({ items }: UseMenuItemsInput): ExtendedMenuItem[];
 export {};

package/lib-esm/components/SideMenu/hooks/useMenuItems.js

@@ -1,2 +1,2 @@
-import{useActiveSectionId}from"@redocly/theme";import{useMemo}from"react";import{useLocation}from"react-router-dom";import{Pagination}from"../../../services";import{normalizeHashPath,pathMatchedLink}from"../../../utils";export function useMenuItems({items:e,pagination:t}){const i=useLocation(),m=useActiveSectionId(i,!1,!1);return useMemo((()=>mapAndSetActiveItems(e,m,i,t)),[m,e,i,t])}function mapAndSetActiveItems(e,t="",i,m){return e.map((e=>{const n=isItemActive(e,t,i),o=isSubItemActive(e,t,i);return m===Pagination.Item&&(e.href=normalizeHashPath(e.href)),Object.assign(Object.assign({},e),{items:mapAndSetActiveItems(e.items||[],t,i,m),active:n&&!o,hasActiveSubItem:o})})).filter(Boolean)}function isItemActive(e,t="",i){return!!e.href&&(t?e.id===t:pathMatchedLink(i,e.href))}function isSubItemActive(e,t="",i){return(e.items||[]).some((e=>isItemActive(e,t,i)||isSubItemActive(e,t,i)))}
+import{useActiveSectionId}from"@redocly/theme";import{useMemo}from"react";import{useLocation}from"react-router-dom";import{pathMatchedLink}from"../../../utils";export function useMenuItems({items:e}){const t=useLocation(),i=useActiveSectionId(t,!1,!1);return useMemo((()=>mapAndSetActiveItems(e,i,t)),[i,e,t])}function mapAndSetActiveItems(e,t="",i){const s=[];return convertOpenAPIDocs2Sidebar({contentItems:e,sidebarItems:s,activeItemId:t,location:i}),s}function isItemActive(e,t="",i){return!!e.href&&(t?e.id===t:pathMatchedLink(i,e.href))}function isSubItemActive(e,t="",i){return(e.items||[]).some((e=>isItemActive(e,t,i)||isSubItemActive(e,t,i)))}function convertOpenAPIDocs2Sidebar(e){const{contentItems:t,sidebarItems:i,activeItemId:s,location:c}=e;let o=!0;for(const n of t){const t=isItemActive(n,s,c),a=isSubItemActive(n,s,c);switch(n.type){case"group":i.push({type:"separator",label:n.name,active:t,hasActiveSubItem:a}),convertOpenAPIDocs2Sidebar(Object.assign(Object.assign({},e),{contentItems:n.items,sidebarItems:i}));break;case"tag":const m={type:"group",label:n.name,items:[],link:n.href,active:t,hasActiveSubItem:a,modified:!0};i.push(m),convertOpenAPIDocs2Sidebar({contentItems:n.items,sidebarItems:m.items||[],activeItemId:s,location:c});break;case"operation":case"schema":n.isWebhook&&o&&(i.push({type:"separator",label:"Webhooks",variant:"secondary"}),o=!1),i.push({type:"link",label:n.name,httpVerb:"schema"===n.type?"schema":n.httpVerb,link:n.href,badges:n.badges,active:t,hasActiveSubItem:a,modified:!0,deprecated:n.deprecated});break;case"section":if(-1===n.depth)continue;const r={type:n.items.length?"group":"link",label:n.name,link:n.href,items:[],active:t,hasActiveSubItem:a,modified:!0};i.push(r),n.items.length&&convertOpenAPIDocs2Sidebar({contentItems:n.items,sidebarItems:r.items,activeItemId:s,location:c})}}}
 //# sourceMappingURL=useMenuItems.js.map

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

@@ -1,4 +1 @@
-export { MenuItem } from './MenuItem';
-export { MenuItems } from './MenuItems';
 export { SideMenu } from './SideMenu';
-export * from './styled';

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

@@ -1,2 +1,2 @@
-export{MenuItem}from"./MenuItem";export{MenuItems}from"./MenuItems";export{SideMenu}from"./SideMenu";export*from"./styled";
+export{SideMenu}from"./SideMenu";
 //# sourceMappingURL=index.js.map

package/lib-esm/components/SideMenu/types.d.ts

@@ -1,5 +1,4 @@
-import type { CSSProperties } from 'react';
-import type { ExternalLink, IMenuItem } from '../../services';
+import type { IMenuItem } from '../../services';
 export interface MenuItemLinkProps {
     depth: number;
     active: boolean;
@@ -10,19 +9,6 @@ export interface MenuItemLinkProps {
     href?: string;
     onClick?: () => void;
 }
-export interface MenuItemsProps {
-    items: ExtendedMenuItem[];
-    expanded?: boolean;
-    style?: CSSProperties;
-    root?: boolean;
-    className?: string;
-    linksBefore?: ExternalLink[];
-    linksAfter?: ExternalLink[];
-}
-export type StyledMenuItemLinkProps = Omit<MenuItemLinkProps, 'active' | 'hasChildren'> & {
-    $active: MenuItemLinkProps['active'];
-    $hasChildren: MenuItemLinkProps['hasChildren'];
-};
 export type ExtendedMenuItem = IMenuItem & {
     active: boolean;
     hasActiveSubItem: boolean;

package/lib-esm/components/StickySidebar/SidebarActions.d.ts

@@ -0,0 +1 @@
+export declare const SidebarActions: () => import("react/jsx-runtime").JSX.Element;

package/lib-esm/components/StickySidebar/SidebarActions.js

@@ -0,0 +1,6 @@
+import{jsx as _jsx,Fragment as _Fragment}from"react/jsx-runtime";import{useAtom}from"jotai";import{LayoutVariant,SidebarActions as ThemeSidebarActions}from"@redocly/theme";import styled from"styled-components";import{collapsedSidebarAtom,layoutAtom}from"../../jotai/app";export const SidebarActions=()=>{const[a,o]=useAtom(layoutAtom),[t,e]=useAtom(collapsedSidebarAtom);return _jsx(_Fragment,{children:_jsx(Wrapper,{children:_jsx(ThemeSidebarActions,{layout:a,onChangeViewClick:()=>o(a===LayoutVariant.STACKED?LayoutVariant.THREE_PANEL:LayoutVariant.STACKED),collapsedSidebar:t,onChangeCollapseSidebarClick:()=>e(!t),isOpenapiDocs:!0})})})};const Wrapper=styled.div`
+  position: sticky;
+  top: calc(100vh);
+  padding: var(--spacing-sm) var(--spacing-md);
+`;
+//# sourceMappingURL=SidebarActions.js.map

package/lib-esm/components/StickySidebar/StickyResponsiveSidebar.d.ts

@@ -1,10 +1,9 @@
-import React from 'react';
+import type { PropsWithChildren } from 'react';
 import type { Options } from '../../services';
 interface StickySidebarProps {
     className?: string;
     scrollYOffset: Options['scrollYOffset'];
-    hideFab: Options['hideFab'];
     collapsedSidebar: boolean;
 }
-export declare const StickyResponsiveSidebar: React.NamedExoticComponent<React.PropsWithChildren<StickySidebarProps>>;
+export declare const StickyResponsiveSidebar: import("react").NamedExoticComponent<PropsWithChildren<StickySidebarProps>>;
 export {};

package/lib-esm/components/StickySidebar/StickyResponsiveSidebar.js

@@ -1,4 +1,4 @@
-import React,{memo,useEffect,useRef,useState}from"react";import styled,{css}from"styled-components";import{MobileSidebarButton,MobileSidebarIcon,useMount,useUnmount}from"@redocly/theme";import{useRecoilState}from"@redocly/recoil";import{useLocation}from"react-router-dom";import{IS_BROWSER}from"../../utils";import{isSidebarOpenedSelector}from"../../recoil/app";import{Actions}from"../SideMenu/Actions";let Stickyfill;IS_BROWSER&&(Stickyfill=require("stickyfill"));const stickyfill=Stickyfill&&Stickyfill(),StyledStickySidebar=styled.div`
+import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";import{memo,useEffect,useRef,useState}from"react";import styled from"styled-components";import{useMount,useUnmount,IS_BROWSER,breakpoints}from"@redocly/theme";import{useAtom}from"jotai";import{useLocation}from"react-router-dom";import{isSidebarOpenedAtom}from"../../jotai/app";import{SidebarActions}from"./SidebarActions";let Stickyfill;IS_BROWSER&&(Stickyfill=require("stickyfill"));const stickyfill=Stickyfill&&Stickyfill(),StyledStickySidebar=styled.div`
   overflow: hidden;
   flex-direction: column;
   backface-visibility: hidden;
@@ -9,31 +9,17 @@ import React,{memo,useEffect,useRef,useState}from"react";import styled,{css}from
   display: ${({open:e})=>e?"flex":"none"};
   z-index: 2;
   width: 100%;
-  background: var(--sidebar-background-color);
+  background: var(--sidebar-bg-color);
   border-right: ${({collapsedSidebar:e})=>e?"1px solid var(--sidebar-border-color)":"auto"};
 
-  ${({theme:e,collapsedSidebar:t})=>css`
-    ${e.mediaQueries[e.showAtBreakpoint.sidebar]} {
-      position: sticky;
-      z-index: auto;
-      width: ${t?"var(--sidebar-width)":"auto"};
-      display: flex;
-    }
-    ${e.mediaQueries.print} {
-      display: none;
-    }
-  `}
-`,FloatingButton=styled(MobileSidebarButton)`
-  --fab-background-color: var(--bg-overlay);
-  --fab-active-background: var(--bg-raised);
-
-  ${({theme:e})=>css`
-    ${e.mediaQueries[e.showAtBreakpoint.sidebar]} {
-      display: none;
-    }
-    ${e.mediaQueries.print} {
-      display: none;
-    }
-  `}
-`;function StickyResponsiveSidebarComponent({scrollYOffset:e,hideFab:t,className:i,children:o,collapsedSidebar:r}){const[a,l]=useState("0px"),s=useRef(null),c=useLocation(),[n,d]=useRecoilState(isSidebarOpenedSelector);useEffect((()=>{c.hash&&d(!1)}),[c.pathname,c.hash,d]),useMount((()=>{stickyfill&&stickyfill.add(s.current);const t=e();l(`${t}px`)})),useUnmount((()=>{stickyfill&&stickyfill.remove(s.current)}));return React.createElement(React.Fragment,null,React.createElement(StyledStickySidebar,{open:n,className:i,offsetTop:a,style:{top:a},ref:s,collapsedSidebar:r},r||n?o:null,React.createElement(Actions,null)),!t&&React.createElement(FloatingButton,{opened:n,onClick:()=>{d(!n)}},React.createElement(MobileSidebarIcon,null)))}export const StickyResponsiveSidebar=memo(StickyResponsiveSidebarComponent);
+  @media screen and (min-width: ${breakpoints.small}) {
+    position: sticky;
+    z-index: auto;
+    width: ${({collapsedSidebar:e})=>e?"var(--sidebar-width)":"auto"};
+    display: flex;
+  }
+  @media print {
+    display: none;
+  }
+`;function StickyResponsiveSidebarComponent({scrollYOffset:e,className:i,children:t,collapsedSidebar:o}){const[s,r]=useState("0px"),a=useRef(null),l=useLocation(),[n,d]=useAtom(isSidebarOpenedAtom);return useEffect((()=>{l.hash&&d(!1)}),[l.pathname,l.hash,d]),useMount((()=>{stickyfill&&stickyfill.add(a.current);const i=e();r(`${i}px`)})),useUnmount((()=>{stickyfill&&stickyfill.remove(a.current)})),_jsx(_Fragment,{children:_jsxs(StyledStickySidebar,{open:n,className:i,offsetTop:s,style:{top:s},ref:a,collapsedSidebar:o,children:[o||n?t:null,_jsx(SidebarActions,{})]})})}export const StickyResponsiveSidebar=memo(StickyResponsiveSidebarComponent);
 //# sourceMappingURL=StickyResponsiveSidebar.js.map

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

@@ -0,0 +1,8 @@
+import type { TabType } from '../../models/tab';
+type TabsProps = {
+    tabs: TabType[];
+    onChange: (tab: TabType) => void;
+    activeTab?: TabType;
+};
+export declare function Tabs({ tabs, onChange, activeTab }: TabsProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,35 @@
+import{jsx as _jsx}from"react/jsx-runtime";import styled,{css}from"styled-components";import{StatusCode}from"@redocly/theme";export function Tabs({tabs:e,onChange:t,activeTab:r}){return _jsx(TabList,{children:e.map((e=>_jsx(Tab,{$active:e.key===(null==r?void 0:r.key),onClick:()=>t(e),children:_jsx(StatusCode,{status:e.key,children:e.title})},e.key)))})}const TabList=styled.ol`
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+`,Tab=styled.li`
+  display: inline-flex;
+  align-items: center;
+  list-style: none;
+
+  padding: 0 var(--spacing-sm);
+  background-color: transparent;
+  height: 24px;
+  border-radius: var(--border-radius);
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-base);
+
+  &,
+  button {
+    color: var(--text-color-secondary);
+
+    ${({$active:e})=>e?css`
+            color: var(--text-color-primary);
+            background-color: var(--tab-bg-color-filled);
+          `:css`
+            &:hover {
+              color: var(--text-color-primary);
+            }
+          `}
+  }
+`;
+//# sourceMappingURL=Tabs.js.map

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

@@ -1,5 +1,2 @@
-export * from './TabList';
-export * from './Tab';
-export * from './TabPanel';
-export * from './CollapsingTabs';
-export { Tabs } from 'react-tabs';
+export { Tabs } from './Tabs';
+export { useTabsState } from './useTabsState';

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

@@ -1,2 +1,2 @@
-export*from"./TabList";export*from"./Tab";export*from"./TabPanel";export*from"./CollapsingTabs";export{Tabs}from"react-tabs";
+export{Tabs}from"./Tabs";export{useTabsState}from"./useTabsState";
 //# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,2 @@
+import{useCallback,useState}from"react";import{useMount}from"@redocly/theme";export function useTabsState({tabs:e,defaultTab:t,onChange:a}){const[u,n]=useState(t||e[0].key);useMount((()=>{t&&(n(t),null==a||a(t))}));const o=useCallback((e=>{u!==e.key&&n(e.key),null==a||a(e.key)}),[u,a]);return{activeTab:u,handleTabChange:o}}
+//# sourceMappingURL=useTabsState.js.map

package/lib-esm/components/TagItem/OperationsNavigation.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { OperationMenuItem } from '../../models';
+type OperationsNavigationProps = {
+    items: OperationMenuItem[];
+    routingBasePath: string;
+};
+export declare function OperationsNavigationComponent({ items, routingBasePath, }: OperationsNavigationProps): import("react/jsx-runtime").JSX.Element | null;
+export declare const OperationsNavigation: import("react").NamedExoticComponent<OperationsNavigationProps>;
+export {};

package/lib-esm/components/TagItem/OperationsNavigation.js

@@ -0,0 +1,46 @@
+import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";import{useMemo,memo,useState}from"react";import{useNavigate}from"react-router-dom";import{Button,LayoutVariant}from"@redocly/theme";import styled from"styled-components";import{useAtomValue}from"jotai/index";import{HttpVerb,SamplesPanel}from"../common";import{encodeBackSlashes}from"../../utils";import{joinWithSeparator}from"../../services";import{layoutAtom}from"../../jotai/app";const MAX_OPERATIONS=8;export function OperationsNavigationComponent({items:e,routingBasePath:t}){const[o,a]=useState(!1),r=useNavigate(),n=useAtomValue(layoutAtom)===LayoutVariant.STACKED,{operations:i,webhooks:s,count:l}=useMemo((()=>{const t=e.filter((e=>"operation"===e.type)),a=o?t:t.slice(0,MAX_OPERATIONS),{operations:r,webhooks:n}=a.reduce(((e,t)=>t.isWebhook?Object.assign(Object.assign({},e),{webhooks:[...e.webhooks,t]}):Object.assign(Object.assign({},e),{operations:[...e.operations,t]})),{operations:[],webhooks:[]});return{operations:r,webhooks:n,count:!o&&t.length>MAX_OPERATIONS?t.length-MAX_OPERATIONS:0}}),[o,e]);if(!i.length&&!s.length)return null;const p=e=>{r(e)};return _jsxs(Wrapper,{isStacked:n,"data-testid":"operation-navigation-list",children:[i.length>0&&_jsxs(_Fragment,{children:[_jsx(Heading,{children:"Operations"}),i.map((({id:e,href:o,httpVerb:a,path:r})=>_jsx(Item,{variant:"outlined",size:"large",onClick:()=>p(joinWithSeparator(t,encodeBackSlashes(o))),children:_jsxs("span",{children:[_jsx(HttpVerb,{color:a,children:a}),_jsx(Path,{children:r})]})},e)))]}),s.length>0&&_jsxs(_Fragment,{children:[_jsx(Heading,{children:"Webhooks"}),s.map((({id:e,href:o,httpVerb:a,path:r})=>_jsx(Item,{variant:"outlined",size:"large",onClick:()=>p(joinWithSeparator(t,encodeBackSlashes(o))),children:_jsxs("span",{children:[_jsx(HttpVerb,{color:a,children:a}),_jsx(Path,{children:r})]})},e)))]}),!o&&Boolean(l)&&_jsxs(StyledButton,{variant:"link",size:"large","data-testid":"show-more-operations",fullWidth:!0,onClick:()=>a(!0),children:["Show ",l," more..."]})]})}export const OperationsNavigation=memo(OperationsNavigationComponent);const Wrapper=styled(SamplesPanel)`
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xxs);
+  padding-top: var(--spacing-xxl);
+`,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;
+`,StyledButton=styled(Button)`
+  & + & {
+    margin-left: 0;
+  }
+`,Item=styled(StyledButton)`
+  border-radius: var(--border-radius);
+  background: var(--bg-color);
+  justify-content: space-between;
+
+  & > span {
+    display: flex;
+    align-items: baseline;
+    gap: var(--spacing-unit);
+    overflow-x: hidden;
+  }
+
+  &:hover {
+    background: var(--bg-color);
+  }
+
+  &:hover::after {
+    content: '→';
+    line-height: var(--line-height-base);
+  }
+`,Path=styled.span`
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+  color: var(--text-color-primary);
+  text-decoration: none;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow-x: hidden;
+`;
+//# sourceMappingURL=OperationsNavigation.js.map

package/lib-esm/components/TagItem/TagItem.d.ts

@@ -1,3 +1,9 @@
-/// <reference types="react" />
+import type { ReactElement } from 'react';
 import type { SectionItemProps } from '../SectionItem/SectionItem';
-export declare function TagItem({ item }: SectionItemProps): JSX.Element;
+interface TagItemProps extends SectionItemProps {
+    routingBasePath?: string;
+    isExpanded: boolean;
+}
+export declare function TagItemComponent({ item, routingBasePath, isExpanded, }: TagItemProps): ReactElement;
+export declare const TagItem: import("react").NamedExoticComponent<TagItemProps>;
+export {};

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

@@ -1,2 +1,23 @@
-import React from"react";import{H2}from"@redocly/theme";import{SamplesMiddlePanel,ShareLink}from"../common";import{Markdown}from"../Markdown";export function TagItem({item:e}){const{description:t,name:a,href:r}=e;return React.createElement(React.Fragment,null,React.createElement(SamplesMiddlePanel,null,React.createElement(H2,null,React.createElement(ShareLink,{to:r}),a)),React.createElement(Markdown,{source:t,htmlWrap:e=>React.createElement(SamplesMiddlePanel,null,e)}))}
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{memo,useCallback}from"react";import{breakpoints,Button,H2,LayoutVariant,LinkIcon}from"@redocly/theme";import{useNavigate}from"react-router-dom";import styled from"styled-components";import{useAtomValue}from"jotai";import{Row,SamplesMiddlePanel,ShareLink}from"../common";import{Markdown}from"../Markdown";import{OperationsNavigation}from"./OperationsNavigation";import{layoutAtom}from"../../jotai/app";export function TagItemComponent({item:t,routingBasePath:a="",isExpanded:o}){const{description:i,name:e,href:n}=t,r=useNavigate(),m=useAtomValue(layoutAtom),s=useCallback((()=>{r(a+t.href)}),[t.href,r,a]),d=Boolean(t.items.length),l=m===LayoutVariant.STACKED;return _jsxs(Wrapper,{expanded:o,children:[_jsxs(Row,{layout:m,children:[_jsxs(SamplesMiddlePanel,{fullWidth:!d,isStacked:l,children:[_jsxs(Heading,{children:[_jsx(ShareLink,{to:n,"aria-label":`link to ${e}`}),e]}),_jsx(Markdown,{source:i})]}),d&&_jsx(OperationsNavigation,{items:t.items,routingBasePath:a})]}),d&&!o&&_jsx(ShowButton,{type:"button",variant:"text",size:"medium",onClick:s,children:"+ Show"})]})}export const TagItem=memo(TagItemComponent);const Wrapper=styled.div`
+  padding-top: var(--spacing-lg);
+  padding-bottom: ${({expanded:t})=>t?"var(--spacing-xxl)":""};
+`,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: ${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);
+  }
+`,Heading=styled(H2)`
+  :hover {
+    ${LinkIcon} {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+`;
 //# sourceMappingURL=TagItem.js.map

package/lib-esm/components/UnsupportedFeatureScreen/UnsupportedFeatureScreen.d.ts

@@ -0,0 +1 @@
+export declare function UnsupportedFeatureScreen(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,18 @@
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useEffect}from"react";import styled from"styled-components";import{Button,Typography}from"@redocly/theme";import{useAtom}from"jotai";import{unsupportedFeatureScreenAtom}from"../../jotai/app";export function UnsupportedFeatureScreen(){const[e,t]=useAtom(unsupportedFeatureScreenAtom);return useEffect((()=>{document.body.style.overflow=e?"hidden":"auto"}),[e]),_jsxs(Wrap,{showScreen:e,children:[_jsx(Title,{children:"Unfortunately, this feature is not supported on mobile devices. For the best experience, please use a computer."}),_jsx(Button,{variant:"primary",onClick:()=>t(!1),children:"Ok"})]})}const Wrap=styled.div`
+  height: 100vh;
+  width: 100vw;
+  padding: var(--spacing-xxl);
+  display: ${({showScreen:e})=>e?"flex":"none"};
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: var(--spacing-xl);
+  background-color: var(--bg-color);
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: var(--z-index-popover);
+`,Title=styled(Typography)`
+  text-align: center;
+`;
+//# sourceMappingURL=UnsupportedFeatureScreen.js.map

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

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

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

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

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

@@ -0,0 +1,13 @@
+import type { PropsWithChildren } from 'react';
+interface ViewNestedProps {
+    expandByDefault: boolean;
+    isExpandedFromParent?: boolean;
+    level?: number;
+    expandable?: boolean;
+    expandText?: string;
+    hideText?: string;
+    hideDivider?: boolean;
+    onChange?: () => void;
+}
+export declare const ViewNested: import("react").NamedExoticComponent<PropsWithChildren<ViewNestedProps>>;
+export {};

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

@@ -0,0 +1,31 @@
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import styled,{css}from"styled-components";import{memo,useEffect,useState}from"react";import{isUndefined}from"@redocly/theme";import{cycleColorsByLevel}from"../PropertyDetails/cycleColorsByLevel";import{CircleIcon}from"../PropertyDetails/PlusCircleIcon";function ViewNestedComponent({expandByDefault:e,isExpandedFromParent:r,level:o,expandable:t=!1,expandText:s,hideText:i,hideDivider:n=!1,onChange:d,children:a}){const[l,c]=useState(e);useEffect((()=>{t&&!isUndefined(r)&&c(r)}),[r,t]);const p=l?cycleColorsByLevel(o):void 0;if(!t)return a;return _jsxs(Wrapper,{$divider:!n&&!l,className:"view-nested-wrapper",children:[_jsxs(ShowProperty,{onClick:()=>{c((e=>!e)),d&&d()},children:[_jsx(CircleIcon,{sign:l?"-":"+",color:p}),!l&&s,l&&(i||"")]}),l&&_jsx(StyledNested,{color:p,children:a})]})}export const ViewNested=memo(ViewNestedComponent);const ShowProperty=styled.button`
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  padding: 0;
+  gap: var(--spacing-xxs);
+  color: var(--text-color-secondary);
+  font-size: var(--font-size-base);
+  font-family: var(--font-family-base);
+  line-height: var(--line-height-base);
+  margin-top: var(--spacing-xxs);
+  width: 100%;
+`,StyledNested=styled.div`
+  padding-left: var(--schema-nested-offset);
+  border-left: 1px solid ${({color:e})=>e||"var(--border-color-primary)"};
+  margin: -10px 0 0 9px;
+  ${({color:e})=>e&&css`
+      .schema-name {
+        color: ${e};
+      }
+    `}
+`,Wrapper=styled.div`
+  width: 100%;
+  ${({$divider:e})=>e&&css`
+      border-bottom: 1px solid var(--border-color-primary);
+      padding-bottom: var(--schema-property-details-spacing);
+    `}
+`;
+//# sourceMappingURL=ViewNested.js.map

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

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

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

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

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

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

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";function BodyContentComponent({required:e,skipReadOnly:o,skipWriteOnly:i,description:t,content:n,deepLink:r}){const[a,s]=useAtom(activeMimeNameAtom);if(!n)return null;const{schema:m,examples:l,operation:p,name:d}=getActiveMediaType(n,a),c=n.mediaTypes.map((({name:e})=>({label:e,value:e})));return _jsxs(_Fragment,{children:[_jsxs(Title,{children:[r&&_jsx(LinkToField,{to:r}),"Body",_jsx(Dropdown,{options:c,value:d,triggerVariant:"ghost",triggerSize:"large",onChange:({value:e})=>s(e)})]}),e&&_jsx(RequiredLabel,{children:"required"}),_jsx(StyledMarkdown,{source:t}),"object"===(null==m?void 0:m.type)&&(null==m?void 0:m.constraints)&&_jsx(ConstraintsView,{constraints:(null==m?void 0:m.constraints)||[]}),_jsx(Schema,{skipReadOnly:o,skipWriteOnly:i,schema:m,examples:l,operation:p,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

@@ -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-esm/components/common/ClearButton/ClearButton.js

@@ -1,2 +1,2 @@
-import React,{memo}from"react";const ClearButtonComponent=({className:e,style:t,handleClear:o})=>React.createElement("button",{className:e,style:t,onClick:o},"✕");export const ClearButton=memo(ClearButtonComponent);
+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/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-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,5 @@
+/// <reference types="react" />
+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

@@ -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-esm/components/common/Dropdown/Dropdown.js

@@ -1,16 +1,27 @@
-import React,{memo,useMemo}from"react";import styled from"styled-components";import{ClearButton}from"../ClearButton";import{normalizeText}from"../../../utils";const ArrowSvg=({className:e,style:t})=>React.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.createElement("polyline",{points:"6 9 12 15 18 9"})),ArrowIcon=styled(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:o,clearable:n,placeholder:r,value:a="",className:l})=>{var s;const c=useMemo((()=>e.map((({idx:e,value:t,title:o},n)=>{const r=normalizeText(t);return React.createElement("option",{key:e||r+n,value:r,className:"dropdown-option"},o||r)}))),[e]),i=normalizeText(a),m=(null===(s=e.find((e=>e.value===a)))||void 0===s?void 0:s.title)||i;return React.createElement("div",{className:l+" dropdown-wrapper"},React.createElement(ArrowIcon,null),n&&(null==i?void 0:i.length)>0&&React.createElement(ClearButton,{handleClear:o}),React.createElement("select",{onChange:o=>{const{selectedIndex:n}=o.target;t(e[r||!a?n-1:n])},value:i,className:"dropdown-select"},r&&React.createElement("option",{disabled:!0,hidden:!0,value:r},r),!i&&!r&&React.createElement("option",{disabled:!0}),c),React.createElement("label",null,m))};export const Dropdown=memo(DropdownComponent);
+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

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

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

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