@coinbase/cds-mobile 0.0.0 → 8.13.2

package/esm/cards/CardMedia.js

@@ -0,0 +1,48 @@
+const _excluded = ["placement"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { memo } from 'react';
+import { defaultMediaDimension, defaultMediaSize, defaultPictogramMediaDimension } from '@coinbase/cds-common/tokens/card';
+import { Pictogram, SpotSquare } from '../illustrations';
+import { CardRemoteImage } from './CardRemoteImage';
+import { jsx as _jsx } from "react/jsx-runtime";
+const imageProps = {
+  start: {
+    width: '50%',
+    height: '100%'
+  },
+  above: {
+    width: '100%',
+    aspectRatio: [2, 1]
+  },
+  end: defaultMediaSize
+};
+export const CardMedia = /*#__PURE__*/memo(function CardMedia(_ref) {
+  var _props$alt;
+  let {
+      placement = 'end'
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  switch (props.type) {
+    case 'spotSquare':
+      return /*#__PURE__*/_jsx(SpotSquare, _extends({}, props, {
+        dimension: defaultMediaDimension,
+        name: props.name,
+        testID: props.testID
+      }));
+    case 'pictogram':
+      return /*#__PURE__*/_jsx(Pictogram, _extends({}, props, {
+        dimension: defaultPictogramMediaDimension,
+        name: props.name,
+        testID: props.testID
+      }));
+    case 'image':
+      return /*#__PURE__*/_jsx(CardRemoteImage, _extends({
+        alt: (_props$alt = props.alt) != null ? _props$alt : '',
+        src: props.src,
+        testID: props.testID
+      }, imageProps[placement]));
+    default:
+      return null;
+  }
+});

package/esm/cards/CardRemoteImage.js

@@ -0,0 +1,18 @@
+const _excluded = ["src"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { memo, useMemo } from 'react';
+import { getSource, RemoteImage } from '../media/RemoteImage';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const CardRemoteImage = /*#__PURE__*/memo(function CardRemoteImage(_ref) {
+  let {
+      src
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const source = useMemo(() => getSource(src), [src]);
+  return /*#__PURE__*/_jsx(RemoteImage, _extends({}, props, {
+    resizeMode: "cover",
+    source: source
+  }));
+});
+CardRemoteImage.displayName = 'CardRemoteImage';

package/esm/cards/ContainedAssetCard.js

@@ -0,0 +1,78 @@
+import React, { memo, useMemo } from 'react';
+import { containedAssetCardLargeDimension, containedAssetCardLargeWidth, containedAssetCardSmallDimension } from '@coinbase/cds-common/tokens/card';
+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";
+export const ContainedAssetCard = /*#__PURE__*/memo(_ref => {
+  let {
+    title,
+    description,
+    subtitle,
+    header,
+    testID = 'contained-asset-card',
+    size = 's',
+    children,
+    onPress,
+    maxWidth: propMaxWidth,
+    minWidth: propMinWidth
+  } = _ref;
+  const maxWidth = useMemo(() => propMaxWidth || (size === 'l' ? containedAssetCardLargeWidth : containedAssetCardSmallDimension), [size, propMaxWidth]);
+  const minWidth = useMemo(() => propMinWidth || (size === 'l' ? containedAssetCardLargeDimension : containedAssetCardSmallDimension), [size, propMinWidth]);
+  const pressableStyles = useMemo(() => {
+    return {
+      minWidth,
+      maxWidth
+    };
+  }, [maxWidth, minWidth]);
+  const content = /*#__PURE__*/_jsxs(HStack, {
+    background: "bgAlternate",
+    borderRadius: 500,
+    height: containedAssetCardSmallDimension,
+    maxWidth: maxWidth,
+    minWidth: minWidth,
+    overflow: "hidden",
+    testID: onPress ? undefined : testID,
+    width: "100%",
+    children: [/*#__PURE__*/_jsxs(VStack, {
+      alignContent: "center",
+      gap: 1,
+      height: "100%",
+      justifyContent: "space-between",
+      padding: 2,
+      width: size === 'l' ? '50%' : '100%',
+      children: [/*#__PURE__*/_jsx(HStack, {
+        children: header
+      }), /*#__PURE__*/_jsxs(VStack, {
+        gap: 0.5,
+        children: [typeof subtitle === 'string' ? /*#__PURE__*/_jsx(Text, {
+          color: "fgMuted",
+          font: "legal",
+          numberOfLines: 1,
+          children: subtitle
+        }) : subtitle, typeof title === 'string' ? /*#__PURE__*/_jsx(Text, {
+          font: "headline",
+          numberOfLines: 1,
+          children: title
+        }) : title, typeof description === 'string' ? /*#__PURE__*/_jsx(Text, {
+          color: "fgMuted",
+          font: "label2",
+          numberOfLines: 1,
+          children: description
+        }) : description]
+      })]
+    }), size === 'l' && /*#__PURE__*/_jsx(VStack, {
+      width: "50%",
+      children: children
+    })]
+  });
+  return onPress ? /*#__PURE__*/_jsx(Pressable, {
+    accessibilityRole: "button",
+    background: "transparent",
+    borderRadius: 500,
+    onPress: onPress,
+    style: pressableStyles,
+    testID: testID,
+    children: content
+  }) : content;
+});

package/esm/cards/ContentCard/ContentCard.js

@@ -0,0 +1,29 @@
+const _excluded = ["testID", "children", "maxWidth", "minWidth", "paddingX", "paddingY"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { forwardRef, memo } from 'react';
+import { contentCardMaxWidth, contentCardMinWidth } from '@coinbase/cds-common/tokens/card';
+import { VStack } from '../../layout';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ContentCard = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function ContentCard(_ref, ref) {
+  let {
+      testID,
+      children,
+      maxWidth = contentCardMaxWidth,
+      minWidth = contentCardMinWidth,
+      paddingX = 3,
+      paddingY = 2
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/_jsx(VStack, _extends({
+    ref: ref,
+    gap: 1,
+    maxWidth: maxWidth,
+    minWidth: minWidth,
+    paddingX: paddingX,
+    paddingY: paddingY,
+    testID: testID
+  }, props, {
+    children: children
+  }));
+}));

package/esm/cards/ContentCard/ContentCardBody.js

@@ -0,0 +1,47 @@
+const _excluded = ["body", "label", "media", "mediaPosition", "children", "testID"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { forwardRef, memo } from 'react';
+import { Box, VStack } from '../../layout';
+import { Text } from '../../typography/Text';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const ContentCardBody = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function ContentCardBody(_ref, ref) {
+  let {
+      body,
+      label,
+      media,
+      mediaPosition = 'top',
+      children,
+      testID
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const isHorizontal = mediaPosition === 'right' || mediaPosition === 'left';
+  const mediaBox = isHorizontal ? /*#__PURE__*/_jsx(Box, {
+    flexShrink: 0,
+    height: 96,
+    width: 96,
+    children: media
+  }) : media;
+  return /*#__PURE__*/_jsxs(VStack, _extends({
+    ref: ref,
+    gap: 1,
+    testID: testID
+  }, props, {
+    children: [/*#__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: isHorizontal ? '70%' : '100%',
+        children: [typeof body === 'string' ? /*#__PURE__*/_jsx(Text, {
+          font: "body",
+          children: body
+        }) : body, typeof label === 'string' ? /*#__PURE__*/_jsx(Text, {
+          font: "label2",
+          children: label
+        }) : label]
+      }), (mediaPosition === 'bottom' || mediaPosition === 'right') && mediaBox]
+    }), children]
+  }));
+}));

