@redocly/theme 0.15.1 → 0.16.0

package/lib/components/Navbar/MobileUserProfile.js

@@ -0,0 +1,78 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileUserProfile = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const useProfileProps_1 = require("../../mocks/Profile/useProfileProps");
+const LogoutIcon_1 = require("../../icons/LogoutIcon");
+const Profile_1 = require("../../components/Profile/Profile");
+const useThemeConfig_1 = require("../../hooks/useThemeConfig");
+const hooks_1 = require("../../mocks/hooks");
+function MobileUserProfile() {
+    const { userProfile } = (0, useThemeConfig_1.useThemeConfig)();
+    const { userData, handleLogout, loginUrl } = (0, useProfileProps_1.useProfileProps)();
+    const { translate } = (0, hooks_1.useTranslate)();
+    const translationKeys = {
+        login: 'theme.profile.login',
+    };
+    if (!(userData === null || userData === void 0 ? void 0 : userData.isAuthenticated)) {
+        return (react_1.default.createElement(MobileProfileWrapper, { "data-component-name": "Navbar/MobileUserProfile" },
+            react_1.default.createElement(LoginButton, { href: loginUrl, "data-cy": "login-btn" }, translate(translationKeys.login, (userProfile === null || userProfile === void 0 ? void 0 : userProfile.loginLabel) || 'Login'))));
+    }
+    return (react_1.default.createElement(MobileProfileWrapper, { "data-component-name": "Navbar/MobileUserProfile" },
+        react_1.default.createElement(UserDataWrapper, null,
+            react_1.default.createElement(ProfilePicture, null,
+                react_1.default.createElement(Profile_1.Profile, { name: userData.name, imageUrl: userData.picture })),
+            react_1.default.createElement(UserName, null, userData.name)),
+        react_1.default.createElement(LogoutButton, { onClick: () => handleLogout() },
+            react_1.default.createElement(LogoutIcon_1.LogoutIcon, null))));
+}
+exports.MobileUserProfile = MobileUserProfile;
+const LoginButton = styled_components_1.default.a `
+  background: var(--mobile-menu-login-button-background);
+  border-radius: 6px;
+  width: 100%;
+  margin: 0;
+  padding: 5px 0;
+  color: var(--mobile-menu-login-button-color);
+  font-size: 14px;
+  text-align: center;
+  line-height: 22px;
+  cursor: pointer;
+  text-decoration: none;
+`;
+const MobileProfileWrapper = styled_components_1.default.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  position: fixed;
+  bottom: 0;
+  padding: 18px 16px;
+  border-top: 1px solid var(--mobile-menu-profile-border-color);
+  background: var(--mobile-menu-profile-background);
+`;
+const UserDataWrapper = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+`;
+const ProfilePicture = styled_components_1.default.div `
+  margin-right: 16px;
+
+  ${Profile_1.AvatarWrapper} {
+    margin: 0;
+  }
+
+  ${Profile_1.ProfileWrapper} {
+    padding: 0;
+  }
+`;
+const UserName = styled_components_1.default.div ``;
+const LogoutButton = styled_components_1.default.div `
+  cursor: pointer;
+  user-select: none;
+`;
+//# sourceMappingURL=MobileUserProfile.js.map

package/lib/components/Navbar/Navbar.d.ts

@@ -11,6 +11,7 @@ interface NavbarPresentationalProps extends NavbarLogoProps {
     menu: ResolvedConfigLinks;
     hideUserProfile: boolean | string | undefined;
     changeLanguage: (value: string) => void;
+    className?: string;
 }
 export declare function NavbarPresentational(props: NavbarPresentationalProps): JSX.Element | null;
 export declare const NavbarContainer: import("styled-components").StyledComponent<"nav", any, {}, never>;

package/lib/components/Navbar/Navbar.js

@@ -32,14 +32,15 @@ const styled_components_1 = __importStar(require("styled-components"));
 const Navbar_1 = require("../../components/Navbar");
 const useMobileMenu_1 = require("../../hooks/useMobileMenu");
 const utils_1 = require("../../utils");
-const MobileNavbarMenuButton_1 = require("../../components/Navbar/MobileNavbarMenuButton");
 const NavbarLogo_1 = require("../../components/NavbarLogo");
