@astryxdesign/cli 0.1.7-canary.6b74cb0 → 0.1.7-canary.7ceccc1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/cli",
-  "version": "0.1.7-canary.6b74cb0",
+  "version": "0.1.7-canary.7ceccc1",
   "displayName": "CLI",
   "description": "Scaffold projects, browse templates, generate themes, and get agent-ready docs from the command line.",
   "author": "Meta Open Source",
@@ -79,10 +79,10 @@
     "zod": "^4.4.3"
   },
   "peerDependencies": {
-    "@astryxdesign/charts": "0.1.7-canary.6b74cb0",
-    "@astryxdesign/core": "0.1.7-canary.6b74cb0",
-    "@astryxdesign/lab": "0.1.7-canary.6b74cb0",
-    "@astryxdesign/theme-neutral": "0.1.7-canary.6b74cb0",
+    "@astryxdesign/charts": "0.1.7-canary.7ceccc1",
+    "@astryxdesign/core": "0.1.7-canary.7ceccc1",
+    "@astryxdesign/lab": "0.1.7-canary.7ceccc1",
+    "@astryxdesign/theme-neutral": "0.1.7-canary.7ceccc1",
     "gpt-tokenizer": "^3.4.0"
   },
   "peerDependenciesMeta": {
@@ -100,10 +100,10 @@
     }
   },
   "devDependencies": {
-    "@astryxdesign/charts": "0.1.7-canary.6b74cb0",
-    "@astryxdesign/core": "0.1.7-canary.6b74cb0",
-    "@astryxdesign/lab": "0.1.7-canary.6b74cb0",
-    "@astryxdesign/theme-neutral": "0.1.7-canary.6b74cb0",
+    "@astryxdesign/charts": "0.1.7-canary.7ceccc1",
+    "@astryxdesign/core": "0.1.7-canary.7ceccc1",
+    "@astryxdesign/lab": "0.1.7-canary.7ceccc1",
+    "@astryxdesign/theme-neutral": "0.1.7-canary.7ceccc1",
     "gpt-tokenizer": "^3.4.0"
   },
   "scripts": {

package/src/codemods/__tests__/registry.test.mjs

@@ -21,6 +21,7 @@ describe('registry', () => {
         '0.1.3',
         '0.1.5',
         '0.1.7',
+        '0.1.8',
       ]);
     });
   });

package/src/codemods/registry.mjs

@@ -22,6 +22,7 @@ const registry = new Map([
   ['0.1.3', () => import('./transforms/v0.1.3/index.mjs')],
   ['0.1.5', () => import('./transforms/v0.1.5/index.mjs')],
   ['0.1.7', () => import('./transforms/v0.1.7/index.mjs')],
+  ['0.1.8', () => import('./transforms/v0.1.8/index.mjs')],
 ]);
 
 // Re-export from the shared utility so registry callers and other consumers

package/src/codemods/transforms/v0.1.8/__tests__/rename-avatar-size-scale.test.mjs

