@coinbase/cds-web 8.61.0 → 8.62.1

package/esm/navigation/NavigationTitleSelect.js

@@ -10,13 +10,15 @@ import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
 import { SelectOption } from '../controls/SelectOption';
 import { Dropdown } from '../dropdown/Dropdown';
 import { useA11yControlledVisibility } from '../hooks/useA11yControlledVisibility';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Icon } from '../icons';
 import { Pressable } from '../system';
 import { Text } from '../typography/Text';
 import { navigationTitleDefaultElement } from './NavigationTitle';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const NavigationTitleSelect = /*#__PURE__*/memo(_ref => {
-  let {
+export const NavigationTitleSelect = /*#__PURE__*/memo(_props => {
+  const mergedProps = useComponentConfig('NavigationTitleSelect', _props);
+  const {
       options,
       value,
       onChange,
@@ -24,8 +26,8 @@ export const NavigationTitleSelect = /*#__PURE__*/memo(_ref => {
       color = 'fg',
       font = 'title1',
       as = navigationTitleDefaultElement
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   const [visible, setVisible] = useState(false);
   const dropdownRef = useRef(null);
   const {

package/esm/navigation/Sidebar.js

@@ -9,6 +9,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { Children, memo, useMemo } from 'react';
 import { zIndex } from '@coinbase/cds-common/tokens/zIndex';
 import { cx } from '../cx';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useDimensions } from '../hooks/useDimensions';
 import { Box, VStack } from '../layout';
 import { breakpoints } from '../styles/media';
@@ -33,8 +34,9 @@ const breakpointConfig = {
   },
   updateOnBreakpointChange: true
 };
-export const Sidebar = /*#__PURE__*/memo(_ref => {
-  let {
+export const Sidebar = /*#__PURE__*/memo(_props => {
+  const mergedProps = useComponentConfig('Sidebar', _props);
+  const {
       logo,
       children,
       collapsed,
@@ -48,8 +50,8 @@ export const Sidebar = /*#__PURE__*/memo(_ref => {
       classNames,
       style,
       styles
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   const {
     ref,
     currentBreakpoint

package/esm/navigation/SidebarItem.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, { forwardRef, memo, useMemo } from 'react';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Icon } from '../icons';
 import { Box } from '../layout';
 import { Tooltip } from '../overlays/tooltip/Tooltip';
@@ -15,8 +16,9 @@ import { Text } from '../typography';
 import { useSidebarContext } from './SidebarContext';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const pressableCss = "pressableCss-p1t38snu";
-export const SidebarItem = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
+export const SidebarItem = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+  const mergedProps = useComponentConfig('SidebarItem', _props);
+  const {
       icon,
       title,
       collapsed,
@@ -26,8 +28,8 @@ export const SidebarItem = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref)
       borderRadius,
       accessibilityLabel = title,
       Component
-    } = _ref,
-    pressableProps = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    pressableProps = _objectWithoutProperties(mergedProps, _excluded);
   const color = active ? 'fgPrimary' : 'fg';
   const {
     collapsed: computedCollapsed,

package/esm/navigation/SidebarMoreMenu.js

@@ -10,6 +10,7 @@ import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
 import { sidebarMenuMaxWidth, sidebarMenuMinWidth } from '@coinbase/cds-common/tokens/menu';
 import { Dropdown } from '../dropdown';
 import { useA11yControlledVisibility } from '../hooks/useA11yControlledVisibility';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Tooltip } from '../overlays/tooltip/Tooltip';
 import { useSidebarContext } from './SidebarContext';
 import { SidebarItem } from './SidebarItem';
@@ -18,8 +19,9 @@ const defaultContentPosition = {
   gap: 3,
   placement: 'right-start'
 };
-export const SidebarMoreMenu = /*#__PURE__*/memo(function SidebarMoreMenu(_ref) {
-  let {
+export const SidebarMoreMenu = /*#__PURE__*/memo(function SidebarMoreMenu(_props) {
+  const mergedProps = useComponentConfig('SidebarMoreMenu', _props);
+  const {
       children,
       active,
       onClick,
@@ -29,8 +31,8 @@ export const SidebarMoreMenu = /*#__PURE__*/memo(function SidebarMoreMenu(_ref)
       triggerTitle = 'More',
       Component,
       borderRadius
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   const [visible, setVisible] = useState(false);
   const {
     collapsed

package/esm/numbers/RollingNumber/RollingNumber.js

@@ -13,6 +13,7 @@ import { useValueChangeDirection } from '@coinbase/cds-common/numbers/useValueCh
 import { useLocale } from '@coinbase/cds-common/system/LocaleProvider';
 import { m } from 'framer-motion';
 import { cx } from '../../cx';
+import { useComponentConfig } from '../../hooks/useComponentConfig';
 import { HStack } from '../../layout/HStack';
 import { Text } from '../../typography/Text';
 import { DefaultRollingNumberAffixSection } from './DefaultRollingNumberAffixSection';
@@ -56,8 +57,9 @@ export const defaultTransitionConfig = {
 // Subcomponent prop and component type declarations
 
 export const rollingNumberDefaultElement = 'span';
-export const RollingNumber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
+export const RollingNumber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+  const mergedProps = useComponentConfig('RollingNumber', _props);
+  const {
       as,
       value,
       transition,
@@ -91,8 +93,8 @@ export const RollingNumber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, re
       tabularNumbers = true,
       accessibilityLabelPrefix,
       accessibilityLabelSuffix
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   const Component = as !== null && as !== void 0 ? as : rollingNumberDefaultElement;
   const {
     locale: defaultLocale

package/esm/overlays/Alert.js

@@ -9,6 +9,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import { forwardRef, memo, useCallback, useMemo } from 'react';
 import { Button } from '../buttons';
 import { useA11yLabels } from '../hooks/useA11yLabels';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Pictogram } from '../illustrations';
 import { Box } from '../layout/Box';
 import { Text } from '../typography/Text';
@@ -17,8 +18,9 @@ import { Portal } from './Portal';
 import { alertContainerId } from './PortalProvider';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const alertModalWidth = 318;
-export const Alert = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
+export const Alert = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+  const mergedProps = useComponentConfig('Alert', _props);
+  const {
       title,
       body,
       pictogram,
@@ -35,8 +37,8 @@ export const Alert = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
       actionLayout = 'horizontal',
       accessibilityLabelledBy,
       accessibilityLabel
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   const {
     labelledBySource,
     labelledBy,

package/esm/overlays/FocusTrap.js

@@ -2,15 +2,17 @@ import React, { memo, useCallback, useEffect, useMemo, useRef } from 'react';
 import { useMergeRefs } from '@coinbase/cds-common/hooks/useMergeRefs';
 import { FOCUSABLE_ELEMENTS } from '@coinbase/cds-common/tokens/overlays';
 import { debounce } from '@coinbase/cds-common/utils/debounce';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { getBrowserGlobals } from '../utils/browser';
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 const DEBOUNCE_MS = 50;
 export const NAVIGATION_KEYS = ['Tab', 'ArrowDown', 'ArrowUp', 'Home', 'End'];
 const ALPHABET_KEYS = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
 const FOCUSABLE_ELEMENTS_INCLUDING_TABINDEX = "".concat(FOCUSABLE_ELEMENTS, ", [tabindex]");
-export const FocusTrap = /*#__PURE__*/memo(function FocusTrap(_ref) {
+export const FocusTrap = /*#__PURE__*/memo(_props => {
   var _previouslyFocusedEle, _getBrowserGlobals;
-  let {
+  const mergedProps = useComponentConfig('FocusTrap', _props);
+  const {
     children,
     onEscPress,
     disableTypeFocus,
@@ -22,7 +24,7 @@ export const FocusTrap = /*#__PURE__*/memo(function FocusTrap(_ref) {
     focusTabIndexElements,
     autoFocusDelay,
     restoreFocusOnUnmount
-  } = _ref;
+  } = mergedProps;
   const isFocused = useRef(false);
   const childrenRef = useRef(null);
   const previouslyFocusedElement = useRef(null);
@@ -139,7 +141,7 @@ export const FocusTrap = /*#__PURE__*/memo(function FocusTrap(_ref) {
       event.preventDefault();
       const elementWithMatchingFirstLetter = focusableElements.find(el => {
         var _el$textContent;
-        const textContentFirstLetter = (_el$textContent = el.textContent) === null || _el$textContent === void 0 || (_el$textContent = _el$textContent.at(0)) === null || _el$textContent === void 0 ? void 0 : _el$textContent.toLowerCase();
+        const textContentFirstLetter = (_el$textContent = el.textContent) === null || _el$textContent === void 0 || (_el$textContent = _el$textContent[0]) === null || _el$textContent === void 0 ? void 0 : _el$textContent.toLowerCase();
         const eventKeyLowerCase = event.key.toLowerCase();
         return textContentFirstLetter === eventKeyLowerCase;
       });

package/esm/overlays/FullscreenAlert.js

@@ -1,6 +1,7 @@
 import { memo, useMemo } from 'react';
 import { Button } from '../buttons';
 import { useA11yLabels } from '../hooks/useA11yLabels';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { HeroSquare } from '../illustrations';
 import { Box } from '../layout/Box';
 import { VStack } from '../layout/VStack';
@@ -11,8 +12,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const centerContentCss = "centerContentCss-c1uepcpp";
 const actionsContainerCss = "actionsContainerCss-a13dr4a7";
 const primaryContentCss = "primaryContentCss-p1scz3m2";
-export const FullscreenAlert = /*#__PURE__*/memo(function FullscreenAlert(_ref) {
-  let {
+export const FullscreenAlert = /*#__PURE__*/memo(_props => {
+  const mergedProps = useComponentConfig('FullscreenAlert', _props);
+  const {
     visible,
     onRequestClose,
     title,
@@ -28,7 +30,7 @@ export const FullscreenAlert = /*#__PURE__*/memo(function FullscreenAlert(_ref)
     accessibilityLabelledBy,
     testID,
     closeAccessibilityLabel
-  } = _ref;
+  } = mergedProps;
   const {
     labelledBySource,
     labelledBy,

package/esm/overlays/Toast.js

@@ -12,6 +12,7 @@ import { ToastContext } from '@coinbase/cds-common/overlays/ToastProvider';
 import { m as motion, useAnimation } from 'framer-motion';
 import { Button } from '../buttons/Button';
 import { IconButton } from '../buttons/IconButton';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box } from '../layout/Box';
 import { HStack } from '../layout/HStack';
 import { ColorSurge } from '../motion/ColorSurge';
@@ -27,9 +28,10 @@ const closeButtonAccessibilityDefaults = {
 const baseCss = "baseCss-b10fl3zt";
 const toastCss = "toastCss-tzee9px";
 export const toastTestId = 'cds-toast';
-export const Toast = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+export const Toast = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
   var _action$testID;
-  let {
+  const mergedProps = useComponentConfig('Toast', _props);
+  const {
       text,
       action,
       onWillHide,
@@ -40,8 +42,8 @@ export const Toast = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
       bottomOffset = 'var(--space-4)',
       closeButtonAccessibilityProps = closeButtonAccessibilityDefaults,
       variant
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   const {
     pauseTimer,
     resumeTimer

package/esm/overlays/modal/FullscreenModal.js

@@ -1,6 +1,7 @@
 import React, { memo, useMemo } from 'react';
 import { cx } from '../../cx';
 import { useA11yLabels } from '../../hooks/useA11yLabels';
+import { useComponentConfig } from '../../hooks/useComponentConfig';
 import { VStack } from '../../layout';
 import { breakpoints } from '../../styles/media';
 import { FullscreenModalHeader } from './FullscreenModalHeader';
@@ -15,8 +16,9 @@ const secondaryContentContainerCss = "secondaryContentContainerCss-sfkv6s4";
 const secondaryContentDividerCss = "secondaryContentDividerCss-s9mfox4";
 const contentScrollContainerCss = "contentScrollContainerCss-cb0slex";
 const contentCss = "contentCss-c18pcq89";
-export const FullscreenModal = /*#__PURE__*/memo(function FullscreenModal(_ref) {
-  let {
+export const FullscreenModal = /*#__PURE__*/memo(_props => {
+  const mergedProps = useComponentConfig('FullscreenModal', _props);
+  const {
     focusTabIndexElements,
     logo,
     visible,
@@ -41,7 +43,7 @@ export const FullscreenModal = /*#__PURE__*/memo(function FullscreenModal(_ref)
     accessibilityLabel,
     closeAccessibilityLabel,
     contentStyle
-  } = _ref;
+  } = mergedProps;
   const {
     labelledBySource,
     labelledBy,

package/esm/overlays/modal/FullscreenModalHeader.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 } from 'react';
 import { IconButton } from '../../buttons';
+import { useComponentConfig } from '../../hooks/useComponentConfig';
 import { LogoMark } from '../../icons/LogoMark';
 import { Box, HStack } from '../../layout';
 import { breakpoints } from '../../styles/media';
@@ -17,8 +18,9 @@ const paddingStartSmall = 80;
 const paddingStartLarge = 240;
 const headerLogoCss = "headerLogoCss-h8v5jkx";
 const headerLogoInnerCss = "headerLogoInnerCss-hazb7kh";
-export const FullscreenModalHeader = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function FullscreenModalHeader(_ref, ref) {
-  let {
+export const FullscreenModalHeader = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function FullscreenModalHeader(_props, ref) {
+  const mergedProps = useComponentConfig('FullscreenModalHeader', _props);
+  const {
       logo,
       title,
       onRequestClose,
@@ -29,8 +31,8 @@ export const FullscreenModalHeader = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(f
       borderedBottom = true,
       paddingX = 4,
       paddingY = 2
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   const actualBorderedBottom = hideDivider === undefined ? borderedBottom : !hideDivider;
   return /*#__PURE__*/_jsxs(HStack, _objectSpread(_objectSpread({
     ref: ref,

package/esm/overlays/modal/Modal.js

@@ -14,6 +14,7 @@ import { zIndex } from '@coinbase/cds-common/tokens/zIndex';
 import { m as motion } from 'framer-motion';
 import { cx } from '../../cx';
 import { useA11yLabels } from '../../hooks/useA11yLabels';
+import { useComponentConfig } from '../../hooks/useComponentConfig';
 import { Box } from '../../layout';
 import { VStack } from '../../layout/VStack';
 import { useMotionProps } from '../../motion/useMotionProps';
@@ -36,8 +37,9 @@ const MotionBox = motion(Box);
 const overlayContentContextValue = {
   isModal: true
 };
-export const Modal = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
+export const Modal = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+  const mergedProps = useComponentConfig('Modal', _props);
+  const {
       children,
       visible = false,
       onRequestClose,
@@ -56,8 +58,8 @@ export const Modal = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
       hideCloseButton,
       hideDividers,
       maxWidth
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   const defaultWidth = dangerouslyDisableResponsiveness ? modalMaxWidth : defaultWidthStyle;
   const defaultMaxWidth = dangerouslyDisableResponsiveness ? undefined : defaultMaxWidthStyle;
   const {

package/esm/overlays/modal/ModalBody.js

@@ -6,20 +6,22 @@ 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); }
 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 } from 'react';
+import React, { forwardRef, memo } from 'react';
 import { useModalContext } from '@coinbase/cds-common/overlays/ModalContext';
+import { useComponentConfig } from '../../hooks/useComponentConfig';
 import { Box } from '../../layout/Box';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const ModalBody = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
+export const ModalBody = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+  const mergedProps = useComponentConfig('ModalBody', _props);
+  const {
       children,
       flexDirection = 'column',
       flexGrow = 1,
       overflow = 'auto',
       paddingX = 3,
       tabIndex = 0
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   const {
     hideDividers
   } = useModalContext();
@@ -35,4 +37,5 @@ export const ModalBody = /*#__PURE__*/forwardRef((_ref, ref) => {
   }, props), {}, {
     children: children
   }));
-});
+}));
+ModalBody.displayName = 'ModalBody';

package/esm/overlays/modal/ModalFooter.js

@@ -6,14 +6,16 @@ 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); }
 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 from 'react';
+import React, { memo } from 'react';
 import { useModalContext } from '@coinbase/cds-common/overlays/ModalContext';
+import { useComponentConfig } from '../../hooks/useComponentConfig';
 import { HStack } from '../../layout/HStack';
 import { breakpoints } from '../../styles/media';
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const baseCss = "baseCss-b12mhpgg";
-export const ModalFooter = _ref => {
-  let {
+export const ModalFooter = /*#__PURE__*/memo(_props => {
+  const mergedProps = useComponentConfig('ModalFooter', _props);
+  const {
       gap = 2,
       justifyContent = 'flex-end',
       paddingX = 3,
@@ -21,8 +23,8 @@ export const ModalFooter = _ref => {
       width = '100%',
       primaryAction,
       secondaryAction
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   const {
     hideDividers
   } = useModalContext();
@@ -37,5 +39,5 @@ export const ModalFooter = _ref => {
   }, props), {}, {
     children: [secondaryAction, primaryAction]
   }));
-};
+});
 import "./ModalFooter.css";

package/esm/overlays/modal/ModalHeader.js

@@ -10,12 +10,14 @@ import React from 'react';
 import { useModalContext } from '@coinbase/cds-common/overlays/ModalContext';
 import { interactableHeight } from '@coinbase/cds-common/tokens/interactableHeight';
 import { IconButton } from '../../buttons/IconButton';
+import { useComponentConfig } from '../../hooks/useComponentConfig';
 import { Box } from '../../layout/Box';
 import { HStack } from '../../layout/HStack';
 import { Text } from '../../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const ModalHeader = _ref => {
-  let {
+export const ModalHeader = _props => {
+  const mergedProps = useComponentConfig('ModalHeader', _props);
+  const {
       alignItems = 'center',
       paddingX = 3,
       paddingY = 2,
@@ -25,8 +27,8 @@ export const ModalHeader = _ref => {
       backAccessibilityHint,
       closeAccessibilityLabel,
       closeAccessibilityHint
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   const {
     onRequestClose,
     accessibilityLabelledBy,

package/esm/overlays/modal/ModalWrapper.js

@@ -9,6 +9,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { forwardRef, memo, useEffect } from 'react';
 import { NewAnimatePresence } from '../../animation/NewAnimatePresence';
 import { cx } from '../../cx';
+import { useComponentConfig } from '../../hooks/useComponentConfig';
 import { useScrollBlocker } from '../../hooks/useScrollBlocker';
 import { Box } from '../../layout/Box';
 import { media } from '../../styles/media';
@@ -17,8 +18,9 @@ import { Portal } from '../Portal';
 import { modalContainerId } from '../PortalProvider';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const modalOverlayResponsiveCss = "modalOverlayResponsiveCss-msg6e82";
-export const ModalWrapper = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
+export const ModalWrapper = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+  const mergedProps = useComponentConfig('ModalWrapper', _props);
+  const {
       alignItems = 'center',
       'aria-modal': ariaModal,
       children,
@@ -35,8 +37,8 @@ export const ModalWrapper = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref
       hideOverlay = false,
       role = 'dialog',
       width = '100vw'
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   const blockScroll = useScrollBlocker();
 
   // prevent body scroll when modal is open

package/esm/overlays/overlay/Overlay.js

@@ -5,17 +5,19 @@ 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, { forwardRef, memo } from 'react';
 import { OverlayContentContext } from '@coinbase/cds-common/overlays/OverlayContentContext';
+import { useComponentConfig } from '../../hooks/useComponentConfig';
 import { OverlayContent } from './OverlayContent';
 import { jsx as _jsx } from "react/jsx-runtime";
 const overlayContentContextValue = {
   isOverlay: true
 };
-export const Overlay = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((props, forwardedRef) => {
+export const Overlay = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, forwardedRef) => {
+  const mergedProps = useComponentConfig('Overlay', _props);
   return /*#__PURE__*/_jsx(OverlayContentContext.Provider, {
     value: overlayContentContextValue,
     children: /*#__PURE__*/_jsx(OverlayContent, _objectSpread({
       ref: forwardedRef
-    }, props))
+    }, mergedProps))
   });
 }));
 Overlay.displayName = 'Overlay';

package/esm/overlays/tooltip/Tooltip.js

@@ -1,4 +1,5 @@
-import React, { cloneElement, useCallback, useMemo, useRef } from 'react';
+import React, { cloneElement, memo, useCallback, useMemo, useRef } from 'react';
+import { useComponentConfig } from '../../hooks/useComponentConfig';
 import { Popover } from '../popover/Popover';
 import { TooltipContent } from './TooltipContent';
 import { useTooltipState } from './useTooltipState';
@@ -7,8 +8,9 @@ const preventMouseDown = event => {
   event.preventDefault();
   event.stopPropagation();
 };
-export const Tooltip = _ref => {
-  let {
+export const Tooltip = /*#__PURE__*/memo(_props => {
+  const mergedProps = useComponentConfig('Tooltip', _props);
+  const {
     children,
     content,
     elevation,
@@ -29,7 +31,7 @@ export const Tooltip = _ref => {
     autoFocusDelay = 20,
     openDelay,
     closeDelay
-  } = _ref;
+  } = mergedProps;
   const {
     isOpen,
     handleOnMouseEnter,
@@ -39,10 +41,10 @@ export const Tooltip = _ref => {
     tooltipId
   } = useTooltipState(tooltipIdDefault, openDelay, closeDelay);
   const tooltipContentRef = useRef(null);
-  const handleMouseEnter = useCallback(_ref2 => {
+  const handleMouseEnter = useCallback(_ref => {
     let {
       target
-    } = _ref2;
+    } = _ref;
     const node = tooltipContentRef.current;
 
     // to prevent flicker, don't open tooltip if enter event originates from tooltip content
@@ -98,4 +100,4 @@ export const Tooltip = _ref => {
     visible: isVisible,
     children: clonedChild
   });
-};
+});

package/esm/overlays/tooltip/TooltipContent.js

@@ -8,21 +8,28 @@ import { animateInOpacityConfig, animateOutOpacityConfig, getTranslateConfigByPl
 import { tooltipMaxWidth, tooltipPaddingX, tooltipPaddingY } from '@coinbase/cds-common/tokens/tooltip';
 import { zIndex as zIndexTokens } from '@coinbase/cds-common/tokens/zIndex';
 import { m as motion } from 'framer-motion';
+import { useComponentConfig } from '../../hooks/useComponentConfig';
 import { Box } from '../../layout/Box';
 import { useMotionProps } from '../../motion/useMotionProps';
 import { Text } from '../../typography/Text';
 import { jsx as _jsx } from "react/jsx-runtime";
 const textCss = "textCss-t15dzixe";
-export const TooltipContent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
+export const TooltipContent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+  const mergedProps = useComponentConfig('TooltipContent', _props);
+  const {
     content,
     elevation,
     gap,
     testID,
     zIndex,
     tooltipId,
-    placement = 'top'
-  } = _ref;
+    placement = 'top',
+    background = 'bg',
+    borderRadius = 200,
+    maxWidth = tooltipMaxWidth,
+    paddingX = tooltipPaddingX,
+    paddingY = tooltipPaddingY
+  } = mergedProps;
   const outerStyle = useMemo(() => ({
     padding: "var(--space-".concat(gap, ")"),
     zIndex: zIndex !== null && zIndex !== void 0 ? zIndex : zIndexTokens.tooltip
@@ -42,14 +49,14 @@ export const TooltipContent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
     "data-testid": "".concat(testID, "-motion"),
     children: /*#__PURE__*/_jsx(Box, {
       ref: ref,
-      background: "bg",
-      borderRadius: 200,
+      background: background,
+      borderRadius: borderRadius,
       "data-testid": testID,
       elevation: elevation,
       id: tooltipId,
-      maxWidth: tooltipMaxWidth,
-      paddingX: tooltipPaddingX,
-      paddingY: tooltipPaddingY,
+      maxWidth: maxWidth,
+      paddingX: paddingX,
+      paddingY: paddingY,
       role: "tooltip",
       children: typeof content === 'string' ? /*#__PURE__*/_jsx(Text, {
         className: textCss,