@coinbase/cds-mobile 9.6.1 → 9.6.3

package/esm/numbers/RollingNumber/RollingNumber.js

@@ -1,7 +1,8 @@
-const _excluded = ["value", "color", "colorPulseOnUpdate", "positivePulseColor", "negativePulseColor", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight", "tabularNumbers", "testID", "accessibilityLiveRegion", "locale", "format", "style", "prefix", "suffix", "styles", "enableSubscriptNotation", "transition", "digitTransitionVariant", "formattedValue", "accessibilityLabel", "accessibilityLabelPrefix", "accessibilityLabelSuffix", "RollingNumberMaskComponent", "RollingNumberAffixSectionComponent", "RollingNumberValueSectionComponent", "RollingNumberDigitComponent", "RollingNumberSymbolComponent"];
+const _excluded = ["ref"],
+  _excluded2 = ["value", "color", "colorPulseOnUpdate", "positivePulseColor", "negativePulseColor", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight", "tabularNumbers", "testID", "accessibilityLiveRegion", "locale", "format", "style", "prefix", "suffix", "styles", "enableSubscriptNotation", "transition", "digitTransitionVariant", "formattedValue", "accessibilityLabel", "accessibilityLabelPrefix", "accessibilityLabelSuffix", "RollingNumberMaskComponent", "RollingNumberAffixSectionComponent", "RollingNumberValueSectionComponent", "RollingNumberDigitComponent", "RollingNumberSymbolComponent"];
 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 { forwardRef, memo, useMemo, useState } from 'react';
+import { memo, useMemo, useState } from 'react';
 import { StyleSheet } from 'react-native';
 import { Easing } from 'react-native-reanimated';
 import { curves, durations } from '@coinbase/cds-common/motion/tokens';
@@ -69,7 +70,11 @@ export const defaultTransitionConfig = {
 
 // Subcomponent prop and component type declarations
 
-export const RollingNumber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+export const RollingNumber = /*#__PURE__*/memo(_ref => {
+  let {
+      ref
+    } = _ref,
+    _props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const mergedProps = useComponentConfig('RollingNumber', _props);
   const {
       value,
@@ -105,7 +110,7 @@ export const RollingNumber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props,
       RollingNumberDigitComponent = DefaultRollingNumberDigit,
       RollingNumberSymbolComponent = DefaultRollingNumberSymbol
     } = mergedProps,
-    restTextProps = _objectWithoutPropertiesLoose(mergedProps, _excluded);
+    restTextProps = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
   const {
     locale: defaultLocale
   } = useLocale();
@@ -293,4 +298,4 @@ export const RollingNumber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props,
       children: [prefixSection, formattedValue ? formattedValueValueSection : intlPartsValueSection, suffixSection]
     })]
   });
-}));
+});

package/esm/numpad/Numpad.js

@@ -1,7 +1,8 @@
-const _excluded = ["separator", "disabled", "onPress", "onLongPress", "accessory", "action", "deleteAccessibilityLabel", "separatorAccessibilityLabel", "testID", "background", "flexGrow", "flexShrink", "gap", "feedback"];
+const _excluded = ["ref"],
+  _excluded2 = ["separator", "disabled", "onPress", "onLongPress", "accessory", "action", "deleteAccessibilityLabel", "separatorAccessibilityLabel", "testID", "background", "flexGrow", "flexShrink", "gap", "feedback"];
 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, { forwardRef, memo, useCallback, useMemo } from 'react';
+import React, { memo, useCallback, useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
@@ -27,7 +28,11 @@ const styles = StyleSheet.create({
     width: '33.3333333%'
   }
 });
