@coinbase/cds-web 9.6.8 → 9.6.10

package/CHANGELOG.md

@@ -8,6 +8,18 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 9.6.10 (7/22/2026 PST)
+
+#### 🐞 Fixes
+
+- Fix: Remove max-width constraint for ReactNode children of Tooltip. [[#801](https://github.com/coinbase/cds/pull/801)]
+
+## 9.6.9 (7/22/2026 PST)
+
+#### 🐞 Fixes
+
+- Fix: adjust messaging card imports. [[#800](https://github.com/coinbase/cds/pull/800)]
+
 ## 9.6.8 (7/22/2026 PST)
 
 #### 🐞 Fixes

package/dts/cards/MediaCard/MediaCard.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import type { Polymorphic } from '../../core/polymorphism';
+import { type CardRootBaseProps } from '../CardRoot';
+import { type MediaCardLayoutProps } from './MediaCardLayout';
+export type MediaCardBaseProps = Polymorphic.ExtendableProps<
+  Omit<CardRootBaseProps, 'children'>,
+  MediaCardLayoutProps & {
+    classNames?: {
+      /** Root element */
+      root?: string;
+    };
+    styles?: {
+      /** Root element */
+      root?: React.CSSProperties;
+    };
+  }
+>;
+export type MediaCardProps<AsComponent extends React.ElementType = 'article'> = Polymorphic.Props<
+  AsComponent,
+  MediaCardBaseProps
+>;
+type MediaCardComponent = (<AsComponent extends React.ElementType = 'article'>(
+  props: MediaCardProps<AsComponent>,
+) => Polymorphic.ReactReturn) &
+  Polymorphic.ReactNamed;
+export declare const MediaCard: MediaCardComponent;
+export {};
+//# sourceMappingURL=MediaCard.d.ts.map

package/dts/cards/MediaCard/MediaCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaCard.d.ts","sourceRoot":"","sources":["../../../src/cards/MediaCard/MediaCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAGhD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE3D,OAAO,EAAY,KAAK,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAE/D,OAAO,EAAmB,KAAK,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE/E,MAAM,MAAM,kBAAkB,GAAG,WAAW,CAAC,eAAe,CAC1D,IAAI,CAAC,iBAAiB,EAAE,UAAU,CAAC,EACnC,oBAAoB,GAAG;IACrB,UAAU,CAAC,EAAE;QACX,mBAAmB;QACnB,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;IACF,MAAM,CAAC,EAAE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAC5B,CAAC;CACH,CACF,CAAC;AAEF,MAAM,MAAM,cAAc,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,GAAG,SAAS,IAAI,WAAW,CAAC,KAAK,CAC/F,WAAW,EACX,kBAAkB,CACnB,CAAC;AASF,KAAK,kBAAkB,GAAG,CAAC,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,GAAG,SAAS,EAC3E,KAAK,EAAE,cAAc,CAAC,WAAW,CAAC,KAC/B,WAAW,CAAC,WAAW,CAAC,GAC3B,WAAW,CAAC,UAAU,CAAC;AAEzB,eAAO,MAAM,SAAS,EAAE,kBAyCvB,CAAC"}

package/dts/cards/MediaCard/index.d.ts

@@ -1,28 +1,3 @@
-import React from 'react';
-import type { Polymorphic } from '../../core/polymorphism';
-import { type CardRootBaseProps } from '../CardRoot';
-import { type MediaCardLayoutProps } from './MediaCardLayout';
-export type MediaCardBaseProps = Polymorphic.ExtendableProps<
-  Omit<CardRootBaseProps, 'children'>,
-  MediaCardLayoutProps & {
-    classNames?: {
-      /** Root element */
-      root?: string;
-    };
-    styles?: {
-      /** Root element */
-      root?: React.CSSProperties;
-    };
-  }
->;
-export type MediaCardProps<AsComponent extends React.ElementType = 'article'> = Polymorphic.Props<
-  AsComponent,
-  MediaCardBaseProps
->;
-type MediaCardComponent = (<AsComponent extends React.ElementType = 'article'>(
-  props: MediaCardProps<AsComponent>,
-) => Polymorphic.ReactReturn) &
-  Polymorphic.ReactNamed;
-export declare const MediaCard: MediaCardComponent;
-export {};
+export * from './MediaCard';
+export * from './MediaCardLayout';
 //# sourceMappingURL=index.d.ts.map

package/dts/cards/MediaCard/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/cards/MediaCard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAGhD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE3D,OAAO,EAAY,KAAK,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAE/D,OAAO,EAAmB,KAAK,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE/E,MAAM,MAAM,kBAAkB,GAAG,WAAW,CAAC,eAAe,CAC1D,IAAI,CAAC,iBAAiB,EAAE,UAAU,CAAC,EACnC,oBAAoB,GAAG;IACrB,UAAU,CAAC,EAAE;QACX,mBAAmB;QACnB,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;IACF,MAAM,CAAC,EAAE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAC5B,CAAC;CACH,CACF,CAAC;AAEF,MAAM,MAAM,cAAc,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,GAAG,SAAS,IAAI,WAAW,CAAC,KAAK,CAC/F,WAAW,EACX,kBAAkB,CACnB,CAAC;AASF,KAAK,kBAAkB,GAAG,CAAC,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,GAAG,SAAS,EAC3E,KAAK,EAAE,cAAc,CAAC,WAAW,CAAC,KAC/B,WAAW,CAAC,WAAW,CAAC,GAC3B,WAAW,CAAC,UAAU,CAAC;AAEzB,eAAO,MAAM,SAAS,EAAE,kBAyCvB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/cards/MediaCard/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC"}

package/dts/cards/MessagingCard/MessagingCard.d.ts

@@ -0,0 +1,25 @@
+import type { Polymorphic } from '../../core/polymorphism';
+import { type CardRootBaseProps } from '../CardRoot';
+import { type MessagingCardLayoutProps } from './MessagingCardLayout';
+export type MessagingCardBaseProps = Polymorphic.ExtendableProps<
+  Omit<CardRootBaseProps, 'children'>,
+  MessagingCardLayoutProps & {
+    classNames?: {
+      /** Root element */
+      root?: string;
+    };
+    styles?: {
+      /** Root element */
+      root?: React.CSSProperties;
+    };
+  }
+>;
+export type MessagingCardProps<AsComponent extends React.ElementType = 'article'> =
+  Polymorphic.Props<AsComponent, MessagingCardBaseProps>;
+type MessagingCardComponent = (<AsComponent extends React.ElementType = 'article'>(
+  props: MessagingCardProps<AsComponent>,
+) => Polymorphic.ReactReturn) &
+  Polymorphic.ReactNamed;
+export declare const MessagingCard: MessagingCardComponent;
+export {};
+//# sourceMappingURL=MessagingCard.d.ts.map

package/dts/cards/MessagingCard/MessagingCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessagingCard.d.ts","sourceRoot":"","sources":["../../../src/cards/MessagingCard/MessagingCard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE3D,OAAO,EAAY,KAAK,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAE/D,OAAO,EAAuB,KAAK,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAE3F,MAAM,MAAM,sBAAsB,GAAG,WAAW,CAAC,eAAe,CAC9D,IAAI,CAAC,iBAAiB,EAAE,UAAU,CAAC,EACnC,wBAAwB,GAAG;IACzB,UAAU,CAAC,EAAE;QACX,mBAAmB;QACnB,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;IACF,MAAM,CAAC,EAAE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAC5B,CAAC;CACH,CACF,CAAC;AAEF,MAAM,MAAM,kBAAkB,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,GAAG,SAAS,IAC9E,WAAW,CAAC,KAAK,CAAC,WAAW,EAAE,sBAAsB,CAAC,CAAC;AAEzD,KAAK,sBAAsB,GAAG,CAAC,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,GAAG,SAAS,EAC/E,KAAK,EAAE,kBAAkB,CAAC,WAAW,CAAC,KACnC,WAAW,CAAC,WAAW,CAAC,GAC3B,WAAW,CAAC,UAAU,CAAC;AAEzB,eAAO,MAAM,aAAa,EAAE,sBAuD3B,CAAC"}

package/dts/cards/MessagingCard/index.d.ts

@@ -1,25 +1,3 @@
-import type { Polymorphic } from '../../core/polymorphism';
-import { type CardRootBaseProps } from '../CardRoot';
-import { type MessagingCardLayoutProps } from './MessagingCardLayout';
-export type MessagingCardBaseProps = Polymorphic.ExtendableProps<
-  Omit<CardRootBaseProps, 'children'>,
-  MessagingCardLayoutProps & {
-    classNames?: {
-      /** Root element */
-      root?: string;
-    };
-    styles?: {
-      /** Root element */
-      root?: React.CSSProperties;
-    };
-  }
->;
-export type MessagingCardProps<AsComponent extends React.ElementType = 'article'> =
-  Polymorphic.Props<AsComponent, MessagingCardBaseProps>;
-type MessagingCardComponent = (<AsComponent extends React.ElementType = 'article'>(
-  props: MessagingCardProps<AsComponent>,
-) => Polymorphic.ReactReturn) &
-  Polymorphic.ReactNamed;
-export declare const MessagingCard: MessagingCardComponent;
-export {};
+export * from './MessagingCard';
+export * from './MessagingCardLayout';
 //# sourceMappingURL=index.d.ts.map

package/dts/cards/MessagingCard/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/cards/MessagingCard/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE3D,OAAO,EAAY,KAAK,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAE/D,OAAO,EAAuB,KAAK,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAE3F,MAAM,MAAM,sBAAsB,GAAG,WAAW,CAAC,eAAe,CAC9D,IAAI,CAAC,iBAAiB,EAAE,UAAU,CAAC,EACnC,wBAAwB,GAAG;IACzB,UAAU,CAAC,EAAE;QACX,mBAAmB;QACnB,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;IACF,MAAM,CAAC,EAAE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAC5B,CAAC;CACH,CACF,CAAC;AAEF,MAAM,MAAM,kBAAkB,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,GAAG,SAAS,IAC9E,WAAW,CAAC,KAAK,CAAC,WAAW,EAAE,sBAAsB,CAAC,CAAC;AAEzD,KAAK,sBAAsB,GAAG,CAAC,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,GAAG,SAAS,EAC/E,KAAK,EAAE,kBAAkB,CAAC,WAAW,CAAC,KACnC,WAAW,CAAC,WAAW,CAAC,GAC3B,WAAW,CAAC,UAAU,CAAC;AAEzB,eAAO,MAAM,aAAa,EAAE,sBAuD3B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/cards/MessagingCard/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,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;AAWhF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAQnD,eAAO,MAAM,OAAO,qCAAiB,YAAY,6CA+H/C,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/overlays/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAOhF,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.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,UAAU,GAAG,KAAK,GAAG,KAAK,CAAC,CAAC;AAEjD,MAAM,MAAM,mBAAmB,GAAG,uBAAuB,CAAC;AAE1D,eAAO,MAAM,cAAc;;;wMA+E1B,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;;;wMAmF1B,CAAC"}

package/dts/typography/index.d.ts

@@ -1,11 +1,11 @@
 export * from './Link';
 export * from './Text';
 export * from './TextBody';
-export * from './TextFallback';
 export * from './TextCaption';
 export * from './TextDisplay1';
 export * from './TextDisplay2';
 export * from './TextDisplay3';
+export * from './TextFallback';
 export * from './TextHeadline';
 export * from './TextInherited';
 export * from './TextLabel1';

package/dts/typography/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/typography/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/typography/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC"}

package/esm/cards/MediaCard/MediaCard.js

@@ -0,0 +1,61 @@
+const _excluded = ["root"],
+  _excluded2 = ["root"],
+  _excluded3 = ["title", "subtitle", "description", "thumbnail", "media", "children", "mediaPlacement", "as", "classNames", "styles", "className", "style"];
+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 } from 'react';
+import { cx } from '../../cx';
+import { CardRoot } from '../CardRoot';
+import { MediaCardLayout } from './MediaCardLayout';
+import { jsx as _jsx } from "react/jsx-runtime";
+const mediaCardContainerProps = {
+  borderRadius: 500,
+  flexDirection: 'row',
+  background: 'bgAlternate',
+  overflow: 'hidden'
+};
+export const MediaCard = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      title,
+      subtitle,
+      description,
+      thumbnail,
+      media,
+      children,
+      mediaPlacement = 'end',
+      as,
+      classNames: {
+        root: rootClassName
+      } = {},
+      styles: {
+        root: rootStyle
+      } = {},
+      className,
+      style
+    } = _ref,
+    layoutClassNames = _objectWithoutProperties(_ref.classNames, _excluded),
+    layoutStyles = _objectWithoutProperties(_ref.styles, _excluded2),
+    props = _objectWithoutProperties(_ref, _excluded3);
+  return /*#__PURE__*/_jsx(CardRoot, _objectSpread(_objectSpread(_objectSpread({
+    ref: ref,
+    as: as,
+    className: cx(rootClassName, className),
+    style: _objectSpread(_objectSpread({}, rootStyle), style)
+  }, mediaCardContainerProps), props), {}, {
+    children: /*#__PURE__*/_jsx(MediaCardLayout, {
+      classNames: layoutClassNames,
+      description: description,
+      media: media,
+      mediaPlacement: mediaPlacement,
+      styles: layoutStyles,
+      subtitle: subtitle,
+      thumbnail: thumbnail,
+      title: title
+    })
+  }));
+}));

