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

package/dist/components/card_container/card_container.js

@@ -0,0 +1,67 @@
+import { theme } from "../../design_system/theme.js";
+import { Box } from "../box/box.js";
+import styled from "styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/card_container/card_container.tsx
+var cardContainerClassNames = {
+	CONTENT: "CardContainer-Content",
+	HEADER: "CardContainer-Header"
+};
+var HEADER_PLACEMENT = {
+	TOP: "TOP",
+	BOTTOM: "BOTTOM"
+};
+var getContentPadding = (contentPadding) => {
+	if (contentPadding === "none") return 0;
+	if (contentPadding) return theme.space[contentPadding];
+	return theme.space.space16;
+};
+var Wrapper = styled(Box)`
+    background-color: ${theme.color.neutral.backgroundSubtle};
+    border-radius: ${theme.radius.radius12};
+
+    padding: ${theme.space.space2};
+
+    display: flex;
+    flex-direction: ${({ $headerPlacement }) => $headerPlacement === HEADER_PLACEMENT.TOP ? "column" : "column-reverse"};
+
+    .${cardContainerClassNames.CONTENT} {
+        /* 11px inner radius to match Figma (outer 12px - 1px visual offset) */
+        border-radius: 1.1rem;
+        background-color: ${({ $contentPadding }) => $contentPadding === "none" ? "transparent" : theme.color.neutral.background};
+        ${({ $contentPadding }) => $contentPadding === "none" && "overflow: hidden;"}
+
+        padding: ${({ $contentPadding }) => getContentPadding($contentPadding)};
+        flex-grow: 1;
+    }
+
+    .${cardContainerClassNames.HEADER} {
+        padding: ${theme.space.space4} ${theme.space.space8};
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+`;
+var CardContainerHeading = styled.span`
+    ${theme.typography.shared.desktop.bodyMMedium}
+`;
+/**
+* CardContainer visually wraps it's children and shows a simple header.
+*
+* The header can be customized.
+*/
+var CardContainer = ({ children, header, headerPlacement = HEADER_PLACEMENT.TOP, contentPadding, ...rest }) => /* @__PURE__ */ jsxs(Wrapper, {
+	...rest,
+	$headerPlacement: headerPlacement,
+	$contentPadding: contentPadding,
+	children: [header != null && /* @__PURE__ */ jsx("div", {
+		className: cardContainerClassNames.HEADER,
+		children: typeof header === "string" ? /* @__PURE__ */ jsx(CardContainerHeading, { children: header }) : header
+	}), /* @__PURE__ */ jsx("div", {
+		className: cardContainerClassNames.CONTENT,
+		children
+	})]
+});
+CardContainer.Heading = CardContainerHeading;
+//#endregion
+export { CardContainer, cardContainerClassNames };

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

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

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

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

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

@@ -0,0 +1,18 @@
+import { ComponentPropsWithoutRef, FC } from 'react';
+import * as CheckboxPrimitiveReact from '@radix-ui/react-checkbox';
+type CheckboxBaseProps = Omit<ComponentPropsWithoutRef<typeof CheckboxPrimitiveReact.Root>, 'checked' | 'onCheckedChange' | 'value'> & {
+    setValue: (checked: boolean) => void;
+    error?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+};
+export type CheckboxPrimitiveProps = CheckboxBaseProps & {
+    value: boolean;
+};
+export type IndeterminateCheckboxProps = CheckboxBaseProps & {
+    value: boolean | null;
+};
+export declare const CheckboxPrimitive: FC<CheckboxPrimitiveProps>;
+export declare const IndeterminateCheckbox: FC<IndeterminateCheckboxProps>;
+export {};
+//# sourceMappingURL=checkbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,sBAAsB,MAAM,0BAA0B,CAAC;AAEnE,OAAO,EAAE,KAAK,wBAAwB,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AA6B/D,KAAK,iBAAiB,GAAG,IAAI,CACzB,wBAAwB,CAAC,OAAO,sBAAsB,CAAC,IAAI,CAAC,EAC5D,SAAS,GAAG,iBAAiB,GAAG,OAAO,CAC1C,GAAG;IACA,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,iBAAiB,GAAG;IAAE,KAAK,EAAE,OAAO,CAAA;CAAE,CAAC;AAC5E,MAAM,MAAM,0BAA0B,GAAG,iBAAiB,GAAG;IAAE,KAAK,EAAE,OAAO,GAAG,IAAI,CAAA;CAAE,CAAC;AAuBvF,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CAMxD,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,EAAE,CAAC,0BAA0B,CAYhE,CAAC"}

