@coinbase/cds-mobile 8.60.0 → 8.62.0

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

package/esm/page/PageFooter.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 { pageFooterHeight } from '@coinbase/cds-common/tokens/page';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box } from '../layout/Box';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const PageFooter = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function PageFooter(_ref, ref) {
-  let {
+export const PageFooter = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+  const mergedProps = useComponentConfig('PageFooter', _props);
+  const {
       action
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   return /*#__PURE__*/_jsx(Box, _extends({
     ref: ref,
     accessibilityRole: "toolbar",

package/esm/page/PageHeader.js

@@ -3,20 +3,22 @@ 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 { pageHeaderHeight } from '@coinbase/cds-common/tokens/page';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box } from '../layout/Box';
 import { HStack } from '../layout/HStack';
 import { VStack } from '../layout/VStack';
 import { Text } from '../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const PageHeader = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function PageHeader(_ref, ref) {
-  let {
+export const PageHeader = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+  const mergedProps = useComponentConfig('PageHeader', _props);
+  const {
       start,
       title,
       end,
       styles,
       style
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const isMultiRow = useMemo(() => Boolean(start && title && end), [start, end, title]);
   return /*#__PURE__*/_jsxs(VStack, _extends({
     ref: ref,

package/esm/perf/component-config/Button.component-config.perf-test.js

@@ -0,0 +1,35 @@
+import { measurePerformance } from 'reassure';
+import { Button } from '../../buttons/Button';
+import { ComponentConfigProvider } from '../../system/ComponentConfigProvider';
+import { DefaultThemeProvider } from '../../utils/testHelpers';
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+const buttonCount = 1000;
+const ButtonList = () => {
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: Array.from({
+      length: buttonCount
+    }, (_, index) => /*#__PURE__*/_jsx(Button, {
+      children: "Child"
+    }, index))
+  });
+};
+describe('Button component-config performance (mobile)', () => {
+  jest.setTimeout(20000);
+  it('no provider', async () => {
+    await measurePerformance(/*#__PURE__*/_jsx(DefaultThemeProvider, {
+      children: /*#__PURE__*/_jsx(ButtonList, {})
+    }));
+  });
+  it('provider customization', async () => {
+    await measurePerformance(/*#__PURE__*/_jsx(DefaultThemeProvider, {
+      children: /*#__PURE__*/_jsx(ComponentConfigProvider, {
+        value: {
+          Button: {
+            compact: true
+          }
+        },
+        children: /*#__PURE__*/_jsx(ButtonList, {})
+      })
+    }));
+  });
+});

package/esm/perf/component-config/ComponentConfigProvider.perf-test.js

@@ -0,0 +1,147 @@
+import React, { useMemo, useState } from 'react';
+import { Pressable, Text } from 'react-native';
+import { fireEvent, screen } from '@testing-library/react-native';
+import { measurePerformance } from 'reassure';
+import { useComponentConfig } from '../../hooks/useComponentConfig';
+import { ComponentConfigProvider } from '../../system/ComponentConfigProvider';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const consumerCount = 1000;
+const updateIterations = 50;
+const testTimeoutMs = 20000;
+const stableButtonConfig = () => ({
+  compact: true
+});
+const stableAvatarConfig = () => ({});
+const ButtonConfigConsumer = _ref => {
+  let {
+    index
+  } = _ref;
+  const mergedProps = useComponentConfig('Button', {
+    compact: false,
+    variant: 'primary'
+  });
+  return /*#__PURE__*/_jsx(Text, {
+    testID: "consumer-" + index,
+    children: mergedProps.compact ? 'compact' : 'default'
+  });
+};
+const ButtonConfigConsumerList = _ref2 => {
+  let {
+    count
+  } = _ref2;
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: Array.from({
+      length: count
+    }, (_, index) => /*#__PURE__*/_jsx(ButtonConfigConsumer, {
+      index: index
+    }, index))
+  });
+};
+const UnrelatedKeyUpdateHarness = _ref3 => {
+  let {
+    count
+  } = _ref3;
+  const [unrelatedUpdates, setUnrelatedUpdates] = useState(0);
+  const value = useMemo(() => ({
+    Avatar: () => unrelatedUpdates % 2 === 0 ? {} : {},
+    Button: stableButtonConfig
+  }), [unrelatedUpdates]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Pressable, {
+      onPress: () => setUnrelatedUpdates(v => v + 1),
+      testID: "update-unrelated-key",
+      children: /*#__PURE__*/_jsx(Text, {
+        children: "Update unrelated key"
+      })
+    }), /*#__PURE__*/_jsx(ComponentConfigProvider, {
+      value: value,
+      children: /*#__PURE__*/_jsx(ButtonConfigConsumerList, {
+        count: count
+      })
+    })]
+  });
+};
+const TargetKeyUpdateHarness = _ref4 => {
+  let {
+    count
+  } = _ref4;
+  const [targetUpdates, setTargetUpdates] = useState(0);
+  const value = useMemo(() => ({
+    Avatar: stableAvatarConfig,
+    Button: () => ({
+      compact: targetUpdates % 2 === 0
+    })
+  }), [targetUpdates]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Pressable, {
+      onPress: () => setTargetUpdates(v => v + 1),
+      testID: "update-target-key",
+      children: /*#__PURE__*/_jsx(Text, {
+        children: "Update target key"
+      })
+    }), /*#__PURE__*/_jsx(ComponentConfigProvider, {
+      value: value,
+      children: /*#__PURE__*/_jsx(ButtonConfigConsumerList, {
+        count: count
+      })
+    })]
+  });
+};
+describe('ComponentConfigProvider performance tests (mobile)', () => {
+  jest.setTimeout(testTimeoutMs);
+  beforeAll(() => {
+    jest.spyOn(console, 'error').mockImplementation(() => {});
+  });
+  afterAll(() => {
+    jest.restoreAllMocks();
+  });
+  it('Scenario A: renders 1000 consumers under one provider', async () => {
+    await measurePerformance(/*#__PURE__*/_jsx(ComponentConfigProvider, {
+      value: {
+        Button: stableButtonConfig
+      },
+      children: /*#__PURE__*/_jsx(ButtonConfigConsumerList, {
+        count: consumerCount
+      })
+    }));
+  });
+  it('Scenario B: updates unrelated component key 50 times', async () => {
+    const scenario = async () => {
+      for (let i = 0; i < updateIterations; i += 1) {
+        fireEvent.press(screen.getByTestId('update-unrelated-key'));
+      }
+    };
+    await measurePerformance(/*#__PURE__*/_jsx(UnrelatedKeyUpdateHarness, {
+      count: consumerCount
+    }), {
+      scenario
+    });
+  });
+  it('Scenario C: updates target component key 50 times', async () => {
+    const scenario = async () => {
+      for (let i = 0; i < updateIterations; i += 1) {
+        fireEvent.press(screen.getByTestId('update-target-key'));
+      }
+    };
+    await measurePerformance(/*#__PURE__*/_jsx(TargetKeyUpdateHarness, {
+      count: consumerCount
+    }), {
+      scenario
+    });
+  });
+  it('Scenario D (baseline): no provider with 1000 consumers', async () => {
+    await measurePerformance(/*#__PURE__*/_jsx(ButtonConfigConsumerList, {
+      count: consumerCount
+    }));
+  });
+  it('Scenario D (provider): provider enabled with 1000 consumers', async () => {
+    await measurePerformance(/*#__PURE__*/_jsx(ComponentConfigProvider, {
+      value: {
+        Button: stableButtonConfig
+      },
+      children: /*#__PURE__*/_jsx(ButtonConfigConsumerList, {
+        count: consumerCount
+      })
+    }));
+  });
+});