@servesall/atoms 1.1.16 → 1.1.19

package/dist/bundle.umd.js

@@ -549,126 +549,126 @@
     style: PropTypes__default["default"].object
   };
 
-  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, _templateObject22;
+  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, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26;
   var DEFAULT_FLEX_DIRECTION = reactNative.Platform.OS === "web" ? "column" : "column";
-  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;
+  var CenterElement = styled__default["default"].View(_templateObject$m || (_templateObject$m = _taggedTemplateLiteral(["\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  flexdirection: ", ";\n  ", ";\n"])), function (props) {
+    return props.direction || DEFAULT_FLEX_DIRECTION;
   }, function (props) {
     return props.style;
   });
   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";
+    return (props.direction || DEFAULT_FLEX_DIRECTION) === "row" ? "center" : "flex-start";
   }, function (props) {
-    return (props.flexDirection || DEFAULT_FLEX_DIRECTION) === "row" ? "flex-start" : "center";
+    return (props.direction || DEFAULT_FLEX_DIRECTION) === "row" ? "flex-start" : "center";
   }, function (props) {
-    return props.flexDirection || DEFAULT_FLEX_DIRECTION;
+    return props.direction || DEFAULT_FLEX_DIRECTION;
   }, function (props) {
     return props.style;
   });
   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";
+    return (props.direction || DEFAULT_FLEX_DIRECTION) === "row" ? "center" : "flex-end";
   }, function (props) {
-    return (props.flexDirection || DEFAULT_FLEX_DIRECTION) === "row" ? "flex-end" : "center";
+    return (props.direction || DEFAULT_FLEX_DIRECTION) === "row" ? "flex-end" : "center";
   }, function (props) {
-    return props.flexDirection || DEFAULT_FLEX_DIRECTION;
+    return props.direction || DEFAULT_FLEX_DIRECTION;
   }, function (props) {
     return props.style;
   });
   var MarginElement = styled__default["default"].View(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin: ", ";\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
     return props.theme.margin;
   }, function (props) {
-    return props.flexDirection || DEFAULT_FLEX_DIRECTION;
+    return props.direction || DEFAULT_FLEX_DIRECTION;
   }, function (props) {
     return props.style;
   });
   var MarginHorizontalElement = styled__default["default"].View(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin: 0 ", ";\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
     return props.theme.margin;
   }, function (props) {
-    return props.flexDirection || DEFAULT_FLEX_DIRECTION;
+    return props.direction || DEFAULT_FLEX_DIRECTION;
   }, function (props) {
     return props.style;
   });
   var MarginVerticalElement = styled__default["default"].View(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  margin: ", " 0;\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
     return props.theme.margin;
   }, function (props) {
-    return props.flexDirection || DEFAULT_FLEX_DIRECTION;
+    return props.direction || DEFAULT_FLEX_DIRECTION;
   }, function (props) {
     return props.style;
   });
   var MarginBottomElement = styled__default["default"].View(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
     return props.theme.margin;
   }, function (props) {
-    return props.flexDirection || DEFAULT_FLEX_DIRECTION;
+    return props.direction || DEFAULT_FLEX_DIRECTION;
   }, function (props) {
     return props.style;
   });
   var MarginTopElement = styled__default["default"].View(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
     return props.theme.margin;
   }, function (props) {
-    return props.flexDirection || DEFAULT_FLEX_DIRECTION;
+    return props.direction || DEFAULT_FLEX_DIRECTION;
   }, function (props) {
     return props.style;
   });
   var MarginRightElement = styled__default["default"].View(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  margin-right: ", ";\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
     return props.theme.margin;
   }, function (props) {
-    return props.flexDirection || DEFAULT_FLEX_DIRECTION;
+    return props.direction || DEFAULT_FLEX_DIRECTION;
   }, function (props) {
     return props.style;
   });
   var MarginLeftElement = styled__default["default"].View(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  margin-left: ", ";\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
     return props.theme.margin;
   }, function (props) {
-    return props.flexDirection || DEFAULT_FLEX_DIRECTION;
+    return props.direction || DEFAULT_FLEX_DIRECTION;
   }, function (props) {
     return props.style;
   });
   var PaddingElement = styled__default["default"].View(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  padding: ", ";\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
     return props.theme.padding;
   }, function (props) {
-    return props.flexDirection || DEFAULT_FLEX_DIRECTION;
+    return props.direction || DEFAULT_FLEX_DIRECTION;
   }, function (props) {
     return props.style;
   });
   var PaddingHorizontalElement = styled__default["default"].View(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  padding: 0 ", ";\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
     return props.theme.padding;
   }, function (props) {
-    return props.flexDirection || DEFAULT_FLEX_DIRECTION;
+    return props.direction || DEFAULT_FLEX_DIRECTION;
   }, function (props) {
     return props.style;
   });
   var PaddingVerticalElement = styled__default["default"].View(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  padding: ", " 0;\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
     return props.theme.padding;
   }, function (props) {
-    return props.flexDirection || DEFAULT_FLEX_DIRECTION;
+    return props.direction || DEFAULT_FLEX_DIRECTION;
   }, function (props) {
     return props.style;
   });
   var PaddingTopElement = styled__default["default"].View(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  padding-top: ", ";\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
     return props.theme.padding;
   }, function (props) {
-    return props.flexDirection || DEFAULT_FLEX_DIRECTION;
+    return props.direction || DEFAULT_FLEX_DIRECTION;
   }, function (props) {
     return props.style;
   });
   var PaddingBottomElement = styled__default["default"].View(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  padding-bottom: ", ";\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
     return props.theme.padding;
   }, function (props) {
-    return props.flexDirection || DEFAULT_FLEX_DIRECTION;
+    return props.direction || DEFAULT_FLEX_DIRECTION;
   }, function (props) {
     return props.style;
   });
   var PaddingLeftElement = styled__default["default"].View(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  padding-left: ", ";\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
     return props.theme.padding;
   }, function (props) {
-    return props.flexDirection || DEFAULT_FLEX_DIRECTION;
+    return props.direction || DEFAULT_FLEX_DIRECTION;
   }, function (props) {
     return props.style;
   });
   var PaddingRightElement = styled__default["default"].View(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  padding-right: ", ";\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
     return props.theme.padding;
   }, function (props) {
-    return props.flexDirection || DEFAULT_FLEX_DIRECTION;
+    return props.direction || DEFAULT_FLEX_DIRECTION;
   }, function (props) {
     return props.style;
   });
