@coinbase/cds-mobile-visualization 3.8.1 → 4.0.0

package/esm/chart/bar/__stories__/BarChart.stories.js

@@ -1,1417 +0,0 @@
-const _excluded = ["children"],
-  _excluded2 = ["animate"],
-  _excluded3 = ["x", "y", "width", "height", "dataX"],
-  _excluded4 = ["data", "height"],
-  _excluded5 = ["buy", "sell", "animate", "borderRadius", "height", "inset", "layout", "stackGap", "xAxis", "yAxis", "barMinSize"];
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import { memo, useCallback, useEffect, useId, useMemo, useState } from 'react';
-import { useDerivedValue } from 'react-native-reanimated';
-import { assets } from '@coinbase/cds-common/internal/data/assets';
-import { candles as btcCandles } from '@coinbase/cds-common/internal/data/candles';
-import { Button, IconButton } from '@coinbase/cds-mobile/buttons';
-import { ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
-import { Box, HStack, VStack } from '@coinbase/cds-mobile/layout';
-import { Text } from '@coinbase/cds-mobile/typography';
-import { Line as SkiaLine, Rect } from '@shopify/react-native-skia';
-import { XAxis, YAxis } from '../../axis';
-import { CartesianChart } from '../../CartesianChart';
-import { useCartesianChartContext } from '../../ChartProvider';
-import { DefaultLegendEntry } from '../../legend';
-import { ReferenceLine, SolidLine } from '../../line';
-import { Scrubber } from '../../scrubber';
-import { getPointOnSerializableScale, unwrapAnimatedValue, useScrubberContext } from '../../utils';
-import { Bar } from '../Bar';
-import { BarChart } from '../BarChart';
-import { BarPlot } from '../BarPlot';
-import { DefaultBarStack } from '../DefaultBarStack';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const ThinSolidLine = /*#__PURE__*/memo(props => /*#__PURE__*/_jsx(SolidLine, _extends({}, props, {
-  strokeWidth: 1
-})));
-const defaultChartHeight = 250;
-const baselineThresholdData = [40, 28, 21, 5, 48, 5, 28, 2, 29, 48, 18, 30, 29, 8].map(value => value + 50);
-const PositiveAndNegativeCashFlow = () => {
-  const theme = useTheme();
-  const categories = Array.from({
-    length: 31
-  }, (_, i) => "3/" + (i + 1));
-  const gains = [5, 0, 6, 18, 0, 5, 12, 0, 12, 22, 28, 18, 0, 12, 6, 0, 0, 24, 0, 0, 4, 0, 18, 0, 0, 14, 10, 16, 0, 0, 0];
-  const losses = [-4, 0, -8, -12, -6, 0, 0, 0, -18, 0, -12, 0, -9, -6, 0, 0, 0, 0, -22, -8, 0, 0, -10, -14, 0, 0, 0, 0, 0, -12, -10];
-  const series = [{
-    id: 'gains',
-    data: gains,
-    color: theme.color.fgPositive,
-    stackId: 'bars'
-  }, {
-    id: 'losses',
-    data: losses,
-    color: theme.color.fgNegative,
-    stackId: 'bars'
-  }];
-  return /*#__PURE__*/_jsxs(CartesianChart, {
-    height: 420,
-    inset: 32,
-    series: series,
-    xAxis: {
-      data: categories,
-      scaleType: 'band'
-    },
-    children: [/*#__PURE__*/_jsx(XAxis, {}), /*#__PURE__*/_jsx(YAxis, {
-      showGrid: true,
-      GridLineComponent: ThinSolidLine,
-      tickLabelFormatter: value => "$" + value + "M"
-    }), /*#__PURE__*/_jsx(BarPlot, {}), /*#__PURE__*/_jsx(ReferenceLine, {
-      LineComponent: SolidLine,
-      dataY: 0
-    })]
-  });
-};
-const FiatAndStablecoinBalance = () => {
-  const theme = useTheme();
-  const categories = Array.from({
-    length: 31
-  }, (_, i) => "3/" + (i + 1));
-  const usd = [20, 20, 20, 20, 20, 40, 60, 60, 80, 120, 200, 240, 240, 240, 240, 240, 240, 240, 240, 60, 30, 20, 25, 5, 0, 0, 0, 0, 80, 120, 150];
-  const usdc = [0, 0, 0, 0, 0, 0, 0, 0, 0, 60, 260, 260, 240, 220, 180, 160, 200, 240, 220, 0, 0, 0, 0, 0, 0, 250, 250, 250, 250, 250, 250];
-  const brl = [0, 0, 0, 0, 0, 0, 0, 20, 40, 100, 60, 60, 60, 0, 0, 0, 0, 0, 0, 160, 40, 80, 140, 180, 120, 0, 0, 0, 30, 30, 40];
-  const series = [{
-    id: 'BRL',
-    data: brl,
-    color: theme.color.accentBoldGreen
-  }, {
-    id: 'USDC',
-    data: usdc,
-    color: theme.color.accentBoldBlue
-  }, {
-    id: 'USD',
-    data: usd,
-    color: '#5b6cff'
-  }];
-  return /*#__PURE__*/_jsx(BarChart, {
-    showXAxis: true,
-    stacked: true,
-    barMinSize: 8,
-    height: 420,
-    inset: 32,
-    series: series,
-    stackGap: 2,
-    stackMinSize: 16,
-    xAxis: {
-      data: categories
-    }
-  });
-};
-const CustomBarStackComponent = /*#__PURE__*/memo(_ref => {
-  let {
-      children
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  const theme = useTheme();
-  if (props.height === 0) {
-    const diameter = props.width;
-    return /*#__PURE__*/_jsx(Bar, {
-      roundBottom: true,
-      roundTop: true,
-      borderRadius: 1000,
-      fill: theme.color.bgTertiary,
-      height: diameter,
-      origin: props.y,
-      width: diameter,
-      x: props.x,
-      y: props.y - diameter
-    });
-  }
-  return /*#__PURE__*/_jsx(DefaultBarStack, _extends({}, props, {
-    children: children
-  }));
-});
-const MonthlyRewards = () => {
-  const theme = useTheme();
-  const months = ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'];
-  const purple = [null, 6, 8, 10, 7, 6, 6, 8, null, null, null, null];
-  const blue = [null, 10, 12, 11, 10, 9, 10, 11, null, null, null, null];
-  const cyan = [null, 7, 10, 12, 11, 10, 8, 11, null, null, null, null];
-  const green = [10, null, null, null, 1, null, null, 6, null, null, null, null];
-  const [roundBaseline, setRoundBaseline] = useState(true);
-  const series = [{
-    id: 'purple',
-    data: purple,
-    color: "rgb(" + theme.spectrum.purple30 + ")"
-  }, {
-    id: 'blue',
-    data: blue,
-    color: "rgb(" + theme.spectrum.blue30 + ")"
-  }, {
-    id: 'cyan',
-    data: cyan,
-    color: "rgb(" + theme.spectrum.teal30 + ")"
-  }, {
-    id: 'green',
-    data: green,
-    color: "rgb(" + theme.spectrum.green30 + ")"
-  }];
-  return /*#__PURE__*/_jsxs(VStack, {
-    gap: 2,
-    children: [/*#__PURE__*/_jsx(BarChart, {
-      showXAxis: true,
-      stacked: true,
-      BarStackComponent: CustomBarStackComponent,
-      borderRadius: 1000,
-      height: 300,
-      inset: 0,
-      roundBaseline: roundBaseline,
-      series: series,
-      showYAxis: false,
-      stackMinSize: 24,
-      xAxis: {
-        tickLabelFormatter: index => {
-          return months[index];
-        },
-        categoryPadding: 0.25
-      }
-    }), /*#__PURE__*/_jsx(Button, {
-      onPress: () => setRoundBaseline(!roundBaseline),
-      children: "Toggle Round Baseline"
-    })]
-  });
-};
-const MultipleYAxes = () => {
-  const theme = useTheme();
-  return /*#__PURE__*/_jsxs(CartesianChart, {
-    height: defaultChartHeight,
-    series: [{
-      id: 'revenue',
-      data: [455, 520, 380, 455, 190, 235],
-      yAxisId: 'revenue',
-      color: theme.color.accentBoldYellow
-    }, {
-      id: 'profit',
-      data: [23, 15, 30, 56, 4, 12],
-      yAxisId: 'profit',
-      color: theme.color.fgPositive
-    }],
-    xAxis: {
-      data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
-      scaleType: 'band'
-    },
-    yAxis: [{
-      id: 'revenue'
-    }, {
-      id: 'profit'
-    }],
-    children: [/*#__PURE__*/_jsx(XAxis, {
-      showLine: true,
-      showTickMarks: true,
-      label: "Month"
-    }), /*#__PURE__*/_jsx(YAxis, {
-      showGrid: true,
-      showLine: true,
-      showTickMarks: true,
-      axisId: "revenue",
-      label: "Revenue",
-      position: "left",
-      requestedTickCount: 5,
-      tickLabelFormatter: value => "$" + value + "k",
-      width: 80
-    }), /*#__PURE__*/_jsx(YAxis, {
-      showLine: true,
-      showTickMarks: true,
-      axisId: "profit",
-      label: "Profit",
-      requestedTickCount: 5,
-      tickLabelFormatter: value => "$" + value + "k",
-      width: 70
-    }), /*#__PURE__*/_jsx(BarPlot, {})]
-  });
-};
-const initialData = [45, 52, 38, 45, 19, 23, 32];
-const MyCustomLine = /*#__PURE__*/memo(_ref2 => {
-  let props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
-  return /*#__PURE__*/_jsx(SolidLine, _extends({}, props));
-});
-const UpdatingChartValues = () => {
-  const [data, setData] = useState(initialData);
-  return /*#__PURE__*/_jsxs(VStack, {
-    gap: 2,
-    children: [/*#__PURE__*/_jsx(BarChart, {
-      height: 100,
-      series: [{
-        id: 'weekly-data',
-        data: data
-      }],
-      xAxis: {
-        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-        showTickMarks: true,
-        showLine: true
-      },
-      yAxis: {
-        requestedTickCount: 5,
-        tickLabelFormatter: value => "$" + value + "k",
-        showGrid: true,
-        showTickMarks: true,
-        showLine: true,
-        tickMarkSize: 12,
-        domain: {
-          max: 250
-        }
-      }
-    }), /*#__PURE__*/_jsx(BarChart, {
-      height: 100,
-      series: [{
-        id: 'weekly-data',
-        data: data
-      }],
-      transition: {
-        type: 'timing',
-        duration: 300
-      },
-      xAxis: {
-        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-        showTickMarks: true,
-        showLine: true
-      },
-      yAxis: {
-        requestedTickCount: 5,
-        tickLabelFormatter: value => "$" + value + "k",
-        showGrid: true,
-        showTickMarks: true,
-        showLine: true,
-        tickMarkSize: 12,
-        domain: {
-          max: 250
-        }
-      }
-    }), /*#__PURE__*/_jsx(BarChart, {
-      height: 100,
-      series: [{
-        id: 'weekly-data',
-        data: data.map((d, i) => i % 2 === 0 ? d : -d)
-      }],
-      xAxis: {
-        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-        showTickMarks: true,
-        showLine: true
-      },
-      yAxis: {
-        requestedTickCount: 5,
-        tickLabelFormatter: value => "$" + value + "k",
-        showGrid: true,
-        showTickMarks: true,
-        showLine: true,
-        tickMarkSize: 12,
-        domain: {
-          max: 250
-        }
-      },
-      children: /*#__PURE__*/_jsx(ReferenceLine, {
-        LineComponent: MyCustomLine,
-        dataY: 0
-      })
-    }), /*#__PURE__*/_jsx(Button, {
-      onPress: () => setData(data => data[0] > 200 ? initialData : data.map(d => d + 50)),
-      children: "Update Data"
-    })]
-  });
-};
-const AnimatedUpdatingChartValues = () => {
-  const [data, setData] = useState([45, 52, 38, 45, 19, 23, 32]);
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setData(prevData => prevData.map(value => {
-        // Generate random change between -15 and +15
-        const change = Math.floor(Math.random() * 31) - 15;
-        // Ensure values stay between 10 and 200
-        return Math.max(10, Math.min(200, value + change));
-      }));
-    }, 1000);
-    return () => clearInterval(interval);
-  }, []);
-  return /*#__PURE__*/_jsx(BarChart, {
-    showXAxis: true,
-    showYAxis: true,
-    height: defaultChartHeight,
-    series: [{
-      id: 'weekly-data',
-      data: data
-    }],
-    xAxis: {
-      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-      showTickMarks: true,
-      showLine: true
-    },
-    yAxis: {
-      requestedTickCount: 5,
-      tickLabelFormatter: value => "$" + value + "k",
-      showGrid: true,
-      showTickMarks: true,
-      showLine: true,
-      tickMarkSize: 12,
-      domain: {
-        max: 250
-      }
-    }
-  });
-};
-const NegativeValuesWithTopAxis = () => {
-  const theme = useTheme();
-  return /*#__PURE__*/_jsxs(CartesianChart, {
-    height: defaultChartHeight,
-    series: [{
-      id: 'losses',
-      data: [-45, -52, -38, -45, -19, -23, -32],
-      color: theme.color.fgNegative
-    }],
-    xAxis: {
-      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-      scaleType: 'band'
-    },
-    children: [/*#__PURE__*/_jsx(XAxis, {
-      showLine: true,
-      showTickMarks: true,
-      label: "Day of Week",
-      position: "top"
-    }), /*#__PURE__*/_jsx(YAxis, {
-      showGrid: true,
-      showLine: true,
-      showTickMarks: true,
-      label: "Loss",
-      requestedTickCount: 5,
-      tickLabelFormatter: value => "$" + value + "k"
-    }), /*#__PURE__*/_jsx(BarPlot, {})]
-  });
-};
-const tabs = [{
-  id: 'week',
-  label: '1W'
-}, {
-  id: 'month',
-  label: '1M'
-}, {
-  id: 'year',
-  label: '1Y'
-}];
-const YAxisContinuousColorMap = () => {
-  const theme = useTheme();
-  return /*#__PURE__*/_jsx(BarChart, {
-    showXAxis: true,
-    showYAxis: true,
-    height: defaultChartHeight,
-    series: [{
-      id: 'temperature',
-      data: [12, 25, 38, 52, 45, 30, 18],
-      // Continuous gradient from blue (cold) to red (hot)
-      gradient: {
-        axis: 'y',
-        stops: _ref3 => {
-          let {
-            min,
-            max
-          } = _ref3;
-          return [{
-            offset: min,
-            color: theme.color.accentBoldGreen
-          }, {
-            offset: (min + max) / 2,
-            color: theme.color.accentBoldYellow
-          }, {
-            offset: max,
-            color: theme.color.accentBoldRed
-          }];
-        }
-      }
-    }],
-    xAxis: {
-      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-    },
-    yAxis: {
-      requestedTickCount: 5,
-      tickLabelFormatter: value => value + "\xB0C",
-      showGrid: true
-    }
-  });
-};
-const YAxisDiscreteColorMap = () => {
-  const theme = useTheme();
-  return /*#__PURE__*/_jsx(BarChart, {
-    showXAxis: true,
-    showYAxis: true,
-    height: defaultChartHeight,
-    series: [{
-      id: 'temperature',
-      data: [12, 25, 38, 52, 45, 30, 18],
-      // Hard transitions based on performance thresholds
-      gradient: {
-        axis: 'y',
-        stops: [{
-          offset: 20,
-          color: theme.color.accentBoldGreen
-        }, {
-          offset: 20,
-          color: theme.color.accentBoldYellow
-        }, {
-          offset: 40,
-          color: theme.color.accentBoldYellow
-        }, {
-          offset: 40,
-          color: theme.color.accentBoldRed
-        }, {
-          offset: 60,
-          color: theme.color.accentBoldRed
-        }] // Hard transitions at 20, 40
-      }
-    }],
-    xAxis: {
-      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-    },
-    yAxis: {
-      requestedTickCount: 5,
-      tickLabelFormatter: value => value + "\xB0C",
-      showGrid: true
-    }
-  });
-};
-const XAxisContinuousColorMap = () => {
-  const theme = useTheme();
-  return /*#__PURE__*/_jsx(BarChart, {
-    showXAxis: true,
-    showYAxis: true,
-    height: defaultChartHeight,
-    series: [{
-      id: 'weekly-trend',
-      data: [45, 52, 38, 45, 48, 50, 55],
-      // Gradient from left (start of week) to right (end of week)
-      gradient: {
-        axis: 'x',
-        stops: _ref4 => {
-          let {
-            min,
-            max
-          } = _ref4;
-          return [{
-            offset: min,
-            color: theme.color.accentBoldPurple
-          }, {
-            offset: max,
-            color: theme.color.accentBoldBlue
-          }];
-        }
-      }
-    }],
-    xAxis: {
-      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-    },
-    yAxis: {
-      requestedTickCount: 5,
-      tickLabelFormatter: value => "" + value,
-      showGrid: true
-    }
-  });
-};
-const XAxisDiscreteColorMap = () => {
-  const theme = useTheme();
-  return /*#__PURE__*/_jsx(BarChart, {
-    showXAxis: true,
-    showYAxis: true,
-    height: defaultChartHeight,
-    series: [{
-      id: 'weekly-trend',
-      data: [45, 52, 38, 45, 48, 50, 55],
-      // Hard color transition from purple to blue at midweek
-      gradient: {
-        axis: 'x',
-        stops: [{
-          offset: 4,
-          color: theme.color.accentBoldPurple
-        },
-        // First half of week
-        {
-          offset: 4,
-          color: theme.color.accentBoldBlue
-        } // Second half of week - hard transition at index 4 (Thursday)
-        ]
-      }
-    }],
-    xAxis: {
-      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-    },
-    yAxis: {
-      requestedTickCount: 5,
-      tickLabelFormatter: value => "" + value,
-      showGrid: true
-    }
-  });
-};
-const XAxisMultiSegmentColorMap = () => {
-  const theme = useTheme();
-  return /*#__PURE__*/_jsx(BarChart, {
-    showXAxis: true,
-    showYAxis: true,
-    height: defaultChartHeight,
-    series: [{
-      id: 'quarters',
-      data: [120, 135, 142, 128, 145, 158, 162, 155, 168, 175, 182, 190],
-      // Different color for each quarter
-      gradient: {
-        axis: 'x',
-        stops: [{
-          offset: 3,
-          color: theme.color.accentBoldBlue
-        },
-        // Q1 (Jan-Mar)
-        {
-          offset: 3,
-          color: theme.color.accentBoldGreen
-        },
-        // Q2 (Apr-Jun)
-        {
-          offset: 6,
-          color: theme.color.accentBoldGreen
-        }, {
-          offset: 6,
-          color: theme.color.accentBoldYellow
-        },
-        // Q3 (Jul-Sep)
-        {
-          offset: 9,
-          color: theme.color.accentBoldYellow
-        }, {
-          offset: 9,
-          color: theme.color.accentBoldPurple
-        } // Q4 (Oct-Dec)
-        ] // Hard transitions at indices 3, 6, 9
-      }
-    }],
-    xAxis: {
-      data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
-    },
-    yAxis: {
-      requestedTickCount: 5,
-      tickLabelFormatter: value => "$" + value + "k",
-      showGrid: true
-    }
-  });
-};
-const ColorMapWithOpacity = () => {
-  const theme = useTheme();
-  return /*#__PURE__*/_jsx(BarChart, {
-    showXAxis: true,
-    showYAxis: true,
-    height: defaultChartHeight,
-    series: [{
-      id: 'confidence',
-      data: [25, 35, 45, 55, 65, 75, 85],
-      // Gradient with opacity changes
-      gradient: {
-        axis: 'y',
-        stops: _ref5 => {
-          let {
-            min,
-            max
-          } = _ref5;
-          return [{
-            offset: min,
-            color: theme.color.accentBoldBlue,
-            opacity: 0
-          },
-          // Low values - more transparent
-          {
-            offset: max,
-            color: theme.color.accentBoldBlue,
-            opacity: 1.0
-          } // High values - more opaque
-          ];
-        }
-      }
-    }],
-    xAxis: {
-      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-    },
-    yAxis: {
-      requestedTickCount: 5,
-      tickLabelFormatter: value => value + "%",
-      showGrid: true
-    }
-  });
-};
-const BandGridPositionExample = _ref6 => {
-  let {
-    position
-  } = _ref6;
-  return /*#__PURE__*/_jsxs(CartesianChart, {
-    height: 180,
-    inset: 4,
-    series: [{
-      id: 'data',
-      data: [30, 50, 40, 60, 35]
-    }],
-    xAxis: {
-      scaleType: 'band',
-      data: ['A', 'B', 'C', 'D', 'E']
-    },
-    yAxis: {
-      domain: {
-        min: 0
-      }
-    },
-    children: [/*#__PURE__*/_jsx(XAxis, {
-      showGrid: true,
-      showLine: true,
-      bandGridLinePlacement: position,
-      label: position
-    }), /*#__PURE__*/_jsx(BarPlot, {})]
-  });
-};
-
-// --- Composed Examples ---
-
-const candlestickStockData = [...btcCandles].reverse().slice(0, 90);
-const CandlesticksHeader = /*#__PURE__*/memo(_ref7 => {
-  let {
-    currentIndex
-  } = _ref7;
-  const formatPrice = useCallback(price => {
-    return new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'USD'
-    }).format(parseFloat(price));
-  }, []);
-  const formatThousandsPriceNumber = useCallback(price => {
-    const formattedPrice = new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'USD',
-      minimumFractionDigits: 0,
-      maximumFractionDigits: 0
-    }).format(price / 1000);
-    return formattedPrice + "k";
-  }, []);
-  const currentText = useMemo(() => {
-    if (currentIndex !== undefined) {
-      return "Open: " + formatThousandsPriceNumber(parseFloat(candlestickStockData[currentIndex].open)) + ", Close: " + formatThousandsPriceNumber(parseFloat(candlestickStockData[currentIndex].close)) + ", Volume: " + (parseFloat(candlestickStockData[currentIndex].volume) / 1000).toFixed(2) + "k";
-    }
-    return formatPrice(candlestickStockData[candlestickStockData.length - 1].close);
-  }, [currentIndex, formatThousandsPriceNumber, formatPrice]);
-  return /*#__PURE__*/_jsx(Text, {
-    "aria-live": "polite",
-    font: "headline",
-    children: currentText
-  });
-});
-const CandlesticksChart = /*#__PURE__*/memo(_ref8 => {
-  let {
-    infoTextId,
-    onScrubberPositionChange
-  } = _ref8;
-  const theme = useTheme();
-  const min = useMemo(() => Math.min(...candlestickStockData.map(data => parseFloat(data.low))), []);
-  const CandleThinSolidLine = /*#__PURE__*/memo(props => /*#__PURE__*/_jsx(SolidLine, _extends({}, props, {
-    strokeWidth: 1
-  })));
-  const BandwidthHighlight = /*#__PURE__*/memo(_ref9 => {
-    let {
-      stroke
-    } = _ref9;
-    const {
-      getXSerializableScale,
-      drawingArea
-    } = useCartesianChartContext();
-    const {
-      scrubberPosition
-    } = useScrubberContext();
-    const xScale = useMemo(() => getXSerializableScale(), [getXSerializableScale]);
-    const rectWidth = useMemo(() => {
-      if (xScale !== undefined && xScale.type === 'band') {
-        return xScale.bandwidth;
-      }
-      return 0;
-    }, [xScale]);
-    const xPos = useDerivedValue(() => {
-      const position = unwrapAnimatedValue(scrubberPosition);
-      const xPos = position !== undefined && xScale ? getPointOnSerializableScale(position, xScale) : undefined;
-      return xPos !== undefined ? xPos - rectWidth / 2 : 0;
-    }, [scrubberPosition, xScale]);
-    const opacity = useDerivedValue(() => xPos.value !== undefined ? 1 : 0, [xPos]);
-    return /*#__PURE__*/_jsx(Rect, {
-      color: stroke,
-      height: drawingArea.height,
-      opacity: opacity,
-      width: rectWidth,
-      x: xPos,
-      y: drawingArea.y
-    });
-  });
-  const candlesData = useMemo(() => candlestickStockData.map(data => [parseFloat(data.low), parseFloat(data.high)]), []);
-  const CandlestickBarComponent = /*#__PURE__*/memo(_ref0 => {
-    var _yScale, _yScale2;
-    let {
-        x,
-        y,
-        width,
-        height,
-        dataX
-      } = _ref0,
-      props = _objectWithoutPropertiesLoose(_ref0, _excluded3);
-    const {
-      getYScale
-    } = useCartesianChartContext();
-    const yScale = getYScale();
-    const wickX = x + width / 2;
-    const timePeriodValue = candlestickStockData[dataX];
-    const open = parseFloat(timePeriodValue.open);
-    const close = parseFloat(timePeriodValue.close);
-    const bullish = open < close;
-    const theme = useTheme();
-    const color = bullish ? theme.color.fgPositive : theme.color.fgNegative;
-    const openY = (_yScale = yScale == null ? void 0 : yScale(open)) != null ? _yScale : 0;
-    const closeY = (_yScale2 = yScale == null ? void 0 : yScale(close)) != null ? _yScale2 : 0;
-    const bodyHeight = Math.abs(openY - closeY);
-    const bodyY = openY < closeY ? openY : closeY;
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(SkiaLine, {
-        color: color,
-        p1: {
-          x: wickX,
-          y
-        },
-        p2: {
-          x: wickX,
-          y: y + height
-        },
-        strokeWidth: 1
-      }), /*#__PURE__*/_jsx(Rect, {
-        color: color,
-        height: bodyHeight,
-        width: width,
-        x: x,
-        y: bodyY
-      })]
-    });
-  });
-  const formatThousandsPriceNumber = useCallback(price => {
-    const formattedPrice = new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'USD',
-      minimumFractionDigits: 0,
-      maximumFractionDigits: 0
-    }).format(price / 1000);
-    return formattedPrice + "k";
-  }, []);
-  const formatTime = useCallback(index => {
-    if (index === null || index === undefined || index >= candlestickStockData.length) return '';
-    const ts = parseInt(candlestickStockData[index].start);
-    return new Date(ts * 1000).toLocaleDateString('en-US', {
-      month: 'short',
-      day: 'numeric'
-    });
-  }, []);
-  const getScrubberAccessibilityLabel = useCallback(index => {
-    const candle = candlestickStockData[index];
-    return formatTime(index) + ": O " + formatThousandsPriceNumber(parseFloat(candle.open)) + " H " + formatThousandsPriceNumber(parseFloat(candle.high)) + " L " + formatThousandsPriceNumber(parseFloat(candle.low)) + " C " + formatThousandsPriceNumber(parseFloat(candle.close));
-  }, [formatTime, formatThousandsPriceNumber]);
-  return /*#__PURE__*/_jsxs(CartesianChart, {
-    enableScrubbing: true,
-    accessibilityLabel: "Candlestick chart with " + candlesData.length + " data points. Swipe to navigate.",
-    animate: false,
-    "aria-labelledby": infoTextId,
-    borderRadius: 0,
-    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
-    height: 150,
-    inset: {
-      top: 8,
-      bottom: 8,
-      left: 0,
-      right: 0
-    },
-    onScrubberPositionChange: onScrubberPositionChange,
-    series: [{
-      id: 'stock-prices',
-      data: candlesData
-    }],
-    xAxis: {
-      scaleType: 'band'
-    },
-    yAxis: {
-      domain: {
-        min
-      }
-    },
-    children: [/*#__PURE__*/_jsx(XAxis, {
-      tickLabelFormatter: formatTime
-    }), /*#__PURE__*/_jsx(YAxis, {
-      showGrid: true,
-      GridLineComponent: CandleThinSolidLine,
-      tickLabelFormatter: formatThousandsPriceNumber,
-      width: 40
-    }), /*#__PURE__*/_jsx(Scrubber, {
-      hideOverlay: true,
-      LineComponent: BandwidthHighlight,
-      lineStroke: theme.color.fgMuted,
-      seriesIds: []
-    }), /*#__PURE__*/_jsx(BarPlot, {
-      BarComponent: CandlestickBarComponent,
-      BarStackComponent: _ref1 => {
-        let {
-          children
-        } = _ref1;
-        return /*#__PURE__*/_jsx(_Fragment, {
-          children: children
-        });
-      }
-    })]
-  });
-});
-const Candlesticks = () => {
-  const infoTextId = useId();
-  const [currentIndex, setCurrentIndex] = useState();
-  return /*#__PURE__*/_jsxs(VStack, {
-    gap: 2,
-    children: [/*#__PURE__*/_jsx(CandlesticksHeader, {
-      currentIndex: currentIndex
-    }), /*#__PURE__*/_jsx(CandlesticksChart, {
-      infoTextId: infoTextId,
-      onScrubberPositionChange: setCurrentIndex
-    })]
-  });
-};
-const DAY_LENGTH_MINUTES = 1440;
-const sunlightData = [{
-  label: 'Jan',
-  value: 598
-}, {
-  label: 'Feb',
-  value: 635
-}, {
-  label: 'Mar',
-  value: 688
-}, {
-  label: 'Apr',
-  value: 753
-}, {
-  label: 'May',
-  value: 812
-}, {
-  label: 'Jun',
-  value: 855
-}, {
-  label: 'Jul',
-  value: 861
-}, {
-  label: 'Aug',
-  value: 828
-}, {
-  label: 'Sep',
-  value: 772
-}, {
-  label: 'Oct',
-  value: 710
-}, {
-  label: 'Nov',
-  value: 648
-}, {
-  label: 'Dec',
-  value: 605
-}];
-const SunlightChartInner = /*#__PURE__*/memo(_ref10 => {
-  let {
-      data,
-      height = 300
-    } = _ref10,
-    props = _objectWithoutPropertiesLoose(_ref10, _excluded4);
-  const theme = useTheme();
-  const SunlightThinSolidLine = /*#__PURE__*/memo(props => /*#__PURE__*/_jsx(SolidLine, _extends({}, props, {
-    strokeWidth: 1
-  })));
-  return /*#__PURE__*/_jsxs(CartesianChart, _extends({}, props, {
-    height: height,
-    series: [{
-      id: 'sunlight',
-      data: data.map(_ref11 => {
-        let {
-          value
-        } = _ref11;
-        return value;
-      }),
-      yAxisId: 'sunlight',
-      color: "rgb(" + theme.spectrum.yellow40 + ")"
-    }, {
-      id: 'day',
-      data: data.map(() => DAY_LENGTH_MINUTES),
-      yAxisId: 'day',
-      color: "rgb(" + theme.spectrum.blue100 + ")"
-    }],
-    xAxis: _extends({}, props.xAxis, {
-      scaleType: 'band',
-      data: data.map(_ref12 => {
-        let {
-          label
-        } = _ref12;
-        return label;
-      })
-    }),
-    yAxis: [{
-      id: 'day',
-      domain: {
-        min: 0,
-        max: DAY_LENGTH_MINUTES
-      },
-      domainLimit: 'strict'
-    }, {
-      id: 'sunlight',
-      domain: {
-        min: 0,
-        max: DAY_LENGTH_MINUTES
-      },
-      domainLimit: 'strict'
-    }],
-    children: [/*#__PURE__*/_jsx(YAxis, {
-      showGrid: true,
-      showLine: true,
-      GridLineComponent: SunlightThinSolidLine,
-      axisId: "day",
-      position: "left"
-    }), /*#__PURE__*/_jsx(XAxis, {
-      showLine: true
-    }), /*#__PURE__*/_jsx(BarPlot, {
-      seriesIds: ['day'],
-      transitions: {
-        enter: null
-      }
-    }), /*#__PURE__*/_jsx(BarPlot, {
-      borderRadius: 0,
-      seriesIds: ['sunlight'],
-      transitions: {
-        enter: {
-          type: 'spring',
-          stiffness: 700,
-          damping: 40,
-          staggerDelay: 1000
-        }
-      }
-    })]
-  }));
-});
-const SunlightChart = () => {
-  return /*#__PURE__*/_jsxs(VStack, {
-    gap: 2,
-    children: [/*#__PURE__*/_jsx(SunlightChartInner, {
-      data: sunlightData
-    }), /*#__PURE__*/_jsx(Text, {
-      color: "fgMuted",
-      font: "caption",
-      textAlign: "center",
-      children: "2026 Sunlight data for the first day of each month in Atlanta, Georgia, provided by NOAA."
-    })]
-  });
-};
-const PriceRange = () => {
-  const candles = [...btcCandles].reverse().slice(0, 180);
-  const data = useMemo(() => candles.map(candle => [parseFloat(candle.low), parseFloat(candle.high)]), [candles]);
-  const min = useMemo(() => Math.min(...data.map(_ref13 => {
-    let [low] = _ref13;
-    return low;
-  })), [data]);
-  const max = useMemo(() => Math.max(...data.map(_ref14 => {
-    let [, high] = _ref14;
-    return high;
-  })), [data]);
-  const tickFormatter = useCallback(value => new Intl.NumberFormat('en-US', {
-    style: 'currency',
-    currency: 'USD',
-    notation: 'compact',
-    maximumFractionDigits: 0
-  }).format(value), []);
-  return /*#__PURE__*/_jsx(BarChart, {
-    showYAxis: true,
-    height: 150,
-    series: [{
-      id: 'prices',
-      data,
-      color: assets.btc.color
-    }],
-    yAxis: {
-      domain: {
-        min,
-        max
-      },
-      showGrid: true,
-      tickLabelFormatter: tickFormatter
-    }
-  });
-};
-const HorizontalBarChart = () => {
-  const labels = ['BTC', 'ETH', 'SOL', 'ADA'];
-  const allocation = [42, 28, 18, 12];
-  return /*#__PURE__*/_jsx(BarChart, {
-    showXAxis: true,
-    showYAxis: true,
-    height: 220,
-    layout: "horizontal",
-    series: [{
-      id: 'allocation',
-      data: allocation,
-      color: assets.btc.color
-    }],
-    xAxis: {
-      domain: {
-        min: 0,
-        max: 50
-      },
-      tickLabelFormatter: value => value + "%"
-    },
-    yAxis: {
-      data: labels,
-      scaleType: 'band'
-    }
-  });
-};
-const AxisBaselineExample = () => {
-  return /*#__PURE__*/_jsx(BarChart, {
-    showXAxis: true,
-    showYAxis: true,
-    accessibilityLabel: "Bar chart with custom axis baseline at 100.",
-    height: defaultChartHeight,
-    series: [{
-      id: 'net-flow',
-      data: [112, 97, 121, 103, 129, 118, 94]
-    }],
-    xAxis: {
-      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-    },
-    yAxis: {
-      baseline: 100,
-      domain: {
-        min: 80,
-        max: 140
-      },
-      showGrid: true
-    }
-  });
-};
-const AxisBaselineThresholdExample = () => {
-  const theme = useTheme();
-  return /*#__PURE__*/_jsxs(VStack, {
-    gap: 2,
-    children: [/*#__PURE__*/_jsx(BarChart, {
-      showYAxis: true,
-      accessibilityLabel: "Bar chart with threshold baseline at 30.",
-      height: 220,
-      inset: 0,
-      series: [{
-        id: 'axis-baseline-threshold-vertical',
-        data: baselineThresholdData,
-        gradient: {
-          stops: [{
-            offset: 30,
-            color: theme.color.fgNegative
-          }, {
-            offset: 30,
-            color: theme.color.fgPositive
-          }]
-        }
-      }],
-      yAxis: {
-        showGrid: true,
-        baseline: 30
-      }
-    }), /*#__PURE__*/_jsx(BarChart, {
-      showXAxis: true,
-      accessibilityLabel: "Horizontal bar chart with threshold baseline at 30.",
-      height: 220,
-      inset: 0,
-      layout: "horizontal",
-      series: [{
-        id: 'axis-baseline-threshold-horizontal',
-        data: baselineThresholdData,
-        gradient: {
-          stops: [{
-            offset: 30,
-            color: theme.color.fgNegative
-          }, {
-            offset: 30,
-            color: theme.color.fgPositive
-          }]
-        }
-      }],
-      xAxis: {
-        showGrid: true,
-        baseline: 30
-      }
-    })]
-  });
-};
-function BuyVsSellExample() {
-  function BuyVsSellLegend(_ref15) {
-    let {
-      buy,
-      sell
-    } = _ref15;
-    const theme = useTheme();
-    return /*#__PURE__*/_jsxs(HStack, {
-      gap: 1,
-      justifyContent: "space-between",
-      children: [/*#__PURE__*/_jsx(DefaultLegendEntry, {
-        color: theme.color.fgPositive,
-        label: /*#__PURE__*/_jsxs(Text, {
-          color: "fgMuted",
-          font: "legal",
-          children: [buy, "% bought"]
-        }),
-        seriesId: "buy"
-      }), /*#__PURE__*/_jsx(DefaultLegendEntry, {
-        color: theme.color.fgNegative,
-        label: /*#__PURE__*/_jsxs(Text, {
-          color: "fgMuted",
-          font: "legal",
-          children: [sell, "% sold"]
-        }),
-        seriesId: "sell"
-      })]
-    });
-  }
-  function BuyVsSellChart(_ref16) {
-    let {
-        buy,
-        sell,
-        animate = true,
-        borderRadius = 3,
-        height = 6,
-        inset = 0,
-        layout = 'horizontal',
-        stackGap = 4,
-        xAxis,
-        yAxis,
-        barMinSize = height
-      } = _ref16,
-      props = _objectWithoutPropertiesLoose(_ref16, _excluded5);
-    const theme = useTheme();
-    return /*#__PURE__*/_jsxs(VStack, {
-      gap: 1.5,
-      children: [/*#__PURE__*/_jsx(BarChart, _extends({
-        roundBaseline: true,
-        stacked: true,
-        animate: animate,
-        barMinSize: barMinSize,
-        borderRadius: borderRadius,
-        height: height,
-        inset: inset,
-        layout: layout,
-        series: [{
-          id: 'buy',
-          data: [buy],
-          color: theme.color.fgPositive,
-          legendShape: 'circle'
-        }, {
-          id: 'sell',
-          data: [sell],
-          color: theme.color.fgNegative,
-          legendShape: 'circle'
-        }],
-        stackGap: stackGap,
-        xAxis: _extends({
-          domainLimit: 'strict'
-        }, xAxis),
-        yAxis: _extends({
-          categoryPadding: 0
-        }, yAxis)
-      }, props)), /*#__PURE__*/_jsx(BuyVsSellLegend, {
-        buy: buy,
-        sell: sell
-      })]
-    });
-  }
-  return /*#__PURE__*/_jsx(BuyVsSellChart, {
-    buy: 76,
-    sell: 24
-  });
-}
-const PopulationPyramid = () => {
-  const theme = useTheme();
-  const ageGroups = ['100+ yrs', '95-99 yrs', '90-94 yrs', '85-89 yrs', '80-84 yrs', '75-79 yrs', '70-74 yrs', '65-69 yrs', '60-64 yrs', '55-59 yrs', '50-54 yrs', '45-49 yrs', '40-44 yrs', '35-39 yrs', '30-34 yrs', '25-29 yrs', '20-24 yrs', '15-19 yrs', '10-14 yrs', '5-9 yrs', '0-4 yrs'];
-  const malePopulation = [14587, 48604, 83560, 128957, 184152, 248505, 498683, 706420, 852333, 939629, 1002195, 1001264, 960282, 1161371, 1105023, 1061755, 1019343, 1023264, 1026330, 984773, 944071];
-  const femalePopulation = [14122, 46974, 80768, 124663, 178043, 240293, 482271, 683270, 824525, 909115, 969807, 969070, 929571, 1122380, 1068050, 1026356, 985483, 989404, 992505, 952453, 913222];
-  const numberWithSuffixFormatter = useMemo(() => new Intl.NumberFormat('en-US', {
-    notation: 'compact'
-  }), []);
-  const tickLabelFormatter = useCallback(value => numberWithSuffixFormatter.format(Math.abs(value)), [numberWithSuffixFormatter]);
-  const domainSymmetric = useCallback(bounds => {
-    const extremum = Math.max(-bounds.min, bounds.max);
-    const roundedExtremum = Math.ceil(extremum / 100000) * 100000;
-    return {
-      min: -roundedExtremum,
-      max: roundedExtremum
-    };
-  }, []);
-  const series = [{
-    id: 'male',
-    label: 'Male',
-    data: malePopulation.map(population => -population),
-    color: "rgb(" + theme.spectrum.blue40 + ")",
-    stackId: 'population'
-  }, {
-    id: 'female',
-    label: 'Female',
-    data: femalePopulation,
-    color: "rgb(" + theme.spectrum.pink40 + ")",
-    stackId: 'population'
-  }];
-  return /*#__PURE__*/_jsx(VStack, {
-    gap: 2,
-    children: /*#__PURE__*/_jsx(BarChart, {
-      showXAxis: true,
-      showYAxis: true,
-      stacked: true,
-      borderRadius: 2,
-      height: 550,
-      inset: 0,
-      layout: "horizontal",
-      series: series,
-      xAxis: {
-        domain: domainSymmetric,
-        GridLineComponent: ThinSolidLine,
-        showGrid: true,
-        showLine: true,
-        showTickMarks: true,
-        tickLabelFormatter
-      },
-      yAxis: {
-        bandTickMarkPlacement: 'edges',
-        data: ageGroups,
-        position: 'left',
-        showLine: true,
-        showTickMarks: true,
-        width: 80
-      },
-      children: /*#__PURE__*/_jsx(ReferenceLine, {
-        LineComponent: SolidLine,
-        dataX: 0
-      })
-    })
-  });
-};
-function ExampleNavigator() {
-  const [currentIndex, setCurrentIndex] = useState(0);
-  const examples = useMemo(() => [{
-    title: 'Basic',
-    component: /*#__PURE__*/_jsx(UpdatingChartValues, {})
-  }, {
-    title: 'Animated Auto-Updating',
-    component: /*#__PURE__*/_jsx(AnimatedUpdatingChartValues, {})
-  }, {
-    title: 'Negative Values with Top Axis',
-    component: /*#__PURE__*/_jsx(NegativeValuesWithTopAxis, {})
-  }, {
-    title: 'Axis Baseline',
-    component: /*#__PURE__*/_jsx(AxisBaselineExample, {})
-  }, {
-    title: 'Axis Baseline Threshold',
-    component: /*#__PURE__*/_jsx(AxisBaselineThresholdExample, {})
-  }, {
-    title: 'Positive and Negative Cash Flow',
-    component: /*#__PURE__*/_jsx(PositiveAndNegativeCashFlow, {})
-  }, {
-    title: 'Fiat & Stablecoin Balance',
-    component: /*#__PURE__*/_jsx(FiatAndStablecoinBalance, {})
-  }, {
-    title: 'Monthly Rewards',
-    component: /*#__PURE__*/_jsx(MonthlyRewards, {})
-  }, {
-    title: 'Multiple Y Axes',
-    component: /*#__PURE__*/_jsx(MultipleYAxes, {})
-  }, {
-    title: 'Y-Axis Continuous ColorMap',
-    component: /*#__PURE__*/_jsx(YAxisContinuousColorMap, {})
-  }, {
-    title: 'Y-Axis Discrete ColorMap',
-    component: /*#__PURE__*/_jsx(YAxisDiscreteColorMap, {})
-  }, {
-    title: 'X-Axis Continuous ColorMap',
-    component: /*#__PURE__*/_jsx(XAxisContinuousColorMap, {})
-  }, {
-    title: 'X-Axis Discrete ColorMap',
-    component: /*#__PURE__*/_jsx(XAxisDiscreteColorMap, {})
-  }, {
-    title: 'X-Axis Multi-Segment ColorMap',
-    component: /*#__PURE__*/_jsx(XAxisMultiSegmentColorMap, {})
-  }, {
-    title: 'ColorMap with Opacity',
-    component: /*#__PURE__*/_jsx(ColorMapWithOpacity, {})
-  }, {
-    title: 'Band Grid Position',
-    component: /*#__PURE__*/_jsxs(VStack, {
-      gap: 2,
-      children: [/*#__PURE__*/_jsx(BandGridPositionExample, {
-        position: "edges"
-      }), /*#__PURE__*/_jsx(BandGridPositionExample, {
-        position: "start"
-      }), /*#__PURE__*/_jsx(BandGridPositionExample, {
-        position: "middle"
-      }), /*#__PURE__*/_jsx(BandGridPositionExample, {
-        position: "end"
-      })]
-    })
-  }, {
-    title: 'Candlesticks',
-    component: /*#__PURE__*/_jsx(Candlesticks, {})
-  }, {
-    title: 'Monthly Sunlight',
-    component: /*#__PURE__*/_jsx(SunlightChart, {})
-  }, {
-    title: 'Price Range',
-    component: /*#__PURE__*/_jsx(PriceRange, {})
-  }, {
-    title: 'Horizontal Layout',
-    component: /*#__PURE__*/_jsx(HorizontalBarChart, {})
-  }, {
-    title: 'Buy vs Sell',
-    component: /*#__PURE__*/_jsx(BuyVsSellExample, {})
-  }, {
-    title: 'Population Pyramid',
-    component: /*#__PURE__*/_jsx(PopulationPyramid, {})
-  }], []);
-  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;