@redocly/theme 0.58.1 → 0.59.0-next.1

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/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

package/lib/core/styles/global.js

@@ -13,34 +13,36 @@ const variables_8 = require("../../components/Catalog/variables");
 const variables_9 = require("../../components/Filter/variables");
 const variables_10 = require("../../components/CatalogClassic/variables");
 const variables_11 = require("../../components/Panel/variables");
-const variables_12 = require("../../components/Select/variables");
-const variables_13 = require("../../components/Dropdown/variables");
-const variables_14 = require("../../components/Tooltip/variables");
-const variables_15 = require("../../icons/CheckboxIcon/variables");
-const variables_16 = require("../../components/Admonition/variables");
-const variables_17 = require("../../components/Footer/variables");
-const variables_18 = require("../../components/Button/variables");
-const variables_19 = require("../../components/Navbar/variables");
-const variables_20 = require("../../components/Search/variables");
-const variables_21 = require("../../components/Menu/variables");
-const variables_22 = require("../../components/CodeBlock/variables");
-const variables_23 = require("../../components/Product/variables");
-const variables_24 = require("../../components/Markdown/variables");
-const variables_25 = require("../../markdoc/components/Tabs/variables");
-const variables_26 = require("../../markdoc/components/Mermaid/variables");
-const variables_27 = require("../../components/LastUpdated/variables");
-const variables_28 = require("../../components/Logo/variables");
-const variables_29 = require("../../components/StatusCode/variables");
-const variables_30 = require("../../components/Segmented/variables");
-const variables_31 = require("../../components/UserMenu/variables");
-const variables_32 = require("../../components/Tags/variables");
-const variables_33 = require("../../components/VersionPicker/variables");
-const variables_34 = require("../../components/DatePicker/variables");
-const variables_35 = require("../../components/Switch/variables");
-const variables_36 = require("../../markdoc/components/Cards/variables");
-const variables_37 = require("../../markdoc/components/CodeWalkthrough/variables");
-const variables_38 = require("../../components/SkipContent/variables");
-const variables_39 = require("../../components/PageActions/variables");
+const variables_12 = require("../../components/Accordion/variables");
+const variables_13 = require("../../components/Select/variables");
+const variables_14 = require("../../components/Dropdown/variables");
+const variables_15 = require("../../components/Tooltip/variables");
+const variables_16 = require("../../icons/CheckboxIcon/variables");
+const variables_17 = require("../../components/Admonition/variables");
+const variables_18 = require("../../components/Footer/variables");
+const variables_19 = require("../../components/Button/variables");
+const variables_20 = require("../../components/Buttons/variables");
+const variables_21 = require("../../components/Navbar/variables");
+const variables_22 = require("../../components/Search/variables");
+const variables_23 = require("../../components/Menu/variables");
+const variables_24 = require("../../components/CodeBlock/variables");
+const variables_25 = require("../../components/Product/variables");
+const variables_26 = require("../../components/Markdown/variables");
+const variables_27 = require("../../markdoc/components/Tabs/variables");
+const variables_28 = require("../../markdoc/components/Mermaid/variables");
+const variables_29 = require("../../components/LastUpdated/variables");
+const variables_30 = require("../../components/Logo/variables");
+const variables_31 = require("../../components/StatusCode/variables");
+const variables_32 = require("../../components/Segmented/variables");
+const variables_33 = require("../../components/UserMenu/variables");
+const variables_34 = require("../../components/Tags/variables");
+const variables_35 = require("../../components/VersionPicker/variables");
+const variables_36 = require("../../components/DatePicker/variables");
+const variables_37 = require("../../components/Switch/variables");
+const variables_38 = require("../../markdoc/components/Cards/variables");
+const variables_39 = require("../../markdoc/components/CodeWalkthrough/variables");
+const variables_40 = require("../../components/SkipContent/variables");
+const variables_41 = require("../../components/PageActions/variables");
 const dark_1 = require("./dark");
 const themeColors = (0, styled_components_1.css) `
   /* === Palette === */
@@ -141,8 +143,9 @@ const themeColors = (0, styled_components_1.css) `
   --color-green-6: #1cb854;
   --color-green-7: #149e53;
   --color-green-8: #0e8450;
