@coinbase/cds-mobile 9.9.0 → 9.10.1

package/esm/chips/__stories__/InputChip.stories.js

@@ -36,7 +36,25 @@ const InputChipScreen = () => {
         children: "USD"
       })]
     }), /*#__PURE__*/_jsxs(Example, {
-      title: "Compact",
+      title: "Size xs",
+      children: [/*#__PURE__*/_jsx(InputChip, {
+        onPress: NoopFn,
+        size: "xs",
+        children: "USD"
+      }), /*#__PURE__*/_jsx(InputChip, {
+        onPress: NoopFn,
+        size: "xs",
+        start: /*#__PURE__*/_jsx(RemoteImage, _extends({}, compactMediaProps)),
+        children: "USD"
+      }), /*#__PURE__*/_jsx(InputChip, {
+        disabled: true,
+        onPress: NoopFn,
+        size: "xs",
+        start: /*#__PURE__*/_jsx(RemoteImage, _extends({}, compactMediaProps)),
+        children: "USD"
+      })]
+    }), /*#__PURE__*/_jsxs(Example, {
+      title: "Compact (deprecated)",
       children: [/*#__PURE__*/_jsx(InputChip, {
         compact: true,
         onPress: NoopFn,

package/esm/controls/InputStack.js

@@ -123,9 +123,13 @@ export const InputStack = /*#__PURE__*/memo(function InputStack(_props) {
             background: variant ? variantColorMap[variant] : undefined
           }), !!startNode && /*#__PURE__*/_jsx(_Fragment, {
             children: startNode
-          }), !!labelNode && labelVariant === 'inside' ? /*#__PURE__*/_jsxs(VStack, {
+          }), !!labelNode && labelVariant === 'inside' ?
+          /*#__PURE__*/
+          // A stacked inside label tightens its top/bottom spacing so the label + input still
+          // fit the same natural field height an outside label produces.
+          _jsxs(VStack, {
             flexGrow: 1,
-            paddingY: 1,
+            paddingY: 0.75,
             children: [labelNode, inputNode]
           }) : inputNode, !!endNode && /*#__PURE__*/_jsx(_Fragment, {
             children: endNode

package/esm/controls/NativeInput.js

@@ -23,7 +23,7 @@ export const NativeInput = /*#__PURE__*/memo(_ref => {
     editableInputAddonProps = _objectWithoutPropertiesLoose(_ref, _excluded);
   const theme = useTheme();
   const textAlignInputTransformed = useTextAlign(align).textAlign;
-  const inputTextStyle = useMemo(() => ({
+  const inputTextStyle = useMemo(() => _extends({
     fontSize: theme.fontSize[font],
     fontFamily: theme.fontFamily[font],
     minHeight: theme.lineHeight[font],
@@ -31,8 +31,13 @@ export const NativeInput = /*#__PURE__*/memo(_ref => {
     padding: 0,
     margin: 0,
     color: theme.color.fg
-  }), [theme.fontSize, theme.fontFamily, theme.lineHeight, theme.fontWeight, theme.color.fg, font]);
+  }, editableInputAddonProps.multiline ? null : {
+    textAlignVertical: 'center'
+  }), [theme.fontSize, theme.fontFamily, theme.lineHeight, theme.fontWeight, theme.color.fg, font, editableInputAddonProps.multiline]);
   const containerStyle = useMemo(() => {
+    // NativeInput has no `size` prop, so the deprecated `compact` still drives its own base
+    // padding here. When rendered inside TextInput, `containerSpacing` (size-derived) is
+    // spread after and overrides this fallback.
     return _extends({
       flex: 2,
       minWidth: 0,

package/esm/controls/SearchInput.js

@@ -8,6 +8,8 @@ import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box } from '../layout/Box';
 import { InputIconButton } from './InputIconButton';
 import { TextInput } from './TextInput';
+
+/** T-shirt size for SearchInput. Aliases the TextInput size union. */
 import { jsx as _jsx } from "react/jsx-runtime";
 export const SearchInput = /*#__PURE__*/memo(_ref => {
   let {

package/esm/controls/TextInput.js

@@ -1,5 +1,5 @@
 const _excluded = ["ref"],
-  _excluded2 = ["label", "labelFont", "labelColor", "helperText", "variant", "testID", "testIDMap", "start", "end", "width", "disabled", "align", "font", "compact", "suffix", "accessibilityLabel", "borderRadius", "enableColorSurge", "helperTextErrorIconAccessibilityLabel", "bordered", "focusedBorderWidth", "labelVariant", "labelNode", "inputBackground"];
+  _excluded2 = ["label", "labelFont", "labelColor", "helperText", "variant", "testID", "testIDMap", "start", "end", "width", "disabled", "align", "font", "compact", "size", "suffix", "accessibilityLabel", "borderRadius", "enableColorSurge", "helperTextErrorIconAccessibilityLabel", "bordered", "focusedBorderWidth", "labelVariant", "labelNode", "inputBackground"];
 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, { cloneElement, isValidElement, memo, useCallback, useMemo, useRef, useState } from 'react';
@@ -19,6 +19,7 @@ import { InputLabel } from './InputLabel';
 import { InputStack } from './InputStack';
 import { NativeInput } from './NativeInput';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const defaultTextInputSize = 'l';
 const variantColorMap = {
   primary: 'fgPrimary',
   positive: 'fgPositive',
@@ -48,7 +49,8 @@ export const TextInput = /*#__PURE__*/memo(_ref => {
       disabled = false,
       align = 'start',
       font = 'body',
-      compact,
+      compact = false,
+      size,
       suffix = '',
       accessibilityLabel,
       borderRadius,
@@ -88,12 +90,36 @@ export const TextInput = /*#__PURE__*/memo(_ref => {
     }
   }, [setFocused, internalRef, editableInputAddonProps.readOnly]);
   const hasLabel = useMemo(() => !!label || !!labelNode, [label, labelNode]);
-  const containerSpacing = useMemo(() => _extends({}, !!start && {
-    paddingStart: theme.space[0.5]
-  }, labelVariant === 'inside' && hasLabel && !compact && {
-    paddingBottom: 0,
-    paddingTop: 0
-  }), [start, theme.space, labelVariant, hasLabel, compact]);
+
+  // Geometry is driven entirely by the resolved size. An explicit `size` always wins;
+  // the deprecated `compact` only maps to `s` as a fallback so legacy callers keep dense spacing.
+  const resolvedSize = size != null ? size : compact ? 's' : defaultTextInputSize;
+  // compact only forces label placement (inline start slot) when the caller did NOT set an
+  // explicit size. Once `size` is provided, label placement follows normal `labelVariant` rules.
+  const isCompactLabel = Boolean(compact) && size === undefined;
+
+  // Label placement is independent of size. `compact` (set alone) forces an inside label;
+  // otherwise placement follows `labelVariant`. An inside label sits horizontally in the start
+  // slot at every size EXCEPT `l`, where it stacks vertically above the input.
+  const wantsInsideLabel = hasLabel && (isCompactLabel || labelVariant === 'inside');
+  const insideVerticalLabel = wantsInsideLabel && !isCompactLabel && resolvedSize === 'l';
+  const insideHorizontalLabel = wantsInsideLabel && !insideVerticalLabel;
+  const containerSpacing = useMemo(() => {
+    const verticalPad = resolvedSize === 'l' ? 2 : resolvedSize === 'm' ? 1.5 : 1;
+    return _extends({
+      // Horizontal padding is size-invariant. A start node contributes 0.5 here and supplies the
+      // rest of the gap itself (e.g. InputIcon's own padding); an inline label needs a 1 gap to
+      // the input text. A start node wins when both are present, since it's the input's neighbor.
+      paddingStart: theme.space[start ? 0.5 : insideHorizontalLabel ? 1 : 2],
+      paddingEnd: theme.space[2],
+      // A vertical inside label (size `l`) gets its top/bottom spacing from the stacking wrapper;
+      // every other placement keeps the per-size padding here.
+      paddingTop: insideVerticalLabel ? 0 : theme.space[verticalPad],
+      paddingBottom: insideVerticalLabel ? 0 : theme.space[verticalPad]
+    }, insideVerticalLabel ? null : {
+      minHeight: theme.space[verticalPad] * 2 + theme.lineHeight[font]
+    });
+  }, [start, theme.space, theme.lineHeight, font, insideHorizontalLabel, insideVerticalLabel, resolvedSize]);
 
   // Get the accessability label from the start node child
   const startIconA11yLabel = useMemo(() => {
@@ -167,23 +193,23 @@ export const TextInput = /*#__PURE__*/memo(_ref => {
       accessibilityHint: typeof helperText === 'string' ? helperText : undefined,
       accessibilityLabel: accessibilityLabel != null ? accessibilityLabel : label,
       align: align,
-      compact: compact,
+      compact: resolvedSize === 's',
       containerSpacing: containerSpacing,
       disabled: disabled,
       font: font,
       selectionColor: variantColorMap[focusedVariant],
       testID: testID
     }, editableInputAddonProps)),
-    labelNode: !compact && (labelNode && labelVariant !== 'inside' ? labelNode : hasLabel && /*#__PURE__*/_jsx(Pressable, {
+    labelNode: !insideHorizontalLabel && (labelNode && !insideVerticalLabel ? labelNode : hasLabel && /*#__PURE__*/_jsx(Pressable, {
       accessibilityRole: "button",
       disabled: disabled,
       onPress: handleNodePress,
-      children: labelVariant === 'inside' && labelNode ? /*#__PURE__*/_jsx(Box, {
+      children: insideVerticalLabel && labelNode ? /*#__PURE__*/_jsx(Box, {
         background: readOnlyInputBackground,
         paddingEnd: 2,
         paddingStart: start ? 0.5 : 2,
         children: labelNode
-      }) : labelVariant === 'inside' ? /*#__PURE__*/_jsx(InputLabel, {
+      }) : insideVerticalLabel ? /*#__PURE__*/_jsx(InputLabel, {
         background: readOnlyInputBackground,
         color: labelColor,
         font: labelFont,
@@ -199,8 +225,8 @@ export const TextInput = /*#__PURE__*/memo(_ref => {
         children: label
       })
     })),
-    labelVariant: labelVariant,
-    startNode: (compact && hasLabel || !!start) && /*#__PURE__*/_jsx(Box, {
+    labelVariant: insideVerticalLabel ? 'inside' : 'outside',
+    startNode: (insideHorizontalLabel && hasLabel || !!start) && /*#__PURE__*/_jsx(Box, {
       alignItems: "center",
       background: readOnlyInputBackground,
       justifyContent: "center",
@@ -214,8 +240,8 @@ export const TextInput = /*#__PURE__*/memo(_ref => {
         importantForAccessibility: startIconA11yLabel ? 'auto' : 'no',
         onPress: handleNodePress,
         children: /*#__PURE__*/_jsxs(HStack, {
-          paddingStart: compact && hasLabel ? 2 : undefined,
-          children: [compact && (labelNode ? labelNode : !!label && /*#__PURE__*/_jsx(InputLabel, {
+          paddingStart: insideHorizontalLabel && hasLabel ? 2 : undefined,
+          children: [insideHorizontalLabel && (labelNode ? labelNode : !!label && /*#__PURE__*/_jsx(InputLabel, {
             color: labelColor,
             font: labelFont,
             children: label

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

@@ -13,6 +13,30 @@ const Basic = () => {
     value: text
   });
 };
+const Sizes = () => {
+  const [text, setText] = useState('');
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    children: [/*#__PURE__*/_jsx(SearchInput, {
+      editable: __DEV__,
+      onChangeText: setText,
+      size: "s",
+      value: text
+    }), /*#__PURE__*/_jsx(SearchInput, {
+      editable: __DEV__,
+      onChangeText: setText,
+      size: "m",
+      value: text
+    }), /*#__PURE__*/_jsx(SearchInput, {
+      editable: __DEV__,
+      onChangeText: setText,
+      size: "l",
+      value: text
+    })]
+  });
+};
+
+/** `compact` is deprecated in favor of `size="s"`; kept here to verify legacy behavior. */
 const Compact = () => {
   const [text, setText] = useState('');
   return /*#__PURE__*/_jsx(SearchInput, {
@@ -196,7 +220,10 @@ const SearchInputScreen = () => {
       title: "Custom Ref",
       children: /*#__PURE__*/_jsx(CustomRef, {})
     }), /*#__PURE__*/_jsx(Example, {
-      title: "Compact",
+      title: "Sizes",
+      children: /*#__PURE__*/_jsx(Sizes, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Deprecated compact (renders as size s)",
       children: /*#__PURE__*/_jsx(Compact, {})
     }), /*#__PURE__*/_jsx(Example, {
       title: "Borderless variants",

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

@@ -34,6 +34,15 @@ const MockCompactTextInput = _ref2 => {
     value: text
   }, props));
 };
+const MockSizeTextInput = _ref3 => {
+  let props = _extends({}, (_objectDestructuringEmpty(_ref3), _ref3));
+  const [text, onChangeText] = useState('');
+  return /*#__PURE__*/_jsx(TextInput, _extends({
+    editable: __DEV__,
+    onChangeText: onChangeText,
+    value: text
+  }, props));
+};
 const MockComplexInput = () => {
   const [text, onChangeText] = useState('');
   return /*#__PURE__*/_jsxs(HStack, {
@@ -330,6 +339,79 @@ const InputScreen = () => {
         placeholder: "189-280-1111",
         variant: "foregroundMuted"
       })
+    }), /*#__PURE__*/_jsxs(Example, {
+      inline: true,
+      title: "TextInput Sizes",
+      children: [/*#__PURE__*/_jsx(MockSizeTextInput, {
+        label: "Small (s)",
+        placeholder: "Small",
+        size: "s"
+      }), /*#__PURE__*/_jsx(MockSizeTextInput, {
+        label: "Medium (m)",
+        placeholder: "Medium",
+        size: "m"
+      }), /*#__PURE__*/_jsx(MockSizeTextInput, {
+        label: "Large (l) - default",
+        placeholder: "Large",
+        size: "l"
+      })]
+    }), /*#__PURE__*/_jsx(Example, {
+      inline: true,
+      title: "TextInput Size S Inside Label",
+      children: /*#__PURE__*/_jsx(MockSizeTextInput, {
+        label: "Inside Label",
+        labelVariant: "inside",
+        placeholder: "Small",
+        size: "s"
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      inline: true,
+      title: "TextInput Size M Inside Label",
+      children: /*#__PURE__*/_jsx(MockSizeTextInput, {
+        label: "Inside Label",
+        labelVariant: "inside",
+        placeholder: "Medium",
+        size: "m"
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      inline: true,
+      title: "TextInput Size S with suffix",
+      children: /*#__PURE__*/_jsx(MockSizeTextInput, {
+        label: "Label",
+        placeholder: "0.00",
+        size: "s",
+        suffix: "USD"
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      inline: true,
+      title: "TextInput Size S with start node",
+      children: /*#__PURE__*/_jsx(MockSizeTextInput, {
+        label: "Label",
+        placeholder: "189-280-1111",
+        size: "s",
+        start: /*#__PURE__*/_jsx(HStack, {
+          accessibilityHint: "Start Node",
+          accessibilityLabel: "Start Node",
+          children: /*#__PURE__*/_jsx(Text, {
+            font: "body",
+            children: "Start"
+          })
+        })
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      inline: true,
+      title: "TextInput Size S with end node",
+      children: /*#__PURE__*/_jsx(MockSizeTextInput, {
+        end: /*#__PURE__*/_jsx(Text, {
+          accessibilityHint: "Cancel",
+          accessibilityLabel: "Cancel",
+          font: "body",
+          children: "End"
+        }),
+        label: "Label",
+        placeholder: "189-280-1111",
+        size: "s"
+      })
     }), /*#__PURE__*/_jsx(Example, {
       inline: true,
       title: "CompactTextInput",

package/esm/dates/DateInput.js

@@ -11,6 +11,7 @@ import { useComponentConfig } from '../hooks/useComponentConfig';
 import { VStack } from '../layout/VStack';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const DateInput = /*#__PURE__*/memo(_ref => {
+  var _ref2;
   let {
       ref
     } = _ref,
@@ -99,7 +100,7 @@ export const DateInput = /*#__PURE__*/memo(_ref => {
     children: /*#__PURE__*/_jsx(TextInput, _extends({
       ref: ref,
       end: end,
-      helperText: helperText || (error == null ? void 0 : error.message) || intlDateFormat.dateStringFormat,
+      helperText: (_ref2 = helperText != null ? helperText : error == null ? void 0 : error.message) != null ? _ref2 : intlDateFormat.dateStringFormat,
       keyboardType: "number-pad",
       onBlur: handleBlur,
       onChange: handleChange,

package/esm/dates/DatePicker.js

@@ -1,5 +1,5 @@
 const _excluded = ["ref"],
-  _excluded2 = ["date", "styles", "highlightedDates", "highlightedDateAccessibilityHint", "nextArrowAccessibilityLabel", "previousArrowAccessibilityLabel", "disabledDates", "onChangeDate", "error", "onErrorDate", "required", "disabled", "seedDate", "minDate", "maxDate", "requiredError", "invalidDateError", "disabledDateError", "label", "accessibilityHint", "accessibilityLabel", "accessibilityLabelledBy", "calendarIconButtonAccessibilityLabel", "openCalendarAccessibilityLabel", "closeCalendarAccessibilityLabel", "dateInputStyle", "compact", "variant", "confirmText", "confirmButtonAccessibilityHint", "helperText", "width", "onOpen", "onClose", "onConfirm", "onCancel", "onChange"];
+  _excluded2 = ["date", "styles", "highlightedDates", "highlightedDateAccessibilityHint", "nextArrowAccessibilityLabel", "previousArrowAccessibilityLabel", "disabledDates", "onChangeDate", "error", "onErrorDate", "required", "disabled", "seedDate", "minDate", "maxDate", "requiredError", "invalidDateError", "disabledDateError", "label", "accessibilityHint", "accessibilityLabel", "accessibilityLabelledBy", "calendarIconButtonAccessibilityLabel", "openCalendarAccessibilityLabel", "closeCalendarAccessibilityLabel", "dateInputStyle", "compact", "size", "variant", "confirmText", "confirmButtonAccessibilityHint", "helperText", "width", "onOpen", "onClose", "onConfirm", "onCancel", "onChange"];
 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 { memo, useCallback, useMemo, useRef, useState } from 'react';
@@ -47,6 +47,7 @@ export const DatePicker = /*#__PURE__*/memo(_ref => {
       closeCalendarAccessibilityLabel = 'Close calendar without selecting a date',
       dateInputStyle,
       compact,
+      size,
       variant,
       confirmText = 'Confirm',
       confirmButtonAccessibilityHint,
@@ -143,6 +144,7 @@ export const DatePicker = /*#__PURE__*/memo(_ref => {
       onErrorDate: onErrorDate,
       required: required,
       requiredError: requiredError,
+      size: size,
       style: [dateInputStyle, styles == null ? void 0 : styles.dateInput],
       variant: variant
     }, props)), showPicker && /*#__PURE__*/_jsx(Tray, {
@@ -155,7 +157,6 @@ export const DatePicker = /*#__PURE__*/memo(_ref => {
           role: "none",
           children: /*#__PURE__*/_jsx(Button, {
             block: true,
-            compact: true,
             accessibilityHint: confirmButtonAccessibilityHint,
             disabled: disabled || !calendarSelectedDate,
             onPress: () => {
@@ -164,6 +165,7 @@ export const DatePicker = /*#__PURE__*/memo(_ref => {
                 handleClose();
               }
             },
+            size: "s",
             children: confirmText
           })
         });

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

@@ -92,6 +92,34 @@ export const Examples = () => {
     })
   });
 };
+export const Sizes = () => {
+  const [date, setDate] = useState(null);
+  const [error, setError] = useState(null);
+  const props = {
+    date,
+    onChangeDate: setDate,
+    error,
+    onErrorDate: setError
+  };
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    children: /*#__PURE__*/_jsx(Example, {
+      title: "DateInput sizes",
+      children: /*#__PURE__*/_jsxs(Group, {
+        gap: 8,
+        paddingEnd: 8,
+        children: [/*#__PURE__*/_jsx(DateInput, _extends({
+          size: "s"
+        }, sharedProps, props)), /*#__PURE__*/_jsx(DateInput, _extends({
+          size: "m"
+        }, sharedProps, props)), /*#__PURE__*/_jsx(DateInput, _extends({
+          size: "l"
+        }, sharedProps, props)), /*#__PURE__*/_jsx(DateInput, _extends({
+          compact: true
+        }, sharedProps, props))]
+      })
+    })
+  });
+};
 export const CustomLabel = () => {
   const [date, setDate] = useState(null);
   const [error, setError] = useState(null);

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

@@ -150,6 +150,29 @@ export const FullExample = () => {
     })]
   });
 };
+export const Sizes = () => {
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    children: /*#__PURE__*/_jsx(Example, {
+      title: "DatePicker sizes",
+      children: /*#__PURE__*/_jsxs(VStack, {
+        gap: 2,
+        children: [/*#__PURE__*/_jsx(ExampleDatePicker, {
+          openCalendarAccessibilityLabel: "Small calendar",
+          size: "s"
+        }), /*#__PURE__*/_jsx(ExampleDatePicker, {
+          openCalendarAccessibilityLabel: "Medium calendar",
+          size: "m"
+        }), /*#__PURE__*/_jsx(ExampleDatePicker, {
+          openCalendarAccessibilityLabel: "Large calendar",
+          size: "l"
+        }), /*#__PURE__*/_jsx(ExampleDatePicker, {
+          compact: true,
+          openCalendarAccessibilityLabel: "Compact calendar"
+        })]
+      })
+    })
+  });
+};
 export const CustomLabel = () => {
   return /*#__PURE__*/_jsx(ExampleScreen, {
     children: /*#__PURE__*/_jsx(Example, {

package/esm/gradients/LinearGradient.js

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { Defs, LinearGradient as Lg, Rect, Stop, Svg } from 'react-native-svg';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -23,6 +23,30 @@ export function LinearGradient(_ref) {
     pointerEvents,
     testID
   } = _ref;
+  const [pixelSize, setPixelSize] = useState(() => {
+    const flat = StyleSheet.flatten(style);
+    return flat && typeof flat.width === 'number' && typeof flat.height === 'number' ? {
+      width: flat.width,
+      height: flat.height
+    } : null;
+  });
+  const handleLayout = useCallback(event => {
+    const width = Math.round(event.nativeEvent.layout.width);
+    const height = Math.round(event.nativeEvent.layout.height);
+    setPixelSize(prev => prev && prev.width === width && prev.height === height ? prev : {
+      width,
+      height
+    });
+  }, []);
+  const svgWidth = pixelSize ? pixelSize.width : 0;
+  const svgHeight = pixelSize ? pixelSize.height : 0;
+  const containerStyle = useMemo(() => ({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: svgWidth,
+    height: svgHeight
+  }), [svgWidth, svgHeight]);
   const svg = useMemo(() => {
     var _start$x, _start$y, _end$x, _end$y;
     const anglePI = -angle * Math.PI / 180;
@@ -31,10 +55,10 @@ export function LinearGradient(_ref) {
     const x2 = (_end$x = end == null ? void 0 : end.x) != null ? _end$x : Math.round(50 + Math.sin(anglePI + Math.PI) * 50) / 100;
     const y2 = (_end$y = end == null ? void 0 : end.y) != null ? _end$y : Math.round(50 + Math.cos(anglePI + Math.PI) * 50) / 100;
     return /*#__PURE__*/_jsx(View, {
-      style: StyleSheet.absoluteFillObject,
+      style: containerStyle,
       children: /*#__PURE__*/_jsxs(Svg, {
-        height: "100%",
-        width: "100%",
+        height: svgHeight,
+        width: svgWidth,
         children: [/*#__PURE__*/_jsx(Defs, {
           children: /*#__PURE__*/_jsx(Lg, {
             id: "LinearGradient",
@@ -50,14 +74,15 @@ export function LinearGradient(_ref) {
           })
         }), /*#__PURE__*/_jsx(Rect, {
           fill: "url(#LinearGradient)",
-          height: "100%",
-          width: "100%"
+          height: svgHeight,
+          width: svgWidth
         })]
       })
     }, "GrandientSvgContainer");
-  }, [colors, start, end, angle, stops]);
+  }, [colors, start, end, angle, stops, containerStyle, svgWidth, svgHeight]);
   const items = !elevated ? [svg, children] : [children, svg];
   return /*#__PURE__*/_jsx(View, {
+    onLayout: handleLayout,
     pointerEvents: pointerEvents,
     style: style,
     testID: testID,

package/esm/navigation/BrowserBarSearchInput.js

@@ -1,4 +1,4 @@
-const _excluded = ["onFocus", "onBlur", "compact", "expandOnFocus"];
+const _excluded = ["onFocus", "onBlur", "size", "expandOnFocus"];
 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 { memo, useCallback } from 'react';
@@ -14,7 +14,7 @@ export const BrowserBarSearchInput = /*#__PURE__*/memo(_ref => {
   let {
       onFocus,
       onBlur,
-      compact = true,
+      size = 's',
       expandOnFocus = true
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
@@ -34,10 +34,14 @@ export const BrowserBarSearchInput = /*#__PURE__*/memo(_ref => {
     setHideStart(false);
     onBlur == null || onBlur(e);
   }, [onBlur, setHideEnd, setHideStart]);
+
+  // The browser bar always wants the dense input, so the density default moved from the deprecated
+  // `compact` onto `size`. A consumer-supplied `compact` still arrives via the spread but is inert,
+  // since `SearchInput` resolves `size` first.
   return /*#__PURE__*/_jsx(SearchInput, _extends({
-    compact: compact,
     onBlur: handleBlur,
-    onFocus: handleFocus
+    onFocus: handleFocus,
+    size: size
   }, props));
 });
 BrowserBarSearchInput.displayName = 'BrowserBarSearchInput';

package/esm/overlays/Toast.js

@@ -125,9 +125,9 @@ export const Toast = /*#__PURE__*/memo(_ref => {
           children: text
         })
       }), !!action && /*#__PURE__*/_jsx(Button, {
-        compact: true,
         transparent: true,
         onPress: handleActionPress,
+        size: "s",
         testID: (_action$testID = action.testID) != null ? _action$testID : 'toast-action',
         children: action.label
       })]

package/esm/visualizations/ProgressContainerWithButtons.js

@@ -27,12 +27,12 @@ export const ProgressContainerWithButtons = _ref => {
     children: [children({
       calculateProgress
     }), /*#__PURE__*/_jsx(Button, {
-      compact: true,
       onPress: reRender,
+      size: "s",
       children: "Re-render"
     }), !hideIncrease && /*#__PURE__*/_jsx(Button, {
-      compact: true,
       onPress: increase,
+      size: "s",
       children: "Increase 20%"
     })]
   }, num);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "9.9.0",
+  "version": "9.10.1",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -218,7 +218,7 @@
     "react-native-worklets": "0.5.2"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^9.9.0",
+    "@coinbase/cds-common": "^9.10.1",
     "@coinbase/cds-icons": "^5.21.0",
     "@coinbase/cds-illustrations": "^4.45.0",
     "@coinbase/cds-lottie-files": "^3.3.4",