@coinbase/cds-web 8.66.2 → 9.0.0-rc.2

package/esm/dots/DotSymbol.js

@@ -54,9 +54,9 @@ export const DotSymbol = /*#__PURE__*/memo(_props => {
   return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
     "aria-label": accessibilityLabel,
     className: cx(baseCss, className),
-    "data-testid": testID
+    "data-testid": testID,
+    style: style
   }, props), {}, {
-    style: style,
     children: [children, /*#__PURE__*/_jsxs("div", {
       "data-testid": "dotsymbol-inner-container",
       onClick: handlePreventPropagation,

package/esm/hooks/useDimensions.js

@@ -61,7 +61,7 @@ export const useDimensions = function () {
     height: 0
   });
   const prevSizeRef = useRef({});
-  const prevBreakpointRef = useRef();
+  const prevBreakpointRef = useRef(undefined);
   const observerRef = useRef(null);
   const onResizeRef = useRef(null);
   const shouldUpdateRef = useRef(null);

package/esm/hooks/useResolveResponsiveProp.js

@@ -0,0 +1,31 @@
+import { useContext } from 'react';
+import { media } from '../styles/media';
+import { MediaQueryContext } from '../system/MediaQueryProvider';
+const isResponsiveValue = value => typeof value === 'object' && value !== null && ('base' in value || 'phone' in value || 'tablet' in value || 'desktop' in value);
+
+/**
+ * Resolves a ResponsiveProp to a single value based on the current viewport.
+ *
+ * Use this when you need the resolved value in JavaScript (e.g., passing to a child
+ * component or using in conditional logic). For applying responsive styles via CSS,
+ * use getStyles from styleProps instead—it handles responsive objects via
+ * media-query CSS variables.
+ *
+ * Reads getSnapshot from MediaQueryContext when within MediaQueryProvider.
+ * Without it, returns the first defined value (base ?? phone ?? tablet ?? desktop).
+ *
+ * @param value - A scalar value or responsive object with base/phone/tablet/desktop keys
+ * @returns The resolved value for the current breakpoint
+ */
+export const useResolveResponsiveProp = value => {
+  var _ref, _ref2, _value$base;
+  const context = useContext(MediaQueryContext);
+  const getSnapshot = context === null || context === void 0 ? void 0 : context.getSnapshot;
+  if (!value || !isResponsiveValue(value)) return value;
+  const fallback = (_ref = (_ref2 = (_value$base = value.base) !== null && _value$base !== void 0 ? _value$base : value.phone) !== null && _ref2 !== void 0 ? _ref2 : value.tablet) !== null && _ref !== void 0 ? _ref : value.desktop;
+  if (!getSnapshot) return fallback;
+  if (typeof value.phone !== 'undefined' && getSnapshot(media.phone)) return value.phone;
+  if (typeof value.tablet !== 'undefined' && getSnapshot(media.tablet)) return value.tablet;
+  if (typeof value.desktop !== 'undefined' && getSnapshot(media.desktop)) return value.desktop;
+  return fallback;
+};

package/esm/media/Avatar.js

@@ -56,7 +56,7 @@ export const Avatar = /*#__PURE__*/memo(_props => {
       return /*#__PURE__*/_jsx(Text, {
         as: "p",
         color: "fgInverse",
-        display: "block",
+        display: "inline",
         font: "title2",
         style: {
           transform: "scale(".concat(dangerouslySetSize * 0.02, ")")
@@ -71,7 +71,7 @@ export const Avatar = /*#__PURE__*/memo(_props => {
     return /*#__PURE__*/_jsx(Text, {
       as: "p",
       color: "fgInverse",
-      display: "block",
+      display: "inline",
       font: showLargerFont ? 'title2' : 'body',
       textAlign: "center",
       transform: "uppercase",

package/esm/media/Hexagon.js

@@ -1,6 +1,7 @@
 var _getBrowserGlobals;
 import React, { memo, useEffect, useMemo } from 'react';
 import { createPortal } from 'react-dom';
+import { hexagonShapePath } from '@coinbase/cds-common/svg/shape';
 import { cx } from '../cx';
 import { useIsBrowser } from '../hooks/useIsBrowser';
 import { Box } from '../layout/Box';
@@ -27,7 +28,7 @@ export const HexagonAvatarClipPath = () => {
         id: hexagonAvatarClipId,
         transform: "scale(".concat(1 / viewBoxSize, " ").concat(1 / viewBoxSize, ")"),
         children: /*#__PURE__*/_jsx("path", {
-          d: "M15.4855 6.0242C16.1715 7.24852 16.1715 8.75148 15.4855 9.97581L13.4213 13.6598C12.7259 14.9008 11.4317 15.6667 10.0301 15.6667H5.96994C4.56828 15.6667 3.2741 14.9008 2.57874 13.6598L0.514515 9.97581C-0.171504 8.75148 -0.171505 7.24852 0.514514 6.0242L2.57874 2.34022C3.2741 1.09922 4.56828 0.333336 5.96994 0.333336H10.0301C11.4317 0.333336 12.7259 1.09922 13.4213 2.34022L15.4855 6.0242Z"
+          d: hexagonShapePath
         })
       })
     })
@@ -101,7 +102,7 @@ export const HexagonBorder = /*#__PURE__*/memo(_ref => {
       viewBox: "0 0 16 16",
       children: /*#__PURE__*/_jsx("path", {
         className: pathElementCss,
-        d: "M15.4855 6.0242C16.1715 7.24852 16.1715 8.75148 15.4855 9.97581L13.4213 13.6598C12.7259 14.9008 11.4317 15.6667 10.0301 15.6667H5.96994C4.56828 15.6667 3.2741 14.9008 2.57874 13.6598L0.514515 9.97581C-0.171504 8.75148 -0.171505 7.24852 0.514514 6.0242L2.57874 2.34022C3.2741 1.09922 4.56828 0.333336 5.96994 0.333336H10.0301C11.4317 0.333336 12.7259 1.09922 13.4213 2.34022L15.4855 6.0242Z",
+        d: hexagonShapePath,
         "data-testid": "".concat(testID, "-path"),
         stroke: strokeColor,
         strokeWidth: hexagonBorderWidth,

package/esm/navigation/NavigationTitleSelect.js

@@ -7,7 +7,8 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
-import { SelectOption } from '../controls/SelectOption';
+import { selectCellSpacingConfig } from '@coinbase/cds-common/tokens/select';
+import { Cell } from '../cells/Cell';
 import { Dropdown } from '../dropdown/Dropdown';
 import { useA11yControlledVisibility } from '../hooks/useA11yControlledVisibility';
 import { useComponentConfig } from '../hooks/useComponentConfig';
@@ -43,12 +44,30 @@ export const NavigationTitleSelect = /*#__PURE__*/memo(_props => {
   const handleOpenMenu = useCallback(() => {
     setVisible(true);
   }, []);
+  const handleOptionClick = useCallback(id => {
+    var _dropdownRef$current;
+    onChange(id);
+    (_dropdownRef$current = dropdownRef.current) === null || _dropdownRef$current === void 0 || _dropdownRef$current.closeMenu();
+  }, [onChange]);
   const dropdownContent = useMemo(() => {
-    return options.map(option => /*#__PURE__*/_jsx(SelectOption, {
-      title: option.label,
-      value: option.id
-    }, option.id));
-  }, [options]);
+    return options.map(_ref => {
+      let {
+        id,
+        label: title
+      } = _ref;
+      return /*#__PURE__*/_jsx(Cell, _objectSpread(_objectSpread({
+        borderRadius: 0,
+        onClick: () => handleOptionClick(id),
+        selected: value === id
+      }, selectCellSpacingConfig), {}, {
+        children: /*#__PURE__*/_jsx(Text, {
+          font: "headline",
+          overflow: "truncate",
+          children: title
+        })
+      }));
+    });
+  }, [handleOptionClick, options, value]);
   const label = useMemo(() => {
     var _options$find;
     return (_options$find = options.find(option => option.id === value)) === null || _options$find === void 0 ? void 0 : _options$find.label;

package/esm/navigation/SidebarItem.js

@@ -1,4 +1,4 @@
-const _excluded = ["icon", "title", "collapsed", "active", "tooltipContent", "disablePortal", "borderRadius", "accessibilityLabel", "Component"];
+const _excluded = ["icon", "title", "collapsed", "active", "tooltipContent", "disablePortal", "borderRadius", "accessibilityLabel", "Component", "className", "style", "classNames", "styles"];
 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; }
@@ -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 { cx } from '../cx';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Icon } from '../icons';
 import { Box } from '../layout';
@@ -16,6 +17,20 @@ import { Text } from '../typography';
 import { useSidebarContext } from './SidebarContext';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const pressableCss = "pressableCss-p1t38snu";
+/**
+ * Static class names for SidebarItem component parts.
+ * Use these selectors to target specific elements with CSS.
+ */
+export const sidebarItemClassNames = {
+  /** Persistent outer wrapper across tooltip/non-tooltip variants. */
+  root: 'cds-SidebarItem',
+  /** Default content wrapper element. */
+  content: 'cds-SidebarItem-content',
+  /** Icon wrapper element. */
+  icon: 'cds-SidebarItem-icon',
+  /** Title text element. */
+  title: 'cds-SidebarItem-title'
+};
 export const SidebarItem = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
   const mergedProps = useComponentConfig('SidebarItem', _props);
   const {
@@ -27,7 +42,11 @@ export const SidebarItem = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, re
       disablePortal,
       borderRadius,
       accessibilityLabel = title,
-      Component
+      Component,
+      className,
+      style,
+      classNames,
+      styles
     } = mergedProps,
     pressableProps = _objectWithoutProperties(mergedProps, _excluded);
   const color = active ? 'fgPrimary' : 'fg';
@@ -39,37 +58,43 @@ export const SidebarItem = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, re
   const isDefaultVariant = variant === 'default';
   const defaultComponent = useMemo(() => /*#__PURE__*/_jsxs(Box, {
     alignItems: "center",
+    className: cx(sidebarItemClassNames.content, classNames === null || classNames === void 0 ? void 0 : classNames.content),
     flexDirection: isDefaultVariant ? 'row' : 'column',
     gap: isDefaultVariant ? 2 : 0.5,
     paddingX: isDefaultVariant ? 2 : 0.5,
     paddingY: isDefaultVariant ? 2 : 1,
+    style: styles === null || styles === void 0 ? void 0 : styles.content,
     testID: "sidebar-item-".concat(variant),
     children: [/*#__PURE__*/_jsx(Icon, {
       active: active,
+      className: cx(sidebarItemClassNames.icon, classNames === null || classNames === void 0 ? void 0 : classNames.icon),
       color: color,
       name: icon,
-      size: "m"
+      size: "m",
+      style: styles === null || styles === void 0 ? void 0 : styles.icon
     }), (variant === 'condensed' || !isCollapsed) && /*#__PURE__*/_jsx(Text, {
+      className: cx(sidebarItemClassNames.title, classNames === null || classNames === void 0 ? void 0 : classNames.title),
       color: color,
       font: isDefaultVariant ? 'headline' : 'label1',
       fontSize: isDefaultVariant ? 'inherit' : 'legal',
       numberOfLines: isDefaultVariant ? undefined : 1,
       overflow: isDefaultVariant ? undefined : 'break',
+      style: styles === null || styles === void 0 ? void 0 : styles.title,
       textAlign: isDefaultVariant ? 'start' : 'center',
       children: title
     })]
-  }), [active, color, icon, isCollapsed, isDefaultVariant, title, variant]);
+  }), [active, color, icon, isCollapsed, isDefaultVariant, title, variant, classNames === null || classNames === void 0 ? void 0 : classNames.content, classNames === null || classNames === void 0 ? void 0 : classNames.icon, classNames === null || classNames === void 0 ? void 0 : classNames.title, styles === null || styles === void 0 ? void 0 : styles.content, styles === null || styles === void 0 ? void 0 : styles.icon, styles === null || styles === void 0 ? void 0 : styles.title]);
   const content = useMemo(() => /*#__PURE__*/_jsx(Pressable, _objectSpread(_objectSpread({
     ref: ref,
-    className: pressableCss
-  }, pressableProps), {}, {
     accessibilityLabel: isCollapsed ? accessibilityLabel : undefined,
     "aria-current": active ? 'page' : undefined,
     background: "bgPrimaryWash",
     borderRadius: borderRadius !== null && borderRadius !== void 0 ? borderRadius : isDefaultVariant ? 1000 : 400,
     borderWidth: isDefaultVariant ? undefined : 0,
+    className: pressableCss,
     transparentWhileInactive: !active,
-    width: "100%",
+    width: "100%"
+  }, pressableProps), {}, {
     children: Component ? /*#__PURE__*/_jsx(Component, {
       active: active,
       color: color,
@@ -78,12 +103,17 @@ export const SidebarItem = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, re
       title: title
     }) : defaultComponent
   })), [ref, pressableProps, isCollapsed, accessibilityLabel, active, borderRadius, isDefaultVariant, Component, color, icon, title, defaultComponent]);
-  return tooltipContent && isCollapsed ? /*#__PURE__*/_jsx(Tooltip, {
-    content: tooltipContent,
-    disablePortal: disablePortal,
-    placement: "right",
-    children: content
-  }) : content;
+  return /*#__PURE__*/_jsx(Box, {
+    className: cx(sidebarItemClassNames.root, className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
+    style: _objectSpread(_objectSpread({}, style), styles === null || styles === void 0 ? void 0 : styles.root),
+    width: "100%",
+    children: tooltipContent && isCollapsed ? /*#__PURE__*/_jsx(Tooltip, {
+      content: tooltipContent,
+      disablePortal: disablePortal,
+      placement: "right",
+      children: content
+    }) : content
+  });
 }));
 SidebarItem.displayName = 'SidebarItem';
 import "./SidebarItem.css";

package/esm/numbers/RollingNumber/DefaultRollingNumberDigit.js

@@ -92,7 +92,9 @@ export const DefaultRollingNumberDigit = /*#__PURE__*/memo(/*#__PURE__*/forwardR
     prevValue.current = value;
   }, [isSingleVariant, transitionConfig, value, direction]);
   const renderDigit = useCallback(digit => /*#__PURE__*/_jsx("span", {
-    ref: r => void (numberRefs.current[digit] = r),
+    ref: r => {
+      void (numberRefs.current[digit] = r);
+    },
     className: digitSpanCss,
     children: digit
   }, digit), []);

package/esm/numbers/RollingNumber/RollingNumber.js

@@ -276,7 +276,7 @@ export const RollingNumber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props,
     tabularNumbers: tabularNumbers
   }, props), {}, {
     children: [screenReaderOnlySection, /*#__PURE__*/_jsxs(m.span, {
-      "aria-hidden": true,
+      'aria-hidden': true,
       animate: colorControls,
       className: cx(tickerCss, classNames === null || classNames === void 0 ? void 0 : classNames.visibleContent),
       style: styles === null || styles === void 0 ? void 0 : styles.visibleContent,

package/esm/overlays/Alert.js

@@ -137,9 +137,9 @@ export const Alert = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
         })]
       }), /*#__PURE__*/_jsxs(Box, {
         flexDirection: actionLayout === 'vertical' ? 'column-reverse' : 'row',
-        gap: 2,
-        paddingX: 2,
-        paddingY: 3,
+        gap: 1,
+        paddingX: 3,
+        paddingY: 2,
         testID: testID && "".concat(testID, "-actions"),
         children: [dismissAction, preferredAction]
       })]

package/esm/overlays/FocusTrap.js

@@ -1,7 +1,7 @@
 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 { mergeReactElementRef } from '@coinbase/cds-common/utils/mergeRefs';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { getBrowserGlobals } from '../utils/browser';
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
@@ -210,13 +210,12 @@ export const FocusTrap = /*#__PURE__*/memo(_props => {
 
   // only works for single child
   const onlyChild = React.Children.only(children);
-  const mergedRef = useMergeRefs(childrenRef, children === null || children === void 0 ? void 0 : children.ref);
   if (!onlyChild) {
     return /*#__PURE__*/_jsx(_Fragment, {
       children: children
     });
   }
   return /*#__PURE__*/React.cloneElement(children, {
-    ref: mergedRef
+    ref: mergeReactElementRef(children, childrenRef)
   });
 });

package/esm/overlays/Portal.js

@@ -4,6 +4,12 @@ import { useTheme } from '../hooks/useTheme';
 import { ThemeProvider } from '../system/ThemeProvider';
 import { isSSR } from '../utils/browser';
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Internal component used by CDS overlay components (Modal, Toast, Alert, etc.) to
+ * render content into the container elements created by PortalProvider. Wraps
+ * `createPortal` and automatically re-establishes the current theme in the portal's
+ * DOM tree via an isolated ThemeProvider.
+ */
 export const Portal = /*#__PURE__*/memo(function Portal(_ref) {
   let {
     disablePortal,
@@ -17,6 +23,7 @@ export const Portal = /*#__PURE__*/memo(function Portal(_ref) {
     });
   }
   return /*#__PURE__*/createPortal(/*#__PURE__*/_jsx(ThemeProvider, {
+    isolated: true,
     activeColorScheme: theme.activeColorScheme,
     theme: theme,
     children: children

package/esm/overlays/PortalProvider.js

@@ -17,6 +17,12 @@ export const toastContainerId = 'toastsContainer';
 export const tooltipContainerId = 'tooltipContainer';
 export const trayContainerId = 'trayContainer';
 const safeDocument = (_getBrowserGlobals = getBrowserGlobals()) === null || _getBrowserGlobals === void 0 ? void 0 : _getBrowserGlobals.document;
+
+/**
+ * Internal component that creates the DOM container elements for overlay components.
+ * Appends a root div to `document.body` containing separate containers for each overlay
+ * type (modals, toasts, alerts, tooltips, trays), each with its own z-index layer.
+ */
 export const PortalHost = /*#__PURE__*/memo(() => {
   const portalRoot = useMemo(
   // prevent duplicate portal root
@@ -78,6 +84,14 @@ export const PortalHost = /*#__PURE__*/memo(() => {
     })]
   }), portalRoot);
 });
+
+/**
+ * Required root-level provider that enables CDS overlay components (Modal, Toast, Alert,
+ * Tooltip, Tray). Creates the DOM containers these components render into via React portals
+ * and provides the context for managing overlay state and toast queuing.
+ *
+ * Must be rendered once near the root of your application, alongside ThemeProvider.
+ */
 export const PortalProvider = /*#__PURE__*/memo(_ref => {
   let {
     children,
@@ -97,6 +111,12 @@ export const PortalProvider = /*#__PURE__*/memo(_ref => {
     })
   });
 });
+
+/**
+ * Renders portal containers and overlay nodes independently from PortalProvider.
+ * Use this when `renderPortals={false}` is set on PortalProvider to control
+ * where in the component tree the portal DOM containers are created.
+ */
 export const PortalNodes = () => {
   const {
     nodes

package/esm/overlays/Toast.js

@@ -83,10 +83,11 @@ export const Toast = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
   return /*#__PURE__*/_jsx(Portal, {
     containerId: toastContainerId,
     disablePortal: disablePortal,
-    children: /*#__PURE__*/_jsx(motion.div, _objectSpread(_objectSpread({}, motionProps), {}, {
+    children: /*#__PURE__*/_jsx(motion.div, _objectSpread(_objectSpread({}, _objectSpread(_objectSpread({}, motionProps), {}, {
       className: baseCss,
-      "data-testid": "".concat(testID, "-motion"),
-      onAnimationComplete: handleAnimationComplete,
+      'data-testid': "".concat(testID, "-motion"),
+      onAnimationComplete: handleAnimationComplete
+    })), {}, {
       children: /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({
         justifyContent: "center",
         onMouseEnter: pauseTimer // persist toast when hovering
@@ -134,7 +135,7 @@ export const Toast = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
               name: "close",
               onClick: handleClose,
               testID: "".concat(testID, "-close-button"),
-              variant: "foregroundMuted"
+              variant: "secondary"
             }, closeButtonAccessibilityProps))]
           })]
         })

package/esm/overlays/modal/FullscreenModalLayout.js

@@ -58,8 +58,9 @@ export const FullscreenModalLayout = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(f
       zIndex: zIndex,
       children: [/*#__PURE__*/_jsx(motion.div, _objectSpread(_objectSpread({}, overlayMotionProps), {}, {
         children: /*#__PURE__*/_jsx(Overlay, {})
-      })), /*#__PURE__*/_jsx(motion.div, _objectSpread(_objectSpread({}, dialogMotionProps), {}, {
-        className: pinCss,
+      })), /*#__PURE__*/_jsx(motion.div, _objectSpread(_objectSpread({}, _objectSpread(_objectSpread({}, dialogMotionProps), {}, {
+        className: pinCss
+      })), {}, {
         children: /*#__PURE__*/_jsx(FocusTrap, {
           disableFocusTrap: disableFocusTrap,
           focusTabIndexElements: focusTabIndexElements,

package/esm/overlays/modal/ModalHeader.js

@@ -8,7 +8,6 @@ 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 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';
@@ -37,11 +36,17 @@ export const ModalHeader = _props => {
     hideDividers
   } = useModalContext();
   if (!title && !onBackButtonClick && !onRequestClose) return null;
-
-  // use empty placeholder which has the same size as IconButton to maintain horizontal position
   const emptyPlaceholder = /*#__PURE__*/_jsx(Box, {
-    height: interactableHeight.compact,
-    width: interactableHeight.compact
+    "aria-hidden": true,
+    style: {
+      visibility: 'hidden'
+    },
+    children: /*#__PURE__*/_jsx(IconButton, {
+      disabled: true,
+      transparent: true,
+      name: "close",
+      tabIndex: -1
+    })
   });
   return /*#__PURE__*/_jsxs(HStack, _objectSpread(_objectSpread({
     alignItems: alignItems,

package/esm/overlays/overlay/OverlayContent.js

@@ -23,13 +23,12 @@ export const OverlayContent = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
     exitConfigs: [animateOutOpacityConfig],
     exit: 'exit'
   });
-  const content = /*#__PURE__*/_jsx(VStack, _objectSpread(_objectSpread({
+  const content = /*#__PURE__*/_jsx(VStack, _objectSpread({
+    ref: forwardedRef,
     background: "bgOverlay",
     onClick: onClick,
     pin: "all"
-  }, props), {}, {
-    ref: forwardedRef
-  }));
+  }, props));
   return animated ? /*#__PURE__*/_jsx(motion.div, _objectSpread(_objectSpread({}, motionProps), {}, {
     "data-testid": "".concat(props.testID, "-motion"),
     children: content

package/esm/overlays/popover/usePopper.js

@@ -1,6 +1,13 @@
 import { useMemo, useState } from 'react';
+// eslint-disable-next-line no-restricted-imports -- Temporary v9 compatibility export; remove with `usePopper` in v10.
 import { usePopper as useExternalPopper } from 'react-popper';
+// eslint-disable-next-line no-restricted-imports -- Temporary v9 compatibility export; remove with `usePopper` in v10.
+
 import { useTheme } from '../../hooks/useTheme';
+/**
+ * @deprecated Use Floating UI directly. This hook is temporarily supported for compatibility. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const usePopper = _ref => {
   let {
     placement,

package/esm/overlays/tooltip/__figma__/Tooltip.figma.js

@@ -1,6 +1,6 @@
 import { figma } from '@figma/code-connect';
 import { Button } from '../../../buttons';
-import { TextBody, TextHeadline } from '../../../typography';
+import { Text } from '../../../typography';
 import { Tooltip } from '../Tooltip';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 figma.connect(Tooltip, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=715%3A14162', {
@@ -75,11 +75,13 @@ figma.connect(Tooltip, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-
     } = _ref2;
     return /*#__PURE__*/_jsx(Tooltip, {
       content: /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(TextHeadline, {
+        children: [/*#__PURE__*/_jsx(Text, {
           as: "p",
+          font: "headline",
           children: content.title
-        }), /*#__PURE__*/_jsx(TextBody, {
+        }), /*#__PURE__*/_jsx(Text, {
           as: "p",
+          font: "body",
           children: content.description
         })]
       }),

package/esm/overlays/useModal.js

@@ -1,7 +1,7 @@
 import { useModal } from '@coinbase/cds-common/overlays/useModal';
 
 /**
- * @deprecated Use the visible and onRequestClose props as outlined in the docs here https://cds.coinbase.com/components/modal#get-started. This will be removed in a future major release.
+ * @deprecated Use the `visible` and `onRequestClose` props as outlined in the docs here https://cds.coinbase.com/components/modal#get-started. This will be removed in a future major release.
  * @deprecationExpectedRemoval v7
  */
 export { useModal };

package/esm/stepper/DefaultStepperHeaderHorizontal.js

@@ -1,4 +1,4 @@
-const _excluded = ["activeStep", "complete", "flatStepIds", "className", "style", "display", "width", "paddingBottom", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight", "textTransform"];
+const _excluded = ["activeStep", "complete", "flatStepIds", "className", "style", "display", "disableAnimateOnMount", "width", "paddingBottom", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight", "textTransform"];
 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; }
@@ -6,17 +6,23 @@ 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 { memo, useMemo } from 'react';
-import { animated, useSpring } from '@react-spring/web';
+import { memo } from 'react';
+import { curves, durations } from '@coinbase/cds-common/motion/tokens';
+import { m as motion } from 'framer-motion';
 import { HStack } from '../layout/HStack';
 import { Text } from '../typography/Text';
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const AnimatedHStack = animated(HStack);
+const MotionHStack = motion(HStack);
 const displayStyle = {
   phone: 'flex',
   tablet: 'none',
   desktop: 'none'
 };
+const headerTransition = {
+  type: 'tween',
+  duration: durations.slow2 / 1000,
+  ease: curves.global
+};
 export const DefaultStepperHeaderHorizontal = /*#__PURE__*/memo(function DefaultStepperHeaderHorizontal(_ref) {
   let {
       activeStep,
@@ -25,6 +31,7 @@ export const DefaultStepperHeaderHorizontal = /*#__PURE__*/memo(function Default
       className,
       style,
       display = displayStyle,
+      disableAnimateOnMount,
       width = '100%',
       paddingBottom = 1.5,
       font = 'caption',
@@ -35,29 +42,26 @@ export const DefaultStepperHeaderHorizontal = /*#__PURE__*/memo(function Default
       textTransform
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
-  const spring = useSpring({
-    from: {
-      opacity: 0
-    },
-    to: {
-      opacity: 1
-    },
-    reset: true
-  });
-  const styles = useMemo(() => _objectSpread(_objectSpread({}, style), spring), [style, spring]);
   const flatStepIndex = activeStep ? flatStepIds.indexOf(activeStep.id) : -1;
   const emptyText = /*#__PURE__*/_jsx(_Fragment, {
     children: "\xA0"
   });
-  return /*#__PURE__*/_jsx(AnimatedHStack, _objectSpread(_objectSpread({
+  return /*#__PURE__*/_jsx(MotionHStack, _objectSpread(_objectSpread({
     "aria-hidden": true,
+    animate: {
+      opacity: 1
+    },
     className: className,
     display: display,
     font: font,
     fontFamily: fontFamily,
+    initial: {
+      opacity: disableAnimateOnMount ? 1 : 0
+    },
     paddingBottom: paddingBottom,
     position: "relative",
-    style: styles,
+    style: style,
+    transition: headerTransition,
     width: width
   }, props), {}, {
     children: /*#__PURE__*/_jsx(Text, {