@coinbase/cds-web 8.41.0 → 8.42.0

package/esm/cards/ContentCard/ContentCardBody.js

@@ -1,4 +1,4 @@
-const _excluded = ["as", "body", "label", "media", "mediaPosition", "children", "gap", "testID"];
+const _excluded = ["as", "body", "label", "media", "mediaPosition", "mediaPlacement", "title", "description", "children", "gap", "testID", "styles", "style", "classNames", "className"];
 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; }
@@ -6,11 +6,18 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 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 React, { forwardRef, memo, useMemo } from 'react';
+import { cx } from '../../cx';
 import { Box, VStack } from '../../layout';
 import { Text } from '../../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const contentCardBodyDefaultElement = 'div';
+const mapMediaPositionToMediaPlacement = {
+  top: 'top',
+  bottom: 'bottom',
+  right: 'end',
+  left: 'start'
+};
 export const ContentCardBody = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       as,
@@ -18,42 +25,92 @@ export const ContentCardBody = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref,
       label,
       media,
       mediaPosition = 'top',
+      mediaPlacement = mapMediaPositionToMediaPlacement[mediaPosition],
+      title,
+      description = body,
       children,
       gap = 1,
-      testID
+      testID,
+      styles,
+      style,
+      classNames,
+      className
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const Component = as !== null && as !== void 0 ? as : contentCardBodyDefaultElement;
-  const isHorizontal = mediaPosition === 'right' || mediaPosition === 'left';
+  const isHorizontal = mediaPlacement === 'start' || mediaPlacement === 'end';
+  const isMediaFirst = !!media && (mediaPlacement === 'top' || mediaPlacement === 'start');
+  const isMediaLast = !!media && (mediaPlacement === 'bottom' || mediaPlacement === 'end');
+  const titleNode = useMemo(() => {
+    if (typeof title === 'string') {
+      return /*#__PURE__*/_jsx(Text, {
+        as: "div",
+        font: "headline",
+        numberOfLines: 2,
+        children: title
+      });
+    }
+    return title;
+  }, [title]);
+  const descriptionNode = useMemo(() => {
+    if (typeof description === 'string') {
+      return /*#__PURE__*/_jsx(Text, {
+        as: "p",
+        color: "fgMuted",
+        font: "label2",
+        numberOfLines: 3,
+        children: description
+      });
+    }
+    return description;
+  }, [description]);
+  const labelNode = useMemo(() => {
+    if (typeof label === 'string') {
+      return /*#__PURE__*/_jsx(Text, {
+        as: "div",
+        font: "label2",
+        children: label
+      });
+    }
+    return label;
+  }, [label]);
+  const textNode = useMemo(() => {
+    if (!titleNode && !descriptionNode && !labelNode) {
+      return null;
+    }
+    return /*#__PURE__*/_jsxs(VStack, {
+      className: classNames === null || classNames === void 0 ? void 0 : classNames.textContainer,
+      gap: isHorizontal ? 1 : 0,
+      style: styles === null || styles === void 0 ? void 0 : styles.textContainer,
+      children: [titleNode, descriptionNode, labelNode]
+    });
+  }, [classNames === null || classNames === void 0 ? void 0 : classNames.textContainer, isHorizontal, styles === null || styles === void 0 ? void 0 : styles.textContainer, titleNode, descriptionNode, labelNode]);
   const mediaBox = isHorizontal ? /*#__PURE__*/_jsx(Box, {
+    borderRadius: 500,
     flexShrink: 0,
     height: 96,
+    overflow: "hidden",
     width: 96,
     children: media
-  }) : media;
+  }) : /*#__PURE__*/_jsx(Box, {
+    borderRadius: 500,
+    overflow: "hidden",
+    children: media
+  });
   return /*#__PURE__*/_jsxs(VStack, _objectSpread(_objectSpread({
     ref: ref,
     as: Component,
+    className: cx(classNames === null || classNames === void 0 ? void 0 : classNames.root, className),
     gap: gap,
+    style: _objectSpread(_objectSpread({}, style), styles === null || styles === void 0 ? void 0 : styles.root),
     testID: testID
   }, props), {}, {
-    children: [/*#__PURE__*/_jsxs(Box, {
+    children: [(mediaBox || textNode) && /*#__PURE__*/_jsxs(Box, {
       flexDirection: isHorizontal ? 'row' : 'column',
       gap: isHorizontal ? 2 : 1,
-      justifyContent: mediaPosition === 'right' ? 'space-between' : 'flex-start',
-      children: [(mediaPosition === 'top' || mediaPosition === 'left') && mediaBox, /*#__PURE__*/_jsxs(VStack, {
-        gap: 1,
-        maxWidth: "100%",
-        children: [typeof body === 'string' ? /*#__PURE__*/_jsx(Text, {
-          as: "p",
-          display: "block",
-          font: "body",
-          children: body
-        }) : body, typeof label === 'string' ? /*#__PURE__*/_jsx(Text, {
-          font: "label2",
-          children: label
-        }) : label]
-      }), (mediaPosition === 'bottom' || mediaPosition === 'right') && mediaBox]
+      justifyContent: mediaPlacement === 'end' ? 'space-between' : 'flex-start',
+      style: styles === null || styles === void 0 ? void 0 : styles.contentContainer,
+      children: [isMediaFirst && mediaBox, textNode, isMediaLast && mediaBox]
     }), children]
   }));
 }));

