@coinbase/cds-web 9.4.0 → 9.4.2

package/CHANGELOG.md

@@ -8,6 +8,18 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 9.4.2 (6/23/2026 PST)
+
+#### 🐞 Fixes
+
+- Fix: Button CSS was preventing height prop from working due to CSS specificity issue. [[#764](https://github.com/coinbase/cds/pull/764)]
+
+## 9.4.1 (6/15/2026 PST)
+
+#### 🐞 Fixes
+
+- Fix: Modal appearance props now apply to the modal card. [[#758](https://github.com/coinbase/cds/pull/758)]
+
 ## 9.4.0 (6/15/2026 PST)
 
 #### 🚀 Updates

package/dts/buttons/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/buttons/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAEzD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AAChF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qCAAqC,CAAC;AACpE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AACpG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAG1E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAMxD,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAMzE;;GAEG;AACH,eAAO,MAAM,aAAa,MAAM,CAAC;AA+EjC,eAAO,MAAM,oBAAoB,WAAW,CAAC;AAE7C,MAAM,MAAM,oBAAoB,GAAG,OAAO,oBAAoB,CAAC;AAE/D,MAAM,MAAM,eAAe,GAAG,WAAW,CAAC,eAAe,CACvD,kBAAkB,EAClB,WAAW,GACT,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,GAAG;IACrD;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wDAAwD;IACxD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,2EAA2E;IAC3E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4CAA4C;IAC5C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,yBAAyB;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,iDAAiD;IACjD,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,uCAAuC;IACvC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uBAAuB;IACvB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,QAAQ,CAAC;IACnB,qCAAqC;IACrC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACxB,kDAAkD;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CACJ,CAAC;AAEF,MAAM,MAAM,WAAW,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,GAAG,oBAAoB,IAClF,WAAW,CAAC,KAAK,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;AAElD,KAAK,eAAe,GAAG,CAAC,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,GAAG,oBAAoB,EACnF,KAAK,EAAE,WAAW,CAAC,WAAW,CAAC,KAC5B,WAAW,CAAC,WAAW,CAAC,GAC3B,WAAW,CAAC,UAAU,CAAC;AAEzB,eAAO,MAAM,MAAM,EAAE,eA6JpB,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/buttons/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAEzD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AAChF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qCAAqC,CAAC;AACpE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AACpG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAG1E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAMxD,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAMzE;;GAEG;AACH,eAAO,MAAM,aAAa,MAAM,CAAC;AA8EjC,eAAO,MAAM,oBAAoB,WAAW,CAAC;AAE7C,MAAM,MAAM,oBAAoB,GAAG,OAAO,oBAAoB,CAAC;AAE/D,MAAM,MAAM,eAAe,GAAG,WAAW,CAAC,eAAe,CACvD,kBAAkB,EAClB,WAAW,GACT,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,GAAG;IACrD;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wDAAwD;IACxD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,2EAA2E;IAC3E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4CAA4C;IAC5C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,yBAAyB;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,iDAAiD;IACjD,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,uCAAuC;IACvC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uBAAuB;IACvB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,QAAQ,CAAC;IACnB,qCAAqC;IACrC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACxB,kDAAkD;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CACJ,CAAC;AAEF,MAAM,MAAM,WAAW,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,GAAG,oBAAoB,IAClF,WAAW,CAAC,KAAK,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;AAElD,KAAK,eAAe,GAAG,CAAC,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,GAAG,oBAAoB,EACnF,KAAK,EAAE,WAAW,CAAC,WAAW,CAAC,KAC5B,WAAW,CAAC,WAAW,CAAC,GAC3B,WAAW,CAAC,UAAU,CAAC;AAEzB,eAAO,MAAM,MAAM,EAAE,eA+JpB,CAAC"}

package/dts/overlays/modal/FullscreenModalLayout.d.ts

@@ -23,7 +23,7 @@ export type FullscreenModalLayoutBaseProps = Pick<
 export type FullscreenModalLayoutProps = FullscreenModalLayoutBaseProps;
 export declare const FullscreenModalLayout: React.NamedExoticComponent<
   Pick<
-    import('./Modal').ModalBaseProps,
+    ModalProps,
     | 'zIndex'
     | 'visible'
     | 'accessibilityLabel'

package/dts/overlays/modal/Modal.d.ts

@@ -2,8 +2,19 @@ import React from 'react';
 import { type ModalContextValue } from '@coinbase/cds-common/overlays/ModalContext';
 import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
 import type { PositionStyles } from '../../styles/styleProps';
+import type { StylesAndClassNames } from '../../types';
 import { type FocusTrapProps } from '../FocusTrap';
 import type { ModalWrapperProps } from './ModalWrapper';
+/**
+ * Static class names for Modal component parts.
+ * Use these selectors to target specific elements with CSS.
+ */
+export declare const modalClassNames: {
+  /** Full-viewport overlay/backdrop element that positions the modal within the viewport */
+  readonly overlay: 'cds-Modal';
+  /** Visible modal card element */
+  readonly modal: 'cds-Modal-modal';
+};
 type ModalChildrenRenderProps = {
   closeModal: () => void;
 };
@@ -39,10 +50,10 @@ export type ModalBaseProps = SharedProps &
      */
     restoreFocusOnUnmount?: boolean;
   };
-export type ModalProps = ModalBaseProps;
+export type ModalProps = ModalBaseProps & StylesAndClassNames<typeof modalClassNames>;
 export type ModalRefBaseProps = Pick<ModalBaseProps, 'onRequestClose'>;
 export declare const Modal: React.NamedExoticComponent<
-  Omit<ModalBaseProps, 'ref'> & React.RefAttributes<ModalRefBaseProps>
+  Omit<ModalProps, 'ref'> & React.RefAttributes<ModalRefBaseProps>
 >;
 export {};
 //# sourceMappingURL=Modal.d.ts.map

package/dts/overlays/modal/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/overlays/modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsE,MAAM,OAAO,CAAC;AAO3F,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,4CAA4C,CAAC;AAMlG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAW1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAiDxD,KAAK,wBAAwB,GAAG;IAAE,UAAU,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC;AAE3D,MAAM,MAAM,cAAc,GAAG,WAAW,GACtC,iBAAiB,GACjB,IAAI,CAAC,cAAc,EAAE,QAAQ,CAAC,GAC9B,IAAI,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,GACzC,IAAI,CACF,cAAc,EACd,kBAAkB,GAAG,uBAAuB,GAAG,2BAA2B,CAC3E,GAAG;IACF,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,wBAAwB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IACpF;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB;;;OAGG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;OAGG;IACH,sBAAsB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACzD;;;;;OAKG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC,CAAC;AAEJ,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC;AAExC,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,cAAc,EAAE,gBAAgB,CAAC,CAAC;AAEvE,eAAO,MAAM,KAAK,kGAgHjB,CAAC"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/overlays/modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsE,MAAM,OAAO,CAAC;AAO3F,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,4CAA4C,CAAC;AAMlG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAW1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AA6CxD;;;GAGG;AACH,eAAO,MAAM,eAAe;IAC1B,0FAA0F;;IAE1F,iCAAiC;;CAEzB,CAAC;AAMX,KAAK,wBAAwB,GAAG;IAAE,UAAU,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC;AAE3D,MAAM,MAAM,cAAc,GAAG,WAAW,GACtC,iBAAiB,GACjB,IAAI,CAAC,cAAc,EAAE,QAAQ,CAAC,GAC9B,IAAI,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,GACzC,IAAI,CACF,cAAc,EACd,kBAAkB,GAAG,uBAAuB,GAAG,2BAA2B,CAC3E,GAAG;IACF,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,wBAAwB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IACpF;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB;;;OAGG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;OAGG;IACH,sBAAsB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACzD;;;;;OAKG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC,CAAC;AAEJ,MAAM,MAAM,UAAU,GAAG,cAAc,GAAG,mBAAmB,CAAC,OAAO,eAAe,CAAC,CAAC;AAEtF,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,cAAc,EAAE,gBAAgB,CAAC,CAAC;AAEvE,eAAO,MAAM,KAAK,8FA8LjB,CAAC"}

package/esm/buttons/Button.css

@@ -1,4 +1,4 @@
-@layer cds{.baseCss-b99zquh{-webkit-text-decoration:none;text-decoration:none;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;text-align:center;vertical-align:middle;-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;font-weight:600;position:relative;white-space:nowrap;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;overflow:visible;text-transform:none;}
+@layer cds{.baseCss-b99zquh{-webkit-text-decoration:none;text-decoration:none;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;text-align:center;vertical-align:middle;-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;font-weight:600;position:relative;white-space:nowrap;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;overflow:visible;text-transform:none;}
 .blockCss-b9yox33{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;max-width:100%;white-space:normal;}
 .spinnerContainerCss-s1bhvbb9{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
 .startNodeCss-s2x7iw5{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;margin-inline-end:var(--space-1);}

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", "borderColor", "borderWidth", "borderRadius", "accessibilityLabel", "padding", "paddingX", "paddingY", "margin", "minWidth", "style", "textAlign"];
+const _excluded = ["as", "variant", "loading", "progressCircleSize", "transparent", "block", "compact", "children", "start", "startIcon", "startIconActive", "end", "endIcon", "endIconActive", "flush", "noScaleOnPress", "numberOfLines", "font", "fontFamily", "fontSize", "fontWeight", "height", "lineHeight", "background", "color", "className", "borderColor", "borderWidth", "borderRadius", "accessibilityLabel", "padding", "paddingX", "paddingY", "margin", "minWidth", "style", "textAlign"];
 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; }
@@ -59,6 +59,7 @@ export const Button = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
       fontFamily,
       fontSize,
       fontWeight,
+      height = 'fit-content',
       lineHeight,
       background,
       color,
@@ -113,6 +114,7 @@ export const Button = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
     "data-flush": flush,
     "data-transparent": transparent,
     "data-variant": variant,
+    height: height,
     loading: loading,
     margin: margin,
     minWidth: minWidth,

package/esm/overlays/modal/Modal.js

@@ -1,4 +1,4 @@
-const _excluded = ["children", "visible", "onRequestClose", "disableOverlayPress", "disablePortal", "disableFocusTrap", "accessibilityLabelledBy", "accessibilityLabel", "focusTabIndexElements", "restoreFocusOnUnmount", "disableArrowKeyNavigation", "width", "dangerouslyDisableResponsiveness", "dangerouslySetPosition", "shouldCloseOnEscPress", "hideCloseButton", "hideDividers", "maxWidth"];
+const _excluded = ["children", "visible", "onRequestClose", "disableOverlayPress", "disablePortal", "disableFocusTrap", "accessibilityLabelledBy", "accessibilityLabel", "focusTabIndexElements", "restoreFocusOnUnmount", "disableArrowKeyNavigation", "dangerouslyDisableResponsiveness", "dangerouslySetPosition", "shouldCloseOnEscPress", "hideCloseButton", "hideDividers", "className", "classNames", "style", "styles", "width", "maxWidth", "minWidth", "minHeight", "maxHeight", "background", "color", "borderRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "borderColor", "borderWidth", "borderTopWidth", "borderBottomWidth", "borderStartWidth", "borderEndWidth", "bordered", "borderedTop", "borderedBottom", "borderedStart", "borderedEnd", "borderedHorizontal", "borderedVertical", "elevation", "padding", "paddingX", "paddingY", "paddingTop", "paddingBottom", "paddingStart", "paddingEnd"];
 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; }
@@ -34,6 +34,17 @@ const baseCss = "baseCss-bp3ahp7";
 const modalDialogResponsiveCss = "modalDialogResponsiveCss-msti16y";
 const modalResponsiveCss = "modalResponsiveCss-ml7szrb";
 const MotionBox = motion(Box);
+
+/**
+ * Static class names for Modal component parts.
+ * Use these selectors to target specific elements with CSS.
+ */
+export const modalClassNames = {
+  /** Full-viewport overlay/backdrop element that positions the modal within the viewport */
+  overlay: 'cds-Modal',
+  /** Visible modal card element */
+  modal: 'cds-Modal-modal'
+};
 const overlayContentContextValue = {
   isModal: true
 };
@@ -51,13 +62,50 @@ export const Modal = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
       focusTabIndexElements = false,
       restoreFocusOnUnmount = true,
       disableArrowKeyNavigation,
-      width,
       dangerouslyDisableResponsiveness = false,
       dangerouslySetPosition,
       shouldCloseOnEscPress = true,
       hideCloseButton,
       hideDividers,
-      maxWidth
+      className,
+      classNames,
+      style,
+      styles,
+      // Dialog card sizing
+      width,
+      maxWidth,
+      minWidth,
+      minHeight,
+      maxHeight,
+      // Dialog card appearance
+      background,
+      color,
+      borderRadius = 200,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
+      borderColor,
+      borderWidth,
+      borderTopWidth,
+      borderBottomWidth,
+      borderStartWidth,
+      borderEndWidth,
+      bordered,
+      borderedTop,
+      borderedBottom,
+      borderedStart,
+      borderedEnd,
+      borderedHorizontal,
+      borderedVertical,
+      elevation = 2,
+      padding,
+      paddingX,
+      paddingY,
+      paddingTop,
+      paddingBottom,
+      paddingStart,
+      paddingEnd
     } = mergedProps,
     props = _objectWithoutProperties(mergedProps, _excluded);
   const defaultWidth = dangerouslyDisableResponsiveness ? modalMaxWidth : defaultWidthStyle;
@@ -96,20 +144,26 @@ export const Modal = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
   const dialogStyles = useMemo(() => ({
     position: dangerouslySetPosition
   }), [dangerouslySetPosition]);
+  const overlayStyle = useMemo(() => style || styles !== null && styles !== void 0 && styles.overlay ? _objectSpread(_objectSpread({}, style), styles === null || styles === void 0 ? void 0 : styles.overlay) : undefined, [style, styles === null || styles === void 0 ? void 0 : styles.overlay]);
   return /*#__PURE__*/_jsx(OverlayContentContext.Provider, {
     value: overlayContentContextValue,
     children: /*#__PURE__*/_jsx(ModalWrapper, _objectSpread(_objectSpread({
       accessibilityLabel: label,
       accessibilityLabelledBy: labelledBy,
+      className: cx(modalClassNames.overlay, className, classNames === null || classNames === void 0 ? void 0 : classNames.overlay),
       dangerouslyDisableResponsiveness: dangerouslyDisableResponsiveness,
       disableOverlayPress: disableOverlayPress,
       disablePortal: disablePortal,
       onOverlayPress: handleClose,
+      style: overlayStyle,
       visible: visible
     }, props), {}, {
       children: /*#__PURE__*/_jsx(MotionBox, _objectSpread(_objectSpread({}, motionProps), {}, {
         className: cx(baseCss, !dangerouslyDisableResponsiveness && modalResponsiveCss),
+        maxHeight: maxHeight,
         maxWidth: maxWidth !== null && maxWidth !== void 0 ? maxWidth : defaultMaxWidth,
+        minHeight: minHeight,
+        minWidth: minWidth,
         style: dialogStyles,
         testID: "modal-dialog-motion",
         width: width !== null && width !== void 0 ? width : defaultWidth,
@@ -120,10 +174,37 @@ export const Modal = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
           onEscPress: shouldCloseOnEscPress ? handleClose : undefined,
           restoreFocusOnUnmount: restoreFocusOnUnmount,
           children: /*#__PURE__*/_jsx(VStack, {
-            borderRadius: 200,
-            className: cx(!dangerouslyDisableResponsiveness && modalDialogResponsiveCss),
-            elevation: 2,
+            background: background,
+            borderBottomLeftRadius: borderBottomLeftRadius,
+            borderBottomRightRadius: borderBottomRightRadius,
+            borderBottomWidth: borderBottomWidth,
+            borderColor: borderColor,
+            borderEndWidth: borderEndWidth,
+            borderRadius: borderRadius,
+            borderStartWidth: borderStartWidth,
+            borderTopLeftRadius: borderTopLeftRadius,
+            borderTopRightRadius: borderTopRightRadius,
+            borderTopWidth: borderTopWidth,
+            borderWidth: borderWidth,
+            bordered: bordered,
+            borderedBottom: borderedBottom,
+            borderedEnd: borderedEnd,
+            borderedHorizontal: borderedHorizontal,
+            borderedStart: borderedStart,
+            borderedTop: borderedTop,
+            borderedVertical: borderedVertical,
+            className: cx(!dangerouslyDisableResponsiveness && modalDialogResponsiveCss, modalClassNames.modal, classNames === null || classNames === void 0 ? void 0 : classNames.modal),
+            color: color,
+            elevation: elevation,
             overflow: "hidden",
+            padding: padding,
+            paddingBottom: paddingBottom,
+            paddingEnd: paddingEnd,
+            paddingStart: paddingStart,
+            paddingTop: paddingTop,
+            paddingX: paddingX,
+            paddingY: paddingY,
+            style: styles === null || styles === void 0 ? void 0 : styles.modal,
             width: "100%",
             children: /*#__PURE__*/_jsx(ModalContext.Provider, {
               value: modalData,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web",
-  "version": "9.4.0",
+  "version": "9.4.2",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",
@@ -219,9 +219,9 @@
     "react-dom": "^18.0.0 || ~19.1.2"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^9.4.0",
+    "@coinbase/cds-common": "^9.4.2",
     "@coinbase/cds-icons": "^5.19.0",
-    "@coinbase/cds-illustrations": "^4.42.0",
+    "@coinbase/cds-illustrations": "^4.43.0",
     "@coinbase/cds-lottie-files": "^3.3.4",
     "@coinbase/cds-utils": "^2.3.5",
     "@floating-ui/react-dom": "^2.1.1",