@redocly/theme 0.82.2-rc.2 → 0.82.4-rc.1

package/src/components/JsonViewer/JsonViewer.tsx

@@ -5,13 +5,13 @@ import { CodeBlock } from '@redocly/theme/components/CodeBlock/CodeBlock';
 
 import { JsonValue } from './helpers';
 
-export interface JsonProps {
+export type JsonProps = {
   data: any;
   className?: string;
   expandLevel: number;
   startLineNumber?: number;
   onCopyClick?: () => void;
-}
+};
 
 function JsonComponent({ data, expandLevel = 1, className, onCopyClick }: JsonProps): JSX.Element {
   const showFoldingButtons =

package/src/components/LanguagePicker/LanguagePicker.tsx

@@ -9,7 +9,7 @@ import { Button } from '@redocly/theme/components/Button/Button';
 import { Dropdown } from '@redocly/theme/components/Dropdown/Dropdown';
 import { CheckmarkIcon } from '@redocly/theme/icons/CheckmarkIcon/CheckmarkIcon';
 
-type LanguagePickerProps = {
+export type LanguagePickerProps = {
   onChangeLanguage: (newLang: string) => void;
   onlyIcon?: boolean;
   placement?: 'top' | 'bottom';
@@ -67,7 +67,7 @@ const LanguageDropdown = styled(Dropdown).attrs(() => ({
   }
 
   --dropdown-menu-item-justify-content: space-between;
-
+  --dropdown-menu-item-gap: var(--spacing-xxs);
   --dropdown-menu-font-size: var(--language-picker-dropdown-font-size);
   --dropdown-menu-font-weight: var(--language-picker-dropdown-font-weight);
   --dropdown-menu-line-height: var(--language-picker-dropdown-line-height);
@@ -78,7 +78,6 @@ const LanguageDropdown = styled(Dropdown).attrs(() => ({
   --dropdown-menu-padding: var(--language-picker-dropdown-padding);
   --dropdown-menu-border-radius: var(--language-picker-dropdown-border-radius);
   --dropdown-menu-box-shadow: var(--language-picker-dropdown-box-shadow);
-  --dropdown-menu-color-disabled: var(--language-picker-dropdown-color-disabled);
   --dropdown-menu-border-color: var(--language-picker-dropdown-border-color);
   --dropdown-menu-bg-color: var(--language-picker-dropdown-bg-color);
   --dropdown-menu-item-padding-horizontal: var(--language-picker-dropdown-item-padding-horizontal);
@@ -92,8 +91,12 @@ const LanguageDropdown = styled(Dropdown).attrs(() => ({
   --dropdown-menu-item-border-radius: var(--language-picker-dropdown-item-border-radius);
   --dropdown-menu-item-bg-color-active: var(--language-picker-dropdown-item-bg-color-active);
   --dropdown-menu-item-bg-color-hover: var(--language-picker-dropdown-item-bg-color-hover);
+  --dropdown-menu-item-bg-color-disabled: var(--language-picker-dropdown-item-bg-color-disabled);
   --dropdown-menu-item-separator-border-color: var(
     --language-picker-dropdown-item-separator-border-color
   );
   --dropdown-menu-item-color-dangerous: var(--language-picker-dropdown-item-color-dangerous);
+  --dropdown-menu-item-color-disabled: var(--language-picker-dropdown-item-color-disabled);
+  --dropdown-menu-item-color-active: var(--language-picker-dropdown-item-color-active);
+  --dropdown-menu-item-color-hover: var(--language-picker-dropdown-item-color-hover);
 `;

package/src/components/LanguagePicker/variables.ts

@@ -15,7 +15,6 @@ export const languagePicker = css`
   --language-picker-dropdown-padding: var(--dropdown-menu-padding ); // @presenter Spacing
   --language-picker-dropdown-border-radius: var(--dropdown-menu-border-radius); // @presenter BorderRadius
   --language-picker-dropdown-box-shadow: var(--dropdown-menu-box-shadow); // @presenter Shadow
-  --language-picker-dropdown-color-disabled: var(--dropdown-menu-color-disabled); // @presenter Color
   --language-picker-dropdown-border-color: var(--dropdown-menu-border-color); // @presenter Color
   --language-picker-dropdown-bg-color: var(--dropdown-menu-bg-color); // @presenter Color
 
@@ -26,8 +25,12 @@ export const languagePicker = css`
   --language-picker-dropdown-item-border-radius: var(--dropdown-menu-item-border-radius ); // @presenter BorderRadius
   --language-picker-dropdown-item-bg-color-active: var(--dropdown-menu-item-bg-color-active); // @presenter Color
   --language-picker-dropdown-item-bg-color-hover: var(--dropdown-menu-item-bg-color-hover); // @presenter Color
+  --language-picker-dropdown-item-bg-color-disabled: var(--dropdown-menu-item-bg-color-disabled); // @presenter Color
   --language-picker-dropdown-item-separator-border-color: var(--dropdown-menu-item-separator-border-color); // @presenter Color
   --language-picker-dropdown-item-color-dangerous: var(--dropdown-menu-item-color-dangerous);
+  --language-picker-dropdown-item-color-disabled: var(--dropdown-menu-item-color-disabled);
+  --language-picker-dropdown-item-color-active: var(--dropdown-menu-item-color-active);
+  --language-picker-dropdown-item-color-hover: var(--dropdown-menu-item-color-hover);
   --language-picker-dropdown-item-border-color-focused: var(--dropdown-menu-item-border-color-focused);
 
   // @tokens End

package/src/components/LastUpdated/LastUpdated.tsx

@@ -14,7 +14,7 @@ const FORMATS = {
     date.toLocaleDateString(locale, { month: 'long', day: 'numeric', year: 'numeric' }),
 };
 
-type LastUpdatedProps = {
+export type LastUpdatedProps = {
   lastModified: Date;
   format?: keyof typeof FORMATS;
   locale?: string;

package/src/components/Link/Link.tsx

@@ -16,7 +16,7 @@ export type LinkProps = {
   [key: string]: unknown;
 };
 
-export function Link(props: React.PropsWithChildren<LinkProps>) {
+export function Link(props: React.PropsWithChildren<LinkProps>): JSX.Element {
   const context = useContext(ThemeDataContext);
 
   if (context) {

package/src/components/Loading/Loading.tsx

@@ -13,9 +13,9 @@ const LoadingMessage = styled.div<{ color: string }>`
   color: ${({ color }) => getCssColorVariable(color)};
 `;
 
-export interface LoadingProps {
+export type LoadingProps = {
   color: string;
-}
+};
 
 export function Loading({ color }: LoadingProps): JSX.Element {
   return (

package/src/components/Logo/Logo.tsx

@@ -7,7 +7,7 @@ import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { Link } from '@redocly/theme/components/Link/Link';
 import { Image } from '@redocly/theme/components/Image/Image';
 
-type LogoProps = {
+export type LogoProps = {
   config: LogoConfig;
   className?: string;
 };

package/src/components/Markdown/Markdown.tsx

@@ -1,24 +1,33 @@
 import styled, { css } from 'styled-components';
 
+import type { PropsWithChildren } from 'react';
+
 import { typography } from '@redocly/theme/core/utils/theme-helpers';
 import { markdownBaseTableCss } from '@redocly/theme/components/Markdown/styles/baseTable';
 import { markdownLinksCss } from '@redocly/theme/components/Markdown/styles/links';
 import { headingAnchorCss } from '@redocly/theme/components/Markdown/styles/headingAnchor';
 
+export type MarkdownProps = PropsWithChildren<{
+  className?: string;
+  compact?: boolean;
+  inline?: boolean;
+  base?: boolean;
+  ref?: (node: HTMLDivElement) => void;
+}>;
+
 export const Markdown = styled.main.attrs<{
   className?: string;
 }>(({ className }) => ({
   'data-component-name': 'Markdown/Markdown',
   className,
-}))<{ compact?: boolean; inline?: boolean; base?: boolean }>`
-  font-weight: var(--font-weight-regular);
+}))<MarkdownProps>`
+  font-size: var(--md-content-font-size);
+  font-family: var(--md-content-font-family);
+  font-weight: var(--md-content-font-weight);
+  line-height: var(--md-content-line-height);
+  color: var(--md-content-text-color);
   padding: 0;
 
-  color: var(--text-color-secondary);
-  font-size: var(--font-size-base);
-  font-family: var(--font-family-base);
-  line-height: var(--line-height-base);
-
   ${({ compact }) =>
     compact &&
     css`
@@ -34,7 +43,7 @@ export const Markdown = styled.main.attrs<{
     base &&
     css`
       p {
-        font-size: var(--font-size-base);
+        font-size: var(--md-content-font-size);
       }
     `}
 
@@ -103,37 +112,37 @@ export const Markdown = styled.main.attrs<{
   }
 
   h1.md {
-    ${typography('h1', 'h')};
+    ${typography('h1')};
     margin: var(--h1-margin-top) 0 var(--h1-margin-bottom) 0;
     ${headingAnchorCss()};
   }
 
   h2.md {
-    ${typography('h2', 'h')};
+    ${typography('h2')};
     margin: var(--h2-margin-top) 0 var(--h2-margin-bottom) 0;
     ${headingAnchorCss()};
   }
 
   h3.md {
-    ${typography('h3', 'h')};
+    ${typography('h3')};
     margin: var(--h3-margin-top) 0 var(--h3-margin-bottom) 0;
     ${headingAnchorCss()};
   }
 
   h4.md {
-    ${typography('h4', 'h')};
+    ${typography('h4')};
     margin: var(--h4-margin-top) 0 var(--h4-margin-bottom) 0;
     ${headingAnchorCss()};
   }
 
   h5.md {
-    ${typography('h5', 'h')};
+    ${typography('h5')};
     margin: var(--h5-margin-top) 0 var(--h5-margin-bottom) 0;
     ${headingAnchorCss()};
   }
 
   h6.md {
-    ${typography('h6', 'h')};
+    ${typography('h6')};
     margin: var(--h6-margin-top) 0 var(--h6-margin-bottom) 0;
     ${headingAnchorCss()};
   }

package/src/components/Markdown/variables.ts

@@ -7,6 +7,11 @@ export const markdown = css`
 
   --md-content-max-width: 910px;
   --md-content-padding: 25px 0px 25px 0px; // @presenter Spacing
+  --md-content-font-size: var(--font-size-base); // @presenter FontSize
+  --md-content-font-family: var(--font-family-base); // @presenter FontFamily
+  --md-content-line-height: var(--line-height-base); // @presenter LineHeight
+  --md-content-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --md-content-text-color: var(--text-color-secondary); // @presenter Color
 
   /**
   * @tokens Markdown Blockquote
@@ -31,7 +36,7 @@ export const markdown = css`
   * @tokens Markdown Table
   */
 
-  --md-table-font-size: var(--font-size-base); // @presenter FontSize
+  --md-table-font-size: var(--md-content-font-size); // @presenter FontSize
   --md-table-line-height: var(--line-height-md); // @presenter FontSize
   --md-table-margin-vertical: 20px; // @presenter Spacing
   --md-table-bg-color: transparent; // @presenter Color
@@ -81,10 +86,10 @@ export const markdown = css`
 
   --md-numbered-list-number-display: none;
   --md-numbered-list-item-style: var(--md-list-item-style);
-  --md-numbered-list-number-text-color: var(--text-color-secondary); // @presenter Color
-  --md-numbered-list-number-font-size: var(--font-size-base); // @presenter FontSize
-  --md-numbered-list-number-font-family: var(--font-size-base); // @presenter FontFamily
-  --md-numbered-list-number-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --md-numbered-list-number-text-color: var(--md-content-text-color); // @presenter Color
+  --md-numbered-list-number-font-size: var(--md-content-font-size); // @presenter FontSize
+  --md-numbered-list-number-font-family: var(--md-content-font-family); // @presenter FontFamily
+  --md-numbered-list-number-font-weight: var(--md-content-font-weight); // @presenter FontWeight
   --md-numbered-list-number-bg-color: var(--bg-color-active); // @presenter Color
   --md-numbered-list-number-border-radius: 10px; // @presenter BorderRadius
   --md-numbered-list-number-margin-right: 5px; // @presenter Spacing

package/src/components/Menu/Menu.tsx

@@ -7,7 +7,7 @@ import { MenuItem } from '@redocly/theme/components/Menu/MenuItem';
 import { MenuItemType } from '@redocly/theme/core/constants';
 import { getMenuItemType } from '@redocly/theme/core/utils';
 
-type MenuListProps = {
+export type MenuListProps = {
   items: ItemState[];
   depth?: number;
   isMobile?: boolean;

package/src/components/Menu/MenuContainer.tsx

@@ -1,13 +1,18 @@
+import React, { type PropsWithChildren } from 'react';
 import styled, { keyframes } from 'styled-components';
 
 import type { MenuItemsAnimation } from '@redocly/theme/core/types';
 
-type MenuContainerProps = {
+export type MenuContainerProps = PropsWithChildren<{
   growContent?: boolean;
   className?: string;
   hidden?: boolean;
   animation?: MenuItemsAnimation;
-};
+}>;
+
+export function MenuContainer(props: MenuContainerProps): JSX.Element {
+  return <MenuContainerComponent {...props} data-component-name="Menu/MenuContainer" />;
+}
 
 const slideInRightAnimation = keyframes`
   0% {
@@ -27,9 +32,8 @@ const slideInLeftAnimation = keyframes`
   }
 `;
 
-export const MenuContainer = styled.div.attrs<MenuContainerProps>(
+const MenuContainerComponent = styled.div.attrs<MenuContainerProps>(
   ({ growContent, className, animation }) => ({
-    'data-component-name': 'Menu/MenuContainer',
     growContent: growContent === undefined ? true : growContent,
     className,
     animation,
@@ -47,7 +51,7 @@ export const MenuContainer = styled.div.attrs<MenuContainerProps>(
   position: relative;
   overflow-y: auto;
   flex-grow: ${({ growContent }) => (growContent ? 1 : 0)};
-  padding-top: var(--sidebar-offset-top);
+  padding-top: var(--menu-container-padding-top);
   display: ${({ hidden }) => (hidden ? 'none' : 'block')};
   overscroll-behavior: contain;
 `;

package/src/components/Menu/MenuMobile.tsx

@@ -13,7 +13,7 @@ import { ArrowLeftIcon } from '@redocly/theme/icons/ArrowLeftIcon/ArrowLeftIcon'
 import { UserMenuMobile } from '@redocly/theme/components/UserMenu/UserMenuMobile';
 import { Product } from '@redocly/theme/components/Product/Product';
 
-type MobileMenuProps = {
+export type MobileMenuProps = {
   className?: string;
   hideUserProfile?: boolean;
 };

package/src/components/Menu/variables.ts

@@ -173,4 +173,6 @@ export const mobileMenu = css`
   --menu-mobile-product-name-margin: var(--menu-item-label-margin);
 
   // @tokens End
+
+  --menu-container-padding-top: var(--sidebar-offset-top);
 `;

package/src/components/Navbar/Navbar.tsx

@@ -16,6 +16,7 @@ import { ProductPicker } from '@redocly/theme/components/Product/ProductPicker';
 import { Button } from '@redocly/theme/components/Button/Button';
 import { MenuIcon } from '@redocly/theme/icons/MenuIcon/MenuIcon';
 import { CloseIcon } from '@redocly/theme/icons/CloseIcon/CloseIcon';
+
 export type NavbarProps = {
   className?: string;
 };

package/src/components/Navbar/NavbarItem.tsx

@@ -13,7 +13,7 @@ import { LaunchIcon } from '@redocly/theme/icons/LaunchIcon/LaunchIcon';
 import { Link } from '@redocly/theme/components/Link/Link';
 import { Dropdown } from '@redocly/theme/components/Dropdown/Dropdown';
 
-type NavbarItemProps = {
+export type NavbarItemProps = {
   navItem: ResolvedNavItem;
   className?: string;
 };
@@ -84,7 +84,7 @@ export function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element
 const NavbarMenuItemDropdown = styled(Dropdown)`
   --dropdown-menu-item-separator-font-size: var(--navbar-separator-font-size);
   --dropdown-menu-item-separator-text-color: var(--navbar-separator-text-color);
-  --dropdown-menu-item-separator-lin-height: var(--navbar-separator-line-height);
+  --dropdown-menu-item-separator-line-height: var(--navbar-separator-line-height);
 `;
 
 const NavbarMenuItem = styled.li<LinkProps & { active?: boolean }>`

package/src/components/Navbar/NavbarLogo.tsx

@@ -1,10 +1,15 @@
+import React from 'react';
 import styled from 'styled-components';
 
+import type { LogoProps } from '@redocly/theme/components/Logo/Logo';
+
 import { Logo } from '@redocly/theme/components/Logo/Logo';
 
-export const NavbarLogo = styled(Logo).attrs({
-  'data-component-name': 'Navbar/NavbarLogo',
-})`
+export function NavbarLogo(props: LogoProps) {
+  return <NavbarLogoComponent {...props} data-component-name="Navbar/NavbarLogo" />;
+}
+
+const NavbarLogoComponent = styled(Logo)<LogoProps>`
   --logo-height: var(--navbar-logo-height);
   --logo-width: var(--navbar-logo-width);
   --logo-margin: var(--navbar-logo-margin);

package/src/components/Navbar/NavbarMenu.tsx

@@ -6,7 +6,7 @@ import type { ResolvedConfigLinks, ResolvedNavItem } from '@redocly/config';
 import { breakpoints, isPrimitive } from '@redocly/theme/core/utils';
 import { NavbarItem } from '@redocly/theme/components/Navbar/NavbarItem';
 
-type NavbarMenuProps = {
+export type NavbarMenuProps = {
   menuItems: ResolvedConfigLinks;
   className?: string;
 };

package/src/components/PageNavigation/NextButton.tsx

@@ -7,7 +7,7 @@ import { useThemeHooks, useThemeConfig } from '@redocly/theme/core/hooks';
 import { Button } from '@redocly/theme/components/Button/Button';
 import { ArrowRightIcon } from '@redocly/theme/icons/ArrowRightIcon/ArrowRightIcon';
 
-type NextPageType = {
+export type NextPageType = {
   nextPage?: ResolvedNavItemWithLink | null;
   className?: string;
 };

package/src/components/PageNavigation/PageNavigation.tsx

@@ -7,7 +7,7 @@ import { useThemeConfig } from '@redocly/theme/core/hooks';
 import { PreviousButton } from '@redocly/theme/components/PageNavigation/PreviousButton';
 import { NextButton } from '@redocly/theme/components/PageNavigation/NextButton';
 
-type PageNavigationType = {
+export type PageNavigationType = {
   nextPage?: ResolvedNavItemWithLink | null;
   prevPage?: ResolvedNavItemWithLink | null;
   className?: string;

package/src/components/PageNavigation/PreviousButton.tsx

@@ -7,7 +7,7 @@ import { useThemeHooks, useThemeConfig } from '@redocly/theme/core/hooks';
 import { Button } from '@redocly/theme/components/Button/Button';
 import { ArrowLeftIcon } from '@redocly/theme/icons/ArrowLeftIcon/ArrowLeftIcon';
 
-type PreviousPageType = {
+export type PreviousPageType = {
   prevPage?: ResolvedNavItemWithLink | null;
   className?: string;
 };

package/src/components/Panel/Panel.tsx

@@ -10,7 +10,7 @@ import { PanelHeaderTitle } from '@redocly/theme/components/Panel/PanelHeaderTit
 import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
 import { ChevronRightIcon } from '@redocly/theme/icons/ChevronRightIcon/ChevronRightIcon';
 
-type PanelProps = {
+export type PanelProps = {
   expanded?: boolean;
   isExpandable?: boolean;
   className?: string;

package/src/components/Panel/PanelBody.ts

@@ -13,10 +13,10 @@ const showPanelAnimation = css`
   animation: ${showPanel} 0.2s;
 `;
 
-interface PanelBodyProps {
+export type PanelBodyProps = {
   animate?: boolean;
   hidden?: boolean;
-}
+};
 
 export const PanelBody = styled.div.attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Panel/PanelBody',

package/src/components/Portal/Portal.tsx

@@ -5,11 +5,14 @@ import type { PropsWithChildren } from 'react';
 
 import { IS_BROWSER } from '@redocly/theme/core/utils';
 
-type PortalProps = {
+export type PortalProps = {
   mountId?: string;
 };
 
-export const Portal = ({ children, mountId = 'root' }: PropsWithChildren<PortalProps>) => {
+export function Portal({
+  children,
+  mountId = 'root',
+}: PropsWithChildren<PortalProps>): React.ReactPortal | JSX.Element {
   const mount = IS_BROWSER ? document.getElementById(mountId) || document.body : null;
 
   if (!mount) {
@@ -17,4 +20,4 @@ export const Portal = ({ children, mountId = 'root' }: PropsWithChildren<PortalP
   }
 
   return createPortal(children, mount);
-};
+}

package/src/components/Product/Product.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import type { ProductConfig } from '@redocly/theme/config';
 
-type ProductProps = {
+export type ProductProps = {
   product: ProductConfig;
   className?: string;
 };

package/src/components/Product/ProductPicker.tsx

@@ -66,7 +66,6 @@ const ProductDropdown = styled(Dropdown).attrs(() => ({
   --dropdown-menu-padding: var(--product-picker-dropdown-padding);
   --dropdown-menu-border-radius: var(--product-picker-dropdown-border-radius);
   --dropdown-menu-box-shadow: var(--product-picker-dropdown-box-shadow);
-  --dropdown-menu-color-disabled: var(--product-picker-dropdown-color-disabled);
   --dropdown-menu-border-color: var(--product-picker-dropdow--border-color);
   --dropdown-menu-bg-color: var(--product-picker-dropdown-bg-color);
   --dropdown-menu-item-padding-horizontal: var(--product-picker-dropdown-item-padding-horizontal);
@@ -80,8 +79,12 @@ const ProductDropdown = styled(Dropdown).attrs(() => ({
   --dropdown-menu-item-border-radius: var(--product-picker-dropdown-item-border-radius);
   --dropdown-menu-item-bg-color-active: var(--product-picker-dropdown-item-bg-color-active);
   --dropdown-menu-item-bg-color-hover: var(--product-picker-dropdown-item-bg-color-hover);
+  --dropdown-menu-item-bg-color-disabled: var(--product-picker-dropdown-item-bg-color-disabled);
   --dropdown-menu-item-separator-border-color: var(
     --product-picker-dropdown-item-separator-border-color
   );
   --dropdown-menu-item-color-dangerous: var(--product-picker-dropdown-item-color-dangerous);
+  --dropdown-menu-item-color-disabled: var(--product-picker-dropdown-item-color-disabled);
+  --dropdown-menu-item-color-active: var(--product-picker-dropdown-item-color-active);
+  --dropdown-menu-item-color-hover: var(--product-picker-dropdown-item-color-hover);
 `;

package/src/components/Product/variables.ts

@@ -18,7 +18,6 @@ export const productPicker = css`
   --product-picker-dropdown-padding: var(--dropdown-menu-padding ); // @presenter Spacing
   --product-picker-dropdown-border-radius: var(--dropdown-menu-border-radius); // @presenter BorderRadius
   --product-picker-dropdown-box-shadow: var(--dropdown-menu-box-shadow); // @presenter Shadow
-  --product-picker-dropdown-color-disabled: var(--dropdown-menu-color-disabled); // @presenter Color
   --product-picker-dropdown-border-color: var(--dropdown-menu-border-color); // @presenter Color
   --product-picker-dropdown-bg-color: var(--dropdown-menu-bg-color); // @presenter Color
 
@@ -29,8 +28,12 @@ export const productPicker = css`
   --product-picker-dropdown-item-border-radius: var(--dropdown-menu-item-border-radius ); // @presenter BorderRadius
   --product-picker-dropdown-item-bg-color-active: var(--dropdown-menu-item-bg-color-active); // @presenter Color
   --product-picker-dropdown-item-bg-color-hover: var(--dropdown-menu-item-bg-color-hover); // @presenter Color
+  --product-picker-dropdown-item-bg-color-disabled: var(--dropdown-menu-item-bg-color-disabled); // @presenter Color
   --product-picker-dropdown-item-separator-border-color: var(--dropdown-menu-item-separator-border-color); // @presenter Color
   --product-picker-dropdown-item-color-dangerous: var(--dropdown-menu-item-color-dangerous);
+  --product-picker-dropdown-item-color-disabled: var(--dropdown-menu-item-color-disabled);
+  --product-picker-dropdown-item-color-active: var(--dropdown-menu-item-color-active);
+  --product-picker-dropdown-item-color-hover: var(--dropdown-menu-item-color-hover);
   --product-picker-dropdown-item-border-color-focused: var(--dropdown-menu-item-border-color-focused);
 
 `;

package/src/components/Search/Search.tsx

@@ -5,7 +5,7 @@ import { SearchTrigger } from '@redocly/theme/components/Search/SearchTrigger';
 import { SearchDialog } from '@redocly/theme/components/Search/SearchDialog';
 import { useSearch } from '@redocly/theme/core/hooks';
 
-type SearchProps = {
+export type SearchProps = {
   className?: string;
 };
 

package/src/components/Search/SearchDialog.tsx

@@ -15,7 +15,7 @@ import { useThemeHooks, useDialogHotKeys } from '@redocly/theme/core/hooks';
 import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { CloseIcon } from '@redocly/theme/icons/CloseIcon/CloseIcon';
 
-type SearchDialogProps = {
+export type SearchDialogProps = {
   onClose: () => void;
   className?: string;
 };

package/src/components/Search/SearchInput.tsx

@@ -9,7 +9,7 @@ import { CloseIcon } from '@redocly/theme/icons/CloseIcon/CloseIcon';
 import { Button } from '@redocly/theme/components/Button/Button';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 
-type SearchInputProps = {
+export type SearchInputProps = {
   placeholder?: string;
   value: string;
   onChange(value: string): void;

package/src/components/Search/SearchItem.tsx

@@ -9,7 +9,7 @@ import { Image } from '@redocly/theme/components/Image/Image';
 import { highlight } from '@redocly/theme/components/Search/SearchHighlight';
 
 type ActiveItem<T> = T & { active?: boolean };
-type SearchItemProps = {
+export type SearchItemProps = {
   item: ActiveItem<SearchDocument>;
   product?: {
     name: string;

package/src/components/Search/SearchRecent.tsx

@@ -7,7 +7,7 @@ import { CloseIcon } from '@redocly/theme/icons/CloseIcon/CloseIcon';
 import { RecentlyViewedIcon } from '@redocly/theme/icons/RecentlyViewedIcon/RecentlyViewedIcon';
 import { Button } from '@redocly/theme/components/Button/Button';
 
-type SearchRecentProps = {
+export type SearchRecentProps = {
   onSelect: (value: string) => void;
   className?: string;
 };

package/src/components/Search/SearchShortcut.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-type SearchShortcutProps = {
+export type SearchShortcutProps = {
   combination: string;
   text: string;
   className?: string;

package/src/components/Search/SearchSuggestedPages.tsx

@@ -5,7 +5,7 @@ import { useThemeHooks, useSuggestedPages } from '@redocly/theme/core/hooks';
 import { RecentlyViewedIcon } from '@redocly/theme/icons/RecentlyViewedIcon/RecentlyViewedIcon';
 import { Link } from '@redocly/theme/components/Link/Link';
 
-type SearchSuggestedPagesProps = {
+export type SearchSuggestedPagesProps = {
   className?: string;
 };
 

package/src/components/Search/SearchTrigger.tsx

@@ -6,7 +6,7 @@ import { Button } from '@redocly/theme/components/Button/Button';
 import { SearchIcon } from '@redocly/theme/icons/SearchIcon/SearchIcon';
 import { breakpoints } from '@redocly/theme/core/utils';
 
-type SearchTriggerProps = {
+export type SearchTriggerProps = {
   onClick: () => void;
   className?: string;
 };

package/src/components/Search/variables.ts

@@ -49,7 +49,7 @@ export const search = css`
   --search-recent-item-line-height: var(--line-height-base); // @presenter LineHeight
   --search-recent-item-padding: var(--spacing-xs) var(--spacing-lg);
   --search-recent-item-text-color: var(--search-item-text-color); // @presenter Color
-  --search-recent-item-text-color-hover: var(--search-item-text-color-active); // @presenter Color
+  --search-recent-item-text-color-hover: var(--search-item-text-color-hover); // @presenter Color
   --search-recent-item-bg-color-hover: var(--search-item-bg-color-hover); // @presenter Color
   --search-recent-item-title-font-size: var(--font-size-base); // @presenter FontSize
   --search-recent-item-title-font-weight: var(--font-weight-semibold); // @presenter FontWeight
@@ -64,7 +64,7 @@ export const search = css`
   --search-suggested-item-line-height: var(--line-height-base); // @presenter LineHeight
   --search-suggested-item-padding: var(--spacing-xs) var(--spacing-lg);
   --search-suggested-item-text-color: var(--search-item-text-color); // @presenter Color
-  --search-suggested-item-text-color-hover: var(--search-item-text-color-active); // @presenter Color
+  --search-suggested-item-text-color-hover: var(--search-item-text-color-hover); // @presenter Color
   --search-suggested-item-bg-color-hover: var(--search-item-bg-color-hover); // @presenter Color
   --search-suggested-item-title-font-size: var(--font-size-base); // @presenter FontSize
   --search-suggested-item-title-font-weight: var(--font-weight-semibold); // @presenter FontWeight

package/src/components/Segmented/Segmented.tsx

@@ -6,7 +6,7 @@ import type { SelectOption } from '@redocly/theme/core/types/select-option';
 
 import { typedMemo } from '@redocly/theme/core/hoc/typedMemo';
 
-type SegmentedProps<T> = {
+export type SegmentedProps<T> = {
   options: SelectOption<T>[];
   value: T;
   onChange: ({ label, value }: { label: string; value: T }) => void;