@coinbase/cds-web 8.25.1 → 8.27.0

package/esm/alpha/select/Select.js

@@ -1,4 +1,4 @@
-const _excluded = ["value", "type", "options", "onChange", "open", "setOpen", "disabled", "disableClickOutsideClose", "placeholder", "helperText", "compact", "label", "labelVariant", "accessibilityLabel", "accessibilityRoles", "controlAccessibilityLabel", "selectAllLabel", "emptyOptionsLabel", "clearAllLabel", "hideSelectAll", "defaultOpen", "startNode", "endNode", "variant", "maxSelectedOptionsToShow", "hiddenSelectedOptionsLabel", "removeSelectedOptionAccessibilityLabel", "accessory", "media", "end", "SelectOptionComponent", "SelectAllOptionComponent", "SelectDropdownComponent", "SelectControlComponent", "SelectEmptyDropdownContentsComponent", "style", "styles", "className", "classNames", "testID"];
+const _excluded = ["value", "type", "options", "onChange", "open", "setOpen", "disabled", "disableClickOutsideClose", "placeholder", "helperText", "compact", "label", "labelVariant", "accessibilityLabel", "accessibilityRoles", "controlAccessibilityLabel", "selectAllLabel", "emptyOptionsLabel", "clearAllLabel", "hideSelectAll", "defaultOpen", "startNode", "endNode", "variant", "maxSelectedOptionsToShow", "hiddenSelectedOptionsLabel", "removeSelectedOptionAccessibilityLabel", "accessory", "media", "end", "SelectOptionComponent", "SelectAllOptionComponent", "SelectDropdownComponent", "SelectControlComponent", "SelectEmptyDropdownContentsComponent", "SelectOptionGroupComponent", "style", "styles", "className", "classNames", "testID"];
 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; }
@@ -19,36 +19,16 @@ import { DefaultSelectControl } from './DefaultSelectControl';
 import { DefaultSelectDropdown } from './DefaultSelectDropdown';
 import { DefaultSelectEmptyDropdownContents } from './DefaultSelectEmptyDropdownContents';
 import { DefaultSelectOption } from './DefaultSelectOption';
+import { DefaultSelectOptionGroup } from './DefaultSelectOptionGroup';
+
+// Re-export all types for backward compatibility
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Re-export the type guard function
+export { isSelectOptionGroup } from './types';
 export const defaultAccessibilityRoles = {
   dropdown: 'listbox',
   option: 'option'
 };
-
-/**
- * Configuration for a single option in the Select component
- */
-
-/**
- * Props for individual option components within the Select dropdown
- */
-
-/**
- * Custom UI to render for an option in the Select component options array
- */
-
-/**
- * Props for the select control component (the clickable input that opens the dropdown)
- */
-
-/**
- * Props for the dropdown component that contains the list of options
- */
-
-/**
- * Props for the Select component
- */
-
 const SelectBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       value,
@@ -86,6 +66,7 @@ const SelectBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
       SelectDropdownComponent = DefaultSelectDropdown,
       SelectControlComponent = DefaultSelectControl,
       SelectEmptyDropdownContentsComponent = DefaultSelectEmptyDropdownContents,
+      SelectOptionGroupComponent = DefaultSelectOptionGroup,
       style,
       styles,
       className,
