@redocly/theme 0.70.0-next.1 → 0.70.0-next.11

package/lib/components/NavigationTabs/NavigationTab.js

@@ -0,0 +1,93 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationTab = NavigationTab;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const hooks_1 = require("../../core/hooks");
+const Link_1 = require("../../components/Link/Link");
+const Dropdown_1 = require("../../components/Dropdown/Dropdown");
+const NavigationTabMenu_1 = require("../../components/NavigationTabs/NavigationTabMenu");
+const NavigationTabContent_1 = require("../../components/NavigationTabs/NavigationTabContent");
+const ChevronDownIcon_1 = require("../../icons/ChevronDownIcon/ChevronDownIcon");
+function NavigationTab({ tab, className }) {
+    const { useTelemetry } = (0, hooks_1.useThemeHooks)();
+    const telemetry = useTelemetry();
+    const active = !!tab.active;
+    const menuItems = tab.type === 'group' ? tab.items : [];
+    const isGroup = tab.type === 'group' && menuItems.length > 0;
+    const linkItem = tab.type === 'link' ? tab : undefined;
+    if (!(linkItem === null || linkItem === void 0 ? void 0 : linkItem.link) && !isGroup) {
+        return null;
+    }
+    const content = (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(NavigationTabContent_1.NavigationTabContent, { item: tab }),
+        isGroup ? react_1.default.createElement(NavigationTabChevron, { size: "10px" }) : null));
+    if (isGroup) {
+        return (react_1.default.createElement(NavigationTabWrapper, { "data-component-name": "NavigationTabs/NavigationTab", className: className },
+            react_1.default.createElement(NavigationTabDropdown, { triggerEvent: "hover", portalled: true, trigger: react_1.default.createElement(NavigationTabTrigger, { $active: active, "aria-current": active ? 'true' : undefined, onClick: () => telemetry.sendNavbarMenuItemClickedMessage((0, utils_1.getNavbarItemClickedPayload)(tab.type)) }, content) },
+                react_1.default.createElement(NavigationTabMenu_1.NavigationTabMenu, { items: menuItems }))));
+    }
+    return (react_1.default.createElement(NavigationTabWrapper, { "data-component-name": "NavigationTabs/NavigationTab", className: className },
+        react_1.default.createElement(NavigationTabLink, { as: Link_1.Link, to: linkItem === null || linkItem === void 0 ? void 0 : linkItem.link, $active: active, external: linkItem === null || linkItem === void 0 ? void 0 : linkItem.external, target: linkItem === null || linkItem === void 0 ? void 0 : linkItem.target, "aria-current": active ? 'page' : undefined, onClick: () => telemetry.sendNavbarMenuItemClickedMessage((0, utils_1.getNavbarItemClickedPayload)(tab.type)) }, content)));
+}
+const NavigationTabChevron = (0, styled_components_1.default)(ChevronDownIcon_1.ChevronDownIcon) `
+  flex-shrink: 0;
+`;
+const NavigationTabWrapper = styled_components_1.default.li `
+  list-style: none;
+  display: inline-flex;
+  align-items: stretch;
+  flex-shrink: 0;
+`;
+const NavigationTabDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown) `
+  display: inline-flex;
+  align-items: stretch;
+  height: 100%;
+`;
+const NavigationTabLink = styled_components_1.default.div `
+  display: inline-flex;
+  align-items: center;
+  gap: var(--navigation-tabs-item-content-gap);
+  box-sizing: border-box;
+  height: 100%;
+  padding: var(--navigation-tabs-item-padding);
+  font-size: var(--navigation-tabs-item-font-size);
+  line-height: var(--navigation-tabs-item-line-height);
+  white-space: nowrap;
+  text-decoration: none;
+  transition: border-color var(--navigation-tabs-item-transition);
+
+  font-weight: ${({ $active }) => $active
+    ? 'var(--navigation-tabs-item-font-weight-active)'
+    : 'var(--navigation-tabs-item-font-weight)'};
+  color: ${({ $active }) => $active
+    ? 'var(--navigation-tabs-item-text-color-active)'
+    : 'var(--navigation-tabs-item-text-color)'};
+  border-bottom: ${({ $active }) => $active
+    ? 'var(--navigation-tabs-item-bottom-border-active)'
+    : 'var(--navigation-tabs-item-bottom-border)'};
+
+  &:hover {
+    color: var(--navigation-tabs-item-text-color-hover);
+    border-bottom: ${({ $active }) => !$active && 'var(--navigation-tabs-item-bottom-border-hover)'};
+  }
+
+  &:focus-visible {
+    outline: 1px solid var(--navigation-tabs-item-border-color-focused);
+    outline-offset: 2px;
+    border-radius: var(--navigation-tabs-item-border-radius);
+  }
+`;
+const NavigationTabTrigger = (0, styled_components_1.default)(NavigationTabLink).attrs({ as: 'button', type: 'button' }) `
+  background: none;
+  border-top: none;
+  border-left: none;
+  border-right: none;
+  font-family: inherit;
+  cursor: pointer;
+`;
+//# sourceMappingURL=NavigationTab.js.map

