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

package/src/core/hooks/code-walkthrough/use-code-walkthrough-steps.ts

@@ -38,14 +38,17 @@ export function useCodeWalkthroughSteps(
     enableDeepLink ? searchParams.get(ACTIVE_STEP_QUERY_PARAM) : null,
   );
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const _steps = useMemo(() => steps, [JSON.stringify(steps)]);
+
   const register = useCallback(
     (element: HTMLElement) => {
       // for some reason, the observer is not ready immediately
       setTimeout(() => {
         if (observerRef.current) {
           const stepKey = Number(element.dataset.stepKey);
-          if (Number.isInteger(stepKey) && stepKey >= 0) {
-            steps[stepKey].compRef = element;
+          if (Number.isInteger(stepKey) && stepKey >= 0 && _steps[stepKey]) {
+            _steps[stepKey].compRef = element;
           }
 
           observerRef.current.observe(element);
@@ -53,22 +56,22 @@ export function useCodeWalkthroughSteps(
         }
       }, 10);
     },
-    [steps],
+    [_steps],
   );
 
   const unregister = useCallback(
     (element: HTMLElement) => {
       if (observerRef.current) {
         const stepKey = Number(element.dataset.stepKey);
-        if (Number.isInteger(stepKey) && stepKey >= 0) {
-          steps[stepKey].compRef = undefined;
+        if (Number.isInteger(stepKey) && stepKey >= 0 && _steps[stepKey]) {
+          _steps[stepKey].compRef = undefined;
         }
 
         observerRef.current.unobserve(element);
         observedElementsRef.current.delete(element);
       }
     },
-    [steps],
+    [_steps],
   );
 
   const observerCallback = useCallback(
@@ -77,7 +80,7 @@ export function useCodeWalkthroughSteps(
         return;
       }
 
-      const renderedSteps = steps.filter((step) => Boolean(step.compRef));
+      const renderedSteps = _steps.filter((step) => Boolean(step.compRef));
 
       if (renderedSteps.length < 2) {
         setActiveStep(renderedSteps[0]?.id || null);
@@ -92,7 +95,7 @@ export function useCodeWalkthroughSteps(
         }
 
         const { intersectionRatio, boundingClientRect, rootBounds, isIntersecting } = entry;
-        const step = steps[stepKey];
+        const step = _steps[stepKey];
 
         const stepIndex = renderedSteps.findIndex(
           (renderedStep) => renderedStep.stepKey === step.stepKey,
@@ -130,7 +133,7 @@ export function useCodeWalkthroughSteps(
         }
       }
     },
-    [steps, activeStep],
+    [_steps, activeStep],
   );
   useEffect(() => {
     const filtersElementHeight = filtersElementRef.current?.clientHeight || 0;

package/src/core/hooks/index.ts

@@ -33,3 +33,4 @@ export * from '@redocly/theme/core/hooks/code-walkthrough/use-code-walkthrough-s
 export * from '@redocly/theme/core/hooks/code-walkthrough/use-code-walkthrough-controls';
 export * from '@redocly/theme/core/hooks/code-walkthrough/use-code-panel';
 export * from '@redocly/theme/core/hooks/code-walkthrough/use-renderable-files';
+export * from '@redocly/theme/core/hooks/use-element-size';

package/src/core/hooks/use-element-size.ts

@@ -0,0 +1,61 @@
+import { useState, useEffect, useCallback, RefObject } from 'react';
+
+type Size = {
+  width: number;
+  height: number;
+};
+
+const getInitialSize = (ref?: RefObject<HTMLElement>): Size => {
+  if (ref?.current) {
+    return {
+      width: ref.current.offsetWidth,
+      height: ref.current.offsetHeight,
+    };
+  }
+  return {
+    width: typeof window !== 'undefined' ? window.innerWidth : 0,
+    height: typeof window !== 'undefined' ? window.innerHeight : 0,
+  };
+};
+
+export const useElementSize = <T extends HTMLElement = HTMLElement>(
+  ref?: RefObject<T>,
+  delay: number = 100,
+): Size => {
+  const [size, setSize] = useState<Size>(getInitialSize(ref));
+
+  const updateSize = useCallback((newSize: Size) => {
+    setSize(newSize);
+  }, []);
+
+  useEffect(() => {
+    let timeoutId: number | null = null;
+
+    const triggerUpdateWithThrottling = (newSize: Size) => {
+      if (timeoutId !== null) return;
+      timeoutId = window.setTimeout(() => {
+        updateSize(newSize);
+        timeoutId = null;
+      }, delay);
+    };
+
+    if (ref?.current && typeof ResizeObserver !== 'undefined') {
+      const observer = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          const { width, height } = entry.contentRect;
+          triggerUpdateWithThrottling({ width, height });
+        }
+      });
+      observer.observe(ref.current);
+
+      return () => {
+        observer.disconnect();
+        if (timeoutId !== null) {
+          clearTimeout(timeoutId);
+        }
+      };
+    }
+  }, [ref, updateSize, delay]);
+
+  return size;
+};

package/src/icons/CheckboxFilledIcon/CheckboxFilledIcon.tsx

@@ -0,0 +1,23 @@
+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 16 17" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M13 2.51172H3C2.73478 2.51172 2.48043 2.61708 2.29289 2.80461C2.10536 2.99215 2 3.2465 2 3.51172V13.5117C2 13.7769 2.10536 14.0313 2.29289 14.2188C2.48043 14.4064 2.73478 14.5117 3 14.5117H13C13.2652 14.5117 13.5196 14.4064 13.7071 14.2188C13.8946 14.0313 14 13.7769 14 13.5117V3.51172C14 3.2465 13.8946 2.99215 13.7071 2.80461C13.5196 2.61708 13.2652 2.51172 13 2.51172ZM7 11.2617L4.5 8.78307L5.2954 8.01172L7 9.68452L10.7044 6.01172L11.5002 6.80032L7 11.2617Z" />
+  </svg>
+);
+
+export const CheckboxFilledIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/CheckboxFilledIcon/CheckboxFilledIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/DataRefineryIcon/DataRefineryIcon.tsx

@@ -0,0 +1,34 @@
+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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" {...props}>
+    <path
+      d="M3.0625 13.125C2.62985 13.125 2.20692 12.9967 1.84719 12.7563C1.48746 12.516 1.20708 12.1743 1.04151 11.7746C0.875948 11.3749 0.832628 10.9351 0.917033 10.5107C1.00144 10.0864 1.20978 9.69663 1.5157 9.3907C1.82163 9.08478 2.21141 8.87644 2.63574 8.79203C3.06007 8.70763 3.49991 8.75095 3.89962 8.91651C4.29933 9.08208 4.64097 9.36246 4.88134 9.72219C5.12171 10.0819 5.25 10.5049 5.25 10.9375C5.24932 11.5175 5.01863 12.0735 4.60854 12.4835C4.19845 12.8936 3.64245 13.1243 3.0625 13.125ZM3.0625 9.625C2.80291 9.625 2.54915 9.70198 2.33331 9.8462C2.11748 9.99042 1.94925 10.1954 1.84991 10.4352C1.75057 10.6751 1.72458 10.939 1.77522 11.1936C1.82586 11.4482 1.95087 11.682 2.13442 11.8656C2.31798 12.0491 2.55184 12.1741 2.80645 12.2248C3.06105 12.2754 3.32494 12.2494 3.56477 12.1501C3.8046 12.0508 4.00959 11.8825 4.1538 11.6667C4.29802 11.4508 4.375 11.1971 4.375 10.9375C4.37462 10.5895 4.23622 10.2559 3.99016 10.0098C3.7441 9.76379 3.41048 9.62538 3.0625 9.625Z"
+      fill="#3B3C45"
+    />
+    <path
+      d="M10.5 11.375H6.125V10.5H10.5V7.4375H3.5C3.26801 7.43726 3.04559 7.34499 2.88155 7.18095C2.71751 7.01691 2.62524 6.79449 2.625 6.5625V3.5C2.62524 3.26801 2.71751 3.04559 2.88155 2.88155C3.04559 2.71751 3.26801 2.62524 3.5 2.625H7.875V3.5H3.5V6.5625H10.5C10.732 6.56274 10.9544 6.65501 11.1185 6.81905C11.2825 6.98309 11.3748 7.20551 11.375 7.4375V10.5C11.3748 10.732 11.2825 10.9544 11.1185 11.1184C10.9544 11.2825 10.732 11.3748 10.5 11.375Z"
+      fill="#3B3C45"
+    />
+    <path
+      d="M12.25 5.25H9.625C9.39302 5.24973 9.17061 5.15746 9.00658 4.99342C8.84254 4.82939 8.75027 4.60698 8.75 4.375V1.75C8.75027 1.51802 8.84254 1.29561 9.00658 1.13158C9.17061 0.967539 9.39302 0.875266 9.625 0.875H12.25C12.482 0.875266 12.7044 0.967539 12.8684 1.13158C13.0325 1.29561 13.1247 1.51802 13.125 1.75V4.375C13.1247 4.60698 13.0325 4.82939 12.8684 4.99342C12.7044 5.15746 12.482 5.24973 12.25 5.25ZM9.625 1.75V4.375H12.25V1.75H9.625Z"
+      fill="#3B3C45"
+    />
+  </svg>
+);
+
+export const DataRefineryIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/DataRefineryIcon/DataRefineryIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/DraggableIcon/DraggableIcon.tsx

