@shoutem/ui 4.9.1 → 5.0.1-rc.0

package/assets/animations/loadingDots.json

@@ -0,0 +1 @@
+{"v":"5.8.1","fr":30,"ip":0,"op":46,"w":144,"h":144,"nm":"Comp 1","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Left","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[30,72,0],"ix":2,"l":2},"a":{"a":0,"k":[30,72,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":4,"s":[100,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":11,"s":[150,150,100]},{"t":18,"s":[100,100,100]}],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-6.627,0],[0,-6.627],[6.627,0],[0,6.627]],"o":[[6.627,0],[0,6.627],[-6.627,0],[0,-6.627]],"v":[[0,-12],[12,0],[0,12],[-12,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.136999990426,0.122000002394,0.125,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[30,72],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":46,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Mid","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[72,72,0],"ix":2,"l":2},"a":{"a":0,"k":[72,72,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":16,"s":[100,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":23,"s":[150,150,100]},{"t":30,"s":[100,100,100]}],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-6.627,0],[0,-6.627],[6.627,0],[0,6.627]],"o":[[6.627,0],[0,6.627],[-6.627,0],[0,-6.627]],"v":[[0,-12],[12,0],[0,12],[-12,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.136999990426,0.122000002394,0.125,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[72,72],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":46,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Right","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[114,72,0],"ix":2,"l":2},"a":{"a":0,"k":[114,72,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":28,"s":[100,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":35,"s":[150,150,100]},{"t":42,"s":[100,100,100]}],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-6.627,0],[0,-6.627],[6.627,0],[0,6.627]],"o":[[6.627,0],[0,6.627],[-6.627,0],[0,-6.627]],"v":[[0,-12],[12,0],[0,12],[-12,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.136999990426,0.122000002394,0.125,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[114,72],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":46,"st":0,"bm":0}],"markers":[]}

package/assets/index.js

@@ -0,0 +1,4 @@
+/* eslint-disable global-require */
+export const animations = {
+  loadingDots: require('./animations/loadingDots.json'),
+};

package/components/Icon/assets/attach-media.svg

@@ -0,0 +1,4 @@
+<svg width="64" height="66" viewBox="0 0 64 66" xmlns="http://www.w3.org/2000/svg">
+<title>attach-media</title>
+<path d="M12.6667 19.4479C12.6667 16.1006 15.3631 13.4053 18.6667 13.4053H45.3334C48.6371 13.4053 51.3334 16.1006 51.3334 19.4479V30.8103C52.7479 31.2069 54.0895 31.7794 55.3334 32.5027V19.4479C55.3334 13.9116 50.8663 9.40527 45.3334 9.40527H18.6667C13.1339 9.40527 8.66675 13.9116 8.66675 19.4479V40.8947V40.8951V46.2568C8.66675 51.7932 13.1339 56.2995 18.6667 56.2995H31.6462C30.9313 55.0551 30.3651 53.7136 29.9718 52.2995H18.6667C15.3631 52.2995 12.6667 49.6041 12.6667 46.2568V41.7202L22.7369 31.5964C23.6569 30.7114 24.5548 30.3755 25.3334 30.3755C26.112 30.3755 27.01 30.7114 27.9299 31.5963L33.0808 36.7746C33.9098 35.7242 34.8568 34.7721 35.9017 33.9387L30.7514 28.7609C30.7423 28.7518 30.7332 28.7428 30.724 28.7339C29.2161 27.2752 27.3597 26.3755 25.3334 26.3755C23.3071 26.3755 21.4507 27.2752 19.9428 28.7339C19.9336 28.7428 19.9245 28.7518 19.9154 28.7609L12.6667 36.0483V19.4479ZM40.0001 20.1288C38.8955 20.1288 38.0001 21.0243 38.0001 22.1288C38.0001 23.2334 38.8955 24.1288 40.0001 24.1288H40.0268C41.1313 24.1288 42.0268 23.2334 42.0268 22.1288C42.0268 21.0243 41.1313 20.1288 40.0268 20.1288H40.0001ZM46.6667 36.5279C40.6016 36.5279 35.6667 41.4738 35.6667 47.5973C35.6667 53.7207 40.6016 58.6666 46.6667 58.6666C52.7319 58.6666 57.6667 53.7207 57.6667 47.5973C57.6667 41.4738 52.7319 36.5279 46.6667 36.5279ZM31.6667 47.5973C31.6667 39.2847 38.3725 32.5279 46.6667 32.5279C54.961 32.5279 61.6667 39.2847 61.6667 47.5973C61.6667 55.9098 54.961 62.6666 46.6667 62.6666C38.3725 62.6666 31.6667 55.9098 31.6667 47.5973ZM48.6667 43.2415C48.6667 42.1369 47.7712 41.2415 46.6667 41.2415C45.5621 41.2415 44.6667 42.1369 44.6667 43.2415V45.5979H42.3333C41.2288 45.5979 40.3333 46.4933 40.3333 47.5979C40.3333 48.7025 41.2288 49.5979 42.3333 49.5979H44.6667V51.9543C44.6667 53.0589 45.5621 53.9543 46.6667 53.9543C47.7712 53.9543 48.6667 53.0589 48.6667 51.9543V49.5979H51C52.1046 49.5979 53 48.7025 53 47.5979C53 46.4933 52.1046 45.5979 51 45.5979H48.6667V43.2415Z"/>
+</svg>

package/components/Icon/assets/camera.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.82322 4.82322C8.87011 4.77634 8.9337 4.75 9 4.75H15C15.0663 4.75 15.1299 4.77634 15.1768 4.82322C15.2237 4.87011 15.25 4.9337 15.25 5C15.25 5.72935 15.5397 6.42882 16.0555 6.94454C16.5712 7.46027 17.2707 7.75 18 7.75H19C19.3315 7.75 19.6495 7.8817 19.8839 8.11612C20.1183 8.35054 20.25 8.66848 20.25 9V18C20.25 18.3315 20.1183 18.6495 19.8839 18.8839C19.6495 19.1183 19.3315 19.25 19 19.25H5C4.66848 19.25 4.35054 19.1183 4.11612 18.8839C3.8817 18.6495 3.75 18.3315 3.75 18V9C3.75 8.66848 3.8817 8.35054 4.11612 8.11612C4.35054 7.8817 4.66848 7.75 5 7.75H6C6.72935 7.75 7.42882 7.46027 7.94454 6.94454C8.46027 6.42882 8.75 5.72935 8.75 5C8.75 4.9337 8.77634 4.87011 8.82322 4.82322ZM3.05546 7.05546C3.57118 6.53973 4.27065 6.25 5 6.25H6C6.33152 6.25 6.64946 6.1183 6.88388 5.88388C7.1183 5.64946 7.25 5.33152 7.25 5C7.25 4.53587 7.43437 4.09075 7.76256 3.76256C8.09075 3.43438 8.53587 3.25 9 3.25H15C15.4641 3.25 15.9092 3.43438 16.2374 3.76256C16.5656 4.09075 16.75 4.53587 16.75 5C16.75 5.33152 16.8817 5.64946 17.1161 5.88388C17.3505 6.1183 17.6685 6.25 18 6.25H19C19.7293 6.25 20.4288 6.53973 20.9445 7.05546C21.4603 7.57118 21.75 8.27065 21.75 9V18C21.75 18.7293 21.4603 19.4288 20.9445 19.9445C20.4288 20.4603 19.7293 20.75 19 20.75H5C4.27065 20.75 3.57118 20.4603 3.05546 19.9445C2.53973 19.4288 2.25 18.7293 2.25 18V9C2.25 8.27065 2.53973 7.57118 3.05546 7.05546ZM9.75 13C9.75 11.7574 10.7574 10.75 12 10.75C13.2426 10.75 14.25 11.7574 14.25 13C14.25 14.2426 13.2426 15.25 12 15.25C10.7574 15.25 9.75 14.2426 9.75 13ZM12 9.25C9.92893 9.25 8.25 10.9289 8.25 13C8.25 15.0711 9.92893 16.75 12 16.75C14.0711 16.75 15.75 15.0711 15.75 13C15.75 10.9289 14.0711 9.25 12 9.25Z" fill="black"/>
+</svg>

