@coinbase/cds-mobile 9.0.2 → 9.1.1

package/CHANGELOG.md

@@ -8,6 +8,22 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 9.1.1 (5/27/2026 PST)
+
+#### 🐞 Fixes
+
+- Fix: support inside label variant on select. [[#726](https://github.com/coinbase/cds/pull/726)]
+
+## 9.1.0 (5/26/2026 PST)
+
+#### 🚀 Updates
+
+- Feat: support DotCount theming. [[#723](https://github.com/coinbase/cds/pull/723)]
+
+#### 🐞 Fixes
+
+- Fix: DotCount border mixing with background color. [[#723](https://github.com/coinbase/cds/pull/723)]
+
 ## 9.0.2 ((5/22/2026, 09:54 AM PST))
 
 This is an artificial version bump with no new change.

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

@@ -1,4 +1,4 @@
-import { TouchableOpacity } from 'react-native';
+import { type StyleProp, TouchableOpacity, type ViewStyle } from 'react-native';
 import type { SelectControlProps, SelectType } from './Select';
 type DefaultSelectControlComponent = <
   Type extends SelectType,
@@ -44,14 +44,14 @@ export declare const DefaultSelectControlComponent: import('react').NamedExoticC
       removeSelectedOptionAccessibilityLabel?: string;
       blendStyles?: import('../../system').InteractableBlendStyles;
       compact?: boolean;
-      style?: import('react-native').StyleProp<import('react-native').ViewStyle>;
+      style?: StyleProp<ViewStyle>;
       styles?: {
-        controlStartNode?: import('react-native').StyleProp<import('react-native').ViewStyle>;
-        controlInputNode?: import('react-native').StyleProp<import('react-native').ViewStyle>;
-        controlValueNode?: import('react-native').StyleProp<import('react-native').ViewStyle>;
-        controlLabelNode?: import('react-native').StyleProp<import('react-native').ViewStyle>;
-        controlHelperTextNode?: import('react-native').StyleProp<import('react-native').ViewStyle>;
-        controlEndNode?: import('react-native').StyleProp<import('react-native').ViewStyle>;
+        controlStartNode?: StyleProp<ViewStyle>;
+        controlInputNode?: StyleProp<ViewStyle>;
+        controlValueNode?: StyleProp<ViewStyle>;
+        controlLabelNode?: StyleProp<ViewStyle>;
+        controlHelperTextNode?: StyleProp<ViewStyle>;
+        controlEndNode?: StyleProp<ViewStyle>;
       };
     } & import('react').RefAttributes<import('react-native').View>
 >;

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":"AACA,OAAO,EAAa,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAe3D,OAAO,KAAK,EAAE,kBAAkB,EAAgB,UAAU,EAAE,MAAM,UAAU,CAAC;AAY7E,KAAK,6BAA6B,GAAG,CACnC,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,KAAK,CAAC,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC,CAAC;CAC9D,KACE,KAAK,CAAC,YAAY,CAAC;AAExB,eAAO,MAAM,6BAA6B;;;;;;;;;;;;;;;;;;;;;wBAsPlC,CAAH;wBAEU,CAAC;wBAIgC,CAAA;wBAC9B,CAAC;6BACK,CAAC;sBAIb,CAAX;;+DAgIA,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAoC,6BAA6B,CAAC"}
+{"version":3,"file":"DefaultSelectControl.d.ts","sourceRoot":"","sources":["../../../src/alpha/select/DefaultSelectControl.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,KAAK,SAAS,EAAE,gBAAgB,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAe3F,OAAO,KAAK,EAAE,kBAAkB,EAAgB,UAAU,EAAE,MAAM,UAAU,CAAC;AAY7E,KAAK,6BAA6B,GAAG,CACnC,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,KAAK,CAAC,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC,CAAC;CAC9D,KACE,KAAK,CAAC,YAAY,CAAC;AAExB,eAAO,MAAM,6BAA6B;;;;;;;;;;;;;;;;;;;;;wBA8OZ,CAAC;wBACoB,CAAC;wBAE1C,CAAR;wBAIO,CAAA;6BAKD,CAAH;sBAGU,CAAC;;+DA6Jf,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAoC,6BAA6B,CAAC"}

package/dts/dots/DotCount.d.ts

@@ -7,13 +7,18 @@ import type {
   SharedAccessibilityProps,
   SharedProps,
 } from '@coinbase/cds-common/types';
-export declare const MAX_OVERFLOW_COUNT = 99;
-export declare const parseDotCountMaxOverflow: (count: number, max?: number) => string | number;
+import {
+  MAX_OVERFLOW_COUNT,
+  parseDotCountMaxOverflow,
+} from '@coinbase/cds-common/utils/parseDotCountMaxOverflow';
+import { type BoxBaseProps } from '../layout/Box';
+export { MAX_OVERFLOW_COUNT, parseDotCountMaxOverflow };
 export type DotCountBaseProps = SharedProps &
   Pick<
     SharedAccessibilityProps,
     'accessibilityLabel' | 'accessibilityLabelledBy' | 'accessibilityHint'
-  > & {
+  > &
+  Omit<BoxBaseProps, 'children' | 'background' | 'pin' | 'style' | 'height'> & {
     /**
      * The number value to be shown in the dot. If count is <= 0, dot will not show up.
      *  */
@@ -35,17 +40,10 @@ export type DotCountBaseProps = SharedProps &
     /** Indicates what shape Dot is overlapping */
     overlap?: DotOverlap;
     /**
-     * An optional fixed height of the DotCount component.
-     * Width grows based on content length.
+     * Fixed height of the DotCount badge container. Width grows based on content length.
      * @default 24
-     * */
-    height?: number;
-    /**
-     * An optional fixed width of the DotCount component.
-     * By default, width grows based on content length.
-     * @default auto
-     * */
-    width?: number;
+     */
+    height?: BoxBaseProps['height'];
   };
 export type DotCountProps = DotCountBaseProps & {
   style?: StyleProp<ViewStyle>;

package/dts/dots/DotCount.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DotCount.d.ts","sourceRoot":"","sources":["../../src/dots/DotCount.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAClE,OAAO,EAEL,KAAK,SAAS,EAEd,KAAK,SAAS,EAEd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAgBtB,OAAO,KAAK,EACV,oBAAoB,EACpB,gBAAgB,EAChB,UAAU,EACV,wBAAwB,EACxB,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAepC,eAAO,MAAM,kBAAkB,KAAK,CAAC;AAErC,eAAO,MAAM,wBAAwB,GAAI,OAAO,MAAM,EAAE,MAAK,MAA2B,oBAEvF,CAAC;AAaF,MAAM,MAAM,iBAAiB,GAAG,WAAW,GACzC,IAAI,CACF,wBAAwB,EACxB,oBAAoB,GAAG,yBAAyB,GAAG,mBAAmB,CACvE,GAAG;IACF;;UAEM;IACN,KAAK,EAAE,MAAM,CAAC;IACd;;;UAGM;IACN,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;SAGK;IACL,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,6CAA6C;IAC7C,GAAG,CAAC,EAAE,oBAAoB,CAAC;IAC3B,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,8CAA8C;IAC9C,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB;;;;SAIK;IACL,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;SAIK;IACL,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEJ,MAAM,MAAM,aAAa,GAAG,iBAAiB,GAAG;IAC9C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,sEAAsE;IACtE,MAAM,CAAC,EAAE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,wBAAwB;QACxB,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACjC,mBAAmB;QACnB,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAC7B,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,QAAQ,qCAAiB,aAAa,6CAsHjD,CAAC"}
+{"version":3,"file":"DotCount.d.ts","sourceRoot":"","sources":["../../src/dots/DotCount.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAClE,OAAO,EAEL,KAAK,SAAS,EACd,KAAK,SAAS,EAEd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAgBtB,OAAO,KAAK,EACV,oBAAoB,EACpB,gBAAgB,EAChB,UAAU,EACV,wBAAwB,EACxB,WAAW,EACZ,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACL,kBAAkB,EAClB,wBAAwB,EACzB,MAAM,qDAAqD,CAAC;AAK7D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AASvD,OAAO,EAAE,kBAAkB,EAAE,wBAAwB,EAAE,CAAC;AAexD,MAAM,MAAM,iBAAiB,GAAG,WAAW,GACzC,IAAI,CACF,wBAAwB,EACxB,oBAAoB,GAAG,yBAAyB,GAAG,mBAAmB,CACvE,GACD,IAAI,CAAC,YAAY,EAAE,UAAU,GAAG,YAAY,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,CAAC,GAAG;IAC3E;;UAEM;IACN,KAAK,EAAE,MAAM,CAAC;IACd;;;UAGM;IACN,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;SAGK;IACL,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,6CAA6C;IAC7C,GAAG,CAAC,EAAE,oBAAoB,CAAC;IAC3B,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,8CAA8C;IAC9C,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;CACjC,CAAC;AAEJ,MAAM,MAAM,aAAa,GAAG,iBAAiB,GAAG;IAC9C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,sEAAsE;IACtE,MAAM,CAAC,EAAE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,wBAAwB;QACxB,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACjC,mBAAmB;QACnB,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAC7B,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,QAAQ,qCAAiB,aAAa,6CAyJjD,CAAC"}

package/esm/alpha/select/DefaultSelectControl.js

@@ -37,7 +37,7 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forw
       variant,
       helperText,
       label,
-      labelVariant,
+      labelVariant: labelVariantProp,
       contentNode,
       startNode,
       endNode: customEndNode,
@@ -57,8 +57,11 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forw
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const theme = useTheme();
+  // When compact, labelVariant is ignored
+  const labelVariant = compact ? undefined : labelVariantProp;
   const isMultiSelect = type === 'multi';
   const shouldShowCompactLabel = compact && label && !isMultiSelect;
+  const shouldShowInsideLabel = labelVariant === 'inside' && !compact && label;
   const hasValue = value !== null && !(Array.isArray(value) && value.length === 0);
 
   // Map of options to their values
@@ -128,18 +131,30 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forw
     style: styles == null ? void 0 : styles.controlHelperTextNode,
     children: helperText
   }) : helperText, [helperText, variant, styles == null ? void 0 : styles.controlHelperTextNode]);
-  const labelNode = useMemo(() => typeof label === 'string' ? /*#__PURE__*/_jsx(Pressable, {
-    disabled: disabled,
-    onPress: () => setOpen(s => !s),
-    style: styles == null ? void 0 : styles.controlLabelNode,
-    children: /*#__PURE__*/_jsx(InputLabel, {
-      color: "fg"
-      // remove default vertical padding when label is the compact/inline version
-      ,
-      paddingY: shouldShowCompactLabel ? 0 : 0.5,
-      children: label
-    })
-  }) : label, [disabled, label, setOpen, shouldShowCompactLabel, styles == null ? void 0 : styles.controlLabelNode]);
+  const labelNode = useMemo(() => {
+    if (shouldShowInsideLabel || shouldShowCompactLabel) return null;
+    if (typeof label === 'string') {
+      return /*#__PURE__*/_jsx(InputLabel, {
+        color: "fg",
+        paddingY: 0.5,
+        style: styles == null ? void 0 : styles.controlLabelNode,
+        children: label
+      });
+    }
+    return label;
+  }, [shouldShowInsideLabel, shouldShowCompactLabel, label, styles == null ? void 0 : styles.controlLabelNode]);
+  const inlineLabelNode = useMemo(() => {
+    if (!shouldShowInsideLabel && !shouldShowCompactLabel) return null;
+    if (typeof label === 'string') {
+      return /*#__PURE__*/_jsx(InputLabel, {
+        color: "fg",
+        paddingY: 0,
+        style: styles == null ? void 0 : styles.controlLabelNode,
+        children: label
+      });
+    }
+    return label;
+  }, [shouldShowInsideLabel, shouldShowCompactLabel, label, styles == null ? void 0 : styles.controlLabelNode]);
   const valueAlignment = useMemo(() => align === 'end' ? 'flex-end' : align === 'center' ? 'center' : 'flex-start', [align]);
   const valueNode = useMemo(() => {
     if (hasValue && isMultiSelect) {
@@ -221,8 +236,20 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forw
           alignItems: "center",
           maxWidth: "40%",
           paddingEnd: 1,
-          children: labelNode
-        }) : null, /*#__PURE__*/_jsxs(VStack, {
+          children: inlineLabelNode
+        }) : null, shouldShowInsideLabel ? /*#__PURE__*/_jsxs(VStack, {
+          flexGrow: 1,
+          minWidth: 0,
+          width: "100%",
+          children: [inlineLabelNode, /*#__PURE__*/_jsxs(VStack, {
+            alignItems: valueAlignment,
+            flexGrow: 1,
+            flexShrink: 1,
+            minWidth: 0,
+            style: styles == null ? void 0 : styles.controlValueNode,
+            children: [valueNode, contentNode]
+          })]
+        }) : /*#__PURE__*/_jsxs(VStack, {
           alignItems: valueAlignment,
           flexGrow: 1,
           flexShrink: 1,
@@ -232,7 +259,7 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forw
         })]
       })
     })
-  })), [ref, computedControlAccessibilityLabel, disabled, onBlur, onFocus, styles == null ? void 0 : styles.controlInputNode, styles == null ? void 0 : styles.controlStartNode, styles == null ? void 0 : styles.controlValueNode, props, startNode, shouldShowCompactLabel, labelNode, valueAlignment, valueNode, contentNode, setOpen]);
+  })), [ref, computedControlAccessibilityLabel, disabled, onBlur, onFocus, styles == null ? void 0 : styles.controlInputNode, styles == null ? void 0 : styles.controlStartNode, styles == null ? void 0 : styles.controlValueNode, props, startNode, shouldShowCompactLabel, shouldShowInsideLabel, inlineLabelNode, valueAlignment, valueNode, contentNode, setOpen]);
   const endNode = useMemo(() => /*#__PURE__*/_jsx(Pressable, {
     accessible: customEndNode ? true : false,
     disabled: disabled,
@@ -249,13 +276,11 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forw
     })
   }), [styles == null ? void 0 : styles.controlEndNode, disabled, customEndNode, open, variant, setOpen]);
   const inputStackStyles = useMemo(() => ({
-    input: {
-      paddingTop: compact || labelVariant === 'inside' ? theme.space[1] : theme.space[2],
-      paddingBottom: compact ? theme.space[1] : theme.space[2],
-      paddingLeft: theme.space[2],
-      paddingRight: theme.space[2]
-    }
-  }), [compact, theme, labelVariant]);
+    paddingTop: compact || labelVariant === 'inside' ? theme.space[1] : theme.space[2],
+    paddingBottom: compact || labelVariant === 'inside' ? theme.space[1] : theme.space[2],
+    paddingLeft: theme.space[2],
+    paddingRight: theme.space[2]
+  }), [compact, labelVariant, theme.space]);
   return /*#__PURE__*/_jsx(InputStack, _extends({
     borderFocusedStyle: borderFocusedStyle,
     borderStyle: borderUnfocusedStyle,
@@ -266,11 +291,13 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forw
     focusedBorderWidth: focusedBorderWidth,
     helperTextNode: helperTextNode,
     inputNode: inputNode,
-    labelNode: shouldShowCompactLabel ? null : labelNode,
+    labelNode: labelNode,
     labelVariant: labelVariant,
     onBlur: onBlur,
     onFocus: onFocus,
-    styles: inputStackStyles,
+    styles: {
+      input: inputStackStyles
+    },
     variant: variant
   }, props));
 }));