@@ -676,25 +676,49 @@
     return props.style;
   });
   var StretchElement = styled__default["default"].View(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  align-items: stretch;\n  align-self: stretch;\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
-    return props.flexDirection || DEFAULT_FLEX_DIRECTION;
+    return props.direction || DEFAULT_FLEX_DIRECTION;
   }, function (props) {
     return props.style;
   });
   var BoxElement = styled__default["default"].View(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n  flex: 1;\n  flex-direction: ", ";\n  ", ";\n"])), function (props) {
-    return props.flexDirection || DEFAULT_FLEX_DIRECTION;
+    return props.direction || DEFAULT_FLEX_DIRECTION;
   }, function (props) {
     return props.style;
   });
-  var FullScreenElement = styled__default["default"].View(_templateObject21 || (_templateObject21 = _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;
+  var BorderBottomElement = styled__default["default"].View(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  border-bottom-width: 2px;\n  border-color: ", ";\n  ", ";\n"])), function (props) {
+    return props.theme.color7;
   }, function (props) {
     return props.style;
   });
-  var WebSmallWrapperElement = styled__default["default"].View(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n  flex-direction: ", ";\n  width: 500px;\n  ", ";\n"])), function (props) {
-    return props.flexDirection || DEFAULT_FLEX_DIRECTION;
+  var BorderTopElement = styled__default["default"].View(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n  border-top-width: 2px;\n  border-color: ", ";\n  ", ";\n"])), function (props) {
+    return props.theme.color7;
   }, function (props) {
     return props.style;
   });
+  var BorderBoxElement = styled__default["default"].View(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n  border-width: 2px;\n  border-color: ", ";\n  border-radius: ", ";\n  ", ";\n"])), function (props) {
+    return props.theme.color7;
+  }, function (props) {
+    return props.theme.borderRadiusSmall;
+  }, function (props) {
+    return props.style;
+  });
+  var FullScreenElement = styled__default["default"].View(_templateObject24 || (_templateObject24 = _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.direction || DEFAULT_FLEX_DIRECTION;
+  }, function (props) {
+    return props.style;
+  });
+  var WebSmallWrapperElement = styled__default["default"].View(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n  flex-direction: ", ";\n  width: 500px;\n  ", ";\n"])), function (props) {
+    return props.direction || DEFAULT_FLEX_DIRECTION;
+  }, function (props) {
+    return props.style;
+  });
+  var ImageWrapperElement = styled__default["default"].View(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n  border-radius: ", ";\n  background-color: ", ";\n  overflow: hidden;\n  ", ";\n"])), function (props) {
+    return props.theme.borderRadiusSmall;
+  }, function (props) {
+    return props.theme.color7;
+  }, function (props) {
+    return props.styles;
+  });
 
   var Center = function Center(_ref) {
     var children = _ref.children,
@@ -703,7 +727,7 @@
         direction = _ref$direction === void 0 ? false : _ref$direction;
     return /*#__PURE__*/React__default["default"].createElement(CenterElement, {
       style: style,
-      flexDirection: direction
+      direction: direction
     }, children);
   };
 
