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

package/esm/banner/Banner.js

@@ -1,4 +1,4 @@
-const _excluded = ["variant", "startIcon", "startIconActive", "onClose", "primaryAction", "secondaryAction", "title", "children", "showDismiss", "testID", "style", "className", "numberOfLines", "label", "styleVariant", "startIconAccessibilityLabel", "closeAccessibilityLabel", "borderRadius", "margin", "marginY", "marginX", "marginTop", "marginBottom", "marginStart", "marginEnd", "width"];
+const _excluded = ["variant", "startIcon", "startIconActive", "onClose", "primaryAction", "secondaryAction", "title", "children", "showDismiss", "testID", "style", "className", "numberOfLines", "label", "styleVariant", "startIconAccessibilityLabel", "closeAccessibilityLabel", "borderRadius", "margin", "marginY", "marginX", "marginTop", "marginBottom", "marginStart", "marginEnd", "width", "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; }
@@ -9,6 +9,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { forwardRef, isValidElement, memo, useCallback, useId, useMemo, useState } from 'react';
 import { bannerMinWidth, variants } from '@coinbase/cds-common/tokens/banner';
 import { Collapsible } from '../collapsible';
+import { cx } from '../cx';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Icon } from '../icons/Icon';
 import { Box, HStack, VStack } from '../layout';
@@ -22,6 +23,29 @@ export const contentResponsiveConfig = {
   tablet: 'row',
   desktop: 'row'
 };
+
+/**
+ * Static class names for Banner component parts.
+ * Use these selectors to target specific elements with CSS.
+ */
+export const bannerClassNames = {
+  /** Persistent outer wrapper around both dismissible and non-dismissible variants. */
+  root: 'cds-Banner',
+  /** Main content container (`HStack`) for banner body. */
+  content: 'cds-Banner-content',
+  /** Start icon wrapper. */
+  start: 'cds-Banner-start',
+  /** Right-side body wrapper containing middle content and actions. */
+  body: 'cds-Banner-body',
+  /** Middle content wrapper containing title/message/label region. */
+  middle: 'cds-Banner-middle',
+  /** Label text element. */
+  label: 'cds-Banner-label',
+  /** Actions row element. */
+  actions: 'cds-Banner-actions',
+  /** Dismiss button wrapper element. */
+  dismiss: 'cds-Banner-dismiss'
+};
 export const Banner = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
   const mergedProps = useComponentConfig('Banner', _props);
   const {
@@ -50,7 +74,9 @@ export const Banner = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
       marginBottom,
       marginStart,
       marginEnd,
-      width = '100%'
+      width = '100%',
+      classNames,
+      styles
     } = mergedProps,
     props = _objectWithoutProperties(mergedProps, _excluded);
   const [isCollapsed, setIsCollapsed] = useState(false);
@@ -115,103 +141,110 @@ export const Banner = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
     pin: "left",
     width: 4
   }), [borderColor]);
