@apify/ui-library 1.148.0 → 1.148.1-featuremigrateapifyuilibrary-48563e.21

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

@@ -0,0 +1,148 @@
+import { TextShared } from "../../text/text_shared.js";
+import { Link } from "../../link/link.js";
+import { ColorWheelGradient } from "../../color_wheel_gradient/color_wheel_gradient.js";
+import { ActionButton, CopyButton } from "../action_button.js";
+import { PrismSyntaxHighlighter } from "../prism_highlighter.js";
+import { CodeBlockWrapper } from "./code_block.styled.js";
+import { getBashLinePrefixes, getNumberLinePrefixes } from "./utils.js";
+import { useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx$1 from "clsx";
+//#region src/components/code/code_block/code_block.tsx
+var LANGUAGES_WITHOUT_LINE_NUMBERS = [
+	"json",
+	"jsonp",
+	"jsonp",
+	"rss",
+	"yaml",
+	"xml",
+	"html",
+	"bash",
+	"text",
+	"dockerfile",
+	"http"
+];
+var HeaderDots = () => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "CodeBlock-HederDotsWrapper",
+		children: [
+			/* @__PURE__ */ jsx("div", { className: "CodeBlock-HeaderDot" }),
+			/* @__PURE__ */ jsx("div", { className: "CodeBlock-HeaderDot" }),
+			/* @__PURE__ */ jsx("div", { className: "CodeBlock-HeaderDot" })
+		]
+	});
+};
+var Header = ({ tabs, currentTab, showBashHeader, onTabChange, title }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "CodeBlock-Header",
+		"data-test": "code-block-header",
+		children: [
+			showBashHeader && /* @__PURE__ */ jsx(HeaderDots, {}),
+			title && /* @__PURE__ */ jsx(TextShared, {
+				weight: "bold",
+				className: "CodeBlock-HeaderTitle",
+				children: title
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "CodeBlock-HeaderTabsWrapper",
+				children: tabs?.map((tab) => {
+					const props = {
+						className: clsx$1("CodeBlock-Tab", { selected: tab.key === currentTab?.key }),
+						"data-test": `code-block-tab-${tab.key}`,
+						onClick: (e) => onTabChange(tab, e),
+						title: tab.label,
+						id: tab.id ?? tab.key
+					};
+					const label = /* @__PURE__ */ jsx(TextShared, {
+						weight: tab.key === currentTab?.key ? "bold" : "normal",
+						children: tab.label
+					});
+					if (tab.to) return /* @__PURE__ */ jsx(Link, {
+						to: tab.to,
+						...props,
+						children: label
+					}, tab.key);
+					return /* @__PURE__ */ jsx("div", {
+						...props,
+						children: label
+					}, tab.key);
+				})
+			})
+		]
+	});
+};
+var CodeBlock = ({ content, size, language, highlightLines, onTabChange, defaultTabKey, showGradient, hideBashHeader, showActionButton, fullWidth, actionButtonLabel, gradientRotation = 340, hideLineNumbers, fullHeight, title, hideCopyButton, bashCommandsStart, hideBashPromptPrefixes, onActionButtonClick, ...rest }) => {
+	const isMultiTab = content instanceof Array;
+	const [currentTab, setCurrentTab] = useState(isMultiTab ? content.find((tab) => tab.key === defaultTabKey) ?? content[0] : null);
+	const currentCode = (isMultiTab ? currentTab?.code : content)?.trim() ?? "";
+	const currentLanguage = language ?? currentTab?.language;
+	const currentHighlightLines = useMemo(() => isMultiTab ? currentTab?.highlightLines ?? [] : highlightLines, [
+		isMultiTab,
+		currentTab,
+		highlightLines
+	]);
+	const isBash = currentLanguage === "bash";
+	const showLineNumbers = !hideLineNumbers && !LANGUAGES_WITHOUT_LINE_NUMBERS.includes(currentLanguage ?? "");
+	const showBashHeader = isBash && !hideBashHeader && !isMultiTab;
+	const showHeader = isMultiTab || !!title || showBashHeader;
+	const syntaxHighlighterRef = useRef(null);
+	const handleTabClick = async (tab, e) => {
+		await onTabChange?.(tab.key, e);
+		setCurrentTab(tab);
+		syntaxHighlighterRef.current?.scrollTo(0, 0);
+	};
+	const showBashPrompt = isBash && !hideBashPromptPrefixes;
+	const effectiveBashCommandsStart = currentTab?.bashCommandsStart ?? bashCommandsStart;
+	const linePrefixes = useMemo(() => {
+		if (showBashPrompt) return getBashLinePrefixes(currentCode, effectiveBashCommandsStart);
+		if (showLineNumbers) return getNumberLinePrefixes(currentCode);
+		return {};
+	}, [
+		showLineNumbers,
+		showBashPrompt,
+		currentCode,
+		effectiveBashCommandsStart
+	]);
+	return /* @__PURE__ */ jsxs(CodeBlockWrapper, {
+		$hasHeader: showHeader,
+		$gradientRotation: gradientRotation,
+		$hasActionButton: showActionButton,
+		$hasTabs: isMultiTab,
+		$fullWidth: fullWidth,
+		$fullHeight: fullHeight,
+		$showLineNumbers: showLineNumbers,
+		...rest,
+		children: [
+			showHeader && /* @__PURE__ */ jsx(Header, {
+				tabs: isMultiTab ? content : null,
+				currentTab,
+				onTabChange: handleTabClick,
+				showBashHeader,
+				title
+			}),
+			/* @__PURE__ */ jsx(PrismSyntaxHighlighter, {
+				code: currentCode,
+				linePrefixes,
+				highlightLines: currentHighlightLines,
+				language: currentLanguage,
+				size,
+				ref: syntaxHighlighterRef,
+				isSingleLine: false
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "CodeBlock-TopRightActionsWrapper",
+				children: [showActionButton && /* @__PURE__ */ jsx(ActionButton, {
+					successStyle: true,
+					onClick: onActionButtonClick,
+					children: actionButtonLabel ?? "Run on Apify"
+				}), !hideCopyButton && /* @__PURE__ */ jsx(CopyButton, { code: currentCode })]
+			}),
+			showGradient && /* @__PURE__ */ jsx(ColorWheelGradient, {
+				className: "CodeBlock-Gradient",
+				blurSize: 69
+			})
+		]
+	});
+};
+//#endregion
+export { CodeBlock };

