@ankhorage/surface 2.2.1 → 3.0.1

package/dist/layout/Box.js

@@ -1,33 +1,15 @@
 import React from 'react';
-import { Platform, View, } from 'react-native';
+import { View } from 'react-native';
 import { useResponsiveRuntime } from '../core/responsive';
+import { resolvePointerEvents } from '../internal/resolvePointerEvents';
 import { useTheme } from '../theme/ThemeContext';
 import { resolveBoxStyles } from './helpers';
-function resolvePointerEventsStyle(pointerEvents) {
-    if (Platform.OS !== 'web' || pointerEvents === undefined)
-        return null;
-    if (pointerEvents === 'auto' || pointerEvents === 'none') {
-        return { pointerEvents };
-    }
-    return null;
-}
-function resolveViewPointerEvents(pointerEvents) {
-    if (pointerEvents === undefined)
-        return undefined;
-    if (Platform.OS !== 'web')
-        return pointerEvents;
-    if (pointerEvents === 'box-none' || pointerEvents === 'box-only') {
-        return pointerEvents;
-    }
-    return undefined;
-}
 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 pointerEventsStyle = resolvePointerEventsStyle(pointerEvents);
-    const viewPointerEvents = resolveViewPointerEvents(pointerEvents);
-    return (<View accessible={accessible} accessibilityLabel={accessibilityLabel} accessibilityRole={accessibilityRole} accessibilityState={accessibilityState} pointerEvents={viewPointerEvents} testID={testID} style={[resolved, pointerEventsStyle, style]}>
+    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>);
 }

package/dist/layout/Box.js.map