@@ -0,0 +1,28 @@
+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 16 16" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M7 3H5V5H7V3Z" />
+    <path d="M11 3H9V5H11V3Z" />
+    <path d="M7 7H5V9H7V7Z" />
+    <path d="M11 7H9V9H11V7Z" />
+    <path d="M7 11H5V13H7V11Z" />
+    <path d="M11 11H9V13H11V11Z" />
+  </svg>
+);
+
+export const DraggableIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/DraggableIcon/DraggableIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/FlowIcon/FlowIcon.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 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M12.5 10.0699V7.4999C12.5 7.23468 12.3946 6.98033 12.2071 6.79279C12.0196 6.60526 11.7652 6.4999 11.5 6.4999H7.5V3.9299C7.97133 3.8082 8.3821 3.51879 8.65531 3.1159C8.92851 2.71301 9.0454 2.22431 8.98406 1.7414C8.92273 1.25849 8.68737 0.814533 8.32212 0.492739C7.95687 0.170944 7.48679 -0.0065918 7 -0.0065918C6.51322 -0.0065918 6.04314 0.170944 5.67789 0.492739C5.31264 0.814533 5.07728 1.25849 5.01595 1.7414C4.95461 2.22431 5.0715 2.71301 5.3447 3.1159C5.61791 3.51879 6.02868 3.8082 6.5 3.9299V6.4999H2.5C2.23479 6.4999 1.98043 6.60526 1.7929 6.79279C1.60536 6.98033 1.5 7.23468 1.5 7.4999V10.0699C1.02868 10.1916 0.61791 10.481 0.344704 10.8839C0.0714978 11.2868 -0.0453918 11.7755 0.0159455 12.2584C0.0772827 12.7413 0.312636 13.1853 0.677889 13.5071C1.04314 13.8289 1.51322 14.0064 2 14.0064C2.48679 14.0064 2.95687 13.8289 3.32212 13.5071C3.68737 13.1853 3.92273 12.7413 3.98406 12.2584C4.0454 11.7755 3.92851 11.2868 3.65531 10.8839C3.3821 10.481 2.97133 10.1916 2.5 10.0699V7.4999H11.5V10.0699C11.0287 10.1916 10.6179 10.481 10.3447 10.8839C10.0715 11.2868 9.95461 11.7755 10.0159 12.2584C10.0773 12.7413 10.3126 13.1853 10.6779 13.5071C11.0431 13.8289 11.5132 14.0064 12 14.0064C12.4868 14.0064 12.9569 13.8289 13.3221 13.5071C13.6874 13.1853 13.9227 12.7413 13.9841 12.2584C14.0454 11.7755 13.9285 11.2868 13.6553 10.8839C13.3821 10.481 12.9713 10.1916 12.5 10.0699ZM3 11.9999C3 12.1977 2.94136 12.391 2.83147 12.5555C2.72159 12.7199 2.56541 12.8481 2.38269 12.9238C2.19996 12.9995 1.9989 13.0193 1.80491 12.9807C1.61093 12.9421 1.43275 12.8469 1.2929 12.707C1.15305 12.5672 1.0578 12.389 1.01922 12.195C0.980634 12.001 1.00044 11.7999 1.07613 11.6172C1.15181 11.4345 1.27999 11.2783 1.44443 11.1684C1.60888 11.0585 1.80222 10.9999 2 10.9999C2.26522 10.9999 2.51958 11.1053 2.70711 11.2928C2.89465 11.4803 3 11.7347 3 11.9999ZM6 1.9999C6 1.80212 6.05865 1.60878 6.16854 1.44433C6.27842 1.27988 6.4346 1.15171 6.61732 1.07602C6.80005 1.00033 7.00111 0.980529 7.1951 1.01911C7.38908 1.0577 7.56726 1.15294 7.70711 1.29279C7.84696 1.43265 7.9422 1.61083 7.98079 1.80481C8.01938 1.99879 7.99957 2.19986 7.92388 2.38258C7.8482 2.56531 7.72002 2.72149 7.55558 2.83137C7.39113 2.94125 7.19779 2.9999 7 2.9999C6.73479 2.9999 6.48043 2.89454 6.2929 2.70701C6.10536 2.51947 6 2.26512 6 1.9999ZM12 12.9999C11.8022 12.9999 11.6089 12.9413 11.4444 12.8314C11.28 12.7215 11.1518 12.5653 11.0761 12.3826C11.0004 12.1999 10.9806 11.9988 11.0192 11.8048C11.0578 11.6108 11.153 11.4326 11.2929 11.2928C11.4328 11.1529 11.6109 11.0577 11.8049 11.0191C11.9989 10.9805 12.2 11.0003 12.3827 11.076C12.5654 11.1517 12.7216 11.2799 12.8315 11.4443C12.9414 11.6088 13 11.8021 13 11.9999C13 12.2651 12.8946 12.5195 12.7071 12.707C12.5196 12.8945 12.2652 12.9999 12 12.9999Z"
+      fill="#1A1C21"
+    />
+  </svg>
+);
+
+export const FlowIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/FlowIcon/FlowIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/PlaylistIcon/PlaylistIcon.tsx

