@redocly/theme 0.56.0-rc.2 → 0.56.1

package/lib/components/Admonition/Admonition.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+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 };
 };
@@ -29,10 +39,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Admonition = Admonition;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
-const WarningFilledIcon_1 = require("../../icons/WarningFilledIcon/WarningFilledIcon");
-const CheckmarkFilledIcon_1 = require("../../icons/CheckmarkFilledIcon/CheckmarkFilledIcon");
-const CloseFilledIcon_1 = require("../../icons/CloseFilledIcon/CloseFilledIcon");
-const InformationFilledIcon_1 = require("../../icons/InformationFilledIcon/InformationFilledIcon");
+const WarningFilledIcon_1 = require("@redocly/theme/icons/WarningFilledIcon/WarningFilledIcon");
+const CheckmarkFilledIcon_1 = require("@redocly/theme/icons/CheckmarkFilledIcon/CheckmarkFilledIcon");
+const CloseFilledIcon_1 = require("@redocly/theme/icons/CloseFilledIcon/CloseFilledIcon");
+const InformationFilledIcon_1 = require("@redocly/theme/icons/InformationFilledIcon/InformationFilledIcon");
 const IconsMap = {
     warning: WarningFilledIcon_1.WarningFilledIcon,
     success: CheckmarkFilledIcon_1.CheckmarkFilledIcon,

package/lib/components/Badge/Badge.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+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 };
 };

package/lib/components/Breadcrumbs/Breadcrumb.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Breadcrumb = Breadcrumb;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const Link_1 = require("../../components/Link/Link");
+const Link_1 = require("@redocly/theme/components/Link/Link");
 function Breadcrumb({ label, link, isActive, onClick }) {
     return (react_1.default.createElement(BreadcrumbWrapper, { "data-component-name": "Breadcrumbs/Breadcrumb", isLink: link != null, isActive: isActive, onClick: onClick }, link ? (react_1.default.createElement(BreadcrumbLink, { to: link }, label)) : (react_1.default.createElement(BreadcrumbText, null, label))));
 }

package/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Breadcrumbs = Breadcrumbs;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const hooks_1 = require("../../core/hooks");
-const Breadcrumb_1 = require("../../components/Breadcrumbs/Breadcrumb");
+const hooks_1 = require("@redocly/theme/core/hooks");
+const Breadcrumb_1 = require("@redocly/theme/components/Breadcrumbs/Breadcrumb");
 function Breadcrumbs(props) {
     const { useBreadcrumbs, useTelemetry } = (0, hooks_1.useThemeHooks)();
     const fileBreadcrumbs = useBreadcrumbs();
@@ -25,7 +25,7 @@ function Breadcrumbs(props) {
                         payload: {
                             link: breadcrumb.link,
                             position: idx + 1,
-                            total_breadcrumbs: breadcrumbs.length,
+                            totalBreadcrumbs: breadcrumbs.length,
                         },
                     });
                 } }),

package/lib/components/Button/Button.d.ts

@@ -13,13 +13,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';
 }
 export declare function generateClassName({ variant, tone, size, extraClass, }: ButtonProps): string;
 export declare const Button: import("styled-components").StyledComponent<React.FC<ButtonProps>, any, ButtonProps, never>;

package/lib/components/Button/Button.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+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 };
 };
@@ -30,7 +40,7 @@ exports.Button = void 0;
 exports.generateClassName = generateClassName;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
