@coinbase/cds-mobile 0.0.0 → 8.13.2

package/esm/visualizations/ProgressBarWithFloatLabel.js

@@ -0,0 +1,106 @@
+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, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, I18nManager } from 'react-native';
+import { animateProgressBaseSpec } from '@coinbase/cds-common/animation/progress';
+import { usePreviousValues } from '@coinbase/cds-common/hooks/usePreviousValues';
+import { convertMotionConfig } from '../animation/convertMotionConfig';
+import { useLayout } from '../hooks/useLayout';
+import { Box, VStack } from '../layout';
+import { getProgressBarLabelParts } from './getProgressBarLabelParts';
+import { ProgressTextLabel } from './ProgressTextLabel';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ProgressBarFloatLabel = /*#__PURE__*/memo(_ref => {
+  var _getPreviousPercent;
+  let {
+    label,
+    disabled,
+    progress,
+    labelPlacement,
+    styles
+  } = _ref;
+  const [textWidth, setTextWidth] = useState(-1);
+  const {
+    getPreviousValue: getPreviousPercent,
+    addPreviousValue: addPreviousPercent
+  } = usePreviousValues([0]);
+  const [size, onLayout] = useLayout();
+  const containerWidth = size.width;
+  addPreviousPercent(progress);
+  const previousPercent = (_getPreviousPercent = getPreviousPercent()) != null ? _getPreviousPercent : 0;
+  const animatedProgress = useRef(new Animated.Value(previousPercent));
+  const {
+    value: labelNum,
+    render: renderLabel
+  } = getProgressBarLabelParts(label);
+  useEffect(() => {
+    if (containerWidth > 0 && textWidth > -1) {
+      var _Animated$timing;
+      (_Animated$timing = Animated.timing(animatedProgress.current, convertMotionConfig(_extends({
+        toValue: progress
+      }, animateProgressBaseSpec, {
+        useNativeDriver: true
+      })))) == null || _Animated$timing.start();
+    }
+  }, [progress, animatedProgress, containerWidth, textWidth, addPreviousPercent]);
+  const handleTextLayout = useCallback(event => {
+    setTextWidth(event.nativeEvent.layout.width);
+  }, []);
+  const containerStyle = useMemo(() => [styles == null ? void 0 : styles.labelContainer], [styles == null ? void 0 : styles.labelContainer]);
+  const labelStyle = useMemo(() => [{
+    transform: [{
+      translateX: animatedProgress.current.interpolate({
+        inputRange: [0, 1],
+        outputRange: [I18nManager.isRTL ? containerWidth - textWidth : 0, I18nManager.isRTL ? 0 : containerWidth - textWidth]
+      })
+    }]
+  }], [containerWidth, textWidth]);
+  return /*#__PURE__*/_jsx(Box, {
+    flexWrap: "nowrap",
+    onLayout: onLayout,
+    paddingBottom: labelPlacement === 'above' ? 1 : 0,
+    paddingTop: labelPlacement === 'below' ? 1 : 0,
+    style: containerStyle,
+    testID: "cds-progress-bar-float-label-container",
+    children: /*#__PURE__*/_jsx(Box, {
+      animated: true,
+      alignSelf: "flex-start",
+      flexGrow: 0,
+      flexShrink: 0,
+      onLayout: handleTextLayout,
+      style: labelStyle,
+      testID: "cds-progress-bar-float-label",
+      children: /*#__PURE__*/_jsx(ProgressTextLabel, {
+        color: "fgMuted",
+        disabled: disabled,
+        renderLabel: renderLabel,
+        style: styles == null ? void 0 : styles.label,
+        value: labelNum
+      })
+    })
+  });
+});
+export const ProgressBarWithFloatLabel = /*#__PURE__*/memo(_ref2 => {
+  let {
+    label,
+    labelPlacement = 'above',
+    progress,
+    disabled,
+    children,
+    testID,
+    style,
+    styles
+  } = _ref2;
+  const rootStyle = useMemo(() => [style, styles == null ? void 0 : styles.root], [style, styles == null ? void 0 : styles.root]);
+  const progressBarFloatLabel = /*#__PURE__*/_jsx(ProgressBarFloatLabel, {
+    disabled: disabled,
+    label: label,
+    labelPlacement: labelPlacement,
+    progress: progress,
+    styles: styles
+  });
+  return /*#__PURE__*/_jsxs(VStack, {
+    style: rootStyle,
+    testID: testID,
+    children: [labelPlacement === 'above' && progressBarFloatLabel, children, labelPlacement === 'below' && progressBarFloatLabel]
+  });
+});

