@coinbase/cds-mobile 8.47.0 → 8.47.2

package/CHANGELOG.md

@@ -8,6 +8,18 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.47.2 (2/19/2026 PST)
+
+#### 🐞 Fixes
+
+- Fix mobile CardRoot style forwarding logic. [[#405](https://github.com/coinbase/cds/pull/405)]
+
+## 8.47.1 (2/19/2026 PST)
+
+#### 🐞 Fixes
+
+- Fix Tray title spacing and overflow. [[#414](https://github.com/coinbase/cds/pull/414)]
+
 ## 8.47.0 (2/19/2026 PST)
 
 #### 🚀 Updates

package/dts/overlays/drawer/Drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/overlays/drawer/Drawer.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/overlays/drawer/Drawer.tsx"],"names":[],"mappings":"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"}

package/dts/overlays/tray/Tray.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tray.d.ts","sourceRoot":"","sources":["../../../src/overlays/tray/Tray.tsx"],"names":[],"mappings":"AAAA,OAAO,KASN,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAqB,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACvF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAM5D,OAAO,EAEL,KAAK,eAAe,EACpB,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,kBAAkB,CAAC;AAE1B,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,EAAE,CAAC;IAAE,WAAW,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC,CAAC;AAEvE,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,eAAe,EAAE,KAAK,GAAG,UAAU,CAAC,GAAG;IACtE,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,kBAAkB,CAAC;IAChD,6CAA6C;IAC7C,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,kBAAkB,CAAC;IAC9C;;;OAGG;IACH,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,6CAA6C;IAC7C,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,kBAAkB,CAAC;IAC9C;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,GAAG,QAAQ,KAAK,IAAI,CAAC;IAC7D,gDAAgD;IAChD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,aAAa,GACnC,IAAI,CAAC,WAAW,EAAE,KAAK,GAAG,UAAU,CAAC,GAAG;IACtC,GAAG,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;IACzB,MAAM,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,GAAG;QAC/B,2BAA2B;QAC3B,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC/B,6BAA6B;QAC7B,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC9B,yBAAyB;QACzB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAC9B,CAAC;CACH,CAAC;AAEJ,eAAO,MAAM,WAAW;oCACU,MAAM;iBACzB,MAAM;EAInB,CAAC;AAEH,eAAO,MAAM,IAAI;IA1Cf,8CAA8C;eACnC,KAAK,CAAC,SAAS,GAAG,kBAAkB;IAC/C,6CAA6C;aACpC,KAAK,CAAC,SAAS,GAAG,kBAAkB;IAC7C;;;OAGG;sBACe,eAAe;IACjC,6CAA6C;aACpC,KAAK,CAAC,SAAS,GAAG,kBAAkB;IAC7C;;;;OAIG;yBACkB,CAAC,OAAO,EAAE,SAAS,GAAG,QAAQ,KAAK,IAAI;IAC5D,gDAAgD;YACxC,KAAK,CAAC,SAAS;;UAKf,WAAW,CAAC,KAAK,CAAC;aACf,WAAW,CAAC,QAAQ,CAAC,GAAG;QAC/B,2BAA2B;QAC3B,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC/B,6BAA6B;QAC7B,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC9B,yBAAyB;QACzB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAC9B;6CAmIJ,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,cAAc;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,4CAQrE,CAAC"}
+{"version":3,"file":"Tray.d.ts","sourceRoot":"","sources":["../../../src/overlays/tray/Tray.tsx"],"names":[],"mappings":"AAAA,OAAO,KASN,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAqB,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACvF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAM5D,OAAO,EAEL,KAAK,eAAe,EACpB,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,kBAAkB,CAAC;AAE1B,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,EAAE,CAAC;IAAE,WAAW,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC,CAAC;AAEvE,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,eAAe,EAAE,KAAK,GAAG,UAAU,CAAC,GAAG;IACtE,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,kBAAkB,CAAC;IAChD,6CAA6C;IAC7C,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,kBAAkB,CAAC;IAC9C;;;OAGG;IACH,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,6CAA6C;IAC7C,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,kBAAkB,CAAC;IAC9C;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,GAAG,QAAQ,KAAK,IAAI,CAAC;IAC7D,gDAAgD;IAChD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,aAAa,GACnC,IAAI,CAAC,WAAW,EAAE,KAAK,GAAG,UAAU,CAAC,GAAG;IACtC,GAAG,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;IACzB,MAAM,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,GAAG;QAC/B,2BAA2B;QAC3B,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC/B,6BAA6B;QAC7B,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC9B,yBAAyB;QACzB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAC9B,CAAC;CACH,CAAC;AAEJ,eAAO,MAAM,WAAW;oCACU,MAAM;iBACzB,MAAM;EAInB,CAAC;AAEH,eAAO,MAAM,IAAI;IA1Cf,8CAA8C;eACnC,KAAK,CAAC,SAAS,GAAG,kBAAkB;IAC/C,6CAA6C;aACpC,KAAK,CAAC,SAAS,GAAG,kBAAkB;IAC7C;;;OAGG;sBACe,eAAe;IACjC,6CAA6C;aACpC,KAAK,CAAC,SAAS,GAAG,kBAAkB;IAC7C;;;;OAIG;yBACkB,CAAC,OAAO,EAAE,SAAS,GAAG,QAAQ,KAAK,IAAI;IAC5D,gDAAgD;YACxC,KAAK,CAAC,SAAS;;UAKf,WAAW,CAAC,KAAK,CAAC;aACf,WAAW,CAAC,QAAQ,CAAC,GAAG;QAC/B,2BAA2B;QAC3B,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC/B,6BAA6B;QAC7B,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC9B,yBAAyB;QACzB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAC9B;6CAqIJ,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,cAAc;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,4CAQrE,CAAC"}

package/esm/cards/CardRoot.js

@@ -1,4 +1,4 @@
-const _excluded = ["children", "style", "renderAsPressable"];
+const _excluded = ["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';

package/esm/cards/__stories__/MessagingCard.stories.js

@@ -65,9 +65,7 @@ const DismissibleCardsExample = () => {
             height: 100,
             resizeMode: "cover",
             shape: "rectangle",
-            source: {
-              uri: coinbaseOneLogo
-            },
+            source: coinbaseOneLogo,
             width: 80
           }) : /*#__PURE__*/_jsx(Pictogram, {
             accessibilityLabel: "Add to watchlist",
@@ -105,9 +103,7 @@ const MessagingCardScreen = () => {
             height: 120,
             resizeMode: "cover",
             shape: "rectangle",
-            source: {
-              uri: coinbaseOneLogo
-            },
+            source: coinbaseOneLogo,
             width: 90
           }),
           mediaPlacement: "end",
@@ -162,9 +158,7 @@ const MessagingCardScreen = () => {
             height: 120,
             resizeMode: "cover",
             shape: "rectangle",
-            source: {
-              uri: coinbaseOneLogo
-            },
+            source: coinbaseOneLogo,
             width: 90
           }),
           mediaPlacement: "end",
@@ -190,9 +184,7 @@ const MessagingCardScreen = () => {
             height: 120,
             resizeMode: "cover",
             shape: "rectangle",
-            source: {
-              uri: coinbaseOneLogo
-            },
+            source: coinbaseOneLogo,
             width: 90
           }),
           mediaPlacement: "end",
@@ -218,9 +210,7 @@ const MessagingCardScreen = () => {
             height: 156,
             resizeMode: "cover",
             shape: "rectangle",
-            source: {
-              uri: coinbaseOneLogo
-            },
+            source: coinbaseOneLogo,
             width: 120
           }),
           mediaPlacement: "end",
@@ -248,9 +238,7 @@ const MessagingCardScreen = () => {
             height: 186,
             resizeMode: "cover",
             shape: "rectangle",
-            source: {
-              uri: coinbaseOneLogo
-            },
+            source: coinbaseOneLogo,
             width: 130
           }),
           mediaPlacement: "end",
@@ -287,9 +275,7 @@ const MessagingCardScreen = () => {
             height: 156,
             resizeMode: "cover",
             shape: "rectangle",
-            source: {
-              uri: coinbaseOneLogo
-            },
+            source: coinbaseOneLogo,
             width: 120
           }),
           mediaPlacement: "end",