-export const Numpad = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, forwardedRef) => {
+export const Numpad = /*#__PURE__*/memo(_ref => {
+  let {
+      ref: forwardedRef
+    } = _ref,
+    _props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const mergedProps = useComponentConfig('Numpad', _props);
   const {
       separator = '.',
@@ -45,7 +50,7 @@ export const Numpad = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, forward
       gap = 2,
       feedback
     } = mergedProps,
-    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
   const buttons = useMemo(() => {
     return buttonValues.map((values, i) => {
       return /*#__PURE__*/_jsx(HStack, {
@@ -82,8 +87,8 @@ export const Numpad = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, forward
       children: buttons
     }), action]
   }));
-}));
-const NumpadButton = /*#__PURE__*/memo(function NumpadButton(_ref) {
+});
+const NumpadButton = /*#__PURE__*/memo(function NumpadButton(_ref2) {
   let {
     value,
     onPress,
@@ -93,7 +98,7 @@ const NumpadButton = /*#__PURE__*/memo(function NumpadButton(_ref) {
     separatorAccessibilityLabel,
     deleteAccessibilityLabel,
     feedback
-  } = _ref;
+  } = _ref2;
   const theme = useTheme();
   const content = useMemo(() => {
     if (value === 'DELETE') {

package/esm/overlays/Alert.js

@@ -1,4 +1,6 @@
-import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo } from 'react';
+const _excluded = ["ref"];
+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 { memo, useCallback, useEffect, useImperativeHandle, useMemo } from 'react';
 import { Modal as RNModal } from 'react-native';
 import { Button } from '../buttons/Button';
 import { useComponentConfig } from '../hooks/useComponentConfig';
@@ -8,7 +10,11 @@ import { Text } from '../typography/Text';
 import { Overlay } from './overlay/Overlay';
 import { useAlertAnimation } from './useAlertAnimation';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const Alert = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+export const Alert = /*#__PURE__*/memo(_ref => {
+  let {
+      ref
+    } = _ref,
+    _props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const mergedProps = useComponentConfig('Alert', _props);
   const {
     title,
@@ -35,10 +41,10 @@ export const Alert = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
     }
   }, [visible, animateIn]);
   const handleClose = useCallback(() => {
-    animateOut.start(_ref => {
+    animateOut.start(_ref2 => {
       let {
         finished
-      } = _ref;
+      } = _ref2;
       if (finished) {
         onRequestClose == null || onRequestClose();
       }
@@ -146,4 +152,4 @@ export const Alert = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
       })]
     })
   });
-}));
+});

package/esm/overlays/Toast.js

@@ -1,7 +1,8 @@
-const _excluded = ["text", "action", "onWillHide", "onDidHide", "bottomOffset", "variant", "accessibilityLabel"];
+const _excluded = ["ref"],
+  _excluded2 = ["text", "action", "onWillHide", "onDidHide", "bottomOffset", "variant", "accessibilityLabel"];
 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, { forwardRef, memo, useCallback, useEffect, useImperativeHandle } from 'react';
+import React, { memo, useCallback, useEffect, useImperativeHandle } from 'react';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { zIndex } from '@coinbase/cds-common/tokens/zIndex';
 import { Button } from '../buttons/Button';
@@ -14,8 +15,12 @@ import { Text } from '../typography/Text';
 import { useToastAnimation } from './useToastAnimation';
 import { useToastPanResponder } from './useToastPanResponder';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const Toast = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
