@redocly/theme 0.59.0-next.0 → 0.59.0-next.2

package/lib/components/Tooltip/Tooltip.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+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;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tooltip = void 0;
 exports.TooltipComponent = TooltipComponent;

package/lib/components/VersionPicker/VersionPicker.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+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 };
 };

package/lib/core/constants/search.d.ts

@@ -6,10 +6,11 @@ export declare enum AiSearchError {
     EmptyResponse = "empty_response",
     ErrorProcessingResponse = "error_processing_response"
 }
-export declare const enum AiSearchConversationRole {
-    USER = "user",
-    ASSISTANT = "assistant"
-}
+export declare const AiSearchConversationRole: {
+    readonly USER: "user";
+    readonly ASSISTANT: "assistant";
+};
+export type AiSearchConversationRole = (typeof AiSearchConversationRole)[keyof typeof AiSearchConversationRole];
 export declare const AI_SEARCH_ERROR_CONFIG: Record<AiSearchError, AiSearchErrorConfig>;
 export declare const AI_SEARCH_MAX_MESSAGE_LENGTH = 45000;
 export declare const SEARCH_DEBOUNCE_TIME_MS = 300;

package/lib/core/constants/search.js

@@ -9,11 +9,10 @@ var AiSearchError;
     AiSearchError["EmptyResponse"] = "empty_response";
     AiSearchError["ErrorProcessingResponse"] = "error_processing_response";
 })(AiSearchError || (exports.AiSearchError = AiSearchError = {}));
