@coinbase/cds-mobile 9.6.0 → 9.6.2

package/esm/alpha/carousel/Carousel.js

@@ -1,7 +1,7 @@
-const _excluded = ["carouselRef", "items", "gap", "testID", "onDismissItem", "onDismissLastItem", "showProgress", "showDismiss", "itemWidth", "autoHeight", "dismissButtonAccessibilityLabel", "dismissButtonAccessibilityHint"];
+const _excluded = ["ref", "carouselRef", "items", "gap", "testID", "onDismissItem", "onDismissLastItem", "showProgress", "showDismiss", "itemWidth", "autoHeight", "dismissButtonAccessibilityLabel", "dismissButtonAccessibilityHint"];
 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, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import React, { memo, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { Animated, StyleSheet } from 'react-native';
 import { useSafeAreaFrame } from 'react-native-safe-area-context';
 import { gutter } from '@coinbase/cds-common/tokens/sizing';
@@ -17,8 +17,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * @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 = 0,
@@ -234,7 +235,7 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forward
       children: content
     }))]
   });
-}));
+});
 const styles = StyleSheet.create({
   carousel: {
     overflow: 'visible'

package/esm/alpha/combobox/Combobox.js

@@ -1,8 +1,9 @@
 const _excluded = ["ComboboxControlComponent"],
-  _excluded2 = ["type", "value", "onChange", "options", "open", "setOpen", "label", "placeholder", "disabled", "variant", "startNode", "endNode", "align", "accessibilityLabel", "defaultOpen", "searchText", "onSearch", "defaultSearchText", "closeButtonLabel", "filterFunction", "SelectControlComponent", "ComboboxControlComponent", "SelectDropdownComponent", "hideSearchInput", "font"];
+  _excluded2 = ["ref"],
+  _excluded3 = ["type", "value", "onChange", "options", "open", "setOpen", "label", "placeholder", "disabled", "variant", "startNode", "endNode", "align", "accessibilityLabel", "defaultOpen", "searchText", "onSearch", "defaultSearchText", "closeButtonLabel", "filterFunction", "SelectControlComponent", "ComboboxControlComponent", "SelectDropdownComponent", "hideSearchInput", "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 { createContext, forwardRef, memo, useCallback, useContext, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { createContext, memo, useCallback, useContext, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { KeyboardAvoidingView, Platform, View } from 'react-native';
 import Fuse from 'fuse.js';
 import { Button } from '../../buttons/Button';
@@ -52,7 +53,11 @@ const ComboboxControlContextAdapter = /*#__PURE__*/memo(_ref => {
     searchText: searchText
   }));
 });
-const ComboboxBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+const ComboboxBase = /*#__PURE__*/memo(_ref2 => {
+  let {
+      ref
+    } = _ref2,
+    _props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
   const mergedProps = useComponentConfig('Combobox', _props);
   const {
       type = 'single',
@@ -81,7 +86,7 @@ const ComboboxBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
       hideSearchInput,
       font
     } = mergedProps,
-    props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded3);
   const [searchTextInternal, setSearchTextInternal] = useState(defaultSearchText);
   const searchText = searchTextProp != null ? searchTextProp : searchTextInternal;
   const setSearchText = onSearchProp != null ? onSearchProp : setSearchTextInternal;
@@ -130,10 +135,10 @@ const ComboboxBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
     label: label,
     minHeight: 500
   }, props, {
-    footer: _ref2 => {
+    footer: _ref3 => {
       let {
         handleClose
-      } = _ref2;
+      } = _ref3;
       return /*#__PURE__*/_jsx(KeyboardAvoidingView, {
         behavior: "padding",
         keyboardVerticalOffset: Platform.OS === 'ios' ? 106 : 0,
@@ -202,5 +207,5 @@ const ComboboxBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
       variant: variant
     }, props))
   });
-}));
+});
 export const Combobox = ComboboxBase;

package/esm/alpha/data-card/DataCard.js

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

package/esm/alpha/select/DefaultSelectAllOption.js

@@ -1,9 +1,10 @@
-import { forwardRef, memo } from 'react';
+import { memo } from 'react';
 import { Divider } from '../../layout/Divider';
 import { DefaultSelectOption } from './DefaultSelectOption';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const DefaultSelectAllOptionComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+const DefaultSelectAllOptionComponent = /*#__PURE__*/memo(_ref => {
   let {
+    ref,
     accessory,
     blendStyles,
     compact,
@@ -40,5 +41,5 @@ const DefaultSelectAllOptionComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRe
       style: styles == null ? void 0 : styles.selectAllDivider
     })]
   });
