@coinbase/cds-mobile 0.0.0 → 8.13.2

package/esm/buttons/__stories__/IconCounterButton.stories.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import { assets } from '@coinbase/cds-common/internal/data/assets';
+import { DotSymbol } from '../../dots';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { HStack } from '../../layout';
+import { IconCounterButton } from '../IconCounterButton';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const IconCounterButtonScreen = () => {
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(Example, {
+      title: "Normal",
+      children: /*#__PURE__*/_jsxs(HStack, {
+        gap: 4,
+        children: [/*#__PURE__*/_jsx(IconCounterButton, {
+          accessibilityLabel: "99 likes, like",
+          count: 99,
+          icon: "heart"
+        }), /*#__PURE__*/_jsx(IconCounterButton, {
+          accessibilityLabel: "4200 comments, comment",
+          count: 4200,
+          icon: "comment"
+        }), /*#__PURE__*/_jsx(IconCounterButton, {
+          accessibilityLabel: "9.9 million shares, share",
+          count: 9900000,
+          icon: "arrowsHorizontal"
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Colored",
+      children: /*#__PURE__*/_jsxs(HStack, {
+        gap: 4,
+        children: [/*#__PURE__*/_jsx(IconCounterButton, {
+          active: true,
+          accessibilityLabel: "99 likes, like",
+          color: "fgNegative",
+          count: 99,
+          icon: "heart"
+        }), /*#__PURE__*/_jsx(IconCounterButton, {
+          accessibilityLabel: "4200 comments, comment",
+          color: "fgPrimary",
+          count: 4200,
+          icon: "comment"
+        }), /*#__PURE__*/_jsx(IconCounterButton, {
+          accessibilityLabel: "6.9 million shares, share",
+          count: 69000000,
+          dangerouslySetColor: "orange",
+          icon: "arrowsHorizontal"
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Custom Icon",
+      children: /*#__PURE__*/_jsxs(HStack, {
+        gap: 4,
+        children: [/*#__PURE__*/_jsx(IconCounterButton, {
+          count: 99,
+          icon: /*#__PURE__*/_jsx(DotSymbol, {
+            accessibilityLabel: "Bitcoin, 99$",
+            size: "m",
+            source: assets.btc.imageUrl
+          })
+        }), /*#__PURE__*/_jsx(IconCounterButton, {
+          count: 4200,
+          icon: /*#__PURE__*/_jsx(DotSymbol, {
+            accessibilityLabel: "Ethereum, 4200$",
+            size: "m",
+            source: assets.eth.imageUrl
+          })
+        }), /*#__PURE__*/_jsx(IconCounterButton, {
+          count: 9900000,
+          icon: /*#__PURE__*/_jsx(DotSymbol, {
+            accessibilityLabel: "Uniswap, 9.9M$",
+            size: "m",
+            source: assets.uni.imageUrl
+          })
+        })]
+      })
+    })]
+  });
+};
+export default IconCounterButtonScreen;

package/esm/buttons/__stories__/SlideButton.stories.js

@@ -0,0 +1,169 @@
+const _excluded = ["checked", "uncheckedLabel", "checkedLabel"],
+  _excluded2 = ["checked"],
+  _excluded3 = ["checked"];
+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, { useCallback, useState } from 'react';
+import { IconButton } from '../../buttons/IconButton';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { Icon } from '../../icons';
+import { HStack, VStack } from '../../layout';
+import { Pressable } from '../../system';
+import { TextHeadline, TextLabel1, TextLabel2 } from '../../typography';
+import { SlideButton } from '../SlideButton';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SlideButtonExample = _ref => {
+  let {
+      checked: checkedProp = false,
+      uncheckedLabel,
+      checkedLabel
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const [checked, setChecked] = useState(checkedProp);
+  const toggleOff = useCallback(() => setChecked(false), []);
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 1,
+    children: [/*#__PURE__*/_jsxs(HStack, {
+      alignItems: "center",
+      gap: 1,
+      justifyContent: "flex-end",
+      paddingBottom: 2,
+      children: [/*#__PURE__*/_jsx(TextLabel1, {
+        children: "Reset"
+      }), /*#__PURE__*/_jsx(IconButton, {
+        compact: true,
+        name: "refresh",
+        onPress: toggleOff
+      })]
+    }), /*#__PURE__*/_jsx(SlideButton, _extends({
+      checked: checked,
+      checkedLabel: checkedLabel != null ? checkedLabel : 'Confirming...',
+      onChange: setChecked,
+      uncheckedLabel: uncheckedLabel != null ? uncheckedLabel : 'Swipe to confirm'
+    }, props))]
+  });
+};
+const CustomHandle = _ref2 => {
+  let {
+      checked
+    } = _ref2,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+  return /*#__PURE__*/_jsx(Pressable, _extends({}, props, {
+    accessibilityLabel: "Demo button",
+    accessibilityRole: "button",
+    background: checked ? 'bgPositive' : 'bgNegative',
+    borderRadius: 300,
+    width: "100%",
+    children: /*#__PURE__*/_jsx(HStack, {
+      alignItems: "center",
+      height: "100%",
+      justifyContent: "center",
+      width: "100%",
+      children: /*#__PURE__*/_jsx(HStack, {
+        alignItems: "center",
+        height: "100%",
+        padding: 2,
+        pin: "right",
+        children: /*#__PURE__*/_jsx(TextLabel1, {
+          children: "\u27A1\uFE0F"
+        })
+      })
+    })
+  }));
+};
+const CustomBackground = _ref3 => {
+  let {
+      checked
+    } = _ref3,
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded3);
+  return /*#__PURE__*/_jsx(HStack, _extends({}, props, {
+    bordered: true,
+    alignItems: "center",
+    background: "bgSecondary",
+    borderColor: checked ? 'fgPositive' : 'fgNegative',
+    borderRadius: 300,
+    height: "100%",
+    justifyContent: "center",
+    width: "100%",
+    children: /*#__PURE__*/_jsx(TextHeadline, {
+      children: "Slide me"
+    })
+  }));
+};
+export const SlideButtonStories = () => {
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(Example, {
+      title: "Default",
+      children: /*#__PURE__*/_jsx(SlideButtonExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Long label",
+      children: /*#__PURE__*/_jsx(SlideButtonExample, {
+        uncheckedLabel: "Super long label that will get truncated when it exceeds the available space"
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Auto complete slide on threshold met",
+      children: /*#__PURE__*/_jsx(SlideButtonExample, {
+        autoCompleteSlideOnThresholdMet: true
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "With custom nodes",
+      children: /*#__PURE__*/_jsx(SlideButtonExample, {
+        endCheckedNode: /*#__PURE__*/_jsx(Icon, {
+          color: "fgInverse",
+          name: "bellCheck",
+          size: "m"
+        }),
+        startUncheckedNode: /*#__PURE__*/_jsx(Icon, {
+          color: "fgInverse",
+          name: "bell",
+          size: "m"
+        })
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Positive variant",
+      children: /*#__PURE__*/_jsx(SlideButtonExample, {
+        variant: "positive"
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Negative variant",
+      children: /*#__PURE__*/_jsx(SlideButtonExample, {
+        variant: "negative"
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Labels as nodes",
+      children: /*#__PURE__*/_jsx(SlideButtonExample, {
+        checkedLabel: /*#__PURE__*/_jsx(TextLabel2, {
+          color: "fgInverse",
+          children: "Node checked label"
+        }),
+        uncheckedLabel: /*#__PURE__*/_jsx(TextLabel2, {
+          children: "Node label"
+        })
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Disabled",
+      children: /*#__PURE__*/_jsx(SlideButtonExample, {
+        disabled: true
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Checked",
+      children: /*#__PURE__*/_jsx(SlideButtonExample, {
+        checked: true
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Checked and Disabled",
+      children: /*#__PURE__*/_jsx(SlideButtonExample, {
+        checked: true,
+        disabled: true
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Custom components",
+      children: /*#__PURE__*/_jsx(SlideButtonExample, {
+        SlideButtonBackgroundComponent: CustomBackground,
+        SlideButtonHandleComponent: CustomHandle,
+        height: 50
+      })
+    })]
+  });
+};
+export default SlideButtonStories;

package/esm/buttons/index.js

@@ -0,0 +1,6 @@
+export * from './AvatarButton';
+export * from './Button';
+export * from './ButtonGroup';
+export * from './IconButton';
+export * from './IconCounterButton';
+export * from './SlideButton';

package/esm/cards/AnnouncementCard.js

@@ -0,0 +1,43 @@
+const _excluded = ["onPress", "width", "title", "description", "testID", "accessibilityLabel", "accessibilityHint", "elevation", "borderRadius", "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 This component will be removed in a future version. Use NudgeCard or UpsellCard instead. */
+export const AnnouncementCard = /*#__PURE__*/memo(function AnnouncementCard(_ref) {
+  let {
+      onPress,
+      width,
+      title,
+      description,
+      testID,
+      accessibilityLabel,
+      accessibilityHint,
+      elevation = 0,
+      borderRadius = 0,
+      onActionPress
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const accessibilityLabelValue = typeof title === 'string' && accessibilityLabel === undefined ? title : accessibilityLabel;
+  const accessibilityHintValue = typeof description === 'string' && accessibilityHint === undefined ? description : accessibilityHint;
+  return /*#__PURE__*/_jsx(Card, {
+    accessibilityHint: accessibilityHintValue,
+    accessibilityLabel: accessibilityLabelValue,
+    borderRadius: borderRadius,
+    elevation: elevation,
+    flexShrink: 0,
+    onPress: onPress,
+    testID: testID,
+    width: width,
+    children: /*#__PURE__*/_jsx(CardBody, _extends({
+      alignItems: "flex-start",
+      description: description,
+      onActionPress: onActionPress,
+      title: title
+    }, props))
+  });
+});

package/esm/cards/Card.js

@@ -0,0 +1,100 @@
+const _excluded = ["children", "background", "elevation", "size", "onPress", "pin", "style", "width", "height", "testID", "accessibilityLabel", "accessibilityHint", "pressableProps", "borderRadius", "noScaleOnPress"];
+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 { cardSizes } from '@coinbase/cds-common/tokens/card';
+import { useTheme } from '../hooks/useTheme';
+import { VStack } from '../layout/VStack';
+import { pinStyles } from '../styles/pinStyles';
+import { Pressable } from '../system/Pressable';
+import { jsx as _jsx } from "react/jsx-runtime";
+const getBorderRadiusPinStyle = borderRadius => ({
+  top: {
+    borderBottomRightRadius: borderRadius,
+    borderBottomLeftRadius: borderRadius,
+    borderTopRightRadius: 0,
+    borderTopLeftRadius: 0,
+    borderTopWidth: 0
+  },
+  right: {
+    borderTopLeftRadius: borderRadius,
+    borderBottomLeftRadius: borderRadius,
+    borderBottomRightRadius: 0,
+    borderTopRightRadius: 0,
+    borderRightWidth: 0
+  },
+  bottom: {
+    borderTopRightRadius: borderRadius,
+    borderTopLeftRadius: borderRadius,
+    borderBottomRightRadius: 0,
+    borderBottomLeftRadius: 0,
+    borderBottomWidth: 0
+  },
+  left: {
+    borderTopRightRadius: borderRadius,
+    borderBottomRightRadius: borderRadius,
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0,
+    borderLeftWidth: 0
+  },
+  all: {}
+});
+export const Card = /*#__PURE__*/memo(function OldCard(_ref) {
+  let {
+      children,
+      background = 'bg',
+      elevation = 1,
+      size = 'large',
+      onPress,
+      pin,
+      style,
+      width: widthProps,
+      height: heightProps,
+      testID,
+      accessibilityLabel,
+      accessibilityHint,
+      pressableProps,
+      borderRadius = 200,
+      noScaleOnPress
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const width = widthProps != null ? widthProps : cardSizes[size].width;
+  const height = heightProps != null ? heightProps : cardSizes[size].height;
+  const theme = useTheme();
+  const borderRadiusPinStyle = useMemo(() => {
+    return pin ? getBorderRadiusPinStyle(theme.borderRadius[200])[pin] : undefined;
+  }, [pin, theme]);
+  const contentStyles = useMemo(() => [borderRadiusPinStyle, style], [borderRadiusPinStyle, style]);
+  const content = useMemo(() => /*#__PURE__*/_jsx(VStack, _extends({
+    accessibilityHint: onPress ? undefined : accessibilityHint,
+    accessibilityLabel: onPress ? undefined : accessibilityLabel,
+    background: onPress ? undefined : background,
+    borderRadius: borderRadius,
+    elevation: onPress ? undefined : elevation,
+    height: onPress ? undefined : height,
+    pin: onPress ? undefined : pin,
+    style: contentStyles,
+    testID: onPress ? undefined : testID,
+    width: onPress ? undefined : width
+  }, props, {
+    children: children
+  })), [accessibilityHint, accessibilityLabel, background, borderRadius, children, contentStyles, elevation, height, onPress, pin, props, testID, width]);
+  return onPress ? /*#__PURE__*/_jsx(Pressable, _extends({
+    accessibilityHint: accessibilityHint,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityRole: "button",
+    background: background,
+    borderRadius: borderRadius,
+    elevation: elevation,
+    noScaleOnPress: noScaleOnPress,
+    onPress: onPress,
+    style: _extends({}, pin ? pinStyles[pin] : undefined, {
+      width: width,
+      height: height
+    }),
+    testID: testID
+  }, pressableProps, {
+    children: content
+  })) : content;
+});
+Card.displayName = 'Card';

package/esm/cards/CardBody.js

@@ -0,0 +1,169 @@
+const _excluded = ["children", "compact", "flush", "transparent", "variant", "numberOfLines"],
+  _excluded2 = ["testID", "title", "description", "mediaPlacement", "onActionPress", "actionLabel", "action", "pictogram", "spotSquare", "image", "media", "padding", "paddingX", "paddingY", "paddingTop", "paddingEnd", "paddingBottom", "paddingStart", "numberOfLines", "accessibilityLabel", "children", "compact"];
+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 { defaultMediaSize } from '@coinbase/cds-common/tokens/card';
+import { Button } from '../buttons/Button';
+import { HStack } from '../layout/HStack';
+import { VStack } from '../layout/VStack';
+import { Text } from '../typography/Text';
+import { CardMedia } from './CardMedia';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const CardBodyAction = /*#__PURE__*/memo(function CardBodyAction(_ref) {
+  let {
+      children,
+      compact = true,
+      flush = 'start',
+      transparent = true,
+      variant = 'primary',
+      numberOfLines = 3
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/_jsx(Button, _extends({
+    noScaleOnPress: true,
+    compact: compact,
+    flush: flush,
+    numberOfLines: numberOfLines,
+    transparent: transparent,
+    variant: variant
+  }, props, {
+    children: children
+  }));
+});
+export const CardBody = /*#__PURE__*/memo(function CardBody(_ref2) {
+  var _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref0, _props$maxWidth, _props$minHeight;
+  let {
+      testID = 'card-body',
+      title,
+      description,
+      mediaPlacement = 'end',
+      onActionPress,
+      actionLabel,
+      action: actionProp,
+      pictogram,
+      spotSquare,
+      image,
+      media: mediaProp,
+      padding,
+      paddingX,
+      paddingY,
+      paddingTop,
+      paddingEnd,
+      paddingBottom,
+      paddingStart,
+      numberOfLines = 3,
+      accessibilityLabel,
+      children,
+      compact
+    } = _ref2,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+  const paddingBottomValue = (_ref3 = (_ref4 = paddingBottom != null ? paddingBottom : paddingY) != null ? _ref4 : padding) != null ? _ref3 : compact ? 1 : 3;
+  const paddingTopValue = (_ref5 = (_ref6 = paddingTop != null ? paddingTop : paddingY) != null ? _ref6 : padding) != null ? _ref5 : compact ? 2 : 3;
+  const paddingStartValue = (_ref7 = (_ref8 = paddingStart != null ? paddingStart : paddingX) != null ? _ref8 : padding) != null ? _ref7 : compact ? 2 : 3;
+  const paddingEndValue = (_ref9 = (_ref0 = paddingEnd != null ? paddingEnd : paddingX) != null ? _ref0 : padding) != null ? _ref9 : compact ? 2 : 3;
+  let mediaContent = mediaProp;
+  if (spotSquare) {
+    mediaContent = /*#__PURE__*/_jsx(CardMedia, {
+      name: spotSquare,
+      placement: mediaPlacement,
+      type: "spotSquare"
+    });
+  }
+  if (pictogram) {
+    mediaContent = /*#__PURE__*/_jsx(CardMedia, {
+      name: pictogram,
+      placement: mediaPlacement,
+      type: "pictogram"
+    });
+  }
+  if (image) {
+    mediaContent = /*#__PURE__*/_jsx(CardMedia, {
+      placement: mediaPlacement,
+      src: image,
+      type: "image"
+    });
+  }
+  const hasMedia = !!mediaContent;
+  const maxWidth = (_props$maxWidth = props.maxWidth) != null ? _props$maxWidth : hasMedia ? '70%' : undefined;
+  const minHeight = (_props$minHeight = props.minHeight) != null ? _props$minHeight : hasMedia ? defaultMediaSize.height : undefined;
+  const action = useMemo(() => {
+    if (actionLabel && onActionPress) {
+      return /*#__PURE__*/_jsx(CardBodyAction, {
+        accessibilityLabel: accessibilityLabel != null ? accessibilityLabel : actionLabel,
+        endIcon: "forwardArrow",
+        onPress: onActionPress,
+        testID: testID + "-action",
+        children: actionLabel
+      });
+    }
+    return actionProp;
+  }, [accessibilityLabel, actionLabel, actionProp, onActionPress, testID]);
+  const textProps = useMemo(() => ({
+    numberOfLines,
+    ellipsize: 'tail',
+    transform: 'none'
+  }), [numberOfLines]);
+  if (mediaPlacement === 'above') {
+    return /*#__PURE__*/_jsxs(VStack, _extends({
+      gap: 2,
+      paddingBottom: paddingBottomValue,
+      paddingTop: paddingTopValue,
+      testID: testID
+    }, props, {
+      children: [mediaContent, /*#__PURE__*/_jsxs(VStack, {
+        gap: 1,
+        paddingEnd: paddingEndValue,
+        paddingStart: paddingStartValue,
+        children: [typeof title === 'string' ? /*#__PURE__*/_jsx(Text, _extends({
+          font: "headline"
+        }, textProps, {
+          testID: testID + "-title",
+          children: title
+        })) : title, typeof description === 'string' ? /*#__PURE__*/_jsx(Text, _extends({
+          color: "fgMuted",
+          font: "label2"
+        }, textProps, {
+          testID: testID + "-description",
+          children: description
+        })) : description, action]
+      })]
+    }));
+  }
+  return /*#__PURE__*/_jsxs(HStack, _extends({
+    alignItems: "center",
+    flexGrow: 1,
+    gap: 1,
+    justifyContent: "space-between",
+    minHeight: minHeight,
+    paddingBottom: paddingBottomValue,
+    paddingEnd: paddingEndValue,
+    paddingStart: paddingStartValue,
+    paddingTop: paddingTopValue,
+    testID: testID
+  }, props, {
+    children: [/*#__PURE__*/_jsxs(VStack, {
+      alignItems: "flex-start",
+      flexShrink: 1,
+      gap: 2,
+      maxWidth: maxWidth,
+      children: [/*#__PURE__*/_jsxs(VStack, {
+        gap: 1,
+        maxWidth: "100%",
+        paddingTop: mediaContent ? 0 : 2,
+        children: [typeof title === 'string' ? /*#__PURE__*/_jsx(Text, _extends({
+          font: "headline"
+        }, textProps, {
+          testID: testID + "-title",
+          children: title
+        })) : title, typeof description === 'string' ? /*#__PURE__*/_jsx(Text, _extends({
+          color: "fgMuted",
+          font: "label2"
+        }, textProps, {
+          testID: testID + "-description",
+          children: description
+        })) : description]
+      }), children, action]
+    }), mediaContent]
+  }));
+});

package/esm/cards/CardFooter.js

@@ -0,0 +1,23 @@
+const _excluded = ["children", "paddingBottom", "paddingX", "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, { memo } from 'react';
+import { gutter } from '@coinbase/cds-common/tokens/sizing';
+import { HStack } from '../layout/HStack';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const CardFooter = /*#__PURE__*/memo(function CardFooter(_ref) {
+  let {
+      children,
+      paddingBottom = 2,
+      paddingX = gutter,
+      testID
+    } = _ref,
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/_jsx(HStack, _extends({
+    paddingBottom: paddingBottom,
+    paddingX: paddingX,
+    testID: testID
+  }, otherProps, {
+    children: children
+  }));
+});

package/esm/cards/CardGroup.js

@@ -0,0 +1,30 @@
+const _excluded = ["accessibilityLabel", "accessibilityHint", "children", "direction", "divider", "marginX"];
+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 { gutter } from '@coinbase/cds-common/tokens/sizing';
+import { Divider } from '../layout/Divider';
+import { Group } from '../layout/Group';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const CardGroup = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function CardGroup(_ref, ref) {
+  let {
+      accessibilityLabel,
+      accessibilityHint = accessibilityLabel,
+      children,
+      direction = 'vertical',
+      divider = Divider,
+      marginX = direction === 'horizontal' ? 0 : -gutter
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/_jsx(Group, _extends({
+    ref: ref,
+    accessibilityHint: accessibilityHint,
+    accessibilityLabel: accessibilityLabel,
+    direction: direction,
+    divider: divider,
+    marginX: marginX
+  }, props, {
+    children: children
+  }));
+}));
+CardGroup.displayName = 'CardGroup';

package/esm/cards/CardHeader.js

@@ -0,0 +1,40 @@
+import React, { memo } from 'react';
+import { HStack } from '../layout/HStack';
+import { RemoteImage } from '../media/RemoteImage';
+import { Text } from '../typography/Text';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const CardHeader = /*#__PURE__*/memo(_ref => {
+  let {
+    avatar,
+    metaData,
+    description,
+    action,
+    testID
+  } = _ref;
+  return /*#__PURE__*/_jsxs(HStack, {
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingX: 3,
+    paddingY: 2,
+    testID: testID,
+    children: [/*#__PURE__*/_jsxs(HStack, {
+      alignItems: "center",
+      flexGrow: 1,
+      gap: 1,
+      children: [avatar ? /*#__PURE__*/_jsx(RemoteImage, {
+        height: 32,
+        resizeMode: "center",
+        source: {
+          uri: avatar
+        },
+        width: 32
+      }) : null, !!description && /*#__PURE__*/_jsx(Text, {
+        font: "label1",
+        children: description
+      }), !!metaData && /*#__PURE__*/_jsx(Text, {
+        font: "legal",
+        children: metaData
+      })]
+    }), action]
+  });
+});