package/esm/visualizations/ProgressCircle.js

@@ -0,0 +1,162 @@
+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, useEffect, useMemo, useRef } from 'react';
+import { Animated } from 'react-native';
+import { Circle, G, Svg } from 'react-native-svg';
+import { animateProgressBaseSpec } from '@coinbase/cds-common/animation/progress';
+import { getCircumference, getRadius } from '@coinbase/cds-common/utils/circle';
+import { getProgressCircleParams } from '@coinbase/cds-common/visualizations/getProgressCircleParams';
+import { useProgressSize } from '@coinbase/cds-common/visualizations/useProgressSize';
+import { isTest } from '@coinbase/cds-utils';
+import { convertMotionConfig } from '../animation/convertMotionConfig';
+import { useTheme } from '../hooks/useTheme';
+import { Box } from '../layout';
+import { DefaultProgressCircleContent } from './DefaultProgressCircleContent';
+import { VisualizationContainer } from './VisualizationContainer';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+const ProgressCircleInner = /*#__PURE__*/memo(_ref => {
+  let {
+    size,
+    progress,
+    color,
+    weight,
+    visuallyDisabled,
+    style,
+    onAnimationEnd,
+    onAnimationStart
+  } = _ref;
+  const strokeWidth = useProgressSize(weight);
+  const theme = useTheme();
+  const circleRef = useRef(null);
+  const circumference = getCircumference(getRadius(size, strokeWidth));
+  const animatedStrokeDashOffset = React.useRef(new Animated.Value(circumference));
+  useEffect(() => {
+    const strokeDashoffset = circumference - circumference * progress;
+    onAnimationStart == null || onAnimationStart();
+    Animated.timing(animatedStrokeDashOffset.current, convertMotionConfig(_extends({
+      toValue: strokeDashoffset
+    }, animateProgressBaseSpec, {
+      useNativeDriver: true
+    }))).start(_ref2 => {
+      let {
+        finished
+      } = _ref2;
+      if (finished) onAnimationEnd == null || onAnimationEnd();
+    });
+  }, [circumference, progress, animatedStrokeDashOffset, onAnimationStart, onAnimationEnd]);
+  return /*#__PURE__*/_jsx(AnimatedCircle, _extends({
+    ref: !isTest() ? circleRef : undefined // This is required because Circle is mocked in the unit test to support testID. The mock does not support refs
+    ,
+    strokeDasharray: circumference,
+    strokeDashoffset: animatedStrokeDashOffset.current,
+    strokeLinecap: progress > 0 ? 'round' : 'butt',
+    testID: "cds-progress-circle-inner"
+  }, getProgressCircleParams({
+    size,
+    strokeWidth,
+    stroke: !visuallyDisabled ? theme.color[color] : theme.color.bgLineHeavy
+  }), style || {}));
+});
+export const ProgressCircle = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref3, forwardedRef) => {
+  let {
+    weight = 'normal',
+    progress,
+    // Default is empty string due to iOS VoiceOver repeating percentage multiple times when
+    // a11y label isn't specified
+    accessibilityLabel = '',
+    color = 'bgPrimary',
+    disabled = false,
+    testID,
+    hideContent,
+    hideText,
+    size,
+    contentNode,
+    style,
+    styles,
+    onAnimationEnd,
+    onAnimationStart
+  } = _ref3;
+  const theme = useTheme();
+  const strokeWidth = useProgressSize(weight);
+  const visSize = size != null ? size : '100%';
+  const rootStyle = useMemo(() => [style, styles == null ? void 0 : styles.root], [style, styles == null ? void 0 : styles.root]);
+  const textContainerStyle = useMemo(() => [{
+    padding: strokeWidth
+  }, styles == null ? void 0 : styles.textContainer], [strokeWidth, styles == null ? void 0 : styles.textContainer]);
+  return /*#__PURE__*/_jsx(VisualizationContainer, {
+    height: visSize,
+    width: visSize,
+    children: _ref4 => {
+      let {
+        width,
+        height,
+        circleSize
+      } = _ref4;
+      return /*#__PURE__*/_jsx(Box, {
+        ref: forwardedRef,
+        accessible: true,
+        accessibilityLabel: accessibilityLabel,
+        accessibilityRole: "progressbar",
+        accessibilityValue: {
+          min: 0,
+          max: 100,
+          now: progress * 100
+        },
+        alignItems: "center",
+        height: height,
+        justifyContent: "center",
+        style: rootStyle,
+        testID: testID,
+        width: width,
+        children: /*#__PURE__*/_jsxs(Box, {
+          flexGrow: 0,
+          flexShrink: 0,
+          height: circleSize,
+          style: styles == null ? void 0 : styles.svgContainer,
+          width: circleSize,
+          children: [/*#__PURE__*/_jsx(Svg, {
+            height: circleSize,
+            style: styles == null ? void 0 : styles.svg,
+            viewBox: "0 0 " + circleSize + " " + circleSize,
+            width: circleSize,
+            children: /*#__PURE__*/_jsxs(G, {
+              origin: circleSize / 2 + ", " + circleSize / 2,
+              rotation: -90,
+              children: [/*#__PURE__*/_jsx(Circle, _extends({}, getProgressCircleParams({
+                size: circleSize,
+                strokeWidth,
+                stroke: theme.color.bgLine
+              }), (styles == null ? void 0 : styles.circle) || {})), /*#__PURE__*/_jsx(ProgressCircleInner, {
+                color: color,
+                onAnimationEnd: onAnimationEnd,
+                onAnimationStart: onAnimationStart,
+                progress: progress,
+                size: circleSize,
+                style: styles == null ? void 0 : styles.progress,
+                visuallyDisabled: disabled,
+                weight: weight
+              })]
+            })
+          }, circleSize), !hideText && !hideContent && /*#__PURE__*/_jsx(Box, {
+            height: "100%",
+            position: "absolute",
+            style: textContainerStyle,
+            width: "100%",
+            children: /*#__PURE__*/_jsx(Box, {
+              alignItems: "center",
+              borderRadius: 1000,
+              height: "100%",
+              justifyContent: "center",
+              overflow: "hidden",
+              width: "100%",
+              children: contentNode != null ? contentNode : /*#__PURE__*/_jsx(DefaultProgressCircleContent, {
+                disabled: disabled,
+                progress: progress
+              })
+            })
+          })]
+        })
+      });
+    }
+  });
+}));

