@redocly/theme 0.55.0-next.7 → 0.55.0-next.8

package/lib/icons/CaretDownIcon/CaretDownIcon.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CaretDownIcon = 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({ viewBox: "0 0 8 4", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("path", { d: "M6.77566 0C7.04293 0 7.17678 0.323143 6.98779 0.512132L4.21205 3.28787C4.0949 3.40503 3.90495 3.40503 3.78779 3.28787L1.01205 0.512132C0.823064 0.323142 0.956914 0 1.22419 0H6.77566Z", fill: "#6E6F7A" })));
+exports.CaretDownIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/CaretDownIcon/CaretDownIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '4px'};
+  width: ${({ size }) => size || '8px'};
+`;
+//# sourceMappingURL=CaretDownIcon.js.map

package/lib/icons/CaretUpIcon/CaretUpIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const CaretUpIcon: 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/CaretUpIcon/CaretUpIcon.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CaretUpIcon = 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({ viewBox: "0 0 8 4", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("path", { d: "M1.22419 3.99573C0.956914 3.99573 0.823064 3.67259 1.01205 3.4836L3.78779 0.707863C3.90495 0.590706 4.0949 0.590706 4.21205 0.707863L6.98779 3.4836C7.17678 3.67259 7.04293 3.99573 6.77566 3.99573L1.22419 3.99573Z", fill: "#6E6F7A" })));
+exports.CaretUpIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/CaretUpIcon/CaretUpIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '4px'};
+  width: ${({ size }) => size || '8px'};
+`;
+//# sourceMappingURL=CaretUpIcon.js.map

package/lib/icons/DescSortIcon/DescSortIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const DescSortIcon: 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/DescSortIcon/DescSortIcon.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.DescSortIcon = 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({ viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("path", { d: "M9 11L9.707 10.293L11.5 12.086V2H12.5V12.086L14.293 10.293L15 11L12 14L9 11Z", fill: "#22242B" }),
+    react_1.default.createElement("path", { d: "M8 3H1V4H8V3Z", fill: "#22242B" }),
+    react_1.default.createElement("path", { d: "M8 6H3V7H8V6Z", fill: "#22242B" }),
+    react_1.default.createElement("path", { d: "M8 9H5V10H8V9Z", fill: "#22242B" })));
+exports.DescSortIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/DescSortIcon/DescSortIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=DescSortIcon.js.map