package/esm/dots/DotCount.js

@@ -1,31 +1,26 @@
-const _excluded = ["children", "pin", "variant", "count", "max", "height", "width", "overlap", "style", "styles"];
+const _excluded = ["children", "pin", "variant", "count", "max", "height", "width", "testID", "accessibilityLabel", "accessibilityLabelledBy", "accessibilityHint", "overlap", "style", "styles", "alignItems", "justifyContent", "paddingX", "borderWidth", "borderRadius", "borderColor", "font", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "overflow"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 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, useEffect, useMemo, useState } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { View } from 'react-native';
 import Animated, { runOnJS, useAnimatedReaction, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
 import { usePreviousValue } from '@coinbase/cds-common/hooks/usePreviousValue';
 import { dotOpacityEnterConfig, dotOpacityExitConfig, dotScaleEnterConfig, dotScaleExitConfig } from '@coinbase/cds-common/motion/dot';
 import { dotCountSize } from '@coinbase/cds-common/tokens/dot';
+import { MAX_OVERFLOW_COUNT, parseDotCountMaxOverflow } from '@coinbase/cds-common/utils/parseDotCountMaxOverflow';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useDotPinStyles } from '../hooks/useDotPinStyles';
-import { useTheme } from '../hooks/useTheme';
+import { Box } from '../layout/Box';
 import { convertMotionConfigs } from '../motion/convertMotionConfig';
 import { withMotionTiming } from '../motion/withMotionTiming';
 import { Text } from '../typography/Text';
 import { getTransform } from './dotStyles';
 import { useDotsLayout } from './useDotsLayout';
 
