@kvell-group/ui 1.14.2 → 1.15.1

package/package.json

@@ -2,18 +2,15 @@
   "name": "@kvell-group/ui",
   "author": "Kvell Group",
   "private": false,
-  "version": "1.14.2",
+  "version": "1.15.1",
   "type": "module",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
   "files": [
-    "dist",
-    "README.md"
+    "src"
   ],
-  "exports": "./dist/main.js",
-  "module": "./dist/main.js",
-  "types": "./dist/main.d.ts",
   "scripts": {
     "storybook": "storybook dev -p 6006",
-    "build": "tsc -b && vite build",
     "semantic-release": "semantic-release",
     "lint": "eslint . --ext ts,tsx",
     "lint:fix": "eslint . --ext ts,tsx --fix",

package/src/assets/arrow-left.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.52334 9.1664H16.6667V10.8331H6.52334L10.9933 15.3031L9.81501 16.4814L3.33334 9.99973L9.81501 3.51807L10.9933 4.6964L6.52334 9.1664Z" fill="currentColor" fill-opacity="0.6" style="fill:#0F1324;fill:color(display-p3 0.0588 0.0745 0.1412);fill-opacity:0.6;"/>
+</svg>

package/src/assets/calendar.svg

@@ -0,0 +1,3 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.6667 2.49992H18C18.221 2.49992 18.433 2.58772 18.5892 2.744C18.7455 2.90028 18.8333 3.11224 18.8333 3.33325V16.6666C18.8333 16.8876 18.7455 17.0996 18.5892 17.2558C18.433 17.4121 18.221 17.4999 18 17.4999H2.99999C2.77898 17.4999 2.56701 17.4121 2.41073 17.2558C2.25445 17.0996 2.16666 16.8876 2.16666 16.6666V3.33325C2.16666 3.11224 2.25445 2.90028 2.41073 2.744C2.56701 2.58772 2.77898 2.49992 2.99999 2.49992H6.33332V0.833252H7.99999V2.49992H13V0.833252H14.6667V2.49992ZM13 4.16659H7.99999V5.83325H6.33332V4.16659H3.83332V7.49992H17.1667V4.16659H14.6667V5.83325H13V4.16659ZM17.1667 9.16658H3.83332V15.8333H17.1667V9.16658Z" fill="currentColor" fill-opacity="0.4" style="fill:#0D1126;fill:color(display-p3 0.0510 0.0667 0.1490);fill-opacity:0.4;"/>
+</svg>

package/src/assets/card-logos/maestro.svg

@@ -0,0 +1,8 @@
+<svg width="45" height="35" viewBox="0 0 45 35" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path d="M14.6493 32.7734V30.7309C14.6613 30.5591 14.6365 30.3867 14.5766 30.2252C14.5167 30.0638 14.423 29.9169 14.3019 29.7945C14.1808 29.6721 14.0349 29.5769 13.8741 29.5153C13.7133 29.4537 13.5412 29.4271 13.3693 29.4372C13.1443 29.4226 12.9195 29.4686 12.7183 29.5704C12.5172 29.6722 12.3469 29.826 12.2255 30.016C12.1148 29.8317 11.9564 29.6807 11.7671 29.5788C11.5778 29.477 11.3645 29.428 11.1497 29.4372C10.9625 29.4278 10.776 29.4675 10.6089 29.5523C10.4417 29.6371 10.2995 29.764 10.1965 29.9207V29.519H9.48839V32.7734H10.2033V30.9692C10.1878 30.8579 10.1972 30.7445 10.2308 30.6372C10.2643 30.5299 10.3213 30.4314 10.3974 30.3488C10.4736 30.2661 10.5671 30.2013 10.6713 30.1591C10.7754 30.1169 10.8877 30.0982 10.9999 30.1045C11.4697 30.1045 11.708 30.4109 11.708 30.9624V32.7734H12.4229V30.9692C12.4086 30.8581 12.4188 30.7452 12.4528 30.6384C12.4868 30.5316 12.5438 30.4336 12.6197 30.3512C12.6956 30.2688 12.7887 30.204 12.8923 30.1614C12.9959 30.1188 13.1076 30.0994 13.2195 30.1045C13.7029 30.1045 13.9344 30.4109 13.9344 30.9624V32.7734H14.6493ZM18.6392 31.1462V29.519H17.931V29.9138C17.8102 29.7581 17.6538 29.6335 17.4749 29.5506C17.296 29.4677 17.0999 29.4288 16.9029 29.4372C16.4642 29.4588 16.0505 29.6482 15.7476 29.9663C15.4447 30.2845 15.2757 30.7069 15.2757 31.1462C15.2757 31.5855 15.4447 32.008 15.7476 32.3261C16.0505 32.6442 16.4642 32.8337 16.9029 32.8552C17.0999 32.8636 17.296 32.8247 17.4749 32.7418C17.6538 32.6589 17.8102 32.5343 17.931 32.3786V32.7734H18.6392V31.1462ZM16.0042 31.1462C16.0152 30.9541 16.0822 30.7695 16.1969 30.6151C16.3115 30.4606 16.4689 30.3431 16.6495 30.277C16.8302 30.2109 17.0262 30.1992 17.2135 30.2432C17.4007 30.2872 17.571 30.385 17.7033 30.5246C17.8356 30.6643 17.9242 30.8396 17.9581 31.0289C17.992 31.2182 17.9697 31.4134 17.894 31.5902C17.8183 31.767 17.6925 31.9179 17.5321 32.0241C17.3718 32.1303 17.1838 32.1872 16.9914 32.1879C16.8566 32.1897 16.7229 32.1636 16.5987 32.1111C16.4745 32.0587 16.3624 31.9811 16.2697 31.8833C16.1769 31.7854 16.1055 31.6694 16.0598 31.5425C16.0141 31.4156 15.9952 31.2807 16.0042 31.1462ZM33.7906 29.4334C34.0297 29.4311 34.267 29.4756 34.489 29.5643C34.696 29.6469 34.8848 29.7693 35.0446 29.9245C35.2019 30.0788 35.3267 30.2631 35.4116 30.4665C35.5885 30.9024 35.5885 31.39 35.4116 31.8258C35.3268 32.0293 35.202 32.2136 35.0446 32.368C34.8848 32.5232 34.696 32.6456 34.489 32.7281C34.0398 32.9027 33.5415 32.9027 33.0922 32.7281C32.8856 32.6458 32.6974 32.5234 32.5383 32.368C32.3819 32.2132 32.2577 32.0289 32.173 31.8258C31.9963 31.3899 31.9963 30.9024 32.173 30.4665C32.2577 30.2635 32.3819 30.0793 32.5383 29.9245C32.6974 29.7691 32.8856 29.6466 33.0922 29.5643C33.3143 29.4756 33.5515 29.4311 33.7906 29.4334ZM33.7906 30.1029C33.6521 30.1017 33.5148 30.1277 33.3863 30.1794C33.2652 30.228 33.1553 30.3008 33.0635 30.3934C32.9709 30.4881 32.8981 30.6001 32.8493 30.7232C32.7451 30.9956 32.7451 31.2969 32.8493 31.5694C32.8981 31.6924 32.9709 31.8044 33.0635 31.899C33.1553 31.9916 33.2652 32.0645 33.3863 32.1131C33.6462 32.215 33.9351 32.215 34.195 32.1131C34.3165 32.0642 34.4268 31.9914 34.5196 31.899C34.6129 31.8047 34.6864 31.6926 34.7354 31.5694C34.8397 31.2969 34.8397 30.9956 34.7354 30.7232C34.6863 30.5999 34.6129 30.4877 34.5196 30.3934C34.4268 30.3011 34.3164 30.2283 34.195 30.1794C34.0665 30.1277 33.9291 30.1017 33.7906 30.1029ZM22.4922 31.1462C22.4854 30.1317 21.859 29.4372 20.9467 29.4372C20.505 29.4604 20.0895 29.6537 19.7874 29.9766C19.4852 30.2995 19.3199 30.7269 19.326 31.1691C19.3322 31.6113 19.5094 32.0339 19.8204 32.3483C20.1315 32.6627 20.5522 32.8443 20.9943 32.8552C21.4801 32.8722 21.9551 32.7098 22.3288 32.399L21.9816 31.8747C21.7127 32.0902 21.3797 32.2099 21.0352 32.2151C20.8012 32.2348 20.5687 32.1627 20.387 32.014C20.2053 31.8653 20.0885 31.6518 20.0615 31.4185H22.4786C22.4854 31.33 22.4922 31.2416 22.4922 31.1462ZM20.0683 30.8602C20.0808 30.6417 20.1782 30.4368 20.3398 30.2892C20.5014 30.1416 20.7143 30.0631 20.933 30.0705C21.1469 30.0663 21.3537 30.1471 21.5081 30.2951C21.6626 30.4432 21.752 30.6464 21.7569 30.8602H20.0683ZM25.4742 30.3496C25.1653 30.1719 24.8161 30.0758 24.4598 30.0705C24.0716 30.0705 23.8402 30.2134 23.8402 30.4518C23.8402 30.6697 24.0852 30.7309 24.3917 30.7717L24.7253 30.8194C25.4334 30.9215 25.8623 31.2211 25.8623 31.793C25.8623 32.4126 25.3176 32.8552 24.378 32.8552C23.8751 32.8691 23.3811 32.7211 22.9687 32.433L23.3023 31.8815C23.6147 32.1132 23.996 32.2331 24.3849 32.222C24.8682 32.222 25.127 32.079 25.127 31.827C25.127 31.6432 24.9431 31.5411 24.5551 31.4866L24.2214 31.439C23.4929 31.3368 23.098 31.01 23.098 30.4789C23.098 29.8321 23.6291 29.4372 24.4529 29.4372C24.919 29.4212 25.3798 29.5393 25.7806 29.7777L25.4742 30.3496ZM28.8766 30.1658H27.7192V31.6365C27.7192 31.9632 27.8349 32.1811 28.189 32.1811C28.41 32.1738 28.6255 32.1106 28.8154 31.9973L29.0196 32.6033C28.7541 32.7688 28.4474 32.8561 28.1345 32.8552C27.2971 32.8552 27.0043 32.4058 27.0043 31.65V30.1658H26.3438V29.519H27.0043L27.0041 28.5317H27.719L27.7192 29.519H28.8766V30.1658ZM31.3272 29.4372C31.4989 29.4379 31.6693 29.4679 31.8311 29.5258L31.6132 30.193C31.4724 30.137 31.3221 30.1092 31.1706 30.1113C30.7076 30.1113 30.4761 30.4109 30.4761 30.9487V32.7734H29.768V29.519H30.4693V29.9138C30.5562 29.7646 30.6818 29.6415 30.8327 29.5576C30.9837 29.4737 31.1545 29.4321 31.3272 29.4372ZM36.2293 32.2997C36.2734 32.2994 36.317 32.3081 36.3576 32.3251C36.3966 32.3414 36.4322 32.365 36.4624 32.3946C36.4924 32.4241 36.5163 32.4592 36.533 32.4978C36.55 32.5375 36.5588 32.5802 36.5588 32.6234C36.5588 32.6666 36.55 32.7094 36.533 32.7491C36.5162 32.7875 36.4923 32.8224 36.4624 32.8519C36.4321 32.8815 36.3966 32.9051 36.3576 32.9217C36.3171 32.939 36.2734 32.9478 36.2293 32.9475C36.1645 32.9482 36.1009 32.9297 36.0464 32.8944C35.992 32.8591 35.9492 32.8086 35.9233 32.7491C35.9063 32.7094 35.8976 32.6666 35.8976 32.6234C35.8976 32.5803 35.9063 32.5375 35.9233 32.4978C35.9399 32.4592 35.9638 32.4242 35.9936 32.3946C36.0238 32.3648 36.0595 32.3412 36.0988 32.3251C36.1402 32.308 36.1846 32.2994 36.2293 32.2997ZM36.2293 32.8761C36.2629 32.8763 36.2962 32.8696 36.327 32.8562C36.3566 32.8434 36.3836 32.8251 36.4064 32.8023C36.4356 32.7731 36.4573 32.7372 36.4694 32.6977C36.4815 32.6582 36.4838 32.6163 36.476 32.5758C36.4681 32.5352 36.4504 32.4972 36.4245 32.465C36.3985 32.4329 36.3651 32.4076 36.327 32.3915C36.2962 32.3783 36.2629 32.3717 36.2293 32.372C36.1952 32.3717 36.1613 32.3783 36.1297 32.3915C36.0996 32.4038 36.0723 32.422 36.0492 32.4449C36.0021 32.4925 35.9757 32.5567 35.9757 32.6236C35.9757 32.6905 36.0021 32.7547 36.0492 32.8023C36.0729 32.8258 36.101 32.8445 36.1319 32.8571C36.1628 32.8698 36.1959 32.8762 36.2293 32.8761ZM36.2484 32.4719C36.2803 32.4699 36.3119 32.479 36.3378 32.4978C36.3481 32.5063 36.3563 32.5171 36.3617 32.5292C36.3671 32.5414 36.3697 32.5547 36.3691 32.5681C36.3695 32.5795 36.3674 32.5908 36.3631 32.6014C36.3588 32.612 36.3523 32.6216 36.3441 32.6295C36.3244 32.6471 36.2994 32.6575 36.273 32.6593L36.3715 32.7728H36.2945L36.2032 32.6601H36.1738V32.7728H36.1095V32.4719H36.2484ZM36.1738 32.5284V32.6086H36.2477C36.2618 32.6093 36.2759 32.6058 36.2882 32.5986C36.2931 32.5952 36.2971 32.5907 36.2998 32.5853C36.3024 32.58 36.3036 32.574 36.3032 32.5681C36.3035 32.5622 36.3023 32.5564 36.2997 32.5511C36.297 32.5459 36.2931 32.5414 36.2882 32.5382C36.2759 32.5311 36.2618 32.5277 36.2477 32.5284H36.1738Z" fill="currentColor"/>
+  <path d="M17.8127 14.3288C17.811 12.4703 18.2321 10.6357 19.0443 8.96395C19.8564 7.29221 21.0383 5.82714 22.5003 4.67967C20.6898 3.25654 18.5154 2.37152 16.2256 2.12576C13.9358 1.88 11.6231 2.28342 9.55182 3.2899C7.4805 4.29639 5.73415 5.86534 4.51236 7.81741C3.29058 9.76949 2.64265 12.0259 2.64265 14.3288C2.64265 16.6317 3.29058 18.8882 4.51236 20.8403C5.73415 22.7924 7.4805 24.3613 9.55182 25.3678C11.6231 26.3743 13.9358 26.7777 16.2256 26.5319C18.5154 26.2862 20.6898 25.4011 22.5003 23.978C21.0383 22.8305 19.8564 21.3655 19.0443 19.6937C18.2321 18.022 17.811 16.1874 17.8127 14.3288Z" fill="currentColor"/>
+  <path d="M41.1864 21.9339V21.5388H41.3457V21.4583H40.94V21.5388H41.0994V21.9339H41.1864ZM41.9741 21.9339V21.4575H41.8497L41.7067 21.7852L41.5636 21.4575H41.4392V21.9339H41.527V21.5746L41.6612 21.8843H41.7522L41.8864 21.5738V21.9339H41.9741Z" fill="currentColor"/>
+  <path d="M42.3573 14.3288C42.3574 16.6317 41.7096 18.8882 40.4879 20.8402C39.2661 22.7923 37.5198 24.3613 35.4486 25.3678C33.3773 26.3743 31.0646 26.7777 28.7749 26.5319C26.4852 26.2862 24.3108 25.4011 22.5003 23.978C23.9611 22.8294 25.142 21.3641 25.954 19.6926C26.766 18.0211 27.1879 16.1871 27.1879 14.3288C27.1879 12.4706 26.766 10.6366 25.954 8.96508C25.142 7.2936 23.9611 5.8283 22.5003 4.67967C24.3108 3.25654 26.4852 2.37151 28.7749 2.12576C31.0646 1.88 33.3773 2.28342 35.4486 3.28992C37.5198 4.29642 39.2661 5.86537 40.4879 7.81745C41.7096 9.76953 42.3574 12.026 42.3573 14.3288Z" fill="currentColor"/>
+  <path d="M17.8127 14.3289C17.811 12.4703 18.2322 10.6357 19.0443 8.96401C19.8564 7.2922 21.0383 5.82713 22.5003 4.67969C23.9611 5.8283 25.142 7.2937 25.954 8.96518C26.766 10.6367 27.1879 12.4706 27.1879 14.3289C27.1879 16.1871 26.766 18.0212 25.954 19.6927C25.142 21.364 23.9611 22.8294 22.5003 23.978C21.0383 22.8306 19.8564 21.3655 19.0443 19.6937C18.2322 18.0221 17.811 16.1875 17.8127 14.3289Z" fill="currentColor"/>
+</svg>

package/src/assets/card-logos/mastercard.svg

@@ -0,0 +1,5 @@
+<svg width="45" height="35" viewBox="0 0 50 43" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <circle cx="17" cy="22" r="15" fill="currentColor" fill-opacity="0.8"/>
+  <circle cx="32" cy="22" r="15" fill="currentColor" fill-opacity="0.5"/>
+</svg>

package/src/assets/card-logos/mir.svg

@@ -0,0 +1,10 @@
+<svg width="37" height="20" viewBox="0 0 37 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.29004 5.67903H6.26004C6.53004 5.67903 7.34004 5.5871 7.70004 6.87419C7.97004 7.70161 8.33004 8.98871 8.87004 10.9194H9.05004C9.59004 8.89678 10.04 7.51774 10.22 6.87419C10.58 5.5871 11.48 5.67903 11.84 5.67903H14.63V14.5048H11.75V9.26452H11.57L10.04 14.5048H7.88004L6.35004 9.26452H6.08004V14.5048H3.29004M15.8 5.67903H18.68V10.9194H18.95L20.84 6.59839C21.2 5.77097 22.01 5.67903 22.01 5.67903H24.71V14.5048H21.83V9.26452H21.65L19.76 13.5855C19.4 14.4129 18.5 14.5048 18.5 14.5048H15.8M28.58 11.8387V14.5048H25.88V9.90807H34.7C34.34 11.0113 33.08 11.8387 31.64 11.8387" fill="currentColor" fill-opacity="0.4" style="fill:#0D1126;fill:color(display-p3 0.0510 0.0667 0.1490);fill-opacity:0.4;"/>
+<path d="M34.8802 9.35645C35.2402 7.70161 34.1602 5.67903 31.8202 5.67903H25.7002C25.8802 7.60968 27.5002 9.35645 29.2102 9.35645" fill="url(#paint0_linear_211_34894)" style=""/>
+<defs>
+<linearGradient id="paint0_linear_211_34894" x1="33.8002" y1="4.48387" x2="26.6002" y2="4.48387" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1F5CD7" style="stop-color:#1F5CD7;stop-color:color(display-p3 0.1216 0.3608 0.8431);stop-opacity:1;"/>
+<stop offset="1" stop-color="#02AEFF" style="stop-color:#02AEFF;stop-color:color(display-p3 0.0078 0.6824 1.0000);stop-opacity:1;"/>
+</linearGradient>
+</defs>
+</svg>

package/src/assets/card-logos/unionpay.svg

@@ -0,0 +1,4 @@
+<svg width="45" height="35" viewBox="0 0 50 43" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M21.1265 7.00175C21.1619 7.00059 21.1973 7 21.2327 7H47.4951C49.2396 7 50.3231 8.41995 49.9134 10.1678L44.104 35.1137C43.6939 36.8555 41.9485 38.2767 40.2043 38.2767H15.0894C15.054 38.2779 15.0186 38.2784 14.9832 38.2784H2.50446C0.764809 38.2784 -0.321146 36.8573 0.0852511 35.1155L5.89799 10.1696C6.30439 8.4217 8.0477 7.00175 9.79191 7.00175H21.1265ZM10.8062 14.8351C10.9273 14.8637 11.3063 14.8767 12.5897 14.8637C12.5824 14.8752 12.5797 14.8878 12.5749 14.9095C12.5743 14.9123 12.5736 14.9153 12.5729 14.9184C12.4138 15.4103 11.4776 19.1913 11.4776 19.1913L11.3729 19.5987L11.3722 19.6013C11.1466 20.3946 10.893 21.2866 9.9268 21.8576C9.36953 22.1986 8.54487 22.3853 7.66576 22.3853C6.98347 22.3853 5.77736 22.2746 5.35454 21.5357C5.22252 21.3027 5.15621 21.0271 5.15621 20.6895L5.31043 19.5512L5.39013 19.2032L6.31821 15.1C6.31821 15.1 6.36201 14.8743 6.37388 14.8351C6.39547 14.8637 6.70909 14.8792 8.47825 14.8637C8.47612 14.8767 8.47369 14.891 8.46517 14.9184C8.30243 15.3996 7.39352 19.0402 7.39352 19.0402C7.39352 19.0463 7.22013 20.1289 7.22013 20.1289L7.23077 20.3129C7.28644 20.8489 7.61801 21.1315 8.18714 21.1315C8.54122 21.1315 8.84662 21.0271 9.10823 20.8109C9.56907 20.4388 9.70474 19.8627 9.89121 19.0545C9.89121 19.0545 10.7597 15.0562 10.8062 14.8351ZM14.7667 18.1502C15.1372 17.9686 15.5496 17.9139 15.7753 17.9139C16.1212 17.9139 16.4978 18.01 16.6548 18.4082C16.8032 18.7635 16.7046 19.1997 16.5084 20.0599L16.4074 20.4995C16.2067 21.4562 16.1735 21.632 16.0604 22.289L15.9868 22.3459C15.3607 22.3353 15.1372 22.3353 14.4041 22.3745L14.3767 22.3185C14.407 22.1837 14.4387 22.0502 14.4705 21.9164C14.5047 21.7722 14.539 21.6277 14.5717 21.4811L14.662 21.0984C14.7974 20.5056 14.9294 19.8151 14.9449 19.6036C14.9452 19.6008 14.9456 19.5978 14.9459 19.5947C14.9607 19.4634 14.9947 19.1617 14.6407 19.1617C14.4886 19.1617 14.3292 19.2353 14.1677 19.3101C14.0984 19.5591 13.9731 20.1628 13.8813 20.6054C13.8565 20.7245 13.8342 20.832 13.8161 20.9177C13.6831 21.5403 13.6417 21.7606 13.5969 21.9982C13.5804 22.0858 13.5635 22.1757 13.5414 22.289L13.4891 22.3459C12.8427 22.3353 12.617 22.3353 11.8732 22.3745L11.8398 22.3103C11.9636 21.8054 12.0871 21.2943 12.206 20.7882C12.5184 19.4147 12.5932 18.8894 12.6775 18.1907L12.7383 18.1502C12.7858 18.1435 12.8309 18.1372 12.874 18.1312C13.4897 18.0446 13.6913 18.0163 14.4257 17.8676L14.492 17.9413L14.3709 18.3784C14.4018 18.3601 14.4324 18.3418 14.4627 18.3236C14.564 18.2628 14.6632 18.2034 14.7667 18.1502ZM19.2051 18.8394C19.2464 18.8314 19.2893 18.8232 19.3341 18.8146L19.3484 18.8477L19.3591 18.8836C19.3274 19.0156 19.295 19.1477 19.2625 19.2803C19.222 19.4457 19.1812 19.6119 19.1416 19.7794C19.1095 19.9207 19.0763 20.0604 19.0433 20.1995C19.0055 20.3586 18.968 20.5168 18.9326 20.6753C18.8756 20.9319 18.8324 21.1233 18.7989 21.2717C18.7499 21.4887 18.7217 21.6134 18.702 21.715C18.6817 21.8115 18.6707 21.8818 18.6531 21.9948C18.6415 22.0684 18.6272 22.1601 18.6056 22.289L18.57 22.3188L18.5368 22.3459C18.4146 22.3452 18.3063 22.3438 18.2077 22.3426C18.0007 22.34 17.8367 22.338 17.6766 22.3437C17.4602 22.3457 17.2492 22.3558 16.9458 22.3703C16.9172 22.3716 16.8879 22.373 16.8577 22.3745L16.8389 22.3437L16.8163 22.3103C16.9006 21.9928 16.9512 21.8568 16.9944 21.7408C17.0004 21.7244 17.0064 21.7085 17.0122 21.6925C17.0609 21.5629 17.105 21.4345 17.1905 21.0662C17.3009 20.5849 17.3687 20.25 17.4129 19.9553C17.4512 19.7454 17.4761 19.5586 17.5022 19.3627C17.5116 19.2926 17.5211 19.2213 17.5315 19.1473L17.5589 19.1257L17.5887 19.0987C17.9653 19.0463 18.2041 19.0108 18.4489 18.9715C18.6675 18.943 18.8873 18.9006 19.2051 18.8394ZM17.9486 17.7462C18.3669 17.4575 18.9883 17.3912 19.3424 17.6002C19.6916 17.807 19.6396 18.2049 19.2235 18.4939C18.8089 18.785 18.185 18.8455 17.837 18.6423C17.4841 18.4306 17.5316 18.0291 17.9486 17.7462ZM23.4871 21.6567C22.9344 22.2425 22.2001 22.44 21.4838 22.44C21.2033 22.44 20.7683 22.4044 20.4665 22.2748C19.4886 21.879 19.6443 20.8156 19.7797 20.2249C19.9138 19.6451 20.1362 19.0403 20.6174 18.5947C21.2875 17.9769 22.1454 17.9413 22.5055 17.9413C23.1045 17.9413 23.6818 18.0755 24.0085 18.4937C24.2236 18.7681 24.3948 19.2186 24.1749 20.1835C24.1074 20.4746 23.9124 21.1815 23.4871 21.6567ZM22.2856 18.9251C21.7879 18.9251 21.593 19.5383 21.4278 20.269C21.3709 20.5221 21.3244 20.7551 21.3268 20.9832C21.3317 21.4453 21.6428 21.4453 21.6952 21.4453C21.871 21.4453 22.0301 21.33 22.1645 21.1399C22.3571 20.8822 22.4994 20.2772 22.5305 20.1144C22.7039 19.3813 22.6756 18.9251 22.2856 18.9251ZM26.0216 22.2891L25.9657 22.346C25.3205 22.3354 25.0981 22.3354 24.3532 22.3746L24.32 22.3104C24.4435 21.8055 24.567 21.2944 24.6859 20.7882C24.9983 19.4145 25.0698 18.8895 25.1577 18.1908L25.2134 18.1503C25.2673 18.1427 25.3182 18.1356 25.3665 18.1288C25.9683 18.0442 26.1762 18.015 26.9032 17.8674L26.9637 17.9413L26.8509 18.3785C26.9804 18.2988 27.1125 18.2194 27.2442 18.1503C27.6125 17.9684 28.0272 17.914 28.2532 17.914C28.5942 17.914 28.9732 18.0101 29.1347 18.4083C29.2807 18.7636 29.1809 19.1995 28.9838 20.0597L28.8853 20.4996C28.6784 21.4559 28.6486 21.6318 28.5382 22.2891L28.4621 22.346C27.8325 22.3354 27.6174 22.3354 26.8819 22.3746L26.8545 22.3186C26.8893 22.1637 26.9266 22.0106 26.964 21.8569C26.9944 21.7324 27.0248 21.6075 27.0541 21.4809L27.1395 21.0982C27.2773 20.5054 27.4093 19.8151 27.4224 19.6034L27.4233 19.5955C27.4383 19.4647 27.4731 19.1614 27.1207 19.1614C26.9656 19.1614 26.8107 19.2333 26.651 19.3075L26.6452 19.3102C26.5818 19.5449 26.4651 20.0947 26.3733 20.5276C26.3414 20.6778 26.3126 20.8138 26.2899 20.9178C26.1534 21.5791 26.115 21.7866 26.0675 22.0432C26.0538 22.1171 26.0394 22.1951 26.0216 22.2891ZM31.6931 20.8109C31.6931 20.8109 31.416 22.1487 31.3697 22.3744C31.1653 22.3519 30.6795 22.3519 29.4947 22.3662L30.7127 17.3508L31.1988 15.0943C31.1988 15.0943 31.2344 14.9185 31.2532 14.8196C31.4768 14.847 32.021 14.8519 33.378 14.8351L33.9006 14.8303C34.9607 14.8351 35.879 14.847 36.3402 15.4922C36.5221 15.7346 36.585 16.0449 36.585 16.3585C36.585 16.5973 36.5492 16.8361 36.5005 17.0368C36.3128 17.8557 35.8921 18.5295 35.2767 18.9858C34.3724 19.651 33.2186 19.651 32.1968 19.651H32.0885C32.0149 19.6915 31.9413 19.7937 31.9413 19.7937C31.927 19.8293 31.6931 20.8109 31.6931 20.8109ZM32.7848 16.1328C32.7873 16.1243 32.2704 18.3725 32.2704 18.3725L32.2491 18.4854H32.5296C32.9631 18.4854 33.3838 18.4711 33.7272 18.2989C34.1442 18.0957 34.4688 17.675 34.5792 17.1746C34.7003 16.6271 34.5269 16.2076 34.1062 16.0449C34.0813 16.0424 33.0154 15.9509 33.0154 15.9509L32.8088 15.9296L32.8015 16.0175L32.7848 16.1328ZM36.1678 22.3353C35.1947 21.9563 35.3517 20.8928 35.4883 20.3106C35.6179 19.733 35.846 19.1307 36.3211 18.6911C36.9973 18.0754 37.784 17.9057 38.1189 18.0374C38.3808 18.1381 38.5505 18.2996 38.6676 18.4888C38.6713 18.4601 38.675 18.4314 38.6788 18.4023C38.6827 18.3727 38.6866 18.3427 38.6905 18.3121L38.7476 18.2656C39.5008 18.1588 39.7101 18.1278 40.4931 17.9827L40.5156 18.0481C40.3717 18.6421 40.2318 19.2329 40.0915 19.8294C39.8149 21.0266 39.7078 21.6571 39.6015 22.2824L39.5887 22.3578L39.52 22.4101C38.7616 22.4043 38.5444 22.4043 37.8445 22.4338L37.8004 22.377L37.8698 22.1111C37.6136 22.3265 37.3371 22.4761 37.0387 22.4923C36.7561 22.5065 36.4781 22.4673 36.1678 22.3353ZM37.9917 19.0215C37.4929 19.0215 37.3003 19.6286 37.1327 20.3462C37.0746 20.6017 37.0281 20.8344 37.0305 21.0604C37.0411 21.5143 37.349 21.5143 37.3989 21.5143C37.5747 21.5143 37.8801 21.4014 38.0085 21.2195C38.0769 21.1286 38.1393 20.992 38.1928 20.8472C38.2061 20.7938 38.2195 20.7403 38.2329 20.6869C38.2725 20.5286 38.3122 20.3702 38.3495 20.2108C38.3838 20.0633 38.4127 19.9328 38.4395 19.809C38.4733 19.3126 38.3072 19.0215 37.9917 19.0215ZM45.6596 17.9078L45.7201 17.9768C45.7201 17.9768 42.601 23.3275 42.1909 24.2103L42.1267 24.2839H42.1365L41.5269 25.3285C41.3343 25.6862 40.9766 25.9524 40.4075 25.9548L39.438 25.9381L39.7206 24.9981H39.9107C40.0096 24.9981 40.0808 24.9933 40.1355 24.9662C40.1854 24.9495 40.221 24.9102 40.2602 24.853L40.6034 24.3104L40.6 24.3031C40.8837 23.8762 41.0429 23.5907 41.2263 23.2618C41.3579 23.0259 41.5019 22.7675 41.7133 22.4186C41.6375 21.6334 41.5962 21.2947 41.5411 20.8436C41.5306 20.7573 41.5196 20.6669 41.5077 20.5685C41.4863 20.3895 41.4614 20.2089 41.4364 20.0277C41.4103 19.8382 41.3841 19.6481 41.3617 19.4585C41.3418 19.2988 41.3272 19.1776 41.3155 19.0812C41.272 18.7219 41.2704 18.7085 41.1965 18.3309L41.1917 18.3203C41.1934 18.3098 41.1945 18.2996 41.1956 18.2897C41.1975 18.2715 41.1994 18.2543 41.2047 18.2381L41.2631 18.1858C41.8082 18.1159 41.967 18.0837 42.3253 18.0109C42.4596 17.9836 42.622 17.9506 42.8434 17.9078L42.9112 17.9768L43.0192 20.0633C43.0204 20.086 43.021 20.1041 43.0216 20.1218C43.0222 20.1404 43.0228 20.1585 43.0241 20.181C43.2204 19.7429 43.3242 19.5588 43.429 19.373C43.5543 19.1507 43.6811 18.9257 43.9698 18.2597L43.9722 18.2716C43.9743 18.2648 43.9759 18.2575 43.9774 18.251C43.9785 18.2462 43.9794 18.2417 43.9805 18.2381L44.0328 18.1858C44.7446 18.0897 44.8848 18.0648 45.6596 17.9078ZM35.077 30.3216H35.4882L35.1697 31.361H34.7634L34.6672 31.6819H33.2187L33.3172 31.361H30.3776L30.6711 30.3985H30.9704L32.513 25.287L32.8205 24.2567H34.2964L34.1419 24.7759C34.1419 24.7759 34.5352 24.493 34.9085 24.3969C35.2169 24.3148 36.7403 24.2764 37.2504 24.2658V24.2628H38.8282L38.8437 24.8495C38.8331 24.9493 38.9186 24.9958 39.1029 24.9958H39.4235L39.1303 25.9653H38.2783C37.5415 26.0176 37.261 25.7016 37.2799 25.3451L37.2644 24.7683L37.1041 25.287H36.5991L35.077 30.3216ZM33.6059 26.5737C33.6059 26.5737 34.0458 26.3753 34.2821 26.3099C34.5246 26.2458 34.8869 26.2245 34.8869 26.2245L35.1697 25.287H33.9971L33.6059 26.5737ZM33.6938 28.2491C33.9363 28.1944 34.3046 28.1482 34.3046 28.1482L34.59 27.2106H33.4112L33.0073 28.5497C33.0073 28.5497 33.455 28.3215 33.6938 28.2491ZM32.4713 30.3334H33.6476L33.9849 29.2034H32.8123L32.4713 30.3334ZM38.1759 27.2106H36.4804L36.7691 26.2375H41.4876L41.1941 27.2106H39.6114L39.3641 27.9997H40.9516L40.6879 28.8624H38.9732L38.6678 29.2259H39.3641L39.5341 30.3131C39.5391 30.3413 39.5428 30.3671 39.5462 30.3905C39.5557 30.4568 39.5626 30.5046 39.5889 30.5388C39.6245 30.5768 39.8335 30.5972 39.9548 30.5972H40.1662L39.8444 31.6545H39.3084C39.2358 31.6545 39.1307 31.65 38.9891 31.6439L38.9318 31.6415C38.8134 31.6311 38.7206 31.5765 38.6359 31.5266C38.6067 31.5094 38.5784 31.4928 38.5504 31.4787C38.4515 31.4325 38.3055 31.3135 38.2699 31.1103L38.1023 30.0256L37.3218 31.0939C37.0745 31.4325 36.7395 31.6904 36.1725 31.6904H35.0817L35.3683 30.7456H35.7853C35.9064 30.7456 36.011 30.6982 36.0907 30.6577C36.1701 30.6246 36.2416 30.5829 36.3213 30.4652L37.4596 28.8624H35.9563L36.2142 27.9997H37.9323L38.1759 27.2106ZM22.5555 29.2366L22.1597 30.5532C22.1123 30.6983 22.5469 30.7171 22.7039 30.7171L23.5167 30.6055L23.19 31.6902H21.3564C21.2079 31.6902 21.0987 31.6689 20.9393 31.6333C20.7848 31.5941 20.716 31.525 20.6482 31.4207C20.6377 31.4038 20.6263 31.3873 20.6147 31.3707C20.5532 31.2823 20.4885 31.1893 20.5484 30.9951L21.0759 29.2534H20.1718L20.4724 28.2575H21.3792L21.6204 27.4471H20.716L21.0047 26.4989H24.9853L24.6906 27.4471H23.0997L22.8511 28.2575H24.4792L24.182 29.2366H22.5555ZM21.9341 24.9957L22.3463 24.2507H23.967L23.682 24.7925H25.3146L25.0186 25.7848H22.7883L22.547 25.9937C22.4855 26.0531 22.4479 26.0633 22.3998 26.0763C22.3661 26.0854 22.3273 26.0959 22.2714 26.1258C22.1455 26.1887 21.8818 26.3147 21.5384 26.3147H20.8241L21.1116 25.3616H21.3266C21.5073 25.3616 21.632 25.3452 21.695 25.306C21.7665 25.2594 21.8459 25.1584 21.9341 24.9957ZM25.6864 30.2204C25.6283 30.4211 25.6009 30.5175 25.6389 30.5723C25.6697 30.6185 25.7436 30.6733 25.8458 30.6733L26.8022 30.5829L26.4742 31.6902H25.4059C25.0649 31.6902 24.8179 31.682 24.6442 31.6689C24.6085 31.6658 24.5725 31.6641 24.5368 31.6623C24.4072 31.656 24.2817 31.6499 24.1904 31.581C24.1789 31.5708 24.1667 31.5601 24.1541 31.5492C24.0585 31.4659 23.9402 31.3629 23.9434 31.2589C23.954 31.1496 24.0003 30.9677 24.0693 30.7171L26.0155 24.2625H27.4057L27.2025 24.9624C27.2025 24.9624 27.6423 24.6108 27.9502 24.4849C28.2553 24.372 28.9482 24.2698 28.9482 24.2698L31.1986 24.2567L30.4323 26.8101C30.3028 27.2463 30.1519 27.5292 30.0579 27.6585C29.9736 27.7881 29.8739 27.9009 29.6789 28.008C29.49 28.1102 29.3166 28.1671 29.1572 28.1838C29.0087 28.1945 28.7806 28.1981 28.4645 28.2027H26.296L25.6864 30.2204ZM28.9671 26.8399H26.6893L26.5491 27.2986H28.5214C28.6775 27.2802 28.7506 27.2892 28.7879 27.2938C28.8059 27.296 28.8156 27.2972 28.8223 27.2938L28.9671 26.8399ZM29.4425 25.3177H27.1456L26.8128 26.4253C26.8128 26.4253 27.2584 26.0177 28.0213 25.8857C28.1947 25.8537 29.2773 25.8644 29.2773 25.8644L29.4425 25.3177ZM28.7829 28.9538C28.8246 28.9228 28.8544 28.8814 28.8733 28.8136L29.0086 28.381H30.0699L29.9404 28.9943C29.8856 29.1868 29.8381 29.3292 29.693 29.453C29.541 29.5823 29.3627 29.7179 28.9457 29.7179L28.1733 29.7499L28.1675 30.4425C28.1607 30.5986 28.1929 30.6176 28.2219 30.6348C28.2292 30.6391 28.2362 30.6432 28.2424 30.6493C28.277 30.684 28.3082 30.6973 28.3407 30.7112L28.3434 30.7123L28.5882 30.698L29.3247 30.6576L29.0193 31.669H28.1733C27.5817 31.669 27.1421 31.6547 26.9995 31.5418C26.8568 31.4515 26.8379 31.3386 26.8401 31.1437L26.8948 28.4415H28.2448L28.2256 28.9943H28.5502C28.6618 28.9943 28.7367 28.9836 28.7829 28.9538Z" fill="currentColor"/>
+</svg>

package/src/assets/card-logos/visa-electron.svg

@@ -0,0 +1,12 @@
+<svg width="45" height="35" viewBox="0 0 45 35" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path d="M21.9464 9.22964L19.2549 21.8117H15.9996L18.6911 9.22964H21.9464ZM35.6404 17.354L37.3545 12.629L38.3391 17.354H35.6404ZM39.274 21.8117H42.2837L39.6542 9.22964H36.8773C36.251 9.22964 35.7248 9.59308 35.4912 10.152L30.6067 21.8117H34.0251L34.7031 19.9323H38.8795L39.274 21.8117ZM30.7765 17.7038C30.7901 14.3837 26.1857 14.1995 26.2158 12.7159C26.2269 12.265 26.6564 11.7848 27.5968 11.6621C28.0626 11.6019 29.3495 11.5538 30.8071 12.2254L31.3773 9.55579C30.5941 9.27259 29.5864 8.99995 28.3327 8.99995C25.1147 8.99995 22.851 10.7091 22.833 13.1586C22.8119 14.9704 24.4498 15.9802 25.6816 16.5836C26.9504 17.1999 27.3759 17.596 27.37 18.1467C27.361 18.9909 26.3568 19.3646 25.4231 19.3785C23.7859 19.4045 22.8368 18.9361 22.0798 18.5835L21.489 21.3416C22.2506 21.6906 23.6543 21.9938 25.108 22.0093C28.529 22.0093 30.7665 20.3196 30.7765 17.7038ZM17.2947 9.22964L12.0208 21.8117H8.57976L5.98422 11.7701C5.82706 11.1531 5.69022 10.926 5.21129 10.6651C4.42859 10.24 3.1361 9.84232 1.99998 9.59488L2.07663 9.22964H7.61623C8.32126 9.22964 8.95606 9.69905 9.11733 10.5118L10.4888 17.7933L13.8745 9.22964H17.2947Z" fill="currentColor"/>
+  <path d="M26.1124 25.2753H24.7898V26.5063H26.2693V26.8765H24.344V23.4612H26.1934V23.8313H24.7898V24.9103H26.1124V25.2753Z" fill="white"/>
+  <path d="M26.9525 23.2786H27.3983V26.876H26.9525V23.2786Z" fill="currentColor"/>
+  <path d="M29.8299 25.412C29.8351 25.1334 29.7134 24.6926 29.2118 24.6926C28.7558 24.6926 28.5631 25.1031 28.5276 25.412H29.8299ZM28.5228 25.7312C28.5328 26.3344 28.9129 26.5826 29.3636 26.5826C29.683 26.5826 29.8806 26.5268 30.0429 26.456L30.1239 26.7752C29.9667 26.846 29.6933 26.9321 29.3029 26.9321C28.5482 26.9321 28.0973 26.4306 28.0973 25.6908C28.0973 24.9511 28.5328 24.3734 29.2473 24.3734C30.0529 24.3734 30.2607 25.0727 30.2607 25.5236C30.2607 25.6147 30.2556 25.6805 30.2453 25.7312H28.5228Z" fill="currentColor"/>
+  <path d="M32.6866 26.7901C32.5701 26.846 32.3116 26.9321 31.9824 26.9321C31.2426 26.9321 30.7614 26.4306 30.7614 25.6805C30.7614 24.9256 31.2779 24.3734 32.0786 24.3734C32.342 24.3734 32.575 24.439 32.6967 24.5051L32.5956 24.8446C32.4888 24.7888 32.3216 24.7278 32.0786 24.7278C31.516 24.7278 31.2123 25.1484 31.2123 25.6553C31.2123 26.2227 31.577 26.5723 32.0634 26.5723C32.3168 26.5723 32.4839 26.5116 32.6105 26.4558L32.6866 26.7901Z" fill="currentColor"/>
+  <path d="M33.9373 23.8363V24.424H34.5754V24.7633H33.9373V26.0859C33.9373 26.3902 34.0234 26.5623 34.2716 26.5623C34.393 26.5623 34.4643 26.5522 34.5301 26.5316L34.5505 26.8714C34.4643 26.9018 34.3275 26.9321 34.1551 26.9321C33.9473 26.9321 33.7801 26.8611 33.6739 26.7449C33.5522 26.6078 33.5015 26.3902 33.5015 26.1013V24.7633H33.1214V24.424H33.5015V23.968L33.9373 23.8363Z" fill="currentColor"/>
+  <path d="M35.1982 25.1891C35.1982 24.9003 35.1928 24.6521 35.1779 24.4239H35.5681L35.5884 24.9103H35.6033C35.715 24.5811 35.9884 24.3733 36.2873 24.3733C36.3331 24.3733 36.3686 24.3784 36.4092 24.3833V24.8041C36.3634 24.7938 36.3181 24.7938 36.2569 24.7938C35.9431 24.7938 35.7199 25.0268 35.6592 25.3615C35.6491 25.4222 35.644 25.4981 35.644 25.5693V26.8765H35.1982V25.1891Z" fill="currentColor"/>
+  <path d="M37.2089 25.6553C37.2089 26.1924 37.513 26.5978 37.9487 26.5978C38.3744 26.5978 38.6933 26.1973 38.6933 25.645C38.6933 25.2296 38.4857 24.7075 37.9587 24.7075C37.4371 24.7075 37.2089 25.1941 37.2089 25.6553ZM39.1496 25.6299C39.1496 26.5368 38.5161 26.9321 37.9284 26.9321C37.2696 26.9321 36.7532 26.4455 36.7532 25.6705C36.7532 24.8546 37.2951 24.3734 37.969 24.3734C38.6733 24.3734 39.1496 24.885 39.1496 25.6299Z" fill="currentColor"/>
+  <path d="M39.8328 25.0873C39.8328 24.8291 39.8274 24.6264 39.8125 24.4237H40.2076L40.233 24.8291H40.2431C40.3647 24.6009 40.6484 24.373 41.0538 24.373C41.3931 24.373 41.9201 24.5757 41.9201 25.4165V26.876H41.4744V25.4623C41.4744 25.0673 41.3275 24.7378 40.9069 24.7378C40.6181 24.7378 40.3899 24.9456 40.3092 25.1938C40.2886 25.2496 40.2786 25.3255 40.2786 25.4016V26.876H39.8328V25.0873Z" fill="currentColor"/>
+</svg>

package/src/assets/card-logos/visa.svg

@@ -0,0 +1,4 @@
+<svg width="45" height="35" viewBox="0 0 50 43" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path d="M18.9838 14.2819L12.4375 29.7182H8.1668L4.94531 17.3985C4.75 16.6416 4.58027 16.363 3.98594 16.0429C3.01445 15.5213 1.41016 15.0334 0 14.7299L0.0951172 14.2819H6.9709C7.8459 14.2819 8.63379 14.8577 8.83418 15.8549L10.5363 24.7881L14.7387 14.2819H18.9838ZM24.7572 14.2819L21.4168 29.7182H17.3762L20.717 14.2819H24.7572ZM35.7174 24.6783C35.7342 20.605 30.0193 20.3789 30.0566 18.559C30.0703 18.0057 30.6035 17.4167 31.7707 17.2661C32.3488 17.1922 33.9461 17.1333 35.7553 17.9572L36.4631 14.6819C35.491 14.3344 34.24 14 32.684 14C28.6898 14 25.8803 16.097 25.8578 19.1021C25.8316 21.3249 27.8646 22.5637 29.3936 23.3041C30.9684 24.0601 31.4965 24.546 31.4893 25.2217C31.4779 26.2575 30.2314 26.716 29.0727 26.733C27.0406 26.7648 25.8627 26.1901 24.923 25.7575L24.1896 29.1413C25.135 29.5695 26.8772 29.9415 28.6816 29.9605C32.9277 29.9605 35.7049 27.8874 35.7174 24.6783ZM46.2643 29.7182H50L46.7363 14.2819H43.2896C42.5123 14.2819 41.859 14.7278 41.5691 15.4134L35.5066 29.7182H39.7494L40.591 27.4123H45.7746L46.2643 29.7182ZM41.7545 24.2491L43.8818 18.4522L45.1039 24.2491H41.7545Z" fill="currentColor"/>
+</svg>

package/src/assets/error.svg

@@ -0,0 +1,3 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.50001 14.6666C4.81801 14.6666 1.83334 11.6819 1.83334 7.99992C1.83334 4.31792 4.81801 1.33325 8.50001 1.33325C12.182 1.33325 15.1667 4.31792 15.1667 7.99992C15.1667 11.6819 12.182 14.6666 8.50001 14.6666ZM8.50001 13.3333C9.9145 13.3333 11.2711 12.7713 12.2712 11.7712C13.2714 10.771 13.8333 9.41441 13.8333 7.99992C13.8333 6.58543 13.2714 5.22888 12.2712 4.22868C11.2711 3.22849 9.9145 2.66659 8.50001 2.66659C7.08552 2.66659 5.72897 3.22849 4.72877 4.22868C3.72858 5.22888 3.16668 6.58543 3.16668 7.99992C3.16668 9.41441 3.72858 10.771 4.72877 11.7712C5.72897 12.7713 7.08552 13.3333 8.50001 13.3333ZM7.83334 4.66659H9.16668V5.99992H7.83334V4.66659ZM7.83334 7.33325H9.16668V11.3333H7.83334V7.33325Z" fill="currentColor" style="fill:#E6483D;fill:color(display-p3 0.9020 0.2824 0.2392);fill-opacity:1;"/>
+</svg>

package/src/assets/lead-icon.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.8333 8.33334H16.6667C16.8877 8.33334 17.0996 8.42114 17.2559 8.57742C17.4122 8.7337 17.5 8.94566 17.5 9.16667V17.5C17.5 17.721 17.4122 17.933 17.2559 18.0893C17.0996 18.2455 16.8877 18.3333 16.6667 18.3333H3.33333C3.11232 18.3333 2.90036 18.2455 2.74408 18.0893C2.5878 17.933 2.5 17.721 2.5 17.5V9.16667C2.5 8.94566 2.5878 8.7337 2.74408 8.57742C2.90036 8.42114 3.11232 8.33334 3.33333 8.33334H4.16667V7.50001C4.16667 6.73396 4.31755 5.97542 4.6107 5.26769C4.90386 4.55995 5.33354 3.91689 5.87521 3.37522C6.41689 2.83354 7.05995 2.40386 7.76768 2.11071C8.47541 1.81756 9.23396 1.66667 10 1.66667C10.766 1.66667 11.5246 1.81756 12.2323 2.11071C12.9401 2.40386 13.5831 2.83354 14.1248 3.37522C14.6665 3.91689 15.0961 4.55995 15.3893 5.26769C15.6825 5.97542 15.8333 6.73396 15.8333 7.50001V8.33334ZM4.16667 10V16.6667H15.8333V10H4.16667ZM9.16667 11.6667H10.8333V15H9.16667V11.6667ZM14.1667 8.33334V7.50001C14.1667 6.39494 13.7277 5.33513 12.9463 4.55373C12.1649 3.77233 11.1051 3.33334 10 3.33334C8.89493 3.33334 7.83512 3.77233 7.05372 4.55373C6.27232 5.33513 5.83333 6.39494 5.83333 7.50001V8.33334H14.1667Z" fill="currentColor" style="fill:white;fill-opacity:1;"/>
+</svg>

package/src/components/Button/Button.module.css

@@ -0,0 +1,50 @@
+.root {
+  box-shadow: var(--mantine-shadow-xs);
+  --button-height-sm: 2rem;
+  --button-height-md: 2.5rem;
+  --button-height-lg: 3rem;
+
+  --button-padding-x-sm: 1rem;
+  --button-padding-x-md: 1rem;
+  --button-padding-x-lg: 1rem;
+
+  font-family: var(--mantine-font-family);
+  font-weight: 500;
+  font-size: var(--mantine-font-size-caption-l);
+  line-height: var(--mantine-line-height-caption-l);
+  letter-spacing: var(--mantine-spacing-caption-l);
+
+  &[data-variant='primary'] {
+    background-color: var(--mantine-color-primary-0);
+    color: var(--mantine-color-white);
+  }
+
+  &[data-variant='secondary'] {
+    background-color: var(--mantine-color-secondary-0);
+    color: var(--mantine-color-primary);
+    border: 1px solid var(--mantine-color-border-action-normal-0);
+
+    .loader {
+      --button-color: var(--mantine-color-gray-5);
+    }
+  }
+
+  &[data-variant='tertiary'] {
+    background-color: var(--mantine-color-tertiary-0);
+    color: var(--mantine-color-primary);
+
+    .loader {
+      --button-color: var(--mantine-color-gray-5);
+    }
+  }
+
+  &:disabled,
+  &[data-disabled] {
+    background-color: var(--mantine-color-background-button-primary-disabled-0);
+    color: var(--mantine-color-text-base-quaternary-0);
+  }
+}
+
+.section {
+  --mantine-spacing-xs: 0.25rem;
+}

package/src/components/Button/Button.stories.tsx

@@ -0,0 +1,90 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { MantineProvider } from '@/components/MainProvider'
+import LeadSVG from '@/assets/lead-icon.svg'
+import ArrowLeftSVG from '@/assets/arrow-left.svg'
+
+import '@mantine/core/styles.css'
+import { theme } from '@/components/theme'
+import { Button } from '@/components/Button'
+import { Text } from '@/components/Text/Text'
+import {
+  ButtonSizes,
+  ButtonVariants,
+  LG_BUTTON_SIZE,
+  PRIMARY_BUTTON_VARIANT,
+  SECONDARY_BUTTON_VARIANT,
+  TERTIARY_BUTTON_VARIANT,
+} from '@/components/Button/constants'
+import { BODY_S_MEDIUM_FONT_VARIANT } from '@/constants/font-variants'
+
+// ----------------------------------------------------------------------
+
+const meta = {
+  title: 'Components/Button',
+  argTypes: { variant: ButtonVariants },
+  component: Button,
+  decorators: (Story) => (
+    <MantineProvider theme={theme}>
+      <Story />
+    </MantineProvider>
+  ),
+} satisfies Meta<typeof Button>
+
+type Story = StoryObj<typeof meta>
+
+// ----------------------------------------------------------------------
+
+export const ComponentButton: Story = {
+  args: {
+    children: 'Текст кнопки',
+    variant: 'tertiary',
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ButtonVariants,
+    },
+    disabled: {
+      control: 'boolean',
+    },
+    loading: {
+      control: 'boolean',
+    },
+    size: {
+      control: 'select',
+      options: ButtonSizes,
+    },
+  },
+}
+
+export const PrimaryButton: Story = {
+  args: {
+    variant: PRIMARY_BUTTON_VARIANT,
+    leftSection: <LeadSVG />,
+    fullWidth: true,
+    style: { maxWidth: '465px' },
+    children: <Text variant={BODY_S_MEDIUM_FONT_VARIANT}>Оплатить 7 605,30 RUB</Text>,
+    size: LG_BUTTON_SIZE,
+  },
+}
+
+export const SecondaryButton: Story = {
+  args: {
+    variant: SECONDARY_BUTTON_VARIANT,
+    leftSection: <ArrowLeftSVG />,
+    children: 'Вернуться на сайт продавца',
+  },
+}
+
+export const TertiaryButton: Story = {
+  args: {
+    variant: TERTIARY_BUTTON_VARIANT,
+    leftSection: <ArrowLeftSVG />,
+    children: 'Сохранённые карты',
+  },
+}
+
+// ----------------------------------------------------------------------
+
+export default meta