@@ -103,7 +84,8 @@ const SelectBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
     floatingStyles
   } = useFloating({
     open,
-    middleware: [flip()]
+    middleware: [flip()],
+    placement: 'bottom-start'
   });
   useClickOutside(() => !disableClickOutsideClose && setOpen(false), {
     ref: refs.floating,
@@ -136,8 +118,9 @@ const SelectBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
     optionDescription: styles === null || styles === void 0 ? void 0 : styles.optionDescription,
     selectAllDivider: styles === null || styles === void 0 ? void 0 : styles.selectAllDivider,
     emptyContentsContainer: styles === null || styles === void 0 ? void 0 : styles.emptyContentsContainer,
-    emptyContentsText: styles === null || styles === void 0 ? void 0 : styles.emptyContentsText
-  }), [floatingStyles, styles === null || styles === void 0 ? void 0 : styles.dropdown, styles === null || styles === void 0 ? void 0 : styles.option, styles === null || styles === void 0 ? void 0 : styles.optionBlendStyles, styles === null || styles === void 0 ? void 0 : styles.optionCell, styles === null || styles === void 0 ? void 0 : styles.optionContent, styles === null || styles === void 0 ? void 0 : styles.optionLabel, styles === null || styles === void 0 ? void 0 : styles.optionDescription, styles === null || styles === void 0 ? void 0 : styles.selectAllDivider, styles === null || styles === void 0 ? void 0 : styles.emptyContentsContainer, styles === null || styles === void 0 ? void 0 : styles.emptyContentsText]);
+    emptyContentsText: styles === null || styles === void 0 ? void 0 : styles.emptyContentsText,
+    optionGroup: styles === null || styles === void 0 ? void 0 : styles.optionGroup
+  }), [floatingStyles, styles === null || styles === void 0 ? void 0 : styles.dropdown, styles === null || styles === void 0 ? void 0 : styles.option, styles === null || styles === void 0 ? void 0 : styles.optionBlendStyles, styles === null || styles === void 0 ? void 0 : styles.optionCell, styles === null || styles === void 0 ? void 0 : styles.optionContent, styles === null || styles === void 0 ? void 0 : styles.optionLabel, styles === null || styles === void 0 ? void 0 : styles.optionDescription, styles === null || styles === void 0 ? void 0 : styles.selectAllDivider, styles === null || styles === void 0 ? void 0 : styles.emptyContentsContainer, styles === null || styles === void 0 ? void 0 : styles.emptyContentsText, styles === null || styles === void 0 ? void 0 : styles.optionGroup]);
   const dropdownClassNames = useMemo(() => ({
     root: classNames === null || classNames === void 0 ? void 0 : classNames.dropdown,
     option: classNames === null || classNames === void 0 ? void 0 : classNames.option,
@@ -147,8 +130,9 @@ const SelectBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
     optionDescription: classNames === null || classNames === void 0 ? void 0 : classNames.optionDescription,
     selectAllDivider: classNames === null || classNames === void 0 ? void 0 : classNames.selectAllDivider,
     emptyContentsContainer: classNames === null || classNames === void 0 ? void 0 : classNames.emptyContentsContainer,
-    emptyContentsText: classNames === null || classNames === void 0 ? void 0 : classNames.emptyContentsText
-  }), [classNames === null || classNames === void 0 ? void 0 : classNames.dropdown, classNames === null || classNames === void 0 ? void 0 : classNames.option, classNames === null || classNames === void 0 ? void 0 : classNames.optionCell, classNames === null || classNames === void 0 ? void 0 : classNames.optionContent, classNames === null || classNames === void 0 ? void 0 : classNames.optionLabel, classNames === null || classNames === void 0 ? void 0 : classNames.optionDescription, classNames === null || classNames === void 0 ? void 0 : classNames.selectAllDivider, classNames === null || classNames === void 0 ? void 0 : classNames.emptyContentsContainer, classNames === null || classNames === void 0 ? void 0 : classNames.emptyContentsText]);
+    emptyContentsText: classNames === null || classNames === void 0 ? void 0 : classNames.emptyContentsText,
+    optionGroup: classNames === null || classNames === void 0 ? void 0 : classNames.optionGroup
+  }), [classNames === null || classNames === void 0 ? void 0 : classNames.dropdown, classNames === null || classNames === void 0 ? void 0 : classNames.option, classNames === null || classNames === void 0 ? void 0 : classNames.optionCell, classNames === null || classNames === void 0 ? void 0 : classNames.optionContent, classNames === null || classNames === void 0 ? void 0 : classNames.optionLabel, classNames === null || classNames === void 0 ? void 0 : classNames.optionDescription, classNames === null || classNames === void 0 ? void 0 : classNames.selectAllDivider, classNames === null || classNames === void 0 ? void 0 : classNames.emptyContentsContainer, classNames === null || classNames === void 0 ? void 0 : classNames.emptyContentsText, classNames === null || classNames === void 0 ? void 0 : classNames.optionGroup]);
   const containerRef = useRef(null);
   useImperativeHandle(ref, () => Object.assign(containerRef.current, {
     open,
@@ -194,6 +178,7 @@ const SelectBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
         SelectAllOptionComponent: SelectAllOptionComponent,
         SelectEmptyDropdownContentsComponent: SelectEmptyDropdownContentsComponent,
         SelectOptionComponent: SelectOptionComponent,
+        SelectOptionGroupComponent: SelectOptionGroupComponent,
         accessibilityLabel: accessibilityLabel,
         accessibilityRoles: accessibilityRoles,
         accessory: accessory,

package/esm/alpha/select/index.js

@@ -3,4 +3,6 @@ export * from './DefaultSelectControl';
 export * from './DefaultSelectDropdown';
 export * from './DefaultSelectEmptyDropdownContents';
 export * from './DefaultSelectOption';
-export * from './Select';
+export * from './DefaultSelectOptionGroup';
+export * from './Select';
+export * from './types';

package/esm/alpha/select/types.js

@@ -0,0 +1,46 @@
+/**
+ * Configuration for a single option in the Select component
+ */
+
+/**
+ * Props for individual option components within the Select dropdown
+ */
+
+/**
+ * Custom UI to render for an option in the Select component options array
+ */
+
+/**
+ * Configuration for a group of options in the Select component
+ */
+
+/**
+ * Props for the option group component in the Select dropdown
+ */
+
+/**
+ * Custom UI to render for an option group in the Select component options array
+ */
+
+/**
+ * Array of options for the Select component. Can be individual options or groups with `label` and `options`
+ */
+
+/**
+ * Type guard to check if an option is a group
+ */
+export function isSelectOptionGroup(option) {
+  return 'options' in option && Array.isArray(option.options) && 'label' in option;
+}
+
+/**
+ * Props for the dropdown component that contains the list of options
+ */
+
+/**
+ * Props for the select control component (the clickable input that opens the dropdown)
+ */
+
+/**
+ * Props for the Select component
+ */

package/esm/alpha/select-chip/SelectChip.js

@@ -0,0 +1,50 @@
+const _excluded = ["invertColorScheme", "numberOfLines"];
+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; }
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+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); }
+import React, { forwardRef, memo, useMemo } from 'react';
+import { Select } from '../select/Select';
+import { SelectChipControl } from './SelectChipControl';
+
+/**
+ * Chip-styled Select control built on top of the Alpha Select.
+ * Supports both single and multi selection via Select's `type` prop.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Creates a wrapper component that injects invertColorScheme and numberOfLines
+ * into SelectChipControl. This is needed because Select doesn't pass these props
+ * to SelectControlComponent, but SelectChipControl requires them.
+ */
+function createSelectChipControlWrapper(invertColorScheme, numberOfLines) {
+  return /*#__PURE__*/memo(/*#__PURE__*/forwardRef((controlProps, controlRef) => {
+    return /*#__PURE__*/_jsx(SelectChipControl, _objectSpread(_objectSpread({}, controlProps), {}, {
+      ref: controlRef,
+      invertColorScheme: invertColorScheme,
+      numberOfLines: numberOfLines
+    }));
+  }));
+}
+const SelectChipComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      invertColorScheme,
+      numberOfLines
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const WrappedSelectChipControl = useMemo(() => createSelectChipControlWrapper(invertColorScheme, numberOfLines), [invertColorScheme, numberOfLines]);
+  return /*#__PURE__*/_jsx(Select, _objectSpread({
+    ref: ref,
+    SelectControlComponent: WrappedSelectChipControl,
+    styles: _objectSpread({
+      dropdown: {
+        width: 'max-content'
+      }
+    }, props.styles)
+  }, props));
+}));
+SelectChipComponent.displayName = 'SelectChip';
+export const SelectChip = SelectChipComponent;

