@ankhorage/zora 16.0.0 → 18.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ankhorage/zora",
   "type": "module",
-  "version": "16.0.0",
+  "version": "18.0.0",
   "description": "Opinionated React Native and React Native Web UI kit built on @ankhorage/surface.",
   "homepage": "https://github.com/ankhorage/zora#readme",
   "bugs": {
@@ -41,7 +41,7 @@
   "dependencies": {
     "@ankhorage/color-theory": "^0.3.0",
     "@ankhorage/contracts": "^12.0.1",
-    "@ankhorage/surface": "^5.0.0",
+    "@ankhorage/surface": "^7.0.0",
     "@ankhorage/utility": "^0.8.0",
     "expo-document-picker": "~57.0.1",
     "expo-image-picker": "~57.0.16"

package/src/audit.test.ts

@@ -118,20 +118,16 @@ 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', () => {
   /**
-   * Features, layouts, and patterns that compose ZORA primitives should import
-   * foundation primitives from ZORA, not directly from @ankhorage/surface.
-   * The feature-owned layout adapters are the deliberate Surface foundation boundary.
+   * 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 SURFACE_FOUNDATION_BOUNDARY = join(SRC_ROOT, 'features', 'layout');
-  const PRODUCT_FACING_DIRS = [
-    join(SRC_ROOT, 'features'),
-    join(SRC_ROOT, 'layout'),
-    join(SRC_ROOT, 'patterns'),
-  ];
+  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('feature, layout, and pattern files do not import foundation primitives directly from @ankhorage/surface', () => {
     for (const dir of PRODUCT_FACING_DIRS) {
@@ -144,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 feature-owned ZORA layout/foundation API instead.',
+            'Use the feature-owned ZORA layout API instead.',
         ).toBeNull();
       }
     }

package/src/constants.ts

@@ -21,13 +21,14 @@ export const FEATURE_MANIFEST_ELEMENTS = {
   'data-table': ['DataTable'],
   'date-picker': ['DatePicker'],
   dialog: ['Dialog'],
-  form: ['Form', 'FormError', 'FormField'],
+  form: ['Form', 'FormError', 'Field'],
   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'],

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/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/AuthFormField.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import type { ZoraBaseProps } from '../../../../theme/ZoraBaseProps';
 import type { FormFieldConfig, FormFieldValue } from '../../../../types/form';
-import { FormField, hasRequiredRule } from '../../../form/public';
+import { Field, hasRequiredRule } from '../../../form/public';
 import { TextInput } from '../../../form/text-input/public';
 
 interface AuthFormFieldProps<TName extends string> {
@@ -27,7 +27,7 @@ export function AuthFormField<TName extends string>({
 }: AuthFormFieldProps<TName>) {
   const fieldDisabled = disabled || loading || field.disabled;
   return (
-    <FormField
+    <Field
       description={field.description}
       disabled={fieldDisabled}
       errorText={error}
@@ -57,7 +57,7 @@ export function AuthFormField<TName extends string>({
         textContentType={resolveTextContentType(field)}
         value={value}
       />
-    </FormField>
+    </Field>
   );
 }
 

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(/^\^7\./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>
   );
 }
 

package/src/features/button/adapters/inbound/ButtonGroup.tsx

@@ -6,7 +6,7 @@ import type {
   ButtonGroupOrientation,
   ButtonGroupProps,
 } from '../../../../types/button-group';
-import { Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 /***
  * Groups multiple `Button` elements with consistent spacing and alignment.
  */
@@ -99,7 +99,7 @@ function ButtonGroupInner({
   const orderedItems = reverse ? items.reverse() : items;
 
   return (
-    <Stack
+    <View
       align={resolveStackAlign(align, orientation)}
       direction={resolveDirection(orientation)}
       gap={gap}
@@ -107,6 +107,6 @@ function ButtonGroupInner({
       testID={testID}
     >
       {orderedItems}
-    </Stack>
+    </View>
   );
 }

package/src/features/card/adapters/inbound/Card.tsx

@@ -5,7 +5,7 @@ import { resolveCardVariant } from '../../../../internal/recipes';
 import { useZoraThemeRecipe } from '../../../../theme/useZoraThemeRecipe';
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { CardProps } from '../../../../types/card';
-import { Box, Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { Heading } from '../../../typography/public';
 import { Text } from '../../../typography/public';
 import { resolveCardThemeRecipe } from '../../utils/resolveCardThemeRecipe';
@@ -55,16 +55,16 @@ function CardInner({
       radius={recipe.radius}
       variant={resolveCardVariant(recipe.tone)}
     >
-      <Stack gap={gap}>
+      <View gap={gap}>
         {hasHeader ? (
-          <Stack
+          <View
             align={{ base: 'flex-start', md: 'center' }}
             direction={{ base: 'column', md: 'row' }}
             gap="m"
             justify="space-between"
           >
-            <Box flex={{ md: 1 }} width={{ base: '100%', md: 'auto' }}>
-              <Stack gap="xs">
+            <View flex={{ md: 1 }} width={{ base: '100%', md: 'auto' }}>
+              <View gap="xs">
                 {eyebrow ? (
                   <Text emphasis="muted" variant="caption" weight="semiBold">
                     {eyebrow}
@@ -76,16 +76,16 @@ function CardInner({
                     {description}
                   </Text>
                 ) : null}
-              </Stack>
-            </Box>
-            {actions ? <Box>{actions}</Box> : null}
-          </Stack>
+              </View>
+            </View>
+            {actions ? <View>{actions}</View> : null}
+          </View>
         ) : null}
 
-        {children ? <Box>{children}</Box> : null}
+        {children ? <View>{children}</View> : null}
 
-        {hasFooter ? <Box pt="xs">{footer}</Box> : null}
-      </Stack>
+        {hasFooter ? <View pt="xs">{footer}</View> : null}
+      </View>
     </SurfaceCard>
   );
 }