@coinbase/cds-mobile 9.6.1 → 9.6.3

package/esm/controls/TextInput.js

@@ -1,7 +1,8 @@
-const _excluded = ["label", "labelFont", "labelColor", "helperText", "variant", "testID", "testIDMap", "start", "end", "width", "disabled", "align", "font", "compact", "suffix", "accessibilityLabel", "borderRadius", "enableColorSurge", "helperTextErrorIconAccessibilityLabel", "bordered", "focusedBorderWidth", "labelVariant", "labelNode", "inputBackground"];
+const _excluded = ["ref"],
+  _excluded2 = ["label", "labelFont", "labelColor", "helperText", "variant", "testID", "testIDMap", "start", "end", "width", "disabled", "align", "font", "compact", "suffix", "accessibilityLabel", "borderRadius", "enableColorSurge", "helperTextErrorIconAccessibilityLabel", "bordered", "focusedBorderWidth", "labelVariant", "labelNode", "inputBackground"];
 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, { cloneElement, forwardRef, isValidElement, memo, useCallback, useMemo, useRef, useState } from 'react';
+import React, { cloneElement, isValidElement, memo, useCallback, useMemo, useRef, useState } from 'react';
 import { Pressable } from 'react-native';
 import { useInputVariant } from '@coinbase/cds-common/hooks/useInputVariant';
 import { useMergeRefs } from '@coinbase/cds-common/hooks/useMergeRefs';
@@ -26,8 +27,12 @@ const variantColorMap = {
   foregroundMuted: 'fgMuted',
   secondary: 'bgSecondary'
 };
-export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+export const TextInput = /*#__PURE__*/memo(_ref => {
   var _testIDMap$end, _testIDMap$helperText, _testIDMap$label, _testIDMap$label2;
+  let {
+      ref
+    } = _ref,
+    _props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const mergedProps = useComponentConfig('TextInput', _props);
   const {
       label,
@@ -55,7 +60,7 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref)
       labelNode,
       inputBackground
     } = mergedProps,
-    editableInputProps = _objectWithoutPropertiesLoose(mergedProps, _excluded);
+    editableInputProps = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
   const theme = useTheme();
   const [focused, setFocused] = useState(false);
   const focusedVariant = useInputVariant(focused, variant);
@@ -224,4 +229,4 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref)
     variant: variant,
     width: width
   });
-}));
+});

package/esm/dates/Calendar.js

@@ -1,8 +1,9 @@
-const _excluded = ["background", "borderRadius", "children"],
-  _excluded2 = ["selectedDate", "seedDate", "onPressDate", "disabled", "hideControls", "disabledDates", "highlightedDates", "minDate", "maxDate", "disabledDateError", "nextArrowAccessibilityLabel", "previousArrowAccessibilityLabel", "todayAccessibilityHint", "highlightedDateAccessibilityHint", "style", "styles"];
+const _excluded = ["ref", "background", "borderRadius", "children"],
+  _excluded2 = ["ref"],
+  _excluded3 = ["selectedDate", "seedDate", "onPressDate", "disabled", "hideControls", "disabledDates", "highlightedDates", "minDate", "maxDate", "disabledDateError", "nextArrowAccessibilityLabel", "previousArrowAccessibilityLabel", "todayAccessibilityHint", "highlightedDateAccessibilityHint", "style", "styles"];
 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, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { memo, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { StyleSheet } from 'react-native';
 import { generateCalendarMonth } from '@coinbase/cds-common/dates/generateCalendarMonth';
 import { getMidnightDate } from '@coinbase/cds-common/dates/getMidnightDate';
@@ -32,8 +33,9 @@ const styles = StyleSheet.create({
     height: '100%'
   }
 });
-const CalendarPressable = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+const CalendarPressable = /*#__PURE__*/memo(_ref => {
   let {
+      ref,
       background = 'transparent',
       borderRadius = 1000,
       children
@@ -49,7 +51,7 @@ const CalendarPressable = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref)
   }, props, {
     children: children
   }));
-}));
+});
 CalendarPressable.displayName = 'CalendarPressable';
 const getDayAccessibilityLabel = function (date, locale) {
   if (locale === void 0) {
@@ -63,8 +65,9 @@ const getDayAccessibilityLabel = function (date, locale) {
     year: 'numeric'
   });
 };
-const CalendarDay = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) => {
+const CalendarDay = /*#__PURE__*/memo(_ref2 => {
   let {
+    ref,
     date,
     active,
     disabled,
@@ -139,9 +142,13 @@ const CalendarDay = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) => {
     });
   }
   return dayButton;
-}));
+});
 CalendarDay.displayName = 'CalendarDay';
