@telefonica/mistica 10.16.0 → 10.20.0

package/dist/video.js

@@ -0,0 +1,161 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.default = exports.RATIO = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var React = _interopRequireWildcard(require("react"));
+var _image = require("./image");
+var _jss = require("./jss");
+var _common = require("./utils/common");
+function _interopRequireWildcard(obj) {
+    if (obj && obj.__esModule) {
+        return obj;
+    } else {
+        var newObj = {
+        };
+        if (obj != null) {
+            for(var key in obj){
+                if (Object.prototype.hasOwnProperty.call(obj, key)) {
+                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {
+                    };
+                    if (desc.get || desc.set) {
+                        Object.defineProperty(newObj, key, desc);
+                    } else {
+                        newObj[key] = obj[key];
+                    }
+                }
+            }
+        }
+        newObj.default = obj;
+        return newObj;
+    }
+}
+function _objectWithoutProperties(source, excluded) {
+    if (source == null) return {
+    };
+    var target = _objectWithoutPropertiesLoose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _objectWithoutPropertiesLoose(source, excluded) {
+    if (source == null) return {
+    };
+    var target = {
+    };
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+var RATIO = {
+    '1:1': 1,
+    '16:9': 16 / 9,
+    '12:5': 12 / 5
+};
+exports.RATIO = RATIO;
+var useStyles = (0, _jss).createUseStyles(function() {
+    return {
+        video: {
+            borderRadius: function borderRadius(param) {
+                var noBorderRadius = param.noBorderRadius;
+                return noBorderRadius ? 0 : 4;
+            },
+            display: 'block',
+            maxWidth: '100%',
+            maxHeight: '100%',
+            objectFit: 'cover',
+            aspectRatio: function aspectRatio(param) {
+                var aspectRatio1 = param.aspectRatio;
+                return aspectRatio1 !== null && aspectRatio1 !== void 0 ? aspectRatio1 : 'unset';
+            }
+        }
+    };
+});
+/** Transparent 1x1px PNG  */ var TRANSPARENT_PIXEL = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAtJREFUGFdjYAACAAAFAAGq1chRAAAAAElFTkSuQmCC';
+var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
+    var src = _param.src, poster = _param.poster, _autoPlay = _param.autoPlay, autoPlay = _autoPlay === void 0 ? true : _autoPlay, _muted = _param.muted, muted = _muted === void 0 ? true : _muted, _loop = _param.loop, loop = _loop === void 0 ? true : _loop, _preload = _param.preload, preload = _preload === void 0 ? 'none' : _preload, _aspectRatio = _param.aspectRatio, aspectRatio = _aspectRatio === void 0 ? '1:1' : _aspectRatio, props = _objectWithoutProperties(_param, [
+        "src",
+        "poster",
+        "autoPlay",
+        "muted",
+        "loop",
+        "preload",
+        "aspectRatio"
+    ]);
+    var noBorderRadius = (0, _image).useDisableBorderRadius();
+    var classes = useStyles({
+        noBorderRadius: noBorderRadius,
+        aspectRatio: !props.width && !props.height ? RATIO[aspectRatio] : undefined
+    });
+    var videoRef = React.useRef(null);
+    React.useEffect(function() {
+        var video = videoRef.current;
+        if (video && autoPlay && video.paused) {
+            video.play();
+        }
+    }, [
+        autoPlay
+    ]);
+    // normalize sources
+    var sources = (Array.isArray(src) ? src : [
+        src
+    ]).map(function(source) {
+        if (typeof source === 'string') {
+            return {
+                src: source
+            };
+        } else {
+            return source;
+        }
+    });
+    var width = props.width;
+    var height = props.height;
+    if (props.width !== undefined && props.height !== undefined) {
+        width = props.width;
+        height = props.height;
+    } else if (props.width !== undefined) {
+        height = props.width / RATIO[aspectRatio];
+    } else if (props.height !== undefined) {
+        width = props.height * RATIO[aspectRatio];
+    } else {
+        width = '100%';
+    }
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx("video", {
+        ref: (0, _common).combineRefs(ref, videoRef),
+        playsInline: true,
+        disablePictureInPicture: true,
+        disableRemotePlayback: true,
+        autoPlay: autoPlay,
+        muted: muted,
+        loop: loop,
+        width: width,
+        height: height,
+        className: classes.video,
+        preload: preload,
+        // This transparent pixel fallback avoids showing the ugly "play" image in android webviews
+        poster: poster || TRANSPARENT_PIXEL,
+        children: sources.map(function(param, index) {
+            var src = param.src, type = param.type;
+            /*#__PURE__*/ return (0, _jsxRuntime).jsx("source", {
+                src: src,
+                type: type
+            }, index);
+        })
+    }));
+});
+var _default = Video;
+exports.default = _default;

