@redocly/theme 0.83.0-rc.2 → 0.83.0-rc.4

package/lib/components/Breadcrumbs/Breadcrumb.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type BreadcrumbProps = {
     label: string;
     link?: string;

package/lib/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare function Breadcrumbs(props: {
     className?: string;
 }): JSX.Element | null;

package/lib/components/Buttons/EditPageButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type EditPageButtonProps = {
     to: string;
 };

package/lib/components/Buttons/EmailButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type EmailButtonProps = {
     data: string;
     dataTestId?: string;

package/lib/components/Buttons/NewTabButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type NewTabButtonProps = {
     data: string;
     dataTestId?: string;

package/lib/components/Catalog/Catalog.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { CatalogConfig } from '../../config';
 export type CatalogProps = {
     pageProps: {

package/lib/components/Catalog/CatalogActions.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { ResolvedFilter } from '../../core/types';
 export type CatalogActionsProps = {
     onOpenFilter: () => void;

package/lib/components/Catalog/CatalogCard.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { CatalogItem } from '../../core/types';
 export type CatalogCardProps = {
     item: CatalogItem;

package/lib/components/Catalog/CatalogInfoBlock.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type CatalogInfoBlockProps = {
     metadata?: {
         scorecardLevel?: string;

package/lib/components/CodeBlock/CodeBlockTabs.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { FileTabs } from '../../components/CodeBlock/CodeBlock';
 export type CodeBlockTabsProps = {
     tabs: FileTabs;

package/lib/components/ColorModeSwitcher/ColorModeIcon.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type ColorModeIconProps = {
     mode?: 'dark' | 'light' | string;
     className?: string;

package/lib/components/ColorModeSwitcher/ColorModeSwitcher.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type ColorModeSwitcherProps = {
     className?: string;
 };

package/lib/components/Dropdown/DropdownMenu.js

@@ -19,35 +19,28 @@ function DropdownMenu(props) {
 }
 exports.DropdownMenu = DropdownMenu;
 const DropdownMenuWrapper = styled_components_1.default.ul `
-  && {
-    font-size: var(--dropdown-menu-font-size);
-    font-weight: var(--dropdown-menu-font-weight);
-    line-height: var(--dropdown-menu-line-height);
-    color: var(--dropdown-menu-text-color);
+  font-size: var(--dropdown-menu-font-size);
+  font-weight: var(--dropdown-menu-font-weight);
+  line-height: var(--dropdown-menu-line-height);
+  color: var(--dropdown-menu-text-color);
 
-    margin: 0;
-    min-width: var(--dropdown-menu-min-width);
-    max-width: var(--dropdown-menu-max-width);
-    max-height: var(--dropdown-menu-max-height);
-    padding: var(--dropdown-menu-padding);
-    background-color: var(--dropdown-menu-bg-color);
-    border-radius: var(--dropdown-menu-border-radius);
-    box-shadow: var(--dropdown-menu-box-shadow);
-    border: 1px solid var(--dropdown-menu-border-color);
-    list-style-type: none;
-    white-space: nowrap;
-    overflow-x: hidden;
-    overflow-y: auto;
-    z-index: var(--z-index-surface);
+  margin: 0;
+  min-width: var(--dropdown-menu-min-width);
+  max-width: var(--dropdown-menu-max-width);
+  max-height: var(--dropdown-menu-max-height);
+  padding: var(--dropdown-menu-padding);
+  background-color: var(--dropdown-menu-bg-color);
+  border-radius: var(--dropdown-menu-border-radius);
+  box-shadow: var(--dropdown-menu-box-shadow);
+  border: 1px solid var(--dropdown-menu-border-color);
+  list-style-type: none;
+  white-space: nowrap;
+  overflow-x: hidden;
+  overflow-y: auto;
+  z-index: var(--z-index-surface);
 
-    display: flex;
-    flex-direction: column;
-    gap: var(--dropdown-menu-item-gap);
-
-    a {
-      text-decoration: none;
-      color: var(--dropdown-menu-text-color);
-    }
-  }
+  display: flex;
+  flex-direction: column;
+  gap: var(--dropdown-menu-item-gap);
 `;
 //# sourceMappingURL=DropdownMenu.js.map

package/lib/components/Dropdown/DropdownMenuItem.js

@@ -93,6 +93,8 @@ const DropdownMenuItemWrapper = styled_components_1.default.li `
   background-color: var(--dropdown-menu-item-bg-color);
   color: var(--dropdown-menu-item-color);
 
+  text-decoration: none;
+
   &:hover {
     background-color: var(--dropdown-menu-item-bg-color-hover);
     color: var(--dropdown-menu-item-color-hover);

package/lib/components/Feedback/Comment.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type CommentProps = {
     onSubmit: (value: {
         comment: string;

package/lib/components/Feedback/Mood.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare enum MOOD_STATES {
     SATISFIED = "satisfied",
     NEUTRAL = "neutral",

package/lib/components/Feedback/Rating.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const FEEDBACK_MAX_RATING = 5;
 export type RatingProps = {
     onSubmit: (value: {

package/lib/components/Feedback/Reasons.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type ReasonsProps = {
     onChange: (value: string[]) => void;
     settings: {

package/lib/components/Feedback/ReportDialog.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { SubmitFeedbackParams } from '../../core/types';
 export type ReportDialogProps = {
     location: string;

package/lib/components/Feedback/Scale.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const MAX_SCALE = 10;
 export type ScaleProps = {
     onSubmit: (value: {

package/lib/components/Feedback/Sentiment.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type SentimentProps = {
     onSubmit: (value: {
         score: number;

package/lib/components/Feedback/Stars.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type StarsProps = {
     max?: number;
     name?: string;

package/lib/components/Filter/Filter.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import type { FilterProps } from '../../core/types';
 export declare function Filter({ filter, filterValuesCasing }: FilterProps): JSX.Element | null;

package/lib/components/Filter/FilterCheckboxes.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import type { FilterProps } from '../../core/types';
 export declare function FilterCheckboxes({ filter, filterValuesCasing }: FilterProps): JSX.Element;

package/lib/components/Filter/FilterContent.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { ResolvedFilter } from '../../core/types';
 import type { ThemeConfig } from '../../config';
 export type FilterContentProps = {

package/lib/components/Filter/FilterDateRange.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import type { FilterProps } from '../../core/types';
 export declare function FilterDateRange({ filter }: FilterProps): JSX.Element;

package/lib/components/Filter/FilterInput.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type FilterInputProps = {
     value: string;
     onChange: (newValue: string) => void;

package/lib/components/Filter/FilterPopover.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { ResolvedFilter } from '../../core/types';
 import type { ThemeConfig } from '../../config';
 export type FilterPopoverProps = {

package/lib/components/Filter/FilterSelect.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import type { FilterProps } from '../../core/types';
 export declare function FilterSelect({ filter, filterValuesCasing }: FilterProps): JSX.Element;

package/lib/components/Footer/Footer.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type FooterProps = {
     className?: string;
 };

package/lib/components/Footer/FooterColumn.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { ResolvedNavItem } from '@redocly/config';
 export type FooterColumnProps = {
     column: ResolvedNavItem;

package/lib/components/Footer/FooterCopyright.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type FooterCopyrightProps = {
     copyrightText: string;
     className?: string;

package/lib/components/Footer/FooterItem.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { ResolvedNavItem } from '@redocly/config';
 export type FooterItemProps = {
     item: ResolvedNavItem;

package/lib/components/Image/Image.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type ImageProps = {
     src?: string;
     srcSet?: string;

package/lib/components/LanguagePicker/LanguagePicker.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type LanguagePickerProps = {
     onChangeLanguage: (newLang: string) => void;
     onlyIcon?: boolean;

package/lib/components/LastUpdated/LastUpdated.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const FORMATS: {
     timeago: (date: Date, locale: string) => string;
     iso: (date: Date) => string;

package/lib/components/Loading/Loading.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type LoadingProps = {
     color: string;
 };

package/lib/components/Logo/Logo.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { LogoConfig } from '../../core/types';
 export type LogoProps = {
     config: LogoConfig;

package/lib/components/Menu/Menu.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { DrilldownMenuItemDetails, ItemState } from '../../core/types';
 export type MenuListProps = {
     items: ItemState[];

package/lib/components/Menu/MenuItem.js

@@ -61,7 +61,7 @@ function MenuItem(props) {
         }
     };
     const chevron = hasChevron ? (isExpanded ? (react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, { size: "var(--menu-item-label-chevron-size)", color: "--tree-content-color-default" })) : (react_1.default.createElement(ChevronRightIcon_1.ChevronRightIcon, { size: "var(--menu-item-label-chevron-size)", color: "--tree-content-color-default" }))) : null;
-    const label = item.label && (react_1.default.createElement(MenuItemLabelWrapper, { active: item.active, depth: depth, withChevron: hasChevron, onClick: handleOnClick, ref: labelRef, role: item.link ? 'none' : 'link' },
+    const label = item.label && (react_1.default.createElement(MenuItemLabelWrapper, { active: item.active, deprecated: item.deprecated, depth: depth, withChevron: hasChevron, onClick: handleOnClick, ref: labelRef, role: item.link ? 'none' : 'link' },
         chevron,
         item.icon ? react_1.default.createElement(MenuItemIcon, { src: item.icon }) : null,
         react_1.default.createElement(MenuItemLabelTextWrapper, null,
@@ -161,9 +161,9 @@ const MenuItemLabelWrapper = styled_components_1.default.li `
       ${depth ? 'var(--menu-item-nested-offset) * ' + depth : '0px'}
     )`};
 
-  ${({ active }) => active &&
+  ${({ active, deprecated }) => active &&
     (0, styled_components_1.css) `
-      color: var(--menu-item-color-active);
+      color: ${deprecated ? '(--menu-content-color-disabled)' : 'var(--menu-item-color-active)'};
       background-color: var(--menu-item-bg-color-active);
 
       &:hover {
@@ -171,6 +171,15 @@ const MenuItemLabelWrapper = styled_components_1.default.li `
       }
     `};
 
+  ${({ deprecated }) => deprecated &&
+    (0, styled_components_1.css) `
+      color: var(--menu-content-color-disabled);
+
+      &:hover {
+        color: var(--menu-content-color-disabled);
+      }
+    `};
+
   &:hover {
     color: var(--menu-item-color-hover);
     background: var(--menu-item-bg-color-hover);

package/lib/components/Menu/MenuMobile.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type MobileMenuProps = {
     className?: string;
     hideUserProfile?: boolean;

package/lib/components/Navbar/Navbar.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type NavbarProps = {
     className?: string;
 };

package/lib/components/Navbar/Navbar.js

@@ -51,8 +51,7 @@ function Navbar({ className }) {
                         openMobileMenu();
                         telemetry.send('mobile_menu_button_open_clicked', {});
                     }, icon: isOpen ? react_1.default.createElement(CloseIcon_1.CloseIcon, null) : react_1.default.createElement(MenuIcon_1.MenuIcon, null) }),
-            hideUserMenu ? null : (react_1.default.createElement(UserMenuWrapper, null,
-                react_1.default.createElement(UserMenu_1.UserMenu, null))))));
+            hideUserMenu ? null : react_1.default.createElement(UserMenu_1.UserMenu, null))));
 }
 exports.Navbar = Navbar;
 const NavbarWrapper = styled_components_1.default.nav `
@@ -92,13 +91,6 @@ const NavbarRow = styled_components_1.default.div `
   gap: var(--navbar-menu-items-gap);
   max-width: var(--navbar-container-max-width);
 `;
-const UserMenuWrapper = styled_components_1.default.div `
-  display: none;
-
-  @media screen and (min-width: ${utils_1.breakpoints.medium}) {
-    display: block;
-  }
-`;
 const MobileMenuButton = (0, styled_components_1.default)(Button_1.Button) `
   margin-left: 0px !important;
 

package/lib/components/Navbar/NavbarItem.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { ResolvedNavItem } from '@redocly/config';
 export type NavbarItemProps = {
     navItem: ResolvedNavItem;

package/lib/components/Navbar/NavbarMenu.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { ResolvedConfigLinks } from '@redocly/config';
 export type NavbarMenuProps = {
     menuItems: ResolvedConfigLinks;

package/lib/components/PageNavigation/NextButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { ResolvedNavItemWithLink } from '@redocly/config';
 export type NextPageType = {
     nextPage?: ResolvedNavItemWithLink | null;

package/lib/components/PageNavigation/PageNavigation.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { ResolvedNavItemWithLink } from '@redocly/config';
 export type PageNavigationType = {
     nextPage?: ResolvedNavItemWithLink | null;

package/lib/components/PageNavigation/PreviousButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { ResolvedNavItemWithLink } from '@redocly/config';
 export type PreviousPageType = {
     prevPage?: ResolvedNavItemWithLink | null;

package/lib/components/Product/Product.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { ProductConfig } from '../../config';
 export type ProductProps = {
     product: ProductConfig;

package/lib/components/Product/ProductPicker.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare function ProductPicker(): JSX.Element | null;

package/lib/components/Search/Search.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type SearchProps = {
     className?: string;
 };

package/lib/components/Search/SearchDialog.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type SearchDialogProps = {
     onClose: () => void;
     className?: string;

package/lib/components/Search/SearchHighlight.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare function highlight(text: string | string[]): JSX.Element | string;

package/lib/components/Search/SearchItem.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { SearchDocument } from '../../core/types';
 type ActiveItem<T> = T & {
     active?: boolean;

package/lib/components/Search/SearchRecent.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type SearchRecentProps = {
     onSelect: (value: string) => void;
     className?: string;

package/lib/components/Search/SearchShortcut.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type SearchShortcutProps = {
     combination: string;
     text: string;

package/lib/components/Search/SearchSuggestedPages.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type SearchSuggestedPagesProps = {
     className?: string;
 };

package/lib/components/Search/SearchTrigger.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type SearchTriggerProps = {
     onClick: () => void;
     className?: string;

package/lib/components/SidebarActions/ChangeViewButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { LayoutVariant } from '../../components/SidebarActions/SidebarActions';
 export type ChangeViewButtonProps = {
     layout: LayoutVariant;

package/lib/components/SidebarLogo/SidebarLogo.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type SidebarLogoProps = {
     imageUrl?: string;
     href?: string;

package/lib/components/TableOfContent/TableOfContent.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { MdHeading } from '../../core/types';
 export type TableOfContentProps = {
     headings?: Array<MdHeading | null> | null | undefined;

package/lib/components/UserMenu/LoginButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type LoginButtonProps = {
     href: string;
     className?: string;

package/lib/components/UserMenu/LogoutMenuItem.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type LogoutMenuItemProps = {
     iconOnly?: boolean;
     className?: string;

package/lib/components/UserMenu/UserAvatar.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type UserAvatarProps = {
     picture?: string;
     className?: string;

package/lib/components/UserMenu/UserInfoMenuItem.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type UserInfoMenuItemProps = {
     name: string;
     email?: string;

package/lib/components/UserMenu/UserMenu.js

@@ -15,14 +15,16 @@ const UserAvatar_1 = require("../../components/UserMenu/UserAvatar");
 const UserInfoMenuItem_1 = require("../../components/UserMenu/UserInfoMenuItem");
 const Dropdown_1 = require("../../components/Dropdown/Dropdown");
 const LogoutMenuItem_1 = require("../../components/UserMenu/LogoutMenuItem");
+const core_1 = require("../../core");
 function UserMenu({ className }) {
     const { userMenu } = (0, hooks_1.useThemeConfig)();
     const { useTranslate, useUserMenu } = (0, hooks_1.useThemeHooks)();
     const { userData, hasDeveloperOnboarding, loginUrl } = useUserMenu();
     const { translate } = useTranslate();
     if (!(userData === null || userData === void 0 ? void 0 : userData.isAuthenticated)) {
-        if (loginUrl) {
-            return react_1.default.createElement(LoginButton_1.LoginButton, { href: loginUrl, "data-testid": "login-btn" });
+        if (loginUrl && !(userMenu === null || userMenu === void 0 ? void 0 : userMenu.hideLoginButton)) {
+            return (react_1.default.createElement(UserMenuWrapper, { "data-component-name": "UserMenu/UserMenu" },
+                react_1.default.createElement(LoginButton_1.LoginButton, { href: loginUrl, "data-testid": "login-btn" })));
         }
         else {
             return null;
@@ -42,11 +44,19 @@ function UserMenu({ className }) {
         ...customItems,
         react_1.default.createElement(LogoutMenuItem_1.LogoutMenuItem, { key: "logout" }),
     ];
-    return (react_1.default.createElement(StyledDropdown, { className: className, alignment: "end", "data-component-name": "UserMenu/UserMenu", trigger: react_1.default.createElement(UserMenuTrigger, { role: "button" },
-            react_1.default.createElement(UserAvatar_1.UserAvatar, { picture: userData.picture })) },
-        react_1.default.createElement(DropdownMenu_1.DropdownMenu, null, items)));
+    return (react_1.default.createElement(UserMenuWrapper, { "data-component-name": "UserMenu/UserMenu" },
+        react_1.default.createElement(StyledDropdown, { className: className, alignment: "end", trigger: react_1.default.createElement(UserMenuTrigger, { role: "button" },
+                react_1.default.createElement(UserAvatar_1.UserAvatar, { picture: userData.picture })) },
+            react_1.default.createElement(DropdownMenu_1.DropdownMenu, null, items))));
 }
 exports.UserMenu = UserMenu;
+const UserMenuWrapper = styled_components_1.default.div `
+  display: none;
+
+  @media screen and (min-width: ${core_1.breakpoints.medium}) {
+    display: block;
+  }
+`;
 const UserMenuTrigger = styled_components_1.default.div.attrs(() => ({
     'data-testid': 'user-menu-button',
 })) `
@@ -59,7 +69,6 @@ const UserMenuTrigger = styled_components_1.default.div.attrs(() => ({
 const StyledDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown).attrs(() => ({
     dataAttributes: {
         'data-testid': 'user-menu-dropdown',
-        'data-component-name': 'UserMenu/UserMenu',
     },
 })) `
   --dropdown-menu-font-size: var(--user-menu-dropdown-font-size);

package/lib/components/UserMenu/UserMenuMobile.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type UserMenuMobileProps = {
     className?: string;
 };

package/lib/components/UserMenu/UserMenuMobile.js

@@ -13,8 +13,9 @@ const LoginButton_1 = require("../../components/UserMenu/LoginButton");
 function UserMenuMobile({ className }) {
     const { useUserMenu } = (0, hooks_1.useThemeHooks)();
     const { userData, loginUrl } = useUserMenu();
+    const { userMenu: userMenuSettings } = (0, hooks_1.useThemeConfig)();
     if (!(userData === null || userData === void 0 ? void 0 : userData.isAuthenticated)) {
-        if (loginUrl) {
+        if (loginUrl && !(userMenuSettings === null || userMenuSettings === void 0 ? void 0 : userMenuSettings.hideLoginButton)) {
             return (react_1.default.createElement(UserMenuMobileWrapper, { "data-component-name": "UserMenu/UserMenuMobile", className: className },
                 react_1.default.createElement(UserMenuMobileLoginButton, { href: loginUrl })));
         }

package/lib/core/hooks/menu/use-nested-menu.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { MenuItemProps } from '../../../core/types';
 type NestedMenuProps = MenuItemProps & {
     labelRef?: React.RefObject<HTMLElement>;

package/lib/core/hooks/use-codeblock-tabs-controls.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { FileTabs } from '../../components/CodeBlock/CodeBlock';
 type CodeBlockTabsProps = {
     tabs: FileTabs;

package/lib/core/types/hooks.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { PageProps, ResolvedNavItemWithLink, Version } from '@redocly/config';
 import type { Callback, TFunction as TFunc } from 'i18next';
 import type { To, Location } from 'react-router-dom';

package/lib/core/types/sidebar.d.ts

@@ -41,6 +41,7 @@ export type ItemState = Omit<SidebarNavItem, 'items'> & {
     menuStyle?: MenuStyle;
     languageInsensitive?: boolean;
     modified?: boolean;
+    deprecated?: boolean;
 };
 export type DrilldownMenuItemDetails = {
     previousLink?: string;

package/lib/core/utils/media-css.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.breakpoints = void 0;
-exports.breakpoints = { small: '700px', medium: '1050px', large: '1200px' };
+exports.breakpoints = { small: '672px', medium: '960px', large: '1280px' };
 //# sourceMappingURL=media-css.js.map

package/lib/layouts/Forbidden.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare function Forbidden(): JSX.Element;

package/lib/layouts/NotFound.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare function NotFound(): JSX.Element;

package/lib/layouts/OIDCForbidden.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare function OIDCForbidden(): JSX.Element;

package/lib/markdoc/components/Mermaid/Mermaid.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type MermaidProps = {
     diagramHtml: string;
     'data-source'?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.83.0-rc.2",
+  "version": "0.83.0-rc.4",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -46,7 +46,7 @@
     "@storybook/react": "7.6.19",
     "@storybook/react-webpack5": "7.6.19",
     "@storybook/testing-library": "0.2.2",
-    "@storybook/theming": "7.6.19",
+    "@storybook/theming": "8.0.0",
     "@testing-library/jest-dom": "6.1.5",
     "@testing-library/react": "14.1.2",
     "@testing-library/user-event": "14.5.1",
@@ -76,7 +76,7 @@
     "react-router-dom": "6.21.1",
     "rimraf": "5.0.5",
     "storybook": "7.6.19",
-    "storybook-addon-pseudo-states": "2.2.1",
+    "storybook-addon-pseudo-states": "3.1.1",
     "storybook-design-token": "3.1.0",
     "styled-components": "5.3.11",
     "styled-system": "5.1.5",
@@ -98,7 +98,7 @@
     "timeago.js": "^4.0.2",
     "i18next": "^22.4.12",
     "nprogress": "^0.2.0",
-    "@redocly/config": "0.83.0-rc.2"
+    "@redocly/config": "0.83.0-rc.4"
   },
   "scripts": {
     "start": "npm-run-all --parallel storybook storybook:tokens:watch",

package/src/components/Dropdown/DropdownMenu.tsx

@@ -42,34 +42,27 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
 }
 
 const DropdownMenuWrapper = styled.ul`
-  && {
-    font-size: var(--dropdown-menu-font-size);
-    font-weight: var(--dropdown-menu-font-weight);
-    line-height: var(--dropdown-menu-line-height);
-    color: var(--dropdown-menu-text-color);
+  font-size: var(--dropdown-menu-font-size);
+  font-weight: var(--dropdown-menu-font-weight);
+  line-height: var(--dropdown-menu-line-height);
+  color: var(--dropdown-menu-text-color);
 
-    margin: 0;
-    min-width: var(--dropdown-menu-min-width);
-    max-width: var(--dropdown-menu-max-width);
-    max-height: var(--dropdown-menu-max-height);
-    padding: var(--dropdown-menu-padding);
-    background-color: var(--dropdown-menu-bg-color);
-    border-radius: var(--dropdown-menu-border-radius);
-    box-shadow: var(--dropdown-menu-box-shadow);
-    border: 1px solid var(--dropdown-menu-border-color);
-    list-style-type: none;
-    white-space: nowrap;
-    overflow-x: hidden;
-    overflow-y: auto;
-    z-index: var(--z-index-surface);
+  margin: 0;
+  min-width: var(--dropdown-menu-min-width);
+  max-width: var(--dropdown-menu-max-width);
+  max-height: var(--dropdown-menu-max-height);
+  padding: var(--dropdown-menu-padding);
+  background-color: var(--dropdown-menu-bg-color);
+  border-radius: var(--dropdown-menu-border-radius);
+  box-shadow: var(--dropdown-menu-box-shadow);
+  border: 1px solid var(--dropdown-menu-border-color);
+  list-style-type: none;
+  white-space: nowrap;
+  overflow-x: hidden;
+  overflow-y: auto;
+  z-index: var(--z-index-surface);
 
-    display: flex;
-    flex-direction: column;
-    gap: var(--dropdown-menu-item-gap);
-
-    a {
-      text-decoration: none;
-      color: var(--dropdown-menu-text-color);
-    }
-  }
+  display: flex;
+  flex-direction: column;
+  gap: var(--dropdown-menu-item-gap);
 `;

package/src/components/Dropdown/DropdownMenuItem.tsx

@@ -133,6 +133,8 @@ const DropdownMenuItemWrapper = styled.li<{
   background-color: var(--dropdown-menu-item-bg-color);
   color: var(--dropdown-menu-item-color);
 
+  text-decoration: none;
+
   &:hover {
     background-color: var(--dropdown-menu-item-bg-color-hover);
     color: var(--dropdown-menu-item-color-hover);

package/src/components/Menu/MenuItem.tsx

@@ -58,6 +58,7 @@ export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Ele
   const label = item.label && (
     <MenuItemLabelWrapper
       active={item.active}
+      deprecated={item.deprecated}
       depth={depth}
       withChevron={hasChevron}
       onClick={handleOnClick}
@@ -207,6 +208,7 @@ const MenuItemLabelWrapper = styled.li<{
   active?: boolean;
   depth?: number;
   withChevron?: boolean;
+  deprecated?: boolean;
 }>`
   display: flex;
   position: relative;
@@ -227,10 +229,10 @@ const MenuItemLabelWrapper = styled.li<{
       ${depth ? 'var(--menu-item-nested-offset) * ' + depth : '0px'}
     )`};
 
-  ${({ active }) =>
+  ${({ active, deprecated }) =>
     active &&
     css`
-      color: var(--menu-item-color-active);
+      color: ${deprecated ? '(--menu-content-color-disabled)' : 'var(--menu-item-color-active)'};
       background-color: var(--menu-item-bg-color-active);
 
       &:hover {
@@ -238,6 +240,16 @@ const MenuItemLabelWrapper = styled.li<{
       }
     `};
 
+  ${({ deprecated }) =>
+    deprecated &&
+    css`
+      color: var(--menu-content-color-disabled);
+
+      &:hover {
+        color: var(--menu-content-color-disabled);
+      }
+    `};
+
   &:hover {
     color: var(--menu-item-color-hover);
     background: var(--menu-item-bg-color-hover);

package/src/components/Navbar/Navbar.tsx

@@ -66,11 +66,7 @@ export function Navbar({ className }: NavbarProps): JSX.Element | null {
           }
           icon={isOpen ? <CloseIcon /> : <MenuIcon />}
         />
-        {hideUserMenu ? null : (
-          <UserMenuWrapper>
-            <UserMenu />
-          </UserMenuWrapper>
-        )}
+        {hideUserMenu ? null : <UserMenu />}
       </NavbarRow>
     </NavbarWrapper>
   );
@@ -115,14 +111,6 @@ const NavbarRow = styled.div`
   max-width: var(--navbar-container-max-width);
 `;
 
-const UserMenuWrapper = styled.div`
-  display: none;
-
-  @media screen and (min-width: ${breakpoints.medium}) {
-    display: block;
-  }
-`;
-
 const MobileMenuButton = styled(Button)`
   margin-left: 0px !important;
 

package/src/components/UserMenu/UserMenu.tsx

@@ -12,6 +12,7 @@ import { UserAvatar } from '@redocly/theme/components/UserMenu/UserAvatar';
 import { UserInfoMenuItem } from '@redocly/theme/components/UserMenu/UserInfoMenuItem';
 import { Dropdown } from '@redocly/theme/components/Dropdown/Dropdown';
 import { LogoutMenuItem } from '@redocly/theme/components/UserMenu/LogoutMenuItem';
+import { breakpoints } from '@redocly/theme/core';
 
 export type UserMenuProps = {
   className?: string;
@@ -28,8 +29,12 @@ export function UserMenu({ className }: UserMenuProps) {
   const { translate } = useTranslate();
 
   if (!userData?.isAuthenticated) {
-    if (loginUrl) {
-      return <LoginButton href={loginUrl} data-testid="login-btn" />;
+    if (loginUrl && !userMenu?.hideLoginButton) {
+      return (
+        <UserMenuWrapper data-component-name="UserMenu/UserMenu">
+          <LoginButton href={loginUrl} data-testid="login-btn" />
+        </UserMenuWrapper>
+      );
     } else {
       return null;
     }
@@ -70,21 +75,30 @@ export function UserMenu({ className }: UserMenuProps) {
   ];
 
   return (
-    <StyledDropdown
-      className={className}
-      alignment="end"
-      data-component-name="UserMenu/UserMenu"
-      trigger={
-        <UserMenuTrigger role="button">
-          <UserAvatar picture={userData.picture} />
-        </UserMenuTrigger>
-      }
-    >
-      <DropdownMenu>{items}</DropdownMenu>
-    </StyledDropdown>
+    <UserMenuWrapper data-component-name="UserMenu/UserMenu">
+      <StyledDropdown
+        className={className}
+        alignment="end"
+        trigger={
+          <UserMenuTrigger role="button">
+            <UserAvatar picture={userData.picture} />
+          </UserMenuTrigger>
+        }
+      >
+        <DropdownMenu>{items}</DropdownMenu>
+      </StyledDropdown>
+    </UserMenuWrapper>
   );
 }
 
+const UserMenuWrapper = styled.div`
+  display: none;
+
+  @media screen and (min-width: ${breakpoints.medium}) {
+    display: block;
+  }
+`;
+
 const UserMenuTrigger = styled.div.attrs(() => ({
   'data-testid': 'user-menu-button',
 }))`
@@ -98,7 +112,6 @@ const UserMenuTrigger = styled.div.attrs(() => ({
 const StyledDropdown = styled(Dropdown).attrs(() => ({
   dataAttributes: {
     'data-testid': 'user-menu-dropdown',
-    'data-component-name': 'UserMenu/UserMenu',
   },
 }))`
   --dropdown-menu-font-size: var(--user-menu-dropdown-font-size);

package/src/components/UserMenu/UserMenuMobile.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { useThemeConfig, useThemeHooks } from '@redocly/theme/core/hooks';
 import { UserAvatar } from '@redocly/theme/components/UserMenu/UserAvatar';
 import { LogoutMenuItem } from '@redocly/theme/components/UserMenu/LogoutMenuItem';
 import { LoginButton } from '@redocly/theme/components/UserMenu/LoginButton';
@@ -13,9 +13,10 @@ export type UserMenuMobileProps = {
 export function UserMenuMobile({ className }: UserMenuMobileProps): JSX.Element | null {
   const { useUserMenu } = useThemeHooks();
   const { userData, loginUrl } = useUserMenu();
+  const { userMenu: userMenuSettings } = useThemeConfig();
 
   if (!userData?.isAuthenticated) {
-    if (loginUrl) {
+    if (loginUrl && !userMenuSettings?.hideLoginButton) {
       return (
         <UserMenuMobileWrapper data-component-name="UserMenu/UserMenuMobile" className={className}>
           <UserMenuMobileLoginButton href={loginUrl} />

package/src/core/types/sidebar.ts

@@ -49,6 +49,7 @@ export type ItemState = Omit<SidebarNavItem, 'items'> & {
   menuStyle?: MenuStyle;
   languageInsensitive?: boolean;
   modified?: boolean; //item from openapi-docs sidebar
+  deprecated?: boolean; //item from openapi-docs sidebar
 };
 
 export type DrilldownMenuItemDetails = {

package/src/core/utils/media-css.ts

@@ -4,4 +4,4 @@ export type Breakpoints = {
   large: `${number}px`;
 };
 
-export const breakpoints: Breakpoints = { small: '700px', medium: '1050px', large: '1200px' };
+export const breakpoints: Breakpoints = { small: '672px', medium: '960px', large: '1280px' };