@servesall/atoms 1.1.6 → 1.1.7

package/dist/bundle.esm.js

@@ -2,7 +2,7 @@ import React, { useEffect, useState, useRef, useCallback, useMemo } from 'react'
 import styled, { ThemeProvider, ThemeContext } from 'styled-components/native';
 import PropTypes from 'prop-types';
 import { Platform, KeyboardAvoidingView, Dimensions, SafeAreaView, FlatList as FlatList$1, View, StatusBar, Pressable, Keyboard, TouchableHighlight, Image } from 'react-native';
-import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing, withRepeat, runOnJS, withSequence, withDelay, useAnimatedGestureHandler, interpolateColor, interpolate, Extrapolate, withSpring } from 'react-native-reanimated';
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing, withRepeat, runOnJS, withSequence, withDelay, useAnimatedGestureHandler, withSpring, interpolate, interpolateColor, Extrapolate } from 'react-native-reanimated';
 import { TouchableWithoutFeedback, PanGestureHandler } from 'react-native-gesture-handler';
 import LottieView from 'lottie-react-native';
 import { getStatusBarHeight } from 'react-native-status-bar-height';
@@ -915,29 +915,16 @@ var Line$1 = function Line(_ref) {
       hasError = _ref.hasError;
   var widthActive = useSharedValue(0);
   var animatedStyleWidthActive = useAnimatedStyle(function () {
-    var _f = function _f() {
-      return active ? {
-        width: withTiming(widthActive.value, {
-          duration: 350
-        })
-      } : {
-        width: withTiming(0, {
-          duration: 350
-        })
-      };
-    };
-
-    _f._closure = {
-      active: active,
-      withTiming: withTiming,
-      widthActive: widthActive
+    return active ? {
+      width: withTiming(widthActive.value, {
+        duration: 350
+      })
+    } : {
+      width: withTiming(0, {
+        duration: 350
+      })
     };
-    _f.asString = "function _f(){const{active,withTiming,widthActive}=jsThis._closure;{return active?{width:withTiming(widthActive.value,{duration:350})}:{width:withTiming(0,{duration:350})};}}";
-    _f.__workletHash = 6082653035732;
-    _f.__location = "/Users/tom/Desktop/GitHub/atoms/src/Inputs/Animated/LineAnimation/index.js (19:52)";
-    _f.__optimalization = 2;
-    return _f;
-  }());
+  });
   return /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(BorderIdle$1, {
     color: !hasError ? borderColorIdle : borderColorError,
     onLayout: function onLayout(e) {
@@ -957,28 +944,13 @@ var PlaceholderElement$1 = /*#__PURE__*/React.memo(function (_ref) {
       active = _ref.active;
   var bottom = useSharedValue(active ? 50 : 4);
   var animatedStyle = useAnimatedStyle(function () {
-    var _f = function _f() {
-      return {
-        bottom: withTiming(bottom.value, {
-          duration: 250,
-          easing: Easing.bezier(0.19, 1.0, 0.22, 1.0)
-        })
-      };
-    };
-
-    _f._closure = {
-      withTiming: withTiming,
-      bottom: bottom,
-      Easing: {
-        bezier: Easing.bezier
-      }
+    return {
+      bottom: withTiming(bottom.value, {
+        duration: 250,
+        easing: Easing.bezier(0.19, 1.0, 0.22, 1.0)
+      })
     };
-    _f.asString = "function _f(){const{withTiming,bottom,Easing}=jsThis._closure;{return{bottom:withTiming(bottom.value,{duration:250,easing:Easing.bezier(0.19,1.0,0.22,1.0)})};}}";
-    _f.__workletHash = 551286745489;
-    _f.__location = "/Users/tom/Desktop/GitHub/atoms/src/Inputs/Animated/Placeholder/index.js (12:41)";
-    _f.__optimalization = 2;
-    return _f;
-  }());
+  });
   useEffect(function () {
     if (active) {
       bottom.value = 50;
@@ -1097,21 +1069,10 @@ var AnimatedPlaceholder$1 = function AnimatedPlaceholder(_ref) {
 
   var fade = useSharedValue(7);
   var animatedStyle = useAnimatedStyle(function () {
-    var _f = function _f() {
-      return {
-        opacity: fade.value
-      };
-    };
-
-    _f._closure = {
-      fade: fade
+    return {
+      opacity: fade.value
     };
-    _f.asString = "function _f(){const{fade}=jsThis._closure;{return{opacity:fade.value};}}";
-    _f.__workletHash = 16298690497334;
-    _f.__location = "/Users/tom/Desktop/GitHub/atoms/src/Inputs/AnimatedPlaceholder/AnimatedItem.js (14:41)";
-    _f.__optimalization = 3;
-    return _f;
-  }());
+  });
 
   var runNewChild = function runNewChild() {
     setChildNumber(function (prevChildNumber) {
@@ -1122,24 +1083,13 @@ var AnimatedPlaceholder$1 = function AnimatedPlaceholder(_ref) {
   useEffect(function () {
     fade.value = withRepeat(withTiming(0, {
       duration: 2000
-    }, function () {
-      var _f = function _f(finished, currentValue) {
-        if (finished) {
-          if (currentValue === 0) {
-            runOnJS(runNewChild)();
-          }
+    }, function (finished, currentValue) {
+      if (finished) {
+        if (currentValue === 0) {
+          runOnJS(runNewChild)();
         }
-      };
-
-      _f._closure = {
-        runOnJS: runOnJS,
-        runNewChild: runNewChild
-      };
-      _f.asString = "function _f(finished,currentValue){const{runOnJS,runNewChild}=jsThis._closure;{if(finished){if(currentValue===0){runOnJS(runNewChild)();}}}}";
-      _f.__workletHash = 54360799953;
-      _f.__location = "/Users/tom/Desktop/GitHub/atoms/src/Inputs/AnimatedPlaceholder/AnimatedItem.js (28:40)";
-      return _f;
-    }()), -1, true);
+      }
+    }), -1, true);
   }, []);
   return /*#__PURE__*/React.createElement(Animated.View, {
     style: [{
@@ -1271,28 +1221,13 @@ var PlaceholderElement = /*#__PURE__*/React.memo(function (_ref) {
       active = _ref.active;
   var top = useSharedValue(active ? 10 : 30);
   var animatedStyle = useAnimatedStyle(function () {
-    var _f = function _f() {
-      return {
-        top: withTiming(top.value, {
-          duration: 250,
-          easing: Easing.bezier(0.19, 1.0, 0.22, 1.0)
-        })
-      };
-    };
-
-    _f._closure = {
-      withTiming: withTiming,
-      top: top,
-      Easing: {
-        bezier: Easing.bezier
-      }
+    return {
+      top: withTiming(top.value, {
+        duration: 250,
+        easing: Easing.bezier(0.19, 1.0, 0.22, 1.0)
+      })
     };
-    _f.asString = "function _f(){const{withTiming,top,Easing}=jsThis._closure;{return{top:withTiming(top.value,{duration:250,easing:Easing.bezier(0.19,1.0,0.22,1.0)})};}}";
-    _f.__workletHash = 3739814920853;
-    _f.__location = "/Users/tom/Desktop/GitHub/atoms/src/Inputs/InputNormal/Placeholder/index.js (12:41)";
-    _f.__optimalization = 2;
-    return _f;
-  }());
+  });
   useEffect(function () {
     if (active) {
       top.value = 10;
@@ -1421,29 +1356,16 @@ var Line = function Line(_ref) {
       borderColorActive = _ref.borderColorActive;
   var widthActive = useSharedValue(0);
   var animatedStyleWidthActive = useAnimatedStyle(function () {
-    var _f = function _f() {
-      return active ? {
-        width: withTiming(widthActive.value, {
-          duration: 350
-        })
-      } : {
-        width: withTiming(0, {
-          duration: 350
-        })
-      };
+    return active ? {
+      width: withTiming(widthActive.value, {
+        duration: 350
+      })
+    } : {
+      width: withTiming(0, {
+        duration: 350
+      })
     };
-
-    _f._closure = {
-      active: active,
-      withTiming: withTiming,
-      widthActive: widthActive
-    };
-    _f.asString = "function _f(){const{active,withTiming,widthActive}=jsThis._closure;{return active?{width:withTiming(widthActive.value,{duration:350})}:{width:withTiming(0,{duration:350})};}}";
-    _f.__workletHash = 6082653035732;
-    _f.__location = "/Users/tom/Desktop/GitHub/atoms/src/Buttons/TextButton/LineAnimation/index.js (13:52)";
-    _f.__optimalization = 2;
-    return _f;
-  }());
+  });
   return /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(BorderIdle, {
     color: borderColorIdle,
     onLayout: function onLayout(e) {
@@ -1518,24 +1440,13 @@ var RoundedBtn$1 = function RoundedBtn(_ref) {
       hitSlop = _ref$hitSlop === void 0 ? 0 : _ref$hitSlop;
   var scale = useSharedValue(1);
   var animatedStyle = useAnimatedStyle(function () {
-    var _f = function _f() {
-      return {
-        opacity: scale.value,
-        transform: [{
-          scale: scale.value
-        }]
-      };
+    return {
+      opacity: scale.value,
+      transform: [{
+        scale: scale.value
+      }]
     };
-
-    _f._closure = {
-      scale: scale
-    };
-    _f.asString = "function _f(){const{scale}=jsThis._closure;{return{opacity:scale.value,transform:[{scale:scale.value}]};}}";
-    _f.__workletHash = 15781601983731;
-    _f.__location = "/Users/tom/Desktop/GitHub/atoms/src/Buttons/RoundedButton/index.js (21:41)";
-    _f.__optimalization = 3;
-    return _f;
-  }());
+  });
   return /*#__PURE__*/React.createElement(Animated.View, {
     style: [animatedStyle]
   }, /*#__PURE__*/React.createElement(ButtonStyle$4, {
@@ -1581,24 +1492,13 @@ var RoundBtn$3 = function RoundBtn(_ref) {
       size = _ref$size === void 0 ? "big" : _ref$size;
   var scale = useSharedValue(1);
   var animatedStyle = useAnimatedStyle(function () {
-    var _f = function _f() {
-      return {
-        opacity: scale.value,
-        transform: [{
-          scale: scale.value
-        }]
-      };
+    return {
+      opacity: scale.value,
+      transform: [{
+        scale: scale.value
+      }]
     };
-
-    _f._closure = {
-      scale: scale
-    };
-    _f.asString = "function _f(){const{scale}=jsThis._closure;{return{opacity:scale.value,transform:[{scale:scale.value}]};}}";
-    _f.__workletHash = 15781601983731;
-    _f.__location = "/Users/tom/Desktop/GitHub/atoms/src/Buttons/RoundButton/index.js (20:41)";
-    _f.__optimalization = 3;
-    return _f;
-  }());
+  });
   return /*#__PURE__*/React.createElement(Animated.View, {
     style: [{
       flex: 1
@@ -1641,40 +1541,18 @@ var RoundBtn$2 = function RoundBtn(_ref) {
   var scale = useSharedValue(1);
   var width = useSharedValue(80);
   var animatedStyle = useAnimatedStyle(function () {
-    var _f = function _f() {
-      return {
-        opacity: scale.value,
-        transform: [{
-          scale: scale.value
-        }]
-      };
+    return {
+      opacity: scale.value,
+      transform: [{
+        scale: scale.value
+      }]
     };
-
-    _f._closure = {
-      scale: scale
-    };
-    _f.asString = "function _f(){const{scale}=jsThis._closure;{return{opacity:scale.value,transform:[{scale:scale.value}]};}}";
-    _f.__workletHash = 15781601983731;
-    _f.__location = "/Users/tom/Desktop/GitHub/atoms/src/Buttons/FloatingButton/FloatingButton.js (24:41)";
-    _f.__optimalization = 3;
-    return _f;
-  }());
+  });
   var animatedWidth = useAnimatedStyle(function () {
-    var _f = function _f() {
-      return {
-        width: width.value
-      };
+    return {
+      width: width.value
     };
-
-    _f._closure = {
-      width: width
-    };
-    _f.asString = "function _f(){const{width}=jsThis._closure;{return{width:width.value};}}";
-    _f.__workletHash = 11755410798377;
-    _f.__location = "/Users/tom/Desktop/GitHub/atoms/src/Buttons/FloatingButton/FloatingButton.js (35:41)";
-    _f.__optimalization = 3;
-    return _f;
-  }());
+  });
   useEffect(function () {
     if (active) {
       setTimeout(function () {
@@ -1735,46 +1613,21 @@ var RoundBtn$1 = function RoundBtn(_ref) {
   var left = useSharedValue(30);
   var bottom = useSharedValue(30);
   var animatedStyle = useAnimatedStyle(function () {
-    var _f = function _f() {
-      return {
-        opacity: scale.value,
-        transform: [{
-          scale: scale.value
-        }]
-      };
+    return {
+      opacity: scale.value,
+      transform: [{
+        scale: scale.value
+      }]
     };
-
-    _f._closure = {
-      scale: scale
-    };
-    _f.asString = "function _f(){const{scale}=jsThis._closure;{return{opacity:scale.value,transform:[{scale:scale.value}]};}}";
-    _f.__workletHash = 15781601983731;
-    _f.__location = "/Users/tom/Desktop/GitHub/atoms/src/Buttons/FloatingButton/index.js (35:41)";
-    _f.__optimalization = 3;
-    return _f;
-  }());
+  });
   var animatedAbsolute = useAnimatedStyle(function () {
-    var _f = function _f() {
-      return {
-        minWidth: width.value,
-        height: height.value,
-        left: left.value,
-        bottom: bottom.value
-      };
-    };
-
-    _f._closure = {
-      width: width,
-      height: height,
-      left: left,
-      bottom: bottom
+    return {
+      minWidth: width.value,
+      height: height.value,
+      left: left.value,
+      bottom: bottom.value
     };
-    _f.asString = "function _f(){const{width,height,left,bottom}=jsThis._closure;{return{minWidth:width.value,height:height.value,left:left.value,bottom:bottom.value};}}";
-    _f.__workletHash = 14161176176375;
-    _f.__location = "/Users/tom/Desktop/GitHub/atoms/src/Buttons/FloatingButton/index.js (46:44)";
-    _f.__optimalization = 3;
-    return _f;
-  }());
+  });
   useEffect(function () {
     scale.value = withTiming(1, {
       duration: 450,
@@ -1874,40 +1727,18 @@ var RoundBtn = function RoundBtn(_ref) {
   var scale = useSharedValue(1);
   var width = useSharedValue(70);
   var animatedStyle = useAnimatedStyle(function () {
-    var _f = function _f() {
-      return {
-        opacity: scale.value,
-        transform: [{
-          scale: scale.value
-        }]
-      };
-    };
-
-    _f._closure = {
-      scale: scale
+    return {
+      opacity: scale.value,
+      transform: [{
+        scale: scale.value
+      }]
     };
-    _f.asString = "function _f(){const{scale}=jsThis._closure;{return{opacity:scale.value,transform:[{scale:scale.value}]};}}";
-    _f.__workletHash = 15781601983731;
-    _f.__location = "/Users/tom/Desktop/GitHub/atoms/src/Buttons/AnimatedButton/FloatingButton.js (29:41)";
-    _f.__optimalization = 3;
-    return _f;
-  }());
+  });
   var animatedWidth = useAnimatedStyle(function () {
-    var _f = function _f() {
-      return {
-        width: width.value
-      };
+    return {
+      width: width.value
     };
-
-    _f._closure = {
-      width: width
-    };
-    _f.asString = "function _f(){const{width}=jsThis._closure;{return{width:width.value};}}";
-    _f.__workletHash = 11755410798377;
-    _f.__location = "/Users/tom/Desktop/GitHub/atoms/src/Buttons/AnimatedButton/FloatingButton.js (40:41)";
-    _f.__optimalization = 3;
-    return _f;
-  }());
+  });
   useEffect(function () {
     setTimeout(function () {
       return width.value = withTiming(leftElement ? Dimensions.get("window").width / 2 : Dimensions.get("window").width - 60, {
@@ -1967,48 +1798,22 @@ var AnimatedButton$1 = function AnimatedButton(_ref) {
   var left = useSharedValue(0);
   var bottom = useSharedValue(10);
   var animatedStyle = useAnimatedStyle(function () {
-    var _f = function _f() {
-      return {
-        opacity: scale.value,
-        transform: [{
-          scale: scale.value
-        }]
-      };
-    };
-
-    _f._closure = {
-      scale: scale
+    return {
+      opacity: scale.value,
+      transform: [{
+        scale: scale.value
+      }]
     };
-    _f.asString = "function _f(){const{scale}=jsThis._closure;{return{opacity:scale.value,transform:[{scale:scale.value}]};}}";
-    _f.__workletHash = 15781601983731;
-    _f.__location = "/Users/tom/Desktop/GitHub/atoms/src/Buttons/AnimatedButton/index.js (33:41)";
-    _f.__optimalization = 3;
-    return _f;
-  }());
+  });
   var animatedAbsolute = useAnimatedStyle(function () {
-    var _f = function _f() {
-      return {
-        minWidth: width.value,
-        height: height.value,
-        right: right.value,
-        left: left.value,
-        bottom: bottom.value
-      };
-    };
-
-    _f._closure = {
-      width: width,
-      height: height,
-      right: right,
-      left: left,
-      bottom: bottom
+    return {
+      minWidth: width.value,
+      height: height.value,
+      right: right.value,
+      left: left.value,
+      bottom: bottom.value
     };
-    _f.asString = "function _f(){const{width,height,right,left,bottom}=jsThis._closure;{return{minWidth:width.value,height:height.value,right:right.value,left:left.value,bottom:bottom.value};}}";
-    _f.__workletHash = 2397013298280;
-    _f.__location = "/Users/tom/Desktop/GitHub/atoms/src/Buttons/AnimatedButton/index.js (44:44)";
-    _f.__optimalization = 3;
-    return _f;
-  }());
+  });
   useEffect(function () {
     scale.value = withTiming(1, {
       duration: 450,
@@ -2101,40 +1906,18 @@ var RoundedBtn = function RoundedBtn(_ref) {
   var scale = useSharedValue(1);
   var width = useSharedValue("100%");
   var animatedStyle = useAnimatedStyle(function () {
-    var _f = function _f() {
-      return {
-        opacity: scale.value,
-        transform: [{
-          scale: scale.value
-        }]
-      };
-    };
-
-    _f._closure = {
-      scale: scale
+    return {
+      opacity: scale.value,
+      transform: [{
+        scale: scale.value
+      }]
     };
-    _f.asString = "function _f(){const{scale}=jsThis._closure;{return{opacity:scale.value,transform:[{scale:scale.value}]};}}";
-    _f.__workletHash = 15781601983731;
-    _f.__location = "/Users/tom/Desktop/GitHub/atoms/src/Buttons/FeedbackButton/FloatingButton.js (28:41)";
-    _f.__optimalization = 3;
-    return _f;
-  }());
+  });
   var animatedWidth = useAnimatedStyle(function () {
-    var _f = function _f() {
-      return {
-        width: width.value
-      };
-    };
-
-    _f._closure = {
-      width: width
+    return {
+      width: width.value
     };
-    _f.asString = "function _f(){const{width}=jsThis._closure;{return{width:width.value};}}";
-    _f.__workletHash = 11755410798377;
-    _f.__location = "/Users/tom/Desktop/GitHub/atoms/src/Buttons/FeedbackButton/FloatingButton.js (39:41)";
-    _f.__optimalization = 3;
-    return _f;
-  }());
+  });
   useEffect(function () {
     if (loading) {
       width.value = withTiming(70, {
@@ -2185,46 +1968,21 @@ var AnimatedButton = function AnimatedButton(_ref) {
   var right = useSharedValue(0);
   var left = useSharedValue(0);
   var animatedStyle = useAnimatedStyle(function () {
-    var _f = function _f() {
-      return {
-        opacity: scale.value,
-        transform: [{
-          scale: scale.value
-        }]
-      };
-    };
-
-    _f._closure = {
-      scale: scale
+    return {
+      opacity: scale.value,
+      transform: [{
+        scale: scale.value
+      }]
     };
-    _f.asString = "function _f(){const{scale}=jsThis._closure;{return{opacity:scale.value,transform:[{scale:scale.value}]};}}";
-    _f.__workletHash = 15781601983731;
-    _f.__location = "/Users/tom/Desktop/GitHub/atoms/src/Buttons/FeedbackButton/index.js (32:41)";
-    _f.__optimalization = 3;
-    return _f;
-  }());
+  });
   var animatedAbsolute = useAnimatedStyle(function () {
-    var _f = function _f() {
-      return {
-        minWidth: width.value,
-        height: height.value,
-        right: right.value,
-        left: left.value
-      };
-    };
-
-    _f._closure = {
-      width: width,
-      height: height,
-      right: right,
-      left: left
+    return {
+      minWidth: width.value,
+      height: height.value,
+      right: right.value,
+      left: left.value
     };
-    _f.asString = "function _f(){const{width,height,right,left}=jsThis._closure;{return{minWidth:width.value,height:height.value,right:right.value,left:left.value};}}";
-    _f.__workletHash = 15930704015288;
-    _f.__location = "/Users/tom/Desktop/GitHub/atoms/src/Buttons/FeedbackButton/index.js (43:44)";
-    _f.__optimalization = 3;
-    return _f;
-  }());
+  });
   useEffect(function () {
     if (loading) {
       width.value = withTiming(Dimensions.get("window").width, {
@@ -3721,46 +3479,21 @@ var AnimatedRoundedButton = function AnimatedRoundedButton(_ref) {
   var left = useSharedValue(0);
   var bottom = useSharedValue(10);
   var animatedStyle = useAnimatedStyle(function () {
-    var _f = function _f() {
-      return {
-        transform: [{
-          translateY: translateY.value
-        }],
-        width: "100%"
-      };
+    return {
+      transform: [{
+        translateY: translateY.value
+      }],
+      width: "100%"
     };
-
-    _f._closure = {
-      translateY: translateY
-    };
-    _f.asString = "function _f(){const{translateY}=jsThis._closure;{return{transform:[{translateY:translateY.value}],width:\"100%\"};}}";
-    _f.__workletHash = 232655703170;
-    _f.__location = "/Users/tom/Desktop/GitHub/atoms/src/Buttons/AnimatedRoundedButton/index.js (31:41)";
-    _f.__optimalization = 3;
-    return _f;
-  }());
+  });
   var animatedAbsolute = useAnimatedStyle(function () {
-    var _f = function _f() {
-      return {
-        height: height.value,
-        right: right.value,
-        left: left.value,
-        bottom: bottom.value
-      };
+    return {
+      height: height.value,
+      right: right.value,
+      left: left.value,
+      bottom: bottom.value
     };
-
-    _f._closure = {
-      height: height,
-      right: right,
-      left: left,
-      bottom: bottom
-    };
-    _f.asString = "function _f(){const{height,right,left,bottom}=jsThis._closure;{return{height:height.value,right:right.value,left:left.value,bottom:bottom.value};}}";
-    _f.__workletHash = 12878771773755;
-    _f.__location = "/Users/tom/Desktop/GitHub/atoms/src/Buttons/AnimatedRoundedButton/index.js (42:44)";
-    _f.__optimalization = 3;
-    return _f;
-  }());
+  });
   useEffect(function () {
     translateY.value = withTiming(0, {
       duration: 450,
@@ -52570,156 +52303,56 @@ var SwipeButton = function SwipeButton(_ref) {
 
   var x = useSharedValue(0);
   var gestureHandler = useAnimatedGestureHandler({
-    onStart: function () {
-      var _f = function _f(_, ctx) {
-        ctx.startX = x.value;
-      };
-
-      _f._closure = {
-        x: x
-      };
-      _f.asString = "function _f(_,ctx){const{x}=jsThis._closure;{ctx.startX=x.value;}}";
-      _f.__workletHash = 5300485379009;
-      _f.__location = "/Users/tom/Desktop/GitHub/atoms/src/SlideToConfirm/index.js (46:13)";
-      return _f;
-    }(),
-    onActive: function () {
-      var _f = function _f(event, ctx) {
-        if (event.translationY > 60 || event.translationY < -60) {
-          x.value = withSpring(0);
-        } else {
-          if (ctx.startX + event.translationX > width - WIDTH_TO_REMOVE) {
-            x.value = width - WIDTH_FINAL;
-            runOnJS(setToggled)(true);
-          } else {
-            x.value = ctx.startX + event.translationX;
-          }
-        }
-      };
-
-      _f._closure = {
-        x: x,
-        withSpring: withSpring,
-        width: width,
-        WIDTH_TO_REMOVE: WIDTH_TO_REMOVE,
-        WIDTH_FINAL: WIDTH_FINAL,
-        runOnJS: runOnJS,
-        setToggled: setToggled
-      };
-      _f.asString = "function _f(event,ctx){const{x,withSpring,width,WIDTH_TO_REMOVE,WIDTH_FINAL,runOnJS,setToggled}=jsThis._closure;{if(event.translationY>60||event.translationY<-60){x.value=withSpring(0);}else{if(ctx.startX+event.translationX>width-WIDTH_TO_REMOVE){x.value=width-WIDTH_FINAL;runOnJS(setToggled)(true);}else{x.value=ctx.startX+event.translationX;}}}}";
-      _f.__workletHash = 16638915014400;
-      _f.__location = "/Users/tom/Desktop/GitHub/atoms/src/SlideToConfirm/index.js (49:14)";
-      return _f;
-    }(),
-    onEnd: function () {
-      var _f = function _f(_) {
-        if (toggled) {
+    onStart: function onStart(_, ctx) {
+      ctx.startX = x.value;
+    },
+    onActive: function onActive(event, ctx) {
+      if (event.translationY > 60 || event.translationY < -60) {
+        x.value = withSpring(0);
+      } else {
+        if (ctx.startX + event.translationX > width - WIDTH_TO_REMOVE) {
           x.value = width - WIDTH_FINAL;
+          runOnJS(setToggled)(true);
         } else {
-          x.value = withSpring(0);
+          x.value = ctx.startX + event.translationX;
         }
-      };
-
-      _f._closure = {
-        toggled: toggled,
-        x: x,
-        width: width,
-        WIDTH_FINAL: WIDTH_FINAL,
-        withSpring: withSpring
-      };
-      _f.asString = "function _f(_){const{toggled,x,width,WIDTH_FINAL,withSpring}=jsThis._closure;{if(toggled){x.value=width-WIDTH_FINAL;}else{x.value=withSpring(0);}}}";
-      _f.__workletHash = 9307804739149;
-      _f.__location = "/Users/tom/Desktop/GitHub/atoms/src/SlideToConfirm/index.js (61:11)";
-      return _f;
-    }()
+      }
+    },
+    onEnd: function onEnd(_) {
+      if (toggled) {
+        x.value = width - WIDTH_FINAL;
+      } else {
+        x.value = withSpring(0);
+      }
+    }
   });
   var animatedStyle = useAnimatedStyle(function () {
-    var _f = function _f() {
-      return {
-        transform: [{
-          translateX: x.value
-        }]
-      };
-    };
-
-    _f._closure = {
-      x: x
+    return {
+      transform: [{
+        translateX: x.value
+      }]
     };
-    _f.asString = "function _f(){const{x}=jsThis._closure;{return{transform:[{translateX:x.value}]};}}";
-    _f.__workletHash = 5278836605383;
-    _f.__location = "/Users/tom/Desktop/GitHub/atoms/src/SlideToConfirm/index.js (70:41)";
-    _f.__optimalization = 3;
-    return _f;
-  }());
+  });
   var InterpolateXInput = [0, width];
   var colorWave = useAnimatedStyle(function () {
-    var _f = function _f() {
-      return {
-        width: x.value + BTN_WIDTH + BTN_PADDING,
-        opacity: interpolate(x.value, InterpolateXInput, [0, 1])
-      };
+    return {
+      width: x.value + BTN_WIDTH + BTN_PADDING,
+      opacity: interpolate(x.value, InterpolateXInput, [0, 1])
     };
-
-    _f._closure = {
-      x: x,
-      BTN_WIDTH: BTN_WIDTH,
-      BTN_PADDING: BTN_PADDING,
-      interpolate: interpolate,
-      InterpolateXInput: InterpolateXInput
-    };
-    _f.asString = "function _f(){const{x,BTN_WIDTH,BTN_PADDING,interpolate,InterpolateXInput}=jsThis._closure;{return{width:x.value+BTN_WIDTH+BTN_PADDING,opacity:interpolate(x.value,InterpolateXInput,[0,1])};}}";
-    _f.__workletHash = 1719171425649;
-    _f.__location = "/Users/tom/Desktop/GitHub/atoms/src/SlideToConfirm/index.js (82:37)";
-    _f.__optimalization = 3;
-    return _f;
-  }());
+  });
   var animatedBorder = useAnimatedStyle(function () {
-    var _f = function _f() {
-      return {
-        borderColor: interpolateColor(x.value, [0, width - WIDTH_FINAL], [theme.color7, borderColor])
-      };
-    };
-
-    _f._closure = {
-      interpolateColor: interpolateColor,
-      x: x,
-      width: width,
-      WIDTH_FINAL: WIDTH_FINAL,
-      theme: {
-        color7: theme.color7
-      },
-      borderColor: borderColor
+    return {
+      borderColor: interpolateColor(x.value, [0, width - WIDTH_FINAL], [theme.color7, borderColor])
     };
-    _f.asString = "function _f(){const{interpolateColor,x,width,WIDTH_FINAL,theme,borderColor}=jsThis._closure;{return{borderColor:interpolateColor(x.value,[0,width-WIDTH_FINAL],[theme.color7,borderColor])};}}";
-    _f.__workletHash = 2946001185610;
-    _f.__location = "/Users/tom/Desktop/GitHub/atoms/src/SlideToConfirm/index.js (89:42)";
-    _f.__optimalization = 2;
-    return _f;
-  }());
+  });
   var animatedText = useAnimatedStyle(function () {
-    var _f = function _f() {
-      return {
-        opacity: interpolate(x.value, InterpolateXInput, [1, 0], Extrapolate.CLAMP),
-        transform: [{
-          translateX: x.value
-        }]
-      };
+    return {
+      opacity: interpolate(x.value, InterpolateXInput, [1, 0], Extrapolate.CLAMP),
+      transform: [{
+        translateX: x.value
+      }]
     };
-
-    _f._closure = {
-      interpolate: interpolate,
-      x: x,
-      InterpolateXInput: InterpolateXInput,
-      Extrapolate: {
-        CLAMP: Extrapolate.CLAMP
-      }
-    };
-    _f.asString = "function _f(){const{interpolate,x,InterpolateXInput,Extrapolate}=jsThis._closure;{return{opacity:interpolate(x.value,InterpolateXInput,[1,0],Extrapolate.CLAMP),transform:[{translateX:x.value}]};}}";
-    _f.__workletHash = 460398395074;
-    _f.__location = "/Users/tom/Desktop/GitHub/atoms/src/SlideToConfirm/index.js (99:40)";
-    _f.__optimalization = 3;
-    return _f;
-  }());
+  });
   return /*#__PURE__*/React.createElement(Wrapper$1, {
     onLayout: onLayout
   }, /*#__PURE__*/React.createElement(RoundWrapper, {