@coinbase/cds-mobile 8.30.0 → 8.31.0

package/CHANGELOG.md

@@ -8,6 +8,16 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.31.0 (12/12/2025 PST)
+
+#### 🚀 Updates
+
+- Add inputBackground prop to InputStack and TextInput.
+
+## 8.30.1 ((12/12/2025, 03:00 PM PST))
+
+This is an artificial version bump with no new change.
+
 ## 8.30.0 (12/12/2025 PST)
 
 #### 🚀 Updates

package/dts/controls/InputStack.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Animated } from 'react-native';
 import type { StyleProp, ViewStyle } from 'react-native';
+import type { ThemeVars } from '@coinbase/cds-common/core/theme';
 import type { InputVariant } from '@coinbase/cds-common/types/InputBaseProps';
 import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
 import type { BoxBaseProps, BoxProps } from '../layout';
@@ -60,6 +61,11 @@ export type InputStackBaseProps = SharedProps & {
    * @default 'outside'
    */
   labelVariant?: 'inside' | 'outside';
+  /**
+   * Background color of the input
+   * @default 'bg'
+   */
+  inputBackground?: ThemeVars.Color;
 };
 export type InputStackProps = Omit<BoxProps, 'width' | 'height' | 'borderRadius'> &
   InputStackBaseProps;

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

