@coinbase/cds-web 8.61.0 → 8.62.0

package/esm/controls/SearchInput.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, useCallback, useMemo, useRef } from 'react';
 import { useMergeRefs } from '@coinbase/cds-common/hooks/useMergeRefs';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box } from '../layout/Box';
 import { InputIcon } from './InputIcon';
 import { InputIconButton } from './InputIconButton';
@@ -17,8 +18,9 @@ export const scales = {
   regular: 56,
   compact: 40
 };
-export const SearchInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function SearchInput(_ref, ref) {
-  let {
+export const SearchInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+  const mergedProps = useComponentConfig('SearchInput', _props);
+  const {
       onChange,
       onClear,
       onChangeText,
@@ -34,8 +36,8 @@ export const SearchInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Se
       clearIconAccessibilityLabel = 'Clear search query',
       borderRadius = 1000,
       height = compact ? scales.compact : scales.regular
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   const internalRef = useRef(null);
   const refs = useMergeRefs(ref, internalRef);
   const handleOnChange = useCallback(e => {

package/esm/controls/SelectOption.js

@@ -11,6 +11,7 @@ import { selectCellSpacingConfig } from '@coinbase/cds-common/tokens/select';
 import { Cell } from '../cells/Cell';
 import { CellAccessory } from '../cells/CellAccessory';
 import { cx } from '../cx';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { VStack } from '../layout/VStack';
 import { Pressable } from '../system/Pressable';
 import { Text } from '../typography/Text';
@@ -22,8 +23,9 @@ const normalCss = "normalCss-n1jlehjw";
 const compactCss = "compactCss-c1fbaqtq";
 const multilineCss = "multilineCss-m1fb6n4c";
 const multilineTextCss = "multilineTextCss-mf68k5e";
-export const SelectOption = /*#__PURE__*/memo(_ref => {
-  let {
+export const SelectOption = /*#__PURE__*/memo(_props => {
+  const mergedProps = useComponentConfig('SelectOption', _props);
+  const {
       title,
       description,
       multiline,
@@ -35,8 +37,8 @@ export const SelectOption = /*#__PURE__*/memo(_ref => {
       accessibilityLabel,
       testID,
       disabled
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   const selectOptionRef = useRef(null);
   const {
     onChange,

package/esm/controls/Switch.js

@@ -9,6 +9,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { forwardRef, memo } from 'react';
 import { switchTransitionConfig } from '@coinbase/cds-common/motion/switch';
 import { m as motion } from 'framer-motion';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
 import { Box } from '../layout/Box';
 import { convertTransition } from '../motion/utils';
@@ -26,8 +27,9 @@ const thumbMotionVariants = {
     x: 0
   }
 };
-const SwitchWithRef = /*#__PURE__*/forwardRef(function SwitchWithRef(_ref, ref) {
-  let {
+const SwitchWithRef = /*#__PURE__*/forwardRef(function SwitchWithRef(_props, ref) {
+  const mergedProps = useComponentConfig('Switch', _props);
+  const {
       children,
       checked,
       disabled,
@@ -38,8 +40,8 @@ const SwitchWithRef = /*#__PURE__*/forwardRef(function SwitchWithRef(_ref, ref)
       borderRadius = 1000,
       borderWidth,
       value
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   const {
     activeColorScheme
   } = useTheme();

package/esm/controls/TextInput.js

@@ -10,6 +10,7 @@ import React, { cloneElement, forwardRef, memo, useCallback, useMemo, useRef, us
 import { useMergeRefs } from '@coinbase/cds-common/hooks/useMergeRefs';
 import { usePrefixedId } from '@coinbase/cds-common/hooks/usePrefixedId';
 import { cx } from '../cx';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box } from '../layout/Box';
 import { HStack } from '../layout/HStack';
 import { Text } from '../typography/Text';
@@ -42,9 +43,10 @@ const variantColorMap = {
   foregroundMuted: 'fgMuted',
   secondary: 'fg'
 };
-export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function TextInput(_ref, ref) {
+export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function TextInput(_props, ref) {
   var _testIDMap$end, _testIDMap$helperText, _testIDMap$label, _testIDMap$start;
-  let {
+  const mergedProps = useComponentConfig('TextInput', _props);
+  const {
       label,
       accessibilityLabel,
       helperText = '',
@@ -71,8 +73,8 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Text
       labelVariant = 'outside',
       labelNode,
       inputBackground
-    } = _ref,
-    nativeInputRestProps = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    nativeInputRestProps = _objectWithoutProperties(mergedProps, _excluded);
   const [focused, setFocused] = useState(false);
   const focusedVariant = useInputVariant(focused, variant);
   const internalRef = useRef();

package/esm/core/componentConfig.js

@@ -0,0 +1 @@
+export {};

package/esm/dates/Calendar.js

@@ -15,6 +15,7 @@ import { getTimesFromDatesAndRanges } from '@coinbase/cds-common/dates/getTimesF
 import { useLocale } from '@coinbase/cds-common/system/LocaleProvider';
 import { accessibleOpacityDisabled } from '@coinbase/cds-common/tokens/interactable';
 import { cx } from '../cx';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Icon } from '../icons/Icon';
 import { Grid } from '../layout/Grid';
 import { HStack } from '../layout/HStack';
@@ -139,8 +140,9 @@ const CalendarDay = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) => {
 }));
 // These could be dynamically generated, but our Calendar and DatePicker aren't localized so there's no point
 const daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
-export const Calendar = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref3, ref) => {
-  let {
+export const Calendar = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+  const mergedProps = useComponentConfig('Calendar', _props);
+  const {
       selectedDate,
       seedDate,
       onPressDate,
@@ -158,8 +160,8 @@ export const Calendar = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref3, ref) =
       nextArrowAccessibilityLabel = 'Go to next month',
       previousArrowAccessibilityLabel = 'Go to previous month',
       highlightedDateAccessibilityHint = 'Highlighted'
-    } = _ref3,
-    props = _objectWithoutProperties(_ref3, _excluded2);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded2);
   const calendarRef = useRef(null);
   useImperativeHandle(ref, () => calendarRef.current, []); // Merges forwarded ref with internal calendarRef
 

package/esm/dates/DateInput.js

@@ -11,10 +11,12 @@ import { IntlDateFormat } from '@coinbase/cds-common/dates/IntlDateFormat';
 import { useDateInput } from '@coinbase/cds-common/dates/useDateInput';
 import { useLocale } from '@coinbase/cds-common/system/LocaleProvider';
 import { TextInput } from '../controls/TextInput';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { VStack } from '../layout/VStack';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const DateInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
+export const DateInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+  const mergedProps = useComponentConfig('DateInput', _props);
+  const {
       date,
       onChangeDate,
       error,
@@ -38,8 +40,8 @@ export const DateInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
       onChange,
       onBlur,
       testIDMap
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   const hasTyped = useRef(Boolean(date));
   const {
     locale

package/esm/dates/DatePicker.js

@@ -13,6 +13,7 @@ import { zIndex } from '@coinbase/cds-common/tokens/zIndex';
 import { m as motion } from 'framer-motion';
 import { InputIconButton } from '../controls/InputIconButton';
 import { cx } from '../cx';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box, VStack } from '../layout';
 import { getMotionProps } from '../motion/useMotionProps';
 import { Popover } from '../overlays/popover/Popover';
@@ -33,8 +34,9 @@ const calendarPopoverPosition = {
   placement: 'bottom-start',
   offsetGap: 16
 };
-export const DatePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
+export const DatePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+  const mergedProps = useComponentConfig('DatePicker', _props);
+  const {
       date,
       onChangeDate,
       error,
@@ -76,8 +78,8 @@ export const DatePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref)
       onConfirm,
       onCancel,
       onChange
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   const [showCalendar, setShowCalendar] = useState(defaultOpen);
   const calendarRef = useRef(null);
 

package/esm/dots/DotCount.js

@@ -13,6 +13,7 @@ import { parseDotCountMaxOverflow } from '@coinbase/cds-common/utils/parseDotCou
 import { m as motion } from 'framer-motion';
 import { NewAnimatePresence } from '../animation/NewAnimatePresence';
 import { cx } from '../cx';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
 import { useMotionProps } from '../motion/useMotionProps';
 import { Text } from '../typography/Text';
@@ -23,8 +24,9 @@ const dotCountContentCss = "dotCountContentCss-dqpqhs5";
 const variantColorMap = {
   negative: 'fgNegative'
 };
-export const DotCount = /*#__PURE__*/memo(_ref => {
-  let {
+export const DotCount = /*#__PURE__*/memo(_props => {
+  const mergedProps = useComponentConfig('DotCount', _props);
+  const {
       children,
       pin,
       variant = 'negative',
@@ -37,8 +39,8 @@ export const DotCount = /*#__PURE__*/memo(_ref => {
       classNames,
       style,
       styles
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   const {
     color
   } = useTheme();

package/esm/dots/DotStatusColor.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, { memo, useMemo } from 'react';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
 import { handlePreventPropagation } from '../utils/eventHandlers';
 import { getTransform } from './dotStyles';
@@ -19,8 +20,9 @@ const variantColorMap = {
   foregroundMuted: 'fgMuted',
   warning: 'fgWarning'
 };
-export const DotStatusColor = /*#__PURE__*/memo(_ref => {
-  let {
+export const DotStatusColor = /*#__PURE__*/memo(_props => {
+  const mergedProps = useComponentConfig('DotStatusColor', _props);
+  const {
       variant,
       pin,
       size = 's',
@@ -28,8 +30,8 @@ export const DotStatusColor = /*#__PURE__*/memo(_ref => {
       children,
       testID,
       accessibilityLabel
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   const {
     color
   } = useTheme();

package/esm/dots/DotSymbol.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 } from 'react';
 import { cx } from '../cx';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Icon } from '../icons/Icon';
 import { Box } from '../layout/Box';
 import { RemoteImage } from '../media/RemoteImage';
@@ -25,8 +26,9 @@ const remoteImageCss = "remoteImageCss-r1kn5cfm";
 const iconContainerCss = "iconContainerCss-i1ydqo2q";
 const baseCss = "baseCss-b1pmh90n";
 const aspectRatio = [1, 1];
-export const DotSymbol = /*#__PURE__*/memo(_ref => {
-  let {
+export const DotSymbol = /*#__PURE__*/memo(_props => {
+  const mergedProps = useComponentConfig('DotSymbol', _props);
+  const {
       children,
       symbol,
       pin,
@@ -46,8 +48,8 @@ export const DotSymbol = /*#__PURE__*/memo(_ref => {
       imageStyle,
       imageClassName,
       accessibilityLabel
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   const pinStyles = getTransform(pin, overlap);
   return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
     "aria-label": accessibilityLabel,

package/esm/dropdown/Dropdown.js

@@ -12,6 +12,7 @@ import React, { forwardRef, memo, useCallback, useImperativeHandle, useMemo, use
 import useMeasure from 'react-use-measure';
 import { SelectProvider } from '../controls/selectContext';
 import { useBreakpoints } from '../hooks/useBreakpoints';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { FocusTrap } from '../overlays/FocusTrap';
 import { ModalWrapper } from '../overlays/modal/ModalWrapper';
 import { Popover } from '../overlays/popover/Popover';
@@ -169,16 +170,17 @@ const PopoverDropdown = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) =
     }))
   });
 }));
-export const Dropdown = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref3, ref) => {
-  let {
+export const Dropdown = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+  const mergedProps = useComponentConfig('Dropdown', _props);
+  const {
       children,
       maxHeight = DROPDOWN_MAX_HEIGHT,
       enableMobileModal,
       onOpenMenu,
       onCloseMenu,
       restoreFocusOnUnmount = true
-    } = _ref3,
-    props = _objectWithoutProperties(_ref3, _excluded3);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded3);
   const {
     isPhone
   } = useBreakpoints();

package/esm/hooks/useComponentConfig.js

@@ -0,0 +1,27 @@
+import { useStore } from 'zustand';
+import { useComponentConfigStore } from '../system/ComponentConfigProvider';
+import { mergeComponentProps } from '../utils/mergeComponentProps';
+
+/**
+ * Subscribes to the component config for a specific component via zustand selectors.
+ * Only triggers re-renders when the config for THIS component changes - other
+ * components' config changes are ignored.
+ *
+ * Raw config values are stored in the zustand store (not normalized to functions)
+ * so that Object.is reference comparisons work correctly and unchanged entries
+ * never cause re-renders.
+ *
+ * @param componentName - The component key in ComponentConfig (e.g., 'Button')
+ * @param localProps - The props passed directly to the component instance
+ * @returns Merged props with config defaults applied (local props take precedence)
+ */
+export const useComponentConfig = (componentName, localProps) => {
+  const store = useComponentConfigStore();
+  const rawConfig = useStore(store, state => {
+    var _state$components;
+    return (_state$components = state.components) === null || _state$components === void 0 ? void 0 : _state$components[componentName];
+  });
+  if (!rawConfig) return localProps;
+  const resolvedConfig = typeof rawConfig === 'function' ? rawConfig(localProps) : rawConfig;
+  return mergeComponentProps(resolvedConfig, localProps);
+};

package/esm/icons/Icon.js

@@ -10,6 +10,7 @@ import React, { forwardRef, memo, useMemo } from 'react';
 import { glyphMap } from '@coinbase/cds-icons/glyphMap';
 import { isDevelopment } from '@coinbase/cds-utils/env';
 import { cx } from '../cx';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
 import { Box } from '../layout/Box';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -26,8 +27,9 @@ const getIconSourceSize = iconSize => {
   if (iconSize <= 16) return 16;
   return 24;
 };
-export const Icon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
+export const Icon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+  const mergedProps = useComponentConfig('Icon', _props);
+  const {
       accessibilityLabel,
       color = 'fgPrimary',
       dangerouslySetColor,
@@ -40,8 +42,8 @@ export const Icon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
       style,
       styles,
       active
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   const theme = useTheme();
   const iconSize = theme.iconSize[size];
   const sourceSize = getIconSourceSize(iconSize);

package/esm/index.js

@@ -2,5 +2,7 @@ export * from './core/createThemeCssVars';
 export * from './core/polymorphism';
 export * from './core/theme';
 export * from './cx';
+export * from './hooks/useComponentConfig';
 export * from './hooks/useTheme';
+export * from './system/ComponentConfigProvider';
 export * from './system/ThemeProvider';

package/esm/layout/Divider.js

@@ -7,19 +7,21 @@ 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, { memo } from 'react';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box } from './Box';
 import { jsx as _jsx } from "react/jsx-runtime";
 const directionCss = {
   horizontal: "horizontal-hb40n7o",
   vertical: "vertical-v1cvhdy5"
 };
-export const Divider = /*#__PURE__*/memo(_ref => {
-  let {
+export const Divider = /*#__PURE__*/memo(_props => {
+  const mergedProps = useComponentConfig('Divider', _props);
+  const {
       color,
       direction = 'horizontal',
       background = 'bgLine'
-    } = _ref,
-    boxProps = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    boxProps = _objectWithoutProperties(mergedProps, _excluded);
   return /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({
     alignItems: "stretch",
     alignSelf: "stretch"

package/esm/layout/Fallback.js

@@ -8,13 +8,15 @@ 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 { useFallbackShape } from '@coinbase/cds-common/hooks/useFallbackShape';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box } from './Box';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const fallbackCss = "fallbackCss-f1n296p1";
 const visuallyHiddenCss = "visuallyHiddenCss-v1e56i3u";
 export const fallbackDefaultElement = 'div';
-export const Fallback = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
+export const Fallback = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+  const mergedProps = useComponentConfig('Fallback', _props);
+  const {
       as,
       height,
       shape = 'rectangle',
@@ -23,8 +25,8 @@ export const Fallback = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       disableRandomRectWidth,
       rectWidthVariant,
       accessibilityLabel = 'Loading'
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   const Component = as !== null && as !== void 0 ? as : fallbackDefaultElement;
   const fallbackShapeOptions = useMemo(() => ({
     disableRandomRectWidth,

package/esm/media/Avatar.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 } from 'react';
 import { cx } from '../cx';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box } from '../layout/Box';
 import { Text } from '../typography/Text';
 import { hexagonAvatarClipId, HexagonBorder } from './Hexagon';
@@ -23,9 +24,10 @@ const borderRadiusCss = {
   hexagon: "hexagon-hsci9wn"
 };
 const contentWrapperCss = "contentWrapperCss-ck6a13w";
-export const Avatar = /*#__PURE__*/memo(_ref => {
-  var _ref2, _style$width;
-  let {
+export const Avatar = /*#__PURE__*/memo(_props => {
+  var _ref, _style$width;
+  const mergedProps = useComponentConfig('Avatar', _props);
+  const {
       src,
       shape = 'circle',
       size = 'l',
@@ -38,10 +40,10 @@ export const Avatar = /*#__PURE__*/memo(_ref => {
       dangerouslySetSize,
       className,
       style
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   const avatarSize = "var(--avatarSize-".concat(size, ")");
-  const userProvidedSize = (_ref2 = (_style$width = style === null || style === void 0 ? void 0 : style.width) !== null && _style$width !== void 0 ? _style$width : style === null || style === void 0 ? void 0 : style.height) !== null && _ref2 !== void 0 ? _ref2 : dangerouslySetSize;
+  const userProvidedSize = (_ref = (_style$width = style === null || style === void 0 ? void 0 : style.width) !== null && _style$width !== void 0 ? _style$width : style === null || style === void 0 ? void 0 : style.height) !== null && _ref !== void 0 ? _ref : dangerouslySetSize;
   const computedSize = userProvidedSize !== null && userProvidedSize !== void 0 ? userProvidedSize : avatarSize;
   const avatarText = useMemo(() => {
     const placeholderLetter = name === null || name === void 0 ? void 0 : name.charAt(0);

package/esm/media/RemoteImage.js

@@ -10,6 +10,7 @@ import React, { memo, useMemo } from 'react';
 import { remoteImageDarkFallbackSrc, remoteImageLightFallbackSrc } from '@coinbase/cds-common/media/remoteImageFallbackSrc';
 import { shapeBorderRadius } from '@coinbase/cds-common/tokens/borderRadius';
 import { cx } from '../cx';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box } from '../layout/Box';
 import { jsx as _jsx } from "react/jsx-runtime";
 const COMPONENT_STATIC_CLASSNAME = 'cds-RemoteImage';
@@ -27,8 +28,9 @@ const borderRadiusCss = {
   rectangle: "rectangle-r18cj7oi",
   hexagon: "hexagon-h4bc24o"
 };
-export const RemoteImage = /*#__PURE__*/memo(_ref => {
-  let {
+export const RemoteImage = /*#__PURE__*/memo(_props => {
+  const mergedProps = useComponentConfig('RemoteImage', _props);
+  const {
       width,
       height,
       aspectRatio,
@@ -41,8 +43,8 @@ export const RemoteImage = /*#__PURE__*/memo(_ref => {
       borderColor,
       borderWidth = borderColor ? 200 : undefined,
       style
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   const styles = useMemo(() => _objectSpread({
     aspectRatio: aspectRatio ? aspectRatio.join(' / ') : undefined
   }, style), [aspectRatio, style]);

package/esm/media/RemoteImageGroup.js

@@ -9,6 +9,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { Children, isValidElement, useMemo } from 'react';
 import { shapeBorderRadius } from '@coinbase/cds-common/tokens/borderRadius';
 import { cx } from '../cx';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
 import { Box } from '../layout/Box';
 import { Text } from '../typography/Text';
@@ -22,8 +23,9 @@ const borderRadiusCss = {
 };
 const isolateCss = "isolateCss-i1shf7o1";
 const excessContainerCss = "excessContainerCss-e1lnj2ws";
-export const RemoteImageGroup = _ref => {
-  let {
+export const RemoteImageGroup = _props => {
+  const mergedProps = useComponentConfig('RemoteImageGroup', _props);
+  const {
       children,
       size = 'm',
       max = 4,
@@ -31,8 +33,8 @@ export const RemoteImageGroup = _ref => {
       testID,
       borderWidth,
       borderColor = borderWidth ? 'bg' : undefined
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   const {
     avatarSize
   } = useTheme();

package/esm/navigation/NavigationBar.js

@@ -11,6 +11,7 @@ import { usePreviousValue } from '@coinbase/cds-common/hooks/usePreviousValue';
 import { zIndex } from '@coinbase/cds-common/tokens/zIndex';
 import { Collapsible } from '../collapsible/Collapsible';
 import { cx } from '../cx';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { HStack, VStack } from '../layout';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const navigationBarDefaultElement = 'nav';
@@ -26,8 +27,9 @@ export const navigationBarClassNames = {
   /** Container for the main children content (e.g., title) */
   content: 'cds-NavigationBar-content'
 };
-export const NavigationBar = /*#__PURE__*/memo(_ref => {
-  let {
+export const NavigationBar = /*#__PURE__*/memo(_props => {
+  const mergedProps = useComponentConfig('NavigationBar', _props);
+  const {
       start,
       children,
       end,
@@ -50,8 +52,8 @@ export const NavigationBar = /*#__PURE__*/memo(_ref => {
       style,
       styles,
       testID
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   const prevStart = usePreviousValue(start);
   const startNode = useMemo(() => start || prevStart, [start, prevStart]);
   return /*#__PURE__*/_jsxs(VStack, _objectSpread(_objectSpread({

package/esm/navigation/NavigationTitle.js

@@ -7,15 +7,17 @@ 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 { memo } from 'react';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Text } from '../typography/Text';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const navigationTitleDefaultElement = 'h1';
-export const NavigationTitle = /*#__PURE__*/memo(_ref => {
-  let {
+export const NavigationTitle = /*#__PURE__*/memo(_props => {
+  const mergedProps = useComponentConfig('NavigationTitle', _props);
+  const {
       as = navigationTitleDefaultElement,
       font = 'title1'
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   return /*#__PURE__*/_jsx(Text, _objectSpread({
     as: as,
     font: font