-export const Calendar = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+export const Calendar = /*#__PURE__*/memo(_ref3 => {
+  let {
+      ref
+    } = _ref3,
+    _props = _objectWithoutPropertiesLoose(_ref3, _excluded2);
   const mergedProps = useComponentConfig('Calendar', _props);
   const {
       selectedDate,
@@ -161,7 +168,7 @@ export const Calendar = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref)
       style,
       styles
     } = mergedProps,
-    props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded3);
   const {
     setA11yFocus,
     announceForA11y
@@ -318,8 +325,8 @@ export const Calendar = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref)
             children: day.charAt(0)
           })
         }, day))
-      }), calendarWeeks.map(_ref3 => {
-        let [weekId, week] = _ref3;
+      }), calendarWeeks.map(_ref4 => {
+        let [weekId, week] = _ref4;
         return /*#__PURE__*/_jsx(HStack, {
           gap: 1,
           justifyContent: "space-between",
@@ -344,5 +351,5 @@ export const Calendar = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref)
       })]
     })]
   }));
-}));
+});
 Calendar.displayName = 'Calendar';

package/esm/dates/DateInput.js

@@ -1,7 +1,8 @@
-const _excluded = ["date", "onChangeDate", "error", "onErrorDate", "required", "separator", "disabledDates", "minDate", "maxDate", "requiredError", "invalidDateError", "disabledDateError", "start", "end", "placeholder", "helperText", "variant", "onBlur", "onChange", "onEndEditing", "testIDMap", "style"];
+const _excluded = ["ref"],
+  _excluded2 = ["date", "onChangeDate", "error", "onErrorDate", "required", "separator", "disabledDates", "minDate", "maxDate", "requiredError", "invalidDateError", "disabledDateError", "start", "end", "placeholder", "helperText", "variant", "onBlur", "onChange", "onEndEditing", "testIDMap", "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, useCallback, useMemo, useRef } from 'react';
+import React, { memo, useCallback, useMemo, useRef } from 'react';
 import { IntlDateFormat } from '@coinbase/cds-common/dates/IntlDateFormat';
 import { useDateInput } from '@coinbase/cds-common/dates/useDateInput';
 import { useLocale } from '@coinbase/cds-common/system/LocaleProvider';
@@ -9,7 +10,11 @@ import { TextInput } from '../controls/TextInput';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { VStack } from '../layout/VStack';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const DateInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+export const DateInput = /*#__PURE__*/memo(_ref => {
+  let {
+      ref
+    } = _ref,
+    _props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const mergedProps = useComponentConfig('DateInput', _props);
   const {
       date,
@@ -35,7 +40,7 @@ export const DateInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref)
       testIDMap,
       style
     } = mergedProps,
-    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
   const hasTyped = useRef(Boolean(date));
   const {
     locale
@@ -107,4 +112,4 @@ export const DateInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref)
       variant: variant || (error ? 'negative' : undefined)
     }, props))
   });
-}));
+});

package/esm/dates/DatePicker.js

@@ -1,7 +1,8 @@
-const _excluded = ["date", "styles", "highlightedDates", "highlightedDateAccessibilityHint", "nextArrowAccessibilityLabel", "previousArrowAccessibilityLabel", "disabledDates", "onChangeDate", "error", "onErrorDate", "required", "disabled", "seedDate", "minDate", "maxDate", "requiredError", "invalidDateError", "disabledDateError", "label", "accessibilityHint", "accessibilityLabel", "accessibilityLabelledBy", "calendarIconButtonAccessibilityLabel", "openCalendarAccessibilityLabel", "closeCalendarAccessibilityLabel", "dateInputStyle", "compact", "variant", "confirmText", "confirmButtonAccessibilityHint", "helperText", "width", "onOpen", "onClose", "onConfirm", "onCancel", "onChange"];
+const _excluded = ["ref"],
+  _excluded2 = ["date", "styles", "highlightedDates", "highlightedDateAccessibilityHint", "nextArrowAccessibilityLabel", "previousArrowAccessibilityLabel", "disabledDates", "onChangeDate", "error", "onErrorDate", "required", "disabled", "seedDate", "minDate", "maxDate", "requiredError", "invalidDateError", "disabledDateError", "label", "accessibilityHint", "accessibilityLabel", "accessibilityLabelledBy", "calendarIconButtonAccessibilityLabel", "openCalendarAccessibilityLabel", "closeCalendarAccessibilityLabel", "dateInputStyle", "compact", "variant", "confirmText", "confirmButtonAccessibilityHint", "helperText", "width", "onOpen", "onClose", "onConfirm", "onCancel", "onChange"];
 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, useCallback, useMemo, useRef, useState } from 'react';
