@coinbase/cds-mobile-visualization 3.4.0-beta.8 → 3.4.0

package/esm/chart/utils/transition.js

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useRef } from 'react';
-import { useAnimatedReaction, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
+import { useAnimatedReaction, useSharedValue, withDelay, withSpring, withTiming } from 'react-native-reanimated';
 import { notifyChange, Skia } from '@shopify/react-native-skia';
 import { interpolatePath } from 'd3-interpolate-path';
 
@@ -18,7 +18,8 @@ import { interpolatePath } from 'd3-interpolate-path';
  */
 
 /**
- * Default transition configuration used across all chart components.
+ * Default update transition used across all chart components.
+ * `{ type: 'spring', stiffness: 900, damping: 120 }`
  */
 export const defaultTransition = {
   type: 'spring',
@@ -26,6 +27,15 @@ export const defaultTransition = {
   damping: 120
 };
 
+/**
+ * Instant transition that completes immediately with no animation.
+ * Used when a transition is set to `null`.
+ */
+export const instantTransition = {
+  type: 'timing',
+  duration: 0
+};
+
 /**
  * Duration in milliseconds for accessory elements to fade in.
  */
@@ -37,41 +47,28 @@ export const accessoryFadeTransitionDuration = 150;
 export const accessoryFadeTransitionDelay = 350;
 
 /**
- * Custom hook that uses d3-interpolate-path for more robust path interpolation.
- * then use Skia's native interpolation in the worklet.
- *
- * @param progress - Shared value between 0 and 1
- * @param fromPath - Starting path as SVG string
- * @param toPath - Ending path as SVG string
- * @returns Interpolated SkPath as a shared value
+ * Default enter transition for accessory elements (Point, Scrubber beacons).
+ * `{ type: 'timing', duration: 150, delay: 350 }`
  */
-export const useD3PathInterpolation = (progress, fromPath, toPath) => {
-  // Pre-compute intermediate paths on JS thread using d3-interpolate-path
-  const {
-    fromSkiaPath,
-    i0,
-    i1,
-    toSkiaPath
-  } = useMemo(() => {
-    var _Skia$Path$MakeFromSV, _Skia$Path$MakeFromSV2, _Skia$Path$MakeFromSV3, _Skia$Path$MakeFromSV4;
-    const pathInterpolator = interpolatePath(fromPath, toPath);
-    const d = 1e-3;
-    return {
-      fromSkiaPath: (_Skia$Path$MakeFromSV = Skia.Path.MakeFromSVGString(fromPath)) != null ? _Skia$Path$MakeFromSV : Skia.Path.Make(),
-      i0: (_Skia$Path$MakeFromSV2 = Skia.Path.MakeFromSVGString(pathInterpolator(d))) != null ? _Skia$Path$MakeFromSV2 : Skia.Path.Make(),
-      i1: (_Skia$Path$MakeFromSV3 = Skia.Path.MakeFromSVGString(pathInterpolator(1 - d))) != null ? _Skia$Path$MakeFromSV3 : Skia.Path.Make(),
-      toSkiaPath: (_Skia$Path$MakeFromSV4 = Skia.Path.MakeFromSVGString(toPath)) != null ? _Skia$Path$MakeFromSV4 : Skia.Path.Make()
-    };
-  }, [fromPath, toPath]);
-  const result = useSharedValue(fromSkiaPath);
-  useAnimatedReaction(() => progress.value, t => {
-    'worklet';
+export const defaultAccessoryEnterTransition = {
+  type: 'timing',
+  duration: accessoryFadeTransitionDuration,
+  delay: accessoryFadeTransitionDelay
+};
 
-    var _i1$interpolate;
-    result.value = (_i1$interpolate = i1.interpolate(i0, t)) != null ? _i1$interpolate : toSkiaPath;
-    notifyChange(result);
-  }, [fromSkiaPath, i0, i1, toSkiaPath]);
-  return result;
+// Avoid exact endpoint samples, which can intermittently produce non-interpolatable
+// path pairs for SkPath.interpolate on complex morphs.
+// See https://github.com/wcandillon/can-it-be-done-in-react-native/blob/db8d6ee7024e37e8f8d2cb237c0b953b5fc766fe/season5/src/Headspace/Play.tsx
+const pathInterpolationEpsilon = 1e-3;
+
+/**
+ * Resolves a transition value based on the animation state and a default.
+ * @note Passing in null will disable an animation.
+ * @note Passing in undefined will use the provided default.
+ */
+export const getTransition = (value, animate, defaultValue) => {
+  if (!animate || value === null) return null;
+  return value != null ? value : defaultValue;
 };
 
 // Interpolator and useInterpolator are brought over from non exported code in @shopify/react-native-skia
@@ -114,21 +111,30 @@ export const useInterpolator = (factory, value, interpolator, input, output, opt
 export const buildTransition = (targetValue, transition) => {
   'worklet';
 
+  if (transition === null) return targetValue;
+  const delayMs = transition.delay;
+  let animation;
   switch (transition.type) {
     case 'timing':
       {
-        return withTiming(targetValue, transition);
+        animation = withTiming(targetValue, transition);
+        break;
       }
     case 'spring':
       {
-        return withSpring(targetValue, transition);
+        animation = withSpring(targetValue, transition);
+        break;
       }
     default:
       {
-        // Fallback to default transition config
-        return withSpring(targetValue, defaultTransition);
+        animation = withSpring(targetValue, defaultTransition);
+        break;
       }
   }
+  if (delayMs && delayMs > 0) {
+    return withDelay(delayMs, animation);
+  }
+  return animation;
 };
 
 /**
@@ -136,15 +142,16 @@ export const buildTransition = (targetValue, transition) => {
  *
  * @param currentPath - Current target path to animate to
  * @param initialPath - Initial path for enter animation. When provided, the first animation will go from initialPath to currentPath.
- * @param transition - Transition configuration
+ * @param transitions - Transition configuration for enter and update animations
  * @returns Animated SkPath as a shared value
  *
  * @example
  * // Simple path transition
  * const path = usePathTransition({
  *   currentPath: d ?? '',
- *   animate: shouldAnimate,
- *   transition: { type: 'timing', duration: 3000 }
+ *   transitions: {
+ *     update: { type: 'timing', duration: 3000 },
+ *   },
  * });
  *
  * @example
@@ -152,34 +159,75 @@ export const buildTransition = (targetValue, transition) => {
  * const path = usePathTransition({
  *   currentPath: targetPath,
  *   initialPath: baselinePath,
- *   animate: true,
- *   transition: { type: 'timing', duration: 300 }
+ *   transitions: {
+ *     enter: { type: 'tween', duration: 500 },
+ *     update: { type: 'spring', stiffness: 900, damping: 120 },
+ *   },
  * });
  */
 export const usePathTransition = _ref => {
+  var _Skia$Path$MakeFromSV;
   let {
     currentPath,
     initialPath,
+    transitions,
     transition = defaultTransition
   } = _ref;
-  // Track the previous path - updated in useEffect AFTER render,
-  // so during render it naturally holds the "from" path value
-  const previousPathRef = useRef(initialPath != null ? initialPath : currentPath);
+  const updateTransition = (transitions == null ? void 0 : transitions.update) !== undefined ? transitions.update : transition;
+  const enterTransition = transitions == null ? void 0 : transitions.enter;
+  const targetPathRef = useRef(initialPath != null ? initialPath : currentPath);
+  const isFirstAnimation = useRef(!!initialPath);
+  const interpolatorRef = useRef(null);
   const progress = useSharedValue(0);
-
-  // During render: previousPathRef still has old value, currentPath is new
-  const fromPath = previousPathRef.current;
-  const toPath = currentPath;
+  const initialSkiaPath = (_Skia$Path$MakeFromSV = Skia.Path.MakeFromSVGString(initialPath != null ? initialPath : currentPath)) != null ? _Skia$Path$MakeFromSV : Skia.Path.Make();
+  const normalizedStartShared = useSharedValue(initialSkiaPath);
+  const normalizedEndShared = useSharedValue(initialSkiaPath);
+  const fallbackPathShared = useSharedValue(initialSkiaPath);
+  const result = useSharedValue(initialSkiaPath);
   useEffect(() => {
-    const shouldAnimate = previousPathRef.current !== currentPath;
-    if (shouldAnimate) {
-      // Update ref for next path change (happens after this render)
-      previousPathRef.current = currentPath;
-
-      // Animate from old path to new path
+    if (targetPathRef.current !== currentPath) {
+      var _Skia$Path$MakeFromSV3, _Skia$Path$MakeFromSV4, _Skia$Path$MakeFromSV5;
+      let fromPath = targetPathRef.current;
+      if (interpolatorRef.current) {
+        const p = Math.min(Math.max(progress.value, 0), 1);
+        fromPath = interpolatorRef.current(p);
+      }
+      targetPathRef.current = currentPath;
+      const activeTransition = isFirstAnimation.current && enterTransition !== undefined ? enterTransition : updateTransition;
+      isFirstAnimation.current = false;
+      if (activeTransition === null) {
+        var _Skia$Path$MakeFromSV2;
+        const targetPath = (_Skia$Path$MakeFromSV2 = Skia.Path.MakeFromSVGString(currentPath)) != null ? _Skia$Path$MakeFromSV2 : Skia.Path.Make();
+        interpolatorRef.current = null;
+        normalizedStartShared.value = targetPath;
+        normalizedEndShared.value = targetPath;
+        fallbackPathShared.value = targetPath;
+        progress.value = 1;
+        result.value = targetPath;
+        notifyChange(result);
+        return;
+      }
+      const pathInterpolator = interpolatePath(fromPath, currentPath);
+      interpolatorRef.current = pathInterpolator;
+      normalizedStartShared.value = (_Skia$Path$MakeFromSV3 = Skia.Path.MakeFromSVGString(pathInterpolator(pathInterpolationEpsilon))) != null ? _Skia$Path$MakeFromSV3 : Skia.Path.Make();
+      normalizedEndShared.value = (_Skia$Path$MakeFromSV4 = Skia.Path.MakeFromSVGString(pathInterpolator(1 - pathInterpolationEpsilon))) != null ? _Skia$Path$MakeFromSV4 : Skia.Path.Make();
+      fallbackPathShared.value = (_Skia$Path$MakeFromSV5 = Skia.Path.MakeFromSVGString(currentPath)) != null ? _Skia$Path$MakeFromSV5 : Skia.Path.Make();
       progress.value = 0;
-      progress.value = buildTransition(1, transition);
+      progress.value = buildTransition(1, activeTransition);
     }
-  }, [currentPath, transition, progress]);
-  return useD3PathInterpolation(progress, fromPath, toPath);
+  }, [currentPath, updateTransition, enterTransition, progress, normalizedStartShared, normalizedEndShared, fallbackPathShared, result]);
+  useAnimatedReaction(() => ({
+    p: progress.value,
+    to: fallbackPathShared.value
+  }), _ref2 => {
+    'worklet';
+
+    var _normalizedEndShared$;
+    let {
+      p
+    } = _ref2;
+    result.value = (_normalizedEndShared$ = normalizedEndShared.value.interpolate(normalizedStartShared.value, p)) != null ? _normalizedEndShared$ : fallbackPathShared.value;
+    notifyChange(result);
+  }, []);
+  return result;
 };

package/esm/sparkline/Sparkline.js

@@ -12,7 +12,8 @@ import { generateSparklineAreaWithId } from './generateSparklineWithId';
 import { SparklineAreaPattern } from './SparklineAreaPattern';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
- * @deprecated Use LineChart instead.
+ * @deprecated Use LineChart instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v4
  */
 export const Sparkline = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {

package/esm/sparkline/SparklineArea.js

@@ -2,7 +2,8 @@ import React, { forwardRef, memo } from 'react';
 import { Path } from 'react-native-svg';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
- * @deprecated Use AreaChart instead.
+ * @deprecated Use AreaChart instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v4
  */
 export const SparklineArea = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {

package/esm/sparkline/SparklineGradient.js

@@ -11,7 +11,8 @@ import { generateSparklineAreaWithId } from './generateSparklineWithId';
 import { SparklineAreaPattern } from './SparklineAreaPattern';
 
 /**
- * @deprecated Use LineChart instead.
+ * @deprecated Use LineChart instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v4
  */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const SparklineGradient = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {

package/esm/sparkline/__figma__/Sparkline.figma.js

@@ -4,7 +4,7 @@ import { figma } from '@figma/code-connect';
 import { Sparkline } from '../Sparkline';
 import { jsx as _jsx } from "react/jsx-runtime";
 figma.connect(Sparkline, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=320%3A15040', {
-  imports: ["import { Sparkline } from '@coinbase/cds-mobile-visualization';", "import { useSparklinePath } from '@coinbase/cds-common/visualizations/useSparklinePath';"],
+  imports: ["import { Sparkline } from '@coinbase/cds-mobile-visualization'", "import { useSparklinePath } from '@coinbase/cds-common/visualizations/useSparklinePath'"],
   example: function Example() {
     const data = [20, 30, 5, 45, 0];
     const path = useSparklinePath({

package/esm/sparkline/__stories__/Sparkline.stories.js

@@ -12,8 +12,7 @@ import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScr
 import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
 import { HStack } from '@coinbase/cds-mobile/layout/HStack';
 import { VStack } from '@coinbase/cds-mobile/layout/VStack';
-import { TextBody } from '@coinbase/cds-mobile/typography/TextBody';
-import { TextHeadline } from '@coinbase/cds-mobile/typography/TextHeadline';
+import { Text } from '@coinbase/cds-mobile/typography';
 import { Sparkline } from '../Sparkline';
 import { SparklineArea } from '../SparklineArea';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -42,13 +41,15 @@ const SparklineExample = _ref => {
         alignItems: "flex-end",
         justifyContent: "center",
         paddingStart: 2,
-        children: [/*#__PURE__*/_jsx(TextBody, {
+        children: [/*#__PURE__*/_jsx(Text, {
           align: "end",
+          font: "body",
           numberOfLines: 1,
           children: "$2,874.49"
-        }), /*#__PURE__*/_jsx(TextBody, {
+        }), /*#__PURE__*/_jsx(Text, {
           align: "end",
           color: "fgMuted",
+          font: "body",
           numberOfLines: 1,
           children: "+36.08%"
         })]
@@ -61,12 +62,14 @@ const SparklineExample = _ref => {
     }),
     children: /*#__PURE__*/_jsxs(VStack, {
       justifyContent: "center",
-      children: [/*#__PURE__*/_jsx(TextHeadline, {
+      children: [/*#__PURE__*/_jsx(Text, {
         ellipsize: "tail",
+        font: "headline",
         numberOfLines: 1,
         children: name
-      }), /*#__PURE__*/_jsx(TextBody, {
+      }), /*#__PURE__*/_jsx(Text, {
         ellipsize: "tail",
+        font: "body",
         numberOfLines: 1,
         children: symbol
       })]
@@ -84,8 +87,9 @@ const SparklineScalingExample = props => {
   const path = useSparklinePath(_extends({}, dimensions, props));
   const area = useSparklineArea(_extends({}, dimensions, props));
   return /*#__PURE__*/_jsxs(VStack, {
-    children: [/*#__PURE__*/_jsxs(TextHeadline, {
+    children: [/*#__PURE__*/_jsxs(Text, {
       ellipsize: "tail",
+      font: "headline",
       numberOfLines: 1,
       children: ["Scale: ", props.yAxisScalingFactor]
     }), /*#__PURE__*/_jsx(Sparkline, _extends({}, dimensions, {

package/esm/sparkline/__stories__/SparklineGradient.stories.js

@@ -11,7 +11,7 @@ import { CellMedia } from '@coinbase/cds-mobile/cells/CellMedia';
 import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
 import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
 import { VStack } from '@coinbase/cds-mobile/layout';
-import { TextBody, TextHeadline } from '@coinbase/cds-mobile/typography';
+import { Text } from '@coinbase/cds-mobile/typography';
 import { SparklineArea } from '../SparklineArea';
 import { SparklineGradient } from '../SparklineGradient';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -45,12 +45,14 @@ const SparklineGradientExample = _ref => {
       }),
       children: /*#__PURE__*/_jsxs(VStack, {
         justifyContent: "center",
-        children: [/*#__PURE__*/_jsx(TextHeadline, {
+        children: [/*#__PURE__*/_jsx(Text, {
           ellipsize: "tail",
+          font: "headline",
           numberOfLines: 1,
           children: name
-        }), /*#__PURE__*/_jsx(TextBody, {
+        }), /*#__PURE__*/_jsx(Text, {
           ellipsize: "tail",
+          font: "body",
           numberOfLines: 1,
           children: symbol
         })]
@@ -75,8 +77,9 @@ const SparklineScalingExample = props => {
   const path = useSparklinePath(_extends({}, dimensions, props));
   const area = useSparklineArea(_extends({}, dimensions, props));
   return /*#__PURE__*/_jsxs(VStack, {
-    children: [/*#__PURE__*/_jsxs(TextHeadline, {
+    children: [/*#__PURE__*/_jsxs(Text, {
       ellipsize: "tail",
+      font: "headline",
       numberOfLines: 1,
       children: ["Scale: ", props.yAxisScalingFactor]
     }), /*#__PURE__*/_jsx(SparklineGradient, _extends({}, dimensions, {

package/esm/sparkline/sparkline-interactive/SparklineInteractive.js

@@ -302,6 +302,7 @@ function SparklineInteractiveWithGeneric(_ref4) {
 }
 
 /**
- * @deprecated Use LineChart instead.
+ * @deprecated Use LineChart instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v4
  */
 export const SparklineInteractive = /*#__PURE__*/memo(SparklineInteractiveWithGeneric);

package/esm/sparkline/sparkline-interactive/__figma__/SparklineInteractive.figma.js

@@ -4,7 +4,7 @@ import { figma } from '@figma/code-connect';
 import { SparklineInteractive } from '../SparklineInteractive';
 import { jsx as _jsx } from "react/jsx-runtime";
 figma.connect(SparklineInteractive, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=320-14858&m=dev', {
-  imports: ["import { SparklineInteractive } from '@coinbase/cds-web-visualization';"],
+  imports: ["import { SparklineInteractive } from '@coinbase/cds-mobile-visualization'"],
   props: {
     compact: figma.boolean('compact'),
     disableScrubbing: figma.boolean('scrubbing', {

package/esm/sparkline/sparkline-interactive/__stories__/SparklineInteractive.stories.js

@@ -3,7 +3,7 @@ import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
 import { sparklineInteractiveData, sparklineInteractiveHoverData, strokeColor } from '@coinbase/cds-common/internal/visualizations/SparklineInteractiveData';
 import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
 import { Box } from '@coinbase/cds-mobile/layout';
-import { TextTitle3 } from '@coinbase/cds-mobile/typography/TextTitle3';
+import { Text } from '@coinbase/cds-mobile/typography';
 import { SparklineInteractiveHeader } from '../../sparkline-interactive-header/SparklineInteractiveHeader';
 import { SparklineInteractive } from '../SparklineInteractive';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -175,7 +175,8 @@ const SparklineInteractiveScreen = () => {
     children: [/*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "Default"
@@ -187,7 +188,8 @@ const SparklineInteractiveScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "Compact"
@@ -200,7 +202,8 @@ const SparklineInteractiveScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "Disable Scrubbing"
@@ -213,7 +216,8 @@ const SparklineInteractiveScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "Hide period selector"
@@ -226,7 +230,8 @@ const SparklineInteractiveScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "Hide min/max label"
@@ -239,7 +244,8 @@ const SparklineInteractiveScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "Default period All"
@@ -252,7 +258,8 @@ const SparklineInteractiveScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "Fill Disabled"
@@ -265,7 +272,8 @@ const SparklineInteractiveScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "Y axis scaling"
@@ -278,7 +286,8 @@ const SparklineInteractiveScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "Fallback"
@@ -289,7 +298,8 @@ const SparklineInteractiveScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "Fallback Negative"
@@ -301,7 +311,8 @@ const SparklineInteractiveScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "Fallback Compact"
@@ -313,7 +324,8 @@ const SparklineInteractiveScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "No Hover Date"
@@ -326,7 +338,8 @@ const SparklineInteractiveScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "With Header Node"
@@ -338,7 +351,8 @@ const SparklineInteractiveScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "No padding"
@@ -352,7 +366,8 @@ const SparklineInteractiveScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 4,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingY: 3,
           children: "In Container With 4 padding"
         }), /*#__PURE__*/_jsx(SparklineInteractiveWithHeaderBuild, {
@@ -365,7 +380,8 @@ const SparklineInteractiveScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "Custom screen padding 6"
@@ -378,7 +394,8 @@ const SparklineInteractiveScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "Hover data"
@@ -391,7 +408,8 @@ const SparklineInteractiveScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "Auto Stoke Color"
@@ -403,7 +421,8 @@ const SparklineInteractiveScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "Custom RGB Stoke Color"
@@ -415,7 +434,8 @@ const SparklineInteractiveScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "Custom RGBA Stoke Color"
@@ -427,7 +447,8 @@ const SparklineInteractiveScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "No Data In SelectedPeriod"
@@ -441,7 +462,8 @@ const SparklineInteractiveScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "Enable Interaction When Outside"
@@ -454,7 +476,8 @@ const SparklineInteractiveScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "Custom Node Header Styles"
@@ -471,7 +494,8 @@ const SparklineInteractiveScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "Dotted Fill Type"
@@ -484,7 +508,8 @@ const SparklineInteractiveScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "Y Scale Custom"

package/esm/sparkline/sparkline-interactive-header/__figma__/SparklineInteractiveHeader.figma.js

@@ -5,7 +5,7 @@ import { SparklineInteractive } from '../../sparkline-interactive/SparklineInter
 import { SparklineInteractiveHeader } from '../SparklineInteractiveHeader';
 import { jsx as _jsx } from "react/jsx-runtime";
 figma.connect(SparklineInteractiveHeader, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=320-14931&m=dev', {
-  imports: ["import { SparklineInteractiveHeader } from '@coinbase/cds-web-visualization';", "import { SparklineInteractive } from '@coinbase/cds-web-visualization';"],
+  imports: ["import { SparklineInteractiveHeader } from '@coinbase/cds-mobile-visualization'", "import { SparklineInteractive } from '@coinbase/cds-mobile-visualization'"],
   props: {
     compact: figma.boolean('compact'),
     disableScrubbing: figma.boolean('scrubbing', {