@redocly/theme 0.63.0-next.5 → 0.63.0

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

@@ -0,0 +1,11 @@
+import { JSX } from 'react';
+import { SortOption } from '../../../core';
+import { CatalogViewMode } from '../../../core';
+type CatalogMobileTopBarControlsProps = {
+    setSortOption: (sortOption: SortOption | null) => void;
+    sortOption: SortOption | null;
+    viewMode: CatalogViewMode;
+    setViewMode: (viewMode: CatalogViewMode) => void;
+};
+export declare function CatalogMobileTopBarControls({ setSortOption, sortOption, viewMode, setViewMode, }: CatalogMobileTopBarControlsProps): JSX.Element;
+export {};

package/lib/components/Catalog/CatalogMobileTopBar/CatalogMobileTopBarControls.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogMobileTopBarControls = CatalogMobileTopBarControls;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const CatalogSortButton_1 = require("../../../components/Catalog/CatalogSortButton");
+const CatalogViewModeToggle_1 = require("../../../components/Catalog/CatalogViewModeToggle");
+function CatalogMobileTopBarControls({ setSortOption, sortOption, viewMode, setViewMode, }) {
+    return (react_1.default.createElement(CatalogMobileTopBarControlsWrapper, null,
+        react_1.default.createElement(CatalogSortButton_1.CatalogSortButton, { onSortChange: setSortOption, currentSort: sortOption }),
+        react_1.default.createElement(CatalogViewModeToggle_1.CatalogViewModeToggle, { viewMode: viewMode, onViewModeChange: setViewMode })));
+}
+const CatalogMobileTopBarControlsWrapper = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  gap: var(--catalog-controls-wrapper-gap);
+`;
+//# sourceMappingURL=CatalogMobileTopBarControls.js.map

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

@@ -0,0 +1,7 @@
+import { JSX } from 'react';
+type CatalogMobileTopBarFiltersButtonProps = {
+    setMobileFiltersPanelOpen: (open: boolean) => void;
+    activeFiltersCount: number;
+};
+export declare function CatalogMobileTopBarFiltersButton({ setMobileFiltersPanelOpen, activeFiltersCount, }: CatalogMobileTopBarFiltersButtonProps): JSX.Element;
+export {};

package/lib/components/Catalog/CatalogMobileTopBar/CatalogMobileTopBarFiltersButton.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogMobileTopBarFiltersButton = CatalogMobileTopBarFiltersButton;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const FilterIcon_1 = require("../../../icons/FilterIcon/FilterIcon");
+const CounterTag_1 = require("../../../components/Tags/CounterTag");
+const core_1 = require("../../../core");
+const Button_1 = require("../../../components/Button/Button");
+function CatalogMobileTopBarFiltersButton({ setMobileFiltersPanelOpen, activeFiltersCount, }) {
+    const { useTranslate } = (0, core_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    return (react_1.default.createElement(CatalogMobileTopBarFiltersButtonWrapper, { icon: react_1.default.createElement(FilterIcon_1.FilterIcon, { size: "16px" }), variant: "ghost", iconPosition: "left", size: "medium", onClick: () => setMobileFiltersPanelOpen(true) },
+        translate('catalog.filters.title', 'Filters'),
+        activeFiltersCount > 0 ? react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, activeFiltersCount) : null));
+}
+const CatalogMobileTopBarFiltersButtonWrapper = (0, styled_components_1.default)(Button_1.Button) `
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+`;
+//# sourceMappingURL=CatalogMobileTopBarFiltersButton.js.map

package/lib/components/Catalog/CatalogPageDescription.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CatalogPageDescription = CatalogPageDescription;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const utils_1 = require("../../core/utils");
 const H3_1 = require("../../components/Typography/H3");
 const Tag_1 = require("../../components/Tag/Tag");
 function CatalogPageDescription({ title, titleTranslationKey, description, descriptionTranslationKey, tag, }) {
@@ -18,11 +17,6 @@ function CatalogPageDescription({ title, titleTranslationKey, description, descr
 }
 const CatalogPageDescriptionWrapper = styled_components_1.default.div `
   margin: var(--catalog-heading-margin);
-  display: var(--catalog-page-description-display-mobile);
-
-  @media screen and (min-width: ${utils_1.breakpoints.medium}) {
-    display: var(--catalog-page-description-display-desktop);
-  }
 `;
 const CatalogTitleWrapper = styled_components_1.default.div `
   display: flex;

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