@@ -0,0 +1,25 @@
+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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" fill="none" {...props}>
+    <path d="M9.625 2.625H1.75V3.5H9.625V2.625Z" fill="#1A1C21" />
+    <path d="M9.625 5.25H1.75V6.125H9.625V5.25Z" fill="#1A1C21" />
+    <path d="M7 7.875H1.75V8.75H7V7.875Z" fill="#1A1C21" />
+    <path d="M9.1875 7.875L12.25 10.0625L9.1875 12.25V7.875Z" fill="#1A1C21" />
+  </svg>
+);
+
+export const PlaylistIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/PlaylistIcon/PlaylistIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/SettingsCogIcon/SettingsCogIcon.tsx

@@ -0,0 +1,32 @@
+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) => {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M13.5 8.38008C13.5 8.25508 13.5 8.13008 13.5 8.00008C13.5 7.87008 13.5 7.74508 13.5 7.61508L14.46 6.77508C14.637 6.61911 14.7531 6.40559 14.7879 6.17228C14.8226 5.93897 14.7738 5.70088 14.65 5.50008L13.47 3.50008C13.3823 3.34821 13.2562 3.22207 13.1044 3.13431C12.9526 3.04655 12.7804 3.00026 12.605 3.00008C12.4963 2.99925 12.3882 3.01614 12.285 3.05008L11.07 3.46008C10.8602 3.32068 10.6414 3.19541 10.415 3.08508L10.16 1.82508C10.1143 1.59488 9.98905 1.3881 9.80623 1.24093C9.62341 1.09376 9.39466 1.01558 9.16 1.02008H6.82C6.58535 1.01558 6.3566 1.09376 6.17378 1.24093C5.99096 1.3881 5.86573 1.59488 5.82 1.82508L5.565 3.08508C5.33697 3.19538 5.11649 3.32066 4.905 3.46008L3.715 3.03008C3.61065 3.00289 3.50259 2.99276 3.395 3.00008C3.21964 3.00026 3.04741 3.04655 2.89559 3.13431C2.74376 3.22207 2.61769 3.34821 2.53 3.50008L1.35 5.50008C1.2333 5.70058 1.18993 5.93541 1.22733 6.16436C1.26473 6.39332 1.38057 6.60214 1.555 6.75508L2.5 7.62008C2.5 7.74508 2.5 7.87008 2.5 8.00008C2.5 8.13008 2.5 8.25508 2.5 8.38508L1.555 9.22508C1.37564 9.37908 1.25663 9.59165 1.2191 9.82505C1.18158 10.0585 1.22795 10.2976 1.35 10.5001L2.53 12.5001C2.61769 12.6519 2.74376 12.7781 2.89559 12.8659C3.04741 12.9536 3.21964 12.9999 3.395 13.0001C3.50368 13.0009 3.61176 12.984 3.715 12.9501L4.93 12.5401C5.13977 12.6795 5.35859 12.8048 5.585 12.9151L5.84 14.1751C5.88573 14.4053 6.01096 14.6121 6.19378 14.7592C6.3766 14.9064 6.60535 14.9846 6.84 14.9801H9.2C9.43466 14.9846 9.66341 14.9064 9.84623 14.7592C10.029 14.6121 10.1543 14.4053 10.2 14.1751L10.455 12.9151C10.683 12.8048 10.9035 12.6795 11.115 12.5401L12.325 12.9501C12.4282 12.984 12.5363 13.0009 12.645 13.0001C12.8204 12.9999 12.9926 12.9536 13.1444 12.8659C13.2962 12.7781 13.4223 12.6519 13.51 12.5001L14.65 10.5001C14.7667 10.2996 14.8101 10.0648 14.7727 9.8358C14.7353 9.60685 14.6194 9.39802 14.445 9.24508L13.5 8.38008ZM12.605 12.0001L10.89 11.4201C10.4885 11.7601 10.0297 12.026 9.535 12.2051L9.18 14.0001H6.82L6.465 12.2251C5.97422 12.0409 5.51786 11.7755 5.115 11.4401L3.395 12.0001L2.215 10.0001L3.575 8.80008C3.48255 8.28251 3.48255 7.75265 3.575 7.23508L2.215 6.00008L3.395 4.00008L5.11 4.58008C5.51147 4.24003 5.97031 3.97421 6.465 3.79508L6.82 2.00008H9.18L9.535 3.77508C10.0258 3.95929 10.4821 4.22465 10.885 4.56008L12.605 4.00008L13.785 6.00008L12.425 7.20008C12.5175 7.71765 12.5175 8.24751 12.425 8.76508L13.785 10.0001L12.605 12.0001Z"
+        fill="#1A1C21"
+      />
+      <path
+        d="M8 11.0001C7.40666 11.0001 6.82664 10.8241 6.33329 10.4945C5.83995 10.1648 5.45543 9.69631 5.22837 9.14813C5.0013 8.59995 4.94189 7.99675 5.05765 7.41481C5.1734 6.83287 5.45913 6.29832 5.87868 5.87876C6.29824 5.4592 6.83279 5.17348 7.41473 5.05773C7.99668 4.94197 8.59988 5.00138 9.14805 5.22844C9.69623 5.45551 10.1648 5.84002 10.4944 6.33337C10.8241 6.82672 11 7.40674 11 8.00008C11.004 8.39516 10.9292 8.78707 10.7798 9.15286C10.6305 9.51865 10.4096 9.85096 10.1303 10.1303C9.85089 10.4097 9.51857 10.6305 9.15278 10.7799C8.787 10.9292 8.39508 11.0041 8 11.0001ZM8 6.00008C7.73568 5.99392 7.47285 6.04145 7.22741 6.13978C6.98198 6.23811 6.75904 6.3852 6.57208 6.57216C6.38512 6.75912 6.23803 6.98205 6.1397 7.22749C6.04137 7.47292 5.99385 7.73575 6 8.00008C5.99385 8.26441 6.04137 8.52724 6.1397 8.77267C6.23803 9.01811 6.38512 9.24105 6.57208 9.42801C6.75904 9.61496 6.98198 9.76206 7.22741 9.86039C7.47285 9.95872 7.73568 10.0062 8 10.0001C8.26433 10.0062 8.52716 9.95872 8.7726 9.86039C9.01803 9.76206 9.24097 9.61496 9.42793 9.42801C9.61489 9.24105 9.76198 9.01811 9.86031 8.77267C9.95864 8.52724 10.0062 8.26441 10 8.00008C10.0062 7.73575 9.95864 7.47292 9.86031 7.22749C9.76198 6.98205 9.61489 6.75912 9.42793 6.57216C9.24097 6.3852 9.01803 6.23811 8.7726 6.13978C8.52716 6.04145 8.26433 5.99392 8 6.00008Z"
+        fill="#1A1C21"
+      />
+    </svg>
+  );
+};
+
+export const SettingsCogIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/SettingsCogIcon/SettingsCogIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/TaskViewIcon/TaskViewIcon.tsx

