@coinbase/cds-mobile 9.2.2 → 9.3.1

package/esm/cards/UpsellCard.js

@@ -1,7 +1,9 @@
 import React, { isValidElement, memo } from 'react';
 import { upsellCardDefaultWidth, upsellCardMinHeight } from '@coinbase/cds-common/tokens/card';
-import { Button, IconButton } from '../buttons';
-import { HStack, VStack } from '../layout';
+import { Button } from '../buttons/Button';
+import { IconButton } from '../buttons/IconButton';
+import { HStack } from '../layout/HStack';
+import { VStack } from '../layout/VStack';
 import { Pressable } from '../system/Pressable';
 import { Text } from '../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/esm/cells/ContentCell.js

@@ -4,7 +4,9 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { memo, useMemo } from 'react';
 import { compactListHeight, listHeight } from '@coinbase/cds-common/tokens/cell';
 import { isProduction } from '@coinbase/cds-utils';
-import { Box, HStack, VStack } from '../layout';
+import { Box } from '../layout/Box';
+import { HStack } from '../layout/HStack';
+import { VStack } from '../layout/VStack';
 import { Text } from '../typography/Text';
 import { Cell } from './Cell';
 import { CellAccessory } from './CellAccessory';

package/esm/cells/ContentCellFallback.js

@@ -2,7 +2,8 @@ import React, { memo, useMemo } from 'react';
 import { StyleSheet, Text } from 'react-native';
 import { getRectWidthVariant } from '@coinbase/cds-common/utils/getRectWidthVariant';
 import { useTheme } from '../hooks/useTheme';
-import { Box, Fallback } from '../layout';
+import { Box } from '../layout/Box';
+import { Fallback } from '../layout/Fallback';
 import { ContentCell } from './ContentCell';
 import { condensedInnerSpacing, condensedOuterSpacing } from './ListCell';
 import { MediaFallback } from './MediaFallback';

package/esm/cells/ListCellFallback.js

@@ -6,8 +6,8 @@ import { StyleSheet, Text } from 'react-native';
 import { getRectWidthVariant } from '@coinbase/cds-common/utils/getRectWidthVariant';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
-import { VStack } from '../layout';
 import { Fallback } from '../layout/Fallback';
+import { VStack } from '../layout/VStack';
 import { Cell } from './Cell';
 import { CellAccessory } from './CellAccessory';
 import { condensedInnerSpacing, condensedOuterSpacing } from './ListCell';

package/esm/chips/Chip.js

@@ -4,8 +4,10 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { forwardRef, Fragment, memo } from 'react';
 import { chipMaxWidth } from '@coinbase/cds-common/tokens/chip';
 import { useComponentConfig } from '../hooks/useComponentConfig';
-import { Box, HStack } from '../layout';
-import { InvertedThemeProvider, Pressable } from '../system';
+import { Box } from '../layout/Box';
+import { HStack } from '../layout/HStack';
+import { Pressable } from '../system/Pressable';
+import { InvertedThemeProvider } from '../system/ThemeProvider';
 import { Text } from '../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**

package/esm/chips/InputChip.js

@@ -3,7 +3,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 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 } from 'react';
 import { useComponentConfig } from '../hooks/useComponentConfig';
