@coinbase/cds-mobile 8.28.2 → 8.29.0

package/esm/alpha/select/DefaultSelectControl.js

@@ -1,4 +1,4 @@
-const _excluded = ["type", "options", "value", "onChange", "open", "placeholder", "disabled", "setOpen", "variant", "helperText", "label", "labelVariant", "startNode", "endNode", "compact", "maxSelectedOptionsToShow", "accessibilityLabel", "accessibilityHint", "hiddenSelectedOptionsLabel", "removeSelectedOptionAccessibilityLabel", "style", "styles"];
+const _excluded = ["type", "options", "value", "onChange", "open", "placeholder", "disabled", "setOpen", "variant", "helperText", "label", "labelVariant", "contentNode", "startNode", "endNode", "compact", "maxSelectedOptionsToShow", "accessibilityLabel", "accessibilityHint", "hiddenSelectedOptionsLabel", "removeSelectedOptionAccessibilityLabel", "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 { forwardRef, memo, useMemo } from 'react';
@@ -43,6 +43,7 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forw
       helperText,
       label,
       labelVariant,
+      contentNode,
       startNode,
       endNode: customEndNode,
       compact,
@@ -111,15 +112,13 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forw
     onPress: () => setOpen(s => !s),
     style: styles == null ? void 0 : styles.controlLabelNode,
     children: /*#__PURE__*/_jsx(InputLabel, {
-      alignSelf: labelVariant === 'inside' ? 'flex-start' : undefined,
       color: "fg",
-      ellipsizeMode: "tail",
-      numberOfLines: 2,
-      paddingX: labelVariant === 'inside' ? 2 : 0,
-      paddingY: shouldShowCompactLabel || labelVariant === 'inside' ? 0 : 0.5,
+      paddingEnd: 0,
+      paddingStart: labelVariant === 'inside' ? 2 : 0,
+      paddingY: labelVariant === 'inside' || compact ? 0 : 0.5,
       children: label
     })
-  }) : label, [disabled, label, labelVariant, setOpen, shouldShowCompactLabel, styles == null ? void 0 : styles.controlLabelNode]);
+  }) : label, [compact, disabled, label, labelVariant, setOpen, styles == null ? void 0 : styles.controlLabelNode]);
   const valueNode = useMemo(() => {
     var _ref5, _ref6, _option$label2;
     if (hasValue && isMultiSelect) {
@@ -135,7 +134,7 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forw
             compact: true,
             accessibilityLabel: removeSelectedOptionAccessibilityLabel + " " + accessibilityLabel,
             borderWidth: 0,
-            disabled: option.disabled,
+            disabled: disabled || option.disabled,
             invertColorScheme: false,
             maxWidth: 200,
             onPress: event => {
@@ -160,10 +159,10 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forw
       color: hasValue ? 'fg' : 'fgMuted',
       ellipsize: "tail",
       font: "body",
-      textAlign: shouldShowCompactLabel ? 'right' : 'left',
+      textAlign: "left",
       children: content
     }) : content;
-  }, [hasValue, isMultiSelect, optionsMap, placeholder, shouldShowCompactLabel, value, maxSelectedOptionsToShow, hiddenSelectedOptionsLabel, removeSelectedOptionAccessibilityLabel, onChange]);
+  }, [hasValue, isMultiSelect, optionsMap, placeholder, value, maxSelectedOptionsToShow, hiddenSelectedOptionsLabel, removeSelectedOptionAccessibilityLabel, disabled, onChange]);
   const inputNode = useMemo(() => /*#__PURE__*/_jsx(TouchableOpacity, _extends({
     ref: ref,
     accessibilityHint: accessibilityHint,
@@ -180,7 +179,7 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forw
       justifyContent: "space-between",
       minHeight: labelVariant === 'inside' ? LABEL_VARIANT_INSIDE_HEIGHT : compact ? COMPACT_HEIGHT : DEFAULT_HEIGHT,
       paddingStart: startNode ? 0 : 2,
-      paddingY: labelVariant === 'inside' ? 0 : compact ? 0.5 : 1.5,
+      paddingY: labelVariant === 'inside' ? 0 : compact ? 1 : 1.5,
       children: /*#__PURE__*/_jsxs(HStack, {
         alignItems: "center",
         flexGrow: 1,
@@ -191,30 +190,33 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forw
           children: startNode
         }), shouldShowCompactLabel ? /*#__PURE__*/_jsx(HStack, {
           alignItems: "center",
+          maxWidth: "40%",
           paddingEnd: 1,
-          width: "40%",
           children: labelNode
-        }) : null, /*#__PURE__*/_jsx(VStack, {
+        }) : null, /*#__PURE__*/_jsxs(VStack, {
           justifyContent: "center",
-          maxWidth: shouldShowCompactLabel ? '45%' : startNode ? '70%' : '85%',
+          maxWidth: startNode ? '70%' : '85%',
           style: styles == null ? void 0 : styles.controlValueNode,
-          children: valueNode
+          children: [valueNode, contentNode]
         })]
       })
     })
