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

package/dist/components/browser_window/browser_window.js

@@ -0,0 +1,102 @@
+import { theme } from "../../design_system/theme.js";
+import { Badge } from "../badge/badge.js";
+import styled from "styled-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import clsx$1 from "clsx";
+//#region src/components/browser_window/browser_window.tsx
+var classNames = {
+	ROOT: "browser-window",
+	HEADER: "browser-window__header",
+	DOTS: "browser-window__dots",
+	DOT: "browser-window__dot",
+	URL: "browser-window__url",
+	TITLE: "browser-window__title",
+	CONTAINER: "browser-window__container",
+	CONTENT: "browser-window__content"
+};
+var BrowserWindowWrapper = styled.div`
+    border: 1px solid ${theme.color.neutral.separatorSubtle};
+    border-radius: ${theme.radius.radius12};
+    background-color: ${theme.color.neutral.background};
+    overflow: hidden;
+
+    .${classNames.HEADER} {
+        display: flex;
+        align-items: center;
+        gap: ${theme.space.space8};
+        padding: ${theme.space.space6} ${theme.space.space8};
+        border-bottom: 1px solid ${theme.color.neutral.separatorSubtle};
+        background-color: ${theme.color.neutral.backgroundMuted};
+    }
+
+    .${classNames.DOTS} {
+        display: flex;
+        gap: 0.3rem;
+        flex-shrink: 0;
+    }
+
+    .${classNames.DOT} {
+        width: 0.6rem;
+        height: 0.6rem;
+        border-radius: 50%;
+        background-color: ${theme.color.neutral.separatorSubtle};
+    }
+
+    .${classNames.URL} {
+        width: 100%;
+        min-width: 0;
+        justify-content: flex-start;
+        color: ${theme.color.neutral.textSubtle};
+
+        span {
+            min-width: 0;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+        }
+    }
+
+    .${classNames.TITLE} {
+        margin-left: auto;
+        flex-shrink: 0;
+    }
+
+    .${classNames.CONTAINER} {
+        min-width: 0;
+        overflow-x: auto;
+    }
+`;
+var BrowserWindow = ({ title, url, children, className }) => {
+	return /* @__PURE__ */ jsxs(BrowserWindowWrapper, {
+		className: clsx$1(classNames.ROOT, className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: classNames.HEADER,
+			children: [url && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+				className: classNames.DOTS,
+				children: [
+					/* @__PURE__ */ jsx("span", { className: classNames.DOT }),
+					/* @__PURE__ */ jsx("span", { className: classNames.DOT }),
+					/* @__PURE__ */ jsx("span", { className: classNames.DOT })
+				]
+			}), /* @__PURE__ */ jsx(Badge, {
+				size: "extra_small",
+				variant: "neutral_subtle",
+				className: classNames.URL,
+				"data-visual-test": "transparent",
+				children: url
+			})] }), /* @__PURE__ */ jsx(Badge, {
+				size: "extra_small",
+				className: classNames.TITLE,
+				children: title
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: classNames.CONTAINER,
+			children: /* @__PURE__ */ jsx("div", {
+				className: classNames.CONTENT,
+				children
+			})
+		})]
+	});
+};
+//#endregion
+export { BrowserWindow, classNames };

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

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

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

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

package/dist/components/button/button.d.ts

