@coinbase/cds-mobile 9.6.0 → 9.6.2

package/esm/buttons/DefaultSlideButtonHandle.js

@@ -1,7 +1,7 @@
-const _excluded = ["checked", "compact", "disabled", "style", "variant", "startUncheckedNode", "endCheckedNode", "checkedLabel", "borderRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius"];
+const _excluded = ["ref", "checked", "compact", "disabled", "style", "variant", "startUncheckedNode", "endCheckedNode", "checkedLabel", "borderRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius"];
 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, useEffect, useMemo } from 'react';
+import React, { memo, useEffect, useMemo } from 'react';
 import { StyleSheet } from 'react-native';
 import Animated, { useAnimatedStyle, useSharedValue, withDelay, withSpring } from 'react-native-reanimated';
 import { variants } from '@coinbase/cds-common/tokens/button';
@@ -96,8 +96,9 @@ export const SlideButtonHandleUnchecked = /*#__PURE__*/memo(_ref2 => {
     })
   });
 });
-export const DefaultSlideButtonHandle = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref3, ref) => {
+export const DefaultSlideButtonHandle = /*#__PURE__*/memo(_ref3 => {
   let {
+      ref,
       checked,
       compact,
       disabled,
@@ -164,4 +165,4 @@ export const DefaultSlideButtonHandle = /*#__PURE__*/memo(/*#__PURE__*/forwardRe
       })
     })]
   }));
-}));
+});

package/esm/buttons/IconButton.js

@@ -1,7 +1,8 @@
-const _excluded = ["name", "active", "variant", "alignSelf", "transparent", "compact", "background", "color", "borderColor", "iconSize", "borderWidth", "borderRadius", "feedback", "flush", "padding", "loading", "progressCircleSize", "style", "styles", "accessibilityHint", "accessibilityLabel"];
+const _excluded = ["ref"],
+  _excluded2 = ["name", "active", "variant", "alignSelf", "transparent", "compact", "background", "color", "borderColor", "iconSize", "borderWidth", "borderRadius", "feedback", "flush", "padding", "loading", "progressCircleSize", "style", "styles", "accessibilityHint", "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 { forwardRef, memo } from 'react';
+import { memo } from 'react';
 import { transparentVariants, variants } from '@coinbase/cds-common/tokens/button';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
@@ -9,7 +10,11 @@ import { Icon } from '../icons/Icon';
 import { Pressable } from '../system/Pressable';
 import { ProgressCircle } from '../visualizations/ProgressCircle';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+export const IconButton = /*#__PURE__*/memo(_ref => {
+  let {
+      ref
+    } = _ref,
+    _props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const mergedProps = useComponentConfig('IconButton', _props);
   const {
       name,
@@ -35,7 +40,7 @@ export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref
       accessibilityHint,
       accessibilityLabel
     } = mergedProps,
-    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
   const theme = useTheme();
   const iconSizeValue = theme.iconSize[iconSize];
   const variantMap = transparent ? transparentVariants : variants;
@@ -84,5 +89,5 @@ export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref
       }
     })
   }));
-}));
+});
 IconButton.displayName = 'IconButton';

package/esm/buttons/IconCounterButton.js

@@ -1,7 +1,8 @@
-const _excluded = ["icon", "size", "active", "count", "color", "dangerouslySetColor", "styles", "style"];
+const _excluded = ["ref"],
+  _excluded2 = ["icon", "size", "active", "count", "color", "dangerouslySetColor", "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 { formatCount } from '@coinbase/cds-common/utils/formatCount';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Icon } from '../icons/Icon';
@@ -9,7 +10,11 @@ import { HStack } from '../layout/HStack';
 import { Pressable } from '../system/Pressable';
 import { Text } from '../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const IconCounterButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function IconCounterButton(_props, ref) {
+export const IconCounterButton = /*#__PURE__*/memo(function IconCounterButton(_ref) {
+  let {
+      ref
+    } = _ref,
+    _props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const mergedProps = useComponentConfig('IconCounterButton', _props);
   const {
       icon,
@@ -21,7 +26,7 @@ export const IconCounterButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(funct
       styles,
       style
     } = mergedProps,
-    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
   const rootStyleOverride = styles == null ? void 0 : styles.root;
   const rootStyle = useMemo(() => {
     if (typeof style === 'function' || typeof rootStyleOverride === 'function') {
@@ -55,4 +60,4 @@ export const IconCounterButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(funct
       }) : null]
     })
   }));
