@coinbase/cds-web 9.0.2 → 9.1.1

package/CHANGELOG.md

@@ -8,6 +8,18 @@ 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)]
+
 ## 9.0.2 (5/22/2026 PST)
 
 #### 🐞 Fixes

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;AAiB9E,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;AAycxB,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;AA+exB,eAAO,MAAM,oBAAoB,EAAoC,wBAAwB,CAAC"}

package/dts/dots/DotCount.d.ts

@@ -6,11 +6,13 @@ import type {
   SharedAccessibilityProps,
   SharedProps,
 } from '@coinbase/cds-common/types';
+import { type BoxBaseProps } from '../layout/Box';
 export type DotCountBaseProps = SharedProps &
   Pick<
     SharedAccessibilityProps,
     'accessibilityLabel' | 'accessibilityLabelledBy' | 'accessibilityHint'
-  > & {
+  > &
+  Omit<BoxBaseProps, 'children' | 'color' | 'background' | 'pin' | 'height'> & {
     /**
      * The number value to be shown in the dot. If count is <= 0, dot will not show up.
      *  */
@@ -32,21 +34,16 @@ 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 & {
+  /** Class name for the root element */
   className?: string;
-  style?: React.CSSProperties;
+  /** Color token for the count label */
+  color?: BoxBaseProps['color'];
   /** Custom class names for individual elements of the DotCount component */
   classNames?: {
     /** Root element */

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,KAAwB,MAAM,OAAO,CAAC;AAS7C,OAAO,KAAK,EACV,oBAAoB,EACpB,gBAAgB,EAChB,UAAU,EACV,wBAAwB,EACxB,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAmCpC,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,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,2EAA2E;IAC3E,UAAU,CAAC,EAAE;QACX,mBAAmB;QACnB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,wBAAwB;QACxB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,mBAAmB;QACnB,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;IACF,sEAAsE;IACtE,MAAM,CAAC,EAAE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B,wBAAwB;QACxB,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAChC,mBAAmB;QACnB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAC5B,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,QAAQ,qCAAiB,aAAa,6CAqFjD,CAAC"}
+{"version":3,"file":"DotCount.d.ts","sourceRoot":"","sources":["../../src/dots/DotCount.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAS7C,OAAO,KAAK,EACV,oBAAoB,EACpB,gBAAgB,EAChB,UAAU,EACV,wBAAwB,EACxB,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAQpC,OAAO,EAAO,KAAK,YAAY,EAAyC,MAAM,eAAe,CAAC;AAkB9F,MAAM,MAAM,iBAAiB,GAAG,WAAW,GACzC,IAAI,CACF,wBAAwB,EACxB,oBAAoB,GAAG,yBAAyB,GAAG,mBAAmB,CACvE,GACD,IAAI,CAAC,YAAY,EAAE,UAAU,GAAG,OAAO,GAAG,YAAY,GAAG,KAAK,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,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,KAAK,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAC9B,2EAA2E;IAC3E,UAAU,CAAC,EAAE;QACX,mBAAmB;QACnB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,wBAAwB;QACxB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,mBAAmB;QACnB,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;IACF,sEAAsE;IACtE,MAAM,CAAC,EAAE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B,wBAAwB;QACxB,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAChC,mBAAmB;QACnB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAC5B,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,QAAQ,qCAAiB,aAAa,6CA6GjD,CAAC"}

package/esm/alpha/select/DefaultSelectControl.js

@@ -12,7 +12,6 @@ import { HelperText } from '../../controls/HelperText';
 import { InputLabel } from '../../controls/InputLabel';
 import { InputStack } from '../../controls/InputStack';
 import { cx } from '../../cx';
-import { useTheme } from '../../hooks/useTheme';
 import { HStack } from '../../layout/HStack';
 import { VStack } from '../../layout/VStack';
 import { AnimatedCaret } from '../../motion/AnimatedCaret';
@@ -45,7 +44,7 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
       variant,
       helperText,
       label,
-      labelVariant,
+      labelVariant: labelVariantProp,
       contentNode,
       startNode,
       endNode: customEndNode,
@@ -67,11 +66,13 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
       classNames
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
-  const theme = useTheme();
   const isMultiSelect = type === 'multi';
+  // When compact, labelVariant is ignored
+  const labelVariant = compact ? undefined : labelVariantProp;
   // horizontal/inline label is used for compact selesct exepct for multi-selects
   // multi-selects render their label outside of the control unless labelVariant is set to 'inside'
   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
   // If multiple options share the same value, the first occurrence wins (matches native HTML select behavior)
@@ -158,27 +159,32 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
     style: styles === null || styles === void 0 ? void 0 : styles.controlHelperTextNode,
     children: helperText
   }) : helperText, [helperText, variant, classNames === null || classNames === void 0 ? void 0 : classNames.controlHelperTextNode, styles === null || styles === void 0 ? void 0 : styles.controlHelperTextNode]);
-  const labelNode = useMemo(() =>
-  // labelVariant has no effect when compact is true
-  labelVariant === 'inside' && !compact ? /*#__PURE__*/_jsx(Pressable, {
-    noScaleOnPress: true,
-    onClick: () => setOpen(s => !s),
-    tabIndex: -1,
-    children: /*#__PURE__*/_jsx(InputLabel, {
-      className: classNames === null || classNames === void 0 ? void 0 : classNames.controlLabelNode,
-      color: "fg",
-      style: styles === null || styles === void 0 ? void 0 : styles.controlLabelNode,
-      children: label
-    })
-  }) : typeof label === 'string' ? /*#__PURE__*/_jsx(InputLabel, {
-    className: classNames === null || classNames === void 0 ? void 0 : classNames.controlLabelNode,
-    color: "fg"
-    // remove default vertical padding when label is the compact/inline version
-    ,
-    paddingY: shouldShowCompactLabel ? 0 : 0.5,
-    style: styles === null || styles === void 0 ? void 0 : styles.controlLabelNode,
-    children: label
-  }) : label, [labelVariant, compact, classNames === null || classNames === void 0 ? void 0 : classNames.controlLabelNode, styles === null || styles === void 0 ? void 0 : styles.controlLabelNode, label, shouldShowCompactLabel, setOpen]);
+  const labelNode = useMemo(() => {
+    if (shouldShowInsideLabel || shouldShowCompactLabel) return null;
+    if (typeof label === 'string') {
+      return /*#__PURE__*/_jsx(InputLabel, {
+        className: classNames === null || classNames === void 0 ? void 0 : classNames.controlLabelNode,
+        color: "fg",
+        paddingY: 0.5,
+        style: styles === null || styles === void 0 ? void 0 : styles.controlLabelNode,
+        children: label
+      });
+    }
+    return label;
+  }, [shouldShowInsideLabel, shouldShowCompactLabel, classNames === null || classNames === void 0 ? void 0 : classNames.controlLabelNode, styles === null || styles === void 0 ? void 0 : styles.controlLabelNode, label]);
+  const inlineLabelNode = useMemo(() => {
+    if (!shouldShowInsideLabel && !shouldShowCompactLabel) return null;
+    if (typeof label === 'string') {
+      return /*#__PURE__*/_jsx(InputLabel, {
+        className: classNames === null || classNames === void 0 ? void 0 : classNames.controlLabelNode,
+        color: "fg",
+        paddingY: 0,
+        style: styles === null || styles === void 0 ? void 0 : styles.controlLabelNode,
+        children: label
+      });
+    }
+    return label;
+  }, [shouldShowInsideLabel, shouldShowCompactLabel, classNames === null || classNames === void 0 ? void 0 : classNames.controlLabelNode, styles === null || styles === void 0 ? void 0 : styles.controlLabelNode, label]);
   const valueNode = useMemo(() => {
     if (hasValue && isMultiSelect) {
       const valuesToShow = value.length <= maxSelectedOptionsToShow ? value : value.slice(0, maxSelectedOptionsToShow);
@@ -262,8 +268,32 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
     }), shouldShowCompactLabel ? /*#__PURE__*/_jsx(HStack, {
       alignItems: "center",
       paddingEnd: 1,
-      children: labelNode
-    }) : null, /*#__PURE__*/_jsx(HStack, {
+      children: inlineLabelNode
+    }) : null, shouldShowInsideLabel ? /*#__PURE__*/_jsxs(VStack, {
+      flexGrow: 1,
+      minWidth: 0,
+      width: "100%",
+      children: [inlineLabelNode, /*#__PURE__*/_jsx(HStack, {
+        alignItems: "center",
+        flexGrow: 1,
+        minWidth: 0,
+        width: "100%",
+        children: /*#__PURE__*/_jsxs(VStack, {
+          ref: valueNodeContainerRef,
+          alignItems: align,
+          className: classNames === null || classNames === void 0 ? void 0 : classNames.controlValueNode,
+          flexGrow: 1,
+          flexShrink: 1,
+          flexWrap: "wrap",
+          gap: 1,
+          justifyContent: "flex-start",
+          minWidth: 0,
+          overflow: "hidden",
+          style: styles === null || styles === void 0 ? void 0 : styles.controlValueNode,
+          children: [valueNode, contentNode]
+        })
+      })]
+    }) : /*#__PURE__*/_jsx(HStack, {
       alignItems: "center",
       flexGrow: 1,
       flexShrink: 1,
@@ -286,7 +316,7 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
         children: [valueNode, contentNode]
       })
     })]
