@workday/canvas-kit-docs 15.0.0-alpha.0076-next.0 → 15.0.0-alpha.0077-next.0

package/dist/es6/mdx/accessibility/examples/GlobalHeader.js

@@ -5,7 +5,7 @@ import { system } from '@workday/canvas-tokens-web';
 import { calc, createStyles, px2rem } from '@workday/canvas-kit-styling';
 import { notificationsIcon, inboxIcon, justifyIcon, assistantIcon, searchIcon, } from '@workday/canvas-system-icons-web';
 import { SecondaryButton, TertiaryButton } from '@workday/canvas-kit-react/button';
-import { Avatar } from '@workday/canvas-kit-preview-react/avatar';
+import { Avatar } from '@workday/canvas-kit-react/avatar';
 import { Flex } from '@workday/canvas-kit-react/layout';
 import { Tooltip } from '@workday/canvas-kit-react/tooltip';
 import { Combobox, useComboboxModel, useComboboxInput, useComboboxLoader, } from '@workday/canvas-kit-react/combobox';

package/dist/mdx/15.0-UPGRADE-GUIDE.mdx

@@ -18,6 +18,7 @@ space tokens, the new tokens aim to add more semantic meaning to allow for bette
 - [Codemod](#codemod)
   - [Instructions](#instructions)
 - [Component Promotions](#component-promotions)
+  - [Avatar](#avatar-)
   - [Pill](#pill-)
   - [Segmented Control](#segmented-control-)
   - [Information Highlight](#information-highlight-)
@@ -31,6 +32,7 @@ space tokens, the new tokens aim to add more semantic meaning to allow for bette
 - [Component Updates](#component-updates)
   - [Buttons](#buttons)
 - [Removals](#removals)
+  - [Avatar (Deprecated)](#avatar-deprecated)
   - [Segmented Control (Deprecated)](#segmented-control-deprecated)
   - [Select (Deprecated)](#select-deprecated)
   - [Search Form (Labs)](#search-form-labs)
@@ -106,6 +108,121 @@ yarn remove @workday/canvas-kit-codemod
 
 ## Component Promotions
 
+### Avatar ⚡️
+
+**PR:** [](https://github.com/Workday/canvas-kit/issues/3659)
+
+We've promoted `Avatar` from [Preview](#preview) to [Main](#main). This replaces the deprecated `Avatar` that was previously in Main.
+
+**Before in v14**
+
+```tsx
+import {Avatar} from '@workday/canvas-kit-preview-react/avatar';
+```
+
+**After in v15**
+
+```tsx
+import {Avatar} from '@workday/canvas-kit-react/avatar';
+```
+
+> 🤖 The codemod will handle the change of imports as shown above.
+
+#### API Differences
+
+The new `Avatar` is a [compound component](/getting-started/for-developers/resources/compound-components/)
+with a different API than the deprecated version.
+
+##### Structure Changes
+
+| Deprecated (Old Main) | New (Promoted from Preview)         |
+| --------------------- | ----------------------------------- |
+| `Avatar`              | `Avatar`                            |
+| -                     | `BaseAvatar`                        |
+| -                     | `BaseAvatar.Image` / `AvatarImage`  |
+| -                     | `BaseAvatar.Name` / `AvatarName`    |
+
+##### Prop Changes
+
+| Feature              | Deprecated (Old Main)                      | New (Promoted from Preview)                      |
+| -------------------- | ------------------------------------------ | ------------------------------------------------ |
+| Variant              | `variant` (`light`, `dark`)                | `variant` (`blue`, `amber`, `teal`, `purple`)    |
+| Size                 | `size` (extraSmall=16px to extraExtraLarge=120px) | `size` (extraExtraSmall=24px to extraExtraLarge=120px) |
+| User identifier      | `altText` prop                             | `name` prop                                      |
+| Custom initials      | Not supported                              | `preferredInitials` prop                         |
+| Decorative mode      | Not supported                              | `isDecorative` prop                              |
+| Image URL            | `url` prop                                 | `url` prop                                       |
+| Object fit           | `objectFit` prop                           | `objectFit` prop                                 |
+| Initials display     | Not supported (shows user icon)            | Shows initials from `name` when no image         |
+
+##### Size Mapping
+
+| Size Name        | Deprecated (Old Main) | New (Promoted from Preview) |
+| ---------------- | --------------------- | --------------------------- |
+| extraExtraSmall  | -                     | 24px                        |
+| extraSmall       | 16px                  | 32px                        |
+| small            | 24px                  | 40px                        |
+| medium           | 32px                  | 48px                        |
+| large            | 40px                  | 72px                        |
+| extraLarge       | 64px                  | 96px                        |
+| extraExtraLarge  | 120px                 | 120px                       |
+
+##### Code Migration
+
+**Deprecated API (Old Main)**
+
+```tsx
+import {Avatar} from '@workday/canvas-kit-react/avatar';
+
+<Avatar
+  size="medium"
+  variant="light"
+  url="https://example.com/photo.jpg"
+  altText="John Doe"
+/>
+```
+
+**New API (v15)**
+
+```tsx
+import {Avatar} from '@workday/canvas-kit-react/avatar';
+
+<Avatar
+  size="medium"
+  variant="blue"
+  url="https://example.com/photo.jpg"
+  name="John Doe"
+/>
+```
+
+##### New Features
+
+The promoted `Avatar` includes several new features:
+
+- **Initials display**: Automatically shows initials from the `name` prop when no image URL is provided
+- **Color variants**: Four color variants (`blue`, `amber`, `teal`, `purple`) instead of light/dark
+- **Custom initials**: Use `preferredInitials` for full control over displayed initials
+- **Decorative mode**: Use `isDecorative` when Avatar is purely decorative (rendered next to a name)
+- **Compound components**: Build custom avatars using `BaseAvatar`, `BaseAvatar.Image`, and `BaseAvatar.Name`
+- **Utility function**: Use `getInitialsFromName` to extract initials from a name string
+
+```tsx
+// With initials (no image)
+<Avatar name="John Doe" variant="blue" />
+
+// Custom initials
+<Avatar name="John Doe" preferredInitials="JD" />
+
+// Decorative (next to text name)
+<Avatar name="John Doe" url="..." isDecorative />
+
+// Using compound components for custom layouts
+<BaseAvatar variant="teal" size="large">
+  <BaseAvatar.Image src="..." alt="John Doe" />
+  <BaseAvatar.Name name="John Doe" />
+</BaseAvatar>
+```
+
 ### Pill ⚡️
 
 **PR** [#3634](https://github.com/Workday/canvas-kit/pull/3634)
@@ -264,6 +381,16 @@ tokens. These changes are **only visual**.
 
 ## Removals
 
+### Avatar (Deprecated)
+
+The deprecated `Avatar` that was previously in `@workday/canvas-kit-react/avatar`
+has been removed. This was the older implementation that showed a user icon placeholder
+and supported `light`/`dark` variants.
+
+Please migrate to the new `Avatar` component (promoted from Preview) which uses initials
+display, color variants (`blue`, `amber`, `teal`, `purple`), and supports compound components.
+See the [API Differences](#api-differences) section above for migration guidance.
+
 ### Segmented Control (Deprecated)
 
 The deprecated `SegmentedControl` that was previously in `@workday/canvas-kit-react/segmented-control`

package/dist/mdx/preview-react/divider/examples/Basic.tsx

@@ -96,7 +96,7 @@ const ProfileCard = ({id, name, bio}: ProfileCardProps) => (
     <Avatar
       size="extraLarge"
       url={`https://avatars.githubusercontent.com/u/${id}?v=4`}
-      altText={`${name}'s avatar`}
+      name={`${name}'s avatar`}
       className={profileCardAvatarStyles}
     />
     <h3 className={profileCardHeadingStyles}>{name}</h3>

package/dist/mdx/{preview-react → react}/avatar/Avatar.mdx

@@ -1,6 +1,6 @@
-import {SymbolDoc, Specifications, ExampleCodeBlock} from '@workday/canvas-kit-docs';
+import {SymbolDoc, Specifications, ExampleCodeBlock, StorybookStatusIndicator} from '@workday/canvas-kit-docs';
 
-import {Avatar} from '@workday/canvas-kit-preview-react/avatar';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
 import Basic from './examples/Basic';
 import Image from './examples/Image';
 import Size from './examples/Size';
@@ -9,14 +9,12 @@ import Custom from './examples/Custom';
 import Decorative from './examples/Decorative';
 
 
-# Avatar
-
-
+# Avatar <StorybookStatusIndicator type="promoted" />
 
 ## Installation
 
 ```sh
-yarn add @workday/canvas-kit-preview-react
+yarn add @workday/canvas-kit-react
 ```
 
 
@@ -77,4 +75,4 @@ If the Avatar is purely decorative, you can set the `isDecorative` prop to `true
 
 ## Component API
 
-<SymbolDoc name="Avatar" fileName="/preview-react/" hideDescription />
+<SymbolDoc name="Avatar" fileName="/react/" hideDescription />

package/dist/mdx/react/avatar/examples/Basic.tsx

@@ -0,0 +1,5 @@
+import {Avatar} from '@workday/canvas-kit-react/avatar';
+
+export default () => {
+  return <Avatar name="John Doe" />;
+};

package/dist/mdx/{preview-react → react}/avatar/examples/Custom.tsx

@@ -1,4 +1,4 @@
-import {BaseAvatar} from '@workday/canvas-kit-preview-react/avatar';
+import {BaseAvatar} from '@workday/canvas-kit-react/avatar';
 import {createStyles, px2rem} from '@workday/canvas-kit-styling';
 import {base} from '@workday/canvas-tokens-web';
 

package/dist/mdx/{preview-react → react}/avatar/examples/Decorative.tsx

@@ -1,4 +1,4 @@
-import {Avatar} from '@workday/canvas-kit-preview-react/avatar';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
 // @ts-ignore
 import nicholasAvatar from './nicholas-avatar.jpg';
 import {createStyles} from '@workday/canvas-kit-styling';

package/dist/mdx/{preview-react → react}/avatar/examples/Image.tsx

@@ -1,4 +1,4 @@
-import {Avatar} from '@workday/canvas-kit-preview-react/avatar';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
 
 export default () => {
   return (

package/dist/mdx/{preview-react → react}/avatar/examples/Size.tsx

@@ -1,4 +1,4 @@
-import {Avatar} from '@workday/canvas-kit-preview-react/avatar';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
 import {createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 

package/dist/mdx/{preview-react → react}/avatar/examples/Variant.tsx

@@ -1,4 +1,4 @@
-import {Avatar} from '@workday/canvas-kit-preview-react/avatar';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
 import {createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 

package/lib/StorybookStatusIndicator.tsx

@@ -28,14 +28,23 @@ const content = {
     icon: undefined,
     label: 'New',
   },
+  promoted: {
+    icon: undefined,
+    label: 'Promoted',
+  },
 };
 
-export const StorybookStatusIndicator = ({type}: {type: 'ai' | 'deprecated' | 'new'}) => {
+export const StorybookStatusIndicator = ({
+  type,
+}: {
+  type: 'ai' | 'deprecated' | 'new' | 'promoted';
+}) => {
   const {icon, label} = content[type];
   const variantMapping = {
     ai: 'ai',
     deprecated: 'caution',
     new: 'positive',
+    promoted: 'info',
   };
   console.log(variantMapping[type]);
   return (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "15.0.0-alpha.0076-next.0",
+  "version": "15.0.0-alpha.0077-next.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -45,10 +45,10 @@
     "@emotion/styled": "^11.6.0",
     "@stackblitz/sdk": "^1.11.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^15.0.0-alpha.0076-next.0",
-    "@workday/canvas-kit-preview-react": "^15.0.0-alpha.0076-next.0",
-    "@workday/canvas-kit-react": "^15.0.0-alpha.0076-next.0",
-    "@workday/canvas-kit-styling": "^15.0.0-alpha.0076-next.0",
+    "@workday/canvas-kit-labs-react": "^15.0.0-alpha.0077-next.0",
+    "@workday/canvas-kit-preview-react": "^15.0.0-alpha.0077-next.0",
+    "@workday/canvas-kit-react": "^15.0.0-alpha.0077-next.0",
+    "@workday/canvas-kit-styling": "^15.0.0-alpha.0077-next.0",
     "@workday/canvas-system-icons-web": "^3.0.36",
     "@workday/canvas-tokens-web": "4.0.0-alpha.3",
     "markdown-to-jsx": "^7.2.0",
@@ -61,5 +61,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "5d389f1b5a66cf5bde37eb570ff634a7b143ee98"
+  "gitHead": "6944d028b6f1250481ad8c4f8d5f817bea4e01a1"
 }

package/dist/mdx/preview-react/avatar/examples/Basic.tsx

@@ -1,5 +0,0 @@
-import {Avatar} from '@workday/canvas-kit-preview-react/avatar';
-
-export default () => {
-  return <Avatar name="John Doe" />;
-};

package/dist/mdx/react/avatar/avatar/Avatar.mdx

@@ -1,109 +0,0 @@
-import {
-  Specifications,
-  SymbolDoc,
-  SymbolDescription,
-  ExampleCodeBlock,
-  StorybookStatusIndicator,
-} from '@workday/canvas-kit-docs';
-import {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';
-
-import Basic from './examples/Basic';
-import Button from './examples/Button';
-import Image from './examples/Image';
-import LazyLoad from './examples/LazyLoad';
-import ObjectFit from './examples/ObjectFit';
-import Size from './examples/Size';
-import Variant from './examples/Variant';
-import CustomStyles from './examples/CustomStyles';
-
-
-# Canvas Kit Avatar <StorybookStatusIndicator type="deprecated" />
-
-<InformationHighlight className="sb-unstyled" variant="caution" cs={{p: {marginBlock: 0}}}>
-  <InformationHighlight.Icon />
-  <InformationHighlight.Body>
-    `Avatar` in Main has been deprecated and will be removed in a future major version. Please use
-    [Avatar](https://workday.github.io/canvas-kit/?path=/docs/preview-avatar--docs) in Preview
-    instead.
-  </InformationHighlight.Body>
-</InformationHighlight>
-
-Represents a person's profile.
-
-[> Workday Design Reference](https://canvas.workdaydesign.com/components/indicators/avatar)
-
-## Installation
-
-```sh
-yarn add @workday/canvas-kit-react
-```
-
-## Usage
-
-<SymbolDescription name="Avatar" fileName="/react/" />
-
-The example below shows multiple instances of a `Avatar` with various configurations.
-
-### Basic
-
-By default, the Avatar renders a `button` element. If yo'd like to change the default element, use
-the `as` prop.
-
-<ExampleCodeBlock code={Basic} />
-
-### Button
-
-Like many of our components, Avatar accepts an `as` prop, which lets you change the underlying
-semantic element to a `div`. This should be done with caution to ensure the best accessibility.
-Generally, `<button>` elements should be used for actions.
-
-<ExampleCodeBlock code={Button} />
-
-### Variant
-
-Avatar defaults to using a `"light"` `variant` property. You can change the `variant` prop to "dark"
-by including `variant="dark"`.
-
-<ExampleCodeBlock code={Variant} />
-
-### Size
-
-Avatar defaults to using a `"medium"` `size` property. You can change the `size` prop to various
-sizing options. See Component API for more details.
-
-Additionally, you can explicitly specify the size you want for the Avatar in pixels or rems.
-
-<ExampleCodeBlock code={Size} />
-
-### Image
-
-Avatar renders an image when the `url` prop is defined.
-
-<ExampleCodeBlock code={Image} />
-
-### Object Fit
-
-Avatar defaults to using `contain` for object-fit. You can change this property to any other
-acceptable `object-fit` properties. For best fit, try to use square images.
-
-<ExampleCodeBlock code={ObjectFit} />
-
-### Lazy Load
-
-Example of implementing lazy load behavior with Avatar.
-
-<ExampleCodeBlock code={LazyLoad} />
-
-### Custom Styling
-
-To change the background color of the Avatar, you can use our `createStencil` functionality.
-
-<ExampleCodeBlock code={CustomStyles} />
-
-## Component API
-
-<SymbolDoc name="Avatar" fileName="/react/" />
-
-## Specifications
-
-<Specifications file="Avatar.spec.ts" name="Avatar" />

package/dist/mdx/react/avatar/avatar/examples/Basic.tsx

@@ -1,17 +0,0 @@
-import {Avatar} from '@workday/canvas-kit-react/avatar';
-import {createStyles} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
-
-const handleAvatarButtonClick = () => console.log('AvatarButton clicked');
-
-const containerStyles = createStyles({
-  display: 'inline-flex',
-  gap: system.space.x2,
-});
-
-export default () => (
-  <div className={containerStyles}>
-    <Avatar altText="Avatar" onClick={handleAvatarButtonClick} />
-    <Avatar altText="Avatar" as="div" />
-  </div>
-);

package/dist/mdx/react/avatar/avatar/examples/Button.tsx

@@ -1,20 +0,0 @@
-import {Avatar} from '@workday/canvas-kit-react/avatar';
-import {createStyles} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
-// @ts-ignore: Cannot find module error
-import testAvatar from './test-avatar.png';
-
-const handleAvatarButtonClick = () => console.log('AvatarButton clicked');
-
-const containerStyles = createStyles({
-  display: 'inline-flex',
-  gap: system.space.x2,
-});
-
-export default () => (
-  <div className={containerStyles}>
-    <Avatar altText="Avatar" variant="dark" onClick={handleAvatarButtonClick} />
-    <Avatar altText="Avatar" onClick={handleAvatarButtonClick} />
-    <Avatar altText="Avatar" url={testAvatar} onClick={handleAvatarButtonClick} />
-  </div>
-);

package/dist/mdx/react/avatar/avatar/examples/CustomStyles.tsx

@@ -1,34 +0,0 @@
-import {Avatar} from '@workday/canvas-kit-react/avatar';
-import {createStencil, createStyles} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
-import {systemIconStencil} from '@workday/canvas-kit-react/icon';
-
-const customOrangeAvatar = createStencil({
-  base: {
-    backgroundColor: system.color.static.amber.default,
-    ['[data-part="avatar-icon"]']: {
-      [systemIconStencil.vars.color]: system.color.static.white,
-    },
-  },
-});
-
-const customGreenAvatarStencil = createStencil({
-  base: {
-    backgroundColor: system.color.static.green.default,
-    ['[data-part="avatar-icon"]']: {
-      [systemIconStencil.vars.color]: system.color.static.white,
-    },
-  },
-});
-
-const containerStyles = createStyles({
-  display: 'inline-flex',
-  gap: system.space.x2,
-});
-
-export default () => (
-  <div className={containerStyles}>
-    <Avatar altText="Avatar" as="div" {...customOrangeAvatar()} />
-    <Avatar altText="Avatar" as="div" {...customGreenAvatarStencil()} />
-  </div>
-);

package/dist/mdx/react/avatar/avatar/examples/Image.tsx

@@ -1,25 +0,0 @@
-import {Avatar} from '@workday/canvas-kit-react/avatar';
-// @ts-ignore: Cannot find module error
-import testAvatar from './test-avatar.png';
-import {createStyles} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
-
-const containerStyles = createStyles({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: system.space.x2,
-});
-
-export default () => (
-  <div className={containerStyles}>
-    <h3>Working Images</h3>
-    <Avatar altText="Avatar" size="extraExtraLarge" as="div" url={testAvatar} />
-    <Avatar altText="Avatar" size="extraLarge" as="div" url={testAvatar} />
-    <Avatar altText="Avatar" size="large" as="div" url={testAvatar} />
-    <Avatar altText="Avatar" size="medium" as="div" url={testAvatar} />
-    <Avatar altText="Avatar" size="small" as="div" url={testAvatar} />
-    <Avatar altText="Avatar" size="extraSmall" as="div" url={testAvatar} />
-    <h3>Broken Image</h3>
-    <Avatar altText="Avatar" url="/fake/path/to/image.png" as="div" />
-  </div>
-);

package/dist/mdx/react/avatar/avatar/examples/LazyLoad.tsx

@@ -1,20 +0,0 @@
-import {Avatar} from '@workday/canvas-kit-react/avatar';
-// @ts-ignore: Cannot find module error
-import testAvatar from './test-avatar.png';
-
-export default () => (
-  <div className="story">
-    {Array.from({length: 5}, (v, index) => (
-      <div>
-        <Avatar
-          altText="Avatar"
-          key={index}
-          as="div"
-          size="medium"
-          url={testAvatar + '?v=' + index}
-        />
-        <br />
-      </div>
-    ))}
-  </div>
-);

package/dist/mdx/react/avatar/avatar/examples/ObjectFit.tsx

@@ -1,30 +0,0 @@
-import {Avatar} from '@workday/canvas-kit-react/avatar';
-import {px2rem} from '@workday/canvas-kit-styling';
-
-export default () => (
-  <div className="story">
-    <h3>Original Rectangle Image</h3>
-    <img alt="" src="https://picsum.photos/id/237/300/200" />
-    <h3>Object fit on a Rectangle Image</h3>
-    <Avatar altText="Avatar" as="div" url="https://picsum.photos/id/237/300/200" />
-    <h3>Object fit on a Rectangle Image using Dynamic Size</h3>
-    <Avatar
-      altText="Avatar"
-      as="div"
-      size={px2rem(200)}
-      url="https://picsum.photos/id/237/300/200"
-      objectFit="contain"
-    />
-    <h3>Original Square Image</h3>
-    <img alt="" src="https://picsum.photos/id/237/300/300" />
-    <h3>Object fit on a Square Image</h3>
-    <Avatar altText="Avatar" as="div" url="https://picsum.photos/id/237/300/300" />
-    <h3>Object fit on a Square Image using Dynamic Size</h3>
-    <Avatar
-      altText="Avatar"
-      as="div"
-      size={px2rem(200)}
-      url="https://picsum.photos/id/237/300/300"
-    />
-  </div>
-);

package/dist/mdx/react/avatar/avatar/examples/Size.tsx

@@ -1,27 +0,0 @@
-import {Avatar} from '@workday/canvas-kit-react/avatar';
-import {px2rem} from '@workday/canvas-kit-styling';
-
-export default () => (
-  <div className="story">
-    <h3>Extra-Extra Large</h3>
-    <Avatar altText="Avatar" as="div" size="extraExtraLarge" />
-    <h3>Extra Large</h3>
-    <Avatar altText="Avatar" as="div" size="extraLarge" />
-    <h3>Large</h3>
-    <Avatar altText="Avatar" as="div" size="large" />
-    <h3>Medium</h3>
-    <Avatar altText="Avatar" as="div" size="medium" />
-    <h3>Small</h3>
-    <Avatar altText="Avatar" as="div" size="small" />
-    <h3>Extra Small</h3>
-    <Avatar altText="Avatar" as="div" size="extraSmall" />
-    <h3>30px</h3>
-    <Avatar altText="Avatar" as="div" size={px2rem(30)} />
-    <h3>40px</h3>
-    <Avatar altText="Avatar" as="div" size={px2rem(40)} />
-    <h3>3rem</h3>
-    <Avatar altText="Avatar" as="div" size="3rem" />
-    <h3>4rem</h3>
-    <Avatar altText="Avatar" as="div" size="4rem" />
-  </div>
-);

package/dist/mdx/react/avatar/avatar/examples/Variant.tsx

@@ -1,10 +0,0 @@
-import {Avatar} from '@workday/canvas-kit-react/avatar';
-
-export default () => (
-  <div className="story">
-    <h3>Light</h3>
-    <Avatar altText="Avatar" as="div" size="medium" />
-    <h3>Dark</h3>
-    <Avatar altText="Avatar" as="div" size="medium" variant="dark" />
-  </div>
-);