package/esm/cards/ContentCard/ContentCardFooter.js

@@ -0,0 +1,20 @@
+const _excluded = ["testID", "children"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { forwardRef, memo } from 'react';
+import { HStack } from '../../layout';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ContentCardFooter = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      testID,
+      children
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/_jsx(HStack, _extends({
+    ref: ref,
+    justifyContent: "space-between",
+    testID: testID
+  }, props, {
+    children: children
+  }));
+}));

package/esm/cards/ContentCard/ContentCardHeader.js

@@ -0,0 +1,46 @@
+const _excluded = ["avatar", "title", "meta", "end", "testID"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { forwardRef, memo } from 'react';
+import { HStack } from '../../layout';
+import { Avatar } from '../../media';
+import { Text } from '../../typography/Text';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const ContentCardHeader = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function ContentCardHeader(_ref, ref) {
+  let {
+      avatar,
+      title,
+      meta,
+      end,
+      testID
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/_jsxs(HStack, _extends({
+    ref: ref,
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginEnd: -1,
+    testID: testID
+  }, props, {
+    children: [/*#__PURE__*/_jsxs(HStack, {
+      alignItems: "center",
+      gap: 1,
+      children: [typeof avatar === 'string' ? /*#__PURE__*/_jsx(Avatar, {
+        accessibilityLabel: title,
+        name: title,
+        shape: "circle",
+        size: "l",
+        src: avatar
+      }) : avatar, typeof title === 'string' ? /*#__PURE__*/_jsx(Text, {
+        font: "label1",
+        numberOfLines: 1,
+        children: title
+      }) : title, typeof meta === 'string' ? /*#__PURE__*/_jsx(Text, {
+        color: "fgMuted",
+        font: "label2",
+        numberOfLines: 1,
+        children: meta
+      }) : meta]
+    }), end]
+  }));
+}));

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

