@redocly/theme 0.70.0-next.1 → 0.70.0-next.3

package/lib/components/Product/utils.js

@@ -5,6 +5,6 @@ function getProductClassName(productName) {
     return `product-${productName
         .toLowerCase()
         .replace(/[^a-z0-9]+/g, '-')
-        .replace(/^-+|-+$/g, '')}`;
+        .replace(/^-+|(?<!-)-+$/g, '')}`;
 }
 //# sourceMappingURL=utils.js.map

package/lib/components/Search/SearchAiConversationInput.js

@@ -48,17 +48,21 @@ function SearchAiConversationInput({ isGeneratingResponse, onMessageSent, classN
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const inputRef = (0, react_1.useRef)(null);
+    const wasGeneratingResponseRef = (0, react_1.useRef)(isGeneratingResponse);
     const [query, setQuery] = (0, react_1.useState)('');
     (0, react_1.useEffect)(() => {
-        if (!isGeneratingResponse && inputRef.current) {
+        const wasGeneratingResponse = wasGeneratingResponseRef.current;
+        wasGeneratingResponseRef.current = isGeneratingResponse;
+        if (wasGeneratingResponse && !isGeneratingResponse) {
             requestAnimationFrame(() => {
                 var _a;
                 (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
             });
         }
     }, [isGeneratingResponse]);
+    const isDisabled = disabled || isGeneratingResponse || query.trim().length === 0;
     const handleSendMessage = () => {
-        if (disabled)
+        if (isDisabled)
             return;
         setQuery('');
         onMessageSent(query);
@@ -72,7 +76,6 @@ function SearchAiConversationInput({ isGeneratingResponse, onMessageSent, classN
             handleSendMessage();
         }
     };
-    const isDisabled = disabled || isGeneratingResponse || query.trim().length === 0;
     const commonProps = {
         placeholder: placeholder || translate('search.ai.followUpQuestion', 'Ask a follow up question?'),
         onChange: (e) => setQuery(e.target.value),
@@ -83,7 +86,7 @@ function SearchAiConversationInput({ isGeneratingResponse, onMessageSent, classN
     };
     return (react_1.default.createElement(SearchAiConversationInputWrapper, { "data-component-name": "Search/SearchAiConversationInput", className: className },
         multiline ? (react_1.default.createElement(ConversationTextarea, Object.assign({ ref: inputRef }, commonProps))) : (react_1.default.createElement(ConversationInput, Object.assign({ ref: inputRef, type: "text" }, commonProps))),
-        react_1.default.createElement(SendButton, { disabled: isDisabled, size: "small", icon: react_1.default.createElement(SendIcon_1.SendIcon, { color: isDisabled
+        react_1.default.createElement(SendButton, { "aria-label": translate('search.ai.send', 'Send question'), "aria-disabled": isDisabled, size: "small", icon: react_1.default.createElement(SendIcon_1.SendIcon, { color: isDisabled
                     ? '--button-content-color-disabled'
                     : 'var(--search-ai-conversation-input-send-button-icon-color)' }), onClick: handleSendMessage })));
 }
@@ -151,11 +154,12 @@ const SendButton = (0, styled_components_1.default)(Button_1.Button) `
   border-radius: var(--search-ai-conversation-input-send-button-border-radius);
   padding: var(--search-ai-conversation-input-send-button-padding);
 
