@redocly/theme 0.61.1 → 0.62.0-custom.0

package/lib/components/AsyncApiDocs/hooks/AfterAsyncApiChannelDescription.d.ts

@@ -0,0 +1 @@
+export declare const AfterAsyncApiChannelDescription: any;

package/lib/components/AsyncApiDocs/hooks/AfterAsyncApiChannelDescription.js

@@ -0,0 +1,12 @@
+"use strict";
+// interface AfterAsyncApiChannelDescriptionProps {
+//   channel: any;
+// }
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AfterAsyncApiChannelDescription = void 0;
+// export function AfterAsyncApiChannelDescription(_props: AfterAsyncApiChannelDescriptionProps) {
+//   return null;
+// }
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+exports.AfterAsyncApiChannelDescription = null;
+//# sourceMappingURL=AfterAsyncApiChannelDescription.js.map

package/lib/components/Badge/Badge.d.ts

@@ -4,5 +4,6 @@ export type BadgeProps = PropsWithChildren<{
     color?: string;
     key?: string;
     className?: string;
+    icon?: string;
 }>;
-export declare function Badge(props: BadgeProps): JSX.Element;
+export declare function Badge({ icon, children, ...props }: BadgeProps): JSX.Element;

package/lib/components/Badge/Badge.js

@@ -32,6 +32,17 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -39,8 +50,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Badge = Badge;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
-function Badge(props) {
-    return react_1.default.createElement(BadgeComponent, Object.assign({}, props, { "data-component-name": "Badge/Badge" }));
+const GenericIcon_1 = require("../../icons/GenericIcon/GenericIcon");
+function Badge(_a) {
+    var { icon, children } = _a, props = __rest(_a, ["icon", "children"]);
+    return (react_1.default.createElement(BadgeComponent, Object.assign({}, props, { "data-component-name": "Badge/Badge" }),
+        icon ? react_1.default.createElement(BadgeIcon, { icon: icon }) : null,
+        children));
 }
 const BadgeComponent = styled_components_1.default.span `
   display: inline-block;
@@ -61,4 +76,11 @@ const BadgeComponent = styled_components_1.default.span `
       border-radius: var(--badge-deprecated-border-radius);
     `}
 `;
+const BadgeIcon = (0, styled_components_1.default)(GenericIcon_1.GenericIcon) `
+  --icon-width: var(--font-size-sm);
+  --icon-height: var(--font-size-sm);
+  margin-right: var(--spacing-xxs);
+  flex-shrink: 0;
+  vertical-align: middle;
+`;
 //# sourceMappingURL=Badge.js.map

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/Breadcrumb.js

@@ -51,7 +51,7 @@ function Breadcrumb({ label, link, isActive, onClick, icon }) {
         react_1.default.createElement(BreadcrumbIcon_1.BreadcrumbIcon, { icon: icon }),
         displayLabel));
     const breadcrumbContent = link ? (react_1.default.createElement(BreadcrumbLink, { "data-component-name": "Breadcrumbs/BreadcrumbLink", to: link, onClick: onClick, "$isActive": isActive }, content)) : (react_1.default.createElement(BreadcrumbWrapper, { "data-component-name": "Breadcrumbs/BreadcrumbWrapper", "$isActive": isActive, onClick: onClick, tabIndex: -1 }, content));
