@servesall/atoms 1.1.6 → 1.1.9

package/dist/bundle.cjs.js

@@ -241,6 +241,7 @@ var colors = {
   greenLight: "#F3FFFC",
   greenDark: "#236A56",
   greyText: "#b2bec3",
+  greyButton: "#94A3A9",
   red: "#ff7675",
   redlight: "#FFFAF9",
   redDark: "#9C4140",
@@ -296,8 +297,8 @@ var useThemeContext = function useThemeContext() {
   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;
@@ -310,7 +311,7 @@ var H1 = styled__default["default"].Text(_templateObject$m || (_templateObject$m
 }, 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;
@@ -323,7 +324,7 @@ var H2 = styled__default["default"].Text(_templateObject2$d || (_templateObject2
 }, 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;
@@ -550,14 +551,14 @@ SpanText.propTypes = {
   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";
@@ -566,7 +567,7 @@ var CenterLeftElement = styled__default["default"].View(_templateObject2$c || (_
 }, 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";
@@ -901,22 +902,22 @@ var RoundedTopBox = function RoundedTopBox(_ref) {
   }, 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;
 });
 
@@ -928,29 +929,16 @@ var Line$1 = function Line(_ref) {
       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) {
@@ -965,33 +953,18 @@ var Line$1 = function Line(_ref) {
   })));
 };
 
-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;
@@ -1060,18 +1033,18 @@ var Input$1 = function Input(_ref) {
   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);
@@ -1091,7 +1064,7 @@ var Input$1 = function Input(_ref) {
     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,
@@ -1110,21 +1083,10 @@ var AnimatedPlaceholder$1 = function AnimatedPlaceholder(_ref) {
 
   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) {
@@ -1135,24 +1097,13 @@ var AnimatedPlaceholder$1 = function AnimatedPlaceholder(_ref) {
   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: [{
@@ -1260,9 +1211,9 @@ var InputOtp = function InputOtp(props) {
   }))));
 };
 
-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;
@@ -1271,41 +1222,42 @@ var InputElement = styled__default["default"].TextInput(_templateObject2$9 || (_
 }, 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;
@@ -1351,7 +1303,11 @@ var Input = function Input(_ref) {
       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),
@@ -1375,7 +1331,7 @@ var Input = function Input(_ref) {
   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;
 
@@ -1384,14 +1340,16 @@ var Input = function Input(_ref) {
       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);
@@ -1415,6 +1373,192 @@ var Input = function Input(_ref) {
   })))));
 };
 
+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"])));
@@ -1434,29 +1578,16 @@ var Line = function Line(_ref) {
       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) {
@@ -1505,14 +1636,12 @@ var TextBtn = function TextBtn(_ref) {
 
 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;
 });
@@ -1527,31 +1656,23 @@ var RoundedBtn$1 = function RoundedBtn(_ref) {
       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,
@@ -1594,24 +1715,13 @@ var RoundBtn$3 = function RoundBtn(_ref) {
       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
@@ -1654,40 +1764,18 @@ var RoundBtn$2 = function RoundBtn(_ref) {
   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 () {
@@ -1748,46 +1836,21 @@ var RoundBtn$1 = function RoundBtn(_ref) {
   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,
@@ -1887,40 +1950,18 @@ var RoundBtn = function RoundBtn(_ref) {
   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, {
@@ -1980,48 +2021,22 @@ var AnimatedButton$1 = function AnimatedButton(_ref) {
   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,
@@ -2114,40 +2129,18 @@ var RoundedBtn = function RoundedBtn(_ref) {
   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, {
@@ -2198,46 +2191,21 @@ var AnimatedButton = function AnimatedButton(_ref) {
   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, {
@@ -3734,46 +3702,21 @@ var AnimatedRoundedButton = function AnimatedRoundedButton(_ref) {
   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,
@@ -52583,156 +52526,56 @@ var SwipeButton = function SwipeButton(_ref) {
 
   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, {
@@ -54602,11 +54445,19 @@ var Item = function Item(_ref) {
     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) {
@@ -54748,6 +54599,7 @@ exports.Icon = Icon;
 exports.Input = Input$1;
 exports.InputNormal = Input;
 exports.InputOtp = InputOtp;
+exports.InputPhone = InputPhone;
 exports.Loader = Loader;
 exports.Margin = Margin;
 exports.MarginBottom = MarginBottom;