package/esm/alpha/select-chip/SelectChipControl.js

@@ -0,0 +1,116 @@
+import React, { forwardRef, memo, useMemo } from 'react';
+import { MediaChip } from '../../chips';
+import { AnimatedCaret } from '../../motion/AnimatedCaret';
+import { isSelectOptionGroup } from '../select/types';
+import { jsx as _jsx } from "react/jsx-runtime";
+const SelectChipControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    type,
+    options,
+    value,
+    placeholder,
+    setOpen,
+    startNode,
+    endNode: customEndNode,
+    open,
+    accessibilityLabel,
+    ariaHaspopup = 'listbox',
+    className,
+    style,
+    maxSelectedOptionsToShow = 2,
+    hiddenSelectedOptionsLabel = 'more',
+    label,
+    compact,
+    invertColorScheme,
+    numberOfLines,
+    disabled
+  } = _ref;
+  const isMultiSelect = type === 'multi';
+  const hasValue = value !== null && !(Array.isArray(value) && value.length === 0);
+
+  // Map of options to their values
+  // If multiple options share the same value, the first occurrence wins (matches native HTML select behavior)
+  const optionsMap = useMemo(() => {
+    const map = new Map();
+    const isDev = process.env.NODE_ENV !== 'production';
+    options.forEach((option, optionIndex) => {
+      if (isSelectOptionGroup(option)) {
+        option.options.forEach((groupOption, groupOptionIndex) => {
+          if (groupOption.value !== null) {
+            const value = groupOption.value;
+            // Only set if not already present (first wins)
+            if (!map.has(value)) {
+              map.set(value, groupOption);
+            } else if (isDev) {
+              console.warn("[Select] Duplicate option value detected: \"".concat(value, "\". ") + "The first occurrence will be used for display. " + "Found duplicate in group \"".concat(option.label, "\" at index ").concat(groupOptionIndex, ". ") + "First occurrence was at option index ".concat(optionIndex, "."));
+            }
+          }
+        });
+      } else {
+        const singleOption = option;
+        if (singleOption.value !== null) {
+          const value = singleOption.value;
+          // Only set if not already present (first wins)
+          if (!map.has(value)) {
+            map.set(value, singleOption);
+          } else if (isDev) {
+            var _ref2, _existingOption$label;
+            const existingOption = map.get(value);
+            console.warn("[Select] Duplicate option value detected: \"".concat(value, "\". ") + "The first occurrence will be used for display. " + "Found duplicate at option index ".concat(optionIndex, ". ") + "First occurrence label: \"".concat((_ref2 = (_existingOption$label = existingOption === null || existingOption === void 0 ? void 0 : existingOption.label) !== null && _existingOption$label !== void 0 ? _existingOption$label : existingOption === null || existingOption === void 0 ? void 0 : existingOption.value) !== null && _ref2 !== void 0 ? _ref2 : 'unknown', "\"."));
+          }
+        }
+      }
+    });
+    return map;
+  }, [options]);
+  const labelContent = useMemo(() => {
+    var _ref3, _ref6, _ref7, _ref8, _opt$label2;
+    if (!hasValue) return (_ref3 = label !== null && label !== void 0 ? label : placeholder) !== null && _ref3 !== void 0 ? _ref3 : null;
+    if (isMultiSelect) {
+      const values = value;
+      const visible = values.slice(0, maxSelectedOptionsToShow);
+      const labels = visible.map(v => {
+        var _ref4, _ref5, _opt$label;
+        const opt = optionsMap.get(v);
+        return (_ref4 = (_ref5 = (_opt$label = opt === null || opt === void 0 ? void 0 : opt.label) !== null && _opt$label !== void 0 ? _opt$label : opt === null || opt === void 0 ? void 0 : opt.description) !== null && _ref5 !== void 0 ? _ref5 : opt === null || opt === void 0 ? void 0 : opt.value) !== null && _ref4 !== void 0 ? _ref4 : '';
+      }).filter(Boolean);
+      const hiddenCount = values.length - visible.length;
+      return hiddenCount > 0 ? "".concat(labels.join(', '), " +").concat(hiddenCount, " ").concat(hiddenSelectedOptionsLabel) : labels.join(', ');
+    }
+    const opt = optionsMap.get(value);
+    return (_ref6 = (_ref7 = (_ref8 = (_opt$label2 = opt === null || opt === void 0 ? void 0 : opt.label) !== null && _opt$label2 !== void 0 ? _opt$label2 : opt === null || opt === void 0 ? void 0 : opt.description) !== null && _ref8 !== void 0 ? _ref8 : opt === null || opt === void 0 ? void 0 : opt.value) !== null && _ref7 !== void 0 ? _ref7 : placeholder) !== null && _ref6 !== void 0 ? _ref6 : null;
+  }, [hasValue, label, placeholder, isMultiSelect, optionsMap, value, maxSelectedOptionsToShow, hiddenSelectedOptionsLabel]);
+  const endNode = useMemo(() => {
+    return customEndNode !== null && customEndNode !== void 0 ? customEndNode : /*#__PURE__*/_jsx(AnimatedCaret, {
+      active: true,
+      color: hasValue ? 'fgInverse' : 'fg',
+      rotate: open ? 0 : 180,
+      size: "xs"
+    });
+  }, [customEndNode, hasValue, open]);
+  const color = useMemo(() => {
+    return hasValue ? 'fgInverse' : 'fg';
+  }, [hasValue]);
+  const background = useMemo(() => {
+    return hasValue ? 'bgInverse' : 'bgSecondary';
+  }, [hasValue]);
+  return /*#__PURE__*/_jsx(MediaChip, {
+    ref: ref,
+    noScaleOnPress: true,
+    accessibilityLabel: accessibilityLabel,
+    "aria-haspopup": ariaHaspopup,
+    background: background,
+    className: className,
+    color: color,
+    compact: compact,
+    disabled: disabled,
+    end: endNode,
+    invertColorScheme: invertColorScheme,
+    numberOfLines: numberOfLines,
+    onClick: () => setOpen(s => !s),
+    start: startNode,
+    style: style,
+    children: labelContent
+  });
+}));
+export const SelectChipControl = SelectChipControlComponent;

