@coinbase/cds-mobile 9.19.0 → 9.21.0

package/CHANGELOG.md

@@ -8,6 +8,18 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 9.21.0 (8/21/2026 PST)
+
+#### 🚀 Updates
+
+- Fix: apply root safe-area insets inside mobile Modal. [[#846](https://github.com/coinbase/cds/pull/846)]
+
+## 9.20.0 (8/20/2026 PST)
+
+#### 🚀 Updates
+
+- Feat: update default label style for input components: TextInput, Select, Combobox, DateInput, etc. Font: label1 -=> label2; color: fg => fgMuted.
+
 ## 9.19.0 (8/20/2026 PST)
 
 #### 🚀 Updates

package/dts/controls/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/controls/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkE,MAAM,OAAO,CAAC;AACvF,OAAO,EAAE,wBAAwB,EAAE,MAAM,cAAc,CAAC;AAMxD,OAAO,KAAK,EAAgB,gBAAgB,EAAE,MAAM,2CAA2C,CAAC;AAChG,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AACpG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAY1E,OAAO,EAAc,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAiBpE,MAAM,MAAM,eAAe,GAAG,WAAW,GACvC,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,GAC/B,IAAI,CACF,mBAAmB,EACnB,OAAO,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,cAAc,CAC5E,GACD,IAAI,CACF,wBAAwB,EACxB,oBAAoB,GAAG,yBAAyB,GAAG,mBAAmB,CACvE,GAAG;IACF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,mGAAmG;IACnG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8EAA8E;IAC9E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iEAAiE;IACjE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,gHAAgH;IAChH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kEAAkE;IAClE,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;CACxF,CAAC;AAEJ,MAAM,MAAM,WAAW,GAAG,eAAe,CAAC;AAE1C;;;GAGG;AACH,eAAO,MAAM,MAAM,gPAoBd,WAAW,GAAG;IACf,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,wBAAwB,CAAC,CAAC;CAC3C,6CA0KF,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/controls/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkE,MAAM,OAAO,CAAC;AACvF,OAAO,EAAE,wBAAwB,EAAE,MAAM,cAAc,CAAC;AAMxD,OAAO,KAAK,EAAgB,gBAAgB,EAAE,MAAM,2CAA2C,CAAC;AAChG,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AACpG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAY1E,OAAO,EAAc,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAiBpE,MAAM,MAAM,eAAe,GAAG,WAAW,GACvC,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,GAC/B,IAAI,CACF,mBAAmB,EACnB,OAAO,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,cAAc,CAC5E,GACD,IAAI,CACF,wBAAwB,EACxB,oBAAoB,GAAG,yBAAyB,GAAG,mBAAmB,CACvE,GAAG;IACF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,mGAAmG;IACnG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8EAA8E;IAC9E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iEAAiE;IACjE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,gHAAgH;IAChH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kEAAkE;IAClE,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;CACxF,CAAC;AAEJ,MAAM,MAAM,WAAW,GAAG,eAAe,CAAC;AAE1C;;;GAGG;AACH,eAAO,MAAM,MAAM,gPAoBd,WAAW,GAAG;IACf,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,wBAAwB,CAAC,CAAC;CAC3C,6CA2KF,CAAC"}

package/dts/overlays/modal/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/overlays/modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+E,MAAM,OAAO,CAAC;AAQpG,OAAO,KAAK,EAAE,UAAU,IAAI,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGrF,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,4CAA4C,CAAC;AAKlG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAG1E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAKjD,KAAK,wBAAwB,GAAG;IAAE,UAAU,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC;AAE3D;;;GAGG;AACH,KAAK,gBAAgB,GAAG,IAAI,CAC1B,QAAQ,EACN,YAAY,GACZ,OAAO,GACP,aAAa,GACb,aAAa,GACb,cAAc,GACd,qBAAqB,GACrB,sBAAsB,GACtB,wBAAwB,GACxB,yBAAyB,GACzB,gBAAgB,GAChB,mBAAmB,GACnB,kBAAkB,GAClB,gBAAgB,GAChB,UAAU,GACV,aAAa,GACb,gBAAgB,GAChB,eAAe,GACf,aAAa,GACb,oBAAoB,GACpB,kBAAkB,GAClB,WAAW,GACX,SAAS,GACT,UAAU,GACV,UAAU,GACV,YAAY,GACZ,eAAe,GACf,cAAc,GACd,YAAY,GACZ,UAAU,GACV,WAAW,GACX,UAAU,GACV,WAAW,CACd,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,WAAW,GACtC,iBAAiB,GACjB,gBAAgB,GAChB,IAAI,CAAC,YAAY,EAAE,UAAU,GAAG,SAAS,GAAG,gBAAgB,GAAG,eAAe,CAAC,GAAG;IAChF,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,wBAAwB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IACpF;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB;;SAEK;IACL,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAC;IAC7B,yDAAyD;IACzD,MAAM,CAAC,EAAE;QACP,iCAAiC;QACjC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC7B,mDAAmD;QACnD,QAAQ,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KACjC,CAAC;CACH,CAAC;AAEJ,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,cAAc,EAAE,gBAAgB,CAAC,CAAC;AAEvE,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC;AAMxC,eAAO,MAAM,KAAK,iDAIb,UAAU,GAAG;IACd,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;CACpC,6CAyJF,CAAC"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/overlays/modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+E,MAAM,OAAO,CAAC;AASpG,OAAO,KAAK,EAAE,UAAU,IAAI,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGrF,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,4CAA4C,CAAC;AAKlG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAG1E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAKjD,KAAK,wBAAwB,GAAG;IAAE,UAAU,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC;AAE3D;;;GAGG;AACH,KAAK,gBAAgB,GAAG,IAAI,CAC1B,QAAQ,EACN,YAAY,GACZ,OAAO,GACP,aAAa,GACb,aAAa,GACb,cAAc,GACd,qBAAqB,GACrB,sBAAsB,GACtB,wBAAwB,GACxB,yBAAyB,GACzB,gBAAgB,GAChB,mBAAmB,GACnB,kBAAkB,GAClB,gBAAgB,GAChB,UAAU,GACV,aAAa,GACb,gBAAgB,GAChB,eAAe,GACf,aAAa,GACb,oBAAoB,GACpB,kBAAkB,GAClB,WAAW,GACX,SAAS,GACT,UAAU,GACV,UAAU,GACV,YAAY,GACZ,eAAe,GACf,cAAc,GACd,YAAY,GACZ,UAAU,GACV,WAAW,GACX,UAAU,GACV,WAAW,CACd,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,WAAW,GACtC,iBAAiB,GACjB,gBAAgB,GAChB,IAAI,CAAC,YAAY,EAAE,UAAU,GAAG,SAAS,GAAG,gBAAgB,GAAG,eAAe,CAAC,GAAG;IAChF,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,wBAAwB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IACpF;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB;;SAEK;IACL,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAC;IAC7B,yDAAyD;IACzD,MAAM,CAAC,EAAE;QACP,iCAAiC;QACjC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC7B,mDAAmD;QACnD,QAAQ,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KACjC,CAAC;CACH,CAAC;AAEJ,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,cAAc,EAAE,gBAAgB,CAAC,CAAC;AAEvE,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC;AAMxC,eAAO,MAAM,KAAK,iDAIb,UAAU,GAAG;IACd,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;CACpC,6CAyKF,CAAC"}

package/esm/alpha/select/DefaultSelectControl.js

@@ -65,8 +65,8 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(_ref => {
       size,
       align = 'start',
       font = 'body',
-      labelColor = 'fg',
-      labelFont = 'label1',
+      labelColor = 'fgMuted',
+      labelFont = 'label2',
       bordered = true,
       borderWidth = bordered ? 100 : 0,
       focusedBorderWidth = bordered ? undefined : 200,

package/esm/controls/InputLabel.js

@@ -6,8 +6,8 @@ import { Text } from '../typography/Text';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const InputLabel = /*#__PURE__*/memo(function InputLabel(_ref) {
   let {
-      color = 'fg',
-      font = 'label1'
+      color = 'fgMuted',
+      font = 'label2'
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   return /*#__PURE__*/_jsx(Text, _extends({

package/esm/controls/Select.js

@@ -172,6 +172,7 @@ export const Select = /*#__PURE__*/memo(_ref => {
           }),
           labelNode: !compact && Boolean(label) && /*#__PURE__*/_jsx(InputLabel, {
             color: labelTextColor,
+            font: "label1",
             paddingStart: labelVariant === 'outside' || startNode ? 0 : getSpacingStart,
             paddingY: labelVariant === 'inside' ? 0 : 0.5,
             children: label
@@ -186,6 +187,7 @@ export const Select = /*#__PURE__*/memo(_ref => {
                 noWrap: true,
                 color: labelTextColor,
                 disabled: disabled,
+                font: "label1",
                 children: label
               })
             }), !!startNode && /*#__PURE__*/_jsx(HStack, {

package/esm/controls/TextInput.js

@@ -37,8 +37,8 @@ export const TextInput = /*#__PURE__*/memo(_ref => {
   const mergedProps = useComponentConfig('TextInput', _props);
   const {
       label,
-      labelFont = 'label1',
-      labelColor = 'fg',
+      labelFont = 'label2',
+      labelColor = 'fgMuted',
       helperText = '',
       variant = 'foregroundMuted',
       testID,

package/esm/overlays/modal/Modal.js

@@ -3,8 +3,8 @@ const _excluded = ["ref"],
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 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, useEffect, useImperativeHandle, useMemo, useState } from 'react';
-import { Modal as RNModal, Platform, StatusBar, StyleSheet, useWindowDimensions } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
+import { Modal as RNModal, Platform, StatusBar, StyleSheet, useWindowDimensions, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { usePreviousValue } from '@coinbase/cds-common/hooks/usePreviousValue';
 import { ModalContext } from '@coinbase/cds-common/overlays/ModalContext';
 import { OverlayContentContext } from '@coinbase/cds-common/overlays/OverlayContentContext';
@@ -80,6 +80,19 @@ export const Modal = /*#__PURE__*/memo(_ref => {
     width,
     height
   } = useWindowDimensions();
+  // RN Modal is a separate native surface; SafeAreaView often reports 0 insets.
+  // useSafeAreaInsets() reads the root provider (device insets).
+  const insets = useSafeAreaInsets();
+  const safeAreaStyle = useMemo(() => {
+    var _StatusBar$currentHei;
+    const androidStatusBarHeight = Platform.OS === 'android' ? (_StatusBar$currentHei = StatusBar.currentHeight) != null ? _StatusBar$currentHei : 0 : 0;
+    return [styles.safeAreaContainer, {
+      paddingTop: Math.max(insets.top, androidStatusBarHeight),
+      paddingBottom: insets.bottom,
+      paddingLeft: insets.left,
+      paddingRight: insets.right
+    }, customStyles == null ? void 0 : customStyles.safeArea];
+  }, [customStyles == null ? void 0 : customStyles.safeArea, insets.bottom, insets.left, insets.right, insets.top]);
   const handleClose = useCallback(() => {
     animateOut.start(_ref2 => {
       let {
@@ -165,8 +178,8 @@ export const Modal = /*#__PURE__*/memo(_ref => {
           opacity
         }, customStyles == null ? void 0 : customStyles.modal],
         width: width,
-        children: /*#__PURE__*/_jsx(SafeAreaView, {
-          style: [styles.safeAreaContainer, customStyles == null ? void 0 : customStyles.safeArea],
+        children: /*#__PURE__*/_jsx(View, {
+          style: safeAreaStyle,
           children: /*#__PURE__*/_jsx(ModalContext.Provider, {
             value: modalData,
             children: typeof children === 'function' ? children(renderChildrenProps) : children
@@ -178,7 +191,6 @@ export const Modal = /*#__PURE__*/memo(_ref => {
 });
 const styles = StyleSheet.create({
   safeAreaContainer: {
-    flex: 1,
-    paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0
+    flex: 1
   }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "9.19.0",
+  "version": "9.21.0",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -218,7 +218,7 @@
     "react-native-worklets": "0.5.2"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^9.19.0",
+    "@coinbase/cds-common": "^9.21.0",
     "@coinbase/cds-icons": "^5.22.0",
     "@coinbase/cds-illustrations": "^4.48.0",
     "@coinbase/cds-lottie-files": "^3.3.4",