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

package/lib/components/Select/SelectInput.d.ts

@@ -13,6 +13,7 @@ type SelectInputProps<T> = {
     placeholder?: string;
     multiple?: boolean;
     searchable?: boolean;
+    expanded?: boolean;
     clearable?: boolean;
     inputRef?: React.ForwardedRef<HTMLInputElement>;
     clearHandler?: (value?: any) => void;

package/lib/components/Select/SelectInput.js

@@ -43,8 +43,9 @@ const react_1 = __importStar(require("react"));
 const Tag_1 = require("../../components/Tag/Tag");
 const CloseIcon_1 = require("../../icons/CloseIcon/CloseIcon");
 const Button_1 = require("../../components/Button/Button");
+const utils_1 = require("../../core/utils");
 function SelectInput(props) {
-    const { id, listboxId, onlyIcon, icon, customIcon, selectedOptions, placeholder, stickyValue, multiple, searchable, clearable, clearHandler, searchHandler, clickHandler, searchValue, inputBlurHandler, inputFocusHandler, inputRef: forwardedInputRef, } = props;
+    const { id, listboxId, onlyIcon, icon, customIcon, selectedOptions, placeholder, stickyValue, multiple, searchable, expanded, clearable, clearHandler, searchHandler, clickHandler, searchValue, inputBlurHandler, inputFocusHandler, inputRef: forwardedInputRef, } = props;
     const inputRef = (0, react_1.useRef)(null);
     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
     const onChangeHandler = (e) => {
@@ -87,22 +88,15 @@ function SelectInput(props) {
             if (!input)
                 return;
             inputRef.current = input;
-            if (!forwardedInputRef)
-                return;
-            if (typeof forwardedInputRef === 'function') {
-                forwardedInputRef(input);
-            }
-            else {
-                forwardedInputRef.current = input;
-            }
-        }, $width: multiple ? (!searchValue && selectedOptions.length ? '10px' : 'auto') : '100%', tabIndex: 0, onFocus: (e) => {
+            (0, utils_1.assignRef)(forwardedInputRef, input);
+        }, $width: multiple ? (!searchValue && selectedOptions.length ? '10px' : 'auto') : '100%', tabIndex: 0, role: "combobox", "aria-expanded": !!expanded, "aria-controls": listboxId, "aria-autocomplete": "list", "aria-label": "Select option", onFocus: (e) => {
             e.stopPropagation();
         }, onMouseDown: (e) => {
             e.preventDefault();
         } }));
     const simpleValue = selectedOptions.length ? (selectedOptions[0].label || selectedOptions[0].element || selectedOptions[0].value) : (react_1.default.createElement(SelectInternalInputPlaceholder, null, placeholder));
     const multipleValues = selectedOptions.length ? (selectTags) : (react_1.default.createElement(SelectInternalInputPlaceholder, null, placeholder));
