@coinbase/cds-web 8.66.1 → 9.0.0-rc.1

package/esm/cards/FeedCard.js

@@ -15,11 +15,6 @@ import { CardBody } from './CardBody';
 import { CardFooter } from './CardFooter';
 import { CardHeader } from './CardHeader';
 import { LikeButton } from './LikeButton';
-
-/**
- * @deprecated Use the ContentCard component instead. This will be removed in a future major release.
- * @deprecationExpectedRemoval v8
- */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * @deprecated Use the ContentCard component instead. This will be removed in a future major release.

package/esm/cards/LikeButton.js

@@ -1,4 +1,4 @@
-const _excluded = ["count", "compact", "flush", "liked"];
+const _excluded = ["count", "compact", "flush", "liked", "padding"];
 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,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, { memo } from 'react';
-import { interactableHeight } from '@coinbase/cds-common/tokens/interactableHeight';
+import { memo, useMemo } from 'react';
 import { getButtonSpacingProps } from '@coinbase/cds-common/utils/getButtonSpacingProps';
 import { useComponentConfig } from '../hooks/useComponentConfig';
+import { useTheme } from '../hooks/useTheme';
 import { Icon } from '../icons/Icon';
 import { HStack } from '../layout/HStack';
 import { Pressable } from '../system/Pressable';
