@expressms/smartapp-ui 0.0.8 → 1.0.0

package/build/main/assets/icons/arrow-back.svg

@@ -1,3 +1,3 @@
 <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.76107 10.6464L6.90751 11.5H8.11462H19.2866C19.5628 11.5 19.7866 11.7239 19.7866 12C19.7866 12.2761 19.5628 12.5 19.2866 12.5H8.11462H6.90751L7.76107 13.3536L12.6401 18.2326C12.8353 18.4278 12.8353 18.7442 12.6401 18.9394C12.4449 19.1347 12.1284 19.1347 11.9332 18.9394L5.34728 12.3536C5.15202 12.1583 5.15202 11.8417 5.34728 11.6464L11.9332 5.06055C12.1284 4.86535 12.4449 4.86535 12.6401 5.06055C12.8353 5.25576 12.8353 5.57224 12.6401 5.76745L7.76107 10.6464Z" fill="currentColor" stroke="#currentColor"/>
+<path d="M7.76107 10.6464L6.90751 11.5H8.11462H19.2866C19.5628 11.5 19.7866 11.7239 19.7866 12C19.7866 12.2761 19.5628 12.5 19.2866 12.5H8.11462H6.90751L7.76107 13.3536L12.6401 18.2326C12.8353 18.4278 12.8353 18.7442 12.6401 18.9394C12.4449 19.1347 12.1284 19.1347 11.9332 18.9394L5.34728 12.3536C5.15202 12.1583 5.15202 11.8417 5.34728 11.6464L11.9332 5.06055C12.1284 4.86535 12.4449 4.86535 12.6401 5.06055C12.8353 5.25576 12.8353 5.57224 12.6401 5.76745L7.76107 10.6464Z" fill="currentColor" stroke="currentColor"/>
 </svg>

package/build/main/assets/icons/cancel-cross.svg

@@ -1,3 +1,3 @@
 <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.5039 10.9393L12.8574 11.2929L13.211 10.9393L17.4536 6.6967C17.6489 6.50144 17.9654 6.50144 18.1607 6.6967C18.356 6.89196 18.356 7.20854 18.1607 7.40381L13.9181 11.6464L13.5645 12L13.9181 12.3536L18.1607 16.5962C18.356 16.7915 18.356 17.108 18.1607 17.3033C17.9654 17.4986 17.6489 17.4986 17.4536 17.3033L13.211 13.0607L12.8574 12.7071L12.5039 13.0607L8.26122 17.3033C8.06595 17.4986 7.74937 17.4986 7.55411 17.3033C7.35885 17.108 7.35885 16.7915 7.55411 16.5962L11.7967 12.3536L12.1503 12L11.7967 11.6464L7.55411 7.40381C7.35885 7.20854 7.35885 6.89196 7.55411 6.6967C7.74937 6.50144 8.06595 6.50144 8.26122 6.6967L12.5039 10.9393Z" stroke="#111111" stroke-opacity="0.3"/>
+<path d="M12.5039 10.9393L12.8574 11.2929L13.211 10.9393L17.4536 6.6967C17.6489 6.50144 17.9654 6.50144 18.1607 6.6967C18.356 6.89196 18.356 7.20854 18.1607 7.40381L13.9181 11.6464L13.5645 12L13.9181 12.3536L18.1607 16.5962C18.356 16.7915 18.356 17.108 18.1607 17.3033C17.9654 17.4986 17.6489 17.4986 17.4536 17.3033L13.211 13.0607L12.8574 12.7071L12.5039 13.0607L8.26122 17.3033C8.06595 17.4986 7.74937 17.4986 7.55411 17.3033C7.35885 17.108 7.35885 16.7915 7.55411 16.5962L11.7967 12.3536L12.1503 12L11.7967 11.6464L7.55411 7.40381C7.35885 7.20854 7.35885 6.89196 7.55411 6.6967C7.74937 6.50144 8.06595 6.50144 8.26122 6.6967L12.5039 10.9393Z" stroke="currentColor" stroke-opacity="1"/>
 </svg>

package/build/main/assets/icons/check-mark.svg

@@ -1,3 +1,3 @@
 <svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M9.42871 18C14.3993 18 18.4287 13.9706 18.4287 9C18.4287 4.02944 14.3993 0 9.42871 0C4.45815 0 0.428711 4.02944 0.428711 9C0.428711 13.9706 4.45815 18 9.42871 18ZM8.86036 12.3453L14.1358 7.07023C14.5264 6.67921 14.5264 6.04566 14.1356 5.65486C13.7449 5.26428 13.1112 5.26399 12.7203 5.65486L8.15288 10.2223L6.137 8.20643C5.7463 7.81571 5.11265 7.81571 4.72178 8.20658C4.33098 8.59738 4.33098 9.23115 4.72178 9.62187L7.44499 12.3453C7.83601 12.736 8.46971 12.736 8.86036 12.3453Z" fill="#4799E3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.42871 18C14.3993 18 18.4287 13.9706 18.4287 9C18.4287 4.02944 14.3993 0 9.42871 0C4.45815 0 0.428711 4.02944 0.428711 9C0.428711 13.9706 4.45815 18 9.42871 18ZM8.86036 12.3453L14.1358 7.07023C14.5264 6.67921 14.5264 6.04566 14.1356 5.65486C13.7449 5.26428 13.1112 5.26399 12.7203 5.65486L8.15288 10.2223L6.137 8.20643C5.7463 7.81571 5.11265 7.81571 4.72178 8.20658C4.33098 8.59738 4.33098 9.23115 4.72178 9.62187L7.44499 12.3453C7.83601 12.736 8.46971 12.736 8.86036 12.3453Z" fill="currentColor"/>
 </svg>

