@coinbase/cds-web 8.62.1 → 8.66.1

package/esm/overlays/Toast.js

@@ -6,10 +6,10 @@ 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, memo, useCallback, useContext, useEffect, useImperativeHandle } from 'react';
+import React, { forwardRef, memo, useCallback, useContext, useImperativeHandle, useRef, useState } from 'react';
 import { animateInBottomConfig, animateInOpacityConfig, animateOutBottomConfig, animateOutOpacityConfig } from '@coinbase/cds-common/animation/toast';
 import { ToastContext } from '@coinbase/cds-common/overlays/ToastProvider';
-import { m as motion, useAnimation } from 'framer-motion';
+import { m as motion } from 'framer-motion';
 import { Button } from '../buttons/Button';
 import { IconButton } from '../buttons/IconButton';
 import { useComponentConfig } from '../hooks/useComponentConfig';
@@ -48,24 +48,31 @@ export const Toast = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
     pauseTimer,
     resumeTimer
   } = useContext(ToastContext);
-  const animationControls = useAnimation();
+  const [motionState, setMotionState] = useState('enter');
+  const exitResolverRef = useRef(null);
   const motionProps = useMotionProps({
     enterConfigs: [animateInOpacityConfig, animateInBottomConfig],
     exitConfigs: [animateOutOpacityConfig, animateOutBottomConfig],
-    animate: animationControls,
+    animate: motionState,
     style: {
       bottom: bottomOffset
     }
   });
-  useEffect(() => {
-    void animationControls.start('enter');
-  }, [animationControls]);
-  const handleClose = useCallback(async () => {
+  const handleAnimationComplete = useCallback(definition => {
+    if (definition === 'exit') {
+      var _exitResolverRef$curr;
+      onDidHide === null || onDidHide === void 0 || onDidHide();
+      (_exitResolverRef$curr = exitResolverRef.current) === null || _exitResolverRef$curr === void 0 || _exitResolverRef$curr.call(exitResolverRef, true);
+      exitResolverRef.current = null;
+    }
+  }, [onDidHide]);
+  const handleClose = useCallback(() => {
     onWillHide === null || onWillHide === void 0 || onWillHide();
-    await animationControls.start('exit');
-    onDidHide === null || onDidHide === void 0 || onDidHide();
-    return true;
-  }, [onWillHide, onDidHide, animationControls]);
+    return new Promise(resolve => {
+      exitResolverRef.current = resolve;
+      setMotionState('exit');
+    });
+  }, [onWillHide]);
   useImperativeHandle(ref, () => ({
     hide: handleClose
   }), [handleClose]);