@@ -0,0 +1,32 @@
+const _excluded = ["header", "footer", "body"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React from 'react';
+import { figma } from '@figma/code-connect';
+import { ContentCard } from '../ContentCard';
+import { jsxs as _jsxs } from "react/jsx-runtime";
+figma.connect(ContentCard, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=14705%3A22920', {
+  imports: ["import { ContentCard } from '@coinbase/cds-mobile/cards/ContentCard/ContentCard';"],
+  props: {
+    header: figma.boolean('show card header', {
+      true: figma.children('.📦 ContentCardHeader'),
+      false: undefined
+    }),
+    body: figma.children('.📦 ContentCardBody'),
+    footer: figma.boolean('show card footer', {
+      true: figma.children('.📦 ContentCardFooter'),
+      false: undefined
+    })
+  },
+  example: _ref => {
+    let {
+        header,
+        footer,
+        body
+      } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    return /*#__PURE__*/_jsxs(ContentCard, _extends({}, props, {
+      children: [header, body, footer]
+    }));
+  }
+});

package/esm/cards/ContentCard/__figma__/ContentCardBody.figma.js

@@ -0,0 +1,39 @@
+const _excluded = ["children"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React from 'react';
+import { Image } from 'react-native';
+import { figma } from '@figma/code-connect';
+import { ContentCardBody } from '../ContentCardBody';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(ContentCardBody, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=14705-24336', {
+  imports: ["import { ContentCardBody } from '@coinbase/cds-mobile/cards/ContentCard/ContentCardBody';"],
+  props: {
+    body: figma.string('body'),
+    label: figma.string('label'),
+    children: figma.enum('type', {
+      custom: figma.children('*')
+    }),
+    media: figma.enum('type', {
+      'image right': /*#__PURE__*/_jsx(Image, {}),
+      'image top': /*#__PURE__*/_jsx(Image, {}),
+      'image bottom': /*#__PURE__*/_jsx(Image, {}),
+      'image left': /*#__PURE__*/_jsx(Image, {})
+    }),
+    mediaPosition: figma.enum('type', {
+      'image right': 'right',
+      'image top': 'top',
+      'image bottom': 'bottom',
+      'image left': 'left'
+    })
+  },
+  example: _ref => {
+    let {
+        children
+      } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    return /*#__PURE__*/_jsx(ContentCardBody, _extends({}, props, {
+      children: children
+    }));
+  }
+});

package/esm/cards/ContentCard/__figma__/ContentCardFooter.figma.js

