@coinbase/cds-mobile 8.66.2 → 9.0.0-rc.2

package/esm/examples/ExampleScreen.js

@@ -28,7 +28,7 @@ export const Example = _ref => {
   } = useContext(ExampleContext);
 
   // Register exactly once during first render
-  const exampleNumberRef = useRef();
+  const exampleNumberRef = useRef(undefined);
   if (exampleNumberRef.current === undefined) {
     exampleNumberRef.current = registerExample();
   }

package/esm/gradients/LinearGradient.js

@@ -17,7 +17,6 @@ export function LinearGradient(_ref) {
     end,
     stops = defaultStops,
     colors,
-    isBelowChildren = true,
     elevated,
     angle = 180,
     style,
@@ -57,7 +56,7 @@ export function LinearGradient(_ref) {
       })
     }, "GrandientSvgContainer");
   }, [colors, start, end, angle, stops]);
-  const items = isBelowChildren || !elevated ? [svg, children] : [children, svg];
+  const items = !elevated ? [svg, children] : [children, svg];
   return /*#__PURE__*/_jsx(View, {
     pointerEvents: pointerEvents,
     style: style,

package/esm/gradients/__stories__/LinearGradient.stories.js

@@ -44,20 +44,6 @@ const LinearGradientScreen = () => {
           children: "Horizontal angle example"
         })
       })]