-    return (react_1.default.createElement(exports.SelectInputWrapper, { id: id, onFocus: onFocusHandler, onClick: onClickHandler, role: "button", "aria-haspopup": "listbox", "aria-controls": listboxId, "aria-owns": listboxId, "aria-label": "Select option" },
+    return (react_1.default.createElement(exports.SelectInputWrapper, { id: id, onFocus: onFocusHandler, onClick: onClickHandler },
         !onlyIcon && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(SelectInputValue, null, multiple ? (searchable ? (react_1.default.createElement(react_1.default.Fragment, null,
                 selectTags,

package/lib/components/SplitButton/SplitButton.js

@@ -1,10 +1,43 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SplitButton = SplitButton;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Button_1 = require("../../components/Button/Button");
 const ButtonGroup_1 = require("../../components/Button/ButtonGroup");
@@ -12,10 +45,11 @@ const Dropdown_1 = require("../../components/Dropdown/Dropdown");
 function SplitButton(props) {
     const { button, children, variant, size, tone, placement = 'bottom', alignment = 'end', portalled, closeOnSelect = true, disabled, toggleAriaLabel, onOpen, onClose, className, } = props;
     const hasMenu = typeof children === 'function' || react_1.default.Children.toArray(children).length > 0;
-    return (react_1.default.createElement(SplitButtonWrapper, { "data-component-name": "SplitButton/SplitButton", className: className },
+    const wrapperRef = (0, react_1.useRef)(null);
+    return (react_1.default.createElement(SplitButtonWrapper, { "data-component-name": "SplitButton/SplitButton", className: className, ref: wrapperRef },
         react_1.default.createElement(ButtonGroup_1.ButtonGroup, { variant: variant, size: size },
             button,
-            hasMenu ? (react_1.default.createElement(ToggleDropdown, { closeOnClick: closeOnSelect, placement: placement, alignment: alignment, portalled: portalled, withArrow: true, onOpen: onOpen, onClose: onClose, trigger: react_1.default.createElement(Button_1.Button, { "aria-label": toggleAriaLabel, "aria-haspopup": "menu", variant: variant, size: size, tone: tone, disabled: disabled }) }, children)) : null)));
+            hasMenu ? (react_1.default.createElement(ToggleDropdown, { closeOnClick: closeOnSelect, placement: placement, alignment: alignment, portalled: portalled, alignmentAnchorRef: wrapperRef, withArrow: true, onOpen: onOpen, onClose: onClose, trigger: react_1.default.createElement(Button_1.Button, { "aria-label": toggleAriaLabel, "aria-haspopup": "menu", variant: variant, size: size, tone: tone, disabled: disabled }) }, children)) : null)));
 }
 const SplitButtonWrapper = styled_components_1.default.div `
   position: relative;

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

@@ -1,5 +1,5 @@
-import type { MCPOption } from '../types/mcp';
 export declare const DEFAULT_MCP_SERVER_NAME = "mcp-server";
 export declare const MCP_ROUTE = "/mcp";
 export declare const PUBLIC_MCP_ROUTE = "/mcp-public";
-export declare const DEFAULT_MCP_OPTIONS: MCPOption[];
+export declare const MCP_OPTIONS: readonly ['cursor', 'vscode', 'claude-code', 'codex', 'copy'];
+export declare const DEFAULT_MCP_OPTIONS: ("claude-code" | "codex" | "copy" | "cursor" | "vscode")[];

package/lib/core/constants/mcp.js

@@ -1,14 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEFAULT_MCP_OPTIONS = exports.PUBLIC_MCP_ROUTE = exports.MCP_ROUTE = exports.DEFAULT_MCP_SERVER_NAME = void 0;
+exports.DEFAULT_MCP_OPTIONS = exports.MCP_OPTIONS = exports.PUBLIC_MCP_ROUTE = exports.MCP_ROUTE = exports.DEFAULT_MCP_SERVER_NAME = void 0;
 exports.DEFAULT_MCP_SERVER_NAME = 'mcp-server';
 exports.MCP_ROUTE = '/mcp';
 exports.PUBLIC_MCP_ROUTE = '/mcp-public';
-exports.DEFAULT_MCP_OPTIONS = [
-    'cursor',
-    'vscode',
-    'claude-code',
-    'codex',
-    'copy',
-];
+exports.MCP_OPTIONS = ['cursor', 'vscode', 'claude-code', 'codex', 'copy'];
+exports.DEFAULT_MCP_OPTIONS = [...exports.MCP_OPTIONS];
 //# sourceMappingURL=mcp.js.map

package/lib/core/constants/search.js

@@ -43,7 +43,7 @@ exports.DEFAULT_KEYBOARD_SHORTCUTS = '⌘+K,CTRL+K';
 exports.TOOL_CALL_DISPLAY_TEXT = {
     [search_1.ToolCallName.SearchDocumentation]: {
         inProgressText: 'Searching documentation...',
-        completedText: 'Search completed',
+        completedText: 'Searched the documentation',
     },
     [search_1.ToolCallName.ListApis]: {
         inProgressText: 'Browsing APIs...',
@@ -65,6 +65,10 @@ exports.TOOL_CALL_DISPLAY_TEXT = {
         inProgressText: 'Reading API description...',
         completedText: 'Read API description',
     },
+    [search_1.ToolCallName.Execute]: {
+        inProgressText: 'Running code...',
+        completedText: 'Ran code',
+    },
     [search_1.ToolCallName.DescribeTools]: {
         inProgressText: 'Discovering available tools...',
         completedText: 'Discovered available tools',

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

@@ -21,6 +21,7 @@ export * from './menu/use-mobile-menu-levels';
 export * from './menu/use-collapse';
 export * from './feedback/use-report-dialog';
 export * from './use-tabs';
+export * from './use-tab-list';
 export * from './use-focus-trap';
 export * from './use-consent-dialog';
 export * from './use-consent-telemetry';
@@ -29,6 +30,7 @@ export * from './use-product-picker';
 export * from './search/use-search-dialog';
 export * from './search/use-search-filter';
 export * from './search/use-feedback-tooltip';
+export * from './search/use-search-ai-activity';
 export * from './use-controlled-state';
 export * from './use-codeblock-tabs-controls';
 export * from './code-walkthrough/use-code-walkthrough';

package/lib/core/hooks/index.js

@@ -37,6 +37,7 @@ __exportStar(require("./menu/use-mobile-menu-levels"), exports);
 __exportStar(require("./menu/use-collapse"), exports);
 __exportStar(require("./feedback/use-report-dialog"), exports);
 __exportStar(require("./use-tabs"), exports);
+__exportStar(require("./use-tab-list"), exports);
 __exportStar(require("./use-focus-trap"), exports);
 __exportStar(require("./use-consent-dialog"), exports);
 __exportStar(require("./use-consent-telemetry"), exports);
@@ -45,6 +46,7 @@ __exportStar(require("./use-product-picker"), exports);
 __exportStar(require("./search/use-search-dialog"), exports);
 __exportStar(require("./search/use-search-filter"), exports);
 __exportStar(require("./search/use-feedback-tooltip"), exports);
+__exportStar(require("./search/use-search-ai-activity"), exports);
 __exportStar(require("./use-controlled-state"), exports);
 __exportStar(require("./use-codeblock-tabs-controls"), exports);
 __exportStar(require("./code-walkthrough/use-code-walkthrough"), exports);

package/lib/core/hooks/menu/use-collapse.js

@@ -169,6 +169,6 @@ function useEvent(callback) {
     (0, react_1.useEffect)(() => {
         ref.current = callback;
     });
-    return (0, react_1.useCallback)(((...args) => { var _a; return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.call(ref, ...args); }), []);
+    return (0, react_1.useCallback)((...args) => { var _a; return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.call(ref, ...args); }, []);
 }
 //# sourceMappingURL=use-collapse.js.map

package/lib/core/hooks/search/use-search-ai-activity.d.ts

@@ -0,0 +1,11 @@
+import type { SearchAiActivityStatus, SearchAiActivityStep, ToolCall } from '../../types/search';
+type UseSearchAiActivityParams = {
+    toolCalls: ToolCall[];
+    isActive: boolean;
+};
+type UseSearchAiActivityReturn = {
+    status: SearchAiActivityStatus;
+    steps: SearchAiActivityStep[];
+};
+export declare function useSearchAiActivity({ toolCalls, isActive, }: UseSearchAiActivityParams): UseSearchAiActivityReturn;
+export {};

package/lib/core/hooks/search/use-search-ai-activity.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSearchAiActivity = useSearchAiActivity;
+const use_theme_hooks_1 = require("../use-theme-hooks");
+const search_ai_activity_1 = require("../../utils/search-ai-activity");
+function useSearchAiActivity({ toolCalls, isActive, }) {
+    const { useTranslate } = (0, use_theme_hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const runningToolCall = isActive ? toolCalls.find((toolCall) => !toolCall.result) : undefined;
+    return {
+        status: (0, search_ai_activity_1.getSearchAiActivityStatus)(toolCalls, isActive, runningToolCall, translate),
+        steps: toolCalls.map((toolCall) => (0, search_ai_activity_1.getSearchAiActivityStep)(toolCall, isActive && !toolCall.result, translate)),
+    };
+}
+//# sourceMappingURL=use-search-ai-activity.js.map

package/lib/core/hooks/use-connect-mcp-button.js

@@ -45,7 +45,8 @@ function useConnectMCPButton({ options = mcp_1.DEFAULT_MCP_OPTIONS, } = {}) {
         window.open(urlMap[action], '_blank');
     }, [cursorUrl, vscodeUrl, serverUrl, serverName, resetCopied, telemetry]);
     const triggerButtonText = (0, react_1.useMemo)(() => translate('page.actions.connectMcp', 'Connect MCP'), [translate]);
-    const visibleOptions = (0, react_1.useMemo)(() => options.filter(Boolean), [options]);
+    // Markdoc reports attribute errors but still renders the tag, so `options` can be any value.
+    const visibleOptions = (0, react_1.useMemo)(() => Array.isArray(options) ? [...new Set(options.filter(mcp_2.isMCPOption))] : [...mcp_1.DEFAULT_MCP_OPTIONS], [options]);
     return {
         copiedOption,
         cursorUrl,

package/lib/core/hooks/use-full-height.d.ts

@@ -1,2 +1,2 @@
 import type { RefObject } from 'react';
-export declare function useFullHeight(element: RefObject<HTMLElement | null>): void;
+export declare function useFullHeight(elementRef: RefObject<HTMLElement | null>): void;

package/lib/core/hooks/use-full-height.js

@@ -6,27 +6,27 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useFullHeight = useFullHeight;
 const react_1 = require("react");
 const lodash_throttle_1 = __importDefault(require("lodash.throttle"));
-function useFullHeight(element) {
+function useFullHeight(elementRef) {
     const handler = (0, react_1.useCallback)(() => {
-        if (!element.current) {
+        if (!elementRef.current) {
             return;
         }
         const footer = document.querySelector('footer');
         if (!footer) {
             return;
         }
-        const elementTop = element.current.getBoundingClientRect().top;
+        const elementTop = elementRef.current.getBoundingClientRect().top;
         const footerOffset = footer.offsetTop - window.scrollY - elementTop;
         if (footerOffset > window.innerHeight) {
-            element.current.style.maxHeight = `${window.innerHeight - elementTop}px`;
+            elementRef.current.style.maxHeight = `${window.innerHeight - elementTop}px`;
         }
         else {
-            element.current.style.maxHeight = `${footerOffset}px`;
+            elementRef.current.style.maxHeight = `${footerOffset}px`;
         }
-    }, [element]);
+    }, [elementRef]);
     const throttledHandler = (0, react_1.useMemo)(() => (0, lodash_throttle_1.default)(handler, 150), [handler]);
     (0, react_1.useEffect)(() => {
-        if (typeof window === 'undefined' || !element.current) {
+        if (typeof window === 'undefined' || !elementRef.current) {
             return () => {
                 // nope
             };
@@ -42,6 +42,6 @@ function useFullHeight(element) {
             window.removeEventListener('scroll', throttledHandler);
             window.removeEventListener('resize', throttledHandler);
         };
-    }, [throttledHandler, element, handler]);
+    }, [throttledHandler, elementRef, handler]);
 }
 //# sourceMappingURL=use-full-height.js.map

package/lib/core/hooks/use-tab-list.d.ts

@@ -0,0 +1,31 @@
+import type { KeyboardEvent } from 'react';
+type UseTabListProps = {
+    count: number;
+    activeIndex: number;
+    onChange: (index: number) => void;
+};
+/**
+ * Props for a WAI-ARIA tab list with automatic activation: only the active tab is a tab stop,
+ * and Left/Right/Home/End select and focus another tab.
+ */
+export declare function useTabList({ count, activeIndex, onChange }: UseTabListProps): {
+    tabListProps: {
+        role: string;
+    };
+    getTabProps: (index: number) => {
+        id: string;
+        role: string;
+        'aria-selected': boolean;
+        'aria-controls': string;
+        tabIndex: number;
+        ref: (element: HTMLElement | null) => void;
+        onClick: () => void;
+        onKeyDown: (event: KeyboardEvent) => void;
+    };
+    getTabPanelProps: (index: number) => {
+        id: string;
+        role: string;
+        'aria-labelledby': string;
+    };
+};
+export {};

package/lib/core/hooks/use-tab-list.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTabList = useTabList;
+const react_1 = require("react");
+/**
+ * Props for a WAI-ARIA tab list with automatic activation: only the active tab is a tab stop,
+ * and Left/Right/Home/End select and focus another tab.
+ */
+function useTabList({ count, activeIndex, onChange }) {
+    const idPrefix = (0, react_1.useId)();
+    const focusableIndex = activeIndex >= 0 ? activeIndex : 0;
+    const tabRefs = (0, react_1.useRef)([]);
+    const select = (0, react_1.useCallback)((index) => {
+        var _a;
+        onChange(index);
+        (_a = tabRefs.current[index]) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [onChange]);
+    const onKeyDown = (0, react_1.useCallback)((event, index) => {
+        const target = {
+            ArrowRight: (index + 1) % count,
+            ArrowLeft: (index - 1 + count) % count,
+            Home: 0,
+            End: count - 1,
+        }[event.key];
+        if (target === undefined)
+            return;
+        event.preventDefault();
+        select(target);
+    }, [count, select]);
+    const getTabProps = (index) => ({
+        id: `${idPrefix}-tab-${index}`,
+        role: 'tab',
+        'aria-selected': index === activeIndex,
+        'aria-controls': `${idPrefix}-panel-${index}`,
+        tabIndex: index === focusableIndex ? 0 : -1,
+        ref: (element) => {
+            tabRefs.current[index] = element;
+        },
+        onClick: () => select(index),
+        onKeyDown: (event) => onKeyDown(event, index),
+    });
+    const getTabPanelProps = (index) => ({
+        id: `${idPrefix}-panel-${index}`,
+        role: 'tabpanel',
+        'aria-labelledby': `${idPrefix}-tab-${index}`,
+    });
+    return { tabListProps: { role: 'tablist' }, getTabProps, getTabPanelProps };
+}
+//# sourceMappingURL=use-tab-list.js.map

package/lib/core/styles/global.d.ts

@@ -1,3 +1,5 @@
+/** The light theme tokens without a selector, for a host that sets them on one element. */
+export declare const tokens: import("styled-components").RuleSet<object>;
 export declare const styles: import("styled-components").RuleSet<NoInfer<{
     palette?: string;
 }>>;

package/lib/core/styles/global.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.GlobalStyle = exports.styles = void 0;
+exports.GlobalStyle = exports.styles = exports.tokens = void 0;
 const styled_components_1 = require("styled-components");
 const variables_1 = require("../../components/LanguagePicker/variables");
 const variables_2 = require("../../components/Scorecard/variables");
@@ -1307,83 +1307,87 @@ const replay = (0, styled_components_1.css) `
   }
   // @tokens End
 `;
+/** The light theme tokens without a selector, for a host that sets them on one element. */
+exports.tokens = (0, styled_components_1.css) `
+  ${variables_13.accordion}
+  ${variables_18.admonition}
+  ${apiReferenceDocs}
+  ${variables_12.apiReferencePanels}
+  ${badges}
+  ${variables_28.banner}
+  ${borders}
+  ${variables_29.consent}
+  ${variables_5.breadcrumbs}
+  ${variables_20.button}
+  ${variables_21.aiAssistantButton}
+  ${variables_43.cards}
+  ${variables_8.catalog}
+  ${variables_11.catalogClassic}
+  ${variables_25.code}
+  ${variables_44.codeWalkthrough}
+  ${docsDropdown}
+  ${variables_15.dropdown}
+  ${error}
+  ${variables_10.filter}
+  ${variables_19.footer}
+  ${headingsTypography}
+  ${variables_39.httpTag}
+  ${variables_9.image}
+  ${inputs}
+  ${variables_1.languagePicker}
+  ${variables_34.lastUpdated}
+  ${links}
+  ${loadProgressBar}
+  ${variables_35.logo}
+  ${variables_27.markdown}
+  ${variables_30.markdownAccordion}
+  ${variables_31.markdownTabs}
+  ${variables_32.markdownNumberedList}
+  ${variables_33.diagram}
+  ${variables_24.menu}
+  ${variables_24.mobileMenu}
+  ${modal}
+  ${variables_22.navbar}
+  ${pages}
+  ${variables_26.productPicker}
+  ${variables_12.responsePanelColors}
+  ${variables_23.search}
+  ${variables_50.navigationTabs}
+  ${variables_14.select}
+  ${variables_4.sidebar}
+  ${sizeAndSpace}
+  ${variables_6.tag}
+  ${themeColors}
+  ${palette_1.activeBrandPaletteLight}
+  ${tile}
+  ${variables_7.toc}
+  ${variables_16.tooltip}
+  ${typography}
+  ${variables_38.userMenu}
+  ${variables_40.versionPicker}
+  ${zIndexDepth}
+  ${scorecardColors}
+  ${variables_36.statusCode}
+  ${tab}
+  ${icon}
+  ${tree}
+  ${variables_37.segmented}
+  ${variables_42.switcher}
+  ${variables_17.checkbox}
+  ${variables_3.feedback}
+  ${variables_2.scorecard}
+  ${variables_41.datePicker}
+  ${replay}
+  ${variables_45.skipContent}
+  ${variables_46.pageActions}
+  ${variables_47.svgViewer}
+  ${variables_48.toast}
+  ${variables_49.pageNavigation}
+
+`;
 exports.styles = (0, styled_components_1.css) `
   :root {
-    ${variables_13.accordion}
-    ${variables_18.admonition}
-    ${apiReferenceDocs}
-    ${variables_12.apiReferencePanels}
-    ${badges}
-    ${variables_28.banner}
-    ${borders}
-    ${variables_29.consent}
-    ${variables_5.breadcrumbs}
-    ${variables_20.button}
-    ${variables_21.aiAssistantButton}
-    ${variables_43.cards}
-    ${variables_8.catalog}
-    ${variables_11.catalogClassic}
-    ${variables_25.code}
-    ${variables_44.codeWalkthrough}
-    ${docsDropdown}
-    ${variables_15.dropdown}
-    ${error}
-    ${variables_10.filter}
-    ${variables_19.footer}
-    ${headingsTypography}
-    ${variables_39.httpTag}
-    ${variables_9.image}
-    ${inputs}
-    ${variables_1.languagePicker}
-    ${variables_34.lastUpdated}
-    ${links}
-    ${loadProgressBar}
-    ${variables_35.logo}
-    ${variables_27.markdown}
-    ${variables_30.markdownAccordion}
-    ${variables_31.markdownTabs}
-    ${variables_32.markdownNumberedList}
-    ${variables_33.diagram}
-    ${variables_24.menu}
-    ${variables_24.mobileMenu}
-    ${modal}
-    ${variables_22.navbar}
-    ${pages}
-    ${variables_26.productPicker}
-    ${variables_12.responsePanelColors}
-    ${variables_23.search}
-    ${variables_50.navigationTabs}
-    ${variables_14.select}
-    ${variables_4.sidebar}
-    ${sizeAndSpace}
-    ${variables_6.tag}
-    ${themeColors}
-    ${palette_1.activeBrandPaletteLight}
-    ${tile}
-    ${variables_7.toc}
-    ${variables_16.tooltip}
-    ${typography}
-    ${variables_38.userMenu}
-    ${variables_40.versionPicker}
-    ${zIndexDepth}
-    ${scorecardColors}
-    ${variables_36.statusCode}
-    ${tab}
-    ${icon}
-    ${tree}
-    ${variables_37.segmented}
-    ${variables_42.switcher}
-    ${variables_17.checkbox}
-    ${variables_3.feedback}
-    ${variables_2.scorecard}
-    ${variables_41.datePicker}
-    ${replay}
-    ${variables_45.skipContent}
-    ${variables_46.pageActions}
-    ${variables_47.svgViewer}
-    ${variables_48.toast}
-    ${variables_49.pageNavigation}
-
+    ${exports.tokens}
     background-color: var(--bg-color);
     color: var(--text-color-primary);
     font-family: var(--font-family-base);

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

@@ -1,3 +1,4 @@
 export * from './global';
 export * from './dark';
 export { xyflow } from './xyflow';
+export { searchAiAppearAnimation } from './search-ai-appear';

package/lib/core/styles/index.js

@@ -14,9 +14,11 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.xyflow = void 0;
+exports.searchAiAppearAnimation = exports.xyflow = void 0;
 __exportStar(require("./global"), exports);
 __exportStar(require("./dark"), exports);
 var xyflow_1 = require("./xyflow");
 Object.defineProperty(exports, "xyflow", { enumerable: true, get: function () { return xyflow_1.xyflow; } });
+var search_ai_appear_1 = require("./search-ai-appear");
+Object.defineProperty(exports, "searchAiAppearAnimation", { enumerable: true, get: function () { return search_ai_appear_1.searchAiAppearAnimation; } });
 //# sourceMappingURL=index.js.map

package/lib/core/styles/search-ai-appear.d.ts

@@ -0,0 +1 @@
+export declare const searchAiAppearAnimation: import("styled-components").RuleSet<object>;

package/lib/core/styles/search-ai-appear.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.searchAiAppearAnimation = void 0;
+const styled_components_1 = require("styled-components");
+const appear = (0, styled_components_1.keyframes) `
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+`;
+exports.searchAiAppearAnimation = (0, styled_components_1.css) `
+  animation: ${appear} var(--search-ai-activity-fade-duration) ease-out;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+`;
+//# sourceMappingURL=search-ai-appear.js.map

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

@@ -0,0 +1 @@
+export type DropdownAlignment = 'start' | 'end';

package/lib/core/types/dropdown.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=dropdown.js.map

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

@@ -25,3 +25,4 @@ export type * from './tooltip';
 export type * from './toast';
 export type * from './link';
 export type * from './button-group';
+export type * from './dropdown';