@servesall/atoms 1.1.8 → 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;
   });
 
@@ -944,7 +945,7 @@
     })));
   };
 
-  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);
@@ -1024,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);
@@ -1055,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,
@@ -1202,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;
@@ -1213,15 +1214,31 @@
   }, 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);
@@ -1278,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),
@@ -1302,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;
 
@@ -1311,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);
@@ -1342,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"])));
@@ -1419,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;
   });
@@ -1441,6 +1648,8 @@
         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);
@@ -1455,6 +1664,7 @@
     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,
@@ -54227,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) {
@@ -54373,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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@servesall/atoms",
-  "version": "1.1.8",
+  "version": "1.1.9",
   "description": "Atoms for react-native",
   "main": "dist/bundle.cjs.js",
   "module": "dist/bundle.esm.js",

package/src/Buttons/RoundedButton/RoundedButton.style.js

@@ -5,8 +5,11 @@ export const ButtonWrapper = styled.View``;
 export const ButtonStyle = styled.Pressable`
   min-height: ${(props) => (props.size === "big" ? "60px" : "54px")};
   width: 100%;
-  border-radius: ${(props) => props.theme.borderRadiusMedium};
-  background-color: ${(props) => props.color};
-  opacity: ${(props) => (props.active ? 1 : 0.7)};
+  border-radius: ${(props) =>
+    props.smallBorder
+      ? props.theme.borderRadiusSmall
+      : props.theme.borderRadiusMedium};
+  background-color: ${(props) =>
+    props.active ? props.color : props.theme.greyButton};
   ${(props) => props.style};
 `;

package/src/Buttons/RoundedButton/index.js

@@ -14,6 +14,7 @@ const RoundedBtn = ({
   onClick = () => {},
   style,
   size = "big",
+  smallBorder = false,
   hitSlop = 0,
 }) => {
   const scale = useSharedValue(1);
@@ -32,6 +33,7 @@ const RoundedBtn = ({
   return (
     <Animated.View style={[animatedStyle]}>
       <ButtonStyle
+        smallBorder={smallBorder}
         hitSlop={hitSlop}
         size={size}
         active={active}

package/src/CountryFlatList/index.js

@@ -31,14 +31,14 @@ const Item = ({ item, setSelected, variant }) => {
                   uri: item.src,
                 }}
               />
-              <Row>
+              <Row style={{ alignItems: "center" }}>
                 <Box style={{ flex: 4 }}>
                   <MarginHorizontal>
                     <H4>{item.name}</H4>
                   </MarginHorizontal>
                 </Box>
                 {variant === "countryCode" && (
-                  <Box>
+                  <Box style={{ flex: 3 }}>
                     <MarginHorizontal>
                       <H4>{item.code}</H4>
                     </MarginHorizontal>

package/src/Inputs/InputNormal/Animated.style.js

@@ -20,4 +20,15 @@ export const BorderWrapper = styled.View`
   border-radius: ${(props) => props.theme.borderRadiusSmall};
   background-color: ${(props) =>
     props.active ? props.theme.color1 : props.theme.color10};
+  ${({ isRightBound, isLeftBound, 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;";
+    }
+  }}
 `;

package/src/Inputs/InputNormal/index.js

@@ -24,6 +24,8 @@ const Input = ({
   keyboardVerticalOffset = 0,
   hasError = false,
   error,
+  isRightBound = false,
+  isLeftBound = false,
 }) => {
   const [isFocused, setIsFocused] = useState(false);
   const [textValue, setTextValue] = useState(value || defaultValue);
@@ -50,6 +52,8 @@ const Input = ({
         }}
       >
         <BorderWrapper
+          isRightBound={isRightBound}
+          isLeftBound={isLeftBound}
           active={isFocused}
           color={
             !hasError

package/src/Inputs/PhoneNumber/Animated.style.js

@@ -0,0 +1,23 @@
+import styled from "styled-components/native";
+
+export const InputWrapper = styled.Pressable`
+  min-height: 70px;
+`;
+
+export const InputElement = styled.TextInput`
+  min-height: 40px;
+  font-family: ${(props) => props.theme.fontFamily2};
+  font-size: ${(props) => props.theme.small};
+  color: ${(props) => props.theme.color2};
+  background-color: ${(props) =>
+    props.active ? props.theme.color1 : props.theme.color10};
+`;
+export const BorderWrapper = styled.View`
+  min-height: 70px;
+  padding-top: 26px;
+  border-width: 2px;
+  border-color: ${(props) => props.color};
+  border-radius: ${(props) => props.theme.borderRadiusSmall};
+  background-color: ${(props) =>
+    props.active ? props.theme.color1 : props.theme.color10};
+`;

package/src/Inputs/PhoneNumber/Placeholder/index.js

@@ -0,0 +1,46 @@
+import React, { useEffect } from "react";
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+
+const PlaceholderElement = React.memo(({ children, active }) => {
+  const top = useSharedValue(active ? 10 : 30);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      top: withTiming(top.value, {
+        duration: 250,
+        easing: Easing.bezier(0.19, 1.0, 0.22, 1.0),
+      }),
+    };
+  });
+
+  useEffect(() => {
+    if (active) {
+      top.value = 10;
+    }
+    if (!active) {
+      top.value = 30;
+    }
+  }, [active]);
+
+  return (
+    <Animated.View
+      style={[
+        {
+          position: "absolute",
+          zIndex: 1,
+          justifyContent: "center",
+        },
+        animatedStyle,
+      ]}
+    >
+      {children}
+    </Animated.View>
+  );
+});
+
+export default PlaceholderElement;