@coinbase/cds-web 8.60.0 → 8.62.0

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,

package/esm/visualizations/ProgressCircle.js

@@ -9,6 +9,7 @@ import { getProgressCircleParams } from '@coinbase/cds-common/visualizations/get
 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 } from '../layout/Box';
 import { useMotionProps } from '../motion/useMotionProps';
 import { DefaultProgressCircleContent } from './DefaultProgressCircleContent';
@@ -59,8 +60,9 @@ const ProgressCircleInner = /*#__PURE__*/memo(_ref => {
     onAnimationStart: onAnimationStart
   }));
 });
-export const ProgressCircle = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, forwardedRef) => {
-  let {
+export const ProgressCircle = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, forwardedRef) => {
+  const mergedProps = useComponentConfig('ProgressCircle', _props);
+  const {
     indeterminate,
     weight = 'normal',
     progress = indeterminate ? 0.75 : 0,
@@ -79,18 +81,18 @@ export const ProgressCircle = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2,
     classNames,
     onAnimationEnd,
     onAnimationStart
-  } = _ref2;
+  } = mergedProps;
   const visSize = size !== null && size !== void 0 ? size : '100%';
   const strokeWidth = getProgressSize(weight);
   return /*#__PURE__*/_jsx(VisualizationContainer, {
     height: visSize,
     width: visSize,
-    children: _ref3 => {
+    children: _ref2 => {
       let {
         width,
         height,
         circleSize
-      } = _ref3;
+      } = _ref2;
       return /*#__PURE__*/_jsxs(Box, _objectSpread(_objectSpread({
         ref: forwardedRef,
         accessibilityLabel: accessibilityLabel,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web",
-  "version": "8.60.0",
+  "version": "8.62.0",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",
@@ -207,7 +207,7 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.60.0",
+    "@coinbase/cds-common": "^8.62.0",
     "@coinbase/cds-icons": "^5.13.0",
     "@coinbase/cds-illustrations": "^4.36.0",
     "@coinbase/cds-lottie-files": "^3.3.4",
@@ -222,7 +222,8 @@
     "lodash": "^4.17.21",
     "lottie-web": "^5.13.0",
     "react-popper": "^2.2.4",
-    "react-use-measure": "^2"
+    "react-use-measure": "^2",
+    "zustand": "^5.0.12"
   },
   "devDependencies": {
     "@babel/core": "^7.28.0",

package/esm/controls/SearchInput.css

@@ -1,2 +0,0 @@
-@layer cds{.baseCss-b1xygpjx{height:56px;}
-.compactCss-cczlfjm{height:40px;}}