package/lib/icons/EntityTypeIcon/EntityTypeIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const EntityTypeIcon: 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/EntityTypeIcon/EntityTypeIcon.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.EntityTypeIcon = 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: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("path", { d: "M17.7501 8.375H9.62507V0.250001H8.37507V8.375H0.250073V9.625H8.37507V17.75H9.62507V9.625H17.7501V8.375Z", fill: "#555761" }),
+    react_1.default.createElement("path", { d: "M14.9913 11.5L15.8751 12.3837L13.6338 14.625L15.8751 16.8662L14.9913 17.75L11.8663 14.625L14.9913 11.5Z", fill: "#555761" }),
+    react_1.default.createElement("path", { d: "M5.87507 17.75H0.875073C0.768526 17.75 0.663745 17.7228 0.570682 17.6709C0.477618 17.619 0.399362 17.5442 0.343347 17.4536C0.287331 17.363 0.255415 17.2595 0.250631 17.1531C0.245846 17.0466 0.268352 16.9407 0.31601 16.8454L2.81601 11.8454C2.8737 11.7486 2.95556 11.6684 3.05356 11.6127C3.15156 11.557 3.26235 11.5277 3.37507 11.5277C3.48779 11.5277 3.59858 11.557 3.69659 11.6127C3.79459 11.6684 3.87644 11.7486 3.93413 11.8454L6.43413 16.8454C6.48179 16.9407 6.5043 17.0466 6.49951 17.1531C6.49473 17.2595 6.46281 17.363 6.4068 17.4536C6.35078 17.5442 6.27253 17.619 6.17946 17.6709C6.0864 17.7228 5.98162 17.75 5.87507 17.75ZM1.88645 16.5H4.8637L3.37507 13.5227L1.88645 16.5Z", fill: "#555761" }),
+    react_1.default.createElement("path", { d: "M16.5001 6.5H12.7501C12.4187 6.49962 12.1009 6.3678 11.8666 6.13346C11.6323 5.89913 11.5005 5.5814 11.5001 5.25V1.5C11.5005 1.1686 11.6323 0.850876 11.8666 0.616538C12.1009 0.3822 12.4187 0.250382 12.7501 0.250001H16.5001C16.8315 0.250382 17.1492 0.3822 17.3835 0.616538C17.6179 0.850876 17.7497 1.1686 17.7501 1.5V5.25C17.7497 5.5814 17.6179 5.89913 17.3835 6.13346C17.1492 6.3678 16.8315 6.49962 16.5001 6.5ZM12.7501 1.5V5.25H16.5007L16.5001 1.5H12.7501Z", fill: "#555761" }),
+    react_1.default.createElement("path", { d: "M3.37507 6.5C2.75701 6.5 2.15282 6.31672 1.63892 5.97334C1.12501 5.62996 0.724473 5.14191 0.487949 4.57089C0.251425 3.99987 0.18954 3.37153 0.310119 2.76534C0.430697 2.15915 0.728325 1.60233 1.16536 1.16529C1.6024 0.728254 2.15922 0.430626 2.76542 0.310047C3.37161 0.189469 3.99994 0.251354 4.57096 0.487878C5.14198 0.724402 5.63003 1.12494 5.97341 1.63884C6.31679 2.15275 6.50007 2.75693 6.50007 3.375C6.4991 4.2035 6.16954 4.99779 5.5837 5.58363C4.99786 6.16947 4.20357 6.49902 3.37507 6.5ZM3.37507 1.5C3.00423 1.5 2.64172 1.60997 2.33338 1.816C2.02504 2.02202 1.78471 2.31486 1.6428 2.65747C1.50088 3.00008 1.46375 3.37708 1.5361 3.7408C1.60845 4.10451 1.78702 4.4386 2.04925 4.70083C2.31147 4.96305 2.64556 5.14163 3.00928 5.21397C3.37299 5.28632 3.74999 5.24919 4.0926 5.10728C4.43522 4.96536 4.72805 4.72504 4.93408 4.4167C5.14011 4.10835 5.25007 3.74584 5.25007 3.375C5.24953 2.87789 5.05181 2.40129 4.70029 2.04978C4.34878 1.69827 3.87219 1.50055 3.37507 1.5Z", fill: "#555761" })));
+exports.EntityTypeIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/EntityTypeIcon/EntityTypeIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '18px'};
+`;
+//# sourceMappingURL=EntityTypeIcon.js.map

package/lib/icons/GithubIcon/GithubIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const GithubIcon: 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/GithubIcon/GithubIcon.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GithubIcon = 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: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.99982 0.250052C6.9225 0.250332 4.91303 0.989665 3.33088 2.3358C1.74873 3.68193 0.697109 5.54705 0.364134 7.59751C0.0311591 9.64798 0.438552 11.75 1.51344 13.5276C2.58832 15.3052 4.26058 16.6424 6.23107 17.3001C6.66857 17.3813 6.85607 17.1126 6.85607 16.8813C6.85607 16.6501 6.85607 16.1251 6.85607 15.3938C4.42482 15.9188 3.91232 14.2188 3.91232 14.2188C3.74135 13.6831 3.38152 13.2277 2.89982 12.9376C2.10607 12.4001 2.96232 12.4063 2.96232 12.4063C3.23957 12.4455 3.50421 12.5475 3.73601 12.7045C3.96782 12.8616 4.16066 13.0696 4.29982 13.3126C4.54191 13.7468 4.94653 14.0671 5.42471 14.203C5.9029 14.339 6.4155 14.2794 6.84982 14.0376C6.88511 13.5941 7.08061 13.1786 7.39982 12.8688C5.46232 12.6438 3.41857 11.8938 3.41857 8.5438C3.4044 7.67374 3.72683 6.83182 4.31857 6.1938C4.05073 5.44017 4.08205 4.61254 4.40607 3.8813C4.40607 3.8813 5.13732 3.6438 6.81232 4.77505C8.24449 4.3844 9.75515 4.3844 11.1873 4.77505C12.8561 3.6438 13.5873 3.8813 13.5873 3.8813C13.9113 4.61254 13.9427 5.44017 13.6748 6.1938C14.2666 6.83182 14.589 7.67374 14.5748 8.5438C14.5748 11.9063 12.5311 12.6438 10.5811 12.8626C10.79 13.0743 10.951 13.3283 11.0535 13.6075C11.1559 13.8868 11.1973 14.1847 11.1748 14.4813C11.1748 15.6501 11.1748 16.5938 11.1748 16.8813C11.1748 17.1688 11.3311 17.3876 11.7998 17.3001C13.7729 16.6416 15.4469 15.3018 16.5216 13.521C17.5963 11.7401 18.0015 9.63459 17.6644 7.58204C17.3273 5.5295 16.2701 3.66416 14.6822 2.32053C13.0944 0.976903 11.0798 0.242866 8.99982 0.250052Z", fill: "#555761" })));
+exports.GithubIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/GithubIcon/GithubIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '18px'};
+`;
+//# sourceMappingURL=GithubIcon.js.map