+import { memo, useCallback, useMemo, useRef, useState } from 'react';
 import { Button } from '../buttons/Button';
 import { InputIconButton } from '../controls/InputIconButton';
 import { useComponentConfig } from '../hooks/useComponentConfig';
@@ -12,7 +13,11 @@ import { StickyFooter } from '../sticky-footer/StickyFooter';
 import { Calendar } from './Calendar';
 import { DateInput } from './DateInput';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const DatePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+export const DatePicker = /*#__PURE__*/memo(_ref => {
+  let {
+      ref
+    } = _ref,
+    _props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const mergedProps = useComponentConfig('DatePicker', _props);
   const {
       date,
@@ -53,7 +58,7 @@ export const DatePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref
       onCancel,
       onChange
     } = mergedProps,
-    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
   const [showPicker, setShowPicker] = useState(false);
   const [calendarSelectedDate, setCalendarSelectedDate] = useState(null);
   const dateInputRef = useRef(null);
@@ -142,10 +147,10 @@ export const DatePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref
       variant: variant
     }, props)), showPicker && /*#__PURE__*/_jsx(Tray, {
       accessibilityRole: "none",
-      footer: _ref => {
+      footer: _ref2 => {
         let {
           handleClose
-        } = _ref;
+        } = _ref2;
         return /*#__PURE__*/_jsx(StickyFooter, {
           role: "none",
           children: /*#__PURE__*/_jsx(Button, {
@@ -194,5 +199,5 @@ export const DatePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref
       })
     })]
   });
-}));
+});
 DatePicker.displayName = 'DatePicker';

package/esm/examples/ExampleScreen.js

@@ -1,5 +1,5 @@
 const _excluded = ["children", "inline", "title", "titlePadding", "hideDivider"],
-  _excluded2 = ["children"];
+  _excluded2 = ["ref", "children"];
 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, useCallback, useContext, useMemo, useRef } from 'react';
@@ -50,8 +50,9 @@ export const Example = _ref => {
     })]
   }));
 };
-export const ExampleScreen = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+export const ExampleScreen = _ref2 => {
   let {
+      ref,
       children
     } = _ref2,
     boxProps = _objectWithoutPropertiesLoose(_ref2, _excluded2);
@@ -93,5 +94,5 @@ export const ExampleScreen = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       })
     }))
   });
-});
+};
 ExampleScreen.displayName = 'ExampleScreen';

package/esm/layout/Box.js

@@ -1,7 +1,7 @@
-const _excluded = ["children", "style", "animated", "testID", "pin", "bordered", "borderedTop", "borderedBottom", "borderedStart", "borderedEnd", "borderedHorizontal", "borderedVertical", "dangerouslySetBackground", "display", "position", "overflow", "zIndex", "gap", "columnGap", "rowGap", "justifyContent", "alignContent", "alignItems", "alignSelf", "flexDirection", "flexWrap", "color", "background", "borderColor", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "borderTopWidth", "borderEndWidth", "borderBottomWidth", "borderStartWidth", "elevation", "borderWidth", "borderRadius", "font", "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"];
+const _excluded = ["ref", "children", "style", "animated", "testID", "pin", "bordered", "borderedTop", "borderedBottom", "borderedStart", "borderedEnd", "borderedHorizontal", "borderedVertical", "dangerouslySetBackground", "display", "position", "overflow", "zIndex", "gap", "columnGap", "rowGap", "justifyContent", "alignContent", "alignItems", "alignSelf", "flexDirection", "flexWrap", "color", "background", "borderColor", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "borderTopWidth", "borderEndWidth", "borderBottomWidth", "borderStartWidth", "elevation", "borderWidth", "borderRadius", "font", "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"];
 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; }
 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); }
-import React, { forwardRef, memo, useMemo } from 'react';
+import React, { memo, useMemo } from 'react';
 import { Animated, View } from 'react-native';
 import { useTheme } from '../hooks/useTheme';
 import { pinStyles } from '../styles/pinStyles';