-  var _ref3, _action$testID;
+export const Toast = /*#__PURE__*/memo(_ref => {
+  var _ref4, _action$testID;
+  let {
+      ref
+    } = _ref,
+    _props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const mergedProps = useComponentConfig('Toast', _props);
   const {
       text,
@@ -26,7 +31,7 @@ export const Toast = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
       variant,
       accessibilityLabel
     } = mergedProps,
-    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
   const {
     bottom: safeAreaBottom
   } = useSafeAreaInsets();
@@ -39,10 +44,10 @@ export const Toast = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
   } = useA11y();
   const defaultA11yLabel = text + (action ? action.label : '');
   useEffect(() => {
-    animateIn.start(_ref => {
+    animateIn.start(_ref2 => {
       let {
         finished
-      } = _ref;
+      } = _ref2;
       if (finished) {
         // announce toast copy and action label to screen reader
         announceForA11y(accessibilityLabel != null ? accessibilityLabel : defaultA11yLabel);
@@ -52,10 +57,10 @@ export const Toast = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
   const handleClose = useCallback(async () => {
     onWillHide == null || onWillHide();
     return new Promise(resolve => {
-      animateOut.start(_ref2 => {
+      animateOut.start(_ref3 => {
         let {
           finished
-        } = _ref2;
+        } = _ref3;
         if (finished) {
           onDidHide == null || onDidHide();
           resolve(finished);
@@ -80,7 +85,7 @@ export const Toast = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
   return /*#__PURE__*/_jsx(Box, _extends({
     accessibilityRole: "alert",
     alignSelf: "center",
-    bottom: (_ref3 = bottomOffset) != null ? _ref3 : safeAreaBottom,
+    bottom: (_ref4 = bottomOffset) != null ? _ref4 : safeAreaBottom,
     maxWidth: "100%",
     padding: 2,
     position: "absolute",
@@ -128,4 +133,4 @@ export const Toast = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
       })]
     }))
   }));
-}));
+});

package/esm/overlays/drawer/Drawer.js

@@ -1,7 +1,8 @@
-const _excluded = ["children", "pin", "onCloseComplete", "preventDismissGestures", "preventHardwareBackBehaviorAndroid", "handleBarVariant", "hideHandleBar", "disableCapturePanGestureToDismiss", "onBlur", "verticalDrawerPercentageOfView", "handleBarAccessibilityLabel", "accessibilityLabel", "accessibilityLabelledBy", "reduceMotion", "onOpenComplete", "style", "styles", "accessibilityRole", "animationType", "disableSafeAreaPaddingBottom"];
+const _excluded = ["ref"],
+  _excluded2 = ["children", "pin", "onCloseComplete", "preventDismissGestures", "preventHardwareBackBehaviorAndroid", "handleBarVariant", "hideHandleBar", "disableCapturePanGestureToDismiss", "onBlur", "verticalDrawerPercentageOfView", "handleBarAccessibilityLabel", "accessibilityLabel", "accessibilityLabelledBy", "reduceMotion", "onOpenComplete", "style", "styles", "accessibilityRole", "animationType", "disableSafeAreaPaddingBottom"];
 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, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import React, { memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { Animated, Keyboard, Modal, Platform, StatusBar, useWindowDimensions } from 'react-native';
 import { drawerAnimationDefaultDuration, MAX_OVER_DRAG } from '@coinbase/cds-common/animation/drawer';
 import { OverlayContentContext } from '@coinbase/cds-common/overlays/OverlayContentContext';
@@ -20,7 +21,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const overlayContentContextValue = {
   isDrawer: true
 };
-export const Drawer = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+export const Drawer = /*#__PURE__*/memo(_ref => {
+  let {
+      ref
+    } = _ref,
+    _props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const mergedProps = useComponentConfig('Drawer', _props);
   const {
       children,
@@ -44,7 +49,7 @@ export const Drawer = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
       animationType = 'none',
       disableSafeAreaPaddingBottom
     } = mergedProps,
-    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
   const theme = useTheme();
   const {
     width,
@@ -63,10 +68,10 @@ export const Drawer = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
   const paddingStyles = useDrawerSpacing(pin, disableSafeAreaPaddingBottom);
   const isMounted = useRef(false);
   const handleClose = useCallback(() => {
-    Animated.parallel([animateDrawerOut, animateOverlayOut]).start(_ref => {
+    Animated.parallel([animateDrawerOut, animateOverlayOut]).start(_ref2 => {
       let {
         finished
-      } = _ref;
+      } = _ref2;
       if (finished) {
         isMounted.current = false;
         onCloseComplete == null || onCloseComplete();
@@ -76,10 +81,10 @@ export const Drawer = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
   const handleRequestClose = useCallback(() => preventHardwareBackBehaviorAndroid && isAndroid ? undefined : handleClose(), [preventHardwareBackBehaviorAndroid, handleClose, isAndroid]);
   const handleSwipeToClose = useCallback(() => {
     if (!preventDismissGestures) {
-      Animated.parallel([animateSwipeToClose, animateOverlayOut]).start(_ref2 => {
+      Animated.parallel([animateSwipeToClose, animateOverlayOut]).start(_ref3 => {
         let {
           finished
-        } = _ref2;
+        } = _ref3;
         if (finished) {
           isMounted.current = false;
           onCloseComplete == null || onCloseComplete();
@@ -89,10 +94,10 @@ export const Drawer = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
   }, [preventDismissGestures, animateSwipeToClose, animateOverlayOut, onCloseComplete]);
   useEffect(() => {
     if (!isMounted.current) {
-      Animated.parallel([animateOverlayIn, animateDrawerIn]).start(_ref3 => {
+      Animated.parallel([animateOverlayIn, animateDrawerIn]).start(_ref4 => {
         let {
           finished
-        } = _ref3;
+        } = _ref4;
         if (finished) {
           isMounted.current = true;
           onOpenComplete == null || onOpenComplete();
@@ -212,4 +217,4 @@ export const Drawer = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
       }))]
     })
   }));
-}));
+});

package/esm/overlays/drawer/useDrawerPanResponder.js

@@ -183,6 +183,13 @@ export const useDrawerPanResponder = _ref => {
         } else {
           animateSnapBack.start();
         }
+      },
+      // On termination (e.g. a child gesture takes over the touch), reconcile
+      // the offsets applied on grant so the next close isn't mispositioned.
+      onPanResponderTerminate: () => {
+        drawerAnimation.flattenOffset();
+        opacityAnimation.flattenOffset();
+        animateSnapBack.start();
       }
     });
   }, [drawerAnimation, animateSnapBack, initializeDragAnimation, parseGestureState, shouldCaptureGestures, shouldDismiss, drawerWidth, drawerHeight, pin, isHorizontalDrawer, onBlur, handleSwipeToClose, opacityAnimation]);

package/esm/overlays/modal/Modal.js

@@ -1,7 +1,8 @@
-const _excluded = ["children", "visible", "onRequestClose", "onDidClose", "hideDividers", "hideCloseButton", "styles", "background", "color", "borderColor", "borderWidth", "borderRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "borderTopWidth", "borderBottomWidth", "borderStartWidth", "borderEndWidth", "bordered", "borderedTop", "borderedBottom", "borderedStart", "borderedEnd", "borderedHorizontal", "borderedVertical", "elevation", "padding", "paddingX", "paddingY", "paddingTop", "paddingBottom", "paddingStart", "paddingEnd", "minWidth", "minHeight", "maxWidth", "maxHeight"];
+const _excluded = ["ref"],
+  _excluded2 = ["children", "visible", "onRequestClose", "onDidClose", "hideDividers", "hideCloseButton", "styles", "background", "color", "borderColor", "borderWidth", "borderRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "borderTopWidth", "borderBottomWidth", "borderStartWidth", "borderEndWidth", "bordered", "borderedTop", "borderedBottom", "borderedStart", "borderedEnd", "borderedHorizontal", "borderedVertical", "elevation", "padding", "paddingX", "paddingY", "paddingTop", "paddingBottom", "paddingStart", "paddingEnd", "minWidth", "minHeight", "maxWidth", "maxHeight"];
 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, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useState } from 'react';
+import React, { memo, useCallback, useEffect, useImperativeHandle, useMemo, useState } from 'react';
 import { Modal as RNModal, Platform, StatusBar, StyleSheet } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { usePreviousValue } from '@coinbase/cds-common/hooks/usePreviousValue';
@@ -19,7 +20,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const overlayContentContextValue = {
   isModal: true
 };
-export const Modal = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+export const Modal = /*#__PURE__*/memo(_ref => {
+  let {
+      ref
+    } = _ref,
+    _props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const mergedProps = useComponentConfig('Modal', _props);
   const props = mergedProps;
   const {
@@ -64,7 +69,7 @@ export const Modal = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
       maxWidth,
       maxHeight
     } = props,
-    restProps = _objectWithoutPropertiesLoose(props, _excluded);
+    restProps = _objectWithoutPropertiesLoose(props, _excluded2);
   const [{
     opacity,
     scale
@@ -72,10 +77,10 @@ export const Modal = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
   const [internalVisible, setInternalVisible] = useState(visible);
   const prevVisible = usePreviousValue(visible);
   const handleClose = useCallback(() => {
-    animateOut.start(_ref => {
+    animateOut.start(_ref2 => {
       let {
         finished
-      } = _ref;
+      } = _ref2;
       if (finished) {
         setInternalVisible(false);
         onDidClose == null || onDidClose();
@@ -164,7 +169,7 @@ export const Modal = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
       })
     }))
   });
-}));
+});
 const styles = StyleSheet.create({
   safeAreaContainer: {
     flex: 1,

package/esm/overlays/tray/Tray.js

@@ -1,8 +1,9 @@
-const _excluded = ["children", "title", "header", "headerElevation", "footer", "onVisibilityChange", "handleBarVariant", "verticalDrawerPercentageOfView", "styles"],
-  _excluded2 = ["content", "header", "title"];
+const _excluded = ["ref"],
+  _excluded2 = ["children", "title", "header", "headerElevation", "footer", "onVisibilityChange", "handleBarVariant", "verticalDrawerPercentageOfView", "styles"],
+  _excluded3 = ["content", "header", "title"];
 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, { createContext, forwardRef, memo, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import React, { createContext, memo, useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { useWindowDimensions } from 'react-native';
 import { MAX_OVER_DRAG } from '@coinbase/cds-common/animation/drawer';
 import { verticalDrawerPercentageOfView as defaultVerticalDrawerPercentageOfView } from '@coinbase/cds-common/tokens/drawer';
@@ -16,7 +17,11 @@ export const TrayContext = /*#__PURE__*/createContext({
   verticalDrawerPercentageOfView: defaultVerticalDrawerPercentageOfView,
   titleHeight: 0
 });
-export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_props, ref) {
+export const Tray = /*#__PURE__*/memo(function Tray(_ref) {
+  let {
+      ref
+    } = _ref,
+    _props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const mergedProps = useComponentConfig('Tray', _props);
   const {
       children,
@@ -29,7 +34,7 @@ export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_pro
       verticalDrawerPercentageOfView = defaultVerticalDrawerPercentageOfView,
       styles
     } = mergedProps,
-    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
   const [titleHeight, setTitleHeight] = useState(0);
   const isInsideHandleBar = handleBarVariant === 'inside';
   const isTitleString = typeof title === 'string';
@@ -39,13 +44,13 @@ export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_pro
     titleStyle,
     drawerStyles
   } = useMemo(() => {
-    const _ref = styles != null ? styles : {},
+    const _ref2 = styles != null ? styles : {},
       {
         content: contentStyle,
         header: headerStyle,
         title: titleStyle
-      } = _ref,
-      drawerStyles = _objectWithoutPropertiesLoose(_ref, _excluded2);
+      } = _ref2,
+      drawerStyles = _objectWithoutPropertiesLoose(_ref2, _excluded3);
     return {
       contentStyle,
       headerStyle,
@@ -57,10 +62,10 @@ export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_pro
     if (!title) return;
     setTitleHeight(event.nativeEvent.layout.height);
   }, [title]);
-  const renderChildren = useCallback(_ref2 => {
+  const renderChildren = useCallback(_ref3 => {
     let {
       handleClose
-    } = _ref2;
+    } = _ref3;
     const content = typeof children === 'function' ? children({
       handleClose
     }) : children;
@@ -122,16 +127,16 @@ export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_pro
       children: renderChildren
     }))
   });
-}));
+});
 
 /**
  * @deprecated Redundant component. This will be removed in a future major release.
  * @deprecationExpectedRemoval v9
  */
-export const TrayStickyFooter = _ref3 => {
+export const TrayStickyFooter = _ref4 => {
   let {
     children
-  } = _ref3;
+  } = _ref4;
   const {
     verticalDrawerPercentageOfView,
     titleHeight

package/esm/page/PageFooter.js

@@ -1,20 +1,25 @@
-const _excluded = ["action", "legalText"];
+const _excluded = ["ref"],
+  _excluded2 = ["action", "legalText"];
 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, { forwardRef, memo } from 'react';
+import React, { memo } from 'react';
 import { pageFooterHeight } from '@coinbase/cds-common/tokens/page';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box } from '../layout/Box';
 import { VStack } from '../layout/VStack';
 import { Text } from '../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const PageFooter = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+export const PageFooter = /*#__PURE__*/memo(_ref => {
+  let {
+      ref
+    } = _ref,
+    _props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const mergedProps = useComponentConfig('PageFooter', _props);
   const {
       action,
       legalText
     } = mergedProps,
-    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
   return /*#__PURE__*/_jsx(Box, _extends({
     ref: ref,
     accessibilityRole: "toolbar",
@@ -33,4 +38,4 @@ export const PageFooter = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref
       })]
     }) : action
   }));
-}));
+});