@@ -1 +1 @@
-{"version":3,"file":"Box.js","sourceRoot":"","sources":["../../src/layout/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,QAAQ,EAER,IAAI,GAGL,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAsB,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAYjE,SAAS,yBAAyB,CAChC,aAAgE;IAEhE,IAAI,QAAQ,CAAC,EAAE,KAAK,KAAK,IAAI,aAAa,KAAK,SAAS;QAAE,OAAO,IAAI,CAAC;IAEtE,IAAI,aAAa,KAAK,MAAM,IAAI,aAAa,KAAK,MAAM,EAAE,CAAC;QACzD,OAAO,EAAE,aAAa,EAAE,CAAC;IAC3B,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC;AAED,SAAS,wBAAwB,CAC/B,aAAgE;IAEhE,IAAI,aAAa,KAAK,SAAS;QAAE,OAAO,SAAS,CAAC;IAClD,IAAI,QAAQ,CAAC,EAAE,KAAK,KAAK;QAAE,OAAO,aAAa,CAAC;IAEhD,IAAI,aAAa,KAAK,UAAU,IAAI,aAAa,KAAK,UAAU,EAAE,CAAC;QACjE,OAAO,aAAa,CAAC;IACvB,CAAC;IAED,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,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,kBAAkB,GAAG,yBAAyB,CAAC,aAAa,CAAC,CAAC;IACpE,MAAM,iBAAiB,GAAG,wBAAwB,CAAC,aAAa,CAAC,CAAC;IAElE,OAAO,CACL,CAAC,IAAI,CACH,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,kBAAkB,CAAC,CAAC,kBAAkB,CAAC,CACvC,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CACrC,kBAAkB,CAAC,CAAC,kBAAkB,CAAC,CACvC,aAAa,CAAC,CAAC,iBAAiB,CAAC,CACjC,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,KAAK,CAAC,CAAC,CAAC,QAAQ,EAAE,kBAAkB,EAAE,KAAK,CAAC,CAAC,CAE7C;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\nimport {\n  Platform,\n  type StyleProp,\n  View,\n  type ViewProps as ReactNativeViewProps,\n  type ViewStyle,\n} from 'react-native';\n\nimport { useResponsiveRuntime } from '../core/responsive';\nimport { useTheme } from '../theme/ThemeContext';\nimport { type BoxStyleProps, resolveBoxStyles } from './helpers';\n\nexport interface BoxProps extends BoxStyleProps {\n  accessibilityLabel?: ReactNativeViewProps['accessibilityLabel'];\n  accessibilityRole?: ReactNativeViewProps['accessibilityRole'];\n  accessibilityState?: ReactNativeViewProps['accessibilityState'];\n  accessible?: ReactNativeViewProps['accessible'];\n  children?: React.ReactNode;\n  pointerEvents?: ReactNativeViewProps['pointerEvents'];\n  testID?: string;\n}\n\nfunction resolvePointerEventsStyle(\n  pointerEvents: ReactNativeViewProps['pointerEvents'] | undefined,\n): StyleProp<ViewStyle> | null {\n  if (Platform.OS !== 'web' || pointerEvents === undefined) return null;\n\n  if (pointerEvents === 'auto' || pointerEvents === 'none') {\n    return { pointerEvents };\n  }\n\n  return null;\n}\n\nfunction resolveViewPointerEvents(\n  pointerEvents: ReactNativeViewProps['pointerEvents'] | undefined,\n): ReactNativeViewProps['pointerEvents'] | undefined {\n  if (pointerEvents === undefined) return undefined;\n  if (Platform.OS !== 'web') return pointerEvents;\n\n  if (pointerEvents === 'box-none' || pointerEvents === 'box-only') {\n    return pointerEvents;\n  }\n\n  return undefined;\n}\n\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 pointerEventsStyle = resolvePointerEventsStyle(pointerEvents);\n  const viewPointerEvents = resolveViewPointerEvents(pointerEvents);\n\n  return (\n    <View\n      accessible={accessible}\n      accessibilityLabel={accessibilityLabel}\n      accessibilityRole={accessibilityRole}\n      accessibilityState={accessibilityState}\n      pointerEvents={viewPointerEvents}\n      testID={testID}\n      style={[resolved, pointerEventsStyle, style]}\n    >\n      {children}\n    </View>\n  );\n}\n"]}
+{"version":3,"file":"Box.js","sourceRoot":"","sources":["../../src/layout/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAA0C,MAAM,cAAc,CAAC;AAE5E,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAsB,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAYjE,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, type ViewProps as ReactNativeViewProps } from 'react-native';\n\nimport { useResponsiveRuntime } from '../core/responsive';\nimport { resolvePointerEvents } from '../internal/resolvePointerEvents';\nimport { useTheme } from '../theme/ThemeContext';\nimport { type BoxStyleProps, resolveBoxStyles } from './helpers';\n\nexport interface BoxProps extends BoxStyleProps {\n  accessibilityLabel?: ReactNativeViewProps['accessibilityLabel'];\n  accessibilityRole?: ReactNativeViewProps['accessibilityRole'];\n  accessibilityState?: ReactNativeViewProps['accessibilityState'];\n  accessible?: ReactNativeViewProps['accessible'];\n  children?: React.ReactNode;\n  pointerEvents?: ReactNativeViewProps['pointerEvents'];\n  testID?: string;\n}\n\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/layout/Grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.js","sourceRoot":"","sources":["../../src/layout/Grid.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { View, type ViewStyle } from 'react-native';\n\nimport { resolveResponsive, type Responsive, useResponsiveRuntime } from '../core/responsive';\nimport { useTheme } from '../theme/ThemeContext';\nimport { Box, type BoxProps } from './Box';\nimport { resolveSpacing, type SpaceValue } from './helpers';\n\nexport interface GridProps extends Omit<BoxProps, 'children'> {\n  children?: React.ReactNode;\n  cols: Responsive<number>;\n  gap?: Responsive<SpaceValue>;\n  rowGap?: Responsive<SpaceValue>;\n  colGap?: Responsive<SpaceValue>;\n  minItemWidth?: Responsive<number>;\n}\n\nexport function Grid({\n  children,\n  cols,\n  gap = 0,\n  rowGap,\n  colGap,\n  minItemWidth,\n  ...props\n}: GridProps) {\n  const { theme } = useTheme();\n  const { breakpoint } = useResponsiveRuntime();\n\n  const activeCols = Math.max(1, Math.floor(resolveResponsive(cols, breakpoint) ?? 1));\n  const defaultGap = resolveResponsive(gap, breakpoint) ?? 0;\n  const activeRowGap = resolveResponsive(rowGap, breakpoint) ?? defaultGap;\n  const activeColGap = resolveResponsive(colGap, breakpoint) ?? defaultGap;\n  const rowSpacing = Number(resolveSpacing(theme, activeRowGap) ?? 0);\n  const colSpacing = Number(resolveSpacing(theme, activeColGap) ?? 0);\n  const activeMinItemWidth = resolveResponsive(minItemWidth, breakpoint);\n\n  const basisPercent = `${100 / activeCols}%`;\n  const nodes = React.Children.toArray(children);\n\n  return (\n    <Box {...props}>\n      <View\n        style={{\n          flexDirection: 'row',\n          flexWrap: 'wrap',\n          marginTop: -rowSpacing / 2,\n          marginLeft: -colSpacing / 2,\n          marginRight: -colSpacing / 2,\n        }}\n      >\n        {nodes.map((node, index) => {\n          const itemStyle: ViewStyle =\n            activeMinItemWidth !== undefined\n              ? {\n                  minWidth: activeMinItemWidth,\n                  flexBasis: activeMinItemWidth,\n                  flexGrow: 1,\n                }\n              : {\n                  width: basisPercent as ViewStyle['width'],\n                  flexBasis: basisPercent as ViewStyle['flexBasis'],\n                };\n\n          return (\n            <View\n              key={String(index)}\n              style={{\n                paddingTop: rowSpacing / 2,\n                paddingBottom: rowSpacing / 2,\n                paddingLeft: colSpacing / 2,\n                paddingRight: colSpacing / 2,\n                ...itemStyle,\n              }}\n            >\n              {node}\n            </View>\n          );\n        })}\n      </View>\n    </Box>\n  );\n}\n"]}
+{"version":3,"file":"Grid.js","sourceRoot":"","sources":["../../src/layout/Grid.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { View, type ViewStyle } from 'react-native';\n\nimport { resolveResponsive, type Responsive, useResponsiveRuntime } from '../core/responsive';\nimport { useTheme } from '../theme/ThemeContext';\nimport { Box, type BoxProps } from './Box';\nimport { resolveSpacing, type SpaceValue } from './helpers';\n\nexport interface GridProps extends Omit<BoxProps, 'children'> {\n  children?: React.ReactNode;\n  cols: Responsive<number>;\n  gap?: Responsive<SpaceValue>;\n  rowGap?: Responsive<SpaceValue>;\n  colGap?: Responsive<SpaceValue>;\n  minItemWidth?: Responsive<number>;\n}\n\nexport function Grid({\n  children,\n  cols,\n  gap = 0,\n  rowGap,\n  colGap,\n  minItemWidth,\n  ...props\n}: GridProps) {\n  const { theme } = useTheme();\n  const { breakpoint } = useResponsiveRuntime();\n\n  const activeCols = Math.max(1, Math.floor(resolveResponsive(cols, breakpoint) ?? 1));\n  const defaultGap = resolveResponsive(gap, breakpoint) ?? 0;\n  const activeRowGap = resolveResponsive(rowGap, breakpoint) ?? defaultGap;\n  const activeColGap = resolveResponsive(colGap, breakpoint) ?? defaultGap;\n  const rowSpacing = Number(resolveSpacing(theme, activeRowGap) ?? 0);\n  const colSpacing = Number(resolveSpacing(theme, activeColGap) ?? 0);\n  const activeMinItemWidth = resolveResponsive(minItemWidth, breakpoint);\n\n  const basisPercent: `${number}%` = `${100 / activeCols}%`;\n  const nodes = React.Children.toArray(children);\n\n  return (\n    <Box {...props}>\n      <View\n        style={{\n          flexDirection: 'row',\n          flexWrap: 'wrap',\n          marginTop: -rowSpacing / 2,\n          marginLeft: -colSpacing / 2,\n          marginRight: -colSpacing / 2,\n        }}\n      >\n        {nodes.map((node, index) => {\n          const itemStyle: ViewStyle =\n            activeMinItemWidth !== undefined\n              ? {\n                  minWidth: activeMinItemWidth,\n                  flexBasis: activeMinItemWidth,\n                  flexGrow: 1,\n                }\n              : {\n                  width: basisPercent,\n                  flexBasis: basisPercent,\n                };\n\n          return (\n            <View\n              key={String(index)}\n              style={{\n                paddingTop: rowSpacing / 2,\n                paddingBottom: rowSpacing / 2,\n                paddingLeft: colSpacing / 2,\n                paddingRight: colSpacing / 2,\n                ...itemStyle,\n              }}\n            >\n              {node}\n            </View>\n          );\n        })}\n      </View>\n    </Box>\n  );\n}\n"]}

package/dist/primitives/icon/Icon.d.ts

@@ -1,20 +1,13 @@
-import React from 'react';
 import { type StyleProp, type TextStyle } from 'react-native';
 import type { SurfaceTheme } from '../../theme/types';
-export type IconProvider = string;
-export interface IconProps {
-    name: string;
-    provider?: IconProvider;
+import { type IconSource } from './PortableIcon';
+export type { IconProvider, IconSource, IconVariant } from './PortableIcon';
+interface IconPresentationProps {
     size?: keyof SurfaceTheme['spacing'] | number;
     color?: keyof SurfaceTheme['colors'] | string;
     style?: StyleProp<TextStyle>;
     testID?: string;
 }
-export declare function Icon({ name, provider, size, color, style, testID, }: IconProps): React.ReactElement<{
-    color?: string;
-    name?: string;
-    size?: number;
-    style?: StyleProp<TextStyle>;
-    testID?: string;
-}, string | React.JSXElementConstructor<any>>;
+export type IconProps = IconSource & IconPresentationProps;
+export declare function Icon(props: IconProps): import("react").JSX.Element;
 //# sourceMappingURL=Icon.d.ts.map

package/dist/primitives/icon/Icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/primitives/icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAI9D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAGtD,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC;AAElC,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,YAAY,CAAC,SAAS,CAAC,GAAG,MAAM,CAAC;IAC9C,KAAK,CAAC,EAAE,MAAM,YAAY,CAAC,QAAQ,CAAC,GAAG,MAAM,CAAC;IAC9C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,QAAqB,EACrB,IAAU,EACV,KAAc,EACd,KAAK,EACL,MAAM,GACP,EAAE,SAAS;;;;;;8CAaX"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/primitives/icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAI9D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,EAAE,KAAK,UAAU,EAAgB,MAAM,gBAAgB,CAAC;AAE/D,YAAY,EAAE,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE5E,UAAU,qBAAqB;IAC7B,IAAI,CAAC,EAAE,MAAM,YAAY,CAAC,SAAS,CAAC,GAAG,MAAM,CAAC;IAC9C,KAAK,CAAC,EAAE,MAAM,YAAY,CAAC,QAAQ,CAAC,GAAG,MAAM,CAAC;IAC9C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,MAAM,SAAS,GAAG,UAAU,GAAG,qBAAqB,CAAC;AAE3D,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,+BAQpC"}

package/dist/primitives/icon/Icon.js

@@ -1,19 +1,13 @@
-import React from 'react';
 import {} from 'react-native';
 import { resolveToken } from '../../theme/resolveToken';
 import { useTheme } from '../../theme/ThemeContext';
-import { resolveExpoIconComponent } from './resolveExpoIconComponent';
-export function Icon({ name, provider = 'Ionicons', size = 'm', color = 'text', style, testID, }) {
+import { PortableIcon } from './PortableIcon';
+export function Icon(props) {
     const { theme } = useTheme();
-    const IconComponent = resolveExpoIconComponent(provider);
+    const size = props.size ?? 'm';
+    const color = props.color ?? 'text';
     const resolvedSize = typeof size === 'number' ? size : resolveToken(theme.spacing, size);
     const resolvedColor = resolveToken(theme.colors, color);
-    return React.createElement(IconComponent, {
-        color: resolvedColor,
-        name,
-        size: resolvedSize,
-        style,
-        testID,
-    });
+    return <PortableIcon {...props} color={resolvedColor} size={resolvedSize}/>;
 }
 //# sourceMappingURL=Icon.js.map

package/dist/primitives/icon/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../src/primitives/icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAkC,MAAM,cAAc,CAAC;AAE9D,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAEpD,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAatE,MAAM,UAAU,IAAI,CAAC,EACnB,IAAI,EACJ,QAAQ,GAAG,UAAU,EACrB,IAAI,GAAG,GAAG,EACV,KAAK,GAAG,MAAM,EACd,KAAK,EACL,MAAM,GACI;IACV,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,EAAE,CAAC;IAC7B,MAAM,aAAa,GAAG,wBAAwB,CAAC,QAAQ,CAAC,CAAC;IACzD,MAAM,YAAY,GAAG,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IACzF,MAAM,aAAa,GAAG,YAAY,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAExD,OAAO,KAAK,CAAC,aAAa,CAAC,aAAa,EAAE;QACxC,KAAK,EAAE,aAAa;QACpB,IAAI;QACJ,IAAI,EAAE,YAAY;QAClB,KAAK;QACL,MAAM;KACP,CAAC,CAAC;AACL,CAAC","sourcesContent":["import React from 'react';\nimport { type StyleProp, type TextStyle } from 'react-native';\n\nimport { resolveToken } from '../../theme/resolveToken';\nimport { useTheme } from '../../theme/ThemeContext';\nimport type { SurfaceTheme } from '../../theme/types';\nimport { resolveExpoIconComponent } from './resolveExpoIconComponent';\n\nexport type IconProvider = string;\n\nexport interface IconProps {\n  name: string;\n  provider?: IconProvider;\n  size?: keyof SurfaceTheme['spacing'] | number;\n  color?: keyof SurfaceTheme['colors'] | string;\n  style?: StyleProp<TextStyle>;\n  testID?: string;\n}\n\nexport function Icon({\n  name,\n  provider = 'Ionicons',\n  size = 'm',\n  color = 'text',\n  style,\n  testID,\n}: IconProps) {\n  const { theme } = useTheme();\n  const IconComponent = resolveExpoIconComponent(provider);\n  const resolvedSize = typeof size === 'number' ? size : resolveToken(theme.spacing, size);\n  const resolvedColor = resolveToken(theme.colors, color);\n\n  return React.createElement(IconComponent, {\n    color: resolvedColor,\n    name,\n    size: resolvedSize,\n    style,\n    testID,\n  });\n}\n"]}
+{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../src/primitives/icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkC,MAAM,cAAc,CAAC;AAE9D,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAEpD,OAAO,EAAmB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAa/D,MAAM,UAAU,IAAI,CAAC,KAAgB;IACnC,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,EAAE,CAAC;IAC7B,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,IAAI,GAAG,CAAC;IAC/B,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,MAAM,CAAC;IACpC,MAAM,YAAY,GAAG,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IACzF,MAAM,aAAa,GAAG,YAAY,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAExD,OAAO,CAAC,YAAY,CAAC,IAAI,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,CAAC,YAAY,CAAC,EAAG,CAAC;AAC/E,CAAC","sourcesContent":["import { type StyleProp, type TextStyle } from 'react-native';\n\nimport { resolveToken } from '../../theme/resolveToken';\nimport { useTheme } from '../../theme/ThemeContext';\nimport type { SurfaceTheme } from '../../theme/types';\nimport { type IconSource, PortableIcon } from './PortableIcon';\n\nexport type { IconProvider, IconSource, IconVariant } from './PortableIcon';\n\ninterface IconPresentationProps {\n  size?: keyof SurfaceTheme['spacing'] | number;\n  color?: keyof SurfaceTheme['colors'] | string;\n  style?: StyleProp<TextStyle>;\n  testID?: string;\n}\n\nexport type IconProps = IconSource & IconPresentationProps;\n\nexport function Icon(props: IconProps) {\n  const { theme } = useTheme();\n  const size = props.size ?? 'm';\n  const color = props.color ?? 'text';\n  const resolvedSize = typeof size === 'number' ? size : resolveToken(theme.spacing, size);\n  const resolvedColor = resolveToken(theme.colors, color);\n\n  return <PortableIcon {...props} color={resolvedColor} size={resolvedSize} />;\n}\n"]}

package/dist/primitives/icon/PortableIcon.d.ts

@@ -0,0 +1,51 @@
+import { type FontAwesomeIconName } from '@react-native-vector-icons/fontawesome/static';
+import { type FontAwesome5BrandIconName, type FontAwesome5RegularIconName, type FontAwesome5SolidIconName } from '@react-native-vector-icons/fontawesome5/static';
+import { type FontAwesome6BrandIconName, type FontAwesome6RegularIconName, type FontAwesome6SolidIconName } from '@react-native-vector-icons/fontawesome6/static';
+import { type IoniconsIconName } from '@react-native-vector-icons/ionicons/static';
+import React from 'react';
+import { type StyleProp, type TextStyle } from 'react-native';
+export declare const SUPPORTED_ICON_PROVIDERS: readonly ["Ionicons", "FontAwesome", "FontAwesome5", "FontAwesome6"];
+export type IconProvider = (typeof SUPPORTED_ICON_PROVIDERS)[number];
+export type IconVariant = 'regular' | 'solid' | 'brand';
+export type IconSource = {
+    name: IoniconsIconName;
+    provider?: 'Ionicons';
+    variant?: never;
+} | {
+    name: FontAwesomeIconName;
+    provider: 'FontAwesome';
+    variant?: never;
+} | {
+    name: FontAwesome5RegularIconName;
+    provider: 'FontAwesome5';
+    variant: 'regular';
+} | {
+    name: FontAwesome5SolidIconName;
+    provider: 'FontAwesome5';
+    variant: 'solid';
+} | {
+    name: FontAwesome5BrandIconName;
+    provider: 'FontAwesome5';
+    variant: 'brand';
+} | {
+    name: FontAwesome6RegularIconName;
+    provider: 'FontAwesome6';
+    variant: 'regular';
+} | {
+    name: FontAwesome6SolidIconName;
+    provider: 'FontAwesome6';
+    variant: 'solid';
+} | {
+    name: FontAwesome6BrandIconName;
+    provider: 'FontAwesome6';
+    variant: 'brand';
+};
+type PortableIconProps = IconSource & {
+    color: string;
+    size: number;
+    style?: StyleProp<TextStyle>;
+    testID?: string;
+};
+export declare function PortableIcon(props: PortableIconProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=PortableIcon.d.ts.map

package/dist/primitives/icon/PortableIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PortableIcon.d.ts","sourceRoot":"","sources":["../../../src/primitives/icon/PortableIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,mBAAmB,EACzB,MAAM,+CAA+C,CAAC;AACvD,OAAO,EAEL,KAAK,yBAAyB,EAC9B,KAAK,2BAA2B,EAChC,KAAK,yBAAyB,EAC/B,MAAM,gDAAgD,CAAC;AACxD,OAAO,EAEL,KAAK,yBAAyB,EAC9B,KAAK,2BAA2B,EAChC,KAAK,yBAAyB,EAC/B,MAAM,gDAAgD,CAAC;AACxD,OAAO,EAAY,KAAK,gBAAgB,EAAE,MAAM,4CAA4C,CAAC;AAC7F,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9D,eAAO,MAAM,wBAAwB,sEAK3B,CAAC;AAEX,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,wBAAwB,CAAC,CAAC,MAAM,CAAC,CAAC;AACrE,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;AAExD,MAAM,MAAM,UAAU,GAClB;IAAE,IAAI,EAAE,gBAAgB,CAAC;IAAC,QAAQ,CAAC,EAAE,UAAU,CAAC;IAAC,OAAO,CAAC,EAAE,KAAK,CAAA;CAAE,GAClE;IAAE,IAAI,EAAE,mBAAmB,CAAC;IAAC,QAAQ,EAAE,aAAa,CAAC;IAAC,OAAO,CAAC,EAAE,KAAK,CAAA;CAAE,GACvE;IAAE,IAAI,EAAE,2BAA2B,CAAC;IAAC,QAAQ,EAAE,cAAc,CAAC;IAAC,OAAO,EAAE,SAAS,CAAA;CAAE,GACnF;IAAE,IAAI,EAAE,yBAAyB,CAAC;IAAC,QAAQ,EAAE,cAAc,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,GAC/E;IAAE,IAAI,EAAE,yBAAyB,CAAC;IAAC,QAAQ,EAAE,cAAc,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,GAC/E;IAAE,IAAI,EAAE,2BAA2B,CAAC;IAAC,QAAQ,EAAE,cAAc,CAAC;IAAC,OAAO,EAAE,SAAS,CAAA;CAAE,GACnF;IAAE,IAAI,EAAE,yBAAyB,CAAC;IAAC,QAAQ,EAAE,cAAc,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,GAC/E;IAAE,IAAI,EAAE,yBAAyB,CAAC;IAAC,QAAQ,EAAE,cAAc,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,CAAC;AAEpF,KAAK,iBAAiB,GAAG,UAAU,GAAG;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AA4CF,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,qBAsBpD"}

package/dist/primitives/icon/PortableIcon.js

@@ -0,0 +1,64 @@
+import { FontAwesome, } from '@react-native-vector-icons/fontawesome/static';
+import { FontAwesome5, } from '@react-native-vector-icons/fontawesome5/static';
+import { FontAwesome6, } from '@react-native-vector-icons/fontawesome6/static';
+import { Ionicons } from '@react-native-vector-icons/ionicons/static';
+import React from 'react';
+import {} from 'react-native';
+export const SUPPORTED_ICON_PROVIDERS = [
+    'Ionicons',
+    'FontAwesome',
+    'FontAwesome5',
+    'FontAwesome6',
+];
+function assertNever(value, configuration) {
+    throw new Error(`Unsupported icon ${configuration}: ${String(value)}`);
+}
+function renderFontAwesome5(props, sharedProps) {
+    const { variant } = props;
+    switch (variant) {
+        case 'brand':
+            return <FontAwesome5 {...sharedProps} iconStyle="brand" name={props.name}/>;
+        case 'regular':
+            return <FontAwesome5 {...sharedProps} iconStyle="regular" name={props.name}/>;
+        case 'solid':
+            return <FontAwesome5 {...sharedProps} iconStyle="solid" name={props.name}/>;
+        default:
+            return assertNever(variant, 'FontAwesome5 variant');
+    }
+}
+function renderFontAwesome6(props, sharedProps) {
+    const { variant } = props;
+    switch (variant) {
+        case 'brand':
+            return <FontAwesome6 {...sharedProps} iconStyle="brand" name={props.name}/>;
+        case 'regular':
+            return <FontAwesome6 {...sharedProps} iconStyle="regular" name={props.name}/>;
+        case 'solid':
+            return <FontAwesome6 {...sharedProps} iconStyle="solid" name={props.name}/>;
+        default:
+            return assertNever(variant, 'FontAwesome6 variant');
+    }
+}
+export function PortableIcon(props) {
+    const { provider } = props;
+    const sharedProps = {
+        color: props.color,
+        size: props.size,
+        style: props.style,
+        testID: props.testID,
+    };
+    switch (provider) {
+        case undefined:
+        case 'Ionicons':
+            return <Ionicons {...sharedProps} name={props.name}/>;
+        case 'FontAwesome':
+            return <FontAwesome {...sharedProps} name={props.name}/>;
+        case 'FontAwesome5':
+            return renderFontAwesome5(props, sharedProps);
+        case 'FontAwesome6':
+            return renderFontAwesome6(props, sharedProps);
+        default:
+            return assertNever(provider, 'provider');
+    }
+}
+//# sourceMappingURL=PortableIcon.js.map

package/dist/primitives/icon/PortableIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PortableIcon.js","sourceRoot":"","sources":["../../../src/primitives/icon/PortableIcon.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FontAwesome,\n  type FontAwesomeIconName,\n} from '@react-native-vector-icons/fontawesome/static';\nimport {\n  FontAwesome5,\n  type FontAwesome5BrandIconName,\n  type FontAwesome5RegularIconName,\n  type FontAwesome5SolidIconName,\n} from '@react-native-vector-icons/fontawesome5/static';\nimport {\n  FontAwesome6,\n  type FontAwesome6BrandIconName,\n  type FontAwesome6RegularIconName,\n  type FontAwesome6SolidIconName,\n} from '@react-native-vector-icons/fontawesome6/static';\nimport { Ionicons, type IoniconsIconName } from '@react-native-vector-icons/ionicons/static';\nimport React from 'react';\nimport { type StyleProp, type TextStyle } from 'react-native';\n\nexport const SUPPORTED_ICON_PROVIDERS = [\n  'Ionicons',\n  'FontAwesome',\n  'FontAwesome5',\n  'FontAwesome6',\n] as const;\n\nexport type IconProvider = (typeof SUPPORTED_ICON_PROVIDERS)[number];\nexport type IconVariant = 'regular' | 'solid' | 'brand';\n\nexport type IconSource =\n  | { name: IoniconsIconName; provider?: 'Ionicons'; variant?: never }\n  | { name: FontAwesomeIconName; provider: 'FontAwesome'; variant?: never }\n  | { name: FontAwesome5RegularIconName; provider: 'FontAwesome5'; variant: 'regular' }\n  | { name: FontAwesome5SolidIconName; provider: 'FontAwesome5'; variant: 'solid' }\n  | { name: FontAwesome5BrandIconName; provider: 'FontAwesome5'; variant: 'brand' }\n  | { name: FontAwesome6RegularIconName; provider: 'FontAwesome6'; variant: 'regular' }\n  | { name: FontAwesome6SolidIconName; provider: 'FontAwesome6'; variant: 'solid' }\n  | { name: FontAwesome6BrandIconName; provider: 'FontAwesome6'; variant: 'brand' };\n\ntype PortableIconProps = IconSource & {\n  color: string;\n  size: number;\n  style?: StyleProp<TextStyle>;\n  testID?: string;\n};\n\ntype SharedIconProps = Pick<PortableIconProps, 'color' | 'size' | 'style' | 'testID'>;\n\nfunction assertNever(value: never, configuration: string): never {\n  throw new Error(`Unsupported icon ${configuration}: ${String(value)}`);\n}\n\nfunction renderFontAwesome5(\n  props: Extract<IconSource, { provider: 'FontAwesome5' }>,\n  sharedProps: SharedIconProps,\n) {\n  const { variant } = props;\n\n  switch (variant) {\n    case 'brand':\n      return <FontAwesome5 {...sharedProps} iconStyle=\"brand\" name={props.name} />;\n    case 'regular':\n      return <FontAwesome5 {...sharedProps} iconStyle=\"regular\" name={props.name} />;\n    case 'solid':\n      return <FontAwesome5 {...sharedProps} iconStyle=\"solid\" name={props.name} />;\n    default:\n      return assertNever(variant, 'FontAwesome5 variant');\n  }\n}\n\nfunction renderFontAwesome6(\n  props: Extract<IconSource, { provider: 'FontAwesome6' }>,\n  sharedProps: SharedIconProps,\n) {\n  const { variant } = props;\n\n  switch (variant) {\n    case 'brand':\n      return <FontAwesome6 {...sharedProps} iconStyle=\"brand\" name={props.name} />;\n    case 'regular':\n      return <FontAwesome6 {...sharedProps} iconStyle=\"regular\" name={props.name} />;\n    case 'solid':\n      return <FontAwesome6 {...sharedProps} iconStyle=\"solid\" name={props.name} />;\n    default:\n      return assertNever(variant, 'FontAwesome6 variant');\n  }\n}\n\nexport function PortableIcon(props: PortableIconProps) {\n  const { provider } = props;\n  const sharedProps = {\n    color: props.color,\n    size: props.size,\n    style: props.style,\n    testID: props.testID,\n  };\n\n  switch (provider) {\n    case undefined:\n    case 'Ionicons':\n      return <Ionicons {...sharedProps} name={props.name} />;\n    case 'FontAwesome':\n      return <FontAwesome {...sharedProps} name={props.name} />;\n    case 'FontAwesome5':\n      return renderFontAwesome5(props, sharedProps);\n    case 'FontAwesome6':\n      return renderFontAwesome6(props, sharedProps);\n    default:\n      return assertNever(provider, 'provider');\n  }\n}\n"]}

package/dist/primitives/icon/index.d.ts

@@ -1,3 +1,4 @@
-export type { IconProps, IconProvider } from './Icon';
+export type { IconProps, IconProvider, IconSource, IconVariant } from './Icon';
 export { Icon } from './Icon';
+export { SUPPORTED_ICON_PROVIDERS } from './PortableIcon';
 //# sourceMappingURL=index.d.ts.map

package/dist/primitives/icon/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/primitives/icon/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/primitives/icon/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAC/E,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,wBAAwB,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/primitives/icon/index.js

@@ -1,2 +1,3 @@
 export { Icon } from './Icon';
+export { SUPPORTED_ICON_PROVIDERS } from './PortableIcon';
 //# sourceMappingURL=index.js.map

package/dist/primitives/icon/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/primitives/icon/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC","sourcesContent":["export type { IconProps, IconProvider } from './Icon';\nexport { Icon } from './Icon';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/primitives/icon/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,wBAAwB,EAAE,MAAM,gBAAgB,CAAC","sourcesContent":["export type { IconProps, IconProvider, IconSource, IconVariant } from './Icon';\nexport { Icon } from './Icon';\nexport { SUPPORTED_ICON_PROVIDERS } from './PortableIcon';\n"]}

package/dist/primitives/image/Image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../src/primitives/image/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,wBAAgB,KAAK,CAAC,EACpB,MAAM,EACN,cAAc,EACd,GAAG,EACH,kBAAkB,EAClB,KAAK,EACL,MAAM,EACN,WAAW,EACX,GAAG,EACH,UAAU,EACV,MAAM,EACN,KAAK,EACL,MAAM,EACN,OAAO,GACR,EAAE,UAAU,4BAsCZ"}
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../src/primitives/image/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,wBAAgB,KAAK,CAAC,EACpB,MAAM,EACN,cAAc,EACd,GAAG,EACH,kBAAkB,EAClB,KAAK,EACL,MAAM,EACN,WAAW,EACX,GAAG,EACH,UAAU,EACV,MAAM,EACN,KAAK,EACL,MAAM,EACN,OAAO,GACR,EAAE,UAAU,4BAmCZ"}

package/dist/primitives/image/Image.js

@@ -4,11 +4,9 @@ import { useTheme } from '../../theme/ThemeContext';
 import { getSourceKey, normalizeSource, resolveAccessibilityLabel, resolveAlt, resolveImageStyle, resolveRenderedSource, resolveResizeMode, } from './resolveImageProps';
 export function Image({ source, fallbackSource, alt, accessibilityLabel, width, height, aspectRatio, fit, resizeMode, radius, style, testID, onError, }) {
     const { theme } = useTheme();
-    const [showFallback, setShowFallback] = React.useState(false);
     const primaryKey = React.useMemo(() => getSourceKey(source), [source]);
-    React.useEffect(() => {
-        setShowFallback(false);
-    }, [primaryKey]);
+    const [failedPrimaryKey, setFailedPrimaryKey] = React.useState(null);
+    const showFallback = primaryKey !== null && failedPrimaryKey === primaryKey;
     const normalizedPrimary = normalizeSource(source);
     const normalizedFallback = normalizeSource(fallbackSource);
     const resolvedSource = resolveRenderedSource(normalizedPrimary, normalizedFallback, showFallback);
@@ -21,7 +19,7 @@ export function Image({ source, fallbackSource, alt, accessibilityLabel, width,
     return (<RNImage accessibilityLabel={resolvedAccessibilityLabel} accessibilityRole="image" alt={resolvedAlt} onError={(event) => {
             onError?.(event);
             if (!showFallback && normalizedFallback) {
-                setShowFallback(true);
+                setFailedPrimaryKey(primaryKey);
             }
         }} resizeMode={resolvedResizeMode} source={resolvedSource} style={[resolvedStyle, style]} testID={testID}/>);
 }

package/dist/primitives/image/Image.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.js","sourceRoot":"","sources":["../../../src/primitives/image/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,IAAI,OAAO,EAAE,MAAM,cAAc,CAAC;AAEhD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EACL,YAAY,EACZ,eAAe,EACf,yBAAyB,EACzB,UAAU,EACV,iBAAiB,EACjB,qBAAqB,EACrB,iBAAiB,GAClB,MAAM,qBAAqB,CAAC;AAG7B,MAAM,UAAU,KAAK,CAAC,EACpB,MAAM,EACN,cAAc,EACd,GAAG,EACH,kBAAkB,EAClB,KAAK,EACL,MAAM,EACN,WAAW,EACX,GAAG,EACH,UAAU,EACV,MAAM,EACN,KAAK,EACL,MAAM,EACN,OAAO,GACI;IACX,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,EAAE,CAAC;IAC7B,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9D,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEvE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,eAAe,CAAC,KAAK,CAAC,CAAC;IACzB,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,MAAM,iBAAiB,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC;IAClD,MAAM,kBAAkB,GAAG,eAAe,CAAC,cAAc,CAAC,CAAC;IAC3D,MAAM,cAAc,GAAG,qBAAqB,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,YAAY,CAAC,CAAC;IAElG,IAAI,CAAC,cAAc;QAAE,OAAO,IAAI,CAAC;IAEjC,MAAM,kBAAkB,GAAG,iBAAiB,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC;IAC9D,MAAM,0BAA0B,GAAG,yBAAyB,CAAC,GAAG,EAAE,kBAAkB,CAAC,CAAC;IACtF,MAAM,WAAW,GAAG,UAAU,CAAC,GAAG,EAAE,kBAAkB,CAAC,CAAC;IACxD,MAAM,aAAa,GAAG,iBAAiB,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,CAAC,CAAC;IAEvF,OAAO,CACL,CAAC,OAAO,CACN,kBAAkB,CAAC,CAAC,0BAA0B,CAAC,CAC/C,iBAAiB,CAAC,OAAO,CACzB,GAAG,CAAC,CAAC,WAAW,CAAC,CACjB,OAAO,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE;YACjB,OAAO,EAAE,CAAC,KAAK,CAAC,CAAC;YAEjB,IAAI,CAAC,YAAY,IAAI,kBAAkB,EAAE,CAAC;gBACxC,eAAe,CAAC,IAAI,CAAC,CAAC;YACxB,CAAC;QACH,CAAC,CAAC,CACF,UAAU,CAAC,CAAC,kBAAkB,CAAC,CAC/B,MAAM,CAAC,CAAC,cAAc,CAAC,CACvB,KAAK,CAAC,CAAC,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC,CAC9B,MAAM,CAAC,CAAC,MAAM,CAAC,EACf,CACH,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\nimport { Image as RNImage } from 'react-native';\n\nimport { useTheme } from '../../theme/ThemeContext';\nimport {\n  getSourceKey,\n  normalizeSource,\n  resolveAccessibilityLabel,\n  resolveAlt,\n  resolveImageStyle,\n  resolveRenderedSource,\n  resolveResizeMode,\n} from './resolveImageProps';\nimport type { ImageProps } from './types';\n\nexport function Image({\n  source,\n  fallbackSource,\n  alt,\n  accessibilityLabel,\n  width,\n  height,\n  aspectRatio,\n  fit,\n  resizeMode,\n  radius,\n  style,\n  testID,\n  onError,\n}: ImageProps) {\n  const { theme } = useTheme();\n  const [showFallback, setShowFallback] = React.useState(false);\n  const primaryKey = React.useMemo(() => getSourceKey(source), [source]);\n\n  React.useEffect(() => {\n    setShowFallback(false);\n  }, [primaryKey]);\n\n  const normalizedPrimary = normalizeSource(source);\n  const normalizedFallback = normalizeSource(fallbackSource);\n  const resolvedSource = resolveRenderedSource(normalizedPrimary, normalizedFallback, showFallback);\n\n  if (!resolvedSource) return null;\n\n  const resolvedResizeMode = resolveResizeMode(fit, resizeMode);\n  const resolvedAccessibilityLabel = resolveAccessibilityLabel(alt, accessibilityLabel);\n  const resolvedAlt = resolveAlt(alt, accessibilityLabel);\n  const resolvedStyle = resolveImageStyle(theme, { width, height, aspectRatio, radius });\n\n  return (\n    <RNImage\n      accessibilityLabel={resolvedAccessibilityLabel}\n      accessibilityRole=\"image\"\n      alt={resolvedAlt}\n      onError={(event) => {\n        onError?.(event);\n\n        if (!showFallback && normalizedFallback) {\n          setShowFallback(true);\n        }\n      }}\n      resizeMode={resolvedResizeMode}\n      source={resolvedSource}\n      style={[resolvedStyle, style]}\n      testID={testID}\n    />\n  );\n}\n"]}
+{"version":3,"file":"Image.js","sourceRoot":"","sources":["../../../src/primitives/image/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,IAAI,OAAO,EAAE,MAAM,cAAc,CAAC;AAEhD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EACL,YAAY,EACZ,eAAe,EACf,yBAAyB,EACzB,UAAU,EACV,iBAAiB,EACjB,qBAAqB,EACrB,iBAAiB,GAClB,MAAM,qBAAqB,CAAC;AAG7B,MAAM,UAAU,KAAK,CAAC,EACpB,MAAM,EACN,cAAc,EACd,GAAG,EACH,kBAAkB,EAClB,KAAK,EACL,MAAM,EACN,WAAW,EACX,GAAG,EACH,UAAU,EACV,MAAM,EACN,KAAK,EACL,MAAM,EACN,OAAO,GACI;IACX,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,EAAE,CAAC;IAC7B,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IACvE,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAgB,IAAI,CAAC,CAAC;IACpF,MAAM,YAAY,GAAG,UAAU,KAAK,IAAI,IAAI,gBAAgB,KAAK,UAAU,CAAC;IAE5E,MAAM,iBAAiB,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC;IAClD,MAAM,kBAAkB,GAAG,eAAe,CAAC,cAAc,CAAC,CAAC;IAC3D,MAAM,cAAc,GAAG,qBAAqB,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,YAAY,CAAC,CAAC;IAElG,IAAI,CAAC,cAAc;QAAE,OAAO,IAAI,CAAC;IAEjC,MAAM,kBAAkB,GAAG,iBAAiB,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC;IAC9D,MAAM,0BAA0B,GAAG,yBAAyB,CAAC,GAAG,EAAE,kBAAkB,CAAC,CAAC;IACtF,MAAM,WAAW,GAAG,UAAU,CAAC,GAAG,EAAE,kBAAkB,CAAC,CAAC;IACxD,MAAM,aAAa,GAAG,iBAAiB,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,CAAC,CAAC;IAEvF,OAAO,CACL,CAAC,OAAO,CACN,kBAAkB,CAAC,CAAC,0BAA0B,CAAC,CAC/C,iBAAiB,CAAC,OAAO,CACzB,GAAG,CAAC,CAAC,WAAW,CAAC,CACjB,OAAO,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE;YACjB,OAAO,EAAE,CAAC,KAAK,CAAC,CAAC;YAEjB,IAAI,CAAC,YAAY,IAAI,kBAAkB,EAAE,CAAC;gBACxC,mBAAmB,CAAC,UAAU,CAAC,CAAC;YAClC,CAAC;QACH,CAAC,CAAC,CACF,UAAU,CAAC,CAAC,kBAAkB,CAAC,CAC/B,MAAM,CAAC,CAAC,cAAc,CAAC,CACvB,KAAK,CAAC,CAAC,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC,CAC9B,MAAM,CAAC,CAAC,MAAM,CAAC,EACf,CACH,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\nimport { Image as RNImage } from 'react-native';\n\nimport { useTheme } from '../../theme/ThemeContext';\nimport {\n  getSourceKey,\n  normalizeSource,\n  resolveAccessibilityLabel,\n  resolveAlt,\n  resolveImageStyle,\n  resolveRenderedSource,\n  resolveResizeMode,\n} from './resolveImageProps';\nimport type { ImageProps } from './types';\n\nexport function Image({\n  source,\n  fallbackSource,\n  alt,\n  accessibilityLabel,\n  width,\n  height,\n  aspectRatio,\n  fit,\n  resizeMode,\n  radius,\n  style,\n  testID,\n  onError,\n}: ImageProps) {\n  const { theme } = useTheme();\n  const primaryKey = React.useMemo(() => getSourceKey(source), [source]);\n  const [failedPrimaryKey, setFailedPrimaryKey] = React.useState<string | null>(null);\n  const showFallback = primaryKey !== null && failedPrimaryKey === primaryKey;\n\n  const normalizedPrimary = normalizeSource(source);\n  const normalizedFallback = normalizeSource(fallbackSource);\n  const resolvedSource = resolveRenderedSource(normalizedPrimary, normalizedFallback, showFallback);\n\n  if (!resolvedSource) return null;\n\n  const resolvedResizeMode = resolveResizeMode(fit, resizeMode);\n  const resolvedAccessibilityLabel = resolveAccessibilityLabel(alt, accessibilityLabel);\n  const resolvedAlt = resolveAlt(alt, accessibilityLabel);\n  const resolvedStyle = resolveImageStyle(theme, { width, height, aspectRatio, radius });\n\n  return (\n    <RNImage\n      accessibilityLabel={resolvedAccessibilityLabel}\n      accessibilityRole=\"image\"\n      alt={resolvedAlt}\n      onError={(event) => {\n        onError?.(event);\n\n        if (!showFallback && normalizedFallback) {\n          setFailedPrimaryKey(primaryKey);\n        }\n      }}\n      resizeMode={resolvedResizeMode}\n      source={resolvedSource}\n      style={[resolvedStyle, style]}\n      testID={testID}\n    />\n  );\n}\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ankhorage/surface",
   "type": "module",
-  "version": "2.2.1",
+  "version": "3.0.1",
   "description": "Stable UI foundation for React Native and React Native Web.",
   "homepage": "https://github.com/ankhorage/surface#readme",
   "bugs": {
@@ -27,23 +27,18 @@
     "components"
   ],
   "peerDependencies": {
-    "@expo/vector-icons": ">=14.0.0",
-    "expo-font": "^55.0.6",
-    "react": ">=18.2.0",
-    "react-native": ">=0.72.0",
-    "react-native-safe-area-context": "^5.0.0"
-  },
-  "peerDependenciesMeta": {
-    "@expo/vector-icons": {
-      "optional": true
-    },
-    "expo-font": {
-      "optional": true
-    }
+    "@react-native-vector-icons/fontawesome": "^13.1.3",
+    "@react-native-vector-icons/fontawesome5": "^13.1.3",
+    "@react-native-vector-icons/fontawesome6": "^13.1.3",
+    "@react-native-vector-icons/ionicons": "^13.1.3",
+    "react": "19.2.3",
+    "react-native": "0.86.x",
+    "react-native-safe-area-context": "~5.7.0",
+    "react-native-web": "~0.21.0"
   },
   "dependencies": {
     "@ankhorage/color-theory": "^0.0.8",
-    "@ankhorage/contracts": "^7.2.0"
+    "@ankhorage/contracts": "^8.0.0"
   },
   "files": [
     "dist",
@@ -66,10 +61,10 @@
     "access": "public"
   },
   "scripts": {
-    "build": "rm -rf dist tsconfig.tsbuildinfo && bun x tsc -p tsconfig.json",
+    "build": "rm -rf dist tsconfig.tsbuildinfo tsconfig.build.tsbuildinfo && bun x tsc -p tsconfig.build.json",
     "changeset": "changeset",
     "changeset:status": "changeset status --since=origin/main",
-    "docs": "paradox",
+    "docs": "paradox && ankhorage-prettier --write README.md paradox",
     "knip": "ankhorage-knip",
     "lint": "ankhorage-eslint . --max-warnings=0",
     "lint:fix": "ankhorage-eslint . --fix --max-warnings=0",
@@ -81,17 +76,25 @@
     "version-packages": "changeset version"
   },
   "devDependencies": {
-    "@ankhorage/devtools": "^1.0.6",
+    "@ankhorage/devtools": "^1.6.0",
     "@ankhorage/paradox": "^0.1.21",
+    "@react-native-vector-icons/fontawesome": "^13.1.3",
+    "@react-native-vector-icons/fontawesome5": "^13.1.3",
+    "@react-native-vector-icons/fontawesome6": "^13.1.3",
+    "@react-native-vector-icons/ionicons": "^13.1.3",
     "@changesets/cli": "^2.31.0",
-    "@expo/vector-icons": "^15.1.1",
-    "@types/bun": "^1.3.13",
-    "@types/node": "^25.6.0",
-    "@types/react": "^19.2.14",
-    "react": "19.1.0",
-    "react-native": "0.81.5",
-    "react-native-safe-area-context": "^5.0.0",
-    "typescript": "^5.9.3"
+    "@types/bun": "^1.3.14",
+    "@types/node": "^24.13.3",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "@types/react-native-web": "^0.19.2",
+    "happy-dom": "^20.11.6",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "react-native": "0.86.3",
+    "react-native-safe-area-context": "~5.7.0",
+    "react-native-web": "~0.21.0",
+    "typescript": "~6.0.3"
   },
-  "packageManager": "bun@1.3.13"
+  "packageManager": "bun@1.3.14"
 }

package/src/components/action-sheet/ActionSheet.tsx

@@ -3,6 +3,7 @@ import { Pressable, View } from 'react-native';
 
 import { FocusScope } from '../../internal/focus/FocusScope';
 import { Portal } from '../../internal/overlay/Portal';
+import { resolvePointerEvents } from '../../internal/resolvePointerEvents';
 import { resolveOverlayAnimation } from '../../internal/resolvers';
 import { Box, Stack, Surface } from '../../layout';
 import { Text } from '../../primitives/text';
@@ -10,6 +11,8 @@ import { useTheme } from '../../theme/ThemeContext';
 import { ActionSheetItem } from './ActionSheetItem';
 import type { ActionSheetProps } from './types';
 
+const boxNonePointerEvents = resolvePointerEvents('box-none');
+
 export function ActionSheet({
   visible,
   onDismiss,
@@ -32,14 +35,17 @@ export function ActionSheet({
   return (
     <Portal layer="modal" visible={visible}>
       <View
-        pointerEvents="box-none"
-        style={{
-          bottom: 0,
-          left: 0,
-          position: 'absolute',
-          right: 0,
-          top: 0,
-        }}
+        {...boxNonePointerEvents.props}
+        style={[
+          boxNonePointerEvents.style,
+          {
+            bottom: 0,
+            left: 0,
+            position: 'absolute',
+            right: 0,
+            top: 0,
+          },
+        ]}
       >
         <Pressable
           onPress={passive ? undefined : closeOnBackdrop ? onDismiss : undefined}

package/src/components/button/Button.tsx

@@ -31,11 +31,9 @@ export function Button({
       {...props}
       disabled={disabled || loading}
       onPress={onPress}
-      style={[
-        {
-          alignSelf: fullWidth ? 'stretch' : 'flex-start',
-        },
-      ]}
+      style={{
+        alignSelf: fullWidth ? 'stretch' : 'flex-start',
+      }}
       testID={testID}
     >
       {(state) => {
@@ -74,12 +72,7 @@ export function Button({
               <>
                 {leadingIcon ? (
                   <View style={{ marginRight: theme.spacing.s }}>
-                    <Icon
-                      color={colors.contentColor}
-                      name={leadingIcon.name}
-                      provider={leadingIcon.provider}
-                      size={iconSize}
-                    />
+                    <Icon {...leadingIcon} color={colors.contentColor} size={iconSize} />
                   </View>
                 ) : null}
                 <Text
@@ -92,12 +85,7 @@ export function Button({
                 </Text>
                 {trailingIcon ? (
                   <View style={{ marginLeft: theme.spacing.s }}>
-                    <Icon
-                      color={colors.contentColor}
-                      name={trailingIcon.name}
-                      provider={trailingIcon.provider}
-                      size={iconSize}
-                    />
+                    <Icon {...trailingIcon} color={colors.contentColor} size={iconSize} />
                   </View>
                 ) : null}
               </>

package/src/components/button/types.ts

@@ -3,13 +3,10 @@ import type React from 'react';
 import type { ControlSize } from '../../internal/resolvers/resolveControlSize';
 import type { ButtonVariant } from '../../internal/resolvers/resolveInteractiveColors';
 import type { ButtonBaseProps } from '../../primitives/button-base';
-import type { IconProps } from '../../primitives/icon';
+import type { IconSource } from '../../primitives/icon';
 import type { SurfaceColor } from '../../surfaceColor';
 
-export interface ButtonIconSpec {
-  name: IconProps['name'];
-  provider?: IconProps['provider'];
-}
+export type ButtonIconSpec = IconSource;
 
 export interface ButtonProps extends Omit<
   ButtonBaseProps,

package/src/components/drawer/Drawer.tsx

@@ -3,11 +3,14 @@ import { Pressable, View } from 'react-native';
 
 import { FocusScope } from '../../internal/focus/FocusScope';
 import { Portal } from '../../internal/overlay/Portal';
+import { resolvePointerEvents } from '../../internal/resolvePointerEvents';
 import { resolveOverlayAnimation } from '../../internal/resolvers';
 import { Box, Surface } from '../../layout';
 import { useTheme } from '../../theme/ThemeContext';
 import type { DrawerProps } from './types';
 
+const boxNonePointerEvents = resolvePointerEvents('box-none');
+
 export function Drawer({
   visible,
   onDismiss,
@@ -28,14 +31,17 @@ export function Drawer({
   return (
     <Portal layer="drawer" visible={visible}>
       <View
-        pointerEvents="box-none"
-        style={{
-          bottom: 0,
-          left: 0,
-          position: 'absolute',
-          right: 0,
-          top: 0,
-        }}
+        {...boxNonePointerEvents.props}
+        style={[
+          boxNonePointerEvents.style,
+          {
+            bottom: 0,
+            left: 0,
+            position: 'absolute',
+            right: 0,
+            top: 0,
+          },
+        ]}
       >
         <Pressable
           onPress={passive ? undefined : closeOnBackdrop ? onDismiss : undefined}