@coinbase/cds-web 9.7.1 → 9.8.0

package/CHANGELOG.md

@@ -8,6 +8,18 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 9.8.0 (7/23/2026 PST)
+
+#### 🚀 Updates
+
+- Feat: add createIcon factory to decouple Icon from a single icon set. [[#786](https://github.com/coinbase/cds/pull/786)]
+
+## 9.7.2 (7/23/2026 PST)
+
+#### 🐞 Fixes
+
+- Fix: adjust select placeholder fallback. [[#805](https://github.com/coinbase/cds/pull/805)]
+
 ## 9.7.1 ((7/22/2026, 01:58 PM PST))
 
 This is an artificial version bump with no new change.

package/dts/alpha/select/DefaultSelectControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultSelectControl.d.ts","sourceRoot":"","sources":["../../../src/alpha/select/DefaultSelectControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAgB9E,OAAO,EAEL,KAAK,kBAAkB,EAEvB,KAAK,UAAU,EAChB,MAAM,UAAU,CAAC;AA4BlB,KAAK,wBAAwB,GAAG,CAC9B,IAAI,SAAS,UAAU,EACvB,iBAAiB,SAAS,MAAM,GAAG,MAAM,EAEzC,KAAK,EAAE,kBAAkB,CAAC,IAAI,EAAE,iBAAiB,CAAC,GAAG;IACnD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;CAC9B,KACE,KAAK,CAAC,YAAY,CAAC;AAqgBxB,eAAO,MAAM,oBAAoB,EAAoC,wBAAwB,CAAC"}
+{"version":3,"file":"DefaultSelectControl.d.ts","sourceRoot":"","sources":["../../../src/alpha/select/DefaultSelectControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAgB9E,OAAO,EAEL,KAAK,kBAAkB,EAEvB,KAAK,UAAU,EAChB,MAAM,UAAU,CAAC;AA4BlB,KAAK,wBAAwB,GAAG,CAC9B,IAAI,SAAS,UAAU,EACvB,iBAAiB,SAAS,MAAM,GAAG,MAAM,EAEzC,KAAK,EAAE,kBAAkB,CAAC,IAAI,EAAE,iBAAiB,CAAC,GAAG;IACnD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;CAC9B,KACE,KAAK,CAAC,YAAY,CAAC;AA4gBxB,eAAO,MAAM,oBAAoB,EAAoC,wBAAwB,CAAC"}

package/dts/icons/Icon.d.ts

@@ -1,62 +1,13 @@
-import React from 'react';
 import type { IconName } from '@coinbase/cds-common/types/IconName';
-import type { IconSize, IconSourcePixelSize } from '@coinbase/cds-common/types/IconSize';
-import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
-import { type BoxBaseProps, type BoxDefaultElement, type BoxProps } from '../layout/Box';
-export type IconBaseProps = SharedProps &
-  Pick<
-    BoxBaseProps,
-    | 'padding'
-    | 'paddingX'
-    | 'paddingY'
-    | 'paddingTop'
-    | 'paddingEnd'
-    | 'paddingBottom'
-    | 'paddingStart'
-  > & {
-    /**
-     * Size for a given icon.
-     * @default m
-     */
-    size?: IconSize;
-    /** Name of the icon, as defined in Figma. */
-    name: IconName;
-    /**
-     * Fallback element to render if unable to find an icon with matching name
-     * @default null
-     * */
-    fallback?: null | React.ReactNode;
-    /**
-     * Toggles the active and inactive state of the navigation icon
-     * @default false
-     */
-    active?: boolean;
-    /**
-     * @deprecated Use `style`, `styles.root`, `className`, `classNames.root`, or the `color` prop to customize icon color. This will be removed in a future major release.
-     * @deprecationExpectedRemoval v10
-     */
-    dangerouslySetColor?: string;
-  };
-export type IconProps = IconBaseProps &
-  BoxProps<BoxDefaultElement> & {
-    /** Custom inline styles for individual elements of the Icon component */
-    styles?: {
-      /** Outer Box wrapper element */
-      root?: React.CSSProperties;
-      /** Inner icon glyph element */
-      icon?: React.CSSProperties;
-    };
-    /** Custom class names for individual elements of the Icon component */
-    classNames?: {
-      /** Outer Box wrapper element */
-      root?: string;
-      /** Inner icon glyph element */
-      icon?: string;
-    };
-  };
-declare const getIconSourceSize: (iconSize: number) => IconSourcePixelSize;
-export declare const Icon: React.NamedExoticComponent<
-  Omit<IconProps, 'ref'> & React.RefAttributes<HTMLElement>
+import {
+  getIconSourceSize,
+  type IconBaseProps as IconBasePropsGeneric,
+  type IconProps as IconPropsGeneric,
+} from './createIcon';
+export type IconBaseProps = IconBasePropsGeneric<IconName>;
+export type IconProps = IconPropsGeneric<IconName>;
+export declare const Icon: import('react').NamedExoticComponent<
+  Omit<IconPropsGeneric<IconName>, 'ref'> & import('react').RefAttributes<HTMLElement>
 >;
 export { getIconSourceSize };
 //# sourceMappingURL=Icon.d.ts.map

package/dts/icons/Icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/icons/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qCAAqC,CAAC;AACpE,OAAO,KAAK,EAAE,QAAQ,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AACzF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAS1E,OAAO,EAAO,KAAK,YAAY,EAAE,KAAK,iBAAiB,EAAE,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAI9F,MAAM,MAAM,aAAa,GAAG,WAAW,GACrC,IAAI,CACF,YAAY,EACV,SAAS,GACT,UAAU,GACV,UAAU,GACV,YAAY,GACZ,YAAY,GACZ,eAAe,GACf,cAAc,CACjB,GAAG;IACF;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,6CAA6C;IAC7C,IAAI,EAAE,QAAQ,CAAC;IACf;;;SAGK;IACL,QAAQ,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC,SAAS,CAAC;IAClC;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B,CAAC;AAEJ,MAAM,MAAM,SAAS,GAAG,aAAa,GACnC,QAAQ,CAAC,iBAAiB,CAAC,GAAG;IAC5B,yEAAyE;IACzE,MAAM,CAAC,EAAE;QACP,gCAAgC;QAChC,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B,+BAA+B;QAC/B,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAC5B,CAAC;IACF,uEAAuE;IACvE,UAAU,CAAC,EAAE;QACX,gCAAgC;QAChC,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,+BAA+B;QAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;CACH,CAAC;AA2CJ,QAAA,MAAM,iBAAiB,GAAI,UAAU,MAAM,KAAG,mBAI7C,CAAC;AAEF,eAAO,MAAM,IAAI,uFAyEhB,CAAC;AAIF,OAAO,EAAE,iBAAiB,EAAE,CAAC"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/icons/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qCAAqC,CAAC;AAGpE,OAAO,EAGL,iBAAiB,EACjB,KAAK,aAAa,IAAI,oBAAoB,EAC1C,KAAK,SAAS,IAAI,gBAAgB,EACnC,MAAM,cAAc,CAAC;AAEtB,MAAM,MAAM,aAAa,GAAG,oBAAoB,CAAC,QAAQ,CAAC,CAAC;AAC3D,MAAM,MAAM,SAAS,GAAG,gBAAgB,CAAC,QAAQ,CAAC,CAAC;AAEnD,eAAO,MAAM,IAAI,4HAGf,CAAC;AAEH,OAAO,EAAE,iBAAiB,EAAE,CAAC"}

package/dts/icons/createIcon.d.ts

@@ -0,0 +1,113 @@
+import React from 'react';
+import type { IconSize, IconSourcePixelSize } from '@coinbase/cds-common/types/IconSize';
+import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
+import { type BoxBaseProps, type BoxDefaultElement, type BoxProps } from '../layout/Box';
+/** Default font family for the CDS icon glyph font. */
+export declare const DEFAULT_ICON_FONT_FAMILY = 'CoinbaseIcons';
+/**
+ * Shape of the glyph map an icon set must provide. Keys are
+ * `${name}-${sourcePixelSize}-${'active' | 'inactive'}` and values are the
+ * single Unicode character rendered in the icon font.
+ */
+export type GlyphMap<Name extends string> = Record<
+  `${Name}-${IconSourcePixelSize}-${'active' | 'inactive'}`,
+  string
+>;
+/** Arguments passed to a glyph resolver to look up an icon's glyph. */
+export type IconGlyphResolverArgs<Name extends string> = {
+  /** Glyph map bound to this icon set. */
+  glyphMap: GlyphMap<Name>;
+  /** Icon name requested via the `name` prop. */
+  name: Name;
+  /** Size token requested via the `size` prop. */
+  size: IconSize;
+  /** Resolved pixel size from the theme for the requested `size` token. */
+  pixelSize: number;
+  /** Whether the active variant was requested. */
+  active: boolean;
+};
+/** Configuration used to bind an icon set to a typed `Icon` component. */
+export type CreateIconConfig<Name extends string> = {
+  /** Generated glyph map for this icon set. */
+  glyphMap: GlyphMap<Name>;
+  /**
+   * `@font-face` family name registered by the icon set's font.
+   * @default 'CoinbaseIcons'
+   */
+  fontFamily?: string;
+  /**
+   * Resolves the glyph to render for an icon from the glyph map. Override to
+   * support a custom key format or size model. Defaults to the CDS scheme:
+   * `${name}-${sourceSize}-${'active' | 'inactive'}`, where `sourceSize` is
+   * `12`, `16`, or `24`.
+   */
+  getGlyph?: (args: IconGlyphResolverArgs<Name>) => string | undefined;
+};
+export type IconBaseProps<Name extends string = string> = SharedProps &
+  Pick<
+    BoxBaseProps,
+    | 'padding'
+    | 'paddingX'
+    | 'paddingY'
+    | 'paddingTop'
+    | 'paddingEnd'
+    | 'paddingBottom'
+    | 'paddingStart'
+  > & {
+    /**
+     * Size for a given icon.
+     * @default m
+     */
+    size?: IconSize;
+    /** Name of the icon, as defined in Figma. */
+    name: Name;
+    /**
+     * Fallback element to render if unable to find an icon with matching name
+     * @default null
+     * */
+    fallback?: null | React.ReactNode;
+    /**
+     * Toggles the active and inactive state of the navigation icon
+     * @default false
+     */
+    active?: boolean;
+    /**
+     * @deprecated Use `style`, `styles.root`, `className`, `classNames.root`, or the `color` prop to customize icon color. This will be removed in a future major release.
+     * @deprecationExpectedRemoval v10
+     */
+    dangerouslySetColor?: string;
+  };
+export type IconProps<Name extends string = string> = IconBaseProps<Name> &
+  BoxProps<BoxDefaultElement> & {
+    /** Custom inline styles for individual elements of the Icon component */
+    styles?: {
+      /** Outer Box wrapper element */
+      root?: React.CSSProperties;
+      /** Inner icon glyph element */
+      icon?: React.CSSProperties;
+    };
+    /** Custom class names for individual elements of the Icon component */
+    classNames?: {
+      /** Outer Box wrapper element */
+      root?: string;
+      /** Inner icon glyph element */
+      icon?: string;
+    };
+  };
+declare const getIconSourceSize: (iconSize: number) => IconSourcePixelSize;
+/**
+ * Creates a typed `Icon` component bound to a specific icon set (glyph map,
+ * font family, and name union). The default CDS `Icon` is created from this
+ * factory; consumers with their own icon package can create their own typed
+ * icon component that reuses all of the CDS rendering, accessibility, and
+ * theming behavior.
+ */
+export declare function createIcon<Name extends string>({
+  glyphMap,
+  fontFamily,
+  getGlyph,
+}: CreateIconConfig<Name>): React.NamedExoticComponent<
+  Omit<IconProps<Name>, 'ref'> & React.RefAttributes<HTMLElement>
+>;
+export { getIconSourceSize };
+//# sourceMappingURL=createIcon.d.ts.map

package/dts/icons/createIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createIcon.d.ts","sourceRoot":"","sources":["../../src/icons/createIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAE,QAAQ,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AACzF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAQ1E,OAAO,EAAO,KAAK,YAAY,EAAE,KAAK,iBAAiB,EAAE,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAI9F,uDAAuD;AACvD,eAAO,MAAM,wBAAwB,kBAAkB,CAAC;AAExD;;;;GAIG;AACH,MAAM,MAAM,QAAQ,CAAC,IAAI,SAAS,MAAM,IAAI,MAAM,CAChD,GAAG,IAAI,IAAI,mBAAmB,IAAI,QAAQ,GAAG,UAAU,EAAE,EACzD,MAAM,CACP,CAAC;AAEF,uEAAuE;AACvE,MAAM,MAAM,qBAAqB,CAAC,IAAI,SAAS,MAAM,IAAI;IACvD,wCAAwC;IACxC,QAAQ,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IACzB,+CAA+C;IAC/C,IAAI,EAAE,IAAI,CAAC;IACX,gDAAgD;IAChD,IAAI,EAAE,QAAQ,CAAC;IACf,yEAAyE;IACzE,SAAS,EAAE,MAAM,CAAC;IAClB,gDAAgD;IAChD,MAAM,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,0EAA0E;AAC1E,MAAM,MAAM,gBAAgB,CAAC,IAAI,SAAS,MAAM,IAAI;IAClD,6CAA6C;IAC7C,QAAQ,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,qBAAqB,CAAC,IAAI,CAAC,KAAK,MAAM,GAAG,SAAS,CAAC;CACtE,CAAC;AAEF,MAAM,MAAM,aAAa,CAAC,IAAI,SAAS,MAAM,GAAG,MAAM,IAAI,WAAW,GACnE,IAAI,CACF,YAAY,EACV,SAAS,GACT,UAAU,GACV,UAAU,GACV,YAAY,GACZ,YAAY,GACZ,eAAe,GACf,cAAc,CACjB,GAAG;IACF;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,6CAA6C;IAC7C,IAAI,EAAE,IAAI,CAAC;IACX;;;SAGK;IACL,QAAQ,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC,SAAS,CAAC;IAClC;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B,CAAC;AAEJ,MAAM,MAAM,SAAS,CAAC,IAAI,SAAS,MAAM,GAAG,MAAM,IAAI,aAAa,CAAC,IAAI,CAAC,GACvE,QAAQ,CAAC,iBAAiB,CAAC,GAAG;IAC5B,yEAAyE;IACzE,MAAM,CAAC,EAAE;QACP,gCAAgC;QAChC,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B,+BAA+B;QAC/B,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAC5B,CAAC;IACF,uEAAuE;IACvE,UAAU,CAAC,EAAE;QACX,gCAAgC;QAChC,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,+BAA+B;QAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;CACH,CAAC;AA2CJ,QAAA,MAAM,iBAAiB,GAAI,UAAU,MAAM,KAAG,mBAI7C,CAAC;AAcF;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,IAAI,SAAS,MAAM,EAAE,EAC9C,QAAQ,EACR,UAAqC,EACrC,QAA0B,GAC3B,EAAE,gBAAgB,CAAC,IAAI,CAAC,+FAgGxB;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAC"}

package/dts/icons/index.d.ts

@@ -1,4 +1,6 @@
 export * from './Icon';
+export { createIcon, DEFAULT_ICON_FONT_FAMILY } from './createIcon';
+export type { CreateIconConfig, GlyphMap, IconGlyphResolverArgs } from './createIcon';
 export * from './LogoMark';
 export * from './LogoWordmark';
 export * from './SubBrandLogoMark';

package/dts/icons/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/icons/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/icons/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,OAAO,EAAE,UAAU,EAAE,wBAAwB,EAAE,MAAM,cAAc,CAAC;AACpE,YAAY,EAAE,gBAAgB,EAAE,QAAQ,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AACtF,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC"}

package/esm/alpha/select/DefaultSelectControl.js

@@ -120,19 +120,23 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
     });
     return map;
   }, [options]);
