@servesall/atoms 1.1.6 → 1.1.9

package/dist/bundle.umd.js

@@ -233,6 +233,7 @@
     greenLight: "#F3FFFC",
     greenDark: "#236A56",
     greyText: "#b2bec3",
+    greyButton: "#94A3A9",
     red: "#ff7675",
     redlight: "#FFFAF9",
     redDark: "#9C4140",
@@ -288,8 +289,8 @@
     return React__default["default"].useContext(styled.ThemeContext);
   };
 
-  var _templateObject$m, _templateObject2$d, _templateObject3$6, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1;
-  var H1 = styled__default["default"].Text(_templateObject$m || (_templateObject$m = _taggedTemplateLiteral(["\n  font-size: ", ";\n  font-family: ", ";\n  text-align: ", ";\n  color: ", ";\n  line-height: ", ";\n  ", ";\n"])), function (props) {
+  var _templateObject$n, _templateObject2$e, _templateObject3$7, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1;
+  var H1 = styled__default["default"].Text(_templateObject$n || (_templateObject$n = _taggedTemplateLiteral(["\n  font-size: ", ";\n  font-family: ", ";\n  text-align: ", ";\n  color: ", ";\n  line-height: ", ";\n  ", ";\n"])), function (props) {
     return props.theme.large;
   }, function (props) {
     return props.fontFamily || props.theme.fontFamily1;
@@ -302,7 +303,7 @@
   }, function (props) {
     return props.style;
   });
-  var H2 = styled__default["default"].Text(_templateObject2$d || (_templateObject2$d = _taggedTemplateLiteral(["\n  font-size: ", ";\n  font-family: ", ";\n  text-align: ", ";\n  color: ", ";\n  line-height: ", ";\n  ", ";\n"])), function (props) {
+  var H2 = styled__default["default"].Text(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteral(["\n  font-size: ", ";\n  font-family: ", ";\n  text-align: ", ";\n  color: ", ";\n  line-height: ", ";\n  ", ";\n"])), function (props) {
     return props.theme.medium;
   }, function (props) {
     return props.fontFamily || props.theme.fontFamily1;
@@ -315,7 +316,7 @@
   }, function (props) {
     return props.style;
   });
-  var H3 = styled__default["default"].Text(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteral(["\n  font-size: ", ";\n  font-family: ", ";\n  text-align: ", ";\n  color: ", ";\n  line-height: ", ";\n  ", ";\n"])), function (props) {
+  var H3 = styled__default["default"].Text(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteral(["\n  font-size: ", ";\n  font-family: ", ";\n  text-align: ", ";\n  color: ", ";\n  line-height: ", ";\n  ", ";\n"])), function (props) {
     return props.theme.small;
   }, function (props) {
     return props.fontFamily || props.theme.fontFamily1;
@@ -542,14 +543,14 @@
     style: PropTypes__default["default"].object
   };
 
-  var _templateObject$l, _templateObject2$c, _templateObject3$5, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
+  var _templateObject$m, _templateObject2$d, _templateObject3$6, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
   var DEFAULT_FLEX_DIRECTION = reactNative.Platform.OS === "web" ? "column" : "column";
-  var CenterElement = styled__default["default"].View(_templateObject$l || (_templateObject$l = _taggedTemplateLiteral(["\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
+  var CenterElement = styled__default["default"].View(_templateObject$m || (_templateObject$m = _taggedTemplateLiteral(["\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
     return props.flexDirection || DEFAULT_FLEX_DIRECTION;
   }, function (props) {
     return props.style;
   });
-  var CenterLeftElement = styled__default["default"].View(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteral(["\n  align-items: ", ";\n  justify-content: ", ";\n  flex: 1;\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
+  var CenterLeftElement = styled__default["default"].View(_templateObject2$d || (_templateObject2$d = _taggedTemplateLiteral(["\n  align-items: ", ";\n  justify-content: ", ";\n  flex: 1;\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
     return (props.flexDirection || DEFAULT_FLEX_DIRECTION) === "row" ? "center" : "flex-start";
   }, function (props) {
     return (props.flexDirection || DEFAULT_FLEX_DIRECTION) === "row" ? "flex-start" : "center";
@@ -558,7 +559,7 @@
   }, function (props) {
     return props.style;
   });
-  var CenterRightElement = styled__default["default"].View(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteral(["\n  align-items: ", ";\n  justify-content: ", ";\n  flex: 1;\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
+  var CenterRightElement = styled__default["default"].View(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteral(["\n  align-items: ", ";\n  justify-content: ", ";\n  flex: 1;\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
     return (props.flexDirection || DEFAULT_FLEX_DIRECTION) === "row" ? "center" : "flex-end";
   }, function (props) {
     return (props.flexDirection || DEFAULT_FLEX_DIRECTION) === "row" ? "flex-end" : "center";
@@ -893,22 +894,22 @@
     }, children);
   };
 
-  var _templateObject$k, _templateObject2$b, _templateObject3$4;
-  var InputWrapper$1 = styled__default["default"].Pressable(_templateObject$k || (_templateObject$k = _taggedTemplateLiteral(["\n  min-height: 80px;\n"])));
-  var InputElement$1 = styled__default["default"].TextInput(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteral(["\n  margin-top: 26px;\n  min-height: 50px;\n  font-family: ", ";\n  font-size: ", ";\n  color: ", ";\n"])), function (props) {
+  var _templateObject$l, _templateObject2$c, _templateObject3$5;
+  var InputWrapper$2 = styled__default["default"].Pressable(_templateObject$l || (_templateObject$l = _taggedTemplateLiteral(["\n  min-height: 80px;\n"])));
+  var InputElement$2 = styled__default["default"].TextInput(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteral(["\n  margin-top: 26px;\n  min-height: 50px;\n  font-family: ", ";\n  font-size: ", ";\n  color: ", ";\n"])), function (props) {
     return props.theme.fontFamily2;
   }, function (props) {
     return props.theme.small;
   }, function (props) {
     return props.theme.color2;
   });
-  var BorderWrapper$2 = styled__default["default"].View(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n  height: 4px;\n"])));
+  var BorderWrapper$3 = styled__default["default"].View(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteral(["\n  height: 4px;\n"])));
 
-  var _templateObject$j, _templateObject2$a;
-  var BorderIdle$1 = styled__default["default"].View(_templateObject$j || (_templateObject$j = _taggedTemplateLiteral(["\n  height: 4px;\n  background-color: ", ";\n  flex: 1;\n  position: absolute;\n  width: 100%;\n  z-index: 10;\n"])), function (props) {
+  var _templateObject$k, _templateObject2$b;
+  var BorderIdle$1 = styled__default["default"].View(_templateObject$k || (_templateObject$k = _taggedTemplateLiteral(["\n  height: 4px;\n  background-color: ", ";\n  flex: 1;\n  position: absolute;\n  width: 100%;\n  z-index: 10;\n"])), function (props) {
     return props.color;
   });
-  var BorderActive$1 = styled__default["default"].View(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteral(["\n  height: 4px;\n  background-color: ", ";\n  z-index: 11;\n"])), function (props) {
+  var BorderActive$1 = styled__default["default"].View(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteral(["\n  height: 4px;\n  background-color: ", ";\n  z-index: 11;\n"])), function (props) {
     return props.color;
   });
 
@@ -920,29 +921,16 @@
         hasError = _ref.hasError;
     var widthActive = Animated.useSharedValue(0);
     var animatedStyleWidthActive = Animated.useAnimatedStyle(function () {
-      var _f = function _f() {
-        return active ? {
-          width: Animated.withTiming(widthActive.value, {
-            duration: 350
-          })
-        } : {
-          width: Animated.withTiming(0, {
-            duration: 350
-          })
-        };
-      };
-
-      _f._closure = {
-        active: active,
-        withTiming: Animated.withTiming,
-        widthActive: widthActive
+      return active ? {
+        width: Animated.withTiming(widthActive.value, {
+          duration: 350
+        })
+      } : {
+        width: Animated.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__default["default"].createElement(Row, null, /*#__PURE__*/React__default["default"].createElement(BorderIdle$1, {
       color: !hasError ? borderColorIdle : borderColorError,
       onLayout: function onLayout(e) {
@@ -957,33 +945,18 @@
     })));
   };
 
-  var PlaceholderElement$1 = /*#__PURE__*/React__default["default"].memo(function (_ref) {
+  var PlaceholderElement$2 = /*#__PURE__*/React__default["default"].memo(function (_ref) {
     var children = _ref.children,
         active = _ref.active;
     var bottom = Animated.useSharedValue(active ? 50 : 4);
     var animatedStyle = Animated.useAnimatedStyle(function () {
-      var _f = function _f() {
-        return {
-          bottom: Animated.withTiming(bottom.value, {
-            duration: 250,
-            easing: Animated.Easing.bezier(0.19, 1.0, 0.22, 1.0)
-          })
-        };
-      };
-
-      _f._closure = {
-        withTiming: Animated.withTiming,
-        bottom: bottom,
-        Easing: {
-          bezier: Animated.Easing.bezier
-        }
+      return {
+        bottom: Animated.withTiming(bottom.value, {
+          duration: 250,
+          easing: Animated.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;
-    }());
+    });
     React.useEffect(function () {
       if (active) {
         bottom.value = 50;
@@ -1052,18 +1025,18 @@
     return /*#__PURE__*/React__default["default"].createElement(reactNative.KeyboardAvoidingView, {
       behavior: reactNative.Platform.OS === "ios" ? "padding" : "height",
       keyboardVerticalOffset: keyboardVerticalOffset
-    }, /*#__PURE__*/React__default["default"].createElement(InputWrapper$1, {
+    }, /*#__PURE__*/React__default["default"].createElement(InputWrapper$2, {
       onPress: function onPress() {
         var _inputRef$current2;
 
         setIsFocused(true);
         (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
       }
-    }, /*#__PURE__*/React__default["default"].createElement(PlaceholderElement$1, {
+    }, /*#__PURE__*/React__default["default"].createElement(PlaceholderElement$2, {
       active: isFocused || textValue && textValue.length > 0
     }, !hasError ? children : /*#__PURE__*/React__default["default"].createElement(H3Text, {
       color: borderColorError
-    }, error || hasError)), /*#__PURE__*/React__default["default"].createElement(InputElement$1, {
+    }, error || hasError)), /*#__PURE__*/React__default["default"].createElement(InputElement$2, {
       ref: inputRef,
       onFocus: function onFocus() {
         return setIsFocused(true);
@@ -1083,7 +1056,7 @@
       keyboardType: keyboardType,
       editable: editable,
       style: style
-    }), /*#__PURE__*/React__default["default"].createElement(BorderWrapper$2, null, /*#__PURE__*/React__default["default"].createElement(Line$1, {
+    }), /*#__PURE__*/React__default["default"].createElement(BorderWrapper$3, null, /*#__PURE__*/React__default["default"].createElement(Line$1, {
       active: isFocused,
       borderColorActive: borderColorActive,
       borderColorIdle: borderColorIdle,
@@ -1102,21 +1075,10 @@
 
     var fade = Animated.useSharedValue(7);
     var animatedStyle = Animated.useAnimatedStyle(function () {
-      var _f = function _f() {
-        return {
-          opacity: fade.value
-        };
+      return {
+        opacity: fade.value
       };
-
-      _f._closure = {
-        fade: fade
-      };
-      _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) {
@@ -1127,24 +1089,13 @@
     React.useEffect(function () {
       fade.value = Animated.withRepeat(Animated.withTiming(0, {
         duration: 2000
-      }, function () {
-        var _f = function _f(finished, currentValue) {
-          if (finished) {
-            if (currentValue === 0) {
-              Animated.runOnJS(runNewChild)();
-            }
+      }, function (finished, currentValue) {
+        if (finished) {
+          if (currentValue === 0) {
+            Animated.runOnJS(runNewChild)();
           }
-        };
-
-        _f._closure = {
-          runOnJS: Animated.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__default["default"].createElement(Animated__default["default"].View, {
       style: [{
@@ -1252,9 +1203,9 @@
     }))));
   };
 
-  var _templateObject$i, _templateObject2$9, _templateObject3$3;
-  var InputWrapper = styled__default["default"].Pressable(_templateObject$i || (_templateObject$i = _taggedTemplateLiteral(["\n  min-height: 70px;\n"])));
-  var InputElement = styled__default["default"].TextInput(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteral(["\n  min-height: 40px;\n  font-family: ", ";\n  font-size: ", ";\n  color: ", ";\n  background-color: ", ";\n"])), function (props) {
+  var _templateObject$j, _templateObject2$a, _templateObject3$4;
+  var InputWrapper$1 = styled__default["default"].Pressable(_templateObject$j || (_templateObject$j = _taggedTemplateLiteral(["\n  min-height: 70px;\n"])));
+  var InputElement$1 = styled__default["default"].TextInput(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteral(["\n  min-height: 40px;\n  font-family: ", ";\n  font-size: ", ";\n  color: ", ";\n  background-color: ", ";\n"])), function (props) {
     return props.theme.fontFamily2;
   }, function (props) {
     return props.theme.small;
@@ -1263,41 +1214,42 @@
   }, function (props) {
     return props.active ? props.theme.color1 : props.theme.color10;
   });
-  var BorderWrapper$1 = styled__default["default"].View(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteral(["\n  min-height: 70px;\n  padding-top: 26px;\n  border-width: 2px;\n  border-color: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n"])), function (props) {
+  var BorderWrapper$2 = styled__default["default"].View(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n  min-height: 70px;\n  padding-top: 26px;\n  border-width: 2px;\n  border-color: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  ", "\n"])), function (props) {
     return props.color;
   }, function (props) {
     return props.theme.borderRadiusSmall;
   }, function (props) {
     return props.active ? props.theme.color1 : props.theme.color10;
+  }, function (_ref) {
+    var isRightBound = _ref.isRightBound,
+        isLeftBound = _ref.isLeftBound,
+        active = _ref.active;
+
+    if (isRightBound) {
+      if (!active) {
+        return "borderTopRightRadius: 0px; borderBottomRightRadius: 0px; border-right-width: 0px;";
+      }
+
+      return "borderTopRightRadius: 0px; borderBottomRightRadius: 0px;";
+    }
+
+    if (isLeftBound) {
+      return "borderTopLeftRadius: 0px; borderBottomLeftRadius: 0px;";
+    }
   });
 
-  var PlaceholderElement = /*#__PURE__*/React__default["default"].memo(function (_ref) {
+  var PlaceholderElement$1 = /*#__PURE__*/React__default["default"].memo(function (_ref) {
     var children = _ref.children,
         active = _ref.active;
     var top = Animated.useSharedValue(active ? 10 : 30);
     var animatedStyle = Animated.useAnimatedStyle(function () {
-      var _f = function _f() {
-        return {
-          top: Animated.withTiming(top.value, {
-            duration: 250,
-            easing: Animated.Easing.bezier(0.19, 1.0, 0.22, 1.0)
-          })
-        };
-      };
-
-      _f._closure = {
-        withTiming: Animated.withTiming,
-        top: top,
-        Easing: {
-          bezier: Animated.Easing.bezier
-        }
+      return {
+        top: Animated.withTiming(top.value, {
+          duration: 250,
+          easing: Animated.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;
-    }());
+    });
     React.useEffect(function () {
       if (active) {
         top.value = 10;
@@ -1343,7 +1295,11 @@
         keyboardVerticalOffset = _ref$keyboardVertical === void 0 ? 0 : _ref$keyboardVertical,
         _ref$hasError = _ref.hasError,
         hasError = _ref$hasError === void 0 ? false : _ref$hasError,
-        error = _ref.error;
+        error = _ref.error,
+        _ref$isRightBound = _ref.isRightBound,
+        isRightBound = _ref$isRightBound === void 0 ? false : _ref$isRightBound,
+        _ref$isLeftBound = _ref.isLeftBound,
+        isLeftBound = _ref$isLeftBound === void 0 ? false : _ref$isLeftBound;
 
     var _useState = React.useState(false),
         _useState2 = _slicedToArray(_useState, 2),
@@ -1367,7 +1323,7 @@
     return /*#__PURE__*/React__default["default"].createElement(reactNative.KeyboardAvoidingView, {
       behavior: reactNative.Platform.OS === "ios" ? "padding" : "height",
       keyboardVerticalOffset: keyboardVerticalOffset
-    }, /*#__PURE__*/React__default["default"].createElement(InputWrapper, {
+    }, /*#__PURE__*/React__default["default"].createElement(InputWrapper$1, {
       onPress: function onPress() {
         var _inputRef$current2;
 
@@ -1376,14 +1332,16 @@
         editable && setIsFocused(true);
         editable && ((_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus());
       }
-    }, /*#__PURE__*/React__default["default"].createElement(BorderWrapper$1, {
+    }, /*#__PURE__*/React__default["default"].createElement(BorderWrapper$2, {
+      isRightBound: isRightBound,
+      isLeftBound: isLeftBound,
       active: isFocused,
       color: !hasError ? isFocused ? borderColorActive : borderColorIdle : borderColorError
-    }, /*#__PURE__*/React__default["default"].createElement(PlaceholderElement, {
+    }, /*#__PURE__*/React__default["default"].createElement(PlaceholderElement$1, {
       active: isFocused || textValue && textValue.length > 0 || value && value.length > 0
     }, /*#__PURE__*/React__default["default"].createElement(MarginHorizontal, null, !hasError ? children : /*#__PURE__*/React__default["default"].createElement(H4Text, {
       color: borderColorError
-    }, error || hasError))), /*#__PURE__*/React__default["default"].createElement(MarginHorizontal, null, /*#__PURE__*/React__default["default"].createElement(InputElement, {
+    }, error || hasError))), /*#__PURE__*/React__default["default"].createElement(MarginHorizontal, null, /*#__PURE__*/React__default["default"].createElement(InputElement$1, {
       ref: inputRef,
       onFocus: function onFocus() {
         return setIsFocused(true);
@@ -1407,6 +1365,192 @@
     })))));
   };
 
+  var _templateObject$i, _templateObject2$9, _templateObject3$3;
+  var InputWrapper = styled__default["default"].Pressable(_templateObject$i || (_templateObject$i = _taggedTemplateLiteral(["\n  min-height: 70px;\n"])));
+  var InputElement = styled__default["default"].TextInput(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteral(["\n  min-height: 40px;\n  font-family: ", ";\n  font-size: ", ";\n  color: ", ";\n  background-color: ", ";\n"])), function (props) {
+    return props.theme.fontFamily2;
+  }, function (props) {
+    return props.theme.small;
+  }, function (props) {
+    return props.theme.color2;
+  }, function (props) {
+    return props.active ? props.theme.color1 : props.theme.color10;
+  });
+  var BorderWrapper$1 = styled__default["default"].View(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteral(["\n  min-height: 70px;\n  padding-top: 26px;\n  border-width: 2px;\n  border-color: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n"])), function (props) {
+    return props.color;
+  }, function (props) {
+    return props.theme.borderRadiusSmall;
+  }, function (props) {
+    return props.active ? props.theme.color1 : props.theme.color10;
+  });
+
+  var PlaceholderElement = /*#__PURE__*/React__default["default"].memo(function (_ref) {
+    var children = _ref.children,
+        active = _ref.active;
+    var top = Animated.useSharedValue(active ? 10 : 30);
+    var animatedStyle = Animated.useAnimatedStyle(function () {
+      return {
+        top: Animated.withTiming(top.value, {
+          duration: 250,
+          easing: Animated.Easing.bezier(0.19, 1.0, 0.22, 1.0)
+        })
+      };
+    });
+    React.useEffect(function () {
+      if (active) {
+        top.value = 10;
+      }
+
+      if (!active) {
+        top.value = 30;
+      }
+    }, [active]);
+    return /*#__PURE__*/React__default["default"].createElement(Animated__default["default"].View, {
+      style: [{
+        position: "absolute",
+        zIndex: 1,
+        justifyContent: "center"
+      }, animatedStyle]
+    }, children);
+  });
+
+  var InputPhone = function InputPhone(_ref) {
+    var children = _ref.children,
+        style = _ref.style,
+        borderColorIdle = _ref.borderColorIdle,
+        borderColorActive = _ref.borderColorActive,
+        borderColorError = _ref.borderColorError,
+        _ref$textChangePrefix = _ref.textChangePrefix,
+        textChangePrefix = _ref$textChangePrefix === void 0 ? function () {} : _ref$textChangePrefix,
+        _ref$textChangeNumber = _ref.textChangeNumber,
+        textChangeNumber = _ref$textChangeNumber === void 0 ? function () {} : _ref$textChangeNumber,
+        _ref$onPress = _ref.onPress,
+        _onPress = _ref$onPress === void 0 ? function () {} : _ref$onPress,
+        valuePrefix = _ref.valuePrefix,
+        valueNumber = _ref.valueNumber,
+        defaultValuePrefix = _ref.defaultValuePrefix,
+        defaultValueNumber = _ref.defaultValueNumber,
+        _ref$multiline = _ref.multiline,
+        multiline = _ref$multiline === void 0 ? false : _ref$multiline,
+        _ref$numberOfLines = _ref.numberOfLines,
+        numberOfLines = _ref$numberOfLines === void 0 ? 1 : _ref$numberOfLines,
+        _ref$maxLength = _ref.maxLength,
+        maxLength = _ref$maxLength === void 0 ? 1000 : _ref$maxLength,
+        _ref$autoFocus = _ref.autoFocus,
+        autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
+        keyboardType = _ref.keyboardType,
+        _ref$editable = _ref.editable,
+        editable = _ref$editable === void 0 ? true : _ref$editable,
+        _ref$keyboardVertical = _ref.keyboardVerticalOffset,
+        keyboardVerticalOffset = _ref$keyboardVertical === void 0 ? 0 : _ref$keyboardVertical,
+        _ref$hasError = _ref.hasError,
+        hasError = _ref$hasError === void 0 ? false : _ref$hasError,
+        error = _ref.error;
+
+    var _useState = React.useState(false),
+        _useState2 = _slicedToArray(_useState, 2),
+        isFocused = _useState2[0],
+        setIsFocused = _useState2[1];
+
+    var _useState3 = React.useState(valuePrefix || defaultValuePrefix),
+        _useState4 = _slicedToArray(_useState3, 2),
+        textValue = _useState4[0],
+        setTextValue = _useState4[1];
+
+    var _useState5 = React.useState(false),
+        _useState6 = _slicedToArray(_useState5, 2),
+        isFocusedPrefix = _useState6[0],
+        setIsFocusedPrefix = _useState6[1];
+
+    var _useState7 = React.useState(valueNumber || defaultValueNumber),
+        _useState8 = _slicedToArray(_useState7, 2),
+        textPrefixValue = _useState8[0],
+        setTextPrefixValue = _useState8[1];
+
+    var inputRef = React.useRef();
+    React.useEffect(function () {
+      textChangeNumber(textValue);
+    }, [textValue]);
+    React.useEffect(function () {
+      textChangePrefix(textPrefixValue);
+    }, [textPrefixValue]);
+    React.useEffect(function () {
+      var _inputRef$current;
+
+      autoFocus && ((_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus());
+    }, [autoFocus]);
+    return /*#__PURE__*/React__default["default"].createElement(reactNative.KeyboardAvoidingView, {
+      behavior: reactNative.Platform.OS === "ios" ? "padding" : "height",
+      keyboardVerticalOffset: keyboardVerticalOffset
+    }, /*#__PURE__*/React__default["default"].createElement(InputWrapper, {
+      onPress: function onPress() {
+        var _inputRef$current2;
+
+        _onPress();
+
+        editable && setIsFocused(true);
+        editable && ((_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus());
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(BorderWrapper$1, {
+      active: isFocused,
+      color: !hasError ? isFocused ? borderColorActive : borderColorIdle : borderColorError
+    }, /*#__PURE__*/React__default["default"].createElement(Row, {
+      style: {
+        backgroundColor: "red",
+        width: "100%"
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(Box, null, /*#__PURE__*/React__default["default"].createElement(PlaceholderElement, {
+      active: isFocusedPrefix || textPrefixValue && textPrefixValue.length > 0 || valuePrefix && valuePrefix.length > 0
+    }, /*#__PURE__*/React__default["default"].createElement(MarginHorizontal, null, !hasError ? children[0] : /*#__PURE__*/React__default["default"].createElement(H4Text, {
+      color: borderColorError
+    }, error || hasError)))), /*#__PURE__*/React__default["default"].createElement(Box, null, /*#__PURE__*/React__default["default"].createElement(PlaceholderElement, {
+      active: isFocused || textValue && textValue.length > 0 || valueNumber && valueNumber.length > 0
+    }, /*#__PURE__*/React__default["default"].createElement(MarginHorizontal, null, !hasError ? children[1] : /*#__PURE__*/React__default["default"].createElement(H4Text, {
+      color: borderColorError
+    }, error || hasError))))), /*#__PURE__*/React__default["default"].createElement(MarginHorizontal, null, /*#__PURE__*/React__default["default"].createElement(Row, null, /*#__PURE__*/React__default["default"].createElement(InputElement, {
+      onFocus: function onFocus() {
+        return setIsFocusedPrefix(true);
+      },
+      onBlur: function onBlur() {
+        return setIsFocusedPrefix(false);
+      },
+      onChangeText: function onChangeText(text) {
+        return setTextPrefixValue(text);
+      },
+      defaultValue: defaultValuePrefix,
+      value: valuePrefix,
+      multiline: multiline,
+      numberOfLines: numberOfLines,
+      maxLength: maxLength,
+      autoFocus: autoFocus,
+      keyboardType: keyboardType,
+      editable: editable,
+      active: isFocusedPrefix,
+      style: style
+    }), /*#__PURE__*/React__default["default"].createElement(InputElement, {
+      ref: inputRef,
+      onFocus: function onFocus() {
+        return setIsFocused(true);
+      },
+      onBlur: function onBlur() {
+        return setIsFocused(false);
+      },
+      onChangeText: function onChangeText(text) {
+        return setTextValue(text);
+      },
+      defaultValue: defaultValueNumber,
+      value: valueNumber,
+      multiline: multiline,
+      numberOfLines: numberOfLines,
+      maxLength: maxLength,
+      autoFocus: autoFocus,
+      keyboardType: keyboardType,
+      editable: editable,
+      active: isFocused,
+      style: style
+    }))))));
+  };
+
   var _templateObject$h, _templateObject2$8, _templateObject3$2;
   var ButtonWrapper = styled__default["default"].Pressable(_templateObject$h || (_templateObject$h = _taggedTemplateLiteral([""])));
   var BorderWrapper = styled__default["default"].View(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteral(["\n  height: 18px;\n  position: absolute;\n  width: 100%;\n  bottom: 10;\n  z-index: 0;\n"])));
@@ -1426,29 +1570,16 @@
         borderColorActive = _ref.borderColorActive;
     var widthActive = Animated.useSharedValue(0);
     var animatedStyleWidthActive = Animated.useAnimatedStyle(function () {
-      var _f = function _f() {
-        return active ? {
-          width: Animated.withTiming(widthActive.value, {
-            duration: 350
-          })
-        } : {
-          width: Animated.withTiming(0, {
-            duration: 350
-          })
-        };
+      return active ? {
+        width: Animated.withTiming(widthActive.value, {
+          duration: 350
+        })
+      } : {
+        width: Animated.withTiming(0, {
+          duration: 350
+        })
       };
-
-      _f._closure = {
-        active: active,
-        withTiming: Animated.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__default["default"].createElement(Row, null, /*#__PURE__*/React__default["default"].createElement(BorderIdle, {
       color: borderColorIdle,
       onLayout: function onLayout(e) {
@@ -1497,14 +1628,12 @@
 
   var _templateObject$f, _templateObject2$6;
   styled__default["default"].View(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral([""])));
-  var ButtonStyle$4 = styled__default["default"].Pressable(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteral(["\n  min-height: ", ";\n  width: 100%;\n  border-radius: ", ";\n  background-color: ", ";\n  opacity: ", ";\n  ", ";\n"])), function (props) {
+  var ButtonStyle$4 = styled__default["default"].Pressable(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteral(["\n  min-height: ", ";\n  width: 100%;\n  border-radius: ", ";\n  background-color: ", ";\n  ", ";\n"])), function (props) {
     return props.size === "big" ? "60px" : "54px";
   }, function (props) {
-    return props.theme.borderRadiusMedium;
-  }, function (props) {
-    return props.color;
+    return props.smallBorder ? props.theme.borderRadiusSmall : props.theme.borderRadiusMedium;
   }, function (props) {
-    return props.active ? 1 : 0.7;
+    return props.active ? props.color : props.theme.greyButton;
   }, function (props) {
     return props.style;
   });
@@ -1519,31 +1648,23 @@
         style = _ref.style,
         _ref$size = _ref.size,
         size = _ref$size === void 0 ? "big" : _ref$size,
+        _ref$smallBorder = _ref.smallBorder,
+        smallBorder = _ref$smallBorder === void 0 ? false : _ref$smallBorder,
         _ref$hitSlop = _ref.hitSlop,
         hitSlop = _ref$hitSlop === void 0 ? 0 : _ref$hitSlop;
     var scale = Animated.useSharedValue(1);
     var animatedStyle = Animated.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__default["default"].createElement(Animated__default["default"].View, {
       style: [animatedStyle]
     }, /*#__PURE__*/React__default["default"].createElement(ButtonStyle$4, {
+      smallBorder: smallBorder,
       hitSlop: hitSlop,
       size: size,
       active: active,
@@ -1586,24 +1707,13 @@
         size = _ref$size === void 0 ? "big" : _ref$size;
     var scale = Animated.useSharedValue(1);
     var animatedStyle = Animated.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/RoundButton/index.js (20:41)";
-      _f.__optimalization = 3;
-      return _f;
-    }());
+    });
     return /*#__PURE__*/React__default["default"].createElement(Animated__default["default"].View, {
       style: [{
         flex: 1
@@ -1646,40 +1756,18 @@
     var scale = Animated.useSharedValue(1);
     var width = Animated.useSharedValue(80);
     var animatedStyle = Animated.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/FloatingButton/FloatingButton.js (24:41)";
-      _f.__optimalization = 3;
-      return _f;
-    }());
+    });
     var animatedWidth = Animated.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/FloatingButton/FloatingButton.js (35:41)";
-      _f.__optimalization = 3;
-      return _f;
-    }());
+    });
     React.useEffect(function () {
       if (active) {
         setTimeout(function () {
@@ -1740,46 +1828,21 @@
     var left = Animated.useSharedValue(30);
     var bottom = Animated.useSharedValue(30);
     var animatedStyle = Animated.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/FloatingButton/index.js (35:41)";
-      _f.__optimalization = 3;
-      return _f;
-    }());
+    });
     var animatedAbsolute = Animated.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;
-    }());
+    });
     React.useEffect(function () {
       scale.value = Animated.withTiming(1, {
         duration: 450,
@@ -1879,40 +1942,18 @@
     var scale = Animated.useSharedValue(1);
     var width = Animated.useSharedValue(70);
     var animatedStyle = Animated.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 = Animated.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/AnimatedButton/FloatingButton.js (40:41)";
-      _f.__optimalization = 3;
-      return _f;
-    }());
+    });
     React.useEffect(function () {
       setTimeout(function () {
         return width.value = Animated.withTiming(leftElement ? reactNative.Dimensions.get("window").width / 2 : reactNative.Dimensions.get("window").width - 60, {
@@ -1972,48 +2013,22 @@
     var left = Animated.useSharedValue(0);
     var bottom = Animated.useSharedValue(10);
     var animatedStyle = Animated.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 = Animated.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;
-    }());
+    });
     React.useEffect(function () {
       scale.value = Animated.withTiming(1, {
         duration: 450,
@@ -2106,40 +2121,18 @@
     var scale = Animated.useSharedValue(1);
     var width = Animated.useSharedValue("100%");
     var animatedStyle = Animated.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 = Animated.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;
-    }());
+    });
     React.useEffect(function () {
       if (loading) {
         width.value = Animated.withTiming(70, {
@@ -2190,46 +2183,21 @@
     var right = Animated.useSharedValue(0);
     var left = Animated.useSharedValue(0);
     var animatedStyle = Animated.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 = Animated.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;
-    }());
+    });
     React.useEffect(function () {
       if (loading) {
         width.value = Animated.withTiming(reactNative.Dimensions.get("window").width, {
@@ -3726,46 +3694,21 @@
     var left = Animated.useSharedValue(0);
     var bottom = Animated.useSharedValue(10);
     var animatedStyle = Animated.useAnimatedStyle(function () {
-      var _f = function _f() {
-        return {
-          transform: [{
-            translateY: translateY.value
-          }],
-          width: "100%"
-        };
-      };
-
-      _f._closure = {
-        translateY: translateY
+      return {
+        transform: [{
+          translateY: translateY.value
+        }],
+        width: "100%"
       };
-      _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 = Animated.useAnimatedStyle(function () {
-      var _f = function _f() {
-        return {
-          height: height.value,
-          right: right.value,
-          left: left.value,
-          bottom: bottom.value
-        };
-      };
-
-      _f._closure = {
-        height: height,
-        right: right,
-        left: left,
-        bottom: bottom
+      return {
+        height: height.value,
+        right: right.value,
+        left: left.value,
+        bottom: bottom.value
       };
-      _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;
-    }());
+    });
     React.useEffect(function () {
       translateY.value = Animated.withTiming(0, {
         duration: 450,
@@ -52575,156 +52518,56 @@
 
     var x = Animated.useSharedValue(0);
     var gestureHandler = Animated.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 = Animated.withSpring(0);
-          } else {
-            if (ctx.startX + event.translationX > width - WIDTH_TO_REMOVE) {
-              x.value = width - WIDTH_FINAL;
-              Animated.runOnJS(setToggled)(true);
-            } else {
-              x.value = ctx.startX + event.translationX;
-            }
-          }
-        };
-
-        _f._closure = {
-          x: x,
-          withSpring: Animated.withSpring,
-          width: width,
-          WIDTH_TO_REMOVE: WIDTH_TO_REMOVE,
-          WIDTH_FINAL: WIDTH_FINAL,
-          runOnJS: Animated.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 = Animated.withSpring(0);
+        } else {
+          if (ctx.startX + event.translationX > width - WIDTH_TO_REMOVE) {
             x.value = width - WIDTH_FINAL;
+            Animated.runOnJS(setToggled)(true);
           } else {
-            x.value = Animated.withSpring(0);
+            x.value = ctx.startX + event.translationX;
           }
-        };
-
-        _f._closure = {
-          toggled: toggled,
-          x: x,
-          width: width,
-          WIDTH_FINAL: WIDTH_FINAL,
-          withSpring: Animated.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 = Animated.withSpring(0);
+        }
+      }
     });
     var animatedStyle = Animated.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 = Animated.useAnimatedStyle(function () {
-      var _f = function _f() {
-        return {
-          width: x.value + BTN_WIDTH + BTN_PADDING,
-          opacity: Animated.interpolate(x.value, InterpolateXInput, [0, 1])
-        };
-      };
-
-      _f._closure = {
-        x: x,
-        BTN_WIDTH: BTN_WIDTH,
-        BTN_PADDING: BTN_PADDING,
-        interpolate: Animated.interpolate,
-        InterpolateXInput: InterpolateXInput
+      return {
+        width: x.value + BTN_WIDTH + BTN_PADDING,
+        opacity: Animated.interpolate(x.value, InterpolateXInput, [0, 1])
       };
-      _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 = Animated.useAnimatedStyle(function () {
-      var _f = function _f() {
-        return {
-          borderColor: Animated.interpolateColor(x.value, [0, width - WIDTH_FINAL], [theme.color7, borderColor])
-        };
-      };
-
-      _f._closure = {
-        interpolateColor: Animated.interpolateColor,
-        x: x,
-        width: width,
-        WIDTH_FINAL: WIDTH_FINAL,
-        theme: {
-          color7: theme.color7
-        },
-        borderColor: borderColor
+      return {
+        borderColor: Animated.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 = Animated.useAnimatedStyle(function () {
-      var _f = function _f() {
-        return {
-          opacity: Animated.interpolate(x.value, InterpolateXInput, [1, 0], Animated.Extrapolate.CLAMP),
-          transform: [{
-            translateX: x.value
-          }]
-        };
+      return {
+        opacity: Animated.interpolate(x.value, InterpolateXInput, [1, 0], Animated.Extrapolate.CLAMP),
+        transform: [{
+          translateX: x.value
+        }]
       };
-
-      _f._closure = {
-        interpolate: Animated.interpolate,
-        x: x,
-        InterpolateXInput: InterpolateXInput,
-        Extrapolate: {
-          CLAMP: Animated.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__default["default"].createElement(Wrapper$1, {
       onLayout: onLayout
     }, /*#__PURE__*/React__default["default"].createElement(RoundWrapper, {
@@ -54594,11 +54437,19 @@
       source: {
         uri: item.src
       }
-    }), /*#__PURE__*/React__default["default"].createElement(Row, null, /*#__PURE__*/React__default["default"].createElement(Box, {
+    }), /*#__PURE__*/React__default["default"].createElement(Row, {
+      style: {
+        alignItems: "center"
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(Box, {
       style: {
         flex: 4
       }
-    }, /*#__PURE__*/React__default["default"].createElement(MarginHorizontal, null, /*#__PURE__*/React__default["default"].createElement(H4Text, null, item.name))), variant === "countryCode" && /*#__PURE__*/React__default["default"].createElement(Box, null, /*#__PURE__*/React__default["default"].createElement(MarginHorizontal, null, /*#__PURE__*/React__default["default"].createElement(H4Text, null, item.code)))))))));
+    }, /*#__PURE__*/React__default["default"].createElement(MarginHorizontal, null, /*#__PURE__*/React__default["default"].createElement(H4Text, null, item.name))), variant === "countryCode" && /*#__PURE__*/React__default["default"].createElement(Box, {
+      style: {
+        flex: 3
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(MarginHorizontal, null, /*#__PURE__*/React__default["default"].createElement(H4Text, null, item.code)))))))));
   };
 
   function NewCustomer(_ref2) {
@@ -54740,6 +54591,7 @@
   exports.Input = Input$1;
   exports.InputNormal = Input;
   exports.InputOtp = InputOtp;
+  exports.InputPhone = InputPhone;
   exports.Loader = Loader;
   exports.Margin = Margin;
   exports.MarginBottom = MarginBottom;