-  const content = /*#__PURE__*/_jsxs(Box, _objectSpread(_objectSpread({
-    position: "relative",
-    width: width
-  }, !showDismiss && marginStyles), {}, {
-    height: "fit-content",
-    children: [/*#__PURE__*/_jsxs(HStack, _objectSpread(_objectSpread({
-      ref: ref,
-      background: background,
-      borderRadius: borderRadius,
-      className: className,
+  const content = /*#__PURE__*/_jsxs(HStack, _objectSpread(_objectSpread({
+    ref: ref,
+    background: background,
+    borderRadius: borderRadius,
+    className: cx(bannerClassNames.content, className, classNames === null || classNames === void 0 ? void 0 : classNames.content),
+    flexGrow: 1,
+    gap: 1,
+    minWidth: bannerMinWidth,
+    paddingX: styleVariant === 'contextual' ? 2 : 3,
+    paddingY: 2,
+    style: _objectSpread(_objectSpread({}, style), styles === null || styles === void 0 ? void 0 : styles.content),
+    testID: testID
+  }, props), {}, {
+    children: [/*#__PURE__*/_jsx(Box, {
+      className: cx(bannerClassNames.start, classNames === null || classNames === void 0 ? void 0 : classNames.start),
+      paddingX: 0.5,
+      paddingY: 0.25,
+      style: styles === null || styles === void 0 ? void 0 : styles.start,
+      children: /*#__PURE__*/_jsx(Icon, {
+        accessibilityLabel: startIconAccessibilityLabel,
+        active: startIconActive,
+        color: iconColor,
+        name: startIcon,
+        size: "s",
+        testID: "".concat(testID, "-icon")
+      })
+    }), /*#__PURE__*/_jsxs(VStack, {
+      className: cx(bannerClassNames.body, classNames === null || classNames === void 0 ? void 0 : classNames.body),
+      flexDirection: contentResponsiveConfig,
       flexGrow: 1,
-      gap: 1,
-      minWidth: bannerMinWidth,
-      paddingX: styleVariant === 'contextual' ? 2 : 3,
-      paddingY: 2,
-      style: style,
-      testID: testID
-    }, props), {}, {
-      children: [/*#__PURE__*/_jsx(Box, {
-        paddingX: 0.5,
-        paddingY: 0.25,
-        children: /*#__PURE__*/_jsx(Icon, {
-          accessibilityLabel: startIconAccessibilityLabel,
-          active: startIconActive,
-          color: iconColor,
-          name: startIcon,
-          size: "s",
-          testID: "".concat(testID, "-icon")
-        })
-      }), /*#__PURE__*/_jsxs(VStack, {
-        flexDirection: contentResponsiveConfig,
-        flexGrow: 1,
+      gap: 2,
+      justifyContent: "space-between",
+      style: styles === null || styles === void 0 ? void 0 : styles.body,
+      testID: "".concat(testID, "-inner-end-box"),
+      children: [/*#__PURE__*/_jsxs(VStack, {
+        className: cx(bannerClassNames.middle, classNames === null || classNames === void 0 ? void 0 : classNames.middle),
         gap: 2,
-        justifyContent: "space-between",
-        testID: "".concat(testID, "-inner-end-box"),
+        style: styles === null || styles === void 0 ? void 0 : styles.middle,
+        testID: "".concat(testID, "-content-box"),
         children: [/*#__PURE__*/_jsxs(VStack, {
-          gap: 2,
-          testID: "".concat(testID, "-content-box"),
-          children: [/*#__PURE__*/_jsxs(VStack, {
-            gap: 0.5,
-            children: [typeof title === 'string' ? /*#__PURE__*/_jsx(Text, {
-              color: textColor,
-              font: "label1",
-              id: titleId,
-              numberOfLines: 2,
-              children: title
-            }) : title, typeof children === 'string' ? /*#__PURE__*/_jsx(Text, {
-              color: textColor,
-              font: "label2",
-              numberOfLines: numberOfLines,
-              children: children
-            }) : children]
-          }), typeof label === 'string' ? /*#__PURE__*/_jsx(Text, {
-            color: "fgMuted",
-            font: "legal",
+          gap: 0.5,
+          children: [typeof title === 'string' ? /*#__PURE__*/_jsx(Text, {
+            color: textColor,
+            font: "label1",
+            id: titleId,
             numberOfLines: 2,
-            children: label
-          }) : label]
-        }), (!!clonedPrimaryAction || !!clonedSecondaryAction) && /*#__PURE__*/_jsxs(HStack, {
-          alignItems: "center",
-          className: actionContainerCss,
-          gap: 2,
-          testID: "".concat(testID, "-action"),
-          children: [clonedPrimaryAction, clonedSecondaryAction]
-        })]
-      }), showDismiss && /*#__PURE__*/_jsx(Box, {
-        alignItems: "flex-start",
-        padding: 0.5,
-        children: /*#__PURE__*/_jsx(Pressable, {
-          accessibilityLabel: closeAccessibilityLabel,
-          background: "transparent",
-          borderRadius: 1000,
-          onClick: handleOnDismiss,
-          role: "button",
-          testID: "".concat(testID, "-dismiss-btn"),
-          children: /*#__PURE__*/_jsx(Icon, {
-            color: iconButtonColor,
-            name: "close",
-            size: "s"
-          })
-        })
+            children: title
+          }) : title, typeof children === 'string' ? /*#__PURE__*/_jsx(Text, {
+            color: textColor,
+            font: "label2",
+            numberOfLines: numberOfLines,
+            children: children
+          }) : children]
+        }), typeof label === 'string' ? /*#__PURE__*/_jsx(Text, {
+          className: cx(bannerClassNames.label, classNames === null || classNames === void 0 ? void 0 : classNames.label),
+          color: "fgMuted",
+          font: "legal",
+          numberOfLines: 2,
+          style: styles === null || styles === void 0 ? void 0 : styles.label,
+          children: label
+        }) : label]
+      }), (!!clonedPrimaryAction || !!clonedSecondaryAction) && /*#__PURE__*/_jsxs(HStack, {
+        alignItems: "center",
+        className: cx(actionContainerCss, bannerClassNames.actions, classNames === null || classNames === void 0 ? void 0 : classNames.actions),
+        gap: 2,
+        style: styles === null || styles === void 0 ? void 0 : styles.actions,
+        testID: "".concat(testID, "-action"),
+        children: [clonedPrimaryAction, clonedSecondaryAction]
       })]
-    })), styleVariant === 'global' && !showDismiss && borderBox]
+    }), showDismiss && /*#__PURE__*/_jsx(Box, {
+      alignItems: "flex-start",
+      className: cx(bannerClassNames.dismiss, classNames === null || classNames === void 0 ? void 0 : classNames.dismiss),
+      padding: 0.5,
+      style: styles === null || styles === void 0 ? void 0 : styles.dismiss,
+      children: /*#__PURE__*/_jsx(Pressable, {
+        accessibilityLabel: closeAccessibilityLabel,
+        background: "transparent",
+        borderRadius: 1000,
+        onClick: handleOnDismiss,
+        role: "button",
+        testID: "".concat(testID, "-dismiss-btn"),
+        children: /*#__PURE__*/_jsx(Icon, {
+          color: iconButtonColor,
+          name: "close",
+          size: "s"
+        })
+      })
+    })]
   }));
-  return showDismiss ? /*#__PURE__*/_jsxs(Box, _objectSpread(_objectSpread({
+  return /*#__PURE__*/_jsxs(Box, _objectSpread(_objectSpread({
+    className: cx(bannerClassNames.root, classNames === null || classNames === void 0 ? void 0 : classNames.root),
     display: "block",
     height: "fit-content",
-    position: "relative",
-    width: width
+    position: "relative"
   }, marginStyles), {}, {
-    children: [/*#__PURE__*/_jsx(Collapsible, {
+    style: styles === null || styles === void 0 ? void 0 : styles.root,
+    width: width,
+    children: [showDismiss ? /*#__PURE__*/_jsx(Collapsible, {
       accessibilityLabelledBy: accessibilityLabelledBy,
       collapsed: isCollapsed,
       id: "".concat(titleId, "--controller"),
       testID: "".concat(testID, "-collapsible"),
       children: content
-    }), styleVariant === 'global' && borderBox]
-  })) : content;
+    }) : content, styleVariant === 'global' && borderBox]
+  }));
 }));
 import "./Banner.css";

package/esm/buttons/AvatarButton.css

@@ -1 +1 @@
-@layer cds{.baseCss-b7ikz6y{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:var(--interactable-height);height:var(--interactable-height);min-width:unset;}}
+@layer cds{.baseCss-b7ikz6y{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;min-width:unset;}}

package/esm/buttons/AvatarButton.js

@@ -1,4 +1,4 @@
-const _excluded = ["accessibilityLabel", "as", "className", "alt", "src", "compact", "colorScheme", "shape", "selected", "name"];
+const _excluded = ["accessibilityLabel", "as", "className", "alt", "src", "compact", "colorScheme", "shape", "borderColor", "selected", "name"];
 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,8 +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, { forwardRef, memo, useMemo } from 'react';
-import { interactableHeight } from '@coinbase/cds-common/tokens/interactableHeight';
+import React, { forwardRef, memo } from 'react';
 import { cx } from '../cx';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Avatar } from '../media';
