@coinbase/cds-web 8.55.0 → 8.56.0

package/esm/cards/NudgeCard.js

@@ -45,7 +45,8 @@ const getCardBodyPaddingProps = _ref => {
   };
 };
 /**
- * @deprecated Use `MessagingCard` with `type="nudge"` instead. NudgeCard will be removed in a future major release.
+ * @deprecated Use `MessagingCard` with `type="nudge"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v9
  *
  * Migration guide:
  * ```tsx

package/esm/cards/UpsellCard.js

@@ -6,7 +6,8 @@ import { Pressable } from '../system';
 import { Text } from '../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * @deprecated Use `MessagingCard` with `type="upsell"` instead. UpsellCard will be removed in a future major release.
+ * @deprecated Use `MessagingCard` with `type="upsell"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v9
  *
  * Migration guide:
  * ```tsx

package/esm/cells/CellMedia.js

@@ -5,7 +5,8 @@ import { Box } from '../layout/Box';
 import { RemoteImage } from '../media/RemoteImage';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
- * @deprecated This component will be removed in a future release. Pass media directly via the `media` prop.
+ * @deprecated Pass media directly via the `media` prop. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v9
  * For example: `<Avatar src={...} />`, `<Icon name={...} />`, `<RemoteImage source={...} />`, or a Pictogram.
  */
 export const CellMedia = /*#__PURE__*/memo(function CellMedia(props) {

package/esm/cells/ContentCell.js

@@ -23,11 +23,13 @@ const truncationCss = "truncationCss-t1vpzve9";
 export const contentCellDefaultElement = 'div';
 
 /**
- * @deprecated this component will be removed in a future version. Use ListCell instead.
+ * @deprecated Use ListCell instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v9
  */
 
 /**
- * @deprecated this component will be removed in a future version. Use ListCell instead.
+ * @deprecated Use ListCell instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v9
  */
 export const ContentCell = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   var _props$borderRadius;

package/esm/chips/SelectChip.js

@@ -16,12 +16,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export const SELECT_CHIP_DEFAULT_TEST_ID = 'select-chip';
 
 /**
- * @deprecated This component is deprecated. Please use the new SelectChip alpha component instead.
+ * @deprecated This component is deprecated. Please use the new SelectChip alpha component instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v9
  * @see {@link @coinbase/cds-web/alpha/select-chip/SelectChip}
  */
 
 /**
- * @deprecated This component is deprecated. Please use the new SelectChip alpha component instead.
+ * @deprecated This component is deprecated. Please use the new SelectChip alpha component instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v9
  * @see {@link @coinbase/cds-web/alpha/select-chip/SelectChip}
  */
 export const SelectChip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function SelectChip(_ref, ref) {

package/esm/chips/TabbedChips.js

@@ -140,7 +140,8 @@ const TabbedChipsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function
 TabbedChipsComponent.displayName = 'TabbedChips';
 
 /**
- * @deprecated Use `TabbedChips(Alpha)` instead.
+ * @deprecated Use `TabbedChips(Alpha)` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v9
  */
 export const TabbedChips = TabbedChipsComponent;
 import "./TabbedChips.css";

package/esm/controls/CheckboxGroup.js

@@ -16,7 +16,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const checkboxCss = "checkboxCss-cmjsxse";
 
 /**
- * @deprecated CheckboxGroup is deprecated. Use ControlGroup with role="group" instead.
+ * @deprecated CheckboxGroup is deprecated. Use ControlGroup with role="group" instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v8
  *
  * @example
  * // Instead of:
@@ -35,7 +36,8 @@ const checkboxCss = "checkboxCss-cmjsxse";
  */
 
 /**
- * @deprecated CheckboxGroup is deprecated. Use ControlGroup with role="group" instead.
+ * @deprecated CheckboxGroup is deprecated. Use ControlGroup with role="group" instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v8
  */
 
 // Follows behavior describe in https://www.w3.org/TR/wai-aria-practices/examples/checkbox/checkbox-2/checkbox-2.html

package/esm/controls/RadioGroup.js

@@ -15,7 +15,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export { Radio, useHandleRadioSelect };
 
 /**
- * @deprecated RadioGroup is deprecated. Use ControlGroup with role="radiogroup" instead.
+ * @deprecated RadioGroup is deprecated. Use ControlGroup with role="radiogroup" instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v6
  *
  * @example
  * // Instead of:
@@ -33,7 +34,8 @@ export { Radio, useHandleRadioSelect };
  */
 
 /**
- * @deprecated RadioGroup is deprecated. Use ControlGroup with role="radiogroup" instead.
+ * @deprecated RadioGroup is deprecated. Use ControlGroup with role="radiogroup" instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v8
  */
 
 const RadioGroupWithRef = /*#__PURE__*/forwardRef(function RadioGroup(_ref, ref) {
@@ -80,6 +82,7 @@ const RadioGroupWithRef = /*#__PURE__*/forwardRef(function RadioGroup(_ref, ref)
 });
 
 /**
- * @deprecated RadioGroup is deprecated. Use ControlGroup with role="radiogroup" instead.
+ * @deprecated RadioGroup is deprecated. Use ControlGroup with role="radiogroup" instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v6
  */
 export const RadioGroup = /*#__PURE__*/memo(RadioGroupWithRef);

package/esm/controls/SegmentedControl.js

@@ -106,7 +106,8 @@ function SegmentedControlInternal(props, ref) {
 }
 
 /**
- * @deprecated SegmentedControl is deprecated and will be removed in a future version. Please use Tabs or SegmentedTabs instead.
+ * @deprecated SegmentedControl is deprecated and will be removed in a future version. Please use Tabs or SegmentedTabs instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v9
  */
 export const SegmentedControl = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(SegmentedControlInternal));
 SegmentedControl.displayName = 'SegmentedControl';

package/esm/controls/Select.js

@@ -18,7 +18,8 @@ import { SelectTrigger } from './SelectTrigger';
 import { useRefocusTrigger } from './useRefocusTrigger';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
- * @deprecated Please use the new Select alpha component instead.
+ * @deprecated Please use the new Select alpha component instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v9
  */
 export const Select = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Select(_ref, ref) {
   let {

package/esm/hooks/useCheckboxGroupState.js

@@ -4,7 +4,8 @@ import { useGroupToggler } from '@coinbase/cds-common/hooks/useGroupToggler';
  *
  * @param values - An array of all possible options. Make sure the array doesn't change if it's the same values so that the handlers will also stay the same.
  * @param initialState - Initial checked option values.
- * @deprecated Do not use this.
+ * @deprecated Do not use this. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v9
  * @returns [
  *  state,
     {

package/esm/icons/Icon.css

@@ -1,4 +1,4 @@
-@layer cds{.iconCss-ijgxn1p{color:currentColor;font-family:'CoinbaseIcons';font-weight:400;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:block;-webkit-text-decoration:none;text-decoration:none;}.iconCss-ijgxn1p > *{-webkit-transition:fill 150ms ease-in-out;transition:fill 150ms ease-in-out;}
+@layer cds{.iconCss-ijgxn1p{color:currentColor;font-family:'CoinbaseIcons';font-weight:400;font-style:normal;font-variant:normal;text-rendering:geometricPrecision;line-height:1;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:block;-webkit-text-decoration:none;text-decoration:none;}.iconCss-ijgxn1p > *{-webkit-transition:fill 150ms ease-in-out;transition:fill 150ms ease-in-out;}
 .xs-x1o2vka7{width:var(--iconSize-xs);height:var(--iconSize-xs);font-size:var(--iconSize-xs);}
 .s-smpvpdm{width:var(--iconSize-s);height:var(--iconSize-s);font-size:var(--iconSize-s);}
 .m-m1j7b465{width:var(--iconSize-m);height:var(--iconSize-m);font-size:var(--iconSize-m);}

package/esm/layout/Group.js

@@ -32,7 +32,8 @@ const fallbackRenderItem = _ref2 => {
 };
 
 /**
- * @deprecated Use `Box`, `HStack` or `VStack` instead.
+ * @deprecated Use `Box`, `HStack` or `VStack` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v8
  * @danger Make sure to add a `key` prop to each item.
  */
 export const Group = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref3, ref) => {

package/esm/loaders/MaterialSpinner.js

@@ -9,7 +9,8 @@ import { useMotionProps } from '../motion/useMotionProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 const circleCss = "circleCss-c1agunln";
 /**
- * @deprecated Use Spinner component instead
+ * @deprecated Use Spinner component instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v7
  */
 export const MaterialSpinner = /*#__PURE__*/memo(_ref => {
   let {

package/esm/media/Hexagon.js

@@ -36,7 +36,8 @@ export const HexagonAvatarClipPath = () => {
 HexagonAvatarClipPath.displayName = 'HexagonAvatarClipPath';
 
 /**
- * @deprecated will be removed in a future version
+ * @deprecated This will be removed in a future major release.
+ * @deprecationExpectedRemoval v9
  */
 export const hexagonSvgTransformStyles = {
   standard: {

package/esm/overlays/useModal.js

@@ -1,6 +1,7 @@
 import { useModal } from '@coinbase/cds-common/overlays/useModal';
 
 /**
- * @deprecated Use the visible and onRequestClose props as outlined in the docs here https://cds.coinbase.com/components/modal#get-started
+ * @deprecated Use the visible and onRequestClose props as outlined in the docs here https://cds.coinbase.com/components/modal#get-started. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v7
  */
 export { useModal };

package/esm/system/ButtonOrLink.js

@@ -19,7 +19,10 @@ import { getTabIndex, handleButtonFocusOnSafariOrFirefoxOnMac, isNativeClick, is
 import { jsx as _jsx } from "react/jsx-runtime";
 const accessibilityCss = "accessibilityCss-akx0ly6";
 
-/** @deprecated This component will be removed in a future version. Use Pressable instead. */
+/**
+ * @deprecated Use Pressable instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v9
+ */
 export const ButtonOrLink = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       children,

package/esm/system/PressableOpacity.js

@@ -11,11 +11,20 @@ import { Pressable } from './Pressable';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const pressableOpacityDefaultElement = 'button';
 
-/** @deprecated This component will be removed in a future version. Use `<Pressable background="transparent">` instead. */
+/**
+ * @deprecated Use `<Pressable background="transparent">` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v9
+ */
 
-/** @deprecated This component will be removed in a future version. Use `<Pressable background="transparent">` instead. */
+/**
+ * @deprecated Use `<Pressable background="transparent">` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v8
+ */
 
-/** @deprecated This component will be removed in a future version. Use `<Pressable background="transparent">` instead. */
+/**
+ * @deprecated Use `<Pressable background="transparent">` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v8
+ */
 export const PressableOpacity = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       children,

package/esm/tabs/TabNavigation.js

@@ -37,7 +37,8 @@ const fallbackLayout = {
 /**
  * TabNavigation renders a horizontal, tab-based navigation bar.
  * This component has a opinionated default style, but allows for customization through custom Component props.
- * @deprecated Use Tabs instead.
+ * @deprecated Use Tabs instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v8
  */
 const TabNavigationComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forwardedRef) => {
   var _scrollRef$current, _scrollRef$current2, _scrollRef$current3;

package/esm/themes/coinbaseDenseTheme.js

@@ -6,7 +6,10 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 import { coinbaseTheme } from './coinbaseTheme';
 export const coinbaseDenseThemeId = 'coinbase-dense';
 
-/** @deprecated This theme was created to test backwards compatibility, it is not officially supported by CDS. Please copy it into your own repo and modify it as needed. Do not import it directly from CDS. */
+/**
+ * @deprecated This theme was created to test backwards compatibility, it is not officially supported by CDS. Please copy it into your own repo and modify it as needed. Do not import it directly from CDS. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v9
+ */
 export const coinbaseDenseTheme = _objectSpread(_objectSpread({}, coinbaseTheme), {}, {
   id: coinbaseDenseThemeId,
   space: {

package/esm/visualizations/Counter.js

@@ -5,7 +5,8 @@ const containerCss = "containerCss-cw9uypc";
 const hiddenCss = "hiddenCss-hy2p56v";
 const visibleCss = "visibleCss-vt3gpqt";
 /**
- * @deprecated This component will be removed from CDS in a future version. It has been moved to cds-web-sparkline.
+ * @deprecated Moved to cds-web-sparkline. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v6
  */
 export const Counter = _ref => {
   let {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web",
-  "version": "8.55.0",
+  "version": "8.56.0",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",
@@ -207,9 +207,9 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.55.0",
+    "@coinbase/cds-common": "^8.56.0",
     "@coinbase/cds-icons": "^5.13.0",
-    "@coinbase/cds-illustrations": "^4.34.0",
+    "@coinbase/cds-illustrations": "^4.35.0",
     "@coinbase/cds-lottie-files": "^3.3.4",
     "@coinbase/cds-utils": "^2.3.5",
     "@floating-ui/react-dom": "^2.1.1",