@@ -1 +1 @@
-{"version":3,"file":"InputStack.d.ts","sourceRoot":"","sources":["../../src/controls/InputStack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAoB,MAAM,cAAc,CAAC;AAC1D,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAIzD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2CAA2C,CAAC;AAC9E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAI1E,OAAO,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAKxD,MAAM,MAAM,mBAAmB,GAAG,WAAW,GAAG;IAC9C;;;;;OAKG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;;SAGK;IACL,KAAK,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC1B;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;IAChC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yEAAyE;IACzE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,uHAAuH;IACvH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,sEAAsE;IACtE,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,mHAAmH;IACnH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,iCAAiC;IACjC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,iGAAiG;IACjG,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,qDAAqD;IACrD,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,wEAAwE;IACxE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,YAAY,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC;IACxC;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,oCAAoC;IACpC,WAAW,CAAC,EAAE,QAAQ,CAAC,iBAAiB,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC;IAC/D,oDAAoD;IACpD,kBAAkB,CAAC,EAAE,QAAQ,CAAC,iBAAiB,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC;IACtE;;;OAGG;IACH,YAAY,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CACrC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,QAAQ,EAAE,OAAO,GAAG,QAAQ,GAAG,cAAc,CAAC,GAC/E,mBAAmB,CAAC;AAWtB,eAAO,MAAM,UAAU,6CAqHrB,CAAC"}
+{"version":3,"file":"InputStack.d.ts","sourceRoot":"","sources":["../../src/controls/InputStack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAoB,MAAM,cAAc,CAAC;AAC1D,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAGjE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2CAA2C,CAAC;AAC9E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAI1E,OAAO,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAKxD,MAAM,MAAM,mBAAmB,GAAG,WAAW,GAAG;IAC9C;;;;;OAKG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;;SAGK;IACL,KAAK,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC1B;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;IAChC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yEAAyE;IACzE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,uHAAuH;IACvH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,sEAAsE;IACtE,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,mHAAmH;IACnH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,iCAAiC;IACjC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,iGAAiG;IACjG,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,qDAAqD;IACrD,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,wEAAwE;IACxE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,YAAY,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC;IACxC;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,oCAAoC;IACpC,WAAW,CAAC,EAAE,QAAQ,CAAC,iBAAiB,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC;IAC/D,oDAAoD;IACpD,kBAAkB,CAAC,EAAE,QAAQ,CAAC,iBAAiB,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC;IACtE;;;OAGG;IACH,YAAY,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IACpC;;;OAGG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;CACnC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,QAAQ,EAAE,OAAO,GAAG,QAAQ,GAAG,cAAc,CAAC,GAC/E,mBAAmB,CAAC;AAWtB,eAAO,MAAM,UAAU,6CA+HrB,CAAC"}

package/dts/controls/TextInput.d.ts

@@ -23,6 +23,7 @@ export type TextInputBaseProps = SharedProps &
     | 'borderRadius'
     | 'enableColorSurge'
     | 'labelVariant'
+    | 'inputBackground'
   > & {
     /**
      * Aligns text inside input and helperText
@@ -95,6 +96,7 @@ export declare const TextInput: React.MemoExoticComponent<
         | 'variant'
         | 'enableColorSurge'
         | 'labelVariant'
+        | 'inputBackground'
       > & {
         /**
          * Aligns text inside input and helperText

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

@@ -1 +1 @@
-{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../src/controls/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KASN,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAEV,SAAS,IAAI,WAAW,EAExB,cAAc,IAAI,gBAAgB,EAEnC,MAAM,cAAc,CAAC;AAItB,OAAO,KAAK,EACV,wBAAwB,EACxB,gBAAgB,EAChB,WAAW,EACX,cAAc,EACf,MAAM,4BAA4B,CAAC;AACpC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4CAA4C,CAAC;AAcjF,OAAO,EAAc,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAGpE,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAC1C,IAAI,CACF,wBAAwB,EACxB,oBAAoB,GAAG,yBAAyB,GAAG,mBAAmB,CACvE,GACD,gBAAgB,GAChB,IAAI,CACF,mBAAmB,EACjB,QAAQ,GACR,SAAS,GACT,OAAO,GACP,UAAU,GACV,cAAc,GACd,kBAAkB,GAClB,cAAc,CACjB,GAAG;IACF;;;OAGG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAChC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uHAAuH;IACvH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,mHAAmH;IACnH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE;QACV,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IACF;;;OAGG;IACH,qCAAqC,CAAC,EAAE,MAAM,CAAC;IAC/C;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,CAAC;AAEJ,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAC7C,IAAI,CAAC,gBAAgB,EAAE,OAAO,GAAG,UAAU,GAAG,cAAc,GAAG,WAAW,CAAC,GAAG;IAC5E,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,YAAY,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAChD;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B;;;OAGG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,GAAG,OAAO,CAAC;IACpD;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAWJ,eAAO,MAAM,SAAS;IAjElB;;;OAGG;YACK,cAAc,CAAC,OAAO,CAAC;IAC/B;;OAEG;aACM,MAAM;IACf,uHAAuH;YAC/G,KAAK,CAAC,SAAS;IACvB,mHAAmH;UAC7G,KAAK,CAAC,SAAS;IACrB;;OAEG;gBACS;QACV,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB;IACD;;;OAGG;4CACqC,MAAM;IAC9C;;;OAGG;gBACS,KAAK,CAAC,SAAS;;YAKnB,gBAAgB,CAAC,OAAO,CAAC;eACtB,gBAAgB,CAAC,UAAU,CAAC;mBACxB,gBAAgB,CAAC,cAAc,CAAC;IAC/C;;;OAGG;gBACS,cAAc;IAC1B;;;OAGG;gBACS,gBAAgB,CAAC,WAAW,CAAC,GAAG,OAAO;IACnD;;;OAGG;eACQ,OAAO;sCA8OrB,CAAC"}
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../src/controls/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KASN,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAEV,SAAS,IAAI,WAAW,EAExB,cAAc,IAAI,gBAAgB,EAEnC,MAAM,cAAc,CAAC;AAItB,OAAO,KAAK,EACV,wBAAwB,EACxB,gBAAgB,EAChB,WAAW,EACX,cAAc,EACf,MAAM,4BAA4B,CAAC;AACpC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4CAA4C,CAAC;AAcjF,OAAO,EAAc,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAGpE,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAC1C,IAAI,CACF,wBAAwB,EACxB,oBAAoB,GAAG,yBAAyB,GAAG,mBAAmB,CACvE,GACD,gBAAgB,GAChB,IAAI,CACF,mBAAmB,EACjB,QAAQ,GACR,SAAS,GACT,OAAO,GACP,UAAU,GACV,cAAc,GACd,kBAAkB,GAClB,cAAc,GACd,iBAAiB,CACpB,GAAG;IACF;;;OAGG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAChC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uHAAuH;IACvH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,mHAAmH;IACnH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE;QACV,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IACF;;;OAGG;IACH,qCAAqC,CAAC,EAAE,MAAM,CAAC;IAC/C;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,CAAC;AAEJ,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAC7C,IAAI,CAAC,gBAAgB,EAAE,OAAO,GAAG,UAAU,GAAG,cAAc,GAAG,WAAW,CAAC,GAAG;IAC5E,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,YAAY,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAChD;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B;;;OAGG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,GAAG,OAAO,CAAC;IACpD;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAWJ,eAAO,MAAM,SAAS;IAjElB;;;OAGG;YACK,cAAc,CAAC,OAAO,CAAC;IAC/B;;OAEG;aACM,MAAM;IACf,uHAAuH;YAC/G,KAAK,CAAC,SAAS;IACvB,mHAAmH;UAC7G,KAAK,CAAC,SAAS;IACrB;;OAEG;gBACS;QACV,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB;IACD;;;OAGG;4CACqC,MAAM;IAC9C;;;OAGG;gBACS,KAAK,CAAC,SAAS;;YAKnB,gBAAgB,CAAC,OAAO,CAAC;eACtB,gBAAgB,CAAC,UAAU,CAAC;mBACxB,gBAAgB,CAAC,cAAc,CAAC;IAC/C;;;OAGG;gBACS,cAAc;IAC1B;;;OAGG;gBACS,gBAAgB,CAAC,WAAW,CAAC,GAAG,OAAO;IACnD;;;OAGG;eACQ,OAAO;sCAgPrB,CAAC"}

package/esm/controls/InputStack.js

@@ -1,4 +1,4 @@
-const _excluded = ["width", "prependNode", "endNode", "appendNode", "startNode", "disabled", "inputNode", "helperTextNode", "borderStyle", "variant", "labelNode", "testID", "borderRadius", "borderFocusedStyle", "focused", "enableColorSurge", "labelVariant"];
+const _excluded = ["width", "prependNode", "endNode", "appendNode", "startNode", "disabled", "inputNode", "helperTextNode", "borderStyle", "variant", "labelNode", "testID", "borderRadius", "borderFocusedStyle", "focused", "enableColorSurge", "labelVariant", "inputBackground"];
 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, useMemo } from 'react';
@@ -38,7 +38,8 @@ export const InputStack = /*#__PURE__*/memo(function InputStack(_ref) {
       borderFocusedStyle,
       focused,
       enableColorSurge,
-      labelVariant = 'outside'
+      labelVariant = 'outside',
+      inputBackground = 'bg'
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const theme = useTheme();
@@ -55,11 +56,11 @@ export const InputStack = /*#__PURE__*/memo(function InputStack(_ref) {
       borderColor: variant === 'secondary' ? 'transparent' : theme.color[variant === 'foregroundMuted' || !variant ? 'bgLineHeavy' : variantColorMap[variant]],
       flexDirection: 'row',
       flexGrow: 1,
-      backgroundColor: variant === 'secondary' ? theme.color.bgSecondary : theme.color.bg,
+      backgroundColor: variant === 'secondary' ? theme.color.bgSecondary : theme.color[inputBackground],
       borderRadius: theme.borderRadius[borderRadius],
       overflow: 'hidden'
     }, inputBorderRadius);
-  }, [prependNode, appendNode, variant, theme.color, theme.borderRadius, borderRadius]);
+  }, [prependNode, appendNode, variant, theme.color, theme.borderRadius, borderRadius, inputBackground]);
   const inputAreaStyles = useMemo(() => {
     return [inputAreaStyle, borderStyle];
   }, [borderStyle, inputAreaStyle]);

package/esm/controls/TextInput.js

@@ -1,4 +1,4 @@
-const _excluded = ["label", "helperText", "variant", "testID", "testIDMap", "start", "end", "width", "disabled", "align", "compact", "suffix", "accessibilityLabel", "borderRadius", "enableColorSurge", "helperTextErrorIconAccessibilityLabel", "bordered", "labelVariant", "labelNode"];
+const _excluded = ["label", "helperText", "variant", "testID", "testIDMap", "start", "end", "width", "disabled", "align", "compact", "suffix", "accessibilityLabel", "borderRadius", "enableColorSurge", "helperTextErrorIconAccessibilityLabel", "bordered", "labelVariant", "labelNode", "inputBackground"];
 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, { cloneElement, forwardRef, isValidElement, memo, useCallback, useMemo, useRef, useState } from 'react';
@@ -46,7 +46,8 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
       helperTextErrorIconAccessibilityLabel = 'error',
       bordered = true,
       labelVariant = 'outside',
-      labelNode
+      labelNode,
+      inputBackground
     } = _ref,
     editableInputProps = _objectWithoutPropertiesLoose(_ref, _excluded);
   const theme = useTheme();