package/dist/components/code/code_block/code_block.styled.d.ts

@@ -0,0 +1,19 @@
+import { SharedTextProps, SharedTextSize } from '../../text/text_shared';
+export type SyntaxHighlighterBaseStylesWrapperProps = SharedTextProps & {
+    $fullWidth?: boolean;
+    $fullHeight?: string;
+    $showLineNumbers?: boolean;
+};
+export declare const SyntaxHighlighterBaseStylesWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<(import('../..').BoxProps & import('react').RefAttributes<HTMLElement>) & import('styled-components/dist/types').BaseObject, SyntaxHighlighterBaseStylesWrapperProps>> & string & Omit<import('react').ForwardRefExoticComponent<import('../..').BoxProps & import('react').RefAttributes<HTMLElement>>, keyof import('react').Component<any, {}, any>>;
+export declare const CodeBlockWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('styled-components/dist/types').Substitute<(import('../..').BoxProps & import('react').RefAttributes<HTMLElement>) & import('styled-components/dist/types').BaseObject, SyntaxHighlighterBaseStylesWrapperProps> & import('styled-components/dist/types').BaseObject, {
+    $hasHeader: boolean;
+    $gradientRotation?: number;
+    $highlightLines?: number[];
+    $hasActionButton?: boolean;
+    $hasTabs?: boolean;
+    $fullWidth?: boolean;
+    $showLineNumbers?: boolean;
+    $fullHeight?: boolean;
+    size?: SharedTextSize;
+}>> & string;
+//# sourceMappingURL=code_block.styled.d.ts.map