-    return isTruncated ? (react_1.default.createElement(Tooltip_1.TooltipComponent, { tip: label, placement: "bottom", width: "max-content" }, breadcrumbContent)) : (breadcrumbContent);
+    return isTruncated ? (react_1.default.createElement(Tooltip_1.Tooltip, { tip: label, placement: "bottom" }, breadcrumbContent)) : (breadcrumbContent);
 }
 const baseBreadcrumbStyles = `
   display: flex;

package/lib/components/Breadcrumbs/BreadcrumbDropdown.js

@@ -55,7 +55,7 @@ function BreadcrumbDropdown({ children, label, items, onItemClick, className, })
         return null;
     }
     const isTruncated = label.length > constants_1.BREADCRUMB_MAX_LENGTH;
-    const triggerContent = isTruncated ? (react_1.default.createElement(Tooltip_1.TooltipComponent, { tip: label, placement: "bottom", width: "max-content" },
+    const triggerContent = isTruncated ? (react_1.default.createElement(Tooltip_1.Tooltip, { tip: label, placement: "bottom" },
         react_1.default.createElement(TriggerContentWrapper, null, children))) : (children);
     const trigger = react_1.default.createElement(StyledDropdownTrigger, null, triggerContent);
     return (react_1.default.createElement(BreadcrumbDropdownWrapper, { "data-component-name": "Breadcrumbs/BreadcrumbDropdown", className: className, "data-testid": "breadcrumb-dropdown" },
@@ -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);
@@ -102,7 +105,7 @@ function AIAssistantButton() {
 const StyledAIAssistantButton = (0, styled_components_1.default)(Button_1.Button) `
   position: fixed;
   bottom: var(--ai-assistant-button-bottom);