@@ -0,0 +1,34 @@
+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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" {...props}>
+    <path
+      d="M9.625 11.375C10.1082 11.375 10.5 10.9832 10.5 10.5C10.5 10.0168 10.1082 9.625 9.625 9.625C9.14175 9.625 8.75 10.0168 8.75 10.5C8.75 10.9832 9.14175 11.375 9.625 11.375Z"
+      fill="#3B3C45"
+    />
+    <path
+      d="M13.0274 10.2718C12.757 9.58322 12.2906 8.98906 11.6858 8.563C11.081 8.13695 10.3644 7.89773 9.625 7.875C8.88555 7.89773 8.16903 8.13695 7.56424 8.563C6.95944 8.98906 6.49296 9.58322 6.22261 10.2718L6.125 10.5L6.22261 10.7282C6.49296 11.4168 6.95944 12.0109 7.56424 12.437C8.16903 12.863 8.88555 13.1023 9.625 13.125C10.3644 13.1023 11.081 12.863 11.6858 12.437C12.2906 12.0109 12.757 11.4168 13.0274 10.7282L13.125 10.5L13.0274 10.2718ZM9.625 12.25C9.27888 12.25 8.94054 12.1474 8.65275 11.9551C8.36497 11.7628 8.14066 11.4895 8.00821 11.1697C7.87576 10.8499 7.8411 10.4981 7.90863 10.1586C7.97615 9.81913 8.14282 9.50731 8.38756 9.26256C8.63231 9.01782 8.94413 8.85115 9.28359 8.78363C9.62306 8.7161 9.97493 8.75076 10.2947 8.88321C10.6145 9.01566 10.8878 9.23997 11.0801 9.52775C11.2724 9.81554 11.375 10.1539 11.375 10.5C11.3745 10.964 11.1899 11.4088 10.8619 11.7369C10.5338 12.0649 10.089 12.2495 9.625 12.25Z"
+      fill="#3B3C45"
+    />
+    <path
+      d="M5.25 12.25H3.0625V3.0625H4.375V4.375H9.625V3.0625H10.9375V7H11.8125V3.0625C11.8125 2.83044 11.7203 2.60788 11.5562 2.44378C11.3921 2.27969 11.1696 2.1875 10.9375 2.1875H9.625V1.75C9.625 1.51794 9.53281 1.29538 9.36872 1.13128C9.20462 0.967187 8.98206 0.875 8.75 0.875H5.25C5.01794 0.875 4.79538 0.967187 4.63128 1.13128C4.46719 1.29538 4.375 1.51794 4.375 1.75V2.1875H3.0625C2.83044 2.1875 2.60788 2.27969 2.44378 2.44378C2.27969 2.60788 2.1875 2.83044 2.1875 3.0625V12.25C2.1875 12.4821 2.27969 12.7046 2.44378 12.8687C2.60788 13.0328 2.83044 13.125 3.0625 13.125H5.25V12.25ZM5.25 1.75H8.75V3.5H5.25V1.75Z"
+      fill="#3B3C45"
+    />
+  </svg>
+);
+
+export const TaskViewIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/TaskViewIcon/TaskViewIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/WarningAltFilled/WarningAltFilled.tsx