package/dist/components/code/code_block/code_block.styled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code_block.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/code/code_block/code_block.styled.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAE9E,MAAM,MAAM,uCAAuC,GAAG,eAAe,GAAG;IACpE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,kCAAkC,8cAoB9C,CAAC;AAEF,eAAO,MAAM,gBAAgB;gBACb,OAAO;wBACC,MAAM;sBACR,MAAM,EAAE;uBACP,OAAO;eACf,OAAO;iBACL,OAAO;uBACD,OAAO;kBACZ,OAAO;WACd,cAAc;YA+IxB,CAAC"}

package/dist/components/code/code_block/code_block.styled.js

@@ -0,0 +1,161 @@
+import { theme } from "../../../design_system/theme.js";
+import { Box } from "../../box/box.js";
+import styled, { css } from "styled-components";
+//#region src/components/code/code_block/code_block.styled.tsx
+var SyntaxHighlighterBaseStylesWrapper = styled(Box)`
+    background-color: ${theme.color.neutral.backgroundMuted} !important;
+    border: 1px solid ${theme.color.neutral.border};
+    border-radius: ${theme.radius.radius12};
+    overflow: hidden;
+
+    width: 100%;
+    ${({ $fullWidth }) => !$fullWidth && css`
+            max-width: 860px;
+        `}
+    ${({ $fullHeight }) => !$fullHeight && css`
+            max-height: 600px;
+        `}
+
+    background-color: transparent;
+    position: relative;
+`;
+var CodeBlockWrapper = styled(SyntaxHighlighterBaseStylesWrapper)`
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    min-width: 266px;
+
+    .CodeBlock-Header {
+        padding-top: 7px; /* only 7 due to transform translateY(1px) */
+        gap: ${theme.space.space4};
+        background-color: ${theme.color.neutral.backgroundSubtle};
+        border-bottom: 1px solid ${theme.color.neutral.border};
+        z-index: 3;
+        position: relative;
+        display: flex;
+        height: 4rem;
+
+        .CodeBlock-HeaderTitle {
+            margin-left: ${theme.space.space16};
+            margin-bottom: ${theme.space.space8};
+            margin-top: 0.5rem;
+        }
+
+        .CodeBlock-HeaderTabsWrapper {
+            display: flex;
+            transform: translateY(1px);
+            padding-right: ${theme.space.space32};
+            padding-left: ${theme.space.space8};
+            min-height: fit-content;
+            overflow-x: auto;
+            overflow-y: hidden;
+            gap: ${theme.space.space4};
+
+            margin-right: ${({ $hasActionButton }) => $hasActionButton ? "128" : "20"}px;
+
+            .CodeBlock-Tab {
+                border-radius: ${theme.radius.radius8};
+                background-color: transparent;
+                border: 1px solid transparent;
+                border-bottom-left-radius: 0;
+                border-bottom-right-radius: 0;
+                border-bottom: none;
+                cursor: pointer;
+                height: 3.2rem;
+                max-width: 26rem;
+
+                color: ${theme.color.neutral.textMuted};
+
+                text-align: center;
+                white-space: nowrap;
+
+                padding: 0.2rem ${theme.space.space8} 0.6rem ${theme.space.space8};
+                p {
+                    padding-top: 0.2rem;
+                    text-overflow: ellipsis;
+                    overflow: hidden;
+                }
+
+                &.selected {
+                    color: ${theme.color.neutral.text};
+                    border: 1px solid ${theme.color.neutral.border};
+                    background-color: ${theme.color.neutral.backgroundMuted};
+                    border-bottom: none;
+                    padding: 0.6rem ${theme.space.space8};
+                    p {
+                        padding-top: 0;
+                    }
+                }
+
+                &:hover {
+                    border: 1px solid ${theme.color.neutral.border};
+                    border-bottom: none;
+                    text-decoration: none;
+                }
+
+                &::after {
+                    /* ensures same width of text when switching tabs and making it bold */
+                    ${theme.typography.content.tablet.heading5}
+                    display: block;
+                    content: attr(title);
+                    height: 0px;
+                    color: transparent;
+                    overflow: hidden;
+                    visibility: hidden;
+                }
+            }
+        }
+    }
+
+    .CodeBlock-TopRightActionsWrapper {
+        position: absolute;
+        top: 0;
+        right: 0;
+        ${({ $hasHeader }) => $hasHeader ? css`
+                      padding-top: 6px;
+                      padding-right: ${theme.space.space8};
+                  ` : css`
+                      padding-top: ${theme.space.space16};
+                      padding-right: ${theme.space.space16};
+                  `}
+
+        display: flex;
+        gap: ${theme.space.space8};
+        z-index: 3;
+        height: 3.9rem;
+
+        ${({ $hasHeader }) => $hasHeader && css`
+                padding-left: ${theme.space.space32};
+                background: linear-gradient(to right, transparent, ${theme.color.neutral.backgroundSubtle} 20px);
+            `}
+    }
+
+    .CodeBlock-Gradient {
+        right: 0px;
+        bottom: 0px;
+
+        aspect-ratio: 1/1;
+        height: 250%;
+
+        transform: translate(50%, 70%) rotate(${({ $gradientRotation }) => $gradientRotation ?? 0}deg) scaleX(-1);
+    }
+
+    .CodeBlock-HederDotsWrapper {
+        display: flex;
+        padding: ${theme.space.space8};
+        align-items: flex-start;
+        gap: ${theme.space.space8};
+        margin-bottom: 0.5rem;
+        margin-left: ${theme.space.space8};
+        background: transparent;
+
+        .CodeBlock-HeaderDot {
+            width: 1.2rem;
+            height: 1.2rem;
+            border-radius: 50%;
+            background-color: ${theme.color.neutral.iconSubtle};
+        }
+    }
+`;
+//#endregion
+export { CodeBlockWrapper, SyntaxHighlighterBaseStylesWrapper };

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