@@ -0,0 +1,57 @@
+import { AriaAttributes, default as React } from 'react';
+import { IconSize } from '@apify/ui-icons';
+import { WithRequired } from '../../type_utils';
+import { MarginSpacingProps, RegularBoxProps } from '../box';
+import { LinkProps } from '../link';
+export type ButtonSize = 'extraLarge' | 'large' | 'medium' | 'small' | 'extraSmall';
+type ButtonColor = 'default' | 'success' | 'danger' | 'primaryBlack';
+type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
+type ButtonType = 'button' | 'submit';
+export interface TransientButtonProps {
+    size?: ButtonSize;
+    color?: ButtonColor;
+    variant?: ButtonVariant;
+}
+export interface RegularButtonProps {
+    trackingId?: string;
+    trackingData?: Record<string, unknown>;
+    LeftIcon?: React.ElementType;
+    RightIcon?: React.ElementType;
+    disabled?: boolean;
+    type?: ButtonType;
+}
+type ButtonAriaProps = Pick<AriaAttributes, 'aria-label' | 'aria-labelledby'>;
+export type CommonButtonProps = RegularButtonProps & ButtonAriaProps & TransientButtonProps & MarginSpacingProps;
+export type ButtonProps = CommonButtonProps & WithRequired<RegularBoxProps, 'onClick'>;
+export type AnchorButtonProps = CommonButtonProps & RegularBoxProps & LinkProps;
+type ButtonColorCombinations = {
+    [Type in ButtonVariant]: {
+        [Size in ButtonColor]: {
+            textColor: string;
+            borderColor: string;
+            backgroundColor: string;
+            actionTextColor?: string;
+            actionBorderColor?: string;
+            hoverColor?: string;
+            hoverGradient?: string;
+            activeColor?: string;
+            activeTextColor?: string;
+        };
+    };
+};
+type ButtonSizeCombinations = {
+    [Size in ButtonSize]: {
+        typography: string;
+        size: number;
+        horizontalPadding: number;
+        borderRadius: string;
+        iconSize: IconSize;
+    };
+};
+export declare const BUTTON_COLOR_VARIANTS_CSS: ButtonColorCombinations;
+export declare const BUTTON_SIZE_VARIANTS_CSS: ButtonSizeCombinations;
+export declare const getButtonColorStyles: (variant?: ButtonVariant, color?: ButtonColor) => import('styled-components').RuleSet<object>;
+export declare const getButtonSizeStyles: (size?: ButtonSize) => import('styled-components').RuleSet<object>;
+export declare const Button: React.ForwardRefExoticComponent<(ButtonProps | AnchorButtonProps) & React.RefAttributes<HTMLElement>>;
+export {};
+//# sourceMappingURL=button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAoB,KAAK,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAGlE,OAAO,EAAE,KAAK,YAAY,EAA2B,MAAM,kBAAkB,CAAC;AAE9E,OAAO,EAAO,KAAK,kBAAkB,EAAE,KAAK,eAAe,EAAE,MAAM,QAAQ,CAAC;AAC5E,OAAO,EAAuB,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAE9D,MAAM,MAAM,UAAU,GAAG,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,YAAY,CAAC;AACpF,KAAK,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,cAAc,CAAC;AACrE,KAAK,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;AAC1D,KAAK,UAAU,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEtC,MAAM,WAAW,oBAAoB;IACjC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,OAAO,CAAC,EAAE,aAAa,CAAC;CAC3B;AAED,MAAM,WAAW,kBAAkB;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACvC,QAAQ,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAC7B,SAAS,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;CACrB;AAED,KAAK,eAAe,GAAG,IAAI,CAAC,cAAc,EAAE,YAAY,GAAG,iBAAiB,CAAC,CAAC;AAG9E,MAAM,MAAM,iBAAiB,GAAG,kBAAkB,GAAG,eAAe,GAAG,oBAAoB,GAAG,kBAAkB,CAAC;AAEjH,MAAM,MAAM,WAAW,GAAG,iBAAiB,GAAG,YAAY,CAAC,eAAe,EAAE,SAAS,CAAC,CAAC;AAEvF,MAAM,MAAM,iBAAiB,GAAG,iBAAiB,GAAG,eAAe,GAAG,SAAS,CAAC;AAOhF,KAAK,uBAAuB,GAAG;KAC1B,IAAI,IAAI,aAAa,GAAG;SACpB,IAAI,IAAI,WAAW,GAAG;YACnB,SAAS,EAAE,MAAM,CAAC;YAClB,WAAW,EAAE,MAAM,CAAC;YACpB,eAAe,EAAE,MAAM,CAAC;YAGxB,eAAe,CAAC,EAAE,MAAM,CAAC;YAEzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;YAG3B,UAAU,CAAC,EAAE,MAAM,CAAC;YAEpB,aAAa,CAAC,EAAE,MAAM,CAAC;YAGvB,WAAW,CAAC,EAAE,MAAM,CAAC;YACrB,eAAe,CAAC,EAAE,MAAM,CAAC;SAC5B;KACJ;CACJ,CAAC;AAEF,KAAK,sBAAsB,GAAG;KACzB,IAAI,IAAI,UAAU,GAAG;QAClB,UAAU,EAAE,MAAM,CAAC;QACnB,IAAI,EAAE,MAAM,CAAC;QACb,iBAAiB,EAAE,MAAM,CAAC;QAC1B,YAAY,EAAE,MAAM,CAAC;QACrB,QAAQ,EAAE,QAAQ,CAAC;KACtB;CACJ,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,uBAgGvC,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,sBAoCtC,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,UAAS,aAAyB,EAAE,QAAO,WAAuB,gDA8CtG,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,OAAM,UAAqB,gDAU9D,CAAC;AA8BF,eAAO,MAAM,MAAM,uGAiEjB,CAAC"}

