@coinbase/cds-web 0.0.0 → 8.13.1

package/esm/cards/FeedCard.js

@@ -0,0 +1,104 @@
+const _excluded = ["testID", "avatar", "author", "metadata", "pictogram", "spotSquare", "image", "mediaPlacement", "title", "description", "headerAction", "like", "comment", "share", "cta", "borderRadius", "elevation"];
+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, { memo, useMemo } from 'react';
+import { Button } from '../buttons/Button';
+import { IconButton } from '../buttons/IconButton';
+import { HStack } from '../layout/HStack';
+import { Card } from './Card';
+import { CardBody } from './CardBody';
+import { CardFooter } from './CardFooter';
+import { CardHeader } from './CardHeader';
+import { LikeButton } from './LikeButton';
+
+/** @deprecated Use the ContentCard component instead. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** @deprecated Use the ContentCard component instead. */
+export const FeedCard = /*#__PURE__*/memo(function FeedCard(_ref) {
+  let {
+      testID = 'feed-card',
+      avatar,
+      author,
+      metadata,
+      pictogram,
+      spotSquare,
+      image,
+      mediaPlacement = 'start',
+      title,
+      description,
+      headerAction,
+      like,
+      comment,
+      share,
+      cta,
+      borderRadius = 0,
+      elevation = 0
+    } = _ref,
+    cardProps = _objectWithoutProperties(_ref, _excluded);
+  const footer = useMemo(() => {
+    var _ref2, _ref3;
+    const hasFooterActions = Boolean((_ref2 = (_ref3 = like !== null && like !== void 0 ? like : comment) !== null && _ref3 !== void 0 ? _ref3 : share) !== null && _ref2 !== void 0 ? _ref2 : cta);
+    const hasFooter = hasFooterActions || Boolean(cta);
+    if (hasFooter) {
+      return /*#__PURE__*/_jsxs(CardFooter, {
+        justifyContent: "space-between",
+        testID: testID,
+        children: [hasFooterActions && /*#__PURE__*/_jsxs(HStack, {
+          gap: 0.5,
+          children: [like && /*#__PURE__*/_jsx(LikeButton, _objectSpread({
+            testID: "".concat(testID, "-like")
+          }, like)), comment && /*#__PURE__*/_jsx(IconButton, _objectSpread({
+            transparent: true,
+            accessibilityLabel: "Comment",
+            name: "annotation",
+            testID: "".concat(testID, "-comment")
+          }, comment)), share && /*#__PURE__*/_jsx(IconButton, _objectSpread({
+            transparent: true,
+            accessibilityLabel: "Share",
+            name: "share",
+            testID: "".concat(testID, "-share")
+          }, share))]
+        }), cta && /*#__PURE__*/_jsx(Button, _objectSpread({
+          compact: true,
+          transparent: true,
+          flush: "end",
+          variant: "secondary"
+        }, cta))]
+      });
+    }
+    return null;
+  }, [comment, cta, like, share, testID]);
+  return /*#__PURE__*/_jsxs(Card, _objectSpread(_objectSpread({
+    borderRadius: borderRadius,
+    elevation: elevation,
+    gap: 2,
+    testID: testID
+  }, cardProps), {}, {
+    children: [/*#__PURE__*/_jsx(CardHeader, {
+      action: headerAction && /*#__PURE__*/_jsx(IconButton, _objectSpread({
+        transparent: true,
+        accessibilityLabel: "More",
+        flush: "end"
+      }, headerAction)),
+      avatar: avatar,
+      description: author,
+      metaData: metadata,
+      testID: "".concat(testID, "-header")
+    }), /*#__PURE__*/_jsx(CardBody, {
+      description: description,
+      image: image,
+      mediaPlacement: mediaPlacement,
+      paddingY: footer === null ? undefined : 0 // Only override default CardBody spacing if footer is present
+      ,
+      pictogram: pictogram,
+      spotSquare: spotSquare,
+      testID: "".concat(testID, "-body"),
+      title: title
+    }), footer]
+  }));
+});

