@coinbase/cds-mobile 0.0.0 → 8.13.2

package/esm/cards/FeedCard.js

@@ -0,0 +1,95 @@
+const _excluded = ["testID", "avatar", "author", "metadata", "pictogram", "spotSquare", "image", "mediaPlacement", "title", "description", "headerAction", "like", "comment", "share", "cta", "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 React, { memo, useMemo } from 'react';
+import { Button, IconButton } from '../buttons';
+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';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const FeedCard = /*#__PURE__*/memo(function FeedCard(_ref) {
+  let {
+      testID = 'feed-card',
+      avatar,
+      author,
+      metadata,
+      pictogram,
+      spotSquare,
+      image,
+      mediaPlacement = 'above',
+      title,
+      description,
+      headerAction,
+      like,
+      comment,
+      share,
+      cta,
+      borderRadius = 0,
+      elevation = 0
+    } = _ref,
+    cardProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const footer = useMemo(() => {
+    var _ref2, _ref3;
+    const hasFooterActions = Boolean((_ref2 = (_ref3 = like != null ? like : comment) != null ? _ref3 : share) != null ? _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, _extends({
+            testID: testID + "-like"
+          }, like)), comment && /*#__PURE__*/_jsx(IconButton, _extends({
+            transparent: true,
+            accessibilityLabel: "Comment",
+            name: "annotation",
+            testID: testID + "-comment"
+          }, comment)), share && /*#__PURE__*/_jsx(IconButton, _extends({
+            transparent: true,
+            accessibilityLabel: "Share",
+            name: "share",
+            testID: testID + "-share"
+          }, share))]
+        }), cta && /*#__PURE__*/_jsx(Button, _extends({
+          compact: true,
+          transparent: true,
+          flush: "end",
+          variant: "secondary"
+        }, cta))]
+      });
+    }
+    return null;
+  }, [comment, cta, like, share, testID]);
+  return /*#__PURE__*/_jsxs(Card, _extends({
+    borderRadius: borderRadius,
+    elevation: elevation,
+    gap: 2,
+    testID: testID
+  }, cardProps, {
+    children: [/*#__PURE__*/_jsx(CardHeader, {
+      action: headerAction && /*#__PURE__*/_jsx(IconButton, _extends({
+        transparent: true,
+        accessibilityLabel: "More",
+        flush: "end"
+      }, headerAction)),
+      avatar: avatar,
+      description: author,
+      metaData: metadata,
+      testID: 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: testID + "-body",
+      title: title
+    }), footer]
+  }));
+});

package/esm/cards/FloatingAssetCard.js

@@ -0,0 +1,65 @@
+import React, { memo, useMemo } from 'react';
+import { floatingAssetCardLargeWidth, floatingAssetCardSmallDimension } 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 FloatingAssetCard = /*#__PURE__*/memo(_ref => {
+  let {
+    title,
+    description,
+    subtitle,
+    media,
+    testID = 'floating-asset-card',
+    size = 's',
+    onPress
+  } = _ref;
+  const width = useMemo(() => size === 'l' ? floatingAssetCardLargeWidth : floatingAssetCardSmallDimension, [size]);
+  const pressableStyles = useMemo(() => {
+    return {
+      minWidth: floatingAssetCardSmallDimension,
+      maxWidth: width
+    };
+  }, [width]);
+  const content = /*#__PURE__*/_jsxs(VStack, {
+    gap: 1,
+    maxWidth: width,
+    testID: testID,
+    children: [/*#__PURE__*/_jsx(HStack, {
+      bordered: true,
+      borderRadius: 500,
+      height: floatingAssetCardSmallDimension,
+      maxWidth: width,
+      minWidth: floatingAssetCardSmallDimension,
+      overflow: "hidden",
+      children: media
+    }), /*#__PURE__*/_jsxs(VStack, {
+      gap: 0.5,
+      maxWidth: width,
+      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: 3,
+        children: title
+      }) : title, typeof description === 'string' ? /*#__PURE__*/_jsx(Text, {
+        color: "fgMuted",
+        font: "label2",
+        numberOfLines: 2,
+        children: description
+      }) : description]
+    })]
+  });
+  return onPress ? /*#__PURE__*/_jsx(Pressable, {
+    accessibilityRole: "button",
+    background: "transparent",
+    borderRadius: 500,
+    onPress: onPress,
+    style: pressableStyles,
+    testID: testID,
+    children: content
+  }) : content;
+});

