@redocly/theme 0.56.0-rc.2 → 0.56.0

package/lib/markdoc/components/Icon/Icon.js

@@ -0,0 +1,29 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Icon = Icon;
+const react_1 = __importDefault(require("react"));
+const CDNIcon_1 = require("../../../icons/CDNIcon/CDNIcon");
+const utils_1 = require("../../../core/utils");
+function Icon(props) {
+    const { name } = props, rest = __rest(props, ["name"]);
+    const resolvedIcon = (0, utils_1.resolveIcon)(name);
+    if (resolvedIcon.type === 'font-awesome') {
+        return react_1.default.createElement(CDNIcon_1.CDNIcon, Object.assign({ name: resolvedIcon.name, type: resolvedIcon.style }, rest));
+    }
+    return null;
+}
+//# sourceMappingURL=Icon.js.map

package/lib/markdoc/components/Tabs/Tab.d.ts

@@ -10,6 +10,7 @@ export type TabProps = {
     onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
     onClick: () => void;
     icon?: React.ReactNode;
+    iconRawContent?: string;
 };
-export declare function TabComponent({ tabId, label, size, disabled, setRef, onKeyDown, onClick, icon, }: TabProps): JSX.Element;
+export declare function TabComponent({ tabId, label, size, disabled, setRef, onKeyDown, onClick, icon, iconRawContent, }: TabProps): JSX.Element;
 export declare const Tab: import("styled-components").StyledComponent<typeof TabComponent, any, {}, never>;

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