-}));
+});
 export const DefaultSelectAllOption = DefaultSelectAllOptionComponent;

package/esm/alpha/select/DefaultSelectControl.js

@@ -1,7 +1,7 @@
-const _excluded = ["type", "options", "value", "onChange", "open", "placeholder", "disabled", "readOnly", "setOpen", "variant", "helperText", "label", "labelVariant", "contentNode", "startNode", "endNode", "compact", "align", "font", "labelColor", "labelFont", "bordered", "borderWidth", "focusedBorderWidth", "inputBackground", "borderRadius", "maxSelectedOptionsToShow", "accessibilityHint", "accessibilityLabel", "hiddenSelectedOptionsLabel", "removeSelectedOptionAccessibilityLabel", "style", "styles", "onBlur", "onFocus"];
+const _excluded = ["ref", "type", "options", "value", "onChange", "open", "placeholder", "disabled", "readOnly", "setOpen", "variant", "helperText", "label", "labelVariant", "contentNode", "startNode", "endNode", "compact", "align", "font", "labelColor", "labelFont", "bordered", "borderWidth", "focusedBorderWidth", "inputBackground", "borderRadius", "maxSelectedOptionsToShow", "accessibilityHint", "accessibilityLabel", "hiddenSelectedOptionsLabel", "removeSelectedOptionAccessibilityLabel", "style", "styles", "onBlur", "onFocus"];
 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 } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { Pressable, TouchableOpacity } from 'react-native';
 import { useInputVariant } from '@coinbase/cds-common/hooks/useInputVariant';
 import { InputChip } from '../../chips/InputChip';
@@ -24,8 +24,9 @@ const variantColor = {
   foregroundMuted: 'fgMuted',
   secondary: 'fgMuted'
 };
-export const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+export const DefaultSelectControlComponent = /*#__PURE__*/memo(_ref => {
   let {
+      ref,
       type,
       options,
       value,
@@ -317,5 +318,5 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forw
     },
     variant: variant
   }, props));
-}));
+});
 export const DefaultSelectControl = DefaultSelectControlComponent;

package/esm/alpha/select/DefaultSelectDropdown.js

@@ -1,8 +1,8 @@
-const _excluded = ["type", "options", "value", "onChange", "onVisibilityChange", "open", "setOpen", "controlRef", "disabled", "style", "styles", "compact", "header", "footer", "label", "end", "selectAllLabel", "emptyOptionsLabel", "clearAllLabel", "hideSelectAll", "accessory", "media", "SelectOptionComponent", "SelectAllOptionComponent", "SelectEmptyDropdownContentsComponent", "SelectOptionGroupComponent", "accessibilityRoles"],
+const _excluded = ["ref", "type", "options", "value", "onChange", "onVisibilityChange", "open", "setOpen", "controlRef", "disabled", "style", "styles", "compact", "header", "footer", "label", "end", "selectAllLabel", "emptyOptionsLabel", "clearAllLabel", "hideSelectAll", "accessory", "media", "SelectOptionComponent", "SelectAllOptionComponent", "SelectEmptyDropdownContentsComponent", "SelectOptionGroupComponent", "accessibilityRoles"],
   _excluded2 = ["Component", "media", "accessory", "end", "disabled"];
 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 } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { ScrollView } from 'react-native';
 import { Button } from '../../buttons/Button';
 import { Checkbox } from '../../controls/Checkbox';
@@ -15,8 +15,9 @@ import { DefaultSelectOption } from './DefaultSelectOption';
 import { DefaultSelectOptionGroup } from './DefaultSelectOptionGroup';
 import { defaultAccessibilityRoles, isSelectOptionGroup } from './Select';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const DefaultSelectDropdownComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+const DefaultSelectDropdownComponent = /*#__PURE__*/memo(_ref => {
   let {
+      ref,
       type,
       options,
       value,
@@ -237,5 +238,5 @@ const DefaultSelectDropdownComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef
       }))
     })
   });
-}));
+});
 export const DefaultSelectDropdown = DefaultSelectDropdownComponent;

