@redocly/theme 0.62.0-next.5 → 0.62.0-next.6

package/lib/components/Banner/Banner.js

@@ -37,9 +37,11 @@ exports.Banner = Banner;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
 const hooks_1 = require("../../core/hooks");
+const utils_1 = require("../../core/utils");
 const Markdown_1 = require("../../components/Markdown/Markdown");
 const CloseIcon_1 = require("../../icons/CloseIcon/CloseIcon");
 const Button_1 = require("../../components/Button/Button");
+const ANIMATION_DURATION = 0.4;
 function setBannerHeight(height) {
     document.documentElement.style.setProperty('--banner-height', `${height}px`);
 }
@@ -86,6 +88,22 @@ function Banner({ className }) {
             setBannerHeight(height);
         };
         updateHeight();
+        if (window.location.hash) {
+            setTimeout(() => {
+                var _a;
+                const hash = window.location.hash;
+                const el = document.getElementById(hash.slice(1));
+                if (el) {
+                    const navbar = (0, utils_1.getNavbarElement)();
+                    const navbarHeight = (_a = navbar === null || navbar === void 0 ? void 0 : navbar.getBoundingClientRect().height) !== null && _a !== void 0 ? _a : 0;
+                    const elementTop = el.getBoundingClientRect().top + window.scrollY;
+                    const scrollPosition = elementTop - navbarHeight;
+                    if (Math.abs(window.scrollY - scrollPosition) > 1) {
+                        window.scrollTo({ top: scrollPosition });
+                    }
+                }
+            }, ANIMATION_DURATION * 1000 + 100);
+        }
         const resizeObserver = new ResizeObserver(updateHeight);
         resizeObserver.observe(bannerElement);
         return () => {
@@ -148,7 +166,7 @@ const BannerWrapper = styled_components_1.default.div `
   width: 100%;
   z-index: var(--z-index-overlay);
   transform: ${({ $isVisible }) => ($isVisible ? 'translateY(0)' : 'translateY(-100%)')};
-  transition: transform 0.4s ease-out;
+  transition: transform ${ANIMATION_DURATION}s ease-out;
   ${({ $color }) => $color &&
     (0, styled_components_1.css) `
       background-color: var(--banner-${$color}-bg-color);

package/lib/components/Banner/variables.js

@@ -6,6 +6,7 @@ exports.banner = (0, styled_components_1.css) `
   /**
   * @tokens Banner
   */
+  --banner-height: 0px; /* default 0px so calc formulas work on page load */
   --banner-button-size: 22px;
   --banner-button-padding: 3px; // @presenter Spacing
   --banner-button-font-size: var(--font-size-base);

package/lib/components/Breadcrumbs/BreadcrumbDropdown.js

@@ -66,11 +66,14 @@ function BreadcrumbDropdown({ children, label, items, onItemClick, className, })
                 const translatedLabel = translate(item.labelTranslationKey, item.label);
                 return (react_1.default.createElement(StyledDropdownMenuItem, { key: index, onAction: () => {
                         onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, index);
-                        telemetry.sendBreadcrumbClickedMessage({
-                            link: item.link,
-                            position: index + 1,
-                            totalBreadcrumbs: items.length,
-                        });
+                        telemetry.sendBreadcrumbClickedMessage([
+                            {
+                                object: 'breadcrumb',
+                                link: item.link,
+                                position: index + 1,
+                                totalBreadcrumbs: items.length,
+                            },
+                        ]);
                     }, "$hasLink": hasLink, to: item.link, dataAttributes: !hasLink ? { 'aria-disabled': 'true' } : {} },
                     react_1.default.createElement(DropdownContent, { "$isActive": isActive },
                         react_1.default.createElement(BreadcrumbIcon_1.BreadcrumbIcon, { icon: item.icon }),

package/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -46,20 +46,26 @@ function Breadcrumbs(props) {
                 ...currentItemSiblings,
             ];
             const translatedLabel = translate(breadcrumb.labelTranslationKey, breadcrumb.label);
-            return (react_1.default.createElement(BreadcrumbDropdown_1.BreadcrumbDropdown, { label: translatedLabel, items: siblingsWithActive, onItemClick: (item, itemIdx) => telemetry.sendBreadcrumbClickedMessage({
-                    link: item.link,
-                    position: itemIdx + 1,
-                    totalBreadcrumbs: siblingsWithActive.length,
-                }) },
+            return (react_1.default.createElement(BreadcrumbDropdown_1.BreadcrumbDropdown, { label: translatedLabel, items: siblingsWithActive, onItemClick: (item, itemIdx) => telemetry.sendBreadcrumbClickedMessage([
+                    {
+                        object: 'breadcrumb',
+                        link: item.link,
+                        position: itemIdx + 1,
+                        totalBreadcrumbs: siblingsWithActive.length,
+                    },
+                ]) },
                 react_1.default.createElement(BreadcrumbIcon_1.BreadcrumbIcon, { icon: breadcrumb.icon }),
                 (0, utils_1.trimText)(translatedLabel, constants_1.BREADCRUMB_MAX_LENGTH),
                 react_1.default.createElement(GenericIcon_1.GenericIcon, { icon: "chevron-down" })));
         }
-        return (react_1.default.createElement(Breadcrumb_1.Breadcrumb, { link: breadcrumb.link, label: translate(breadcrumb.labelTranslationKey, breadcrumb.label), isActive: isActive, icon: breadcrumb.icon, onClick: () => telemetry.sendBreadcrumbClickedMessage({
-                link: breadcrumb.link,
-                position: idx + 1,
-                totalBreadcrumbs: breadcrumbs.length,
-            }) }));
+        return (react_1.default.createElement(Breadcrumb_1.Breadcrumb, { link: breadcrumb.link, label: translate(breadcrumb.labelTranslationKey, breadcrumb.label), isActive: isActive, icon: breadcrumb.icon, onClick: () => telemetry.sendBreadcrumbClickedMessage([
+                {
+                    object: 'breadcrumb',
+                    link: breadcrumb.link,
+                    position: idx + 1,
+                    totalBreadcrumbs: breadcrumbs.length,
+                },
+            ]) }));
     };
     return (react_1.default.createElement(BreadcrumbsWrapper, { "data-component-name": "Breadcrumbs/Breadcrumbs", className: props.className }, items.map(({ breadcrumb, idx, isLast, inDropdown }) => {
         if (inDropdown)
@@ -69,11 +75,14 @@ function Breadcrumbs(props) {
             return (react_1.default.createElement(react_1.default.Fragment, { key: idx },
                 renderBreadcrumb(breadcrumb, idx, isLast),
                 react_1.default.createElement(BreadcrumbSeparator, null, "/"),
-                react_1.default.createElement(BreadcrumbDropdown_1.BreadcrumbDropdown, { label: "...", items: collapsedBreadcrumbs, onItemClick: (item, itemIdx) => telemetry.sendBreadcrumbClickedMessage({
-                        link: item.link,
-                        position: itemIdx + 1,
-                        totalBreadcrumbs: breadcrumbs.length,
-                    }) }, "..."),
+                react_1.default.createElement(BreadcrumbDropdown_1.BreadcrumbDropdown, { label: "...", items: collapsedBreadcrumbs, onItemClick: (item, itemIdx) => telemetry.sendBreadcrumbClickedMessage([
+                        {
+                            object: 'breadcrumb',
+                            link: item.link,
+                            position: itemIdx + 1,
+                            totalBreadcrumbs: breadcrumbs.length,
+                        },
+                    ]) }, "..."),
                 react_1.default.createElement(BreadcrumbSeparator, null, "/")));
         }
         return (react_1.default.createElement(react_1.default.Fragment, { key: idx },

package/lib/components/Buttons/AIAssistantButton.js

@@ -86,9 +86,12 @@ function AIAssistantButton() {
     const text = translate('aiAssistant.trigger', 'Ask AI');
     const handleOpen = () => {
         setIsOpen(true);
-        telemetry.sendSearchAiOpenedMessage({
-            method: 'ai_trigger_button',
-        });
+        telemetry.sendSearchAiOpenedMessage([
+            {
+                object: 'search',
+                method: 'ai_trigger_button',
+            },
+        ]);
     };
     const handleClose = () => {
         setIsOpen(false);

package/lib/components/Catalog/CatalogEntities.js

@@ -64,14 +64,16 @@ function CatalogEntities(props) {
     }, props.initialEntitiesList);
     const onRowClick = (entity) => {
         if (searchQuery) {
-            telemetry.sendCatalogEntitiesListSearchResultClickedMessage({
-                id: entity.id,
-                object: 'catalog_entity',
-                uri: getEntityDetailsLink(entity),
-                query: searchQuery,
-                entityKey: entity.key,
-                entityType: entity.type,
-            });
+            telemetry.sendCatalogEntitiesListSearchResultClickedMessage([
+                {
+                    id: entity.id,
+                    object: 'catalog_entity',
+                    uri: getEntityDetailsLink(entity),
+                    query: searchQuery,
+                    entityKey: entity.key,
+                    entityType: entity.type,
+                },
+            ]);
         }
     };
     const shouldShowLoadMore = query.hasNextPage ||

package/lib/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable.js

@@ -19,17 +19,19 @@ function CatalogEntityRelationsTable({ entity, entitiesCatalogConfig, catalogCon
     });
     const onRowClick = (relatedEntity) => {
         if (searchQuery) {
-            telemetry.sendCatalogEntitiesRelatedEntitiesListSearchResultClickMessage({
-                id: relatedEntity.id,
-                object: 'catalog_entity',
-                uri: getEntityDetailsLink(relatedEntity),
-                query: searchQuery,
-                entityKey: entity.key,
-                entityType: entity.type,
-                relationType: constants_1.reverseRelationMap[relatedEntity.relationType],
-                relatedEntityKey: relatedEntity.key,
-                relatedEntityType: relatedEntity.type,
-            });
+            telemetry.sendCatalogEntitiesRelatedEntitiesListSearchResultClickMessage([
+                {
+                    id: relatedEntity.id,
+                    object: 'catalog_entity',
+                    uri: getEntityDetailsLink(relatedEntity),
+                    query: searchQuery,
+                    entityKey: entity.key,
+                    entityType: entity.type,
+                    relationType: constants_1.reverseRelationMap[relatedEntity.relationType],
+                    relatedEntityKey: relatedEntity.key,
+                    relatedEntityType: relatedEntity.type,
+                },
+            ]);
         }
     };
     return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable" },

package/lib/components/Catalog/CatalogEntity/CatalogEntitySchema.js

@@ -58,11 +58,13 @@ function CatalogEntitySchema({ entity, relatedEntity, catalogConfig, RedocSchema
     return (react_1.default.createElement(MetadataWrapper, { "data-component-name": "Catalog/CatalogEntity/CatalogEntityMetadata" },
         react_1.default.createElement(HeaderWrapper, null,
             react_1.default.createElement(Heading, null, translate('catalog.entity.schema.title')),
-            !isGraphql && (react_1.default.createElement(CopyButton_1.CopyButton, { data: rawSchema, buttonText: "Copy Schema", type: "compound", variant: "secondary", iconPosition: "right", size: "medium", onCopyClick: () => telemetry.sendCatalogEntitiesCopyDataSchemaClickedMessage({
-                    id: entity.id,
-                    object: 'catalog_entity',
-                    uri: getEntityDetailsLink(entity),
-                }) }))),
+            !isGraphql && (react_1.default.createElement(CopyButton_1.CopyButton, { data: rawSchema, buttonText: "Copy Schema", type: "compound", variant: "secondary", iconPosition: "right", size: "medium", onCopyClick: () => telemetry.sendCatalogEntitiesCopyDataSchemaClickedMessage([
+                    {
+                        id: entity.id,
+                        object: 'catalog_entity',
+                        uri: getEntityDetailsLink(entity),
+                    },
+                ]) }))),
         react_1.default.createElement(SplitViewWrapper, null,
             react_1.default.createElement(SchemaContentWrapper, null, isGraphql && graphqlSDL && GraphqlTypeRenderer ? (react_1.default.createElement(GraphqlTypeRenderer, { sdl: graphqlSDL, typeName: entity.title })) : (react_1.default.createElement(StoreProvider, { definition: definition },
                 react_1.default.createElement(RedocSchema, { schema: parsedSchema })))),

package/lib/components/Catalog/CatalogFilter/CatalogFilterCheckboxes.js

@@ -103,13 +103,15 @@ function CatalogFilterCheckboxes({ filter, filterValuesCasing, showCounter = tru
                 const id = 'filter--' + filter.property + '--' + value;
                 return (react_1.default.createElement(FilterCheckboxOption, { key: id, role: "link", onClick: () => {
                         filter.toggleOption(value);
-                        telemetry.sendCatalogEntitiesFilterCheckboxToggledMessage({
-                            id: filter.property + '--' + value,
-                            object: 'checkbox',
-                            uri: window.location.href,
-                            category: filter.property,
-                            value: value,
-                        });
+                        telemetry.sendCatalogEntitiesFilterCheckboxToggledMessage([
+                            {
+                                id: filter.property + '--' + value,
+                                object: 'checkbox',
+                                uri: window.location.href,
+                                category: filter.property,
+                                value: value,
+                            },
+                        ]);
                     } },
                     react_1.default.createElement(CheckboxIcon_1.CheckboxIcon, { checked: filter.selectedOptions instanceof Set
                             ? filter.selectedOptions.has(value) ||

package/lib/components/CatalogClassic/CatalogClassicInfoBlock.js

@@ -21,7 +21,7 @@ function ScorecardBadge(props) {
     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: () => telemetry.sendScorecardLinkClickedMessage({ action: 'click' }), withStatusDot: true, statusDotColor: `var(${colorVariable})` }, level)));
+        react_1.default.createElement(Tag_1.Tag, { onClick: () => telemetry.sendScorecardLinkClickedMessage([{ object: 'link', action: 'click' }]), withStatusDot: true, statusDotColor: `var(${colorVariable})` }, level)));
 }
 const CatalogInfoBlockWrapper = styled_components_1.default.div `
   position: relative;

package/lib/components/CodeBlock/CodeBlockControls.js

@@ -54,7 +54,9 @@ function CodeBlockControls({ children, className, title, controls, tabs, dropdow
                             (_a = copy === null || copy === void 0 ? void 0 : copy.onClick) === null || _a === void 0 ? void 0 : _a.call(copy);
                         }
                         else {
-                            telemetry.sendCopyCodeSnippetClickedMessage({ snippetType: 'copy' });
+                            telemetry.sendCopyCodeSnippetClickedMessage([
+                                { object: 'code_snippet', snippetType: 'copy' },
+                            ]);
                         }
                     } }))) : null))) : null;
     return children || controls ? (react_1.default.createElement(ContainerWrapper, { "data-component-name": "CodeBlock/CodeBlockControls", className: className, "$isEmptyTitle": isEmptyTitle }, children ? children : defaultControls)) : null;

