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

package/lib/components/Panel/Panel.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { PropsWithChildren, ReactNode } from 'react';
 import type { PanelHeaderProps } from '../../components/Panel/PanelHeader';
-type PanelProps = {
+export type PanelProps = {
     expanded?: boolean;
     isExpandable?: boolean;
     className?: string;
@@ -12,4 +12,3 @@ type PanelProps = {
     description?: React.ReactNode;
 };
 export declare function Panel({ expanded, isExpandable, renderChildrenHidden, header, footer, className, children, onToggle, description, }: PropsWithChildren<PanelProps>): JSX.Element;
-export {};

package/lib/components/Panel/PanelBody.d.ts

@@ -1,6 +1,5 @@
-interface PanelBodyProps {
+export type PanelBodyProps = {
     animate?: boolean;
     hidden?: boolean;
-}
+};
 export declare const PanelBody: import("styled-components").StyledComponent<"div", any, PanelBodyProps, never>;
-export {};

package/lib/components/Portal/Portal.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import type { PropsWithChildren } from 'react';
-type PortalProps = {
+export type PortalProps = {
     mountId?: string;
 };
-export declare const Portal: ({ children, mountId }: PropsWithChildren<PortalProps>) => React.JSX.Element;
-export {};
+export declare function Portal({ children, mountId, }: PropsWithChildren<PortalProps>): React.ReactPortal | JSX.Element;

package/lib/components/Portal/Portal.js

@@ -7,12 +7,12 @@ exports.Portal = void 0;
 const react_1 = __importDefault(require("react"));
 const react_dom_1 = require("react-dom");
 const utils_1 = require("../../core/utils");
-const Portal = ({ children, mountId = 'root' }) => {
+function Portal({ children, mountId = 'root', }) {
     const mount = utils_1.IS_BROWSER ? document.getElementById(mountId) || document.body : null;
     if (!mount) {
         return react_1.default.createElement(react_1.default.Fragment, null, children);
     }
     return (0, react_dom_1.createPortal)(children, mount);
-};
+}
 exports.Portal = Portal;
 //# sourceMappingURL=Portal.js.map

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

@@ -1,8 +1,7 @@
 /// <reference types="react" />
 import type { ProductConfig } from '../../config';
-type ProductProps = {
+export type ProductProps = {
     product: ProductConfig;
     className?: string;
 };
 export declare function Product({ product, className }: ProductProps): JSX.Element;
-export {};

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

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

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

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

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

@@ -1,5 +1,5 @@
 import React from 'react';
-type SearchInputProps = {
+export type SearchInputProps = {
     placeholder?: string;
     value: string;
     onChange(value: string): void;
@@ -8,4 +8,3 @@ type SearchInputProps = {
     className?: string;
 };
 export declare function SearchInput({ placeholder, value, onChange, isLoading, className, }: SearchInputProps): JSX.Element;
-export {};

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

@@ -3,7 +3,7 @@ import type { SearchDocument } from '../../core/types';
 type ActiveItem<T> = T & {
     active?: boolean;
 };
-type SearchItemProps = {
+export type SearchItemProps = {
     item: ActiveItem<SearchDocument>;
     product?: {
         name: string;

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.83.0-rc.1",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -35,18 +35,18 @@
   },
   "devDependencies": {
     "@markdoc/markdoc": "0.4.0",
-    "@storybook/addon-actions": "7.6.4",
-    "@storybook/addon-essentials": "7.6.4",
-    "@storybook/addon-interactions": "7.6.4",
-    "@storybook/addon-links": "7.6.4",
-    "@storybook/addon-viewport": "7.6.4",
-    "@storybook/addons": "7.6.4",
-    "@storybook/core-common": "7.6.4",
-    "@storybook/node-logger": "7.6.4",
-    "@storybook/react": "7.6.4",
-    "@storybook/react-webpack5": "7.6.4",
+    "@storybook/addon-actions": "7.6.19",
+    "@storybook/addon-essentials": "7.6.19",
+    "@storybook/addon-interactions": "7.6.19",
+    "@storybook/addon-links": "7.6.19",
+    "@storybook/addon-viewport": "7.6.19",
+    "@storybook/addons": "7.6.17",
+    "@storybook/core-common": "7.6.19",
+    "@storybook/node-logger": "7.6.19",
+    "@storybook/react": "7.6.19",
+    "@storybook/react-webpack5": "7.6.19",
     "@storybook/testing-library": "0.2.2",
-    "@storybook/theming": "7.6.4",
+    "@storybook/theming": "7.6.19",
     "@testing-library/jest-dom": "6.1.5",
     "@testing-library/react": "14.1.2",
     "@testing-library/user-event": "14.5.1",
@@ -72,12 +72,12 @@
     "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",
-    "storybook-addon-pseudo-states": "2.1.2",
-    "storybook-design-token": "3.0.0-beta.6",
+    "storybook": "7.6.19",
+    "storybook-addon-pseudo-states": "2.2.1",
+    "storybook-design-token": "3.1.0",
     "styled-components": "5.3.11",
     "styled-system": "5.1.5",
     "ts-jest": "29.1.2",
@@ -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.83.0-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;