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

package/lib/components/Catalog/Catalog.js

@@ -10,13 +10,12 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const utils_1 = require("../../core/utils");
 const hooks_1 = require("../../core/hooks");
 const H2_1 = require("../../components/Typography/H2");
-const CatalogCard_1 = require("../../components/Catalog/CatalogCard");
 const FilterContent_1 = require("../../components/Filter/FilterContent");
 const FilterPopover_1 = require("../../components/Filter/FilterPopover");
 const CatalogHighlight_1 = require("../../components/Catalog/CatalogHighlight");
 const CatalogActions_1 = require("../../components/Catalog/CatalogActions");
 const Sidebar_1 = require("../../components/Sidebar/Sidebar");
-const CounterTag_1 = require("../../components/Tags/CounterTag");
+const CatalogVirtualizedGroups_1 = require("../../components/Catalog/CatalogVirtualizedGroups");
 function Catalog(props) {
     const { catalogConfig } = props.pageProps;
     const { useTranslate, useCatalog } = (0, hooks_1.useThemeHooks)();
@@ -39,25 +38,8 @@ function Catalog(props) {
                         ' ',
                         translate(catalogConfig.descriptionTranslationKey, catalogConfig.description),
                         ' ')) : null),
-                groups.map((group) => (react_1.default.createElement(react_1.default.Fragment, { key: group.title },
-                    react_1.default.createElement(CatalogSeparator, { "data-testid": "catalog-separator" },
-                        react_1.default.createElement(CatalogSeparatorLabel, null, group.title),
-                        react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, group.items.length)),
-                    react_1.default.createElement(CatalogCards, null, group.items.map((item) => (react_1.default.createElement(CatalogCard_1.CatalogCard, { item: item, key: item.link })))))))))));
+                react_1.default.createElement(CatalogVirtualizedGroups_1.CatalogVirtualizedGroups, { groups: groups })))));
 }
-const CatalogSeparator = styled_components_1.default.div `
-  display: flex;
-  align-items: center;
-  color: var(--catalog-separator-color);
-  font-size: var(--catalog-separator-font-size);
-  font-weight: var(--catalog-separator-font-weight);
-  border-top: 1px solid var(--catalog-separator-border-color);
-  margin: var(--catalog-separator-margin);
-  padding: var(--catalog-separator-padding);
-`;
-const CatalogSeparatorLabel = styled_components_1.default.div `
-  margin: var(--catalog-separator-label-margin);
-`;
 exports.CatalogPageContent = styled_components_1.default.main `
   flex: 1;
   width: 90%;
@@ -68,12 +50,6 @@ exports.CatalogPageContent = styled_components_1.default.main `
     padding: var(--catalog-page-padding);
   }
 `;
-const CatalogCards = styled_components_1.default.div `
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(var(--api-catalog-card-min-width), 1fr));
-  gap: 32px;
-  margin: var(--catalog-cards-group-margin);
-`;
 exports.CatalogTitle = (0, styled_components_1.default)(H2_1.H2) `
   color: var(--catalog-title-text-color);
   font-weight: var(--catalog-title-font-weight);

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { CatalogItem } from '../../core/types';
+type Group = {
+    title: string;
+    items: CatalogItem[];
+};
+type CatalogVirtualizedGroupsProps = {
+    groups: Group[];
+};
+export declare function CatalogVirtualizedGroups({ groups }: CatalogVirtualizedGroupsProps): React.JSX.Element;
+export {};

package/lib/components/Catalog/CatalogVirtualizedGroups.js