-// If a badge count is greater than max (optional, defaults at 99), it should
-// truncate the numbers so its x+.
+// Re-exporting for backwards compatibility
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const MAX_OVERFLOW_COUNT = 99;
-export const parseDotCountMaxOverflow = function (count, max) {
-  if (max === void 0) {
-    max = MAX_OVERFLOW_COUNT;
-  }
-  return count <= max ? count : max + "+";
-};
+export { MAX_OVERFLOW_COUNT, parseDotCountMaxOverflow };
+const AnimatedBox = Animated.createAnimatedComponent(Box);
 const [opacityEnter, opacityExit, scaleEnter, scaleExit] = convertMotionConfigs([dotOpacityEnterConfig, dotOpacityExitConfig, dotScaleEnterConfig, dotScaleExitConfig]);
 const variantColorMap = {
   negative: 'bgNegative'
@@ -40,12 +35,28 @@ export const DotCount = /*#__PURE__*/memo(_props => {
       max,
       height = dotCountSize,
       width,
+      testID = 'dot-count',
+      accessibilityLabel,
+      accessibilityLabelledBy,
+      accessibilityHint,
       overlap,
       style,
-      styles
+      styles,
+      alignItems = 'center',
+      justifyContent = 'center',
+      paddingX = 0.75,
+      borderWidth = 100,
+      borderRadius = 400,
+      borderColor = 'bgSecondary',
+      font = 'caption',
+      color = 'fgInverse',
+      fontFamily,
+      fontSize,
+      fontWeight,
+      lineHeight,
+      overflow = 'hidden'
     } = mergedProps,
     props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
-  const theme = useTheme();
   const [childrenSize, onChildrenLayout] = useDotsLayout();
   const transforms = useDotPinStyles(childrenSize, {
     width: width != null ? width : height,
@@ -63,18 +74,6 @@ export const DotCount = /*#__PURE__*/memo(_props => {
     }
     return {};
   }, [pin, transforms]);
-  const containerStyles = useMemo(() => {
-    return [styleSheet.container, {
-      height,
-      minWidth: height,
-      width,
-      paddingHorizontal: theme.space[0.75],
-      borderWidth: theme.borderWidth[100],
-      borderRadius: theme.borderRadius[400],
-      borderColor: theme.color.bgSecondary,
-      backgroundColor: theme.color[variantColorMap[variant]]
-    }];
-  }, [height, width, theme.space, theme.borderWidth, theme.borderRadius, theme.color, variant]);
 
   // avoid displaying 0 during animations and preserve exit animation
   useEffect(() => {
@@ -106,37 +105,51 @@ export const DotCount = /*#__PURE__*/memo(_props => {
       }]
     };
   });
-  const dotCountContainerStyle = useMemo(() => [containerStyles, animatedStyles, styles == null ? void 0 : styles.container], [containerStyles, animatedStyles, styles == null ? void 0 : styles.container]);
+  const dotCountContainerStyle = useMemo(() => [animatedStyles, styles == null ? void 0 : styles.container], [animatedStyles, styles == null ? void 0 : styles.container]);
   const rootStyles = useMemo(() => [style, styles == null ? void 0 : styles.root], [styles == null ? void 0 : styles.root, style]);
+  const displayCount = useMemo(() => parseDotCountMaxOverflow(countInternal, max), [countInternal, max]);
 
   // only check childrenSize when children is defined
   const shouldShow = children !== undefined ? childrenSize !== null : true;
-  return /*#__PURE__*/_jsxs(View, _extends({
-    style: rootStyles
-  }, props, {
+  return /*#__PURE__*/_jsxs(View, {
+    accessibilityHint: accessibilityHint,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityLabelledBy: accessibilityLabelledBy,
+    style: rootStyles,
+    testID: testID,
     children: [/*#__PURE__*/_jsx(View, {
       onLayout: onChildrenLayout,
-      testID: props.testID + "-children",
+      testID: testID + "-children",
       children: children
     }), !shouldUnmount && shouldShow && /*#__PURE__*/_jsx(View, {
       style: pinStyles,
-      children: /*#__PURE__*/_jsx(Animated.View, {
+      children: /*#__PURE__*/_jsx(AnimatedBox, _extends({
+        animated: true,
+        alignItems: alignItems,
+        background: variantColorMap[variant],
+        borderColor: borderColor,
+        borderRadius: borderRadius,
+        borderWidth: borderWidth,
+        height: height,
+        justifyContent: justifyContent,
+        minWidth: height,
+        overflow: overflow,
+        paddingX: paddingX,
         style: dotCountContainerStyle,
         testID: "dotcount-container",
+        width: width
+      }, props, {
         children: /*#__PURE__*/_jsx(Text, {
-          color: "fgInverse",
-          font: "caption",
+          color: color,
+          font: font,
+          fontFamily: fontFamily,
+          fontSize: fontSize,
+          fontWeight: fontWeight,
+          lineHeight: lineHeight,
           style: styles == null ? void 0 : styles.text,
-          children: parseDotCountMaxOverflow(countInternal, max)
+          children: displayCount
         })
-      })
+      }))
     })]
-  }));
-});
-const styleSheet = StyleSheet.create({
-  container: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    display: 'flex'
-  }
+  });
 });