@@ -339,9 +325,7 @@ const MessagingCardScreen = () => {
             height: 120,
             resizeMode: "cover",
             shape: "rectangle",
-            source: {
-              uri: coinbaseOneLogo
-            },
+            source: coinbaseOneLogo,
             width: 90
           }),
           mediaPlacement: "end",
@@ -386,9 +370,7 @@ const MessagingCardScreen = () => {
             height: 120,
             resizeMode: "cover",
             shape: "rectangle",
-            source: {
-              uri: coinbaseOneLogo
-            },
+            source: coinbaseOneLogo,
             width: 90
           }),
           mediaPlacement: "end",
@@ -410,6 +392,84 @@ const MessagingCardScreen = () => {
           type: "nudge"
         })]
       })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Custom Background Color",
+      children: /*#__PURE__*/_jsxs(VStack, {
+        gap: 2,
+        children: [/*#__PURE__*/_jsx(MessagingCard, _extends({}, exampleProps, {
+          renderAsPressable: true,
+          accessibilityLabel: "View card details",
+          blendStyles: {
+            background: '#1E5A9E'
+          },
+          description: "Pressable card with custom background via blendStyles.background",
+          media: /*#__PURE__*/_jsx(RemoteImage, {
+            accessibilityLabel: "Coinbase One promotional image",
+            height: 130,
+            resizeMode: "cover",
+            shape: "rectangle",
+            source: coinbaseOneLogo,
+            width: 90
+          }),
+          mediaPlacement: "end",
+          onPress: NoopFn,
+          title: "Pressable with Custom Background",
+          type: "upsell"
+        })), /*#__PURE__*/_jsx(MessagingCard, _extends({}, exampleProps, {
+          renderAsPressable: true,
+          accessibilityLabel: "View nudge details",
+          blendStyles: {
+            background: '#FFF8E6'
+          },
+          description: "Pressable nudge with custom background via blendStyles.background",
+          media: /*#__PURE__*/_jsx(Pictogram, {
+            accessibilityLabel: "Rocket",
+            dimension: "48x48",
+            name: "baseRocket"
+          }),
+          mediaPlacement: "end",
+          onPress: NoopFn,
+          title: "Nudge with Custom Background",
+          type: "nudge"
+        })), /*#__PURE__*/_jsx(MessagingCard, _extends({}, exampleProps, {
+          accessibilityLabel: "Non-pressable card",
+          description: "Non-pressable card with custom background via styles.root",
+          media: /*#__PURE__*/_jsx(RemoteImage, {
+            accessibilityLabel: "Coinbase One promotional image",
+            height: 130,
+            resizeMode: "cover",
+            shape: "rectangle",
+            source: coinbaseOneLogo,
+            width: 90
+          }),
+          mediaPlacement: "end",
+          renderAsPressable: false,
+          styles: {
+            root: {
+              backgroundColor: '#1E5A9E'
+            }
+          },
+          title: "Non-pressable with Custom Background",
+          type: "upsell"
+        })), /*#__PURE__*/_jsx(MessagingCard, _extends({}, exampleProps, {
+          accessibilityLabel: "Non-pressable nudge",
+          description: "Non-pressable nudge with custom background via styles.root",
+          media: /*#__PURE__*/_jsx(Pictogram, {
+            accessibilityLabel: "Rocket",
+            dimension: "48x48",
+            name: "baseRocket"
+          }),
+          mediaPlacement: "end",
+          renderAsPressable: false,
+          styles: {
+            root: {
+              backgroundColor: '#FFF8E6'
+            }
+          },
+          title: "Non-pressable Nudge with Custom Background",
+          type: "nudge"
+        }))]
+      })
     }), /*#__PURE__*/_jsx(Example, {
       title: "Text Content",
       children: /*#__PURE__*/_jsxs(VStack, {
@@ -421,9 +481,7 @@ const MessagingCardScreen = () => {
             height: 160,
             resizeMode: "cover",
             shape: "rectangle",
-            source: {
-              uri: coinbaseOneLogo
-            },
+            source: coinbaseOneLogo,
             width: 120
           }),
           mediaPlacement: "end",
@@ -446,9 +504,7 @@ const MessagingCardScreen = () => {
             height: 140,
             resizeMode: "cover",
             shape: "rectangle",
-            source: {
-              uri: coinbaseOneLogo
-            },
+            source: coinbaseOneLogo,
             width: 100
           }),
           mediaPlacement: "end",

package/esm/overlays/__stories__/TrayPromotional.stories.js

@@ -1,10 +1,22 @@
-import React, { useCallback, useRef, useState } from 'react';
+const _excluded = ["key"];
+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, { memo, useCallback, useRef, useState } from 'react';
+import { Platform } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Button } from '../../buttons/Button';
+import { ListCell } from '../../cells/ListCell';
 import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { useDimensions } from '../../hooks/useDimensions';
+import { Icon } from '../../icons';
 import { SpotRectangle } from '../../illustrations';
-import { Box, VStack } from '../../layout';
+import { Box, HStack, VStack } from '../../layout';
 import { StickyFooter } from '../../sticky-footer/StickyFooter';
+import { ThemeProvider } from '../../system/ThemeProvider';
+import { defaultTheme } from '../../themes/defaultTheme';
 import { Text } from '../../typography/Text';
+import { TextBody } from '../../typography/TextBody';
+import { TextTitle1 } from '../../typography/TextTitle1';
 import { Tray, TrayStickyFooter } from '../tray/Tray';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export const Default = () => {
@@ -64,11 +76,240 @@ export const Default = () => {
   });
 };
 export const PromotionalTrayScreen = () => {
-  return /*#__PURE__*/_jsx(ExampleScreen, {
-    children: /*#__PURE__*/_jsx(Example, {
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(Example, {
       title: "Promotional Tray",
       children: /*#__PURE__*/_jsx(Default, {})
-    })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Credit Card Add Assets Tray",
+      children: /*#__PURE__*/_jsx(CreditCardAddAssetsTrayExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Product Upsell Tray",
+      children: /*#__PURE__*/_jsx(ProductUpsellTrayExample, {})
+    })]
+  });
+};
+const quickActions = [{
+  name: 'buy',
+  title: 'Buy',
+  description: 'Buy crypto with cash'
+}, {
+  name: 'transfer',
+  title: 'Deposit',
+  description: 'Transfer funds from your bank'
+}, {
+  name: 'receive',
+  title: 'Receive crypto',
+  description: 'From another crypto wallet'
+}];
+const CreditCardAddAssetsTrayExample = () => {
+  const [isTrayVisible, setIsTrayVisible] = useState(false);
+  const [trayContentType, setTrayContentType] = useState('addFundsInfo');
+  const setIsTrayVisibleOff = useCallback(() => {
+    setTrayContentType('addFundsInfo');
+    setIsTrayVisible(false);
+  }, []);
+  const setIsTrayVisibleOn = useCallback(() => setIsTrayVisible(true), []);
+  const handleCTAPress = useCallback(() => {
+    setTrayContentType('addAssets');
+  }, []);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Button, {
+      onPress: setIsTrayVisibleOn,
+      children: "Open"
+    }), isTrayVisible && /*#__PURE__*/_jsx(Tray, {
+      handleBarAccessibilityLabel: "Information about rewards details",
+      onCloseComplete: setIsTrayVisibleOff,
+      title: trayContentType === 'addFundsInfo' ? /*#__PURE__*/_jsx(VStack, {
+        gap: 0.5,
+        paddingTop: 3,
+        paddingX: 3,
+        children: /*#__PURE__*/_jsx(Text, {
+          font: "title3",
+          children: "Lifetime rewards details"
+        })
+      }) : null,
+      children: trayContentType === 'addFundsInfo' ? /*#__PURE__*/_jsxs(VStack, {
+        paddingX: 3,
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "body",
+          children: "Here's a breakdown of your lifetime rewards earned through your Coinbase Card purchases and transactions."
+        }), /*#__PURE__*/_jsx(VStack, {
+          paddingTop: 3,
+          children: /*#__PURE__*/_jsx(Button, {
+            block: true,
+            onPress: handleCTAPress,
+            children: "Got it"
+          })
+        })]
+      }) : /*#__PURE__*/_jsx(VStack, {
+        children: quickActions.map(action => /*#__PURE__*/_jsx(ListCell, {
+          accessory: "arrow",
+          description: action.description,
+          onPress: () => alert(action.title + " pressed"),
+          spacingVariant: "condensed",
+          title: action.title
+        }, action.name))
+      })
+    })]
+  });
+};
+const TOP_TRAY_OFFSET = 20;
+const SAFE_AREA_OVERFLOW_MULTIPLIER = 2;
+const BACKGROUND_COLOR = '#011C92';
+const UPSELL_BENEFITS = [{
+  key: '1',
+  icon: 'cash',
+  text: 'Earn rewards on every purchase'
+}, {
+  key: '2',
+  icon: 'lock',
+  text: 'No annual fee, ever'
+}, {
+  key: '3',
+  icon: 'star',
+  text: 'Instant cashback in crypto'
+}];
+const UpsellBenefitPoint = /*#__PURE__*/memo(function UpsellBenefitPoint(_ref2) {
+  let {
+    icon,
+    text
+  } = _ref2;
+  return /*#__PURE__*/_jsxs(HStack, {
+    gap: 2,
+    children: [/*#__PURE__*/_jsx(Icon, {
+      color: "fg",
+      name: icon,
+      paddingTop: 0.5,
+      size: "s"
+    }), /*#__PURE__*/_jsx(Box, {
+      maxWidth: "90%",
+      children: /*#__PURE__*/_jsx(TextBody, {
+        color: "fg",
+        children: text
+      })
+    })]
+  });
+});
+const ProductUpsellTrayExample = () => {
+  const [isTrayVisible, setIsTrayVisible] = useState(false);
+  const setIsTrayVisibleOff = useCallback(() => setIsTrayVisible(false), []);
+  const setIsTrayVisibleOn = useCallback(() => setIsTrayVisible(true), []);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Button, {
+      onPress: setIsTrayVisibleOn,
+      children: "Open"
+    }), isTrayVisible && /*#__PURE__*/_jsx(Tray, {
+      handleBarAccessibilityLabel: "Product upsell details",
+      onCloseComplete: setIsTrayVisibleOff,
+      verticalDrawerPercentageOfView: 0.95,
+      children: _ref3 => {
+        let {
+          handleClose
+        } = _ref3;
+        return /*#__PURE__*/_jsx(ProductUpsellTrayContent, {
+          benefits: UPSELL_BENEFITS,
+          dismiss: handleClose
+        });
+      }
+    })]
   });
 };
