@redocly/theme 0.15.1 → 0.16.0

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

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

package/lib/components/Search/Popover.js

@@ -5,13 +5,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Popover = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
-exports.Popover = styled_components_1.default.div.attrs(() => ({
+exports.Popover = styled_components_1.default.div.attrs(({ className }) => ({
     'data-component-name': 'Search/Popover',
+    className,
 })) `
   position: absolute;
   top: calc(100% + 10px);
   right: 0;
-  z-index: 100;
+  z-index: var(--z-index-raised);
   min-width: 100%;
   max-width: 90vw;
   max-height: 400px;

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

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

package/lib/components/Search/RecentSearches.js

@@ -33,7 +33,7 @@ const ClockBackwardsIcon_1 = require("../../components/Search/ClockBackwardsIcon
 const ClearIcon_1 = require("../../components/Search/ClearIcon");
 const search_1 = require("../../mocks/search");
 const hooks_1 = require("../../mocks/hooks");
-function RecentSearches({ onSelect }) {
+function RecentSearches({ onSelect, className, }) {
     const { items, removeSearchHistoryItem } = (0, search_1.useRecentSearches)();
     const { translate } = (0, hooks_1.useTranslate)();
     const translationKeys = {
@@ -50,7 +50,7 @@ function RecentSearches({ onSelect }) {
             onSelect(item);
         }
     };
-    return (React.createElement(Wrapper, { "data-component-name": "Search/RecentSearches" },
+    return (React.createElement(Wrapper, { "data-component-name": "Search/RecentSearches", className: className },
         React.createElement(Title, { "data-translation-key": translationKeys.title }, translate(translationKeys.title, 'Recent searches')),
         React.createElement(RecentItems, null, items.map((item) => (React.createElement(Item, { key: item, onClick: () => onSelect(item), onKeyDown: (e) => handleKeyDown(e, item), tabIndex: 0, role: "link" },
             React.createElement(Group, null,
@@ -85,7 +85,7 @@ const ClearIcon = (0, styled_components_1.default)(ClearIcon_1.ClearIcon) `
   display: inline;
   width: 10px;
   height: 10px;
-  fill: var(--search-item-active-text-color))
+  fill: var(--search-item-active-text-color);
 `;
 const Item = styled_components_1.default.div `
   display: flex;

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

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

package/lib/components/Search/Search.js

@@ -35,7 +35,7 @@ const SearchTrigger_1 = require("../../components/Search/SearchTrigger");
 const MobileSearchTrigger_1 = require("../../components/Search/MobileSearchTrigger");
 const SearchDialog_1 = require("../../components/Search/SearchDialog");
 const hooks_1 = require("../../hooks");
-function Search() {
+function Search({ className }) {
     var _a, _b;
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const themeSettings = (0, hooks_1.useThemeConfig)();
@@ -55,7 +55,7 @@ function Search() {
         setIsOpen(false);
     }, []);
     (0, react_1.useEffect)(onClose, [location, onClose]);
-    return (react_1.default.createElement(Wrapper, { "data-component-name": "Search/Search" },
+    return (react_1.default.createElement(Wrapper, { "data-component-name": "Search/Search", className: className },
         react_1.default.createElement(SearchTrigger_1.SearchTrigger, { onClick: () => setIsOpen(true) }),
         react_1.default.createElement(MobileSearchTrigger_1.MobileSearchTrigger, { onClick: () => setIsOpen(true) }),
         isOpen && react_1.default.createElement(SearchDialog_1.SearchDialog, { onClose: onClose })));

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
-export declare const SearchDialog: ({ onClose }: {
+export declare const SearchDialog: ({ onClose, className, }: {
     onClose: () => void;
+    className?: string | undefined;
 }) => JSX.Element;

package/lib/components/Search/SearchDialog.js

@@ -29,6 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SearchDialog = void 0;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../utils");
 const search_1 = require("../../mocks/search");
 const InputWrapper_1 = require("../../components/Search/InputWrapper");
 const SearchItem_1 = require("../../components/Search/SearchItem");
@@ -38,7 +39,7 @@ const RecentSearches_1 = require("../../components/Search/RecentSearches");
 const SuggestedPages_1 = require("../../components/Search/SuggestedPages");
 const CancelSearch_1 = require("../../components/Search/CancelSearch");
 const useDialogHotKeys_1 = require("../../hooks/useDialogHotKeys");
-const SearchDialog = ({ onClose }) => {
+const SearchDialog = ({ onClose, className, }) => {
     const { query, setQuery, items, isLoading } = (0, search_1.useFuseSearch)();
     const modalRef = (0, react_1.useRef)(null);
     const { translate } = (0, hooks_1.useTranslate)();
@@ -61,7 +62,7 @@ const SearchDialog = ({ onClose }) => {
     const mapItem = (item) => {
         return react_1.default.createElement(SearchItem_1.SearchItem, { key: item.id, item: item });
     };
-    return (react_1.default.createElement(Overlay, { "data-component-name": "Search/SearchDialog", ref: modalRef, onClick: handleOverlayClick, className: "overlay" },
+    return (react_1.default.createElement(Overlay, { "data-component-name": "Search/SearchDialog", ref: modalRef, onClick: handleOverlayClick, className: (0, utils_1.concatClassNames)('overlay', className) },
         react_1.default.createElement(Container, null,
             react_1.default.createElement(TopContainer, null,
                 react_1.default.createElement(InputWrapper_1.InputWrapper, { value: query, change: setQuery, placeholder: translate('theme.search.label', 'Search docs...'), isLoading: isLoading })),
@@ -84,7 +85,7 @@ const Overlay = 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/Search/SearchIcon.d.ts

@@ -1,4 +1,2 @@
 import type { SVGProps } from 'react';
-export declare const SearchIcon: import("styled-components").StyledComponent<(props: SVGProps<SVGSVGElement>) => JSX.Element, any, {
-    'data-component-name': string;
-}, "data-component-name">;
+export declare const SearchIcon: import("styled-components").StyledComponent<(props: SVGProps<SVGSVGElement>) => JSX.Element, any, {}, never>;

package/lib/components/Search/SearchIcon.js

@@ -8,8 +8,9 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", version: "1.1", x: "0", y: "0", viewBox: "0 0 490 490", "data-component-name": "Search/SearchIcon" }, props),
     react_1.default.createElement("path", { d: "M484 455.2L366.2 337.4c29.2-35.6 46.8-81.2 46.8-130.9C413 92.5 320.5 0 206.5 0 92.4 0 0 92.5 0 206.5S92.4 413 206.5 413c49.7 0 95.2-17.5 130.8-46.7L455.1 484c8 8 20.9 8 28.9 0C492 476.1 492 463.1 484 455.2zM206.5 371.9C115.2 371.9 41 297.7 41 206.5S115.2 41 206.5 41C297.7 41 372 115.3 372 206.5S297.7 371.9 206.5 371.9z" })));
-exports.SearchIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+exports.SearchIcon = (0, styled_components_1.default)(Icon).attrs(({ className }) => ({
     'data-component-name': 'Search/SearchIcon',
+    className,
 })) `
   cursor: pointer;
   width: 1em;

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

@@ -3,6 +3,7 @@ import type { ActiveItem } from '../../types/portal/src/shared/types/activeItem'
 import type { SearchDocument } from '../../types/portal/src/shared/types/searchDocument';
 interface SearchItemProps {
     item: ActiveItem<SearchDocument>;
+    className?: string;
 }
-export declare function SearchItem({ item }: SearchItemProps): JSX.Element;
+export declare function SearchItem({ item, className }: SearchItemProps): JSX.Element;
 export {};

package/lib/components/Search/SearchItem.js

@@ -32,7 +32,7 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const OperationBadge_1 = require("../../components/OperationBadge");
 const Link_1 = require("../../mocks/Link");
 const utils_1 = require("../../components/Search/utils");
-function SearchItem({ item }) {
+function SearchItem({ item, className }) {
     var _a, _b;
     const ref = (0, react_1.useRef)();
     (0, react_1.useEffect)(() => {
@@ -50,14 +50,14 @@ function SearchItem({ item }) {
     return (react_1.default.createElement(react_1.default.Fragment, null, ((_a = item.parameters) === null || _a === void 0 ? void 0 : _a.length) ? (react_1.default.createElement(react_1.default.Fragment, null, item.parameters.map((param, index) => {
         var _a, _b;
         const path = `${param.place} → ${((_a = param.path) === null || _a === void 0 ? void 0 : _a.length) ? ((_b = param.path) === null || _b === void 0 ? void 0 : _b.join(' → ')) + ' → ' : ''}`;
-        return (react_1.default.createElement(SearchLink, { key: `${item.id}-${index}`, to: item.url, tabIndex: 0, innerRef: ref, "data-component-name": "Search/SearchItem" },
+        return (react_1.default.createElement(SearchLink, { className: className, key: `${item.id}-${index}`, to: item.url, tabIndex: 0, innerRef: ref, "data-component-name": "Search/SearchItem" },
             header,
             react_1.default.createElement(Place, null,
                 react_1.default.createElement("div", null,
                     path,
                     (0, utils_1.highlight)(param.name)),
                 react_1.default.createElement("div", null, (0, utils_1.highlight)(param.description)))));
-    }))) : (react_1.default.createElement(SearchLink, { to: item.url, tabIndex: 0, innerRef: ref, "data-component-name": "Search/SearchItem" },
+    }))) : (react_1.default.createElement(SearchLink, { className: className, to: item.url, tabIndex: 0, innerRef: ref, "data-component-name": "Search/SearchItem" },
         header,
         react_1.default.createElement(Path, null, (_b = item.path) === null || _b === void 0 ? void 0 : _b.join(' → '))))));
 }

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

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

package/lib/components/Search/SearchTrigger.js

@@ -30,7 +30,7 @@ const hooks_1 = require("../../hooks");
 const hooks_2 = require("../../mocks/hooks");
 const SearchIcon_1 = require("../../components/Search/SearchIcon");
 const ShortcutKey_1 = require("../../components/Search/ShortcutKey");
-function SearchTrigger({ onClick }) {
+function SearchTrigger({ onClick, className, }) {
     var _a, _b;
     const themeSettings = (0, hooks_1.useThemeConfig)();
     const { translate } = (0, hooks_2.useTranslate)();
@@ -38,7 +38,7 @@ function SearchTrigger({ onClick }) {
         label: 'theme.search.navbar.label',
     };
     const keyShortcuts = (_b = (_a = themeSettings === null || themeSettings === void 0 ? void 0 : themeSettings.search) === null || _a === void 0 ? void 0 : _a.shortcuts) !== null && _b !== void 0 ? _b : ['/'];
-    return (React.createElement(Wrapper, { "data-component-name": "Search/SearchTrigger", onClick: onClick },
+    return (React.createElement(Wrapper, { "data-component-name": "Search/SearchTrigger", onClick: onClick, className: className },
         React.createElement(SearchIconSmall, null),
         React.createElement(Label, { "data-translation-key": translationKeys.label }, translate(translationKeys.label, 'Search')),
         React.createElement(ShortcutKey_1.ShortcutKey, { keyShortcuts: keyShortcuts })));

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

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

package/lib/components/Search/Shortcut.js

@@ -29,8 +29,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Shortcut = void 0;
 const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-function Shortcut({ combination, text, }) {
-    return (React.createElement(Wrapper, { "data-component-name": "Search/Shortcut" },
+function Shortcut({ combination, text, className, }) {
+    return (React.createElement(Wrapper, { "data-component-name": "Search/Shortcut", className: className },
         React.createElement(Key, null, combination),
         text));
 }

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 interface ShortcutKeyProps {
     keyShortcuts?: string | string[];
+    className?: string;
 }
 export declare function ShortcutKey(props: ShortcutKeyProps): JSX.Element;
 export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/Search/ShortcutKey.js

@@ -17,7 +17,7 @@ function ShortcutKey(props) {
         }
     }
     mainShortcutKey = mainShortcutKey === null || mainShortcutKey === void 0 ? void 0 : mainShortcutKey.toUpperCase();
-    return react_1.default.createElement(exports.Wrapper, null, mainShortcutKey);
+    return react_1.default.createElement(exports.Wrapper, { className: props.className }, mainShortcutKey);
 }
 exports.ShortcutKey = ShortcutKey;
 exports.Wrapper = styled_components_1.default.div `

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

@@ -1,4 +1,2 @@
 import { Search } from '../../components/Search/Search';
-export declare const SidebarSearch: import("styled-components").StyledComponent<typeof Search, any, {
-    'data-component-name': string;
-}, "data-component-name">;
+export declare const SidebarSearch: import("styled-components").StyledComponent<typeof Search, any, {}, never>;

package/lib/components/Search/SidebarSearch.js

@@ -7,8 +7,9 @@ exports.SidebarSearch = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
 const Search_1 = require("../../components/Search/Search");
 const Popover_1 = require("../../components/Search/Popover");
-exports.SidebarSearch = (0, styled_components_1.default)(Search_1.Search).attrs(() => ({
+exports.SidebarSearch = (0, styled_components_1.default)(Search_1.Search).attrs(({ className }) => ({
     'data-component-name': 'Search/SidebarSearch',
+    className,
 })) `
   --search-input-text-color: var(--sidebar-item-active-color);
 

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

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

package/lib/components/Search/SuggestedPages.js

@@ -33,7 +33,7 @@ const ClockBackwardsIcon_1 = require("../../components/Search/ClockBackwardsIcon
 const search_1 = require("../../mocks/search");
 const Link_1 = require("../../mocks/Link");
 const hooks_1 = require("../../mocks/hooks");
-function SuggestedPages() {
+function SuggestedPages({ className }) {
     const pages = (0, search_1.useSuggestedPages)();
     const { translate } = (0, hooks_1.useTranslate)();
     const translationKeys = {
@@ -41,7 +41,7 @@ function SuggestedPages() {
     };
     if (!pages.length)
         return null;
-    return (React.createElement(Wrapper, { "data-component-name": "Search/SuggestedPages" },
+    return (React.createElement(Wrapper, { "data-component-name": "Search/SuggestedPages", className: className },
         React.createElement(Title, { "data-translation-key": translationKeys.title }, translate(translationKeys.title, 'Suggested pages')),
         React.createElement(SuggestedItems, null, pages.map((page) => page.link && (React.createElement(Item, { key: page.label },
             React.createElement(PageLink, Object.assign({ to: page.link }, page),

package/lib/components/Separator/Separator.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import type { MenuItemProps } from '../../components/Sidebar/types';
-export declare function Separator({ item }: MenuItemProps): JSX.Element;
+export declare function Separator({ item, className }: MenuItemProps): JSX.Element;

package/lib/components/Separator/Separator.js

@@ -9,9 +9,9 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const SeparatorLine_1 = require("../../components/Separator/SeparatorLine");
 const SeparatorItem_1 = require("../../components/Separator/SeparatorItem");
 const hooks_1 = require("../../mocks/hooks");
-function Separator({ item }) {
+function Separator({ item, className }) {
     const { translate } = (0, hooks_1.useTranslate)();
-    return (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/Separator" },
+    return (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/Separator", className: className },
         react_1.default.createElement(SeparatorItem_1.SeparatorItem, null, translate(item.labelTranslationKey, item.label)),
         item.separatorLine ? react_1.default.createElement(SeparatorLine_1.SeparatorLine, null) : null));
 }

package/lib/components/Separator/SeparatorItem.d.ts

@@ -1,7 +1,3 @@
 export declare const SeparatorItem: import("styled-components").StyledComponent<"li", any, {
-    'data-component-name': string;
-} & {
     active?: boolean | undefined;
-} & {
-    'data-component-name': string;
-}, "data-component-name">;
+}, never>;

package/lib/components/Separator/SeparatorItem.js

@@ -6,8 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SeparatorItem = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
 const MenuItemLabel_1 = require("../../components/Menu/MenuItemLabel");
-exports.SeparatorItem = (0, styled_components_1.default)(MenuItemLabel_1.MenuItemLabel).attrs(() => ({
+exports.SeparatorItem = (0, styled_components_1.default)(MenuItemLabel_1.MenuItemLabel).attrs(({ className }) => ({
     'data-component-name': 'Sidebar/SeparatorItem',
+    className,
 })) `
   cursor: default;
   font-weight: var(--font-weight-bold);
@@ -15,7 +16,11 @@ exports.SeparatorItem = (0, styled_components_1.default)(MenuItemLabel_1.MenuIte
   font-family: var(--sidebar-item-separator-font-family);
   font-size: var(--sidebar-item-separator-font-size);
   text-transform: var(--sidebar-item-separator-text-transform);
-  background: var(--sidebar-item-separator-background-color);
+  background: var(--mobile-menu-background);
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    background: var(--sidebar-item-separator-background-color);
+  }
 
   *:not(:first-child) > & {
     margin-top: var(--sidebar-item-separator-offset);

package/lib/components/Separator/SeparatorLine.d.ts

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

package/lib/components/Separator/SeparatorLine.js

@@ -5,8 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SeparatorLine = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
-exports.SeparatorLine = styled_components_1.default.div.attrs(() => ({
+exports.SeparatorLine = styled_components_1.default.div.attrs(({ className }) => ({
     'data-component-name': 'Sidebar/SeparatorLine',
+    className,
 })) `
   height: 1px;
   background-color: var(--sidebar-item-separator-line-color);

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { MenuItemProps } from '../../components/Sidebar/types';
-export declare function ApiCallItem({ item }: MenuItemProps): JSX.Element;
+export declare function ApiCallItem({ item, className }: MenuItemProps): JSX.Element;
 export declare const Badge: import("styled-components").StyledComponent<"span", any, {
     className: `operation-type ${string}`;
     'data-component-name': string;

package/lib/components/Sidebar/ApiCallItem.js

@@ -10,15 +10,22 @@ const OperationBadge_1 = require("../../components/OperationBadge");
 const MenuLinkItem_1 = require("../../components/Menu/MenuLinkItem");
 const SeparatorLine_1 = require("../../components/Separator/SeparatorLine");
 const MenuItemLabel_1 = require("../../components/Menu/MenuItemLabel");
-function ApiCallItem({ item }) {
-    return (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/ApiCallItem" },
+function ApiCallItem({ item, className }) {
+    return (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/ApiCallItem", className: className },
         react_1.default.createElement(MenuLinkItem_1.MenuLinkItem, { item: item },
-            react_1.default.createElement(MenuItemLabel_1.MenuItemLabel, { active: item.active },
+            react_1.default.createElement(Label, { active: item.active },
                 react_1.default.createElement(exports.Badge, { type: item.httpVerb || '' }, item.httpVerb === 'hook' ? 'event' : item.httpVerb),
                 item.label)),
         item.separatorLine ? react_1.default.createElement(SeparatorLine_1.SeparatorLine, null) : null));
 }
 exports.ApiCallItem = ApiCallItem;
+const Label = (0, styled_components_1.default)(MenuItemLabel_1.MenuItemLabel) `
+  color: var(--mobile-menu-item-text-color);
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    color: var(--sidebar-item-text-color);
+  }
+`;
 const Wrapper = styled_components_1.default.div ``;
 exports.Badge = (0, styled_components_1.default)(OperationBadge_1.OperationBadge) `
   flex-shrink: 0;

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

@@ -1,6 +1,7 @@
 import React from 'react';
 interface BackButtonProps {
     back: () => void;
+    className?: string;
 }
-export declare function BackButton({ children, back, }: React.PropsWithChildren<BackButtonProps>): JSX.Element;
+export declare function BackButton({ children, back, className, }: React.PropsWithChildren<BackButtonProps>): JSX.Element;
 export {};

package/lib/components/Sidebar/BackButton.js

@@ -7,8 +7,8 @@ exports.BackButton = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const ArrowBack_1 = require("../../ui/ArrowBack");
-function BackButton({ children, back, }) {
-    return (react_1.default.createElement(Button, { onClick: back, "data-component-name": "Sidebar/BackButton" },
+function BackButton({ children, back, className, }) {
+    return (react_1.default.createElement(Button, { onClick: back, "data-component-name": "Sidebar/BackButton", className: className },
         react_1.default.createElement(ArrowBack_1.ArrowBack, { dataComponentName: "Sidebar/ArrowBack" }),
         children));
 }

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

@@ -3,6 +3,7 @@ import type { DrilldownMenuProps } from '../../components/Sidebar/types';
 interface DrilldownProps extends DrilldownMenuProps {
     isExpanded: boolean;
     expand: () => void;
+    className?: string;
 }
-export declare function Drilldown({ isExpanded, item, expand, ...props }: React.PropsWithChildren<DrilldownProps>): JSX.Element;
+export declare function Drilldown({ isExpanded, item, expand, className, ...props }: React.PropsWithChildren<DrilldownProps>): JSX.Element;
 export {};

package/lib/components/Sidebar/Drilldown.js

@@ -22,8 +22,8 @@ const SeparatorLine_1 = require("../../components/Separator/SeparatorLine");
 const DrilldownMenuItem_1 = require("../../components/Sidebar/DrilldownMenuItem");
 const DrilldownMenu_1 = require("../../components/Sidebar/DrilldownMenu");
 function Drilldown(_a) {
-    var { isExpanded, item, expand } = _a, props = __rest(_a, ["isExpanded", "item", "expand"]);
-    return (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/Drilldown" },
+    var { isExpanded, item, expand, className } = _a, props = __rest(_a, ["isExpanded", "item", "expand", "className"]);
+    return (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/Drilldown", className: className },
         react_1.default.createElement(DrilldownLabel, { onClick: expand },
             react_1.default.createElement(DrilldownMenuItem_1.DrilldownMenuItem, { item: item })),
         isExpanded ? react_1.default.createElement(DrilldownMenu_1.DrilldownMenu, Object.assign({ item: item }, props)) : null,

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

@@ -1,3 +1,3 @@
 import React from 'react';
 import type { DrilldownMenuProps } from '../../components/Sidebar/types';
-export declare function DrilldownMenu({ item, back, prevActiveItem, children, }: React.PropsWithChildren<DrilldownMenuProps>): JSX.Element;
+export declare function DrilldownMenu({ item, back, prevActiveItem, children, className, }: React.PropsWithChildren<DrilldownMenuProps>): JSX.Element;

package/lib/components/Sidebar/DrilldownMenu.js

@@ -32,12 +32,12 @@ const styled_components_1 = __importStar(require("styled-components"));
 const BackButton_1 = require("../../components/Sidebar/BackButton");
 const DrilldownMenuItem_1 = require("../../components/Sidebar/DrilldownMenuItem");
 const hooks_1 = require("../../mocks/hooks");
-function DrilldownMenu({ item, back, prevActiveItem, children, }) {
+function DrilldownMenu({ item, back, prevActiveItem, children, className, }) {
     const { translate } = (0, hooks_1.useTranslate)();
     const translationKeys = {
         backLabel: 'theme.sidebar.menu.backLabel',
     };
-    return (react_1.default.createElement(MenuContainer, { "data-component-name": "Sidebar/DrilldownMenu" },
+    return (react_1.default.createElement(MenuContainer, { "data-component-name": "Sidebar/DrilldownMenu", className: className },
         react_1.default.createElement(MenuContent, null,
             react_1.default.createElement(MenuWrapper, null,
                 react_1.default.createElement(BackButton_1.BackButton, { back: back, "data-translation-key": translationKeys.backLabel }, (prevActiveItem === null || prevActiveItem === void 0 ? void 0 : prevActiveItem.label) || translate(translationKeys.backLabel, 'Back')),
@@ -50,7 +50,7 @@ const MenuContainer = styled_components_1.default.div `
   top: 0;
   bottom: 0;
   width: 100%;
-  z-index: 100;
+  z-index: var(--z-index-raised);
   background-color: var(--sidebar-item-drilldown-background-color);
 `;
 const slideInAnimation = (0, styled_components_1.keyframes) `

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

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import type { MenuItemProps } from '../../components/Sidebar/types';
-export declare function DrilldownMenuItem({ item }: MenuItemProps): JSX.Element;
+export declare function DrilldownMenuItem({ item, className }: MenuItemProps): JSX.Element;

package/lib/components/Sidebar/DrilldownMenuItem.js

@@ -7,9 +7,9 @@ exports.DrilldownMenuItem = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const hooks_1 = require("../../mocks/hooks");
-function DrilldownMenuItem({ item }) {
+function DrilldownMenuItem({ item, className }) {
     const { translate } = (0, hooks_1.useTranslate)();
-    return (react_1.default.createElement(Container, { "data-component-name": "Sidebar/DrilldownMenuItem" },
+    return (react_1.default.createElement(Container, { "data-component-name": "Sidebar/DrilldownMenuItem", className: className },
         item.icon ? react_1.default.createElement(Icon, { src: item.icon }) : null,
         react_1.default.createElement("div", null,
             translate(item.labelTranslationKey, item.label),

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

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

package/lib/components/Sidebar/HeaderWrapper.js

@@ -5,8 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HeaderWrapper = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
-exports.HeaderWrapper = styled_components_1.default.div.attrs(() => ({
+exports.HeaderWrapper = styled_components_1.default.div.attrs(({ className }) => ({
     'data-component-name': 'Sidebar/HeaderWrapper',
+    className,
 })) `
   margin: var(--sidebar-offset-top) 0 0 var(--sidebar-offset-left);
   padding-bottom: var(--sidebar-spacing-unit);

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

@@ -1,5 +1,3 @@
 export declare const MobileSidebarButton: import("styled-components").StyledComponent<"span", any, {
-    'data-component-name': string;
-} & {
     opened?: boolean | undefined;
-}, "data-component-name">;
+}, never>;

package/lib/components/Sidebar/MobileSidebarButton.js

@@ -5,8 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MobileSidebarButton = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
-exports.MobileSidebarButton = styled_components_1.default.span.attrs(() => ({
+exports.MobileSidebarButton = styled_components_1.default.span.attrs(({ className }) => ({
     'data-component-name': 'Sidebar/MobileSidebarButton',
+    className,
 })) `
   background-color: var(
     ${(props) => (props.opened ? '--fab-active-background' : '--fab-background-color')}
@@ -18,7 +19,7 @@ exports.MobileSidebarButton = styled_components_1.default.span.attrs(() => ({
   cursor: pointer;
   position: fixed;
   right: 20px;
-  z-index: 3;
+  z-index: var(--z-index-surface);
   box-shadow: ${(props) => props.opened ? 'var(--fab-active-box-shadow)' : 'var(--fab-box-shadow)'};
   border-radius: 50%;
   transform: ${(props) => (props.opened ? 'rotate(180deg)' : 'rotate(0deg)')};

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

@@ -2,7 +2,5 @@ interface SidebarProps {
     opened?: boolean;
     animate?: boolean;
 }
-export declare const Sidebar: import("styled-components").StyledComponent<"aside", any, {
-    'data-component-name': string;
-} & SidebarProps, "data-component-name">;
+export declare const Sidebar: import("styled-components").StyledComponent<"aside", any, SidebarProps, never>;
 export {};

package/lib/components/Sidebar/Sidebar.js

@@ -5,8 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Sidebar = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
-exports.Sidebar = styled_components_1.default.aside.attrs(() => ({
+exports.Sidebar = styled_components_1.default.aside.attrs(({ className }) => ({
     'data-component-name': 'Sidebar/Sidebar',
+    className,
 })) `
   border-right: 1px solid var(--sidebar-border-color);
   position: fixed;

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

@@ -12,6 +12,7 @@ interface SidebarLayoutProps {
     growContent?: boolean;
     collapsed?: boolean;
     onToggleMenu?: (isOpen: boolean) => void;
+    className?: string;
 }
-export declare function SidebarLayout({ versions, menu, footer, header, growContent, collapsed, onToggleMenu, }: SidebarLayoutProps): JSX.Element | null;
+export declare function SidebarLayout({ versions, menu, footer, header, growContent, collapsed, onToggleMenu, className, }: SidebarLayoutProps): JSX.Element | null;
 export {};

package/lib/components/Sidebar/SidebarLayout.js

@@ -45,7 +45,7 @@ const StyledFooterWrapper = (0, styled_components_1.default)(FooterWrapper_1.Foo
     display: flex;
   }
 `;
-function SidebarLayout({ versions, menu, footer, header, growContent, collapsed, onToggleMenu, }) {
+function SidebarLayout({ versions, menu, footer, header, growContent, collapsed, onToggleMenu, className, }) {
     const [isOpen, setIsOpen] = (0, useMobileMenu_1.useMobileMenu)();
     const [mappedCollapsed, setMappedCollapsed] = react_1.default.useState(collapsed);
     (0, react_1.useEffect)(() => {
@@ -62,9 +62,7 @@ function SidebarLayout({ versions, menu, footer, header, growContent, collapsed,
     return (react_1.default.createElement(react_1.default.Fragment, null, mappedCollapsed ? (footer ? (react_1.default.createElement(Wrapper, { collapsed: true },
         react_1.default.createElement(StyledFooterWrapper, { "data-component-name": "Sidebar/FooterWrapper", collapsed: true }, footer),
         react_1.default.createElement(MobileSidebarButton_1.MobileSidebarButton, { opened: isOpen, onClick: toggleMenu },
-            react_1.default.createElement(MobileSidebarIcon_1.MobileSidebarIcon, null)))) : null) : (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/SidebarLayout" },
-        react_1.default.createElement(MobileSidebarButton_1.MobileSidebarButton, { opened: isOpen, onClick: toggleMenu },
-            react_1.default.createElement(MobileSidebarIcon_1.MobileSidebarIcon, null)),
+            react_1.default.createElement(MobileSidebarIcon_1.MobileSidebarIcon, null)))) : null) : (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/SidebarLayout", className: className },
         !(search === null || search === void 0 ? void 0 : search.hide) && (search === null || search === void 0 ? void 0 : search.placement) === 'sidebar' ? react_1.default.createElement(SidebarSearch_1.SidebarSearch, null) : null,
         react_1.default.createElement(Sidebar_1.Sidebar, { animate: true, opened: isOpen },
             header ? react_1.default.createElement(HeaderWrapper_1.HeaderWrapper, null, header) : null,