package/components/Icon/assets/clock.svg

@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<title>clock</title>
+<path d="M3.75 12C3.75 7.44365 7.44365 3.75 12 3.75C16.5563 3.75 20.25 7.44365 20.25 12C20.25 16.5563 16.5563 20.25 12 20.25C7.44365 20.25 3.75 16.5563 3.75 12ZM12 2.25C6.61522 2.25 2.25 6.61522 2.25 12C2.25 17.3848 6.61522 21.75 12 21.75C17.3848 21.75 21.75 17.3848 21.75 12C21.75 6.61522 17.3848 2.25 12 2.25ZM12.75 7C12.75 6.58579 12.4142 6.25 12 6.25C11.5858 6.25 11.25 6.58579 11.25 7V12C11.25 12.1989 11.329 12.3897 11.4697 12.5303L14.4697 15.5303C14.7626 15.8232 15.2374 15.8232 15.5303 15.5303C15.8232 15.2374 15.8232 14.7626 15.5303 14.4697L12.75 11.6893V7Z"></path>
+</svg>

package/components/Icon/assets/comments.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<title>comments</title>
+<path d="M4.66602 3.83398C4.26819 3.83398 3.88666 3.99202 3.60536 4.27332C3.32405 4.55463 3.16602 4.93616 3.16602 5.33398V9.33398C3.16602 9.73181 3.32405 10.1133 3.60536 10.3946C3.88666 10.6759 4.26819 10.834 4.66602 10.834H5.99935C6.13196 10.834 6.25913 10.8867 6.3529 10.9804L7.99935 12.6269L9.6458 10.9804C9.73956 10.8867 9.86674 10.834 9.99935 10.834H11.3327C11.7305 10.834 12.112 10.6759 12.3933 10.3946C12.6746 10.1133 12.8327 9.73181 12.8327 9.33398V5.33398C12.8327 4.93616 12.6746 4.55463 12.3933 4.27332C12.112 3.99202 11.7305 3.83398 11.3327 3.83398H4.66602ZM2.89825 3.56622C3.36709 3.09738 4.00297 2.83398 4.66602 2.83398H11.3327C11.9957 2.83398 12.6316 3.09738 13.1004 3.56622C13.5693 4.03506 13.8327 4.67094 13.8327 5.33398V9.33398C13.8327 9.99703 13.5693 10.6329 13.1004 11.1018C12.6316 11.5706 11.9957 11.834 11.3327 11.834H10.2065L8.3529 13.6875C8.25913 13.7813 8.13196 13.834 7.99935 13.834C7.86674 13.834 7.73956 13.7813 7.6458 13.6875L5.79224 11.834H4.66602C4.00297 11.834 3.36709 11.5706 2.89825 11.1018C2.42941 10.6329 2.16602 9.99703 2.16602 9.33398V5.33398C2.16602 4.67094 2.42941 4.03506 2.89825 3.56622ZM4.83398 6C4.83398 5.72386 5.05784 5.5 5.33398 5.5H10.6673C10.9435 5.5 11.1673 5.72386 11.1673 6C11.1673 6.27614 10.9435 6.5 10.6673 6.5H5.33398C5.05784 6.5 4.83398 6.27614 4.83398 6ZM5.33398 8.16602C5.05784 8.16602 4.83398 8.38987 4.83398 8.66602C4.83398 8.94216 5.05784 9.16602 5.33398 9.16602H9.33398C9.61013 9.16602 9.83398 8.94216 9.83398 8.66602C9.83398 8.38987 9.61013 8.16602 9.33398 8.16602H5.33398Z" />
+</svg>

package/components/Icon/assets/download.svg

@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<title>download</title>
+<path d="M3.75 12C3.75 7.44365 7.44365 3.75 12 3.75C16.5563 3.75 20.25 7.44365 20.25 12C20.25 16.5563 16.5563 20.25 12 20.25C7.44365 20.25 3.75 16.5563 3.75 12ZM12 2.25C6.61522 2.25 2.25 6.61522 2.25 12C2.25 17.3848 6.61522 21.75 12 21.75C17.3848 21.75 21.75 17.3848 21.75 12C21.75 6.61522 17.3848 2.25 12 2.25ZM8.53033 11.4697C8.23744 11.1768 7.76256 11.1768 7.46967 11.4697C7.17678 11.7626 7.17678 12.2374 7.46967 12.5303L11.4697 16.5303C11.4787 16.5393 11.4878 16.548 11.4971 16.5565C11.5624 16.6155 11.6355 16.6611 11.7129 16.6931C11.7958 16.7275 11.8862 16.7474 11.981 16.7498C11.9873 16.7499 11.9936 16.75 12 16.75C12.1919 16.75 12.3839 16.6768 12.5303 16.5303C12.5306 16.5301 12.5308 16.5299 12.531 16.5296L16.5303 12.5303C16.8232 12.2374 16.8232 11.7626 16.5303 11.4697C16.2374 11.1768 15.7626 11.1768 15.4697 11.4697L12.75 14.1893V8C12.75 7.58579 12.4142 7.25 12 7.25C11.5858 7.25 11.25 7.58579 11.25 8V14.1893L8.53033 11.4697Z"></path>
+</svg>

package/components/Icon/assets/forward-10.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" viewBox="0 0 24 24">
+<title>forward-10</title>
+<path d="M18,13c0,3.31-2.69,6-6,6s-6-2.69-6-6s2.69-6,6-6v4l5-5l-5-5v4c-4.42,0-8,3.58-8,8c0,4.42,3.58,8,8,8s8-3.58,8-8H18z"/><polygon points="10.86,15.94 10.86,11.67 10.77,11.67 9,12.3 9,12.99 10.01,12.68 10.01,15.94"/>
+<path d="M12.25,13.44v0.74c0,1.9,1.31,1.82,1.44,1.82c0.14,0,1.44,0.09,1.44-1.82v-0.74c0-1.9-1.31-1.82-1.44-1.82 C13.55,11.62,12.25,11.53,12.25,13.44z M14.29,13.32v0.97c0,0.77-0.21,1.03-0.59,1.03c-0.38,0-0.6-0.26-0.6-1.03v-0.97 c0-0.75,0.22-1.01,0.59-1.01C14.07,12.3,14.29,12.57,14.29,13.32z"/>
+</svg>

package/components/Icon/assets/forward-30.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" viewBox="0 0 24 24">
+<title>forward-30</title>
+<path d="M18,13c0,3.31-2.69,6-6,6s-6-2.69-6-6s2.69-6,6-6v4l5-5l-5-5v4c-4.42,0-8,3.58-8,8c0,4.42,3.58,8,8,8s8-3.58,8-8H18z"/>
+<path d="M10.06,15.38c-0.29,0-0.62-0.17-0.62-0.54H8.59c0,0.97,0.9,1.23,1.45,1.23c0.87,0,1.51-0.46,1.51-1.25 c0-0.66-0.45-0.9-0.71-1c0.11-0.05,0.65-0.32,0.65-0.92c0-0.21-0.05-1.22-1.44-1.22c-0.62,0-1.4,0.35-1.4,1.16h0.85 c0-0.34,0.31-0.48,0.57-0.48c0.59,0,0.58,0.5,0.58,0.54c0,0.52-0.41,0.59-0.63,0.59H9.56v0.66h0.45c0.65,0,0.7,0.42,0.7,0.64 C10.71,15.11,10.5,15.38,10.06,15.38z"/>
+<path d="M13.85,11.68c-0.14,0-1.44-0.08-1.44,1.82v0.74c0,1.9,1.31,1.82,1.44,1.82c0.14,0,1.44,0.09,1.44-1.82V13.5 C15.3,11.59,13.99,11.68,13.85,11.68z M14.45,14.35c0,0.77-0.21,1.03-0.59,1.03c-0.38,0-0.6-0.26-0.6-1.03v-0.97 c0-0.75,0.22-1.01,0.59-1.01c0.38,0,0.6,0.26,0.6,1.01V14.35z"/>
+</svg>