+  const matchedOption = useMemo(() => {
+    if (isMultiSelect || value === null || Array.isArray(value)) return undefined;
+    return optionsMap.get(value);
+  }, [isMultiSelect, optionsMap, value]);
+  const isShowingPlaceholder = matchedOption === undefined;
   const singleValueContent = useMemo(() => {
-    var _ref3, _ref4, _option$label;
-    const option = !isMultiSelect ? optionsMap.get(value) : undefined;
-    const label = (_ref3 = (_ref4 = (_option$label = option === null || option === void 0 ? void 0 : option.label) !== null && _option$label !== void 0 ? _option$label : option === null || option === void 0 ? void 0 : option.description) !== null && _ref4 !== void 0 ? _ref4 : option === null || option === void 0 ? void 0 : option.value) !== null && _ref3 !== void 0 ? _ref3 : placeholder;
-    return hasValue ? label : placeholder;
-  }, [hasValue, isMultiSelect, optionsMap, placeholder, value]);
+    var _ref3, _matchedOption$label;
+    if (!matchedOption) return placeholder;
+    return (_ref3 = (_matchedOption$label = matchedOption.label) !== null && _matchedOption$label !== void 0 ? _matchedOption$label : matchedOption.description) !== null && _ref3 !== void 0 ? _ref3 : matchedOption.value;
+  }, [matchedOption, placeholder]);
   const computedControlAccessibilityLabel = useMemo(() => {
     // For multi-select, set the label to the content of each selected value and the hidden selected options label
     if (isMultiSelect) {
       const selectedValues = value.map(v => {
-        var _ref5, _ref6, _option$label2;
+        var _ref4, _ref5, _option$label;
         const option = optionsMap.get(v);
-        return (_ref5 = (_ref6 = (_option$label2 = option === null || option === void 0 ? void 0 : option.label) !== null && _option$label2 !== void 0 ? _option$label2 : option === null || option === void 0 ? void 0 : option.description) !== null && _ref6 !== void 0 ? _ref6 : option === null || option === void 0 ? void 0 : option.value) !== null && _ref5 !== void 0 ? _ref5 : v;
+        return (_ref4 = (_ref5 = (_option$label = option === null || option === void 0 ? void 0 : option.label) !== null && _option$label !== void 0 ? _option$label : option === null || option === void 0 ? void 0 : option.description) !== null && _ref5 !== void 0 ? _ref5 : option === null || option === void 0 ? void 0 : option.value) !== null && _ref4 !== void 0 ? _ref4 : v;
       }).slice(0, maxSelectedOptionsToShow).join(', ');
       return "".concat(accessibilityLabel, ", ").concat(value.length > 0 ? selectedValues : placeholder !== null && placeholder !== void 0 ? placeholder : '').concat(value.length > maxSelectedOptionsToShow ? ', ' + hiddenSelectedOptionsLabel : '');
     }
@@ -206,7 +210,7 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
         flexWrap: "wrap",
         gap: 1,
         children: [optionsToShow.map((option, index) => {
-          var _option$value, _ref7, _ref8, _option$label3;
+          var _option$value, _ref6, _ref7, _option$label2;
           const accessibilityLabel = typeof option.label === 'string' ? option.label : typeof option.description === 'string' ? option.description : (_option$value = option.value) !== null && _option$value !== void 0 ? _option$value : '';
           return /*#__PURE__*/_jsx(InputChip, {
             compact: true,
@@ -225,7 +229,7 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
               flexShrink: 1,
               font: "label1",
               overflow: "truncate",
-              children: (_ref7 = (_ref8 = (_option$label3 = option.label) !== null && _option$label3 !== void 0 ? _option$label3 : option.description) !== null && _ref8 !== void 0 ? _ref8 : option.value) !== null && _ref7 !== void 0 ? _ref7 : ''
+              children: (_ref6 = (_ref7 = (_option$label2 = option.label) !== null && _option$label2 !== void 0 ? _option$label2 : option.description) !== null && _ref7 !== void 0 ? _ref7 : option.value) !== null && _ref6 !== void 0 ? _ref6 : ''
             })
           }, option.value);
         }), value.length - maxSelectedOptionsToShow > 0 && /*#__PURE__*/_jsx(InputChip, {
@@ -239,7 +243,7 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
     }
     return typeof singleValueContent === 'string' ? /*#__PURE__*/_jsx(Text, {
       as: "p",
-      color: hasValue ? 'fg' : 'fgMuted',
+      color: isShowingPlaceholder ? 'fgMuted' : 'fg',
       display: "block",
       font: font,
       overflow: "truncate",
@@ -247,7 +251,7 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
       width: "100%",
       children: singleValueContent
     }) : singleValueContent;
-  }, [hasValue, isMultiSelect, singleValueContent, font, align, value, maxSelectedOptionsToShow, hiddenSelectedOptionsLabel, optionsMap, removeSelectedOptionAccessibilityLabel, handleUnselectValue, isInteractionBlocked]);
+  }, [hasValue, isMultiSelect, isShowingPlaceholder, singleValueContent, font, align, value, maxSelectedOptionsToShow, hiddenSelectedOptionsLabel, optionsMap, removeSelectedOptionAccessibilityLabel, handleUnselectValue, isInteractionBlocked]);
   const inputNode = useMemo(() => /*#__PURE__*/_jsxs(Pressable, {
     ref: controlPressableRef,
     noScaleOnPress: true,

package/esm/icons/Icon.js

@@ -1,86 +1,7 @@
-const _excluded = ["accessibilityLabel", "color", "dangerouslySetColor", "fallback", "name", "size", "testID", "className", "classNames", "style", "styles", "active"];
-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); }
-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, useMemo } from 'react';
 import { glyphMap } from '@coinbase/cds-icons/glyphMap';