@@ -102,7 +103,7 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
     }
     return start;
   }, [start]);
-  const inputBackground = useMemo(() => {
+  const readOnlyInputBackground = useMemo(() => {
     if (!disabled && editableInputAddonProps.readOnly) {
       return 'bgSecondary';
     }
@@ -116,7 +117,7 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
     enableColorSurge: enableColorSurge,
     endNode: (suffix !== '' || !!end) && /*#__PURE__*/_jsx(HStack, {
       alignItems: "center",
-      background: inputBackground,
+      background: readOnlyInputBackground,
       gap: 2,
       justifyContent: "center",
       testID: (_testIDMap$end = testIDMap == null ? void 0 : testIDMap.end) != null ? _testIDMap$end : '',
@@ -146,6 +147,7 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
       testID: (_testIDMap$helperText = testIDMap == null ? void 0 : testIDMap.helperText) != null ? _testIDMap$helperText : '',
       children: helperText
     }) : helperText),
+    inputBackground: readOnlyInputBackground != null ? readOnlyInputBackground : inputBackground,
     inputNode: /*#__PURE__*/_jsx(NativeInput, _extends({
       ref: refs,
       accessibilityHint: typeof helperText === 'string' ? helperText : undefined,
@@ -165,7 +167,7 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
         paddingBottom: 0,
         paddingStart: start ? 0.5 : 2,
         paddingEnd: 2,
-        background: inputBackground
+        background: readOnlyInputBackground
       }, {
         testID: (_testIDMap$label = testIDMap == null ? void 0 : testIDMap.label) != null ? _testIDMap$label : '',
         children: label
@@ -174,7 +176,7 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
     labelVariant: labelVariant,
     startNode: (compact && !!label || !!start) && /*#__PURE__*/_jsx(Box, {
       alignItems: "center",
-      background: inputBackground,
+      background: readOnlyInputBackground,
       justifyContent: "center",
       testID: testIDMap == null ? void 0 : testIDMap.start,
       children: /*#__PURE__*/_jsx(Pressable, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "8.30.0",
+  "version": "8.31.0",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -154,7 +154,7 @@
     "react-native-svg": "^14.1.0"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.30.0",
+    "@coinbase/cds-common": "^8.31.0",
     "@coinbase/cds-icons": "^5.8.0",
     "@coinbase/cds-illustrations": "^4.29.0",
     "@coinbase/cds-lottie-files": "^3.3.3",