@coinbase/cds-web 8.61.0 → 8.62.0

package/esm/overlays/tray/Tray.js

@@ -9,6 +9,7 @@ import { OverlayContentContext } from '@coinbase/cds-common/overlays/OverlayCont
 import { domMax, LazyMotion, m as motion, MotionConfig, useAnimate, useDragControls } from 'framer-motion';
 import { IconButton } from '../../buttons';
 import { cx } from '../../cx';
+import { useComponentConfig } from '../../hooks/useComponentConfig';
 import { useDimensions } from '../../hooks/useDimensions';
 import { useScrollBlocker } from '../../hooks/useScrollBlocker';
 import { useTheme } from '../../hooks/useTheme';
@@ -90,8 +91,9 @@ const animationConfig = {
 const overlayContentContextValue = {
   isDrawer: true
 };
-export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_ref2, ref) {
-  let {
+export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_props, ref) {
+  const mergedProps = useComponentConfig('Tray', _props);
+  const {
     children,
     header,
     footer,
@@ -119,7 +121,7 @@ export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_ref
     pin = 'bottom',
     showHandleBar,
     hideCloseButton
-  } = _ref2;
+  } = mergedProps;
   const theme = useTheme();
   const [isOpen, setIsOpen] = useState(true);
   const [hasScrolledDown, setHasScrolledDown] = useState(false);

package/esm/page/PageFooter.js

@@ -8,6 +8,7 @@ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i
 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 pageFooterPaddingX = {
@@ -20,16 +21,17 @@ export const pageFooterJustifyContent = {
   tablet: 'flex-end',
   desktop: 'flex-end'
 };
-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,
       height = pageFooterHeight,
       justifyContent = pageFooterJustifyContent,
       paddingX = pageFooterPaddingX,
       paddingY = 1.5,
       role = 'contentinfo'
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   return /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({
     ref: ref,
     height: height,

package/esm/page/PageHeader.js

@@ -9,6 +9,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { forwardRef, memo, useMemo } from 'react';
 import { pageHeaderHeight } from '@coinbase/cds-common/tokens/page';
 import { cx } from '../cx';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box } from '../layout/Box';
 import { Grid } from '../layout/Grid';
 import { media } from '../styles/media';
@@ -26,8 +27,9 @@ export const pageHeaderEndPaddingX = {
   tablet: 4,
   desktop: 4
 };
-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,
       end,
       title,
@@ -38,8 +40,8 @@ export const PageHeader = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Pag
       style,
       classNames,
       className
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   const titleResponsivePaddingLeft = useMemo(() => ({
     phone: start && !end ? 0 : 3,
     tablet: start ? 0 : 4,

package/esm/pagination/Pagination.js

@@ -7,6 +7,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 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, { useCallback, useRef } from 'react';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { HStack } from '../layout/HStack';
 import { DefaultPaginationEllipsis } from './DefaultPaginationEllipsis';
 import { DefaultPaginationNavigationButton } from './DefaultPaginationNavigationButton';
@@ -14,9 +15,10 @@ import { DefaultPaginationNavigationTextButton } from './DefaultPaginationNaviga
 import { DefaultPaginationPageButton } from './DefaultPaginationPageButton';
 import { usePagination } from './usePagination';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const Pagination = _ref => {
+export const Pagination = _props => {
   var _accessibilityLabels$, _accessibilityLabels$2, _accessibilityLabels$3, _accessibilityLabels$4, _accessibilityLabels$5, _accessibilityLabels$6;
-  let {
+  const mergedProps = useComponentConfig('Pagination', _props);
+  const {
       totalPages,
       activePage,
       onChange,
@@ -33,8 +35,8 @@ export const Pagination = _ref => {
       PaginationEllipsisComponent = DefaultPaginationEllipsis,
       firstPageButtonLabel = 'First',
       lastPageButtonLabel = 'Last'
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   const {
     items,
     updateActivePage,

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import { measurePerformance } from 'reassure';
+import { Button } from '../../buttons/Button';
+import { ComponentConfigProvider } from '../../system/ComponentConfigProvider';
+import { DefaultThemeProvider } from '../../utils/test';
+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))
+  });
+};
+const Wrapper = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx(DefaultThemeProvider, {
+    children: children
+  });
+};
+describe('Button component-config performance (web)', () => {
+  it('no provider', async () => {
+    await measurePerformance(/*#__PURE__*/_jsx(Wrapper, {
+      children: /*#__PURE__*/_jsx(ButtonList, {})
+    }));
+  });
+  it('provider customization', async () => {
+    await measurePerformance(/*#__PURE__*/_jsx(Wrapper, {
+      children: /*#__PURE__*/_jsx(ComponentConfigProvider, {
+        value: {
+          Button: {
+            compact: true
+          }
+        },
+        children: /*#__PURE__*/_jsx(ButtonList, {})
+      })
+    }));
+  });
+});

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

@@ -0,0 +1,134 @@
+import React from 'react';
+import { fireEvent, screen } from '@testing-library/react';
+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 stableButtonConfig = () => ({
+  compact: true
+});
+const stableAvatarConfig = () => ({});
+const ButtonConfigConsumer = _ref => {
+  let {
+    index
+  } = _ref;
+  const mergedProps = useComponentConfig('Button', {
+    compact: false,
+    variant: 'primary'
+  });
+  return /*#__PURE__*/_jsx("div", {
+    "data-compact": String(mergedProps.compact),
+    "data-index": index
+  });
+};
+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] = React.useState(0);
+  const value = React.useMemo(() => ({
+    Avatar: () => unrelatedUpdates % 2 === 0 ? {} : {},
+    Button: stableButtonConfig
+  }), [unrelatedUpdates]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("button", {
+      "data-testid": "update-unrelated-key",
+      onClick: () => setUnrelatedUpdates(v => v + 1),
+      children: "Update unrelated key"
+    }), /*#__PURE__*/_jsx(ComponentConfigProvider, {
+      value: value,
+      children: /*#__PURE__*/_jsx(ButtonConfigConsumerList, {
+        count: count
+      })
+    })]
+  });
+};
+const TargetKeyUpdateHarness = _ref4 => {
+  let {
+    count
+  } = _ref4;
+  const [targetUpdates, setTargetUpdates] = React.useState(0);
+  const value = React.useMemo(() => ({
+    Avatar: stableAvatarConfig,
+    Button: () => ({
+      compact: targetUpdates % 2 === 0
+    })
+  }), [targetUpdates]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("button", {
+      "data-testid": "update-target-key",
+      onClick: () => setTargetUpdates(v => v + 1),
+      children: "Update target key"
+    }), /*#__PURE__*/_jsx(ComponentConfigProvider, {
+      value: value,
+      children: /*#__PURE__*/_jsx(ButtonConfigConsumerList, {
+        count: count
+      })
+    })]
+  });
+};
+describe('ComponentConfigProvider performance tests', () => {
+  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.click(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.click(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
+      })
+    }));
+  });
+});

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

