@coinbase/cds-web 8.60.0 → 8.62.0

package/esm/buttons/TileButton.js

@@ -10,21 +10,23 @@ import React, { forwardRef, memo, useMemo } from 'react';
 import { gutter } from '@coinbase/cds-common/tokens/sizing';
 import { pictogramScaleMultiplier } from '@coinbase/cds-common/tokens/tile';
 import { isDevelopment } from '@coinbase/cds-utils';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Pictogram } from '../illustrations/Pictogram';
 import { Pressable } from '../system/Pressable';
 import { Tile } from './Tile';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const tileButtonDefaultElement = 'button';
-export const TileButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
+export const TileButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+  const mergedProps = useComponentConfig('TileButton', _props);
+  const {
       as,
       pictogram,
       title,
       count,
       children,
       showOverflow
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   const Component = as !== null && as !== void 0 ? as : tileButtonDefaultElement;
   if (isDevelopment() && title.trim() === '') {
     console.warn('Setting an empty title in TileButton violates accessibility and CDS usage guidelines.');

package/esm/cards/Card.js

@@ -11,6 +11,10 @@ import { cardSizes } from '@coinbase/cds-common/tokens/card';
 import { VStack } from '../layout/VStack';
 import { Pressable } from '../system/Pressable';
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @deprecated Use ContentCard instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const Card = /*#__PURE__*/memo(function Card(_ref) {
   var _ref2;
   let {

package/esm/cards/CardBody.js

@@ -16,6 +16,9 @@ import { CardMedia } from './CardMedia';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Provides an opinionated layout for the typical content of a Card: a title, description, media, and action
+ *
+ * @deprecated Use ContentCardBody instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
  */
 export const CardBody = /*#__PURE__*/memo(function CardBody(_ref) {
   var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _props$maxWidth, _props$minHeight;

package/esm/cards/CardFooter.js

@@ -10,6 +10,10 @@ import React, { memo } from 'react';
 import { gutter } from '@coinbase/cds-common/tokens/sizing';
 import { HStack } from '../layout/HStack';
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @deprecated Use ContentCardFooter instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const CardFooter = /*#__PURE__*/memo(function CardFooter(_ref) {
   let {
       children,

package/esm/cards/CardGroup.js

@@ -9,7 +9,21 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { forwardRef, memo } from 'react';
 import { Divider } from '../layout/Divider';
 import { Group } from '../layout/Group';
+
+/**
+ * @deprecated Use `Box`, `HStack` or `VStack` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
+
+/**
+ * @deprecated Use `Box`, `HStack` or `VStack` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @deprecated Use `Box`, `HStack` or `VStack` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const CardGroup = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function CardGroup(_ref, ref) {
   let {
       accessibilityLabel,

package/esm/cards/CardHeader.js

@@ -4,6 +4,11 @@ import { HStack } from '../layout/HStack';
 import { VStack } from '../layout/VStack';
 import { Avatar } from '../media/Avatar';
 import { Text } from '../typography/Text';
+
+/**
+ * @deprecated Use ContentCardHeader instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const CardHeader = /*#__PURE__*/memo(function CardHeader(_ref) {
   let {

package/esm/cards/CardMedia.js

@@ -23,6 +23,11 @@ const imageProps = {
   },
   end: defaultMediaSize
 };
+
+/**
+ * @deprecated Use SpotSquare when `type` is "spotSquare", Pictogram when `type` is "pictogram", or RemoteImage when `type` is "image". This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const CardMedia = /*#__PURE__*/memo(function CardMedia(_ref) {
   let {
       placement = 'end'

package/esm/cards/LikeButton.js

@@ -9,19 +9,21 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { memo } from 'react';
 import { interactableHeight } from '@coinbase/cds-common/tokens/interactableHeight';
 import { getButtonSpacingProps } from '@coinbase/cds-common/utils/getButtonSpacingProps';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Icon } from '../icons/Icon';
 import { HStack } from '../layout/HStack';
 import { Pressable } from '../system/Pressable';
 import { Text } from '../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const LikeButton = /*#__PURE__*/memo(function LikeButton(_ref) {
-  let {
+export const LikeButton = /*#__PURE__*/memo(function LikeButton(_props) {
+  const mergedProps = useComponentConfig('LikeButton', _props);
+  const {
       count = 0,
       compact = true,
       flush,
       liked = false
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   const iconSize = compact ? 's' : 'm';
   const size = interactableHeight[compact ? 'compact' : 'regular'];
   const {

package/esm/carousel/Carousel.js

@@ -12,6 +12,7 @@ import { useRefMap } from '@coinbase/cds-common/hooks/useRefMap';
 import { RefMapContext } from '@coinbase/cds-common/system/RefMapContext';
 import { animate, domMax, LazyMotion, m, useAnimation, useDragControls, useMotionValue, useTransform } from 'framer-motion';
 import { cx } from '../cx';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { HStack } from '../layout/HStack';
 import { VStack } from '../layout/VStack';
 import { Text } from '../typography';
@@ -336,8 +337,9 @@ const findPageIndexForItem = (itemRect, pageOffsets) => {
   return 0;
 };
 const defaultPageChangeAccessibilityLabel = (activePageIndex, totalPages) => "Page ".concat(activePageIndex + 1, " of ").concat(totalPages);
-export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref4, ref) => {
-  let {
+export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+  const mergedProps = useComponentConfig('Carousel', _props);
+  const {
       children,
       title,
       hideNavigation,
@@ -363,8 +365,8 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref4, ref) =
       autoplay,
       autoplayInterval = 3000,
       paginationVariant
-    } = _ref4,
-    props = _objectWithoutProperties(_ref4, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   const animationApi = useAnimation();
   const carouselScrollX = useMotionValue(0);
   const dragControls = useDragControls();
@@ -378,8 +380,8 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref4, ref) =
   useEffect(() => {
     const observer = new window.ResizeObserver(() => {
       const newRects = {};
-      Object.entries(carouselItemRefMap.refs).forEach(_ref5 => {
-        let [id, element] = _ref5;
+      Object.entries(carouselItemRefMap.refs).forEach(_ref4 => {
+        let [id, element] = _ref4;
         if (element) {
           newRects[id] = {
             x: element.offsetLeft,

package/esm/cells/Cell.js

@@ -11,6 +11,7 @@ import React, { forwardRef, memo, useMemo } from 'react';
 import { hasCellPriority } from '@coinbase/cds-common/utils/cell';
 import { cx } from '../cx';
 import { useCellSpacing } from '../hooks/useCellSpacing';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box } from '../layout/Box';
 import { HStack } from '../layout/HStack';
 import { VStack } from '../layout/VStack';
@@ -25,9 +26,10 @@ const baseCss = "baseCss-b1bbnpmz";
 // https://css-tricks.com/flexbox-truncated-text/
 const truncationCss = "truncationCss-tdaia71";
 export const cellDefaultElement = 'div';
-export const Cell = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
-  var _ref2;
-  let {
+export const Cell = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+  var _ref;
+  const mergedProps = useComponentConfig('Cell', _props);
+  const {
       as,
       accessory,
       accessoryNode,
@@ -74,8 +76,8 @@ export const Cell = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
       outerSpacing: outerSpacingProp,
       bottomContent: bottom,
       background = 'bgAlternate'
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   const Component = as !== null && as !== void 0 ? as : cellDefaultElement;
   const {
     inner: innerSpacing,
@@ -89,7 +91,7 @@ export const Cell = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
     } = innerSpacing,
     innerSpacingWithoutMarginX = _objectWithoutProperties(innerSpacing, _excluded2);
   const isAnchor = Boolean(href);
-  const isButton = Boolean((_ref2 = onClick !== null && onClick !== void 0 ? onClick : onKeyDown) !== null && _ref2 !== void 0 ? _ref2 : onKeyUp);
+  const isButton = Boolean((_ref = onClick !== null && onClick !== void 0 ? onClick : onKeyDown) !== null && _ref !== void 0 ? _ref : onKeyUp);
   const linkable = isAnchor || isButton;
   const contentTruncationStyle = cx(baseCss, shouldTruncate && truncationCss);
   const content = useMemo(() => {

package/esm/cells/CellAccessory.js

@@ -7,16 +7,18 @@ 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/Icon';
 import { Box } from '../layout/Box';
 import { isRtl } from '../utils/isRtl';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const cellAccessoryTestId = 'accessory';
-export const CellAccessory = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function CellAccessory(_ref, ref) {
-  let {
+export const CellAccessory = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function CellAccessory(_props, ref) {
+  const mergedProps = useComponentConfig('CellAccessory', _props);
+  const {
       type
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   let icon;
   if (type === 'more') {
     icon = /*#__PURE__*/_jsx(Icon, {

package/esm/cells/ListCell.js

@@ -9,6 +9,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { forwardRef, memo, useMemo } from 'react';
 import { compactListHeight, listHeight } from '@coinbase/cds-common/tokens/cell';
 import { cx } from '../cx';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box } from '../layout/Box';
 import { VStack } from '../layout/VStack';
 import { Text } from '../typography/Text';
@@ -30,9 +31,10 @@ export const condensedOuterSpacing = {
   paddingY: 0,
   marginX: 0
 };
-export const ListCell = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+export const ListCell = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
   var _props$borderRadius;
-  let {
+  const mergedProps = useComponentConfig('ListCell', _props);
+  const {
       as,
       accessory,
       accessoryNode,
@@ -66,8 +68,8 @@ export const ListCell = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       style,
       subtitle,
       subtitleNode
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   const Component = as !== null && as !== void 0 ? as : listCellDefaultElement;
   const minHeight = spacingVariant === 'compact' ? compactListHeight : spacingVariant === 'normal' ? listHeight : undefined;
   const accessoryType = selected && !disableSelectionAccessory ? 'selected' : accessory;

package/esm/cells/ListCellFallback.js

@@ -11,13 +11,15 @@ import { getRectWidthVariant } from '@coinbase/cds-common/utils/getRectWidthVari
 import { VStack } from '../layout';
 import { Fallback } from '../layout/Fallback';
 const visuallyHiddenCss = "visuallyHiddenCss-vzen5l";
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Cell } from './Cell';
 import { CellAccessory } from './CellAccessory';
 import { condensedInnerSpacing, condensedOuterSpacing } from './ListCell';
 import { MediaFallback } from './MediaFallback';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_ref) {
-  let {
+export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_props) {
+  const mergedProps = useComponentConfig('ListCellFallback', _props);
+  const {
       accessory,
       accessoryNode,
       classNames,
@@ -35,8 +37,8 @@ export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_ref
       innerSpacing,
       outerSpacing,
       accessibilityLabel = 'Loading'
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   // We cant use ListCell here as we need to account for percentage based widths.
   // Flexbox collides with percentages also, so we need to wrap in normal divs.
 

package/esm/chips/Chip.js

@@ -10,6 +10,7 @@ import { forwardRef, Fragment, memo, useMemo } from 'react';
 import { curves, durations } from '@coinbase/cds-common/motion/tokens';
 import { chipMaxWidth } from '@coinbase/cds-common/tokens/chip';
 import { cx } from '../cx';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box, HStack } from '../layout';
 import { InvertedThemeProvider, Pressable } from '../system';
 import { Text } from '../typography/Text';
@@ -21,8 +22,9 @@ const transitionCss = "transitionCss-thdcix9";
  * When onClick is provided, the ref will be typed as HTMLButtonElement.
  * When onClick is not provided, the ref will be typed as HTMLDivElement.
  */
-export const Chip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Chip(_ref, ref) {
-  let {
+export const Chip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Chip(_props, ref) {
+  const mergedProps = useComponentConfig('Chip', _props);
+  const {
       as,
       alignItems = 'center',
       width = 'fit-content',
@@ -55,8 +57,8 @@ export const Chip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Chip(_ref
       font = compact ? 'label1' : 'headline',
       color = 'fg',
       onClick
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   const WrapperComponent = (invertColorScheme !== null && invertColorScheme !== void 0 ? invertColorScheme : inverted) ? InvertedThemeProvider : Fragment;
   const containerProps = {
     background,

package/esm/chips/InputChip.js

@@ -7,18 +7,20 @@ 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/Icon';
 import { MediaChip } from './MediaChip';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const InputChip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function InputChip(_ref, ref) {
-  let {
+export const InputChip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+  const mergedProps = useComponentConfig('InputChip', _props);
+  const {
       value,
       children = value,
       accessibilityLabel = typeof children === 'string' ? "Remove ".concat(children) : 'Remove option',
       invertColorScheme = true,
       testID = 'input-chip'
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   return /*#__PURE__*/_jsx(MediaChip, _objectSpread(_objectSpread({
     ref: ref,
     accessibilityLabel: accessibilityLabel,

package/esm/chips/MediaChip.js

@@ -8,10 +8,12 @@ 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 { forwardRef, memo, useMemo } from 'react';
 import { getMediaChipSpacingProps } from '@coinbase/cds-common/chips/getMediaChipSpacingProps';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Chip } from './Chip';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const MediaChip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function MediaChip(_ref, ref) {
-  let {
+export const MediaChip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function MediaChip(_props, ref) {
+  const mergedProps = useComponentConfig('MediaChip', _props);
+  const {
       start,
       children,
       end,
@@ -23,8 +25,8 @@ export const MediaChip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Medi
       paddingBottom,
       paddingStart,
       paddingEnd
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   const spacingProps = useMemo(() => {
     const defaults = getMediaChipSpacingProps({
       compact: !!compact,

package/esm/chips/TabbedChips.js

@@ -9,6 +9,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, useEffect, useMemo, useRef, useState } from 'react';
 import { useTabsContext } from '@coinbase/cds-common/tabs/TabsContext';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useHorizontalScrollToTarget } from '../hooks/useHorizontalScrollToTarget';
 import { HStack } from '../layout';
 import { Paddle, Tabs } from '../tabs';
@@ -49,8 +50,9 @@ const TabComponent = _ref => {
 const TabsActiveIndicatorComponent = () => {
   return null;
 };
-const TabbedChipsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function TabbedChips(_ref2, ref) {
-  let {
+const TabbedChipsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function TabbedChips(_props, ref) {
+  const mergedProps = useComponentConfig('TabbedChips', _props);
+  const {
       tabs,
       value,
       onChange,
@@ -63,8 +65,8 @@ const TabbedChipsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function
       previousArrowAccessibilityLabel = 'Previous',
       nextArrowAccessibilityLabel = 'Next',
       width = '100%'
-    } = _ref2,
-    props = _objectWithoutProperties(_ref2, _excluded2);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded2);
   const [scrollTarget, setScrollTarget] = useState(null);
   const {
     scrollRef,

package/esm/coachmark/Coachmark.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 { IconButton } from '../buttons/IconButton';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box, HStack, VStack } from '../layout';
 import { InvertedThemeProvider } from '../system';
 import { Text } from '../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const Coachmark = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
+export const Coachmark = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+  const mergedProps = useComponentConfig('Coachmark', _props);
+  const {
       title,
       content,
       checkbox,
@@ -23,8 +25,8 @@ export const Coachmark = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
       width,
       closeButtonAccessibilityLabel,
       testID
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   return /*#__PURE__*/_jsx(InvertedThemeProvider, {
     children: /*#__PURE__*/_jsxs(VStack, _objectSpread(_objectSpread({}, props), {}, {
       ref: ref,

package/esm/collapsible/Collapsible.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, useCallback, useMemo, useState } from 'react';
 import { m as motion } from 'framer-motion';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box } from '../layout/Box';
 import { useCollapsibleMotionProps } from './useCollapsibleMotionProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 const COMPONENT_STATIC_CLASSNAME = 'cds-Collapsible';
-export const Collapsible = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forwardedRef) => {
-  let {
+export const Collapsible = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, forwardedRef) => {
+  const mergedProps = useComponentConfig('Collapsible', _props);
+  const {
     children,
     collapsed = true,
     maxHeight,
@@ -32,7 +34,7 @@ export const Collapsible = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forw
     paddingStart,
     paddingTop,
     paddingY
-  } = _ref;
+  } = mergedProps;
   const _useCollapsibleMotion = useCollapsibleMotionProps({
       collapsed,
       direction,

package/esm/controls/Checkbox.js

@@ -9,6 +9,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { forwardRef, memo, useMemo } from 'react';
 import { checkboxOpacityEnterConfig, checkboxOpacityExitConfig, checkboxScaleEnterConfig, checkboxScaleExitConfig } from '@coinbase/cds-common/motion/checkbox';
 import { m as motion } from 'framer-motion';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
 import { Icon } from '../icons/Icon';
 import { Box } from '../layout';
@@ -16,8 +17,9 @@ import { useMotionProps } from '../motion/useMotionProps';
 import { Control } from './Control';
 import { jsx as _jsx } from "react/jsx-runtime";
 const checkboxCss = "checkboxCss-c198zdvk";
-const CheckboxWithRef = /*#__PURE__*/forwardRef(function CheckboxWithRef(_ref, ref) {
-  let {
+const CheckboxWithRef = /*#__PURE__*/forwardRef(function CheckboxWithRef(_props, ref) {
+  const mergedProps = useComponentConfig('Checkbox', _props);
+  const {
       children,
       checked,
       indeterminate,
@@ -28,8 +30,8 @@ const CheckboxWithRef = /*#__PURE__*/forwardRef(function CheckboxWithRef(_ref, r
       borderWidth = 100,
       elevation,
       controlSize
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   const filled = checked || indeterminate;
   const theme = useTheme();
   const checkboxSize = controlSize !== null && controlSize !== void 0 ? controlSize : theme.controlSize.checkboxSize;

package/esm/controls/CheckboxCell.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 { forwardRef, memo, useId, useMemo } from 'react';
 import { cx } from '../cx';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box, HStack, VStack } from '../layout';
 import { Pressable } from '../system/Pressable';
 import { Text } from '../typography/Text';
@@ -15,8 +16,9 @@ import { Checkbox } from './Checkbox';
 import { useSelectionCellControlHeight } from './useSelectionCellControlHeight';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const baseCss = "baseCss-b1n65grj";
-const CheckboxCellWithRef = /*#__PURE__*/forwardRef(function CheckboxCell(_ref, ref) {
-  let {
+const CheckboxCellWithRef = /*#__PURE__*/forwardRef(function CheckboxCell(_props, ref) {
+  const mergedProps = useComponentConfig('CheckboxCell', _props);
+  const {
       title,
       description,
       checked,
@@ -39,8 +41,8 @@ const CheckboxCellWithRef = /*#__PURE__*/forwardRef(function CheckboxCell(_ref,
       className,
       classNames,
       styles
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   const generatedTitleId = useId();
   const generatedDescriptionId = useId();
   const titleId = customTitleId !== null && customTitleId !== void 0 ? customTitleId : generatedTitleId;

package/esm/controls/Control.js

@@ -12,6 +12,7 @@ import { usePrefixedId } from '@coinbase/cds-common/hooks/usePrefixedId';
 import { zIndex } from '@coinbase/cds-common/tokens/zIndex';
 import { isDevelopment } from '@coinbase/cds-utils';
 import { cx } from '../cx';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box } from '../layout/Box';
 import { Interactable } from '../system/Interactable';
 import { Text } from '../typography/Text';
@@ -21,9 +22,10 @@ const COMPONENT_STATIC_CLASSNAME = 'cds-Control';
 const pointerCss = "pointerCss-p1pliz73";
 const inputBaseCss = "inputBaseCss-i1hz3kk0";
 const interactableCss = "interactableCss-i1h2gel3";
-const ControlWithRef = /*#__PURE__*/forwardRef(function ControlWithRef(_ref, ref) {
+const ControlWithRef = /*#__PURE__*/forwardRef(function ControlWithRef(_props, ref) {
   var _htmlProps$id;
-  let {
+  const mergedProps = useComponentConfig('Control', _props);
+  const {
       type,
       checked,
       disabled,
@@ -43,8 +45,8 @@ const ControlWithRef = /*#__PURE__*/forwardRef(function ControlWithRef(_ref, ref
       testID,
       iconStyle,
       labelStyle
-    } = _ref,
-    htmlProps = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    htmlProps = _objectWithoutProperties(mergedProps, _excluded);
   if (isDevelopment() && !children && !ariaLabelledby) {
     console.warn("Please provide an aria label for the control component ".concat(value, " either through the children or aria-labelledby prop."));
   }

package/esm/controls/ControlGroup.js

@@ -9,14 +9,16 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { forwardRef, memo, useId } from 'react';
 import { isDevelopment } from '@coinbase/cds-utils';
 import { cx } from '../cx';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box } from '../layout';
 import { Text } from '../typography';
 
 // Styles for container reset
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const containerCss = "containerCss-c1holtq6";
-const ControlGroupWithRef = /*#__PURE__*/forwardRef(function ControlGroup(_ref, ref) {
-  let {
+const ControlGroupWithRef = /*#__PURE__*/forwardRef(function ControlGroup(_props, ref) {
+  const mergedProps = useComponentConfig('ControlGroup', _props);
+  const {
       ControlComponent: ControlComponent,
       options,
       label,
@@ -28,8 +30,8 @@ const ControlGroupWithRef = /*#__PURE__*/forwardRef(function ControlGroup(_ref,
       gap = 2,
       name,
       role = 'group'
-    } = _ref,
-    restProps = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    restProps = _objectWithoutProperties(mergedProps, _excluded);
   const generatedId = useId();
   const labelId = "".concat(generatedId, "-label");
   if (isDevelopment() && !label && !ariaLabelledby) {

package/esm/controls/InputStack.js

@@ -11,6 +11,7 @@ import { durations } from '@coinbase/cds-common/motion/tokens';
 import { inputStackGap } from '@coinbase/cds-common/tokens/input';
 import { accessibleOpacityDisabled } from '@coinbase/cds-common/tokens/interactable';
 import { cx } from '../cx';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { HStack } from '../layout/HStack';
 import { VStack } from '../layout/VStack';
 import { ColorSurge } from '../motion/ColorSurge';
@@ -35,8 +36,9 @@ const variantColorMap = {
   foregroundMuted: 'bgLineHeavy',
   secondary: 'bgSecondary'
 };
-export const InputStack = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
+export const InputStack = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+  const mergedProps = useComponentConfig('InputStack', _props);
+  const {
       width = '100%',
       prependNode,
       endNode,
@@ -58,8 +60,8 @@ export const InputStack = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref)
       labelVariant = 'outside',
       blendStyles,
       inputBackground = 'bg'
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   const focusedVariant = useMemo(() => focused && variant !== 'positive' && variant !== 'negative' ? 'primary' : variant, [focused, variant]);
   const inputBorderRadius = useMemo(() => {
     return _objectSpread(_objectSpread({}, prependNode ? {