@redocly/theme 0.61.0 → 0.62.0-custom.0

package/lib/components/Admonition/Admonition.js

@@ -39,15 +39,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Admonition = Admonition;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
-const WarningFilledIcon_1 = require("../../icons/WarningFilledIcon/WarningFilledIcon");
-const CheckmarkFilledIcon_1 = require("../../icons/CheckmarkFilledIcon/CheckmarkFilledIcon");
-const CloseFilledIcon_1 = require("../../icons/CloseFilledIcon/CloseFilledIcon");
-const InformationFilledIcon_1 = require("../../icons/InformationFilledIcon/InformationFilledIcon");
+const WarningCycleIcon_1 = require("../../icons/WarningCycleIcon/WarningCycleIcon");
+const CheckmarkOutlineIcon_1 = require("../../icons/CheckmarkOutlineIcon/CheckmarkOutlineIcon");
+const ErrorIcon_1 = require("../../icons/ErrorIcon/ErrorIcon");
+const InformationIcon_1 = require("../../icons/InformationIcon/InformationIcon");
 const IconsMap = {
-    warning: WarningFilledIcon_1.WarningFilledIcon,
-    success: CheckmarkFilledIcon_1.CheckmarkFilledIcon,
-    danger: CloseFilledIcon_1.CloseFilledIcon,
-    info: InformationFilledIcon_1.InformationFilledIcon,
+    warning: WarningCycleIcon_1.WarningCycleIcon,
+    success: CheckmarkOutlineIcon_1.CheckmarkOutlineIcon,
+    danger: ErrorIcon_1.ErrorIcon,
+    info: InformationIcon_1.InformationIcon,
 };
 function Admonition({ type = 'info', name, children, className, 'data-source': dataSource, 'data-hash': dataHash, }) {
     const Icon = IconsMap[type] || IconsMap['info'];
@@ -69,9 +69,9 @@ const Content = styled_components_1.default.div `
 const AdmonitionWrapper = styled_components_1.default.div `
   display: flex;
   flex-direction: row;
-  gap: var(--spacing-base);
-  margin: var(--admonition-margin-vertical) var(--admonition-margin-horizontal);
-  padding: var(--admonition-padding-vertical-xs) var(--admonition-padding-horizontal);
+  gap: var(--admonition-gap);
+  margin: var(--admonition-margin);
+  padding: var(--admonition-padding);
   border-radius: var(--admonition-border-radius);
   font-size: var(--admonition-font-size);
   font-weight: var(--admonition-font-weight);
@@ -83,17 +83,12 @@ const AdmonitionWrapper = styled_components_1.default.div `
   ${({ type }) => (0, styled_components_1.css) `
     background-color: var(--admonition-${type}-bg-color);
     color: var(--admonition-${type}-text-color);
-    border-left: var(--admonition-${type}-border);
+    border: var(--admonition-${type}-border);
   `};
 
-  &:has(${Content}) {
-    padding: var(--admonition-padding-vertical-md) var(--admonition-padding-horizontal);
-  }
-
   &:not(:has(${Content})) {
     --admonition-heading-font-size: var(--admonition-font-size);
     --admonition-heading-line-height: var(--admonition-line-height);
-    --admonition-icon-size: 16px;
 
     align-items: center;
     gap: calc(var(--spacing-xxs) * 1.5);
@@ -103,6 +98,7 @@ const AdmonitionWrapper = styled_components_1.default.div `
     width: var(--admonition-icon-size);
     height: var(--admonition-icon-size);
     flex-shrink: 0;
+    margin: var(--admonition-icon-margin);
 
     fill: ${({ type }) => `var(--admonition-${type}-icon-color)`};
 
@@ -115,7 +111,7 @@ const AdmonitionWrapper = styled_components_1.default.div `
 const TextContainer = styled_components_1.default.div `
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-unit);
+  gap: var(--admonition-text-gap);
   width: 100%;
 `;
 const Heading = styled_components_1.default.div `

package/lib/components/Admonition/variables.dark.d.ts

@@ -0,0 +1 @@
+export declare const admonitionDarkMode: import("styled-components").FlattenSimpleInterpolation;

