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

package/lib/index.d.ts

@@ -44,6 +44,7 @@ export * from './components/Footer/Footer';
 export * from './components/Footer/FooterColumn';
 export * from './components/Footer/FooterCopyright';
 export * from './components/Footer/FooterItem';
+export * from './components/Banner/Banner';
 export * from './components/Typography/CompactTypography';
 export * from './components/Typography/Emphasis';
 export * from './components/Typography/H1';

package/lib/index.js

@@ -89,6 +89,8 @@ __exportStar(require("./components/Footer/Footer"), exports);
 __exportStar(require("./components/Footer/FooterColumn"), exports);
 __exportStar(require("./components/Footer/FooterCopyright"), exports);
 __exportStar(require("./components/Footer/FooterItem"), exports);
+/* Banner */
+__exportStar(require("./components/Banner/Banner"), exports);
 /* Typography */
 __exportStar(require("./components/Typography/CompactTypography"), exports);
 __exportStar(require("./components/Typography/Emphasis"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.60.0-next.5",
+  "version": "0.60.0-next.7",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -32,8 +32,7 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-router-dom": "^6.21.1",
-    "styled-components": "^4.1.1 || ^5.3.11 || ^6.0.0",
-    "styled-system": "^5.1.5"
+    "styled-components": "^4.1.1 || ^5.3.11 || ^6.0.0"
   },
   "devDependencies": {
     "@markdoc/markdoc": "0.5.2",
@@ -49,27 +48,22 @@
     "@types/react": "^19.1.4",
     "@types/react-dom": "^19.1.4",
     "@types/styled-components": "5.1.34",
-    "@types/styled-system": "5.1.22",
-    "@vitest/coverage-v8": "^4.0.9",
+    "@vitest/coverage-v8": "^4.0.10",
     "@vitest/ui": "3.2.4",
     "concurrently": "7.6.0",
-    "json-schema-to-ts": "2.7.2",
-    "npm-run-all2": "5.0.2",
-    "react-refresh": "0.14.2",
     "react-router-dom": "^6.21.1",
     "resize-observer-polyfill": "1.5.1",
     "rimraf": "5.0.7",
     "styled-components": "5.3.11",
-    "styled-system": "5.1.5",
     "ts-node": "10.9.2",
-    "ts-node-dev": "2.0.0",
     "tsc-alias": "1.8.16",
     "tsconfig-paths": "4.2.0",
     "tsconfig-paths-webpack-plugin": "3.5.2",
     "typescript": "5.9.3",
-    "vitest": "4.0.9",
+    "vitest": "4.0.10",
     "vitest-when": "0.6.2",
-    "webpack": "5.94.0"
+    "webpack": "5.94.0",
+    "@redocly/realm-asyncapi-sdk": "0.6.0-next.1"
   },
   "dependencies": {
     "@tanstack/react-query": "5.62.3",
@@ -87,8 +81,7 @@
     "openapi-sampler": "1.6.2",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
-    "@redocly/config": "0.40.0",
-    "@redocly/realm-asyncapi-sdk": "0.6.0-next.1"
+    "@redocly/config": "0.40.0"
   },
   "scripts": {
     "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",

package/src/components/Banner/Banner.tsx

@@ -0,0 +1,179 @@
+import React, { useRef, useEffect, useState } from 'react';
+import styled, { css } from 'styled-components';
+
+import type { BannerConfig } from '@redocly/config';
+import type { JSX } from 'react';
+
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { Markdown } from '@redocly/theme/components/Markdown/Markdown';
+import { CloseIcon } from '@redocly/theme/icons/CloseIcon/CloseIcon';
+import { Button } from '@redocly/theme/components/Button/Button';
+
+type BannerColor = 'info' | 'success' | 'warning' | 'error';
+
+type BannerProps = {
+  className?: string;
+};
+
+function setBannerHeight(height: number): void {
+  document.documentElement.style.setProperty('--banner-height', `${height}px`);
+}
+
+export function Banner({ className }: BannerProps): JSX.Element | null {
+  const { useBanner, useMarkdownText } = useThemeHooks();
+  const { banner, dismissBanner } = useBanner();
+  const [displayBanner, setDisplayBanner] = useState<BannerConfig | undefined>(undefined);
+  const [isVisible, setIsVisible] = useState(false);
+  const markdownContent = useMarkdownText(displayBanner?.content || '');
+  const bannerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (banner) {
+      setDisplayBanner(banner);
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          setIsVisible(true);
+        });
+      });
+    } else {
+      setIsVisible(false);
+      const timer = setTimeout(() => {
+        setDisplayBanner(undefined);
+      }, 400);
+      return () => clearTimeout(timer);
+    }
+  }, [banner]);
+
+  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 = (): void => {
+      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 as BannerConfig & { color?: BannerColor }).color as BannerColor) || 'info';
+
+  return (
+    <BannerWrapper
+      ref={bannerRef}
+      data-component-name="Banner/Banner"
+      className={className}
+      $color={bannerColor}
+      $isVisible={isVisible}
+    >
+      <BannerContent>
+        <Markdown compact>{markdownContent}</Markdown>
+      </BannerContent>
+      {displayBanner.dismissible && (
+        <DismissButton
+          variant="ghost"
+          size="var(--banner-button-size)"
+          icon={<CloseIcon color={`var(--banner-${bannerColor}-icon-color)`} size="16px" />}
+          onClick={() => dismissBanner(displayBanner.content)}
+          aria-label="Dismiss banner"
+        />
+      )}
+    </BannerWrapper>
+  );
+}
+
+const BannerContent = styled.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.div<{ $color?: BannerColor; $isVisible?: boolean }>`
+  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 &&
+    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 = styled(Button)`
+  width: var(--banner-button-size);
+  height: var(--banner-button-size);
+  padding: var(--banner-button-padding);
+`;

package/src/components/Banner/variables.dark.ts

@@ -0,0 +1,10 @@
+import { css } from 'styled-components';
+
+export const bannerDarkMode = css`
+  /**
+  * @tokens Banner
+  */
+ 
+  --banner-warning-text-color: var(--color-white); // @presenter Color
+`;
+

package/src/components/Banner/variables.ts

@@ -0,0 +1,43 @@
+import { css } from 'styled-components';
+
+export const banner = 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
+`;
+

