@apify/ui-library 0.63.2-featcodeblockwithtabs-5a4360.36 → 0.64.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "0.63.2-featcodeblockwithtabs-5a4360.36+a49029a0694",
+    "version": "0.64.0",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -26,7 +26,6 @@
         "It's not nice, but helps us to get around the problem of multiple react instances."
     ],
     "dependencies": {
-        "@apify/log": "^2.5.11",
         "@apify/ui-icons": "^0.9.0",
         "@floating-ui/react": "^0.26.2",
         "clsx": "^2.0.0",
@@ -66,5 +65,5 @@
         "typescript": "^5.1.6",
         "typescript-eslint": "^8.24.0"
     },
-    "gitHead": "a49029a0694005e89b5f38ad452a1d490d138d99"
+    "gitHead": "7fb7b476bfa81ad05a3a830b91a85abcec7a6a63"
 }

package/src/components/code/code_block/code_block.tsx

@@ -32,7 +32,7 @@ type HeaderProps = {
 
 const LANGUAGES_WITHOUT_LINE_NUMBERS = ['json', 'jsonp', 'jsonp', 'rss', 'yaml', 'xml', 'html', 'bash', 'text', 'dockerfile', 'http'];
 
-const HeaderDots = () => {
+function HeaderDots() {
     return (
         <div className="CodeBlock-HederDotsWrapper">
             <div className="CodeBlock-HeaderDot" />
@@ -40,15 +40,15 @@ const HeaderDots = () => {
             <div className="CodeBlock-HeaderDot" />
         </div>
     );
-};
+}
 
-const Header = ({
+function Header({
     tabs,
     currentTab,
     showBashHeader,
     onTabChange,
     title,
-}: HeaderProps) => {
+}: HeaderProps) {
     return (
         <div className="CodeBlock-Header">
             {showBashHeader && <HeaderDots />}
@@ -87,9 +87,9 @@ const Header = ({
             </div>
         </div>
     );
-};
+}
 
-export type CodeBlockProps = RegularBoxProps & {
+type CodeBlockProps = RegularBoxProps & {
     content: string | CodeTab[]; // TODO: Try to make it work with children props
     size?: SharedTextSize;
     language?: string | undefined;
@@ -112,7 +112,7 @@ export type CodeBlockProps = RegularBoxProps & {
     hideLineNumbers?: boolean | undefined;
 }
 
-export const CodeBlock = ({
+export function CodeBlock({
     content,
     size,
     language,
@@ -133,7 +133,7 @@ export const CodeBlock = ({
     hideBashPromptPrefixes,
     onActionButtonClick,
     ...rest
-}: CodeBlockProps) => {
+}: CodeBlockProps) {
     const isMultiTab = content instanceof Array;
     const defaultTab = isMultiTab
         ? content.find((tab) => tab.key === defaultTabKey) ?? content[0]
@@ -232,4 +232,4 @@ export const CodeBlock = ({
             )}
         </CodeBlockWrapper >
     );
-};
+}

package/src/components/code/index.ts

@@ -1,4 +1,3 @@
 export * from './code_block/code_block.js';
-export * from './code_block/code_block_with_tabs.js';
 export * from './one_line_code/one_line_code.js';
 export * from './inline_code/inline_code.js';

package/src/utils/image_color.ts

@@ -3,8 +3,6 @@ import { FastAverageColor } from 'fast-average-color';
 import type { RefCallback } from 'react';
 import { useCallback, useState } from 'react';
 
-import log from '@apify/log';
-
 // Uses Luma (Y component of YIQ) computed from RGB to determine whether the color is dark.
 // See https://en.wikipedia.org/wiki/YIQ
 const isDark = (rgb: number[]): boolean => {
@@ -33,7 +31,7 @@ export const useImageColor = () => {
             try {
                 setColor(patchDarknessInfo(await fac.getColorAsync(element)));
             } catch (error) {
-                log.error('Failed to determine the image color.', { error });
+                console.error('Failed to determine the image color.', { error });
             }
         };
 

package/dist/src/components/code/code_block/code_block_with_tabs.d.ts

@@ -1,28 +0,0 @@
-import React from 'react';
-import { type MarginSpacingProps, type RegularBoxProps } from '../../box.js';
-import { type RegularLinkProps } from '../../link.js';
-import { type CodeBlockProps } from './code_block.js';
-export type CodeBlockTabKey = 'cli' | 'http' | 'javascript' | 'mcp' | 'openapi' | 'python' | 'typescript';
-type SharedBoxProps = Omit<RegularBoxProps, 'as' | 'children' | 'onClick'> & MarginSpacingProps;
-type SharedCodeBlockProps = Omit<CodeBlockProps, 'bashCommandsStart' | 'content' | 'language' | 'defaultTabKey' | 'onTabChange'>;
-type SharedLinkProps = Pick<RegularLinkProps, 'to' | 'rel' | 'target'>;
-export type CodeBlockTabProps = {
-    key: CodeBlockTabKey;
-    bashCommandsStart?: number[];
-    content: string;
-    onClick?: (e: React.MouseEvent) => void;
-} & Partial<SharedLinkProps>;
-type CodeBlockWithTabsProps = SharedBoxProps & {
-    codeBlockProps: SharedCodeBlockProps;
-    currentTabKey: CodeBlockTabKey;
-    tabs: CodeBlockTabProps[];
-};
-export declare const CODE_BLOCK_WITH_TABS_CLASSNAMES: {
-    WRAPPER: string;
-    TABS: string;
-    TAB: string;
-    CONTENT: string;
-};
-export declare const CodeBlockWithTabs: ({ className, codeBlockProps, currentTabKey, tabs, ...props }: CodeBlockWithTabsProps) => import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=code_block_with_tabs.d.ts.map

package/dist/src/components/code/code_block/code_block_with_tabs.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"code_block_with_tabs.d.ts","sourceRoot":"","sources":["../../../../../src/components/code/code_block/code_block_with_tabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAO,KAAK,kBAAkB,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAClF,OAAO,EAAQ,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAE5D,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjE,MAAM,MAAM,eAAe,GAAG,KAAK,GAAG,MAAM,GAAG,YAAY,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,GAAG,YAAY,CAAC;AAgD1G,KAAK,cAAc,GAAG,IAAI,CAAC,eAAe,EAAE,IAAI,GAAG,UAAU,GAAG,SAAS,CAAC,GAAG,kBAAkB,CAAC;AAEhG,KAAK,oBAAoB,GAAG,IAAI,CAAC,cAAc,EAAE,mBAAmB,GAAG,SAAS,GAAG,UAAU,GAAG,eAAe,GAAG,aAAa,CAAC,CAAC;AACjI,KAAK,eAAe,GAAG,IAAI,CAAC,gBAAgB,EAAE,IAAI,GAAG,KAAK,GAAG,QAAQ,CAAC,CAAC;AAEvE,MAAM,MAAM,iBAAiB,GAAG;IAC5B,GAAG,EAAE,eAAe,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CAC3C,GAAG,OAAO,CAAC,eAAe,CAAC,CAAC;AAE7B,KAAK,sBAAsB,GAAG,cAAc,GAAG;IAC3C,cAAc,EAAE,oBAAoB,CAAC;IACrC,aAAa,EAAE,eAAe,CAAC;IAC/B,IAAI,EAAE,iBAAiB,EAAE,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,+BAA+B;;;;;CAK3C,CAAC;AAgFF,eAAO,MAAM,iBAAiB,iEAAkE,sBAAsB,4CA6DrH,CAAC"}

package/dist/src/components/code/code_block/code_block_with_tabs.js

@@ -1,152 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import clsx from 'clsx';
-import styled from 'styled-components';
-import { theme } from '../../../design_system/theme.js';
-import { useSharedUiDependencies } from '../../../ui_dependency_provider.js';
-import { Box } from '../../box.js';
-import { Link } from '../../link.js';
-import { HeadingShared } from '../../text/heading_shared.js';
-import { CodeBlock } from './code_block.js';
-const CODE_BLOCK_TAB_CATALOG = {
-    cli: {
-        label: 'CLI',
-        language: 'bash',
-        src: 'https://apify.com/img/icons/code.svg',
-    },
-    http: {
-        label: 'HTTP',
-        language: 'bash',
-        src: 'https://apify.com/img/icons/http.svg',
-    },
-    javascript: {
-        label: 'JavaScript',
-        language: 'javascript',
-        // TODO: duplicate icon from 'template-icons' to 'icons' folder on the web
-        src: 'https://apify.com/img/template-icons/javascript.svg',
-    },
-    mcp: {
-        label: 'MCP',
-        language: 'bash',
-        src: 'https://apify.com/img/icons/mcp.svg',
-    },
-    openapi: {
-        label: 'OpenAPI',
-        language: 'json',
-        src: 'https://apify.com/img/icons/openapi.svg',
-    },
-    python: {
-        label: 'Python',
-        language: 'python',
-        // TODO: duplicate icon from 'template-icons' to 'icons' folder on the web
-        src: 'https://apify.com/img/template-icons/python.svg',
-    },
-    typescript: {
-        label: 'TypeScript',
-        language: 'typescript',
-        // TODO: duplicate icon from 'template-icons' to 'icons' folder on the web
-        src: 'https://apify.com/img/template-icons/typescript.svg',
-    },
-};
-export const CODE_BLOCK_WITH_TABS_CLASSNAMES = {
-    WRAPPER: 'CodeBlockWithTabsWrapper',
-    TABS: 'CodeBlockWithTabsTabs',
-    TAB: 'CodeBlockWithTabsTab',
-    CONTENT: 'CodeBlockWithTabsContent',
-};
-const CodeBlockWithTabsWrapper = styled(Box) `
-    .${CODE_BLOCK_WITH_TABS_CLASSNAMES.TABS} {
-        min-width: 266px;
-        height: 72px;
-        padding-inline: ${theme.space.space8};
-        display: flex;
-        gap: ${theme.space.space4};
-        overflow-x: auto;
-        background-color: ${theme.color.neutral.backgroundSubtle};
-        border: 1px solid ${theme.color.neutral.border};
-        border-bottom: none;
-        border-top-right-radius: ${theme.radius.radius12};
-        border-top-left-radius: ${theme.radius.radius12};
-
-        @media ${theme.device.tablet} {
-            height: 88px;
-            justify-content: center;
-            gap: ${theme.space.space24};
-            padding-inline: ${theme.space.space24};
-        }
-    }
-
-    .${CODE_BLOCK_WITH_TABS_CLASSNAMES.TAB} {
-        min-width: 64px;
-        position: relative;
-        padding: ${theme.space.space12} ${theme.space.space8};
-        color: ${theme.color.neutral.textMuted};
-        display: flex;
-        flex-direction: column;
-        flex-shrink: 0;
-        align-items: center;
-        justify-content: flex-end;
-        gap: ${theme.space.space4};
-        cursor: pointer;
-
-        img {
-            width: 20px;
-            height: 20px;
-        }
-
-        [role="tabpanel"] {
-            bottom: 0;
-            width: 100%;
-            height: 2px;
-            color: ${theme.color.neutral.text};
-            background-color: ${theme.color.primaryBlack.action};
-            border-radius: ${theme.radius.radiusFull};
-            display: none;
-            position: absolute;
-            z-index: 2;
-        }
-
-        &.selected {
-            color: ${theme.color.neutral.text};
-
-            [role="tabpanel"] {
-                display: block;
-            }
-        }
-
-        &:hover {
-            color: ${theme.color.neutral.text};
-            text-decoration: none;
-        }
-    }
-
-    .${CODE_BLOCK_WITH_TABS_CLASSNAMES.CONTENT} {
-        max-width: initial;
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-    }
-`;
-const IMG_RESIZE = {
-    width: 20,
-    height: 20,
-};
-export const CodeBlockWithTabs = ({ className, codeBlockProps, currentTabKey, tabs, ...props }) => {
-    const { generateProxyImageUrl } = useSharedUiDependencies();
-    const currentTab = tabs.find((tab) => tab.key === currentTabKey) ?? tabs[0];
-    return (_jsxs(CodeBlockWithTabsWrapper, { className: clsx(CODE_BLOCK_WITH_TABS_CLASSNAMES.WRAPPER, className), ...props, children: [_jsx("div", { className: CODE_BLOCK_WITH_TABS_CLASSNAMES.TABS, children: tabs.map((tab) => {
-                    const { label, src } = CODE_BLOCK_TAB_CATALOG[tab.key];
-                    const selected = tab.key === currentTab?.key;
-                    const commonProps = {
-                        key: tab.key,
-                        className: clsx(CODE_BLOCK_WITH_TABS_CLASSNAMES.TAB, { selected }),
-                        'data-test': `code-block-tab-${tab.key}`,
-                        onClick: tab.onClick,
-                    };
-                    const children = (_jsxs(_Fragment, { children: [_jsx("img", { src: generateProxyImageUrl?.(src, { resize: IMG_RESIZE }) ?? src, alt: label }), _jsx(HeadingShared, { type: "titleS", as: "p", children: label }), _jsx("div", { role: "tabpanel" })] }));
-                    // if the tab has a 'to' prop, render a Link component
-                    if (tab.to) {
-                        return (_jsx(Link, { ...commonProps, to: tab.to, rel: tab.rel, target: tab.target, children: children }));
-                    }
-                    return (_jsx("div", { ...commonProps, role: "button", children: children }));
-                }) }), _jsx(CodeBlock, { bashCommandsStart: currentTab?.bashCommandsStart, content: currentTab?.content ?? '', language: CODE_BLOCK_TAB_CATALOG[currentTab?.key]?.language, className: CODE_BLOCK_WITH_TABS_CLASSNAMES.CONTENT, hideBashHeader: true, ...codeBlockProps })] }));
-};
-//# sourceMappingURL=code_block_with_tabs.js.map

package/dist/src/components/code/code_block/code_block_with_tabs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"code_block_with_tabs.js","sourceRoot":"","sources":["../../../../../src/components/code/code_block/code_block_with_tabs.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,KAAK,EAAE,MAAM,iCAAiC,CAAC;AACxD,OAAO,EAAE,uBAAuB,EAAE,MAAM,oCAAoC,CAAC;AAC7E,OAAO,EAAE,GAAG,EAAiD,MAAM,cAAc,CAAC;AAClF,OAAO,EAAE,IAAI,EAAyB,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAuB,MAAM,iBAAiB,CAAC;AASjE,MAAM,sBAAsB,GAAgD;IACxE,GAAG,EAAE;QACD,KAAK,EAAE,KAAK;QACZ,QAAQ,EAAE,MAAM;QAChB,GAAG,EAAE,sCAAsC;KAC9C;IACD,IAAI,EAAE;QACF,KAAK,EAAE,MAAM;QACb,QAAQ,EAAE,MAAM;QAChB,GAAG,EAAE,sCAAsC;KAC9C;IACD,UAAU,EAAE;QACR,KAAK,EAAE,YAAY;QACnB,QAAQ,EAAE,YAAY;QACtB,0EAA0E;QAC1E,GAAG,EAAE,qDAAqD;KAC7D;IACD,GAAG,EAAE;QACD,KAAK,EAAE,KAAK;QACZ,QAAQ,EAAE,MAAM;QAChB,GAAG,EAAE,qCAAqC;KAC7C;IACD,OAAO,EAAE;QACL,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,MAAM;QAChB,GAAG,EAAE,yCAAyC;KACjD;IACD,MAAM,EAAE;QACJ,KAAK,EAAE,QAAQ;QACf,QAAQ,EAAE,QAAQ;QAClB,0EAA0E;QAC1E,GAAG,EAAE,iDAAiD;KACzD;IACD,UAAU,EAAE;QACR,KAAK,EAAE,YAAY;QACnB,QAAQ,EAAE,YAAY;QACtB,0EAA0E;QAC1E,GAAG,EAAE,qDAAqD;KAC7D;CACJ,CAAC;AAoBF,MAAM,CAAC,MAAM,+BAA+B,GAAG;IAC3C,OAAO,EAAE,0BAA0B;IACnC,IAAI,EAAE,uBAAuB;IAC7B,GAAG,EAAE,sBAAsB;IAC3B,OAAO,EAAE,0BAA0B;CACtC,CAAC;AAEF,MAAM,wBAAwB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;OACrC,+BAA+B,CAAC,IAAI;;;0BAGjB,KAAK,CAAC,KAAK,CAAC,MAAM;;eAE7B,KAAK,CAAC,KAAK,CAAC,MAAM;;4BAEL,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,gBAAgB;4BACpC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM;;mCAEnB,KAAK,CAAC,MAAM,CAAC,QAAQ;kCACtB,KAAK,CAAC,MAAM,CAAC,QAAQ;;iBAEtC,KAAK,CAAC,MAAM,CAAC,MAAM;;;mBAGjB,KAAK,CAAC,KAAK,CAAC,OAAO;8BACR,KAAK,CAAC,KAAK,CAAC,OAAO;;;;OAI1C,+BAA+B,CAAC,GAAG;;;mBAGvB,KAAK,CAAC,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM;iBAC3C,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS;;;;;;eAM/B,KAAK,CAAC,KAAK,CAAC,MAAM;;;;;;;;;;;;qBAYZ,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI;gCACb,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,MAAM;6BAClC,KAAK,CAAC,MAAM,CAAC,UAAU;;;;;;;qBAO/B,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI;;;;;;;;qBAQxB,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI;;;;;OAKtC,+BAA+B,CAAC,OAAO;;;;;CAK7C,CAAC;AAEF,MAAM,UAAU,GAAG;IACf,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;CACb,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,aAAa,EAAE,IAAI,EAAE,GAAG,KAAK,EAA0B,EAAE,EAAE;IACtH,MAAM,EAAE,qBAAqB,EAAE,GAAG,uBAAuB,EAAE,CAAC;IAC5D,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,GAAG,KAAK,aAAa,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC;IAE5E,OAAO,CACH,MAAC,wBAAwB,IAAC,SAAS,EAAE,IAAI,CAAC,+BAA+B,CAAC,OAAO,EAAE,SAAS,CAAC,KAAM,KAAK,aACpG,cAAK,SAAS,EAAE,+BAA+B,CAAC,IAAI,YAC/C,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE;oBACd,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,sBAAsB,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;oBACvD,MAAM,QAAQ,GAAG,GAAG,CAAC,GAAG,KAAK,UAAU,EAAE,GAAG,CAAC;oBAE7C,MAAM,WAAW,GAAG;wBAChB,GAAG,EAAE,GAAG,CAAC,GAAG;wBACZ,SAAS,EAAE,IAAI,CAAC,+BAA+B,CAAC,GAAG,EAAE,EAAE,QAAQ,EAAE,CAAC;wBAClE,WAAW,EAAE,kBAAkB,GAAG,CAAC,GAAG,EAAE;wBACxC,OAAO,EAAE,GAAG,CAAC,OAAO;qBACvB,CAAC;oBACF,MAAM,QAAQ,GAAG,CACb,8BACI,cAAK,GAAG,EAAE,qBAAqB,EAAE,CAAC,GAAG,EAAE,EAAE,MAAM,EAAE,UAAU,EAAE,CAAC,IAAI,GAAG,EAAE,GAAG,EAAE,KAAK,GAAI,EACrF,KAAC,aAAa,IAAC,IAAI,EAAC,QAAQ,EAAC,EAAE,EAAC,GAAG,YAC9B,KAAK,GACM,EAChB,cAAK,IAAI,EAAC,UAAU,GAAG,IACxB,CACN,CAAC;oBAEF,sDAAsD;oBACtD,IAAI,GAAG,CAAC,EAAE,EAAE,CAAC;wBACT,OAAO,CACH,KAAC,IAAI,OACG,WAAW,EACf,EAAE,EAAE,GAAG,CAAC,EAAE,EACV,GAAG,EAAE,GAAG,CAAC,GAAG,EACZ,MAAM,EAAE,GAAG,CAAC,MAAM,YAEjB,QAAQ,GACN,CACV,CAAC;oBACN,CAAC;oBAED,OAAO,CACH,iBACQ,WAAW,EACf,IAAI,EAAC,QAAQ,YAEZ,QAAQ,GACP,CACT,CAAC;gBACN,CAAC,CAAC,GACA,EACN,KAAC,SAAS,IACN,iBAAiB,EAAE,UAAU,EAAE,iBAAiB,EAChD,OAAO,EAAE,UAAU,EAAE,OAAO,IAAI,EAAE,EAClC,QAAQ,EAAE,sBAAsB,CAAC,UAAU,EAAE,GAAG,CAAC,EAAE,QAAQ,EAC3D,SAAS,EAAE,+BAA+B,CAAC,OAAO,EAClD,cAAc,WACV,cAAc,GACpB,IACqB,CAC9B,CAAC;AACN,CAAC,CAAC"}

package/src/components/code/code_block/code_block_with_tabs.tsx

@@ -1,224 +0,0 @@
-import clsx from 'clsx';
-import React from 'react';
-import styled from 'styled-components';
-
-import { theme } from '../../../design_system/theme.js';
-import { useSharedUiDependencies } from '../../../ui_dependency_provider.js';
-import { Box, type MarginSpacingProps, type RegularBoxProps } from '../../box.js';
-import { Link, type RegularLinkProps } from '../../link.js';
-import { HeadingShared } from '../../text/heading_shared.js';
-import { CodeBlock, type CodeBlockProps } from './code_block.js';
-
-export type CodeBlockTabKey = 'cli' | 'http' | 'javascript' | 'mcp' | 'openapi' | 'python' | 'typescript';
-type CodeBlockTabConfig = {
-    label: string;
-    language: string;
-    src: string;
-};
-
-const CODE_BLOCK_TAB_CATALOG: Record<CodeBlockTabKey, CodeBlockTabConfig> = {
-    cli: {
-        label: 'CLI',
-        language: 'bash',
-        src: 'https://apify.com/img/icons/code.svg',
-    },
-    http: {
-        label: 'HTTP',
-        language: 'bash',
-        src: 'https://apify.com/img/icons/http.svg',
-    },
-    javascript: {
-        label: 'JavaScript',
-        language: 'javascript',
-        // TODO: duplicate icon from 'template-icons' to 'icons' folder on the web
-        src: 'https://apify.com/img/template-icons/javascript.svg',
-    },
-    mcp: {
-        label: 'MCP',
-        language: 'bash',
-        src: 'https://apify.com/img/icons/mcp.svg',
-    },
-    openapi: {
-        label: 'OpenAPI',
-        language: 'json',
-        src: 'https://apify.com/img/icons/openapi.svg',
-    },
-    python: {
-        label: 'Python',
-        language: 'python',
-        // TODO: duplicate icon from 'template-icons' to 'icons' folder on the web
-        src: 'https://apify.com/img/template-icons/python.svg',
-    },
-    typescript: {
-        label: 'TypeScript',
-        language: 'typescript',
-        // TODO: duplicate icon from 'template-icons' to 'icons' folder on the web
-        src: 'https://apify.com/img/template-icons/typescript.svg',
-    },
-};
-
-type SharedBoxProps = Omit<RegularBoxProps, 'as' | 'children' | 'onClick'> & MarginSpacingProps;
-
-type SharedCodeBlockProps = Omit<CodeBlockProps, 'bashCommandsStart' | 'content' | 'language' | 'defaultTabKey' | 'onTabChange'>;
-type SharedLinkProps = Pick<RegularLinkProps, 'to' | 'rel' | 'target'>;
-
-export type CodeBlockTabProps = {
-    key: CodeBlockTabKey;
-    bashCommandsStart?: number[];
-    content: string;
-    onClick?: (e: React.MouseEvent) => void;
-} & Partial<SharedLinkProps>;
-
-type CodeBlockWithTabsProps = SharedBoxProps & {
-    codeBlockProps: SharedCodeBlockProps;
-    currentTabKey: CodeBlockTabKey;
-    tabs: CodeBlockTabProps[];
-};
-
-export const CODE_BLOCK_WITH_TABS_CLASSNAMES = {
-    WRAPPER: 'CodeBlockWithTabsWrapper',
-    TABS: 'CodeBlockWithTabsTabs',
-    TAB: 'CodeBlockWithTabsTab',
-    CONTENT: 'CodeBlockWithTabsContent',
-};
-
-const CodeBlockWithTabsWrapper = styled(Box)`
-    .${CODE_BLOCK_WITH_TABS_CLASSNAMES.TABS} {
-        min-width: 266px;
-        height: 72px;
-        padding-inline: ${theme.space.space8};
-        display: flex;
-        gap: ${theme.space.space4};
-        overflow-x: auto;
-        background-color: ${theme.color.neutral.backgroundSubtle};
-        border: 1px solid ${theme.color.neutral.border};
-        border-bottom: none;
-        border-top-right-radius: ${theme.radius.radius12};
-        border-top-left-radius: ${theme.radius.radius12};
-
-        @media ${theme.device.tablet} {
-            height: 88px;
-            justify-content: center;
-            gap: ${theme.space.space24};
-            padding-inline: ${theme.space.space24};
-        }
-    }
-
-    .${CODE_BLOCK_WITH_TABS_CLASSNAMES.TAB} {
-        min-width: 64px;
-        position: relative;
-        padding: ${theme.space.space12} ${theme.space.space8};
-        color: ${theme.color.neutral.textMuted};
-        display: flex;
-        flex-direction: column;
-        flex-shrink: 0;
-        align-items: center;
-        justify-content: flex-end;
-        gap: ${theme.space.space4};
-        cursor: pointer;
-
-        img {
-            width: 20px;
-            height: 20px;
-        }
-
-        [role="tabpanel"] {
-            bottom: 0;
-            width: 100%;
-            height: 2px;
-            color: ${theme.color.neutral.text};
-            background-color: ${theme.color.primaryBlack.action};
-            border-radius: ${theme.radius.radiusFull};
-            display: none;
-            position: absolute;
-            z-index: 2;
-        }
-
-        &.selected {
-            color: ${theme.color.neutral.text};
-
-            [role="tabpanel"] {
-                display: block;
-            }
-        }
-
-        &:hover {
-            color: ${theme.color.neutral.text};
-            text-decoration: none;
-        }
-    }
-
-    .${CODE_BLOCK_WITH_TABS_CLASSNAMES.CONTENT} {
-        max-width: initial;
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-    }
-`;
-
-const IMG_RESIZE = {
-    width: 20,
-    height: 20,
-};
-
-export const CodeBlockWithTabs = ({ className, codeBlockProps, currentTabKey, tabs, ...props }: CodeBlockWithTabsProps) => {
-    const { generateProxyImageUrl } = useSharedUiDependencies();
-    const currentTab = tabs.find((tab) => tab.key === currentTabKey) ?? tabs[0];
-
-    return (
-        <CodeBlockWithTabsWrapper className={clsx(CODE_BLOCK_WITH_TABS_CLASSNAMES.WRAPPER, className)} {...props}>
-            <div className={CODE_BLOCK_WITH_TABS_CLASSNAMES.TABS}>
-                {tabs.map((tab) => {
-                    const { label, src } = CODE_BLOCK_TAB_CATALOG[tab.key];
-                    const selected = tab.key === currentTab?.key;
-
-                    const commonProps = {
-                        key: tab.key,
-                        className: clsx(CODE_BLOCK_WITH_TABS_CLASSNAMES.TAB, { selected }),
-                        'data-test': `code-block-tab-${tab.key}`,
-                        onClick: tab.onClick,
-                    };
-                    const children = (
-                        <>
-                            <img src={generateProxyImageUrl?.(src, { resize: IMG_RESIZE }) ?? src} alt={label} />
-                            <HeadingShared type="titleS" as="p">
-                                {label}
-                            </HeadingShared>
-                            <div role="tabpanel" />
-                        </>
-                    );
-
-                    // if the tab has a 'to' prop, render a Link component
-                    if (tab.to) {
-                        return (
-                            <Link
-                                {...commonProps}
-                                to={tab.to}
-                                rel={tab.rel}
-                                target={tab.target}
-                            >
-                                {children}
-                            </Link>
-                        );
-                    }
-
-                    return (
-                        <div
-                            {...commonProps}
-                            role="button"
-                        >
-                            {children}
-                        </div>
-                    );
-                })}
-            </div>
-            <CodeBlock
-                bashCommandsStart={currentTab?.bashCommandsStart}
-                content={currentTab?.content ?? ''}
-                language={CODE_BLOCK_TAB_CATALOG[currentTab?.key]?.language}
-                className={CODE_BLOCK_WITH_TABS_CLASSNAMES.CONTENT}
-                hideBashHeader
-                {...codeBlockProps}
-            />
-        </CodeBlockWithTabsWrapper>
-    );
-};