-const MobileNavbarMenu_1 = require("../../components/Navbar/MobileNavbarMenu");
+const MobileMenu_1 = require("../../components/Menu/MobileMenu");
 const ColorModeSwitcher_1 = require("../../components/ColorModeSwitcher/ColorModeSwitcher");
 const useThemeConfig_1 = require("../../hooks/useThemeConfig");
 const Search_1 = require("../../components/Search/Search");
 const AuthUserProfile_1 = require("../../components/Profile/AuthUserProfile");
 const hooks_1 = require("../../mocks/hooks");
+const BurgerButton_1 = require("../../components/Navbar/BurgerButton");
+const useSidebarItems_1 = require("../../mocks/Sidebar/useSidebarItems");
 const LanguagePicker_1 = require("../../I18n/LanguagePicker");
 const EmptyNavbarHack = (0, styled_components_1.createGlobalStyle) `
   :root {
@@ -79,19 +80,38 @@ function Navbar() {
 }
 exports.Navbar = Navbar;
 function NavbarPresentational(props) {
-    const { menuItemsExist, closeMobileMenu, openMobileMenu, isOpen, hideSearch, logo, menu, hideUserProfile, changeLanguage, } = props;
-    return (react_1.default.createElement(exports.NavbarContainer, { "data-component-name": "Navbar/Navbar" },
-        menuItemsExist && react_1.default.createElement(MobileNavbarMenuButton_1.MobileNavbarMenuButton, { onClick: openMobileMenu }),
-        isOpen && (react_1.default.createElement(MobileNavbarMenu_1.MobileNavbarMenu, { closeMenu: closeMobileMenu, menuItems: menu })),
+    const { versions = [] } = (0, hooks_1.usePageVersions)() || {};
+    const activeVersion = versions.find((version) => version === null || version === void 0 ? void 0 : version.active);
+    const sidebarItems = (0, useSidebarItems_1.useSidebarItems)(activeVersion);
+    const { menuItemsExist, closeMobileMenu, openMobileMenu, isOpen, hideSearch, logo, menu, hideUserProfile, changeLanguage, className, } = props;
+    return (react_1.default.createElement(exports.NavbarContainer, { "data-component-name": "Navbar/Navbar", className: className },
+        isOpen && react_1.default.createElement(MobileMenu_1.MobileMenu, { navItems: menu, sidebarItems: sidebarItems }),
         react_1.default.createElement(exports.NavbarRow, null,
+            menuItemsExist && (react_1.default.createElement(BurgerButton_1.BurgerButton, { onClick: isOpen ? closeMobileMenu : openMobileMenu, isOpen: isOpen })),
             react_1.default.createElement(NavbarLogo_1.NavbarLogo, { logo: logo }),
             react_1.default.createElement(Navbar_1.NavbarMenu, { menuItems: menu }),
             hideSearch ? null : react_1.default.createElement(Search_1.Search, null),
             react_1.default.createElement(LanguagePicker_1.LanguagePicker, { onChangeLanguage: changeLanguage }),
-            hideUserProfile ? null : react_1.default.createElement(AuthUserProfile_1.AuthUserProfile, null),
-            react_1.default.createElement(ColorModeSwitcher_1.ColorModeSwitcher, null))));
+            hideUserProfile ? null : (react_1.default.createElement(AuthUserProfileWrapper, null,
+                react_1.default.createElement(AuthUserProfile_1.AuthUserProfile, null))),
+            react_1.default.createElement(ColorModeSwitcherWrapper, { isVisible: isOpen },
+                react_1.default.createElement(ColorModeSwitcher_1.ColorModeSwitcher, null)))));
 }
 exports.NavbarPresentational = NavbarPresentational;
+const ColorModeSwitcherWrapper = styled_components_1.default.div `
+  display: ${({ isVisible }) => (isVisible ? 'block' : 'none')};
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    display: block;
+  }
+`;
+const AuthUserProfileWrapper = styled_components_1.default.div `
+  display: none;
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    display: block;
+  }
+`;
 exports.NavbarContainer = styled_components_1.default.nav `
   --text-color: var(--navbar-text-color);
 