+const ProductUpsellTrayContent = /*#__PURE__*/memo(function ProductUpsellTrayContent(_ref4) {
+  let {
+    benefits,
+    dismiss
+  } = _ref4;
+  const {
+    screenWidth
+  } = useDimensions();
+  const insets = useSafeAreaInsets();
+  const bottom = Platform.OS === 'android' ? Math.max(insets.bottom, 24) : insets.bottom;
+  const handlePrimaryCtaPress = useCallback(() => {
+    alert('Primary CTA pressed');
+    dismiss();
+  }, [dismiss]);
+  return /*#__PURE__*/_jsx(ThemeProvider, {
+    activeColorScheme: "dark",
+    theme: defaultTheme,
+    children: /*#__PURE__*/_jsxs(VStack, {
+      position: "relative",
+      children: [/*#__PURE__*/_jsx(Box, {
+        bottom: -bottom * SAFE_AREA_OVERFLOW_MULTIPLIER,
+        dangerouslySetBackground: BACKGROUND_COLOR,
+        height: bottom * SAFE_AREA_OVERFLOW_MULTIPLIER,
+        left: 0,
+        position: "absolute",
+        right: 0,
+        width: "100%"
+      }), /*#__PURE__*/_jsx(Box, {
+        dangerouslySetBackground: BACKGROUND_COLOR,
+        height: TOP_TRAY_OFFSET,
+        left: 0,
+        position: "absolute",
+        right: 0,
+        top: -TOP_TRAY_OFFSET
+      }), /*#__PURE__*/_jsxs(VStack, {
+        dangerouslySetBackground: BACKGROUND_COLOR,
+        gap: 4,
+        paddingTop: 5,
+        paddingX: 3,
+        children: [/*#__PURE__*/_jsx(Box, {
+          alignItems: "center",
+          justifyContent: "center",
+          children: /*#__PURE__*/_jsx(SpotRectangle, {
+            name: "creditCardExcitement"
+          })
+        }), /*#__PURE__*/_jsxs(VStack, {
+          children: [/*#__PURE__*/_jsxs(VStack, {
+            gap: 1,
+            paddingBottom: 2,
+            children: [/*#__PURE__*/_jsx(TextTitle1, {
+              align: "center",
+              color: "fg",
+              children: "Upgrade your experience"
+            }), /*#__PURE__*/_jsx(TextBody, {
+              align: "center",
+              color: "fg",
+              children: "Unlock premium features and earn more rewards."
+            })]
+          }), /*#__PURE__*/_jsx(VStack, {
+            gap: 3,
+            paddingY: 1,
+            children: benefits.map(_ref5 => {
+              let {
+                  key
+                } = _ref5,
+                benefit = _objectWithoutPropertiesLoose(_ref5, _excluded);
+              return /*#__PURE__*/_jsx(UpsellBenefitPoint, _extends({}, benefit), key);
+            })
+          }), /*#__PURE__*/_jsxs(VStack, {
+            paddingTop: 4,
+            children: [/*#__PURE__*/_jsx(Button, {
+              block: true,
+              onPress: handlePrimaryCtaPress,
+              children: "Get started"
+            }), /*#__PURE__*/_jsx(Box, {
+              paddingTop: 1,
+              children: /*#__PURE__*/_jsx(Button, {
+                block: true,
+                onPress: dismiss,
+                variant: "secondary",
+                children: "Maybe later"
+              })
+            }), /*#__PURE__*/_jsx(Box, {
+              opacity: 0.6,
+              paddingTop: 2,
+              children: /*#__PURE__*/_jsx(TextBody, {
+                align: "center",
+                color: "fgMuted",
+                children: "By continuing, you agree to the terms and conditions. Rewards are subject to eligibility requirements."
+              })
+            })]
+          })]
+        })]
+      })]
+    })
+  });
+});
 export default PromotionalTrayScreen;

