@servesall/atoms 1.0.59 → 1.1.2

package/src/ErrorText/error.json

@@ -0,0 +1 @@
+{"ip":0,"fr":60,"v":"5.1.20","assets":[],"layers":[{"ty":4,"nm":"success","ip":0,"st":0,"ind":1,"hix":1,"ks":{"o":{"a":0,"k":100},"or":{"a":0,"k":[0,0,0]},"a":{"a":0,"k":[75,75,0]},"p":{"s":true,"x":{"a":1,"k":[{"t":0,"s":[76],"e":[76],"i":{"x":[0.515],"y":[0.955]},"o":{"x":[0.455],"y":[0.03]}},{"t":18}]},"y":{"a":1,"k":[{"t":0,"s":[75.915],"e":[75.915],"i":{"x":[0.515],"y":[0.955]},"o":{"x":[0.455],"y":[0.03]}},{"t":18}]}},"rx":{"a":0,"k":0},"ry":{"a":0,"k":0},"rz":{"a":0,"k":0},"s":{"a":1,"k":[{"t":0,"s":[0,0],"e":[100,100],"i":{"x":[0.515,0.515],"y":[0.955,0.955]},"o":{"x":[0.455,0.455],"y":[0.03,0.03]}},{"t":18}]}},"shapes":[{"ty":"gr","nm":"success shape group","it":[{"ty":"rc","s":{"a":0,"k":[69,15]},"r":{"a":0,"k":7},"p":{"a":0,"k":[74.5,75.5]}},{"ty":"st","o":{"a":0,"k":0},"w":{"a":0,"k":0},"c":{"a":0,"k":[0,0,0,0]},"lc":3,"lj":1,"ml":1},{"ty":"fl","o":{"a":0,"k":100},"r":1,"c":{"a":0,"k":[1,1,1,1]}},{"ty":"tr","o":{"a":0,"k":100},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,-100]},"p":{"a":0,"k":[180.566,74.793]},"r":{"a":0,"k":225.0005261478743}}]},{"ty":"gr","nm":"success shape group","it":[{"ty":"rc","s":{"a":0,"k":[69,15]},"r":{"a":0,"k":7},"p":{"a":0,"k":[74.5,75.5]}},{"ty":"st","o":{"a":0,"k":0},"w":{"a":0,"k":0},"c":{"a":0,"k":[0,0,0,0]},"lc":3,"lj":1,"ml":1},{"ty":"fl","o":{"a":0,"k":100},"r":1,"c":{"a":0,"k":[1,1,1,1]}},{"ty":"tr","o":{"a":0,"k":100},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"p":{"a":0,"k":[-31.566,74.793]},"r":{"a":0,"k":315.0121957629266}}]},{"ty":"gr","nm":"success shape group","it":[{"ty":"el","p":{"a":0,"k":[74,75]},"s":{"a":0,"k":[150,150]}},{"ty":"st","o":{"a":0,"k":0},"w":{"a":0,"k":0},"c":{"a":0,"k":[0,0,0,0]},"lc":3,"lj":1,"ml":1},{"ty":"fl","o":{"a":0,"k":100},"r":1,"c":{"a":0,"k":[1,0.4627450980392157,0.4588235294117647,1]}},{"ty":"tr","o":{"a":0,"k":100},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0}}]}],"op":18}],"op":18,"w":152,"h":153}

package/src/ErrorText/index.js

@@ -0,0 +1,25 @@
+import React from "react";
+import { Wrapper, ErrorWrapper } from "./ErrorText.style";
+import LottieView from "lottie-react-native";
+import error from "./error.json";
+
+const ErrorText = ({ children }) => {
+  return (
+    <Wrapper>
+      <ErrorWrapper>
+        <LottieView
+          style={{
+            height: 30,
+            width: 30,
+          }}
+          autoPlay={true}
+          loop={false}
+          source={error}
+        />
+      </ErrorWrapper>
+      {children}
+    </Wrapper>
+  );
+};
+
+export default ErrorText;

package/src/Icons/Assets/back_fat.json

