@coinbase/cds-web 8.66.1 → 8.67.0

package/CHANGELOG.md

@@ -8,6 +8,18 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.67.0 (5/1/2026 PST)
+
+#### 🚀 Updates
+
+- Feat: Add legalText prop to PageFooter component. [[#661](https://github.com/coinbase/cds/pull/661)]
+
+## 8.66.2 (4/28/2026 PST)
+
+#### 🐞 Fixes
+
+- Fix SegmentedTab color not applied during Suspense transition. [[#650](https://github.com/coinbase/cds/pull/650)]
+
 ## 8.66.1 ((4/27/2026, 12:59 PM PST))
 
 This is an artificial version bump with no new change.

package/dts/page/PageFooter.d.ts

@@ -13,6 +13,10 @@ export type PageFooterBaseProps = SharedProps &
      * Set the background color of the box.
      */
     background?: ThemeVars.Color;
+    /**
+     * Optional legal text rendered below the action in a pre-styled caption. Right-aligned on desktop, centered on mobile/responsive web.
+     */
+    legalText?: string;
   };
 export declare const pageFooterPaddingX: ResponsiveProps<StaticStyleProps>['paddingX'];
 export declare const pageFooterJustifyContent: ResponsiveProps<StaticStyleProps>['justifyContent'];

package/dts/page/PageFooter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageFooter.d.ts","sourceRoot":"","sources":["../../src/page/PageFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAEjE,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAE9E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAExD,OAAO,EAAO,KAAK,iBAAiB,EAAE,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,KAAK,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAE9E,MAAM,MAAM,mBAAmB,GAAG,WAAW,GAC3C,cAAc,GAAG;IACf;+HAC2H;IAC3H,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;CAC9B,CAAC;AAEJ,eAAO,MAAM,kBAAkB,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAC,UAAU,CAInE,CAAC;AAEX,eAAO,MAAM,wBAAwB,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAC,gBAAgB,CAI/E,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,WAAW,CAAC,eAAe,CACvD,QAAQ,CAAC,iBAAiB,CAAC,EAC3B,mBAAmB,CACpB,CAAC;AACF,eAAO,MAAM,UAAU,gIA0BtB,CAAC"}
+{"version":3,"file":"PageFooter.d.ts","sourceRoot":"","sources":["../../src/page/PageFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAEjE,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAE9E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAExD,OAAO,EAAO,KAAK,iBAAiB,EAAE,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE3E,OAAO,KAAK,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAG9E,MAAM,MAAM,mBAAmB,GAAG,WAAW,GAC3C,cAAc,GAAG;IACf;+HAC2H;IAC3H,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAC7B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEJ,eAAO,MAAM,kBAAkB,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAC,UAAU,CAInE,CAAC;AAEX,eAAO,MAAM,wBAAwB,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAC,gBAAgB,CAI/E,CAAC;AAQX,MAAM,MAAM,eAAe,GAAG,WAAW,CAAC,eAAe,CACvD,QAAQ,CAAC,iBAAiB,CAAC,EAC3B,mBAAmB,CACpB,CAAC;AACF,eAAO,MAAM,UAAU,gIAoCtB,CAAC"}

package/dts/tabs/SegmentedTab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedTab.d.ts","sourceRoot":"","sources":["../../src/tabs/SegmentedTab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AACtE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAEjE,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAOlE,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAkCzE,MAAM,MAAM,qBAAqB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,kBAAkB,GACnF,QAAQ,CAAC,KAAK,CAAC,GAAG;IAChB;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAC9B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;CACzB,CAAC;AAEJ,MAAM,MAAM,iBAAiB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,qBAAqB,CAAC,KAAK,CAAC,GAAG;IAC5F,+DAA+D;IAC/D,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CACxD,CAAC;AAMF,KAAK,qBAAqB,GAAG,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,EACzD,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAA;CAAE,KAC9E,KAAK,CAAC,YAAY,CAAC;AAExB,QAAA,MAAM,qBAAqB;;;;IAzBvB;;;OAGG;kBACW,SAAS,CAAC,KAAK;IAC7B;;;OAGG;YACK,SAAS,CAAC,KAAK;;IAIzB,+DAA+D;mCAClC,KAAK,CAAC,UAAU,KAAK,IAAI;4CAyGvD,CAAC;AAIF,eAAO,MAAM,YAAY,EAA4B,qBAAqB,CAAC"}
+{"version":3,"file":"SegmentedTab.d.ts","sourceRoot":"","sources":["../../src/tabs/SegmentedTab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAC7D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAEjE,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAMlE,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AA8BzE,MAAM,MAAM,qBAAqB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,kBAAkB,GACnF,QAAQ,CAAC,KAAK,CAAC,GAAG;IAChB;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAC9B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;CACzB,CAAC;AAEJ,MAAM,MAAM,iBAAiB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,qBAAqB,CAAC,KAAK,CAAC,GAAG;IAC5F,+DAA+D;IAC/D,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CACxD,CAAC;AAMF,KAAK,qBAAqB,GAAG,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,EACzD,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAA;CAAE,KAC9E,KAAK,CAAC,YAAY,CAAC;AAExB,QAAA,MAAM,qBAAqB;;;;IAzBvB;;;OAGG;kBACW,SAAS,CAAC,KAAK;IAC7B;;;OAGG;YACK,SAAS,CAAC,KAAK;;IAIzB,+DAA+D;mCAClC,KAAK,CAAC,UAAU,KAAK,IAAI;4CAsGvD,CAAC;AAIF,eAAO,MAAM,YAAY,EAA4B,qBAAqB,CAAC"}

package/esm/page/PageFooter.js

@@ -1,4 +1,4 @@
-const _excluded = ["action", "height", "justifyContent", "paddingX", "paddingY", "role"];
+const _excluded = ["action", "legalText", "height", "justifyContent", "paddingX", "paddingY", "role"];
 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; }
@@ -10,7 +10,9 @@ import React, { forwardRef, memo } from 'react';
 import { pageFooterHeight } from '@coinbase/cds-common/tokens/page';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box } from '../layout/Box';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { VStack } from '../layout/VStack';
+import { Text } from '../typography/Text';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const pageFooterPaddingX = {
   phone: 3,
   tablet: 4,
@@ -21,11 +23,17 @@ export const pageFooterJustifyContent = {
   tablet: 'flex-end',
   desktop: 'flex-end'
 };
+const legalTextAlignItems = {
+  phone: 'center',
+  tablet: 'flex-end',
+  desktop: 'flex-end'
+};
 export const PageFooter = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
   const mergedProps = useComponentConfig('PageFooter', _props);
   const {
       action,
-      height = pageFooterHeight,
+      legalText,
+      height = legalText ? undefined : pageFooterHeight,
       justifyContent = pageFooterJustifyContent,
       paddingX = pageFooterPaddingX,
       paddingY = 1.5,
@@ -40,6 +48,14 @@ export const PageFooter = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref
     paddingY: paddingY,
     role: role
   }, props), {}, {
-    children: action
+    children: legalText ? /*#__PURE__*/_jsxs(VStack, {
+      alignItems: legalTextAlignItems,
+      gap: 2,
+      children: [action, /*#__PURE__*/_jsx(Text, {
+        color: "fgMuted",
+        font: "legal",
+        children: legalText
+      })]
+    }) : action
   }));
 }));

