@coinbase/cds-mobile 8.23.0 → 8.25.0

package/CHANGELOG.md

@@ -8,6 +8,18 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.25.0 (12/1/2025 PST)
+
+#### 🚀 Updates
+
+- Add emphasis prop to Tag. [[#197](https://github.com/coinbase/cds/pull/197)]
+
+## 8.24.0 (12/1/2025 PST)
+
+#### 🚀 Updates
+
+- Support labelNode in TextInput. [[#198](https://github.com/coinbase/cds/pull/198)]
+
 ## 8.23.0 ((12/1/2025, 06:33 AM PST))
 
 This is an artificial version bump with no new change.

package/dts/controls/TextInput.d.ts

@@ -51,6 +51,11 @@ export type TextInputBaseProps = SharedProps &
      * @default 'error'
      */
     helperTextErrorIconAccessibilityLabel?: string;
+    /**
+     * React node to render label. Takes precedence over `label`.
+     * @note if both labelNode and label are provided, label will still be used as accessibility label for the input if no accessibilityLabel is provided.
+     */
+    labelNode?: React.ReactNode;
   };
 export type TextInputProps = TextInputBaseProps &
   Omit<RNTextInputProps, 'value' | 'onChange' | 'onChangeText' | 'textAlign'> & {
@@ -118,6 +123,11 @@ export declare const TextInput: React.MemoExoticComponent<
          * @default 'error'
          */
         helperTextErrorIconAccessibilityLabel?: string;
+        /**
+         * React node to render label. Takes precedence over `label`.
+         * @note if both labelNode and label are provided, label will still be used as accessibility label for the input if no accessibilityLabel is provided.
+         */
+        labelNode?: React.ReactNode;
       } & Omit<RNTextInputProps, 'value' | 'textAlign' | 'onChange' | 'onChangeText'> & {
         value?: RNTextInputProps['value'];
         onChange?: RNTextInputProps['onChange'];

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;CAChD,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;IA5DlB;;;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;;YAKtC,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;sCAuOrB,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,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"}

package/dts/tag/Tag.d.ts

@@ -5,6 +5,7 @@ import type {
   SharedAccessibilityProps,
   SharedProps,
   TagColorScheme,
+  TagEmphasis,
   TagIntent,
 } from '@coinbase/cds-common/types';
 import { type BoxProps } from '../layout';
@@ -17,6 +18,11 @@ export type TagBaseProps = SharedProps &
      * @default informational
      */
     intent?: TagIntent;
+    /**
+     * Specify the emphasis of the Tag.
+     * @default 'low' when informational intent, 'high' when promotional intent
+     */
+    emphasis?: TagEmphasis;
     /**
      * Specify the colorScheme of the Tag
      * @default blue
@@ -42,6 +48,11 @@ export declare const Tag: React.MemoExoticComponent<
          * @default informational
          */
         intent?: TagIntent;
+        /**
+         * Specify the emphasis of the Tag.
+         * @default 'low' when informational intent, 'high' when promotional intent
+         */
+        emphasis?: TagEmphasis;
         /**
          * Specify the colorScheme of the Tag
          * @default blue

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,wBAAwB,EACxB,WAAW,EACX,cAAc,EACd,SAAS,EACV,MAAM,4BAA4B,CAAC;AAGpC,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,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;CACjC,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;IAvBZ,yCAAyC;cAC/B,KAAK,CAAC,SAAS;IACzB;;;OAGG;aACM,SAAS;IAClB;;;OAGG;kBACW,cAAc;IAC5B,sCAAsC;iBACzB,SAAS,CAAC,aAAa;IACpC,gCAAgC;YACxB,SAAS,CAAC,aAAa;IAC/B,0EAA0E;eAC/D,QAAQ,CAAC,UAAU,CAAC;kGAoDlC,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,wBAAwB,EACxB,WAAW,EACX,cAAc,EACd,WAAW,EACX,SAAS,EACV,MAAM,4BAA4B,CAAC;AAGpC,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;CACjC,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;IA5BZ,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;kGAqDlC,CAAC"}

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"];
+const _excluded = ["label", "helperText", "variant", "testID", "testIDMap", "start", "end", "width", "disabled", "align", "compact", "suffix", "accessibilityLabel", "borderRadius", "enableColorSurge", "helperTextErrorIconAccessibilityLabel", "bordered", "labelVariant", "labelNode"];
 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';
@@ -45,7 +45,8 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
       enableColorSurge = false,
       helperTextErrorIconAccessibilityLabel = 'error',
       bordered = true,
-      labelVariant = 'outside'
+      labelVariant = 'outside',
+      labelNode
     } = _ref,
     editableInputProps = _objectWithoutPropertiesLoose(_ref, _excluded);
   const theme = useTheme();
@@ -155,7 +156,7 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
       disabled: disabled,
       testID: testID
     }, editableInputAddonProps)),
-    labelNode: !compact && !!label && /*#__PURE__*/_jsx(Pressable, {
+    labelNode: !compact && (labelNode ? labelNode : !!label && /*#__PURE__*/_jsx(Pressable, {
       accessibilityRole: "button",
       disabled: disabled,
       onPress: handleNodePress,
@@ -169,7 +170,7 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
         testID: (_testIDMap$label = testIDMap == null ? void 0 : testIDMap.label) != null ? _testIDMap$label : '',
         children: label
       }))
-    }),
+    })),
     labelVariant: labelVariant,
     startNode: (compact && !!label || !!start) && /*#__PURE__*/_jsx(Box, {
       alignItems: "center",

package/esm/controls/__stories__/TextInput.stories.js

@@ -8,9 +8,11 @@ import { Icon } from '../../icons';
 import { Box } from '../../layout/Box';
 import { HStack } from '../../layout/HStack';
 import { VStack } from '../../layout/VStack';
+import { Tooltip } from '../../overlays/tooltip/Tooltip';
 import { Text } from '../../typography/Text';
 import { InputIcon } from '../InputIcon';
 import { InputIconButton } from '../InputIconButton';
+import { InputLabel } from '../InputLabel';
 import { TextInput } from '../TextInput';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const MockTextInput = _ref => {
@@ -537,6 +539,28 @@ const InputScreen = () => {
         placeholder: "Enter your favorite color",
         variant: "negative"
       })
+    }), /*#__PURE__*/_jsx(Example, {
+      inline: true,
+      title: "TextInput with labelNode",
+      children: /*#__PURE__*/_jsx(MockTextInput, {
+        label: "Display name",
+        labelNode: /*#__PURE__*/_jsxs(HStack, {
+          alignItems: "center",
+          gap: 1,
+          children: [/*#__PURE__*/_jsx(InputLabel, {
+            children: "Display name"
+          }), /*#__PURE__*/_jsx(Tooltip, {
+            content: "This will be visible to other users.",
+            children: /*#__PURE__*/_jsx(Icon, {
+              active: true,
+              color: "fg",
+              name: "info",
+              size: "xs"
+            })
+          })]
+        }),
+        placeholder: "Satoshi Nakamoto"
+      })
     })]
   });
 };

