@coinbase/cds-mobile 9.6.1 → 9.6.3

package/esm/chips/TabbedChips.js

@@ -1,8 +1,9 @@
 const _excluded = ["label", "id"],
-  _excluded2 = ["tabs", "value", "testID", "onChange", "Component"];
+  _excluded2 = ["ref"],
+  _excluded3 = ["tabs", "value", "testID", "onChange", "Component"];
 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, useState } from 'react';
+import React, { memo, useCallback, useMemo, useState } from 'react';
 import { ScrollView } from 'react-native';
 import { useTabsContext } from '@coinbase/cds-common/tabs/TabsContext';
 import { useComponentConfig } from '../hooks/useComponentConfig';
@@ -37,7 +38,11 @@ const TabComponent = _ref => {
 const TabsActiveIndicatorComponent = () => {
   return null;
 };
-const TabbedChipsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function TabbedChips(_props, ref) {
+const TabbedChipsComponent = /*#__PURE__*/memo(function TabbedChips(_ref2) {
+  let {
+      ref
+    } = _ref2,
+    _props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
   const mergedProps = useComponentConfig('TabbedChips', _props);
   const {
       tabs,
@@ -46,7 +51,7 @@ const TabbedChipsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function
       onChange,
       Component = TabComponent
     } = mergedProps,
-    props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded3);
   const activeTab = useMemo(() => tabs.find(tab => tab.id === value), [tabs, value]);
   const [scrollTarget, setScrollTarget] = useState(null);
   const handleChange = useCallback(tabValue => {
@@ -86,7 +91,7 @@ const TabbedChipsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function
       })
     }), isScrollContentOverflowing && isScrollContentOffscreenRight ? /*#__PURE__*/_jsx(OverflowGradient, {}) : null]
   }));
-}));
+});
 TabbedChipsComponent.displayName = 'TabbedChips';
 
 /**

package/esm/coachmark/Coachmark.js

@@ -1,7 +1,8 @@
-const _excluded = ["title", "content", "checkbox", "media", "onClose", "action", "width", "closeButtonAccessibilityLabel", "testID"];
+const _excluded = ["ref"],
+  _excluded2 = ["title", "content", "checkbox", "media", "onClose", "action", "width", "closeButtonAccessibilityLabel", "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 { useWindowDimensions } from 'react-native';
 import { IconButton } from '../buttons/IconButton';
 import { useComponentConfig } from '../hooks/useComponentConfig';
@@ -12,7 +13,11 @@ import { VStack } from '../layout/VStack';
 import { InvertedThemeProvider } from '../system/ThemeProvider';
 import { Text } from '../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const Coachmark = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+export const Coachmark = /*#__PURE__*/memo(_ref => {
+  let {
+      ref
+    } = _ref,
+    _props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const mergedProps = useComponentConfig('Coachmark', _props);
   const {
       title,
@@ -25,7 +30,7 @@ export const Coachmark = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref)
       closeButtonAccessibilityLabel,
       testID
     } = mergedProps,
-    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
   const theme = useTheme();
   const {
     width: windowWidth
@@ -75,4 +80,4 @@ export const Coachmark = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref)
       })]
     }))
   });
-}));
+});

package/esm/collapsible/Collapsible.js

