@redocly/theme 0.55.0-next.7 → 0.55.0-next.8

package/lib/components/PageNavigation/NavigationButton.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationButton = NavigationButton;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const ArrowRightIcon_1 = require("../../icons/ArrowRightIcon/ArrowRightIcon");
+const Button_1 = require("../../components/Button/Button");
+const ArrowLeftIcon_1 = require("../../icons/ArrowLeftIcon/ArrowLeftIcon");
+function NavigationButton({ label, link, text, translationKey, position, icon = position === 'left' ? react_1.default.createElement(ArrowLeftIcon_1.ArrowLeftIcon, null) : react_1.default.createElement(ArrowRightIcon_1.ArrowRightIcon, null), className, }) {
+    return (react_1.default.createElement(NavigationButtonWrapper, { "data-component-name": "PageNavigation/NavigationButton", "data-translation-key": translationKey, position: position },
+        react_1.default.createElement(NavigationButtonLabel, null, text),
+        react_1.default.createElement(StyledNavigationButton, { size: "large", to: link, extraClass: className, variant: "link", icon: icon, iconPosition: position }, label)));
+}
+const NavigationButtonWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  text-align: ${({ position }) => position};
+`;
+const StyledNavigationButton = (0, styled_components_1.default)(Button_1.Button) `
+  text-wrap: wrap;
+  padding-left: 0;
+  padding-right: 0;
+`;
+const NavigationButtonLabel = styled_components_1.default.span `
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
+  font-weight: var(--font-weight-regular);
+`;
+//# sourceMappingURL=NavigationButton.js.map

package/lib/components/PageNavigation/NextButton.js

@@ -22,44 +22,25 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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.NextButton = NextButton;
 const React = __importStar(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
+const NavigationButton_1 = require("../../components/PageNavigation/NavigationButton");
 const hooks_1 = require("../../core/hooks");
-const Button_1 = require("../../components/Button/Button");
 const ArrowRightIcon_1 = require("../../icons/ArrowRightIcon/ArrowRightIcon");
 function NextButton({ nextPage, className }) {
-    var _a, _b;
+    var _a, _b, _c, _d, _e, _f;
     const { navigation } = (0, hooks_1.useThemeConfig)();
-    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { useTranslate, usePageProps } = (0, hooks_1.useThemeHooks)();
+    const { frontmatter } = usePageProps();
     const { translate } = useTranslate();
-    if (!nextPage || ((_a = navigation === null || navigation === void 0 ? void 0 : navigation.nextButton) === null || _a === void 0 ? void 0 : _a.hide)) {
+    const translationKey = 'page.nextButton';
+    const label = ((_b = (_a = frontmatter === null || frontmatter === void 0 ? void 0 : frontmatter.navigation) === null || _a === void 0 ? void 0 : _a.nextButton) === null || _b === void 0 ? void 0 : _b.label) || (nextPage === null || nextPage === void 0 ? void 0 : nextPage.label) || (nextPage === null || nextPage === void 0 ? void 0 : nextPage.routeSlug) || '';
+    const link = ((_d = (_c = frontmatter === null || frontmatter === void 0 ? void 0 : frontmatter.navigation) === null || _c === void 0 ? void 0 : _c.nextButton) === null || _d === void 0 ? void 0 : _d.link) || (nextPage === null || nextPage === void 0 ? void 0 : nextPage.link);
+    const text = ((_e = navigation === null || navigation === void 0 ? void 0 : navigation.nextButton) === null || _e === void 0 ? void 0 : _e.text) || translate(translationKey, { defaultValue: 'Next page' });
+    if (((_f = navigation === null || navigation === void 0 ? void 0 : navigation.nextButton) === null || _f === void 0 ? void 0 : _f.hide) || !link || !label) {
         return React.createElement("div", null, "\u00A0");
     }
-    const nextPageText = nextPage.label || nextPage.routeSlug || '';
-    const translationKey = 'page.nextButton';
-    const label = ((_b = navigation === null || navigation === void 0 ? void 0 : navigation.nextButton) === null || _b === void 0 ? void 0 : _b.text) || translate(translationKey, { defaultValue: 'Next page' });
-    return (React.createElement(NextButtonWrapper, { "data-component-name": "PageNavigation/NextButton", "data-translation-key": translationKey },
-        React.createElement(NextPageLabel, null, label),
-        React.createElement(NextPageButton, { size: "large", to: nextPage.link, extraClass: className, variant: "link", icon: React.createElement(ArrowRightIcon_1.ArrowRightIcon, null), iconPosition: "right" }, nextPageText)));
+    return (React.createElement(NavigationButton_1.NavigationButton, { label: label, link: link, text: text, translationKey: translationKey, position: "right", className: className, icon: React.createElement(ArrowRightIcon_1.ArrowRightIcon, null) }));
 }
-const NextButtonWrapper = styled_components_1.default.div `
-  display: flex;
-  flex-direction: column;
-  text-align: right;
-`;
-const NextPageButton = (0, styled_components_1.default)(Button_1.Button) `
-  text-wrap: wrap;
-  padding-left: 0;
-  padding-right: 0;
-`;
-const NextPageLabel = styled_components_1.default.span `
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-sm);
-  font-weight: var(--font-weight-regular);
-`;
 //# sourceMappingURL=NextButton.js.map

package/lib/components/PageNavigation/PageNavigation.js

@@ -7,8 +7,8 @@ exports.PageNavigation = PageNavigation;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const hooks_1 = require("../../core/hooks");
-const PreviousButton_1 = require("../../components/PageNavigation/PreviousButton");
 const NextButton_1 = require("../../components/PageNavigation/NextButton");
+const PreviousButton_1 = require("../../components/PageNavigation/PreviousButton");
 function PageNavigation({ nextPage, prevPage, className, }) {
     var _a, _b;
     const { navigation } = (0, hooks_1.useThemeConfig)();

package/lib/components/PageNavigation/PreviousButton.js

@@ -5,39 +5,23 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PreviousButton = PreviousButton;
 const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
+const NavigationButton_1 = require("../../components/PageNavigation/NavigationButton");
 const hooks_1 = require("../../core/hooks");
-const Button_1 = require("../../components/Button/Button");
 const ArrowLeftIcon_1 = require("../../icons/ArrowLeftIcon/ArrowLeftIcon");
 function PreviousButton({ prevPage, className }) {
-    var _a, _b;
+    var _a, _b, _c, _d, _e, _f;
     const { navigation } = (0, hooks_1.useThemeConfig)();
-    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { useTranslate, usePageProps } = (0, hooks_1.useThemeHooks)();
+    const { frontmatter } = usePageProps();
     const { translate } = useTranslate();
-    if (!prevPage || ((_a = navigation === null || navigation === void 0 ? void 0 : navigation.previousButton) === null || _a === void 0 ? void 0 : _a.hide)) {
-        return react_1.default.createElement("div", null, "\u00A0");
-    }
-    const prevPageText = prevPage.label || prevPage.routeSlug || '';
     const translationKey = 'page.previousButton';
-    const label = ((_b = navigation === null || navigation === void 0 ? void 0 : navigation.previousButton) === null || _b === void 0 ? void 0 : _b.text) ||
+    const label = ((_b = (_a = frontmatter === null || frontmatter === void 0 ? void 0 : frontmatter.navigation) === null || _a === void 0 ? void 0 : _a.previousButton) === null || _b === void 0 ? void 0 : _b.label) || (prevPage === null || prevPage === void 0 ? void 0 : prevPage.label) || (prevPage === null || prevPage === void 0 ? void 0 : prevPage.routeSlug) || '';
+    const link = ((_d = (_c = frontmatter === null || frontmatter === void 0 ? void 0 : frontmatter.navigation) === null || _c === void 0 ? void 0 : _c.previousButton) === null || _d === void 0 ? void 0 : _d.link) || (prevPage === null || prevPage === void 0 ? void 0 : prevPage.link);
+    const text = ((_e = navigation === null || navigation === void 0 ? void 0 : navigation.previousButton) === null || _e === void 0 ? void 0 : _e.text) ||
         translate(translationKey, { defaultValue: 'Previous page' });
-    return (react_1.default.createElement(PreviousButtonWrapper, { "data-component-name": "PageNavigation/PreviousButton", "data-translation-key": translationKey },
-        react_1.default.createElement(PreviousPageLabel, null, label),
-        react_1.default.createElement(PreviousPageButton, { size: "large", to: prevPage.link, extraClass: className, variant: "link", icon: react_1.default.createElement(ArrowLeftIcon_1.ArrowLeftIcon, null), iconPosition: "left" }, prevPageText)));
+    if (((_f = navigation === null || navigation === void 0 ? void 0 : navigation.previousButton) === null || _f === void 0 ? void 0 : _f.hide) || !link || !label) {
+        return react_1.default.createElement("div", null, "\u00A0");
+    }
+    return (react_1.default.createElement(NavigationButton_1.NavigationButton, { label: label, link: link, text: text, translationKey: translationKey, position: "left", className: className, icon: react_1.default.createElement(ArrowLeftIcon_1.ArrowLeftIcon, null) }));
 }
-const PreviousButtonWrapper = styled_components_1.default.div `
-  display: flex;
-  flex-direction: column;
-  text-align: left;
-`;
-const PreviousPageButton = (0, styled_components_1.default)(Button_1.Button) `
-  text-wrap: wrap;
-  padding-left: 0;
-  padding-right: 0;
-`;
-const PreviousPageLabel = styled_components_1.default.span `
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-sm);
-  font-weight: var(--font-weight-regular);
-`;
 //# sourceMappingURL=PreviousButton.js.map

package/lib/components/Search/SearchAiConversationInput.js

@@ -29,6 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SearchAiConversationInput = SearchAiConversationInput;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
+const constants_1 = require("../../core/constants");
 const Button_1 = require("../../components/Button/Button");
 const SendIcon_1 = require("../../icons/SendIcon/SendIcon");
 const hooks_1 = require("../../core/hooks");
@@ -56,7 +57,7 @@ function SearchAiConversationInput({ isGeneratingResponse, onMessageSent, classN
     };
     const isDisabled = isGeneratingResponse || query.trim().length === 0;
     return (react_1.default.createElement(SearchAiConversationInputWrapper, { "data-component-name": "Search/SearchAiConversationInput", className: className },
-        react_1.default.createElement(ConversationInput, { ref: inputRef, type: "text", placeholder: placeholder || translate('search.ai.followUpQuestion', 'Ask a follow up question?'), onChange: (e) => setQuery(e.target.value), onKeyUp: handleOnKeyUp, value: query, disabled: isGeneratingResponse }),
+        react_1.default.createElement(ConversationInput, { ref: inputRef, type: "text", placeholder: placeholder || translate('search.ai.followUpQuestion', 'Ask a follow up question?'), onChange: (e) => setQuery(e.target.value), onKeyUp: handleOnKeyUp, value: query, disabled: isGeneratingResponse, maxLength: constants_1.AI_SEARCH_MAX_MESSAGE_LENGTH }),
         react_1.default.createElement(SendButton, { disabled: isDisabled, size: "small", icon: react_1.default.createElement(SendIcon_1.SendIcon, { color: isDisabled
                     ? '--button-content-color-disabled'
                     : 'var(--search-ai-conversation-input-send-button-icon-color)' }), onClick: handleSendMessage })));

package/lib/components/Select/Select.js

@@ -43,9 +43,8 @@ function Select(props) {
         return values
             .map((value) => {
             const selectedOption = options.find((option) => option.value === value);
-            return selectedOption || typeof value === 'string'
-                ? { value }
-                : value;
+            return (selectedOption ||
+                (typeof value === 'string' ? { value } : value));
         })
             .filter((option) => !!option);
     };
@@ -207,5 +206,6 @@ const SelectDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown) `
 `;
 const SelectDropdownMenu = (0, styled_components_1.default)(DropdownMenu_1.DropdownMenu) `
   width: 100%;