package/esm/cards/FloatingAssetCard.css

@@ -0,0 +1,2 @@
+.pressCss-plkgnmc{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-text-decoration:none;text-decoration:none;background-color:var(--color-transparent);padding:0;}.pressCss-plkgnmc::-moz-focus-inner{border:0;padding:0;margin:0;}.pressCss-plkgnmc:active{-webkit-transform:scale(0.98);-ms-transform:scale(0.98);transform:scale(0.98);opacity:0.82;}.pressCss-plkgnmc:hover{opacity:0.88;}
+.focusRingCss-fqgx809{position:relative;}.focusRingCss-fqgx809:focus{outline:none;}.focusRingCss-fqgx809:focus-visible{outline-style:solid;outline-width:2px;outline-color:var(--color-bgPrimary);outline-offset:2px;border-radius:var(--borderRadius-500);}

package/esm/cards/FloatingAssetCard.js

@@ -0,0 +1,76 @@
+const _excluded = ["className", "title", "description", "subtitle", "media", "size", "width", "testID", "onClick"];
+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 from 'react';
+import { opacityHovered, opacityPressed } from '@coinbase/cds-common/tokens/interactable';
+import { cx } from '../cx';
+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 floatingAssetCardLargeWidth = 359;
+export const floatingAssetCardSmallDimension = 156;
+const pressCss = "pressCss-plkgnmc";
+const focusRingCss = "focusRingCss-fqgx809";
+export const FloatingAssetCard = _ref => {
+  let {
+      className,
+      title,
+      description,
+      subtitle,
+      media,
+      size = 's',
+      width = size === 'l' ? floatingAssetCardLargeWidth : floatingAssetCardSmallDimension,
+      testID = 'floating-asset-card',
+      onClick
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsxs(VStack, _objectSpread(_objectSpread({
+    as: onClick ? 'button' : 'div',
+    className: cx(onClick && pressCss, focusRingCss, className),
+    gap: 1,
+    maxWidth: width,
+    onClick: onClick,
+    testID: testID
+  }, props), {}, {
+    children: [/*#__PURE__*/_jsx(HStack, {
+      borderColor: "bgLine",
+      borderRadius: 500,
+      borderWidth: 100,
+      height: floatingAssetCardSmallDimension,
+      maxWidth: width,
+      minWidth: floatingAssetCardSmallDimension,
+      overflow: "hidden",
+      children: media
+    }), /*#__PURE__*/_jsxs(VStack, {
+      gap: 0.5,
+      children: [typeof subtitle === 'string' ? /*#__PURE__*/_jsx(Text, {
+        as: "p",
+        color: "fgMuted",
+        display: "block",
+        font: "legal",
+        numberOfLines: 1,
+        children: subtitle
+      }) : subtitle, typeof title === 'string' ? /*#__PURE__*/_jsx(Text, {
+        as: "p",
+        display: "block",
+        font: "headline",
+        numberOfLines: 3,
+        children: title
+      }) : title, typeof description === 'string' ? /*#__PURE__*/_jsx(Text, {
+        as: "p",
+        color: "fgMuted",
+        display: "block",
+        font: "label2",
+        numberOfLines: 2,
+        children: description
+      }) : description]
+    })]
+  }));
+};
+import "./FloatingAssetCard.css";

package/esm/cards/LikeButton.js

@@ -0,0 +1,62 @@
+const _excluded = ["count", "compact", "flush", "liked"];
+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, { memo } from 'react';
+import { interactableHeight } from '@coinbase/cds-common/tokens/interactableHeight';
+import { getButtonSpacingProps } from '@coinbase/cds-common/utils/getButtonSpacingProps';
+import { Icon } from '../icons/Icon';
+import { HStack } from '../layout/HStack';
+import { Pressable } from '../system/Pressable';
+import { Text } from '../typography/Text';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const LikeButton = /*#__PURE__*/memo(function LikeButton(_ref) {
+  let {
+      count = 0,
+      compact = true,
+      flush,
+      liked = false
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const iconSize = compact ? 's' : 'm';
+  const size = interactableHeight[compact ? 'compact' : 'regular'];
+  const {
+    marginStart,
+    marginEnd
+  } = getButtonSpacingProps({
+    compact,
+    flush
+  });
+  return /*#__PURE__*/_jsx(Pressable, _objectSpread(_objectSpread({
+    background: "transparent"
+  }, props), {}, {
+    children: /*#__PURE__*/_jsxs(HStack, {
+      alignItems: "center",
+      flexShrink: 0,
+      flexWrap: "nowrap",
+      gap: 1,
+      justifyContent: "flex-start",
+      marginEnd: marginEnd,
+      marginStart: marginStart,
+      minHeight: size,
+      minWidth: size,
+      children: [/*#__PURE__*/_jsx(Icon, {
+        active: liked,
+        color: liked ? 'fgNegative' : 'fg',
+        name: "heart",
+        size: iconSize
+      }), count > 0 ? /*#__PURE__*/_jsx(Text, {
+        mono: true,
+        as: "p",
+        display: "block",
+        font: "label1",
+        children: count
+      }) : null]
+    })
+  }));
+});
+LikeButton.displayName = 'LikeButton';

package/esm/cards/NudgeCard.css

@@ -0,0 +1,2 @@
+.pressCss-p1667wdp{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-text-decoration:none;text-decoration:none;padding:0;}.pressCss-p1667wdp::-moz-focus-inner{border:0;padding:0;margin:0;}.pressCss-p1667wdp:active{-webkit-transform:scale(0.98);-ms-transform:scale(0.98);transform:scale(0.98);opacity:0.82;}.pressCss-p1667wdp:hover{opacity:0.88;}
+.focusRingCss-f1j4fgzo{position:relative;}.focusRingCss-f1j4fgzo:focus{outline:none;}.focusRingCss-f1j4fgzo:focus-visible{outline-style:solid;outline-width:2px;outline-color:var(--color-bgPrimary);outline-offset:2px;border-radius:var(--borderRadius-500);}

package/esm/cards/NudgeCard.js

@@ -0,0 +1,162 @@
+const _excluded = ["title", "description", "pictogram", "media", "mediaPosition", "action", "className", "onActionPress", "numberOfLines", "onDismissPress", "width", "minWidth", "testID", "accessibilityLabel", "maxHeight", "maxWidth", "background", "minHeight", "height", "aspectRatio", "onClick"];
+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 from 'react';
+import { opacityHovered, opacityPressed } from '@coinbase/cds-common/tokens/interactable';
+import { IconButton } from '../buttons/IconButton';
+import { cx } from '../cx';
+import { Pictogram } from '../illustrations/Pictogram';
+import { Box } from '../layout/Box';
+import { HStack } from '../layout/HStack';
+import { VStack } from '../layout/VStack';
+import { Pressable } from '../system';
+import { Text } from '../typography/Text';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const pressCss = "pressCss-p1667wdp";
+const focusRingCss = "focusRingCss-f1j4fgzo";
+const getCardBodyPaddingProps = _ref => {
+  var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref0, _ref1, _ref10, _ref11, _ref12, _ref13, _ref14, _ref15;
+  let {
+    paddingStart,
+    paddingEnd,
+    paddingTop,
+    paddingBottom,
+    padding,
+    paddingX,
+    paddingY,
+    compact
+  } = _ref;
+  if (compact) return {
+    paddingBottom: (_ref2 = (_ref3 = paddingBottom !== null && paddingBottom !== void 0 ? paddingBottom : paddingY) !== null && _ref3 !== void 0 ? _ref3 : padding) !== null && _ref2 !== void 0 ? _ref2 : 1,
+    paddingTop: (_ref4 = (_ref5 = paddingTop !== null && paddingTop !== void 0 ? paddingTop : paddingY) !== null && _ref5 !== void 0 ? _ref5 : padding) !== null && _ref4 !== void 0 ? _ref4 : 2,
+    paddingStart: (_ref6 = (_ref7 = paddingStart !== null && paddingStart !== void 0 ? paddingStart : paddingX) !== null && _ref7 !== void 0 ? _ref7 : padding) !== null && _ref6 !== void 0 ? _ref6 : 2,
+    paddingEnd: (_ref8 = (_ref9 = paddingEnd !== null && paddingEnd !== void 0 ? paddingEnd : paddingX) !== null && _ref9 !== void 0 ? _ref9 : padding) !== null && _ref8 !== void 0 ? _ref8 : 2
+  };
+  return {
+    paddingBottom: (_ref0 = (_ref1 = paddingBottom !== null && paddingBottom !== void 0 ? paddingBottom : paddingY) !== null && _ref1 !== void 0 ? _ref1 : padding) !== null && _ref0 !== void 0 ? _ref0 : 3,
+    paddingTop: (_ref10 = (_ref11 = paddingTop !== null && paddingTop !== void 0 ? paddingTop : paddingY) !== null && _ref11 !== void 0 ? _ref11 : padding) !== null && _ref10 !== void 0 ? _ref10 : 3,
+    paddingStart: (_ref12 = (_ref13 = paddingStart !== null && paddingStart !== void 0 ? paddingStart : paddingX) !== null && _ref13 !== void 0 ? _ref13 : padding) !== null && _ref12 !== void 0 ? _ref12 : 3,
+    paddingEnd: (_ref14 = (_ref15 = paddingEnd !== null && paddingEnd !== void 0 ? paddingEnd : paddingX) !== null && _ref15 !== void 0 ? _ref15 : padding) !== null && _ref14 !== void 0 ? _ref14 : 3
+  };
+};
+export const NudgeCard = _ref16 => {
+  let {
+      title,
+      description,
+      pictogram,
+      media,
+      mediaPosition = 'right',
+      action,
+      className,
+      onActionPress,
+      numberOfLines = 3,
+      onDismissPress,
+      width = 327,
+      minWidth = 327,
+      testID = 'nudge-card',
+      accessibilityLabel,
+      maxHeight,
+      maxWidth,
+      background = 'bgAlternate',
+      minHeight,
+      height,
+      aspectRatio,
+      onClick
+    } = _ref16,
+    props = _objectWithoutProperties(_ref16, _excluded);
+  const hasMedia = pictogram || media;
+  const paddingBottom = action ? 1 : 2;
+  const paddingProps = getCardBodyPaddingProps({
+    paddingBottom,
+    compact: true
+  });
+  const renderMedia = pictogram ? /*#__PURE__*/_jsx(Pictogram, {
+    dimension: action ? '64x64' : '48x48',
+    name: pictogram,
+    testID: "".concat(testID, "-pictogram")
+  }) : media;
+  return /*#__PURE__*/_jsxs(Box, _objectSpread(_objectSpread({
+    as: onClick ? 'button' : 'div',
+    background: background,
+    borderColor: "transparent",
+    borderRadius: 500,
+    borderWidth: 100,
+    className: cx(onClick && pressCss, focusRingCss, className),
+    maxHeight: maxHeight,
+    maxWidth: maxWidth,
+    minWidth: minWidth,
+    onClick: onClick,
+    paddingEnd: onDismissPress ? 3 : 0,
+    position: "relative",
+    width: width
+  }, props), {}, {
+    children: [onDismissPress ? /*#__PURE__*/_jsx(Box, {
+      alignSelf: "flex-end",
+      padding: 0.5,
+      position: "absolute",
+      right: 0,
+      top: 0,
+      children: /*#__PURE__*/_jsx(IconButton, {
+        transparent: true,
+        accessibilityLabel: accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : "Dismiss the ".concat(typeof title === 'string' ? title : '', " card"),
+        name: "close",
+        onClick: onDismissPress,
+        testID: "".concat(testID, "-dismiss-button"),
+        variant: "secondary"
+      })
+    }) : null, /*#__PURE__*/_jsxs(HStack, _objectSpread(_objectSpread({
+      alignItems: "center",
+      aspectRatio: aspectRatio,
+      flexGrow: 1,
+      gap: 2,
+      height: height,
+      justifyContent: mediaPosition === 'right' ? 'space-between' : 'flex-start',
+      minHeight: minHeight
+    }, paddingProps), {}, {
+      children: [hasMedia && mediaPosition === 'left' && renderMedia, /*#__PURE__*/_jsxs(VStack, {
+        alignItems: "flex-start",
+        flexShrink: 1,
+        gap: 2,
+        maxWidth: maxWidth,
+        children: [/*#__PURE__*/_jsxs(VStack, {
+          gap: 0.5,
+          maxWidth: "100%",
+          paddingTop: hasMedia ? 0 : 2,
+          children: [typeof title === 'string' ? /*#__PURE__*/_jsx(Text, {
+            as: "h3",
+            display: "block",
+            font: "headline",
+            numberOfLines: numberOfLines,
+            testID: "".concat(testID, "-title"),
+            transform: "none",
+            children: title
+          }) : title, typeof description === 'string' ? /*#__PURE__*/_jsx(Text, {
+            as: "p",
+            display: "block",
+            font: "label2",
+            numberOfLines: numberOfLines,
+            testID: "".concat(testID, "-description"),
+            transform: "none",
+            children: description
+          }) : description]
+        }), typeof action === 'string' ? /*#__PURE__*/_jsx(Pressable, {
+          background: "transparent",
+          onClick: onActionPress,
+          paddingY: 1,
+          children: /*#__PURE__*/_jsx(Text, {
+            color: "fgPrimary",
+            font: "headline",
+            numberOfLines: 1,
+            children: action
+          })
+        }) : action]
+      }), hasMedia && mediaPosition === 'right' && renderMedia]
+    }))]
+  }));
+};
+import "./NudgeCard.css";

package/esm/cards/UpsellCard.js

@@ -0,0 +1,99 @@
+import React, { isValidElement, memo } from 'react';
+import { upsellCardDefaultWidth, upsellCardMinHeight } from '@coinbase/cds-common/tokens/card';
+import { Button, IconButton } from '../buttons';
+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 UpsellCard = /*#__PURE__*/memo(_ref => {
+  let {
+    title,
+    description,
+    action,
+    onActionPress,
+    onDismissPress,
+    media,
+    background = 'bgPrimaryWash',
+    dangerouslySetBackground,
+    testID = 'upsell-card',
+    accessibilityLabel,
+    width = upsellCardDefaultWidth,
+    onClick
+  } = _ref;
+  const content = /*#__PURE__*/_jsx(HStack, {
+    alignContent: "space-between",
+    background: background,
+    borderColor: "transparent",
+    borderRadius: 500,
+    dangerouslySetBackground: dangerouslySetBackground,
+    minHeight: upsellCardMinHeight,
+    style: {
+      border: 'none'
+    },
+    testID: testID,
+    width: width,
+    children: /*#__PURE__*/_jsxs(HStack, {
+      alignContent: "space-between",
+      alignItems: "center",
+      borderRadius: 500,
+      height: "100%",
+      justifyContent: "space-between",
+      overflow: "hidden",
+      position: "relative",
+      width: "100%",
+      children: [/*#__PURE__*/_jsxs(VStack, {
+        gap: 3,
+        justifyContent: "space-between",
+        minHeight: upsellCardMinHeight,
+        padding: 2,
+        width: "70%",
+        children: [/*#__PURE__*/_jsxs(VStack, {
+          gap: 1,
+          children: [typeof title === 'string' ? /*#__PURE__*/_jsx(Text, {
+            as: "h3",
+            display: "block",
+            font: "headline",
+            children: title
+          }) : title, typeof description === 'string' ? /*#__PURE__*/_jsx(Text, {
+            as: "p",
+            display: "block",
+            font: "label2",
+            numberOfLines: 3,
+            children: description
+          }) : description]
+        }), !!action && /*#__PURE__*/_jsx(HStack, {
+          paddingStart: 2,
+          children: /*#__PURE__*/isValidElement(action) ? action : /*#__PURE__*/_jsx(Button, {
+            compact: true,
+            flush: "start",
+            numberOfLines: 1,
+            onClick: onActionPress,
+            variant: "secondary",
+            children: action
+          })
+        })]
+      }), !!media && /*#__PURE__*/_jsx(HStack, {
+        position: "absolute",
+        right: 0,
+        children: media
+      }), onDismissPress && /*#__PURE__*/_jsx(HStack, {
+        padding: 1,
+        position: "absolute",
+        right: 0,
+        top: 0,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          accessibilityLabel: accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : "Dismiss the ".concat(title, " card"),
+          name: "close",
+          onClick: onDismissPress,
+          testID: "".concat(testID, "-dismiss-button"),
+          variant: "secondary"
+        })
+      })]
+    })
+  });
+  return onClick ? /*#__PURE__*/_jsx(Pressable, {
+    background: "transparent",
+    onClick: onClick,
+    children: content
+  }) : content;
+});

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { figma } from '@figma/code-connect';
+import { AnnouncementCard } from '../AnnouncementCard';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(AnnouncementCard, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=61%3A956', {
+  props: {
+    showtopdivider29390: figma.boolean('show top divider'),
+    illustration5960: figma.instance('illustration'),
+    description110511: figma.string('description'),
+    showbottomdivider59619: figma.boolean('show bottom divider'),
+    title110512: figma.string('title'),
+    showbutton15215: figma.boolean('show button'),
+    platform: figma.enum('platform', {
+      '📱 mobile': '---mobile',
+      '🖥 desktop': '---desktop'
+    })
+  },
+  example: () => /*#__PURE__*/_jsx(AnnouncementCard, {})
+});

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