@@ -1,5 +1,7 @@
+const _excluded = ["ref"];
 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, useEffect, useMemo, useRef } from 'react';
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { memo, useEffect, useMemo, useRef } from 'react';
 import { ScrollView, StyleSheet, View } from 'react-native';
 import Animated, { useAnimatedReaction, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
 import { animateInMaxSizeConfig, animateInOpacityConfig, animateOutMaxSizeConfig, animateOutOpacityConfig } from '@coinbase/cds-common/animation/collapsible';
@@ -11,8 +13,12 @@ import { convertMotionConfigs } from '../motion/convertMotionConfig';
 import { withMotionTiming } from '../motion/withMotionTiming';
 import { jsx as _jsx } from "react/jsx-runtime";
 const ReanimatedView = Animated.createAnimatedComponent(View);
-export const Collapsible = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, forwardedRef) => {
-  var _ref, _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8;
+export const Collapsible = /*#__PURE__*/memo(_ref => {
+  var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9;
+  let {
+      ref: forwardedRef
+    } = _ref,
+    _props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const mergedProps = useComponentConfig('Collapsible', _props);
   const {
     children,
@@ -43,10 +49,10 @@ export const Collapsible = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, fo
   const heightAnimatedValue = useSharedValue(animateInMaxSize.fromValue);
   const opacityAnimatedValue = useSharedValue(animateInOpacity.fromValue);
   const spacingStyles = {
-    paddingTop: theme.space[(_ref = (_ref2 = paddingTop != null ? paddingTop : paddingY) != null ? _ref2 : padding) != null ? _ref : 0],
-    paddingEnd: theme.space[(_ref3 = (_ref4 = paddingEnd != null ? paddingEnd : paddingX) != null ? _ref4 : padding) != null ? _ref3 : 0],
-    paddingBottom: theme.space[(_ref5 = (_ref6 = paddingBottom != null ? paddingBottom : paddingY) != null ? _ref6 : padding) != null ? _ref5 : 0],
-    paddingStart: theme.space[(_ref7 = (_ref8 = paddingStart != null ? paddingStart : paddingX) != null ? _ref8 : padding) != null ? _ref7 : 0]
+    paddingTop: theme.space[(_ref2 = (_ref3 = paddingTop != null ? paddingTop : paddingY) != null ? _ref3 : padding) != null ? _ref2 : 0],
+    paddingEnd: theme.space[(_ref4 = (_ref5 = paddingEnd != null ? paddingEnd : paddingX) != null ? _ref5 : padding) != null ? _ref4 : 0],
+    paddingBottom: theme.space[(_ref6 = (_ref7 = paddingBottom != null ? paddingBottom : paddingY) != null ? _ref7 : padding) != null ? _ref6 : 0],
+    paddingStart: theme.space[(_ref8 = (_ref9 = paddingStart != null ? paddingStart : paddingX) != null ? _ref9 : padding) != null ? _ref8 : 0]
   };
   const prevCollapsed = usePreviousValue(collapsed);
 
@@ -122,7 +128,7 @@ export const Collapsible = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, fo
       children: children
     }))
   });
-}));
+});
 const styles = StyleSheet.create({
   container: {
     overflow: 'hidden'

package/esm/controls/Checkbox.js

@@ -1,7 +1,8 @@
-const _excluded = ["children", "accessibilityLabel", "accessibilityHint", "accessible"];
+const _excluded = ["ref"],
+  _excluded2 = ["children", "accessibilityLabel", "accessibilityHint", "accessible"];
 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 { Animated } from 'react-native';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
@@ -71,7 +72,11 @@ const CheckboxIcon = /*#__PURE__*/memo(_ref => {
     })
   });
 });