package/esm/page/PageHeader.js

@@ -1,7 +1,8 @@
-const _excluded = ["start", "title", "end", "styles", "style"];
+const _excluded = ["ref"],
+  _excluded2 = ["start", "title", "end", "styles", "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, { forwardRef, memo, useMemo } from 'react';
+import React, { memo, useMemo } from 'react';
 import { pageHeaderHeight } from '@coinbase/cds-common/tokens/page';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box } from '../layout/Box';
@@ -9,7 +10,11 @@ import { HStack } from '../layout/HStack';
 import { VStack } from '../layout/VStack';
 import { Text } from '../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const PageHeader = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+export const PageHeader = /*#__PURE__*/memo(_ref => {
+  let {
+      ref
+    } = _ref,
+    _props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const mergedProps = useComponentConfig('PageHeader', _props);
   const {
       start,
@@ -18,7 +23,7 @@ export const PageHeader = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref
       styles,
       style
     } = mergedProps,
-    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
   const isMultiRow = useMemo(() => Boolean(start && title && end), [start, end, title]);
   return /*#__PURE__*/_jsxs(VStack, _extends({
     ref: ref,
@@ -57,4 +62,4 @@ export const PageHeader = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref
       }) : title
     })]
   }));
-}));
+});

package/esm/section-header/SectionHeader.js