package/esm/visualizations/ProgressContainerWithButtons.js

@@ -0,0 +1,39 @@
+import React, { useCallback, useState } from 'react';
+import { Button } from '../buttons';
+import { VStack } from '../layout';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const ProgressContainerWithButtons = _ref => {
+  let {
+    children,
+    hideIncrease
+  } = _ref;
+  const [num, setNum] = useState(0);
+  const [percentIncrease, setPercentIncrease] = useState(0);
+  const reRender = useCallback(() => {
+    setNum(prevNum => prevNum + 1);
+  }, [setNum]);
+  const increase = useCallback(() => {
+    setPercentIncrease(prevPercentIncrease => (prevPercentIncrease + 0.2) % 1);
+  }, [setPercentIncrease]);
+  const calculateProgress = useCallback(currPercent => {
+    const newNum = currPercent + percentIncrease;
+    if (newNum === 1) {
+      return newNum;
+    }
+    return newNum % 1;
+  }, [percentIncrease]);
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    children: [children({
+      calculateProgress
+    }), /*#__PURE__*/_jsx(Button, {
+      compact: true,
+      onPress: reRender,
+      children: "Re-render"
+    }), !hideIncrease && /*#__PURE__*/_jsx(Button, {
+      compact: true,
+      onPress: increase,
+      children: "Increase 20%"
+    })]
+  }, num);
+};

package/esm/visualizations/ProgressIndicator.js