package/src/components/Button/Button.tsx

@@ -0,0 +1,25 @@
+import { createPolymorphicComponent, Button as MantineButton } from '@mantine/core'
+import type { ButtonProps as BaseButtonProps } from '@mantine/core'
+import '@mantine/core/styles/UnstyledButton.css'
+import '@mantine/core/styles/Button.css'
+import classNames from './Button.module.css'
+import { forwardRef } from 'react'
+import { ExtendedButtonVariant } from './types'
+
+// ----------------------------------------------------------------------
+
+type ButtonProps = BaseButtonProps & { variant?: ExtendedButtonVariant }
+
+export const Button = createPolymorphicComponent<'button', ButtonProps>(
+  forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+    const { size = 'md', ...resProps } = props
+    return (
+      <MantineButton
+        ref={ref}
+        size={size}
+        {...resProps}
+        classNames={classNames}
+      />
+    )
+  })
+)

package/src/components/Button/constants.ts

@@ -0,0 +1,17 @@
+export const PRIMARY_BUTTON_VARIANT = 'primary' as const
+export const SECONDARY_BUTTON_VARIANT = 'secondary' as const
+export const TERTIARY_BUTTON_VARIANT = 'tertiary' as const
+
+export const ButtonVariants = [
+  PRIMARY_BUTTON_VARIANT,
+  SECONDARY_BUTTON_VARIANT,
+  TERTIARY_BUTTON_VARIANT,
+]
+
+// ----------------------------------------------------------------------
+
+export const SM_BUTTON_SIZE = 'sm' as const
+export const MD_BUTTON_SIZE = 'md' as const
+export const LG_BUTTON_SIZE = 'lg' as const
+
+export const ButtonSizes = [SM_BUTTON_SIZE, MD_BUTTON_SIZE, LG_BUTTON_SIZE]