-import { isDevelopment } from '@coinbase/cds-utils/env';
-import { cx } from '../cx';
-import { useComponentConfig } from '../hooks/useComponentConfig';
-import { useTheme } from '../hooks/useTheme';
-import { Box } from '../layout/Box';
-import { jsx as _jsx } from "react/jsx-runtime";
-const COMPONENT_STATIC_CLASSNAME = 'cds-Icon';
-const iconCss = "iconCss-ijgxn1p";
-const sizeCss = {
-  xs: "xs-x1o2vka7",
-  s: "s-smpvpdm",
-  m: "m-m1j7b465",
-  l: "l-l1bri864"
-};
-const getIconSourceSize = iconSize => {
-  if (iconSize <= 12) return 12;
-  if (iconSize <= 16) return 16;
-  return 24;
-};
-export const Icon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
-  const mergedProps = useComponentConfig('Icon', _props);
-  const {
-      accessibilityLabel,
-      color = 'fgPrimary',
-      dangerouslySetColor,
-      fallback = null,
-      name,
-      size = 'm',
-      testID,
-      className,
-      classNames,
-      style,
-      styles,
-      active
-    } = mergedProps,
-    props = _objectWithoutProperties(mergedProps, _excluded);
-  const theme = useTheme();
-  const iconSize = theme.iconSize[size];
-  const sourceSize = getIconSourceSize(iconSize);
-  const rootStyle = useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, dangerouslySetColor ? {
-    color: dangerouslySetColor
-  } : {}), style), styles === null || styles === void 0 ? void 0 : styles.root), [dangerouslySetColor, style, styles === null || styles === void 0 ? void 0 : styles.root]);
-  const iconName = "".concat(name, "-").concat(sourceSize, "-").concat(active ? 'active' : 'inactive');
-  const glyph = glyphMap[iconName];
-  if (glyph === undefined) {
-    if (isDevelopment()) {
-      console.error("Unable to find glyph for icon name \"".concat(name, "\" with glyph key \"").concat(iconName, "\""));
-    }
-    return fallback;
-  }
-  const glyphTestId = testID ? "".concat(testID, "-glyph") : 'icon-base-glyph';
-  return /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({
-    className: cx(COMPONENT_STATIC_CLASSNAME, className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
-    color: color,
-    position: "relative",
-    style: rootStyle,
-    testID: testID
-  }, props), {}, {
-    children: /*#__PURE__*/_jsx("span", {
-      ref: ref,
-      "aria-hidden": !accessibilityLabel,
-      "aria-label": accessibilityLabel,
-      className: cx(iconCss, sizeCss[size], classNames === null || classNames === void 0 ? void 0 : classNames.icon),
-      "data-icon-name": name,
-      "data-testid": glyphTestId,
-      role: "img",
-      style: styles === null || styles === void 0 ? void 0 : styles.icon,
-      title: accessibilityLabel,
-      translate: "no",
-      children: glyph
-    })
-  }));
-}));
-Icon.displayName = 'Icon';
-export { getIconSourceSize };
-import "./Icon.css";
+import { createIcon, DEFAULT_ICON_FONT_FAMILY, getIconSourceSize } from './createIcon';
+export const Icon = createIcon({
+  glyphMap,
+  fontFamily: DEFAULT_ICON_FONT_FAMILY
+});
+export { getIconSourceSize };