package/build/main/assets/icons/close-stories.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="24" height="24" rx="12" fill="white"/>
+<path d="M16.7782 7.22943C16.4824 6.93364 16.0045 6.93364 15.7088 7.22943L12 10.9306L8.29124 7.22184C7.99545 6.92605 7.51763 6.92605 7.22184 7.22184C6.92605 7.51763 6.92605 7.99545 7.22184 8.29124L10.9306 12L7.22184 15.7088C6.92605 16.0045 6.92605 16.4824 7.22184 16.7782C7.51763 17.0739 7.99545 17.0739 8.29124 16.7782L12 13.0694L15.7088 16.7782C16.0045 17.0739 16.4824 17.0739 16.7782 16.7782C17.0739 16.4824 17.0739 16.0045 16.7782 15.7088L13.0694 12L16.7782 8.29124C17.0664 8.00303 17.0664 7.51763 16.7782 7.22943Z" fill="#111111" fill-opacity="0.3"/>
+</svg>

package/build/main/assets/icons/close.svg

@@ -1,3 +1,3 @@
 <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11.79 10.9393L12.1435 11.2929L12.4971 10.9393L16.7397 6.6967C16.935 6.50144 17.2516 6.50144 17.4468 6.6967C17.6421 6.89196 17.6421 7.20854 17.4468 7.40381L13.2042 11.6464L12.8506 12L13.2042 12.3536L17.4468 16.5962C17.6421 16.7915 17.6421 17.108 17.4468 17.3033C17.2516 17.4986 16.935 17.4986 16.7397 17.3033L12.4971 13.0607L12.1435 12.7071L11.79 13.0607L7.54735 17.3033C7.35209 17.4986 7.0355 17.4986 6.84024 17.3033C6.64498 17.108 6.64498 16.7915 6.84024 16.5962L11.0829 12.3536L11.4364 12L11.0829 11.6464L6.84024 7.40381C6.64498 7.20854 6.64498 6.89196 6.84024 6.6967C7.0355 6.50144 7.35209 6.50144 7.54735 6.6967L11.79 10.9393Z" fill="#4799E3" stroke="#4799E3"/>
+<path d="M11.79 10.9393L12.1435 11.2929L12.4971 10.9393L16.7397 6.6967C16.935 6.50144 17.2516 6.50144 17.4468 6.6967C17.6421 6.89196 17.6421 7.20854 17.4468 7.40381L13.2042 11.6464L12.8506 12L13.2042 12.3536L17.4468 16.5962C17.6421 16.7915 17.6421 17.108 17.4468 17.3033C17.2516 17.4986 16.935 17.4986 16.7397 17.3033L12.4971 13.0607L12.1435 12.7071L11.79 13.0607L7.54735 17.3033C7.35209 17.4986 7.0355 17.4986 6.84024 17.3033C6.64498 17.108 6.64498 16.7915 6.84024 16.5962L11.0829 12.3536L11.4364 12L11.0829 11.6464L6.84024 7.40381C6.64498 7.20854 6.64498 6.89196 6.84024 6.6967C7.0355 6.50144 7.35209 6.50144 7.54735 6.6967L11.79 10.9393Z" fill="currentColor" stroke="currentColor"/>
 </svg>

package/build/main/assets/icons/download.svg

