@apify/ui-library 1.168.2 → 1.168.3

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

@@ -0,0 +1,9 @@
+import { BoxProps } from '../box';
+type BorderedActorAvatarProps = BoxProps & {
+    name?: string;
+    url?: string | null;
+    size: 24 | 32 | 40 | 44;
+};
+export declare const BorderedActorAvatar: ({ size, name, url, ...rest }: BorderedActorAvatarProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=bordered_actor_avatar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bordered_actor_avatar.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/bordered_actor_avatar.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAC;AA2B5C,KAAK,wBAAwB,GAAG,QAAQ,GAAG;IACvC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,IAAI,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,8BAA8B,wBAAwB,4CAQzF,CAAC"}

package/dist/components/avatar/bordered_actor_avatar.js

@@ -0,0 +1,43 @@
+import { theme } from "../../design_system/theme.js";
+import { Box } from "../box/box.js";
+import { ActorAvatar, getActorAvatarBorderRadius } from "./actor_avatar.js";
+import styled from "styled-components";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/avatar/bordered_actor_avatar.tsx
+var BORDER_WIDTH = 1;
+/** Computes border, padding, and radius dimensions for the bordered wrapper. */
+var getBorderedStyle = (size) => {
+	const padding = size < 40 ? 2 : 3;
+	const outerRadius = getActorAvatarBorderRadius(size);
+	return {
+		padding,
+		outerRadius,
+		innerRadius: Math.max(outerRadius - 3, 2),
+		innerSize: Math.max(size - (BORDER_WIDTH + padding) * 2, 1)
+	};
+};
+var StyledBorder = styled(Box)`
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: ${BORDER_WIDTH}px solid ${theme.color.neutral.border};
+    border-radius: ${({ $outerRadius }) => $outerRadius}px;
+    padding: ${({ $padding }) => $padding}px;
+    overflow: hidden;
+`;
+var BorderedActorAvatar = ({ size, name, url, ...rest }) => {
+	const { padding, outerRadius, innerRadius, innerSize } = getBorderedStyle(size);
+	return /* @__PURE__ */ jsx(StyledBorder, {
+		$outerRadius: outerRadius,
+		$padding: padding,
+		...rest,
+		children: /* @__PURE__ */ jsx(ActorAvatar, {
+			size: innerSize,
+			borderRadius: `${innerRadius}px`,
+			name,
+			url
+		})
+	});
+};
+//#endregion
+export { BorderedActorAvatar };

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

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

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

@@ -1 +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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC"}

package/dist/files_hash_at_build.txt

@@ -1 +1 @@
-a2d247d1afb128e6a7eb2f43c65b0e0bb5734052
+7835890d711d7d59c8f24587dfdd978a7e98a49a

package/dist/index.js

@@ -25,6 +25,7 @@ import { HeadingMarketing } from "./components/text/heading_marketing.js";
 import { UiDependencyProvider, useSharedUiDependencies } from "./ui_dependency_provider.js";
 import { useImageColor } from "./utils/image_color.js";
 import { ActorAvatar, ActorAvatarInner, actorAvatarClassnames, getActorAvatarBorderRadius } from "./components/avatar/actor_avatar.js";
+import { BorderedActorAvatar } from "./components/avatar/bordered_actor_avatar.js";
 import { UserAvatar, userAvatarBaseClassNames } from "./components/avatar/user_avatar.js";
 import { CardContainer, cardContainerClassNames } from "./components/card_container/card_container.js";
 import { Link, StyledAsLink, hasUrlHttpProtocol, isUrlEmail, isUrlExternal, omitDomainAndProtocol } from "./components/link/link.js";
@@ -104,4 +105,4 @@ import { TableEmptyRow } from "./components/table/table_empty_row.js";
 import { TableLoadingRow } from "./components/table/table_loading_row.js";
 import { TableErrorRow } from "./components/table/table_error_row.js";
 import { Breadcrumbs, breadcrumbClassNames } from "./components/breadcrumb/breadcrumb.js";
-export { APIFY_HOSTNAMES, ActionBox, ActionLink, ActorAvatar, ActorAvatarInner, ActorTemplateCard, AnthropicBrandIcon, BADGE_SIZES, BADGE_VARIANTS, BUTTON_COLOR_VARIANTS_CSS, BUTTON_SIZE_VARIANTS_CSS, BackLink, Badge, Banner, BlockSpinner, BlogArticle, Box, Breadcrumbs, BrowserWindow, Button, CHIP_SIZES, CHIP_TYPES, CODE_BLOCK_TAB_CATALOG, CODE_BLOCK_WITH_TABS_CLASSNAMES, Card, CardContainer, ChatGptBrandIcon, CheckboxPrimitive, Chip, ClaudeBrandIcon, CodeBlock, CodeBlockWithTabs, CodeHighlighterLineBashPrefix, CodeHighlighterLinePrefix, CollapsibleCard, ColorWheelGradient, CursorBrandIcon, DEVELOPER_BADGE, DROPDOWN_ELEMENT_CLASSES, DangerChip, DangerMessage, DeveloperBadge, DiscordBrandIcon, DiscordSolidBrandIcon, Dropdown, DropdownButton, DropdownMenuBaseComponent, DropdownMenuBaseComponentWithCount, DropdownShell, FLOATING_PLACEMENT, GithubBrandIcon, HeadingShared as Heading, HeadingContent, HeadingMarketing, HorizontalTile, HorizontallyScrollableTableWrapper, ICON_BUTTON_VARIANTS, IconButton, Image, IndeterminateCheckbox, InfoMessage, InlineCode, InlineSpinner, Link, LinkedinBrandIcon, LinkedinSolidBrandIcon, ListMenuComponent, ListMenuItemComponent, MakeBrandIcon, MemoizedMarkdown as Markdown, MarkdownBlockQuote, MarkdownCode, MarkdownHeadingWrapper, MarkdownLink, MarkdownParagraphContent, MarkdownPlainHeading, MarkdownTable, Menu, Message, N8nBrandIcon, NeutralChip, OneLineCode, PaginationButtons, PerplexityBrandIcon, PlainMenuBaseComponent, PrimaryChip, PrismSyntaxHighlighter, RadioButtonPrimitive, Rating, RatingStats, SHARED_TEXT_TYPES, SelectMultiValueRemove, SelectPrimitive, Shortcut, SimpleMarkdown, SingleStarRating, Spinner, SplitButton, StoreActorHeader, StyledAsLink, StyledCardWrapper, SuccessChip, SuccessMessage, SwitchPrimitive, TAB_CLASSNAMES, TAG_SIZES, TAG_VARIANTS, TOOLTIP_SIZES, TOOLTIP_TEXT_ALIGNS, Tab, TabNumberChip, Table, TableBody, TableCell, TableCellLink, TableEmptyRow, TableErrorRow, TableExpansionRow, TableFoot, TableHead, TableHeadCell, TableHeadRow, TableLoadingRow, TableOfContents, TableRow, Tabs, Tag, TextShared as Text, TextShared, TextBaseComponent, TextContent, TextMarketing, Tooltip, TwitterBrandIcon, UiDependencyProvider, UserAvatar, VerticalTile, WarningChip, WarningMessage, YoutubeBrandIcon, ZapierBrandIcon, actorAvatarClassnames, breadcrumbClassNames, classNames as browserWindowClassNames, cardClassNames, cardContainerClassNames, clampLines, classNames$1 as classNames, cleanMarkdown, collapsibleCardClassNames, colorProperties, cssColorsVariablesBrandDark, tokens as cssColorsVariablesDark, tokens$1 as cssColorsVariablesLight, tokens$2 as cssColorsVariablesPaletteDark, tokens$3 as cssColorsVariablesPaletteLight, darkTheme, defaultAllowedElements, defaultRehypePlugins, defaultRemarkPlugins, developerBadgeTestIds, devices, getActorAvatarBorderRadius, getButtonColorStyles, getButtonDisabledStyles, getButtonSizeStyles, getResponsiveStyles, getResponsiveValueAtBreakpoint, gradients, hasUrlHttpProtocol, inlineCodeStyles, isResponsiveObject, isUrlEmail, isUrlExternal, layouts, lightTheme, menuClassNames, messageClassNames, omitDomainAndProtocol, oneLineCodeClassNames, pythonizeValue, radiuses, regularMarkdownSizeComponents, sanitizeUrl, selectDefaultGetIsSelected, shadows, slugifyHeadingChildren, smallMarkdownSizeComponents, spaces, spinnerClassNames, splitButtonClassNames, splitButtonMainActionTestId, splitButtonTriggerTestId, tableClassNames, tableTestIds, theme, transitions, useActorTitleHeadingFilter, useCopyToClipboard, useDefaultUrlTransform, useFloatingMenu, useImageColor, useResizeObserverSsr, useSharedUiDependencies, useShowTableOfContents, userAvatarBaseClassNames, withColor, withGradient, withReactSelectTheme, withSize, withTooltip };
+export { APIFY_HOSTNAMES, ActionBox, ActionLink, ActorAvatar, ActorAvatarInner, ActorTemplateCard, AnthropicBrandIcon, BADGE_SIZES, BADGE_VARIANTS, BUTTON_COLOR_VARIANTS_CSS, BUTTON_SIZE_VARIANTS_CSS, BackLink, Badge, Banner, BlockSpinner, BlogArticle, BorderedActorAvatar, Box, Breadcrumbs, BrowserWindow, Button, CHIP_SIZES, CHIP_TYPES, CODE_BLOCK_TAB_CATALOG, CODE_BLOCK_WITH_TABS_CLASSNAMES, Card, CardContainer, ChatGptBrandIcon, CheckboxPrimitive, Chip, ClaudeBrandIcon, CodeBlock, CodeBlockWithTabs, CodeHighlighterLineBashPrefix, CodeHighlighterLinePrefix, CollapsibleCard, ColorWheelGradient, CursorBrandIcon, DEVELOPER_BADGE, DROPDOWN_ELEMENT_CLASSES, DangerChip, DangerMessage, DeveloperBadge, DiscordBrandIcon, DiscordSolidBrandIcon, Dropdown, DropdownButton, DropdownMenuBaseComponent, DropdownMenuBaseComponentWithCount, DropdownShell, FLOATING_PLACEMENT, GithubBrandIcon, HeadingShared as Heading, HeadingContent, HeadingMarketing, HorizontalTile, HorizontallyScrollableTableWrapper, ICON_BUTTON_VARIANTS, IconButton, Image, IndeterminateCheckbox, InfoMessage, InlineCode, InlineSpinner, Link, LinkedinBrandIcon, LinkedinSolidBrandIcon, ListMenuComponent, ListMenuItemComponent, MakeBrandIcon, MemoizedMarkdown as Markdown, MarkdownBlockQuote, MarkdownCode, MarkdownHeadingWrapper, MarkdownLink, MarkdownParagraphContent, MarkdownPlainHeading, MarkdownTable, Menu, Message, N8nBrandIcon, NeutralChip, OneLineCode, PaginationButtons, PerplexityBrandIcon, PlainMenuBaseComponent, PrimaryChip, PrismSyntaxHighlighter, RadioButtonPrimitive, Rating, RatingStats, SHARED_TEXT_TYPES, SelectMultiValueRemove, SelectPrimitive, Shortcut, SimpleMarkdown, SingleStarRating, Spinner, SplitButton, StoreActorHeader, StyledAsLink, StyledCardWrapper, SuccessChip, SuccessMessage, SwitchPrimitive, TAB_CLASSNAMES, TAG_SIZES, TAG_VARIANTS, TOOLTIP_SIZES, TOOLTIP_TEXT_ALIGNS, Tab, TabNumberChip, Table, TableBody, TableCell, TableCellLink, TableEmptyRow, TableErrorRow, TableExpansionRow, TableFoot, TableHead, TableHeadCell, TableHeadRow, TableLoadingRow, TableOfContents, TableRow, Tabs, Tag, TextShared as Text, TextShared, TextBaseComponent, TextContent, TextMarketing, Tooltip, TwitterBrandIcon, UiDependencyProvider, UserAvatar, VerticalTile, WarningChip, WarningMessage, YoutubeBrandIcon, ZapierBrandIcon, actorAvatarClassnames, breadcrumbClassNames, classNames as browserWindowClassNames, cardClassNames, cardContainerClassNames, clampLines, classNames$1 as classNames, cleanMarkdown, collapsibleCardClassNames, colorProperties, cssColorsVariablesBrandDark, tokens as cssColorsVariablesDark, tokens$1 as cssColorsVariablesLight, tokens$2 as cssColorsVariablesPaletteDark, tokens$3 as cssColorsVariablesPaletteLight, darkTheme, defaultAllowedElements, defaultRehypePlugins, defaultRemarkPlugins, developerBadgeTestIds, devices, getActorAvatarBorderRadius, getButtonColorStyles, getButtonDisabledStyles, getButtonSizeStyles, getResponsiveStyles, getResponsiveValueAtBreakpoint, gradients, hasUrlHttpProtocol, inlineCodeStyles, isResponsiveObject, isUrlEmail, isUrlExternal, layouts, lightTheme, menuClassNames, messageClassNames, omitDomainAndProtocol, oneLineCodeClassNames, pythonizeValue, radiuses, regularMarkdownSizeComponents, sanitizeUrl, selectDefaultGetIsSelected, shadows, slugifyHeadingChildren, smallMarkdownSizeComponents, spaces, spinnerClassNames, splitButtonClassNames, splitButtonMainActionTestId, splitButtonTriggerTestId, tableClassNames, tableTestIds, theme, transitions, useActorTitleHeadingFilter, useCopyToClipboard, useDefaultUrlTransform, useFloatingMenu, useImageColor, useResizeObserverSsr, useSharedUiDependencies, useShowTableOfContents, userAvatarBaseClassNames, withColor, withGradient, withReactSelectTheme, withSize, withTooltip };

package/dist/src/components/avatar/bordered_actor_avatar.d.ts

@@ -0,0 +1,9 @@
+import { type BoxProps } from '../box';
+type BorderedActorAvatarProps = BoxProps & {
+    name?: string;
+    url?: string | null;
+    size: 24 | 32 | 40 | 44;
+};
+export declare const BorderedActorAvatar: ({ size, name, url, ...rest }: BorderedActorAvatarProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=bordered_actor_avatar.d.ts.map

package/dist/src/components/avatar/bordered_actor_avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bordered_actor_avatar.d.ts","sourceRoot":"","sources":["../../../../src/components/avatar/bordered_actor_avatar.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAC;AA2B5C,KAAK,wBAAwB,GAAG,QAAQ,GAAG;IACvC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,IAAI,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,8BAA8B,wBAAwB,4CAQzF,CAAC"}

package/dist/src/components/avatar/bordered_actor_avatar.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { theme } from '../../design_system/theme';
+import { Box } from '../box';
+import { ActorAvatar, getActorAvatarBorderRadius } from './actor_avatar';
+const BORDER_WIDTH = 1;
+/** Computes border, padding, and radius dimensions for the bordered wrapper. */
+const getBorderedStyle = (size) => {
+    const padding = size < 40 ? 2 : 3;
+    const outerRadius = getActorAvatarBorderRadius(size);
+    const innerRadius = Math.max(outerRadius - 3, 2);
+    const innerSize = Math.max(size - (BORDER_WIDTH + padding) * 2, 1);
+    return { padding, outerRadius, innerRadius, innerSize };
+};
+const StyledBorder = styled(Box) `
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: ${BORDER_WIDTH}px solid ${theme.color.neutral.border};
+    border-radius: ${({ $outerRadius }) => $outerRadius}px;
+    padding: ${({ $padding }) => $padding}px;
+    overflow: hidden;
+`;
+export const BorderedActorAvatar = ({ size, name, url, ...rest }) => {
+    const { padding, outerRadius, innerRadius, innerSize } = getBorderedStyle(size);
+    return (_jsx(StyledBorder, { "$outerRadius": outerRadius, "$padding": padding, ...rest, children: _jsx(ActorAvatar, { size: innerSize, borderRadius: `${innerRadius}px`, name: name, url: url }) }));
+};
+//# sourceMappingURL=bordered_actor_avatar.js.map

package/dist/src/components/avatar/bordered_actor_avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bordered_actor_avatar.js","sourceRoot":"","sources":["../../../../src/components/avatar/bordered_actor_avatar.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAClD,OAAO,EAAE,GAAG,EAAiB,MAAM,QAAQ,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,0BAA0B,EAAE,MAAM,gBAAgB,CAAC;AAEzE,MAAM,YAAY,GAAG,CAAC,CAAC;AAEvB,gFAAgF;AAChF,MAAM,gBAAgB,GAAG,CAAC,IAAY,EAAE,EAAE;IACtC,MAAM,OAAO,GAAG,IAAI,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAClC,MAAM,WAAW,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACrD,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,WAAW,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;IACjD,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC,YAAY,GAAG,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;IAEnE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC;AAC5D,CAAC,CAAC;AAIF,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAC,CAAmB;;;;cAIrC,YAAY,YAAY,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM;qBAC3C,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY;eACxC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ;;CAExC,CAAC;AAQF,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,IAAI,EAA4B,EAAE,EAAE;IAC1F,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAEhF,OAAO,CACH,KAAC,YAAY,oBAAe,WAAW,cAAY,OAAO,KAAM,IAAI,YAChE,KAAC,WAAW,IAAC,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,WAAW,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,GAAI,GAC7E,CAClB,CAAC;AACN,CAAC,CAAC"}

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

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

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

@@ -1 +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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/avatar/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC"}

package/dist/src/components/avatar/index.js

@@ -1,3 +1,4 @@
 export * from './actor_avatar';
+export * from './bordered_actor_avatar';
 export * from './user_avatar';
 //# sourceMappingURL=index.js.map

package/dist/src/components/avatar/index.js.map

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