package/esm/cards/ContentCard/ContentCardFooter.js

@@ -1,4 +1,4 @@
-const _excluded = ["as", "testID", "children"];
+const _excluded = ["as", "children", "justifyContent"];
 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; }
@@ -9,20 +9,19 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { forwardRef, memo } from 'react';
 import { HStack } from '../../layout';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const contentCardFooterDefaultElement = 'div';
+export const contentCardFooterDefaultElement = 'footer';
 export const ContentCardFooter = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       as,
-      testID,
-      children
+      children,
+      justifyContent = 'space-between'
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const Component = as !== null && as !== void 0 ? as : contentCardFooterDefaultElement;
   return /*#__PURE__*/_jsx(HStack, _objectSpread(_objectSpread({
     ref: ref,
     as: Component,
-    justifyContent: "space-between",
-    testID: testID
+    justifyContent: justifyContent
   }, props), {}, {
     children: children
   }));

package/esm/cards/ContentCard/ContentCardHeader.js

@@ -1,4 +1,4 @@
-const _excluded = ["as", "avatar", "title", "meta", "end", "testID"];
+const _excluded = ["as", "avatar", "title", "meta", "end", "subtitle", "actions", "thumbnail", "styles", "style", "classNames", "className", "gap"];
 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; }
@@ -6,12 +6,13 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 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 { HStack } from '../../layout';
+import React, { forwardRef, memo, useMemo } from 'react';
+import { cx } from '../../cx';
+import { HStack, VStack } from '../../layout';
 import { Avatar } from '../../media';
 import { Text } from '../../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const contentCardHeaderDefaultElement = 'div';
+export const contentCardHeaderDefaultElement = 'header';
 export const ContentCardHeader = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       as,
@@ -19,39 +20,76 @@ export const ContentCardHeader = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref
       title,
       meta,
       end,
-      testID
+      subtitle = meta,
+      actions = end,
+      thumbnail,
+      styles,
+      style,
+      classNames,
+      className,
+      gap = 1.5
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const Component = as !== null && as !== void 0 ? as : contentCardHeaderDefaultElement;
+  const titleNode = useMemo(() => {
+    if (typeof title === 'string') {
+      return /*#__PURE__*/_jsx(Text, {
+        as: "div",
+        font: "label1",
+        numberOfLines: 1,
+        children: title
+      });
+    }
+    return title;
+  }, [title]);
+  const subtitleNode = useMemo(() => {
+    if (typeof subtitle === 'string') {
+      return /*#__PURE__*/_jsx(Text, {
+        as: "div",
+        color: "fgMuted",
+        font: "legal",
+        numberOfLines: 1,
+        children: subtitle
+      });
+    }
+    return subtitle;
+  }, [subtitle]);
+  const thumbnailNode = useMemo(() => {
+    // Use new thumbnail prop if provided
+    if (thumbnail) return thumbnail;
+    // Fallback to deprecated avatar prop (supports string for backward compatibility)
+    if (typeof avatar === 'string') {
+      return /*#__PURE__*/_jsx(Avatar, {
+        alt: typeof title === 'string' ? title : undefined,
+        name: typeof title === 'string' ? title : undefined,
+        shape: "circle",
+        size: "l",
+        src: avatar
+      });
+    }
+    return avatar;
+  }, [thumbnail, avatar, title]);
   return /*#__PURE__*/_jsxs(HStack, _objectSpread(_objectSpread({
     ref: ref,
     alignItems: "center",
     as: Component,
+    className: cx(classNames === null || classNames === void 0 ? void 0 : classNames.root, className),
+    gap: gap,
     justifyContent: "space-between",
-    marginEnd: -1,
-    testID: testID
+    style: _objectSpread(_objectSpread({}, style), styles === null || styles === void 0 ? void 0 : styles.root)
   }, props), {}, {
     children: [/*#__PURE__*/_jsxs(HStack, {
       alignItems: "center",
-      gap: 1,
-      children: [typeof avatar === 'string' ? /*#__PURE__*/_jsx(Avatar, {
-        alt: typeof title === 'string' ? title : undefined,
-        name: typeof title === 'string' ? title : undefined,
-        shape: "circle",
-        size: "l",
-        src: avatar
-      }) : avatar, typeof title === 'string' ? /*#__PURE__*/_jsx(Text, {
-        as: "h3",
-        display: "block",
-        font: "label1",
-        numberOfLines: 1,
-        children: title
-      }) : title, typeof meta === 'string' ? /*#__PURE__*/_jsx(Text, {
-        color: "fgMuted",
-        font: "label2",
-        numberOfLines: 1,
-        children: meta
-      }) : meta]
-    }), end]
+      className: classNames === null || classNames === void 0 ? void 0 : classNames.contentContainer,
+      gap: 1.5,
+      style: styles === null || styles === void 0 ? void 0 : styles.contentContainer,
+      children: [thumbnailNode, /*#__PURE__*/_jsxs(VStack, {
+        className: classNames === null || classNames === void 0 ? void 0 : classNames.textContainer,
+        flexGrow: 1,
+        justifyContent: "flex-start",
+        style: styles === null || styles === void 0 ? void 0 : styles.textContainer,
+        children: [titleNode, subtitleNode]
+      })]
+    }), actions]
   }));
 }));