@@ -1,4 +1,4 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4.5 19L4.5 19.5L5 19.5L19 19.5L19.5 19.5L19.5 19L19.5 13C19.5 12.7261 19.7261 12.5 20 12.5C20.2739 12.5 20.5 12.7261 20.5 13L20.5 19C20.5 19.8239 19.8239 20.5 19 20.5L5 20.5C4.17614 20.5 3.5 19.8239 3.5 19L3.5 13C3.5 12.7261 3.72614 12.5 4 12.5C4.27386 12.5 4.5 12.7261 4.5 13L4.5 19Z" fill="#4799E3" stroke="#4799E3"/>
-<path d="M12.35 14.8587L15.14 12.0687C15.46 11.7487 15.24 11.2087 14.79 11.2087L13 11.2087L13 4.20873C13 3.65873 12.55 3.20873 12 3.20873C11.45 3.20873 11 3.65873 11 4.20873L11 11.2087L9.20997 11.2087C8.75997 11.2087 8.53997 11.7487 8.85997 12.0587L11.65 14.8487C11.84 15.0487 12.16 15.0487 12.35 14.8587Z" fill="#4799E3"/>
+<path d="M4.5 19L4.5 19.5L5 19.5L19 19.5L19.5 19.5L19.5 19L19.5 13C19.5 12.7261 19.7261 12.5 20 12.5C20.2739 12.5 20.5 12.7261 20.5 13L20.5 19C20.5 19.8239 19.8239 20.5 19 20.5L5 20.5C4.17614 20.5 3.5 19.8239 3.5 19L3.5 13C3.5 12.7261 3.72614 12.5 4 12.5C4.27386 12.5 4.5 12.7261 4.5 13L4.5 19Z" fill="currentColor" stroke="currentColor"/>
+<path d="M12.35 14.8587L15.14 12.0687C15.46 11.7487 15.24 11.2087 14.79 11.2087L13 11.2087L13 4.20873C13 3.65873 12.55 3.20873 12 3.20873C11.45 3.20873 11 3.65873 11 4.20873L11 11.2087L9.20997 11.2087C8.75997 11.2087 8.53997 11.7487 8.85997 12.0587L11.65 14.8487C11.84 15.0487 12.16 15.0487 12.35 14.8587Z" fill="currentColor"/>
 </svg>

package/build/main/assets/icons/error.svg

@@ -1,5 +1,5 @@
 <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11.0302 2.28309C11.4795 2.03014 11.9864 1.89725 12.502 1.89725C13.0176 1.89725 13.5245 2.03014 13.9738 2.28309C14.4231 2.53604 14.7996 2.90052 15.067 3.34136L15.0699 3.34611L23.5398 17.4861L23.548 17.4999C23.8099 17.9536 23.9485 18.4679 23.95 18.9917C23.9514 19.5155 23.8157 20.0306 23.5563 20.4857C23.2969 20.9408 22.9229 21.3201 22.4714 21.5857C22.0199 21.8514 21.5068 21.9942 20.983 21.9999L20.972 22.0001L4.02098 22C3.49718 21.9942 2.98402 21.8514 2.53255 21.5857C2.08107 21.3201 1.70703 20.9408 1.44762 20.4857C1.18822 20.0306 1.0525 19.5155 1.05397 18.9917C1.05543 18.4679 1.19404 17.9536 1.45598 17.4999L1.46411 17.4861L9.93411 3.34612L10.792 3.85998L9.93697 3.34136C10.2044 2.90052 10.5809 2.53604 11.0302 2.28309ZM11.6482 4.37663L3.18466 18.5058C3.09948 18.6556 3.05444 18.8249 3.05396 18.9973C3.05347 19.1719 3.09871 19.3436 3.18518 19.4953C3.27165 19.647 3.39633 19.7734 3.54682 19.862C3.69599 19.9498 3.86537 19.9973 4.03837 20H20.9656C21.1386 19.9973 21.308 19.9498 21.4571 19.862C21.6076 19.7734 21.7323 19.647 21.8188 19.4953C21.9052 19.3436 21.9505 19.1719 21.95 18.9973C21.9495 18.8249 21.9045 18.6557 21.8193 18.5059L13.357 4.37862C13.3566 4.37796 13.3562 4.37729 13.3558 4.37663C13.2667 4.23058 13.1417 4.1098 12.9926 4.02586C12.8428 3.94154 12.6738 3.89725 12.502 3.89725C12.3301 3.89725 12.1611 3.94154 12.0114 4.02586C11.8623 4.1098 11.7372 4.23058 11.6482 4.37663Z" fill="#111111" fill-opacity="0.3"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12.502 8C13.0542 8 13.502 8.44772 13.502 9V13C13.502 13.5523 13.0542 14 12.502 14C11.9497 14 11.502 13.5523 11.502 13V9C11.502 8.44772 11.9497 8 12.502 8Z" fill="#111111" fill-opacity="0.3"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11.502 17C11.502 16.4477 11.9497 16 12.502 16H12.512C13.0642 16 13.512 16.4477 13.512 17C13.512 17.5523 13.0642 18 12.512 18H12.502C11.9497 18 11.502 17.5523 11.502 17Z" fill="#111111" fill-opacity="0.3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.0302 2.28309C11.4795 2.03014 11.9864 1.89725 12.502 1.89725C13.0176 1.89725 13.5245 2.03014 13.9738 2.28309C14.4231 2.53604 14.7996 2.90052 15.067 3.34136L15.0699 3.34611L23.5398 17.4861L23.548 17.4999C23.8099 17.9536 23.9485 18.4679 23.95 18.9917C23.9514 19.5155 23.8157 20.0306 23.5563 20.4857C23.2969 20.9408 22.9229 21.3201 22.4714 21.5857C22.0199 21.8514 21.5068 21.9942 20.983 21.9999L20.972 22.0001L4.02098 22C3.49718 21.9942 2.98402 21.8514 2.53255 21.5857C2.08107 21.3201 1.70703 20.9408 1.44762 20.4857C1.18822 20.0306 1.0525 19.5155 1.05397 18.9917C1.05543 18.4679 1.19404 17.9536 1.45598 17.4999L1.46411 17.4861L9.93411 3.34612L10.792 3.85998L9.93697 3.34136C10.2044 2.90052 10.5809 2.53604 11.0302 2.28309ZM11.6482 4.37663L3.18466 18.5058C3.09948 18.6556 3.05444 18.8249 3.05396 18.9973C3.05347 19.1719 3.09871 19.3436 3.18518 19.4953C3.27165 19.647 3.39633 19.7734 3.54682 19.862C3.69599 19.9498 3.86537 19.9973 4.03837 20H20.9656C21.1386 19.9973 21.308 19.9498 21.4571 19.862C21.6076 19.7734 21.7323 19.647 21.8188 19.4953C21.9052 19.3436 21.9505 19.1719 21.95 18.9973C21.9495 18.8249 21.9045 18.6557 21.8193 18.5059L13.357 4.37862C13.3566 4.37796 13.3562 4.37729 13.3558 4.37663C13.2667 4.23058 13.1417 4.1098 12.9926 4.02586C12.8428 3.94154 12.6738 3.89725 12.502 3.89725C12.3301 3.89725 12.1611 3.94154 12.0114 4.02586C11.8623 4.1098 11.7372 4.23058 11.6482 4.37663Z" fill="currentColor" fill-opacity="1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.502 8C13.0542 8 13.502 8.44772 13.502 9V13C13.502 13.5523 13.0542 14 12.502 14C11.9497 14 11.502 13.5523 11.502 13V9C11.502 8.44772 11.9497 8 12.502 8Z" fill="currentColor" fill-opacity="1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.502 17C11.502 16.4477 11.9497 16 12.502 16H12.512C13.0642 16 13.512 16.4477 13.512 17C13.512 17.5523 13.0642 18 12.512 18H12.502C11.9497 18 11.502 17.5523 11.502 17Z" fill="currentColor" fill-opacity="1"/>
 </svg>