-    }), /*#__PURE__*/_jsxs(Example, {
-      inline: true,
-      title: "As overlay with isBelowChildren set to false",
-      children: [/*#__PURE__*/_jsx(LinearGradient, {
-        colors: [transparent, bg],
-        isBelowChildren: false,
-        children: /*#__PURE__*/_jsxs(Text, {
-          font: "body",
-          children: [loremIpsum, "..."]
-        })
-      }), /*#__PURE__*/_jsx(Text, {
-        font: "label1",
-        children: "More"
-      })]
     }), /*#__PURE__*/_jsxs(Example, {
       inline: true,
       title: "As overlay with elevated prop",

package/esm/hooks/useDimensions.js

@@ -1,5 +1,5 @@
 import { useWindowDimensions } from 'react-native';
-import { useStatusBarHeight } from './useStatusBarHeight';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 // The bottom Navigation bar height needs the be accounted for but could not find a lib to help with this.
 export const IOS_BOTTOM_NAV_BAR_HEIGHT = 50;
@@ -10,7 +10,9 @@ export function useDimensions() {
     height: screenHeight,
     width: screenWidth
   } = useWindowDimensions();
-  const statusBarHeight = useStatusBarHeight();
+  const {
+    top: statusBarHeight
+  } = useSafeAreaInsets();
   return {
     screenHeight,
     screenWidth,

package/esm/hooks/useDotPinStyles.js

@@ -1,3 +1,28 @@
+/** Valid keys for accessing pin position offsets. */
+
+/**
+ * Calculates positioning offsets for pinning a dot badge to the edges of its parent element.
+ *
+ * Returns transform offsets that position the dot so it overlaps the edge by half its size.
+ * Used by DotCount, DotSymbol, and DotStatusColor to position badges at corners like "top-end".
+ *
+ * @param childrenSize - Measured dimensions of the parent/host element
+ * @param dotSize - Dimensions of the dot badge (number for uniform size, or LayoutRectangle)
+ * @param overlap - When 'circular', pulls offsets inward to better align with circular parents (e.g., avatars)
+ * @returns Object with edge offsets { end, start, bottom, top }, or null if dimensions unavailable
+ *
+ * @example
+ * ```tsx
+ * const transforms = useDotPinStyles(childrenSize, dotSize, overlap);
+ * // For pin="top-end", use:
+ * const style = {
+ *   transform: [
+ *     { translateX: transforms.end },
+ *     { translateY: transforms.top }
+ *   ]
+ * };
+ * ```
+ */
 export const useDotPinStyles = function (childrenSize, dotSize, overlap) {
   if (childrenSize === void 0) {
     childrenSize = null;

package/esm/hooks/useHasNotch.js

@@ -1,9 +1,13 @@
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+/**
+ * @deprecated This logic is seriously outdated. The last iPhone version to have a 20px status bar was iPhone 8. Most modern iOS devices no longer have a "notch". This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const useHasNotch = () => {
   const {
     top
   } = useSafeAreaInsets();
-  // we choose to hide the statusbar on iOS for devices with a notch, which
-  // has a top inset of more than 20.
+  // older iphones without a notch (or island for current phones) have a status bar of 20px
   return top > 20;
 };

package/esm/hooks/useScrollTo.js

@@ -1,7 +1,7 @@
 import { useCallback, useRef } from 'react';
 import { useMergeRefs } from '@coinbase/cds-common/hooks/useMergeRefs';
 export const useScrollTo = ref => {
-  const internalRef = useRef();
+  const internalRef = useRef(undefined);
   const scrollRef = useMergeRefs(ref, internalRef);
   const scrollTo = useCallback(_ref => {
     var _internalRef$current;

package/esm/hooks/useStatusBarHeight.js

@@ -1,11 +1,9 @@
-import { useEffect, useState } from 'react';
-import { NativeEventEmitter, NativeModules, Platform, StatusBar } from 'react-native';
-const {
-  StatusBarManager
-} = NativeModules;
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
 /**
  * @deprecated Use `useSafeAreaInsets().top` from `react-native-safe-area-context` instead. This will be removed in a future major release.
  * @deprecationExpectedRemoval v9
+ *
  * This approach is recommended by Expo and provides more reliable values across platforms.
  * @see https://docs.expo.dev/versions/latest/sdk/safe-area-context/
  *
@@ -19,29 +17,8 @@ const {
  * const statusBarHeight = insets.top;
  */
 export const useStatusBarHeight = () => {
-  const [statusBarHeight, setStatusBarHeight] = useState();
-  useEffect(() => {
-    if (Platform.OS === 'ios' && StatusBarManager !== undefined) {
-      const statusBarManager = StatusBarManager;
-      const emitter = new NativeEventEmitter(statusBarManager);
-      statusBarManager.getHeight(_ref => {
-        let {
-          height
-        } = _ref;
-        return setStatusBarHeight(height);
-      });
-      const subscription = emitter.addListener('statusBarFrameWillChange', _ref2 => {
-        let {
-          frame: {
-            height
-          }
-        } = _ref2;
-        setStatusBarHeight(height);
-      });
-      return () => subscription.remove();
-    }
-    setStatusBarHeight(StatusBar.currentHeight);
-    return () => {};
-  }, []);
-  return statusBarHeight;
+  const {
+    top
+  } = useSafeAreaInsets();
+  return top;
 };

package/esm/icons/Icon.js

@@ -79,7 +79,9 @@ export const Icon = /*#__PURE__*/memo(_props => {
       accessibilityLabel: accessibilityLabel,
       accessibilityRole: "image",
       accessible: !!accessibilityLabel,
-      allowFontScaling: false,
+      allowFontScaling: false
+      // TODO https://linear.app/coinbase/issue/CDS-1518/audit-potentially-harmful-reactnative-animated-pattern
+      ,
       style: iconStyle,
       children: glyph
     })

package/esm/icons/TextIcon.js

@@ -30,7 +30,9 @@ export const TextIcon = /*#__PURE__*/memo(function TextIcon(_ref) {
     fontFamily: 'CoinbaseIcons',
     fontSize: iconSize,
     color: iconColor
-  }, style], [style, iconColor, iconSize]);
+  }, style
+  // TODO https://linear.app/coinbase/issue/CDS-1518/audit-potentially-harmful-reactnative-animated-pattern
+  ], [style, iconColor, iconSize]);
   const iconName = name + "-" + sourceSize + "-" + (active ? 'active' : 'inactive');
   const glyph = glyphMap[iconName];
   if (glyph === undefined) {

package/esm/jest.d.js

@@ -1,3 +1,12 @@
 /// <reference types='react-native-gesture-handler/jestSetup' />
-/// <reference types='react-native-accessibility-engine' />
-/// <reference types='@testing-library/jest-native/extend-expect' />
+
+/**
+ * Custom accessibility matcher type declaration.
+ * Replaces the react-native-accessibility-engine types.
+ */
+
+// Implicit Jest global `expect`.
+
+// Explicit `@jest/globals` `expect` matchers.
+
+export {};

package/esm/layout/Box.js

@@ -239,12 +239,16 @@ export const Box = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) => {
   }, theme), elevation ? getElevationStyles(elevation, theme, background) : undefined, pin && pinStyles[pin], dangerouslySetBackground ? {
     backgroundColor: dangerouslySetBackground
   } : undefined, style], [display, position, overflow, zIndex, gap, columnGap, rowGap, justifyContent, alignContent, alignItems, alignSelf, flexDirection, flexWrap, color, background, borderColor, borderWidth, borderRadius, borderTopLeftRadius, borderTopRightRadius, borderBottomLeftRadius, borderBottomRightRadius, borderTopWidth, borderEndWidth, borderBottomWidth, borderStartWidth, elevation, fontFamily, fontSize, fontWeight, lineHeight, textAlign, textDecorationStyle, textDecorationLine, textTransform, padding, paddingX, paddingY, paddingTop, paddingBottom, paddingStart, paddingEnd, margin, marginX, marginY, marginTop, marginBottom, marginStart, marginEnd, userSelect, width, height, minWidth, minHeight, maxWidth, maxHeight, aspectRatio, top, bottom, left, right, transform, flexBasis, flexShrink, flexGrow, opacity, dangerouslySetBackground, pin, bordered, borderedHorizontal, borderedVertical, borderedStart, borderedEnd, borderedTop, borderedBottom, theme, style]);
