@ankhorage/zora 15.0.0 → 17.0.0

package/src/index.ts

@@ -1,15 +1,3 @@
-export type { ModalProps } from './components/modal';
-export { Modal } from './components/modal';
-export type { PaginationProps } from './components/pagination';
-export { Pagination } from './components/pagination';
-export type { RatingProps } from './components/rating';
-export { Rating } from './components/rating';
-export type { SearchBarProps } from './components/search-bar';
-export { SearchBar } from './components/search-bar';
-export type { TabItem, TabsProps, TabsVariant } from './components/tabs';
-export { Tabs } from './components/tabs';
-export type { ToolbarActionProps, ToolbarPosition, ToolbarProps } from './components/toolbar';
-export { Toolbar, ToolbarAction } from './components/toolbar';
 export { ZORA_CORE_PLUGIN } from './corePlugin';
 export { ZORA_CORE_PLUGIN_METADATA } from './corePluginMetadata';
 export {
@@ -100,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,
@@ -116,6 +114,7 @@ export {
   type DatePickerProps,
   type DatePickerValue,
 } from './features/date-picker/public';
+export { Dialog, type DialogProps } from './features/dialog/public';
 export {
   EmptyState,
   type EmptyStateAction,
@@ -161,6 +160,7 @@ export {
   type RadioGroupProps,
   type RadioProps,
 } from './features/form/radio/public';
+export { SearchInput, type SearchInputProps } from './features/form/search-input/public';
 export { Select, type SelectOption, type SelectProps } from './features/form/select/public';
 export {
   TextInput,
@@ -196,23 +196,23 @@ 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,
@@ -220,6 +220,9 @@ export type {
 } from './features/list/public';
 export { FlatList, SectionList } 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,
@@ -232,6 +235,7 @@ export {
   ProgressRing,
   type ProgressRingProps,
 } from './features/progress/public';
+export { Rating, type RatingProps } from './features/rating/public';
 export {
   Skeleton,
   SkeletonCard,
@@ -247,6 +251,16 @@ export {
 } from './features/skeleton/public';
 export type { SurfaceProps, SurfaceVariant } from './features/surface/public';
 export { Surface } from './features/surface/public';
+export {
+  Tab,
+  TabList,
+  type TabListProps,
+  TabPanel,
+  type TabPanelProps,
+  type TabProps,
+  Tabs,
+  type TabsProps,
+} from './features/tabs/public';
 export {
   TimePicker,
   type TimePickerProps,
@@ -260,6 +274,7 @@ export type {
   ToastStatus,
 } from './features/toast/public';
 export { Toast, ToastProvider, useToast } from './features/toast/public';
+export { Toolbar, type ToolbarProps } from './features/toolbar/public';
 export type {
   HeadingAlign,
   HeadingColor,
@@ -288,8 +303,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,
@@ -302,18 +315,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,
@@ -413,14 +414,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

@@ -17,6 +17,12 @@ export const CONTAINER_ALLOWED_CHILDREN = [
   'ChipGroup',
   'DataTable',
   'DatePicker',
+  'Dialog',
+  'Pagination',
+  'Rating',
+  'SearchInput',
+  'Tabs',
+  'Toolbar',
   'Skeleton',
   'SkeletonCard',
   'SkeletonList',
@@ -27,11 +33,10 @@ export const CONTAINER_ALLOWED_CHILDREN = [
   'SectionList',
   'BottomSheet',
   'ProductCard',
-  'Box',
-  'Stack',
+  'View',
+  'ScrollView',
   'Grid',
   'Gradient',
-  'Container',
   'Divider',
   'Text',
   'Heading',
@@ -51,7 +56,6 @@ export const CONTAINER_ALLOWED_CHILDREN = [
   'Notice',
   'EmptyState',
   'SectionHeader',
-  'SettingsRow',
   'PostCard',
   'ChatListItem',
   'MessageBubble',
@@ -71,8 +75,8 @@ export const CONTENT_RAIL_ALLOWED_CHILDREN = [
   'Badge',
   'Button',
   'IconButton',
-  'Box',
-  'Stack',
+  'View',
+  'ScrollView',
   'Card',
   'Panel',
   'Image',

package/src/metadata/componentMeta.test.ts

@@ -106,6 +106,7 @@ describe('ZORA_COMPONENT_META invariants', () => {
       'Checkbox',
       'CheckboxGroup',
       'RadioGroup',
+      'SearchInput',
       'Select',
       'TextInput',
     ]);
@@ -152,6 +153,10 @@ describe('ZORA_COMPONENT_META invariants', () => {
       'ChipGroup',
       'DataTable',
       'DatePicker',
+      'Pagination',
+      'Rating',
+      'SearchInput',
+      'Tab',
       'Skeleton',
       'SkeletonCard',
       'SkeletonList',
@@ -160,7 +165,6 @@ describe('ZORA_COMPONENT_META invariants', () => {
       'MetricCard',
       'Uploader',
       'SectionHeader',
-      'SettingsRow',
       'EmptyState',
       'Hero',
       'Button',
@@ -191,6 +195,7 @@ describe('ZORA_COMPONENT_META invariants', () => {
     const expectedContainerNodes = new Set([
       'Accordion',
       'AccordionItem',
+      'Dialog',
       'Form',
       'Gradient',
       'Surface',
@@ -208,13 +213,15 @@ describe('ZORA_COMPONENT_META invariants', () => {
       'Notice',
       'PostCard',
       'MessageBubble',
-      'Box',
-
-      'Stack',
+      'View',
+      'ScrollView',
       'Grid',
-      'Container',
       'BarcodeScannerView',
       'ContentRail',
+      'Tabs',
+      'TabList',
+      'TabPanel',
+      'Toolbar',
     ]);
 
     for (const [key, meta] of Object.entries(ZORA_COMPONENT_META)) {
@@ -239,6 +246,14 @@ describe('ZORA_COMPONENT_META invariants', () => {
     }
   });
 
+  test('Tabs constrain authored content to the accessible tab hierarchy', () => {
+    expect(ZORA_COMPONENT_META.Tabs.allowedChildren).toEqual(['TabList', 'TabPanel']);
+    expect(ZORA_COMPONENT_META.TabList.allowedChildren).toEqual(['Tab']);
+    expect(ZORA_COMPONENT_META.Tab.allowedChildren).toEqual([]);
+    expect(ZORA_COMPONENT_META.TabPanel.allowedChildren.length).toBeGreaterThan(0);
+    expect(ZORA_COMPONENT_META.Tabs.events?.valueChange?.eventType).toBe('tabs.valueChange');
+  });
+
   test('Accordion constrains authored items to its canonical hierarchy', () => {
     expect(ZORA_COMPONENT_META.Accordion.directManifestNode).toBe(true);
     expect(ZORA_COMPONENT_META.Accordion.allowedChildren).toEqual(['AccordionItem']);
@@ -369,8 +384,8 @@ describe('ZORA_COMPONENT_META invariants', () => {
       'Badge',
       'Button',
       'IconButton',
-      'Box',
-      'Stack',
+      'View',
+      'ScrollView',
       'Card',
       'Panel',
       'Image',

package/src/metadata/componentMeta.ts

@@ -1,9 +1,3 @@
-import { modalMeta } from '../components/modal/meta';
-import { paginationMeta } from '../components/pagination/meta';
-import { ratingMeta } from '../components/rating/meta';
-import { searchBarMeta } from '../components/search-bar/meta';
-import { tabsMeta } from '../components/tabs/meta';
-import { toolbarActionMeta, toolbarMeta } from '../components/toolbar/meta';
 import { accordionItemMeta } from '../features/accordion/accordionItemMeta';
 import { accordionMeta } from '../features/accordion/accordionMeta';
 import { activityIndicatorMeta } from '../features/activity-indicator/activityIndicatorMeta';
@@ -29,8 +23,10 @@ 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 { formActionsMeta } from '../features/form/formActionsMeta';
@@ -38,6 +34,7 @@ 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';
 import { selectMeta } from '../features/form/select/selectMeta';
 import { textInputMeta } from '../features/form/text-input/textInputMeta';
 import { gradientMeta } from '../features/gradient/gradientMeta';
@@ -45,17 +42,21 @@ 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 { 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';
 import {
   skeletonCardMeta,
   skeletonListMeta,
@@ -63,19 +64,17 @@ import {
   skeletonTextMeta,
 } from '../features/skeleton/skeletonMeta';
 import { surfaceMeta } from '../features/surface/surfaceMeta';
+import { tabListMeta } from '../features/tabs/tabListMeta';
+import { tabMeta } from '../features/tabs/tabMeta';
+import { tabPanelMeta } from '../features/tabs/tabPanelMeta';
+import { tabsMeta } from '../features/tabs/tabsMeta';
 import { timePickerMeta } from '../features/time-picker/timePickerMeta';
 import { toastMeta } from '../features/toast/toastMeta';
 import { toastProviderMeta } from '../features/toast/toastProviderMeta';
+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';
@@ -93,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';
@@ -104,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,
@@ -128,6 +123,7 @@ export const ZORA_COMPONENT_META: ZoraComponentMetaRegistry = finalizeFeatureMet
   ChipGroup: chipGroupMeta,
   DataTable: dataTableMeta,
   DatePicker: datePickerMeta,
+  Dialog: dialogMeta,
   Form: formMeta,
   FormActions: formActionsMeta,
   FormError: formErrorMeta,
@@ -141,7 +137,6 @@ export const ZORA_COMPONENT_META: ZoraComponentMetaRegistry = finalizeFeatureMet
   TextInput: textInputMeta,
   MediaCard: mediaCardMeta,
   MetricCard: metricCardMeta,
-  Modal: modalMeta,
   Pagination: paginationMeta,
   PopoverMenu: popoverMenuMeta,
   Progress: progressMeta,
@@ -149,19 +144,21 @@ export const ZORA_COMPONENT_META: ZoraComponentMetaRegistry = finalizeFeatureMet
   Radio: radioMeta,
   RadioGroup: radioGroupMeta,
   Rating: ratingMeta,
-  SearchBar: searchBarMeta,
+  SearchInput: searchInputMeta,
   Select: selectMeta,
   Skeleton: skeletonMeta,
   SkeletonCard: skeletonCardMeta,
   SkeletonList: skeletonListMeta,
   SkeletonText: skeletonTextMeta,
+  Tab: tabMeta,
+  TabList: tabListMeta,
+  TabPanel: tabPanelMeta,
   Tabs: tabsMeta,
   Text: textMeta,
   TimePicker: timePickerMeta,
   Toast: toastMeta,
   ToastProvider: toastProviderMeta,
   Toolbar: toolbarMeta,
-  ToolbarAction: toolbarActionMeta,
   Uploader: uploaderMeta,
   BottomSheet: bottomSheetMeta,
   FlatList: flatListMeta,
@@ -170,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,
@@ -203,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 (

package/src/patterns/collection-editor/CollectionEditor.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { Button } from '../../features/button/public';
 import { IconButton } from '../../features/button/public';
-import { Box, Stack } from '../../features/layout/public';
+import { View } from '../../features/layout/public';
 import { Text } from '../../features/typography/public';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { Panel } from '../panel';
@@ -47,18 +47,18 @@ function CollectionEditorInner<TItem>({
         ) : null
       }
     >
-      <Stack gap="s">
+      <View gap="s">
         {isEmpty ? (
-          <Box py="m">
+          <View py="m">
             <Text align="center" emphasis="muted">
               {emptyLabel}
             </Text>
-          </Box>
+          </View>
         ) : (
           items.map((item, index) => (
-            <Box key={index} bg="subtle" p="s" radius="m" borderColor="border" borderWidth={1}>
-              <Stack direction="row" gap="m" align="center">
-                <Box flex={1}>
+            <View key={index} bg="subtle" p="s" radius="m" borderColor="border" borderWidth={1}>
+              <View direction="row" gap="m" align="center">
+                <View flex={1}>
                   {renderItem({
                     item,
                     index,
@@ -68,8 +68,8 @@ function CollectionEditorInner<TItem>({
                     canMoveUp: index > 0,
                     canMoveDown: index < items.length - 1,
                   })}
-                </Box>
-                <Stack direction="row" gap="xs">
+                </View>
+                <View direction="row" gap="xs">
                   {onMove ? (
                     <>
                       <IconButton
@@ -104,12 +104,12 @@ function CollectionEditorInner<TItem>({
                       variant="ghost"
                     />
                   ) : null}
-                </Stack>
-              </Stack>
-            </Box>
+                </View>
+              </View>
+            </View>
           ))
         )}
-      </Stack>
+      </View>
     </Panel>
   );
 }