@redocly/theme 0.54.0-next.2 → 0.54.0-next.3

package/lib/components/CatalogLegacy/variables.js

@@ -0,0 +1,109 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.catalog = void 0;
+const styled_components_1 = require("styled-components");
+exports.catalog = (0, styled_components_1.css) `
+  /* === Catalog === */
+  /**
+    * @tokens Catalog page
+    */
+  --catalog-legacy-page-padding-vertical: var(--spacing-lg);
+  --catalog-legacy-page-padding-horizontal: var(--spacing-xl);
+  --catalog-legacy-page-padding: var(--catalog-legacy-page-padding-vertical) var(--catalog-legacy-page-padding-horizontal);
+
+  --catalog-legacy-filter-padding-vertical-mobile: 0;
+  --catalog-legacy-filter-padding-horizontal-mobile: var(--spacing-base);
+
+  --catalog-legacy-heading-margin: 0 0 var(--spacing-xl) 0;
+
+  /**
+    * @tokens Catalog page title
+    */
+  --catalog-legacy-title-text-color: var(--text-color-primary);
+  --catalog-legacy-title-font-weight: var(--font-weight-bold);
+  --catalog-legacy-title-font-size: var(--font-size-heading-3);
+  --catalog-legacy-title-margin: 0 0 var(--spacing-sm) 0;
+
+  /**
+    * @tokens Catalog page description
+    */
+  --catalog-legacy-description-text-color: var(--text-color-secondary);
+  --catalog-legacy-description-font-weight: var(--font-weight-regular);
+  --catalog-legacy-description-font-size: var(--font-size-base);
+  --catalog-legacy-description-margin: 0 0 var(--spacing-sm) 0;
+
+  /**
+    * @tokens Catalog page separator
+    */
+  --catalog-legacy-separator-color: var(--text-color-secondary);
+  --catalog-legacy-separator-font-size: var(--font-size-base);
+  --catalog-legacy-separator-font-weight: var(--font-weight-regular);
+  --catalog-legacy-separator-border-color: var(--border-color-secondary);
+  --catalog-legacy-separator-margin: 0 0 var(--spacing-base) 0;
+  --catalog-legacy-separator-padding: var(--spacing-xxs) 0 0 0;
+  --catalog-legacy-separator-label-margin: 0 var(--spacing-xs);
+
+  /**
+    * @tokens Catalog card
+    */
+  --catalog-legacy-card-min-height: 194px;
+  --catalog-legacy-card-min-width: 260px;
+  --catalog-legacy-card-padding-vertical: var(--spacing-base);
+  --catalog-legacy-card-padding-horizontal: var(--spacing-md);
+  --catalog-legacy-card-gap: var(--spacing-sm);
+  --catalog-legacy-card-text-color: var(--text-color-secondary);
+  --catalog-legacy-card-font-size: var(--font-size-base);
+  --catalog-legacy-card-font-weight: var(--font-weight-regular);
+  --catalog-legacy-card-bg-color: var(--layer-color);
+  --catalog-legacy-card-border-color: var(--border-color-secondary);
+  --catalog-legacy-card-border-width: var(--border-width);
+  --catalog-legacy-card-border-style: var(--border-style);
+  --catalog-legacy-card-border-color-hover: var(--border-color-primary);
+  --catalog-legacy-card-border-radius: var(--border-radius-xxl);
+  --catalog-legacy-cards-group-margin: 0 0 var(--spacing-base) 0;
+  --catalog-legacy-cards-group-gap: var(--spacing-xl);
+
+  /**
+    * @tokens Catalog card title
+    */
+  --catalog-legacy-card-title-color: var(--text-color-primary);
+  --catalog-legacy-card-title-min-height: var(--spacing-xxl);
+  --catalog-legacy-card-title-font-size: var(--font-size-lg);
+  --catalog-legacy-card-title-font-weight: var(--font-weight-bold);
+  --catalog-legacy-card-title-line-height: var(--line-height-lg);
+  --catalog-legacy-card-title-line-clamp: 2;
+
+  /**
+    * @tokens Catalog card description
+    */
+  --catalog-legacy-card-description-line-clamp: 3;
+  --catalog-legacy-card-description-color: var(--text-color-secondary);
+  --catalog-legacy-card-description-font-size: var(--font-size-base);
+  --catalog-legacy-card-description-line-height: var(--line-height-base);
+  --catalog-legacy-card-description-font-weight: var(--font-weight-regular);
+  --catalog-legacy-card-description-height: 62px;
+
+  --catalog-legacy-card-content-gap: var(--spacing-xxs);
+
+  --catalog-legacy-card-tag-bg: transparent;
+
+  --catalog-legacy-highlight-bg-color: none;
+  --catalog-legacy-highlight-text-color: var(--color-info-base);
+
+  --catalog-legacy-actions-gap: var(--spacing-xs);
+  --catalog-legacy-actions-padding-vertical: var(--spacing-xs);
+  --catalog-legacy-actions-padding-horizontal: 5%;
+  --catalog-legacy-actions-min-height: 40px;
+  --catalog-legacy-actions-bg-color: var(--bg-color-tonal);
+
+  --catalog-legacy-page-badge-border-radius: var(--border-radius);
+  --catalog-legacy-page-badge-padding: 0 var(--spacing-xs);
+  --catalog-legacy-page-badge-font-size: var(--font-size-base);
+  --catalog-legacy-page-badge-line-height: var(--line-height-base);
+
+  --catalog-legacy-page-badge-dot-size: 6px;
+  --catalog-legacy-page-badge-dot-border-color: #ffffff;
+
+  // @tokens End
+`;
+//# sourceMappingURL=variables.js.map

