@coinbase/cds-web 8.66.1 → 9.0.0-rc.1

package/esm/controls/Control.js

@@ -1,4 +1,4 @@
-const _excluded = ["type", "checked", "disabled", "indeterminate", "readOnly", "required", "value", "children", "label", "aria-labelledby", "background", "borderColor", "borderRadius", "borderWidth", "color", "elevation", "testID", "iconStyle", "labelStyle"];
+const _excluded = ["type", "checked", "disabled", "indeterminate", "readOnly", "required", "value", "children", "label", "aria-labelledby", "background", "borderColor", "borderRadius", "borderWidth", "color", "elevation", "testID", "iconStyle", "labelStyle", "className", "style", "classNames", "styles"];
 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; }
@@ -17,8 +17,22 @@ import { Box } from '../layout/Box';
 import { Interactable } from '../system/Interactable';
 import { Text } from '../typography/Text';
 import { isRtl } from '../utils/isRtl';
+
+/**
+ * Static class names for Control component parts.
+ * Use these selectors to target specific elements with CSS.
+ */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const COMPONENT_STATIC_CLASSNAME = 'cds-Control';
+export const controlClassNames = {
+  /** Persistent outer wrapper across labeled and unlabeled variants. */
+  root: 'cds-Control',
+  /** Native `<label>` wrapper element. */
+  label: 'cds-Control-label',
+  /** Interactable icon wrapper element. */
+  icon: 'cds-Control-icon',
+  /** Native input element. */
+  input: 'cds-Control-input'
+};
 const pointerCss = "pointerCss-p1pliz73";
 const inputBaseCss = "inputBaseCss-i1hz3kk0";
 const interactableCss = "interactableCss-i1h2gel3";
