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

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,252 @@
+import { theme as e } from "../../design_system/theme.js";
+import { Box as t } from "../box/box.js";
+import { useSharedUiDependencies as n } from "../../ui_dependency_provider.js";
+import { Link as r, isUrlExternal as i } from "../link/link.js";
+import a, { css as o } from "styled-components";
+import { forwardRef as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { ExternalLinkIcon as u } from "@apify/ui-icons";
+//#region src/components/button/button.tsx
+function d(e) {
+	return e.to !== void 0;
+}
+var f = {
+	primary: {
+		default: {
+			textColor: e.color.neutral.textOnPrimary,
+			backgroundColor: e.color.primary.action,
+			borderColor: e.color.primary.action,
+			hoverColor: e.color.primary.actionHover,
+			activeColor: e.color.primary.actionActive
+		},
+		success: {
+			textColor: e.color.neutral.textOnPrimary,
+			backgroundColor: e.color.success.action,
+			borderColor: e.color.success.action,
+			hoverColor: e.color.success.actionHover,
+			activeColor: e.color.success.actionActive
+		},
+		danger: {
+			textColor: e.color.neutral.textOnPrimary,
+			backgroundColor: e.color.danger.action,
+			borderColor: e.color.danger.action,
+			hoverColor: e.color.danger.actionHover,
+			activeColor: e.color.danger.actionActive
+		},
+		primaryBlack: {
+			textColor: e.color.neutral.textOnPrimary,
+			backgroundColor: e.color.primaryBlack.action,
+			borderColor: e.color.primaryBlack.action,
+			hoverGradient: `linear-gradient(to bottom, color-mix(in srgb, ${e.color.neutral.textOnPrimary} 16%, transparent), transparent)`,
+			activeColor: e.color.primaryBlack.actionActive
+		}
+	},
+	secondary: {
+		default: {
+			textColor: e.color.neutral.text,
+			backgroundColor: e.color.neutral.backgroundMuted,
+			borderColor: e.color.neutral.border,
+			hoverColor: e.color.neutral.actionSecondaryHover,
+			activeColor: e.color.neutral.actionSecondaryActive,
+			actionBorderColor: e.color.neutral.border
+		},
+		success: {
+			textColor: e.color.success.text,
+			backgroundColor: e.color.neutral.backgroundMuted,
+			borderColor: e.color.neutral.border,
+			hoverColor: e.color.success.actionHover,
+			activeColor: e.color.success.actionActive,
+			actionTextColor: e.color.neutral.background
+		},
+		danger: {
+			textColor: e.color.danger.text,
+			backgroundColor: e.color.neutral.backgroundMuted,
+			borderColor: e.color.neutral.border,
+			hoverColor: e.color.danger.backgroundHover,
+			actionBorderColor: e.color.danger.borderSubtle,
+			activeColor: e.color.danger.actionActive,
+			activeTextColor: e.color.neutral.textOnPrimary
+		},
+		primaryBlack: {
+			textColor: e.color.neutral.textOnPrimary,
+			backgroundColor: e.color.primaryBlack.action,
+			borderColor: e.color.primaryBlack.action,
+			hoverGradient: `linear-gradient(to bottom, color-mix(in srgb, ${e.color.neutral.textOnPrimary} 16%, transparent), transparent)`,
+			activeColor: e.color.primaryBlack.actionActive
+		}
+	},
+	tertiary: {
+		default: {
+			textColor: e.color.neutral.text,
+			backgroundColor: "transparent",
+			borderColor: "transparent",
+			hoverColor: e.color.neutral.hover,
+			activeColor: e.color.neutral.actionSecondaryActive
+		},
+		success: {
+			textColor: e.color.success.text,
+			backgroundColor: "transparent",
+			borderColor: "transparent",
+			hoverColor: e.color.success.backgroundSubtleHover,
+			activeColor: e.color.success.backgroundSubtleActive
+		},
+		danger: {
+			textColor: e.color.danger.text,
+			backgroundColor: "transparent",
+			borderColor: "transparent",
+			hoverColor: e.color.danger.backgroundSubtleHover,
+			activeColor: e.color.danger.backgroundSubtleActive
+		},
+		primaryBlack: {
+			textColor: e.color.neutral.textOnPrimary,
+			backgroundColor: e.color.primaryBlack.action,
+			borderColor: e.color.primaryBlack.action,
+			hoverGradient: `linear-gradient(to bottom, color-mix(in srgb, ${e.color.neutral.textOnPrimary} 16%, transparent), transparent)`,
+			activeColor: e.color.primaryBlack.actionActive
+		}
+	}
+}, p = {
+	extraLarge: {
+		typography: e.typography.shared.mobile.bodyMMedium,
+		size: 40,
+		horizontalPadding: 12,
+		borderRadius: e.radius.radius8,
+		iconSize: "20"
+	},
+	large: {
+		typography: e.typography.shared.mobile.bodyMMedium,
+		size: 36,
+		horizontalPadding: 12,
+		borderRadius: e.radius.radius6,
+		iconSize: "20"
+	},
+	medium: {
+		typography: e.typography.shared.mobile.bodyMMedium,
+		size: 32,
+		horizontalPadding: 12,
+		borderRadius: e.radius.radius6,
+		iconSize: "20"
+	},
+	small: {
+		typography: e.typography.shared.mobile.bodySMedium,
+		size: 28,
+		horizontalPadding: 8,
+		borderRadius: e.radius.radius6,
+		iconSize: "16"
+	},
+	extraSmall: {
+		typography: e.typography.shared.mobile.bodySMedium,
+		size: 24,
+		horizontalPadding: 6,
+		borderRadius: e.radius.radius6,
+		iconSize: "16"
+	}
+}, m = (t = "primary", n = "default") => {
+	let { backgroundColor: r, borderColor: i, textColor: a, actionBorderColor: s, actionTextColor: c, hoverColor: l, hoverGradient: u, activeColor: d, activeTextColor: p } = f[t][n];
+	return o`
+        color: ${a};
+        background-color: ${r};
+        border-color: ${i};
+
+        &:hover {
+            color: ${c || a};
+            ${u ? o`
+                      background-image: ${u};
+                      background-color: ${r};
+                  ` : o`
+                      background-color: ${l};
+                  `}
+            border-color: ${s || (u ? i : l)};
+        }
+
+        &:active {
+            color: ${p || c || a};
+            background-color: ${d};
+            ${u && "background-image: none;"}
+            border-color: ${s || d};
+        }
+
+        &:disabled {
+            color: ${e.color.neutral.textDisabled};
+            background-color: ${t === "tertiary" ? "transparent" : e.color.neutral.disabled};
+            border-color: ${t === "tertiary" ? "transparent" : e.color.neutral.disabled};
+
+            cursor: default;
+        }
+    `;
+}, h = (e = "medium") => {
+	let { typography: t, size: n, horizontalPadding: r, borderRadius: i } = p[e];
+	return o`
+        ${t};
+        height: ${n}px;
+        /* We just want to ensure padding on the sides. Height is set the the hard way for simplicity */
+        padding: 0 ${r}px;
+        border-radius: ${i};
+    `;
+}, g = a(t)`
+    /* 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: ${e.space.space4};
+
+    /* Basic styles */
+    white-space: nowrap;
+    cursor: pointer;
+    transition:
+        border-color ${e.transition.fastEaseOut},
+        background-color ${e.transition.fastEaseOut};
+
+    /* Border is always defined, but it can be set to transparent */
+    border-style: solid;
+    border-width: 1px;
+    border-color: transparent;
+
+    /* Colors */
+    ${(e) => m(e.$variant, e.$color)}
+
+    /* Paddings & font size */
+    ${(e) => h(e.$size)}
+`, _ = s((e, t) => {
+	let { as: a, children: o, size: s = "medium", color: f = "default", variant: m = "primary", type: h = "button", LeftIcon: _, RightIcon: v, onClick: y, trackingId: b, trackingData: x, ...S } = e, { trackClick: C, windowLocationHost: w } = n(), T = (e) => {
+		C && b && C(b, x), y && y(e);
+	}, { iconSize: E } = p[s];
+	if (d(e)) {
+		let n = i(e.to, w) && !e.hideExternalIcon ? u : v;
+		return /* @__PURE__ */ l(g, {
+			$size: s,
+			$color: f,
+			$variant: m,
+			forwardedAs: e.disabled ? "button" : r,
+			ref: t,
+			onClick: T,
+			to: e.to,
+			...S,
+			hideExternalIcon: !0,
+			children: [
+				_ && /* @__PURE__ */ c(_, { size: E }),
+				o,
+				n && /* @__PURE__ */ c(n, { size: E })
+			]
+		});
+	}
+	return /* @__PURE__ */ l(g, {
+		$size: s,
+		$color: f,
+		$variant: m,
+		forwardedAs: a || "button",
+		ref: t,
+		onClick: T,
+		type: h,
+		...S,
+		children: [
+			_ && /* @__PURE__ */ c(_, { size: E }),
+			o,
+			v && /* @__PURE__ */ c(v, { size: E })
+		]
+	});
+});
+//#endregion
+export { f as BUTTON_COLOR_VARIANTS_CSS, p as BUTTON_SIZE_VARIANTS_CSS, _ as Button, m as getButtonColorStyles, h as 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,121 @@
+import { theme as e } from "../../design_system/theme.js";
+import { Box as t } from "../box/box.js";
+import { TextShared as n } from "../text/text_shared.js";
+import r, { css as i } from "styled-components";
+import { forwardRef as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import c from "clsx";
+//#region src/components/card/card.tsx
+var l = {
+	WRAPPER: "Card",
+	HEADER: "Card-header",
+	CAPTION: "Card-caption",
+	ACTIONS: "Card-actions",
+	DESCRIPTION: "Card-description",
+	CONTENT: "Card-content"
+}, u = r(t)`
+    /* 👇 this is consoleStyle.partialStyle.card */
+    background-color: ${e.color.neutral.cardBackground};
+    border: 1px solid ${e.color.neutral.border};
+    border-radius: ${e.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;
+
+    & > .${l.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: ${e.space.space16} ${e.space.space16} ${e.space.space8};
+        border-radius: ${e.radius.radius8} ${e.radius.radius8} 0 0;
+
+        .${l.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;
+            }
+        }
+    }
+
+    & > .${l.DESCRIPTION} {
+        padding: 0rem ${e.space.space16} ${e.space.space16} ${e.space.space16};
+        color: ${e.color.neutral.textSubtle};
+    }
+
+    & > .${l.CONTENT} {
+        position: relative;
+        display: block;
+        padding: ${e.space.space16};
+        border-bottom-right-radius: ${e.radius.radius8};
+        border-bottom-left-radius: ${e.radius.radius8};
+    }
+
+    ${({ $shadowless: e }) => e && i`
+            box-shadow: none;
+        `}
+
+    ${({ $disabled: t }) => t && i`
+            .${l.CONTENT} {
+                &::after {
+                    content: '';
+                    position: absolute;
+                    top: 0;
+                    bottom: 0;
+                    left: 0;
+                    right: 0; /* stretch full */
+                    background: ${e.color.neutral.backgroundSubtle} !important;
+                    opacity: 0.4;
+                    pointer-events: all;
+                }
+            }
+        `}
+`, d = a(({ as: e, className: t, caption: r, description: i, actions: a, children: d, disabled: f, shadowless: p, ...m }, h) => /* @__PURE__ */ s(u, {
+	$disabled: f,
+	$shadowless: p,
+	forwardedAs: e || "section",
+	className: c(l.WRAPPER, t),
+	"data-test": "card",
+	...m,
+	ref: h,
+	children: [
+		(!!r || !!a) && /* @__PURE__ */ s("header", {
+			className: l.HEADER,
+			"data-test": "card-header",
+			children: [r && /* @__PURE__ */ o(n, {
+				as: "div",
+				size: "big",
+				weight: "bold",
+				className: l.CAPTION,
+				"data-test": "card-caption",
+				children: r
+			}), a && /* @__PURE__ */ o("div", {
+				className: l.ACTIONS,
+				"data-test": "card-actions",
+				children: a
+			})]
+		}),
+		i && /* @__PURE__ */ o("div", {
+			className: l.DESCRIPTION,
+			"data-test": "card-description",
+			children: i
+		}),
+		/* @__PURE__ */ o("div", {
+			className: l.CONTENT,
+			"data-test": "card-content",
+			children: d
+		})
+	]
+}));
+//#endregion
+export { d as Card, u as StyledCardWrapper, l as 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"}

package/dist/components/card_container/card_container.js

@@ -0,0 +1,53 @@
+import { theme as e } from "../../design_system/theme.js";
+import { Box as t } from "../box/box.js";
+import n from "styled-components";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/card_container/card_container.tsx
+var a = {
+	CONTENT: "CardContainer-Content",
+	HEADER: "CardContainer-Header"
+}, o = {
+	TOP: "TOP",
+	BOTTOM: "BOTTOM"
+}, s = (t) => t === "none" ? 0 : t ? e.space[t] : e.space.space16, c = n(t)`
+    background-color: ${e.color.neutral.backgroundSubtle};
+    border-radius: ${e.radius.radius12};
+
+    padding: ${e.space.space2};
+
+    display: flex;
+    flex-direction: ${({ $headerPlacement: e }) => e === o.TOP ? "column" : "column-reverse"};
+
+    .${a.CONTENT} {
+        /* 11px inner radius to match Figma (outer 12px - 1px visual offset) */
+        border-radius: 1.1rem;
+        background-color: ${({ $contentPadding: t }) => t === "none" ? "transparent" : e.color.neutral.background};
+        ${({ $contentPadding: e }) => e === "none" && "overflow: hidden;"}
+
+        padding: ${({ $contentPadding: e }) => s(e)};
+        flex-grow: 1;
+    }
+
+    .${a.HEADER} {
+        padding: ${e.space.space4} ${e.space.space8};
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+`, l = n.span`
+    ${e.typography.shared.desktop.bodyMMedium}
+`, u = ({ children: e, header: t, headerPlacement: n = o.TOP, contentPadding: s, ...u }) => /* @__PURE__ */ i(c, {
+	...u,
+	$headerPlacement: n,
+	$contentPadding: s,
+	children: [t != null && /* @__PURE__ */ r("div", {
+		className: a.HEADER,
+		children: typeof t == "string" ? /* @__PURE__ */ r(l, { children: t }) : t
+	}), /* @__PURE__ */ r("div", {
+		className: a.CONTENT,
+		children: e
+	})]
+});
+u.Heading = l;
+//#endregion
+export { u as CardContainer, a as 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,40 @@
+import { theme as e } from "../../design_system/theme.js";
+import { checkboxStyle as t } from "./checkbox.style.js";
+import n from "styled-components";
+import "react";
+import { jsx as r } from "react/jsx-runtime";
+import i from "clsx";
+import { CheckIcon as a, MinusIcon as o } from "@apify/ui-icons";
+import * as s from "@radix-ui/react-checkbox";
+//#region src/components/checkbox/checkbox.tsx
+var c = n(s.Root)`
+    all: unset;
+    ${t};
+`, l = n(s.Indicator)`
+    color: ${e.color.neutral.textOnPrimary};
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .disabled & {
+        color: ${e.color.neutral.textMuted};
+    }
+`, u = n(l)`
+    color: ${e.color.neutral.textOnPrimary};
+`, d = ({ children: e, value: t, setValue: n, error: a, disabled: o, readOnly: s, className: l, ...u }) => /* @__PURE__ */ r(c, {
+	...u,
+	checked: t ?? "indeterminate",
+	onCheckedChange: n,
+	disabled: o || s,
+	className: i(l, a && "error", (o || s) && "disabled"),
+	children: e
+}), f = (e) => /* @__PURE__ */ r(d, {
+	...e,
+	children: /* @__PURE__ */ r(l, { children: /* @__PURE__ */ r(a, { size: "12" }) })
+}), p = (e) => /* @__PURE__ */ r(d, {
+	...e,
+	children: e.value == null ? /* @__PURE__ */ r(u, { children: /* @__PURE__ */ r(o, { size: "12" }) }) : /* @__PURE__ */ r(l, { children: /* @__PURE__ */ r(a, { size: "12" }) })
+});
+//#endregion
+export { f as CheckboxPrimitive, p as 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"}