@coinbase/cds-mobile 8.61.0 → 8.62.1

package/esm/media/RemoteImageGroup.js

@@ -4,11 +4,13 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { Children, isValidElement, useMemo } from 'react';
 import { StyleSheet, Text } from 'react-native';
 import { shapeBorderRadius } from '@coinbase/cds-common/tokens/borderRadius';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
 import { Box } from '../layout/Box';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const RemoteImageGroup = _ref => {
-  let {
+export const RemoteImageGroup = _props => {
+  const mergedProps = useComponentConfig('RemoteImageGroup', _props);
+  const {
       children,
       size = 'm',
       max = 4,
@@ -16,8 +18,8 @@ export const RemoteImageGroup = _ref => {
       testID,
       borderWidth,
       borderColor = borderWidth ? 'bg' : undefined
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const {
     avatarSize,
     fontFamily,

package/esm/navigation/BrowserBar.js

@@ -2,6 +2,7 @@ const _excluded = ["start", "end", "paddingX", "paddingTop", "paddingBottom", "g
 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, { createContext, memo, useContext, useEffect, useState } from 'react';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { HStack } from '../layout';
 import { NavBarEnd, NavBarStart } from './TopNavBar';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -21,8 +22,9 @@ export const useBrowserBarContext = () => {
   }, [context.isWithinBrowserBar]);
   return context;
 };
-export const BrowserBar = /*#__PURE__*/memo(_ref => {
-  let {
+export const BrowserBar = /*#__PURE__*/memo(_props => {
+  const mergedProps = useComponentConfig('BrowserBar', _props);
+  const {
       start,
       end,
       paddingX = 3,
@@ -31,8 +33,8 @@ export const BrowserBar = /*#__PURE__*/memo(_ref => {
       gap = 1,
       testID,
       children
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const [hideStart, setHideStart] = useState(false);
   const [hideEnd, setHideEnd] = useState(false);
   return /*#__PURE__*/_jsx(BrowserBarContext.Provider, {

package/esm/navigation/NavigationTitle.js

@@ -2,14 +2,16 @@ const _excluded = ["accessibilityRole", "font"];
 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 { memo } from 'react';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Text } from '../typography/Text';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const NavigationTitle = /*#__PURE__*/memo(_ref => {
-  let {
+export const NavigationTitle = /*#__PURE__*/memo(_props => {
+  const mergedProps = useComponentConfig('NavigationTitle', _props);
+  const {
       accessibilityRole = 'header',
       font = 'headline'
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   return /*#__PURE__*/_jsx(Text, _extends({
     accessibilityRole: accessibilityRole,
     font: font

package/esm/navigation/NavigationTitleSelect.js

@@ -5,22 +5,24 @@ import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
 import { SelectProvider } from '../controls/SelectContext';
 import { SelectOption } from '../controls/SelectOption';
 import { useSelect } from '../controls/useSelect';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Icon } from '../icons';
 import { HStack } from '../layout/HStack';
 import { Tray } from '../overlays';
 import { Pressable } from '../system';
 import { Text } from '../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-export const NavigationTitleSelect = /*#__PURE__*/memo(_ref => {
-  let {
+export const NavigationTitleSelect = /*#__PURE__*/memo(_props => {
+  const mergedProps = useComponentConfig('NavigationTitleSelect', _props);
+  const {
       options,
       value,
       onChange,
       color = 'fg',
       font = 'headline',
       accessibilityRole = 'header'
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const [visible, setVisible] = useState(false);
   const trayRef = useRef(null);
   const handleCloseMenu = useCallback(() => {
@@ -66,11 +68,11 @@ export const NavigationTitleSelect = /*#__PURE__*/memo(_ref => {
       onCloseComplete: handleCloseMenu,
       children: /*#__PURE__*/_jsx(SelectProvider, {
         value: selectContextValue,
-        children: options.map(_ref2 => {
+        children: options.map(_ref => {
           let {
             id,
             label
-          } = _ref2;
+          } = _ref;
           return /*#__PURE__*/_jsx(SelectOption, {
             onPress: handleOptionPress,
             title: label,

package/esm/navigation/TopNavBar.js

@@ -6,6 +6,7 @@ import React, { memo } from 'react';
 import { usePreviousValue } from '@coinbase/cds-common/hooks/usePreviousValue';
 import { zIndex } from '@coinbase/cds-common/tokens/zIndex';
 import { Collapsible } from '../collapsible/Collapsible';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { HStack, VStack } from '../layout';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const TopNavBarContext = /*#__PURE__*/React.createContext({
@@ -75,8 +76,9 @@ export const NavBarEnd = /*#__PURE__*/memo(_ref2 => {
   });
 });
 NavBarEnd.displayName = 'NavBarEnd';
-export const TopNavBar = /*#__PURE__*/memo(_ref3 => {
-  let {
+export const TopNavBar = /*#__PURE__*/memo(_props => {
+  const mergedProps = useComponentConfig('TopNavBar', _props);
+  const {
     start,
     end,
     children,
@@ -87,7 +89,7 @@ export const TopNavBar = /*#__PURE__*/memo(_ref3 => {
     paddingX = 3,
     paddingTop = 2,
     paddingBottom = bottom ? undefined : 2
-  } = _ref3;
+  } = mergedProps;
   return /*#__PURE__*/_jsx(TopNavBarContext.Provider, {
     value: {
       isWithinTopNavBar: true

package/esm/numbers/RollingNumber/RollingNumber.js

@@ -8,6 +8,7 @@ import { curves, durations } from '@coinbase/cds-common/motion/tokens';
 import { IntlNumberFormat } from '@coinbase/cds-common/numbers/IntlNumberFormat';
 import { useValueChangeDirection } from '@coinbase/cds-common/numbers/useValueChangeDirection';
 import { useLocale } from '@coinbase/cds-common/system/LocaleProvider';
+import { useComponentConfig } from '../../hooks/useComponentConfig';
 import { HStack } from '../../layout/HStack';
 import { Text } from '../../typography/Text';
 import { DefaultRollingNumberAffixSection } from './DefaultRollingNumberAffixSection';
@@ -68,8 +69,9 @@ export const defaultTransitionConfig = {
 
 // Subcomponent prop and component type declarations
 
-export const RollingNumber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
+export const RollingNumber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+  const mergedProps = useComponentConfig('RollingNumber', _props);
+  const {
       value,
       color: colorProp = 'fg',
       colorPulseOnUpdate,
@@ -102,8 +104,8 @@ export const RollingNumber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, re
       RollingNumberValueSectionComponent = DefaultRollingNumberValueSection,
       RollingNumberDigitComponent = DefaultRollingNumberDigit,
       RollingNumberSymbolComponent = DefaultRollingNumberSymbol
-    } = _ref,
-    restTextProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+    } = mergedProps,
+    restTextProps = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const {
     locale: defaultLocale
   } = useLocale();

package/esm/numpad/Numpad.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 } from 'react';
 import { StyleSheet, View } from 'react-native';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
 import { Icon } from '../icons';
 import { HStack, VStack } from '../layout';
@@ -25,8 +26,9 @@ const styles = StyleSheet.create({
     width: '33.3333333%'
   }
 });
-export const Numpad = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Numpad(_ref, forwardedRef) {
-  let {
+export const Numpad = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, forwardedRef) => {
+  const mergedProps = useComponentConfig('Numpad', _props);
+  const {
       separator = '.',
       disabled,
       onPress,
@@ -41,8 +43,8 @@ export const Numpad = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Numpad(
       flexShrink = 0,
       gap = 2,
       feedback
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const buttons = useMemo(() => {
     return buttonValues.map((values, i) => {
       return /*#__PURE__*/_jsx(HStack, {
@@ -80,7 +82,7 @@ export const Numpad = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Numpad(
     }), action]
   }));
 }));
-const NumpadButton = /*#__PURE__*/memo(function NumpadButton(_ref2) {
+const NumpadButton = /*#__PURE__*/memo(function NumpadButton(_ref) {
   let {
     value,
     onPress,
@@ -90,7 +92,7 @@ const NumpadButton = /*#__PURE__*/memo(function NumpadButton(_ref2) {
     separatorAccessibilityLabel,
     deleteAccessibilityLabel,
     feedback
-  } = _ref2;
+  } = _ref;
   const theme = useTheme();
   const content = useMemo(() => {
     if (value === 'DELETE') {

package/esm/overlays/Alert.js

@@ -1,14 +1,16 @@
 import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo } from 'react';
 import { Modal as RNModal } from 'react-native';
 import { Button } from '../buttons';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Pictogram } from '../illustrations';
 import { Box } from '../layout';
 import { Text } from '../typography/Text';
 import { Overlay } from './overlay/Overlay';
 import { useAlertAnimation } from './useAlertAnimation';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const Alert = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
+export const Alert = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+  const mergedProps = useComponentConfig('Alert', _props);
+  const {
     title,
     body,
     pictogram,
@@ -21,7 +23,7 @@ export const Alert = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
     onDismissActionPress,
     testID,
     actionLayout = 'horizontal'
-  } = _ref;
+  } = mergedProps;
   const [{
     modalOpacity,
     modalScale,
@@ -33,10 +35,10 @@ export const Alert = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
     }
   }, [visible, animateIn]);
   const handleClose = useCallback(() => {
-    animateOut.start(_ref2 => {
+    animateOut.start(_ref => {
       let {
         finished
-      } = _ref2;
+      } = _ref;
       if (finished) {
         onRequestClose == null || onRequestClose();
       }

package/esm/overlays/Toast.js

@@ -5,6 +5,7 @@ import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle }
 import { zIndex } from '@coinbase/cds-common/tokens/zIndex';
 import { Button } from '../buttons';
 import { useA11y } from '../hooks/useA11y';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
 import { Box, HStack } from '../layout';
 import { ColorSurge } from '../motion/ColorSurge';
@@ -12,9 +13,10 @@ import { Text } from '../typography/Text';
 import { useToastAnimation } from './useToastAnimation';
 import { useToastPanResponder } from './useToastPanResponder';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const Toast = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+export const Toast = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
   var _action$testID;
-  let {
+  const mergedProps = useComponentConfig('Toast', _props);
+  const {
       text,
       action,
       onWillHide,
@@ -22,8 +24,8 @@ export const Toast = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
       bottomOffset,
       variant,
       accessibilityLabel
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const theme = useTheme();
   const [{
     opacity,
@@ -34,10 +36,10 @@ export const Toast = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   } = useA11y();
   const defaultA11yLabel = text + (action ? action.label : '');
   useEffect(() => {
-    animateIn.start(_ref2 => {
+    animateIn.start(_ref => {
       let {
         finished
-      } = _ref2;
+      } = _ref;
       if (finished) {
         // announce toast copy and action label to screen reader
         announceForA11y(accessibilityLabel != null ? accessibilityLabel : defaultA11yLabel);
@@ -47,10 +49,10 @@ export const Toast = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   const handleClose = useCallback(async () => {
     onWillHide == null || onWillHide();
     return new Promise(resolve => {
-      animateOut.start(_ref3 => {
+      animateOut.start(_ref2 => {
         let {
           finished
-        } = _ref3;
+        } = _ref2;
         if (finished) {
           onDidHide == null || onDidHide();
           resolve(finished);

package/esm/overlays/drawer/Drawer.js

@@ -6,6 +6,7 @@ import { Animated, Keyboard, Modal, Platform, useWindowDimensions } from 'react-
 import { drawerAnimationDefaultDuration, MAX_OVER_DRAG } from '@coinbase/cds-common/animation/drawer';
 import { OverlayContentContext } from '@coinbase/cds-common/overlays/OverlayContentContext';
 import { horizontalDrawerPercentageOfView, verticalDrawerPercentageOfView as defaultVerticalDrawerPercentageOfView } from '@coinbase/cds-common/tokens/drawer';
+import { useComponentConfig } from '../../hooks/useComponentConfig';
 import { useTheme } from '../../hooks/useTheme';
 import { Box } from '../../layout/Box';
 import { HandleBar } from '../handlebar/HandleBar';
@@ -19,8 +20,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const overlayContentContextValue = {
   isDrawer: true
 };
-export const Drawer = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Drawer(_ref, ref) {
-  let {
+export const Drawer = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+  const mergedProps = useComponentConfig('Drawer', _props);
+  const {
       children,
       pin = 'bottom',
       onCloseComplete,
@@ -41,8 +43,8 @@ export const Drawer = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Drawer(
       accessibilityRole = 'alert',
       animationType = 'none',
       disableSafeAreaPaddingBottom
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const theme = useTheme();
   const {
     width,
@@ -61,10 +63,10 @@ export const Drawer = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Drawer(
   const paddingStyles = useDrawerSpacing(pin, disableSafeAreaPaddingBottom);
   const isMounted = useRef(false);
   const handleClose = useCallback(() => {
-    Animated.parallel([animateDrawerOut, animateOverlayOut]).start(_ref2 => {
+    Animated.parallel([animateDrawerOut, animateOverlayOut]).start(_ref => {
       let {
         finished
-      } = _ref2;
+      } = _ref;
       if (finished) {
         isMounted.current = false;
         onCloseComplete == null || onCloseComplete();
@@ -74,10 +76,10 @@ export const Drawer = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Drawer(
   const handleRequestClose = useCallback(() => preventHardwareBackBehaviorAndroid && isAndroid ? undefined : handleClose(), [preventHardwareBackBehaviorAndroid, handleClose, isAndroid]);
   const handleSwipeToClose = useCallback(() => {
     if (!preventDismissGestures) {
-      Animated.parallel([animateSwipeToClose, animateOverlayOut]).start(_ref3 => {
+      Animated.parallel([animateSwipeToClose, animateOverlayOut]).start(_ref2 => {
         let {
           finished
-        } = _ref3;
+        } = _ref2;
         if (finished) {
           isMounted.current = false;
           onCloseComplete == null || onCloseComplete();
@@ -87,10 +89,10 @@ export const Drawer = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Drawer(
   }, [preventDismissGestures, animateSwipeToClose, animateOverlayOut, onCloseComplete]);
   useEffect(() => {
     if (!isMounted.current) {
-      Animated.parallel([animateOverlayIn, animateDrawerIn]).start(_ref4 => {
+      Animated.parallel([animateOverlayIn, animateDrawerIn]).start(_ref3 => {
         let {
           finished
-        } = _ref4;
+        } = _ref3;
         if (finished) {
           isMounted.current = true;
           onOpenComplete == null || onOpenComplete();

package/esm/overlays/modal/Modal.js

@@ -6,13 +6,16 @@ import { Modal as RNModal, Platform, SafeAreaView, StatusBar, StyleSheet } from
 import { usePreviousValue } from '@coinbase/cds-common/hooks/usePreviousValue';
 import { ModalContext } from '@coinbase/cds-common/overlays/ModalContext';
 import { OverlayContentContext } from '@coinbase/cds-common/overlays/OverlayContentContext';
+import { useComponentConfig } from '../../hooks/useComponentConfig';
 import { VStack } from '../../layout';
 import { useModalAnimation } from './useModalAnimation';
 import { jsx as _jsx } from "react/jsx-runtime";
 const overlayContentContextValue = {
   isModal: true
 };
-export const Modal = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((props, ref) => {
+export const Modal = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+  const mergedProps = useComponentConfig('Modal', _props);
+  const props = mergedProps;
   const {
       children,
       visible,

package/esm/overlays/modal/ModalBody.js

@@ -1,15 +1,17 @@
 const _excluded = ["children", "padding", "paddingX", "paddingY", "paddingTop", "paddingBottom", "paddingStart", "paddingEnd"];
 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, { useMemo } from 'react';
+import React, { memo, useMemo } from 'react';
 import { KeyboardAvoidingView, ScrollView } from 'react-native';
 import { useModalContext } from '@coinbase/cds-common/overlays/ModalContext';
+import { useComponentConfig } from '../../hooks/useComponentConfig';
 import { useContentSize } from '../../hooks/useContentSize';
 import { useLayout } from '../../hooks/useLayout';
 import { Box } from '../../layout/Box';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const ModalBody = _ref => {
-  let {
+export const ModalBody = /*#__PURE__*/memo(_props => {
+  const mergedProps = useComponentConfig('ModalBody', _props);
+  const {
       children,
       padding,
       paddingX = 3,
@@ -18,8 +20,8 @@ export const ModalBody = _ref => {
       paddingBottom,
       paddingStart,
       paddingEnd
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const [{
     height: contentHeight
   }, onContentSizeChange] = useContentSize();
@@ -61,4 +63,4 @@ export const ModalBody = _ref => {
       })
     }))
   });
-};
+});

package/esm/overlays/modal/ModalFooter.js

@@ -1,20 +1,22 @@
 const _excluded = ["primaryAction", "secondaryAction", "direction", "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, { Fragment } from 'react';
+import React, { Fragment, memo } from 'react';
 import { useModalContext } from '@coinbase/cds-common/overlays/ModalContext';
 import { ButtonGroup } from '../../buttons/ButtonGroup';
+import { useComponentConfig } from '../../hooks/useComponentConfig';
 import { Box } from '../../layout/Box';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const ModalFooter = _ref => {
-  let {
+export const ModalFooter = /*#__PURE__*/memo(_props => {
+  const mergedProps = useComponentConfig('ModalFooter', _props);
+  const {
       primaryAction,
       secondaryAction,
       direction = 'horizontal',
       paddingX = 3,
       paddingY = 2
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const {
     hideDividers = false
   } = useModalContext();
@@ -41,4 +43,4 @@ export const ModalFooter = _ref => {
       }, i))
     })
   }));
-};
+});

package/esm/overlays/modal/ModalHeader.js

@@ -4,12 +4,14 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React from 'react';
 import { useModalContext } from '@coinbase/cds-common/overlays/ModalContext';
 import { IconButton } from '../../buttons';
+import { useComponentConfig } from '../../hooks/useComponentConfig';
 import { Box } from '../../layout/Box';
 import { HStack } from '../../layout/HStack';
 import { Text } from '../../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const ModalHeader = _ref => {
-  let {
+export const ModalHeader = _props => {
+  const mergedProps = useComponentConfig('ModalHeader', _props);
+  const {
       alignItems = 'center',
       paddingX = 3,
       paddingY = 2,
@@ -19,8 +21,8 @@ export const ModalHeader = _ref => {
       backAccessibilityHint,
       closeAccessibilityLabel,
       closeAccessibilityHint
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const {
     onRequestClose,
     hideCloseButton,

package/esm/overlays/overlay/Overlay.js

@@ -3,18 +3,20 @@ 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 } from 'react';
 import { OverlayContentContext } from '@coinbase/cds-common/overlays/OverlayContentContext';
+import { useComponentConfig } from '../../hooks/useComponentConfig';
 import { useTheme } from '../../hooks/useTheme';
 import { VStack } from '../../layout/VStack';
 import { jsx as _jsx } from "react/jsx-runtime";
 const overlayContentContextValue = {
   isOverlay: true
 };
-export const Overlay = /*#__PURE__*/memo(function Overlay(_ref) {
+export const Overlay = /*#__PURE__*/memo(_props => {
   var _theme$darkSpectrum;
-  let {
+  const mergedProps = useComponentConfig('Overlay', _props);
+  const {
       opacity
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const theme = useTheme();
   return /*#__PURE__*/_jsx(OverlayContentContext.Provider, {
     value: overlayContentContextValue,

package/esm/overlays/tooltip/Tooltip.js

@@ -1,12 +1,14 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React, { Fragment, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Modal as RNModal, TouchableOpacity, View } from 'react-native';
+import { useComponentConfig } from '../../hooks/useComponentConfig';
 import { InvertedThemeProvider } from '../../system/ThemeProvider';
 import { InternalTooltip } from './InternalTooltip';
 import { useTooltipAnimation } from './useTooltipAnimation';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const Tooltip = /*#__PURE__*/memo(_ref => {
-  let {
+export const Tooltip = /*#__PURE__*/memo(_props => {
+  const mergedProps = useComponentConfig('Tooltip', _props);
+  const {
     children,
     content,
     placement = 'top',
@@ -25,7 +27,7 @@ export const Tooltip = /*#__PURE__*/memo(_ref => {
     elevation,
     openDelay,
     closeDelay
-  } = _ref;
+  } = mergedProps;
   const subjectRef = useRef(null);
   const [isOpen, setIsOpen] = useState(false);
   const isVisible = visible !== false && isOpen;

package/esm/overlays/tray/Tray.js

@@ -6,6 +6,7 @@ import React, { createContext, forwardRef, memo, useCallback, useContext, useEff
 import { useWindowDimensions } from 'react-native';
 import { MAX_OVER_DRAG } from '@coinbase/cds-common/animation/drawer';
 import { verticalDrawerPercentageOfView as defaultVerticalDrawerPercentageOfView } from '@coinbase/cds-common/tokens/drawer';
+import { useComponentConfig } from '../../hooks/useComponentConfig';
 import { Box, VStack } from '../../layout';
 import { Text } from '../../typography/Text';
 import { Drawer } from '../drawer/Drawer';
@@ -14,8 +15,9 @@ export const TrayContext = /*#__PURE__*/createContext({
   verticalDrawerPercentageOfView: defaultVerticalDrawerPercentageOfView,
   titleHeight: 0
 });
-export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_ref, ref) {
-  let {
+export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_props, ref) {
+  const mergedProps = useComponentConfig('Tray', _props);
+  const {
       children,
       title,
       header,
@@ -25,8 +27,8 @@ export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_ref
       handleBarVariant = 'outside',
       verticalDrawerPercentageOfView = defaultVerticalDrawerPercentageOfView,
       styles
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const [titleHeight, setTitleHeight] = useState(0);
   const isInsideHandleBar = handleBarVariant === 'inside';
   const isTitleString = typeof title === 'string';
@@ -36,13 +38,13 @@ export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_ref
     titleStyle,
     drawerStyles
   } = useMemo(() => {
-    const _ref2 = styles != null ? styles : {},
+    const _ref = styles != null ? styles : {},
       {
         content: contentStyle,
         header: headerStyle,
         title: titleStyle
-      } = _ref2,
-      drawerStyles = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+      } = _ref,
+      drawerStyles = _objectWithoutPropertiesLoose(_ref, _excluded2);
     return {
       contentStyle,
       headerStyle,
@@ -54,10 +56,10 @@ export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_ref
     if (!title) return;
     setTitleHeight(event.nativeEvent.layout.height);
   }, [title]);
-  const renderChildren = useCallback(_ref3 => {
+  const renderChildren = useCallback(_ref2 => {
     let {
       handleClose
-    } = _ref3;
+    } = _ref2;
     const content = typeof children === 'function' ? children({
       handleClose
     }) : children;
@@ -125,10 +127,10 @@ export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_ref
  * @deprecated Redundant component. This will be removed in a future major release.
  * @deprecationExpectedRemoval v9
  */
-export const TrayStickyFooter = _ref4 => {
+export const TrayStickyFooter = _ref3 => {
   let {
     children
-  } = _ref4;
+  } = _ref3;
   const {
     verticalDrawerPercentageOfView,
     titleHeight