-}));
+});

package/esm/buttons/SlideButton.js

@@ -1,7 +1,8 @@
-const _excluded = ["checked", "compact", "borderRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "uncheckedLabel", "checkedLabel", "onSlideStart", "onSlideCancel", "onSlideEnd", "onSlideComplete", "onChange", "disabled", "height", "checkThreshold", "SlideButtonHandleComponent", "SlideButtonBackgroundComponent", "styles", "testID", "autoCompleteSlideOnThresholdMet", "variant", "startUncheckedNode", "endCheckedNode"];
+const _excluded = ["ref"],
+  _excluded2 = ["checked", "compact", "borderRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "uncheckedLabel", "checkedLabel", "onSlideStart", "onSlideCancel", "onSlideEnd", "onSlideComplete", "onChange", "disabled", "height", "checkThreshold", "SlideButtonHandleComponent", "SlideButtonBackgroundComponent", "styles", "testID", "autoCompleteSlideOnThresholdMet", "variant", "startUncheckedNode", "endCheckedNode"];
 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, useId, useMemo } from 'react';
+import React, { memo, useCallback, useEffect, useId, useMemo } from 'react';
 import { View } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
@@ -13,7 +14,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const slideButtonTestID = 'slide-button';
 export const DEFAULT_COMPACT_HEIGHT = 40;
 export const DEFAULT_REGULAR_HEIGHT = 56;
-export const SlideButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+export const SlideButton = /*#__PURE__*/memo(_ref => {
+  let {
+      ref
+    } = _ref,
+    _props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const mergedProps = useComponentConfig('SlideButton', _props);
   const {
       checked,
@@ -42,7 +47,7 @@ export const SlideButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, re
       startUncheckedNode,
       endCheckedNode
     } = mergedProps,
-    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
   const labelId = useId();
   const [containerSize, onLayout] = useLayout();
   const progress = useSharedValue(checked ? 1 : 0);
@@ -68,10 +73,10 @@ export const SlideButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, re
   const panGesture = useMemo(() => Gesture.Pan().onStart(() => {
     if (checked || disabled) return;
     onSlideStart == null || onSlideStart();
-  }).onUpdate(_ref => {
+  }).onUpdate(_ref2 => {
     let {
       translationX
-    } = _ref;
+    } = _ref2;
     if (checked || disabled) return;
     const newWidth = (buttonMinWidth + translationX) / containerSize.width;
     const thresholdReached = newWidth >= checkThreshold;
@@ -81,10 +86,10 @@ export const SlideButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, re
     }
     const progressValue = autoCompleteSlideOnThresholdMet ? newWidth : Math.min(1, newWidth);
     progress.value = progressValue;
-  }).onEnd(_ref2 => {
+  }).onEnd(_ref3 => {
     let {
       translationX
-    } = _ref2;
+    } = _ref3;
     if (checked || disabled) return;
     const newWidth = (buttonMinWidth + translationX) / containerSize.width;
     if (newWidth >= checkThreshold) {
@@ -159,4 +164,4 @@ export const SlideButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, re
       })
     })]
   });
-}));
+});

package/esm/cards/CardGroup.js

@@ -1,7 +1,7 @@
-const _excluded = ["accessibilityLabel", "accessibilityHint", "children", "direction", "divider", "marginX"];
+const _excluded = ["ref", "accessibilityLabel", "accessibilityHint", "children", "direction", "divider", "marginX"];
 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 { gutter } from '@coinbase/cds-common/tokens/sizing';
 import { Divider } from '../layout/Divider';
 import { Group } from '../layout/Group';