package/dist/components/button/button.js

@@ -0,0 +1,261 @@
+import { theme } from "../../design_system/theme.js";
+import { Box } from "../box/box.js";
+import { useSharedUiDependencies } from "../../ui_dependency_provider.js";
+import { Link, isUrlExternal } from "../link/link.js";
+import styled, { css } from "styled-components";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ExternalLinkIcon } from "@apify/ui-icons";
+//#region src/components/button/button.tsx
+function isAnchorButton(props) {
+	return props.to !== void 0;
+}
+var BUTTON_COLOR_VARIANTS_CSS = {
+	primary: {
+		default: {
+			textColor: theme.color.neutral.textOnPrimary,
+			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.textOnPrimary,
+			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.textOnPrimary,
+			backgroundColor: theme.color.danger.action,
+			borderColor: theme.color.danger.action,
+			hoverColor: theme.color.danger.actionHover,
+			activeColor: theme.color.danger.actionActive
+		},
+		primaryBlack: {
+			textColor: theme.color.neutral.textOnPrimary,
+			backgroundColor: theme.color.primaryBlack.action,
+			borderColor: theme.color.primaryBlack.action,
+			hoverGradient: `linear-gradient(to bottom, color-mix(in srgb, ${theme.color.neutral.textOnPrimary} 16%, transparent), transparent)`,
+			activeColor: theme.color.primaryBlack.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.backgroundHover,
+			actionBorderColor: theme.color.danger.borderSubtle,
+			activeColor: theme.color.danger.actionActive,
+			activeTextColor: theme.color.neutral.textOnPrimary
+		},
+		primaryBlack: {
+			textColor: theme.color.neutral.textOnPrimary,
+			backgroundColor: theme.color.primaryBlack.action,
+			borderColor: theme.color.primaryBlack.action,
+			hoverGradient: `linear-gradient(to bottom, color-mix(in srgb, ${theme.color.neutral.textOnPrimary} 16%, transparent), transparent)`,
+			activeColor: theme.color.primaryBlack.actionActive
+		}
+	},
+	tertiary: {
+		default: {
+			textColor: theme.color.neutral.text,
+			backgroundColor: "transparent",
+			borderColor: "transparent",
+			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
+		},
+		primaryBlack: {
+			textColor: theme.color.neutral.textOnPrimary,
+			backgroundColor: theme.color.primaryBlack.action,
+			borderColor: theme.color.primaryBlack.action,
+			hoverGradient: `linear-gradient(to bottom, color-mix(in srgb, ${theme.color.neutral.textOnPrimary} 16%, transparent), transparent)`,
+			activeColor: theme.color.primaryBlack.actionActive
+		}
+	}
+};
+var BUTTON_SIZE_VARIANTS_CSS = {
+	extraLarge: {
+		typography: theme.typography.shared.mobile.bodyMMedium,
+		size: 40,
+		horizontalPadding: 12,
+		borderRadius: theme.radius.radius8,
+		iconSize: "20"
+	},
+	large: {
+		typography: theme.typography.shared.mobile.bodyMMedium,
+		size: 36,
+		horizontalPadding: 12,
+		borderRadius: theme.radius.radius6,
+		iconSize: "20"
+	},
+	medium: {
+		typography: theme.typography.shared.mobile.bodyMMedium,
+		size: 32,
+		horizontalPadding: 12,
+		borderRadius: theme.radius.radius6,
+		iconSize: "20"
+	},
+	small: {
+		typography: theme.typography.shared.mobile.bodySMedium,
+		size: 28,
+		horizontalPadding: 8,
+		borderRadius: theme.radius.radius6,
+		iconSize: "16"
+	},
+	extraSmall: {
+		typography: theme.typography.shared.mobile.bodySMedium,
+		size: 24,
+		horizontalPadding: 6,
+		borderRadius: theme.radius.radius6,
+		iconSize: "16"
+	}
+};
+var getButtonColorStyles = (variant = "primary", color = "default") => {
+	const { backgroundColor, borderColor, textColor, actionBorderColor, actionTextColor, hoverColor, hoverGradient, activeColor, activeTextColor } = BUTTON_COLOR_VARIANTS_CSS[variant][color];
+	return css`
+        color: ${textColor};
+        background-color: ${backgroundColor};
+        border-color: ${borderColor};
+
+        &:hover {
+            color: ${actionTextColor || textColor};
+            ${hoverGradient ? css`
+                      background-image: ${hoverGradient};
+                      background-color: ${backgroundColor};
+                  ` : css`
+                      background-color: ${hoverColor};
+                  `}
+            border-color: ${actionBorderColor || (hoverGradient ? borderColor : hoverColor)};
+        }
+
+        &:active {
+            color: ${activeTextColor || actionTextColor || textColor};
+            background-color: ${activeColor};
+            ${hoverGradient && "background-image: none;"}
+            border-color: ${actionBorderColor || activeColor};
+        }
+
+        &:disabled {
+            color: ${theme.color.neutral.textDisabled};
+            background-color: ${variant === "tertiary" ? "transparent" : theme.color.neutral.disabled};
+            border-color: ${variant === "tertiary" ? "transparent" : theme.color.neutral.disabled};
+
+            cursor: default;
+        }
+    `;
+};
+var getButtonSizeStyles = (size = "medium") => {
+	const { typography, size: height, horizontalPadding, borderRadius } = BUTTON_SIZE_VARIANTS_CSS[size];
+	return css`
+        ${typography};
+        height: ${height}px;
+        /* We just want to ensure padding on the sides. Height is set the the hard way for simplicity */
+        padding: 0 ${horizontalPadding}px;
+        border-radius: ${borderRadius};
+    `;
+};
+var 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.space4};
+
+    /* Basic styles */
+    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-color: transparent;
+
+    /* Colors */
+    ${(props) => getButtonColorStyles(props.$variant, props.$color)}
+
+    /* Paddings & font size */
+    ${(props) => getButtonSizeStyles(props.$size)}
+`;
+var Button = forwardRef((props, ref) => {
+	const { as, children, size = "medium", color = "default", variant = "primary", type = "button", LeftIcon, RightIcon, onClick, trackingId, trackingData, ...rest } = props;
+	const { trackClick, windowLocationHost } = useSharedUiDependencies();
+	const trackedOnClick = (e) => {
+		if (trackClick && trackingId) trackClick(trackingId, trackingData);
+		if (onClick) onClick(e);
+	};
+	const { iconSize } = BUTTON_SIZE_VARIANTS_CSS[size];
+	if (isAnchorButton(props)) {
+		const EffectiveRightIcon = isUrlExternal(props.to, windowLocationHost) && !props.hideExternalIcon ? ExternalLinkIcon : RightIcon;
+		return /* @__PURE__ */ jsxs(StyledButton, {
+			$size: size,
+			$color: color,
+			$variant: variant,
+			forwardedAs: props.disabled ? "button" : Link,
+			ref,
+			onClick: trackedOnClick,
+			to: props.to,
+			...rest,
+			hideExternalIcon: true,
+			children: [
+				LeftIcon && /* @__PURE__ */ jsx(LeftIcon, { size: iconSize }),
+				children,
+				EffectiveRightIcon && /* @__PURE__ */ jsx(EffectiveRightIcon, { size: iconSize })
+			]
+		});
+	}
+	return /* @__PURE__ */ jsxs(StyledButton, {
+		$size: size,
+		$color: color,
+		$variant: variant,
+		forwardedAs: as || "button",
+		ref,
+		onClick: trackedOnClick,
+		type,
+		...rest,
+		children: [
+			LeftIcon && /* @__PURE__ */ jsx(LeftIcon, { size: iconSize }),
+			children,
+			RightIcon && /* @__PURE__ */ jsx(RightIcon, { size: iconSize })
+		]
+	});
+});
+//#endregion
+export { BUTTON_COLOR_VARIANTS_CSS, BUTTON_SIZE_VARIANTS_CSS, Button, getButtonColorStyles, getButtonSizeStyles };

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

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

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

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

package/dist/components/card/card.d.ts

@@ -0,0 +1,27 @@
+import { default as React } from 'react';
+import { WithTransientProps } from '../../type_utils';
+import { BoxProps } from '../box';
+export declare const cardClassNames: {
+    WRAPPER: string;
+    HEADER: string;
+    CAPTION: string;
+    ACTIONS: string;
+    DESCRIPTION: string;
+    CONTENT: string;
+};
+interface TransientCardProps {
+    disabled?: boolean;
+    shadowless?: boolean;
+}
+interface RegularCardProps {
+    caption?: React.ReactNode;
+    description?: React.ReactNode;
+    actions?: React.ReactNode;
+    children: React.ReactNode;
+}
+export type StyledCardProps = WithTransientProps<TransientCardProps>;
+export type CardProps = TransientCardProps & RegularCardProps & BoxProps;
+export declare const StyledCardWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<(BoxProps & React.RefAttributes<HTMLElement>) & import('styled-components/dist/types').BaseObject, StyledCardProps>> & string & Omit<React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<HTMLElement>>, keyof React.Component<any, {}, any>>;
+export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLElement>>;
+export {};
+//# sourceMappingURL=card.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/components/card/card.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAIvC,eAAO,MAAM,cAAc;;;;;;;CAO1B,CAAC;AAEF,UAAU,kBAAkB;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,UAAU,gBAAgB;IACtB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,MAAM,MAAM,eAAe,GAAG,kBAAkB,CAAC,kBAAkB,CAAC,CAAC;AACrE,MAAM,MAAM,SAAS,GAAG,kBAAkB,GAAG,gBAAgB,GAAG,QAAQ,CAAC;AAEzE,eAAO,MAAM,iBAAiB,8WAuE7B,CAAC;AAEF,eAAO,MAAM,IAAI,+EA2ChB,CAAC"}

package/dist/components/card/card.js

@@ -0,0 +1,125 @@
+import { theme } from "../../design_system/theme.js";
+import { Box } from "../box/box.js";
+import { TextShared } from "../text/text_shared.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/card/card.tsx
+var cardClassNames = {
+	WRAPPER: "Card",
+	HEADER: "Card-header",
+	CAPTION: "Card-caption",
+	ACTIONS: "Card-actions",
+	DESCRIPTION: "Card-description",
+	CONTENT: "Card-content"
+};
+var StyledCardWrapper = styled(Box)`
+    /* 👇 this is consoleStyle.partialStyle.card */
+    background-color: ${theme.color.neutral.cardBackground};
+    border: 1px solid ${theme.color.neutral.border};
+    border-radius: ${theme.radius.radius8};
+    box-shadow: var(--shadow-1);
+    padding: 2rem;
+    box-sizing: border-box;
+
+    /* Reset padding, it is dealt with within header and content styles */
+    padding: 0;
+    width: 100%;
+    font-size: 1.4rem;
+    position: relative;
+
+    & > .${cardClassNames.HEADER} {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center; /* so it aligns nicely with various content in corner, eg. button */
+        padding: ${theme.space.space16} ${theme.space.space16} ${theme.space.space8};
+        border-radius: ${theme.radius.radius8} ${theme.radius.radius8} 0 0;
+
+        .${cardClassNames.ACTIONS} {
+            margin-left: 2rem;
+
+            button {
+                /* TODO: (typography-mismatch) font-size 1.4rem + line-height 1.4rem + font-weight 500 is not a token in typography_theme.ts — resolve with designer. */
+                font-size: 1.4rem;
+                line-height: 1.4rem;
+                font-weight: 500;
+            }
+        }
+    }
+
+    & > .${cardClassNames.DESCRIPTION} {
+        padding: 0rem ${theme.space.space16} ${theme.space.space16} ${theme.space.space16};
+        color: ${theme.color.neutral.textSubtle};
+    }
+
+    & > .${cardClassNames.CONTENT} {
+        position: relative;
+        display: block;
+        padding: ${theme.space.space16};
+        border-bottom-right-radius: ${theme.radius.radius8};
+        border-bottom-left-radius: ${theme.radius.radius8};
+    }
+
+    ${({ $shadowless }) => $shadowless && css`
+            box-shadow: none;
+        `}
+
+    ${({ $disabled }) => $disabled && css`
+            .${cardClassNames.CONTENT} {
+                &::after {
+                    content: '';
+                    position: absolute;
+                    top: 0;
+                    bottom: 0;
+                    left: 0;
+                    right: 0; /* stretch full */
+                    background: ${theme.color.neutral.backgroundSubtle} !important;
+                    opacity: 0.4;
+                    pointer-events: all;
+                }
+            }
+        `}
+`;
+var Card = forwardRef(({ as, className, caption, description, actions, children, disabled, shadowless, ...rest }, ref) => {
+	return /* @__PURE__ */ jsxs(StyledCardWrapper, {
+		$disabled: disabled,
+		$shadowless: shadowless,
+		forwardedAs: as || "section",
+		className: clsx$1(cardClassNames.WRAPPER, className),
+		"data-test": "card",
+		...rest,
+		ref,
+		children: [
+			(!!caption || !!actions) && /* @__PURE__ */ jsxs("header", {
+				className: cardClassNames.HEADER,
+				"data-test": "card-header",
+				children: [caption && /* @__PURE__ */ jsx(TextShared, {
+					as: "div",
+					size: "big",
+					weight: "bold",
+					className: cardClassNames.CAPTION,
+					"data-test": "card-caption",
+					children: caption
+				}), actions && /* @__PURE__ */ jsx("div", {
+					className: cardClassNames.ACTIONS,
+					"data-test": "card-actions",
+					children: actions
+				})]
+			}),
+			description && /* @__PURE__ */ jsx("div", {
+				className: cardClassNames.DESCRIPTION,
+				"data-test": "card-description",
+				children: description
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: cardClassNames.CONTENT,
+				"data-test": "card-content",
+				children
+			})
+		]
+	});
+});
+//#endregion
+export { Card, StyledCardWrapper, cardClassNames };

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

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

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

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

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

@@ -0,0 +1,42 @@
+import { default as React } from 'react';
+import { ValueOf } from '@apify-packages/types';
+import { Size } from '../../design_system/tokens';
+import { BoxProps } from '../box';
+export declare const cardContainerClassNames: {
+    CONTENT: string;
+    HEADER: string;
+};
+declare const HEADER_PLACEMENT: {
+    readonly TOP: "TOP";
+    readonly BOTTOM: "BOTTOM";
+};
+type ContentPaddingValue = Size | 'none';
+export type CardContainerProps = BoxProps & {
+    /** The header can be placed on the bottom of the card or on the top. */
+    headerPlacement?: ValueOf<typeof HEADER_PLACEMENT>;
+    /**
+     * If string is passed, the correct styles are applied automatically.
+     * In case of custom component, use `CardContainer.Heading` component to get the same styles.
+     * Pass `null` to render without a header section.
+     */
+    header: React.ReactNode;
+    /**
+     * Controls the padding of the content area. Accepts a space token or `'none'`.
+     * When set to `'none'`, padding is removed, the content background becomes transparent
+     * (the wrapper's subtle background shows through grid gaps), and overflow is hidden (corners clip to the inner border-radius).
+     * Other values (e.g. `'space8'`) change the padding but keep the white background.
+     * Defaults to `space16` with white background when not provided.
+     */
+    contentPadding?: ContentPaddingValue;
+};
+/**
+ * CardContainer visually wraps it's children and shows a simple header.
+ *
+ * The header can be customized.
+ */
+export declare const CardContainer: {
+    ({ children, header, headerPlacement, contentPadding, ...rest }: CardContainerProps): import("react/jsx-runtime").JSX.Element;
+    Heading: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+};
+export {};
+//# sourceMappingURL=card_container.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card_container.d.ts","sourceRoot":"","sources":["../../../src/components/card_container/card_container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAGrD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAE5C,eAAO,MAAM,uBAAuB;;;CAGnC,CAAC;AAEF,QAAA,MAAM,gBAAgB;;;CAGZ,CAAC;AAEX,KAAK,mBAAmB,GAAG,IAAI,GAAG,MAAM,CAAC;AA4CzC,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG;IACxC,wEAAwE;IACxE,eAAe,CAAC,EAAE,OAAO,CAAC,OAAO,gBAAgB,CAAC,CAAC;IACnD;;;;OAIG;IACH,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,mBAAmB,CAAC;CACxC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,aAAa;qEAMvB,kBAAkB;;CASpB,CAAC"}