+  margin-top: var(--spacing-unit);
 `;
 //# sourceMappingURL=Select.js.map

package/lib/components/Sidebar/Sidebar.d.ts

@@ -18,3 +18,6 @@ export type SidebarProps = {
     menuItemsAnimation?: MenuItemsAnimation;
 };
 export declare function Sidebar({ versions, menu, footer, header, growContent, collapsed, className, menuItemsAnimation, }: SidebarProps): JSX.Element | null;
+export declare const SidebarHeader: import("styled-components").StyledComponent<"div", any, {
+    collapsed?: boolean;
+}, never>;

package/lib/components/Sidebar/Sidebar.js

@@ -26,6 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarHeader = void 0;
 exports.Sidebar = Sidebar;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
@@ -43,7 +44,7 @@ function Sidebar({ versions, menu, footer, header, growContent, collapsed, class
         return null;
     }
     return (react_1.default.createElement(SidebarContent, { "data-component-name": "Sidebar/Sidebar", opened: isOpen, className: className, collapsed: mappedCollapsed },
-        header ? react_1.default.createElement(SidebarHeader, { collapsed: mappedCollapsed }, header) : null,
+        header ? react_1.default.createElement(exports.SidebarHeader, { collapsed: mappedCollapsed }, header) : null,
         !mappedCollapsed && versions ? versions : null,
         react_1.default.createElement(MenuContainer_1.MenuContainer, { hidden: mappedCollapsed, growContent: growContent, animation: menuItemsAnimation }, menu),
         footer && !isOpen ? (react_1.default.createElement(SidebarFooter, { collapsed: mappedCollapsed, "data-component-name": "Sidebar/FooterWrapper" }, footer)) : null));
@@ -94,7 +95,7 @@ const SidebarContent = styled_components_1.default.aside `
     transform: none;
   }
 `;
-const SidebarHeader = styled_components_1.default.div `
+exports.SidebarHeader = styled_components_1.default.div `
   margin: var(--sidebar-offset-top) var(--sidebar-margin-horizontal) 0
     var(--sidebar-margin-horizontal);
   padding: 0 0 var(--sidebar-header-padding-bottom) 0;

package/lib/components/Tag/Tag.d.ts

@@ -21,10 +21,12 @@ export type TagProps = {
     icon?: React.ReactNode;
     active?: boolean;
     tabIndex?: number;
+    style?: React.CSSProperties;
     onClick?: (event: React.MouseEvent) => void;
     onKeyDown?: (event: React.KeyboardEvent) => void;
     onClose?: (event: React.MouseEvent) => void;
+    maxLength?: number;
 };
-export declare function Tag({ children, color, icon, active, closable, tabIndex, onClick, onKeyDown, onClose, size, borderless, withStatusDot, statusDotColor, ...otherProps }: TagProps): JSX.Element;
+export declare function Tag({ children, color, icon, active, closable, tabIndex, onClick, onKeyDown, onClose, size, borderless, withStatusDot, statusDotColor, maxLength, ...otherProps }: TagProps): JSX.Element;
 export declare const ContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

package/lib/components/Tag/Tag.js

@@ -21,10 +21,62 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const CloseIcon_1 = require("../../icons/CloseIcon/CloseIcon");
 const CheckmarkFilledIcon_1 = require("../../icons/CheckmarkFilledIcon/CheckmarkFilledIcon");
 function Tag(_a) {
-    var { children, color, icon, active, closable, tabIndex, onClick, onKeyDown, onClose, size, borderless, withStatusDot, statusDotColor = 'var(--tag-status-dot-color-default)' } = _a, otherProps = __rest(_a, ["children", "color", "icon", "active", "closable", "tabIndex", "onClick", "onKeyDown", "onClose", "size", "borderless", "withStatusDot", "statusDotColor"]);
+    var { children, color, icon, active, closable, tabIndex, onClick, onKeyDown, onClose, size, borderless, withStatusDot, statusDotColor = 'var(--tag-status-dot-color-default)', maxLength } = _a, otherProps = __rest(_a, ["children", "color", "icon", "active", "closable", "tabIndex", "onClick", "onKeyDown", "onClose", "size", "borderless", "withStatusDot", "statusDotColor", "maxLength"]);
+    const truncateText = (text, maxLen) => {
+        if (text.length <= maxLen)
+            return text;
+        return text.slice(0, maxLen) + '...';
+    };
+    const extractTextFromElement = (element) => {
+        if (typeof element === 'string') {
+            return element;
+        }
+        if (typeof element === 'number') {
+            return element.toString();
+        }
+        if (react_1.default.isValidElement(element)) {
+            const props = element.props;
+            if (typeof props.children === 'string') {
+                return props.children;
+            }
+        }
+        return '';
+    };
+    const truncateJSXElement = (element, maxLen) => {
+        if (typeof element === 'string') {
+            return truncateText(element, maxLen);
+        }
+        if (typeof element === 'number') {
+            const numStr = element.toString();
+            return numStr.length > maxLen ? truncateText(numStr, maxLen) : element;
+        }
+        if (react_1.default.isValidElement(element)) {
+            const textContent = extractTextFromElement(element);
+            if (textContent.length <= maxLen) {
+                return element;
+            }
+            const props = element.props;
+            if (typeof props.children === 'string') {
+                return react_1.default.cloneElement(element, Object.assign(Object.assign({}, props), { children: truncateText(props.children, maxLen) }));
+            }
+        }
+        return element;
+    };
+    const renderChildren = () => {
+        if (!maxLength) {
+            return children;
+        }
+        if (typeof children === 'string') {
+            return truncateText(children, maxLength);
+        }
+        if (react_1.default.isValidElement(children)) {
+            return truncateJSXElement(children, maxLength);
+        }
+        return children;
+    };
     return (react_1.default.createElement(TagWrapper, Object.assign({ tabIndex: tabIndex, "data-component-name": "Tag/Tag", borderless: borderless, color: color, size: size, onClick: onClick, onKeyDown: onKeyDown, hasCloseButton: closable }, otherProps),
         withStatusDot ? react_1.default.createElement(StatusDot, { color: statusDotColor }) : icon ? icon : null,
-        react_1.default.createElement(exports.ContentWrapper, null, children),
+        react_1.default.createElement(exports.ContentWrapper, null, renderChildren()),
         closable && (react_1.default.createElement(CloseButton, { onClick: (event) => {
                 onClose === null || onClose === void 0 ? void 0 : onClose(event);
             } },

package/lib/components/Tag/variables.js

@@ -162,6 +162,27 @@ exports.tag = (0, styled_components_1.css) `
     --tag-close-button-bg-color-hover: var(--color-warm-grey-3); // @presenter Color
   }
 