package/lib/components/Menu/MenuItem.js

@@ -63,7 +63,7 @@ function MenuItem(props) {
     const chevron = hasChevron ? (isExpanded ? (react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, { size: "var(--menu-item-label-chevron-size)", color: "--tree-content-color-default" })) : (react_1.default.createElement(ChevronRightIcon_1.ChevronRightIcon, { size: "var(--menu-item-label-chevron-size)", color: "--tree-content-color-default" }))) : null;
     const httpColor = item.deprecated ? 'http-deprecated' : item.httpVerb;
     const label = item.label && (react_1.default.createElement(MenuItemLabelWrapper, { active: item.active, deprecated: item.deprecated, depth: depth, withChevron: hasChevron, onClick: handleOnClick, ref: labelRef, role: item.link ? 'none' : 'link', "data-testid": "menu-item-label" },
-        chevron,
+        react_1.default.createElement(ChevronWrapper, null, chevron),
         item.icon ? react_1.default.createElement(MenuItemIcon, { src: item.icon }) : null,
         react_1.default.createElement(MenuItemLabelTextWrapper, null,
             react_1.default.createElement(MenuItemLabel, null,
@@ -94,6 +94,9 @@ function generateClassName({ type, item, className, }) {
         .join(' ')
         .trim();
 }
+const ChevronWrapper = styled_components_1.default.div `
+  flex-shrink: 0;
+`;
 const MenuItemWrapper = styled_components_1.default.div `
   display: flex;
   flex-direction: column;

package/lib/components/Search/SearchDialog.js

@@ -49,6 +49,7 @@ const AiStarsIcon_1 = require("../../icons/AiStarsIcon/AiStarsIcon");
 const ReturnKeyIcon_1 = require("../../icons/ReturnKeyIcon/ReturnKeyIcon");
 const ChevronLeftIcon_1 = require("../../icons/ChevronLeftIcon/ChevronLeftIcon");
 const EditIcon_1 = require("../../icons/EditIcon/EditIcon");
+const AiStarsGradientIcon_1 = require("../../icons/AiStarsGradientIcon/AiStarsGradientIcon");
 function SearchDialog({ onClose, className }) {
     const { useTranslate, useCurrentProduct, useSearch, useProducts, useAiSearch, useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
     const otelTelemetry = useOtelTelemetry();
@@ -157,7 +158,7 @@ function SearchDialog({ onClose, className }) {
                             }
                         }, "data-translation-key": "search.label" }),
                     showHeaderButtons && (react_1.default.createElement(SearchHeaderButtons, null,
-                        showAiSearchButton ? (react_1.default.createElement(SearchAiButton, { icon: react_1.default.createElement(AiStarsIcon_1.AiStarsIcon, { gradient: true }), onClick: () => {
+                        showAiSearchButton ? (react_1.default.createElement(SearchAiButton, { icon: react_1.default.createElement(AiStarsGradientIcon_1.AiStarsGradientIcon, { color: "var(--search-ai-button-icon-color)" }), onClick: () => {
                                 setMode('ai-dialog');
                                 if (query.trim()) {
                                     aiSearch.askQuestion(query);

package/lib/components/Search/variables.js

@@ -188,6 +188,8 @@ exports.search = (0, styled_components_1.css) `
   --search-ai-icon-bg-color: var(--search-ai-gradient);
   --search-ai-icon-color: var(--color-static-white);
 
+  --search-ai-button-icon-color: none;
+
   --search-ai-thinking-dots-gap: 4px;
   --search-ai-thinking-dots-padding: 4px 0;
   --search-ai-thinking-dot-size: 6px;

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

@@ -24,17 +24,17 @@ exports.tagDarkMode = (0, styled_components_1.css) `
   --tag-operation-color-options: #1a1c21; // @presenter Color
   --tag-operation-bg-color-options: #2a2b33; // @presenter Color
 
-  --tag-action-color-receive: #4db144; // @presenter Color
-  --tag-action-color-sub: #4db144; // @presenter Color
-  --tag-action-color-consume: #4db144; // @presenter Color
+  --tag-action-color-receive: #88CF82; // @presenter Color
+  --tag-action-color-sub: #88CF82; // @presenter Color
+  --tag-action-color-cons: #88CF82; // @presenter Color
 
-  --tag-action-color-send: #4144F6; // @presenter Color
-  --tag-action-color-pub: #4144F6; // @presenter Color
-  --tag-action-color-publish: #4144f6; // @presenter Color
+  --tag-action-color-send: #7779F8; // @presenter Color
+  --tag-action-color-pub: #7779F8; // @presenter Color
+  --tag-action-color-publish: #7779F8; // @presenter Color
 
-  --tag-action-color-channel: #F0870E; // @presenter Color
-  --tag-action-color-topic: #F0870E; // @presenter Color
-  --tag-action-color-queue: #D72E81; // @presenter Color
+  --tag-action-color-channel: #F5AD5B; // @presenter Color
+  --tag-action-color-topic: #F5AD5B; // @presenter Color
+  --tag-action-color-queue: #F7A7CF; // @presenter Color
   --tag-action-color-exchange: #C79CF2; // @presenter Color
 
   .tag-grey,

package/lib/components/Tag/variables.js

@@ -199,7 +199,7 @@ exports.tag = (0, styled_components_1.css) `
 
   --tag-action-color-receive: #4db144; // @presenter Color
   --tag-action-color-sub: #4db144; // @presenter Color
-  --tag-action-color-consume: #4db144; // @presenter Color
+  --tag-action-color-cons: #4db144; // @presenter Color
 
   --tag-action-color-send: #4144f6; // @presenter Color
   --tag-action-color-pub: #4144f6; // @presenter Color
@@ -250,8 +250,8 @@ exports.tag = (0, styled_components_1.css) `
       --tag-color: var(--tag-action-color-sub); // @presenter Color
   }
 
-  .tag-consume {
-      --tag-color: var(--tag-action-color-consume); // @presenter Color
+  .tag-cons {
+      --tag-color: var(--tag-action-color-cons); // @presenter Color
   }
 
   .tag-publish {

package/lib/core/hooks/__mocks__/use-theme-hooks.d.ts

@@ -7,7 +7,7 @@ export declare const useThemeHooks: jest.Mock<{
     }, [], any>;
     useBreadcrumbs: jest.Mock<any, any, any>;
     usePageSharedData: jest.Mock<any, any, any>;
-    useCatalog: jest.Mock<{
+    useCatalogLegacy: jest.Mock<{
         groups: never[];
         filters: never[];
         filterTerm: string;

package/lib/core/hooks/__mocks__/use-theme-hooks.js

@@ -14,7 +14,7 @@ exports.useThemeHooks = jest.fn(() => ({
     })),
     useBreadcrumbs: jest.fn().mockReturnValue([]),
     usePageSharedData: jest.fn().mockReturnValue({}),
-    useCatalog: jest.fn(() => ({
+    useCatalogLegacy: jest.fn(() => ({
         groups: [],
         filters: [],
         filterTerm: '',

package/lib/core/styles/global.js

@@ -10,7 +10,7 @@ const variables_4 = require("../../components/Sidebar/variables");
 const variables_5 = require("../../components/Breadcrumbs/variables");
 const variables_6 = require("../../components/Tag/variables");
 const variables_7 = require("../../components/TableOfContent/variables");
-const variables_8 = require("../../components/Catalog/variables");
+const variables_8 = require("../../components/CatalogLegacy/variables");
 const variables_9 = require("../../components/Filter/variables");
 const variables_10 = require("../../components/Panel/variables");
 const variables_11 = require("../../components/Select/variables");

package/lib/core/types/hooks.d.ts

@@ -21,6 +21,7 @@ export type ThemeHooks = {
     useI18nConfig: () => L10nConfig;
     useL10n: () => {
         changeLanguage: (lng?: string | undefined, callback?: Callback | undefined) => Promise<TFunc>;
+        lang: string;
     };
     useL10nConfig: () => L10nConfig;
     useCurrentProduct: () => ProductUiConfig | undefined;
@@ -99,7 +100,7 @@ export type ThemeHooks = {
         prevPage?: ResolvedNavItemWithLink;
         nextPage?: ResolvedNavItemWithLink;
     } | undefined;
-    useCatalog: (config: CatalogConfig) => FilteredCatalog;
+    useCatalogLegacy: (config: CatalogConfig) => FilteredCatalog;
     useTelemetry: () => {
         send(action: TelemetryEvent, data: unknown): void;
     };

package/lib/icons/AiStarsGradientIcon/AiStarsGradientIcon.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export interface AiStarsGradientIconProps extends IconProps {
+    background?: string;
+    borderRadius?: string;
+    padding?: string;
+    margin?: string;
+}
+export declare const AiStarsGradientIcon: import("styled-components").StyledComponent<(props: AiStarsGradientIconProps) => React.JSX.Element, any, {
+    'data-component-name': string;
+} & AiStarsGradientIconProps, "data-component-name">;

package/lib/icons/AiStarsGradientIcon/AiStarsGradientIcon.js

@@ -0,0 +1,58 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AiStarsGradientIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const Icon = (props) => {
+    const { color = '', background, borderRadius, padding, margin } = props, restProps = __rest(props, ["color", "background", "borderRadius", "padding", "margin"]);
+    const resolvedColor = color.startsWith('var(')
+        ? getComputedStyle(document.documentElement).getPropertyValue(color.slice(4, -1)).trim()
+        : color;
+    const isColorOverridden = resolvedColor && resolvedColor !== 'none';
+    const fill = isColorOverridden ? resolvedColor : 'url(#gradient)';
+    return (react_1.default.createElement("svg", Object.assign({ viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, restProps),
+        !isColorOverridden && (react_1.default.createElement("defs", null,
+            react_1.default.createElement("linearGradient", { id: "gradient", x1: "0", y1: "0", x2: "1", y2: "0" },
+                react_1.default.createElement("stop", { offset: "0%", stopColor: "#715efe" }),
+                react_1.default.createElement("stop", { offset: "100%", stopColor: "#ff5cdc" })))),
+        react_1.default.createElement("path", { d: "M11.2597 9.12114C8.08498 8.40423 7.59322 7.91247 6.87631 4.73772C6.84346 4.59262 6.7143 4.48929 6.56505 4.48929C6.4158 4.48929 6.28664 4.59262 6.2538 4.73772C5.53657 7.91247 5.04513 8.40423 1.87038 9.12114C1.72495 9.1543 1.62163 9.28314 1.62163 9.43239C1.62163 9.58164 1.72495 9.71048 1.87038 9.74365C5.04513 10.4609 5.53657 10.9526 6.2538 14.1271C6.28664 14.2722 6.4158 14.3755 6.56505 14.3755C6.7143 14.3755 6.84346 14.2722 6.87631 14.1271C7.59354 10.9526 8.08498 10.4609 11.2597 9.74365C11.4052 9.71048 11.5082 9.58164 11.5082 9.43239C11.5082 9.28314 11.4048 9.1543 11.2597 9.12114Z", fill: fill }),
+        react_1.default.createElement("path", { d: "M14.1299 4.17834C12.4423 3.79725 12.2053 3.5603 11.8242 1.87294C11.7911 1.72752 11.6622 1.62451 11.513 1.62451C11.3637 1.62451 11.2349 1.72752 11.2017 1.87294C10.8206 3.5603 10.5837 3.79725 8.8963 4.17834C8.75088 4.21151 8.64787 4.34035 8.64787 4.4896C8.64787 4.63885 8.75088 4.76769 8.8963 4.80086C10.5837 5.18195 10.8206 5.4189 11.2017 7.10658C11.2349 7.25168 11.3637 7.35501 11.513 7.35501C11.6622 7.35501 11.7911 7.25168 11.8242 7.10658C12.2053 5.4189 12.4423 5.18195 14.1299 4.80086C14.275 4.76769 14.3784 4.63885 14.3784 4.4896C14.3784 4.34035 14.275 4.21151 14.1299 4.17834Z", fill: fill })));
+};
+exports.AiStarsGradientIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/AiStarsGradientIcon/AiStarsGradientIcon',
+})) `
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+
+  ${({ background, borderRadius, margin }) => background &&
+    `
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      background: ${(0, utils_1.getCssColorVariable)(background)};
+
+      padding: var(--spacing-xs);
+      margin: ${margin || '0'};
+      
+      border-radius: ${background && borderRadius ? borderRadius : 'none'};
+    `}
+
+  color: ${({ color }) => color && (0, utils_1.getCssColorVariable)(color)};
+`;
+//# sourceMappingURL=AiStarsGradientIcon.js.map

package/lib/icons/AiStarsIcon/AiStarsIcon.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import type { IconProps } from '../../icons/types';
 export interface AiStarsIconProps extends IconProps {
-    gradient?: boolean;
     background?: string;
     borderRadius?: string;
     padding?: string;

package/lib/icons/AiStarsIcon/AiStarsIcon.js

@@ -19,37 +19,29 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const utils_1 = require("../../core/utils");
 const Icon = (props) => {
-    const { gradient: _, background, borderRadius, padding, margin } = props, restProps = __rest(props, ["gradient", "background", "borderRadius", "padding", "margin"]);
+    const { color, background, borderRadius, padding, margin } = props, restProps = __rest(props, ["color", "background", "borderRadius", "padding", "margin"]);
     return (react_1.default.createElement("svg", Object.assign({ viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, restProps),
-        react_1.default.createElement("defs", null,
-            react_1.default.createElement("linearGradient", { id: "aiStarsGradient", x1: "0", y1: "0", x2: "1", y2: "0" },
-                react_1.default.createElement("stop", { offset: "0%", stopColor: "#715efe" }),
-                react_1.default.createElement("stop", { offset: "100%", stopColor: "#ff5cdc" }))),
-        react_1.default.createElement("path", { d: "M11.2597 9.12114C8.08498 8.40423 7.59322 7.91247 6.87631 4.73772C6.84346 4.59262 6.7143 4.48929 6.56505 4.48929C6.4158 4.48929 6.28664 4.59262 6.2538 4.73772C5.53657 7.91247 5.04513 8.40423 1.87038 9.12114C1.72495 9.1543 1.62163 9.28314 1.62163 9.43239C1.62163 9.58164 1.72495 9.71048 1.87038 9.74365C5.04513 10.4609 5.53657 10.9526 6.2538 14.1271C6.28664 14.2722 6.4158 14.3755 6.56505 14.3755C6.7143 14.3755 6.84346 14.2722 6.87631 14.1271C7.59354 10.9526 8.08498 10.4609 11.2597 9.74365C11.4052 9.71048 11.5082 9.58164 11.5082 9.43239C11.5082 9.28314 11.4048 9.1543 11.2597 9.12114Z", fill: "#1A1C21" }),
-        react_1.default.createElement("path", { d: "M14.1299 4.17834C12.4423 3.79725 12.2053 3.5603 11.8242 1.87294C11.7911 1.72752 11.6622 1.62451 11.513 1.62451C11.3637 1.62451 11.2349 1.72752 11.2017 1.87294C10.8206 3.5603 10.5837 3.79725 8.8963 4.17834C8.75088 4.21151 8.64787 4.34035 8.64787 4.4896C8.64787 4.63885 8.75088 4.76769 8.8963 4.80086C10.5837 5.18195 10.8206 5.4189 11.2017 7.10658C11.2349 7.25168 11.3637 7.35501 11.513 7.35501C11.6622 7.35501 11.7911 7.25168 11.8242 7.10658C12.2053 5.4189 12.4423 5.18195 14.1299 4.80086C14.275 4.76769 14.3784 4.63885 14.3784 4.4896C14.3784 4.34035 14.275 4.21151 14.1299 4.17834Z", fill: "#1A1C21" })));
+        react_1.default.createElement("path", { d: "M11.2597 9.12114C8.08498 8.40423 7.59322 7.91247 6.87631 4.73772C6.84346 4.59262 6.7143 4.48929 6.56505 4.48929C6.4158 4.48929 6.28664 4.59262 6.2538 4.73772C5.53657 7.91247 5.04513 8.40423 1.87038 9.12114C1.72495 9.1543 1.62163 9.28314 1.62163 9.43239C1.62163 9.58164 1.72495 9.71048 1.87038 9.74365C5.04513 10.4609 5.53657 10.9526 6.2538 14.1271C6.28664 14.2722 6.4158 14.3755 6.56505 14.3755C6.7143 14.3755 6.84346 14.2722 6.87631 14.1271C7.59354 10.9526 8.08498 10.4609 11.2597 9.74365C11.4052 9.71048 11.5082 9.58164 11.5082 9.43239C11.5082 9.28314 11.4048 9.1543 11.2597 9.12114Z", fill: (0, utils_1.getCssColorVariable)(color) }),
+        react_1.default.createElement("path", { d: "M14.1299 4.17834C12.4423 3.79725 12.2053 3.5603 11.8242 1.87294C11.7911 1.72752 11.6622 1.62451 11.513 1.62451C11.3637 1.62451 11.2349 1.72752 11.2017 1.87294C10.8206 3.5603 10.5837 3.79725 8.8963 4.17834C8.75088 4.21151 8.64787 4.34035 8.64787 4.4896C8.64787 4.63885 8.75088 4.76769 8.8963 4.80086C10.5837 5.18195 10.8206 5.4189 11.2017 7.10658C11.2349 7.25168 11.3637 7.35501 11.513 7.35501C11.6622 7.35501 11.7911 7.25168 11.8242 7.10658C12.2053 5.4189 12.4423 5.18195 14.1299 4.80086C14.275 4.76769 14.3784 4.63885 14.3784 4.4896C14.3784 4.34035 14.275 4.21151 14.1299 4.17834Z", fill: (0, utils_1.getCssColorVariable)(color) })));
 };
 exports.AiStarsIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
     'data-component-name': 'icons/AiStarsIcon/AiStarsIcon',
 })) `
-  path {
-    fill: ${({ color, gradient }) => gradient ? 'url(#aiStarsGradient)' : (0, utils_1.getCssColorVariable)(color)};
-  }
-
   height: ${({ size }) => size || '16px'};
   width: ${({ size }) => size || '16px'};
 
   ${({ background, borderRadius, margin }) => background &&
     `
-    display: flex;
-    align-items: center;
-    justify-content: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      background: ${(0, utils_1.getCssColorVariable)(background)};
 
-    background: ${(0, utils_1.getCssColorVariable)(background)};
-    
-    padding: var(--spacing-xs);
-    margin: ${margin || '0'};
-    
-    border-radius: ${background && borderRadius ? borderRadius : 'none'};
+      padding: var(--spacing-xs);
+      margin: ${margin || '0'};
+      
+      border-radius: ${background && borderRadius ? borderRadius : 'none'};
     `}
 
   color: ${({ color }) => color && (0, utils_1.getCssColorVariable)(color)};

package/lib/icons/RabbitMQIcon/RabbitMQIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const RabbitMQIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
+    'data-component-name': string;
+} & {
+    color?: string;
+    size?: string;
+    className?: string;
+} & React.SVGProps<SVGSVGElement>, "data-component-name">;

package/lib/icons/RabbitMQIcon/RabbitMQIcon.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RabbitMQIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("g", { clipPath: "url(#clip0_15358_36168)" },
+        react_1.default.createElement("path", { d: "M13.1 6.8695H9.555C9.2715 6.8355 9.0555 6.586 9.0555 6.292V2.572C9.056 2.255 8.7985 2 8.484 2H7.2435C6.926 2 6.671 2.2575 6.671 2.5725V6.3315C6.6555 6.6155 6.4215 6.8435 6.1405 6.8695H5.212C4.939 6.836 4.728 6.607 4.71 6.33V2.5725C4.71 2.255 4.4525 2 4.138 2H2.897C2.58 2 2.325 2.2575 2.325 2.5725V7.442V13.4275C2.325 13.745 2.5825 14 2.897 14H4.1375H7.2425H8.483H13.1025C13.42 14 13.675 13.7425 13.675 13.4275V7.442C13.673 7.125 13.4175 6.8695 13.1 6.8695ZM11.4665 10.9745C11.4665 11.292 11.209 11.5495 10.8945 11.5495H9.6545C9.3365 11.5495 9.081 11.292 9.081 10.9745V9.804C9.081 9.486 9.3385 9.2295 9.6545 9.2295H10.8945C11.2125 9.2295 11.4665 9.487 11.4665 9.804V10.9745Z", fill: "#1A1C21" })),
+    react_1.default.createElement("defs", null,
+        react_1.default.createElement("clipPath", { id: "clip0_15358_36168" },
+            react_1.default.createElement("rect", { width: "12", height: "12", fill: "white", transform: "translate(2 2)" })))));
+exports.RabbitMQIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/RabbitMQIcon/RabbitMQIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=RabbitMQIcon.js.map

package/lib/index.d.ts

@@ -96,12 +96,12 @@ export * from './components/Menu/MenuItem';
 export * from './components/Menu/MenuMobile';
 export * from './components/Breadcrumbs/Breadcrumb';
 export * from './components/Breadcrumbs/Breadcrumbs';
-export * from './components/Catalog/Catalog';
-export * from './components/Catalog/CatalogCard';
-export * from './components/Catalog/CatalogActions';
-export * from './components/Catalog/CatalogHighlight';
-export * from './components/Catalog/CatalogInfoBlock';
-export * from './components/Catalog/CatalogVirtualizedGroups';
+export * from './components/CatalogLegacy/CatalogLegacy';
+export * from './components/CatalogLegacy/CatalogLegacyCard';
+export * from './components/CatalogLegacy/CatalogLegacyActions';
+export * from './components/CatalogLegacy/CatalogLegacyHighlight';
+export * from './components/CatalogLegacy/CatalogLegacyInfoBlock';
+export * from './components/CatalogLegacy/CatalogLegacyVirtualizedGroups';
 export * from './components/Product/Product';
 export * from './components/Product/ProductPicker';
 export * from './components/StatusCode/StatusCode';
@@ -225,7 +225,10 @@ export * from './icons/CheckboxFilledIcon/CheckboxFilledIcon';
 export * from './icons/WarningAltFilled/WarningAltFilled';
 export * from './icons/SettingsCogIcon/SettingsCogIcon';
 export * from './icons/KafkaIcon/KafkaIcon';
+export * from './icons/RabbitMQIcon/RabbitMQIcon';
 export * from './icons/CurveAutoColonIcon/CurveAutoColonIcon';
+export * from './icons/AiStarsIcon/AiStarsIcon';
+export * from './icons/AiStarsGradientIcon/AiStarsGradientIcon';
 export * from './layouts/RootLayout';
 export * from './layouts/PageLayout';
 export * from './layouts/NotFound';

package/lib/index.js

@@ -144,12 +144,12 @@ __exportStar(require("./components/Menu/MenuMobile"), exports);
 __exportStar(require("./components/Breadcrumbs/Breadcrumb"), exports);
 __exportStar(require("./components/Breadcrumbs/Breadcrumbs"), exports);
 /* Catalog */
-__exportStar(require("./components/Catalog/Catalog"), exports);
-__exportStar(require("./components/Catalog/CatalogCard"), exports);
-__exportStar(require("./components/Catalog/CatalogActions"), exports);
-__exportStar(require("./components/Catalog/CatalogHighlight"), exports);
-__exportStar(require("./components/Catalog/CatalogInfoBlock"), exports);
-__exportStar(require("./components/Catalog/CatalogVirtualizedGroups"), exports);
+__exportStar(require("./components/CatalogLegacy/CatalogLegacy"), exports);
+__exportStar(require("./components/CatalogLegacy/CatalogLegacyCard"), exports);
+__exportStar(require("./components/CatalogLegacy/CatalogLegacyActions"), exports);
+__exportStar(require("./components/CatalogLegacy/CatalogLegacyHighlight"), exports);
+__exportStar(require("./components/CatalogLegacy/CatalogLegacyInfoBlock"), exports);
+__exportStar(require("./components/CatalogLegacy/CatalogLegacyVirtualizedGroups"), exports);
 /* Product */
 __exportStar(require("./components/Product/Product"), exports);
 __exportStar(require("./components/Product/ProductPicker"), exports);
@@ -277,7 +277,10 @@ __exportStar(require("./icons/CheckboxFilledIcon/CheckboxFilledIcon"), exports);
 __exportStar(require("./icons/WarningAltFilled/WarningAltFilled"), exports);
 __exportStar(require("./icons/SettingsCogIcon/SettingsCogIcon"), exports);
 __exportStar(require("./icons/KafkaIcon/KafkaIcon"), exports);
+__exportStar(require("./icons/RabbitMQIcon/RabbitMQIcon"), exports);
 __exportStar(require("./icons/CurveAutoColonIcon/CurveAutoColonIcon"), exports);
+__exportStar(require("./icons/AiStarsIcon/AiStarsIcon"), exports);
+__exportStar(require("./icons/AiStarsGradientIcon/AiStarsGradientIcon"), exports);
 /* Layouts */
 __exportStar(require("./layouts/RootLayout"), exports);
 __exportStar(require("./layouts/PageLayout"), exports);

package/lib/markdoc/components/CodeWalkthrough/CodeWalkthrough.js

@@ -71,6 +71,11 @@ const ContentWrapper = styled_components_1.default.div `
   & > *:not(.code-step-wrapper) {
     padding-left: var(--spacing-xl);
   }
+  & > ul:not(.code-step-wrapper),
+  & > ol:not(.code-step-wrapper) {
+    padding-left: calc(var(--spacing-xl) + var(--md-list-left-padding));
+  }
+
   overflow-y: scroll;
 
   /* Hide scrollbar for Chrome, Safari and Opera */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.54.0-next.2",
+  "version": "0.54.0-next.3",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -61,7 +61,7 @@
     "json-schema-to-ts": "2.7.2",
     "npm-run-all2": "5.0.2",
     "react-refresh": "0.14.2",
-    "react-router-dom": "6.21.1",
+    "react-router-dom": "^6.21.1",
     "resize-observer-polyfill": "1.5.1",
     "rimraf": "5.0.7",
     "styled-components": "5.3.11",
@@ -83,7 +83,7 @@
     "hotkeys-js": "3.10.1",
     "i18next": "22.4.15",
     "jszip": "3.10.1",
-    "lodash.debounce": "4.0.8",
+    "lodash.debounce": "^4.0.8",
     "lodash.throttle": "4.1.1",
     "nprogress": "0.2.0",
     "react-calendar": "4.2.1",