-  }), [computedControlAccessibilityLabel, ariaHaspopup, open, role, interactableBlendStyles, classNames === null || classNames === void 0 ? void 0 : classNames.controlInputNode, classNames === null || classNames === void 0 ? void 0 : classNames.controlStartNode, classNames === null || classNames === void 0 ? void 0 : classNames.controlValueNode, disabled, styles === null || styles === void 0 ? void 0 : styles.controlInputNode, styles === null || styles === void 0 ? void 0 : styles.controlStartNode, styles === null || styles === void 0 ? void 0 : styles.controlValueNode, tabIndex, onKeyDown, startNode, shouldShowCompactLabel, labelNode, align, valueNode, contentNode, setOpen]);
+  }), [computedControlAccessibilityLabel, ariaHaspopup, open, role, interactableBlendStyles, classNames === null || classNames === void 0 ? void 0 : classNames.controlInputNode, classNames === null || classNames === void 0 ? void 0 : classNames.controlStartNode, classNames === null || classNames === void 0 ? void 0 : classNames.controlValueNode, disabled, styles === null || styles === void 0 ? void 0 : styles.controlInputNode, styles === null || styles === void 0 ? void 0 : styles.controlStartNode, styles === null || styles === void 0 ? void 0 : styles.controlValueNode, tabIndex, onKeyDown, startNode, shouldShowCompactLabel, shouldShowInsideLabel, inlineLabelNode, align, valueNode, contentNode, setOpen]);
   const endNode = useMemo(() => /*#__PURE__*/_jsx(Pressable, {
     "aria-hidden": true,
     flexShrink: 0,
@@ -307,13 +337,11 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
     })
   }), [classNames === null || classNames === void 0 ? void 0 : classNames.controlEndNode, labelVariant, styles === null || styles === void 0 ? void 0 : styles.controlEndNode, 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.space, labelVariant]);