package/esm/alpha/select-chip/index.js

@@ -0,0 +1,2 @@
+export * from './SelectChip';
+export * from './SelectChipControl';

package/esm/cells/CellAccessory.js

@@ -39,6 +39,15 @@ export const CellAccessory = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function
       size: "s"
     });
   }
+  if (type === 'unselected') {
+    icon = /*#__PURE__*/_jsx(Icon, {
+      name: "checkmark",
+      size: "s",
+      style: {
+        opacity: 0
+      }
+    });
+  }
   if (!icon) {
     return null;
   }

package/esm/chips/Chip.js

@@ -1,4 +1,4 @@
-const _excluded = ["as", "alignItems", "width", "height", "compact", "gap", "start", "end", "paddingX", "paddingY", "padding", "paddingTop", "paddingBottom", "paddingStart", "paddingEnd", "justifyContent", "children", "maxWidth", "invertColorScheme", "inverted", "numberOfLines", "testID", "contentStyle", "borderRadius", "background", "style", "className", "styles", "classNames", "font", "onClick"];
+const _excluded = ["as", "alignItems", "width", "height", "compact", "gap", "start", "end", "paddingX", "paddingY", "padding", "paddingTop", "paddingBottom", "paddingStart", "paddingEnd", "justifyContent", "children", "maxWidth", "invertColorScheme", "inverted", "numberOfLines", "testID", "contentStyle", "borderRadius", "background", "style", "className", "styles", "classNames", "font", "color", "onClick"];
 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; }