package/src/components/Button/index.ts

@@ -0,0 +1 @@
+export { Button } from './Button'

package/src/components/Button/types.ts

@@ -0,0 +1,8 @@
+import { ButtonVariants } from './constants'
+import { ButtonVariant } from '@mantine/core'
+
+// ----------------------------------------------------------------------
+
+type ButtonVariantsTypes = typeof ButtonVariants
+
+export type ExtendedButtonVariant = ButtonVariant | ButtonVariantsTypes[number]

package/src/components/Inputs/CardInput/CardInput.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { MantineProvider } from '@/components/MainProvider'
+
+import '@mantine/core/styles.css'
+import { theme } from '@/components/theme'
+
+import { CardInput as CardInputComponent } from '@/components/Inputs/CardInput'
+
+// ----------------------------------------------------------------------
+
+const meta = {
+  title: 'Components/Inputs/CardInput',
+  component: CardInputComponent,
+  decorators: (Story) => (
+    <MantineProvider theme={theme}>
+      <div style={{ maxWidth: '465px' }}>
+        <Story />
+      </div>
+    </MantineProvider>
+  ),
+} satisfies Meta<typeof CardInputComponent>
+
+type Story = StoryObj<typeof CardInputComponent>
+
+// ----------------------------------------------------------------------
+
+export const CardInput: Story = {
+  args: { label: 'Номер карты', value: '' },
+}
+
+export const CardInputError: Story = {
+  args: {
+    error: 'Неправильный номер карты',
+    label: 'Номер карты',
+    value: '4111',
+  },
+}
+
+// ----------------------------------------------------------------------
+
+export default meta