@@ -8,17 +8,20 @@ exports.TabComponent = TabComponent;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const TabList_1 = require("../../../markdoc/components/Tabs/TabList");
-function TabComponent({ tabId, label, size, disabled, setRef, onKeyDown, onClick, icon, }) {
+const GenericIcon_1 = require("../../../icons/GenericIcon/GenericIcon");
+function TabComponent({ tabId, label, size, disabled, setRef, onKeyDown, onClick, icon, iconRawContent, }) {
     return (react_1.default.createElement(TabList_1.TabItem, { "data-component-name": "Markdoc/Tabs/Tab", size: size, tabIndex: 0 },
         react_1.default.createElement(TabList_1.TabButtonLink, { id: `tab-${tabId}`, role: "tab", "aria-selected": "false", "aria-controls": `panel-${tabId}`, tabIndex: -1, size: size, disabled: disabled, ref: setRef, onKeyDown: onKeyDown, onClick: onClick },
             react_1.default.createElement(LabelWrapper, null,
-                icon,
+                react_1.default.createElement(GenericIcon_1.GenericIcon, { icon: icon, rawContent: iconRawContent }),
                 label))));
 }
 const LabelWrapper = styled_components_1.default.div `
   display: flex;
   align-items: center;
   gap: 4px;
+  --icon-width: var(--md-tabs-icon-size);
+  --icon-height: var(--md-tabs-icon-size);
 `;
 exports.Tab = (0, styled_components_1.default)(TabComponent) ``;
 //# sourceMappingURL=Tab.js.map

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

@@ -9,7 +9,7 @@ export type TabItemProps = {
     disable?: boolean;
     onClick?: () => void;
     children: React.ReactNode;
-    icon?: React.ReactNode;
+    icon?: React.ReactNode | string;
 };
 type TabsProps = {
     children: React.ReactElement<TabItemProps>[];

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

@@ -98,6 +98,8 @@ exports.markdownTabs = (0, styled_components_1.css) `
 
   --md-tabs-tab-focused-padding: var(--spacing-unit); // @presenter Spacing
 
+  --md-tabs-icon-size: 16px; // @presenter Spacing
+
   // @tokens End
   `;
 //# sourceMappingURL=variables.js.map

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

@@ -18,3 +18,5 @@ export * from '../../markdoc/components/CodeWalkthrough/CodeStep';
 export * from '../../markdoc/components/CodeWalkthrough/Input';
 export * from '../../markdoc/components/CodeWalkthrough/CodeToggle';
 export * from '../../markdoc/components/CodeWalkthrough/CodeContainer';
+export * from '../../markdoc/components/CodeGroup/CodeGroup';
+export * from '../../markdoc/components/Icon/Icon';

package/lib/markdoc/components/default.js

@@ -34,4 +34,6 @@ __exportStar(require("../../markdoc/components/CodeWalkthrough/CodeStep"), expor
 __exportStar(require("../../markdoc/components/CodeWalkthrough/Input"), exports);
 __exportStar(require("../../markdoc/components/CodeWalkthrough/CodeToggle"), exports);
 __exportStar(require("../../markdoc/components/CodeWalkthrough/CodeContainer"), exports);
+__exportStar(require("../../markdoc/components/CodeGroup/CodeGroup"), exports);
+__exportStar(require("../../markdoc/components/Icon/Icon"), exports);
 //# sourceMappingURL=default.js.map

package/lib/markdoc/default.js

@@ -52,6 +52,8 @@ const code_walkthrough_1 = require("../markdoc/tags/code-walkthrough");
 const code_step_1 = require("../markdoc/tags/code-step");
 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");
 exports.tags = {
     [admonition_1.admonition.tagName]: admonition_1.admonition.schema,
     [debug_1.debug.tagName]: debug_1.debug.schema,
@@ -69,5 +71,7 @@ exports.tags = {
     [code_step_1.codeStep.tagName]: code_step_1.codeStep.schema,
     [code_toggle_1.toggle.tagName]: code_toggle_1.toggle.schema,
     [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,
 };
 //# sourceMappingURL=default.js.map

package/lib/markdoc/tags/card.js

@@ -14,7 +14,7 @@ exports.card = {
                 type: String,
                 resolver: 'link',
             },
-            icon: { type: String, resolver: 'inlineSvgOrImageLink' },
+            icon: { type: String, resolver: 'relativeOrCdnIcon' },
             lineClamp: {
                 type: Number,
             },

package/lib/markdoc/tags/code-group.d.ts

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

package/lib/markdoc/tags/code-group.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.codeGroup = void 0;
+const markdoc_1 = __importDefault(require("@markdoc/markdoc"));
+exports.codeGroup = {
+    schema: {
+        render: 'CodeGroup',
+        children: ['fence', 'tag'],
+        attributes: {
+            mode: { type: String, default: 'tabs', matches: ['tabs', 'dropdown'] },
+        },
+        transform(node, config) {
+            const attributes = node.transformAttributes(config);
+            const children = node.transformChildren(config);
+            return new markdoc_1.default.Tag('CodeGroup', attributes, children);
+        },
+    },
+    tagName: 'code-group',
+};
+//# sourceMappingURL=code-group.js.map

package/lib/markdoc/tags/code-snippet.js

@@ -9,7 +9,7 @@ const code_snippet_file_1 = require("../../markdoc/attributes/code-snippet-file"
 exports.codeSnippet = {
     schema: {
         attributes: {
-            file: { type: code_snippet_file_1.CodeSnippetFile, render: false, required: true },
+            file: { type: code_snippet_file_1.CodeSnippetFile, required: true },
             language: { type: String, render: true },
             title: { type: String, render: true },
             to: { type: [String, Number], render: false },

package/lib/markdoc/tags/icon.d.ts

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

package/lib/markdoc/tags/icon.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.icon = void 0;
+exports.icon = {
+    schema: {
+        render: 'Icon',
+        attributes: {
+            name: { type: String, required: true },
+            size: { type: String, default: '1em' },
+            color: { type: String, default: 'currentColor' },
+        },
+        selfClosing: true,
+    },
+    tagName: 'icon',
+};
+//# sourceMappingURL=icon.js.map

package/lib/markdoc/tags/tab.js

@@ -6,6 +6,7 @@ exports.tab = {
         attributes: {
             label: { type: String, required: true },
             disable: { type: Boolean, default: false },
+            icon: { type: String, resolver: 'relativeOrCdnIcon' },
         },
         render: 'div',
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.56.0-rc.2",
+  "version": "0.56.0",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -26,7 +26,7 @@
     "./markdoc/*": "./lib/markdoc/*.js"
   },
   "peerDependencies": {
-    "@markdoc/markdoc": "0.5.1",
+    "@markdoc/markdoc": "0.5.2",
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
     "react": "^19.1.0",
@@ -89,8 +89,8 @@
     "nprogress": "0.2.0",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
-    "@redocly/config": "0.26.3-rc.1",
-    "@redocly/realm-asyncapi-sdk": "0.2.0-next.1"
+    "@redocly/config": "0.28.0",
+    "@redocly/realm-asyncapi-sdk": "0.2.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/Breadcrumbs/Breadcrumbs.tsx

@@ -36,7 +36,7 @@ export function Breadcrumbs(props: {
                   payload: {
                     link: breadcrumb.link,
                     position: idx + 1,
-                    total_breadcrumbs: breadcrumbs.length,
+                    totalBreadcrumbs: breadcrumbs.length,
                   },
                 });
               }}

package/src/components/Button/Button.tsx

@@ -27,13 +27,13 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
   size?: ButtonSize;
   extraClass?: string;
   to?: string;
+  external?: boolean;
   icon?: JSX.Element;
   iconPosition?: 'left' | 'right';
   title?: string;
   tabIndex?: number;
   onClick?: (e?: any) => void;
   ref?: React.Ref<HTMLButtonElement>;
-  type?: 'button' | 'submit' | 'reset';
 }
 
 const getBlink = (): Keyframes => keyframes`
@@ -67,6 +67,7 @@ export function generateClassName({
   extraClass = '',
 }: ButtonProps) {
   const classNames = [
+    'button',
     extraClass,
     `button-tone-${tone}`,
     `button-variant-${variant}`,
@@ -96,6 +97,7 @@ const StyledButton = styled.button.attrs((props: ButtonProps) => ({
   background-color: var(--button-bg-color);
   border: var(--button-border-width) var(--button-border-style) var(--button-border-color);
   box-shadow: var(--button-box-shadow);
+  backdrop-filter: var(--button-backdrop-filter, none);
 
   font-weight: var(--button-font-weight);
   font-size: var(--button-font-size);
@@ -189,7 +191,7 @@ const ButtonComponent: React.FC<ButtonProps> = (props) => {
 
   if (props.to) {
     return (
-      <StyledButtonLink to={props.to} onClick={props.onClick}>
+      <StyledButtonLink to={props.to} external={props.external} onClick={props.onClick}>
         {button}
       </StyledButtonLink>
     );

package/src/components/Button/ButtonGroup.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { JSX } from 'react';
+import type { ButtonSize } from '@redocly/theme/components/Button/Button';
+
+type ButtonGroupVariant = 'outlined';
+
+type ButtonGroupProps = {
+  variant?: ButtonGroupVariant;
+  size?: ButtonSize;
+  children: React.ReactNode;
+  className?: string;
+};
+
+export function ButtonGroup(props: ButtonGroupProps): JSX.Element {
+  const { variant = 'outlined', className = '', children, size = 'medium' } = props;
+
+  return (
+    <ButtonGroupWrapper
+      data-component-name="Button/ButtonGroup"
+      className={`button-group-${variant} button-group-size-${size} ${className}`}
+    >
+      {children}
+    </ButtonGroupWrapper>
+  );
+}
+
+const ButtonGroupWrapper = styled.div`
+  display: flex;
+  line-height: var(--button-line-height);
+
+  .button {
+    border-radius: 0;
+  }
+
+  & > .button:first-child,
+  *:first-child > .button {
+    border-top-left-radius: var(--button-border-radius);
+    border-bottom-left-radius: var(--button-border-radius);
+  }
+
+  & > .button:last-child,
+  *:last-child > .button {
+    border-top-right-radius: var(--button-border-radius);
+    border-bottom-right-radius: var(--button-border-radius);
+  }
+
+  & > .button:not(:first-child),
+  *:not(:first-child) > .button {
+    border-left: none;
+  }
+`;

package/src/components/Button/variables.ts

@@ -91,9 +91,12 @@ export const button = css`
     * @tokens Button size
     */
 
-  .button-size-small {
+  .button-size-small,
+  .button-group-size-small .button {
+    --button-font-size: var(--font-size-base);
     --button-border-radius: var(--border-radius);
     --button-padding: 1px var(--spacing-sm);
+    --button-line-height: var(--line-height-base);
     
     --button-icon-size: 14px;
     --button-icon-padding: 5px; /* Padding for small buttons with only icon */
@@ -101,11 +104,25 @@ export const button = css`
     --button-icon-right-padding: 1px 10px 1px var(--spacing-sm); /* Padding for small buttons with icon on the right */
   }
 
-  .button-size-large {
+  .button-size-medium,
+  .button-group-size-medium .button {
+    --button-font-size: var(--font-size-base);
+    --button-border-radius: var(--border-radius-md);
+    --button-padding: 5px var(--spacing-sm);
+    --button-line-height: var(--line-height-base);
+
+    --button-icon-size: 16px;
+    --button-icon-padding: var(--spacing-xs); /* Padding for buttons with only icon */
+    --button-icon-left-padding: 5px var(--spacing-base) 5px 14px; /* Padding for buttons with icon on the left */
+    --button-icon-right-padding: 5px 14px 5px var(--spacing-base); /* Padding for buttons with icon on the right */
+  }
+
+  .button-size-large,
+  .button-group-size-large .button {
     --button-font-size: var(--font-size-lg); // @presenter FontSize
-    --button-line-height: var(--line-height-lg); // @presenter LineHeight
-    --border-radius: var(--border-radius-lg);
+    --button-border-radius: var(--border-radius-md);
     --button-padding: var(--spacing-xs) var(--spacing-md);
+    --button-line-height: var(--line-height-lg); // @presenter LineHeight
     
     --button-icon-size: 18px;
     --button-icon-padding: 11px; /* Padding for large buttons with only icon */
@@ -153,7 +170,8 @@ export const button = css`
     --button-border-color-danger-pressed: transparent;
   }
 
-  .button-variant-outlined {
+  .button-variant-outlined,
+  .button-group-outlined .button {
     --button-color: var(--button-content-color-custom); // @presenter Color
     --button-color-hover: var(--button-content-color-custom-hover); // @presenter Color
     --button-color-active: var(--button-content-color-custom-hover); // @presenter Color
@@ -163,6 +181,15 @@ export const button = css`
     --button-bg-color-disabled: transparent; // @presenter Color
     --button-border-width: 1px; 
     --button-border-width-disabled: 1px;
+    --button-bg-color: transparent; // @presenter Color
+    --button-border-color-disabled: var(--color-warm-grey-2); // @presenter Color
+    --button-border-color-danger: var(--color-raspberry-6); // @presenter Color
+    --button-border-color-danger-hover: var(--color-raspberry-7); // @presenter Color
+    --button-border-color-danger-pressed: var(--color-raspberry-8); // @presenter Color
+  }
+
+  .button-group-outlined .button {
+    --button-bg-color-hover: var(--color-hover-base); // @presenter Color
   }
 
   .button-variant-text {

package/src/components/Catalog/Catalog.tsx

@@ -8,7 +8,7 @@ import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { H3 } from '@redocly/theme/components/Typography/H3';
 import { FilterContent } from '@redocly/theme/components/Filter/FilterContent';
 import { Sidebar, SidebarHeader } from '@redocly/theme/components/Sidebar/Sidebar';
-import { CatalogSwitcherItem } from '@redocly/theme/core';
+import { CatalogSwitcherItem } from '@redocly/theme/core/types/catalog';
 import { CatalogSelector } from '@redocly/theme/components/Catalog/CatalogSelector';
 import { SidebarActions } from '@redocly/theme/components/SidebarActions/SidebarActions';
 import { CounterTag } from '@redocly/theme/components/Tags/CounterTag';

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

@@ -10,7 +10,8 @@ import { ArrowRightIcon } from '@redocly/theme/icons/ArrowRightIcon/ArrowRightIc
 import { ArrowUpRightIcon } from '@redocly/theme/icons/ArrowUpRightIcon/ArrowUpRightIcon';
 import { CatalogTagsWithTooltip } from '@redocly/theme/components/Catalog/CatalogTagsWithTooltip';
 import { CatalogEntityIcon } from '@redocly/theme/components/Catalog/CatalogEntityIcon';
-import { getPathPrefix } from '@redocly/theme/core';
+import { getPathPrefix } from '@redocly/theme/core/utils';
+import { TooltipComponent } from '@redocly/theme/components/Tooltip/Tooltip';
 
 export type CatalogCardProps = {
   entity: BffCatalogEntity;
@@ -34,9 +35,11 @@ export function CatalogCard({ entity, catalogConfig }: CatalogCardProps): JSX.El
     >
       <CardContent>
         <CardHeader>
-          <HeaderIconWrapper>
-            <CatalogEntityIcon entityType={entity.type} />
-          </HeaderIconWrapper>
+          <TooltipComponent tip={entity.type} placement="bottom" className="catalog">
+            <HeaderIconWrapper>
+              <CatalogEntityIcon entityType={entity.type} defaultColor={true} />
+            </HeaderIconWrapper>
+          </TooltipComponent>
           <CardTitle>
             <CatalogHighlight>{entity.title}</CatalogHighlight>
           </CardTitle>
@@ -57,6 +60,7 @@ export function CatalogCard({ entity, catalogConfig }: CatalogCardProps): JSX.El
                   backgroundColor: 'var(--catalog-card-icon-bg-color)',
                 },
                 icon: <GraphIcon color="var(--color-green-8)" />,
+                textTransform: 'none',
               }}
             />
           </MetadataColumn>
@@ -71,6 +75,7 @@ export function CatalogCard({ entity, catalogConfig }: CatalogCardProps): JSX.El
                   backgroundColor: 'var(--catalog-card-icon-bg-color)',
                   borderRadius: 'var(--border-radius-xl)',
                 },
+                textTransform: 'none',
               }}
             />
           </MetadataColumn>
@@ -89,6 +94,7 @@ export function CatalogCard({ entity, catalogConfig }: CatalogCardProps): JSX.El
             },
             borderless: true,
             color: 'grey',
+            textTransform: 'none',
           }}
           itemsToShow={3}
         />
@@ -163,6 +169,7 @@ const CardContent = styled.div`
 `;
 
 const CardFooter = styled.div`
+  height: var(--catalog-card-footer-height);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -176,8 +183,7 @@ const Divider = styled.div`
 `;
 
 const CatalogCardWrapper = styled.div`
-  min-height: var(--catalog-card-min-height);
-  height: 100%;
+  height: var(--catalog-card-height);
   color: var(--catalog-card-text-color);
   font-size: var(--catalog-card-font-size);
   font-weight: var(--catalog-card-font-weight);

package/src/components/Catalog/CatalogEntitiesEmptyState.tsx

@@ -1,12 +1,35 @@
 import React, { JSX } from 'react';
 import styled from 'styled-components';
 
-export function CatalogEntitiesEmptyState(): JSX.Element {
+import { HexagonIcon } from '@redocly/theme/icons/HexagonIcon/HexagonIcon';
+
+interface CatalogEntitiesEmptyStateProps {
+  listType?: 'default' | 'team';
+}
+
+export function CatalogEntitiesEmptyState({
+  listType = 'default',
+}: CatalogEntitiesEmptyStateProps): JSX.Element {
+  if (listType === 'team') {
+    return (
+      <EmptyStateWrapper data-component-name="Catalog/CatalogEntitiesEmptyState">
+        <EmptyStateIconWrapper>
+          <HexagonIcon size="21px" color="var(--color-warm-grey-7)" />
+        </EmptyStateIconWrapper>
+        <EmptyStateHeader>No team members yet</EmptyStateHeader>
+        <EmptyStateText>Your team members will appear here</EmptyStateText>
+        <EmptyStateText>once they&apos;ve been added to the team.</EmptyStateText>
+      </EmptyStateWrapper>
+    );
+  }
   return (
     <EmptyStateWrapper data-component-name="Catalog/CatalogEntitiesEmptyState">
-      <EmptyStateHeader>No entities yet</EmptyStateHeader>
-      <EmptyStateText>Start by adding your first entity to</EmptyStateText>
-      <EmptyStateText>begin building your catalog.</EmptyStateText>
+      <EmptyStateIconWrapper>
+        <HexagonIcon size="21px" color="var(--color-warm-grey-7)" />
+      </EmptyStateIconWrapper>
+      <EmptyStateHeader>No entities found</EmptyStateHeader>
+      <EmptyStateText>Try adjusting your search criteria or</EmptyStateText>
+      <EmptyStateText>check back later for new additions.</EmptyStateText>
     </EmptyStateWrapper>
   );
 }
@@ -21,6 +44,17 @@ const EmptyStateWrapper = styled.div`
   min-height: var(--catalog-empty-state-min-height);
 `;
 
+const EmptyStateIconWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--color-warm-grey-2);
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  margin-bottom: var(--spacing-xxs);
+`;
+
 const EmptyStateHeader = styled.p`
   color: var(--catalog-empty-state-header-text-color);
   font-size: var(--catalog-empty-state-header-font-size);

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

@@ -16,16 +16,15 @@ import { Menu } from '@redocly/theme/components/Menu/Menu';
 import { Button } from '@redocly/theme/components/Button/Button';
 import { CatalogEntityRelations } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelations';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
-
-import { SidebarActions } from '../../SidebarActions/SidebarActions';
+import { SidebarActions } from '@redocly/theme/components/SidebarActions/SidebarActions';
+import { CatalogEntitySchema } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntitySchema';
+import { CatalogEntityMethodAndPath } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityMethodAndPath';
 
 export type CatalogEntityProps = {
   entity: BffCatalogEntity;
   entitiesCatalogConfig: EntitiesCatalogConfig;
   catalogConfig: CatalogEntityConfig;
   initialRelations: BffCatalogRelatedEntityList;
-  mainCatalogLabelTranslationKey?: string;
-  mainCatalogSlug?: string;
 };
 
 export function CatalogEntity({
@@ -33,16 +32,31 @@ export function CatalogEntity({
   entitiesCatalogConfig,
   catalogConfig,
   initialRelations,
-  mainCatalogLabelTranslationKey,
-  mainCatalogSlug,
 }: CatalogEntityProps) {
   const { useTranslate, useCatalog } = useThemeHooks();
   const { translate } = useTranslate();
   const linkToMainCatalog = `catalogs/${catalogConfig.slug}`;
   const linkToMainCatalogLabel = translate(catalogConfig.titleTranslationKey);
 
-  const { layout, collapsedSidebar, onChangeViewClick, onChangeCollapseSidebarClick } =
-    useCatalog();
+  const {
+    layout,
+    collapsedSidebar,
+    onChangeViewClick,
+    onChangeCollapseSidebarClick,
+    searchQuery,
+    setSearchQuery,
+  } = useCatalog();
+
+  const renderEntityContent = (): React.ReactElement => {
+    switch (entity.type) {
+      case 'data-schema':
+        return <CatalogEntitySchema entity={entity} />;
+      case 'api-operation':
+        return <CatalogEntityMethodAndPath entity={entity} />;
+      default:
+        return <CatalogEntityMetadata entity={entity} />;
+    }
+  };
 
   return (
     <CatalogPageWrapper data-component-name="Catalog/CatalogEntity/CatalogEntity">
@@ -92,14 +106,6 @@ export function CatalogEntity({
       <CatalogPageContent>
         <Breadcrumbs
           additionalBreadcrumbs={[
-            ...(mainCatalogLabelTranslationKey
-              ? [
-                  {
-                    label: translate(mainCatalogLabelTranslationKey),
-                    link: `catalogs/${mainCatalogSlug}`,
-                  },
-                ]
-              : []),
             { label: linkToMainCatalogLabel, link: linkToMainCatalog },
             { label: entity.title },
           ]}
@@ -112,7 +118,7 @@ export function CatalogEntity({
           />
           <CatalogEntityProperties entity={entity} />
           <CatalogTwoColumnsSection>
-            <CatalogEntityMetadata entity={entity} />
+            {renderEntityContent()}
             <CatalogEntityLinks entity={entity} />
           </CatalogTwoColumnsSection>
           <CatalogEntityRelations
@@ -120,6 +126,8 @@ export function CatalogEntity({
             entitiesCatalogConfig={entitiesCatalogConfig}
             catalogConfig={catalogConfig}
             initialRelations={initialRelations}
+            searchQuery={searchQuery}
+            setSearchQuery={setSearchQuery}
           />
         </CatalogEntityPageWrapper>
       </CatalogPageContent>