package/esm/cards/LikeButton.js

@@ -0,0 +1,89 @@
+const _excluded = ["count", "compact", "flush", "liked", "onPress", "accessibilityHint", "accessibilityLabel", "borderRadius"];
+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, useCallback, useMemo, useRef } from 'react';
+import { Animated } from 'react-native';
+import { activeScale, inactiveScale, scaleInConfig, scaleOutConfig } from '@coinbase/cds-common/animation/likeButton';
+import { interactableHeight } from '@coinbase/cds-common/tokens/interactableHeight';
+import { getButtonSpacingProps } from '@coinbase/cds-common/utils/getButtonSpacingProps';
+import { convertMotionConfig } from '../animation/convertMotionConfig';
+import { TextIcon } from '../icons/TextIcon';
+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";
+const scaleIn = convertMotionConfig(scaleInConfig);
+const scaleOut = convertMotionConfig(scaleOutConfig);
+export const LikeButton = /*#__PURE__*/memo(function LikeButton(_ref) {
+  let {
+      count = 0,
+      compact = true,
+      flush,
+      liked = false,
+      onPress,
+      accessibilityHint,
+      accessibilityLabel = 'Like',
+      borderRadius = compact ? 700 : 900
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const iconScale = useRef(new Animated.Value(1));
+  const iconSize = compact ? 's' : 'm';
+  const size = interactableHeight[compact ? 'compact' : 'regular'];
+  const {
+    marginStart,
+    marginEnd
+  } = getButtonSpacingProps({
+    compact,
+    flush
+  });
+  const handleOnPress = useCallback(e => {
+    onPress == null || onPress(e);
+    if (!liked) {
+      const scaleInAnimation = Animated.timing(iconScale.current, scaleIn);
+      const scaleOutAnimation = Animated.timing(iconScale.current, scaleOut);
+      Animated.sequence([scaleInAnimation, scaleOutAnimation]).start();
+    }
+  }, [liked, onPress]);
+  const iconStyles = useMemo(() => ({
+    opacity: iconScale.current.interpolate({
+      inputRange: [inactiveScale, activeScale],
+      outputRange: [1, 0.8]
+    }),
+    transform: [{
+      scale: iconScale.current
+    }]
+  }), []);
+  return /*#__PURE__*/_jsx(Pressable, _extends({
+    accessibilityHint: accessibilityHint,
+    accessibilityLabel: accessibilityLabel,
+    background: "transparent",
+    borderRadius: borderRadius,
+    feedback: "light",
+    marginEnd: marginEnd,
+    marginStart: marginStart,
+    onPress: handleOnPress
+  }, props, {
+    children: /*#__PURE__*/_jsxs(HStack, {
+      alignItems: "center",
+      flexShrink: 0,
+      flexWrap: "nowrap",
+      gap: 1,
+      justifyContent: "flex-start",
+      minHeight: size,
+      minWidth: size,
+      children: [/*#__PURE__*/_jsx(TextIcon, {
+        animated: true,
+        active: liked,
+        color: liked ? 'fgNegative' : 'fg',
+        name: "heart",
+        size: iconSize,
+        style: iconStyles
+      }), count > 0 ? /*#__PURE__*/_jsx(Text, {
+        mono: true,
+        font: "label1",
+        children: count
+      }) : null]
+    })
+  }));
+});
+LikeButton.displayName = 'LikeButton';

package/esm/cards/NudgeCard.js

@@ -0,0 +1,121 @@
+const _excluded = ["title", "description", "pictogram", "media", "mediaPosition", "action", "onActionPress", "numberOfLines", "onDismissPress", "width", "testID", "accessibilityLabel", "background", "onPress", "maxWidth"];
+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, { isValidElement, memo } from 'react';
+import { getCardBodySpacingProps } from '@coinbase/cds-common/cards/getCardBodySpacingProps';
+import { IconButton } from '../buttons';
+import { Pictogram } from '../illustrations/Pictogram';
+import { Box, HStack, VStack } from '../layout';
+import { Pressable } from '../system/Pressable';
+import { Text } from '../typography/Text';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const NudgeCard = /*#__PURE__*/memo(_ref => {
+  let {
+      title,
+      description,
+      pictogram,
+      media,
+      mediaPosition = 'right',
+      action,
+      onActionPress,
+      numberOfLines = 3,
+      onDismissPress,
+      width = '100%',
+      testID = 'nudge-card',
+      accessibilityLabel,
+      background = 'bgAlternate',
+      onPress,
+      maxWidth
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const hasMedia = pictogram || media;
+  const paddingBottom = action ? 1 : 2;
+  const spacingProps = getCardBodySpacingProps({
+    paddingBottom,
+    compact: true
+  });
+  const renderAction = /*#__PURE__*/isValidElement(action) ? action : /*#__PURE__*/_jsx(Pressable, {
+    accessibilityRole: "button",
+    background: "transparent",
+    onPress: onActionPress,
+    children: /*#__PURE__*/_jsx(Text, {
+      color: "fgPrimary",
+      font: "headline",
+      numberOfLines: 1,
+      paddingY: 1,
+      children: action
+    })
+  });
+  const renderMedia = pictogram ? /*#__PURE__*/_jsx(Pictogram, {
+    dimension: action ? '64x64' : '48x48',
+    name: pictogram,
+    testID: testID + "-pictogram"
+  }) : media;
+  const content = /*#__PURE__*/_jsxs(Box, {
+    background: background,
+    borderColor: "transparent",
+    borderRadius: 500,
+    maxWidth: maxWidth,
+    paddingEnd: onDismissPress ? 3 : 0,
+    position: "relative",
+    testID: testID,
+    width: width,
+    children: [onDismissPress ?
+    /*#__PURE__*/
+    // zIndex is required otherwise CardBody sits on top of it
+    _jsx(Box, {
+      padding: 0.5,
+      position: "absolute",
+      right: 0,
+      top: 0,
+      zIndex: 2,
+      children: /*#__PURE__*/_jsx(IconButton, {
+        transparent: true,
+        accessibilityLabel: accessibilityLabel != null ? accessibilityLabel : "Dismiss the " + (typeof title === 'string' ? title : '') + " card",
+        name: "close",
+        onPress: onDismissPress,
+        testID: testID + "-dismiss-button",
+        variant: "secondary"
+      })
+    }) : null, /*#__PURE__*/_jsxs(HStack, _extends({
+      alignItems: "center",
+      flexGrow: 1,
+      gap: 2,
+      justifyContent: mediaPosition === 'right' ? 'space-between' : 'flex-start'
+    }, spacingProps, props, {
+      children: [hasMedia && mediaPosition === 'left' ? renderMedia : null, /*#__PURE__*/_jsxs(VStack, {
+        alignItems: "flex-start",
+        flexGrow: 1,
+        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, {
+            ellipsize: "tail",
+            font: "headline",
+            numberOfLines: numberOfLines,
+            testID: testID + "-title",
+            textTransform: "none",
+            children: title
+          }) : title, typeof description === 'string' ? /*#__PURE__*/_jsx(Text, {
+            ellipsize: "tail",
+            font: "label2",
+            numberOfLines: numberOfLines,
+            testID: testID + "-description",
+            textTransform: "none",
+            children: description
+          }) : description]
+        }), action ? renderAction : null]
+      }), hasMedia && mediaPosition === 'right' ? renderMedia : null]
+    }))]
+  });
+  return onPress ? /*#__PURE__*/_jsx(Pressable, {
+    accessibilityRole: "button",
+    background: "transparent",
+    onPress: onPress,
+    children: content
+  }) : content;
+});

