@coinbase/cds-web 8.46.1 → 8.47.1

package/CHANGELOG.md

@@ -8,6 +8,16 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.47.1 ((2/19/2026, 01:18 PM PST))
+
+This is an artificial version bump with no new change.
+
+## 8.47.0 (2/19/2026 PST)
+
+#### 🚀 Updates
+
+- Feat: enable Button text customization via font props. [[#408](https://github.com/coinbase/cds/pull/408)]
+
 ## 8.46.1 (2/12/2026 PST)
 
 #### 🐞 Fixes

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,KAA2B,MAAM,OAAO,CAAC;AAEhD,OAAO,KAAK,EACV,aAAa,EACb,QAAQ,EACR,wBAAwB,EACxB,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAGpC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAIxD,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAOzE,eAAO,MAAM,aAAa,MAAM,CAAC;AA8FjC,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,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,IAAI,WAAW,CAAC,KAAK,CAChF,WAAW,EACX,eAAe,CAChB,CAAC;AAEF,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,eA4HpB,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/buttons/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAEhD,OAAO,KAAK,EACV,aAAa,EACb,QAAQ,EACR,wBAAwB,EACxB,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAGpC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAIxD,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAOzE,eAAO,MAAM,aAAa,MAAM,CAAC;AA8FjC,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,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,IAAI,WAAW,CAAC,KAAK,CAChF,WAAW,EACX,eAAe,CAChB,CAAC;AAEF,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,eAqIpB,CAAC"}

package/dts/overlays/tray/__figma__/Tray.figma.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Tray.figma.d.ts.map

package/dts/overlays/tray/__figma__/Tray.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tray.figma.d.ts","sourceRoot":"","sources":["../../../../src/overlays/tray/__figma__/Tray.figma.tsx"],"names":[],"mappings":""}

package/esm/buttons/Button.js

@@ -1,4 +1,4 @@
-const _excluded = ["as", "variant", "loading", "transparent", "block", "compact", "children", "start", "startIcon", "startIconActive", "end", "endIcon", "endIconActive", "flush", "noScaleOnPress", "numberOfLines", "background", "color", "className", "height", "borderColor", "borderWidth", "borderRadius", "accessibilityLabel", "padding", "paddingX", "margin", "minWidth"];
+const _excluded = ["as", "variant", "loading", "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"];
 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; }
@@ -56,6 +56,11 @@ export const Button = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
       flush,
       noScaleOnPress,
       numberOfLines,
+      font = 'headline',
+      fontFamily,
+      fontSize,
+      fontWeight,
+      lineHeight,
       background,
       color,
       className,
@@ -126,7 +131,11 @@ export const Button = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
       }), /*#__PURE__*/_jsx(Text, {
         color: "currentColor",
         display: "inline",
-        font: "headline",
+        font: font,
+        fontFamily: fontFamily,
+        fontSize: fontSize,
+        fontWeight: fontWeight,
+        lineHeight: lineHeight,
         numberOfLines: numberOfLines,
         children: /*#__PURE__*/_jsx("span", {
           className: cx(loading && hiddenCss),

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

@@ -2,14 +2,36 @@ import figma from '@figma/code-connect/react';
 import { Carousel, CarouselItem } from '../';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 figma.connect(Carousel, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=48671-10433', {
+  variant: {
+    platform: 'desktop'
+  },
   imports: ["import { Carousel, CarouselItem } from '@coinbase/cds-web/carousel'"],
-  example: () => /*#__PURE__*/_jsxs(Carousel, {
-    children: [/*#__PURE__*/_jsx(CarouselItem, {
-      id: "1"
-    }), /*#__PURE__*/_jsx(CarouselItem, {
-      id: "2"
-    }), /*#__PURE__*/_jsx(CarouselItem, {
-      id: "3"
-    })]
-  })
+  props: {
+    title: figma.boolean('show header', {
+      true: figma.string('title'),
+      false: undefined
+    }),
+    hidePagination: figma.boolean('show pagination', {
+      true: undefined,
+      false: true
+    })
+  },
+  example: _ref => {
+    let {
+      title,
+      hidePagination
+    } = _ref;
+    return /*#__PURE__*/_jsxs(Carousel, {
+      hidePagination: hidePagination,
+      paginationVariant: "dot",
+      title: title,
+      children: [/*#__PURE__*/_jsx(CarouselItem, {
+        id: "1"
+      }), /*#__PURE__*/_jsx(CarouselItem, {
+        id: "2"
+      }), /*#__PURE__*/_jsx(CarouselItem, {
+        id: "3"
+      })]
+    });
+  }
 });

package/esm/overlays/tray/__figma__/Tray.figma.js

@@ -0,0 +1,191 @@
+import { useId, useState } from 'react';
+import { figma } from '@figma/code-connect';
+import { Button } from '../../../buttons';
+import { useBreakpoints } from '../../../hooks/useBreakpoints';
+import { Pictogram } from '../../../illustrations/Pictogram';
+import { Box } from '../../../layout';
+import { VStack } from '../../../layout/VStack';
+import { PageFooter } from '../../../page/PageFooter';
+import { Text } from '../../../typography/Text';
+import { Tray } from '../Tray';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const FIGMA_URL = 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=74148-11495&m=dev';
+figma.connect(Tray, FIGMA_URL, {
+  variant: {
+    type: 'standard'
+  },
+  imports: ["import { Tray } from '@coinbase/cds-web/overlays/tray/Tray'", "import { PageFooter } from '@coinbase/cds-web/page/PageFooter'", "import { useBreakpoints } from '@coinbase/cds-web/hooks/useBreakpoints'"],
+  props: {
+    title: figma.textContent('SectionHeader')
+  },
+  example: function StandardExample(_ref) {
+    let {
+      title
+    } = _ref;
+    const [visible, setVisible] = useState(false);
+    const {
+      isPhone
+    } = useBreakpoints();
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Button, {
+        onClick: () => setVisible(true),
+        children: "Open Tray"
+      }), visible && /*#__PURE__*/_jsx(Tray, {
+        footer: _ref2 => {
+          let {
+            handleClose
+          } = _ref2;
+          return /*#__PURE__*/_jsx(PageFooter, {
+            borderedTop: true,
+            action: /*#__PURE__*/_jsx(Button, {
+              block: isPhone,
+              onClick: handleClose,
+              children: "Close"
+            }),
+            justifyContent: isPhone ? 'center' : 'flex-end'
+          });
+        },
+        onCloseComplete: () => setVisible(false),
+        pin: isPhone ? 'bottom' : 'right',
+        showHandleBar: isPhone,
+        title: title,
+        children: /*#__PURE__*/_jsx(Text, {
+          color: "fgMuted",
+          paddingBottom: 2,
+          children: "Content goes here."
+        })
+      })]
+    });
+  }
+});
+figma.connect(Tray, FIGMA_URL, {
+  variant: {
+    type: 'illustration'
+  },
+  imports: ["import { Tray } from '@coinbase/cds-web/overlays/tray/Tray'", "import { Pictogram } from '@coinbase/cds-web/illustrations/Pictogram'", "import { useBreakpoints } from '@coinbase/cds-web/hooks/useBreakpoints'"],
+  props: {
+    sectionTitle: figma.textContent('SectionHeader')
+  },
+  example: function IllustrationExample(_ref3) {
+    let {
+      sectionTitle
+    } = _ref3;
+    const [visible, setVisible] = useState(false);
+    const {
+      isPhone
+    } = useBreakpoints();
+    const titleId = useId();
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Button, {
+        onClick: () => setVisible(true),
+        children: "Open Tray"
+      }), visible && /*#__PURE__*/_jsx(Tray, {
+        accessibilityLabelledBy: titleId,
+        onCloseComplete: () => setVisible(false),
+        pin: isPhone ? 'bottom' : 'right',
+        showHandleBar: isPhone,
+        title: /*#__PURE__*/_jsxs(VStack, {
+          gap: {
+            phone: 1.5,
+            tablet: 2,
+            desktop: 2
+          },
+          children: [/*#__PURE__*/_jsx(Pictogram, {
+            name: "addWallet"
+          }), /*#__PURE__*/_jsx(Text, {
+            font: "title3",
+            id: titleId,
+            children: sectionTitle
+          })]
+        }),
+        children: /*#__PURE__*/_jsx(Text, {
+          color: "fgMuted",
+          font: "body",
+          paddingBottom: 2,
+          children: "Content goes here."
+        })
+      })]
+    });
+  }
+});
+figma.connect(Tray, FIGMA_URL, {
+  variant: {
+    type: 'full-bleed image'
+  },
+  imports: ["import { Tray } from '@coinbase/cds-web/overlays/tray/Tray'", "import { useBreakpoints } from '@coinbase/cds-web/hooks/useBreakpoints'"],
+  props: {
+    sectionTitle: figma.textContent('SectionHeader')
+  },
+  example: function FullBleedImageExample(_ref4) {
+    let {
+      sectionTitle
+    } = _ref4;
+    const [visible, setVisible] = useState(false);
+    const {
+      isPhone
+    } = useBreakpoints();
+    const titleId = useId();
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Button, {
+        onClick: () => setVisible(true),
+        children: "Open Tray"
+      }), visible && /*#__PURE__*/_jsx(Tray, {
+        accessibilityLabelledBy: titleId,
+        header: /*#__PURE__*/_jsx(Text, {
+          font: "title3",
+          id: titleId,
+          paddingTop: 2,
+          paddingX: {
+            base: 4,
+            phone: 3
+          },
+          children: sectionTitle
+        }),
+        onCloseComplete: () => setVisible(false),
+        pin: isPhone ? 'bottom' : 'right',
+        showHandleBar: isPhone,
+        styles: {
+          handleBar: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            zIndex: 1
+          },
+          closeButton: {
+            position: 'absolute',
+            top: 'var(--space-4)',
+            right: 'var(--space-4)',
+            zIndex: 1
+          },
+          header: {
+            paddingTop: 0
+          }
+        },
+        title: /*#__PURE__*/_jsx(Box, {
+          flexGrow: 1,
+          marginX: {
+            base: -4,
+            phone: -3
+          },
+          children: /*#__PURE__*/_jsx("img", {
+            alt: "Full Bleed",
+            height: 180,
+            src: "image.jpg",
+            style: {
+              objectFit: 'cover',
+              pointerEvents: 'none'
+            },
+            width: "100%"
+          })
+        }),
+        children: /*#__PURE__*/_jsx(Text, {
+          color: "fgMuted",
+          font: "body",
+          paddingBottom: 2,
+          children: "Content goes here."
+        })
+      })]
+    });
+  }
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web",
-  "version": "8.46.1",
+  "version": "8.47.1",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",
@@ -207,7 +207,7 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.46.1",
+    "@coinbase/cds-common": "^8.47.1",
     "@coinbase/cds-icons": "^5.11.0",
     "@coinbase/cds-illustrations": "^4.31.0",
     "@coinbase/cds-lottie-files": "^3.3.4",