dhre-ui-kit 0.0.247 → 0.0.249

package/lib/index.mjs

@@ -1,9 +1,9 @@
-import React, { createContext, useContext, useRef, useEffect, useState, memo, useCallback } from 'react';
+import React, { createContext, useContext, useState, useEffect, useRef, memo, useCallback } from 'react';
 import { useSelector } from 'react-redux';
-import { Dimensions, StyleSheet, Text, Pressable, View, Modal, KeyboardAvoidingView, Platform, Animated, Easing, TextInput, ScrollView, FlatList, TouchableOpacity, Alert, Linking, PanResponder } from 'react-native';
+import { Dimensions, StyleSheet, Text, Pressable, View, Modal, KeyboardAvoidingView, Platform, TextInput, ScrollView, Animated, FlatList, TouchableOpacity, Alert, Linking, PanResponder } from 'react-native';
 import { PanGestureHandler, GestureHandlerRootView, Swipeable } from 'react-native-gesture-handler';
 import { BlurView } from '@react-native-community/blur';
-import Svg, { Defs, LinearGradient, Stop, Circle } from 'react-native-svg';
+import LottieView from 'lottie-react-native';
 import Tooltip from 'react-native-walkthrough-tooltip';
 import Pdf from 'react-native-pdf';
 import * as Progress from 'react-native-progress';
@@ -15,6 +15,7 @@ import { Dropdown } from 'react-native-element-dropdown';
 import DocumentPicker from 'react-native-document-picker';
 import RNFS from 'react-native-fs';
 import OTPVerify, { removeListener, startOtpListener } from 'react-native-otp-verify';