@@ -26,30 +25,29 @@ export const AvatarButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, r
       compact,
       colorScheme,
       shape,
+      borderColor,
       selected,
       name
     } = mergedProps,
     props = _objectWithoutProperties(mergedProps, _excluded);
   const Component = as !== null && as !== void 0 ? as : avatarButtonDefaultElement;
-  const height = compact ? interactableHeight.compact : interactableHeight.regular;
-  const styles = useMemo(() => ({
-    '--interactable-height': "".concat(height, "px")
-  }), [height]);
   return /*#__PURE__*/_jsx(Pressable, _objectSpread(_objectSpread({
     ref: ref,
     "aria-label": accessibilityLabel,
     as: Component,
     background: "transparent",
-    className: cx(baseCss, className),
-    style: styles
+    borderWidth: 0 // remove Pressable's default transparent border
+    ,
+    className: cx(baseCss, className)
   }, props), {}, {
     children: /*#__PURE__*/_jsx(Avatar, {
       alt: alt,
+      borderColor: borderColor,
       colorScheme: colorScheme,
-      dangerouslySetSize: height,
       name: name,
       selected: selected,
       shape: shape,
+      size: compact ? 'xl' : 'xxxl',
       src: src
     })
   }));

package/esm/buttons/Button.css

@@ -7,6 +7,4 @@
 .unsetNoWrapCss-u148mgtl{white-space:unset;}
 .hiddenCss-h1pxicn8{visibility:hidden;}
 .middleNodeCss-m1avpq52{position:relative;}
