@servesall/atoms 1.1.7 → 1.1.10

package/dist/bundle.esm.js

@@ -228,6 +228,7 @@ var colors = {
   greenLight: "#F3FFFC",
   greenDark: "#236A56",
   greyText: "#b2bec3",
+  greyButton: "#94A3A9",
   red: "#ff7675",
   redlight: "#FFFAF9",
   redDark: "#9C4140",
@@ -283,8 +284,8 @@ var useThemeContext = function useThemeContext() {
   return React.useContext(ThemeContext);
 };
 
-var _templateObject$m, _templateObject2$d, _templateObject3$6, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1;
-var H1 = styled.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.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;
@@ -297,7 +298,7 @@ var H1 = styled.Text(_templateObject$m || (_templateObject$m = _taggedTemplateLi
 }, function (props) {
   return props.style;
 });
-var H2 = styled.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.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;
@@ -310,7 +311,7 @@ var H2 = styled.Text(_templateObject2$d || (_templateObject2$d = _taggedTemplate
 }, function (props) {
   return props.style;
 });
-var H3 = styled.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.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;
@@ -537,14 +538,14 @@ SpanText.propTypes = {
   style: PropTypes.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, _templateObject20, _templateObject21;
 var DEFAULT_FLEX_DIRECTION = Platform.OS === "web" ? "column" : "column";
-var CenterElement = styled.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.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.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.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";
@@ -553,7 +554,7 @@ var CenterLeftElement = styled.View(_templateObject2$c || (_templateObject2$c =
 }, function (props) {
   return props.style;
 });
-var CenterRightElement = styled.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.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";
@@ -639,25 +640,39 @@ var PaddingBottomElement = styled.View(_templateObject14 || (_templateObject14 =
 }, function (props) {
   return props.style;
 });
-var RowElement = styled.View(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  flex-direction: row;\n  ", ";\n"])), function (props) {
+var PaddingLeftElement = styled.View(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  padding-left: ", ";\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
+  return props.theme.padding;
+}, function (props) {
+  return props.flexDirection || DEFAULT_FLEX_DIRECTION;
+}, function (props) {
+  return props.style;
+});
+var PaddingRightElement = styled.View(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  padding-right: ", ";\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
+  return props.theme.padding;
+}, function (props) {
+  return props.flexDirection || DEFAULT_FLEX_DIRECTION;
+}, function (props) {
   return props.style;
 });
-var StretchElement = styled.View(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  align-items: stretch;\n  align-self: stretch;\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
+var RowElement = styled.View(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  flex-direction: row;\n  ", ";\n"])), function (props) {
+  return props.style;
+});
+var StretchElement = styled.View(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  align-items: stretch;\n  align-self: stretch;\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
   return props.flexDirection || DEFAULT_FLEX_DIRECTION;
 }, function (props) {
   return props.style;
 });
-var BoxElement = styled.View(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  flex: 1;\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
+var BoxElement = styled.View(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  flex: 1;\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
   return props.flexDirection || DEFAULT_FLEX_DIRECTION;
 }, function (props) {
   return props.style;
 });
-var FullScreenElement = styled.View(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 11;\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
+var FullScreenElement = styled.View(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 11;\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
   return props.flexDirection || DEFAULT_FLEX_DIRECTION;
 }, function (props) {
   return props.style;
 });
-var WebSmallWrapperElement = styled.View(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  flex-direction: ", ";\n  width: 500px;\n  ", ";\n"])), function (props) {
+var WebSmallWrapperElement = styled.View(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  flex-direction: ", ";\n  width: 500px;\n  ", ";\n"])), function (props) {
   return props.flexDirection || DEFAULT_FLEX_DIRECTION;
 }, function (props) {
   return props.style;
@@ -817,6 +832,28 @@ var PaddingBottom = function PaddingBottom(_ref) {
   }, children);
 };
 
+var PaddingLeft = function PaddingLeft(_ref) {
+  var children = _ref.children,
+      style = _ref.style,
+      _ref$direction = _ref.direction,
+      direction = _ref$direction === void 0 ? false : _ref$direction;
+  return /*#__PURE__*/React.createElement(PaddingLeftElement, {
+    style: style,
+    flexDirection: direction
+  }, children);
+};
+
+var PaddingRight = function PaddingRight(_ref) {
+  var children = _ref.children,
+      style = _ref.style,
+      _ref$direction = _ref.direction,
+      direction = _ref$direction === void 0 ? false : _ref$direction;
+  return /*#__PURE__*/React.createElement(PaddingRightElement, {
+    style: style,
+    flexDirection: direction
+  }, children);
+};
+
 var Row = function Row(_ref) {
   var children = _ref.children,
       style = _ref.style;
@@ -888,22 +925,22 @@ var RoundedTopBox = function RoundedTopBox(_ref) {
   }, children);
 };
 