package/esm/dates/__stories__/DateInput.stories.js

@@ -1,9 +1,12 @@
 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, { useState } from 'react';
 import { LocaleProvider } from '@coinbase/cds-common/system/LocaleProvider';
+import { InputLabel } from '../../controls/InputLabel';
 import { Example, ExampleScreen } from '../../examples/ExampleScreen';
 import { Icon } from '../../icons';
+import { HStack } from '../../layout';
 import { Group } from '../../layout/Group';
+import { Tooltip } from '../../overlays';
 import { ThemeProvider } from '../../system/ThemeProvider';
 import { defaultTheme } from '../../themes/defaultTheme';
 import { DateInput } from '../DateInput';
@@ -43,6 +46,22 @@ export const Examples = () => {
           minDate: oneDayAgo
         })), /*#__PURE__*/_jsx(DateInput, _extends({}, sharedProps, props, {
           separator: "-"
+        })), /*#__PURE__*/_jsx(DateInput, _extends({}, sharedProps, props, {
+          label: "Date of birth",
+          labelNode: /*#__PURE__*/_jsxs(HStack, {
+            alignItems: "center",
+            gap: 1,
+            children: [/*#__PURE__*/_jsx(InputLabel, {
+              children: "Date of birth"
+            }), /*#__PURE__*/_jsx(Tooltip, {
+              content: "This will be visible to other users.",
+              children: /*#__PURE__*/_jsx(Icon, {
+                color: "fgMuted",
+                name: "info",
+                size: "xs"
+              })
+            })]
+          })
         })), /*#__PURE__*/_jsx(DateInput, _extends({}, sharedProps, props, {
           end: /*#__PURE__*/_jsx(Icon, {
             active: true,

package/esm/dates/__stories__/DatePicker.stories.js

@@ -1,8 +1,11 @@
 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 { useState } from 'react';
+import { InputLabel } from '../../controls/InputLabel';
 import { TextInput } from '../../controls/TextInput';
 import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { Icon } from '../../icons';
 import { HStack } from '../../layout';
+import { Tooltip } from '../../overlays/tooltip/Tooltip';
 import { DatePicker } from '../DatePicker';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const today = new Date(new Date(2024, 7, 18).setHours(0, 0, 0, 0));
@@ -76,6 +79,26 @@ export const FullExample = () => {
           width: "auto"
         })]
       })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "DatePicker with labelNode",
+      children: /*#__PURE__*/_jsx(ExampleDatePicker, {
+        calendarIconButtonAccessibilityLabel: "Birthdate calendar",
+        label: "Birthdate",
+        labelNode: /*#__PURE__*/_jsxs(HStack, {
+          alignItems: "center",
+          gap: 1,
+          children: [/*#__PURE__*/_jsx(InputLabel, {
+            children: "Birthdate"
+          }), /*#__PURE__*/_jsx(Tooltip, {
+            content: "This will be visible to other users.",
+            children: /*#__PURE__*/_jsx(Icon, {
+              color: "fgMuted",
+              name: "info",
+              size: "xs"
+            })
+          })]
+        })
+      })
     }), /*#__PURE__*/_jsx(Example, {
       title: "DatePicker fit-content width",
       children: /*#__PURE__*/_jsxs(HStack, {

package/esm/tag/Tag.js

@@ -1,8 +1,8 @@
-const _excluded = ["children", "intent", "colorScheme", "background", "color", "alignItems", "justifyContent", "testID"];
+const _excluded = ["children", "intent", "emphasis", "colorScheme", "background", "color", "alignItems", "justifyContent", "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';
-import { tagBorderRadiusMap, tagColorMap, tagFontMap, tagHorizontalSpacing } from '@coinbase/cds-common/tokens/tags';
+import { tagBorderRadiusMap, tagEmphasisColorMap, tagFontMap, tagHorizontalSpacing } from '@coinbase/cds-common/tokens/tags';
 import { useTheme } from '../hooks/useTheme';
 import { Box } from '../layout';
 import { Text } from '../typography/Text';
@@ -11,6 +11,7 @@ export const Tag = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forwardedRef
   let {
       children,
       intent = 'informational',
+      emphasis = intent === 'informational' ? 'low' : 'high',
       colorScheme = 'blue',
       background: customBackground,
       color: customColor,
@@ -23,7 +24,7 @@ export const Tag = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forwardedRef
   const {
     background,
     foreground
-  } = tagColorMap[intent][colorScheme];
+  } = tagEmphasisColorMap[emphasis][colorScheme];
   const backgroundColor = "rgb(" + theme.spectrum[customBackground != null ? customBackground : background] + ")";
   const color = "rgb(" + theme.spectrum[customColor != null ? customColor : foreground] + ")";
   return /*#__PURE__*/_jsx(Box, _extends({

package/esm/tag/__figma__/Tag.figma.js

@@ -12,6 +12,10 @@ figma.connect(Tag, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-
     intent: 'informational'
   },
   props: {
+    emphasis: figma.enum('emphasis', {
+      high: 'high',
+      low: 'low'
+    }),
     colorScheme: figma.enum('colorScheme', {
       green: 'green',
       purple: 'purple',
@@ -47,6 +51,10 @@ figma.connect(Tag, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-
     intent: 'promotional'
   },
   props: {
+    emphasis: figma.enum('emphasis', {
+      high: 'high',
+      low: 'low'
+    }),
     colorScheme: figma.enum('colorScheme', {
       green: 'green',
       purple: 'purple',

package/esm/tag/__stories__/Tag.stories.js

@@ -6,6 +6,7 @@ import { Tag } from '../Tag';
 import { jsx as _jsx } from "react/jsx-runtime";
 const tagProps = {
   intent: ['informational', 'promotional'],
+  emphasis: ['high', 'low'],
   colorScheme: ['green', 'purple', 'blue', 'yellow', 'red', 'gray']
 };
 const tagMap = tagProps.intent.map(intent => {
@@ -20,7 +21,25 @@ const tagStories = {
     children: 'Default tag',
     colorScheme: 'blue'
   }],
-  all: tagMap,
+  all: [...tagProps.colorScheme.map(scheme => ({
+    intent: 'informational',
+    emphasis: 'high',
+    colorScheme: scheme,
+    children: startCase(scheme) + " (High Informational)"
+  })), ...tagProps.colorScheme.map(scheme => ({
+    intent: 'promotional',
+    colorScheme: scheme,
+    children: startCase(scheme) + " (High)"
+  })), ...tagProps.colorScheme.map(scheme => ({
+    intent: 'informational',
+    colorScheme: scheme,
+    children: startCase(scheme) + " (Low)"
+  })), ...tagProps.colorScheme.map(scheme => ({
+    intent: 'promotional',
+    emphasis: 'low',
+    colorScheme: scheme,
+    children: startCase(scheme) + " (Low Promotional)"
+  }))],
   wildcard: [{
     children: 'Atlanta',
     background: 'blue100',

package/package.json

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