@coinbase/cds-mobile-visualization 3.8.1 → 4.0.0

package/esm/sparkline/Counter.js

@@ -1,45 +0,0 @@
-import React, { useMemo } from 'react';
-import { StyleSheet, View } from 'react-native';
-import { useCounter } from '@coinbase/cds-common/visualizations/useCounter';
-import { Box } from '@coinbase/cds-mobile/layout';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const styles = StyleSheet.create({
-  hidden: {
-    opacity: 0
-  },
-  visible: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    display: 'flex'
-  }
-});
-export const Counter = _ref => {
-  let {
-    startNum,
-    endNum,
-    renderNum,
-    durationInMillis
-  } = _ref;
-  const count = useCounter({
-    startNum,
-    endNum,
-    durationInMillis
-  });
-  const renderFunction = useMemo(() => {
-    return num => {
-      return renderNum ? renderNum(num) : num;
-    };
-  }, [renderNum]);
-  return /*#__PURE__*/_jsxs(Box, {
-    alignSelf: "flex-start",
-    justifyContent: "center",
-    children: [/*#__PURE__*/_jsx(View, {
-      style: styles.hidden,
-      children: renderFunction(endNum)
-    }), /*#__PURE__*/_jsx(View, {
-      style: styles.visible,
-      children: renderFunction(count)
-    })]
-  });
-};

package/esm/sparkline/Sparkline.js