@@ -0,0 +1,39 @@
+import { default as React } from 'react';
+import { IconComponent } from '@apify/ui-icons';
+import { MarginSpacingProps, RegularBoxProps } from '../../box';
+import { RegularLinkProps } from '../../link';
+import { CodeBlockProps } from './code_block';
+export type CodeBlockTabKey = 'cli' | 'http' | 'javascript' | 'mcp' | 'openapi' | 'python' | 'typescript';
+type CodeBlockTabConfig = {
+    label: string;
+    language: string;
+    Icon?: IconComponent;
+    /** Fallback image URL for tabs that don't have an Icon component yet */
+    src?: string;
+};
+export declare const CODE_BLOCK_TAB_CATALOG: Record<CodeBlockTabKey, CodeBlockTabConfig>;
+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;
+    languageOverride?: string;
+    onClick?: (e: React.MouseEvent) => void;
+} & Partial<SharedLinkProps>;
+export type CodeBlockWithTabsProps = SharedBoxProps & {
+    codeBlockProps: SharedCodeBlockProps;
+    currentTabKey: CodeBlockTabKey;
+    tabs: CodeBlockTabProps[];
+    optimisticCurrentTabKey?: CodeBlockTabKey;
+};
+export declare const CODE_BLOCK_WITH_TABS_CLASSNAMES: {
+    WRAPPER: string;
+    TABS: string;
+    TAB: string;
+    CONTENT: string;
+};
+export declare const CodeBlockWithTabs: ({ className, codeBlockProps, currentTabKey, tabs, optimisticCurrentTabKey, ...props }: CodeBlockWithTabsProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=code_block_with_tabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"code_block_with_tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/code/code_block/code_block_with_tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAsB,KAAK,aAAa,EAAW,MAAM,iBAAiB,CAAC;AAIlF,OAAO,EAAO,KAAK,kBAAkB,EAAE,KAAK,eAAe,EAAE,MAAM,WAAW,CAAC;AAC/E,OAAO,EAAQ,KAAK,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAEzD,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9D,MAAM,MAAM,eAAe,GAAG,KAAK,GAAG,MAAM,GAAG,YAAY,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,GAAG,YAAY,CAAC;AAC1G,KAAK,kBAAkB,GAAG;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,wEAAwE;IACxE,GAAG,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAuC9E,CAAC;AAEF,KAAK,cAAc,GAAG,IAAI,CAAC,eAAe,EAAE,IAAI,GAAG,UAAU,GAAG,SAAS,CAAC,GAAG,kBAAkB,CAAC;AAEhG,KAAK,oBAAoB,GAAG,IAAI,CAC5B,cAAc,EACd,mBAAmB,GAAG,SAAS,GAAG,UAAU,GAAG,eAAe,GAAG,aAAa,CACjF,CAAC;AACF,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,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CAC3C,GAAG,OAAO,CAAC,eAAe,CAAC,CAAC;AAE7B,MAAM,MAAM,sBAAsB,GAAG,cAAc,GAAG;IAClD,cAAc,EAAE,oBAAoB,CAAC;IACrC,aAAa,EAAE,eAAe,CAAC;IAC/B,IAAI,EAAE,iBAAiB,EAAE,CAAC;IAE1B,uBAAuB,CAAC,EAAE,eAAe,CAAC;CAC7C,CAAC;AAEF,eAAO,MAAM,+BAA+B;;;;;CAK3C,CAAC;AAiHF,eAAO,MAAM,iBAAiB,GAAI,uFAO/B,sBAAsB,4CA6DxB,CAAC"}

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