-  return /*#__PURE__*/_jsx(Component, _extends({
-    ref: ref,
-    style: styles,
-    testID: testID
-  }, props, {
-    children: children
-  }));
+  return (
+    /*#__PURE__*/
+    // TODO https://linear.app/coinbase/issue/CDS-1518/audit-potentially-harmful-reactnative-animated-pattern
+    _jsx(Component, _extends({
+      ref: ref,
+      style: styles,
+      testID: testID
+    }, props, {
+      children: children
+    }))
+  );
 }));
 Box.displayName = 'Box';

package/esm/layout/Spacer.js

@@ -1,7 +1,7 @@
-const _excluded = ["flexGrow", "flexShrink", "flexBasis", "horizontal", "vertical", "maxHorizontal", "maxVertical", "minHorizontal", "minVertical", "animated"];
+const _excluded = ["flexGrow", "flexShrink", "flexBasis", "horizontal", "vertical", "maxHorizontal", "maxVertical", "minHorizontal", "minVertical", "animated", "style"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React, { memo } from 'react';
+import React, { memo, useMemo } from 'react';
 import { Animated, View } from 'react-native';
 import { useTheme } from '../hooks/useTheme';
 import { getSpacerStyle } from '../utils/getSpacerStyle';
@@ -21,24 +21,26 @@ export const Spacer = /*#__PURE__*/memo(function Spacer(_ref) {
       maxVertical,
       minHorizontal,
       minVertical,
-      animated
+      animated,
+      style
     } = _ref,
     viewProps = _objectWithoutPropertiesLoose(_ref, _excluded);
   const theme = useTheme();
   const Component = animated ? Animated.View : View;
-  return /*#__PURE__*/_jsx(Component, _extends({}, viewProps, {
+  const styles = useMemo(() => [getSpacerStyle({
+    flexGrow,
+    flexShrink,
+    flexBasis: flexBasis,
+    horizontal,
+    vertical,
+    maxHorizontal,
+    maxVertical,
+    minHorizontal,
+    minVertical,
+    spacingScaleValues: theme.space
+  }), style], [flexGrow, flexShrink, flexBasis, horizontal, vertical, maxHorizontal, maxVertical, minHorizontal, minVertical, theme.space, style]);
+  return /*#__PURE__*/_jsx(Component, _extends({
     accessibilityRole: "none",
-    style: getSpacerStyle({
-      flexGrow,
-      flexShrink,
-      flexBasis: flexBasis,
-      horizontal,
-      vertical,
-      maxHorizontal,
-      maxVertical,
-      minHorizontal,
-      minVertical,
-      spacingScaleValues: theme.space
-    })
-  }));
+    style: styles
+  }, viewProps));
 });

