@apify/ui-library 1.121.0 → 1.123.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.121.0",
+    "version": "1.123.0",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -65,5 +65,5 @@
         "src",
         "style"
     ],
-    "gitHead": "234eb45c25c1f6b5f0943da5fc4cd2c5fecd2afd"
+    "gitHead": "3c83585389c9e8c4e8449ae090dad74640cfaf23"
 }

package/src/components/{store → avatar}/actor_avatar.stories.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { ActorAvatar } from './actor_avatar.js';
 
 const meta = {
-    title: 'UI-Library/Store/ActorAvatar',
+    title: 'UI-Library/Avatar/ActorAvatar',
     component: ActorAvatar,
     parameters: {
         layout: 'padded',

package/src/components/{store → avatar}/actor_avatar.tsx

@@ -3,12 +3,10 @@ import type { FC, RefCallback } from 'react';
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import styled from 'styled-components';
 
-import {
-    BoringAvatarMarble,
-    theme,
-    useImageColor,
-    useSharedUiDependencies,
-} from '../../index.js';
+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';
 
 export const actorAvatarClassnames = {
     BASE: 'ActorAvatar',

package/src/components/avatar/index.ts

@@ -0,0 +1,2 @@
+export * from './actor_avatar.js';
+export * from './user_avatar.js';

package/src/components/avatar/user_avatar.stories.tsx

@@ -0,0 +1,111 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import React from 'react';
+import styled from 'styled-components';
+
+import { UserAvatar } from './user_avatar.js';
+
+const meta = {
+    title: 'UI-Library/Avatar/UserAvatar',
+    component: UserAvatar,
+    parameters: {
+        layout: 'padded',
+    },
+    argTypes: {
+        name: {
+            control: 'text',
+            description: 'Name used to generate the avatar when no URL is provided',
+        },
+        url: {
+            control: 'text',
+            description: 'URL of the avatar image',
+        },
+        size: {
+            control: 'number',
+            description: 'Size of the avatar in pixels',
+        },
+        alt: {
+            control: 'text',
+            description: 'Alt text for the avatar image',
+        },
+        asOrganization: {
+            control: 'boolean',
+            description: 'Whether to display as organization avatar with organization fallback',
+        },
+    },
+} satisfies Meta<typeof UserAvatar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        name: 'John Doe',
+        size: 64,
+    },
+};
+
+export const Sizes: Story = {
+    render: () => (
+        <div style={{ display: 'flex', gap: '16px', alignItems: 'flex-end' }}>
+            {[24, 32, 40, 48, 64, 80, 128].map((size) => (
+                <div key={size} style={{ textAlign: 'center' }}>
+                    <UserAvatar name="John Doe" size={size} />
+                    <p style={{ marginTop: '8px', fontSize: '12px' }}>{size}px</p>
+                </div>
+            ))}
+        </div>
+    ),
+};
+
+const WithImageUrlShowcase = styled.div`
+    display: flex;
+    flex-direction: row;
+    gap: 16px;
+    margin-top: 16px;
+
+    div {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: 100px;
+        text-align: center;
+    }
+
+    small {
+        display: block;
+        color: #666;
+        font-size: 0.875rem;
+        margin-bottom: 0.5rem;
+    }
+`;
+export const WithImageUrl: Story = {
+    render: () => (
+        <WithImageUrlShowcase>
+            <div>
+                <UserAvatar
+                    name="John Doe"
+                    url="https://apify.github.io/apify-web/img/apify-logo/logomark-32x32.svg"
+                    size={64}
+                />
+                <small>With image</small>
+            </div>
+            <div>
+                <UserAvatar
+                    name="John Doe"
+                    url="https://wrong-url-to-trigger-error.com/avatar.png"
+                    size={64}
+                />
+                <small>With broken image URL</small>
+            </div>
+            <div>
+                <UserAvatar
+                    name="Apify"
+                    url="https://wrong-url-to-trigger-error.com/avatar.png"
+                    size={64}
+                    asOrganization={true}
+                />
+                <small>With broken image URL as organization</small>
+            </div>
+        </WithImageUrlShowcase>
+    ),
+};

package/src/components/avatar/user_avatar.tsx

@@ -0,0 +1,111 @@
+import clsx from 'clsx';
+import type { FC } from 'react';
+import React, { useEffect } from 'react';
+import styled from 'styled-components';
+
+import { theme } from '../../design_system/theme.js';
+import { useSharedUiDependencies } from '../../ui_dependency_provider.js';
+import { BoringAvatarSolid } from './boring_avatar.js';
+
+const DEFAULT_USER_PICTURE_URL = 'https://cdn.apify.com/img/icons/anonymous_user_picture.png';
+const DEFAULT_ORGANIZATION_PICTURE_URL = 'https://cdn.apify.com/img/icons/anonymous_organization_picture.png';
+
+export const userAvatarBaseClassNames = {
+    BASE: 'UserAvatar',
+    IMG: 'UserAvatar-image',
+    SVG: 'UserAvatar-svg',
+};
+
+const 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;
+    }
+`;
+
+const StyledImg = styled.img`
+    border-radius: 100%;
+`;
+
+interface UserAvatarProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    name?: string;
+    className?: string;
+    url?: string;
+    alt?: string;
+    size: number;
+    asOrganization?: boolean;
+}
+
+const UserAvatarInner: FC<UserAvatarProps> = ({
+    name,
+    className,
+    url,
+    size,
+    alt,
+    asOrganization,
+    ...rest
+}) => {
+    const [imgError, setImgError] = React.useState(false);
+    const { generateProxyImageUrl } = useSharedUiDependencies();
+
+    const fullClassName = clsx(
+        userAvatarBaseClassNames.BASE,
+        url ? userAvatarBaseClassNames.IMG : userAvatarBaseClassNames.SVG,
+        className,
+    );
+
+    // Whenever the url changes, reset the img error state.
+    useEffect(() => {
+        setImgError(false);
+    }, [url]);
+
+    const onImageError = ({ currentTarget }: { currentTarget: HTMLImageElement }) => {
+        if (imgError || !currentTarget) return;
+
+        // eslint-disable-next-line no-param-reassign
+        currentTarget.src = asOrganization ? DEFAULT_ORGANIZATION_PICTURE_URL : DEFAULT_USER_PICTURE_URL;
+        setImgError(true);
+    };
+
+    const altText = alt || `${name} avatar`;
+
+    if (url) {
+        return (
+            <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 (
+        <StyledBoringAvatarSolid
+            alt={altText}
+            size={size}
+            className={fullClassName}
+            name={name}
+        />
+    );
+};
+
+export const UserAvatar = React.memo(UserAvatarInner);

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

@@ -13,12 +13,6 @@ export default {
     component: CodeBlock,
 };
 
-const shuffleLines = (code) => {
-    const lines = code.split('\n');
-    const shuffledLines = lines.sort(() => Math.random() - 0.5);
-    return shuffledLines.join('\n');
-};
-
 const Template = ({ content, ...args }) => {
     const longCode = `${Array.from(
         { length: 20 },
@@ -27,13 +21,13 @@ const Template = ({ content, ...args }) => {
     const multipleCodes = Array.from({ length: 5 }, (_, i) => ({
         key: i,
         label: `Code ${i}`,
-        code: shuffleLines(content),
+        code: content,
     }));
     const multipleLongCodes = Array.from({ length: 5 }, (_, i) => ({
         key: i,
         label: `Code ${i}`,
-        code: shuffleLines(longCode),
-        highlightLines: Array.from({ length: 3 }, () => Math.floor(Math.random() * 10)),
+        code: longCode,
+        highlightLines: [1, 3, 5],
     }));
     return (
         <div

package/src/components/icon_button.tsx

@@ -17,6 +17,7 @@ export const ICON_BUTTON_VARIANTS = {
     BORDERED: 'BORDERED',
     DANGER: 'DANGER',
     DANGER_BORDERED: 'DANGER_BORDERED',
+    PRIMARY_BLACK: 'PRIMARY_BLACK',
 } as const;
 export type ICON_BUTTON_VARIANTS = ValueOf<typeof ICON_BUTTON_VARIANTS>;
 
@@ -24,39 +25,58 @@ const iconButtonVariantStyle = {
     [ICON_BUTTON_VARIANTS.DEFAULT]: {
         backgroundColor: 'transparent',
         backgroundHoverColor: theme.color.neutral.hover,
+        backgroundActiveColor: theme.color.neutral.actionSecondaryActive,
         backgroundDisabledColor: 'transparent',
         borderColor: 'transparent',
         borderHoverColor: 'transparent',
+        borderActiveColor: theme.color.neutral.actionSecondaryActive,
         borderDisabledColor: 'transparent',
         iconColor: theme.color.neutral.text,
     },
     [ICON_BUTTON_VARIANTS.BORDERED]: {
         backgroundColor: theme.color.neutral.backgroundMuted,
         backgroundHoverColor: theme.color.neutral.hover,
+        backgroundActiveColor: theme.color.neutral.actionSecondaryActive,
         backgroundDisabledColor: theme.color.neutral.disabled,
         borderColor: theme.color.neutral.border,
         borderHoverColor: theme.color.neutral.border,
+        borderActiveColor: theme.color.neutral.actionSecondaryActive,
         borderDisabledColor: theme.color.neutral.border,
         iconColor: theme.color.neutral.text,
     },
     [ICON_BUTTON_VARIANTS.DANGER_BORDERED]: {
         backgroundColor: theme.color.neutral.backgroundMuted,
         backgroundHoverColor: theme.color.danger.backgroundHover,
+        backgroundActiveColor: theme.color.neutral.actionSecondaryActive,
         backgroundDisabledColor: theme.color.neutral.backgroundSubtle,
         borderColor: theme.color.neutral.border,
         borderHoverColor: theme.color.danger.borderSubtle,
+        borderActiveColor: theme.color.neutral.actionSecondaryActive,
         borderDisabledColor: theme.color.neutral.border,
         iconColor: theme.color.danger.text,
     },
     [ICON_BUTTON_VARIANTS.DANGER]: {
         backgroundColor: 'transparent',
         backgroundHoverColor: theme.color.danger.backgroundHover,
+        backgroundActiveColor: theme.color.neutral.actionSecondaryActive,
         backgroundDisabledColor: theme.color.neutral.backgroundSubtle,
         borderColor: 'transparent',
         borderHoverColor: 'transparent',
+        borderActiveColor: theme.color.neutral.actionSecondaryActive,
         borderDisabledColor: 'transparent',
         iconColor: theme.color.danger.text,
     },
+    [ICON_BUTTON_VARIANTS.PRIMARY_BLACK]: {
+        backgroundColor: theme.color.primaryBlack.action,
+        backgroundHoverColor: theme.color.primaryBlack.actionHover,
+        backgroundActiveColor: theme.color.primaryBlack.actionActive,
+        backgroundDisabledColor: theme.color.neutral.disabled,
+        borderColor: theme.color.primaryBlack.action,
+        borderHoverColor: theme.color.primaryBlack.actionHover,
+        borderActiveColor: theme.color.primaryBlack.actionActive,
+        borderDisabledColor: theme.color.neutral.disabled,
+        iconColor: theme.color.neutral.textOnPrimary,
+    },
 } satisfies Record<ICON_BUTTON_VARIANTS, unknown>;
 
 type IconButtonSizeConfig = {
@@ -91,10 +111,12 @@ const getIconButtonColorStyles = (variant: ICON_BUTTON_VARIANTS) => {
     const {
         backgroundColor,
         backgroundHoverColor,
+        backgroundActiveColor,
         backgroundDisabledColor,
         borderDisabledColor,
         borderColor,
         borderHoverColor,
+        borderActiveColor,
         iconColor,
     } = iconButtonVariantStyle[variant];
 
@@ -114,8 +136,8 @@ const getIconButtonColorStyles = (variant: ICON_BUTTON_VARIANTS) => {
         }
 
         &:active {
-            background-color: ${theme.color.neutral.actionSecondaryActive};
-            border-color: ${theme.color.neutral.actionSecondaryActive};
+            background-color: ${backgroundActiveColor};
+            border-color: ${borderActiveColor || backgroundActiveColor};
         }
 
         &:disabled {

package/src/components/index.ts

@@ -1,6 +1,6 @@
 export * from './text/index.js';
 export * from './box.js';
-export * from './boring_avatar.js';
+export * from './avatar/index.js';
 export * from './card_container.js';
 export * from './message.js';
 export * from './floating/index.js';

package/src/components/simple_markdown/simple_markdown_components.tsx

@@ -15,8 +15,9 @@ import type { LinkProps } from '../link.js';
 import { Link } from '../link.js';
 import { slugifyHeadingChildren } from '../readme_renderer/utils.js';
 import type { HeadingSharedProps } from '../text/heading_shared.js';
-import { Heading, Text } from '../text/index.js';
-import type { SharedTextProps, SharedTextSize } from '../text/text_shared.js';
+import { Heading, TextContent } from '../text/index.js';
+import type { ContentTextProps } from '../text/text_content.js';
+import type { SharedTextSize } from '../text/text_shared.js';
 
 const simpleMarkdownClassNames = {
     HEADING_ICON_LINK: 'headingIconLink',
@@ -305,16 +306,16 @@ const getMarkdownVideoSrc = (child?: ElementContent): string | undefined => {
 };
 
 // TODO: This should be used for readmes
-export const MarkdownParagraphContent: React.FC<SharedTextProps & MarkdownComponentExtraProps> = async ({
+export function MarkdownParagraphContent({
     children,
     node,
     ...textProps
-}) => {
+}: ContentTextProps & MarkdownComponentExtraProps): React.ReactNode {
     const child = node?.children[0];
     const videoSrc = getMarkdownVideoSrc(child);
 
     if (videoSrc) return <MarkdownVideo src={videoSrc} />;
 
     // Render the children as a paragraph
-    return <Text as='p' my='space16' {...textProps}>{children}</Text>;
-};
+    return <TextContent my='space16' {...textProps}>{children}</TextContent>;
+}

package/src/components/store/index.ts

@@ -1,2 +1 @@
 export * from './store_actor_header.js';
-export * from './actor_avatar.js';

package/src/components/store/store_actor_header.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { StarEmptyIcon, WarningTriangleIcon } from '@apify/ui-icons';
 
 import { Badge, Box, type BoxProps, Heading, Text, theme } from '../../index.js';
-import { ActorAvatar, actorAvatarClassnames } from './actor_avatar.js';
+import { ActorAvatar, actorAvatarClassnames } from '../avatar/actor_avatar.js';
 
 const storeActorHeaderClassNames = {
     title: 'ActorStoreItem-title',

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

@@ -1 +0,0 @@
-{"version":3,"file":"boring_avatar.d.ts","sourceRoot":"","sources":["../../../src/components/boring_avatar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAgGvC,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,8EAO5B,iBAAiB,6CA+ElB,CAAC;AAEH,eAAO,MAAM,iBAAiB,8EAO3B,iBAAiB,6CA4DlB,CAAC"}

package/dist/src/components/boring_avatar.js.map

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

package/dist/src/components/store/actor_avatar.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"actor_avatar.d.ts","sourceRoot":"","sources":["../../../../src/components/store/actor_avatar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAe,MAAM,OAAO,CAAC;AAC7C,OAAO,KAA6E,MAAM,OAAO,CAAC;AAUlG,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,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,gBAAgB,CA4EjD,CAAC;AAEF,eAAO,MAAM,WAAW,8CAA+B,CAAC"}

package/dist/src/components/store/actor_avatar.js.map

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

package/src/components/boring_avatar.stories.tsx

@@ -1,188 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import styled from 'styled-components';
-
-import { BoringAvatarMarble, BoringAvatarSolid } from './boring_avatar.js';
-
-const meta = {
-    title: 'UI-Library/Store/BoringAvatar',
-    component: BoringAvatarMarble,
-    argTypes: {
-        name: {
-            control: 'text',
-            description: 'Name used to generate the avatar (determines colors and letters)',
-        },
-        size: {
-            control: { type: 'number', min: 16, max: 200 },
-            description: 'Size of the avatar in pixels',
-        },
-        square: {
-            control: 'boolean',
-            description: 'Whether the avatar should be square instead of circular',
-        },
-        colors: {
-            control: 'object',
-            description: 'Array of colors used for the avatar generation',
-        },
-        alt: {
-            control: 'text',
-            description: 'Alt text for accessibility',
-        },
-        className: {
-            control: 'text',
-            description: 'CSS class name for styling',
-        },
-    },
-} satisfies Meta<typeof BoringAvatarMarble>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const StoryWrapper = styled.div`
-    display: flex;
-    flex-wrap: wrap;
-    gap: 1rem;
-    padding: 2rem;
-    align-items: center;
-`;
-
-const AvatarShowcase = styled.div`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 0.5rem;
-
-    small {
-        color: #666;
-        font-size: 0.75rem;
-    }
-`;
-
-const GridWrapper = styled.div`
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
-    gap: 1.5rem;
-    padding: 2rem;
-`;
-
-/**
- * Default marble avatar with standard settings
- */
-export const MarbleDefault: Story = {
-    args: {
-        name: 'John Doe',
-        size: 64,
-    },
-};
-
-/**
- * Default solid color avatar
- */
-export const SolidDefault: Story = {
-    render: (args) => <BoringAvatarSolid {...args} />,
-    args: {
-        name: 'John Doe',
-        size: 64,
-    },
-};
-
-/**
- * Different sizes comparison
- */
-export const Sizes: Story = {
-    render: () => (
-        <StoryWrapper>
-            <AvatarShowcase>
-                <BoringAvatarMarble name="Alice" size={24} />
-                <small>24px</small>
-            </AvatarShowcase>
-            <AvatarShowcase>
-                <BoringAvatarMarble name="Alice" size={32} />
-                <small>32px</small>
-            </AvatarShowcase>
-            <AvatarShowcase>
-                <BoringAvatarMarble name="Alice" size={48} />
-                <small>48px</small>
-            </AvatarShowcase>
-            <AvatarShowcase>
-                <BoringAvatarMarble name="Alice" size={64} />
-                <small>64px</small>
-            </AvatarShowcase>
-            <AvatarShowcase>
-                <BoringAvatarMarble name="Alice" size={96} />
-                <small>96px</small>
-            </AvatarShowcase>
-            <AvatarShowcase>
-                <BoringAvatarMarble name="Alice" size={128} />
-                <small>128px</small>
-            </AvatarShowcase>
-        </StoryWrapper>
-    ),
-};
-
-/**
- * Circular vs Square shapes
- */
-export const Shapes: Story = {
-    render: () => (
-        <StoryWrapper>
-            <AvatarShowcase>
-                <BoringAvatarMarble name="Shape Test" size={80} square={false} />
-                <small>Circular</small>
-            </AvatarShowcase>
-            <AvatarShowcase>
-                <BoringAvatarMarble name="Shape Test" size={80} square />
-                <small>Square (broken?)</small>
-            </AvatarShowcase>
-            <AvatarShowcase>
-                <BoringAvatarSolid name="Shape Test" size={80} square={false} />
-                <small>Circular (Solid)</small>
-            </AvatarShowcase>
-            <AvatarShowcase>
-                <BoringAvatarSolid name="Shape Test" size={80} square />
-                <small>Square (Solid) (broken?)</small>
-            </AvatarShowcase>
-        </StoryWrapper>
-    ),
-};
-
-/**
- * Different names generate different avatars
- */
-export const DifferentNames: Story = {
-    render: () => (
-        <GridWrapper>
-            <AvatarShowcase>
-                <BoringAvatarMarble name="John Doe" size={64} />
-                <small>John Doe</small>
-            </AvatarShowcase>
-            <AvatarShowcase>
-                <BoringAvatarMarble name="Jane Smith" size={64} />
-                <small>Jane Smith</small>
-            </AvatarShowcase>
-            <AvatarShowcase>
-                <BoringAvatarMarble name="web-scraper" size={64} />
-                <small>web-scraper</small>
-            </AvatarShowcase>
-            <AvatarShowcase>
-                <BoringAvatarMarble name="my-actor" size={64} />
-                <small>my-actor</small>
-            </AvatarShowcase>
-            <AvatarShowcase>
-                <BoringAvatarMarble name="apify/store" size={64} />
-                <small>apify/store</small>
-            </AvatarShowcase>
-            <AvatarShowcase>
-                <BoringAvatarMarble name="data.processor" size={64} />
-                <small>data.processor</small>
-            </AvatarShowcase>
-            <AvatarShowcase>
-                <BoringAvatarMarble name="APIIntegration" size={64} />
-                <small>APIIntegration</small>
-            </AvatarShowcase>
-            <AvatarShowcase>
-                <BoringAvatarMarble name="test_user_123" size={64} />
-                <small>test_user_123</small>
-            </AvatarShowcase>
-        </GridWrapper>
-    ),
-};