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

package/dist/components/action_link/action_link.d.ts

@@ -0,0 +1,12 @@
+import { default as React, FC } from 'react';
+import { RequiredBy } from '@apify-packages/types';
+import { BoxProps } from '../box';
+import { LinkProps } from '../link';
+export declare const ActionBox: FC<RequiredBy<BoxProps, 'onClick'> & {
+    contentProps?: object;
+}>;
+export declare const ActionLink: FC<LinkProps & {
+    contentProps?: object;
+}>;
+export declare const BackLink: React.FC<LinkProps>;
+//# sourceMappingURL=action_link.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"action_link.d.ts","sourceRoot":"","sources":["../../../src/components/action_link/action_link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAKvC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAGxD,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAC5C,OAAO,EAAQ,KAAK,SAAS,EAAgB,MAAM,SAAS,CAAC;AAoB7D,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,UAAU,CAAC,QAAQ,EAAE,SAAS,CAAC,GAAG;IAAE,YAAY,CAAC,EAAE,MAAM,CAAA;CAAE,CAcrF,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,SAAS,GAAG;IAAE,YAAY,CAAC,EAAE,MAAM,CAAA;CAAE,CAchE,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CASxC,CAAC"}

package/dist/components/action_link/action_link.js

@@ -0,0 +1,65 @@
+import { theme } from "../../design_system/theme.js";
+import { Box } from "../box/box.js";
+import { HeadingShared } from "../text/heading_shared.js";
+import { Link, StyledAsLink } from "../link/link.js";
+import styled from "styled-components";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowLeftIcon, ArrowRightIcon } from "@apify/ui-icons";
+//#region src/components/action_link/action_link.tsx
+var StyledGuidepost = styled(Box)`
+    display: inline-flex;
+    align-items: center;
+    color: ${theme.color.neutral.text};
+    cursor: pointer;
+
+    svg {
+        transition: transform 0.2s ease-in-out;
+    }
+
+    &:hover {
+        svg {
+            transform: translate(${({ $isBackLink }) => $isBackLink ? -3 : 3}px, 0);
+        }
+    }
+`;
+var ActionBox = ({ as = StyledAsLink, contentProps, children, ...rest }) => {
+	return /* @__PURE__ */ jsxs(StyledGuidepost, {
+		forwardedAs: as,
+		$isBackLink: false,
+		...rest,
+		children: [/* @__PURE__ */ jsx(HeadingShared, {
+			as: "span",
+			type: "titleM",
+			...contentProps,
+			children
+		}), /* @__PURE__ */ jsx(ArrowRightIcon, { size: "16" })]
+	});
+};
+var ActionLink = ({ children, as = Link, contentProps, ...rest }) => {
+	return /* @__PURE__ */ jsxs(StyledGuidepost, {
+		forwardedAs: as,
+		$isBackLink: false,
+		...rest,
+		children: [/* @__PURE__ */ jsx(HeadingShared, {
+			as: "span",
+			type: "titleM",
+			...contentProps,
+			children
+		}), /* @__PURE__ */ jsx(ArrowRightIcon, { size: "16" })]
+	});
+};
+var BackLink = ({ children, as, ...rest }) => {
+	return /* @__PURE__ */ jsxs(StyledGuidepost, {
+		forwardedAs: as || Link,
+		$isBackLink: true,
+		...rest,
+		children: [/* @__PURE__ */ jsx(ArrowLeftIcon, { size: "16" }), /* @__PURE__ */ jsx(HeadingShared, {
+			as: "span",
+			type: "titleM",
+			children
+		})]
+	});
+};
+//#endregion
+export { ActionBox, ActionLink, BackLink };

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

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

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

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

package/dist/components/actor_template_card/actor_template_card.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+interface ActorTemplateCardProps {
+    id: string;
+    label: string;
+    description: string;
+    icons: React.ReactNode[];
+    useCases?: string[];
+}
+export declare const ActorTemplateCard: React.FC<ActorTemplateCardProps>;
+export {};
+//# sourceMappingURL=actor_template_card.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"actor_template_card.d.ts","sourceRoot":"","sources":["../../../src/components/actor_template_card/actor_template_card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,UAAU,sBAAsB;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;CACvB;AAqDD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA+B9D,CAAC"}

package/dist/components/actor_template_card/actor_template_card.js