+  .tag-grass {
+    --tag-color: var(--color-grass-8); // @presenter Color
+    --tag-bg-color: transparent; // @presenter Color
+    --tag-border-color: var(--color-grass-4); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-grass-1); // @presenter Color
+  }
+  
+  .tag-purple {
+    --tag-color: var(--color-purple-7); // @presenter Color
+    --tag-bg-color: transparent; // @presenter Color
+    --tag-border-color: var(--color-purple-4); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-purple-1); // @presenter Color
+  }
+
+  .tag-sky {
+    --tag-color: var(--color-sky-9); // @presenter Color
+    --tag-bg-color: transparent; // @presenter Color
+    --tag-border-color: var(--color-sky-5); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-sky-2); // @presenter Color
+  }
+
   /**
     * @tokens Tag http
     */

package/lib/components/Tooltip/Tooltip.d.ts

@@ -8,6 +8,7 @@ export type TooltipProps = {
     className?: string;
     width?: string;
     dataTestId?: string;
+    disabled?: boolean;
 };
-export declare function TooltipComponent({ children, isOpen, tip, withArrow, placement, className, width, dataTestId, }: PropsWithChildren<TooltipProps>): JSX.Element;
+export declare function TooltipComponent({ children, isOpen, tip, withArrow, placement, className, width, dataTestId, disabled, }: PropsWithChildren<TooltipProps>): JSX.Element;
 export declare const Tooltip: React.NamedExoticComponent<React.PropsWithChildren<TooltipProps>>;