package/src/components/Breadcrumbs/BreadcrumbDropdown.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import styled, { css } from 'styled-components';
-import { BreadcrumbItem } from '@redocly/config';
 
 import type { JSX } from 'react';
+import type { BreadcrumbItem } from '@redocly/config';
 
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { Dropdown } from '@redocly/theme/components/Dropdown/Dropdown';

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
-import { BreadcrumbItem } from '@redocly/config';
 
 import type { JSX } from 'react';
+import type { BreadcrumbItem } from '@redocly/config';
 
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { Breadcrumb } from '@redocly/theme/components/Breadcrumbs/Breadcrumb';

package/src/components/Catalog/Catalog.tsx

@@ -1,6 +1,7 @@
 import React, { JSX } from 'react';
 import styled from 'styled-components';
-import { CatalogEntityConfig } from '@redocly/config';
+
+import type { CatalogEntityConfig } from '@redocly/config';
 
 import {
   BffCatalogEntityList,

package/src/components/Catalog/CatalogCardView/CatalogCard.tsx

@@ -1,6 +1,7 @@
 import React, { JSX } from 'react';
 import styled from 'styled-components';
-import { CatalogEntityConfig } from '@redocly/config';
+
+import type { CatalogEntityConfig } from '@redocly/config';
 
 import { BffCatalogEntity } from '@redocly/theme/core/types';
 import { useThemeHooks } from '@redocly/theme/core/hooks';

package/src/components/Catalog/CatalogCardView/CatalogCardView.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import styled from 'styled-components';
-import { CatalogEntityConfig } from '@redocly/config';
 
-import { BffCatalogEntity } from '@redocly/theme/core/types';
+import type { CatalogEntityConfig } from '@redocly/config';
+import type { BffCatalogEntity } from '@redocly/theme/core/types';
+
 import { CatalogCard } from '@redocly/theme/components/Catalog/CatalogCardView/CatalogCard';
 
 export type CatalogCardViewProps = {

package/src/components/Catalog/CatalogEntities.tsx

@@ -1,5 +1,6 @@
 import React, { JSX, useEffect } from 'react';
-import { CatalogEntityConfig } from '@redocly/config';
+
+import type { CatalogEntityConfig } from '@redocly/config';
 
 import { BffCatalogEntity, BffCatalogEntityList, SortOption } from '@redocly/theme/core/types';
 import { useThemeHooks, useCatalogEntities } from '@redocly/theme/core/hooks';

package/src/components/Catalog/CatalogEntity/CatalogEntity.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
-import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
 import { Route, Routes } from 'react-router-dom';
 
+import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
 import type {
   BffCatalogEntity,
   BffCatalogRelatedEntity,

package/src/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityApiDescriptionRelations.tsx

@@ -1,10 +1,15 @@
 import React, { JSX, ReactNode } from 'react';
 import styled from 'styled-components';
-import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
+
+import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
+import type {
+  BffCatalogEntity,
+  BffCatalogRelatedEntity,
+  SortOption,
+} from '@redocly/theme/core/types';
 
 import { Tabs, TabsSize } from '@redocly/theme/markdoc/components/Tabs/Tabs';
 import { EntityTypeIcon } from '@redocly/theme/icons/EntityTypeIcon/EntityTypeIcon';
-import { BffCatalogEntity, BffCatalogRelatedEntity, SortOption } from '@redocly/theme/core/types';
 import { CatalogEntityDefaultRelations } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityDefaultRelations';
 import { MoleculesIcon } from '@redocly/theme/icons/MoleculesIcon/MoleculesIcon';
 import { NetworkIcon } from '@redocly/theme/icons/NetworkIcon/NetworkIcon';

package/src/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityDefaultRelations.tsx

@@ -1,9 +1,13 @@
 import React, { JSX } from 'react';
-import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
 
+import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
 import type { ListType } from '@redocly/theme/core/types';
+import type {
+  BffCatalogEntity,
+  BffCatalogRelatedEntity,
+  SortOption,
+} from '@redocly/theme/core/types';
 
-import { BffCatalogEntity, BffCatalogRelatedEntity, SortOption } from '@redocly/theme/core/types';
 import { CatalogColumn } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableView';
 import { CatalogEntityCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogEntityCell';
 import { CatalogEntityRelationsTable } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable';

package/src/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelations.tsx

@@ -1,7 +1,8 @@
 import React, { JSX, useState, useEffect } from 'react';
-import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
 
-import { BffCatalogEntity, BffCatalogRelatedEntityList } from '@redocly/theme/core/types';
+import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
+import type { BffCatalogEntity, BffCatalogRelatedEntityList } from '@redocly/theme/core/types';
+
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { CatalogEntityDefaultRelations } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityDefaultRelations';
 import { CatalogEntityTeamRelations } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations';

package/src/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable.tsx

@@ -1,10 +1,14 @@
 import React, { JSX } from 'react';
 import styled from 'styled-components';
-import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
 
+import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
 import type { ListType } from '@redocly/theme/core/types';
+import type {
+  BffCatalogEntity,
+  BffCatalogRelatedEntity,
+  SortOption,
+} from '@redocly/theme/core/types';
 
-import { BffCatalogEntity, BffCatalogRelatedEntity, SortOption } from '@redocly/theme/core/types';
 import { CatalogColumn } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableView';
 import { CatalogActionsRow } from '@redocly/theme/components/Catalog/CatalogActionsRow';
 import { CatalogEntityRelationsTableContent } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTableContent';

package/src/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTableContent.tsx

@@ -1,10 +1,10 @@
 import React, { JSX } from 'react';
-import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
 
+import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
 import type { ListType } from '@redocly/theme/core/types';
+import type { BffCatalogRelatedEntity, SortOption } from '@redocly/theme/core/types';
 
 import { ArrowDownIcon } from '@redocly/theme/icons/ArrowDownIcon/ArrowDownIcon';
-import { BffCatalogRelatedEntity, SortOption } from '@redocly/theme/core/types';
 import { LoadMore } from '@redocly/theme/components/LoadMore/LoadMore';
 import {
   CatalogColumn,

package/src/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations.tsx

@@ -1,11 +1,16 @@
 import React, { JSX, ReactNode } from 'react';
 import styled from 'styled-components';
-import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
+
+import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
+import type {
+  BffCatalogEntity,
+  BffCatalogRelatedEntity,
+  SortOption,
+} from '@redocly/theme/core/types';
 
 import { Tabs, TabsSize } from '@redocly/theme/markdoc/components/Tabs/Tabs';
 import { PeopleIcon } from '@redocly/theme/icons/PeopleIcon/PeopleIcon';
 import { EntityTypeIcon } from '@redocly/theme/icons/EntityTypeIcon/EntityTypeIcon';
-import { BffCatalogEntity, BffCatalogRelatedEntity, SortOption } from '@redocly/theme/core/types';
 import { CatalogColumn } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableView';
 import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { CatalogEntityRelationsTable } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable';

package/src/components/Catalog/CatalogEntityIcon.tsx

@@ -1,5 +1,6 @@
 import React, { JSX } from 'react';
-import { UiAccessibleConfig } from '@redocly/config';
+
+import type { UiAccessibleConfig } from '@redocly/config';
 
 import { EntityType } from '@redocly/theme/core/types';
 import { CodeIcon } from '@redocly/theme/icons/CodeIcon/CodeIcon';

package/src/components/Catalog/CatalogTableView/CatalogTableView.tsx

@@ -1,8 +1,9 @@
 import React, { ReactNode } from 'react';
 import styled from 'styled-components';
-import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
 
-import { SortOption, BffCatalogEntity } from '@redocly/theme/core/types';
+import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
+import type { SortOption, BffCatalogEntity } from '@redocly/theme/core/types';
+
 import { CatalogOwnersCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogOwnersCell';
 import { CatalogDomainsCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogDomainsCell';
 import { CatalogEntityCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogEntityCell';

package/src/components/Catalog/CatalogTableView/CatalogTableViewRow.tsx

@@ -1,8 +1,9 @@
 import React, { ReactNode } from 'react';
 import styled from 'styled-components';
-import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
 
-import { BffCatalogEntity } from '@redocly/theme/core/types';
+import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
+import type { BffCatalogEntity } from '@redocly/theme/core/types';
+
 import { CatalogOwnersCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogOwnersCell';
 import { CatalogDomainsCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogDomainsCell';
 import { CatalogEntityCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogEntityCell';

package/src/components/LanguagePicker/LanguagePicker.tsx

@@ -64,6 +64,7 @@ const LanguageDropdown = styled(Dropdown).attrs(() => ({
   },
 }))`
   display: none;
+  height: auto;
   @media screen and (min-width: ${breakpoints.medium}) {
     display: block;
   }

package/src/components/Navbar/Navbar.tsx

@@ -17,6 +17,7 @@ import { ProductPicker } from '@redocly/theme/components/Product/ProductPicker';
 import { Button } from '@redocly/theme/components/Button/Button';
 import { MenuIcon } from '@redocly/theme/icons/MenuIcon/MenuIcon';
 import { CloseIcon } from '@redocly/theme/icons/CloseIcon/CloseIcon';
+import { Banner } from '@redocly/theme/components/Banner/Banner';
 
 export type NavbarProps = {
   className?: string;
@@ -43,6 +44,7 @@ export function Navbar({ className }: NavbarProps): JSX.Element | null {
 
   return (
     <NavbarWrapper data-component-name="Navbar/Navbar" className={className}>
+      <Banner />
       {isOpen && <MenuMobile hideUserProfile={!!hideUserMenu} />}
       <NavbarRow>
         {logo && <NavbarLogo config={logo} />}
@@ -76,16 +78,15 @@ export function Navbar({ className }: NavbarProps): JSX.Element | null {
 
 const NavbarWrapper = styled.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);
@@ -110,7 +111,14 @@ const NavbarRow = styled.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: ${breakpoints.max}) {
     max-width: var(--container-max-width);

package/src/components/Search/SearchAiConversationInput.tsx

@@ -49,7 +49,7 @@ export function SearchAiConversationInput({
   const handleOnKeyDown = (
     e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>,
   ): void => {
-    if (e.key === 'Enter' && !isGeneratingResponse) {
+    if (e.key === 'Enter' && !e.nativeEvent.isComposing && !isGeneratingResponse) {
       if (multiline && e.shiftKey) {
         return; // Allow new line in textarea
       }

package/src/core/hooks/__mocks__/use-theme-hooks.ts

@@ -17,6 +17,10 @@ export const useThemeHooks = vi.fn(() => ({
     sendCodeSnippetReportedMessage: vi.fn(),
   })),
   useBreadcrumbs: vi.fn().mockReturnValue({ breadcrumbs: [], siblings: undefined }),
+  useBanner: vi.fn(() => ({
+    banner: undefined,
+    dismissBanner: vi.fn(),
+  })),
   usePageSharedData: vi.fn().mockReturnValue({}),
   useCatalogClassic: vi.fn(() => ({
     groups: [],

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

@@ -1,4 +1,4 @@
-import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
+import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
 
 import { getPathPrefix } from '../../utils/urls';
 

package/src/core/hooks/use-theme-hooks.ts

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

package/src/core/styles/dark.ts

@@ -14,6 +14,7 @@ import { cardsDarkMode } from '@redocly/theme/markdoc/components/Cards/variables
 import { catalogDarkMode } from '@redocly/theme/components/Catalog/variables.dark';
 import { pageActionsDarkMode } from '@redocly/theme/components/PageActions/variables.dark';
 import { tooltipDarkMode } from '@redocly/theme/components/Tooltip/variables.dark';
+import { bannerDarkMode } from '@redocly/theme/components/Banner/variables.dark';
 
 const replayDarkMode = css`
   /**
@@ -328,6 +329,7 @@ export const darkMode = css`
   ${catalogDarkMode}
   ${pageActionsDarkMode}
   ${tooltipDarkMode}
+  ${bannerDarkMode}
 
   /**
     * @tokens Dark Theme Scrollbar Config