@coinbase/cds-mobile 8.66.2 → 9.0.0-rc.1

package/esm/buttons/IconButton.js

@@ -1,14 +1,11 @@
-const _excluded = ["name", "active", "variant", "transparent", "compact", "background", "color", "borderColor", "iconSize", "borderWidth", "borderRadius", "height", "width", "feedback", "flush", "loading", "progressCircleSize", "style", "accessibilityHint", "accessibilityLabel"];
+const _excluded = ["name", "active", "variant", "transparent", "compact", "background", "color", "borderColor", "iconSize", "borderWidth", "borderRadius", "feedback", "flush", "padding", "loading", "progressCircleSize", "accessibilityHint", "accessibilityLabel"];
 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, useCallback, useMemo } from 'react';
+import { forwardRef, memo } from 'react';
 import { transparentVariants, variants } from '@coinbase/cds-common/tokens/button';
-import { interactableHeight } from '@coinbase/cds-common/tokens/interactableHeight';
-import { getButtonSpacingProps } from '@coinbase/cds-common/utils/getButtonSpacingProps';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
 import { Icon } from '../icons/Icon';
-import { Box } from '../layout/Box';
 import { Pressable } from '../system/Pressable';
 import { ProgressCircle } from '../visualizations/ProgressCircle';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -24,15 +21,14 @@ export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref
       color,
       borderColor,
       iconSize = compact ? 's' : 'm',
-      borderWidth = 100,
+      borderWidth = 0,
+      // remove Pressable's default transparent border
       borderRadius = 1000,
-      height = interactableHeight[compact ? 'compact' : 'regular'],
-      width = interactableHeight[compact ? 'compact' : 'regular'],
       feedback = compact ? 'light' : 'normal',
       flush,
+      padding = compact ? 1.5 : 2,
       loading,
       progressCircleSize,
-      style,
       accessibilityHint,
       accessibilityLabel
     } = mergedProps,
@@ -44,48 +40,32 @@ export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref
   const colorValue = color != null ? color : variantStyle.color;
   const backgroundValue = background != null ? background : variantStyle.background;
   const borderColorValue = borderColor != null ? borderColor : variantStyle.borderColor;
-  const {
-    marginStart,
-    marginEnd
-  } = getButtonSpacingProps({
-    compact,
-    flush
-  });
-  const sizingStyle = useMemo(() => ({
-    height: height,
-    width: width,
-    alignItems: 'center',
-    flexDirection: 'column',
-    justifyContent: 'center'
-  }), [height, width]);
-  const pressableStyle = useCallback(state => [sizingStyle, typeof style === 'function' ? style(state) : style], [sizingStyle, style]);
+  const flushMargin = flush ? -padding : undefined;
   return /*#__PURE__*/_jsx(Pressable, _extends({
     ref: ref,
     accessibilityHint: accessibilityHint,
     accessibilityLabel: loading ? (accessibilityLabel != null ? accessibilityLabel : '') + ", loading" : accessibilityLabel,
+    alignItems: "center",
+    alignSelf: "flex-start",
     background: backgroundValue,
     borderColor: borderColorValue,
     borderRadius: borderRadius,
     borderWidth: borderWidth,
     feedback: feedback,
+    flexDirection: "column",
+    justifyContent: "center",
     loading: loading,
-    marginEnd: marginEnd,
-    marginStart: marginStart,
-    style: pressableStyle,
+    marginEnd: flush === 'end' ? flushMargin : undefined,
+    marginStart: flush === 'start' ? flushMargin : undefined,
+    padding: padding,
     transparentWhileInactive: transparent
   }, props, {
-    children: loading ? /*#__PURE__*/_jsx(Box, {
-      alignItems: "center",
-      height: height,
-      justifyContent: "center",
-      width: width,
-      children: /*#__PURE__*/_jsx(ProgressCircle, {
-        indeterminate: true,
-        color: colorValue,
-        size: progressCircleSize != null ? progressCircleSize : iconSizeValue,
-        testID: props.testID ? props.testID + "-progress-circle" : undefined,
-        weight: "thin"
-      })
+    children: loading ? /*#__PURE__*/_jsx(ProgressCircle, {
+      indeterminate: true,
+      color: colorValue,
+      size: progressCircleSize != null ? progressCircleSize : iconSizeValue,
+      testID: props.testID ? props.testID + "-progress-circle" : undefined,
+      weight: "thin"
     }) :
     /*#__PURE__*/
     /* TO DO: test using currentColor like web does on Icon here */
@@ -93,8 +73,7 @@ export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref
       active: active,
       color: colorValue,
       name: name,
-      size: iconSize,
-      style: sizingStyle
+      size: iconSize
     })
   }));
 }));

