@redocly/theme 0.58.0-next.9 → 0.59.0-next.0

package/lib/core/hooks/use-tabs.js

@@ -1,98 +1,42 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useActiveTab = void 0;
 exports.useTabs = useTabs;
 const react_1 = require("react");
-function useTabs({ initialTab, totalTabs, containerRef }) {
-    const [activeTab, setActiveTab] = (0, react_1.useState)(initialTab);
-    const [visibleTabs, setVisibleTabs] = (0, react_1.useState)(Array.from({ length: totalTabs }, (_, i) => i));
-    const [overflowTabs, setOverflowTabs] = (0, react_1.useState)([]);
-    const [allTabsHidden, setAllTabsHidden] = (0, react_1.useState)(false);
+const react_router_dom_1 = require("react-router-dom");
+const MORE_BUTTON_WIDTH = 80;
+const TABS_GAP = 8;
+function useTabs({ activeTab, onTabChange, totalTabs, containerRef }) {
+    const [tabs, setTabs] = (0, react_1.useState)({
+        visible: Array.from({ length: totalTabs }, (_, i) => i),
+        overflow: [],
+    });
     const tabRefs = (0, react_1.useRef)([]);
+    const tabWidthsRef = (0, react_1.useRef)([]);
     const tabLabelsRef = (0, react_1.useRef)([]);
-    const resizeTimeoutRef = (0, react_1.useRef)(undefined);
-    const [ready, setReady] = (0, react_1.useState)(false);
-    const hasCalculatedOnce = (0, react_1.useRef)(false);
-    const lastWidthRef = (0, react_1.useRef)(0);
-    const originalOrderRef = (0, react_1.useRef)([]);
-    (0, react_1.useEffect)(() => {
-        originalOrderRef.current = Array.from({ length: totalTabs }, (_, i) => i);
-    }, [totalTabs]);
+    const allTabsHidden = (0, react_1.useMemo)(() => tabs.visible.length === 0, [tabs.visible]);
     const setTabRef = (0, react_1.useCallback)((element, index) => {
         tabRefs.current[index] = element;
-        if (element) {
-            const label = element.getAttribute('data-label');
-            if (label) {
-                tabLabelsRef.current[index] = label;
-            }
+        const width = element === null || element === void 0 ? void 0 : element.offsetWidth;
+        if (width) {
+            tabWidthsRef.current[index] = width;
+        }
+        const label = element === null || element === void 0 ? void 0 : element.getAttribute('data-label');
+        if (label) {
+            tabLabelsRef.current[index] = label;
         }
-    }, []);
-    const getTabId = (0, react_1.useCallback)((label, index) => {
-        const cleanLabel = label.replace(/\s+/g, '-').toLowerCase();
-        return `${cleanLabel}-${index}`;
     }, []);
     const focusTab = (index) => {
         const currentElement = tabRefs.current[index];
-        if (currentElement) {
-            currentElement.focus();
-        }
+        currentElement === null || currentElement === void 0 ? void 0 : currentElement.focus();
     };
     const onTabSelect = (0, react_1.useCallback)((index) => {
         var _a;
         focusTab(index);
         const label = (_a = tabRefs.current[index]) === null || _a === void 0 ? void 0 : _a.getAttribute('data-label');
         if (label)
-            setActiveTab(label);
-    }, []);
-    const onTabClick = (0, react_1.useCallback)((labelOrIndex) => {
-        var _a;
-        let clickedIndex;
-        if (typeof labelOrIndex === 'string') {
-            clickedIndex = tabRefs.current.findIndex((ref) => (ref === null || ref === void 0 ? void 0 : ref.getAttribute('data-label')) === labelOrIndex);
-            if (clickedIndex === -1)
-                return;
-        }
-        else {
-            clickedIndex = labelOrIndex;
-        }
-        if (allTabsHidden) {
-            const label = tabLabelsRef.current[clickedIndex];
-            if (label) {
-                setActiveTab(label);
-                focusTab(clickedIndex);
-            }
-            return;
-        }
-        if (overflowTabs.includes(clickedIndex)) {
-            const newVisibleTabs = [...visibleTabs];
-            const newOverflowTabs = [...overflowTabs];
-            const clickedIdxInOverflow = newOverflowTabs.indexOf(clickedIndex);
-            if (clickedIdxInOverflow !== -1) {
-                newOverflowTabs.splice(clickedIdxInOverflow, 1);
-            }
-            const lastVisible = newVisibleTabs.pop();
-            if (lastVisible !== undefined) {
-                newOverflowTabs.unshift(lastVisible);
-            }
-            newVisibleTabs.push(clickedIndex);
-            setVisibleTabs(newVisibleTabs);
-            setOverflowTabs(newOverflowTabs);
-            requestAnimationFrame(() => {
-                var _a;
-                const label = (_a = tabRefs.current[clickedIndex]) === null || _a === void 0 ? void 0 : _a.getAttribute('data-label');
-                if (label) {
-                    setActiveTab(label);
-                    focusTab(clickedIndex);
-                }
-            });
-        }
-        else {
-            const label = (_a = tabRefs.current[clickedIndex]) === null || _a === void 0 ? void 0 : _a.getAttribute('data-label');
-            if (label) {
-                setActiveTab(label);
-                focusTab(clickedIndex);
-            }
-        }
-    }, [visibleTabs, overflowTabs, allTabsHidden]);
+            onTabChange(label);
+    }, [onTabChange]);
     const handleKeyboard = (0, react_1.useCallback)((event, index) => {
         let newIndex = index;
         if (event.key === 'ArrowRight') {
@@ -114,168 +58,134 @@ function useTabs({ initialTab, totalTabs, containerRef }) {
         }
         onTabSelect(newIndex);
     }, [totalTabs, onTabSelect]);
+    const replaceLastVisibleTabWithClickedOverflowTab = (0, react_1.useCallback)((clickedIndex) => {
+        const { visible: visibleTabs, overflow: overflowTabs } = tabs;
+        // Indexes of visible tabs should be sorted(asc), to replace the last visible tab with the clicked tab
+        const newVisibleTabs = [...visibleTabs].sort((a, b) => a - b);
+        const newOverflowTabs = [...overflowTabs];
+        const clickedIdxInOverflow = newOverflowTabs.indexOf(clickedIndex);
+        if (clickedIdxInOverflow !== -1) {
+            const lastVisible = newVisibleTabs[newVisibleTabs.length - 1];
+            newOverflowTabs.splice(clickedIdxInOverflow, 1);
+            newOverflowTabs.unshift(lastVisible);
+            newVisibleTabs.splice(newVisibleTabs.length - 1, 1);
+            newVisibleTabs.unshift(clickedIndex);
+        }
+        setTabs({
+            visible: newVisibleTabs,
+            overflow: newOverflowTabs,
+        });
+    }, [tabs]);
+    const onTabClick = (0, react_1.useCallback)((labelOrIndex) => {
+        const clickedIndex = typeof labelOrIndex === 'string'
+            ? tabRefs.current.findIndex((ref) => (ref === null || ref === void 0 ? void 0 : ref.getAttribute('data-label')) === labelOrIndex)
+            : labelOrIndex;
+        if (clickedIndex === -1)
+            return;
+        const hasOverflowTabs = tabs.overflow.length > 0;
+        if (hasOverflowTabs && !allTabsHidden && tabs.overflow.includes(clickedIndex)) {
+            replaceLastVisibleTabWithClickedOverflowTab(clickedIndex);
+        }
+        const label = tabLabelsRef.current[clickedIndex];
+        if (label) {
+            onTabChange(label);
+            focusTab(clickedIndex);
+        }
+    }, [allTabsHidden, tabs.overflow, onTabChange, replaceLastVisibleTabWithClickedOverflowTab]);
     const calculateVisibleTabs = (0, react_1.useCallback)(() => {
         const container = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current;
         if (!container)
             return;
-        const contentWrapper = container.closest('div');
-        if (!contentWrapper) {
-            setVisibleTabs(Array.from({ length: totalTabs }, (_, i) => i));
-            setOverflowTabs([]);
-            setAllTabsHidden(false);
-            return;
-        }
-        const containerWidth = container.offsetWidth - 60;
-        const tabElements = container.querySelectorAll('[role="tab"]');
-        const moreButtonWidth = 80;
-        const safetyMargin = 20;
-        const tabWidths = Array.from(tabElements).map((el) => el.offsetWidth);
-        const tabLabels = Array.from(tabElements).map((el) => el.getAttribute('data-label') || '');
-        const tabTypes = Array.from(tabElements).map((el) => el.getAttribute('data-type') || '');
-        const hasLongLabels = tabLabels.some((label) => label.length > 30);
-        const minVisibleTabs = hasLongLabels ? 1 : 2;
+        const containerWidth = container.offsetWidth;
+        const tabWidths = tabWidthsRef.current;
         const activeTabIndex = tabRefs.current.findIndex((ref) => (ref === null || ref === void 0 ? void 0 : ref.getAttribute('data-label')) === activeTab);
-        let currentWidth = 0;
-        const visible = [];
+        // Active tab should always be visible, so we include it at the beginning of the array
+        let tabsWidth = activeTabIndex !== -1 ? tabWidths[activeTabIndex] : 0;
+        const visible = activeTabIndex !== -1 ? [activeTabIndex] : [];
         const overflow = [];
-        let minTabsWidth = 0;
-        Array.from({ length: minVisibleTabs }).forEach((_, i) => {
-            if (i < tabWidths.length) {
-                minTabsWidth += tabWidths[i] + (i > 0 ? moreButtonWidth + safetyMargin : 0);
+        for (let i = 0; i < tabWidths.length; i++) {
+            // Skip active tab, it was added initially
+            if (i === activeTabIndex) {
+                continue;
             }
-        });
-        if (minTabsWidth > containerWidth) {
-            setVisibleTabs([]);
-            setOverflowTabs(Array.from({ length: totalTabs }, (_, i) => i));
-            setAllTabsHidden(true);
-            return;
-        }
-        const tabsByType = new Map();
-        Array.from({ length: totalTabs }).forEach((_, i) => {
-            var _a;
-            const type = tabTypes[i] || 'default';
-            if (!tabsByType.has(type)) {
-                tabsByType.set(type, []);
+            const tabWidthWithGap = tabWidths[i] + TABS_GAP;
+            const projectedWidth = tabsWidth + tabWidthWithGap;
+            if (projectedWidth <= containerWidth) {
+                visible.push(i);
+                tabsWidth += tabWidthWithGap;
             }
-            (_a = tabsByType.get(type)) === null || _a === void 0 ? void 0 : _a.push(i);
-        });
-        tabsByType.forEach((tabIndices) => {
-            let typeCurrentWidth = currentWidth;
-            const typeVisible = [];
-            const typeOverflow = [];
-            tabIndices.slice(0, minVisibleTabs).forEach((tabIndex) => {
-                const tabWidth = tabWidths[tabIndex];
-                const projectedWidth = typeCurrentWidth +
-                    tabWidth +
-                    (typeVisible.length > 0 ? moreButtonWidth + safetyMargin : 0);
-                if (projectedWidth <= containerWidth) {
-                    typeVisible.push(tabIndex);
-                    typeCurrentWidth += tabWidth;
-                }
-                else {
-                    typeOverflow.push(tabIndex);
-                }
-            });
-            tabIndices.slice(minVisibleTabs).forEach((tabIndex) => {
-                const tabWidth = tabWidths[tabIndex];
-                const projectedWidth = typeCurrentWidth + tabWidth + moreButtonWidth + safetyMargin;
-                if (projectedWidth <= containerWidth) {
-                    typeVisible.push(tabIndex);
-                    typeCurrentWidth += tabWidth;
-                }
-                else {
-                    typeOverflow.push(tabIndex);
-                }
-            });
-            visible.push(...typeVisible);
-            overflow.push(...typeOverflow);
-            currentWidth = typeCurrentWidth;
-        });
-        if (activeTabIndex !== -1 && !visible.includes(activeTabIndex)) {
-            if (visible.length > 0) {
+            else {
+                overflow.push(i);
+            }
+        }
+        if (overflow.length > 0) {
+            tabsWidth += MORE_BUTTON_WIDTH;
+            // Remove tabs starting from the end of the array until the width of the visible tabs is less than the container width
+            while (tabsWidth > containerWidth && visible.length) {
                 const removed = visible.pop();
                 if (removed !== undefined) {
                     overflow.unshift(removed);
+                    tabsWidth -= tabWidths[removed];
                 }
             }
-            visible.push(activeTabIndex);
-            const activeOverflowIndex = overflow.indexOf(activeTabIndex);
-            if (activeOverflowIndex !== -1)
-                overflow.splice(activeOverflowIndex, 1);
         }
-        setVisibleTabs(visible);
-        setOverflowTabs(overflow);
-        setAllTabsHidden(visible.length === 0);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [containerRef, totalTabs]);
+        setTabs({
+            visible,
+            overflow,
+        });
+    }, [containerRef, activeTab]);
     (0, react_1.useEffect)(() => {
         if (!(containerRef === null || containerRef === void 0 ? void 0 : containerRef.current))
             return;
-        const ensureTabsReady = () => {
-            const allTabsReady = tabRefs.current.length === totalTabs && tabRefs.current.every((tab) => tab === null || tab === void 0 ? void 0 : tab.offsetWidth);
-            if (!allTabsReady) {
-                resizeTimeoutRef.current = requestAnimationFrame(ensureTabsReady);
-                return;
-            }
-            calculateVisibleTabs();
-            hasCalculatedOnce.current = true;
-        };
-        resizeTimeoutRef.current = requestAnimationFrame(ensureTabsReady);
-        let resizeTimeout;
+        let resizeTimeout = requestAnimationFrame(calculateVisibleTabs);
         const handleResize = () => {
-            if (!hasCalculatedOnce.current)
-                return;
             if (resizeTimeout) {
                 cancelAnimationFrame(resizeTimeout);
             }
-            resizeTimeout = requestAnimationFrame(() => {
-                if (resizeTimeoutRef.current) {
-                    cancelAnimationFrame(resizeTimeoutRef.current);
-                }
-                resizeTimeoutRef.current = requestAnimationFrame(() => {
-                    const container = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current;
-                    if (!container)
-                        return;
-                    const currentWidth = container.offsetWidth;
-                    if (Math.abs(lastWidthRef.current - currentWidth) > 5) {
-                        lastWidthRef.current = currentWidth;
-                        calculateVisibleTabs();
-                    }
-                });
-            });
+            resizeTimeout = requestAnimationFrame(calculateVisibleTabs);
         };
-        const resizeObserver = new ResizeObserver(handleResize);
-        resizeObserver.observe(containerRef.current);
         window.addEventListener('resize', handleResize);
         return () => {
-            resizeObserver.disconnect();
             window.removeEventListener('resize', handleResize);
-            if (resizeTimeoutRef.current) {
-                cancelAnimationFrame(resizeTimeoutRef.current);
-            }
-            if (resizeTimeout) {
-                cancelAnimationFrame(resizeTimeout);
-            }
+            cancelAnimationFrame(resizeTimeout);
         };
     }, [containerRef, totalTabs, calculateVisibleTabs]);
-    (0, react_1.useEffect)(() => {
-        const raf = requestAnimationFrame(() => {
-            setReady(true);
-            calculateVisibleTabs();
-        });
-        return () => cancelAnimationFrame(raf);
-    }, [calculateVisibleTabs]);
     return {
-        activeTab,
-        setActiveTab,
         setTabRef,
         onTabClick,
         handleKeyboard,
-        getTabId,
-        visibleTabs,
-        overflowTabs,
-        ready,
+        visibleTabs: tabs.visible,
+        overflowTabs: tabs.overflow,
         allTabsHidden,
     };
 }
+const useActiveTab = ({ initialTab, tabsId }) => {
+    const [searchParams, setSearchParams] = (0, react_router_dom_1.useSearchParams)();
+    const [activeTab, setActiveTab] = (0, react_1.useState)(getInitialTab({ initialTab, searchParams, tabsId }));
+    const prevActiveTabRef = (0, react_1.useRef)(activeTab);
+    (0, react_1.useEffect)(() => {
+        const hasActiveTabChanged = prevActiveTabRef.current !== activeTab;
+        if (!tabsId || !hasActiveTabChanged) {
+            return;
+        }
+        prevActiveTabRef.current = activeTab;
+        setSearchParams((searchParams) => {
+            searchParams.set(tabsId, activeTab);
+            return searchParams;
+        });
+    }, [activeTab, setSearchParams, tabsId]);
+    return {
+        activeTab,
+        setActiveTab,
+    };
+};
+exports.useActiveTab = useActiveTab;
+const getInitialTab = ({ initialTab, searchParams, tabsId }) => {
+    let resultTab = initialTab;
+    if (tabsId) {
+        const tabFromUrl = searchParams.get(tabsId);
+        resultTab = tabFromUrl ? tabFromUrl : resultTab;
+    }
+    return resultTab;
+};
 //# sourceMappingURL=use-tabs.js.map

package/lib/core/openapi/index.d.ts

@@ -4,6 +4,7 @@ export type { TFunction, TOptions } from '../types/l10n';
 export type { SelectOption, SelectProps } from '../types/select';
 export { IS_BROWSER } from '../utils/dom';
 export { addLeadingSlash, removeLeadingSlash, getPathPrefix, combineUrls, addTrailingSlash, withPathPrefix, } from '../utils/urls';
+export { capitalize } from '../utils/string';
 export { typedMemo } from '../hoc/typedMemo';
 export { useMount } from '../hooks/use-mount';
 export { GlobalStyle } from '../styles/global';

package/lib/core/openapi/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ThemeDataContext = exports.isObject = exports.isNotNull = exports.isString = exports.isUndefined = exports.SecurityVariablesEnvSuffix = exports.useDialogHotKeys = exports.useSearchDialog = exports.useModalScrollLock = exports.useActiveSectionId = exports.useOutsideClick = exports.useThemeHooks = exports.useFocusTrap = exports.getUserAgent = exports.ClipboardService = exports.isPrimitive = exports.breakpoints = exports.GlobalStyle = exports.useMount = exports.typedMemo = exports.withPathPrefix = exports.addTrailingSlash = exports.combineUrls = exports.getPathPrefix = exports.removeLeadingSlash = exports.addLeadingSlash = exports.IS_BROWSER = void 0;
+exports.ThemeDataContext = exports.isObject = exports.isNotNull = exports.isString = exports.isUndefined = exports.SecurityVariablesEnvSuffix = exports.useDialogHotKeys = exports.useSearchDialog = exports.useModalScrollLock = exports.useActiveSectionId = exports.useOutsideClick = exports.useThemeHooks = exports.useFocusTrap = exports.getUserAgent = exports.ClipboardService = exports.isPrimitive = exports.breakpoints = exports.GlobalStyle = exports.useMount = exports.typedMemo = exports.capitalize = exports.withPathPrefix = exports.addTrailingSlash = exports.combineUrls = exports.getPathPrefix = exports.removeLeadingSlash = exports.addLeadingSlash = exports.IS_BROWSER = void 0;
 var dom_1 = require("../utils/dom");
 Object.defineProperty(exports, "IS_BROWSER", { enumerable: true, get: function () { return dom_1.IS_BROWSER; } });
 var urls_1 = require("../utils/urls");
@@ -10,6 +10,8 @@ Object.defineProperty(exports, "getPathPrefix", { enumerable: true, get: functio
 Object.defineProperty(exports, "combineUrls", { enumerable: true, get: function () { return urls_1.combineUrls; } });
 Object.defineProperty(exports, "addTrailingSlash", { enumerable: true, get: function () { return urls_1.addTrailingSlash; } });
 Object.defineProperty(exports, "withPathPrefix", { enumerable: true, get: function () { return urls_1.withPathPrefix; } });
+var string_1 = require("../utils/string");
+Object.defineProperty(exports, "capitalize", { enumerable: true, get: function () { return string_1.capitalize; } });
 var typedMemo_1 = require("../hoc/typedMemo");
 Object.defineProperty(exports, "typedMemo", { enumerable: true, get: function () { return typedMemo_1.typedMemo; } });
 var use_mount_1 = require("../hooks/use-mount");

package/lib/core/types/l10n.d.ts

@@ -1,5 +1,5 @@
 import type { TOptions } from 'i18next';
-export type TranslationKey = 'dev.newApp' | 'dev.newApp.text' | 'dev.sidebar.header' | 'dev.sidebar.footer.text' | 'dev.create.app.dialog.appName.placeholder' | 'dev.create.app.dialog.appName.error' | 'dev.create.app.dialog.selectAPIs' | 'dev.create.app.dialog.description' | 'dev.create.app.dialog.description.placeholder' | 'dev.create.app.dialog.create' | 'dev.create.app.dialog.cancel' | 'dev.main.tab.appKeys' | 'dev.main.tab.logs' | 'dev.app.description.title' | 'dev.edit.description.dialog.title' | 'dev.edit.description.dialog.save' | 'dev.edit.description.dialog.cancel' | 'dev.edit.apis.dialog.selectedAPIs' | 'dev.app.key.create' | 'dev.create.key.dialog.title' | 'dev.create.key.dialog.create' | 'dev.create.key.dialog.cancel' | 'dev.app.edit' | 'dev.app.delete' | 'dev.edit.app.dialog.title' | 'dev.edit.app.dialog.save' | 'dev.edit.app.dialog.cancel' | 'dev.delete.app.dialog.title' | 'dev.delete.app.dialog.confirmation' | 'dev.delete.app.dialog.delete' | 'dev.delete.app.dialog.cancel' | 'dev.app.key.roll' | 'dev.roll.key.dialog.title' | 'dev.roll.key.dialog.apiKey' | 'dev.roll.key.dialog.expires' | 'dev.roll.key.dialog.confirmation' | 'dev.roll.key.dialog.cancel' | 'dev.roll.key.dialog.roll' | 'dev.update.key.dialog.title' | 'dev.update.key.dialog.update' | 'dev.update.key.dialog.cancel' | 'dev.app.key.api.name' | 'dev.app.key.api.status' | 'dev.app.key.api.edit' | 'dev.edit.apis.dialog.title' | 'dev.edit.apis.dialog.apiKey' | 'dev.edit.apis.dialog.save' | 'dev.edit.apis.dialog.cancel' | 'dev.select.placeholder' | 'dev.app.overview.status.pending' | 'dev.app.overview.status.approved' | 'dev.app.overview.status.revoked' | 'dev.app.overview.status' | 'dev.app.overview.non-production' | 'dev.app.overview.production' | 'dev.app.overview.clientId' | 'dev.app.overview.apiKey' | 'dev.app.key.revoke' | 'dev.revoke.key.dialog.title' | 'dev.revoke.key.dialog.apiKey' | 'dev.revoke.key.dialog.expires' | 'dev.revoke.key.dialog.confirmation' | 'dev.revoke.key.dialog.revoke' | 'dev.revoke.key.dialog.cancel' | 'dev.app.overview.expires' | 'dev.app.overview.created' | 'dev.app.overview.visibilityToggle.hide' | 'dev.app.overview.visibilityToggle.show' | 'search.loading' | 'search.noResults.title' | 'search.keys.navigate' | 'search.keys.select' | 'search.keys.exit' | 'search.label' | 'search.cancel' | 'search.recent' | 'search.navbar.label' | 'search.suggested' | 'search.showMore' | 'search.filter.title' | 'search.filter.reset' | 'search.filter.field.reset' | 'search.ai.welcomeText' | 'search.ai.newConversation' | 'search.ai.backToSearch' | 'search.ai.placeholder' | 'search.ai.generatingResponse' | 'search.ai.followUpQuestion' | 'search.ai.suggestionsTitle' | 'search.ai.thinkingText' | 'search.ai.resourcesFound' | 'search.ai.resourcesFound.basedOn' | 'search.ai.resourcesFound.resources' | 'search.ai.button' | 'search.ai.label' | 'search.ai.disclaimer' | 'search.ai.error.description' | 'search.ai.error.description.forbidden' | 'search.ai.error.description.unauthorized' | 'search.ai.error.header' | 'search.ai.error.header.forbidden' | 'search.ai.error.header.unauthorized' | 'toc.header' | 'footer.copyrightText' | 'page.homeButton' | 'page.forbidden.title' | 'page.notFound.title' | 'page.notFound.description' | 'page.lastUpdated.timeago' | 'page.lastUpdated.on' | 'catalog.filters.placeholder' | 'catalog.filters.title' | 'catalog.filters.add' | 'catalog.filters.clearAll' | 'catalog.filters.select.addFilter' | 'catalog.filters.select.all' | 'catalog.filters.done' | 'catalog.catalogs.all.title' | 'catalog.catalogs.all.description' | 'catalog.catalogs.all.switcherLabel' | 'catalog.catalogs.service.title' | 'catalog.catalogs.service.description' | 'catalog.catalogs.service.switcherLabel' | 'catalog.catalogs.user.title' | 'catalog.catalogs.user.description' | 'catalog.catalogs.user.switcherLabel' | 'catalog.catalogs.team.title' | 'catalog.catalogs.team.description' | 'catalog.catalogs.team.switcherLabel' | 'catalog.catalogs.domain.title' | 'catalog.catalogs.domain.description' | 'catalog.catalogs.domain.switcherLabel' | 'catalog.catalogs.apiDescription.title' | 'catalog.catalogs.apiDescription.description' | 'catalog.catalogs.apiDescription.switcherLabel' | 'catalog.catalogs.dataSchema.title' | 'catalog.catalogs.dataSchema.description' | 'catalog.catalogs.dataSchema.switcherLabel' | 'catalog.catalogs.apiOperation.title' | 'catalog.catalogs.apiOperation.description' | 'catalog.catalogs.apiOperation.switcherLabel' | 'catalog.entity.metadata.title' | 'catalog.entity.schema.title' | 'catalog.entity.properties.apiDescription.title' | 'sidebar.menu.backLabel' | 'sidebar.menu.backToLabel' | 'sidebar.actions.show' | 'sidebar.actions.hide' | 'sidebar.actions.changeToSingleColumn' | 'sidebar.actions.changeToTwoColumns' | 'sidebar.actions.singleColumn' | 'sidebar.actions.twoColumns' | 'versionPicker.label' | 'versionPicker.unversioned' | 'codeSnippet.copy.buttonText' | 'codeSnippet.copy.tooltipText' | 'codeSnippet.copy.toasterText' | 'markdown.editPage.text' | 'feedback.settings.comment.submitText' | 'feedback.settings.comment.label' | 'feedback.settings.comment.send' | 'feedback.settings.comment.cancel' | 'feedback.settings.comment.satisfiedLabel' | 'feedback.settings.comment.neutralLabel' | 'feedback.settings.comment.dissatisfiedLabel' | 'feedback.settings.submitText' | 'feedback.settings.label' | 'feedback.settings.reasons.label' | 'feedback.submit' | 'feedback.cancel' | 'feedback.settings.comment.likeLabel' | 'feedback.settings.comment.dislikeLabel' | 'feedback.sentiment.thumbUp' | 'feedback.sentiment.thumbDown' | 'feedback.settings.leftScaleLabel' | 'feedback.settings.rightScaleLabel' | 'feedback.settings.optionalEmail.placeholder' | 'feedback.settings.optionalEmail.label' | 'codeSnippet.report.buttonText' | 'codeSnippet.report.tooltipText' | 'codeSnippet.report.label' | 'codeSnippet.expand.tooltipText' | 'codeSnippet.collapse.tooltipText' | 'userMenu.login' | 'userMenu.logout' | 'userMenu.devOnboardingLabel' | 'mobileMenu.mainMenu' | 'mobileMenu.previous' | 'mobileMenu.products' | 'mobileMenu.version' | 'navbar.products' | 'page.nextButton' | 'page.previousButton' | 'page.actions.copyButtonText' | 'page.actions.copyTitle' | 'page.actions.copyDescription' | 'page.actions.viewAsMdTitle' | 'page.actions.viewAsMdButtonText' | 'page.actions.viewAsMdDescription' | 'page.actions.chatGptTitle' | 'page.actions.chatGptButtonText' | 'page.actions.chatGptDescription' | 'page.actions.claudeTitle' | 'page.actions.claudeButtonText' | 'page.actions.claudeDescription' | 'openapi.download.description.title' | 'openapi.info.title' | 'openapi.info.contact.url' | 'openapi.info.contact.name' | 'openapi.info.license' | 'openapi.info.termsOfService' | 'openapi.info.metadata.title' | 'openapi.key' | 'openapi.value' | 'openapi.enum' | 'openapi.items' | 'openapi.default' | 'openapi.variable' | 'openapi.variables' | 'openapi.actions.show' | 'openapi.actions.hide' | 'openapi.actions.more' | 'openapi.languages.title' | 'openapi.servers.title' | 'openapi.operations' | 'openapi.webhooks' | 'openapi.description' | 'openapi.badges.deprecated' | 'openapi.badges.required' | 'openapi.badges.webhook' | 'openapi.request' | 'openapi.path' | 'openapi.query' | 'openapi.cookie' | 'openapi.header' | 'openapi.body' | 'openapi.responses' | 'openapi.response' | 'openapi.callbacks' | 'openapi.callbackRequest' | 'openapi.callbackResponse' | 'openapi.payload' | 'openapi.discriminator' | 'openapi.contentType' | 'openapi.tryIt' | 'openapi.loading' | 'openapi.example' | 'openapi.examples' | 'openapi.additionalProperties' | 'openapi.patternProperties' | 'openapi.required' | 'openapi.recursive' | 'openapi.complex' | 'openapi.hideExample' | 'openapi.showExample' | 'openapi.expandAll' | 'openapi.collapseAll' | 'openapi.viewSecurityDetails' | 'openapi.noResponseExample' | 'openapi.discriminator.searchPlaceholder' | 'openapi.discriminator.searchNoResults' | 'openapi.noResponseContent' | 'openapi.noRequestPayload' | 'openapi.hidePattern' | 'openapi.showPattern' | 'openapi.authorizationUrl' | 'openapi.tokenUrl' | 'openapi.refreshUrl' | 'openapi.showOptionalScopes' | 'openapi.hideOptionalScopes' | 'openapi.security' | 'openapi.httpAuthorizationScheme' | 'openapi.bearerFormat' | 'openapi.parameterName' | 'openapi.flowType' | 'openapi.connectUrl' | 'openapi.requiredScopes' | 'openapi.unsupportedLanguage' | 'openapi.failedToGenerateCodeSample' | 'openapi.schemaCatalogLink.title' | 'openapi.schemaCatalogLink.copyButtonTooltip' | 'openapi.schemaCatalogLink.copiedTooltip' | 'asyncapi.download.description.title' | 'asyncapi.info.title' | 'graphql.queries' | 'graphql.mutations' | 'graphql.subscriptions' | 'graphql.directives' | 'graphql.objects' | 'graphql.interfaces' | 'graphql.unions' | 'graphql.enums' | 'graphql.inputs' | 'graphql.scalars' | 'graphql.arguments.label' | 'graphql.arguments.show' | 'graphql.arguments.hide' | 'graphql.arguments.here' | 'graphql.returnTypes.label' | 'graphql.returnTypes.show' | 'graphql.returnTypes.hide' | 'graphql.possibleTypes' | 'graphql.defaultValue' | 'graphql.deprecationReason' | 'graphql.requiredScopes' | 'graphql.viewSecurityDetails' | 'graphql.objectScopes' | 'graphql.fieldScopes' | 'graphql.implementedInterfaces' | 'graphql.nonNull' | 'graphql.required' | 'graphql.deprecated' | 'graphql.variables' | 'graphql.querySample' | 'graphql.mutationSample' | 'graphql.subscriptionSample' | 'graphql.responseSample' | 'graphql.locations' | 'graphql.sample' | 'graphql.referenced' | 'graphql.content.fragment' | 'codeWalkthrough.download' | 'codeWalkthrough.preview' | 'time.justNow' | 'time.past.second' | 'time.past.seconds' | 'time.past.minute' | 'time.past.minutes' | 'time.past.hour' | 'time.past.hours' | 'time.past.day' | 'time.past.days' | 'time.past.week' | 'time.past.weeks' | 'time.past.month' | 'time.past.months' | 'time.past.year' | 'time.past.years' | 'page.internalServerError.title' | 'page.internalServerError.description' | 'page.skipToContent.label';
+export type TranslationKey = 'dev.newApp' | 'dev.newApp.text' | 'dev.sidebar.header' | 'dev.sidebar.footer.text' | 'dev.create.app.dialog.appName.placeholder' | 'dev.create.app.dialog.appName.error' | 'dev.create.app.dialog.selectAPIs' | 'dev.create.app.dialog.description' | 'dev.create.app.dialog.description.placeholder' | 'dev.create.app.dialog.create' | 'dev.create.app.dialog.cancel' | 'dev.main.tab.appKeys' | 'dev.main.tab.logs' | 'dev.app.description.title' | 'dev.edit.description.dialog.title' | 'dev.edit.description.dialog.save' | 'dev.edit.description.dialog.cancel' | 'dev.edit.apis.dialog.selectedAPIs' | 'dev.app.key.create' | 'dev.create.key.dialog.title' | 'dev.create.key.dialog.create' | 'dev.create.key.dialog.cancel' | 'dev.app.edit' | 'dev.app.delete' | 'dev.edit.app.dialog.title' | 'dev.edit.app.dialog.save' | 'dev.edit.app.dialog.cancel' | 'dev.delete.app.dialog.title' | 'dev.delete.app.dialog.confirmation' | 'dev.delete.app.dialog.delete' | 'dev.delete.app.dialog.cancel' | 'dev.app.key.roll' | 'dev.roll.key.dialog.title' | 'dev.roll.key.dialog.apiKey' | 'dev.roll.key.dialog.expires' | 'dev.roll.key.dialog.confirmation' | 'dev.roll.key.dialog.cancel' | 'dev.roll.key.dialog.roll' | 'dev.update.key.dialog.title' | 'dev.update.key.dialog.update' | 'dev.update.key.dialog.cancel' | 'dev.app.key.api.name' | 'dev.app.key.api.status' | 'dev.app.key.api.edit' | 'dev.edit.apis.dialog.title' | 'dev.edit.apis.dialog.apiKey' | 'dev.edit.apis.dialog.save' | 'dev.edit.apis.dialog.cancel' | 'dev.select.placeholder' | 'dev.app.overview.status.pending' | 'dev.app.overview.status.approved' | 'dev.app.overview.status.revoked' | 'dev.app.overview.status' | 'dev.app.overview.non-production' | 'dev.app.overview.production' | 'dev.app.overview.clientId' | 'dev.app.overview.apiKey' | 'dev.app.key.revoke' | 'dev.revoke.key.dialog.title' | 'dev.revoke.key.dialog.apiKey' | 'dev.revoke.key.dialog.expires' | 'dev.revoke.key.dialog.confirmation' | 'dev.revoke.key.dialog.revoke' | 'dev.revoke.key.dialog.cancel' | 'dev.app.overview.expires' | 'dev.app.overview.created' | 'dev.app.overview.visibilityToggle.hide' | 'dev.app.overview.visibilityToggle.show' | 'search.loading' | 'search.noResults.title' | 'search.keys.navigate' | 'search.keys.select' | 'search.keys.exit' | 'search.label' | 'search.cancel' | 'search.recent' | 'search.navbar.label' | 'search.suggested' | 'search.showMore' | 'search.filter.title' | 'search.filter.reset' | 'search.filter.field.reset' | 'search.ai.welcomeText' | 'search.ai.newConversation' | 'search.ai.backToSearch' | 'search.ai.placeholder' | 'search.ai.generatingResponse' | 'search.ai.followUpQuestion' | 'search.ai.suggestionsTitle' | 'search.ai.thinkingText' | 'search.ai.resourcesFound' | 'search.ai.resourcesFound.basedOn' | 'search.ai.resourcesFound.resources' | 'search.ai.button' | 'search.ai.label' | 'search.ai.disclaimer' | 'search.ai.error.description' | 'search.ai.error.description.forbidden' | 'search.ai.error.description.unauthorized' | 'search.ai.error.header' | 'search.ai.error.header.forbidden' | 'search.ai.error.header.unauthorized' | 'toc.header' | 'footer.copyrightText' | 'page.homeButton' | 'page.forbidden.title' | 'page.notFound.title' | 'page.notFound.description' | 'page.lastUpdated.timeago' | 'page.lastUpdated.on' | 'catalog.filters.placeholder' | 'catalog.filters.title' | 'catalog.filters.add' | 'catalog.filters.clearAll' | 'catalog.filters.select.addFilter' | 'catalog.filters.select.all' | 'catalog.filters.done' | 'catalog.catalogs.all.title' | 'catalog.catalogs.all.description' | 'catalog.catalogs.all.switcherLabel' | 'catalog.catalogs.service.title' | 'catalog.catalogs.service.description' | 'catalog.catalogs.service.switcherLabel' | 'catalog.catalogs.user.title' | 'catalog.catalogs.user.description' | 'catalog.catalogs.user.switcherLabel' | 'catalog.catalogs.team.title' | 'catalog.catalogs.team.description' | 'catalog.catalogs.team.switcherLabel' | 'catalog.catalogs.domain.title' | 'catalog.catalogs.domain.description' | 'catalog.catalogs.domain.switcherLabel' | 'catalog.catalogs.apiDescription.title' | 'catalog.catalogs.apiDescription.description' | 'catalog.catalogs.apiDescription.switcherLabel' | 'catalog.catalogs.dataSchema.title' | 'catalog.catalogs.dataSchema.description' | 'catalog.catalogs.dataSchema.switcherLabel' | 'catalog.catalogs.apiOperation.title' | 'catalog.catalogs.apiOperation.description' | 'catalog.catalogs.apiOperation.switcherLabel' | 'catalog.entity.metadata.title' | 'catalog.entity.schema.title' | 'catalog.entity.properties.apiDescription.title' | 'sidebar.menu.backLabel' | 'sidebar.menu.backToLabel' | 'sidebar.actions.show' | 'sidebar.actions.hide' | 'sidebar.actions.changeToSingleColumn' | 'sidebar.actions.changeToTwoColumns' | 'sidebar.actions.singleColumn' | 'sidebar.actions.twoColumns' | 'versionPicker.label' | 'versionPicker.unversioned' | 'codeSnippet.copy.buttonText' | 'codeSnippet.copy.tooltipText' | 'codeSnippet.copy.toasterText' | 'markdown.editPage.text' | 'feedback.settings.comment.submitText' | 'feedback.settings.comment.label' | 'feedback.settings.comment.send' | 'feedback.settings.comment.cancel' | 'feedback.settings.comment.satisfiedLabel' | 'feedback.settings.comment.neutralLabel' | 'feedback.settings.comment.dissatisfiedLabel' | 'feedback.settings.submitText' | 'feedback.settings.label' | 'feedback.settings.reasons.label' | 'feedback.submit' | 'feedback.cancel' | 'feedback.settings.comment.likeLabel' | 'feedback.settings.comment.dislikeLabel' | 'feedback.sentiment.thumbUp' | 'feedback.sentiment.thumbDown' | 'feedback.settings.leftScaleLabel' | 'feedback.settings.rightScaleLabel' | 'feedback.settings.optionalEmail.placeholder' | 'feedback.settings.optionalEmail.label' | 'codeSnippet.report.buttonText' | 'codeSnippet.report.tooltipText' | 'codeSnippet.report.label' | 'codeSnippet.expand.tooltipText' | 'codeSnippet.collapse.tooltipText' | 'userMenu.login' | 'userMenu.logout' | 'userMenu.devOnboardingLabel' | 'mobileMenu.mainMenu' | 'mobileMenu.previous' | 'mobileMenu.products' | 'mobileMenu.version' | 'navbar.products' | 'page.nextButton' | 'page.previousButton' | 'page.actions.copyButtonText' | 'page.actions.copyTitle' | 'page.actions.copyDescription' | 'page.actions.viewAsMdTitle' | 'page.actions.viewAsMdButtonText' | 'page.actions.viewAsMdDescription' | 'page.actions.chatGptTitle' | 'page.actions.chatGptButtonText' | 'page.actions.chatGptDescription' | 'page.actions.claudeTitle' | 'page.actions.claudeButtonText' | 'page.actions.claudeDescription' | 'page.actions.cursorMcpButtonText' | 'page.actions.cursorMcpTitle' | 'page.actions.cursorMcpDescription' | 'openapi.download.description.title' | 'openapi.info.title' | 'openapi.info.contact.url' | 'openapi.info.contact.name' | 'openapi.info.license' | 'openapi.info.termsOfService' | 'openapi.info.metadata.title' | 'openapi.key' | 'openapi.value' | 'openapi.enum' | 'openapi.items' | 'openapi.default' | 'openapi.variable' | 'openapi.variables' | 'openapi.actions.show' | 'openapi.actions.hide' | 'openapi.actions.more' | 'openapi.languages.title' | 'openapi.servers.title' | 'openapi.operations' | 'openapi.webhooks' | 'openapi.description' | 'openapi.badges.deprecated' | 'openapi.badges.required' | 'openapi.badges.webhook' | 'openapi.request' | 'openapi.path' | 'openapi.query' | 'openapi.cookie' | 'openapi.header' | 'openapi.body' | 'openapi.responses' | 'openapi.response' | 'openapi.callbacks' | 'openapi.callbackRequest' | 'openapi.callbackResponse' | 'openapi.payload' | 'openapi.discriminator' | 'openapi.contentType' | 'openapi.tryIt' | 'openapi.loading' | 'openapi.example' | 'openapi.examples' | 'openapi.additionalProperties' | 'openapi.patternProperties' | 'openapi.required' | 'openapi.recursive' | 'openapi.complex' | 'openapi.hideExample' | 'openapi.showExample' | 'openapi.expandAll' | 'openapi.collapseAll' | 'openapi.viewSecurityDetails' | 'openapi.noResponseExample' | 'openapi.discriminator.searchPlaceholder' | 'openapi.discriminator.searchNoResults' | 'openapi.noResponseContent' | 'openapi.noRequestPayload' | 'openapi.hidePattern' | 'openapi.showPattern' | 'openapi.authorizationUrl' | 'openapi.tokenUrl' | 'openapi.refreshUrl' | 'openapi.showOptionalScopes' | 'openapi.hideOptionalScopes' | 'openapi.security' | 'openapi.httpAuthorizationScheme' | 'openapi.bearerFormat' | 'openapi.parameterName' | 'openapi.flowType' | 'openapi.connectUrl' | 'openapi.requiredScopes' | 'openapi.unsupportedLanguage' | 'openapi.failedToGenerateCodeSample' | 'openapi.schemaCatalogLink.title' | 'openapi.schemaCatalogLink.copyButtonTooltip' | 'openapi.schemaCatalogLink.copiedTooltip' | 'openapi.mcp.title' | 'openapi.mcp.endpoint' | 'openapi.mcp.tools' | 'openapi.mcp.protocolVersion' | 'openapi.mcp.capabilities' | 'openapi.mcp.experimentalCapabilities' | 'openapi.mcp.inputSchema' | 'openapi.mcp.inputExample' | 'openapi.mcp.outputSchema' | 'openapi.mcp.outputExample' | 'asyncapi.download.description.title' | 'asyncapi.info.title' | 'graphql.queries' | 'graphql.mutations' | 'graphql.subscriptions' | 'graphql.directives' | 'graphql.objects' | 'graphql.interfaces' | 'graphql.unions' | 'graphql.enums' | 'graphql.inputs' | 'graphql.scalars' | 'graphql.arguments.label' | 'graphql.arguments.show' | 'graphql.arguments.hide' | 'graphql.arguments.here' | 'graphql.returnTypes.label' | 'graphql.returnTypes.show' | 'graphql.returnTypes.hide' | 'graphql.possibleTypes' | 'graphql.defaultValue' | 'graphql.deprecationReason' | 'graphql.requiredScopes' | 'graphql.viewSecurityDetails' | 'graphql.objectScopes' | 'graphql.fieldScopes' | 'graphql.implementedInterfaces' | 'graphql.nonNull' | 'graphql.required' | 'graphql.deprecated' | 'graphql.variables' | 'graphql.querySample' | 'graphql.mutationSample' | 'graphql.subscriptionSample' | 'graphql.responseSample' | 'graphql.locations' | 'graphql.sample' | 'graphql.referenced' | 'graphql.content.fragment' | 'codeWalkthrough.download' | 'codeWalkthrough.preview' | 'time.justNow' | 'time.past.second' | 'time.past.seconds' | 'time.past.minute' | 'time.past.minutes' | 'time.past.hour' | 'time.past.hours' | 'time.past.day' | 'time.past.days' | 'time.past.week' | 'time.past.weeks' | 'time.past.month' | 'time.past.months' | 'time.past.year' | 'time.past.years' | 'page.internalServerError.title' | 'page.internalServerError.description' | 'page.skipToContent.label';
 export type Locale = {
     code: string;
     name: string;

package/lib/core/types/open-api-server.d.ts

@@ -1,6 +1,7 @@
 export type OpenAPIServer = {
     url: string;
     description?: string;
+    name?: string;
     variables?: Record<string, {
         default: string;
         enum?: string[];

package/lib/core/utils/index.d.ts

@@ -37,3 +37,4 @@ export * from './lang-to-name';
 export * from './enhanced-smoothstep';
 export * from './icon-resolver';
 export * from './dynamic';
+export * from './tabs';

package/lib/core/utils/index.js

@@ -53,4 +53,5 @@ __exportStar(require("./lang-to-name"), exports);
 __exportStar(require("./enhanced-smoothstep"), exports);
 __exportStar(require("./icon-resolver"), exports);
 __exportStar(require("./dynamic"), exports);
+__exportStar(require("./tabs"), exports);
 //# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+export declare function getTabId(label: string, index: number): string;

package/lib/core/utils/tabs.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTabId = getTabId;
+function getTabId(label, index) {
+    const cleanLabel = label.replace(/\s+/g, '-').toLowerCase();
+    return `${cleanLabel}-${index}`;
+}
+//# sourceMappingURL=tabs.js.map

package/lib/icons/CursorIcon/CursorIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const CursorIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
+    'data-component-name': string;
+} & {
+    color?: string;
+    size?: string;
+    className?: string;
+} & React.SVGProps<SVGSVGElement>, "data-component-name">;

package/lib/icons/CursorIcon/CursorIcon.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CursorIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("path", { d: "M7.99956 15V8.0001L2 11.4999L7.99956 15Z", fill: "#939393" }),
+    react_1.default.createElement("path", { d: "M14 4.49979L7.99956 15V8.0001L14 4.49979Z", fill: "#E3E3E3" }),
+    react_1.default.createElement("path", { d: "M2 4.49979H14L7.99956 8.0001L2 4.49979Z", fill: "white" }),
+    react_1.default.createElement("path", { d: "M8.00025 1V4.49995L14 4.49979L8.00025 1Z", fill: "#444444" }),
+    react_1.default.createElement("path", { d: "M2 4.49979L8.00025 4.49995V1L2 4.49979ZM13.9999 11.4998L10.9999 9.74987L7.99956 15L13.9999 11.4998Z", fill: "#939393" }),
+    react_1.default.createElement("path", { d: "M14 4.49979L10.9999 9.74987L13.9999 11.4998L14 4.49979ZM7.99956 8.0001L2 11.4999V4.49979L7.99956 8.0001Z", fill: "#444444" })));
+exports.CursorIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/CursorIcon/CursorIcon',
+})) `
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=CursorIcon.js.map

package/lib/layouts/DocumentationLayout.js

@@ -12,13 +12,11 @@ const PageNavigation_1 = require("../components/PageNavigation/PageNavigation");
 const LastUpdated_1 = require("../components/LastUpdated/LastUpdated");
 const Breadcrumbs_1 = require("../components/Breadcrumbs/Breadcrumbs");
 const CodeSnippetContext_1 = require("../core/contexts/CodeSnippetContext");
-const use_local_state_1 = require("../core/hooks/use-local-state");
 function DocumentationLayout({ tableOfContent, feedback, config, editPage, lastModified, nextPage, prevPage, className, children, }) {
     var _a;
     const { editPage: themeEditPage } = config || {};
     const mergedConf = editPage ? Object.assign(Object.assign({}, themeEditPage), editPage) : undefined;
-    const [activeSnippetName, setActiveSnippetName] = (0, use_local_state_1.useLocalState)(CodeSnippetContext_1.CODE_GROUP_SNIPPET_NAME_KEY, '');
-    return (react_1.default.createElement(CodeSnippetContext_1.CodeSnippetContext.Provider, { value: { activeSnippetName, setActiveSnippetName } },
+    return (react_1.default.createElement(CodeSnippetContext_1.CodeSnippetProvider, null,
         react_1.default.createElement(LayoutWrapper, { "data-component-name": "Layout/DocumentationLayout", className: className },
             react_1.default.createElement(ContentWrapper, { withToc: !((_a = config === null || config === void 0 ? void 0 : config.toc) === null || _a === void 0 ? void 0 : _a.hide) },
                 react_1.default.createElement(Breadcrumbs, null),