@coinbase/cds-mobile 9.7.2 → 9.8.0

package/CHANGELOG.md

@@ -8,6 +8,12 @@ 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

package/dts/hooks/useAppState.d.ts

@@ -1,7 +1,7 @@
 export declare const useAppState: () =>
   | 'background'
-  | 'unknown'
   | 'active'
   | 'inactive'
+  | 'unknown'
   | 'extension';
 //# sourceMappingURL=useAppState.d.ts.map

package/dts/icons/Icon.d.ts

@@ -1,70 +1,52 @@
-import React from 'react';
-import { Animated, type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
-import type { ThemeVars } from '@coinbase/cds-common/core/theme';
 import type { IconName } from '@coinbase/cds-common/types/IconName';
-import type { IconSize, IconSourcePixelSize } from '@coinbase/cds-common/types/IconSize';
-import type { SharedAccessibilityProps } from '@coinbase/cds-common/types/SharedAccessibilityProps';
-import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
-import type { PaddingProps } from '@coinbase/cds-common/types/SpacingProps';
-export type IconBaseProps = SharedProps &
-  PaddingProps &
-  Pick<SharedAccessibilityProps, 'accessibilityLabel' | 'accessibilityHint'> & {
-    /**
-     * 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;
-    /** Color of the icon when used as a foreground.
-     * @default primary
-     */
-    color?: ThemeVars.Color;
-    /**
-     * @deprecated Use `style`, `styles.icon`, or the `color` prop to customize icon color. This will be removed in a future major release.
-     * @deprecationExpectedRemoval v10
-     */
-    dangerouslySetColor?: string | Animated.AnimatedInterpolation<string>;
-    animated?: boolean;
-    style?: Animated.WithAnimatedValue<StyleProp<TextStyle>>;
-  };
-export type IconProps = IconBaseProps & {
-  /** Custom styles for individual elements of the Icon component */
-  styles?: {
-    /** Outer Box wrapper element */
-    root?: StyleProp<ViewStyle>;
-    /** Inner icon glyph Text element */
-    icon?: StyleProp<TextStyle>;
-  };
-};
-declare const getIconSourceSize: (iconSize: number) => IconSourcePixelSize;
-export declare const Icon: React.MemoExoticComponent<
-  (
-    _props: IconProps,
-  ) =>
+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').MemoExoticComponent<
+  ({
+    ref,
+    ..._props
+  }: import('@coinbase/cds-common').SharedProps &
+    import('@coinbase/cds-common').PaddingProps &
+    Pick<
+      import('@coinbase/cds-common').SharedAccessibilityProps,
+      'accessibilityLabel' | 'accessibilityHint'
+    > & {
+      size?: import('@coinbase/cds-common').IconSize;
+      name: IconName;
+      fallback?: null | React.ReactNode;
+      active?: boolean;
+      color?: import('@coinbase/cds-common').ThemeVars.Color;
+      dangerouslySetColor?: string | import('react-native').Animated.AnimatedInterpolation<string>;
+      animated?: boolean;
+    } & {
+      style?: import('react-native').Animated.WithAnimatedValue<
+        import('react-native').StyleProp<import('react-native').TextStyle>
+      >;
+      styles?: {
+        root?: import('react-native').StyleProp<import('react-native').ViewStyle>;
+        icon?: import('react-native').StyleProp<import('react-native').TextStyle>;
+      };
+    } & {
+      ref?: React.Ref<import('react-native').Text>;
+    }) =>
     | string
     | number
     | bigint
     | boolean
-    | Iterable<React.ReactNode>
+    | Iterable<import('react').ReactNode>
     | Promise<
         | string
         | number
         | bigint
         | boolean
-        | React.ReactPortal
-        | React.ReactElement<unknown, string | React.JSXElementConstructor<any>>
-        | Iterable<React.ReactNode>
+        | import('react').ReactPortal
+        | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>
+        | Iterable<import('react').ReactNode>
         | null
         | undefined
       >

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,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,EACL,QAAQ,EACR,KAAK,SAAS,EAEd,KAAK,SAAS,EAEd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qCAAqC,CAAC;AACpE,OAAO,KAAK,EAAE,QAAQ,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AACzF,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AACpG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAC1E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yCAAyC,CAAC;AAQ5E,MAAM,MAAM,aAAa,GAAG,WAAW,GACrC,YAAY,GACZ,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,GAAG,mBAAmB,CAAC,GAAG;IAC3E;;;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;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACxB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC,qBAAqB,CAAC,MAAM,CAAC,CAAC;IACtE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,QAAQ,CAAC,iBAAiB,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC;CAC1D,CAAC;AAEJ,MAAM,MAAM,SAAS,GAAG,aAAa,GAAG;IACtC,kEAAkE;IAClE,MAAM,CAAC,EAAE;QACP,gCAAgC;QAChC,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,oCAAoC;QACpC,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAC7B,CAAC;CACH,CAAC;AAEF,QAAA,MAAM,iBAAiB,GAAI,UAAU,MAAM,KAAG,mBAI7C,CAAC;AAEF,eAAO,MAAM,IAAI,qCAAiB,SAAS,+SAmGzC,CAAC;AAEH,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;;;;;;;;;;;YAM8nG,CAAC;YAAyE,CAAC;;;;kWAHxtG,CAAC;AAEH,OAAO,EAAE,iBAAiB,EAAE,CAAC"}

package/dts/icons/createIcon.d.ts

@@ -0,0 +1,130 @@
+import React from 'react';
+import { Animated, type StyleProp, Text, type TextStyle, type ViewStyle } from 'react-native';
+import type { ThemeVars } from '@coinbase/cds-common/core/theme';
+import type { IconSize, IconSourcePixelSize } from '@coinbase/cds-common/types/IconSize';
+import type { SharedAccessibilityProps } from '@coinbase/cds-common/types/SharedAccessibilityProps';
+import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
+import type { PaddingProps } from '@coinbase/cds-common/types/SpacingProps';
+/** 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 (includes device font scaling). */
+  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 family registered by the icon set's font (loaded via `expo-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 &
+  PaddingProps &
+  Pick<SharedAccessibilityProps, 'accessibilityLabel' | 'accessibilityHint'> & {
+    /**
+     * 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;
+    /** Color of the icon when used as a foreground.
+     * @default primary
+     */
+    color?: ThemeVars.Color;
+    /**
+     * @deprecated Use `style`, `styles.icon`, or the `color` prop to customize icon color. This will be removed in a future major release.
+     * @deprecationExpectedRemoval v10
+     */
+    dangerouslySetColor?: string | Animated.AnimatedInterpolation<string>;
+    animated?: boolean;
+  };
+export type IconProps<Name extends string = string> = IconBaseProps<Name> & {
+  /** Custom style applied to the outer container. */
+  style?: Animated.WithAnimatedValue<StyleProp<TextStyle>>;
+  /** Custom styles for individual elements of the Icon component */
+  styles?: {
+    /** Outer Box wrapper element */
+    root?: StyleProp<ViewStyle>;
+    /** Inner icon glyph Text element */
+    icon?: StyleProp<TextStyle>;
+  };
+};
+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.MemoExoticComponent<
+  ({
+    ref,
+    ..._props
+  }: IconProps<Name> & {
+    ref?: React.Ref<Text>;
+  }) =>
+    | string
+    | number
+    | bigint
+    | boolean
+    | Iterable<React.ReactNode>
+    | Promise<
+        | string
+        | number
+        | bigint
+        | boolean
+        | React.ReactPortal
+        | React.ReactElement<unknown, string | React.JSXElementConstructor<any>>
+        | Iterable<React.ReactNode>
+        | null
+        | undefined
+      >
+    | import('react/jsx-runtime').JSX.Element
+    | null
+>;
+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":"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"}

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;AACvC,cAAc,YAAY,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;AACvC,cAAc,YAAY,CAAC"}

package/esm/icons/Icon.js

@@ -1,90 +1,7 @@
-import React, { memo, useMemo } from 'react';
-import { Animated, Text, useWindowDimensions } from 'react-native';
 import { glyphMap } from '@coinbase/cds-icons/glyphMap';
-import { isDevelopment } from '@coinbase/cds-utils';
-import { useComponentConfig } from '../hooks/useComponentConfig';
-import { useTheme } from '../hooks/useTheme';
-import { Box } from '../layout/Box';
-import { jsx as _jsx } from "react/jsx-runtime";
-const getIconSourceSize = iconSize => {
-  if (iconSize <= 12) return 12;
-  if (iconSize <= 16) return 16;
-  return 24;
-};
-export const Icon = /*#__PURE__*/memo(_props => {
-  const mergedProps = useComponentConfig('Icon', _props);
-  const {
-    accessibilityLabel,
-    accessibilityHint,
-    animated = false,
-    color = 'fgPrimary',
-    dangerouslySetColor,
-    style,
-    styles,
-    fallback = null,
-    name,
-    size = 'm',
-    testID,
-    padding,
-    paddingX,
-    paddingY,
-    paddingTop,
-    paddingEnd,
-    paddingBottom,
-    paddingStart,
-    active
-  } = mergedProps;
-  const TextComponent = animated ? Animated.Text : Text;
-  const theme = useTheme();
-  const {
-    fontScale
-  } = useWindowDimensions();
-
-  // Scale according to device a11y font size settings
-  const iconSize = theme.iconSize[size] * fontScale;
-  const sourceSize = getIconSourceSize(iconSize);
-  const iconColor = theme.color[color];
-  const finalColor = dangerouslySetColor != null ? dangerouslySetColor : iconColor;
-  const rootStyle = useMemo(() => {
-    var _ref, _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8;
-    return [{
-      paddingTop: theme.space[(_ref = (_ref2 = paddingTop != null ? paddingTop : paddingY) != null ? _ref2 : padding) != null ? _ref : 0],
-      paddingEnd: theme.space[(_ref3 = (_ref4 = paddingEnd != null ? paddingEnd : paddingX) != null ? _ref4 : padding) != null ? _ref3 : 0],
-      paddingBottom: theme.space[(_ref5 = (_ref6 = paddingBottom != null ? paddingBottom : paddingY) != null ? _ref6 : padding) != null ? _ref5 : 0],
-      paddingStart: theme.space[(_ref7 = (_ref8 = paddingStart != null ? paddingStart : paddingX) != null ? _ref8 : padding) != null ? _ref7 : 0]
-    }, style, styles == null ? void 0 : styles.root];
-  }, [style, theme.space, padding, paddingX, paddingY, paddingTop, paddingEnd, paddingBottom, paddingStart, styles == null ? void 0 : styles.root]);
-  const iconStyle = useMemo(() => [{
-    fontFamily: 'CoinbaseIcons',
-    fontSize: iconSize,
-    height: iconSize,
-    width: iconSize,
-    lineHeight: iconSize,
-    color: finalColor
-  }, styles == null ? void 0 : styles.icon], [finalColor, iconSize, styles == null ? void 0 : styles.icon]);
-  const iconName = name + "-" + sourceSize + "-" + (active ? 'active' : 'inactive');
-  const glyph = glyphMap[iconName];
-  if (glyph === undefined) {
-    if (isDevelopment()) {
-      console.error("Unable to find glyph for icon name \"" + name + "\" with glyph key \"" + iconName + "\"");
-    }
-    return fallback;
-  }
-  return /*#__PURE__*/_jsx(Box, {
-    animated: animated,
-    style: rootStyle,
-    testID: testID,
-    children: /*#__PURE__*/_jsx(TextComponent, {
-      accessibilityHint: accessibilityHint,
-      accessibilityLabel: accessibilityLabel,
-      accessibilityRole: "image",
-      accessible: !!accessibilityLabel,
-      allowFontScaling: false
-      // TODO https://linear.app/coinbase/issue/CDS-1518/audit-potentially-harmful-reactnative-animated-pattern
-      ,
-      style: iconStyle,
-      children: glyph
-    })
-  });
+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.js

@@ -0,0 +1,144 @@
+const _excluded = ["ref"];
+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, { memo, useMemo } from 'react';
+import { Animated, Text, useWindowDimensions } from 'react-native';
+import { isDevelopment } from '@coinbase/cds-utils';
+import { useComponentConfig } from '../hooks/useComponentConfig';
+import { useTheme } from '../hooks/useTheme';
+import { Box } from '../layout/Box';
+
+/** Default font family for the CDS icon glyph font. */
+import { jsx as _jsx } from "react/jsx-runtime";
+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 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 = name + "-" + sourceSize + "-" + (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(_ref3 => {
+    let {
+        ref
+      } = _ref3,
+      _props = _objectWithoutPropertiesLoose(_ref3, _excluded);
+    const mergedProps = useComponentConfig('Icon', _props);
+    const {
+      accessibilityLabel,
+      accessibilityHint,
+      animated = false,
+      color = 'fgPrimary',
+      dangerouslySetColor,
+      style,
+      styles,
+      fallback = null,
+      name,
+      size = 'm',
+      testID,
+      padding,
+      paddingX,
+      paddingY,
+      paddingTop,
+      paddingEnd,
+      paddingBottom,
+      paddingStart,
+      active
+    } = mergedProps;
+    const TextComponent = animated ? Animated.Text : Text;
+    const theme = useTheme();
+    const {
+      fontScale
+    } = useWindowDimensions();
+
+    // Scale according to device a11y font size settings
+    const iconSize = theme.iconSize[size] * fontScale;
+    const iconColor = theme.color[color];
+    const finalColor = dangerouslySetColor != null ? dangerouslySetColor : iconColor;
+    const rootStyle = useMemo(() => {
+      var _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref0, _ref1;
+      return [{
+        paddingTop: theme.space[(_ref4 = (_ref5 = paddingTop != null ? paddingTop : paddingY) != null ? _ref5 : padding) != null ? _ref4 : 0],
+        paddingEnd: theme.space[(_ref6 = (_ref7 = paddingEnd != null ? paddingEnd : paddingX) != null ? _ref7 : padding) != null ? _ref6 : 0],
+        paddingBottom: theme.space[(_ref8 = (_ref9 = paddingBottom != null ? paddingBottom : paddingY) != null ? _ref9 : padding) != null ? _ref8 : 0],
+        paddingStart: theme.space[(_ref0 = (_ref1 = paddingStart != null ? paddingStart : paddingX) != null ? _ref1 : padding) != null ? _ref0 : 0]
+      }, style, styles == null ? void 0 : styles.root];
+    }, [style, theme.space, padding, paddingX, paddingY, paddingTop, paddingEnd, paddingBottom, paddingStart, styles == null ? void 0 : styles.root]);
+    const iconStyle = useMemo(() => [{
+      fontFamily,
+      fontSize: iconSize,
+      height: iconSize,
+      width: iconSize,
+      lineHeight: iconSize,
+      color: finalColor
+    }, styles == null ? void 0 : styles.icon], [finalColor, iconSize, styles == null ? 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 \"" + name + "\" at size \"" + size + "\"");
+      }
+      return fallback;
+    }
+    return /*#__PURE__*/_jsx(Box, {
+      animated: animated,
+      style: rootStyle,
+      testID: testID,
+      children: /*#__PURE__*/_jsx(TextComponent, {
+        ref: ref,
+        accessibilityHint: accessibilityHint,
+        accessibilityLabel: accessibilityLabel,
+        accessibilityRole: "image",
+        accessible: !!accessibilityLabel,
+        allowFontScaling: false
+        // TODO https://linear.app/coinbase/issue/CDS-1518/audit-potentially-harmful-reactnative-animated-pattern
+        ,
+        style: iconStyle,
+        children: glyph
+      })
+    });
+  });
+  Icon.displayName = 'Icon';
+  return Icon;
+}
+export { getIconSourceSize };

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-mobile",
-  "version": "9.7.2",
+  "version": "9.8.0",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -218,7 +218,7 @@
     "react-native-worklets": "0.5.2"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^9.7.2",
+    "@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",