-  right: var(--ai-assistant-button-right);
+  right: calc(var(--ai-assistant-button-right) + var(--modal-scrollbar-width, 0px));
   ${({ $inputType }) => $inputType === 'icon'
     ? `
     border-radius: var(--ai-assistant-button-border-radius-icon);

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/CatalogEntity.js

@@ -18,7 +18,7 @@ const hooks_1 = require("../../../core/hooks");
 const CatalogEntitySchema_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntitySchema");
 const CatalogEntityMethodAndPath_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntityMethodAndPath");
 const CatalogEntityRelationsGraph_lazy_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph.lazy");
-const theme_1 = require("../../../index.js");
+const CatalogEntityHistorySidebar_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityHistorySidebar");
 const renderFirstColumnEntitySection = (entity) => {
     switch (entity.type) {
         case 'api-operation':
@@ -45,7 +45,7 @@ function CatalogEntity({ RedocSchema, StoreProvider, GraphqlTypeRenderer, }) {
     const linkToMainCatalogLabel = translate(catalogConfig.titleTranslationKey);
     const { searchQuery, setSearchQuery } = useCatalog();
     return (react_1.default.createElement(CatalogPageWrapper, { "data-component-name": "Catalog/CatalogEntity/CatalogEntity" },
-        react_1.default.createElement(theme_1.CatalogEntityHistorySidebar, { entityKey: entity.key, revision: revision, version: version }),
+        react_1.default.createElement(CatalogEntityHistorySidebar_1.CatalogEntityHistorySidebar, { entityKey: entity.key, revision: revision, version: version }),
         react_1.default.createElement(CatalogPageContent, null,
             react_1.default.createElement(Breadcrumbs_1.Breadcrumbs, { additionalBreadcrumbs: [
                     { label: linkToMainCatalogLabel, link: linkToMainCatalog },

package/lib/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityHistorySidebar.js

@@ -45,7 +45,7 @@ const hooks_1 = require("../../../../core/hooks");
 const MenuContainer_1 = require("../../../../components/Menu/MenuContainer");
 const utils_1 = require("../../../../core/utils");
 const constants_1 = require("../../../../core/constants");
-const CatalogEntityVersionItem_1 = require("./CatalogEntityVersionItem");
+const CatalogEntityVersionItem_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityVersionItem");
 function CatalogEntityHistorySidebar({ entityKey, revision, version, className, }) {
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const location = (0, react_router_dom_1.useLocation)();

package/lib/components/Catalog/CatalogEntity/CatalogEntityProperties/TagsProperty.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TagsProperty = TagsProperty;
 const react_1 = __importDefault(require("react"));
 const TagsIcon_1 = require("../../../../icons/TagsIcon/TagsIcon");
-const theme_1 = require("../../../../index.js");
+const CatalogTagsWithTooltip_1 = require("../../../../components/Catalog/CatalogTagsWithTooltip");
 const CatalogEntityPropertyCard_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard");
 const hooks_1 = require("../../../../core/hooks");
 function TagsProperty({ entity }) {
@@ -15,7 +15,7 @@ function TagsProperty({ entity }) {
     return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityProperties/TagsProperty" },
         react_1.default.createElement(CatalogEntityPropertyCard_1.CatalogEntityPropertyCard, { header: react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(TagsIcon_1.TagsIcon, null),
-                translate('catalog.tags.label', 'Tags')), content: react_1.default.createElement(theme_1.CatalogTagsWithTooltip, { itemsToShow: 8, items: entity.tags || [], tagProps: {
+                translate('catalog.tags.label', 'Tags')), content: react_1.default.createElement(CatalogTagsWithTooltip_1.CatalogTagsWithTooltip, { itemsToShow: 8, items: entity.tags || [], tagProps: {
                     style: {
                         fontSize: 'var(--font-size-base)',
                         borderRadius: 'var(--border-radius)',

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/Catalog/CatalogTableView/CatalogTableViewRow.js

@@ -12,7 +12,7 @@ const CatalogEntityCell_1 = require("../../../components/Catalog/CatalogTableVie
 const CatalogTagsCell_1 = require("../../../components/Catalog/CatalogTableView/CatalogTagsCell");
 const hooks_1 = require("../../../core/hooks");
 const CatalogEntityTypeTag_1 = require("../../../components/Catalog/CatalogEntityTypeTag");
-const Link_1 = require("../../Link/Link");
+const Link_1 = require("../../../components/Link/Link");
 const baseColumns = [
     {
         key: 'entity',

package/lib/components/Catalog/CatalogTagsWithTooltip.js

@@ -17,7 +17,7 @@ function CatalogTagsWithTooltip({ items, itemsToShow = 1, showPlaceholder = true
     if (!items || items.length === 0) {
         if (showPlaceholder) {
             return (react_1.default.createElement(CatalogTagsWrapper, { "data-component-name": "Catalog/CatalogTagsWithTooltip" },
-                react_1.default.createElement(Tag_1.Tag, { style: { backgroundColor: 'var(--catalog-tags-placeholder-bg-color)' }, color: "grey" }, "N/A")));
+                react_1.default.createElement(Tag_1.Tag, { variant: "outline", style: { backgroundColor: 'var(--catalog-tags-placeholder-bg-color)' }, color: "grey" }, "N/A")));
         }
         return null;
     }
@@ -27,7 +27,7 @@ function CatalogTagsWithTooltip({ items, itemsToShow = 1, showPlaceholder = true
     }
     const displayedItems = items.slice(0, itemsToShow);
     const remainingCount = items.length - itemsToShow;
-    return (react_1.default.createElement(Tooltip_1.TooltipComponent, { tip: items.join(', '), placement: "bottom", className: "catalog", width: "400px" },
+    return (react_1.default.createElement(Tooltip_1.Tooltip, { tip: items.join(', '), placement: "bottom", className: "catalog", width: "400px" },
         react_1.default.createElement(CatalogTagsWrapper, { "data-component-name": "Catalog/CatalogTagsWithTooltip" },
             displayedItems.map((item, index) => (react_1.default.createElement(Tag_1.Tag, Object.assign({ key: `${item}-${index}` }, tagProps, { textTransform: "none", maxLength: constants_1.CATALOG_TAG_MAX_LENGTH }),
                 react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, item)))),

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

@@ -8,7 +8,7 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const CodeBlockTabs_1 = require("../../components/CodeBlock/CodeBlockTabs");
 const CopyButton_1 = require("../../components/Buttons/CopyButton");
-const TooltipWrapper_1 = require("../../components/Tooltip/TooltipWrapper");
+const Tooltip_1 = require("../../components/Tooltip/Tooltip");
 const hooks_1 = require("../../core/hooks");
 const DeselectIcon_1 = require("../../icons/DeselectIcon/DeselectIcon");
 const MaximizeIcon_1 = require("../../icons/MaximizeIcon/MaximizeIcon");
@@ -38,15 +38,15 @@ function CodeBlockControls({ children, className, title, controls, tabs, dropdow
         tabs && react_1.default.createElement(CodeBlockTabs_1.CodeBlockTabs, { tabs: tabs }),
         react_1.default.createElement(ControlsWrapper, null,
             dropdown && react_1.default.createElement(CodeBlockDropdown_1.CodeBlockDropdown, Object.assign({}, dropdown)),
-            report && !report.hidden && !((_a = report === null || report === void 0 ? void 0 : report.props) === null || _a === void 0 ? void 0 : _a.hide) ? (react_1.default.createElement(TooltipWrapper_1.TooltipWrapper, { tip: translate('codeSnippet.report.tooltipText', 'Report a problem'), placement: "top" },
+            report && !report.hidden && !((_a = report === null || report === void 0 ? void 0 : report.props) === null || _a === void 0 ? void 0 : _a.hide) ? (react_1.default.createElement(Tooltip_1.Tooltip, { tip: translate('codeSnippet.report.tooltipText', 'Report a problem'), placement: "top", arrowPosition: "right" },
                 react_1.default.createElement(ControlButton, Object.assign({ variant: "text", size: "small", "data-testid": "report-button", icon: controlsType === 'icon' ? react_1.default.createElement(WarningSquareIcon_1.WarningSquareIcon, { size: "18px" }) : undefined }, report.props), controlsType != 'icon' && (((_b = report.props) === null || _b === void 0 ? void 0 : _b.buttonText) || 'Report')))) : null,
-            expand && !((_c = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.expand) === null || _c === void 0 ? void 0 : _c.hide) ? (react_1.default.createElement(TooltipWrapper_1.TooltipWrapper, { tip: translate('codeSnippet.expand.tooltipText', 'Expand all'), placement: "top" },
+            expand && !((_c = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.expand) === null || _c === void 0 ? void 0 : _c.hide) ? (react_1.default.createElement(Tooltip_1.Tooltip, { tip: translate('codeSnippet.expand.tooltipText', 'Expand all'), placement: "top", arrowPosition: "right" },
                 react_1.default.createElement(ControlButton, { variant: "text", size: "small", "data-testid": "expand-all", icon: controlsType === 'icon' ? react_1.default.createElement(MaximizeIcon_1.MaximizeIcon, null) : undefined, onClick: expand === null || expand === void 0 ? void 0 : expand.onClick }, controlsType !== 'icon' && ((expand === null || expand === void 0 ? void 0 : expand.label) || 'Expand all')))) : null,
-            collapse && !((_d = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.collapse) === null || _d === void 0 ? void 0 : _d.hide) ? (react_1.default.createElement(TooltipWrapper_1.TooltipWrapper, { tip: translate('codeSnippet.collapse.tooltipText', 'Collapse all'), placement: "top" },
+            collapse && !((_d = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.collapse) === null || _d === void 0 ? void 0 : _d.hide) ? (react_1.default.createElement(Tooltip_1.Tooltip, { tip: translate('codeSnippet.collapse.tooltipText', 'Collapse all'), placement: "top", arrowPosition: "right" },
                 react_1.default.createElement(ControlButton, { variant: "text", size: "small", "data-testid": "collapse-all", icon: controlsType === 'icon' ? react_1.default.createElement(MinimizeIcon_1.MinimizeIcon, null) : undefined, onClick: collapse === null || collapse === void 0 ? void 0 : collapse.onClick }, controlsType !== 'icon' && ((expand === null || expand === void 0 ? void 0 : expand.label) || 'Collapse all')))) : null,
             select ? (react_1.default.createElement(ControlButton, { variant: "text", size: "small", "data-testid": "select-all", icon: controlsType === 'icon' ? react_1.default.createElement(SelectIcon_1.SelectIcon, null) : undefined, onClick: select === null || select === void 0 ? void 0 : select.onClick }, controlsType !== 'icon' && (select === null || select === void 0 ? void 0 : select.label) ? select.label : 'Select all')) : null,
             deselect ? (react_1.default.createElement(ControlButton, { variant: "text", size: "small", "data-testid": "clear-all", icon: controlsType === 'icon' ? react_1.default.createElement(DeselectIcon_1.DeselectIcon, null) : undefined, onClick: deselect === null || deselect === void 0 ? void 0 : deselect.onClick }, controlsType !== 'icon' && (deselect === null || deselect === void 0 ? void 0 : deselect.label) ? deselect.label : 'Clear all')) : null,
-            copy && !((_e = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.copy) === null || _e === void 0 ? void 0 : _e.hide) ? (react_1.default.createElement(TooltipWrapper_1.TooltipWrapper, { tip: translate('codeSnippet.copy.tooltipText', 'Copy to clipboard'), placement: "top" },
+            copy && !((_e = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.copy) === null || _e === void 0 ? void 0 : _e.hide) ? (react_1.default.createElement(Tooltip_1.Tooltip, { tip: translate('codeSnippet.copy.tooltipText', 'Copy to clipboard'), placement: "top", arrowPosition: "right" },
                 react_1.default.createElement(StyledCopyButton, { data: copy.data, "data-source": copy.dataSource, "data-hash": copy.dataHash, type: controlsType, toasterPlacement: copy.toasterPlacement, toasterDuration: copy.toasterDuration, buttonText: copy.label, onCopyClick: () => {
                         var _a;
                         // If there already is a click handler, events should be handled there, cause they pass additional data
@@ -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/JsonViewer/JsonViewer.js

@@ -40,7 +40,7 @@ exports.JsonViewerWrap = exports.JsonViewer = void 0;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const CodeBlock_1 = require("../../components/CodeBlock/CodeBlock");
-const Helpers_1 = require("./Helpers");
+const helpers_1 = require("../../components/JsonViewer/helpers");
 function JsonComponent({ data, expandLevel = 1, className, onCopyClick, onPanelToggle, title, controls = {}, }) {
     const showFoldingButtons = data && Object.values(data).some((value) => typeof value === 'object' && value !== null);
     const [expandAllSignal, setExpandAllSignal] = react_1.default.useState(undefined);
@@ -71,7 +71,7 @@ function JsonComponent({ data, expandLevel = 1, className, onCopyClick, onPanelT
                 }
                 : undefined, source: source },
             react_1.default.createElement(FoldingWrap, null,
-                react_1.default.createElement(Helpers_1.JsonValue, { value: data, level: 0, standalone: true, expandAllSignal: expandAllSignal, defaultExpandLevel: Math.max(1, expandLevel) })))));
+                react_1.default.createElement(helpers_1.JsonValue, { value: data, level: 0, standalone: true, expandAllSignal: expandAllSignal, defaultExpandLevel: Math.max(1, expandLevel) })))));
 }
 exports.JsonViewer = (0, react_1.memo)(JsonComponent);
 const FoldingWrap = styled_components_1.default.div `

package/lib/components/JsonViewer/{Helpers.js → helpers.js}

@@ -37,6 +37,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.JsonValue = JsonValue;
+/* eslint-disable check-file/filename-naming-convention */
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Button_1 = require("../../components/Button/Button");
@@ -137,4 +138,4 @@ const ExpandButton = (0, styled_components_1.default)(Button_1.Button) `
     margin-left: 0;
   }
 `;
-//# sourceMappingURL=Helpers.js.map
+//# sourceMappingURL=helpers.js.map

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 {