@coinbase/cds-web 8.40.2 → 8.42.0

package/esm/cards/MediaCard/__figma__/MediaCard.figma.js

@@ -0,0 +1,46 @@
+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 _objectDestructuringEmpty(t) { if (null == t) throw new TypeError("Cannot destructure " + t); }
+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 from 'react';
+import { figma } from '@figma/code-connect';
+import { Avatar } from '../../../media';
+import { MediaCard } from '../';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(MediaCard, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=72941-18302&m=dev', {
+  imports: ["import { MediaCard } from '@coinbase/cds-web/cards/MediaCard'", "import { Avatar } from '@coinbase/cds-web/media/Avatar'"],
+  props: {
+    title: figma.string('title'),
+    subtitle: figma.boolean('show subtitle', {
+      true: figma.string('↳ subtitle'),
+      false: undefined
+    }),
+    description: figma.boolean('show subdetail', {
+      true: figma.instance('↳ subdetail'),
+      false: undefined
+    }),
+    media: figma.boolean('show media', {
+      true: figma.instance('↳ media'),
+      false: undefined
+    }),
+    mediaPlacement: figma.enum('media placement', {
+      left: 'start',
+      right: 'end',
+      none: undefined
+    })
+  },
+  example: _ref => {
+    let props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+    return /*#__PURE__*/_jsx(MediaCard, _objectSpread({
+      thumbnail: /*#__PURE__*/_jsx(Avatar, {
+        alt: "",
+        shape: "circle",
+        size: "l",
+        src: ""
+      })
+    }, props));
+  }
+});

package/esm/cards/MediaCard/index.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/MessagingCard/MessagingCardLayout.js

