@coinbase/cds-mobile 8.60.0 → 8.62.0

package/esm/buttons/Button.js

@@ -1,4 +1,4 @@
-const _excluded = ["variant", "loading", "progressCircleSize", "transparent", "block", "compact", "children", "start", "startIcon", "startIconActive", "end", "endIcon", "endIconActive", "flush", "noScaleOnPress", "numberOfLines", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight", "background", "color", "style", "wrapperStyles", "feedback", "borderColor", "borderWidth", "borderRadius", "accessibilityLabel", "accessibilityHint"];
+const _excluded = ["variant", "loading", "progressCircleSize", "transparent", "block", "compact", "children", "start", "startIcon", "startIconActive", "end", "endIcon", "endIconActive", "flush", "noScaleOnPress", "numberOfLines", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight", "background", "color", "style", "wrapperStyles", "feedback", "borderColor", "borderWidth", "borderRadius", "height", "accessibilityLabel", "accessibilityHint", "padding", "paddingStart", "paddingEnd", "paddingTop", "paddingBottom", "paddingX", "paddingY"];
 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, isValidElement, memo, useCallback, useMemo } from 'react';
@@ -6,6 +6,7 @@ import { StyleSheet } from 'react-native';
 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 { HStack } from '../layout/HStack';
@@ -30,8 +31,9 @@ export const styles = StyleSheet.create({
     flexShrink: 0
   }
 });