package/components/Icon/assets/forward-5.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" viewBox="0 0 24 24">
+<title>forward-5</title>
+<path d="M18,13c0,3.31-2.69,6-6,6s-6-2.69-6-6s2.69-6,6-6v4l5-5l-5-5v4c-4.42,0-8,3.58-8,8c0,4.42,3.58,8,8,8c4.42,0,8-3.58,8-8 H18z"/>
+<path d="M12.03,15.38c-0.44,0-0.58-0.31-0.6-0.56h-0.84c0.03,0.85,0.79,1.25,1.44,1.25c0.93,0,1.44-0.63,1.44-1.43 c0-1.33-0.97-1.44-1.3-1.44c-0.2,0-0.43,0.05-0.64,0.16l0.11-0.92h1.7v-0.71h-2.39l-0.25,2.17l0.67,0.17 c0.13-0.13,0.28-0.23,0.57-0.23c0.4,0,0.69,0.23,0.69,0.75C12.62,14.64,12.65,15.38,12.03,15.38z"/>
+</svg>

package/components/Icon/assets/forward.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" viewBox="0 0 24 24">
+<title>forward</title>
+<path d="M18,13c0,3.31-2.69,6-6,6s-6-2.69-6-6s2.69-6,6-6v4l5-5l-5-5v4c-4.42,0-8,3.58-8,8c0,4.42,3.58,8,8,8c4.42,0,8-3.58,8-8 H18z"/>
+</svg>

package/components/Icon/assets/gallery.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.16602 4.66602C3.16602 3.83759 3.83759 3.16602 4.66602 3.16602H11.3327C12.1611 3.16602 12.8327 3.83759 12.8327 4.66602V8.79221L12.3542 8.31373L12.3543 8.31367L12.3473 8.307C11.9701 7.94404 11.5063 7.7207 11.0007 7.7207C10.495 7.7207 10.0312 7.94404 9.65396 8.307L9.6539 8.30693L9.6471 8.31373L9.33366 8.62717L7.68624 6.97975L7.6863 6.97968L7.67937 6.97301C7.30217 6.61005 6.83835 6.38672 6.33268 6.38672C5.82701 6.38672 5.36319 6.61005 4.98599 6.97301L4.98593 6.97295L4.97913 6.97975L3.16602 8.79286V4.66602ZM10.0408 9.33428L11.0196 10.3131C11.2148 10.5083 11.2148 10.8249 11.0196 11.0202C10.8243 11.2155 10.5077 11.2155 10.3125 11.0202L6.98275 7.69048C6.753 7.47063 6.52824 7.38672 6.33268 7.38672C6.13712 7.38672 5.91236 7.47064 5.6826 7.69049L3.16602 10.2071V11.3327C3.16602 12.1611 3.83759 12.8327 4.66602 12.8327H11.3327C12.1611 12.8327 12.8327 12.1611 12.8327 11.3327V10.2064L11.6507 9.02447C11.421 8.80462 11.1962 8.7207 11.0007 8.7207C10.8051 8.7207 10.5803 8.80462 10.3506 9.02447L10.0408 9.33428ZM13.8327 10.0368V11.3327C13.8327 12.7134 12.7134 13.8327 11.3327 13.8327H4.66602C3.2853 13.8327 2.16602 12.7134 2.16602 11.3327V10.0001V9.99988V4.66602C2.16602 3.2853 3.2853 2.16602 4.66602 2.16602H11.3327C12.7134 2.16602 13.8327 3.2853 13.8327 4.66602V9.96445C13.8344 9.98853 13.8344 10.0127 13.8327 10.0368ZM10 4.83398C9.72386 4.83398 9.5 5.05784 9.5 5.33398C9.5 5.61013 9.72386 5.83398 10 5.83398H10.0075C10.2836 5.83398 10.5075 5.61013 10.5075 5.33398C10.5075 5.05784 10.2836 4.83398 10.0075 4.83398H10Z" fill="black"/>
+</svg>

package/components/Icon/assets/garbage-can.svg

@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<title>garbage-can</title>
+<path fill-rule="evenodd" d="M9.82322 3.82322C9.87011 3.77634 9.9337 3.75 10 3.75H14C14.0663 3.75 14.1299 3.77634 14.1768 3.82322C14.2237 3.87011 14.25 3.9337 14.25 4V6.25H9.75V4C9.75 3.9337 9.77634 3.87011 9.82322 3.82322ZM8.25 6.25V4C8.25 3.53587 8.43437 3.09075 8.76256 2.76256C9.09075 2.43437 9.53587 2.25 10 2.25H14C14.4641 2.25 14.9092 2.43437 15.2374 2.76256C15.5656 3.09075 15.75 3.53587 15.75 4V6.25H18.9912H19.0071H20C20.4142 6.25 20.75 6.58579 20.75 7C20.75 7.41421 20.4142 7.75 20 7.75H19.6901L18.7498 19.0337C18.741 19.7508 18.4523 20.4368 17.9445 20.9445C17.4288 21.4603 16.7293 21.75 16 21.75H8C7.27065 21.75 6.57118 21.4603 6.05546 20.9445C5.54767 20.4368 5.25898 19.7508 5.25021 19.0337L4.3099 7.75H4C3.58579 7.75 3.25 7.41421 3.25 7C3.25 6.58579 3.58579 6.25 4 6.25H4.9929H5.00877H8.25ZM15 7.75H9H5.8151L6.74741 18.9377C6.74914 18.9584 6.75 18.9792 6.75 19C6.75 19.3315 6.8817 19.6495 7.11612 19.8839C7.35054 20.1183 7.66848 20.25 8 20.25H16C16.3315 20.25 16.6495 20.1183 16.8839 19.8839C17.1183 19.6495 17.25 19.3315 17.25 19C17.25 18.9792 17.2509 18.9584 17.2526 18.9377L18.1849 7.75H15ZM10 10.25C10.4142 10.25 10.75 10.5858 10.75 11V17C10.75 17.4142 10.4142 17.75 10 17.75C9.58579 17.75 9.25 17.4142 9.25 17V11C9.25 10.5858 9.58579 10.25 10 10.25ZM14.75 11C14.75 10.5858 14.4142 10.25 14 10.25C13.5858 10.25 13.25 10.5858 13.25 11V17C13.25 17.4142 13.5858 17.75 14 17.75C14.4142 17.75 14.75 17.4142 14.75 17V11Z"></path>
+</svg>

package/components/Icon/assets/index.js

@@ -6,21 +6,26 @@ import addToCart from './add-to-cart.svg';
 import addToFavoritesOff from './add-to-favorites-off.svg';
 import addToFavoritesOn from './add-to-favorites-on.svg';
 import address from './address.svg';
+import attachMedia from './attach-media.svg';
 import back from './back.svg';
 import books from './books.svg';
 import call from './call.svg';
 import camSwitch from './cam-switch.svg';
+import camera from './camera.svg';
 import cart from './cart.svg';
 import checkboxOff from './checkbox-off.svg';
 import checkboxOn from './checkbox-on.svg';
 import checkboxRectangleOff from './checkbox-rectangle-off.svg';
 import checkboxRectangleOn from './checkbox-rectangle-on.svg';
 import clearText from './clear-text.svg';
+import clock from './clock.svg';
 import close from './close.svg';
 import comment from './comment.svg';
+import comments from './comments.svg';
 import deals from './deals.svg';
 import directions from './directions.svg';
 import downArrow from './down-arrow.svg';
+import download from './download.svg';
 import dropDown from './drop-down.svg';
 import edit from './edit.svg';
 import email from './email.svg';
@@ -33,7 +38,13 @@ import eyeCrossed from './eye-crossed.svg';
 import facebook from './facebook.svg';
 import facebookLogo from './facebook-logo.svg';
 import folder from './folder.svg';
+import forward5 from './forward-5.svg';
+import forward10 from './forward-10.svg';
+import forward30 from './forward-30.svg';
+import forward from './forward.svg';
 import friends from './friends.svg';
