refactor(ui): migrate CellProfile from Base UI to Backstage Avatar

Replace Base UI Avatar with Backstage UI Avatar component in CellProfile.

Changes:
- Update import from Base UI to internal Avatar component
- Simplify Avatar usage from compound component pattern to single component
- Add size='small' and purpose='decoration' props for accessibility
- Remove unused CSS classes (cellProfileAvatar, cellProfileAvatarImage, cellProfileAvatarFallback)
- Add changeset for patch version bump

This removes the Base UI dependency from Table components and reduces code by ~60 lines.

Signed-off-by: Johan Persson <johanopersson@gmail.com>

.changeset/huge-taxis-grab.md

@@ -0,0 +1,5 @@
+---
+'@backstage/ui': patch
+---
+
+Migrated CellProfile component from Base UI Avatar to Backstage UI Avatar component.

packages/ui/src/components/Table/Table.module.css

@@ -126,39 +126,4 @@
     gap: var(--bui-space-2);
     align-items: center;
   }
-
-  .bui-TableCellProfileAvatar {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    vertical-align: middle;
-    border-radius: 100%;
-    user-select: none;
-    font-weight: 500;
-    color: var(--bui-fg-primary);
-    background-color: var(--bui-bg-surface-2);
-    font-size: 1rem;
-    line-height: 1;
-    overflow: hidden;
-    height: 1.25rem;
-    width: 1.25rem;
-  }
-
-  .bui-TableCellProfileAvatarImage {
-    object-fit: cover;
-    height: 100%;
-    width: 100%;
-  }
-
-  .bui-TableCellProfileAvatarFallback {
-    align-items: center;
-    display: flex;
-    justify-content: center;
-    height: 100%;
-    width: 100%;
-    font-size: var(--bui-font-size-2);
-    font-weight: var(--bui-font-weight-regular);
-    box-shadow: inset 0 0 0 1px var(--bui-border);
-    border-radius: var(--bui-radius-full);
-  }
 }

packages/ui/src/components/Table/components/CellProfile.tsx

@@ -18,7 +18,7 @@ import clsx from 'clsx';
 import { CellProfileProps } from '../types';
 import { Text } from '../../Text/Text';
 import { Link } from '../../Link/Link';
-import { Avatar } from '@base-ui-components/react/avatar';
+import { Avatar } from '../../Avatar';
 import { useStyles } from '../../../hooks/useStyles';
 import { Cell as ReactAriaCell } from 'react-aria-components';
 import styles from '../Table.module.css';
@@ -46,39 +46,9 @@ export const CellProfile = (props: CellProfileProps) => {
           styles[classNames.cellContentWrapper],
         )}
       >
-        <div className={clsx(classNames.cellIcon, styles[classNames.cellIcon])}>
-          {src && (
-            <Avatar.Root
-              className={clsx(
-                classNames.cellProfileAvatar,
-                styles[classNames.cellProfileAvatar],
-              )}
-            >
-              <Avatar.Image
-                src={src}
-                width="20"
-                height="20"
-                className={clsx(
-                  classNames.cellProfileAvatarImage,
-                  styles[classNames.cellProfileAvatarImage],
-                )}
-              />
-              <Avatar.Fallback
-                className={clsx(
-                  classNames.cellProfileAvatarFallback,
-                  styles[classNames.cellProfileAvatarFallback],
-                )}
-              >
-                {(name || '')
-                  .split(' ')
-                  .map(word => word[0])
-                  .join('')
-                  .toLocaleUpperCase('en-US')
-                  .slice(0, 1)}
-              </Avatar.Fallback>
-            </Avatar.Root>
-          )}
-        </div>
+        {src && name && (
+          <Avatar src={src} name={name} size="x-small" purpose="decoration" />
+        )}
         <div
           className={clsx(
             classNames.cellContent,