@@ -0,0 +1,24 @@
+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 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M8.001 3.08571H7.999L2.32435 13.9983L2.3253 14H13.6747L13.6757 13.9983L8.001 3.08571ZM7.4375 6.00001H8.5625V10.5H7.4375V6.00001ZM8 13C7.85167 13 7.70666 12.956 7.58333 12.8736C7.45999 12.7912 7.36386 12.6741 7.30709 12.537C7.25033 12.4 7.23548 12.2492 7.26441 12.1037C7.29335 11.9582 7.36478 11.8246 7.46967 11.7197C7.57456 11.6148 7.7082 11.5434 7.85369 11.5144C7.99917 11.4855 8.14997 11.5003 8.28702 11.5571C8.42406 11.6139 8.54119 11.71 8.62361 11.8333C8.70602 11.9567 8.75 12.1017 8.75 12.25C8.75 12.4489 8.67099 12.6397 8.53033 12.7803C8.38968 12.921 8.19892 13 8 13Z" />
+    <path d="M14.5 15H1.5C1.4141 15 1.32965 14.9779 1.25478 14.9357C1.17992 14.8936 1.11718 14.8329 1.0726 14.7595C1.02802 14.686 1.00311 14.6024 1.00027 14.5165C0.997436 14.4307 1.01677 14.3455 1.0564 14.2693L7.5564 1.76931C7.59862 1.68812 7.66231 1.62008 7.74053 1.5726C7.81875 1.52511 7.9085 1.5 8 1.5C8.09151 1.5 8.18126 1.52511 8.25948 1.5726C8.3377 1.62008 8.40138 1.68812 8.4436 1.76931L14.9436 14.2693C14.9832 14.3455 15.0026 14.4307 14.9997 14.5165C14.9969 14.6024 14.972 14.686 14.9274 14.7595C14.8828 14.8329 14.8201 14.8936 14.7452 14.9357C14.6704 14.9779 14.5859 15 14.5 15ZM2.3253 14H13.6747L13.6757 13.9983L8.001 3.08571H7.999L2.32435 13.9983L2.3253 14Z" />
+  </svg>
+);
+
+export const WarningAltFilled = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/WarningAltFilled/WarningAltFilled',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/WarningAltFilledIcon/WarningAltFilledIcon.tsx