@@ -0,0 +1,45 @@
+const _excluded = ["children"];
+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 from 'react';
+import { figma } from '@figma/code-connect';
+import { ContainedAssetCard } from '../ContainedAssetCard';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(ContainedAssetCard, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=10084%3A2875', {
+  imports: ["import { ContainedAssetCard } from '@coinbase/cds-web/cards/ContainedAssetCard';"],
+  props: {
+    // showverified1025912: figma.boolean('↳ show verified'),
+    header: figma.instance('header'),
+    subtitle: figma.boolean('show subtitle', {
+      true: figma.string('↳ subtitle'),
+      false: undefined
+    }),
+    title: figma.string('title'),
+    description: figma.boolean('show description', {
+      true: figma.instance('↳ description'),
+      false: undefined
+    }),
+    size: figma.enum('size', {
+      s: 's',
+      l: 'l'
+    }),
+    children: figma.enum('type', {
+      contained: undefined,
+      'half filled': 'right half content'
+    })
+  },
+  example: _ref => {
+    let {
+        children
+      } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+    return /*#__PURE__*/_jsx(ContainedAssetCard, _objectSpread(_objectSpread({}, props), {}, {
+      children: children
+    }));
+  }
+});

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

@@ -0,0 +1,36 @@
+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 { FloatingAssetCard } from '../FloatingAssetCard';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(FloatingAssetCard, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=10085%3A3012', {
+  imports: ["import { FloatingAssetCard } from '@coinbase/cds-web/cards/FloatingAssetCard';"],
+  props: {
+    // showverified1025919: figma.boolean('↳ show verified'),
+    title: figma.string('title'),
+    description: figma.boolean('show description', {
+      true: figma.instance('↳ description'),
+      false: undefined
+    }),
+    subtitle: figma.boolean('show subtitle', {
+      true: figma.string('↳ subtitle'),
+      false: undefined
+    }),
+    size: figma.enum('size', {
+      l: 'l',
+      s: 's'
+    })
+  },
+  example: _ref => {
+    let props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+    return /*#__PURE__*/_jsx(FloatingAssetCard, _objectSpread({
+      media: "<img />"
+    }, props));
+  }
+});