package/build/main/assets/icons/file.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5 6.79994C5 5.94336 5.00078 5.36107 5.03755 4.91098C5.07337 4.47256 5.1383 4.24836 5.21799 4.09196C5.40973 3.71563 5.71569 3.40967 6.09202 3.21793C6.24842 3.13824 6.47262 3.07331 6.91104 3.03749C7.36113 3.00072 7.94342 2.99994 8.8 2.99994H13.3373C13.4683 2.99994 13.5336 3.00018 13.5811 3.00235C13.5824 3.00241 13.5836 3.00246 13.5847 3.00252C13.5856 3.00329 13.5865 3.00409 13.5874 3.00493C13.6225 3.03698 13.6689 3.08304 13.7615 3.17567L18.8243 8.23842C18.9169 8.33105 18.963 8.37745 18.995 8.41256C18.9958 8.41349 18.9966 8.41437 18.9974 8.41522C18.9975 8.41637 18.9975 8.41756 18.9976 8.41881C18.9998 8.4663 19 8.53168 19 8.66268V17.1999C19 18.0565 18.9992 18.6388 18.9624 19.0889C18.9266 19.5273 18.8617 19.7515 18.782 19.9079C18.5903 20.2843 18.2843 20.5902 17.908 20.782C17.7516 20.8616 17.5274 20.9266 17.089 20.9624C16.6389 20.9992 16.0566 20.9999 15.2 20.9999H8.8C7.94342 20.9999 7.36113 20.9992 6.91104 20.9624C6.47262 20.9266 6.24842 20.8616 6.09202 20.782C5.7157 20.5902 5.40973 20.2842 5.21799 19.9079C5.1383 19.7515 5.07337 19.5273 5.03755 19.0889C5.00078 18.6388 5 18.0565 5 17.1999V6.79994Z" stroke="#111111" stroke-opacity="0.3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5 6.79994C5 5.94336 5.00078 5.36107 5.03755 4.91098C5.07337 4.47256 5.1383 4.24836 5.21799 4.09196C5.40973 3.71563 5.71569 3.40967 6.09202 3.21793C6.24842 3.13824 6.47262 3.07331 6.91104 3.03749C7.36113 3.00072 7.94342 2.99994 8.8 2.99994H13.3373C13.4683 2.99994 13.5336 3.00018 13.5811 3.00235C13.5824 3.00241 13.5836 3.00246 13.5847 3.00252C13.5856 3.00329 13.5865 3.00409 13.5874 3.00493C13.6225 3.03698 13.6689 3.08304 13.7615 3.17567L18.8243 8.23842C18.9169 8.33105 18.963 8.37745 18.995 8.41256C18.9958 8.41349 18.9966 8.41437 18.9974 8.41522C18.9975 8.41637 18.9975 8.41756 18.9976 8.41881C18.9998 8.4663 19 8.53168 19 8.66268V17.1999C19 18.0565 18.9992 18.6388 18.9624 19.0889C18.9266 19.5273 18.8617 19.7515 18.782 19.9079C18.5903 20.2843 18.2843 20.5902 17.908 20.782C17.7516 20.8616 17.5274 20.9266 17.089 20.9624C16.6389 20.9992 16.0566 20.9999 15.2 20.9999H8.8C7.94342 20.9999 7.36113 20.9992 6.91104 20.9624C6.47262 20.9266 6.24842 20.8616 6.09202 20.782C5.7157 20.5902 5.40973 20.2842 5.21799 19.9079C5.1383 19.7515 5.07337 19.5273 5.03755 19.0889C5.00078 18.6388 5 18.0565 5 17.1999V6.79994Z" stroke="currentColor" stroke-opacity="1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/build/main/assets/icons/logout.svg