package/esm/cards/MediaCard/index.js

@@ -1,61 +1,2 @@
-const _excluded = ["root"],
-  _excluded2 = ["root"],
-  _excluded3 = ["title", "subtitle", "description", "thumbnail", "media", "children", "mediaPlacement", "as", "classNames", "styles", "className", "style"];
-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 } from 'react';
-import { cx } from '../../cx';
-import { CardRoot } from '../CardRoot';
-import { MediaCardLayout } from './MediaCardLayout';
-import { jsx as _jsx } from "react/jsx-runtime";
-const mediaCardContainerProps = {
-  borderRadius: 500,
-  flexDirection: 'row',
-  background: 'bgAlternate',
-  overflow: 'hidden'
-};
-export const MediaCard = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-      title,
-      subtitle,
-      description,
-      thumbnail,
-      media,
-      children,
-      mediaPlacement = 'end',
-      as,
-      classNames: {
-        root: rootClassName
-      } = {},
-      styles: {
-        root: rootStyle
-      } = {},
-      className,
-      style
-    } = _ref,
-    layoutClassNames = _objectWithoutProperties(_ref.classNames, _excluded),
-    layoutStyles = _objectWithoutProperties(_ref.styles, _excluded2),
-    props = _objectWithoutProperties(_ref, _excluded3);
-  return /*#__PURE__*/_jsx(CardRoot, _objectSpread(_objectSpread(_objectSpread({
-    ref: ref,
-    as: as,
-    className: cx(rootClassName, className),
-    style: _objectSpread(_objectSpread({}, rootStyle), style)
-  }, mediaCardContainerProps), props), {}, {
-    children: /*#__PURE__*/_jsx(MediaCardLayout, {
-      classNames: layoutClassNames,
-      description: description,
-      media: media,
-      mediaPlacement: mediaPlacement,
-      styles: layoutStyles,
-      subtitle: subtitle,
-      thumbnail: thumbnail,
-      title: title
-    })
-  }));
-}));
+export * from './MediaCard';
+export * from './MediaCardLayout';