package/dist/video.js.flow

@@ -0,0 +1,50 @@
+// @flow
+
+import * as React from "react";
+export type AspectRatio = "1:1" | "16:9" | "12:5";
+declare export var RATIO: {
+  "1:1": number,
+  "16:9": number,
+  "12:5": number,
+};
+declare type VideoSource = {
+  src: string,
+  type?: string,
+};
+export type VideoProps = {
+ /**
+  * defaults to 100% when no width and no height are given
+  */
+ width?: number,
+ height?: number,
+ /**
+  * defaults to 1:1, if both width and height are given, aspectRatio is ignored
+  */
+ aspectRatio?: AspectRatio,
+ /**
+  * accepts multiple sources
+  */
+ src: string | Array<string> | VideoSource | Array<VideoSource>,
+ /**
+  * defaults to true
+  */
+ loop?: boolean,
+ /**
+  * defaults to true
+  */
+ muted?: boolean,
+ /**
+  * defaults to true
+  */
+ autoPlay?: boolean,
+ poster?: string,
+ /**
+  * defaults to none
+  */
+ preload?: "none" | "metadata" | "auto",
+};
+declare var Video: React.ComponentType<{
+  ...VideoProps,
+  ref?: React.Ref<HTMLVideoElement>,
+}>;
+declare export default typeof Video;

package/dist-es/button.js

@@ -361,6 +361,11 @@ var Button = function(props) {
         disabled: props.disabled || showSpinner || isFormSending,
         role: 'button'
     };
