@coinbase/cds-mobile 8.41.0 → 8.42.0

package/dts/cards/MediaCard/index.d.ts

@@ -0,0 +1,28 @@
+import type { StyleProp, View, ViewStyle } from 'react-native';
+import { type CardRootProps } from '../CardRoot';
+import { type MediaCardLayoutProps } from './MediaCardLayout';
+export type MediaCardBaseProps = MediaCardLayoutProps;
+export type MediaCardProps = MediaCardBaseProps &
+  Omit<CardRootProps, 'children'> & {
+    styles?: {
+      root?: StyleProp<ViewStyle>;
+    };
+  };
+export declare const MediaCard: import('react').MemoExoticComponent<
+  import('react').ForwardRefExoticComponent<
+    import('./MediaCardLayout').MediaCardLayoutBaseProps & {
+      styles?: {
+        layoutContainer?: StyleProp<ViewStyle>;
+        contentContainer?: StyleProp<ViewStyle>;
+        textContainer?: StyleProp<ViewStyle>;
+        headerContainer?: StyleProp<ViewStyle>;
+        mediaContainer?: StyleProp<ViewStyle>;
+      };
+    } & Omit<CardRootProps, 'children'> & {
+        styles?: {
+          root?: StyleProp<ViewStyle>;
+        };
+      } & import('react').RefAttributes<View>
+  >
+>;
+//# sourceMappingURL=index.d.ts.map

package/dts/cards/MediaCard/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/cards/MediaCard/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAA8B,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG3F,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAE3D,OAAO,EAAmB,KAAK,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE/E,MAAM,MAAM,kBAAkB,GAAG,oBAAoB,CAAC;AAEtD,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAC7C,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC,GAAG;IAChC,MAAM,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAC7B,CAAC;CACH,CAAC;AAQJ,eAAO,MAAM,SAAS;;uBAmBK,CAAC;wBAEhB,CAAH;qBACG,CAAL;uBACS,CAAC;sBACU,CAAC;;;aAnCf;QACP,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAC7B;yCAwCJ,CAAC"}

package/dts/cards/MessagingCard/MessagingCardLayout.d.ts

@@ -0,0 +1,62 @@
+import React from 'react';
+import type { GestureResponderEvent, StyleProp, ViewStyle } from 'react-native';
+export type MessagingCardLayoutProps = {
+  /** Type of messaging card. Determines background color and text color. */
+  type: 'upsell' | 'nudge';
+  /** Text or React node to display as the card title. Use a Text component to override default color and font. */
+  title?: React.ReactNode;
+  /** Text or React node to display as the card description. Use a Text component to override default color and font. */
+  description?: React.ReactNode;
+  /** Text or React node to display as a tag. When a string is provided, it will be rendered in a Tag component. */
+  tag?: React.ReactNode;
+  /**
+   * Action element to display. Can be a string (renders as default button) or a custom ReactNode.
+   * When a string is provided, use `onActionButtonPress` to handle presses.
+   */
+  action?: React.ReactNode;
+  /** Callback fired when the action button is pressed. Only used when `action` is a string. */
+  onActionButtonPress?: (event: GestureResponderEvent) => void;
+  /** Accessibility label for the action button. Only used when `action` is a string.
+   * @default action value (when action is a string)
+   */
+  actionButtonAccessibilityLabel?: string;
+  /** React node to display as the dismiss button. When provided, this will be rendered instead of the default dismiss button. */
+  dismissButton?: React.ReactNode;
+  /** Callback fired when the dismiss button is pressed. When provided, a default dismiss button will be rendered in the top-right corner. */
+  onDismissButtonPress?: (event: GestureResponderEvent) => void;
+  /** Accessibility label for the dismiss button.
+   * @default 'Dismiss {title}' when title is a string, otherwise 'Dismiss card'
+   */
+  dismissButtonAccessibilityLabel?: string;
+  /** Placement of the media content relative to the text content.
+   * @default 'end'
+   */
+  mediaPlacement: 'start' | 'end';
+  /** React node to display as the main media content. When provided, it will be rendered in an HStack container. */
+  media?: React.ReactNode;
+  styles?: {
+    layoutContainer?: StyleProp<ViewStyle>;
+    contentContainer?: StyleProp<ViewStyle>;
+    textContainer?: StyleProp<ViewStyle>;
+    mediaContainer?: StyleProp<ViewStyle>;
+    dismissButtonContainer?: StyleProp<ViewStyle>;
+  };
+};
+export declare const MessagingCardLayout: React.MemoExoticComponent<
+  ({
+    type,
+    title,
+    description,
+    tag,
+    action,
+    onActionButtonPress,
+    actionButtonAccessibilityLabel,
+    onDismissButtonPress,
+    dismissButtonAccessibilityLabel,
+    mediaPlacement,
+    media,
+    styles,
+    dismissButton,
+  }: MessagingCardLayoutProps) => import('react/jsx-runtime').JSX.Element
+>;
+//# sourceMappingURL=MessagingCardLayout.d.ts.map