package/esm/alpha/select/DefaultSelectEmptyDropdownContents.js

@@ -1,9 +1,10 @@
-import { forwardRef, memo } from 'react';
+import { memo } from 'react';
 import { Box } from '../../layout/Box';
 import { Text } from '../../typography/Text';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const DefaultSelectEmptyDropdownContents = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+export const DefaultSelectEmptyDropdownContents = /*#__PURE__*/memo(_ref => {
   let {
+    ref,
     label,
     styles
   } = _ref;
@@ -18,4 +19,4 @@ export const DefaultSelectEmptyDropdownContents = /*#__PURE__*/memo(/*#__PURE__*
       children: label
     })
   });
-}));
+});

package/esm/alpha/select/DefaultSelectOption.js

@@ -1,13 +1,13 @@
-const _excluded = ["value", "label", "onPress", "disabled", "selected", "indeterminate", "compact", "description", "multiline", "style", "styles", "type", "accessibilityRole", "background"];
+const _excluded = ["ref", "value", "label", "onPress", "disabled", "selected", "indeterminate", "compact", "description", "multiline", "style", "styles", "type", "accessibilityRole", "background"];
 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 } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { selectCellMobileSpacingConfig } from '@coinbase/cds-common/tokens/select';
 import { Cell } from '../../cells/Cell';
 import { VStack } from '../../layout/VStack';
 import { Text } from '../../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const DefaultSelectOptionComponent = (_ref, ref) => {
+const DefaultSelectOptionComponent = _ref => {
   let {
       value,
       label,
@@ -69,4 +69,4 @@ const DefaultSelectOptionComponent = (_ref, ref) => {
     })
   }));
 };
-export const DefaultSelectOption = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(DefaultSelectOptionComponent));
+export const DefaultSelectOption = /*#__PURE__*/memo(DefaultSelectOptionComponent);

package/esm/alpha/select/Select.js

@@ -1,4 +1,7 @@
-import React, { forwardRef, memo, useImperativeHandle, useMemo, useRef, useState } from 'react';
+const _excluded = ["ref"],
+  _excluded2 = ["value", "type", "options", "onChange", "open", "setOpen", "disabled", "readOnly", "disableClickOutsideClose", "placeholder", "helperText", "compact", "label", "labelVariant", "accessibilityLabel", "accessibilityHint", "accessibilityRoles", "selectAllLabel", "emptyOptionsLabel", "clearAllLabel", "hideSelectAll", "defaultOpen", "startNode", "endNode", "variant", "maxSelectedOptionsToShow", "hiddenSelectedOptionsLabel", "removeSelectedOptionAccessibilityLabel", "accessory", "media", "end", "align", "font", "bordered", "borderWidth", "focusedBorderWidth", "inputBackground", "labelColor", "labelFont", "borderRadius", "SelectOptionComponent", "SelectAllOptionComponent", "SelectDropdownComponent", "SelectControlComponent", "SelectEmptyDropdownContentsComponent", "SelectOptionGroupComponent", "style", "styles", "testID"];
+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, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { View } from 'react-native';
 import { useComponentConfig } from '../../hooks/useComponentConfig';
 import { DefaultSelectAllOption } from './DefaultSelectAllOption';
@@ -16,59 +19,63 @@ export const defaultAccessibilityRoles = {
 // Re-export all types for backward compatibility
 
 export { isSelectOptionGroup };
-const SelectBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+const SelectBase = /*#__PURE__*/memo(_ref => {
+  let {
+      ref
+    } = _ref,
+    _props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const mergedProps = useComponentConfig('Select', _props);
   const {
-    value,
-    type = 'single',
-    options,
-    onChange,
-    open: openProp,
-    setOpen: setOpenProp,
-    disabled,
-    readOnly,
-    disableClickOutsideClose,
-    placeholder,
-    helperText,
-    compact,
-    label,
-    labelVariant,
-    accessibilityLabel = typeof label === 'string' ? label : 'Select control',
-    accessibilityHint,
-    accessibilityRoles = defaultAccessibilityRoles,
-    selectAllLabel,
-    emptyOptionsLabel,
-    clearAllLabel,
-    hideSelectAll,
-    defaultOpen,
-    startNode,
-    endNode,
-    variant,
-    maxSelectedOptionsToShow,
-    hiddenSelectedOptionsLabel,
-    removeSelectedOptionAccessibilityLabel,
-    accessory,
-    media,
-    end,
-    align,
-    font,
-    bordered = true,
-    borderWidth,
-    focusedBorderWidth,
-    inputBackground,
-    labelColor,
-    labelFont,
-    borderRadius,
-    SelectOptionComponent = DefaultSelectOption,
-    SelectAllOptionComponent = DefaultSelectAllOption,
-    SelectDropdownComponent = DefaultSelectDropdown,
-    SelectControlComponent = DefaultSelectControl,
-    SelectEmptyDropdownContentsComponent = DefaultSelectEmptyDropdownContents,
-    SelectOptionGroupComponent = DefaultSelectOptionGroup,
-    style,
-    styles,
-    testID
-  } = mergedProps;
+      value,
+      type = 'single',
+      options,
+      onChange,
+      open: openProp,
+      setOpen: setOpenProp,
+      disabled,
+      readOnly,
+      placeholder,
+      helperText,
+      compact,
+      label,
+      labelVariant,
+      accessibilityLabel = typeof label === 'string' ? label : 'Select control',
+      accessibilityHint,
+      accessibilityRoles = defaultAccessibilityRoles,
+      selectAllLabel,
+      emptyOptionsLabel,
+      clearAllLabel,
+      hideSelectAll,
+      defaultOpen,
+      startNode,
+      endNode,
+      variant,
+      maxSelectedOptionsToShow,
+      hiddenSelectedOptionsLabel,
+      removeSelectedOptionAccessibilityLabel,
+      accessory,
+      media,
+      end,
+      align,
+      font,
+      bordered = true,
+      borderWidth,
+      focusedBorderWidth,
+      inputBackground,
+      labelColor,
+      labelFont,
+      borderRadius,
+      SelectOptionComponent = DefaultSelectOption,
+      SelectAllOptionComponent = DefaultSelectAllOption,
+      SelectDropdownComponent = DefaultSelectDropdown,
+      SelectControlComponent = DefaultSelectControl,
+      SelectEmptyDropdownContentsComponent = DefaultSelectEmptyDropdownContents,
+      SelectOptionGroupComponent = DefaultSelectOptionGroup,
+      style,
+      styles,
+      testID
+    } = mergedProps,
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
   const [openInternal, setOpenInternal] = useState(defaultOpen != null ? defaultOpen : false);
   const open = openProp != null ? openProp : openInternal;
   const setOpen = setOpenProp != null ? setOpenProp : setOpenInternal;
@@ -170,5 +177,5 @@ const SelectBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
       value: value
     })]
   });
