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

package/esm/system/__stories__/AndroidNavigationBar.stories.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Button } from '../../buttons';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { useTheme } from '../../hooks/useTheme';
+import { VStack } from '../../layout/VStack';
+import { Text } from '../../typography/Text';
+import { AndroidNavigationBar } from '../AndroidNavigationBar';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ThemeDemo = _ref => {
+  let {
+    colorScheme
+  } = _ref;
+  const theme = useTheme();
+  return /*#__PURE__*/_jsxs(VStack, {
+    background: "bg",
+    gap: 2,
+    padding: 2,
+    children: [/*#__PURE__*/_jsx(AndroidNavigationBar, {}), /*#__PURE__*/_jsxs(Text, {
+      font: "title3",
+      children: ["Active Color Scheme: ", theme.activeColorScheme]
+    }), /*#__PURE__*/_jsx(Text, {
+      color: "fgMuted",
+      font: "body",
+      children: "The Android navigation bar should match the theme background color."
+    }), /*#__PURE__*/_jsxs(VStack, {
+      gap: 1,
+      children: [/*#__PURE__*/_jsx(Button, {
+        variant: "primary",
+        children: "Primary Button"
+      }), /*#__PURE__*/_jsx(Button, {
+        variant: "secondary",
+        children: "Secondary Button"
+      })]
+    })]
+  });
+};
+const AndroidNavigationBarScreen = () => {
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(Example, {
+      title: "About AndroidNavigationBar",
+      children: /*#__PURE__*/_jsxs(VStack, {
+        gap: 2,
+        padding: 2,
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "body",
+          children: "AndroidNavigationBar is a side-effect only component that renders null. When mounted, it updates the Android system navigation bar (bottom bar) colors to match the active CDS theme."
+        }), /*#__PURE__*/_jsx(Text, {
+          color: "fgMuted",
+          font: "caption",
+          children: "Note: Only works on Android API 26+ (Android 8.0+). On iOS or older Android versions, the component has no effect."
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Light Theme",
+      children: /*#__PURE__*/_jsx(ThemeDemo, {
+        colorScheme: "light"
+      })
+    })]
+  });
+};
+export default AndroidNavigationBarScreen;

package/esm/system/__stories__/Palette.stories.js