package/esm/media/Avatar.js

@@ -3,6 +3,8 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { memo, useMemo } from 'react';
 import { StyleSheet } from 'react-native';
+import { ClipPath, Defs, Path, Rect, Svg } from 'react-native-svg';
+import { hexagonShapePath } from '@coinbase/cds-common/svg/shape';
 import { colorSchemeMap } from '@coinbase/cds-common/tokens/avatar';
 import { getAccessibleColor } from '@coinbase/cds-common/utils/getAccessibleColor';
 import { useComponentConfig } from '../hooks/useComponentConfig';
@@ -11,9 +13,10 @@ import { Box } from '../layout/Box';
 import { Text } from '../typography/Text';
 import { RemoteImage } from './RemoteImage';
 import { shapeStyles } from './RemoteImageGroup';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const smallAvatarSize = 44;
 export const coloredFallbackTestID = 'cds-avatar-colored-fallback';
+const avatarHexagonClipPathId = 'cds-avatar-hexagon-fallback-clip-path';
 export const fallbackImageSrc = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2NjIpLCBxdWFsaXR5ID0gOTAK/9sAQwADAgIDAgIDAwMDBAMDBAUIBQUEBAUKBwcGCAwKDAwLCgsLDQ4SEA0OEQ4LCxAWEBETFBUVFQwPFxgWFBgSFBUU/9sAQwEDBAQFBAUJBQUJFA0LDRQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQU/8AAEQgAOAA4AwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8A+t80Zo4o4oAM0ZrsPBvw7m8Sxi7uZDa2GcKwHzyeu30HvXdf8Kp0Dytnlz7v+ennHP8Ah+lAHiuaM12XjL4dTeG4jd2sjXViDhiR88f1x1HvXG8UAGaKOKKADI9Kkt4vtFxFEOC7Bc/U4qPJ9KVXZGDLwwOQaAPpS0tY7G1ht4VCRRKEVcdABipc1meG9eh8RaRBeRMNzACRB1R+4/z2rU/OgCK5t47y3lgmUPFKpR1I6gjBr5uu4fst1NCefLdkz64OK+g/EWuQ+HtJnvJmHyjCIerv2Ar55klaWRnblmJJPqaAG5HpRRk+lFABzVnTtOutWvY7W0iMs8hwqj+Z9BVbB9a9o+GXhlNI0VL2VR9rvFD5PVY/4R+PX8vSgCfwX4EXwsDNJdSTXTrh1RisQ/Dv9T+QrrP89aT8qPyoA5Txr4FHilRNHdSQ3Ua4RHYtEfw7fUfrXjOo6dc6Tey2t3EYp4zgqf5j1FfSP5VxvxN8Mpq+jPfRKPtlmpfI6tH/ABD8Ov5+tAHi/NFGDRQBY060+3aja22f9dKsf5kD+tfSKIsaKigKqjAAHAFFFAC/j+lL+P6UUUAH4/pTXRZEZGG5WGCCOooooA+btRtPsOoXVtn/AFMrR/kSKKKKAP/Z';
 export const Avatar = /*#__PURE__*/memo(_props => {
   const mergedProps = useComponentConfig('Avatar', _props);
@@ -54,8 +57,10 @@ export const Avatar = /*#__PURE__*/memo(_props => {
     if (isLargestSize || isCustomSize && !isCustomSizeAndSmall) {
       return /*#__PURE__*/_jsx(Text, {
         align: "center",
-        dangerouslySetColor: fallbackTextColor,
         font: "title2",
+        style: {
+          color: fallbackTextColor
+        },
         textTransform: "uppercase",
         children: placeholderLetter
       });
@@ -63,34 +68,68 @@ export const Avatar = /*#__PURE__*/memo(_props => {
     if (shouldUseSmallFont) {
       return /*#__PURE__*/_jsx(Text, {
         align: "center",
-        dangerouslySetColor: fallbackTextColor,
         font: "caption",
+        style: {
+          color: fallbackTextColor
+        },
         textTransform: "uppercase",
         children: placeholderLetter
       });
     }
     return /*#__PURE__*/_jsx(Text, {
       align: "center",
-      dangerouslySetColor: fallbackTextColor,
       font: "body",
+      style: {
+        color: fallbackTextColor
+      },
       textTransform: "uppercase",
       children: placeholderLetter
     });
   }, [isLargestSize, isCustomSize, isCustomSizeAndSmall, fallbackTextColor, placeholderLetter, shouldUseSmallFont]);
   const coloredFallback = useMemo(() => /*#__PURE__*/_jsx(Box, {
     alignItems: "center",
-    dangerouslySetBackground: colorSchemeRgb,
     height: "100%",
     justifyContent: "center",
-    style: shapeStyle,
+    style: [shapeStyle, {
+      backgroundColor: colorSchemeRgb
+    }],
     testID: coloredFallbackTestID,
     width: "100%",
     children: avatarText
   }), [avatarText, shapeStyle, colorSchemeRgb]);
+  const hexagonColoredFallback = useMemo(() => /*#__PURE__*/_jsxs(Box, {
+    alignItems: "center",
+    height: "100%",
+    justifyContent: "center",
+    testID: coloredFallbackTestID,
+    width: "100%",
+    children: [/*#__PURE__*/_jsxs(Svg, {
+      height: "100%",
+      viewBox: "0 0 16 16",
+      width: "100%",
+      children: [/*#__PURE__*/_jsx(Defs, {
+        children: /*#__PURE__*/_jsx(ClipPath, {
+          id: avatarHexagonClipPathId,
+          children: /*#__PURE__*/_jsx(Path, {
+            d: hexagonShapePath
+          })
+        })
+      }), /*#__PURE__*/_jsx(Rect, {
+        clipPath: "url(#" + avatarHexagonClipPathId + ")",
+        fill: colorSchemeRgb,
+        height: 16,
+        width: 16,
+        x: 0,
+        y: 0
+      })]
+    }), /*#__PURE__*/_jsx(Box, {
+      style: styles.hexagonFallbackLabel,
+      children: avatarText
+    })]
+  }), [avatarText, colorSchemeRgb]);
   return /*#__PURE__*/_jsx(Box, _extends({
     accessibilityLabel: accessibilityLabel,
     borderColor: borderColor,
-    dangerouslySetBackground: imgSrc,
     flexGrow: 0,
     flexShrink: 0,
     height: computedSize,
@@ -112,7 +151,7 @@ export const Avatar = /*#__PURE__*/memo(_props => {
         },
         testID: (testID != null ? testID : '') + "-image",
         width: computedSize
-      }) : coloredFallback
+      }) : shape === 'hexagon' ? hexagonColoredFallback : coloredFallback
     })
   }));
 });