package/lib/components/Admonition/variables.dark.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.admonitionDarkMode = void 0;
+const styled_components_1 = require("styled-components");
+exports.admonitionDarkMode = (0, styled_components_1.css) `
+  --admonition-info-bg-color: color-mix(in srgb, var(--color-blue-1) 40%, transparent); // @presenter Color
+  --admonition-info-border: var(--admonition-border-width) var(--admonition-border-style) color-mix(in srgb, var(--color-blue-3) 40%, transparent); // @presenter Border
+
+  --admonition-warning-bg-color: color-mix(in srgb, var(--color-carrot-1) 40%, transparent); // @presenter Color
+  --admonition-warning-border: var(--admonition-border-width) var(--admonition-border-style) color-mix(in srgb, var(--color-carrot-3) 40%, transparent); // @presenter Border
+
+  --admonition-danger-bg-color: color-mix(in srgb, var(--color-raspberry-1) 40%, transparent); // @presenter Color
+  --admonition-danger-border: var(--admonition-border-width) var(--admonition-border-style) color-mix(in srgb, var(--color-raspberry-3) 40%, transparent); // @presenter Border
+
+  --admonition-success-bg-color: color-mix(in srgb, var(--color-green-1) 40%, transparent); // @presenter Color
+  --admonition-success-border: var(--admonition-border-width) var(--admonition-border-style) color-mix(in srgb, var(--color-green-3) 40%, transparent); // @presenter Border
+`;
+//# sourceMappingURL=variables.dark.js.map

package/lib/components/Admonition/variables.js

@@ -12,23 +12,23 @@ exports.admonition = (0, styled_components_1.css) `
   --admonition-font-size: var(--font-size-base); // @presenter FontSize
   --admonition-font-weight: var(--font-weight-regular); // @presenter FontWeight
   --admonition-line-height: var(--line-height-base); // @presenter LineHeight
-  --admonition-heading-font-size: var(--font-size-lg); // @presenter FontSize
-  --admonition-heading-font-weight: var(--font-weight-regular); // @presenter FontWeight
-  --admonition-heading-line-height: var(--line-height-lg); // @presenter LineHeight
-  --admonition-heading-letter-spacing: 0.3px; // @presenter LetterSpacing
+  --admonition-heading-font-size: var(--font-size-base); // @presenter FontSize
+  --admonition-heading-font-weight: var(--font-weight-semibold); // @presenter FontWeight
+  --admonition-heading-line-height: var(--line-height-base); // @presenter LineHeight
+  --admonition-heading-letter-spacing: 0; // @presenter LetterSpacing
   --admonition-heading-transform: none;
-
+  --admonition-heading-text-color: var(--color-warm-grey-11); // @presenter Color
   /**
   * @tokens Admonition spacing
   * @presenter Spacing
   */
 
-  --admonition-margin-horizontal: 0;
-  --admonition-margin-vertical: var(--spacing-lg);
-  --admonition-padding-horizontal: var(--spacing-base);
-  --admonition-padding-vertical-xs: var(--spacing-xs);
-  --admonition-padding-vertical-md: var(--spacing-md);
-  --admonition-icon-size: 24px;
+  --admonition-gap: var(--spacing-sm); // @presenter Spacing
+  --admonition-text-gap: var(--spacing-xxs); // @presenter Spacing
+  --admonition-margin: var(--spacing-base) 0 var(--spacing-md) 0; // @presenter Spacing
+  --admonition-padding: var(--spacing-sm) var(--spacing-base); // @presenter Spacing
+  --admonition-icon-margin: calc(var(--spacing-unit) / 2) 0; // @presenter Spacing
+  --admonition-icon-size: 18px; // @presenter Spacing
 
   /**
   * @tokens Admonition border
@@ -36,21 +36,20 @@ exports.admonition = (0, styled_components_1.css) `
 
   --admonition-border-radius: var(--border-radius-lg); // @presenter BorderRadius
   --admonition-border-style: var(--border-style);
-  --admonition-border-width: calc(var(--border-width) * 4);
+  --admonition-border-width: 1px;
 
   /**
   * @tokens Admonition type info
   */
 
   --admonition-info-bg-color: var(--color-info-bg); // @presenter Color
-  --admonition-info-heading-text-color: var(--text-color-primary); // @presenter Color
-  --admonition-info-text-color: var(--text-color-secondary); // @presenter Color
-  --admonition-info-icon-color: var(--color-info-base); // @presenter Color
+  --admonition-info-heading-text-color: var(--admonition-heading-text-color); // @presenter Color
+  --admonition-info-text-color: var(--admonition-heading-text-color); // @presenter Color
+  --admonition-info-icon-color: var(--color-info-active); // @presenter Color
   --admonition-info-border-color: var(--color-info-border); // @presenter Color
   --admonition-info-border-style: var(--admonition-border-style);
   --admonition-info-border-width: var(--admonition-border-width);
   --admonition-info-border: var(--admonition-info-border-width) var(--admonition-info-border-style) var(--admonition-info-border-color); // @presenter Border
-  --admonition-info-icon: none;
 
   /**
   * @tokens Admonition type warning
@@ -58,42 +57,39 @@ exports.admonition = (0, styled_components_1.css) `
 
   /* warning */
   --admonition-warning-bg-color: var(--color-warning-bg); // @presenter Color
