@redocly/theme 0.15.1 → 0.16.0

package/lib/I18n/LanguagePicker.js

@@ -68,6 +68,7 @@ const Dropdown = styled_components_1.default.div `
     ? `
     ${DropdownMenu} {
       display: block;
+      z-index: var(--z-index-popover);
     }
   `
     : ``}
@@ -97,7 +98,7 @@ const DropdownMenu = styled_components_1.default.ul `
   overflow: hidden;
   display: none;
   overflow-y: auto;
-  z-index: 9;
+  z-index: var(--z-index-surface);
   padding: 0;
   list-style: none;
 `;

package/lib/components/Breadcrumbs/Breadcrumb.js

@@ -17,7 +17,6 @@ const BreadcrumbText = styled_components_1.default.div `
 `;
 const BreadcrumbWrapper = styled_components_1.default.div `
   border-radius: var(--border-radius);
-  padding: 0 var(--breadcrumbs-padding-horizontal);
 
   &:first-child {
     padding-left: 0;

package/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -26,6 +26,12 @@ const Container = styled_components_1.default.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/lib/components/Cards/Card.d.ts

@@ -4,5 +4,6 @@ export interface CardProps {
     title?: string;
     icon?: string;
     links: ResolvedNavItem;
+    className?: string;
 }
 export declare function Card(props: CardProps): JSX.Element;

package/lib/components/Cards/Card.js

@@ -11,7 +11,7 @@ const H3_1 = require("../../components/Typography/H3");
 const hooks_1 = require("../../mocks/hooks");
 function Card(props) {
     const { translate } = (0, hooks_1.useTranslate)();
-    return (react_1.default.createElement(CardWrapper, { "data-component-name": "Cards/Card" },
+    return (react_1.default.createElement(CardWrapper, { "data-component-name": "Cards/Card", className: props.className },
         props.icon && react_1.default.createElement("img", { src: props === null || props === void 0 ? void 0 : props.icon, alt: props === null || props === void 0 ? void 0 : props.title }),
         props.title && react_1.default.createElement(H3_1.H3, null, props.title),
         props.links.items && (react_1.default.createElement(CardLinksList, null, props.links.items.map((item) => (react_1.default.createElement("li", { key: item.label },

package/lib/components/Cards/CardsBlock.d.ts

@@ -1,3 +1 @@
-export declare const CardsBlock: import("styled-components").StyledComponent<"div", any, {
-    'data-component-name': string;
-}, "data-component-name">;
+export declare const CardsBlock: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/Cards/CardsBlock.js

@@ -5,8 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CardsBlock = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
-exports.CardsBlock = styled_components_1.default.div.attrs(() => ({
+exports.CardsBlock = styled_components_1.default.div.attrs(({ className }) => ({
     'data-component-name': 'Cards/CardsBlock',
+    className,
 })) `
   display: flex;
   padding: 20px 0;

package/lib/components/Catalog/Catalog.js

@@ -77,7 +77,7 @@ const CatalogPageSidebar = styled_components_1.default.aside `
     ${({ isActiveInMobileMode }) => 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/lib/components/CodeBlock/CodeBlock.d.ts

@@ -1,3 +1 @@
-export declare const CodeBlock: import("styled-components").StyledComponent<"div", any, {
-    'data-component-name': string;
-}, "data-component-name">;
+export declare const CodeBlock: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/CodeBlock/CodeBlock.js

@@ -6,8 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CodeBlock = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
 const utils_1 = require("../../utils");
-exports.CodeBlock = styled_components_1.default.div.attrs(() => ({
+exports.CodeBlock = styled_components_1.default.div.attrs(({ className }) => ({
     'data-component-name': 'CodeBlock/CodeBlock',
+    className,
 })) `
   max-height: var(--code-block-max-height, 600px);
   word-break: var(--code-block-word-break, initial);

package/lib/components/CodeSample/CodeSample.d.ts

@@ -5,5 +5,6 @@ export type CodeSampleProps = {
     rawContent: string;
     'data-source'?: string;
     'data-hash'?: string;
+    className?: string;
 };
-export declare function CodeSample({ rawContent, highlighted, language, 'data-source': dataSource, 'data-hash': dataHash, }: CodeSampleProps): JSX.Element;
+export declare function CodeSample({ rawContent, highlighted, language, 'data-source': dataSource, 'data-hash': dataHash, className, }: CodeSampleProps): JSX.Element;

package/lib/components/CodeSample/CodeSample.js

@@ -30,7 +30,8 @@ const ClipboardService_1 = require("../../utils/ClipboardService");
 const useThemeConfig_1 = require("../../hooks/useThemeConfig");
 const Feedback_1 = require("../../components/Feedback");
 const hooks_1 = require("../../mocks/hooks");
-function CodeSample({ rawContent, highlighted, language, 'data-source': dataSource, 'data-hash': dataHash, }) {
+const utils_1 = require("../../utils");
+function CodeSample({ rawContent, highlighted, language, 'data-source': dataSource, 'data-hash': dataHash, className = '', }) {
     const langClassName = language ? `language-${language}` : '';
     const { codeSnippet: { copy = {}, report = {} } = {} } = (0, useThemeConfig_1.useThemeConfig)();
     const [isCopied, setIsCopied] = (0, react_1.useState)(false);
@@ -47,7 +48,7 @@ function CodeSample({ rawContent, highlighted, language, 'data-source': dataSour
         setIsCopied(true);
         setTimeout(() => setIsCopied(false), copy.toasterDuration || 1500);
     };
-    return (react_1.default.createElement(Wrapper, { className: "code-sample", "data-component-name": "Markdown/CodeSample/CodeSample", "data-source": dataSource, "data-hash": dataHash },
+    return (react_1.default.createElement(Wrapper, { className: (0, utils_1.concatClassNames)('code-sample', className), "data-component-name": "Markdown/CodeSample/CodeSample", "data-source": dataSource, "data-hash": dataHash },
         react_1.default.createElement(CodeSampleButtonContainer, null,
             !copy.hide && (react_1.default.createElement(react_1.default.Fragment, null,
                 !isCopied && (react_1.default.createElement(Button, { onClick: () => copyCode(rawContent), title: translate(translationKeys.tooltipText, copy.tooltipText || 'Copy to clipboard') }, translate(translationKeys.buttonText, copy.buttonText || 'Copy'))),

package/lib/components/ColorModeSwitcher/ColorModeSwitcher.d.ts

@@ -1,2 +1,6 @@
 /// <reference types="react" />
-export declare function ColorModeSwitcher(): JSX.Element | null;
+interface ColorModeSwitcherProps {
+    className?: string;
+}
+export declare function ColorModeSwitcher(props: ColorModeSwitcherProps): JSX.Element | null;
+export {};

package/lib/components/ColorModeSwitcher/ColorModeSwitcher.js

@@ -31,7 +31,8 @@ const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const ColorModeIcon_1 = require("../../icons/ColorModeIcon");
 const hooks_1 = require("../../hooks");
-function ColorModeSwitcher() {
+function ColorModeSwitcher(props) {
+    const { className } = props;
     const themeSettings = (0, hooks_1.useThemeConfig)();
     const colorMode = themeSettings.colorMode;
     const [activeColorMode, setActiveColorMode] = (0, react_1.useState)('');
@@ -53,7 +54,7 @@ function ColorModeSwitcher() {
             document.documentElement.classList.remove('notransition');
         });
     };
-    return (react_1.default.createElement(Wrapper, { "data-component-name": "ColorModeSwitcher/ColorModeSwitcher", onClick: handelChangeColorMode, modes: modes, role: "link" }, modes.map((mode) => (react_1.default.createElement(ColorModeIcon_1.ColorModeIcon, { mode: mode, key: mode })))));
+    return (react_1.default.createElement(Wrapper, { "data-component-name": "ColorModeSwitcher/ColorModeSwitcher", onClick: handelChangeColorMode, modes: modes, role: "link", className: className }, modes.map((mode) => (react_1.default.createElement(ColorModeIcon_1.ColorModeIcon, { mode: mode, key: mode })))));
 }
 exports.ColorModeSwitcher = ColorModeSwitcher;
 const Wrapper = styled_components_1.default.div `

package/lib/components/Feedback/Comment.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import type { CommentProps } from '../../components/Feedback';
-export declare const Comment: ({ settings, onSubmit, onCancel }: CommentProps) => JSX.Element;
+export declare const Comment: ({ settings, onSubmit, onCancel, className }: CommentProps) => JSX.Element;

package/lib/components/Feedback/Comment.js

@@ -31,7 +31,7 @@ const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Button_1 = require("../../components/Button/Button");
 const hooks_1 = require("../../mocks/hooks");
-const Comment = ({ settings, onSubmit, onCancel }) => {
+const Comment = ({ settings, onSubmit, onCancel, className }) => {
     const { label, submitText } = settings || {};
     const [text, setText] = React.useState('');
     const [submitValue, setSubmitValue] = React.useState('');
@@ -52,10 +52,10 @@ const Comment = ({ settings, onSubmit, onCancel }) => {
         setText(e.target.value);
     };
     if (submitValue) {
-        return (React.createElement(Wrapper, null,
+        return (React.createElement(Wrapper, { className: className },
             React.createElement(Label, { "data-translation-key": translationKeys.submitText }, translate(translationKeys.submitText, submitText || 'Thank you for helping improve our documentation!'))));
     }
-    return (React.createElement(Wrapper, { "data-component-name": "Feedback/Comment" },
+    return (React.createElement(Wrapper, { "data-component-name": "Feedback/Comment", className: className },
         React.createElement(Label, { "data-translation-key": translationKeys.label }, translate(translationKeys.label, label || 'Please share your feedback with us.')),
         React.createElement(TextArea, { rows: 3, onChange: handleTextAreaChange }),
         React.createElement(ButtonsContainer, null,

package/lib/components/Feedback/Rating.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import type { RatingProps } from '../../components/Feedback';
-export declare const Rating: ({ settings, onSubmit }: RatingProps) => JSX.Element;
+export declare const Rating: ({ settings, onSubmit, className }: RatingProps) => JSX.Element;

package/lib/components/Feedback/Rating.js

@@ -31,7 +31,7 @@ const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Feedback_1 = require("../../components/Feedback");
 const hooks_1 = require("../../mocks/hooks");
-const Rating = ({ settings, onSubmit }) => {
+const Rating = ({ settings, onSubmit, className }) => {
     const { label, max, submitText, comment: commentSettings, reasons: reasonsSettings, } = settings || {};
     const [score, setScore] = React.useState(0);
     const [comment, setComment] = React.useState('');
@@ -58,7 +58,7 @@ const Rating = ({ settings, onSubmit }) => {
         return (React.createElement(Wrapper, null,
             React.createElement(Label, { "data-translation-key": translationKeys.submitText }, translate(translationKeys.submitText, submitText || 'Thank you for helping improve our documentation!'))));
     }
-    return (React.createElement(Wrapper, { "data-component-name": "Feedback/Rating" },
+    return (React.createElement(Wrapper, { "data-component-name": "Feedback/Rating", className: className },
         React.createElement(Label, { "data-translation-key": translationKeys.label }, translate(translationKeys.label, label || 'How helpful was this page?')),
         React.createElement(Stars, { max: max || 5, onSubmit: setScore })));
 };

package/lib/components/Feedback/Reasons.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import type { ReasonsProps } from '../../components/Feedback';
-export declare const Reasons: ({ settings, onSubmit }: ReasonsProps) => JSX.Element;
+export declare const Reasons: ({ settings, onSubmit, className }: ReasonsProps) => JSX.Element;

package/lib/components/Feedback/Reasons.js

@@ -31,7 +31,7 @@ const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Button_1 = require("../../components/Button/Button");
 const hooks_1 = require("../../mocks/hooks");
-const Reasons = ({ settings, onSubmit }) => {
+const Reasons = ({ settings, onSubmit, className }) => {
     const { label, multi, buttonText, items = [] } = settings;
     const [checkedState, setCheckedState] = React.useState(new Array(items.length).fill(false));
     const { translate } = (0, hooks_1.useTranslate)();
@@ -53,7 +53,7 @@ const Reasons = ({ settings, onSubmit }) => {
     const submitForm = () => {
         onSubmit({ reasons: items.filter((_, index) => !!checkedState[index]) });
     };
-    return (React.createElement(Wrapper, { "data-component-name": "Feedback/Reasons", "data-translation-key": translationKeys.label },
+    return (React.createElement(Wrapper, { "data-component-name": "Feedback/Reasons", "data-translation-key": translationKeys.label, className: className },
         React.createElement(Label, null, translate(translationKeys.label, label || 'Which statement describes your thoughts about this page?')),
         items.map((reason, idx) => (React.createElement(OptionWrapper, { key: reason },
             React.createElement("input", { type: input_type, value: reason, checked: checkedState[idx], name: "reasons", onChange: () => handleOptionChange(idx) }),

package/lib/components/Feedback/ReportDialog.js

@@ -47,7 +47,7 @@ const Wrapper = styled_components_1.default.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/lib/components/Feedback/Sentiment.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import type { SentimentProps } from '../../components/Feedback';
-export declare const Sentiment: ({ settings, onSubmit }: SentimentProps) => JSX.Element;
+export declare const Sentiment: ({ settings, onSubmit, className }: SentimentProps) => JSX.Element;

package/lib/components/Feedback/Sentiment.js

@@ -32,7 +32,7 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const Feedback_1 = require("../../components/Feedback");
 const Thumbs_1 = require("../../components/Feedback/Thumbs");
 const hooks_1 = require("../../mocks/hooks");
-const Sentiment = ({ settings, onSubmit }) => {
+const Sentiment = ({ settings, onSubmit, className }) => {
     const { label, submitText, comment: commentSettings, reasons: reasonsSettings } = settings || {};
     const [score, setScore] = React.useState(0);
     const [comment, setComment] = React.useState('');
@@ -64,7 +64,7 @@ const Sentiment = ({ settings, onSubmit }) => {
         return (React.createElement(Wrapper, null,
             React.createElement(Label, { "data-translation-key": translationKeys.submitText }, translate(translationKeys.submitText, submitText || 'Thank you for helping improve our documentation!'))));
     }
-    return (React.createElement(Wrapper, { "data-component-name": "Feedback/Sentiment" },
+    return (React.createElement(Wrapper, { "data-component-name": "Feedback/Sentiment", className: className },
         React.createElement(Label, { "data-translation-key": translationKeys.label }, translate(translationKeys.label, label || 'Was this page helpful?')),
         React.createElement(Vote, { onClick: () => setScore(1) },
             React.createElement(Thumbs_1.ThumbUp, { text: "Yes" })),

package/lib/components/Feedback/types.d.ts

@@ -20,6 +20,7 @@ export type RatingProps = {
             items: string[];
         };
     };
+    className?: string;
 };
 export type SentimentProps = {
     onSubmit: (value: {
@@ -42,6 +43,7 @@ export type SentimentProps = {
             items: string[];
         };
     };
+    className?: string;
 };
 export type CommentProps = {
     onSubmit: (value: {
@@ -52,6 +54,7 @@ export type CommentProps = {
         label?: string;
         submitText?: string;
     };
+    className?: string;
 };
 export type ReasonsProps = {
     onSubmit: (value: {
@@ -64,6 +67,7 @@ export type ReasonsProps = {
         submitText?: string;
         buttonText?: string;
     };
+    className?: string;
 };
 export type ReportDialogProps = {
     location: string;
@@ -73,4 +77,5 @@ export type ReportDialogProps = {
         label?: string;
     };
     submitFeedback: ({ type, values, path }: SubmitFeedbackParams) => Promise<void>;
+    className?: string;
 };

package/lib/components/Footer/CustomFooter.d.ts

@@ -2,6 +2,7 @@
 import type { NavGroupRecord } from '../../types/portal';
 interface FooterProps {
     data: NavGroupRecord;
+    className?: string;
 }
-export declare function CustomFooter({ data }: FooterProps): JSX.Element | null;
+export declare function CustomFooter({ data, className }: FooterProps): JSX.Element | null;
 export {};

package/lib/components/Footer/CustomFooter.js

@@ -8,11 +8,11 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const CustomFooterNavItem_1 = require("../../components/Footer/CustomFooterNavItem");
 const FooterCopyright_1 = require("../../components/Footer/FooterCopyright");
-function CustomFooter({ data }) {
+function CustomFooter({ data, className }) {
     if (!data) {
         return null;
     }
-    return (react_1.default.createElement(FooterContainer, { "data-component-name": "Footer/CustomFooter" },
+    return (react_1.default.createElement(FooterContainer, { "data-component-name": "Footer/CustomFooter", className: className },
         data.links.map((navItem, index) => {
             return (react_1.default.createElement(CustomFooterNavItem_1.CustomFooterNavItem, { key: `${navItem.label}_${index}`, "data-cy": navItem.label, navItem: navItem }));
         }),

package/lib/components/Footer/CustomFooterNavItem.d.ts

@@ -2,6 +2,7 @@
 import type { ResolvedNavItem } from '../../types/portal';
 interface CustomFooterNavItemProps {
     navItem: ResolvedNavItem;
+    className?: string;
 }
-export declare function CustomFooterNavItem({ navItem }: CustomFooterNavItemProps): JSX.Element;
+export declare function CustomFooterNavItem({ navItem, className }: CustomFooterNavItemProps): JSX.Element;
 export {};

package/lib/components/Footer/CustomFooterNavItem.js

@@ -7,9 +7,9 @@ exports.CustomFooterNavItem = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Link_1 = require("../../mocks/Link");
-function CustomFooterNavItem({ navItem }) {
+function CustomFooterNavItem({ navItem, className }) {
     const item = navItem;
-    return (react_1.default.createElement(FooterItem, { "data-component-name": "Navbar/NavbarItem" },
+    return (react_1.default.createElement(FooterItem, { "data-component-name": "Navbar/NavbarItem", className: className },
         react_1.default.createElement(FooterLink, { to: item.link },
             react_1.default.createElement(FooterLabel, null, item.label))));
 }

package/lib/components/Footer/Footer.d.ts

@@ -4,6 +4,7 @@ export declare function Footer(): JSX.Element | null;
 interface FooterPresentationalComponentProps {
     items: ResolvedNavItem[];
     copyrightText: string;
+    className?: string;
 }
-export declare function FooterPresentationalComponent({ items, copyrightText, }: FooterPresentationalComponentProps): JSX.Element | null;
+export declare function FooterPresentationalComponent({ items, copyrightText, className, }: FooterPresentationalComponentProps): JSX.Element | null;
 export {};

package/lib/components/Footer/Footer.js

@@ -19,8 +19,8 @@ function Footer() {
     return (react_1.default.createElement(FooterPresentationalComponent, { items: items, copyrightText: copyrightText }));
 }
 exports.Footer = Footer;
-function FooterPresentationalComponent({ items, copyrightText, }) {
-    return (react_1.default.createElement(FooterContainer, { "data-component-name": "Footer/Footer" },
+function FooterPresentationalComponent({ items, copyrightText, className, }) {
+    return (react_1.default.createElement(FooterContainer, { "data-component-name": "Footer/Footer", className: className },
         react_1.default.createElement(FooterColumns_1.FooterColumns, { columns: items }),
         react_1.default.createElement(FooterCopyright_1.FooterCopyright, { copyrightText: copyrightText })));
 }

package/lib/components/Footer/FooterColumn.d.ts

@@ -2,8 +2,9 @@
 import type { ResolvedNavItem } from '../../types/portal';
 interface FooterColumnProps {
     column: ResolvedNavItem;
+    className?: string;
 }
-export declare function FooterColumn({ column }: FooterColumnProps): JSX.Element;
+export declare function FooterColumn({ column, className }: FooterColumnProps): JSX.Element;
 export declare const FooterLinkIcon: import("styled-components").StyledComponent<"i", any, {
     url?: string | undefined;
     withIconPadding: boolean;

package/lib/components/Footer/FooterColumn.js

@@ -31,11 +31,11 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
 const Link_1 = require("../../mocks/Link");
 const hooks_1 = require("../../mocks/hooks");
-function FooterColumn({ column }) {
+function FooterColumn({ column, className }) {
     var _a;
     const { translate } = (0, hooks_1.useTranslate)();
     const hasIcon = column.items ? column.items.some((item) => !!item.icon) : false;
-    return (react_1.default.createElement(FooterColumnContainer, { "data-component-name": "Footer/FooterColumn" },
+    return (react_1.default.createElement(FooterColumnContainer, { "data-component-name": "Footer/FooterColumn", className: className },
         react_1.default.createElement(FooterColumnTitle, { withIconPadding: hasIcon }, translate(column.labelTranslationKey, column.label)), (_a = column === null || column === void 0 ? void 0 : column.items) === null || _a === void 0 ? void 0 :
         _a.map((columnItem, columnItemIndex) => {
             if (columnItem.type === 'error') {

package/lib/components/Footer/FooterColumns.d.ts

@@ -2,8 +2,9 @@
 import type { ResolvedNavItem } from '../../types/portal';
 interface FooterColumnsProps {
     columns: ResolvedNavItem[];
+    className?: string;
 }
-export declare function FooterColumns({ columns }: FooterColumnsProps): JSX.Element | null;
+export declare function FooterColumns({ columns, className }: FooterColumnsProps): JSX.Element | null;
 export declare const FooterColumnsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const FooterRow: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

package/lib/components/Footer/FooterColumns.js

@@ -7,11 +7,11 @@ exports.FooterRow = exports.FooterColumnsContainer = exports.FooterColumns = voi
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const FooterColumn_1 = require("../../components/Footer/FooterColumn");
-function FooterColumns({ columns }) {
+function FooterColumns({ columns, className }) {
     if (!(columns === null || columns === void 0 ? void 0 : columns.length)) {
         return null;
     }
-    return (react_1.default.createElement(exports.FooterColumnsContainer, { "data-component-name": "Footer/FooterColumns" },
+    return (react_1.default.createElement(exports.FooterColumnsContainer, { "data-component-name": "Footer/FooterColumns", className: className },
         react_1.default.createElement(exports.FooterRow, null, columns.map((column, index) => (react_1.default.createElement(FooterColumn_1.FooterColumn, { key: `${column.label}_${index}`, column: column }))))));
 }
 exports.FooterColumns = FooterColumns;

package/lib/components/Footer/FooterCopyright.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 interface FooterCopyrightProps {
     copyrightText: string;
+    className?: string;
 }
-export declare function FooterCopyright({ copyrightText }: FooterCopyrightProps): JSX.Element | null;
+export declare function FooterCopyright({ copyrightText, className, }: FooterCopyrightProps): JSX.Element | null;
 export {};

package/lib/components/Footer/FooterCopyright.js

@@ -7,12 +7,12 @@ exports.FooterCopyright = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const hooks_1 = require("../../mocks/hooks");
-function FooterCopyright({ copyrightText = '' }) {
+function FooterCopyright({ copyrightText = '', className, }) {
     const { translate } = (0, hooks_1.useTranslate)();
     const translationKeys = {
         copyrightText: 'theme.footer.copyrightText',
     };
-    return copyrightText ? (react_1.default.createElement(Wrapper, { "data-component-name": "Footer/FooterCopyright", "data-translation-key": translationKeys.copyrightText }, translate(translationKeys.copyrightText, copyrightText))) : null;
+    return copyrightText ? (react_1.default.createElement(Wrapper, { className: className, "data-component-name": "Footer/FooterCopyright", "data-translation-key": translationKeys.copyrightText }, translate(translationKeys.copyrightText, copyrightText))) : null;
 }
 exports.FooterCopyright = FooterCopyright;
 const Wrapper = styled_components_1.default.section `

package/lib/components/JsonViewer/JsonViewer.d.ts

@@ -12,6 +12,4 @@ export declare const JsonViewer: import("styled-components").StyledComponent<Rea
     'data-component-name': string;
 } & JsonProps, "data-component-name">;
 export declare const JsonViewerWrap: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledCodeBlock: import("styled-components").StyledComponent<"div", any, {
-    'data-component-name': string;
-}, "data-component-name">;
+export declare const StyledCodeBlock: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/LastUpdated/LastUpdated.d.ts

@@ -9,6 +9,7 @@ export interface LastUpdatedProps {
     lastModified: Date;
     format?: keyof typeof FORMATS;
     locale?: string;
+    className?: string;
 }
 export declare function LastUpdated(props: LastUpdatedProps): JSX.Element | null;
 export {};

package/lib/components/LastUpdated/LastUpdated.js

@@ -53,7 +53,7 @@ function LastUpdated(props) {
     const text = format === 'timeago'
         ? translate(translationKey, 'Last updated ')
         : translate(translationKey, 'Last updated on');
-    return (React.createElement(Wrapper, { "data-component-name": "LastUpdated/LastUpdated", rawOnPrint: format === 'timeago', "data-print-datetime": isoDate, "data-translation-key": translationKey },
+    return (React.createElement(Wrapper, { className: props.className, "data-component-name": "LastUpdated/LastUpdated", rawOnPrint: format === 'timeago', "data-print-datetime": isoDate, "data-translation-key": translationKey },
         text,
         React.createElement("time", { dateTime: isoDate }, lastUpdatedString)));
 }

package/lib/components/Markdown/ContainerWrapper.d.ts

@@ -1,5 +1,3 @@
 export declare const ContainerWrapper: import("styled-components").StyledComponent<"section", any, {
-    'data-component-name': string;
-} & {
     withToc: boolean;
-}, "data-component-name">;
+}, never>;

package/lib/components/Markdown/ContainerWrapper.js

@@ -5,8 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ContainerWrapper = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
-exports.ContainerWrapper = styled_components_1.default.section.attrs(() => ({
+exports.ContainerWrapper = styled_components_1.default.section.attrs(({ className }) => ({
     'data-component-name': 'Markdown/ContainerWrapper',
+    className,
 })) `
   max-width: var(--md-container-max-width);
   width: 90%;

package/lib/components/Markdown/Heading.d.ts

@@ -1,7 +1,8 @@
 import type { PropsWithChildren } from 'react';
-export declare function Heading({ level, id, children, 'data-source': dataSource, 'data-hash': dataHash, }: PropsWithChildren<{
+export declare function Heading({ level, id, children, 'data-source': dataSource, 'data-hash': dataHash, className, }: PropsWithChildren<{
     level: number;
     id: string;
     'data-source'?: string;
     'data-hash'?: string;
+    className?: string;
 }>): JSX.Element;

package/lib/components/Markdown/Heading.js

@@ -31,12 +31,12 @@ const icons_1 = require("../../icons");
  * Class name for all MD tags
  */
 const mdClassName = 'md';
-function Heading({ level, id, children, 'data-source': dataSource, 'data-hash': dataHash, }) {
+function Heading({ level, id, children, 'data-source': dataSource, 'data-hash': dataHash, className, }) {
     const linkEl = (react_1.default.createElement("a", { href: `#${id}`, className: (0, utils_1.concatClassNames)('anchor', 'before') },
         react_1.default.createElement(icons_1.AnchorIcon, null)));
     return (0, react_1.createElement)(`h${level}`, {
         id,
-        className: (0, utils_1.concatClassNames)('heading-anchor', mdClassName),
+        className: (0, utils_1.concatClassNames)('heading-anchor', mdClassName, className),
         'data-component-name': 'Markdown/Heading',
         'data-source': dataSource,
         'data-hash': dataHash,

package/lib/components/Markdown/MarkdownLayout.d.ts

@@ -13,6 +13,7 @@ type MarkdownLayoutProps = {
     lastModified?: string | null;
     nextPage?: ResolvedNavItemWithLink | null;
     prevPage?: ResolvedNavItemWithLink | null;
+    className?: string;
 };
-export declare function MarkdownLayout({ tableOfContent, markdownWrapper, feedback, editPage, lastModified, nextPage, prevPage, }: MarkdownLayoutProps): JSX.Element;
+export declare function MarkdownLayout({ tableOfContent, markdownWrapper, feedback, editPage, lastModified, nextPage, prevPage, className, }: MarkdownLayoutProps): JSX.Element;
 export {};

package/lib/components/Markdown/MarkdownLayout.js

@@ -14,7 +14,7 @@ const LastUpdated_1 = require("../../components/LastUpdated/LastUpdated");
 const hooks_1 = require("../../hooks");
 const hooks_2 = require("../../mocks/hooks");
 const Breadcrumbs_1 = require("../../components/Breadcrumbs");
-function MarkdownLayout({ tableOfContent, markdownWrapper, feedback, editPage, lastModified, nextPage, prevPage, }) {
+function MarkdownLayout({ tableOfContent, markdownWrapper, feedback, editPage, lastModified, nextPage, prevPage, className, }) {
     const { markdown } = (0, hooks_1.useThemeConfig)();
     const { translate } = (0, hooks_2.useTranslate)();
     const translationKeys = {
@@ -22,7 +22,7 @@ function MarkdownLayout({ tableOfContent, markdownWrapper, feedback, editPage, l
     };
     const { editPage: themeEditPage } = markdown || {};
     const mergedConf = editPage ? Object.assign(Object.assign({}, themeEditPage), editPage) : undefined;
-    return (react_1.default.createElement(PageWrapper_1.PageWrapper, { "data-component-name": "Markdown/MarkdownLayout" },
+    return (react_1.default.createElement(PageWrapper_1.PageWrapper, { "data-component-name": "Markdown/MarkdownLayout", className: className },
         react_1.default.createElement(ContainerWrapper_1.ContainerWrapper, { withToc: true },
             react_1.default.createElement(Breadcrumbs, null),
             react_1.default.createElement(LayoutTop, null,

package/lib/components/Markdown/MarkdownWrapper.d.ts

@@ -1,6 +1,4 @@
 import type { FlattenSimpleInterpolation } from 'styled-components';
 export declare const baseTable: FlattenSimpleInterpolation;
 export declare function headingAnchor(className?: string): FlattenSimpleInterpolation;
-export declare const MarkdownWrapper: import("styled-components").StyledComponent<"main", any, {
-    'data-component-name': string;
-}, "data-component-name">;
+export declare const MarkdownWrapper: import("styled-components").StyledComponent<"main", any, {}, never>;

package/lib/components/Markdown/MarkdownWrapper.js

@@ -138,8 +138,9 @@ function headingAnchor(className = 'anchor') {
   `;
 }
 exports.headingAnchor = headingAnchor;
-exports.MarkdownWrapper = styled_components_1.default.main.attrs(() => ({
+exports.MarkdownWrapper = styled_components_1.default.main.attrs(({ className }) => ({
     'data-component-name': 'Markdown/MarkdownWrapper',
+    className,
 })) `
   font-weight: var(--font-weight-regular);
   padding: 0;

package/lib/components/Markdown/Mermaid.d.ts

@@ -3,6 +3,7 @@ type MermaidProps = {
     diagramHtml: string;
     'data-source'?: string;
     'data-hash'?: string;
+    className?: string;
 };
-export declare function Mermaid({ diagramHtml, 'data-source': dataSource, 'data-hash': dataHash, }: MermaidProps): JSX.Element;
+export declare function Mermaid({ diagramHtml, 'data-source': dataSource, 'data-hash': dataHash, className, }: MermaidProps): JSX.Element;
 export {};