@@ -0,0 +1 @@
+{"ip":0,"fr":60,"v":"5.1.20","assets":[],"layers":[{"ty":4,"nm":"back_fat","ip":0,"st":0,"ind":1,"hix":1,"ks":{"o":{"a":0,"k":100},"or":{"a":0,"k":[0,0,0]},"a":{"a":0,"k":[235,192.5,0]},"p":{"s":true,"x":{"a":0,"k":218.551},"y":{"a":0,"k":200}},"rx":{"a":0,"k":0},"ry":{"a":0,"k":0},"rz":{"a":0,"k":0},"s":{"a":0,"k":[89.4,89.4]}},"shapes":[{"ty":"gr","nm":"back_fat shape group","it":[{"ty":"sh","ks":{"a":0,"k":{"c":true,"v":[[426.666667,149.333333],[145.664,149.333333],[222.165333,72.832],[221.645593,13.0210741],[161.834667,12.5013333],[12.5013333,161.834667],[12.5013333,222.165333],[161.834667,371.498667],[203.328312,383.133745],[233.800412,352.661646],[222.165333,311.168],[145.664,234.666667],[426.666667,234.666667],[469.333333,192]],"i":[[23.564148999999986,0],[0,0],[0,0],[16.457975000000005,16.4579754],[16.741499000000005,-16.16948091],[0,0],[-16.656296,-16.661327],[0,0],[-14.91752200000002,3.904659000000038],[-3.904658999999981,14.917521999999963],[11.091480999999987,10.712511000000006],[0,0],[0,0],[0,23.564148999999986]],"o":[[0,0],[0,0],[16.16948099999999,-16.741499199999993],[-16.457976000000002,-16.45797539],[0,0],[-16.656296,16.661327],[0,0],[10.712510000000009,11.091480999999987],[14.917522999999989,-3.9046579999999835],[3.9046590000000094,-14.917523000000017],[0,0],[0,0],[23.564148999999986,0],[0,-23.564148999999986]]}}},{"ty":"st","o":{"a":0,"k":0},"w":{"a":0,"k":0},"c":{"a":0,"k":[0,0,0,0]},"lc":3,"lj":1,"ml":1},{"ty":"fl","o":{"a":0,"k":100},"r":1,"c":{"a":0,"k":[0,0,0,1]}},{"ty":"tr","o":{"a":0,"k":100},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"p":{"a":0,"k":[0.333,0]},"r":{"a":0,"k":0}}]}],"op":1}],"op":1,"w":438,"h":400}

package/src/Icons/Assets/big_calendar.json

@@ -0,0 +1 @@
+{"ip":0,"fr":60,"v":"5.1.20","assets":[],"layers":[{"ty":4,"nm":"big_calendar","ip":0,"st":0,"ind":1,"hix":1,"ks":{"o":{"a":0,"k":100},"or":{"a":0,"k":[0,0,0]},"a":{"a":0,"k":[24,24,0]},"p":{"s":true,"x":{"a":0,"k":21.550500000000003},"y":{"a":0,"k":21.40500000000001}},"rx":{"a":0,"k":0},"ry":{"a":0,"k":0},"rz":{"a":0,"k":0},"s":{"a":0,"k":[78.9,78.9]}},"shapes":[{"ty":"gr","nm":"big_calendar shape group","it":[{"ty":"sh","ks":{"a":0,"k":{"c":false,"v":[[30.0003213,6.00160764],[35.2497591,6.00160764],[42,12.7525738],[42,35.2490354],[35.2497591,42],[6.75024041,42],[0,35.2490354],[0,12.7525738],[6.75024041,6.00160764]],"i":[[0,0],[0,0],[0,-3.7287826200000005],[0,0],[3.7283828999999997,0],[0,0],[0,3.7287827000000036],[0,0],[-3.72838296,0]],"o":[[0,0],[3.7283828999999997,0],[0,0],[0,3.7287827000000036],[0,0],[-3.72838296,0],[0,0],[0,-3.7287826200000005],[0,0]]}}},{"ty":"sh","ks":{"a":0,"k":{"c":false,"v":[[11.9996787,6.00160764],[23.9993575,6.00160764]],"i":[[0,0],[0,0]],"o":[[0,0],[0,0]]}}},{"ty":"sh","ks":{"a":0,"k":{"c":false,"v":[[11.9996787,11.998716],[11.9996787,0]],"i":[[0,0],[0,0]],"o":[[0,0],[0,0]]}}},{"ty":"sh","ks":{"a":0,"k":{"c":false,"v":[[30.0003213,11.998716],[30.0003213,0]],"i":[[0,0],[0,0]],"o":[[0,0],[0,0]]}}},{"ty":"st","o":{"a":0,"k":100},"c":{"a":0,"k":[0,0,0,1]},"lc":2,"lj":2,"ml":1,"w":{"a":0,"k":5},"d":[{"n":"d","v":{"a":0,"k":0},"nm":"0"},{"n":"g","v":{"a":0,"k":0},"nm":"1"}]},{"ty":"fl","o":{"a":0,"k":0},"c":{"a":0,"k":[0,0,0,0]},"r":1},{"ty":"tr","o":{"a":0,"k":100},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"p":{"a":0,"k":[3,3]},"r":{"a":0,"k":0}}]}],"op":1}],"op":1,"w":44,"h":43}

