@redocly/theme 0.15.1 → 0.17.0

package/lib/globalStyle.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GlobalStyle = exports.styles = void 0;
 const styled_components_1 = require("styled-components");
+const media_css_1 = require("./mocks/media-css");
 const darkColors_1 = require("./ui/darkColors");
 const baseColors = (0, styled_components_1.css) `
   /* === Palette === */
@@ -1601,6 +1602,7 @@ const breadcrumbs = (0, styled_components_1.css) `
    */
 
   --breadcrumbs-text-color: var(--text-color-secondary); // @presenter Color
+  --breadcrumbs-font-size: var(--font-size-base); // @presenter FontSize
   --breadcrumbs-active-text-color: var(--text-color); // @presenter Color
   --breadcrumbs-hover-text-decoration: underline;
   --breadcrumbs-padding-horizontal: 8px; // @presenter Spacing
@@ -1608,6 +1610,50 @@ const breadcrumbs = (0, styled_components_1.css) `
 
   // @tokens End
 `;
+const mobileMenu = (0, styled_components_1.css) `
+    /**
+  * @tokens Mobile Menu icons
+  */
+    --mobile-menu-icons-size: 20px; // @presenter Spacing
+    --mobile-menu-search-icon-size: 18px; // @presenter Spacing
+
+    /**
+      * @tokens Mobile Menu
+      * */
+    --mobile-menu-padding-top: 13px; // @presenter Spacing
+    --mobile-menu-items-margin-top: 5px; // @presenter Spacing
+    --mobile-menu-burger-button-margin: 8px; // @presenter Spacing
+    --mobile-menu-background: #ffffff; // @presenter Color
+    --mobile-menu-profile-background: #ffffff; // @presenter Color
+    --mobile-menu-profile-border-color: #e3e3e3; // @presenter Color
+    --mobile-menu-group-padding-right: 16px; // @presenter Spacing
+    --mobile-menu-horizontal-margin: 8px; // @presenter Spacing
+    --mobile-menu-item-nested-offset: 8px; // @presenter Spacing
+    --mobile-menu-item-radius: 6px; // @presenter Spacing
+    --mobile-menu-item-text-color: #525252;// @presenter Color
+    --mobile-menu-item-active-color: #FAFAFA; // @presenter Color
+    --mobile-menu-item-active-text-color: #161616; // @presenter Color
+    
+    /**
+      * @tokens Mobile Menu control button
+      * */
+    --mobile-menu-control-button-padding-vertical: 0; // @presenter Spacing
+    --mobile-menu-control-button-padding-horizontal: 4px; // @presenter Spacing
+    --mobile-menu-control-button-margin-vertical: 0; // @presenter Spacing
+    --mobile-menu-control-button-margin-horizontal: 8px; // @presenter Spacing
+    --mobile-menu-control-button-font-size: var(--font-size-base); // @presenter FontSize
+    --mobile-menu-control-button-weight: var(--font-weight-regular); // @presenter FontWeight
+    --mobile-menu-control-button-color: var(--mobile-menu-item-text-color); // @presenter Color
+    --mobile-menu-control-button-hover-color: var(--text-color); // @presenter Color
+
+    /**
+      * @tokens Mobile Menu Login button
+      * */
+    --mobile-menu-login-button-background: #1c1c1c; // @presenter Color
+    --mobile-menu-login-button-color: #ffffff; // @presenter Color
+
+    // @tokens End
+`;
 const toc = (0, styled_components_1.css) `
   /**
     * @tokens TOC
@@ -1670,7 +1716,7 @@ const loadProgressBar = (0, styled_components_1.css) `
     background: var(--load-progress-bar-color);
 
     position: fixed;
-    z-index: 1031;
+    z-index: var(--z-index-popover);
     top: 0;
     left: 0;
 