+    paddingTop: compact || labelVariant === 'inside' ? 'var(--space-1)' : 'var(--space-2)',
+    paddingBottom: compact || labelVariant === 'inside' ? 'var(--space-1)' : 'var(--space-2)',
+    paddingLeft: 'var(--space-2)',
+    paddingRight: 'var(--space-2)'
+  }), [compact, labelVariant]);
   return /*#__PURE__*/_jsx(InputStack, _objectSpread({
     ref: ref,
     blendStyles: interactableBlendStyles,
@@ -323,9 +351,11 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
     focusedBorderWidth: focusedBorderWidth,
     helperTextNode: helperTextNode,
     inputNode: inputNode,
-    labelNode: shouldShowCompactLabel ? null : labelNode,
+    labelNode: labelNode,
     labelVariant: labelVariant,
-    styles: inputStackStyles,
+    styles: {
+      input: inputStackStyles
+    },
     variant: variant
   }, props));
 }));

package/esm/dots/DotCount.css

@@ -1,2 +1 @@
-@layer cds{.baseCss-b1qqkfau{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;position:relative;}
-.dotCountContentCss-dqpqhs5{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;border-style:solid;border-width:var(--borderWidth-100);border-radius:var(--borderRadius-400);padding-inline-start:var(--space-0_75);padding-inline-end:var(--space-0_75);}}
+@layer cds{.baseCss-b1qqkfau{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;position:relative;}}

package/esm/dots/DotCount.js

@@ -1,4 +1,4 @@
-const _excluded = ["children", "pin", "variant", "count", "max", "height", "width", "testID", "accessibilityLabel", "overlap", "className", "classNames", "style", "styles"];
+const _excluded = ["children", "pin", "variant", "count", "max", "height", "width", "testID", "accessibilityLabel", "overlap", "className", "classNames", "style", "styles", "alignItems", "justifyContent", "display", "paddingX", "borderWidth", "borderRadius", "borderColor", "font", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight"];
 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; }
@@ -14,13 +14,13 @@ import { m as motion } from 'framer-motion';
 import { NewAnimatePresence } from '../animation/NewAnimatePresence';
 import { cx } from '../cx';
 import { useComponentConfig } from '../hooks/useComponentConfig';
-import { useTheme } from '../hooks/useTheme';
+import { Box } from '../layout/Box';
 import { useMotionProps } from '../motion/useMotionProps';
 import { Text } from '../typography/Text';
 import { getTransform } from './dotStyles';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const MotionBox = motion(Box);
 const baseCss = "baseCss-b1qqkfau";
