@coinbase/cds-web 9.18.0 → 9.20.0

package/CHANGELOG.md

@@ -8,6 +8,18 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 9.20.0 (8/20/2026 PST)
+
+#### 🚀 Updates
+
+- Feat: update default label style for input components: TextInput, Select, Combobox, DateInput, etc. Font: label1 -=> label2; color: fg => fgMuted.
+
+## 9.19.0 (8/20/2026 PST)
+
+#### 🚀 Updates
+
+- Feat: support custom icon sets in name-prop components. [[#848](https://github.com/coinbase/cds/pull/848)]
+
 ## 9.18.0 (8/19/2026 PST)
 
 #### 🚀 Updates

package/dts/controls/SelectTrigger.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectTrigger.d.ts","sourceRoot":"","sources":["../../src/controls/SelectTrigger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAchD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAOhD,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,eAAe,EACf,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,CAC1D,GAAG;IACF,eAAe,EAAE,OAAO,CAAC;IACzB,qCAAqC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iEAAiE;IACjE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAeF,eAAO,MAAM,aAAa;qBApBP,OAAO;IACxB,qCAAqC;cAC3B,OAAO;IACjB,iEAAiE;cACvD,MAAM,IAAI;qCAyIrB,CAAC"}
+{"version":3,"file":"SelectTrigger.d.ts","sourceRoot":"","sources":["../../src/controls/SelectTrigger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAchD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAOhD,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,eAAe,EACf,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,CAC1D,GAAG;IACF,eAAe,EAAE,OAAO,CAAC;IACzB,qCAAqC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iEAAiE;IACjE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAeF,eAAO,MAAM,aAAa;qBApBP,OAAO;IACxB,qCAAqC;cAC3B,OAAO;IACjB,iEAAiE;cACvD,MAAM,IAAI;qCA+IrB,CAAC"}

package/dts/icons/createIcon.d.ts

@@ -4,31 +4,21 @@ 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.
- */
+/** Values are the single character to render 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. */
+  /** Pixel size resolved 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. */
+/** An icon font and the glyphs it provides. */
+export type IconGlyphSource<Name extends string = string> = {
   glyphMap: GlyphMap<Name>;
   /**
    * `@font-face` family name registered by the icon set's font.
@@ -36,13 +26,27 @@ export type CreateIconConfig<Name extends string> = {
    */
   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`.
+   * Override to use a custom key format or size model. Defaults to the CDS
+   * scheme: `${name}-${sourceSize}-${state}`, with `sourceSize` 12, 16, or 24.
    */
   getGlyph?: (args: IconGlyphResolverArgs<Name>) => string | undefined;
 };
+export type IconGlyphSourceProviderProps = {
+  /** Consulted before the built-in glyphs. A nested provider replaces it. */
+  source: IconGlyphSource<any>;
+  children: React.ReactNode;
+};
+/**
+ * Adds a custom glyph source to every CDS icon rendered below.
+ *
+ * Scope this to a subtree: a source reusing a built-in name re-skins that icon
+ * everywhere below, including icons CDS renders internally (`close`, `caretUp`,
+ * `checkmark`). Its names must be names the icon component already accepts.
+ */
+export declare function IconGlyphSourceProvider({
+  source,
+  children,
+}: IconGlyphSourceProviderProps): import('react/jsx-runtime').JSX.Element;
 export type IconBaseProps<Name extends string = string> = SharedProps &
   Pick<
     BoxBaseProps,
@@ -95,19 +99,9 @@ export type IconProps<Name extends string = string> = IconBaseProps<Name> &
     };
   };
 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>
->;
+/** Creates a typed `Icon` component bound to an icon set. */
+export declare function createIcon<Name extends string>(
+  source: IconGlyphSource<Name>,
+): React.NamedExoticComponent<Omit<IconProps<Name>, 'ref'> & React.RefAttributes<HTMLElement>>;
 export { getIconSourceSize };
 //# sourceMappingURL=createIcon.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"createIcon.d.ts","sourceRoot":"","sources":["../../src/icons/createIcon.tsx"],"names":[],"mappings":"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"}

package/dts/icons/index.d.ts

@@ -1,6 +1,11 @@
+export type {
+  GlyphMap,
+  IconGlyphResolverArgs,
+  IconGlyphSource,
+  IconGlyphSourceProviderProps,
+} from './createIcon';
+export { createIcon, DEFAULT_ICON_FONT_FAMILY, IconGlyphSourceProvider } from './createIcon';
 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,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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/icons/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,QAAQ,EACR,qBAAqB,EACrB,eAAe,EACf,4BAA4B,GAC7B,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,UAAU,EAAE,wBAAwB,EAAE,uBAAuB,EAAE,MAAM,cAAc,CAAC;AAC7F,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC"}

package/esm/alpha/select/DefaultSelectControl.js

@@ -82,8 +82,8 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
       blendStyles,
       align = 'start',
       font = 'body',
-      labelColor = 'fg',
-      labelFont = 'label1',
+      labelColor = 'fgMuted',
+      labelFont = 'label2',
       bordered = true,
       borderWidth = bordered ? 100 : 0,
       focusedBorderWidth = bordered ? undefined : 200,

package/esm/controls/InputLabel.js

@@ -11,9 +11,9 @@ import { Text } from '../typography/Text';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const InputLabel = /*#__PURE__*/memo(function InputLabel(_ref) {
   let {
-      color = 'fg',
+      color = 'fgMuted',
       disabled = false,
-      font = 'label1'
+      font = 'label2'
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_jsx(Text, _objectSpread({

package/esm/controls/SelectStack.js

@@ -52,6 +52,7 @@ export const SelectStack = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Se
       onClick: handlePreventPropagation,
       children: /*#__PURE__*/_jsx(InputLabel, {
         color: "fg",
+        font: "label1",
         id: accessibilityLabelId,
         overflow: "truncate",
         children: label

package/esm/controls/SelectTrigger.js

@@ -89,6 +89,7 @@ export const SelectTrigger = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function
         paddingEnd: 1,
         children: /*#__PURE__*/_jsx(InputLabel, {
           color: "fg",
+          font: "label1",
           id: accessibilityLabelId,
           overflow: "truncate",
           children: label
@@ -111,6 +112,7 @@ export const SelectTrigger = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function
             width: "100%",
             children: [/*#__PURE__*/_jsx(InputLabel, {
               color: "fg",
+              font: "label1",
               id: accessibilityLabelId,
               overflow: "truncate",
               paddingY: 0,

package/esm/controls/TextInput.js

@@ -48,8 +48,8 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Text
   const mergedProps = useComponentConfig('TextInput', _props);
   const {
       label,
-      labelFont = 'label1',
-      labelColor = 'fg',
+      labelFont = 'label2',
+      labelColor = 'fgMuted',
       accessibilityLabel,
       helperText = '',
       variant = 'foregroundMuted',

package/esm/icons/createIcon.js

@@ -1,12 +1,12 @@
 const _excluded = ["accessibilityLabel", "color", "dangerouslySetColor", "fallback", "name", "size", "testID", "className", "classNames", "style", "styles", "active"];
+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); }
-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 React, { createContext, forwardRef, memo, useContext, useMemo } from 'react';
 import { isDevelopment } from '@coinbase/cds-utils/env';
 import { cx } from '../cx';
 import { useComponentConfig } from '../hooks/useComponentConfig';
@@ -18,16 +18,28 @@ 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.
- */
+/** Values are the single character to render 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. */
+/** An icon font and the glyphs it provides. */
 
+const IconGlyphSourceContext = /*#__PURE__*/createContext(undefined);
+/**
+ * Adds a custom glyph source to every CDS icon rendered below.
+ *
+ * Scope this to a subtree: a source reusing a built-in name re-skins that icon
+ * everywhere below, including icons CDS renders internally (`close`, `caretUp`,
+ * `checkmark`). Its names must be names the icon component already accepts.
+ */
+export function IconGlyphSourceProvider(_ref) {
+  let {
+    source,
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx(IconGlyphSourceContext.Provider, {
+    value: source,
+    children: children
+  });
+}
 const iconCss = "iconCss-i1t3cbh7";
 const sizeCss = {
   xs: "xs-xffinnj",
@@ -42,31 +54,35 @@ const getIconSourceSize = iconSize => {
 };
 
 /** Default glyph resolver using the CDS `${name}-${sourceSize}-${state}` key scheme. */
-const defaultGetGlyph = _ref => {
+const defaultGetGlyph = _ref2 => {
   let {
     glyphMap,
     name,
     pixelSize,
     active
-  } = _ref;
+  } = _ref2;
   const sourceSize = getIconSourceSize(pixelSize);
   const key = "".concat(name, "-").concat(sourceSize, "-").concat(active ? 'active' : 'inactive');
   return glyphMap[key];
 };
+/** Resolves a glyph from one source, with that source's font. */
+const resolveFromSource = (source, args) => {
+  var _source$getGlyph, _source$fontFamily;
+  const char = ((_source$getGlyph = source.getGlyph) !== null && _source$getGlyph !== void 0 ? _source$getGlyph : defaultGetGlyph)(_objectSpread(_objectSpread({}, args), {}, {
+    glyphMap: source.glyphMap
+  }));
+  return char === undefined ? undefined : {
+    char,
+    fontFamily: (_source$fontFamily = source.fontFamily) !== null && _source$fontFamily !== void 0 ? _source$fontFamily : DEFAULT_ICON_FONT_FAMILY
+  };
+};
+const resolveGlyph = (contextSource, boundSource, args) => {
+  const fromContext = contextSource ? resolveFromSource(contextSource, args) : undefined;
+  return fromContext !== null && fromContext !== void 0 ? fromContext : resolveFromSource(boundSource, args);
+};
 
-/**
- * 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;
+/** Creates a typed `Icon` component bound to an icon set. */
+export function createIcon(source) {
   const Icon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
     const mergedProps = useComponentConfig('Icon', _props);
     const {
@@ -86,23 +102,27 @@ export function createIcon(_ref2) {
       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,
+    // Tried before the bound set, so a source can override a built-in icon.
+    const contextSource = useContext(IconGlyphSourceContext);
+    const resolved = resolveGlyph(contextSource, source, {
       name,
       size,
       pixelSize: iconSize,
       active: Boolean(active)
     });
-    if (glyph === undefined) {
+    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]);
+
+    // The matching source decides the font, so a source covering only some
+    // sizes or states of a name mixes fonts across that name.
+    // Only set the variable for non-default fonts; the Linaria block has the default.
+    const fontFamily = resolved === null || resolved === void 0 ? void 0 : resolved.fontFamily;
+    const iconStyle = useMemo(() => fontFamily === undefined || 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), [fontFamily, styles === null || styles === void 0 ? void 0 : styles.icon]);
+    if (resolved === undefined) {
       if (isDevelopment()) {
         console.error("Unable to find glyph for icon \"".concat(name, "\" at size \"").concat(size, "\""));
       }
@@ -127,7 +147,7 @@ export function createIcon(_ref2) {
         style: iconStyle,
         title: accessibilityLabel,
         translate: "no",
-        children: glyph
+        children: resolved.char
       })
     }));
   }));

package/esm/icons/index.js

@@ -1,5 +1,5 @@
+export { createIcon, DEFAULT_ICON_FONT_FAMILY, IconGlyphSourceProvider } from './createIcon';
 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.18.0",
+  "version": "9.20.0",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",
@@ -227,8 +227,8 @@
     "react-dom": "^18.0.0 || ~19.1.2"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^9.18.0",
-    "@coinbase/cds-icons": "^5.21.0",
+    "@coinbase/cds-common": "^9.20.0",
+    "@coinbase/cds-icons": "^5.22.0",
     "@coinbase/cds-illustrations": "^4.48.0",
     "@coinbase/cds-lottie-files": "^3.3.4",
     "@coinbase/cds-utils": "^2.3.5",