package/esm/cards/UpsellCard.js

@@ -0,0 +1,92 @@
+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/Pressable';
+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,
+    onPress
+  } = _ref;
+  const content = /*#__PURE__*/_jsx(HStack, {
+    alignContent: "space-between",
+    background: background,
+    borderRadius: 500,
+    dangerouslySetBackground: dangerouslySetBackground,
+    minHeight: upsellCardMinHeight,
+    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, {
+            font: "headline",
+            children: title
+          }) : title, typeof description === 'string' ? /*#__PURE__*/_jsx(Text, {
+            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,
+            onPress: 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 : "Dismiss the " + title + " card",
+          name: "close",
+          onPress: onDismissPress,
+          testID: testID + "-dismiss-button",
+          variant: "secondary"
+        })
+      }) : null]
+    })
+  });
+  return onPress ? /*#__PURE__*/_jsx(Pressable, {
+    accessibilityRole: "button",
+    background: "transparent",
+    onPress: onPress,
+    children: content
+  }) : content;
+});

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

@@ -0,0 +1,18 @@
+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,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 { 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-mobile/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 = _objectWithoutPropertiesLoose(_ref, _excluded);
+    return /*#__PURE__*/_jsx(ContainedAssetCard, _extends({}, props, {
+      children: children
+    }));
+  }
+});

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

