@coinbase/cds-web 8.61.0 → 8.62.0

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';

package/esm/tabs/SegmentedTab.js

@@ -10,6 +10,7 @@ import React, { forwardRef, memo, useCallback, useMemo } from 'react';
 import { useTabsContext } from '@coinbase/cds-common/tabs/TabsContext';
 import { m as motion } from 'framer-motion';
 import { cx } from '../cx';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box } from '../layout/Box';
 import { Pressable } from '../system/Pressable';
 import { Text } from '../typography/Text';
@@ -20,8 +21,9 @@ const insetFocusRingCss = "insetFocusRingCss-i13o7yik";
 const buttonCss = "buttonCss-bijg88k";
 const buttonDisabledCss = "buttonDisabledCss-b265t1b";
 const disabledCss = "disabledCss-d1cor7bl";
-const SegmentedTabComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
+const SegmentedTabComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+  const mergedProps = useComponentConfig('SegmentedTab', _props);
+  const {
       id,
       label,
       disabled: disabledProp,
@@ -37,8 +39,8 @@ const SegmentedTabComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
       lineHeight,
       textAlign,
       textTransform
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   const {
     activeTab,
     updateActiveTab,

package/esm/tabs/SegmentedTabs.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, { forwardRef, memo } from 'react';
 import { cx } from '../cx';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { SegmentedTab } from './SegmentedTab';
 import { SegmentedTabsActiveIndicator } from './SegmentedTabsActiveIndicator';
 import { Tabs } from './Tabs';
 import { jsx as _jsx } from "react/jsx-runtime";
-const SegmentedTabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
+const SegmentedTabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+  const mergedProps = useComponentConfig('SegmentedTabs', _props);
+  const {
       TabComponent = SegmentedTab,
       TabsActiveIndicatorComponent = SegmentedTabsActiveIndicator,
       activeBackground = 'bgInverse',
@@ -23,8 +25,8 @@ const SegmentedTabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref,
       classNames,
       style,
       styles
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   return /*#__PURE__*/_jsx(Tabs, _objectSpread({
     ref: ref,
     TabComponent: TabComponent,

package/esm/tabs/Tabs.js

@@ -19,6 +19,7 @@ import { accessibleOpacityDisabled } from '@coinbase/cds-common/tokens/interacta
 import { defaultRect } from '@coinbase/cds-common/types/Rect';
 import { m as motion } from 'framer-motion';
 import { cx } from '../cx';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box } from '../layout/Box';
 import { HStack } from '../layout/HStack';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -41,8 +42,9 @@ export const tabsTransitionConfig = {
   damping: 10,
   velocity: 5
 };
-const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) => {
-  let {
+const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+  const mergedProps = useComponentConfig('Tabs', _props);
+  const {
       tabs,
       TabComponent,
       TabsActiveIndicatorComponent,
@@ -63,8 +65,8 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) =>
       borderBottomLeftRadius,
       borderBottomRightRadius,
       style
-    } = _ref2,
-    props = _objectWithoutProperties(_ref2, _excluded2);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded2);
   const api = useTabs({
     tabs,
     activeTab,
@@ -158,13 +160,13 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) =>
         borderTopRightRadius: borderTopRightRadius,
         className: classNames === null || classNames === void 0 ? void 0 : classNames.activeIndicator,
         style: styles === null || styles === void 0 ? void 0 : styles.activeIndicator
-      }), tabs.map(_ref3 => {
+      }), tabs.map(_ref2 => {
         let {
             id,
             Component: CustomTabComponent,
             disabled: tabDisabled
-          } = _ref3,
-          props = _objectWithoutProperties(_ref3, _excluded3);
+          } = _ref2,
+          props = _objectWithoutProperties(_ref2, _excluded3);
         const RenderedTab = CustomTabComponent !== null && CustomTabComponent !== void 0 ? CustomTabComponent : TabComponent;
         return /*#__PURE__*/_jsx(TabContainer, {
           id: id,
@@ -185,12 +187,12 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) =>
 }));
 TabsComponent.displayName = 'Tabs';
 export const Tabs = TabsComponent;
-export const TabsActiveIndicator = _ref4 => {
+export const TabsActiveIndicator = _ref3 => {
   let {
       activeTabRect,
       position = 'absolute'
-    } = _ref4,
-    props = _objectWithoutProperties(_ref4, _excluded4);
+    } = _ref3,
+    props = _objectWithoutProperties(_ref3, _excluded4);
   const {
     width,
     height,

package/esm/tag/Tag.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 { tagBorderRadiusMap, tagEmphasisColorMap, tagFontMap, tagHorizontalSpacing } from '@coinbase/cds-common/tokens/tags';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
 import { Icon } from '../icons/Icon';
 import { Box } from '../layout/Box';
@@ -15,8 +16,9 @@ import { Text } from '../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const nodeCss = "nodeCss-n1hf567u";
 export const tagStaticClassName = 'cds-tag';
-export const Tag = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tag(_ref, forwardedRef) {
-  let {
+export const Tag = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, forwardedRef) => {
+  const mergedProps = useComponentConfig('Tag', _props);
+  const {
       children,
       intent = 'informational',
       emphasis = intent === 'informational' ? 'low' : 'high',
@@ -35,8 +37,8 @@ export const Tag = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tag(_ref,
       justifyContent = 'center',
       paddingY = 0.25,
       testID = tagStaticClassName
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   const theme = useTheme();
   const {
     background,

package/esm/tour/Tour.js

@@ -9,6 +9,7 @@ import { TourContext } from '@coinbase/cds-common/tour/TourContext';
 import { useTour } from '@coinbase/cds-common/tour/useTour';
 import { arrow as arrowMiddleware, autoPlacement, autoUpdate, offset, shift, useFloating } from '@floating-ui/react-dom';
 import { animated, config as springConfig, useSpring } from '@react-spring/web';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useScrollBlocker } from '../hooks/useScrollBlocker';
 import { FocusTrap } from '../overlays/FocusTrap';
 import { Portal } from '../overlays/Portal';
@@ -70,9 +71,10 @@ const scrollIntoView = async (element, scrollOptions) => {
 };
 const defaultTourStepOffset = 24;
 const defaultTourStepShiftPadding = 32;
-const TourComponent = _ref => {
+const TourComponent = _props => {
   var _activeTourStep$Arrow, _activeTourStep$hideO, _activeTourStep$tourM, _activeTourStep$tourM2;
-  let {
+  const mergedProps = useComponentConfig('Tour', _props);
+  const {
     steps,
     activeTourStep,
     onChange,
@@ -92,7 +94,7 @@ const TourComponent = _ref => {
     accessibilityLabelledBy,
     id,
     testID
-  } = _ref;
+  } = mergedProps;
   const tourStepArrowRef = useRef(null);
   const RenderedTourStep = activeTourStep === null || activeTourStep === void 0 ? void 0 : activeTourStep.Component;
   const RenderedTourStepArrow = (_activeTourStep$Arrow = activeTourStep === null || activeTourStep === void 0 ? void 0 : activeTourStep.ArrowComponent) !== null && _activeTourStep$Arrow !== void 0 ? _activeTourStep$Arrow : TourStepArrowComponent;

package/esm/typography/Link.js

@@ -9,13 +9,15 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { forwardRef, memo, useRef } from 'react';
 import { useMergeRefs } from '@coinbase/cds-common/hooks/useMergeRefs';
 import { cx } from '../cx';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Pressable } from '../system/Pressable';
 import { Text } from './Text';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const linkDefaultElement = 'a';
 const baseCss = "baseCss-b678mx9";
-export const Link = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
+export const Link = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+  const mergedProps = useComponentConfig('Link', _props);
+  const {
       // Text props
       children,
       color = 'fgPrimary',
@@ -31,8 +33,8 @@ export const Link = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
       padding = 0,
       noScaleOnPress = true,
       openInNewWindow = false
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   const Component = as !== null && as !== void 0 ? as : linkDefaultElement;
   const isAnchor = Component === 'a';
   const linkRef = useRef(null);

package/esm/utils/mergeComponentProps.js

@@ -0,0 +1,39 @@
+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); }
+/**
+ * The result of merging two sets of props
+ */
+
+/**
+ * Merges two sets of component props where source overrides target.
+ *
+ * This merge is shallow by design and applies to any BaseProps keys, not only
+ * style-like props. This allows component config defaults such as `compact`,
+ * `variant`, `height`, and `font` to flow through alongside style props.
+ *
+ * @param target - Base set of props (e.g., from component config defaults)
+ * @param source - Overriding set of props (e.g., from local component props)
+ * @returns Merged props with source values taking precedence
+ *
+ * @example
+ * ```tsx
+ * const merged = mergeComponentProps(
+ *   { compact: false, variant: 'secondary', height: 32, font: 'headline' },
+ *   { compact: true, variant: 'primary' }
+ * );
+ * // Result: {
+ * //   compact: true,        // local override
+ * //   variant: 'primary',   // local override
+ * //   height: 32,           // preserved from defaults
+ * //   font: 'headline'      // preserved from defaults
+ * // }
+ * ```
+ */
+export function mergeComponentProps(target, source) {
+  if (!target) return source;
+  if (!source) return target;
+  return _objectSpread(_objectSpread({}, target), source);
+}

package/esm/visualizations/ProgressBar.js

@@ -8,14 +8,16 @@ import { animateProgressBaseSpec } from '@coinbase/cds-common/animation/progress
 import { getProgressSize } from '@coinbase/cds-common/visualizations/getProgressSize';
 import { m as motion } from 'framer-motion';
 import { cx } from '../cx';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box, HStack } from '../layout';
 import { useMotionProps } from '../motion/useMotionProps';
 import { isRtl } from '../utils/isRtl';
 import { jsx as _jsx } from "react/jsx-runtime";
 const MotionBox = motion(Box);
 const boxCss = "boxCss-bnvjmt8";
-export const ProgressBar = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forwardedRef) => {
-  let {
+export const ProgressBar = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, forwardedRef) => {
+  const mergedProps = useComponentConfig('ProgressBar', _props);
+  const {
     weight = 'normal',
     progress = 0,
     color = 'bgPrimary',
@@ -29,7 +31,7 @@ export const ProgressBar = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forw
     classNames,
     onAnimationEnd,
     onAnimationStart
-  } = _ref;
+  } = mergedProps;
   const height = getProgressSize(weight);
 
   // start position of the progress bar on mount

package/esm/visualizations/ProgressBarWithFixedLabels.js

@@ -5,6 +5,7 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 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, { memo } from 'react';
 import { cx } from '../cx';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box } from '../layout/Box';
 import { VStack } from '../layout/VStack';
 import { isRtl } from '../utils/isRtl';
@@ -106,8 +107,9 @@ const ProgressBarFixedLabelContainer = /*#__PURE__*/memo(_ref3 => {
     children: nodes
   });
 });
-export const ProgressBarWithFixedLabels = /*#__PURE__*/memo(_ref4 => {
-  let {
+export const ProgressBarWithFixedLabels = /*#__PURE__*/memo(_props => {
+  const mergedProps = useComponentConfig('ProgressBarWithFixedLabels', _props);
+  const {
     startLabel,
     endLabel,
     labelPlacement = 'beside',
@@ -119,7 +121,7 @@ export const ProgressBarWithFixedLabels = /*#__PURE__*/memo(_ref4 => {
     className,
     styles,
     classNames
-  } = _ref4;
+  } = mergedProps;
   const startLabelEl = typeof startLabel !== 'undefined' && /*#__PURE__*/_jsx(Box, {
     flexGrow: 0,
     flexShrink: 0,

package/esm/visualizations/ProgressBarWithFloatLabel.js

@@ -8,6 +8,7 @@ import { animateProgressBaseSpec } from '@coinbase/cds-common/animation/progress
 import { isStorybook } from '@coinbase/cds-utils';
 import { m as motion } from 'framer-motion';
 import { cx } from '../cx';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useDimensions } from '../hooks/useDimensions';
 import { Box } from '../layout/Box';
 import { VStack } from '../layout/VStack';
@@ -96,8 +97,9 @@ const ProgressBarFloatLabel = /*#__PURE__*/memo(_ref => {
     })
   });
 });
-export const ProgressBarWithFloatLabel = /*#__PURE__*/memo(_ref2 => {
-  let {
+export const ProgressBarWithFloatLabel = /*#__PURE__*/memo(_props => {
+  const mergedProps = useComponentConfig('ProgressBarWithFloatLabel', _props);
+  const {
     label,
     labelPlacement = 'above',
     progress,
@@ -109,7 +111,7 @@ export const ProgressBarWithFloatLabel = /*#__PURE__*/memo(_ref2 => {
     className,
     styles,
     classNames
-  } = _ref2;
+  } = mergedProps;
   const skipLabel = isStorybook();
   const progressBarFloatLabel = !skipLabel && /*#__PURE__*/_jsx(ProgressBarFloatLabel, {
     classNames: classNames,