@@ -1,165 +0,0 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { forwardRef, memo, useMemo, useRef } from 'react';
-import { Defs, G, LinearGradient, Mask, Path, Rect, Stop, Svg } from 'react-native-svg';
-import { getAccessibleForegroundGradient } from '@coinbase/cds-common/color/getAccessibleForegroundGradient';
-import { borderWidth } from '@coinbase/cds-common/tokens/sparkline';
-import { getAccessibleColor } from '@coinbase/cds-common/utils/getAccessibleColor';
-import { getSparklineRange } from '@coinbase/cds-common/visualizations/getSparklineRange';
-import { getSparklineTransform } from '@coinbase/cds-common/visualizations/getSparklineTransform';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
-import { generateRandomId } from '@coinbase/cds-utils';
-import { generateSparklineAreaWithId } from './generateSparklineWithId';
-import { SparklineAreaPattern } from './SparklineAreaPattern';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/**
- * @deprecated Use LineChart instead. This will be removed in a future major release.
- * @deprecationExpectedRemoval v4
- */
-export const Sparkline = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    background,
-    color,
-    height,
-    path,
-    width,
-    yAxisScalingFactor,
-    children,
-    strokeType = 'solid',
-    fillType = 'dotted'
-  } = _ref;
-  const theme = useTheme();
-  const patternId = useRef(generateRandomId());
-  const strokeColor = color !== 'auto' ? color : getAccessibleColor({
-    background: background != null ? background : theme.color.bg,
-    foreground: 'auto',
-    usage: 'graphic'
-  });
-  const translateProps = getSparklineTransform(width, height, yAxisScalingFactor);
-  const hasChildren = !!children;
-  const useModernFill = fillType === 'gradient' || fillType === 'gradientDotted';
-
-  // Stroke gradient (for strokeType='gradient')
-  const strokeGradient = useMemo(() => {
-    if (strokeType !== 'gradient') return null;
-    return getAccessibleForegroundGradient({
-      background: background != null ? background : theme.color.bg,
-      color,
-      colorScheme: theme.activeColorScheme,
-      usage: 'graphic'
-    });
-  }, [strokeType, background, color, theme]);
-
-  // Calculate gradient coordinates for modern fills
-  const {
-    gradientY1,
-    gradientY2
-  } = useMemo(() => {
-    if (!useModernFill) return {
-      gradientY1: 0,
-      gradientY2: 0
-    };
-    if (!Number.isFinite(yAxisScalingFactor)) {
-      return {
-        gradientY1: 2,
-        gradientY2: height - 2
-      };
-    }
-    const {
-      yRange
-    } = getSparklineRange({
-      height,
-      width,
-      yAxisScalingFactor
-    });
-    const pathHeight = Math.abs(yRange[0] - yRange[1]);
-    const yTranslate = height / 2 - pathHeight / 2;
-    return {
-      gradientY1: yRange[1],
-      gradientY2: height - yTranslate
-    };
-  }, [useModernFill, height, width, yAxisScalingFactor]);
-  const maskGradientId = patternId.current + "-mask-gradient";
-  const maskId = patternId.current + "-mask";
-  const defs = useMemo(() => {
-    if (!strokeGradient && !hasChildren) return null;
-    return /*#__PURE__*/_jsxs(Defs, {
-      children: [strokeGradient && /*#__PURE__*/_jsx(LinearGradient, {
-        id: "gradient",
-        x1: "0%",
-        x2: "100%",
-        y1: "0%",
-        y2: "0%",
-        children: strokeGradient.map((item, i) => /*#__PURE__*/_jsx(Stop, {
-          offset: item.offset,
-          stopColor: item.color
-        }, i + "_" + item))
-      }), hasChildren && fillType === 'dotted' && /*#__PURE__*/_jsx(SparklineAreaPattern, {
-        color: strokeColor,
-        id: patternId.current
-      }), hasChildren && fillType === 'gradient' && /*#__PURE__*/_jsxs(LinearGradient, {
-        gradientUnits: "userSpaceOnUse",
-        id: patternId.current,
-        x1: "0",
-        x2: "0",
-        y1: gradientY1,
-        y2: gradientY2,
-        children: [/*#__PURE__*/_jsx(Stop, {
-          offset: "0%",
-          stopColor: strokeColor,
-          stopOpacity: 0.3
-        }), /*#__PURE__*/_jsx(Stop, {
-          offset: "100%",
-          stopColor: strokeColor,
-          stopOpacity: 0
-        })]
-      }), hasChildren && fillType === 'gradientDotted' && /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(SparklineAreaPattern, {
-          color: strokeColor,
-          id: patternId.current,
-          opacity: 1
-        }), /*#__PURE__*/_jsxs(LinearGradient, {
-          gradientUnits: "userSpaceOnUse",
-          id: maskGradientId,
-          x1: "0",
-          x2: "0",
-          y1: gradientY1,
-          y2: gradientY2,
-          children: [/*#__PURE__*/_jsx(Stop, {
-            offset: "0%",
-            stopColor: "white",
-            stopOpacity: 1
-          }), /*#__PURE__*/_jsx(Stop, {
-            offset: "100%",
-            stopColor: "white",
-            stopOpacity: 0
-          })]
-        }), /*#__PURE__*/_jsx(Mask, {
-          id: maskId,
-          children: /*#__PURE__*/_jsx(Rect, {
-            fill: "url(#" + maskGradientId + ")",
-            height: height,
-            width: width
-          })
-        })]
-      })]
-    });
-  }, [strokeGradient, hasChildren, fillType, strokeColor, gradientY1, gradientY2, height, width, maskGradientId, maskId]);
-  const stroke = strokeType === 'gradient' ? 'url(#gradient)' : strokeColor;
-  const shouldPlaceDefsInside = useModernFill;
-  return /*#__PURE__*/_jsxs(Svg, {
-    fill: "none",
-    height: height,
-    width: width,
-    children: [!shouldPlaceDefsInside && defs, /*#__PURE__*/_jsxs(G, _extends({}, translateProps, {
-      children: [shouldPlaceDefsInside && defs, /*#__PURE__*/_jsx(Path, {
-        ref: ref,
-        d: path,
-        stroke: stroke,
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: borderWidth
-      }), generateSparklineAreaWithId(patternId.current, children, fillType === 'gradientDotted' ? maskId : undefined)]
-    }))]
-  });
-}));
-Sparkline.displayName = 'Sparkline';

package/esm/sparkline/SparklineArea.js