+import gallery from './gallery.svg';
+import garbageCan from './garbage-can.svg';
 import gift from './gift.svg';
 import github from './github.svg';
 import hangUp from './hang-up.svg';
@@ -43,8 +54,10 @@ import instagram from './instagram.svg';
 import laptop from './laptop.svg';
 import leftArrow from './left-arrow.svg';
 import like from './like.svg';
+import likeHeart from './like-heart.svg';
 import link from './link.svg';
 import linkedin from './linkedin.svg';
+import locationPins from './location-pins.svg';
 import lock from './lock.svg';
 import loyaltyCard from './loyalty-card.svg';
 import maps from './maps.svg';
@@ -70,8 +83,13 @@ import radiobuttonOff from './radiobutton-off.svg';
 import radiobuttonOn from './radiobutton-on.svg';
 import receipt from './receipt.svg';
 import refresh from './refresh.svg';
+import replay5 from './replay-5.svg';
+import replay10 from './replay-10.svg';
+import replay30 from './replay-30.svg';
+import replay from './replay.svg';
 import restaurant from './restaurant.svg';
 import restaurantMenu from './restaurant-menu.svg';
+import restore from './restore.svg';
 import rightArrow from './right-arrow.svg';
 import rssFeed from './rss-feed.svg';
 import rsvp from './rsvp.svg';
@@ -79,6 +97,7 @@ import search from './search.svg';
 import settings from './settings.svg';
 import share from './share.svg';
 import shareAndroid from './share-android.svg';
+import sleep from './sleep.svg';
 import sidebar from './sidebar.svg';
 import socialWall from './social-wall.svg';
 import stamp from './stamp.svg';