-  --admonition-warning-text-color: var(--text-color-secondary); // @presenter Color
-  --admonition-warning-heading-text-color: var(--text-color-primary); // @presenter Color
-  --admonition-warning-icon-color: var(--color-warning-base); // @presenter Color
+  --admonition-warning-text-color: var(--admonition-heading-text-color); // @presenter Color
+  --admonition-warning-heading-text-color: var(--admonition-heading-text-color); // @presenter Color
+  --admonition-warning-icon-color: var(--color-warning-active); // @presenter Color
   --admonition-warning-border-color: var(--color-warning-border); // @presenter Color
   --admonition-warning-border-style: var(--admonition-border-style); // @presenter Color
   --admonition-warning-border-width: var(--admonition-border-width); // @presenter Color
   --admonition-warning-border: var(--admonition-warning-border-width) var(--admonition-warning-border-style) var(--admonition-warning-border-color); // @presenter Border
-  --admonition-warning-icon: none;
 
   /**
   * @tokens Admonition type danger
   */
 
   --admonition-danger-bg-color: var(--color-error-bg); // @presenter Color
-  --admonition-danger-text-color: var(--text-color-secondary); // @presenter Color
-  --admonition-danger-heading-text-color: var(--text-color-primary); // @presenter Color
-  --admonition-danger-icon-color: var(--color-error-base); // @presenter Color
+  --admonition-danger-text-color: var(--admonition-heading-text-color); // @presenter Color
+  --admonition-danger-heading-text-color: var(--admonition-heading-text-color); // @presenter Color
+  --admonition-danger-icon-color: var(--color-error-active); // @presenter Color
   --admonition-danger-border-color: var(--color-error-border); // @presenter Color
   --admonition-danger-border-style: var(--admonition-border-style); // @presenter Color
   --admonition-danger-border-width: var(--admonition-border-width); // @presenter Color
   --admonition-danger-border: var(--admonition-danger-border-width) var(--admonition-danger-border-style) var(--admonition-danger-border-color); // @presenter Border
-  --admonition-danger-icon: none;
 
   /**
   * @tokens Admonition type success
   */
 
   --admonition-success-bg-color: var(--color-success-bg); // @presenter Color
-  --admonition-success-text-color: var(--text-color-secondary); // @presenter Color
-  --admonition-success-heading-text-color: var(--text-color-primary); // @presenter Color
-  --admonition-success-icon-color: var(--color-success-base); // @presenter Color
+  --admonition-success-text-color: var(--admonition-heading-text-color); // @presenter Color
+  --admonition-success-heading-text-color: var(--admonition-heading-text-color); // @presenter Color
+  --admonition-success-icon-color: var(--color-success-active); // @presenter Color
   --admonition-success-border-color: var(--color-success-border); // @presenter Color
   --admonition-success-border-style: var(--admonition-border-style); // @presenter Color
   --admonition-success-border-width: var(--admonition-border-width); // @presenter Color
   --admonition-success-border: var(--admonition-success-border-width) var(--admonition-success-border-style) var(--admonition-success-border-color); // @presenter Border
-  --admonition-success-icon: none;
 
   // @tokens End
 `;

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

@@ -44,7 +44,8 @@ const CloseIcon_1 = require("../../../../icons/CloseIcon/CloseIcon");
 const hooks_1 = require("../../../../core/hooks");
 const MenuContainer_1 = require("../../../../components/Menu/MenuContainer");
 const utils_1 = require("../../../../core/utils");
-const CatalogEntityVersionItem_1 = require("./CatalogEntityVersionItem");
+const constants_1 = require("../../../../core/constants");
+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)();
@@ -53,12 +54,13 @@ function CatalogEntityHistorySidebar({ entityKey, revision, version, className,
     const { translate } = useTranslate();
     const { currentLocale } = useL10nConfig();
     const { items: revisions } = useFetchCatalogEntityRevisions({ entityKey });
+    const normalizedLocale = currentLocale && currentLocale !== constants_1.DEFAULT_LOCALE_PLACEHOLDER ? currentLocale : 'en-US';
     const versionHistoryItems = (0, react_1.useMemo)(() => (0, utils_1.transformRevisionsToVersionHistory)({
         revisions,
         currentRevisionDate: revision,
         currentVersion: version,
-        locale: currentLocale,
-    }), [revisions, revision, version, currentLocale]);
+        locale: normalizedLocale,
+    }), [revisions, revision, version, normalizedLocale]);
     const activeRevisionLabel = (0, react_1.useMemo)(() => {
         var _a;
         const itemWithActiveRevision = versionHistoryItems.find((item) => { var _a; return (_a = item.revisions) === null || _a === void 0 ? void 0 : _a.some((revision) => revision.isActive); });

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 })))),