-var AiSearchConversationRole;
-(function (AiSearchConversationRole) {
-    AiSearchConversationRole["USER"] = "user";
-    AiSearchConversationRole["ASSISTANT"] = "assistant";
-})(AiSearchConversationRole || (exports.AiSearchConversationRole = AiSearchConversationRole = {}));
+exports.AiSearchConversationRole = {
+    USER: 'user',
+    ASSISTANT: 'assistant',
+};
 const defaultErrorConfig = {
     headerKey: 'search.ai.error.header',
     headerDefault: 'Oops! Something went wrong.',

package/lib/core/contexts/CodeSnippetContext.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+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;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useActiveCodeSnippetId = exports.useCodeSnippetContext = exports.CodeSnippetContext = exports.CODE_GROUP_SNIPPET_NAME_KEY = void 0;
 exports.CodeSnippetProvider = CodeSnippetProvider;

package/lib/core/hooks/use-tabs.d.ts

@@ -4,18 +4,19 @@ type UseTabsProps = {
     totalTabs: number;
     containerRef?: React.RefObject<HTMLElement | null>;
 };
-export declare function useTabs({ activeTab, onTabChange, totalTabs, containerRef }: UseTabsProps): {
+type UseTabsReturn = {
     setTabRef: (element: HTMLButtonElement | null, index: number) => void;
     onTabClick: (labelOrIndex: string | number) => void;
     handleKeyboard: (event: React.KeyboardEvent, index: number) => void;
     visibleTabs: number[];
     overflowTabs: number[];
-    allTabsHidden: boolean;
+    isReady: boolean;
 };
 type UseActiveTabProps = {
     initialTab: string;
     tabsId?: string;
 };
+export declare function useTabs({ activeTab, onTabChange, totalTabs, containerRef, }: UseTabsProps): UseTabsReturn;
 export declare const useActiveTab: ({ initialTab, tabsId }: UseActiveTabProps) => {
     activeTab: string;
     setActiveTab: import("react").Dispatch<import("react").SetStateAction<string>>;

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

@@ -6,15 +6,20 @@ const react_1 = require("react");
 const react_router_dom_1 = require("react-router-dom");
 const MORE_BUTTON_WIDTH = 80;
 const TABS_GAP = 8;
-function useTabs({ activeTab, onTabChange, totalTabs, containerRef }) {
+function useTabs({ activeTab, onTabChange, totalTabs, containerRef, }) {
     const [tabs, setTabs] = (0, react_1.useState)({
         visible: Array.from({ length: totalTabs }, (_, i) => i),
         overflow: [],
     });
+    const [isReady, setIsReady] = (0, react_1.useState)(false);
+    const isFirstCalculation = (0, react_1.useRef)(true);
     const tabRefs = (0, react_1.useRef)([]);
     const tabWidthsRef = (0, react_1.useRef)([]);
     const tabLabelsRef = (0, react_1.useRef)([]);
-    const allTabsHidden = (0, react_1.useMemo)(() => tabs.visible.length === 0, [tabs.visible]);
+    const activeTabRef = (0, react_1.useRef)(activeTab);
+    const calculateVisibleTabsRef = (0, react_1.useRef)(null);
+    // Synchronously update ref before any callbacks or effects run
+    activeTabRef.current = activeTab;
     const setTabRef = (0, react_1.useCallback)((element, index) => {
         tabRefs.current[index] = element;
         const width = element === null || element === void 0 ? void 0 : element.offsetWidth;
@@ -25,18 +30,25 @@ function useTabs({ activeTab, onTabChange, totalTabs, containerRef }) {
         if (label) {
             tabLabelsRef.current[index] = label;
         }
-    }, []);
-    const focusTab = (index) => {
+        // Trigger calculation once all tabs are registered
+        if (isFirstCalculation.current &&
+            tabWidthsRef.current.length >= totalTabs &&
+            tabLabelsRef.current.length >= totalTabs &&
+            calculateVisibleTabsRef.current) {
+            requestAnimationFrame(calculateVisibleTabsRef.current);
+        }
+    }, [totalTabs]);
+    const focusTab = (0, react_1.useCallback)((index) => {
         const currentElement = tabRefs.current[index];
         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)
             onTabChange(label);
-    }, [onTabChange]);
+    }, [onTabChange, focusTab]);
     const handleKeyboard = (0, react_1.useCallback)((event, index) => {
         let newIndex = index;
         if (event.key === 'ArrowRight') {
@@ -59,109 +71,155 @@ function useTabs({ activeTab, onTabChange, 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,
+        setTabs((prevTabs) => {
+            const { visible: visibleTabs, overflow: overflowTabs } = prevTabs;
+            const sortedVisible = [...visibleTabs].sort((a, b) => a - b);
+            const lastVisible = sortedVisible[sortedVisible.length - 1];
+            return {
+                visible: visibleTabs.map((idx) => (idx === lastVisible ? clickedIndex : idx)),
+                overflow: overflowTabs.map((idx) => (idx === clickedIndex ? lastVisible : idx)),
+            };
         });
-    }, [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);
+        if (!label)
+            return;
+        // If this is an overflow tab, replace it with a visible one
+        if (tabs.overflow.includes(clickedIndex)) {
+            replaceLastVisibleTabWithClickedOverflowTab(clickedIndex);
         }
-    }, [allTabsHidden, tabs.overflow, onTabChange, replaceLastVisibleTabWithClickedOverflowTab]);
+        onTabChange(label);
+        focusTab(clickedIndex);
+    }, [tabs.overflow, onTabChange, replaceLastVisibleTabWithClickedOverflowTab, focusTab]);
     const calculateVisibleTabs = (0, react_1.useCallback)(() => {
         const container = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current;
         if (!container)
             return;
         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);
-        // Active tab should always be visible, so we include it at the beginning of the array
+        const tabLabels = tabLabelsRef.current;
+        // Wait until all tabs are registered before calculating
+        if (tabWidths.length < totalTabs || tabLabels.length < totalTabs) {
+            return;
+        }
+        // Check if container has proper width (not zero)
+        if (containerWidth === 0) {
+            return;
+        }
+        // Find active tab index by label in tabLabelsRef, not by DOM element
+        // because tab might not be rendered if it's in overflow
+        const activeTabIndex = tabLabels.findIndex((label) => label === activeTabRef.current);
         let tabsWidth = activeTabIndex !== -1 ? tabWidths[activeTabIndex] : 0;
-        const visible = activeTabIndex !== -1 ? [activeTabIndex] : [];
-        const overflow = [];
+        const visibleTabs = activeTabIndex !== -1 ? [activeTabIndex] : [];
+        const overflowTabs = [];
         for (let i = 0; i < tabWidths.length; i++) {
-            // Skip active tab, it was added initially
-            if (i === activeTabIndex) {
+            if (i === activeTabIndex)
                 continue;
-            }
             const tabWidthWithGap = tabWidths[i] + TABS_GAP;
             const projectedWidth = tabsWidth + tabWidthWithGap;
             if (projectedWidth <= containerWidth) {
-                visible.push(i);
+                visibleTabs.push(i);
                 tabsWidth += tabWidthWithGap;
             }
             else {
-                overflow.push(i);
+                overflowTabs.push(i);
             }
         }
-        if (overflow.length > 0) {
+        if (overflowTabs.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);
+            while (tabsWidth > containerWidth && visibleTabs.length > 1) {
+                const removed = visibleTabs.pop();
+                // Never remove the active tab - it should always stay visible or be the last one
+                if (removed !== undefined && removed !== activeTabIndex) {
+                    overflowTabs.unshift(removed);
                     tabsWidth -= tabWidths[removed];
                 }
+                else if (removed === activeTabIndex) {
+                    // Put it back if we accidentally removed the active tab
+                    visibleTabs.push(removed);
+                    break;
+                }
+            }
+            // If even with only the active tab visible, it doesn't fit with More button,
+            // move all tabs to overflow (show only dropdown)
+            if (tabsWidth > containerWidth && visibleTabs.length === 1) {
+                overflowTabs.unshift(...visibleTabs);
+                visibleTabs.length = 0;
             }
         }
         setTabs({
-            visible,
-            overflow,
+            visible: visibleTabs,
+            overflow: overflowTabs,
         });
-    }, [containerRef, activeTab]);
+        // Set ready state on first calculation
+        if (isFirstCalculation.current) {
+            isFirstCalculation.current = false;
+            setIsReady(true);
+        }
+    }, [containerRef, totalTabs]);
+    // Store calculateVisibleTabs in ref for use in setTabRef
+    calculateVisibleTabsRef.current = calculateVisibleTabs;
+    // Reset isFirstCalculation when totalTabs changes (new page/tabs)
     (0, react_1.useEffect)(() => {
-        if (!(containerRef === null || containerRef === void 0 ? void 0 : containerRef.current))
+        isFirstCalculation.current = true;
+        setIsReady(false);
+        // Clear refs so we wait for new tabs to register
+        tabWidthsRef.current = [];
+        tabLabelsRef.current = [];
+    }, [totalTabs]);
+    // Call calculateVisibleTabs on first render and resize
+    (0, react_1.useEffect)(() => {
+        const container = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current;
+        if (!container)
             return;
-        let resizeTimeout = requestAnimationFrame(calculateVisibleTabs);
+        let resizeTimeout = null;
+        // Use ResizeObserver to wait until container has proper size
+        const resizeObserver = new ResizeObserver(() => {
+            if (resizeTimeout)
+                cancelAnimationFrame(resizeTimeout);
+            resizeTimeout = requestAnimationFrame(calculateVisibleTabs);
+        });
+        resizeObserver.observe(container);
         const handleResize = () => {
-            if (resizeTimeout) {
+            if (resizeTimeout)
                 cancelAnimationFrame(resizeTimeout);
-            }
             resizeTimeout = requestAnimationFrame(calculateVisibleTabs);
         };
         window.addEventListener('resize', handleResize);
         return () => {
+            resizeObserver.disconnect();
             window.removeEventListener('resize', handleResize);
-            cancelAnimationFrame(resizeTimeout);
+            if (resizeTimeout)
+                cancelAnimationFrame(resizeTimeout);
         };
     }, [containerRef, totalTabs, calculateVisibleTabs]);
