@coinbase/cds-mobile 8.70.0 → 8.72.0

package/CHANGELOG.md

@@ -8,6 +8,18 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.72.0 (5/12/2026 PST)
+
+#### 🚀 Updates
+
+- Feat: support key Tag props in component configs. [[#671](https://github.com/coinbase/cds/pull/671)]
+
+## 8.71.0 (5/12/2026 PST)
+
+#### 🚀 Updates
+
+- Add icon glyph and progress circle styles to IconButton. [[#606](https://github.com/coinbase/cds/pull/606)]
+
 ## 8.70.0 (5/8/2026 PST)
 
 #### 🚀 Updates

package/dts/buttons/IconButton.d.ts

@@ -1,4 +1,4 @@
-import { type View } from 'react-native';
+import { type StyleProp, type TextStyle, type View, type ViewStyle } from 'react-native';
 import type {
   IconButtonVariant,
   IconName,
@@ -27,6 +27,15 @@ export type IconButtonBaseProps = SharedProps &
      * @default primary
      */
     variant?: IconButtonVariant;
+    /** Custom styles for individual elements of the IconButton component */
+    styles?: {
+      /** Root Pressable element */
+      root?: StyleProp<ViewStyle>;
+      /** Inner icon glyph Text element */
+      icon?: StyleProp<TextStyle>;
+      /** Loading progress circle element */
+      progressCircle?: StyleProp<ViewStyle>;
+    };
   };
 export type IconButtonProps = IconButtonBaseProps;
 export declare const IconButton: import('react').MemoExoticComponent<
@@ -51,6 +60,15 @@ export declare const IconButton: import('react').MemoExoticComponent<
          * @default primary
          */
         variant?: IconButtonVariant;
+        /** Custom styles for individual elements of the IconButton component */
+        styles?: {
+          /** Root Pressable element */
+          root?: StyleProp<ViewStyle>;
+          /** Inner icon glyph Text element */
+          icon?: StyleProp<TextStyle>;
+          /** Loading progress circle element */
+          progressCircle?: StyleProp<ViewStyle>;
+        };
       } & import('react').RefAttributes<View>
   >
 >;

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

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/buttons/IconButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAmC,KAAK,IAAI,EAAkB,MAAM,cAAc,CAAC;AAG1F,OAAO,KAAK,EACV,iBAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAOpC,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAGzE,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,UAAU,CAAC;AAEhD,MAAM,MAAM,mBAAmB,GAAG,WAAW,GAC3C,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC,GACpC,IAAI,CACF,eAAe,EACf,UAAU,GAAG,aAAa,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,oBAAoB,CACpF,GAAG;IACF,6CAA6C;IAC7C,IAAI,EAAE,QAAQ,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,iCAAiC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC7B,CAAC;AAEJ,MAAM,MAAM,eAAe,GAAG,mBAAmB,CAAC;AAElD,eAAO,MAAM,UAAU;IAlBnB,6CAA6C;UACvC,QAAQ;IACd;;;OAGG;eACQ,QAAQ;IACnB,iCAAiC;aACxB,OAAO;IAChB;;;OAGG;cACO,iBAAiB;yCAqG9B,CAAC"}
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/buttons/IconButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,IAAI,EACT,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAGtB,OAAO,KAAK,EACV,iBAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAOpC,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAGzE,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,UAAU,CAAC;AAEhD,MAAM,MAAM,mBAAmB,GAAG,WAAW,GAC3C,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC,GACpC,IAAI,CACF,eAAe,EACf,UAAU,GAAG,aAAa,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,oBAAoB,CACpF,GAAG;IACF,6CAA6C;IAC7C,IAAI,EAAE,QAAQ,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,iCAAiC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,wEAAwE;IACxE,MAAM,CAAC,EAAE;QACP,6BAA6B;QAC7B,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,oCAAoC;QACpC,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,sCAAsC;QACtC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KACvC,CAAC;CACH,CAAC;AAEJ,MAAM,MAAM,eAAe,GAAG,mBAAmB,CAAC;AAElD,eAAO,MAAM,UAAU;IA3BnB,6CAA6C;UACvC,QAAQ;IACd;;;OAGG;eACQ,QAAQ;IACnB,iCAAiC;aACxB,OAAO;IAChB;;;OAGG;cACO,iBAAiB;IAC3B,wEAAwE;aAC/D;QACP,6BAA6B;QAC7B,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,oCAAoC;QACpC,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,sCAAsC;QACtC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KACvC;yCAyGJ,CAAC"}

package/dts/controls/InputIconButton.d.ts

@@ -22,6 +22,11 @@ export declare const InputIconButton: React.MemoExoticComponent<
         iconSize?: import('@coinbase/cds-common').IconSize;
         active?: boolean;
         variant?: IconButtonVariant;
+        styles?: {
+          root?: import('react-native').StyleProp<import('react-native').ViewStyle>;
+          icon?: import('react-native').StyleProp<import('react-native').TextStyle>;
+          progressCircle?: import('react-native').StyleProp<import('react-native').ViewStyle>;
+        };
       } & {
         /**
          * If set to true, when parent input is focused, the icon will match the color of the focus state

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

@@ -1 +1 @@
-{"version":3,"file":"InputIconButton.d.ts","sourceRoot":"","sources":["../../src/controls/InputIconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,KAAK,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAElF,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAKzE,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,YAAY,EAAE,iBAAiB,CAOvE,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,eAAe,GAAG;IACnD;;;SAGK;IACL,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;IAP1B;;;SAGK;+BACsB,OAAO;+BA+BnC,CAAC"}
+{"version":3,"file":"InputIconButton.d.ts","sourceRoot":"","sources":["../../src/controls/InputIconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,KAAK,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAElF,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAKzE,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,YAAY,EAAE,iBAAiB,CAOvE,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,eAAe,GAAG;IACnD;;;SAGK;IACL,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;YA6BzB,CAAC;YAA6E,CAAC;sBAAyF,CAAC;;;IApC1K;;;SAGK;+BACsB,OAAO;+BA+BnC,CAAC"}

package/dts/tag/Tag.d.ts

@@ -9,9 +9,10 @@ import type {
   TagEmphasis,
   TagIntent,
 } from '@coinbase/cds-common/types';
-import { type BoxProps } from '../layout';
+import { type BoxBaseProps, type BoxProps } from '../layout/Box';
 export type TagBaseProps = SharedProps &
-  SharedAccessibilityProps & {
+  SharedAccessibilityProps &
+  Omit<BoxBaseProps, 'children' | 'color' | 'background'> & {
     /** Children to render within the Tag. */
     children: React.ReactNode;
     /**
@@ -53,7 +54,8 @@ export type TagProps = TagBaseProps &
 export declare const Tag: React.MemoExoticComponent<
   React.ForwardRefExoticComponent<
     SharedProps &
-      SharedAccessibilityProps & {
+      SharedAccessibilityProps &
+      Omit<BoxBaseProps, 'children' | 'color' | 'background'> & {
         /** Children to render within the Tag. */
         children: React.ReactNode;
         /**

package/dts/tag/Tag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../src/tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAOjE,OAAO,KAAK,EACV,QAAQ,EACR,wBAAwB,EACxB,WAAW,EACX,cAAc,EACd,WAAW,EACX,SAAS,EACV,MAAM,4BAA4B,CAAC;AAKpC,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,WAAW,CAAC;AAG/C,MAAM,MAAM,YAAY,GAAG,WAAW,GACpC,wBAAwB,GAAG;IACzB,yCAAyC;IACzC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC;IAC7B,sCAAsC;IACtC,UAAU,CAAC,EAAE,SAAS,CAAC,aAAa,CAAC;IACrC,gCAAgC;IAChC,KAAK,CAAC,EAAE,SAAS,CAAC,aAAa,CAAC;IAChC,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC,CAAC;IAChC,yBAAyB;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,uCAAuC;IACvC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uBAAuB;IACvB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,QAAQ,CAAC;IACnB,qCAAqC;IACrC,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEJ,MAAM,MAAM,QAAQ,GAAG,YAAY,GACjC,IAAI,CAAC,QAAQ,EAAE,OAAO,GAAG,YAAY,GAAG,UAAU,GAAG,UAAU,CAAC,CAAC;AAEnE,eAAO,MAAM,GAAG;IAxCZ,yCAAyC;cAC/B,KAAK,CAAC,SAAS;IACzB;;;OAGG;aACM,SAAS;IAClB;;;OAGG;eACQ,WAAW;IACtB;;;OAGG;kBACW,cAAc;IAC5B,sCAAsC;iBACzB,SAAS,CAAC,aAAa;IACpC,gCAAgC;YACxB,SAAS,CAAC,aAAa;IAC/B,0EAA0E;eAC/D,QAAQ,CAAC,UAAU,CAAC;IAC/B,yBAAyB;YACjB,KAAK,CAAC,SAAS;IACvB,8CAA8C;gBAClC,QAAQ;IACpB,uCAAuC;sBACrB,OAAO;IACzB,uBAAuB;UACjB,KAAK,CAAC,SAAS;IACrB,4CAA4C;cAClC,QAAQ;IAClB,qCAAqC;oBACrB,OAAO;kGAyE1B,CAAC"}
+{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../src/tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAOjE,OAAO,KAAK,EACV,QAAQ,EACR,wBAAwB,EACxB,WAAW,EACX,cAAc,EACd,WAAW,EACX,SAAS,EACV,MAAM,4BAA4B,CAAC;AAKpC,OAAO,EAAO,KAAK,YAAY,EAAE,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAGtE,MAAM,MAAM,YAAY,GAAG,WAAW,GACpC,wBAAwB,GACxB,IAAI,CAAC,YAAY,EAAE,UAAU,GAAG,OAAO,GAAG,YAAY,CAAC,GAAG;IACxD,yCAAyC;IACzC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC;IAC7B,sCAAsC;IACtC,UAAU,CAAC,EAAE,SAAS,CAAC,aAAa,CAAC;IACrC,gCAAgC;IAChC,KAAK,CAAC,EAAE,SAAS,CAAC,aAAa,CAAC;IAChC,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC,CAAC;IAChC,yBAAyB;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,uCAAuC;IACvC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uBAAuB;IACvB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,QAAQ,CAAC;IACnB,qCAAqC;IACrC,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEJ,MAAM,MAAM,QAAQ,GAAG,YAAY,GACjC,IAAI,CAAC,QAAQ,EAAE,OAAO,GAAG,YAAY,GAAG,UAAU,GAAG,UAAU,CAAC,CAAC;AAEnE,eAAO,MAAM,GAAG;IAxCZ,yCAAyC;cAC/B,KAAK,CAAC,SAAS;IACzB;;;OAGG;aACM,SAAS;IAClB;;;OAGG;eACQ,WAAW;IACtB;;;OAGG;kBACW,cAAc;IAC5B,sCAAsC;iBACzB,SAAS,CAAC,aAAa;IACpC,gCAAgC;YACxB,SAAS,CAAC,aAAa;IAC/B,0EAA0E;eAC/D,QAAQ,CAAC,UAAU,CAAC;IAC/B,yBAAyB;YACjB,KAAK,CAAC,SAAS;IACvB,8CAA8C;gBAClC,QAAQ;IACpB,uCAAuC;sBACrB,OAAO;IACzB,uBAAuB;UACjB,KAAK,CAAC,SAAS;IACrB,4CAA4C;cAClC,QAAQ;IAClB,qCAAqC;oBACrB,OAAO;kGAmF1B,CAAC"}

package/esm/buttons/IconButton.js

@@ -1,4 +1,4 @@
-const _excluded = ["name", "active", "variant", "transparent", "compact", "background", "color", "borderColor", "iconSize", "borderWidth", "borderRadius", "height", "width", "feedback", "flush", "loading", "progressCircleSize", "style", "accessibilityHint", "accessibilityLabel"];
+const _excluded = ["name", "active", "variant", "transparent", "compact", "background", "color", "borderColor", "iconSize", "borderWidth", "borderRadius", "height", "width", "feedback", "flush", "loading", "progressCircleSize", "style", "styles", "accessibilityHint", "accessibilityLabel"];
 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 { forwardRef, memo, useCallback, useMemo } from 'react';
@@ -33,6 +33,7 @@ export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref
       loading,
       progressCircleSize,
       style,
+      styles,
       accessibilityHint,
       accessibilityLabel
     } = mergedProps,
@@ -58,7 +59,7 @@ export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref
     flexDirection: 'column',
     justifyContent: 'center'
   }), [height, width]);
-  const pressableStyle = useCallback(state => [sizingStyle, typeof style === 'function' ? style(state) : style], [sizingStyle, style]);
+  const pressableStyle = useCallback(state => [sizingStyle, typeof style === 'function' ? style(state) : style, styles == null ? void 0 : styles.root], [sizingStyle, style, styles == null ? void 0 : styles.root]);
   return /*#__PURE__*/_jsx(Pressable, _extends({
     ref: ref,
     accessibilityHint: accessibilityHint,
@@ -83,6 +84,7 @@ export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref
         indeterminate: true,
         color: colorValue,
         size: progressCircleSize != null ? progressCircleSize : iconSizeValue,
+        style: styles == null ? void 0 : styles.progressCircle,
         testID: props.testID ? props.testID + "-progress-circle" : undefined,
         weight: "thin"
       })
@@ -94,7 +96,10 @@ export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref
       color: colorValue,
       name: name,
       size: iconSize,
-      style: sizingStyle
+      style: sizingStyle,
+      styles: {
+        icon: styles == null ? void 0 : styles.icon
+      }
     })
   }));
 }));

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

