@ankhorage/zora 15.0.0 → 17.0.0

package/src/audit.test.ts

@@ -118,64 +118,21 @@ describe('Plan 5 audit — no showcase bridge or direct Surface imports in examp
   });
 });
 
-describe('Plan 5 audit — product-facing src imports ZORA foundation, not Surface directly', () => {
+describe('Plan 5 audit — product-facing src imports ZORA layout primitives, not Surface directly', () => {
   /**
-   * Components, layouts, and patterns that compose ZORA primitives should import
-   * foundation primitives from the local ZORA foundation layer, not directly
-   * from @ankhorage/surface.
-   *
-   * Foundation wrappers, theme infrastructure, internal recipes, and explicit
-   * Surface-wrapping boundary components are exempt.
+   * Features and patterns that compose ZORA layout primitives should import them from ZORA,
+   * not directly from @ankhorage/surface. The feature-owned layout adapters are the deliberate
+   * Surface foundation boundary.
    */
-  const EXEMPT_PATHS = new Set([
-    // Foundation wrappers — they ARE the Surface abstraction layer.
-    join(SRC_ROOT, 'foundation'),
-    // Theme infrastructure legitimately integrates with Surface theme/runtime types.
-    join(SRC_ROOT, 'theme'),
-    // Internal recipes may consume SurfaceTheme types as the typed recipe boundary.
-    join(SRC_ROOT, 'internal'),
-    // Explicit Surface primitive wrappers.
-    join(SRC_ROOT, 'components', 'checkbox', 'Checkbox.tsx'),
-    join(SRC_ROOT, 'features', 'icon', 'adapters', 'inbound', 'Icon.tsx'),
-    join(SRC_ROOT, 'features', 'button', 'adapters', 'inbound', 'IconButton.tsx'),
-    join(SRC_ROOT, 'components', 'modal', 'Modal.tsx'),
-    join(SRC_ROOT, 'features', 'form', 'text-input', 'adapters', 'inbound', 'TextInput.tsx'),
-    join(SRC_ROOT, 'features', 'typography', 'adapters', 'inbound', 'Text.tsx'),
-    join(SRC_ROOT, 'features', 'form', 'adapters', 'inbound', 'FormField.tsx'),
-    // Type-only imports that intentionally expose Surface-compatible prop specs.
-    join(SRC_ROOT, 'components', 'checkbox', 'types.ts'),
-    join(SRC_ROOT, 'types', 'form.ts'),
-    join(SRC_ROOT, 'types', 'icon-button.ts'),
-    join(SRC_ROOT, 'components', 'tabs', 'types.ts'),
-    join(SRC_ROOT, 'types', 'text.ts'),
-    join(SRC_ROOT, 'components', 'textarea', 'types.ts'),
-    join(SRC_ROOT, 'components', 'toolbar', 'types.ts'),
-    join(SRC_ROOT, 'patterns', 'tile-grid', 'types.ts'),
-  ]);
-
-  function isExempt(filePath: string): boolean {
-    for (const exemptPath of EXEMPT_PATHS) {
-      if (isPathWithin(filePath, exemptPath)) {
-        return true;
-      }
-    }
-
-    return false;
-  }
-
-  const PRODUCT_FACING_DIRS = [
-    join(SRC_ROOT, 'components'),
-    join(SRC_ROOT, 'layout'),
-    join(SRC_ROOT, 'patterns'),
-  ];
-
+  const SURFACE_FOUNDATION_BOUNDARY = join(SRC_ROOT, 'features', 'layout');
+  const PRODUCT_FACING_DIRS = [join(SRC_ROOT, 'features'), join(SRC_ROOT, 'patterns')];
   const FOUNDATION_PRIMITIVES_PATTERN =
-    /import \{[^}]*\b(Box|Stack|Center|Container|Grid|Inline|Spacer|Divider)\b[^}]*\} from '@ankhorage\/surface'/;
+    /import \{[^}]*\b(View|ScrollView|Grid|Divider)\b[^}]*\} from '@ankhorage\/surface'/;
 