package/esm/cards/MessagingCard/MessagingCard.js

@@ -0,0 +1,70 @@
+const _excluded = ["root"],
+  _excluded2 = ["root"],
+  _excluded3 = ["as", "type", "title", "description", "tag", "action", "onActionButtonClick", "actionButtonAccessibilityLabel", "onDismissButtonClick", "dismissButtonAccessibilityLabel", "mediaPlacement", "media", "dismissButton", "styles", "classNames", "className", "style"];
+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 { forwardRef, memo } from 'react';
+import { cx } from '../../cx';
+import { CardRoot } from '../CardRoot';
+import { MessagingCardLayout } from './MessagingCardLayout';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const MessagingCard = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      as,
+      type,
+      title,
+      description,
+      tag,
+      action,
+      onActionButtonClick,
+      actionButtonAccessibilityLabel,
+      onDismissButtonClick,
+      dismissButtonAccessibilityLabel,
+      mediaPlacement,
+      media,
+      dismissButton,
+      styles: {
+        root: rootStyle
+      } = {},
+      classNames: {
+        root: rootClassName
+      } = {},
+      className,
+      style
+    } = _ref,
+    layoutStyles = _objectWithoutProperties(_ref.styles, _excluded),
+    layoutClassNames = _objectWithoutProperties(_ref.classNames, _excluded2),
+    props = _objectWithoutProperties(_ref, _excluded3);
+  return /*#__PURE__*/_jsx(CardRoot, _objectSpread(_objectSpread({
+    ref: ref,
+    as: as,
+    background: type === 'upsell' ? 'bgPrimary' : 'bgAlternate',
+    borderRadius: 500,
+    borderWidth: 0,
+    className: cx(rootClassName, className),
+    overflow: "hidden",
+    style: _objectSpread(_objectSpread({}, rootStyle), style)
+  }, props), {}, {
+    children: /*#__PURE__*/_jsx(MessagingCardLayout, {
+      action: action,
+      actionButtonAccessibilityLabel: actionButtonAccessibilityLabel,
+      classNames: layoutClassNames,
+      description: description,
+      dismissButton: dismissButton,
+      dismissButtonAccessibilityLabel: dismissButtonAccessibilityLabel,
+      media: media,
+      mediaPlacement: mediaPlacement,
+      onActionButtonClick: onActionButtonClick,
+      onDismissButtonClick: onDismissButtonClick,
+      styles: layoutStyles,
+      tag: tag,
+      title: title,
+      type: type
+    })
+  }));
+}));