-const CheckboxWithRef = /*#__PURE__*/forwardRef(function Checkbox(_props, ref) {
+const CheckboxWithRef = function Checkbox(_ref2) {
+  let {
+      ref
+    } = _ref2,
+    _props = _objectWithoutPropertiesLoose(_ref2, _excluded);
   const mergedProps = useComponentConfig('Checkbox', _props);
   const {
       children,
@@ -79,7 +84,7 @@ const CheckboxWithRef = /*#__PURE__*/forwardRef(function Checkbox(_props, ref) {
       accessibilityHint,
       accessible = true
     } = mergedProps,
-    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
   const accessibilityLabelValue = typeof children === 'string' && accessibilityLabel === undefined ? children : accessibilityLabel;
   const accessibilityHintValue = typeof children === 'string' && accessibilityHint === undefined ? children : accessibilityHint;
   return /*#__PURE__*/_jsx(Control, _extends({
@@ -93,8 +98,7 @@ const CheckboxWithRef = /*#__PURE__*/forwardRef(function Checkbox(_props, ref) {
   }, props, {
     children: CheckboxIcon
   }));
-  // Make forwardRef result function stay generic function type
-});
+};
 
-// Make memoized function stay generic function type
+// Preserve generic call signature through React.memo
 export const Checkbox = /*#__PURE__*/memo(CheckboxWithRef);

package/esm/controls/CheckboxCell.js

@@ -1,7 +1,8 @@
-const _excluded = ["title", "description", "checked", "onChange", "disabled", "columnGap", "rowGap", "padding", "borderWidth", "borderRadius", "background", "borderColor", "controlColor", "controlSize", "accessibilityLabel", "accessibilityHint", "testID", "value", "width", "style", "contentStyle", "wrapperStyles", "onPressIn", "onPressOut", "pressedBorderColor", "pressedBorderWidth", "indeterminate", "readOnly", "styles"];
+const _excluded = ["ref"],
+  _excluded2 = ["title", "description", "checked", "onChange", "disabled", "columnGap", "rowGap", "padding", "borderWidth", "borderRadius", "background", "borderColor", "controlColor", "controlSize", "accessibilityLabel", "accessibilityHint", "testID", "value", "width", "style", "contentStyle", "wrapperStyles", "onPressIn", "onPressOut", "pressedBorderColor", "pressedBorderWidth", "indeterminate", "readOnly", "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, useCallback, useMemo, useState } from 'react';
+import React, { memo, useCallback, useMemo, useState } from 'react';
 import { Animated } from 'react-native';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useLayout } from '../hooks/useLayout';
@@ -14,7 +15,11 @@ import { Pressable } from '../system/Pressable';
 import { Text } from '../typography/Text';
 import { Checkbox } from './Checkbox';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const CheckboxCellWithRef = /*#__PURE__*/forwardRef(function CheckboxCell(_props, ref) {
+const CheckboxCellWithRef = function CheckboxCell(_ref) {
+  let {
+      ref
+    } = _ref,
+    _props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const mergedProps = useComponentConfig('CheckboxCell', _props);
   const {
       title,
@@ -47,7 +52,7 @@ const CheckboxCellWithRef = /*#__PURE__*/forwardRef(function CheckboxCell(_props
       readOnly,
       styles
     } = mergedProps,
-    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
   const theme = useTheme();
   const [layout, setLayout] = useLayout();
   const [pressed, setPressed] = useState(false);
@@ -191,6 +196,6 @@ const CheckboxCellWithRef = /*#__PURE__*/forwardRef(function CheckboxCell(_props
       style: mergedFocusRingStyle
     })]
   });
-});
+};
 export const CheckboxCell = /*#__PURE__*/memo(CheckboxCellWithRef);
 CheckboxCell.displayName = 'CheckboxCell';

package/esm/controls/CheckboxGroup.js

@@ -1,15 +1,16 @@
-const _excluded = ["children", "label", "accessibilityLabel", "onChange", "selectedValues", "testID"],
+const _excluded = ["ref", "children", "label", "accessibilityLabel", "onChange", "selectedValues", "testID"],
   _excluded2 = ["value", "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, { Children, forwardRef, isValidElement, memo, useMemo } from 'react';
+import React, { Children, isValidElement, memo, useMemo } from 'react';
 import { isDevelopment } from '@coinbase/cds-utils';
 import { Checkbox } from './Checkbox';
 import { ControlGroup } from './ControlGroup';
 import { jsx as _jsx } from "react/jsx-runtime";
 // Follows behavior describe in https://www.w3.org/TR/wai-aria-practices/examples/checkbox/checkbox-2/checkbox-2.html
-const CheckboxGroupWithRef = /*#__PURE__*/forwardRef(function CheckboxGroupWithRef(_ref, ref) {
+const CheckboxGroupWithRef = function CheckboxGroupWithRef(_ref) {
   let {
+      ref,
       children,
       label,
       accessibilityLabel,
@@ -69,10 +70,9 @@ const CheckboxGroupWithRef = /*#__PURE__*/forwardRef(function CheckboxGroupWithR
     testID: testID,
     value: selectedValuesArray
   }, restProps));
-  // Make forwardRef result function stay generic function type
-});
+};
 
-// Make memoized function stay generic function type
+// Preserve generic call signature through React.memo
 /**
  * @deprecated CheckboxGroup is deprecated. Use ControlGroup with accessibilityRole="combobox" instead. This will be removed in a future major release.
  * @deprecationExpectedRemoval v8

package/esm/controls/Control.js

@@ -1,7 +1,8 @@
-const _excluded = ["testID", "label", "checked", "indeterminate", "disabled", "readOnly", "onChange", "hitSlop", "value", "controlColor", "elevation", "accessibilityRole", "accessibilityLabel", "accessibilityHint", "children", "shouldUseSwitchTransition", "accessible", "style", "color", "background", "borderColor", "borderRadius", "borderWidth", "controlSize", "dotSize"];
+const _excluded = ["ref"],
+  _excluded2 = ["testID", "label", "checked", "indeterminate", "disabled", "readOnly", "onChange", "hitSlop", "value", "controlColor", "elevation", "accessibilityRole", "accessibilityLabel", "accessibilityHint", "children", "shouldUseSwitchTransition", "accessible", "style", "color", "background", "borderColor", "borderRadius", "borderWidth", "controlSize", "dotSize"];
 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 } from 'react';
+import React, { memo, useCallback, useEffect, useMemo, useRef } from 'react';
 import { I18nManager, Keyboard, Pressable, View } from 'react-native';
 import { accessibleOpacityDisabled, opacityPressed } from '@coinbase/cds-common/tokens/interactable';
 import { isDevelopment } from '@coinbase/cds-utils';
@@ -11,7 +12,11 @@ import { Text } from '../typography/Text';
 import { Haptics } from '../utils/haptics';
 import { useControlMotionProps } from './useControlMotionProps';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const ControlWithRef = /*#__PURE__*/forwardRef(function ControlWithRef(_props, ref) {
+const ControlWithRef = function ControlWithRef(_ref) {
+  let {
+      ref
+    } = _ref,
+    _props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const mergedProps = useComponentConfig('Control', _props);
   const {
       testID,
@@ -40,7 +45,7 @@ const ControlWithRef = /*#__PURE__*/forwardRef(function ControlWithRef(_props, r
       controlSize,
       dotSize
     } = mergedProps,
-    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
   const theme = useTheme();
   if (isDevelopment() && accessible && !label && !accessibilityLabel) {
     console.warn("Please specify an accessibility label for the " + accessibilityRole + " control with value " + value + ".");
@@ -100,10 +105,10 @@ const ControlWithRef = /*#__PURE__*/forwardRef(function ControlWithRef(_props, r
   const handleAccessibilityAction = useCallback(event => {
     if (event.nativeEvent.actionName === 'activate') handlePress();
   }, [handlePress]);
-  const controlIcon = useCallback(_ref => {
+  const controlIcon = useCallback(_ref2 => {
     let {
       pressed
-    } = _ref;
+    } = _ref2;
     /**
      * If the control has label, the label's lineHeight doesn't match the icon size. We need to
      * wrap the icon with a container that match the lineHeight of the label typography and
@@ -156,8 +161,7 @@ const ControlWithRef = /*#__PURE__*/forwardRef(function ControlWithRef(_props, r
   }, props, {
     children: controlIcon
   }));
-  // Make forwardRef result function stay generic function type
-});
+};
 
-// Make memoized function stay generic function type
+// Preserve generic call signature through React.memo
 export const Control = /*#__PURE__*/memo(ControlWithRef);

package/esm/controls/ControlGroup.js

@@ -1,12 +1,17 @@
-const _excluded = ["ControlComponent", "options", "label", "aria-labelledby", "aria-label", "onChange", "value", "testID", "gap", "role"];
+const _excluded = ["ref"],
+  _excluded2 = ["ControlComponent", "options", "label", "aria-labelledby", "aria-label", "onChange", "value", "testID", "gap", "role"];
 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 { isDevelopment } from '@coinbase/cds-utils';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Group } from '../layout/Group';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const ControlGroupWithRef = /*#__PURE__*/forwardRef(function ControlGroup(_props, ref) {
+const ControlGroupWithRef = function ControlGroup(_ref) {
+  let {
+      ref
+    } = _ref,
+    _props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const mergedProps = useComponentConfig('ControlGroup', _props);
   const {
       ControlComponent,
@@ -20,7 +25,7 @@ const ControlGroupWithRef = /*#__PURE__*/forwardRef(function ControlGroup(_props
       gap = 2,
       role = 'group'
     } = mergedProps,
-    restProps = _objectWithoutPropertiesLoose(mergedProps, _excluded);
+    restProps = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
   if (isDevelopment() && !label && !ariaLabelledby && !ariaLabel) {
     console.warn('Please specify a label or aria-labelledby for the ControlGroup.');
   }
@@ -44,5 +49,5 @@ const ControlGroupWithRef = /*#__PURE__*/forwardRef(function ControlGroup(_props
       }, optionProps), optionValue);
     })]
   }));
-});
+};
 export const ControlGroup = /*#__PURE__*/memo(ControlGroupWithRef);

package/esm/controls/InputIconButton.js

@@ -1,7 +1,7 @@
-const _excluded = ["disableInheritFocusStyle", "testID", "variant", "accessibilityLabel", "accessibilityHint"];
+const _excluded = ["ref", "disableInheritFocusStyle", "testID", "variant", "accessibilityLabel", "accessibilityHint"];
 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, useContext } from 'react';
+import React, { memo, useContext } from 'react';
 import { IconButton } from '../buttons/IconButton';
 import { Box } from '../layout/Box';
 import { TextInputFocusVariantContext } from './context';
@@ -14,8 +14,9 @@ export const variantTransformMap = {
   foregroundMuted: 'secondary',
   secondary: 'secondary'
 };
-export const InputIconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function InputIconButton(_ref, ref) {
+export const InputIconButton = /*#__PURE__*/memo(function InputIconButton(_ref) {
   let {
+      ref,
       disableInheritFocusStyle = false,
       testID,
       variant = 'primary',
@@ -37,4 +38,4 @@ export const InputIconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(functio
       variant: disableInheritFocusStyle ? variant : transformedVariant
     }, props))
   });
-}));
+});