package/lib/components/NavigationTabs/NavigationTabContent.d.ts

@@ -0,0 +1,7 @@
+import type { JSX } from 'react';
+import type { NavigationTabRowItem } from '../../core/types';
+export type NavigationTabContentProps = {
+    item: NavigationTabRowItem;
+    className?: string;
+};
+export declare function NavigationTabContent({ item, className }: NavigationTabContentProps): JSX.Element;

package/lib/components/NavigationTabs/NavigationTabContent.js

@@ -0,0 +1,50 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationTabContent = NavigationTabContent;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const hooks_1 = require("../../core/hooks");
+const GenericIcon_1 = require("../../icons/GenericIcon/GenericIcon");
+const LaunchIcon_1 = require("../../icons/LaunchIcon/LaunchIcon");
+function NavigationTabContent({ item, className }) {
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const label = translate(item.labelTranslationKey, item.label);
+    return (react_1.default.createElement(NavigationTabContentWrapper, { "data-component-name": "NavigationTabs/NavigationTabContent", className: className },
+        (item.icon || item.srcSet) && react_1.default.createElement(NavigationTabIcon, { icon: item.icon, srcSet: item.srcSet }),
+        react_1.default.createElement(NavigationTabLabel, { "data-label": label, "data-translation-key": item.labelTranslationKey }, label),
+        'external' in item && item.external ? react_1.default.createElement(NavigationTabExternalIcon, { size: "10px" }) : null));
+}
+const NavigationTabContentWrapper = styled_components_1.default.span `
+  display: inline-flex;
+  align-items: center;
+  gap: var(--navigation-tabs-item-content-gap);
+`;
+const NavigationTabIcon = (0, styled_components_1.default)(GenericIcon_1.GenericIcon) `
+  --icon-width: var(--navigation-tabs-item-icon-size);
+  --icon-height: var(--navigation-tabs-item-icon-size);
+  flex-shrink: 0;
+`;
+const NavigationTabLabel = styled_components_1.default.span `
+  display: inline-flex;
+  flex-direction: column;
+  cursor: pointer;
+  vertical-align: middle;
+
+  &::after {
+    content: attr(data-label);
+    height: 0;
+    overflow: hidden;
+    visibility: hidden;
+    pointer-events: none;
+    font-weight: var(--navigation-tabs-item-label-font-weight-active);
+  }
+`;
+const NavigationTabExternalIcon = (0, styled_components_1.default)(LaunchIcon_1.LaunchIcon) `
+  margin-left: var(--navigation-tabs-item-external-icon-margin-left);
+  flex-shrink: 0;
+`;
+//# sourceMappingURL=NavigationTabContent.js.map

package/lib/components/NavigationTabs/NavigationTabMenu.d.ts

@@ -0,0 +1,7 @@
+import type { JSX } from 'react';
+import type { NavigationTabItem } from '../../core/types';
+export type NavigationTabMenuProps = {
+    items: NavigationTabItem[];
+    className?: string;
+};
+export declare function NavigationTabMenu({ items, className }: NavigationTabMenuProps): JSX.Element;