@@ -0,0 +1,101 @@
+import { theme } from "../../design_system/theme.js";
+import { TextMarketing } from "../text/text_marketing.js";
+import { Badge } from "../badge/badge.js";
+import { VerticalTile } from "../tile/vertical_tile.js";
+import styled from "styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/actor_template_card/actor_template_card.tsx
+var WrapperClasses = {
+	TEMPLATE_CARD_IMAGES: "TemplateCard-Images",
+	TEMPLATE_CARD_TEXT: "TemplateCard-Text",
+	TEMPLATE_CARD_DESCRIPTION: "TemplateCard-Description",
+	TEMPLATE_CARD_BADGES: "TemplateCard-Badges"
+};
+var TemplateCardContentWrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    align-self: stretch;
+    flex: 1 0 0;
+    gap: ${theme.space.space16};
+    color: ${theme.color.neutral.text};
+
+    .${WrapperClasses.TEMPLATE_CARD_IMAGES} {
+        display: flex;
+        align-items: flex-start;
+        gap: ${theme.space.space16};
+        flex-wrap: wrap;
+        img,
+        svg {
+            max-width: ${theme.space.space40};
+            max-height: ${theme.space.space40};
+        }
+    }
+
+    .${WrapperClasses.TEMPLATE_CARD_TEXT} {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        align-self: stretch;
+        gap: ${theme.space.space4};
+
+        .${WrapperClasses.TEMPLATE_CARD_DESCRIPTION} {
+            color: ${theme.color.neutral.textMuted};
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-line-clamp: 3;
+            -webkit-box-orient: vertical;
+        }
+    }
+
+    .${WrapperClasses.TEMPLATE_CARD_BADGES} {
+        display: flex;
+        gap: ${theme.space.space4};
+    }
+`;
+var ActorTemplateCard = ({ id, label, description, icons, useCases }) => {
+	const templateCardContent = /* @__PURE__ */ jsxs(TemplateCardContentWrapper, {
+		"data-test": `actor-template-card-${id}`,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: WrapperClasses.TEMPLATE_CARD_IMAGES,
+				children: icons
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: WrapperClasses.TEMPLATE_CARD_TEXT,
+				children: [/* @__PURE__ */ jsx(TextMarketing, {
+					size: "regular",
+					weight: "bold",
+					children: label
+				}), /* @__PURE__ */ jsx(TextMarketing, {
+					size: "small",
+					className: WrapperClasses.TEMPLATE_CARD_DESCRIPTION,
+					children: description
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: WrapperClasses.TEMPLATE_CARD_BADGES,
+				children: [useCases?.includes("STARTER") && /* @__PURE__ */ jsx(Badge, {
+					variant: "success",
+					children: "Starter"
+				}), useCases?.includes("AI") && /* @__PURE__ */ jsx(Badge, {
+					variant: "success",
+					style: {
+						color: "#6E00F4",
+						fill: "#6E00F4",
+						background: "#E4D4F7"
+					},
+					children: "AI Agent"
+				})]
+			})
+		]
+	});
+	return /* @__PURE__ */ jsx(VerticalTile, {
+		id: `actor-template-card-${id}`,
+		content: templateCardContent,
+		isClickable: true
+	});
+};
+//#endregion
+export { ActorTemplateCard };

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

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

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

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

package/dist/components/avatar/actor_avatar.d.ts

@@ -0,0 +1,18 @@
+import { FC, default as React } from 'react';
+export declare const actorAvatarClassnames: {
+    BASE: string;
+    IMG: string;
+    SVG: string;
+};
+interface ActorAvatarProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    name?: string;
+    className?: string;
+    url?: string | null;
+    alt?: string;
+    size: number;
+    borderRadius?: string | number;
+}
+export declare const ActorAvatarInner: FC<ActorAvatarProps>;
+export declare const ActorAvatar: React.NamedExoticComponent<ActorAvatarProps>;
+export {};
+//# sourceMappingURL=actor_avatar.d.ts.map

package/dist/components/avatar/actor_avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"actor_avatar.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/actor_avatar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAe,MAAM,OAAO,CAAC;AAC7C,OAAO,KAA6E,MAAM,OAAO,CAAC;AAQlG,eAAO,MAAM,qBAAqB;;;;CAIjC,CAAC;AA0BF,UAAU,gBAAiB,SAAQ,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC;IACxE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAClC;AAED,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,gBAAgB,CA6EjD,CAAC;AAEF,eAAO,MAAM,WAAW,8CAA+B,CAAC"}

package/dist/components/avatar/actor_avatar.js

@@ -0,0 +1,85 @@
+import { theme } from "../../design_system/theme.js";
+import { useSharedUiDependencies } from "../../ui_dependency_provider.js";
+import { useImageColor } from "../../utils/image_color.js";
+import { BoringAvatarMarble } from "./boring_avatar.js";
+import styled from "styled-components";
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import clsx$1 from "clsx";
+//#region src/components/avatar/actor_avatar.tsx
+var actorAvatarClassnames = {
+	BASE: "ActorAvatar",
+	IMG: "ActorAvatar-image",
+	SVG: "ActorAvatar-svg"
+};
+var StyledBoringAvatarMarble = styled(BoringAvatarMarble)`
+    border-radius: ${({ $borderRadius }) => $borderRadius};
+
+    text {
+        ${theme.typography.shared.mobile.bodyMStrong}
+
+        @media (min-width: ${theme.layout.tablet}) {
+            ${theme.typography.shared.tablet.bodyMStrong}
+        }
+        @media (min-width: ${theme.layout.desktop}) {
+            ${theme.typography.shared.desktop.bodyMStrong}
+        }
+
+        fill: ${theme.color.neutral.background};
+        color: ${theme.color.neutral.background};
+        text-transform: uppercase;
+        white-space: pre;
+    }
+`;
+var StyledImg = styled.img`
+    border-radius: ${theme.radius.radius8};
+`;
+var ActorAvatarInner = ({ name, className, url, size, alt, borderRadius = theme.radius.radius8, ...rest }) => {
+	const [hasImageError, setHasImageError] = useState(false);
+	useEffect(() => {
+		setHasImageError(false);
+	}, [url]);
+	const { generateProxyImageUrl } = useSharedUiDependencies();
+	const maybeProxiedUrl = useMemo(() => generateProxyImageUrl && url ? generateProxyImageUrl(url, { resize: {
+		height: size * 2,
+		width: size * 2
+	} }) : url, [
+		generateProxyImageUrl,
+		url,
+		size
+	]);
+	const { color, refCallback } = useImageColor();
+	const imageRef = useRef(null);
+	const imageRefCallback = useCallback((element) => {
+		imageRef.current = element;
+		refCallback(element);
+	}, [refCallback]);
+	const onError = useCallback(() => setHasImageError(true), []);
+	useLayoutEffect(() => {
+		if (imageRef.current) imageRef.current.style.backgroundColor = color?.isLight ? "#1a1b21" : theme.color.neutral.backgroundWhite;
+	}, [color?.isLight]);
+	const fullClassName = clsx$1(actorAvatarClassnames.BASE, maybeProxiedUrl ? actorAvatarClassnames.IMG : actorAvatarClassnames.SVG, className);
+	const altText = alt || `${name} avatar`;
+	if (maybeProxiedUrl && !hasImageError) return /* @__PURE__ */ jsx(StyledImg, {
+		ref: imageRefCallback,
+		crossOrigin: "anonymous",
+		src: maybeProxiedUrl,
+		className: fullClassName,
+		width: size,
+		height: size,
+		alt: altText,
+		onError,
+		...rest
+	});
+	return /* @__PURE__ */ jsx(StyledBoringAvatarMarble, {
+		size,
+		className: fullClassName,
+		name,
+		square: true,
+		alt: altText,
+		$borderRadius: borderRadius
+	});
+};
+var ActorAvatar = React.memo(ActorAvatarInner);
+//#endregion
+export { ActorAvatar, ActorAvatarInner, actorAvatarClassnames };

package/dist/components/avatar/boring_avatar.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+interface BoringAvatarProps {
+    name?: string;
+    className?: string;
+    size: number;
+    colors?: string[];
+    square?: boolean;
+    alt?: string;
+}
+export declare const BoringAvatarMarble: React.MemoExoticComponent<({ name, colors, square, className, size, alt, }: BoringAvatarProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const BoringAvatarSolid: React.MemoExoticComponent<({ name, alt, colors, square, className, size, }: BoringAvatarProps) => import("react/jsx-runtime").JSX.Element>;
+export {};
+//# sourceMappingURL=boring_avatar.d.ts.map

package/dist/components/avatar/boring_avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"boring_avatar.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/boring_avatar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAuFvC,UAAU,iBAAiB;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,kBAAkB,8EAQxB,iBAAiB,6CAgEvB,CAAC;AAEF,eAAO,MAAM,iBAAiB,8EAQvB,iBAAiB,6CAiDvB,CAAC"}

package/dist/components/avatar/boring_avatar.js

@@ -0,0 +1,219 @@
+import React, { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import emojiRegex from "emoji-regex";
+//#region src/components/avatar/boring_avatar.tsx
+var emojiRegexPattern = emojiRegex();
+var ELEMENTS = 3;
+var SIZE = 100;
+var IGNORED_WORDS = [
+	"AND",
+	"A",
+	"THE",
+	"AN"
+];
+function hashCode(name) {
+	if (!name) return 0;
+	let hash = 0;
+	for (let i = 0; i < name.length; i++) {
+		const character = name.charCodeAt(i);
+		hash = (hash << 5) - hash + character;
+		hash &= hash;
+	}
+	return Math.abs(hash);
+}
+function getDigit(number, ntn) {
+	return Math.floor(number / 10 ** ntn % 10);
+}
+function getUnit(number, range, index) {
+	const value = number % range;
+	if (index && getDigit(number, index) % 2 === 0) return -value;
+	return value;
+}
+function generateProperties(name, colors) {
+	const numFromName = hashCode(name);
+	const elementsProperties = [];
+	for (let i = 0; i < ELEMENTS; i++) elementsProperties.push({
+		color: colors[(numFromName + (i + 1)) % colors.length],
+		translateX: getUnit(numFromName * (i + 1), SIZE / 10, 1),
+		translateY: getUnit(numFromName * (i + 1), SIZE / 10, 2),
+		scale: 1.2 + getUnit(numFromName * (i + 1), SIZE / 20) / 10,
+		rotate: getUnit(numFromName * (i + 1), 360, 1)
+	});
+	return elementsProperties;
+}
+function generateFill(properties, name) {
+	const { translateX: translateX1, translateY: translateY1, rotate: rotate1 } = properties[1];
+	const { translateX: translateX2, translateY: translateY2, rotate: rotate2, scale } = properties[2];
+	let nameParts = name.replace(emojiRegexPattern, " ").trim().replace(/\s+/g, " ").toUpperCase().split(" ");
+	if (nameParts.length <= 1) nameParts = nameParts[0].split("-");
+	if (nameParts.length <= 1) nameParts = nameParts[0].split("_");
+	if (nameParts.length <= 1) nameParts = nameParts[0].split(".");
+	if (nameParts.length <= 1) nameParts = nameParts[0].split("");
+	if (nameParts.length > 2) nameParts = nameParts.filter((part) => !IGNORED_WORDS.includes(part));
+	return {
+		fill0: properties[0].color,
+		fill1: properties[1].color,
+		fill2: properties[2].color,
+		transform1: `translate(${translateX1} ${translateY1}) rotate(${rotate1} ${SIZE / 2} ${SIZE / 2}) scale(${scale})`,
+		transform2: `translate(${translateX2} ${translateY2}) rotate(${rotate2} ${SIZE / 2} ${SIZE / 2}) scale(${scale})`,
+		letter1: nameParts?.[0]?.[0] ?? void 0,
+		letter2: nameParts?.[1]?.[0] ?? void 0
+	};
+}
+var BoringAvatarMarble = React.memo(({ name = "", colors = [
+	"#12966F",
+	"#5D85E1",
+	"#E44467",
+	"#F0B21B",
+	"#FA8136",
+	"#30C0BB"
+], square = false, className, size = 24, alt = "Avatar image" }) => {
+	const fill = useMemo(() => {
+		return generateFill(generateProperties(name ?? "", colors), name ?? "");
+	}, [name, colors]);
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: `0 0 ${SIZE} ${SIZE}`,
+		fill: "none",
+		role: "img",
+		xmlns: "http://www.w3.org/2000/svg",
+		width: size,
+		height: size,
+		className,
+		"aria-label": alt,
+		children: [
+			/* @__PURE__ */ jsx("mask", {
+				id: "mask__marble",
+				maskUnits: "userSpaceOnUse",
+				x: 0,
+				y: 0,
+				width: SIZE,
+				height: SIZE,
+				children: /* @__PURE__ */ jsx("rect", {
+					width: SIZE,
+					height: SIZE,
+					rx: square ? void 0 : SIZE * 2,
+					fill: "#FFFFFF"
+				})
+			}),
+			/* @__PURE__ */ jsxs("g", {
+				mask: "url(#mask__marble)",
+				children: [
+					/* @__PURE__ */ jsx("rect", {
+						width: SIZE,
+						height: SIZE,
+						fill: fill.fill0
+					}),
+					/* @__PURE__ */ jsx("path", {
+						filter: "url(#prefix__filter0_f)",
+						d: "M32.414 59.35L50.376 70.5H72.5v-71H33.728L26.5 13.381l19.057 27.08L32.414 59.35z",
+						fill: fill.fill1,
+						transform: fill.transform1
+					}),
+					/* @__PURE__ */ jsx("path", {
+						filter: "url(#prefix__filter0_f)",
+						style: { mixBlendMode: "overlay" },
+						d: "M22.216 24L0 46.75l14.108 38.129L78 86l-3.081-59.276-22.378 4.005 12.972 20.186-23.35 27.395L22.215 24z",
+						fill: fill.fill2,
+						transform: fill.transform2
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("g", { children: fill.letter1 && /* @__PURE__ */ jsxs("text", {
+				style: { fontSize: "50px" },
+				x: "50",
+				y: "50",
+				dy: "7",
+				textAnchor: "middle",
+				alignmentBaseline: "middle",
+				dominantBaseline: "middle",
+				children: [fill.letter1, fill.letter2]
+			}) }),
+			/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", {
+				id: "prefix__filter0_f",
+				filterUnits: "userSpaceOnUse",
+				colorInterpolationFilters: "sRGB",
+				children: [
+					/* @__PURE__ */ jsx("feFlood", {
+						floodOpacity: 0,
+						result: "BackgroundImageFix"
+					}),
+					/* @__PURE__ */ jsx("feBlend", {
+						in: "SourceGraphic",
+						in2: "BackgroundImageFix",
+						result: "shape"
+					}),
+					/* @__PURE__ */ jsx("feGaussianBlur", {
+						stdDeviation: 7,
+						result: "effect1_foregroundBlur"
+					})
+				]
+			}) })
+		]
+	});
+});
+var BoringAvatarSolid = React.memo(({ name = "", alt = "Avatar image", colors = [
+	"#B8487B",
+	"#E5B557",
+	"#58BCC4",
+	"#6D85CA",
+	"#8690BF",
+	"#F08848",
+	"#8148C9",
+	"#439274"
+], square = false, className, size = 24 }) => {
+	/**
+	* Name must be lowercased to avoid irregularities caused by caps.
+	* This is an issue in the Actor detail header, where the username comes from the Actor object,
+	* while in the user selector it comes from the user object, where it can have capitals.
+	*/
+	const nameLowercase = name.toLowerCase();
+	const fill = useMemo(() => {
+		return generateFill(generateProperties(nameLowercase, colors), nameLowercase);
+	}, [nameLowercase, colors]);
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: `0 0 ${SIZE} ${SIZE}`,
+		fill: "none",
+		role: "img",
+		xmlns: "http://www.w3.org/2000/svg",
+		width: size,
+		height: size,
+		className,
+		"aria-label": alt,
+		children: [
+			/* @__PURE__ */ jsx("mask", {
+				id: "mask__solid",
+				maskUnits: "userSpaceOnUse",
+				x: 0,
+				y: 0,
+				width: SIZE,
+				height: SIZE,
+				children: /* @__PURE__ */ jsx("rect", {
+					width: SIZE,
+					height: SIZE,
+					rx: square ? void 0 : SIZE * 2,
+					fill: "#FFFFFF"
+				})
+			}),
+			/* @__PURE__ */ jsx("g", {
+				mask: "url(#mask__solid)",
+				children: /* @__PURE__ */ jsx("rect", {
+					width: SIZE,
+					height: SIZE,
+					fill: fill.fill0
+				})
+			}),
+			/* @__PURE__ */ jsx("g", { children: fill.letter1 && /* @__PURE__ */ jsxs("text", {
+				style: { fontSize: "50px" },
+				x: "50",
+				y: "50",
+				dy: "7",
+				textAnchor: "middle",
+				alignmentBaseline: "middle",
+				dominantBaseline: "middle",
+				children: [fill.letter1, fill.letter2]
+			}) })
+		]
+	});
+});
+//#endregion
+export { BoringAvatarMarble, BoringAvatarSolid };

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC"}

package/dist/components/avatar/user_avatar.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+export declare const userAvatarBaseClassNames: {
+    BASE: string;
+    IMG: string;
+    SVG: string;
+};
+interface UserAvatarProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    name?: string;
+    className?: string;
+    url?: string | null;
+    alt?: string;
+    size: number;
+    asOrganization?: boolean;
+}
+export declare const UserAvatar: React.NamedExoticComponent<UserAvatarProps>;
+export {};
+//# sourceMappingURL=user_avatar.d.ts.map

package/dist/components/avatar/user_avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"user_avatar.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/user_avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAUzC,eAAO,MAAM,wBAAwB;;;;CAIpC,CAAC;AA0BF,UAAU,eAAgB,SAAQ,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC;IACvE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,cAAc,CAAC,EAAE,OAAO,CAAC;CAC5B;AA+CD,eAAO,MAAM,UAAU,6CAA8B,CAAC"}

package/dist/components/avatar/user_avatar.js

@@ -0,0 +1,72 @@
+import { theme } from "../../design_system/theme.js";
+import { useSharedUiDependencies } from "../../ui_dependency_provider.js";
+import { BoringAvatarSolid } from "./boring_avatar.js";
+import styled from "styled-components";
+import React, { useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+import clsx$1 from "clsx";
+//#region src/components/avatar/user_avatar.tsx
+var DEFAULT_USER_PICTURE_URL = "https://cdn.apify.com/img/icons/anonymous_user_picture.png";
+var DEFAULT_ORGANIZATION_PICTURE_URL = "https://cdn.apify.com/img/icons/anonymous_organization_picture.png";
+var userAvatarBaseClassNames = {
+	BASE: "UserAvatar",
+	IMG: "UserAvatar-image",
+	SVG: "UserAvatar-svg"
+};
+var StyledBoringAvatarSolid = styled(BoringAvatarSolid)`
+    border-radius: 100%;
+
+    text {
+        ${theme.typography.shared.mobile.bodyMStrong};
+
+        @media ${theme.device.tablet} {
+            ${theme.typography.shared.tablet.bodyMStrong}
+        }
+        @media ${theme.device.desktop} {
+            ${theme.typography.shared.desktop.bodyMStrong}
+        }
+
+        fill: ${theme.color.neutral.background};
+        color: ${theme.color.neutral.background};
+        text-transform: uppercase;
+        white-space: pre;
+    }
+`;
+var StyledImg = styled.img`
+    border-radius: 100%;
+`;
+var UserAvatarInner = ({ name, className, url, size, alt, asOrganization, ...rest }) => {
+	const [imgError, setImgError] = React.useState(false);
+	const { generateProxyImageUrl } = useSharedUiDependencies();
+	const fullClassName = clsx$1(userAvatarBaseClassNames.BASE, url ? userAvatarBaseClassNames.IMG : userAvatarBaseClassNames.SVG, className);
+	useEffect(() => {
+		setImgError(false);
+	}, [url]);
+	const onImageError = ({ currentTarget }) => {
+		if (imgError || !currentTarget) return;
+		currentTarget.src = asOrganization ? DEFAULT_ORGANIZATION_PICTURE_URL : DEFAULT_USER_PICTURE_URL;
+		setImgError(true);
+	};
+	const altText = alt || `${name} avatar`;
+	if (url) return /* @__PURE__ */ jsx(StyledImg, {
+		className: fullClassName,
+		src: generateProxyImageUrl ? generateProxyImageUrl(url, { resize: {
+			height: size * 2,
+			width: size * 2
+		} }) : url,
+		width: size,
+		height: size,
+		alt: altText,
+		onError: onImageError,
+		...rest
+	});
+	return /* @__PURE__ */ jsx(StyledBoringAvatarSolid, {
+		alt: altText,
+		size,
+		className: fullClassName,
+		name
+	});
+};
+var UserAvatar = React.memo(UserAvatarInner);
+//#endregion
+export { UserAvatar, userAvatarBaseClassNames };