@@ -0,0 +1,30 @@
+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 { 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-mobile/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, _extends({
+      media: "<Image />"
+    }, props));
+  }
+});

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

@@ -0,0 +1,54 @@
+const _excluded = ["action", "title", "description"];
+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 { figma } from '@figma/code-connect';
+import { NudgeCard } from '../NudgeCard';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(NudgeCard, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=10085%3A4433', {
+  imports: ["import { NudgeCard } from '@coinbase/cds-mobile/cards/NudgeCard';"],
+  props: {
+    // onActionPress: figma.boolean('compact', {
+    //   true: undefined,
+    //   false: () => {},
+    // }),
+    // onDismissPress: figma.boolean('show dismiss', {
+    //   true: () => {},
+    //   false: undefined,
+    // }),
+    description: figma.nestedProps('string.nudge', {
+      string: figma.enum('Ready-made', {
+        Custom: figma.string('description'),
+        'Earn more': figma.textContent('description')
+      })
+    }),
+    title: figma.nestedProps('string.nudge', {
+      string: figma.enum('Ready-made', {
+        Custom: figma.boolean('show title', {
+          true: figma.string('↳ title'),
+          false: undefined
+        }),
+        'Earn more': figma.boolean('show title', {
+          true: figma.textContent('title'),
+          false: undefined
+        })
+      })
+    }),
+    media: figma.instance('media'),
+    action: figma.nestedProps('string.nudge', {
+      button: figma.children('Button')
+    })
+  },
+  example: _ref => {
+    let {
+        action,
+        title,
+        description
+      } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    return /*#__PURE__*/_jsx(NudgeCard, _extends({
+      action: action.button,
+      description: description.string,
+      title: title.string
+    }, props));
+  }
+});

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

@@ -0,0 +1,46 @@
+const _excluded = ["title", "description"];
+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 { figma } from '@figma/code-connect';
+import { useTheme } from '../../hooks/useTheme';
+import { UpsellCard } from '../UpsellCard';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(UpsellCard, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=10085%3A6279', {
+  imports: ["import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';", "import { UpsellCard } from '@coinbase/cds-mobile/cards/UpsellCard';"],
+  props: {
+    media: figma.instance('media'),
+    title: figma.nestedProps('string.upsell', {
+      string: figma.enum('Ready-made', {
+        Custom: figma.boolean('show title', {
+          true: figma.string('↳ title'),
+          false: undefined
+        }),
+        Quests: figma.boolean('show title', {
+          true: figma.textContent('title'),
+          false: undefined
+        })
+      })
+    }),
+    description: figma.nestedProps('string.upsell', {
+      string: figma.enum('Ready-made', {
+        Custom: figma.string('description'),
+        Quests: figma.textContent('description')
+      })
+    }),
+    action: figma.children('Button')
+  },
+  example: function Example(_ref) {
+    let {
+        title,
+        description
+      } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    const theme = useTheme();
+    const green60 = "rgb" + theme.spectrum.green60;
+    return /*#__PURE__*/_jsx(UpsellCard, _extends({}, props, {
+      dangerouslySetBackground: green60,
+      description: description.string,
+      title: title.string
+    }));
+  }
+});