Merged in feat/LOY-311-New-Avatar-Component (pull request #2694)

Feat(LOY-311) Create avatar design system component

* feat(LOY-311): Creat & use New Avatar Design System Component

* refactor(LOY-311): replace avatar used in app header with design system component

* fix(LOY-311): use correct space vars


Approved-by: Erik Tiekstra

packages/design-system/lib/components/Avatar/variants.ts

@@ -0,0 +1,20 @@
+import { cva } from 'class-variance-authority'
+
+import styles from './avatar.module.css'
+
+export const config = {
+  variants: {
+    size: {
+      sm: styles['size-sm'],
+      md: styles['size-md'],
+      lg: styles['size-lg'],
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+} as const
+
+export const variants = Object.assign(cva(styles.avatar, config), {
+  initials: styles.initials,
+})