package/esm/controls/NativeInput.js

@@ -1,13 +1,14 @@
-const _excluded = ["containerSpacing", "testID", "align", "disabled", "textAlign", "font", "accessibilityLabel", "compact", "selectionColor", "style"];
+const _excluded = ["ref", "containerSpacing", "testID", "align", "disabled", "textAlign", "font", "accessibilityLabel", "compact", "selectionColor", "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 { TextInput } from 'react-native';
 import { useTextAlign } from '../hooks/useTextAlign';
 import { useTheme } from '../hooks/useTheme';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const NativeInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+export const NativeInput = /*#__PURE__*/memo(_ref => {
   let {
+      ref,
       containerSpacing,
       testID = '',
       align = 'start',
@@ -63,4 +64,4 @@ export const NativeInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref)
     testID: testID,
     textAlign: textAlign !== 'unset' ? textAlign : undefined
   }, editableInputAddonProps));
-}));
+});

package/esm/controls/Radio.js

@@ -1,7 +1,8 @@
-const _excluded = ["children", "accessibilityHint", "accessibilityLabel"];
+const _excluded = ["ref"],
+  _excluded2 = ["children", "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 React, { forwardRef, memo } from 'react';
+import React, { memo } from 'react';
 import { Animated, StyleSheet } from 'react-native';
 import { Circle, Svg } from 'react-native-svg';
 import { useComponentConfig } from '../hooks/useComponentConfig';
@@ -85,14 +86,18 @@ const RadioIcon = _ref2 => {
     })
   });
 };
