@coinbase/cds-web 9.0.0 → 9.0.2

package/CHANGELOG.md

@@ -8,6 +8,16 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 9.0.2 (5/22/2026 PST)
+
+#### 🐞 Fixes
+
+- Fix: improve button text alignment by using flexbox. [[#720](https://github.com/coinbase/cds/pull/720)]
+
+## 9.0.1 ((5/22/2026, 09:25 AM PST))
+
+This is an artificial version bump with no new change.
+
 ## 9.0.0 (5/20/2026 PST)
 
 CDS 9 is here!!

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,EACV,aAAa,EACb,QAAQ,EACR,wBAAwB,EACxB,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAGpC,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,eA2JpB,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/buttons/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAEzD,OAAO,KAAK,EACV,aAAa,EACb,QAAQ,EACR,wBAAwB,EACxB,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAGpC,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"}

package/esm/buttons/Button.css

@@ -6,5 +6,5 @@
 .iconCss-ixznik7{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}
 .unsetNoWrapCss-u148mgtl{white-space:unset;}
 .hiddenCss-h1pxicn8{visibility:hidden;}
-.middleNodeCss-m1avpq52{position:relative;}
+.middleNodeCss-m1avpq52{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;}
 .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", "borderColor", "borderWidth", "borderRadius", "accessibilityLabel", "padding", "paddingX", "paddingY", "margin", "minWidth", "style"];
+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"];
 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; }
@@ -73,7 +73,8 @@ export const Button = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
       paddingY = padding !== null && padding !== void 0 ? padding : compact ? 1 : 2,
       margin = 0,
       minWidth = 'auto',
-      style
+      style,
+      textAlign = 'center'
     } = mergedProps,
     props = _objectWithoutProperties(mergedProps, _excluded);
   const theme = useTheme();
@@ -153,6 +154,7 @@ export const Button = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
         fontWeight: fontWeight,
         lineHeight: lineHeight,
         numberOfLines: numberOfLines,
+        textAlign: textAlign,
         children: /*#__PURE__*/_jsx("span", {
           className: cx(loading && hiddenCss),
           children: children

package/esm/icons/__figma__/Icon.figma.js

@@ -134,13 +134,6 @@ figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=6967
     name: "apothecary"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-13936', {
-  imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
-  props,
-  example: props => /*#__PURE__*/_jsx(Icon, _objectSpread({
-    name: "appSwitcher"
-  }, props))
-});
 figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=69679-956', {
   imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
   props,
@@ -162,6 +155,13 @@ figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=2945
     name: "application"
   }, props))
 });
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-13936', {
+  imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
+  props,
+  example: props => /*#__PURE__*/_jsx(Icon, _objectSpread({
+    name: "appSwitcher"
+  }, props))
+});
 figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-12805', {
   imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
   props,
@@ -183,13 +183,6 @@ figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=2945
     name: "arrowRight"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-12740', {
-  imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
-  props,
-  example: props => /*#__PURE__*/_jsx(Icon, _objectSpread({
-    name: "arrowUp"
-  }, props))
-});
 figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-12766', {
   imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
   props,
@@ -211,6 +204,13 @@ figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=2945
     name: "arrowsVertical"
   }, props))
 });
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-12740', {
+  imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
+  props,
+  example: props => /*#__PURE__*/_jsx(Icon, _objectSpread({
+    name: "arrowUp"
+  }, props))
+});
 figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-15106', {
   imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
   props,
@@ -239,18 +239,18 @@ figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=2945
     name: "astronautHelmet"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=69679-1178', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=69679-670', {
   imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _objectSpread({
-    name: "atSign"
+    name: "atomScience"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=69679-670', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=69679-1178', {
   imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _objectSpread({
-    name: "atomScience"
+    name: "atSign"
   }, props))
 });
 figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-16565', {
@@ -323,6 +323,13 @@ figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=5681
     name: "baseApps"
   }, props))
 });
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=69679-110', {
+  imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
+  props,
+  example: props => /*#__PURE__*/_jsx(Icon, _objectSpread({
+    name: "baseball"
+  }, props))
+});
 figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=56816-81', {
   imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
   props,
@@ -365,13 +372,6 @@ figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=5681
     name: "baseWallet"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=69679-110', {
-  imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
-  props,
-  example: props => /*#__PURE__*/_jsx(Icon, _objectSpread({
-    name: "baseball"
-  }, props))
-});
 figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=69679-123', {
   imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
   props,
