@coinbase/cds-mobile 8.61.0 → 8.62.0

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
+      })
+    }));
+  });
+});

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

@@ -0,0 +1,326 @@
+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 from 'react';
+import { Pressable } from 'react-native';
+import { fireEvent, screen } from '@testing-library/react-native';
+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 = _extends({}, defaultTheme, {
+  id: 'component-config-mobile-perf-theme',
+  lightColor: _extends({}, defaultTheme.lightColor, {
+    bgAlternate: defaultTheme.lightColor.bgSecondary
+  }),
+  darkColor: _extends({}, 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: {
+    spacingVariant: 'condensed'
+  }
+};
+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: tick % 2 === 0 ? 'primary' : 'secondary',
+            children: "Primary"
+          }, "primary-" + i))
+        }), /*#__PURE__*/_jsx(HStack, {
+          gap: 1,
+          children: Array.from({
+            length: 12
+          }, (_, i) => /*#__PURE__*/_jsx(Button, {
+            compact: true,
+            variant: "secondary",
+            children: "Secondary"
+          }, "secondary-" + i))
+        }), /*#__PURE__*/_jsx(VStack, {
+          gap: 1,
+          children: Array.from({
+            length: 8
+          }, (_, i) => /*#__PURE__*/_jsx(TextInput, {
+            label: "Label " + i,
+            onChangeText: () => {},
+            value: ""
+          }, "input-" + i))
+        }), /*#__PURE__*/_jsx(VStack, {
+          gap: 1,
+          children: Array.from({
+            length: 8
+          }, (_, i) => /*#__PURE__*/_jsx(SearchInput, {
+            label: "Search " + i,
+            onChangeText: () => {},
+            value: ""
+          }, "search-" + i))
+        }), /*#__PURE__*/_jsx(VStack, {
+          gap: 1,
+          children: Array.from({
+            length: 8
+          }, (_, i) => /*#__PURE__*/_jsx(ListCell, {
+            accessibilityLabel: "List row " + i,
+            description: "$100",
+            media: /*#__PURE__*/_jsx(Avatar, {
+              name: "A",
+              size: "m"
+            }),
+            onPress: () => {},
+            subtitle: "Subtitle",
+            title: "Row " + i
+          }, "cell-" + 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 " + i,
+            name: "add",
+            variant: "tertiary"
+          }, "icon-" + i))
+        }), /*#__PURE__*/_jsx(HStack, {
+          flexWrap: "wrap",
+          gap: 1,
+          children: Array.from({
+            length: 24
+          }, (_, i) => /*#__PURE__*/_jsxs(Chip, {
+            accessibilityLabel: "Chip " + i,
+            onPress: () => {},
+            children: ["Chip ", i]
+          }, "chip-" + 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-" + 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-" + i))
+        }), /*#__PURE__*/_jsxs(Text, {
+          font: "title3",
+          children: ["Complex story-like surface tick=", tick]
+        })]
+      })]
+    })
+  });
+};
+const BaselineHarness = () => /*#__PURE__*/_jsx(ThemeProvider, {
+  activeColorScheme: "light",
+  theme: defaultTheme,
+  children: /*#__PURE__*/_jsx(ComplexStickerSheetLike, {})
+});
+const CustomHarness = () => /*#__PURE__*/_jsx(ThemeProvider, {
+  activeColorScheme: "dark",
+  theme: customPerfTheme,
+  children: /*#__PURE__*/_jsx(ComponentConfigProvider, {
+    value: customComponentConfig,
+    children: /*#__PURE__*/_jsx(ComplexStickerSheetLike, {})
+  })
+});
+const UnrelatedConfigUpdateHarness = () => {
+  const [tick, setTick] = React.useState(0);
+  const value = React.useMemo(() => _extends({}, customComponentConfig, {
+    Tour: tick % 2 === 0 ? {} : {}
+  }), [tick]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Pressable, {
+      onPress: () => setTick(v => v + 1),
+      testID: "update-unrelated-config"
+    }), /*#__PURE__*/_jsx(ThemeProvider, {
+      activeColorScheme: "dark",
+      theme: customPerfTheme,
+      children: /*#__PURE__*/_jsx(ComponentConfigProvider, {
+        value: value,
+        children: /*#__PURE__*/_jsx(ComplexStickerSheetLike, {})
+      })
+    })]
+  });
+};
+const TargetedConfigUpdateHarness = () => {
+  const [tick, setTick] = React.useState(0);
+  const value = React.useMemo(() => _extends({}, customComponentConfig, {
+    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(Pressable, {
+      onPress: () => setTick(v => v + 1),
+      testID: "update-targeted-config"
+    }), /*#__PURE__*/_jsx(ThemeProvider, {
+      activeColorScheme: "dark",
+      theme: customPerfTheme,
+      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(Pressable, {
+      onPress: () => setTick(v => v + 1),
+      testID: "update-random-state"
+    }), /*#__PURE__*/_jsx(ThemeProvider, {
+      activeColorScheme: "dark",
+      theme: customPerfTheme,
+      children: /*#__PURE__*/_jsx(ComponentConfigProvider, {
+        value: customComponentConfig,
+        children: /*#__PURE__*/_jsx(ComplexStickerSheetLike, {
+          tick: tick
+        })
+      })
+    })]
+  });
+};
+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(Pressable, {
+      onPress: () => setTick(v => v + 1),
+      testID: "update-page-state-no-provider"
+    }), /*#__PURE__*/_jsx(ThemeProvider, {
+      activeColorScheme: "dark",
+      theme: customPerfTheme,
+      children: /*#__PURE__*/_jsx(ComplexStickerSheetLike, {
+        tick: tick
+      })
+    })]
+  });
+};
+describe('ComponentConfig StickerSheet performance tests (mobile)', () => {
+  jest.setTimeout(90000);
+  beforeAll(() => {
+    jest.spyOn(console, 'error').mockImplementation(() => {});
+  });
+  afterAll(() => {
+    jest.restoreAllMocks();
+  });
+  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('updates unrelated config key 50 times', async () => {
+    const scenario = async () => {
+      for (let i = 0; i < updateIterations; i += 1) {
+        fireEvent.press(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.press(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.press(screen.getByTestId('update-random-state'));
+      }
+    };
+    await measurePerformance(/*#__PURE__*/_jsx(RandomStateUpdateHarness, {}), {
+      scenario
+    });
+  });
+  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.press(screen.getByTestId('update-page-state-no-provider'));
+      }
+    };
+    await measurePerformance(/*#__PURE__*/_jsx(CustomThemeNoProviderStateUpdateHarness, {}), {
+      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/stepper/Stepper.js

@@ -7,6 +7,7 @@ import { useHasMounted } from '@coinbase/cds-common/hooks/useHasMounted';
 import { usePreviousValue } from '@coinbase/cds-common/hooks/usePreviousValue';
 import { containsStep, flattenSteps, isStepVisited } from '@coinbase/cds-common/stepper/utils';
 import { useSprings } from '@react-spring/native';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box } from '../layout/Box';
 import { VStack } from '../layout/VStack';
 import { DefaultStepperHeaderHorizontal } from './DefaultStepperHeaderHorizontal';
@@ -34,9 +35,10 @@ export const defaultProgressSpringConfig = {
   tension: 100,
   clamp: true
 };
-const StepperBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+const StepperBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
   var _usePreviousValue, _usePreviousValue2;
-  let {
+  const mergedProps = useComponentConfig('Stepper', _props);
+  const {
       direction,
       activeStepId,
       steps,
@@ -56,8 +58,8 @@ const StepperBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
       progressSpringConfig = defaultProgressSpringConfig,
       animate = true,
       disableAnimateOnMount
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const hasMounted = useHasMounted();
   const flatStepIds = useMemo(() => flattenSteps(steps).map(step => step.id), [steps]);
 
@@ -72,11 +74,11 @@ const StepperBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
     rootStyle,
     stepStyles
   } = useMemo(() => {
-    const _ref2 = styles != null ? styles : {},
+    const _ref = styles != null ? styles : {},
       {
         root
-      } = _ref2,
-      stepStyles = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+      } = _ref,
+      stepStyles = _objectWithoutPropertiesLoose(_ref, _excluded2);
     const rootStyle = [style, root];
     return {
       rootStyle,
@@ -84,12 +86,12 @@ const StepperBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
     };
   }, [styles, style]);
   const accessibilityLabel = useMemo(() => {
-    var _ref3, _activeStep$accessibi;
+    var _ref2, _activeStep$accessibi;
     if (accessibilityLabelProp) return accessibilityLabelProp;
     if (!activeStep) return 'No active step';
     const pagination = activeFlatStepIndex + 1 + " of " + flatStepIds.length;
     const stepLabel = typeof activeStep.label === 'string' ? activeStep.label : null;
-    const baseLabel = (_ref3 = (_activeStep$accessibi = activeStep.accessibilityLabel) != null ? _activeStep$accessibi : stepLabel) != null ? _ref3 : "Step " + (activeFlatStepIndex + 1);
+    const baseLabel = (_ref2 = (_activeStep$accessibi = activeStep.accessibilityLabel) != null ? _activeStep$accessibi : stepLabel) != null ? _ref2 : "Step " + (activeFlatStepIndex + 1);
     return baseLabel + " " + pagination;
   }, [activeStep, activeFlatStepIndex, flatStepIds.length, accessibilityLabelProp]);
 

package/esm/system/ComponentConfigProvider.js

@@ -0,0 +1,39 @@
+import React, { createContext, useContext, useRef } from 'react';
+import { createStore } from 'zustand';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ComponentConfigContext = /*#__PURE__*/createContext(undefined);
+const createComponentConfigStoreState = config => {
+  return {
+    components: config
+  };
+};
+/**
+ * Provides component-level default props via a zustand store.
+ * Each component subscribes to only its own config slice, preventing cross-component re-renders.
+ * Supports nesting with isolated scopes: a child provider only applies its own config map.
+ */
+export const ComponentConfigProvider = _ref => {
+  let {
+    value,
+    children
+  } = _ref;
+  const storeRef = useRef(null);
+  if (!storeRef.current) {
+    storeRef.current = createStore(() => createComponentConfigStoreState(value));
+  }
+  const newState = createComponentConfigStoreState(value);
+  storeRef.current.setState(newState, true);
+  return /*#__PURE__*/_jsx(ComponentConfigContext.Provider, {
+    value: storeRef.current,
+    children: children
+  });
+};
+
+/** Singleton empty store used when no ComponentConfigProvider exists in the tree. */
+const emptyComponentConfigStore = createStore(() => ({}));
+
+/** Returns the nearest ComponentConfigProvider's zustand store, or an empty fallback. */
+export const useComponentConfigStore = () => {
+  const context = useContext(ComponentConfigContext);
+  return context != null ? context : emptyComponentConfigStore;
+};

package/esm/system/__stories__/ComponentConfigProvider.stories.js

@@ -0,0 +1,12 @@
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { StickerSheet } from './componentConfigStickerSheet/StickerSheet';
+import { jsx as _jsx } from "react/jsx-runtime";
+const ComponentConfigProviderStory = () => {
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    children: /*#__PURE__*/_jsx(Example, {
+      title: "ComponentConfigProvider",
+      children: /*#__PURE__*/_jsx(StickerSheet, {})
+    })
+  });
+};
+export default ComponentConfigProviderStory;