@@ -1,20 +0,0 @@
-import React, { forwardRef, memo } from 'react';
-import { Path } from 'react-native-svg';
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @deprecated Use AreaChart instead. This will be removed in a future major release.
- * @deprecationExpectedRemoval v4
- */
-export const SparklineArea = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    area,
-    patternId,
-    maskId
-  } = _ref;
-  return /*#__PURE__*/_jsx(Path, {
-    ref: ref,
-    d: area,
-    fill: "url(#" + patternId + ")",
-    mask: maskId ? "url(#" + maskId + ")" : undefined
-  });
-}));

package/esm/sparkline/SparklineAreaPattern.js

@@ -1,38 +0,0 @@
-import React from 'react';
-import { Circle, G, Pattern, Rect } from 'react-native-svg';
-import { useSparklineAreaOpacity } from '@coinbase/cds-common/visualizations/useSparklineAreaOpacity';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const SparklineAreaPattern = _ref => {
-  let {
-    color,
-    id,
-    opacity
-  } = _ref;
-  const {
-    activeColorScheme
-  } = useTheme();
-  const themeOpacity = useSparklineAreaOpacity(activeColorScheme);
-  const fillOpacity = opacity != null ? opacity : themeOpacity;
-  return /*#__PURE__*/_jsx(Pattern, {
-    height: "4",
-    id: id,
-    patternUnits: "userSpaceOnUse",
-    width: "4",
-    x: "0",
-    y: "0",
-    children: /*#__PURE__*/_jsxs(G, {
-      children: [/*#__PURE__*/_jsx(Rect, {
-        fill: "transparent",
-        height: "4",
-        width: "4"
-      }), /*#__PURE__*/_jsx(Circle, {
-        cx: "1",
-        cy: "1",
-        fill: color,
-        fillOpacity: fillOpacity,
-        r: "1"
-      })]
-    })
-  });
-};

package/esm/sparkline/SparklineGradient.js

@@ -1,77 +0,0 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { forwardRef, memo, useMemo, useRef } from 'react';
-import { Defs, G, LinearGradient, Path, Stop, Svg } from 'react-native-svg';
-import { getAccessibleForegroundGradient } from '@coinbase/cds-common/color/getAccessibleForegroundGradient';
-import { borderWidth } from '@coinbase/cds-common/tokens/sparkline';
-import { getAccessibleColor } from '@coinbase/cds-common/utils/getAccessibleColor';
-import { getSparklineTransform } from '@coinbase/cds-common/visualizations/getSparklineTransform';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
-import { generateRandomId } from '@coinbase/cds-utils';
-import { generateSparklineAreaWithId } from './generateSparklineWithId';
-import { SparklineAreaPattern } from './SparklineAreaPattern';
-
-/**
- * @deprecated Use LineChart instead. This will be removed in a future major release.
- * @deprecationExpectedRemoval v4
- */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const SparklineGradient = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    background,
-    color,
-    path,
-    height,
-    width,
-    yAxisScalingFactor,
-    children
-  } = _ref;
-  const theme = useTheme();
-  const patternId = useRef(generateRandomId());
-  const translateProps = getSparklineTransform(width, height, yAxisScalingFactor);
-  const gradient = getAccessibleForegroundGradient({
-    background: background != null ? background : theme.color.bg,
-    color,
-    colorScheme: theme.activeColorScheme,
-    usage: 'graphic'
-  });
-  const areaColor = color !== 'auto' ? color : getAccessibleColor({
-    background: background != null ? background : theme.color.bg,
-    foreground: 'auto',
-    usage: 'graphic'
-  });
-  const hasChildren = !!children;
-  const linearGradient = useMemo(() => {
-    return /*#__PURE__*/_jsxs(Defs, {
-      children: [/*#__PURE__*/_jsx(LinearGradient, {
-        id: "gradient",
-        x1: "0%",
-        x2: "100%",
-        y1: "0%",
-        y2: "0%",
-        children: gradient.map((item, i) => /*#__PURE__*/_jsx(Stop, {
-          offset: item.offset,
-          stopColor: item.color
-        }, i + "_" + item))
-      }), hasChildren && /*#__PURE__*/_jsx(SparklineAreaPattern, {
-        color: areaColor,
-        id: patternId.current
-      })]
-    });
-  }, [areaColor, hasChildren, gradient]);
-  return /*#__PURE__*/_jsxs(Svg, {
-    fill: "none",
-    height: height,
-    width: width,
-    children: [linearGradient, /*#__PURE__*/_jsxs(G, _extends({}, translateProps, {
-      children: [/*#__PURE__*/_jsx(Path, {
-        ref: ref,
-        d: path,
-        stroke: "url(#gradient)",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: borderWidth
-      }), generateSparklineAreaWithId(patternId.current, children)]
-    }))]
-  });
-}));
-SparklineGradient.displayName = 'SparklineGradient';

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

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

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