@@ -74,8 +74,9 @@ const getBorderedStyles = (_ref, theme) => {
   };
   return [bordered && borderStyles.bordered, borderedHorizontal && borderStyles.borderedHorizontal, borderedVertical && borderStyles.borderedVertical, borderedStart && borderStyles.borderedStart, borderedEnd && borderStyles.borderedEnd, borderedTop && borderStyles.borderedTop, borderedBottom && borderStyles.borderedBottom];
 };
-export const Box = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) => {
+export const Box = /*#__PURE__*/memo(_ref2 => {
   let {
+      ref,
       children,
       style,
       animated,
@@ -250,5 +251,5 @@ export const Box = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) => {
       children: children
     }))
   );
-}));
+});
 Box.displayName = 'Box';

package/esm/layout/Group.js

@@ -1,7 +1,7 @@
-const _excluded = ["children", "direction", "divider", "gap", "renderItem"];
+const _excluded = ["ref", "children", "direction", "divider", "gap", "renderItem"];
 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 { flattenAndJoinNodes } from '../utils/flattenAndJoinNodes';
 import { Box } from './Box';
 import { Spacer } from './Spacer';
@@ -11,8 +11,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * @deprecationExpectedRemoval v8
  * @danger Make sure to add a `key` prop to each item.
  */
-export const Group = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Group(_ref, forwardedRef) {
+export const Group = /*#__PURE__*/memo(function Group(_ref) {
   let {
+      ref: forwardedRef,
       children,
       direction = 'vertical',
       divider,
@@ -37,5 +38,5 @@ export const Group = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Group(_r
   }, boxProps, {
     children: contents
   }));
-}));
+});
 Group.displayName = 'Group';

package/esm/layout/HStack.js

@@ -1,11 +1,12 @@
-const _excluded = ["flexDirection"];
+const _excluded = ["ref", "flexDirection"];
 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 { Box } from './Box';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const HStack = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function HStack(_ref, forwardedRef) {
+export const HStack = /*#__PURE__*/memo(function HStack(_ref) {
   let {
+      ref: forwardedRef,
       flexDirection = 'row'
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
@@ -13,4 +14,4 @@ export const HStack = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function HStack(
     ref: forwardedRef,
     flexDirection: flexDirection
   }, props));
-}));
+});

package/esm/layout/VStack.js

@@ -1,11 +1,12 @@
-const _excluded = ["flexDirection"];
+const _excluded = ["ref", "flexDirection"];
 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 { Box } from './Box';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const VStack = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function VStack(_ref, forwardedRef) {
+export const VStack = /*#__PURE__*/memo(function VStack(_ref) {
   let {
+      ref: forwardedRef,
       flexDirection = 'column'
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
@@ -13,4 +14,4 @@ export const VStack = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function VStack(
     ref: forwardedRef,
     flexDirection: flexDirection
   }, props));
-}));
+});

package/esm/media/Carousel/Carousel.js

@@ -1,7 +1,7 @@
-const _excluded = ["carouselRef", "items", "gap", "testID", "onReady"];
+const _excluded = ["ref", "carouselRef", "items", "gap", "testID", "onReady"];
 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, Platform, StyleSheet } from 'react-native';
 import { animateOpacityConfig, animateSizeConfig } from '@coinbase/cds-common/animation/carousel';
 import { convertMotionConfig } from '../../animation/convertMotionConfig';
@@ -14,8 +14,9 @@ const sizeConfig = convertMotionConfig(animateSizeConfig);
  * @deprecated Use new Carousel component instead. This will be removed in a future major release.
  * @deprecationExpectedRemoval v8
  */
-export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forwardedRef) => {
+export const Carousel = /*#__PURE__*/memo(_ref => {
   let {
+      ref: forwardedRef,
       carouselRef,
       items,
       gap = 3,
@@ -131,7 +132,7 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forward
   }, otherProps, {
     children: content
   }));
-}));
+});
 const styles = StyleSheet.create({
   carousel: {
     overflow: 'visible'

package/esm/motion/ColorSurge.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import React, { memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { Animated } from 'react-native';
 import { colorSurgeEnterConfig, colorSurgeExitConfig } from '@coinbase/cds-common/motion/hint';
 import { convertMotionConfig } from '../animation/convertMotionConfig';
@@ -7,8 +7,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Please consult with the motion team in #ask-motion before using this component.
  */
-export const ColorSurge = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function ColorSurge(_ref, ref) {
+export const ColorSurge = /*#__PURE__*/memo(function ColorSurge(_ref) {
   let {
+    ref,
     background = 'bgPrimary',
     disableAnimateOnMount = false
   } = _ref;
@@ -41,4 +42,4 @@ export const ColorSurge = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Col
       opacity
     }
   });
-}));
+});