package/lib/components/Tooltip/Tooltip.js

@@ -28,13 +28,13 @@ exports.TooltipComponent = TooltipComponent;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
 const hooks_1 = require("../../core/hooks");
-function TooltipComponent({ children, isOpen, tip, withArrow = true, placement = 'top', className = 'default', width, dataTestId, }) {
+function TooltipComponent({ children, isOpen, tip, withArrow = true, placement = 'top', className = 'default', width, dataTestId, disabled = false, }) {
     const ref = (0, react_1.useRef)(null);
     const { isOpened, handleOpen, handleClose } = (0, hooks_1.useControl)(isOpen);
     (0, hooks_1.useOutsideClick)(ref, handleClose);
     const isControlled = isOpen !== undefined;
     (0, react_1.useEffect)(() => {
-        if (isControlled) {
+        if (isControlled && !disabled) {
             if (isOpen) {
                 handleOpen();
             }
@@ -42,15 +42,16 @@ function TooltipComponent({ children, isOpen, tip, withArrow = true, placement =
                 handleClose();
             }
         }
-    }, [isOpen, isControlled, handleOpen, handleClose]);
-    const controllers = !isControlled && {
+    }, [isOpen, isControlled, handleOpen, handleClose, disabled]);
+    const controllers = !isControlled &&
+        !disabled && {
         onMouseEnter: handleOpen,
         onMouseLeave: handleClose,
         onClick: handleClose,
     };
     return (react_1.default.createElement(TooltipWrapper, Object.assign({ ref: ref }, controllers, { className: `tooltip-${className}`, "data-component-name": "Tooltip/Tooltip" }),
         children,
-        isOpened && (react_1.default.createElement(TooltipBody, { "data-testid": dataTestId || (typeof tip === 'string' ? tip : ''), placement: placement, width: width, withArrow: withArrow }, tip))));
+        isOpened && !disabled && (react_1.default.createElement(TooltipBody, { "data-testid": dataTestId || (typeof tip === 'string' ? tip : ''), placement: placement, width: width, withArrow: withArrow }, tip))));
 }
 exports.Tooltip = (0, react_1.memo)(TooltipComponent);
 const PLACEMENTS = {
@@ -63,10 +64,11 @@ const PLACEMENTS = {
     ${({ withArrow }) => withArrow &&
         (0, styled_components_1.css) `
         &::after {
-          border-left: 5px solid transparent;
-          border-right: 5px solid transparent;
-          border-top-width: 6px;
+          border-left: 6px solid transparent;
+          border-right: 6px solid transparent;
+          border-top-width: 8px;
           border-top-style: solid;
+          border-radius: 2px 2px 0 0;
           bottom: 0;
           left: 50%;
           transform: translate(-50%, 99%);
@@ -82,10 +84,11 @@ const PLACEMENTS = {
     ${({ withArrow }) => withArrow &&
         (0, styled_components_1.css) `
         &::after {
-          border-left: 5px solid transparent;
-          border-right: 5px solid transparent;
-          border-bottom-width: 6px;
+          border-left: 6px solid transparent;
+          border-right: 6px solid transparent;
+          border-bottom-width: 8px;
           border-bottom-style: solid;
+          border-radius: 0 0 2px 2px;
           top: 0;
           left: 50%;
           transform: translate(-50%, -99%);
@@ -101,10 +104,11 @@ const PLACEMENTS = {
     ${({ withArrow }) => withArrow &&
         (0, styled_components_1.css) `
         &::after {
-          border-top: 5px solid transparent;
-          border-bottom: 5px solid transparent;
-          border-left-width: 6px;
+          border-top: 6px solid transparent;
+          border-bottom: 6px solid transparent;
+          border-left-width: 8px;
           border-left-style: solid;
+          border-radius: 2px 0 0 2px;
           top: 50%;
           right: 0;
           transform: translate(99%, -50%);
@@ -120,10 +124,11 @@ const PLACEMENTS = {
     ${({ withArrow }) => withArrow &&
         (0, styled_components_1.css) `
         &::after {
-          border-top: 5px solid transparent;
-          border-bottom: 5px solid transparent;
-          border-right-width: 6px;
+          border-top: 6px solid transparent;
+          border-bottom: 6px solid transparent;
+          border-right-width: 8px;
           border-right-style: solid;
+          border-radius: 0 2px 2px 0;
           top: 50%;
           left: 0;
           transform: translate(-99%, -50%);
@@ -146,7 +151,7 @@ const TooltipBody = styled_components_1.default.span `
   white-space: normal;
   overflow-wrap: break-word;
 
-  border-radius: var(--border-radius);
+  border-radius: var(--border-radius-md);
   transition: opacity 0.3s ease-out;
 
   font-size: 13px;
@@ -160,11 +165,13 @@ const TooltipBody = styled_components_1.default.span `
     display: inline-block;
     width: 0;
     height: 0;
-    border-color: var(--tooltip-bg-color);
+    border-color: var(--tooltip-arrow-color, var(--tooltip-bg-color));
   }
 
   background: var(--tooltip-bg-color);
   color: var(--tooltip-text-color);
+  border: var(--tooltip-border-width, 0) var(--tooltip-border-style, solid)
+    var(--tooltip-border-color, transparent);
   box-shadow: rgb(0 0 0 / 25%) 0 2px 4px;
 
   width: ${({ width }) => width || '120px'};

package/lib/components/Tooltip/variables.js

@@ -10,6 +10,10 @@ exports.tooltip = (0, styled_components_1.css) `
 
   --tooltip-text-color: var(--text-color-secondary);
   --tooltip-bg-color: var(--bg-color-raised);
+  --tooltip-arrow-color: var(--tooltip-bg-color);
+  --tooltip-border-width: 0;
+  --tooltip-border-style: solid;
+  --tooltip-border-color: transparent;
   --tooltip-padding-vertical: var(--spacing-xs);
   --tooltip-padding-horizontal: var(--spacing-sm);
   --tooltip-padding: var(--tooltip-padding-vertical) var(--tooltip-padding-horizontal);
@@ -18,6 +22,19 @@ exports.tooltip = (0, styled_components_1.css) `
   .tooltip-copy-button {
     --tooltip-text-color: var(--text-color-secondary);
     --tooltip-bg-color: var(--bg-color-raised);
+    --tooltip-arrow-color: var(--tooltip-bg-color);
+  }
+
+  .tooltip-catalog {
+    --tooltip-text-color: var(--text-color-primary);
+    --tooltip-bg-color: var(--layer-color);
+    --tooltip-arrow-color: var(--border-color-secondary);
+    --tooltip-border-width: 2px;
+    --tooltip-border-color: var(--border-color-secondary);
+    --tooltip-padding-vertical: var(--spacing-xs);
+    --tooltip-padding-horizontal: var(--spacing-sm);
+    --tooltip-padding: var(--tooltip-padding-vertical) var(--tooltip-padding-horizontal);
+    --tooltip-max-width: 300px;
   }
 
   // @tokens End

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

@@ -0,0 +1 @@
+export declare const CATALOG_TAG_MAX_LENGTH = 15;

package/lib/core/constants/catalog.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CATALOG_TAG_MAX_LENGTH = void 0;
+exports.CATALOG_TAG_MAX_LENGTH = 15;
+//# sourceMappingURL=catalog.js.map

package/lib/core/constants/index.d.ts

@@ -2,3 +2,4 @@ export * from '../../core/constants/common';
 export * from '../../core/constants/environments';
 export * from '../../core/constants/code-walkthrough';
 export * from '../../core/constants/search';
+export * from '../../core/constants/catalog';

package/lib/core/constants/index.js

@@ -18,4 +18,5 @@ __exportStar(require("../../core/constants/common"), exports);
 __exportStar(require("../../core/constants/environments"), exports);
 __exportStar(require("../../core/constants/code-walkthrough"), exports);
 __exportStar(require("../../core/constants/search"), exports);
+__exportStar(require("../../core/constants/catalog"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/constants/search.d.ts

@@ -11,4 +11,5 @@ export declare const enum AiSearchConversationRole {
     ASSISTANT = "assistant"
 }
 export declare const AI_SEARCH_ERROR_CONFIG: Record<AiSearchError, AiSearchErrorConfig>;
+export declare const AI_SEARCH_MAX_MESSAGE_LENGTH = 45000;
 export declare const SEARCH_DEBOUNCE_TIME_MS = 300;

package/lib/core/constants/search.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SEARCH_DEBOUNCE_TIME_MS = exports.AI_SEARCH_ERROR_CONFIG = exports.AiSearchConversationRole = exports.AiSearchError = void 0;
+exports.SEARCH_DEBOUNCE_TIME_MS = exports.AI_SEARCH_MAX_MESSAGE_LENGTH = exports.AI_SEARCH_ERROR_CONFIG = exports.AiSearchConversationRole = exports.AiSearchError = void 0;
 var AiSearchError;
 (function (AiSearchError) {
     AiSearchError["Unauthorized"] = "ai_search_unauthorized";
@@ -37,5 +37,6 @@ exports.AI_SEARCH_ERROR_CONFIG = {
     [AiSearchError.EmptyResponse]: defaultErrorConfig,
     [AiSearchError.ErrorProcessingResponse]: defaultErrorConfig,
 };
+exports.AI_SEARCH_MAX_MESSAGE_LENGTH = 45000;
 exports.SEARCH_DEBOUNCE_TIME_MS = 300;
 //# sourceMappingURL=search.js.map

package/lib/core/hooks/__mocks__/use-theme-hooks.d.ts

@@ -63,4 +63,5 @@ export declare const useThemeHooks: jest.Mock<{
         submitFeedback: jest.Mock<any, any, any>;
     }, [], any>;
     useLoadAndNavigate: jest.Mock<any, any, any>;
+    usePageProps: jest.Mock<any, any, any>;
 }, [], any>;

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

@@ -86,5 +86,6 @@ exports.useThemeHooks = jest.fn(() => ({
         submitFeedback: jest.fn(),
     })),
     useLoadAndNavigate: jest.fn(),
+    usePageProps: jest.fn().mockReturnValue({}),
 }));
 //# sourceMappingURL=use-theme-hooks.js.map

package/lib/core/hooks/catalog/useCatalogEntities.d.ts

@@ -0,0 +1,4 @@
+import type { UseCatalogEntitiesProps } from '../../../index.js';
+export declare function useCatalogEntities({ entitiesTypes, excludedEntities }: UseCatalogEntitiesProps): {
+    initialFilter: string;
+};

package/lib/core/hooks/catalog/useCatalogEntities.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCatalogEntities = useCatalogEntities;
+function useCatalogEntities({ entitiesTypes, excludedEntities }) {
+    const initialTypesWithoutAll = entitiesTypes.filter((type) => type !== 'all');
+    const initialTypesFilter = entitiesTypes.length ? `type:${initialTypesWithoutAll.join(',')}` : '';
+    const initialExcludedEntitiesFilter = (excludedEntities === null || excludedEntities === void 0 ? void 0 : excludedEntities.length)
+        ? `-key:${excludedEntities.map((entity) => entity.key).join(',')}`
+        : '';
+    const initialFilter = initialTypesFilter
+        ? `${initialTypesFilter} AND ${initialExcludedEntitiesFilter}`
+        : initialExcludedEntitiesFilter;
+    return {
+        initialFilter,
+    };
+}
+//# sourceMappingURL=useCatalogEntities.js.map

package/lib/core/hooks/catalog/useCatalogTableHeaderCellActions.d.ts

@@ -0,0 +1,15 @@
+import { BaseEntity, CatalogColumn } from '../../../components/Catalog/CatalogTableView/CatalogTableView';
+import { SortOption } from '../../types';
+type CatalogTableHeaderCellActionsProps<T extends BaseEntity> = {
+    column: CatalogColumn<T>;
+    handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
+    setSortOption: (sortOption: SortOption | null) => void;
+    isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
+};
+export declare function useCatalogTableHeaderCellActions<T extends BaseEntity>({ column, handleSortClick, setSortOption, isColumnSorted, }: CatalogTableHeaderCellActionsProps<T>): {
+    handleCellClick: () => void;
+    sortKey: string | undefined;
+    isUpActive: boolean;
+    isDownActive: boolean;
+};
+export {};

package/lib/core/hooks/catalog/useCatalogTableHeaderCellActions.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCatalogTableHeaderCellActions = useCatalogTableHeaderCellActions;
+function useCatalogTableHeaderCellActions({ column, handleSortClick, setSortOption, isColumnSorted, }) {
+    const sortKey = column.sortKey;
+    const isUpActive = sortKey ? isColumnSorted(sortKey, 'desc') : false;
+    const isDownActive = sortKey ? isColumnSorted(sortKey, 'asc') : false;
+    const handleCellClick = () => {
+        if (!column.sortable || !sortKey)
+            return;
+        if (isDownActive) {
+            handleSortClick(sortKey, 'desc');
+        }
+        else if (isUpActive) {
+            setSortOption(null);
+        }
+        else {
+            handleSortClick(sortKey, 'asc');
+        }
+    };
+    return { handleCellClick, sortKey, isUpActive, isDownActive };
+}
+//# sourceMappingURL=useCatalogTableHeaderCellActions.js.map

package/lib/core/hooks/catalog/useCatalogTableViewRow.d.ts

@@ -0,0 +1,11 @@
+import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
+type CatalogTableViewRowProps = {
+    entityKey: string;
+    entityType: string;
+    catalogConfig: CatalogEntityConfig;
+    entitiesCatalogConfig?: EntitiesCatalogConfig;
+};
+export declare function useCatalogTableViewRow({ entityKey, entityType, catalogConfig, entitiesCatalogConfig, }: CatalogTableViewRowProps): {
+    getEntityDetailsLink: () => string;
+};
+export {};