@@ -1,4 +1,4 @@
 <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5.57275 5H11.5728C12.1228 5 12.5728 4.55 12.5728 4C12.5728 3.45 12.1228 3 11.5728 3H5.57275C4.47275 3 3.57275 3.9 3.57275 5V19C3.57275 20.1 4.47275 21 5.57275 21H11.5728C12.1228 21 12.5728 20.55 12.5728 20C12.5728 19.45 12.1228 19 11.5728 19H5.57275V5Z" fill="#4799E3"/>
-<path d="M21.2228 11.65L18.4328 8.86C18.1128 8.54 17.5728 8.76 17.5728 9.21V11H10.5728C10.0228 11 9.57275 11.45 9.57275 12C9.57275 12.55 10.0228 13 10.5728 13H17.5728V14.79C17.5728 15.24 18.1128 15.46 18.4228 15.14L21.2128 12.35C21.4128 12.16 21.4128 11.84 21.2228 11.65Z" fill="#4799E3"/>
+<path d="M5.57275 5H11.5728C12.1228 5 12.5728 4.55 12.5728 4C12.5728 3.45 12.1228 3 11.5728 3H5.57275C4.47275 3 3.57275 3.9 3.57275 5V19C3.57275 20.1 4.47275 21 5.57275 21H11.5728C12.1228 21 12.5728 20.55 12.5728 20C12.5728 19.45 12.1228 19 11.5728 19H5.57275V5Z" fill="currentColor"/>
+<path d="M21.2228 11.65L18.4328 8.86C18.1128 8.54 17.5728 8.76 17.5728 9.21V11H10.5728C10.0228 11 9.57275 11.45 9.57275 12C9.57275 12.55 10.0228 13 10.5728 13H17.5728V14.79C17.5728 15.24 18.1128 15.46 18.4228 15.14L21.2128 12.35C21.4128 12.16 21.4128 11.84 21.2228 11.65Z" fill="currentColor"/>
 </svg>

package/build/main/assets/icons/order.svg

@@ -1,6 +1,6 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g opacity="0.3">
-<line x1="6" y1="15" x2="18" y2="15" stroke="black" stroke-width="2" stroke-linecap="round"/>
-<line x1="6" y1="9" x2="18" y2="9" stroke="black" stroke-width="2" stroke-linecap="round"/>
+<g opacity="1">
+<line x1="6" y1="15" x2="18" y2="15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+<line x1="6" y1="9" x2="18" y2="9" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
 </g>
 </svg>

package/build/main/assets/icons/plus.svg

@@ -1,4 +1,4 @@
 <svg width="45" height="44" viewBox="0 0 45 44" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="22.5728" cy="22" r="19.5" fill="#4799E3" fill-opacity="0.05" stroke="#4799E3"/>
-<path d="M23.0728 21V21.5H23.5728H29.5728C29.8489 21.5 30.0728 21.7239 30.0728 22C30.0728 22.2761 29.8489 22.5 29.5728 22.5H23.5728H23.0728V23V29C23.0728 29.2761 22.8489 29.5 22.5728 29.5C22.2966 29.5 22.0728 29.2761 22.0728 29V23V22.5H21.5728H15.5728C15.2966 22.5 15.0728 22.2761 15.0728 22C15.0728 21.7239 15.2966 21.5 15.5728 21.5H21.5728H22.0728V21V15C22.0728 14.7239 22.2966 14.5 22.5728 14.5C22.8489 14.5 23.0728 14.7239 23.0728 15V21Z" stroke="#4799E3"/>
+<circle cx="22.5728" cy="22" r="19.5" fill="currentColor" fill-opacity="1" stroke="strokeColor"/>
+<path d="M23.0728 21V21.5H23.5728H29.5728C29.8489 21.5 30.0728 21.7239 30.0728 22C30.0728 22.2761 29.8489 22.5 29.5728 22.5H23.5728H23.0728V23V29C23.0728 29.2761 22.8489 29.5 22.5728 29.5C22.2966 29.5 22.0728 29.2761 22.0728 29V23V22.5H21.5728H15.5728C15.2966 22.5 15.0728 22.2761 15.0728 22C15.0728 21.7239 15.2966 21.5 15.5728 21.5H21.5728H22.0728V21V15C22.0728 14.7239 22.2966 14.5 22.5728 14.5C22.8489 14.5 23.0728 14.7239 23.0728 15V21Z" stroke="strokeColor"/>
 </svg>

package/build/main/constants/constants.d.ts