@@ -0,0 +1,195 @@
+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); }
+import { memo, useMemo } from 'react';
+import { Button } from '../../buttons/Button';
+import { IconButton } from '../../buttons/IconButton';
+import { Box, VStack } from '../../layout';
+import { HStack } from '../../layout/HStack';
+import { Pressable } from '../../system/Pressable';
+import { Tag } from '../../tag/Tag';
+import { Text } from '../../typography/Text';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const MessagingCardLayout = /*#__PURE__*/memo(_ref => {
+  let {
+    type,
+    title,
+    description,
+    tag,
+    action,
+    onActionButtonClick,
+    actionButtonAccessibilityLabel,
+    onDismissButtonClick,
+    dismissButtonAccessibilityLabel,
+    mediaPlacement = 'end',
+    media,
+    styles = {},
+    classNames = {},
+    dismissButton
+  } = _ref;
+  const titleNode = useMemo(() => {
+    if (typeof title === 'string') {
+      return /*#__PURE__*/_jsx(Text, {
+        as: "div",
+        color: type === 'upsell' ? 'fgInverse' : 'fg',
+        font: "headline",
+        numberOfLines: 2,
+        children: title
+      });
+    }
+    return title;
+  }, [title, type]);
+  const descriptionNode = useMemo(() => {
+    if (typeof description === 'string') {
+      return /*#__PURE__*/_jsx(Text, {
+        as: "p",
+        color: type === 'upsell' ? 'fgInverse' : 'fg',
+        font: "label2",
+        numberOfLines: 3,
+        children: description
+      });
+    }
+    return description;
+  }, [description, type]);
+  const tagNode = useMemo(() => {
+    if (typeof tag === 'string') {
+      return /*#__PURE__*/_jsx(Tag, {
+        children: tag
+      });
+    }
+    return tag;
+  }, [tag]);
+  const actionButtonNode = useMemo(() => {
+    if (!action) return null;
+
+    // If action is a string, render in a default button
+    if (typeof action === 'string') {
+      const handleActionClick = event => {
+        event.preventDefault();
+        event.stopPropagation();
+        onActionButtonClick === null || onActionButtonClick === void 0 || onActionButtonClick(event);
+      };
+      if (type === 'upsell') {
+        return /*#__PURE__*/_jsx(Button, {
+          compact: true,
+          accessibilityLabel: actionButtonAccessibilityLabel !== null && actionButtonAccessibilityLabel !== void 0 ? actionButtonAccessibilityLabel : action,
+          onClick: handleActionClick,
+          variant: "secondary",
+          children: action
+        });
+      }
+      return /*#__PURE__*/_jsx(Pressable, {
+        accessibilityLabel: actionButtonAccessibilityLabel !== null && actionButtonAccessibilityLabel !== void 0 ? actionButtonAccessibilityLabel : action,
+        background: "transparent",
+        onClick: handleActionClick,
+        paddingY: 1,
+        children: /*#__PURE__*/_jsx(Text, {
+          color: "fgPrimary",
+          font: "headline",
+          children: action
+        })
+      });
+    }
+
+    // Otherwise, render action as-is (custom React element)
+    return action;
+  }, [action, actionButtonAccessibilityLabel, onActionButtonClick, type]);
+  const computedDismissButtonAccessibilityLabel = useMemo(() => {
+    if (dismissButtonAccessibilityLabel) return dismissButtonAccessibilityLabel;
+    if (typeof title === 'string') return "Dismiss ".concat(title);
+    return 'Dismiss card';
+  }, [dismissButtonAccessibilityLabel, title]);
+  const dismissButtonNode = useMemo(() => {
+    if (dismissButton) {
+      return dismissButton;
+    }
+    if (onDismissButtonClick) {
+      const handleDismiss = event => {
+        event.preventDefault();
+        event.stopPropagation();
+        onDismissButtonClick(event);
+      };
+      return /*#__PURE__*/_jsx(HStack, {
+        className: classNames === null || classNames === void 0 ? void 0 : classNames.dismissButtonContainer,
+        paddingEnd: 1,
+        paddingTop: 1,
+        position: "absolute",
+        right: 0,
+        style: styles === null || styles === void 0 ? void 0 : styles.dismissButtonContainer,
+        top: 0,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          compact: true,
+          accessibilityLabel: computedDismissButtonAccessibilityLabel,
+          name: "close",
+          onClick: handleDismiss,
+          variant: "secondary"
+        })
+      });
+    }
+    return null;
+  }, [classNames === null || classNames === void 0 ? void 0 : classNames.dismissButtonContainer, computedDismissButtonAccessibilityLabel, dismissButton, onDismissButtonClick, styles === null || styles === void 0 ? void 0 : styles.dismissButtonContainer]);
+  const contentContainerPaddingProps = useMemo(() => {
+    if (mediaPlacement === 'start' && dismissButtonNode) {
+      // needs to add additional padding to the end of the content area when media is placed at the start and there is a dismiss button
+      // this is to avoid dismiss button from overlapping with the content area
+      return {
+        paddingY: 2,
+        paddingStart: 2,
+        paddingEnd: 6
+      };
+    }
+    return {
+      padding: 2
+    };
+  }, [dismissButtonNode, mediaPlacement]);
+  const mediaContainerPaddingProps = useMemo(() => {
+    if (type === 'upsell') return;
+    if (mediaPlacement === 'start') {
+      return {
+        paddingStart: 3,
+        paddingEnd: 1
+      };
+    }
+    // when media is placed at the end, we need to add additional padding to the end of the media container
+    // this is to avoid the dismiss button from overlapping with the media
+    return dismissButtonNode ? {
+      paddingStart: 1,
+      paddingEnd: 6
+    } : {
+      paddingStart: 1,
+      paddingEnd: 3
+    };
+  }, [dismissButtonNode, mediaPlacement, type]);
+  return /*#__PURE__*/_jsxs(HStack, {
+    alignItems: "stretch",
+    className: classNames === null || classNames === void 0 ? void 0 : classNames.layoutContainer,
+    flexDirection: mediaPlacement === 'start' ? 'row-reverse' : 'row',
+    flexGrow: 1,
+    position: "relative",
+    style: styles === null || styles === void 0 ? void 0 : styles.layoutContainer,
+    children: [/*#__PURE__*/_jsxs(VStack, _objectSpread(_objectSpread({
+      alignItems: "flex-start",
+      className: classNames === null || classNames === void 0 ? void 0 : classNames.contentContainer,
+      flexGrow: 1,
+      gap: 2,
+      style: styles === null || styles === void 0 ? void 0 : styles.contentContainer
+    }, contentContainerPaddingProps), {}, {
+      children: [/*#__PURE__*/_jsxs(VStack, {
+        alignItems: "flex-start",
+        className: classNames === null || classNames === void 0 ? void 0 : classNames.textContainer,
+        gap: 0.5,
+        style: styles === null || styles === void 0 ? void 0 : styles.textContainer,
+        children: [tagNode, titleNode, descriptionNode]
+      }), actionButtonNode]
+    })), /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({
+      alignItems: "center",
+      className: classNames === null || classNames === void 0 ? void 0 : classNames.mediaContainer,
+      flexShrink: 0,
+      style: styles === null || styles === void 0 ? void 0 : styles.mediaContainer
+    }, mediaContainerPaddingProps), {}, {
+      children: media
+    })), dismissButtonNode]
+  });
+});