+    if (process.env.NODE_ENV !== 'production') {
+        if (props.to === '' || props.href === '') {
+            throw Error('to or href props are empty strings');
+        }
+    }
     if (props.fake) {
         return(/*#__PURE__*/ _jsx(Touchable, _objectSpread({
             maybe: true
@@ -384,22 +389,25 @@ var Button = function(props) {
             onPress: props.onPress
         })));
     }
-    if (props.to) {
+    if (props.to || props.to === '') {
         return(/*#__PURE__*/ _jsx(Touchable, _objectSpread({
         }, commonProps, {
             to: props.to,
             fullPageOnWebView: props.fullPageOnWebView
         })));
     }
-    if (props.href) {
+    if (props.href || props.href === '') {
         return(/*#__PURE__*/ _jsx(Touchable, _objectSpread({
         }, commonProps, {
             href: props.href,
             newTab: props.newTab
         })));
     }
-    // this cannot happen
-    throw Error('Bad button props');
+    if (process.env.NODE_ENV !== 'production') {
+        // this cannot happen
+        throw Error('Bad button props');
+    }
+    return null;
 };
 var useButtonLinkStyles = createUseStyles(function(theme) {
     var padding = 6;
@@ -456,6 +464,11 @@ export var ButtonLink = /*#__PURE__*/ React.forwardRef(function(props, ref) {
             children: props.children
         })
     };
+    if (process.env.NODE_ENV !== 'production') {
+        if (props.to === '' || props.href === '') {
+            throw Error('to or href props are empty strings');
+        }
+    }
     if (props.onPress) {
         return(/*#__PURE__*/ _jsx(Touchable, _objectSpread({
             ref: ref
@@ -463,7 +476,7 @@ export var ButtonLink = /*#__PURE__*/ React.forwardRef(function(props, ref) {
             onPress: props.onPress
         })));
     }
-    if (props.to) {
+    if (props.to || props.to === '') {
         return(/*#__PURE__*/ _jsx(Touchable, _objectSpread({
             ref: ref
         }, commonProps, {
@@ -471,7 +484,7 @@ export var ButtonLink = /*#__PURE__*/ React.forwardRef(function(props, ref) {
             fullPageOnWebView: props.fullPageOnWebView
         })));
     }
-    if (props.href) {
+    if (props.href || props.href === '') {
         return(/*#__PURE__*/ _jsx(Touchable, _objectSpread({
             ref: ref
         }, commonProps, {
@@ -479,8 +492,11 @@ export var ButtonLink = /*#__PURE__*/ React.forwardRef(function(props, ref) {
             newTab: props.newTab
         })));
     }
-    // this cannot happen
-    throw Error('Bad button props');
+    if (process.env.NODE_ENV !== 'production') {
+        // this cannot happen
+        throw Error('Bad button props');
+    }
+    return null;
 });
 export var ButtonPrimary = function(props) {
     var classes = usePrimaryButtonStyles();

package/dist-es/card.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import Tag from './tag';
 import Stack from './stack';
@@ -8,13 +8,13 @@ import { Text1, Text2, Text4 } from './text';
 import { createUseStyles } from './jss';
 import { Boxed } from './boxed';
 import ButtonGroup from './button-group';
+import { DisableBorderRadiusProvider } from './image';
 var useCardContentStyles = createUseStyles(function() {
     return {
         actions: {
             flex: 1,
             display: 'flex',
-            alignItems: 'flex-end',
-            marginTop: 16
+            alignItems: 'flex-end'
         }
     };
 });
@@ -28,32 +28,30 @@ var CardContent = function(param) {
         }
         if (typeof headline === 'string') {
             return(/*#__PURE__*/ _jsx(Tag, {
-                color: theme.colors.promo,
+                type: "promo",
                 children: headline
             }));
         }
         return headline;
     };
-    return(/*#__PURE__*/ _jsxs(_Fragment, {
+    return(/*#__PURE__*/ _jsxs(Stack, {
+        space: 16,
         children: [
             /*#__PURE__*/ _jsxs(Stack, {
-                space: 16,
+                space: 8,
                 children: [
-                    /*#__PURE__*/ _jsxs(Stack, {
-                        space: 8,
-                        children: [
-                            (headline || pretitle || title || subtitle) && /*#__PURE__*/ _jsx("header", {
-                                children: /*#__PURE__*/ _jsxs(Stack, {
+                    (headline || pretitle || title || subtitle) && /*#__PURE__*/ _jsx("header", {
+                        children: /*#__PURE__*/ _jsxs(Stack, {
+                            space: 16,
+                            children: [
+                                renderHeadline(),
+                                /*#__PURE__*/ _jsxs(Stack, {
                                     space: 4,
                                     children: [
-                                        renderHeadline(),
-                                        pretitle && /*#__PURE__*/ _jsx(Box, {
-                                            paddingTop: 4,
-                                            children: /*#__PURE__*/ _jsx(Text1, {
-                                                regular: true,
-                                                uppercase: true,
-                                                children: pretitle
-                                            })
+                                        pretitle && /*#__PURE__*/ _jsx(Text1, {
+                                            regular: true,
+                                            uppercase: true,
+                                            children: pretitle
                                         }),
                                         /*#__PURE__*/ _jsx(Text4, {
                                             as: "h1",
@@ -66,20 +64,20 @@ var CardContent = function(param) {
                                         })
                                     ]
                                 })
-                            }),
-                            description && /*#__PURE__*/ _jsx(Text2, {
-                                as: "p",
-                                regular: true,
-                                color: theme.colors.textSecondary,
-                                children: description
-                            })
-                        ]
+                            ]
+                        })
                     }),
-                    extra && /*#__PURE__*/ _jsx("div", {
-                        children: extra
+                    description && /*#__PURE__*/ _jsx(Text2, {
+                        as: "p",
+                        regular: true,
+                        color: theme.colors.textSecondary,
+                        children: description
                     })
                 ]
             }),
+            extra && /*#__PURE__*/ _jsx("div", {
+                children: extra
+            }),
             (button || buttonLink) && /*#__PURE__*/ _jsx("div", {
                 className: classes.actions,
                 children: /*#__PURE__*/ _jsx(ButtonGroup, {
@@ -141,8 +139,10 @@ export var MediaCard = /*#__PURE__*/ React.forwardRef(function(param, ref) {
             className: classes.mediaCard,
             "aria-label": ariaLabel,
             children: [
-                /*#__PURE__*/ _jsx("div", {
+                typeof media.src === 'string' ? /*#__PURE__*/ _jsx("div", {
                     className: classes.media
+                }) : /*#__PURE__*/ _jsx(DisableBorderRadiusProvider, {
+                    children: media
                 }),
                 /*#__PURE__*/ _jsx("div", {
                     className: classes.content,

package/dist-es/credit-card-expiration-field.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useForm, useFieldProps } from './form-context';
 import { useTheme } from './hooks';
-import TextFieldBase from './text-field-base';
+import { TextFieldBaseAutosuggest } from './text-field-base';
 function _arrayWithHoles(arr) {
     if (Array.isArray(arr)) return arr;
 }
@@ -192,7 +192,7 @@ var CreditCardExpirationField = function(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ _jsx(TextFieldBase, _objectSpread({
+    return(/*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         onChange: function(event) {
             fieldProps.onChange(event);

package/dist-es/credit-card-number-field.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { useForm, useFieldProps } from './form-context';
 import { useTheme } from './hooks';
 import { getCreditCardNumberLength, isAmericanExpress, isVisa, isMasterCard, isValidCreditCardNumber } from './utils/credit-card';
-import TextFieldBase from './text-field-base';
+import { TextFieldBaseAutosuggest } from './text-field-base';
 import IconCreditcard from './icons/icon-creditcard';
 import IconVisa from './icons/icon-visa';
 import IconMastercard from './icons/icon-mastercard';
@@ -305,7 +305,7 @@ var CreditCardNumberField = function(_param) {
         onChangeValue: onChangeValue
     });
     var ref2;
-    return(/*#__PURE__*/ _jsx(TextFieldBase, _objectSpread({
+    return(/*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         onChange: function(event) {
             fieldProps.onChange(event);

package/dist-es/cvv-field.js

@@ -7,7 +7,7 @@ import Tooltip from './tooltip';
 import IconButton from './icon-button';
 import IcnInfo from './icons/icon-info-cvv';
 import { useFieldProps, useForm } from './form-context';
-import TextFieldBase from './text-field-base';
+import { TextFieldBaseAutosuggest } from './text-field-base';
 import { IntegerInput } from './integer-field';
 function _defineProperty(obj, key, value) {
     if (key in obj) {
@@ -152,7 +152,7 @@ var CvvField = function(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ _jsx(TextFieldBase, _objectSpread({
+    return(/*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         maxLength: maxLength,
         onChange: function(event) {

package/dist-es/date-field.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useFieldProps } from './form-context';
-import TextFieldBase from './text-field-base';
+import { TextFieldBaseAutosuggest } from './text-field-base';
 import { isInputTypeSupported } from './utils/dom';
 import { isServerSide } from './utils/environment';
 import IconCalendarRegular from './generated/mistica-icons/icon-calendar-regular';
@@ -118,7 +118,7 @@ var DateField = function(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    var nativePicker = /*#__PURE__*/ _jsx(TextFieldBase, _objectSpread({
+    var nativePicker = /*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         min: min ? getLocalDateString(min) : undefined,
         max: max ? getLocalDateString(max) : undefined,

package/dist-es/date-time-field.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useFieldProps } from './form-context';
-import TextFieldBase from './text-field-base';
+import { TextFieldBaseAutosuggest } from './text-field-base';
 import { isInputTypeSupported } from './utils/dom';
 import { isServerSide } from './utils/environment';
 import { getLocalDateTimeString } from './utils/time';
@@ -119,7 +119,7 @@ var FormDateField = function(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    var nativePicker = /*#__PURE__*/ _jsx(TextFieldBase, _objectSpread({
+    var nativePicker = /*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         min: min ? getLocalDateTimeString(min) : undefined,
         max: max ? getLocalDateTimeString(max) : undefined,

package/dist-es/date-time-picker.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
-import TextFieldBase from './text-field-base';
+import { TextFieldBaseAutosuggest } from './text-field-base';
 import IconCalendarRegular from './generated/mistica-icons/icon-calendar-regular';
 import Datetime from 'react-datetime';
 import Overlay from './overlay';
@@ -367,7 +367,7 @@ var DateTimePicker = function(_param) {
     };
     return(/*#__PURE__*/ _jsxs(_Fragment, {
         children: [
-            /*#__PURE__*/ _jsx(TextFieldBase, _objectSpread({
+            /*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({
             }, rest, {
                 style: {
                     cursor: 'default'

package/dist-es/decimal-field.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useFieldProps } from './form-context';
 import { useTheme } from './hooks';
-import TextFieldBase from './text-field-base';
+import { TextFieldBaseAutosuggest } from './text-field-base';
 import { createChangeEvent } from './utils/dom';
 import { useRifm } from 'rifm';
 import { combineRefs } from './utils/common';
@@ -191,7 +191,7 @@ var DecimalField = function(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ _jsx(TextFieldBase, _objectSpread({
+    return(/*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         inputComponent: DecimalInput,
         inputProps: {

package/dist-es/email-field.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useFieldProps } from './form-context';
 import { useTheme } from './hooks';
-import TextFieldBase from './text-field-base';
+import { TextFieldBaseAutosuggest } from './text-field-base';
 function _defineProperty(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -92,7 +92,7 @@ var EmailField = function(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ _jsx(TextFieldBase, _objectSpread({
+    return(/*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         type: "email",
         inputMode: "email",

package/dist-es/feedback.js

@@ -420,13 +420,12 @@ export var SuccessFeedbackScreen = function(props) {
 };
 var ErrorFeedbackScreen = function(_param) {
     var children = _param.children, errorReference = _param.errorReference, otherProps = _objectWithoutProperties(_param, ["children", "errorReference"]);
-    var ref = useTheme(), skinName = ref.skinName, colors = ref.colors;
-    var hasIcon = skinName !== VIVO_SKIN;
+    var ref = useTheme(), colors = ref.colors;
     return(/*#__PURE__*/ _jsxs(FeedbackScreen, _objectSpread({
     }, otherProps, {
         hapticFeedback: "error",
-        icon: hasIcon ? /*#__PURE__*/ _jsx(IcnError, {
-        }) : undefined,
+        icon: /*#__PURE__*/ _jsx(IcnError, {
+        }),
         animateText: true,
         children: [
             children,
@@ -440,12 +439,10 @@ var ErrorFeedbackScreen = function(_param) {
 };
 export { ErrorFeedbackScreen };
 export var InfoFeedbackScreen = function(props) {
-    var ref = useTheme(), skinName = ref.skinName;
-    var hasIcon = skinName !== VIVO_SKIN;
     return(/*#__PURE__*/ _jsx(FeedbackScreen, _objectSpread({
     }, props, {
-        icon: hasIcon ? /*#__PURE__*/ _jsx(IcnInfo, {
-        }) : undefined
+        icon: /*#__PURE__*/ _jsx(IcnInfo, {
+        })
     })));
 };
 export var SuccessFeedback = function(param) {

package/dist-es/iban-field.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useRifm } from 'rifm';
 import { useFieldProps } from './form-context';
-import TextFieldBase from './text-field-base';
+import { TextFieldBaseAutosuggest } from './text-field-base';
 import { createChangeEvent } from './utils/dom';
 import { combineRefs } from './utils/common';
 import { useTheme } from './hooks';
@@ -246,7 +246,7 @@ var IbanField = function(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ _jsx(TextFieldBase, _objectSpread({
+    return(/*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         inputComponent: IbanInput
     })));

package/dist-es/icons/icon-success.js

@@ -59,21 +59,29 @@ var IconSuccessO2 = function(param) {
         children: /*#__PURE__*/ _jsxs("g", {
             className: classnames(_defineProperty({
             }, classes.iconContainer, !color)),
-            strokeWidth: "2",
             strokeLinecap: "round",
             strokeLinejoin: "round",
             children: [
                 /*#__PURE__*/ _jsx("path", _objectSpread({
                     fill: "none",
+                    strokeWidth: "2",
                     stroke: color ? color : undefined,
-                    strokeMiterlimit: "10",
-                    d: "M21.7,35.6l2.8,2.8c1.1,1.1,2.9,1.1,4.1,0l17.3-17.3"
-                }, !skipAnimation && mergeProperties(getAnimateDrawLineProps('33', '0.9s', platformOverrides), getAnimateHopInProps('0.9s', platformOverrides)))),
+                    d: "M45.64 53.84A25.599 25.599 0 0 1 32 57.75C17.78 57.75 6.25 46.22 6.25 32S17.78 6.25 32 6.25 57.75 17.78 57.75 32c0 5.13-1.5 9.92-4.09 13.93"
+                }, !skipAnimation && getAnimateDrawLineProps('202', '0.3s', platformOverrides))),
                 /*#__PURE__*/ _jsx("path", _objectSpread({
                     fill: "none",
+                    strokeWidth: "2",
+                    stroke: color ? color : undefined,
+                    d: "m19.33 30.39 9.88 10.95 18.13-19.23"
+                }, !skipAnimation && mergeProperties(getAnimateDrawLineProps('44', '0.6s', platformOverrides), getAnimateHopInProps('0.6', platformOverrides)))),
+                /*#__PURE__*/ _jsx("circle", _objectSpread({
+                    fill: "none",
+                    strokeWidth: "2",
                     stroke: color ? color : undefined,
-                    d: "M49.1,57.9C44.2,61.1,38.3,63,32,63C14.9,63,1,49.1,1,32C1,14.9,14.9,1,32,1c17.1,0,31,13.9,31,31c0,7.5-2.6,14.3-7.1,19.7"
-                }, !skipAnimation && getAnimateDrawLineProps('186', '0.5s', platformOverrides)))
+                    cx: "50.18",
+                    cy: "50.1",
+                    r: ".89"
+                }, !skipAnimation && getAnimateDrawLineProps('180', '0.2s', platformOverrides)))
             ]
         })
     }));