@coinbase/cds-mobile 8.46.1 → 8.47.1

package/CHANGELOG.md

@@ -8,6 +8,18 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 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
+
+- Feat: enable Button text customization via font props. [[#408](https://github.com/coinbase/cds/pull/408)]
+
 ## 8.46.1 (2/12/2026 PST)
 
 #### 🐞 Fixes

package/dts/buttons/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/buttons/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiE,MAAM,OAAO,CAAC;AACtF,OAAO,EAIL,KAAK,IAAI,EACV,MAAM,cAAc,CAAC;AAGtB,OAAO,KAAK,EACV,aAAa,EACb,QAAQ,EACR,wBAAwB,EACxB,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAMpC,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAGzE,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;CAejB,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,WAAW,GACvC,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,GACpD,kBAAkB,GAAG;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wDAAwD;IACxD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4CAA4C;IAC5C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,yBAAyB;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,iDAAiD;IACjD,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,uCAAuC;IACvC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uBAAuB;IACvB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,QAAQ,CAAC;IACnB,qCAAqC;IACrC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACxB,kDAAkD;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEJ,MAAM,MAAM,WAAW,GAAG,eAAe,CAAC;AAE1C,eAAO,MAAM,MAAM;;;;;;;;;IA/Cf;;;OAGG;cACO,aAAa;IACvB,mCAAmC;eACxB,OAAO;IAClB,wDAAwD;cAC9C,OAAO;IACjB,2EAA2E;kBAC7D,OAAO;IACrB,0DAA0D;YAClD,OAAO;IACf,yDAAyD;cAC/C,OAAO;IACjB,4CAA4C;cAClC,KAAK,CAAC,SAAS;IACzB,yBAAyB;YACjB,KAAK,CAAC,SAAS;IACvB,iDAAiD;gBACrC,QAAQ;IACpB,uCAAuC;sBACrB,OAAO;IACzB,uBAAuB;UACjB,KAAK,CAAC,SAAS;IACrB,+CAA+C;cACrC,QAAQ;IAClB,qCAAqC;oBACrB,OAAO;IACvB;;;OAGG;YACK,OAAO,GAAG,KAAK;IACvB,kDAAkD;WAC3C,MAAM;IACb,oCAAoC;qBACnB,OAAO;IACxB;;;OAGG;oBACa,MAAM;+BAsJzB,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/buttons/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiE,MAAM,OAAO,CAAC;AACtF,OAAO,EAIL,KAAK,IAAI,EACV,MAAM,cAAc,CAAC;AAGtB,OAAO,KAAK,EACV,aAAa,EACb,QAAQ,EACR,wBAAwB,EACxB,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAMpC,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAGzE,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;CAejB,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,WAAW,GACvC,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,GACpD,kBAAkB,GAAG;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wDAAwD;IACxD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4CAA4C;IAC5C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,yBAAyB;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,iDAAiD;IACjD,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,uCAAuC;IACvC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uBAAuB;IACvB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,QAAQ,CAAC;IACnB,qCAAqC;IACrC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACxB,kDAAkD;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEJ,MAAM,MAAM,WAAW,GAAG,eAAe,CAAC;AAE1C,eAAO,MAAM,MAAM;;;;;;;;;IA/Cf;;;OAGG;cACO,aAAa;IACvB,mCAAmC;eACxB,OAAO;IAClB,wDAAwD;cAC9C,OAAO;IACjB,2EAA2E;kBAC7D,OAAO;IACrB,0DAA0D;YAClD,OAAO;IACf,yDAAyD;cAC/C,OAAO;IACjB,4CAA4C;cAClC,KAAK,CAAC,SAAS;IACzB,yBAAyB;YACjB,KAAK,CAAC,SAAS;IACvB,iDAAiD;gBACrC,QAAQ;IACpB,uCAAuC;sBACrB,OAAO;IACzB,uBAAuB;UACjB,KAAK,CAAC,SAAS;IACrB,+CAA+C;cACrC,QAAQ;IAClB,qCAAqC;oBACrB,OAAO;IACvB;;;OAGG;YACK,OAAO,GAAG,KAAK;IACvB,kDAAkD;WAC3C,MAAM;IACb,oCAAoC;qBACnB,OAAO;IACxB;;;OAGG;oBACa,MAAM;+BAgKzB,CAAC"}

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":"AAAA,OAAO,KASN,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAarF,OAAO,KAAK,EACV,gBAAgB,EAChB,wBAAwB,EACxB,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAIpC,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AASxE,MAAM,MAAM,oBAAoB,GAAG,KAAK,CAAC,EAAE,CAAC;IAAE,WAAW,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC,CAAC;AAEzE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,gDAAgD;IAChD,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,WAAW,GACvC,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,GAAG,yBAAyB,CAAC,GAChF,IAAI,CAAC,UAAU,EAAE,gBAAgB,GAAG,UAAU,CAAC,GAAG;IAChD,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,oBAAoB,GAAG,KAAK,CAAC,SAAS,CAAC;IAClD;;;SAGK;IACL,GAAG,CAAC,EAAE,gBAAgB,CAAC;IACvB;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;OAEG;IACH,kCAAkC,CAAC,EAAE,OAAO,CAAC;IAC7C;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IAC7C;;SAEK;IACL,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uDAAuD;IACvD,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B;;;OAGG;IACH,iCAAiC,CAAC,EAAE,OAAO,CAAC;IAC5C,oEAAoE;IACpE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;OAGG;IACH,8BAA8B,CAAC,EAAE,MAAM,CAAC;IACxC;;;OAGG;IACH,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC;;;OAGG;IACH,YAAY,CAAC,EAAE,oBAAoB,GAAG,KAAK,CAAC,SAAS,CAAC;IACtD;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEJ,MAAM,MAAM,WAAW,GAAG,eAAe,GAAG;IAC1C,MAAM,CAAC,EAAE;QACP,6BAA6B;QAC7B,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,+BAA+B;QAC/B,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC/B,yCAAyC;QACzC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACjC,mCAAmC;QACnC,SAAS,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;QACpC,mCAAmC;QACnC,eAAe,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACvC,qCAAqC;QACrC,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAC/B,CAAC;CACH,CAAC;AAQF,eAAO,MAAM,MAAM;IAjFf,+CAA+C;eACpC,oBAAoB,GAAG,KAAK,CAAC,SAAS;IACjD;;;SAGK;UACC,gBAAgB;IACtB;;OAEG;6BACsB,OAAO;IAChC;;OAEG;yCACkC,OAAO;IAC5C;;;;OAIG;uBACgB,cAAc,CAAC,SAAS,CAAC;IAC5C;;SAEK;oBACW,OAAO;IACvB,uDAAuD;qBACtC,MAAM,IAAI;IAC3B;;;OAGG;wCACiC,OAAO;IAC3C,oEAAoE;aAC3D,MAAM,IAAI;IAEnB;;;OAGG;qCAC8B,MAAM;IACvC;;;OAGG;kCAC2B,MAAM;IACpC;;;OAGG;mBACY,oBAAoB,GAAG,KAAK,CAAC,SAAS;IACrD;;;;OAIG;mBACY,OAAO;;aAIf;QACP,6BAA6B;QAC7B,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,+BAA+B;QAC/B,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC/B,yCAAyC;QACzC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACjC,mCAAmC;QACnC,SAAS,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;QACpC,mCAAmC;QACnC,eAAe,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACvC,qCAAqC;QACrC,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAC/B;6CAwOF,CAAC"}
+{"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/buttons/Button.js

@@ -1,4 +1,4 @@
-const _excluded = ["variant", "loading", "transparent", "block", "compact", "children", "start", "startIcon", "startIconActive", "end", "endIcon", "endIconActive", "flush", "noScaleOnPress", "numberOfLines", "background", "color", "style", "wrapperStyles", "feedback", "borderColor", "borderWidth", "borderRadius", "accessibilityLabel", "accessibilityHint"];
+const _excluded = ["variant", "loading", "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"];
 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';
@@ -45,6 +45,11 @@ export const Button = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Button(
       flush,
       noScaleOnPress,
       numberOfLines = 1,
+      font = 'headline',
+      fontFamily,
+      fontSize,
+      fontWeight,
+      lineHeight,
       background,
       color,
       style,
@@ -81,13 +86,17 @@ export const Button = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Button(
   const childrenNode = useMemo(() => /*#__PURE__*/isValidElement(children) && Boolean(children.props.children) ? children : /*#__PURE__*/_jsx(Text, {
     align: "center",
     color: colorValue,
-    font: "headline",
+    font: font,
+    fontFamily: fontFamily,
+    fontSize: fontSize,
+    fontWeight: fontWeight,
+    lineHeight: lineHeight,
     numberOfLines: numberOfLines,
     selectable: false,
     style: styles.text,
     testID: "text-headline",
     children: children
-  }), [children, colorValue, numberOfLines]);
+  }), [children, colorValue, font, fontFamily, fontSize, fontWeight, lineHeight, numberOfLines]);
   return /*#__PURE__*/_jsx(Pressable, _extends({
     ref: ref,
     accessibilityHint: loading ? 'Button is loading' : accessibilityHint,

package/esm/buttons/__stories__/Button.stories.js

@@ -121,6 +121,25 @@ const ButtonScreen = () => {
       children: /*#__PURE__*/_jsx(Button, {
         children: "Some really really really long button text that should get truncated after wrapping two lines"
       })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Typography props",
+      children: /*#__PURE__*/_jsxs(VStack, {
+        alignItems: "flex-start",
+        gap: 2,
+        children: [/*#__PURE__*/_jsx(Button, {
+          children: "I am a headline button"
+        }), /*#__PURE__*/_jsx(Button, {
+          font: "body",
+          children: "I am a body button"
+        }), /*#__PURE__*/_jsx(Button, {
+          font: "title3",
+          children: "I am a title3 button"
+        }), /*#__PURE__*/_jsx(Button, {
+          fontSize: "title3",
+          fontWeight: "body",
+          children: "I have custom fontSize & fontWeight"
+        })]
+      })
     }), /*#__PURE__*/_jsx(Example, {
       title: "Custom endIcon on Button",
       children: /*#__PURE__*/_jsx(VStack, {

package/esm/carousel/__figma__/Carousel.figma.js

@@ -2,14 +2,36 @@ import { Carousel, CarouselItem } from '@coinbase/cds-mobile/carousel';
 import figma from '@figma/code-connect/react';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 figma.connect(Carousel, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=48671-10433', {
+  variant: {
+    platform: 'mobile'
+  },
   imports: ["import { Carousel, CarouselItem } from '@coinbase/cds-mobile/carousel'"],
-  example: () => /*#__PURE__*/_jsxs(Carousel, {
-    children: [/*#__PURE__*/_jsx(CarouselItem, {
-      id: "1"
-    }), /*#__PURE__*/_jsx(CarouselItem, {
-      id: "2"
-    }), /*#__PURE__*/_jsx(CarouselItem, {
-      id: "3"
-    })]
-  })
+  props: {
+    title: figma.boolean('show header', {
+      true: figma.string('title'),
+      false: undefined
+    }),
+    hidePagination: figma.boolean('show pagination', {
+      true: undefined,
+      false: true
+    })
+  },
+  example: _ref => {
+    let {
+      title,
+      hidePagination
+    } = _ref;
+    return /*#__PURE__*/_jsxs(Carousel, {
+      hidePagination: hidePagination,
+      paginationVariant: "dot",
+      title: title,
+      children: [/*#__PURE__*/_jsx(CarouselItem, {
+        id: "1"
+      }), /*#__PURE__*/_jsx(CarouselItem, {
+        id: "2"
+      }), /*#__PURE__*/_jsx(CarouselItem, {
+        id: "3"
+      })]
+    });
+  }
 });

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/esm/overlays/tray/__figma__/Tray.figma.js

@@ -1,47 +1,52 @@
-import { useRef, useState } from 'react';
+import React, { useState } from 'react';
 import { figma } from '@figma/code-connect';
 import { Button } from '../../../buttons/Button';
 import { Box, VStack } from '../../../layout';
-import { TextBody, TextTitle1 } from '../../../typography';
-import { Tray, TrayStickyFooter } from '../Tray';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { StickyFooter } from '../../../sticky-footer/StickyFooter';
+import { Text } from '../../../typography/Text';
+import { Tray } from '../Tray';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 figma.connect(Tray, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=14729-33327&m=dev', {
-  imports: ["import { Tray } from '@coinbase/cds-mobile/overlays/tray/Tray'"],
+  imports: ["import { Tray } from '@coinbase/cds-mobile/overlays/tray/Tray'", "import { StickyFooter } from '@coinbase/cds-mobile/sticky-footer/StickyFooter'"],
   props: {
     title: figma.boolean('show section header', {
       true: figma.textContent('SectionHeader'),
       false: undefined
     }),
-    stickyFooter: figma.children('StickyFooter'),
     content: figma.children('.Select Option*')
   },
   example: function TrayExample(_ref) {
     let {
-      stickyFooter,
       content,
       title
     } = _ref;
     const [isTrayVisible, setIsTrayVisible] = useState(false);
-    const trayRef = useRef(null);
     return /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(Button, {
         onPress: () => setIsTrayVisible(true),
-        children: "Open"
+        children: "Open Tray"
       }), isTrayVisible && /*#__PURE__*/_jsx(Tray, {
-        ref: trayRef,
-        disableCapturePanGestureToDismiss: true,
-        handleBarAccessibilityLabel: "Dismiss",
-        onCloseComplete: () => setIsTrayVisible(false),
-        onVisibilityChange: () => {},
-        title: title,
-        children: _ref2 => {
+        footer: _ref2 => {
           let {
             handleClose
           } = _ref2;
-          return /*#__PURE__*/_jsxs(TrayStickyFooter, {
-            children: [content, stickyFooter]
+          return /*#__PURE__*/_jsx(StickyFooter, {
+            background: "bgElevation2",
+            paddingX: 3,
+            children: /*#__PURE__*/_jsx(Button, {
+              block: true,
+              onPress: handleClose,
+              children: "Close"
+            })
           });
-        }
+        },
+        handleBarVariant: "inside",
+        onCloseComplete: () => setIsTrayVisible(false),
+        title: title,
+        children: /*#__PURE__*/_jsx(VStack, {
+          paddingX: 3,
+          children: content
+        })
       })]
     });
   }
@@ -53,95 +58,97 @@ figma.connect(Tray, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS
       true: figma.children('Spot Square/blockchain'),
       false: undefined
     }),
-    title: figma.textContent('SectionHeader'),
-    stickyFooter: figma.children('StickyFooter')
+    sectionTitle: figma.textContent('SectionHeader')
   },
   example: function TrayExample(_ref3) {
     let {
       pictogram,
-      title,
-      stickyFooter
+      sectionTitle
     } = _ref3;
     const [isTrayVisible, setIsTrayVisible] = useState(false);
-    const trayRef = useRef(null);
     return /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(Button, {
         onPress: () => setIsTrayVisible(true),
-        children: "Open"
+        children: "Open Tray"
       }), isTrayVisible && /*#__PURE__*/_jsx(Tray, {
-        ref: trayRef,
-        disableCapturePanGestureToDismiss: true,
-        handleBarAccessibilityLabel: "Dismiss",
+        accessibilityLabel: sectionTitle,
+        handleBarVariant: "inside",
         onCloseComplete: () => setIsTrayVisible(false),
-        onVisibilityChange: () => {},
-        title: title,
-        children: _ref4 => {
-          let {
-            handleClose
-          } = _ref4;
-          return /*#__PURE__*/_jsxs(TrayStickyFooter, {
-            children: [pictogram, /*#__PURE__*/_jsx(TextBody, {
-              children: "Lorem ipsum dolor sit amet consectetur. Lacus vitae vulputate maecenas sed ac cursus enim elementum euismod. Ac vulputate gravida mauris id nulla imperdiet eget. Dictum vitae enim eget ut. Maecenas hendrerit amet integer sagittis cras. Fermentum ultricies malesuada interdum"
-            }), stickyFooter]
-          });
-        }
+        title: /*#__PURE__*/_jsxs(VStack, {
+          gap: 1.5,
+          children: [pictogram, /*#__PURE__*/_jsx(Text, {
+            font: "title3",
+            children: sectionTitle
+          })]
+        }),
+        children: /*#__PURE__*/_jsx(VStack, {
+          paddingX: 3,
+          children: /*#__PURE__*/_jsx(Text, {
+            color: "fgMuted",
+            font: "body",
+            paddingBottom: 2,
+            children: "Content goes here."
+          })
+        })
       })]
     });
   }
 });
 figma.connect(Tray, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=14729-33505&m=dev', {
-  imports: ["import { Tray } from '@coinbase/cds-mobile/overlays/tray/Tray'"],
+  imports: ["import { Tray } from '@coinbase/cds-mobile/overlays/tray/Tray'", "import { StickyFooter } from '@coinbase/cds-mobile/sticky-footer/StickyFooter'"],
   props: {
     spotRectangle: figma.instance('spot rectangle'),
     title: figma.string('title'),
-    body: figma.string('body'),
-    stickyFooter: figma.children('StickyFooter')
+    body: figma.string('body')
   },
-  example: function TrayExample(_ref5) {
+  example: function TrayExample(_ref4) {
     let {
       spotRectangle,
       title,
-      body,
-      stickyFooter
-    } = _ref5;
+      body
+    } = _ref4;
     const [isTrayVisible, setIsTrayVisible] = useState(false);
-    const trayRef = useRef(null);
     return /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(Button, {
         onPress: () => setIsTrayVisible(true),
-        children: "Open"
+        children: "Open Tray"
       }), isTrayVisible && /*#__PURE__*/_jsx(Tray, {
-        ref: trayRef,
-        disableCapturePanGestureToDismiss: true,
-        handleBarAccessibilityLabel: "Dismiss",
-        onCloseComplete: () => setIsTrayVisible(false),
-        onVisibilityChange: () => {},
-        children: _ref6 => {
+        accessibilityLabel: title,
+        footer: _ref5 => {
           let {
             handleClose
-          } = _ref6;
-          return /*#__PURE__*/_jsxs(TrayStickyFooter, {
-            children: [/*#__PURE__*/_jsxs(VStack, {
-              paddingBottom: 1,
-              paddingTop: 1,
-              paddingX: 3,
-              children: [/*#__PURE__*/_jsx(Box, {
-                alignItems: "center",
-                paddingBottom: 3,
-                children: spotRectangle
-              }), /*#__PURE__*/_jsx(TextTitle1, {
-                align: "center",
-                paddingBottom: 2,
-                children: title
-              }), /*#__PURE__*/_jsx(TextBody, {
-                align: "center",
-                color: "fgMuted",
-                paddingBottom: 2,
-                children: body
-              })]
-            }), stickyFooter]
+          } = _ref5;
+          return /*#__PURE__*/_jsx(StickyFooter, {
+            background: "bgElevation2",
+            paddingX: 3,
+            children: /*#__PURE__*/_jsx(Button, {
+              block: true,
+              onPress: handleClose,
+              children: "Close"
+            })
           });
-        }
+        },
+        handleBarVariant: "inside",
+        onCloseComplete: () => setIsTrayVisible(false),
+        children: /*#__PURE__*/_jsxs(VStack, {
+          paddingX: 3,
+          children: [/*#__PURE__*/_jsx(Box, {
+            alignItems: "center",
+            paddingBottom: 3,
+            children: spotRectangle
+          }), /*#__PURE__*/_jsx(Text, {
+            align: "center",
+            font: "title1",
+            paddingBottom: 2,
+            children: title
+          }), /*#__PURE__*/_jsx(Text, {
+            align: "center",
+            color: "fgMuted",
+            font: "body",
+            paddingBottom: 2,
+            children: body
+          })]
+        })
       })]
     });
   }