@@ -44,7 +58,11 @@ const ControlWithRef = /*#__PURE__*/forwardRef(function ControlWithRef(_props, r
       elevation,
       testID,
       iconStyle,
-      labelStyle
+      labelStyle,
+      className,
+      style,
+      classNames,
+      styles
     } = mergedProps,
     htmlProps = _objectWithoutProperties(mergedProps, _excluded);
   if (isDevelopment() && !children && !ariaLabelledby) {
@@ -54,7 +72,7 @@ const ControlWithRef = /*#__PURE__*/forwardRef(function ControlWithRef(_props, r
   const [id1, id2] = usePrefixedId(['trigger', 'collapsible']);
   const labelId = ariaLabelledby !== null && ariaLabelledby !== void 0 ? ariaLabelledby : id1;
   const inputId = (_htmlProps$id = htmlProps.id) !== null && _htmlProps$id !== void 0 ? _htmlProps$id : id2;
-  const internalInputRef = useRef();
+  const internalInputRef = useRef(undefined);
   const inputRef = useMergeRefs(ref, internalInputRef);
   const iconElement = useMemo(() => /*#__PURE__*/_jsxs(Interactable, {
     transparentWhileInactive: true,
@@ -63,10 +81,10 @@ const ControlWithRef = /*#__PURE__*/forwardRef(function ControlWithRef(_props, r
     borderColor: borderColor,
     borderRadius: borderRadius,
     borderWidth: borderWidth,
-    className: interactableCss,
+    className: cx(interactableCss, controlClassNames.icon, classNames === null || classNames === void 0 ? void 0 : classNames.icon),
     disabled: disabled || readOnly,
     elevation: elevation,
-    style: iconStyle,
+    style: _objectSpread(_objectSpread({}, iconStyle), styles === null || styles === void 0 ? void 0 : styles.icon),
     testID: testID ? "".concat(testID, "-parent") : undefined,
     children: [/*#__PURE__*/_jsx("input", _objectSpread({
       ref: inputRef,
@@ -74,16 +92,17 @@ const ControlWithRef = /*#__PURE__*/forwardRef(function ControlWithRef(_props, r
       "aria-labelledby": labelId,
       "aria-required": type !== 'checkbox' ? required : undefined,
       checked: checked,
-      className: cx(inputBaseCss, pointerCss),
+      className: cx(inputBaseCss, pointerCss, controlClassNames.input, classNames === null || classNames === void 0 ? void 0 : classNames.input),
       "data-testid": testID,
       disabled: disabled,
       id: inputId,
       readOnly: readOnly,
       required: required,
+      style: styles === null || styles === void 0 ? void 0 : styles.input,
       type: type,
       value: value
     }, htmlProps)), children]
-  }), [background, borderColor, borderRadius, borderWidth, checked, children, disabled, elevation, htmlProps, iconStyle, inputId, inputRef, labelId, readOnly, required, testID, type, value]);
+  }), [background, borderColor, borderRadius, borderWidth, classNames === null || classNames === void 0 ? void 0 : classNames.icon, classNames === null || classNames === void 0 ? void 0 : classNames.input, checked, children, disabled, elevation, htmlProps, iconStyle, inputId, inputRef, labelId, readOnly, required, styles === null || styles === void 0 ? void 0 : styles.icon, styles === null || styles === void 0 ? void 0 : styles.input, testID, type, value]);
   const controlElement = useMemo(() => {
     /**
      * If the control has label, the label's lineHeight doesn't match the icon size. We need to
@@ -93,9 +112,9 @@ const ControlWithRef = /*#__PURE__*/forwardRef(function ControlWithRef(_props, r
      */
     if (!label) return iconElement;
     return /*#__PURE__*/_jsx("label", {
-      className: cx(COMPONENT_STATIC_CLASSNAME, pointerCss),
+      className: cx(pointerCss, controlClassNames.label, classNames === null || classNames === void 0 ? void 0 : classNames.label),
       htmlFor: inputId,
-      style: labelStyle,
+      style: _objectSpread(_objectSpread({}, labelStyle), styles === null || styles === void 0 ? void 0 : styles.label),
       children: /*#__PURE__*/_jsxs(Box, {
         alignItems: "flex-start",
         flexDirection: isRtl() ? 'row-reverse' : 'row',
@@ -114,10 +133,15 @@ const ControlWithRef = /*#__PURE__*/forwardRef(function ControlWithRef(_props, r
         })]
       })
     });
-  }, [label, iconElement, inputId, labelStyle, color, disabled, readOnly, labelId]);
+  }, [label, iconElement, inputId, labelStyle, color, disabled, readOnly, labelId, classNames === null || classNames === void 0 ? void 0 : classNames.label, styles === null || styles === void 0 ? void 0 : styles.label]);
 
   // If no label is provided, consumer should wrap the checkbox with <label> or provide a value for the aria-labelledby prop.
-  return controlElement;
+  return /*#__PURE__*/_jsx(Box, {
+    className: cx(controlClassNames.root, className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
+    style: _objectSpread(_objectSpread({}, style), styles === null || styles === void 0 ? void 0 : styles.root),
+    width: "fit-content",
+    children: controlElement
+  });
 });
 export const Control = /*#__PURE__*/memo(ControlWithRef);
 import "./Control.css";

package/esm/controls/HelperText.js

@@ -1,4 +1,4 @@
-const _excluded = ["color", "id", "errorIconAccessibilityLabel", "errorIconTestID", "children", "dangerouslySetColor", "textAlign"];
+const _excluded = ["color", "id", "errorIconAccessibilityLabel", "errorIconTestID", "children", "dangerouslySetColor", "textAlign", "style", "styles", "className", "classNames"];
 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; }
@@ -7,6 +7,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 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, { memo } from 'react';
+import { cx } from '../cx';
 import { Icon } from '../icons/Icon';
 import { Box } from '../layout/Box';
 import { Text } from '../typography/Text';
@@ -20,15 +21,28 @@ export const HelperText = /*#__PURE__*/memo(function HelperTex(_ref) {
       errorIconTestID,
       children,
       dangerouslySetColor,
-      textAlign = 'start'
+      textAlign = 'start',
+      style,
+      styles,
+      className,
+      classNames
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
+  const rootStyle = _objectSpread(_objectSpread({}, style), styles === null || styles === void 0 ? void 0 : styles.root);
+  // TODO: when we actually remove dangerouslySetColor:
+  // when migrating from dangerouslySetColor to style.color,
+  // root style/className color will not automatically style the error icon like dangerouslySetColor.
+  // Consumers must set both styles.root and styles.icon (or classNames equivalents).
+  // We need to have a migrator handle this or document in future migration guide.
+  const iconStyle = styles === null || styles === void 0 ? void 0 : styles.icon;
   return /*#__PURE__*/_jsxs(Text, _objectSpread(_objectSpread({
+    className: cx(className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
     color: color,
     dangerouslySetColor: dangerouslySetColor,
     display: "block",
     font: "label2",
     id: id,
+    style: rootStyle,
     textAlign: textAlign
   }, props), {}, {
     children: [color === 'fgNegative' && /*#__PURE__*/_jsx(Box, {
@@ -37,10 +51,12 @@ export const HelperText = /*#__PURE__*/memo(function HelperTex(_ref) {
       children: /*#__PURE__*/_jsx(Icon, {
         active: true,
         accessibilityLabel: errorIconAccessibilityLabel,
+        className: classNames === null || classNames === void 0 ? void 0 : classNames.icon,
         color: "fgNegative",
         dangerouslySetColor: dangerouslySetColor,
         name: "info",
         size: "xs",
+        style: iconStyle,
         testID: errorIconTestID
       })
     }), children]

package/esm/controls/InputIcon.js

@@ -31,11 +31,10 @@ export const InputIcon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
   return /*#__PURE__*/_jsx(Box, {
     paddingX: 2,
     testID: testID,
-    children: /*#__PURE__*/_jsx(Icon, _objectSpread(_objectSpread({
+    children: /*#__PURE__*/_jsx(Icon, _objectSpread({
+      ref: ref,
       color: disableInheritFocusStyle ? color : variantColor !== null && variantColor !== void 0 ? variantColor : color,
       size: "s"
-    }, props), {}, {
-      ref: ref
-    }))
+    }, props))
   });
 }));

package/esm/controls/InputIconButton.js

@@ -16,7 +16,7 @@ export const variantTransformMap = {
   negative: 'primary',
   foreground: 'primary',
   primary: 'primary',
-  foregroundMuted: 'foregroundMuted',
+  foregroundMuted: 'secondary',
   secondary: 'secondary'
 };
 export const InputIconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function InputIconButton(_ref, ref) {

package/esm/controls/InputStack.js

@@ -1,4 +1,4 @@
-const _excluded = ["width", "prependNode", "endNode", "appendNode", "startNode", "disabled", "inputNode", "helperTextNode", "borderWidth", "focusedBorderWidth", "variant", "labelNode", "testID", "focused", "borderRadius", "height", "disableFocusedStyle", "enableColorSurge", "labelVariant", "blendStyles", "inputBackground"];
+const _excluded = ["width", "prependNode", "endNode", "appendNode", "startNode", "disabled", "inputNode", "helperTextNode", "borderWidth", "focusedBorderWidth", "variant", "labelNode", "testID", "focused", "borderRadius", "height", "disableFocusedStyle", "enableColorSurge", "labelVariant", "blendStyles", "inputBackground", "className", "style", "classNames", "styles"];
 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; }
@@ -59,7 +59,11 @@ export const InputStack = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref
       enableColorSurge,
       labelVariant = 'outside',
       blendStyles,
-      inputBackground = 'bg'
+      inputBackground = 'bg',
+      className,
+      style,
+      classNames,
+      styles
     } = mergedProps,
     props = _objectWithoutProperties(mergedProps, _excluded);
   const focusedVariant = useMemo(() => focused && variant !== 'positive' && variant !== 'negative' ? 'primary' : variant, [focused, variant]);
@@ -96,9 +100,14 @@ export const InputStack = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref
       '--border-width-focused': "var(--borderWidth-".concat(focusedBorderWidth, ")")
     }, inputBorderRadius);
   }, [borderColorUnfocused, borderColorFocused, focusedBorderWidth, inputBorderRadius]);
+  const rootStyles = useMemo(() => _objectSpread({
+    style
+  }, styles === null || styles === void 0 ? void 0 : styles.root), [style, styles === null || styles === void 0 ? void 0 : styles.root]);
   return /*#__PURE__*/_jsxs(VStack, _objectSpread(_objectSpread({
+    className: cx(className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
     gap: inputStackGap,
     opacity: disabled ? accessibleOpacityDisabled : 1,
+    style: rootStyles,
     testID: testID,
     width: width
   }, props), {}, {
@@ -108,7 +117,8 @@ export const InputStack = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref
       children: [!!prependNode && /*#__PURE__*/_jsx(_Fragment, {
         children: prependNode
       }), /*#__PURE__*/_jsx("div", {
-        className: inputAreaContainerCss,
+        className: cx(inputAreaContainerCss, classNames === null || classNames === void 0 ? void 0 : classNames.inputContainer),
+        style: styles === null || styles === void 0 ? void 0 : styles.inputContainer,
         children: /*#__PURE__*/_jsxs(Interactable, {
           ref: ref,
           as: "span",
@@ -116,10 +126,10 @@ export const InputStack = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref
           blendStyles: blendStyles,
           borderRadius: borderRadius,
           borderWidth: borderWidth,
-          className: cx(baseCss, focused && persistedFocusCss),
+          className: cx(baseCss, focused && persistedFocusCss, classNames === null || classNames === void 0 ? void 0 : classNames.input),
           disabled: disabled,
           height: height,
-          style: inputAreaStyles,
+          style: _objectSpread(_objectSpread({}, inputAreaStyles), styles === null || styles === void 0 ? void 0 : styles.input),
           testID: "input-interactable-area",
           children: [!!focused && !!enableColorSurge && /*#__PURE__*/_jsx(ColorSurge, {
             background: variantColorMap[focusedVariant]

package/esm/controls/Radio.css

@@ -1 +1 @@
-@layer cds{.baseCss-b1rohblb{position:relative;-webkit-appearance:radio;-moz-appearance:radio;appearance:radio;border-style:solid;border-radius:var(--borderRadius-1000);-webkit-transition:border-color 0.2s linear;transition:border-color 0.2s linear;}.baseCss-b1rohblb:focus{outline:none;}.baseCss-b1rohblb:focus-visible{outline-style:solid;outline-width:2px;outline-color:var(--color-bgPrimary);outline-offset:2px;}}
+@layer cds{.baseCss-b1rohblb{position:relative;-webkit-appearance:radio;-moz-appearance:radio;appearance:radio;border-style:solid;border-radius:var(--borderRadius-1000);-webkit-transition:border-color 0.2s linear;transition:border-color 0.2s linear;}.baseCss-b1rohblb:focus{outline:none;}.baseCss-b1rohblb:focus-visible{outline-style:solid;outline-width:var(--borderWidth-200);outline-color:var(--color-bgPrimary);outline-offset:var(--borderWidth-200);}}

package/esm/controls/Radio.js

@@ -18,7 +18,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const DotSvg = _ref => {
   let {
     color = 'black',
-    width = 20,
+    width,
     dotSize = 2 * width / 3
   } = _ref;
   return /*#__PURE__*/_jsx("svg", {

package/esm/controls/RadioGroup.js

@@ -13,31 +13,6 @@ import { Radio } from './Radio';
 import { useHandleRadioSelect } from './useHandleRadioSelect';
 import { jsx as _jsx } from "react/jsx-runtime";
 export { Radio, useHandleRadioSelect };
-
-/**
- * @deprecated RadioGroup is deprecated. Use ControlGroup with role="radiogroup" instead. This will be removed in a future major release.
- * @deprecationExpectedRemoval v6
- *
- * @example
- * // Instead of:
- * <RadioGroup options={{ value1: 'Label 1' }} value={value} onChange={onChange} name="radio" />
- *
- * // Use:
- * <ControlGroup
- *   role="radiogroup"
- *   ControlComponent={Radio}
- *   options={[{ value: 'value1', children: 'Label 1' }]}
- *   value={value}
- *   onChange={(e) => onChange(e.target.value)}
- *   name="radio"
- * />
- */
-
-/**
- * @deprecated RadioGroup is deprecated. Use ControlGroup with role="radiogroup" instead. This will be removed in a future major release.
- * @deprecationExpectedRemoval v8
- */
-
 const RadioGroupWithRef = /*#__PURE__*/forwardRef(function RadioGroup(_ref, ref) {
   let {
       label,

package/esm/controls/SearchInput.js

@@ -13,6 +13,11 @@ import { Box } from '../layout/Box';
 import { InputIcon } from './InputIcon';
 import { InputIconButton } from './InputIconButton';
 import { TextInput } from './TextInput';
+
+/**
+ * @deprecated Use local constants or the `compact` prop instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
 export const scales = {
   regular: 56,

package/esm/controls/SegmentedControl.css

@@ -1,6 +1,6 @@
 @layer cds{.insetFocusRingCss-i4gfdqq{position:relative;}.insetFocusRingCss-i4gfdqq:focus{outline:none;}.insetFocusRingCss-i4gfdqq:focus-visible + label{outline-style:solid;outline-width:2px;outline-color:var(--color-bgPrimary);outline-offset:-3px;}
 .containerCss-cmc7ls2{max-width:var(--width);position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:1px;border-radius:var(--borderRadius-200);}
-.labelCss-ltyuxpb{height:56px;padding-inline-start:11px;padding-inline-end:11px;display:grid;position:relative;}
+.labelCss-ltyuxpb{padding-inline-start:11px;padding-inline-end:11px;display:grid;position:relative;}
 .hiddenLabelCss-h1alzf72.hiddenLabelCss-h1alzf72{opacity:0;position:relative;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-family:var(--fontFamily-headline);font-size:var(--fontSize-headline);font-weight:var(--fontWeight-headline);line-height:var(--lineHeight-headline);}
 .optionCss-o1kws8ra{position:absolute;height:100%;width:100%;padding-inline-start:calc(11px + 2px);padding-inline-end:calc(11px - 2px);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--space-1);-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--color-fgMuted);font-family:var(--fontFamily-body);font-size:var(--fontSize-body);font-weight:var(--fontWeight-body);line-height:var(--lineHeight-body);}.optionCss-o1kws8ra > :last-child{visibility:hidden;margin-inline-end:-11px;}
 .radioCss-rkomrp8{position:absolute;left:-9999em;}.radioCss-rkomrp8:first-of-type + label{border-top-left-radius:var(--borderRadius-200);border-bottom-left-radius:var(--borderRadius-200);}.radioCss-rkomrp8:last-of-type + label{border-top-right-radius:var(--borderRadius-200);border-bottom-right-radius:var(--borderRadius-200);}.radioCss-rkomrp8:checked + label{background-color:var(--color-bgPrimaryWash);}.radioCss-rkomrp8:checked + label > .optionCss-o1kws8ra{padding-inline-start:calc(11px - 11px / 2);padding-inline-end:calc(11px + 11px / 2);color:var(--color-fgPrimary);font-family:var(--fontFamily-headline);font-size:var(--fontSize-headline);font-weight:var(--fontWeight-headline);line-height:var(--lineHeight-headline);}.radioCss-rkomrp8:checked + label > .optionCss-o1kws8ra > :last-child{visibility:visible;}}

package/esm/controls/SegmentedControl.js

@@ -2,7 +2,6 @@ const _excluded = ["label", "value", "accessibilityLabel"];
 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, Fragment, memo, useCallback, useId, useState } from 'react';
-import { interactableHeight } from '@coinbase/cds-common/tokens/interactableHeight';
 import { cx } from '../cx';
 import { Icon } from '../icons/Icon';
 import { Interactable } from '../system/Interactable';
@@ -84,6 +83,8 @@ function SegmentedControlInternal(props, ref) {
         }), /*#__PURE__*/_jsxs(Interactable, {
           as: "label",
           background: "bgAlternate",
+          borderWidth: 0 // remove Interactable's default transparent border
+          ,
           className: labelCss,
           disabled: disabled,
           htmlFor: "".concat(name, "-").concat(value),

package/esm/controls/SelectOption.js

@@ -23,6 +23,10 @@ const normalCss = "normalCss-n1jlehjw";
 const compactCss = "compactCss-c1fbaqtq";
 const multilineCss = "multilineCss-m1fb6n4c";
 const multilineTextCss = "multilineTextCss-mf68k5e";
+/**
+ * @deprecated This component is deprecated along with old Select component. Please use the new Select alpha component instead. If you are using this component outside of Select, we recommend replacing it with ListCell. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const SelectOption = /*#__PURE__*/memo(_props => {
   const mergedProps = useComponentConfig('SelectOption', _props);
   const {

package/esm/controls/Switch.js

@@ -1,4 +1,4 @@
-const _excluded = ["children", "checked", "disabled", "elevation", "controlColor", "background", "borderColor", "borderRadius", "borderWidth", "value"];
+const _excluded = ["children", "checked", "disabled", "elevation", "controlColor", "background", "borderColor", "borderRadius", "borderWidth", "value", "className", "style", "classNames", "styles"];
 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; }
@@ -9,13 +9,28 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { forwardRef, memo } from 'react';
 import { switchTransitionConfig } from '@coinbase/cds-common/motion/switch';
 import { m as motion } from 'framer-motion';
+import { cx } from '../cx';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
 import { Box } from '../layout/Box';
 import { convertTransition } from '../motion/utils';
 import { Control } from './Control';
+
+/**
+ * Static class names for Switch component parts.
+ * Use these selectors to target specific elements with CSS.
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
-const COMPONENT_STATIC_CLASSNAME = 'cds-Switch';
+export const switchClassNames = {
+  /** Persistent outer wrapper across all variants. */
+  root: 'cds-Switch',
+  /** Underlying `Control` wrapper element. */
+  control: 'cds-Switch-control',
+  /** Track wrapper element. */
+  track: 'cds-Switch-track',
+  /** Thumb wrapper element. */
+  thumb: 'cds-Switch-thumb'
+};
 const trackCss = "trackCss-t1fng8qd";
 const thumbCss = "thumbCss-t1l9xlcf";
 const MotionBox = motion(Box);
@@ -39,7 +54,11 @@ const SwitchWithRef = /*#__PURE__*/forwardRef(function SwitchWithRef(_props, ref
       borderColor,
       borderRadius = 1000,
       borderWidth,
-      value
+      value,
+      className,
+      style,
+      classNames,
+      styles
     } = mergedProps,
     props = _objectWithoutProperties(mergedProps, _excluded);
   const {
@@ -50,9 +69,11 @@ const SwitchWithRef = /*#__PURE__*/forwardRef(function SwitchWithRef(_props, ref
     ref: ref,
     borderRadius: 1000,
     checked: checked,
+    className: cx(switchClassNames.control, classNames === null || classNames === void 0 ? void 0 : classNames.control),
     disabled: disabled,
     label: children,
     role: "switch",
+    style: _objectSpread(_objectSpread({}, style), styles === null || styles === void 0 ? void 0 : styles.control),
     type: "checkbox",
     value: value
   }, props), {}, {
@@ -62,32 +83,35 @@ const SwitchWithRef = /*#__PURE__*/forwardRef(function SwitchWithRef(_props, ref
       borderColor: borderColor,
       borderRadius: borderRadius,
       borderWidth: borderWidth,
-      className: trackCss,
+      className: cx(trackCss, switchClassNames.track, classNames === null || classNames === void 0 ? void 0 : classNames.track),
       "data-filled": checked,
       justifyContent: "flex-start",
+      style: styles === null || styles === void 0 ? void 0 : styles.track,
       testID: "switch-track",
       children: /*#__PURE__*/_jsx(MotionBox, {
         animate: checked ? 'checked' : 'unchecked',
         background: controlColor !== null && controlColor !== void 0 ? controlColor : defaultControlColor,
         borderRadius: 1000,
-        className: thumbCss,
+        className: cx(thumbCss, switchClassNames.thumb, classNames === null || classNames === void 0 ? void 0 : classNames.thumb),
         "data-testid": "switch-thumb",
         elevation: elevation,
         initial: false,
+        style: styles === null || styles === void 0 ? void 0 : styles.thumb,
         testID: "switch-thumb",
         transition: convertTransition(switchTransitionConfig),
         variants: thumbMotionVariants
       })
     })
   }));
-  return children ? /*#__PURE__*/_jsx(Box, {
-    alignItems: "center",
-    className: COMPONENT_STATIC_CLASSNAME,
-    minHeight: "var(--controlSize-switchHeight)",
+  return /*#__PURE__*/_jsx(Box, {
+    alignItems: children ? 'center' : undefined,
+    className: cx(switchClassNames.root, className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
+    minHeight: children ? 'var(--controlSize-switchHeight)' : undefined,
     role: "presentation",
+    style: styles === null || styles === void 0 ? void 0 : styles.root,
     width: "fit-content",
     children: switchNode
-  }) : switchNode;
+  });
 });
 export const Switch = /*#__PURE__*/memo(SwitchWithRef);
 import "./Switch.css";

package/esm/controls/TextInput.js

@@ -7,8 +7,8 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 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, { cloneElement, forwardRef, memo, useCallback, useMemo, useRef, useState } from 'react';
-import { useMergeRefs } from '@coinbase/cds-common/hooks/useMergeRefs';
 import { usePrefixedId } from '@coinbase/cds-common/hooks/usePrefixedId';
+import { mergeReactElementRef, mergeRefs } from '@coinbase/cds-common/utils/mergeRefs';
 import { cx } from '../cx';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box } from '../layout/Box';
@@ -77,8 +77,8 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Text
     nativeInputRestProps = _objectWithoutProperties(mergedProps, _excluded);
   const [focused, setFocused] = useState(false);
   const focusedVariant = useInputVariant(focused, variant);
-  const internalRef = useRef();
-  const refs = useMergeRefs(ref, internalRef);
+  const internalRef = useRef(null);
+  const refs = useMemo(() => mergeRefs(ref, internalRef), [ref]);
 
   // Only generate a helperTextId if helperText is defined, otherwise
   // set it to undefined
@@ -123,8 +123,8 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Text
       const clonedElm = /*#__PURE__*/cloneElement(inputNode, {
         onFocus: handleOnFocus,
         onBlur: handleOnBlur,
-        ref: refs,
-        'aria-describedby': shouldSetHelperTextId && helperTextId,
+        ref: mergeReactElementRef(inputNode, refs),
+        'aria-describedby': shouldSetHelperTextId ? helperTextId : undefined,
         'aria-invalid': variant === 'negative',
         id: shouldSetLabelId ? labelId : undefined,
         disabled

package/esm/controls/selectContext.js

@@ -1,9 +1,30 @@
 import { createContext, useContext } from 'react';
+
+/**
+ * @deprecated Please use the new Select alpha component instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
+
 export const defaultContext = {
   onChange: () => {},
   value: undefined,
   handleCloseMenu: undefined
 };
+
+/**
+ * @deprecated Please use the new Select alpha component instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const SelectContext = /*#__PURE__*/createContext(defaultContext);
+
+/**
+ * @deprecated Please use the new Select alpha component instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const SelectProvider = SelectContext.Provider;
+
+/**
+ * @deprecated Please use the new Select alpha component instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const useSelectContext = () => useContext(SelectContext);

package/esm/dates/DateInput.js

@@ -92,9 +92,8 @@ export const DateInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref)
     minWidth: 164,
     style: style,
     width: "100%",
-    children: /*#__PURE__*/_jsx(TextInput, _objectSpread(_objectSpread({
-      ref: ref
-    }, props), {}, {
+    children: /*#__PURE__*/_jsx(TextInput, _objectSpread({
+      ref: ref,
       end: end,
       helperText: helperText || (error === null || error === void 0 ? void 0 : error.message) || intlDateFormat.dateStringFormat,
       onBlur: handleBlur,
@@ -105,6 +104,6 @@ export const DateInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref)
       testIDMap: testIDMap,
       value: inputValue,
       variant: variant || (error ? 'negative' : undefined)
-    }))
+    }, props))
   });
 }));

package/esm/dates/DatePicker.js

@@ -131,7 +131,7 @@ export const DatePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref
       variant: "secondary"
     })
   }), [handleOpenCalendar, showCalendar, calendarIconButtonAccessibilityLabel, openCalendarAccessibilityLabel, closeCalendarAccessibilityLabel]);
-  const dateInput = useMemo(() => /*#__PURE__*/_jsx(DateInput, _objectSpread(_objectSpread({}, props), {}, {
+  const dateInput = useMemo(() => /*#__PURE__*/_jsx(DateInput, _objectSpread({
     accessibilityLabel: accessibilityLabel,
     accessibilityLabelledBy: accessibilityLabelledBy,
     className: cx(classNames === null || classNames === void 0 ? void 0 : classNames.dateInput, dateInputClassName),
@@ -154,7 +154,7 @@ export const DatePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref
     requiredError: requiredError,
     style: _objectSpread(_objectSpread({}, dateInputStyle), styles === null || styles === void 0 ? void 0 : styles.dateInput),
     variant: variant
-  })), [date, onChangeDate, error, onErrorDate, required, compact, disabled, dateInputCalendarButton, requiredError, invalidDateError, disabledDates, minDate, maxDate, disabledDateError, onChange, label, accessibilityLabel, accessibilityLabelledBy, helperText, variant, dateInputClassName, dateInputStyle, classNames, styles, props]);
+  }, props)), [date, onChangeDate, error, onErrorDate, required, compact, disabled, dateInputCalendarButton, requiredError, invalidDateError, disabledDates, minDate, maxDate, disabledDateError, onChange, label, accessibilityLabel, accessibilityLabelledBy, helperText, variant, dateInputClassName, dateInputStyle, classNames, styles, props]);
   const calendar = useMemo(() => /*#__PURE__*/_jsx(MotionVStack, _objectSpread(_objectSpread({
     background: true,
     borderRadius: 400,

package/esm/dots/DotCount.css

@@ -1,2 +1,2 @@
 @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-width:1px;min-width:24px;height:24px;border-radius:16px;padding-top:3px;padding-bottom:3px;padding-inline-start:6px;padding-inline-end:6px;}}
+.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);}}

package/esm/dots/DotCount.js

@@ -1,4 +1,4 @@
-const _excluded = ["children", "pin", "variant", "count", "max", "testID", "accessibilityLabel", "overlap", "className", "classNames", "style", "styles"];
+const _excluded = ["children", "pin", "variant", "count", "max", "height", "width", "testID", "accessibilityLabel", "overlap", "className", "classNames", "style", "styles"];
 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; }
@@ -32,6 +32,8 @@ export const DotCount = /*#__PURE__*/memo(_props => {
       variant = 'negative',
       count,
       max,
+      height = dotCountSize,
+      width,
       testID,
       accessibilityLabel,
       overlap,
@@ -48,10 +50,13 @@ export const DotCount = /*#__PURE__*/memo(_props => {
   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);
-  }, [color, pinStyles, styles === null || styles === void 0 ? void 0 : styles.container, variant]);
+  }, [height, width, color, pinStyles, styles === null || styles === void 0 ? void 0 : styles.container, variant]);
   const motionProps = useMotionProps({
     enterConfigs: [dotOpacityEnterConfig, dotScaleEnterConfig],
     exitConfigs: [dotOpacityExitConfig, dotScaleExitConfig],
@@ -65,10 +70,14 @@ export const DotCount = /*#__PURE__*/memo(_props => {
     style: rootStyles
   }, props), {}, {
     children: [children, /*#__PURE__*/_jsx(NewAnimatePresence, {
-      children: count > 0 && /*#__PURE__*/_jsx(motion.div, _objectSpread(_objectSpread({}, motionProps), {}, {
+      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),
-        "data-testid": "dotcount-container",
-        style: containerStyles,
+        'data-testid': 'dotcount-container',
+        style: containerStyles
+      })), {}, {
         children: /*#__PURE__*/_jsx(Text, {
           as: "p",
           className: classNames === null || classNames === void 0 ? void 0 : classNames.text,