@redocly/theme 0.54.0 → 0.55.0-next.0

package/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -9,8 +9,8 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const hooks_1 = require("../../core/hooks");
 const Breadcrumb_1 = require("../../components/Breadcrumbs/Breadcrumb");
 function Breadcrumbs(props) {
-    const { useBreadcrumbs, useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
-    const otelTelemetry = useOtelTelemetry();
+    const { useBreadcrumbs, useTelemetry } = (0, hooks_1.useThemeHooks)();
+    const telemetry = useTelemetry();
     const breadcrumbs = useBreadcrumbs();
     if (breadcrumbs.length === 0) {
         return null;
@@ -19,7 +19,7 @@ function Breadcrumbs(props) {
         const isLast = idx === breadcrumbs.length - 1;
         return (react_1.default.createElement(react_1.default.Fragment, { key: idx },
             react_1.default.createElement(Breadcrumb_1.Breadcrumb, { link: breadcrumb.link, label: breadcrumb.label, isActive: isLast, onClick: () => {
-                    otelTelemetry.send({
+                    telemetry.send({
                         type: 'breadcrumb.clicked',
                         payload: {
                             link: breadcrumb.link,

package/lib/components/Buttons/EditPageButton.js

@@ -10,10 +10,10 @@ const hooks_1 = require("../../core/hooks");
 const EditIcon_1 = require("../../icons/EditIcon/EditIcon");
 const Link_1 = require("../../components/Link/Link");
 function EditPageButton({ to }) {
-    const { useTranslate, useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
+    const { useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
-    const otelTelemetry = useOtelTelemetry();
-    return (react_1.default.createElement(EditPageButtonWrapper, { "data-component-name": "Buttons/EditPageButton", target: "_blank", to: to, onClick: () => otelTelemetry.send({ type: 'edit_page_link.clicked' }) },
+    const telemetry = useTelemetry();
+    return (react_1.default.createElement(EditPageButtonWrapper, { "data-component-name": "Buttons/EditPageButton", target: "_blank", to: to, onClick: () => telemetry.send({ type: 'edit_page_link.clicked' }) },
         react_1.default.createElement(ButtonIcon, null),
         react_1.default.createElement(ButtonText, { "data-translation-key": "markdown.editPage.text" }, translate('markdown.editPage.text', 'Edit'))));
 }

package/lib/components/CatalogClassic/CatalogClassicActions.js

@@ -45,13 +45,13 @@ function CatalogClassicActions(props) {
             activeFilters++;
         }
     }
-    const { useTranslate, useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
+    const { useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
-    const otelTelemetry = useOtelTelemetry();
+    const telemetry = useTelemetry();
     return (React.createElement(CatalogActionsWrapper, { "data-component-name": "CatalogClassic/CatalogClassicActions" },
         React.createElement(Button_1.Button, { variant: "ghost", size: "small", icon: React.createElement(FilterIcon_1.FilterIcon, null), iconPosition: "left", onClick: () => {
                 onOpenFilter();
-                otelTelemetry.send({ type: 'catalog_actions_button.clicked' });
+                telemetry.send({ type: 'catalog_actions_button.clicked' });
             }, "data-translation-key": "catalog.filters.title" }, translate('catalog.filters.title', 'Filters')),
         activeFilters > 0 ? React.createElement(CounterTag_1.CounterTag, { borderless: true }, activeFilters) : null));
 }

package/lib/components/CatalogClassic/CatalogClassicCard.js

@@ -51,10 +51,10 @@ function stripHtmlTags(text) {
 }
 function CatalogClassicCard({ item }) {
     var _a, _b;
-    const { useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
-    const otelTelemetry = useOtelTelemetry();
+    const { useTelemetry } = (0, hooks_1.useThemeHooks)();
+    const telemetry = useTelemetry();
     return (React.createElement(Link_1.Link, { key: item.docsLink || item.link, to: item.docsLink || item.link },
-        React.createElement(StyledCard, { "data-component-name": "CatalogClassic/CatalogClassicCard", onClick: () => otelTelemetry.send({ type: 'catalog_item.clicked' }) },
+        React.createElement(StyledCard, { "data-component-name": "CatalogClassic/CatalogClassicCard", onClick: () => telemetry.send({ type: 'catalog_item.clicked' }) },
             React.createElement(CardContent, null,
                 React.createElement(CardTitleWrapper, null,
                     React.createElement(CardTitle, null,

package/lib/components/CatalogClassic/CatalogClassicInfoBlock.js

@@ -18,10 +18,10 @@ function CatalogClassicInfoBlock(props) {
 }
 function ScorecardBadge(props) {
     const { level, slug, colorVariable } = props;
-    const { useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
-    const otelTelemetry = useOtelTelemetry();
+    const { useTelemetry } = (0, hooks_1.useThemeHooks)();
+    const telemetry = useTelemetry();
     return (react_1.default.createElement(Link_1.Link, { to: slug },
-        react_1.default.createElement(Tag_1.Tag, { onClick: () => otelTelemetry.send({ type: 'scorecard_link.clicked', payload: { action: 'click' } }), withStatusDot: true, statusDotColor: `var(${colorVariable})` }, level)));
+        react_1.default.createElement(Tag_1.Tag, { onClick: () => telemetry.send({ type: 'scorecard_link.clicked', payload: { action: 'click' } }), withStatusDot: true, statusDotColor: `var(${colorVariable})` }, level)));
 }
 const CatalogInfoBlockWrapper = styled_components_1.default.div `
   position: relative;

package/lib/components/CodeBlock/CodeBlockControls.js

@@ -19,8 +19,8 @@ const Button_1 = require("../../components/Button/Button");
 function CodeBlockControls({ children, className, title, controls, tabs, }) {
     var _a, _b, _c, _d, _e;
     const { codeSnippet } = (0, hooks_1.useThemeConfig)();
-    const { useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
-    const otelTelemetry = useOtelTelemetry();
+    const { useTelemetry } = (0, hooks_1.useThemeHooks)();
+    const telemetry = useTelemetry();
     const controlsType = (codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.elementFormat) || 'icon';
     const { copy, expand, collapse, select, deselect, report } = controls || {
         copy: null,
@@ -48,7 +48,7 @@ function CodeBlockControls({ children, className, title, controls, tabs, }) {
                             (_a = copy === null || copy === void 0 ? void 0 : copy.onClick) === null || _a === void 0 ? void 0 : _a.call(copy);
                         }
                         else {
-                            otelTelemetry.send({
+                            telemetry.send({
                                 type: 'openapi_docs.copy_code_snippet.clicked',
                                 payload: { snippet_type: 'copy' },
                             });

package/lib/components/Feedback/Feedback.js

@@ -46,9 +46,9 @@ const feedbackComponents = {
 };
 function Feedback(props) {
     var _a;
-    const { useSubmitFeedback, useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
+    const { useSubmitFeedback, useTelemetry } = (0, hooks_1.useThemeHooks)();
     const { submitFeedback } = useSubmitFeedback();
-    const otelTelemetry = useOtelTelemetry();
+    const telemetry = useTelemetry();
     const { pathname } = (0, react_router_dom_1.useLocation)();
     const { feedback: themeFeedbackConf } = (0, hooks_1.useThemeConfig)();
     const feedbackConf = Object.assign(Object.assign({}, themeFeedbackConf), { path: props === null || props === void 0 ? void 0 : props.path, type: (props === null || props === void 0 ? void 0 : props.type) || (themeFeedbackConf === null || themeFeedbackConf === void 0 ? void 0 : themeFeedbackConf.type) || constants_1.DEFAULT_FEEDBACK_TYPE, settings: (props === null || props === void 0 ? void 0 : props.settings) || (themeFeedbackConf === null || themeFeedbackConf === void 0 ? void 0 : themeFeedbackConf.settings) || {}, hide: (_a = props.hide) !== null && _a !== void 0 ? _a : themeFeedbackConf === null || themeFeedbackConf === void 0 ? void 0 : themeFeedbackConf.hide });
@@ -64,7 +64,7 @@ function Feedback(props) {
         return (React.createElement(FeedbackWrapper, { "data-component-name": "Feedback/Feedback" },
             React.createElement(FeedbackComponent, { settings: settings, onSubmit: (values) => {
                     submitFeedback({ type, values, path });
-                    otelTelemetry.send({ type: 'feedback.sent', payload: { feedback_type: type } });
+                    telemetry.send({ type: 'feedback.sent', payload: { feedback_type: type } });
                 } })));
     };
     return React.createElement(React.Fragment, { key: pathname }, renderFeedbackComponent());

package/lib/components/Feedback/ReportDialog.js

@@ -21,9 +21,9 @@ const Comment_1 = require("../../components/Feedback/Comment");
 const Portal_1 = require("../../components/Portal/Portal");
 function ReportDialog({ location, settings, onSubmit, onCancel, submitFeedback, lang, }) {
     const { label } = settings;
-    const { useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
+    const { useTelemetry } = (0, hooks_1.useThemeHooks)();
     const { pathname } = (0, react_router_dom_1.useLocation)();
-    const otelTelemetry = useOtelTelemetry();
+    const telemetry = useTelemetry();
     return (react_1.default.createElement(Portal_1.Portal, null,
         react_1.default.createElement(ReportDialogWrapper, { className: "scroll-lock", "data-component-name": "Feedback/ReportDialog" },
             react_1.default.createElement(Comment_1.Comment, { settings: { label }, onSubmit: (value) => __awaiter(this, void 0, void 0, function* () {
@@ -34,7 +34,7 @@ function ReportDialog({ location, settings, onSubmit, onCancel, submitFeedback,
                         path: pathname,
                         lang,
                     });
-                    otelTelemetry.send({ type: 'code_snippet.reported' });
+                    telemetry.send({ type: 'code_snippet.reported' });
                     onSubmit();
                 }), isDialog: true, onCancel: onCancel }))));
 }

package/lib/components/Filter/FilterCheckboxes.js

@@ -15,16 +15,16 @@ const CheckboxIcon_1 = require("../../icons/CheckboxIcon/CheckboxIcon");
 const CounterTag_1 = require("../../components/Tags/CounterTag");
 const utils_1 = require("../../core/utils");
 function FilterCheckboxes({ filter, filterValuesCasing }) {
-    const { useTranslate, useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
+    const { useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
-    const otelTelemetry = useOtelTelemetry();
+    const telemetry = useTelemetry();
     return (react_1.default.createElement(FilterCheckboxesWrapper, { "data-component-name": "Filter/FilterCheckboxes" },
         react_1.default.createElement(FilterTitle_1.FilterTitle, { "data-translation-key": filter.titleTranslationKey }, translate(filter.titleTranslationKey, filter.title)),
         react_1.default.createElement(FilterOptions_1.FilterOptions, null, filter.filteredOptions.map(({ value, count }) => {
             const id = 'filter--' + filter.property + '--' + value;
             return (react_1.default.createElement(FilterCheckboxOption, { key: id, role: "link", onClick: () => {
                     filter.toggleOption(value);
-                    otelTelemetry.send({ type: 'filter_checkbox.toggled', payload: { id } });
+                    telemetry.send({ type: 'filter_checkbox.toggled', payload: { id } });
                 } },
                 react_1.default.createElement(CheckboxIcon_1.CheckboxIcon, { checked: filter.selectedOptions.has(value) }),
                 react_1.default.createElement(FilterOptionLabel_1.FilterOptionLabel, { "data-translation-key": value }, (0, utils_1.changeTextCasing)(translate(value), filterValuesCasing)),

package/lib/components/Footer/FooterItem.js

@@ -12,15 +12,15 @@ const Link_1 = require("../../components/Link/Link");
 const Image_1 = require("../../components/Image/Image");
 const utils_1 = require("../../core/utils");
 function FooterItem({ item, iconsOnly, className }) {
-    const { useTranslate, useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
-    const otelTelemetry = useOtelTelemetry();
+    const { useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
+    const telemetry = useTelemetry();
     const { translate } = useTranslate();
     if (item.type === 'error') {
         return null;
     }
     const hasIcon = Boolean(item.icon || item.srcSet);
     const iconWithoutLabel = Boolean(item.label === item.link && hasIcon);
-    return (react_1.default.createElement(FooterItemWrapper, { className: className, "data-component-name": "Footer/FooterItem", iconsOnly: iconsOnly, item: item }, item.type === 'separator' ? (react_1.default.createElement(FooterSeparator, { "data-translation-key": item.labelTranslationKey }, translate(item.labelTranslationKey, item.label))) : (react_1.default.createElement(FooterLink, { to: item.link, external: item.external, target: item.target, "data-testid": item.label, onClick: () => otelTelemetry.send({ type: 'footer_item.clicked' }), "data-translation-key": item.labelTranslationKey },
+    return (react_1.default.createElement(FooterItemWrapper, { className: className, "data-component-name": "Footer/FooterItem", iconsOnly: iconsOnly, item: item }, item.type === 'separator' ? (react_1.default.createElement(FooterSeparator, { "data-translation-key": item.labelTranslationKey }, translate(item.labelTranslationKey, item.label))) : (react_1.default.createElement(FooterLink, { to: item.link, external: item.external, target: item.target, "data-testid": item.label, onClick: () => telemetry.send({ type: 'footer_item.clicked' }), "data-translation-key": item.labelTranslationKey },
         hasIcon ? (react_1.default.createElement(FooterLinkIcon, { iconsOnly: iconsOnly },
             react_1.default.createElement(Image_1.Image, { src: item.icon, srcSet: item.srcSet }))) : null,
         !iconWithoutLabel ? translate(item.labelTranslationKey, item.label) : null,

package/lib/components/LanguagePicker/LanguagePicker.js

@@ -15,8 +15,8 @@ const Dropdown_1 = require("../../components/Dropdown/Dropdown");
 const CheckmarkIcon_1 = require("../../icons/CheckmarkIcon/CheckmarkIcon");
 function LanguagePicker(props) {
     const { currentLocale, locales, setLocale } = (0, hooks_1.useLanguagePicker)();
-    const { useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
-    const otelTelemetry = useOtelTelemetry();
+    const { useTelemetry } = (0, hooks_1.useThemeHooks)();
+    const telemetry = useTelemetry();
     if (locales.length < 2 || !currentLocale) {
         return null;
     }
@@ -26,7 +26,7 @@ function LanguagePicker(props) {
         onAction: () => {
             setLocale(locale.code);
             props.onChangeLanguage(locale.code);
-            otelTelemetry.send({
+            telemetry.send({
                 type: 'language_picker_locale.changed',
                 payload: { locale: locale.code },
             });

package/lib/components/Logo/Logo.js

@@ -22,13 +22,13 @@ const Link_1 = require("../../components/Link/Link");
 const Image_1 = require("../../components/Image/Image");
 function Logo(_a) {
     var { config, className } = _a, otherProps = __rest(_a, ["config", "className"]);
-    const { useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
-    const otelTelemetry = useOtelTelemetry();
+    const { useTelemetry } = (0, hooks_1.useThemeHooks)();
+    const telemetry = useTelemetry();
     if (!(config === null || config === void 0 ? void 0 : config.image) && !(config === null || config === void 0 ? void 0 : config.srcSet)) {
         return null;
     }
     const image = (react_1.default.createElement(Image_1.Image, { className: className, src: config.image, srcSet: config.srcSet, alt: config.altText }));
-    return (react_1.default.createElement(LogoWrapper, Object.assign({ "data-component-name": "Logo/Logo", className: className }, otherProps), config.link ? (react_1.default.createElement(Link_1.Link, { to: config.link, onClick: () => otelTelemetry.send({ type: 'logo.clicked' }) }, image)) : (image)));
+    return (react_1.default.createElement(LogoWrapper, Object.assign({ "data-component-name": "Logo/Logo", className: className }, otherProps), config.link ? (react_1.default.createElement(Link_1.Link, { to: config.link, onClick: () => telemetry.send({ type: 'logo.clicked' }) }, image)) : (image)));
 }
 const LogoWrapper = styled_components_1.default.div `
   max-width: var(--logo-max-width);

package/lib/components/Menu/MenuItem.js

@@ -39,7 +39,7 @@ const Badge_1 = require("../../components/Badge/Badge");
 function MenuItem(props) {
     var _a;
     const { item, depth, className, onClick } = props;
-    const { useTranslate, useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
+    const { useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const type = (0, utils_1.getMenuItemType)(item);
     const nestedMenuRef = (0, react_1.useRef)(null);
@@ -47,14 +47,14 @@ function MenuItem(props) {
     const { isExpanded, canUnmount, style, handleExpand } = (0, hooks_1.useNestedMenu)(Object.assign(Object.assign({}, props), { type,
         labelRef,
         nestedMenuRef }));
-    const otelTelemetry = useOtelTelemetry();
+    const telemetry = useTelemetry();
     const isDrilldown = type === constants_1.MenuItemType.DrillDown;
     const isSeparator = type === constants_1.MenuItemType.Separator;
     const isNested = type === constants_1.MenuItemType.Group;
     const hasChevron = isNested && !isDrilldown;
     const hasHttpTag = !!item.httpVerb || type === constants_1.MenuItemType.Operation;
     const handleOnClick = () => {
-        otelTelemetry.send({
+        telemetry.send({
             type: 'sidebar.item_clicked',
             payload: {
                 label: item.label,

package/lib/components/Navbar/Navbar.js

@@ -23,9 +23,9 @@ function Navbar({ className }) {
     var _a;
     const { isOpen, closeMobileMenu, openMobileMenu } = (0, hooks_1.useMobileMenu)(false);
     const themeConfig = (0, hooks_1.useThemeConfig)();
-    const { useL10n, useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
+    const { useL10n, useTelemetry } = (0, hooks_1.useThemeHooks)();
     const { changeLanguage } = useL10n();
-    const otelTelemetry = useOtelTelemetry();
+    const telemetry = useTelemetry();
     const menu = (_a = themeConfig.navbar) === null || _a === void 0 ? void 0 : _a.items;
     const { search: searchSettings, navbar, userMenu: userMenuSettings, logo } = themeConfig;
     if (navbar === null || navbar === void 0 ? void 0 : navbar.hide) {
@@ -45,11 +45,11 @@ function Navbar({ className }) {
             react_1.default.createElement(MobileMenuButton, { variant: "text", "data-testid": "mobile-menu-button", onClick: isOpen
                     ? () => {
                         closeMobileMenu();
-                        otelTelemetry.send({ type: 'mobile_menu_button_close.clicked' });
+                        telemetry.send({ type: 'mobile_menu_button_close.clicked' });
                     }
                     : () => {
                         openMobileMenu();
-                        otelTelemetry.send({ type: 'mobile_menu_button_open.clicked' });
+                        telemetry.send({ type: 'mobile_menu_button_open.clicked' });
                     }, icon: isOpen ? react_1.default.createElement(CloseIcon_1.CloseIcon, null) : react_1.default.createElement(MenuIcon_1.MenuIcon, null) }),
             hideUserMenu ? null : react_1.default.createElement(UserMenu_1.UserMenu, null))));
 }

package/lib/components/Navbar/NavbarItem.js

@@ -39,17 +39,17 @@ const Link_1 = require("../../components/Link/Link");
 const Dropdown_1 = require("../../components/Dropdown/Dropdown");
 function NavbarItem({ navItem, className }) {
     const { pathname } = (0, react_router_dom_1.useLocation)();
-    const { useTranslate, useL10nConfig, useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
+    const { useTranslate, useL10nConfig, useTelemetry } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const { defaultLocale, currentLocale, locales } = useL10nConfig();
-    const otelTelemetry = useOtelTelemetry();
+    const telemetry = useTelemetry();
     if (navItem.type !== 'link' && !navItem.items)
         return null;
     const item = navItem;
     const normalizedPath = (item.link && item.link !== '/' ? (0, utils_1.removeTrailingSlash)(item.link) : item.link) || '';
     const isActive = pathname ===
         (0, utils_1.withPathPrefix)((0, utils_1.getPathnameForLocale)(normalizedPath, defaultLocale, currentLocale, locales));
-    const itemContent = (react_1.default.createElement(NavbarMenuItem, { as: item.link ? Link_1.Link : undefined, active: isActive, className: className, onClick: () => otelTelemetry.send({ type: 'navbar.menu_item_clicked', payload: { type: item.type } }), external: item.external, target: item.target, to: item.link },
+    const itemContent = (react_1.default.createElement(NavbarMenuItem, { as: item.link ? Link_1.Link : undefined, active: isActive, className: className, onClick: () => telemetry.send({ type: 'navbar.menu_item_clicked', payload: { type: item.type } }), external: item.external, target: item.target, to: item.link },
         react_1.default.createElement(NavbarIcon, { url: item.icon }),
         react_1.default.createElement(NavbarLabel, { "data-translation-key": item.labelTranslationKey }, translate(item.labelTranslationKey, item.label)),
         item.external ? react_1.default.createElement(ExternalLinkIcon, { size: "10px" }) : null));

package/lib/components/Search/SearchDialog.js

@@ -51,8 +51,8 @@ const ChevronLeftIcon_1 = require("../../icons/ChevronLeftIcon/ChevronLeftIcon")
 const EditIcon_1 = require("../../icons/EditIcon/EditIcon");
 const AiStarsGradientIcon_1 = require("../../icons/AiStarsGradientIcon/AiStarsGradientIcon");
 function SearchDialog({ onClose, className }) {
-    const { useTranslate, useCurrentProduct, useSearch, useProducts, useAiSearch, useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
-    const otelTelemetry = useOtelTelemetry();
+    const { useTranslate, useCurrentProduct, useSearch, useProducts, useAiSearch, useTelemetry } = (0, hooks_1.useThemeHooks)();
+    const telemetry = useTelemetry();
     const products = useProducts();
     const currentProduct = useCurrentProduct();
     const [product, setProduct] = (0, react_1.useState)(currentProduct);
@@ -110,7 +110,7 @@ function SearchDialog({ onClose, className }) {
         }
         return (react_1.default.createElement(SearchItem_1.SearchItem, { key: `${index}-${item.document.id}`, item: item, product: itemProduct, innerRef: innerRef, onClick: () => {
                 addSearchHistoryItem(query);
-                otelTelemetry.send({
+                telemetry.send({
                     type: 'search.result.clicked',
                     payload: {
                         query,
@@ -122,7 +122,7 @@ function SearchDialog({ onClose, className }) {
                 });
                 onClose();
             } }));
-    }, [onClose, product, products, addSearchHistoryItem, query, otelTelemetry, mode]);
+    }, [onClose, product, products, addSearchHistoryItem, query, telemetry, mode]);
     const showLoadMore = (0, react_1.useCallback)((groupKey, currentCount = 0) => {
         const groupFacet = facets.find((facet) => facet.field === groupField);
         let needLoadMore = false;
@@ -223,7 +223,7 @@ function SearchDialog({ onClose, className }) {
                         translate('search.loading', 'Loading...'))) : (react_1.default.createElement(SearchMessage, { "data-translation-key": "search.noResults" },
                         react_1.default.createElement("b", null, translate('search.noResults.title', 'No results'))))) : (react_1.default.createElement(react_1.default.Fragment, null,
                         react_1.default.createElement(SearchRecent_1.SearchRecent, { onSelect: (query, index) => {
-                                otelTelemetry.send({
+                                telemetry.send({
                                     type: 'search.recent.clicked',
                                     payload: {
                                         query,

package/lib/components/Search/SearchInput.js

@@ -13,9 +13,9 @@ const hooks_1 = require("../../core/hooks");
 const CloseFilledIcon_1 = require("../../icons/CloseFilledIcon/CloseFilledIcon");
 const ChevronLeftIcon_1 = require("../../icons/ChevronLeftIcon/ChevronLeftIcon");
 function SearchInput({ placeholder, value, onChange, isLoading, showReturnButton, inputRef, onReturn, onSubmit, className, }) {
-    const { useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
+    const { useTelemetry } = (0, hooks_1.useThemeHooks)();
     const { addSearchHistoryItem } = (0, hooks_1.useRecentSearches)();
-    const otelTelemetry = useOtelTelemetry();
+    const telemetry = useTelemetry();
     const { onKeyDown } = (0, hooks_1.useInputKeyCommands)({
         onEnter: (event) => onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(event),
         onClear: () => addSearchHistoryItem(value),
@@ -27,7 +27,7 @@ function SearchInput({ placeholder, value, onChange, isLoading, showReturnButton
     const handleOnReset = () => {
         onChange('');
         addSearchHistoryItem(value);
-        otelTelemetry.send({ type: 'search_input_reset_button.clicked' });
+        telemetry.send({ type: 'search_input_reset_button.clicked' });
     };
     return (react_1.default.createElement(SearchInputWrapper, { "data-component-name": "Search/SearchInput", className: className },
         showReturnButton ? (react_1.default.createElement(Button_1.Button, { icon: react_1.default.createElement(ChevronLeftIcon_1.ChevronLeftIcon, null), onClick: onReturn })) : value && isLoading ? (react_1.default.createElement(Spinner_1.Spinner, { size: "24px", color: "--search-input-icon-color" })) : (react_1.default.createElement(SearchIcon_1.SearchIcon, { size: "24px", color: "--search-input-icon-color" })),

package/lib/components/Search/SearchRecent.js

@@ -36,15 +36,15 @@ const RecentlyViewedIcon_1 = require("../../icons/RecentlyViewedIcon/RecentlyVie
 const Button_1 = require("../../components/Button/Button");
 function SearchRecent({ onSelect, className }) {
     const { items, removeSearchHistoryItem } = (0, hooks_1.useRecentSearches)();
-    const { useTranslate, useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
+    const { useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
-    const otelTelemetry = useOtelTelemetry();
+    const telemetry = useTelemetry();
     if (!items || !items.length)
         return null;
     const handleOnRemove = (e, item) => {
         e.stopPropagation();
         removeSearchHistoryItem(item);
-        otelTelemetry.send({ type: 'search_recent_remove_button.clicked' });
+        telemetry.send({ type: 'search_recent_remove_button.clicked' });
     };
     const handleKeyDown = (e, item, index) => {
         if (e.key === 'Enter') {

package/lib/components/SidebarActions/SidebarActions.js

@@ -14,17 +14,17 @@ const SidePanelCloseIcon_1 = require("../../icons/SidePanelCloseIcon/SidePanelCl
 const SidePanelOpenIcon_1 = require("../../icons/SidePanelOpenIcon/SidePanelOpenIcon");
 const styled_1 = require("../../components/SidebarActions/styled");
 const SidebarActions = ({ layout, hideCollapseSidebarButton = false, collapsedSidebar, isApiDocs, onChangeViewClick, onChangeCollapseSidebarClick, requestAccessButton, className, }) => {
-    const { useOtelTelemetry, useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { useTelemetry, useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
-    const otelTelemetry = useOtelTelemetry();
+    const telemetry = useTelemetry();
     return (react_1.default.createElement(styled_1.ControlsWrap, { className: className, isCollapsed: collapsedSidebar, "data-component-name": "Sidebar/SidebarActions" },
         !hideCollapseSidebarButton && (react_1.default.createElement(Button_1.Button, { onClick: () => {
                 onChangeCollapseSidebarClick();
                 if (collapsedSidebar) {
-                    otelTelemetry.send({ type: 'sidebar.item_expanded' });
+                    telemetry.send({ type: 'sidebar.item_expanded' });
                 }
                 else {
-                    otelTelemetry.send({ type: 'sidebar.item_collapsed' });
+                    telemetry.send({ type: 'sidebar.item_collapsed' });
                 }
             }, title: collapsedSidebar
                 ? translate('sidebar.actions.show', 'Show sidebar')
@@ -32,7 +32,7 @@ const SidebarActions = ({ layout, hideCollapseSidebarButton = false, collapsedSi
         isApiDocs && (react_1.default.createElement(styled_1.ControlsWrapChangeLayoutButtons, { isCollapsed: collapsedSidebar },
             react_1.default.createElement(ChangeViewButton_1.ChangeViewButton, { collapsedSidebar: collapsedSidebar, layout: layout, onClick: () => {
                     onChangeViewClick();
-                    otelTelemetry.send({ type: 'change_layout_button.clicked' });
+                    telemetry.send({ type: 'change_layout_button.clicked' });
                 } }))),
         !collapsedSidebar && requestAccessButton));
 };

package/lib/components/TableOfContent/TableOfContent.js

@@ -33,9 +33,9 @@ const hooks_1 = require("../../core/hooks");
 const utils_1 = require("../../core/utils");
 function TableOfContent(props) {
     const { headings, contentWrapper, className } = props;
-    const { useTranslate, useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
+    const { useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
-    const otelTelemetry = useOtelTelemetry();
+    const telemetry = useTelemetry();
     const sidebar = React.useRef(null);
     (0, hooks_1.useFullHeight)(sidebar);
     const { markdown: { toc = {} } = {} } = (0, hooks_1.useThemeConfig)();
@@ -54,7 +54,7 @@ function TableOfContent(props) {
                         return null;
                     }
                     const href = '#' + heading.id;
-                    return (React.createElement(TableOfContentMenuItem, { key: href + idx, href: href, depth: heading.depth - leastDepth + 1 || 0, className: activeHeadingId === heading.id ? 'active' : '', dangerouslySetInnerHTML: { __html: heading.value || '' }, "data-testid": `toc-${heading.value}`, onClick: () => otelTelemetry.send({ type: 'toc_item.clicked' }) }));
+                    return (React.createElement(TableOfContentMenuItem, { key: href + idx, href: href, depth: heading.depth - leastDepth + 1 || 0, className: activeHeadingId === heading.id ? 'active' : '', dangerouslySetInnerHTML: { __html: heading.value || '' }, "data-testid": `toc-${heading.value}`, onClick: () => telemetry.send({ type: 'toc_item.clicked' }) }));
                 })))));
 }
 const TableOfContentMenu = styled_components_1.default.aside `

package/lib/components/UserMenu/LoginButton.js

@@ -8,10 +8,10 @@ const react_1 = __importDefault(require("react"));
 const hooks_1 = require("../../core/hooks");
 const Button_1 = require("../../components/Button/Button");
 function LoginButton({ href, className }) {
-    const { useTranslate, useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
+    const { useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
-    const otelTelemetry = useOtelTelemetry();
+    const telemetry = useTelemetry();
     return (react_1.default.createElement("div", { "data-component-name": "UserMenu/LoginButton", className: className },
-        react_1.default.createElement(Button_1.Button, { "data-translation-key": "userMenu.login", to: href, onClick: () => otelTelemetry.send({ type: 'login_button.clicked' }), "data-testid": "login-btn", extraClass: className, variant: "primary", size: "medium" }, translate('userMenu.login', 'Login'))));
+        react_1.default.createElement(Button_1.Button, { "data-translation-key": "userMenu.login", to: href, onClick: () => telemetry.send({ type: 'login_button.clicked' }), "data-testid": "login-btn", extraClass: className, variant: "primary", size: "medium" }, translate('userMenu.login', 'Login'))));
 }
 //# sourceMappingURL=LoginButton.js.map

package/lib/components/UserMenu/LogoutMenuItem.js

@@ -9,12 +9,12 @@ const hooks_1 = require("../../core/hooks");
 const LogoutIcon_1 = require("../../icons/LogoutIcon/LogoutIcon");
 const DropdownMenuItem_1 = require("../../components/Dropdown/DropdownMenuItem");
 function LogoutMenuItem({ iconOnly, className }) {
-    const { useTranslate, useOtelTelemetry, useUserMenu } = (0, hooks_1.useThemeHooks)();
+    const { useTranslate, useTelemetry, useUserMenu } = (0, hooks_1.useThemeHooks)();
     const { handleLogout } = useUserMenu();
-    const otelTelemetry = useOtelTelemetry();
+    const telemetry = useTelemetry();
     const { translate } = useTranslate();
     const handleClick = () => {
-        otelTelemetry.send({ type: 'logout_menu_item.clicked' });
+        telemetry.send({ type: 'logout_menu_item.clicked' });
         handleLogout();
     };
     return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { className: className, dangerous: true, "data-component-name": "UserMenu/LogoutMenuItem", onAction: handleClick, "data-translation-key": "userMenu.logout", prefix: react_1.default.createElement(LogoutIcon_1.LogoutIcon, null), style: { width: iconOnly ? 'fit-content' : '100%' } }, iconOnly ? null : translate('userMenu.logout', 'Log out')));

package/lib/core/hooks/__mocks__/use-theme-hooks.d.ts

@@ -5,9 +5,6 @@ export declare const useThemeHooks: jest.Mock<{
     useTelemetry: jest.Mock<{
         send: jest.Mock<any, any, any>;
     }, [], any>;
-    useOtelTelemetry: jest.Mock<{
-        send: jest.Mock<any, any, any>;
-    }, [], any>;
     useBreadcrumbs: jest.Mock<any, any, any>;
     usePageSharedData: jest.Mock<any, any, any>;
     useCatalogClassic: jest.Mock<{

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

@@ -12,9 +12,6 @@ exports.useThemeHooks = jest.fn(() => ({
     useTelemetry: jest.fn(() => ({
         send: jest.fn(),
     })),
-    useOtelTelemetry: jest.fn(() => ({
-        send: jest.fn(),
-    })),
     useBreadcrumbs: jest.fn().mockReturnValue([]),
     usePageSharedData: jest.fn().mockReturnValue({}),
     useCatalogClassic: jest.fn(() => ({

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

@@ -13,15 +13,15 @@ function useSearchDialog() {
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const themeSettings = (0, hooks_1.useThemeConfig)();
     const location = (0, react_router_dom_1.useLocation)();
-    const { useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
-    const otelTelemetry = useOtelTelemetry();
+    const { useTelemetry } = (0, hooks_1.useThemeHooks)();
+    const telemetry = useTelemetry();
     const keyShortcuts = (_b = (_a = themeSettings === null || themeSettings === void 0 ? void 0 : themeSettings.search) === null || _a === void 0 ? void 0 : _a.shortcuts) !== null && _b !== void 0 ? _b : ['/'];
     const hotKeys = keyShortcuts === null || keyShortcuts === void 0 ? void 0 : keyShortcuts.join(',');
     (0, react_1.useEffect)(() => {
         if (hotKeys) {
             (0, hotkeys_js_1.default)(hotKeys, (ev) => {
                 setIsOpen(true);
-                otelTelemetry.send({ type: 'search.opened', payload: { method: 'shortcut' } });
+                telemetry.send({ type: 'search.opened', payload: { method: 'shortcut' } });
                 ev.preventDefault();
             });
             return () => hotkeys_js_1.default.unbind(hotKeys);
@@ -29,7 +29,7 @@ function useSearchDialog() {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [hotKeys]);
     const onOpen = (0, react_1.useCallback)(function () {
-        otelTelemetry.send({ type: 'search.opened', payload: { method: 'click' } });
+        telemetry.send({ type: 'search.opened', payload: { method: 'click' } });
         setIsOpen(true);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);

package/lib/core/hooks/use-color-switcher.js

@@ -5,8 +5,8 @@ const react_1 = require("react");
 const hooks_1 = require("../../core/hooks");
 const useColorSwitcher = () => {
     const themeSettings = (0, hooks_1.useThemeConfig)();
-    const { useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
-    const otelTelemetry = useOtelTelemetry();
+    const { useTelemetry } = (0, hooks_1.useThemeHooks)();
+    const telemetry = useTelemetry();
     const colorMode = themeSettings.colorMode;
     const modes = (colorMode === null || colorMode === void 0 ? void 0 : colorMode.modes) || ['light', 'dark'];
     const defaultColor = modes[0] || 'light';
@@ -27,7 +27,7 @@ const useColorSwitcher = () => {
         window.requestAnimationFrame(() => {
             document.documentElement.classList.remove('notransition');
         });
-        otelTelemetry.send({
+        telemetry.send({
             type: 'color_mode.switched',
             payload: { from: activeColorMode, to: newMode },
         });

package/lib/core/hooks/use-product-picker.js

@@ -4,16 +4,16 @@ exports.useProductPicker = useProductPicker;
 const react_router_dom_1 = require("react-router-dom");
 const hooks_1 = require("../../core/hooks");
 function useProductPicker() {
-    const { useCurrentProduct, useProducts, useOtelTelemetry, useLoadAndNavigate } = (0, hooks_1.useThemeHooks)();
+    const { useCurrentProduct, useProducts, useTelemetry, useLoadAndNavigate } = (0, hooks_1.useThemeHooks)();
     const currentProduct = useCurrentProduct();
     const products = useProducts();
-    const otelTelemetry = useOtelTelemetry();
+    const telemetry = useTelemetry();
     const navigate = (0, react_router_dom_1.useNavigate)();
     const loadAndNavigate = useLoadAndNavigate();
     function setProduct(product) {
         if (!product)
             return;
-        otelTelemetry.send({ type: 'product.picked', payload: { product: product.slug } });
+        telemetry.send({ type: 'product.picked', payload: { product: product.slug } });
         loadAndNavigate({ navigate, to: product.link });
     }
     return {

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

@@ -8,7 +8,10 @@ const fallbacks = {
         translate: (value, options) => (typeof options === 'string' ? options : options === null || options === void 0 ? void 0 : options.defaultValue) || value || '',
     }),
     useSubmitFeedback: () => ({ submitFeedback: () => { } }),
-    useTelemetry: () => ({ telemetry: () => { } }),
+    useTelemetry: () => ({ send: () => { } }),
+    /**
+     * @deprecated use `useTelemetry` instead
+     **/
     useOtelTelemetry: () => ({ send: () => { } }),
     useBreadcrumbs: () => [],
     useCodeHighlight: () => ({ highlight: (rawContent) => rawContent }),

package/lib/core/styles/dark.js

@@ -18,9 +18,20 @@ const replayDarkMode = (0, styled_components_1.css) `
     * @presenter Color
     */
 
-  --replay-undefined-variable-bg-color: rgba(249, 49, 109, 0.18); // @presenter Color
-  --replay-defined-variable-bg-color: rgba(31, 124, 255, 0.18); // @presenter Color
-  --replay-server-variable-bg-color: rgba(119, 45, 240, 0.2); // @presenter Color
+  --replay-undefined-variable-color: rgb(255, 138, 162); // @presenter Color
+  --replay-defined-variable-color: rgb(110, 171, 250); // @presenter Color
+  --replay-server-variable-color: rgb(179, 166, 249); // @presenter Color
+  --replay-path-parameter-color: rgb(8, 199, 224); // @presenter Color
+
+  --replay-undefined-variable-bg-color: rgba(82, 10, 24, 0.16); // @presenter Color
+  --replay-defined-variable-bg-color: rgba(12, 76, 158, 0.16); // @presenter Color
+  --replay-server-variable-bg-color: rgba(31, 10, 144, 0.16); // @presenter Color
+  --replay-path-parameter-bg-color: rgba(5, 88, 99, 0.16); // @presenter Color
+
+  --replay-undefined-variable-bg-color-hover: rgba(82, 10, 24, 0.4); // @presenter Color
+  --replay-defined-variable-bg-color-hover: rgba(12, 76, 158, 0.4); // @presenter Color
+  --replay-server-variable-bg-color-hover: rgba(31, 10, 144, 0.4); // @presenter Color
+  --replay-path-parameter-bg-color-hover: rgba(5, 88, 99, 0.4); // @presenter Color
 
   // @tokens End
 `;