@cdx-ui/components 0.2.4 → 0.2.5

package/docs/components/color-field/content.md

@@ -1,12 +1,11 @@
-# ColorField (https://design.candescent.com/docs/components/color-field)
+# Color Field (https://design.candescent.com/docs/components/color-field)
 
 Resources: [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/inputs-colorfield--default)
 
 `ColorField` parses full hex values or edits a single RGB or HSL channel.
 
 ```tsx
-import { ColorField, ColorSwatch, Field } from '@cdx-ui/components';
-import { parseColor } from '@cdx-ui/primitives';
+import { ColorField, ColorSwatch, Field, parseColor } from '@cdx-ui/components';
 ```
 
 ## Basic
@@ -15,8 +14,7 @@ Compose `Field` for the visible label and place an optional swatch in `ColorFiel
 
 ```tsx
 import { useState } from 'react';
-import { ColorField, ColorSwatch, Field } from '@cdx-ui/components';
-import { parseColor, type Color } from '@cdx-ui/primitives';
+import { ColorField, ColorSwatch, Field, parseColor, type Color } from '@cdx-ui/components';
 
 function requiredColor(value: string): Color {
   const color = parseColor(value);

package/docs/components/color-picker/content.md

@@ -1,4 +1,4 @@
-# ColorPicker (https://design.candescent.com/docs/components/color-picker)
+# Color Picker (https://design.candescent.com/docs/components/color-picker)
 
 Resources: [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/inputs-colorpicker--default)
 
@@ -15,8 +15,8 @@ import {
   HStack,
   Select,
   Text,
+  parseColor,
 } from '@cdx-ui/components';
-import { parseColor } from '@cdx-ui/primitives';
 ```
 
 ## Basic
@@ -35,8 +35,9 @@ import {
   HStack,
   Select,
   Text,
+  parseColor,
+  type Color,
 } from '@cdx-ui/components';
-import { parseColor, type Color } from '@cdx-ui/primitives';
 
 type ColorFormat = 'hex' | 'rgb' | 'hsl';
 
@@ -66,7 +67,7 @@ export default function ColorPickerBasicDemo() {
   return (
     <ColorPicker value={value} onValueChange={setValue} className="w-full max-w-sm">
       <ColorPicker.Trigger accessibilityLabel="Choose brand color">
-        <ColorSwatch size="sm" />
+        <ColorSwatch />
         <Text>{value.toString('hex')}</Text>
       </ColorPicker.Trigger>
       <ColorPicker.Popover>

package/docs/components/color-slider/content.md

@@ -1,20 +1,18 @@
-# ColorSlider (https://design.candescent.com/docs/components/color-slider)
+# Color Slider (https://design.candescent.com/docs/components/color-slider)
 
 Resources: [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/inputs-colorslider--default)
 
 `ColorSlider` adjusts one color channel and renders the channel gradient in its rail.
 
 ```tsx
-import { ColorSlider } from '@cdx-ui/components';
-import { parseColor } from '@cdx-ui/primitives';
+import { ColorSlider, parseColor } from '@cdx-ui/components';
 ```
 
 ## Basic
 
 ```tsx
 import { useState } from 'react';
-import { ColorSlider } from '@cdx-ui/components';
-import { parseColor, type Color } from '@cdx-ui/primitives';
+import { ColorSlider, parseColor, type Color } from '@cdx-ui/components';
 
 function requiredColor(value: string): Color {
   const color = parseColor(value);

package/docs/components/color-swatch/content.md

@@ -1,19 +1,17 @@
-# ColorSwatch (https://design.candescent.com/docs/components/color-swatch)
+# Color Swatch (https://design.candescent.com/docs/components/color-swatch)
 
 Resources: [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/inputs-colorswatch--default)
 
 `ColorSwatch` displays an explicit color or the current value from a surrounding `ColorPicker`.
 
 ```tsx
-import { ColorSwatch, HStack } from '@cdx-ui/components';
-import { parseColor } from '@cdx-ui/primitives';
+import { ColorSwatch, HStack, parseColor } from '@cdx-ui/components';
 ```
 
 ## Basic
 
 ```tsx
-import { ColorSwatch, HStack } from '@cdx-ui/components';
-import { parseColor, type Color } from '@cdx-ui/primitives';
+import { ColorSwatch, HStack, parseColor, type Color } from '@cdx-ui/components';
 
 function requiredColor(value: string): Color {
   const color = parseColor(value);

package/docs/components/color-swatch-picker/content.md

@@ -1,20 +1,18 @@
-# ColorSwatchPicker (https://design.candescent.com/docs/components/color-swatch-picker)
+# Color Swatch Picker (https://design.candescent.com/docs/components/color-swatch-picker)
 
 Resources: [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/inputs-colorswatchpicker--default)
 
 `ColorSwatchPicker` selects one color from a consumer-supplied set of presets.
 
 ```tsx
-import { ColorSwatchPicker } from '@cdx-ui/components';
-import { parseColor } from '@cdx-ui/primitives';
+import { ColorSwatchPicker, parseColor } from '@cdx-ui/components';
 ```
 
 ## Basic
 
 ```tsx
 import { useState } from 'react';
-import { ColorSwatchPicker } from '@cdx-ui/components';
-import { parseColor, type Color } from '@cdx-ui/primitives';
+import { ColorSwatchPicker, parseColor, type Color } from '@cdx-ui/components';
 
 function requiredColor(value: string): Color {
   const color = parseColor(value);

package/docs/components/content.md

@@ -22,12 +22,12 @@
 - [Select](https://design.candescent.com/docs/components/select/content.md) — A form control that allows users to choose one option from a dropdown list.
 - [Textarea](https://design.candescent.com/docs/components/textarea/content.md) — A multi-line text entry for longer free-form content.
 - [Slider](https://design.candescent.com/docs/components/slider/content.md) — A control for selecting a numeric value along a track.
-- [ColorPicker](https://design.candescent.com/docs/components/color-picker/content.md) — A compound color picker that coordinates an opaque color value with a trigger and popover.
-- [ColorArea](https://design.candescent.com/docs/components/color-area/content.md) — A two-dimensional control for selecting saturation and brightness in the HSB color space.
-- [ColorSlider](https://design.candescent.com/docs/components/color-slider/content.md) — A one-dimensional control for selecting a channel from an opaque RGB, HSL, or HSB color.
-- [ColorField](https://design.candescent.com/docs/components/color-field/content.md) — A text field for editing an opaque color or one RGB or HSL channel.
-- [ColorSwatch](https://design.candescent.com/docs/components/color-swatch/content.md) — A presentational sample of an opaque color in configurable sizes and shapes.
-- [ColorSwatchPicker](https://design.candescent.com/docs/components/color-swatch-picker/content.md) — A radio-style compound for choosing from consumer-supplied color presets.
+- [Color Picker](https://design.candescent.com/docs/components/color-picker/content.md) — A compound color picker that coordinates an opaque color value with a trigger and popover.
+- [Color Area](https://design.candescent.com/docs/components/color-area/content.md) — A two-dimensional control for selecting saturation and brightness in the HSB color space.
+- [Color Slider](https://design.candescent.com/docs/components/color-slider/content.md) — A one-dimensional control for selecting a channel from an opaque RGB, HSL, or HSB color.
+- [Color Field](https://design.candescent.com/docs/components/color-field/content.md) — A text field for editing an opaque color or one RGB or HSL channel.
+- [Color Swatch](https://design.candescent.com/docs/components/color-swatch/content.md) — A presentational sample of an opaque color in configurable sizes and shapes.
+- [Color Swatch Picker](https://design.candescent.com/docs/components/color-swatch-picker/content.md) — A radio-style compound for choosing from consumer-supplied color presets.
 - [Switch](https://design.candescent.com/docs/components/switch/content.md) — A toggle control that lets users turn a single option on or off.
 - [Tile](https://design.candescent.com/docs/components/tile/content.md) — A composable, selectable card/row for pick-one or pick-many flows such as account pickers and category selectors.
 
@@ -62,7 +62,7 @@
 - [Icon](https://design.candescent.com/docs/components/icon/content.md) — A cross-platform SVG icon wrapper with semantic color, sizing, filled variants, and accessibility support.
 - [Image](https://design.candescent.com/docs/components/image/content.md) — Displays local or remote images across native and web platforms.
 - [List Item](https://design.candescent.com/docs/components/list-item/content.md) — A composable row for display and navigation — accounts, transactions, alerts, settings, and nav rows.
-- [ReorderableList](https://design.candescent.com/docs/components/reorderable-list/content.md) — A short, mount-all list that lets members drag rows into a new order via an explicit handle.
+- [Reorderable List](https://design.candescent.com/docs/components/reorderable-list/content.md) — A short, mount-all list that lets members drag rows into a new order via an explicit handle.
 - [Virtualized List](https://design.candescent.com/docs/components/virtualized-list/content.md) — A performant virtualized list for large datasets — only visible rows mount at a time.
 - [Text](https://design.candescent.com/docs/components/text/content.md) — Body text with a responsive, token-based typography scale.
 - [Heading](https://design.candescent.com/docs/components/heading/content.md) — Semantic heading text with an accessible, token-based typography scale.
@@ -79,10 +79,11 @@
 ## Surfaces & layout
 
 - [Bottom Sheet](https://design.candescent.com/docs/components/bottom-sheet/content.md) — A surface that slides up from the bottom of the screen to present secondary tasks without leaving the current context.
+- [Box](https://design.candescent.com/docs/components/box/content.md) — The layout container for building screens, with semantic web elements through role and an asChild escape hatch.
 - [Card](https://design.candescent.com/docs/components/card/content.md) — A composable surface for grouping related content, with optional brand stripe, header, content, and footer regions.
 - [Drawer](https://design.candescent.com/docs/components/drawer/content.md) — A panel attached to an edge of the viewport or container, with modal and permanent presentations.
-- [ScopedTheme](https://design.candescent.com/docs/components/scoped-theme/content.md) — Forces a specific theme on a component subtree, regardless of the application's global theme.
-- [ScrollShadow](https://design.candescent.com/docs/components/scroll-shadow/content.md) — Fades the edges of a scroll view so overflowing content reads as scrollable on iOS, Android, and web.
+- [Scoped Theme](https://design.candescent.com/docs/components/scoped-theme/content.md) — Forces a specific theme on a component subtree, regardless of the application's global theme.
+- [Scroll Shadow](https://design.candescent.com/docs/components/scroll-shadow/content.md) — Fades the edges of a scroll view so overflowing content reads as scrollable on iOS, Android, and web.
 - [Stack](https://design.candescent.com/docs/components/stack/content.md) — Horizontal and vertical layout primitives with token-based spacing and optional reversed order.
 
 ## Navigation

package/docs/components/data-grid/content.md

@@ -15,7 +15,7 @@ Pass `rows` and `columns`. This account grid starts with the features most appli
 
 Search is **not** always on. Set `showToolbar` to show the search field (same opt-in as MUI Community’s toolbar / quick filter). Set `headerFilters` to show per-column filter inputs in a second header row.
 
-The grid is a fixed viewport like MUI Data Grid Community: **300px** tall by default. Column headers stay visible while rows scroll; pagination stays at the bottom. Override height with `className` or `style` (`h-full`, `h-[520px]`, or `style={{ height: 520 }}`).
+The grid is a fixed viewport like MUI Data Grid Community: **300px** tall by default. Column headers stay visible while rows scroll; pagination stays at the bottom. Override height with a `className` such as `h-full` or a spacing-scale height (`h-130`).
 
 When `rows` is empty, a centered "No rows" message is shown and pagination is omitted. Pass `noRowsOverlay` to replace the default message.
 
@@ -70,7 +70,7 @@ export default function DataGridBasicDemo() {
       aria-label="Accounts"
       defaultPaginationModel={{ page: 0, pageSize: 5 }}
       pageSizeOptions={[5, 10, 25]}
-      className="h-[420px]"
+      className="h-105"
     />
   );
 }
@@ -138,7 +138,7 @@ const columns: GridColDef<Account>[] = [
           value={row.automation}
           max={100}
           accessibilityLabel={`${row.name} is ${row.automation.toString()}% automated`}
-          className="w-20"
+          className="w-full max-w-20"
         >
           <ProgressBar.Indicator />
         </ProgressBar>
@@ -198,7 +198,7 @@ export default function DataGridRichCellsDemo() {
       columns={columns}
       hideFooter
       aria-label="Account operations"
-      className="h-[520px]"
+      className="h-130"
     />
   );
 }
@@ -259,10 +259,10 @@ export default function DataGridToolbarActionsDemo() {
       onFilterModelChange={setFilterModel}
       toolbarActions={
         <>
-          <Chip color={filterModel.length > 0 ? 'action' : 'neutral'} variant="subtle" size="small">
+          <Chip color={filterModel.length > 0 ? 'action' : 'neutral'} size="small">
             <Chip.Label>{filterModel.length} active</Chip.Label>
           </Chip>
-          <Button variant="ghost" color="action" size="small" onPress={toggleHeaderFilters}>
+          <Button variant="ghost" size="small" onPress={toggleHeaderFilters}>
             <Button.Label>Filters</Button.Label>
             <Button.Icon as={FilterList} position="trailing" />
           </Button>
@@ -271,7 +271,7 @@ export default function DataGridToolbarActionsDemo() {
       aria-label="Accounts"
       defaultPaginationModel={{ page: 0, pageSize: 5 }}
       pageSizeOptions={[5, 10, 25]}
-      className="h-[420px]"
+      className="h-105"
     />
   );
 }
@@ -315,7 +315,6 @@ export default function DataGridSelectionDemo() {
           </Chip>
           <Button
             variant="ghost"
-            color="action"
             size="small"
             isDisabled={selectedCount === 0}
             onPress={() => setSelectionModel({ type: 'include', ids: new Set() })}
@@ -327,7 +326,7 @@ export default function DataGridSelectionDemo() {
       aria-label="Accounts"
       defaultPaginationModel={{ page: 0, pageSize: 5 }}
       pageSizeOptions={[5, 10]}
-      className="h-[420px]"
+      className="h-105"
     />
   );
 }
@@ -408,7 +407,7 @@ export default function DataGridServerDataDemo() {
       onSortModelChange={setSortModel}
       pageSizeOptions={[5, 10]}
       aria-label="Server-managed accounts"
-      className="h-[420px]"
+      className="h-105"
     />
   );
 }
@@ -478,7 +477,7 @@ export default function DataGridEmptyDemo() {
         </VStack>
       }
       aria-label="Accounts"
-      className="h-[300px]"
+      className="h-75"
     />
   );
 }

package/docs/components/drawer/content.md

@@ -36,7 +36,7 @@ export default function DrawerBasicDemo() {
       <Button onPress={() => setOpen(true)}>
         <Button.Label>Open drawer</Button.Label>
       </Button>
-      <Drawer variant="modal" isOpen={open} onOpenChange={setOpen} size="default">
+      <Drawer variant="modal" isOpen={open} onOpenChange={setOpen}>
         <Drawer.Header>
           <Drawer.Title>Filter accounts</Drawer.Title>
           <Drawer.Description>Choose which accounts appear in this view.</Drawer.Description>
@@ -70,7 +70,7 @@ import { Box, Button, Drawer, Text } from '@cdx-ui/components';
 
 export default function DrawerPermanentDemo() {
   return (
-    <Box className="h-[360px] flex-row border border-stroke-secondary">
+    <Box className="h-90 flex-row border border-stroke-secondary">
       <Box className="flex-1 items-center justify-center gap-4 p-4">
         <Text>Main content area</Text>
         <Button variant="outline">
@@ -116,7 +116,7 @@ export default function DrawerSizesDemo() {
   return (
     <Box className="gap-4">
       {(Object.keys(sizeLabels) as (keyof typeof sizeLabels)[]).map((size) => (
-        <Drawer key={size} variant="permanent" size={size} className="h-[120px]">
+        <Drawer key={size} size={size} className="h-30">
           <Drawer.Header showSeparator={false}>
             <Drawer.Title>{size}</Drawer.Title>
           </Drawer.Header>
@@ -163,13 +163,7 @@ export default function DrawerSidesDemo() {
           </Button>
         ))}
       </Box>
-      <Drawer
-        variant="modal"
-        isOpen={open}
-        onOpenChange={setOpen}
-        placement={placement}
-        size="default"
-      >
+      <Drawer variant="modal" isOpen={open} onOpenChange={setOpen} placement={placement}>
         <Drawer.Header>
           <Drawer.Title>{placement} drawer</Drawer.Title>
           <Drawer.Description>The panel attaches to this edge of the viewport.</Drawer.Description>
@@ -193,25 +187,23 @@ export default function DrawerSidesDemo() {
 Set `fullBleed` on `Drawer.Content` to remove horizontal padding for edge-to-edge lists, dividers, or imagery.
 
 ```tsx
-import { Box, Drawer, Text } from '@cdx-ui/components';
+import { Box, Drawer, ListItem } from '@cdx-ui/components';
 
 export default function DrawerFullBleedDemo() {
   return (
-    <Box className="h-[280px] flex-row border border-stroke-secondary">
-      <Drawer variant="permanent" size="default">
+    <Box className="h-70 flex-row border border-stroke-secondary">
+      <Drawer>
         <Drawer.Header>
           <Drawer.Title>Recent activity</Drawer.Title>
         </Drawer.Header>
         <Drawer.Content fullBleed>
-          <Box className="border-b border-stroke-secondary px-4 py-3">
-            <Text size="sm">Coffee shop</Text>
-          </Box>
-          <Box className="border-b border-stroke-secondary px-4 py-3">
-            <Text size="sm">Direct deposit</Text>
-          </Box>
-          <Box className="px-4 py-3">
-            <Text size="sm">Transfer to savings</Text>
-          </Box>
+          {['Coffee shop', 'Direct deposit', 'Transfer to savings'].map((label, index, labels) => (
+            <ListItem key={label} size="compact" showSeparator={index < labels.length - 1}>
+              <ListItem.Content>
+                <ListItem.Title>{label}</ListItem.Title>
+              </ListItem.Content>
+            </ListItem>
+          ))}
         </Drawer.Content>
       </Drawer>
     </Box>
@@ -232,10 +224,10 @@ import { Box, Drawer, Icon, Text } from '@cdx-ui/components';
 export default function DrawerHeaderVariantsDemo() {
   return (
     <Box className="gap-4">
-      <Drawer variant="permanent" size="default" className="h-[160px]">
+      <Drawer className="h-40">
         <Drawer.Header>
           <Drawer.LeadingSlot>
-            <Icon as={FilterList} size={24} />
+            <Icon as={FilterList} className="size-6" />
           </Drawer.LeadingSlot>
           <Drawer.Title>Filter accounts</Drawer.Title>
           <Drawer.Description>Choose which accounts appear in this view.</Drawer.Description>
@@ -246,7 +238,7 @@ export default function DrawerHeaderVariantsDemo() {
           </Text>
         </Drawer.Content>
       </Drawer>
-      <Drawer variant="permanent" size="default" className="h-[120px]">
+      <Drawer className="h-30">
         <Drawer.Header close={null}>
           <Drawer.Title>Accounts</Drawer.Title>
         </Drawer.Header>

package/docs/components/full-screen-dialog/content.md

@@ -114,7 +114,7 @@ export default function FullScreenDialogWithFooterDemo() {
         <FullScreenDialog.Content className="w-full max-w-md self-center">
           <ScrollView className="flex-1" contentContainerClassName="gap-6 p-4">
             <Box className="items-center gap-3 py-4">
-              <Avatar size="2xl" color="brand" accessibilityLabel="Springfield Electric">
+              <Avatar size="2xl" accessibilityLabel="Springfield Electric">
                 <Avatar.Text>Springfield Electric</Avatar.Text>
               </Avatar>
               <Heading size="xl">$84.12</Heading>
@@ -349,7 +349,7 @@ export default function FullScreenDialogHeaderContentDemo() {
       <FullScreenDialog.Trigger asChild>
         <ListItem showSeparator={false} accessibilityHint="Opens a searchable list of payees">
           <ListItem.LeadingSlot>
-            <Avatar size="lg" color="brand" accessibilityLabel={payee?.name ?? 'Payee'}>
+            <Avatar size="lg" accessibilityLabel={payee?.name ?? 'Payee'}>
               <Avatar.Text>{payee?.name ?? ''}</Avatar.Text>
             </Avatar>
           </ListItem.LeadingSlot>

package/docs/components/icon/content.md

@@ -180,7 +180,7 @@ Inherits all `ForgeIconProps` except the SVG `color`: [`SvgProps`](https://githu
 - A raw `color` value, such as a hex string, is deprecated. It is passed to the SVG unchanged and logs a one-time warning in development. Use a semantic color instead.
 - `className` defaults to `size-5 shrink-0`, so an icon keeps its size in a row of text on web.
 - Consumer classes are merged after the defaults, so `size-*` and `shrink` utilities override them.
-- The inherited `size` prop can set the SVG dimensions directly when a `size-*` class is not appropriate.
+- Don't pass the inherited numeric `size` prop; it bypasses the spacing scale. Use `size-4` or `size-6` when the default doesn't fit.
 - `filled` defaults to `false`.
 
 ## Accessibility

package/docs/components/icon-button/content.md

@@ -34,9 +34,9 @@ import { ArrowCircleUp } from '@cdx-ui/icons';
 export default function IconButtonSolidDemo() {
   return (
     <Box className="flex-row gap-4">
-      <IconButton as={ArrowCircleUp} variant="solid" color="neutral" accessibilityLabel="Neutral" />
-      <IconButton as={ArrowCircleUp} variant="solid" color="action" accessibilityLabel="Action" />
-      <IconButton as={ArrowCircleUp} variant="solid" color="danger" accessibilityLabel="Danger" />
+      <IconButton as={ArrowCircleUp} color="neutral" accessibilityLabel="Neutral" />
+      <IconButton as={ArrowCircleUp} color="action" accessibilityLabel="Action" />
+      <IconButton as={ArrowCircleUp} color="danger" accessibilityLabel="Danger" />
     </Box>
   );
 }

package/docs/components/input/content.md

@@ -101,6 +101,71 @@ export default function InputPasswordDemo() {
 }
 ```
 
+## Character count
+
+Derive the count from the field value and render it as adornment text in a trailing `Input.Slot` — a raw count, or the count alongside a limit.
+
+```tsx
+import { useState } from 'react';
+import { Box, Input, Text } from '@cdx-ui/components';
+
+const MEMO_LIMIT = 40;
+
+export default function InputCharacterCountDemo() {
+  const [nickname, setNickname] = useState('Checking');
+  const [memo, setMemo] = useState('Rent for October');
+  const nicknameCount = String(nickname.length);
+  const memoLength = String(memo.length);
+  const memoLimit = String(MEMO_LIMIT);
+  const memoCount = `${memoLength}/${memoLimit}`;
+
+  return (
+    <Box className="w-full gap-4">
+      <Box className="gap-2">
+        <Text size="sm" color="secondary">
+          Count
+        </Text>
+        <Input>
+          <Input.Field
+            accessibilityLabel="Account nickname"
+            value={nickname}
+            onChangeText={setNickname}
+          />
+          <Input.Slot>
+            <Text
+              size="sm"
+              color="tertiary"
+              className="tabular-nums"
+              accessibilityLabel={`${nicknameCount} characters`}
+            >
+              {nicknameCount}
+            </Text>
+          </Input.Slot>
+        </Input>
+      </Box>
+      <Box className="gap-2">
+        <Text size="sm" color="secondary">
+          Count and limit
+        </Text>
+        <Input>
+          <Input.Field accessibilityLabel="Transfer memo" value={memo} onChangeText={setMemo} />
+          <Input.Slot>
+            <Text
+              size="sm"
+              color="tertiary"
+              className="tabular-nums"
+              accessibilityLabel={`${memoLength} of ${memoLimit} characters`}
+            >
+              {memoCount}
+            </Text>
+          </Input.Slot>
+        </Input>
+      </Box>
+    </Box>
+  );
+}
+```
+
 ## States
 
 The root controls disabled, read-only, required, and invalid state for the field.

package/docs/components/list-item/content.md

@@ -22,7 +22,7 @@ export default function ListItemBasicDemo() {
       <Card.Content>
         <ListItem onPress={() => {}} showSeparator={false}>
           <ListItem.LeadingSlot>
-            <Avatar size="md">
+            <Avatar>
               <Avatar.Icon as={Person} />
             </Avatar>
           </ListItem.LeadingSlot>
@@ -102,7 +102,7 @@ export default function ListItemSizesDemo() {
             <Card.Content>
               <ListItem size={size} onPress={() => {}} showSeparator={false}>
                 <ListItem.LeadingSlot>
-                  <Avatar size="md">
+                  <Avatar>
                     <Avatar.Icon as={Person} />
                   </Avatar>
                 </ListItem.LeadingSlot>
@@ -268,7 +268,7 @@ export default function ListItemSectionedSubtleDemo() {
 
         <ListItem onPress={() => {}}>
           <ListItem.LeadingSlot>
-            <Avatar size="md">
+            <Avatar>
               <Avatar.Text>Adam White</Avatar.Text>
             </Avatar>
           </ListItem.LeadingSlot>
@@ -280,7 +280,7 @@ export default function ListItemSectionedSubtleDemo() {
 
         <ListItem onPress={() => {}} showSeparator={false}>
           <ListItem.LeadingSlot>
-            <Avatar size="md">
+            <Avatar>
               <Avatar.Text>Aron Smith</Avatar.Text>
             </Avatar>
           </ListItem.LeadingSlot>
@@ -296,7 +296,7 @@ export default function ListItemSectionedSubtleDemo() {
 
         <ListItem onPress={() => {}}>
           <ListItem.LeadingSlot>
-            <Avatar size="md">
+            <Avatar>
               <Avatar.Text>Bennett Charles</Avatar.Text>
             </Avatar>
           </ListItem.LeadingSlot>
@@ -308,7 +308,7 @@ export default function ListItemSectionedSubtleDemo() {
 
         <ListItem onPress={() => {}} showSeparator={false}>
           <ListItem.LeadingSlot>
-            <Avatar size="md">
+            <Avatar>
               <Avatar.Text>Brightside Dental</Avatar.Text>
             </Avatar>
           </ListItem.LeadingSlot>
@@ -392,7 +392,7 @@ export default function ListItemVirtualizedDemo() {
             renderItem={({ item, index }) => (
               <ListItem onPress={() => undefined} showSeparator={index < transactions.length - 1}>
                 <ListItem.LeadingSlot>
-                  <Avatar size="md">
+                  <Avatar>
                     <Avatar.Text>{item.title.slice(0, 2).toUpperCase()}</Avatar.Text>
                   </Avatar>
                 </ListItem.LeadingSlot>
@@ -428,7 +428,7 @@ export default function ListItemMultipleTrailingDemo() {
       <Card.Content>
         <ListItem onPress={() => {}} showSeparator={false}>
           <ListItem.LeadingSlot>
-            <Avatar size="md">
+            <Avatar>
               <Avatar.Icon as={Person} />
             </Avatar>
           </ListItem.LeadingSlot>
@@ -461,7 +461,7 @@ export default function ListItemDisabledDemo() {
       <Card.Content>
         <ListItem onPress={() => {}} isDisabled showSeparator={false}>
           <ListItem.LeadingSlot>
-            <Avatar size="md">
+            <Avatar>
               <Avatar.Icon as={Person} />
             </Avatar>
           </ListItem.LeadingSlot>