@coinbase/cds-mobile 8.54.0 → 8.55.0

package/CHANGELOG.md

@@ -8,6 +8,16 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.55.0 (3/19/2026 PST)
+
+#### 🚀 Updates
+
+- Add `disableSafeAreaPaddingBottom` prop to drawer. [[#522](https://github.com/coinbase/cds/pull/522)]
+
+#### 🐞 Fixes
+
+- Fix padding collapsing on tray with handle bar inside. [[#522](https://github.com/coinbase/cds/pull/522)]
+
 ## 8.54.0 (3/18/2026 PST)
 
 #### 🚀 Updates

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

@@ -73,6 +73,10 @@ export type DrawerBaseProps = SharedProps &
     reduceMotion?: boolean;
     /** Callback fired when the open animation completes. */
     onOpenComplete?: () => void;
+    /**
+     * disable safe area padding for bottom of drawer when true
+     */
+    disableSafeAreaPaddingBottom?: boolean;
   };
 export type DrawerProps = DrawerBaseProps & {
   styles?: {
@@ -152,6 +156,10 @@ export declare const Drawer: React.MemoExoticComponent<
         reduceMotion?: boolean;
         /** Callback fired when the open animation completes. */
         onOpenComplete?: () => void;
+        /**
+         * disable safe area padding for bottom of drawer when true
+         */
+        disableSafeAreaPaddingBottom?: boolean;
       } & {
         styles?: {
           /** Root container element */

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/drawer/useDrawerSpacing.d.ts

@@ -1,5 +1,8 @@
 import type { PinningDirection } from '@coinbase/cds-common';
-export declare const useDrawerSpacing: (pin?: PinningDirection | undefined) =>
+export declare const useDrawerSpacing: (
+  pin?: PinningDirection | undefined,
+  disableSafeAreaPaddingBottom?: boolean,
+) =>
   | {
       paddingTop: number;
       paddingLeft?: undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"useDrawerSpacing.d.ts","sourceRoot":"","sources":["../../../src/overlays/drawer/useDrawerSpacing.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAK7D,eAAO,MAAM,gBAAgB,GAAI,MAAK,gBAAgB,GAAG,SAAoB;;;;;;;;;;;;;;;;;;;;CAoB5E,CAAC"}
+{"version":3,"file":"useDrawerSpacing.d.ts","sourceRoot":"","sources":["../../../src/overlays/drawer/useDrawerSpacing.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAK7D,eAAO,MAAM,gBAAgB,GAC3B,MAAK,gBAAgB,GAAG,SAAoB,EAC5C,+BAA8B,OAAe;;;;;;;;;;;;;;;;;;;;CA6B9C,CAAC"}

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

@@ -78,6 +78,9 @@ export declare const Tray: React.MemoExoticComponent<
       } & React.RefAttributes<DrawerRefBaseProps>
   >
 >;
+/**
+ * @deprecated Redundant component.
+ */
 export declare const TrayStickyFooter: ({
   children,
 }: {

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;6CAqIJ,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;6CAsIJ,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,cAAc;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,4CAQrE,CAAC"}

package/dts/sticky-footer/StickyFooter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StickyFooter.d.ts","sourceRoot":"","sources":["../../src/sticky-footer/StickyFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,WAAW,CAAC;AAE/C,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG;IACzC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;IAPvB;;;OAGG;eACQ,OAAO;+BAiCnB,CAAC"}
+{"version":3,"file":"StickyFooter.d.ts","sourceRoot":"","sources":["../../src/sticky-footer/StickyFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAGpC,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,WAAW,CAAC;AAE/C,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG;IACzC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;IAPvB;;;OAGG;eACQ,OAAO;+BAmCnB,CAAC"}

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

@@ -1,7 +1,7 @@
 const _excluded = ["media"];
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback, useRef, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { FlatList } from 'react-native';
 import { assets } from '@coinbase/cds-common/internal/data/assets';
 import { Button } from '../../buttons/Button';
@@ -12,7 +12,7 @@ import { SectionHeader } from '../../section-header/SectionHeader';
 import { StickyFooter } from '../../sticky-footer/StickyFooter';
 import { Link } from '../../typography/Link';
 import { Text } from '../../typography/Text';
-import { Tray, TrayStickyFooter } from '../tray/Tray';
+import { Tray } from '../tray/Tray';
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 const defaultOptions = [{
   title: 'Ethereum',
@@ -142,6 +142,19 @@ export const WithStickyFooter = () => {
     }), isTrayVisible && /*#__PURE__*/_jsx(Tray, {
       ref: trayRef,
       disableCapturePanGestureToDismiss: true,
+      footer: _ref3 => {
+        let {
+          handleClose
+        } = _ref3;
+        return /*#__PURE__*/_jsx(StickyFooter, {
+          paddingX: 3,
+          children: /*#__PURE__*/_jsx(Button, {
+            block: true,
+            onPress: handleClose,
+            children: "Button"
+          })
+        });
+      },
       handleBarAccessibilityLabel: "Dismiss",
       onCloseComplete: setIsTrayVisibleToFalse,
       onVisibilityChange: handleTrayVisibilityChange,
@@ -149,25 +162,11 @@ export const WithStickyFooter = () => {
         paddingX: 3,
         title: "Section header"
       }),
-      children: _ref3 => {
-        let {
-          handleClose
-        } = _ref3;
-        return /*#__PURE__*/_jsxs(TrayStickyFooter, {
-          children: [/*#__PURE__*/_jsx(FlatList, {
-            data: items,
-            keyExtractor: handleKeyExtractor,
-            renderItem: renderItem
-          }), /*#__PURE__*/_jsx(StickyFooter, {
-            paddingX: 3,
-            children: /*#__PURE__*/_jsx(Button, {
-              block: true,
-              onPress: handleClose,
-              children: "Button"
-            })
-          })]
-        });
-      }
+      children: /*#__PURE__*/_jsx(FlatList, {
+        data: items,
+        keyExtractor: handleKeyExtractor,
+        renderItem: renderItem
+      })
     })]
   });
 };

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { Button } from '../../buttons/Button';
 import { Example, ExampleScreen } from '../../examples/ExampleScreen';
 import { HStack, VStack } from '../../layout';
@@ -6,7 +6,7 @@ import { SectionHeader } from '../../section-header/SectionHeader';
 import { StickyFooter } from '../../sticky-footer/StickyFooter';
 import { Text } from '../../typography/Text';
 import { ProgressBar } from '../../visualizations/ProgressBar';
-import { Tray, TrayStickyFooter } from '../tray/Tray';
+import { Tray } from '../tray/Tray';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export const Default = () => {
   const [isTrayVisible, setIsTrayVisible] = useState(false);
@@ -22,50 +22,47 @@ export const Default = () => {
       children: "Open"
     }), isTrayVisible && /*#__PURE__*/_jsx(Tray, {
       ref: trayRef,
-      handleBarAccessibilityLabel: "Dismiss",
-      onCloseComplete: setIsTrayVisibleToFalse,
-      onVisibilityChange: handleTrayVisibilityChange,
-      title: /*#__PURE__*/_jsx(SectionHeader, {
-        paddingX: 3,
-        title: "Trading activity"
-      }),
-      children: _ref => {
+      footer: _ref => {
         let {
           handleClose
         } = _ref;
-        return /*#__PURE__*/_jsxs(TrayStickyFooter, {
-          children: [/*#__PURE__*/_jsxs(VStack, {
-            paddingBottom: 1,
-            paddingX: 3,
-            children: [/*#__PURE__*/_jsx(Text, {
-              color: "fgMuted",
-              font: "body",
-              paddingBottom: 3,
-              children: "The percentage of Coinbase customers who increased or decreased their net position in 00 over the past 24 hours through trading. What this means: Increased buying activity can signal that the asset is gaining popularity. Last updated on May 2, 2023."
-            }), /*#__PURE__*/_jsx(Text, {
-              font: "headline",
-              children: "What this means:"
-            }), /*#__PURE__*/_jsx(Text, {
-              color: "fgMuted",
-              font: "body",
-              paddingBottom: 3,
-              children: "Increased buying activity can signal that the asset is gaining popularity."
-            }), /*#__PURE__*/_jsx(Text, {
-              color: "fgMuted",
-              font: "legal",
-              children: "Last updated on May 2, 2023."
-            })]
-          }), /*#__PURE__*/_jsx(StickyFooter, {
-            paddingX: 3,
-            children: /*#__PURE__*/_jsx(Button, {
-              block: true,
-              onPress: handleClose,
-              variant: "secondary",
-              children: "Got it"
-            })
-          })]
+        return /*#__PURE__*/_jsx(StickyFooter, {
+          paddingX: 3,
+          children: /*#__PURE__*/_jsx(Button, {
+            block: true,
+            onPress: handleClose,
+            variant: "secondary",
+            children: "Got it"
+          })
         });
-      }
+      },
+      handleBarAccessibilityLabel: "Dismiss",
+      handleBarVariant: "inside",
+      onCloseComplete: setIsTrayVisibleToFalse,
+      onVisibilityChange: handleTrayVisibilityChange,
+      title: "Trading activity",
+      children: /*#__PURE__*/_jsxs(VStack, {
+        paddingBottom: 1,
+        paddingX: 3,
+        children: [/*#__PURE__*/_jsx(Text, {
+          color: "fgMuted",
+          font: "body",
+          paddingBottom: 3,
+          children: "The percentage of Coinbase customers who increased or decreased their net position in 00 over the past 24 hours through trading. What this means: Increased buying activity can signal that the asset is gaining popularity. Last updated on May 2, 2023."
+        }), /*#__PURE__*/_jsx(Text, {
+          font: "headline",
+          children: "What this means:"
+        }), /*#__PURE__*/_jsx(Text, {
+          color: "fgMuted",
+          font: "body",
+          paddingBottom: 3,
+          children: "Increased buying activity can signal that the asset is gaining popularity."
+        }), /*#__PURE__*/_jsx(Text, {
+          color: "fgMuted",
+          font: "legal",
+          children: "Last updated on May 2, 2023."
+        })]
+      })
     })]
   });
 };
@@ -94,7 +91,7 @@ export const WithProgressBar = () => {
         let {
           handleClose
         } = _ref2;
-        return /*#__PURE__*/_jsxs(TrayStickyFooter, {
+        return /*#__PURE__*/_jsxs(_Fragment, {
           children: [/*#__PURE__*/_jsxs(VStack, {
             paddingBottom: 1,
             paddingX: 3,

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

@@ -1,11 +1,11 @@
-import React, { useCallback, useRef, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { Button } from '../../buttons/Button';
 import { Example, ExampleScreen } from '../../examples/ExampleScreen';
 import { SpotSquare } from '../../illustrations';
 import { Box, VStack } from '../../layout';
 import { StickyFooter } from '../../sticky-footer/StickyFooter';
 import { Text } from '../../typography/Text';
-import { Tray, TrayStickyFooter } from '../tray/Tray';
+import { Tray } from '../tray/Tray';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export const Default = () => {
   const [isTrayVisible, setIsTrayVisible] = useState(false);
@@ -21,45 +21,44 @@ export const Default = () => {
       children: "Open"
     }), isTrayVisible && /*#__PURE__*/_jsx(Tray, {
       ref: trayRef,
-      handleBarAccessibilityLabel: "Dismiss",
-      onCloseComplete: setIsTrayVisibleToFalse,
-      onVisibilityChange: handleTrayVisibilityChange,
-      children: _ref => {
+      footer: _ref => {
         let {
           handleClose
         } = _ref;
-        return /*#__PURE__*/_jsxs(TrayStickyFooter, {
-          children: [/*#__PURE__*/_jsxs(VStack, {
-            paddingBottom: 1,
-            paddingTop: 1,
-            paddingX: 3,
-            children: [/*#__PURE__*/_jsx(Box, {
-              alignItems: "center",
-              paddingBottom: 4,
-              children: /*#__PURE__*/_jsx(SpotSquare, {
-                name: "borrowWallet"
-              })
-            }), /*#__PURE__*/_jsx(Text, {
-              align: "center",
-              font: "title1",
-              paddingBottom: 1,
-              children: "You\u2019re ready to explore"
-            }), /*#__PURE__*/_jsx(Text, {
-              align: "center",
-              color: "fgMuted",
-              font: "body",
-              children: "You don\u2019t have any dapps open right now. Here\u2019s one you might like: [dapp]"
-            })]
-          }), /*#__PURE__*/_jsx(StickyFooter, {
-            paddingX: 3,
-            children: /*#__PURE__*/_jsx(Button, {
-              block: true,
-              onPress: handleClose,
-              children: "Button"
-            })
-          })]
+        return /*#__PURE__*/_jsx(StickyFooter, {
+          paddingX: 3,
+          children: /*#__PURE__*/_jsx(Button, {
+            block: true,
+            onPress: handleClose,
+            children: "Button"
+          })
         });
-      }
+      },
+      handleBarAccessibilityLabel: "Dismiss",
+      onCloseComplete: setIsTrayVisibleToFalse,
+      onVisibilityChange: handleTrayVisibilityChange,
+      children: /*#__PURE__*/_jsxs(VStack, {
+        paddingBottom: 1,
+        paddingTop: 1,
+        paddingX: 3,
+        children: [/*#__PURE__*/_jsx(Box, {
+          alignItems: "center",
+          paddingBottom: 4,
+          children: /*#__PURE__*/_jsx(SpotSquare, {
+            name: "borrowWallet"
+          })
+        }), /*#__PURE__*/_jsx(Text, {
+          align: "center",
+          font: "title1",
+          paddingBottom: 1,
+          children: "You\u2019re ready to explore"
+        }), /*#__PURE__*/_jsx(Text, {
+          align: "center",
+          color: "fgMuted",
+          font: "body",
+          children: "You don\u2019t have any dapps open right now. Here\u2019s one you might like: [dapp]"
+        })]
+      })
     })]
   });
 };

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

@@ -1,13 +1,11 @@
 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 { memo, useCallback, useRef, useState } from 'react';
 import { Button } from '../../buttons/Button';
 import { ListCell } from '../../cells/ListCell';
 import { Example, ExampleScreen } from '../../examples/ExampleScreen';
-import { useDimensions } from '../../hooks/useDimensions';
+import { useSafeBottomPadding } from '../../hooks/useSafeBottomPadding';
 import { Icon } from '../../icons';
 import { SpotRectangle } from '../../illustrations';
 import { Box, HStack, VStack } from '../../layout';
@@ -17,7 +15,7 @@ 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 { Tray } from '../tray/Tray';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export const Default = () => {
   const [isTrayVisible, setIsTrayVisible] = useState(false);
@@ -33,45 +31,44 @@ export const Default = () => {
       children: "Open"
     }), isTrayVisible && /*#__PURE__*/_jsx(Tray, {
       ref: trayRef,
-      handleBarAccessibilityLabel: "Dismiss",
-      onCloseComplete: setIsTrayVisibleToFalse,
-      onVisibilityChange: handleTrayVisibilityChange,
-      children: _ref => {
+      footer: _ref => {
         let {
           handleClose
         } = _ref;
-        return /*#__PURE__*/_jsxs(TrayStickyFooter, {
-          children: [/*#__PURE__*/_jsxs(VStack, {
-            paddingBottom: 1,
-            paddingTop: 1,
-            paddingX: 3,
-            children: [/*#__PURE__*/_jsx(Box, {
-              alignItems: "center",
-              paddingBottom: 3,
-              children: /*#__PURE__*/_jsx(SpotRectangle, {
-                name: "exploreDecentralizedApps"
-              })
-            }), /*#__PURE__*/_jsx(Text, {
-              align: "center",
-              font: "title1",
-              paddingBottom: 2,
-              children: "Earn crypto by lending, staking, and more"
-            }), /*#__PURE__*/_jsx(Text, {
-              align: "center",
-              color: "fgMuted",
-              font: "body",
-              children: "Many decentralized apps (\u201Cdapps\u201D) let you earn yield on your crypto. Check out trusted dapps like Aave and Compound without leaving Coinbaes."
-            })]
-          }), /*#__PURE__*/_jsx(StickyFooter, {
-            paddingX: 3,
-            children: /*#__PURE__*/_jsx(Button, {
-              block: true,
-              onPress: handleClose,
-              children: "Explore Dapps"
-            })
-          })]
+        return /*#__PURE__*/_jsx(StickyFooter, {
+          paddingX: 3,
+          children: /*#__PURE__*/_jsx(Button, {
+            block: true,
+            onPress: handleClose,
+            children: "Explore Dapps"
+          })
         });
-      }
+      },
+      handleBarAccessibilityLabel: "Dismiss",
+      onCloseComplete: setIsTrayVisibleToFalse,
+      onVisibilityChange: handleTrayVisibilityChange,
+      children: /*#__PURE__*/_jsxs(VStack, {
+        paddingBottom: 1,
+        paddingTop: 1,
+        paddingX: 3,
+        children: [/*#__PURE__*/_jsx(Box, {
+          alignItems: "center",
+          paddingBottom: 3,
+          children: /*#__PURE__*/_jsx(SpotRectangle, {
+            name: "exploreDecentralizedApps"
+          })
+        }), /*#__PURE__*/_jsx(Text, {
+          align: "center",
+          font: "title1",
+          paddingBottom: 2,
+          children: "Earn crypto by lending, staking, and more"
+        }), /*#__PURE__*/_jsx(Text, {
+          align: "center",
+          color: "fgMuted",
+          font: "body",
+          children: "Many decentralized apps (\u201Cdapps\u201D) let you earn yield on your crypto. Check out trusted dapps like Aave and Compound without leaving Coinbaes."
+        })]
+      })
     })]
   });
 };
@@ -120,15 +117,7 @@ const CreditCardAddAssetsTrayExample = () => {
     }), 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,
+      title: trayContentType === 'addFundsInfo' ? 'Lifetime rewards details' : null,
       children: trayContentType === 'addFundsInfo' ? /*#__PURE__*/_jsxs(VStack, {
         paddingX: 3,
         children: [/*#__PURE__*/_jsx(Text, {
@@ -154,8 +143,6 @@ const CreditCardAddAssetsTrayExample = () => {
     })]
   });
 };
-const TOP_TRAY_OFFSET = 20;
-const SAFE_AREA_OVERFLOW_MULTIPLIER = 2;
 const BACKGROUND_COLOR = '#011C92';
 const UPSELL_BENEFITS = [{
   key: '1',
@@ -195,13 +182,23 @@ const ProductUpsellTrayExample = () => {
   const [isTrayVisible, setIsTrayVisible] = useState(false);
   const setIsTrayVisibleOff = useCallback(() => setIsTrayVisible(false), []);
   const setIsTrayVisibleOn = useCallback(() => setIsTrayVisible(true), []);
+  const safeBottomPadding = useSafeBottomPadding();
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Button, {
       onPress: setIsTrayVisibleOn,
       children: "Open"
     }), isTrayVisible && /*#__PURE__*/_jsx(Tray, {
+      disableSafeAreaPaddingBottom: true,
       handleBarAccessibilityLabel: "Product upsell details",
       onCloseComplete: setIsTrayVisibleOff,
+      styles: {
+        drawer: {
+          backgroundColor: BACKGROUND_COLOR
+        },
+        content: {
+          paddingBottom: safeBottomPadding
+        }
+      },
       verticalDrawerPercentageOfView: 0.95,
       children: _ref3 => {
         let {
@@ -220,11 +217,6 @@ const ProductUpsellTrayContent = /*#__PURE__*/memo(function ProductUpsellTrayCon
     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();
@@ -232,24 +224,9 @@ const ProductUpsellTrayContent = /*#__PURE__*/memo(function ProductUpsellTrayCon
   return /*#__PURE__*/_jsx(ThemeProvider, {
     activeColorScheme: "dark",
     theme: defaultTheme,
-    children: /*#__PURE__*/_jsxs(VStack, {
+    children: /*#__PURE__*/_jsx(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, {
+      children: /*#__PURE__*/_jsxs(VStack, {
         dangerouslySetBackground: BACKGROUND_COLOR,
         gap: 4,
         paddingTop: 5,
@@ -308,7 +285,7 @@ const ProductUpsellTrayContent = /*#__PURE__*/memo(function ProductUpsellTrayCon
             })]
           })]
         })]
-      })]
+      })
     })
   });
 });

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

@@ -172,6 +172,7 @@ const TrayWithListCells = () => {
       children: "Open"
     }), isTrayVisible && /*#__PURE__*/_jsx(Tray, {
       ref: trayRef,
+      disableSafeAreaPaddingBottom: true,
       handleBarVariant: "inside",
       headerElevation: isScrolled ? 2 : 0,
       onCloseComplete: setIsTrayVisibleOff,
@@ -196,7 +197,6 @@ const TrayWithListCells = () => {
   });
 };
 const TrayWithListCellsStickyFooter = () => {
-  const safeBottomPadding = useSafeBottomPadding();
   const [isTrayVisible, setIsTrayVisible] = useState(false);
   const [isScrolled, setIsScrolled] = useState(false);
   const setIsTrayVisibleOff = useCallback(() => setIsTrayVisible(false), [setIsTrayVisible]);
@@ -223,9 +223,6 @@ const TrayWithListCellsStickyFooter = () => {
           background: "bgElevation2",
           elevation: isScrolled ? 2 : 0,
           paddingX: 3,
-          style: {
-            paddingBottom: safeBottomPadding
-          },
           children: /*#__PURE__*/_jsx(Button, {
             block: true,
             onPress: handleClose,
@@ -327,6 +324,7 @@ const IllustrationTrayWithListCells = () => {
       children: "Open"
     }), isTrayVisible && /*#__PURE__*/_jsx(Tray, {
       ref: trayRef,
+      disableSafeAreaPaddingBottom: true,
       handleBarVariant: "inside",
       headerElevation: isScrolled ? 2 : 0,
       onCloseComplete: setIsTrayVisibleOff,
@@ -410,7 +408,6 @@ const IllustrationTrayWithStickyFooter = () => {
   });
 };
 const IllustrationTrayWithListCellsStickyFooter = () => {
-  const safeBottomPadding = useSafeBottomPadding();
   const [isTrayVisible, setIsTrayVisible] = useState(false);
   const [isScrolled, setIsScrolled] = useState(false);
   const setIsTrayVisibleOff = useCallback(() => setIsTrayVisible(false), [setIsTrayVisible]);
@@ -437,9 +434,6 @@ const IllustrationTrayWithListCellsStickyFooter = () => {
           background: "bgElevation2",
           elevation: isScrolled ? 2 : 0,
           paddingX: 3,
-          style: {
-            paddingBottom: safeBottomPadding
-          },
           children: /*#__PURE__*/_jsx(Button, {
             block: true,
             onPress: handleClose,
@@ -570,6 +564,7 @@ const FullBleedImageTrayWithListCells = () => {
       children: "Open"
     }), isTrayVisible && /*#__PURE__*/_jsx(Tray, {
       ref: trayRef,
+      disableSafeAreaPaddingBottom: true,
       handleBarVariant: "inside",
       header: /*#__PURE__*/_jsx(Text, {
         font: "title3",
@@ -591,8 +586,7 @@ const FullBleedImageTrayWithListCells = () => {
         header: {
           paddingHorizontal: 0,
           paddingBottom: 0
-        },
-        drawer: scrollContentStyle
+        }
       },
       title: /*#__PURE__*/_jsx(Box, {
         background: "bgAlternate",
@@ -907,8 +901,7 @@ const MultiScreenTrayExample = () => {
       let {
         onNavigate
       } = _ref9;
-      return /*#__PURE__*/_jsxs(ScrollView, {
-        scrollEventThrottle: 16,
+      return /*#__PURE__*/_jsxs(VStack, {
         children: [/*#__PURE__*/_jsx(ListCell, {
           accessory: "arrow",
           description: "Manage your account settings",

package/esm/overlays/__stories__/Trays.js

@@ -102,6 +102,7 @@ export const ScrollableTray = _ref2 => {
     }), isTrayVisible && /*#__PURE__*/_jsx(Tray, {
       ref: trayRef,
       disableCapturePanGestureToDismiss: true,
+      disableSafeAreaPaddingBottom: true,
       onCloseComplete: setIsTrayVisibleOff,
       title: title,
       verticalDrawerPercentageOfView: verticalDrawerPercentageOfView,

package/esm/overlays/drawer/Drawer.js

@@ -1,8 +1,8 @@
-const _excluded = ["children", "pin", "onCloseComplete", "preventDismissGestures", "preventHardwareBackBehaviorAndroid", "handleBarVariant", "hideHandleBar", "disableCapturePanGestureToDismiss", "onBlur", "verticalDrawerPercentageOfView", "handleBarAccessibilityLabel", "accessibilityLabel", "accessibilityLabelledBy", "reduceMotion", "onOpenComplete", "style", "styles", "accessibilityRole", "animationType"];
+const _excluded = ["children", "pin", "onCloseComplete", "preventDismissGestures", "preventHardwareBackBehaviorAndroid", "handleBarVariant", "hideHandleBar", "disableCapturePanGestureToDismiss", "onBlur", "verticalDrawerPercentageOfView", "handleBarAccessibilityLabel", "accessibilityLabel", "accessibilityLabelledBy", "reduceMotion", "onOpenComplete", "style", "styles", "accessibilityRole", "animationType", "disableSafeAreaPaddingBottom"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { Animated, Keyboard, Modal, Platform, useWindowDimensions, View } from 'react-native';
+import { Animated, Keyboard, Modal, Platform, useWindowDimensions } from 'react-native';
 import { drawerAnimationDefaultDuration, MAX_OVER_DRAG } from '@coinbase/cds-common/animation/drawer';
 import { OverlayContentContext } from '@coinbase/cds-common/overlays/OverlayContentContext';
 import { horizontalDrawerPercentageOfView, verticalDrawerPercentageOfView as defaultVerticalDrawerPercentageOfView } from '@coinbase/cds-common/tokens/drawer';
@@ -19,10 +19,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const overlayContentContextValue = {
   isDrawer: true
 };
-const overflowStyle = {
-  overflow: 'hidden',
-  maxHeight: '100%'
-};
 export const Drawer = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Drawer(_ref, ref) {
   let {
       children,
@@ -43,7 +39,8 @@ export const Drawer = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Drawer(
       style,
       styles,
       accessibilityRole = 'alert',
-      animationType = 'none'
+      animationType = 'none',
+      disableSafeAreaPaddingBottom
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const theme = useTheme();
@@ -61,7 +58,7 @@ export const Drawer = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Drawer(
     animateSwipeToClose
   } = useDrawerAnimation(pin, verticalDrawerPercentageOfView, reduceMotion);
   const [opacityAnimation, animateOverlayIn, animateOverlayOut] = useOverlayAnimation(drawerAnimationDefaultDuration);
-  const paddingStyles = useDrawerSpacing(pin);
+  const paddingStyles = useDrawerSpacing(pin, disableSafeAreaPaddingBottom);
   const isMounted = useRef(false);
   const handleClose = useCallback(() => {
     Animated.parallel([animateDrawerOut, animateOverlayOut]).start(_ref2 => {
@@ -199,10 +196,7 @@ export const Drawer = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Drawer(
           elevation: 2,
           maxHeight: !isSideDrawer ? verticalDrawerMaxHeight : '100%',
           style: drawerStyle,
-          children: [showHandleBarInside && handleBar, showHandleBarInside ? /*#__PURE__*/_jsx(View, {
-            style: overflowStyle,
-            children: content
-          }) : content]
+          children: [showHandleBarInside && handleBar, content]
         })]
       }))]
     })

package/esm/overlays/drawer/useDrawerSpacing.js

@@ -2,39 +2,42 @@ import { useMemo } from 'react';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { MAX_OVER_DRAG } from '@coinbase/cds-common/animation/drawer';
 import { useSafeBottomPadding } from '../../hooks/useSafeBottomPadding';
-export const useDrawerSpacing = function (pin) {
+export const useDrawerSpacing = function (pin, disableSafeAreaPaddingBottom) {
   if (pin === void 0) {
     pin = 'bottom';
   }
+  if (disableSafeAreaPaddingBottom === void 0) {
+    disableSafeAreaPaddingBottom = false;
+  }
   const {
-    top
+    top: safeTopPadding
   } = useSafeAreaInsets();
   const safeBottomPadding = useSafeBottomPadding();
   const safeAreaStyles = useMemo(() => {
     switch (pin) {
       case 'top':
         return {
-          paddingTop: top + MAX_OVER_DRAG
+          paddingTop: safeTopPadding + MAX_OVER_DRAG
         };
       case 'left':
         return {
-          paddingTop: top,
+          paddingTop: safeTopPadding,
           paddingLeft: MAX_OVER_DRAG
         };
       case 'bottom':
         return {
-          paddingBottom: safeBottomPadding + MAX_OVER_DRAG
+          paddingBottom: disableSafeAreaPaddingBottom ? MAX_OVER_DRAG : safeBottomPadding + MAX_OVER_DRAG
         };
       case 'right':
         return {
-          paddingTop: top,
+          paddingTop: safeTopPadding,
           paddingRight: MAX_OVER_DRAG
         };
       default:
         return {
-          paddingBottom: safeBottomPadding + MAX_OVER_DRAG
+          paddingBottom: disableSafeAreaPaddingBottom ? MAX_OVER_DRAG : safeBottomPadding + MAX_OVER_DRAG
         };
     }
-  }, [pin, safeBottomPadding, top]);
+  }, [pin, safeBottomPadding, safeTopPadding, disableSafeAreaPaddingBottom]);
   return safeAreaStyles;
 };

package/esm/overlays/tray/Tray.js

@@ -71,6 +71,7 @@ export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_ref
       flexGrow: 1,
       flexShrink: 1,
       minHeight: 0,
+      overflow: "hidden",
       paddingTop: title ? 0 : 2,
       style: contentStyle,
       children: [(title || headerContent) && /*#__PURE__*/_jsxs(Box, {
@@ -119,6 +120,10 @@ export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_ref
     }))
   });
 }));
+
+/**
+ * @deprecated Redundant component.
+ */
 export const TrayStickyFooter = _ref4 => {
   let {
     children

package/esm/sticky-footer/StickyFooter.js

@@ -1,4 +1,4 @@
-const _excluded = ["elevated", "elevation", "children", "testID", "role", "accessibilityLabel", "padding"];
+const _excluded = ["elevated", "elevation", "children", "testID", "role", "accessibilityLabel", "padding", "flexShrink"];
 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';
@@ -13,13 +13,15 @@ export const StickyFooter = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, for
       testID = 'sticky-footer',
       role = 'toolbar',
       accessibilityLabel = 'footer',
-      padding = 2
+      padding = 2,
+      flexShrink = 0
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   return /*#__PURE__*/_jsx(Box, _extends({
     ref: forwardedRef,
     accessibilityLabel: accessibilityLabel,
     elevation: elevation,
+    flexShrink: flexShrink,
     padding: padding,
     role: role,
     testID: testID

package/esm/sticky-footer/__stories__/StickyFooterWithTray.stories.js

@@ -1,12 +1,12 @@
 import React, { useCallback, useRef, useState } from 'react';
-import { FlatList, ScrollView } from 'react-native';
+import { FlatList } from 'react-native';
 import { prices } from '@coinbase/cds-common/internal/data/prices';
 import { Button } from '../../buttons/Button';
 import { Menu } from '../../controls/Menu';
 import { SelectOption } from '../../controls/SelectOption';
 import { Example, ExampleScreen } from '../../examples/ExampleScreen';
 import { Box, HStack } from '../../layout';
-import { Tray, TrayStickyFooter } from '../../overlays';
+import { Tray } from '../../overlays';
 import { StickyFooter } from '../StickyFooter';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const options = prices.slice(0, 20);
@@ -42,51 +42,46 @@ const StickyFooterWithTray = _ref => {
     }), isTrayVisible && /*#__PURE__*/_jsx(Tray, {
       ref: trayRef,
       disableCapturePanGestureToDismiss: true,
-      onCloseComplete: setIsTrayVisibleToFalse,
-      title: title,
-      verticalDrawerPercentageOfView: 0.75,
-      children: _ref3 => {
+      footer: _ref3 => {
         let {
           handleClose
         } = _ref3;
-        return /*#__PURE__*/_jsxs(TrayStickyFooter, {
-          children: [/*#__PURE__*/_jsx(ScrollView, {
-            children: /*#__PURE__*/_jsx(Menu, {
-              onChange: setValue,
-              value: value,
-              children: /*#__PURE__*/_jsx(FlatList, {
-                data: options,
-                renderItem: renderItem,
-                scrollEnabled: false
+        return /*#__PURE__*/_jsx(StickyFooter, {
+          children: /*#__PURE__*/_jsxs(HStack, {
+            alignItems: "center",
+            gap: 1,
+            justifyContent: "center",
+            width: "100%",
+            children: [/*#__PURE__*/_jsx(Box, {
+              flexGrow: 1,
+              children: /*#__PURE__*/_jsx(Button, {
+                block: true,
+                variant: "secondary",
+                children: "Secondary"
+              })
+            }), /*#__PURE__*/_jsx(Box, {
+              flexGrow: 1,
+              children: /*#__PURE__*/_jsx(Button, {
+                block: true,
+                onPress: handleClose,
+                children: "Primary"
               })
-            })
-          }), /*#__PURE__*/_jsx(StickyFooter, {
-            elevated: true,
-            children: /*#__PURE__*/_jsxs(HStack, {
-              alignContent: "center",
-              alignItems: "center",
-              gap: 1,
-              justifyContent: "center",
-              width: "100%",
-              children: [/*#__PURE__*/_jsx(Box, {
-                flexGrow: 1,
-                children: /*#__PURE__*/_jsx(Button, {
-                  block: true,
-                  variant: "secondary",
-                  children: "Secondary"
-                })
-              }), /*#__PURE__*/_jsx(Box, {
-                flexGrow: 1,
-                children: /*#__PURE__*/_jsx(Button, {
-                  block: true,
-                  onPress: handleClose,
-                  children: "Primary"
-                })
-              })]
-            })
-          })]
+            })]
+          })
         });
-      }
+      },
+      handleBarVariant: "inside",
+      onCloseComplete: setIsTrayVisibleToFalse,
+      title: title,
+      verticalDrawerPercentageOfView: 0.75,
+      children: /*#__PURE__*/_jsx(Menu, {
+        onChange: setValue,
+        value: value,
+        children: /*#__PURE__*/_jsx(FlatList, {
+          data: options,
+          renderItem: renderItem
+        })
+      })
     })]
   });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "8.54.0",
+  "version": "8.55.0",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -197,7 +197,7 @@
     "react-native-svg": "^14.1.0"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.54.0",
+    "@coinbase/cds-common": "^8.55.0",
     "@coinbase/cds-icons": "^5.13.0",
     "@coinbase/cds-illustrations": "^4.34.0",
     "@coinbase/cds-lottie-files": "^3.3.4",