@@ -20,8 +20,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * @deprecated Use `Box`, `HStack` or `VStack` instead. This will be removed in a future major release.
  * @deprecationExpectedRemoval v10
  */
-export const CardGroup = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function CardGroup(_ref, ref) {
+export const CardGroup = /*#__PURE__*/memo(function CardGroup(_ref) {
   let {
+      ref,
       accessibilityLabel,
       accessibilityHint = accessibilityLabel,
       children,
@@ -40,5 +41,5 @@ export const CardGroup = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Card
   }, props, {
     children: children
   }));
-}));
+});
 CardGroup.displayName = 'CardGroup';

package/esm/cards/CardRoot.js

@@ -1,7 +1,7 @@
-const _excluded = ["children", "renderAsPressable"];
+const _excluded = ["ref", "children", "renderAsPressable"];
 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 { HStack } from '../layout/HStack';
 import { Pressable } from '../system/Pressable';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -11,8 +11,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * By default, it renders as an HStack for horizontal layout.
  * When `renderAsPressable` is true, it renders as a Pressable component.
  */
-export const CardRoot = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+export const CardRoot = /*#__PURE__*/memo(_ref => {
   let {
+      ref,
       children,
       renderAsPressable
     } = _ref,
@@ -23,5 +24,5 @@ export const CardRoot = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
   }, props, {
     children: children
   }));
-}));
+});
 CardRoot.displayName = 'CardRoot';

package/esm/cards/ContentCard/ContentCard.js

@@ -1,12 +1,13 @@
-const _excluded = ["testID", "children", "maxWidth", "minWidth", "borderRadius", "padding", "gap"];
+const _excluded = ["ref", "testID", "children", "maxWidth", "minWidth", "borderRadius", "padding", "gap"];
 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 { contentCardMaxWidth, contentCardMinWidth } from '@coinbase/cds-common/tokens/card';
 import { VStack } from '../../layout/VStack';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const ContentCard = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function ContentCard(_ref, ref) {
+export const ContentCard = /*#__PURE__*/memo(function ContentCard(_ref) {
   let {
+      ref,
       testID,
       children,
       maxWidth = contentCardMaxWidth,
@@ -27,4 +28,4 @@ export const ContentCard = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Co
   }, props, {
     children: children
   }));
-}));
+});

package/esm/cards/ContentCard/ContentCardBody.js

@@ -1,7 +1,7 @@
-const _excluded = ["body", "label", "media", "mediaPosition", "mediaPlacement", "title", "description", "children", "gap", "testID", "style", "styles"];
+const _excluded = ["ref", "body", "label", "media", "mediaPosition", "mediaPlacement", "title", "description", "children", "gap", "testID", "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 React, { forwardRef, memo, useMemo } from 'react';
+import React, { memo, useMemo } from 'react';
 import { Box } from '../../layout/Box';
 import { VStack } from '../../layout/VStack';
 import { Text } from '../../typography/Text';
@@ -12,8 +12,9 @@ const mapMediaPositionToMediaPlacement = {
   right: 'end',
   left: 'start'
 };
-export const ContentCardBody = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function ContentCardBody(_ref, ref) {
+export const ContentCardBody = /*#__PURE__*/memo(function ContentCardBody(_ref) {
   let {
+      ref,
       body,
       label,
       media,
@@ -100,4 +101,4 @@ export const ContentCardBody = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(functio
       children: [isMediaFirst && mediaBox, textNode, isMediaLast && mediaBox]
     }), children]
   }));
-}));
+});

package/esm/cards/ContentCard/ContentCardFooter.js

@@ -1,11 +1,12 @@
-const _excluded = ["children", "justifyContent"];
+const _excluded = ["ref", "children", "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 React, { forwardRef, memo } from 'react';
+import React, { memo } from 'react';
 import { HStack } from '../../layout/HStack';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const ContentCardFooter = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+export const ContentCardFooter = /*#__PURE__*/memo(_ref => {
   let {
+      ref,
       children,
       justifyContent = 'space-between'
     } = _ref,
@@ -16,4 +17,4 @@ export const ContentCardFooter = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref
   }, props, {
     children: children
   }));
