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

package/dist/components/checkbox/checkbox.style.js

@@ -0,0 +1,62 @@
+import { theme as e } from "../../design_system/theme.js";
+import { css as t } from "styled-components";
+//#region src/components/checkbox/checkbox.style.ts
+var n = t`
+    overflow: hidden;
+    border: 1px solid ${e.color.neutral.border};
+    border-radius: ${e.radius.radius4};
+    background-color: ${e.color.neutral.background};
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    position: relative;
+    box-sizing: border-box;
+    transition:
+        border-color 120ms ease-out,
+        background-color 120ms ease-out !important;
+
+    &:hover,
+    &:focus {
+        border-color: ${e.color.primary.action};
+        cursor: pointer;
+    }
+
+    &.disabled {
+        background-color: ${e.color.neutral.textDisabled};
+        border-color: ${e.color.neutral.border};
+    }
+
+    &.error {
+        border-color: ${e.color.danger.text};
+    }
+
+    &[data-state='indeterminate'],
+    &[data-state='checked'] {
+        background-color: ${e.color.primary.action};
+        border-color: ${e.color.primary.action};
+
+        &:hover {
+            background-color: ${e.color.primary.actionHover};
+            border-color: ${e.color.primary.actionHover};
+        }
+
+        &.error {
+            background-color: ${e.color.danger.action};
+            border-color: ${e.color.danger.action};
+
+            &:hover {
+                background-color: ${e.color.danger.actionHover};
+                border-color: ${e.color.danger.actionHover};
+            }
+        }
+
+        &.disabled {
+            background-color: ${e.color.neutral.textDisabled};
+            border-color: ${e.color.neutral.border};
+        }
+    }
+`;
+//#endregion
+export { n as checkboxStyle };

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

@@ -0,0 +1,2 @@
+export * from './checkbox';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}

package/dist/components/chip/chip.d.ts

@@ -0,0 +1,54 @@
+import { FC, default as React } from 'react';
+import { ValueOf } from '@apify-packages/types';
+import { RegularBoxProps } from '../box';
+export declare const CHIP_SIZES: {
+    readonly EXTRA_SMALL: "XS";
+    readonly SMALL: "S";
+    readonly MEDIUM: "M";
+    readonly LARGE: "L";
+};
+type CHIP_SIZES = ValueOf<typeof CHIP_SIZES>;
+export declare const CHIP_TYPES: {
+    readonly DEFAULT: "DEFAULT";
+    readonly PRIMARY: "PRIMARY";
+    readonly SUCCESS: "SUCCESS";
+    readonly WARNING: "WARNING";
+    readonly DANGER: "DANGER";
+};
+export type CHIP_TYPES = ValueOf<typeof CHIP_TYPES>;
+export declare const classNames: {
+    BODY: string;
+};
+export type ChipProps = RegularBoxProps & {
+    type?: CHIP_TYPES;
+    size?: CHIP_SIZES;
+    icon?: React.ReactNode;
+    clickable?: boolean;
+};
+/**
+ * Component for displaying status and for labelling other components.
+ * @deprecated Use Tag or Badge
+ */
+export declare const Chip: React.ForwardRefExoticComponent<{
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    onClick?: (e: React.MouseEvent) => void;
+    id?: string;
+    title?: string;
+} & {
+    as?: React.ElementType;
+} & {
+    type?: CHIP_TYPES;
+    size?: CHIP_SIZES;
+    icon?: React.ReactNode;
+    clickable?: boolean;
+} & React.RefAttributes<unknown>>;
+type SpecificChipProps = Omit<ChipProps, 'type'>;
+export declare const PrimaryChip: FC<SpecificChipProps>;
+export declare const NeutralChip: FC<SpecificChipProps>;
+export declare const SuccessChip: FC<SpecificChipProps>;
+export declare const DangerChip: FC<SpecificChipProps>;
+export declare const WarningChip: FC<SpecificChipProps>;
+export {};
+//# sourceMappingURL=chip.d.ts.map