@@ -53,6 +53,7 @@ export const Chip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Chip(_ref
       styles,
       classNames,
       font = compact ? 'label1' : 'headline',
+      color = 'fg',
       onClick
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
@@ -83,16 +84,18 @@ export const Chip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Chip(_ref
       paddingY: paddingY,
       style: _objectSpread(_objectSpread({}, contentStyle), styles === null || styles === void 0 ? void 0 : styles.content),
       children: [start, typeof children === 'string' ? /*#__PURE__*/_jsx(Text, {
+        color: color,
         flexShrink: 1,
         font: font,
         numberOfLines: numberOfLines,
         children: children
       }) : children ? /*#__PURE__*/_jsx(Box, {
+        color: color,
         flexShrink: 1,
         children: children
       }) : null, end]
     });
-  }, [alignItems, classNames === null || classNames === void 0 ? void 0 : classNames.content, gap, justifyContent, maxWidth, padding, paddingBottom, paddingEnd, paddingStart, paddingTop, paddingX, paddingY, contentStyle, styles === null || styles === void 0 ? void 0 : styles.content, start, children, font, numberOfLines, end]);
+  }, [alignItems, classNames === null || classNames === void 0 ? void 0 : classNames.content, gap, justifyContent, maxWidth, padding, paddingBottom, paddingEnd, paddingStart, paddingTop, paddingX, paddingY, contentStyle, styles === null || styles === void 0 ? void 0 : styles.content, start, children, color, font, numberOfLines, end]);
   return /*#__PURE__*/_jsx(WrapperComponent, _objectSpread(_objectSpread({}, inverted ? {
     display: 'content'
   } : {}), {}, {

package/esm/chips/SelectChip.js

@@ -14,6 +14,16 @@ import { AnimatedCaret } from '../motion/AnimatedCaret';
 import { MediaChip } from './MediaChip';
 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.
+ * @see {@link @coinbase/cds-web/alpha/select-chip/SelectChip}
+ */
+
+/**
+ * @deprecated This component is deprecated. Please use the new SelectChip alpha component instead.
+ * @see {@link @coinbase/cds-web/alpha/select-chip/SelectChip}
+ */
 export const SelectChip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function SelectChip(_ref, ref) {
   var _ref2;
   let {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web",
-  "version": "8.25.1",
+  "version": "8.27.0",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",
@@ -147,7 +147,7 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.25.1",
+    "@coinbase/cds-common": "^8.27.0",
     "@coinbase/cds-icons": "^5.7.0",
     "@coinbase/cds-illustrations": "^4.28.0",
     "@coinbase/cds-lottie-files": "^3.3.3",