@@ -1998,7 +2044,7 @@ const userProfile = (0, styled_components_1.css) `
    --profile-avatar-border-radius: 50%; // @presenter BorderRadius
 
    --profile-avatar-font-family: var(--navbar-item-font-family); // @presenter FontFamily
-   --profile-avatar-font-size: var(--navbar-item-font-size) // @presenter FontSize
+   --profile-avatar-font-size: var(--navbar-item-font-size); // @presenter FontSize
    --profile-avatar-font-weight: var(--font-weight-regular); // @presenter FontWeight
    --profile-avatar-line-height: var(--line-height-base); // @presenter LineHeight
 
@@ -2046,6 +2092,12 @@ const modal = (0, styled_components_1.css) `
   --modal-overlay-background-color: rgba(206, 206, 206, 0.49);
   --modal-background-color: var(--background-color);
 `;
+const zIndexDepth = (0, styled_components_1.css) `
+  --z-index-surface: 10;
+  --z-index-raised: 100;
+  --z-index-popover: 200;
+  --z-index-overlay: 1000;
+`;
 exports.styles = (0, styled_components_1.css) `
   :root {
     ${baseColors}
@@ -2058,6 +2110,7 @@ exports.styles = (0, styled_components_1.css) `
     ${buttons}
     ${sidebar}
     ${navbar}
+    ${mobileMenu}
     ${footer}
     ${logo}
     ${badges}
@@ -2078,6 +2131,7 @@ exports.styles = (0, styled_components_1.css) `
     ${pages}
     ${modal}
     ${userProfile}
+    ${zIndexDepth}
 
     --api-onboarding-table-text-color: #4e5356;
     --api-catalog-card-min-width: 250px;
@@ -2096,6 +2150,12 @@ exports.styles = (0, styled_components_1.css) `
   :root.notransition * {
     transition: none !important;
   }
+  
+  @media screen and (max-width: ${media_css_1.breakpoints.medium}) {
+    body.overflow-hidden {
+      overflow: hidden;
+    }
+  }
 `;
 exports.GlobalStyle = (0, styled_components_1.createGlobalStyle) `
   ${exports.styles};

package/lib/hooks/useMobileMenu.js

@@ -6,7 +6,13 @@ const react_router_dom_1 = require("react-router-dom");
 function useMobileMenu(initialState = false) {
     const location = (0, react_router_dom_1.useLocation)();
     const [isOpen, setIsOpen] = (0, react_1.useState)(initialState);
-    (0, react_1.useEffect)(() => setIsOpen(false), [location.pathname]);
+    (0, react_1.useEffect)(() => setIsOpen(false), [location.pathname, location.hash]);
+    (0, react_1.useEffect)(() => {
+        if (isOpen)
+            document.body.classList.add('overflow-hidden');
+        else
+            document.body.classList.remove('overflow-hidden');
+    }, [isOpen]);
     return [isOpen, setIsOpen];
 }
 exports.useMobileMenu = useMobileMenu;

package/lib/icons/BurgerIcon/BurgerIcon.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const Icon: () => JSX.Element;
+export declare const BurgerIcon: import("styled-components").StyledComponent<() => JSX.Element, any, {
+    'data-component-name': string;
+}, "data-component-name">;

package/lib/icons/BurgerIcon/BurgerIcon.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BurgerIcon = exports.Icon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Icon = () => (react_1.default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "inherit", xmlns: "http://www.w3.org/2000/svg" },
+    react_1.default.createElement("path", { d: "M21.1875 3.75H2.8125C2.70937 3.75 2.625 3.83437 2.625 3.9375V5.4375C2.625 5.54062 2.70937 5.625 2.8125 5.625H21.1875C21.2906 5.625 21.375 5.54062 21.375 5.4375V3.9375C21.375 3.83437 21.2906 3.75 21.1875 3.75ZM21.1875 18.375H2.8125C2.70937 18.375 2.625 18.4594 2.625 18.5625V20.0625C2.625 20.1656 2.70937 20.25 2.8125 20.25H21.1875C21.2906 20.25 21.375 20.1656 21.375 20.0625V18.5625C21.375 18.4594 21.2906 18.375 21.1875 18.375ZM21.1875 11.0625H2.8125C2.70937 11.0625 2.625 11.1469 2.625 11.25V12.75C2.625 12.8531 2.70937 12.9375 2.8125 12.9375H21.1875C21.2906 12.9375 21.375 12.8531 21.375 12.75V11.25C21.375 11.1469 21.2906 11.0625 21.1875 11.0625Z" })));
+exports.Icon = Icon;
+exports.BurgerIcon = (0, styled_components_1.default)(exports.Icon).attrs(() => ({
+    'data-component-name': 'icons/BurgerIcon/BurgerIcon',
+})) ``;
+//# sourceMappingURL=BurgerIcon.js.map

package/lib/icons/BurgerIcon/index.d.ts

@@ -0,0 +1 @@
+export { BurgerIcon } from '../../icons/BurgerIcon/BurgerIcon';

package/lib/icons/BurgerIcon/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BurgerIcon = void 0;
+var BurgerIcon_1 = require("../../icons/BurgerIcon/BurgerIcon");
+Object.defineProperty(exports, "BurgerIcon", { enumerable: true, get: function () { return BurgerIcon_1.BurgerIcon; } });
+//# sourceMappingURL=index.js.map

package/lib/icons/CloseIcon/CloseIcon.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const Icon: () => JSX.Element;
+export declare const CloseIcon: import("styled-components").StyledComponent<() => JSX.Element, any, {
+    'data-component-name': string;
+}, "data-component-name">;

package/lib/icons/CloseIcon/CloseIcon.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CloseIcon = exports.Icon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Icon = () => (react_1.default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "inherit", xmlns: "http://www.w3.org/2000/svg" },
+    react_1.default.createElement("rect", { width: "24", height: "24", fill: "none" }),
+    react_1.default.createElement("path", { d: "M18 7.05L16.95 6L12 10.95L7.05 6L6 7.05L10.95 12L6 16.95L7.05 18L12 13.05L16.95 18L18 16.95L13.05 12L18 7.05Z" })));
+exports.Icon = Icon;
+exports.CloseIcon = (0, styled_components_1.default)(exports.Icon).attrs(() => ({
+    'data-component-name': 'icons/CloseIcon/CloseIcon',
+})) ``;
+//# sourceMappingURL=CloseIcon.js.map

package/lib/icons/CloseIcon/index.d.ts

@@ -0,0 +1 @@
+export { CloseIcon } from '../../icons/CloseIcon/CloseIcon';

package/lib/icons/CloseIcon/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CloseIcon = void 0;
+var CloseIcon_1 = require("../../icons/CloseIcon/CloseIcon");
+Object.defineProperty(exports, "CloseIcon", { enumerable: true, get: function () { return CloseIcon_1.CloseIcon; } });
+//# sourceMappingURL=index.js.map

package/lib/icons/ColorModeIcon/ColorModeIcon.js

@@ -22,8 +22,12 @@ function Icon({ mode, className }) {
 exports.ColorModeIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
     'data-component-name': 'icons/ColorModeIcon/ColorModeIcon',
 })) `
-  width: var(--navbar-item-font-size);
+  width: var(--mobile-menu-icons-size);
   box-sizing: border-box;
   fill: var(--navbar-text-color);
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    width: var(--navbar-item-font-size);
+  }
 `;
 //# sourceMappingURL=ColorModeIcon.js.map

package/lib/icons/ExpandIcon/ExpandIcon.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export interface ArrowIconProps {
+    direction?: 'up' | 'right' | 'left' | 'down';
+    visibility?: 'visible' | 'hidden';
+}
+export declare const ExpandIcon: import("styled-components").StyledComponent<({ className }: {
+    className?: string | undefined;
+}) => JSX.Element, any, ArrowIconProps, never>;

package/lib/icons/ExpandIcon/ExpandIcon.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExpandIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+function directionToTransform({ direction }) {
+    switch (direction) {
+        case 'up':
+            return 180;
+        case 'right':
+            return -90;
+        case 'left':
+            return 90;
+        default:
+            return 0;
+    }
+}
+const Icon = ({ className }) => (react_1.default.createElement("span", { "data-component-name": "icons/ExpandIcon/ExpandIcon" },
+    react_1.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className },
+        react_1.default.createElement("path", { d: "M8 11L3 5.99999L3.7 5.29999L8 9.59999L12.3 5.29999L13 5.99999L8 11Z", fill: "inherit" }))));
+exports.ExpandIcon = (0, styled_components_1.default)(Icon) `
+  fill: var(--sidebar-group-item-chevron-color);
+  transform: rotate(${directionToTransform}deg);
+  visibility: ${({ visibility = 'visible' }) => visibility};
+
+  vertical-align: middle;
+`;
+//# sourceMappingURL=ExpandIcon.js.map

package/lib/icons/ExpandIcon/index.d.ts

@@ -0,0 +1 @@
+export { ExpandIcon } from '../../icons/ExpandIcon/ExpandIcon';

package/lib/icons/ExpandIcon/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExpandIcon = void 0;
+var ExpandIcon_1 = require("../../icons/ExpandIcon/ExpandIcon");
+Object.defineProperty(exports, "ExpandIcon", { enumerable: true, get: function () { return ExpandIcon_1.ExpandIcon; } });
+//# sourceMappingURL=index.js.map

package/lib/icons/LogoutIcon/LogoutIcon.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const Icon: () => JSX.Element;
+export declare const LogoutIcon: import("styled-components").StyledComponent<() => JSX.Element, any, {
+    'data-component-name': string;
+}, "data-component-name">;

package/lib/icons/LogoutIcon/LogoutIcon.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LogoutIcon = exports.Icon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Icon = () => (react_1.default.createElement("svg", { width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    react_1.default.createElement("rect", { width: "18", height: "18", transform: "translate(11 11)" }),
+    react_1.default.createElement("path", { d: "M14.375 27.875H21.125C21.4233 27.8747 21.7092 27.756 21.9201 27.5451C22.131 27.3342 22.2497 27.0483 22.25 26.75V25.0625H21.125V26.75H14.375V13.25H21.125V14.9375H22.25V13.25C22.2497 12.9517 22.131 12.6658 21.9201 12.4549C21.7092 12.244 21.4233 12.1253 21.125 12.125H14.375C14.0767 12.1253 13.7908 12.244 13.5799 12.4549C13.369 12.6658 13.2503 12.9517 13.25 13.25V26.75C13.2503 27.0483 13.369 27.3342 13.5799 27.5451C13.7908 27.756 14.0767 27.8747 14.375 27.875Z", fill: "#FF4D6D" }),
+    react_1.default.createElement("path", { d: "M22.5796 22.5796L24.5968 20.5625H16.625V19.4375H24.5968L22.5796 17.4204L23.375 16.625L26.75 20L23.375 23.375L22.5796 22.5796Z", fill: "#FF4D6D" })));
+exports.Icon = Icon;
+exports.LogoutIcon = (0, styled_components_1.default)(exports.Icon).attrs(() => ({
+    'data-component-name': 'icons/LogoutIcon/LogoutIcon',
+})) ``;
+//# sourceMappingURL=LogoutIcon.js.map

package/lib/icons/LogoutIcon/index.d.ts

@@ -0,0 +1 @@
+export { LogoutIcon } from '../../icons/LogoutIcon/LogoutIcon';

package/lib/icons/LogoutIcon/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LogoutIcon = void 0;
+var LogoutIcon_1 = require("../../icons/LogoutIcon/LogoutIcon");
+Object.defineProperty(exports, "LogoutIcon", { enumerable: true, get: function () { return LogoutIcon_1.LogoutIcon; } });
+//# sourceMappingURL=index.js.map

package/lib/icons/index.d.ts

@@ -5,3 +5,7 @@ export * from '../icons/ColorModeIcon';
 export * from '../icons/AnchorIcon';
 export * from '../icons/ExternalIcon';
 export * from '../icons/SpinnerIcon';
+export * from '../icons/BurgerIcon';
+export * from '../icons/CloseIcon';
+export * from '../icons/LogoutIcon';
+export * from '../icons/ExpandIcon';

package/lib/icons/index.js

@@ -21,4 +21,8 @@ __exportStar(require("../icons/ColorModeIcon"), exports);
 __exportStar(require("../icons/AnchorIcon"), exports);
 __exportStar(require("../icons/ExternalIcon"), exports);
 __exportStar(require("../icons/SpinnerIcon"), exports);
+__exportStar(require("../icons/BurgerIcon"), exports);
+__exportStar(require("../icons/CloseIcon"), exports);
+__exportStar(require("../icons/LogoutIcon"), exports);
+__exportStar(require("../icons/ExpandIcon"), exports);
 //# sourceMappingURL=index.js.map

package/lib/mocks/Sidebar/useSidebarItems.d.ts

@@ -0,0 +1,3 @@
+import type { ItemState } from '../../components/Sidebar/types';
+import type { Version } from '../../types/portal';
+export declare function useSidebarItems(_?: Version): ItemState[];

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);
+  --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,7 +1,7 @@
 {
   "name": "@redocly/theme",
-  "version": "0.15.1",
-  "description": "Shared UI components library",
+  "version": "0.17.0",
+  "description": "Shared UI components lib",
   "keywords": [
     "theme",
     "redocly"
@@ -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>