@@ -182,6 +182,71 @@ const IconButtonScreen = () => {
           })]
         })
       })
+    }), /*#__PURE__*/_jsx(Example, {
+      inline: true,
+      title: "Icon Glyph Styles",
+      children: /*#__PURE__*/_jsxs(VStack, {
+        gap: 2,
+        children: [/*#__PURE__*/_jsxs(Box, {
+          alignItems: "center",
+          flexDirection: "row",
+          gap: 2,
+          children: [/*#__PURE__*/_jsx(IconButton, {
+            accessibilityLabel: "Custom color via styles.icon",
+            name: iconName,
+            styles: {
+              icon: {
+                color: 'dodgerblue'
+              }
+            }
+          }), /*#__PURE__*/_jsx(Text, {
+            font: "body",
+            children: "Custom color via styles.icon"
+          })]
+        }), /*#__PURE__*/_jsxs(Box, {
+          alignItems: "center",
+          flexDirection: "row",
+          gap: 2,
+          children: [/*#__PURE__*/_jsx(IconButton, {
+            accessibilityLabel: "Rotated icon via styles.icon",
+            name: iconName,
+            styles: {
+              icon: {
+                transform: [{
+                  rotate: '45deg'
+                }]
+              }
+            }
+          }), /*#__PURE__*/_jsx(Text, {
+            font: "body",
+            children: "Rotated icon via styles.icon"
+          })]
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      inline: true,
+      title: "Progress Circle Styles",
+      children: /*#__PURE__*/_jsx(VStack, {
+        gap: 2,
+        children: /*#__PURE__*/_jsxs(Box, {
+          alignItems: "center",
+          flexDirection: "row",
+          gap: 2,
+          children: [/*#__PURE__*/_jsx(IconButton, {
+            loading: true,
+            accessibilityLabel: "Reduced opacity progress circle",
+            name: iconName,
+            styles: {
+              progressCircle: {
+                opacity: 0.3
+              }
+            }
+          }), /*#__PURE__*/_jsx(Text, {
+            font: "body",
+            children: "Reduced opacity"
+          })]
+        })
+      })
     }), /*#__PURE__*/_jsx(Example, {
       inline: true,
       title: "Loading",

package/esm/system/__stories__/componentConfigStickerSheet/customComponentConfig.js

@@ -124,5 +124,11 @@ export const customComponentConfig = {
     activeColor: 'fg',
     color: 'fgMuted',
     activeBackground: 'fg'
+  },
+  Tag: {
+    paddingY: 0.5,
+    paddingX: 1,
+    font: 'caption',
+    emphasis: 'low'
   }
 };

package/esm/tag/Tag.js

@@ -1,4 +1,4 @@
-const _excluded = ["children", "intent", "emphasis", "colorScheme", "background", "color", "start", "startIcon", "startIconActive", "end", "endIcon", "endIconActive", "alignItems", "flexDirection", "gap", "justifyContent", "paddingY", "testID"];
+const _excluded = ["children", "intent", "emphasis", "colorScheme", "background", "color", "start", "startIcon", "startIconActive", "end", "endIcon", "endIconActive", "alignItems", "flexDirection", "gap", "justifyContent", "paddingX", "paddingY", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight", "testID"];
 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';
@@ -6,7 +6,7 @@ import { tagBorderRadiusMap, tagEmphasisColorMap, tagFontMap, tagHorizontalSpaci
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
 import { Icon } from '../icons/Icon';
-import { Box } from '../layout';
+import { Box } from '../layout/Box';
 import { Text } from '../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const Tag = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, forwardedRef) => {
@@ -28,7 +28,13 @@ export const Tag = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, forwardedR
       flexDirection = 'row',
       gap = 0.5,
       justifyContent = 'center',
+      paddingX,
       paddingY = 0.25,
+      font,
+      fontFamily,
+      fontSize,
+      fontWeight,
+      lineHeight,
       testID = 'cds-tag'
     } = mergedProps,
     props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
@@ -48,7 +54,7 @@ export const Tag = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, forwardedR
     flexDirection: flexDirection,
     gap: gap,
     justifyContent: justifyContent,
-    paddingX: tagHorizontalSpacing[intent],
+    paddingX: paddingX != null ? paddingX : tagHorizontalSpacing[intent],
     paddingY: paddingY,
     testID: testID
   }, props, {
@@ -59,7 +65,11 @@ export const Tag = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, forwardedR
       size: "xs"
     }) : null, /*#__PURE__*/_jsx(Text, {
       dangerouslySetColor: color,
-      font: tagFontMap[intent],
+      font: font != null ? font : tagFontMap[intent],
+      fontFamily: fontFamily,
+      fontSize: fontSize,
+      fontWeight: fontWeight,
+      lineHeight: lineHeight,
       numberOfLines: 1,
       testID: testID + "--text",
       children: children

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "8.70.0",
+  "version": "8.72.0",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -196,9 +196,9 @@
     "react-native-svg": "^14.1.0"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.70.0",
+    "@coinbase/cds-common": "^8.72.0",
     "@coinbase/cds-icons": "^5.16.0",
-    "@coinbase/cds-illustrations": "^4.38.0",
+    "@coinbase/cds-illustrations": "^4.39.0",
     "@coinbase/cds-lottie-files": "^3.3.4",
     "@coinbase/cds-utils": "^2.3.5",
     "@floating-ui/react-native": "^0.10.5",