@@ -0,0 +1,332 @@
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React from 'react';
+import { fireEvent, screen } from '@testing-library/react';
+import { measurePerformance } from 'reassure';
+import { Button } from '../../buttons/Button';
+import { IconButton } from '../../buttons/IconButton';
+import { ListCell } from '../../cells/ListCell';
+import { Chip } from '../../chips/Chip';
+import { SearchInput } from '../../controls/SearchInput';
+import { TextInput } from '../../controls/TextInput';
+import { DotCount } from '../../dots/DotCount';
+import { Icon } from '../../icons/Icon';
+import { HStack } from '../../layout/HStack';
+import { VStack } from '../../layout/VStack';
+import { Avatar } from '../../media/Avatar';
+import { ComponentConfigProvider } from '../../system/ComponentConfigProvider';
+import { ThemeProvider } from '../../system/ThemeProvider';
+import { Tag } from '../../tag/Tag';
+import { defaultTheme } from '../../themes/defaultTheme';
+import { Text } from '../../typography/Text';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const updateIterations = 50;
+const customPerfTheme = _objectSpread(_objectSpread({}, defaultTheme), {}, {
+  id: 'component-config-perf-baseline-theme',
+  lightColor: _objectSpread(_objectSpread({}, defaultTheme.lightColor), {}, {
+    bgAlternate: defaultTheme.lightColor.bgSecondary
+  }),
+  darkColor: _objectSpread(_objectSpread({}, defaultTheme.darkColor), {}, {
+    bgAlternate: defaultTheme.darkColor.bgSecondary
+  })
+});
+const customComponentConfig = {
+  Button: props => ({
+    borderRadius: 200,
+    height: props.compact ? 24 : 32,
+    font: props.compact ? 'label1' : 'headline'
+  }),
+  IconButton: props => ({
+    borderRadius: 200,
+    height: props.compact ? 24 : 32,
+    width: props.compact ? 24 : 32
+  }),
+  TextInput: props => ({
+    bordered: false,
+    inputBackground: 'bgAlternate',
+    font: props.compact ? 'label2' : 'body',
+    variant: 'foregroundMuted',
+    focusedBorderWidth: 100
+  }),
+  SearchInput: props => ({
+    borderRadius: 200,
+    height: props.compact ? 24 : 32
+  }),
+  Chip: {
+    borderRadius: 200
+  },
+  ListCell: props => {
+    var _props$spacingVariant;
+    const spacingVariant = (_props$spacingVariant = props.spacingVariant) !== null && _props$spacingVariant !== void 0 ? _props$spacingVariant : props.compact ? 'compact' : 'normal';
+    return spacingVariant === 'normal' ? {
+      minHeight: '36px'
+    } : {};
+  }
+};
+const ComplexStickerSheetLike = _ref => {
+  let {
+    tick = 0
+  } = _ref;
+  return /*#__PURE__*/_jsx(VStack, {
+    alignItems: "center",
+    background: "bgAlternate",
+    gap: 2,
+    padding: 2,
+    children: /*#__PURE__*/_jsxs(HStack, {
+      gap: 2,
+      children: [/*#__PURE__*/_jsxs(VStack, {
+        gap: 2,
+        width: 420,
+        children: [/*#__PURE__*/_jsx(HStack, {
+          gap: 1,
+          children: Array.from({
+            length: 12
+          }, (_, i) => /*#__PURE__*/_jsx(Button, {
+            variant: "primary",
+            children: "Primary"
+          }, "primary-".concat(i)))
+        }), /*#__PURE__*/_jsx(HStack, {
+          gap: 1,
+          children: Array.from({
+            length: 12
+          }, (_, i) => /*#__PURE__*/_jsx(Button, {
+            compact: true,
+            variant: "secondary",
+            children: "Secondary"
+          }, "secondary-".concat(i)))
+        }), /*#__PURE__*/_jsx(VStack, {
+          gap: 1,
+          children: Array.from({
+            length: 8
+          }, (_, i) => /*#__PURE__*/_jsx(TextInput, {
+            label: "Label ".concat(i),
+            placeholder: "Input value"
+          }, "input-".concat(i)))
+        }), /*#__PURE__*/_jsx(VStack, {
+          gap: 1,
+          children: Array.from({
+            length: 8
+          }, (_, i) => /*#__PURE__*/_jsx(SearchInput, {
+            label: "Search ".concat(i),
+            onChangeText: () => {},
+            placeholder: "Search value"
+          }, "search-".concat(i)))
+        }), /*#__PURE__*/_jsx(VStack, {
+          gap: 1,
+          children: Array.from({
+            length: 8
+          }, (_, i) => /*#__PURE__*/_jsx(ListCell, {
+            accessibilityLabel: "List row ".concat(i),
+            description: "$100",
+            media: /*#__PURE__*/_jsx(Avatar, {
+              name: "A",
+              size: "m"
+            }),
+            onClick: () => {},
+            subtitle: "Subtitle",
+            title: "Row ".concat(i)
+          }, "cell-".concat(i)))
+        })]
+      }), /*#__PURE__*/_jsxs(VStack, {
+        gap: 2,
+        width: 600,
+        children: [/*#__PURE__*/_jsx(HStack, {
+          gap: 1,
+          children: Array.from({
+            length: 16
+          }, (_, i) => /*#__PURE__*/_jsx(IconButton, {
+            accessibilityLabel: "Icon button ".concat(i),
+            name: "add",
+            variant: "tertiary"
+          }, "icon-".concat(i)))
+        }), /*#__PURE__*/_jsx(HStack, {
+          flexWrap: "wrap",
+          gap: 1,
+          children: Array.from({
+            length: 24
+          }, (_, i) => /*#__PURE__*/_jsxs(Chip, {
+            accessibilityLabel: "Chip ".concat(i),
+            onClick: () => {},
+            children: ["Chip ", i]
+          }, "chip-".concat(i)))
+        }), /*#__PURE__*/_jsx(HStack, {
+          gap: 1,
+          children: Array.from({
+            length: 20
+          }, (_, i) => /*#__PURE__*/_jsxs(Tag, {
+            intent: i % 2 === 0 ? 'informational' : 'promotional',
+            children: ["Tag ", i]
+          }, "tag-".concat(i)))
+        }), /*#__PURE__*/_jsx(HStack, {
+          gap: 1,
+          children: Array.from({
+            length: 10
+          }, (_, i) => /*#__PURE__*/_jsx(DotCount, {
+            count: i + 1,
+            children: /*#__PURE__*/_jsx(Icon, {
+              name: "bell",
+              size: "l"
+            })
+          }, "dot-".concat(i)))
+        }), /*#__PURE__*/_jsx(Text, {
+          font: "title3",
+          children: "Complex story-like surface"
+        })]
+      })]
+    })
+  });
+};
+const BaselineHarness = () => /*#__PURE__*/_jsx(ThemeProvider, {
+  activeColorScheme: "light",
+  theme: defaultTheme,
+  children: /*#__PURE__*/_jsx(ComplexStickerSheetLike, {})
+});
+const CustomThemeNoProviderHarness = () => /*#__PURE__*/_jsx(ThemeProvider, {
+  activeColorScheme: "dark",
+  theme: customPerfTheme,
+  children: /*#__PURE__*/_jsx(ComplexStickerSheetLike, {})
+});
+const CustomThemeNoProviderStateUpdateHarness = () => {
+  const [tick, setTick] = React.useState(0);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("button", {
+      "data-testid": "update-page-state-no-provider",
+      onClick: () => setTick(v => v + 1),
+      children: "Update page state"
+    }), /*#__PURE__*/_jsx(ThemeProvider, {
+      activeColorScheme: "dark",
+      theme: customPerfTheme,
+      children: /*#__PURE__*/_jsx(ComplexStickerSheetLike, {
+        tick: tick
+      })
+    })]
+  });
+};
+const CustomHarness = () => /*#__PURE__*/_jsx(ThemeProvider, {
+  activeColorScheme: "dark",
+  theme: defaultTheme,
+  children: /*#__PURE__*/_jsx(ComponentConfigProvider, {
+    value: customComponentConfig,
+    children: /*#__PURE__*/_jsx(ComplexStickerSheetLike, {})
+  })
+});
+const UnrelatedConfigUpdateHarness = () => {
+  const [tick, setTick] = React.useState(0);
+  const value = React.useMemo(() => _objectSpread(_objectSpread({}, customComponentConfig), {}, {
+    // Toggling a key that is not rendered by StickerSheet isolates cross-key churn.
+    Tour: tick % 2 === 0 ? {} : {}
+  }), [tick]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("button", {
+      "data-testid": "update-unrelated-config",
+      onClick: () => setTick(v => v + 1),
+      children: "Update unrelated config"
+    }), /*#__PURE__*/_jsx(ThemeProvider, {
+      activeColorScheme: "dark",
+      theme: defaultTheme,
+      children: /*#__PURE__*/_jsx(ComponentConfigProvider, {
+        value: value,
+        children: /*#__PURE__*/_jsx(ComplexStickerSheetLike, {})
+      })
+    })]
+  });
+};
+const TargetedConfigUpdateHarness = () => {
+  const [tick, setTick] = React.useState(0);
+  const value = React.useMemo(() => _objectSpread(_objectSpread({}, customComponentConfig), {}, {
+    // Intentionally churn a hot key used broadly in StickerSheet.
+    Button: props => ({
+      borderRadius: tick % 2 === 0 ? 200 : 300,
+      height: props.compact ? 24 : 32,
+      font: props.compact ? 'label1' : 'headline'
+    })
+  }), [tick]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("button", {
+      "data-testid": "update-targeted-config",
+      onClick: () => setTick(v => v + 1),
+      children: "Update targeted config"
+    }), /*#__PURE__*/_jsx(ThemeProvider, {
+      activeColorScheme: "dark",
+      theme: defaultTheme,
+      children: /*#__PURE__*/_jsx(ComponentConfigProvider, {
+        value: value,
+        children: /*#__PURE__*/_jsx(ComplexStickerSheetLike, {})
+      })
+    })]
+  });
+};
+const RandomStateUpdateHarness = () => {
+  const [tick, setTick] = React.useState(0);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("button", {
+      "data-testid": "update-random-state",
+      onClick: () => setTick(v => v + 1),
+      children: "Update random state"
+    }), /*#__PURE__*/_jsx(ThemeProvider, {
+      activeColorScheme: "dark",
+      theme: defaultTheme,
+      children: /*#__PURE__*/_jsx(ComponentConfigProvider, {
+        value: customComponentConfig,
+        children: /*#__PURE__*/_jsx(ComplexStickerSheetLike, {
+          tick: tick
+        })
+      })
+    })]
+  });
+};
+describe('ComponentConfig StickerSheet performance tests', () => {
+  jest.setTimeout(60000);
+  it('renders StickerSheet baseline (no provider)', async () => {
+    await measurePerformance(/*#__PURE__*/_jsx(BaselineHarness, {}));
+  });
+  it('renders StickerSheet custom story (theme + component config)', async () => {
+    await measurePerformance(/*#__PURE__*/_jsx(CustomHarness, {}));
+  });
+  it('renders custom theme with no provider', async () => {
+    await measurePerformance(/*#__PURE__*/_jsx(CustomThemeNoProviderHarness, {}));
+  });
+  it('updates page state 50 times with custom theme and no provider', async () => {
+    const scenario = async () => {
+      for (let i = 0; i < updateIterations; i += 1) {
+        fireEvent.click(screen.getByTestId('update-page-state-no-provider'));
+      }
+    };
+    await measurePerformance(/*#__PURE__*/_jsx(CustomThemeNoProviderStateUpdateHarness, {}), {
+      scenario
+    });
+  });
+  it('updates unrelated config key 50 times', async () => {
+    const scenario = async () => {
+      for (let i = 0; i < updateIterations; i += 1) {
+        fireEvent.click(screen.getByTestId('update-unrelated-config'));
+      }
+    };
+    await measurePerformance(/*#__PURE__*/_jsx(UnrelatedConfigUpdateHarness, {}), {
+      scenario
+    });
+  });
+  it('updates targeted config key 50 times', async () => {
+    const scenario = async () => {
+      for (let i = 0; i < updateIterations; i += 1) {
+        fireEvent.click(screen.getByTestId('update-targeted-config'));
+      }
+    };
+    await measurePerformance(/*#__PURE__*/_jsx(TargetedConfigUpdateHarness, {}), {
+      scenario
+    });
+  });
+  it('updates random local state 50 times (provider enabled)', async () => {
+    const scenario = async () => {
+      for (let i = 0; i < updateIterations; i += 1) {
+        fireEvent.click(screen.getByTestId('update-random-state'));
+      }
+    };
+    await measurePerformance(/*#__PURE__*/_jsx(RandomStateUpdateHarness, {}), {
+      scenario
+    });
+  });
+});

package/esm/perf/component-config/README.md

@@ -0,0 +1,8 @@
+# Component Config Perf Tests
+
+This folder contains manual performance benchmarks for component config behavior.
+
+## Run
+
+- Web + mobile together:
+  - `yarn perf:component-config`

package/esm/section-header/SectionHeader.js

@@ -7,13 +7,15 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 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 { 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 SectionHeader = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function SectionHeader(_ref, ref) {
-  let {
+export const SectionHeader = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function SectionHeader(_props, ref) {
+  const mergedProps = useComponentConfig('SectionHeader', _props);
+  const {
       title,
       start,
       icon,
@@ -26,8 +28,8 @@ export const SectionHeader = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function
       minWidth = 256,
       paddingX = 4,
       paddingY = 2
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   return /*#__PURE__*/_jsxs(HStack, _objectSpread(_objectSpread({
     ref: ref,
     gap: gap,