@@ -1,124 +0,0 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React from 'react';
-import { Dimensions } from 'react-native';
-import { assets } from '@coinbase/cds-common/internal/data/assets';
-import { prices, pricesWithScalingFactor } from '@coinbase/cds-common/internal/data/prices';
-import { gutter } from '@coinbase/cds-common/tokens/sizing';
-import { useSparklineArea } from '@coinbase/cds-common/visualizations/useSparklineArea';
-import { useSparklinePath } from '@coinbase/cds-common/visualizations/useSparklinePath';
-import { Cell } from '@coinbase/cds-mobile/cells/Cell';
-import { CellMedia } from '@coinbase/cds-mobile/cells/CellMedia';
-import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
-import { HStack } from '@coinbase/cds-mobile/layout/HStack';
-import { VStack } from '@coinbase/cds-mobile/layout/VStack';
-import { Text } from '@coinbase/cds-mobile/typography';
-import { Sparkline } from '../Sparkline';
-import { SparklineArea } from '../SparklineArea';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const SparklineExample = _ref => {
-  let {
-    imageUrl,
-    name,
-    symbol,
-    color
-  } = _ref;
-  const dimensions = {
-    width: 64,
-    height: 20
-  };
-  const path = useSparklinePath(_extends({}, dimensions, {
-    data: prices
-  }));
-  return /*#__PURE__*/_jsx(Cell, {
-    detail: /*#__PURE__*/_jsxs(HStack, {
-      alignItems: "center",
-      children: [/*#__PURE__*/_jsx(Sparkline, _extends({}, dimensions, {
-        color: color,
-        path: path
-      })), /*#__PURE__*/_jsxs(VStack, {
-        alignContent: "flex-end",
-        alignItems: "flex-end",
-        justifyContent: "center",
-        paddingStart: 2,
-        children: [/*#__PURE__*/_jsx(Text, {
-          align: "end",
-          font: "body",
-          numberOfLines: 1,
-          children: "$2,874.49"
-        }), /*#__PURE__*/_jsx(Text, {
-          align: "end",
-          color: "fgMuted",
-          font: "body",
-          numberOfLines: 1,
-          children: "+36.08%"
-        })]
-      })]
-    }),
-    media: /*#__PURE__*/_jsx(CellMedia, {
-      source: imageUrl,
-      title: "Title",
-      type: "image"
-    }),
-    children: /*#__PURE__*/_jsxs(VStack, {
-      justifyContent: "center",
-      children: [/*#__PURE__*/_jsx(Text, {
-        ellipsize: "tail",
-        font: "headline",
-        numberOfLines: 1,
-        children: name
-      }), /*#__PURE__*/_jsx(Text, {
-        ellipsize: "tail",
-        font: "body",
-        numberOfLines: 1,
-        children: symbol
-      })]
-    })
-  });
-};
-const SparklineScalingExample = props => {
-  const theme = useTheme();
-  const chartHorizontalGutter = theme.space[gutter];
-  const width = Dimensions.get('screen').width - chartHorizontalGutter * 2;
-  const dimensions = {
-    width,
-    height: 320
-  };
-  const path = useSparklinePath(_extends({}, dimensions, props));
-  const area = useSparklineArea(_extends({}, dimensions, props));
-  return /*#__PURE__*/_jsxs(VStack, {
-    children: [/*#__PURE__*/_jsxs(Text, {
-      ellipsize: "tail",
-      font: "headline",
-      numberOfLines: 1,
-      children: ["Scale: ", props.yAxisScalingFactor]
-    }), /*#__PURE__*/_jsx(Sparkline, _extends({}, dimensions, {
-      color: "#F7931A",
-      path: path,
-      yAxisScalingFactor: props.yAxisScalingFactor,
-      children: props.fill && /*#__PURE__*/_jsx(SparklineArea, {
-        area: area
-      })
-    }))]
-  });
-};
-const PressableOpacityScreen = () => {
-  return /*#__PURE__*/_jsxs(ExampleScreen, {
-    children: [/*#__PURE__*/_jsx(Example, {
-      title: "Sparkline",
-      children: /*#__PURE__*/_jsxs(VStack, {
-        marginX: -2,
-        children: [/*#__PURE__*/_jsx(SparklineExample, _extends({}, assets.btc)), /*#__PURE__*/_jsx(SparklineExample, _extends({}, assets.eth)), /*#__PURE__*/_jsx(SparklineExample, _extends({}, assets.xrp)), /*#__PURE__*/_jsx(SparklineExample, _extends({}, assets.dai)), /*#__PURE__*/_jsx(SparklineExample, _extends({}, assets.sushi))]
-      })
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "SparklineWithScale",
-      children: pricesWithScalingFactor.map(item => /*#__PURE__*/_jsx(SparklineScalingExample, _extends({}, item), item.yAxisScalingFactor))
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "SparklineWithScaleAndFill",
-      children: pricesWithScalingFactor.map(item => /*#__PURE__*/_jsx(SparklineScalingExample, _extends({}, item, {
-        fill: true
-      }), item.yAxisScalingFactor))
-    })]
-  });
-};
-export default PressableOpacityScreen;

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