-}));
+});
 export const Select = SelectBase;

package/esm/alpha/select-chip/SelectChip.js

@@ -1,7 +1,8 @@
-const _excluded = ["invertColorScheme", "numberOfLines", "maxWidth", "displayValue"];
+const _excluded = ["ref"],
+  _excluded2 = ["invertColorScheme", "numberOfLines", "maxWidth", "displayValue"];
 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 } from 'react';
+import React, { memo, useCallback } from 'react';
 import { useComponentConfig } from '../../hooks/useComponentConfig';
 import { Select } from '../select/Select';
 import { SelectChipControl } from './SelectChipControl';
@@ -10,7 +11,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * Chip-styled Select control built on top of the Alpha Select.
  * Supports both single and multi selection via Select's `type` prop.
  */
-const SelectChipComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+const SelectChipComponent = /*#__PURE__*/memo(_ref => {
+  let {
+      ref
+    } = _ref,
+    _props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const mergedProps = useComponentConfig('SelectChip', _props);
   const {
       invertColorScheme,
@@ -18,7 +23,7 @@ const SelectChipComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, r
       maxWidth,
       displayValue
     } = mergedProps,
-    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
   const SelectChipControlComponent = useCallback(props => {
     return /*#__PURE__*/_jsx(SelectChipControl, _extends({
       displayValue: displayValue,
@@ -31,6 +36,6 @@ const SelectChipComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, r
     ref: ref,
     SelectControlComponent: SelectChipControlComponent
   }, props));
-}));
+});
 SelectChipComponent.displayName = 'SelectChip';
 export const SelectChip = SelectChipComponent;

package/esm/alpha/select-chip/SelectChipControl.js