package/dts/cards/MessagingCard/MessagingCardLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessagingCardLayout.d.ts","sourceRoot":"","sources":["../../../src/cards/MessagingCard/MessagingCardLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAUhF,MAAM,MAAM,wBAAwB,GAAG;IACrC,0EAA0E;IAC1E,IAAI,EAAE,QAAQ,GAAG,OAAO,CAAC;IACzB,gHAAgH;IAChH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,sHAAsH;IACtH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,iHAAiH;IACjH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,6FAA6F;IAC7F,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAC7D;;OAEG;IACH,8BAA8B,CAAC,EAAE,MAAM,CAAC;IACxC,+HAA+H;IAC/H,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,2IAA2I;IAC3I,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAC9D;;OAEG;IACH,+BAA+B,CAAC,EAAE,MAAM,CAAC;IACzC;;OAEG;IACH,cAAc,EAAE,OAAO,GAAG,KAAK,CAAC;IAChC,kHAAkH;IAClH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE;QACP,eAAe,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACvC,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACxC,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACrC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACtC,sBAAsB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAC/C,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,mBAAmB,mOAe3B,wBAAwB,6CAwK5B,CAAC"}

package/dts/cards/MessagingCard/__figma__/MessagingCard.figma.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=MessagingCard.figma.d.ts.map

package/dts/cards/MessagingCard/__figma__/MessagingCard.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessagingCard.figma.d.ts","sourceRoot":"","sources":["../../../../src/cards/MessagingCard/__figma__/MessagingCard.figma.tsx"],"names":[],"mappings":""}

package/dts/cards/MessagingCard/index.d.ts

@@ -0,0 +1,21 @@
+import type { StyleProp, View, ViewStyle } from 'react-native';
+import { type CardRootProps } from '../CardRoot';
+import { type MessagingCardLayoutProps } from './MessagingCardLayout';
+export type MessagingCardBaseProps = MessagingCardLayoutProps;
+export type MessagingCardProps = MessagingCardBaseProps &
+  Omit<CardRootProps, 'children'> & {
+    styles?: {
+      root?: StyleProp<ViewStyle>;
+    };
+  };
+export declare const MessagingCard: import('react').MemoExoticComponent<
+  import('react').ForwardRefExoticComponent<
+    MessagingCardLayoutProps &
+      Omit<CardRootProps, 'children'> & {
+        styles?: {
+          root?: StyleProp<ViewStyle>;
+        };
+      } & import('react').RefAttributes<View>
+  >
+>;
+//# sourceMappingURL=index.d.ts.map

package/dts/cards/MessagingCard/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/cards/MessagingCard/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG/D,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAE3D,OAAO,EAAuB,KAAK,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAE3F,MAAM,MAAM,sBAAsB,GAAG,wBAAwB,CAAC;AAE9D,MAAM,MAAM,kBAAkB,GAAG,sBAAsB,GACrD,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC,GAAG;IAChC,MAAM,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAC7B,CAAC;CACH,CAAC;AAOJ,eAAO,MAAM,aAAa;aAVb;QACP,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAC7B;yCA2DJ,CAAC"}

package/dts/cards/NudgeCard.d.ts

@@ -49,6 +49,33 @@ export type NudgeCardBaseProps = SharedProps &
     onPress?: PressableProps['onPress'];
   };
 export type NudgeCardProps = NudgeCardBaseProps;