@@ -0,0 +1,58 @@
+const _excluded = ["progress", "style", "testID"];
+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 React, { forwardRef, memo, useMemo } from 'react';
+import { Animated, StyleSheet } from 'react-native';
+import { useTheme } from '../hooks/useTheme';
+import { Box } from '../layout/Box';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const PROGRESS_INDICATOR_WIDTH = 24;
+export const ProgressIndicator = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function ProgressIndicator(_ref, ref) {
+  let {
+      progress,
+      style,
+      testID
+    } = _ref,
+    boxProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const theme = useTheme();
+  const outerStyles = useMemo(() => [styles.dash, {
+    backgroundColor: theme.color.bgLine
+  }], [theme.color.bgLine]);
+  const innerStyles = useMemo(() => [styles.dashOverlay, {
+    backgroundColor: theme.color.bgInverse,
+    zIndex: 2
+  }, progress && {
+    transform: [{
+      translateX: progress.interpolate({
+        inputRange: [0, 1],
+        outputRange: [-PROGRESS_INDICATOR_WIDTH, 0]
+      })
+    }]
+  }], [theme.color.bgInverse, progress]);
+  return /*#__PURE__*/_jsx(Box, _extends({
+    ref: ref,
+    animated: true,
+    alignItems: "center",
+    justifyContent: "center",
+    style: style,
+    testID: testID
+  }, boxProps, {
+    children: /*#__PURE__*/_jsx(Animated.View, {
+      style: outerStyles,
+      children: /*#__PURE__*/_jsx(Animated.View, {
+        style: innerStyles
+      })
+    })
+  }));
+}));
+const styles = StyleSheet.create({
+  dash: {
+    height: 2,
+    width: PROGRESS_INDICATOR_WIDTH,
+    borderRadius: 99,
+    position: 'relative',
+    overflow: 'hidden'
+  },
+  dashOverlay: StyleSheet.absoluteFillObject
+});
+ProgressIndicator.displayName = 'ProgressIndicator';

package/esm/visualizations/ProgressTextLabel.js

@@ -0,0 +1,50 @@
+import React, { memo, useCallback, useMemo } from 'react';
+import { animateProgressBaseSpec } from '@coinbase/cds-common/animation/progress';
+import { usePreviousValues } from '@coinbase/cds-common/hooks/usePreviousValues';
+import { durations } from '@coinbase/cds-common/motion/tokens';
+import { Text } from '../typography/Text';
+import { Counter } from './Counter';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ProgressTextLabel = /*#__PURE__*/memo(_ref => {
+  var _getPreviousValue;
+  let {
+    value,
+    renderLabel,
+    disabled,
+    color,
+    style
+  } = _ref;
+  const {
+    getPreviousValue,
+    addPreviousValue
+  } = usePreviousValues([0]);
+  const accessibilityState = useMemo(() => ({
+    disabled: !!disabled
+  }), [disabled]);
+  addPreviousValue(value);
+  const renderNum = useCallback(num => {
+    const textValue = renderLabel ? renderLabel(num, disabled) : num + "%";
+
+    // if the user supplied value returns a string use default formatting
+    if (typeof textValue === 'string') {
+      return /*#__PURE__*/_jsx(Text, {
+        noWrap: true,
+        tabularNumbers: true,
+        accessibilityState: accessibilityState,
+        align: "end",
+        color: color != null ? color : 'fg',
+        disabled: disabled,
+        font: "label2",
+        style: style,
+        children: textValue
+      });
+    }
+    return textValue;
+  }, [color, disabled, accessibilityState, renderLabel, style]);
+  return /*#__PURE__*/_jsx(Counter, {
+    durationInMillis: durations[animateProgressBaseSpec.duration],
+    endNum: value,
+    renderNum: renderNum,
+    startNum: (_getPreviousValue = getPreviousValue()) != null ? _getPreviousValue : 0
+  });
+});

package/esm/visualizations/VisualizationContainer.js

@@ -0,0 +1,31 @@
+import React, { memo } from 'react';
+import { useVisualizationDimensions } from '@coinbase/cds-common/visualizations/useVisualizationDimensions';
+import { useLayout } from '../hooks/useLayout';
+import { Box } from '../layout';
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+Some visualizations need a static width to render. This container can be dynamically sized and it will inject its static calculated dimensions into its child
+ */
+export const VisualizationContainer = /*#__PURE__*/memo(_ref => {
+  let {
+    width,
+    height,
+    children
+  } = _ref;
+  const [{
+    width: layoutWidth,
+    height: layoutHeight
+  }, onLayout] = useLayout();
+  const dimensions = useVisualizationDimensions({
+    userDefinedWidth: width,
+    userDefinedHeight: height,
+    calculatedWidth: layoutWidth,
+    calculatedHeight: layoutHeight
+  });
+  return /*#__PURE__*/_jsx(Box, {
+    height: height,
+    onLayout: dimensions.shouldObserve ? onLayout : undefined,
+    width: width,
+    children: dimensions.width && dimensions.height ? children(dimensions) : null
+  });
+});

package/esm/visualizations/__figma__/ProgressBar.figma.js

