@coinbase/cds-mobile 8.61.0 → 8.62.0

package/esm/buttons/IconButton.js

@@ -5,14 +5,16 @@ 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',
@@ -33,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;

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/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) {

package/esm/chips/Chip.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, { forwardRef, Fragment, memo } from 'react';
 import { chipMaxWidth } from '@coinbase/cds-common/tokens/chip';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box, HStack } from '../layout';
 import { InvertedThemeProvider, Pressable } from '../system';
 import { Text } from '../typography/Text';
@@ -10,8 +11,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * This is a basic Chip component used to create all Chip components.
  */
-export const Chip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Chip(_ref, ref) {
-  let {
+export const Chip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Chip(_props, ref) {
+  const mergedProps = useComponentConfig('Chip', _props);
+  const {
       alignSelf = 'flex-start',
       children,
       start,
@@ -40,8 +42,8 @@ export const Chip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Chip(_ref
       onPress,
       color = 'fg',
       font = compact ? 'label1' : 'headline'
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const WrapperComponent = (invertColorScheme != null ? invertColorScheme : inverted) ? InvertedThemeProvider : Fragment;
   const containerProps = {
     testID,

package/esm/chips/InputChip.js

@@ -2,18 +2,20 @@ const _excluded = ["value", "children", "accessibilityLabel", "invertColorScheme
 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 { useComponentConfig } from '../hooks/useComponentConfig';
 import { Icon } from '../icons';
 import { MediaChip } from './MediaChip';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const InputChip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function InputChip(_ref, ref) {
-  let {
+export const InputChip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+  const mergedProps = useComponentConfig('InputChip', _props);
+  const {
       value,
       children = value,
       accessibilityLabel = typeof children === 'string' ? "Remove " + children : 'Remove option',
       invertColorScheme = true,
       testID = 'input-chip'
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   return /*#__PURE__*/_jsx(MediaChip, _extends({
     ref: ref,
     accessibilityLabel: accessibilityLabel,

package/esm/chips/MediaChip.js

@@ -3,10 +3,12 @@ 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 { forwardRef, memo, useMemo } from 'react';
 import { getMediaChipSpacingProps } from '@coinbase/cds-common/chips/getMediaChipSpacingProps';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Chip } from './Chip';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const MediaChip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function MediaChip(_ref, ref) {
-  let {
+export const MediaChip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function MediaChip(_props, ref) {
+  const mergedProps = useComponentConfig('MediaChip', _props);
+  const {
       start,
       children,
       end,
@@ -18,8 +20,8 @@ export const MediaChip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Medi
       paddingBottom,
       paddingStart,
       paddingEnd
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const spacingProps = useMemo(() => {
     const defaults = getMediaChipSpacingProps({
       compact: !!compact,

package/esm/chips/TabbedChips.js

@@ -5,6 +5,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { forwardRef, memo, useCallback, useMemo, useState } from 'react';
 import { ScrollView } from 'react-native';
 import { useTabsContext } from '@coinbase/cds-common/tabs/TabsContext';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useHorizontalScrollToTarget } from '../hooks/useHorizontalScrollToTarget';
 import { Box, OverflowGradient } from '../layout';
 import { Tabs } from '../tabs';
@@ -35,15 +36,16 @@ const TabComponent = _ref => {
 const TabsActiveIndicatorComponent = () => {
   return null;
 };
-const TabbedChipsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function TabbedChips(_ref2, ref) {
-  let {
+const TabbedChipsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function TabbedChips(_props, ref) {
+  const mergedProps = useComponentConfig('TabbedChips', _props);
+  const {
       tabs,
       value = tabs[0].id,
       testID = 'tabbed-chips',
       onChange,
       Component = TabComponent
-    } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+    } = mergedProps,
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
   const activeTab = useMemo(() => tabs.find(tab => tab.id === value), [tabs, value]);
   const [scrollTarget, setScrollTarget] = useState(null);
   const handleChange = useCallback(tabValue => {

package/esm/coachmark/Coachmark.js

@@ -4,13 +4,15 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { forwardRef, memo } from 'react';
 import { useWindowDimensions } from 'react-native';
 import { IconButton } from '../buttons';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
 import { Box, HStack, VStack } from '../layout';
 import { InvertedThemeProvider } from '../system';
 import { Text } from '../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const Coachmark = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
+export const Coachmark = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+  const mergedProps = useComponentConfig('Coachmark', _props);
+  const {
       title,
       content,
       checkbox,
@@ -20,8 +22,8 @@ export const Coachmark = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
       width,
       closeButtonAccessibilityLabel,
       testID
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const theme = useTheme();
   const {
     width: windowWidth

package/esm/collapsible/Collapsible.js

@@ -4,15 +4,17 @@ import { ScrollView, StyleSheet, View } from 'react-native';
 import Animated, { useAnimatedReaction, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
 import { animateInMaxSizeConfig, animateInOpacityConfig, animateOutMaxSizeConfig, animateOutOpacityConfig } from '@coinbase/cds-common/animation/collapsible';
 import { usePreviousValue } from '@coinbase/cds-common/hooks/usePreviousValue';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useContentSize } from '../hooks/useContentSize';
 import { useTheme } from '../hooks/useTheme';
 import { convertMotionConfigs } from '../motion/convertMotionConfig';
 import { withMotionTiming } from '../motion/withMotionTiming';
 import { jsx as _jsx } from "react/jsx-runtime";
 const ReanimatedView = Animated.createAnimatedComponent(View);
-export const Collapsible = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forwardedRef) => {
-  var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9;
-  let {
+export const Collapsible = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, forwardedRef) => {
+  var _ref, _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8;
+  const mergedProps = useComponentConfig('Collapsible', _props);
+  const {
     children,
     collapsed = true,
     direction = 'vertical',
@@ -27,7 +29,7 @@ export const Collapsible = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forw
     paddingBottom,
     paddingStart,
     scrollViewProps
-  } = _ref;
+  } = mergedProps;
   const theme = useTheme();
   // TO DO: Remove this after refactoring useContentSize to default values to null on initial render
   const hasMounted = useRef(false);
@@ -41,10 +43,10 @@ export const Collapsible = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forw
   const heightAnimatedValue = useSharedValue(animateInMaxSize.fromValue);
   const opacityAnimatedValue = useSharedValue(animateInOpacity.fromValue);
   const spacingStyles = {
-    paddingTop: theme.space[(_ref2 = (_ref3 = paddingTop != null ? paddingTop : paddingY) != null ? _ref3 : padding) != null ? _ref2 : 0],
-    paddingEnd: theme.space[(_ref4 = (_ref5 = paddingEnd != null ? paddingEnd : paddingX) != null ? _ref5 : padding) != null ? _ref4 : 0],
-    paddingBottom: theme.space[(_ref6 = (_ref7 = paddingBottom != null ? paddingBottom : paddingY) != null ? _ref7 : padding) != null ? _ref6 : 0],
-    paddingStart: theme.space[(_ref8 = (_ref9 = paddingStart != null ? paddingStart : paddingX) != null ? _ref9 : padding) != null ? _ref8 : 0]
+    paddingTop: theme.space[(_ref = (_ref2 = paddingTop != null ? paddingTop : paddingY) != null ? _ref2 : padding) != null ? _ref : 0],
+    paddingEnd: theme.space[(_ref3 = (_ref4 = paddingEnd != null ? paddingEnd : paddingX) != null ? _ref4 : padding) != null ? _ref3 : 0],
+    paddingBottom: theme.space[(_ref5 = (_ref6 = paddingBottom != null ? paddingBottom : paddingY) != null ? _ref6 : padding) != null ? _ref5 : 0],
+    paddingStart: theme.space[(_ref7 = (_ref8 = paddingStart != null ? paddingStart : paddingX) != null ? _ref8 : padding) != null ? _ref7 : 0]
   };
   const prevCollapsed = usePreviousValue(collapsed);
 

package/esm/controls/Checkbox.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, { forwardRef, memo, useMemo } from 'react';
 import { Animated } from 'react-native';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
 import { Icon } from '../icons/Icon';
 import { Interactable } from '../system/Interactable';
@@ -70,14 +71,15 @@ const CheckboxIcon = /*#__PURE__*/memo(_ref => {
     })
   });
 });
-const CheckboxWithRef = /*#__PURE__*/forwardRef(function Checkbox(_ref2, ref) {
-  let {
+const CheckboxWithRef = /*#__PURE__*/forwardRef(function Checkbox(_props, ref) {
+  const mergedProps = useComponentConfig('Checkbox', _props);
+  const {
       children,
       accessibilityLabel,
       accessibilityHint,
       accessible = true
-    } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded);
+    } = mergedProps,
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const accessibilityLabelValue = typeof children === 'string' && accessibilityLabel === undefined ? children : accessibilityLabel;
   const accessibilityHintValue = typeof children === 'string' && accessibilityHint === undefined ? children : accessibilityHint;
   return /*#__PURE__*/_jsx(Control, _extends({

package/esm/controls/CheckboxCell.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, { forwardRef, memo, useCallback, useMemo, useState } from 'react';
 import { Animated } from 'react-native';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useLayout } from '../hooks/useLayout';
 import { useSelectionCellBorderStyle } from '../hooks/useSelectionCellBorderStyle';
 import { useTheme } from '../hooks/useTheme';
@@ -11,8 +12,9 @@ import { Pressable } from '../system/Pressable';
 import { Text } from '../typography/Text';
 import { Checkbox } from './Checkbox';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const CheckboxCellWithRef = /*#__PURE__*/forwardRef(function CheckboxCell(_ref, ref) {
-  let {
+const CheckboxCellWithRef = /*#__PURE__*/forwardRef(function CheckboxCell(_props, ref) {
+  const mergedProps = useComponentConfig('CheckboxCell', _props);
+  const {
       title,
       description,
       checked,
@@ -42,8 +44,8 @@ const CheckboxCellWithRef = /*#__PURE__*/forwardRef(function CheckboxCell(_ref,
       indeterminate,
       readOnly,
       styles
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const theme = useTheme();
   const [layout, setLayout] = useLayout();
   const [pressed, setPressed] = useState(false);

package/esm/controls/Control.js

@@ -5,13 +5,15 @@ import React, { forwardRef, memo, useCallback, useEffect, useMemo, useRef } from
 import { I18nManager, Keyboard, Pressable, View } from 'react-native';
 import { accessibleOpacityDisabled, opacityPressed } from '@coinbase/cds-common/tokens/interactable';
 import { isDevelopment } from '@coinbase/cds-utils';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
 import { Text } from '../typography/Text';
 import { Haptics } from '../utils/haptics';
 import { useControlMotionProps } from './useControlMotionProps';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const ControlWithRef = /*#__PURE__*/forwardRef(function ControlWithRef(_ref, ref) {
-  let {
+const ControlWithRef = /*#__PURE__*/forwardRef(function ControlWithRef(_props, ref) {
+  const mergedProps = useComponentConfig('Control', _props);
+  const {
       testID,
       label,
       checked,
@@ -37,8 +39,8 @@ const ControlWithRef = /*#__PURE__*/forwardRef(function ControlWithRef(_ref, ref
       borderWidth,
       controlSize,
       dotSize
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const theme = useTheme();
   if (isDevelopment() && accessible && !label && !accessibilityLabel) {
     console.warn("Please specify an accessibility label for the " + accessibilityRole + " control with value " + value + ".");
@@ -98,10 +100,10 @@ const ControlWithRef = /*#__PURE__*/forwardRef(function ControlWithRef(_ref, ref
   const handleAccessibilityAction = useCallback(event => {
     if (event.nativeEvent.actionName === 'activate') handlePress();
   }, [handlePress]);
-  const controlIcon = useCallback(_ref2 => {
+  const controlIcon = useCallback(_ref => {
     let {
       pressed
-    } = _ref2;
+    } = _ref;
     /**
      * If the control has label, the label's lineHeight doesn't match the icon size. We need to
      * wrap the icon with a container that match the lineHeight of the label typography and

package/esm/controls/ControlGroup.js

@@ -3,10 +3,12 @@ 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 { isDevelopment } from '@coinbase/cds-utils';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Group } from '../layout';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const ControlGroupWithRef = /*#__PURE__*/forwardRef(function ControlGroup(_ref, ref) {
-  let {
+const ControlGroupWithRef = /*#__PURE__*/forwardRef(function ControlGroup(_props, ref) {
+  const mergedProps = useComponentConfig('ControlGroup', _props);
+  const {
       ControlComponent,
       options,
       label,
@@ -17,8 +19,8 @@ const ControlGroupWithRef = /*#__PURE__*/forwardRef(function ControlGroup(_ref,
       testID,
       gap = 2,
       role = 'group'
-    } = _ref,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+    } = mergedProps,
+    restProps = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   if (isDevelopment() && !label && !ariaLabelledby && !ariaLabel) {
     console.warn('Please specify a label or aria-labelledby for the ControlGroup.');
   }