-const RadioWithRef = /*#__PURE__*/forwardRef(function Radio(_props, ref) {
+const RadioWithRef = function Radio(_ref3) {
+  let {
+      ref
+    } = _ref3,
+    _props = _objectWithoutPropertiesLoose(_ref3, _excluded);
   const mergedProps = useComponentConfig('Radio', _props);
   const {
       children,
       accessibilityHint,
       accessibilityLabel
     } = mergedProps,
-    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
   const accessibilityLabelValue = typeof children === 'string' && accessibilityLabel === undefined ? children : accessibilityLabel;
   return /*#__PURE__*/_jsx(Control, _extends({
     ref: ref,
@@ -104,8 +109,7 @@ const RadioWithRef = /*#__PURE__*/forwardRef(function Radio(_props, ref) {
   }, props, {
     children: RadioIcon
   }));
-  // Make forwardRef result function stay generic function type
-});
+};
 
-// Make memoized function stay generic function type
+// Preserve generic call signature through React.memo
 export const Radio = /*#__PURE__*/memo(RadioWithRef);

package/esm/controls/RadioCell.js

@@ -1,7 +1,8 @@
-const _excluded = ["title", "description", "checked", "onChange", "disabled", "readOnly", "columnGap", "rowGap", "padding", "borderWidth", "borderRadius", "background", "borderColor", "controlColor", "accessibilityLabel", "accessibilityHint", "testID", "value", "width", "style", "contentStyle", "wrapperStyles", "onPressIn", "onPressOut", "pressedBorderColor", "pressedBorderWidth", "styles"];
+const _excluded = ["ref"],
+  _excluded2 = ["title", "description", "checked", "onChange", "disabled", "readOnly", "columnGap", "rowGap", "padding", "borderWidth", "borderRadius", "background", "borderColor", "controlColor", "accessibilityLabel", "accessibilityHint", "testID", "value", "width", "style", "contentStyle", "wrapperStyles", "onPressIn", "onPressOut", "pressedBorderColor", "pressedBorderWidth", "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, useCallback, useMemo, useState } from 'react';
+import React, { memo, useCallback, useMemo, useState } from 'react';
 import { Animated } from 'react-native';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useLayout } from '../hooks/useLayout';
@@ -14,7 +15,11 @@ import { Pressable } from '../system/Pressable';
 import { Text } from '../typography/Text';
 import { Radio } from './Radio';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const RadioCellWithRef = /*#__PURE__*/forwardRef(function RadioCell(_props, ref) {
+const RadioCellWithRef = function RadioCell(_ref) {
+  let {
+      ref
+    } = _ref,
+    _props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const mergedProps = useComponentConfig('RadioCell', _props);
   const {
       title,
@@ -45,7 +50,7 @@ const RadioCellWithRef = /*#__PURE__*/forwardRef(function RadioCell(_props, ref)
       pressedBorderWidth = 200,
       styles
     } = mergedProps,
-    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
   const theme = useTheme();
   const [layout, setLayout] = useLayout();
   const [pressed, setPressed] = useState(false);
@@ -187,6 +192,6 @@ const RadioCellWithRef = /*#__PURE__*/forwardRef(function RadioCell(_props, ref)
       style: mergedFocusRingStyle
     })]
   });
-});
+};
 export const RadioCell = /*#__PURE__*/memo(RadioCellWithRef);
 RadioCell.displayName = 'RadioCell';