package/esm/system/__stories__/componentConfigStickerSheet/customComponentConfig.js

@@ -126,5 +126,11 @@ export const customComponentConfig = {
     paddingX: 1,
     font: 'caption',
     emphasis: 'low'
+  },
+  DotCount: {
+    height: 16,
+    // Design is 1.5 but this causes the badge to be too wide for some single-digit counts
+    paddingX: 1,
+    paddingY: 0
   }
 };

package/esm/system/__stories__/componentConfigStickerSheet/examples/DotCount.js

@@ -1,28 +1,21 @@
 import React, { memo } from 'react';
+import { IconButton } from '../../../../buttons/IconButton';
 import { DotCount } from '../../../../dots/DotCount';
-import { Icon } from '../../../../icons/Icon';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { HStack } from '../../../../layout/HStack';
+import { jsx as _jsx } from "react/jsx-runtime";
+const dotCounts = [3, 12, 100];
 export const DotCountExample = /*#__PURE__*/memo(() => {
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(DotCount, {
-      count: 3,
-      children: /*#__PURE__*/_jsx(Icon, {
-        name: "bell",
-        size: "m"
+  return /*#__PURE__*/_jsx(HStack, {
+    gap: 2,
+    children: dotCounts.map(count => /*#__PURE__*/_jsx(DotCount, {
+      count: count,
+      pin: "top-end",
+      children: /*#__PURE__*/_jsx(IconButton, {
+        transparent: true,
+        accessibilityLabel: "Notifications",
+        iconSize: "m",
+        name: "bell"
       })
-    }), /*#__PURE__*/_jsx(DotCount, {
-      count: 12,
-      children: /*#__PURE__*/_jsx(Icon, {
-        name: "bell",
-        size: "m"
-      })
-    }), /*#__PURE__*/_jsx(DotCount, {
-      count: 100,
-      max: 99,
-      children: /*#__PURE__*/_jsx(Icon, {
-        name: "bell",
-        size: "m"
-      })
-    })]
+    }, count))
   });
 });

package/esm/system/__stories__/componentConfigStickerSheet/examples/Select.js

@@ -1,24 +1,41 @@
-import React, { memo, useState } from 'react';
+import { memo, useState } from 'react';
 import { Select } from '../../../../alpha/select/Select';
 import { VStack } from '../../../../layout/VStack';
 import { stickerSheetSelectOptions } from './constants';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const SelectExample = /*#__PURE__*/memo(() => {
-  const [value, setValue] = useState('btc');
-  const [secondaryValue, setSecondaryValue] = useState(null);
+  const [selectValue, setSelectValue] = useState(null);
   return /*#__PURE__*/_jsxs(VStack, {
     gap: 1,
     width: "100%",
     children: [/*#__PURE__*/_jsx(Select, {
-      label: "Asset",
-      onChange: setValue,
+      label: "Label",
+      onChange: setSelectValue,
       options: stickerSheetSelectOptions,
-      value: value
+      placeholder: "Outside label",
+      value: selectValue
     }), /*#__PURE__*/_jsx(Select, {
-      label: "Asset (empty)",
-      onChange: setSecondaryValue,
+      label: "Label",
+      labelVariant: "inside",
+      onChange: setSelectValue,
       options: stickerSheetSelectOptions,
-      value: secondaryValue
+      placeholder: "Inside label",
+      value: selectValue
+    }), /*#__PURE__*/_jsx(Select, {
+      compact: true,
+      label: "Label",
+      onChange: setSelectValue,
+      options: stickerSheetSelectOptions,
+      placeholder: "Compact input",
+      value: selectValue
+    }), /*#__PURE__*/_jsx(Select, {
+      compact: true,
+      align: "end",
+      label: "Label",
+      onChange: setSelectValue,
+      options: stickerSheetSelectOptions,
+      placeholder: "Compact end align",
+      value: selectValue
     })]
   });
 });

package/esm/system/__stories__/componentConfigStickerSheet/examples/SelectChip.js

@@ -1,22 +1,26 @@
-import React, { memo, useState } from 'react';
-import { SelectChip } from '../../../../chips/SelectChip';
-import { SelectOption } from '../../../../controls/SelectOption';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useState } from 'react';
+import { SelectChip } from '../../../../alpha/select-chip/SelectChip';
+import { jsx as _jsx } from "react/jsx-runtime";
+const selectChipOptions = [{
+  value: 'USD',
+  label: 'USD'
+}, {
+  value: 'CAD',
+  label: 'CAD'
+}, {
+  value: 'GBP',
+  label: 'GBP'
+}, {
+  value: 'JPY',
+  label: 'JPY'
+}];
 export const SelectChipExample = /*#__PURE__*/memo(() => {
-  const [value, setValue] = useState('Balance');
-  return /*#__PURE__*/_jsxs(SelectChip, {
+  const [value, setValue] = useState(null);
+  return /*#__PURE__*/_jsx(SelectChip, {
+    accessibilityLabel: "Select a currency",
     onChange: setValue,
-    placeholder: "Sort",
-    value: value,
-    children: [/*#__PURE__*/_jsx(SelectOption, {
-      title: "Balance",
-      value: "Balance"
-    }), /*#__PURE__*/_jsx(SelectOption, {
-      title: "Name",
-      value: "Name"
-    }), /*#__PURE__*/_jsx(SelectOption, {
-      title: "Asset Value",
-      value: "Asset Value"
-    })]
+    options: selectChipOptions,
+    placeholder: "Currency",
+    value: value
   });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "9.0.2",
+  "version": "9.1.1",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -202,7 +202,7 @@
     "react-native-worklets": "0.5.2"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^9.0.2",
+    "@coinbase/cds-common": "^9.1.1",
     "@coinbase/cds-icons": "^5.17.0",
     "@coinbase/cds-illustrations": "^4.40.1",
     "@coinbase/cds-lottie-files": "^3.3.4",