@@ -0,0 +1,24 @@
+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 16 16" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M8.001 2.83571H7.999L2.32435 13.7483L2.3253 13.75H13.6747L13.6757 13.7483L8.001 2.83571ZM7.4375 5.75001H8.5625V10.25H7.4375V5.75001ZM8 12.75C7.85167 12.75 7.70666 12.706 7.58333 12.6236C7.45999 12.5412 7.36386 12.4241 7.30709 12.287C7.25033 12.15 7.23548 11.9992 7.26441 11.8537C7.29335 11.7082 7.36478 11.5746 7.46967 11.4697C7.57456 11.3648 7.7082 11.2934 7.85369 11.2644C7.99917 11.2355 8.14997 11.2503 8.28702 11.3071C8.42406 11.3639 8.54119 11.46 8.62361 11.5833C8.70602 11.7067 8.75 11.8517 8.75 12C8.75 12.1989 8.67099 12.3897 8.53033 12.5303C8.38968 12.671 8.19892 12.75 8 12.75Z" />
+    <path d="M14.5 14.75H1.5C1.4141 14.75 1.32965 14.7279 1.25478 14.6857C1.17992 14.6436 1.11718 14.5829 1.0726 14.5095C1.02802 14.436 1.00311 14.3524 1.00027 14.2665C0.997436 14.1807 1.01677 14.0955 1.0564 14.0193L7.5564 1.51931C7.59862 1.43812 7.66231 1.37008 7.74053 1.3226C7.81875 1.27511 7.9085 1.25 8 1.25C8.09151 1.25 8.18126 1.27511 8.25948 1.3226C8.3377 1.37008 8.40138 1.43812 8.4436 1.51931L14.9436 14.0193C14.9832 14.0955 15.0026 14.1807 14.9997 14.2665C14.9969 14.3524 14.972 14.436 14.9274 14.5095C14.8828 14.5829 14.8201 14.6436 14.7452 14.6857C14.6704 14.7279 14.5859 14.75 14.5 14.75ZM2.3253 13.75H13.6747L13.6757 13.7483L8.001 2.83571H7.999L2.32435 13.7483L2.3253 13.75Z" />
+  </svg>
+);
+
+export const WarningAltFilledIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/WarningAltFilledIcon/WarningAltFilledIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/WorkflowAutomationIcon/WorkflowAutomationIcon.tsx