+/**
+ * @deprecated Use `MessagingCard` with `type="nudge"` instead. NudgeCard will be removed in a future major release.
+ *
+ * Migration guide:
+ * ```tsx
+ * // Before
+ * <NudgeCard
+ *   title="Title"
+ *   description="Description"
+ *   pictogram="addToWatchlist"
+ *   action="Learn more"
+ *   onActionPress={handleAction}
+ *   onDismissPress={handleDismiss}
+ * />
+ *
+ * // After
+ * <MessagingCard
+ *   type="nudge"
+ *   title="Title"
+ *   description="Description"
+ *   media={<Pictogram dimension="48x48" name="addToWatchlist" />}
+ *   actions={<Button compact variant="secondary">Learn more</Button>}
+ *   onDismiss={handleDismiss}
+ *   mediaPlacement="end"
+ * />
+ * ```
+ */
 export declare const NudgeCard: React.MemoExoticComponent<
   ({
     title,

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

@@ -1 +1 @@
-{"version":3,"file":"NudgeCard.d.ts","sourceRoot":"","sources":["../../src/cards/NudgeCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEnD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,EACV,eAAe,EACf,cAAc,EACd,0BAA0B,EAC1B,wBAAwB,EACxB,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAQpC,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAC1C,IAAI,CAAC,eAAe,EAAE,WAAW,GAAG,OAAO,CAAC,GAC5C,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,GAAG;IACrD,gFAAgF;IAChF,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,sEAAsE;IACtE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,+FAA+F;IAC/F,SAAS,CAAC,EAAE,0BAA0B,CAAC;IACvC,oEAAoE;IACpE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,yDAAyD;IACzD,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB;;OAEG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAC7B;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACjC,cAAc,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IAC3C,aAAa,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IAC1C,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;CACrC,CAAC;AAEJ,MAAM,MAAM,cAAc,GAAG,kBAAkB,CAAC;AAEhD,eAAO,MAAM,SAAS,wNAkBjB,cAAc,6CAwGlB,CAAC"}
+{"version":3,"file":"NudgeCard.d.ts","sourceRoot":"","sources":["../../src/cards/NudgeCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEnD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,EACV,eAAe,EACf,cAAc,EACd,0BAA0B,EAC1B,wBAAwB,EACxB,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAQpC,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAC1C,IAAI,CAAC,eAAe,EAAE,WAAW,GAAG,OAAO,CAAC,GAC5C,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,GAAG;IACrD,gFAAgF;IAChF,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,sEAAsE;IACtE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,+FAA+F;IAC/F,SAAS,CAAC,EAAE,0BAA0B,CAAC;IACvC,oEAAoE;IACpE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,yDAAyD;IACzD,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB;;OAEG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAC7B;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACjC,cAAc,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IAC3C,aAAa,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IAC1C,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;CACrC,CAAC;AAEJ,MAAM,MAAM,cAAc,GAAG,kBAAkB,CAAC;AAEhD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,SAAS,wNAkBjB,cAAc,6CAwGlB,CAAC"}

package/dts/cards/UpsellCard.d.ts

@@ -36,6 +36,33 @@ export type UpsellCardBaseProps = SharedProps &
     dangerouslySetBackground?: string;
   };
 export type UpsellCardProps = UpsellCardBaseProps;
+/**
+ * @deprecated Use `MessagingCard` with `type="upsell"` instead. UpsellCard will be removed in a future major release.
+ *
+ * Migration guide:
+ * ```tsx
+ * // Before
+ * <UpsellCard
+ *   title="Title"
+ *   description="Description"
+ *   media={<RemoteImage ... />}
+ *   action="Get Started"
+ *   onActionPress={handleAction}
+ *   onDismissPress={handleDismiss}
+ * />
+ *
+ * // After
+ * <MessagingCard
+ *   type="upsell"
+ *   title="Title"
+ *   description="Description"
+ *   media={<RemoteImage ... />}
+ *   actions={<Button compact variant="secondary">Get Started</Button>}
+ *   onDismiss={handleDismiss}
+ *   mediaPlacement="end"
+ * />
+ * ```
+ */
 export declare const UpsellCard: React.MemoExoticComponent<
   ({
     title,

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

@@ -1 +1 @@
-{"version":3,"file":"UpsellCard.d.ts","sourceRoot":"","sources":["../../src/cards/UpsellCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAEjE,OAAO,KAAK,EACV,eAAe,EACf,wBAAwB,EACxB,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAOpC,MAAM,MAAM,mBAAmB,GAAG,WAAW,GAC3C,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,GACpD,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC,GAAG;IAC/B,uDAAuD;IACvD,aAAa,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IAC1C,wDAAwD;IACxD,cAAc,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IAC3C,8CAA8C;IAC9C,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IACpC,wDAAwD;IACxD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,0CAA0C;IAC1C,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAC7B;;OAEG;IACH,wBAAwB,CAAC,EAAE,MAAM,CAAC;CACnC,CAAC;AAEJ,MAAM,MAAM,eAAe,GAAG,mBAAmB,CAAC;AAElD,eAAO,MAAM,UAAU,sLAclB,eAAe,6CAmFnB,CAAC"}
+{"version":3,"file":"UpsellCard.d.ts","sourceRoot":"","sources":["../../src/cards/UpsellCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAEjE,OAAO,KAAK,EACV,eAAe,EACf,wBAAwB,EACxB,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAOpC,MAAM,MAAM,mBAAmB,GAAG,WAAW,GAC3C,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,GACpD,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC,GAAG;IAC/B,uDAAuD;IACvD,aAAa,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IAC1C,wDAAwD;IACxD,cAAc,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IAC3C,8CAA8C;IAC9C,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IACpC,wDAAwD;IACxD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,0CAA0C;IAC1C,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAC7B;;OAEG;IACH,wBAAwB,CAAC,EAAE,MAAM,CAAC;CACnC,CAAC;AAEJ,MAAM,MAAM,eAAe,GAAG,mBAAmB,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,UAAU,sLAclB,eAAe,6CAmFnB,CAAC"}

package/dts/cards/index.d.ts

@@ -4,8 +4,12 @@ export * from './CardFooter';
 export * from './CardGroup';
 export * from './CardHeader';
 export * from './CardMedia';
+export * from './CardRoot';
 export * from './AnnouncementCard';
 export * from './FeatureEntryCard';
 export * from './FeedCard';
 export * from './ContentCard';
+export * from './MediaCard';
+export * from './MessagingCard';
+export * from './DataCard';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/cards/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAE5B,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,YAAY,CAAC;AAE3B,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/cards/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAE3B,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,YAAY,CAAC;AAE3B,cAAc,eAAe,CAAC;AAE9B,cAAc,aAAa,CAAC;AAE5B,cAAc,iBAAiB,CAAC;AAEhC,cAAc,YAAY,CAAC"}

package/dts/examples/ExampleScreen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExampleScreen.d.ts","sourceRoot":"","sources":["../../src/examples/ExampleScreen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkE,MAAM,OAAO,CAAC;AACvF,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAG/D,OAAO,KAAK,EAAgB,QAAQ,EAAE,MAAM,eAAe,CAAC;AAM5D,KAAK,qBAAqB,GAAG,MAAM,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;AAC5D,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,EAAE,qBAAqB,GAAG,KAAK,CAAC,SAAS,EAAE,GAAG,KAAK,CAAC,SAAS,CAAC;IACtE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;AAM/B,eAAO,MAAM,OAAO,GAAI,kEAOrB,YAAY,4CA8Bd,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;oCAsCzB,CAAC"}
+{"version":3,"file":"ExampleScreen.d.ts","sourceRoot":"","sources":["../../src/examples/ExampleScreen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkE,MAAM,OAAO,CAAC;AACvF,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAG/D,OAAO,KAAK,EAAgB,QAAQ,EAAE,MAAM,eAAe,CAAC;AAM5D,KAAK,qBAAqB,GAAG,MAAM,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;AAC5D,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,EAAE,qBAAqB,GAAG,KAAK,CAAC,SAAS,EAAE,GAAG,KAAK,CAAC,SAAS,CAAC;IACtE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;AAM/B,eAAO,MAAM,OAAO,GAAI,kEAOrB,YAAY,4CA8Bd,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;oCAyCzB,CAAC"}

package/esm/alpha/data-card/DataCard.js

@@ -0,0 +1,44 @@
+const _excluded = ["root"],
+  _excluded2 = ["title", "subtitle", "titleAccessory", "thumbnail", "children", "layout", "style", "styles"];
+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 { forwardRef, memo } from 'react';
+import { CardRoot } from '../../cards/CardRoot';
+import { DataCardLayout } from './DataCardLayout';
+import { jsx as _jsx } from "react/jsx-runtime";
+const dataCardContainerProps = {
+  borderRadius: 500,
+  background: 'bgAlternate',
+  overflow: 'hidden'
+};
+export const DataCard = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      title,
+      subtitle,
+      titleAccessory,
+      thumbnail,
+      children,
+      layout,
+      style,
+      styles: {
+        root: rootStyle
+      } = {}
+    } = _ref,
+    layoutStyles = _objectWithoutPropertiesLoose(_ref.styles, _excluded),
+    props = _objectWithoutPropertiesLoose(_ref, _excluded2);
+  return /*#__PURE__*/_jsx(CardRoot, _extends({
+    ref: ref,
+    style: [style, rootStyle]
+  }, dataCardContainerProps, props, {
+    children: /*#__PURE__*/_jsx(DataCardLayout, {
+      layout: layout,
+      styles: layoutStyles,
+      subtitle: subtitle,
+      thumbnail: thumbnail,
+      title: title,
+      titleAccessory: titleAccessory,
+      children: children
+    })
+  }));
+}));
+DataCard.displayName = 'DataCard';

package/esm/alpha/data-card/DataCardLayout.js

@@ -0,0 +1,80 @@
+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, { memo, useMemo } from 'react';
+import { Box } from '../../layout/Box';
+import { HStack } from '../../layout/HStack';
+import { VStack } from '../../layout/VStack';
+import { Text } from '../../typography';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const DataCardLayout = /*#__PURE__*/memo(_ref => {
+  let {
+    title,
+    subtitle,
+    titleAccessory,
+    thumbnail,
+    layout = 'vertical',
+    children,
+    styles = {}
+  } = _ref;
+  const titleNode = useMemo(() => {
+    if (typeof title === 'string') {
+      return /*#__PURE__*/_jsx(Text, {
+        font: "headline",
+        numberOfLines: 2,
+        children: title
+      });
+    }
+    return title;
+  }, [title]);
+  const subtitleNode = useMemo(() => {
+    if (typeof subtitle === 'string') {
+      return /*#__PURE__*/_jsx(Text, {
+        color: "fgMuted",
+        font: "label2",
+        numberOfLines: 1,
+        children: subtitle
+      });
+    }
+    return subtitle;
+  }, [subtitle]);
+  const layoutContainerSpacingProps = useMemo(() => {
+    return {
+      flexDirection: layout === 'horizontal' ? 'row' : 'column',
+      gap: layout === 'horizontal' ? 2 : 1,
+      padding: 2
+    };
+  }, [layout]);
+  const headerSpacingProps = useMemo(() => {
+    return {
+      flexDirection: layout === 'horizontal' ? 'column' : 'row',
+      gap: layout === 'horizontal' ? 2 : 1.5,
+      justifyContent: layout === 'horizontal' ? 'space-between' : 'flex-start',
+      alignItems: layout === 'horizontal' ? 'flex-start' : 'center'
+    };
+  }, [layout]);
+  return /*#__PURE__*/_jsxs(Box, _extends({
+    flexBasis: "100%",
+    flexGrow: 1,
+    flexShrink: 1,
+    style: styles == null ? void 0 : styles.layoutContainer
+  }, layoutContainerSpacingProps, {
+    children: [/*#__PURE__*/_jsxs(Box, _extends({
+      flexGrow: 1,
+      flexShrink: 1,
+      style: styles == null ? void 0 : styles.headerContainer
+    }, headerSpacingProps, {
+      children: [thumbnail, /*#__PURE__*/_jsxs(VStack, {
+        flexShrink: 1,
+        overflow: "hidden",
+        style: styles == null ? void 0 : styles.textContainer,
+        children: [subtitleNode, /*#__PURE__*/_jsxs(HStack, {
+          alignItems: "center",
+          flexWrap: "wrap",
+          gap: 0.5,
+          style: styles == null ? void 0 : styles.titleContainer,
+          children: [titleNode, titleAccessory]
+        })]
+      })]
+    })), children]
+  }));
+});
+DataCardLayout.displayName = 'DataCardLayout';

package/esm/alpha/data-card/__figma__/DataCard.figma.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { figma } from '@figma/code-connect';
+import { DataCard } from '../DataCard';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(DataCard, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=72941-17832&m=dev', {
+  imports: ["import { DataCard } from '@coinbase/cds-mobile/alpha/data-card'", "import { Avatar } from '@coinbase/cds-mobile/media/Avatar'"],
+  props: {
+    subtitle: figma.boolean('show subtitle', {
+      true: figma.string('Subtitle'),
+      false: undefined
+    }),
+    thumbnail: figma.boolean('show media', {
+      true: figma.instance('↳ media'),
+      false: undefined
+    })
+  },
+  example: _ref => {
+    let {
+      thumbnail,
+      subtitle
+    } = _ref;
+    return /*#__PURE__*/_jsx(DataCard, {
+      layout: "vertical",
+      subtitle: subtitle,
+      thumbnail: thumbnail,
+      title: "Title"
+    });
+  }
+});