package/src/Icons/Assets/big_close.json

@@ -0,0 +1 @@
+{"ip":0,"fr":60,"v":"5.1.20","assets":[],"layers":[{"ty":4,"nm":"big_close","ip":0,"st":0,"ind":1,"hix":1,"ks":{"o":{"a":0,"k":100},"or":{"a":0,"k":[0,0,0]},"a":{"a":0,"k":[21.5,21.5,0]},"p":{"s":true,"x":{"a":0,"k":23.867499999999996},"y":{"a":0,"k":23.472}},"rx":{"a":0,"k":0},"ry":{"a":0,"k":0},"rz":{"a":0,"k":0},"s":{"a":0,"k":[100,100,100]}},"shapes":[{"ty":"gr","nm":"big_close shape group","it":[{"ty":"sh","ks":{"a":0,"k":{"c":true,"v":[[14.5619128,2.52534118],[2.83295303,2.52534118],[2.83295303,14.254301],[9.67484616,21.0961941],[2.83295303,27.9380872],[2.83295303,39.6670469],[14.5619128,39.6670469],[21.4038059,32.8251538],[28.245699,39.6670469],[39.9746588,39.6670469],[39.9746588,27.9380872],[33.1347205,21.0942393],[39.9746588,14.254301],[39.9746588,2.52534118],[28.245699,2.52534118],[21.4038059,9.36723432]],"i":[[0,0],[3.2388627800000003,-3.238862807],[-3.2388628120000003,-3.238862899999999],[0,0],[0,0],[-3.2388628120000003,-3.2388627999999997],[-3.2388627999999997,3.238862900000001],[0,0],[0,0],[-3.238862900000001,3.238862900000001],[3.2388627999999997,3.2388628000000033],[0,0],[0,0],[3.2388627999999997,3.23886278],[3.238862900000001,-3.238862807],[0,0]],"o":[[-3.2388627999999997,-3.238862807],[-3.2388628120000003,3.23886278],[0,0],[0,0],[-3.2388628120000003,3.2388628000000033],[3.2388627800000003,3.238862900000001],[0,0],[0,0],[3.238862900000001,3.238862900000001],[3.2388627999999997,-3.2388627999999997],[0,0],[0,0],[3.2388627999999997,-3.238862899999999],[-3.238862900000001,-3.238862807],[0,0],[0,0]]}}},{"ty":"st","o":{"a":0,"k":0},"w":{"a":0,"k":0},"c":{"a":0,"k":[0,0,0,0]},"lc":3,"lj":1,"ml":1},{"ty":"fl","o":{"a":0,"k":100},"r":2,"c":{"a":0,"k":[0,0,0,1]}},{"ty":"tr","o":{"a":0,"k":100},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0}}]}],"op":1}],"op":1,"w":48,"h":47}

package/src/Icons/Assets/big_good.json