package/esm/cards/MessagingCard/__figma__/MessagingCard.figma.js

@@ -0,0 +1,49 @@
+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 _objectDestructuringEmpty(t) { if (null == t) throw new TypeError("Cannot destructure " + t); }
+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 from 'react';
+import { figma } from '@figma/code-connect';
+import { MessagingCard } from '../';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(MessagingCard, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=72941-20711&m=dev', {
+  imports: ["import { MessagingCard } from '@coinbase/cds-web/cards/MessagingCard'"],
+  props: {
+    type: figma.enum('type', {
+      upsell: 'upsell',
+      nudge: 'nudge'
+    }),
+    title: figma.boolean('show title', {
+      true: figma.string('↳ title'),
+      false: undefined
+    }),
+    description: figma.boolean('show subtitle', {
+      true: figma.string('↳ subtitle'),
+      false: undefined
+    }),
+    tag: figma.boolean('show tag', {
+      true: figma.instance('↳ tag'),
+      false: undefined
+    }),
+    action: figma.boolean('show cta', {
+      true: figma.instance('↳ cta'),
+      false: undefined
+    }),
+    media: figma.instance('media'),
+    mediaPlacement: figma.enum('media placement', {
+      left: 'start',
+      right: 'end'
+    }),
+    onDismissButtonClick: figma.boolean('show dismiss', {
+      true: () => {},
+      false: undefined
+    })
+  },
+  example: _ref => {
+    let props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+    return /*#__PURE__*/_jsx(MessagingCard, _objectSpread({}, props));
+  }
+});

package/esm/cards/MessagingCard/index.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/NudgeCard.js

@@ -44,6 +44,33 @@ const getCardBodyPaddingProps = _ref => {
     paddingEnd: (_ref14 = (_ref15 = paddingEnd !== null && paddingEnd !== void 0 ? paddingEnd : paddingX) !== null && _ref15 !== void 0 ? _ref15 : padding) !== null && _ref14 !== void 0 ? _ref14 : 3
   };
 };