package/dist/components/chip/chip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.d.ts","sourceRoot":"","sources":["../../../src/components/chip/chip.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAGrD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AAE9C,eAAO,MAAM,UAAU;;;;;CAKb,CAAC;AACX,KAAK,UAAU,GAAG,OAAO,CAAC,OAAO,UAAU,CAAC,CAAC;AAE7C,eAAO,MAAM,UAAU;;;;;;CAMb,CAAC;AACX,MAAM,MAAM,UAAU,GAAG,OAAO,CAAC,OAAO,UAAU,CAAC,CAAC;AAEpD,eAAO,MAAM,UAAU;;CAEtB,CAAC;AA8FF,MAAM,MAAM,SAAS,GAAG,eAAe,GAAG;IACtC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;WAVN,UAAU;WACV,UAAU;WACV,KAAK,CAAC,SAAS;gBACV,OAAO;iCA6BtB,CAAC;AAIF,KAAK,iBAAiB,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;AAEjD,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,iBAAiB,CAA4D,CAAC;AAC3G,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,iBAAiB,CAA4D,CAAC;AAC3G,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,iBAAiB,CAA4D,CAAC;AAC3G,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,iBAAiB,CAA2D,CAAC;AACzG,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,iBAAiB,CAA4D,CAAC"}

package/dist/components/chip/chip.js