@@ -128,5 +167,14 @@ const styles = StyleSheet.create({
     top: 0,
     alignItems: 'center',
     justifyContent: 'center'
+  },
+  hexagonFallbackLabel: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    alignItems: 'center',
+    justifyContent: 'center'
   }
 });

package/esm/media/Carousel/Carousel.js

@@ -118,7 +118,7 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forward
       children: child
     }, "carousel-item-" + key);
   }), [itemsArray, getDismissHandler, gap, updateLayoutMap]);
-  return /*#__PURE__*/_jsx(Animated.ScrollView, _extends({}, otherProps, {
+  return /*#__PURE__*/_jsx(Animated.ScrollView, _extends({
     ref: scrollRef,
     horizontal: true,
     contentContainerStyle: styles.scrollViewContainer,
@@ -127,7 +127,8 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forward
     showsHorizontalScrollIndicator: false,
     snapToOffsets: snapPoints,
     style: styles.carousel,
-    testID: testID,
+    testID: testID
+  }, otherProps, {
     children: content
   }));
 }));

package/esm/media/RemoteImage.js

@@ -6,6 +6,7 @@ import React, { memo, useMemo } from 'react';
 import { Image } from 'react-native';
 import { ClipPath, Defs, Image as SvgImage, Path, Svg, SvgXml } from 'react-native-svg';
 import { SvgCssUri } from 'react-native-svg/css';