package/esm/buttons/IconCounterButton.js

@@ -1,7 +1,7 @@
-const _excluded = ["icon", "iconSize", "size", "active", "count", "color", "dangerouslySetColor"];
+const _excluded = ["icon", "size", "active", "count", "color", "dangerouslySetColor", "styles", "style"];
 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 React, { forwardRef, memo, useMemo } from 'react';
 import { formatCount } from '@coinbase/cds-common/utils/formatCount';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Icon } from '../icons';
@@ -13,17 +13,30 @@ export const IconCounterButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(funct
   const mergedProps = useComponentConfig('IconCounterButton', _props);
   const {
       icon,
-      iconSize = 's',
-      size = iconSize,
+      size = 's',
       active,
       count = 0,
       color = 'fg',
-      dangerouslySetColor
+      dangerouslySetColor,
+      styles,
+      style
     } = mergedProps,
     props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
+  const rootStyleOverride = styles == null ? void 0 : styles.root;
+  const rootStyle = useMemo(() => {
+    if (typeof style === 'function' || typeof rootStyleOverride === 'function') {
+      return state => {
+        const baseStyle = typeof style === 'function' ? style(state) : style;
+        const rootOverride = typeof rootStyleOverride === 'function' ? rootStyleOverride(state) : rootStyleOverride;
+        return [baseStyle, rootOverride];
+      };
+    }
+    return [style, rootStyleOverride];
+  }, [rootStyleOverride, style]);
   return /*#__PURE__*/_jsx(Pressable, _extends({
     ref: ref,
-    background: "transparent"
+    background: "transparent",
+    style: rootStyle
   }, props, {
     children: /*#__PURE__*/_jsxs(HStack, {
       alignItems: "center",
@@ -33,7 +46,8 @@ export const IconCounterButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(funct
         color: color,
         dangerouslySetColor: dangerouslySetColor,
         name: icon,
-        size: size
+        size: size,
+        style: styles == null ? void 0 : styles.icon
       }) : icon, count > 0 ? /*#__PURE__*/_jsx(Text, {
         mono: true,
         font: "label1",

package/esm/buttons/SlideButton.js

@@ -1,17 +1,18 @@
 const _excluded = ["checked", "compact", "borderRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "uncheckedLabel", "checkedLabel", "onSlideStart", "onSlideCancel", "onSlideEnd", "onSlideComplete", "onChange", "disabled", "height", "checkThreshold", "SlideButtonHandleComponent", "SlideButtonBackgroundComponent", "styles", "testID", "autoCompleteSlideOnThresholdMet", "variant", "startUncheckedNode", "endCheckedNode"];
 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, useCallback, useId, useMemo } from 'react';
+import React, { forwardRef, memo, useCallback, useEffect, useId, useMemo } from 'react';
 import { View } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
-import { interactableHeight } from '@coinbase/cds-common/tokens/interactableHeight';
-import { animated, to, useSpring } from '@react-spring/native';
+import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useLayout } from '../hooks/useLayout';
 import { DefaultSlideButtonBackground } from './DefaultSlideButtonBackground';
-import { animationConfig, DefaultSlideButtonHandle } from './DefaultSlideButtonHandle';
+import { DefaultSlideButtonHandle, slideButtonSpringConfig } from './DefaultSlideButtonHandle';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const slideButtonTestID = 'slide-button';
+export const DEFAULT_COMPACT_HEIGHT = 40;
+export const DEFAULT_REGULAR_HEIGHT = 56;
 export const SlideButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
   const mergedProps = useComponentConfig('SlideButton', _props);
   const {
@@ -30,7 +31,7 @@ export const SlideButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, re
       onSlideComplete,
       onChange,
       disabled,
-      height,
+      height = compact ? DEFAULT_COMPACT_HEIGHT : DEFAULT_REGULAR_HEIGHT,
       checkThreshold = 0.7,
       SlideButtonHandleComponent = DefaultSlideButtonHandle,
       SlideButtonBackgroundComponent = DefaultSlideButtonBackground,
@@ -44,16 +45,13 @@ export const SlideButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, re
     props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const labelId = useId();
   const [containerSize, onLayout] = useLayout();
-  const {
-    progress
-  } = useSpring({
-    progress: checked ? 1 : 0,
-    config: animationConfig
-  });
-  const buttonMinHeight = interactableHeight[compact ? 'compact' : 'regular'];
-  const buttonMinWidth = buttonMinHeight;
+  const progress = useSharedValue(checked ? 1 : 0);
+  useEffect(() => {
+    progress.value = withSpring(checked ? 1 : 0, slideButtonSpringConfig);
+  }, [checked, progress]);
+  const buttonMinWidth = height;
   const handleComplete = useCallback(() => {
-    void progress.start(1);
+    progress.value = withSpring(1, slideButtonSpringConfig);
     onChange == null || onChange(true);
     onSlideComplete == null || onSlideComplete();
     onSlideEnd == null || onSlideEnd();
@@ -82,7 +80,7 @@ export const SlideButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, re
       return;
     }
     const progressValue = autoCompleteSlideOnThresholdMet ? newWidth : Math.min(1, newWidth);
-    void progress.set(progressValue);
+    progress.value = progressValue;
   }).onEnd(_ref2 => {
     let {
       translationX
@@ -93,21 +91,23 @@ export const SlideButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, re
       handleComplete();
       return;
     }
-    void progress.start(0);
+    progress.value = withSpring(0, slideButtonSpringConfig);
     onSlideCancel == null || onSlideCancel();
     onSlideEnd == null || onSlideEnd();
   }).withTestId(testID).runOnJS(true), [testID, checked, disabled, onSlideStart, buttonMinWidth, containerSize.width, autoCompleteSlideOnThresholdMet, checkThreshold, handleComplete, progress, onSlideCancel, onSlideEnd]);
   const containerStyle = useMemo(() => [{
-    height: height != null ? height : buttonMinHeight,
+    height,
     width: '100%',
     position: 'relative'
-  }, styles == null ? void 0 : styles.container], [height, buttonMinHeight, styles == null ? void 0 : styles.container]);
-  const animatedStyle = useMemo(() => ({
+  }, styles == null ? void 0 : styles.container], [height, styles == null ? void 0 : styles.container]);
+  const animatedWidthStyle = useAnimatedStyle(() => ({
+    width: progress.value * 100 + "%"
+  }), [progress]);
+  const staticHandleStyle = useMemo(() => ({
     position: 'absolute',
-    height: height != null ? height : buttonMinHeight,
-    minWidth: buttonMinWidth,
-    width: to(progress, value => value * 100 + "%")
-  }), [height, buttonMinHeight, buttonMinWidth, progress]);
+    height,
+    minWidth: buttonMinWidth
+  }), [height, buttonMinWidth]);
   return /*#__PURE__*/_jsxs(View, {
     ref: ref,
     id: labelId,
@@ -129,8 +129,8 @@ export const SlideButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, re
       variant: variant
     }), /*#__PURE__*/_jsx(GestureDetector, {
       gesture: panGesture,
-      children: /*#__PURE__*/_jsx(animated.View, {
-        style: animatedStyle,
+      children: /*#__PURE__*/_jsx(Animated.View, {
+        style: [staticHandleStyle, animatedWidthStyle],
         children: /*#__PURE__*/_jsx(SlideButtonHandleComponent, _extends({
           accessible: true,
           accessibilityActions: accessibilityActions

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

@@ -1,10 +1,11 @@
 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, { useCallback, useState } from 'react';
-import { Text, View } from 'react-native';
+import { View } from 'react-native';
 import { getAvatarFallbackColor } from '@coinbase/cds-common/media/getAvatarFallbackColor';
 import { Example, ExampleScreen } from '../../examples/ExampleScreen';
 import { HStack } from '../../layout/HStack';
 import { VStack } from '../../layout/VStack';
+import { Text } from '../../typography/Text';
 import { AvatarButton } from '../AvatarButton';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const avatarImageUrl = 'https://avatars.slack-edge.com/2019-12-09/865473396980_e8c83b072b452e4d03f7_192.jpg';

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

@@ -10,8 +10,6 @@ import { Button } from '../Button';
 import { ButtonGroup } from '../ButtonGroup';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const buttonStories = [{
-  variant: 'foregroundMuted'
-}, {
   variant: 'secondary'
 }, {
   variant: 'tertiary'
@@ -19,6 +17,8 @@ const buttonStories = [{
   variant: 'positive'
 }, {
   variant: 'negative'
+}, {
+  variant: 'inverse'
 }, {
   variant: 'secondary',
   transparent: true
@@ -28,6 +28,9 @@ const buttonStories = [{
 }, {
   variant: 'negative',
   transparent: true
+}, {
+  variant: 'inverse',
+  transparent: true
 }, {
   block: true
 }, {

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

@@ -50,15 +50,6 @@ const variants = [{
     font: "body",
     children: "Secondary transparent"
   })
-}, {
-  component: props => /*#__PURE__*/_jsx(IconButton, _extends({
-    name: iconName,
-    variant: "foregroundMuted"
-  }, props)),
-  title: /*#__PURE__*/_jsx(Text, {
-    font: "body",
-    children: "ForegroundMuted"
-  })
 }, {
   component: props => /*#__PURE__*/_jsx(IconButton, _extends({
     name: iconName,
@@ -74,14 +65,18 @@ const variants = [{
   })
 }, {
   component: props => /*#__PURE__*/_jsx(IconButton, _extends({
-    transparent: true,
+    flush: "start",
     name: iconName,
-    variant: "foregroundMuted"
+    variant: "primary"
   }, props)),
-  title: /*#__PURE__*/_jsx(Text, {
-    font: "body",
-    children: "ForegroundMuted transparent"
-  })
+  title: 'Primary flush start'
+}, {
+  component: props => /*#__PURE__*/_jsx(IconButton, _extends({
+    flush: "end",
+    name: iconName,
+    variant: "primary"
+  }, props)),
+  title: 'Primary flush end'
 }];
 const IconButtonScreen = () => {
   return /*#__PURE__*/_jsxs(ExampleScreen, {
@@ -297,10 +292,6 @@ const IconButtonScreen = () => {
             accessibilityLabel: accessibilityLabel,
             name: name,
             variant: "secondary"
-          }), /*#__PURE__*/_jsx(IconButton, {
-            accessibilityLabel: accessibilityLabel,
-            name: name,
-            variant: "foregroundMuted"
           }), /*#__PURE__*/_jsx(IconButton, {
             accessibilityLabel: accessibilityLabel,
             name: name

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

@@ -43,8 +43,12 @@ const IconCounterButtonScreen = () => {
         }), /*#__PURE__*/_jsx(IconCounterButton, {
           accessibilityLabel: "6.9 million shares, share",
           count: 69000000,
-          dangerouslySetColor: "orange",
-          icon: "arrowsHorizontal"
+          icon: "arrowsHorizontal",
+          styles: {
+            icon: {
+              color: 'orange'
+            }
+          }
         })]
       })
     }), /*#__PURE__*/_jsx(Example, {

package/esm/cards/AnnouncementCard.js

@@ -4,11 +4,6 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { memo } from 'react';
 import { Card } from './Card';
 import { CardBody } from './CardBody';
-
-/**
- * @deprecated Use MessagingCard instead. This will be removed in a future major release.
- * @deprecationExpectedRemoval v6
- */
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * @deprecated Use MessagingCard instead. This will be removed in a future major release.

package/esm/cards/Card.js

@@ -7,6 +7,11 @@ import { useTheme } from '../hooks/useTheme';
 import { VStack } from '../layout/VStack';
 import { pinStyles } from '../styles/pinStyles';
 import { Pressable } from '../system/Pressable';
+
+/**
+ * @deprecated Use `ContentCard`, `MediaCard`, `MessagingCard`, or `DataCard` based on your use case. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
 const getBorderRadiusPinStyle = borderRadius => ({
   top: {

package/esm/cards/CardMedia.js

@@ -35,17 +35,13 @@ export const CardMedia = /*#__PURE__*/memo(function CardMedia(_ref) {
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   switch (props.type) {
     case 'spotSquare':
-      return /*#__PURE__*/_jsx(SpotSquare, _extends({}, props, {
-        dimension: defaultMediaDimension,
-        name: props.name,
-        testID: props.testID
-      }));
+      return /*#__PURE__*/_jsx(SpotSquare, _extends({
+        dimension: defaultMediaDimension
+      }, props));
     case 'pictogram':
-      return /*#__PURE__*/_jsx(Pictogram, _extends({}, props, {
-        dimension: defaultPictogramMediaDimension,
-        name: props.name,
-        testID: props.testID
-      }));
+      return /*#__PURE__*/_jsx(Pictogram, _extends({
+        dimension: defaultPictogramMediaDimension
+      }, props));
     case 'image':
       return /*#__PURE__*/_jsx(RemoteImage, _extends({
         alt: (_props$alt = props.alt) != null ? _props$alt : '',

package/esm/cards/DataCard.js

@@ -40,9 +40,7 @@ import { memo, useMemo } from 'react';
 import { defaultMediaSize } from '@coinbase/cds-common/tokens/card';
 import { gutter } from '@coinbase/cds-common/tokens/sizing';
 import { HStack } from '../layout/HStack';
-import { TextBody } from '../typography/TextBody';
-import { TextHeadline } from '../typography/TextHeadline';
-import { TextLabel2 } from '../typography/TextLabel2';
+import { Text } from '../typography/Text';
 import { ProgressBar } from '../visualizations/ProgressBar';
 import { ProgressCircle } from '../visualizations/ProgressCircle';
 import { Card } from './Card';
@@ -64,14 +62,16 @@ export const DataCard = /*#__PURE__*/memo(function DataCard(_ref) {
     } = _ref,
     cardProps = _objectWithoutPropertiesLoose(_ref, _excluded);
   const content = useMemo(() => {
-    const TextEndLabel = progressVariant === 'bar' ? TextLabel2 : TextBody;
+    const endLabelFont = progressVariant === 'bar' ? 'label2' : 'body';
     return /*#__PURE__*/_jsxs(HStack, {
       justifyContent: "space-between",
-      children: [!!startLabelProp && /*#__PURE__*/_jsx(TextHeadline, {
+      children: [!!startLabelProp && /*#__PURE__*/_jsx(Text, {
+        font: "headline",
         testID: testID + "-start-label",
         children: startLabelProp
-      }), !!endLabelProp && /*#__PURE__*/_jsx(TextEndLabel, {
+      }), !!endLabelProp && /*#__PURE__*/_jsx(Text, {
         color: "fgMuted",
+        font: endLabelFont,
         testID: testID + "-end-label",
         children: endLabelProp
       })]

package/esm/cards/FeatureEntryCard.js

@@ -4,11 +4,6 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { memo } from 'react';
 import { Card } from './Card';
 import { CardBody } from './CardBody';
-
-/**
- * @deprecated Use MessagingCard instead. This will be removed in a future major release.
- * @deprecationExpectedRemoval v6
- */
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * @deprecated Use MessagingCard instead. This will be removed in a future major release.

package/esm/cards/FeedCard.js

@@ -9,16 +9,6 @@ import { CardBody } from './CardBody';
 import { CardFooter } from './CardFooter';
 import { CardHeader } from './CardHeader';
 import { LikeButton } from './LikeButton';
-
-/**
- * @deprecated Use the ContentCard component instead. This will be removed in a future major release.
- * @deprecationExpectedRemoval v9
- */
-
-/**
- * @deprecated Use the ContentCard component instead. This will be removed in a future major release.
- * @deprecationExpectedRemoval v8
- */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * @deprecated Use the ContentCard component instead. This will be removed in a future major release.

package/esm/cards/LikeButton.js

@@ -1,13 +1,13 @@
-const _excluded = ["count", "compact", "flush", "liked", "onPress", "accessibilityHint", "accessibilityLabel", "borderRadius"];
+const _excluded = ["count", "compact", "padding", "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 { useComponentConfig } from '../hooks/useComponentConfig';
+import { useTheme } from '../hooks/useTheme';
 import { TextIcon } from '../icons/TextIcon';
 import { HStack } from '../layout/HStack';
 import { Pressable } from '../system/Pressable';
@@ -20,6 +20,8 @@ export const LikeButton = /*#__PURE__*/memo(function LikeButton(_props) {
   const {
       count = 0,
       compact = true,
+      padding = compact ? 1.5 : 2,
+      // mirror IconButton's padding
       flush,
       liked = false,
       onPress,
@@ -30,7 +32,7 @@ export const LikeButton = /*#__PURE__*/memo(function LikeButton(_props) {
     props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const iconScale = useRef(new Animated.Value(1));
   const iconSize = compact ? 's' : 'm';
-  const size = interactableHeight[compact ? 'compact' : 'regular'];
+  const theme = useTheme();
   const {
     marginStart,
     marginEnd
@@ -55,6 +57,11 @@ export const LikeButton = /*#__PURE__*/memo(function LikeButton(_props) {
       scale: iconScale.current
     }]
   }), []);
+
+  // override default line height to match the height of the sibling icon
+  const countTextStyle = useMemo(() => ({
+    lineHeight: theme.iconSize[iconSize]
+  }), [theme.iconSize, iconSize]);
   return /*#__PURE__*/_jsx(Pressable, _extends({
     accessibilityHint: accessibilityHint,
     accessibilityLabel: accessibilityLabel,
@@ -71,8 +78,6 @@ export const LikeButton = /*#__PURE__*/memo(function LikeButton(_props) {
       flexWrap: "nowrap",
       gap: 1,
       justifyContent: "flex-start",
-      minHeight: size,
-      minWidth: size,
       children: [/*#__PURE__*/_jsx(TextIcon, {
         animated: true,
         active: liked,
@@ -83,6 +88,7 @@ export const LikeButton = /*#__PURE__*/memo(function LikeButton(_props) {
       }), count > 0 ? /*#__PURE__*/_jsx(Text, {
         mono: true,
         font: "label1",
+        style: countTextStyle,
         children: count
       }) : null]
     })

package/esm/cards/NudgeCard.js

@@ -1,6 +1,4 @@
-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';
@@ -39,23 +37,27 @@ 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);
+    title,
+    description,
+    pictogram,
+    media,
+    mediaPosition = 'right',
+    action,
+    onActionPress,
+    numberOfLines = 3,
+    onDismissPress,
+    width = '100%',
+    testID = 'nudge-card',
+    accessibilityLabel,
+    background = 'bgAlternate',
+    onPress,
+    maxWidth,
+    maxHeight,
+    minHeight,
+    minWidth,
+    height,
+    aspectRatio
+  } = _ref;
   const hasMedia = pictogram || media;
   const paddingBottom = action ? 1 : 2;
   const spacingProps = getCardBodySpacingProps({
@@ -107,10 +109,15 @@ export const NudgeCard = /*#__PURE__*/memo(_ref => {
       })
     }) : null, /*#__PURE__*/_jsxs(HStack, _extends({
       alignItems: "center",
+      aspectRatio: aspectRatio,
       flexGrow: 1,
       gap: 2,
-      justifyContent: mediaPosition === 'right' ? 'space-between' : 'flex-start'
-    }, spacingProps, props, {
+      height: height,
+      justifyContent: mediaPosition === 'right' ? 'space-between' : 'flex-start',
+      maxHeight: maxHeight,
+      minHeight: minHeight,
+      minWidth: minWidth
+    }, spacingProps, {
       children: [hasMedia && mediaPosition === 'left' ? renderMedia : null, /*#__PURE__*/_jsxs(VStack, {
         alignItems: "flex-start",
         flexGrow: 1,

package/esm/cards/UpsellCard.js

@@ -46,7 +46,8 @@ export const UpsellCard = /*#__PURE__*/memo(_ref => {
     testID = 'upsell-card',
     accessibilityLabel,
     width = upsellCardDefaultWidth,
-    onPress
+    onPress,
+    style
   } = _ref;
   const content = /*#__PURE__*/_jsx(HStack, {
     alignContent: "space-between",
@@ -54,6 +55,7 @@ export const UpsellCard = /*#__PURE__*/memo(_ref => {
     borderRadius: 500,
     dangerouslySetBackground: dangerouslySetBackground,
     minHeight: upsellCardMinHeight,
+    style: style,
     testID: testID,
     width: width,
     children: /*#__PURE__*/_jsxs(HStack, {