@@ -0,0 +1,127 @@
+import { theme as e } from "../../design_system/theme.js";
+import t, { css as n } from "styled-components";
+import { forwardRef as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import o from "clsx";
+//#region src/components/chip/chip.tsx
+var s = {
+	EXTRA_SMALL: "XS",
+	SMALL: "S",
+	MEDIUM: "M",
+	LARGE: "L"
+}, c = {
+	DEFAULT: "DEFAULT",
+	PRIMARY: "PRIMARY",
+	SUCCESS: "SUCCESS",
+	WARNING: "WARNING",
+	DANGER: "DANGER"
+}, l = { BODY: "Chip-body" }, u = {
+	[s.EXTRA_SMALL]: n`
+        font-size: 12px;
+        line-height: 16px;
+        padding: 0 4px;
+        border-radius: 6px;
+    `,
+	[s.SMALL]: n`
+        font-size: 12px;
+        line-height: 16px;
+        padding: 2px 4px;
+        border-radius: 6px;
+    `,
+	[s.MEDIUM]: n`
+        font-size: 14px;
+        line-height: 20px;
+        padding: 2px 8px;
+        border-radius: 100px;
+    `,
+	[s.LARGE]: n`
+        /* TODO: (typography-mismatch) 16px/20px does not match any canonical typography token — needs designer input. Blocks migrating chipSizeStyle to typography token interpolations (XS/S match bodyS, M matches bodyM). */
+        font-size: 16px;
+        line-height: 20px;
+        padding: 2px 8px;
+        border-radius: 100px;
+    `
+}, d = {
+	[c.DEFAULT]: n`
+        color: ${e.color.neutral.text};
+        background: ${e.color.neutral.chipBackground};
+    `,
+	[c.PRIMARY]: n`
+        color: ${e.color.primary.chipText};
+        background: ${e.color.primary.chipBackground};
+    `,
+	[c.SUCCESS]: n`
+        color: ${e.color.success.chipText};
+        background: ${e.color.success.chipBackground};
+    `,
+	[c.WARNING]: n`
+        color: ${e.color.warning.chipText};
+        background: ${e.color.warning.chipBackground};
+    `,
+	[c.DANGER]: n`
+        color: ${e.color.danger.chipText};
+        background: ${e.color.danger.chipBackground};
+    `
+}, f = {
+	[c.DEFAULT]: n`
+        background: ${e.color.neutral.chipBackgroundHover};
+    `,
+	[c.PRIMARY]: n`
+        background: ${e.color.primary.chipBackgroundHover};
+    `,
+	[c.SUCCESS]: n`
+        background: ${e.color.success.chipBackgroundHover};
+    `,
+	[c.WARNING]: n`
+        background: ${e.color.warning.chipBackgroundHover};
+    `,
+	[c.DANGER]: n`
+        background: ${e.color.danger.chipBackgroundHover};
+    `
+}, p = t.span`
+    ${({ size: e }) => u[e]};
+    ${({ type: e }) => d[e]};
+    ${({ type: e, clickable: t }) => t && n`
+            &:hover {
+                ${f[e]};
+            }
+        `};
+    /* Static styles */
+    width: fit-content;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    /* TODO: (typography-keyword) 'normal' keyword used instead of numeric value (400) or typography token. */
+    font-weight: normal;
+    white-space: nowrap;
+    cursor: ${({ clickable: e }) => e ? "pointer" : "default"};
+    gap: ${e.space.space4};
+`, m = r(({ type: e = c.DEFAULT, size: t = s.MEDIUM, clickable: n = !1, icon: r, children: i, className: u, ...d }, f) => /* @__PURE__ */ a(p, {
+	ref: f,
+	...d,
+	type: e,
+	size: t,
+	clickable: n,
+	className: o(u, l.BODY),
+	children: [i, r]
+}));
+m.displayName = "Chip";
+var h = (e) => /* @__PURE__ */ i(m, {
+	type: c.PRIMARY,
+	...e
+}), g = (e) => /* @__PURE__ */ i(m, {
+	type: c.DEFAULT,
+	...e
+}), _ = (e) => /* @__PURE__ */ i(m, {
+	type: c.SUCCESS,
+	...e
+}), v = (e) => /* @__PURE__ */ i(m, {
+	type: c.DANGER,
+	...e
+}), y = (e) => /* @__PURE__ */ i(m, {
+	type: c.WARNING,
+	...e
+});
+//#endregion
+export { s as CHIP_SIZES, c as CHIP_TYPES, m as Chip, v as DangerChip, g as NeutralChip, h as PrimaryChip, _ as SuccessChip, y as WarningChip, l as classNames };

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

@@ -0,0 +1,2 @@
+export * from './chip';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/chip/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}

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

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+interface ActionButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    successStyle?: boolean;
+    trackingId?: string;
+    trackingData?: Record<string, unknown>;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+export declare const ActionButton: ({ successStyle, children, trackingId, trackingData, onClick, ...props }: ActionButtonProps) => import("react/jsx-runtime").JSX.Element;
+interface CopyButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    code: string;
+    trackingId?: string;
+    trackingData?: Record<string, unknown>;
+}
+export declare const CopyButton: ({ code, ...props }: CopyButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=action_button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"action_button.d.ts","sourceRoot":"","sources":["../../../src/components/code/action_button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiE/B,UAAU,iBAAkB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAC7E,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACvC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC9D;AAED,eAAO,MAAM,YAAY,GAAI,yEAO1B,iBAAiB,4CAenB,CAAC;AAEF,UAAU,eAAgB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAC3E,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC1C;AAED,eAAO,MAAM,UAAU,GAAI,oBAAoB,eAAe,4CAY7D,CAAC"}

package/dist/components/code/action_button.js

@@ -0,0 +1,78 @@
+import { theme as e } from "../../design_system/theme.js";
+import { TextShared as t } from "../text/text_shared.js";
+import { useSharedUiDependencies as n } from "../../ui_dependency_provider.js";
+import { useCopyToClipboard as r } from "../../utils/copy_to_clipboard.js";
+import i, { css as a } from "styled-components";
+import { jsx as o } from "react/jsx-runtime";
+import { CheckIcon as s, CopyIcon as c } from "@apify/ui-icons";
+//#region src/components/code/action_button.tsx
+var l = i.button`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    border: 1px solid ${e.color.neutral.border};
+    border-radius: ${e.radius.radius6};
+
+    cursor: pointer;
+
+    background: ${e.color.neutral.backgroundMuted};
+    color: ${e.color.neutral.icon};
+    &:hover {
+        background-color: ${e.color.neutral.hover};
+    }
+
+    padding: ${e.space.space4};
+    height: 2.8rem;
+    width: 2.8rem;
+
+    svg {
+        width: 2rem;
+        height: 2rem;
+    }
+
+    ${({ $hasText: t }) => t && a`
+            width: auto;
+            padding: ${e.space.space4} ${e.space.space8};
+            p {
+                white-space: nowrap;
+            }
+        `}
+
+    ${({ $successStyle: t }) => t && a`
+            background-color: ${e.color.success.action};
+            color: ${e.color.neutral.textOnPrimary};
+            border: none;
+            :active {
+                background-color: ${e.color.success.actionActive};
+            }
+            :hover {
+                background-color: ${e.color.success.action};
+            }
+        `}
+`, u = ({ successStyle: e, children: r, trackingId: i, trackingData: a, onClick: s, ...c }) => {
+	let u = typeof r == "string", { trackClick: d } = n();
+	return /* @__PURE__ */ o(l, {
+		$successStyle: e,
+		$hasText: u,
+		onClick: (e) => {
+			d && i && d(i, a), s && s(e);
+		},
+		...c,
+		children: u ? /* @__PURE__ */ o(t, {
+			weight: "bold",
+			children: r
+		}) : r
+	});
+}, d = ({ code: e, ...t }) => {
+	let { isCopied: n, copyToClipboard: i } = r();
+	return /* @__PURE__ */ o(u, {
+		onClick: async () => i(e),
+		"data-test": "copy_to_clipboard",
+		"aria-label": "Copy to clipboard",
+		...t,
+		children: o(n ? s : c, { size: "16" })
+	});
+};
+//#endregion
+export { u as ActionButton, d as CopyButton };

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

@@ -0,0 +1,38 @@
+import { default as React } from 'react';
+import { RegularBoxProps } from '../../box';
+import { SharedTextSize } from '../../text/text_shared';
+type CodeTab = {
+    key: string;
+    label: string;
+    code: string;
+    id?: string;
+    highlightLines?: number[];
+    language?: string;
+    bashCommandsStart?: number[];
+    to?: string;
+};
+export type CodeBlockProps = RegularBoxProps & {
+    content: string | CodeTab[];
+    size?: SharedTextSize;
+    language?: string | undefined;
+    className?: string;
+    hideBashHeader?: boolean;
+    onTabChange?: (key: string, e: React.MouseEvent) => Promise<void> | void;
+    showGradient?: boolean;
+    gradientRotation?: number;
+    highlightLines?: number[];
+    showActionButton?: boolean;
+    actionButtonLabel?: string;
+    onActionButtonClick?: () => Promise<void> | void;
+    defaultTabKey?: string;
+    fullWidth?: boolean;
+    fullHeight?: boolean;
+    title?: string;
+    hideCopyButton?: boolean;
+    bashCommandsStart?: number[];
+    hideBashPromptPrefixes?: boolean;
+    hideLineNumbers?: boolean | undefined;
+};
+export declare const CodeBlock: ({ content, size, language, highlightLines, onTabChange, defaultTabKey, showGradient, hideBashHeader, showActionButton, fullWidth, actionButtonLabel, gradientRotation, hideLineNumbers, fullHeight, title, hideCopyButton, bashCommandsStart, hideBashPromptPrefixes, onActionButtonClick, ...rest }: CodeBlockProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=code_block.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"code_block.d.ts","sourceRoot":"","sources":["../../../../src/components/code/code_block/code_block.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAIjD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAM7D,KAAK,OAAO,GAAG;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AA0EF,MAAM,MAAM,cAAc,GAAG,eAAe,GAAG;IAC3C,OAAO,EAAE,MAAM,GAAG,OAAO,EAAE,CAAC;IAC5B,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IACzE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mBAAmB,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IACjD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,eAAe,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,sSAqBvB,cAAc,4CAqFhB,CAAC"}

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

@@ -0,0 +1,120 @@
+import { TextShared as e } from "../../text/text_shared.js";
+import { Link as t } from "../../link/link.js";
+import { ColorWheelGradient as n } from "../../color_wheel_gradient/color_wheel_gradient.js";
+import { ActionButton as r, CopyButton as i } from "../action_button.js";
+import { PrismSyntaxHighlighter as a } from "../prism_highlighter.js";
+import { CodeBlockWrapper as o } from "./code_block.styled.js";
+import { getBashLinePrefixes as s, getNumberLinePrefixes as c } from "./utils.js";
+import { useMemo as l, useRef as u, useState as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import m from "clsx";
+//#region src/components/code/code_block/code_block.tsx
+var h = [
+	"json",
+	"jsonp",
+	"jsonp",
+	"rss",
+	"yaml",
+	"xml",
+	"html",
+	"bash",
+	"text",
+	"dockerfile",
+	"http"
+], g = () => /* @__PURE__ */ p("div", {
+	className: "CodeBlock-HederDotsWrapper",
+	children: [
+		/* @__PURE__ */ f("div", { className: "CodeBlock-HeaderDot" }),
+		/* @__PURE__ */ f("div", { className: "CodeBlock-HeaderDot" }),
+		/* @__PURE__ */ f("div", { className: "CodeBlock-HeaderDot" })
+	]
+}), _ = ({ tabs: n, currentTab: r, showBashHeader: i, onTabChange: a, title: o }) => /* @__PURE__ */ p("div", {
+	className: "CodeBlock-Header",
+	"data-test": "code-block-header",
+	children: [
+		i && /* @__PURE__ */ f(g, {}),
+		o && /* @__PURE__ */ f(e, {
+			weight: "bold",
+			className: "CodeBlock-HeaderTitle",
+			children: o
+		}),
+		/* @__PURE__ */ f("div", {
+			className: "CodeBlock-HeaderTabsWrapper",
+			children: n?.map((n) => {
+				let i = {
+					className: m("CodeBlock-Tab", { selected: n.key === r?.key }),
+					"data-test": `code-block-tab-${n.key}`,
+					onClick: (e) => a(n, e),
+					title: n.label,
+					id: n.id ?? n.key
+				}, o = /* @__PURE__ */ f(e, {
+					weight: n.key === r?.key ? "bold" : "normal",
+					children: n.label
+				});
+				return n.to ? /* @__PURE__ */ f(t, {
+					to: n.to,
+					...i,
+					children: o
+				}, n.key) : /* @__PURE__ */ f("div", {
+					...i,
+					children: o
+				}, n.key);
+			})
+		})
+	]
+}), v = ({ content: e, size: t, language: m, highlightLines: g, onTabChange: v, defaultTabKey: y, showGradient: b, hideBashHeader: x, showActionButton: S, fullWidth: C, actionButtonLabel: w, gradientRotation: T = 340, hideLineNumbers: E, fullHeight: D, title: O, hideCopyButton: k, bashCommandsStart: A, hideBashPromptPrefixes: j, onActionButtonClick: M, ...N }) => {
+	let P = e instanceof Array, [F, I] = d(P ? e.find((e) => e.key === y) ?? e[0] : null), L = (P ? F?.code : e)?.trim() ?? "", R = m ?? F?.language, z = l(() => P ? F?.highlightLines ?? [] : g, [
+		P,
+		F,
+		g
+	]), B = R === "bash", V = !E && !h.includes(R ?? ""), H = B && !x && !P, U = P || !!O || H, W = u(null), G = async (e, t) => {
+		await v?.(e.key, t), I(e), W.current?.scrollTo(0, 0);
+	}, K = B && !j, q = F?.bashCommandsStart ?? A, J = l(() => K ? s(L, q) : V ? c(L) : {}, [
+		V,
+		K,
+		L,
+		q
+	]);
+	return /* @__PURE__ */ p(o, {
+		$hasHeader: U,
+		$gradientRotation: T,
+		$hasActionButton: S,
+		$hasTabs: P,
+		$fullWidth: C,
+		$fullHeight: D,
+		$showLineNumbers: V,
+		...N,
+		children: [
+			U && /* @__PURE__ */ f(_, {
+				tabs: P ? e : null,
+				currentTab: F,
+				onTabChange: G,
+				showBashHeader: H,
+				title: O
+			}),
+			/* @__PURE__ */ f(a, {
+				code: L,
+				linePrefixes: J,
+				highlightLines: z,
+				language: R,
+				size: t,
+				ref: W,
+				isSingleLine: !1
+			}),
+			/* @__PURE__ */ p("div", {
+				className: "CodeBlock-TopRightActionsWrapper",
+				children: [S && /* @__PURE__ */ f(r, {
+					successStyle: !0,
+					onClick: M,
+					children: w ?? "Run on Apify"
+				}), !k && /* @__PURE__ */ f(i, { code: L })]
+			}),
+			b && /* @__PURE__ */ f(n, {
+				className: "CodeBlock-Gradient",
+				blurSize: 69
+			})
+		]
+	});
+};
+//#endregion
+export { v as 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"}