-  test('component, layout, and pattern files do not import foundation primitives directly from @ankhorage/surface', () => {
+  test('feature, layout, and pattern files do not import foundation primitives directly from @ankhorage/surface', () => {
     for (const dir of PRODUCT_FACING_DIRS) {
       for (const filePath of listFiles(dir)) {
-        if (isExempt(filePath)) continue;
+        if (isPathWithin(filePath, SURFACE_FOUNDATION_BOUNDARY)) continue;
 
         const source = readFileSync(filePath, 'utf8');
         const match = FOUNDATION_PRIMITIVES_PATTERN.exec(source);
@@ -183,7 +140,7 @@ describe('Plan 5 audit — product-facing src imports ZORA foundation, not Surfa
         expect(
           match,
           `${filePath} imports Surface foundation primitive '${match?.[1]}' directly. ` +
-            `Use the ZORA foundation import ('../../foundation') instead.`,
+            'Use the feature-owned ZORA layout API instead.',
         ).toBeNull();
       }
     }

package/src/constants.ts

@@ -20,15 +20,21 @@ export const FEATURE_MANIFEST_ELEMENTS = {
   chip: ['Chip', 'ChipGroup'],
   'data-table': ['DataTable'],
   'date-picker': ['DatePicker'],
+  dialog: ['Dialog'],
   form: ['Form', 'FormError', 'FormField'],
   gradient: ['Gradient'],
   button: ['Button', 'IconButton', 'ButtonGroup'],
   icon: ['Icon'],
   image: ['Image'],
   'keyboard-avoiding-view': ['KeyboardAvoidingView'],
-  layout: ['Box', 'Container', 'ContentRail', 'Divider', 'Grid', 'Stack'],
+  'content-rail': ['ContentRail'],
+  layout: ['Divider', 'Grid', 'Screen', 'ScreenSection', 'ScrollView', 'View'],
   list: ['FlatList', 'SectionList'],
+  pagination: ['Pagination'],
+  rating: ['Rating'],
   skeleton: ['Skeleton', 'SkeletonCard', 'SkeletonList', 'SkeletonText'],
+  tabs: ['Tabs', 'TabList', 'Tab', 'TabPanel'],
+  toolbar: ['Toolbar'],
   typography: ['Heading', 'Text'],
   'time-picker': ['TimePicker'],
   uploader: ['Uploader'],

package/src/expo57Migration.test.ts

@@ -82,19 +82,20 @@ describe('portable ZORA package boundary', () => {
     }
   });
 
-  test('contains no Expo runtime import or removed RN 0.85 style API', () => {
+  test('contains no Expo runtime import or direct React Native layout API', () => {
     const runtimeSource = readFileSync(
       join(ROOT, 'src', 'features', 'gradient', 'adapters', 'inbound', 'Gradient.tsx'),
       'utf8',
     );
     const shellSource = readFileSync(
-      join(ROOT, 'src', 'layout', 'app-shell', 'AppShell.tsx'),
+      join(ROOT, 'src', 'features', 'layout', 'adapters', 'inbound', 'AppShell.tsx'),
       'utf8',
     );
 
     expect(runtimeSource).not.toContain("from 'expo");
+    expect(shellSource).not.toContain("from 'react-native'");
     expect(shellSource).not.toContain('absoluteFillObject');
-    expect(shellSource).not.toMatch(/pointerEvents=/);
+    expect(shellSource).toContain('pointerEvents="box-none"');
   });
 });
 

package/src/featureManifest.test.ts

@@ -12,13 +12,19 @@ test('every selected feature element is directly authorable through its canonica
     const source = await Bun.file(`src/features/${family}/public.ts`).text();
     for (const name of names) {
       const meta = catalog.get(name);
+      const hasAuthorableShape =
+        Object.keys(meta?.props ?? {}).length > 0 || (meta?.allowedChildren.length ?? 0) > 0;
       expect(meta?.directManifestNode, name).toBe(true);
-      expect(Object.keys(meta?.props ?? {}).length, name).toBeGreaterThan(0);
+      expect(hasAuthorableShape, name).toBe(true);
       expect(source, name).toContain(name);
     }
   }
 });
 
+test('feature ownership has no remaining legacy components directory', () => {
+  expect(existsSync('src/components')).toBe(false);
+});
+
 test('form composition has one canonical feature owner', () => {
   expect(existsSync('src/components/form')).toBe(false);
   expect(existsSync('src/patterns/form-field')).toBe(false);
@@ -38,7 +44,7 @@ test('migrated picker and presentation elements have one canonical feature owner
   }
 });
 
-test('interactive authoring retains state and event payload bindings after plugin composition', () => {
+test('existing interactive authoring retains bindings after plugin composition', () => {
   const meta = ZORA_CORE_PLUGIN_METADATA.componentMeta;
   expect(meta.DataTable?.bindings?.props?.sort?.value.type).toBe('object');
   expect(meta.DataTable?.bindings?.props?.rows?.value.type).toBe('array');
@@ -48,6 +54,29 @@ test('interactive authoring retains state and event payload bindings after plugi
     type: 'object',
   });
   expect(meta.BottomSheet?.bindings?.props?.open?.value.type).toBe('boolean');
+});
+
+test('final ownership data components retain bindings after plugin composition', () => {
+  const meta = ZORA_CORE_PLUGIN_METADATA.componentMeta;
+  expect(meta.Dialog?.bindings?.props?.visible?.value.type).toBe('boolean');
+  expect(meta.Dialog?.bindings?.events?.dismiss?.payload?.eventType).toBe('dialog.dismiss');
+  expect(meta.Pagination?.bindings?.props?.page?.value.type).toBe('number');
+  expect(meta.Pagination?.bindings?.events?.pageChange?.payload?.eventType).toBe(
+    'pagination.pageChange',
+  );
+  expect(meta.Rating?.bindings?.props?.value?.value.type).toBe('number');
+});
+
+test('final ownership form and tab components retain bindings after plugin composition', () => {
+  const meta = ZORA_CORE_PLUGIN_METADATA.componentMeta;
+  expect(meta.SearchInput?.bindings?.props?.value?.value.type).toBe('string');
+  expect(meta.SearchInput?.bindings?.events?.submit?.payload?.eventType).toBe('searchInput.submit');
+  expect(meta.Tabs?.bindings?.props?.value?.value.type).toBe('string');
+  expect(meta.Tabs?.bindings?.events?.valueChange?.payload?.eventType).toBe('tabs.valueChange');
+});
+
+test('existing scalar authoring bindings remain available after plugin composition', () => {
+  const meta = ZORA_CORE_PLUGIN_METADATA.componentMeta;
   expect(meta.Heading?.bindings?.props?.level?.value.type).toBe('number');
   expect(meta.Image?.bindings?.props?.radius?.value.type).toBe('unknown');
 });

package/src/features/accordion/adapters/inbound/AccordionItem.tsx

@@ -9,7 +9,7 @@ import type { ViewStyle } from 'react-native';
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { AccordionItemProps } from '../../../../types/accordion';
 import { Icon } from '../../../icon/public';
-import { Box, Divider, Stack } from '../../../layout/public';
+import { Divider, View } from '../../../layout/public';
 import { Heading, Text } from '../../../typography/public';
 import { AccordionPresentationContext } from '../../composition/AccordionPresentationContext';
 
@@ -48,39 +48,39 @@ function AccordionItemInner({
       testID={testID}
       value={value}
     >
-      <Stack gap="none">
-        <Stack align="center" direction="row" gap="s">
-          <Box flex={1}>
+      <View gap="none">
+        <View align="center" direction="row" gap="s">
+          <View flex={1}>
             <SurfaceAccordionTrigger interactionPolicy={interactionPolicy} style={triggerStyle}>
-              <Box px="m" py="m">
-                <Stack align="center" direction="row" gap="m">
+              <View px="m" py="m">
+                <View align="center" direction="row" gap="m">
                   {icon ? <Icon {...icon} /> : null}
-                  <Box flex={1}>
-                    <Stack gap="xs">
+                  <View flex={1}>
+                    <View gap="xs">
                       <Heading level={4}>{title}</Heading>
                       {description ? (
                         <Text emphasis="muted" variant="bodySmall">
                           {description}
                         </Text>
                       ) : null}
-                    </Stack>
-                  </Box>
+                    </View>
+                  </View>
                   <Icon name={open ? 'chevron-up-outline' : 'chevron-down-outline'} size="m" />
-                </Stack>
-              </Box>
+                </View>
+              </View>
             </SurfaceAccordionTrigger>
-          </Box>
-          {actions ? <Box pr="m">{actions}</Box> : null}
-        </Stack>
+          </View>
+          {actions ? <View pr="m">{actions}</View> : null}
+        </View>
 
         <SurfaceAccordionContent>
-          <Box px="m" pb="m">
-            <Stack gap="m">{children}</Stack>
-          </Box>
+          <View px="m" pb="m">
+            <View gap="m">{children}</View>
+          </View>
         </SurfaceAccordionContent>
 
         <Divider />
-      </Stack>
+      </View>
     </SurfaceAccordionItem>
   );
 }

package/src/features/app-bar/adapters/inbound/AppBar.tsx

@@ -1,12 +1,11 @@
 import { AppBar as SurfaceAppBar, type ButtonIconSpec } from '@ankhorage/surface';
 import React from 'react';
 
-import { Inline } from '../../../../foundation';
 import { useZoraTheme } from '../../../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { AppBarMode, AppBarOverflowMenu, AppBarProps } from '../../../../types/app-bar';
 import { IconButton } from '../../../button/public';
-import { Box, Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { PopoverMenu } from '../../../popover-menu/public';
 import { Heading, Text } from '../../../typography/public';
 
@@ -55,7 +54,7 @@ function AppBarInner({
       testID={testID}
       trailing={resolvedTrailing}
     >
-      {resolvedCenter ? <Box style={{ minWidth: 0 }}>{resolvedCenter}</Box> : null}
+      {resolvedCenter ? <View style={{ minWidth: 0 }}>{resolvedCenter}</View> : null}
     </SurfaceAppBar>
   );
 }
@@ -136,10 +135,10 @@ function resolveOverflowMenu(
 function resolveTrailing(actions: React.ReactNode, overflowMenu: React.ReactNode): React.ReactNode {
   if (!actions && !overflowMenu) return undefined;
   return (
-    <Inline align="center" gap="s" wrap="nowrap">
+    <View direction="row" align="center" gap="s" wrap="nowrap">
       {actions}
       {overflowMenu}
-    </Inline>
+    </View>
   );
 }
 
@@ -168,7 +167,7 @@ function resolveCenter({
   if (title == null && subtitle == null) return null;
 
   return (
-    <Stack gap="xs">
+    <View gap="xs">
       {title != null ? (
         <Heading ellipsizeMode="tail" level={3} numberOfLines={1} size="h5">
           {title}
@@ -179,6 +178,6 @@ function resolveCenter({
           {subtitle}
         </Text>
       ) : null}
-    </Stack>
+    </View>
   );
 }

package/src/features/auth/adapters/inbound/AuthForm.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import type { ZoraBaseProps } from '../../../../theme/ZoraBaseProps';
 import type { FormErrors, FormFieldConfig, FormValues } from '../../../../types/form';
 import { FormActions, FormError, useFormController } from '../../../form/public';
-import { Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { AuthFormField } from './AuthFormField';
 
 interface AuthFormProps<TName extends string> {
@@ -38,7 +38,7 @@ export function AuthForm<TName extends string>({
 }: AuthFormProps<TName>) {
   const controller = useFormController({ fields, values, errors, onChange, onSubmit });
   return (
-    <Stack gap="m" testID={testID}>
+    <View gap="m" testID={testID}>
       <FormError error={error} />
       {fields.map((field) => (
         <AuthFormField
@@ -63,6 +63,6 @@ export function AuthForm<TName extends string>({
       >
         {actions}
       </FormActions>
-    </Stack>
+    </View>
   );
 }

package/src/features/auth/adapters/inbound/ForgotPasswordForm.tsx

@@ -4,7 +4,7 @@ import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { ForgotPasswordFormProps } from '../../../../types/auth';
 import type { FormFieldConfig, FormValues } from '../../../../types/form';
 import { Button } from '../../../button/public';
-import { Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import {
   defaultIdentifiers,
   normalizeIdentifierKind,
@@ -60,7 +60,7 @@ function ForgotPasswordFormInner({
     <AuthForm
       actions={
         onSignIn ? (
-          <Stack direction="row" gap="s" wrap="wrap">
+          <View direction="row" gap="s" wrap="wrap">
             <Button
               disabled={disabled || loading}
               variant="ghost"
@@ -73,7 +73,7 @@ function ForgotPasswordFormInner({
             >
               {signInLabel}
             </Button>
-          </Stack>
+          </View>
         ) : undefined
       }
       disabled={disabled}

package/src/features/auth/adapters/inbound/OAuthProviderList.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { OAuthProviderListProps } from '../../../../types/auth';
-import { Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { OAuthProviderButton } from './OAuthProviderButton';
 
 function OAuthProviderListInner({
@@ -24,7 +24,7 @@ function OAuthProviderListInner({
   const resolvedFullWidth = fullWidth ?? layout === 'stack';
 
   return (
-    <Stack
+    <View
       direction={direction}
       gap="s"
       testID={testID}
@@ -46,7 +46,7 @@ function OAuthProviderListInner({
           interactionPolicy={interactionPolicy}
         />
       ))}
-    </Stack>
+    </View>
   );
 }
 

package/src/features/auth/adapters/inbound/OtpForm.tsx

@@ -4,7 +4,7 @@ import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { OtpFormProps } from '../../../../types/auth';
 import type { FormFieldConfig, FormValues } from '../../../../types/form';
 import { Button } from '../../../button/public';
-import { Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { AuthForm } from './AuthForm';
 
 type OtpFieldName = 'otp';
@@ -55,7 +55,7 @@ function OtpFormInner({
     <AuthForm
       actions={
         onResend ? (
-          <Stack direction="row" gap="s" wrap="wrap">
+          <View direction="row" gap="s" wrap="wrap">
             <Button
               disabled={disabled || loading || resendDisabled}
               variant="ghost"
@@ -69,7 +69,7 @@ function OtpFormInner({
             >
               {resendLabel}
             </Button>
-          </Stack>
+          </View>
         ) : undefined
       }
       disabled={disabled}

package/src/features/auth/adapters/inbound/SignInForm.tsx

@@ -4,7 +4,7 @@ import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { SignInFormProps } from '../../../../types/auth';
 import type { FormFieldConfig, FormValues } from '../../../../types/form';
 import { Button } from '../../../button/public';
-import { Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import {
   defaultIdentifiers,
   normalizeIdentifierKind,
@@ -72,7 +72,7 @@ function SignInFormInner({
     <AuthForm
       actions={
         hasActions ? (
-          <Stack direction="row" gap="s" wrap="wrap">
+          <View direction="row" gap="s" wrap="wrap">
             {onForgotPassword ? (
               <Button
                 disabled={disabled || loading}
@@ -101,7 +101,7 @@ function SignInFormInner({
                 {signUpLabel}
               </Button>
             ) : null}
-          </Stack>
+          </View>
         ) : undefined
       }
       disabled={disabled}

package/src/features/auth/adapters/inbound/SignUpForm.tsx

@@ -4,7 +4,7 @@ import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { SignUpFormProps } from '../../../../types/auth';
 import type { FormFieldConfig, FormValues } from '../../../../types/form';
 import { Button } from '../../../button/public';
-import { Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { AuthForm } from './AuthForm';
 
 const defaultSignUpFields = [
@@ -52,7 +52,7 @@ function SignUpFormInner({
     <AuthForm
       actions={
         onSignIn ? (
-          <Stack direction="row" gap="s" wrap="wrap">
+          <View direction="row" gap="s" wrap="wrap">
             <Button
               disabled={disabled || loading}
               variant="ghost"
@@ -65,7 +65,7 @@ function SignUpFormInner({
             >
               {signInLabel}
             </Button>
-          </Stack>
+          </View>
         ) : undefined
       }
       disabled={disabled}

package/src/features/avatar/adapters/inbound/Avatar.tsx

@@ -7,7 +7,7 @@ import { useZoraTheme } from '../../../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { AvatarProps, AvatarShape, AvatarSize } from '../../../../types/avatar';
 import { Icon } from '../../../icon/public';
-import { Box } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { Text, type TextVariant } from '../../../typography/public';
 import { resolveAvatarInitials } from '../../utils/resolveAvatarInitials';
 /***
@@ -120,7 +120,7 @@ function AvatarInner({
   };
 
   return (
-    <Box
+    <View
       accessibilityLabel={label}
       bg={backgroundColor}
       height={resolvedSize}
@@ -142,6 +142,6 @@ function AvatarInner({
       ) : (
         renderFallback()
       )}
-    </Box>
+    </View>
   );
 }

package/src/features/avatar/adapters/inbound/AvatarGroup.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { useZoraTheme } from '../../../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { AvatarGroupItem, AvatarGroupProps } from '../../../../types/avatar-group';
-import { Box, Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { Avatar } from '../../public';
 /***
  * Renders a compact group of avatars with optional overflow handling.
@@ -34,7 +34,7 @@ function AvatarGroupInner({
   const borderColor = theme.semantics.surface.default;
 
   const renderItem = (item: AvatarGroupItem, index: number) => (
-    <Box
+    <View
       key={item.id ?? `${index}`}
       ml={index === 0 ? 0 : -overlap}
       radius="full"
@@ -51,14 +51,14 @@ function AvatarGroupInner({
         source={item.source}
         color={item.color}
       />
-    </Box>
+    </View>
   );
 
   return (
-    <Stack align="center" direction="row" testID={testID} wrap="nowrap">
+    <View align="center" direction="row" testID={testID} wrap="nowrap">
       {visibleItems.map(renderItem)}
       {overflowCount > 0 ? (
-        <Box
+        <View
           ml={visibleItems.length === 0 ? 0 : -overlap}
           radius="full"
           borderWidth={2}
@@ -70,8 +70,8 @@ function AvatarGroupInner({
             shape={shape}
             color="neutral"
           />
-        </Box>
+        </View>
       ) : null}
-    </Stack>
+    </View>
   );
 }

package/src/features/bottom-sheet/adapters/inbound/BottomSheet.tsx

@@ -5,7 +5,7 @@ import { useZoraTheme } from '../../../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import { useZoraThemeRuntime } from '../../../../theme/ZoraThemeRuntimeContext';
 import type { BottomSheetProps } from '../../../../types/manifest-bottom-sheet';
-import { Box } from '../../../layout/public';
+import { View } from '../../../layout/public';
 
 /*** Presents declarative manifest children through the shared Surface sheet host. */
 export const BottomSheet = withZoraThemeScope(BottomSheetInner);
@@ -46,9 +46,9 @@ function BottomSheetInner({
     if (!active || dismissed.current) return;
     present({
       content: (
-        <Box mode={mode} themeId={themeId} testID={testID}>
+        <View mode={mode} themeId={themeId} testID={testID}>
           {children}
-        </Box>
+        </View>
       ),
       snapPoints,
       initialIndex,

package/src/features/bottom-sheet/public.test.ts

@@ -10,7 +10,7 @@ describe('ZORA BottomSheet public contract', () => {
     const source = await Bun.file('src/features/bottom-sheet/public.ts').text();
 
     expect(packageJson.exports['./bottom-sheet']).toBeDefined();
-    expect(packageJson.dependencies['@ankhorage/surface']).toMatch(/^\^5\./u);
+    expect(packageJson.dependencies['@ankhorage/surface']).toMatch(/^\^6\./u);
     expect(source).toContain("from '@ankhorage/surface/bottom-sheet'");
     for (const name of [
       'BottomSheetFlatList',

package/src/features/breadcrumbs/adapters/inbound/Breadcrumbs.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 
-import { Inline } from '../../../../foundation';
 import { resolveIconSize } from '../../../../internal/recipes';
 import { useZoraTheme } from '../../../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
@@ -11,6 +10,7 @@ import type {
 } from '../../../../types/breadcrumbs';
 import { Button } from '../../../button/public';
 import { Icon } from '../../../icon/public';
+import { View } from '../../../layout/public';
 import { Text } from '../../../typography/public';
 
 /*** Renders a breadcrumb trail whose final item represents the current location. */
@@ -45,7 +45,7 @@ function BreadcrumbsInner({
   if (items.length === 0) return null;
 
   return (
-    <Inline align="center" gap={compact ? 'xs' : 's'} testID={testID} wrap="wrap">
+    <View direction="row" align="center" gap={compact ? 'xs' : 's'} testID={testID} wrap="wrap">
       {renderItems.map((renderItem, index) => {
         const showSeparator = index !== renderItems.length - 1;
 
@@ -74,7 +74,7 @@ function BreadcrumbsInner({
           />
         );
       })}
-    </Inline>
+    </View>
   );
 }
 
@@ -127,7 +127,7 @@ function BreadcrumbLabel({ item, compact }: { item: BreadcrumbItem; compact: boo
   const { theme } = useZoraTheme();
 
   return (
-    <Inline align="center" gap="xs" wrap="nowrap">
+    <View direction="row" align="center" gap="xs" wrap="nowrap">
       {item.icon ? (
         <Icon
           {...item.icon}
@@ -138,7 +138,7 @@ function BreadcrumbLabel({ item, compact }: { item: BreadcrumbItem; compact: boo
       <Text emphasis="muted" variant={compact ? 'caption' : 'bodySmall'}>
         {item.label}
       </Text>
-    </Inline>
+    </View>
   );
 }