@@ -106,9 +125,11 @@ export const defaultConfig = [
   { name: 'add-to-favorites-off', icon: addToFavoritesOff },
   { name: 'add-to-favorites-on', icon: addToFavoritesOn },
   { name: 'address', icon: address },
+  { name: 'attach-media', icon: attachMedia },
   { name: 'back', icon: back },
   { name: 'books', icon: books },
   { name: 'call', icon: call },
+  { name: 'camera', icon: camera },
   { name: 'camSwitch', icon: camSwitch },
   { name: 'cart', icon: cart },
   { name: 'checkbox-off', icon: checkboxOff },
@@ -116,11 +137,14 @@ export const defaultConfig = [
   { name: 'checkbox-rectangle-off', icon: checkboxRectangleOff },
   { name: 'checkbox-rectangle-on', icon: checkboxRectangleOn },
   { name: 'clear-text', icon: clearText },
+  { name: 'clock', icon: clock },
   { name: 'close', icon: close },
   { name: 'comment', icon: comment },
+  { name: 'comments', icon: comments },
   { name: 'deals', icon: deals },
   { name: 'directions', icon: directions },
   { name: 'down-arrow', icon: downArrow },
+  { name: 'download', icon: download },
   { name: 'drop-down', icon: dropDown },
   { name: 'edit', icon: edit },
   { name: 'email', icon: email },
@@ -133,7 +157,14 @@ export const defaultConfig = [
   { name: 'facebook', icon: facebook },
   { name: 'facebook-logo', icon: facebookLogo },
   { name: 'folder', icon: folder },
+  { name: 'forward-5', icon: forward5 },
+  { name: 'forward-10', icon: forward10 },
+  { name: 'forward-30', icon: forward30 },
+  { name: 'forward', icon: forward },
+  { name: 'gallery', icon: gallery },
   { name: 'friends', icon: friends },
+  { name: 'gallery', icon: gallery },
+  { name: 'garbage-can', icon: garbageCan },
   { name: 'gift', icon: gift },
   { name: 'github', icon: github },
   { name: 'hang-up', icon: hangUp },
@@ -143,8 +174,10 @@ export const defaultConfig = [
   { name: 'laptop', icon: laptop },
   { name: 'left-arrow', icon: leftArrow },
   { name: 'like', icon: like },
+  { name: 'like-heart', icon: likeHeart },
   { name: 'link', icon: link },
   { name: 'linkedin', icon: linkedin },
+  { name: 'location-pins', icon: locationPins },
   { name: 'lock', icon: lock },
   { name: 'loyalty-card', icon: loyaltyCard },
   { name: 'maps', icon: maps },
@@ -170,8 +203,13 @@ export const defaultConfig = [
   { name: 'radiobutton-on', icon: radiobuttonOn },
   { name: 'receipt', icon: receipt },
   { name: 'refresh', icon: refresh },
+  { name: 'replay-5', icon: replay5 },
+  { name: 'replay-10', icon: replay10 },
+  { name: 'replay-30', icon: replay30 },
+  { name: 'replay', icon: replay },
   { name: 'restaurant', icon: restaurant },
   { name: 'restaurant-menu', icon: restaurantMenu },
+  { name: 'restore', icon: restore },
   { name: 'right-arrow', icon: rightArrow },
   { name: 'rss-feed', icon: rssFeed },
   { name: 'rsvp', icon: rsvp },
@@ -180,6 +218,7 @@ export const defaultConfig = [
   { name: 'share', icon: share },
   { name: 'share-android', icon: shareAndroid },
   { name: 'sidebar', icon: sidebar },
+  { name: 'sleep', icon: sleep },
   { name: 'social-wall', icon: socialWall },
   { name: 'stamp', icon: stamp },
   { name: 'stop', icon: stop },

package/components/Icon/assets/like-heart.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<title>like-heart</title>
+<path d="M13.0001 9.04796L8.00012 14L3.00012 9.04796C2.67032 8.72703 2.41055 8.3413 2.23715 7.91505C2.06375 7.48879 1.98049 7.03126 1.99261 6.57124C2.00473 6.11123 2.11196 5.65871 2.30756 5.24218C2.50315 4.82565 2.78288 4.45412 3.12911 4.15101C3.47534 3.84789 3.88059 3.61975 4.31933 3.48094C4.75806 3.34214 5.22079 3.29568 5.67837 3.34449C6.13594 3.3933 6.57845 3.53633 6.97804 3.76456C7.37762 3.99279 7.72562 4.30129 8.00012 4.67062C8.27581 4.30397 8.62421 3.99817 9.02352 3.77236C9.42283 3.54655 9.86445 3.40559 10.3207 3.3583C10.777 3.31102 11.2382 3.35842 11.6753 3.49755C12.1124 3.63668 12.5161 3.86454 12.8612 4.16686C13.2062 4.46919 13.4851 4.83948 13.6804 5.25455C13.8757 5.66962 13.9833 6.12054 13.9963 6.57909C14.0094 7.03764 13.9276 7.49395 13.7562 7.91946C13.5848 8.34496 13.3274 8.7305 13.0001 9.05196"  stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/components/Icon/assets/location-pins.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 2.25C7.06048 2.25 6.14206 2.52862 5.36089 3.05062C4.57973 3.57262 3.97091 4.31455 3.61144 5.18258C3.25196 6.05062 3.15798 7.00576 3.34138 7.92721C3.52477 8.84866 3.97731 9.69502 4.64175 10.3593L7.46958 13.1881C7.61024 13.3288 7.80104 13.4079 8 13.4079C8.19896 13.4079 8.38977 13.3288 8.53043 13.1881L11.3583 10.3593C12.0227 9.69502 12.4752 8.84866 12.6586 7.92721C12.842 7.00576 12.748 6.05062 12.3886 5.18258C12.0291 4.31455 11.4203 3.57262 10.6391 3.05062C9.85795 2.52862 8.93952 2.25 8 2.25ZM6.1943 4.29779C6.72878 3.94063 7.35717 3.75 8 3.75C8.64283 3.75 9.27123 3.94063 9.80571 4.29779C10.3402 4.65495 10.7567 5.16259 11.0027 5.75651C11.2487 6.35042 11.313 7.00394 11.1875 7.6344C11.062 8.26487 10.7524 8.84396 10.2978 9.29844L10.2976 9.29862L8 11.597L5.70243 9.29862L5.70225 9.29844C5.24763 8.84396 4.938 8.26487 4.81252 7.6344C4.68704 7.00394 4.75134 6.35042 4.9973 5.75651C5.24326 5.16259 5.65982 4.65495 6.1943 4.29779ZM8.75 7C8.75 6.58579 8.41421 6.25 8 6.25C7.58579 6.25 7.25 6.58579 7.25 7V7.01C7.25 7.42421 7.58579 7.76 8 7.76C8.41421 7.76 8.75 7.42421 8.75 7.01V7ZM13.3609 11.0506C14.1421 10.5286 15.0605 10.25 16 10.25C16.9395 10.25 17.8579 10.5286 18.6391 11.0506C19.4203 11.5726 20.0291 12.3146 20.3886 13.1826C20.748 14.0506 20.842 15.0058 20.6586 15.9272C20.4752 16.8486 20.0228 17.6949 19.3584 18.3591L19.3583 18.3592L19.3583 18.3593L16.5304 21.1881C16.3898 21.3288 16.199 21.4079 16 21.4079C15.801 21.4079 15.6102 21.3288 15.4696 21.1881L12.6418 18.3593L12.6416 18.3591C11.9772 17.6949 11.5248 16.8486 11.3414 15.9272C11.158 15.0058 11.252 14.0506 11.6114 13.1826C11.9709 12.3146 12.5797 11.5726 13.3609 11.0506ZM16 11.75C15.3572 11.75 14.7288 11.9406 14.1943 12.2978C13.6598 12.655 13.2433 13.1626 12.9973 13.7565C12.7513 14.3504 12.687 15.0039 12.8125 15.6344C12.938 16.2649 13.2476 16.844 13.7023 17.2984L13.7024 17.2986L16 19.597L18.2976 17.2986L18.2978 17.2984C18.7524 16.844 19.062 16.2649 19.1875 15.6344C19.313 15.0039 19.2487 14.3504 19.0027 13.7565C18.7567 13.1626 18.3402 12.655 17.8057 12.2978C17.2712 11.9406 16.6428 11.75 16 11.75ZM16.75 15C16.75 14.5858 16.4142 14.25 16 14.25C15.5858 14.25 15.25 14.5858 15.25 15V15.01C15.25 15.4242 15.5858 15.76 16 15.76C16.4142 15.76 16.75 15.4242 16.75 15.01V15Z"/>
+</svg>

package/components/Icon/assets/replay-10.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px">
+<title>replay-10</title>
+<path d="M11.99,5V1l-5,5l5,5V7c3.31,0,6,2.69,6,6s-2.69,6-6,6s-6-2.69-6-6h-2c0,4.42,3.58,8,8,8s8-3.58,8-8S16.41,5,11.99,5z"/>
+<path d="M10.89,16h-0.85v-3.26l-1.01,0.31v-0.69l1.77-0.63h0.09V16z"/>
+<path d="M15.17,14.24c0,0.32-0.03,0.6-0.1,0.82s-0.17,0.42-0.29,0.57s-0.28,0.26-0.45,0.33s-0.37,0.1-0.59,0.1 s-0.41-0.03-0.59-0.1s-0.33-0.18-0.46-0.33s-0.23-0.34-0.3-0.57s-0.11-0.5-0.11-0.82V13.5c0-0.32,0.03-0.6,0.1-0.82 s0.17-0.42,0.29-0.57s0.28-0.26,0.45-0.33s0.37-0.1,0.59-0.1s0.41,0.03,0.59,0.1c0.18,0.07,0.33,0.18,0.46,0.33 s0.23,0.34,0.3,0.57s0.11,0.5,0.11,0.82V14.24z M14.32,13.38c0-0.19-0.01-0.35-0.04-0.48s-0.07-0.23-0.12-0.31 s-0.11-0.14-0.19-0.17s-0.16-0.05-0.25-0.05s-0.18,0.02-0.25,0.05s-0.14,0.09-0.19,0.17s-0.09,0.18-0.12,0.31 s-0.04,0.29-0.04,0.48v0.97c0,0.19,0.01,0.35,0.04,0.48s0.07,0.24,0.12,0.32s0.11,0.14,0.19,0.17s0.16,0.05,0.25,0.05 s0.18-0.02,0.25-0.05s0.14-0.09,0.19-0.17s0.09-0.19,0.11-0.32s0.04-0.29,0.04-0.48V13.38z"/></svg>

package/components/Icon/assets/replay-30.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" viewBox="0 0 24 24">
+<title>replay-30</title>
+<path d="M12,5V1L7,6l5,5V7c3.31,0,6,2.69,6,6s-2.69,6-6,6s-6-2.69-6-6H4c0,4.42,3.58,8,8,8s8-3.58,8-8S16.42,5,12,5z"/>
+<path d="M9.56,13.49h0.45c0.21,0,0.37-0.05,0.48-0.16s0.16-0.25,0.16-0.43c0-0.08-0.01-0.15-0.04-0.22s-0.06-0.12-0.11-0.17 s-0.11-0.09-0.18-0.11s-0.16-0.04-0.25-0.04c-0.08,0-0.15,0.01-0.22,0.03s-0.13,0.05-0.18,0.1s-0.09,0.09-0.12,0.15 s-0.05,0.13-0.05,0.2H8.65c0-0.18,0.04-0.34,0.11-0.48s0.17-0.27,0.3-0.37s0.27-0.18,0.44-0.23s0.35-0.08,0.54-0.08 c0.21,0,0.41,0.03,0.59,0.08s0.33,0.13,0.46,0.23s0.23,0.23,0.3,0.38s0.11,0.33,0.11,0.53c0,0.09-0.01,0.18-0.04,0.27 s-0.07,0.17-0.13,0.25s-0.12,0.15-0.2,0.22s-0.17,0.12-0.28,0.17c0.24,0.09,0.42,0.21,0.54,0.39s0.18,0.38,0.18,0.61 c0,0.2-0.04,0.38-0.12,0.53s-0.18,0.29-0.32,0.39s-0.29,0.19-0.48,0.24s-0.38,0.08-0.6,0.08c-0.18,0-0.36-0.02-0.53-0.07 s-0.33-0.12-0.46-0.23s-0.25-0.23-0.33-0.38s-0.12-0.34-0.12-0.55h0.85c0,0.08,0.02,0.15,0.05,0.22s0.07,0.12,0.13,0.17 s0.12,0.09,0.2,0.11s0.16,0.04,0.25,0.04c0.1,0,0.19-0.01,0.27-0.04s0.15-0.07,0.2-0.12s0.1-0.11,0.13-0.18s0.04-0.15,0.04-0.24 c0-0.11-0.02-0.21-0.05-0.29s-0.08-0.15-0.14-0.2s-0.13-0.09-0.22-0.11s-0.18-0.04-0.29-0.04H9.56V13.49z"/>
+<path d="M15.3,14.24c0,0.32-0.03,0.6-0.1,0.82s-0.17,0.42-0.29,0.57s-0.28,0.26-0.45,0.33s-0.37,0.1-0.59,0.1 s-0.41-0.03-0.59-0.1s-0.33-0.18-0.46-0.33s-0.23-0.34-0.3-0.57s-0.11-0.5-0.11-0.82V13.5c0-0.32,0.03-0.6,0.1-0.82 s0.17-0.42,0.29-0.57s0.28-0.26,0.45-0.33s0.37-0.1,0.59-0.1s0.41,0.03,0.59,0.1s0.33,0.18,0.46,0.33s0.23,0.34,0.3,0.57 s0.11,0.5,0.11,0.82V14.24z M14.45,13.38c0-0.19-0.01-0.35-0.04-0.48c-0.03-0.13-0.07-0.23-0.12-0.31s-0.11-0.14-0.19-0.17 s-0.16-0.05-0.25-0.05s-0.18,0.02-0.25,0.05s-0.14,0.09-0.19,0.17s-0.09,0.18-0.12,0.31s-0.04,0.29-0.04,0.48v0.97 c0,0.19,0.01,0.35,0.04,0.48s0.07,0.24,0.12,0.32s0.11,0.14,0.19,0.17s0.16,0.05,0.25,0.05s0.18-0.02,0.25-0.05 s0.14-0.09,0.19-0.17s0.09-0.19,0.11-0.32c0.03-0.13,0.04-0.29,0.04-0.48V13.38z"/>
+</svg>

package/components/Icon/assets/replay-5.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" viewBox="0 0 24 24">
+<title>replay-5</title>
+<path d="M12,5V1L7,6l5,5V7c3.31,0,6,2.69,6,6s-2.69,6-6,6s-6-2.69-6-6H4c0,4.42,3.58,8,8,8s8-3.58,8-8S16.42,5,12,5z"/>
+<path d="M10.69,13.9l0.25-2.17h2.39v0.71h-1.7l-0.11,0.92c0.03-0.02,0.07-0.03,0.11-0.05s0.09-0.04,0.15-0.05 s0.12-0.03,0.18-0.04s0.13-0.02,0.2-0.02c0.21,0,0.39,0.03,0.55,0.1s0.3,0.16,0.41,0.28s0.2,0.27,0.25,0.45s0.09,0.38,0.09,0.6 c0,0.19-0.03,0.37-0.09,0.54s-0.15,0.32-0.27,0.45s-0.27,0.24-0.45,0.31s-0.39,0.12-0.64,0.12c-0.18,0-0.36-0.03-0.53-0.08 s-0.32-0.14-0.46-0.24s-0.24-0.24-0.32-0.39s-0.13-0.33-0.13-0.53h0.84c0.02,0.18,0.08,0.32,0.19,0.41s0.25,0.15,0.42,0.15 c0.11,0,0.2-0.02,0.27-0.06s0.14-0.1,0.18-0.17s0.08-0.15,0.11-0.25s0.03-0.2,0.03-0.31s-0.01-0.21-0.04-0.31 s-0.07-0.17-0.13-0.24s-0.13-0.12-0.21-0.15s-0.19-0.05-0.3-0.05c-0.08,0-0.15,0.01-0.2,0.02s-0.11,0.03-0.15,0.05 s-0.08,0.05-0.12,0.07s-0.07,0.06-0.1,0.09L10.69,13.9z"/>
+</svg>

package/components/Icon/assets/replay.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px">
+<title>replay</title>
+<path d="M11.99,5V1l-5,5l5,5V7c3.31,0,6,2.69,6,6s-2.69,6-6,6s-6-2.69-6-6h-2c0,4.42,3.58,8,8,8s8-3.58,8-8S16.41,5,11.99,5z"/>
+</svg>

package/components/Icon/assets/restore.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24"  xmlns="http://www.w3.org/2000/svg">
+<path d="M15.3735 3.62248C14.2733 3.17946 13.0967 2.95747 11.9107 2.96919C10.7248 2.98091 9.55275 3.2261 8.46155 3.69078C7.37036 4.15545 6.38137 4.8305 5.55106 5.67738C4.72075 6.52426 4.06538 7.52639 3.62236 8.62656C2.72764 10.8484 2.75221 13.3347 3.69065 15.5385C4.26993 16.8988 5.16812 18.0827 6.29336 19.0001H3.99997C3.44769 19.0001 2.99997 19.4478 2.99997 20.0001C2.99997 20.5524 3.44769 21.0001 3.99997 21.0001H8.99997C9.55226 21.0001 9.99997 20.5524 9.99997 20.0001V19.4734C10.0003 19.458 10.0003 19.4427 9.99997 19.4275V15.0001C9.99997 14.4478 9.55226 14.0001 8.99997 14.0001C8.44769 14.0001 7.99997 14.4478 7.99997 15.0001V17.7828C6.91597 17.033 6.05538 15.9869 5.53076 14.7549C4.80013 13.0392 4.78101 11.1035 5.47759 9.37363C5.8225 8.5171 6.33274 7.73689 6.97918 7.07755C7.62562 6.41821 8.39559 5.89265 9.24514 5.53088C10.0947 5.16911 11.0072 4.97822 11.9305 4.96909C12.8538 4.95997 13.7699 5.1328 14.6264 5.47771C15.1387 5.68401 15.7213 5.43594 15.9276 4.92363C16.1339 4.41132 15.8858 3.82878 15.3735 3.62248ZM19.37 7.16016C19.37 6.60787 18.9223 6.16016 18.37 6.16016C17.8177 6.16016 17.37 6.60787 17.37 7.16016V7.17016C17.37 7.72244 17.8177 8.17016 18.37 8.17016C18.9223 8.17016 19.37 7.72244 19.37 7.17016V7.16016ZM13 18.9399C13.5523 18.9399 14 19.3877 14 19.9399V19.9499C14 20.5022 13.5523 20.9499 13 20.9499C12.4477 20.9499 12 20.5022 12 19.9499V19.9399C12 19.3877 12.4477 18.9399 13 18.9399ZM17.84 18.3701C17.84 17.8178 17.3923 17.3701 16.84 17.3701C16.2877 17.3701 15.84 17.8178 15.84 18.3701V18.3801C15.84 18.9324 16.2877 19.3801 16.84 19.3801C17.3923 19.3801 17.84 18.9324 17.84 18.3801V18.3701ZM19.37 14.1001C19.9223 14.1001 20.37 14.5478 20.37 15.1001V15.1101C20.37 15.6624 19.9223 16.1101 19.37 16.1101C18.8177 16.1101 18.37 15.6624 18.37 15.1101V15.1001C18.37 14.5478 18.8177 14.1001 19.37 14.1001ZM20.9399 11C20.9399 10.4477 20.4922 10 19.9399 10C19.3877 10 18.9399 10.4477 18.9399 11V11.01C18.9399 11.5623 19.3877 12.01 19.9399 12.01C20.4922 12.01 20.9399 11.5623 20.9399 11.01V11Z"/>
+</svg>

package/components/Icon/assets/sleep.svg

@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<title>sleep</title>
+<path d="M10.6339 5.49241C9.91458 5.64375 9.22225 5.9141 8.58637 6.29529C7.55508 6.91351 6.71095 7.80008 6.14402 8.86043C5.57709 9.92078 5.30864 11.1151 5.36728 12.3161C5.42593 13.5171 5.80948 14.6796 6.47702 15.6797C7.14457 16.6797 8.07106 17.4798 9.15768 17.9946C10.2443 18.5094 11.4503 18.7196 12.647 18.6027C13.8437 18.4859 14.9862 18.0464 15.9527 17.3311C16.4703 16.948 16.927 16.4935 17.3105 15.9835C16.3414 16.0957 15.3523 16.0022 14.4097 15.7006C12.8709 15.2082 11.5532 14.1922 10.6858 12.8291C9.81836 11.4659 9.45603 9.84196 9.66177 8.23941C9.78776 7.25801 10.1219 6.32265 10.6339 5.49241ZM12.0987 3.85667H12.0991H12.0998H12.1004H12.101H12.1017H12.1023H12.1029H12.1036H12.1042H12.1048H12.1055H12.1061H12.1067H12.1074H12.108H12.1086H12.1093H12.1099H12.1105H12.1112H12.1118H12.1124H12.1131H12.1137H12.1143H12.1149H12.1156H12.1162H12.1168H12.1175H12.1181H12.1187H12.1194H12.12H12.1206H12.1213H12.1219H12.1225H12.1232H12.1238H12.1244H12.1251H12.1257H12.1263H12.1269H12.1276H12.1282H12.1288H12.1295H12.1301H12.1307H12.1314H12.132H12.1326H12.1333H12.1339H12.1345H12.1352H12.1358H12.1364H12.1371H12.1377H12.1383H12.1389H12.1396H12.1402H12.1408H12.1415H12.1421H12.1427H12.1434H12.144H12.1446H12.1453H12.1459H12.1465H12.1471H12.1478H12.1484H12.149H12.1497H12.1503H12.1509H12.1516H12.1522H12.1528H12.1535H12.1541H12.1547H12.1553H12.156H12.1566H12.1572H12.1579H12.1585H12.1591H12.1598H12.1604H12.161H12.1617H12.1623H12.1629H12.1635H12.1642H12.1648H12.1654H12.1661H12.1667H12.1673H12.168H12.1686H12.1692H12.1698H12.1705H12.1711H12.1717H12.1724H12.173H12.1736H12.1743H12.1749H12.1755H12.1761H12.1768H12.1774H12.178H12.1787H12.1793H12.1799H12.1806H12.1812H12.1818H12.1824H12.1831H12.1837H12.1843H12.185H12.1856H12.1862H12.1869H12.1875H12.1881H12.1887H12.1894H12.19H12.1906H12.1913H12.1919H12.1925H12.1932H12.1938H12.1944H12.195H12.1957H12.1963H12.1969H12.1976H12.1982H12.1988H12.1994H12.2001H12.2007H12.2013H12.202H12.2026H12.2032H12.2038H12.2045H12.2051H12.2057H12.2064H12.207H12.2076H12.2083H12.2089H12.2095H12.2101H12.2108H12.2114H12.212H12.2127H12.2133H12.2139H12.2145H12.2152H12.2158H12.2164H12.2171H12.2177H12.2183H12.2189H12.2196H12.2202H12.2208H12.2215H12.2221H12.2227H12.2233H12.224H12.2246H12.2252H12.2259H12.2265H12.2271H12.2277H12.2284H12.229H12.2296H12.2303H12.2309H12.2315H12.2321H12.2328H12.2334H12.234H12.2347H12.2353H12.2359H12.2365H12.2372H12.2378H12.2384H12.2391H12.2397H12.2403H12.2409H12.2416H12.2422H12.2428H12.2435H12.2441H12.2447H12.2453H12.246H12.2466H12.2472H12.2478H12.2485H12.2491H12.2497H12.2504H12.251H12.2516H12.2522H12.2529H12.2535H12.2541H12.2548H12.2554H12.256H12.2566H12.2573H12.2579H12.2585H12.2591H12.2598H12.2604H12.261H12.2617H12.2623H12.2629H12.2635H12.2642H12.2648H12.2654H12.266H12.2667H12.2673H12.2679H12.2686H12.2692H12.2698H12.2704H12.2711H12.2717H12.2723H12.2729H12.2736H12.2742H12.2748H12.2755H12.2761H12.2767H12.2773H12.278H12.2786H12.2792H12.2798H12.2805H12.2811H12.2817H12.2824H12.283H12.2836H12.2842H12.2849H12.2855H12.2861H12.2867H12.2874H12.288H12.2886H12.2892H12.2899H12.2905H12.2911H12.2918H12.2924H12.293H12.2936H12.2943H12.2949H12.2955H12.2961H12.2968H12.2974H12.298H12.2986H12.2993H12.2999H12.3005H12.3011H12.3018H12.3024H12.303H12.3037H12.3043H12.3049H12.3055H12.3062H12.3068H12.3074H12.308H12.3087H12.3093H12.3099H12.3105H12.3112H12.3118H12.3124H12.313H12.3137H12.3143H12.3149H12.3155H12.3162H12.3168H12.3174H12.318H12.3187H12.3193H12.3199H12.3206H12.3212H12.3218H12.3224C12.6308 3.85667 12.9077 4.04541 13.0205 4.33241C13.1332 4.61942 13.0588 4.94619 12.833 5.15609C11.9063 6.01716 11.3106 7.17573 11.1496 8.43041C10.9885 9.68509 11.2722 10.9565 11.9513 12.0238C12.6304 13.091 13.662 13.8865 14.8668 14.272C16.0716 14.6575 17.3734 14.6086 18.546 14.1339C18.8263 14.0204 19.1473 14.0863 19.3602 14.3012C19.573 14.516 19.6361 14.8376 19.52 15.1169C18.9543 16.478 18.0298 17.6599 16.8451 18.5368C15.6603 19.4136 14.2597 19.9524 12.7928 20.0956C11.3258 20.2389 9.84748 19.9813 8.51547 19.3502C7.18345 18.7192 6.04772 17.7384 5.22943 16.5124C4.41113 15.2865 3.94096 13.8615 3.86907 12.3893C3.79718 10.9171 4.12626 9.453 4.82122 8.15318C5.51618 6.85337 6.55095 5.76658 7.81514 5.00874C9.07933 4.25091 10.5255 3.85045 11.9995 3.8501C12.0328 3.85009 12.066 3.85231 12.0987 3.85667ZM16.1065 4.67805C16.5207 4.67805 16.8565 5.01384 16.8565 5.42805C16.8565 5.66481 16.9506 5.89186 17.118 6.05927C17.2854 6.22668 17.5124 6.32073 17.7492 6.32073C18.1634 6.32073 18.4992 6.65652 18.4992 7.07073C18.4992 7.48494 18.1634 7.82073 17.7492 7.82073C17.5124 7.82073 17.2854 7.91478 17.118 8.08219C16.9506 8.2496 16.8565 8.47666 16.8565 8.71341C16.8565 9.12762 16.5207 9.46341 16.1065 9.46341C15.6923 9.46341 15.3565 9.12762 15.3565 8.71341C15.3565 8.47666 15.2625 8.2496 15.0951 8.08219C14.9276 7.91478 14.7006 7.82073 14.4638 7.82073C14.0496 7.82073 13.7138 7.48494 13.7138 7.07073C13.7138 6.65652 14.0496 6.32073 14.4638 6.32073C14.7006 6.32073 14.9276 6.22668 15.0951 6.05927C15.2625 5.89186 15.3565 5.66481 15.3565 5.42805C15.3565 5.01384 15.6923 4.67805 16.1065 4.67805ZM19.3205 10.3561C19.3205 9.94187 18.9847 9.60609 18.5705 9.60609C18.1563 9.60609 17.8205 9.94187 17.8205 10.3561V10.4274H17.7492C17.335 10.4274 16.9992 10.7632 16.9992 11.1774C16.9992 11.5916 17.335 11.9274 17.7492 11.9274H17.8205V11.9988C17.8205 12.413 18.1563 12.7488 18.5705 12.7488C18.9847 12.7488 19.3205 12.413 19.3205 11.9988V11.9274H19.3919C19.8061 11.9274 20.1419 11.5916 20.1419 11.1774C20.1419 10.7632 19.8061 10.4274 19.3919 10.4274H19.3205V10.3561Z"/>
+</svg>

package/components/ImagePreview.js

@@ -1,10 +1,10 @@
 import React, { PureComponent } from 'react';
 import { Image, Modal, TouchableOpacity, View } from 'react-native';
-import Icon from 'react-native-vector-icons/MaterialIcons';
 import autoBindReact from 'auto-bind/react';
 import PropTypes from 'prop-types';
 import { makeZoomable } from '@shoutem/animation';
 import { connectStyle } from '@shoutem/theme';
+import { Icon } from './Icon/Icon';
 
 const ZoomableImage = makeZoomable(Image);
 
@@ -55,11 +55,7 @@ class ImagePreview extends PureComponent {
             style={style.fullScreen}
             onPress={this.onPressCloseButton}
           >
-            <Icon
-              name={CLOSE_ICON_NAME}
-              size={CLOSE_ICON_SIZE}
-              style={style.closeIcon}
-            />
+            <Icon name="close" style={style.closeIcon} />
           </TouchableOpacity>
         </View>
       );

package/components/ListView.js

@@ -57,7 +57,6 @@ class ListView extends PureComponent {
 
     this.state = {
       status: props.loading ? Status.LOADING : Status.IDLE,
-      isScrolling: false,
     };
   }
 
@@ -166,8 +165,10 @@ class ListView extends PureComponent {
     // is data refreshing
     mappedProps.refreshing = refreshing === Status.REFRESHING;
 
-    // if list is empty, show empty placeholder
-    if (!ListEmptyComponent) {
+    // If list is empty and user hasn't defined ListEmptyComponent in props,
+    // use default ListEmptyComponent.
+    // If ListEmptyComponent prop is null, render nothing
+    if (ListEmptyComponent === undefined) {
       mappedProps.ListEmptyComponent = this.renderListEmptyComponent();
     }
 
@@ -177,21 +178,17 @@ class ListView extends PureComponent {
     // reference
     mappedProps.ref = this.handleListViewRef;
 
-    mappedProps.onMomentumScrollBegin = this.setStartedScrolling;
-
-    mappedProps.onMomentumScrollEnd = this.setEndedScrolling;
-
     return mappedProps;
   }
 
   // eslint-disable-next-line consistent-return
   createOnLoadMore() {
     const { onLoadMore, data } = this.props;
-    const { isScrolling, status } = this.state;
+    const { status } = this.state;
     if (onLoadMore) {
       return _.throttle(
         () => {
-          if (!_.isEmpty(data) && isScrolling && status === Status.IDLE) {
+          if (!_.isEmpty(data) && status === Status.IDLE) {
             onLoadMore();
           }
         },
@@ -201,14 +198,6 @@ class ListView extends PureComponent {
     }
   }
 
-  setStartedScrolling() {
-    this.setState({ isScrolling: true });
-  }
-
-  setEndedScrolling() {
-    this.setState({ isScrolling: true });
-  }
-
   autoHideHeader({
     nativeEvent: {
       layout: { height },
@@ -370,7 +359,7 @@ ListView.propTypes = {
   getSectionId: PropTypes.func,
   hasFeaturedItem: PropTypes.bool,
   keyExtractor: PropTypes.func,
-  ListEmptyComponent: PropTypes.node,
+  ListEmptyComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   loading: PropTypes.bool,
   renderFeaturedItem: PropTypes.func,
   renderFooter: PropTypes.func,

package/components/LoadingContainer.js

@@ -0,0 +1,80 @@
+import React, { useMemo, useState } from 'react';
+import LottieView from 'lottie-react-native';
+import PropTypes from 'prop-types';
+import { connectStyle } from '@shoutem/theme';
+import { View } from '@shoutem/ui';
+import { animations } from '../assets';
+
+function LoadingContainer({
+  animation,
+  children,
+  loading,
+  animationScale,
+  style,
+}) {
+  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+
+  function onLayoutChange(event) {
+    const { width, height } = event.nativeEvent.layout;
+
+    if (width === 0 && height === 0) {
+      return;
+    }
+
+    setDimensions({ width, height });
+  }
+
+  const lottieViewDimensions = useMemo(
+    () => ({
+      width: dimensions.width * animationScale,
+      height: dimensions.height * animationScale,
+    }),
+    [animationScale, dimensions],
+  );
+
+  if (!children) {
+    return null;
+  }
+
+  return (
+    <View style={style.container}>
+      {!loading && <View onLayout={onLayoutChange}>{children}</View>}
+      {loading && (
+        <View style={[style.container, dimensions]}>
+          <LottieView
+            style={lottieViewDimensions}
+            source={animation}
+            colorFilters={style.animationFilters}
+            autoPlay
+            loop
+          />
+        </View>
+      )}
+    </View>
+  );
+}
+
+LoadingContainer.propTypes = {
+  animation: PropTypes.object,
+  animationScale: PropTypes.number,
+  children: PropTypes.oneOfType([
+    PropTypes.object,
+    PropTypes.func,
+    PropTypes.node,
+  ]),
+  loading: PropTypes.bool,
+  style: PropTypes.object,
+};
+
+LoadingContainer.defaultProps = {
+  animationScale: 1,
+  children: undefined,
+  animation: animations.loadingDots,
+  loading: false,
+  style: {},
+};
+
+const StyledLoadingContainer = connectStyle('shoutem.ui.LoadingContainer')(
+  LoadingContainer,
+);
+export { StyledLoadingContainer as LoadingContainer };

package/index.js

@@ -80,6 +80,7 @@ export { SearchField } from './components/SearchField';
 export { TabMenu } from './components/TabMenu';
 export { YearRangePicker } from './components/YearRangePicker';
 export { DateTimePicker } from './components/DateTimePicker';
+export { LoadingContainer } from './components/LoadingContainer';
 
 export { Examples } from './examples/components';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoutem/ui",
-  "version": "4.9.1",
+  "version": "5.0.1-rc.0",
   "description": "Styleable set of components for React Native applications",
   "scripts": {
     "lint": "eslint .",
@@ -21,19 +21,19 @@
     "html-entities": "1.3.1",
     "htmlparser2": "3.10.1",
     "lodash": "4.17.21",
+    "lottie-react-native": "5.0.1",
     "prop-types": "15.8.1",
     "qs": "6.9.3",
     "react-native-device-info": "8.4.8",
-    "react-native-lightbox": "shoutem/react-native-lightbox#v0.7.2",
+    "react-native-lightbox": "github:shoutem/react-native-lightbox#v0.7.2",
     "react-native-linear-gradient": "2.5.6",
     "react-native-modal": "11.7.0",
-    "react-native-photo-view": "shoutem/react-native-photo-view#0ffa1481f6b6cb8663cb291b7db1d6644440584d",
+    "react-native-photo-view": "github:shoutem/react-native-photo-view#e7f0003",
     "react-native-render-html": "4.2.5",
     "react-native-render-html-table-bridge": "0.6.0",
     "react-native-svg": "12.1.1",
     "react-native-svg-transformer": "0.14.3",
-    "react-native-transformable-image": "shoutem/react-native-transformable-image#v0.0.20",
-    "react-native-vector-icons": "6.6.0",
+    "react-native-transformable-image": "github:shoutem/react-native-transformable-image#v0.0.20",
     "react-native-webview": "11.0.3",
     "react-native-youtube-iframe": "2.1.2",
     "stream": "0.0.2",
@@ -70,9 +70,9 @@
     "@react-native-community/datetimepicker",
     "react-native-device-info",
     "react-native-linear-gradient",
+    "lottie-react-native",
     "react-native-photo-view",
     "react-native-svg",
-    "react-native-vector-icons",
     "react-native-webview"
   ],
   "homepage": "http://shoutem.github.io/docs/ui-toolkit/introduction",
@@ -86,40 +86,20 @@
   "license": "BSD-3-Clause",
   "maintainers": [
     {
-      "email": "bruna.andjelic@gmail.com",
-      "name": "bAndelic"
+      "email": "lucija.tatarevic@shoutem.com",
+      "name": "ltatarev"
     },
     {
-      "email": "belma.dzi@gmail.com",
-      "name": "morrigan"
+      "email": "slavko@shoutem.com",
+      "name": "sstimac"
     },
     {
-      "email": "luka.bracanovic@shoutem.com",
-      "name": "MrBr"
-    },
-    {
-      "email": "ivan@shoutem.com",
-      "name": "SoHotSoup"
-    },
-    {
-      "email": "tomislav.tenodi@shoutem.com",
-      "name": "tenodi"
-    },
-    {
-      "email": "vladimir@shoutem.com",
-      "name": "Vunovati"
+      "email": "tomislav.arambasic@shoutem.com",
+      "name": "tomislav-arambasic"
     },
     {
       "email": "vlad@definitely-not-vlad.com",
       "name": "Definitely-Not-Vlad"
-    },
-    {
-      "email": "zeljko@shoutem.com",
-      "name": "zrumenjak"
-    },
-    {
-      "email": "tomislav.arambasic@shoutem.com",
-      "name": "tomislav-arambasic"
     }
   ],
   "eslintConfig": {

package/theme.js

@@ -2710,6 +2710,8 @@ export default (variables = defaultThemeVariables) => ({
       color: 'white',
       marginLeft: 15,
       marginTop: -STATUS_BAR_OFFSET + 20,
+      height: 25,
+      width: 25,
     },
   },
 
@@ -2944,4 +2946,11 @@ export default (variables = defaultThemeVariables) => ({
       borderWidth: 1,
     },
   },
+
+  'shoutem.ui.LoadingContainer': {
+    container: {
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+  },
 });