@coinbase/cds-mobile-visualization 3.8.1 → 4.0.0

package/esm/chart/line/__stories__/LineChart.stories.js

@@ -1,2018 +0,0 @@
-const _excluded = ["dataX", "dataY"],
-  _excluded2 = ["label"],
-  _excluded3 = ["style"];
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import { forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useAnimatedReaction, useDerivedValue, useSharedValue, withDelay, withTiming } from 'react-native-reanimated';
-import { assets, ethBackground } from '@coinbase/cds-common/internal/data/assets';
-import { prices } from '@coinbase/cds-common/internal/data/prices';
-import { sparklineInteractiveData } from '@coinbase/cds-common/internal/visualizations/SparklineInteractiveData';
-import { useTabsContext } from '@coinbase/cds-common/tabs/TabsContext';
-import { NoopFn } from '@coinbase/cds-common/utils/mockUtils';
-import { useTheme } from '@coinbase/cds-mobile';
-import { DataCard } from '@coinbase/cds-mobile/alpha/data-card/DataCard';
-import { IconButton } from '@coinbase/cds-mobile/buttons';
-import { ListCell } from '@coinbase/cds-mobile/cells';
-import { ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
-import { Box, HStack, VStack } from '@coinbase/cds-mobile/layout';
-import { Avatar, RemoteImage } from '@coinbase/cds-mobile/media';
-import { SectionHeader } from '@coinbase/cds-mobile/section-header/SectionHeader';
-import { Pressable } from '@coinbase/cds-mobile/system';
-import { SegmentedTab } from '@coinbase/cds-mobile/tabs/SegmentedTab';
-import { Text } from '@coinbase/cds-mobile/typography';
-import { Circle, FontWeight, Group, Skia, TextAlign } from '@shopify/react-native-skia';
-import { Area, DottedArea } from '../../area';
-import { DefaultAxisTickLabel, XAxis, YAxis } from '../../axis';
-import { CartesianChart } from '../../CartesianChart';
-import { useCartesianChartContext } from '../../ChartProvider';
-import { PeriodSelector, PeriodSelectorActiveIndicator } from '../../PeriodSelector';
-import { Point } from '../../point';
-import { DefaultScrubberBeacon, Scrubber } from '../../scrubber';
-import { buildTransition, defaultTransition, projectPointWithSerializableScale, unwrapAnimatedValue, useScrubberContext } from '../../utils';
-import { DottedLine, Line, LineChart, ReferenceLine, SolidLine } from '..';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-function MultipleLine() {
-  const theme = useTheme();
-  const pages = useMemo(() => ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G'], []);
-  const pageViews = useMemo(() => [2400, 1398, 9800, 3908, 4800, 3800, 4300], []);
-  const uniqueVisitors = useMemo(() => [4000, 3000, 2000, 2780, 1890, 2390, 3490], []);
-  const chartAccessibilityLabel = "Website visitors across " + pageViews.length + " pages.";
-  const chartAccessibilityHint = 'Swipe left or right to hear details for each page.';
-  const getScrubberAccessibilityLabel = useCallback(index => pages[index] + " has " + pageViews[index] + " views and " + uniqueVisitors[index] + " unique visitors.", [pages, pageViews, uniqueVisitors]);
-  const numberFormatter = useCallback(value => new Intl.NumberFormat('en-US', {
-    maximumFractionDigits: 0
-  }).format(value), []);
-  return /*#__PURE__*/_jsx(LineChart, {
-    enableScrubbing: true,
-    showArea: true,
-    showXAxis: true,
-    showYAxis: true,
-    accessibilityHint: chartAccessibilityHint,
-    accessibilityLabel: chartAccessibilityLabel + " " + chartAccessibilityHint,
-    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
-    height: 200,
-    series: [{
-      id: 'pageViews',
-      data: pageViews,
-      color: theme.color.accentBoldGreen,
-      // Label will render next to scrubber beacon
-      label: 'Page Views'
-    }, {
-      id: 'uniqueVisitors',
-      data: uniqueVisitors,
-      color: theme.color.accentBoldPurple,
-      label: 'Unique Visitors',
-      // Default area is gradient
-      areaType: 'dotted'
-    }],
-    xAxis: {
-      // Used on the x-axis to provide context for each index from the series data array
-      data: pages
-    },
-    yAxis: {
-      showGrid: true,
-      tickLabelFormatter: numberFormatter
-    },
-    children: /*#__PURE__*/_jsx(Scrubber, {})
-  });
-}
-function DataFormat() {
-  const yData = useMemo(() => [2, 5.5, 2, 8.5, 1.5, 5], []);
-  const xData = useMemo(() => [1, 2, 3, 5, 8, 10], []);
-  const chartAccessibilityLabel = "Chart with custom X and Y data. " + yData.length + " data points";
-  const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": X value " + xData[index] + ", Y value " + yData[index], [xData, yData]);
-  return /*#__PURE__*/_jsx(LineChart, {
-    enableScrubbing: true,
-    points: true,
-    showArea: true,
-    showXAxis: true,
-    showYAxis: true,
-    accessibilityLabel: chartAccessibilityLabel,
-    curve: "natural",
-    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
-    height: 200,
-    inset: {
-      top: 16,
-      right: 16,
-      bottom: 0,
-      left: 0
-    },
-    series: [{
-      id: 'line',
-      data: yData
-    }],
-    xAxis: {
-      data: xData,
-      showLine: true,
-      showTickMarks: true,
-      showGrid: true
-    },
-    yAxis: {
-      domain: {
-        min: 0
-      },
-      position: 'left',
-      showLine: true,
-      showTickMarks: true,
-      showGrid: true
-    },
-    children: /*#__PURE__*/_jsx(Scrubber, {
-      hideOverlay: true
-    })
-  });
-}
-function LiveUpdates() {
-  const scrubberRef = useRef(null);
-  const initialData = useMemo(() => {
-    return sparklineInteractiveData.hour.map(d => d.value);
-  }, []);
-  const [priceData, setPriceData] = useState(initialData);
-  const chartAccessibilityLabel = "Live price chart with " + priceData.length + " data points.";
-  const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": " + priceData[index], [priceData]);
-  const lastDataPointTimeRef = useRef(Date.now());
-  const updateCountRef = useRef(0);
-  const intervalSeconds = 3600 / initialData.length;
-  const maxPercentChange = Math.abs(initialData[initialData.length - 1] - initialData[0]) * 0.05;
-  useEffect(() => {
-    const priceUpdateInterval = setInterval(() => {
-      var _scrubberRef$current;
-      setPriceData(currentData => {
-        const newData = [...currentData];
-        const lastPrice = newData[newData.length - 1];
-        const priceChange = (Math.random() - 0.5) * maxPercentChange;
-        const newPrice = Math.round((lastPrice + priceChange) * 100) / 100;
-
-        // Check if we should roll over to a new data point
-        const currentTime = Date.now();
-        const timeSinceLastPoint = (currentTime - lastDataPointTimeRef.current) / 1000;
-        if (timeSinceLastPoint >= intervalSeconds) {
-          // Time for a new data point - remove first, add new at end
-          lastDataPointTimeRef.current = currentTime;
-          newData.shift(); // Remove oldest data point
-          newData.push(newPrice); // Add new data point
-          updateCountRef.current = 0;
-        } else {
-          // Just update the last data point
-          newData[newData.length - 1] = newPrice;
-          updateCountRef.current++;
-        }
-        return newData;
-      });
-
-      // Pulse the scrubber on each update
-      (_scrubberRef$current = scrubberRef.current) == null || _scrubberRef$current.pulse();
-    }, 2000 + Math.random() * 1000);
-    return () => clearInterval(priceUpdateInterval);
-  }, [intervalSeconds, maxPercentChange]);
-  return /*#__PURE__*/_jsx(LineChart, {
-    enableScrubbing: true,
-    showArea: true,
-    accessibilityLabel: chartAccessibilityLabel,
-    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
-    height: 200,
-    inset: {
-      right: 64
-    },
-    series: [{
-      id: 'btc',
-      data: priceData,
-      color: assets.btc.color
-    }],
-    children: /*#__PURE__*/_jsx(Scrubber, {
-      ref: scrubberRef
-    })
-  });
-}
-function MissingData() {
-  const theme = useTheme();
-  const pages = useMemo(() => ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G'], []);
-  const pageViews = useMemo(() => [2400, 1398, null, 3908, 4800, 3800, 4300], []);
-  const uniqueVisitors = useMemo(() => [4000, 3000, null, 2780, 1890, 2390, 3490], []);
-  const chartAccessibilityLabel = "Website visitors across " + pages.length + " pages. Some data points are missing.";
-  const getScrubberAccessibilityLabel = useCallback(index => {
-    const pv = pageViews[index];
-    const uv = uniqueVisitors[index];
-    const pvStr = pv != null ? pv : 'no data';
-    const uvStr = uv != null ? uv : 'no data';
-    return pages[index] + ": " + pvStr + " views, " + uvStr + " unique visitors.";
-  }, [pages, pageViews, uniqueVisitors]);
-  const numberFormatter = useCallback(value => new Intl.NumberFormat('en-US', {
-    maximumFractionDigits: 0
-  }).format(value), []);
-  return /*#__PURE__*/_jsx(LineChart, {
-    enableScrubbing: true,
-    points: true,
-    showArea: true,
-    showXAxis: true,
-    showYAxis: true,
-    accessibilityLabel: chartAccessibilityLabel,
-    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
-    height: 200,
-    series: [{
-      id: 'pageViews',
-      data: pageViews,
-      color: theme.color.accentBoldGreen,
-      // Label will render next to scrubber beacon
-      label: 'Page Views',
-      connectNulls: true
-    }, {
-      id: 'uniqueVisitors',
-      data: uniqueVisitors,
-      color: theme.color.accentBoldPurple,
-      label: 'Unique Visitors'
-    }],
-    xAxis: {
-      // Used on the x-axis to provide context for each index from the series data array
-      data: pages
-    },
-    yAxis: {
-      showGrid: true,
-      tickLabelFormatter: numberFormatter
-    },
-    children: /*#__PURE__*/_jsx(Scrubber, {
-      overlayOffset: 6
-    })
-  });
-}
-function Interaction() {
-  const [scrubberPosition, setScrubberPosition] = useState();
-  const data = useMemo(() => [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58], []);
-  const chartAccessibilityLabel = "Price chart with " + data.length + " data points. Swipe to navigate.";
-  const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": " + data[index], [data]);
-  return /*#__PURE__*/_jsxs(VStack, {
-    gap: 2,
-    children: [/*#__PURE__*/_jsx(Text, {
-      font: "label1",
-      children: scrubberPosition !== undefined ? "Scrubber position: " + scrubberPosition : 'Not scrubbing'
-    }), /*#__PURE__*/_jsx(LineChart, {
-      enableScrubbing: true,
-      showArea: true,
-      accessibilityLabel: chartAccessibilityLabel,
-      getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
-      height: 200,
-      onScrubberPositionChange: setScrubberPosition,
-      series: [{
-        id: 'prices',
-        data
-      }],
-      children: /*#__PURE__*/_jsx(Scrubber, {})
-    })]
-  });
-}
-function Points() {
-  const theme = useTheme();
-  const keyMarketShiftIndices = [4, 6, 7, 9, 10];
-  const data = [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58];
-  return /*#__PURE__*/_jsxs(CartesianChart, {
-    height: 200,
-    series: [{
-      id: 'prices',
-      data: data
-    }],
-    children: [/*#__PURE__*/_jsx(Area, {
-      fill: "rgb(" + theme.spectrum.blue5 + ")",
-      seriesId: "prices"
-    }), /*#__PURE__*/_jsx(Line, {
-      points: _ref => {
-        let {
-            dataX,
-            dataY
-          } = _ref,
-          props = _objectWithoutPropertiesLoose(_ref, _excluded);
-        return keyMarketShiftIndices.includes(dataX) ? _extends({}, props, {
-          strokeWidth: 2,
-          stroke: theme.color.bg,
-          radius: 5,
-          onClick: () => alert("You have clicked a key market shift at position " + (dataX + 1) + " with value " + dataY + "!"),
-          accessibilityLabel: "Key market shift point at position " + (dataX + 1) + ", value " + dataY + ". Click to view details."
-        }) : false;
-      },
-      seriesId: "prices"
-    })]
-  });
-}
-function Transitions() {
-  const theme = useTheme();
-  const dataCount = 20;
-  const maxDataOffset = 15000;
-  const minStepOffset = 2500;
-  const maxStepOffset = 10000;
-  const domainLimit = 20000;
-  const updateInterval = 500;
-  const myTransitionConfig = {
-    type: 'spring',
-    stiffness: 700,
-    damping: 20
-  };
-  const negativeColor = "rgb(" + theme.spectrum.gray15 + ")";
-  const positiveColor = theme.color.fgPositive;
-  function generateNextValue(previousValue) {
-    const range = maxStepOffset - minStepOffset;
-    const offset = Math.random() * range + minStepOffset;
-    let direction;
-    if (previousValue >= maxDataOffset) {
-      direction = -1;
-    } else if (previousValue <= -maxDataOffset) {
-      direction = 1;
-    } else {
-      direction = Math.random() < 0.5 ? -1 : 1;
-    }
-    let newValue = previousValue + offset * direction;
-    newValue = Math.max(-maxDataOffset, Math.min(maxDataOffset, newValue));
-    return newValue;
-  }
-  function generateInitialData() {
-    const data = [];
-    let previousValue = Math.random() * 2 * maxDataOffset - maxDataOffset;
-    data.push(previousValue);
-    for (let i = 1; i < dataCount; i++) {
-      const newValue = generateNextValue(previousValue);
-      data.push(newValue);
-      previousValue = newValue;
-    }
-    return data;
-  }
-  const MyGradient = /*#__PURE__*/memo(props => {
-    const areaGradient = {
-      stops: _ref2 => {
-        let {
-          min,
-          max
-        } = _ref2;
-        return [{
-          offset: min,
-          color: negativeColor,
-          opacity: 1
-        }, {
-          offset: 0,
-          color: negativeColor,
-          opacity: 0
-        }, {
-          offset: 0,
-          color: positiveColor,
-          opacity: 0
-        }, {
-          offset: max,
-          color: positiveColor,
-          opacity: 1
-        }];
-      }
-    };
-    return /*#__PURE__*/_jsx(DottedArea, _extends({}, props, {
-      gradient: areaGradient
-    }));
-  });
-  function CustomTransitionsChart() {
-    const [data, setData] = useState(generateInitialData);
-    useEffect(() => {
-      const intervalId = setInterval(() => {
-        setData(currentData => {
-          var _currentData;
-          const lastValue = (_currentData = currentData[currentData.length - 1]) != null ? _currentData : 0;
-          const newValue = generateNextValue(lastValue);
-          return [...currentData.slice(1), newValue];
-        });
-      }, updateInterval);
-      return () => clearInterval(intervalId);
-    }, []);
-    const tickLabelFormatter = useCallback(value => new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'USD',
-      maximumFractionDigits: 0
-    }).format(value), []);
-    const valueAtIndexFormatter = useCallback(dataIndex => new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'USD'
-    }).format(data[dataIndex]), [data]);
-    const lineGradient = {
-      stops: [{
-        offset: 0,
-        color: negativeColor
-      }, {
-        offset: 0,
-        color: positiveColor
-      }]
-    };
-    const chartAccessibilityLabel = "Price chart with " + data.length + " data points. Swipe to navigate.";
-    const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": " + valueAtIndexFormatter(index), [valueAtIndexFormatter]);
-    return /*#__PURE__*/_jsxs(CartesianChart, {
-      enableScrubbing: true,
-      accessibilityLabel: chartAccessibilityLabel,
-      getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
-      height: 200,
-      inset: {
-        top: 32,
-        bottom: 32,
-        left: 16,
-        right: 16
-      },
-      series: [{
-        id: 'prices',
-        data: data,
-        gradient: lineGradient
-      }],
-      yAxis: {
-        domain: {
-          min: -domainLimit,
-          max: domainLimit
-        }
-      },
-      children: [/*#__PURE__*/_jsx(YAxis, {
-        showGrid: true,
-        requestedTickCount: 2,
-        tickLabelFormatter: tickLabelFormatter
-      }), /*#__PURE__*/_jsx(Line, {
-        showArea: true,
-        AreaComponent: MyGradient,
-        seriesId: "prices",
-        strokeWidth: 3,
-        transition: myTransitionConfig
-      }), /*#__PURE__*/_jsx(Scrubber, {
-        hideOverlay: true,
-        beaconTransitions: {
-          update: myTransitionConfig
-        },
-        label: valueAtIndexFormatter
-      })]
-    });
-  }
-  return /*#__PURE__*/_jsx(CustomTransitionsChart, {});
-}
-function BasicAccessible() {
-  const data = useMemo(() => [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58], []);
-
-  // Chart-level accessibility label provides overview
-  const chartAccessibilityLabel = useMemo(() => {
-    const currentPrice = data[data.length - 1];
-    return "Price chart showing trend over " + data.length + " data points. Current value: " + currentPrice + ". Use arrow keys to adjust view";
-  }, [data]);
-  const getScrubberAccessibilityLabel = useCallback(index => "Price at position " + (index + 1) + " of " + data.length + ": " + data[index], [data]);
-  return /*#__PURE__*/_jsx(LineChart, {
-    enableScrubbing: true,
-    showArea: true,
-    showYAxis: true,
-    accessibilityLabel: chartAccessibilityLabel,
-    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
-    height: 200,
-    series: [{
-      id: 'prices',
-      data: data
-    }],
-    yAxis: {
-      showGrid: true
-    },
-    children: /*#__PURE__*/_jsx(Scrubber, {})
-  });
-}
-function Gradients() {
-  const theme = useTheme();
-  const spectrumColors = ['blue', 'green', 'orange', 'yellow', 'gray', 'indigo', 'pink', 'purple', 'red', 'teal', 'chartreuse'];
-  const data = [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58];
-  const [currentSpectrumColor, setCurrentSpectrumColor] = useState('pink');
-  return /*#__PURE__*/_jsxs(VStack, {
-    gap: 2,
-    children: [/*#__PURE__*/_jsx(HStack, {
-      flexWrap: "wrap",
-      gap: 1,
-      justifyContent: "flex-end",
-      children: spectrumColors.map(color => /*#__PURE__*/_jsx(Pressable, {
-        accessibilityLabel: "Select " + color,
-        height: 16,
-        onPress: () => setCurrentSpectrumColor(color),
-        style: {
-          backgroundColor: "rgb(" + theme.spectrum[color + "20"] + ")",
-          borderColor: "rgb(" + theme.spectrum[color + "50"] + ")",
-          borderWidth: 2
-        },
-        width: 16
-      }, color))
-    }), /*#__PURE__*/_jsx(LineChart, {
-      points: true,
-      showYAxis: true,
-      height: 200,
-      series: [{
-        id: 'continuousGradient',
-        data: data,
-        gradient: {
-          stops: [{
-            offset: 0,
-            color: "rgb(" + theme.spectrum[currentSpectrumColor + "80"] + ")"
-          }, {
-            offset: Math.max(...data),
-            color: "rgb(" + theme.spectrum[currentSpectrumColor + "20"] + ")"
-          }]
-        }
-      }, {
-        id: 'discreteGradient',
-        data: data.map(d => d + 50),
-        // You can create a "discrete" gradient by having multiple stops at the same offset
-        gradient: {
-          stops: _ref3 => {
-            let {
-              min,
-              max
-            } = _ref3;
-            return [
-            // Allows a function which accepts min/max or direct array
-            {
-              offset: min,
-              color: "rgb(" + theme.spectrum[currentSpectrumColor + "80"] + ")"
-            }, {
-              offset: min + (max - min) / 3,
-              color: "rgb(" + theme.spectrum[currentSpectrumColor + "80"] + ")"
-            }, {
-              offset: min + (max - min) / 3,
-              color: "rgb(" + theme.spectrum[currentSpectrumColor + "50"] + ")"
-            }, {
-              offset: min + (max - min) / 3 * 2,
-              color: "rgb(" + theme.spectrum[currentSpectrumColor + "50"] + ")"
-            }, {
-              offset: min + (max - min) / 3 * 2,
-              color: "rgb(" + theme.spectrum[currentSpectrumColor + "20"] + ")"
-            }, {
-              offset: max,
-              color: "rgb(" + theme.spectrum[currentSpectrumColor + "20"] + ")"
-            }];
-          }
-        }
-      }, {
-        id: 'xAxisGradient',
-        data: data.map(d => d + 100),
-        gradient: {
-          // You can also configure by the x-axis.
-          axis: 'x',
-          stops: _ref4 => {
-            let {
-              min,
-              max
-            } = _ref4;
-            return [{
-              offset: min,
-              color: "rgb(" + theme.spectrum[currentSpectrumColor + "80"] + ")",
-              opacity: 0
-            }, {
-              offset: max,
-              color: "rgb(" + theme.spectrum[currentSpectrumColor + "20"] + ")",
-              opacity: 1
-            }];
-          }
-        }
-      }],
-      strokeWidth: 4,
-      yAxis: {
-        showGrid: true
-      }
-    })]
-  });
-}
-function GainLossChart() {
-  const theme = useTheme();
-  const data = useMemo(() => [-40, -28, -21, -5, 48, -5, -28, 2, -29, -46, 16, -30, -29, 8], []);
-  const negativeColor = "rgb(" + theme.spectrum.gray15 + ")";
-  const positiveColor = theme.color.fgPositive;
-  const tickLabelFormatter = useCallback(value => new Intl.NumberFormat('en-US', {
-    style: 'currency',
-    currency: 'USD',
-    maximumFractionDigits: 0
-  }).format(value), []);
-
-  // Line gradient: hard color change at 0 (full opacity for line)
-  const lineGradient = {
-    stops: [{
-      offset: 0,
-      color: negativeColor
-    }, {
-      offset: 0,
-      color: positiveColor
-    }]
-  };
-  const GradientDottedArea = /*#__PURE__*/memo(props => /*#__PURE__*/_jsx(DottedArea, _extends({}, props, {
-    gradient: {
-      stops: _ref5 => {
-        let {
-          min,
-          max
-        } = _ref5;
-        return [{
-          offset: min,
-          color: negativeColor,
-          opacity: 0.4
-        }, {
-          offset: 0,
-          color: negativeColor,
-          opacity: 0
-        }, {
-          offset: 0,
-          color: positiveColor,
-          opacity: 0
-        }, {
-          offset: max,
-          color: positiveColor,
-          opacity: 0.4
-        }];
-      }
-    }
-  })));
-  const chartAccessibilityLabel = "Price chart with " + data.length + " data points. Swipe to navigate.";
-  const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": " + tickLabelFormatter(data[index]), [data, tickLabelFormatter]);
-  return /*#__PURE__*/_jsxs(CartesianChart, {
-    enableScrubbing: true,
-    accessibilityLabel: chartAccessibilityLabel,
-    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
-    height: 200,
-    series: [{
-      id: 'prices',
-      data: data,
-      gradient: lineGradient
-    }],
-    children: [/*#__PURE__*/_jsx(YAxis, {
-      showGrid: true,
-      requestedTickCount: 2,
-      tickLabelFormatter: tickLabelFormatter
-    }), /*#__PURE__*/_jsx(Line, {
-      showArea: true,
-      AreaComponent: GradientDottedArea,
-      seriesId: "prices",
-      strokeWidth: 3
-    }), /*#__PURE__*/_jsx(Scrubber, {
-      hideOverlay: true
-    })]
-  });
-}
-function HighLowPrice() {
-  const data = [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58];
-  const minPrice = Math.min(...data);
-  const maxPrice = Math.max(...data);
-  const minPriceIndex = data.indexOf(minPrice);
-  const maxPriceIndex = data.indexOf(maxPrice);
-  const formatPrice = useCallback(price => {
-    return "$" + price.toLocaleString('en-US', {
-      minimumFractionDigits: 2,
-      maximumFractionDigits: 2
-    });
-  }, []);
-  return /*#__PURE__*/_jsxs(LineChart, {
-    showArea: true,
-    height: 200,
-    series: [{
-      id: 'prices',
-      data: data
-    }],
-    children: [/*#__PURE__*/_jsx(Point, {
-      dataX: minPriceIndex,
-      dataY: minPrice,
-      label: formatPrice(minPrice),
-      labelPosition: "bottom"
-    }), /*#__PURE__*/_jsx(Point, {
-      dataX: maxPriceIndex,
-      dataY: maxPrice,
-      label: formatPrice(maxPrice),
-      labelPosition: "top"
-    })]
-  });
-}
-function StylingScrubber() {
-  const theme = useTheme();
-  const pages = useMemo(() => ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G'], []);
-  const pageViews = useMemo(() => [2400, 1398, 9800, 3908, 4800, 3800, 4300], []);
-  const uniqueVisitors = useMemo(() => [4000, 3000, 2000, 2780, 1890, 2390, 3490], []);
-  const chartAccessibilityLabel = "Website visitors across " + pageViews.length + " pages.";
-  const getScrubberAccessibilityLabel = useCallback(index => pages[index] + ": " + pageViews[index] + " views, " + uniqueVisitors[index] + " unique visitors.", [pages, pageViews, uniqueVisitors]);
-  const numberFormatter = useCallback(value => new Intl.NumberFormat('en-US', {
-    maximumFractionDigits: 0
-  }).format(value), []);
-  return /*#__PURE__*/_jsx(LineChart, {
-    enableScrubbing: true,
-    showArea: true,
-    showXAxis: true,
-    showYAxis: true,
-    accessibilityLabel: chartAccessibilityLabel,
-    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
-    height: 200,
-    series: [{
-      id: 'pageViews',
-      data: pageViews,
-      color: theme.color.accentBoldGreen,
-      // Label will render next to scrubber beacon
-      label: 'Page Views'
-    }, {
-      id: 'uniqueVisitors',
-      data: uniqueVisitors,
-      color: theme.color.accentBoldPurple,
-      label: 'Unique Visitors',
-      // Default area is gradient
-      areaType: 'dotted'
-    }],
-    xAxis: {
-      // Used on the x-axis to provide context for each index from the series data array
-      data: pages
-    },
-    yAxis: {
-      showGrid: true,
-      tickLabelFormatter: numberFormatter
-    },
-    children: /*#__PURE__*/_jsx(Scrubber, {
-      idlePulse: true,
-      LineComponent: SolidLine,
-      seriesIds: ['pageViews']
-    })
-  });
-}
-function Compact() {
-  const theme = useTheme();
-  const dimensions = {
-    width: 62,
-    height: 18
-  };
-  const sparklineData = prices.map(price => parseFloat(price)).filter((price, index) => index % 10 === 0);
-  const positiveFloor = Math.min(...sparklineData) - 10;
-  const negativeData = sparklineData.map(price => -1 * price).reverse();
-  const negativeCeiling = Math.max(...negativeData) + 10;
-  const formatPrice = useCallback(price => {
-    return "$" + price.toLocaleString('en-US', {
-      minimumFractionDigits: 2,
-      maximumFractionDigits: 2
-    });
-  }, []);
-  const CompactChart = /*#__PURE__*/memo(_ref6 => {
-    let {
-      data,
-      showArea,
-      color,
-      referenceY
-    } = _ref6;
-    return /*#__PURE__*/_jsx(Box, {
-      style: {
-        padding: 1
-      },
-      children: /*#__PURE__*/_jsx(LineChart, _extends({}, dimensions, {
-        enableScrubbing: false,
-        inset: 0,
-        series: [{
-          id: 'btc',
-          data,
-          color
-        }],
-        showArea: showArea,
-        children: /*#__PURE__*/_jsx(ReferenceLine, {
-          dataY: referenceY
-        })
-      }))
-    });
-  });
-  const ChartCell = /*#__PURE__*/memo(_ref7 => {
-    let {
-      data,
-      showArea,
-      color,
-      referenceY,
-      subdetail
-    } = _ref7;
-    return /*#__PURE__*/_jsx(ListCell, {
-      accessibilityLabel: "Compact chart cell",
-      detail: formatPrice(parseFloat(prices[0])),
-      intermediary: /*#__PURE__*/_jsx(CompactChart, {
-        color: color,
-        data: data,
-        referenceY: referenceY,
-        showArea: showArea
-      }),
-      media: /*#__PURE__*/_jsx(Avatar, {
-        src: assets.btc.imageUrl
-      }),
-      onPress: () => console.log('clicked'),
-      spacingVariant: "condensed",
-      style: {
-        padding: 0
-      },
-      subdetail: subdetail
-    });
-  });
-  return /*#__PURE__*/_jsxs(VStack, {
-    children: [/*#__PURE__*/_jsx(ChartCell, {
-      color: assets.btc.color,
-      data: sparklineData,
-      referenceY: parseFloat(prices[Math.floor(prices.length / 4)]),
-      subdetail: "-4.55%"
-    }), /*#__PURE__*/_jsx(ChartCell, {
-      showArea: true,
-      color: assets.btc.color,
-      data: sparklineData,
-      referenceY: parseFloat(prices[Math.floor(prices.length / 4)]),
-      subdetail: "-4.55%"
-    }), /*#__PURE__*/_jsx(ChartCell, {
-      showArea: true,
-      color: theme.color.fgPositive,
-      data: sparklineData,
-      referenceY: positiveFloor,
-      subdetail: "+0.25%"
-    }), /*#__PURE__*/_jsx(ChartCell, {
-      showArea: true,
-      color: theme.color.fgNegative,
-      data: negativeData,
-      referenceY: negativeCeiling,
-      subdetail: "-4.55%"
-    })]
-  });
-}
-function AssetPriceWithDottedArea() {
-  const fontMgr = useMemo(() => {
-    const fontProvider = Skia.TypefaceFontProvider.Make();
-    // Register system fonts if available, otherwise Skia will use defaults
-    return fontProvider;
-  }, []);
-  const BTCTab = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref8, ref) => {
-    let {
-        label
-      } = _ref8,
-      props = _objectWithoutPropertiesLoose(_ref8, _excluded2);
-    const {
-      activeTab
-    } = useTabsContext();
-    const isActive = (activeTab == null ? void 0 : activeTab.id) === props.id;
-    return /*#__PURE__*/_jsx(SegmentedTab, _extends({
-      ref: ref,
-      label: /*#__PURE__*/_jsx(Text, {
-        font: "label1",
-        style: {
-          color: isActive ? assets.btc.color : undefined
-        },
-        children: label
-      })
-    }, props));
-  }));
-  const BTCActiveIndicator = /*#__PURE__*/memo(_ref9 => {
-    let {
-        style
-      } = _ref9,
-      props = _objectWithoutPropertiesLoose(_ref9, _excluded3);
-    return /*#__PURE__*/_jsx(PeriodSelectorActiveIndicator, _extends({}, props, {
-      style: [style, {
-        backgroundColor: assets.btc.color + "1A"
-      }]
-    }));
-  });
-  const AssetPriceDotted = /*#__PURE__*/memo(() => {
-    const theme = useTheme();
-    const currentPrice = sparklineInteractiveData.hour[sparklineInteractiveData.hour.length - 1].value;
-    const tabs = useMemo(() => [{
-      id: 'hour',
-      label: '1H'
-    }, {
-      id: 'day',
-      label: '1D'
-    }, {
-      id: 'week',
-      label: '1W'
-    }, {
-      id: 'month',
-      label: '1M'
-    }, {
-      id: 'year',
-      label: '1Y'
-    }, {
-      id: 'all',
-      label: 'All'
-    }], []);
-    const [timePeriod, setTimePeriod] = useState(tabs[0]);
-    const sparklineTimePeriodData = useMemo(() => {
-      return sparklineInteractiveData[timePeriod.id];
-    }, [timePeriod]);
-    const sparklineTimePeriodDataValues = useMemo(() => {
-      return sparklineTimePeriodData.map(d => d.value);
-    }, [sparklineTimePeriodData]);
-    const sparklineTimePeriodDataTimestamps = useMemo(() => {
-      return sparklineTimePeriodData.map(d => d.date);
-    }, [sparklineTimePeriodData]);
-    const onPeriodChange = useCallback(period => {
-      setTimePeriod(period || tabs[0]);
-    }, [tabs, setTimePeriod]);
-    const priceFormatter = useMemo(() => new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'USD'
-    }), []);
-    const formatPrice = useCallback(price => {
-      return priceFormatter.format(price);
-    }, [priceFormatter]);
-    const formatDate = useCallback(date => {
-      const dayOfWeek = date.toLocaleDateString('en-US', {
-        weekday: 'short'
-      });
-      const monthDay = date.toLocaleDateString('en-US', {
-        month: 'short',
-        day: 'numeric'
-      });
-      const time = date.toLocaleTimeString('en-US', {
-        hour: 'numeric',
-        minute: '2-digit',
-        hour12: true
-      });
-      return dayOfWeek + ", " + monthDay + ", " + time;
-    }, []);
-    const chartAccessibilityLabel = "Bitcoin price chart for " + timePeriod.label + " period. Current price: " + formatPrice(currentPrice) + ".";
-    const getScrubberAccessibilityLabel = useCallback(index => {
-      const price = formatPrice(sparklineTimePeriodDataValues[index]);
-      const date = formatDate(sparklineTimePeriodDataTimestamps[index]);
-      return price + " " + date;
-    }, [formatDate, formatPrice, sparklineTimePeriodDataTimestamps, sparklineTimePeriodDataValues]);
-    return /*#__PURE__*/_jsxs(VStack, {
-      gap: 2,
-      children: [/*#__PURE__*/_jsx(SectionHeader, {
-        balance: /*#__PURE__*/_jsx(Text, {
-          font: "title2",
-          children: formatPrice(currentPrice)
-        }),
-        end: /*#__PURE__*/_jsx(VStack, {
-          justifyContent: "center",
-          children: /*#__PURE__*/_jsx(RemoteImage, {
-            shape: "circle",
-            size: "xl",
-            source: assets.btc.imageUrl
-          })
-        }),
-        title: /*#__PURE__*/_jsx(Text, {
-          font: "title1",
-          children: "Bitcoin"
-        })
-      }), /*#__PURE__*/_jsx(LineChart, {
-        enableScrubbing: true,
-        showArea: true,
-        accessibilityLabel: chartAccessibilityLabel,
-        areaType: "dotted",
-        getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
-        height: 200,
-        inset: {
-          top: 52
-        },
-        series: [{
-          id: 'btc',
-          data: sparklineTimePeriodDataValues,
-          color: assets.btc.color
-        }],
-        children: /*#__PURE__*/_jsx(Scrubber, {
-          idlePulse: true,
-          labelElevated: true,
-          label: d => {
-            const date = formatDate(sparklineTimePeriodDataTimestamps[d]);
-            const price = formatPrice(sparklineTimePeriodDataValues[d]);
-            const regularStyle = {
-              fontFamilies: ['Inter'],
-              fontSize: 14,
-              fontStyle: {
-                weight: FontWeight.Normal
-              },
-              color: Skia.Color(theme.color.fgMuted)
-            };
-            const boldStyle = _extends({
-              fontFamilies: ['Inter']
-            }, regularStyle, {
-              fontStyle: {
-                weight: FontWeight.Bold
-              }
-            });
-
-            // 3. Use the ParagraphBuilder
-            const builder = Skia.ParagraphBuilder.Make({
-              textAlign: TextAlign.Left
-            }, fontMgr);
-            builder.pushStyle(boldStyle);
-            builder.addText(price);
-            builder.pushStyle(regularStyle);
-            builder.addText(" " + date);
-            const para = builder.build();
-            para.layout(512);
-            return para;
-          }
-        })
-      }), /*#__PURE__*/_jsx(PeriodSelector, {
-        TabComponent: BTCTab,
-        TabsActiveIndicatorComponent: BTCActiveIndicator,
-        activeTab: timePeriod,
-        onChange: onPeriodChange,
-        tabs: tabs
-      })]
-    });
-  });
-  return /*#__PURE__*/_jsx(AssetPriceDotted, {});
-}
-const LegendDot = /*#__PURE__*/memo(props => {
-  return /*#__PURE__*/_jsx(Box, _extends({
-    borderRadius: 1000,
-    height: 10,
-    width: 10
-  }, props));
-});
-const LegendEntry = /*#__PURE__*/memo(_ref0 => {
-  let {
-    color = assets.btc.color,
-    label,
-    value
-  } = _ref0;
-  return /*#__PURE__*/_jsxs(Box, {
-    alignItems: "center",
-    flexDirection: "row",
-    gap: 0.5,
-    children: [/*#__PURE__*/_jsx(LegendDot, {
-      style: {
-        backgroundColor: color
-      }
-    }), /*#__PURE__*/_jsx(Text, {
-      font: "label2",
-      children: label
-    }), value && /*#__PURE__*/_jsx(Text, {
-      color: "fgMuted",
-      font: "label2",
-      style: {
-        fontWeight: 'bold'
-      },
-      children: value
-    })]
-  });
-});
-const PerformanceHeader = /*#__PURE__*/memo(_ref1 => {
-  let {
-    scrubberPosition,
-    sparklineTimePeriodDataValues
-  } = _ref1;
-  const theme = useTheme();
-  const formatPriceThousands = useCallback(price => {
-    return new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'USD',
-      minimumFractionDigits: 0,
-      maximumFractionDigits: 0
-    }).format(price / 1000) + "k";
-  }, []);
-  const shownPosition = scrubberPosition !== undefined ? scrubberPosition : sparklineTimePeriodDataValues.length - 1;
-  return /*#__PURE__*/_jsxs(HStack, {
-    gap: 1,
-    paddingX: 1,
-    children: [/*#__PURE__*/_jsx(LegendEntry, {
-      color: theme.color.fgPositive,
-      label: "High Price",
-      value: formatPriceThousands(sparklineTimePeriodDataValues[shownPosition] * 1.2)
-    }), /*#__PURE__*/_jsx(LegendEntry, {
-      color: assets.btc.color,
-      label: "Actual Price",
-      value: formatPriceThousands(sparklineTimePeriodDataValues[shownPosition])
-    }), /*#__PURE__*/_jsx(LegendEntry, {
-      color: theme.color.fgNegative,
-      label: "Low Price",
-      value: formatPriceThousands(sparklineTimePeriodDataValues[shownPosition] * 0.8)
-    })]
-  });
-});
-const PerformanceChart = /*#__PURE__*/memo(_ref10 => {
-  let {
-    timePeriod,
-    onScrubberPositionChange
-  } = _ref10;
-  const theme = useTheme();
-  const sparklineTimePeriodData = useMemo(() => {
-    return sparklineInteractiveData[timePeriod.id];
-  }, [timePeriod]);
-  const sparklineTimePeriodDataValues = useMemo(() => {
-    return sparklineTimePeriodData.map(d => d.value);
-  }, [sparklineTimePeriodData]);
-  const sparklineTimePeriodDataTimestamps = useMemo(() => {
-    return sparklineTimePeriodData.map(d => d.date);
-  }, [sparklineTimePeriodData]);
-  const formatPriceThousands = useCallback(price => {
-    return new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'USD',
-      minimumFractionDigits: 0,
-      maximumFractionDigits: 0
-    }).format(price / 1000) + "k";
-  }, []);
-  const formatDate = useCallback(date => {
-    const dayOfWeek = date.toLocaleDateString('en-US', {
-      weekday: 'short'
-    });
-    const monthDay = date.toLocaleDateString('en-US', {
-      month: 'short',
-      day: 'numeric'
-    });
-    const time = date.toLocaleTimeString('en-US', {
-      hour: 'numeric',
-      minute: '2-digit',
-      hour12: true
-    });
-    return dayOfWeek + ", " + monthDay + ", " + time;
-  }, []);
-  const getScrubberLabel = useCallback(d => formatDate(sparklineTimePeriodDataTimestamps[d]), [formatDate, sparklineTimePeriodDataTimestamps]);
-  const chartAccessibilityLabel = "Bitcoin price chart with high, actual, and low series. " + sparklineTimePeriodDataValues.length + " data points. Swipe to navigate.";
-  const getScrubberAccessibilityLabel = useCallback(index => {
-    const price = formatPriceThousands(sparklineTimePeriodDataValues[index]);
-    const date = formatDate(sparklineTimePeriodDataTimestamps[index]);
-    return "Point " + (index + 1) + ": " + price + ", " + date;
-  }, [formatDate, formatPriceThousands, sparklineTimePeriodDataTimestamps, sparklineTimePeriodDataValues]);
-  return /*#__PURE__*/_jsx(LineChart, {
-    enableScrubbing: true,
-    showArea: true,
-    showYAxis: true,
-    accessibilityLabel: chartAccessibilityLabel,
-    areaType: "dotted",
-    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
-    height: 300,
-    inset: {
-      top: 52,
-      left: 0,
-      right: 0
-    },
-    onScrubberPositionChange: onScrubberPositionChange,
-    series: [{
-      id: 'high',
-      data: sparklineTimePeriodDataValues.map(d => d * 1.2),
-      color: theme.color.fgPositive,
-      label: 'High Price'
-    }, {
-      id: 'btc',
-      data: sparklineTimePeriodDataValues,
-      color: assets.btc.color,
-      label: 'Actual Price'
-    }, {
-      id: 'low',
-      data: sparklineTimePeriodDataValues.map(d => d * 0.8),
-      color: theme.color.fgNegative,
-      label: 'Low Price'
-    }],
-    yAxis: {
-      showGrid: true,
-      tickLabelFormatter: formatPriceThousands
-    },
-    children: /*#__PURE__*/_jsx(Scrubber, {
-      idlePulse: true,
-      label: getScrubberLabel
-    })
-  });
-});
-function Performance() {
-  const tabs = useMemo(() => [{
-    id: 'hour',
-    label: '1H'
-  }, {
-    id: 'day',
-    label: '1D'
-  }, {
-    id: 'week',
-    label: '1W'
-  }, {
-    id: 'month',
-    label: '1M'
-  }, {
-    id: 'year',
-    label: '1Y'
-  }, {
-    id: 'all',
-    label: 'All'
-  }], []);
-  const [timePeriod, setTimePeriod] = useState(tabs[0]);
-  const [scrubberPosition, setScrubberPosition] = useState();
-  const sparklineTimePeriodData = useMemo(() => {
-    return sparklineInteractiveData[timePeriod.id];
-  }, [timePeriod]);
-  const sparklineTimePeriodDataValues = useMemo(() => {
-    return sparklineTimePeriodData.map(d => d.value);
-  }, [sparklineTimePeriodData]);
-  const onPeriodChange = useCallback(period => {
-    setTimePeriod(period || tabs[0]);
-  }, [tabs]);
-  return /*#__PURE__*/_jsxs(VStack, {
-    gap: 2,
-    style: {
-      marginLeft: -8,
-      marginRight: -8
-    },
-    children: [/*#__PURE__*/_jsx(PerformanceHeader, {
-      scrubberPosition: scrubberPosition,
-      sparklineTimePeriodDataValues: sparklineTimePeriodDataValues
-    }), /*#__PURE__*/_jsx(PerformanceChart, {
-      onScrubberPositionChange: setScrubberPosition,
-      timePeriod: timePeriod
-    }), /*#__PURE__*/_jsx(PeriodSelector, {
-      activeTab: timePeriod,
-      onChange: onPeriodChange,
-      tabs: tabs
-    })]
-  });
-}
-function MonotoneAssetPrice() {
-  const theme = useTheme();
-  const prices = sparklineInteractiveData.hour;
-  const fontMgr = useMemo(() => {
-    const fontProvider = Skia.TypefaceFontProvider.Make();
-    // Register system fonts if available, otherwise Skia will use defaults
-    return fontProvider;
-  }, []);
-  const priceFormatter = useMemo(() => new Intl.NumberFormat('en-US', {
-    style: 'currency',
-    currency: 'USD'
-  }), []);
-  const scrubberPriceFormatter = useMemo(() => new Intl.NumberFormat('en-US', {
-    minimumFractionDigits: 2,
-    maximumFractionDigits: 2
-  }), []);
-  const formatPrice = useCallback(price => {
-    return priceFormatter.format(price);
-  }, [priceFormatter]);
-  const formatDate = useCallback(date => {
-    const dayOfWeek = date.toLocaleDateString('en-US', {
-      weekday: 'short'
-    });
-    const monthDay = date.toLocaleDateString('en-US', {
-      month: 'short',
-      day: 'numeric'
-    });
-    const time = date.toLocaleTimeString('en-US', {
-      hour: 'numeric',
-      minute: '2-digit',
-      hour12: true
-    });
-    return dayOfWeek + ", " + monthDay + ", " + time;
-  }, []);
-  const scrubberLabel = useCallback(index => {
-    const price = scrubberPriceFormatter.format(prices[index].value);
-    const date = formatDate(prices[index].date);
-    const regularStyle = {
-      fontFamilies: ['Inter'],
-      fontSize: 14,
-      fontStyle: {
-        weight: FontWeight.Normal
-      },
-      color: Skia.Color(theme.color.fgMuted)
-    };
-    const boldStyle = _extends({
-      fontFamilies: ['Inter']
-    }, regularStyle, {
-      fontStyle: {
-        weight: FontWeight.Bold
-      }
-    });
-    const builder = Skia.ParagraphBuilder.Make({
-      textAlign: TextAlign.Left
-    }, fontMgr);
-    builder.pushStyle(boldStyle);
-    builder.addText(price + " USD");
-    builder.pushStyle(regularStyle);
-    builder.addText(" " + date);
-    const para = builder.build();
-    para.layout(512);
-    return para;
-  }, [scrubberPriceFormatter, prices, formatDate, theme.color.fgMuted, fontMgr]);
-  const formatAxisLabelPrice = useCallback(price => {
-    return formatPrice(price);
-  }, [formatPrice]);
-
-  // Custom tick label component with offset positioning
-  const CustomYAxisTickLabel = useCallback(props => /*#__PURE__*/_jsx(DefaultAxisTickLabel, _extends({}, props, {
-    dx: 4,
-    dy: -12,
-    horizontalAlignment: "left"
-  })), []);
-  const chartAccessibilityLabel = "Price chart with " + prices.length + " data points. Swipe to navigate.";
-  const getScrubberAccessibilityLabel = useCallback(index => {
-    const price = scrubberPriceFormatter.format(prices[index].value);
-    const date = formatDate(prices[index].date);
-    return price + " USD " + date;
-  }, [formatDate, prices, scrubberPriceFormatter]);
-  const CustomScrubberBeacon = /*#__PURE__*/memo(_ref11 => {
-    let {
-      dataX,
-      dataY,
-      seriesId,
-      isIdle,
-      animate = true
-    } = _ref11;
-    const {
-      getSeries,
-      getXSerializableScale,
-      getYSerializableScale
-    } = useCartesianChartContext();
-    const targetSeries = useMemo(() => getSeries(seriesId), [getSeries, seriesId]);
-    const xScale = useMemo(() => getXSerializableScale(), [getXSerializableScale]);
-    const yScale = useMemo(() => getYSerializableScale(targetSeries == null ? void 0 : targetSeries.yAxisId), [getYSerializableScale, targetSeries == null ? void 0 : targetSeries.yAxisId]);
-    const animatedX = useSharedValue(0);
-    const animatedY = useSharedValue(0);
-
-    // Calculate the target point position - project data to pixels
-    const targetPoint = useDerivedValue(() => {
-      if (!xScale || !yScale) return {
-        x: 0,
-        y: 0
-      };
-      return projectPointWithSerializableScale({
-        x: unwrapAnimatedValue(dataX),
-        y: unwrapAnimatedValue(dataY),
-        xScale,
-        yScale
-      });
-    }, [dataX, dataY, xScale, yScale]);
-    useAnimatedReaction(() => {
-      return {
-        point: targetPoint.value,
-        isIdle: unwrapAnimatedValue(isIdle)
-      };
-    }, (current, previous) => {
-      // When animation is disabled, on initial render, or when we are starting,
-      // continuing, or finishing scrubbing we should immediately transition
-      if (!animate || previous === null || !previous.isIdle || !current.isIdle) {
-        animatedX.value = current.point.x;
-        animatedY.value = current.point.y;
-        return;
-      }
-      animatedX.value = buildTransition(current.point.x, defaultTransition);
-      animatedY.value = buildTransition(current.point.y, defaultTransition);
-    }, [animate]);
-
-    // Create animated point using the animated values
-    const animatedPoint = useDerivedValue(() => {
-      return {
-        x: animatedX.value,
-        y: animatedY.value
-      };
-    }, [animatedX, animatedY]);
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(Circle, {
-        c: animatedPoint,
-        color: theme.color.bg,
-        r: 5
-      }), /*#__PURE__*/_jsx(Circle, {
-        c: animatedPoint,
-        color: theme.color.fg,
-        r: 5,
-        strokeWidth: 3,
-        style: "stroke"
-      })]
-    });
-  });
-  return /*#__PURE__*/_jsx(LineChart, {
-    enableScrubbing: true,
-    showYAxis: true,
-    accessibilityLabel: chartAccessibilityLabel,
-    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
-    height: 200,
-    inset: {
-      top: 64
-    },
-    series: [{
-      id: 'btc',
-      data: prices.map(price => price.value),
-      color: theme.color.fg,
-      gradient: {
-        axis: 'x',
-        stops: _ref12 => {
-          let {
-            min
-          } = _ref12;
-          return [{
-            offset: min,
-            color: theme.color.fg,
-            opacity: 0
-          }, {
-            offset: 32,
-            color: theme.color.fg,
-            opacity: 1
-          }];
-        }
-      }
-    }],
-    xAxis: {
-      range: _ref13 => {
-        let {
-          max
-        } = _ref13;
-        return {
-          min: 96,
-          max
-        };
-      }
-    },
-    yAxis: {
-      position: 'left',
-      width: 0,
-      showGrid: true,
-      tickLabelFormatter: formatAxisLabelPrice,
-      TickLabelComponent: CustomYAxisTickLabel
-    },
-    children: /*#__PURE__*/_jsx(Scrubber, {
-      hideOverlay: true,
-      labelElevated: true,
-      BeaconComponent: CustomScrubberBeacon,
-      LineComponent: SolidLine,
-      label: scrubberLabel
-    })
-  });
-}
-function ServiceAvailability() {
-  const theme = useTheme();
-  const availabilityEvents = useMemo(() => [{
-    date: new Date('2022-01-01'),
-    availability: 79
-  }, {
-    date: new Date('2022-01-03'),
-    availability: 81
-  }, {
-    date: new Date('2022-01-04'),
-    availability: 82
-  }, {
-    date: new Date('2022-01-06'),
-    availability: 91
-  }, {
-    date: new Date('2022-01-07'),
-    availability: 92
-  }, {
-    date: new Date('2022-01-10'),
-    availability: 86
-  }], []);
-  const chartAccessibilityLabel = "Service availability chart with " + availabilityEvents.length + " data points. Swipe to navigate.";
-  const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": " + availabilityEvents[index].availability + "% availability on " + availabilityEvents[index].date.toLocaleDateString(), [availabilityEvents]);
-  return /*#__PURE__*/_jsxs(CartesianChart, {
-    enableScrubbing: true,
-    accessibilityLabel: chartAccessibilityLabel,
-    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
-    height: 200,
-    series: [{
-      id: 'availability',
-      data: availabilityEvents.map(event => event.availability),
-      gradient: {
-        stops: _ref14 => {
-          let {
-            min,
-            max
-          } = _ref14;
-          return [{
-            offset: min,
-            color: theme.color.fgNegative
-          }, {
-            offset: 85,
-            color: theme.color.fgNegative
-          }, {
-            offset: 85,
-            color: theme.color.fgWarning
-          }, {
-            offset: 90,
-            color: theme.color.fgWarning
-          }, {
-            offset: 90,
-            color: theme.color.fgPositive
-          }, {
-            offset: max,
-            color: theme.color.fgPositive
-          }];
-        }
-      }
-    }],
-    xAxis: {
-      data: availabilityEvents.map(event => event.date.getTime())
-    },
-    yAxis: {
-      domain: _ref15 => {
-        let {
-          min,
-          max
-        } = _ref15;
-        return {
-          min: Math.max(min - 2, 0),
-          max: Math.min(max + 2, 100)
-        };
-      }
-    },
-    children: [/*#__PURE__*/_jsx(XAxis, {
-      showGrid: true,
-      showLine: true,
-      showTickMarks: true,
-      tickLabelFormatter: value => new Date(value).toLocaleDateString()
-    }), /*#__PURE__*/_jsx(YAxis, {
-      showGrid: true,
-      showLine: true,
-      showTickMarks: true,
-      position: "left",
-      tickLabelFormatter: value => value + "%"
-    }), /*#__PURE__*/_jsx(Line, {
-      curve: "stepAfter",
-      points: props => _extends({}, props, {
-        fill: theme.color.bg,
-        stroke: props.fill
-      }),
-      seriesId: "availability"
-    }), /*#__PURE__*/_jsx(Scrubber, {
-      hideOverlay: true
-    })]
-  });
-}
-function ForecastAssetPrice() {
-  const startYear = 2020;
-  const data = useMemo(() => [50, 45, 47, 46, 54, 54, 60, 61, 63, 66, 70], []);
-  const currentIndex = 6;
-  const strokeWidth = 3;
-  // To prevent cutting off the edge of our lines
-  const clipOffset = strokeWidth;
-  const axisFormatter = useCallback(dataIndex => {
-    return "" + (startYear + dataIndex);
-  }, [startYear]);
-  const HistoricalLineComponent = /*#__PURE__*/memo(props => {
-    const {
-      drawingArea,
-      getXScale
-    } = useCartesianChartContext();
-    const xScale = getXScale();
-    const historicalClipPath = useMemo(() => {
-      if (!xScale || !drawingArea) return null;
-      const currentX = xScale(currentIndex);
-      if (currentX === undefined) return null;
-
-      // Create clip path for historical data (left side)
-      const clip = Skia.Path.Make();
-      clip.addRect({
-        x: drawingArea.x - clipOffset,
-        y: drawingArea.y - clipOffset,
-        width: currentX + clipOffset - drawingArea.x,
-        height: drawingArea.height + clipOffset * 2
-      });
-      return clip;
-    }, [xScale, drawingArea]);
-    if (!historicalClipPath) return null;
-    return /*#__PURE__*/_jsx(Group, {
-      clip: historicalClipPath,
-      children: /*#__PURE__*/_jsx(SolidLine, _extends({
-        strokeWidth: strokeWidth
-      }, props))
-    });
-  });
-
-  // Since the solid and dotted line have different curves,
-  // we need two separate line components. Otherwise we could
-  // have one line component with SolidLine and DottedLine inside
-  // of it and two clipPaths.
-  const ForecastLineComponent = /*#__PURE__*/memo(props => {
-    const {
-      drawingArea,
-      getXScale
-    } = useCartesianChartContext();
-    const xScale = getXScale();
-    const forecastClipPath = useMemo(() => {
-      if (!xScale || !drawingArea) return null;
-      const currentX = xScale(currentIndex);
-      if (currentX === undefined) return null;
-
-      // Create clip path for forecast data (right side)
-      const clip = Skia.Path.Make();
-      clip.addRect({
-        x: currentX,
-        y: drawingArea.y - clipOffset,
-        width: drawingArea.x + drawingArea.width - currentX + clipOffset * 2,
-        height: drawingArea.height + clipOffset * 2
-      });
-      return clip;
-    }, [xScale, drawingArea]);
-    if (!forecastClipPath) return null;
-    return /*#__PURE__*/_jsx(Group, {
-      clip: forecastClipPath,
-      children: /*#__PURE__*/_jsx(DottedLine, _extends({
-        dashIntervals: [0, strokeWidth * 2],
-        strokeWidth: strokeWidth
-      }, props))
-    });
-  });
-  const CustomScrubber = /*#__PURE__*/memo(() => {
-    const {
-      scrubberPosition
-    } = useScrubberContext();
-    const idleScrubberOpacity = useDerivedValue(() => scrubberPosition.value === undefined ? 1 : 0, [scrubberPosition]);
-    const scrubberOpacity = useDerivedValue(() => scrubberPosition.value !== undefined ? 1 : 0, [scrubberPosition]);
-
-    // Fade in animation for the Scrubber
-    const fadeInOpacity = useSharedValue(0);
-    useEffect(() => {
-      fadeInOpacity.value = withDelay(350, withTiming(1, {
-        duration: 150
-      }));
-    }, [fadeInOpacity]);
-    return /*#__PURE__*/_jsxs(Group, {
-      opacity: fadeInOpacity,
-      children: [/*#__PURE__*/_jsx(Group, {
-        opacity: scrubberOpacity,
-        children: /*#__PURE__*/_jsx(Scrubber, {
-          hideOverlay: true
-        })
-      }), /*#__PURE__*/_jsx(Group, {
-        opacity: idleScrubberOpacity,
-        children: /*#__PURE__*/_jsx(DefaultScrubberBeacon, {
-          isIdle: true,
-          dataX: currentIndex,
-          dataY: data[currentIndex],
-          seriesId: "price"
-        })
-      })]
-    });
-  });
-  const chartAccessibilityLabel = "Forecast chart with " + data.length + " data points. Swipe to navigate.";
-  const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": " + axisFormatter(index) + ", value " + data[index], [axisFormatter, data]);
-  return /*#__PURE__*/_jsxs(CartesianChart, {
-    enableScrubbing: true,
-    accessibilityLabel: chartAccessibilityLabel,
-    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
-    height: 200,
-    series: [{
-      id: 'price',
-      data,
-      color: assets.btc.color
-    }],
-    children: [/*#__PURE__*/_jsx(Line, {
-      LineComponent: HistoricalLineComponent,
-      curve: "linear",
-      seriesId: "price"
-    }), /*#__PURE__*/_jsx(Line, {
-      LineComponent: ForecastLineComponent,
-      curve: "monotone",
-      seriesId: "price",
-      type: "dotted"
-    }), /*#__PURE__*/_jsx(XAxis, {
-      position: "bottom",
-      requestedTickCount: 3,
-      tickLabelFormatter: axisFormatter
-    }), /*#__PURE__*/_jsx(CustomScrubber, {})]
-  });
-}
-function DataCardWithLineChart() {
-  const {
-    spectrum
-  } = useTheme();
-  const exampleThumbnail = /*#__PURE__*/_jsx(RemoteImage, {
-    accessibilityLabel: "Ethereum",
-    shape: "circle",
-    size: "xl",
-    source: ethBackground,
-    testID: "thumbnail"
-  });
-  const getLineChartSeries = useCallback(() => [{
-    id: 'price',
-    data: prices.slice(0, 30).map(price => parseFloat(price)),
-    color: "rgb(" + spectrum.green70 + ")"
-  }], [spectrum.green70]);
-  const lineChartSeries = useMemo(() => getLineChartSeries(), [getLineChartSeries]);
-  const lineChartSeries2 = useMemo(() => getLineChartSeries(), [getLineChartSeries]);
-  const ref = useRef(null);
-  return /*#__PURE__*/_jsxs(VStack, {
-    gap: 2,
-    children: [/*#__PURE__*/_jsx(DataCard, {
-      layout: "vertical",
-      subtitle: "Price trend",
-      thumbnail: exampleThumbnail,
-      title: "Line Chart Card",
-      children: /*#__PURE__*/_jsx(LineChart, {
-        showArea: true,
-        accessibilityLabel: "Ethereum price chart",
-        areaType: "dotted",
-        height: 120,
-        inset: 0,
-        series: lineChartSeries
-      })
-    }), /*#__PURE__*/_jsx(DataCard, {
-      layout: "vertical",
-      subtitle: "Price trend",
-      thumbnail: exampleThumbnail,
-      title: "Line Chart with Tag",
-      titleAccessory: /*#__PURE__*/_jsx(Text, {
-        dangerouslySetColor: "rgb(" + spectrum.green70 + ")",
-        font: "label1",
-        children: "\u2197 25.25%"
-      }),
-      children: /*#__PURE__*/_jsx(LineChart, {
-        showArea: true,
-        accessibilityLabel: "Ethereum price chart",
-        areaType: "dotted",
-        height: 100,
-        inset: 0,
-        series: lineChartSeries
-      })
-    }), /*#__PURE__*/_jsx(DataCard, {
-      ref: ref,
-      renderAsPressable: true,
-      layout: "vertical",
-      onPress: NoopFn,
-      subtitle: "Clickable line chart card",
-      thumbnail: exampleThumbnail,
-      title: "Actionable Line Chart",
-      titleAccessory: /*#__PURE__*/_jsx(Text, {
-        dangerouslySetColor: "rgb(" + spectrum.green70 + ")",
-        font: "label1",
-        children: "\u2197 8.5%"
-      }),
-      children: /*#__PURE__*/_jsx(LineChart, {
-        showArea: true,
-        accessibilityLabel: "Ethereum price chart",
-        areaType: "dotted",
-        height: 120,
-        inset: 0,
-        series: lineChartSeries,
-        showXAxis: false,
-        showYAxis: false
-      })
-    }), /*#__PURE__*/_jsx(DataCard, {
-      layout: "vertical",
-      subtitle: "Price trend",
-      thumbnail: /*#__PURE__*/_jsx(RemoteImage, {
-        accessibilityLabel: "Bitcoin",
-        shape: "circle",
-        size: "xl",
-        source: assets.btc.imageUrl,
-        testID: "thumbnail"
-      }),
-      title: "Card with Line Chart",
-      titleAccessory: /*#__PURE__*/_jsx(Text, {
-        dangerouslySetColor: "rgb(" + spectrum.green70 + ")",
-        font: "label1",
-        children: "\u2197 25.25%"
-      }),
-      children: /*#__PURE__*/_jsx(LineChart, {
-        showArea: true,
-        accessibilityLabel: "Price chart",
-        areaType: "dotted",
-        height: 100,
-        inset: 0,
-        series: lineChartSeries2,
-        showXAxis: false,
-        showYAxis: false
-      })
-    })]
-  });
-}
-function HorizontalLayoutLineChart() {
-  const symbols = ['BTC', 'ETH', 'SOL', 'DOGE', 'ADA'];
-  const allocations = [72, 46, 33, 21, 14];
-  return /*#__PURE__*/_jsx(LineChart, {
-    points: true,
-    showArea: true,
-    showXAxis: true,
-    showYAxis: true,
-    height: 240,
-    layout: "horizontal",
-    series: [{
-      id: 'allocations',
-      data: allocations,
-      color: assets.btc.color
-    }],
-    xAxis: {
-      domain: {
-        min: 0,
-        max: 80
-      },
-      tickLabelFormatter: value => value + "%"
-    },
-    yAxis: {
-      data: symbols,
-      scaleType: 'band'
-    }
-  });
-}
-function ExampleNavigator() {
-  const theme = useTheme();
-  const [currentIndex, setCurrentIndex] = useState(0);
-  const examples = useMemo(() => [{
-    title: 'Basic',
-    component: /*#__PURE__*/_jsx(LineChart, {
-      showArea: true,
-      height: 200,
-      series: [{
-        id: 'prices',
-        data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58]
-      }]
-    })
-  }, {
-    title: 'Horizontal Layout',
-    component: /*#__PURE__*/_jsx(HorizontalLayoutLineChart, {})
-  }, {
-    title: 'Multiple Lines',
-    component: /*#__PURE__*/_jsx(MultipleLine, {})
-  }, {
-    title: 'Data Format',
-    component: /*#__PURE__*/_jsx(DataFormat, {})
-  }, {
-    title: 'Live Updates',
-    component: /*#__PURE__*/_jsx(LiveUpdates, {})
-  }, {
-    title: 'Missing Data',
-    component: /*#__PURE__*/_jsx(MissingData, {})
-  }, {
-    title: 'Empty State',
-    component: /*#__PURE__*/_jsx(LineChart, {
-      height: 200,
-      series: [{
-        id: 'line',
-        color: "rgb(" + theme.spectrum.gray50 + ")",
-        data: [1, 1],
-        showArea: true
-      }],
-      yAxis: {
-        domain: {
-          min: -1,
-          max: 3
-        }
-      }
-    })
-  }, {
-    title: 'Scales',
-    component: /*#__PURE__*/_jsx(LineChart, {
-      showArea: true,
-      showYAxis: true,
-      height: 200,
-      series: [{
-        id: 'prices',
-        data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58]
-      }],
-      yAxis: {
-        scaleType: 'log',
-        showGrid: true,
-        ticks: [1, 10, 100]
-      }
-    })
-  }, {
-    title: 'Interaction',
-    component: /*#__PURE__*/_jsx(Interaction, {})
-  }, {
-    title: 'Points',
-    component: /*#__PURE__*/_jsx(Points, {})
-  }, {
-    title: 'Transitions',
-    component: /*#__PURE__*/_jsx(Transitions, {})
-  }, {
-    title: 'Basic Accessible',
-    component: /*#__PURE__*/_jsx(BasicAccessible, {})
-  }, {
-    title: 'Styling Axes',
-    component: /*#__PURE__*/_jsx(LineChart, {
-      showArea: true,
-      showXAxis: true,
-      showYAxis: true,
-      height: 200,
-      series: [{
-        id: 'prices',
-        data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58]
-      }],
-      xAxis: {
-        showGrid: true,
-        showLine: true,
-        showTickMarks: true,
-        tickLabelFormatter: dataX => "Day " + dataX
-      },
-      yAxis: {
-        showGrid: true,
-        showLine: true,
-        showTickMarks: true
-      }
-    })
-  }, {
-    title: 'Gradients',
-    component: /*#__PURE__*/_jsx(Gradients, {})
-  }, {
-    title: 'Gain/Loss',
-    component: /*#__PURE__*/_jsx(GainLossChart, {})
-  }, {
-    title: 'Styling Lines',
-    component: /*#__PURE__*/_jsx(LineChart, {
-      height: 200,
-      series: [{
-        id: 'top',
-        data: [15, 28, 32, 44, 46, 36, 40, 45, 48, 38]
-      }, {
-        id: 'upperMiddle',
-        data: [12, 23, 21, 29, 34, 28, 31, 38, 42, 35],
-        color: '#ef4444',
-        type: 'dotted'
-      }, {
-        id: 'lowerMiddle',
-        data: [8, 15, 14, 25, 20, 18, 22, 28, 24, 30],
-        color: '#f59e0b',
-        curve: 'natural',
-        gradient: {
-          axis: 'x',
-          stops: [{
-            offset: 0,
-            color: '#E3D74D'
-          }, {
-            offset: 9,
-            color: '#F7931A'
-          }]
-        },
-        strokeWidth: 6
-      }, {
-        id: 'bottom',
-        data: [4, 8, 11, 15, 16, 14, 16, 10, 12, 14],
-        color: '#800080',
-        curve: 'step',
-        AreaComponent: DottedArea,
-        showArea: true
-      }]
-    })
-  }, {
-    title: 'Styling Reference Lines',
-    component: /*#__PURE__*/_jsxs(LineChart, {
-      enableScrubbing: true,
-      showArea: true,
-      accessibilityLabel: "Price chart with reference line. 14 data points. Swipe to navigate.",
-      getScrubberAccessibilityLabel: index => "Point " + (index + 1),
-      height: 200,
-      series: [{
-        id: 'prices',
-        data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
-        color: theme.color.fgPositive
-      }],
-      xAxis: {
-        // Give space before the end of the chart for the scrubber
-        range: _ref16 => {
-          let {
-            min,
-            max
-          } = _ref16;
-          return {
-            min,
-            max: max - 24
-          };
-        }
-      },
-      children: [/*#__PURE__*/_jsx(ReferenceLine, {
-        LineComponent: props => /*#__PURE__*/_jsx(DottedLine, _extends({}, props, {
-          dashIntervals: [0, 16],
-          strokeWidth: 3
-        })),
-        dataY: 10,
-        stroke: theme.color.fg
-      }), /*#__PURE__*/_jsx(Scrubber, {})]
-    })
-  }, {
-    title: 'High/Low Price',
-    component: /*#__PURE__*/_jsx(HighLowPrice, {})
-  }, {
-    title: 'Styling Scrubber',
-    component: /*#__PURE__*/_jsx(StylingScrubber, {})
-  }, {
-    title: 'Compact',
-    component: /*#__PURE__*/_jsx(Compact, {})
-  }, {
-    title: 'Asset Price With Dotted Area',
-    component: /*#__PURE__*/_jsx(AssetPriceWithDottedArea, {})
-  }, {
-    title: 'Performance',
-    component: /*#__PURE__*/_jsx(Performance, {})
-  }, {
-    title: 'Monotone Asset Price',
-    component: /*#__PURE__*/_jsx(MonotoneAssetPrice, {})
-  }, {
-    title: 'Service Availability',
-    component: /*#__PURE__*/_jsx(ServiceAvailability, {})
-  }, {
-    title: 'Forecast Asset Price',
-    component: /*#__PURE__*/_jsx(ForecastAssetPrice, {})
-  }, {
-    title: 'In DataCard',
-    component: /*#__PURE__*/_jsx(DataCardWithLineChart, {})
-  }], [theme.color.fg, theme.color.fgPositive, theme.spectrum.gray50]);
-  const currentExample = examples[currentIndex];
-  const handlePrevious = useCallback(() => {
-    setCurrentIndex(prev => (prev - 1 + examples.length) % examples.length);
-  }, [examples.length]);
-  const handleNext = useCallback(() => {
-    setCurrentIndex(prev => (prev + 1 + examples.length) % examples.length);
-  }, [examples.length]);
-  return /*#__PURE__*/_jsx(ExampleScreen, {
-    paddingX: 0,
-    children: /*#__PURE__*/_jsxs(VStack, {
-      gap: 4,
-      children: [/*#__PURE__*/_jsxs(HStack, {
-        alignItems: "center",
-        justifyContent: "space-between",
-        padding: 2,
-        children: [/*#__PURE__*/_jsx(IconButton, {
-          accessibilityHint: "Navigate to previous example",
-          accessibilityLabel: "Previous",
-          name: "arrowLeft",
-          onPress: handlePrevious,
-          variant: "secondary"
-        }), /*#__PURE__*/_jsxs(VStack, {
-          alignItems: "center",
-          children: [/*#__PURE__*/_jsx(Text, {
-            font: "title3",
-            children: currentExample.title
-          }), /*#__PURE__*/_jsxs(Text, {
-            color: "fgMuted",
-            font: "label1",
-            children: [currentIndex + 1, " / ", examples.length]
-          })]
-        }), /*#__PURE__*/_jsx(IconButton, {
-          accessibilityHint: "Navigate to next example",
-          accessibilityLabel: "Next",
-          name: "arrowRight",
-          onPress: handleNext,
-          variant: "secondary"
-        })]
-      }), /*#__PURE__*/_jsx(Box, {
-        padding: 1,
-        children: currentExample.component
-      })]
-    })
-  });
-}
-export default ExampleNavigator;