@@ -1,126 +0,0 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React from 'react';
-import { Dimensions } from 'react-native';
-import { assets } from '@coinbase/cds-common/internal/data/assets';
-import { prices, pricesWithScalingFactor } from '@coinbase/cds-common/internal/data/prices';
-import { gutter } from '@coinbase/cds-common/tokens/sizing';
-import { useSparklineArea } from '@coinbase/cds-common/visualizations/useSparklineArea';
-import { useSparklinePath } from '@coinbase/cds-common/visualizations/useSparklinePath';
-import { Cell } from '@coinbase/cds-mobile/cells/Cell';
-import { CellMedia } from '@coinbase/cds-mobile/cells/CellMedia';
-import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
-import { VStack } from '@coinbase/cds-mobile/layout';
-import { Text } from '@coinbase/cds-mobile/typography';
-import { SparklineArea } from '../SparklineArea';
-import { SparklineGradient } from '../SparklineGradient';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const height = 320;
-const SparklineGradientExample = _ref => {
-  let {
-    imageUrl,
-    name,
-    symbol,
-    color,
-    fill
-  } = _ref;
-  const theme = useTheme();
-  const chartHorizontalGutter = theme.space[gutter];
-  const width = Dimensions.get('screen').width - chartHorizontalGutter * 2;
-  const dimensions = {
-    width,
-    height
-  };
-  const path = useSparklinePath(_extends({}, dimensions, {
-    data: prices
-  }));
-  const area = useSparklineArea(_extends({}, dimensions, {
-    data: prices
-  }));
-  return /*#__PURE__*/_jsxs(VStack, {
-    children: [/*#__PURE__*/_jsx(Cell, {
-      media: /*#__PURE__*/_jsx(CellMedia, {
-        source: imageUrl,
-        type: "image"
-      }),
-      children: /*#__PURE__*/_jsxs(VStack, {
-        justifyContent: "center",
-        children: [/*#__PURE__*/_jsx(Text, {
-          ellipsize: "tail",
-          font: "headline",
-          numberOfLines: 1,
-          children: name
-        }), /*#__PURE__*/_jsx(Text, {
-          ellipsize: "tail",
-          font: "body",
-          numberOfLines: 1,
-          children: symbol
-        })]
-      })
-    }), /*#__PURE__*/_jsx(SparklineGradient, _extends({}, dimensions, {
-      color: color,
-      path: path,
-      children: fill && /*#__PURE__*/_jsx(SparklineArea, {
-        area: area
-      })
-    }))]
-  });
-};
-const SparklineScalingExample = props => {
-  const theme = useTheme();
-  const chartHorizontalGutter = theme.space[gutter];
-  const width = Dimensions.get('screen').width - chartHorizontalGutter * 2;
-  const dimensions = {
-    width,
-    height
-  };
-  const path = useSparklinePath(_extends({}, dimensions, props));
-  const area = useSparklineArea(_extends({}, dimensions, props));
-  return /*#__PURE__*/_jsxs(VStack, {
-    children: [/*#__PURE__*/_jsxs(Text, {
-      ellipsize: "tail",
-      font: "headline",
-      numberOfLines: 1,
-      children: ["Scale: ", props.yAxisScalingFactor]
-    }), /*#__PURE__*/_jsx(SparklineGradient, _extends({}, dimensions, {
-      color: "#F7931A",
-      path: path,
-      yAxisScalingFactor: props.yAxisScalingFactor,
-      children: props.fill && /*#__PURE__*/_jsx(SparklineArea, {
-        area: area
-      })
-    }))]
-  });
-};
-const PressableOpacityScreen = () => {
-  return /*#__PURE__*/_jsxs(ExampleScreen, {
-    children: [/*#__PURE__*/_jsxs(Example, {
-      title: "SparklineGradient",
-      children: [/*#__PURE__*/_jsx(SparklineGradientExample, _extends({}, assets.btc)), /*#__PURE__*/_jsx(SparklineGradientExample, _extends({}, assets.eth)), /*#__PURE__*/_jsx(SparklineGradientExample, _extends({}, assets.ltc)), /*#__PURE__*/_jsx(SparklineGradientExample, _extends({}, assets.xrp)), /*#__PURE__*/_jsx(SparklineGradientExample, _extends({}, assets.dai)), /*#__PURE__*/_jsx(SparklineGradientExample, _extends({}, assets.sushi))]
-    }), /*#__PURE__*/_jsxs(Example, {
-      title: "SparklineGradientWithArea",
-      children: [/*#__PURE__*/_jsx(SparklineGradientExample, _extends({}, assets.btc, {
-        fill: true
-      })), /*#__PURE__*/_jsx(SparklineGradientExample, _extends({}, assets.eth, {
-        fill: true
-      })), /*#__PURE__*/_jsx(SparklineGradientExample, _extends({}, assets.ltc, {
-        fill: true
-      })), /*#__PURE__*/_jsx(SparklineGradientExample, _extends({}, assets.xrp, {
-        fill: true
-      })), /*#__PURE__*/_jsx(SparklineGradientExample, _extends({}, assets.dai, {
-        fill: true
-      })), /*#__PURE__*/_jsx(SparklineGradientExample, _extends({}, assets.sushi, {
-        fill: true
-      }))]
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "SparklineGradientWithScale",
-      children: pricesWithScalingFactor.map(item => /*#__PURE__*/_jsx(SparklineScalingExample, _extends({}, item), item.yAxisScalingFactor))
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "SparklineGradientWithAreaAndScale",
-      children: pricesWithScalingFactor.map(item => /*#__PURE__*/_jsx(SparklineScalingExample, _extends({}, item, {
-        fill: true
-      }), item.yAxisScalingFactor))
-    })]
-  });
-};
-export default PressableOpacityScreen;

package/esm/sparkline/generateSparklineWithId.js

@@ -1,7 +0,0 @@
-import { cloneElement } from 'react';
-export function generateSparklineAreaWithId(id, children, maskId) {
-  return children ? /*#__PURE__*/cloneElement(children, {
-    patternId: id,
-    maskId
-  }) : undefined;
-}