-const Link_1 = require("../../components/Link/Link");
+const Link_1 = require("@redocly/theme/components/Link/Link");
 const getBlink = () => (0, styled_components_1.keyframes) `
     0% {
         color: var(--button-content-color);
@@ -55,6 +65,7 @@ const StyledButtonLink = (0, styled_components_1.default)(Link_1.Link) `
 `;
 function generateClassName({ variant = 'secondary', tone = 'default', size = 'medium', extraClass = '', }) {
     const classNames = [
+        'button',
         extraClass,
         `button-tone-${tone}`,
         `button-variant-${variant}`,
@@ -82,6 +93,7 @@ const StyledButton = styled_components_1.default.button.attrs((props) => ({
   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);
@@ -160,7 +172,7 @@ const ButtonComponent = (props) => {
         props.children,
         props.icon && props.iconPosition === 'right' && props.icon));
     if (props.to) {
-        return (react_1.default.createElement(StyledButtonLink, { to: props.to, onClick: props.onClick }, button));
+        return (react_1.default.createElement(StyledButtonLink, { to: props.to, external: props.external, onClick: props.onClick }, button));
     }
     else {
         return button;

package/lib/components/Button/ButtonGroup.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+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 declare function ButtonGroup(props: ButtonGroupProps): JSX.Element;
+export {};

package/lib/components/Button/ButtonGroup.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonGroup = ButtonGroup;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+function ButtonGroup(props) {
+    const { variant = 'outlined', className = '', children, size = 'medium' } = props;
+    return (react_1.default.createElement(ButtonGroupWrapper, { "data-component-name": "Button/ButtonGroup", className: `button-group-${variant} button-group-size-${size} ${className}` }, children));
+}
+const ButtonGroupWrapper = styled_components_1.default.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;
+  }
+`;
+//# sourceMappingURL=ButtonGroup.js.map

package/lib/components/Button/variables.js