+/**
+ * @deprecated Use `MessagingCard` with `type="nudge"` instead. NudgeCard will be removed in a future major release.
+ *
+ * Migration guide:
+ * ```tsx
+ * // Before
+ * <NudgeCard
+ *   title="Title"
+ *   description="Description"
+ *   pictogram="addToWatchlist"
+ *   action="Learn more"
+ *   onActionPress={handleAction}
+ *   onDismissPress={handleDismiss}
+ * />
+ *
+ * // After
+ * <MessagingCard
+ *   type="nudge"
+ *   title="Title"
+ *   description="Description"
+ *   media={<Pictogram dimension="48x48" name="addToWatchlist" />}
+ *   actions={<Button compact variant="secondary">Learn more</Button>}
+ *   onDismiss={handleDismiss}
+ *   mediaPlacement="end"
+ * />
+ * ```
+ */
 export const NudgeCard = _ref16 => {
   let {
       title,

package/esm/cards/UpsellCard.js

@@ -5,6 +5,33 @@ import { HStack, VStack } from '../layout';
 import { Pressable } from '../system';
 import { Text } from '../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @deprecated Use `MessagingCard` with `type="upsell"` instead. UpsellCard will be removed in a future major release.
+ *
+ * Migration guide:
+ * ```tsx
+ * // Before
+ * <UpsellCard
+ *   title="Title"
+ *   description="Description"
+ *   media={<RemoteImage ... />}
+ *   action="Get Started"
+ *   onActionPress={handleAction}
+ *   onDismissPress={handleDismiss}
+ * />
+ *
+ * // After
+ * <MessagingCard
+ *   type="upsell"
+ *   title="Title"
+ *   description="Description"
+ *   media={<RemoteImage ... />}
+ *   actions={<Button compact variant="secondary">Get Started</Button>}
+ *   onDismiss={handleDismiss}
+ *   mediaPlacement="end"
+ * />
+ * ```
+ */
 export const UpsellCard = /*#__PURE__*/memo(_ref => {
   let {
     title,

package/esm/cards/index.js

@@ -4,6 +4,7 @@ export * from './CardFooter';
 export * from './CardGroup';
 export * from './CardHeader';
 export * from './CardMedia';
+export * from './CardRoot';
 // Card variants
 export * from './AnnouncementCard';
 export * from './FeatureEntryCard';
@@ -14,4 +15,8 @@ export * from './FloatingAssetCard';
 export * from './NudgeCard';
 export * from './UpsellCard';
 // Phoenix cards
-export * from './ContentCard';
+export * from './ContentCard';
+// Media card
+export * from './MediaCard';
+// Messaging card
+export * from './MessagingCard';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web",
-  "version": "8.40.2",
+  "version": "8.42.0",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",
@@ -32,6 +32,10 @@
       "types": "./dts/alpha/combobox/index.d.ts",
       "default": "./esm/alpha/combobox/index.js"
     },
+    "./alpha/data-card": {
+      "types": "./dts/alpha/data-card/index.d.ts",
+      "default": "./esm/alpha/data-card/index.js"
+    },
     "./alpha/select": {
       "types": "./dts/alpha/select/index.d.ts",
       "default": "./esm/alpha/select/index.js"
@@ -203,9 +207,9 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.40.2",
+    "@coinbase/cds-common": "^8.42.0",
     "@coinbase/cds-icons": "^5.10.0",
-    "@coinbase/cds-illustrations": "^4.30.0",
+    "@coinbase/cds-illustrations": "^4.31.0",
     "@coinbase/cds-lottie-files": "^3.3.4",
     "@coinbase/cds-utils": "^2.3.5",
     "@floating-ui/react-dom": "^2.1.1",

package/dts/cards/CardRemoteImage.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import type { CardRemoteImageProps } from '@coinbase/cds-common/types';
-export type { CardRemoteImageProps };
-/**
- * @deprecated render a <RemoteImage resizeMode="cover" {...props} /> instead
- */
-export declare const CardRemoteImage: React.NamedExoticComponent<CardRemoteImageProps>;
-//# sourceMappingURL=CardRemoteImage.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"CardRemoteImage.d.ts","sourceRoot":"","sources":["../../src/cards/CardRemoteImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAIvE,YAAY,EAAE,oBAAoB,EAAE,CAAC;AAErC;;GAEG;AACH,eAAO,MAAM,eAAe,kDAM1B,CAAC"}