@@ -0,0 +1,99 @@
+const _excluded = ["floatLabel", "progress", "labelPlacement"],
+  _excluded2 = ["showStartLabel", "showEndLabel", "progress", "labelPlacement"];
+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 React from 'react';
+import { figma } from '@figma/code-connect';
+import { ProgressBar } from '../ProgressBar';
+import { ProgressBarWithFixedLabels } from '../ProgressBarWithFixedLabels';
+import { ProgressBarWithFloatLabel } from '../ProgressBarWithFloatLabel';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(ProgressBar, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=64-746&m=dev', {
+  imports: ["import { ProgressBar } from '@coinbase/cds-mobile/visualizations/ProgressBar';", "import { ProgressBarWithFloatLabel } from '@coinbase/cds-mobile/visualizations/ProgressBarWithFloatLabel';"],
+  props: {
+    weight: figma.enum('weight', {
+      normal: 'normal',
+      heavy: 'heavy',
+      thin: 'thin'
+    }),
+    disabled: figma.boolean('disabled'),
+    progress: figma.enum('progress', {
+      '100%': 1,
+      '75%': 0.75,
+      '50%': 0.5,
+      '25%': 0.25,
+      '0%': 0
+    }),
+    floatLabel: figma.enum('progress', {
+      '100%': 100,
+      '75%': 75,
+      '50%': 50,
+      '25%': 25,
+      '0%': 0
+    }),
+    labelPlacement: figma.enum('label placement', {
+      'float above': 'above',
+      'float below': 'below'
+    })
+  },
+  example: _ref => {
+    let {
+        floatLabel,
+        progress,
+        labelPlacement
+      } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    return /*#__PURE__*/_jsx(ProgressBarWithFloatLabel, {
+      label: floatLabel,
+      labelPlacement: labelPlacement,
+      progress: progress,
+      children: /*#__PURE__*/_jsx(ProgressBar, _extends({
+        progress: progress
+      }, props))
+    });
+  }
+});
+figma.connect(ProgressBar, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=64-746&m=dev', {
+  imports: ["import { ProgressBar } from '@coinbase/cds-mobile/visualizations/ProgressBar';", "import { ProgressBarWithFloatLabel } from '@coinbase/cds-mobile/visualizations/ProgressBarWithFloatLabel';"],
+  props: {
+    weight: figma.enum('weight', {
+      normal: 'normal',
+      heavy: 'heavy',
+      thin: 'thin'
+    }),
+    disabled: figma.boolean('disabled'),
+    progress: figma.enum('progress', {
+      '100%': 1,
+      '75%': 0.75,
+      '50%': 0.5,
+      '25%': 0.25,
+      '0%': 0
+    }),
+    labelPlacement: figma.enum('label placement', {
+      'fixed above': 'above',
+      'fixed below': 'below',
+      'side-by-side': 'beside'
+    }),
+    showStartLabel: figma.boolean('show start label'),
+    showEndLabel: figma.boolean('show end label')
+  },
+  example: _ref2 => {
+    let {
+        showStartLabel,
+        showEndLabel,
+        progress,
+        labelPlacement
+      } = _ref2,
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+    const startLabel = showStartLabel ? progress : undefined;
+    const endLabel = showEndLabel ? progress : undefined;
+    return /*#__PURE__*/_jsx(ProgressBarWithFixedLabels, {
+      endLabel: endLabel,
+      labelPlacement: labelPlacement,
+      startLabel: startLabel,
+      children: /*#__PURE__*/_jsx(ProgressBar, _extends({
+        progress: progress
+      }, props))
+    });
+  }
+});

package/esm/visualizations/__figma__/ProgressCircle.figma.js

@@ -0,0 +1,26 @@
+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 { figma } from '@figma/code-connect';
+import { ProgressCircle } from '../ProgressCircle';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(ProgressCircle, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=64-917&m=dev', {
+  imports: ["import { ProgressCircle } from '@coinbase/cds-mobile/visualizations/ProgressCircle';"],
+  props: {
+    hideText: figma.boolean('progress label', {
+      true: undefined,
+      false: true
+    }),
+    weight: figma.enum('weight', {
+      normal: 'normal',
+      heavy: 'heavy',
+      thin: 'thin'
+    }),
+    progress: figma.enum('progress', {
+      '100%': 1,
+      '75%': 0.75,
+      '50%': 0.5,
+      '25%': 0.25
+    })
+  },
+  example: props => /*#__PURE__*/_jsx(ProgressCircle, _extends({}, props))
+});