@ankhorage/zora 16.0.0 → 18.0.0

package/src/features/toolbar/adapters/inbound/Toolbar.tsx

@@ -1,7 +1,7 @@
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { ToolbarProps } from '../../../../types/toolbar';
 import { Card } from '../../../card/public';
-import { Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 
 /*** Renders a visible horizontal group of contextual actions and controls. */
 export const Toolbar = withZoraThemeScope(ToolbarInner);
@@ -23,9 +23,9 @@ function ToolbarInner({
       tone={floating ? 'default' : 'subtle'}
       testID={testID}
     >
-      <Stack align="center" direction="row" gap="s">
+      <View align="center" direction="row" gap="s">
         {children}
-      </Stack>
+      </View>
     </Card>
   );
 }

package/src/features/uploader/adapters/inbound/Uploader.tsx

@@ -4,10 +4,10 @@ import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { UploadAsset, UploaderProps, UploadType } from '../../../../types/upload';
 import { Button } from '../../../button/public';
 import { Dialog } from '../../../dialog/public';
-import { FormField } from '../../../form/public';
+import { Field } from '../../../form/public';
 import { Icon } from '../../../icon/public';
 import { Image } from '../../../image/public';
-import { Box, Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { Progress } from '../../../progress/public';
 import { Text } from '../../../typography/public';
 import { validateUploadAsset } from '../../application/use-cases/validateUploadAsset';
@@ -206,7 +206,7 @@ function UploaderInner({
 
   return (
     <>
-      <FormField
+      <Field
         description={description}
         disabled={disabled}
         errorText={effectiveError}
@@ -218,11 +218,11 @@ function UploaderInner({
         required={required}
         testID={testID}
       >
-        <Stack gap="m">
+        <View gap="m">
           <UploadPresentation asset={value} aspectRatio={aspectRatio} type={type} />
 
           {resolvedAccept || maxSizeBytes ? (
-            <Stack gap="xs">
+            <View gap="xs">
               {resolvedAccept ? (
                 <Text emphasis="muted" variant="caption">
                   Accepted: {resolvedAccept}
@@ -233,21 +233,21 @@ function UploaderInner({
                   Max size: {formatBytes(maxSizeBytes)}
                 </Text>
               ) : null}
-            </Stack>
+            </View>
           ) : null}
 
           {uploading ? (
-            <Stack gap="xs">
+            <View gap="xs">
               <Text emphasis="muted" variant="caption">
                 Uploading…
               </Text>
               {uploadProgress !== undefined || progress !== null ? (
                 <Progress max={1} value={clampProgress(uploadProgress ?? progress) ?? 0} />
               ) : null}
-            </Stack>
+            </View>
           ) : null}
 
-          <Stack direction={{ base: 'column', md: 'row' }} gap="s">
+          <View direction={{ base: 'column', md: 'row' }} gap="s">
             <Button
               disabled={actionsDisabled || uploading || removing}
               interactionPolicy={interactionPolicy}
@@ -283,9 +283,9 @@ function UploaderInner({
                 Preview
               </Button>
             ) : null}
-          </Stack>
-        </Stack>
-      </FormField>
+          </View>
+        </View>
+      </Field>
 
       {canPreviewImage ? (
         <Dialog
@@ -295,9 +295,9 @@ function UploaderInner({
           title="Image preview"
           visible={previewOpen}
         >
-          <Stack gap="m">
+          <View gap="m">
             <Image aspectRatio={aspectRatio} fit="contain" source={value} />
-            <Stack direction="row" justify="flex-end">
+            <View direction="row" justify="flex-end">
               <Button
                 color="neutral"
                 interactionPolicy={interactionPolicy}
@@ -306,8 +306,8 @@ function UploaderInner({
               >
                 Close
               </Button>
-            </Stack>
-          </Stack>
+            </View>
+          </View>
         </Dialog>
       ) : null}
     </>
@@ -329,10 +329,10 @@ function UploadPresentation({
   }
 
   return (
-    <Box borderWidth={1} p="m" radius="m">
-      <Stack direction="row" gap="s">
+    <View borderWidth={1} p="m" radius="m">
+      <View direction="row" gap="s">
         <Icon name={resolveUploadIcon(type)} size={22} />
-        <Stack gap="xs">
+        <View gap="xs">
           <Text variant="label" weight="semiBold">
             {asset?.fileName ?? 'No file selected'}
           </Text>
@@ -341,9 +341,9 @@ function UploadPresentation({
               {asset.contentType}
             </Text>
           ) : null}
-        </Stack>
-      </Stack>
-    </Box>
+        </View>
+      </View>
+    </View>
   );
 }
 

package/src/index.ts

@@ -88,6 +88,16 @@ export type { ChipProps } from './features/chip/public';
 export type { ChipGroupItem, ChipGroupProps } from './features/chip/public';
 export { Chip } from './features/chip/public';
 export { ChipGroup } from './features/chip/public';
+export type {
+  ContentRailControlPressEvent,
+  ContentRailDirection,
+  ContentRailItemSize,
+  ContentRailMotion,
+  ContentRailProps,
+  ContentRailSpacing,
+  ContentRailVisibleRangeChangeEvent,
+} from './features/content-rail/public';
+export { ContentRail } from './features/content-rail/public';
 export type {
   DataTableCellContext,
   DataTableColumn,
@@ -118,12 +128,12 @@ export {
   type CheckboxProps,
 } from './features/form/checkbox/public';
 export type {
+  FieldProps,
   FormActionsProps,
   FormErrorProps,
   FormErrors,
   FormFieldConfig,
   FormFieldInputType,
-  FormFieldProps,
   FormProps,
   FormValidationErrors,
   FormValidationResult,
@@ -133,10 +143,10 @@ export type {
   ValidationRule,
 } from './features/form/public';
 export {
+  Field,
   Form,
   FormActions,
   FormError,
-  FormField,
   hasRequiredRule,
   useFormController,
   validateField,
@@ -186,31 +196,42 @@ export {
   type KeyboardAvoidingViewProps,
 } from './features/keyboard-avoiding-view/public';
 export type {
-  BoxProps,
-  ContainerProps,
+  AppShellProps,
   DividerProps,
   GridProps,
-  StackProps,
+  ScreenProps,
+  ScreenSectionProps,
+  ScrollViewProps,
+  ViewProps,
 } from './features/layout/public';
-export type {
-  ContentRailControlPressEvent,
-  ContentRailDirection,
-  ContentRailItemSize,
-  ContentRailMotion,
-  ContentRailProps,
-  ContentRailSpacing,
-  ContentRailVisibleRangeChangeEvent,
+export {
+  AppShell,
+  Divider,
+  Grid,
+  Screen,
+  ScreenSection,
+  ScrollView,
+  View,
 } from './features/layout/public';
-export { Box, Container, Divider, Grid, Stack } from './features/layout/public';
-export { ContentRail } from './features/layout/public';
 export type {
   ManifestListProps,
   ManifestListSection,
   ManifestSectionListProps,
 } from './features/list/public';
+export type {
+  ListChildrenProps,
+  ListItemProps,
+  ListItemsProps,
+  ListItemVariant,
+  ListProps,
+  ListSectionProps,
+} from './features/list/public';
 export { FlatList, SectionList } from './features/list/public';
+export { List, ListItem, ListSection } from './features/list/public';
 export { MissingElement, type MissingElementProps } from './features/missing-element/public';
 export { Pagination, type PaginationProps } from './features/pagination/public';
+export type { PaletteItemProps } from './features/palette-item/public';
+export { PaletteItem } from './features/palette-item/public';
 export {
   PopoverMenu,
   type PopoverMenuAction,
@@ -291,8 +312,6 @@ export type {
   ValidateUploadAssetInput,
 } from './features/uploader/public';
 export { Uploader, validateUploadAsset } from './features/uploader/public';
-export type { CenterProps, InlineProps, ShowProps, SpacerProps } from './foundation';
-export { Center, Inline, Show, Spacer } from './foundation';
 export type {
   ZoraColor,
   ZoraEmphasis,
@@ -305,18 +324,6 @@ export {
   ZORA_PALETTE_COLORS,
   ZORA_STATUS_COLORS,
 } from './internal/colorModel';
-export type { AppShellProps } from './layout/app-shell';
-export { AppShell } from './layout/app-shell';
-export type { ScreenProps } from './layout/screen';
-export { Screen } from './layout/screen';
-export type { ScreenSectionProps } from './layout/screen-section';
-export { ScreenSection } from './layout/screen-section';
-export type { SettingsLayoutProps } from './layout/settings-layout';
-export { SettingsLayout } from './layout/settings-layout';
-export type { SidebarLayoutProps } from './layout/sidebar-layout';
-export { SidebarLayout } from './layout/sidebar-layout';
-export type { TopbarLayoutProps } from './layout/topbar-layout';
-export { TopbarLayout } from './layout/topbar-layout';
 export type {
   ZoraBindableComponentType,
   ZoraComponentBlueprint,
@@ -363,14 +370,6 @@ export type { FilterBarProps } from './patterns/filter-bar';
 export { FilterBar } from './patterns/filter-bar';
 export type { InspectorFieldProps } from './patterns/inspector-field';
 export { InspectorField } from './patterns/inspector-field';
-export type {
-  ListChildrenProps,
-  ListItemsProps,
-  ListProps,
-  ListRowProps,
-  ListRowVariant,
-} from './patterns/list';
-export { List, ListRow, ListSection } from './patterns/list';
 export type {
   MessageBubbleAuthor,
   MessageBubbleAvatar,
@@ -416,14 +415,10 @@ export type {
   UseSelectionResult,
 } from './patterns/selection';
 export { SelectableItem, SelectionProvider, useSelection } from './patterns/selection';
-export type { SettingsRowProps } from './patterns/settings-row';
-export { SettingsRow } from './patterns/settings-row';
 export type { SwitchFieldProps } from './patterns/switch-field';
 export { SwitchField } from './patterns/switch-field';
 export type { ThemeComposerProps } from './patterns/theme-composer';
 export { ThemeComposer } from './patterns/theme-composer';
-export type { PaletteItemProps, TileGridProps } from './patterns/tile-grid';
-export { PaletteItem, TileGrid } from './patterns/tile-grid';
 export type { TimelineItem, TimelineProps } from './patterns/timeline';
 export { Timeline } from './patterns/timeline';
 export type { TreeItemNode, TreeItemRenderProps, TreeViewProps } from './patterns/tree-view';

package/src/interactionPolicy.test.ts

@@ -195,7 +195,7 @@ describe('ContentRail', () => {
   });
 
   test('suppresses scrolling and forwards interactionPolicy to owned controls', () => {
-    const source = readSource('features/layout/adapters/inbound/ContentRail.tsx');
+    const source = readSource('features/content-rail/adapters/inbound/ContentRail.tsx');
 
     expect(source).not.toMatch(/interactionPolicy:\s*_interactionPolicy/);
     expect(source).toContain('scrollEnabled={!passive}');

package/src/metadata/allowedChildren.ts

@@ -33,11 +33,10 @@ export const CONTAINER_ALLOWED_CHILDREN = [
   'SectionList',
   'BottomSheet',
   'ProductCard',
-  'Box',
-  'Stack',
+  'View',
+  'ScrollView',
   'Grid',
   'Gradient',
-  'Container',
   'Divider',
   'Text',
   'Heading',
@@ -57,7 +56,6 @@ export const CONTAINER_ALLOWED_CHILDREN = [
   'Notice',
   'EmptyState',
   'SectionHeader',
-  'SettingsRow',
   'PostCard',
   'ChatListItem',
   'MessageBubble',
@@ -77,8 +75,8 @@ export const CONTENT_RAIL_ALLOWED_CHILDREN = [
   'Badge',
   'Button',
   'IconButton',
-  'Box',
-  'Stack',
+  'View',
+  'ScrollView',
   'Card',
   'Panel',
   'Image',

package/src/metadata/bindableComponentMeta.ts

@@ -356,7 +356,7 @@ export const ZORA_BINDABLE_COMPONENT_META = {
     category: 'pattern',
     description: 'Renders a collection of list items.',
     directManifestNode: true,
-    allowedChildren: ['ListSection', 'ListRow'],
+    allowedChildren: ['ListSection', 'ListItem'],
     bindings: {
       props: {
         items: {

package/src/metadata/componentMeta.test.ts

@@ -63,7 +63,7 @@ describe('ZORA_COMPONENT_META event metadata', () => {
   });
 
   test('declares collection item metadata for list rows', () => {
-    const event = ZORA_COMPONENT_META.ListRow.events?.itemPress;
+    const event = ZORA_COMPONENT_META.ListItem.events?.itemPress;
     const eventType: ZoraComponentEventPayloadKind = event?.eventType ?? 'collection.itemPress';
 
     expect(eventType).toBe('collection.itemPress');
@@ -101,8 +101,8 @@ describe('ZORA_COMPONENT_META requirement metadata', () => {
 
 describe('ZORA_COMPONENT_META invariants', () => {
   test('keeps form nodes in their canonical hierarchy', () => {
-    expect(ZORA_COMPONENT_META.Form.allowedChildren).toEqual(['FormError', 'FormField']);
-    expect(ZORA_COMPONENT_META.FormField.allowedChildren).toEqual([
+    expect(ZORA_COMPONENT_META.Form.allowedChildren).toEqual(['FormError', 'Field']);
+    expect(ZORA_COMPONENT_META.Field.allowedChildren).toEqual([
       'Checkbox',
       'CheckboxGroup',
       'RadioGroup',
@@ -113,7 +113,7 @@ describe('ZORA_COMPONENT_META invariants', () => {
     for (const [name, meta] of Object.entries(ZORA_COMPONENT_META)) {
       if (name === 'Form') continue;
       expect(meta.allowedChildren).not.toContain('FormError');
-      expect(meta.allowedChildren).not.toContain('FormField');
+      expect(meta.allowedChildren).not.toContain('Field');
     }
   });
 
@@ -165,7 +165,6 @@ describe('ZORA_COMPONENT_META invariants', () => {
       'MetricCard',
       'Uploader',
       'SectionHeader',
-      'SettingsRow',
       'EmptyState',
       'Hero',
       'Button',
@@ -205,7 +204,7 @@ describe('ZORA_COMPONENT_META invariants', () => {
       'SectionList',
       'BottomSheet',
       'KeyboardAvoidingView',
-      'FormField',
+      'Field',
       'ButtonGroup',
       'Screen',
       'ScreenSection',
@@ -214,10 +213,9 @@ describe('ZORA_COMPONENT_META invariants', () => {
       'Notice',
       'PostCard',
       'MessageBubble',
-      'Box',
-      'Stack',
+      'View',
+      'ScrollView',
       'Grid',
-      'Container',
       'BarcodeScannerView',
       'ContentRail',
       'Tabs',
@@ -386,8 +384,8 @@ describe('ZORA_COMPONENT_META invariants', () => {
       'Badge',
       'Button',
       'IconButton',
-      'Box',
-      'Stack',
+      'View',
+      'ScrollView',
       'Card',
       'Panel',
       'Image',

package/src/metadata/componentMeta.ts

@@ -23,14 +23,15 @@ import { postCardMeta } from '../features/card/postCardMeta';
 import { productCardMeta } from '../features/card/productCardMeta';
 import { chipGroupMeta } from '../features/chip/chipGroupMeta';
 import { chipMeta } from '../features/chip/chipMeta';
+import { contentRailMeta } from '../features/content-rail/contentRailMeta';
 import { dataTableMeta } from '../features/data-table/dataTableMeta';
 import { datePickerMeta } from '../features/date-picker/datePickerMeta';
 import { dialogMeta } from '../features/dialog/dialogMeta';
 import { emptyStateMeta } from '../features/empty-state/emptyStateMeta';
 import { checkboxGroupMeta, checkboxMeta } from '../features/form/checkbox/checkboxMeta';
+import { fieldMeta } from '../features/form/field/meta';
 import { formActionsMeta } from '../features/form/formActionsMeta';
 import { formErrorMeta } from '../features/form/formErrorMeta';
-import { formFieldMeta } from '../features/form/formFieldMeta';
 import { formMeta } from '../features/form/formMeta';
 import { radioGroupMeta, radioMeta } from '../features/form/radio/radioMeta';
 import { searchInputMeta } from '../features/form/search-input/searchInputMeta';
@@ -41,16 +42,19 @@ import { heroMeta } from '../features/hero/heroMeta';
 import { iconMeta } from '../features/icon/iconMeta';
 import { imageMeta } from '../features/image/imageMeta';
 import { keyboardAvoidingViewMeta } from '../features/keyboard-avoiding-view/keyboardAvoidingViewMeta';
-import { boxMeta } from '../features/layout/boxMeta';
-import { containerMeta } from '../features/layout/containerMeta';
-import { contentRailMeta } from '../features/layout/contentRailMeta';
+import { appShellMeta } from '../features/layout/appShellMeta';
 import { dividerMeta } from '../features/layout/dividerMeta';
 import { gridMeta } from '../features/layout/gridMeta';
-import { stackMeta } from '../features/layout/stackMeta';
+import { screenMeta } from '../features/layout/screenMeta';
+import { screenSectionMeta } from '../features/layout/screenSectionMeta';
+import { scrollViewMeta } from '../features/layout/scrollViewMeta';
+import { viewMeta } from '../features/layout/viewMeta';
 import { flatListMeta } from '../features/list/flatListMeta';
+import { listItemMeta, listMeta, listSectionMeta } from '../features/list/meta';
 import { sectionListMeta } from '../features/list/sectionListMeta';
 import { missingElementMeta } from '../features/missing-element/missingElementMeta';
 import { paginationMeta } from '../features/pagination/paginationMeta';
+import { paletteItemMeta } from '../features/palette-item/paletteItemMeta';
 import { popoverMenuMeta } from '../features/popover-menu/popoverMenuMeta';
 import { progressMeta, progressRingMeta } from '../features/progress/progressMeta';
 import { ratingMeta } from '../features/rating/ratingMeta';
@@ -72,19 +76,11 @@ import { toolbarMeta } from '../features/toolbar/toolbarMeta';
 import { headingMeta } from '../features/typography/headingMeta';
 import { textMeta } from '../features/typography/textMeta';
 import { uploaderMeta } from '../features/uploader/uploaderMeta';
-import { foundationMetas } from '../foundation/meta';
-import { appShellMeta } from '../layout/app-shell/meta';
-import { screenMeta } from '../layout/screen/meta';
-import { screenSectionMeta } from '../layout/screen-section/meta';
-import { settingsLayoutMeta } from '../layout/settings-layout/meta';
-import { sidebarLayoutMeta } from '../layout/sidebar-layout/meta';
-import { topbarLayoutMeta } from '../layout/topbar-layout/meta';
 import { chatListItemMeta } from '../patterns/chat-list-item/meta';
 import { collectionEditorMeta } from '../patterns/collection-editor/meta';
 import { confirmDialogMeta } from '../patterns/confirm-dialog/meta';
 import { filterBarMeta } from '../patterns/filter-bar/meta';
 import { inspectorFieldMeta } from '../patterns/inspector-field/meta';
-import { listMeta, listRowMeta, listSectionMeta } from '../patterns/list/meta';
 import { messageBubbleMeta } from '../patterns/message-bubble/meta';
 import { noticeMeta } from '../patterns/notice/meta';
 import { panelMeta } from '../patterns/panel/meta';
@@ -96,10 +92,8 @@ import {
 } from '../patterns/scanner/meta';
 import { sectionHeaderMeta } from '../patterns/section-header/meta';
 import { selectableItemMeta, selectionProviderMeta } from '../patterns/selection/meta';
-import { settingsRowMeta } from '../patterns/settings-row/meta';
 import { switchFieldMeta } from '../patterns/switch-field/meta';
 import { themeComposerMeta } from '../patterns/theme-composer/meta';
-import { paletteItemMeta, tileGridMeta } from '../patterns/tile-grid/meta';
 import { timelineMeta } from '../patterns/timeline/meta';
 import { treeItemMeta, treeViewMeta } from '../patterns/tree-view/meta';
 import { themeModeToggleMeta } from '../theme/ThemeModeToggle.meta';
@@ -107,13 +101,11 @@ import { finalizeFeatureMetadata } from '../utils/finalizeFeatureMetadata';
 import type { ZoraComponentMetaRegistry } from './types';
 
 export const ZORA_COMPONENT_META: ZoraComponentMetaRegistry = finalizeFeatureMetadata({
-  ...foundationMetas,
   Accordion: accordionMeta,
   AccordionItem: accordionItemMeta,
   ActivityIndicator: activityIndicatorMeta,
-  Box: boxMeta,
-  Container: containerMeta,
-  Stack: stackMeta,
+  View: viewMeta,
+  ScrollView: scrollViewMeta,
   Grid: gridMeta,
   Divider: dividerMeta,
   Surface: surfaceMeta,
@@ -135,7 +127,7 @@ export const ZORA_COMPONENT_META: ZoraComponentMetaRegistry = finalizeFeatureMet
   Form: formMeta,
   FormActions: formActionsMeta,
   FormError: formErrorMeta,
-  FormField: formFieldMeta,
+  Field: fieldMeta,
   Gradient: gradientMeta,
   Heading: headingMeta,
   Icon: iconMeta,
@@ -175,9 +167,6 @@ export const ZORA_COMPONENT_META: ZoraComponentMetaRegistry = finalizeFeatureMet
   AppShell: appShellMeta,
   Screen: screenMeta,
   ScreenSection: screenSectionMeta,
-  SettingsLayout: settingsLayoutMeta,
-  SidebarLayout: sidebarLayoutMeta,
-  TopbarLayout: topbarLayoutMeta,
   ForgotPasswordForm: forgotPasswordFormMeta,
   OAuthProviderButton: oauthProviderButtonMeta,
   OAuthProviderList: oauthProviderListMeta,
@@ -193,7 +182,7 @@ export const ZORA_COMPONENT_META: ZoraComponentMetaRegistry = finalizeFeatureMet
   Hero: heroMeta,
   InspectorField: inspectorFieldMeta,
   List: listMeta,
-  ListRow: listRowMeta,
+  ListItem: listItemMeta,
   ListSection: listSectionMeta,
   MessageBubble: messageBubbleMeta,
   MissingElement: missingElementMeta,
@@ -208,11 +197,9 @@ export const ZORA_COMPONENT_META: ZoraComponentMetaRegistry = finalizeFeatureMet
   SectionHeader: sectionHeaderMeta,
   SelectableItem: selectableItemMeta,
   SelectionProvider: selectionProviderMeta,
-  SettingsRow: settingsRowMeta,
   SwitchField: switchFieldMeta,
   ThemeComposer: themeComposerMeta,
   PaletteItem: paletteItemMeta,
-  TileGrid: tileGridMeta,
   Timeline: timelineMeta,
   TreeItem: treeItemMeta,
   TreeView: treeViewMeta,

package/src/metadata/radioGroupReachability.test.ts

@@ -5,8 +5,8 @@ import { ZORA_COMPONENT_META } from '.';
 const containers = [
   ['Screen', ZORA_COMPONENT_META.Screen],
   ['ScreenSection', ZORA_COMPONENT_META.ScreenSection],
-  ['Box', ZORA_COMPONENT_META.Box],
-  ['Stack', ZORA_COMPONENT_META.Stack],
+  ['View', ZORA_COMPONENT_META.View],
+  ['ScrollView', ZORA_COMPONENT_META.ScrollView],
   ['Card', ZORA_COMPONENT_META.Card],
   ['Panel', ZORA_COMPONENT_META.Panel],
 ] as const;

package/src/patterns/chat-list-item/ChatListItem.tsx

@@ -3,9 +3,8 @@ import React from 'react';
 
 import { Avatar } from '../../features/avatar/public';
 import { Badge } from '../../features/badge/public';
-import { Box, Stack } from '../../features/layout/public';
+import { View } from '../../features/layout/public';
 import { Text } from '../../features/typography/public';
-import { Inline } from '../../foundation';
 import { useZoraTheme } from '../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { ChatListAvatar, ChatListItemProps } from './types';
@@ -110,7 +109,7 @@ function ChatListItemInner({
     });
 
     return (
-      <Box
+      <View
         bg={styles.bg}
         borderColor={styles.borderColor}
         borderWidth={styles.borderWidth}
@@ -119,7 +118,7 @@ function ChatListItemInner({
         radius="m"
         style={{ opacity: styles.opacity }}
       >
-        <Inline align="center" gap="m" wrap="nowrap">
+        <View direction="row" align="center" gap="m" wrap="nowrap">
           {leading ?? (
             <Avatar
               initials={avatar?.initials}
@@ -132,10 +131,10 @@ function ChatListItemInner({
             />
           )}
 
-          <Box flex={1}>
-            <Stack gap="xxs">
-              <Inline align="center" gap="s" justify="space-between" wrap="nowrap">
-                <Box flex={1}>
+          <View flex={1}>
+            <View gap="xxs">
+              <View direction="row" align="center" gap="s" justify="space-between" wrap="nowrap">
+                <View flex={1}>
                   <Text
                     numberOfLines={1}
                     emphasis={disabled ? 'muted' : 'default'}
@@ -144,7 +143,7 @@ function ChatListItemInner({
                   >
                     {title}
                   </Text>
-                </Box>
+                </View>
                 {hasTimestamp ? (
                   <Text
                     numberOfLines={1}
@@ -156,12 +155,12 @@ function ChatListItemInner({
                     {timestamp}
                   </Text>
                 ) : null}
-              </Inline>
+              </View>
 
               {hasSecondaryRow ? (
-                <Inline align="center" gap="s" justify="space-between" wrap="nowrap">
-                  <Box flex={1}>
-                    <Stack gap="xxs">
+                <View direction="row" align="center" gap="s" justify="space-between" wrap="nowrap">
+                  <View flex={1}>
+                    <View gap="xxs">
                       {hasPreview ? (
                         <Text
                           numberOfLines={1}
@@ -177,26 +176,26 @@ function ChatListItemInner({
                           {meta}
                         </Text>
                       ) : null}
-                    </Stack>
-                  </Box>
+                    </View>
+                  </View>
 
                   {hasUnreadCount || hasTrailing ? (
-                    <Inline align="center" gap="s" wrap="nowrap">
+                    <View direction="row" align="center" gap="s" wrap="nowrap">
                       {renderUnreadCount(unreadCount)}
                       {trailing}
-                    </Inline>
+                    </View>
                   ) : null}
-                </Inline>
+                </View>
               ) : null}
-            </Stack>
-          </Box>
-        </Inline>
-      </Box>
+            </View>
+          </View>
+        </View>
+      </View>
     );
   };
 
   if (!isInteractive) {
-    return <Box testID={testID}>{content({ pressed: false, hovered: false })}</Box>;
+    return <View testID={testID}>{content({ pressed: false, hovered: false })}</View>;
   }
 
   return (