@@ -0,0 +1,161 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {describe, it, expect} from 'vitest';
+
+async function applyTransform(source) {
+  const {default: transform} = await import('../rename-avatar-size-scale.mjs');
+  const jscodeshift = (await import('jscodeshift')).default;
+  const j = jscodeshift.withParser('tsx');
+  const api = {jscodeshift: j, stats: () => {}, report: () => {}};
+  const file = {source, path: 'test.tsx'};
+  const result = transform(file, api);
+  return result ?? source;
+}
+
+describe('rename-avatar-size-scale', () => {
+  it('renames every named size on an Avatar JSX size attribute', async () => {
+    const input = `import {Avatar} from '@astryxdesign/core';
+const a = <Avatar name="A" size="tiny" />;
+const b = <Avatar name="B" size="xsmall" />;
+const c = <Avatar name="C" size="small" />;
+const d = <Avatar name="D" size="medium" />;
+const e = <Avatar name="E" size="large" />;`;
+    const output = await applyTransform(input);
+    expect(output).toContain(`size='xsm'`);
+    expect(output).toContain(`size='sm'`);
+    expect(output).toContain(`size='md'`);
+    expect(output).toContain(`size='lg'`);
+    expect(output).toContain(`size='xl'`);
+    for (const old of ['tiny', 'xsmall', 'small', 'medium', 'large']) {
+      expect(output).not.toContain(`size="${old}"`);
+    }
+  });
+
+  it('renames size on AvatarGroup', async () => {
+    const input = `import {AvatarGroup} from '@astryxdesign/core';
+const x = <AvatarGroup size="medium">{kids}</AvatarGroup>;`;
+    const output = await applyTransform(input);
+    expect(output).toContain(`size='lg'`);
+  });
+
+  it('leaves numeric sizes untouched', async () => {
+    const input = `import {Avatar} from '@astryxdesign/core';
+const x = <Avatar name="A" size={48} />;`;
+    const output = await applyTransform(input);
+    expect(output).toContain('size={48}');
+  });
+
+  it('is alias-aware', async () => {
+    const input = `import {Avatar as Face} from '@astryxdesign/core';
+const x = <Face name="A" size="small" />;`;
+    const output = await applyTransform(input);
+    expect(output).toContain(`size='md'`);
+  });
+
+  it('renames the subpath and legacy import sources', async () => {
+    const sub = `import {Avatar} from '@astryxdesign/core/Avatar';
+const x = <Avatar name="A" size="large" />;`;
+    expect(await applyTransform(sub)).toContain(`size='xl'`);
+    const legacy = `import {Avatar} from '@xds/core';
+const x = <Avatar name="A" size="tiny" />;`;
+    expect(await applyTransform(legacy)).toContain(`size='xsm'`);
+  });
+
+  it('renames a size inside a ternary on an Avatar element', async () => {
+    const input = `import {Avatar} from '@astryxdesign/core';
+const x = <Avatar name="A" size={big ? 'large' : 'small'} />;`;
+    const output = await applyTransform(input);
+    expect(output).toContain(`big ? 'xl' : 'md'`);
+  });
+
+  it('renames the UNIQUE names tiny/xsmall in Storybook options and size args', async () => {
+    const input = `import {Avatar} from '@astryxdesign/core';
+const meta = {
+  argTypes: {size: {control: 'select', options: ['tiny', 'xsmall']}},
+  args: {size: 'tiny'},
+};`;
+    const output = await applyTransform(input);
+    expect(output).toContain(`['xsm', 'sm']`);
+    expect(output).toContain(`size: 'xsm'`);
+  });
+
+  it('renames a FULL Storybook options array (unique name unlocks ambiguous members)', async () => {
+    // The presence of a unique name (tiny/xsmall) proves the whole array is the
+    // Avatar size enum, so small/medium/large in it are safe to rename too.
+    const input = `import {Avatar} from '@astryxdesign/core';
+const meta = {
+  argTypes: {size: {control: 'select', options: ['tiny', 'xsmall', 'small', 'medium', 'large']}},
+};`;
+    const output = await applyTransform(input);
+    expect(output).toContain(`['xsm', 'sm', 'md', 'lg', 'xl']`);
+  });
+
+  it('renames a standalone Avatar-size array literal used with .map()', async () => {
+    const input = `import {AvatarGroup} from '@astryxdesign/core';
+const sizes = (['tiny', 'xsmall', 'small', 'medium', 'large'] as const).map(s => s);`;
+    const output = await applyTransform(input);
+    expect(output).toContain(`['xsm', 'sm', 'md', 'lg', 'xl']`);
+  });
+
+  it('does NOT rename an array of ambiguous words with no unique Avatar name', async () => {
+    // Without tiny/xsmall, the array could be anything (priorities, densities),
+    // so ambiguous members are left untouched.
+    const input = `import {Avatar} from '@astryxdesign/core';
+const densities = ['small', 'medium', 'large'] as const;`;
+    const output = await applyTransform(input);
+    expect(output).toContain(`['small', 'medium', 'large']`);
+  });
+
+  it('renames a UNIQUE name in a size-typed union literal', async () => {
+    const input = `import {Avatar} from '@astryxdesign/core';
+type Props = {size: 'tiny' | 'xsmall'};`;
+    const output = await applyTransform(input);
+    expect(output).toContain(`'xsm' | 'sm'`);
+  });
+
+  // --- Precision guards: ambiguous common words must NOT be corrupted in
+  // --- context-blind positions, even in files that import Avatar. ---
+
+  it('does NOT rename ambiguous names in an unrelated union type', async () => {
+    const input = `import {Avatar} from '@astryxdesign/core';
+type TaskPriority = 'urgent' | 'high' | 'medium' | 'low' | 'none';`;
+    const output = await applyTransform(input);
+    expect(output).toContain(`'medium'`);
+    expect(output).not.toContain(`'lg'`);
+  });
+
+  it('does NOT rename an ambiguous name in a non-size object property', async () => {
+    const input = `import {Avatar} from '@astryxdesign/core';
+const cfg = {priority: 'medium', density: 'large'};`;
+    const output = await applyTransform(input);
+    expect(output).toContain(`priority: 'medium'`);
+    expect(output).toContain(`density: 'large'`);
+  });
+
+  it('does NOT rename an ambiguous name in a size-keyed object property (component unknown)', async () => {
+    // A `size: 'small'` object entry could belong to any component; renaming it
+    // blind would be unsafe, so it is left for manual migration.
+    const input = `import {Avatar} from '@astryxdesign/core';
+const args = {size: 'small'};`;
+    const output = await applyTransform(input);
+    expect(output).toContain(`size: 'small'`);
+  });
+
+  it('does not touch files that never import Avatar/AvatarGroup', async () => {
+    const input = `import {Badge} from '@astryxdesign/core';
+const x = <Badge size="small" />;
+type P = 'tiny' | 'xsmall';`;
+    const output = await applyTransform(input);
+    expect(output).toContain(`size="small"`);
+    expect(output).toContain(`'tiny' | 'xsmall'`);
+  });
+
+  it('does not rename an unrelated non-size string in an Avatar file', async () => {
+    const input = `import {Avatar} from '@astryxdesign/core';
+const label = 'small';
+const x = <Avatar name="A" size="small" />;`;
+    const output = await applyTransform(input);
+    expect(output).toContain(`const label = 'small'`);
+    expect(output).toContain(`size='md'`);
+  });
+});