@@ -0,0 +1,13 @@
+export declare const DEFAULT_BLUE_LIGHT_ICON_COLOR = "#4799E30D";
+export declare const DEFAULT_BLUE_ICON_COLOR = "#4799E3";
+export declare const DEFAULT_RED_ICON_COLOR = "#EB5545";
+export declare const DEFAULT_GRAY_ICON_COLOR = "#1111114D";
+export declare const DEFAULT_BLACK_ICON_COLOR = "#111111";
+export declare enum PLATFORM {
+    web = "web",
+    ios = "ios",
+    android = "android"
+}
+export declare const BUTTON_PADDING: number;
+export declare const MAX_PADDING_FOR_IMAGE: number;
+export declare const DEFAULT_FONT_FAMILY: string;

package/build/main/constants/constants.js

@@ -0,0 +1,14 @@
+export var DEFAULT_BLUE_LIGHT_ICON_COLOR = '#4799E30D';
+export var DEFAULT_BLUE_ICON_COLOR = '#4799E3';
+export var DEFAULT_RED_ICON_COLOR = '#EB5545';
+export var DEFAULT_GRAY_ICON_COLOR = '#1111114D';
+export var DEFAULT_BLACK_ICON_COLOR = '#111111';
+export var PLATFORM;
+(function (PLATFORM) {
+    PLATFORM["web"] = "web";
+    PLATFORM["ios"] = "ios";
+    PLATFORM["android"] = "android";
+})(PLATFORM || (PLATFORM = {}));
+export var BUTTON_PADDING = 32;
+export var MAX_PADDING_FOR_IMAGE = 200;
+export var DEFAULT_FONT_FAMILY = 'Open Sans';

package/build/main/constants/index.d.ts

@@ -0,0 +1 @@
+export * from './constants';

package/build/main/constants/index.js

@@ -0,0 +1 @@
+export * from './constants';

package/build/main/helpers/index.d.ts

@@ -0,0 +1 @@
+export declare const getIconColor: (iconColor: string | undefined, defaultIconColor: string) => string;

package/build/main/helpers/index.js

@@ -0,0 +1,3 @@
+export var getIconColor = function (iconColor, defaultIconColor) {
+    return (iconColor && CSS.supports('color', iconColor)) ? iconColor : defaultIconColor;
+};

package/build/main/styles/stories.module.scss

@@ -1,30 +1,28 @@
+@import '~animate.css/animate';
 @import 'react-datepicker/dist/react-datepicker';
 
 $color-black: rgba(17, 17, 17, 1);
 $color-dark-gray: rgba(17, 17, 17, 0.5);
 $color-darker-gray: rgba(17, 17, 17, 0.3);
+$color-darker-gray-opacity: rgba(0, 0, 0, 0.2);
+$color-darkest-gray-opacity: #CCC;
 $color-gray: rgba(17, 17, 17, 0.1);
+$color-light-gray: rgba(239, 242, 244, 1);
 $color-lighter-gray: rgba(224, 228, 236, 1);
 $color-lighter-gray-opacity: rgba(224, 228, 236, 0.4);
-$color-light-gray: rgba(239, 242, 244, 1);
+$color-lightest-gray: rgba(0, 0, 0, 0.05);
 $color-white: rgba(255, 255, 255, 1);
-$color-blue: rgba(71, 153, 227, 1);
-$color-orange: rgba(242, 160, 112, 1);
 $color-red: rgba(235, 85, 69, 1);
-$color-light-blue: rgba(71, 153, 227, 0.2);
+$color-blue: rgba(71, 153, 227, 1);
+$color-light-blue: #CDF4FF;
+$color-lighter-blue: rgba(71, 153, 227, 0.2);
 
