@coinbase/cds-web 8.60.0 → 8.62.0

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,

package/esm/stepper/Stepper.js

@@ -13,6 +13,7 @@ import { usePreviousValue } from '@coinbase/cds-common/hooks/usePreviousValue';
 import { containsStep, flattenSteps, isStepVisited } from '@coinbase/cds-common/stepper/utils';
 import { useSprings } from '@react-spring/web';
 import { cx } from '../cx';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useHasMounted } from '../hooks/useHasMounted';
 import { Box } from '../layout/Box';
 import { VStack } from '../layout/VStack';
@@ -48,9 +49,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,
@@ -71,8 +73,8 @@ const StepperBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
       progressSpringConfig = defaultProgressSpringConfig,
       animate = true,
       disableAnimateOnMount
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   const hasMounted = useHasMounted();
   const flatStepIds = useMemo(() => flattenSteps(steps).map(step => step.id), [steps]);
 
@@ -86,11 +88,11 @@ const StepperBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
     rootClassName,
     stepClassNames
   } = useMemo(() => {
-    const _ref2 = classNames !== null && classNames !== void 0 ? classNames : {},
+    const _ref = classNames !== null && classNames !== void 0 ? classNames : {},
       {
         root
-      } = _ref2,
-      stepClassNames = _objectWithoutProperties(_ref2, _excluded2);
+      } = _ref,
+      stepClassNames = _objectWithoutProperties(_ref, _excluded2);
     const rootClassName = cx(className, root);
     return {
       rootClassName,
@@ -101,11 +103,11 @@ const StepperBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
     rootStyle,
     stepStyles
   } = useMemo(() => {
-    const _ref3 = styles !== null && styles !== void 0 ? styles : {},
+    const _ref2 = styles !== null && styles !== void 0 ? styles : {},
       {
         root
-      } = _ref3,
-      stepStyles = _objectWithoutProperties(_ref3, _excluded3);
+      } = _ref2,
+      stepStyles = _objectWithoutProperties(_ref2, _excluded3);
     const rootStyle = _objectSpread(_objectSpread({}, style), root);
     return {
       rootStyle,

package/esm/system/ComponentConfigProvider.js

@@ -0,0 +1,41 @@
+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);
+
+/** Builds the full store state from a ComponentConfig. */
+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 !== void 0 ? context : emptyComponentConfigStore;
+};

package/esm/system/index.js

@@ -1,3 +1,4 @@
+export * from './ComponentConfigProvider';
 export * from './EventHandlerProvider';
 export * from './Interactable';
 export * from './MediaQueryProvider';

package/esm/tables/Table.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, useMemo } from 'react';
 import { cx } from '../cx';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { TableContext } from './context/TableContext';
 
 /**
@@ -28,8 +29,9 @@ const tableVariantStyles = {
   graph: tableVariantGraphCss,
   ruled: tableVariantRuledCss
 };
-const TableWithRef = /*#__PURE__*/forwardRef(function TableWithRef(_ref, ref) {
-  let {
+const TableWithRef = /*#__PURE__*/forwardRef(function TableWithRef(_props, ref) {
+  const mergedProps = useComponentConfig('Table', _props);
+  const {
       children,
       variant = 'default',
       bordered,
@@ -42,8 +44,8 @@ const TableWithRef = /*#__PURE__*/forwardRef(function TableWithRef(_ref, ref) {
       accessibilityLabelledBy,
       accessibilityLabel,
       className
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   const api = useMemo(() => ({
     variant,
     cellSpacing,

package/esm/tables/TableCaption.js

@@ -8,12 +8,14 @@ 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, { memo, useMemo } from 'react';
 import { useCellSpacing } from '../hooks/useCellSpacing';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box } from '../layout/Box';
 import { Text } from '../typography/Text';
 import { useTableCellSpacing } from './hooks/useTable';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const TableCaption = /*#__PURE__*/memo(_ref => {
-  let {
+export const TableCaption = /*#__PURE__*/memo(_props => {
+  const mergedProps = useComponentConfig('TableCaption', _props);
+  const {
       children,
       as = 'span',
       align = 'start',
@@ -23,8 +25,8 @@ export const TableCaption = /*#__PURE__*/memo(_ref => {
       innerSpacing,
       testID,
       style
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   const {
     outer,
     inner

package/esm/tables/TableCell.js

@@ -10,6 +10,7 @@ import React, { memo, useMemo } from 'react';
 import { isDevelopment } from '@coinbase/cds-utils';
 import { Cell } from '../cells/Cell';
 import { cx } from '../cx';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box } from '../layout/Box';
 import { Text } from '../typography/Text';
 import { useTableCellSpacing, useTableCellTag, useTableContext, useTableSectionTag } from './hooks/useTable';
@@ -23,9 +24,10 @@ const tableFooterCellCss = "tableFooterCellCss-t1gwndzp";
 // the table behavior will override this. We use `width`
 // to explicitly define a table columns width
 const tableOverflowWidthCss = "tableOverflowWidthCss-t1l3yoo8";
-export const TableCell = /*#__PURE__*/memo(_ref => {
-  var _ref2;
-  let {
+export const TableCell = /*#__PURE__*/memo(_props => {
+  var _ref;
+  const mergedProps = useComponentConfig('TableCell', _props);
+  const {
       alignItems,
       children,
       colSpan = 1,
@@ -38,7 +40,7 @@ export const TableCell = /*#__PURE__*/memo(_ref => {
       start,
       testID,
       overflow,
-      // Only available when Children is null
+      // Only available when children is null
       title,
       titleColor,
       subtitle,
@@ -48,8 +50,8 @@ export const TableCell = /*#__PURE__*/memo(_ref => {
       outerSpacing,
       as,
       className
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   if (isDevelopment() && children && (title || subtitle)) {
     console.error('TableCell: Cannot use `title` or `subtitle` with `children`.');
   }
@@ -83,7 +85,7 @@ export const TableCell = /*#__PURE__*/memo(_ref => {
   const tableSectionType = useTableSectionTag();
   const isInBody = tableSectionType === 'tbody';
   const defaultTitleColor = isInBody ? 'fg' : 'fgMuted';
-  const smartTitleColor = (_ref2 = titleColor !== null && titleColor !== void 0 ? titleColor : color) !== null && _ref2 !== void 0 ? _ref2 : defaultTitleColor;
+  const smartTitleColor = (_ref = titleColor !== null && titleColor !== void 0 ? titleColor : color) !== null && _ref !== void 0 ? _ref : defaultTitleColor;
 
   // Spacing defined on the TableCell will override cellSpacing defined on the Table
   const {

package/esm/tables/TableCellFallback.js

@@ -10,13 +10,15 @@ import { memo } from 'react';
 import { getRectWidthVariant } from '@coinbase/cds-common/utils/getRectWidthVariant';
 import { Cell } from '../cells/Cell';
 import { MediaFallback } from '../cells/MediaFallback';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Fallback } from '../layout';
 import { useTableCellSpacing, useTableCellTag, useTableContext } from './hooks/useTable';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const visuallyHiddenCss = "visuallyHiddenCss-v1l01hi5";
 const tableCellCss = "tableCellCss-t189mbuy";
-export const TableCellFallback = /*#__PURE__*/memo(_ref => {
-  let {
+export const TableCellFallback = /*#__PURE__*/memo(_props => {
+  const mergedProps = useComponentConfig('TableCellFallback', _props);
+  const {
       title,
       start,
       end,
@@ -28,8 +30,8 @@ export const TableCellFallback = /*#__PURE__*/memo(_ref => {
       disableRandomRectWidth,
       rectWidthVariant,
       accessibilityLabel = 'Loading Cell'
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   const TableCellComponent = useTableCellTag(as);
   // Depending on compact value
   const {

package/esm/tables/TableRow.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, { memo, useMemo, useRef } from 'react';
 import { cx } from '../cx';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useIsBrowser } from '../hooks/useIsBrowser';
 import { useTableSectionTag } from './hooks/useTable';
 import { useTableRowListener } from './hooks/useTableRowListener';
@@ -15,8 +16,9 @@ import { TableCell } from './TableCell';
 import { jsx as _jsx } from "react/jsx-runtime";
 const tableRowCss = "tableRowCss-t1cncu43";
 const tableRowHoverCss = "tableRowHoverCss-tg1utdg";
-export const TableRow = /*#__PURE__*/memo(_ref => {
-  let {
+export const TableRow = /*#__PURE__*/memo(_props => {
+  const mergedProps = useComponentConfig('TableRow', _props);
+  const {
       fullWidth,
       disableHoverIndicator,
       children,
@@ -26,8 +28,8 @@ export const TableRow = /*#__PURE__*/memo(_ref => {
       onClick,
       outerSpacing,
       innerSpacing
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   const isBrowser = useIsBrowser();
   const tableSectionType = useTableSectionTag();
   const isCellInBody = tableSectionType === 'tbody';