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

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

@@ -1,7 +1,6 @@
 /// <reference types="react" />
-type SearchRecentProps = {
+export type SearchRecentProps = {
     onSelect: (value: string) => void;
     className?: string;
 };
 export declare function SearchRecent({ onSelect, className }: SearchRecentProps): JSX.Element | null;
-export {};

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

@@ -1,8 +1,7 @@
 /// <reference types="react" />
-type SearchShortcutProps = {
+export type SearchShortcutProps = {
     combination: string;
     text: string;
     className?: string;
 };
 export declare function SearchShortcut({ combination, text, className }: SearchShortcutProps): JSX.Element;
-export {};

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

@@ -1,6 +1,5 @@
 /// <reference types="react" />
-type SearchSuggestedPagesProps = {
+export type SearchSuggestedPagesProps = {
     className?: string;
 };
 export declare function SearchSuggestedPages({ className }: SearchSuggestedPagesProps): JSX.Element | null;
-export {};

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

@@ -1,7 +1,6 @@
 /// <reference types="react" />
-type SearchTriggerProps = {
+export type SearchTriggerProps = {
     onClick: () => void;
     className?: string;
 };
 export declare function SearchTrigger({ onClick, className }: SearchTriggerProps): JSX.Element;
-export {};

package/lib/components/Search/variables.js

@@ -51,7 +51,7 @@ exports.search = (0, styled_components_1.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
@@ -66,7 +66,7 @@ exports.search = (0, styled_components_1.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/lib/components/Segmented/Segmented.d.ts

@@ -1,6 +1,6 @@
 import type { ReactElement } from 'react';
 import type { SelectOption } from '../../core/types/select-option';
-type SegmentedProps<T> = {
+export type SegmentedProps<T> = {
     options: SelectOption<T>[];
     value: T;
     onChange: ({ label, value }: {

package/lib/components/Select/Select.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export interface SelectProps<T = any> {
+export type SelectProps<T = any> = {
     value: T;
     options: {
         element: React.ReactNode | JSX.Element | string;
@@ -20,8 +20,8 @@ export interface SelectProps<T = any> {
     renderInput?: (props: {
         isOpen: boolean;
     }) => React.ReactElement;
-}
-export declare function Select<T>(props: SelectProps<T>): React.JSX.Element;
+};
+export declare function Select<T>(props: SelectProps<T>): JSX.Element;
 export declare const SelectContainer: import("styled-components").StyledComponent<"div", any, {
     disabled?: boolean | undefined;
 }, never>;

package/lib/components/Sidebar/Sidebar.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { MenuItemsAnimation } from '../../core/types';
-type SidebarProps = {
+export type SidebarProps = {
     versions?: React.ReactNode;
     menu?: React.ReactNode;
     backLink?: {
@@ -17,4 +17,3 @@ type SidebarProps = {
     menuItemsAnimation?: MenuItemsAnimation;
 };
 export declare function Sidebar({ versions, menu, footer, header, growContent, collapsed, className, menuItemsAnimation, }: SidebarProps): JSX.Element | null;
-export {};

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

@@ -1,9 +1,8 @@
 /// <reference types="react" />
 import { LayoutVariant } from '../../components/SidebarActions/SidebarActions';
-interface ChangeViewButtonProps {
+export type ChangeViewButtonProps = {
     layout: LayoutVariant;
     collapsedSidebar: boolean;
     onClick: () => void;
-}
+};
 export declare const ChangeViewButton: ({ layout, onClick, collapsedSidebar, }: ChangeViewButtonProps) => JSX.Element | null;
-export {};

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { LayoutVariant } from '@redocly/config';
 export { LayoutVariant };
-interface SidebarActionsProps {
+export type SidebarActionsProps = {
     layout: LayoutVariant;
     collapsedSidebar: boolean;
     isOpenapiDocs: boolean;
@@ -10,5 +10,5 @@ interface SidebarActionsProps {
     onChangeCollapseSidebarClick: () => void;
     requestAccessButton?: React.ReactElement | null;
     className?: string;
-}
+};
 export declare const SidebarActions: ({ layout, hideCollapseSidebarButton, collapsedSidebar, isOpenapiDocs, onChangeViewClick, onChangeCollapseSidebarClick, requestAccessButton, className, }: SidebarActionsProps) => React.JSX.Element;

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

@@ -1,10 +1,10 @@
 /// <reference types="react" />
-export interface LogoProps {
+export type SidebarLogoProps = {
     imageUrl?: string;
     href?: string;
     altText?: string;
     dataTestId?: string;
     backgroundColor?: string;
     className?: string;
-}
-export declare function SidebarLogo({ imageUrl, href, altText, backgroundColor, dataTestId, className, }?: LogoProps): JSX.Element | null;
+};
+export declare function SidebarLogo({ imageUrl, href, altText, backgroundColor, dataTestId, className, }?: SidebarLogoProps): JSX.Element | null;

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

@@ -1,9 +1,8 @@
 /// <reference types="react" />
 import type { MdHeading } from '../../core/types';
-type TableOfContentProps = {
+export type TableOfContentProps = {
     headings?: Array<MdHeading | null> | null | undefined;
     contentWrapper: HTMLDivElement | null;
     className?: string;
 };
 export declare function TableOfContent(props: TableOfContentProps): JSX.Element | null;
-export {};

package/lib/components/Tag/Tag.d.ts

@@ -5,7 +5,7 @@ type SubjectStatusColor = 'active' | 'draft' | 'deprecated' | 'product';
 type HttpColor = 'get' | 'post' | 'put' | 'delete' | 'option' | 'patch' | 'head' | 'hook' | 'link';
 type StatusColor = DefaultStatusColor | ActionStatusColor | SubjectStatusColor | HttpColor;
 type Color = 'red' | 'green' | 'blue' | 'grey' | 'gold' | 'cyan' | 'magenta' | 'purple' | 'lime' | 'geekblue' | 'yellow';
-type TagProps = {
+export type TagProps = {
     className?: string;
     children?: React.ReactNode;
     closable?: boolean;

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

@@ -1,9 +1,8 @@
 /// <reference types="react" />
-type UserAvatarProps = {
+export type UserAvatarProps = {
     picture?: string;
     className?: string;
     height?: `var(${string})` | `${number}px`;
     width?: `var(${string})` | `${number}px`;
 };
 export declare function UserAvatar({ picture, className, height, width, }: UserAvatarProps): JSX.Element;
-export {};

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

@@ -1,9 +1,8 @@
 /// <reference types="react" />
-type UserInfoMenuItemProps = {
+export type UserInfoMenuItemProps = {
     name: string;
     email?: string;
     picture?: string;
     className?: string;
 };
 export declare function UserInfoMenuItem({ name, picture, email, className, }: UserInfoMenuItemProps): JSX.Element;
-export {};

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

@@ -1,6 +1,5 @@
 import React from 'react';
-type UserMenuProps = {
+export type UserMenuProps = {
     className?: string;
 };
 export declare function UserMenu({ className }: UserMenuProps): React.JSX.Element | null;
-export {};

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

@@ -1,6 +1,5 @@
 /// <reference types="react" />
-type UserMenuMobileProps = {
+export type UserMenuMobileProps = {
     className?: string;
 };
 export declare function UserMenuMobile({ className }: UserMenuMobileProps): JSX.Element | null;
-export {};

package/lib/components/VersionPicker/VersionPicker.d.ts

@@ -7,4 +7,4 @@ export declare function VersionPicker(props: {
     versions?: Version[];
     onChange: (v: Version) => void;
 }): React.JSX.Element | null;
-export declare const VersionPickerSelect: import("styled-components").StyledComponent<typeof Select, any, SelectProps<any>, never>;
+export declare const VersionPickerSelect: import("styled-components").StyledComponent<typeof Select, any, SelectProps, never>;

package/lib/layouts/DocumentationLayout.js

@@ -35,6 +35,13 @@ const LayoutWrapper = styled_components_1.default.div.attrs(({ className }) => (
   width: 100%;
 `;
 const ContentWrapper = styled_components_1.default.section `
+  --md-content-font-size: var(--font-size-lg);
+  --md-content-line-height: var(--line-height-lg);
+  --md-table-font-size: var(--md-content-font-size);
+  --md-table-line-height: var(--md-content-line-height);
+  --md-tabs-content-font-size: var(--md-content-font-size);
+  --md-tabs-content-line-height: var(--md-content-line-height);
+
   max-width: var(--md-content-max-width);
   width: 90%;
   margin: 0 auto;

package/lib/layouts/NotFound.js

@@ -12,14 +12,14 @@ const ArrowLeftIcon_1 = require("../icons/ArrowLeftIcon/ArrowLeftIcon");
 function NotFound() {
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
-    return (react_1.default.createElement(Wrapper, { "data-component-name": "Pages/NotFound" },
+    return (react_1.default.createElement(NotFoundWrapper, { "data-component-name": "Pages/NotFound" },
         react_1.default.createElement(StatusText, null, "404"),
         react_1.default.createElement(Title, { "data-translation-key": "theme.page.notFound.title" }, translate('theme.page.notFound.title', 'Something went missing...')),
         react_1.default.createElement(Description, { "data-translation-key": "theme.page.notFound.description" }, translate('theme.page.notFound.description', "The page you were trying to reach doesn't exist or may have been moved. You can go back to the previous page, return to the homepage, or use the search bar to find what you're looking for.")),
         react_1.default.createElement(Button_1.Button, { variant: "primary", size: "large", to: "/", "data-translation-key": "theme.page.homeButton", icon: react_1.default.createElement(ArrowLeftIcon_1.ArrowLeftIcon, null) }, translate('theme.page.homeButton', 'Go home'))));
 }
 exports.NotFound = NotFound;
-const Wrapper = styled_components_1.default.div `
+const NotFoundWrapper = styled_components_1.default.div `
   height: 100%;
   max-width: var(--page-404-max-width);
   display: flex;

package/lib/layouts/RootLayout.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-interface LayoutConfig {
+export type LayoutConfig = {
     children: React.ReactNode;
-}
+};
 export declare function RootLayout({ children }: LayoutConfig): JSX.Element;
-export {};

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
-export declare function InlineSvg({ fileRawContent }: {
+export declare function InlineSvg({ fileRawContent, className, }: {
     fileRawContent: string;
+    className?: string;
 }): React.JSX.Element;

package/lib/markdoc/components/InlineSvg/InlineSvg.js

@@ -25,8 +25,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InlineSvg = void 0;
 const React = __importStar(require("react"));
-function InlineSvg({ fileRawContent }) {
-    return (React.createElement("span", { "data-component-name": "Markdoc/InlineSvg/InlineSvg", dangerouslySetInnerHTML: { __html: fileRawContent } }));
+function InlineSvg({ fileRawContent, className, }) {
+    return (React.createElement("span", { className: className, "data-component-name": "Markdoc/InlineSvg/InlineSvg", dangerouslySetInnerHTML: { __html: fileRawContent } }));
 }
 exports.InlineSvg = InlineSvg;
 //# sourceMappingURL=InlineSvg.js.map

package/lib/markdoc/components/Tabs/variables.js

@@ -8,8 +8,8 @@ exports.markdownTabs = (0, styled_components_1.css) `
   */
 
   --md-tabs-container-text-color: inherit; // @presenter Color
-  --md-tabs-container-font-size: var(--font-size-base); // @presenter FontSize
-  --md-tabs-container-font-family: var(--font-size-base); // @presenter FontFamily
+  --md-tabs-container-font-size: var(--md-content-font-size); // @presenter FontSize
+  --md-tabs-container-font-family: var(--md-content-font-family); // @presenter FontFamily
   --md-tabs-container-font-style: normal; // @presenter FontStyle
   --md-tabs-container-font-weight: var(--font-weight-regular); // @presenter FontWeight
   --md-tabs-container-bg-color: inherit; // @presenter Color
@@ -22,8 +22,8 @@ exports.markdownTabs = (0, styled_components_1.css) `
   --md-tabs-padding: 0; // @presenter Spacing
 
   --md-tabs-content-text-color: inherit; // @presenter Color
-  --md-tabs-content-font-size: var(--font-size-base); // @presenter FontSize
-  --md-tabs-content-font-family: var(--font-size-base); // @presenter FontFamily
+  --md-tabs-content-font-size: var(--md-content-font-size); // @presenter FontSize
+  --md-tabs-content-font-family: var(--md-content-font-family); // @presenter FontFamily
   --md-tabs-content-font-style: normal; // @presenter FontStyle
   --md-tabs-content-font-weight: var(--font-weight-regular); // @presenter FontWeight
   --md-tabs-content-bg-color: inherit; // @presenter Color
@@ -33,7 +33,7 @@ exports.markdownTabs = (0, styled_components_1.css) `
 
   --md-tabs-tab-text-color: var(--text-color-primary); // @presenter Color
   --md-tabs-tab-font-size: var(--font-size-lg); // @presenter FontSize
-  --md-tabs-tab-font-family: var(--font-size-base); // @presenter FontFamily
+  --md-tabs-tab-font-family: var(--md-content-font-family); // @presenter FontFamily
   --md-tabs-tab-font-style: normal; // @presenter FontStyle
   --md-tabs-tab-font-weight: var(--font-weight-bold); // @presenter FontWeight
   --md-tabs-tab-bg-color: none; // @presenter Color

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.82.2-rc.3",
+  "version": "0.82.4-rc.1",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -72,7 +72,7 @@
     "json-schema-to-ts": "2.7.2",
     "lodash.throttle": "4.1.1",
     "npm-run-all2": "5.0.2",
-    "react-refresh": "0.14.0",
+    "react-refresh": "0.14.2",
     "react-router-dom": "6.21.1",
     "rimraf": "5.0.5",
     "storybook": "7.6.4",
@@ -87,7 +87,7 @@
     "tsconfig-paths": "4.2.0",
     "tsconfig-paths-webpack-plugin": "3.5.2",
     "typescript": "5.2.2",
-    "webpack": "5.88.2"
+    "webpack": "5.91.0"
   },
   "dependencies": {
     "copy-to-clipboard": "^3.3.3",
@@ -98,7 +98,7 @@
     "timeago.js": "^4.0.2",
     "i18next": "^22.4.12",
     "nprogress": "^0.2.0",
-    "@redocly/config": "0.82.2-rc.3"
+    "@redocly/config": "0.82.4-rc.1"
   },
   "scripts": {
     "start": "npm-run-all --parallel storybook storybook:tokens:watch",

package/src/components/Badge/Badge.tsx

@@ -1,8 +1,18 @@
+import React, { type PropsWithChildren } from 'react';
 import styled, { css } from 'styled-components';
 
-export const Badge = styled.span.attrs({
-  'data-component-name': 'Badge/Badge',
-})<{ deprecated?: boolean }>`
+export type BadgeProps = PropsWithChildren<{
+  deprecated?: boolean;
+  color?: string;
+  key?: string;
+  className?: string;
+}>;
+
+export function Badge(props: BadgeProps): JSX.Element {
+  return <BadgeComponent {...props} data-component-name="Badge/Badge" />;
+}
+
+const BadgeComponent = styled.span<BadgeProps>`
   display: inline-block;
   padding: 0 var(--spacing-xs);
   vertical-align: middle;

package/src/components/Breadcrumbs/Breadcrumb.tsx

@@ -10,7 +10,7 @@ type BreadcrumbProps = {
   onClick?: () => void;
 };
 
-export const Breadcrumb = ({ label, link, isActive, onClick }: BreadcrumbProps): JSX.Element => {
+export function Breadcrumb({ label, link, isActive, onClick }: BreadcrumbProps): JSX.Element {
   return (
     <BreadcrumbWrapper
       data-component-name="Breadcrumbs/Breadcrumb"
@@ -25,7 +25,7 @@ export const Breadcrumb = ({ label, link, isActive, onClick }: BreadcrumbProps):
       )}
     </BreadcrumbWrapper>
   );
-};
+}
 
 const BreadcrumbText = styled.div`
   cursor: default;

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { Breadcrumb } from '@redocly/theme/components/Breadcrumbs/Breadcrumb';
 
-export const Breadcrumbs = (props: { className?: string }) => {
+export function Breadcrumbs(props: { className?: string }): JSX.Element | null {
   const { useBreadcrumbs, useTelemetry } = useThemeHooks();
   const telemetry = useTelemetry();
   const breadcrumbs = useBreadcrumbs();
@@ -37,7 +37,7 @@ export const Breadcrumbs = (props: { className?: string }) => {
       })}
     </BreadcrumbsWrapper>
   );
-};
+}
 
 const BreadcrumbsWrapper = styled.div`
   display: flex;

package/src/components/Buttons/CopyButton.tsx

@@ -9,7 +9,7 @@ import { Button } from '@redocly/theme/components/Button/Button';
 import { CopyIcon } from '@redocly/theme/icons/CopyIcon/CopyIcon';
 import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
 
-type CopyButtonProps = {
+export type CopyButtonProps = {
   data: unknown;
   type?: ControlItemType;
   toasterPlacement?: TooltipProps['placement'];
@@ -19,9 +19,10 @@ type CopyButtonProps = {
   onCopyClick?: (e: React.MouseEvent<HTMLElement>) => void;
   dataTestId?: string;
   className?: string;
+  variant?: string;
 };
 
-const CopyButtonComponent = ({
+function CopyButtonComponent({
   data,
   type = 'icon',
   toasterPlacement = 'top',
@@ -31,7 +32,8 @@ const CopyButtonComponent = ({
   onCopyClick,
   dataTestId = 'copy-button',
   className,
-}: CopyButtonProps): JSX.Element => {
+  variant = 'text',
+}: CopyButtonProps): JSX.Element {
   const { useTranslate } = useThemeHooks();
   const tooltip = useControl();
   const { translate } = useTranslate();
@@ -64,12 +66,12 @@ const CopyButtonComponent = ({
         data-testid={dataTestId}
         icon={type === 'icon' ? <CopyIcon /> : undefined}
         size="small"
-        variant="text"
+        variant={variant}
       >
         {type !== 'icon' && translate('theme.codeSnippet.copy.toasterText', buttonText || 'Copy')}
       </Button>
     </Tooltip>
   );
-};
+}
 
 export const CopyButton = memo<CopyButtonProps>(CopyButtonComponent);

package/src/components/Buttons/EditPageButton.tsx

@@ -5,11 +5,11 @@ import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { EditIcon } from '@redocly/theme/icons/EditIcon/EditIcon';
 import { Link } from '@redocly/theme/components/Link/Link';
 
-type EditPageButtonProps = {
+export type EditPageButtonProps = {
   to: string;
 };
 
-export const EditPageButton = ({ to }: EditPageButtonProps): JSX.Element => {
+export function EditPageButton({ to }: EditPageButtonProps): JSX.Element {
   const { useTranslate, useTelemetry } = useThemeHooks();
   const { translate } = useTranslate();
   const telemetry = useTelemetry();
@@ -26,7 +26,7 @@ export const EditPageButton = ({ to }: EditPageButtonProps): JSX.Element => {
       </ButtonText>
     </EditPageButtonWrapper>
   );
-};
+}
 
 const EditPageButtonWrapper = styled(Link)`
   height: fit-content;

package/src/components/Buttons/EmailButton.tsx

@@ -3,12 +3,12 @@ import React from 'react';
 import { Button } from '@redocly/theme/components/Button/Button';
 import { EmailIcon } from '@redocly/theme/icons/EmailIcon/EmailIcon';
 
-interface EmailButtonProps {
+export type EmailButtonProps = {
   data: string;
   dataTestId?: string;
-}
+};
 
-export const EmailButton = ({ data, dataTestId = 'email-button' }: EmailButtonProps) => {
+export function EmailButton({ data, dataTestId = 'email-button' }: EmailButtonProps): JSX.Element {
   const onClick = () => {
     window.location.href = `mailto:${data}`;
   };
@@ -25,4 +25,4 @@ export const EmailButton = ({ data, dataTestId = 'email-button' }: EmailButtonPr
       />
     </div>
   );
-};
+}

package/src/components/Buttons/NewTabButton.tsx

@@ -3,12 +3,15 @@ import React from 'react';
 import { Button } from '@redocly/theme/components/Button/Button';
 import { ArrowUpRightIcon } from '@redocly/theme/icons/ArrowUpRightIcon/ArrowUpRightIcon';
 
-interface NewTabButtonProps {
+export type NewTabButtonProps = {
   data: string;
   dataTestId?: string;
-}
+};
 
-export const NewTabButton = ({ data, dataTestId = 'new-tab-button' }: NewTabButtonProps) => {
+export function NewTabButton({
+  data,
+  dataTestId = 'new-tab-button',
+}: NewTabButtonProps): JSX.Element {
   const onClick = () => {
     window.open(data, '_blank');
   };
@@ -25,4 +28,4 @@ export const NewTabButton = ({ data, dataTestId = 'new-tab-button' }: NewTabButt
       />
     </div>
   );
-};
+}

package/src/components/Catalog/Catalog.tsx

@@ -12,15 +12,16 @@ import { FilterPopover } from '@redocly/theme/components/Filter/FilterPopover';
 import { HighlightContext } from '@redocly/theme/components/Catalog/CatalogHighlight';
 import { CatalogActions } from '@redocly/theme/components/Catalog/CatalogActions';
 import { Sidebar } from '@redocly/theme/components/Sidebar/Sidebar';
-import { MenuContainer } from '@redocly/theme/components/Menu/MenuContainer';
 import { CounterTag } from '@redocly/theme/components/Tags/CounterTag';
 
-export default function Catalog(props: {
+export type CatalogProps = {
   pageProps: {
     catalogId: string;
     catalogConfig: CatalogConfig;
   };
-}): JSX.Element {
+};
+
+export default function Catalog(props: CatalogProps): JSX.Element {
   const { catalogConfig } = props.pageProps;
   const { useTranslate, useCatalog } = useThemeHooks();
 
@@ -184,8 +185,5 @@ const FiltersSidebar = styled(Sidebar)`
   @media screen and (min-width: ${breakpoints.medium}) {
     display: flex;
   }
-
-  ${MenuContainer} {
-    padding: 0;
-  }
+  --menu-container-padding-top: 0;
 `;

package/src/components/Catalog/CatalogActions.tsx

@@ -9,7 +9,7 @@ import { Button } from '@redocly/theme/components/Button/Button';
 import { FilterIcon } from '@redocly/theme/icons/FilterIcon/FilterIcon';
 import { CounterTag } from '@redocly/theme/components/Tags/CounterTag';
 
-type CatalogActionsProps = {
+export type CatalogActionsProps = {
   onOpenFilter: () => void;
   filters: ResolvedFilter[];
   filterTerm: string;

package/src/components/Catalog/CatalogCard.tsx

@@ -11,7 +11,9 @@ import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { CatalogHighlight } from '@redocly/theme/components/Catalog/CatalogHighlight';
 import { Button } from '@redocly/theme/components/Button/Button';
 
-type CatalogCardProps = { item: CatalogItem };
+export type CatalogCardProps = {
+  item: CatalogItem;
+};
 
 export function CatalogCard({ item }: CatalogCardProps): JSX.Element {
   const { useTelemetry } = useThemeHooks();

package/src/components/Catalog/CatalogHighlight.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 
 export const HighlightContext = React.createContext<string[]>([]);
 
-type CatalogHighlightProps = React.PropsWithChildren;
+export type CatalogHighlightProps = React.PropsWithChildren;
 
 export function CatalogHighlight(props: CatalogHighlightProps): JSX.Element | null {
   const { children } = props;

package/src/components/Catalog/CatalogInfoBlock.tsx

@@ -6,7 +6,7 @@ import { getScorecardColorVariable } from '@redocly/theme/core/utils';
 import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { Link } from '@redocly/theme/components/Link/Link';
 
-type CatalogInfoBlockProps = {
+export type CatalogInfoBlockProps = {
   metadata?: {
     scorecardLevel?: string;
     scoreCardSlug?: string;

package/src/components/CodeBlock/CodeBlockContainer.tsx

@@ -1,15 +1,28 @@
+import React, { type PropsWithChildren } from 'react';
 import styled, { css } from 'styled-components';
 
 import { generateCodeBlockTokens } from '@redocly/theme/core/utils';
 
-export const CodeBlockContainer = styled.pre.attrs<{ className?: string }>(({ className }) => ({
-  'data-component-name': 'CodeBlock/CodeBlockContainer',
-  className,
-}))<{
-  maxHeight?: string;
+export type CodeBlockContainerProps = PropsWithChildren<{
   hideCodeColors?: boolean;
+  maxHeight?: string;
   wrapContents?: boolean;
-}>`
+  ref?: (instance: HTMLPreElement | null) => void;
+  className?: string;
+  dangerouslySetInnerHTML?: {
+    __html: string;
+  };
+  suppressHydrationWarning?: boolean;
+  tabIndex?: number;
+}>;
+
+export function CodeBlockContainer(props: CodeBlockContainerProps): JSX.Element {
+  return (
+    <CodeBlockContainerComponent {...props} data-component-name="CodeBlock/CodeBlockContainer" />
+  );
+}
+
+const CodeBlockContainerComponent = styled.pre<CodeBlockContainerProps>`
   && {
     overflow-x: auto;
     font-family: var(--code-block-font-family);