@@ -7,5 +7,4 @@ export type CatalogSelectorProps = {
 };
 export declare function CatalogSelector({ catalogSwitcherItems, onChange, }: CatalogSelectorProps): JSX.Element;
 export declare const CatalogSelectWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CatalogSelectLabel: import("styled-components").StyledComponent<"label", any, {}, never>;
 export declare const CatalogSelect: import("styled-components").StyledComponent<typeof Select, any, {}, never>;

package/lib/components/Catalog/CatalogSelector.js

@@ -1,13 +1,47 @@
 "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.CatalogSelect = exports.CatalogSelectLabel = exports.CatalogSelectWrapper = void 0;
+exports.CatalogSelect = exports.CatalogSelectWrapper = void 0;
 exports.CatalogSelector = CatalogSelector;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const react_router_dom_1 = require("react-router-dom");
+const Accordion_1 = require("../../components/Accordion/Accordion");
 const Select_1 = require("../../components/Select/Select");
 const utils_1 = require("../../core/utils");
 const hooks_1 = require("../../core/hooks");
@@ -15,6 +49,7 @@ const ChevronDownIcon_1 = require("../../icons/ChevronDownIcon/ChevronDownIcon")
 function CatalogSelector({ catalogSwitcherItems, onChange, }) {
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
+    const [isExpanded, setIsExpanded] = (0, react_1.useState)(true);
     const navigate = (0, react_router_dom_1.useNavigate)();
     const pathPrefix = (0, utils_1.getPathPrefix)();
     const options = catalogSwitcherItems.map((item) => ({
@@ -23,25 +58,24 @@ function CatalogSelector({ catalogSwitcherItems, onChange, }) {
         label: translate(item.labelTranslationKey),
     }));
     const selectedCatalogItem = catalogSwitcherItems.find((item) => item.selected);
+    const headerLabel = translate('catalog.catalogs.label', 'Catalogs');
     return (react_1.default.createElement(exports.CatalogSelectWrapper, { "data-component-name": "Catalog/CatalogSelector" },
-        react_1.default.createElement(exports.CatalogSelectLabel, null, translate('catalog.catalogs.label', 'Catalogs')),
-        react_1.default.createElement(exports.CatalogSelect, { value: selectedCatalogItem === null || selectedCatalogItem === void 0 ? void 0 : selectedCatalogItem.slug, options: options, onChange: (value) => {
-                navigate(`${pathPrefix}/catalogs/${value}`);
-                onChange();
-            }, icon: react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, { color: "var(--catalog-select-icon-color)" }) })));
+        react_1.default.createElement(Accordion_1.Accordion, { expanded: isExpanded, header: headerLabel, onToggle: setIsExpanded },
+            react_1.default.createElement(exports.CatalogSelect, { value: selectedCatalogItem === null || selectedCatalogItem === void 0 ? void 0 : selectedCatalogItem.slug, options: options, onChange: (value) => {
+                    navigate(`${pathPrefix}/catalogs/${value}`);
+                    onChange();
+                }, icon: react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, { color: "var(--catalog-select-icon-color)" }) }))));
 }
 exports.CatalogSelectWrapper = styled_components_1.default.div `
-  margin-top: var(--catalog-select-wrapper-margin-top);
-`;
-exports.CatalogSelectLabel = styled_components_1.default.label `
-  display: block;
-  margin-bottom: var(--catalog-select-label-margin-bottom);
-  font-weight: var(--catalog-select-label-font-weight);
-  font-size: var(--catalog-select-label-font-size);
-  line-height: var(--catalog-select-label-line-height);
+  display: flex;
+  flex-direction: column;
+  gap: var(--filter-group-gap);
+  --accordion-body-padding: var(--catalog-select-accordion-body-padding);
+  --accordion-header-padding: var(--catalog-select-accordion-header-padding);
+  --select-line-height: var(--catalog-select-select-line-height);
+  --select-input-padding: var(--catalog-select-select-input-padding);
 `;
 exports.CatalogSelect = (0, styled_components_1.default)(Select_1.Select) `
   border-radius: var(--catalog-select-border-radius);
-  --select-input-padding: var(--catalog-select-input-padding);
 `;
 //# sourceMappingURL=CatalogSelector.js.map

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

