@redocly/theme 0.59.0-next.0 → 0.59.0-next.10

package/lib/components/Buttons/CopyButton.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;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CopyButton = void 0;
 const react_1 = __importStar(require("react"));

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

@@ -0,0 +1 @@
+export declare const aiAssistantButton: import("styled-components").FlattenSimpleInterpolation;

package/lib/components/Buttons/variables.dark.d.ts

@@ -0,0 +1 @@
+export declare const aiAssistantButtonDarkMode: import("styled-components").FlattenSimpleInterpolation;

package/lib/components/Buttons/variables.dark.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.aiAssistantButtonDarkMode = void 0;
+const styled_components_1 = require("styled-components");
+exports.aiAssistantButtonDarkMode = (0, styled_components_1.css) `
+
+ /* Background color */
+ --ai-assistant-button-bg-color: var(--color-warm-grey-4);
+`;
+//# sourceMappingURL=variables.dark.js.map

package/lib/components/Buttons/variables.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.aiAssistantButton = void 0;
+const styled_components_1 = require("styled-components");
+exports.aiAssistantButton = (0, styled_components_1.css) `
+  /**
+   * @tokens AI Assistant Button
+   * @presenter Color
+   */
+
+  /* Button sizing */
+  --ai-assistant-button-icon-size: 40px;
+  --ai-assistant-button-text-height: 40px;
+  --ai-assistant-button-text-padding: var(--spacing-sm) var(--spacing-md);
+  --ai-assistant-button-border-radius-icon: 50%;
+  --ai-assistant-button-border-radius-text: 1.75rem;
+  --ai-assistant-button-min-width: auto;
+
+  /* Icon sizing */
+  --ai-assistant-button-icon-icon-size: 18px;
+  --ai-assistant-button-text-icon-size: 20px;
+
+  /* Positioning */
+  --ai-assistant-button-bottom: var(--spacing-xl);
+  --ai-assistant-button-right: var(--spacing-xl);
+  --ai-assistant-button-z-index: 50
+
+  /* Typography */
+  --ai-assistant-button-font-size: var(--font-size-base);
+  --ai-assistant-button-font-weight: var(--font-weight-medium);
+  --ai-assistant-button-gap: var(--spacing-xs);
+
+  /* Background color */
+  --ai-assistant-button-bg-color: var(--color-static-white);
+
+  /* Icon colors */
+  --ai-assistant-button-redocly-icon-color: #297AFE;
+
+  /* Transform */
+  --ai-assistant-button-transform-hover: none;
+  --ai-assistant-button-transform-active: translateY(0);
+
+  /* Shadow */
+  --ai-assistant-button-shadow-hover:
+    2px 1px 12px 4px rgba(143, 98, 254, 0.2),
+    -3px -2px 24px 0px rgba(41, 122, 254, 0.2);
+
+  /* Transition */
+  --ai-assistant-button-transition: box-shadow 0.3s ease, transform 0.2s ease;
+`;
+//# sourceMappingURL=variables.js.map

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

@@ -1,11 +1,17 @@
 import { JSX } from 'react';
 import { CatalogEntityConfig } from '@redocly/config';
 import { BffCatalogEntityList, CatalogSwitcherItem, CatalogViewMode } from '../../core/types';
+type CatalogFiltersWithCounts = Record<string, {
+    value: string;
+    count: number;
+}[]>;
 export type CatalogProps = {
     catalogConfig: CatalogEntityConfig;
+    filters?: CatalogFiltersWithCounts;
     entitiesTypes: string[];
     initialEntitiesList?: BffCatalogEntityList;
     catalogSwitcherItems: CatalogSwitcherItem[];
     initialViewMode?: CatalogViewMode;
 };
 export declare function Catalog(props: CatalogProps): JSX.Element;
+export {};

package/lib/components/Catalog/Catalog.js