@@ -104,7 +124,7 @@ exports.NavbarContainer = styled_components_1.default.nav `
   font-size: 0.875rem;
   position: sticky;
   top: 0;
-  z-index: 200;
+  z-index: var(--z-index-raised);
   padding: var(--navbar-item-padding-vertical) var(--navbar-item-padding-horizontal);
   background: var(--navbar-background-color);
   font-family: var(--navbar-item-font-family);

package/lib/components/Navbar/NavbarDropdown.d.ts

@@ -2,7 +2,8 @@
 import type { ResolvedNavLinkItem } from '../../types/portal';
 interface NavbarDropdownProps {
     items: ResolvedNavLinkItem[];
+    className?: string;
 }
-export declare function NavbarDropdown({ items }: NavbarDropdownProps): JSX.Element;
+export declare function NavbarDropdown({ items, className }: NavbarDropdownProps): JSX.Element;
 export declare const DropdownWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

package/lib/components/Navbar/NavbarDropdown.js

@@ -8,9 +8,9 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Link_1 = require("../../mocks/Link");
 const hooks_1 = require("../../mocks/hooks");
-function NavbarDropdown({ items }) {
+function NavbarDropdown({ items, className }) {
     const { translate } = (0, hooks_1.useTranslate)();
-    return (react_1.default.createElement(exports.DropdownWrapper, { "data-component-name": "Navbar/NavbarDropdown" }, items.map((item, index) => (react_1.default.createElement("div", { key: `${item.label}_${index}` },
+    return (react_1.default.createElement(exports.DropdownWrapper, { "data-component-name": "Navbar/NavbarDropdown", className: className }, items.map((item, index) => (react_1.default.createElement("div", { key: `${item.label}_${index}` },
         react_1.default.createElement(Link_1.Link, { to: item.link }, translate(item.labelTranslationKey, item.label)))))));
 }
 exports.NavbarDropdown = NavbarDropdown;

package/lib/components/Navbar/NavbarMenu.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import type { ResolvedConfigLinks } from '../../types/portal';
-export declare function NavbarMenu({ menuItems }: {
+export declare function NavbarMenu({ menuItems, className, }: {
     menuItems: ResolvedConfigLinks;
+    className?: string;
 }): JSX.Element | null;

package/lib/components/Navbar/NavbarMenu.js

@@ -8,11 +8,11 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const NavbarItem_1 = require("../../components/Navbar/NavbarItem");
 const utils_1 = require("../../utils");
-function NavbarMenu({ menuItems }) {
+function NavbarMenu({ menuItems, className, }) {
     if ((0, utils_1.isPrimitive)(menuItems)) {
         return null;
     }
-    return (react_1.default.createElement(NavItemsContainer, { "data-component-name": "Navbar/NavbarMenu" }, menuItems.map((navItem, index) => {
+    return (react_1.default.createElement(NavItemsContainer, { "data-component-name": "Navbar/NavbarMenu", className: className }, menuItems.map((navItem, index) => {
         return (react_1.default.createElement(NavbarItem_1.NavbarItem, { key: `${navItem.label}_${index}`, "data-cy": navItem.label, navItem: navItem }));
     })));
 }

package/lib/components/NavbarLogo/NavbarLogo.d.ts

@@ -2,5 +2,6 @@
 import type { LogoConfig } from '../../types/portal';
 export type NavbarLogoProps = {
     logo: Pick<LogoConfig, 'image' | 'link' | 'altText'>;
+    className?: string;
 };
-export declare function NavbarLogo({ logo }: NavbarLogoProps): JSX.Element | null;
+export declare function NavbarLogo({ logo, className }: NavbarLogoProps): JSX.Element | null;

package/lib/components/NavbarLogo/NavbarLogo.js

@@ -7,11 +7,11 @@ exports.NavbarLogo = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Link_1 = require("../../mocks/Link");
-function NavbarLogo({ logo }) {
+function NavbarLogo({ logo, className }) {
     if (!logo.image) {
         return null;
     }
-    const img = (react_1.default.createElement(NavLogo, { src: logo.image, alt: logo.altText, "data-component-name": "NavbarLogo/NavbarLogo" }));
+    const img = (react_1.default.createElement(NavLogo, { className: className, src: logo.image, alt: logo.altText, "data-component-name": "NavbarLogo/NavbarLogo" }));
     return logo.link ? react_1.default.createElement(Link_1.Link, { to: logo.link }, img) : img;
 }
 exports.NavbarLogo = NavbarLogo;

package/lib/components/OpenApiDocs/DevOnboardingTryItSecurity.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import type { TryItSecurityAppsProps } from './TryItSecurityApps';
+import type { TryItSecurityAppsProps } from '../../components/OpenApiDocs/TryItSecurityApps';
 export declare function DevOnboardingTryItSecurity(props: TryItSecurityAppsProps): JSX.Element | null;

package/lib/components/OpenApiDocs/DevOnboardingTryItSecurity.js

@@ -32,7 +32,7 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const Button_1 = require("../../components/Button/Button");
 const usePreloadHistory_1 = require("../../mocks/usePreloadHistory");
 const usePageData_1 = require("../../mocks/hooks/usePageData");
-const Dropdown_1 = require("./Dropdown");
+const Dropdown_1 = require("../../components/OpenApiDocs/Dropdown");
 function DevOnboardingTryItSecurity(props) {
     const apiId = props.apiId;
     const history = (0, usePreloadHistory_1.usePreloadHistory)();

package/lib/components/PageNavigation/NextButton.d.ts

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

package/lib/components/PageNavigation/NextButton.js

@@ -32,7 +32,7 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const Button_1 = require("../../components/Button");
 const useThemeConfig_1 = require("../../hooks/useThemeConfig");
 const hooks_1 = require("../../mocks/hooks");
-function NextButton({ nextPage }) {
+function NextButton({ nextPage, className }) {
     var _a, _b;
     const { navigation } = (0, useThemeConfig_1.useThemeConfig)();
     const { translate } = (0, hooks_1.useTranslate)();
@@ -43,7 +43,7 @@ function NextButton({ nextPage }) {
     const defaultText = (((_b = navigation === null || navigation === void 0 ? void 0 : navigation.nextButton) === null || _b === void 0 ? void 0 : _b.text) || 'Next to {label}').replace('{label}', nextPageText);
     const translationKey = 'theme.page.nextButton';
     const text = translate(translationKey, { label: nextPageText, defaultValue: defaultText });
-    return (React.createElement(StyledButton, { variant: "outlined", size: "large", to: nextPage.link, "data-component-name": "PageNavigation/NextPageLink", "data-translation-key": translationKey }, text));
+    return (React.createElement(StyledButton, { variant: "outlined", size: "large", to: nextPage.link, "data-component-name": "PageNavigation/NextPageLink", "data-translation-key": translationKey, extraClass: className }, text));
 }
 exports.NextButton = NextButton;
 const StyledButton = (0, styled_components_1.default)(Button_1.Button) `