+import { hexagonShapePath } from '@coinbase/cds-common/svg/shape';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -39,13 +40,14 @@ const HexagonClipPath = _ref => {
       image
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  return /*#__PURE__*/_jsxs(Svg, _extends({}, props, {
-    viewBox: "0 0 16 16",
+  return /*#__PURE__*/_jsxs(Svg, _extends({
+    viewBox: "0 0 16 16"
+  }, props, {
     children: [/*#__PURE__*/_jsx(Defs, {
       children: /*#__PURE__*/_jsx(ClipPath, {
         id: "hex-hw-shapeclip-clipconfig",
         children: /*#__PURE__*/_jsx(Path, {
-          d: "M15.4855 6.0242C16.1715 7.24852 16.1715 8.75148 15.4855 9.97581L13.4213 13.6598C12.7259 14.9008 11.4317 15.6667 10.0301 15.6667H5.96994C4.56828 15.6667 3.2741 14.9008 2.57874 13.6598L0.514515 9.97581C-0.171504 8.75148 -0.171505 7.24852 0.514514 6.0242L2.57874 2.34022C3.2741 1.09922 4.56828 0.333336 5.96994 0.333336H10.0301C11.4317 0.333336 12.7259 1.09922 13.4213 2.34022L15.4855 6.0242Z"
+          d: hexagonShapePath
         })
       })
     }), image]
@@ -126,12 +128,11 @@ export const RemoteImage = /*#__PURE__*/memo(function RemoteImage(_props) {
     return /*#__PURE__*/_jsx(SvgCssUri, _extends({
       accessibilityRole: "image",
       accessible: !!props.accessibilityLabel,
-      style: styles,
-      uri: isImageURISource(transformedSource) ? (_transformedSource$ur = transformedSource == null ? void 0 : transformedSource.uri) != null ? _transformedSource$ur : null : null
-    }, props, {
       height: computedHeight,
+      style: styles,
+      uri: isImageURISource(transformedSource) ? (_transformedSource$ur = transformedSource == null ? void 0 : transformedSource.uri) != null ? _transformedSource$ur : null : null,
       width: computedWidth
-    }));
+    }, props));
   }
   if (useFallback) {
     var _props$accessibilityR;
@@ -172,9 +173,8 @@ export const RemoteImage = /*#__PURE__*/memo(function RemoteImage(_props) {
     importantForAccessibility: props.accessibilityLabel ? 'auto' : 'no',
     onError: onError,
     onLoad: onLoad,
-    source: transformedSource
-  }, props, {
+    source: transformedSource,
     style: stylesWithDimensions
-  }));
+  }, props));
 });
 export { getSource, HexagonClipPath };

package/esm/media/RemoteImageGroup.js

