@coinbase/cds-mobile 8.61.0 → 8.62.0

package/esm/controls/InputStack.js

@@ -4,6 +4,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { memo, useMemo } from 'react';
 import { Animated, StyleSheet, View } from 'react-native';
 import { accessibleOpacityDisabled } from '@coinbase/cds-common/tokens/interactable';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useLayout } from '../hooks/useLayout';
 import { useTheme } from '../hooks/useTheme';
 import { HStack } from '../layout/HStack';
@@ -18,8 +19,9 @@ const variantColorMap = {
   foregroundMuted: 'fgMuted',
   secondary: 'bgSecondary'
 };
-export const InputStack = /*#__PURE__*/memo(function InputStack(_ref) {
-  let {
+export const InputStack = /*#__PURE__*/memo(function InputStack(_props) {
+  const mergedProps = useComponentConfig('InputStack', _props);
+  const {
       /** CDS custom props */
       width = '100%',
       prependNode,
@@ -41,8 +43,8 @@ export const InputStack = /*#__PURE__*/memo(function InputStack(_ref) {
       inputBackground = 'bg',
       borderWidth = 100,
       focusedBorderWidth = borderWidth
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const theme = useTheme();
   const [inputAreaSize, onInputAreaLayout] = useLayout();
   const inputAreaStyle = useMemo(() => {

package/esm/controls/Radio.js

@@ -4,6 +4,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { forwardRef, memo } from 'react';
 import { Animated, StyleSheet } from 'react-native';
 import { Circle, Svg } from 'react-native-svg';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
 import { Box } from '../layout';
 import { Interactable } from '../system/Interactable';
@@ -84,13 +85,14 @@ const RadioIcon = _ref2 => {
     })
   });
 };
-const RadioWithRef = /*#__PURE__*/forwardRef(function Radio(_ref3, ref) {
-  let {
+const RadioWithRef = /*#__PURE__*/forwardRef(function Radio(_props, ref) {
+  const mergedProps = useComponentConfig('Radio', _props);
+  const {
       children,
       accessibilityHint,
       accessibilityLabel
-    } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded);
+    } = mergedProps,
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const accessibilityLabelValue = typeof children === 'string' && accessibilityLabel === undefined ? children : accessibilityLabel;
   return /*#__PURE__*/_jsx(Control, _extends({}, props, {
     ref: ref,

package/esm/controls/RadioCell.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 { Radio } from './Radio';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const RadioCellWithRef = /*#__PURE__*/forwardRef(function RadioCell(_ref, ref) {
-  let {
+const RadioCellWithRef = /*#__PURE__*/forwardRef(function RadioCell(_props, ref) {
+  const mergedProps = useComponentConfig('RadioCell', _props);
+  const {
       title,
       description,
       checked,
@@ -40,8 +42,8 @@ const RadioCellWithRef = /*#__PURE__*/forwardRef(function RadioCell(_ref, ref) {
       pressedBorderColor = 'bgPrimary',
       pressedBorderWidth = 200,
       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/SearchInput.js

@@ -3,12 +3,14 @@ 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, useRef, useState } from 'react';
 import { useMergeRefs } from '@coinbase/cds-common/hooks/useMergeRefs';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box } from '../layout/Box';
 import { InputIconButton } from './InputIconButton';
 import { TextInput } from './TextInput';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const SearchInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
+export const SearchInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+  const mergedProps = useComponentConfig('SearchInput', _props);
+  const {
       value,
       testID,
       onSearch,
@@ -26,8 +28,8 @@ export const SearchInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref)
       startIconAccessibilityLabel = 'Back',
       clearIconAccessibilityLabel = 'Clear text',
       borderRadius = 1000
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const [startIconName, setStartIconName] = useState(startIcon != null ? startIcon : 'search');
   const internalRef = useRef(null);
   const refs = useMergeRefs(ref, internalRef);

package/esm/controls/SelectOption.js

@@ -5,14 +5,16 @@ import React, { memo, useCallback } from 'react';
 import { selectCellMobileSpacingConfig } from '@coinbase/cds-common/tokens/select';
 import { Cell } from '../cells/Cell';
 import { CellAccessory } from '../cells/CellAccessory';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { VStack } from '../layout/VStack';
 import { Text } from '../typography/Text';
 import { useSelectContext } from './SelectContext';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const selectOptionMinHeight = 56;
 const selectOptionMaxHeight = 64;
-export const SelectOption = /*#__PURE__*/memo(function SelectOption(_ref) {
-  let {
+export const SelectOption = /*#__PURE__*/memo(_props => {
+  const mergedProps = useComponentConfig('SelectOption', _props);
+  const {
       title,
       description,
       multiline,
@@ -20,8 +22,8 @@ export const SelectOption = /*#__PURE__*/memo(function SelectOption(_ref) {
       value,
       accessibilityLabel,
       accessibilityHint
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const {
     value: selectedValue,
     onChange,

package/esm/controls/Switch.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 { StyleSheet } from 'react-native';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
 import { Box } from '../layout/Box';
 import { Interactable } from '../system/Interactable';
@@ -70,11 +71,12 @@ const SwitchIcon = _ref => {
     })
   });
 };
-const SwitchWithRef = /*#__PURE__*/forwardRef(function SwitchWithRef(_ref2, ref) {
-  let {
+const SwitchWithRef = /*#__PURE__*/forwardRef(function SwitchWithRef(_props, ref) {
+  const mergedProps = useComponentConfig('Switch', _props);
+  const {
       children
-    } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded);
+    } = mergedProps,
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const theme = useTheme();
   const {
     switchHeight

package/esm/controls/TextInput.js

@@ -5,6 +5,7 @@ import React, { cloneElement, forwardRef, isValidElement, memo, useCallback, use
 import { Pressable } from 'react-native';
 import { useInputVariant } from '@coinbase/cds-common/hooks/useInputVariant';
 import { useMergeRefs } from '@coinbase/cds-common/hooks/useMergeRefs';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useInputBorderStyle } from '../hooks/useInputBorderStyle';
 import { useTheme } from '../hooks/useTheme';
 import { Box } from '../layout/Box';
@@ -25,9 +26,10 @@ const variantColorMap = {
   foregroundMuted: 'fgMuted',
   secondary: 'bgSecondary'
 };
-export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
   var _testIDMap$end, _testIDMap$helperText, _testIDMap$label;
-  let {
+  const mergedProps = useComponentConfig('TextInput', _props);
+  const {
       label,
       helperText = '',
       variant = 'foregroundMuted',
@@ -50,8 +52,8 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
       labelVariant = 'outside',
       labelNode,
       inputBackground
-    } = _ref,
-    editableInputProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+    } = mergedProps,
+    editableInputProps = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const theme = useTheme();
   const [focused, setFocused] = useState(false);
   const focusedVariant = useInputVariant(focused, variant);

package/esm/core/componentConfig.js

@@ -0,0 +1 @@
+export {};

package/esm/dates/Calendar.js

@@ -10,6 +10,7 @@ import { getTimesFromDatesAndRanges } from '@coinbase/cds-common/dates/getTimesF
 import { useLocale } from '@coinbase/cds-common/system/LocaleProvider';
 import { accessibleOpacityDisabled } from '@coinbase/cds-common/tokens/interactable';
 import { useA11y } from '../hooks/useA11y';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useScreenReaderStatus } from '../hooks/useScreenReaderStatus';
 import { Icon } from '../icons/Icon';
 import { Box } from '../layout/Box';
@@ -140,8 +141,9 @@ const CalendarDay = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) => {
   return dayButton;
 }));
 CalendarDay.displayName = 'CalendarDay';
-export const Calendar = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref3, ref) => {
-  let {
+export const Calendar = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+  const mergedProps = useComponentConfig('Calendar', _props);
+  const {
       selectedDate,
       seedDate,
       onPressDate,
@@ -158,8 +160,8 @@ export const Calendar = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref3, ref) =
       highlightedDateAccessibilityHint = 'Highlighted',
       style,
       styles
-    } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2);
+    } = mergedProps,
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
   const {
     setA11yFocus,
     announceForA11y
@@ -316,8 +318,8 @@ export const Calendar = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref3, ref) =
             children: day.charAt(0)
           })
         }, day))
-      }), calendarWeeks.map(_ref4 => {
-        let [weekId, week] = _ref4;
+      }), calendarWeeks.map(_ref3 => {
+        let [weekId, week] = _ref3;
         return /*#__PURE__*/_jsx(HStack, {
           gap: 1,
           justifyContent: "space-between",

package/esm/dates/DateInput.js

@@ -6,10 +6,12 @@ import { IntlDateFormat } from '@coinbase/cds-common/dates/IntlDateFormat';
 import { useDateInput } from '@coinbase/cds-common/dates/useDateInput';
 import { useLocale } from '@coinbase/cds-common/system/LocaleProvider';
 import { TextInput } from '../controls/TextInput';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { VStack } from '../layout/VStack';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const DateInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
+export const DateInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+  const mergedProps = useComponentConfig('DateInput', _props);
+  const {
       date,
       onChangeDate,
       error,
@@ -32,8 +34,8 @@ export const DateInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
       onEndEditing,
       testIDMap,
       style
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const hasTyped = useRef(Boolean(date));
   const {
     locale

package/esm/dates/DatePicker.js

@@ -4,14 +4,16 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import { forwardRef, memo, useCallback, useMemo, useRef, useState } from 'react';
 import { Button } from '../buttons/Button';
 import { InputIconButton } from '../controls/InputIconButton';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box, VStack } from '../layout';
 import { Tray } from '../overlays/tray/Tray';
 import { StickyFooter } from '../sticky-footer/StickyFooter';
 import { Calendar } from './Calendar';
 import { DateInput } from './DateInput';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const DatePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
+export const DatePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+  const mergedProps = useComponentConfig('DatePicker', _props);
+  const {
       date,
       styles,
       highlightedDates,
@@ -49,14 +51,15 @@ export const DatePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref)
       onConfirm,
       onCancel,
       onChange
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const [showPicker, setShowPicker] = useState(false);
   const [calendarSelectedDate, setCalendarSelectedDate] = useState(null);
   const dateInputRef = useRef(null);
   const calendarButtonRef = useRef(null);
   const calendarRef = useRef(null);
   const closedByConfirmRef = useRef(false);
+
   /**
    * Be careful to preserve the correct event orders
    *   1. Selecting a date with the picker:                onOpen -> onConfirm -> onChangeDate -> onErrorDate -> onClose
@@ -139,10 +142,10 @@ export const DatePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref)
       variant: variant
     })), showPicker && /*#__PURE__*/_jsx(Tray, {
       accessibilityRole: "none",
-      footer: _ref2 => {
+      footer: _ref => {
         let {
           handleClose
-        } = _ref2;
+        } = _ref;
         return /*#__PURE__*/_jsx(StickyFooter, {
           paddingTop: 3,
           paddingX: 3,

package/esm/dots/DotCount.js

@@ -7,6 +7,7 @@ import Animated, { runOnJS, useAnimatedReaction, useAnimatedStyle, useSharedValu
 import { usePreviousValue } from '@coinbase/cds-common/hooks/usePreviousValue';
 import { dotOpacityEnterConfig, dotOpacityExitConfig, dotScaleEnterConfig, dotScaleExitConfig } from '@coinbase/cds-common/motion/dot';
 import { dotCountSize } from '@coinbase/cds-common/tokens/dot';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useDotPinStyles } from '../hooks/useDotPinStyles';
 import { useTheme } from '../hooks/useTheme';
 import { convertMotionConfigs } from '../motion/convertMotionConfig';
@@ -30,8 +31,9 @@ const dotTextPaddingHorizontal = 6;
 const variantColorMap = {
   negative: 'bgNegative'
 };
-export const DotCount = /*#__PURE__*/memo(_ref => {
-  let {
+export const DotCount = /*#__PURE__*/memo(_props => {
+  const mergedProps = useComponentConfig('DotCount', _props);
+  const {
       children,
       pin,
       variant = 'negative',
@@ -40,8 +42,8 @@ export const DotCount = /*#__PURE__*/memo(_ref => {
       overlap,
       style,
       styles
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const theme = useTheme();
   const [childrenSize, onChildrenLayout] = useDotsLayout();
   const transforms = useDotPinStyles(childrenSize, {

package/esm/dots/DotStatusColor.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 { View } from 'react-native';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useDotPinStyles } from '../hooks/useDotPinStyles';
 import { useTheme } from '../hooks/useTheme';
 import { getTransform } from './dotStyles';
@@ -15,15 +16,16 @@ const variantColorMap = {
   warning: 'bgWarning',
   negative: 'bgNegative'
 };
-export const DotStatusColor = /*#__PURE__*/memo(_ref => {
-  let {
+export const DotStatusColor = /*#__PURE__*/memo(_props => {
+  const mergedProps = useComponentConfig('DotStatusColor', _props);
+  const {
       variant,
       pin,
       size = 's',
       children,
       overlap
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const theme = useTheme();
   const iconSize = theme.iconSize[size];
   const [childrenSize, onLayout] = useDotsLayout();

package/esm/dots/DotSymbol.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 { View } from 'react-native';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useDotPinStyles } from '../hooks/useDotPinStyles';
 import { useTheme } from '../hooks/useTheme';
 import { Icon } from '../icons/Icon';
@@ -11,8 +12,9 @@ import { RemoteImage } from '../media/RemoteImage';
 import { getTransform } from './dotStyles';
 import { useDotsLayout } from './useDotsLayout';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const DotSymbol = /*#__PURE__*/memo(_ref => {
-  let {
+export const DotSymbol = /*#__PURE__*/memo(_props => {
+  const mergedProps = useComponentConfig('DotSymbol', _props);
+  const {
       children,
       symbol,
       pin,
@@ -27,8 +29,8 @@ export const DotSymbol = /*#__PURE__*/memo(_ref => {
       style,
       iconStyle,
       imageStyle
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const theme = useTheme();
   const iconSize = theme.iconSize[size];
   const [childrenSize, onChildrenLayout] = useDotsLayout();

package/esm/hooks/useComponentConfig.js

@@ -0,0 +1,27 @@
+import { useStore } from 'zustand';
+import { useComponentConfigStore } from '../system/ComponentConfigProvider';
+import { mergeComponentProps } from '../utils/mergeComponentProps';
+
+/**
+ * Subscribes to the component config for a specific component via zustand selectors.
+ * Only triggers re-renders when the config for THIS component changes - other
+ * components' config changes are ignored.
+ *
+ * Raw config values are stored in the zustand store (not normalized to functions)
+ * so that Object.is reference comparisons work correctly and unchanged entries
+ * never cause re-renders.
+ *
+ * @param componentName - The component key in ComponentConfig (e.g., 'Button')
+ * @param localProps - The props passed directly to the component instance
+ * @returns Merged props with config defaults applied (local props take precedence)
+ */
+export const useComponentConfig = (componentName, localProps) => {
+  const store = useComponentConfigStore();
+  const rawConfig = useStore(store, state => {
+    var _state$components;
+    return (_state$components = state.components) == null ? void 0 : _state$components[componentName];
+  });
+  if (!rawConfig) return localProps;
+  const resolvedConfig = typeof rawConfig === 'function' ? rawConfig(localProps) : rawConfig;
+  return mergeComponentProps(resolvedConfig, localProps);
+};

package/esm/icons/Icon.js

@@ -2,6 +2,7 @@ import React, { memo, useMemo } from 'react';
 import { Animated, Text, useWindowDimensions } from 'react-native';
 import { glyphMap } from '@coinbase/cds-icons/glyphMap';
 import { isDevelopment } from '@coinbase/cds-utils';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
 import { Box } from '../layout/Box';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -10,8 +11,9 @@ const getIconSourceSize = iconSize => {
   if (iconSize <= 16) return 16;
   return 24;
 };
-export const Icon = /*#__PURE__*/memo(function Icon(_ref) {
-  let {
+export const Icon = /*#__PURE__*/memo(_props => {
+  const mergedProps = useComponentConfig('Icon', _props);
+  const {
     accessibilityLabel,
     accessibilityHint,
     animated = false,
@@ -31,7 +33,7 @@ export const Icon = /*#__PURE__*/memo(function Icon(_ref) {
     paddingBottom,
     paddingStart,
     active
-  } = _ref;
+  } = mergedProps;
   const TextComponent = animated ? Animated.Text : Text;
   const theme = useTheme();
   const {
@@ -44,12 +46,12 @@ export const Icon = /*#__PURE__*/memo(function Icon(_ref) {
   const iconColor = theme.color[color];
   const finalColor = dangerouslySetColor != null ? dangerouslySetColor : iconColor;
   const rootStyle = useMemo(() => {
-    var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9;
+    var _ref, _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8;
     return [{
-      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]
     }, style, styles == null ? void 0 : styles.root];
   }, [style, theme.space, padding, paddingX, paddingY, paddingTop, paddingEnd, paddingBottom, paddingStart, styles == null ? void 0 : styles.root]);
   const iconStyle = useMemo(() => [{

package/esm/index.js

@@ -1,3 +1,5 @@
 export * from './core/theme';
+export * from './hooks/useComponentConfig';
 export * from './hooks/useTheme';
+export * from './system/ComponentConfigProvider';
 export * from './system/ThemeProvider';

package/esm/layout/Divider.js

@@ -3,15 +3,17 @@ 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 { memo, useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
 import { Box } from './Box';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const Divider = /*#__PURE__*/memo(function Divider(_ref) {
-  let {
+export const Divider = /*#__PURE__*/memo(_props => {
+  const mergedProps = useComponentConfig('Divider', _props);
+  const {
       color = 'bgLine',
       direction = 'horizontal'
-    } = _ref,
-    boxProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+    } = mergedProps,
+    boxProps = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const theme = useTheme();
   const style = useMemo(() => [styles[direction], {
     backgroundColor: theme.color[color]

package/esm/layout/Fallback.js

@@ -6,20 +6,22 @@ import React, { memo, useEffect, useMemo, useRef } from 'react';
 import { Animated, StyleSheet, Text, View } from 'react-native';
 import { useFallbackShape } from '@coinbase/cds-common/hooks/useFallbackShape';
 import { LinearGradient } from '../gradients/LinearGradient';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
 import { fallbackShimmer } from '../styles/fallbackShimmer';
 import { Box } from './Box';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const Fallback = /*#__PURE__*/memo(function Fallback(_ref) {
-  let {
+export const Fallback = /*#__PURE__*/memo(_props => {
+  const mergedProps = useComponentConfig('Fallback', _props);
+  const {
       height,
       shape = 'rectangle',
       width: baseWidth,
       disableRandomRectWidth,
       rectWidthVariant,
       accessibilityLabel = 'Loading'
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const fallbackShapeOptions = useMemo(() => ({
     disableRandomRectWidth,
     rectWidthVariant

package/esm/media/Avatar.js

@@ -5,6 +5,7 @@ import React, { memo, useMemo } from 'react';
 import { StyleSheet } from 'react-native';
 import { colorSchemeMap } from '@coinbase/cds-common/tokens/avatar';
 import { getAccessibleColor } from '@coinbase/cds-common/utils/getAccessibleColor';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
 import { Box } from '../layout/Box';
 import { Text } from '../typography/Text';
@@ -14,8 +15,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const smallAvatarSize = 44;
 export const coloredFallbackTestID = 'cds-avatar-colored-fallback';
 export const fallbackImageSrc = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2NjIpLCBxdWFsaXR5ID0gOTAK/9sAQwADAgIDAgIDAwMDBAMDBAUIBQUEBAUKBwcGCAwKDAwLCgsLDQ4SEA0OEQ4LCxAWEBETFBUVFQwPFxgWFBgSFBUU/9sAQwEDBAQFBAUJBQUJFA0LDRQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQU/8AAEQgAOAA4AwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8A+t80Zo4o4oAM0ZrsPBvw7m8Sxi7uZDa2GcKwHzyeu30HvXdf8Kp0Dytnlz7v+ennHP8Ah+lAHiuaM12XjL4dTeG4jd2sjXViDhiR88f1x1HvXG8UAGaKOKKADI9Kkt4vtFxFEOC7Bc/U4qPJ9KVXZGDLwwOQaAPpS0tY7G1ht4VCRRKEVcdABipc1meG9eh8RaRBeRMNzACRB1R+4/z2rU/OgCK5t47y3lgmUPFKpR1I6gjBr5uu4fst1NCefLdkz64OK+g/EWuQ+HtJnvJmHyjCIerv2Ar55klaWRnblmJJPqaAG5HpRRk+lFABzVnTtOutWvY7W0iMs8hwqj+Z9BVbB9a9o+GXhlNI0VL2VR9rvFD5PVY/4R+PX8vSgCfwX4EXwsDNJdSTXTrh1RisQ/Dv9T+QrrP89aT8qPyoA5Txr4FHilRNHdSQ3Ua4RHYtEfw7fUfrXjOo6dc6Tey2t3EYp4zgqf5j1FfSP5VxvxN8Mpq+jPfRKPtlmpfI6tH/ABD8Ov5+tAHi/NFGDRQBY060+3aja22f9dKsf5kD+tfSKIsaKigKqjAAHAFFFAC/j+lL+P6UUUAH4/pTXRZEZGG5WGCCOooooA+btRtPsOoXVtn/AFMrR/kSKKKKAP/Z';
-export const Avatar = /*#__PURE__*/memo(_ref => {
-  let {
+export const Avatar = /*#__PURE__*/memo(_props => {
+  const mergedProps = useComponentConfig('Avatar', _props);
+  const {
       alt,
       src,
       shape = 'circle',
@@ -27,8 +29,8 @@ export const Avatar = /*#__PURE__*/memo(_ref => {
       name,
       accessibilityLabel,
       style
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const imgSrc = src != null ? src : fallbackImageSrc;
   const shapeStyle = shapeStyles[shape];
   const theme = useTheme();

package/esm/media/RemoteImage.js

@@ -6,6 +6,7 @@ import React, { memo, useMemo } from 'react';
 import { Image } from 'react-native';
 import { ClipPath, Defs, Image as SvgImage, Path, Svg, SvgXml } from 'react-native-svg';
 import { SvgCssUri } from 'react-native-svg/css';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function getSource(source, cachePolicy) {
@@ -57,9 +58,10 @@ const shapeBorderRadius = {
   rectangle: 0,
   hexagon: 0
 };
-export const RemoteImage = /*#__PURE__*/memo(function RemoteImage(_ref2) {
+export const RemoteImage = /*#__PURE__*/memo(function RemoteImage(_props) {
   var _props$accessible;
-  let {
+  const mergedProps = useComponentConfig('RemoteImage', _props);
+  const {
       width,
       height,
       aspectRatio,
@@ -75,8 +77,8 @@ export const RemoteImage = /*#__PURE__*/memo(function RemoteImage(_ref2) {
       onLoad,
       fallbackAccessibilityLabel,
       fallbackAccessibilityHint
-    } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+    } = mergedProps,
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
   const shapeRadius = shapeBorderRadius[shape];
   const {
     activeColorScheme,