@redocly/theme 0.70.0-next.2 → 0.70.0-next.4

package/lib/core/utils/menu.js

@@ -1,24 +1,26 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.buildVersionSection = exports.buildLanguagesGroup = exports.isItemActive = exports.mapNavbarItems = void 0;
+exports.buildNavigationTabsSelect = exports.buildVersionSection = exports.buildLanguagesGroup = exports.isItemActive = exports.mapNavbarItems = void 0;
 exports.getMenuItemType = getMenuItemType;
 const common_1 = require("../constants/common");
 const urls_1 = require("./urls");
+const navigation_tabs_1 = require("./navigation-tabs");
 const TRANSLATION_KEYS = {
     version: 'mobileMenu.version',
 };
 const mapNavbarItems = (items, defaultLocale, currentLocale, locales, location) => {
-    return items.map((navItem) => { var _a; return (Object.assign(Object.assign(Object.assign(Object.assign({}, navItem), (navItem.items && {
+    return items.map((navItem) => { var _a; return (Object.assign(Object.assign(Object.assign({}, navItem), (navItem.items && {
         items: (0, exports.mapNavbarItems)(navItem.items, defaultLocale, currentLocale, locales, location),
-    })), ('link' in navItem && { link: navItem.link || '/' })), { active: 'link' in navItem &&
-            (0, exports.isItemActive)(navItem, defaultLocale, currentLocale, locales, location), hasActiveSubItem: !!((_a = navItem.items) === null || _a === void 0 ? void 0 : _a.find((item) => (0, exports.isItemActive)(item, defaultLocale, currentLocale, locales, location))) })); });
+    })), { active: (0, exports.isItemActive)(navItem, defaultLocale, currentLocale, locales, location), hasActiveSubItem: !!((_a = navItem.items) === null || _a === void 0 ? void 0 : _a.find((item) => (0, exports.isItemActive)(item, defaultLocale, currentLocale, locales, location))) })); });
 };
 exports.mapNavbarItems = mapNavbarItems;
 const isItemActive = (item, defaultLocale, currentLocale, locales, location) => {
+    if (!item.link)
+        return false;
     const pathHash = location.pathname + location.hash;
     const link = item.languageInsensitive
-        ? item.link || ''
-        : (0, urls_1.getPathnameForLocale)(item.link || '/', defaultLocale, currentLocale, locales);
+        ? item.link
+        : (0, urls_1.getPathnameForLocale)(item.link, defaultLocale, currentLocale, locales);
     return pathHash === (0, urls_1.withPathPrefix)(link);
 };
 exports.isItemActive = isItemActive;