@@ -0,0 +1,34 @@
+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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" {...props}>
+    <path
+      d="M7 11.8125C5.425 11.8125 3.89375 11.025 2.975 9.625H5.25V8.75H1.75V12.25H2.625V10.6312C3.71875 11.9437 5.29375 12.6875 7 12.6875V11.8125Z"
+      fill="#1A1C21"
+    />
+    <path
+      d="M13.5625 10.0625V9.1875H12.6438C12.6 8.925 12.4688 8.6625 12.3375 8.4L12.9938 7.74375L12.3812 7.13125L11.725 7.7875C11.5062 7.65625 11.2437 7.525 10.9375 7.48125V6.5625H10.0625V7.48125C9.8 7.525 9.5375 7.65625 9.275 7.7875L8.61875 7.13125L8.00625 7.74375L8.6625 8.4C8.53125 8.61875 8.4 8.88125 8.35625 9.1875H7.4375V10.0625H8.35625C8.4 10.325 8.53125 10.5875 8.6625 10.85L8.00625 11.5062L8.61875 12.1188L9.275 11.4625C9.49375 11.5938 9.75625 11.725 10.0625 11.7688V12.6875H10.9375V11.7688C11.2 11.725 11.4625 11.5938 11.725 11.4625L12.3812 12.1188L12.9938 11.5062L12.3375 10.85C12.4688 10.6312 12.6 10.3687 12.6438 10.0625H13.5625ZM10.5 10.9375C9.75625 10.9375 9.1875 10.3687 9.1875 9.625C9.1875 8.88125 9.75625 8.3125 10.5 8.3125C11.2437 8.3125 11.8125 8.88125 11.8125 9.625C11.8125 10.3687 11.2437 10.9375 10.5 10.9375Z"
+      fill="#1A1C21"
+    />
+    <path
+      d="M8.75 4.375H11.025C9.58125 2.14375 6.60625 1.53125 4.375 2.975C3.01875 3.85 2.1875 5.38125 2.1875 7H1.3125C1.3125 3.85 3.85 1.3125 7 1.3125C8.70625 1.3125 10.2812 2.05625 11.375 3.36875V1.75H12.25V5.25H8.75V4.375Z"
+      fill="#1A1C21"
+    />
+  </svg>
+);
+
+export const WorkflowAutomationIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/WorkflowAutomationIcon/WorkflowAutomationIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/index.ts