-export const Button = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Button(_ref, ref) {
-  let {
+export const Button = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Button(_props, ref) {
+  const mergedProps = useComponentConfig('Button', _props);
+  const {
       variant = 'primary',
       loading,
       progressCircleSize = defaultProgressCircleSize,
@@ -61,10 +63,18 @@ export const Button = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Button(
       borderColor,
       borderWidth = 100,
       borderRadius = compact ? 700 : 900,
+      height = interactableHeight[compact ? 'compact' : 'regular'],
       accessibilityLabel,
-      accessibilityHint
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+      accessibilityHint,
+      padding,
+      paddingStart,
+      paddingEnd,
+      paddingTop,
+      paddingBottom,
+      paddingX: paddingXProp,
+      paddingY: paddingYProp
+    } = mergedProps,
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const theme = useTheme();
   const iconSize = compact ? 's' : 'm';
   const hasIcon = Boolean(startIcon || endIcon);
@@ -75,7 +85,6 @@ export const Button = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Button(
   const borderColorValue = borderColor != null ? borderColor : variantStyle.borderColor;
   const sizingStyle = block ? styles.block : styles.inline;
   const justifyContent = flush ? 'flex-start' : hasIcon ? 'space-between' : 'center';
-  const minHeight = interactableHeight[compact ? 'compact' : 'regular'];
   const {
     paddingX,
     paddingY,
@@ -110,6 +119,7 @@ export const Button = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Button(
     borderRadius: borderRadius,
     borderWidth: borderWidth,
     feedback: feedback,
+    height: height,
     loading: loading,
     marginEnd: marginEnd,
     marginStart: marginStart,
@@ -122,9 +132,14 @@ export const Button = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Button(
       alignItems: "center",
       flexWrap: "nowrap",
       justifyContent: justifyContent,
-      minHeight: minHeight,
-      paddingX: paddingX,
-      paddingY: paddingY,
+      minHeight: height,
+      padding: padding,
+      paddingBottom: paddingBottom,
+      paddingEnd: paddingEnd,
+      paddingStart: paddingStart,
+      paddingTop: paddingTop,
+      paddingX: paddingXProp != null ? paddingXProp : paddingX,
+      paddingY: paddingYProp != null ? paddingYProp : paddingY,
       style: sizingStyle,
       children: loading ? /*#__PURE__*/_jsx(ProgressCircle, {
         indeterminate: true,

package/esm/buttons/ButtonGroup.js

@@ -1,15 +1,17 @@
 import React, { Children, cloneElement, memo } from 'react';
 import { StyleSheet, View } from 'react-native';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box } from '../layout';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const ButtonGroup = /*#__PURE__*/memo(function ButtonGroup(_ref) {
-  let {
+export const ButtonGroup = /*#__PURE__*/memo(_props => {
+  const mergedProps = useComponentConfig('ButtonGroup', _props);
+  const {
     accessibilityLabel,
     block,
     children,
     testID,
     direction
-  } = _ref;
+  } = mergedProps;
   const isVertical = direction === 'vertical';
   return /*#__PURE__*/_jsx(Box, {
     accessibilityHint: accessibilityLabel,

package/esm/buttons/IconButton.js

@@ -1,18 +1,20 @@
-const _excluded = ["name", "active", "variant", "transparent", "compact", "background", "color", "borderColor", "iconSize", "borderWidth", "borderRadius", "feedback", "flush", "loading", "progressCircleSize", "style", "accessibilityHint", "accessibilityLabel"];
+const _excluded = ["name", "active", "variant", "transparent", "compact", "background", "color", "borderColor", "iconSize", "borderWidth", "borderRadius", "height", "width", "feedback", "flush", "loading", "progressCircleSize", "style", "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 { 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";
-export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function IconButton(_ref, ref) {
-  let {
+export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+  const mergedProps = useComponentConfig('IconButton', _props);
+  const {
       name,
       active,
       variant = 'secondary',
@@ -24,6 +26,8 @@ export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Ico
       iconSize = compact ? 's' : 'm',
       borderWidth = 100,
       borderRadius = 1000,
+      height = interactableHeight[compact ? 'compact' : 'regular'],
+      width = interactableHeight[compact ? 'compact' : 'regular'],
       feedback = compact ? 'light' : 'normal',
       flush,
       loading,
@@ -31,8 +35,8 @@ export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Ico
       style,
       accessibilityHint,
       accessibilityLabel
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const theme = useTheme();
   const iconSizeValue = theme.iconSize[iconSize];
   const variantMap = transparent ? transparentVariants : variants;
@@ -40,7 +44,6 @@ export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Ico
   const colorValue = color != null ? color : variantStyle.color;
   const backgroundValue = background != null ? background : variantStyle.background;
   const borderColorValue = borderColor != null ? borderColor : variantStyle.borderColor;
-  const minHeight = interactableHeight[compact ? 'compact' : 'regular'];
   const {
     marginStart,
     marginEnd
@@ -49,12 +52,12 @@ export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Ico
     flush
   });
   const sizingStyle = useMemo(() => ({
-    height: minHeight,
-    width: minHeight,
+    height: height,
+    width: width,
     alignItems: 'center',
     flexDirection: 'column',
     justifyContent: 'center'
-  }), [minHeight]);
+  }), [height, width]);
   const pressableStyle = useCallback(state => [sizingStyle, typeof style === 'function' ? style(state) : style], [sizingStyle, style]);
   return /*#__PURE__*/_jsx(Pressable, _extends({
     ref: ref,
@@ -73,9 +76,9 @@ export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Ico
   }, props, {
     children: loading ? /*#__PURE__*/_jsx(Box, {
       alignItems: "center",
-      height: minHeight,
+      height: height,
       justifyContent: "center",
-      width: minHeight,
+      width: width,
       children: /*#__PURE__*/_jsx(ProgressCircle, {
         indeterminate: true,
         color: colorValue,

package/esm/buttons/IconCounterButton.js

@@ -3,13 +3,15 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 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 { formatCount } from '@coinbase/cds-common/utils/formatCount';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Icon } from '../icons';
 import { HStack } from '../layout';
 import { Pressable } from '../system';
 import { Text } from '../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const IconCounterButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function IconCounterButton(_ref, ref) {
-  let {
+export const IconCounterButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function IconCounterButton(_props, ref) {
+  const mergedProps = useComponentConfig('IconCounterButton', _props);
+  const {
       icon,
       iconSize = 's',
       size = iconSize,
@@ -17,8 +19,8 @@ export const IconCounterButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(funct
       count = 0,
       color = 'fg',
       dangerouslySetColor
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   return /*#__PURE__*/_jsx(Pressable, _extends({
     ref: ref,
     background: "transparent"

package/esm/buttons/SlideButton.js

@@ -6,13 +6,15 @@ 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 { useComponentConfig } from '../hooks/useComponentConfig';
 import { useLayout } from '../hooks/useLayout';
 import { DefaultSlideButtonBackground } from './DefaultSlideButtonBackground';
 import { animationConfig, DefaultSlideButtonHandle } from './DefaultSlideButtonHandle';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const slideButtonTestID = 'slide-button';
-export const SlideButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
+export const SlideButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+  const mergedProps = useComponentConfig('SlideButton', _props);
+  const {
       checked,
       compact,
       borderRadius = compact ? 700 : 900,
@@ -38,8 +40,8 @@ export const SlideButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref)
       variant = 'primary',
       startUncheckedNode,
       endCheckedNode
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const labelId = useId();
   const [containerSize, onLayout] = useLayout();
   const {
@@ -68,10 +70,10 @@ export const SlideButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref)
   const panGesture = useMemo(() => Gesture.Pan().onStart(() => {
     if (checked || disabled) return;
     onSlideStart == null || onSlideStart();
-  }).onUpdate(_ref2 => {
+  }).onUpdate(_ref => {
     let {
       translationX
-    } = _ref2;
+    } = _ref;
     if (checked || disabled) return;
     const newWidth = (buttonMinWidth + translationX) / containerSize.width;
     const thresholdReached = newWidth >= checkThreshold;
@@ -81,10 +83,10 @@ export const SlideButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref)
     }
     const progressValue = autoCompleteSlideOnThresholdMet ? newWidth : Math.min(1, newWidth);
     void progress.set(progressValue);
-  }).onEnd(_ref3 => {
+  }).onEnd(_ref2 => {
     let {
       translationX
-    } = _ref3;
+    } = _ref2;
     if (checked || disabled) return;
     const newWidth = (buttonMinWidth + translationX) / containerSize.width;
     if (newWidth >= checkThreshold) {

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

@@ -222,6 +222,38 @@ const ButtonScreen = () => {
         },
         children: "Hello world"
       })
+    }), /*#__PURE__*/_jsxs(Example, {
+      inline: true,
+      title: "Small",
+      children: [/*#__PURE__*/_jsxs(HStack, {
+        gap: 2,
+        children: [/*#__PURE__*/_jsx(Button, {
+          height: 32,
+          paddingY: 0,
+          children: "I am a button"
+        }), /*#__PURE__*/_jsx(Button, {
+          loading: true,
+          height: 32,
+          paddingY: 0,
+          children: "I am a button"
+        })]
+      }), /*#__PURE__*/_jsxs(HStack, {
+        gap: 2,
+        children: [/*#__PURE__*/_jsx(Button, {
+          compact: true,
+          height: 24,
+          paddingY: 0,
+          progressCircleSize: 16,
+          children: "I am a button"
+        }), /*#__PURE__*/_jsx(Button, {
+          compact: true,
+          loading: true,
+          height: 24,
+          paddingY: 0,
+          progressCircleSize: 16,
+          children: "I am a button"
+        })]
+      })]
     })]
   });
 };

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

@@ -322,6 +322,38 @@ const IconButtonScreen = () => {
           }), variant.title]
         }, index);
       })
+    }), /*#__PURE__*/_jsxs(Example, {
+      inline: true,
+      title: "Small",
+      children: [/*#__PURE__*/_jsx(IconButton, {
+        accessibilityLabel: accessibilityLabel,
+        height: 32,
+        name: iconName,
+        onPress: onPress,
+        width: 32
+      }), /*#__PURE__*/_jsx(IconButton, {
+        loading: true,
+        accessibilityLabel: accessibilityLabel,
+        height: 32,
+        name: iconName,
+        onPress: onPress,
+        width: 32
+      }), /*#__PURE__*/_jsx(IconButton, {
+        compact: true,
+        accessibilityLabel: accessibilityLabel,
+        height: 24,
+        name: iconName,
+        onPress: onPress,
+        width: 24
+      }), /*#__PURE__*/_jsx(IconButton, {
+        compact: true,
+        loading: true,
+        accessibilityLabel: accessibilityLabel,
+        height: 24,
+        name: iconName,
+        onPress: onPress,
+        width: 24
+      })]
     })]
   });
 };

package/esm/cards/Card.js

@@ -39,6 +39,11 @@ const getBorderRadiusPinStyle = borderRadius => ({
   },
   all: {}
 });
+
+/**
+ * @deprecated Use ContentCard instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const Card = /*#__PURE__*/memo(function OldCard(_ref) {
   let {
       children,

package/esm/cards/CardBody.js

@@ -31,6 +31,11 @@ const CardBodyAction = /*#__PURE__*/memo(function CardBodyAction(_ref) {
     children: children
   }));
 });
+
+/**
+ * @deprecated Use ContentCardBody instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const CardBody = /*#__PURE__*/memo(function CardBody(_ref2) {
   var _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref0, _props$maxWidth, _props$minHeight;
   let {

package/esm/cards/CardFooter.js

@@ -5,6 +5,10 @@ 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";
+/**
+ * @deprecated Use ContentCardFooter instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const CardFooter = /*#__PURE__*/memo(function CardFooter(_ref) {
   let {
       children,

package/esm/cards/CardGroup.js

@@ -5,7 +5,21 @@ import React, { forwardRef, memo } from 'react';
 import { gutter } from '@coinbase/cds-common/tokens/sizing';
 import { Divider } from '../layout/Divider';
 import { Group } from '../layout/Group';
+
+/**
+ * @deprecated Use `Box`, `HStack` or `VStack` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
+
+/**
+ * @deprecated Use `Box`, `HStack` or `VStack` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @deprecated Use `Box`, `HStack` or `VStack` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const CardGroup = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function CardGroup(_ref, ref) {
   let {
       accessibilityLabel,

package/esm/cards/CardHeader.js

@@ -2,7 +2,16 @@ import React, { memo } from 'react';
 import { HStack } from '../layout/HStack';
 import { RemoteImage } from '../media/RemoteImage';
 import { Text } from '../typography/Text';
+
+/**
+ * @deprecated Use ContentCardHeaderProps instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @deprecated Use ContentCardHeader instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const CardHeader = /*#__PURE__*/memo(_ref => {
   let {
     avatar,

package/esm/cards/CardMedia.js

@@ -5,6 +5,11 @@ import { memo } from 'react';
 import { defaultMediaDimension, defaultMediaSize, defaultPictogramMediaDimension } from '@coinbase/cds-common/tokens/card';
 import { Pictogram, SpotSquare } from '../illustrations';
 import { getSource, RemoteImage } from '../media/RemoteImage';
+
+/**
+ * @deprecated Use SpotSquare when `type` is "spotSquare", Pictogram when `type` is "pictogram", or RemoteImage when `type` is "image". This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
 const imageProps = {
   start: {
@@ -17,6 +22,11 @@ const imageProps = {
   },
   end: defaultMediaSize
 };
+
+/**
+ * @deprecated Use SpotSquare when `type` is "spotSquare", Pictogram when `type` is "pictogram", or RemoteImage when `type` is "image". This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const CardMedia = /*#__PURE__*/memo(function CardMedia(_ref) {
   var _props$alt;
   let {

package/esm/cards/LikeButton.js

@@ -7,6 +7,7 @@ import { activeScale, inactiveScale, scaleInConfig, scaleOutConfig } from '@coin
 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 { TextIcon } from '../icons/TextIcon';
 import { HStack } from '../layout/HStack';
 import { Pressable } from '../system/Pressable';
@@ -14,8 +15,9 @@ import { Text } from '../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const scaleIn = convertMotionConfig(scaleInConfig);
 const scaleOut = convertMotionConfig(scaleOutConfig);
-export const LikeButton = /*#__PURE__*/memo(function LikeButton(_ref) {
-  let {
+export const LikeButton = /*#__PURE__*/memo(function LikeButton(_props) {
+  const mergedProps = useComponentConfig('LikeButton', _props);
+  const {
       count = 0,
       compact = true,
       flush,
@@ -24,8 +26,8 @@ export const LikeButton = /*#__PURE__*/memo(function LikeButton(_ref) {
       accessibilityHint,
       accessibilityLabel = 'Like',
       borderRadius = compact ? 700 : 900
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const iconScale = useRef(new Animated.Value(1));
   const iconSize = compact ? 's' : 'm';
   const size = interactableHeight[compact ? 'compact' : 'regular'];

package/esm/carousel/Carousel.js

@@ -6,6 +6,7 @@ import { View } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import { useCarouselAutoplay } from '@coinbase/cds-common/carousel/useCarouselAutoplay';
 import { animated, useSpring } from '@react-spring/native';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useLayout } from '../hooks/useLayout';
 import { HStack } from '../layout/HStack';
 import { VStack } from '../layout/VStack';
@@ -254,8 +255,9 @@ const animationConfig = {
   stiffness: 900,
   damping: 120
 };
-export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref4, ref) => {
-  let {
+export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+  const mergedProps = useComponentConfig('Carousel', _props);
+  const {
       children,
       title,
       hideNavigation,
@@ -278,8 +280,8 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref4, ref) =
       autoplay,
       autoplayInterval = 3000,
       paginationVariant
-    } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded);
+    } = mergedProps,
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const carouselScrollX = useRef(0);
   const animationApi = useSpring({
     x: carouselScrollX.current,
@@ -498,10 +500,10 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref4, ref) =
   .failOffsetY([-10, 10]).onStart(() => {
     if (!isDragEnabled) return;
     handleDragStart();
-  }).onUpdate(_ref5 => {
+  }).onUpdate(_ref4 => {
     let {
       translationX
-    } = _ref5;
+    } = _ref4;
     if (!isDragEnabled) return;
     let newOffset;
     if (shouldLoop) {
@@ -510,11 +512,11 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref4, ref) =
       newOffset = clampWithElasticResistance(carouselScrollX.current - translationX, maxScrollOffset);
     }
     animationApi.x.set(newOffset);
-  }).onEnd(_ref6 => {
+  }).onEnd(_ref5 => {
     let {
       translationX,
       velocityX
-    } = _ref6;
+    } = _ref5;
     if (!isDragEnabled) return;
     let projectedOffset;
     if (shouldLoop) {

package/esm/cells/Cell.js

@@ -6,14 +6,16 @@ import React, { memo, useMemo } from 'react';
 import { StyleSheet } from 'react-native';
 import { hasCellPriority } from '@coinbase/cds-common/utils/cell';
 import { useCellSpacing } from '../hooks/useCellSpacing';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
 import { Box } from '../layout/Box';
 import { HStack } from '../layout/HStack';
 import { VStack } from '../layout/VStack';
 import { Pressable } from '../system/Pressable';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-export const Cell = /*#__PURE__*/memo(function Cell(_ref) {
-  let {
+export const Cell = /*#__PURE__*/memo(function Cell(_props) {
+  const mergedProps = useComponentConfig('Cell', _props);
+  const {
       accessory,
       accessoryNode,
       alignItems = 'center',
@@ -46,8 +48,8 @@ export const Cell = /*#__PURE__*/memo(function Cell(_ref) {
       style,
       background = 'bgAlternate',
       blendStyles
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const theme = useTheme();
   const {
     inner: innerSpacing,

package/esm/cells/ListCell.js

@@ -3,6 +3,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 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 { compactListHeight, listHeight } from '@coinbase/cds-common/tokens/cell';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { VStack } from '../layout/VStack';
 import { Text } from '../typography/Text';
 import { Cell } from './Cell';
@@ -21,9 +22,10 @@ export const condensedOuterSpacing = {
   paddingY: 0,
   marginX: 0
 };
-export const ListCell = /*#__PURE__*/memo(function ListCell(_ref) {
+export const ListCell = /*#__PURE__*/memo(function ListCell(_props) {
   var _props$borderRadius;
-  let {
+  const mergedProps = useComponentConfig('ListCell', _props);
+  const {
       accessory,
       accessoryNode,
       end: endProp,
@@ -56,8 +58,8 @@ export const ListCell = /*#__PURE__*/memo(function ListCell(_ref) {
       spacingVariant = compact ? 'compact' : 'normal',
       style,
       styles
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const minHeight = spacingVariant === 'compact' ? compactListHeight : spacingVariant === 'normal' ? listHeight : undefined;
   const accessoryType = selected && !disableSelectionAccessory ? 'selected' : accessory;
   const hasDetails = Boolean(detail || subdetail || detailNode || subdetailNode);

package/esm/cells/ListCellFallback.js

@@ -4,6 +4,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import { memo, useMemo } from 'react';
 import { StyleSheet, Text } from 'react-native';
 import { getRectWidthVariant } from '@coinbase/cds-common/utils/getRectWidthVariant';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
 import { VStack } from '../layout';
 import { Fallback } from '../layout/Fallback';
@@ -12,8 +13,9 @@ import { CellAccessory } from './CellAccessory';
 import { condensedInnerSpacing, condensedOuterSpacing } from './ListCell';
 import { MediaFallback } from './MediaFallback';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_ref) {
-  let {
+export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_props) {
+  const mergedProps = useComponentConfig('ListCellFallback', _props);
+  const {
       accessory,
       accessoryNode,
       title,
@@ -31,8 +33,8 @@ export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_ref
       innerSpacing,
       outerSpacing,
       accessibilityLabel = 'Loading'
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const theme = useTheme();
   const descriptionFallback = useMemo(() => {
     if (!description) {