package/src/codemods/transforms/v0.1.8/index.mjs

@@ -0,0 +1,19 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file v0.1.8 transform manifest
+ *
+ * Lists all codemods for the v0.1.8 release in the order they should run.
+ */
+
+import renameAvatarSizeScale, {
+  meta as renameAvatarSizeScaleMeta,
+} from './rename-avatar-size-scale.mjs';
+
+export default [
+  {
+    name: 'rename-avatar-size-scale',
+    transform: renameAvatarSizeScale,
+    meta: renameAvatarSizeScaleMeta,
+  },
+];

package/src/codemods/transforms/v0.1.8/rename-avatar-size-scale.mjs

@@ -0,0 +1,234 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Codemod: Rename Avatar named sizes to Icon's abbreviated scale
+ * @see https://github.com/facebook/astryx/issues/2672
+ *
+ * As of v0.1.8, Avatar and AvatarGroup use the same abbreviated size scale as
+ * Icon (`xsm`/`sm`/`md`/`lg`/`xl`) instead of full words. Pixel values are
+ * unchanged — only the names move:
+ *
+ *   tiny (20px)   → xsm
+ *   xsmall (24px) → sm
+ *   small (36px)  → md   ← also the new default (was `small`)
+ *   medium (48px) → lg
+ *   large (128px) → xl
+ *
+ * The default size shifts from `small` to `md`, but that is the SAME 36px, so
+ * call sites that relied on the default need no change.
+ *
+ * ## Precision
+ *
+ * `small`, `medium`, and `large` are common English words that appear as
+ * unrelated string/type literals (priorities, statuses, breakpoints, …). To
+ * avoid corrupting those, the three AMBIGUOUS names are renamed ONLY in a
+ * precise context: a `size` JSX attribute on a component that resolves to an
+ * Avatar/AvatarGroup import (alias-aware).
+ *
+ * `tiny` and `xsmall` are unique to Avatar's scale, so they are additionally
+ * renamed in context-blind positions (object properties keyed `size`/`*Size`,
+ * Storybook `options` arrays, and size-typed union literals) within files that
+ * import Avatar/AvatarGroup.
+ */
+
+export const meta = {
+  title: 'Rename Avatar named sizes tiny/xsmall/small/medium/large → xsm/sm/md/lg/xl',
+  description:
+    'Avatar and AvatarGroup adopt Icon\'s abbreviated size scale ' +
+    '(xsm/sm/md/lg/xl). Pixel values are unchanged; the default moves from ' +
+    '`small` to `md` (both 36px). The ambiguous names small/medium/large are ' +
+    'only renamed on Avatar/AvatarGroup `size` JSX attributes; the unique ' +
+    'names tiny/xsmall are also renamed in size-keyed props, Storybook ' +
+    'options, and union types in files importing Avatar/AvatarGroup.',
+  pr: '#2672',
+};
+
+/** Import sources that provide the Astryx Avatar/AvatarGroup components. */
+const IMPORT_SOURCES = new Set([
+  '@astryxdesign/core',
+  '@astryxdesign/core/Avatar',
+  '@astryxdesign/core/AvatarGroup',
+  '@xds/core',
+  '@xds/core/Avatar',
+  '@xds/core/AvatarGroup',
+]);
+
+/** Component names whose `size` prop is renamed. */
+const TARGET_IMPORTED_NAMES = new Set(['Avatar', 'AvatarGroup']);
+
+/** Old → new size-name mapping. */
+const RENAMES = new Map([
+  ['tiny', 'xsm'],
+  ['xsmall', 'sm'],
+  ['small', 'md'],
+  ['medium', 'lg'],
+  ['large', 'xl'],
+]);
+
+/**
+ * Ambiguous names — common words that must ONLY be renamed in a precise
+ * context. `tiny`/`xsmall` are omitted because they are unique to Avatar's
+ * scale; their presence in a collection proves it is an Avatar size enum.
+ */
+const AMBIGUOUS = new Set(['small', 'medium', 'large']);
+
+/** Names that appear only in Avatar's scale — safe signals of Avatar sizing. */
+const UNIQUE = new Set(['tiny', 'xsmall']);
+
+/**
+ * Rename a string-literal node if its value is an old size name.
+ * Unwraps `'small' as const`. In non-precise contexts, ambiguous names are
+ * skipped. Returns true when a rename occurred.
+ */
+function renameValue(node, {precise = false} = {}) {
+  if (!node) return false;
+  const target = node.type === 'TSAsExpression' ? node.expression : node;
+  const isString =
+    target.type === 'StringLiteral' || target.type === 'Literal';
+  if (!isString || typeof target.value !== 'string') return false;
+  const replacement = RENAMES.get(target.value);
+  if (!replacement) return false;
+  if (!precise && AMBIGUOUS.has(target.value)) return false;
+  target.value = replacement;
+  if (target.raw) target.raw = undefined;
+  return true;
+}
+
+/** Extract a plain string value from a literal-ish node, or null. */
+function literalString(node) {
+  const target = node?.type === 'TSAsExpression' ? node.expression : node;
+  if (
+    target &&
+    (target.type === 'StringLiteral' || target.type === 'Literal') &&
+    typeof target.value === 'string'
+  ) {
+    return target.value;
+  }
+  return null;
+}
+
+export default function transformer(file, api) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  let hasChanges = false;
+
+  // Track alias-aware local names for the target components.
+  const targetLocals = new Set();
+  root.find(j.ImportDeclaration).forEach((path) => {
+    if (!IMPORT_SOURCES.has(path.node.source.value)) return;
+    for (const spec of path.node.specifiers ?? []) {
+      if (
+        spec.type === 'ImportSpecifier' &&
+        TARGET_IMPORTED_NAMES.has(spec.imported.name)
+      ) {
+        targetLocals.add(spec.local.name);
+      }
+    }
+  });
+
+  if (targetLocals.size === 0) return undefined;
+
+  function renameArrayElements(node) {
+    let arr = node;
+    if (arr.type === 'TSAsExpression') arr = arr.expression;
+    if (arr.type !== 'ArrayExpression') return;
+    // If the array contains a name unique to Avatar's scale (tiny/xsmall), the
+    // whole collection is unambiguously the Avatar size enum, so it is safe to
+    // rename the ambiguous members too. Otherwise stay conservative.
+    const precise = arr.elements.some((el) => UNIQUE.has(literalString(el)));
+    for (const el of arr.elements) {
+      if (renameValue(el, {precise})) hasChanges = true;
+    }
+  }
+
+  // 1. `size` JSX attributes on target components — PRECISE (component known),
+  //    so all five names, including the ambiguous ones, are renamed here.
+  root.find(j.JSXOpeningElement).forEach((path) => {
+    const name = path.node.name;
+    const componentName = name.type === 'JSXIdentifier' ? name.name : null;
+    if (!componentName || !targetLocals.has(componentName)) return;
+
+    for (const attr of path.node.attributes) {
+      if (attr.type !== 'JSXAttribute' || attr.name?.name !== 'size') continue;
+      const value = attr.value;
+
+      // size="small"
+      if (renameValue(value, {precise: true})) {
+        hasChanges = true;
+        continue;
+      }
+      if (
+        value &&
+        value.type === 'JSXExpressionContainer' &&
+        value.expression
+      ) {
+        // size={'small'}
+        if (renameValue(value.expression, {precise: true})) {
+          hasChanges = true;
+          continue;
+        }
+        // size={cond ? 'small' : 'large'}
+        if (value.expression.type === 'ConditionalExpression') {
+          if (renameValue(value.expression.consequent, {precise: true}))
+            hasChanges = true;
+          if (renameValue(value.expression.alternate, {precise: true}))
+            hasChanges = true;
+        }
+      }
+    }
+  });
+
+  // 2. Object properties keyed `size` (or `*Size`) + Storybook `options`
+  //    arrays — NON-PRECISE (the component isn't known here), so only the
+  //    unique names tiny/xsmall are renamed.
+  const PropertyType = j.ObjectProperty ?? j.Property;
+  root.find(PropertyType).forEach((path) => {
+    const key = path.node.key;
+    const keyName =
+      key.type === 'Identifier'
+        ? key.name
+        : key.type === 'StringLiteral' || key.type === 'Literal'
+          ? key.value
+          : null;
+    if (typeof keyName !== 'string') return;
+
+    const lower = keyName.toLowerCase();
+    if (lower !== 'size' && !lower.endsWith('size')) return;
+
+    const value = path.node.value;
+    // size: 'tiny'
+    if (renameValue(value)) {
+      hasChanges = true;
+      return;
+    }
+    // size: { control: 'select', options: ['tiny', ...] }
+    if (value.type === 'ObjectExpression') {
+      const optionsProp = value.properties.find(
+        (p) => p.key && (p.key.name === 'options' || p.key.value === 'options'),
+      );
+      if (optionsProp) renameArrayElements(optionsProp.value);
+    }
+    // size: ['tiny', 'xsmall', ...]
+    renameArrayElements(value);
+  });
+
+  // 3. Union-type literals — NON-PRECISE, so only the unique names tiny/xsmall
+  //    are renamed. This avoids corrupting unrelated unions that happen to use
+  //    common words like 'medium' (e.g. a priority or breakpoint type) in a
+  //    file that also imports Avatar.
+  root.find(j.TSLiteralType).forEach((path) => {
+    if (renameValue(path.node.literal)) hasChanges = true;
+  });
+
+  // 4. Standalone array literals whose members are exactly the Avatar size
+  //    scale (identified by the presence of a unique name like tiny/xsmall) —
+  //    e.g. `(['tiny', 'xsmall', 'small', 'medium', 'large'] as const).map(...)`
+  //    used to render every size. The unique name proves the whole array is the
+  //    Avatar enum, so its ambiguous members can be renamed safely.
+  root.find(j.ArrayExpression).forEach((path) => {
+    renameArrayElements(path.node);
+  });
+
+  if (!hasChanges) return undefined;
+  return root.toSource({quote: 'single'});
+}