@@ -21,11 +21,12 @@ export const LikeButton = /*#__PURE__*/memo(function LikeButton(_props) {
       count = 0,
       compact = true,
       flush,
-      liked = false
+      liked = false,
+      padding = compact ? 1.5 : 2 // mirror IconButton's padding
     } = mergedProps,
     props = _objectWithoutProperties(mergedProps, _excluded);
+  const theme = useTheme();
   const iconSize = compact ? 's' : 'm';
-  const size = interactableHeight[compact ? 'compact' : 'regular'];
   const {
     marginStart,
     marginEnd
@@ -33,8 +34,14 @@ export const LikeButton = /*#__PURE__*/memo(function LikeButton(_props) {
     compact,
     flush
   });
+
+  // override default line height to match the height of the sibling icon
+  const countTextStyle = useMemo(() => ({
+    lineHeight: "".concat(theme.iconSize[iconSize], "px")
+  }), [theme.iconSize, iconSize]);
   return /*#__PURE__*/_jsx(Pressable, _objectSpread(_objectSpread({
-    background: "transparent"
+    background: "transparent",
+    padding: padding
   }, props), {}, {
     children: /*#__PURE__*/_jsxs(HStack, {
       alignItems: "center",
@@ -44,8 +51,6 @@ export const LikeButton = /*#__PURE__*/memo(function LikeButton(_props) {
       justifyContent: "flex-start",
       marginEnd: marginEnd,
       marginStart: marginStart,
-      minHeight: size,
-      minWidth: size,
       children: [/*#__PURE__*/_jsx(Icon, {
         active: liked,
         color: liked ? 'fgNegative' : 'fg',
@@ -56,6 +61,7 @@ export const LikeButton = /*#__PURE__*/memo(function LikeButton(_props) {
         as: "p",
         display: "block",
         font: "label1",
+        style: countTextStyle,
         children: count
       }) : null]
     })

package/esm/cards/UpsellCard.js

@@ -1,3 +1,8 @@
+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, { isValidElement, memo } from 'react';
 import { upsellCardDefaultWidth, upsellCardMinHeight } from '@coinbase/cds-common/tokens/card';
 import { Button, IconButton } from '../buttons';
@@ -46,18 +51,21 @@ export const UpsellCard = /*#__PURE__*/memo(_ref => {
     testID = 'upsell-card',
     accessibilityLabel,
     width = upsellCardDefaultWidth,
-    onClick
+    onClick,
+    className,
+    style
   } = _ref;
   const content = /*#__PURE__*/_jsx(HStack, {
     alignContent: "space-between",
     background: background,
     borderColor: "transparent",
     borderRadius: 500,
+    className: className,
     dangerouslySetBackground: dangerouslySetBackground,
     minHeight: upsellCardMinHeight,
-    style: {
+    style: _objectSpread({
       border: 'none'
-    },
+    }, style),
     testID: testID,
     width: width,
     children: /*#__PURE__*/_jsxs(HStack, {

package/esm/cards/__figma__/UpsellCard.figma.js

@@ -49,8 +49,10 @@ figma.connect(UpsellCard, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/
     } = useTheme();
     const green60 = "rgba(".concat(spectrum.green60, ")");
     return /*#__PURE__*/_jsx(UpsellCard, _objectSpread(_objectSpread({}, props), {}, {
-      dangerouslySetBackground: green60,
       description: description.string,
+      style: {
+        backgroundColor: green60
+      },
       title: title.string
     }));
   }

package/esm/carousel/Carousel.js

@@ -1,4 +1,4 @@
-const _excluded = ["children", "title", "hideNavigation", "hidePagination", "drag", "snapMode", "NavigationComponent", "PaginationComponent", "className", "classNames", "style", "styles", "nextPageAccessibilityLabel", "previousPageAccessibilityLabel", "paginationAccessibilityLabel", "startAutoplayAccessibilityLabel", "stopAutoplayAccessibilityLabel", "pageChangeAccessibilityLabel", "onChangePage", "onDragStart", "onDragEnd", "loop", "autoplay", "autoplayInterval", "paginationVariant"];
+const _excluded = ["children", "title", "hideNavigation", "hidePagination", "paginationVariant", "drag", "snapMode", "NavigationComponent", "PaginationComponent", "className", "classNames", "style", "styles", "nextPageAccessibilityLabel", "previousPageAccessibilityLabel", "paginationAccessibilityLabel", "startAutoplayAccessibilityLabel", "stopAutoplayAccessibilityLabel", "pageChangeAccessibilityLabel", "onChangePage", "onDragStart", "onDragEnd", "loop", "autoplay", "autoplayInterval"];
 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; }
@@ -344,6 +344,7 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref)
       title,
       hideNavigation,
       hidePagination,
+      paginationVariant,
       drag = 'snap',
       snapMode = 'page',
       NavigationComponent = DefaultCarouselNavigation,
@@ -363,8 +364,7 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref)
       onDragEnd,
       loop,
       autoplay,
-      autoplayInterval = 3000,
-      paginationVariant
+      autoplayInterval = 3000
     } = mergedProps,
     props = _objectWithoutProperties(mergedProps, _excluded);
   const animationApi = useAnimation();
@@ -773,6 +773,7 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref)
             children: [typeof title === 'string' ? /*#__PURE__*/_jsx(Text, {
               className: classNames === null || classNames === void 0 ? void 0 : classNames.title,
               font: "title3",
+              numberOfLines: 1,
               style: styles === null || styles === void 0 ? void 0 : styles.title,
               children: title
             }) : title, !hideNavigation && /*#__PURE__*/_jsx(NavigationComponent, {

package/esm/carousel/DefaultCarouselPagination.js

@@ -1,4 +1,4 @@
-const _excluded = ["isActive"],
+const _excluded = ["isActive", "className"],
   _excluded2 = ["isActive", "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; }
@@ -30,13 +30,16 @@ const pillCss = "pillCss-pea8kmz";
 const dotCss = "dotCss-d1eoinf6";
 const PaginationPill = /*#__PURE__*/memo(function PaginationPill(_ref) {
   let {
-      isActive
+      isActive,
+      className
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_jsx(Pressable, _objectSpread({
     "aria-current": isActive ? 'true' : undefined,
     background: isActive ? 'bgPrimary' : 'bgLine',
     borderColor: "transparent",
+    borderWidth: 0,
+    className: cx(pillCss, className),
     "data-active": isActive
   }, props));
 });
@@ -130,15 +133,17 @@ export const DefaultCarouselPagination = /*#__PURE__*/memo(function DefaultCarou
     style,
     styles,
     testID = 'carousel-pagination',
-    variant = 'pill'
+    variant = 'dot'
   } = _ref3;
   const isDot = variant === 'dot';
   const getAccessibilityLabel = useCallback(index => typeof paginationAccessibilityLabel === 'function' ? paginationAccessibilityLabel(index) : paginationAccessibilityLabel, [paginationAccessibilityLabel]);
   return /*#__PURE__*/_jsx(HStack, {
     className: cx(defaultPaginationCss, className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
+    "data-variant": variant,
     gap: 0.5,
     justifyContent: "center",
     style: _objectSpread(_objectSpread({}, style), styles === null || styles === void 0 ? void 0 : styles.root),
+    testID: testID,
     children: totalPages > 0 ? Array.from({
       length: totalPages
     }, (_, index) => isDot ? /*#__PURE__*/_jsx(PaginationDot, {
@@ -150,7 +155,7 @@ export const DefaultCarouselPagination = /*#__PURE__*/memo(function DefaultCarou
       testID: "".concat(testID, "-").concat(index)
     }, index) : /*#__PURE__*/_jsx(PaginationPill, {
       accessibilityLabel: getAccessibilityLabel(index),
-      className: cx(pillCss, classNames === null || classNames === void 0 ? void 0 : classNames.dot),
+      className: classNames === null || classNames === void 0 ? void 0 : classNames.dot,
       isActive: index === activePageIndex,
       onClick: () => onClickPage === null || onClickPage === void 0 ? void 0 : onClickPage(index),
       style: styles === null || styles === void 0 ? void 0 : styles.dot,
@@ -160,6 +165,7 @@ export const DefaultCarouselPagination = /*#__PURE__*/memo(function DefaultCarou
       "aria-hidden": "true",
       background: "bgLine",
       borderColor: "transparent",
+      borderWidth: 0,
       className: cx(isDot ? dotCss : pillCss, classNames === null || classNames === void 0 ? void 0 : classNames.dot),
       style: _objectSpread({
         opacity: 0,

package/esm/carousel/__figma__/Carousel.figma.js

@@ -23,7 +23,6 @@ figma.connect(Carousel, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2
     } = _ref;
     return /*#__PURE__*/_jsxs(Carousel, {
       hidePagination: hidePagination,
-      paginationVariant: "dot",
       title: title,
       children: [/*#__PURE__*/_jsx(CarouselItem, {
         id: "1"

package/esm/cells/Cell.js

@@ -1,4 +1,4 @@
-const _excluded = ["as", "accessory", "accessoryNode", "alignItems", "borderRadius", "children", "style", "styles", "classNames", "className", "contentClassName", "end", "detail", "detailWidth", "disabled", "gap", "columnGap", "rowGap", "intermediary", "media", "minHeight", "maxHeight", "onClick", "onKeyDown", "onKeyUp", "priority", "selected", "testID", "target", "href", "tabIndex", "shouldOverflow", "shouldTruncate", "accessibilityLabel", "accessibilityLabelledBy", "accessibilityHint", "innerSpacing", "outerSpacing", "bottomContent", "background"],
+const _excluded = ["as", "accessory", "accessoryNode", "alignItems", "bordered", "borderedBottom", "borderedEnd", "borderedHorizontal", "borderedStart", "borderedTop", "borderedVertical", "borderBottomLeftRadius", "borderBottomRightRadius", "borderBottomWidth", "borderColor", "borderEndWidth", "borderRadius", "borderStartWidth", "borderTopLeftRadius", "borderTopRightRadius", "borderTopWidth", "borderWidth", "children", "style", "styles", "classNames", "className", "contentClassName", "end", "detail", "detailWidth", "disabled", "gap", "columnGap", "rowGap", "intermediary", "media", "minHeight", "maxHeight", "onClick", "onKeyDown", "onKeyUp", "priority", "selected", "testID", "target", "href", "tabIndex", "shouldOverflow", "shouldTruncate", "accessibilityLabel", "accessibilityLabelledBy", "accessibilityHint", "innerSpacing", "outerSpacing", "bottomContent", "background"],
   _excluded2 = ["marginX"];
 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; }
@@ -34,7 +34,24 @@ export const Cell = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
       accessory,
       accessoryNode,
       alignItems = 'center',
+      bordered,
+      borderedBottom,
+      borderedEnd,
+      borderedHorizontal,
+      borderedStart,
+      borderedTop,
+      borderedVertical,
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
+      borderBottomWidth,
+      borderColor,
+      borderEndWidth,
       borderRadius = 200,
+      borderStartWidth,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderTopWidth,
+      borderWidth,
       children,
       style,
       styles,
@@ -94,12 +111,34 @@ export const Cell = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
   const isButton = Boolean((_ref = onClick !== null && onClick !== void 0 ? onClick : onKeyDown) !== null && _ref !== void 0 ? _ref : onKeyUp);
   const linkable = isAnchor || isButton;
   const contentTruncationStyle = cx(baseCss, shouldTruncate && truncationCss);
+  // Border props must be applied to the internal Pressable wrapper for correct visual rendering.
+  // The outer Box was only meant to create padding outside the Pressable area; this behavior
+  // will be removed in https://linear.app/coinbase/issue/CDS-1512/remove-legacy-normal-spacing-variant-from-listcell.
+  const borderProps = useMemo(() => ({
+    bordered,
+    borderedBottom,
+    borderedEnd,
+    borderedHorizontal,
+    borderedStart,
+    borderedTop,
+    borderedVertical,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    borderBottomWidth,
+    borderColor,
+    borderEndWidth,
+    borderRadius,
+    borderStartWidth,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderTopWidth,
+    borderWidth
+  }), [bordered, borderedBottom, borderedEnd, borderedHorizontal, borderedStart, borderedTop, borderedVertical, borderBottomLeftRadius, borderBottomRightRadius, borderBottomWidth, borderColor, borderEndWidth, borderRadius, borderStartWidth, borderTopLeftRadius, borderTopRightRadius, borderTopWidth, borderWidth]);
   const content = useMemo(() => {
     var _styles$end$width, _styles$end;
     // props for the entire inner container that wraps the top content
     // (media, children, intermediary, detail, accessory) and the bottom content
-    const contentContainerProps = _objectSpread(_objectSpread(_objectSpread({
-      borderRadius,
+    const contentContainerProps = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, borderProps), {}, {
       className: cx(contentClassName, classNames === null || classNames === void 0 ? void 0 : classNames.contentContainer),
       testID
     }, selected ? {
@@ -178,16 +217,16 @@ export const Cell = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
         children: bottom
       })]
     }));
-  }, [borderRadius, contentClassName, classNames === null || classNames === void 0 ? void 0 : classNames.contentContainer, classNames === null || classNames === void 0 ? void 0 : classNames.topContent, classNames === null || classNames === void 0 ? void 0 : classNames.media, classNames === null || classNames === void 0 ? void 0 : classNames.childrenContainer, classNames === null || classNames === void 0 ? void 0 : classNames.intermediary, classNames === null || classNames === void 0 ? void 0 : classNames.end, classNames === null || classNames === void 0 ? void 0 : classNames.accessory, classNames === null || classNames === void 0 ? void 0 : classNames.bottomContent, testID, selected, background, linkable, innerSpacingWithoutMarginX, innerSpacing, styles === null || styles === void 0 ? void 0 : styles.contentContainer, styles === null || styles === void 0 ? void 0 : styles.topContent, styles === null || styles === void 0 ? void 0 : styles.media, styles === null || styles === void 0 ? void 0 : styles.childrenContainer, styles === null || styles === void 0 ? void 0 : styles.intermediary, styles === null || styles === void 0 ? void 0 : styles.end, styles === null || styles === void 0 ? void 0 : styles.accessory, styles === null || styles === void 0 ? void 0 : styles.bottomContent, alignItems, columnGap, gap, media, contentTruncationStyle, priority, children, intermediary, end, detail, detailWidth, accessory, accessoryNode, bottom, rowGap]);
+  }, [borderProps, contentClassName, classNames === null || classNames === void 0 ? void 0 : classNames.contentContainer, classNames === null || classNames === void 0 ? void 0 : classNames.topContent, classNames === null || classNames === void 0 ? void 0 : classNames.media, classNames === null || classNames === void 0 ? void 0 : classNames.childrenContainer, classNames === null || classNames === void 0 ? void 0 : classNames.intermediary, classNames === null || classNames === void 0 ? void 0 : classNames.end, classNames === null || classNames === void 0 ? void 0 : classNames.accessory, classNames === null || classNames === void 0 ? void 0 : classNames.bottomContent, testID, selected, background, linkable, innerSpacingWithoutMarginX, innerSpacing, styles === null || styles === void 0 ? void 0 : styles.contentContainer, styles === null || styles === void 0 ? void 0 : styles.topContent, styles === null || styles === void 0 ? void 0 : styles.media, styles === null || styles === void 0 ? void 0 : styles.childrenContainer, styles === null || styles === void 0 ? void 0 : styles.intermediary, styles === null || styles === void 0 ? void 0 : styles.end, styles === null || styles === void 0 ? void 0 : styles.accessory, styles === null || styles === void 0 ? void 0 : styles.bottomContent, alignItems, columnGap, gap, media, contentTruncationStyle, priority, children, intermediary, end, detail, detailWidth, accessory, accessoryNode, bottom, rowGap]);
   const pressableWrappedContent = useMemo(() => {
-    const pressableSharedProps = {
+    const pressableSharedProps = _objectSpread(_objectSpread({
       noScaleOnPress: true,
       transparentWhileInactive: true,
       accessibilityHint,
       accessibilityLabel,
       accessibilityLabelledBy,
-      background: 'bg',
-      borderRadius,
+      background: 'bg'
+    }, borderProps), {}, {
       className: cx(pressCss, insetFocusRingCss, classNames === null || classNames === void 0 ? void 0 : classNames.pressable),
       disabled,
       marginX: innerSpacingMarginX,
@@ -197,7 +236,7 @@ export const Cell = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
       tabIndex,
       testID: testID && "".concat(testID, "-cell-pressable"),
       style: styles === null || styles === void 0 ? void 0 : styles.pressable
-    };
+    });
     if (isAnchor) return /*#__PURE__*/_jsx(Pressable, _objectSpread(_objectSpread({
       as: "a",
       href: href,
@@ -211,7 +250,7 @@ export const Cell = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
       children: content
     }));
     return content;
-  }, [accessibilityHint, accessibilityLabel, accessibilityLabelledBy, borderRadius, classNames === null || classNames === void 0 ? void 0 : classNames.pressable, disabled, innerSpacingMarginX, onClick, onKeyDown, onKeyUp, tabIndex, testID, styles === null || styles === void 0 ? void 0 : styles.pressable, isAnchor, href, target, content, isButton]);
+  }, [accessibilityHint, accessibilityLabel, accessibilityLabelledBy, borderProps, classNames === null || classNames === void 0 ? void 0 : classNames.pressable, disabled, innerSpacingMarginX, onClick, onKeyDown, onKeyUp, tabIndex, testID, styles === null || styles === void 0 ? void 0 : styles.pressable, isAnchor, href, target, content, isButton]);
   return /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread(_objectSpread({
     ref: ref,
     alignItems: "stretch",

package/esm/cells/CellAccessory.js

@@ -53,9 +53,10 @@ export const CellAccessory = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function
   if (!icon) {
     return null;
   }
-  return /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({
     ref: ref,
-    testID: cellAccessoryTestId,
+    testID: cellAccessoryTestId
+  }, props), {}, {
     children: icon
   }));
 }));

package/esm/cells/ContentCellFallback.js

@@ -17,6 +17,11 @@ const floatStyle = {
   float: 'right',
   width: '30%'
 };
+
+/**
+ * @deprecated Use `ListCellFallback` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const ContentCellFallback = /*#__PURE__*/memo(function ContentCellFallback(_ref) {
   let {
     accessory,

package/esm/cells/ListCell.js

@@ -1,4 +1,4 @@
-const _excluded = ["as", "accessory", "accessoryNode", "end", "action", "compact", "title", "titleNode", "description", "descriptionNode", "detailNode", "detail", "disabled", "disableMultilineTitle", "disableSelectionAccessory", "helperText", "media", "multiline", "selected", "subdetailNode", "subdetail", "variant", "intermediary", "priority", "innerSpacing", "outerSpacing", "spacingVariant", "className", "classNames", "styles", "style", "subtitle", "subtitleNode"];
+const _excluded = ["as", "accessory", "accessoryNode", "end", "action", "compact", "title", "titleNode", "description", "descriptionNode", "detailNode", "detail", "disabled", "disableMultilineTitle", "disableSelectionAccessory", "helperText", "media", "multiline", "selected", "subdetailNode", "subdetail", "variant", "intermediary", "priority", "innerSpacing", "outerSpacing", "spacingVariant", "className", "classNames", "styles", "style", "subtitle", "subtitleNode", "minHeight"];
 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; }
@@ -25,6 +25,7 @@ export const condensedInnerSpacing = {
   paddingY: 1,
   marginX: 0
 };
+
 // no padding outside of the pressable area
 export const condensedOuterSpacing = {
   paddingX: 0,
@@ -67,11 +68,15 @@ export const ListCell = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref)
       styles,
       style,
       subtitle,
-      subtitleNode
+      subtitleNode,
+      minHeight: minHeightProp
     } = mergedProps,
     props = _objectWithoutProperties(mergedProps, _excluded);
   const Component = as !== null && as !== void 0 ? as : listCellDefaultElement;
-  const minHeight = spacingVariant === 'compact' ? compactListHeight : spacingVariant === 'normal' ? listHeight : undefined;
+
+  // we need to maintain fixed min-heights for the different cell style variants until they are dropped in a breaking change
+  // see CDS-1620
+  const minHeight = minHeightProp !== null && minHeightProp !== void 0 ? minHeightProp : spacingVariant === 'compact' ? compactListHeight : spacingVariant === 'normal' ? listHeight : undefined;
   const accessoryType = selected && !disableSelectionAccessory ? 'selected' : accessory;
   const end = useMemo(() => {
     if (endProp) {

package/esm/cells/MediaFallback.js

@@ -6,7 +6,7 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 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 } from 'react';
+import { memo } from 'react';
 import { imageSize, mediaSize } from '@coinbase/cds-common/tokens/cell';
 import { Fallback } from '../layout/Fallback';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -16,15 +16,15 @@ export const MediaFallback = /*#__PURE__*/memo(function MediaFallback(_ref) {
     } = _ref,
     fallbackProps = _objectWithoutProperties(_ref, _excluded);
   if (type === 'image') {
-    return /*#__PURE__*/_jsx(Fallback, _objectSpread(_objectSpread({}, fallbackProps), {}, {
+    return /*#__PURE__*/_jsx(Fallback, _objectSpread({
       height: imageSize,
       shape: "squircle",
       width: imageSize
-    }));
+    }, fallbackProps));
   }
-  return /*#__PURE__*/_jsx(Fallback, _objectSpread(_objectSpread({}, fallbackProps), {}, {
+  return /*#__PURE__*/_jsx(Fallback, _objectSpread({
     height: mediaSize,
     shape: "circle",
     width: mediaSize
-  }));
+  }, fallbackProps));
 });

package/esm/coachmark/Coachmark.js

@@ -28,14 +28,15 @@ export const Coachmark = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref)
     } = mergedProps,
     props = _objectWithoutProperties(mergedProps, _excluded);
   return /*#__PURE__*/_jsx(InvertedThemeProvider, {
-    children: /*#__PURE__*/_jsxs(VStack, _objectSpread(_objectSpread({}, props), {}, {
+    children: /*#__PURE__*/_jsxs(VStack, _objectSpread(_objectSpread({
       ref: ref,
       borderRadius: 400,
       maxWidth: 400,
       overflow: "hidden",
       position: "relative",
       testID: testID,
-      width: width,
+      width: width
+    }, props), {}, {
       children: [media, !!onClose && /*#__PURE__*/_jsx(Box, {
         alignSelf: "flex-start",
         padding: 1,

package/esm/collapsible/Collapsible.js

@@ -75,29 +75,34 @@ export const Collapsible = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, fo
       visibility
     });
   }, [visibility, motionStyle]);
-  return /*#__PURE__*/_jsx(motion.div, _objectSpread(_objectSpread({}, motionProps), {}, {
-    ref: forwardedRef,
-    "aria-labelledby": accessibilityLabelledBy,
-    className: COMPONENT_STATIC_CLASSNAME,
-    "data-testid": testID,
-    id: id,
-    onAnimationComplete: handleAnimationComplete,
-    role: role,
-    style: style,
-    children: /*#__PURE__*/_jsx(Box, {
-      display: "block",
-      paddingTop: paddingTop,
-      children: /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({
-        overflow: maxWidth || maxHeight ? 'auto' : undefined
-      }, sizeProps), {}, {
-        padding: padding,
-        paddingBottom: paddingBottom,
-        paddingEnd: paddingEnd,
-        paddingStart: paddingStart,
-        paddingX: paddingX,
-        paddingY: paddingY,
-        children: children
-      }))
-    })
-  }));
+  return (
+    /*#__PURE__*/
+    // TODO: Remove type assertion after upgrading framer-motion to v11+ for React 19 compatibility
+    _jsx(motion.div, _objectSpread(_objectSpread({}, _objectSpread(_objectSpread({}, motionProps), {}, {
+      ref: forwardedRef,
+      'aria-labelledby': accessibilityLabelledBy,
+      className: COMPONENT_STATIC_CLASSNAME,
+      'data-testid': testID,
+      id: id,
+      onAnimationComplete: handleAnimationComplete,
+      role: role,
+      style: style
+    })), {}, {
+      children: /*#__PURE__*/_jsx(Box, {
+        display: "block",
+        paddingTop: paddingTop,
+        children: /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({
+          overflow: maxWidth || maxHeight ? 'auto' : undefined
+        }, sizeProps), {}, {
+          padding: padding,
+          paddingBottom: paddingBottom,
+          paddingEnd: paddingEnd,
+          paddingStart: paddingStart,
+          paddingX: paddingX,
+          paddingY: paddingY,
+          children: children
+        }))
+      })
+    }))
+  );
 }));

package/esm/controls/CheckboxGroup.js

@@ -14,32 +14,6 @@ import { Checkbox } from './Checkbox';
 import { ControlGroup } from './ControlGroup';
 import { jsx as _jsx } from "react/jsx-runtime";
 const checkboxCss = "checkboxCss-cmjsxse";
-
-/**
- * @deprecated CheckboxGroup is deprecated. Use ControlGroup with role="group" instead. This will be removed in a future major release.
- * @deprecationExpectedRemoval v8
- *
- * @example
- * // Instead of:
- * <CheckboxGroup selectedValues={new Set(['value1'])} onChange={onChange}>
- *   <Checkbox value="value1">Option 1</Checkbox>
- * </CheckboxGroup>
- *
- * // Use:
- * <ControlGroup
- *   role="group"
- *   ControlComponent={Checkbox}
- *   options={[{ value: 'value1', children: 'Option 1' }]}
- *   value={['value1']}
- *   onChange={onChange}xw
- * />
- */
-
-/**
- * @deprecated CheckboxGroup is deprecated. Use ControlGroup with role="group" instead. This will be removed in a future major release.
- * @deprecationExpectedRemoval v8
- */
-
 // Follows behavior describe in https://www.w3.org/TR/wai-aria-practices/examples/checkbox/checkbox-2/checkbox-2.html
 const CheckboxGroupWithRef = /*#__PURE__*/forwardRef(function CheckboxGroupWithRef(_ref, ref) {
   let {