package/lib/components/NavigationTabs/NavigationTabMenu.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationTabMenu = NavigationTabMenu;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const DropdownMenu_1 = require("../../components/Dropdown/DropdownMenu");
+const DropdownMenuItem_1 = require("../../components/Dropdown/DropdownMenuItem");
+const NavigationTabContent_1 = require("../../components/NavigationTabs/NavigationTabContent");
+function NavigationTabMenu({ items, className }) {
+    return (react_1.default.createElement(NavigationTabMenuWrapper, { "data-component-name": "NavigationTabs/NavigationTabMenu", className: className },
+        react_1.default.createElement(DropdownMenu_1.DropdownMenu, null, items.map((item, index) => (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: `${item.label}_${index}`, to: item.link, external: item.external, "data-translation-key": item.labelTranslationKey, active: item.active, "aria-current": item.active ? 'page' : undefined },
+            react_1.default.createElement(NavigationTabContent_1.NavigationTabContent, { item: item })))))));
+}
+const NavigationTabMenuWrapper = styled_components_1.default.div ``;
+//# sourceMappingURL=NavigationTabMenu.js.map

package/lib/components/NavigationTabs/NavigationTabs.d.ts

@@ -0,0 +1,7 @@
+import type { JSX } from 'react';
+import type { NavigationTabsConfig } from '../../core/types';
+export type NavigationTabsProps = {
+    config?: NavigationTabsConfig;
+    className?: string;
+};
+export declare function NavigationTabs({ config, className }: NavigationTabsProps): JSX.Element | null;

package/lib/components/NavigationTabs/NavigationTabs.js