package/esm/cards/MessagingCard/index.js

@@ -1,70 +1,2 @@
-const _excluded = ["root"],
-  _excluded2 = ["root"],
-  _excluded3 = ["as", "type", "title", "description", "tag", "action", "onActionButtonClick", "actionButtonAccessibilityLabel", "onDismissButtonClick", "dismissButtonAccessibilityLabel", "mediaPlacement", "media", "dismissButton", "styles", "classNames", "className", "style"];
-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 { forwardRef, memo } from 'react';
-import { cx } from '../../cx';
-import { CardRoot } from '../CardRoot';
-import { MessagingCardLayout } from './MessagingCardLayout';
-import { jsx as _jsx } from "react/jsx-runtime";
-export const MessagingCard = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-      as,
-      type,
-      title,
-      description,
-      tag,
-      action,
-      onActionButtonClick,
-      actionButtonAccessibilityLabel,
-      onDismissButtonClick,
-      dismissButtonAccessibilityLabel,
-      mediaPlacement,
-      media,
-      dismissButton,
-      styles: {
-        root: rootStyle
-      } = {},
-      classNames: {
-        root: rootClassName
-      } = {},
-      className,
-      style
-    } = _ref,
-    layoutStyles = _objectWithoutProperties(_ref.styles, _excluded),
-    layoutClassNames = _objectWithoutProperties(_ref.classNames, _excluded2),
-    props = _objectWithoutProperties(_ref, _excluded3);
-  return /*#__PURE__*/_jsx(CardRoot, _objectSpread(_objectSpread({
-    ref: ref,
-    as: as,
-    background: type === 'upsell' ? 'bgPrimary' : 'bgAlternate',
-    borderRadius: 500,
-    borderWidth: 0,
-    className: cx(rootClassName, className),
-    overflow: "hidden",
-    style: _objectSpread(_objectSpread({}, rootStyle), style)
-  }, props), {}, {
-    children: /*#__PURE__*/_jsx(MessagingCardLayout, {
-      action: action,
-      actionButtonAccessibilityLabel: actionButtonAccessibilityLabel,
-      classNames: layoutClassNames,
-      description: description,
-      dismissButton: dismissButton,
-      dismissButtonAccessibilityLabel: dismissButtonAccessibilityLabel,
-      media: media,
-      mediaPlacement: mediaPlacement,
-      onActionButtonClick: onActionButtonClick,
-      onDismissButtonClick: onDismissButtonClick,
-      styles: layoutStyles,
-      tag: tag,
-      title: title,
-      type: type
-    })
-  }));
-}));
+export * from './MessagingCard';
+export * from './MessagingCardLayout';