@@ -1,10 +1,11 @@
-import React, { forwardRef, memo, useMemo } from 'react';
+import React, { memo, useMemo } from 'react';
 import { MediaChip } from '../../chips/MediaChip';
 import { AnimatedCaret } from '../../motion/AnimatedCaret';
 import { isSelectOptionGroup } from '../select/types';
 import { jsx as _jsx } from "react/jsx-runtime";
-const SelectChipControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+const SelectChipControlComponent = /*#__PURE__*/memo(_ref => {
   let {
+    ref,
     type,
     options,
     value,
@@ -111,5 +112,5 @@ const SelectChipControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_r
     start: startNode,
     children: labelContent
   });
-}));
+});
 export const SelectChipControl = SelectChipControlComponent;

package/esm/alpha/tabbed-chips/TabbedChips.js

@@ -1,8 +1,9 @@
 const _excluded = ["label", "id", "activeBackground", "activeColor", "color"],
-  _excluded2 = ["tabs", "activeTab", "testID", "TabComponent", "onChange", "width", "gap", "compact", "styles", "autoScrollOffset"];
+  _excluded2 = ["ref"],
+  _excluded3 = ["tabs", "activeTab", "testID", "TabComponent", "onChange", "width", "gap", "compact", "styles", "autoScrollOffset"];
 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 { MediaChip } from '../../chips/MediaChip';
@@ -42,7 +43,11 @@ const DefaultTabComponent = _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,
@@ -56,7 +61,7 @@ const TabbedChipsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function
       styles,
       autoScrollOffset = 30
     } = mergedProps,
-    accessibilityProps = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
+    accessibilityProps = _objectWithoutPropertiesLoose(mergedProps, _excluded3);
   const [scrollTarget, setScrollTarget] = useState(null);
   const {
     scrollRef,
@@ -105,6 +110,6 @@ const TabbedChipsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function
       pin: "right"
     })]
   });
-}));
+});
 TabbedChipsComponent.displayName = 'TabbedChips';
 export const TabbedChips = TabbedChipsComponent;

package/esm/animation/Lottie.js

@@ -1,16 +1,17 @@
-const _excluded = ["autoplay", "colorFilters", "loop", "progress", "resizeMode", "source", "onAnimationFinish"],
-  _excluded2 = ["colorFilters"];
+const _excluded = ["ref", "autoplay", "colorFilters", "loop", "progress", "resizeMode", "source", "onAnimationFinish"],
+  _excluded2 = ["ref", "colorFilters"];
 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 LottieView from 'lottie-react-native';
 import { Box } from '../layout/Box';
 import { useLottieColorFilters } from './useLottieColorFilters';
 import { jsx as _jsx } from "react/jsx-runtime";
 const AnimatedLottieView = Animated.createAnimatedComponent(LottieView);
-const LottieContent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forwardedRef) => {
+const LottieContent = /*#__PURE__*/memo(_ref => {
   let {
+      ref: forwardedRef,
       autoplay = false,
       colorFilters,
       loop = false,
@@ -43,9 +44,10 @@ const LottieContent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forwarded
       style: lottieStyles
     })
   }));
-}));
-export const Lottie = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, forwardedRef) => {
+});
+export const Lottie = /*#__PURE__*/memo(_ref2 => {
   let {
+      ref: forwardedRef,
       colorFilters: colorFiltersProp
     } = _ref2,
     props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
@@ -54,6 +56,6 @@ export const Lottie = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, forwarde
     ref: forwardedRef,
     colorFilters: colorFilters
   }, props));
-}));
+});
 LottieContent.displayName = 'LottieContent';
 Lottie.displayName = 'Lottie';

package/esm/banner/Banner.js