-const dotCountContentCss = "dotCountContentCss-dqpqhs5";
 const variantColorMap = {
   negative: 'fgNegative'
 };
@@ -34,62 +34,78 @@ export const DotCount = /*#__PURE__*/memo(_props => {
       max,
       height = dotCountSize,
       width,
-      testID,
+      testID = 'dot-count',
       accessibilityLabel,
       overlap,
       className,
       classNames,
       style,
-      styles
+      styles,
+      alignItems = 'center',
+      justifyContent = 'center',
+      display = 'flex',
+      paddingX = 0.75,
+      borderWidth = 100,
+      borderRadius = 400,
+      borderColor = 'bgSecondary',
+      font = 'caption',
+      color = 'fgInverse',
+      fontFamily,
+      fontSize,
+      fontWeight,
+      lineHeight
     } = mergedProps,
     props = _objectWithoutProperties(mergedProps, _excluded);
-  const {
-    color
-  } = useTheme();
   const pinStyles = getTransform(pin, overlap);
-  const containerStyles = useMemo(() => {
-    const variantColor = variantColorMap[variant];
-    return _objectSpread(_objectSpread({
-      height,
-      minWidth: height,
-      width,
-      backgroundColor: color[variantColor],
-      borderColor: color.bgSecondary
-    }, pinStyles), styles === null || styles === void 0 ? void 0 : styles.container);
-  }, [height, width, color, pinStyles, styles === null || styles === void 0 ? void 0 : styles.container, variant]);
+  const containerStyle = useMemo(() => _objectSpread(_objectSpread({}, pinStyles), styles === null || styles === void 0 ? void 0 : styles.container), [pinStyles, styles === null || styles === void 0 ? void 0 : styles.container]);
   const motionProps = useMotionProps({
     enterConfigs: [dotOpacityEnterConfig, dotScaleEnterConfig],
     exitConfigs: [dotOpacityExitConfig, dotScaleExitConfig],
     exit: 'exit'
   });
   const rootStyles = useMemo(() => _objectSpread(_objectSpread({}, style), styles === null || styles === void 0 ? void 0 : styles.root), [styles === null || styles === void 0 ? void 0 : styles.root, style]);
-  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+  const displayCount = useMemo(() => parseDotCountMaxOverflow(count, max), [count, max]);
+  return /*#__PURE__*/_jsxs("div", {
     "aria-label": accessibilityLabel,
     className: cx(baseCss, className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
     "data-testid": testID,
-    style: rootStyles
-  }, props), {}, {
+    style: rootStyles,
     children: [children, /*#__PURE__*/_jsx(NewAnimatePresence, {
       children: count > 0 &&
       /*#__PURE__*/
       // TODO: Remove type assertion after upgrading framer-motion to v11+ for React 19 compatibility
-      _jsx(motion.div, _objectSpread(_objectSpread({}, _objectSpread(_objectSpread({}, motionProps), {}, {
-        className: cx(dotCountContentCss, classNames === null || classNames === void 0 ? void 0 : classNames.container),
+      _jsx(MotionBox, _objectSpread(_objectSpread({}, _objectSpread(_objectSpread({}, motionProps), {}, {
+        alignItems,
+        background: variantColorMap[variant],
+        borderColor,
+        borderRadius,
+        borderWidth,
+        className: classNames === null || classNames === void 0 ? void 0 : classNames.container,
         'data-testid': 'dotcount-container',
-        style: containerStyles
-      })), {}, {
+        display,
+        height,
+        justifyContent,
+        minWidth: height,
+        paddingX,
+        style: containerStyle,
+        width
+      }, props)), {}, {
         children: /*#__PURE__*/_jsx(Text, {
           as: "p",
           className: classNames === null || classNames === void 0 ? void 0 : classNames.text,
-          color: "fgInverse",
+          color: color,
           display: "block",
-          font: "caption",
+          font: font,
+          fontFamily: fontFamily,
+          fontSize: fontSize,
+          fontWeight: fontWeight,
+          lineHeight: lineHeight,
           style: styles === null || styles === void 0 ? void 0 : styles.text,
           textAlign: "center",
-          children: parseDotCountMaxOverflow(count, max)
+          children: displayCount
         })
       }))
     })]
-  }));
+  });
 });
 import "./DotCount.css";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web",
-  "version": "9.0.2",
+  "version": "9.1.1",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",
@@ -215,7 +215,7 @@
     "react-dom": "^18.0.0 || ~19.1.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",