-  &:hover {
+  &:hover:not([aria-disabled='true']) {
     background-color: var(--search-ai-conversation-input-send-button-bg-color-hover);
   }
 
-  &:disabled {
+  &[aria-disabled='true'] {
+    cursor: default;
     background-color: var(--search-ai-conversation-input-send-button-bg-color-disabled);
     border: var(--search-ai-conversation-input-send-button-border-disabled);
   }

package/lib/components/Search/SearchAiDialog.js

@@ -52,6 +52,13 @@ function SearchAiDialog({ isGeneratingResponse, response, initialMessage, error,
     const { aiAssistant } = (0, hooks_1.useThemeConfig)();
     const { translate } = useTranslate();
     const conversationEndRef = react_1.default.useRef(null);
+    const wrapperRef = react_1.default.useRef(null);
+    (0, react_1.useEffect)(() => {
+        requestAnimationFrame(() => {
+            var _a, _b;
+            (_b = (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('[data-component-name="Search/SearchAiConversationInput"] :is(input, textarea):not(:disabled)')) === null || _b === void 0 ? void 0 : _b.focus();
+        });
+    }, []);
     const suggestions = (_a = aiAssistant === null || aiAssistant === void 0 ? void 0 : aiAssistant.suggestions) !== null && _a !== void 0 ? _a : [];
     const placeholder = isGeneratingResponse
         ? translate('search.ai.generatingResponse', 'Generating response...')
@@ -139,7 +146,7 @@ function SearchAiDialog({ isGeneratingResponse, response, initialMessage, error,
     const handleFeedbackChange = (0, react_1.useCallback)((messageId, feedback) => {
         setConversation((prev) => prev.map((item) => (item.messageId === messageId ? Object.assign(Object.assign({}, item), { feedback }) : item)));
     }, [setConversation]);
-    return (react_1.default.createElement(SearchAiDialogWrapper, { "data-component-name": "Search/SearchAiDialog", className: className },
+    return (react_1.default.createElement(SearchAiDialogWrapper, { ref: wrapperRef, "data-component-name": "Search/SearchAiDialog", className: className },
         !conversation.length && (react_1.default.createElement(WelcomeWrapper, null,
             react_1.default.createElement(AiStarsIcon_1.AiStarsIcon, { color: "var(--search-ai-icon-color)", size: "32px", background: "var(--search-ai-icon-bg-color)", borderRadius: "var(--border-radius-lg)", margin: "0 var(--spacing-xs) 0 0" }),
             translate('search.ai.welcomeText', 'Welcome to AI assistant! Feel free to ask me anything. How can I help you? '))),

package/lib/components/Search/SearchAiMessage.js

@@ -251,7 +251,7 @@ const ResourceTagsWrapper = styled_components_1.default.div `
   flex-wrap: wrap;
   gap: var(--search-ai-resource-tags-gap);
 `;
-const ResourceTag = (0, styled_components_1.default)(Tag_1.Tag) `
+const ResourceTag = (0, styled_components_1.default)(Tag_1.Tag).attrs({ textTransform: 'none' }) `
   .tag-default {
     --tag-color: var(--search-ai-resource-tag-text-color);
     max-width: 100%;

package/lib/components/Search/SearchAiResponse.js

@@ -141,6 +141,7 @@ const ResourceTags = styled_components_1.default.div `
 `;
 const ResourceTag = (0, styled_components_1.default)(Tag_1.Tag).attrs({
     className: 'tag-resource',
+    textTransform: 'none',
 }) `
   .tag-default {
     --tag-color: --search-ai-resource-tag-text-color;

package/lib/components/Search/SearchItem.js

@@ -99,7 +99,15 @@ function SearchItem({ onClick, item, className, product, innerRef, }) {
                         (0, SearchHighlight_1.searchHighlight)(parameter.path.join(' → ')),
                         ` → `)) : null,
                     (0, SearchHighlight_1.searchHighlight)(parameter.name)),
-                react_1.default.createElement("div", null, (0, SearchHighlight_1.searchHighlight)(parameter.description)))) : (shouldShowPath && (react_1.default.createElement(SearchItemPath, null, highlight.path && highlight.path.length
+                react_1.default.createElement("div", null, (0, SearchHighlight_1.searchHighlight)(parameter.description)),
+                parameter.enum ? (react_1.default.createElement("div", null,
+                    translate('search.searchItem.enum', 'Enum'),
+                    ': ',
+                    (0, SearchHighlight_1.searchHighlight)(parameter.enum))) : null,
+                parameter.example ? (react_1.default.createElement("div", null,
+                    translate('search.searchItem.example', 'Example'),
+                    ': ',
+                    (0, SearchHighlight_1.searchHighlight)(parameter.example))) : null)) : (shouldShowPath && (react_1.default.createElement(SearchItemPath, null, highlight.path && highlight.path.length
                 ? (0, SearchHighlight_1.searchHighlight)(highlight.path.join(' → '))
                 : (_c = document.path) === null || _c === void 0 ? void 0 : _c.join(' → '))))),
         react_1.default.createElement(ReturnKeyIcon_1.ReturnKeyIcon, { color: "var(--search-item-text-color)" })));

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

@@ -0,0 +1,2 @@
+import type { ConsentCategory } from '../types/consent';
+export declare const CONSENT_CATEGORIES: readonly ConsentCategory[];

package/lib/core/constants/consent.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CONSENT_CATEGORIES = void 0;
+exports.CONSENT_CATEGORIES = [
+    {
+        id: 'necessary',
+        locked: true,
+        titleTranslationKey: 'consent.category.necessary.title',
+        descriptionTranslationKey: 'consent.category.necessary.description',
+        titleDefault: 'Necessary',
+        descriptionDefault: 'Needed for the site to work: your consent choice, your color mode, and anonymous usage data.',
+    },
+    {
+        id: 'analytics',
+        locked: false,
+        titleTranslationKey: 'consent.category.analytics.title',
+        descriptionTranslationKey: 'consent.category.analytics.description',
+        titleDefault: 'Analytics',
+        descriptionDefault: 'Helps us understand which pages are useful.',
+    },
+    {
+        id: 'marketing',
+        locked: false,
+        titleTranslationKey: 'consent.category.marketing.title',
+        descriptionTranslationKey: 'consent.category.marketing.description',
+        titleDefault: 'Marketing',
+        descriptionDefault: 'Lets us measure which campaigns bring visitors to this site.',
+    },
+];
+//# sourceMappingURL=consent.js.map

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

@@ -10,3 +10,4 @@ export * from './mcp';
 export * from './feedback';
 export * from './heading';
 export * from './markdown';
+export * from './consent';

package/lib/core/constants/index.js

@@ -26,4 +26,5 @@ __exportStar(require("./mcp"), exports);
 __exportStar(require("./feedback"), exports);
 __exportStar(require("./heading"), exports);
 __exportStar(require("./markdown"), exports);
+__exportStar(require("./consent"), exports);
 //# sourceMappingURL=index.js.map

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

@@ -13,7 +13,7 @@ export declare const AiSearchConversationRole: {
 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;
+export declare const SEARCH_DEBOUNCE_TIME_MS = 500;
 export declare const DEFAULT_KEYBOARD_SHORTCUTS = "\u2318+K,CTRL+K";
 export declare const TOOL_CALL_DISPLAY_TEXT: Partial<Record<string, {
     inProgressText: string;

package/lib/core/constants/search.js

@@ -38,7 +38,7 @@ exports.AI_SEARCH_ERROR_CONFIG = {
     [AiSearchError.ErrorProcessingResponse]: defaultErrorConfig,
 };
 exports.AI_SEARCH_MAX_MESSAGE_LENGTH = 45000;
-exports.SEARCH_DEBOUNCE_TIME_MS = 300;
+exports.SEARCH_DEBOUNCE_TIME_MS = 500;
 exports.DEFAULT_KEYBOARD_SHORTCUTS = '⌘+K,CTRL+K';
 exports.TOOL_CALL_DISPLAY_TEXT = {
     [search_1.ToolCallName.SearchDocumentation]: {

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

@@ -22,6 +22,8 @@ export * from './menu/use-collapse';
 export * from './feedback/use-report-dialog';
 export * from './use-tabs';
 export * from './use-focus-trap';
+export * from './use-consent-dialog';
+export * from './use-consent-telemetry';
 export * from './use-language-picker';
 export * from './use-product-picker';
 export * from './search/use-search-dialog';

package/lib/core/hooks/index.js

@@ -38,6 +38,8 @@ __exportStar(require("./menu/use-collapse"), exports);
 __exportStar(require("./feedback/use-report-dialog"), exports);
 __exportStar(require("./use-tabs"), exports);
 __exportStar(require("./use-focus-trap"), exports);
+__exportStar(require("./use-consent-dialog"), exports);
+__exportStar(require("./use-consent-telemetry"), exports);
 __exportStar(require("./use-language-picker"), exports);
 __exportStar(require("./use-product-picker"), exports);
 __exportStar(require("./search/use-search-dialog"), exports);

package/lib/core/hooks/use-consent-dialog.d.ts

@@ -0,0 +1,12 @@
+import type { RefObject } from 'react';
+import type { ConsentCategory, ConsentCategoryId, UseConsentResult } from '../types/consent';
+export type ConsentDraft = Record<Exclude<ConsentCategoryId, 'necessary'>, boolean>;
+export type UseConsentDialogResult = {
+    draft: ConsentDraft;
+    setCategory: (id: keyof ConsentDraft, value: boolean) => void;
+    dialogRef: RefObject<HTMLDivElement | null>;
+    close: () => void;
+    save: () => void;
+    categories: readonly ConsentCategory[];
+};
+export declare function useConsentDialog(consent: UseConsentResult): UseConsentDialogResult;

package/lib/core/hooks/use-consent-dialog.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useConsentDialog = useConsentDialog;
+const react_1 = require("react");
+const consent_1 = require("../constants/consent");
+const use_focus_trap_1 = require("./use-focus-trap");
+function useConsentDialog(consent) {
+    const [draft, setDraft] = (0, react_1.useState)(() => { var _a, _b; var _c, _d; return ({
+        analytics: (_c = (_a = consent.state) === null || _a === void 0 ? void 0 : _a.analytics) !== null && _c !== void 0 ? _c : consent.mode === 'opt-out',
+        marketing: ((_d = (_b = consent.state) === null || _b === void 0 ? void 0 : _b.marketing) !== null && _d !== void 0 ? _d : consent.mode === 'opt-out') && !consent.gpc,
+    }); });
+    const dialogRef = (0, react_1.useRef)(null);
+    const close = consent.closeDialog;
+    const closeRef = (0, react_1.useRef)(close);
+    closeRef.current = close;
+    (0, react_1.useEffect)(() => {
+        const previous = document.activeElement;
+        const onKeyDown = (event) => {
+            if (event.key === 'Escape')
+                closeRef.current();
+        };
+        document.addEventListener('keydown', onKeyDown);
+        return () => {
+            var _a;
+            document.removeEventListener('keydown', onKeyDown);
+            (_a = previous === null || previous === void 0 ? void 0 : previous.focus) === null || _a === void 0 ? void 0 : _a.call(previous);
+        };
+    }, []);
+    (0, use_focus_trap_1.useFocusTrap)(dialogRef);
+    const setCategory = (id, value) => {
+        setDraft((current) => (Object.assign(Object.assign({}, current), { [id]: value })));
+    };
+    const save = () => consent.save(draft);
+    return { draft, setCategory, dialogRef, close, save, categories: consent_1.CONSENT_CATEGORIES };
+}
+//# sourceMappingURL=use-consent-dialog.js.map

package/lib/core/hooks/use-consent-telemetry.d.ts

@@ -0,0 +1 @@
+export declare function useConsentTelemetry(): void;

package/lib/core/hooks/use-consent-telemetry.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useConsentTelemetry = useConsentTelemetry;
+const react_1 = require("react");
+const use_theme_hooks_1 = require("./use-theme-hooks");
+const get_base_data_attributes_1 = require("../utils/telemetry/get-base-data-attributes");
+function isRealmOwned(runtime) {
+    return runtime.region.source !== 'provider';
+}
+function getConsentRuntime() {
+    var _a;
+    if (typeof window === 'undefined')
+        return undefined;
+    return (_a = window.redocly) === null || _a === void 0 ? void 0 : _a.consent;
+}
+// Sends one consent.changed event per visitor choice in the modes Realm owns.
+function useConsentTelemetry() {
+    const { useTelemetry } = (0, use_theme_hooks_1.useThemeHooks)();
+    const telemetry = useTelemetry();
+    const telemetryRef = (0, react_1.useRef)(telemetry);
+    telemetryRef.current = telemetry;
+    (0, react_1.useEffect)(() => {
+        const found = getConsentRuntime();
+        const runtime = found && isRealmOwned(found) ? found : null;
+        if (!runtime)
+            return;
+        return runtime.on('change', (state) => {
+            const choice = state.analytics && state.marketing
+                ? 'accept'
+                : !state.analytics && !state.marketing
+                    ? 'reject'
+                    : 'partial';
+            const { origin, pathname, search, hash } = window.location;
+            const uri = `${origin}${pathname}${search}${hash}`;
+            telemetryRef.current.sendConsentChangedMessage([
+                Object.assign(Object.assign({}, (0, get_base_data_attributes_1.getBaseDataAttributes)('consent', 'consent')), { choice, mode: runtime.mode, configuredMode: runtime.configuredMode, regionSource: runtime.region.source, gpc: runtime.gpc }),
+                (0, get_base_data_attributes_1.getBaseDataAttributes)(uri, 'page', uri),
+            ]);
+        });
+    }, []);
+}
+//# sourceMappingURL=use-consent-telemetry.js.map

package/lib/core/hooks/use-dialog-hotkeys.js

@@ -23,8 +23,10 @@ function useDialogHotKeys(ref, onClose) {
     };
     const onFocusableElementsHandler = () => {
         var _a;
-        const focusableElements = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('input, [href], [tabindex]:not([tabindex="-1"])');
-        if (focusableElements && focusableElements.length > 0) {
+        var _b;
+        const focusableElements = Array.from((_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('input, textarea, select, button, [href], [tabindex]:not([tabindex="-1"])')) !== null && _b !== void 0 ? _b : []).filter((element) => !element.hasAttribute('disabled') &&
+            (typeof element.checkVisibility !== 'function' || element.checkVisibility()));
+        if (focusableElements.length > 0) {
             firstFocusableRef.current = focusableElements[0];
             lastFocusableRef.current = focusableElements[focusableElements.length - 1];
         }

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

@@ -17,6 +17,20 @@ const fallbacks = {
     useOtelTelemetry: () => ({ send: () => { } }),
     useBreadcrumbs: () => ({ breadcrumbs: [], siblings: undefined }),
     useBanner: () => ({ banner: undefined, dismissBanner: () => { } }),
+    useConsent: () => ({
+        enabled: false,
+        config: undefined,
+        mode: undefined,
+        state: undefined,
+        decided: false,
+        gpc: false,
+        isDialogOpen: false,
+        openDialog: () => { },
+        closeDialog: () => { },
+        accept: () => { },
+        reject: () => { },
+        save: () => { },
+    }),
     useCodeHighlight: () => ({ highlight: (rawContent) => rawContent }),
     useUserMenu: () => ({}),
     usePageData: () => null,

package/lib/core/styles/global.js

@@ -30,26 +30,27 @@ const variables_25 = require("../../components/CodeBlock/variables");
 const variables_26 = require("../../components/Product/variables");
 const variables_27 = require("../../components/Markdown/variables");
 const variables_28 = require("../../components/Banner/variables");
-const variables_29 = require("../../markdoc/components/Accordion/variables");
-const variables_30 = require("../../markdoc/components/Tabs/variables");
-const variables_31 = require("../../markdoc/components/NumberedList/variables");
-const variables_32 = require("../../markdoc/components/Diagram/variables");
-const variables_33 = require("../../components/LastUpdated/variables");
-const variables_34 = require("../../components/Logo/variables");
-const variables_35 = require("../../components/StatusCode/variables");
-const variables_36 = require("../../components/Segmented/variables");
-const variables_37 = require("../../components/UserMenu/variables");
-const variables_38 = require("../../components/Tags/variables");
-const variables_39 = require("../../components/VersionPicker/variables");
-const variables_40 = require("../../components/DatePicker/variables");
-const variables_41 = require("../../components/Switch/variables");
-const variables_42 = require("../../markdoc/components/Cards/variables");
-const variables_43 = require("../../markdoc/components/CodeWalkthrough/variables");
-const variables_44 = require("../../components/SkipContent/variables");
-const variables_45 = require("../../components/PageActions/variables");
-const variables_46 = require("../../components/SvgViewer/variables");
-const variables_47 = require("../../components/Toast/variables");
-const variables_48 = require("../../components/PageNavigation/variables");
+const variables_29 = require("../../components/Consent/variables");
+const variables_30 = require("../../markdoc/components/Accordion/variables");
+const variables_31 = require("../../markdoc/components/Tabs/variables");
+const variables_32 = require("../../markdoc/components/NumberedList/variables");
+const variables_33 = require("../../markdoc/components/Diagram/variables");
+const variables_34 = require("../../components/LastUpdated/variables");
+const variables_35 = require("../../components/Logo/variables");
+const variables_36 = require("../../components/StatusCode/variables");
+const variables_37 = require("../../components/Segmented/variables");
+const variables_38 = require("../../components/UserMenu/variables");
+const variables_39 = require("../../components/Tags/variables");
+const variables_40 = require("../../components/VersionPicker/variables");
+const variables_41 = require("../../components/DatePicker/variables");
+const variables_42 = require("../../components/Switch/variables");
+const variables_43 = require("../../markdoc/components/Cards/variables");
+const variables_44 = require("../../markdoc/components/CodeWalkthrough/variables");
+const variables_45 = require("../../components/SkipContent/variables");
+const variables_46 = require("../../components/PageActions/variables");
+const variables_47 = require("../../components/SvgViewer/variables");
+const variables_48 = require("../../components/Toast/variables");
+const variables_49 = require("../../components/PageNavigation/variables");
 const palette_1 = require("./palette");
 const dark_1 = require("./dark");
 const themeColors = (0, styled_components_1.css) `
@@ -1313,33 +1314,34 @@ exports.styles = (0, styled_components_1.css) `
     ${badges}
     ${variables_28.banner}
     ${borders}
+    ${variables_29.consent}
     ${variables_5.breadcrumbs}
     ${variables_20.button}
     ${variables_21.aiAssistantButton}
-    ${variables_42.cards}
+    ${variables_43.cards}
     ${variables_8.catalog}
     ${variables_11.catalogClassic}
     ${variables_25.code}
-    ${variables_43.codeWalkthrough}
+    ${variables_44.codeWalkthrough}
     ${docsDropdown}
     ${variables_15.dropdown}
     ${error}
     ${variables_10.filter}
     ${variables_19.footer}
     ${headingsTypography}
-    ${variables_38.httpTag}
+    ${variables_39.httpTag}
     ${variables_9.image}
     ${inputs}
     ${variables_1.languagePicker}
-    ${variables_33.lastUpdated}
+    ${variables_34.lastUpdated}
     ${links}
     ${loadProgressBar}
-    ${variables_34.logo}
+    ${variables_35.logo}
     ${variables_27.markdown}
-    ${variables_29.markdownAccordion}
-    ${variables_30.markdownTabs}
-    ${variables_31.markdownNumberedList}
-    ${variables_32.diagram}
+    ${variables_30.markdownAccordion}
+    ${variables_31.markdownTabs}
+    ${variables_32.markdownNumberedList}
+    ${variables_33.diagram}
     ${variables_24.menu}
     ${variables_24.mobileMenu}
     ${modal}
@@ -1358,26 +1360,26 @@ exports.styles = (0, styled_components_1.css) `
     ${variables_7.toc}
     ${variables_16.tooltip}
     ${typography}
-    ${variables_37.userMenu}
-    ${variables_39.versionPicker}
+    ${variables_38.userMenu}
+    ${variables_40.versionPicker}
     ${zIndexDepth}
     ${scorecardColors}
-    ${variables_35.statusCode}
+    ${variables_36.statusCode}
     ${tab}
     ${icon}
     ${tree}
-    ${variables_36.segmented}
-    ${variables_41.switcher}
+    ${variables_37.segmented}
+    ${variables_42.switcher}
     ${variables_17.checkbox}
     ${variables_3.feedback}
     ${variables_2.scorecard}
-    ${variables_40.datePicker}
+    ${variables_41.datePicker}
     ${replay}
-    ${variables_44.skipContent}
-    ${variables_45.pageActions}
-    ${variables_46.svgViewer}
-    ${variables_47.toast}
-    ${variables_48.pageNavigation}
+    ${variables_45.skipContent}
+    ${variables_46.pageActions}
+    ${variables_47.svgViewer}
+    ${variables_48.toast}
+    ${variables_49.pageNavigation}
 
     background-color: var(--bg-color);
     color: var(--text-color-primary);

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

@@ -0,0 +1,54 @@
+import type { ConsentConfig } from '@redocly/config';
+import type { TranslationKey } from './l10n';
+export type ConsentCategoryId = 'necessary' | 'analytics' | 'marketing';
+export type ConsentCategory = {
+    id: ConsentCategoryId;
+    locked: boolean;
+    titleTranslationKey: TranslationKey;
+    descriptionTranslationKey: TranslationKey;
+    titleDefault: string;
+    descriptionDefault: string;
+};
+export type ConsentState = {
+    necessary: true;
+    analytics: boolean;
+    marketing: boolean;
+};
+export type ConsentChoice = {
+    analytics?: boolean;
+    marketing?: boolean;
+};
+export type ConsentProvider = 'onetrust' | 'cookiebot' | 'trustarc' | 'tcf';
+export type ConsentRuntime = {
+    configuredMode: 'auto' | 'opt-in' | 'opt-out' | ConsentProvider;
+    mode: 'opt-in' | 'opt-out' | ConsentProvider;
+    state: ConsentState;
+    decided: boolean;
+    gpc: boolean;
+    dialogOpen: boolean;
+    region: {
+        source: 'timezone' | 'config' | 'none' | 'provider';
+        timeZone: string | null;
+    };
+    accept: () => void;
+    reject: () => void;
+    save: (next: ConsentChoice) => void;
+    open: () => void;
+    close: () => void;
+    reload: () => void;
+    on: (event: 'change' | 'open' | 'close', fn: (state: ConsentState) => void) => () => void;
+};
+export type UseConsentResult = {
+    enabled: boolean;
+    config: ConsentConfig | undefined;
+    mode: ConsentRuntime['mode'] | undefined;
+    state: ConsentState | undefined;
+    decided: boolean;
+    gpc: boolean;
+    isDialogOpen: boolean;
+    openDialog: () => void;
+    closeDialog: () => void;
+    accept: () => void;
+    reject: () => void;
+    save: (next: ConsentChoice) => void;
+};

package/lib/core/types/consent.js

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

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

@@ -12,6 +12,7 @@ import type { SearchItemData, SearchFacet, SearchFilterItem, SearchFacetQuery, A
 import type { SubmitFeedbackParams } from './feedback';
 import type { TFunction } from './l10n';
 import type { BreadcrumbItem } from './breadcrumb';
+import type { UseConsentResult } from './consent';
 import type { AiSearchError } from '../constants/search';
 export type ThemeHooks = {
     useTranslate: () => {
@@ -64,6 +65,7 @@ export type ThemeHooks = {
         banner: ResolvedBannerConfig | undefined;
         dismissBanner: (content: string) => void;
     };
+    useConsent: () => UseConsentResult;
     useSearch: (product?: string, autoSearchDisabled?: boolean) => {
         query: string;
         setQuery: React.Dispatch<React.SetStateAction<string>>;

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

@@ -1,5 +1,6 @@
 export type * from './breadcrumb';
 export type * from './catalog';
+export type * from './consent';
 export type * from './l10n';
 export type * from './mcp';
 export type * from './feedback';