@redocly/theme 0.60.0-next.5 → 0.60.0-next.7

package/lib/components/Banner/Banner.d.ts

@@ -0,0 +1,6 @@
+import type { JSX } from 'react';
+type BannerProps = {
+    className?: string;
+};
+export declare function Banner({ className }: BannerProps): JSX.Element | null;
+export {};

package/lib/components/Banner/Banner.js

@@ -0,0 +1,172 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Banner = Banner;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const hooks_1 = require("../../core/hooks");
+const Markdown_1 = require("../../components/Markdown/Markdown");
+const CloseIcon_1 = require("../../icons/CloseIcon/CloseIcon");
+const Button_1 = require("../../components/Button/Button");
+function setBannerHeight(height) {
+    document.documentElement.style.setProperty('--banner-height', `${height}px`);
+}
+function Banner({ className }) {
+    const { useBanner, useMarkdownText } = (0, hooks_1.useThemeHooks)();
+    const { banner, dismissBanner } = useBanner();
+    const [displayBanner, setDisplayBanner] = (0, react_1.useState)(undefined);
+    const [isVisible, setIsVisible] = (0, react_1.useState)(false);
+    const markdownContent = useMarkdownText((displayBanner === null || displayBanner === void 0 ? void 0 : displayBanner.content) || '');
+    const bannerRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (banner) {
+            setDisplayBanner(banner);
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    setIsVisible(true);
+                });
+            });
+        }
+        else {
+            setIsVisible(false);
+            const timer = setTimeout(() => {
+                setDisplayBanner(undefined);
+            }, 400);
+            return () => clearTimeout(timer);
+        }
+    }, [banner]);
+    (0, react_1.useEffect)(() => {
+        if (!displayBanner) {
+            const timer = setTimeout(() => {
+                setBannerHeight(0);
+            }, 400);
+            return () => clearTimeout(timer);
+        }
+        const bannerElement = bannerRef.current;
+        if (!bannerElement)
+            return;
+        if (!isVisible) {
+            setBannerHeight(0);
+            return;
+        }
+        const updateHeight = () => {
+            const height = bannerElement.getBoundingClientRect().height;
+            setBannerHeight(height);
+        };
+        updateHeight();
+        const resizeObserver = new ResizeObserver(updateHeight);
+        resizeObserver.observe(bannerElement);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [displayBanner, isVisible]);
+    if (!displayBanner) {
+        return null;
+    }
+    const bannerColor = displayBanner.color || 'info';
+    return (react_1.default.createElement(BannerWrapper, { ref: bannerRef, "data-component-name": "Banner/Banner", className: className, "$color": bannerColor, "$isVisible": isVisible },
+        react_1.default.createElement(BannerContent, null,
+            react_1.default.createElement(Markdown_1.Markdown, { compact: true }, markdownContent)),
+        displayBanner.dismissible && (react_1.default.createElement(DismissButton, { variant: "ghost", size: "var(--banner-button-size)", icon: react_1.default.createElement(CloseIcon_1.CloseIcon, { color: `var(--banner-${bannerColor}-icon-color)`, size: "16px" }), onClick: () => dismissBanner(displayBanner.content), "aria-label": "Dismiss banner" }))));
+}
+const BannerContent = styled_components_1.default.div `
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  p {
+    margin: 0;
+    color: var(--banner-text-color);
+    text-align: center;
+
+    a:not([role='button']) {
+      color: var(--banner-link-color);
+      text-decoration: var(--banner-link-decoration);
+    }
+
+    [data-component-name='Button/Button'] {
+      --button-font-size: var(--banner-button-font-size);
+      --button-border-radius: var(--banner-button-border-radius);
+      --button-padding: var(--banner-button-padding-inline);
+      --button-line-height: var(--banner-button-line-height);
+      --button-icon-size: var(--banner-button-icon-size);
+      --button-icon-padding: var(--banner-button-icon-padding);
+      --button-icon-left-padding: var(--banner-button-icon-left-padding);
+      --button-icon-right-padding: var(--banner-button-icon-right-padding);
+      margin: var(--banner-button-margin);
+    }
+  }
+
+  p > * {
+    vertical-align: bottom;
+  }
+`;
+const BannerWrapper = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--banner-padding);
+  color: var(--banner-text-color);
+  min-height: var(--banner-min-height);
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  z-index: var(--z-index-overlay);
+  transform: ${({ $isVisible }) => ($isVisible ? 'translateY(0)' : 'translateY(-100%)')};
+  transition: transform 0.4s ease-out;
+  ${({ $color }) => $color &&
+    (0, styled_components_1.css) `
+      background-color: var(--banner-${$color}-bg-color);
+
+      ${BannerContent} {
+        p {
+          color: var(--banner-${$color}-text-color);
+        }
+
+        a:not([role='button']) {
+          color: var(--banner-${$color}-link-color);
+        }
+      }
+    `}
+`;
+const DismissButton = (0, styled_components_1.default)(Button_1.Button) `
+  width: var(--banner-button-size);
+  height: var(--banner-button-size);
+  padding: var(--banner-button-padding);
+`;
+//# sourceMappingURL=Banner.js.map

package/lib/components/Banner/variables.d.ts

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

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

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

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.bannerDarkMode = void 0;
+const styled_components_1 = require("styled-components");
+exports.bannerDarkMode = (0, styled_components_1.css) `
+  /**
+  * @tokens Banner
+  */
+ 
+  --banner-warning-text-color: var(--color-white); // @presenter Color
+`;
+//# sourceMappingURL=variables.dark.js.map

package/lib/components/Banner/variables.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.banner = void 0;
+const styled_components_1 = require("styled-components");
+exports.banner = (0, styled_components_1.css) `
+  /**
+  * @tokens Banner
+  */
+  --banner-button-size: 22px;
+  --banner-button-padding: 3px; // @presenter Spacing
+  --banner-button-font-size: var(--font-size-base);
+  --banner-button-border-radius: var(--border-radius);
+  --banner-button-padding-inline: 1px var(--spacing-sm);
+  --banner-button-line-height: var(--line-height-base); // @presenter LineHeight
+  --banner-button-icon-size: 14px;
+  --banner-button-icon-padding: 5px; // @presenter Spacing
+  --banner-button-icon-left-padding: 1px var(--spacing-sm) 1px 10px; // @presenter Spacing
+  --banner-button-icon-right-padding: 1px 10px 1px var(--spacing-sm); // @presenter Spacing
+  --banner-button-margin: 0 var(--spacing-xs); // @presenter Spacing
+  --banner-padding: var(--spacing-xs); // @presenter Spacing
+  --banner-link-decoration: var(--link-decoration-hover);
+  --banner-min-height: 38px;
+  --banner-gap: var(--spacing-xxs); // @presenter Spacing
+
+  --banner-info-bg-color: var(--color-info-base); // @presenter Color
+  --banner-info-text-color: var(--color-static-white); // @presenter Color
+  --banner-info-icon-color: var(--color-static-white); // @presenter Color
+  --banner-info-link-color: var(--banner-info-text-color); // @presenter Color
+
+  --banner-success-bg-color: var(--color-success-base); // @presenter Color
+  --banner-success-text-color: var(--color-static-white); // @presenter Color
+  --banner-success-icon-color: var(--color-static-white); // @presenter Color
+  --banner-success-link-color: var(--banner-success-text-color); // @presenter Color
+
+  --banner-warning-bg-color: var(--color-warning-base); // @presenter Color
+  --banner-warning-text-color: var(--color-black); // @presenter Color
+  --banner-warning-icon-color: var(--color-black); // @presenter Color
+  --banner-warning-link-color: var(--banner-warning-text-color); // @presenter Color
+
+  --banner-error-bg-color: var(--color-error-base); // @presenter Color
+  --banner-error-text-color: var(--color-static-white); // @presenter Color
+  --banner-error-icon-color: var(--color-static-white); // @presenter Color
+  --banner-error-link-color: var(--banner-error-text-color); // @presenter Color
+`;
+//# sourceMappingURL=variables.js.map

package/lib/components/Breadcrumbs/BreadcrumbDropdown.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { BreadcrumbItem } from '@redocly/config';
 import type { JSX } from 'react';
+import type { BreadcrumbItem } from '@redocly/config';
 type BreadcrumbDropdownProps = {
     children?: React.ReactNode;
     label: string;

package/lib/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,5 +1,5 @@
-import { BreadcrumbItem } from '@redocly/config';
 import type { JSX } from 'react';
+import type { BreadcrumbItem } from '@redocly/config';
 export declare function Breadcrumbs(props: {
     className?: string;
     additionalBreadcrumbs?: BreadcrumbItem[];

package/lib/components/Catalog/Catalog.d.ts

@@ -1,5 +1,5 @@
 import { JSX } from 'react';
-import { CatalogEntityConfig } from '@redocly/config';
+import type { CatalogEntityConfig } from '@redocly/config';
 import { BffCatalogEntityList, CatalogSwitcherItem, CatalogViewMode } from '../../core/types';
 type CatalogFiltersWithCounts = Record<string, {
     value: string;

package/lib/components/Catalog/CatalogCardView/CatalogCard.d.ts

@@ -1,5 +1,5 @@
 import { JSX } from 'react';
-import { CatalogEntityConfig } from '@redocly/config';
+import type { CatalogEntityConfig } from '@redocly/config';
 import { BffCatalogEntity } from '../../../core/types';
 export type CatalogCardProps = {
     entity: BffCatalogEntity;

package/lib/components/Catalog/CatalogCardView/CatalogCardView.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { CatalogEntityConfig } from '@redocly/config';
-import { BffCatalogEntity } from '../../../core/types';
+import type { CatalogEntityConfig } from '@redocly/config';
+import type { BffCatalogEntity } from '../../../core/types';
 export type CatalogCardViewProps = {
     entities: BffCatalogEntity[];
     catalogConfig: CatalogEntityConfig;

package/lib/components/Catalog/CatalogEntities.d.ts

@@ -1,5 +1,5 @@
 import { JSX } from 'react';
-import { CatalogEntityConfig } from '@redocly/config';
+import type { CatalogEntityConfig } from '@redocly/config';
 import { BffCatalogEntityList, SortOption } from '../../core/types';
 export type CatalogEntitiesProps = {
     catalogConfig: CatalogEntityConfig;

package/lib/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityApiDescriptionRelations.d.ts

@@ -1,6 +1,6 @@
 import { JSX } from 'react';
-import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
-import { BffCatalogEntity, BffCatalogRelatedEntity, SortOption } from '../../../../core/types';
+import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
+import type { BffCatalogEntity, BffCatalogRelatedEntity, SortOption } from '../../../../core/types';
 export type CatalogEntityApiDescriptionRelationsProps = {
     entity: BffCatalogEntity;
     catalogConfig: CatalogEntityConfig;

package/lib/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityDefaultRelations.d.ts

@@ -1,7 +1,7 @@
 import { JSX } from 'react';
-import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
+import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
 import type { ListType } from '../../../../core/types';
-import { BffCatalogEntity, BffCatalogRelatedEntity, SortOption } from '../../../../core/types';
+import type { BffCatalogEntity, BffCatalogRelatedEntity, SortOption } from '../../../../core/types';
 export type CatalogEntityDefaultRelationsProps = {
     entity: BffCatalogEntity;
     entitiesCatalogConfig: EntitiesCatalogConfig;

package/lib/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelations.d.ts

@@ -1,6 +1,6 @@
 import { JSX } from 'react';
-import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
-import { BffCatalogEntity, BffCatalogRelatedEntityList } from '../../../../core/types';
+import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
+import type { BffCatalogEntity, BffCatalogRelatedEntityList } from '../../../../core/types';
 export type CatalogEntityRelationsProps = {
     entity: BffCatalogEntity;
     entitiesCatalogConfig: EntitiesCatalogConfig;

package/lib/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable.d.ts

@@ -1,7 +1,7 @@
 import { JSX } from 'react';
-import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
+import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
 import type { ListType } from '../../../../core/types';
-import { BffCatalogEntity, BffCatalogRelatedEntity, SortOption } from '../../../../core/types';
+import type { BffCatalogEntity, BffCatalogRelatedEntity, SortOption } from '../../../../core/types';
 import { CatalogColumn } from '../../../../components/Catalog/CatalogTableView/CatalogTableView';
 export type CatalogEntityRelationsTableProps = {
     entity: BffCatalogEntity;

package/lib/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTableContent.d.ts

@@ -1,7 +1,7 @@
 import { JSX } from 'react';
-import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
+import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
 import type { ListType } from '../../../../core/types';
-import { BffCatalogRelatedEntity, SortOption } from '../../../../core/types';
+import type { BffCatalogRelatedEntity, SortOption } from '../../../../core/types';
 import { CatalogColumn } from '../../../../components/Catalog/CatalogTableView/CatalogTableView';
 export type CatalogEntityRelationsTableContentProps = {
     entitiesCatalogConfig: EntitiesCatalogConfig;

package/lib/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations.d.ts

@@ -1,6 +1,6 @@
 import { JSX } from 'react';
-import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
-import { BffCatalogEntity, BffCatalogRelatedEntity, SortOption } from '../../../../core/types';
+import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
+import type { BffCatalogEntity, BffCatalogRelatedEntity, SortOption } from '../../../../core/types';
 export type CatalogEntityTeamRelationsProps = {
     entity: BffCatalogEntity;
     catalogConfig: CatalogEntityConfig;

package/lib/components/Catalog/CatalogEntityIcon.d.ts

@@ -1,5 +1,5 @@
 import { JSX } from 'react';
-import { UiAccessibleConfig } from '@redocly/config';
+import type { UiAccessibleConfig } from '@redocly/config';
 export type CatalogEntityIconProps = {
     entityType: string;
     defaultColor?: boolean;

package/lib/components/Catalog/CatalogTableView/CatalogTableView.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
-import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
-import { SortOption } from '../../../core/types';
+import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
+import type { SortOption } from '../../../core/types';
 export type BaseEntity = {
     id: string;
     key: string;

package/lib/components/Catalog/CatalogTableView/CatalogTableViewRow.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
+import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
 export type BaseEntity = {
     id: string;
     key: string;

package/lib/components/LanguagePicker/LanguagePicker.js

@@ -40,6 +40,7 @@ const LanguageDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown).a
     },
 })) `
   display: none;
