@redocly/theme 0.59.0-rc.1 → 0.59.0

package/lib/markdoc/components/Tabs/Tabs.js

@@ -32,14 +32,12 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabContent = exports.TabsSize = void 0;
 exports.Tabs = Tabs;
 const react_1 = __importStar(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
+const react_router_dom_1 = require("react-router-dom");
+const styled_components_1 = __importStar(require("styled-components"));
 const hooks_1 = require("../../../core/hooks");
 const TabList_1 = require("../../../markdoc/components/Tabs/TabList");
 const utils_1 = require("../../../core/utils");
@@ -48,22 +46,62 @@ var TabsSize;
     TabsSize["SMALL"] = "small";
     TabsSize["MEDIUM"] = "medium";
 })(TabsSize || (exports.TabsSize = TabsSize = {}));
-function Tabs({ id, children, className, size, initialTab: propInitialTab, }) {
+function Tabs({ id, children, className, size, initialTab: propInitialTab, forceReady = false, }) {
     var _a, _b;
-    const [childrenArray, setChildrenArray] = (0, react_1.useState)(react_1.default.Children.toArray(children));
+    const childrenArray = react_1.default.Children.toArray(children);
+    const [isReady, setIsReady] = (0, react_1.useState)(false);
+    const containerRef = (0, react_1.useRef)(null);
     const initialTab = (_b = propInitialTab !== null && propInitialTab !== void 0 ? propInitialTab : (_a = childrenArray[0]) === null || _a === void 0 ? void 0 : _a.props.label) !== null && _b !== void 0 ? _b : '';
-    const { activeTab, setActiveTab } = (0, hooks_1.useActiveTab)({ tabsId: id, initialTab });
-    (0, react_1.useEffect)(() => {
-        setChildrenArray(react_1.default.Children.toArray(children));
-    }, [children]);
-    return (react_1.default.createElement(TabsContainer, { "data-component-name": "Markdoc/Tabs/Tabs", className: className, key: id },
-        react_1.default.createElement(TabList_1.TabList, { size: size, childrenArray: childrenArray, activeTab: activeTab, onTabChange: setActiveTab }),
+    const labelsHash = childrenArray.map((c) => c.props.label).join('|');
+    const handleReadyChange = (0, react_1.useCallback)((ready) => {
+        setIsReady(ready);
+    }, []);
+    // Reset isReady when children change (new page/tabs)
+    // Use useLayoutEffect to run synchronously before paint
+    (0, react_1.useLayoutEffect)(() => {
+        setIsReady(false);
+    }, [labelsHash]);
+    const inRouter = (0, react_router_dom_1.useInRouterContext)();
+    return (react_1.default.createElement(TabsView, { id: id, className: className, size: size, childrenArray: childrenArray, initialTab: initialTab, useActiveTab: inRouter ? useActiveTabWithRouter : useActiveTabWithoutRouter, isReady: isReady || forceReady, labelsHash: labelsHash, containerRef: containerRef, onReadyChange: handleReadyChange }));
+}
+function TabsView({ id, className, size, childrenArray, useActiveTab, initialTab, isReady, labelsHash, containerRef, onReadyChange, }) {
+    const { activeTab, setActiveTab } = useActiveTab(initialTab, id, childrenArray);
+    return (react_1.default.createElement(TabsContainer, { "data-component-name": "Markdoc/Tabs/Tabs", className: className, key: id, "$isReady": isReady },
+        react_1.default.createElement(TabList_1.TabList, { key: labelsHash, size: size, childrenArray: childrenArray, activeTab: activeTab, onTabChange: setActiveTab, containerRef: containerRef, onReadyChange: onReadyChange }),
         childrenArray.map((child, index) => {
             const { label } = child.props;
             const tabId = (0, utils_1.getTabId)(label, index);
             return label === activeTab ? (react_1.default.createElement(exports.TabContent, { key: `content-${tabId}`, id: `panel-${tabId}`, "aria-labelledby": `tab-${tabId}`, tabIndex: 0, role: "tabpanel" }, child.props.children)) : null;
         })));
 }
+/**
+ * Validates that the active tab exists in children and resets to initial tab if not found.
+ * Ensures tab state remains consistent when tab structure changes.
+ */
+function useValidateActiveTab(activeTab, setActiveTab, childrenArray, initialTab) {
+    (0, react_1.useEffect)(() => {
+        const availableLabels = childrenArray.map((child) => child.props.label);
+        if (activeTab && !availableLabels.includes(activeTab) && availableLabels.length > 0) {
+            setActiveTab(initialTab);
+        }
+    }, [childrenArray, activeTab, initialTab, setActiveTab]);
+}
+const useActiveTabWithRouter = (initialTab, tabsId, childrenArray) => {
+    const { activeTab, setActiveTab } = (0, hooks_1.useActiveTab)({ initialTab, tabsId });
+    useValidateActiveTab(activeTab, setActiveTab, childrenArray, initialTab);
+    return {
+        activeTab,
+        setActiveTab,
+    };
+};
+const useActiveTabWithoutRouter = (initialTab, _tabsId, childrenArray) => {
+    const [activeTab, setActiveTab] = (0, react_1.useState)(initialTab);
+    useValidateActiveTab(activeTab, setActiveTab, childrenArray, initialTab);
+    return {
+        activeTab,
+        setActiveTab,
+    };
+};
 const TabsContainer = styled_components_1.default.div `
   position: relative;
   color: var(--md-tabs-container-text-color);
@@ -80,6 +118,13 @@ const TabsContainer = styled_components_1.default.div `
     margin: 0;
     padding: 0;
   }
+
+  ${({ $isReady }) => !$isReady &&
+    (0, styled_components_1.css) `
+      opacity: 0;
+      pointer-events: none;
+      overflow: hidden;
+    `}
 `;
 exports.TabContent = styled_components_1.default.div `
   color: var(--md-tabs-content-text-color);

package/lib/markdoc/components/default.d.ts

@@ -20,3 +20,4 @@ export * from '../../markdoc/components/CodeWalkthrough/CodeToggle';
 export * from '../../markdoc/components/CodeWalkthrough/CodeContainer';
 export * from '../../markdoc/components/CodeGroup/CodeGroup';
 export * from '../../markdoc/components/Icon/Icon';
+export * from '../../markdoc/components/ConnectMCP/ConnectMCP';

package/lib/markdoc/components/default.js

@@ -36,4 +36,5 @@ __exportStar(require("../../markdoc/components/CodeWalkthrough/CodeToggle"), exp
 __exportStar(require("../../markdoc/components/CodeWalkthrough/CodeContainer"), exports);
 __exportStar(require("../../markdoc/components/CodeGroup/CodeGroup"), exports);
 __exportStar(require("../../markdoc/components/Icon/Icon"), exports);
+__exportStar(require("../../markdoc/components/ConnectMCP/ConnectMCP"), exports);
 //# sourceMappingURL=default.js.map

package/lib/markdoc/default.d.ts

@@ -22,6 +22,7 @@ import { input } from '../markdoc/tags/input';
 import { toggle } from '../markdoc/tags/code-toggle';
 import { codeGroup } from '../markdoc/tags/code-group';
 import { icon } from '../markdoc/tags/icon';
+import { connectMcp } from '../markdoc/tags/connect-mcp';
 export declare const tags: {
     [admonition.tagName]: import("@markdoc/markdoc").Schema & {
         attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
@@ -113,4 +114,9 @@ export declare const tags: {
             resolver?: string;
         }>;
     };
+    [connectMcp.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
 };

package/lib/markdoc/default.js

@@ -64,6 +64,7 @@ const input_1 = require("../markdoc/tags/input");
 const code_toggle_1 = require("../markdoc/tags/code-toggle");
 const code_group_1 = require("../markdoc/tags/code-group");
 const icon_1 = require("../markdoc/tags/icon");
+const connect_mcp_1 = require("../markdoc/tags/connect-mcp");
 exports.tags = {
     [admonition_1.admonition.tagName]: admonition_1.admonition.schema,
     [debug_1.debug.tagName]: debug_1.debug.schema,
@@ -83,5 +84,6 @@ exports.tags = {
     [input_1.input.tagName]: input_1.input.schema,
     [code_group_1.codeGroup.tagName]: code_group_1.codeGroup.schema,
     [icon_1.icon.tagName]: icon_1.icon.schema,
+    [connect_mcp_1.connectMcp.tagName]: connect_mcp_1.connectMcp.schema,
 };
 //# sourceMappingURL=default.js.map

package/lib/markdoc/tags/card.js

@@ -54,7 +54,6 @@ exports.card = {
             },
             to: { type: String, resolver: 'link' },
         },
-        children: ['paragraph', 'tag', 'list'],
     },
     tagName: 'card',
 };

package/lib/markdoc/tags/connect-mcp.d.ts

@@ -0,0 +1,2 @@
+import type { MarkdocSchemaWrapper } from '../../markdoc/tags/types';
+export declare const connectMcp: MarkdocSchemaWrapper;

package/lib/markdoc/tags/connect-mcp.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.connectMcp = void 0;
+exports.connectMcp = {
+    schema: {
+        render: 'ConnectMCP',
+        attributes: {
+            placement: {
+                type: String,
+                default: 'bottom',
+                matches: ['top', 'bottom'],
+            },
+            alignment: {
+                type: String,
+                default: 'start',
+                matches: ['start', 'end'],
+            },
+            options: {
+                type: Array,
+                default: ['cursor', 'vscode', 'copy'],
+            },
+        },
+        selfClosing: true,
+    },
+    tagName: 'connect-mcp',
+};
+//# sourceMappingURL=connect-mcp.js.map

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@redocly/theme",
-  "version": "0.59.0-rc.1",
+  "version": "0.59.0",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
     "redocly"
   ],
   "author": "team@redocly.com",
-  "license": "SEE LICENSE IN LICENSE",
+  "license": "MIT",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "exports": {
@@ -44,7 +44,7 @@
     "@types/highlight-words-core": "1.2.3",
     "@types/lodash.debounce": "4.0.9",
     "@types/lodash.throttle": "4.1.9",
-    "@types/node": "22.15.3",
+    "@types/node": "22.18.13",
     "@types/nprogress": "0.2.3",
     "@types/react": "^19.1.4",
     "@types/react-dom": "^19.1.4",
@@ -84,11 +84,11 @@
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "4.1.1",
     "nprogress": "0.2.0",
-    "openapi-sampler": "1.6.1",
+    "openapi-sampler": "1.6.2",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
-    "@redocly/config": "0.36.0-rc.1",
-    "@redocly/realm-asyncapi-sdk": "0.5.0-next.0"
+    "@redocly/config": "0.38.0",
+    "@redocly/realm-asyncapi-sdk": "0.5.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/Buttons/AIAssistantButton.tsx

@@ -21,7 +21,7 @@ interface AIAssistantButtonConfig {
 const defaultConfig: Required<AIAssistantButtonConfig> = {
   hide: false,
   inputType: 'button',
-  inputIcon: 'redocly',
+  inputIcon: 'sparkles',
 };
 
 const getIcon = (
@@ -56,8 +56,9 @@ const getIcon = (
 export function AIAssistantButton() {
   const [isOpen, setIsOpen] = useState(false);
   const themeConfig = useThemeConfig();
-  const { useTranslate } = useThemeHooks();
+  const { useTranslate, useTelemetry } = useThemeHooks();
   const { translate } = useTranslate();
+  const telemetry = useTelemetry();
 
   const buttonConfig = {
     ...defaultConfig,
@@ -75,6 +76,9 @@ export function AIAssistantButton() {
 
   const handleOpen = () => {
     setIsOpen(true);
+    telemetry.sendSearchAiOpenedMessage({
+      method: 'ai_trigger_button',
+    });
   };
 
   const handleClose = () => {

package/src/components/Buttons/ConnectMCPButton.tsx

@@ -0,0 +1,180 @@
+import React, { useMemo } from 'react';
+import styled from 'styled-components';
+
+import type { JSX } from 'react';
+import type { MCPOption } from '@redocly/theme/core/types';
+
+import { Dropdown } from '@redocly/theme/components/Dropdown/Dropdown';
+import { DropdownMenu } from '@redocly/theme/components/Dropdown/DropdownMenu';
+import { DropdownMenuItem } from '@redocly/theme/components/Dropdown/DropdownMenuItem';
+import { Button } from '@redocly/theme/components/Button/Button';
+import { CursorIcon } from '@redocly/theme/icons/CursorIcon/CursorIcon';
+import { VSCodeIcon } from '@redocly/theme/icons/VSCodeIcon/VSCodeIcon';
+import { CopyIcon } from '@redocly/theme/icons/CopyIcon/CopyIcon';
+import { CheckmarkFilledIcon } from '@redocly/theme/icons/CheckmarkFilledIcon/CheckmarkFilledIcon';
+import { ConnectIcon } from '@redocly/theme/icons/ConnectIcon/ConnectIcon';
+import { useConnectMCPButton } from '@redocly/theme/core/hooks/use-connect-mcp-button';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+
+type TriggerButtonProps = {
+  text: string;
+};
+
+const TriggerButton = React.memo(({ text }: TriggerButtonProps): JSX.Element => {
+  return (
+    <StyledButton variant="secondary" icon={<ConnectIcon />}>
+      {text}
+    </StyledButton>
+  );
+});
+
+type MenuOption = {
+  key: MCPOption;
+  icon: React.ComponentType;
+  titleTranslationKey: string;
+  titleDefault: string;
+  descriptionTranslationKey: string;
+  descriptionDefault: string;
+};
+
+const MENU_OPTIONS: MenuOption[] = [
+  {
+    key: 'cursor',
+    icon: CursorIcon,
+    titleTranslationKey: 'page.actions.connectMcp.cursor',
+    titleDefault: 'Connect to Cursor',
+    descriptionTranslationKey: 'page.actions.connectMcp.cursorDescription',
+    descriptionDefault: 'Install MCP server on Cursor',
+  },
+  {
+    key: 'vscode',
+    icon: VSCodeIcon,
+    titleTranslationKey: 'page.actions.connectMcp.vscode',
+    titleDefault: 'Connect to VS Code',
+    descriptionTranslationKey: 'page.actions.connectMcp.vscodeDescription',
+    descriptionDefault: 'Install MCP server on VS Code',
+  },
+  {
+    key: 'copy',
+    icon: CopyIcon,
+    titleTranslationKey: 'page.actions.connectMcp.copyConfig',
+    titleDefault: 'Copy MCP Configuration',
+    descriptionTranslationKey: 'page.actions.connectMcp.copyConfigDescription',
+    descriptionDefault: 'Copy MCP JSON Configuration',
+  },
+];
+
+export type ConnectMCPButtonProps = {
+  placement?: 'top' | 'bottom';
+  alignment?: 'start' | 'end';
+  options?: MCPOption[];
+};
+
+export function ConnectMCPButton({
+  placement = 'bottom',
+  alignment = 'end',
+  options = ['cursor', 'vscode', 'copy'],
+}: ConnectMCPButtonProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
+  const { isCopied, triggerButtonText, visibleOptions, handleAction } = useConnectMCPButton({
+    options,
+  });
+
+  const menuOptions = useMemo(
+    () => MENU_OPTIONS.filter((option) => visibleOptions.includes(option.key)),
+    [visibleOptions],
+  );
+
+  return (
+    <ConnectMCPButtonWrapper data-component-name="Buttons/ConnectMCPButton">
+      <Dropdown
+        trigger={<TriggerButton text={triggerButtonText} />}
+        triggerEvent="hover"
+        placement={placement}
+        alignment={alignment}
+        closeOnClick={false}
+      >
+        <DropdownMenu>
+          {menuOptions.map((option) => {
+            const Icon = option.icon;
+            const showCheckmark = option.key === 'copy' && isCopied;
+
+            return (
+              <DropdownMenuItem key={option.key} onAction={() => handleAction(option.key)}>
+                <MenuItemContent>
+                  <MenuItemIcon>
+                    {showCheckmark ? (
+                      <CheckmarkFilledIcon color="var(--color-success-base)" />
+                    ) : (
+                      <Icon />
+                    )}
+                  </MenuItemIcon>
+                  <MenuItemText>
+                    <MenuItemTitle>
+                      {translate(option.titleTranslationKey, option.titleDefault)}
+                    </MenuItemTitle>
+                    <MenuItemDescription>
+                      {translate(option.descriptionTranslationKey, option.descriptionDefault)}
+                    </MenuItemDescription>
+                  </MenuItemText>
+                </MenuItemContent>
+              </DropdownMenuItem>
+            );
+          })}
+        </DropdownMenu>
+      </Dropdown>
+    </ConnectMCPButtonWrapper>
+  );
+}
+
+const ConnectMCPButtonWrapper = styled.div`
+  display: inline-block;
+  position: relative;
+`;
+
+const StyledButton = styled(Button)`
+  --button-gap: var(--connect-mcp-button-gap);
+`;
+
+const MenuItemContent = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--connect-mcp-button-menu-item-gap);
+  padding: var(--connect-mcp-button-menu-item-padding-block)
+    var(--connect-mcp-button-menu-item-padding-inline);
+`;
+
+const MenuItemIcon = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--connect-mcp-button-menu-item-icon-size);
+  height: var(--connect-mcp-button-menu-item-icon-size);
+  flex-shrink: 0;
+  border: var(--connect-mcp-button-menu-item-icon-border);
+  border-radius: var(--connect-mcp-button-menu-item-icon-border-radius);
+  color: var(--connect-mcp-button-menu-item-icon-color);
+`;
+
+const MenuItemText = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--connect-mcp-button-menu-item-text-gap);
+  flex: 1;
+`;
+
+const MenuItemTitle = styled.div`
+  font-size: var(--connect-mcp-button-menu-item-title-font-size);
+  font-weight: var(--connect-mcp-button-menu-item-title-font-weight);
+  line-height: var(--connect-mcp-button-menu-item-title-line-height);
+  color: var(--connect-mcp-button-menu-item-title-color);
+`;
+
+const MenuItemDescription = styled.div`
+  font-size: var(--connect-mcp-button-menu-item-description-font-size);
+  font-weight: var(--connect-mcp-button-menu-item-description-font-weight);
+  line-height: var(--connect-mcp-button-menu-item-description-line-height);
+  color: var(--connect-mcp-button-menu-item-description-color);
+`;

package/src/components/Buttons/variables.ts

@@ -21,7 +21,7 @@ export const aiAssistantButton = css`
   /* Positioning */
   --ai-assistant-button-bottom: var(--spacing-xl);
   --ai-assistant-button-right: var(--spacing-xl);
-  --ai-assistant-button-z-index: 1000;
+  --ai-assistant-button-z-index: 50
 
   /* Typography */
   --ai-assistant-button-font-size: var(--font-size-base);
@@ -46,3 +46,44 @@ export const aiAssistantButton = css`
   /* Transition */
   --ai-assistant-button-transition: box-shadow 0.3s ease, transform 0.2s ease;
 `;
+
+export const connectMCPButton = css`
+  /**
+   * @tokens Connect MCP Button
+   * @presenter Color
+   */
+
+  /* Button gap */
+  --connect-mcp-button-gap: var(--spacing-xs);
+
+  /* Menu item layout */
+  --connect-mcp-button-menu-item-gap: var(--spacing-sm);
+  --connect-mcp-button-menu-item-padding-block: var(--spacing-xxs);
+  --connect-mcp-button-menu-item-padding-inline: 0;
+
+  /* Menu item icon */
+  --connect-mcp-button-menu-item-icon-size: 32px;
+  --connect-mcp-button-menu-item-icon-border-color: var(--border-color-secondary);
+  --connect-mcp-button-menu-item-icon-border-style: solid;
+  --connect-mcp-button-menu-item-icon-border-width: 1px;
+  --connect-mcp-button-menu-item-icon-border: var(--connect-mcp-button-menu-item-icon-border-width)
+    var(--connect-mcp-button-menu-item-icon-border-style)
+    var(--connect-mcp-button-menu-item-icon-border-color);
+  --connect-mcp-button-menu-item-icon-border-radius: var(--border-radius);
+  --connect-mcp-button-menu-item-icon-color: var(--icon-color-secondary);
+
+  /* Menu item text */
+  --connect-mcp-button-menu-item-text-gap: var(--spacing-xxs);
+
+  /* Menu item title */
+  --connect-mcp-button-menu-item-title-font-size: var(--font-size-base);
+  --connect-mcp-button-menu-item-title-font-weight: var(--font-weight-regular);
+  --connect-mcp-button-menu-item-title-line-height: var(--line-height-base);
+  --connect-mcp-button-menu-item-title-color: var(--text-color-secondary);
+
+  /* Menu item description */
+  --connect-mcp-button-menu-item-description-font-size: var(--font-size-sm);
+  --connect-mcp-button-menu-item-description-font-weight: var(--font-weight-regular);
+  --connect-mcp-button-menu-item-description-line-height: var(--line-height-sm);
+  --connect-mcp-button-menu-item-description-color: var(--text-color-description);
+`;

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

@@ -41,6 +41,7 @@ const InfoBarWrapper = styled.div<{ hoverEffect: boolean }>`
   transition: all 0.2s ease-in-out;
   height: 100%;
   padding: var(--catalog-card-gap);
+  margin-bottom: var(--spacing-xs);
 
   ${({ hoverEffect }) =>
     hoverEffect &&

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

@@ -46,7 +46,7 @@ export function CatalogEntityApiDescriptionRelations({
 }: CatalogEntityApiDescriptionRelationsProps): JSX.Element {
   return (
     <div data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityApiDescriptionRelations">
-      <Tabs key={entity.id} size={TabsSize.MEDIUM}>
+      <Tabs key={entity.id} forceReady={relations.length > 0} size={TabsSize.MEDIUM}>
         <TabItem
           label="Operations"
           icon={<MoleculesIcon />}

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

@@ -74,7 +74,7 @@ export function CatalogEntityTeamRelations({
 }: CatalogEntityTeamRelationsProps): JSX.Element {
   return (
     <div data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations">
-      <Tabs size={TabsSize.MEDIUM}>
+      <Tabs forceReady={relations.length > 0} size={TabsSize.MEDIUM}>
         <TabItem label="Members" icon={<PeopleIcon />} onClick={() => setFilter('type:user')}>
           <CatalogEntityRelationsTable
             key="members-table"

package/src/components/Catalog/CatalogEntityIcon.tsx

@@ -11,6 +11,7 @@ import { HierarchyIcon } from '@redocly/theme/icons/HierarchyIcon/HierarchyIcon'
 import { Image } from '@redocly/theme/components/Image/Image';
 import { PREDEFINED_ENTITY_TYPES, useThemeConfig } from '@redocly/theme/core';
 import { NoteIcon } from '@redocly/theme/icons/NoteIcon/NoteIcon';
+import { CubeIcon } from '@redocly/theme/icons/CubeIcon/CubeIcon';
 
 export type CatalogEntityIconProps = {
   entityType: string;
@@ -59,7 +60,7 @@ const getEntityIcon = ({
     );
   }
 
-  return <CodeIcon color="var(--catalog-entity-icon-color)" />; // @TODO: add default icon
+  return <CubeIcon color="var(--catalog-entity-icon-color)" />;
 };
 
 export function CatalogEntityIcon({

package/src/components/Catalog/CatalogFilter/CatalogFilter.tsx

@@ -26,6 +26,11 @@ export function CatalogFilter({
 }: CatalogFilterProps): JSX.Element | null {
   if (!filter.parentUsed) return null;
 
+  const filteredOptions = filter.filteredOptions || filter.options;
+  if (!filteredOptions || filteredOptions.length === 0) {
+    return null;
+  }
+
   const FilterComponent = filterComponents[(filter.type || 'checkboxes') as FilterTypes];
 
   return (

package/src/components/Catalog/CatalogTagsWithTooltip.tsx

@@ -23,11 +23,7 @@ export function CatalogTagsWithTooltip({
     if (showPlaceholder) {
       return (
         <CatalogTagsWrapper data-component-name="Catalog/CatalogTagsWithTooltip">
-          <Tag
-            variant="outline"
-            style={{ backgroundColor: 'var(--catalog-tags-placeholder-bg-color)' }}
-            color="grey"
-          >
+          <Tag style={{ backgroundColor: 'var(--catalog-tags-placeholder-bg-color)' }} color="grey">
             N/A
           </Tag>
         </CatalogTagsWrapper>

package/src/components/Catalog/variables.ts

@@ -97,7 +97,7 @@ export const catalog = css`
   /**
     * @tokens Catalog entity icon
     */
-  --catalog-entity-icon-color: var(--color-primary-base);
+  --catalog-entity-icon-color: var(--color-persian-green-8);
   --catalog-entity-border-color: var(--border-color-secondary);
   --catalog-entity-bg-color: var(--bg-color-tonal);