@astryxdesign/cli 0.1.7 → 0.1.8-canary.4942fe4

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} />
         ))}

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

@@ -25,7 +25,7 @@ export default function AvatarGroupOverflowShowcase() {
         <Text type="supporting" color="secondary">
           Default overflow
         </Text>
-        <AvatarGroup size="medium">
+        <AvatarGroup size="lg">
           {USERS.map(user => (
             <Avatar key={user.name} name={user.name} />
           ))}
@@ -36,7 +36,7 @@ export default function AvatarGroupOverflowShowcase() {
         <Text type="supporting" color="secondary">
           Custom count text
         </Text>
-        <AvatarGroup size="medium">
+        <AvatarGroup size="lg">
           {USERS.slice(0, 2).map(user => (
             <Avatar key={user.name} name={user.name} />
           ))}

package/templates/blocks/components/AvatarStatusDot/AvatarStatusDotShowcase.tsx

@@ -10,17 +10,17 @@ export default function AvatarStatusDotShowcase() {
     <HStack gap={4} vAlign="center">
       <Avatar
         name="Online User"
-        size="large"
+        size="xl"
         status={<AvatarStatusDot variant="success" label="Online" />}
       />
       <Avatar
         name="Away User"
-        size="large"
+        size="xl"
         status={<AvatarStatusDot variant="neutral" label="Away" />}
       />
       <Avatar
         name="Busy User"
-        size="large"
+        size="xl"
         status={<AvatarStatusDot variant="error" label="Busy" />}
       />
     </HStack>

package/templates/blocks/components/AvatarStatusDot/AvatarStatusDotVariants.tsx

@@ -10,17 +10,17 @@ export default function AvatarStatusDotVariants() {
     <HStack gap={4} vAlign="center">
       <Avatar
         name="Ana Silva"
-        size="large"
+        size="xl"
         status={<AvatarStatusDot variant="success" label="Online" />}
       />
       <Avatar
         name="Ben Okafor"
-        size="large"
+        size="xl"
         status={<AvatarStatusDot variant="neutral" label="Away" />}
       />
       <Avatar
         name="Cleo Marsh"
-        size="large"
+        size="xl"
         status={<AvatarStatusDot variant="error" label="Do not disturb" />}
       />
     </HStack>

package/templates/blocks/components/Carousel/CarouselSnap.tsx

@@ -27,7 +27,7 @@ export default function CarouselSnap() {
         {TEAM.map(person => (
           <Card key={person.name} width={180} minHeight={140}>
             <Stack direction="vertical" gap={3} hAlign="center">
-              <Avatar name={person.name} size="medium" />
+              <Avatar name={person.name} size="lg" />
               <Stack direction="vertical" gap={1} hAlign="center">
                 <Text type="body" weight="bold">
                   {person.name}

package/templates/blocks/components/ChatMessage/ChatMessageAvatarName.tsx

@@ -17,7 +17,7 @@ export default function ChatMessageAvatarName() {
     <ChatMessageList style={{maxWidth: 500}}>
       <ChatMessage
         sender="assistant"
-        avatar={<Avatar name="Agent" size="small" />}>
+        avatar={<Avatar name="Agent" size="md" />}>
         <ChatMessageBubble
           name={
             <Text type="supporting" weight="semibold" color="secondary">
@@ -50,7 +50,7 @@ export default function ChatMessageAvatarName() {
       </ChatMessage>
       <ChatMessage
         sender="assistant"
-        avatar={<Avatar name="Agent" size="small" />}>
+        avatar={<Avatar name="Agent" size="md" />}>
         <ChatMessageBubble
           name={
             <Text type="supporting" weight="semibold" color="secondary">

package/templates/blocks/components/ChatMessage/ChatMessageMultiBubble.tsx

@@ -37,7 +37,7 @@ export default function ChatMessageMultiBubble() {
       </ChatMessage>
       <ChatMessage
         sender="assistant"
-        avatar={<Avatar name="Agent" size="small" />}>
+        avatar={<Avatar name="Agent" size="md" />}>
         <ChatMessageBubble
           group="first"
           name={

package/templates/blocks/components/ChatMessageBubble/ChatMessageBubbleGrouping.tsx

@@ -17,7 +17,7 @@ export default function ChatMessageBubbleGrouping() {
     <ChatMessageList style={{maxWidth: 500}}>
       <ChatMessage
         sender="assistant"
-        avatar={<Avatar name="Agent" size="small" />}>
+        avatar={<Avatar name="Agent" size="md" />}>
         <ChatMessageBubble
           group="first"
           name={

package/templates/blocks/components/ChatMessageBubble/ChatMessageBubbleMetadata.tsx

@@ -20,7 +20,7 @@ export default function ChatMessageBubbleMetadata() {
     <ChatMessageList style={{maxWidth: 500}}>
       <ChatMessage
         sender="assistant"
-        avatar={<Avatar name="Agent" size="small" />}>
+        avatar={<Avatar name="Agent" size="md" />}>
         <ChatMessageBubble
           name={
             <Text type="supporting" weight="semibold" color="secondary">

package/templates/blocks/components/ChatMessageList/ChatMessageListDensity.tsx

@@ -16,9 +16,9 @@ import {Fragment} from 'react';
 const DENSITIES = ['compact', 'balanced', 'spacious'] as const;
 
 const AVATAR_SIZE = {
-  compact: 'xsmall' as const,
-  balanced: 'small' as const,
-  spacious: 'small' as const,
+  compact: 'sm' as const,
+  balanced: 'md' as const,
+  spacious: 'md' as const,
 };
 
 export default function ChatMessageListDensity() {
@@ -34,15 +34,11 @@ export default function ChatMessageListDensity() {
             <VStack style={{flex: 1, minHeight: 0}}>
               <ChatMessageList density={density}>
                 <ChatMessage sender="user">
-                  <ChatMessageBubble>
-                    How does density work?
-                  </ChatMessageBubble>
+                  <ChatMessageBubble>How does density work?</ChatMessageBubble>
                 </ChatMessage>
                 <ChatMessage
                   sender="assistant"
-                  avatar={
-                    <Avatar name="Agent" size={AVATAR_SIZE[density]} />
-                  }>
+                  avatar={<Avatar name="Agent" size={AVATAR_SIZE[density]} />}>
                   <ChatMessageBubble>
                     Density provides default spacing at every level — message
                     gap, bubble padding, and gap between child elements. Use gap

package/templates/blocks/components/ChatMessageList/ChatMessageListFullFeatured.tsx

@@ -42,7 +42,7 @@ export default function ChatMessageListFullFeatured() {
 
         <ChatMessage
           sender="assistant"
-          avatar={<Avatar name="Agent" size="small" />}>
+          avatar={<Avatar name="Agent" size="md" />}>
           <ChatMessageBubble group="first">
             <Markdown density="compact">
               {`Sure! Here's the key pattern from **useReducer.ts**:`}

package/templates/blocks/components/CodeBlock/CodeBlockTerminal.tsx

@@ -7,7 +7,7 @@ import {githubDark} from '@astryxdesign/core/theme/syntax';
 import {CodeBlock} from '@astryxdesign/core/CodeBlock';
 
 const commands = `$ astryx init --features agents
-✓ AI agent docs installed → .claude/CLAUDE.md
+✓ AI agent docs installed → AGENTS.md
 $ pnpm astryx component CodeBlock --dense`;
 
 export default function CodeBlockTerminal() {

package/templates/blocks/components/HoverCard/HoverCardShowcase.tsx

@@ -15,7 +15,7 @@ export default function HoverCardShowcase() {
       content={
         <Stack direction="vertical" gap={2} style={{width: 240}}>
           <Stack direction="horizontal" gap={2} vAlign="center">
-            <Avatar name="Jane Doe" size="medium" />
+            <Avatar name="Jane Doe" size="lg" />
             <Stack direction="vertical" gap={0}>
               <Heading level={5}>Jane Doe</Heading>
               <Text type="supporting" color="secondary">

package/templates/blocks/components/Item/ItemWithMedia.tsx

@@ -13,14 +13,14 @@ export default function ItemWithMedia() {
   return (
     <Stack gap={0}>
       <Item
-        startContent={<Avatar name="Ada Lovelace" size="xsmall" />}
+        startContent={<Avatar name="Ada Lovelace" size="sm" />}
         label="Ada Lovelace"
         description="Design systems engineer"
         endContent={<Badge label="Owner" variant="purple" />}
         onClick={() => {}}
       />
       <Item
-        startContent={<Avatar name="Grace Hopper" size="xsmall" />}
+        startContent={<Avatar name="Grace Hopper" size="sm" />}
         label="Grace Hopper"
         description="Compiler platform"
         endContent={<Text color="secondary">Online</Text>}

package/templates/blocks/components/ListItem/ListItemWithMedia.tsx

@@ -13,14 +13,14 @@ export default function ListItemWithMedia() {
       <ListItem
         label="Ada Lovelace"
         description="Design systems engineer"
-        startContent={<Avatar name="Ada Lovelace" size="xsmall" />}
+        startContent={<Avatar name="Ada Lovelace" size="sm" />}
         endContent={<Badge label="Owner" variant="purple" />}
         onClick={() => {}}
       />
       <ListItem
         label="Grace Hopper"
         description="Platform infrastructure"
-        startContent={<Avatar name="Grace Hopper" size="xsmall" />}
+        startContent={<Avatar name="Grace Hopper" size="sm" />}
         endContent={<Badge label="On call" variant="blue" />}
         onClick={() => {}}
       />

package/templates/blocks/components/Pagination/PaginationDotsCarousel.tsx

@@ -62,12 +62,8 @@ export default function PaginationDotsCarousel() {
         <Stack direction="vertical" gap={3}>
           <Stars count={review.stars} />
           <Text type="body">{review.quote}</Text>
-          <Stack
-            direction="horizontal"
-            gap={3}
-            vAlign="center"
-            hAlign="start">
-            <Avatar name={review.name} size="small" />
+          <Stack direction="horizontal" gap={3} vAlign="center" hAlign="start">
+            <Avatar name={review.name} size="md" />
             <Stack direction="vertical" gap={0}>
               <Text type="supporting" weight="bold">
                 {review.name}

package/templates/blocks/components/Stack/StackFillItem.tsx

@@ -17,13 +17,9 @@ export default function StackFillItem() {
   return (
     <Stack direction="vertical" gap={3} width="100%" style={{maxWidth: 300}}>
       {USERS.map(user => (
-        <Stack
-          key={user.name}
-          direction="horizontal"
-          gap={3}
-          vAlign="center">
+        <Stack key={user.name} direction="horizontal" gap={3} vAlign="center">
           <StackItem size="static">
-            <Avatar name={user.name} size="small" />
+            <Avatar name={user.name} size="md" />
           </StackItem>
           <StackItem size="fill">
             <Stack direction="vertical" gap={0}>

package/templates/blocks/components/TabList/TabListTabsWithActions.doc.mjs

@@ -7,7 +7,7 @@ export const doc = {
   name: 'TabList — With Actions',
   displayName: 'TabList — With Actions',
   description:
-    'Page header pattern with tabs on the left and action buttons pushed to the right. When hasDivider is true, pair with a smaller button size (sm) so actions don\'t overpower the tab row.',
+    'Page header pattern with tabs on the left and action buttons pushed to the right. When hasDivider is true, match the Button size to the TabList size so the tabs and actions align to a shared baseline above the divider.',
   isReady: true,
   aspectRatio: 4 / 3,
   componentsUsed: ['TabList', 'Tab', 'Button'],

package/templates/blocks/components/TabList/TabListTabsWithActions.tsx

@@ -55,16 +55,11 @@ export default function TabListTabsWithActions() {
         <Button
           label="Filter"
           variant="ghost"
-          size="sm"
+          size="lg"
           icon={FilterIcon}
           isIconOnly
         />
-        <Button
-          label="New item"
-          variant="primary"
-          size="sm"
-          icon={PlusIcon}
-        />
+        <Button label="New item" variant="primary" size="lg" icon={PlusIcon} />
       </div>
     </TabList>
   );

package/templates/blocks/components/TypeaheadItem/TypeaheadItemShowcase.tsx

@@ -40,7 +40,7 @@ export default function TypeaheadItemShowcase() {
         renderItem={(item: PersonItem) => (
           <TypeaheadItem
             item={item}
-            icon={<Avatar name={item.label} size="small" />}
+            icon={<Avatar name={item.label} size="md" />}
             description={item.auxiliaryData.role}
           />
         )}

package/templates/pages/ai-chat/page.tsx

@@ -390,7 +390,7 @@ export default function AIChatConversationTemplate() {
                     {/* Assistant message: tool calls, markdown, code block */}
                     <ChatMessage
                       sender="assistant"
-                      avatar={<Avatar name="Agent" size="small" />}>
+                      avatar={<Avatar name="Agent" size="md" />}>
                       <ChatMessageBubble variant="ghost">
                         Looking into the auth files now. Let me read through the
                         code and trace the token refresh flow.
@@ -510,7 +510,7 @@ The fix is to catch \`TokenExpiredError\` specifically and attempt a refresh bef
                     {/* Assistant message: test results table + code block */}
                     <ChatMessage
                       sender="assistant"
-                      avatar={<Avatar name="Agent" size="small" />}>
+                      avatar={<Avatar name="Agent" size="md" />}>
                       <ChatToolCalls
                         defaultIsExpanded
                         calls={[
@@ -608,7 +608,7 @@ The fix is to catch \`TokenExpiredError\` specifically and attempt a refresh bef
                     {/* Assistant message: artifact card */}
                     <ChatMessage
                       sender="assistant"
-                      avatar={<Avatar name="Agent" size="small" />}>
+                      avatar={<Avatar name="Agent" size="md" />}>
                       <ChatMessageBubble variant="ghost">
                         <Markdown density="compact">
                           {`I've drafted a design doc covering the problem, the fix, and the test matrix — pulling straight from the changes we just made.\n\nOpen the document below to review it. Want me to expand any section?`}
@@ -647,7 +647,7 @@ The fix is to catch \`TokenExpiredError\` specifically and attempt a refresh bef
                     {/* Assistant message: in-progress tool call */}
                     <ChatMessage
                       sender="assistant"
-                      avatar={<Avatar name="Agent" size="small" />}>
+                      avatar={<Avatar name="Agent" size="md" />}>
                       <ChatMessageBubble variant="ghost">
                         <Markdown density="compact">
                           {`On it — adding a **Rollout & Monitoring** section with a staged flag ramp and the alert thresholds. Updating the document now.`}

package/templates/pages/dashboard-portfolio/page.tsx

@@ -4,12 +4,7 @@
 
 import {useState} from 'react';
 
-import {
-  VStack,
-  HStack,
-  Layout,
-  LayoutContent,
-} from '@astryxdesign/core/Layout';
+import {VStack, HStack, Layout, LayoutContent} from '@astryxdesign/core/Layout';
 import {Text, Heading} from '@astryxdesign/core/Text';
 import {Card} from '@astryxdesign/core/Card';
 import {Grid, GridSpan} from '@astryxdesign/core/Grid';
@@ -642,7 +637,7 @@ function AssetRow({
       label={<Text weight="bold">{ticker}</Text>}
       description={name}
       href="#"
-      startContent={<Avatar name={ticker} size="small" />}
+      startContent={<Avatar name={ticker} size="md" />}
       endContent={
         <VStack gap={0} hAlign="end">
           <Text type="body">{value}</Text>
@@ -693,10 +688,7 @@ export default function DashboardPortfolioTemplate() {
             {/* KPI metric cards */}
             <Grid columns={{minWidth: 280, repeat: 'fit'}} gap={4}>
               {Array.from({length: Math.ceil(metrics.length / 2)}, (_, i) => (
-                <Grid
-                  key={i}
-                  columns={{minWidth: 280, repeat: 'fit'}}
-                  gap={4}>
+                <Grid key={i} columns={{minWidth: 280, repeat: 'fit'}} gap={4}>
                   {metrics.slice(i * 2, i * 2 + 2).map(m => (
                     <MetricCard key={m.label} {...m} />
                   ))}

package/templates/pages/detail-page/page.tsx

@@ -199,7 +199,7 @@ function PageHeader({
                   </Text>
                   <HStack gap={1} vAlign="center">
                     <Bullet />
-                    <Avatar name="Jane Doe" size="xsmall" />
+                    <Avatar name="Jane Doe" size="sm" />
                     <Text type="body" maxLines={1}>
                       Jane Doe
                     </Text>
@@ -444,7 +444,7 @@ function TimelineSection() {
           {ACTIVITY.map((item, i) => (
             <VStack key={i} gap={2}>
               <HStack gap={3} vAlign="start">
-                <Avatar name={item.user} size="small" />
+                <Avatar name={item.user} size="md" />
                 <StackItem size="fill">
                   <VStack gap={2}>
                     <Card variant="muted" padding={3}>
@@ -478,11 +478,7 @@ function TimelineSection() {
                           size="xsm"
                           color="secondary"
                         />
-                        <Icon
-                          icon={HeartIcon}
-                          size="xsm"
-                          color="secondary"
-                        />
+                        <Icon icon={HeartIcon} size="xsm" color="secondary" />
                         <Text type="supporting" color="secondary">
                           {item.reactions}
                         </Text>
@@ -533,16 +529,13 @@ function PanelContent() {
             321 Smith Road, CA 38238
           </MetadataListItem>
           <MetadataListItem label="Phone">234-</MetadataListItem>
-          <MetadataListItem label="Email">
-            janedoe@email.com
-          </MetadataListItem>
+          <MetadataListItem label="Email">janedoe@email.com</MetadataListItem>
           <MetadataListItem label="Billing Address">
             Same as shipping address
           </MetadataListItem>
         </MetadataList>
       </Collapsible>
-      <Collapsible
-        trigger={<Heading level={4}>Fraud Analysis</Heading>}>
+      <Collapsible trigger={<Heading level={4}>Fraud Analysis</Heading>}>
         <VStack gap={1}>
           <ProgressBar
             label="Risk level"

package/templates/pages/documentation-design/page.tsx

@@ -541,7 +541,7 @@ function ComponentDetailView({activeNav}: {activeNav: string}) {
         endContent={<Badge label="New" variant="info" />}
       />
     ),
-    avatar: <Avatar name="Alice" size="medium" />,
+    avatar: <Avatar name="Alice" size="lg" />,
     badge: <Badge label="Success" variant="success" />,
     card: (
       <Card>