package/esm/overlays/drawer/Drawer.js

@@ -148,8 +148,8 @@ export const Drawer = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Drawer(
   const rootStyle = useMemo(() => [style, styles == null ? void 0 : styles.root], [style, styles == null ? void 0 : styles.root]);
   const containerStyle = useMemo(() => [drawerAnimationStyles, styles == null ? void 0 : styles.container], [drawerAnimationStyles, styles == null ? void 0 : styles.container]);
   const drawerStyle = useMemo(() => [paddingStyles, {
-    overflow: showHandleBarOutside ? 'visible' : 'hidden'
-  }, styles == null ? void 0 : styles.drawer], [paddingStyles, showHandleBarOutside, styles == null ? void 0 : styles.drawer]);
+    overflow: 'hidden'
+  }, styles == null ? void 0 : styles.drawer], [paddingStyles, styles == null ? void 0 : styles.drawer]);
   const handleBar = useMemo(() => /*#__PURE__*/_jsx(HandleBar, {
     accessibilityLabel: handleBarAccessibilityLabel,
     accessibilityRole: "button",
@@ -197,10 +197,10 @@ export const Drawer = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Drawer(
           elevation: 2,
           maxHeight: !isSideDrawer ? verticalDrawerMaxHeight : '100%',
           style: drawerStyle,
-          children: [showHandleBarInside && handleBar, /*#__PURE__*/_jsx(View, {
+          children: [showHandleBarInside && handleBar, showHandleBarInside ? /*#__PURE__*/_jsx(View, {
             style: overflowStyle,
             children: content
-          })]
+          }) : content]
         })]
       }))]
     })