package/esm/page/__figma__/PageFooter.figma.js

@@ -1,17 +1,61 @@
+import React from 'react';
 import { figma } from '@figma/code-connect';
+import { Button } from '../../buttons/Button';
+import { ButtonGroup } from '../../buttons/ButtonGroup';
 import { PageFooter } from '../PageFooter';
-import { jsx as _jsx } from "react/jsx-runtime";
-figma.connect(PageFooter, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=17685%3A3266', {
-  imports: ["import { PageFooter } from '@coinbase/cds-web/page/PageFooter'"],
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const url = 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=17685%3A3266';
+figma.connect(PageFooter, url, {
+  imports: ["import { PageFooter } from '@coinbase/cds-web/page/PageFooter'", "import { Button } from '@coinbase/cds-web/buttons/Button'"],
+  variant: {
+    '# of actions': '1'
+  },
   props: {
-    action: figma.children('ButtonGroup')
+    action: figma.children('Button'),
+    legalText: figma.boolean('show legal text', {
+      true: 'Your legal text here.',
+      false: undefined
+    })
   },
   example: _ref => {
     let {
-      action
+      legalText
     } = _ref;
     return /*#__PURE__*/_jsx(PageFooter, {
-      action: action
+      action: /*#__PURE__*/_jsx(Button, {
+        variant: "primary",
+        children: "Next"
+      }),
+      legalText: legalText
+    });
+  }
+});
+figma.connect(PageFooter, url, {
+  imports: ["import { PageFooter } from '@coinbase/cds-web/page/PageFooter'", "import { Button } from '@coinbase/cds-web/buttons/Button'", "import { ButtonGroup } from '@coinbase/cds-web/buttons/ButtonGroup'"],
+  variant: {
+    '# of actions': '2'
+  },
+  props: {
+    legalText: figma.boolean('show legal text', {
+      true: 'Your legal text here.',
+      false: undefined
+    })
+  },
+  example: _ref2 => {
+    let {
+      legalText
+    } = _ref2;
+    return /*#__PURE__*/_jsx(PageFooter, {
+      action: /*#__PURE__*/_jsxs(ButtonGroup, {
+        children: [/*#__PURE__*/_jsx(Button, {
+          variant: "secondary",
+          children: "Back"
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "primary",
+          children: "Next"
+        })]
+      }),
+      legalText: legalText
     });
   }
 });

package/esm/tabs/SegmentedTab.js

@@ -6,17 +6,14 @@ 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, useCallback, useMemo } from 'react';
+import React, { forwardRef, memo, useCallback } from 'react';
 import { useTabsContext } from '@coinbase/cds-common/tabs/TabsContext';