package/dist/components/checkbox/checkbox.js

@@ -0,0 +1,45 @@
+import { theme } from "../../design_system/theme.js";
+import { checkboxStyle } from "./checkbox.style.js";
+import styled from "styled-components";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import clsx$1 from "clsx";
+import { CheckIcon, MinusIcon } from "@apify/ui-icons";
+import * as CheckboxPrimitiveReact from "@radix-ui/react-checkbox";
+//#region src/components/checkbox/checkbox.tsx
+var StyledCheckbox = styled(CheckboxPrimitiveReact.Root)`
+    all: unset;
+    ${checkboxStyle};
+`;
+var StyledIndicator = styled(CheckboxPrimitiveReact.Indicator)`
+    color: ${theme.color.neutral.textOnPrimary};
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .disabled & {
+        color: ${theme.color.neutral.textMuted};
+    }
+`;
+var IndeterminateIndicator = styled(StyledIndicator)`
+    color: ${theme.color.neutral.textOnPrimary};
+`;
+var InternalCheckbox = ({ children, value, setValue, error, disabled, readOnly, className, ...rest }) => /* @__PURE__ */ jsx(StyledCheckbox, {
+	...rest,
+	checked: value == null ? "indeterminate" : value,
+	onCheckedChange: setValue,
+	disabled: disabled || readOnly,
+	className: clsx$1(className, error && "error", (disabled || readOnly) && "disabled"),
+	children
+});
+var CheckboxPrimitive = (props) => /* @__PURE__ */ jsx(InternalCheckbox, {
+	...props,
+	children: /* @__PURE__ */ jsx(StyledIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { size: "12" }) })
+});
+var IndeterminateCheckbox = (props) => /* @__PURE__ */ jsx(InternalCheckbox, {
+	...props,
+	children: props.value == null ? /* @__PURE__ */ jsx(IndeterminateIndicator, { children: /* @__PURE__ */ jsx(MinusIcon, { size: "12" }) }) : /* @__PURE__ */ jsx(StyledIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { size: "12" }) })
+});
+//#endregion
+export { CheckboxPrimitive, IndeterminateCheckbox };

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

@@ -0,0 +1,2 @@
+export declare const checkboxStyle: import('styled-components').RuleSet<object>;
+//# sourceMappingURL=checkbox.style.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.style.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.style.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,aAAa,6CAwDzB,CAAC"}

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