package/esm/overlays/tray/Tray.js

@@ -29,6 +29,7 @@ export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_ref
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const [titleHeight, setTitleHeight] = useState(0);
   const isInsideHandleBar = handleBarVariant === 'inside';
+  const isTitleString = typeof title === 'string';
   const {
     contentStyle,
     headerStyle,
@@ -78,10 +79,10 @@ export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_ref
         children: [title && /*#__PURE__*/_jsx(Box, {
           justifyContent: "center",
           onLayout: onTitleLayout,
-          paddingBottom: isInsideHandleBar ? 0.75 : 2,
-          paddingTop: isInsideHandleBar ? 0 : 3,
-          paddingX: 3,
-          children: typeof title === 'string' ? /*#__PURE__*/_jsx(Text, {
+          paddingBottom: isInsideHandleBar ? 0.75 : isTitleString ? 2 : 0,
+          paddingTop: isInsideHandleBar ? 0 : isTitleString ? 3 : 0,
+          paddingX: isInsideHandleBar || isTitleString ? 3 : 0,
+          children: isTitleString ? /*#__PURE__*/_jsx(Text, {
             font: "title3",
             style: titleStyle,
             children: title
@@ -95,7 +96,7 @@ export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_ref
         children: content
       }), footerContent]
     });
-  }, [title, contentStyle, onTitleLayout, isInsideHandleBar, headerElevation, headerStyle, titleStyle, header, children, footer]);
+  }, [title, isTitleString, contentStyle, onTitleLayout, isInsideHandleBar, headerElevation, headerStyle, titleStyle, header, children, footer]);
   useEffect(() => {
     onVisibilityChange == null || onVisibilityChange('visible');
     return () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "8.47.0",
+  "version": "8.47.2",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -198,7 +198,7 @@
     "react-native-svg": "^14.1.0"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.47.0",
+    "@coinbase/cds-common": "^8.47.2",
     "@coinbase/cds-icons": "^5.11.0",
     "@coinbase/cds-illustrations": "^4.31.0",
     "@coinbase/cds-lottie-files": "^3.3.4",