-import { Icon } from '../icons';
+import { Icon } from '../icons/Icon';
 import { MediaChip } from './MediaChip';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const InputChip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {

package/esm/chips/SelectChip.js

@@ -8,8 +8,8 @@ import { useRotateAnimation } from '../animation/useRotateAnimation';
 import { SelectProvider } from '../controls/SelectContext';
 import { useSelect } from '../controls/useSelect';
 import { useA11y } from '../hooks/useA11y';
-import { Icon } from '../icons';
-import { Tray } from '../overlays';
+import { Icon } from '../icons/Icon';
+import { Tray } from '../overlays/tray/Tray';
 import { MediaChip } from './MediaChip';
 
 /**

package/esm/chips/TabbedChips.js

@@ -7,8 +7,9 @@ import { ScrollView } from 'react-native';
 import { useTabsContext } from '@coinbase/cds-common/tabs/TabsContext';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useHorizontalScrollToTarget } from '../hooks/useHorizontalScrollToTarget';
-import { Box, OverflowGradient } from '../layout';
-import { Tabs } from '../tabs';
+import { Box } from '../layout/Box';
+import { OverflowGradient } from '../layout/OverflowGradient';
+import { Tabs } from '../tabs/Tabs';
 import { MediaChip } from './MediaChip';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const TabComponent = _ref => {

package/esm/coachmark/Coachmark.js

@@ -3,11 +3,13 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 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 } from 'react';
 import { useWindowDimensions } from 'react-native';
-import { IconButton } from '../buttons';
+import { IconButton } from '../buttons/IconButton';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
-import { Box, HStack, VStack } from '../layout';
-import { InvertedThemeProvider } from '../system';
+import { Box } from '../layout/Box';
+import { HStack } from '../layout/HStack';
+import { VStack } from '../layout/VStack';
+import { InvertedThemeProvider } from '../system/ThemeProvider';
 import { Text } from '../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const Coachmark = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {

package/esm/controls/CheckboxCell.js

@@ -7,7 +7,9 @@ import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useLayout } from '../hooks/useLayout';
 import { useSelectionCellBorderStyle } from '../hooks/useSelectionCellBorderStyle';
 import { useTheme } from '../hooks/useTheme';
-import { Box, HStack, VStack } from '../layout';
+import { Box } from '../layout/Box';
+import { HStack } from '../layout/HStack';
+import { VStack } from '../layout/VStack';
 import { Pressable } from '../system/Pressable';
 import { Text } from '../typography/Text';
 import { Checkbox } from './Checkbox';

package/esm/controls/ControlGroup.js

@@ -4,7 +4,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { forwardRef, memo } from 'react';
 import { isDevelopment } from '@coinbase/cds-utils';
 import { useComponentConfig } from '../hooks/useComponentConfig';
-import { Group } from '../layout';
+import { Group } from '../layout/Group';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ControlGroupWithRef = /*#__PURE__*/forwardRef(function ControlGroup(_props, ref) {
   const mergedProps = useComponentConfig('ControlGroup', _props);

package/esm/controls/Radio.js

@@ -6,7 +6,7 @@ import { Animated, StyleSheet } from 'react-native';
 import { Circle, Svg } from 'react-native-svg';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
-import { Box } from '../layout';
+import { Box } from '../layout/Box';
 import { Interactable } from '../system/Interactable';
 import { Control } from './Control';
 import { jsx as _jsx } from "react/jsx-runtime";

package/esm/controls/RadioCell.js

@@ -7,7 +7,9 @@ import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useLayout } from '../hooks/useLayout';
 import { useSelectionCellBorderStyle } from '../hooks/useSelectionCellBorderStyle';
 import { useTheme } from '../hooks/useTheme';
-import { Box, HStack, VStack } from '../layout';
+import { Box } from '../layout/Box';
+import { HStack } from '../layout/HStack';
+import { VStack } from '../layout/VStack';
 import { Pressable } from '../system/Pressable';
 import { Text } from '../typography/Text';
 import { Radio } from './Radio';

package/esm/dates/DatePicker.js

@@ -5,7 +5,8 @@ import { forwardRef, memo, useCallback, useMemo, useRef, useState } from 'react'
 import { Button } from '../buttons/Button';
 import { InputIconButton } from '../controls/InputIconButton';
 import { useComponentConfig } from '../hooks/useComponentConfig';
-import { Box, VStack } from '../layout';
+import { Box } from '../layout/Box';
+import { VStack } from '../layout/VStack';
 import { Tray } from '../overlays/tray/Tray';
 import { StickyFooter } from '../sticky-footer/StickyFooter';
 import { Calendar } from './Calendar';

package/esm/motion/AnimatedCaret.js

@@ -6,7 +6,7 @@ import { Animated } from 'react-native';
 import { usePreviousValue } from '@coinbase/cds-common/hooks/usePreviousValue';
 import { animateRotateConfig } from '@coinbase/cds-common/motion/animatedCaret';
 import { convertMotionConfig } from '../animation/convertMotionConfig';
-import { Icon } from '../icons';
+import { Icon } from '../icons/Icon';
 import { HStack } from '../layout/HStack';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const useAnimatedCaretAnimation = () => {

package/esm/motion/ColorSurge.js

@@ -2,7 +2,7 @@ import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, u
 import { Animated } from 'react-native';
 import { colorSurgeEnterConfig, colorSurgeExitConfig } from '@coinbase/cds-common/motion/hint';
 import { convertMotionConfig } from '../animation/convertMotionConfig';
-import { Box } from '../layout';
+import { Box } from '../layout/Box';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Please consult with the motion team in #ask-motion before using this component.

package/esm/multi-content-module/MultiContentModule.js

@@ -2,9 +2,10 @@ const _excluded = ["pictogram", "title", "description", "children", "action", "o
 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, isValidElement, memo } from 'react';
-import { Button } from '../buttons';
-import { Pictogram } from '../illustrations';
-import { Box, VStack } from '../layout';
+import { Button } from '../buttons/Button';
+import { Pictogram } from '../illustrations/Pictogram';
+import { Box } from '../layout/Box';
+import { VStack } from '../layout/VStack';
 import { Text } from '../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const MultiContentModule = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function MultiContentModule(_ref, ref) {

package/esm/navigation/BrowserBar.js

@@ -3,7 +3,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 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, memo, useContext, useEffect, useState } from 'react';
 import { useComponentConfig } from '../hooks/useComponentConfig';
-import { HStack } from '../layout';
+import { HStack } from '../layout/HStack';
 import { NavBarEnd, NavBarStart } from './TopNavBar';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const BrowserBarContext = /*#__PURE__*/createContext({

package/esm/navigation/NavBarIconButton.js

@@ -2,7 +2,7 @@ const _excluded = ["name", "color", "height", "width", "size", "borderWidth", "b
 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, useContext, useEffect } from 'react';
-import { Icon } from '../icons';
+import { Icon } from '../icons/Icon';
 import { Pressable } from '../system/Pressable';
 import { BrowserBarContext } from './BrowserBar';
 import { TopNavBarContext } from './TopNavBar';

package/esm/navigation/NavigationTitleSelect.js

@@ -6,10 +6,10 @@ import { selectCellMobileSpacingConfig } from '@coinbase/cds-common/tokens/selec
 import { Cell } from '../cells/Cell';
 import { CellAccessory } from '../cells/CellAccessory';
 import { useComponentConfig } from '../hooks/useComponentConfig';
-import { Icon } from '../icons';
+import { Icon } from '../icons/Icon';
 import { HStack } from '../layout/HStack';
-import { Tray } from '../overlays';
-import { Pressable } from '../system';
+import { Tray } from '../overlays/tray/Tray';
+import { Pressable } from '../system/Pressable';
 import { Text } from '../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export const NavigationTitleSelect = /*#__PURE__*/memo(_props => {

package/esm/navigation/TopNavBar.js

@@ -7,7 +7,8 @@ import { usePreviousValue } from '@coinbase/cds-common/hooks/usePreviousValue';
 import { zIndex } from '@coinbase/cds-common/tokens/zIndex';
 import { Collapsible } from '../collapsible/Collapsible';
 import { useComponentConfig } from '../hooks/useComponentConfig';
-import { HStack, VStack } from '../layout';
+import { HStack } from '../layout/HStack';
+import { VStack } from '../layout/VStack';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const TopNavBarContext = /*#__PURE__*/React.createContext({
   isWithinTopNavBar: false

package/esm/numbers/RollingNumber/DefaultRollingNumberValueSection.js

@@ -3,7 +3,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 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, useCallback, useMemo, useState } from 'react';
 import Animated from 'react-native-reanimated';
-import { HStack } from '../../layout';
+import { HStack } from '../../layout/HStack';
 import { Text } from '../../typography/Text';
 import { DefaultRollingNumberDigit } from './DefaultRollingNumberDigit';
 import { DefaultRollingNumberMask } from './DefaultRollingNumberMask';

package/esm/numpad/Numpad.js

@@ -5,8 +5,9 @@ import React, { forwardRef, memo, useCallback, useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
-import { Icon } from '../icons';
-import { HStack, VStack } from '../layout';
+import { Icon } from '../icons/Icon';
+import { HStack } from '../layout/HStack';
+import { VStack } from '../layout/VStack';
 import { Pressable } from '../system/Pressable';
 import { Text } from '../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/esm/overlays/Alert.js

@@ -1,9 +1,9 @@
 import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo } from 'react';
 import { Modal as RNModal } from 'react-native';
-import { Button } from '../buttons';
+import { Button } from '../buttons/Button';
 import { useComponentConfig } from '../hooks/useComponentConfig';
-import { Pictogram } from '../illustrations';
-import { Box } from '../layout';
+import { Pictogram } from '../illustrations/Pictogram';
+import { Box } from '../layout/Box';
 import { Text } from '../typography/Text';
 import { Overlay } from './overlay/Overlay';
 import { useAlertAnimation } from './useAlertAnimation';

package/esm/overlays/Toast.js

@@ -4,10 +4,11 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle } from 'react';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { zIndex } from '@coinbase/cds-common/tokens/zIndex';
-import { Button } from '../buttons';
+import { Button } from '../buttons/Button';
 import { useA11y } from '../hooks/useA11y';
 import { useComponentConfig } from '../hooks/useComponentConfig';
-import { Box, HStack } from '../layout';
+import { Box } from '../layout/Box';
+import { HStack } from '../layout/HStack';
 import { ColorSurge } from '../motion/ColorSurge';
 import { Text } from '../typography/Text';
 import { useToastAnimation } from './useToastAnimation';

package/esm/overlays/modal/Modal.js

@@ -8,7 +8,7 @@ import { usePreviousValue } from '@coinbase/cds-common/hooks/usePreviousValue';
 import { ModalContext } from '@coinbase/cds-common/overlays/ModalContext';
 import { OverlayContentContext } from '@coinbase/cds-common/overlays/OverlayContentContext';
 import { useComponentConfig } from '../../hooks/useComponentConfig';
-import { VStack } from '../../layout';
+import { VStack } from '../../layout/VStack';
 import { useModalAnimation } from './useModalAnimation';
 import { jsx as _jsx } from "react/jsx-runtime";
 const overlayContentContextValue = {

package/esm/overlays/modal/ModalHeader.js

@@ -3,7 +3,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 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 from 'react';
 import { useModalContext } from '@coinbase/cds-common/overlays/ModalContext';
-import { IconButton } from '../../buttons';
+import { IconButton } from '../../buttons/IconButton';
 import { useComponentConfig } from '../../hooks/useComponentConfig';
 import { Box } from '../../layout/Box';
 import { HStack } from '../../layout/HStack';

package/esm/overlays/tooltip/InternalTooltip.js

@@ -1,4 +1,4 @@
-const _excluded = ["subjectLayout", "content", "placement", "opacity", "animateIn", "translateY", "gap", "yShiftByStatusBarHeight", "testID", "onAccessibilityEscape", "onAccessibilityTap", "elevation"];
+const _excluded = ["subjectLayout", "content", "placement", "opacity", "animateIn", "translateY", "gap", "yShiftByStatusBarHeight", "testID", "onAccessibilityEscape", "onAccessibilityTap", "elevation", "background", "borderRadius", "maxWidth", "paddingX", "paddingY", "color", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight"];
 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, useRef } from 'react';
@@ -23,7 +23,18 @@ export const InternalTooltip = /*#__PURE__*/memo(function InternalTooltip(_ref)
       testID,
       onAccessibilityEscape,
       onAccessibilityTap,
-      elevation
+      elevation,
+      background = 'bg',
+      borderRadius = 200,
+      maxWidth = tooltipMaxWidth,
+      paddingX = tooltipPaddingX,
+      paddingY = tooltipPaddingY,
+      color = 'fg',
+      font = 'label2',
+      fontFamily,
+      fontSize,
+      fontWeight,
+      lineHeight
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const theme = useTheme();
@@ -61,13 +72,13 @@ export const InternalTooltip = /*#__PURE__*/memo(function InternalTooltip(_ref)
     style: outerTooltipStyles,
     children: /*#__PURE__*/_jsx(Box, _extends({
       animated: true,
-      background: "bg",
-      borderRadius: 200,
+      background: background,
+      borderRadius: borderRadius,
       elevation: elevation,
-      maxWidth: tooltipMaxWidth,
+      maxWidth: maxWidth,
       opacity: opacity,
-      paddingX: tooltipPaddingX,
-      paddingY: tooltipPaddingY,
+      paddingX: paddingX,
+      paddingY: paddingY,
       style: {
         transform: [{
           translateY
@@ -76,8 +87,12 @@ export const InternalTooltip = /*#__PURE__*/memo(function InternalTooltip(_ref)
       testID: testID
     }, props, {
       children: typeof content === 'string' ? /*#__PURE__*/_jsx(Text, {
-        color: "fg",
-        font: "label2",
+        color: color,
+        font: font,
+        fontFamily: fontFamily,
+        fontSize: fontSize,
+        fontWeight: fontWeight,
+        lineHeight: lineHeight,
         children: content
       }) : content
     }))

package/esm/overlays/tooltip/Tooltip.js

@@ -1,6 +1,9 @@
+const _excluded = ["children", "content", "placement", "onCloseTooltip", "onOpenTooltip", "gap", "yShiftByStatusBarHeight", "testID", "accessibilityLabel", "accessibilityHint", "accessibilityLabelForContent", "accessibilityHintForContent", "accessibilityState", "visible", "invertColorScheme", "elevation", "openDelay", "closeDelay", "background", "borderRadius", "maxWidth", "paddingX", "paddingY", "color", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight"];
 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, { Fragment, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Modal as RNModal, TouchableOpacity, View } from 'react-native';
+import { tooltipMaxWidth, tooltipPaddingX, tooltipPaddingY } from '@coinbase/cds-common/tokens/tooltip';
 import { useComponentConfig } from '../../hooks/useComponentConfig';
 import { InvertedThemeProvider } from '../../system/ThemeProvider';
 import { InternalTooltip } from './InternalTooltip';
@@ -9,25 +12,37 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const Tooltip = /*#__PURE__*/memo(_props => {
   const mergedProps = useComponentConfig('Tooltip', _props);
   const {
-    children,
-    content,
-    placement = 'top',
-    onCloseTooltip,
-    onOpenTooltip,
-    gap = 1,
-    yShiftByStatusBarHeight,
-    testID,
-    accessibilityLabel,
-    accessibilityHint,
-    accessibilityLabelForContent,
-    accessibilityHintForContent,
-    accessibilityState,
-    visible,
-    invertColorScheme = true,
-    elevation,
-    openDelay,
-    closeDelay
-  } = mergedProps;
+      children,
+      content,
+      placement = 'top',
+      onCloseTooltip,
+      onOpenTooltip,
+      gap = 1,
+      yShiftByStatusBarHeight,
+      testID,
+      accessibilityLabel,
+      accessibilityHint,
+      accessibilityLabelForContent,
+      accessibilityHintForContent,
+      accessibilityState,
+      visible,
+      invertColorScheme = true,
+      elevation,
+      openDelay,
+      closeDelay,
+      background = 'bg',
+      borderRadius = 200,
+      maxWidth = tooltipMaxWidth,
+      paddingX = tooltipPaddingX,
+      paddingY = tooltipPaddingY,
+      color = 'fg',
+      font = 'label2',
+      fontFamily,
+      fontSize,
+      fontWeight,
+      lineHeight
+    } = mergedProps,
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const subjectRef = useRef(null);
   const [isOpen, setIsOpen] = useState(false);
   const isVisible = visible !== false && isOpen;
@@ -138,16 +153,27 @@ export const Tooltip = /*#__PURE__*/memo(_props => {
       }), /*#__PURE__*/_jsx(WrapperComponent, {
         children: /*#__PURE__*/_jsx(InternalTooltip, _extends({
           animateIn: animateIn,
+          background: background,
+          borderRadius: borderRadius,
+          color: color,
           content: content,
           elevation: elevation,
+          font: font,
+          fontFamily: fontFamily,
+          fontSize: fontSize,
+          fontWeight: fontWeight,
           gap: gap,
+          lineHeight: lineHeight,
+          maxWidth: maxWidth,
           opacity: opacity,
+          paddingX: paddingX,
+          paddingY: paddingY,
           placement: placement,
           subjectLayout: subjectLayout,
           testID: testID,
           translateY: translateY,
           yShiftByStatusBarHeight: yShiftByStatusBarHeight
-        }, accessibilityPropsForContent))
+        }, props, accessibilityPropsForContent))
       })]
     })]
   });

package/esm/overlays/tray/Tray.js

@@ -7,7 +7,8 @@ import { useWindowDimensions } from 'react-native';
 import { MAX_OVER_DRAG } from '@coinbase/cds-common/animation/drawer';
 import { verticalDrawerPercentageOfView as defaultVerticalDrawerPercentageOfView } from '@coinbase/cds-common/tokens/drawer';
 import { useComponentConfig } from '../../hooks/useComponentConfig';
-import { Box, VStack } from '../../layout';
+import { Box } from '../../layout/Box';
+import { VStack } from '../../layout/VStack';
 import { Text } from '../../typography/Text';
 import { Drawer } from '../drawer/Drawer';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/esm/section-header/SectionHeader.js

@@ -2,8 +2,9 @@ const _excluded = ["title", "start", "icon", "iconActive", "testID", "balance",
 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 } from 'react';
-import { Icon } from '../icons';
-import { HStack, VStack } from '../layout';
+import { Icon } from '../icons/Icon';
+import { HStack } from '../layout/HStack';
+import { VStack } from '../layout/VStack';
 import { Text } from '../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const SectionHeader = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function SectionHeader(_ref, ref) {

package/esm/stepper/DefaultStepperStepHorizontal.js

@@ -3,7 +3,8 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 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, useMemo } from 'react';
 import { containsStep, isStepVisited } from '@coinbase/cds-common/stepper/utils';
-import { HStack, VStack } from '../layout';
+import { HStack } from '../layout/HStack';
+import { VStack } from '../layout/VStack';
 import { DefaultStepperProgressHorizontal } from './DefaultStepperProgressHorizontal';
 import { DefaultStepperSubstepContainerHorizontal } from './DefaultStepperSubstepContainerHorizontal';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/esm/stepper/DefaultStepperStepVertical.js

@@ -4,7 +4,8 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import { memo, useMemo } from 'react';
 import { containsStep, isStepVisited } from '@coinbase/cds-common/stepper/utils';
 import { useTheme } from '../hooks/useTheme';
-import { HStack, VStack } from '../layout';
+import { HStack } from '../layout/HStack';
+import { VStack } from '../layout/VStack';
 import { DefaultStepperIconVertical } from './DefaultStepperIconVertical';
 import { DefaultStepperLabelVertical } from './DefaultStepperLabelVertical';
 import { DefaultStepperProgressVertical } from './DefaultStepperProgressVertical';

package/esm/stepper/DefaultStepperSubstepContainerHorizontal.js

@@ -2,7 +2,7 @@ const _excluded = ["step", "parentStep", "activeStepId", "depth", "active", "vis
 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 } from 'react';
-import { HStack } from '../layout';
+import { HStack } from '../layout/HStack';
 import { horizontalStepGap } from './Stepper';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const DefaultStepperSubstepContainerHorizontal = /*#__PURE__*/memo(_ref => {

package/esm/stepper/DefaultStepperSubstepContainerVertical.js

@@ -2,7 +2,7 @@ const _excluded = ["step", "parentStep", "activeStepId", "depth", "active", "vis
 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 } from 'react';
-import { VStack } from '../layout';
+import { VStack } from '../layout/VStack';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const DefaultStepperSubstepContainerVertical = /*#__PURE__*/memo(_ref => {
   let {

package/esm/sticky-footer/StickyFooter.js

@@ -3,7 +3,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 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 } from 'react';
 import { View } from 'react-native';
-import { Box } from '../layout';
+import { Box } from '../layout/Box';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const StickyFooter = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forwardedRef) => {
   let {

package/esm/system/__stories__/componentConfigStickerSheet/StickerSheet.js

@@ -19,6 +19,7 @@ import { SelectChipExample } from './examples/SelectChip';
 import { TabsExample } from './examples/Tabs';
 import { TagExample } from './examples/Tag';
 import { TextInputExample } from './examples/TextInput';
+import { TooltipExample } from './examples/Tooltip';
 import { Container } from './Container';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const StickerSheet = /*#__PURE__*/memo(() => {
@@ -91,6 +92,9 @@ export const StickerSheet = /*#__PURE__*/memo(() => {
         }), /*#__PURE__*/_jsx(Container, {
           title: "Coachmark",
           children: /*#__PURE__*/_jsx(CoachmarkExample, {})
+        }), /*#__PURE__*/_jsx(Container, {
+          title: "Tooltip",
+          children: /*#__PURE__*/_jsx(TooltipExample, {})
         })]
       })]
     })

package/esm/system/__stories__/componentConfigStickerSheet/customComponentConfig.js

@@ -48,6 +48,8 @@ export const customComponentConfig = {
     controlColor: props.checked ? 'bgAlternate' : 'fg'
   }),
   Tooltip: {
+    background: 'bgSecondary',
+    font: 'body',
     invertColorScheme: false
   },
   Radio: props => ({

package/esm/system/__stories__/componentConfigStickerSheet/examples/Tooltip.js

@@ -0,0 +1,20 @@
+import React, { memo } from 'react';
+import { View } from 'react-native';
+import { Button } from '../../../../buttons/Button';
+import { Tooltip } from '../../../../overlays/tooltip/Tooltip';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const TooltipExample = /*#__PURE__*/memo(() => {
+  return /*#__PURE__*/_jsx(Tooltip, {
+    accessibilityHint: "Additional information about this action",
+    accessibilityLabel: "Show tooltip",
+    content: "Additional information about this action",
+    children: /*#__PURE__*/_jsx(View, {
+      accessibilityElementsHidden: true,
+      pointerEvents: "none",
+      children: /*#__PURE__*/_jsx(Button, {
+        variant: "secondary",
+        children: "Show Tooltip"
+      })
+    })
+  });
+});