package/lib/icons/GraphIcon/GraphIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const GraphIcon: 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/GraphIcon/GraphIcon.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GraphIcon = 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({ viewBox: "0 0 14 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("path", { d: "M13.125 4.25V0.75H9.625V2.0625H7.875C7.64302 2.06277 7.42061 2.15504 7.25658 2.31908C7.09254 2.48311 7.00027 2.70552 7 2.9375V5.5625H4.375V4.25H0.875V7.75H4.375V6.4375H7V9.0625C7.00027 9.29448 7.09254 9.51689 7.25658 9.68092C7.42061 9.84496 7.64302 9.93723 7.875 9.9375H9.625V11.25H13.125V7.75H9.625V9.0625H7.875V2.9375H9.625V4.25H13.125ZM3.5 6.875H1.75V5.125H3.5V6.875ZM10.5 8.625H12.25V10.375H10.5V8.625ZM10.5 1.625H12.25V3.375H10.5V1.625Z", fill: "#0E8450" })));
+exports.GraphIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/GraphIcon/GraphIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '12px'};
+  width: ${({ size }) => size || '14px'};
+`;
+//# sourceMappingURL=GraphIcon.js.map

package/lib/icons/PeopleIcon/PeopleIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const PeopleIcon: 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/PeopleIcon/PeopleIcon.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PeopleIcon = 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({ viewBox: "0 0 18 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("path", { d: "M14.625 6.875H13.5V8H14.625C15.0724 8.00049 15.5013 8.17844 15.8177 8.4948C16.1341 8.81116 16.312 9.2401 16.3125 9.6875V11.9375H17.4375V9.6875C17.4366 8.94184 17.14 8.22697 16.6128 7.69972C16.0855 7.17246 15.3707 6.87586 14.625 6.875Z", fill: "#1F7CFF" }),
+    react_1.default.createElement("path", { d: "M13.5 1.25C13.8338 1.25 14.16 1.34897 14.4375 1.5344C14.715 1.71982 14.9313 1.98337 15.059 2.29172C15.1868 2.60007 15.2202 2.93937 15.1551 3.26671C15.09 3.59406 14.9292 3.89474 14.6932 4.13074C14.4572 4.36674 14.1566 4.52746 13.8292 4.59258C13.5019 4.65769 13.1626 4.62427 12.8542 4.49655C12.5459 4.36882 12.2823 4.15253 12.0969 3.87502C11.9115 3.59752 11.8125 3.27126 11.8125 2.9375C11.8125 2.48995 11.9903 2.06072 12.3068 1.74426C12.6232 1.42779 13.0524 1.25 13.5 1.25ZM13.5 0.125C12.9437 0.125 12.4 0.28995 11.9375 0.598992C11.4749 0.908033 11.1145 1.34729 10.9016 1.8612C10.6887 2.37512 10.633 2.94062 10.7415 3.48619C10.8501 4.03176 11.1179 4.5329 11.5113 4.92624C11.9046 5.31957 12.4057 5.58744 12.9513 5.69596C13.4969 5.80448 14.0624 5.74878 14.5763 5.53591C15.0902 5.32304 15.5295 4.96255 15.8385 4.50004C16.1475 4.03753 16.3125 3.49376 16.3125 2.9375C16.3125 2.19158 16.0162 1.47621 15.4887 0.948762C14.9613 0.421316 14.2459 0.125 13.5 0.125Z", fill: "#1F7CFF" }),
+    react_1.default.createElement("path", { d: "M12.9375 15.875H11.8125V14.75C11.812 14.3026 11.6341 13.8737 11.3177 13.5573C11.0013 13.2409 10.5724 13.063 10.125 13.0625H7.875C7.4276 13.063 6.99866 13.2409 6.6823 13.5573C6.36594 13.8737 6.18799 14.3026 6.1875 14.75V15.875H5.0625V14.75C5.06338 14.0043 5.35998 13.2895 5.88723 12.7622C6.41449 12.235 7.12935 11.9384 7.875 11.9375H10.125C10.8707 11.9384 11.5855 12.235 12.1128 12.7622C12.64 13.2895 12.9366 14.0043 12.9375 14.75V15.875Z", fill: "#1F7CFF" }),
+    react_1.default.createElement("path", { d: "M9 6.3125C9.33376 6.3125 9.66002 6.41147 9.93752 6.5969C10.215 6.78232 10.4313 7.04587 10.559 7.35422C10.6868 7.66257 10.7202 8.00187 10.6551 8.32922C10.59 8.65656 10.4292 8.95724 10.1932 9.19324C9.95724 9.42924 9.65656 9.58996 9.32922 9.65508C9.00187 9.72019 8.66257 9.68677 8.35422 9.55905C8.04587 9.43132 7.78232 9.21503 7.5969 8.93752C7.41147 8.66002 7.3125 8.33376 7.3125 8C7.3125 7.55245 7.49029 7.12322 7.80676 6.80676C8.12322 6.49029 8.55245 6.3125 9 6.3125ZM9 5.1875C8.44374 5.1875 7.89997 5.35245 7.43746 5.66149C6.97495 5.97053 6.61446 6.40979 6.40159 6.9237C6.18872 7.43762 6.13302 8.00312 6.24154 8.54869C6.35006 9.09426 6.61793 9.5954 7.01126 9.98874C7.4046 10.3821 7.90574 10.6499 8.45131 10.7585C8.99688 10.867 9.56238 10.8113 10.0763 10.5984C10.5902 10.3855 11.0295 10.0251 11.3385 9.56254C11.6475 9.10003 11.8125 8.55626 11.8125 8C11.8125 7.25408 11.5162 6.53871 10.9887 6.01126C10.4613 5.48382 9.74592 5.1875 9 5.1875Z", fill: "#1F7CFF" }),
+    react_1.default.createElement("path", { d: "M4.5 6.875H3.375C2.62935 6.87588 1.91449 7.17248 1.38723 7.69973C0.859976 8.22699 0.563378 8.94185 0.5625 9.6875V11.9375H1.6875V9.6875C1.68799 9.2401 1.86594 8.81116 2.1823 8.4948C2.49866 8.17844 2.9276 8.00049 3.375 8H4.5V6.875Z", fill: "#1F7CFF" }),
+    react_1.default.createElement("path", { d: "M4.5 1.25C4.83376 1.25 5.16002 1.34897 5.43752 1.5344C5.71503 1.71982 5.93132 1.98337 6.05905 2.29172C6.18677 2.60007 6.22019 2.93937 6.15508 3.26671C6.08996 3.59406 5.92924 3.89474 5.69324 4.13074C5.45724 4.36674 5.15656 4.52746 4.82922 4.59258C4.50187 4.65769 4.16257 4.62427 3.85422 4.49655C3.54587 4.36882 3.28232 4.15253 3.0969 3.87502C2.91147 3.59752 2.8125 3.27126 2.8125 2.9375C2.8125 2.48995 2.99029 2.06072 3.30676 1.74426C3.62322 1.42779 4.05245 1.25 4.5 1.25ZM4.5 0.125C3.94374 0.125 3.39997 0.28995 2.93746 0.598992C2.47495 0.908033 2.11446 1.34729 1.90159 1.8612C1.68872 2.37512 1.63302 2.94062 1.74154 3.48619C1.85006 4.03176 2.11793 4.5329 2.51126 4.92624C2.9046 5.31957 3.40574 5.58744 3.95131 5.69596C4.49688 5.80448 5.06238 5.74878 5.5763 5.53591C6.09021 5.32304 6.52947 4.96255 6.83851 4.50004C7.14755 4.03753 7.3125 3.49376 7.3125 2.9375C7.3125 2.19158 7.01618 1.47621 6.48874 0.948762C5.96129 0.421316 5.24592 0.125 4.5 0.125Z", fill: "#1F7CFF" })));
+exports.PeopleIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/PeopleIcon/PeopleIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '18px'};
+`;
+//# sourceMappingURL=PeopleIcon.js.map

package/lib/icons/SlackIcon/SlackIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const SlackIcon: 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/SlackIcon/SlackIcon.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SlackIcon = 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("path", { d: "M3.6516 9.97873C3.65161 10.2904 3.5592 10.595 3.38606 10.8542C3.21292 11.1133 2.96682 11.3153 2.67889 11.4346C2.39095 11.5539 2.07412 11.5851 1.76845 11.5243C1.46278 11.4635 1.182 11.3134 0.961622 11.093C0.741246 10.8726 0.591169 10.5919 0.53037 10.2862C0.469572 9.98052 0.500782 9.66368 0.620054 9.37575C0.739327 9.08781 0.941305 8.84172 1.20044 8.66858C1.45959 8.49543 1.76425 8.40303 2.07591 8.40304H3.6516V9.97873Z", fill: "#555761" }),
+    react_1.default.createElement("path", { d: "M4.4456 9.97873C4.44822 9.56254 4.61539 9.16429 4.91061 8.87092C5.20583 8.57756 5.60512 8.4129 6.02131 8.4129C6.43751 8.4129 6.8368 8.57756 7.13202 8.87092C7.42724 9.16429 7.59441 9.56254 7.59703 9.97873V13.9242C7.59834 14.1319 7.55855 14.3379 7.47995 14.5302C7.40135 14.7225 7.28549 14.8974 7.13904 15.0448C6.99259 15.1922 6.81844 15.3091 6.62662 15.3889C6.43479 15.4688 6.22908 15.5098 6.02131 15.5098C5.81355 15.5098 5.60783 15.4688 5.41601 15.3889C5.22418 15.3091 5.05004 15.1922 4.90359 15.0448C4.75714 14.8974 4.64128 14.7225 4.56268 14.5302C4.48408 14.3379 4.44429 14.1319 4.4456 13.9242V9.97873Z", fill: "#555761" }),
+    react_1.default.createElement("path", { d: "M6.02135 3.65135C5.70969 3.65136 5.40502 3.55896 5.14588 3.38582C4.88674 3.21268 4.68476 2.96658 4.56549 2.67864C4.44622 2.39071 4.41501 2.07387 4.47581 1.7682C4.53661 1.46253 4.68668 1.18175 4.90706 0.961378C5.12744 0.741002 5.40821 0.590925 5.71389 0.530126C6.01956 0.469328 6.33639 0.500538 6.62433 0.61981C6.91226 0.739083 7.15836 0.94106 7.3315 1.2002C7.50464 1.45934 7.59705 1.764 7.59703 2.07566V3.65135H6.02135Z", fill: "#555761" }),
+    react_1.default.createElement("path", { d: "M6.02135 4.44535C6.43753 4.44797 6.83578 4.61514 7.12915 4.91036C7.42252 5.20558 7.58717 5.60488 7.58717 6.02107C7.58717 6.43727 7.42252 6.83656 7.12915 7.13178C6.83578 7.427 6.43753 7.59417 6.02135 7.59679H2.07591C1.86815 7.5981 1.66218 7.55831 1.46985 7.47971C1.27753 7.4011 1.10265 7.28525 0.955275 7.1388C0.807901 6.99235 0.690943 6.8182 0.611133 6.62638C0.531322 6.43455 0.490234 6.22884 0.490234 6.02107C0.490234 5.8133 0.531322 5.60759 0.611133 5.41577C0.690943 5.22394 0.807901 5.04979 0.955275 4.90334C1.10265 4.7569 1.27753 4.64104 1.46985 4.56244C1.66218 4.48383 1.86815 4.44404 2.07591 4.44535H6.02135Z", fill: "#555761" }),
+    react_1.default.createElement("path", { d: "M12.3487 6.0211C12.3487 5.70944 12.4411 5.40478 12.6143 5.14564C12.7874 4.8865 13.0335 4.68452 13.3214 4.56525C13.6094 4.44598 13.9262 4.41477 14.2319 4.47556C14.5375 4.53636 14.8183 4.68644 15.0387 4.90682C15.2591 5.12719 15.4091 5.40797 15.4699 5.71364C15.5307 6.01931 15.4995 6.33615 15.3803 6.62408C15.261 6.91201 15.059 7.15811 14.7999 7.33125C14.5407 7.50439 14.2361 7.5968 13.9244 7.59679H12.3487V6.0211Z", fill: "#555761" }),
+    react_1.default.createElement("path", { d: "M11.5547 6.0211C11.5521 6.43729 11.3849 6.83554 11.0897 7.1289C10.7945 7.42227 10.3952 7.58693 9.979 7.58693C9.56281 7.58693 9.16351 7.42227 8.86829 7.1289C8.57307 6.83554 8.4059 6.43729 8.40328 6.0211V2.07566C8.40198 1.8679 8.44177 1.66193 8.52037 1.46961C8.59897 1.27729 8.71483 1.10241 8.86127 0.955031C9.00772 0.807656 9.18187 0.690699 9.3737 0.610888C9.56552 0.531078 9.77124 0.48999 9.979 0.48999C10.1868 0.48999 10.3925 0.531078 10.5843 0.610888C10.7761 0.690699 10.9503 0.807656 11.0967 0.955031C11.2432 1.10241 11.359 1.27729 11.4376 1.46961C11.5162 1.66193 11.556 1.8679 11.5547 2.07566V6.0211Z", fill: "#555761" }),
+    react_1.default.createElement("path", { d: "M9.97897 12.3485C10.2906 12.3485 10.5953 12.4409 10.8544 12.614C11.1136 12.7872 11.3156 13.0333 11.4348 13.3212C11.5541 13.6091 11.5853 13.926 11.5245 14.2316C11.4637 14.5373 11.3136 14.8181 11.0933 15.0385C10.8729 15.2588 10.5921 15.4089 10.2864 15.4697C9.98076 15.5305 9.66392 15.4993 9.37599 15.38C9.08806 15.2607 8.84196 15.0588 8.66882 14.7996C8.49568 14.5405 8.40327 14.2358 8.40328 13.9242V12.3485H9.97897Z", fill: "#555761" }),
+    react_1.default.createElement("path", { d: "M9.97897 11.5545C9.56278 11.5519 9.16453 11.3847 8.87117 11.0895C8.5778 10.7942 8.41315 10.395 8.41315 9.97876C8.41315 9.56256 8.5778 9.16327 8.87117 8.86805C9.16453 8.57283 9.56278 8.40566 9.97897 8.40304H13.9244C14.1322 8.40173 14.3381 8.44152 14.5305 8.52012C14.7228 8.59872 14.8977 8.71458 15.045 8.86103C15.1924 9.00748 15.3094 9.18163 15.3892 9.37345C15.469 9.56528 15.5101 9.77099 15.5101 9.97876C15.5101 10.1865 15.469 10.3922 15.3892 10.5841C15.3094 10.7759 15.1924 10.95 15.045 11.0965C14.8977 11.2429 14.7228 11.3588 14.5305 11.4374C14.3381 11.516 14.1322 11.5558 13.9244 11.5545H9.97897Z", fill: "#555761" })));
+exports.SlackIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/SlackIcon/SlackIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '18px'};
+`;
+//# sourceMappingURL=SlackIcon.js.map

package/lib/icons/SortIcon/SortIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const SortIcon: 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/SortIcon/SortIcon.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.SortIcon = 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({ viewBox: "0 0 14 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("path", { d: "M8 9L8.707 8.293L10.5 10.086V0H11.5V10.086L13.293 8.293L14 9L11 12L8 9Z", fill: "#22242B" }),
+    react_1.default.createElement("path", { d: "M7 7H0V8H7V7Z", fill: "#22242B" }),
+    react_1.default.createElement("path", { d: "M7 4H2V5H7V4Z", fill: "#22242B" }),
+    react_1.default.createElement("path", { d: "M7 1H4V2H7V1Z", fill: "#22242B" })));
+exports.SortIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/SortIcon/SortIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '14px'};
+  width: ${({ size }) => size || '12px'};
+`;
+//# sourceMappingURL=SortIcon.js.map

