@coinbase/cds-mobile-visualization 3.4.0-beta.2 → 3.4.0-beta.20

package/esm/chart/utils/transition.js

@@ -0,0 +1,220 @@
+const _excluded = ["delay"];
+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 { useEffect, useMemo, useRef } from 'react';
+import { useAnimatedReaction, useSharedValue, withDelay, withSpring, withTiming } from 'react-native-reanimated';
+import { notifyChange, Skia } from '@shopify/react-native-skia';
+import { interpolatePath } from 'd3-interpolate-path';
+
+/**
+ * Transition for animations.
+ * Supports timing and spring animation types.
+ * Used for paths, positions, opacity, and any other animated properties.
+ *
+ * @example
+ * // Spring animation
+ * { type: 'spring', damping: 10, stiffness: 100 }
+ *
+ * @example
+ * // Timing animation
+ * { type: 'timing', duration: 500, easing: Easing.inOut(Easing.ease) }
+ */
+
+/**
+ * Default update transition used across all chart components.
+ * `{ type: 'spring', stiffness: 900, damping: 120 }`
+ */
+export const defaultTransition = {
+  type: 'spring',
+  stiffness: 900,
+  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.
+ */
+export const accessoryFadeTransitionDuration = 150;
+
+/**
+ * Delay in milliseconds before accessory elements fade in.
+ */
+export const accessoryFadeTransitionDelay = 350;
+
+/**
+ * Default enter transition for accessory elements (Point, Scrubber beacons).
+ * `{ type: 'timing', duration: 150, delay: 350 }`
+ */
+export const defaultAccessoryEnterTransition = {
+  type: 'timing',
+  duration: accessoryFadeTransitionDuration,
+  delay: accessoryFadeTransitionDelay
+};
+
+/**
+ * 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 instantTransition;
+  return value != null ? value : defaultValue;
+};
+
+// Interpolator and useInterpolator are brought over from non exported code in @shopify/react-native-skia
+/**
+ * @worklet
+ */
+
+export const useInterpolator = (factory, value, interpolator, input, output, options) => {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const init = useMemo(() => factory(), []);
+  const result = useSharedValue(init);
+  useAnimatedReaction(() => value.value, val => {
+    result.value = interpolator(val, input, output, options, result.value);
+    notifyChange(result);
+  }, [input, output, options]);
+  return result;
+};
+
+/**
+ * Builds a react-native-reanimated animation based on the configuration.
+ *
+ * @param targetValue - The target value to animate to
+ * @param config - The transition configuration
+ * @returns The animation value to assign to a shared value
+ *
+ * @example
+ * // Use directly for animation
+ * progress.value = 0;
+ * progress.value = buildTransition(1, { type: 'spring', damping: 10, stiffness: 100 });
+ *
+ * @example
+ * // Coordinate animations
+ * animatedX.value = buildTransition(100, { type: 'spring', damping: 10, stiffness: 100 });
+ * animatedY.value = buildTransition(200, { type: 'spring', damping: 10, stiffness: 100 });
+ *
+ * @example
+ * // Timing animation
+ * progress.value = buildTransition(1, { type: 'timing', duration: 500 });
+ */
+export const buildTransition = (targetValue, transition) => {
+  'worklet';
+
+  const {
+      delay: delayMs
+    } = transition,
+    config = _objectWithoutPropertiesLoose(transition, _excluded);
+  let animation;
+  switch (config.type) {
+    case 'timing':
+      {
+        animation = withTiming(targetValue, config);
+        break;
+      }
+    case 'spring':
+      {
+        animation = withSpring(targetValue, config);
+        break;
+      }
+    default:
+      {
+        animation = withSpring(targetValue, defaultTransition);
+        break;
+      }
+  }
+  if (delayMs && delayMs > 0) {
+    return withDelay(delayMs, animation);
+  }
+  return animation;
+};
+
+/**
+ * Hook for path animation state and transitions.
+ *
+ * @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 transitions - Transition configuration for enter and update animations
+ * @returns Animated SkPath as a shared value
+ *
+ * @example
+ * // Simple path transition
+ * const path = usePathTransition({
+ *   currentPath: d ?? '',
+ *   transitions: {
+ *     update: { type: 'timing', duration: 3000 },
+ *   },
+ * });
+ *
+ * @example
+ * // Enter animation with different initial config (like DefaultBar)
+ * const path = usePathTransition({
+ *   currentPath: targetPath,
+ *   initialPath: baselinePath,
+ *   transitions: {
+ *     enter: { type: 'tween', duration: 500 },
+ *     update: { type: 'spring', stiffness: 900, damping: 120 },
+ *   },
+ * });
+ */
+export const usePathTransition = _ref => {
+  var _transitions$update, _Skia$Path$MakeFromSV;
+  let {
+    currentPath,
+    initialPath,
+    transitions,
+    transition = defaultTransition
+  } = _ref;
+  const updateTransition = (_transitions$update = transitions == null ? void 0 : transitions.update) != null ? _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);
+  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(() => {
+    if (targetPathRef.current !== currentPath) {
+      var _Skia$Path$MakeFromSV2, _Skia$Path$MakeFromSV3, _Skia$Path$MakeFromSV4;
+      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 pathInterpolator = interpolatePath(fromPath, currentPath);
+      interpolatorRef.current = pathInterpolator;
+      normalizedStartShared.value = (_Skia$Path$MakeFromSV2 = Skia.Path.MakeFromSVGString(pathInterpolator(0))) != null ? _Skia$Path$MakeFromSV2 : Skia.Path.Make();
+      normalizedEndShared.value = (_Skia$Path$MakeFromSV3 = Skia.Path.MakeFromSVGString(pathInterpolator(1))) != null ? _Skia$Path$MakeFromSV3 : Skia.Path.Make();
+      fallbackPathShared.value = (_Skia$Path$MakeFromSV4 = Skia.Path.MakeFromSVGString(currentPath)) != null ? _Skia$Path$MakeFromSV4 : Skia.Path.Make();
+      const activeTransition = isFirstAnimation.current && enterTransition !== undefined ? enterTransition : updateTransition;
+      isFirstAnimation.current = false;
+      progress.value = 0;
+      progress.value = buildTransition(1, activeTransition);
+    }
+  }, [currentPath, updateTransition, enterTransition, progress, normalizedStartShared, normalizedEndShared, fallbackPathShared]);
+  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/__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/__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', {