-var _templateObject$k, _templateObject2$b, _templateObject3$4;
-var InputWrapper$1 = styled.Pressable(_templateObject$k || (_templateObject$k = _taggedTemplateLiteral(["\n  min-height: 80px;\n"])));
-var InputElement$1 = styled.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.Pressable(_templateObject$l || (_templateObject$l = _taggedTemplateLiteral(["\n  min-height: 80px;\n"])));
+var InputElement$2 = styled.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.View(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n  height: 4px;\n"])));
+var BorderWrapper$3 = styled.View(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteral(["\n  height: 4px;\n"])));
 
-var _templateObject$j, _templateObject2$a;
-var BorderIdle$1 = styled.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.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.View(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteral(["\n  height: 4px;\n  background-color: ", ";\n  z-index: 11;\n"])), function (props) {
+var BorderActive$1 = styled.View(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteral(["\n  height: 4px;\n  background-color: ", ";\n  z-index: 11;\n"])), function (props) {
   return props.color;
 });
 
@@ -939,7 +976,7 @@ var Line$1 = function Line(_ref) {
   })));
 };
 
-var PlaceholderElement$1 = /*#__PURE__*/React.memo(function (_ref) {
+var PlaceholderElement$2 = /*#__PURE__*/React.memo(function (_ref) {
   var children = _ref.children,
       active = _ref.active;
   var bottom = useSharedValue(active ? 50 : 4);
@@ -1019,18 +1056,18 @@ var Input$1 = function Input(_ref) {
   return /*#__PURE__*/React.createElement(KeyboardAvoidingView, {
     behavior: Platform.OS === "ios" ? "padding" : "height",
     keyboardVerticalOffset: keyboardVerticalOffset
-  }, /*#__PURE__*/React.createElement(InputWrapper$1, {
+  }, /*#__PURE__*/React.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.createElement(PlaceholderElement$1, {
+  }, /*#__PURE__*/React.createElement(PlaceholderElement$2, {
     active: isFocused || textValue && textValue.length > 0
   }, !hasError ? children : /*#__PURE__*/React.createElement(H3Text, {
     color: borderColorError
-  }, error || hasError)), /*#__PURE__*/React.createElement(InputElement$1, {
+  }, error || hasError)), /*#__PURE__*/React.createElement(InputElement$2, {
     ref: inputRef,
     onFocus: function onFocus() {
       return setIsFocused(true);
@@ -1050,7 +1087,7 @@ var Input$1 = function Input(_ref) {
     keyboardType: keyboardType,
     editable: editable,
     style: style
-  }), /*#__PURE__*/React.createElement(BorderWrapper$2, null, /*#__PURE__*/React.createElement(Line$1, {
+  }), /*#__PURE__*/React.createElement(BorderWrapper$3, null, /*#__PURE__*/React.createElement(Line$1, {
     active: isFocused,
     borderColorActive: borderColorActive,
     borderColorIdle: borderColorIdle,
@@ -1197,9 +1234,9 @@ var InputOtp = function InputOtp(props) {
   }))));
 };
 
-var _templateObject$i, _templateObject2$9, _templateObject3$3;
-var InputWrapper = styled.Pressable(_templateObject$i || (_templateObject$i = _taggedTemplateLiteral(["\n  min-height: 70px;\n"])));
-var InputElement = styled.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.Pressable(_templateObject$j || (_templateObject$j = _taggedTemplateLiteral(["\n  min-height: 70px;\n"])));
+var InputElement$1 = styled.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;
@@ -1208,15 +1245,31 @@ var InputElement = styled.TextInput(_templateObject2$9 || (_templateObject2$9 =
 }, function (props) {
   return props.active ? props.theme.color1 : props.theme.color10;
 });
-var BorderWrapper$1 = styled.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.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.memo(function (_ref) {
+var PlaceholderElement$1 = /*#__PURE__*/React.memo(function (_ref) {
   var children = _ref.children,
       active = _ref.active;
   var top = useSharedValue(active ? 10 : 30);
@@ -1273,7 +1326,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 = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -1297,7 +1354,7 @@ var Input = function Input(_ref) {
   return /*#__PURE__*/React.createElement(KeyboardAvoidingView, {
     behavior: Platform.OS === "ios" ? "padding" : "height",
     keyboardVerticalOffset: keyboardVerticalOffset
-  }, /*#__PURE__*/React.createElement(InputWrapper, {
+  }, /*#__PURE__*/React.createElement(InputWrapper$1, {
     onPress: function onPress() {
       var _inputRef$current2;
 
@@ -1306,14 +1363,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.createElement(BorderWrapper$1, {
+  }, /*#__PURE__*/React.createElement(BorderWrapper$2, {
+    isRightBound: isRightBound,
+    isLeftBound: isLeftBound,
     active: isFocused,
     color: !hasError ? isFocused ? borderColorActive : borderColorIdle : borderColorError
-  }, /*#__PURE__*/React.createElement(PlaceholderElement, {
+  }, /*#__PURE__*/React.createElement(PlaceholderElement$1, {
     active: isFocused || textValue && textValue.length > 0 || value && value.length > 0
   }, /*#__PURE__*/React.createElement(MarginHorizontal, null, !hasError ? children : /*#__PURE__*/React.createElement(H4Text, {
     color: borderColorError
-  }, error || hasError))), /*#__PURE__*/React.createElement(MarginHorizontal, null, /*#__PURE__*/React.createElement(InputElement, {
+  }, error || hasError))), /*#__PURE__*/React.createElement(MarginHorizontal, null, /*#__PURE__*/React.createElement(InputElement$1, {
     ref: inputRef,
     onFocus: function onFocus() {
       return setIsFocused(true);
@@ -1337,6 +1396,192 @@ var Input = function Input(_ref) {
   })))));
 };
 
+var _templateObject$i, _templateObject2$9, _templateObject3$3;
+var InputWrapper = styled.Pressable(_templateObject$i || (_templateObject$i = _taggedTemplateLiteral(["\n  min-height: 70px;\n"])));
+var InputElement = styled.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.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.memo(function (_ref) {
+  var children = _ref.children,
+      active = _ref.active;
+  var top = useSharedValue(active ? 10 : 30);
+  var animatedStyle = useAnimatedStyle(function () {
+    return {
+      top: withTiming(top.value, {
+        duration: 250,
+        easing: Easing.bezier(0.19, 1.0, 0.22, 1.0)
+      })
+    };
+  });
+  useEffect(function () {
+    if (active) {
+      top.value = 10;
+    }
+
+    if (!active) {
+      top.value = 30;
+    }
+  }, [active]);
+  return /*#__PURE__*/React.createElement(Animated.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 = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isFocused = _useState2[0],
+      setIsFocused = _useState2[1];
+
+  var _useState3 = useState(valuePrefix || defaultValuePrefix),
+      _useState4 = _slicedToArray(_useState3, 2),
+      textValue = _useState4[0],
+      setTextValue = _useState4[1];
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      isFocusedPrefix = _useState6[0],
+      setIsFocusedPrefix = _useState6[1];
+
+  var _useState7 = useState(valueNumber || defaultValueNumber),
+      _useState8 = _slicedToArray(_useState7, 2),
+      textPrefixValue = _useState8[0],
+      setTextPrefixValue = _useState8[1];
+
+  var inputRef = useRef();
+  useEffect(function () {
+    textChangeNumber(textValue);
+  }, [textValue]);
+  useEffect(function () {
+    textChangePrefix(textPrefixValue);
+  }, [textPrefixValue]);
+  useEffect(function () {
+    var _inputRef$current;
+
+    autoFocus && ((_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus());
+  }, [autoFocus]);
+  return /*#__PURE__*/React.createElement(KeyboardAvoidingView, {
+    behavior: Platform.OS === "ios" ? "padding" : "height",
+    keyboardVerticalOffset: keyboardVerticalOffset
+  }, /*#__PURE__*/React.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.createElement(BorderWrapper$1, {
+    active: isFocused,
+    color: !hasError ? isFocused ? borderColorActive : borderColorIdle : borderColorError
+  }, /*#__PURE__*/React.createElement(Row, {
+    style: {
+      backgroundColor: "red",
+      width: "100%"
+    }
+  }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(PlaceholderElement, {
+    active: isFocusedPrefix || textPrefixValue && textPrefixValue.length > 0 || valuePrefix && valuePrefix.length > 0
+  }, /*#__PURE__*/React.createElement(MarginHorizontal, null, !hasError ? children[0] : /*#__PURE__*/React.createElement(H4Text, {
+    color: borderColorError
+  }, error || hasError)))), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(PlaceholderElement, {
+    active: isFocused || textValue && textValue.length > 0 || valueNumber && valueNumber.length > 0
+  }, /*#__PURE__*/React.createElement(MarginHorizontal, null, !hasError ? children[1] : /*#__PURE__*/React.createElement(H4Text, {
+    color: borderColorError
+  }, error || hasError))))), /*#__PURE__*/React.createElement(MarginHorizontal, null, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.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.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.Pressable(_templateObject$h || (_templateObject$h = _taggedTemplateLiteral([""])));
 var BorderWrapper = styled.View(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteral(["\n  height: 18px;\n  position: absolute;\n  width: 100%;\n  bottom: 10;\n  z-index: 0;\n"])));
@@ -1414,14 +1659,12 @@ var TextBtn = function TextBtn(_ref) {
 
 var _templateObject$f, _templateObject2$6;
 styled.View(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral([""])));
-var ButtonStyle$4 = styled.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.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;
+  return props.smallBorder ? props.theme.borderRadiusSmall : props.theme.borderRadiusMedium;
 }, function (props) {
-  return props.color;
-}, function (props) {
-  return props.active ? 1 : 0.7;
+  return props.active ? props.color : props.theme.greyButton;
 }, function (props) {
   return props.style;
 });
@@ -1436,6 +1679,8 @@ 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 = useSharedValue(1);
@@ -1450,6 +1695,7 @@ var RoundedBtn$1 = function RoundedBtn(_ref) {
   return /*#__PURE__*/React.createElement(Animated.View, {
     style: [animatedStyle]
   }, /*#__PURE__*/React.createElement(ButtonStyle$4, {
+    smallBorder: smallBorder,
     hitSlop: hitSlop,
     size: size,
     active: active,
@@ -54222,11 +54468,19 @@ var Item = function Item(_ref) {
     source: {
       uri: item.src
     }
-  }), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Box, {
+  }), /*#__PURE__*/React.createElement(Row, {
+    style: {
+      alignItems: "center"
+    }
+  }, /*#__PURE__*/React.createElement(Box, {
     style: {
       flex: 4
     }
-  }, /*#__PURE__*/React.createElement(MarginHorizontal, null, /*#__PURE__*/React.createElement(H4Text, null, item.name))), variant === "countryCode" && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(MarginHorizontal, null, /*#__PURE__*/React.createElement(H4Text, null, item.code)))))))));
+  }, /*#__PURE__*/React.createElement(MarginHorizontal, null, /*#__PURE__*/React.createElement(H4Text, null, item.name))), variant === "countryCode" && /*#__PURE__*/React.createElement(Box, {
+    style: {
+      flex: 3
+    }
+  }, /*#__PURE__*/React.createElement(MarginHorizontal, null, /*#__PURE__*/React.createElement(H4Text, null, item.code)))))))));
 };
 
 function NewCustomer(_ref2) {
@@ -54343,4 +54597,4 @@ function NewCustomer(_ref2) {
   }));
 }
 
-export { AnimatedButton$1 as AnimatedButton, AnimatedPlaceholder, AnimatedRoundedButton, BottomNavBar, Box, Center, CenterLeft, CenterRight, NewCustomer as CountryList, Error, ErrorText, AnimatedButton as FeedbackButton, FlatList, RoundBtn$1 as FloatingBtn, FullScreen, H1Text as H1, H2Text as H2, H3Text as H3, H4Text as H4, H5Text as H5, Header, Icon, Input$1 as Input, Input as InputNormal, InputOtp, Loader, Margin, MarginBottom, MarginHorizontal, MarginRight, MarginTop, MarginVertical, pText as P, Padding, PaddingBottom, PaddingHorizontal, PaddingTop, PaddingVertical, RoundBtn$3 as RoundBtn, RoundedBtn$1 as RoundedBtn, RoundedTopBox, Row, SpanText as Span, Stretch, Success, SwipeButton, Switch, TextBtn, ThemeWrapper, WebSmallWrapper, useThemeContext };
+export { AnimatedButton$1 as AnimatedButton, AnimatedPlaceholder, AnimatedRoundedButton, BottomNavBar, Box, Center, CenterLeft, CenterRight, NewCustomer as CountryList, Error, ErrorText, AnimatedButton as FeedbackButton, FlatList, RoundBtn$1 as FloatingBtn, FullScreen, H1Text as H1, H2Text as H2, H3Text as H3, H4Text as H4, H5Text as H5, Header, Icon, Input$1 as Input, Input as InputNormal, InputOtp, InputPhone, Loader, Margin, MarginBottom, MarginHorizontal, MarginRight, MarginTop, MarginVertical, pText as P, Padding, PaddingBottom, PaddingHorizontal, PaddingLeft, PaddingRight, PaddingTop, PaddingVertical, RoundBtn$3 as RoundBtn, RoundedBtn$1 as RoundedBtn, RoundedTopBox, Row, SpanText as Span, Stretch, Success, SwipeButton, Switch, TextBtn, ThemeWrapper, WebSmallWrapper, useThemeContext };