package/src/components/Inputs/CardInput/CardInput.tsx

@@ -0,0 +1,28 @@
+import CardSVG from '../../../assets/card.svg'
+import { MaskedInput } from '../MaskedInput'
+import { useCardLogo } from './useCardLogo'
+import type { MaskedInputProps } from '../types'
+import { forwardRef } from 'react'
+import { CARD_NUMBER_MASK } from '../../../constants/masks'
+import { IMask } from 'react-imask'
+
+// ----------------------------------------------------------------------
+
+const mask = IMask.createMask({ mask: CARD_NUMBER_MASK })
+
+// ----------------------------------------------------------------------
+
+export const CardInput = forwardRef<HTMLInputElement, MaskedInputProps>((props, ref) => {
+  const CardLogo = useCardLogo(props.value)
+
+  return (
+    <MaskedInput
+      ref={ref}
+      {...props}
+      mask={mask}
+      rightSection={CardLogo && <CardLogo />}
+      leftSection={<CardSVG />}
+      placeholder='____ ____ ____ ____'
+    />
+  )
+})

package/src/components/Inputs/CardInput/index.ts

@@ -0,0 +1 @@
+export { CardInput } from './CardInput'

package/src/components/Inputs/CardInput/useCardLogo.ts

@@ -0,0 +1,88 @@
+import { useEffect, useState } from 'react'
+
+import MaestroSVG from '../../../assets/card-logos/maestro.svg'
+import MastercardSVG from '../../../assets/card-logos/mastercard.svg'
+import MirSVG from '../../../assets/card-logos/mir.svg'
+import UnionPaySVG from '../../../assets/card-logos/unionpay.svg'
+import VisaElectronSVG from '../../../assets/card-logos/visa-electron.svg'
+import VisaSVG from '../../../assets/card-logos/visa.svg'
+
+// ----------------------------------------------------------------------
+
+type CardLabel = (typeof CardLabels)[number]
+
+// ----------------------------------------------------------------------
+
+const CARD_LABEL_MIR = 'mir' as const
+const CARD_LABEL_VISA_ELECTRON = 'visa-electron' as const
+const CARD_LABEL_VISA = 'visa' as const
+const CARD_LABEL_UNIONPAY = 'unionpay' as const
+const CARD_LABEL_MASTERCARD = 'mastercard' as const
+const CARD_LABEL_MAESTRO = 'maestro' as const
+
+const CardLabels = [
+  CARD_LABEL_MIR,
+  CARD_LABEL_VISA_ELECTRON,
+  CARD_LABEL_VISA,
+  CARD_LABEL_UNIONPAY,
+  CARD_LABEL_MASTERCARD,
+  CARD_LABEL_MAESTRO,
+] as const
+
+// ----------------------------------------------------------------------
+
+const cardPanTestsByLabels: Record<CardLabel, RegExp> = {
+  [CARD_LABEL_MIR]: /^(220[0-4]|22(2[1-9]|[3-9])|2[3-6]|27([0-1]|20))/,
+  [CARD_LABEL_VISA_ELECTRON]: /^(4026|417500|4508|4844|4913|4917)/,
+  [CARD_LABEL_VISA]: /^4/,
+  [CARD_LABEL_UNIONPAY]: /^(62|88)/,
+  [CARD_LABEL_MASTERCARD]: /^5[1-5]/,
+  [CARD_LABEL_MAESTRO]: /^(5018|5020|5038|5893|6304|6759|6761|6762|6763)/,
+}
+
+const getCardLabel = (cardNumber: string) => {
+  const label = CardLabels.find((label) => {
+    const regex = cardPanTestsByLabels[label]
+    return regex.test(cardNumber)
+  })
+
+  return label ?? null
+}
+
+// ----------------------------------------------------------------------
+
+const cardLogosByLabel = {
+  [CARD_LABEL_MIR]: MirSVG,
+  [CARD_LABEL_VISA_ELECTRON]: VisaElectronSVG,
+  [CARD_LABEL_VISA]: VisaSVG,
+  [CARD_LABEL_UNIONPAY]: UnionPaySVG,
+  [CARD_LABEL_MASTERCARD]: MastercardSVG,
+  [CARD_LABEL_MAESTRO]: MaestroSVG,
+}
+
+const getCardLogo = (cardLabel: CardLabel | null) => {
+  return cardLabel ? cardLogosByLabel[cardLabel] : null
+}
+
+// ----------------------------------------------------------------------
+
+export const useCardLogo = (cardPan?: string) => {
+  const [cardLabel, setCardLabel] = useState<CardLabel | null>(null)
+  const CardLogo = getCardLogo(cardLabel)
+
+  useEffect(() => {
+    if (!cardPan) {
+      setCardLabel(null)
+    } else {
+      const detectedCardLabel = getCardLabel(cardPan)
+
+      if (detectedCardLabel) {
+        setCardLabel(detectedCardLabel)
+      } else {
+        setCardLabel(null)
+      }
+    }
+  }, [cardPan])
+
+  return CardLogo
+}