-.flushSpaceCss-f69rtgb{min-width:unset;margin-inline-start:var(--space-2);margin-inline-end:var(--space-2);}
-.flushStartCss-f1aod6bi{margin-inline-start:calc(var(--space-2) * -1);}
-.flushEndCss-fz9snbo{margin-inline-end:calc(var(--space-2) * -1);}}
+.flushCss-f69rtgb{min-width:unset;}}

package/esm/buttons/Button.js

@@ -1,4 +1,4 @@
-const _excluded = ["as", "variant", "loading", "progressCircleSize", "transparent", "block", "compact", "children", "start", "startIcon", "startIconActive", "end", "endIcon", "endIconActive", "flush", "noScaleOnPress", "numberOfLines", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight", "background", "color", "className", "height", "borderColor", "borderWidth", "borderRadius", "accessibilityLabel", "padding", "paddingX", "margin", "minWidth"];
+const _excluded = ["as", "variant", "loading", "progressCircleSize", "transparent", "block", "compact", "children", "start", "startIcon", "startIconActive", "end", "endIcon", "endIconActive", "flush", "noScaleOnPress", "numberOfLines", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight", "background", "color", "className", "borderColor", "borderWidth", "borderRadius", "accessibilityLabel", "padding", "paddingX", "paddingY", "margin", "minWidth", "style"];
 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,18 @@ 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 } from 'react';
+import React, { forwardRef, memo, useMemo } from 'react';
 import { transparentVariants, variants } from '@coinbase/cds-common/tokens/button';
 import { cx } from '../cx';
 import { useComponentConfig } from '../hooks/useComponentConfig';
+import { useResolveResponsiveProp } from '../hooks/useResolveResponsiveProp';
+import { useTheme } from '../hooks/useTheme';
 import { Icon } from '../icons/Icon';
 import { Pressable } from '../system/Pressable';
 import { Text } from '../typography/Text';
 import { ProgressCircle } from '../visualizations';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const COMPONENT_STATIC_CLASSNAME = 'cds-Button';
-const DEFAULT_MIN_WIDTH = 100;
 
 /** @deprecated Use progressCircleSize instead. This will be removed in a future major release.
  * @deprecationExpectedRemoval v10
@@ -32,9 +33,7 @@ const iconCss = "iconCss-ixznik7";
 const unsetNoWrapCss = "unsetNoWrapCss-u148mgtl";
 const hiddenCss = "hiddenCss-h1pxicn8";
 const middleNodeCss = "middleNodeCss-m1avpq52";
-const flushSpaceCss = "flushSpaceCss-f69rtgb";
-const flushStartCss = "flushStartCss-f1aod6bi";
-const flushEndCss = "flushEndCss-fz9snbo";
+const flushCss = "flushCss-f69rtgb";
 export const buttonDefaultElement = 'button';
 export const Button = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
   const mergedProps = useComponentConfig('Button', _props);
@@ -64,18 +63,20 @@ export const Button = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
       background,
       color,
       className,
-      // TO DO: get rid of this height and interactableHeight (mobile and web both)
-      height = compact ? 40 : 56,
       borderColor,
-      borderWidth = 100,
+      borderWidth = 0,
+      // remove Pressable's default transparent border
       borderRadius = compact ? 700 : 900,
       accessibilityLabel,
       padding,
       paddingX = padding !== null && padding !== void 0 ? padding : compact ? 2 : 4,
+      paddingY = padding !== null && padding !== void 0 ? padding : compact ? 1 : 2,
       margin = 0,
-      minWidth = compact ? 'auto' : DEFAULT_MIN_WIDTH
+      minWidth = 'auto',
+      style
     } = mergedProps,
     props = _objectWithoutProperties(mergedProps, _excluded);
+  const theme = useTheme();
   const Component = as !== null && as !== void 0 ? as : buttonDefaultElement;
   const iconSize = compact ? 's' : 'm';
   const hasIcon = Boolean(startIcon !== null && startIcon !== void 0 ? startIcon : endIcon);
@@ -84,6 +85,18 @@ export const Button = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
   const colorValue = color !== null && color !== void 0 ? color : variantStyle.color;
   const backgroundValue = background !== null && background !== void 0 ? background : variantStyle.background;
   const borderColorValue = borderColor !== null && borderColor !== void 0 ? borderColor : variantStyle.borderColor;
+  const resolvedPaddingX = useResolveResponsiveProp(paddingX);
+  const pressableStyle = useMemo(() => {
+    if (!flush || !resolvedPaddingX) return style;
+    const paddingPx = theme.space[resolvedPaddingX];
+    return _objectSpread(_objectSpread({}, style), flush === 'start' ? {
+      marginInlineStart: -paddingPx,
+      marginInlineEnd: paddingPx
+    } : {
+      marginInlineStart: paddingPx,
+      marginInlineEnd: -paddingPx
+    });
+  }, [flush, resolvedPaddingX, theme.space, style]);
   return /*#__PURE__*/_jsxs(Pressable, _objectSpread(_objectSpread({
     ref: ref,
     "aria-label": accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : loading ? 'Loading' : undefined,
@@ -92,20 +105,21 @@ export const Button = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
     borderColor: borderColorValue,
     borderRadius: borderRadius,
     borderWidth: borderWidth,
-    className: cx(COMPONENT_STATIC_CLASSNAME, baseCss, numberOfLines && unsetNoWrapCss, hasIcon && iconCss, block && blockCss, flush && flushSpaceCss, flush === 'start' && flushStartCss, flush === 'end' && flushEndCss, className),
+    className: cx(COMPONENT_STATIC_CLASSNAME, baseCss, numberOfLines && unsetNoWrapCss, hasIcon && iconCss, block && blockCss, flush && flushCss, className),
     color: colorValue,
     "data-block": block,
     "data-compact": compact,
     "data-flush": flush,
     "data-transparent": transparent,
     "data-variant": variant,
-    height: height,
     loading: loading,
     margin: margin,
     minWidth: minWidth,
     noScaleOnPress: noScaleOnPress,
     padding: padding,
     paddingX: paddingX,
+    paddingY: paddingY,
+    style: pressableStyle,
     transparentWhileInactive: transparent
   }, props), {}, {
     children: [start ? /*#__PURE__*/_jsx("span", {

package/esm/buttons/IconButton.css

@@ -1,3 +1 @@
-@layer cds{.flushSpaceCss-f1po8mo6{min-width:unset;padding-inline-start:var(--space-2);padding-inline-end:var(--space-2);}
-.flushStartCss-fqg7x6g{margin-inline-start:calc(var(--space-2) * -1);}
-.flushEndCss-f18p387c{margin-inline-end:calc(var(--space-2) * -1);}}
+@layer cds{.baseCss-b1po8mo6{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;}}

package/esm/buttons/IconButton.js

@@ -1,4 +1,4 @@
-const _excluded = ["as", "variant", "transparent", "compact", "background", "color", "borderColor", "borderRadius", "borderWidth", "alignItems", "justifyContent", "height", "width", "className", "name", "iconSize", "active", "flush", "loading", "progressCircleSize", "accessibilityLabel", "accessibilityHint"];
+const _excluded = ["as", "variant", "transparent", "compact", "background", "color", "borderColor", "borderRadius", "borderWidth", "alignItems", "justifyContent", "className", "style", "padding", "name", "iconSize", "active", "flush", "loading", "progressCircleSize", "accessibilityLabel", "accessibilityHint"];
 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,11 @@ 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 } from 'react';
+import React, { forwardRef, memo, useMemo } from 'react';
 import { transparentVariants, variants } from '@coinbase/cds-common/tokens/button';
 import { cx } from '../cx';
 import { useComponentConfig } from '../hooks/useComponentConfig';
+import { useResolveResponsiveProp } from '../hooks/useResolveResponsiveProp';
 import { useTheme } from '../hooks/useTheme';
 import { Icon } from '../icons/Icon';
 import { Pressable } from '../system/Pressable';
@@ -17,9 +18,7 @@ import { ProgressCircle } from '../visualizations/ProgressCircle';
 import { jsx as _jsx } from "react/jsx-runtime";
 const COMPONENT_STATIC_CLASSNAME = 'cds-IconButton';
 export const iconButtonDefaultElement = 'button';
-const flushSpaceCss = "flushSpaceCss-f1po8mo6";
-const flushStartCss = "flushStartCss-fqg7x6g";
-const flushEndCss = "flushEndCss-f18p387c";
+const baseCss = "baseCss-b1po8mo6";
 export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
   const mergedProps = useComponentConfig('IconButton', _props);
   const {
@@ -31,13 +30,13 @@ export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref
       color,
       borderColor,
       borderRadius = 1000,
-      borderWidth = 100,
+      borderWidth = 0,
+      // remove Pressable's default transparent border
       alignItems = 'center',
       justifyContent = 'center',
-      // TO DO: fix this when removing interactableHeight
-      height = compact ? 40 : 56,
-      width = compact ? 40 : 56,
       className,
+      style,
+      padding = compact ? 1.5 : 2,
       name,
       iconSize = compact ? 's' : 'm',
       active,
@@ -51,6 +50,17 @@ export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref
   const Component = as !== null && as !== void 0 ? as : iconButtonDefaultElement;
   const theme = useTheme();
   const iconSizeValue = theme.iconSize[iconSize];
+  const spinnerSize = iconSizeValue / 10;
+  const resolvedPadding = useResolveResponsiveProp(padding);
+  const pressableStyle = useMemo(() => {
+    if (!flush || !resolvedPadding) return undefined;
+    const negativeMargin = -theme.space[resolvedPadding];
+    return _objectSpread(_objectSpread({}, style), flush === 'start' ? {
+      marginInlineStart: negativeMargin
+    } : {
+      marginInlineEnd: negativeMargin
+    });
+  }, [flush, resolvedPadding, theme.space, style]);
   const variantMap = transparent ? transparentVariants : variants;
   const variantStyle = variantMap[variant];
   const colorValue = color !== null && color !== void 0 ? color : variantStyle.color;
@@ -66,17 +76,17 @@ export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref
     borderColor: borderColorValue,
     borderRadius: borderRadius,
     borderWidth: borderWidth,
-    className: cx(COMPONENT_STATIC_CLASSNAME, flush && flushSpaceCss, flush === 'start' && flushStartCss, flush === 'end' && flushEndCss, className),
+    className: cx(COMPONENT_STATIC_CLASSNAME, baseCss, className),
     color: colorValue,
     "data-compact": compact,
     "data-flush": flush,
     "data-transparent": transparent,
     "data-variant": variant,
-    height: height,
     justifyContent: justifyContent,
     loading: loading,
-    transparentWhileInactive: transparent,
-    width: width
+    padding: padding,
+    style: pressableStyle,
+    transparentWhileInactive: transparent
   }, props), {}, {
     children: loading ? /*#__PURE__*/_jsx(ProgressCircle, {
       indeterminate: true,

package/esm/buttons/IconCounterButton.js

@@ -1,4 +1,4 @@
-const _excluded = ["icon", "iconSize", "size", "active", "count", "color", "dangerouslySetColor", "background"];
+const _excluded = ["icon", "size", "active", "count", "color", "dangerouslySetColor", "background", "styles", "classNames", "className", "style"];
 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; }
@@ -8,6 +8,7 @@ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { forwardRef, memo } from 'react';
 import { formatCount } from '@coinbase/cds-common/utils/formatCount';
+import { cx } from '../cx';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Icon } from '../icons/Icon';
 import { HStack } from '../layout/HStack';
@@ -18,28 +19,35 @@ export const IconCounterButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(funct
   const mergedProps = useComponentConfig('IconCounterButton', _props);
   const {
       icon,
-      iconSize = 's',
-      size = iconSize,
+      size = 's',
       active,
       count = 0,
       color = 'fg',
       dangerouslySetColor,
-      background = 'transparent'
+      background = 'transparent',
+      styles,
+      classNames,
+      className,
+      style
     } = mergedProps,
     props = _objectWithoutProperties(mergedProps, _excluded);
   return /*#__PURE__*/_jsx(Pressable, _objectSpread(_objectSpread({
     ref: ref,
-    background: background
+    background: background,
+    className: cx(className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
+    style: _objectSpread(_objectSpread({}, style), styles === null || styles === void 0 ? void 0 : styles.root)
   }, props), {}, {
     children: /*#__PURE__*/_jsxs(HStack, {
       alignItems: "center",
       gap: 1,
       children: [typeof icon === 'string' ? /*#__PURE__*/_jsx(Icon, {
         active: active,
+        className: classNames === null || classNames === void 0 ? void 0 : classNames.icon,
         color: color,
         dangerouslySetColor: dangerouslySetColor,
         name: icon,
-        size: size
+        size: size,
+        style: styles === null || styles === void 0 ? void 0 : styles.icon
       }) : icon, count > 0 ? /*#__PURE__*/_jsx(Text, {
         mono: true,
         as: "p",

package/esm/cards/Card.js

@@ -10,6 +10,11 @@ import React, { memo, useMemo } from 'react';
 import { cardSizes } from '@coinbase/cds-common/tokens/card';
 import { VStack } from '../layout/VStack';
 import { Pressable } from '../system/Pressable';
+
+/**
+ * @deprecated Use `ContentCard`, `MediaCard`, `MessagingCard`, or `DataCard` based on your use case. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * @deprecated Use ContentCard instead. This will be removed in a future major release.

package/esm/cards/CardMedia.js

@@ -34,18 +34,14 @@ export const CardMedia = /*#__PURE__*/memo(function CardMedia(_ref) {
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   if (props.type === 'spotSquare') {
-    return /*#__PURE__*/_jsx(SpotSquare, _objectSpread(_objectSpread({}, props), {}, {
-      dimension: defaultMediaDimension,
-      name: props.name,
-      testID: props.testID
-    }));
+    return /*#__PURE__*/_jsx(SpotSquare, _objectSpread({
+      dimension: defaultMediaDimension
+    }, props));
   }
   if (props.type === 'pictogram') {
-    return /*#__PURE__*/_jsx(Pictogram, _objectSpread(_objectSpread({}, props), {}, {
-      dimension: defaultPictogramMediaDimension,
-      name: props.name,
-      testID: props.testID
-    }));
+    return /*#__PURE__*/_jsx(Pictogram, _objectSpread({
+      dimension: defaultPictogramMediaDimension
+    }, props));
   }
   if (props.type === 'image') {
     var _props$alt;

package/esm/cards/FeatureEntryCard.js

@@ -9,11 +9,6 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { memo } from 'react';
 import { Card } from './Card';
 import { CardBody } from './CardBody';
-
-/**
- * @deprecated Use MessagingCard instead. This will be removed in a future major release.
- * @deprecationExpectedRemoval v6
- */
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * @deprecated Use MessagingCard instead. This will be removed in a future major release.