@apify/ui-library 0.51.6-featurepublishuilibrary-0a4729.38266

package/dist/src/components/button.jsx

@@ -0,0 +1,193 @@
+import React, { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { ExternalLink16 } from '@apify/icons';
+import { theme } from '../design_system/theme';
+import { useSharedUiDependencies } from '../ui_dependency_provider';
+import { Box } from './box';
+import { Link, isUrlExternal } from './link';
+;
+;
+// typeguard to distinguish between the two options for props
+function isAnchorButton(props) {
+    return props.to !== undefined;
+}
+const BUTTON_COLOR_VARIANTS_CSS = {
+    primary: {
+        default: {
+            textColor: theme.color.neutral.backgroundSubtle,
+            backgroundColor: theme.color.primary.action,
+            borderColor: theme.color.primary.action,
+            hoverColor: theme.color.primary.actionHover,
+            activeColor: theme.color.primary.actionActive,
+        },
+        success: {
+            textColor: theme.color.neutral.backgroundSubtle,
+            backgroundColor: theme.color.success.action,
+            borderColor: theme.color.success.action,
+            hoverColor: theme.color.success.actionHover,
+            activeColor: theme.color.success.actionActive,
+        },
+        danger: {
+            textColor: theme.color.neutral.backgroundSubtle,
+            backgroundColor: theme.color.danger.action,
+            borderColor: theme.color.danger.action,
+            hoverColor: theme.color.danger.actionHover,
+            activeColor: theme.color.danger.actionActive,
+        },
+    },
+    secondary: {
+        default: {
+            textColor: theme.color.neutral.text,
+            backgroundColor: theme.color.neutral.backgroundMuted,
+            borderColor: theme.color.neutral.border,
+            hoverColor: theme.color.neutral.actionSecondaryHover,
+            activeColor: theme.color.neutral.actionSecondaryActive,
+            actionBorderColor: theme.color.neutral.border,
+        },
+        success: {
+            textColor: theme.color.success.text,
+            backgroundColor: theme.color.neutral.backgroundMuted,
+            borderColor: theme.color.neutral.border,
+            hoverColor: theme.color.success.actionHover,
+            activeColor: theme.color.success.actionActive,
+            actionTextColor: theme.color.neutral.background,
+        },
+        danger: {
+            textColor: theme.color.danger.text,
+            backgroundColor: theme.color.neutral.backgroundMuted,
+            borderColor: theme.color.neutral.border,
+            hoverColor: theme.color.danger.actionHover,
+            activeColor: theme.color.danger.actionActive,
+            actionTextColor: theme.color.neutral.background,
+        },
+    },
+    text: {
+        default: {
+            textColor: theme.color.neutral.text,
+            backgroundColor: 'transparent',
+            borderColor: 'transparent',
+            // TODO: Not sure about these
+            hoverColor: theme.color.neutral.hover,
+            activeColor: theme.color.neutral.actionSecondaryActive,
+        },
+        success: {
+            textColor: theme.color.success.text,
+            backgroundColor: 'transparent',
+            borderColor: 'transparent',
+            hoverColor: theme.color.success.backgroundSubtleHover,
+            activeColor: theme.color.success.backgroundSubtleActive,
+        },
+        danger: {
+            textColor: theme.color.danger.text,
+            backgroundColor: 'transparent',
+            borderColor: 'transparent',
+            hoverColor: theme.color.danger.backgroundSubtleHover,
+            activeColor: theme.color.danger.backgroundSubtleActive,
+        },
+    },
+};
+export const BUTTON_SIZE_VARIANTS_CSS = {
+    medium: {
+        fontSize: 14,
+        height: 36,
+        horizontalPadding: 12,
+    },
+    small: {
+        fontSize: 14,
+        height: 28,
+        horizontalPadding: 8,
+    },
+};
+export const getButtonColorStyles = (variant = 'primary', color = 'default') => {
+    const { backgroundColor, borderColor, textColor, actionTextColor, activeColor, hoverColor, actionBorderColor, } = BUTTON_COLOR_VARIANTS_CSS[variant][color];
+    return css `
+        color: ${textColor};
+        background-color: ${backgroundColor};
+        border-color: ${borderColor};
+
+        &:hover {
+            color: ${actionTextColor || textColor};
+            background-color: ${hoverColor};
+            border-color: ${actionBorderColor || hoverColor};
+        }
+
+        &:active {
+            color: ${actionTextColor || textColor};
+            background-color: ${activeColor};
+            border-color: ${actionBorderColor || activeColor};
+        }
+
+        &:disabled {
+            color: ${theme.color.neutral.textDisabled};
+            background-color: ${theme.color.neutral.disabled};
+            border-color: ${variant === 'text' ? 'transparent' : theme.color.neutral.disabled};
+
+            cursor: default;
+        }
+    `;
+};
+export const getButtonSizeStyles = (size = 'medium') => {
+    const { fontSize, height, horizontalPadding, } = BUTTON_SIZE_VARIANTS_CSS[size];
+    return css `
+        height: ${height}px;
+        font-size: ${fontSize}px;
+        /* We just want to ensure padding on the sides. Height is set the the hard way for simplicity */
+        padding: 0 ${horizontalPadding}px;
+    `;
+};
+const StyledButton = styled(Box) `
+    /* Basic positioning */
+    display: inline-flex;
+    align-items: center;
+    /* NOT sure about this. It needs to be set when we want 100% width button */
+    /* Maybe we can add block property */
+    justify-content: center;
+    gap: ${theme.space.space8};
+
+    /* Basic styles */
+    font-weight: 500;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: border-color ${theme.transition.fastEaseOut}, background-color ${theme.transition.fastEaseOut};
+
+    /* Border is always defined, but it can be set to transparent */
+    border-style: solid;
+    border-width: 1px;
+    border-radius: ${theme.radius.radius6};
+    border-color: transparent;
+
+    /* Colors */
+    ${(props) => getButtonColorStyles(props.$variant, props.$color)}
+
+    /* Paddings & font size */
+    ${(props) => getButtonSizeStyles(props.$size)}
+`;
+export const Button = forwardRef((props, ref) => {
+    const { as, children, size, color, variant, LeftIcon, RightIcon, onClick, trackingId, trackingData, ...rest } = props;
+    const { trackClick, windowLocationHost, } = useSharedUiDependencies();
+    const trackedOnClick = (e) => {
+        if (trackClick && trackingId)
+            trackClick(trackingId, trackingData);
+        if (onClick)
+            onClick(e);
+    };
+    if (isAnchorButton(props)) {
+        const isExternal = isUrlExternal(props.to, windowLocationHost);
+        const EffectiveRightIcon = (isExternal && !props.hideExternalIcon) ? ExternalLink16 : RightIcon;
+        return (<StyledButton $size={size} $color={color} $variant={variant} 
+        // If anchor is undefined, we just render it as a regular button
+        forwardedAs={props.disabled ? 'button' : Link} ref={ref} onClick={trackedOnClick} to={props.to} {...rest} 
+        // If we want to show external icon, we use button's slot for icon
+        hideExternalIcon={true}>
+                {LeftIcon && <LeftIcon />}
+                {children}
+                {EffectiveRightIcon && <EffectiveRightIcon />}
+            </StyledButton>);
+    }
+    return (<StyledButton $size={size} $color={color} $variant={variant} forwardedAs={as || 'button'} ref={ref} onClick={trackedOnClick} type='button' {...rest}>
+            {LeftIcon && <LeftIcon />}
+            {children}
+            {RightIcon && <RightIcon />}
+        </StyledButton>);
+});
+//# sourceMappingURL=button.jsx.map

package/dist/src/components/button.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.jsx","sourceRoot":"","sources":["../../../src/components/button.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,52 @@
+import type { FC } from 'react';
+import React from 'react';
+import type { ValueOf } from '@apify-packages/types';
+import type { RegularBoxProps } from './box';
+declare const CHIP_SIZES: {
+    readonly SMALL: "S";
+    readonly MEDIUM: "M";
+    readonly LARGE: "L";
+};
+type CHIP_SIZES = ValueOf<typeof CHIP_SIZES>;
+declare const CHIP_TYPES: {
+    readonly DEFAULT: "DEFAULT";
+    readonly PRIMARY: "PRIMARY";
+    readonly SUCCESS: "SUCCESS";
+    readonly WARNING: "WARNING";
+    readonly DANGER: "DANGER";
+};
+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.
+ */
+export declare const Chip: React.ForwardRefExoticComponent<{
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    onClick?: (e: React.MouseEvent) => void;
+    id?: 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/src/components/chip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.d.ts","sourceRoot":"","sources":["../../../src/components/chip.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAGrD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAE7C,QAAA,MAAM,UAAU;;;;CAIN,CAAC;AACX,KAAK,UAAU,GAAG,OAAO,CAAC,OAAO,UAAU,CAAC,CAAC;AAE7C,QAAA,MAAM,UAAU;;;;;;CAMN,CAAC;AACX,KAAK,UAAU,GAAG,OAAO,CAAC,OAAO,UAAU,CAAC,CAAC;AAE7C,eAAO,MAAM,UAAU;;CAEtB,CAAC;AA6DF,MAAM,MAAM,SAAS,GAAG,eAAe,GAAG;IACtC,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,SAAS,CAAC,EAAE,OAAO,CAAA;CACtB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,IAAI;eAnET,MAAC,SAAS;;YAEV,MAAE,aAAa;kBACR,MAAQ,UACnB;;;SAOc,MAAO,WAClB;;WA8CI,UAAU;WACV,UAAU;WACV,KAAK,CAAC,SAAS;gBACV,OAAO;iCAiBrB,CAAC;AAIH,KAAK,iBAAiB,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,CAAA;AAEhD,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/src/components/chip.jsx

@@ -0,0 +1,89 @@
+import clsx from 'clsx';
+import React, { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { theme } from '../design_system/theme';
+const CHIP_SIZES = {
+    SMALL: 'S',
+    MEDIUM: 'M',
+    LARGE: 'L',
+};
+const CHIP_TYPES = {
+    DEFAULT: 'DEFAULT',
+    PRIMARY: 'PRIMARY',
+    SUCCESS: 'SUCCESS',
+    WARNING: 'WARNING',
+    DANGER: 'DANGER',
+};
+export const classNames = {
+    BODY: 'Chip-body',
+};
+const chipSizeStyle = {
+    [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 `
+        font-size: 16px;
+        line-height: 20px;
+        padding: 2px 8px;
+        border-radius: 100px;
+    `,
+};
+const 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};
+    `,
+};
+const StyledChip = styled.span `
+    ${({ size }) => chipSizeStyle[size]};
+    ${({ type }) => chipTypeStyle[type]};
+    /* Static styles */
+    width: fit-content;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    cursor: ${({ clickable }) => (clickable ? 'pointer' : 'default')};
+    gap: ${theme.space.space4};
+`;
+/**
+ * Component for displaying status and for labelling other components.
+ */
+export const Chip = forwardRef(({ type = CHIP_TYPES.DEFAULT, size = CHIP_SIZES.MEDIUM, icon, children, className, ...passThroughProps }, ref) => {
+    const otherProps = { ...passThroughProps, type, size, className: clsx(className, classNames.BODY) };
+    return <StyledChip ref={ref} {...otherProps}>{children}{icon}</StyledChip>;
+});
+Chip.displayName = 'Chip';
+export const PrimaryChip = (props) => <Chip type={CHIP_TYPES.PRIMARY} {...props}/>;
+export const NeutralChip = (props) => <Chip type={CHIP_TYPES.DEFAULT} {...props}/>;
+export const SuccessChip = (props) => <Chip type={CHIP_TYPES.SUCCESS} {...props}/>;
+export const DangerChip = (props) => <Chip type={CHIP_TYPES.DANGER} {...props}/>;
+export const WarningChip = (props) => <Chip type={CHIP_TYPES.WARNING} {...props}/>;
+//# sourceMappingURL=chip.jsx.map

package/dist/src/components/chip.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.jsx","sourceRoot":"","sources":["../../../src/components/chip.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAIhD,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAG/C,MAAM,UAAU,GAAG;IACf,KAAK,EAAE,GAAG;IACV,MAAM,EAAE,GAAG;IACX,KAAK,EAAE,GAAG;CACJ,CAAC;AAGX,MAAM,UAAU,GAAG;IACf,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;CACV,CAAC;AAGX,MAAM,CAAC,MAAM,UAAU,GAAG;IACtB,IAAI,EAAE,WAAW;CACpB,CAAC;AAEF,MAAM,aAAa,GAAG;IAClB,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,GAAG,CAAA;;;;;KAKtB;IACD,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE,GAAG,CAAA;;;;;KAKvB;IACD,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,GAAG,CAAA;;;;;KAKtB;CACkC,CAAC;AAExC,MAAM,aAAa,GAAG;IAClB,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,GAAG,CAAA;iBACZ,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI;sBACnB,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc;KACnD;IACD,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,GAAG,CAAA;iBACZ,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ;sBACvB,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc;KACnD;IACD,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,GAAG,CAAA;iBACZ,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ;sBACvB,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc;KACnD;IACD,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,GAAG,CAAA;iBACZ,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ;sBACvB,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc;KACnD;IACD,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE,GAAG,CAAA;iBACX,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ;sBACtB,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,cAAc;KAClD;CACkC,CAAC;AAExC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAA0D;MAClF,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC;MACjC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC;;;;;;;;;cASzB,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;WACzD,KAAK,CAAC,KAAK,CAAC,MAAM;CAC5B,CAAC;AASF;;GAEG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAAC,CAAC,EAC5B,IAAI,GAAG,UAAU,CAAC,OAAO,EACzB,IAAI,GAAG,UAAU,CAAC,MAAM,EACxB,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,GAAG,gBAAgB,EACX,EAAE,GAAG,EAAE,EAAE;IACjB,MAAM,UAAU,GAAG,EAAE,GAAG,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;IAEpG,OAAO,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,CAAC;AAC/E,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;AAI1B,MAAM,CAAC,MAAM,WAAW,GAA0B,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;AAC3G,MAAM,CAAC,MAAM,WAAW,GAA0B,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;AAC3G,MAAM,CAAC,MAAM,WAAW,GAA0B,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;AAC3G,MAAM,CAAC,MAAM,UAAU,GAA0B,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;AACzG,MAAM,CAAC,MAAM,WAAW,GAA0B,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC"}

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

@@ -0,0 +1,11 @@
+import React from 'react';
+interface ActionButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    successStyle?: boolean;
+}
+export declare const ActionButton: ({ successStyle, children, ...props }: ActionButtonProps) => React.JSX.Element;
+interface CopyButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    code: string;
+}
+export declare const CopyButton: ({ code, ...props }: CopyButtonProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=action_button.d.ts.map

package/dist/src/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,MAAM,OAAO,CAAC;AA8D1B,UAAU,iBAAkB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAC7E,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,eAAO,MAAM,YAAY,yCAItB,iBAAiB,sBAYnB,CAAC;AAEF,UAAU,eAAgB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAC3E,IAAI,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,UAAU,uBAAwB,eAAe,sBAO7D,CAAC"}

package/dist/src/components/code/action_button.jsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { Copy16, Check16 } from '@apify/icons';
+import { theme } from '../../design_system/theme';
+import { useCopyToClipboard } from '../../utils';
+import { Text } from '../text';
+;
+const 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};
+            }
+        `}
+`;
+export const ActionButton = ({ successStyle, children, ...props }) => {
+    const hasText = typeof children === 'string';
+    return (<StyledButton $successStyle={successStyle} $hasText={hasText} {...props}>
+            {hasText ? <Text weight="bold">{children}</Text> : children}
+        </StyledButton>);
+};
+export const CopyButton = ({ code, ...props }) => {
+    const [isCopied, handleClick] = useCopyToClipboard({ text: code });
+    return (<ActionButton onClick={handleClick} data-test='copy_to_clipboard' {...props}>
+            {isCopied ? <Check16 viewBox="0 0 16 16"/> : <Copy16 viewBox="0 0 16 16"/>}
+        </ActionButton>);
+};
+//# sourceMappingURL=action_button.jsx.map

package/dist/src/components/code/action_button.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"action_button.jsx","sourceRoot":"","sources":["../../../../src/components/code/action_button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAE/C,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAClD,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAK9B,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAmB;;;;;wBAK7B,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM;qBAC7B,KAAK,CAAC,MAAM,CAAC,OAAO;;;;kBAIvB,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,eAAe;aACxC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI;;4BAET,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK;;;eAGtC,KAAK,CAAC,KAAK,CAAC,MAAM;;;;;;;;;MAS3B,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ;OACrB,GAAG,CAAA;;uBAES,KAAK,CAAC,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM;;;;SAItD;;MAEH,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE,CAAC,aAAa;OAC/B,GAAG,CAAA;gCACkB,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM;qBACrC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,aAAa;;;oCAGlB,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY;;;oCAGhC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM;;SAErD;CACR,CAAC;AAMF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EACzB,YAAY,EACZ,QAAQ,EACR,GAAG,KAAK,EACQ,EAAE,EAAE;IACpB,MAAM,OAAO,GAAG,OAAO,QAAQ,KAAK,QAAQ,CAAC;IAE7C,OAAO,CACH,CAAC,YAAY,CACT,aAAa,CAAC,CAAC,YAAY,CAAC,CAC5B,QAAQ,CAAC,CAAC,OAAO,CAAC,CAClB,IAAI,KAAK,CAAC,CAEV;YAAA,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,QAAQ,CAC/D;QAAA,EAAE,YAAY,CAAC,CAClB,CAAC;AACN,CAAC,CAAC;AAMF,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAAE,IAAI,EAAE,GAAG,KAAK,EAAmB,EAAE,EAAE;IAC9D,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,kBAAkB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;IACnE,OAAO,CACH,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,CAAC,SAAS,CAAC,mBAAmB,CAAC,IAAI,KAAK,CAAC,CACxE;YAAA,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,EAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,WAAW,EAAG,CAChF;QAAA,EAAE,YAAY,CAAC,CAClB,CAAC;AACN,CAAC,CAAC"}

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import type { RegularBoxProps } from '../../box';
+import type { SharedTextSize } from '../../text/text_shared';
+interface CodeTab {
+    key: string;
+    label: string;
+    code: string;
+    id?: string;
+    highlightLines?: number[];
+    language?: string;
+    bashCommandsStart?: number[];
+    to?: string;
+}
+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 function CodeBlock({ content, size, language, highlightLines, onTabChange, defaultTabKey, showGradient, hideBashHeader, showActionButton, fullWidth, actionButtonLabel, gradientRotation, hideLineNumbers, fullHeight, title, hideCopyButton, bashCommandsStart, hideBashPromptPrefixes, onActionButtonClick, ...rest }: CodeBlockProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=code_block.d.ts.map

package/dist/src/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,KAAiD,MAAM,OAAO,CAAC;AAEtE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAIjD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAyE7D,UAAU,OAAO;IACb,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;AAED,KAAK,cAAc,GAAG,eAAe,GAAG;IACpC,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,CAAA;AAED,wBAAgB,SAAS,CAAC,EACtB,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,cAAc,EACd,WAAW,EACX,aAAa,EACb,YAAY,EACZ,cAAc,EACd,gBAAgB,EAChB,SAAS,EACT,iBAAiB,EACjB,gBAAsB,EACtB,eAAe,EACf,UAAU,EACV,KAAK,EACL,cAAc,EACd,iBAAiB,EACjB,sBAAsB,EACtB,mBAAmB,EACnB,GAAG,IAAI,EACV,EAAE,cAAc,qBAmGhB"}

package/dist/src/components/code/code_block/code_block.jsx

@@ -0,0 +1,99 @@
+import clsx from 'clsx';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { ColorWheelGradient } from '../../color_wheel_gradient';
+import { Link } from '../../link';
+import { Text } from '../../text';
+import { ActionButton, CopyButton } from '../action_button';
+import SyntaxHighlighter from '../syntax_highlighter';
+import { CodeBlockWrapper } from './code_block.styled';
+import { mapPrefixToBashLine } from './utils';
+function HeaderDots() {
+    return (<div className="CodeBlock-HederDotsWrapper">
+            <div className="CodeBlock-HeaderDot"/>
+            <div className="CodeBlock-HeaderDot"/>
+            <div className="CodeBlock-HeaderDot"/>
+        </div>);
+}
+function Header({ tabs, currentTab, showBashHeader, onTabChange, title, }) {
+    return (<div className="CodeBlock-Header">
+            {showBashHeader && <HeaderDots />}
+            {title && (<Text weight="bold" className="CodeBlock-HeaderTitle">
+                    {title}
+                </Text>)}
+            <div className="CodeBlock-HeaderTabsWrapper">
+                {tabs?.map((tab) => {
+            const selected = tab.key === currentTab?.key;
+            const props = {
+                className: clsx('CodeBlock-Tab', { selected }),
+                onClick: (e) => onTabChange(tab, e),
+                title: tab.label,
+                id: tab.id ?? tab.key,
+            };
+            const label = <Text weight={tab.key === currentTab?.key ? 'bold' : 'normal'}>
+                        {tab.label}
+                    </Text>;
+            if (tab.to) {
+                return (<Link key={tab.key} to={tab.to} {...props}>
+                                {label}
+                            </Link>);
+            }
+            return (<div key={tab.key} {...props}>
+                            {label}
+                        </div>);
+        })}
+            </div>
+        </div>);
+}
+const LANGUAGES_WITHOUT_LINE_NUMBERS = ['json', 'jsonp', 'jsonp', 'rss', 'yaml', 'xml', 'html', 'bash', 'text', 'dockerfile', 'http'];
+export function 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 defaultTab = isMultiTab
+        ? content.find((tab) => tab.key === defaultTabKey) ?? content[0]
+        : null;
+    const [currentTab, setCurrentTab] = useState(defaultTab);
+    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 showBashPrompt = isBash && !hideBashPromptPrefixes;
+    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 currentBashLinesPrefixes = useMemo(() => {
+        if (!showBashPrompt)
+            return [];
+        return mapPrefixToBashLine(currentCode, currentTab?.bashCommandsStart ?? bashCommandsStart);
+    }, [currentCode, bashCommandsStart, showBashPrompt, currentTab]);
+    const getLineProps = useCallback((lineNumber) => {
+        const data = [];
+        if (currentHighlightLines?.includes(lineNumber)) {
+            data.push('highlighted');
+        }
+        if (showBashPrompt) {
+            data.push(currentBashLinesPrefixes[lineNumber - 1]);
+        }
+        return { data: data.join(' ') };
+    }, [currentHighlightLines, showBashPrompt, currentBashLinesPrefixes]);
+    return (<CodeBlockWrapper $hasHeader={showHeader} $gradientRotation={gradientRotation} $hasActionButton={showActionButton} $hasTabs={isMultiTab} $fullWidth={fullWidth} $fullHeight={fullHeight} $showLineNumbers={showLineNumbers} {...rest}>
+            {showHeader && (<Header tabs={isMultiTab ? content : null} currentTab={currentTab} onTabChange={handleTabClick} showBashHeader={showBashHeader} title={title}/>)}
+
+            <SyntaxHighlighter showLineNumbers wrapLines language={currentLanguage} size={size} lineProps={getLineProps} ref={syntaxHighlighterRef}>
+                {currentCode}
+            </SyntaxHighlighter>
+
+            <div className="CodeBlock-TopRightActionsWrapper">
+                {showActionButton && <ActionButton successStyle onClick={onActionButtonClick}>{actionButtonLabel ?? 'Run on Apify'}</ActionButton>}
+                {!hideCopyButton && <CopyButton code={currentCode}/>}
+            </div>
+
+            {showGradient && (<ColorWheelGradient className="CodeBlock-Gradient" blurSize={69}/>)}
+        </CodeBlockWrapper>);
+}
+//# sourceMappingURL=code_block.jsx.map

package/dist/src/components/code/code_block/code_block.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"code_block.jsx","sourceRoot":"","sources":["../../../../../src/components/code/code_block/code_block.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,13 @@
+import type { SharedTextSize } from '../../text/text_shared';
+export declare const CodeBlockWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../..").BoxProps & import("react").RefAttributes<HTMLElement>>, any, import("../syntax_highlighter").SyntaxHighlighterBaseStylesWrapperProps & {
+    $hasHeader: boolean;
+    $gradientRotation?: number;
+    $highlightLines?: number[];
+    $hasActionButton?: boolean;
+    $hasTabs?: boolean;
+    $fullWidth?: boolean;
+    $showLineNumbers?: boolean;
+    $fullHeight?: boolean;
+    size?: SharedTextSize;
+}, never>;
+//# sourceMappingURL=code_block.styled.d.ts.map

package/dist/src/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":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAK7D,eAAO,MAAM,gBAAgB;gBACb,OAAO;wBACC,MAAM;sBACR,MAAM,EAAE;uBACP,OAAO;eACf,OAAO;iBACL,OAAO;uBACD,OAAO;kBACZ,OAAO;WACd,cAAc;SAkNxB,CAAC"}