@coinbase/cds-mobile 8.41.0 → 8.42.0

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

@@ -0,0 +1,367 @@
+import { useRef } from 'react';
+import { Alert } from 'react-native';
+import { ethBackground } from '@coinbase/cds-common/internal/data/assets';
+import { NoopFn } from '@coinbase/cds-common/utils/mockUtils';
+import { Example, ExampleScreen } from '../../../examples/ExampleScreen';
+import { useTheme } from '../../../hooks/useTheme';
+import { HStack } from '../../../layout';
+import { Box } from '../../../layout/Box';
+import { VStack } from '../../../layout/VStack';
+import { RemoteImage } from '../../../media';
+import { Text } from '../../../typography';
+import { ProgressBar, ProgressBarWithFixedLabels, ProgressCircle } from '../../../visualizations';
+import { DataCard } from '../DataCard';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const exampleThumbnail = /*#__PURE__*/_jsx(RemoteImage, {
+  accessibilityLabel: "Ethereum",
+  shape: "circle",
+  size: "l",
+  source: ethBackground,
+  testID: "thumbnail"
+});
+const renderProgressLabel = num => /*#__PURE__*/_jsxs(Text, {
+  color: "fgMuted",
+  font: "legal",
+  children: [num, "%"]
+});
+const DataCardScreen = () => {
+  const ref1 = useRef(null);
+  const ref2 = useRef(null);
+  const {
+    spectrum
+  } = useTheme();
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(Example, {
+      title: "Basic Examples",
+      children: /*#__PURE__*/_jsxs(VStack, {
+        gap: 2,
+        children: [/*#__PURE__*/_jsx(DataCard, {
+          layout: "vertical",
+          subtitle: "Progress indicator",
+          thumbnail: exampleThumbnail,
+          title: "Progress Bar Card",
+          titleAccessory: /*#__PURE__*/_jsx(Text, {
+            dangerouslySetColor: "rgb(" + spectrum.green70 + ")",
+            font: "label1",
+            children: "\u2197 25.25%"
+          }),
+          children: /*#__PURE__*/_jsx(Box, {
+            paddingTop: 6,
+            children: /*#__PURE__*/_jsx(ProgressBarWithFixedLabels, {
+              labelPlacement: "below",
+              startLabel: {
+                value: 45,
+                render: renderProgressLabel
+              },
+              children: /*#__PURE__*/_jsx(ProgressBar, {
+                accessibilityLabel: "45% complete",
+                progress: 0.45,
+                weight: "semiheavy"
+              })
+            })
+          })
+        }), /*#__PURE__*/_jsx(DataCard, {
+          layout: "horizontal",
+          subtitle: "Circular progress",
+          thumbnail: exampleThumbnail,
+          title: "Progress Circle Card",
+          titleAccessory: /*#__PURE__*/_jsx(Text, {
+            color: "fgNegative",
+            font: "label1",
+            children: "\u2198 3.12%"
+          }),
+          children: /*#__PURE__*/_jsx(HStack, {
+            alignItems: "center",
+            height: "100%",
+            children: /*#__PURE__*/_jsx(ProgressCircle, {
+              accessibilityLabel: "60% complete",
+              progress: 0.6,
+              size: 100,
+              weight: "heavy"
+            })
+          })
+        }), /*#__PURE__*/_jsx(DataCard, {
+          layout: "horizontal",
+          subtitle: "Circular progress",
+          thumbnail: exampleThumbnail,
+          title: "Progress Circle Card with very very very very very long title",
+          titleAccessory: /*#__PURE__*/_jsx(Text, {
+            color: "fgNegative",
+            font: "label1",
+            children: "\u2198 1.8%"
+          }),
+          children: /*#__PURE__*/_jsx(Box, {
+            alignItems: "center",
+            height: "100%",
+            children: /*#__PURE__*/_jsx(ProgressCircle, {
+              accessibilityLabel: "60% complete",
+              progress: 0.6,
+              size: 100,
+              weight: "heavy"
+            })
+          })
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Features",
+      children: /*#__PURE__*/_jsxs(VStack, {
+        gap: 2,
+        children: [/*#__PURE__*/_jsx(DataCard, {
+          layout: "vertical",
+          subtitle: "High progress with tag",
+          thumbnail: exampleThumbnail,
+          title: "High Progress",
+          titleAccessory: /*#__PURE__*/_jsx(Text, {
+            dangerouslySetColor: "rgb(" + spectrum.green70 + ")",
+            font: "label1",
+            children: "\u2197 25.25%"
+          }),
+          children: /*#__PURE__*/_jsx(Box, {
+            paddingTop: 6,
+            children: /*#__PURE__*/_jsx(ProgressBarWithFixedLabels, {
+              labelPlacement: "below",
+              startLabel: {
+                value: 90,
+                render: renderProgressLabel
+              },
+              children: /*#__PURE__*/_jsx(ProgressBar, {
+                accessibilityLabel: "90% complete",
+                color: "fgPositive",
+                progress: 0.9,
+                weight: "semiheavy"
+              })
+            })
+          })
+        }), /*#__PURE__*/_jsx(DataCard, {
+          layout: "horizontal",
+          subtitle: "Below target",
+          thumbnail: exampleThumbnail,
+          title: "Below Target",
+          titleAccessory: /*#__PURE__*/_jsx(Text, {
+            color: "fgNegative",
+            font: "label1",
+            children: "\u2198 5.2%"
+          }),
+          children: /*#__PURE__*/_jsx(HStack, {
+            alignItems: "center",
+            height: "100%",
+            children: /*#__PURE__*/_jsx(ProgressCircle, {
+              accessibilityLabel: "95% complete",
+              color: "fgPositive",
+              progress: 0.95,
+              size: 100,
+              weight: "heavy"
+            })
+          })
+        }), /*#__PURE__*/_jsx(DataCard, {
+          layout: "horizontal",
+          subtitle: "Different size",
+          thumbnail: exampleThumbnail,
+          title: "Smaller Circle",
+          children: /*#__PURE__*/_jsx(HStack, {
+            alignItems: "center",
+            height: "100%",
+            children: /*#__PURE__*/_jsx(ProgressCircle, {
+              accessibilityLabel: "75% complete",
+              progress: 0.75,
+              size: 80,
+              weight: "heavy"
+            })
+          })
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Interactive",
+      children: /*#__PURE__*/_jsxs(VStack, {
+        gap: 2,
+        children: [/*#__PURE__*/_jsx(DataCard, {
+          ref: ref1,
+          renderAsPressable: true,
+          accessibilityLabel: "View progress bar details",
+          layout: "vertical",
+          onPress: () => Alert.alert('Progress bar card clicked!'),
+          subtitle: "Clickable progress card",
+          thumbnail: exampleThumbnail,
+          title: "Progress Bar with Button",
+          titleAccessory: /*#__PURE__*/_jsx(Text, {
+            dangerouslySetColor: "rgb(" + spectrum.green70 + ")",
+            font: "label1",
+            children: "\u2197 8.5%"
+          }),
+          children: /*#__PURE__*/_jsx(Box, {
+            paddingTop: 6,
+            children: /*#__PURE__*/_jsx(ProgressBarWithFixedLabels, {
+              labelPlacement: "below",
+              startLabel: {
+                value: 75,
+                render: renderProgressLabel
+              },
+              children: /*#__PURE__*/_jsx(ProgressBar, {
+                accessibilityLabel: "75% complete",
+                progress: 0.75,
+                weight: "semiheavy"
+              })
+            })
+          })
+        }), /*#__PURE__*/_jsx(DataCard, {
+          ref: ref2,
+          renderAsPressable: true,
+          accessibilityLabel: "View progress circle details",
+          layout: "horizontal",
+          onPress: NoopFn,
+          subtitle: "Clickable progress circle card",
+          thumbnail: exampleThumbnail,
+          title: "Progress Circle with Button",
+          titleAccessory: /*#__PURE__*/_jsx(Text, {
+            color: "fgNegative",
+            font: "label1",
+            children: "\u2198 8.5%"
+          }),
+          children: /*#__PURE__*/_jsx(HStack, {
+            alignItems: "center",
+            height: "100%",
+            children: /*#__PURE__*/_jsx(ProgressCircle, {
+              accessibilityLabel: "85% complete",
+              progress: 0.85,
+              size: 100,
+              weight: "heavy"
+            })
+          })
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Style Overrides",
+      children: /*#__PURE__*/_jsxs(VStack, {
+        gap: 2,
+        children: [/*#__PURE__*/_jsx(DataCard, {
+          layout: "vertical",
+          styles: {
+            root: {
+              borderWidth: 2,
+              borderColor: '#0066FF'
+            }
+          },
+          subtitle: "Custom border",
+          thumbnail: exampleThumbnail,
+          title: "Custom Root Styles",
+          children: /*#__PURE__*/_jsx(Box, {
+            paddingTop: 6,
+            children: /*#__PURE__*/_jsx(ProgressBarWithFixedLabels, {
+              labelPlacement: "below",
+              startLabel: {
+                value: 50,
+                render: renderProgressLabel
+              },
+              children: /*#__PURE__*/_jsx(ProgressBar, {
+                accessibilityLabel: "50% complete",
+                progress: 0.5,
+                weight: "semiheavy"
+              })
+            })
+          })
+        }), /*#__PURE__*/_jsx(DataCard, {
+          layout: "horizontal",
+          styles: {
+            root: {
+              backgroundColor: '#F5F5F5'
+            },
+            headerContainer: {
+              paddingLeft: 16
+            }
+          },
+          subtitle: "Custom background and padding",
+          thumbnail: exampleThumbnail,
+          title: "Custom Layout Styles",
+          children: /*#__PURE__*/_jsx(HStack, {
+            alignItems: "center",
+            height: "100%",
+            children: /*#__PURE__*/_jsx(ProgressCircle, {
+              accessibilityLabel: "70% complete",
+              progress: 0.7,
+              size: 100,
+              weight: "heavy"
+            })
+          })
+        }), /*#__PURE__*/_jsx(DataCard, {
+          layout: "vertical",
+          styles: {
+            root: {
+              minHeight: 200
+            },
+            layoutContainer: {
+              gap: 12
+            },
+            titleContainer: {
+              paddingBottom: 8
+            }
+          },
+          subtitle: "Custom spacing and height",
+          thumbnail: exampleThumbnail,
+          title: "Multiple Style Overrides",
+          children: /*#__PURE__*/_jsx(Box, {
+            paddingTop: 6,
+            children: /*#__PURE__*/_jsx(ProgressBarWithFixedLabels, {
+              labelPlacement: "below",
+              startLabel: {
+                value: 80,
+                render: renderProgressLabel
+              },
+              children: /*#__PURE__*/_jsx(ProgressBar, {
+                accessibilityLabel: "80% complete",
+                progress: 0.8,
+                weight: "semiheavy"
+              })
+            })
+          })
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Multiple Cards",
+      children: /*#__PURE__*/_jsxs(VStack, {
+        gap: 2,
+        children: [/*#__PURE__*/_jsx(DataCard, {
+          layout: "vertical",
+          subtitle: "Progress tracking",
+          thumbnail: exampleThumbnail,
+          title: "Card 1",
+          children: /*#__PURE__*/_jsx(Box, {
+            paddingTop: 6,
+            children: /*#__PURE__*/_jsx(ProgressBarWithFixedLabels, {
+              labelPlacement: "below",
+              startLabel: {
+                value: 30,
+                render: renderProgressLabel
+              },
+              children: /*#__PURE__*/_jsx(ProgressBar, {
+                accessibilityLabel: "30% complete",
+                progress: 0.3,
+                weight: "semiheavy"
+              })
+            })
+          })
+        }), /*#__PURE__*/_jsx(DataCard, {
+          layout: "horizontal",
+          subtitle: "Completion status",
+          thumbnail: exampleThumbnail,
+          title: "Card 2",
+          titleAccessory: /*#__PURE__*/_jsx(Text, {
+            dangerouslySetColor: "rgb(" + spectrum.green70 + ")",
+            font: "label1",
+            children: "\u2197 25.25%"
+          }),
+          children: /*#__PURE__*/_jsx(Box, {
+            alignItems: "center",
+            height: "100%",
+            children: /*#__PURE__*/_jsx(ProgressCircle, {
+              accessibilityLabel: "95% complete",
+              progress: 0.95,
+              size: 120,
+              weight: "heavy"
+            })
+          })
+        })]
+      })
+    })]
+  });
+};
+export default DataCardScreen;

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

@@ -0,0 +1 @@
+export { DataCard } from './DataCard';

package/esm/alpha/index.js

@@ -1,3 +1,4 @@
 export * from './combobox';
+export * from './data-card';
 export * from './select';
 export * from './select-chip';

package/esm/cards/AnnouncementCard.js

@@ -5,9 +5,9 @@ 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 */
+/** @deprecated Use MessagingCard instead. AnnouncementCard will be removed in a future major release. */
 import { jsx as _jsx } from "react/jsx-runtime";
-/** @deprecated This component will be removed in a future version. Use NudgeCard or UpsellCard instead. */
+/** @deprecated Use MessagingCard instead. AnnouncementCard will be removed in a future major release. */
 export const AnnouncementCard = /*#__PURE__*/memo(function AnnouncementCard(_ref) {
   let {
       onPress,

package/esm/cards/CardMedia.js

@@ -1,10 +1,10 @@
 const _excluded = ["placement"];
 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 { memo } from 'react';
 import { defaultMediaDimension, defaultMediaSize, defaultPictogramMediaDimension } from '@coinbase/cds-common/tokens/card';
 import { Pictogram, SpotSquare } from '../illustrations';
-import { CardRemoteImage } from './CardRemoteImage';
+import { getSource, RemoteImage } from '../media/RemoteImage';
 import { jsx as _jsx } from "react/jsx-runtime";
 const imageProps = {
   start: {
@@ -37,9 +37,10 @@ export const CardMedia = /*#__PURE__*/memo(function CardMedia(_ref) {
         testID: props.testID
       }));
     case 'image':
-      return /*#__PURE__*/_jsx(CardRemoteImage, _extends({
+      return /*#__PURE__*/_jsx(RemoteImage, _extends({
         alt: (_props$alt = props.alt) != null ? _props$alt : '',
-        src: props.src,
+        resizeMode: "cover",
+        source: getSource(props.src),
         testID: props.testID
       }, imageProps[placement]));
     default:

package/esm/cards/CardRoot.js

@@ -0,0 +1,27 @@
+const _excluded = ["children", "style", "renderAsPressable"];
+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 { HStack } from '../layout/HStack';
+import { Pressable } from '../system/Pressable';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * CardRoot is the foundational wrapper component for card layouts.
+ *
+ * By default, it renders as an HStack for horizontal layout.
+ * When `renderAsPressable` is true, it renders as a Pressable component.
+ */
+export const CardRoot = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      children,
+      renderAsPressable
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const Component = renderAsPressable ? Pressable : HStack;
+  return /*#__PURE__*/_jsx(Component, _extends({
+    ref: ref
+  }, props, {
+    children: children
+  }));
+}));
+CardRoot.displayName = 'CardRoot';

package/esm/cards/ContainedAssetCard.js

@@ -4,6 +4,33 @@ 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";
+/**
+ * @deprecated Use `MediaCard` instead. ContainedAssetCard will be removed in a future major release.
+ *
+ * Migration guide:
+ * ```tsx
+ * // Before
+ * <ContainedAssetCard
+ *   header={<Avatar ... />}
+ *   title="Asset Title"
+ *   subtitle="Subtitle"
+ *   description="Description"
+ *   size="l"
+ * >
+ *   <RemoteImage ... />
+ * </ContainedAssetCard>
+ *
+ * // After
+ * <MediaCard
+ *   thumbnail={<Avatar ... />}
+ *   title="Asset Title"
+ *   subtitle="Subtitle"
+ *   description="Description"
+ *   media={<RemoteImage ... />}
+ *   mediaPlacement="end"
+ * />
+ * ```
+ */
 export const ContainedAssetCard = /*#__PURE__*/memo(_ref => {
   let {
     title,

package/esm/cards/ContentCard/ContentCard.js

@@ -1,4 +1,4 @@
-const _excluded = ["testID", "children", "maxWidth", "minWidth", "paddingX", "paddingY"];
+const _excluded = ["testID", "children", "maxWidth", "minWidth", "borderRadius", "padding", "gap"];
 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';
@@ -11,17 +11,18 @@ export const ContentCard = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Co
       children,
       maxWidth = contentCardMaxWidth,
       minWidth = contentCardMinWidth,
-      paddingX = 3,
-      paddingY = 2
+      borderRadius = 500,
+      padding = 2,
+      gap = 2
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   return /*#__PURE__*/_jsx(VStack, _extends({
     ref: ref,
-    gap: 1,
+    borderRadius: borderRadius,
+    gap: gap,
     maxWidth: maxWidth,
     minWidth: minWidth,
-    paddingX: paddingX,
-    paddingY: paddingY,
+    padding: padding,
     testID: testID
   }, props, {
     children: children

package/esm/cards/ContentCard/ContentCardBody.js

@@ -1,47 +1,102 @@
-const _excluded = ["body", "label", "media", "mediaPosition", "children", "testID"];
+const _excluded = ["body", "label", "media", "mediaPosition", "mediaPlacement", "title", "description", "children", "gap", "testID", "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 React, { forwardRef, memo } from 'react';
+import React, { forwardRef, memo, useMemo } from 'react';
 import { Box, VStack } from '../../layout';
 import { Text } from '../../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const mapMediaPositionToMediaPlacement = {
+  top: 'top',
+  bottom: 'bottom',
+  right: 'end',
+  left: 'start'
+};
 export const ContentCardBody = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function ContentCardBody(_ref, ref) {
   let {
       body,
       label,
       media,
       mediaPosition = 'top',
+      mediaPlacement = mapMediaPositionToMediaPlacement[mediaPosition],
+      title,
+      description = body,
       children,
-      testID
+      gap = 1,
+      testID,
+      style,
+      styles
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  const isHorizontal = mediaPosition === 'right' || mediaPosition === 'left';
+  const hasMedia = !!media;
+  const isHorizontal = mediaPlacement === 'start' || mediaPlacement === 'end';
+  const isMediaFirst = hasMedia && (mediaPlacement === 'top' || mediaPlacement === 'start');
+  const isMediaLast = hasMedia && (mediaPlacement === 'bottom' || mediaPlacement === 'end');
+  const titleNode = useMemo(() => {
+    if (typeof title === 'string') {
+      return /*#__PURE__*/_jsx(Text, {
+        font: "headline",
+        numberOfLines: 2,
+        children: title
+      });
+    }
+    return title;
+  }, [title]);
+  const descriptionNode = useMemo(() => {
+    if (typeof description === 'string') {
+      return /*#__PURE__*/_jsx(Text, {
+        color: "fgMuted",
+        font: "label2",
+        numberOfLines: 3,
+        children: description
+      });
+    }
+    return description;
+  }, [description]);
+  const labelNode = useMemo(() => {
+    if (typeof label === 'string') {
+      return /*#__PURE__*/_jsx(Text, {
+        font: "label2",
+        children: label
+      });
+    }
+    return label;
+  }, [label]);
+  const textNode = useMemo(() => {
+    if (!titleNode && !descriptionNode && !labelNode) {
+      return null;
+    }
+    return /*#__PURE__*/_jsxs(VStack, {
+      flexShrink: 1,
+      gap: isHorizontal ? 1 : 0,
+      style: styles == null ? void 0 : styles.textContainer,
+      children: [titleNode, descriptionNode, labelNode]
+    });
+  }, [titleNode, descriptionNode, labelNode, isHorizontal, styles == null ? void 0 : styles.textContainer]);
   const mediaBox = isHorizontal ? /*#__PURE__*/_jsx(Box, {
+    borderRadius: 500,
     flexShrink: 0,
     height: 96,
+    overflow: "hidden",
+    style: styles == null ? void 0 : styles.mediaContainer,
     width: 96,
     children: media
-  }) : media;
+  }) : /*#__PURE__*/_jsx(Box, {
+    borderRadius: 500,
+    overflow: "hidden",
+    children: media
+  });
   return /*#__PURE__*/_jsxs(VStack, _extends({
     ref: ref,
-    gap: 1,
+    gap: gap,
+    style: [styles == null ? void 0 : styles.root, style],
     testID: testID
   }, props, {
-    children: [/*#__PURE__*/_jsxs(Box, {
+    children: [(mediaBox || textNode) && /*#__PURE__*/_jsxs(Box, {
       flexDirection: isHorizontal ? 'row' : 'column',
       gap: isHorizontal ? 2 : 1,
-      justifyContent: mediaPosition === 'right' ? 'space-between' : 'flex-start',
-      children: [(mediaPosition === 'top' || mediaPosition === 'left') && mediaBox, /*#__PURE__*/_jsxs(VStack, {
-        gap: 1,
-        maxWidth: isHorizontal ? '70%' : '100%',
-        children: [typeof body === 'string' ? /*#__PURE__*/_jsx(Text, {
-          font: "body",
-          children: body
-        }) : body, typeof label === 'string' ? /*#__PURE__*/_jsx(Text, {
-          font: "label2",
-          children: label
-        }) : label]
-      }), (mediaPosition === 'bottom' || mediaPosition === 'right') && mediaBox]
+      justifyContent: mediaPlacement === 'end' ? 'space-between' : 'flex-start',
+      style: styles == null ? void 0 : styles.contentContainer,
+      children: [isMediaFirst && mediaBox, textNode, isMediaLast && mediaBox]
     }), children]
   }));
 }));

package/esm/cards/ContentCard/ContentCardFooter.js

@@ -1,4 +1,4 @@
-const _excluded = ["testID", "children"];
+const _excluded = ["children", "justifyContent"];
 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';
@@ -6,14 +6,13 @@ import { HStack } from '../../layout';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const ContentCardFooter = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
-      testID,
-      children
+      children,
+      justifyContent = 'space-between'
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   return /*#__PURE__*/_jsx(HStack, _extends({
     ref: ref,
-    justifyContent: "space-between",
-    testID: testID
+    justifyContent: justifyContent
   }, props, {
     children: children
   }));