package/esm/cells/ListCellFallback.js

@@ -48,10 +48,10 @@ export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_pro
     }
     return /*#__PURE__*/_jsx(TextFallback, {
       "aria-hidden": true,
+      percentage: true,
       className: classNames === null || classNames === void 0 ? void 0 : classNames.helperText,
       disableRandomRectWidth: disableRandomRectWidth,
       font: "body",
-      percentage: true,
       rectWidthVariant: getRectWidthVariant(rectWidthVariant, 4),
       style: styles === null || styles === void 0 ? void 0 : styles.helperText,
       testID: "list-cell-fallback-helper-text",
@@ -67,20 +67,20 @@ export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_pro
       flexShrink: 0,
       children: [!!detail && /*#__PURE__*/_jsx(TextFallback, {
         "aria-hidden": true,
+        percentage: true,
         className: classNames === null || classNames === void 0 ? void 0 : classNames.detail,
         disableRandomRectWidth: disableRandomRectWidth,
         font: "body",
-        percentage: true,
         rectWidthVariant: getRectWidthVariant(rectWidthVariant, 0),
         style: styles === null || styles === void 0 ? void 0 : styles.detail,
         testID: "list-cell-fallback-detail",
         width: 60
       }), !!subdetail && /*#__PURE__*/_jsx(TextFallback, {
         "aria-hidden": true,
+        percentage: true,
         className: classNames === null || classNames === void 0 ? void 0 : classNames.subdetail,
         disableRandomRectWidth: disableRandomRectWidth,
         font: spacingVariant === 'condensed' ? 'label2' : 'body',
-        percentage: true,
         rectWidthVariant: getRectWidthVariant(rectWidthVariant, 1),
         style: styles === null || styles === void 0 ? void 0 : styles.subdetail,
         testID: "list-cell-fallback-subdetail",
@@ -94,10 +94,10 @@ export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_pro
     }
     return /*#__PURE__*/_jsx(TextFallback, {
       "aria-hidden": true,
+      percentage: true,
       className: classNames === null || classNames === void 0 ? void 0 : classNames.title,
       disableRandomRectWidth: disableRandomRectWidth,
       font: "headline",
-      percentage: true,
       rectWidthVariant: getRectWidthVariant(rectWidthVariant, 2),
       style: styles === null || styles === void 0 ? void 0 : styles.title,
       testID: "list-cell-fallback-title",
@@ -110,10 +110,10 @@ export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_pro
     }
     return /*#__PURE__*/_jsx(TextFallback, {
       "aria-hidden": true,
+      percentage: true,
       className: classNames === null || classNames === void 0 ? void 0 : classNames.subtitle,
       disableRandomRectWidth: disableRandomRectWidth,
       font: "label1",
-      percentage: true,
       rectWidthVariant: getRectWidthVariant(rectWidthVariant, 2),
       style: styles === null || styles === void 0 ? void 0 : styles.subtitle,
       testID: "list-cell-fallback-subtitle",
@@ -126,10 +126,10 @@ export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_pro
     }
     return /*#__PURE__*/_jsx(TextFallback, {
       "aria-hidden": true,
+      percentage: true,
       className: classNames === null || classNames === void 0 ? void 0 : classNames.description,
       disableRandomRectWidth: disableRandomRectWidth,
       font: spacingVariant === 'condensed' ? 'label2' : 'body',
-      percentage: true,
       rectWidthVariant: getRectWidthVariant(rectWidthVariant, 3),
       style: styles === null || styles === void 0 ? void 0 : styles.description,
       testID: "list-cell-fallback-description",

package/esm/overlays/tooltip/Tooltip.js

@@ -7,7 +7,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 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 { tooltipPaddingX, tooltipPaddingY } from '@coinbase/cds-common/tokens/tooltip';
 import { useComponentConfig } from '../../hooks/useComponentConfig';
 import { Popover } from '../popover/Popover';
 import { TooltipContent } from './TooltipContent';
@@ -42,7 +42,7 @@ export const Tooltip = /*#__PURE__*/memo(_props => {
       closeDelay,
       background = 'bg',
       borderRadius = 200,
-      maxWidth = tooltipMaxWidth,
+      maxWidth,
       paddingX = tooltipPaddingX,
       paddingY = tooltipPaddingY,
       color = 'fg',

package/esm/overlays/tooltip/TooltipContent.js

@@ -27,7 +27,7 @@ export const TooltipContent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
       placement = 'top',
       background = 'bg',
       borderRadius = 200,
-      maxWidth = tooltipMaxWidth,
+      maxWidth,
       paddingX = tooltipPaddingX,
       paddingY = tooltipPaddingY,
       color = 'fg',
@@ -42,6 +42,8 @@ export const TooltipContent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
     padding: "var(--space-".concat(gap, ")"),
     zIndex: zIndex !== null && zIndex !== void 0 ? zIndex : zIndexTokens.tooltip
   }), [gap, zIndex]);
+  const isTextContent = typeof content === 'string';
+  const contentMaxWidth = maxWidth !== null && maxWidth !== void 0 ? maxWidth : isTextContent ? tooltipMaxWidth : undefined;
   const motionProps = useMotionProps({
     style: outerStyle,
     enterConfigs: [animateInOpacityConfig, getTranslateConfigByPlacement({
@@ -62,12 +64,13 @@ export const TooltipContent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
       "data-testid": testID,
       elevation: elevation,
       id: tooltipId,
-      maxWidth: maxWidth,
+      maxWidth: contentMaxWidth,
       paddingX: paddingX,
       paddingY: paddingY,
-      role: "tooltip"
+      role: "tooltip",
+      width: "max-content"
     }, props), {}, {
-      children: typeof content === 'string' ? /*#__PURE__*/_jsx(Text, {
+      children: isTextContent ? /*#__PURE__*/_jsx(Text, {
         className: textCss,
         color: color,
         font: font,

package/esm/typography/index.js

@@ -1,11 +1,11 @@
 export * from './Link';
 export * from './Text';
 export * from './TextBody';
-export * from './TextFallback';
 export * from './TextCaption';
 export * from './TextDisplay1';
 export * from './TextDisplay2';
 export * from './TextDisplay3';
+export * from './TextFallback';
 export * from './TextHeadline';
 export * from './TextInherited';
 export * from './TextLabel1';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web",
-  "version": "9.6.8",
+  "version": "9.6.10",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",
@@ -68,6 +68,14 @@
       "types": "./dts/cards/ContentCard/index.d.ts",
       "default": "./esm/cards/ContentCard/index.js"
     },
+    "./cards/MediaCard": {
+      "types": "./dts/cards/MediaCard/index.d.ts",
+      "default": "./esm/cards/MediaCard/index.js"
+    },
+    "./cards/MessagingCard": {
+      "types": "./dts/cards/MessagingCard/index.d.ts",
+      "default": "./esm/cards/MessagingCard/index.js"
+    },
     "./carousel": {
       "types": "./dts/carousel/index.d.ts",
       "default": "./esm/carousel/index.js"
@@ -219,7 +227,7 @@
     "react-dom": "^18.0.0 || ~19.1.2"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^9.6.8",
+    "@coinbase/cds-common": "^9.6.10",
     "@coinbase/cds-icons": "^5.21.0",
     "@coinbase/cds-illustrations": "^4.44.0",
     "@coinbase/cds-lottie-files": "^3.3.4",