@@ -79,6 +86,7 @@ export const Toast = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
     children: /*#__PURE__*/_jsx(motion.div, _objectSpread(_objectSpread({}, motionProps), {}, {
       className: baseCss,
       "data-testid": "".concat(testID, "-motion"),
+      onAnimationComplete: handleAnimationComplete,
       children: /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({
         justifyContent: "center",
         onMouseEnter: pauseTimer // persist toast when hovering

package/esm/overlays/index.js

@@ -10,6 +10,7 @@ export * from './modal/ModalFooter';
 export * from './modal/ModalHeader';
 export * from './overlay/Overlay';
 export * from './popover/Popover';
+export * from './popover/PopoverPanel';
 export * from './popover/PopoverProps';
 export * from './popover/usePopper';
 export * from './PortalProvider';

package/esm/overlays/modal/ModalHeader.js

@@ -1,4 +1,4 @@
-const _excluded = ["alignItems", "paddingX", "paddingY", "title", "onBackButtonClick", "backAccessibilityLabel", "backAccessibilityHint", "closeAccessibilityLabel", "closeAccessibilityHint"];
+const _excluded = ["alignItems", "paddingX", "paddingY", "font", "title", "onBackButtonClick", "backAccessibilityLabel", "backAccessibilityHint", "closeAccessibilityLabel", "closeAccessibilityHint"];
 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; }
@@ -21,6 +21,7 @@ export const ModalHeader = _props => {
       alignItems = 'center',
       paddingX = 3,
       paddingY = 2,
+      font = 'headline',
       title,
       onBackButtonClick,
       backAccessibilityLabel,
@@ -45,6 +46,7 @@ export const ModalHeader = _props => {
   return /*#__PURE__*/_jsxs(HStack, _objectSpread(_objectSpread({
     alignItems: alignItems,
     borderedBottom: !hideDividers,
+    font: font,
     paddingX: paddingX,
     paddingY: paddingY
   }, props), {}, {
@@ -62,14 +64,14 @@ export const ModalHeader = _props => {
       flexGrow: 1,
       justifyContent: "center",
       paddingX: 2,
-      children: title && /*#__PURE__*/_jsx(Text, {
+      children: title && (typeof title === 'string' ? /*#__PURE__*/_jsx(Text, {
         as: "h2",
         display: "block",
-        font: "headline",
+        font: "inherit",
         id: accessibilityLabelledBy,
         textAlign: "center",
         children: title
-      })
+      }) : title)
     }), !hideCloseButton && /*#__PURE__*/_jsx(Box, {
       justifyContent: "flex-end",
       children: /*#__PURE__*/_jsx(IconButton, {

package/esm/overlays/modal/ModalWrapper.js

@@ -11,6 +11,7 @@ import { NewAnimatePresence } from '../../animation/NewAnimatePresence';
 import { cx } from '../../cx';
 import { useComponentConfig } from '../../hooks/useComponentConfig';
 import { useScrollBlocker } from '../../hooks/useScrollBlocker';
+import { VStack } from '../../layout';
 import { Box } from '../../layout/Box';
 import { media } from '../../styles/media';
 import { Overlay } from '../overlay/Overlay';
@@ -65,11 +66,16 @@ export const ModalWrapper = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, r
         width: width
       }, props), {}, {
         children: /*#__PURE__*/_jsxs(_Fragment, {
-          children: [!hideOverlay && /*#__PURE__*/_jsx(Overlay, {
+          children: [!hideOverlay ? /*#__PURE__*/_jsx(Overlay, {
             animated: true,
             className: cx(!dangerouslyDisableResponsiveness && modalOverlayResponsiveCss),
             onClick: !disableOverlayPress ? onOverlayPress : undefined,
             testID: "modal-overlay"
+          }) : /*#__PURE__*/_jsx(VStack, {
+            background: "transparent",
+            onClick: !disableOverlayPress ? onOverlayPress : undefined,
+            pin: "all",
+            position: "fixed"
           }), children]
         })
       }))

package/esm/overlays/popover/Popover.js

@@ -4,17 +4,19 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 /* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
-import React, { memo, useCallback, useMemo } from 'react';
+import React, { forwardRef, memo, useCallback, useMemo } from 'react';
+import { useMergeRefs } from '@coinbase/cds-common/hooks/useMergeRefs';
 import { zIndex } from '@coinbase/cds-common/tokens/zIndex';
+import { autoPlacement, autoUpdate, flip, limitShift, offset, shift, useFloating } from '@floating-ui/react-dom';
 import { NewAnimatePresence } from '../../animation/NewAnimatePresence';
 import { cx } from '../../cx';
+import { useTheme } from '../../hooks/useTheme';
 import { Box } from '../../layout/Box';
 import { InvertedThemeProvider } from '../../system/ThemeProvider';
 import { FocusTrap } from '../FocusTrap';
 import { Overlay } from '../overlay/Overlay';
 import { Portal } from '../Portal';
 import { tooltipContainerId } from '../PortalProvider';
-import { usePopper } from './usePopper';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const subjectCss = "subjectCss-s1cgr9z4";
 const defaultContentPosition = {
@@ -27,10 +29,15 @@ const defaultContentPosition = {
 const blockCss = "blockCss-b13rnbro";
 
 /**
- * Popover is the internal recommended base component used for any overlay that is laid out with respect to a subject.
- * It is purposely a flexible component and is reserved for CDS internal usage.
+ * Low-level primitive that positions an arbitrary `content` node relative to a subject (trigger) element.
+ * It handles placement, portal rendering, and open/close wiring, but intentionally renders `content` as-is —
+ * it does not provide a styled surface, animation, or focus management.
+ *
+ * For a fully composed overlay with an animated elevated panel and focus trap, use {@link PopoverPanel} instead.
+ *
+ * @internal Reserved for CDS internal use only.
  */
-export const Popover = /*#__PURE__*/memo(_ref => {
+export const Popover = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     content,
     children,
@@ -57,14 +64,51 @@ export const Popover = /*#__PURE__*/memo(_ref => {
     respectNegativeTabIndex,
     autoFocusDelay,
     restoreFocusOnUnmount,
-    controlledElementAccessibilityProps
+    controlledElementAccessibilityProps,
+    style,
+    className
   } = _ref;
+  const theme = useTheme();
   const {
-    setSubject,
-    setPopper,
-    popperStyles,
-    popperAttributes
-  } = usePopper(contentPosition);
+    placement: rawPlacement = 'bottom',
+    skid = 0,
+    gap = 0,
+    offsetGap,
+    strategy
+  } = contentPosition;
+  const computedSkid = theme.space[skid];
+  const computedGap = theme.space[gap];
+  const getOffsetGap = offsetGap && gap - offsetGap;
+  const isAutoPlacement = typeof rawPlacement === 'string' && rawPlacement.startsWith('auto');
+  const middleware = useMemo(() => {
+    const middlewareList = [offset({
+      crossAxis: computedSkid,
+      mainAxis: getOffsetGap !== null && getOffsetGap !== void 0 ? getOffsetGap : computedGap
+    })];
+    if (isAutoPlacement) {
+      const alignment = rawPlacement === 'auto-start' ? 'start' : rawPlacement === 'auto-end' ? 'end' : undefined;
+      middlewareList.push(autoPlacement(alignment ? {
+        alignment
+      } : undefined));
+    } else {
+      middlewareList.push(flip());
+      middlewareList.push(shift({
+        crossAxis: true,
+        limiter: limitShift()
+      }));
+    }
+    return middlewareList;
+  }, [computedSkid, getOffsetGap, computedGap, isAutoPlacement, rawPlacement]);
+  const {
+    refs,
+    floatingStyles
+  } = useFloating({
+    placement: isAutoPlacement ? undefined : rawPlacement,
+    strategy,
+    middleware,
+    whileElementsMounted: autoUpdate
+  });
+  const mergedRef = useMergeRefs(ref, refs.setReference);
 
   // We use this to infer that hover events are triggering the mounting/dismounting of the content
   const hasHoverInteractions = !!onMouseEnter && !!onMouseLeave && !onPressSubject;
@@ -78,13 +122,13 @@ export const Popover = /*#__PURE__*/memo(_ref => {
   const handleCaptureEvents = useCallback(event => {
     event.stopPropagation();
   }, []);
-  const memoizedContent = useMemo(() => /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
-    ref: setPopper,
-    style: _objectSpread(_objectSpread({}, popperStyles.popper), {}, {
-      zIndex: zIndex.dropdown
-    })
-  }, popperAttributes.popper), {}, {
+  const memoizedContent = useMemo(() => /*#__PURE__*/_jsx("div", {
+    ref: refs.setFloating,
     onClick: handleCaptureEvents,
+    onMouseDown: handleCaptureEvents,
+    style: _objectSpread(_objectSpread({}, floatingStyles), {}, {
+      zIndex: zIndex.dropdown
+    }),
     children: /*#__PURE__*/_jsx(FocusTrap, {
       autoFocusDelay: autoFocusDelay,
       disableAutoFocus: disableAutoFocus,
@@ -101,7 +145,7 @@ export const Popover = /*#__PURE__*/memo(_ref => {
         children: content
       }))
     })
-  })), [setPopper, popperStyles.popper, popperAttributes.popper, handleCaptureEvents, autoFocusDelay, disableAutoFocus, disableFocusTrap, disableTypeFocus, focusTabIndexElements, handleClose, respectNegativeTabIndex, restoreFocusOnUnmount, testID, controlledElementAccessibilityProps, content]);
+  }), [refs.setFloating, floatingStyles, handleCaptureEvents, autoFocusDelay, disableAutoFocus, disableFocusTrap, disableTypeFocus, focusTabIndexElements, handleClose, respectNegativeTabIndex, restoreFocusOnUnmount, testID, controlledElementAccessibilityProps, content]);
   const renderContent = hasHoverInteractions ? memoizedContent : /*#__PURE__*/_jsx(Box, {
     "aria-label": accessibilityLabel,
     "aria-modal": "true",
@@ -114,18 +158,16 @@ export const Popover = /*#__PURE__*/memo(_ref => {
   });
   const Wrapper = invertColorScheme ? InvertedThemeProvider : React.Fragment;
   return /*#__PURE__*/_jsxs("div", {
-    className: block ? blockCss : undefined,
+    ref: mergedRef,
+    className: cx(subjectCss, block && blockCss, className),
     onBlur: onBlur,
+    onClick: disabled ? undefined : onPressSubject,
+    onFocus: disabled ? undefined : onFocus,
+    onMouseDown: disabled ? undefined : onMouseDown,
     onMouseEnter: disabled ? undefined : onMouseEnter,
     onMouseLeave: disabled ? undefined : onMouseLeave,
-    children: [/*#__PURE__*/_jsx("div", {
-      ref: setSubject,
-      className: cx(subjectCss, block && blockCss),
-      onClick: disabled ? undefined : onPressSubject,
-      onFocus: disabled ? undefined : onFocus,
-      onMouseDown: disabled ? undefined : onMouseDown,
-      children: children
-    }), /*#__PURE__*/_jsx(NewAnimatePresence, {
+    style: style,
+    children: [children, /*#__PURE__*/_jsx(NewAnimatePresence, {
       children: shouldShowContent ? /*#__PURE__*/_jsx(Portal, {
         containerId: tooltipContainerId,
         disablePortal: disablePortal,
@@ -143,5 +185,6 @@ export const Popover = /*#__PURE__*/memo(_ref => {
       }) : undefined
     })]
   });
-});
+}));
+Popover.displayName = 'Popover';
 import "./Popover.css";

package/esm/overlays/popover/PopoverPanel.css

@@ -0,0 +1,2 @@
+@layer cds{.triggerContainerCss-tkun82{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;}
+.blockCss-bqzogy1{width:100%;}}

package/esm/overlays/popover/PopoverPanel.js

@@ -0,0 +1,220 @@
+const _excluded = ["content", "showOverlay", "children", "visible", "onClose", "onOpen", "panelWidth", "minPanelWidth", "maxPanelWidth", "maxPanelHeight", "panelHeight", "testID", "disablePortal", "onBlur", "contentPosition", "block", "disabled", "restoreFocusOnUnmount", "style", "styles", "className", "classNames"],
+  _excluded2 = ["children", "content", "maxPanelHeight", "enableMobileModal", "onOpen", "onClose", "restoreFocusOnUnmount"];
+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; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React, { forwardRef, memo, useCallback, useImperativeHandle, useMemo, useState } from 'react';
+import useMeasure from 'react-use-measure';
+import { cx } from '../../cx';
+import { useBreakpoints } from '../../hooks/useBreakpoints';
+import { useComponentConfig } from '../../hooks/useComponentConfig';
+import { FocusTrap } from '../FocusTrap';
+import { ModalWrapper } from '../modal/ModalWrapper';
+import { Popover } from './Popover';
+import { PopoverPanelContent } from './PopoverPanelContent';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const POPOVER_PANEL_MAX_HEIGHT = 300;
+export const popoverPanelClassNames = {
+  /** Elevated panel surface (`PopoverPanelContent`). */
+  content: 'cds-PopoverPanel-content',
+  /** Wrapper around `children` (the `Popover` root in floating layout, or the trigger `div` in the mobile modal). */
+  triggerContainer: 'cds-PopoverPanel-triggerContainer'
+};
+const NOOP = () => {};
+const defaultPopoverContentPositionConfig = {
+  gap: 0.5,
+  placement: 'bottom-start'
+};
+function usePopoverPanelImperativeHandle(ref, onOpen, onClose) {
+  useImperativeHandle(ref, () => ({
+    openPopover: onOpen,
+    closePopover: onClose
+  }), [onOpen, onClose]);
+}
+const triggerContainerCss = "triggerContainerCss-tkun82";
+const blockCss = "blockCss-bqzogy1";
+const MobilePopoverPanel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    children,
+    onOpen = NOOP,
+    onClose = NOOP,
+    block,
+    content,
+    disablePortal,
+    visible,
+    panelWidth,
+    showOverlay,
+    minPanelWidth,
+    maxPanelWidth,
+    maxPanelHeight,
+    disabled,
+    controlledElementAccessibilityProps,
+    respectNegativeTabIndex,
+    restoreFocusOnUnmount,
+    style,
+    styles,
+    className,
+    classNames,
+    onBlur,
+    testID,
+    disableAutoFocus,
+    focusTabIndexElements,
+    autoFocusDelay
+  } = _ref;
+  usePopoverPanelImperativeHandle(ref, onOpen, onClose);
+  const handleCaptureEvents = useCallback(event => {
+    event.stopPropagation();
+  }, []);
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+    _jsxs("div", {
+      className: cx(block ? blockCss : triggerContainerCss, popoverPanelClassNames.triggerContainer, className, classNames === null || classNames === void 0 ? void 0 : classNames.triggerContainer),
+      onBlur: onBlur,
+      onClick: disabled ? undefined : onOpen,
+      style: _objectSpread(_objectSpread({}, style), styles === null || styles === void 0 ? void 0 : styles.triggerContainer),
+      children: [children, /*#__PURE__*/_jsx(ModalWrapper, _objectSpread(_objectSpread({
+        dangerouslyDisableResponsiveness: true,
+        disablePortal: disablePortal,
+        hideOverlay: !showOverlay,
+        onClick: handleCaptureEvents,
+        onOverlayPress: onClose,
+        testID: testID,
+        visible: visible
+      }, controlledElementAccessibilityProps), {}, {
+        children: /*#__PURE__*/_jsx(FocusTrap, {
+          autoFocusDelay: autoFocusDelay,
+          disableAutoFocus: disableAutoFocus,
+          focusTabIndexElements: focusTabIndexElements,
+          onEscPress: onClose,
+          respectNegativeTabIndex: respectNegativeTabIndex,
+          restoreFocusOnUnmount: restoreFocusOnUnmount,
+          children: /*#__PURE__*/_jsx(PopoverPanelContent, {
+            className: classNames === null || classNames === void 0 ? void 0 : classNames.content,
+            maxHeight: maxPanelHeight,
+            maxWidth: maxPanelWidth,
+            minWidth: minPanelWidth,
+            style: styles === null || styles === void 0 ? void 0 : styles.content,
+            width: panelWidth,
+            children: content
+          })
+        })
+      }))]
+    })
+  );
+}));
+const FloatingPopoverPanel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+      content,
+      showOverlay,
+      children,
+      visible,
+      onClose = NOOP,
+      onOpen = NOOP,
+      panelWidth: width,
+      minPanelWidth: minWidth,
+      maxPanelWidth: maxWidth,
+      maxPanelHeight: maxHeight = POPOVER_PANEL_MAX_HEIGHT,
+      panelHeight: height,
+      testID,
+      disablePortal,
+      onBlur,
+      contentPosition = defaultPopoverContentPositionConfig,
+      block,
+      disabled,
+      restoreFocusOnUnmount,
+      style,
+      styles,
+      className,
+      classNames
+    } = _ref2,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  const [triggerRef, triggerBounds] = useMeasure();
+  const combinedContentPosition = useMemo(() => _objectSpread(_objectSpread({}, defaultPopoverContentPositionConfig), contentPosition), [contentPosition]);
+  const memoizedContent = useMemo(() => /*#__PURE__*/_jsx(PopoverPanelContent, {
+    className: classNames === null || classNames === void 0 ? void 0 : classNames.content,
+    height: height,
+    maxHeight: maxHeight,
+    maxWidth: maxWidth,
+    minWidth: minWidth,
+    placement: combinedContentPosition.placement,
+    style: styles === null || styles === void 0 ? void 0 : styles.content,
+    width: width !== null && width !== void 0 ? width : triggerBounds.width,
+    children: content
+  }), [classNames === null || classNames === void 0 ? void 0 : classNames.content, height, maxHeight, maxWidth, minWidth, combinedContentPosition.placement, styles === null || styles === void 0 ? void 0 : styles.content, width, triggerBounds.width, content]);
+  usePopoverPanelImperativeHandle(ref, onOpen, onClose);
+  return /*#__PURE__*/_jsx(Popover, _objectSpread(_objectSpread({
+    ref: triggerRef,
+    block: block,
+    className: cx(!block && triggerContainerCss, popoverPanelClassNames.triggerContainer, className, classNames === null || classNames === void 0 ? void 0 : classNames.triggerContainer),
+    content: disabled ? undefined : memoizedContent,
+    contentPosition: combinedContentPosition,
+    disablePortal: disablePortal,
+    disabled: disabled,
+    onBlur: onBlur,
+    onClose: onClose,
+    onPressSubject: !visible ? onOpen : undefined,
+    restoreFocusOnUnmount: restoreFocusOnUnmount,
+    showOverlay: showOverlay,
+    style: _objectSpread(_objectSpread({}, style), styles === null || styles === void 0 ? void 0 : styles.triggerContainer),
+    testID: testID,
+    visible: disabled ? false : visible
+  }, props), {}, {
+    children: children
+  }));
+}));
+
+/**
+ * Anchored floating panel  built on {@link Popover} and {@link PopoverPanelContent} without select context. Use for custom panel content.
+ * Imperative `openPopover` / `closePopover` are implemented in the floating and modal subcomponents (Dropdown continues to use `openMenu` / `closeMenu` on its ref).
+ */
+export const PopoverPanel = /*#__PURE__*/forwardRef((_props, ref) => {
+  const mergedProps = useComponentConfig('PopoverPanel', _props);
+  const {
+      children,
+      content,
+      maxPanelHeight = POPOVER_PANEL_MAX_HEIGHT,
+      enableMobileModal,
+      onOpen,
+      onClose,
+      restoreFocusOnUnmount = true
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded2);
+  const {
+    isPhone
+  } = useBreakpoints();
+  const [visible, setVisible] = useState(false);
+  const handleOpenPopover = useCallback(() => {
+    setVisible(true);
+    onOpen === null || onOpen === void 0 || onOpen();
+  }, [onOpen]);
+  const handleClosePopover = useCallback(() => {
+    setVisible(false);
+    onClose === null || onClose === void 0 || onClose();
+  }, [onClose]);
+  const resolvedContent = useMemo(() => typeof content === 'function' ? content({
+    closePopover: handleClosePopover
+  }) : content, [content, handleClosePopover]);
+  const sharedProps = _objectSpread({
+    maxPanelHeight,
+    onClose: handleClosePopover,
+    onOpen: handleOpenPopover,
+    restoreFocusOnUnmount,
+    visible,
+    content: resolvedContent
+  }, props);
+  return isPhone && enableMobileModal ? /*#__PURE__*/_jsx(MobilePopoverPanel, _objectSpread(_objectSpread({
+    ref: ref
+  }, sharedProps), {}, {
+    children: children
+  })) : /*#__PURE__*/_jsx(FloatingPopoverPanel, _objectSpread(_objectSpread({
+    ref: ref
+  }, sharedProps), {}, {
+    children: children
+  }));
+});
+import "./PopoverPanel.css";

package/esm/overlays/popover/PopoverPanelContent.js

@@ -0,0 +1,57 @@
+const _excluded = ["children", "placement", "minWidth", "borderRadius", "background", "overflow", "style", "className"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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 { animateDropdownOpacityInConfig, animateDropdownOpacityOutConfig, animateDropdownTransformInConfig, animateDropdownTransformOutConfig } from '@coinbase/cds-common/animation/dropdown';
+import { zIndex } from '@coinbase/cds-common/tokens/zIndex';
+import { m as motion } from 'framer-motion';
+import { cx } from '../../cx';
+import { VStack } from '../../layout/VStack';
+import { useMotionProps } from '../../motion/useMotionProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+const popoverPanelContentClassName = 'cds-popover-panel-content';
+const MotionVStack = motion(VStack);
+export const PopoverPanelContent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      children,
+      placement,
+      minWidth = 'min-content',
+      borderRadius = 400,
+      background = 'bg',
+      overflow = 'auto',
+      style,
+      className
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const isHorizontal = (placement === null || placement === void 0 ? void 0 : placement.includes('left')) || (placement === null || placement === void 0 ? void 0 : placement.includes('right'));
+  const translate = isHorizontal ? 'x' : 'y';
+  const motionProps = useMotionProps({
+    enterConfigs: [animateDropdownOpacityInConfig, _objectSpread(_objectSpread({}, animateDropdownTransformInConfig), {}, {
+      property: translate
+    })],
+    exitConfigs: [animateDropdownOpacityOutConfig, _objectSpread(_objectSpread({}, animateDropdownTransformOutConfig), {}, {
+      property: translate
+    })],
+    exit: 'exit'
+  });
+  return /*#__PURE__*/_jsx(MotionVStack, _objectSpread(_objectSpread(_objectSpread({
+    ref: ref,
+    bordered: true,
+    background: background,
+    borderRadius: borderRadius,
+    className: cx(popoverPanelContentClassName, className),
+    elevation: 2,
+    minWidth: minWidth,
+    overflow: overflow,
+    role: "dialog",
+    style: style,
+    zIndex: zIndex.dropdown
+  }, props), motionProps), {}, {
+    children: children
+  }));
+}));

package/esm/overlays/tooltip/TooltipContent.js

@@ -8,15 +8,13 @@ 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((_props, ref) => {
-  const mergedProps = useComponentConfig('TooltipContent', _props);
-  const {
+export const TooltipContent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
     content,
     elevation,
     gap,
@@ -29,7 +27,7 @@ export const TooltipContent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props,
     maxWidth = tooltipMaxWidth,
     paddingX = tooltipPaddingX,
     paddingY = tooltipPaddingY
-  } = mergedProps;
+  } = _ref;
   const outerStyle = useMemo(() => ({
     padding: "var(--space-".concat(gap, ")"),
     zIndex: zIndex !== null && zIndex !== void 0 ? zIndex : zIndexTokens.tooltip

package/esm/stepper/Stepper.js

@@ -123,9 +123,10 @@ const StepperBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
   const previousComplete = (_usePreviousValue = usePreviousValue(complete)) !== null && _usePreviousValue !== void 0 ? _usePreviousValue : false;
   const previousActiveStepIndex = (_usePreviousValue2 = usePreviousValue(activeStepIndex)) !== null && _usePreviousValue2 !== void 0 ? _usePreviousValue2 : -1;
   const [progressSprings, progressSpringsApi] = useSprings(steps.length, index => ({
-    progress: complete ? 1 : 0,
-    config: progressSpringConfig,
-    immediate: !animate || disableAnimateOnMount && !hasMounted
+    from: {
+      progress: complete ? 1 : 0
+    },
+    config: progressSpringConfig
   }));
   useEffect(() => {
     // update the previous values for next render

package/esm/tabs/DefaultTab.css

@@ -0,0 +1,3 @@
+@layer cds{.pressableCss-p1gyavxu{margin:0;padding:0;white-space:nowrap;}
+.insetFocusRingCss-i14sq9yf{position:relative;}.insetFocusRingCss-i14sq9yf:focus{outline:none;}.insetFocusRingCss-i14sq9yf:focus-visible{outline-style:solid;outline-width:2px;outline-color:var(--color-bgPrimary);outline-offset:-3px;border-radius:4px;}
+.labelPaddingCss-lu2xm1d{padding-top:var(--space-2);padding-bottom:calc(var(--space-2) - 2px);}}