@ankhorage/surface 5.0.1 → 6.0.0

package/src/features/toast/adapters/inbound/Toast.tsx

@@ -5,7 +5,7 @@ import type { SurfaceColor } from '../../../../surfaceColor';
 import { useTheme } from '../../../../theme/ThemeContext';
 import type { SurfaceTheme } from '../../../../theme/types';
 import type { ToastProps } from '../../../../types/toast';
-import { Box, Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { Surface } from '../../../surface/public';
 import { Text } from '../../../typography/public';
 
@@ -29,15 +29,15 @@ export function Toast({
 
   return (
     <Surface p="m" style={[styles.root, statusStyle]} testID={testID} variant="raised">
-      <Stack align="center" direction="row" justify="space-between">
-        <Box flex={1}>
+      <View align="center" direction="row" justify="space-between">
+        <View flex={1}>
           {title ? (
             <Text variant="label" weight="medium">
               {title}
             </Text>
           ) : null}
           {description ? <Text emphasis="muted">{description}</Text> : null}
-        </Box>
+        </View>
         {onDismiss ? (
           <Pressable
             accessibilityLabel="Dismiss notification"
@@ -48,7 +48,7 @@ export function Toast({
             <Text color={statusTextColor}>×</Text>
           </Pressable>
         ) : null}
-      </Stack>
+      </View>
     </Surface>
   );
 }

package/src/features/toast/adapters/inbound/ToastProvider.tsx

@@ -4,7 +4,7 @@ import { StyleSheet, type ViewStyle } from 'react-native';
 import { Portal } from '../../../../internal/overlay/Portal';
 import { resolveOverlayAnimation } from '../../../../internal/resolvers';
 import type { ToastProviderProps } from '../../../../types/toast';
-import { Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { ToastContext } from '../../composition/ToastContext';
 import { useToastRuntime } from '../../composition/useToastRuntime';
 import { Toast } from './Toast';
@@ -22,7 +22,7 @@ export function ToastProvider({ children, defaultDuration = 4000 }: ToastProvide
     <ToastContext value={controller}>
       {children}
       <Portal layer="toast" visible={toasts.length > 0}>
-        <Stack gap="s" pointerEvents="box-none" style={[styles.container, animationStyle]}>
+        <View gap="s" pointerEvents="box-none" style={[styles.container, animationStyle]}>
           {toasts.map((toast) => (
             <Toast
               description={toast.description}
@@ -33,7 +33,7 @@ export function ToastProvider({ children, defaultDuration = 4000 }: ToastProvide
               title={toast.title}
             />
           ))}
-        </Stack>
+        </View>
       </Portal>
     </ToastContext>
   );

package/src/index.test.ts

@@ -6,7 +6,6 @@ import type { SelectionSemantics, SurfaceColorDiagnostics } from './index';
 import { createTheme } from './theme/createTheme';
 
 const indexSource = readFileSync(new URL('./index.ts', import.meta.url), 'utf8');
-const layoutIndexSource = readFileSync(new URL('./layout/index.ts', import.meta.url), 'utf8');
 const packageJson = JSON.parse(
   readFileSync(new URL('../package.json', import.meta.url), 'utf8'),
 ) as {
@@ -18,6 +17,7 @@ const packageJson = JSON.parse(
 };
 
 const expectedFeatureRootExports = [
+  "export { AppBar } from './features/app-bar/public';",
   "export { Badge } from './features/badge/public';",
   "export { Button, IconButton } from './features/button/public';",
   "export { Card } from './features/card/public';",
@@ -27,7 +27,7 @@ const expectedFeatureRootExports = [
   "export { Icon, SUPPORTED_ICON_PROVIDERS } from './features/icon/public';",
   "export { Image } from './features/image/public';",
   "export { KeyboardAvoidingView } from './features/keyboard-avoiding-view/public';",
-  "export { Box, Container, Divider, Grid, Stack } from './features/layout/public';",
+  "export { Divider, Grid, ScrollView, View } from './features/layout/public';",
   "export { Modal } from './features/modal/public';",
   "export { PopoverMenu } from './features/popover-menu/public';",
   "export { Popover } from './features/popover/public';",
@@ -47,7 +47,6 @@ const expectedLegacyRootExports = [
   "export { Textarea } from './components/textarea';",
   "export type { InteractionPolicy, InteractionPolicyProps } from './interactionPolicy';",
   "export * from './core/responsive';",
-  "export * from './layout';",
 ] as const;
 
 describe('feature-owned root barrel contract', () => {
@@ -55,41 +54,16 @@ describe('feature-owned root barrel contract', () => {
     expectedFeatureRootExports.forEach((line) => expect(indexSource).toContain(line));
   });
 
-  it('does not retain migrated UI exports from legacy component or primitive paths', () => {
-    for (const legacyPath of [
-      './components/badge',
-      './components/button',
-      './components/card',
-      './components/checkbox',
-      './components/icon-button',
-      './components/menu',
-      './components/modal',
-      './components/radio',
-      './components/tabs',
-      './components/text-input',
-      './components/toast',
-      './components/tooltip',
-      './primitives/heading',
-      './primitives/icon',
-      './primitives/image',
-      './primitives/text',
-    ]) {
-      expect(indexSource).not.toContain(legacyPath);
-    }
-  });
-
-  it('removes migrated elements from the legacy layout facade', () => {
-    for (const name of [
-      'Box',
-      'Container',
-      'Divider',
-      'Grid',
-      'KeyboardAvoidingView',
-      'Stack',
-      'Surface',
-    ]) {
-      expect(layoutIndexSource).not.toContain(`./${name}`);
-    }
+  it('does not retain removed layout aliases or a legacy layout facade', () => {
+    expect(indexSource).not.toContain("'./layout");
+    expect(indexSource).not.toMatch(/\bBoxProps\b/u);
+    expect(indexSource).not.toMatch(/\bContainerProps\b/u);
+    expect(indexSource).not.toMatch(/\bStackProps\b/u);
+    expect(indexSource).not.toMatch(/\bScrollAreaProps\b/u);
+    expect(indexSource).not.toMatch(/export\s*\{[^}]*\bBox\b/u);
+    expect(indexSource).not.toMatch(/export\s*\{[^}]*\bContainer\b/u);
+    expect(indexSource).not.toMatch(/export\s*\{[^}]*\bStack\b/u);
+    expect(indexSource).not.toMatch(/export\s*\{[^}]*\bScrollArea\b/u);
   });
 });
 

package/src/index.ts

@@ -30,6 +30,8 @@ export {
   AccordionItem,
   AccordionTrigger,
 } from './features/accordion/public';
+export type { AppBarProps } from './features/app-bar/public';
+export { AppBar } from './features/app-bar/public';
 export type { BadgeProps } from './features/badge/public';
 export { Badge } from './features/badge/public';
 export type { ButtonIconSpec, ButtonProps, IconButtonProps } from './features/button/public';
@@ -58,14 +60,8 @@ export type {
   KeyboardAvoidingViewProps,
 } from './features/keyboard-avoiding-view/public';
 export { KeyboardAvoidingView } from './features/keyboard-avoiding-view/public';
-export type {
-  BoxProps,
-  ContainerProps,
-  DividerProps,
-  GridProps,
-  StackProps,
-} from './features/layout/public';
-export { Box, Container, Divider, Grid, Stack } from './features/layout/public';
+export type { DividerProps, GridProps, ScrollViewProps, ViewProps } from './features/layout/public';
+export { Divider, Grid, ScrollView, View } from './features/layout/public';
 export type { ModalProps } from './features/modal/public';
 export { Modal } from './features/modal/public';
 export type {
@@ -97,7 +93,6 @@ export { Tooltip } from './features/tooltip/public';
 export type { HeadingLevel, HeadingProps, TextProps } from './features/typography/public';
 export { Heading, Text } from './features/typography/public';
 export type { InteractionPolicy, InteractionPolicyProps } from './interactionPolicy';
-export * from './layout';
 export type { ButtonBaseProps } from './primitives/button-base';
 export { ButtonBase } from './primitives/button-base';
 export type {

package/src/primitives/button-base/ButtonBase.tsx

@@ -8,9 +8,10 @@ import {
   resolveInteractiveState,
 } from '../../internal/resolvers';
 import { useTheme } from '../../theme/ThemeContext';
-import { resolveBoxStyles } from '../../utils/resolveBoxStyles';
+import { resolveViewStyles } from '../../utils/resolveViewStyles';
 import type { ButtonBaseProps } from './types';
 
+/*** Resolves one Pressable state into the canonical Surface interaction state. */
 function getInteractionState(
   pressableState: PressableStateCallbackType,
   hovered: boolean,
@@ -25,6 +26,7 @@ function getInteractionState(
   });
 }
 
+/*** Renders the low-level token-aware Pressable boundary shared by Surface controls. */
 export function ButtonBase({
   children,
   disabled = false,
@@ -43,7 +45,7 @@ export function ButtonBase({
   const [hovered, setHovered] = React.useState(false);
   const [focused, setFocused] = React.useState(false);
   const isWeb = Platform.OS === 'web';
-  const resolvedBoxStyles = resolveBoxStyles(theme, breakpoint, props);
+  const resolvedViewStyles = resolveViewStyles(theme, breakpoint, props);
   const passive = interactionPolicy === 'passive';
 
   return (
@@ -54,9 +56,7 @@ export function ButtonBase({
       disabled={disabled}
       onBlur={() => setFocused(false)}
       onFocus={() => {
-        if (isWeb) {
-          setFocused(true);
-        }
+        if (isWeb) setFocused(true);
       }}
       onHoverIn={isWeb ? () => setHovered(true) : undefined}
       onHoverOut={isWeb ? () => setHovered(false) : undefined}
@@ -64,9 +64,8 @@ export function ButtonBase({
       onPress={passive ? undefined : onPress}
       style={(pressableState) => {
         const state = getInteractionState(pressableState, hovered, focused, disabled);
-
         return [
-          resolvedBoxStyles,
+          resolvedViewStyles,
           resolveFocusRingStyles(theme.semantics.border.focus, state.focused, isWeb),
           style,
         ];
@@ -75,7 +74,6 @@ export function ButtonBase({
     >
       {(pressableState) => {
         const state = getInteractionState(pressableState, hovered, focused, disabled);
-
         return typeof children === 'function' ? children(state) : children;
       }}
     </Pressable>

package/src/primitives/button-base/types.ts

@@ -3,10 +3,10 @@ import type { AccessibilityRole, AccessibilityState, GestureResponderEvent } fro
 
 import type { InteractionPolicyProps } from '../../interactionPolicy';
 import type { InteractionState } from '../../internal/resolvers/resolveInteractiveState';
-import type { BoxProps } from '../../types/layout';
+import type { ViewProps } from '../../types/layout';
 
 export interface ButtonBaseProps
-  extends Omit<BoxProps, 'children' | 'pointerEvents'>, InteractionPolicyProps {
+  extends Omit<ViewProps, 'children' | 'pointerEvents'>, InteractionPolicyProps {
   children?: React.ReactNode | ((state: InteractionState) => React.ReactNode);
   disabled?: boolean;
   onPress?: ((event: GestureResponderEvent) => void) | undefined;

package/src/types/app-bar.ts

@@ -0,0 +1,13 @@
+import type React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import type { ViewProps } from './layout';
+
+export interface AppBarProps extends Omit<ViewProps, 'children'> {
+  leading?: React.ReactNode;
+  trailing?: React.ReactNode;
+  children?: React.ReactNode;
+  safeAreaTop?: boolean;
+  divider?: boolean;
+  contentStyle?: StyleProp<ViewStyle>;
+}

package/src/types/layout.ts

@@ -1,5 +1,10 @@
 import type React from 'react';
-import type { StyleProp, ViewProps as ReactNativeViewProps, ViewStyle } from 'react-native';
+import type {
+  ScrollViewProps as ReactNativeScrollViewProps,
+  StyleProp,
+  ViewProps as ReactNativeViewProps,
+  ViewStyle,
+} from 'react-native';
 
 import type { Responsive } from '../core/responsive';
 import type { SurfaceTheme } from '../theme/types';
@@ -12,7 +17,7 @@ type RadiusValue = number | RadiusToken;
 export type SpaceValue = number | SpaceToken;
 export type ColorValue = string | ColorToken;
 
-export interface BoxStyleProps {
+export interface ViewStyleProps {
   p?: Responsive<SpaceValue>;
   px?: Responsive<SpaceValue>;
   py?: Responsive<SpaceValue>;
@@ -27,6 +32,9 @@ export interface BoxStyleProps {
   mb?: Responsive<SpaceValue>;
   ml?: Responsive<SpaceValue>;
   mr?: Responsive<SpaceValue>;
+  gap?: Responsive<SpaceValue>;
+  rowGap?: Responsive<SpaceValue>;
+  columnGap?: Responsive<SpaceValue>;
   bg?: Responsive<ColorValue>;
   radius?: Responsive<RadiusValue>;
   borderWidth?: Responsive<number>;
@@ -41,6 +49,12 @@ export interface BoxStyleProps {
   flexGrow?: Responsive<number>;
   flexShrink?: Responsive<number>;
   flexBasis?: Responsive<number | string>;
+  direction?: Responsive<'row' | 'column'>;
+  align?: Responsive<'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'>;
+  justify?: Responsive<
+    'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly'
+  >;
+  wrap?: Responsive<'nowrap' | 'wrap'>;
   alignSelf?: Responsive<ViewStyle['alignSelf']>;
   position?: Responsive<ViewStyle['position']>;
   top?: Responsive<number>;
@@ -53,7 +67,7 @@ export interface BoxStyleProps {
   style?: StyleProp<ViewStyle>;
 }
 
-export interface BoxProps extends BoxStyleProps {
+export interface ViewProps extends ViewStyleProps {
   accessibilityLabel?: ReactNativeViewProps['accessibilityLabel'];
   accessibilityRole?: ReactNativeViewProps['accessibilityRole'];
   accessibilityState?: ReactNativeViewProps['accessibilityState'];
@@ -63,34 +77,25 @@ export interface BoxProps extends BoxStyleProps {
   testID?: string;
 }
 
-export interface ContainerProps extends Omit<BoxProps, 'children'> {
-  children?: React.ReactNode;
-  maxWidth?: Responsive<number>;
-  px?: Responsive<number | keyof SurfaceTheme['spacing']>;
-}
-
-export interface DividerProps extends Omit<BoxProps, 'bg' | 'height' | 'width'> {
+export interface DividerProps extends Omit<ViewProps, 'bg' | 'height' | 'width'> {
   orientation?: 'horizontal' | 'vertical';
   color?: ColorValue;
   thickness?: number;
 }
 
-export interface GridProps extends Omit<BoxProps, 'children'> {
+export interface GridProps extends Omit<ViewProps, 'children'> {
   children?: React.ReactNode;
-  cols: Responsive<number>;
+  cols?: Responsive<number>;
   gap?: Responsive<SpaceValue>;
   rowGap?: Responsive<SpaceValue>;
   colGap?: Responsive<SpaceValue>;
   minItemWidth?: Responsive<number>;
 }
 
-export interface StackProps extends Omit<BoxProps, 'children'> {
+export interface ScrollViewProps
+  extends
+    ViewStyleProps,
+    Omit<ReactNativeScrollViewProps, 'children' | 'contentContainerStyle' | 'style'> {
   children?: React.ReactNode;
-  direction?: Responsive<'row' | 'column'>;
-  gap?: Responsive<SpaceValue>;
-  align?: Responsive<'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'>;
-  justify?: Responsive<
-    'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly'
-  >;
-  wrap?: Responsive<'nowrap' | 'wrap'>;
+  contentContainerStyle?: StyleProp<ViewStyle>;
 }

package/src/types/surface.ts

@@ -1,7 +1,7 @@
-import type { BoxProps } from './layout';
+import type { ViewProps } from './layout';
 
 export type SurfaceVariant = 'default' | 'subtle' | 'raised' | 'outline';
 
-export interface SurfaceProps extends Omit<BoxProps, 'bg' | 'borderColor' | 'borderWidth'> {
+export interface SurfaceProps extends Omit<ViewProps, 'bg' | 'borderColor' | 'borderWidth'> {
   variant?: SurfaceVariant;
 }

package/src/utils/resolveViewStyles.test.ts

@@ -0,0 +1,71 @@
+import { describe, expect, test } from 'bun:test';
+
+import type { SurfaceTheme } from '../theme/types';
+import { resolveViewStyles } from './resolveViewStyles';
+
+const mockTheme = {
+  spacing: { s: 4, m: 8, l: 16 },
+  radii: { m: 8 },
+  colors: { primary: '#007AFF', surface: '#FFFFFF' },
+} as unknown as SurfaceTheme;
+
+describe('resolveViewStyles spacing and responsive layout', () => {
+  test('resolves padding and margins correctly', () => {
+    const styles = resolveViewStyles(mockTheme, 'base', { p: 's', m: 8 });
+    expect(styles.padding).toBe(4);
+    expect(styles.margin).toBe(8);
+  });
+
+  test('resolves responsive properties', () => {
+    const props = { p: { base: 's', lg: 'l' }, direction: { base: 'column', lg: 'row' } } as const;
+    expect(resolveViewStyles(mockTheme, 'base', props).padding).toBe(4);
+    expect(resolveViewStyles(mockTheme, 'base', props).flexDirection).toBe('column');
+    expect(resolveViewStyles(mockTheme, 'lg', props).padding).toBe(16);
+    expect(resolveViewStyles(mockTheme, 'lg', props).flexDirection).toBe('row');
+  });
+
+  test('resolves gap tokens with native flex layout props', () => {
+    const styles = resolveViewStyles(mockTheme, 'base', {
+      align: 'center',
+      gap: 'm',
+      justify: 'space-between',
+      wrap: 'wrap',
+    });
+    expect(styles.alignItems).toBe('center');
+    expect(styles.gap).toBe(8);
+    expect(styles.justifyContent).toBe('space-between');
+    expect(styles.flexWrap).toBe('wrap');
+  });
+});
+
+describe('resolveViewStyles visual and dimension styles', () => {
+  test('resolves colors and border styles', () => {
+    const styles = resolveViewStyles(mockTheme, 'base', {
+      bg: 'primary',
+      radius: 'm',
+      borderWidth: 1,
+      borderColor: 'surface',
+    });
+    expect(styles.backgroundColor).toBe('#007AFF');
+    expect(styles.borderRadius).toBe(8);
+    expect(styles.borderWidth).toBe(1);
+    expect(styles.borderColor).toBe('#FFFFFF');
+  });
+
+  test('resolves spacing tokens for dimension props and preserves raw strings', () => {
+    const styles = resolveViewStyles(mockTheme, 'base', {
+      width: 'm',
+      minHeight: 'l',
+      maxWidth: '50%',
+    });
+    expect(styles.width).toBe(8);
+    expect(styles.minHeight).toBe(16);
+    expect(styles.maxWidth).toBe('50%');
+  });
+
+  test('handles undefined props gracefully', () => {
+    const styles = resolveViewStyles(mockTheme, 'base', {});
+    expect(styles.padding).toBeUndefined();
+    expect(styles.margin).toBeUndefined();
+  });
+});

package/src/utils/{resolveBoxStyles.ts → resolveViewStyles.ts}

@@ -4,14 +4,14 @@ import { resolveResponsive } from '../core/responsive/resolve';
 import type { Breakpoint } from '../core/responsive/types';
 import { resolveToken } from '../theme/resolveToken';
 import type { SurfaceTheme } from '../theme/types';
-import type { BoxStyleProps, ColorValue } from '../types/layout';
+import type { ColorValue, ViewStyleProps } from '../types/layout';
 import { resolveSpacing } from './resolveSpacing';
 
-/*** Resolves responsive Box style props into one React Native view style. */
-export function resolveBoxStyles(
+/*** Resolves responsive Surface View style props into one React Native view style. */
+export function resolveViewStyles(
   theme: SurfaceTheme,
   breakpoint: Breakpoint,
-  props: BoxStyleProps,
+  props: ViewStyleProps,
 ): ViewStyle {
   return {
     elevation: 0,
@@ -22,11 +22,11 @@ export function resolveBoxStyles(
   };
 }
 
-/*** Resolves padding and margin styles from responsive spacing props. */
+/*** Resolves padding, margin, and gap styles from responsive spacing props. */
 function resolveSpacingStyles(
   theme: SurfaceTheme,
   breakpoint: Breakpoint,
-  props: BoxStyleProps,
+  props: ViewStyleProps,
 ): ViewStyle {
   return {
     padding: resolveSpacing(theme, resolveResponsive(props.p, breakpoint)),
@@ -43,6 +43,9 @@ function resolveSpacingStyles(
     marginBottom: resolveSpacing(theme, resolveResponsive(props.mb, breakpoint)),
     marginLeft: resolveSpacing(theme, resolveResponsive(props.ml, breakpoint)),
     marginRight: resolveSpacing(theme, resolveResponsive(props.mr, breakpoint)),
+    gap: resolveSpacing(theme, resolveResponsive(props.gap, breakpoint)),
+    rowGap: resolveSpacing(theme, resolveResponsive(props.rowGap, breakpoint)),
+    columnGap: resolveSpacing(theme, resolveResponsive(props.columnGap, breakpoint)),
   };
 }
 
@@ -50,7 +53,7 @@ function resolveSpacingStyles(
 function resolveVisualStyles(
   theme: SurfaceTheme,
   breakpoint: Breakpoint,
-  props: BoxStyleProps,
+  props: ViewStyleProps,
 ): ViewStyle {
   return {
     backgroundColor: resolveColor(theme, resolveResponsive(props.bg, breakpoint)),
@@ -64,7 +67,7 @@ function resolveVisualStyles(
 function resolveDimensionStyles(
   theme: SurfaceTheme,
   breakpoint: Breakpoint,
-  props: BoxStyleProps,
+  props: ViewStyleProps,
 ): ViewStyle {
   return {
     width: resolveDimension(
@@ -95,12 +98,16 @@ function resolveDimensionStyles(
 }
 
 /*** Resolves responsive flex, positioning, and visibility styles. */
-function resolveLayoutStyles(breakpoint: Breakpoint, props: BoxStyleProps): ViewStyle {
+function resolveLayoutStyles(breakpoint: Breakpoint, props: ViewStyleProps): ViewStyle {
   return {
     flex: resolveResponsive(props.flex, breakpoint),
     flexGrow: resolveResponsive(props.flexGrow, breakpoint),
     flexShrink: resolveResponsive(props.flexShrink, breakpoint),
     flexBasis: resolveResponsive(props.flexBasis, breakpoint) as ViewStyle['flexBasis'],
+    flexDirection: resolveResponsive(props.direction, breakpoint),
+    alignItems: resolveResponsive(props.align, breakpoint),
+    justifyContent: resolveResponsive(props.justify, breakpoint),
+    flexWrap: resolveResponsive(props.wrap, breakpoint),
     alignSelf: resolveResponsive(props.alignSelf, breakpoint),
     position: resolveResponsive(props.position, breakpoint),
     top: resolveResponsive(props.top, breakpoint),

package/src/webAcceptance.test.tsx

@@ -8,18 +8,17 @@ await mock.module('react-native', () => ReactNativeWeb);
 
 const scrollContentStyle = { padding: 4 };
 
-const { Container, Grid } = await import('./features/layout/public');
+const { Grid, ScrollView, View } = await import('./features/layout/public');
 const { KeyboardAvoidingView } = await import('./features/keyboard-avoiding-view/public');
-const { ScrollArea } = await import('./layout/ScrollArea');
-const { Show } = await import('./layout/Show');
+const { Show } = await import('./core/responsive/Show');
 const { OverlayProvider } = await import('./internal/overlay/OverlayProvider');
 const { ThemeProvider } = await import('./theme/ThemeContext');
 
 function ResponsiveAcceptanceTree() {
   return (
     <ThemeProvider>
-      <Container maxWidth={{ base: 640, md: 960 }} px={{ base: 12, md: 24 }} testID="container">
-        <ScrollArea contentContainerStyle={scrollContentStyle} testID="scroll-area">
+      <View maxWidth={{ base: 640, md: 960 }} px={{ base: 12, md: 24 }} testID="container">
+        <ScrollView contentContainerStyle={scrollContentStyle} testID="scroll-view">
           <Grid cols={{ base: 1, md: 2 }} gap={{ base: 8, md: 16 }} testID="grid">
             <ReactNativeWeb.View testID="grid-first" />
             <ReactNativeWeb.View testID="grid-second" />
@@ -30,8 +29,8 @@ function ResponsiveAcceptanceTree() {
           >
             <ReactNativeWeb.Text>wide-content</ReactNativeWeb.Text>
           </Show>
-        </ScrollArea>
-      </Container>
+        </ScrollView>
+      </View>
     </ThemeProvider>
   );
 }
@@ -40,7 +39,7 @@ test('RN Web 0.21 statically renders and hydrates representative responsive prim
   const markup = renderToString(<ResponsiveAcceptanceTree />);
 
   expect(markup).toContain('data-testid="container"');
-  expect(markup).toContain('data-testid="scroll-area"');
+  expect(markup).toContain('data-testid="scroll-view"');
   expect(markup).toContain('data-testid="grid"');
   expect(markup).toContain('static-fallback');
   expect(markup).not.toContain('wide-content');
@@ -68,7 +67,7 @@ test('RN Web 0.21 statically renders and hydrates representative responsive prim
     await act(async () => Promise.resolve());
 
     expect(container.querySelector('[data-testid="container"]')).not.toBeNull();
-    expect(container.querySelector('[data-testid="scroll-area"]')).not.toBeNull();
+    expect(container.querySelector('[data-testid="scroll-view"]')).not.toBeNull();
     expect(container.querySelectorAll('[data-testid^="grid-"]')).toHaveLength(2);
     expect(hydrationErrors).toEqual([]);
 

package/dist/features/layout/adapters/inbound/Box.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import type { BoxProps } from '../../../../types/layout';
-/*** Renders the responsive foundational layout box. */
-export declare function Box({ accessible, accessibilityLabel, accessibilityRole, accessibilityState, children, pointerEvents, style, testID, ...props }: BoxProps): React.JSX.Element;
-//# sourceMappingURL=Box.d.ts.map

package/dist/features/layout/adapters/inbound/Box.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../../../src/features/layout/adapters/inbound/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAGzD,uDAAuD;AACvD,wBAAgB,GAAG,CAAC,EAClB,UAAU,EACV,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,EAClB,QAAQ,EACR,aAAa,EACb,KAAK,EACL,MAAM,EACN,GAAG,KAAK,EACT,EAAE,QAAQ,qBAmBV"}

package/dist/features/layout/adapters/inbound/Box.js

@@ -1,17 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-import { useResponsiveRuntime } from '../../../../core/responsive';
-import { resolvePointerEvents } from '../../../../internal/resolvePointerEvents';
-import { useTheme } from '../../../../theme/ThemeContext';
-import { resolveBoxStyles } from '../../../../utils/resolveBoxStyles';
-/*** Renders the responsive foundational layout box. */
-export function Box({ accessible, accessibilityLabel, accessibilityRole, accessibilityState, children, pointerEvents, style, testID, ...props }) {
-    const { theme } = useTheme();
-    const { breakpoint } = useResponsiveRuntime();
-    const resolved = resolveBoxStyles(theme, breakpoint, props);
-    const resolvedPointerEvents = pointerEvents ? resolvePointerEvents(pointerEvents) : null;
-    return (<View {...resolvedPointerEvents?.props} accessible={accessible} accessibilityLabel={accessibilityLabel} accessibilityRole={accessibilityRole} accessibilityState={accessibilityState} testID={testID} style={[resolved, resolvedPointerEvents?.style, style]}>
-      {children}
-    </View>);
-}
-//# sourceMappingURL=Box.js.map

package/dist/features/layout/adapters/inbound/Box.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Box.js","sourceRoot":"","sources":["../../../../../src/features/layout/adapters/inbound/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AACjF,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAE1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AAEtE,uDAAuD;AACvD,MAAM,UAAU,GAAG,CAAC,EAClB,UAAU,EACV,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,EAClB,QAAQ,EACR,aAAa,EACb,KAAK,EACL,MAAM,EACN,GAAG,KAAK,EACC;IACT,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,EAAE,CAAC;IAC7B,MAAM,EAAE,UAAU,EAAE,GAAG,oBAAoB,EAAE,CAAC;IAC9C,MAAM,QAAQ,GAAG,gBAAgB,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC;IAC5D,MAAM,qBAAqB,GAAG,aAAa,CAAC,CAAC,CAAC,oBAAoB,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAEzF,OAAO,CACL,CAAC,IAAI,CACH,IAAI,qBAAqB,EAAE,KAAK,CAAC,CACjC,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,kBAAkB,CAAC,CAAC,kBAAkB,CAAC,CACvC,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CACrC,kBAAkB,CAAC,CAAC,kBAAkB,CAAC,CACvC,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,KAAK,CAAC,CAAC,CAAC,QAAQ,EAAE,qBAAqB,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAEvD;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\n\nimport { useResponsiveRuntime } from '../../../../core/responsive';\nimport { resolvePointerEvents } from '../../../../internal/resolvePointerEvents';\nimport { useTheme } from '../../../../theme/ThemeContext';\nimport type { BoxProps } from '../../../../types/layout';\nimport { resolveBoxStyles } from '../../../../utils/resolveBoxStyles';\n\n/*** Renders the responsive foundational layout box. */\nexport function Box({\n  accessible,\n  accessibilityLabel,\n  accessibilityRole,\n  accessibilityState,\n  children,\n  pointerEvents,\n  style,\n  testID,\n  ...props\n}: BoxProps) {\n  const { theme } = useTheme();\n  const { breakpoint } = useResponsiveRuntime();\n  const resolved = resolveBoxStyles(theme, breakpoint, props);\n  const resolvedPointerEvents = pointerEvents ? resolvePointerEvents(pointerEvents) : null;\n\n  return (\n    <View\n      {...resolvedPointerEvents?.props}\n      accessible={accessible}\n      accessibilityLabel={accessibilityLabel}\n      accessibilityRole={accessibilityRole}\n      accessibilityState={accessibilityState}\n      testID={testID}\n      style={[resolved, resolvedPointerEvents?.style, style]}\n    >\n      {children}\n    </View>\n  );\n}\n"]}

package/dist/features/layout/adapters/inbound/Container.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import type { ContainerProps } from '../../../../types/layout';
-/*** Centers responsive content inside a configurable maximum width. */
-export declare function Container({ children, maxWidth, px, ...props }: ContainerProps): React.JSX.Element;
-//# sourceMappingURL=Container.d.ts.map

package/dist/features/layout/adapters/inbound/Container.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Container.d.ts","sourceRoot":"","sources":["../../../../../src/features/layout/adapters/inbound/Container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAI/D,uEAAuE;AACvE,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,QAAsD,EACtD,EAAiC,EACjC,GAAG,KAAK,EACT,EAAE,cAAc,qBAWhB"}