-  })), [ref, accessibilityHint, accessibilityLabel, disabled, styles == null ? void 0 : styles.controlInputNode, styles == null ? void 0 : styles.controlStartNode, styles == null ? void 0 : styles.controlValueNode, props, startNode, labelVariant, compact, shouldShowCompactLabel, labelNode, valueNode, setOpen]);
-  const endNode = useMemo(() => /*#__PURE__*/_jsx(HStack, {
-    alignItems: "center",
-    paddingX: 2,
-    style: styles == null ? void 0 : styles.controlEndNode,
-    children: /*#__PURE__*/_jsx(Pressable, {
-      onPress: () => setOpen(s => !s),
+  })), [ref, accessibilityHint, accessibilityLabel, disabled, styles == null ? void 0 : styles.controlInputNode, styles == null ? void 0 : styles.controlStartNode, styles == null ? void 0 : styles.controlValueNode, props, labelVariant, compact, startNode, shouldShowCompactLabel, labelNode, valueNode, contentNode, setOpen]);
+  const endNode = useMemo(() => /*#__PURE__*/_jsx(Pressable, {
+    disabled: disabled,
+    onPress: () => setOpen(s => !s),
+    children: /*#__PURE__*/_jsx(HStack, {
+      alignItems: "center",
+      flexGrow: 1,
+      paddingX: 2,
+      paddingY: compact ? 1 : 1.5,
+      style: styles == null ? void 0 : styles.controlEndNode,
       children: customEndNode ? customEndNode : /*#__PURE__*/_jsx(AnimatedCaret, {
         color: !open ? 'fg' : variant ? variantColor[variant] : 'fgPrimary',
         rotate: open ? 0 : 180
       })
     })
-  }), [open, variant, setOpen, customEndNode, styles == null ? void 0 : styles.controlEndNode]);
+  }), [compact, styles == null ? void 0 : styles.controlEndNode, disabled, customEndNode, open, variant, setOpen]);
   return /*#__PURE__*/_jsx(InputStack, _extends({
     borderFocusedStyle: borderFocusedStyle,
     borderStyle: borderUnfocusedStyle,

package/esm/alpha/select/DefaultSelectDropdown.js

@@ -1,4 +1,4 @@
-const _excluded = ["type", "options", "value", "onChange", "open", "setOpen", "controlRef", "disabled", "style", "styles", "compact", "label", "end", "selectAllLabel", "emptyOptionsLabel", "clearAllLabel", "hideSelectAll", "accessory", "media", "SelectOptionComponent", "SelectAllOptionComponent", "SelectEmptyDropdownContentsComponent", "SelectOptionGroupComponent", "accessibilityRoles"],
+const _excluded = ["type", "options", "value", "onChange", "onVisibilityChange", "open", "setOpen", "controlRef", "disabled", "style", "styles", "compact", "header", "footer", "label", "end", "selectAllLabel", "emptyOptionsLabel", "clearAllLabel", "hideSelectAll", "accessory", "media", "SelectOptionComponent", "SelectAllOptionComponent", "SelectEmptyDropdownContentsComponent", "SelectOptionGroupComponent", "accessibilityRoles"],
   _excluded2 = ["Component", "media", "accessory", "end", "disabled"];
 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; }
@@ -21,12 +21,15 @@ const DefaultSelectDropdownComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef
       options,
       value,
       onChange,
+      onVisibilityChange,
       open,
       setOpen,
       disabled,
       style,
       styles,
       compact,
+      header,
+      footer,
       label,
       end,
       selectAllLabel = 'Select all',
@@ -132,6 +135,7 @@ const DefaultSelectDropdownComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef
     indeterminate: indeterminate,
     label: selectAllLabel + " (" + flatOptionsForSelectAll.filter(o => o.value !== null).length + ")",
     media: media != null ? media : /*#__PURE__*/_jsx(Checkbox, {
+      accessible: false,
       checked: isAllOptionsSelected,
       indeterminate: indeterminate,
       onPress: toggleSelectAll,
@@ -148,87 +152,88 @@ const DefaultSelectDropdownComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef
   return /*#__PURE__*/_jsx(Tray, {
     ref: ref,
     disableCapturePanGestureToDismiss: true,
+    footer: footer,
+    header: header,
     onCloseComplete: () => setOpen(false),
     onDismiss: () => setOpen(false),
+    onVisibilityChange: onVisibilityChange,
     style: dropdownStyles,
     title: label,
     verticalDrawerPercentageOfView: 0.9,
-    children: /*#__PURE__*/_jsx(VStack, {
-      children: /*#__PURE__*/_jsx(ScrollView, {
-        showsVerticalScrollIndicator: true,
-        children: /*#__PURE__*/_jsxs(VStack, {
-          children: [!hideSelectAll && isMultiSelect && options.length > 0 && SelectAllOption, options.length > 0 ? options.map(optionOrGroup => {
-            var _optionProps$value, _optionProps$value2, _ref3;
-            // Check if it's a group (has 'options' property and 'label')
-            if (isSelectOptionGroup(optionOrGroup)) {
-              var _group$disabled;
-              const group = optionOrGroup;
-              return /*#__PURE__*/_jsx(SelectOptionGroupComponent, {
-                SelectOptionComponent: SelectOptionComponent,
-                accessibilityRole: accessibilityRoles == null ? void 0 : accessibilityRoles.option,
-                accessory: accessory,
-                compact: compact,
-                disabled: (_group$disabled = group.disabled) != null ? _group$disabled : disabled,
-                end: end,
-                label: group.label,
-                media: media,
-                onChange: onChange,
-                options: group.options,
-                setOpen: setOpen,
-                styles: optionGroupStyles,
-                type: type,
-                value: value
-              }, "group-" + group.label);
-            }
-            const option = optionOrGroup;
-            const {
-                Component: optionComponent,
-                media: optionMedia,
-                accessory: optionAccessory,
-                end: optionEnd,
-                disabled: optionDisabled
-              } = option,
-              optionProps = _objectWithoutPropertiesLoose(option, _excluded2);
-            const RenderedComponent = optionComponent != null ? optionComponent : SelectOptionComponent;
-            const selected = optionProps.value !== null && isMultiSelect ? value.includes(optionProps.value) : value === optionProps.value;
-            /** onPress handlers are passed so that when the media is pressed,
-             * the onChange handler is called. Since the <RenderedSelectOption>
-             * has an accessibilityRole, the inner media won't be detected by a screen reader
-             * so this behavior matches web
-             * */
-            const defaultMedia = isMultiSelect ? /*#__PURE__*/_jsx(Checkbox, {
-              "aria-hidden": true,
-              checked: selected,
-              onChange: () => handleOptionPress(optionProps.value),
-              tabIndex: -1,
-              value: (_optionProps$value = optionProps.value) == null ? void 0 : _optionProps$value.toString()
-            }) : /*#__PURE__*/_jsx(Radio, {
-              "aria-hidden": true,
-              checked: selected,
-              onChange: () => handleOptionPress(optionProps.value),
-              tabIndex: -1,
-              value: (_optionProps$value2 = optionProps.value) == null ? void 0 : _optionProps$value2.toString()
-            });
-            return /*#__PURE__*/_jsx(RenderedComponent, _extends({
+    children: /*#__PURE__*/_jsx(ScrollView, {
+      showsVerticalScrollIndicator: true,
+      children: /*#__PURE__*/_jsxs(VStack, _extends({}, props, {
+        children: [!hideSelectAll && isMultiSelect && options.length > 0 && SelectAllOption, options.length > 0 ? options.map(optionOrGroup => {
+          var _optionProps$value, _optionProps$value2, _ref3;
+          // Check if it's a group (has 'options' property and 'label')
+          if (isSelectOptionGroup(optionOrGroup)) {
+            var _group$disabled;
+            const group = optionOrGroup;
+            return /*#__PURE__*/_jsx(SelectOptionGroupComponent, {
+              SelectOptionComponent: SelectOptionComponent,
               accessibilityRole: accessibilityRoles == null ? void 0 : accessibilityRoles.option,
-              accessory: optionAccessory != null ? optionAccessory : accessory,
-              blendStyles: styles == null ? void 0 : styles.optionBlendStyles,
+              accessory: accessory,
               compact: compact,
-              disabled: optionDisabled || disabled,
-              end: optionEnd != null ? optionEnd : end,
-              media: (_ref3 = optionMedia != null ? optionMedia : media) != null ? _ref3 : defaultMedia,
-              onPress: handleOptionPress,
-              selected: selected,
-              style: styles == null ? void 0 : styles.option,
-              styles: optionStyles,
-              type: type
-            }, optionProps), optionProps.value);
-          }) : /*#__PURE__*/_jsx(SelectEmptyDropdownContentsComponent, {
-            label: emptyOptionsLabel,
-            styles: emptyDropdownContentsStyles
-          })]
-        })
-      })
+              disabled: (_group$disabled = group.disabled) != null ? _group$disabled : disabled,
+              end: end,
+              label: group.label,
+              media: media,
+              onChange: onChange,
+              options: group.options,
+              setOpen: setOpen,
+              styles: optionGroupStyles,
+              type: type,
+              value: value
+            }, "group-" + group.label);
+          }
+          const option = optionOrGroup;
+          const {
+              Component: optionComponent,
+              media: optionMedia,
+              accessory: optionAccessory,
+              end: optionEnd,
+              disabled: optionDisabled
+            } = option,
+            optionProps = _objectWithoutPropertiesLoose(option, _excluded2);
+          const RenderedComponent = optionComponent != null ? optionComponent : SelectOptionComponent;
+          const selected = optionProps.value !== null && isMultiSelect ? value.includes(optionProps.value) : value === optionProps.value;
+          /** onPress handlers are passed so that when the media is pressed,
+           * the onChange handler is called. Since the <RenderedSelectOption>
+           * has an accessibilityRole, the inner media won't be detected by a screen reader
+           * so this behavior matches web
+           * */
+          const defaultMedia = isMultiSelect ? /*#__PURE__*/_jsx(Checkbox, {
+            "aria-hidden": true,
+            checked: selected,
+            onChange: () => handleOptionPress(optionProps.value),
+            tabIndex: -1,
+            value: (_optionProps$value = optionProps.value) == null ? void 0 : _optionProps$value.toString()
+          }) : /*#__PURE__*/_jsx(Radio, {
+            "aria-hidden": true,
+            checked: selected,
+            onChange: () => handleOptionPress(optionProps.value),
+            tabIndex: -1,
+            value: (_optionProps$value2 = optionProps.value) == null ? void 0 : _optionProps$value2.toString()
+          });
+          return /*#__PURE__*/_jsx(RenderedComponent, _extends({
+            accessibilityRole: accessibilityRoles == null ? void 0 : accessibilityRoles.option,
+            accessory: optionAccessory != null ? optionAccessory : accessory,
+            blendStyles: styles == null ? void 0 : styles.optionBlendStyles,
+            compact: compact,
+            disabled: optionDisabled || disabled,
+            end: optionEnd != null ? optionEnd : end,
+            media: (_ref3 = optionMedia != null ? optionMedia : media) != null ? _ref3 : defaultMedia,
+            onPress: handleOptionPress,
+            selected: selected,
+            style: styles == null ? void 0 : styles.option,
+            styles: optionStyles,
+            type: type
+          }, optionProps), optionProps.value);
+        }) : /*#__PURE__*/_jsx(SelectEmptyDropdownContentsComponent, {
+          label: emptyOptionsLabel,
+          styles: emptyDropdownContentsStyles
+        })]
+      }))
     })
   });
 }));

package/esm/alpha/select/__stories__/AlphaSelect.stories.js

@@ -324,10 +324,10 @@ const CompactExample = () => {
     value: value
   });
 };
-const LabelVariantExample = () => {
+const InsideLabelVariantExample = () => {
   const [value, setValue] = useState('1');
   return /*#__PURE__*/_jsx(Select, {
-    label: "Single select - label variant inside",
+    label: "Inside label variant",
     labelVariant: "inside",
     onChange: setValue,
     options: exampleOptions,
@@ -720,6 +720,23 @@ const MultiSelectCompactExample = () => {
     value: value
   });
 };
+const MultiSelectInsideLabelVariantExample = () => {
+  const {
+    value,
+    onChange
+  } = useMultiSelect({
+    initialValue: ['1']
+  });
+  return /*#__PURE__*/_jsx(Select, {
+    label: "Multi select - inside label variant",
+    labelVariant: "inside",
+    onChange: onChange,
+    options: exampleOptions,
+    placeholder: "Empty value",
+    type: "multi",
+    value: value
+  });
+};
 const MultiSelectHideSelectAllExample = () => {
   const {
     value,
@@ -1186,8 +1203,8 @@ const SelectV3Screen = () => {
       title: "Compact",
       children: /*#__PURE__*/_jsx(CompactExample, {})
     }), /*#__PURE__*/_jsx(Example, {
-      title: "Label Variant - inside",
-      children: /*#__PURE__*/_jsx(LabelVariantExample, {})
+      title: "Compact with inside label variant",
+      children: /*#__PURE__*/_jsx(InsideLabelVariantExample, {})
     }), /*#__PURE__*/_jsx(Example, {
       title: "With Helper Text",
       children: /*#__PURE__*/_jsx(WithHelperTextExample, {})
@@ -1269,6 +1286,9 @@ const SelectV3Screen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       title: "Multi Select Compact",
       children: /*#__PURE__*/_jsx(MultiSelectCompactExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Multi Select Inside Label Variant",
+      children: /*#__PURE__*/_jsx(MultiSelectInsideLabelVariantExample, {})
     }), /*#__PURE__*/_jsx(Example, {
       title: "Multi Select Hide Select All",
       children: /*#__PURE__*/_jsx(MultiSelectHideSelectAllExample, {})

package/esm/buttons/__stories__/SlideButton.stories.js

@@ -9,7 +9,7 @@ import { Example, ExampleScreen } from '../../examples/ExampleScreen';
 import { Icon } from '../../icons';
 import { HStack, VStack } from '../../layout';
 import { Pressable } from '../../system';
-import { TextHeadline, TextLabel1, TextLabel2 } from '../../typography';
+import { Text } from '../../typography';
 import { SlideButton } from '../SlideButton';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SlideButtonExample = _ref => {
@@ -28,7 +28,8 @@ const SlideButtonExample = _ref => {
       gap: 1,
       justifyContent: "flex-end",
       paddingBottom: 2,
-      children: [/*#__PURE__*/_jsx(TextLabel1, {
+      children: [/*#__PURE__*/_jsx(Text, {
+        font: "label1",
         children: "Reset"
       }), /*#__PURE__*/_jsx(IconButton, {
         compact: true,
@@ -64,7 +65,8 @@ const CustomHandle = _ref2 => {
         height: "100%",
         padding: 2,
         pin: "right",
-        children: /*#__PURE__*/_jsx(TextLabel1, {
+        children: /*#__PURE__*/_jsx(Text, {
+          font: "label1",
           children: "\u27A1\uFE0F"
         })
       })
@@ -85,7 +87,8 @@ const CustomBackground = _ref3 => {
     height: "100%",
     justifyContent: "center",
     width: "100%",
-    children: /*#__PURE__*/_jsx(TextHeadline, {
+    children: /*#__PURE__*/_jsx(Text, {
+      font: "headline",
       children: "Slide me"
     })
   }));
@@ -132,11 +135,13 @@ export const SlideButtonStories = () => {
     }), /*#__PURE__*/_jsx(Example, {
       title: "Labels as nodes",
       children: /*#__PURE__*/_jsx(SlideButtonExample, {
-        checkedLabel: /*#__PURE__*/_jsx(TextLabel2, {
+        checkedLabel: /*#__PURE__*/_jsx(Text, {
           color: "fgInverse",
+          font: "label2",
           children: "Node checked label"
         }),
-        uncheckedLabel: /*#__PURE__*/_jsx(TextLabel2, {
+        uncheckedLabel: /*#__PURE__*/_jsx(Text, {
+          font: "label2",
           children: "Node label"
         })
       })

package/esm/carousel/__stories__/Carousel.stories.js

@@ -14,8 +14,7 @@ import { useTheme } from '../../hooks/useTheme';
 import { Box, HStack, VStack } from '../../layout';
 import { RemoteImage } from '../../media';
 import { Pressable } from '../../system/Pressable';
-import { Link, TextHeadline, TextLabel2 } from '../../typography';
-import { Text } from '../../typography/Text';
+import { Link, Text } from '../../typography';
 import { Carousel } from '../Carousel';
 import { CarouselItem } from '../CarouselItem';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
@@ -92,7 +91,8 @@ const sampleItems = [/*#__PURE__*/_jsx(SampleCard, {
 }, "9"), /*#__PURE__*/_jsx(SampleCard, {
   text: "Slide 10"
 }, "10")];
-const SeeAllComponent = () => /*#__PURE__*/_jsx(TextHeadline, {
+const SeeAllComponent = () => /*#__PURE__*/_jsx(Text, {
+  font: "headline",
   children: /*#__PURE__*/_jsx(Link, {
     to: "https://coinbase.com/",
     children: "See all"
@@ -459,8 +459,9 @@ const AnimatedExample = () => {
     return /*#__PURE__*/_jsx(Animated.View, {
       style: animatedStyle,
       children: /*#__PURE__*/_jsx(ContainedAssetCard, {
-        description: /*#__PURE__*/_jsx(TextLabel2, {
+        description: /*#__PURE__*/_jsx(Text, {
           color: "fgPositive",
+          font: "label2",
           numberOfLines: 2,
           children: "\u21976.37%"
         }),

package/esm/overlays/drawer/Drawer.js

@@ -1,8 +1,8 @@
 const _excluded = ["children", "pin", "onCloseComplete", "preventDismissGestures", "preventHardwareBackBehaviorAndroid", "hideHandleBar", "disableCapturePanGestureToDismiss", "onBlur", "verticalDrawerPercentageOfView", "handleBarAccessibilityLabel"];
 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, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
-import { Animated, Modal, Platform, StyleSheet, useWindowDimensions } from 'react-native';
+import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { Animated, Keyboard, Modal, Platform, StyleSheet, useWindowDimensions } from 'react-native';
 import { drawerAnimationDefaultDuration, MAX_OVER_DRAG } from '@coinbase/cds-common/animation/drawer';
 import { OverlayContentContext } from '@coinbase/cds-common/overlays/OverlayContentContext';
 import { horizontalDrawerPercentageOfView, verticalDrawerPercentageOfView as defaultVerticalDrawerPercentageOfView } from '@coinbase/cds-common/tokens/drawer';
@@ -103,8 +103,19 @@ export const Drawer = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Drawer(
 
   // leave 15% of the screenwidth as open area for menu drawer
   const horizontalDrawerWidth = useMemo(() => width * horizontalDrawerPercentageOfView + MAX_OVER_DRAG, [width]);
+  const [keyboardInset, setKeyboardInset] = useState(0);
+  useEffect(() => {
+    if (Platform.OS !== 'android') return;
+    const show = Keyboard.addListener('keyboardDidShow', e => setKeyboardInset(e.endCoordinates.height));
+    const hide = Keyboard.addListener('keyboardDidHide', () => setKeyboardInset(0));
+    return () => {
+      show.remove();
+      hide.remove();
+    };
+  }, []);
+
   // drawer will automatically size itself based on content, but will cap at 75% of viewport height (can override)
-  const verticalDrawerMaxHeight = useMemo(() => height * verticalDrawerPercentageOfView + MAX_OVER_DRAG, [height, verticalDrawerPercentageOfView]);
+  const verticalDrawerMaxHeight = useMemo(() => height * verticalDrawerPercentageOfView + MAX_OVER_DRAG - keyboardInset, [height, verticalDrawerPercentageOfView, keyboardInset]);
   const getPanGestureHandlers = !preventDismissGestures ? panGestureHandlers.panHandlers : undefined;
   const handleOverlayPress = useCallback(() => {
     if (!preventDismissGestures) {

package/esm/overlays/tray/Tray.js

@@ -1,4 +1,4 @@
-const _excluded = ["children", "title", "onVisibilityChange", "verticalDrawerPercentageOfView"];
+const _excluded = ["children", "header", "footer", "title", "onVisibilityChange", "verticalDrawerPercentageOfView"];
 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, { createContext, forwardRef, memo, useCallback, useContext, useEffect, useMemo, useState } from 'react';
@@ -16,6 +16,8 @@ export const TrayContext = /*#__PURE__*/createContext({
 export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_ref, ref) {
   let {
       children,
+      header,
+      footer,
       title,
       onVisibilityChange,
       verticalDrawerPercentageOfView = defaultVerticalDrawerPercentageOfView
@@ -30,7 +32,13 @@ export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_ref
     let {
       handleClose
     } = _ref2;
+    const content = typeof children === 'function' ? children({
+      handleClose
+    }) : children;
     return /*#__PURE__*/_jsxs(VStack, {
+      flexGrow: 1,
+      flexShrink: 1,
+      minHeight: 0,
       paddingTop: title ? 0 : 2,
       children: [title && (typeof title === 'string' ? /*#__PURE__*/_jsx(HStack, {
         alignItems: "center",
@@ -45,11 +53,15 @@ export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_ref
       }) : /*#__PURE__*/_jsx(Box, {
         onLayout: onTitleLayout,
         children: title
-      })), typeof children === 'function' ? children({
-        handleClose
-      }) : children]
+      })), header, /*#__PURE__*/_jsx(Box, {
+        flexGrow: 1,
+        flexShrink: 1,
+        minHeight: 0,
+        width: "100%",
+        children: content
+      }), footer]
     });
-  }, [children, onTitleLayout, title]);
+  }, [children, footer, header, onTitleLayout, title]);
   useEffect(() => {
     onVisibilityChange == null || onVisibilityChange('visible');
     return () => {

package/esm/visualizations/__stories__/ProgressCircle.stories.js

@@ -8,8 +8,7 @@ import { Icon } from '../../icons';
 import { Box, HStack, VStack } from '../../layout';
 import { RemoteImage } from '../../media';
 import { defaultTheme } from '../../themes/defaultTheme';
-import { TextTitle1 } from '../../typography';
-import { Text } from '../../typography/Text';
+import { Text } from '../../typography';
 import { theme } from '../../utils/testHelpers';
 import { DefaultProgressCircleContent } from '../DefaultProgressCircleContent';
 import { ProgressCircle } from '../ProgressCircle';
@@ -22,8 +21,9 @@ const CustomStyles = () => {
     children: [/*#__PURE__*/_jsxs(HStack, {
       gap: 2,
       children: [/*#__PURE__*/_jsx(ProgressCircle, {
-        contentNode: /*#__PURE__*/_jsx(TextTitle1, {
+        contentNode: /*#__PURE__*/_jsx(Text, {
           color: disabled ? 'fgMuted' : 'fgPrimary',
+          font: "title1",
           children: "40%"
         }),
         disabled: disabled,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "8.28.2",
+  "version": "8.29.0",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -154,7 +154,7 @@
     "react-native-svg": "^14.1.0"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.28.2",
+    "@coinbase/cds-common": "^8.29.0",
     "@coinbase/cds-icons": "^5.8.0",
     "@coinbase/cds-illustrations": "^4.29.0",
     "@coinbase/cds-lottie-files": "^3.3.3",