@@ -714,7 +738,7 @@
         direction = _ref$direction === void 0 ? false : _ref$direction;
     return /*#__PURE__*/React__default["default"].createElement(CenterLeftElement, {
       style: style,
-      flexDirection: direction
+      direction: direction
     }, children);
   };
 
@@ -725,7 +749,7 @@
         direction = _ref$direction === void 0 ? false : _ref$direction;
     return /*#__PURE__*/React__default["default"].createElement(CenterRightElement, {
       style: style,
-      flexDirection: direction
+      direction: direction
     }, children);
   };
 
@@ -736,7 +760,7 @@
         direction = _ref$direction === void 0 ? false : _ref$direction;
     return /*#__PURE__*/React__default["default"].createElement(MarginElement, {
       style: style,
-      flexDirection: direction
+      direction: direction
     }, children);
   };
 
@@ -747,7 +771,7 @@
         direction = _ref$direction === void 0 ? false : _ref$direction;
     return /*#__PURE__*/React__default["default"].createElement(MarginHorizontalElement, {
       style: style,
-      flexDirection: direction
+      direction: direction
     }, children);
   };
 
@@ -758,7 +782,7 @@
         direction = _ref$direction === void 0 ? false : _ref$direction;
     return /*#__PURE__*/React__default["default"].createElement(MarginVerticalElement, {
       style: style,
-      flexDirection: direction
+      direction: direction
     }, children);
   };
 
@@ -769,7 +793,7 @@
         direction = _ref$direction === void 0 ? false : _ref$direction;
     return /*#__PURE__*/React__default["default"].createElement(MarginBottomElement, {
       style: style,
-      flexDirection: direction
+      direction: direction
     }, children);
   };
 
@@ -780,7 +804,7 @@
         direction = _ref$direction === void 0 ? false : _ref$direction;
     return /*#__PURE__*/React__default["default"].createElement(MarginTopElement, {
       style: style,
-      flexDirection: direction
+      direction: direction
     }, children);
   };
 
@@ -791,7 +815,7 @@
         direction = _ref$direction === void 0 ? false : _ref$direction;
     return /*#__PURE__*/React__default["default"].createElement(MarginRightElement, {
       style: style,
-      flexDirection: direction
+      direction: direction
     }, children);
   };
 
@@ -802,7 +826,7 @@
         direction = _ref$direction === void 0 ? false : _ref$direction;
     return /*#__PURE__*/React__default["default"].createElement(MarginLeftElement, {
       style: style,
-      flexDirection: direction
+      direction: direction
     }, children);
   };
 
@@ -813,7 +837,7 @@
         direction = _ref$direction === void 0 ? false : _ref$direction;
     return /*#__PURE__*/React__default["default"].createElement(PaddingElement, {
       style: style,
-      flexDirection: direction
+      direction: direction
     }, children);
   };
 
@@ -824,7 +848,7 @@
         direction = _ref$direction === void 0 ? false : _ref$direction;
     return /*#__PURE__*/React__default["default"].createElement(PaddingHorizontalElement, {
       style: style,
-      flexDirection: direction
+      direction: direction
     }, children);
   };
 