@@ -18,9 +18,11 @@ const Palette = _ref => {
       let [name, value] = _ref2;
       return /*#__PURE__*/_jsx(Box, {
         alignItems: "center",
-        dangerouslySetBackground: theme.color[name],
         height: 100,
         justifyContent: "center",
+        style: {
+          backgroundColor: theme.color[name]
+        },
         width: "50%",
         children: /*#__PURE__*/_jsxs(VStack, {
           background: "bg",

package/esm/system/__stories__/Pressable.stories.js

@@ -138,9 +138,11 @@ const PressableScreen = () => {
             accessibilityRole: "button",
             background: color,
             children: /*#__PURE__*/_jsx(Text, {
-              dangerouslySetColor: textColor,
               font: "body",
               padding: 1,
+              style: {
+                color: textColor
+              },
               children: color
             })
           }, color);
@@ -161,9 +163,11 @@ const PressableScreen = () => {
             accessibilityRole: "button",
             background: color,
             children: /*#__PURE__*/_jsx(Text, {
-              dangerouslySetColor: textColor,
               font: "body",
               padding: 1,
+              style: {
+                color: textColor
+              },
               children: color
             })
           }, color);

package/esm/system/__stories__/Spectrum.stories.js

@@ -21,11 +21,15 @@ const SpectrumScreen = () => {
               background
             });
             return /*#__PURE__*/_jsx(VStack, {
-              dangerouslySetBackground: background,
+              style: {
+                backgroundColor: background
+              },
               children: /*#__PURE__*/_jsx(Text, {
                 align: "center",
-                dangerouslySetColor: foreground,
                 font: "caption",
+                style: {
+                  color: foreground
+                },
                 children: paletteValue
               })
             }, paletteValue);

package/esm/tabs/TabLabel.js

@@ -80,18 +80,18 @@ export const TabLabel = /*#__PURE__*/memo(_ref => {
   return /*#__PURE__*/_jsxs(HStack, {
     alignItems: "center",
     children: [shouldMeasureElement ? /*#__PURE__*/_jsxs(View, {
-      children: [/*#__PURE__*/_jsx(TextElement, _extends({}, props, {
+      children: [/*#__PURE__*/_jsx(TextElement, _extends({
         color: color,
         style: dynamicStyles
-      })), /*#__PURE__*/_jsx(Text, _extends({}, props, {
+      }, props)), /*#__PURE__*/_jsx(Text, _extends({
         "aria-hidden": true,
         font: "title3",
         style: styles.hiddenElement
-      }))]
-    }) : /*#__PURE__*/_jsx(TextElement, _extends({}, props, {
+      }, props))]
+    }) : /*#__PURE__*/_jsx(TextElement, _extends({
       color: color,
       style: dynamicStyles
-    })), /*#__PURE__*/_jsx(Animated.View, {
+    }, props)), /*#__PURE__*/_jsx(Animated.View, {
       style: dotStyles.container,
       children: /*#__PURE__*/_jsx(Animated.View, {
         style: dotStyles.inner,

package/esm/tabs/Tabs.js

@@ -24,7 +24,9 @@ const TabContainer = _ref => {
       registerRef
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  const refCallback = useCallback(ref => ref && registerRef(id, ref), [id, registerRef]);
+  const refCallback = useCallback(ref => {
+    if (ref) registerRef(id, ref);
+  }, [id, registerRef]);
   return /*#__PURE__*/_jsx(View, _extends({
     ref: refCallback
   }, props));
@@ -158,6 +160,7 @@ export const TabsActiveIndicator = _ref3 => {
   const isFirstRenderWithWidth = previousActiveTabRect.current.width === 0 && activeTabRect.width > 0;
   if (previousActiveTabRect.current !== activeTabRect) {
     previousActiveTabRect.current = activeTabRect;
+    // TODO: writing to shared value during render causes a reanimated warning which we have to suppress in jest setup
     animatedTabRect.value = isFirstRenderWithWidth ? newActiveTabRect : withSpring(newActiveTabRect, tabsSpringConfig);
   }
   const animatedBoxStyle = useAnimatedStyle(() => ({

package/esm/tabs/__stories__/SegmentedTabs.stories.js

@@ -1,7 +1,7 @@
 const _excluded = ["title", "defaultActiveTab"];
 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; }
 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); }
-import React, { memo, useCallback, useEffect, useState } from 'react';
+import { memo, useCallback, useEffect, useState } from 'react';
 import { Pressable, ScrollView } from 'react-native';
 import { interpolateColor, runOnJS, useAnimatedReaction, useSharedValue, withSpring } from 'react-native-reanimated';
 import { useTabsContext } from '@coinbase/cds-common/tabs/TabsContext';
@@ -285,8 +285,7 @@ const SegmentedTabsScreen = () => /*#__PURE__*/_jsxs(ExampleScreen, {
     gap: 2,
     padding: 3,
     tabs: basicSegments,
-    title: "With Padding",
-    width: "fit-content"
+    title: "With Padding"
   }), /*#__PURE__*/_jsx(SegmentedTabsExample, {
     borderRadius: 300,
     defaultActiveTab: basicSegments[0],
@@ -322,8 +321,7 @@ const IconLabelsExample = () => {
       }
     },
     tabs: iconSegments,
-    title: "Icon Labels",
-    width: "fit-content"
+    title: "Icon Labels"
   });
 };
 export default SegmentedTabsScreen;

package/esm/tabs/hooks/useDotAnimation.js

@@ -2,9 +2,30 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import { useCallback, useRef } from 'react';
 import { Animated } from 'react-native';
 import { animateDotOpacityConfig, animateDotWidthConfig, dotHidden, dotVisible } from '@coinbase/cds-common/animation/dot';
-import { getDotSize } from '@coinbase/cds-common/tokens/dot';
 import { convertMotionConfig } from '../../animation/convertMotionConfig';
 
+/**
+ * Fixed widths to use to achieve an animated in/out effect on the Dot component
+ */
+const dotSizeTokens = {
+  s: 28,
+  m: 36,
+  l: 48
+};
+/**
+ * Returns the appropriate dot container width based on the notification count.
+ * Width increases to accommodate more digits (1-digit, 2-digit, 3+ digits).
+ *
+ * @param count - The notification count to determine width for
+ * @returns The pixel width for the dot container
+ */
+const getDotSize = count => {
+  if (!count || count < 10) return dotSizeTokens.s;
+  if (count >= 10 && count < 100) return dotSizeTokens.m;
+  if (count >= 100) return dotSizeTokens.l;
+  return dotSizeTokens.s;
+};
+
 // opacity animation
 const opacityInConfig = convertMotionConfig(_extends({}, animateDotOpacityConfig, {
   toValue: dotVisible,
@@ -24,6 +45,37 @@ const scaleOutConfig = convertMotionConfig(_extends({}, animateDotWidthConfig, {
   toValue: 0,
   fromValue: getDotSize()
 }));
+
+/**
+ * Hook that provides animated values and animation functions for dot badge transitions.
+ *
+ * Used to animate the appearance/disappearance of notification dot badges in tab labels.
+ * Runs parallel opacity (fade) and width (scale) animations for smooth enter/exit effects.
+ *
+ * @returns Object containing:
+ * - `opacity` - Animated.Value controlling the dot's opacity (0 = hidden, 1 = visible)
+ * - `width` - Animated.Value controlling the dot container's width (0 = collapsed, getDotSize(count) = expanded)
+ * - `animateIn` - Triggers the enter animation when a dot badge should appear
+ * - `animateOut` - Triggers the exit animation when a dot badge should disappear
+ *
+ * @example
+ * ```tsx
+ * const { opacity, width, animateIn, animateOut } = useDotAnimation();
+ *
+ * useEffect(() => {
+ *   if (count > 0) animateIn(count);
+ *   else animateOut(count);
+ * }, [count]);
+ *
+ * return (
+ *   <Animated.View style={{ width }}>
+ *     <Animated.View style={{ opacity }}>
+ *       <DotCount count={count} />
+ *     </Animated.View>
+ *   </Animated.View>
+ * );
+ * ```
+ */
 export const useDotAnimation = () => {
   const opacity = useRef(new Animated.Value(dotHidden)).current;
   const width = useRef(new Animated.Value(dotHidden)).current;

package/esm/tag/Tag.js

@@ -44,12 +44,14 @@ export const Tag = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, forwardedR
     alignItems: alignItems,
     background: "bg",
     borderRadius: tagBorderRadiusMap[intent],
-    dangerouslySetBackground: backgroundColor,
     flexDirection: flexDirection,
     gap: gap,
     justifyContent: justifyContent,
     paddingX: tagHorizontalSpacing[intent],
     paddingY: paddingY,
+    style: {
+      backgroundColor
+    },
     testID: testID
   }, props, {
     children: [start ? start : startIcon ? /*#__PURE__*/_jsx(Icon, {
@@ -58,9 +60,11 @@ export const Tag = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, forwardedR
       name: startIcon,
       size: "xs"
     }) : null, /*#__PURE__*/_jsx(Text, {
-      dangerouslySetColor: color,
       font: tagFontMap[intent],
       numberOfLines: 1,
+      style: {
+        color
+      },
       testID: testID + "--text",
       children: children
     }), end ? end : endIcon ? /*#__PURE__*/_jsx(Icon, {

package/esm/tour/DefaultTourMask.js

@@ -1,7 +1,9 @@
 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); }
 import React, { memo, useEffect, useMemo, useState } from 'react';
+import { Platform } from 'react-native';
 import { Defs, Mask, Rect as NativeRect, Svg } from 'react-native-svg';
 import { defaultRect } from '@coinbase/cds-common/types/Rect';
+import { useDimensions } from '../hooks/useDimensions';
 import { useTheme } from '../hooks/useTheme';
 import { Box } from '../layout';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -13,6 +15,9 @@ export const DefaultTourMask = /*#__PURE__*/memo(_ref => {
   } = _ref;
   const [rect, setRect] = useState(defaultRect);
   const theme = useTheme();
+  const {
+    statusBarHeight
+  } = useDimensions();
   const overlayFillRgba = theme.color.bgOverlay;
   const defaultPadding = theme.space[2];
 
@@ -25,13 +30,23 @@ export const DefaultTourMask = /*#__PURE__*/memo(_ref => {
     y: rect.y - 0.5 * paddingValue
   }), [rect, paddingValue]);
   useEffect(() => {
-    activeTourStepTarget == null || activeTourStepTarget.measureInWindow((x, y, width, height) => setRect({
-      x,
-      y,
-      width,
-      height
-    }));
-  }, [activeTourStepTarget]);
+    activeTourStepTarget == null || activeTourStepTarget.measureInWindow((x, y, width, height) => {
+      // On Android, measureInWindow returns coordinates relative to the app's visible area.
+      // The Modal's coordinate system starts from the screen top (y=0 at very top of display).
+      // In edge-to-edge mode (statusBarHeight > 0), the app extends behind the status bar,
+      // and measureInWindow returns y relative to below the status bar. We need to ADD
+      // statusBarHeight to convert to screen coordinates for the Modal.
+      // In non-edge-to-edge mode (statusBarHeight === 0), measureInWindow returns y from
+      // screen top, but the Modal still starts from screen top, so no adjustment is needed.
+      const adjustedY = Platform.OS === 'ios' ? y : y + statusBarHeight;
+      setRect({
+        x,
+        y: adjustedY,
+        width,
+        height
+      });
+    });
+  }, [activeTourStepTarget, statusBarHeight]);
   return /*#__PURE__*/_jsx(Box, {
     height: "100%",
     width: "100%",

package/esm/tour/Tour.js

@@ -1,12 +1,13 @@
 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); }
 import React, { useCallback, useMemo, useRef } from 'react';
-import { Modal, StyleSheet, View } from 'react-native';
+import { Modal, Platform, StyleSheet, View } from 'react-native';
 import { OverlayContentContext } from '@coinbase/cds-common/overlays/OverlayContentContext';
 import { TourContext } from '@coinbase/cds-common/tour/TourContext';
 import { useTour } from '@coinbase/cds-common/tour/useTour';
 import { arrow as arrowMiddleware, autoPlacement, offset, shift, useFloating } from '@floating-ui/react-native';
 import { animated, config as springConfig, useSpring } from '@react-spring/native';
 import { useComponentConfig } from '../hooks/useComponentConfig';
+import { useDimensions } from '../hooks/useDimensions';
 import { useTheme } from '../hooks/useTheme';
 import { DefaultTourMask } from './DefaultTourMask';
 import { DefaultTourStepArrow } from './DefaultTourStepArrow';
@@ -41,6 +42,9 @@ const TourComponent = _props => {
     testID
   } = mergedProps;
   const theme = useTheme();
+  const {
+    statusBarHeight
+  } = useDimensions();
   const defaultTourStepOffset = theme.space[3];
   const defaultTourStepShiftPadding = theme.space[4];
   const tourStepArrowRef = useRef(null);
@@ -110,9 +114,17 @@ const TourComponent = _props => {
 
   const handleActiveTourStepTargetChange = useCallback(target => {
     target == null || target.measureInWindow((x, y, width, height) => {
+      // On Android, measureInWindow returns coordinates relative to the app's visible area.
+      // The Modal's coordinate system starts from the screen top (y=0 at very top of display).
+      // In edge-to-edge mode (statusBarHeight > 0), the app extends behind the status bar,
+      // and measureInWindow returns y relative to below the status bar. We need to ADD
+      // statusBarHeight to convert to screen coordinates for the Modal.
+      // In non-edge-to-edge mode (statusBarHeight === 0), measureInWindow returns y from
+      // screen top, but the Modal still starts from screen top, so no adjustment is needed.
+      const adjustedY = Platform.OS === 'ios' ? y : y + statusBarHeight;
       refs.setReference({
         measure: callback => {
-          callback(x, y, width, height);
+          callback(x, adjustedY, width, height);
           void animationApi.start({
             to: {
               opacity: 1
@@ -123,7 +135,7 @@ const TourComponent = _props => {
       });
     });
     setActiveTourStepTarget(target);
-  }, [animationApi, refs, setActiveTourStepTarget]);
+  }, [animationApi, refs, setActiveTourStepTarget, statusBarHeight]);
   return /*#__PURE__*/_jsx(OverlayContentContext.Provider, {
     value: overlayContentContextValue,
     children: /*#__PURE__*/_jsxs(TourContext.Provider, {

package/esm/tour/TourStep.js

@@ -20,7 +20,11 @@ export const TourStep = _ref => {
     activeTourStep,
     setActiveTourStepTarget
   } = useTourContext();
-  const refCallback = useCallback(ref => (activeTourStep == null ? void 0 : activeTourStep.id) === id && ref && setActiveTourStepTarget(ref), [activeTourStep, id, setActiveTourStepTarget]);
+  const refCallback = useCallback(ref => {
+    if ((activeTourStep == null ? void 0 : activeTourStep.id) === id && ref) {
+      setActiveTourStepTarget(ref);
+    }
+  }, [activeTourStep, id, setActiveTourStepTarget]);
   return /*#__PURE__*/_jsx(View, _extends({
     ref: refCallback,
     collapsable: false

package/esm/typography/Text.js

@@ -1,4 +1,4 @@
-const _excluded = ["children", "style", "animated", "disabled", "mono", "underline", "tabularNumbers", "numberOfLines", "ellipsize", "noWrap", "testID", "dangerouslySetColor", "dangerouslySetBackground", "display", "position", "overflow", "zIndex", "gap", "columnGap", "rowGap", "justifyContent", "alignContent", "alignItems", "alignSelf", "flexDirection", "flexWrap", "color", "background", "borderColor", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "borderTopWidth", "borderEndWidth", "borderBottomWidth", "borderStartWidth", "elevation", "borderWidth", "borderRadius", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight", "align", "textDecorationStyle", "textDecorationLine", "textTransform", "padding", "paddingX", "paddingY", "paddingTop", "paddingBottom", "paddingStart", "paddingEnd", "margin", "marginX", "marginY", "marginTop", "marginBottom", "marginStart", "marginEnd", "userSelect", "width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight", "aspectRatio", "top", "bottom", "left", "right", "transform", "flexBasis", "flexShrink", "flexGrow", "opacity", "renderEmptyNode"];
+const _excluded = ["children", "style", "animated", "disabled", "mono", "underline", "tabularNumbers", "numberOfLines", "ellipsize", "noWrap", "testID", "dangerouslySetColor", "dangerouslySetBackground", "display", "position", "overflow", "zIndex", "gap", "columnGap", "rowGap", "justifyContent", "alignContent", "alignItems", "alignSelf", "flexDirection", "flexWrap", "color", "background", "borderColor", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "borderTopWidth", "borderEndWidth", "borderBottomWidth", "borderStartWidth", "elevation", "borderWidth", "borderRadius", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight", "align", "textDecorationStyle", "textDecorationLine", "textTransform", "padding", "paddingX", "paddingY", "paddingTop", "paddingBottom", "paddingStart", "paddingEnd", "margin", "marginX", "marginY", "marginTop", "marginBottom", "marginStart", "marginEnd", "userSelect", "width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight", "aspectRatio", "top", "bottom", "left", "right", "transform", "flexBasis", "flexShrink", "flexGrow", "opacity", "renderEmptyNode", "accessibilityRole"];
 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';
@@ -22,6 +22,7 @@ const styles = StyleSheet.create({
     fontVariant: ['tabular-nums']
   }
 });
+const HEADER_FONTS = new Set(['display1', 'display2', 'display3', 'title1', 'title2']);
 export const Text = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   var _theme$fontFamilyMono;
   let {
@@ -106,7 +107,8 @@ export const Text = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
       flexShrink,
       flexGrow,
       opacity,
-      renderEmptyNode = true
+      renderEmptyNode = true,
+      accessibilityRole = HEADER_FONTS.has(font) ? 'header' : undefined
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const Component = animated ? Animated.Text : NativeText;
@@ -192,8 +194,11 @@ export const Text = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   if (!renderEmptyNode && (children === null || children === undefined || children === '' || Number.isNaN(children))) return null;
   return /*#__PURE__*/_jsx(Component, _extends({
     ref: ref,
+    accessibilityRole: accessibilityRole,
     ellipsizeMode: ellipsize,
-    numberOfLines: computedNumberOfLines,
+    numberOfLines: computedNumberOfLines
+    // TODO https://linear.app/coinbase/issue/CDS-1518/audit-potentially-harmful-reactnative-animated-pattern
+    ,
     style: memoizedStyles,
     testID: testID
   }, props, {

package/esm/typography/TextBody.js

@@ -3,7 +3,21 @@ 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 { Text } from './Text';
+
+/**
+ * @deprecated Use `Text` with `font="body"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
+
+/**
+ * @deprecated Use `Text` with `font="body"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @deprecated Use `Text` with `font="body"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const TextBody = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       font = 'body'

package/esm/typography/TextCaption.js

@@ -3,7 +3,21 @@ 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 { Text } from './Text';
+
+/**
+ * @deprecated Use `Text` with `font="caption"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
+
+/**
+ * @deprecated Use `Text` with `font="caption"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @deprecated Use `Text` with `font="caption"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const TextCaption = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       font = 'caption'

package/esm/typography/TextDisplay1.js

@@ -3,7 +3,21 @@ 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 { Text } from './Text';
+
+/**
+ * @deprecated Use `Text` with `font="display1"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
+
+/**
+ * @deprecated Use `Text` with `font="display1"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @deprecated Use `Text` with `font="display1"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const TextDisplay1 = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       accessibilityRole = 'header',

package/esm/typography/TextDisplay2.js

@@ -3,7 +3,21 @@ 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 { Text } from './Text';
+
+/**
+ * @deprecated Use `Text` with `font="display2"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
+
+/**
+ * @deprecated Use `Text` with `font="display2"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @deprecated Use `Text` with `font="display2"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const TextDisplay2 = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       accessibilityRole = 'header',

package/esm/typography/TextDisplay3.js

@@ -3,7 +3,21 @@ 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 { Text } from './Text';
+
+/**
+ * @deprecated Use `Text` with `font="display3"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
+
+/**
+ * @deprecated Use `Text` with `font="display3"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @deprecated Use `Text` with `font="display3"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const TextDisplay3 = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       accessibilityRole = 'header',

package/esm/typography/TextHeadline.js

@@ -3,7 +3,21 @@ 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 { Text } from './Text';
+
+/**
+ * @deprecated Use `Text` with `font="headline"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
+
+/**
+ * @deprecated Use `Text` with `font="headline"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @deprecated Use `Text` with `font="headline"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const TextHeadline = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       font = 'headline'

package/esm/typography/TextInherited.js

@@ -3,7 +3,21 @@ 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 { Text } from './Text';
+
+/**
+ * @deprecated Use `Text` with `font="inherit"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
+
+/**
+ * @deprecated Use `Text` with `font="inherit"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @deprecated Use `Text` with `font="inherit"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const TextInherited = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       font = 'inherit'

package/esm/typography/TextLabel1.js

@@ -3,7 +3,21 @@ 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 { Text } from './Text';
+
+/**
+ * @deprecated Use `Text` with `font="label1"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
+
+/**
+ * @deprecated Use `Text` with `font="label1"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @deprecated Use `Text` with `font="label1"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const TextLabel1 = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       font = 'label1'