package/lib/components/PageNavigation/PageNavigation.d.ts

@@ -3,6 +3,7 @@ import type { ResolvedNavItemWithLink } from '../../types/portal';
 interface PageNavigationType {
     nextPage?: ResolvedNavItemWithLink | null;
     prevPage?: ResolvedNavItemWithLink | null;
+    className?: string;
 }
-export declare function PageNavigation({ nextPage, prevPage }: PageNavigationType): JSX.Element | null;
+export declare function PageNavigation({ nextPage, prevPage, className, }: PageNavigationType): JSX.Element | null;
 export {};

package/lib/components/PageNavigation/PageNavigation.js

@@ -9,13 +9,13 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const PreviousButton_1 = require("../../components/PageNavigation/PreviousButton");
 const NextButton_1 = require("../../components/PageNavigation/NextButton");
 const useThemeConfig_1 = require("../../hooks/useThemeConfig");
-function PageNavigation({ nextPage, prevPage }) {
+function PageNavigation({ nextPage, prevPage, className, }) {
     var _a, _b;
     const { navigation } = (0, useThemeConfig_1.useThemeConfig)();
     if (((_a = navigation === null || navigation === void 0 ? void 0 : navigation.previousButton) === null || _a === void 0 ? void 0 : _a.hide) && ((_b = navigation === null || navigation === void 0 ? void 0 : navigation.nextButton) === null || _b === void 0 ? void 0 : _b.hide)) {
         return null;
     }
-    return (react_1.default.createElement(PageNavigationWrapper, { "data-component-name": "PageNavigation/PageNavigation" },
+    return (react_1.default.createElement(PageNavigationWrapper, { "data-component-name": "PageNavigation/PageNavigation", className: className },
         react_1.default.createElement(PreviousButton_1.PreviousButton, { prevPage: prevPage }),
         react_1.default.createElement(NextButton_1.NextButton, { nextPage: nextPage })));
 }

package/lib/components/PageNavigation/PreviousButton.d.ts

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

package/lib/components/PageNavigation/PreviousButton.js

@@ -9,7 +9,7 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const Button_1 = require("../../components/Button");
 const useThemeConfig_1 = require("../../hooks/useThemeConfig");
 const hooks_1 = require("../../mocks/hooks");
-function PreviousButton({ prevPage }) {
+function PreviousButton({ prevPage, className }) {
     var _a, _b;
     const { navigation } = (0, useThemeConfig_1.useThemeConfig)();
     const { translate } = (0, hooks_1.useTranslate)();
@@ -23,7 +23,7 @@ function PreviousButton({ prevPage }) {
         label: prevPageText,
         defaultValue: defaultText,
     });
-    return (react_1.default.createElement(StyledButton, { variant: "outlined", size: "large", to: prevPage.link, "data-component-name": "PageNavigation/PreviousPageLink", "data-translation-key": translationKey }, text));
+    return (react_1.default.createElement(StyledButton, { variant: "outlined", size: "large", to: prevPage.link, "data-component-name": "PageNavigation/PreviousPageLink", "data-translation-key": translationKey, extraClass: className }, text));
 }
 exports.PreviousButton = PreviousButton;
 const StyledButton = (0, styled_components_1.default)(Button_1.Button) `

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

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

package/lib/components/Panel/PanelBody.js

@@ -36,8 +36,9 @@ const showPanel = (0, styled_components_1.keyframes) `
 const showPanelAnimation = (0, styled_components_1.css) `
   animation: ${showPanel} 0.2s;
 `;
-exports.PanelBody = styled_components_1.default.div.attrs(() => ({
+exports.PanelBody = styled_components_1.default.div.attrs(({ className }) => ({
     'data-component-name': 'Panel/PanelBody',
+    className,
 })) `
   ${({ animate }) => animate && showPanelAnimation};
   ${({ hidden }) => hidden && 'visibility: hidden'};

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

@@ -4,6 +4,4 @@ export interface PanelHeaderProps {
     disabled?: boolean;
     toggle?: (e: BaseSyntheticEvent) => void;
 }
-export declare const PanelHeader: import("styled-components").StyledComponent<"div", any, {
-    'data-component-name': string;
-} & PanelHeaderProps, "data-component-name">;
+export declare const PanelHeader: import("styled-components").StyledComponent<"div", any, PanelHeaderProps, never>;

package/lib/components/Panel/PanelHeader.js

@@ -5,8 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PanelHeader = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
-exports.PanelHeader = styled_components_1.default.div.attrs(() => ({
+exports.PanelHeader = styled_components_1.default.div.attrs(({ className }) => ({
     'data-component-name': 'Panel/PanelHeader',
+    className,
 })) `
   position: relative;
   z-index: 1;

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

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

package/lib/components/Panel/PanelHeaderTitle.js

@@ -5,8 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PanelHeaderTitle = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
-exports.PanelHeaderTitle = styled_components_1.default.span.attrs(() => ({
+exports.PanelHeaderTitle = styled_components_1.default.span.attrs(({ className }) => ({
     'data-component-name': 'Panel/PanelHeaderTitle',
+    className,
 })) `
   margin-right: 5px;
   font-weight: var(--panel-heading-font-weight-local);

package/lib/components/Profile/Profile.d.ts

@@ -6,3 +6,9 @@ export interface ProfileProps {
     onClick?: () => void;
 }
 export declare const Profile: React.NamedExoticComponent<ProfileProps>;
+export declare const ProfileWrapper: import("styled-components").StyledComponent<"div", any, {
+    'data-component-name': string;
+}, "data-component-name">;
+export declare const AvatarWrapper: import("styled-components").StyledComponent<"div", any, {
+    background?: string | undefined;
+}, never>;

package/lib/components/Profile/Profile.js

@@ -23,26 +23,26 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Profile = void 0;
+exports.AvatarWrapper = exports.ProfileWrapper = exports.Profile = void 0;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
 const utils_1 = require("../../utils");
 function ProfileComponent({ name = 'User', imageUrl, onClick, color }) {
     var _a;
     if (imageUrl) {
-        return (react_1.default.createElement(ProfileWrapper, { onClick: onClick, role: "link" },
+        return (react_1.default.createElement(exports.ProfileWrapper, { onClick: onClick, role: "link" },
             react_1.default.createElement(StyledUserName, { "data-cy": "user-name", color: color }, name),
-            imageUrl && (react_1.default.createElement(AvatarWrapper, null,
+            imageUrl && (react_1.default.createElement(exports.AvatarWrapper, null,
                 react_1.default.createElement("img", { "data-cy": "user-avatar", src: imageUrl, alt: "profile" })))));
     }
     const avatarLetters = `${name.charAt(0).toUpperCase()}${((_a = name.split(' ')[1]) === null || _a === void 0 ? void 0 : _a.charAt(0).toUpperCase()) || ''}`;
-    return (react_1.default.createElement(ProfileWrapper, { onClick: onClick, role: "link" },
+    return (react_1.default.createElement(exports.ProfileWrapper, { onClick: onClick, role: "link" },
         react_1.default.createElement(StyledUserName, { "data-cy": "user-name", color: color }, name),
-        react_1.default.createElement(AvatarWrapper, { background: (0, utils_1.stringToHslColor)(name) },
+        react_1.default.createElement(exports.AvatarWrapper, { background: (0, utils_1.stringToHslColor)(name) },
             react_1.default.createElement("span", null, avatarLetters))));
 }
 exports.Profile = (0, react_1.memo)(ProfileComponent);
-const ProfileWrapper = styled_components_1.default.div.attrs(() => ({
+exports.ProfileWrapper = styled_components_1.default.div.attrs(() => ({
     'data-component-name': 'Profile/Profile',
 })) `
   display: flex;
@@ -65,7 +65,7 @@ const StyledUserName = styled_components_1.default.span `
     display: block;
   }
 `;
-const AvatarWrapper = styled_components_1.default.div `
+exports.AvatarWrapper = styled_components_1.default.div `
   width: var(--profile-avatar-width);
   height: var(--profile-avatar-height);
   display: flex;

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

@@ -8,4 +8,5 @@ export interface UserProfileProps {
     handleLogout: (logoutRedirect?: string) => void;
     hasDeveloperOnboarding?: boolean;
     loginUrl?: string;
+    className?: string;
 }

package/lib/components/SamplesPanelControls/SamplesPanelControls.d.ts

@@ -1,8 +1,4 @@
-export declare const SamplesControlButton: import("styled-components").StyledComponent<"button", any, {
-    'data-component-name': string;
-}, "data-component-name">;
+export declare const SamplesControlButton: import("styled-components").StyledComponent<"button", any, {}, never>;
 export declare const SampleControls: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SampleControlsWrap: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const PreformattedCodeBlock: import("styled-components").StyledComponent<"pre", any, {
-    'data-component-name': string;
-}, "data-component-name">;
+export declare const PreformattedCodeBlock: import("styled-components").StyledComponent<"pre", any, {}, never>;

package/lib/components/SamplesPanelControls/SamplesPanelControls.js

@@ -6,8 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PreformattedCodeBlock = exports.SampleControlsWrap = exports.SampleControls = exports.SamplesControlButton = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
 const CodeBlock_1 = require("../../components/CodeBlock");
-exports.SamplesControlButton = styled_components_1.default.button.attrs(() => ({
+exports.SamplesControlButton = styled_components_1.default.button.attrs(({ className }) => ({
     'data-component-name': 'SamplesPanelControls/SamplesPanelControls',
+    className: className,
 })) `
   background-color: var(--panel-samples-controls-background-color);
   border: 0;

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

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

package/lib/components/Search/CancelSearch.js

@@ -30,12 +30,12 @@ exports.CancelSearch = void 0;
 const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const hooks_1 = require("../../mocks/hooks");
-function CancelSearch({ onClick }) {
+function CancelSearch({ onClick, className, }) {
     const { translate } = (0, hooks_1.useTranslate)();
     const translationKeys = {
         cancel: 'theme.search.cancel',
     };
-    return (React.createElement(Wrapper, { "data-component-name": "Search/CancelSearch", onClick: onClick },
+    return (React.createElement(Wrapper, { "data-component-name": "Search/CancelSearch", onClick: onClick, className: className },
         React.createElement(Button, { "data-translation-keys": translationKeys.cancel }, translate(translationKeys.cancel, 'Cancel'))));
 }
 exports.CancelSearch = CancelSearch;

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

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

package/lib/components/Search/ClearIcon.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 298.7 298.7", "data-component-name": "Search/ClearIcon" }, props),
     react_1.default.createElement("polygon", { points: "298.7 30.2 268.5 0 149.3 119.1 30.2 0 0 30.2 119.1 149.3 0 268.5 30.2 298.7 149.3 179.5 268.5 298.7 298.7 268.5 179.5 149.3 " })));
-exports.ClearIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+exports.ClearIcon = (0, styled_components_1.default)(Icon).attrs(({ className }) => ({
     'data-component-name': 'Search/ClearIcon',
+    className,
 })) `
   cursor: pointer;
   width: 0.5em;

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

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

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

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

package/lib/components/Search/Input.js

@@ -5,8 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormInput = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
-exports.FormInput = styled_components_1.default.input.attrs(() => ({
+exports.FormInput = styled_components_1.default.input.attrs(({ className }) => ({
     'data-component-name': 'Search/Input',
+    className,
 })) `
   padding: 1em 2.5em 1em 2.5em;
   background-color: var(--search-input-background-color);

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

@@ -5,6 +5,7 @@ interface InputWrapperProps {
     change(value: string): void;
     inputRef?: React.RefObject<HTMLInputElement>;
     isLoading: boolean;
+    className?: string;
 }
-export declare function InputWrapper({ placeholder, value, change, isLoading, }: InputWrapperProps): JSX.Element;
+export declare function InputWrapper({ placeholder, value, change, isLoading, className, }: InputWrapperProps): JSX.Element;
 export {};

package/lib/components/Search/InputWrapper.js

@@ -33,7 +33,7 @@ const Input_1 = require("../../components/Search/Input");
 const SearchIcon_1 = require("../../components/Search/SearchIcon");
 const SpinnerIcon_1 = require("../../icons/SpinnerIcon");
 const ClearIcon_1 = require("../../components/Search/ClearIcon");
-function InputWrapper({ placeholder, value, change, isLoading, }) {
+function InputWrapper({ placeholder, value, change, isLoading, className, }) {
     const [isFocused, setIsFocused] = (0, react_1.useState)(false);
     const refInput = (0, react_1.useRef)(null);
     const onFocus = () => setIsFocused(true);
@@ -49,7 +49,7 @@ function InputWrapper({ placeholder, value, change, isLoading, }) {
         setIsFocused(true);
         change(event.target.value);
     };
-    return (react_1.default.createElement(Wrapper, { "data-component-name": "Search/InputContainer" },
+    return (react_1.default.createElement(Wrapper, { "data-component-name": "Search/InputContainer", className: className },
         isFocused && isLoading ? react_1.default.createElement(SpinnerIcon, null) : react_1.default.createElement(SearchIcon, null),
         react_1.default.createElement(Input_1.FormInput, { value: value, placeholder: placeholder, onChange: onChange, onFocus: onFocus, onClick: stopPropagation, ref: refInput }),
         !!value && react_1.default.createElement(ClearIcon, { onClick: reset })));

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

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

package/lib/components/Search/MobileSearchTrigger.js

@@ -30,19 +30,20 @@ exports.MobileSearchTrigger = void 0;
 const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const SearchIcon_1 = require("../../components/Search/SearchIcon");
-function MobileSearchTrigger({ onClick }) {
-    return (React.createElement(Wrapper, { "data-component-name": "Search/MobileSearchTrigger", onClick: onClick },
+function MobileSearchTrigger({ onClick, className, }) {
+    return (React.createElement(Wrapper, { "data-component-name": "Search/MobileSearchTrigger", onClick: onClick, className: className },
         React.createElement(SearchIcon, null)));
 }
 exports.MobileSearchTrigger = MobileSearchTrigger;
 const SearchIcon = (0, styled_components_1.default)(SearchIcon_1.SearchIcon) `
-  width: 20px;
-  height: 20px;
-  fill: #8d8d8d;
+  width: var(--mobile-menu-search-icon-size);
+  height: var(--mobile-menu-search-icon-size);
+  fill: var(--navbar-text-color);
 `;
 const Wrapper = styled_components_1.default.div `
   display: block;
   user-select: none;
+  height: var(--mobile-menu-search-icon-size);
 
   ${({ theme }) => theme.mediaQueries.small} {
     display: none;