package/esm/motion/Pulse.js

@@ -1,5 +1,5 @@
 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); }
-import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import React, { memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { Animated } from 'react-native';
 import { pulseTransitionConfig, pulseVariantOpacity } from '@coinbase/cds-common/motion/hint';
 import { convertMotionConfig } from '../animation/convertMotionConfig';
@@ -7,8 +7,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Please consult with the motion team in #ask-motion before using this component.
  */
-export const Pulse = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Pulse(_ref, ref) {
+export const Pulse = /*#__PURE__*/memo(function Pulse(_ref) {
   let {
+    ref,
     children,
     variant = 'moderate',
     disableAnimateOnMount = false,
@@ -51,4 +52,4 @@ export const Pulse = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Pulse(_r
     },
     children: children
   });
-}));
+});

package/esm/motion/Shake.js

@@ -1,5 +1,5 @@
 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); }
-import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef } from 'react';
+import React, { memo, useCallback, useEffect, useImperativeHandle, useRef } from 'react';
 import { Animated } from 'react-native';
 import { shakeTransitionConfig, shakeTranslateX } from '@coinbase/cds-common/motion/hint';
 import { convertMotionConfig } from '../animation/convertMotionConfig';
@@ -8,8 +8,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Please consult with the motion team in #ask-motion before using this component.
  */
-export const Shake = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Shake(_ref, ref) {
+export const Shake = /*#__PURE__*/memo(function Shake(_ref) {
   let {
+    ref,
     children,
     disableAnimateOnMount = false
   } = _ref;
@@ -48,4 +49,4 @@ export const Shake = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Shake(_r
     },
     children: children
   });
-}));
+});

package/esm/multi-content-module/MultiContentModule.js

@@ -1,15 +1,16 @@
-const _excluded = ["pictogram", "title", "description", "children", "action", "onActionPress", "actionAccessibilityLabel", "end", "bordered", "testID", "accessibilityLabel", "style"];
+const _excluded = ["ref", "pictogram", "title", "description", "children", "action", "onActionPress", "actionAccessibilityLabel", "end", "bordered", "testID", "accessibilityLabel", "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, isValidElement, memo } from 'react';
+import React, { isValidElement, memo } from 'react';
 import { Button } from '../buttons/Button';
 import { Pictogram } from '../illustrations/Pictogram';
 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 MultiContentModule = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function MultiContentModule(_ref, ref) {
+export const MultiContentModule = /*#__PURE__*/memo(function MultiContentModule(_ref) {
   let {
+      ref,
       pictogram,
       title,
       description,
@@ -58,4 +59,4 @@ export const MultiContentModule = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(func
       children: action
     })), end]
   }));
-}));
+});

package/esm/numbers/RollingNumber/DefaultRollingNumberAffixSection.js

@@ -1,14 +1,15 @@
-const _excluded = ["children", "textProps", "style", "styles", "justifyContent"];
+const _excluded = ["ref", "children", "textProps", "style", "styles", "justifyContent"];
 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 } from 'react';
+import { memo, useMemo } from 'react';
 import Animated from 'react-native-reanimated';
 import { HStack } from '../../layout/HStack';
 import { Text } from '../../typography/Text';
 import { jsx as _jsx } from "react/jsx-runtime";
 const AnimatedText = Animated.createAnimatedComponent(Text);
-export const DefaultRollingNumberAffixSection = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+export const DefaultRollingNumberAffixSection = /*#__PURE__*/memo(_ref => {
   let {
+      ref,
       children,
       textProps,
       style,
@@ -30,4 +31,4 @@ export const DefaultRollingNumberAffixSection = /*#__PURE__*/memo(/*#__PURE__*/f
   }, props, {
     children: typeof children === 'string' || typeof children === 'number' ? textNode : children
   }));
-}));
+});

package/esm/numbers/RollingNumber/DefaultRollingNumberDigit.js

@@ -1,7 +1,7 @@
-const _excluded = ["value", "digitHeight", "initialValue", "textProps", "style", "styles", "transitionConfig", "digitTransitionVariant", "direction", "RollingNumberMaskComponent"];
+const _excluded = ["ref", "value", "digitHeight", "initialValue", "textProps", "style", "styles", "transitionConfig", "digitTransitionVariant", "direction", "RollingNumberMaskComponent"];
 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, useEffect, useMemo, useRef, useState } from 'react';