package/src/components/Inputs/CvvInput/CvvInput.module.css

@@ -0,0 +1,12 @@
+@font-face {
+  font-family: 'Password';
+  src:
+    local('Password'),
+    url(../../../assets/fonts/password.woff2) format('woff2');
+  font-weight: 100;
+}
+
+.input {
+  font-family: Password, monospace !important;
+  font-display: swap;
+}

package/src/components/Inputs/CvvInput/CvvInput.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { MantineProvider } from '@/components/MainProvider'
+
+import '@mantine/core/styles.css'
+import { theme } from '@/components/theme'
+import { CvvInput as CvvInputComponent } from '@/components/Inputs/CvvInput'
+
+// ----------------------------------------------------------------------
+
+const meta = {
+  title: 'Components/Inputs/CvvInput',
+  component: CvvInputComponent,
+  decorators: (Story) => (
+    <MantineProvider theme={theme}>
+      <div style={{ maxWidth: '304px' }}>
+        <Story />
+      </div>
+    </MantineProvider>
+  ),
+} satisfies Meta<typeof CvvInputComponent>
+
+type Story = StoryObj<typeof CvvInputComponent>
+
+// ----------------------------------------------------------------------
+
+export const CvvInput: Story = {
+  args: {
+    label: 'CVV/CVC',
+  },
+}
+
+export const CvvInputError: Story = {
+  args: {
+    label: 'CVV/CVC',
+    error: 'Укажите код',
+  },
+}
+
+// ----------------------------------------------------------------------
+
+export default meta