package/esm/cards/DataCard.js

@@ -6,6 +6,41 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 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; }
+/**
+ * @deprecated This component is deprecated. Please use the alpha `DataCard` from `@coinbase/cds-web/alpha/data-card` instead.
+ *
+ * ### Migration Guide
+ *
+ * The new `DataCard` provides more flexibility with custom layouts and visualization components.
+ *
+ * **Before:**
+ * ```jsx
+ * <DataCard
+ *   title="Progress"
+ *   description="45% complete"
+ *   progress={0.45}
+ *   progressVariant="bar"
+ *   startLabel="0"
+ *   endLabel="45"
+ * />
+ * ```
+ *
+ * **After:**
+ * ```jsx
+ * import { DataCard } from '@coinbase/cds-web/alpha/data-card';
+ *
+ * <DataCard
+ *   title="Progress"
+ *   subtitle="45% complete"
+ *   layout="vertical"
+ *   thumbnail={<RemoteImage src={assetUrl} shape="circle" size="l" />}
+ * >
+ *   <ProgressBarWithFixedLabels startLabel={0} endLabel={45} labelPlacement="below">
+ *     <ProgressBar accessibilityLabel="45% complete" progress={0.45} weight="semiheavy" />
+ *   </ProgressBarWithFixedLabels>
+ * </DataCard>
+ * ```
+ */
 import React, { memo, useMemo } from 'react';
 import { defaultMediaSize } from '@coinbase/cds-common/tokens/card';
 import { gutter } from '@coinbase/cds-common/tokens/sizing';

package/esm/cards/FeatureEntryCard.js

@@ -10,9 +10,9 @@ import React, { memo } from 'react';
 import { Card } from './Card';
 import { CardBody } from './CardBody';
 
-/** @deprecated will be removed in v7.0.0 use NudgeCard or UpsellCard instead */
+/** @deprecated Use MessagingCard instead. FeatureEntryCard will be removed in a future major release. */
 import { jsx as _jsx } from "react/jsx-runtime";