@@ -835,7 +859,7 @@
         direction = _ref$direction === void 0 ? false : _ref$direction;
     return /*#__PURE__*/React__default["default"].createElement(PaddingVerticalElement, {
       style: style,
-      flexDirection: direction
+      direction: direction
     }, children);
   };
 
@@ -846,7 +870,7 @@
         direction = _ref$direction === void 0 ? false : _ref$direction;
     return /*#__PURE__*/React__default["default"].createElement(PaddingTopElement, {
       style: style,
-      flexDirection: direction
+      direction: direction
     }, children);
   };
 
@@ -857,7 +881,7 @@
         direction = _ref$direction === void 0 ? false : _ref$direction;
     return /*#__PURE__*/React__default["default"].createElement(PaddingBottomElement, {
       style: style,
-      flexDirection: direction
+      direction: direction
     }, children);
   };
 
@@ -868,7 +892,7 @@
         direction = _ref$direction === void 0 ? false : _ref$direction;
     return /*#__PURE__*/React__default["default"].createElement(PaddingLeftElement, {
       style: style,
-      flexDirection: direction
+      direction: direction
     }, children);
   };
 
@@ -879,7 +903,7 @@
         direction = _ref$direction === void 0 ? false : _ref$direction;
     return /*#__PURE__*/React__default["default"].createElement(PaddingRightElement, {
       style: style,
-      flexDirection: direction
+      direction: direction
     }, children);
   };
 
@@ -898,7 +922,7 @@
         direction = _ref$direction === void 0 ? false : _ref$direction;
     return /*#__PURE__*/React__default["default"].createElement(StretchElement, {
       style: style,
-      flexDirection: direction
+      direction: direction
     }, children);
   };
 
@@ -917,7 +941,7 @@
         direction = _ref$direction === void 0 ? false : _ref$direction;
     return /*#__PURE__*/React__default["default"].createElement(WebSmallWrapperElement, {
       style: style,
-      flexDirection: direction
+      direction: direction
     }, children);
   };
 
@@ -932,7 +956,7 @@
       style: _objectSpread2({
         backgroundColor: color
       }, style),
-      flexDirection: direction
+      direction: direction
     }, children);
   };
 
@@ -950,7 +974,40 @@
         borderTopRightRadius: 30,
         overflow: "hidden"
       }, style),
-      flexDirection: direction
+      direction: direction
+    }, children);
+  };
+
+  var BorderBottom = function BorderBottom(_ref) {
+    var children = _ref.children,
+        style = _ref.style;
+    return /*#__PURE__*/React__default["default"].createElement(BorderBottomElement, {
+      style: _objectSpread2({}, style)
+    }, children);
+  };
+
+  var BorderTop = function BorderTop(_ref) {
+    var children = _ref.children,
+        style = _ref.style;
+    return /*#__PURE__*/React__default["default"].createElement(BorderTopElement, {
+      style: _objectSpread2({}, style)
+    }, children);
+  };
+
+  var BorderBox = function BorderBox(_ref) {
+    var children = _ref.children,
+        style = _ref.style;
+    return /*#__PURE__*/React__default["default"].createElement(BorderBoxElement, {
+      style: _objectSpread2({}, style)
+    }, children);
+  };
+
+  var ImageWrapper = function ImageWrapper(_ref) {
+    var children = _ref.children;
+        _ref.box;
+        var style = _ref.style;
+    return /*#__PURE__*/React__default["default"].createElement(ImageWrapperElement, {
+      style: _objectSpread2({}, style)
     }, children);
   };
 
@@ -1361,7 +1418,9 @@
         _ref$isLeftBound = _ref.isLeftBound,
         isLeftBound = _ref$isLeftBound === void 0 ? false : _ref$isLeftBound,
         _ref$euro = _ref.euro,
-        euro = _ref$euro === void 0 ? false : _ref$euro;
+        euro = _ref$euro === void 0 ? false : _ref$euro,
+        _ref$focused = _ref.focused,
+        focused = _ref$focused === void 0 ? function () {} : _ref$focused;
 
     var _useState = React.useState(false),
         _useState2 = _slicedToArray(_useState, 2),
@@ -1374,25 +1433,44 @@
         setTextValue = _useState4[1];
 
     var inputRef = React.useRef();