package/esm/icons/createIcon.css

@@ -0,0 +1,5 @@
+@layer cds{.iconCss-i1t3cbh7{color:currentColor;font-family:var(--cds-icon-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-i1t3cbh7 > *{-webkit-transition:fill 150ms ease-in-out;transition:fill 150ms ease-in-out;}
+.xs-xffinnj{width:var(--iconSize-xs);height:var(--iconSize-xs);font-size:var(--iconSize-xs);}
+.s-s1qkbjwr{width:var(--iconSize-s);height:var(--iconSize-s);font-size:var(--iconSize-s);}
+.m-mvegnts{width:var(--iconSize-m);height:var(--iconSize-m);font-size:var(--iconSize-m);}
+.l-lc7jme9{width:var(--iconSize-l);height:var(--iconSize-l);font-size:var(--iconSize-l);}}

package/esm/icons/createIcon.js

@@ -0,0 +1,138 @@
+const _excluded = ["accessibilityLabel", "color", "dangerouslySetColor", "fallback", "name", "size", "testID", "className", "classNames", "style", "styles", "active"];
+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); }
+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, useMemo } from 'react';
+import { isDevelopment } from '@coinbase/cds-utils/env';
+import { cx } from '../cx';
+import { useComponentConfig } from '../hooks/useComponentConfig';
+import { useTheme } from '../hooks/useTheme';
+import { Box } from '../layout/Box';
+import { jsx as _jsx } from "react/jsx-runtime";
+const COMPONENT_STATIC_CLASSNAME = 'cds-Icon';
+
+/** Default font family for the CDS icon glyph font. */
+export const DEFAULT_ICON_FONT_FAMILY = 'CoinbaseIcons';
+
+/**
+ * Shape of the glyph map an icon set must provide. Keys are
+ * `${name}-${sourcePixelSize}-${'active' | 'inactive'}` and values are the
+ * single Unicode character rendered in the icon font.
+ */
+
+/** Arguments passed to a glyph resolver to look up an icon's glyph. */
+
+/** Configuration used to bind an icon set to a typed `Icon` component. */
+
+const iconCss = "iconCss-i1t3cbh7";
+const sizeCss = {
+  xs: "xs-xffinnj",
+  s: "s-s1qkbjwr",
+  m: "m-mvegnts",
+  l: "l-lc7jme9"
+};
+const getIconSourceSize = iconSize => {
+  if (iconSize <= 12) return 12;
+  if (iconSize <= 16) return 16;
+  return 24;
+};
+
+/** Default glyph resolver using the CDS `${name}-${sourceSize}-${state}` key scheme. */
+const defaultGetGlyph = _ref => {
+  let {
+    glyphMap,
+    name,
+    pixelSize,
+    active
+  } = _ref;
+  const sourceSize = getIconSourceSize(pixelSize);
+  const key = "".concat(name, "-").concat(sourceSize, "-").concat(active ? 'active' : 'inactive');
+  return glyphMap[key];
+};
+
+/**
+ * Creates a typed `Icon` component bound to a specific icon set (glyph map,
+ * font family, and name union). The default CDS `Icon` is created from this
+ * factory; consumers with their own icon package can create their own typed
+ * icon component that reuses all of the CDS rendering, accessibility, and
+ * theming behavior.
+ */
+export function createIcon(_ref2) {
+  let {
+    glyphMap,
+    fontFamily = DEFAULT_ICON_FONT_FAMILY,
+    getGlyph = defaultGetGlyph
+  } = _ref2;
+  const Icon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+    const mergedProps = useComponentConfig('Icon', _props);
+    const {
+        accessibilityLabel,
+        color = 'fgPrimary',
+        dangerouslySetColor,
+        fallback = null,
+        name,
+        size = 'm',
+        testID,
+        className,
+        classNames,
+        style,
+        styles,
+        active
+      } = mergedProps,
+      props = _objectWithoutProperties(mergedProps, _excluded);
+    const theme = useTheme();
+    const iconSize = theme.iconSize[size];
+    const rootStyle = useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, dangerouslySetColor ? {
+      color: dangerouslySetColor
+    } : {}), style), styles === null || styles === void 0 ? void 0 : styles.root), [dangerouslySetColor, style, styles === null || styles === void 0 ? void 0 : styles.root]);
+
+    // Only override the font-family CSS variable when a custom font is bound;
+    // the default is applied by the static Linaria block's fallback value.
+    const iconStyle = useMemo(() => fontFamily === DEFAULT_ICON_FONT_FAMILY ? styles === null || styles === void 0 ? void 0 : styles.icon : _objectSpread({
+      '--cds-icon-font-family': fontFamily
+    }, styles === null || styles === void 0 ? void 0 : styles.icon), [styles === null || styles === void 0 ? void 0 : styles.icon]);
+    const glyph = getGlyph({
+      glyphMap,
+      name,
+      size,
+      pixelSize: iconSize,
+      active: Boolean(active)
+    });
+    if (glyph === undefined) {
+      if (isDevelopment()) {
+        console.error("Unable to find glyph for icon \"".concat(name, "\" at size \"").concat(size, "\""));
+      }
+      return fallback;
+    }
+    const glyphTestId = testID ? "".concat(testID, "-glyph") : 'icon-base-glyph';
+    return /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({
+      className: cx(COMPONENT_STATIC_CLASSNAME, className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
+      color: color,
+      position: "relative",
+      style: rootStyle,
+      testID: testID
+    }, props), {}, {
+      children: /*#__PURE__*/_jsx("span", {
+        ref: ref,
+        "aria-hidden": !accessibilityLabel,
+        "aria-label": accessibilityLabel,
+        className: cx(iconCss, sizeCss[size], classNames === null || classNames === void 0 ? void 0 : classNames.icon),
+        "data-icon-name": name,
+        "data-testid": glyphTestId,
+        role: "img",
+        style: iconStyle,
+        title: accessibilityLabel,
+        translate: "no",
+        children: glyph
+      })
+    }));
+  }));
+  Icon.displayName = 'Icon';
+  return Icon;
+}
+export { getIconSourceSize };
+import "./createIcon.css";

package/esm/icons/index.js

@@ -1,4 +1,5 @@
 export * from './Icon';
+export { createIcon, DEFAULT_ICON_FONT_FAMILY } from './createIcon';
 export * from './LogoMark';
 export * from './LogoWordmark';
 export * from './SubBrandLogoMark';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web",
-  "version": "9.7.1",
+  "version": "9.8.0",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",
@@ -227,7 +227,7 @@
     "react-dom": "^18.0.0 || ~19.1.2"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^9.7.1",
+    "@coinbase/cds-common": "^9.8.0",
     "@coinbase/cds-icons": "^5.21.0",
     "@coinbase/cds-illustrations": "^4.44.0",
     "@coinbase/cds-lottie-files": "^3.3.4",

package/esm/icons/Icon.css

@@ -1,5 +0,0 @@
-@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);}
-.l-l1bri864{width:var(--iconSize-l);height:var(--iconSize-l);font-size:var(--iconSize-l);}}