@@ -0,0 +1,142 @@
+const _excluded = ["children"],
+  _excluded2 = ["children"],
+  _excluded3 = ["children"],
+  _excluded4 = ["children"];
+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); }
+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 from 'react';
+import { figma } from '@figma/code-connect';
+import { IconCounterButton } from '../../../buttons';
+import { HStack, VStack } from '../../../layout';
+import { Avatar, RemoteImageGroup } from '../../../media';
+import { Text } from '../../../typography/Text';
+import { ContentCardFooter } from '../ContentCardFooter';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const URL = 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=14705-24360';
+figma.connect(ContentCardFooter, URL, {
+  imports: ["import { ContentCardFooter } from '@coinbase/cds-mobile/cards/ContentCard/ContentCardFooter';"],
+  variant: {
+    type: 'button'
+  },
+  props: {
+    children: figma.children('action')
+  },
+  example: _ref => {
+    let {
+        children
+      } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    return /*#__PURE__*/_jsx(ContentCardFooter, _extends({
+      justifyContent: "flex-end"
+    }, props, {
+      children: children
+    }));
+  }
+});
+figma.connect(ContentCardFooter, URL, {
+  imports: ["import { ContentCardFooter } from '@coinbase/cds-mobile/cards/ContentCard/ContentCardFooter';", "import { RemoteImageGroup } from '@coinbase/cds-mobile/media/RemoteImageGroup';"],
+  variant: {
+    type: 'media + button'
+  },
+  props: {
+    children: figma.children('action')
+  },
+  example: _ref2 => {
+    let {
+        children
+      } = _ref2,
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+    return /*#__PURE__*/_jsxs(ContentCardFooter, _extends({}, props, {
+      children: [/*#__PURE__*/_jsx(RemoteImageGroup, {}), children]
+    }));
+  }
+});
+figma.connect(ContentCardFooter, URL, {
+  imports: ["import { ContentCardFooter } from '@coinbase/cds-mobile/cards/ContentCard/ContentCardFooter';", "import { Avatar } from '@coinbase/cds-mobile/media/Avatar';", "import { VStack } from '@coinbase/cds-mobile/layout/VStack';", "import { HStack } from '@coinbase/cds-mobile/layout/HStack';", "import { Text } from '@coinbase/cds-mobile/typography/Text'", "import { Text } from '@coinbase/cds-mobile/typography/Text'"],
+  variant: {
+    type: 'custom'
+  },
+  props: {
+    children: figma.children('action')
+  },
+  example: _ref3 => {
+    let {
+        children
+      } = _ref3,
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded3);
+    return /*#__PURE__*/_jsxs(ContentCardFooter, _extends({}, props, {
+      children: [/*#__PURE__*/_jsxs(HStack, {
+        gap: 1,
+        children: [/*#__PURE__*/_jsx(Avatar, {
+          alt: "",
+          shape: "circle",
+          size: "xl",
+          src: ""
+        }), /*#__PURE__*/_jsxs(VStack, {
+          children: [/*#__PURE__*/_jsx(Text, {
+            color: "fgMuted",
+            children: "Reward"
+          }), /*#__PURE__*/_jsx(Text, {
+            children: "+$15 ACS"
+          })]
+        })]
+      }), children]
+    }));
+  }
+});
+figma.connect(ContentCardFooter, URL, {
+  imports: ["import { ContentCardFooter } from '@coinbase/cds-mobile/cards/ContentCard/ContentCardFooter';", "import { IconCounterButton } from '@coinbase/cds-mobile/buttons/IconCounterButton';", "import { HStack } from '@coinbase/cds-mobile/layout/HStack';"],
+  variant: {
+    type: 'engagement + button'
+  },
+  props: {
+    children: figma.children('action')
+  },
+  example: _ref4 => {
+    let {
+        children
+      } = _ref4,
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
+    return /*#__PURE__*/_jsxs(ContentCardFooter, _extends({}, props, {
+      children: [/*#__PURE__*/_jsxs(HStack, {
+        gap: 1,
+        children: [/*#__PURE__*/_jsx(IconCounterButton, {
+          active: true,
+          accessibilityLabel: "20 likes, like",
+          color: "fgNegative",
+          count: 20,
+          icon: "heart"
+        }), /*#__PURE__*/_jsx(IconCounterButton, {
+          accessibilityLabel: "share",
+          icon: "share"
+        })]
+      }), children]
+    }));
+  }
+});
+figma.connect(ContentCardFooter, URL, {
+  imports: ["import { ContentCardFooter } from '@coinbase/cds-mobile/cards/ContentCard/ContentCardFooter';", "import { IconCounterButton } from '@coinbase/cds-mobile/buttons/IconCounterButton';", "import { HStack } from '@coinbase/cds-mobile/layout/HStack';"],
+  variant: {
+    type: 'engagement'
+  },
+  props: {},
+  example: _ref5 => {
+    let props = _extends({}, (_objectDestructuringEmpty(_ref5), _ref5));
+    return /*#__PURE__*/_jsxs(ContentCardFooter, _extends({}, props, {
+      children: [/*#__PURE__*/_jsx(IconCounterButton, {
+        accessibilityLabel: "20 likes, like",
+        count: 20,
+        icon: "heartInactive"
+      }), /*#__PURE__*/_jsx(IconCounterButton, {
+        accessibilityLabel: "40 comments, comment",
+        count: 40,
+        icon: "comment"
+      }), /*#__PURE__*/_jsx(IconCounterButton, {
+        accessibilityLabel: "32 shares, share",
+        count: 32,
+        icon: "wireTransfer"
+      })]
+    }));
+  }
+});

package/esm/cards/ContentCard/__figma__/ContentCardHeader.figma.js

@@ -0,0 +1,25 @@
+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 { ContentCardHeader } from '../ContentCardHeader';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(ContentCardHeader, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=14705%3A24320', {
+  imports: ["import { ContentCardHeader } from '@coinbase/cds-mobile/cards/ContentCard/ContentCardHeader';"],
+  props: {
+    title: figma.string('metadata label'),
+    meta: figma.string('metadata'),
+    avatar: figma.boolean('show start', {
+      true: figma.instance('↳ media'),
+      false: undefined
+    }),
+    end: figma.enum('type', {
+      default: figma.children(['action']),
+      'with tag': figma.children(['Tag'])
+    })
+  },
+  example: _ref => {
+    let props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+    return /*#__PURE__*/_jsx(ContentCardHeader, _extends({}, props));
+  }
+});