@@ -0,0 +1 @@
+{"ip":0,"fr":60,"v":"5.1.20","assets":[],"layers":[{"ty":4,"nm":"big_good","ip":0,"st":0,"ind":1,"hix":1,"ks":{"o":{"a":0,"k":100},"or":{"a":0,"k":[0,0,0]},"a":{"a":0,"k":[33.5,29,0]},"p":{"s":true,"x":{"a":0,"k":23.867499879595638},"y":{"a":0,"k":21.201}},"rx":{"a":0,"k":0},"ry":{"a":0,"k":0},"rz":{"a":0,"k":0},"s":{"a":0,"k":[67,67]}},"shapes":[{"ty":"gr","nm":"big_good shape group","it":[{"ty":"sh","ks":{"a":0,"k":{"c":true,"v":[[63.4597156,2.57146671],[64.6922839,16.6597872],[33.195691,54.195965],[27.3996564,57.5930589],[17.2316131,54.3381202],[2.44749806,36.719098],[3.68006639,22.6307774],[17.7683869,23.8633458],[25.1537097,32.6646783],[49.371395,3.80403505]],"i":[[-4.2307467000000045,-3.55001794],[3.5500179000000003,-4.2307466],[0,0],[2.188362299999998,-0.4139472000000026],[2.559617799999998,3.0504336999999992],[0,0],[-4.230746635,3.5500180000000015],[-3.5500179000000003,-4.230746700000001],[0,0],[0,0]],"o":[[4.230746599999996,3.55001794],[0,0],[-1.5432716999999982,1.8391994999999994],[-3.6152648999999997,0.9333999999999989],[0,0],[-3.55001794,-4.2307467000000045],[4.23074664,-3.5500179000000003],[0,0],[0,0],[3.5500180000000015,-4.23074664]]}}},{"ty":"st","o":{"a":0,"k":0},"w":{"a":0,"k":0},"c":{"a":0,"k":[0,0,0,0]},"lc":3,"lj":1,"ml":1},{"ty":"fl","o":{"a":0,"k":100},"r":1,"c":{"a":0,"k":[0,0,0,1]}},{"ty":"tr","o":{"a":0,"k":100},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"p":{"a":0,"k":[-0.02,-0.144]},"r":{"a":0,"k":0}}]}],"op":1}],"op":1,"w":48,"h":43}

package/src/Icons/Assets/big_pax.json

@@ -0,0 +1 @@
+{"ip":0,"fr":60,"v":"5.1.20","assets":[],"layers":[{"ty":4,"nm":"big_pax","ip":0,"st":0,"ind":1,"hix":1,"ks":{"o":{"a":0,"k":100},"or":{"a":0,"k":[0,0,0]},"a":{"a":0,"k":[20.5,23.5,0]},"p":{"s":true,"x":{"a":0,"k":20.267499999999995},"y":{"a":0,"k":21.405000000000005}},"rx":{"a":0,"k":0},"ry":{"a":0,"k":0},"rz":{"a":0,"k":0},"s":{"a":0,"k":[85.7,85.7]}},"shapes":[{"ty":"gr","nm":"big_pax shape group","it":[{"ty":"sh","ks":{"a":0,"k":{"c":true,"v":[[32.2803658,13.7471471],[24.5022957,6],[16.7242255,13.7471471],[24.5022957,21.4942943]],"i":[[0,4.278631000000001],[4.2957091999999975,0],[0,-4.278630909999999],[-4.295709300000002,0]],"o":[[0,-4.278630909999999],[-4.295709300000002,0],[0,4.278631000000001],[4.2957091999999975,0]]}}},{"ty":"sh","ks":{"a":0,"k":{"c":false,"v":[[7,47],[7,35.2158662],[12.2501312,29.9866078],[36.7498688,29.9866078],[42,35.2158662],[42,47]],"i":[[0,0],[0,0],[-2.9006975500000003,0],[0,0],[0,-2.889165300000002],[0,0]],"o":[[0,0],[0,-2.889165300000002],[0,0],[2.9006974999999997,0],[0,0],[0,0]]}}},{"ty":"st","o":{"a":0,"k":100},"c":{"a":0,"k":[0,0,0,1]},"lc":2,"lj":2,"ml":1,"w":{"a":0,"k":5},"d":[{"n":"d","v":{"a":0,"k":0},"nm":"0"},{"n":"g","v":{"a":0,"k":0},"nm":"1"}]},{"ty":"fl","o":{"a":0,"k":0},"c":{"a":0,"k":[0,0,0,0]},"r":1},{"ty":"tr","o":{"a":0,"k":100},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"p":{"a":0,"k":[-4,-3]},"r":{"a":0,"k":0}}]}],"op":1}],"op":1,"w":41,"h":43}

package/src/Icons/Assets/big_time.json