-}));
+});

package/esm/cards/ContentCard/ContentCardHeader.js

@@ -1,14 +1,15 @@
-const _excluded = ["avatar", "title", "meta", "end", "subtitle", "actions", "thumbnail", "gap", "testID", "styles", "style"];
+const _excluded = ["ref", "avatar", "title", "meta", "end", "subtitle", "actions", "thumbnail", "gap", "testID", "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 { HStack } from '../../layout/HStack';
 import { VStack } from '../../layout/VStack';
 import { Avatar } from '../../media/Avatar';
 import { Text } from '../../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const ContentCardHeader = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function ContentCardHeader(_ref, ref) {
+export const ContentCardHeader = /*#__PURE__*/memo(function ContentCardHeader(_ref) {
   let {
+      ref,
       avatar,
       title,
       meta,
@@ -81,4 +82,4 @@ export const ContentCardHeader = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(funct
       })]
     }), actions]
   }));
-}));
+});

package/esm/cards/MediaCard/index.js

@@ -1,8 +1,8 @@
 const _excluded = ["root"],
-  _excluded2 = ["title", "subtitle", "description", "thumbnail", "media", "mediaPlacement", "style", "styles"];
+  _excluded2 = ["ref", "title", "subtitle", "description", "thumbnail", "media", "mediaPlacement", "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 } from 'react';
+import { memo } from 'react';
 import { CardRoot } from '../CardRoot';
 import { MediaCardLayout } from './MediaCardLayout';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -11,8 +11,9 @@ const mediaCardContainerProps = {
   background: 'bgAlternate',
   overflow: 'hidden'
 };
-export const MediaCard = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+export const MediaCard = /*#__PURE__*/memo(_ref => {
   let {
+      ref,
       title,
       subtitle,
       description,
@@ -41,5 +42,5 @@ export const MediaCard = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
       title: title
     })
   }));
-}));
+});
 MediaCard.displayName = 'MediaCard';

package/esm/cards/MessagingCard/index.js

@@ -1,8 +1,8 @@
 const _excluded = ["root"],
-  _excluded2 = ["type", "title", "description", "tag", "action", "onActionButtonPress", "actionButtonAccessibilityLabel", "dismissButton", "onDismissButtonPress", "dismissButtonAccessibilityLabel", "mediaPlacement", "media", "style", "styles"];
+  _excluded2 = ["ref", "type", "title", "description", "tag", "action", "onActionButtonPress", "actionButtonAccessibilityLabel", "dismissButton", "onDismissButtonPress", "dismissButtonAccessibilityLabel", "mediaPlacement", "media", "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 } from 'react';
+import { memo } from 'react';
 import { CardRoot } from '../CardRoot';
 import { MessagingCardLayout } from './MessagingCardLayout';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -10,8 +10,9 @@ const messagingCardContainerProps = {
   borderRadius: 500,
   overflow: 'hidden'
 };
-export const MessagingCard = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+export const MessagingCard = /*#__PURE__*/memo(_ref => {
   let {
+      ref,
       type,
       title,
       description,
@@ -54,5 +55,5 @@ export const MessagingCard = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, re
       type: type
     })
   }));
-}));
+});
 MessagingCard.displayName = 'MessagingCard';

package/esm/carousel/Carousel.js