@@ -0,0 +1,97 @@
+"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;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationTabs = NavigationTabs;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const hooks_1 = require("../../core/hooks");
+const NavigationTab_1 = require("../../components/NavigationTabs/NavigationTab");
+function NavigationTabs({ config, className }) {
+    var _a;
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const listRef = (0, react_1.useRef)(null);
+    const tabs = (_a = config === null || config === void 0 ? void 0 : config.items) !== null && _a !== void 0 ? _a : [];
+    const activeIndex = tabs.findIndex((tab) => tab.active);
+    (0, hooks_1.useScrollItemIntoView)(listRef, activeIndex);
+    if (!tabs.length) {
+        return null;
+    }
+    return (react_1.default.createElement(NavigationTabsWrapper, { "data-component-name": "NavigationTabs/NavigationTabs", className: className, "aria-label": translate('navigationTabs.label', 'Navigation tabs') },
+        react_1.default.createElement(NavigationTabsList, { ref: listRef }, tabs.map((tab, index) => (react_1.default.createElement(NavigationTab_1.NavigationTab, { key: `${tab.label}_${index}`, tab: tab }))))));
+}
+const NavigationTabsWrapper = styled_components_1.default.nav `
+  display: none;
+  box-sizing: border-box;
+  width: 100%;
+  height: var(--navigation-tabs-height);
+  max-width: var(--navbar-container-max-width);
+  padding: var(--navigation-tabs-padding);
+  background: var(--navigation-tabs-bg-color);
+  border-bottom: var(--navigation-tabs-bottom-border);
+  flex-shrink: 0;
+
+  @media screen and (min-width: ${utils_1.breakpoints.medium}) {
+    display: flex;
+  }
+
+  @media screen and (min-width: ${utils_1.breakpoints.max}) {
+    max-width: var(--container-max-width);
+    margin-left: auto;
+    margin-right: auto;
+  }
+`;
+const NavigationTabsList = styled_components_1.default.ul `
+  list-style: none;
+  margin: 0 0 calc(-1 * var(--navigation-tabs-border-width));
+  padding: 0;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: stretch;
+  gap: var(--navigation-tabs-gap);
+  min-width: 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+//# sourceMappingURL=NavigationTabs.js.map

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

@@ -0,0 +1 @@
+export declare const navigationTabs: import("styled-components").RuleSet<object>;

package/lib/components/NavigationTabs/variables.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.navigationTabs = void 0;
+const styled_components_1 = require("styled-components");
+exports.navigationTabs = (0, styled_components_1.css) `
+  --navigation-tabs-height: 48px; // @presenter Spacing
+  --navigation-tabs-bg-color: transparent; // @presenter Color
+  --navigation-tabs-border-color: var(--border-color-secondary);
+  --navigation-tabs-border-width: 1px;
+  --navigation-tabs-bottom-border: var(--navigation-tabs-border-width) solid var(--navigation-tabs-border-color);
+  --navigation-tabs-padding-vertical: 0;
+  --navigation-tabs-padding-horizontal: var(--spacing-xl);
+  --navigation-tabs-padding: var(--navigation-tabs-padding-vertical) var(--navigation-tabs-padding-horizontal); // @presenter Spacing
+  --navigation-tabs-gap: var(--spacing-base); // @presenter Spacing
+
+  --navigation-tabs-item-padding-vertical: var(--spacing-xxs);
+  --navigation-tabs-item-padding-horizontal: 0;
+  --navigation-tabs-item-padding: var(--navigation-tabs-item-padding-vertical) var(--navigation-tabs-item-padding-horizontal);
+  --navigation-tabs-item-content-gap: var(--spacing-xs);
+  --navigation-tabs-item-font-size: var(--font-size-base);
+  --navigation-tabs-item-line-height: var(--line-height-base);
+  --navigation-tabs-item-font-weight: var(--font-weight-regular);
+  --navigation-tabs-item-font-weight-active: var(--font-weight-medium);
+  --navigation-tabs-item-text-color: var(--navbar-text-color); // @presenter Color
+  --navigation-tabs-item-text-color-hover: var(--text-color-primary); // @presenter Color
+  --navigation-tabs-item-text-color-active: var(--text-color-primary); // @presenter Color
+  --navigation-tabs-item-bottom-border: var(--navigation-tabs-border-width) solid transparent;
+  --navigation-tabs-item-bottom-border-hover: var(--navigation-tabs-border-width) solid var(--border-color-primary);
+  --navigation-tabs-item-bottom-border-active: var(--navigation-tabs-border-width) solid var(--border-color-inverse);
+  --navigation-tabs-item-border-color-focused: var(--button-border-color-focused);
+  --navigation-tabs-item-border-radius: var(--navbar-item-border-radius);
+  --navigation-tabs-item-icon-size: 1.25em; // @presenter Spacing
+  --navigation-tabs-item-external-icon-margin-left: 0;
+  --navigation-tabs-item-label-font-weight-active: var(--navigation-tabs-item-font-weight-active);
+  --navigation-tabs-item-transition: 150ms ease-in-out;
+`;
+//# sourceMappingURL=variables.js.map

package/lib/components/Portal/Portal.js

@@ -1,14 +1,46 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+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.Portal = Portal;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const react_dom_1 = require("react-dom");
 const utils_1 = require("../../core/utils");
+const PortalContainerContext_1 = require("../../core/contexts/PortalContainerContext");
 function Portal({ children, mountId = 'root', }) {
-    const mount = utils_1.IS_BROWSER ? document.getElementById(mountId) || document.body : null;
+    const container = (0, react_1.useContext)(PortalContainerContext_1.PortalContainerContext);
+    const mount = utils_1.IS_BROWSER ? container || document.getElementById(mountId) || document.body : null;
     if (!mount) {
         return react_1.default.createElement(react_1.default.Fragment, null, children);
     }

package/lib/components/Product/utils.js

@@ -5,6 +5,6 @@ function getProductClassName(productName) {
     return `product-${productName
         .toLowerCase()
         .replace(/[^a-z0-9]+/g, '-')
-        .replace(/^-+|-+$/g, '')}`;
+        .replace(/^-+|(?<!-)-+$/g, '')}`;
 }
 //# sourceMappingURL=utils.js.map

package/lib/components/Search/SearchAiActionButtons.js