-  --color-green-9: #195848;
-  --color-green-10: #1a4d40;
+  --color-green-9: #136a4d;
+  --color-green-10: #195848;
+  --color-green-11: #1a4d40;
 
   --color-grass-1: #f0faeb;
   --color-grass-2: #e3fad6;
@@ -1204,68 +1207,70 @@ const replay = (0, styled_components_1.css) `
 `;
 exports.styles = (0, styled_components_1.css) `
   :root {
-    ${variables_16.admonition}
+    ${variables_12.accordion}
+    ${variables_17.admonition}
     ${apiReferenceDocs}
     ${variables_11.apiReferencePanels}
     ${badges}
     ${borders}
     ${variables_5.breadcrumbs}
-    ${variables_18.button}
-    ${variables_36.cards}
+    ${variables_19.button}
+    ${variables_20.aiAssistantButton}
+    ${variables_38.cards}
     ${variables_8.catalog}
     ${variables_10.catalogClassic}
-    ${variables_22.code}
-    ${variables_37.codeWalkthrough}
+    ${variables_24.code}
+    ${variables_39.codeWalkthrough}
     ${docsDropdown}
-    ${variables_13.dropdown}
+    ${variables_14.dropdown}
     ${error}
     ${variables_9.filter}
-    ${variables_17.footer}
+    ${variables_18.footer}
     ${headingsTypography}
-    ${variables_32.httpTag}
+    ${variables_34.httpTag}
     ${inputs}
     ${variables_1.languagePicker}
-    ${variables_27.lastUpdated}
+    ${variables_29.lastUpdated}
     ${links}
     ${loadProgressBar}
-    ${variables_28.logo}
-    ${variables_24.markdown}
-    ${variables_25.markdownTabs}
-    ${variables_26.mermaid}
-    ${variables_21.menu}
-    ${variables_21.mobileMenu}
+    ${variables_30.logo}
+    ${variables_26.markdown}
+    ${variables_27.markdownTabs}
+    ${variables_28.mermaid}
+    ${variables_23.menu}
+    ${variables_23.mobileMenu}
     ${modal}
-    ${variables_19.navbar}
+    ${variables_21.navbar}
     ${pages}
-    ${variables_23.productPicker}
+    ${variables_25.productPicker}
     ${variables_11.responsePanelColors}
-    ${variables_20.search}
-    ${variables_12.select}
+    ${variables_22.search}
+    ${variables_13.select}
     ${variables_4.sidebar}
     ${sizeAndSpace}
     ${variables_6.tag}
     ${themeColors}
     ${tile}
     ${variables_7.toc}
-    ${variables_14.tooltip}
+    ${variables_15.tooltip}
     ${typography}
-    ${variables_31.userMenu}
-    ${variables_33.versionPicker}
+    ${variables_33.userMenu}
+    ${variables_35.versionPicker}
     ${zIndexDepth}
     ${scorecardColors}
-    ${variables_29.statusCode}
+    ${variables_31.statusCode}
     ${tab}
     ${icon}
     ${tree}
-    ${variables_30.segmented}
-    ${variables_35.switcher}
-    ${variables_15.checkbox}
+    ${variables_32.segmented}
+    ${variables_37.switcher}
+    ${variables_16.checkbox}
     ${variables_3.feedback}
     ${variables_2.scorecard}
-    ${variables_34.datePicker}
+    ${variables_36.datePicker}
     ${replay}
-    ${variables_38.skipContent}
-    ${variables_39.pageActions}
+    ${variables_40.skipContent}
+    ${variables_41.pageActions}
 
     background-color: var(--bg-color);
     color: var(--text-color-primary);