@@ -1,7 +1,8 @@
-const _excluded = ["variant", "startIcon", "startIconActive", "onClose", "primaryAction", "secondaryAction", "title", "children", "showDismiss", "testID", "numberOfLines", "style", "label", "styleVariant", "startIconAccessibilityLabel", "closeAccessibilityLabel", "borderRadius", "margin", "marginX", "marginY", "marginTop", "marginEnd", "marginBottom", "marginStart", "styles"];
+const _excluded = ["ref"],
+  _excluded2 = ["variant", "startIcon", "startIconActive", "onClose", "primaryAction", "secondaryAction", "title", "children", "showDismiss", "testID", "numberOfLines", "style", "label", "styleVariant", "startIconAccessibilityLabel", "closeAccessibilityLabel", "borderRadius", "margin", "marginX", "marginY", "marginTop", "marginEnd", "marginBottom", "marginStart", "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, isValidElement, memo, useCallback, useMemo, useState } from 'react';
+import React, { isValidElement, memo, useCallback, useMemo, useState } from 'react';
 import { variants } from '@coinbase/cds-common/tokens/banner';
 import { Collapsible } from '../collapsible/Collapsible';
 import { useComponentConfig } from '../hooks/useComponentConfig';
@@ -26,7 +27,11 @@ import { Text } from '../typography/Text';
  * @deprecationExpectedRemoval v10
  */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const Banner = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Banner(_props, forwardedRef) {
+export const Banner = /*#__PURE__*/memo(function Banner(_ref) {
+  let {
+      ref: forwardedRef
+    } = _ref,
+    _props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const mergedProps = useComponentConfig('Banner', _props);
   const {
       variant,
@@ -55,7 +60,7 @@ export const Banner = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Banner(
       marginStart,
       styles
     } = mergedProps,
-    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
   const [isCollapsed, setIsCollapsed] = useState(false);
   const theme = useTheme();
 
@@ -214,4 +219,4 @@ export const Banner = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Banner(
       children: content
     }) : content, styleVariant === 'global' && borderBox]
   }));
-}));
+});

package/esm/buttons/Button.js

@@ -1,7 +1,8 @@
-const _excluded = ["variant", "loading", "progressCircleSize", "transparent", "block", "compact", "children", "start", "startIcon", "startIconActive", "end", "endIcon", "endIconActive", "flush", "noScaleOnPress", "numberOfLines", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight", "background", "color", "style", "wrapperStyles", "feedback", "borderColor", "borderWidth", "borderRadius", "accessibilityLabel", "accessibilityHint", "padding", "paddingStart", "paddingEnd", "paddingTop", "paddingBottom", "paddingX", "paddingY"];
+const _excluded = ["ref"],
+  _excluded2 = ["variant", "loading", "progressCircleSize", "transparent", "block", "compact", "children", "start", "startIcon", "startIconActive", "end", "endIcon", "endIconActive", "flush", "noScaleOnPress", "numberOfLines", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight", "background", "color", "style", "wrapperStyles", "feedback", "borderColor", "borderWidth", "borderRadius", "accessibilityLabel", "accessibilityHint", "padding", "paddingStart", "paddingEnd", "paddingTop", "paddingBottom", "paddingX", "paddingY"];
 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, useCallback, useMemo } from 'react';
+import React, { isValidElement, memo, useCallback, useMemo } from 'react';
 import { StyleSheet } from 'react-native';
 import { transparentVariants, variants } from '@coinbase/cds-common/tokens/button';
 import { useComponentConfig } from '../hooks/useComponentConfig';
@@ -28,7 +29,11 @@ export const styles = StyleSheet.create({
     flexShrink: 0
   }
 });
-export const Button = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Button(_props, ref) {
+export const Button = /*#__PURE__*/memo(function Button(_ref) {
+  let {
+      ref
+    } = _ref,
+    _props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const mergedProps = useComponentConfig('Button', _props);
   const {
       variant = 'primary',
@@ -71,7 +76,7 @@ export const Button = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Button(
       paddingX = compact ? 2 : 4,
       paddingY = compact ? 1 : 2
     } = mergedProps,
-    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
   const theme = useTheme();
   const iconSize = compact ? 's' : 'm';
   const hasIcon = Boolean(startIcon || endIcon);
@@ -152,5 +157,5 @@ export const Button = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Button(
       })
     })
   }));
-}));
+});
 Button.displayName = 'Button';

package/esm/buttons/DefaultSlideButtonBackground.js

@@ -1,10 +1,11 @@
-import React, { forwardRef, memo } from 'react';
+import React, { memo } from 'react';
 import Animated, { useAnimatedStyle } from 'react-native-reanimated';
 import { Box } from '../layout/Box';
 import { Text } from '../typography/Text';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const DefaultSlideButtonBackground = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+export const DefaultSlideButtonBackground = /*#__PURE__*/memo(_ref => {
   let {
+    ref,
     progress,
     uncheckedLabel,
     disabled,
@@ -45,4 +46,4 @@ export const DefaultSlideButtonBackground = /*#__PURE__*/memo(/*#__PURE__*/forwa
       })
     })
   });
-}));
+});