@@ -34,7 +36,7 @@ const buildLanguagesGroup = (locales, defaultLocale, currentLocale) => {
             .filter((locale) => locale.code !== currentLocale)
             .map((locale) => {
             const newLangPathname = (0, urls_1.getPathnameForLocale)((0, urls_1.withoutPathPrefix)(location.pathname), defaultLocale, locale.code, locales);
-            const newUrlWithLanguage = `${newLangPathname}${location.search}${location.hash}`;
+            const newUrlWithLanguage = `${(0, urls_1.addLeadingSlash)(newLangPathname)}${location.search}${location.hash}`;
             return {
                 type: 'link',
                 label: locale.name || locale.code || '',
@@ -71,9 +73,30 @@ const buildVersionSection = (translate, versions, activeVersion) => {
     ];
 };
 exports.buildVersionSection = buildVersionSection;
+const buildNavigationTabsSelect = ({ navigationTabs, }) => {
+    var _a;
+    var _b;
+    const tabs = (_a = (0, navigation_tabs_1.toNavigationTabsConfig)({ state: navigationTabs })) === null || _a === void 0 ? void 0 : _a.items;
+    if (!tabs) {
+        return;
+    }
+    const activeTab = tabs.find((tab) => tab.active);
+    return {
+        type: common_1.MenuItemType.Select,
+        label: (_b = activeTab === null || activeTab === void 0 ? void 0 : activeTab.label) !== null && _b !== void 0 ? _b : 'Navigation tabs',
+        labelTranslationKey: activeTab ? activeTab.labelTranslationKey : 'navigationTabs.label',
+        items: tabs.map(toNavigationTabOption),
+        active: false,
+        hasActiveSubItem: !!activeTab,
+    };
+};
+exports.buildNavigationTabsSelect = buildNavigationTabsSelect;
 function getMenuItemType(item) {
     var _a, _b;
-    if (item.type === common_1.MenuItemType.Separator) {
+    if (item.type === common_1.MenuItemType.Select) {
+        return common_1.MenuItemType.Select;
+    }
+    else if (item.type === common_1.MenuItemType.Separator) {
         return common_1.MenuItemType.Separator;
     }
     else if (item.menuStyle === 'drilldown') {
@@ -88,4 +111,21 @@ function getMenuItemType(item) {
     else
         return common_1.MenuItemType.Default;
 }
+function toNavigationTabOption(tab) {
+    var _a;
+    const landing = tab.type === 'group' ? ((_a = tab.items.find((entry) => entry.active)) !== null && _a !== void 0 ? _a : tab.items[0]) : tab;
+    return {
+        type: tab.type,
+        label: tab.label,
+        labelTranslationKey: tab.labelTranslationKey,
+        icon: tab.icon,
+        srcSet: tab.srcSet,
+        link: landing === null || landing === void 0 ? void 0 : landing.link,
+        external: landing === null || landing === void 0 ? void 0 : landing.external,
+        target: landing === null || landing === void 0 ? void 0 : landing.target,
+        items: [],
+        active: !!tab.active,
+        hasActiveSubItem: false,
+    };
+}
 //# sourceMappingURL=menu.js.map

package/lib/core/utils/navigation-tabs.d.ts

@@ -0,0 +1,8 @@
+import type { ThemeHooks } from '../types/hooks';
+import type { NavigationTabsConfig, NavigationTabsState } from '../types/navigation-tabs';
+type NavbarItemClickedPayload = Parameters<ReturnType<ThemeHooks['useTelemetry']>['sendNavbarMenuItemClickedMessage']>[0];
+export declare function toNavigationTabsConfig({ state, }: {
+    state: NavigationTabsState | undefined;
+}): NavigationTabsConfig | undefined;
+export declare function getNavbarItemClickedPayload(type: 'link' | 'group'): NavbarItemClickedPayload;
+export {};

package/lib/core/utils/navigation-tabs.js

@@ -0,0 +1,71 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toNavigationTabsConfig = toNavigationTabsConfig;
+exports.getNavbarItemClickedPayload = getNavbarItemClickedPayload;
+const get_base_data_attributes_1 = require("./telemetry/get-base-data-attributes");
+function toNavigationTabsConfig({ state, }) {
+    const items = toNavigationTabEntries(state).map((entry) => entry.kind === 'menu'
+        ? {
+            type: 'group',
+            label: entry.tab.label,
+            labelTranslationKey: entry.tab.labelTranslationKey,
+            icon: entry.tab.icon,
+            srcSet: entry.tab.srcSet,
+            items: entry.entries.map((_a) => {
+                var { active } = _a, link = __rest(_a, ["active"]);
+                return toRowLink(link, active);
+            }),
+            active: entry.active,
+        }
+        : toRowLink(entry.link, entry.active));
+    return items.length ? { items } : undefined;
+}
+function getNavbarItemClickedPayload(type) {
+    return [
+        Object.assign(Object.assign({}, (0, get_base_data_attributes_1.getBaseDataAttributes)('navbarItem', 'navbar')), { type }),
+    ];
+}
+function toNavigationTabEntries(state) {
+    if (!(state === null || state === void 0 ? void 0 : state.tabs.length))
+        return [];
+    return state.tabs.flatMap((tab) => {
+        var _a;
+        const active = ((_a = state.activeTab) === null || _a === void 0 ? void 0 : _a.tabId) === tab.tabId;
+        if (tab.menu) {
+            const entries = tab.menu
+                .filter((menuEntry) => !!menuEntry.link)
+                .map((_a) => { var _b; var { tabId } = _a, link = __rest(_a, ["tabId"]); return (Object.assign(Object.assign({}, link), { active: active && tabId === ((_b = state.activeMenuEntry) === null || _b === void 0 ? void 0 : _b.tabId) })); });
+            return entries.length ? [{ kind: 'menu', tab, entries, active }] : [];
+        }
+        if (!tab.link)
+            return [];
+        return [
+            {
+                kind: 'link',
+                link: {
+                    label: tab.label,
+                    labelTranslationKey: tab.labelTranslationKey,
+                    link: tab.link,
+                    icon: tab.icon,
+                    srcSet: tab.srcSet,
+                },
+                active,
+            },
+        ];
+    });
+}
+function toRowLink(link, active) {
+    return Object.assign(Object.assign({ type: 'link' }, link), { active });
+}
+//# sourceMappingURL=navigation-tabs.js.map

package/lib/core/utils/urls.js

@@ -18,7 +18,9 @@ const common_1 = require("../constants/common");
 function combineUrls(baseURL, ...relativeURLs) {
     let res = baseURL;
     for (let relativeURL of relativeURLs) {
-        res = relativeURL ? res.replace(/[/\\]+$/, '') + '/' + relativeURL.replace(/^[/\\]+/, '') : res;
+        res = relativeURL
+            ? res.replace(/(?<![/\\])[/\\]+$/, '') + '/' + relativeURL.replace(/^[/\\]+/, '')
+            : res;
     }
     return res;
 }

package/lib/icons/ExpandCollapseIcon/ExpandCollapseIcon.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+declare const Icon: (props: IconProps) => React.JSX.Element;
+export declare const ExpandCollapseIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<{
+    color?: string;
+    size?: string;
+    className?: string;
+    'data-component-name'?: string;
+} & React.SVGProps<SVGSVGElement>, "data-component-name" | "size" | keyof React.SVGProps<SVGSVGElement>> & {
+    color?: string;
+    size?: string;
+    className?: string;
+    'data-component-name'?: string;
+} & React.SVGProps<SVGSVGElement>, "$collapse"> & {
+    $collapse?: boolean;
+}, "data-component-name"> & Partial<Pick<import("styled-components").FastOmit<import("styled-components").FastOmit<{
+    color?: string;
+    size?: string;
+    className?: string;
+    'data-component-name'?: string;
+} & React.SVGProps<SVGSVGElement>, "data-component-name" | "size" | keyof React.SVGProps<SVGSVGElement>> & {
+    color?: string;
+    size?: string;
+    className?: string;
+    'data-component-name'?: string;
+} & React.SVGProps<SVGSVGElement>, "$collapse"> & {
+    $collapse?: boolean;
+}, "data-component-name">>> & string & Omit<typeof Icon, keyof React.Component<any, {}, any>>;
+export {};

package/lib/icons/ExpandCollapseIcon/ExpandCollapseIcon.js

@@ -0,0 +1,81 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExpandCollapseIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("path", { className: "corner-top", d: "M12.2432 8.70703H11.2461L11.2422 4.75781L7.29297 4.75391V3.75781H12.2432V8.70703Z" }),
+    react_1.default.createElement("path", { className: "corner-bottom", d: "M4.75781 11.2422L8.70703 11.2461V12.2432H3.75781V7.29297H4.75391L4.75781 11.2422Z" })));
+exports.ExpandCollapseIcon = (0, styled_components_1.default)(Icon).attrs({
+    'data-component-name': 'icons/ExpandCollapseIcon/ExpandCollapseIcon',
+}) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+    transform-box: view-box;
+    transition: transform 0.3s ease-in-out;
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  }
+
+  .corner-top {
+    transform-origin: 10.756px 5.244px;
+  }
+
+  .corner-bottom {
+    transform-origin: 5.244px 10.756px;
+  }
+
+  ${({ $collapse }) => $collapse &&
+    (0, styled_components_1.css) `
+      .corner-top {
+        transform: rotate(180deg);
+      }
+
+      .corner-bottom {
+        transform: rotate(-180deg);
+      }
+    `}
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=ExpandCollapseIcon.js.map

package/lib/index.d.ts

@@ -46,6 +46,11 @@ export * from './components/Navbar/Navbar';
 export * from './components/Navbar/NavbarItem';
 export * from './components/Navbar/NavbarLogo';
 export * from './components/Navbar/NavbarMenu';
+export * from './components/NavigationTabs/NavigationTabs';
+export { NavigationTab } from './components/NavigationTabs/NavigationTab';
+export type { NavigationTabProps } from './components/NavigationTabs/NavigationTab';
+export * from './components/NavigationTabs/NavigationTabMenu';
+export * from './components/NavigationTabs/NavigationTabContent';
 export * from './components/Footer/Footer';
 export * from './components/Footer/FooterColumn';
 export * from './components/Footer/FooterCopyright';
@@ -226,6 +231,7 @@ export * from './icons/LinkIcon/LinkIcon';
 export * from './icons/LaunchIcon/LaunchIcon';
 export * from './icons/MinimizeIcon/MinimizeIcon';
 export * from './icons/MaximizeIcon/MaximizeIcon';
+export * from './icons/ExpandCollapseIcon/ExpandCollapseIcon';
 export * from './icons/MarkdownFullIcon/MarkdownFullIcon';
 export * from './icons/DocumentBlankIcon/DocumentBlankIcon';
 export * from './icons/WarningSquareIcon/WarningSquareIcon';

package/lib/index.js

@@ -36,7 +36,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.markdoc = void 0;
+exports.markdoc = exports.NavigationTab = void 0;
 __exportStar(require("./core"), exports);
 __exportStar(require("./ext/configure"), exports);
 /* Components */
@@ -90,6 +90,12 @@ __exportStar(require("./components/Navbar/Navbar"), exports);
 __exportStar(require("./components/Navbar/NavbarItem"), exports);
 __exportStar(require("./components/Navbar/NavbarLogo"), exports);
 __exportStar(require("./components/Navbar/NavbarMenu"), exports);
+/* NavigationTabs */
+__exportStar(require("./components/NavigationTabs/NavigationTabs"), exports);
+var NavigationTab_1 = require("./components/NavigationTabs/NavigationTab");
+Object.defineProperty(exports, "NavigationTab", { enumerable: true, get: function () { return NavigationTab_1.NavigationTab; } });
+__exportStar(require("./components/NavigationTabs/NavigationTabMenu"), exports);
+__exportStar(require("./components/NavigationTabs/NavigationTabContent"), exports);
 /* Footer */
 __exportStar(require("./components/Footer/Footer"), exports);
 __exportStar(require("./components/Footer/FooterColumn"), exports);
@@ -289,6 +295,7 @@ __exportStar(require("./icons/LinkIcon/LinkIcon"), exports);
 __exportStar(require("./icons/LaunchIcon/LaunchIcon"), exports);
 __exportStar(require("./icons/MinimizeIcon/MinimizeIcon"), exports);
 __exportStar(require("./icons/MaximizeIcon/MaximizeIcon"), exports);
+__exportStar(require("./icons/ExpandCollapseIcon/ExpandCollapseIcon"), exports);
 __exportStar(require("./icons/MarkdownFullIcon/MarkdownFullIcon"), exports);
 __exportStar(require("./icons/DocumentBlankIcon/DocumentBlankIcon"), exports);
 __exportStar(require("./icons/WarningSquareIcon/WarningSquareIcon"), exports);

package/lib/layouts/PageLayout.js

@@ -16,7 +16,7 @@ function PageLayout({ sidebar, children, }) {
 const Container = styled_components_1.default.div `
   display: flex;
   flex-direction: row;
-  min-height: calc(100vh - var(--navbar-height) - var(--banner-height));
+  min-height: calc(100vh - var(--navbar-offset));
 
   @media screen and (min-width: ${utils_1.breakpoints.max}) {
     max-width: var(--container-max-width);

package/lib/layouts/RootLayout.js

@@ -11,8 +11,8 @@ const SkipContent_1 = require("../components/SkipContent/SkipContent");
 const AIAssistantButton_1 = require("../components/Buttons/AIAssistantButton");
 const hooks_1 = require("../core/hooks");
 function RootLayout({ children }) {
-    const { useSearch } = (0, hooks_1.useThemeHooks)();
-    const { askAi } = useSearch();
+    const { useSearchFeatures } = (0, hooks_1.useThemeHooks)();
+    const { askAi } = useSearchFeatures();
     return (react_1.default.createElement("div", { "data-component-name": "layouts/RootLayout" },
         react_1.default.createElement(SkipContent_1.SkipContent, null),
         react_1.default.createElement(Navbar_1.Navbar, null),

package/lib/markdoc/components/CodeWalkthrough/CodeFilters.js

@@ -41,7 +41,7 @@ const FilterWrapper = styled_components_1.default.div `
   padding-right: var(--spacing-xl);
   padding-left: var(--spacing-xl);
   padding-bottom: var(--spacing-xs);
-  top: var(--navbar-height);
+  top: var(--navbar-stack-height);
   background-color: var(--bg-color);
   z-index: var(--z-index-raised);
   max-width: var(--md-content-max-width);

package/lib/markdoc/components/CodeWalkthrough/CodePanel.js

@@ -68,9 +68,9 @@ const CodePanelWrapper = styled_components_1.default.div `
   border: 1px solid var(--code-panel-border-color);
   border-radius: var(--code-panel-border-radius);
   overflow: clip;
-  --code-block-max-height: calc(100vh - var(--navbar-height) - 2 * var(--spacing-xl));
-  height: calc(100vh - var(--navbar-height) - 2 * var(--spacing-xl));
+  --code-block-max-height: calc(100vh - var(--navbar-stack-height) - 2 * var(--spacing-xl));
+  height: calc(100vh - var(--navbar-stack-height) - 2 * var(--spacing-xl));
   position: sticky;
-  top: calc(var(--navbar-height) + var(--spacing-xl));
+  top: calc(var(--navbar-stack-height) + var(--spacing-xl));
 `;
 //# sourceMappingURL=CodePanel.js.map

package/lib/markdoc/components/CodeWalkthrough/CodeWalkthrough.js

@@ -95,7 +95,7 @@ const DocsPanel = styled_components_1.default.div `
   flex-direction: column;
 
   min-height: 0;
-  min-height: calc(100vh - var(--navbar-height));
+  min-height: calc(100vh - var(--navbar-stack-height));
 
   padding-top: var(--spacing-xl);
   padding-right: var(--spacing-xs);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.70.0-next.2",
+  "version": "0.70.0-next.4",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -42,7 +42,7 @@
   "devDependencies": {
     "@babel/core": "7.29.7",
     "@markdoc/markdoc": "0.5.2",
-    "@redocly/realm-asyncapi-sdk": "0.16.0-next.0",
+    "@redocly/realm-asyncapi-sdk": "0.16.0-next.2",
     "@shikijs/types": "3.21.0",
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
@@ -71,7 +71,7 @@
     "webpack": "5.105.2"
   },
   "dependencies": {
-    "@redocly/config": "0.57.0",
+    "@redocly/config": "0.61.0",
     "@tanstack/react-query": "5.62.3",
     "@tanstack/react-virtual": "3.13.0",
     "@xyflow/react": "12.8.3",

package/src/components/Catalog/Catalog.tsx

@@ -256,7 +256,7 @@ const CatalogDescription = styled.p`
 const CatalogPageWrapper = styled.div`
   --sidebar-width: var(--catalog-sidebar-width);
 
-  height: calc(100vh - var(--navbar-height) - var(--banner-height));
+  height: calc(100vh - var(--navbar-offset));
   display: flex;
   flex-direction: column;
   overflow: hidden;

package/src/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityHistorySidebar.tsx

@@ -164,10 +164,10 @@ export function CatalogEntityHistorySidebar({
 
 const SidebarOverlay = styled.div`
   position: fixed;
-  top: calc(var(--navbar-height) + var(--banner-height));
+  top: var(--navbar-offset);
   left: 0;
   width: var(--sidebar-width);
-  height: calc(100vh - var(--navbar-height) - var(--banner-height));
+  height: calc(100vh - var(--navbar-offset));
   padding: var(--catalog-history-sidebar-padding);
   background-color: var(--catalog-history-sidebar-bg-color);
   border-right: 1px solid var(--catalog-history-sidebar-border-color);

package/src/components/Catalog/CatalogEntity/CatalogEntitySchema.tsx

@@ -120,7 +120,7 @@ const SplitViewWrapper = styled.div`
 const SchemaSampleWrapper = styled.div`
   flex: 1;
   position: sticky;
-  top: calc(var(--navbar-height) + var(--banner-height) + var(--spacing-md));
+  top: calc(var(--navbar-offset) + var(--spacing-md));
   align-self: flex-start;
   padding-top: var(--spacing-sm);
 `;

package/src/components/Catalog/CatalogMobileFiltersPanel/CatalogMobileFiltersPanel.tsx

@@ -23,7 +23,7 @@ export function CatalogMobileFiltersPanel({
 
 const CatalogMobileFiltersPanelWrapper = styled.div`
   width: 100%;
-  max-height: calc(100vh - var(--navbar-height) - var(--banner-height));
+  max-height: calc(100vh - var(--navbar-offset));
   overflow-y: auto;
   background: var(--sidebar-bg-color);
   display: flex;

package/src/components/Catalog/CatalogMobileFiltersPanel/CatalogMobileFiltersPanelOverlay.tsx

@@ -27,10 +27,10 @@ export function CatalogMobileFiltersPanelOverlay({
 const CatalogMobileFiltersPanelOverlayWrapper = styled.div`
   display: none;
   position: fixed;
-  top: calc(var(--navbar-height) + var(--banner-height));
+  top: var(--navbar-offset);
   left: 0;
   width: 100%;
-  height: calc(100vh - var(--navbar-height) - var(--banner-height));
+  height: calc(100vh - var(--navbar-offset));
   z-index: 3;
   background: var(--bg-color);
   flex-direction: column;

package/src/components/CodeBlock/CodeBlockControls.tsx

@@ -10,8 +10,7 @@ import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
 import type { ReportButtonProps } from '@redocly/theme/core/hooks';
 import { useThemeHooks, useThemeConfig } from '@redocly/theme/core/hooks';
 import { DeselectIcon } from '@redocly/theme/icons/DeselectIcon/DeselectIcon';
-import { MaximizeIcon } from '@redocly/theme/icons/MaximizeIcon/MaximizeIcon';
-import { MinimizeIcon } from '@redocly/theme/icons/MinimizeIcon/MinimizeIcon';
+import { ExpandCollapseIcon } from '@redocly/theme/icons/ExpandCollapseIcon/ExpandCollapseIcon';
 import { SelectIcon } from '@redocly/theme/icons/SelectIcon/SelectIcon';
 import { WarningSquareIcon } from '@redocly/theme/icons/WarningSquareIcon/WarningSquareIcon';
 import { Button } from '@redocly/theme/components/Button/Button';
@@ -116,16 +115,14 @@ export function CodeBlockControls({
               variant="text"
               size="small"
               data-testid="expand-all"
-              icon={controlsType === 'icon' ? <MaximizeIcon /> : undefined}
+              icon={controlsType === 'icon' ? <ExpandCollapseIcon /> : undefined}
               aria-label="Expand all"
               onClick={expand?.onClick}
             >
               {controlsType !== 'icon' && (expand?.label || 'Expand all')}
             </ControlButton>
           </Tooltip>
-        ) : null}
-
-        {collapse && !codeSnippet?.collapse?.hide ? (
+        ) : collapse && !codeSnippet?.collapse?.hide ? (
           <Tooltip
             tip={
               collapse.props?.tooltip ||
@@ -138,7 +135,7 @@ export function CodeBlockControls({
               variant="text"
               size="small"
               data-testid="collapse-all"
-              icon={controlsType === 'icon' ? <MinimizeIcon /> : undefined}
+              icon={controlsType === 'icon' ? <ExpandCollapseIcon $collapse /> : undefined}
               onClick={collapse?.onClick}
               aria-label="Collapse all"
             >

package/src/components/Consent/Consent.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import type { JSX } from 'react';
+
+import { ConsentBanner } from '@redocly/theme/components/Consent/ConsentBanner';
+import { ConsentDialog } from '@redocly/theme/components/Consent/ConsentDialog';
+import { useConsentTelemetry } from '@redocly/theme/core/hooks';
+
+export function Consent(): JSX.Element {
+  useConsentTelemetry();
+
+  return (
+    <>
+      <ConsentBanner />
+      <ConsentDialog />
+    </>
+  );
+}