package/esm/cards/ContentCard/index.js

@@ -0,0 +1,4 @@
+export * from './ContentCard';
+export * from './ContentCardBody';
+export * from './ContentCardFooter';
+export * from './ContentCardHeader';

package/esm/cards/DataCard.js

@@ -0,0 +1,68 @@
+const _excluded = ["onPress", "title", "description", "progressVariant", "progress", "progressColor", "startLabel", "endLabel", "testID", "borderRadius", "elevation"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { memo, useMemo } from 'react';
+import { defaultMediaSize } from '@coinbase/cds-common/tokens/card';
+import { gutter } from '@coinbase/cds-common/tokens/sizing';
+import { HStack } from '../layout/HStack';
+import { TextBody } from '../typography/TextBody';
+import { TextHeadline } from '../typography/TextHeadline';
+import { TextLabel2 } from '../typography/TextLabel2';
+import { ProgressBar } from '../visualizations/ProgressBar';
+import { ProgressCircle } from '../visualizations/ProgressCircle';
+import { Card } from './Card';
+import { CardBody } from './CardBody';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const DataCard = /*#__PURE__*/memo(function DataCard(_ref) {
+  let {
+      onPress,
+      title,
+      description,
+      progressVariant,
+      progress,
+      progressColor,
+      startLabel: startLabelProp,
+      endLabel: endLabelProp,
+      testID = 'data-card',
+      borderRadius = 0,
+      elevation = 0
+    } = _ref,
+    cardProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const content = useMemo(() => {
+    const TextEndLabel = progressVariant === 'bar' ? TextLabel2 : TextBody;
+    return /*#__PURE__*/_jsxs(HStack, {
+      justifyContent: "space-between",
+      children: [!!startLabelProp && /*#__PURE__*/_jsx(TextHeadline, {
+        testID: testID + "-start-label",
+        children: startLabelProp
+      }), !!endLabelProp && /*#__PURE__*/_jsx(TextEndLabel, {
+        color: "fgMuted",
+        testID: testID + "-end-label",
+        children: endLabelProp
+      })]
+    });
+  }, [endLabelProp, progressVariant, startLabelProp, testID]);
+  return /*#__PURE__*/_jsxs(Card, _extends({
+    borderRadius: borderRadius,
+    elevation: elevation,
+    gap: 2,
+    onPress: onPress,
+    padding: gutter,
+    testID: testID
+  }, cardProps, {
+    children: [/*#__PURE__*/_jsx(CardBody, {
+      description: description,
+      media: progressVariant === 'circle' && !!progress && /*#__PURE__*/_jsx(ProgressCircle, {
+        color: progressColor,
+        progress: progress,
+        size: defaultMediaSize.width
+      }),
+      padding: 0,
+      testID: testID + "-body",
+      title: title
+    }), content, progressVariant === 'bar' && !!progress && /*#__PURE__*/_jsx(ProgressBar, {
+      color: progressColor,
+      progress: progress
+    })]
+  }));
+});

package/esm/cards/FeatureEntryCard.js

@@ -0,0 +1,39 @@
+const _excluded = ["onPress", "testID", "accessibilityHint", "accessibilityLabel", "description", "title", "borderRadius", "elevation", "onActionPress"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { memo } from 'react';
+import { Card } from './Card';
+import { CardBody } from './CardBody';
+
+/** @deprecated will be removed in v7.0.0 use NudgeCard or UpsellCard instead */
+import { jsx as _jsx } from "react/jsx-runtime";
+/** @deprecated will be removed in v7.0.0 use NudgeCard or UpsellCard instead */
+export const FeatureEntryCard = /*#__PURE__*/memo(function FeatureEntryCard(_ref) {
+  let {
+      onPress,
+      testID = 'feature-entry-card',
+      accessibilityHint,
+      accessibilityLabel,
+      description,
+      title,
+      borderRadius = 0,
+      elevation = 0,
+      onActionPress
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/_jsx(Card, {
+    accessibilityHint: accessibilityHint != null ? accessibilityHint : typeof description === 'string' ? description : undefined,
+    accessibilityLabel: accessibilityLabel != null ? accessibilityLabel : typeof title === 'string' ? title : undefined,
+    borderRadius: borderRadius,
+    elevation: elevation,
+    flexShrink: 0,
+    onPress: onPress,
+    testID: testID,
+    children: /*#__PURE__*/_jsx(CardBody, _extends({
+      description: description,
+      onActionPress: onActionPress,
+      testID: testID + "-body",
+      title: title
+    }, props))
+  });
+});