+import { memo, useEffect, useMemo, useRef, useState } from 'react';
 import { StyleSheet } from 'react-native';
 import Animated, { LayoutAnimationConfig, useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
 import { Text } from '../../typography/Text';
@@ -80,8 +80,9 @@ const baseStylesheet = StyleSheet.create({
  * For the "single" variant, mobile uses reanimated's `entering`/`exiting` props with
  * custom animation worklets. Web uses imperative opacity crossfades on DOM sections.
  */
-export const DefaultRollingNumberDigit = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+export const DefaultRollingNumberDigit = /*#__PURE__*/memo(_ref => {
   let {
+      ref,
       value,
       digitHeight,
       initialValue = value,
@@ -157,4 +158,4 @@ export const DefaultRollingNumberDigit = /*#__PURE__*/memo(/*#__PURE__*/forwardR
       })
     })
   }));
-}));
+});

package/esm/numbers/RollingNumber/DefaultRollingNumberMask.js

@@ -1,7 +1,7 @@
-const _excluded = ["children", "style"];
+const _excluded = ["ref", "children", "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 { forwardRef, memo, useMemo } from 'react';
+import { memo, useMemo } from 'react';
 import { StyleSheet } from 'react-native';
 import { HStack } from '../../layout/HStack';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -11,8 +11,9 @@ const baseStylesheet = StyleSheet.create({
     overflow: 'hidden'
   }
 });
-export const DefaultRollingNumberMask = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+export const DefaultRollingNumberMask = /*#__PURE__*/memo(_ref => {
   let {
+      ref,
       children,
       style
     } = _ref,
@@ -24,4 +25,4 @@ export const DefaultRollingNumberMask = /*#__PURE__*/memo(/*#__PURE__*/forwardRe
   }, props, {
     children: children
   }));
-}));
+});

package/esm/numbers/RollingNumber/DefaultRollingNumberSymbol.js

@@ -1,14 +1,15 @@
-const _excluded = ["value", "textProps", "style", "styles"];
+const _excluded = ["ref", "value", "textProps", "style", "styles"];
 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 } from 'react';
+import { memo, useMemo } from 'react';
 import Animated from 'react-native-reanimated';
 import { HStack } from '../../layout/HStack';
 import { Text } from '../../typography/Text';
 import { jsx as _jsx } from "react/jsx-runtime";
 const AnimatedText = Animated.createAnimatedComponent(Text);
-export const DefaultRollingNumberSymbol = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+export const DefaultRollingNumberSymbol = /*#__PURE__*/memo(_ref => {
   let {
+      ref,
       value,
       textProps,
       style,
@@ -28,4 +29,4 @@ export const DefaultRollingNumberSymbol = /*#__PURE__*/memo(/*#__PURE__*/forward
   }, props, {
     children: textNode
   }));
-}));
+});

package/esm/numbers/RollingNumber/DefaultRollingNumberValueSection.js

@@ -1,7 +1,7 @@
-const _excluded = ["intlNumberParts", "textProps", "digitHeight", "formattedValue", "RollingNumberDigitComponent", "RollingNumberSymbolComponent", "RollingNumberMaskComponent", "style", "styles", "justifyContent", "transitionConfig", "digitTransitionVariant", "direction"];
+const _excluded = ["ref", "intlNumberParts", "textProps", "digitHeight", "formattedValue", "RollingNumberDigitComponent", "RollingNumberSymbolComponent", "RollingNumberMaskComponent", "style", "styles", "justifyContent", "transitionConfig", "digitTransitionVariant", "direction"];
 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, useCallback, useMemo, useState } from 'react';
+import { memo, useCallback, useMemo, useState } from 'react';
 import Animated from 'react-native-reanimated';
 import { HStack } from '../../layout/HStack';
 import { Text } from '../../typography/Text';
@@ -12,8 +12,9 @@ import { digits } from './RollingNumber';
 import { jsx as _jsx } from "react/jsx-runtime";
 const AnimatedText = Animated.createAnimatedComponent(Text);
 const isDigit = char => digits.includes(parseInt(char));
-export const DefaultRollingNumberValueSection = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+export const DefaultRollingNumberValueSection = /*#__PURE__*/memo(_ref => {
   let {
+      ref,
       intlNumberParts,
       textProps,
       digitHeight,
@@ -100,4 +101,4 @@ export const DefaultRollingNumberValueSection = /*#__PURE__*/memo(/*#__PURE__*/f
   }, props, {
     children: formattedValue ? formattedValueDigits : intlPartsDigits
   }));
-}));
+});