@@ -13,11 +13,16 @@ const ThumbUpFilledIcon_1 = require("../../icons/ThumbUpFilledIcon/ThumbUpFilled
 const ThumbDownIcon_1 = require("../../icons/ThumbDownIcon/ThumbDownIcon");
 const ThumbDownFilledIcon_1 = require("../../icons/ThumbDownFilledIcon/ThumbDownFilledIcon");
 const CopyButton_1 = require("../../components/Buttons/CopyButton");
+const Tooltip_1 = require("../../components/Tooltip/Tooltip");
+const hooks_1 = require("../../core/hooks");
 function SearchAiActionButtons({ content, className, feedback, onFeedback, disabled, }) {
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
     return (react_1.default.createElement(ActionButtonsWrapper, { className: className, "data-component-name": "Search/SearchAiActionButtons" },
-        react_1.default.createElement(CopyButton_1.CopyButton, { data: content }),
-        react_1.default.createElement(FeedbackButton, { variant: "text", size: "small", icon: feedback === types_1.FeedbackType.Like ? react_1.default.createElement(ThumbUpFilledIcon_1.ThumbUpFilledIcon, null) : react_1.default.createElement(ThumbUpIcon_1.ThumbUpIcon, null), onClick: () => !disabled && onFeedback(types_1.FeedbackType.Like), extraClass: feedback === types_1.FeedbackType.Like ? 'active' : '', "aria-label": "Like this response", disabled: disabled }),
-        react_1.default.createElement(FeedbackButton, { variant: "text", size: "small", icon: feedback === types_1.FeedbackType.Dislike ? react_1.default.createElement(ThumbDownFilledIcon_1.ThumbDownFilledIcon, null) : react_1.default.createElement(ThumbDownIcon_1.ThumbDownIcon, null), onClick: () => !disabled && onFeedback(types_1.FeedbackType.Dislike), extraClass: feedback === types_1.FeedbackType.Dislike ? 'active' : '', "aria-label": "Dislike this response", disabled: disabled })));
+        react_1.default.createElement(Tooltip_1.Tooltip, { tip: translate('search.ai.actions.copy', 'Copy the response'), placement: "top" },
+            react_1.default.createElement(CopyButton_1.CopyButton, { data: content })),
+        react_1.default.createElement(Tooltip_1.Tooltip, { tip: translate('search.ai.actions.like', 'Like the response'), placement: "top" }, react_1.default.createElement(FeedbackButton, { variant: "text", size: "small", icon: feedback === types_1.FeedbackType.Like ? react_1.default.createElement(ThumbUpFilledIcon_1.ThumbUpFilledIcon, null) : react_1.default.createElement(ThumbUpIcon_1.ThumbUpIcon, null), onClick: () => !disabled && onFeedback(types_1.FeedbackType.Like), extraClass: feedback === types_1.FeedbackType.Like ? 'active' : '', "aria-label": "Like this response", disabled: disabled })),
+        react_1.default.createElement(Tooltip_1.Tooltip, { tip: translate('search.ai.actions.dislike', 'Dislike the response'), placement: "top" }, react_1.default.createElement(FeedbackButton, { variant: "text", size: "small", icon: feedback === types_1.FeedbackType.Dislike ? react_1.default.createElement(ThumbDownFilledIcon_1.ThumbDownFilledIcon, null) : react_1.default.createElement(ThumbDownIcon_1.ThumbDownIcon, null), onClick: () => !disabled && onFeedback(types_1.FeedbackType.Dislike), extraClass: feedback === types_1.FeedbackType.Dislike ? 'active' : '', "aria-label": "Dislike this response", disabled: disabled }))));
 }
 const ActionButtonsWrapper = styled_components_1.default.div `
   display: flex;

package/lib/components/Search/SearchAiActivity.d.ts

@@ -0,0 +1,10 @@
+import { type JSX } from 'react';
+import type { ToolCall } from '../../core/types';
+export type SearchAiActivityProps = {
+    /** One run of consecutive tool calls; an empty list means the assistant has not called a tool yet. */
+    toolCalls: ToolCall[];
+    /** The assistant works on this group now; once it moves on, a call without a result counts as finished. */
+    isActive: boolean;
+    className?: string;
+};
+export declare function SearchAiActivity({ toolCalls, isActive, className, }: SearchAiActivityProps): JSX.Element;