@@ -1,7 +1,8 @@
-const _excluded = ["children", "title", "hideNavigation", "hidePagination", "paginationVariant", "drag", "snapMode", "NavigationComponent", "PaginationComponent", "style", "styles", "nextPageAccessibilityLabel", "previousPageAccessibilityLabel", "startAutoplayAccessibilityLabel", "stopAutoplayAccessibilityLabel", "paginationAccessibilityLabel", "onChangePage", "onDragStart", "onDragEnd", "loop", "autoplay", "autoplayInterval"];
+const _excluded = ["ref"],
+  _excluded2 = ["children", "title", "hideNavigation", "hidePagination", "paginationVariant", "drag", "snapMode", "NavigationComponent", "PaginationComponent", "style", "styles", "nextPageAccessibilityLabel", "previousPageAccessibilityLabel", "startAutoplayAccessibilityLabel", "stopAutoplayAccessibilityLabel", "paginationAccessibilityLabel", "onChangePage", "onDragStart", "onDragEnd", "loop", "autoplay", "autoplayInterval"];
 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, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import React, { memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { View } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import { useCarouselAutoplay } from '@coinbase/cds-common/carousel/useCarouselAutoplay';
@@ -255,7 +256,11 @@ const animationConfig = {
   stiffness: 900,
   damping: 120
 };
-export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+export const Carousel = /*#__PURE__*/memo(_ref4 => {
+  let {
+      ref
+    } = _ref4,
+    _props = _objectWithoutPropertiesLoose(_ref4, _excluded);
   const mergedProps = useComponentConfig('Carousel', _props);
   const {
       children,
@@ -281,7 +286,7 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref)
       autoplay,
       autoplayInterval = 3000
     } = mergedProps,
-    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
   const carouselScrollX = useRef(0);
   const animationApi = useSpring({
     x: carouselScrollX.current,
@@ -500,10 +505,10 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref)
   .failOffsetY([-10, 10]).onStart(() => {
     if (!isDragEnabled) return;
     handleDragStart();
-  }).onUpdate(_ref4 => {
+  }).onUpdate(_ref5 => {
     let {
       translationX
-    } = _ref4;
+    } = _ref5;
     if (!isDragEnabled) return;
     let newOffset;
     if (shouldLoop) {
@@ -512,11 +517,11 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref)
       newOffset = clampWithElasticResistance(carouselScrollX.current - translationX, maxScrollOffset);
     }
     animationApi.x.set(newOffset);
-  }).onEnd(_ref5 => {
+  }).onEnd(_ref6 => {
     let {
       translationX,
       velocityX
-    } = _ref5;
+    } = _ref6;
     if (!isDragEnabled) return;
     let projectedOffset;
     if (shouldLoop) {
@@ -701,4 +706,4 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref)
       }))
     })
   });
-}));
+});

package/esm/chips/Chip.js

@@ -1,7 +1,8 @@
-const _excluded = ["alignSelf", "children", "start", "end", "invertColorScheme", "inverted", "maxWidth", "compact", "gap", "paddingX", "paddingY", "alignItems", "justifyContent", "padding", "paddingTop", "paddingBottom", "paddingStart", "paddingEnd", "numberOfLines", "testID", "contentStyle", "borderRadius", "background", "style", "styles", "onPress", "color", "font"];
+const _excluded = ["ref"],
+  _excluded2 = ["alignSelf", "children", "start", "end", "invertColorScheme", "inverted", "maxWidth", "compact", "gap", "paddingX", "paddingY", "alignItems", "justifyContent", "padding", "paddingTop", "paddingBottom", "paddingStart", "paddingEnd", "numberOfLines", "testID", "contentStyle", "borderRadius", "background", "style", "styles", "onPress", "color", "font"];
 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, Fragment, memo } from 'react';
+import React, { Fragment, memo } from 'react';
 import { chipMaxWidth } from '@coinbase/cds-common/tokens/chip';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box } from '../layout/Box';
@@ -13,7 +14,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * This is a basic Chip component used to create all Chip components.
  */
-export const Chip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Chip(_props, ref) {
+export const Chip = /*#__PURE__*/memo(function Chip(_ref) {
+  let {
+      ref
+    } = _ref,
+    _props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const mergedProps = useComponentConfig('Chip', _props);
   const {
       alignSelf = 'flex-start',
@@ -45,7 +50,7 @@ export const Chip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Chip(_pro
       color = 'fg',
       font = compact ? 'label1' : 'headline'
     } = mergedProps,
-    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
   const WrapperComponent = (invertColorScheme != null ? invertColorScheme : inverted) ? InvertedThemeProvider : Fragment;
   const containerProps = {
     testID,
@@ -90,4 +95,4 @@ export const Chip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Chip(_pro
       children: content
     }))
   });
-}));
+});