package/lib/icons/TableIcon/TableIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const TableIcon: 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/TableIcon/TableIcon.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableIcon = 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({ viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("path", { d: "M13.5 1.5C13.5 1.23478 13.3946 0.98043 13.2071 0.792893C13.0196 0.605357 12.7652 0.5 12.5 0.5H1.5C1.23478 0.5 0.98043 0.605357 0.792893 0.792893C0.605357 0.98043 0.5 1.23478 0.5 1.5V12.5C0.5 12.7652 0.605357 13.0196 0.792893 13.2071C0.98043 13.3946 1.23478 13.5 1.5 13.5H12.5C12.7652 13.5 13.0196 13.3946 13.2071 13.2071C13.3946 13.0196 13.5 12.7652 13.5 12.5V1.5ZM12.5 1.5V3.5H1.5V1.5H12.5ZM12.5 12.5H1.5V10.5H12.5V12.5ZM12.5 9.5H1.5V7.5H12.5V9.5ZM12.5 6.5H1.5V4.5H12.5V6.5Z", fill: "#22242B" })));
+exports.TableIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/TableIcon/TableIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=TableIcon.js.map

package/lib/icons/TagsIcon/TagsIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const TagsIcon: 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/TagsIcon/TagsIcon.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TagsIcon = 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: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("path", { d: "M6.25 10C6.94036 10 7.5 9.44036 7.5 8.75C7.5 8.05964 6.94036 7.5 6.25 7.5C5.55964 7.5 5 8.05964 5 8.75C5 9.44036 5.55964 10 6.25 10Z", fill: "#555761" }),
+    react_1.default.createElement("path", { d: "M10 18.75C9.91775 18.7505 9.83621 18.7347 9.76006 18.7036C9.68391 18.6725 9.61465 18.6267 9.55625 18.5687L2.86875 11.875C2.63401 11.6417 2.5014 11.3247 2.5 10.9937V6.25C2.5 5.91848 2.6317 5.60054 2.86612 5.36612C3.10054 5.1317 3.41848 5 3.75 5H8.49375C8.82474 5.0014 9.14166 5.13401 9.375 5.36875L16.0687 12.0563C16.1273 12.1144 16.1738 12.1835 16.2056 12.2596C16.2373 12.3358 16.2536 12.4175 16.2536 12.5C16.2536 12.5825 16.2373 12.6642 16.2056 12.7404C16.1738 12.8165 16.1273 12.8856 16.0687 12.9437L10.4437 18.5687C10.3853 18.6267 10.3161 18.6725 10.2399 18.7036C10.1638 18.7347 10.0823 18.7505 10 18.75ZM3.75 6.25V10.9937L10 17.2437L14.7437 12.5L8.49375 6.25H3.75Z", fill: "#555761" }),
+    react_1.default.createElement("path", { d: "M17.3187 8.30625L10.625 1.61875C10.3917 1.38401 10.0747 1.2514 9.74375 1.25H5C4.66848 1.25 4.35054 1.3817 4.11612 1.61612C3.8817 1.85054 3.75 2.16848 3.75 2.5V3.75H5V2.5H9.74375L15.9937 8.75L15.1813 9.55625L16.0687 10.4437L17.3187 9.19375C17.3773 9.13565 17.4238 9.06652 17.4556 8.99036C17.4873 8.9142 17.5036 8.83251 17.5036 8.75C17.5036 8.66749 17.4873 8.5858 17.4556 8.50964C17.4238 8.43348 17.3773 8.36435 17.3187 8.30625Z", fill: "#555761" })));
+exports.TagsIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/TagsIcon/TagsIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '18px'};
+`;
+//# sourceMappingURL=TagsIcon.js.map

package/lib/index.d.ts

@@ -13,6 +13,7 @@ export * from './components/Dropdown/Dropdown';
 export * from './components/Dropdown/DropdownMenu';
 export * from './components/Dropdown/DropdownMenuItem';
 export * from './components/Loaders/Loading';
+export * from './components/LoadMore/LoadMore';
 export * from './components/Link/Link';
 export * from './components/Portal/Portal';
 export * from './components/Segmented/Segmented';
@@ -97,6 +98,23 @@ 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/CatalogEntity/CatalogEntity';
+export * from './components/Catalog/CatalogCardView/CatalogCardView';
+export * from './components/Catalog/CatalogCardView/CatalogCard';
+export * from './components/Catalog/CatalogTableView/CatalogDomainsCell';
+export * from './components/Catalog/CatalogTableView/CatalogEntityCell';
+export * from './components/Catalog/CatalogTableView/CatalogOwnersCell';
+export * from './components/Catalog/CatalogTableView/CatalogTableHeaderCell';
+export * from './components/Catalog/CatalogTableView/CatalogTableView';
+export * from './components/Catalog/CatalogSelector';
+export * from './components/Catalog/CatalogSortButton';
+export * from './components/Catalog/CatalogTagsWithTooltip';
+export * from './components/Catalog/CatalogViewModeToggle';
+export * from './components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelations';
+export * from './components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations';
+export * from './components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityDefaultRelations';
+export * from './components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable';
 export * from './components/CatalogClassic/CatalogClassic';
 export * from './components/CatalogClassic/CatalogClassicCard';
 export * from './components/CatalogClassic/CatalogClassicActions';

package/lib/index.js

@@ -43,6 +43,7 @@ __exportStar(require("./components/Dropdown/Dropdown"), exports);
 __exportStar(require("./components/Dropdown/DropdownMenu"), exports);
 __exportStar(require("./components/Dropdown/DropdownMenuItem"), exports);
 __exportStar(require("./components/Loaders/Loading"), exports);
+__exportStar(require("./components/LoadMore/LoadMore"), exports);
 __exportStar(require("./components/Link/Link"), exports);
 __exportStar(require("./components/Portal/Portal"), exports);
 __exportStar(require("./components/Segmented/Segmented"), exports);
@@ -145,6 +146,24 @@ __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/CatalogEntity/CatalogEntity"), exports);
+__exportStar(require("./components/Catalog/CatalogCardView/CatalogCardView"), exports);
+__exportStar(require("./components/Catalog/CatalogCardView/CatalogCard"), exports);
+__exportStar(require("./components/Catalog/CatalogTableView/CatalogDomainsCell"), exports);
+__exportStar(require("./components/Catalog/CatalogTableView/CatalogEntityCell"), exports);
+__exportStar(require("./components/Catalog/CatalogTableView/CatalogOwnersCell"), exports);
+__exportStar(require("./components/Catalog/CatalogTableView/CatalogTableHeaderCell"), exports);
+__exportStar(require("./components/Catalog/CatalogTableView/CatalogTableView"), exports);
+__exportStar(require("./components/Catalog/CatalogSelector"), exports);
+__exportStar(require("./components/Catalog/CatalogSortButton"), exports);
+__exportStar(require("./components/Catalog/CatalogTagsWithTooltip"), exports);
+__exportStar(require("./components/Catalog/CatalogViewModeToggle"), exports);
+__exportStar(require("./components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelations"), exports);
+__exportStar(require("./components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations"), exports);
+__exportStar(require("./components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityDefaultRelations"), exports);
+__exportStar(require("./components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable"), exports);
+/* CatalogClassic */
 __exportStar(require("./components/CatalogClassic/CatalogClassic"), exports);
 __exportStar(require("./components/CatalogClassic/CatalogClassicCard"), exports);
 __exportStar(require("./components/CatalogClassic/CatalogClassicActions"), exports);

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

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

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

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

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

@@ -42,9 +42,9 @@ function TabList({ childrenArray, size, overflowTabs, visibleTabs, setTabRef, on
         childrenArray.map((child, index) => {
             if (!visibleTabs.includes(index))
                 return null;
-            const { label } = child.props;
+            const { label, icon } = child.props;
             const tabId = getTabId(label, index);
-            return (react_1.default.createElement(Tab_1.Tab, { key: `key-${tabId}`, tabId: tabId, label: label, size: size, disabled: child.props.disable, setRef: (el) => {
+            return (react_1.default.createElement(Tab_1.Tab, { key: `key-${tabId}`, tabId: tabId, label: label, icon: icon, size: size, disabled: child.props.disable, setRef: (el) => {
                     setTabRef(el, index);
                     if (el) {
                         el.setAttribute('data-label', label);

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

@@ -9,12 +9,14 @@ export type TabItemProps = {
     disable?: boolean;
     onClick?: () => void;
     children: React.ReactNode;
+    icon?: React.ReactNode;
 };
 type TabsProps = {
     children: React.ReactElement<TabItemProps>[];
     className?: string;
     size: TabsSize;
+    forceReady?: boolean;
 };
-export declare function Tabs({ children, className, size }: TabsProps): JSX.Element;
+export declare function Tabs({ children, className, size, forceReady }: TabsProps): JSX.Element;
 export declare const TabContent: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

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

@@ -34,7 +34,7 @@ var TabsSize;
     TabsSize["SMALL"] = "small";
     TabsSize["MEDIUM"] = "medium";
 })(TabsSize || (exports.TabsSize = TabsSize = {}));
-function Tabs({ children, className, size }) {
+function Tabs({ children, className, size, forceReady = false }) {
     var _a, _b;
     const [childrenArray, setChildrenArray] = (0, react_1.useState)(react_1.default.Children.toArray(children));
     (0, react_1.useEffect)(() => {
@@ -111,7 +111,7 @@ function Tabs({ children, className, size }) {
             setIsAnimating(false);
         }
     }, [activeTab, prevTab, childrenArray, visibleTabs, overflowTabs]);
-    return (react_1.default.createElement(TabsContainer, { "data-component-name": "Markdoc/Tabs/Tabs", className: className, isReady: ready },
+    return (react_1.default.createElement(TabsContainer, { "data-component-name": "Markdoc/Tabs/Tabs", className: className, isReady: ready || forceReady },
         react_1.default.createElement(TabList_1.TabList, { size: size, childrenArray: childrenArray, overflowTabs: overflowTabs, setTabRef: setTabRef, onTabClick: onTabClick, handleKeyboard: handleKeyboard, getTabId: getTabId, activeTab: activeTab, isAnimating: isAnimating, highlightStyle: highlightStyle, visibleTabs: visibleTabs, allTabsHidden: allTabsHidden, tabsContainerRef: tabsContainerRef }),
         childrenArray.map((child, index) => {
             const { label } = child.props;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.55.0-next.7",
+  "version": "0.55.0-next.8",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -76,6 +76,7 @@
     "webpack": "5.94.0"
   },
   "dependencies": {
+    "@tanstack/react-query": "5.62.3",
     "@tanstack/react-virtual": "3.13.0",
     "copy-to-clipboard": "3.3.3",
     "file-saver": "2.0.5",

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -1,15 +1,20 @@
 import React from 'react';
 import styled from 'styled-components';
+import { BreadcrumbItem } from '@redocly/config';
 
 import type { JSX } from 'react';
 
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { Breadcrumb } from '@redocly/theme/components/Breadcrumbs/Breadcrumb';
 
-export function Breadcrumbs(props: { className?: string }): JSX.Element | null {
+export function Breadcrumbs(props: {
+  className?: string;
+  additionalBreadcrumbs?: BreadcrumbItem[];
+}): JSX.Element | null {
   const { useBreadcrumbs, useTelemetry } = useThemeHooks();
+  const fileBreadcrumbs = useBreadcrumbs();
+  const breadcrumbs = [...fileBreadcrumbs, ...(props.additionalBreadcrumbs || [])];
   const telemetry = useTelemetry();
-  const breadcrumbs = useBreadcrumbs();
 
   if (breadcrumbs.length === 0) {
     return null;