@coinbase/cds-mobile 8.66.2 → 9.0.0-rc.2

package/esm/cells/__stories__/ListCell.stories.js

@@ -832,6 +832,66 @@ const WithHelperText = () => /*#__PURE__*/_jsxs(_Fragment, {
     title: "Title"
   })]
 });
+const BorderCustomization = () => {
+  const [isCondensed, setIsCondensed] = useState(true);
+  const spacingVariant = isCondensed ? 'condensed' : 'normal';
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    padding: 2,
+    children: [/*#__PURE__*/_jsxs(Switch, {
+      checked: isCondensed,
+      onChange: (_, nextChecked) => setIsCondensed(Boolean(nextChecked)),
+      children: ["Spacing variant: ", spacingVariant]
+    }), /*#__PURE__*/_jsx(ListCell, {
+      bordered: true,
+      onPress: onPressConsole,
+      spacingVariant: spacingVariant,
+      title: "bordered"
+    }), /*#__PURE__*/_jsx(ListCell, {
+      borderedTop: true,
+      onPress: onPressConsole,
+      spacingVariant: spacingVariant,
+      title: "borderedTop"
+    }), /*#__PURE__*/_jsx(ListCell, {
+      borderedHorizontal: true,
+      onPress: onPressConsole,
+      spacingVariant: spacingVariant,
+      title: "borderedHorizontal"
+    }), /*#__PURE__*/_jsx(ListCell, {
+      bordered: true,
+      borderColor: "accentBoldPurple",
+      onPress: onPressConsole,
+      spacingVariant: spacingVariant,
+      title: "borderColor"
+    }), /*#__PURE__*/_jsx(ListCell, {
+      borderColor: "bgLine",
+      borderWidth: 200,
+      onPress: onPressConsole,
+      spacingVariant: spacingVariant,
+      title: "borderWidth"
+    }), /*#__PURE__*/_jsx(ListCell, {
+      borderColor: "bgLine",
+      borderTopWidth: 200,
+      onPress: onPressConsole,
+      spacingVariant: spacingVariant,
+      title: "borderTopWidth"
+    }), /*#__PURE__*/_jsx(ListCell, {
+      borderColor: "bgLine",
+      borderRadius: 200,
+      borderWidth: 100,
+      onPress: onPressConsole,
+      spacingVariant: spacingVariant,
+      title: "borderRadius"
+    }), /*#__PURE__*/_jsx(ListCell, {
+      borderColor: "bgLine",
+      borderTopLeftRadius: 300,
+      borderWidth: 100,
+      onPress: onPressConsole,
+      spacingVariant: spacingVariant,
+      title: "borderTopLeftRadius"
+    })]
+  });
+};
 const CustomSpacing = () => /*#__PURE__*/_jsxs(_Fragment, {
   children: [/*#__PURE__*/_jsx(ListCell, _extends({
     selected: true,
@@ -855,7 +915,6 @@ const CustomSpacing = () => /*#__PURE__*/_jsxs(_Fragment, {
 const CondensedListCell = () => {
   const theme = useTheme();
   return /*#__PURE__*/_jsxs(VStack, {
-    width: "360px",
     children: [/*#__PURE__*/_jsx(ListCell, {
       accessory: "more",
       description: "Description",
@@ -1135,7 +1194,6 @@ const UseCaseShowcase = () => {
     setDaiAmt(v => jitter(v, 0.05));
   }, []);
   return /*#__PURE__*/_jsxs(VStack, {
-    width: "360px",
     children: [/*#__PURE__*/_jsx(ListCell, {
       accessibilityLabel: "BTC, value " + currency.format(btcPrice) + ", amount " + btcAmt.toLocaleString() + " BTC"
       // If you need to pass non-string values to the detail or subdetail,
@@ -1373,6 +1431,11 @@ const ListCellScreen = () => {
       title: "WithHelperText",
       titlePadding: titlePadding,
       children: /*#__PURE__*/_jsx(WithHelperText, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      inline: true,
+      title: "BorderCustomization",
+      titlePadding: titlePadding,
+      children: /*#__PURE__*/_jsx(BorderCustomization, {})
     }), /*#__PURE__*/_jsx(Example, {
       inline: true,
       title: "CustomSpacing",

package/esm/chips/Chip.js

@@ -66,6 +66,7 @@ export const Chip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Chip(_pro
     paddingX: paddingX,
     paddingY: paddingY,
     style: [contentStyle, styles == null ? void 0 : styles.content],
+    testID: testID ? testID + "-content" : undefined,
     children: [start, typeof children === 'string' ? /*#__PURE__*/_jsx(Text, {
       color: color,
       flexShrink: 1,

package/esm/coachmark/Coachmark.js

@@ -30,13 +30,14 @@ export const Coachmark = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref)
   } = useWindowDimensions();
   const paddingX = theme.space[2];
   return /*#__PURE__*/_jsx(InvertedThemeProvider, {
-    children: /*#__PURE__*/_jsxs(VStack, _extends({}, props, {
+    children: /*#__PURE__*/_jsxs(VStack, _extends({
       ref: ref,
       borderRadius: 400,
       maxWidth: windowWidth - paddingX * 2,
       overflow: "hidden",
       testID: testID,
-      width: width,
+      width: width
+    }, props, {
       children: [media, /*#__PURE__*/_jsx(VStack, {
         background: "bg",
         padding: 2,

package/esm/controls/CheckboxGroup.js

@@ -6,31 +6,6 @@ import React, { Children, forwardRef, isValidElement, memo, useMemo } from 'reac
 import { isDevelopment } from '@coinbase/cds-utils';
 import { Checkbox } from './Checkbox';
 import { ControlGroup } from './ControlGroup';
-
-/**
- * @deprecated CheckboxGroup is deprecated. Use ControlGroup with accessibilityRole="combobox" instead. This will be removed in a future major release.
- * @deprecationExpectedRemoval v8
- *
- * @example
- * // Instead of:
- * <CheckboxGroup selectedValues={new Set(['value1'])} onChange={onChange}>
- *   <Checkbox value="value1">Option 1</Checkbox>
- * </CheckboxGroup>
- *
- * // Use:
- * <ControlGroup
- *   accessibilityRole="combobox"
- *   ControlComponent={Checkbox}
- *   options={[{ value: 'value1', children: 'Option 1' }]}
- *   value={['value1']}
- *   onChange={(value) => onChange(value)}
- * />
- */
-
-/**
- * @deprecated CheckboxGroup is deprecated. Use ControlGroup with accessibilityRole="combobox" instead. This will be removed in a future major release.
- * @deprecationExpectedRemoval v8
- */
 import { jsx as _jsx } from "react/jsx-runtime";
 // Follows behavior describe in https://www.w3.org/TR/wai-aria-practices/examples/checkbox/checkbox-2/checkbox-2.html
 const CheckboxGroupWithRef = /*#__PURE__*/forwardRef(function CheckboxGroupWithRef(_ref, ref) {

package/esm/controls/HelperText.js

@@ -1,4 +1,4 @@
-const _excluded = ["color", "errorIconAccessibilityLabel", "errorIconTestID", "children", "align", "dangerouslySetColor"];
+const _excluded = ["color", "errorIconAccessibilityLabel", "errorIconTestID", "children", "align", "dangerouslySetColor", "style", "styles"];
 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, useMemo } from 'react';
@@ -14,7 +14,9 @@ export const HelperText = /*#__PURE__*/memo(function HelperText(_ref) {
       errorIconTestID,
       children,
       align,
-      dangerouslySetColor
+      dangerouslySetColor,
+      style,
+      styles
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const theme = useTheme();
@@ -23,18 +25,24 @@ export const HelperText = /*#__PURE__*/memo(function HelperText(_ref) {
   const sourceSize = getIconSourceSize(iconSize);
   const glyphKey = "info-" + sourceSize + "-active";
   const glyph = glyphMap[glyphKey];
-  const iconStyle = useMemo(() => ({
+  const iconStyle = useMemo(() => [{
     fontFamily: 'CoinbaseIcons',
     fontSize: iconSize,
     height: iconSize,
     width: iconSize,
     letterSpacing: 4
-  }), [iconSize]);
+  }, // 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.
+  styles == null ? void 0 : styles.icon], [iconSize, styles == null ? void 0 : styles.icon]);
   return /*#__PURE__*/_jsxs(Text, _extends({
     align: align,
     color: color,
     dangerouslySetColor: dangerouslySetColor,
-    font: "label2"
+    font: "label2",
+    style: [style, styles == null ? void 0 : styles.root]
   }, props, {
     children: [color === 'fgNegative' && /*#__PURE__*/_jsx(Text, {
       accessible: true,

package/esm/controls/InputIconButton.js

@@ -11,7 +11,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,8 +1,9 @@
-const _excluded = ["width", "prependNode", "endNode", "appendNode", "startNode", "disabled", "inputNode", "helperTextNode", "borderStyle", "variant", "labelNode", "testID", "borderRadius", "borderFocusedStyle", "focused", "enableColorSurge", "labelVariant", "inputBackground", "borderWidth", "focusedBorderWidth"];
+const _excluded = ["width", "prependNode", "endNode", "appendNode", "startNode", "disabled", "inputNode", "helperTextNode", "borderStyle", "variant", "labelNode", "testID", "borderRadius", "borderFocusedStyle", "focused", "enableColorSurge", "labelVariant", "inputBackground", "borderWidth", "focusedBorderWidth", "styles", "style"];
 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, useMemo } from 'react';
 import { Animated, StyleSheet, View } from 'react-native';
+import { inputStackGap } from '@coinbase/cds-common/tokens/input';
 import { accessibleOpacityDisabled } from '@coinbase/cds-common/tokens/interactable';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useLayout } from '../hooks/useLayout';
@@ -42,7 +43,9 @@ export const InputStack = /*#__PURE__*/memo(function InputStack(_props) {
       labelVariant = 'outside',
       inputBackground = 'bg',
       borderWidth = 100,
-      focusedBorderWidth = borderWidth
+      focusedBorderWidth = borderWidth,
+      styles,
+      style
     } = mergedProps,
     props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const theme = useTheme();
@@ -93,9 +96,13 @@ export const InputStack = /*#__PURE__*/memo(function InputStack(_props) {
       backgroundColor: 'transparent'
     }, overlayBorderRadiusStyle)];
   }, [theme.borderWidth, theme.borderRadius, focusedBorderWidth, borderRadius, prependNode, appendNode, borderFocusedStyle, inputAreaSize.x, inputAreaSize.y, inputAreaSize.width, inputAreaSize.height]);
+  const rootStyles = useMemo(() => [style, styles == null ? void 0 : styles.root], [style, styles == null ? void 0 : styles.root]);
+  const inputContainerStyles = useMemo(() => [staticStyles.inputAreaContainerStyle, styles == null ? void 0 : styles.inputContainer], [styles == null ? void 0 : styles.inputContainer]);
+  const combinedInputAreaStyles = useMemo(() => [inputAreaStyles, styles == null ? void 0 : styles.input], [inputAreaStyles, styles == null ? void 0 : styles.input]);
   return /*#__PURE__*/_jsxs(VStack, _extends({
-    gap: 0.5,
+    gap: inputStackGap,
     opacity: disabled ? accessibleOpacityDisabled : 1,
+    style: rootStyles,
     testID: testID,
     width: width
   }, props, {
@@ -105,12 +112,12 @@ export const InputStack = /*#__PURE__*/memo(function InputStack(_props) {
       children: [!!prependNode && /*#__PURE__*/_jsx(_Fragment, {
         children: prependNode
       }), /*#__PURE__*/_jsxs(View, {
-        style: styles.inputAreaContainerStyle,
+        style: inputContainerStyles,
         children: [focused && /*#__PURE__*/_jsx(Animated.View, {
           style: borderFocusedStyles
         }), /*#__PURE__*/_jsxs(Animated.View, {
           onLayout: onInputAreaLayout,
-          style: inputAreaStyles,
+          style: combinedInputAreaStyles,
           testID: testID && testID + "-input-area",
           children: [focused && enableColorSurge && /*#__PURE__*/_jsx(ColorSurge, {
             background: variant ? variantColorMap[variant] : undefined
@@ -118,8 +125,6 @@ export const InputStack = /*#__PURE__*/memo(function InputStack(_props) {
             children: startNode
           }), !!labelNode && labelVariant === 'inside' ? /*#__PURE__*/_jsxs(VStack, {
             flexGrow: 1,
-            minHeight: 60,
-            paddingY: 1,
             children: [labelNode, inputNode]
           }) : inputNode, !!endNode && /*#__PURE__*/_jsx(_Fragment, {
             children: endNode
@@ -138,9 +143,9 @@ export const InputStack = /*#__PURE__*/memo(function InputStack(_props) {
 // When `overflow: auto` is set the thickened border when focused is not accounted for
 // hence you see a cutoff.
 // Padding must accommodate the focus border extension (default 2px for focusedBorderWidth: 200)
-const styles = StyleSheet.create({
+const staticStyles = StyleSheet.create({
   inputAreaContainerStyle: {
     padding: 2,
-    flexGrow: 1
+    flexGrow: 2
   }
 });

package/esm/controls/NativeInput.js

@@ -33,6 +33,7 @@ export const NativeInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref)
   const containerStyle = useMemo(() => {
     return _extends({
       flex: 2,
+      minWidth: 0,
       padding: theme.space[compact ? 1 : 2]
     }, containerSpacing, !disabled && editableInputAddonProps.readOnly && {
       backgroundColor: theme.color.bgSecondary

package/esm/controls/Radio.js

@@ -19,7 +19,7 @@ const styles = StyleSheet.create({
 const DotSvg = _ref => {
   let {
     color = 'black',
-    width = 20,
+    width,
     dotSize = 2 * width / 3
   } = _ref;
   return /*#__PURE__*/_jsx(Svg, {
@@ -94,13 +94,14 @@ const RadioWithRef = /*#__PURE__*/forwardRef(function Radio(_props, ref) {
     } = mergedProps,
     props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const accessibilityLabelValue = typeof children === 'string' && accessibilityLabel === undefined ? children : accessibilityLabel;
-  return /*#__PURE__*/_jsx(Control, _extends({}, props, {
+  return /*#__PURE__*/_jsx(Control, _extends({
     ref: ref,
     accessibilityHint: accessibilityHint,
     accessibilityLabel: accessibilityLabelValue,
     accessibilityRole: "radio",
     hitSlop: 5,
-    label: children,
+    label: children
+  }, props, {
     children: RadioIcon
   }));
   // Make forwardRef result function stay generic function type

package/esm/controls/RadioGroup.js

@@ -8,30 +8,6 @@ import { ControlGroup } from './ControlGroup';
 import { Radio } from './Radio';
 import { jsx as _jsx } from "react/jsx-runtime";
 export { Radio };
-
-/**
- * @deprecated RadioGroup is deprecated. Use ControlGroup with accessibilityRole="radiogroup" instead. This will be removed in a future major release.
- * @deprecationExpectedRemoval v8
- *
- * @example
- * // Instead of:
- * <RadioGroup options={{ value1: 'Label 1' }} value={value} onChange={onChange} />
- *
- * // Use:
- * <ControlGroup
- *   accessibilityRole="radiogroup"
- *   ControlComponent={Radio}
- *   options={[{ value: 'value1', children: 'Label 1' }]}
- *   value={value}
- *   onChange={(value) => onChange(value)}
- * />
- */
-
-/**
- * @deprecated RadioGroup is deprecated. Use ControlGroup with accessibilityRole="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/SelectContext.js

@@ -6,8 +6,22 @@ const defaultContext = {
   handleClose: () => null
 };
 const errorMessage = 'SelectContext is undefined. SelectProvider was not found higher up the tree. ';
+
+/**
+ * @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 = () => {
   const context = React.useContext(SelectContext);
   //   TODO: check for something required

package/esm/controls/SelectOption.js

@@ -1,7 +1,7 @@
 const _excluded = ["title", "description", "multiline", "onPress", "value", "accessibilityLabel", "accessibilityHint"];
 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, useCallback } from 'react';
+import { memo, useCallback } from 'react';
 import { selectCellMobileSpacingConfig } from '@coinbase/cds-common/tokens/select';
 import { Cell } from '../cells/Cell';
 import { CellAccessory } from '../cells/CellAccessory';
@@ -12,6 +12,10 @@ import { useSelectContext } from './SelectContext';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const selectOptionMinHeight = 56;
 const selectOptionMaxHeight = 64;
+/**
+ * @deprecated 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"];
+const _excluded = ["children", "style", "styles"];
 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, { forwardRef, memo, useMemo } from 'react';
@@ -74,27 +74,33 @@ const SwitchIcon = _ref => {
 const SwitchWithRef = /*#__PURE__*/forwardRef(function SwitchWithRef(_props, ref) {
   const mergedProps = useComponentConfig('Switch', _props);
   const {
-      children
+      children,
+      style,
+      styles
     } = mergedProps,
     props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const theme = useTheme();
   const {
     switchHeight
   } = theme.controlSize;
-  const switchNode = /*#__PURE__*/_jsx(Control, _extends({}, props, {
+  const controlStyles = useMemo(() => StyleSheet.flatten([style, styles == null ? void 0 : styles.control]), [style, styles == null ? void 0 : styles.control]);
+  const switchNode = /*#__PURE__*/_jsx(Control, _extends({
     ref: ref,
     accessible: true,
     shouldUseSwitchTransition: true,
     accessibilityRole: "switch",
     label: children,
+    style: controlStyles
+  }, props, {
     children: SwitchIcon
   }));
-  return children ? /*#__PURE__*/_jsx(Box, {
-    alignItems: "center",
-    flexDirection: "row",
-    minHeight: switchHeight,
+  return /*#__PURE__*/_jsx(Box, {
+    alignItems: children ? 'center' : undefined,
+    flexDirection: children ? 'row' : undefined,
+    minHeight: children ? switchHeight : undefined,
+    style: styles == null ? void 0 : styles.root,
     children: switchNode
-  }) : switchNode;
+  });
 });
 export const Switch = /*#__PURE__*/memo(SwitchWithRef);
 const styles = StyleSheet.create({

package/esm/controls/TextInput.js

@@ -84,7 +84,7 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref)
   const containerSpacing = useMemo(() => _extends({}, !!start && {
     paddingStart: theme.space[0.5]
   }, labelVariant === 'inside' && hasLabel && !compact && {
-    paddingBottom: 0,
+    paddingBottom: theme.space[1],
     paddingTop: 0
   }), [start, theme.space, labelVariant, hasLabel, compact]);
 
@@ -171,6 +171,7 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref)
       disabled: disabled,
       onPress: handleNodePress,
       children: /*#__PURE__*/_jsx(Box, _extends({}, labelVariant === 'inside' && {
+        paddingTop: 1,
         paddingStart: start ? 0.5 : 2,
         paddingEnd: 2,
         background: readOnlyInputBackground

package/esm/controls/__stories__/InputIconButton.stories.js

@@ -14,7 +14,7 @@ const Basic = () => {
         active: true,
         accessibilityLabel: "Add",
         name: "add",
-        variant: "foregroundMuted"
+        variant: "secondary"
       }),
       variant: variant
     }, variant + "-input-iconbutton"))
@@ -63,7 +63,7 @@ const AddCustomColor = () => {
       disableInheritFocusStyle: true,
       accessibilityLabel: "Add",
       name: "add",
-      variant: "foregroundMuted"
+      variant: "secondary"
     })
   });
 };
@@ -76,7 +76,7 @@ const AddCustomColorEnd = () => {
       transparent: true,
       accessibilityLabel: "Add",
       name: "add",
-      variant: "foregroundMuted"
+      variant: "secondary"
     }),
     label: "Label"
   });
@@ -111,7 +111,7 @@ const InputIconButtonScreen = () => {
         children: /*#__PURE__*/_jsx(InputIconButton, {
           active: true,
           name: "add",
-          variant: "foregroundMuted"
+          variant: "secondary"
         })
       })
     })]

package/esm/dates/DateInput.js

@@ -92,8 +92,7 @@ export const DateInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref)
     style: style,
     width: "100%",
     children: /*#__PURE__*/_jsx(TextInput, _extends({
-      ref: ref
-    }, props, {
+      ref: ref,
       end: end,
       helperText: helperText || (error == null ? void 0 : error.message) || intlDateFormat.dateStringFormat,
       keyboardType: "number-pad",
@@ -106,6 +105,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

@@ -116,8 +116,7 @@ export const DatePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref
     ref: ref,
     width: width,
     children: [/*#__PURE__*/_jsx(DateInput, _extends({
-      ref: dateInputRef
-    }, props, {
+      ref: dateInputRef,
       accessibilityHint: accessibilityHint,
       accessibilityLabel: accessibilityLabel,
       accessibilityLabelledBy: accessibilityLabelledBy,
@@ -140,7 +139,7 @@ export const DatePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref
       requiredError: requiredError,
       style: [dateInputStyle, styles == null ? void 0 : styles.dateInput],
       variant: variant
-    })), showPicker && /*#__PURE__*/_jsx(Tray, {
+    }, props)), showPicker && /*#__PURE__*/_jsx(Tray, {
       accessibilityRole: "none",
       footer: _ref => {
         let {

package/esm/dates/__stories__/DatePicker.stories.js

@@ -107,22 +107,22 @@ export const FullExample = () => {
         openCalendarAccessibilityLabel: "Birthdate calendar"
       })
     }), /*#__PURE__*/_jsx(Example, {
-      title: "DatePicker fit-content width",
+      title: "DatePicker width=null",
       children: /*#__PURE__*/_jsxs(HStack, {
         flexWrap: "wrap",
         gap: 2,
         children: [/*#__PURE__*/_jsx(ExampleDatePicker, {
           label: "Example Date",
           openCalendarAccessibilityLabel: "Example calendar",
-          width: "fit-content"
+          width: null
         }), /*#__PURE__*/_jsx(ExampleDatePicker, {
           label: "Example Date 2",
           openCalendarAccessibilityLabel: "Example calendar 2",
-          width: "fit-content"
+          width: null
         }), /*#__PURE__*/_jsx(ExampleDatePicker, {
           label: "Example Date 3",
           openCalendarAccessibilityLabel: "Example calendar 3",
-          width: "fit-content"
+          width: null
         })]
       })
     }), /*#__PURE__*/_jsx(Example, {

package/esm/dots/DotCount.js

@@ -1,4 +1,4 @@
-const _excluded = ["children", "pin", "variant", "count", "max", "overlap", "style", "styles"];
+const _excluded = ["children", "pin", "variant", "count", "max", "height", "width", "overlap", "style", "styles"];
 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';
@@ -27,7 +27,6 @@ export const parseDotCountMaxOverflow = function (count, max) {
   return count <= max ? count : max + "+";
 };
 const [opacityEnter, opacityExit, scaleEnter, scaleExit] = convertMotionConfigs([dotOpacityEnterConfig, dotOpacityExitConfig, dotScaleEnterConfig, dotScaleExitConfig]);
-const dotTextPaddingHorizontal = 6;
 const variantColorMap = {
   negative: 'bgNegative'
 };
@@ -39,6 +38,8 @@ export const DotCount = /*#__PURE__*/memo(_props => {
       variant = 'negative',
       count,
       max,
+      height = dotCountSize,
+      width,
       overlap,
       style,
       styles
@@ -47,8 +48,8 @@ export const DotCount = /*#__PURE__*/memo(_props => {
   const theme = useTheme();
   const [childrenSize, onChildrenLayout] = useDotsLayout();
   const transforms = useDotPinStyles(childrenSize, {
-    width: dotCountSize + dotTextPaddingHorizontal,
-    height: dotCountSize
+    width: width != null ? width : height,
+    height
   }, overlap);
   const opacityAnimatedValue = useSharedValue(opacityEnter.fromValue);
   const scaleAnimatedValue = useSharedValue(scaleEnter.fromValue);
@@ -64,10 +65,16 @@ export const DotCount = /*#__PURE__*/memo(_props => {
   }, [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]]
     }];
-  }, [theme.color, variant]);
+  }, [height, width, theme.space, theme.borderWidth, theme.borderRadius, theme.color, variant]);
 
   // avoid displaying 0 during animations and preserve exit animation
   useEffect(() => {
@@ -100,9 +107,6 @@ 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 textStyles = useMemo(() => [{
-    paddingHorizontal: dotTextPaddingHorizontal
-  }, styles == null ? void 0 : styles.text], [styles == null ? void 0 : styles.text]);
   const rootStyles = useMemo(() => [style, styles == null ? void 0 : styles.root], [styles == null ? void 0 : styles.root, style]);
 
   // only check childrenSize when children is defined
@@ -122,7 +126,7 @@ export const DotCount = /*#__PURE__*/memo(_props => {
         children: /*#__PURE__*/_jsx(Text, {
           color: "fgInverse",
           font: "caption",
-          style: textStyles,
+          style: styles == null ? void 0 : styles.text,
           children: parseDotCountMaxOverflow(countInternal, max)
         })
       })
@@ -133,10 +137,6 @@ const styleSheet = StyleSheet.create({
   container: {
     alignItems: 'center',
     justifyContent: 'center',
-    display: 'flex',
-    borderWidth: 1,
-    minWidth: dotCountSize,
-    height: dotCountSize,
-    borderRadius: 16
+    display: 'flex'
   }
 });

package/esm/dots/DotSymbol.js

@@ -65,8 +65,9 @@ export const DotSymbol = /*#__PURE__*/memo(_props => {
 
   // only check childrenSize when children is defined
   const shouldShow = children !== undefined ? childrenSize !== null : true;
-  return /*#__PURE__*/_jsxs(View, _extends({}, props, {
-    style: style,
+  return /*#__PURE__*/_jsxs(View, _extends({
+    style: style
+  }, props, {
     children: [/*#__PURE__*/_jsx(View, {
       onLayout: onChildrenLayout,
       testID: props.testID + "-children",