+import { verticalScale as verticalScale$1, moderateScale as moderateScale$1 } from 'src/utils/stylehelper';
 import Clipboard from '@react-native-clipboard/clipboard';
 
 var ShapeType = /* @__PURE__ */ ((ShapeType2) => {
@@ -710,6 +711,13 @@ const BottomDrawer = ({
 
 const createStyles$3 = (theme) => {
   return StyleSheet.create({
+    container: {
+      position: "absolute",
+      left: 0,
+      right: 0,
+      bottom: 0,
+      top: 0
+    },
     backdrop: {
       flex: 1,
       justifyContent: "center",
@@ -745,68 +753,22 @@ const createStyles$3 = (theme) => {
   });
 };
 
+const loaderJson = { "nm": "Main Scene", "ddd": 0, "h": 100, "w": 100, "meta": { "g": "@lottiefiles/creator 1.44.0" }, "layers": [{ "ty": 4, "nm": "6", "sr": 1, "st": 0, "op": 120, "ip": 0, "hd": false, "ddd": 0, "bm": 0, "hasMask": false, "ao": 0, "ks": { "a": { "a": 0, "k": [-2.905, -24.228, 0], "ix": 1 }, "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }, "sk": { "a": 0, "k": 0 }, "p": { "a": 0, "k": [50, 50, 0], "ix": 2 }, "r": { "a": 1, "k": [{ "o": { "x": 0.333, "y": 0 }, "i": { "x": 0.223, "y": 1 }, "s": [0], "t": 10 }, { "s": [360], "t": 100 }], "ix": 10 }, "sa": { "a": 0, "k": 0 }, "o": { "a": 0, "k": 100, "ix": 11 } }, "shapes": [{ "ty": "gr", "bm": 0, "hd": false, "mn": "ADBE Vector Group", "nm": "Ellipse 1", "ix": 1, "cix": 2, "np": 3, "it": [{ "ty": "el", "bm": 0, "hd": false, "mn": "ADBE Vector Shape - Ellipse", "nm": "Ellipse Path 1", "d": 1, "p": { "a": 0, "k": [0, 0], "ix": 3 }, "s": { "a": 0, "k": [14.822, 14.822], "ix": 2 } }, { "ty": "fl", "bm": 0, "hd": false, "mn": "ADBE Vector Graphic - Fill", "nm": "Fill 1", "c": { "a": 0, "k": [0.8, 0.8, 0.8], "ix": 4 }, "r": 1, "o": { "a": 0, "k": 100, "ix": 5 } }, { "ty": "tr", "a": { "a": 0, "k": [0, 0], "ix": 1 }, "s": { "a": 1, "k": [{ "o": { "x": 0.333, "y": 0 }, "i": { "x": 0.236, "y": 1 }, "s": [100, 100], "t": 10 }, { "s": [0, 0], "t": 100 }], "ix": 3 }, "sk": { "a": 0, "k": 0, "ix": 4 }, "p": { "a": 0, "k": [-2.905, -64.316], "ix": 2 }, "r": { "a": 0, "k": 357, "ix": 6 }, "sa": { "a": 0, "k": 0, "ix": 5 }, "o": { "a": 0, "k": 100, "ix": 7 } }] }], "ind": 1 }, { "ty": 4, "nm": "5", "sr": 1, "st": 0, "op": 120, "ip": 0, "hd": false, "ddd": 0, "bm": 0, "hasMask": false, "ao": 0, "ks": { "a": { "a": 0, "k": [-2.905, -24.228, 0], "ix": 1 }, "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }, "sk": { "a": 0, "k": 0 }, "p": { "a": 0, "k": [50, 50, 0], "ix": 2 }, "r": { "a": 1, "k": [{ "o": { "x": 0.333, "y": 0 }, "i": { "x": 0.223, "y": 1 }, "s": [0], "t": 8 }, { "s": [360], "t": 98 }], "ix": 10 }, "sa": { "a": 0, "k": 0 }, "o": { "a": 0, "k": 100, "ix": 11 } }, "shapes": [{ "ty": "gr", "bm": 0, "hd": false, "mn": "ADBE Vector Group", "nm": "Ellipse 1", "ix": 1, "cix": 2, "np": 3, "it": [{ "ty": "el", "bm": 0, "hd": false, "mn": "ADBE Vector Shape - Ellipse", "nm": "Ellipse Path 1", "d": 1, "p": { "a": 0, "k": [0, 0], "ix": 3 }, "s": { "a": 0, "k": [14.822, 14.822], "ix": 2 } }, { "ty": "fl", "bm": 0, "hd": false, "mn": "ADBE Vector Graphic - Fill", "nm": "Fill 1", "c": { "a": 0, "k": [0.8, 0.8, 0.8], "ix": 4 }, "r": 1, "o": { "a": 0, "k": 100, "ix": 5 } }, { "ty": "tr", "a": { "a": 0, "k": [0, 0], "ix": 1 }, "s": { "a": 1, "k": [{ "o": { "x": 0.333, "y": 0 }, "i": { "x": 0.236, "y": 1 }, "s": [80, 80], "t": 8 }, { "s": [20, 20], "t": 98 }], "ix": 3 }, "sk": { "a": 0, "k": 0, "ix": 4 }, "p": { "a": 0, "k": [-2.905, -64.316], "ix": 2 }, "r": { "a": 0, "k": 357, "ix": 6 }, "sa": { "a": 0, "k": 0, "ix": 5 }, "o": { "a": 0, "k": 100, "ix": 7 } }] }], "ind": 2 }, { "ty": 4, "nm": "4", "sr": 1, "st": 0, "op": 120, "ip": 0, "hd": false, "ddd": 0, "bm": 0, "hasMask": false, "ao": 0, "ks": { "a": { "a": 0, "k": [-2.905, -24.228, 0], "ix": 1 }, "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }, "sk": { "a": 0, "k": 0 }, "p": { "a": 0, "k": [50, 50, 0], "ix": 2 }, "r": { "a": 1, "k": [{ "o": { "x": 0.333, "y": 0 }, "i": { "x": 0.223, "y": 1 }, "s": [0], "t": 6 }, { "s": [360], "t": 96 }], "ix": 10 }, "sa": { "a": 0, "k": 0 }, "o": { "a": 0, "k": 100, "ix": 11 } }, "shapes": [{ "ty": "gr", "bm": 0, "hd": false, "mn": "ADBE Vector Group", "nm": "Ellipse 1", "ix": 1, "cix": 2, "np": 3, "it": [{ "ty": "el", "bm": 0, "hd": false, "mn": "ADBE Vector Shape - Ellipse", "nm": "Ellipse Path 1", "d": 1, "p": { "a": 0, "k": [0, 0], "ix": 3 }, "s": { "a": 0, "k": [14.822, 14.822], "ix": 2 } }, { "ty": "fl", "bm": 0, "hd": false, "mn": "ADBE Vector Graphic - Fill", "nm": "Fill 1", "c": { "a": 0, "k": [0.8, 0.8, 0.8], "ix": 4 }, "r": 1, "o": { "a": 0, "k": 100, "ix": 5 } }, { "ty": "tr", "a": { "a": 0, "k": [0, 0], "ix": 1 }, "s": { "a": 1, "k": [{ "o": { "x": 0.333, "y": 0 }, "i": { "x": 0.236, "y": 1 }, "s": [60, 60], "t": 6 }, { "s": [40, 40], "t": 96 }], "ix": 3 }, "sk": { "a": 0, "k": 0, "ix": 4 }, "p": { "a": 0, "k": [-2.905, -64.316], "ix": 2 }, "r": { "a": 0, "k": 357, "ix": 6 }, "sa": { "a": 0, "k": 0, "ix": 5 }, "o": { "a": 0, "k": 100, "ix": 7 } }] }], "ind": 3 }, { "ty": 4, "nm": "3", "sr": 1, "st": 0, "op": 120, "ip": 0, "hd": false, "ddd": 0, "bm": 0, "hasMask": false, "ao": 0, "ks": { "a": { "a": 0, "k": [-2.905, -24.228, 0], "ix": 1 }, "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }, "sk": { "a": 0, "k": 0 }, "p": { "a": 0, "k": [50, 50, 0], "ix": 2 }, "r": { "a": 1, "k": [{ "o": { "x": 0.333, "y": 0 }, "i": { "x": 0.223, "y": 1 }, "s": [0], "t": 4 }, { "s": [360], "t": 94 }], "ix": 10 }, "sa": { "a": 0, "k": 0 }, "o": { "a": 0, "k": 100, "ix": 11 } }, "shapes": [{ "ty": "gr", "bm": 0, "hd": false, "mn": "ADBE Vector Group", "nm": "Ellipse 1", "ix": 1, "cix": 2, "np": 3, "it": [{ "ty": "el", "bm": 0, "hd": false, "mn": "ADBE Vector Shape - Ellipse", "nm": "Ellipse Path 1", "d": 1, "p": { "a": 0, "k": [0, 0], "ix": 3 }, "s": { "a": 0, "k": [14.822, 14.822], "ix": 2 } }, { "ty": "fl", "bm": 0, "hd": false, "mn": "ADBE Vector Graphic - Fill", "nm": "Fill 1", "c": { "a": 0, "k": [0.8, 0.8, 0.8], "ix": 4 }, "r": 1, "o": { "a": 0, "k": 100, "ix": 5 } }, { "ty": "tr", "a": { "a": 0, "k": [0, 0], "ix": 1 }, "s": { "a": 1, "k": [{ "o": { "x": 0.333, "y": 0 }, "i": { "x": 0.236, "y": 1 }, "s": [40, 40], "t": 4 }, { "s": [60, 60], "t": 94 }], "ix": 3 }, "sk": { "a": 0, "k": 0, "ix": 4 }, "p": { "a": 0, "k": [-2.905, -64.316], "ix": 2 }, "r": { "a": 0, "k": 357, "ix": 6 }, "sa": { "a": 0, "k": 0, "ix": 5 }, "o": { "a": 0, "k": 100, "ix": 7 } }] }], "ind": 4 }, { "ty": 4, "nm": "2", "sr": 1, "st": 0, "op": 120, "ip": 0, "hd": false, "ddd": 0, "bm": 0, "hasMask": false, "ao": 0, "ks": { "a": { "a": 0, "k": [-2.905, -24.228, 0], "ix": 1 }, "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }, "sk": { "a": 0, "k": 0 }, "p": { "a": 0, "k": [50, 50, 0], "ix": 2 }, "r": { "a": 1, "k": [{ "o": { "x": 0.333, "y": 0 }, "i": { "x": 0.223, "y": 1 }, "s": [0], "t": 2 }, { "s": [360], "t": 92 }], "ix": 10 }, "sa": { "a": 0, "k": 0 }, "o": { "a": 0, "k": 100, "ix": 11 } }, "shapes": [{ "ty": "gr", "bm": 0, "hd": false, "mn": "ADBE Vector Group", "nm": "Ellipse 1", "ix": 1, "cix": 2, "np": 3, "it": [{ "ty": "el", "bm": 0, "hd": false, "mn": "ADBE Vector Shape - Ellipse", "nm": "Ellipse Path 1", "d": 1, "p": { "a": 0, "k": [0, 0], "ix": 3 }, "s": { "a": 0, "k": [14.822, 14.822], "ix": 2 } }, { "ty": "fl", "bm": 0, "hd": false, "mn": "ADBE Vector Graphic - Fill", "nm": "Fill 1", "c": { "a": 0, "k": [0.8, 0.8, 0.8], "ix": 4 }, "r": 1, "o": { "a": 0, "k": 100, "ix": 5 } }, { "ty": "tr", "a": { "a": 0, "k": [0, 0], "ix": 1 }, "s": { "a": 1, "k": [{ "o": { "x": 0.333, "y": 0 }, "i": { "x": 0.236, "y": 1 }, "s": [20, 20], "t": 2 }, { "s": [80, 80], "t": 92 }], "ix": 3 }, "sk": { "a": 0, "k": 0, "ix": 4 }, "p": { "a": 0, "k": [-2.905, -64.316], "ix": 2 }, "r": { "a": 0, "k": 357, "ix": 6 }, "sa": { "a": 0, "k": 0, "ix": 5 }, "o": { "a": 0, "k": 100, "ix": 7 } }] }], "ind": 5 }, { "ty": 4, "nm": "1", "sr": 1, "st": 0, "op": 120, "ip": 0, "hd": false, "ddd": 0, "bm": 0, "hasMask": false, "ao": 0, "ks": { "a": { "a": 0, "k": [-2.905, -24.228, 0], "ix": 1 }, "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }, "sk": { "a": 0, "k": 0 }, "p": { "a": 0, "k": [50, 50, 0], "ix": 2 }, "r": { "a": 1, "k": [{ "o": { "x": 0.333, "y": 0 }, "i": { "x": 0.223, "y": 1 }, "s": [0], "t": 0 }, { "s": [360], "t": 90 }], "ix": 10 }, "sa": { "a": 0, "k": 0 }, "o": { "a": 0, "k": 100, "ix": 11 } }, "shapes": [{ "ty": "gr", "bm": 0, "hd": false, "mn": "ADBE Vector Group", "nm": "Ellipse 1", "ix": 1, "cix": 2, "np": 3, "it": [{ "ty": "el", "bm": 0, "hd": false, "mn": "ADBE Vector Shape - Ellipse", "nm": "Ellipse Path 1", "d": 1, "p": { "a": 0, "k": [0, 0], "ix": 3 }, "s": { "a": 0, "k": [14.822, 14.822], "ix": 2 } }, { "ty": "fl", "bm": 0, "hd": false, "mn": "ADBE Vector Graphic - Fill", "nm": "Fill 1", "c": { "a": 0, "k": [0.8, 0.8, 0.8], "ix": 4 }, "r": 1, "o": { "a": 0, "k": 100, "ix": 5 } }, { "ty": "tr", "a": { "a": 0, "k": [0, 0], "ix": 1 }, "s": { "a": 1, "k": [{ "o": { "x": 0.333, "y": 0 }, "i": { "x": 0.236, "y": 1 }, "s": [0, 0], "t": 0 }, { "s": [100, 100], "t": 90 }], "ix": 3 }, "sk": { "a": 0, "k": 0, "ix": 4 }, "p": { "a": 0, "k": [-2.905, -64.316], "ix": 2 }, "r": { "a": 0, "k": 357, "ix": 6 }, "sa": { "a": 0, "k": 0, "ix": 5 }, "o": { "a": 0, "k": 100, "ix": 7 } }] }], "ind": 6 }], "v": "5.7.0", "fr": 60, "op": 90, "ip": 0, "assets": [] };
 const CustomLoader = ({ loading, loadingText = "Loading..." }) => {
-  const rotateAnim = useRef(new Animated.Value(0)).current;
   const { theme, mode } = useTheme();
   const styles = createStyles$3(theme);
-  useEffect(() => {
-    if (loading) {
-      Animated.loop(
-        Animated.timing(rotateAnim, {
-          toValue: 1,
-          duration: 1500,
-          easing: Easing.linear,
-          useNativeDriver: true
-        })
-      ).start();
-    } else {
-      rotateAnim.stopAnimation();
-      rotateAnim.setValue(0);
-    }
-    return () => {
-      rotateAnim.stopAnimation();
-    };
-  }, [loading, rotateAnim]);
   if (!loading) return null;
-  const spin = rotateAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: ["0deg", "360deg"]
-  });
-  return /* @__PURE__ */ React.createElement(Modal, { transparent: true, visible: loading, animationType: "fade" }, /* @__PURE__ */ React.createElement(View, { style: styles.backdrop }, /* @__PURE__ */ React.createElement(View, { style: styles.box }, /* @__PURE__ */ React.createElement(Animated.View, { style: [styles.loader, { transform: [{ rotate: spin }] }] }, /* @__PURE__ */ React.createElement(Svg, { width: "100", height: "100", viewBox: "0 0 100 100" }, /* @__PURE__ */ React.createElement(Defs, null, /* @__PURE__ */ React.createElement(LinearGradient, { id: "grad", x1: "0%", y1: "0%", x2: "100%", y2: "100%" }, /* @__PURE__ */ React.createElement(Stop, { offset: "0%", stopColor: "#000000", stopOpacity: "2" }), /* @__PURE__ */ React.createElement(
-    Stop,
-    {
-      offset: "40%",
-      stopColor: mode === "dark" ? "#5A5A5A00" : "#686868",
-      stopOpacity: "5"
-    }
-  ), /* @__PURE__ */ React.createElement(
-    Stop,
-    {
-      offset: "100%",
-      stopColor: mode === "dark" ? "#FFFFFF" : "#AAAAAA",
-      stopOpacity: ".9"
-    }
-  ))), /* @__PURE__ */ React.createElement(
-    Circle,
-    {
-      cx: "50",
-      cy: "50",
-      r: "40",
-      stroke: "url(#grad)",
-      strokeWidth: "8",
-      fill: "none",
-      strokeDasharray: "250",
-      strokeLinecap: "round"
-    }
-  ))), /* @__PURE__ */ React.createElement(
-    CustomText$1,
-    {
-      text: loadingText,
-      style: styles.text,
-      variant: FontStyle.B4_REGULAR,
-      textColor: "#000000"
-    }
-  ))));
+  else {
+    return /* @__PURE__ */ React.createElement(View, { style: styles.container }, /* @__PURE__ */ React.createElement(View, { style: styles.backdrop }, /* @__PURE__ */ React.createElement(View, { style: styles.box }, /* @__PURE__ */ React.createElement(View, { style: styles.loader }, /* @__PURE__ */ React.createElement(LottieView, { style: styles.loader, source: loaderJson, autoPlay: true, loop: true })), /* @__PURE__ */ React.createElement(
+      CustomText$1,
+      {
+        text: loadingText,
+        style: styles.text,
+        variant: FontStyle.B4_REGULAR,
+        textColor: "#000000"
+      }
+    ))));
+  }
 };
 var CustomLoader$1 = withThemeProvider(CustomLoader);
 
@@ -4381,8 +4343,8 @@ const styles$3 = StyleSheet.create({
     alignItems: "center"
   },
   sliderContainer: {
-    height: verticalScale(48),
-    borderRadius: moderateScale(25),
+    height: verticalScale$1(48),
+    borderRadius: moderateScale$1(25),
     overflow: "hidden",
     justifyContent: "center"
   },
@@ -4393,11 +4355,11 @@ const styles$3 = StyleSheet.create({
     justifyContent: "center"
   },
   button: {
-    height: verticalScale(40),
+    height: verticalScale$1(40),
     justifyContent: "center",
     alignItems: "center",
-    borderRadius: moderateScale(20),
-    margin: moderateScale(4)
+    borderRadius: moderateScale$1(20),
+    margin: 4
   },
   buttonTextContainer: {
     position: "absolute",
@@ -4406,7 +4368,8 @@ const styles$3 = StyleSheet.create({
     bottom: 0,
     top: 0,
     alignItems: "center",
-    justifyContent: "center"
+    justifyContent: "center",
+    borderRadius: 25
   }
 });
 
@@ -4415,30 +4378,25 @@ const CustomSlideButton = React.forwardRef(
   ({
     label,
     onComplete,
+    onReset,
     icon,
     textStyle,
     containerStyle,
     sliderStyle,
     size = BUTTON_WIDTH,
-    slideButtonTail,
-    slideButtonTailColor = "#fff"
+    sliderBackgroundColor = "#fff",
+    sliderTextColor = "#000",
+    resetTimer = 2e3
   }, ref) => {
     const value = useRef(0);
     const cardRef = useRef(null);
     const [translateX] = useState(new Animated.Value(0));
-    const slideTailCardRef = useRef(null);
-    slideTailCardRef?.current?.setNativeProps({
-      style: { width: 0 }
-    });
+    const sliderConteinerRef = useRef(null);
+    const [color, setColor] = useState(new Animated.Value(0));
+    const [sliderBackgroundColorRef, setSliderBackgroundColorRef] = useState(new Animated.Value(0));
     React.useImperativeHandle(ref, () => ({
       reset() {
-        Animated.spring(translateX, {
-          toValue: 0,
-          useNativeDriver: false
-        }).start();
-        slideTailCardRef?.current?.setNativeProps({
-          style: { width: 0 }
-        });
+        resetAll();
       }
     }));
     const handleLayout = (event) => {
@@ -4449,68 +4407,102 @@ const CustomSlideButton = React.forwardRef(
           // Change the width here
         });
         value.current = width;
+        sliderConteinerRef?.current?.setNativeProps({
+          style: { width }
+        });
       }
     };
+    const resetAll = () => {
+      Animated.timing(translateX, {
+        toValue: 0,
+        useNativeDriver: false
+      }).start();
+      Animated.timing(sliderBackgroundColorRef, {
+        toValue: 0,
+        duration: 0,
+        // no transition time, immediate change
+        useNativeDriver: false
+        // because we're animating the color, not layout
+      }).start();
+      Animated.timing(color, {
+        toValue: 0,
+        delay: 300,
+        // no transition time, immediate change
+        useNativeDriver: false
+        // because we're animating the color, not layout
+      }).start();
+      onReset?.();
+    };
     const panResponder = PanResponder.create({
       onMoveShouldSetPanResponder: (e, gestureState) => {
         return gestureState.dx !== 0;
       },
       onPanResponderMove: (evt, gestureState) => {
-        if (gestureState.dx > 0) {
+        if (gestureState.dx > 0 && gestureState.dx <= value?.current - BUTTON_WIDTH - 8) {
           translateX.setValue(gestureState.dx);
-          slideTailCardRef?.current?.setNativeProps({
-            style: { width: gestureState.dx + BUTTON_WIDTH / 2 }
-          });
+          let colorValue = gestureState.dx > value.current / 3 ? 1 : 0;
+          Animated.timing(color, {
+            toValue: colorValue,
+            duration: 0,
+            // no transition time, immediate change
+            useNativeDriver: false
+            // because we're animating the color, not layout
+          }).start();
         }
       },
       onPanResponderRelease: (e, gestureState) => {
-        if (gestureState.dx >= value.current * 0.7) {
+        if (gestureState.dx >= value.current * 0.8) {
           Animated.timing(translateX, {
-            toValue: value.current - BUTTON_WIDTH - 12,
+            toValue: value?.current - (BUTTON_WIDTH + 8),
             // Slide to the end
             duration: 300,
             useNativeDriver: false
-          }).start(() => {
-            onComplete?.();
-          });
-          slideTailCardRef?.current?.setNativeProps({
-            style: { width: value.current + BUTTON_WIDTH }
-            // Change the width here
-          });
-        } else {
-          Animated.spring(translateX, {
-            toValue: 0,
+          }).start();
+          Animated.timing(sliderBackgroundColorRef, {
+            toValue: 1,
+            duration: 0,
+            // no transition time, immediate change
             useNativeDriver: false
+            // because we're animating the color, not layout
           }).start();
-          slideTailCardRef?.current?.setNativeProps({
-            style: { width: 0 }
-          });
+          onComplete?.();
+          setTimeout(() => {
+            resetAll();
+          }, resetTimer);
+        } else {
+          resetAll();
         }
       }
     });
+    const textColor = color.interpolate({
+      inputRange: [0, 1],
+      outputRange: [sliderTextColor, "transparent"]
+    });
+    const backgroundColor = sliderBackgroundColorRef.interpolate({
+      inputRange: [0, 1],
+      outputRange: [sliderBackgroundColor, "transparent"]
+    });
     const { theme } = useTheme();
     return /* @__PURE__ */ React.createElement(View, { style: {
       ...styles$3.sliderContainer,
       backgroundColor: theme.SURFACE_INVERTED,
       ...containerStyle
-    }, onLayout: handleLayout, ref: cardRef }, slideButtonTail && /* @__PURE__ */ React.createElement(
+    }, onLayout: handleLayout, ref: cardRef }, /* @__PURE__ */ React.createElement(
       Animated.View,
       {
-        ref: slideTailCardRef,
-        style: [{ height: "100%", width: 0, backgroundColor: slideButtonTailColor }]
+        style: [styles$3.buttonTextContainer, { backgroundColor, transform: [{ translateX }] }],
+        ref: sliderConteinerRef
       }
-    ), /* @__PURE__ */ React.createElement(View, { style: styles$3.buttonTextContainer }, /* @__PURE__ */ React.createElement(
-      CustomTypography,
+    ), /* @__PURE__ */ React.createElement(
+      View,
       {
-        text: label,
-        variant: FontStyle.L1_REGULAR,
-        style: {
-          color: theme.CONTENT_INVERTED,
-          alignSelf: "center",
-          ...textStyle
-        }
-      }
-    )), /* @__PURE__ */ React.createElement(
+        style: styles$3.buttonTextContainer
+      },
+      /* @__PURE__ */ React.createElement(Animated.Text, { style: [{
+        alignSelf: "center",
+        ...textStyle
+      }, { color: textColor }] }, label)
+    ), /* @__PURE__ */ React.createElement(
       Animated.View,
       {
         style: [styles$3.slider, { transform: [{ translateX }] }],