+    React.useEffect(function () {
+      focused();
+    }, [isFocused]);
     React.useEffect(function () {
       textChange(textValue);
     }, [textValue]);
+    React.useEffect(function () {
+      defaultValue && setTextValue(defaultValue);
+    }, [defaultValue]);
     React.useEffect(function () {
       var _inputRef$current;
 
       autoFocus && ((_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus());
     }, [autoFocus]);
+
+    function blurTextInput() {
+      var _inputRef$current2;
+
+      (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.blur();
+    }
+
+    React.useEffect(function () {
+      var keyboardDidHideSubscription = reactNative.Keyboard.addListener("keyboardDidHide", blurTextInput);
+      return function () {
+        keyboardDidHideSubscription === null || keyboardDidHideSubscription === void 0 ? void 0 : keyboardDidHideSubscription.remove();
+      };
+    }, []);
     return /*#__PURE__*/React__default["default"].createElement(reactNative.KeyboardAvoidingView, {
       behavior: reactNative.Platform.OS === "ios" ? "padding" : "height",
       keyboardVerticalOffset: keyboardVerticalOffset
     }, /*#__PURE__*/React__default["default"].createElement(InputWrapper$1, {
       onPress: function onPress() {
-        var _inputRef$current2;
+        var _inputRef$current3;
 
         _onPress();
 
         editable && setIsFocused(true);
-        editable && ((_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus());
+        editable && ((_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.focus());
       }
     }, /*#__PURE__*/React__default["default"].createElement(BorderWrapper$2, {
       isRightBound: isRightBound,
@@ -1429,7 +1507,8 @@
       editable: editable,
       active: isFocused,
       style: style,
-      returnKeyType: "done"
+      returnKeyType: "done",
+      onSubmitEditing: blurTextInput
     }))))));
   };
 
@@ -1697,7 +1776,15 @@
   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  ", ";\n"])), function (props) {