-/*
-body {
-  width: 400px;
-  padding: 0 !important;
-}
+$border-color: rgba(85, 85, 85, 0.2);
 
-html {
- padding: 8px;
- width: 400px;
- margin: 0;
-}
- */
+$popup-background: rgba(0, 0, 0, 0.3);
+
+$box-shadow-color: rgba(0, 0, 0, 0.25);
+$box-shadow-dark-color: rgb(0 0 0 / 60%);
 
 .smartapp-action-modal {
   &__content {
@@ -33,7 +31,7 @@ html {
     flex-direction: column;
     background-color: $color-white;
     padding: 24px;
-    border: 1px solid rgba(85, 85, 85, 0.2);
+    border: 1px solid $border-color;
     border-radius: 3px;
     width: 320px;
 
@@ -68,7 +66,7 @@ html {
 .popup-content {
   width: 100%;
   height: 100%;
-  background: rgba(0, 0, 0, 0.3);
+  background: $popup-background;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -136,7 +134,7 @@ html {
   height: 40px;
   font-size: 18px;
   color: $color-white;
-  background-color: #cdf4ff;
+  background-color: $color-light-blue;
   text-decoration: none;
   white-space: nowrap;
   font-weight: 500;
@@ -146,7 +144,7 @@ html {
 
 .smartapp-button {
   width: 100%;
-  &__standart {
+  &__standard {
     cursor: pointer;
     padding: 12px 32px;
     border-radius: 8px;
@@ -219,7 +217,7 @@ html {
 
     // Голова
     &__header {
-      background: #eff2f4 !important;
+      background: $color-light-gray !important;
       color: $color-dark-gray;
       padding: 0;
       border-bottom: 0;
@@ -261,7 +259,7 @@ html {
 
     // Дни, которые уже прошли
     &__day--disabled {
-      color: #ccc !important;
+      color: $color-darkest-gray-opacity !important;
     }
 
     // Каждый день
@@ -320,7 +318,7 @@ html {
     align-items: center;
     cursor: pointer;
     padding: 12px 16px;
-    border: 1px solid rgba(0, 0, 0, 0.05);
+    border: 1px solid $color-lightest-gray;
     border-radius: 8px;
     box-sizing: border-box;
     width: 100%;
@@ -333,82 +331,50 @@ html {
 }
 
 .smartapp-check-box {
-  display: flex;
-  align-items: center;
-
-  &__container {
-    display: flex;
-    flex-direction: row;
-
-    &__marker {
-      margin-right: 18px;
-      height: 24px;
-      width: 24px;
-      cursor: pointer;
-    }
-
-    &__marker-name {
-      padding-top: 5px;
-    }
-
-    &__custom-check-box {
-      z-index: -1;
-      opacity: 0;
-      position: absolute;
-    }
+  &__custom-check-box {
+    z-index: -1;
+    opacity: 0;
+    position: absolute;
+  }
 
-    .checkmark {
-      display: inline-flex;
-      align-items: center;
-      user-select: none;
-      margin: 0;
-    }
+  .checkmark::before {
+    content: '';
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    background-color: $color-white;
+    border: 1px solid $color-gray;
+    border-radius: 50%;
+    cursor: pointer;
+  }
 
-    .checkmark::before {
-      cursor: pointer;
-      content: '';
-      display: inline-block;
-      width: 20px;
-      height: 20px;
-      flex-shrink: 0;
-      flex-grow: 0;
-      font-size: 16px;
-      line-height: 22px;
-      background-color: $color-white;
-      border: 1px solid $color-gray;
-      border-radius: 50%;
-      margin-right: 15px;
-      background-repeat: no-repeat;
-      background-position: center center;
-      background-size: 60% 60%;
-    }
+  /* стили при наведении курсора на радио */
+  &__custom-check-box:not(:disabled):not(:checked) + .checkmark:hover::before {
+    border-color: $color-gray;
+  }
 
-    /* стили при наведении курсора на радио */
-    &--custom-check-box:not(:disabled):not(:checked) + .checkmark:hover::before {
-      border-color: $color-gray;
-    }
+  /* стили для активной радиокнопки (при нажатии на неё) */
+  &__custom-check-box:not(:disabled):active + .checkmark::before {
+    background-color: $color-gray;
+    border-color: $color-gray;
+  }
 
-    /* стили для активной радиокнопки (при нажатии на неё) */
-    &--custom-check-box:not(:disabled):active + .checkmark::before {
-      background-color: $color-gray;
-      border-color: $color-gray;
-    }
+  /* стили для радиокнопки, находящейся в фокусе и не находящейся в состоянии checked */
+  &__custom-check-box:focus:not(:checked) + .checkmark::before {
+    border-color: $color-gray;
+    background-size: 60% 60%;
+  }
 
-    /* стили для радиокнопки, находящейся в фокусе и не находящейся в состоянии checked */
-    &__custom-check-box:focus:not(:checked) + .checkmark::before {
-      border-color: $color-gray;
-      background-size: 60% 60%;
-    }
+  /* стили для радиокнопки, находящейся в состоянии checked */
+  &__custom-check-box:checked + svg {
+    height: 22px;
+    width: 22px;
+    cursor: pointer;
+  }
 
-    /* стили для радиокнопки, находящейся в состоянии checked */
-    &__custom-check-box:checked + .checkmark::before {
-      border: none;
-      height: 22px;
-      width: 22px;
-      background-image: url('../assets/icons/check-mark.svg');
-      background-size: 100% 100%;
-      background-repeat: no-repeat;
-    }
+  &__custom-check-box:disabled:not(:checked) + .checkmark::before,
+  &__custom-check-box:disabled:checked + svg {
+    cursor: default;
   }
 }
 
@@ -448,7 +414,7 @@ html {
   &__content {
     background-color: $color-white;
     padding: 24px;
-    border: 1px solid rgba(85, 85, 85, 0.2);
+    border: 1px solid $border-color;
     border-radius: 3px;
     width: 320px;
 
@@ -482,7 +448,7 @@ html {
 .popup-content {
   width: 100%;
   height: 100%;
-  background: rgba(0, 0, 0, 0.3);
+  background: $popup-background;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -544,7 +510,7 @@ html {
         font-weight: 400;
         font-size: 12px;
         line-height: 16px;
-        color: rgba(17, 17, 17, 0.5);
+        color: $color-dark-gray;
       }
     }
   }
@@ -569,7 +535,7 @@ html {
       font-weight: 400;
       font-size: 12px;
       line-height: 16px;
-      color: rgba(17, 17, 17, 0.5);
+      color: $color-dark-gray;
     }
   }
 
@@ -643,7 +609,6 @@ html {
   display: flex;
   justify-content: center;
   flex-direction: column;
-  max-width: 200px;
   background-color: $color-white;
 
   &__icon {
@@ -710,7 +675,7 @@ html {
 
   &__field {
     padding: 12px 16px;
-    border: 1px solid rgba(0, 0, 0, 0.05);
+    border: 1px solid $color-lightest-gray;
     border-radius: 8px;
     font-weight: 400;
     font-size: 14px;
@@ -759,7 +724,7 @@ html {
   position: absolute;
   padding: 16px;
   box-sizing: border-box;
-  box-shadow: 2px 2px 6px rgb(0 0 0 / 60%);
+  box-shadow: 2px 2px 6px $box-shadow-dark-color;
   max-width: 330px;
   top: 45px;
   background-color: $color-white;
@@ -780,7 +745,7 @@ html {
     height: 40px;
     font-size: 18px;
     color: $color-white;
-    background-color: #cdf4ff;
+    background-color: $color-light-blue;
     text-decoration: none;
     white-space: nowrap;
     font-weight: 500;
@@ -845,14 +810,14 @@ html {
 .smartapp-switcher {
   &__instance {
     padding: 8px 16px;
-    background: rgba(0, 0, 0, 0.05);
+    background: $color-lightest-gray;
     border-radius: 4px;
     border: 0;
     font-weight: 700;
     font-size: 12px;
     line-height: 16px;
     letter-spacing: -0.01em;
-    color: rgba(0, 0, 0, 0.2);
+    color: $color-darker-gray-opacity;
     text-decoration: none;
     white-space: nowrap;
     box-sizing: border-box;
@@ -915,11 +880,11 @@ html {
   background: $color-lighter-gray;
   -webkit-transition: 0.2s;
   transition: 0.2s;
-  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 2px 2px $box-shadow-color;
 }
 
 input:checked + .smartapp-slider {
-  background: $color-light-blue;
+  background: $color-lighter-blue;
 }
 
 input:checked + .smartapp-slider:before {
@@ -927,7 +892,7 @@ input:checked + .smartapp-slider:before {
   -ms-transform: translateX(14px);
   transform: translateX(14px);
   background-color: $color-blue;
-  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 2px 2px $box-shadow-color;
 }
 
 .smartapp-slider.round {
@@ -937,3 +902,122 @@ input:checked + .smartapp-slider:before {
 .smartapp-slider.round:before {
   border-radius: 50%;
 }
+
+.smartapp-stories-content {
+  &::before {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: var(--background);
+    background-image: var(--background);
+    background-size: cover;
+    -webkit-filter: brightness(0.8) blur(15px);
+    filter: brightness(0.8) blur(15px);
+    -webkit-transform: scale(1.1, 1.1);
+    transform: scale(1.1, 1.1);
+  }
+}
+
+.smartapp-stories {
+  height: 100%;
+  position: relative;
+
+  &__web {
+    width: 400px;
+  }
+
+  &__ios, &__android {
+    width: 100%;
+  }
+
+  &__story {
+    color: $color-white;
+    padding-top: var(--padding);
+
+    &--title {
+      font-size: 24px;
+      font-weight: 700;
+      line-height: 33px;
+      margin-bottom: 24px;
+      padding: 0 24px;
+    }
+
+    &--body {
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 24px;
+      padding: 0 24px;
+    }
+
+    &--image {
+      display: flex;
+      justify-content: center;
+      margin-bottom: 32px;
+
+      img {
+        width: 100%;
+      }
+    }
+
+    &--button {
+      position: absolute;
+      bottom: 32px;
+      font-size: 14px;
+      font-weight: 600;
+      line-height: 19px;
+      text-align: center;
+      color: $color-black;
+      background: $color-white;
+      border-radius: 8px;
+      padding: 12px 32px;
+      cursor: pointer;
+      z-index: 1000;
+
+      &__web {
+        left: 24px;
+        right: 24px;
+      }
+
+      &__ios, &__android {
+        left: 16px;
+        right: 16px;
+      }
+    }
+  }
+
+  &__animate-right {
+    animation: slideInRight 0.5s;
+  }
+
+  &__animate-left {
+    animation: slideInLeft 0.5s;
+  }
+
+  &__icon {
+    position: absolute;
+    left: 16px;
+    z-index: 1000;
+    cursor: pointer;
+
+    &--web {
+      top: 12px;
+    }
+
+    &--ios {
+      top: 11px;
+    }
+
+    &--android {
+      top: 16px;
+    }
+  }
+}
+
+@media (min-width: 401px) {
+  .smartapp-stories__web > div > div:first-child {
+    max-width: calc(100% - 48px) !important;
+    padding-left: 24px !important;
+    padding-right: 24px !important;
+  }
+}