@@ -57,7 +57,9 @@ export const RemoteImageGroup = _props => {
       const childShape = child.props.shape;
 
       // dynamically apply uniform sizing and shape to all RemoteImage children elements
-      const clonedChild = /*#__PURE__*/React.cloneElement(child, _extends({
+      const clonedChild = /*#__PURE__*/React.cloneElement(
+      // the type of child (after isValidElement check) is not inferred so it must be typecast here
+      child, _extends({
         testID: (testID ? testID + "-" : '') + "image-" + index,
         width: sizeAsNumber,
         height: sizeAsNumber

package/esm/media/__stories__/Avatar.stories.js

@@ -77,6 +77,7 @@ const AvatarScreen = () => {
             accessibilityLabel: "",
             alt: "",
             borderColor: "bgPositive",
+            borderWidth: 0,
             size: size,
             src: image
           }, size))

package/esm/navigation/NavigationTitleSelect.js

@@ -2,9 +2,9 @@ const _excluded = ["options", "value", "onChange", "color", "font", "accessibili
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
-import { SelectProvider } from '../controls/SelectContext';
-import { SelectOption } from '../controls/SelectOption';
-import { useSelect } from '../controls/useSelect';
+import { selectCellMobileSpacingConfig } from '@coinbase/cds-common/tokens/select';
+import { Cell } from '../cells/Cell';
+import { CellAccessory } from '../cells/CellAccessory';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Icon } from '../icons';
 import { HStack } from '../layout/HStack';
@@ -31,18 +31,15 @@ export const NavigationTitleSelect = /*#__PURE__*/memo(_props => {
   const handleOpenMenu = useCallback(() => {
     setVisible(true);
   }, []);
-  const handleOptionPress = useCallback(() => {
+  const handleOptionPress = useCallback(id => {
     var _trayRef$current;
     (_trayRef$current = trayRef.current) == null || _trayRef$current.handleClose();
-  }, []);
+    onChange(id);
+  }, [onChange]);
   const label = useMemo(() => {
     var _options$find;
     return (_options$find = options.find(option => option.id === value)) == null ? void 0 : _options$find.label;
   }, [options, value]);
-  const selectContextValue = useSelect({
-    onChange,
-    value
-  });
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Pressable, {
       background: "transparent",
@@ -66,19 +63,30 @@ export const NavigationTitleSelect = /*#__PURE__*/memo(_props => {
     }), visible && /*#__PURE__*/_jsx(Tray, {
       ref: trayRef,
       onCloseComplete: handleCloseMenu,
-      children: /*#__PURE__*/_jsx(SelectProvider, {
-        value: selectContextValue,
-        children: options.map(_ref => {
-          let {
-            id,
-            label
-          } = _ref;
-          return /*#__PURE__*/_jsx(SelectOption, {
-            onPress: handleOptionPress,
-            title: label,
-            value: id
-          }, id);
-        })
+      children: options.map(_ref => {
+        let {
+          id,
+          label
+        } = _ref;
+        const selected = id === value;
+        return /*#__PURE__*/_jsx(Cell, _extends({
+          accessibilityState: selected ? {
+            selected: true
+          } : undefined,
+          accessory: selected ? /*#__PURE__*/_jsx(CellAccessory, {
+            type: "selected"
+          }) : undefined,
+          borderRadius: 0,
+          onPress: () => handleOptionPress(id),
+          selected: id === value
+        }, selectCellMobileSpacingConfig, {
+          children: !!label && /*#__PURE__*/_jsx(Text, {
+            ellipsize: "tail",
+            font: "headline",
+            numberOfLines: 1,
+            children: label
+          })
+        }), id);
       })
     })]
   });

package/esm/navigation/TopNavBar.js

@@ -102,7 +102,7 @@ export const TopNavBar = /*#__PURE__*/memo(_props => {
       paddingBottom: paddingBottom,
       paddingTop: paddingTop,
       paddingX: paddingX,
-      position: "sticky",
+      position: "absolute",
       right: 0,
       top: 0,
       width: "100%",

package/esm/overlays/Alert.js

@@ -137,7 +137,7 @@ export const Alert = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
           })]
         }), /*#__PURE__*/_jsxs(Box, {
           flexDirection: actionFlexDirection,
-          gap: 2,
+          gap: 1,
           paddingX: 3,
           paddingY: 2,
           testID: testID && testID + "-actions",