@@ -9,7 +9,7 @@ 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 CatalogFilterContent_1 = require("../../components/Catalog/CatalogFilter/CatalogFilterContent");
 const Sidebar_1 = require("../../components/Sidebar/Sidebar");
 const CatalogSelector_1 = require("../../components/Catalog/CatalogSelector");
 const SidebarActions_1 = require("../../components/SidebarActions/SidebarActions");
@@ -19,9 +19,10 @@ const CatalogViewModeToggle_1 = require("../../components/Catalog/CatalogViewMod
 const CatalogSortButton_1 = require("../../components/Catalog/CatalogSortButton");
 const CatalogEntities_1 = require("../../components/Catalog/CatalogEntities");
 const customCatalogOptionsCasing = (str) => {
-    if (!str)
-        return str;
-    const words = str.split(/[\s-_]+/);
+    const trimmedStr = str.trim();
+    if (!trimmedStr)
+        return trimmedStr;
+    const words = trimmedStr.split(/[\s-_]+/);
     return words
         .map((word, index) => {
         if (index === 0 && word.toLowerCase() === 'api') {
@@ -32,13 +33,13 @@ const customCatalogOptionsCasing = (str) => {
         .join(' ');
 };
 function Catalog(props) {
-    const { catalogConfig, entitiesTypes, initialEntitiesList, catalogSwitcherItems, initialViewMode, } = props;
+    const { catalogConfig, filters: serverFilters, entitiesTypes, initialEntitiesList, catalogSwitcherItems, initialViewMode, } = props;
     const { useTranslate, useCatalog } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
-    const { filters, searchQuery, setSearchQuery, filterQuery, sortOption, setSortOption, handleSortClick, isColumnSorted, viewMode, setViewMode, entitiesCounter, setEntitiesCounter, onChangeViewClick, onChangeCollapseSidebarClick, layout, collapsedSidebar, } = useCatalog(catalogConfig, (initialEntitiesList === null || initialEntitiesList === void 0 ? void 0 : initialEntitiesList.page.total) || 0, initialViewMode);
+    const { filters, searchQuery, setSearchQuery, filterQuery, sortOption, setSortOption, handleSortClick, isColumnSorted, viewMode, setViewMode, entitiesCounter, setEntitiesCounter, onChangeViewClick, onChangeCollapseSidebarClick, layout, collapsedSidebar, } = useCatalog(catalogConfig, serverFilters, (initialEntitiesList === null || initialEntitiesList === void 0 ? void 0 : initialEntitiesList.page.total) || 0, initialViewMode);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(CatalogPageWrapper, { "data-component-name": "Catalog/Catalog" },
-            react_1.default.createElement(FiltersSidebar, { collapsed: collapsedSidebar, header: collapsedSidebar ? null : (react_1.default.createElement(CatalogSelector_1.CatalogSelector, { catalogSwitcherItems: catalogSwitcherItems, setSearchQuery: setSearchQuery, setSortOption: setSortOption })), menu: react_1.default.createElement(FilterContent_1.FilterContent, { setFilterTerm: setSearchQuery, filters: filters, filterTerm: searchQuery, hideSearch: true, showCounter: false, filterValuesCasing: customCatalogOptionsCasing }), footer: react_1.default.createElement(SidebarActions_1.SidebarActions, { layout: layout, collapsedSidebar: collapsedSidebar, isApiDocs: false, onChangeViewClick: onChangeViewClick, onChangeCollapseSidebarClick: onChangeCollapseSidebarClick }) }),
+            react_1.default.createElement(FiltersSidebar, { collapsed: collapsedSidebar, header: collapsedSidebar ? null : (react_1.default.createElement(CatalogSelector_1.CatalogSelector, { catalogSwitcherItems: catalogSwitcherItems, setSearchQuery: setSearchQuery, setSortOption: setSortOption })), menu: react_1.default.createElement(CatalogFilterContent_1.CatalogFilterContent, { setFilterTerm: setSearchQuery, filters: filters, filterTerm: searchQuery, hideSearch: true, showCounter: true, filterValuesCasing: customCatalogOptionsCasing }), footer: react_1.default.createElement(SidebarActions_1.SidebarActions, { layout: layout, collapsedSidebar: collapsedSidebar, isApiDocs: false, onChangeViewClick: onChangeViewClick, onChangeCollapseSidebarClick: onChangeCollapseSidebarClick }) }),
             react_1.default.createElement(CatalogPageContent, null,
                 react_1.default.createElement(CatalogPageDescription, null,
                     react_1.default.createElement(CatalogTitleWrapper, null,
@@ -51,7 +52,7 @@ function Catalog(props) {
                     react_1.default.createElement(CatalogDescription, { "data-translation-key": catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.descriptionTranslationKey }, translate(catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.descriptionTranslationKey))),
                 react_1.default.createElement(CatalogActionsRow, null,
                     react_1.default.createElement(CatalogSearchInputWrapper, null,
-                        react_1.default.createElement(FilterInput_1.FilterInput, { value: searchQuery, onChange: (updatedTerm) => setSearchQuery(updatedTerm) })),
+                        react_1.default.createElement(FilterInput_1.FilterInput, { value: searchQuery, onChange: (updatedTerm) => setSearchQuery(updatedTerm), dataTestId: "catalog-search-input" })),
                     react_1.default.createElement(CatalogControlsWrapper, null,
                         react_1.default.createElement(CatalogSortButton_1.CatalogSortButton, { onSortChange: setSortOption, currentSort: sortOption }),
                         react_1.default.createElement(CatalogViewModeToggle_1.CatalogViewModeToggle, { viewMode: viewMode, onViewModeChange: setViewMode }))),

package/lib/components/Catalog/CatalogEntities.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;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CatalogEntities = CatalogEntities;
 const react_1 = __importStar(require("react"));

package/lib/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph.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/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph.lazy.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;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CatalogEntityRelationsGraph = void 0;
 const utils_1 = require("../../../../core/utils");

package/lib/components/Catalog/CatalogEntity/CatalogEntityInfoBar.js

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

package/lib/components/Catalog/CatalogEntity/CatalogEntityMetadata.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 __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)

package/lib/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityApiDescriptionRelations.js

@@ -13,7 +13,7 @@ const MoleculesIcon_1 = require("../../../../icons/MoleculesIcon/MoleculesIcon")
 const NetworkIcon_1 = require("../../../../icons/NetworkIcon/NetworkIcon");
 function CatalogEntityApiDescriptionRelations({ entity, relations, query, searchQuery, setSearchQuery, setFilter, entitiesCatalogConfig, catalogConfig, sortOption, setSortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, }) {
     return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityApiDescriptionRelations" },
-        react_1.default.createElement(Tabs_1.Tabs, { key: entity.id, size: Tabs_1.TabsSize.MEDIUM },
+        react_1.default.createElement(Tabs_1.Tabs, { key: entity.id, forceReady: relations.length > 0, size: Tabs_1.TabsSize.MEDIUM },
             react_1.default.createElement(TabItem, { label: "Operations", icon: react_1.default.createElement(MoleculesIcon_1.MoleculesIcon, null), onClick: () => setFilter('type:api-operation') },
                 react_1.default.createElement(CatalogEntityDefaultRelations_1.CatalogEntityDefaultRelations, { key: "operations-table", entity: entity, relations: relations, query: query, searchQuery: searchQuery, setSearchQuery: setSearchQuery, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, sortOption: sortOption, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore, shouldShowHeading: false, listType: "api-operation" })),
             react_1.default.createElement(TabItem, { label: "Schemas", icon: react_1.default.createElement(NetworkIcon_1.NetworkIcon, null), onClick: () => setFilter('type:data-schema') },

package/lib/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelations.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;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CatalogEntityRelations = CatalogEntityRelations;
 const react_1 = __importStar(require("react"));

package/lib/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations.js

@@ -40,7 +40,7 @@ const teamColumns = [
 ];
 function CatalogEntityTeamRelations({ entity, relations, query, searchQuery, setSearchQuery, setFilter, entitiesCatalogConfig, catalogConfig, sortOption, setSortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, }) {
     return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations" },
-        react_1.default.createElement(Tabs_1.Tabs, { size: Tabs_1.TabsSize.MEDIUM },
+        react_1.default.createElement(Tabs_1.Tabs, { forceReady: relations.length > 0, size: Tabs_1.TabsSize.MEDIUM },
             react_1.default.createElement(TabItem, { label: "Members", icon: react_1.default.createElement(PeopleIcon_1.PeopleIcon, null), onClick: () => setFilter('type:user') },
                 react_1.default.createElement(CatalogEntityRelationsTable_1.CatalogEntityRelationsTable, { key: "members-table", entity: entity, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, relations: relations, query: query, searchQuery: searchQuery, setSearchQuery: setSearchQuery, columns: teamColumns, sortOption: sortOption, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore, listType: "team" })),
             react_1.default.createElement(TabItem, { label: "Related entities", icon: react_1.default.createElement(EntityTypeIcon_1.EntityTypeIcon, null), onClick: () => setFilter('-type:user') },

package/lib/components/Catalog/CatalogEntity/CatalogEntitySchema.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/Catalog/CatalogEntityIcon.js

@@ -14,6 +14,7 @@ const HierarchyIcon_1 = require("../../icons/HierarchyIcon/HierarchyIcon");
 const Image_1 = require("../../components/Image/Image");
 const core_1 = require("../../core");
 const NoteIcon_1 = require("../../icons/NoteIcon/NoteIcon");
+const CubeIcon_1 = require("../../icons/CubeIcon/CubeIcon");
 const getIconColor = (entityType) => `var(--catalog-entity-icon-color-${entityType})`;
 const getEntityIcon = ({ entityType, defaultColor, forceColor, entitiesCatalogConfig, }) => {
     var _a, _b;
@@ -34,7 +35,7 @@ const getEntityIcon = ({ entityType, defaultColor, forceColor, entitiesCatalogCo
     if ((iconConfig === null || iconConfig === void 0 ? void 0 : iconConfig.src) || (iconConfig === null || iconConfig === void 0 ? void 0 : iconConfig.srcSet)) {
         return (react_1.default.createElement(Image_1.Image, { src: iconConfig === null || iconConfig === void 0 ? void 0 : iconConfig.src, srcSet: iconConfig === null || iconConfig === void 0 ? void 0 : iconConfig.srcSet, alt: `${entityType} icon`, width: "16", height: "16" }));
     }
-    return react_1.default.createElement(CodeIcon_1.CodeIcon, { color: "var(--catalog-entity-icon-color)" }); // @TODO: add default icon
+    return react_1.default.createElement(CubeIcon_1.CubeIcon, { color: "var(--catalog-entity-icon-color)" });
 };
 function CatalogEntityIcon({ entityType, defaultColor = false, forceColor, }) {
     const themeConfig = (0, core_1.useThemeConfig)();

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

@@ -0,0 +1,6 @@
+import type { JSX } from 'react';
+import type { FilterProps } from '../../../core/types';
+export type CatalogFilterProps = FilterProps & {
+    className?: string;
+};
+export declare function CatalogFilter({ filter, filterValuesCasing, showCounter, className, }: CatalogFilterProps): JSX.Element | null;

package/lib/components/Catalog/CatalogFilter/CatalogFilter.js

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogFilter = CatalogFilter;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const CatalogFilterSelect_1 = require("../../../components/Catalog/CatalogFilter/CatalogFilterSelect");
+const CatalogFilterCheckboxes_1 = require("../../../components/Catalog/CatalogFilter/CatalogFilterCheckboxes");
+const CatalogFilterDateRange_1 = require("../../../components/Catalog/CatalogFilter/CatalogFilterDateRange");
+const filterComponents = {
+    select: CatalogFilterSelect_1.CatalogFilterSelect,
+    'date-range': CatalogFilterDateRange_1.CatalogFilterDateRange,
+    checkboxes: CatalogFilterCheckboxes_1.CatalogFilterCheckboxes,
+};
+function CatalogFilter({ filter, filterValuesCasing, showCounter = true, className, }) {
+    if (!filter.parentUsed)
+        return null;
+    const filteredOptions = filter.filteredOptions || filter.options;
+    if (!filteredOptions || filteredOptions.length === 0) {
+        return null;
+    }
+    const FilterComponent = filterComponents[(filter.type || 'checkboxes')];
+    return (react_1.default.createElement(CatalogFilterGroup, { className: className, "data-component-name": "Catalog/CatalogFilter", key: filter.property + filter.title },
+        react_1.default.createElement(FilterComponent, { filter: filter, filterValuesCasing: filterValuesCasing, showCounter: showCounter })));
+}
+const CatalogFilterGroup = styled_components_1.default.div `
+  padding: var(--filter-group-padding);
+  display: flex;
+  flex-direction: column;
+  gap: var(--filter-group-gap);
+  border-bottom: 1px solid var(--catalog-table-border-color);
+
+  &:first-child {
+    border-top: 1px solid var(--catalog-table-border-color);
+  }
+`;
+//# sourceMappingURL=CatalogFilter.js.map

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

@@ -0,0 +1,6 @@
+import type { JSX } from 'react';
+import type { FilterProps } from '../../../core/types';
+export type CatalogFilterCheckboxesProps = FilterProps & {
+    className?: string;
+};
+export declare function CatalogFilterCheckboxes({ filter, filterValuesCasing, showCounter, className, }: CatalogFilterCheckboxesProps): JSX.Element;

package/lib/components/Catalog/CatalogFilter/CatalogFilterCheckboxes.js

@@ -0,0 +1,152 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogFilterCheckboxes = CatalogFilterCheckboxes;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const highlight_words_core_1 = require("highlight-words-core");
+const FilterOptions_1 = require("../../../components/Filter/FilterOptions");
+const FilterOption_1 = require("../../../components/Filter/FilterOption");
+const FilterOptionLabel_1 = require("../../../components/Filter/FilterOptionLabel");
+const FilterInput_1 = require("../../../components/Filter/FilterInput");
+const hooks_1 = require("../../../core/hooks");
+const CheckboxIcon_1 = require("../../../icons/CheckboxIcon/CheckboxIcon");
+const CounterTag_1 = require("../../../components/Tags/CounterTag");
+const utils_1 = require("../../../core/utils");
+const Accordion_1 = require("../../../components/Accordion/Accordion");
+function CatalogFilterCheckboxes({ filter, filterValuesCasing, showCounter = true, className, }) {
+    const { useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const telemetry = useTelemetry();
+    const [searchTerm, setSearchTerm] = (0, react_1.useState)('');
+    const [isExpanded, setIsExpanded] = (0, react_1.useState)(false);
+    const filteredOptions = (0, react_1.useMemo)(() => {
+        const options = filter.filteredOptions || filter.options;
+        if (!searchTerm.trim())
+            return options;
+        const lowerSearchTerm = searchTerm.toLowerCase();
+        return options.filter(({ value }) => {
+            const translatedValue = (0, utils_1.changeTextCasing)(translate(value), filterValuesCasing);
+            if (!translatedValue)
+                return false;
+            return translatedValue.toLowerCase().includes(lowerSearchTerm);
+        });
+    }, [searchTerm, filter.filteredOptions, filter.options, translate, filterValuesCasing]);
+    const selectedCount = (0, react_1.useMemo)(() => {
+        if (filter.selectedOptions instanceof Set) {
+            return filter.selectedOptions.size;
+        }
+        return 0;
+    }, [filter.selectedOptions]);
+    const highlightText = (text) => {
+        if (!searchTerm.trim()) {
+            return react_1.default.createElement(react_1.default.Fragment, null, text);
+        }
+        const chunks = (0, highlight_words_core_1.findAll)({
+            searchWords: [searchTerm],
+            textToHighlight: text,
+        });
+        return (react_1.default.createElement(react_1.default.Fragment, null, chunks.map((chunk, idx) => {
+            const { end, highlight, start } = chunk;
+            const chunkText = text.substr(start, end - start);
+            if (highlight) {
+                return react_1.default.createElement(HighlightedText, { key: idx }, chunkText);
+            }
+            else {
+                return react_1.default.createElement("span", { key: idx }, chunkText);
+            }
+        })));
+    };
+    const headerContent = (react_1.default.createElement(AccordionHeaderContent, null,
+        react_1.default.createElement("span", null, translate(filter.titleTranslationKey, filter.title)),
+        selectedCount > 0 && react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, selectedCount)));
+    return (react_1.default.createElement(AccordionWrapper, { className: className, "$hasSelection": selectedCount > 0 && !isExpanded, "data-component-name": "Catalog/CatalogFilterCheckboxes" },
+        react_1.default.createElement(Accordion_1.Accordion, { expanded: isExpanded, header: headerContent, onToggle: setIsExpanded },
+            react_1.default.createElement(FilterSearchWrapper, null,
+                react_1.default.createElement(FilterInput_1.FilterInput, { value: searchTerm, onChange: setSearchTerm })),
+            react_1.default.createElement(FilterOptions_1.FilterOptions, null, filteredOptions.map(({ value, count }) => {
+                const id = 'filter--' + filter.property + '--' + value;
+                return (react_1.default.createElement(FilterCheckboxOption, { key: id, role: "link", onClick: () => {
+                        filter.toggleOption(value);
+                        telemetry.sendFilterCheckboxToggledMessage({ id });
+                    } },
+                    react_1.default.createElement(CheckboxIcon_1.CheckboxIcon, { checked: filter.selectedOptions instanceof Set
+                            ? filter.selectedOptions.has(value) ||
+                                filter.selectedOptions.has(value === null || value === void 0 ? void 0 : value.toLowerCase())
+                            : false }),
+                    react_1.default.createElement(FilterOptionLabel_1.FilterOptionLabel, { "data-translation-key": value }, highlightText((0, utils_1.changeTextCasing)(translate(value), filterValuesCasing) || '')),
+                    showCounter && react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, count)));
+            })))));
+}
+const AccordionWrapper = styled_components_1.default.div `
+  position: relative;
+  border-right: 4px solid transparent;
+
+  ${({ $hasSelection }) => $hasSelection &&
+    `
+    border-right-color: var(--color-blueberry-6);
+    
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: -1px;
+      right: -4px;
+      width: 4px;
+      height: 1px;
+      background-color: var(--color-blueberry-6);
+      z-index: 1;
+    }
+  `}
+`;
+const AccordionHeaderContent = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  width: 100%;
+`;
+const HighlightedText = styled_components_1.default.span `
+  background-color: var(--catalog-highlight-bg-color);
+  color: var(--catalog-highlight-text-color);
+`;
+const FilterCheckboxOption = (0, styled_components_1.default)(FilterOption_1.FilterOption) `
+  padding-left: var(--filter-option-checkbox-padding-left);
+`;
+const FilterSearchWrapper = styled_components_1.default.div `
+  padding: var(--filter-content-search-padding);
+`;
+//# sourceMappingURL=CatalogFilterCheckboxes.js.map

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

@@ -0,0 +1,13 @@
+import type { JSX } from 'react';
+import type { ResolvedFilter } from '../../../core/types';
+import type { RedoclyConfig } from '../../../config';
+export type CatalogFilterContentProps = {
+    setFilterTerm: (value: string) => void;
+    filters: ResolvedFilter[];
+    filterTerm: string;
+    filterValuesCasing?: NonNullable<RedoclyConfig['catalog']>[string]['filterValuesCasing'] | ((str: string) => string);
+    hideSearch?: boolean;
+    showCounter?: boolean;
+    className?: string;
+};
+export declare function CatalogFilterContent({ setFilterTerm, filters, filterTerm, filterValuesCasing, hideSearch, showCounter, className, }: CatalogFilterContentProps): JSX.Element | null;