-import { m as motion } from 'framer-motion';
 import { cx } from '../cx';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box } from '../layout/Box';
 import { Pressable } from '../system/Pressable';
 import { Text } from '../typography/Text';
-import { tabsTransitionConfig } from './Tabs';
 import { jsx as _jsx } from "react/jsx-runtime";
-const MotionBox = motion(Box);
 const insetFocusRingCss = "insetFocusRingCss-i13o7yik";
 const buttonCss = "buttonCss-bijg88k";
 const buttonDisabledCss = "buttonDisabledCss-b265t1b";
@@ -52,13 +49,6 @@ const SegmentedTabComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props,
     updateActiveTab(id);
     onClick === null || onClick === void 0 || onClick(id, event);
   }, [id, updateActiveTab, onClick]);
-  const motionProps = useMemo(() => ({
-    animate: {
-      color: "var(--color-".concat(isActive ? activeColor : color, ")")
-    },
-    transition: tabsTransitionConfig,
-    initial: false
-  }), [activeColor, color, isActive]);
   return /*#__PURE__*/_jsx(Pressable, _objectSpread(_objectSpread({
     ref: ref,
     "aria-selected": isActive,
@@ -77,12 +67,12 @@ const SegmentedTabComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props,
     textTransform: textTransform,
     type: "button"
   }, props), {}, {
-    children: /*#__PURE__*/_jsx(MotionBox, _objectSpread(_objectSpread({
+    children: /*#__PURE__*/_jsx(Box, {
       as: "span",
+      color: isActive ? activeColor : color,
       justifyContent: "center",
       paddingX: 2,
-      paddingY: 1
-    }, motionProps), {}, {
+      paddingY: 1,
       children: typeof label === 'string' ? /*#__PURE__*/_jsx(Text, {
         color: "currentColor",
         font: font,
@@ -94,7 +84,7 @@ const SegmentedTabComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props,
         textTransform: textTransform,
         children: label
       }) : label
-    }))
+    })
   }));
 }));
 SegmentedTabComponent.displayName = 'SegmentedTab';

package/package.json

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