@@ -0,0 +1,125 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogVirtualizedGroups = CatalogVirtualizedGroups;
+const react_1 = __importStar(require("react"));
+const react_virtual_1 = require("@tanstack/react-virtual");
+const styled_components_1 = __importDefault(require("styled-components"));
+const use_element_size_1 = require("../../core/hooks/use-element-size");
+const CatalogCard_1 = require("../../components/Catalog/CatalogCard");
+const CounterTag_1 = require("../../components/Tags/CounterTag");
+const GAP_SIZE = 32;
+const CARD_MIN_WIDTH_VAR = '--api-catalog-card-min-width';
+function CatalogVirtualizedGroups({ groups }) {
+    var _a, _b;
+    const parentRef = (0, react_1.useRef)(null);
+    const [isClient, setIsClient] = (0, react_1.useState)(typeof window !== 'undefined');
+    const { width } = (0, use_element_size_1.useElementSize)(parentRef);
+    (0, react_1.useEffect)(() => {
+        setIsClient(true);
+    }, []);
+    const columnCount = (0, react_1.useMemo)(() => {
+        if (!isClient)
+            return 1;
+        const cardMinWidth = parseInt(getComputedStyle(document.documentElement).getPropertyValue(CARD_MIN_WIDTH_VAR), 10);
+        return Math.max(1, Math.floor((width + GAP_SIZE) / (cardMinWidth + GAP_SIZE)));
+    }, [width, isClient]);
+    const flatRows = (0, react_1.useMemo)(() => {
+        const rows = [];
+        groups.forEach((group) => {
+            rows.push({
+                type: 'header',
+                groupTitle: group.title,
+                groupCount: group.items.length,
+                key: `header-${group.title}`,
+            });
+            const numRows = Math.ceil(group.items.length / columnCount);
+            for (let rowIndex = 0; rowIndex < numRows; rowIndex++) {
+                const startIndex = rowIndex * columnCount;
+                const rowItems = group.items.slice(startIndex, startIndex + columnCount);
+                rows.push({
+                    type: 'cardRow',
+                    groupTitle: group.title,
+                    items: rowItems,
+                    key: `${group.title}-row-${rowIndex}`,
+                });
+            }
+        });
+        return rows;
+    }, [groups, columnCount]);
+    const estimateSize = (0, react_1.useCallback)((index) => {
+        const row = flatRows[index];
+        return row.type === 'header' ? 50 : 250;
+    }, [flatRows]);
+    const virtualizer = (0, react_virtual_1.useWindowVirtualizer)({
+        count: flatRows.length,
+        estimateSize,
+        overscan: 5,
+        initialOffset: (_b = (_a = parentRef.current) === null || _a === void 0 ? void 0 : _a.offsetTop) !== null && _b !== void 0 ? _b : 0,
+    });
+    return (react_1.default.createElement("div", { ref: parentRef },
+        react_1.default.createElement("div", { style: {
+                position: 'relative',
+                height: isClient ? `${virtualizer.getTotalSize()}px` : 'auto',
+            } }, isClient &&
+            virtualizer.getVirtualItems().map((virtualRow) => {
+                const rowData = flatRows[virtualRow.index];
+                if (rowData.type === 'header') {
+                    return (react_1.default.createElement(HeaderRow, { key: rowData.key, ref: virtualizer.measureElement, "data-index": virtualRow.index, style: { transform: `translateY(${virtualRow.start}px)` } },
+                        react_1.default.createElement(CatalogSeparatorLabel, null, rowData.groupTitle),
+                        react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, rowData.groupCount)));
+                }
+                return (react_1.default.createElement(VirtualRow, { key: rowData.key, ref: virtualizer.measureElement, "data-index": virtualRow.index, style: { transform: `translateY(${virtualRow.start}px)` } }, rowData.items.map((item) => (react_1.default.createElement(CatalogCard_1.CatalogCard, { key: item.link, item: item })))));
+            }))));
+}
+const VirtualRow = styled_components_1.default.div `
+  position: absolute;
+  left: 0;
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(${CARD_MIN_WIDTH_VAR}), 1fr));
+  gap: ${GAP_SIZE}px;
+  padding-bottom: 32px;
+`;
+const HeaderRow = styled_components_1.default.div `
+  position: absolute;
+  left: 0;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding: var(--catalog-separator-padding);
+  border-top: 1px solid var(--catalog-separator-border-color);
+  padding-bottom: calc(4px * 4);
+  color: var(--catalog-separator-color);
+  font-size: var(--catalog-separator-font-size);
+  font-weight: var(--catalog-separator-font-weight);
+`;
+const CatalogSeparatorLabel = styled_components_1.default.div `
+  margin: var(--catalog-separator-label-margin);
+`;
+//# sourceMappingURL=CatalogVirtualizedGroups.js.map

package/lib/core/hooks/code-walkthrough/use-code-walkthrough-controls.js