+  height: auto;
   @media screen and (min-width: ${utils_1.breakpoints.medium}) {
     display: block;
   }

package/lib/components/Navbar/Navbar.js

@@ -19,6 +19,7 @@ const ProductPicker_1 = require("../../components/Product/ProductPicker");
 const Button_1 = require("../../components/Button/Button");
 const MenuIcon_1 = require("../../icons/MenuIcon/MenuIcon");
 const CloseIcon_1 = require("../../icons/CloseIcon/CloseIcon");
+const Banner_1 = require("../../components/Banner/Banner");
 function Navbar({ className }) {
     var _a;
     const { isOpen, closeMobileMenu, openMobileMenu } = (0, hooks_1.useMobileMenu)(false);
@@ -34,6 +35,7 @@ function Navbar({ className }) {
     const hideSearch = (searchSettings === null || searchSettings === void 0 ? void 0 : searchSettings.hide) || ((searchSettings === null || searchSettings === void 0 ? void 0 : searchSettings.placement) && (searchSettings === null || searchSettings === void 0 ? void 0 : searchSettings.placement) !== 'navbar');
     const hideUserMenu = userMenuSettings === null || userMenuSettings === void 0 ? void 0 : userMenuSettings.hide;
     return (react_1.default.createElement(NavbarWrapper, { "data-component-name": "Navbar/Navbar", className: className },
+        react_1.default.createElement(Banner_1.Banner, null),
         isOpen && react_1.default.createElement(MenuMobile_1.MenuMobile, { hideUserProfile: !!hideUserMenu }),
         react_1.default.createElement(NavbarRow, null,
             logo && react_1.default.createElement(NavbarLogo_1.NavbarLogo, { config: logo }),
@@ -55,16 +57,15 @@ function Navbar({ className }) {
 }
 const NavbarWrapper = styled_components_1.default.nav `
   --text-color: var(--navbar-text-color);
+  height: calc(var(--navbar-height) + var(--banner-height));
+  transition: height 0.4s ease-out;
 
   position: sticky;
-  display: flex;
   top: 0;
-  height: var(--navbar-height);
+  display: flex;
+  flex-direction: column;
   flex-shrink: 0;
-  align-items: center;
   box-sizing: border-box;
-  padding: var(--navbar-padding);
-  border: var(--navbar-border);
   font-size: var(--navbar-font-size);
   font-family: var(--navbar-font-family);
   z-index: var(--z-index-raised);
@@ -88,7 +89,14 @@ const NavbarRow = styled_components_1.default.div `
   justify-content: space-between;
   width: 100%;
   gap: 8px;
+  height: var(--navbar-height);
   max-width: var(--navbar-container-max-width);
+  padding: var(--navbar-padding);
+  border: var(--navbar-border);
+  background: var(--navbar-bg-color);
+  box-sizing: border-box;
+  margin-top: var(--banner-height);
+  transition: margin-top 0.5s ease-out;
 
   @media screen and (min-width: ${utils_1.breakpoints.max}) {
     max-width: var(--container-max-width);

package/lib/components/Search/SearchAiConversationInput.js

@@ -63,7 +63,7 @@ function SearchAiConversationInput({ isGeneratingResponse, onMessageSent, classN
         onMessageSent(query);
     };
     const handleOnKeyDown = (e) => {
-        if (e.key === 'Enter' && !isGeneratingResponse) {
+        if (e.key === 'Enter' && !e.nativeEvent.isComposing && !isGeneratingResponse) {
             if (multiline && e.shiftKey) {
                 return; // Allow new line in textarea
             }

package/lib/core/hooks/catalog/use-catalog-table-view-row.d.ts

@@ -1,4 +1,4 @@
-import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
+import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
 type CatalogTableViewRowProps = {
     entityKey: string;
     entityType: string;

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

@@ -15,6 +15,7 @@ const fallbacks = {
      **/
     useOtelTelemetry: () => ({ send: () => { } }),
     useBreadcrumbs: () => ({ breadcrumbs: [], siblings: undefined }),
+    useBanner: () => ({ banner: undefined, dismissBanner: () => { } }),
     useCodeHighlight: () => ({ highlight: (rawContent) => rawContent }),
     useUserMenu: () => ({}),
     usePageData: () => null,

package/lib/core/styles/dark.js

@@ -16,6 +16,7 @@ const variables_dark_11 = require("../../markdoc/components/Cards/variables.dark
 const variables_dark_12 = require("../../components/Catalog/variables.dark");
 const variables_dark_13 = require("../../components/PageActions/variables.dark");
 const variables_dark_14 = require("../../components/Tooltip/variables.dark");
+const variables_dark_15 = require("../../components/Banner/variables.dark");
 const replayDarkMode = (0, styled_components_1.css) `
   /**
     * @tokens Replay Colors
@@ -327,6 +328,7 @@ exports.darkMode = (0, styled_components_1.css) `
   ${variables_dark_12.catalogDarkMode}
   ${variables_dark_13.pageActionsDarkMode}
   ${variables_dark_14.tooltipDarkMode}
+  ${variables_dark_15.bannerDarkMode}
 
   /**
     * @tokens Dark Theme Scrollbar Config

package/lib/core/styles/global.js

@@ -28,21 +28,22 @@ const variables_23 = require("../../components/Menu/variables");
 const variables_24 = require("../../components/CodeBlock/variables");
 const variables_25 = require("../../components/Product/variables");
 const variables_26 = require("../../components/Markdown/variables");
-const variables_27 = require("../../markdoc/components/Tabs/variables");
-const variables_28 = require("../../markdoc/components/Mermaid/variables");
-const variables_29 = require("../../components/LastUpdated/variables");
-const variables_30 = require("../../components/Logo/variables");
-const variables_31 = require("../../components/StatusCode/variables");
-const variables_32 = require("../../components/Segmented/variables");
-const variables_33 = require("../../components/UserMenu/variables");
-const variables_34 = require("../../components/Tags/variables");
-const variables_35 = require("../../components/VersionPicker/variables");
-const variables_36 = require("../../components/DatePicker/variables");
-const variables_37 = require("../../components/Switch/variables");
-const variables_38 = require("../../markdoc/components/Cards/variables");
-const variables_39 = require("../../markdoc/components/CodeWalkthrough/variables");
-const variables_40 = require("../../components/SkipContent/variables");
-const variables_41 = require("../../components/PageActions/variables");
+const variables_27 = require("../../components/Banner/variables");
+const variables_28 = require("../../markdoc/components/Tabs/variables");
+const variables_29 = require("../../markdoc/components/Mermaid/variables");
+const variables_30 = require("../../components/LastUpdated/variables");
+const variables_31 = require("../../components/Logo/variables");
+const variables_32 = require("../../components/StatusCode/variables");
+const variables_33 = require("../../components/Segmented/variables");
+const variables_34 = require("../../components/UserMenu/variables");
+const variables_35 = require("../../components/Tags/variables");
+const variables_36 = require("../../components/VersionPicker/variables");
+const variables_37 = require("../../components/DatePicker/variables");
+const variables_38 = require("../../components/Switch/variables");
+const variables_39 = require("../../markdoc/components/Cards/variables");
+const variables_40 = require("../../markdoc/components/CodeWalkthrough/variables");
+const variables_41 = require("../../components/SkipContent/variables");
+const variables_42 = require("../../components/PageActions/variables");
 const dark_1 = require("./dark");
 const themeColors = (0, styled_components_1.css) `
   /* === Palette === */
@@ -1216,32 +1217,33 @@ exports.styles = (0, styled_components_1.css) `
     ${apiReferenceDocs}
     ${variables_11.apiReferencePanels}
     ${badges}
+    ${variables_27.banner}
     ${borders}
     ${variables_5.breadcrumbs}
     ${variables_19.button}
     ${variables_20.aiAssistantButton}
     ${variables_20.connectMCPButton}
-    ${variables_38.cards}
+    ${variables_39.cards}
     ${variables_8.catalog}
     ${variables_10.catalogClassic}
     ${variables_24.code}
-    ${variables_39.codeWalkthrough}
+    ${variables_40.codeWalkthrough}
     ${docsDropdown}
     ${variables_14.dropdown}
     ${error}
     ${variables_9.filter}
     ${variables_18.footer}
     ${headingsTypography}
-    ${variables_34.httpTag}
+    ${variables_35.httpTag}
     ${inputs}
     ${variables_1.languagePicker}
-    ${variables_29.lastUpdated}
+    ${variables_30.lastUpdated}
     ${links}
     ${loadProgressBar}
-    ${variables_30.logo}
+    ${variables_31.logo}
     ${variables_26.markdown}
-    ${variables_27.markdownTabs}
-    ${variables_28.mermaid}
+    ${variables_28.markdownTabs}
+    ${variables_29.mermaid}
     ${variables_23.menu}
     ${variables_23.mobileMenu}
     ${modal}
@@ -1259,23 +1261,23 @@ exports.styles = (0, styled_components_1.css) `
     ${variables_7.toc}
     ${variables_15.tooltip}
     ${typography}
-    ${variables_33.userMenu}
-    ${variables_35.versionPicker}
+    ${variables_34.userMenu}
+    ${variables_36.versionPicker}
     ${zIndexDepth}
     ${scorecardColors}
-    ${variables_31.statusCode}
+    ${variables_32.statusCode}
     ${tab}
     ${icon}
     ${tree}
-    ${variables_32.segmented}
-    ${variables_37.switcher}
+    ${variables_33.segmented}
+    ${variables_38.switcher}
     ${variables_16.checkbox}
     ${variables_3.feedback}
     ${variables_2.scorecard}
-    ${variables_36.datePicker}
+    ${variables_37.datePicker}
     ${replay}
-    ${variables_40.skipContent}
-    ${variables_41.pageActions}
+    ${variables_41.skipContent}
+    ${variables_42.pageActions}
 
     background-color: var(--bg-color);
     color: var(--text-color-primary);

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

@@ -1,6 +1,6 @@
 import { InfiniteData, UseInfiniteQueryResult } from '@tanstack/react-query';
-import { CatalogEntityConfig, LayoutVariant } from '@redocly/config';
 import { ENTITY_RELATION_TYPES } from '@redocly/config';
+import type { CatalogEntityConfig, LayoutVariant } from '@redocly/config';
 import type { CatalogFilterConfig } from '../../config';
 export type SortOption = 'title' | '-title' | 'type' | '-type';
 export type UseCatalogResponse = {

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

@@ -1,5 +1,5 @@
 import type { AsyncApiRealmUI } from '@redocly/realm-asyncapi-sdk';
-import type { CatalogEntityConfig, PageData, PageProps, ResolvedNavItemWithLink, Version } from '@redocly/config';
+import type { BannerConfig, CatalogEntityConfig, PageData, PageProps, ResolvedNavItemWithLink, Version } from '@redocly/config';
 import type { ShikiTransformer } from '@shikijs/types';
 import type { Callback, TFunction as TFunc } from 'i18next';
 import type { To, Location, NavigateFunction } from 'react-router-dom';
@@ -60,6 +60,10 @@ export type ThemeHooks = {
         breadcrumbs: BreadcrumbItem[];
         currentItemSiblings?: BreadcrumbItem[];
     };
+    useBanner: () => {
+        banner: BannerConfig | undefined;
+        dismissBanner: (content: string) => void;
+    };
     useSearch: (product?: string, autoSearchDisabled?: boolean, searchSessionId?: string) => {
         query: string;
         setQuery: React.Dispatch<React.SetStateAction<string>>;

package/lib/core/utils/type-guards.d.ts

@@ -1,4 +1,4 @@
-import { ResolvedNavItem, ResolvedNavLinkItem } from '@redocly/config';
+import type { ResolvedNavItem, ResolvedNavLinkItem } from '@redocly/config';
 export declare function isUndefined<T>(value: T | undefined): value is undefined;
 export declare function isNull<T>(value: T | null): value is null;
 export declare function isString<T>(value: T | string): value is string;