@coinbase/cds-web 8.38.6 → 8.38.7

package/CHANGELOG.md

@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.38.7 (1/26/2026 PST)
+
+#### 🐞 Fixes
+
+- Fix Switch rendering with an unintended drop shadow. Add optional `elevation` prop to Control components (Switch, Checkbox, Radio). [[#325](https://github.com/coinbase/cds/pull/325)]
+
 ## 8.38.6 (1/23/2026 PST)
 
 #### 🐞 Fixes

package/dts/controls/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/controls/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAejE,OAAO,EAAW,KAAK,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAyB3D,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,MAAM,IAAI,gBAAgB,CAAC,CAAC,CAAC,GAAG;IAClE;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAC/B;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC;CACrC,CAAC;AAEF,QAAA,MAAM,eAAe,EA2Ef,CAAC,CAAC,SAAS,MAAM,EACrB,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAAE,KAC5D,KAAK,CAAC,YAAY,CAAC;AAExB,eAAO,MAAM,QAAQ,EAA4B,OAAO,eAAe,GACrE,KAAK,CAAC,mBAAmB,CAAC,OAAO,eAAe,CAAC,CAAC"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/controls/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAejE,OAAO,EAAW,KAAK,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAyB3D,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,MAAM,IAAI,gBAAgB,CAAC,CAAC,CAAC,GAAG;IAClE;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAC/B;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC;CACrC,CAAC;AAEF,QAAA,MAAM,eAAe,EA6Ef,CAAC,CAAC,SAAS,MAAM,EACrB,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAAE,KAC5D,KAAK,CAAC,YAAY,CAAC;AAExB,eAAO,MAAM,QAAQ,EAA4B,OAAO,eAAe,GACrE,KAAK,CAAC,mBAAmB,CAAC,OAAO,eAAe,CAAC,CAAC"}

package/dts/controls/Control.d.ts

@@ -10,7 +10,7 @@ export type ControlBaseProps<T extends string> = FilteredHTMLAttributes<
   Partial<
     Pick<
       InteractableBaseProps,
-      'background' | 'borderColor' | 'borderRadius' | 'borderWidth' | 'color'
+      'background' | 'borderColor' | 'borderRadius' | 'borderWidth' | 'color' | 'elevation'
     >
   > & {
     /** Label for the control option. */

package/dts/controls/Control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Control.d.ts","sourceRoot":"","sources":["../../src/controls/Control.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAC;AAIjE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAM1E,OAAO,EAAgB,KAAK,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAClF,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AA6CvD,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,MAAM,IAAI,sBAAsB,CACrE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,OAAO,GAAG,OAAO,CAClB,GACC,WAAW,GACX,OAAO,CACL,IAAI,CACF,qBAAqB,EACrB,YAAY,GAAG,aAAa,GAAG,cAAc,GAAG,aAAa,GAAG,OAAO,CACxE,CACF,GAAG;IACF,oCAAoC;IACpC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,sCAAsC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uDAAuD;IACvD,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,kDAAkD;IAClD,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,qHAAqH;IACrH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iCAAiC;IACjC,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAChC,kCAAkC;IAClC,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAClC,CAAC;AAEJ,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,MAAM,IAAI,gBAAgB,CAAC,CAAC,CAAC,GAAG;IACjE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,QAAA,MAAM,cAAc,EAwHd,CAAC,CAAC,SAAS,MAAM,EACrB,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAAE,KAC3D,KAAK,CAAC,YAAY,CAAC;AAExB,eAAO,MAAM,OAAO,EAA2B,OAAO,cAAc,GAClE,KAAK,CAAC,mBAAmB,CAAC,OAAO,cAAc,CAAC,CAAC"}
+{"version":3,"file":"Control.d.ts","sourceRoot":"","sources":["../../src/controls/Control.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAC;AAIjE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAM1E,OAAO,EAAgB,KAAK,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAClF,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AA6CvD,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,MAAM,IAAI,sBAAsB,CACrE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,OAAO,GAAG,OAAO,CAClB,GACC,WAAW,GACX,OAAO,CACL,IAAI,CACF,qBAAqB,EACrB,YAAY,GAAG,aAAa,GAAG,cAAc,GAAG,aAAa,GAAG,OAAO,GAAG,WAAW,CACtF,CACF,GAAG;IACF,oCAAoC;IACpC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,sCAAsC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uDAAuD;IACvD,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,kDAAkD;IAClD,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,qHAAqH;IACrH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iCAAiC;IACjC,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAChC,kCAAkC;IAClC,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAClC,CAAC;AAEJ,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,MAAM,IAAI,gBAAgB,CAAC,CAAC,CAAC,GAAG;IACjE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,QAAA,MAAM,cAAc,EA2Hd,CAAC,CAAC,SAAS,MAAM,EACrB,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAAE,KAC3D,KAAK,CAAC,YAAY,CAAC;AAExB,eAAO,MAAM,OAAO,EAA2B,OAAO,cAAc,GAClE,KAAK,CAAC,mBAAmB,CAAC,OAAO,cAAc,CAAC,CAAC"}

package/dts/controls/Radio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../src/controls/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAcjE,OAAO,EAAW,KAAK,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAuC3D,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,MAAM,IAAI,gBAAgB,CAAC,CAAC,CAAC,GAAG;IAC/D;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;CAChC,CAAC;AAEF,QAAA,MAAM,YAAY,EA2CZ,CAAC,CAAC,SAAS,MAAM,EACrB,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAAE,KACzD,KAAK,CAAC,YAAY,CAAC;AAExB,eAAO,MAAM,KAAK,EAAyB,OAAO,YAAY,GAC5D,KAAK,CAAC,mBAAmB,CAAC,OAAO,YAAY,CAAC,CAAC"}
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../src/controls/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAcjE,OAAO,EAAW,KAAK,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAuC3D,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,MAAM,IAAI,gBAAgB,CAAC,CAAC,CAAC,GAAG;IAC/D;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;CAChC,CAAC;AAEF,QAAA,MAAM,YAAY,EAmDZ,CAAC,CAAC,SAAS,MAAM,EACrB,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAAE,KACzD,KAAK,CAAC,YAAY,CAAC;AAExB,eAAO,MAAM,KAAK,EAAyB,OAAO,YAAY,GAC5D,KAAK,CAAC,mBAAmB,CAAC,OAAO,YAAY,CAAC,CAAC"}

package/dts/controls/Switch.d.ts

@@ -17,7 +17,7 @@ export declare const Switch: React.MemoExoticComponent<
       Partial<
         Pick<
           import('../system').InteractableBaseProps,
-          'borderWidth' | 'borderRadius' | 'color' | 'background' | 'borderColor'
+          'borderWidth' | 'borderRadius' | 'color' | 'elevation' | 'background' | 'borderColor'
         >
       > & {
         children?: React.ReactNode;

package/dts/controls/Switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/controls/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AASjE,OAAO,EAAW,KAAK,gBAAgB,EAAE,MAAM,WAAW,CAAC;AA6B3D,MAAM,MAAM,WAAW,GAAG,gBAAgB,CAAC,MAAM,CAAC,GAAG;IACnD;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;CAChC,CAAC;AAoFF,eAAO,MAAM,MAAM;;;;;;;;;;;IAxFjB;;OAEG;mBACY,SAAS,CAAC,KAAK;2CAqFS,CAAC"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/controls/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AASjE,OAAO,EAAW,KAAK,gBAAgB,EAAE,MAAM,WAAW,CAAC;AA6B3D,MAAM,MAAM,WAAW,GAAG,gBAAgB,CAAC,MAAM,CAAC,GAAG;IACnD;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;CAChC,CAAC;AAqFF,eAAO,MAAM,MAAM;;;;;;;;;;;IAzFjB;;OAEG;mBACY,SAAS,CAAC,KAAK;2CAsFS,CAAC"}

package/esm/controls/Checkbox.js

@@ -1,4 +1,4 @@
-const _excluded = ["children", "checked", "indeterminate", "controlColor", "background", "borderColor", "borderRadius", "borderWidth"];
+const _excluded = ["children", "checked", "indeterminate", "controlColor", "background", "borderColor", "borderRadius", "borderWidth", "elevation"];
 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,7 +25,8 @@ const CheckboxWithRef = /*#__PURE__*/forwardRef(function CheckboxWithRef(_ref, r
       background = checked || indeterminate ? 'bgPrimary' : 'bg',
       borderColor = checked || indeterminate ? 'bgPrimary' : 'bgLineHeavy',
       borderRadius,
-      borderWidth = 100
+      borderWidth = 100,
+      elevation
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const filled = checked || indeterminate;
@@ -52,6 +53,7 @@ const CheckboxWithRef = /*#__PURE__*/forwardRef(function CheckboxWithRef(_ref, r
     borderRadius: borderRadius,
     borderWidth: borderWidth,
     checked: checked,
+    elevation: elevation,
     label: children,
     type: "checkbox"
   }, props), {}, {

package/esm/controls/Control.js

@@ -1,4 +1,4 @@
-const _excluded = ["type", "checked", "disabled", "indeterminate", "readOnly", "required", "value", "children", "label", "aria-labelledby", "background", "borderColor", "borderRadius", "borderWidth", "color", "testID", "iconStyle", "labelStyle"];
+const _excluded = ["type", "checked", "disabled", "indeterminate", "readOnly", "required", "value", "children", "label", "aria-labelledby", "background", "borderColor", "borderRadius", "borderWidth", "color", "elevation", "testID", "iconStyle", "labelStyle"];
 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; }
@@ -39,6 +39,7 @@ const ControlWithRef = /*#__PURE__*/forwardRef(function ControlWithRef(_ref, ref
       borderRadius,
       borderWidth,
       color = checked || indeterminate ? 'fg' : 'fgMuted',
+      elevation,
       testID,
       iconStyle,
       labelStyle
@@ -62,6 +63,7 @@ const ControlWithRef = /*#__PURE__*/forwardRef(function ControlWithRef(_ref, ref
     borderWidth: borderWidth,
     className: interactableCss,
     disabled: disabled || readOnly,
+    elevation: elevation,
     style: iconStyle,
     testID: testID ? "".concat(testID, "-parent") : undefined,
     children: [/*#__PURE__*/_jsx("input", _objectSpread({
@@ -79,7 +81,7 @@ const ControlWithRef = /*#__PURE__*/forwardRef(function ControlWithRef(_ref, ref
       type: type,
       value: value
     }, htmlProps)), children]
-  }), [background, borderColor, borderRadius, borderWidth, checked, children, disabled, htmlProps, iconStyle, inputId, inputRef, labelId, readOnly, required, testID, type, value]);
+  }), [background, borderColor, borderRadius, borderWidth, checked, children, disabled, elevation, htmlProps, iconStyle, inputId, inputRef, labelId, readOnly, required, testID, type, value]);
   const controlElement = useMemo(() => {
     /**
      * If the control has label, the label's lineHeight doesn't match the icon size. We need to

package/esm/controls/Radio.js

@@ -1,4 +1,4 @@
-const _excluded = ["children", "controlColor", "checked", "background", "borderColor"];
+const _excluded = ["children", "controlColor", "checked", "background", "borderColor", "elevation"];
 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; }
@@ -39,7 +39,8 @@ const RadioWithRef = /*#__PURE__*/forwardRef(function RadioWithRef(_ref2, ref) {
       controlColor = 'bgPrimary',
       checked = false,
       background = 'bg',
-      borderColor = checked ? controlColor : 'bgLineHeavy'
+      borderColor = checked ? controlColor : 'bgLineHeavy',
+      elevation
     } = _ref2,
     props = _objectWithoutProperties(_ref2, _excluded);
   const theme = useTheme();
@@ -52,6 +53,7 @@ const RadioWithRef = /*#__PURE__*/forwardRef(function RadioWithRef(_ref2, ref) {
   return /*#__PURE__*/_jsx(Control, _objectSpread(_objectSpread({
     ref: ref,
     checked: checked,
+    elevation: elevation,
     label: children,
     type: "radio"
   }, props), {}, {

package/esm/controls/Switch.js

@@ -1,4 +1,4 @@
-const _excluded = ["children", "checked", "disabled", "controlColor", "background", "borderColor", "borderRadius", "borderWidth", "value"];
+const _excluded = ["children", "checked", "disabled", "elevation", "controlColor", "background", "borderColor", "borderRadius", "borderWidth", "value"];
 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; }
@@ -31,6 +31,7 @@ const SwitchWithRef = /*#__PURE__*/forwardRef(function SwitchWithRef(_ref, ref)
       children,
       checked,
       disabled,
+      elevation,
       controlColor,
       background = checked ? 'bgPrimary' : 'bgTertiary',
       borderColor,
@@ -69,7 +70,7 @@ const SwitchWithRef = /*#__PURE__*/forwardRef(function SwitchWithRef(_ref, ref)
         borderRadius: 1000,
         className: thumbCss,
         "data-testid": "switch-thumb",
-        elevation: 1,
+        elevation: elevation,
         initial: false,
         testID: "switch-thumb",
         transition: convertTransition(switchTransitionConfig),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web",
-  "version": "8.38.6",
+  "version": "8.38.7",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",
@@ -203,7 +203,7 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.38.6",
+    "@coinbase/cds-common": "^8.38.7",
     "@coinbase/cds-icons": "^5.9.0",
     "@coinbase/cds-illustrations": "^4.29.0",
     "@coinbase/cds-lottie-files": "^3.3.4",