@@ -122,6 +122,7 @@ export * from '@redocly/theme/components/Catalog/CatalogCard';
 export * from '@redocly/theme/components/Catalog/CatalogActions';
 export * from '@redocly/theme/components/Catalog/CatalogHighlight';
 export * from '@redocly/theme/components/Catalog/CatalogInfoBlock';
+export * from '@redocly/theme/components/Catalog/CatalogVirtualizedGroups';
 /* Product */
 export * from '@redocly/theme/components/Product/Product';
 export * from '@redocly/theme/components/Product/ProductPicker';
@@ -236,7 +237,17 @@ export * from '@redocly/theme/icons/CharacterIcon/CharacterIcon';
 export * from '@redocly/theme/icons/FileIcon/FileIcon';
 export * from '@redocly/theme/icons/ExportIcon/ExportIcon';
 export * from '@redocly/theme/icons/CertificateIcon/CertificateIcon';
+export * from '@redocly/theme/icons/PlaylistIcon/PlaylistIcon';
+export * from '@redocly/theme/icons/WorkflowAutomationIcon/WorkflowAutomationIcon';
+export * from '@redocly/theme/icons/TaskViewIcon/TaskViewIcon';
+export * from '@redocly/theme/icons/DataRefineryIcon/DataRefineryIcon';
+export * from '@redocly/theme/icons/FlowIcon/FlowIcon';
+export * from '@redocly/theme/icons/DraggableIcon/DraggableIcon';
+export * from '@redocly/theme/icons/WarningAltFilledIcon/WarningAltFilledIcon';
 export * from '@redocly/theme/icons/ErrorFilledIcon/ErrorFilledIcon';
+export * from '@redocly/theme/icons/SettingsCogIcon/SettingsCogIcon';
+export * from '@redocly/theme/icons/CheckboxFilledIcon/CheckboxFilledIcon';
+export * from '@redocly/theme/icons/WarningAltFilled/WarningAltFilled';
 /* Layouts */
 export * from '@redocly/theme/layouts/RootLayout';
 export * from '@redocly/theme/layouts/PageLayout';

package/src/markdoc/components/CodeWalkthrough/CodeWalkthrough.tsx

@@ -1,4 +1,4 @@
-import React, { useState, type PropsWithChildren } from 'react';
+import React, { type PropsWithChildren } from 'react';
 import styled from 'styled-components';
 
 import type { CodeWalkthroughAttr } from '@redocly/config';
@@ -17,11 +17,8 @@ import {
 export type CodeWalkthroughProps = PropsWithChildren<CodeWalkthroughAttr>;
 
 export function CodeWalkthrough({ children, steps, preview, ...attributes }: CodeWalkthroughProps) {
-  // Steps are being modified causing the observer to be recreated in the useCodeWalkthrough hook
-  // This is a workaround to prevent the observer from being recreated
-  const [initialSteps] = useState([...steps]);
   const { controlsState, stepsState, files, downloadAssociatedFiles } = useCodeWalkthrough(
-    initialSteps,
+    steps,
     attributes,
   );
   const { activeFilters, getControlState, changeControlState } = controlsState;