-/** @deprecated This component will be removed in a future version. Use NudgeCard or UpsellCard instead. */
+/** @deprecated Use MessagingCard instead. FeatureEntryCard will be removed in a future major release. */
 export const FeatureEntryCard = /*#__PURE__*/memo(function FeatureEntryCard(_ref) {
   let {
       onClick,

package/esm/cards/FloatingAssetCard.js

@@ -17,6 +17,32 @@ export const floatingAssetCardLargeWidth = 359;
 export const floatingAssetCardSmallDimension = 156;
 const pressCss = "pressCss-plkgnmc";
 const focusRingCss = "focusRingCss-fqgx809";
+
+/**
+ * @deprecated Use `MediaCard` instead. FloatingAssetCard will be removed in a future major release.
+ *
+ * Migration guide:
+ * ```tsx
+ * // Before
+ * <FloatingAssetCard
+ *   title="Asset Title"
+ *   subtitle="Subtitle"
+ *   description="Description"
+ *   media={<RemoteImage ... />}
+ * />
+ *
+ * // After
+ * <MediaCard
+ *   title="Asset Title"
+ *   subtitle="Subtitle"
+ *   description="Description"
+ *   thumbnail={<RemoteImage ... />}
+ * />
+ * ```
+ *
+ * Note: The floating variation (media outside the card container) is no longer supported.
+ * MediaCard provides a contained layout with media placement options (start/end).
+ */
 export const FloatingAssetCard = _ref => {
   let {
       className,

package/esm/cards/MediaCard/MediaCardLayout.js

@@ -0,0 +1,77 @@
+import React, { memo, useMemo } from 'react';
+import { Box } from '../../layout';
+import { HStack } from '../../layout/HStack';
+import { VStack } from '../../layout/VStack';
+import { Text } from '../../typography/Text';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const MediaCardLayout = /*#__PURE__*/memo(_ref => {
+  let {
+    title,
+    subtitle,
+    description,
+    thumbnail,
+    media,
+    mediaPlacement = 'end',
+    classNames = {},
+    styles = {}
+  } = _ref;
+  const titleNode = useMemo(() => {
+    if (typeof title === 'string') {
+      return /*#__PURE__*/_jsx(Text, {
+        as: "div",
+        font: "headline",
+        numberOfLines: 2,
+        children: title
+      });
+    }
+    return title;
+  }, [title]);
+  const subtitleNode = useMemo(() => typeof subtitle === 'string' ? /*#__PURE__*/_jsx(Text, {
+    as: "div",
+    color: "fgMuted",
+    font: "legal",
+    numberOfLines: 1,
+    children: subtitle
+  }) : subtitle, [subtitle]);
+  const headerNode = useMemo(() => /*#__PURE__*/_jsxs(VStack, {
+    className: classNames === null || classNames === void 0 ? void 0 : classNames.headerContainer,
+    style: styles === null || styles === void 0 ? void 0 : styles.headerContainer,
+    children: [subtitleNode, titleNode]
+  }), [subtitleNode, titleNode, styles === null || styles === void 0 ? void 0 : styles.headerContainer, classNames === null || classNames === void 0 ? void 0 : classNames.headerContainer]);
+  const descriptionNode = useMemo(() => typeof description === 'string' ? /*#__PURE__*/_jsx(Text, {
+    as: "p",
+    color: "fgMuted",
+    font: "label2",
+    numberOfLines: 2,
+    children: description
+  }) : description, [description]);
+  const contentNode = useMemo(() => /*#__PURE__*/_jsxs(VStack, {
+    className: classNames === null || classNames === void 0 ? void 0 : classNames.contentContainer,
+    flexBasis: "50%",
+    gap: 4,
+    justifyContent: "space-between",
+    padding: 2,
+    style: styles === null || styles === void 0 ? void 0 : styles.contentContainer,
+    children: [thumbnail, /*#__PURE__*/_jsxs(VStack, {
+      className: classNames === null || classNames === void 0 ? void 0 : classNames.textContainer,
+      style: styles === null || styles === void 0 ? void 0 : styles.textContainer,
+      children: [headerNode, descriptionNode]
+    })]
+  }), [thumbnail, headerNode, descriptionNode, styles === null || styles === void 0 ? void 0 : styles.contentContainer, classNames === null || classNames === void 0 ? void 0 : classNames.contentContainer, classNames === null || classNames === void 0 ? void 0 : classNames.textContainer, styles === null || styles === void 0 ? void 0 : styles.textContainer]);
+  const mediaNode = useMemo(() => {
+    if (media) {
+      return /*#__PURE__*/_jsx(Box, {
+        className: classNames === null || classNames === void 0 ? void 0 : classNames.mediaContainer,
+        flexBasis: "50%",
+        style: styles === null || styles === void 0 ? void 0 : styles.mediaContainer,
+        children: media
+      });
+    }
+  }, [media, styles === null || styles === void 0 ? void 0 : styles.mediaContainer, classNames === null || classNames === void 0 ? void 0 : classNames.mediaContainer]);
+  return /*#__PURE__*/_jsxs(HStack, {
+    className: classNames === null || classNames === void 0 ? void 0 : classNames.layoutContainer,
+    flexGrow: 1,
+    style: styles === null || styles === void 0 ? void 0 : styles.layoutContainer,
+    children: [mediaPlacement === 'start' ? mediaNode : contentNode, mediaPlacement === 'end' ? mediaNode : contentNode]
+  });
+});

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
+    })
+  }));
+}));