@@ -1,14 +1,15 @@
-const _excluded = ["title", "start", "icon", "iconActive", "testID", "balance", "description", "end", "accessibilityLabel", "padding"];
+const _excluded = ["ref", "title", "start", "icon", "iconActive", "testID", "balance", "description", "end", "accessibilityLabel", "padding"];
 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, { forwardRef, memo } from 'react';
+import React, { memo } from 'react';
 import { Icon } from '../icons/Icon';
 import { HStack } from '../layout/HStack';
 import { VStack } from '../layout/VStack';
 import { Text } from '../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const SectionHeader = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function SectionHeader(_ref, ref) {
+export const SectionHeader = /*#__PURE__*/memo(function SectionHeader(_ref) {
   let {
+      ref,
       title,
       start,
       icon,
@@ -58,4 +59,4 @@ export const SectionHeader = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function
       children: end
     })]
   }));
-}));
+});

package/esm/stepper/Stepper.js

@@ -1,8 +1,9 @@
-const _excluded = ["direction", "activeStepId", "steps", "complete", "style", "completedStepAccessibilityLabel", "styles", "gap", "accessibilityLabel", "StepperStepComponent", "StepperSubstepContainerComponent", "StepperLabelComponent", "StepperProgressComponent", "StepperIconComponent", "StepperHeaderComponent", "progressTimingConfig", "animate", "disableAnimateOnMount"],
-  _excluded2 = ["root"];
+const _excluded = ["ref"],
+  _excluded2 = ["direction", "activeStepId", "steps", "complete", "style", "completedStepAccessibilityLabel", "styles", "gap", "accessibilityLabel", "StepperStepComponent", "StepperSubstepContainerComponent", "StepperLabelComponent", "StepperProgressComponent", "StepperIconComponent", "StepperHeaderComponent", "progressTimingConfig", "animate", "disableAnimateOnMount"],
+  _excluded3 = ["root"];
 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, { forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { durations } from '@coinbase/cds-common/motion/tokens';
 import { containsStep, flattenSteps, isStepVisited } from '@coinbase/cds-common/stepper/utils';
 import { useComponentConfig } from '../hooks/useComponentConfig';
@@ -44,7 +45,11 @@ export const defaultProgressSpringConfig = {
   tension: 100,
   clamp: true
 };
-const StepperBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+const StepperBase = /*#__PURE__*/memo(_ref => {
+  let {
+      ref
+    } = _ref,
+    _props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const mergedProps = useComponentConfig('Stepper', _props);
   const {
       direction,
@@ -67,7 +72,7 @@ const StepperBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
       animate = true,
       disableAnimateOnMount
     } = mergedProps,
-    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
   const flatStepIds = useMemo(() => flattenSteps(steps).map(step => step.id), [steps]);
 
   // Derive activeStep from activeStepId
@@ -81,11 +86,11 @@ const StepperBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
     rootStyle,
     stepStyles
   } = useMemo(() => {
-    const _ref = styles != null ? styles : {},
+    const _ref2 = styles != null ? styles : {},
       {
         root
-      } = _ref,
-      stepStyles = _objectWithoutPropertiesLoose(_ref, _excluded2);
+      } = _ref2,
+      stepStyles = _objectWithoutPropertiesLoose(_ref2, _excluded3);
     const rootStyle = [style, root];
     return {
       rootStyle,
@@ -93,12 +98,12 @@ const StepperBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
     };
   }, [styles, style]);
   const accessibilityLabel = useMemo(() => {
-    var _ref2, _activeStep$accessibi;
+    var _ref3, _activeStep$accessibi;
     if (accessibilityLabelProp) return accessibilityLabelProp;
     if (!activeStep) return 'No active step';
     const pagination = activeFlatStepIndex + 1 + " of " + flatStepIds.length;
     const stepLabel = typeof activeStep.label === 'string' ? activeStep.label : null;
-    const baseLabel = (_ref2 = (_activeStep$accessibi = activeStep.accessibilityLabel) != null ? _activeStep$accessibi : stepLabel) != null ? _ref2 : "Step " + (activeFlatStepIndex + 1);
+    const baseLabel = (_ref3 = (_activeStep$accessibi = activeStep.accessibilityLabel) != null ? _activeStep$accessibi : stepLabel) != null ? _ref3 : "Step " + (activeFlatStepIndex + 1);
     return baseLabel + " " + pagination;
   }, [activeStep, activeFlatStepIndex, flatStepIds.length, accessibilityLabelProp]);
 
@@ -211,5 +216,5 @@ const StepperBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
       })
     })]
   }));
-}));
+});
 export const Stepper = StepperBase;

package/esm/sticky-footer/StickyFooter.js

@@ -1,12 +1,13 @@
-const _excluded = ["elevated", "elevation", "children", "testID", "role", "accessibilityLabel", "compact", "paddingX", "paddingTop", "flexShrink"];
+const _excluded = ["ref", "elevated", "elevation", "children", "testID", "role", "accessibilityLabel", "compact", "paddingX", "paddingTop", "flexShrink"];
 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, { forwardRef, memo } from 'react';
+import React, { memo } from 'react';
 import { View } from 'react-native';
 import { Box } from '../layout/Box';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const StickyFooter = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forwardedRef) => {
+export const StickyFooter = /*#__PURE__*/memo(_ref => {
   let {
+      ref: forwardedRef,
       elevated,
       elevation = elevated ? 1 : 0,
       children,
@@ -33,4 +34,4 @@ export const StickyFooter = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, for
       children: children
     })
   }));
-}));
+});