@@ -0,0 +1,62 @@
+import { theme } from "../../design_system/theme.js";
+import { css } from "styled-components";
+//#region src/components/checkbox/checkbox.style.ts
+var checkboxStyle = css`
+    overflow: hidden;
+    border: 1px solid ${theme.color.neutral.border};
+    border-radius: ${theme.radius.radius4};
+    background-color: ${theme.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: ${theme.color.primary.action};
+        cursor: pointer;
+    }
+
+    &.disabled {
+        background-color: ${theme.color.neutral.textDisabled};
+        border-color: ${theme.color.neutral.border};
+    }
+
+    &.error {
+        border-color: ${theme.color.danger.text};
+    }
+
+    &[data-state='indeterminate'],
+    &[data-state='checked'] {
+        background-color: ${theme.color.primary.action};
+        border-color: ${theme.color.primary.action};
+
+        &:hover {
+            background-color: ${theme.color.primary.actionHover};
+            border-color: ${theme.color.primary.actionHover};
+        }
+
+        &.error {
+            background-color: ${theme.color.danger.action};
+            border-color: ${theme.color.danger.action};
+
+            &:hover {
+                background-color: ${theme.color.danger.actionHover};
+                border-color: ${theme.color.danger.actionHover};
+            }
+        }
+
+        &.disabled {
+            background-color: ${theme.color.neutral.textDisabled};
+            border-color: ${theme.color.neutral.border};
+        }
+    }
+`;
+//#endregion
+export { 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,144 @@
+import { theme } from "../../design_system/theme.js";
+import styled, { css } from "styled-components";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx$1 from "clsx";
+//#region src/components/chip/chip.tsx
+var CHIP_SIZES = {
+	EXTRA_SMALL: "XS",
+	SMALL: "S",
+	MEDIUM: "M",
+	LARGE: "L"
+};
+var CHIP_TYPES = {
+	DEFAULT: "DEFAULT",
+	PRIMARY: "PRIMARY",
+	SUCCESS: "SUCCESS",
+	WARNING: "WARNING",
+	DANGER: "DANGER"
+};
+var classNames = { BODY: "Chip-body" };
+var chipSizeStyle = {
+	[CHIP_SIZES.EXTRA_SMALL]: css`
+        font-size: 12px;
+        line-height: 16px;
+        padding: 0 4px;
+        border-radius: 6px;
+    `,
+	[CHIP_SIZES.SMALL]: css`
+        font-size: 12px;
+        line-height: 16px;
+        padding: 2px 4px;
+        border-radius: 6px;
+    `,
+	[CHIP_SIZES.MEDIUM]: css`
+        font-size: 14px;
+        line-height: 20px;
+        padding: 2px 8px;
+        border-radius: 100px;
+    `,
+	[CHIP_SIZES.LARGE]: css`
+        /* 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;
+    `
+};
+var chipTypeStyle = {
+	[CHIP_TYPES.DEFAULT]: css`
+        color: ${theme.color.neutral.text};
+        background: ${theme.color.neutral.chipBackground};
+    `,
+	[CHIP_TYPES.PRIMARY]: css`
+        color: ${theme.color.primary.chipText};
+        background: ${theme.color.primary.chipBackground};
+    `,
+	[CHIP_TYPES.SUCCESS]: css`
+        color: ${theme.color.success.chipText};
+        background: ${theme.color.success.chipBackground};
+    `,
+	[CHIP_TYPES.WARNING]: css`
+        color: ${theme.color.warning.chipText};
+        background: ${theme.color.warning.chipBackground};
+    `,
+	[CHIP_TYPES.DANGER]: css`
+        color: ${theme.color.danger.chipText};
+        background: ${theme.color.danger.chipBackground};
+    `
+};
+var chipTypeHoverStyle = {
+	[CHIP_TYPES.DEFAULT]: css`
+        background: ${theme.color.neutral.chipBackgroundHover};
+    `,
+	[CHIP_TYPES.PRIMARY]: css`
+        background: ${theme.color.primary.chipBackgroundHover};
+    `,
+	[CHIP_TYPES.SUCCESS]: css`
+        background: ${theme.color.success.chipBackgroundHover};
+    `,
+	[CHIP_TYPES.WARNING]: css`
+        background: ${theme.color.warning.chipBackgroundHover};
+    `,
+	[CHIP_TYPES.DANGER]: css`
+        background: ${theme.color.danger.chipBackgroundHover};
+    `
+};
+var StyledChip = styled.span`
+    ${({ size }) => chipSizeStyle[size]};
+    ${({ type }) => chipTypeStyle[type]};
+    ${({ type, clickable }) => clickable && css`
+            &:hover {
+                ${chipTypeHoverStyle[type]};
+            }
+        `};
+    /* 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 }) => clickable ? "pointer" : "default"};
+    gap: ${theme.space.space4};
+`;
+/**
+* Component for displaying status and for labelling other components.
+* @deprecated Use Tag or Badge
+*/
+var Chip = forwardRef(({ type = CHIP_TYPES.DEFAULT, size = CHIP_SIZES.MEDIUM, clickable = false, icon, children, className, ...passThroughProps }, ref) => {
+	return /* @__PURE__ */ jsxs(StyledChip, {
+		ref,
+		...passThroughProps,
+		type,
+		size,
+		clickable,
+		className: clsx$1(className, classNames.BODY),
+		children: [children, icon]
+	});
+});
+Chip.displayName = "Chip";
+var PrimaryChip = (props) => /* @__PURE__ */ jsx(Chip, {
+	type: CHIP_TYPES.PRIMARY,
+	...props
+});
+var NeutralChip = (props) => /* @__PURE__ */ jsx(Chip, {
+	type: CHIP_TYPES.DEFAULT,
+	...props
+});
+var SuccessChip = (props) => /* @__PURE__ */ jsx(Chip, {
+	type: CHIP_TYPES.SUCCESS,
+	...props
+});
+var DangerChip = (props) => /* @__PURE__ */ jsx(Chip, {
+	type: CHIP_TYPES.DANGER,
+	...props
+});
+var WarningChip = (props) => /* @__PURE__ */ jsx(Chip, {
+	type: CHIP_TYPES.WARNING,
+	...props
+});
+//#endregion
+export { CHIP_SIZES, CHIP_TYPES, Chip, DangerChip, NeutralChip, PrimaryChip, SuccessChip, WarningChip, 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,83 @@
+import { theme } from "../../design_system/theme.js";
+import { TextShared } from "../text/text_shared.js";
+import { useSharedUiDependencies } from "../../ui_dependency_provider.js";
+import { useCopyToClipboard } from "../../utils/copy_to_clipboard.js";
+import styled, { css } from "styled-components";
+import { jsx } from "react/jsx-runtime";
+import { CheckIcon, CopyIcon } from "@apify/ui-icons";
+//#region src/components/code/action_button.tsx
+var StyledButton = styled.button`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    border: 1px solid ${theme.color.neutral.border};
+    border-radius: ${theme.radius.radius6};
+
+    cursor: pointer;
+
+    background: ${theme.color.neutral.backgroundMuted};
+    color: ${theme.color.neutral.icon};
+    &:hover {
+        background-color: ${theme.color.neutral.hover};
+    }
+
+    padding: ${theme.space.space4};
+    height: 2.8rem;
+    width: 2.8rem;
+
+    svg {
+        width: 2rem;
+        height: 2rem;
+    }
+
+    ${({ $hasText }) => $hasText && css`
+            width: auto;
+            padding: ${theme.space.space4} ${theme.space.space8};
+            p {
+                white-space: nowrap;
+            }
+        `}
+
+    ${({ $successStyle }) => $successStyle && css`
+            background-color: ${theme.color.success.action};
+            color: ${theme.color.neutral.textOnPrimary};
+            border: none;
+            :active {
+                background-color: ${theme.color.success.actionActive};
+            }
+            :hover {
+                background-color: ${theme.color.success.action};
+            }
+        `}
+`;
+var ActionButton = ({ successStyle, children, trackingId, trackingData, onClick, ...props }) => {
+	const hasText = typeof children === "string";
+	const { trackClick } = useSharedUiDependencies();
+	const trackedOnClick = (e) => {
+		if (trackClick && trackingId) trackClick(trackingId, trackingData);
+		if (onClick) onClick(e);
+	};
+	return /* @__PURE__ */ jsx(StyledButton, {
+		$successStyle: successStyle,
+		$hasText: hasText,
+		onClick: trackedOnClick,
+		...props,
+		children: hasText ? /* @__PURE__ */ jsx(TextShared, {
+			weight: "bold",
+			children
+		}) : children
+	});
+};
+var CopyButton = ({ code, ...props }) => {
+	const { isCopied, copyToClipboard } = useCopyToClipboard();
+	return /* @__PURE__ */ jsx(ActionButton, {
+		onClick: async () => copyToClipboard(code),
+		"data-test": "copy_to_clipboard",
+		"aria-label": "Copy to clipboard",
+		...props,
+		children: isCopied ? /* @__PURE__ */ jsx(CheckIcon, { size: "16" }) : /* @__PURE__ */ jsx(CopyIcon, { size: "16" })
+	});
+};
+//#endregion
+export { ActionButton, 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"}