-    return props.size === "big" ? "60px" : "54px";
+    if (props.size === "big") {
+      return "60px";
+    } else if (props.size === "small") {
+      return "54px";
+    } else if (props.size === "xsmall") {
+      return "44px";
+    } else {
+      return "54px";
+    }
   }, function (props) {
     return props.smallBorder ? props.theme.borderRadiusSmall : props.theme.borderRadiusMedium;
   }, function (props) {
@@ -1754,7 +1841,15 @@
   var _templateObject$e, _templateObject2$5;
   styled__default["default"].View(_templateObject$e || (_templateObject$e = _taggedTemplateLiteral([""])));
   var ButtonStyle$3 = styled__default["default"].Pressable(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral(["\n  min-height: ", ";\n  border-radius: 50px;\n  background-color: ", ";\n  opacity: ", ";\n  ", ";\n"])), function (props) {
-    return props.size === "big" ? "70px" : "56px";
+    if (props.size === "big") {
+      return "70px";
+    } else if (props.size === "small") {
+      return "56px";
+    } else if (props.size === "xsmall") {
+      return "40px";
+    } else {
+      return "70px";
+    }
   }, function (props) {
     return props.color;
   }, function (props) {
@@ -51967,12 +52062,12 @@
 
   var _templateObject$1, _templateObject2$1, _templateObject3;
   var Wrapper$1 = styled__default["default"].View(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  flex: 1;\n"])));
-  var RoundWrapper = styled__default["default"](Animated__default["default"].View)(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n  width: 100%;\n  border-radius: ", ";\n  overflow: hidden;\n  padding: 8px;\n  border-width: 2px;\n  ", ";\n"])), function (props) {
+  styled__default["default"](Animated__default["default"].View)(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n  width: 100%;\n  border-radius: ", ";\n  overflow: hidden;\n  padding: 8px;\n  border-width: 2px;\n  ", ";\n"])), function (props) {
     return props.theme.borderRadius;
   }, function (props) {
     return props.style;
   });
-  var RoundSlider = styled__default["default"].View(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 62px;\n  height: 52px;\n  background-color: ", ";\n  border-radius: ", ";\n  border-width: 2px;\n  ", ";\n"])), function (props) {
+  var RoundSlider = styled__default["default"](Animated__default["default"].View)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 62px;\n  height: 52px;\n  background-color: ", ";\n  border-radius: ", ";\n  border-width: 2px;\n  ", ";\n"])), function (props) {
     return props.theme.color1;
   }, function (props) {
     return props.theme.borderRadiusMedium;
@@ -52068,8 +52163,14 @@
     });
     return /*#__PURE__*/React__default["default"].createElement(Wrapper$1, {
       onLayout: onLayout
-    }, /*#__PURE__*/React__default["default"].createElement(RoundWrapper, {
-      style: [animatedBorder]
+    }, /*#__PURE__*/React__default["default"].createElement(Animated__default["default"].View, {
+      style: [animatedBorder, {
+        width: "100%",
+        borderRadius: parseInt(theme.borderRadiusMedium, 10),
+        overflow: "hidden",
+        padding: 8,
+        borderWidth: 2
+      }]
     }, /*#__PURE__*/React__default["default"].createElement(Animated__default["default"].View, {
       style: [colorWave, {
         position: "absolute",
@@ -54067,6 +54168,9 @@
   exports.AnimatedButton = AnimatedButton$1;
   exports.AnimatedPlaceholder = AnimatedPlaceholder;
   exports.AnimatedRoundedButton = AnimatedRoundedButton;
+  exports.BorderBottom = BorderBottom;
+  exports.BorderBox = BorderBox;
+  exports.BorderTop = BorderTop;
   exports.BottomNavBar = BottomNavBar;
   exports.Box = Box;
   exports.Center = Center;
@@ -54086,6 +54190,7 @@
   exports.H5 = H5Text;
   exports.Header = Header;
   exports.Icon = Icon;
+  exports.ImageWrapper = ImageWrapper;
   exports.Input = Input$1;
   exports.InputNormal = Input;
   exports.InputOtp = InputOtp;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@servesall/atoms",
-  "version": "1.1.16",
+  "version": "1.1.19",
   "description": "Atoms for react-native",
   "main": "dist/bundle.cjs.js",
   "module": "dist/bundle.esm.js",
@@ -23,7 +23,9 @@
     "react-native-reanimated": "*"
   },
   "dependencies": {
-    "react-native-status-bar-height": "^2.6.0"
+    "@gorhom/bottom-sheet": "^5.0.5",
+    "react-native-status-bar-height": "^2.6.0",
+    "styled-components": "^6.1.13"
   },
   "devDependencies": {
     "@babel/cli": "^7.17.10",
@@ -32,11 +34,10 @@
     "@babel/preset-react": "^7.16.7",
     "@babel/runtime": "^7.17.9",
     "@rollup/plugin-babel": "^5.3.1",
-    "@rollup/plugin-commonjs": "^22.0.0",
     "@rollup/plugin-image": "^2.1.1",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
-    "rollup": "^2.72.1",
+    "rollup": "^2.79.1",
     "rollup-plugin-node-polyfills": "^0.2.1"
   },
   "author": "",

package/src/Buttons/RoundButton/RoundButton.style.js

@@ -3,7 +3,17 @@ import styled from "styled-components/native";
 export const ButtonWrapper = styled.View``;
 
 export const ButtonStyle = styled.Pressable`
-  min-height: ${(props) => (props.size === "big" ? "70px" : "56px")};
+  min-height: ${(props) => {
+    if (props.size === "big") {
+      return "70px";
+    } else if (props.size === "small") {
+      return "56px";
+    } else if (props.size === "xsmall") {
+      return "40px";
+    } else {
+      return "70px";
+    }
+  }};
   border-radius: 50px;
   background-color: ${(props) => props.color};
   opacity: ${(props) => (props.active ? 1 : 0.7)};

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

@@ -3,7 +3,17 @@ import styled from "styled-components/native";
 export const ButtonWrapper = styled.View``;
 
 export const ButtonStyle = styled.Pressable`
-  min-height: ${(props) => (props.size === "big" ? "60px" : "54px")};
+  min-height: ${(props) => {
+    if (props.size === "big") {
+      return "60px";
+    } else if (props.size === "small") {
+      return "54px";
+    } else if (props.size === "xsmall") {
+      return "44px";
+    } else {
+      return "54px";
+    }
+  }};
   width: 100%;
   border-radius: ${(props) =>
     props.smallBorder