package/esm/controls/RadioGroup.js

@@ -1,15 +1,16 @@
-const _excluded = ["label", "value", "onChange", "options", "testID", "controlColor", "accessibilityLabel", "accessibilityHint", "radioAccessibilityLabel"];
+const _excluded = ["ref", "label", "value", "onChange", "options", "testID", "controlColor", "accessibilityLabel", "accessibilityHint", "radioAccessibilityLabel"];
 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 { entries } from '@coinbase/cds-utils';
 import { isDevelopment } from '@coinbase/cds-utils/env';
 import { ControlGroup } from './ControlGroup';
 import { Radio } from './Radio';
 import { jsx as _jsx } from "react/jsx-runtime";
 export { Radio };
-const RadioGroupWithRef = /*#__PURE__*/forwardRef(function RadioGroup(_ref, ref) {
+const RadioGroupWithRef = function RadioGroup(_ref) {
   let {
+      ref,
       label,
       value,
       onChange,
@@ -63,10 +64,9 @@ const RadioGroupWithRef = /*#__PURE__*/forwardRef(function RadioGroup(_ref, ref)
     testID: testID,
     value: value != null ? value : ''
   }, props));
-  // Make forwardRef result function stay generic function type
-});
+};
 
-// Make memoized function stay generic function type
+// Preserve generic call signature through React.memo
 /**
  * @deprecated RadioGroup is deprecated. Use ControlGroup with accessibilityRole="radiogroup" instead. This will be removed in a future major release.
  * @deprecationExpectedRemoval v8

package/esm/controls/SearchInput.js

@@ -1,14 +1,19 @@
-const _excluded = ["value", "testID", "onSearch", "onBack", "onChangeText", "onClear", "onFocus", "onBlur", "disabled", "disableBackArrow", "hideStartIcon", "hideEndIcon", "startIcon", "end", "startIconAccessibilityLabel", "clearIconAccessibilityLabel", "borderRadius"];
+const _excluded = ["ref"],
+  _excluded2 = ["value", "testID", "onSearch", "onBack", "onChangeText", "onClear", "onFocus", "onBlur", "disabled", "disableBackArrow", "hideStartIcon", "hideEndIcon", "startIcon", "end", "startIconAccessibilityLabel", "clearIconAccessibilityLabel", "borderRadius"];
 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, useState } from 'react';
+import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
 import { useMergeRefs } from '@coinbase/cds-common/hooks/useMergeRefs';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box } from '../layout/Box';
 import { InputIconButton } from './InputIconButton';
 import { TextInput } from './TextInput';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const SearchInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+export const SearchInput = /*#__PURE__*/memo(_ref => {
+  let {
+      ref
+    } = _ref,
+    _props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const mergedProps = useComponentConfig('SearchInput', _props);
   const {
       value,
@@ -29,7 +34,7 @@ export const SearchInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, re
       clearIconAccessibilityLabel = 'Clear text',
       borderRadius = 1000
     } = mergedProps,
-    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
   const [startIconName, setStartIconName] = useState(startIcon != null ? startIcon : 'search');
   const internalRef = useRef(null);
   const refs = useMergeRefs(ref, internalRef);
@@ -102,4 +107,4 @@ export const SearchInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, re
     value: value,
     variant: "secondary"
   }, props));