package/lib/components/Filter/FilterCheckboxes.js

@@ -24,7 +24,7 @@ function FilterCheckboxes({ filter, filterValuesCasing, showCounter = true, }) {
             const id = 'filter--' + filter.property + '--' + value;
             return (react_1.default.createElement(FilterCheckboxOption, { key: id, role: "link", onClick: () => {
                     filter.toggleOption(value);
-                    telemetry.sendFilterCheckboxToggledMessage({ id });
+                    telemetry.sendFilterCheckboxToggledMessage([{ object: 'checkbox', id }]);
                 } },
                 react_1.default.createElement(CheckboxIcon_1.CheckboxIcon, { checked: filter.selectedOptions instanceof Set
                         ? filter.selectedOptions.has(value) ||

package/lib/components/LanguagePicker/LanguagePicker.js

@@ -26,7 +26,7 @@ function LanguagePicker(props) {
         onAction: () => {
             setLocale(locale.code);
             props.onChangeLanguage(locale.code);
-            telemetry.sendLanguagePickerLocaleChangedMessage({ locale: locale.code });
+            telemetry.sendLanguagePickerLocaleChangedMessage([{ object: 'locale', locale: locale.code }]);
         },
         active: locale.code === currentLocale.code,
         suffix: locale.code === currentLocale.code && react_1.default.createElement(CheckmarkIcon_1.CheckmarkIcon, null),

package/lib/components/Markdown/Markdown.js

@@ -77,7 +77,7 @@ exports.Markdown = styled_components_1.default.main.attrs(({ className }) => ({
   ${links_1.markdownLinksCss}
 
   a[name], [id] {
-    scroll-margin-top: var(--navbar-height);
+    scroll-margin-top: calc(var(--navbar-height) + var(--banner-height));
   }
 
   img,
@@ -95,7 +95,7 @@ exports.Markdown = styled_components_1.default.main.attrs(({ className }) => ({
     font-family: var(--heading-font-family);
     position: relative;
 
-    scroll-margin-top: var(--navbar-height);
+    scroll-margin-top: calc(var(--navbar-height) + var(--banner-height));
   }
 
   strong {

package/lib/components/Menu/MenuItem.js

@@ -65,10 +65,13 @@ function MenuItem(props) {
     const hasChevron = isNested && !isDrilldown;
     const hasHttpTag = !!item.httpVerb || type === constants_1.MenuItemType.Operation;
     const handleOnClick = () => {
-        telemetry.sendSidebarItemClickedMessage({
-            label: item.label,
-            type: item.type === 'link' || item.type === 'group' ? item.type : undefined,
-        });
+        telemetry.sendSidebarItemClickedMessage([
+            {
+                object: 'sidebar_item',
+                label: item.label,
+                type: item.type === 'link' || item.type === 'group' ? item.type : undefined,
+            },
+        ]);
         onClick === null || onClick === void 0 ? void 0 : onClick();
         if (isNested) {
             handleExpand();

package/lib/components/Navbar/NavbarItem.js

@@ -27,7 +27,7 @@ function NavbarItem({ navItem, className }) {
     const normalizedPath = (item.link ? (0, utils_1.removeTrailingSlash)(item.link) : item.link) || '';
     const pathWithPathPrefix = (0, utils_1.withPathPrefix)((0, utils_1.getPathnameForLocale)(normalizedPath, defaultLocale, currentLocale, locales));
     const isActive = (0, utils_1.removeTrailingSlash)(pathname) === (0, utils_1.removeTrailingSlash)(pathWithPathPrefix);
-    const itemContent = (react_1.default.createElement(NavbarMenuItem, { as: item.link ? Link_1.Link : undefined, active: isActive, className: className, onClick: () => telemetry.sendNavbarMenuItemClickedMessage({ 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.sendNavbarMenuItemClickedMessage([{ object: 'menu_item', type: item.type }]), external: item.external, target: item.target, to: item.link },
         react_1.default.createElement(NavbarIcon, { icon: item.icon, srcSet: item.srcSet }),
         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/SearchAiMessage.js

@@ -64,11 +64,14 @@ function SearchAiMessageComponent({ role, content, isThinking, resources, classN
         if (!messageId)
             return;
         try {
-            telemetry.sendSearchAIFeedbackMessage({
-                feedback: feedbackValue,
-                messageId,
-                reason: dislikeReason,
-            });
+            telemetry.sendSearchAIFeedbackMessage([
+                {
+                    object: 'feedback',
+                    feedback: feedbackValue,
+                    messageId,
+                    reason: dislikeReason,
+                },
+            ]);
         }
         catch (error) {
             console.error('Error sending feedback', error);

package/lib/components/Search/SearchDialog.js

@@ -134,14 +134,17 @@ function SearchDialog({ onClose, className, initialMode = 'search', }) {
         }
         return (react_1.default.createElement(SearchItem_1.SearchItem, { key: `${index}-${item.document.id}`, item: item, product: itemProduct, innerRef: innerRef, onClick: () => {
                 addSearchHistoryItem(query);
-                telemetry.sendSearchResultClickedMessage({
-                    query,
-                    url: item.document.url,
-                    totalResults: results.length.toString(),
-                    index: index.toString(),
-                    searchEngine: mode,
-                    searchSessionId,
-                });
+                telemetry.sendSearchResultClickedMessage([
+                    {
+                        object: 'search',
+                        query: query,
+                        url: item.document.url,
+                        totalResults: results.length.toString(),
+                        index: index.toString(),
+                        searchEngine: mode,
+                        searchSessionId,
+                    },
+                ]);
                 onClose();
             } }));
     }, [onClose, product, products, addSearchHistoryItem, query, telemetry, mode, searchSessionId]);
@@ -189,9 +192,12 @@ function SearchDialog({ onClose, className, initialMode = 'search', }) {
                                 if (query.trim()) {
                                     aiSearch.askQuestion(query);
                                 }
-                                telemetry.sendSearchAiOpenedMessage({
-                                    method: 'ai_search_button',
-                                });
+                                telemetry.sendSearchAiOpenedMessage([
+                                    {
+                                        object: 'search',
+                                        method: 'ai_search_button',
+                                    },
+                                ]);
                             } }, translate('search.ai.button', 'Search with AI'))) : null,
                         showSearchFilterButton && (react_1.default.createElement(SearchFilterToggleButton, { icon: react_1.default.createElement(SettingsIcon_1.SettingsIcon, null), onClick: onFilterToggle })))))) : (react_1.default.createElement(AiDialogHeaderWrapper, null,
                     initialMode === 'ai-dialog' ? (react_1.default.createElement(AiDialogHeaderTitle, null,
@@ -219,18 +225,24 @@ function SearchDialog({ onClose, className, initialMode = 'search', }) {
                             if (query.trim()) {
                                 aiSearch.askQuestion(query);
                             }
-                            telemetry.sendSearchAiOpenedMessage({
-                                method: 'ai_search_input',
-                            });
+                            telemetry.sendSearchAiOpenedMessage([
+                                {
+                                    object: 'search',
+                                    method: 'ai_search_input',
+                                },
+                            ]);
                         }, onKeyDown: (e) => {
                             if (e.key === 'Enter') {
                                 setMode('ai-dialog');
                                 if (query.trim()) {
                                     aiSearch.askQuestion(query);
                                 }
-                                telemetry.sendSearchAiOpenedMessage({
-                                    method: 'ai_search_input',
-                                });
+                                telemetry.sendSearchAiOpenedMessage([
+                                    {
+                                        object: 'search',
+                                        method: 'ai_search_input',
+                                    },
+                                ]);
                             }
                         }, ref: aiQueryRef, tabIndex: 0, role: "option", "aria-selected": "true" },
                         react_1.default.createElement(AiStarsIcon_1.AiStarsIcon, { style: { flexShrink: 0 }, color: "var(--search-ai-icon-color)", size: "36px", background: "var(--search-ai-icon-bg-color)", margin: "0 var(--spacing-md) 0 0", borderRadius: "var(--border-radius-lg)" }),
@@ -264,11 +276,14 @@ function SearchDialog({ onClose, className, initialMode = 'search', }) {
                         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) => {
-                                telemetry.sendSearchRecentClickedMessage({
-                                    query,
-                                    index: index.toString(),
-                                    searchSessionId,
-                                });
+                                telemetry.sendSearchRecentClickedMessage([
+                                    {
+                                        object: 'search',
+                                        query,
+                                        index: index.toString(),
+                                        searchSessionId,
+                                    },
+                                ]);
                                 setQuery(query);
                                 focusSearchInput();
                             } }),

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

@@ -24,7 +24,7 @@ function useSearchDialog() {
         if (hotKeys) {
             (0, hotkeys_js_1.default)(hotKeys, (ev) => {
                 setIsOpen(true);
-                telemetry.sendSearchOpenedMessage({ method: 'shortcut' });
+                telemetry.sendSearchOpenedMessage([{ object: 'search', method: 'shortcut' }]);
                 ev.preventDefault();
             });
             return () => hotkeys_js_1.default.unbind(hotKeys);
@@ -32,7 +32,7 @@ function useSearchDialog() {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [hotKeys]);
     const onOpen = (0, react_1.useCallback)(function () {
-        telemetry.sendSearchOpenedMessage({ method: 'click' });
+        telemetry.sendSearchOpenedMessage([{ object: 'search', method: 'click' }]);
         setIsOpen(true);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);

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

@@ -35,7 +35,9 @@ const useColorSwitcher = () => {
         window.requestAnimationFrame(() => {
             root.classList.remove('notransition');
         });
-        telemetry.sendColorModeSwitchedMessage({ from: activeColorMode, to: newMode });
+        telemetry.sendColorModeSwitchedMessage([
+            { object: 'color_mode', from: activeColorMode, to: newMode },
+        ]);
         setActiveColorMode(newMode);
     };
     /**

package/lib/core/hooks/use-page-actions.js

@@ -65,7 +65,9 @@ function usePageActions(pageSlug, mcpUrl, actions) {
             mcpConfig: config,
             translate,
             onClickCallback: isDocsMcp
-                ? () => telemetry.sendPageActionsButtonClickedMessage(Object.assign(Object.assign({}, createPageActionResource(pageSlug, pageUrl)), { action_type: `docs-mcp-${clientType}` }))
+                ? () => telemetry.sendPageActionsButtonClickedMessage([
+                    Object.assign(Object.assign({}, createPageActionResource(pageSlug, pageUrl)), { action_type: `docs-mcp-${clientType}` }),
+                ])
                 : undefined,
         });
     }, [mcpUrl, mcpConfig, translate, telemetry, pageSlug]);
@@ -98,7 +100,9 @@ function usePageActions(pageSlug, mcpUrl, actions) {
                         }
                         const text = yield result.text();
                         clipboard_service_1.ClipboardService.copyCustom(text);
-                        telemetry.sendPageActionsButtonClickedMessage(Object.assign(Object.assign({}, createPageActionResource(pageSlug, pageUrl)), { action_type: 'copy' }));
+                        telemetry.sendPageActionsButtonClickedMessage([
+                            Object.assign(Object.assign({}, createPageActionResource(pageSlug, pageUrl)), { action_type: 'copy' }),
+                        ]);
                     }
                     catch (error) {
                         console.error(error);
@@ -112,7 +116,9 @@ function usePageActions(pageSlug, mcpUrl, actions) {
                 iconComponent: MarkdownFullIcon_1.MarkdownFullIcon,
                 link: mdPageUrl,
                 onClick: () => {
-                    telemetry.sendPageActionsButtonClickedMessage(Object.assign(Object.assign({}, createPageActionResource(pageSlug, pageUrl)), { action_type: 'view' }));
+                    telemetry.sendPageActionsButtonClickedMessage([
+                        Object.assign(Object.assign({}, createPageActionResource(pageSlug, pageUrl)), { action_type: 'view' }),
+                    ]);
                 },
             }),
             chatgpt: () => {
@@ -126,7 +132,9 @@ function usePageActions(pageSlug, mcpUrl, actions) {
                     iconComponent: ChatGptIcon_1.ChatGptIcon,
                     link: getExternalAiPromptLink('https://chat.openai.com', mdPageUrl),
                     onClick: () => {
-                        telemetry.sendPageActionsButtonClickedMessage(Object.assign(Object.assign({}, createPageActionResource(pageSlug, pageUrl)), { action_type: 'chatgpt' }));
+                        telemetry.sendPageActionsButtonClickedMessage([
+                            Object.assign(Object.assign({}, createPageActionResource(pageSlug, pageUrl)), { action_type: 'chatgpt' }),
+                        ]);
                     },
                 };
             },
@@ -141,7 +149,9 @@ function usePageActions(pageSlug, mcpUrl, actions) {
                     iconComponent: ClaudeIcon_1.ClaudeIcon,
                     link: getExternalAiPromptLink('https://claude.ai/new', mdPageUrl),
                     onClick: () => {
-                        telemetry.sendPageActionsButtonClickedMessage(Object.assign(Object.assign({}, createPageActionResource(pageSlug, pageUrl)), { action_type: 'claude' }));
+                        telemetry.sendPageActionsButtonClickedMessage([
+                            Object.assign(Object.assign({}, createPageActionResource(pageSlug, pageUrl)), { action_type: 'claude' }),
+                        ]);
                     },
                 };
             },

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

@@ -15,7 +15,7 @@ function useProductPicker() {
     function setProduct(product) {
         if (!product)
             return;
-        telemetry.sendProductPickedMessage({ product: product.slug });
+        telemetry.sendProductPickedMessage([{ object: 'product', product: product.slug }]);
         if (typeof document === 'undefined')
             return;
         if (product.name) {

package/lib/markdoc/components/Cards/Card.js

@@ -95,6 +95,7 @@ const CardWrapper = styled_components_1.default.div.attrs(({ $isCardLink, $varia
   overflow: hidden;
   transition: box-shadow 0.3s ease;
   position: relative;
+  text-decoration: none;
   --md-paragraph-margin: 0;
   --link-decoration-hover: none;
 

package/lib/markdoc/components/Heading/Heading.js

@@ -40,10 +40,31 @@ exports.Heading = Heading;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const react_router_dom_1 = require("react-router-dom");
+const Image_1 = require("../../../markdoc/components/Image/Image");
 const utils_1 = require("../../../core/utils");
 const LinkIcon_1 = require("../../../icons/LinkIcon/LinkIcon");
 const PageActions_1 = require("../../../components/PageActions/PageActions");
 const hooks_1 = require("../../../core/hooks");
+function renderWithSpanWrapper(children) {
+    const childrenArray = react_1.default.Children.toArray(children);
+    if (childrenArray.length === 0)
+        return null;
+    const first = childrenArray[0];
+    const last = childrenArray[childrenArray.length - 1];
+    // Check if an element is an <img> or the Markdoc Image component
+    const isImage = (node) => {
+        if (!(0, react_1.isValidElement)(node))
+            return false;
+        if (typeof node.type === 'string')
+            return node.type === 'img';
+        return node.type === Image_1.Image;
+    };
+    const middleChildren = childrenArray.slice(isImage(first) ? 1 : 0, isImage(last) ? childrenArray.length - 1 : childrenArray.length);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        isImage(first) && first,
+        middleChildren.length > 0 && react_1.default.createElement(StyledHeadingText, null, middleChildren),
+        isImage(last) && last));
+}
 /**
  * Class name for all MD tags
  */
@@ -64,12 +85,23 @@ function Heading({ level, id, children, 'data-source': dataSource, 'data-hash':
         'data-hash': dataHash,
     }, react_1.default.createElement(HeadingContentWrapper, null,
         linkEl,
-        react_1.default.createElement("span", null, children),
+        react_1.default.createElement("span", null, renderWithSpanWrapper(children)),
         isMarkdownPage && __idx === 0 ? react_1.default.createElement(PageActions_1.PageActions, { pageSlug: pathname }) : null));
 }
 const HeadingContentWrapper = styled_components_1.default.div `
   display: flex;
   gap: var(--spacing-xs);
-  align-items: center;
+
+  & > span {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--spacing-sm);
+  }
+`;
+const StyledHeadingText = styled_components_1.default.span `
+  margin: auto 0;
+  && > img:only-child {
+    display: inline-block;
+  }
 `;
 //# sourceMappingURL=Heading.js.map