@@ -13,21 +13,49 @@ function useCodeWalkthroughControls(filters, inputs, toggles, enableDeepLink) {
     const location = (0, react_router_dom_1.useLocation)();
     const navigate = (0, react_router_dom_1.useNavigate)();
     const searchParams = (0, react_1.useMemo)(() => new URLSearchParams(location.search), [location.search]);
-    const [controlsState, setControlsState] = (0, react_1.useState)(() => {
+    const filtersRef = (0, react_1.useRef)(filters);
+    const inputsRef = (0, react_1.useRef)(inputs);
+    const togglesRef = (0, react_1.useRef)(toggles);
+    const getInitialState = () => {
         var _a, _b, _c, _d;
-        const initialState = {};
+        const state = {};
         for (const [id, toggle] of Object.entries(toggles)) {
-            initialState[id] = Object.assign(Object.assign({}, toggle), { render: true, type: 'toggle', value: enableDeepLink ? searchParams.get(id) === 'true' : false });
+            state[id] = Object.assign(Object.assign({}, toggle), { render: true, type: 'toggle', value: enableDeepLink ? searchParams.get(id) === 'true' : false });
         }
         for (const [id, input] of Object.entries(inputs)) {
-            initialState[id] = Object.assign(Object.assign({}, input), { render: true, type: 'input', value: enableDeepLink ? ((_a = searchParams.get(id)) !== null && _a !== void 0 ? _a : input.value) : input.value });
+            state[id] = Object.assign(Object.assign({}, input), { render: true, type: 'input', value: enableDeepLink ? ((_a = searchParams.get(id)) !== null && _a !== void 0 ? _a : input.value) : input.value });
         }
         for (const [id, filter] of Object.entries(filters)) {
             const defaultValue = ((_c = (_b = filter === null || filter === void 0 ? void 0 : filter.items) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.value) || '';
-            initialState[id] = Object.assign(Object.assign({}, filter), { render: true, type: 'filter', value: enableDeepLink ? ((_d = searchParams.get(id)) !== null && _d !== void 0 ? _d : defaultValue) : defaultValue });
+            state[id] = Object.assign(Object.assign({}, filter), { render: true, type: 'filter', value: enableDeepLink ? ((_d = searchParams.get(id)) !== null && _d !== void 0 ? _d : defaultValue) : defaultValue });
         }
-        return initialState;
-    });
+        return state;
+    };
+    const [controlsState, setControlsState] = (0, react_1.useState)(getInitialState);
+    (0, react_1.useEffect)(() => {
+        const sameProps = [
+            JSON.stringify(filters) === JSON.stringify(filtersRef.current),
+            JSON.stringify(inputs) === JSON.stringify(inputsRef.current),
+            JSON.stringify(toggles) === JSON.stringify(togglesRef.current),
+        ];
+        if (sameProps.every(Boolean)) {
+            return;
+        }
+        filtersRef.current = filters;
+        inputsRef.current = inputs;
+        togglesRef.current = toggles;
+        const newState = getInitialState();
+        // Preserve existing values where control type hasn't changed
+        Object.entries(newState).forEach(([id, control]) => {
+            const existingControl = controlsState[id];
+            if (existingControl && existingControl.type === control.type) {
+                // @ts-ignore
+                newState[id] = Object.assign(Object.assign({}, control), { value: existingControl.value });
+            }
+        });
+        setControlsState(newState);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [filters, inputs, toggles, enableDeepLink]);
     const changeControlState = (id, value) => {
         setControlsState((prev) => {
             const control = prev[id];
@@ -124,7 +152,8 @@ function useCodeWalkthroughControls(filters, inputs, toggles, enableDeepLink) {
             getFileText,
             populateInputsWithValue,
         };
-    }, [filters, controlsState]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [controlsState]);
     /**
      * Update the URL search params with the current state of the filters and inputs
      */
@@ -147,7 +176,7 @@ function useCodeWalkthroughControls(filters, inputs, toggles, enableDeepLink) {
         navigate({ search: newSearch });
         // Ignore searchParams in dependency array to avoid infinite re-renders
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [filters, controlsState, navigate, location]);
+    }, [controlsState, navigate, location]);
     return Object.assign({ changeControlState,
         getControlState }, walkthroughContext);
 }

package/lib/core/hooks/code-walkthrough/use-code-walkthrough-steps.js

@@ -15,35 +15,37 @@ function useCodeWalkthroughSteps(steps, enableDeepLink) {
     // Track observed elements in case new observer needs to be created
     const observedElementsRef = (0, react_1.useRef)(new Set());
     const [activeStep, setActiveStep] = (0, react_1.useState)(enableDeepLink ? searchParams.get(constants_1.ACTIVE_STEP_QUERY_PARAM) : null);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const _steps = (0, react_1.useMemo)(() => steps, [JSON.stringify(steps)]);
     const register = (0, react_1.useCallback)((element) => {
         // 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);
                 observedElementsRef.current.add(element);
             }
         }, 10);
-    }, [steps]);
+    }, [_steps]);
     const unregister = (0, react_1.useCallback)((element) => {
         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 = (0, react_1.useCallback)((entries) => {
         var _a, _b, _c;
         if (lockObserver.current) {
             return;
         }
-        const renderedSteps = steps.filter((step) => Boolean(step.compRef));
+        const renderedSteps = _steps.filter((step) => Boolean(step.compRef));
         if (renderedSteps.length < 2) {
             setActiveStep(((_a = renderedSteps[0]) === null || _a === void 0 ? void 0 : _a.id) || null);
             return;
@@ -54,7 +56,7 @@ function useCodeWalkthroughSteps(steps, enableDeepLink) {
                 continue;
             }
             const { intersectionRatio, boundingClientRect, rootBounds, isIntersecting } = entry;
-            const step = steps[stepKey];
+            const step = _steps[stepKey];
             const stepIndex = renderedSteps.findIndex((renderedStep) => renderedStep.stepKey === step.stepKey);
             const { next } = (0, utils_1.getAdjacentValues)(renderedSteps, stepIndex);
             const intersectionAtTop = (rootBounds === null || rootBounds === void 0 ? void 0 : rootBounds.bottom) !== undefined && boundingClientRect.top < rootBounds.top;
@@ -80,7 +82,7 @@ function useCodeWalkthroughSteps(steps, enableDeepLink) {
                 break;
             }
         }
-    }, [steps, activeStep]);
+    }, [_steps, activeStep]);
     (0, react_1.useEffect)(() => {
         var _a, _b, _c;
         const filtersElementHeight = ((_a = filtersElementRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight) || 0;

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

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

package/lib/core/hooks/index.js

@@ -49,4 +49,5 @@ __exportStar(require("../../core/hooks/code-walkthrough/use-code-walkthrough-ste
 __exportStar(require("../../core/hooks/code-walkthrough/use-code-walkthrough-controls"), exports);
 __exportStar(require("../../core/hooks/code-walkthrough/use-code-panel"), exports);
 __exportStar(require("../../core/hooks/code-walkthrough/use-renderable-files"), exports);
+__exportStar(require("../../core/hooks/use-element-size"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/hooks/use-element-size.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+type Size = {
+    width: number;
+    height: number;
+};
+export declare const useElementSize: <T extends HTMLElement = HTMLElement>(ref?: RefObject<T>, delay?: number) => Size;
+export {};

package/lib/core/hooks/use-element-size.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useElementSize = void 0;
+const react_1 = require("react");
+const getInitialSize = (ref) => {
+    if (ref === null || ref === void 0 ? void 0 : 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,
+    };
+};
+const useElementSize = (ref, delay = 100) => {
+    const [size, setSize] = (0, react_1.useState)(getInitialSize(ref));
+    const updateSize = (0, react_1.useCallback)((newSize) => {
+        setSize(newSize);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        let timeoutId = null;
+        const triggerUpdateWithThrottling = (newSize) => {
+            if (timeoutId !== null)
+                return;
+            timeoutId = window.setTimeout(() => {
+                updateSize(newSize);
+                timeoutId = null;
+            }, delay);
+        };
+        if ((ref === null || ref === void 0 ? void 0 : 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;
+};
+exports.useElementSize = useElementSize;
+//# sourceMappingURL=use-element-size.js.map

package/lib/icons/CheckboxFilledIcon/CheckboxFilledIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const CheckboxFilledIcon: 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/CheckboxFilledIcon/CheckboxFilledIcon.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.CheckboxFilledIcon = 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 17", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("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" })));
+exports.CheckboxFilledIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/CheckboxFilledIcon/CheckboxFilledIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=CheckboxFilledIcon.js.map

package/lib/icons/DataRefineryIcon/DataRefineryIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const DataRefineryIcon: 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/DataRefineryIcon/DataRefineryIcon.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.DataRefineryIcon = 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({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "none" }, props),
+    react_1.default.createElement("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" }),
+    react_1.default.createElement("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" }),
+    react_1.default.createElement("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" })));
+exports.DataRefineryIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/DataRefineryIcon/DataRefineryIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=DataRefineryIcon.js.map

package/lib/icons/DraggableIcon/DraggableIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const DraggableIcon: 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/DraggableIcon/DraggableIcon.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.DraggableIcon = 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", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("path", { d: "M7 3H5V5H7V3Z" }),
+    react_1.default.createElement("path", { d: "M11 3H9V5H11V3Z" }),
+    react_1.default.createElement("path", { d: "M7 7H5V9H7V7Z" }),
+    react_1.default.createElement("path", { d: "M11 7H9V9H11V7Z" }),
+    react_1.default.createElement("path", { d: "M7 11H5V13H7V11Z" }),
+    react_1.default.createElement("path", { d: "M11 11H9V13H11V11Z" })));
+exports.DraggableIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/DraggableIcon/DraggableIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=DraggableIcon.js.map

package/lib/icons/FlowIcon/FlowIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const FlowIcon: 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/FlowIcon/FlowIcon.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.FlowIcon = 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: "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" })));
+exports.FlowIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/FlowIcon/FlowIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=FlowIcon.js.map

package/lib/icons/PlaylistIcon/PlaylistIcon.d.ts

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

package/lib/icons/SettingsCogIcon/SettingsCogIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const SettingsCogIcon: 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/SettingsCogIcon/SettingsCogIcon.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.SettingsCogIcon = 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) => {
+    return (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: "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" }),
+        react_1.default.createElement("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" })));
+};
+exports.SettingsCogIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/SettingsCogIcon/SettingsCogIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=SettingsCogIcon.js.map