@@ -0,0 +1 @@
+{"ip":0,"fr":60,"v":"5.1.20","assets":[],"layers":[{"ty":4,"nm":"big_time","ip":0,"st":0,"ind":1,"hix":1,"ks":{"o":{"a":0,"k":100},"or":{"a":0,"k":[0,0,0]},"a":{"a":0,"k":[23,23,0]},"p":{"s":true,"x":{"a":0,"k":21.5505},"y":{"a":0,"k":21.405}},"rx":{"a":0,"k":0},"ry":{"a":0,"k":0},"rz":{"a":0,"k":0},"s":{"a":0,"k":[85.39999999999999,85.39999999999999]}},"shapes":[{"ty":"gr","nm":"big_time shape group","it":[{"ty":"sh","ks":{"a":0,"k":{"c":true,"v":[[20.876201,1.49620657],[20.9420881,1.55132752],[20.9420881,1.55132752],[21.3044901,5.62463843],[13.6057757,15.1235423],[12.3048932,16.014121],[10.7141384,16.4705272],[10.6269448,16.4675238],[3.53391155,16.1130771],[0.689086312,13.0652812],[3.55665167,10.3042937],[3.6438452,10.3072971],[9.92753941,10.6212134],[16.9936109,1.90262316]],"i":[[-1.184376499999999,-0.959918826],[0,0],[0,0],[0.9991663000000024,-1.2328011600000002],[0,0],[0.4943180999999992,-0.15813429999999862],[0.5864805999999998,0.011105100000001755],[0.02904730000000022,0.0014515000000017153],[0,0],[-0.03062906799999998,1.6175723000000009],[-1.55428196,-0.029430700000000698],[-0.02904725000000008,-0.0014515999999993312],[0,0],[0,0]],"o":[[0,0],[0,0],[1.2011140000000005,1.03704244],[0,0],[-0.3511899000000014,0.4333083999999996],[-0.45629710000000046,0.29842550000000045],[-0.029078300000000112,-0.0005506000000004008],[0,0],[-1.61584602,-0.08074570000000136],[0.029430652999999918,-1.5542818999999994],[0.029078280000000234,0.0005505999999986244],[0,0],[0,0],[0.9599188000000005,-1.18437651]]}}},{"ty":"st","o":{"a":0,"k":0},"w":{"a":0,"k":0},"c":{"a":0,"k":[0,0,0,0]},"lc":3,"lj":1,"ml":1},{"ty":"fl","o":{"a":0,"k":100},"r":1,"c":{"a":0,"k":[0,0,0,1]}},{"ty":"tr","o":{"a":0,"k":100},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[-100,100]},"p":{"a":0,"k":[40.237,20.812]},"r":{"a":0,"k":37.98710181717358}}]},{"ty":"gr","nm":"big_time shape group","it":[{"ty":"sh","ks":{"a":0,"k":{"c":true,"v":[[45.3359375,25.3346558],[25.3359375,5.33465576],[5.3359375,25.3346558],[25.3359375,45.3346558]],"i":[[0,11.045692299999999],[11.045696499999998,0],[0,-11.0456959],[-11.0456942,0]],"o":[[0,-11.0456959],[-11.0456942,0],[0,11.045692299999999],[11.045696499999998,0]]}}},{"ty":"st","o":{"a":0,"k":100},"c":{"a":0,"k":[0,0,0,1]},"lc":2,"lj":2,"ml":1,"w":{"a":0,"k":5},"d":[{"n":"d","v":{"a":0,"k":0},"nm":"0"},{"n":"g","v":{"a":0,"k":0},"nm":"1"}]},{"ty":"fl","o":{"a":0,"k":0},"c":{"a":0,"k":[0,0,0,0]},"r":1},{"ty":"tr","o":{"a":0,"k":100},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"p":{"a":0,"k":[-2,-2]},"r":{"a":0,"k":0}}]},{"ty":"gr","nm":"big_time shape group","it":[{"ty":"sh","ks":{"a":0,"k":{"c":true,"v":[[0,0],[32,0],[32,32],[0,32]],"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]]}}},{"ty":"st","o":{"a":0,"k":0},"w":{"a":0,"k":0},"c":{"a":0,"k":[0,0,0,0]},"lc":3,"lj":1,"ml":1},{"ty":"fl","o":{"a":0,"k":0},"c":{"a":0,"k":[0,0,0,0]},"r":1},{"ty":"tr","o":{"a":0,"k":100},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"p":{"a":0,"k":[-2,-2]},"r":{"a":0,"k":0}}]}],"op":1}],"op":1,"w":44,"h":43}

package/src/Icons/Assets/index.js

@@ -16,6 +16,7 @@ import home from "./home.json";
 import search from "./search.json";
 import account from "./account.json";
 import back from "./back.json";
+import back_fat from "./back_fat.json";
 import merchant_activity from "./merchant_activity.json";
 import merchant_date from "./merchant_date.json";
 import merchant_time from "./merchant_time.json";
@@ -74,6 +75,11 @@ import plus from "./plus.json";
 import minus from "./minus.json";
 import visible from "./visible.json";
 import nonVisible from "./non-visible.json";
+import big_close from "./big_close.json";
+import big_good from "./big_good.json";
+import big_time from "./big_time.json";
+import big_calendar from "./big_calendar.json";
+import big_pax from "./big_pax.json";
 
 const allCategories = {
   restaurants,
@@ -95,6 +101,7 @@ const allCategories = {
   search,
   account,
   back,
+  back_fat,
   merchant_activity,
   merchant_date,
   merchant_time,
@@ -151,6 +158,11 @@ const allCategories = {
   minus,
   visible,
   nonVisible,
+  big_close,
+  big_good,
+  big_time,
+  big_calendar,
+  big_pax,
 };
 
 export default allCategories;

package/src/Inputs/Animated/index.js

@@ -13,6 +13,7 @@ const Input = ({
   borderColorError,
   textChange = () => {},
   value,
+  defaultValue,
   multiline = false,
   numberOfLines = 1,
   maxLength = 1000,
@@ -24,7 +25,7 @@ const Input = ({
   error,
 }) => {
   const [isFocused, setIsFocused] = useState(false);
-  const [textValue, setTextValue] = useState(value);
+  const [textValue, setTextValue] = useState(value || defaultValue);
   const inputRef = useRef();
 
   useEffect(() => {
@@ -58,6 +59,7 @@ const Input = ({
           onFocus={() => setIsFocused(true)}
           onBlur={() => setIsFocused(false)}
           onChangeText={(text) => setTextValue(text)}
+          defaultValue={defaultValue}
           value={value}
           multiline={multiline}
           numberOfLines={numberOfLines}

package/src/Inputs/InputNormal/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/InputNormal/LineAnimation/LineAnimation.style.js

@@ -0,0 +1,16 @@
+import styled from 'styled-components/native';
+
+export const BorderIdle = styled.View`
+  height: 4px;
+  background-color: ${(props) => props.color};
+  flex: 1;
+  position: absolute;
+  width: 100%;
+  z-index: 10;
+`;
+
+export const BorderActive = styled.View`
+  height: 4px;
+  background-color: ${(props) => props.color};
+  z-index: 11;
+`;

package/src/Inputs/InputNormal/LineAnimation/index.js

@@ -0,0 +1,48 @@
+import React from "react";
+import { BorderIdle, BorderActive } from "./LineAnimation.style";
+import { Row } from "../../../Layout";
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+
+const Line = ({
+  active,
+  borderColorIdle,
+  borderColorActive,
+  borderColorError,
+  hasError,
+}) => {
+  const widthActive = useSharedValue(0);
+
+  const animatedStyleWidthActive = useAnimatedStyle(() => {
+    return active
+      ? {
+          width: withTiming(widthActive.value, {
+            duration: 350,
+          }),
+        }
+      : {
+          width: withTiming(0, {
+            duration: 350,
+          }),
+        };
+  });
+
+  return (
+    <Row>
+      <BorderIdle
+        color={!hasError ? borderColorIdle : borderColorError}
+        onLayout={(e) => (widthActive.value = e.nativeEvent.layout.width)}
+      />
+      <Animated.View style={[{ zIndex: 11 }, animatedStyleWidthActive]}>
+        <BorderActive
+          color={!hasError ? borderColorActive : borderColorError}
+        />
+      </Animated.View>
+    </Row>
+  );
+};
+
+export default Line;

package/src/Inputs/InputNormal/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;

package/src/Inputs/InputNormal/index.js

@@ -0,0 +1,102 @@
+import React, { useEffect, useState, useRef } from "react";
+import { H4 } from "../../Text";
+import { MarginHorizontal } from "../../Layout";
+import { KeyboardAvoidingView, Platform } from "react-native";
+import { InputWrapper, InputElement, BorderWrapper } from "./Animated.style";
+import Placeholder from "./Placeholder";
+
+const Input = ({
+  children,
+  style,
+  borderColorIdle,
+  borderColorActive,
+  borderColorError,
+  textChange = () => {},
+  onPress = () => {},
+  value,
+  defaultValue,
+  multiline = false,
+  numberOfLines = 1,
+  maxLength = 1000,
+  autoFocus = false,
+  keyboardType,
+  editable = true,
+  keyboardVerticalOffset = 0,
+  hasError = false,
+  error,
+}) => {
+  const [isFocused, setIsFocused] = useState(false);
+  const [textValue, setTextValue] = useState(value || defaultValue);
+  const inputRef = useRef();
+
+  useEffect(() => {
+    textChange(textValue);
+  }, [textValue]);
+
+  useEffect(() => {
+    autoFocus && inputRef.current?.focus();
+  }, [autoFocus]);
+
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === "ios" ? "padding" : "height"}
+      keyboardVerticalOffset={keyboardVerticalOffset}
+    >
+      <InputWrapper
+        onPress={() => {
+          onPress();
+          editable && setIsFocused(true);
+          editable && inputRef.current?.focus();
+        }}
+      >
+        <BorderWrapper
+          active={isFocused}
+          color={
+            !hasError
+              ? isFocused
+                ? borderColorActive
+                : borderColorIdle
+              : borderColorError
+          }
+        >
+          <Placeholder
+            active={
+              isFocused ||
+              (textValue && textValue.length > 0) ||
+              (value && value.length > 0)
+            }
+          >
+            <MarginHorizontal>
+              {!hasError ? (
+                children
+              ) : (
+                <H4 color={borderColorError}>{error || hasError}</H4>
+              )}
+            </MarginHorizontal>
+          </Placeholder>
+
+          <MarginHorizontal>
+            <InputElement
+              ref={inputRef}
+              onFocus={() => setIsFocused(true)}
+              onBlur={() => setIsFocused(false)}
+              onChangeText={(text) => setTextValue(text)}
+              defaultValue={defaultValue}
+              value={value}
+              multiline={multiline}
+              numberOfLines={numberOfLines}
+              maxLength={maxLength}
+              autoFocus={autoFocus}
+              keyboardType={keyboardType}
+              editable={editable}
+              active={isFocused}
+              style={style}
+            />
+          </MarginHorizontal>
+        </BorderWrapper>
+      </InputWrapper>
+    </KeyboardAvoidingView>
+  );
+};
+
+export default Input;

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

@@ -0,0 +1,200 @@
+import React, { useMemo, useCallback, useState, useEffect } from "react";
+import { View, StatusBar } from "react-native";
+import {
+  FullScreen,
+  Center,
+  Loader,
+  Success,
+  Error,
+  Switch,
+  Row,
+  Box,
+  Margin,
+  MarginHorizontal,
+  MarginVertical,
+  Padding,
+  H4,
+  H2,
+  H3,
+  RoundedBtn,
+  ErrorText,
+  MarginRight,
+  MarginBottom,
+  PaddingVertical,
+  PaddingTop,
+  useThemeContext,
+  Input,
+} from "@servesall/atoms";
+import BottomSheet, {
+  BottomSheetScrollView,
+  BottomSheetFooter,
+} from "@gorhom/bottom-sheet";
+import { useNavigation } from "@react-navigation/native";
+import { useSubmitHook } from "@servesall/organisms";
+import {
+  UserRolesQueryProvider,
+  useUserRoles,
+  UPDATE_MERCHANT_USER,
+} from "@servesall/merchantglobalstate";
+import LottieView from "lottie-react-native";
+
+export default function NewUser({ data }) {
+  const { merchant } = data;
+  const [selectedRole, setSelectedRole] = useState(false);
+  const [userPhoneNumber, setUserPhoneNumber] = useState("");
+  const [userPrefix, setUserPrefix] = useState("+356");
+  const theme = useThemeContext();
+  const navigation = useNavigation();
+
+  const { submitForm, loading, success, error, errorText } = useSubmitHook({
+    gql: UPDATE_MERCHANT_USER,
+    formState: { isValid: true, isDirty: true },
+  });
+
+  useEffect(() => {
+    success && setTimeout(() => navigation.goBack(), 1000);
+  }, [success]);
+
+  const submit = () => {};
+
+  // variables
+  const snapPoints = useMemo(() => ["90%"], []);
+
+  // callbacks
+  const handleSheetChanges = useCallback((index) => {
+    if (index === -1) {
+      navigation.goBack();
+    }
+  }, []);
+
+  const renderFooter = useCallback(
+    (props) => (
+      <BottomSheetFooter {...props} bottomInset={0}>
+        <View
+          style={{
+            backgroundColor: theme.color1,
+            borderTopWidth: 2,
+            borderColor: theme.color7,
+          }}
+        >
+          <Margin>
+            <RoundedBtn
+              active={
+                userPrefix !== "" && userPhoneNumber !== "" && selectedRole
+              }
+              size="small"
+              color={theme.color2}
+              onClick={submit}
+            >
+              <Center>
+                <H3 color={theme.color1}>Save</H3>
+              </Center>
+            </RoundedBtn>
+          </Margin>
+        </View>
+      </BottomSheetFooter>
+    ),
+    [selectedRole, userPhoneNumber, userPrefix]
+  );
+
+  return (
+    <View
+      style={{
+        flex: 1,
+        backgroundColor: "rgba(0, 0, 0, 0.4)",
+      }}
+    >
+      <StatusBar barStyle="dark-content" backgroundColor="rgba(0, 0, 0, 0.4)" />
+
+      <BottomSheet
+        index={0}
+        snapPoints={snapPoints}
+        onChange={handleSheetChanges}
+        enablePanDownToClose={true}
+        footerComponent={renderFooter}
+      >
+        <BottomSheetScrollView contentContainerStyle={{ paddingBottom: 100 }}>
+          {loading && (
+            <FullScreen style={{ backgroundColor: "rgba(255, 255, 255, 0.8)" }}>
+              <Center>
+                <Loader color={theme.color2} />
+              </Center>
+            </FullScreen>
+          )}
+
+          {success && (
+            <FullScreen style={{ backgroundColor: "rgba(255, 255, 255, 0.8)" }}>
+              <Center>
+                <Success />
+              </Center>
+            </FullScreen>
+          )}
+
+          {error && (
+            <FullScreen style={{ backgroundColor: "rgba(255, 255, 255, 0.8)" }}>
+              <Center>
+                <Error />
+              </Center>
+            </FullScreen>
+          )}
+          <Box>
+            <View style={{ borderBottomWidth: 2, borderColor: theme.color7 }}>
+              <Margin style={{ alignItems: "center" }}>
+                <LottieView
+                  style={{
+                    width: 80,
+                  }}
+                  autoPlay={true}
+                  loop={true}
+                  source={adduser}
+                />
+                <PaddingTop>
+                  <H3>Add a new user to {merchant.profile.name}</H3>
+                </PaddingTop>
+              </Margin>
+            </View>
+
+            <Margin>
+              {errorText && (
+                <PaddingVertical>
+                  <ErrorText>
+                    <Center>
+                      <Padding>
+                        <H4 color={theme.red}>{errorText}</H4>
+                      </Padding>
+                    </Center>
+                  </ErrorText>
+                </PaddingVertical>
+              )}
+            </Margin>
+
+            <MarginBottom>
+              <Margin>
+                <H3>User phone number</H3>
+              </Margin>
+              <UserPhone
+                theme={theme}
+                setUserPhoneNumber={setUserPhoneNumber}
+                setUserPrefix={setUserPrefix}
+                userPrefix={userPrefix}
+              />
+            </MarginBottom>
+
+            <Margin>
+              <PaddingVertical>
+                <H3>Choose Role</H3>
+              </PaddingVertical>
+              <UserRolesQueryProvider>
+                <Roles
+                  selectedRole={selectedRole}
+                  setSelectedRole={setSelectedRole}
+                  theme={theme}
+                />
+              </UserRolesQueryProvider>
+            </Margin>
+          </Box>
+        </BottomSheetScrollView>
+      </BottomSheet>
+    </View>
+  );
+}