@@ -93,9 +93,12 @@ exports.button = (0, styled_components_1.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 */
@@ -103,11 +106,25 @@ exports.button = (0, styled_components_1.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 */
@@ -155,7 +172,8 @@ exports.button = (0, styled_components_1.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
@@ -165,6 +183,15 @@ exports.button = (0, styled_components_1.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/lib/components/Buttons/CopyButton.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { TooltipProps } from '../../components/Tooltip/Tooltip';
-import type { ButtonProps } from '../../components/Button/Button';
+import type { TooltipProps } from '@redocly/theme/components/Tooltip/Tooltip';
+import type { ButtonProps } from '@redocly/theme/components/Button/Button';
 export type CopyButtonProps = {
     data: unknown;
     type?: 'icon' | 'text' | 'compound';

package/lib/components/Buttons/CopyButton.js

@@ -15,21 +15,31 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+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.CopyButton = void 0;
 const react_1 = __importStar(require("react"));
-const utils_1 = require("../../core/utils");
-const hooks_1 = require("../../core/hooks");
-const Button_1 = require("../../components/Button/Button");
-const CopyIcon_1 = require("../../icons/CopyIcon/CopyIcon");
-const Tooltip_1 = require("../../components/Tooltip/Tooltip");
+const utils_1 = require("@redocly/theme/core/utils");
+const hooks_1 = require("@redocly/theme/core/hooks");
+const Button_1 = require("@redocly/theme/components/Button/Button");
+const CopyIcon_1 = require("@redocly/theme/icons/CopyIcon/CopyIcon");
+const Tooltip_1 = require("@redocly/theme/components/Tooltip/Tooltip");
 function CopyButtonComponent({ data, type = 'icon', toasterPlacement = 'top', toasterText, toasterDuration, buttonText, onCopyClick, dataTestId = 'copy-button', className, variant = 'text', size = 'small', disabled, fullWidth, tone, extraClass, }) {
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const tooltip = (0, hooks_1.useControl)();

package/lib/components/Buttons/EditPageButton.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.EditPageButton = EditPageButton;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const hooks_1 = require("../../core/hooks");
-const EditIcon_1 = require("../../icons/EditIcon/EditIcon");
-const Link_1 = require("../../components/Link/Link");
+const hooks_1 = require("@redocly/theme/core/hooks");
+const EditIcon_1 = require("@redocly/theme/icons/EditIcon/EditIcon");
+const Link_1 = require("@redocly/theme/components/Link/Link");
 function EditPageButton({ to }) {
     const { useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();

package/lib/components/Buttons/EmailButton.js

@@ -5,8 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EmailButton = EmailButton;
 const react_1 = __importDefault(require("react"));
-const Button_1 = require("../../components/Button/Button");
-const EmailIcon_1 = require("../../icons/EmailIcon/EmailIcon");
+const Button_1 = require("@redocly/theme/components/Button/Button");
+const EmailIcon_1 = require("@redocly/theme/icons/EmailIcon/EmailIcon");
 function EmailButton({ data, dataTestId = 'email-button' }) {
     const onClick = () => {
         window.location.href = `mailto:${data}`;

package/lib/components/Buttons/NewTabButton.js

@@ -5,8 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NewTabButton = NewTabButton;
 const react_1 = __importDefault(require("react"));
-const Button_1 = require("../../components/Button/Button");
-const ArrowUpRightIcon_1 = require("../../icons/ArrowUpRightIcon/ArrowUpRightIcon");
+const Button_1 = require("@redocly/theme/components/Button/Button");
+const ArrowUpRightIcon_1 = require("@redocly/theme/icons/ArrowUpRightIcon/ArrowUpRightIcon");
 function NewTabButton({ data, dataTestId = 'new-tab-button', }) {
     const onClick = () => {
         window.open(data, '_blank');

package/lib/components/Catalog/Catalog.d.ts

@@ -1,7 +1,7 @@
 import { JSX } from 'react';
 import { CatalogEntityConfig } from '@redocly/config';
-import { BffCatalogEntityList } from '../../core/types';
-import { CatalogSwitcherItem } from '../../core';
+import { BffCatalogEntityList } from '@redocly/theme/core/types';
+import { CatalogSwitcherItem } from '@redocly/theme/core/types/catalog';
 export type CatalogProps = {
     catalogConfig: CatalogEntityConfig;
     entitiesTypes: string[];

package/lib/components/Catalog/Catalog.js

@@ -6,18 +6,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Catalog = Catalog;
 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 H3_1 = require("../../components/Typography/H3");
-const FilterContent_1 = require("../../components/Filter/FilterContent");
-const Sidebar_1 = require("../../components/Sidebar/Sidebar");
-const CatalogSelector_1 = require("../../components/Catalog/CatalogSelector");
-const SidebarActions_1 = require("../../components/SidebarActions/SidebarActions");
-const CounterTag_1 = require("../../components/Tags/CounterTag");
-const FilterInput_1 = require("../../components/Filter/FilterInput");
-const CatalogViewModeToggle_1 = require("../../components/Catalog/CatalogViewModeToggle");
-const CatalogSortButton_1 = require("../../components/Catalog/CatalogSortButton");
-const CatalogEntities_1 = require("../../components/Catalog/CatalogEntities");
+const utils_1 = require("@redocly/theme/core/utils");
+const hooks_1 = require("@redocly/theme/core/hooks");
+const H3_1 = require("@redocly/theme/components/Typography/H3");
+const FilterContent_1 = require("@redocly/theme/components/Filter/FilterContent");
+const Sidebar_1 = require("@redocly/theme/components/Sidebar/Sidebar");
+const CatalogSelector_1 = require("@redocly/theme/components/Catalog/CatalogSelector");
+const SidebarActions_1 = require("@redocly/theme/components/SidebarActions/SidebarActions");
+const CounterTag_1 = require("@redocly/theme/components/Tags/CounterTag");
+const FilterInput_1 = require("@redocly/theme/components/Filter/FilterInput");
+const CatalogViewModeToggle_1 = require("@redocly/theme/components/Catalog/CatalogViewModeToggle");
+const CatalogSortButton_1 = require("@redocly/theme/components/Catalog/CatalogSortButton");
+const CatalogEntities_1 = require("@redocly/theme/components/Catalog/CatalogEntities");
 function Catalog(props) {
     const { catalogConfig, entitiesTypes, initialEntitiesList, catalogSwitcherItems } = props;
     const { useTranslate, useCatalog } = (0, hooks_1.useThemeHooks)();

package/lib/components/Catalog/CatalogActionsRow.d.ts

@@ -1,5 +1,5 @@
 import React, { JSX } from 'react';
-import { SortOption, CatalogViewMode } from '../../core/types';
+import { SortOption, CatalogViewMode } from '@redocly/theme/core/types';
 export type CatalogActionsRowProps = {
     searchQuery: string;
     setSearchQuery: (updatedTerm: string) => void;

package/lib/components/Catalog/CatalogActionsRow.js

@@ -7,9 +7,9 @@ exports.CatalogSearchInputWrapper = exports.CatalogControlsWrapper = exports.Cat
 exports.CatalogActionsRow = CatalogActionsRow;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const FilterInput_1 = require("../../components/Filter/FilterInput");
-const CatalogSortButton_1 = require("../../components/Catalog/CatalogSortButton");
-const CatalogViewModeToggle_1 = require("../../components/Catalog/CatalogViewModeToggle");
+const FilterInput_1 = require("@redocly/theme/components/Filter/FilterInput");
+const CatalogSortButton_1 = require("@redocly/theme/components/Catalog/CatalogSortButton");
+const CatalogViewModeToggle_1 = require("@redocly/theme/components/Catalog/CatalogViewModeToggle");
 function CatalogActionsRow({ searchQuery, setSearchQuery, sortOption, setSortOption, viewMode, onViewModeChange, style, }) {
     return (react_1.default.createElement(exports.CatalogActionsRowWrapper, { style: style },
         react_1.default.createElement(exports.CatalogSearchInputWrapper, null,

package/lib/components/Catalog/CatalogCardView/CatalogCard.d.ts

@@ -1,6 +1,6 @@
 import { JSX } from 'react';
 import { CatalogEntityConfig } from '@redocly/config';
-import { BffCatalogEntity } from '../../../core/types';
+import { BffCatalogEntity } from '@redocly/theme/core/types';
 export type CatalogCardProps = {
     entity: BffCatalogEntity;
     catalogConfig: CatalogEntityConfig;

package/lib/components/Catalog/CatalogCardView/CatalogCard.js

@@ -6,27 +6,29 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CatalogCard = CatalogCard;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const hooks_1 = require("../../../core/hooks");
-const CatalogHighlight_1 = require("../../../components/Catalog/CatalogHighlight");
-const GraphIcon_1 = require("../../../icons/GraphIcon/GraphIcon");
-const ArrowRightIcon_1 = require("../../../icons/ArrowRightIcon/ArrowRightIcon");
-const ArrowUpRightIcon_1 = require("../../../icons/ArrowUpRightIcon/ArrowUpRightIcon");
-const CatalogTagsWithTooltip_1 = require("../../../components/Catalog/CatalogTagsWithTooltip");
-const CatalogEntityIcon_1 = require("../../../components/Catalog/CatalogEntityIcon");
-const core_1 = require("../../../core");
+const hooks_1 = require("@redocly/theme/core/hooks");
+const CatalogHighlight_1 = require("@redocly/theme/components/Catalog/CatalogHighlight");
+const GraphIcon_1 = require("@redocly/theme/icons/GraphIcon/GraphIcon");
+const ArrowRightIcon_1 = require("@redocly/theme/icons/ArrowRightIcon/ArrowRightIcon");
+const ArrowUpRightIcon_1 = require("@redocly/theme/icons/ArrowUpRightIcon/ArrowUpRightIcon");
+const CatalogTagsWithTooltip_1 = require("@redocly/theme/components/Catalog/CatalogTagsWithTooltip");
+const CatalogEntityIcon_1 = require("@redocly/theme/components/Catalog/CatalogEntityIcon");
+const utils_1 = require("@redocly/theme/core/utils");
+const Tooltip_1 = require("@redocly/theme/components/Tooltip/Tooltip");
 function CatalogCard({ entity, catalogConfig }) {
     var _a, _b, _c;
     const { useTelemetry } = (0, hooks_1.useThemeHooks)();
     const telemetry = useTelemetry();
-    const pathPrefix = (0, core_1.getPathPrefix)();
+    const pathPrefix = (0, utils_1.getPathPrefix)();
     return (react_1.default.createElement(CatalogCardWrapper, { "data-component-name": "Catalog/CatalogCardView/CatalogCard", onClick: () => {
             window.location.assign(`${pathPrefix}/catalogs/${catalogConfig.slug}/entities/${entity.key}`);
             telemetry.send({ type: 'catalog_item.clicked' });
         } },
         react_1.default.createElement(CardContent, null,
             react_1.default.createElement(CardHeader, null,
-                react_1.default.createElement(HeaderIconWrapper, null,
-                    react_1.default.createElement(CatalogEntityIcon_1.CatalogEntityIcon, { entityType: entity.type })),
+                react_1.default.createElement(Tooltip_1.TooltipComponent, { tip: entity.type, placement: "bottom", className: "catalog" },
+                    react_1.default.createElement(HeaderIconWrapper, null,
+                        react_1.default.createElement(CatalogEntityIcon_1.CatalogEntityIcon, { entityType: entity.type, defaultColor: true }))),
                 react_1.default.createElement(CardTitle, null,
                     react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, entity.title))),
             react_1.default.createElement(CardDescription, null,
@@ -40,6 +42,7 @@ function CatalogCard({ entity, catalogConfig }) {
                                 backgroundColor: 'var(--catalog-card-icon-bg-color)',
                             },
                             icon: react_1.default.createElement(GraphIcon_1.GraphIcon, { color: "var(--color-green-8)" }),
+                            textTransform: 'none',
                         } })),
                 react_1.default.createElement(MetadataColumn, null,
                     react_1.default.createElement(MetadataLabel, null, "Owners:"),
@@ -49,6 +52,7 @@ function CatalogCard({ entity, catalogConfig }) {
                                 backgroundColor: 'var(--catalog-card-icon-bg-color)',
                                 borderRadius: 'var(--border-radius-xl)',
                             },
+                            textTransform: 'none',
                         } })))),
         react_1.default.createElement(Divider, null),
         react_1.default.createElement(CardFooter, null,
@@ -59,6 +63,7 @@ function CatalogCard({ entity, catalogConfig }) {
                     },
                     borderless: true,
                     color: 'grey',
+                    textTransform: 'none',
                 }, itemsToShow: 3 }),
             react_1.default.createElement(ArrowCircle, null,
                 react_1.default.createElement(ArrowRightIcon_1.ArrowRightIcon, { size: "16px" }),
@@ -118,6 +123,7 @@ const CardContent = styled_components_1.default.div `
   padding: var(--catalog-card-padding-vertical) var(--catalog-card-padding-horizontal);
 `;
 const CardFooter = styled_components_1.default.div `
+  height: var(--catalog-card-footer-height);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -129,8 +135,7 @@ const Divider = styled_components_1.default.div `
   background-color: var(--catalog-card-divider-color);
 `;
 const CatalogCardWrapper = styled_components_1.default.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/lib/components/Catalog/CatalogCardView/CatalogCardView.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { CatalogEntityConfig } from '@redocly/config';
-import { BffCatalogEntity } from '../../../core/types';
+import { BffCatalogEntity } from '@redocly/theme/core/types';
 export type CatalogCardViewProps = {
     entities: BffCatalogEntity[];
     catalogConfig: CatalogEntityConfig;

package/lib/components/Catalog/CatalogCardView/CatalogCardView.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CatalogCardView = CatalogCardView;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const CatalogCard_1 = require("../../../components/Catalog/CatalogCardView/CatalogCard");
+const CatalogCard_1 = require("@redocly/theme/components/Catalog/CatalogCardView/CatalogCard");
 function CatalogCardView({ entities, catalogConfig }) {
     return (react_1.default.createElement(CatalogCardsWrapper, { "data-component-name": "Catalog/CatalogCardView/CatalogCardView" }, entities.map((entity) => (react_1.default.createElement(CatalogCard_1.CatalogCard, { key: entity.id, entity: entity, catalogConfig: catalogConfig })))));
 }

package/lib/components/Catalog/CatalogEntities.d.ts

@@ -1,6 +1,6 @@
 import { JSX } from 'react';
 import { CatalogEntityConfig } from '@redocly/config';
-import { BffCatalogEntityList, SortOption } from '../../core/types';
+import { BffCatalogEntityList, SortOption } from '@redocly/theme/core/types';
 export type CatalogEntitiesProps = {
     catalogConfig: CatalogEntityConfig;
     excludedEntities?: CatalogEntityConfig['excludes'];