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

package/src/icons/PeopleIcon/PeopleIcon.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <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"
+    />
+    <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"
+    />
+    <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"
+    />
+    <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"
+    />
+    <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"
+    />
+    <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"
+    />
+  </svg>
+);
+
+export const PeopleIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/PeopleIcon/PeopleIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '18px'};
+`;

package/src/icons/SlackIcon/SlackIcon.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <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"
+    />
+    <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"
+    />
+    <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"
+    />
+    <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"
+    />
+    <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"
+    />
+    <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"
+    />
+    <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"
+    />
+    <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"
+    />
+  </svg>
+);
+
+export const SlackIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/SlackIcon/SlackIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '18px'};
+`;

package/src/icons/SortIcon/SortIcon.tsx

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

package/src/icons/TableIcon/TableIcon.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <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"
+    />
+  </svg>
+);
+
+export const TableIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/TableIcon/TableIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/TagsIcon/TagsIcon.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <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"
+    />
+    <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"
+    />
+    <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"
+    />
+  </svg>
+);
+
+export const TagsIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/TagsIcon/TagsIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '18px'};
+`;

package/src/index.ts

@@ -15,6 +15,7 @@ export * from '@redocly/theme/components/Dropdown/Dropdown';
 export * from '@redocly/theme/components/Dropdown/DropdownMenu';
 export * from '@redocly/theme/components/Dropdown/DropdownMenuItem';
 export * from '@redocly/theme/components/Loaders/Loading';
+export * from '@redocly/theme/components/LoadMore/LoadMore';
 export * from '@redocly/theme/components/Link/Link';
 export * from '@redocly/theme/components/Portal/Portal';
 export * from '@redocly/theme/components/Segmented/Segmented';
@@ -117,6 +118,25 @@ export * from '@redocly/theme/components/Menu/MenuMobile';
 export * from '@redocly/theme/components/Breadcrumbs/Breadcrumb';
 export * from '@redocly/theme/components/Breadcrumbs/Breadcrumbs';
 /* Catalog */
+export * from '@redocly/theme/components/Catalog/Catalog';
+export * from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntity';
+export * from '@redocly/theme/components/Catalog/CatalogCardView/CatalogCardView';
+export * from '@redocly/theme/components/Catalog/CatalogCardView/CatalogCard';
+export * from '@redocly/theme/components/Catalog/CatalogTableView/CatalogDomainsCell';
+export * from '@redocly/theme/components/Catalog/CatalogTableView/CatalogEntityCell';
+export * from '@redocly/theme/components/Catalog/CatalogTableView/CatalogOwnersCell';
+export * from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableHeaderCell';
+export * from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableView';
+export * from '@redocly/theme/components/Catalog/CatalogSelector';
+export * from '@redocly/theme/components/Catalog/CatalogSortButton';
+export * from '@redocly/theme/components/Catalog/CatalogTagsWithTooltip';
+export * from '@redocly/theme/components/Catalog/CatalogViewModeToggle';
+export * from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelations';
+export * from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations';
+export * from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityDefaultRelations';
+export * from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable';
+
+/* CatalogClassic */
 export * from '@redocly/theme/components/CatalogClassic/CatalogClassic';
 export * from '@redocly/theme/components/CatalogClassic/CatalogClassicCard';
 export * from '@redocly/theme/components/CatalogClassic/CatalogClassicActions';

package/src/markdoc/components/Tabs/Tab.tsx

@@ -14,6 +14,7 @@ export type TabProps = {
   setRef: (element: HTMLButtonElement | null) => void;
   onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
   onClick: () => void;
+  icon?: React.ReactNode;
 };
 
 export function TabComponent({
@@ -24,6 +25,7 @@ export function TabComponent({
   setRef,
   onKeyDown,
   onClick,
+  icon,
 }: TabProps): JSX.Element {
   return (
     <TabItem data-component-name="Markdoc/Tabs/Tab" size={size} tabIndex={0}>
@@ -39,10 +41,19 @@ export function TabComponent({
         onKeyDown={onKeyDown}
         onClick={onClick}
       >
-        {label}
+        <LabelWrapper>
+          {icon}
+          {label}
+        </LabelWrapper>
       </TabButtonLink>
     </TabItem>
   );
 }
 
+const LabelWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+`;
+
 export const Tab = styled(TabComponent)``;

package/src/markdoc/components/Tabs/TabList.tsx

@@ -48,13 +48,14 @@ export function TabList({
       </HighlightBar>
       {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 (
           <Tab
             key={`key-${tabId}`}
             tabId={tabId}
             label={label}
+            icon={icon}
             size={size}
             disabled={child.props.disable}
             setRef={(el: HTMLButtonElement | null) => {

package/src/markdoc/components/Tabs/Tabs.tsx

@@ -16,15 +16,17 @@ 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 function Tabs({ children, className, size }: TabsProps): JSX.Element {
+export function Tabs({ children, className, size, forceReady = false }: TabsProps): JSX.Element {
   const [childrenArray, setChildrenArray] = useState<React.ReactElement<TabItemProps>[]>(
     React.Children.toArray(children) as React.ReactElement<TabItemProps>[],
   );
@@ -34,7 +36,6 @@ export function Tabs({ children, className, size }: TabsProps): JSX.Element {
   }, [children]);
   const tabsContainerRef = useRef<HTMLUListElement>(null);
   const [isAnimating, setIsAnimating] = useState<boolean>(false);
-
   const initialTab = childrenArray[0]?.props.label ?? '';
   const {
     activeTab,
@@ -126,7 +127,11 @@ export function Tabs({ children, className, size }: TabsProps): JSX.Element {
   }, [activeTab, prevTab, childrenArray, visibleTabs, overflowTabs]);
 
   return (
-    <TabsContainer data-component-name="Markdoc/Tabs/Tabs" className={className} isReady={ready}>
+    <TabsContainer
+      data-component-name="Markdoc/Tabs/Tabs"
+      className={className}
+      isReady={ready || forceReady}
+    >
       <TabList
         size={size}
         childrenArray={childrenArray}