@@ -151,71 +158,65 @@ figma.connect(Tray, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS
   props: {
     children: figma.children('*')
   },
-  example: function TrayExample(_ref7) {
+  example: function TrayExample(_ref6) {
     let {
       children
-    } = _ref7;
+    } = _ref6;
     const [isTrayVisible, setIsTrayVisible] = useState(false);
-    const trayRef = useRef(null);
     return /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(Button, {
         onPress: () => setIsTrayVisible(true),
-        children: "Open"
+        children: "Open Tray"
       }), isTrayVisible && /*#__PURE__*/_jsx(Tray, {
-        ref: trayRef,
-        disableCapturePanGestureToDismiss: true,
-        handleBarAccessibilityLabel: "Dismiss",
+        handleBarVariant: "inside",
         onCloseComplete: () => setIsTrayVisible(false),
-        onVisibilityChange: () => {},
-        children: _ref8 => {
-          let {
-            handleClose
-          } = _ref8;
-          return /*#__PURE__*/_jsx(TrayStickyFooter, {
-            children: children
-          });
-        }
+        title: "Title",
+        children: children
       })]
     });
   }
 });
 figma.connect(Tray, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=14729-77780&m=dev', {
-  imports: ["import { Tray } from '@coinbase/cds-mobile/overlays/tray/Tray'"],
+  imports: ["import { Tray } from '@coinbase/cds-mobile/overlays/tray/Tray'", "import { StickyFooter } from '@coinbase/cds-mobile/sticky-footer/StickyFooter'"],
   props: {
     content: figma.instance('content'),
-    stickyFooter: figma.children('StickyFooter'),
     title: figma.boolean('show section header', {
       true: figma.textContent('SectionHeader'),
       false: undefined
     })
   },
-  example: function TrayExample(_ref9) {
+  example: function TrayExample(_ref7) {
     let {
       content,
-      stickyFooter,
       title
-    } = _ref9;
+    } = _ref7;
     const [isTrayVisible, setIsTrayVisible] = useState(false);
-    const trayRef = useRef(null);
     return /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(Button, {
         onPress: () => setIsTrayVisible(true),
-        children: "Open"
+        children: "Open Tray"
       }), isTrayVisible && /*#__PURE__*/_jsx(Tray, {
-        ref: trayRef,
-        disableCapturePanGestureToDismiss: true,
-        handleBarAccessibilityLabel: "Dismiss",
-        onCloseComplete: () => setIsTrayVisible(false),
-        onVisibilityChange: () => {},
-        title: title,
-        children: _ref0 => {
+        footer: _ref8 => {
           let {
             handleClose
-          } = _ref0;
-          return /*#__PURE__*/_jsxs(TrayStickyFooter, {
-            children: [content, stickyFooter]
+          } = _ref8;
+          return /*#__PURE__*/_jsx(StickyFooter, {
+            background: "bgElevation2",
+            paddingX: 3,
+            children: /*#__PURE__*/_jsx(Button, {
+              block: true,
+              onPress: handleClose,
+              children: "Close"
+            })
           });
-        }
+        },
+        handleBarVariant: "inside",
+        onCloseComplete: () => setIsTrayVisible(false),
+        title: title,
+        children: /*#__PURE__*/_jsx(VStack, {
+          paddingX: 3,
+          children: content
+        })
       })]
     });
   }

package/package.json

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