package/src/components/Inputs/CvvInput/CvvInput.tsx

@@ -0,0 +1,27 @@
+import { MaskedInput } from '../MaskedInput'
+import passwordClassNames from './CvvInput.module.css'
+import baseInputClassNames from '../Input.module.css'
+import clsx from 'clsx'
+import type { MaskedInputProps } from '../types'
+import { forwardRef } from 'react'
+import { CARD_CVV_MASK } from '../../../constants/masks'
+import { IMask } from 'react-imask'
+
+// ----------------------------------------------------------------------
+
+const { input, ...restClassNames } = baseInputClassNames
+
+const classNames = clsx(input, passwordClassNames.input)
+
+const mask = IMask.createMask({ mask: CARD_CVV_MASK })
+
+// ----------------------------------------------------------------------
+
+export const CvvInput = forwardRef<HTMLInputElement, MaskedInputProps>((props, ref) => (
+  <MaskedInput
+    ref={ref}
+    {...props}
+    mask={mask}
+    classNames={{ ...restClassNames, input: classNames }}
+  />
+))

package/src/components/Inputs/CvvInput/index.ts

@@ -0,0 +1 @@
+export { CvvInput } from './CvvInput'

package/src/components/Inputs/Input.module.css

@@ -0,0 +1,38 @@
+.input {
+  border-radius: var(--mantine-radius-xl);
+  border: 1px solid var(--mantine-color-border-action-normal-0);
+  box-shadow: var(--mantine-shadows-xs);
+  color: var(--mantine-color-text-base-tertiary-0);
+
+  --input-height: 2.5rem;
+
+  &[data-error] {
+    border: 1px solid var(--mantine-color-border-action-destructive-0);
+    margin-bottom: -0.125px;
+  }
+
+  [data-position='left'] ~ & {
+    --input-padding-inline-start: 2.5rem;
+  }
+}
+
+.section {
+  --right-section-end: 0.75rem;
+  --left-section-start: 0.25rem;
+}
+
+.label {
+  margin-bottom: 0.2rem;
+}
+
+.error {
+  color: var(--mantine-color-text-status-destructive-0);
+  padding-left: 0.25rem;
+
+  &::before {
+    content: url('../../assets/error.svg');
+    position: relative;
+    top: 3px;
+    left: -0.25rem;
+  }
+}