package/templates/blocks/components/Avatar/AvatarFallbackChain.tsx

@@ -13,7 +13,7 @@ export default function AvatarFallbackChain() {
         <Avatar
           src="https://lookaside.facebook.com/assets/astryx/DATA-Daniela-Gimenez.png"
           name="Daniela Gimenez"
-          size="medium"
+          size="lg"
         />
         <Text type="supporting">Valid src</Text>
       </HStack>
@@ -22,7 +22,7 @@ export default function AvatarFallbackChain() {
           src="https://lookaside.facebook.com/assets/astryx/does-not-exist-primary.jpg"
           fallbackSrc="https://lookaside.facebook.com/assets/astryx/DATA-Ami-Pena.png"
           name="Invalid User"
-          size="medium"
+          size="lg"
         />
         <Text type="supporting">Invalid src, valid fallbackSrc</Text>
       </HStack>
@@ -31,14 +31,14 @@ export default function AvatarFallbackChain() {
           src="https://lookaside.facebook.com/assets/astryx/does-not-exist-primary.jpg"
           fallbackSrc="https://lookaside.facebook.com/assets/astryx/does-not-exist-fallback.jpg"
           name="Test User"
-          size="medium"
+          size="lg"
         />
         <Text type="supporting">Both invalid, has name</Text>
       </HStack>
       <HStack gap={3} vAlign="center">
         <Avatar
           src="https://lookaside.facebook.com/assets/astryx/does-not-exist-primary.jpg"
-          size="medium"
+          size="lg"
         />
         <Text type="supporting">All invalid, no name</Text>
       </HStack>

package/templates/blocks/components/Avatar/AvatarGroup.tsx

@@ -37,7 +37,7 @@ export default function AvatarGroupBlock() {
         <Text type="supporting" color="secondary">
           Team members
         </Text>
-        <AvatarGroup size="medium">
+        <AvatarGroup size="lg">
           {USERS.map(user => (
             <Avatar key={user.name} src={user.src} name={user.name} />
           ))}
@@ -48,7 +48,7 @@ export default function AvatarGroupBlock() {
         <Text type="supporting" color="secondary">
           Larger group
         </Text>
-        <AvatarGroup size="medium">
+        <AvatarGroup size="lg">
           {USERS.slice(0, 3).map(user => (
             <Avatar key={user.name} src={user.src} name={user.name} />
           ))}

package/templates/blocks/components/Avatar/AvatarInitialsFallback.tsx

@@ -18,7 +18,7 @@ export default function AvatarInitialsFallback() {
     <Stack direction="horizontal" gap={6} vAlign="center">
       {NAMES.map(({name, note}) => (
         <Stack key={name} direction="vertical" gap={2} hAlign="center">
-          <Avatar name={name} size="medium" />
+          <Avatar name={name} size="lg" />
           <Text type="supporting" color="secondary">
             {note}
           </Text>

package/templates/blocks/components/Avatar/AvatarShowcase.tsx

@@ -11,23 +11,23 @@ export default function AvatarShowcase() {
       <Avatar
         src="https://lookaside.facebook.com/assets/astryx/DATA-Ana-Thomas.png"
         name="Ana Thomas"
-        size="large"
+        size="xl"
         status={<AvatarStatusDot variant="success" label="Online" />}
       />
       <Avatar
         src="https://lookaside.facebook.com/assets/astryx/DATA-Drew-Young.png"
         name="Drew Young"
-        size="large"
+        size="xl"
       />
       <Avatar
         src="https://lookaside.facebook.com/assets/astryx/DATA-Jihoo-Song.png"
         name="Jihoo Song"
-        size="large"
+        size="xl"
       />
       <Avatar
         src="https://lookaside.facebook.com/assets/astryx/DATA-Nam-Tran.png"
         name="Nam Tran"
-        size="large"
+        size="xl"
         status={<AvatarStatusDot variant="error" label="Online" />}
       />
     </Stack>

package/templates/blocks/components/Avatar/AvatarUserCard.tsx

@@ -35,7 +35,7 @@ export default function AvatarUserCard() {
           <Avatar
             src={user.src}
             name={user.name}
-            size="medium"
+            size="lg"
             status={
               <AvatarStatusDot variant={user.variant} label={user.variant} />
             }

package/templates/blocks/components/Avatar/AvatarWithImage.tsx

@@ -11,22 +11,22 @@ export default function AvatarWithImage() {
       <Avatar
         src="https://lookaside.facebook.com/assets/astryx/DATA-Ami-Pena.png"
         name="Ami Pena"
-        size="tiny"
+        size="xsm"
       />
       <Avatar
         src="https://lookaside.facebook.com/assets/astryx/DATA-Ana-Thomas.png"
         name="Ana Thomas"
-        size="small"
+        size="md"
       />
       <Avatar
         src="https://lookaside.facebook.com/assets/astryx/DATA-Daniela-Gimenez.png"
         name="Daniela Gimenez"
-        size="medium"
+        size="lg"
       />
       <Avatar
         src="https://lookaside.facebook.com/assets/astryx/DATA-Gabriela-Fernandez.png"
         name="Gabriela Fernandez"
-        size="large"
+        size="xl"
       />
     </Stack>
   );

package/templates/blocks/components/Avatar/AvatarWithStatus.tsx

@@ -11,19 +11,19 @@ export default function AvatarWithStatus() {
       <Avatar
         src="https://lookaside.facebook.com/assets/astryx/DATA-Itai-Jordaan.png"
         name="Itai Jordaan"
-        size="large"
+        size="xl"
         status={<AvatarStatusDot variant="success" label="Online" />}
       />
       <Avatar
         src="https://lookaside.facebook.com/assets/astryx/DATA-Margot-Schroder.png"
         name="Margot Schroder"
-        size="large"
+        size="xl"
         status={<AvatarStatusDot variant="neutral" label="Offline" />}
       />
       <Avatar
         src="https://lookaside.facebook.com/assets/astryx/DATA-Pablo-Morales.png"
         name="Pablo Morales"
-        size="large"
+        size="xl"
         status={<AvatarStatusDot variant="error" label="Busy" />}
       />
     </Stack>

package/templates/blocks/components/AvatarGroup/AvatarGroupShowcase.tsx

@@ -36,7 +36,7 @@ export default function AvatarGroupShowcase() {
         <Text type="supporting" color="secondary">
           Team members
         </Text>
-        <AvatarGroup size="medium">
+        <AvatarGroup size="lg">
           {USERS.map(u => (
             <Avatar key={u.key} name={u.name} />
           ))}
@@ -46,7 +46,7 @@ export default function AvatarGroupShowcase() {
         <Text type="supporting" color="secondary">
           With overflow
         </Text>
-        <AvatarGroup size="medium">
+        <AvatarGroup size="lg">
           {USERS.slice(0, 3).map(u => (
             <Avatar key={u.key} name={u.name} />
           ))}

package/templates/blocks/components/AvatarGroupOverflow/AvatarGroupOverflowCustomText.tsx

@@ -24,7 +24,7 @@ export default function AvatarGroupOverflowCustomText() {
       <Text type="supporting" color="secondary">
         Team members
       </Text>
-      <AvatarGroup size="medium">
+      <AvatarGroup size="lg">
         {TEAM.map(member => (
           <Avatar key={member.name} name={member.name} />
         ))}

package/templates/blocks/components/AvatarGroupOverflow/AvatarGroupOverflowDefault.tsx

@@ -24,7 +24,7 @@ export default function AvatarGroupOverflowDefault() {
       <Text type="supporting" color="secondary">
         Reviewers
       </Text>
-      <AvatarGroup size="medium">
+      <AvatarGroup size="lg">
         {REVIEWERS.map(reviewer => (
           <Avatar key={reviewer.name} name={reviewer.name} />
         ))}