@@ -0,0 +1,220 @@
+import { theme } from "../../../design_system/theme.js";
+import { Box } from "../../box/box.js";
+import { HeadingShared } from "../../text/heading_shared.js";
+import { useSharedUiDependencies } from "../../../ui_dependency_provider.js";
+import { Link } from "../../link/link.js";
+import { CodeBlock } from "./code_block.js";
+import styled from "styled-components";
+import { createElement } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import clsx$1 from "clsx";
+import { CodeIcon, HttpIcon, McpIcon } from "@apify/ui-icons";
+import _ from "lodash";
+//#region src/components/code/code_block/code_block_with_tabs.tsx
+var CODE_BLOCK_TAB_CATALOG = {
+	cli: {
+		label: "CLI",
+		language: "bash",
+		Icon: CodeIcon
+	},
+	http: {
+		label: "HTTP",
+		language: "bash",
+		Icon: HttpIcon
+	},
+	javascript: {
+		label: "JavaScript",
+		language: "javascript",
+		src: "https://apify.com/img/template-icons/javascript.svg"
+	},
+	mcp: {
+		label: "MCP",
+		language: "bash",
+		Icon: McpIcon
+	},
+	openapi: {
+		label: "OpenAPI",
+		language: "json",
+		src: "https://apify.com/img/icons/openapi.svg"
+	},
+	python: {
+		label: "Python",
+		language: "python",
+		src: "https://apify.com/img/template-icons/python.svg"
+	},
+	typescript: {
+		label: "TypeScript",
+		language: "typescript",
+		src: "https://apify.com/img/template-icons/typescript.svg"
+	}
+};
+var CODE_BLOCK_WITH_TABS_CLASSNAMES = {
+	WRAPPER: "CodeBlockWithTabsWrapper",
+	TABS: "CodeBlockWithTabsTabs",
+	TAB: "CodeBlockWithTabsTab",
+	CONTENT: "CodeBlockWithTabsContent"
+};
+var 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};
+        position: relative;
+
+        & > [role='tabpanel'] {
+            position: sticky;
+            right: 0;
+            top: 0;
+            height: 100%;
+            width: 0;
+            margin-left: auto;
+
+            &::after {
+                right: -${theme.space.space8};
+                height: 100%;
+                width: ${theme.space.space16};
+                background: linear-gradient(
+                    90deg,
+                    rgba(255, 255, 255, 0) 0%,
+                    ${theme.color.neutral.backgroundSubtle} 100%
+                );
+                content: ' ';
+                pointer-events: none;
+                position: absolute;
+            }
+        }
+
+        @media ${theme.device.tablet} {
+            height: 88px;
+            justify-content: center;
+            gap: ${theme.space.space24};
+            padding-inline: ${theme.space.space24};
+
+            & > [role='tabpanel'] {
+                margin-left: unset;
+
+                &::after {
+                    right: -${theme.space.space24};
+                    width: ${theme.space.space32};
+                }
+            }
+        }
+    }
+
+    .${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;
+    }
+`;
+var IMG_RESIZE = {
+	width: 20,
+	height: 20
+};
+var CodeBlockWithTabs = ({ className, codeBlockProps, currentTabKey, tabs, optimisticCurrentTabKey, ...props }) => {
+	const { generateProxyImageUrl } = useSharedUiDependencies();
+	const currentTab = tabs.find((tab) => tab.key === currentTabKey) ?? tabs[0];
+	return /* @__PURE__ */ jsxs(CodeBlockWithTabsWrapper, {
+		className: clsx$1(CODE_BLOCK_WITH_TABS_CLASSNAMES.WRAPPER, className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: CODE_BLOCK_WITH_TABS_CLASSNAMES.TABS,
+			children: [tabs.map((tab) => {
+				const { label, src, Icon } = CODE_BLOCK_TAB_CATALOG[tab.key];
+				const selected = (optimisticCurrentTabKey ?? currentTabKey) === tab.key;
+				const commonProps = {
+					className: clsx$1(CODE_BLOCK_WITH_TABS_CLASSNAMES.TAB, { selected }),
+					"data-test": `code-block-tab-${tab.key}`,
+					..._.omit(tab, [
+						"bashCommandsStart",
+						"content",
+						"languageOverride"
+					])
+				};
+				const children = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					Icon ? /* @__PURE__ */ jsx(Icon, { size: "20" }) : /* @__PURE__ */ jsx("img", {
+						src: src && (generateProxyImageUrl?.(src, { resize: IMG_RESIZE }) ?? src),
+						alt: label
+					}),
+					/* @__PURE__ */ jsx(HeadingShared, {
+						type: "titleS",
+						as: "p",
+						children: label
+					}),
+					/* @__PURE__ */ jsx("div", { role: "tabpanel" })
+				] });
+				if (tab.to) return /* @__PURE__ */ createElement(Link, {
+					...commonProps,
+					key: tab.key,
+					to: tab.to
+				}, children);
+				return /* @__PURE__ */ createElement("div", {
+					...commonProps,
+					role: "button",
+					key: tab.key
+				}, children);
+			}), /* @__PURE__ */ jsx("div", { role: "tabpanel" })]
+		}), /* @__PURE__ */ jsx(CodeBlock, {
+			bashCommandsStart: currentTab?.bashCommandsStart,
+			content: currentTab?.content ?? "",
+			language: currentTab.languageOverride ?? CODE_BLOCK_TAB_CATALOG[currentTab?.key]?.language,
+			className: CODE_BLOCK_WITH_TABS_CLASSNAMES.CONTENT,
+			hideBashHeader: true,
+			...codeBlockProps
+		})]
+	});
+};
+//#endregion
+export { CODE_BLOCK_TAB_CATALOG, CODE_BLOCK_WITH_TABS_CLASSNAMES, CodeBlockWithTabs };

package/dist/components/code/code_block/utils.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export declare const getBashLinePrefixes: (code: string, bashCommandsStart?: number[], isOneLine?: boolean) => {
+    [k: string]: import("react/jsx-runtime").JSX.Element;
+};
+export declare const getNumberLinePrefixes: (code: string) => Record<number, ReactNode>;
+//# sourceMappingURL=utils.d.ts.map

package/dist/components/code/code_block/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/components/code/code_block/utils.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASvC,eAAO,MAAM,mBAAmB,GAAI,MAAM,MAAM,EAAE,oBAAmB,MAAM,EAAO,EAAE,YAAY,OAAO;;CAmDtG,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,MAAM,MAAM,KAAG,MAAM,CAAC,MAAM,EAAE,SAAS,CAY5E,CAAC"}

package/dist/components/code/code_block/utils.js

@@ -0,0 +1,33 @@
+import { theme } from "../../../design_system/theme.js";
+import { CodeHighlighterLineBashPrefix, CodeHighlighterLinePrefix } from "../prism_highlighter.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/code/code_block/utils.tsx
+var getBashLinePrefixes = (code, bashCommandsStart = [], isOneLine) => {
+	const bashLinePrefixesArray = code.split("\n").map((line) => line.trim()).map((line, i) => {
+		const isEmptyLine = line.startsWith("#") || !line;
+		if (bashCommandsStart.length === 0) return isEmptyLine ? /* @__PURE__ */ jsx(CodeHighlighterLineBashPrefix, { $isOneLine: isOneLine }, `code-highlighter-line-bash-prefix-${i}`) : /* @__PURE__ */ jsx(CodeHighlighterLineBashPrefix, {
+			$isOneLine: isOneLine,
+			color: theme.color.lavender.base,
+			children: "$"
+		}, `code-highlighter-line-bash-prefix-${i}`);
+		if (bashCommandsStart.includes(i + 1)) return /* @__PURE__ */ jsx(CodeHighlighterLineBashPrefix, {
+			$isOneLine: isOneLine,
+			color: theme.color.lavender.base,
+			children: "$"
+		}, `code-highlighter-line-bash-prefix-${i}`);
+		if (isEmptyLine) return /* @__PURE__ */ jsx(CodeHighlighterLineBashPrefix, { $isOneLine: isOneLine }, `code-highlighter-line-bash-prefix-${i}`);
+		return /* @__PURE__ */ jsx(CodeHighlighterLineBashPrefix, {
+			$isOneLine: isOneLine,
+			color: theme.color.lavender.base,
+			children: "<"
+		}, `code-highlighter-line-bash-prefix-${i}`);
+	});
+	return Object.fromEntries(bashLinePrefixesArray.map((linePrefix, i) => [i + 1, linePrefix]));
+};
+var getNumberLinePrefixes = (code) => {
+	const numberOfLines = code.split("\n").length;
+	const numbersArray = Array.from({ length: numberOfLines }, (_, i) => i + 1);
+	return Object.fromEntries(numbersArray.map((number) => [number, /* @__PURE__ */ jsx(CodeHighlighterLinePrefix, { children: number }, `code-highlighter-line-prefix-${number}`)]));
+};
+//#endregion
+export { getBashLinePrefixes, getNumberLinePrefixes };

package/dist/components/code/index.d.ts

@@ -0,0 +1,6 @@
+export * from './code_block/code_block';
+export * from './code_block/code_block_with_tabs';
+export * from './one_line_code/one_line_code';
+export * from './inline_code/inline_code';
+export * from './prism_highlighter';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/code/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/code/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC"}

package/dist/components/code/inline_code/inline_code.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { RegularBoxProps } from '../../box';
+import { SharedTextSize } from '../../text/text_shared';
+export declare const inlineCodeStyles: import('styled-components').RuleSet<object>;
+export type InlineCodeProps = RegularBoxProps & {
+    children: React.ReactNode;
+    size?: SharedTextSize;
+    withCopyButton?: boolean;
+};
+export declare const InlineCode: React.FC<InlineCodeProps>;
+//# sourceMappingURL=inline_code.d.ts.map

package/dist/components/code/inline_code/inline_code.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inline_code.d.ts","sourceRoot":"","sources":["../../../../src/components/code/inline_code/inline_code.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAEjD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAG7D,eAAO,MAAM,gBAAgB,6CAM5B,CAAC;AAwBF,MAAM,MAAM,eAAe,GAAG,eAAe,GAAG;IAC5C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC;AAGF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAOhD,CAAC"}