package/esm/chips/InputChip.js

@@ -1,12 +1,17 @@
-const _excluded = ["value", "children", "accessibilityLabel", "invertColorScheme", "testID"];
+const _excluded = ["ref"],
+  _excluded2 = ["value", "children", "accessibilityLabel", "invertColorScheme", "testID"];
 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 { useComponentConfig } from '../hooks/useComponentConfig';
 import { Icon } from '../icons/Icon';
 import { MediaChip } from './MediaChip';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const InputChip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+export const InputChip = /*#__PURE__*/memo(_ref => {
+  let {
+      ref
+    } = _ref,
+    _props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const mergedProps = useComponentConfig('InputChip', _props);
   const {
       value,
@@ -15,7 +20,7 @@ export const InputChip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref)
       invertColorScheme = true,
       testID = 'input-chip'
     } = mergedProps,
-    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
   return /*#__PURE__*/_jsx(MediaChip, _extends({
     ref: ref,
     accessibilityLabel: accessibilityLabel,
@@ -30,4 +35,4 @@ export const InputChip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref)
   }, props, {
     children: children
   }));
-}));
+});

package/esm/chips/MediaChip.js

@@ -1,12 +1,17 @@
-const _excluded = ["start", "children", "end", "compact", "padding", "paddingX", "paddingY", "paddingTop", "paddingBottom", "paddingStart", "paddingEnd"];
+const _excluded = ["ref"],
+  _excluded2 = ["start", "children", "end", "compact", "padding", "paddingX", "paddingY", "paddingTop", "paddingBottom", "paddingStart", "paddingEnd"];
 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 { getMediaChipSpacingProps } from '@coinbase/cds-common/chips/getMediaChipSpacingProps';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Chip } from './Chip';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const MediaChip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function MediaChip(_props, ref) {
+export const MediaChip = /*#__PURE__*/memo(function MediaChip(_ref) {
+  let {
+      ref
+    } = _ref,
+    _props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const mergedProps = useComponentConfig('MediaChip', _props);
   const {
       start,
@@ -21,7 +26,7 @@ export const MediaChip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Medi
       paddingStart,
       paddingEnd
     } = mergedProps,
-    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
   const spacingProps = useMemo(() => {
     const defaults = getMediaChipSpacingProps({
       compact: !!compact,
@@ -47,4 +52,4 @@ export const MediaChip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Medi
   }, spacingProps, props, {
     children: children
   }));
-}));
+});

package/esm/chips/SelectChip.js

@@ -1,7 +1,7 @@
-const _excluded = ["children", "value", "valueLabel", "placeholder", "disabled", "accessibilityLabel", "onPress", "end", "onChange", "onBlur", "testID", "preventDismissGestures", "hideHandleBar", "disableCapturePanGestureToDismiss", "verticalDrawerPercentageOfView", "handleBarAccessibilityLabel", "active"];
+const _excluded = ["ref", "children", "value", "valueLabel", "placeholder", "disabled", "accessibilityLabel", "onPress", "end", "onChange", "onBlur", "testID", "preventDismissGestures", "hideHandleBar", "disableCapturePanGestureToDismiss", "verticalDrawerPercentageOfView", "handleBarAccessibilityLabel", "active"];
 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, useRef, useState } from 'react';
+import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { animateCaretInConfig, animateCaretOutConfig } from '@coinbase/cds-common/animation/select';
 import { useMergeRefs } from '@coinbase/cds-common/hooks/useMergeRefs';
 import { useRotateAnimation } from '../animation/useRotateAnimation';
@@ -23,9 +23,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * @deprecationExpectedRemoval v9
  * @see {@link @coinbase/cds-mobile/alpha/select-chip/SelectChip}
  */
-export const SelectChip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+export const SelectChip = /*#__PURE__*/memo(_ref => {
   var _ref2;
   let {
+      ref,
       children,
       value: defaultValue,
       valueLabel,
@@ -133,4 +134,4 @@ export const SelectChip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref)
       children: children
     })]
   });
-}));
+});