@coinbase/cds-web 9.2.1 → 9.3.0

package/CHANGELOG.md

@@ -8,6 +8,18 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 9.3.0 (6/11/2026 PST)
+
+#### 🚀 Updates
+
+- Feat: support tooltip theming. [[#753](https://github.com/coinbase/cds/pull/753)]
+
+## 9.2.2 (6/10/2026 PST)
+
+#### 🐞 Fixes
+
+- Fix: custom Switch sizes now center in the background track correctly. [[#750](https://github.com/coinbase/cds/pull/750)]
+
 ## 9.2.1 (6/9/2026 PST)
 
 #### 🐞 Fixes

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/controls/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAUjE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAEpD,OAAO,EAAW,KAAK,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAE3D;;;GAGG;AACH,eAAO,MAAM,gBAAgB;IAC3B,oDAAoD;;IAEpD,4CAA4C;;IAE5C,6BAA6B;;IAE7B,6BAA6B;;CAErB,CAAC;AA2BX,MAAM,MAAM,eAAe,GAAG,gBAAgB,CAAC,MAAM,CAAC,GAAG;IACvD;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,eAAe,GACvC,mBAAmB,CAAC,OAAO,gBAAgB,CAAC,GAAG;IAC7C;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AA6FJ,eAAO,MAAM,MAAM;;;;;;;;;;;IA9GjB;;OAEG;mBACY,SAAS,CAAC,KAAK;;IAvC9B,oDAAoD;;IAEpD,4CAA4C;;IAE5C,6BAA6B;;IAE7B,6BAA6B;;;IAsC3B;;;;;;;OAOG;eACQ,KAAK,CAAC,SAAS;0CA8FW,CAAC"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/controls/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAUjE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAEpD,OAAO,EAAW,KAAK,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAE3D;;;GAGG;AACH,eAAO,MAAM,gBAAgB;IAC3B,oDAAoD;;IAEpD,4CAA4C;;IAE5C,6BAA6B;;IAE7B,6BAA6B;;CAErB,CAAC;AA6BX,MAAM,MAAM,eAAe,GAAG,gBAAgB,CAAC,MAAM,CAAC,GAAG;IACvD;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,eAAe,GACvC,mBAAmB,CAAC,OAAO,gBAAgB,CAAC,GAAG;IAC7C;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AA+FJ,eAAO,MAAM,MAAM;;;;;;;;;;;IAhHjB;;OAEG;mBACY,SAAS,CAAC,KAAK;;IAzC9B,oDAAoD;;IAEpD,4CAA4C;;IAE5C,6BAA6B;;IAE7B,6BAA6B;;;IAwC3B;;;;;;;OAOG;eACQ,KAAK,CAAC,SAAS;0CAgGW,CAAC"}

package/dts/overlays/tooltip/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/overlays/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAMhF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAQnD,eAAO,MAAM,OAAO,qCAAiB,YAAY,6CAuG/C,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/overlays/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAWhF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAQnD,eAAO,MAAM,OAAO,qCAAiB,YAAY,6CA+H/C,CAAC"}

package/dts/overlays/tooltip/TooltipContent.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { type BoxBaseProps } from '../../layout/Box';
 import type { PopperTooltipProps } from './TooltipProps';
 export type TooltipContentBaseProps = PopperTooltipProps &
-  Pick<BoxBaseProps, 'background' | 'borderRadius' | 'maxWidth' | 'paddingX' | 'paddingY'>;
+  Omit<BoxBaseProps, 'children' | 'gap' | 'pin'>;
 export type TooltipContentProps = TooltipContentBaseProps;
 export declare const TooltipContent: React.NamedExoticComponent<
   {
@@ -12,7 +12,7 @@ export declare const TooltipContent: React.NamedExoticComponent<
     import('./TooltipProps').TooltipBaseProps,
     'zIndex' | 'elevation' | 'content' | 'testID' | 'placement'
   > &
-    Pick<BoxBaseProps, 'borderRadius' | 'maxWidth' | 'background' | 'paddingX' | 'paddingY'> &
+    Omit<BoxBaseProps, 'gap' | 'pin' | 'children'> &
     React.RefAttributes<HTMLDivElement>
 >;
 //# sourceMappingURL=TooltipContent.d.ts.map

package/dts/overlays/tooltip/TooltipContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipContent.d.ts","sourceRoot":"","sources":["../../../src/overlays/tooltip/TooltipContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAezD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAI1D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAgBzD,MAAM,MAAM,uBAAuB,GAAG,kBAAkB,GACtD,IAAI,CAAC,YAAY,EAAE,YAAY,GAAG,cAAc,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,CAAC,CAAC;AAE3F,MAAM,MAAM,mBAAmB,GAAG,uBAAuB,CAAC;AAE1D,eAAO,MAAM,cAAc;;;kPA+D1B,CAAC"}
+{"version":3,"file":"TooltipContent.d.ts","sourceRoot":"","sources":["../../../src/overlays/tooltip/TooltipContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAezD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAI1D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAgBzD,MAAM,MAAM,uBAAuB,GAAG,kBAAkB,GACtD,IAAI,CAAC,YAAY,EAAE,UAAU,GAAG,KAAK,GAAG,KAAK,CAAC,CAAC;AAEjD,MAAM,MAAM,mBAAmB,GAAG,uBAAuB,CAAC;AAE1D,eAAO,MAAM,cAAc;;;wMA+E1B,CAAC"}

package/dts/overlays/tooltip/TooltipProps.d.ts

@@ -1,8 +1,10 @@
 import type { ThemeVars } from '@coinbase/cds-common/core/theme';
 import type { BaseTooltipPlacement, ElevationProps, SharedProps } from '@coinbase/cds-common/types';
+import type { BoxBaseProps } from '../../layout/Box';
 import type { PopoverProps } from '../popover/PopoverProps';
 export type TooltipBaseProps = SharedProps &
   ElevationProps &
+  Omit<BoxBaseProps, 'children' | 'gap' | 'pin'> &
   Pick<
     PopoverProps,
     | 'disableFocusTrap'

package/dts/overlays/tooltip/TooltipProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipProps.d.ts","sourceRoot":"","sources":["../../../src/overlays/tooltip/TooltipProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,EAAE,oBAAoB,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEpG,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAE5D,MAAM,MAAM,gBAAgB,GAAG,WAAW,GACxC,cAAc,GACd,IAAI,CACF,YAAY,EACV,kBAAkB,GAClB,kBAAkB,GAClB,kBAAkB,GAClB,yBAAyB,GACzB,uBAAuB,GACvB,gBAAgB,CACnB,GAAG;IACF,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B,gDAAgD;IAChD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;OAIG;IACH,GAAG,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,sDAAsD;IACtD,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;SAGK;IACL,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACvC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC,CAAC;AAEJ,MAAM,MAAM,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,GAAG,EAAE,SAAS,CAAC,KAAK,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,IAAI,CAAC,YAAY,EAAE,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,WAAW,GAAG,WAAW,CAAC,CAAC"}
+{"version":3,"file":"TooltipProps.d.ts","sourceRoot":"","sources":["../../../src/overlays/tooltip/TooltipProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,EAAE,oBAAoB,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEpG,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAE5D,MAAM,MAAM,gBAAgB,GAAG,WAAW,GACxC,cAAc,GACd,IAAI,CAAC,YAAY,EAAE,UAAU,GAAG,KAAK,GAAG,KAAK,CAAC,GAC9C,IAAI,CACF,YAAY,EACV,kBAAkB,GAClB,kBAAkB,GAClB,kBAAkB,GAClB,yBAAyB,GACzB,uBAAuB,GACvB,gBAAgB,CACnB,GAAG;IACF,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B,gDAAgD;IAChD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;OAIG;IACH,GAAG,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,sDAAsD;IACtD,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;SAGK;IACL,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACvC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC,CAAC;AAEJ,MAAM,MAAM,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,GAAG,EAAE,SAAS,CAAC,KAAK,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,IAAI,CAAC,YAAY,EAAE,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,WAAW,GAAG,WAAW,CAAC,CAAC"}

package/esm/controls/Switch.css

@@ -1,2 +1,2 @@
 @layer cds{.trackCss-t1fng8qd{width:var(--controlSize-switchWidth);height:var(--controlSize-switchHeight);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;padding:1px;-webkit-transition: border-color, background-color 0.2s linear;transition: border-color, background-color 0.2s linear;}.trackCss-t1fng8qd[data-filled='true']{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;}
-.thumbCss-t1l9xlcf{width:var(--controlSize-switchThumbSize);height:var(--controlSize-switchThumbSize);border:0.5px solid var(--color-bgLine);position:absolute;top:1px;left:1px;}}
+.thumbCss-t1l9xlcf{width:var(--controlSize-switchThumbSize);height:var(--controlSize-switchThumbSize);border:0.5px solid var(--color-bgLine);position:absolute;top:calc((var(--controlSize-switchHeight) - var(--controlSize-switchThumbSize)) / 2);left:calc((var(--controlSize-switchHeight) - var(--controlSize-switchThumbSize)) / 2);}}

package/esm/controls/Switch.js

@@ -36,7 +36,9 @@ const thumbCss = "thumbCss-t1l9xlcf";
 const MotionBox = motion(Box);
 const thumbMotionVariants = {
   checked: {
-    x: "calc(var(--controlSize-switchWidth) - var(--controlSize-switchThumbSize) - 2px)"
+    // Travel = trackWidth - 2*inset - thumbSize, which simplifies to
+    // trackWidth - trackHeight when the thumb is centered with equal insets.
+    x: "calc(var(--controlSize-switchWidth) - var(--controlSize-switchHeight))"
   },
   unchecked: {
     x: 0

package/esm/overlays/tooltip/Tooltip.js

@@ -1,4 +1,13 @@
+const _excluded = ["children", "content", "elevation", "placement", "gap", "testID", "zIndex", "tooltipId", "visible", "hasInteractiveContent", "invertColorScheme", "disableAutoFocus", "disableFocusTrap", "disablePortal", "disableTypeFocus", "focusTabIndexElements", "respectNegativeTabIndex", "autoFocusDelay", "openDelay", "closeDelay", "background", "borderRadius", "maxWidth", "paddingX", "paddingY", "color", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+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, memo, useCallback, useMemo, useRef } from 'react';
+import { tooltipMaxWidth, tooltipPaddingX, tooltipPaddingY } from '@coinbase/cds-common/tokens/tooltip';
 import { useComponentConfig } from '../../hooks/useComponentConfig';
 import { Popover } from '../popover/Popover';
 import { TooltipContent } from './TooltipContent';
@@ -11,27 +20,39 @@ const preventMouseDown = event => {
 export const Tooltip = /*#__PURE__*/memo(_props => {
   const mergedProps = useComponentConfig('Tooltip', _props);
   const {
-    children,
-    content,
-    elevation,
-    placement = 'top',
-    gap = 1,
-    testID,
-    zIndex,
-    tooltipId: tooltipIdDefault,
-    visible,
-    hasInteractiveContent,
-    invertColorScheme = true,
-    disableAutoFocus = hasInteractiveContent,
-    disableFocusTrap = hasInteractiveContent,
-    disablePortal = hasInteractiveContent,
-    disableTypeFocus,
-    focusTabIndexElements,
-    respectNegativeTabIndex,
-    autoFocusDelay = 20,
-    openDelay,
-    closeDelay
-  } = mergedProps;
+      children,
+      content,
+      elevation,
+      placement = 'top',
+      gap = 1,
+      testID,
+      zIndex,
+      tooltipId: tooltipIdDefault,
+      visible,
+      hasInteractiveContent,
+      invertColorScheme = true,
+      disableAutoFocus = hasInteractiveContent,
+      disableFocusTrap = hasInteractiveContent,
+      disablePortal = hasInteractiveContent,
+      disableTypeFocus,
+      focusTabIndexElements,
+      respectNegativeTabIndex,
+      autoFocusDelay = 20,
+      openDelay,
+      closeDelay,
+      background = 'bg',
+      borderRadius = 200,
+      maxWidth = tooltipMaxWidth,
+      paddingX = tooltipPaddingX,
+      paddingY = tooltipPaddingY,
+      color = 'fg',
+      font = 'label2',
+      fontFamily,
+      fontSize,
+      fontWeight,
+      lineHeight
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   const {
     isOpen,
     handleOnMouseEnter,
@@ -74,16 +95,27 @@ export const Tooltip = /*#__PURE__*/memo(_props => {
   }, [handleOnBlur]);
   return /*#__PURE__*/_jsx(Popover, {
     autoFocusDelay: autoFocusDelay,
-    content: /*#__PURE__*/_jsx(TooltipContent, {
+    content: /*#__PURE__*/_jsx(TooltipContent, _objectSpread({
       ref: tooltipContentRef,
+      background: background,
+      borderRadius: borderRadius,
+      color: color,
       content: content,
       elevation: elevation,
+      font: font,
+      fontFamily: fontFamily,
+      fontSize: fontSize,
+      fontWeight: fontWeight,
       gap: gap,
+      lineHeight: lineHeight,
+      maxWidth: maxWidth,
+      paddingX: paddingX,
+      paddingY: paddingY,
       placement: placement,
       testID: testID,
       tooltipId: tooltipId,
       zIndex: zIndex
-    }),
+    }, props)),
     contentPosition: contentPosition,
     disableAutoFocus: disableAutoFocus,
     disableFocusTrap: disableFocusTrap,

package/esm/overlays/tooltip/TooltipContent.js

@@ -1,8 +1,11 @@
+const _excluded = ["content", "elevation", "gap", "testID", "zIndex", "tooltipId", "placement", "background", "borderRadius", "maxWidth", "paddingX", "paddingY", "color", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+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, useMemo } from 'react';
 import { animateInOpacityConfig, animateOutOpacityConfig, getTranslateConfigByPlacement } from '@coinbase/cds-common/animation/tooltip';
 import { tooltipMaxWidth, tooltipPaddingX, tooltipPaddingY } from '@coinbase/cds-common/tokens/tooltip';
@@ -15,19 +18,26 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const textCss = "textCss-t15dzixe";
 export const TooltipContent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
-    content,
-    elevation,
-    gap,
-    testID,
-    zIndex,
-    tooltipId,
-    placement = 'top',
-    background = 'bg',
-    borderRadius = 200,
-    maxWidth = tooltipMaxWidth,
-    paddingX = tooltipPaddingX,
-    paddingY = tooltipPaddingY
-  } = _ref;
+      content,
+      elevation,
+      gap,
+      testID,
+      zIndex,
+      tooltipId,
+      placement = 'top',
+      background = 'bg',
+      borderRadius = 200,
+      maxWidth = tooltipMaxWidth,
+      paddingX = tooltipPaddingX,
+      paddingY = tooltipPaddingY,
+      color = 'fg',
+      font = 'label2',
+      fontFamily,
+      fontSize,
+      fontWeight,
+      lineHeight
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
   const outerStyle = useMemo(() => ({
     padding: "var(--space-".concat(gap, ")"),
     zIndex: zIndex !== null && zIndex !== void 0 ? zIndex : zIndexTokens.tooltip
@@ -45,7 +55,7 @@ export const TooltipContent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
   });
   return /*#__PURE__*/_jsx(motion.div, _objectSpread(_objectSpread({}, motionProps), {}, {
     "data-testid": "".concat(testID, "-motion"),
-    children: /*#__PURE__*/_jsx(Box, {
+    children: /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({
       ref: ref,
       background: background,
       borderRadius: borderRadius,
@@ -55,16 +65,21 @@ export const TooltipContent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
       maxWidth: maxWidth,
       paddingX: paddingX,
       paddingY: paddingY,
-      role: "tooltip",
+      role: "tooltip"
+    }, props), {}, {
       children: typeof content === 'string' ? /*#__PURE__*/_jsx(Text, {
         className: textCss,
-        color: "fg",
-        font: "label2",
+        color: color,
+        font: font,
+        fontFamily: fontFamily,
+        fontSize: fontSize,
+        fontWeight: fontWeight,
+        lineHeight: lineHeight,
         children: content
       }) : /*#__PURE__*/_jsx("div", {
         children: content
       })
-    })
+    }))
   }));
 }));
 import "./TooltipContent.css";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web",
-  "version": "9.2.1",
+  "version": "9.3.0",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",
@@ -219,9 +219,9 @@
     "react-dom": "^18.0.0 || ~19.1.2"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^9.2.1",
-    "@coinbase/cds-icons": "^5.18.0",
-    "@coinbase/cds-illustrations": "^4.40.1",
+    "@coinbase/cds-common": "^9.3.0",
+    "@coinbase/cds-icons": "^5.19.0",
+    "@coinbase/cds-illustrations": "^4.41.0",
     "@coinbase/cds-lottie-files": "^3.3.4",
     "@coinbase/cds-utils": "^2.3.5",
     "@floating-ui/react-dom": "^2.1.1",