+    // Recalculate when activeTab changes to ensure it's visible
+    (0, react_1.useEffect)(() => {
+        if (!(containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) || isFirstCalculation.current)
+            return;
+        requestAnimationFrame(calculateVisibleTabs);
+    }, [activeTab, containerRef, calculateVisibleTabs]);
     return {
         setTabRef,
         onTabClick,
         handleKeyboard,
         visibleTabs: tabs.visible,
         overflowTabs: tabs.overflow,
-        allTabsHidden,
+        isReady,
     };
 }
 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 initialTabValue = (0, react_1.useMemo)(() => getInitialTab({ initialTab, searchParams, tabsId }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    const [activeTab, setActiveTab] = (0, react_1.useState)(initialTabValue);
     const prevActiveTabRef = (0, react_1.useRef)(activeTab);
     (0, react_1.useEffect)(() => {
         const hasActiveTabChanged = prevActiveTabRef.current !== activeTab;
@@ -174,10 +232,10 @@ const useActiveTab = ({ initialTab, tabsId }) => {
             return searchParams;
         });
     }, [activeTab, setSearchParams, tabsId]);
-    return {
+    return (0, react_1.useMemo)(() => ({
         activeTab,
         setActiveTab,
-    };
+    }), [activeTab]);
 };
 exports.useActiveTab = useActiveTab;
 const getInitialTab = ({ initialTab, searchParams, tabsId }) => {

package/lib/core/styles/dark.js

@@ -6,15 +6,16 @@ const variables_dark_1 = require("../../components/Scorecard/variables.dark");
 const variables_dark_2 = require("../../markdoc/components/Mermaid/variables.dark");
 const variables_dark_3 = require("../../components/Menu/variables.dark");
 const variables_dark_4 = require("../../components/Button/variables.dark");
-const variables_dark_5 = require("../../components/Segmented/variables.dark");
-const variables_dark_6 = require("../../icons/CheckboxIcon/variables.dark");
-const variables_dark_7 = require("../../components/Tag/variables.dark");
-const variables_dark_8 = require("../../components/StatusCode/variables.dark");
-const variables_dark_9 = require("../../components/Switch/variables.dark");
-const variables_dark_10 = require("../../markdoc/components/Cards/variables.dark");
-const variables_dark_11 = require("../../components/Catalog/variables.dark");
-const variables_dark_12 = require("../../components/PageActions/variables.dark");
-const variables_dark_13 = require("../../components/Tooltip/variables.dark");
+const variables_dark_5 = require("../../components/Buttons/variables.dark");
+const variables_dark_6 = require("../../components/Segmented/variables.dark");
+const variables_dark_7 = require("../../icons/CheckboxIcon/variables.dark");
+const variables_dark_8 = require("../../components/Tag/variables.dark");
+const variables_dark_9 = require("../../components/StatusCode/variables.dark");
+const variables_dark_10 = require("../../components/Switch/variables.dark");
+const variables_dark_11 = require("../../markdoc/components/Cards/variables.dark");
+const variables_dark_12 = require("../../components/Catalog/variables.dark");
+const variables_dark_13 = require("../../components/PageActions/variables.dark");
+const variables_dark_14 = require("../../components/Tooltip/variables.dark");
 const replayDarkMode = (0, styled_components_1.css) `
   /**
     * @tokens Replay Colors
@@ -136,14 +137,15 @@ exports.darkMode = (0, styled_components_1.css) `
 
   --color-green-1: #1a4d40;
   --color-green-2: #195848;
-  --color-green-3: #0e8450;
-  --color-green-4: #149e53;
-  --color-green-5: #1cb854;
-  --color-green-6: #4dd470;
-  --color-green-7: #72e985;
-  --color-green-8: #a3f7a9;
-  --color-green-9: #d2fbd0;
-  --color-green-10: #edfbec;
+  --color-green-3: #136a4d;
+  --color-green-4: #0e8450;
+  --color-green-5: #149e53;
+  --color-green-6: #1cb854;
+  --color-green-7: #4dd470;
+  --color-green-8: #72e985;
+  --color-green-9: #a3f7a9;
+  --color-green-10: #d2fbd0;
+  --color-green-11: #edfbec;
 
   --color-grass-1: #1f4d2d;
   --color-grass-2: #164f29;
@@ -306,20 +308,21 @@ exports.darkMode = (0, styled_components_1.css) `
   --plus-square-outlined-icon: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.20312 5.3125H4.6875V6.79687C4.6875 6.83984 4.72266 6.875 4.76562 6.875H5.23438C5.27734 6.875 5.3125 6.83984 5.3125 6.79687V5.3125H6.79688C6.83984 5.3125 6.875 5.27734 6.875 5.23437V4.76562C6.875 4.72266 6.83984 4.6875 6.79688 4.6875H5.3125V3.20312C5.3125 3.16016 5.27734 3.125 5.23438 3.125H4.76562C4.72266 3.125 4.6875 3.16016 4.6875 3.20312V4.6875H3.20312C3.16016 4.6875 3.125 4.72266 3.125 4.76562V5.23437C3.125 5.27734 3.16016 5.3125 3.20312 5.3125Z' fill='%239B9CA8'/%3E%3Cpath d='M8.59375 1.09375H1.40625C1.2334 1.09375 1.09375 1.2334 1.09375 1.40625V8.59375C1.09375 8.7666 1.2334 8.90625 1.40625 8.90625H8.59375C8.7666 8.90625 8.90625 8.7666 8.90625 8.59375V1.40625C8.90625 1.2334 8.7666 1.09375 8.59375 1.09375ZM8.20312 8.20312H1.79688V1.79687H8.20312V8.20312Z' fill='%239B9CA8'/%3E%3C/svg%3E%0A");
   --minus-square-outlined-icon: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.20312 5.3125H6.79688C6.83984 5.3125 6.875 5.27734 6.875 5.23437V4.76562C6.875 4.72266 6.83984 4.6875 6.79688 4.6875H3.20312C3.16016 4.6875 3.125 4.72266 3.125 4.76562V5.23437C3.125 5.27734 3.16016 5.3125 3.20312 5.3125Z' fill='%239B9CA8'/%3E%3Cpath d='M8.59375 1.09375H1.40625C1.2334 1.09375 1.09375 1.2334 1.09375 1.40625V8.59375C1.09375 8.7666 1.2334 8.90625 1.40625 8.90625H8.59375C8.7666 8.90625 8.90625 8.7666 8.90625 8.59375V1.40625C8.90625 1.2334 8.7666 1.09375 8.59375 1.09375ZM8.20312 8.20312H1.79688V1.79687H8.20312V8.20312Z' fill='%239B9CA8'/%3E%3C/svg%3E%0A");
 
-  ${variables_dark_5.segmentedButtonsDarkMode}
+  ${variables_dark_6.segmentedButtonsDarkMode}
   ${variables_dark_4.buttonDarkMode}
-  ${variables_dark_6.checkboxDarkMode}
-  ${variables_dark_7.tagDarkMode}
-  ${variables_dark_8.statusCodeDarkMode}
+  ${variables_dark_5.aiAssistantButtonDarkMode}
+  ${variables_dark_7.checkboxDarkMode}
+  ${variables_dark_8.tagDarkMode}
+  ${variables_dark_9.statusCodeDarkMode}
   ${variables_dark_3.menuDarkMode}
   ${variables_dark_2.mermaidDarkMode}
   ${variables_dark_1.scorecardDarkMode}
   ${replayDarkMode}
-  ${variables_dark_9.switcherDarkMode}
-  ${variables_dark_10.cardsDarkMode}
-  ${variables_dark_11.catalogDarkMode}
-  ${variables_dark_12.pageActionsDarkMode}
-  ${variables_dark_13.tooltipDarkMode}
+  ${variables_dark_10.switcherDarkMode}
+  ${variables_dark_11.cardsDarkMode}
+  ${variables_dark_12.catalogDarkMode}
+  ${variables_dark_13.pageActionsDarkMode}
+  ${variables_dark_14.tooltipDarkMode}
 
   /**
     * @tokens Dark Theme Scrollbar Config