-}));
+});

package/esm/controls/Select.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { TouchableWithoutFeedback } from 'react-native';
 import { animateCaretInConfig, animateCaretOutConfig } from '@coinbase/cds-common/animation/select';
 import { useInputVariant } from '@coinbase/cds-common/hooks/useInputVariant';
@@ -31,9 +31,10 @@ const variantColorMap = {
  * @deprecated Please use the new Select alpha component instead. This will be removed in a future major release.
  * @deprecationExpectedRemoval v9
  */
-export const Select = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+export const Select = /*#__PURE__*/memo(_ref => {
   var _ref3;
   let {
+    ref,
     children,
     placeholder,
     label,
@@ -198,4 +199,4 @@ export const Select = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
       }), isSelectTrayOpen && children]
     })
   });
-}));
+});

package/esm/controls/Switch.js

@@ -1,7 +1,8 @@
-const _excluded = ["children", "style", "styles"];
+const _excluded = ["ref"],
+  _excluded2 = ["children", "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 { StyleSheet } from 'react-native';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
@@ -75,14 +76,18 @@ const SwitchIcon = _ref => {
     })
   });
 };
-const SwitchWithRef = /*#__PURE__*/forwardRef(function SwitchWithRef(_props, ref) {
+const SwitchWithRef = function SwitchWithRef(_ref2) {
+  let {
+      ref
+    } = _ref2,
+    _props = _objectWithoutPropertiesLoose(_ref2, _excluded);
   const mergedProps = useComponentConfig('Switch', _props);
   const {
       children,
       style,
       styles
     } = mergedProps,
-    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
   const theme = useTheme();
   const {
     switchHeight
@@ -105,7 +110,7 @@ const SwitchWithRef = /*#__PURE__*/forwardRef(function SwitchWithRef(_props, ref
     style: styles == null ? void 0 : styles.root,
     children: switchNode
   });
-});
+};
 export const Switch = /*#__PURE__*/memo(SwitchWithRef);
 const styles = StyleSheet.create({
   thumb: {