@@ -19,6 +19,7 @@ export type CatalogTableViewProps<T extends BaseEntity> = {
     handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
     isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
     style?: React.CSSProperties;
+    contentMinWidth?: number;
 };
 export type CatalogColumn<T> = {
     key: string;
@@ -29,4 +30,4 @@ export type CatalogColumn<T> = {
     sortable?: boolean;
     sortKey?: string;
 };
-export declare const CatalogTableView: <T extends BaseEntity>({ entities, entitiesCatalogConfig, catalogConfig, columns, setSortOption, currentSortOption, onRowClick, handleSortClick, isColumnSorted, style, }: CatalogTableViewProps<T>) => React.JSX.Element;
+export declare const CatalogTableView: <T extends BaseEntity>({ entities, entitiesCatalogConfig, catalogConfig, columns, setSortOption, currentSortOption, onRowClick, handleSortClick, isColumnSorted, style, contentMinWidth, }: CatalogTableViewProps<T>) => React.JSX.Element;

package/lib/components/Catalog/CatalogTableView/CatalogTableView.js

@@ -13,6 +13,7 @@ const CatalogTableHeaderCell_1 = require("../../../components/Catalog/CatalogTab
 const CatalogTagsCell_1 = require("../../../components/Catalog/CatalogTableView/CatalogTagsCell");
 const CatalogTableViewRow_1 = require("../../../components/Catalog/CatalogTableView/CatalogTableViewRow");
 const CatalogEntityTypeTag_1 = require("../../../components/Catalog/CatalogEntityTypeTag");
+const core_1 = require("../../../core");
 const baseColumns = [
     {
         key: 'entity',
@@ -60,17 +61,27 @@ const baseColumns = [
         minWidth: '120px',
     },
 ];
-const CatalogTableView = ({ entities, entitiesCatalogConfig, catalogConfig, columns = baseColumns, setSortOption, currentSortOption, onRowClick, handleSortClick, isColumnSorted, style, }) => {
-    return (react_1.default.createElement(CatalogTableWrapper, { "data-component-name": "Catalog/CatalogTableView", style: style },
+const CatalogTableView = ({ entities, entitiesCatalogConfig, catalogConfig, columns = baseColumns, setSortOption, currentSortOption, onRowClick, handleSortClick, isColumnSorted, style, contentMinWidth, }) => {
+    const tableContent = (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(CatalogTableHeader, { columnsWidths: columns.map((column) => column.width || '1fr'), columnsMinWidths: columns.map((column) => column.minWidth || 'auto') }, columns.map((column) => (react_1.default.createElement(CatalogTableHeaderCell_1.CatalogTableHeaderCell, { key: column.key, column: column, setSortOption: setSortOption, currentSortOption: currentSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted })))),
-        react_1.default.createElement("div", null, entities.map((entity) => (react_1.default.createElement(CatalogTableViewRow_1.CatalogTableViewRow, { key: entity.id, entity: entity, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, columns: columns, onRowClick: onRowClick }))))));
+        react_1.default.createElement(CatalogTableBody, null, entities.map((entity) => (react_1.default.createElement(CatalogTableViewRow_1.CatalogTableViewRow, { key: entity.id, entity: entity, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, columns: columns, onRowClick: onRowClick }))))));
+    return (react_1.default.createElement(CatalogTableWrapper, { "data-component-name": "Catalog/CatalogTableView", style: style }, contentMinWidth != null ? (react_1.default.createElement(CatalogTableContentInner, { "$contentMinWidth": contentMinWidth }, tableContent)) : (react_1.default.createElement(CatalogTableScrollContent, null, tableContent))));
 };
 exports.CatalogTableView = CatalogTableView;
 const CatalogTableWrapper = styled_components_1.default.div `
   width: 100%;
   border-bottom: 1px solid var(--catalog-table-border-color);
-  margin-bottom: var(--spacing-xl);
-  margin-top: var(--spacing-xl);
+  overflow-x: auto;
+
+  @media screen and (max-width: ${core_1.breakpoints.medium}) {
+    margin-top: 0;
+  }
+`;
+const CatalogTableScrollContent = styled_components_1.default.div `
+  min-width: min-content;
+`;
+const CatalogTableContentInner = styled_components_1.default.div `
+  min-width: ${({ $contentMinWidth }) => $contentMinWidth}px;
 `;
 const CatalogTableHeader = styled_components_1.default.div `
   display: grid;
@@ -79,5 +90,9 @@ const CatalogTableHeader = styled_components_1.default.div `
     .join(' ')};
   background: var(--catalog-table-header-bg-color);
   font-weight: var(--catalog-table-header-font-weight);
+  border-radius: var(--border-radius) var(--border-radius) 0 0;
+`;
+const CatalogTableBody = styled_components_1.default.div `
+  min-width: min-content;
 `;
 //# sourceMappingURL=CatalogTableView.js.map

package/lib/components/Catalog/CatalogTableView/CatalogUserEntityCell.js

@@ -8,19 +8,10 @@ exports.CatalogUserEntityCell = CatalogUserEntityCell;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const CatalogHighlight_1 = require("../../../components/Catalog/CatalogHighlight");
-const extractInitials = (name) => {
-    const trimmedName = name === null || name === void 0 ? void 0 : name.trim();
-    if (!trimmedName)
-        return '';
-    const initials = trimmedName.split(' ').map((n) => n[0]);
-    if (initials.length === 1) {
-        return initials[0];
-    }
-    return initials[0] + initials[initials.length - 1];
-};
+const CatalogAvatar_1 = require("../../../components/Catalog/CatalogAvatar");
 function CatalogUserEntityCell({ name, email }) {
     return (react_1.default.createElement(EntityTitleCellWrapper, { "data-component-name": "Catalog/CatalogTableView/CatalogUserEntityCell" },
-        react_1.default.createElement(Avatar, null, extractInitials(name)),
+        react_1.default.createElement(CatalogAvatar_1.CatalogAvatar, { value: name, size: "medium" }),
         react_1.default.createElement(EntityTitleContent, null,
             react_1.default.createElement(EntityTitle, null,
                 react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, name)),
@@ -33,18 +24,6 @@ const EntityTitleCellWrapper = styled_components_1.default.div `
   gap: 6px;
   max-width: 100%;
 `;
-const Avatar = styled_components_1.default.div `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  background-color: var(--catalog-avatar-bg-color);
-  flex-shrink: 0;
-  font-size: 14px;
-  font-weight: 400;
-`;
 const EntityTitleContent = styled_components_1.default.div `
   display: flex;
   flex-direction: column;

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

@@ -5,5 +5,6 @@ export type CatalogTagsWithTooltipProps = {
     itemsToShow?: number;
     showPlaceholder?: boolean;
     tagProps?: TagProps;
+    showAvatars?: boolean;
 };
-export declare function CatalogTagsWithTooltip({ items, itemsToShow, showPlaceholder, tagProps, }: CatalogTagsWithTooltipProps): JSX.Element | null;
+export declare function CatalogTagsWithTooltip({ items, itemsToShow, showPlaceholder, showAvatars, tagProps, }: CatalogTagsWithTooltipProps): JSX.Element | null;

package/lib/components/Catalog/CatalogTagsWithTooltip.js

@@ -11,25 +11,29 @@ const Tag_1 = require("../../components/Tag/Tag");
 const Tooltip_1 = require("../../components/Tooltip/Tooltip");
 const CatalogHighlight_1 = require("../../components/Catalog/CatalogHighlight");
 const hooks_1 = require("../../core/hooks");
-function CatalogTagsWithTooltip({ items, itemsToShow = 1, showPlaceholder = true, tagProps, }) {
+const CatalogAvatar_1 = require("../../components/Catalog/CatalogAvatar");
+function CatalogTagsWithTooltip({ items, itemsToShow = 1, showPlaceholder = false, showAvatars, tagProps, }) {
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     if (!items || items.length === 0) {
         if (showPlaceholder) {
-            return (react_1.default.createElement(CatalogTagsWrapper, { "data-component-name": "Catalog/CatalogTagsWithTooltip" },
-                react_1.default.createElement(Tag_1.Tag, { style: { backgroundColor: 'var(--catalog-tags-placeholder-bg-color)' }, color: "grey" }, "N/A")));
+            return (react_1.default.createElement(CatalogTagsNotConnectedWrapper, { "data-component-name": "Catalog/CatalogTagsWithTooltip" }, translate('catalog.notConnected', 'Not connected')));
         }
         return null;
     }
     if (items.length <= itemsToShow) {
-        return (react_1.default.createElement(CatalogTagsWrapper, { "data-component-name": "Catalog/CatalogTagsWithTooltip" }, items.map((item, index) => (react_1.default.createElement(Tag_1.Tag, Object.assign({ key: `${item}-${index}` }, tagProps, { maxLength: constants_1.CATALOG_TAG_MAX_LENGTH }),
+        return (react_1.default.createElement(CatalogTagsWrapper, { "data-component-name": "Catalog/CatalogTagsWithTooltip" }, items.map((item, index) => (react_1.default.createElement(Tag_1.Tag, Object.assign({ key: `${item}-${index}` }, tagProps, (showAvatars && {
+            icon: react_1.default.createElement(CatalogAvatar_1.CatalogAvatar, { value: item, size: "small" }),
+        }), { maxLength: constants_1.CATALOG_TAG_MAX_LENGTH }),
             react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, item))))));
     }
     const displayedItems = items.slice(0, itemsToShow);
     const remainingCount = items.length - itemsToShow;
     return (react_1.default.createElement(Tooltip_1.Tooltip, { tip: items.join(', '), placement: "bottom", className: "catalog", width: "400px" },
         react_1.default.createElement(CatalogTagsWrapper, { "data-component-name": "Catalog/CatalogTagsWithTooltip" },
-            displayedItems.map((item, index) => (react_1.default.createElement(Tag_1.Tag, Object.assign({ key: `${item}-${index}` }, tagProps, { textTransform: "none", maxLength: constants_1.CATALOG_TAG_MAX_LENGTH }),
+            displayedItems.map((item, index) => (react_1.default.createElement(Tag_1.Tag, Object.assign({ key: `${item}-${index}` }, tagProps, (showAvatars && {
+                icon: react_1.default.createElement(CatalogAvatar_1.CatalogAvatar, { value: item, size: "small" }),
+            }), { textTransform: "none", maxLength: constants_1.CATALOG_TAG_MAX_LENGTH }),
                 react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, item)))),
             react_1.default.createElement(MoreTagsButton, null,
                 "+",
@@ -40,10 +44,14 @@ function CatalogTagsWithTooltip({ items, itemsToShow = 1, showPlaceholder = true
 const CatalogTagsWrapper = styled_components_1.default.div `
   display: flex;
   flex-wrap: wrap;
-  gap: var(--catalog-tags-wrapper-gap);
 `;
 const MoreTagsButton = styled_components_1.default.span `
   font-size: var(--catalog-tags-more-button-font-size);
   margin-left: var(--catalog-tags-more-button-margin-left);
 `;
+const CatalogTagsNotConnectedWrapper = styled_components_1.default.span `
+  font-size: var(--catalog-tags-not-connected-font-size);
+  line-height: var(--catalog-tags-not-connected-line-height);
+  color: var(--catalog-tags-not-connected-color);
+`;
 //# sourceMappingURL=CatalogTagsWithTooltip.js.map

package/lib/components/Catalog/variables.js

@@ -9,9 +9,9 @@ exports.catalog = (0, styled_components_1.css) `
     * @tokens Catalog page
     */
   --catalog-page-padding-vertical: var(--spacing-xl);
-  --catalog-page-padding-horizontal: var(--spacing-xxl);
+  --catalog-page-padding-horizontal: var(--spacing-xl);
   --catalog-page-padding: var(--catalog-page-padding-vertical) var(--catalog-page-padding-horizontal);
-  --catalog-page-content-height: calc(100vh - var(--navbar-height) - var(--spacing-lg) * 2);
+  --catalog-page-padding-mobile: var(--catalog-page-padding-vertical) var(--spacing-base);
 
   --catalog-filter-padding-vertical-mobile: 0;
   --catalog-filter-padding-horizontal-mobile: var(--spacing-base);
@@ -31,9 +31,8 @@ exports.catalog = (0, styled_components_1.css) `
   /**
     * @tokens Catalog page content
     */
-  --catalog-page-content-width-mobile: 90%;
-  --catalog-page-content-width-desktop: 100%;
-  --catalog-page-content-margin-mobile: 0 auto;
+  --catalog-page-content-width: 100%;
+  --catalog-page-content-margin: 0 auto;
 
   /**
     * @tokens Catalog page title
@@ -50,7 +49,7 @@ exports.catalog = (0, styled_components_1.css) `
   --catalog-description-text-color: var(--text-color-secondary);
   --catalog-description-font-weight: var(--font-weight-regular);
   --catalog-description-font-size: var(--font-size-lg);
-  --catalog-description-margin: 0 0 var(--spacing-sm) 0;
+  --catalog-description-margin: 0 0 var(--spacing-xl) 0;
   --catalog-description-line-height: var(--line-height-lg);
 
   /**
@@ -82,14 +81,12 @@ exports.catalog = (0, styled_components_1.css) `
   /**
     * @tokens Catalog selector
     */
-  --catalog-select-wrapper-margin-top: var(--spacing-xxs);
-  --catalog-select-label-margin-bottom: var(--spacing-xxs);
-  --catalog-select-label-font-weight: var(--filter-title-font-weight);
-  --catalog-select-label-font-size: var(--filter-title-font-size);
-  --catalog-select-label-line-height: var(--filter-title-line-height);
   --catalog-select-border-radius: var(--filter-input-border-radius);
-  --catalog-select-input-padding: var(--select-input-padding-vertical) var(--spacing-sm);
   --catalog-select-icon-color: var(--input-t-icon-color);
+  --catalog-select-accordion-header-padding: 12px 16px 8px 16px;
+  --catalog-select-accordion-body-padding: 0px 16px 12px 16px;
+  --catalog-select-select-line-height: 1.15em;
+  --catalog-select-select-input-padding: 8px 12px;
 
   /**
     * @tokens Catalog highlight
@@ -97,6 +94,18 @@ exports.catalog = (0, styled_components_1.css) `
   --catalog-highlight-bg-color: var(--search-highlight-bg-color);
   --catalog-highlight-text-color: var(--search-highlight-text-color);
 
+  /**
+    * @tokens Catalog entity
+    */
+
+  --catalog-entity-max-width: 1072px;
+  --catalog-spacing-large: calc(var(--spacing-unit) * 16);
+  --catalog-entity-padding: var(--spacing-xl) var(--catalog-spacing-large);
+  --catalog-entity-padding-large: var(--spacing-lg) var(--catalog-spacing-large);
+  --catalog-entity-padding-medium: var(--spacing-lg) var(--spacing-xl);
+  --catalog-entity-padding-small: var(--spacing-lg) var(--spacing-base);
+  --catalog-entity-margin: 0 auto;
+
   /**
     * @tokens Catalog entity icon
     */
@@ -139,10 +148,12 @@ exports.catalog = (0, styled_components_1.css) `
   /**
     * @tokens Catalog tags
     */
-  --catalog-tags-wrapper-gap: var(--spacing-xs) calc(var(--spacing-xs) - 5px);
   --catalog-tags-more-button-font-size: var(--font-size-base);
   --catalog-tags-more-button-margin-left: 4px;
   --catalog-tags-placeholder-bg-color: var(--bg-color);
+  --catalog-tags-not-connected-font-size: var(--font-size-base);
+  --catalog-tags-not-connected-line-height: var(--line-height-base);
+  --catalog-tags-not-connected-color: var(--text-color-disabled);
 
   /**
     * @tokens Catalog empty state
@@ -155,7 +166,12 @@ exports.catalog = (0, styled_components_1.css) `
     */
   --catalog-actions-row-margin-bottom: var(--spacing-xl);
   --catalog-controls-wrapper-gap: var(--spacing-sm);
+
+  /**
+    * @tokens Catalog filter
+    */
   --catalog-filter-input-width: 360px;
+  --catalog-filter-content-header-padding: var(--spacing-base) var(--spacing-base) var(--spacing-sm) var(--spacing-base);
 
   /**
     * @tokens Catalog search input wrapper
@@ -188,17 +204,10 @@ exports.catalog = (0, styled_components_1.css) `
   --catalog-sidebar-display-desktop: flex;
   --catalog-sidebar-menu-container-padding-top: 0;
 
-  /**
-    * @tokens Catalog page description responsive
-    */
-  --catalog-page-description-display-mobile: none;
-  --catalog-page-description-display-desktop: block;
-
   /**
     * @tokens Catalog card
     */
   --catalog-card-height: 241px;
-  --catalog-card-min-width: 400px;
   --catalog-card-padding-vertical: var(--spacing-base);
   --catalog-card-padding-horizontal: var(--spacing-md);
   --catalog-card-gap: var(--spacing-sm);
@@ -213,7 +222,7 @@ exports.catalog = (0, styled_components_1.css) `
   --catalog-card-border-color-hover: var(--border-color-primary);
   --catalog-card-border-radius: var(--border-radius-lg);
   --catalog-cards-group-margin: 0 0 var(--spacing-base) 0;
-  --catalog-cards-group-gap: var(--spacing-xl);
+  --catalog-cards-group-gap: var(--spacing-lg);
 
   /**
     * @tokens Catalog card icon
@@ -233,7 +242,7 @@ exports.catalog = (0, styled_components_1.css) `
   --catalog-metadata-section-gap: var(--spacing-xs);
   --catalog-metadata-label-font-size: var(--font-size-base);
   --catalog-metadata-label-font-weight: var(--font-weight-medium);
-  --catalog-metadata-label-color: var(--text-color-secondary);
+  --catalog-metadata-label-color: var(--text-color-description);
   --catalog-metadata-column-half-gap: var(--spacing-sm);
   --catalog-metadata-heading-size: var(--font-size-md);
 
@@ -256,10 +265,20 @@ exports.catalog = (0, styled_components_1.css) `
     */
   --catalog-card-title-color: var(--text-color-primary);
   --catalog-card-title-min-height: var(--spacing-xxl);
-  --catalog-card-title-font-size: var(--font-size-lg);
-  --catalog-card-title-font-weight: var(--font-weight-bold);
-  --catalog-card-title-line-height: var(--line-height-lg);
-  --catalog-card-title-line-clamp: 2;
+  --catalog-card-title-font-size: var(--font-size-xl);
+  --catalog-card-title-font-weight: var(--font-weight-medium);
+  --catalog-card-title-line-height: var(--line-height-xl);
+  --catalog-card-title-height: 34px;
+  --catalog-card-title-display: flex;
+  --catalog-card-title-align-items: center;
+  --catalog-card-title-margin-bottom: 2px;
+
+  /**
+    * @tokens Catalog card summary
+    */
+  --catalog-card-summary-font-size: var(--font-size-base);
+  --catalog-card-summary-font-weight: var(--font-weight-regular);
+  --catalog-card-summary-line-height: var(--line-height-base);
 
   /**
     * @tokens Catalog card footer
@@ -296,11 +315,17 @@ exports.catalog = (0, styled_components_1.css) `
   --catalog-page-badge-dot-size: 6px;
   --catalog-page-badge-dot-border-color: var(--color-static-white);
 
+  /**
+   * @tokens Catalog card metadata
+   */
+  --catalog-card-metadata-owner-tag-left-padding: 2px;
+
+
   /**
     * @tokens Catalog table
     */
-  --catalog-table-border-color: var(--border-color-primary);
-  --catalog-table-header-bg-color: var(--bg-color-secondary);
+  --catalog-table-border-color: var(--border-color-secondary);
+  --catalog-table-header-bg-color: var(--layer-color);
   --catalog-table-header-font-weight: var(--font-weight-medium);
   --catalog-table-header-cell-padding: 4px 8px;
   --catalog-table-cell-padding: 4px 8px;
@@ -331,7 +356,7 @@ exports.catalog = (0, styled_components_1.css) `
   /**
     * @tokens Catalog table entity title
     */
-  --catalog-table-entity-title-font-size: var(--catalog-card-title-font-size);
+  --catalog-table-entity-title-font-size: var(--font-size-lg);
   --catalog-table-entity-title-line-height: var(--line-height-lg);
   --catalog-table-entity-title-font-weight: var(--font-weight-medium);
 
@@ -392,16 +417,27 @@ exports.catalog = (0, styled_components_1.css) `
   --catalog-empty-state-font-size: var(--font-size-base);
   --catalog-empty-state-line-height: var(--line-height-base);
 
+  /**
+    * @tokens Catalog avatar
+    */
   --catalog-avatar-bg-color: #ededf2;
+  --catalog-avatar-small-size: 20px;
+  --catalog-avatar-medium-size: 32px;
+  --catalog-avatar-large-size: 40px;
+  --catalog-avatar-font-size-small: 10px;
+  --catalog-avatar-font-size-medium: var(--font-size-base);
+  --catalog-avatar-font-size-large: var(--font-size-lg);
+  --catalog-avatar-font-weight: var(--font-weight-regular);
+  --catalog-avatar-line-height: var(--line-height-base);
   // @tokens End
 
   /**
     * @tokens Catalog entity relations node
     */
-  --catalog-entity-relations-node-padding-vertical: 10px;
-  --catalog-entity-relations-node-padding-horizontal: 14px;
+  --catalog-entity-relations-node-padding-vertical: 8px;
+  --catalog-entity-relations-node-padding-horizontal: 12px;
   --catalog-entity-relations-node-padding: var(--catalog-entity-relations-node-padding-vertical) var(--catalog-entity-relations-node-padding-horizontal);
-  --catalog-entity-relations-node-gap: 8px;
+  --catalog-entity-relations-node-gap: 4px;
   --catalog-entity-relations-node-border-radius: 10px;
 
   --catalog-entity-relations-node-bg-color: var(--layer-color);
@@ -412,7 +448,6 @@ exports.catalog = (0, styled_components_1.css) `
   --catalog-entity-relations-node-border-style: var(--border-style);
 
   --catalog-entity-relations-node-font-weight: var(--font-weight-regular);
-  --catalog-entity-relations-node-font-weight-root: 600;
 
   --catalog-entity-relations-node-root-bg-color: var(--color-blue-6);
   --catalog-entity-relations-node-root-text-color: var(--color-static-white);
@@ -440,14 +475,17 @@ exports.catalog = (0, styled_components_1.css) `
   /**
     * @tokens Catalog history button
     */
+  --catalog-history-button-width: 252px;
+  --catalog-history-button-item-width: 244px;
   --catalog-history-separator-border-color: var(--border-color-secondary);
   --catalog-history-separator-margin-bottom: var(--spacing-sm);
   --catalog-history-item-padding: var(--spacing-xxs);
   --catalog-history-item-margin-bottom: calc(var(--spacing-xxs) * -1);
-  --catalog-history-item-gap: var(--spacing-xxs);
+  --catalog-history-item-gap: var(--spacing-xs);
   --catalog-history-item-border-radius: var(--menu-item-label-border-radius);
   --catalog-history-item-bg-color-hover: var(--menu-item-bg-color-hover);
   --catalog-history-icon-size: 16px;
+  --catalog-history-content-max-width: 212px;
   --catalog-history-text-font-family: var(--font-family-base);
   --catalog-history-text-font-size: var(--font-size-base);
   --catalog-history-text-font-weight: var(--font-weight-regular);
@@ -458,12 +496,15 @@ exports.catalog = (0, styled_components_1.css) `
   --catalog-history-pill-padding-horizontal: var(--spacing-xs);
   --catalog-history-pill-border-color: var(--border-color-primary);
   --catalog-history-pill-border-radius: 12px;
-  --catalog-history-pill-icon-size: 14px;
+  --catalog-history-pill-icon-size: 16px;
   --catalog-history-pill-icon-color: var(--color-green-8);
   --catalog-history-pill-font-family: var(--font-family-base);
   --catalog-history-pill-font-size: var(--font-size-base);
   --catalog-history-pill-line-height: var(--line-height-base);
   --catalog-history-pill-text-color: var(--text-color-primary);
+  --catalog-history-pill-min-width: calc(100% - 118px - var(--catalog-history-item-gap));
+
+
   // @tokens End
 
   /**
@@ -476,7 +517,7 @@ exports.catalog = (0, styled_components_1.css) `
   --catalog-history-sidebar-header-padding: var(--spacing-base) var(--spacing-sm) var(--spacing-base);
   --catalog-history-sidebar-header-font-family: var(--font-family-base);
   --catalog-history-sidebar-header-font-size: var(--font-size-base);
-  --catalog-history-sidebar-header-font-weight: var(--font-weight-semibold);
+  --catalog-history-sidebar-header-font-weight: var(--font-weight-regular);
   --catalog-history-sidebar-header-line-height: var(--line-height-base);
   --catalog-history-sidebar-header-letter-spacing: 0;
   --catalog-history-sidebar-header-color: var(--text-color-primary);
@@ -513,6 +554,7 @@ exports.catalog = (0, styled_components_1.css) `
   --catalog-history-sidebar-version-date-color: var(--color-warm-grey-7);
 
   --catalog-history-sidebar-revisions-padding-left: 40px;
+  --catalog-history-sidebar-revisions-padding-bottom: var(--spacing-base);
 
   --catalog-history-sidebar-revision-item-padding: var(--spacing-xs) var(--spacing-sm);
   --catalog-history-sidebar-revision-item-border-radius: var(--border-radius-md);

package/lib/components/Filter/variables.js

@@ -16,7 +16,7 @@ exports.filter = (0, styled_components_1.css) `
 
   --filter-options-padding-vertical: 0;
   --filter-options-padding-horizontal: 0;
-  --filter-options-gap: var(--spacing-sm);
+  --filter-options-gap: var(--spacing-xs);
   --filter-options-max-height: 350px;
 
   --filter-option-font-size: var(--font-size-base);