@redocly/theme 0.15.1 → 0.16.0

package/lib/mocks/Sidebar/useSidebarItems.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSidebarItems = void 0;
+function useSidebarItems(_) {
+    return [];
+}
+exports.useSidebarItems = useSidebarItems;
+//# sourceMappingURL=useSidebarItems.js.map

package/lib/mocks/hooks/index.d.ts

@@ -1,5 +1,5 @@
 import type { ThemeUIConfig } from '../../config';
-import type { ResolvedNavItem, TFunction } from '../../types/portal';
+import type { ResolvedNavItem, TFunction, Version } from '../../types/portal';
 import type { CatalogConfig, FilteredCatalog } from '../../types/portal/src/shared/types/catalog';
 interface PageLink {
     label: string;
@@ -28,3 +28,6 @@ export declare function useI18nConfig(): {
         name: string;
     }[];
 };
+export declare function usePageVersions(): {
+    versions: Version[];
+};

package/lib/mocks/hooks/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useI18nConfig = exports.useGlobalData = exports.useI18n = exports.useTranslate = exports.useCatalog = exports.usePageSharedData = exports.useSidebarSiblingsData = exports.useThemeConfig = void 0;
+exports.usePageVersions = exports.useI18nConfig = exports.useGlobalData = exports.useI18n = exports.useTranslate = exports.useCatalog = exports.usePageSharedData = exports.useSidebarSiblingsData = exports.useThemeConfig = void 0;
 function useThemeConfig() {
     return {
         search: {
@@ -89,4 +89,19 @@ function useI18nConfig() {
     };
 }
 exports.useI18nConfig = useI18nConfig;
+function usePageVersions() {
+    return {
+        versions: [
+            {
+                version: '1.0',
+                label: 'First',
+                link: '',
+                default: true,
+                active: true,
+                folderId: 'id',
+            },
+        ],
+    };
+}
+exports.usePageVersions = usePageVersions;
 //# sourceMappingURL=index.js.map

package/lib/mocks/media-css.d.ts

@@ -0,0 +1,5 @@
+export declare const breakpoints: {
+    small: string;
+    medium: string;
+    large: string;
+};

package/lib/mocks/media-css.js

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

package/lib/ui/Dropdown.js

@@ -54,7 +54,7 @@ const DropDownList = styled_components_1.default.div `
   padding: 0;
   border-radius: 4px;
   border: 1px solid var(--border-color);
-  z-index: 9999;
+  z-index: var(--z-index-popover);
   left: 0;
   right: 0;
 `;

package/lib/ui/darkColors.js

@@ -7,9 +7,17 @@ exports.darkMode = (0, styled_components_1.css) `
      * @tokens Dark Colors
      * @presenter Color
      */
-  --background-color: #0d1117;
-  --footer-background-color: #16202e;
-  --navbar-background-color: #16202e;
+  --background-color: #141414;
+  --footer-background-color: #1F1F1F;
+  --navbar-background-color: #1F1F1F;
+  --mobile-menu-background: #141414;
+  --mobile-menu-profile-background: var(--mobile-menu-background);
+  --mobile-menu-login-button-background: var(--mobile-menu-profile-background); rgba(255, 255, 255, 0.6);
+  --mobile-menu-item-text-color: rgba(255, 255, 255, 0.6);
+  --mobile-menu-item-active-color: #1F1F1F;
+  --mobile-menu-item-active-text-color: rgba(255, 255, 255, 0.85);
+  --mobile-menu-control-button-color: #ffffff;
+  --mobile-menu-profile-border-color: #222222;
   --color-primary-500: #57a5fd;
   --color-primary-300: #15396e;
   --color-secondary-300: #22262e;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.15.1",
+  "version": "0.16.0",
   "description": "Shared UI components library",
   "keywords": [
     "theme",
@@ -77,6 +77,7 @@
     "ts-node": "^10.7.0",
     "ts-node-dev": "^2.0.0",
     "tsc-alias": "^1.8.2",
+    "tsconfig-paths": "^4.2.0",
     "tsconfig-paths-webpack-plugin": "^3.5.2",
     "typescript": "^4.8.4",
     "webpack": "^5.72.0"
@@ -85,9 +86,9 @@
     "@redocly/ajv": "^8.11.0",
     "copy-to-clipboard": "^3.3.3",
     "highlight-words-core": "^1.2.2",
-    "react-date-picker": "10.0.3",
-    "react-calendar": "4.2.1",
     "hotkeys-js": "^3.10.1",
+    "react-calendar": "4.2.1",
+    "react-date-picker": "10.0.3",
     "timeago.js": "^4.0.2"
   },
   "scripts": {

package/src/I18n/LanguagePicker.tsx

@@ -70,6 +70,7 @@ const Dropdown = styled.div<{ isOpen: boolean }>`
       ? `
     ${DropdownMenu} {
       display: block;
+      z-index: var(--z-index-popover);
     }
   `
       : ``}
@@ -101,7 +102,7 @@ const DropdownMenu = styled.ul`
   overflow: hidden;
   display: none;
   overflow-y: auto;
-  z-index: 9;
+  z-index: var(--z-index-surface);
   padding: 0;
   list-style: none;
 `;

package/src/components/Breadcrumbs/Breadcrumb.tsx

@@ -27,7 +27,6 @@ const BreadcrumbText = styled.div`
 
 const BreadcrumbWrapper = styled.div<{ isActive: boolean; isLink: boolean }>`
   border-radius: var(--border-radius);
-  padding: 0 var(--breadcrumbs-padding-horizontal);
 
   &:first-child {
     padding-left: 0;

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -32,6 +32,12 @@ const Container = styled.div`
   flex-direction: row;
   align-items: center;
   color: var(--breadcrumbs-text-color);
+  font-size: var(--breadcrumbs-font-size);
+  flex-wrap: wrap;
+
+  > div {
+    padding-right: var(--breadcrumbs-padding-horizontal);
+  }
 
   @media print {
     display: none;

package/src/components/Cards/Card.tsx

@@ -10,12 +10,13 @@ export interface CardProps {
   title?: string;
   icon?: string;
   links: ResolvedNavItem;
+  className?: string;
 }
 
 export function Card(props: CardProps): JSX.Element {
   const { translate } = useTranslate();
   return (
-    <CardWrapper data-component-name="Cards/Card">
+    <CardWrapper data-component-name="Cards/Card" className={props.className}>
       {props.icon && <img src={props?.icon} alt={props?.title} />}
       {props.title && <H3>{props.title}</H3>}
       {props.links.items && (

package/src/components/Cards/CardsBlock.tsx

@@ -1,7 +1,8 @@
 import styled from 'styled-components';
 
-export const CardsBlock = styled.div.attrs(() => ({
+export const CardsBlock = styled.div.attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Cards/CardsBlock',
+  className,
 }))`
   display: flex;
   padding: 20px 0;

package/src/components/Catalog/Catalog.tsx

@@ -117,7 +117,7 @@ const CatalogPageSidebar = styled.aside<{ isActiveInMobileMode?: boolean }>`
       isActiveInMobileMode ? 'padding-bottom: 66px;' : 'height: 76px;'};
     background-color: var(--sidebar-background-color);
     border-bottom: 1px solid var(--sidebar-border-color);
-    z-index: 100;
+    z-index: var(--z-index-surface);
 
     ${MobileStickyApplyFilters} {
       display: ${({ isActiveInMobileMode }) => (isActiveInMobileMode ? 'block' : 'none')};

package/src/components/CodeBlock/CodeBlock.ts

@@ -2,8 +2,9 @@ import styled from 'styled-components';
 
 import { generateCodeBlockTokens } from '@theme/utils';
 
-export const CodeBlock = styled.div.attrs(() => ({
+export const CodeBlock = styled.div.attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'CodeBlock/CodeBlock',
+  className,
 }))`
   max-height: var(--code-block-max-height, 600px);
   word-break: var(--code-block-word-break, initial);

package/src/components/CodeSample/CodeSample.tsx

@@ -5,6 +5,7 @@ import { ClipboardService } from '@theme/utils/ClipboardService';
 import { useThemeConfig } from '@theme/hooks/useThemeConfig';
 import { ReportDialog, useReportDialog } from '@theme/components/Feedback';
 import { useTranslate } from '@portal/hooks';
+import { concatClassNames } from '@theme/utils';
 
 export type CodeSampleProps = {
   language: string;
@@ -12,6 +13,7 @@ export type CodeSampleProps = {
   rawContent: string;
   'data-source'?: string;
   'data-hash'?: string;
+  className?: string;
 };
 
 export function CodeSample({
@@ -20,6 +22,7 @@ export function CodeSample({
   language,
   'data-source': dataSource,
   'data-hash': dataHash,
+  className = '',
 }: CodeSampleProps): JSX.Element {
   const langClassName = language ? `language-${language}` : '';
   const { codeSnippet: { copy = {}, report = {} } = {} } = useThemeConfig();
@@ -44,7 +47,7 @@ export function CodeSample({
 
   return (
     <Wrapper
-      className="code-sample"
+      className={concatClassNames('code-sample', className)}
       data-component-name="Markdown/CodeSample/CodeSample"
       data-source={dataSource}
       data-hash={dataHash}

package/src/components/ColorModeSwitcher/ColorModeSwitcher.tsx

@@ -4,7 +4,12 @@ import styled from 'styled-components';
 import { ColorModeIcon } from '@theme/icons/ColorModeIcon';
 import { useMount, useThemeConfig } from '@theme/hooks';
 
-export function ColorModeSwitcher(): JSX.Element | null {
+interface ColorModeSwitcherProps {
+  className?: string;
+}
+
+export function ColorModeSwitcher(props: ColorModeSwitcherProps): JSX.Element | null {
+  const { className } = props;
   const themeSettings = useThemeConfig();
   const colorMode = themeSettings.colorMode;
   const [activeColorMode, setActiveColorMode] = useState('');
@@ -37,6 +42,7 @@ export function ColorModeSwitcher(): JSX.Element | null {
       onClick={handelChangeColorMode}
       modes={modes}
       role="link"
+      className={className}
     >
       {modes.map((mode) => (
         <ColorModeIcon mode={mode} key={mode} />

package/src/components/Feedback/Comment.tsx

@@ -5,7 +5,7 @@ import { Button } from '@theme/components/Button/Button';
 import type { CommentProps } from '@theme/components/Feedback';
 import { useTranslate } from '@portal/hooks';
 
-export const Comment = ({ settings, onSubmit, onCancel }: CommentProps): JSX.Element => {
+export const Comment = ({ settings, onSubmit, onCancel, className }: CommentProps): JSX.Element => {
   const { label, submitText } = settings || {};
   const [text, setText] = React.useState('');
   const [submitValue, setSubmitValue] = React.useState('');
@@ -28,7 +28,7 @@ export const Comment = ({ settings, onSubmit, onCancel }: CommentProps): JSX.Ele
 
   if (submitValue) {
     return (
-      <Wrapper>
+      <Wrapper className={className}>
         <Label data-translation-key={translationKeys.submitText}>
           {translate(
             translationKeys.submitText,
@@ -40,7 +40,7 @@ export const Comment = ({ settings, onSubmit, onCancel }: CommentProps): JSX.Ele
   }
 
   return (
-    <Wrapper data-component-name="Feedback/Comment">
+    <Wrapper data-component-name="Feedback/Comment" className={className}>
       <Label data-translation-key={translationKeys.label}>
         {translate(translationKeys.label, label || 'Please share your feedback with us.')}
       </Label>

package/src/components/Feedback/Rating.tsx

@@ -10,7 +10,7 @@ type StarsProps = {
   max: number;
 };
 
-export const Rating = ({ settings, onSubmit }: RatingProps): JSX.Element => {
+export const Rating = ({ settings, onSubmit, className }: RatingProps): JSX.Element => {
   const {
     label,
     max,
@@ -66,7 +66,7 @@ export const Rating = ({ settings, onSubmit }: RatingProps): JSX.Element => {
   }
 
   return (
-    <Wrapper data-component-name="Feedback/Rating">
+    <Wrapper data-component-name="Feedback/Rating" className={className}>
       <Label data-translation-key={translationKeys.label}>
         {translate(translationKeys.label, label || 'How helpful was this page?')}
       </Label>

package/src/components/Feedback/Reasons.tsx

@@ -5,7 +5,7 @@ import { Button } from '@theme/components/Button/Button';
 import type { ReasonsProps } from '@theme/components/Feedback';
 import { useTranslate } from '@portal/hooks';
 
-export const Reasons = ({ settings, onSubmit }: ReasonsProps): JSX.Element => {
+export const Reasons = ({ settings, onSubmit, className }: ReasonsProps): JSX.Element => {
   const { label, multi, buttonText, items = [] } = settings;
   const [checkedState, setCheckedState] = React.useState(new Array(items.length).fill(false));
   const { translate } = useTranslate();
@@ -34,7 +34,11 @@ export const Reasons = ({ settings, onSubmit }: ReasonsProps): JSX.Element => {
   };
 
   return (
-    <Wrapper data-component-name="Feedback/Reasons" data-translation-key={translationKeys.label}>
+    <Wrapper
+      data-component-name="Feedback/Reasons"
+      data-translation-key={translationKeys.label}
+      className={className}
+    >
       <Label>
         {translate(
           translationKeys.label,

package/src/components/Feedback/ReportDialog.tsx

@@ -35,7 +35,7 @@ const Wrapper = styled.div`
   width: 100vw;
   height: 100vh;
   background: var(--modal-overlay-background-color);
-  z-index: 10000;
+  z-index: var(--z-index-overlay);
   display: flex;
   align-items: center;
   justify-content: center;

package/src/components/Feedback/Sentiment.tsx

@@ -6,7 +6,7 @@ import { Comment, Reasons } from '@theme/components/Feedback';
 import { ThumbUp, ThumbDown } from '@theme/components/Feedback/Thumbs';
 import { useTranslate } from '@portal/hooks';
 
-export const Sentiment = ({ settings, onSubmit }: SentimentProps): JSX.Element => {
+export const Sentiment = ({ settings, onSubmit, className }: SentimentProps): JSX.Element => {
   const { label, submitText, comment: commentSettings, reasons: reasonsSettings } = settings || {};
   const [score, setScore] = React.useState(0);
   const [comment, setComment] = React.useState('');
@@ -65,7 +65,7 @@ export const Sentiment = ({ settings, onSubmit }: SentimentProps): JSX.Element =
   }
 
   return (
-    <Wrapper data-component-name="Feedback/Sentiment">
+    <Wrapper data-component-name="Feedback/Sentiment" className={className}>
       <Label data-translation-key={translationKeys.label}>
         {translate(translationKeys.label, label || 'Was this page helpful?')}
       </Label>

package/src/components/Feedback/types.ts

@@ -17,6 +17,7 @@ export type RatingProps = {
       items: string[];
     };
   };
+  className?: string;
 };
 
 export type SentimentProps = {
@@ -36,6 +37,7 @@ export type SentimentProps = {
       items: string[];
     };
   };
+  className?: string;
 };
 
 export type CommentProps = {
@@ -45,6 +47,7 @@ export type CommentProps = {
     label?: string;
     submitText?: string;
   };
+  className?: string;
 };
 
 export type ReasonsProps = {
@@ -56,6 +59,7 @@ export type ReasonsProps = {
     submitText?: string;
     buttonText?: string;
   };
+  className?: string;
 };
 
 export type ReportDialogProps = {
@@ -66,4 +70,5 @@ export type ReportDialogProps = {
     label?: string;
   };
   submitFeedback: ({ type, values, path }: SubmitFeedbackParams) => Promise<void>;
+  className?: string;
 };

package/src/components/Footer/CustomFooter.tsx

@@ -7,15 +7,16 @@ import type { NavGroupRecord, ResolvedNavItem } from '@theme/types/portal';
 
 interface FooterProps {
   data: NavGroupRecord;
+  className?: string;
 }
 
-export function CustomFooter({ data }: FooterProps): JSX.Element | null {
+export function CustomFooter({ data, className }: FooterProps): JSX.Element | null {
   if (!data) {
     return null;
   }
 
   return (
-    <FooterContainer data-component-name="Footer/CustomFooter">
+    <FooterContainer data-component-name="Footer/CustomFooter" className={className}>
       {(data.links as ResolvedNavItem[]).map((navItem, index) => {
         return (
           <CustomFooterNavItem

package/src/components/Footer/CustomFooterNavItem.tsx

@@ -6,13 +6,14 @@ import type { ResolvedNavItem, ResolvedNavLinkItem } from '@theme/types/portal';
 
 interface CustomFooterNavItemProps {
   navItem: ResolvedNavItem;
+  className?: string;
 }
 
-export function CustomFooterNavItem({ navItem }: CustomFooterNavItemProps): JSX.Element {
+export function CustomFooterNavItem({ navItem, className }: CustomFooterNavItemProps): JSX.Element {
   const item = navItem as ResolvedNavLinkItem;
 
   return (
-    <FooterItem data-component-name="Navbar/NavbarItem">
+    <FooterItem data-component-name="Navbar/NavbarItem" className={className}>
       <FooterLink to={item.link}>
         <FooterLabel>{item.label}</FooterLabel>
       </FooterLink>

package/src/components/Footer/Footer.tsx

@@ -26,14 +26,16 @@ export function Footer(): JSX.Element | null {
 interface FooterPresentationalComponentProps {
   items: ResolvedNavItem[];
   copyrightText: string;
+  className?: string;
 }
 
 export function FooterPresentationalComponent({
   items,
   copyrightText,
+  className,
 }: FooterPresentationalComponentProps): JSX.Element | null {
   return (
-    <FooterContainer data-component-name="Footer/Footer">
+    <FooterContainer data-component-name="Footer/Footer" className={className}>
       <FooterColumns columns={items as ResolvedNavItem[]} />
       <FooterCopyright copyrightText={copyrightText} />
     </FooterContainer>

package/src/components/Footer/FooterColumn.tsx

@@ -7,14 +7,15 @@ import { useTranslate } from '@portal/hooks';
 
 interface FooterColumnProps {
   column: ResolvedNavItem;
+  className?: string;
 }
 
-export function FooterColumn({ column }: FooterColumnProps): JSX.Element {
+export function FooterColumn({ column, className }: FooterColumnProps): JSX.Element {
   const { translate } = useTranslate();
   const hasIcon = column.items ? column.items.some((item) => !!item.icon) : false;
 
   return (
-    <FooterColumnContainer data-component-name="Footer/FooterColumn">
+    <FooterColumnContainer data-component-name="Footer/FooterColumn" className={className}>
       <FooterColumnTitle withIconPadding={hasIcon}>
         {translate(column.labelTranslationKey, column.label)}
       </FooterColumnTitle>

package/src/components/Footer/FooterColumns.tsx

@@ -6,15 +6,16 @@ import type { ResolvedNavItem } from '@theme/types/portal';
 
 interface FooterColumnsProps {
   columns: ResolvedNavItem[];
+  className?: string;
 }
 
-export function FooterColumns({ columns }: FooterColumnsProps): JSX.Element | null {
+export function FooterColumns({ columns, className }: FooterColumnsProps): JSX.Element | null {
   if (!columns?.length) {
     return null;
   }
 
   return (
-    <FooterColumnsContainer data-component-name="Footer/FooterColumns">
+    <FooterColumnsContainer data-component-name="Footer/FooterColumns" className={className}>
       <FooterRow>
         {columns.map((column, index) => (
           <FooterColumn key={`${column.label}_${index}`} column={column} />

package/src/components/Footer/FooterCopyright.tsx

@@ -5,15 +5,20 @@ import { useTranslate } from '@portal/hooks';
 
 interface FooterCopyrightProps {
   copyrightText: string;
+  className?: string;
 }
 
-export function FooterCopyright({ copyrightText = '' }: FooterCopyrightProps): JSX.Element | null {
+export function FooterCopyright({
+  copyrightText = '',
+  className,
+}: FooterCopyrightProps): JSX.Element | null {
   const { translate } = useTranslate();
   const translationKeys = {
     copyrightText: 'theme.footer.copyrightText',
   };
   return copyrightText ? (
     <Wrapper
+      className={className}
       data-component-name="Footer/FooterCopyright"
       data-translation-key={translationKeys.copyrightText}
     >

package/src/components/LastUpdated/LastUpdated.tsx

@@ -18,6 +18,7 @@ export interface LastUpdatedProps {
   lastModified: Date;
   format?: keyof typeof FORMATS;
   locale?: string;
+  className?: string;
 }
 
 export function LastUpdated(props: LastUpdatedProps): JSX.Element | null {
@@ -44,6 +45,7 @@ export function LastUpdated(props: LastUpdatedProps): JSX.Element | null {
 
   return (
     <Wrapper
+      className={props.className}
       data-component-name="LastUpdated/LastUpdated"
       rawOnPrint={format === 'timeago'}
       data-print-datetime={isoDate}

package/src/components/Markdown/ContainerWrapper.tsx

@@ -1,7 +1,8 @@
 import styled from 'styled-components';
 
-export const ContainerWrapper = styled.section.attrs(() => ({
+export const ContainerWrapper = styled.section.attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Markdown/ContainerWrapper',
+  className,
 }))<{ withToc: boolean }>`
   max-width: var(--md-container-max-width);
   width: 90%;

package/src/components/Markdown/Heading.tsx

@@ -16,11 +16,13 @@ export function Heading({
   children,
   'data-source': dataSource,
   'data-hash': dataHash,
+  className,
 }: PropsWithChildren<{
   level: number;
   id: string;
   'data-source'?: string;
   'data-hash'?: string;
+  className?: string;
 }>): JSX.Element {
   const linkEl = (
     <a href={`#${id}`} className={concatClassNames('anchor', 'before')}>
@@ -32,7 +34,7 @@ export function Heading({
     `h${level}`,
     {
       id,
-      className: concatClassNames('heading-anchor', mdClassName),
+      className: concatClassNames('heading-anchor', mdClassName, className),
       'data-component-name': 'Markdown/Heading',
       'data-source': dataSource,
       'data-hash': dataHash,

package/src/components/Markdown/MarkdownLayout.tsx

@@ -24,6 +24,7 @@ type MarkdownLayoutProps = {
   lastModified?: string | null;
   nextPage?: ResolvedNavItemWithLink | null;
   prevPage?: ResolvedNavItemWithLink | null;
+  className?: string;
 };
 
 export function MarkdownLayout({
@@ -34,6 +35,7 @@ export function MarkdownLayout({
   lastModified,
   nextPage,
   prevPage,
+  className,
 }: MarkdownLayoutProps): JSX.Element {
   const { markdown } = useThemeConfig();
   const { translate } = useTranslate();
@@ -45,7 +47,7 @@ export function MarkdownLayout({
   const mergedConf = editPage ? { ...themeEditPage, ...editPage } : undefined;
 
   return (
-    <PageWrapper data-component-name="Markdown/MarkdownLayout">
+    <PageWrapper data-component-name="Markdown/MarkdownLayout" className={className}>
       <ContainerWrapper withToc={true}>
         <Breadcrumbs />
         <LayoutTop>

package/src/components/Markdown/MarkdownWrapper.tsx

@@ -117,8 +117,9 @@ export function headingAnchor(className = 'anchor'): FlattenSimpleInterpolation
   `;
 }
 
-export const MarkdownWrapper = styled.main.attrs(() => ({
+export const MarkdownWrapper = styled.main.attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Markdown/MarkdownWrapper',
+  className,
 }))`
   font-weight: var(--font-weight-regular);
   padding: 0;

package/src/components/Markdown/Mermaid.tsx

@@ -1,20 +1,24 @@
 import React from 'react';
 import styled from 'styled-components';
 
+import { concatClassNames } from '@theme/utils';
+
 type MermaidProps = {
   diagramHtml: string;
   'data-source'?: string;
   'data-hash'?: string;
+  className?: string;
 };
 
 export function Mermaid({
   diagramHtml,
   'data-source': dataSource,
   'data-hash': dataHash,
+  className,
 }: MermaidProps): JSX.Element {
   return (
     <Wrapper
-      className="mermaid-wrapper"
+      className={concatClassNames('mermaid-wrapper', className)}
       dangerouslySetInnerHTML={{ __html: diagramHtml }}
       data-component-name="Markdown/Mermaid"
       data-source={dataSource}

package/src/components/Markdown/PageWrapper.tsx

@@ -1,7 +1,8 @@
 import styled from 'styled-components';
 
-export const PageWrapper = styled.div.attrs(() => ({
+export const PageWrapper = styled.div.attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Markdown/PageWrapper',
+  className,
 }))`
   display: flex;
   flex: 1;