@@ -729,14 +729,14 @@ figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=2945
     name: "cashSingaporeDollar"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=56411-1533', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-12051', {
   imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _objectSpread({
     name: "cashSwissFranc"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-12051', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=56411-1533', {
   imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _objectSpread({
@@ -757,18 +757,18 @@ figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=2945
     name: "cashTurkishLira"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-11999', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-12012', {
   imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _objectSpread({
-    name: "cashUSD"
+    name: "cashUaeDirham"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-12012', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-11999', {
   imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _objectSpread({
-    name: "cashUaeDirham"
+    name: "cashUSD"
   }, props))
 });
 figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-11986', {
@@ -1590,18 +1590,18 @@ figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=2945
     name: "eye"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-13000', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-14365', {
   imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _objectSpread({
-    name: "faceScan"
+    name: "faces"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-14365', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-13000', {
   imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _objectSpread({
-    name: "faces"
+    name: "faceScan"
   }, props))
 });
 figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=69679-644', {
@@ -1618,14 +1618,14 @@ figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=2945
     name: "faucet"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-13598', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-13351', {
   imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _objectSpread({
     name: "faucet"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-13351', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-13598', {
   imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _objectSpread({
@@ -1835,14 +1835,14 @@ figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=2945
     name: "ghost"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-14352', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-14183', {
   imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _objectSpread({
     name: "ghost"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-14183', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-14352', {
   imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _objectSpread({
@@ -1856,14 +1856,14 @@ figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=2945
     name: "gif"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-15275', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-15015', {
   imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _objectSpread({
     name: "giftBox"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-15015', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-15275', {
   imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _objectSpread({
@@ -1884,14 +1884,14 @@ figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=2945
     name: "gitHubLogo"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-15262', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-16305', {
   imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _objectSpread({
     name: "globe"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-16305', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-15262', {
   imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _objectSpread({
@@ -1940,21 +1940,21 @@ figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=2945
     name: "hamburger"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-16812', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-16825', {
   imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _objectSpread({
     name: "hammer"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-16825', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-16838', {
   imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _objectSpread({
     name: "hammer"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-16838', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-16812', {
   imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _objectSpread({
@@ -2458,18 +2458,18 @@ figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=2945
     name: "nftSale"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-16187', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-15549', {
   imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _objectSpread({
-    name: "noWifi"
+    name: "nodeProduct"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-15549', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-16187', {
   imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _objectSpread({
-    name: "nodeProduct"
+    name: "noWifi"
   }, props))
 });
 figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=69679-579', {
@@ -2521,13 +2521,6 @@ figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=8018
     name: "overPredictions"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-12909', {
-  imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
-  props,
-  example: props => /*#__PURE__*/_jsx(Icon, _objectSpread({
-    name: "pFPS"
-  }, props))
-});
 figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-16161', {
   imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
   props,
@@ -2577,13 +2570,6 @@ figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=2945
     name: "pause"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-11791', {
-  imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
-  props,
-  example: props => /*#__PURE__*/_jsx(Icon, _objectSpread({
-    name: "pay"
-  }, props))
-});
 figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-11921', {
   imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
   props,
@@ -2591,11 +2577,11 @@ figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=2945
     name: "pay"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-15510', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-11791', {
   imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _objectSpread({
-    name: "payProduct"
+    name: "pay"
   }, props))
 });
 figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-11908', {
@@ -2619,6 +2605,13 @@ figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=2945
     name: "paypal"
   }, props))
 });
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-15510', {
+  imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
+  props,
+  example: props => /*#__PURE__*/_jsx(Icon, _objectSpread({
+    name: "payProduct"
+  }, props))
+});
 figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-16122', {
   imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
   props,
@@ -2668,6 +2661,13 @@ figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=2945
     name: "perpetualSwap"
   }, props))
 });
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-12909', {
+  imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
+  props,
+  example: props => /*#__PURE__*/_jsx(Icon, _objectSpread({
+    name: "pFPS"
+  }, props))
+});
 figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-14924', {
   imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
   props,
@@ -2682,6 +2682,13 @@ figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=6609
     name: "pieChartData"
   }, props))
 });
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=76831-2', {
+  imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
+  props,
+  example: props => /*#__PURE__*/_jsx(Icon, _objectSpread({
+    name: "pieChartWithArrow"
+  }, props))
+});
 figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=69679-852', {
   imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
   props,
@@ -2703,21 +2710,21 @@ figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=2945
     name: "pin"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-16942', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-16955', {
   imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _objectSpread({
     name: "planet"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-16955', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-16968', {
   imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _objectSpread({
     name: "planet"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-16968', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-16942', {
   imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _objectSpread({
@@ -2822,18 +2829,18 @@ figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=2945
     name: "privateClientProduct"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-15471', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-16083', {
   imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _objectSpread({
-    name: "proProduct"
+    name: "profile"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-16083', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-15471', {
   imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _objectSpread({
-    name: "profile"
+    name: "proProduct"
   }, props))
 });
 figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-16070', {
@@ -3053,14 +3060,14 @@ figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=2945
     name: "royalty"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-15184', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-14859', {
   imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _objectSpread({
     name: "royalty"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-14859', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-15184', {
   imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _objectSpread({
@@ -3207,25 +3214,25 @@ figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=2945
     name: "signinProduct"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=66093-54', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=69679-423', {
   imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _objectSpread({
-    name: "singleCoin"
+    name: "singlecloud"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=69679-227', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=66093-54', {
   imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _objectSpread({
-    name: "singleNote"
+    name: "singleCoin"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=69679-423', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=69679-227', {
   imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _objectSpread({
-    name: "singlecloud"
+    name: "singleNote"
   }, props))
 });
 figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-12896', {
@@ -3522,14 +3529,14 @@ figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=2945
     name: "sun"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-16890', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-16916', {
   imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _objectSpread({
     name: "support"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-16916', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-16890', {
   imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _objectSpread({
@@ -3550,14 +3557,14 @@ figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=2945
     name: "taxes"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-11726', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-11739', {
   imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _objectSpread({
     name: "taxesReceipt"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-11739', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-11726', {
   imports: ["import { Icon } from '@coinbase/cds-web/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _objectSpread({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web",
-  "version": "9.0.0",
+  "version": "9.0.2",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",
@@ -215,8 +215,8 @@
     "react-dom": "^18.0.0 || ~19.1.2"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^9.0.0",
-    "@coinbase/cds-icons": "^5.16.0",
+    "@coinbase/cds-common": "^9.0.2",
+    "@coinbase/cds-icons": "^5.17.0",
     "@coinbase/cds-illustrations": "^4.40.1",
     "@coinbase/cds-lottie-files": "^3.3.4",
     "@coinbase/cds-utils": "^2.3.5",