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

package/src/components/CodeBlock/CodeBlockControls.tsx

@@ -164,6 +164,8 @@ export function CodeBlockControls({
 const ContainerWrapper = styled.div`
   display: grid;
   justify-content: end;
+  font-size: var(--code-block-controls-font-size);
+  font-family: var(--code-block-controls-font-family);
   background-color: var(--code-block-controls-bg-color);
   padding: var(--code-block-controls-padding);
   border-bottom: var(--code-block-controls-border);

package/src/components/CodeBlock/CodeBlockTabs.tsx

@@ -9,7 +9,7 @@ import { DocumentBlankIcon } from '@redocly/theme/icons/DocumentBlankIcon/Docume
 import { ChevronLeftIcon } from '@redocly/theme/icons/ChevronLeftIcon/ChevronLeftIcon';
 import { ChevronRightIcon } from '@redocly/theme/icons/ChevronRightIcon/ChevronRightIcon';
 
-type CodeBlockTabsProps = {
+export type CodeBlockTabsProps = {
   tabs: FileTabs;
 };
 

package/src/components/CodeBlock/variables.ts

@@ -47,8 +47,8 @@ export const code = css`
   --code-block-controls-font-weight: var(--font-weight-medium); // @presenter Color
   --code-block-controls-bg-color: transparent; // @presenter Color
   --code-block-controls-border: 1px solid var(--border-color-secondary); // @presenter Border
-  --code-block-icon-controls-background-color: var(--code-block-controls-background-color);
-  --code-block-text-controls-background-color: var(--code-block-controls-background-color);
+  --code-block-icon-controls-bg-color: var(--code-block-controls-bg-color);
+  --code-block-text-controls-bg-color: var(--code-block-controls-bg-color);
   --code-block-controls-padding: var(--spacing-unit) var(--spacing-unit) var(--spacing-unit) var(--spacing-base);
   --code-block-controls-height: 20px;
   --code-block-controls-width: 20px;

package/src/components/ColorModeSwitcher/ColorModeIcon.tsx

@@ -5,9 +5,15 @@ import { ContrastIcon } from '@redocly/theme/icons/ContrastIcon/ContrastIcon';
 import { MoonIcon } from '@redocly/theme/icons/MoonIcon/MoonIcon';
 import { SunIcon } from '@redocly/theme/icons/SunIcon/SunIcon';
 
-export interface ColorModeIconProps {
+export type ColorModeIconProps = {
   mode?: 'dark' | 'light' | string;
   className?: string;
+};
+
+export function ColorModeIcon(props: ColorModeIconProps): JSX.Element {
+  return (
+    <ColorModeIconComponent {...props} data-component-name="ColorModeSwitcher/ColorModeIcon" />
+  );
 }
 
 function Icon({ mode, className }: ColorModeIconProps) {
@@ -21,8 +27,6 @@ function Icon({ mode, className }: ColorModeIconProps) {
   }
 }
 
-export const ColorModeIcon = styled(Icon).attrs(() => ({
-  'data-component-name': 'ColorModeSwitcher/ColorModeIcon',
-}))`
+const ColorModeIconComponent = styled(Icon)`
   box-sizing: border-box;
 `;

package/src/components/ColorModeSwitcher/ColorModeSwitcher.tsx

@@ -4,7 +4,7 @@ import { useMount, useColorSwitcher } from '@redocly/theme/core/hooks';
 import { ColorModeIcon } from '@redocly/theme/components/ColorModeSwitcher/ColorModeIcon';
 import { Button } from '@redocly/theme/components/Button/Button';
 
-type ColorModeSwitcherProps = {
+export type ColorModeSwitcherProps = {
   className?: string;
 };
 

package/src/components/DatePicker/DatePicker.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 import styled from 'styled-components';
 import { DatePicker as DatePickerComponent } from 'react-date-picker';
 
-type Props = React.ComponentProps<typeof DatePickerComponent>;
+export type DatePickerProps = React.ComponentProps<typeof DatePickerComponent>;
 
-export const DatePicker = (props: Props) => {
+export const DatePicker = (props: DatePickerProps) => {
   return (
     <DatePickerWrapper data-component-name="DatePicker/DatePicker">
       <DatePickerComponent {...props} />

package/src/components/Dropdown/Dropdown.tsx

@@ -7,7 +7,7 @@ import { useOutsideClick, useControlledState } from '@redocly/theme/core/hooks';
 import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
 import { ChevronUpIcon } from '@redocly/theme/icons/ChevronUpIcon/ChevronUpIcon';
 
-type DropdownProps = PropsWithChildren<{
+export type DropdownProps = PropsWithChildren<{
   trigger: React.ReactNode;
   triggerEvent?: 'click' | 'hover';
   placement?: 'top' | 'bottom';
@@ -32,7 +32,7 @@ export function Dropdown({
   dataAttributes,
   placement,
   alignment,
-}: DropdownProps) {
+}: DropdownProps): JSX.Element {
   const dropdownRef = useRef<HTMLDivElement | null>(null);
   const [isOpen, setIsOpen] = useControlledState<boolean>(false, active);
 

package/src/components/Dropdown/DropdownMenu.tsx

@@ -14,7 +14,7 @@ export type DropdownMenuProps =
       | { children?: ReactNode }
     );
 
-export function DropdownMenu(props: DropdownMenuProps) {
+export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
   let content: React.ReactNode = null;
 
   if ('children' in props) {

package/src/components/Dropdown/DropdownMenuItem.tsx

@@ -42,7 +42,7 @@ export function DropdownMenuItem({
   style,
   role = 'menuitem',
   ...otherProps
-}: PropsWithChildren<DropdownMenuItemProps>) {
+}: PropsWithChildren<DropdownMenuItemProps>): JSX.Element {
   const handleClick = () => {
     onAction?.();
   };

package/src/components/Feedback/Comment.tsx

@@ -13,6 +13,7 @@ export type CommentProps = {
     submitText?: string;
   };
   standAlone?: boolean;
+  isDialog?: boolean;
   className?: string;
 };
 
@@ -22,6 +23,7 @@ export function Comment({
   onCancel,
   className,
   standAlone = true,
+  isDialog = false,
 }: CommentProps): JSX.Element {
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
@@ -93,7 +95,7 @@ export function Comment({
           <Button
             data-translation-key="theme.feedback.settings.comment.send"
             onClick={send}
-            variant="secondary"
+            variant={isDialog ? 'primary' : 'secondary'}
             size="small"
           >
             {translate('theme.feedback.settings.comment.send', 'Send')}
@@ -121,7 +123,7 @@ const CommentWrapper = styled.div`
   flex-direction: column;
   justify-content: space-between;
   border-radius: var(--border-radius-lg);
-  background: var(--feedback-background-color);
+  background: var(--feedback-bg-color);
   gap: var(--spacing-xxs);
 
   max-width: var(--feedback-report-dialog-max-width);

package/src/components/Feedback/ReportDialog.tsx

@@ -49,6 +49,7 @@ export function ReportDialog({
             telemetry.send('code_snippet_reported', {});
             onSubmit();
           }}
+          isDialog={true}
           onCancel={onCancel}
         />
       </ReportDialogWrapper>

package/src/components/Filter/FilterContent.tsx

@@ -9,7 +9,7 @@ import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { Button } from '@redocly/theme/components/Button/Button';
 import { Filter } from '@redocly/theme/components/Filter/Filter';
 
-type FilterContentProps = {
+export type FilterContentProps = {
   setFilterTerm: (value: string) => void;
   filters: ResolvedFilter[];
   filterTerm: string;
@@ -85,7 +85,7 @@ const FiltersTitle = styled.div`
   line-height: var(--filter-content-title-line-height);
 `;
 
-export const FilterItems = styled.div`
+const FilterItems = styled.div`
   padding: var(--filter-content-items-padding);
   height: 100%;
   display: flex;

package/src/components/Filter/FilterInput.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { SearchIcon } from '@redocly/theme/icons/SearchIcon/SearchIcon';
 
-type FilterInputProps = {
+export type FilterInputProps = {
   value: string;
   onChange: (newValue: string) => void;
 };

package/src/components/Filter/FilterOption.tsx

@@ -1,9 +1,24 @@
+import React, { type PropsWithChildren } from 'react';
 import styled from 'styled-components';
 
-export const FilterOption = styled.label.attrs({
-  'data-testid': 'Filter/FilterOption',
-  'data-component-name': 'Filter/FilterOption',
-})`
+export type FilterOptionProps = PropsWithChildren<{
+  role?: string;
+  key?: string;
+  onClick?: () => void;
+  className?: string;
+}>;
+
+export function FilterOption(props: FilterOptionProps): JSX.Element {
+  return (
+    <FilterOptionComponent
+      {...props}
+      data-component-name="Filter/FilterOption"
+      data-testid="Filter/FilterOption"
+    />
+  );
+}
+
+const FilterOptionComponent = styled.label`
   display: flex;
   gap: var(--filter-option-gap);
   align-items: center;
@@ -13,4 +28,5 @@ export const FilterOption = styled.label.attrs({
   input {
     cursor: pointer;
   }
+  margin: var(--filter-option-margin);
 `;

package/src/components/Filter/FilterOptionLabel.tsx

@@ -1,8 +1,15 @@
+import React, { type PropsWithChildren } from 'react';
 import styled from 'styled-components';
 
-export const FilterOptionLabel = styled.label.attrs({
-  'data-component-name': 'Filter/FilterOptionLabel',
-})`
+export type FilterOptionLabelProps = PropsWithChildren<{
+  className?: string;
+}>;
+
+export function FilterOptionLabel(props: FilterOptionLabelProps): JSX.Element {
+  return <FilterOptionLabelComponent {...props} data-component-name="Filter/FilterOptionLabel" />;
+}
+
+const FilterOptionLabelComponent = styled.label`
   cursor: pointer;
   font-size: var(--filter-option-label-font-size);
   color: var(--filter-option-label-color);

package/src/components/Filter/FilterOptions.tsx

@@ -1,8 +1,15 @@
+import React, { type PropsWithChildren } from 'react';
 import styled from 'styled-components';
 
-export const FilterOptions = styled.div.attrs({
-  'data-component-name': 'Filter/FilterOptions',
-})`
+export type FilterOptionsProps = PropsWithChildren<{
+  className?: string;
+}>;
+
+export function FilterOptions(props: FilterOptionsProps): JSX.Element {
+  return <FilterOptionsComponent {...props} data-component-name="Filter/FilterOptions" />;
+}
+
+const FilterOptionsComponent = styled.div`
   padding: var(--filter-options-padding-vertical) var(--filter-options-padding-horizontal);
   display: flex;
   flex-direction: column;

package/src/components/Filter/FilterPopover.tsx

@@ -8,7 +8,7 @@ import { breakpoints } from '@redocly/theme/core/utils';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { FilterContent } from '@redocly/theme/components/Filter/FilterContent';
 
-type FilterPopoverProps = {
+export type FilterPopoverProps = {
   onClose: () => void;
   filters: ResolvedFilter[];
   filterValuesCasing?: NonNullable<ThemeConfig['catalog']>[string]['filterValuesCasing'];

package/src/components/Filter/FilterSelect.tsx

@@ -76,8 +76,5 @@ const StyledSelect = styled(Select)`
   :hover {
     border-color: var(--filter-select-border-color-hover);
   }
-
-  ${FilterOption} {
-    margin: var(--filter-select-option-margin);
-  }
+  --filter-option-margin: var(--filter-select-option-margin);
 `;

package/src/components/Filter/FilterTitle.tsx

@@ -1,8 +1,15 @@
+import React, { type PropsWithChildren } from 'react';
 import styled from 'styled-components';
 
-export const FilterTitle = styled.div.attrs({
-  'data-component-name': 'Filter/FilterTitle',
-})`
+export type FilterTitleProps = PropsWithChildren<{
+  className?: string;
+}>;
+
+export function FilterTitle(props: FilterTitleProps): JSX.Element {
+  return <FilterTitleComponent {...props} data-component-name="Filter/FilterTitle" />;
+}
+
+const FilterTitleComponent = styled.div`
   font-weight: var(--filter-title-font-weight);
   font-size: var(--filter-title-font-size);
   line-height: var(--filter-title-line-height);

package/src/components/Filter/variables.ts

@@ -17,7 +17,8 @@ export const filter = css`
   --filter-options-gap: var(--spacing-sm);
 
   --filter-option-font-size: var(--font-size-base);
-  --filter-option-gap: var(--spacing-xs);)
+  --filter-option-gap: var(--spacing-xs);
+  --filter-option-margin: 0;
 
   --filter-option-label-font-size: var(--font-size-base);
   --filter-option-label-color: var(--text-color-secondary);

package/src/components/Footer/Footer.tsx

@@ -10,7 +10,7 @@ import { FooterCopyright } from '@redocly/theme/components/Footer/FooterCopyrigh
 import { FooterLogo } from '@redocly/theme/components/Footer/FooterLogo';
 import { FooterColumn } from '@redocly/theme/components/Footer/FooterColumn';
 
-type FooterProps = {
+export type FooterProps = {
   className?: string;
 };
 

package/src/components/Footer/FooterColumn.tsx

@@ -8,7 +8,7 @@ import { breakpoints } from '@redocly/theme/core/utils';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { Link } from '@redocly/theme/components/Link/Link';
 
-type FooterColumnProps = {
+export type FooterColumnProps = {
   column: ResolvedNavItem;
   className?: string;
 };

package/src/components/Footer/FooterCopyright.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { LanguagePicker } from '@redocly/theme/components/LanguagePicker/LanguagePicker';
 
-type FooterCopyrightProps = {
+export type FooterCopyrightProps = {
   copyrightText: string;
   className?: string;
 };

package/src/components/Footer/FooterItem.tsx

@@ -9,7 +9,7 @@ import { Link } from '@redocly/theme/components/Link/Link';
 import { Image } from '@redocly/theme/components/Image/Image';
 import { breakpoints } from '@redocly/theme/core/utils';
 
-type FooterItemProps = {
+export type FooterItemProps = {
   item: ResolvedNavItem;
   iconsOnly?: boolean;
 };

package/src/components/Footer/FooterLogo.tsx

@@ -1,8 +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 FooterLogo = styled(Logo).attrs({ 'data-component-name': 'Footer/FooterLogo' })`
+export function FooterLogo(props: LogoProps) {
+  return <FooterLogoComponent {...props} data-component-name="Footer/FooterLogo" />;
+}
+
+const FooterLogoComponent = styled(Logo)<LogoProps>`
   --logo-height: var(--footer-logo-height);
   --logo-width: var(--footer-logo-width);
   --logo-max-width: var(--footer-logo-max-width);

package/src/components/Image/Image.tsx

@@ -10,7 +10,7 @@ export type ImageProps = {
   className?: string;
 };
 
-export function Image(props: ImageProps) {
+export function Image(props: ImageProps): JSX.Element {
   const { src, srcSet, alt, className } = props;
 
   const parsedSourceSetMap = React.useMemo(() => {

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';

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);
       }
     `}
 

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 }>`