@rango-dev/ui 0.15.1-next.0 → 0.15.1-next.10

package/src/icons/Route.tsx

@@ -0,0 +1,33 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon';
+
+function SvgRoute(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 25 24" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16.3027 2.55688V3.25637C16.3027 2.55688 16.3023 2.55688 16.3027 2.55688L16.3042 2.55689L16.306 2.55689L16.3107 2.55692L16.324 2.55708C16.3346 2.55724 16.3488 2.55754 16.3662 2.5581C16.401 2.5592 16.4489 2.56132 16.5082 2.56536C16.6266 2.57341 16.7916 2.58921 16.9887 2.62027C17.38 2.68194 17.9132 2.80617 18.4638 3.06C19.5932 3.58064 20.783 4.65118 20.9505 6.71055L20.9528 6.73886V12.5915H19.5539V6.79672C19.4282 5.36387 18.6478 4.68531 17.8781 4.33047C17.4767 4.14544 17.0757 4.05024 16.7709 4.00219C16.6199 3.9784 16.4964 3.96676 16.4132 3.96111C16.3785 3.95874 16.351 3.95744 16.3318 3.95672C14.6677 4.14012 13.8892 4.90998 13.4993 5.57985C13.2937 5.93303 13.1854 6.27902 13.129 6.53714C13.101 6.66531 13.0865 6.76899 13.079 6.8371C13.0753 6.87107 13.0734 6.89588 13.0725 6.91014L13.0721 6.91739V17.264L13.0698 17.2923C12.9025 19.3524 11.72 20.4232 10.5939 20.9434C10.0454 21.1968 9.51429 21.3202 9.12455 21.3811C8.92825 21.4118 8.76389 21.4273 8.64589 21.4351C8.58678 21.439 8.539 21.441 8.50431 21.442C8.48696 21.4426 8.47285 21.4428 8.46222 21.443L8.44888 21.4431L8.4442 21.4431L8.44237 21.4431C6.08877 21.4473 4.79606 20.4508 4.1344 19.3543C3.81715 18.8286 3.6613 18.3082 3.58386 17.9228C3.54488 17.7289 3.52497 17.5653 3.51477 17.4468C3.50965 17.3874 3.50694 17.3389 3.50551 17.3032C3.50479 17.2854 3.50439 17.2707 3.50417 17.2593L3.50395 17.2449L3.50392 17.2396L3.50391 17.2375C3.50391 17.237 3.50391 17.2357 4.2034 17.2357H3.50391V12.5915H4.90289V17.2322L4.90336 17.2471C4.90399 17.2629 4.90542 17.29 4.90859 17.3267C4.91494 17.4005 4.92815 17.5115 4.95541 17.6472C5.01043 17.921 5.11954 18.2791 5.33218 18.6315C5.73009 19.2909 6.55709 20.048 8.44111 20.0441L8.44383 20.0441L8.46281 20.0437C8.48164 20.0431 8.51244 20.0419 8.55355 20.0392C8.63597 20.0337 8.75857 20.0224 8.90841 19.9989C9.21093 19.9516 9.60883 19.8574 10.0072 19.6734C10.7699 19.3211 11.5474 18.6441 11.6731 17.2063V6.88387L12.3726 6.90162C11.6734 6.88387 11.6731 6.8843 11.6731 6.88387L11.6734 6.88211L11.6735 6.88003L11.6736 6.87497L11.6742 6.86126C11.6746 6.85055 11.6754 6.83672 11.6765 6.81995C11.6786 6.78643 11.6822 6.74108 11.6883 6.68546C11.7004 6.57439 11.7224 6.42122 11.7622 6.23869C11.8416 5.87539 11.9943 5.38455 12.2903 4.87607C12.9001 3.82834 14.0767 2.78298 16.2308 2.56058L16.2667 2.55688H16.3027ZM13.0718 6.92355C13.0717 6.92435 13.0717 6.9242 13.0718 6.92355V6.92355Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M20.2521 13.0936C19.3815 13.0936 18.6758 13.7993 18.6758 14.6698C18.6758 15.5403 19.3815 16.2461 20.2521 16.2461C21.1226 16.2461 21.8283 15.5403 21.8283 14.6698C21.8283 13.7993 21.1226 13.0936 20.2521 13.0936ZM17.2769 14.6698C17.2769 13.0266 18.6089 11.6946 20.2521 11.6946C21.8953 11.6946 23.2273 13.0266 23.2273 14.6698C23.2273 16.313 21.8953 17.645 20.2521 17.645C18.6089 17.645 17.2769 16.313 17.2769 14.6698Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.20277 8.54253C3.33223 8.54253 2.62652 9.24824 2.62652 10.1188C2.62652 10.9893 3.33223 11.695 4.20277 11.695C5.07331 11.695 5.77902 10.9893 5.77902 10.1188C5.77902 9.24824 5.07331 8.54253 4.20277 8.54253ZM1.22754 10.1188C1.22754 8.47561 2.55959 7.14355 4.20277 7.14355C5.84594 7.14355 7.178 8.47561 7.178 10.1188C7.178 11.762 5.84594 13.094 4.20277 13.094C2.55959 13.094 1.22754 11.762 1.22754 10.1188Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+export default SvgRoute;

package/src/icons/Search.tsx

@@ -0,0 +1,27 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon';
+
+function SvgSearch(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 25 24" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M18.058 4.04189C14.3131 0.296976 8.2414 0.296976 4.49648 4.04189C0.751566 7.78681 0.751566 13.8585 4.49648 17.6034C8.2414 21.3483 14.3131 21.3483 18.058 17.6034C21.8029 13.8585 21.8029 7.78681 18.058 4.04189ZM18.93 3.16988C14.7035 -1.05663 7.85098 -1.05663 3.62447 3.16988C-0.602038 7.39639 -0.602038 14.2489 3.62447 18.4754C7.85098 22.7019 14.7035 22.7019 18.93 18.4754C23.1565 14.2489 23.1565 7.39639 18.93 3.16988Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M18.0517 17.5971C18.2925 17.3563 18.6829 17.3563 18.9237 17.5971L24.2739 22.9473C24.5147 23.1881 24.5147 23.5785 24.2739 23.8193C24.0331 24.0601 23.6427 24.0601 23.4019 23.8193L18.0517 18.4691C17.8109 18.2283 17.8109 17.8379 18.0517 17.5971Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+export default SvgSearch;

package/src/icons/Settings.tsx

@@ -0,0 +1,21 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon';
+
+function SvgSettings(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 25 24" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8.50467 2.93423C8.50467 1.50705 9.66162 0.350098 11.0888 0.350098H13.8205C15.2477 0.350098 16.4047 1.50706 16.4047 2.93424C16.4047 3.92275 17.4748 4.5406 18.3309 4.04632C19.5669 3.33272 21.1474 3.75618 21.861 4.99218L23.2268 7.35787C23.9404 8.59386 23.5169 10.1743 22.2809 10.8879C21.4248 11.3822 21.4248 12.6179 22.2809 13.1121C23.5169 13.8257 23.9404 15.4062 23.2268 16.6422L21.861 19.0079C21.1474 20.2439 19.5669 20.6673 18.3309 19.9537C17.4748 19.4595 16.4047 20.0773 16.4047 21.0659C16.4047 22.4931 15.2477 23.6501 13.8205 23.6501H11.0889C9.66164 23.6501 8.50467 22.4931 8.50467 21.0659C8.50467 20.0773 7.43452 19.4595 6.57844 19.9537C5.34246 20.6673 3.76202 20.2439 3.04842 19.0079L1.68258 16.6422C0.968984 15.4062 1.39246 13.8257 2.62845 13.1121C3.48456 12.6179 3.48456 11.3822 2.62845 10.8879C1.39247 10.1743 0.968985 8.59386 1.68258 7.35787L3.04842 4.99216C3.76202 3.75618 5.34248 3.33271 6.57845 4.0463C7.43455 4.54057 8.50467 3.92274 8.50467 2.93423ZM11.0888 1.6501C10.3796 1.6501 9.80467 2.22502 9.80467 2.93423C9.80467 4.92351 7.65119 6.16676 5.92845 5.17214C5.31425 4.81752 4.52886 5.02797 4.17426 5.64216L2.80842 8.00787C2.4538 8.62208 2.66425 9.40746 3.27845 9.76207C5.00123 10.7567 5.00123 13.2433 3.27845 14.238C2.66424 14.5926 2.4538 15.378 2.80841 15.9922L4.17426 18.3579C4.52886 18.9721 5.31424 19.1825 5.92844 18.8279C7.65123 17.8333 9.80467 19.0766 9.80467 21.0659C9.80467 21.7751 10.3796 22.3501 11.0889 22.3501H13.8205C14.5297 22.3501 15.1047 21.7751 15.1047 21.0659C15.1047 19.0766 17.2581 17.8332 18.9809 18.8279C19.5951 19.1825 20.3805 18.9721 20.7351 18.3579L22.101 15.9922C22.4556 15.378 22.2451 14.5926 21.6309 14.238C19.9082 13.2433 19.9082 10.7567 21.6309 9.76207C22.2451 9.40746 22.4556 8.62208 22.101 8.00787L20.7351 5.64218C20.3805 5.02798 19.5951 4.81753 18.9809 5.17215C17.2582 6.16678 15.1047 4.92353 15.1047 2.93424C15.1047 2.22503 14.5297 1.6501 13.8205 1.6501H11.0888ZM12.4547 8.2501C10.3836 8.2501 8.70467 9.92903 8.70467 12.0001C8.70467 14.0712 10.3836 15.7501 12.4547 15.7501C14.5257 15.7501 16.2047 14.0712 16.2047 12.0001C16.2047 9.92903 14.5257 8.2501 12.4547 8.2501ZM7.40467 12.0001C7.40467 9.21106 9.66563 6.9501 12.4547 6.9501C15.2437 6.9501 17.5047 9.21106 17.5047 12.0001C17.5047 14.7891 15.2437 17.0501 12.4547 17.0501C9.66563 17.0501 7.40467 14.7891 7.40467 12.0001Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+export default SvgSettings;

package/src/icons/Style.tsx

@@ -0,0 +1,39 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon';
+
+function SvgStyle(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2.12348 2.1536C3.43468 0.842406 5.40414 0.333338 7.96989 0.333338H9.96989C10.3381 0.333338 10.6366 0.631815 10.6366 1.00001C10.6366 1.3682 10.3381 1.66667 9.96989 1.66667H7.96989C5.53564 1.66667 4.0051 2.1576 3.06629 3.09641C2.12749 4.03522 1.63656 5.56576 1.63656 8.00001V14C1.63656 16.4343 2.12749 17.9648 3.06629 18.9036C4.0051 19.8424 5.53564 20.3333 7.96989 20.3333H13.9699C16.4041 20.3333 17.9347 19.8424 18.8735 18.9036C19.8123 17.9648 20.3032 16.4343 20.3032 14V12C20.3032 11.6318 20.6017 11.3333 20.9699 11.3333C21.3381 11.3333 21.6366 11.6318 21.6366 12V14C21.6366 16.5658 21.1275 18.5352 19.8163 19.8464C18.5051 21.1576 16.5356 21.6667 13.9699 21.6667H7.96989C5.40414 21.6667 3.43468 21.1576 2.12348 19.8464C0.81229 18.5352 0.303223 16.5658 0.303223 14V8.00001C0.303223 5.43425 0.81229 3.4648 2.12348 2.1536Z"
+        fill="#469BF5"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M19.6533 1.70118C18.1946 2.28844 16.4352 3.33798 14.7767 4.56925C13.1164 5.80189 11.599 7.18566 10.6112 8.41663C10.611 8.4169 10.6108 8.41716 10.6106 8.41743L9.57353 9.71786C10.1923 9.89703 10.7777 10.2353 11.2798 10.7366C11.7724 11.2208 12.1029 11.7818 12.2804 12.3834L13.5634 11.3602C13.5631 11.3604 13.5636 11.36 13.5634 11.3602C14.794 10.3727 16.1734 8.8575 17.4009 7.19866C18.6287 5.53958 19.6747 3.77753 20.2617 2.31228L20.2625 2.31037C20.342 2.1138 20.2901 1.93255 20.1592 1.80163C20.0422 1.6846 19.858 1.62456 19.6533 1.70118ZM11.0795 13.126C11.0087 12.6036 10.7766 12.111 10.3436 11.686L10.3392 11.6817C9.89856 11.241 9.38154 10.9984 8.85474 10.9241C8.70039 10.9145 8.58818 10.909 8.48218 10.9156C8.25816 10.9296 8.04212 10.8299 7.90739 10.6504C7.77266 10.4709 7.73731 10.2356 7.81333 10.0244C7.92575 9.71214 8.09202 9.41042 8.3202 9.15099L9.56937 7.58457L9.5706 7.58302C10.6528 6.2342 12.2651 4.77329 13.9819 3.4987C15.6987 2.22414 17.5618 1.10487 19.162 0.46166L19.1721 0.45757C19.9057 0.176639 20.6398 0.396658 21.102 0.858821C21.5709 1.3277 21.799 2.06602 21.4991 2.80913C20.856 4.41366 19.7423 6.27621 18.4727 7.99179C17.203 9.70761 15.7469 11.3178 14.3978 12.4002L14.3963 12.4014L12.8162 13.6614L12.8006 13.6736C12.5646 13.8505 12.3122 14.0042 12.0135 14.1211C11.8083 14.2013 11.5767 14.1751 11.3948 14.0509C11.2128 13.9267 11.1039 13.7206 11.1039 13.5002C11.1039 13.3816 11.0961 13.2603 11.0795 13.126Z"
+        fill="#469BF5"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8.8644 10.9143C8.71005 10.9048 8.59784 10.8992 8.49184 10.9058C8.48226 10.9064 8.47267 10.9068 8.46307 10.907C7.20229 10.9313 6.05337 11.8306 5.9031 13.2118C5.90307 13.212 5.90312 13.2116 5.9031 13.2118L5.69317 15.1811L5.69292 15.1834C5.61951 15.8502 6.18196 16.4002 6.82596 16.328L6.82959 16.3276L8.79274 16.1183C9.43334 16.0359 9.95384 15.7633 10.337 15.3809C10.8429 14.866 11.1136 14.1948 11.1136 13.4905C11.1136 13.3809 11.1057 13.2498 11.0891 13.1162C11.0188 12.5976 10.7885 12.1116 10.3489 11.6719C9.90825 11.2313 9.3912 10.9887 8.8644 10.9143ZM8.95752 9.58421C8.96234 9.58451 8.96712 9.58481 8.97184 9.58511C8.98719 9.58607 9.00249 9.58756 9.01773 9.58957C9.84347 9.69886 10.6383 10.0757 11.2917 10.7291C11.9311 11.3685 12.3008 12.1215 12.411 12.9417L12.4118 12.9478C12.435 13.1332 12.4469 13.3209 12.4469 13.4905C12.4469 14.5453 12.0383 15.5533 11.2854 16.3182L11.2817 16.3219C10.6862 16.9173 9.8895 17.3234 8.95398 17.4419L8.94094 17.4435L6.97251 17.6532C5.4778 17.8196 4.20177 16.5507 4.36746 15.0388C4.36741 15.0392 4.3675 15.0383 4.36746 15.0388L4.57735 13.0698C4.80677 10.9567 6.56956 9.6164 8.42348 9.57423C8.62029 9.56308 8.81008 9.57497 8.95752 9.58421Z"
+        fill="#469BF5"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10.3638 7.19043C10.3638 6.82225 10.6622 6.52377 11.0304 6.52377C13.4998 6.52377 15.4871 8.52339 15.4871 10.9804C15.4871 11.3486 15.1886 11.6471 14.8204 11.6471C14.4522 11.6471 14.1538 11.3486 14.1538 10.9804C14.1538 9.25748 12.7611 7.8571 11.0304 7.8571C10.6622 7.8571 10.3638 7.55862 10.3638 7.19043Z"
+        fill="#469BF5"
+      />
+    </svg>
+  );
+}
+export default SvgStyle;

package/src/icons/Time.tsx

@@ -0,0 +1,33 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon';
+
+function SvgTime(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 25 24" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12.4551 22.6998C18.3645 22.6998 23.1551 17.9092 23.1551 11.9998C23.1551 6.09031 18.3645 1.29976 12.4551 1.29976C6.54563 1.29976 1.75508 6.09031 1.75508 11.9998C1.75508 17.9092 6.54563 22.6998 12.4551 22.6998ZM12.4551 23.9998C19.0825 23.9998 24.4551 18.6272 24.4551 11.9998C24.4551 5.37234 19.0825 -0.000244141 12.4551 -0.000244141C5.82766 -0.000244141 0.455078 5.37234 0.455078 11.9998C0.455078 18.6272 5.82766 23.9998 12.4551 23.9998Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12.1564 6.64951C12.1564 6.29053 11.8654 5.99951 11.5064 5.99951C11.1475 5.99951 10.8564 6.29053 10.8564 6.64951V13.5539C10.8564 13.7039 10.9073 13.8421 10.9927 13.9522C11.0305 14.019 11.0778 14.0798 11.1342 14.1315L15.3897 18.0282C15.6545 18.2706 16.0194 18.2179 16.2049 17.9106C16.3903 17.6032 16.326 17.1574 16.0612 16.915L12.1564 13.3395V6.64951Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12.1564 13.3395L16.0612 16.915C16.077 16.9294 16.092 16.9446 16.1063 16.9603C16.1506 17.0092 16.188 17.0642 16.2182 17.1233C16.3425 17.3663 16.3451 17.678 16.2049 17.9106C16.0194 18.2179 15.6545 18.2706 15.3897 18.0282L11.1342 14.1315C11.0778 14.0798 11.0305 14.019 10.9927 13.9522C10.9073 13.8421 10.8564 13.7039 10.8564 13.5539V6.64951C10.8564 6.29053 11.1475 5.99951 11.5064 5.99951C11.8654 5.99951 12.1564 6.29053 12.1564 6.64951V13.3395Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+export default SvgTime;

package/src/icons/Transaction.tsx

@@ -0,0 +1,21 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon';
+
+function SvgTransaction(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 25 24" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M1.72071 5.68769C1.71769 2.54635 4.26488 -0.00214142 7.40636 1.35055e-06C10.77 0.00229565 14.1336 0.0022956 17.4972 1.35055e-06C20.6387 -0.00214148 23.1856 2.5459 23.1849 5.68684C23.1845 7.86988 23.1856 9.9259 23.1869 12.0692C23.188 14.0266 23.1892 16.0568 23.1892 18.323C23.1892 18.4865 23.1242 18.6433 23.0086 18.7589L17.9483 23.8194C17.8327 23.935 17.6758 24 17.5123 24C15.9522 24 14.295 23.9993 12.6072 23.9986C10.8818 23.9979 9.1243 23.9971 7.40581 23.9971C4.26467 23.9971 1.71769 21.4485 1.72071 18.3071C1.7249 13.9398 1.7249 10.055 1.72071 5.68769ZM7.40552 1.2332C4.94605 1.23152 2.95155 3.22689 2.95391 5.68651C2.9581 10.0546 2.9581 13.9402 2.95391 18.3083C2.95155 20.7679 4.94602 22.7639 7.40583 22.7639C9.13703 22.7639 10.8892 22.7647 12.6094 22.7654C14.0722 22.766 15.5119 22.7666 16.8957 22.7668V19.5881C16.8957 18.5488 17.7382 17.7064 18.7774 17.7064H21.956C21.9558 15.6878 21.9547 13.8496 21.9537 12.0711C21.9524 9.92644 21.9513 7.8687 21.9517 5.68659C21.9522 3.22658 19.9575 1.23152 17.498 1.2332C14.1339 1.2355 10.7697 1.2355 7.40552 1.2332ZM21.084 18.9396H18.7774C18.4192 18.9396 18.1289 19.2299 18.1289 19.5881V21.8948L21.084 18.9396ZM6.7748 5.67184C6.7748 5.3313 7.05087 5.05524 7.3914 5.05524H17.5122C17.8527 5.05524 18.1288 5.3313 18.1288 5.67184C18.1288 6.01238 17.8527 6.28844 17.5122 6.28844H7.3914C7.05087 6.28844 6.7748 6.01238 6.7748 5.67184ZM6.7748 9.46718C6.7748 9.12664 7.05087 8.85058 7.3914 8.85058H17.5122C17.8527 8.85058 18.1288 9.12664 18.1288 9.46718C18.1288 9.80772 17.8527 10.0838 17.5122 10.0838H7.3914C7.05087 10.0838 6.7748 9.80772 6.7748 9.46718ZM6.7748 13.2625C6.7748 12.922 7.05087 12.6459 7.3914 12.6459H12.4518C12.7924 12.6459 13.0684 12.922 13.0684 13.2625C13.0684 13.603 12.7924 13.8791 12.4518 13.8791H7.3914C7.05087 13.8791 6.7748 13.603 6.7748 13.2625Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+export default SvgTransaction;

package/src/icons/Wallet.tsx

@@ -0,0 +1,33 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon';
+
+function SvgWallet(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 25 24" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_3736_40081)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M12.8584 0.862959L15.3058 1.41525C16.9489 1.78602 18.2271 2.07447 19.2188 2.40426C20.2261 2.73925 21.004 3.13692 21.6096 3.76475C21.7414 3.9014 21.8498 4.01602 21.9385 4.11203C21.9394 4.11303 21.9403 4.11403 21.9413 4.11504C22.5067 4.5409 22.9972 5.05945 23.3914 5.64946C23.95 6.48545 24.2066 7.45716 24.3315 8.68458C24.4546 9.89445 24.4546 11.419 24.4546 13.3875V13.4584C24.4546 15.4268 24.4546 16.9514 24.3315 18.1613C24.2066 19.3887 23.95 20.3604 23.3914 21.1964C22.9312 21.8852 22.3398 22.4766 21.651 22.9369C20.815 23.4954 19.8433 23.7521 18.6159 23.8769C17.406 24 15.8814 24 13.9129 24H10.9962C9.02776 24 7.50318 24 6.29331 23.8769C5.06589 23.7521 4.09417 23.4954 3.25818 22.9369C2.56938 22.4766 1.97797 21.8852 1.51773 21.1964C0.959139 20.3604 0.702521 19.3887 0.577659 18.1613C0.504912 17.4462 0.475165 16.6211 0.463001 15.6594C0.457469 15.6262 0.45459 15.5921 0.45459 15.5573V13.5198C0.45459 13.4993 0.45459 13.4789 0.45459 13.4584V13.3875C0.45459 13.367 0.45459 13.3465 0.45459 13.3261V11.2885C0.45459 11.2538 0.457469 11.2197 0.463001 11.1865C0.475164 10.2248 0.504912 9.3997 0.577659 8.68458C0.702521 7.45716 0.959139 6.48545 1.51773 5.64946C1.85461 5.14527 2.26177 4.69328 2.72596 4.3067C3.11565 3.02447 3.55365 2.07925 4.32097 1.37775C4.84839 0.895558 5.46731 0.520025 6.14202 0.271815C6.96557 -0.0311507 7.84132 -0.0555731 8.89761 0.0751007C9.93706 0.203692 11.2152 0.492136 12.8584 0.862959ZM4.39684 3.35079C4.95892 3.15746 5.58334 3.04115 6.29331 2.96893C7.50318 2.84585 9.02777 2.84586 10.9962 2.84586H13.9129C14.7013 2.84586 15.4185 2.84586 16.0727 2.85376C15.7378 2.77698 15.3811 2.69646 15.0007 2.61061L12.6204 2.07346C10.9367 1.6935 9.7179 1.41918 8.7462 1.29897C7.7843 1.17997 7.13094 1.22202 6.56779 1.42918C6.04187 1.62266 5.56127 1.91472 5.15307 2.28791C4.85984 2.55599 4.61826 2.89086 4.39684 3.35079ZM1.68779 13.4229C1.68779 12.8782 1.68785 12.3738 1.69023 11.9051H4.6285C5.46675 11.9051 6.14629 12.5847 6.14629 13.4229C6.14629 14.2612 5.46675 14.9407 4.6285 14.9407H1.69023C1.68785 14.4721 1.68779 13.9676 1.68779 13.4229ZM1.70507 16.1739H4.6285C6.14783 16.1739 7.37949 14.9423 7.37949 13.4229C7.37949 11.9036 6.14783 10.6719 4.6285 10.6719H1.70507C1.72046 9.96264 1.74955 9.34986 1.80453 8.80939C1.91947 7.67947 2.14247 6.93418 2.5431 6.33459C2.91337 5.78044 3.38916 5.30464 3.94331 4.93437C4.5429 4.53374 5.2882 4.31074 6.41812 4.1958C7.55834 4.07981 9.02038 4.07906 11.0317 4.07906H13.8775C15.8888 4.07906 17.3508 4.07981 18.491 4.1958C19.621 4.31074 20.3663 4.53374 20.9658 4.93437C21.52 5.30464 21.9958 5.78044 22.3661 6.33459C22.7667 6.93418 22.9897 7.67947 23.1046 8.80939C23.2206 9.94961 23.2214 11.4117 23.2214 13.4229C23.2214 15.4342 23.2206 16.8963 23.1046 18.0365C22.9897 19.1664 22.7667 19.9117 22.3661 20.5113C21.9958 21.0654 21.52 21.5412 20.9658 21.9115C20.3663 22.3121 19.621 22.5351 18.491 22.6501C17.3508 22.7661 15.8888 22.7668 13.8775 22.7668H11.0317C9.02038 22.7668 7.55834 22.7661 6.41812 22.6501C5.2882 22.5351 4.5429 22.3121 3.94331 21.9115C3.38916 21.5412 2.91337 21.0654 2.5431 20.5113C2.14247 19.9117 1.91947 19.1664 1.80453 18.0365C1.74955 17.496 1.72046 16.8832 1.70507 16.1739ZM17.5297 19.1146C17.5297 18.7741 17.8058 18.498 18.1463 18.498H19.5693C19.9098 18.498 20.1859 18.7741 20.1859 19.1146C20.1859 19.4552 19.9098 19.7312 19.5693 19.7312H18.1463C17.8058 19.7312 17.5297 19.4552 17.5297 19.1146Z"
+          fill="currentColor"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_3736_40081">
+          <rect
+            width={24}
+            height={24}
+            fill="white"
+            transform="translate(0.45459)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
+export default SvgWallet;

package/src/icons/Warning.tsx

@@ -0,0 +1,19 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon';
+
+function SvgWarning(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 25 24" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M22.7245 22.4863H1.73091C1.38524 22.4863 1.05369 22.3491 0.809081 22.1049C0.56447 21.8606 0.426788 21.5293 0.42627 21.1836C0.426608 20.9568 0.485203 20.7339 0.59644 20.5362L11.0923 2.15775C11.1771 2.00885 11.2905 1.87815 11.4259 1.77315C11.5614 1.66815 11.7162 1.5909 11.8816 1.54584C12.0469 1.50078 12.2195 1.48878 12.3895 1.51055C12.5595 1.53231 12.7235 1.5874 12.8722 1.67267C13.075 1.78726 13.2427 1.95497 13.3573 2.15775L23.8531 20.544C23.9681 20.7424 24.0287 20.9677 24.0288 21.197C24.0288 21.4263 23.9683 21.6516 23.8534 21.85C23.7385 22.0485 23.5733 22.2131 23.3743 22.3272C23.1754 22.4414 22.9499 22.501 22.7206 22.5L22.7245 22.4863ZM11.0394 17.7724V20.1196H13.4121V17.7724H11.0394ZM10.9201 8.14893L11.5754 16.5166H12.8644L13.5314 8.16067L10.9201 8.14893Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+export default SvgWarning;

package/src/icons/index.ts

@@ -0,0 +1,39 @@
+export { default as AutoThemeIcon } from './AutoTheme';
+export { default as BorderRadiusIcon } from './BorderRadius';
+export { default as ChevronDownIcon } from './ChevronDown';
+export { default as ChevronLeftIcon } from './ChevronLeft';
+export { default as ChevronRightIcon } from './ChevronRight';
+export { default as ChevronUpIcon } from './ChevronUp';
+export { default as CloseIcon } from './Close';
+export { default as CompleteIcon } from './Complete';
+export { default as CopyIcon } from './Copy';
+export { default as DarkModeIcon } from './DarkMode';
+export { default as DeleteIcon } from './Delete';
+export { default as DoneIcon } from './Done';
+export { default as ErrorIcon } from './Error';
+export { default as ExternalLinkIcon } from './ExternalLink';
+export { default as FontIcon } from './Font';
+export { default as GasIcon } from './Gas';
+export { default as InProgressIcon } from './InProgress';
+export { default as InfoErrorIcon } from './InfoError';
+export { default as InfoIcon } from './Info';
+export { default as LightModeIcon } from './LightMode';
+export { default as LinkIcon } from './Link';
+export { default as LoadingIcon } from './Loading';
+export { default as NoRouteIcon } from './NoRoute';
+export { default as NextIcon } from './Next';
+export { default as NoNotificationIcon } from './NoNotification';
+export { default as NotificationNumberIcon } from './NotificationNumber';
+export { default as NotificationsIcon } from './Notifications';
+export { default as NumberIcon } from './Number';
+export { default as PinIcon } from './Pin';
+export { default as RefreshIcon } from './Refresh';
+export { default as ReverseIcon } from './Reverse';
+export { default as RouteIcon } from './Route';
+export { default as SearchIcon } from './Search';
+export { default as TimeIcon } from './Time';
+export { default as TransactionIcon } from './Transaction';
+export { default as WalletIcon } from './Wallet';
+export { default as WarningIcon } from './Warning';
+export { default as SettingsIcon } from './Settings';
+export { default as StyleIcon } from './Style';

package/src/index.ts

@@ -3,4 +3,5 @@ export * from './containers';
 export * from './theme';
 export * from './types';
 export * from './hooks';
+export * from './icons';
 export { generateRangeColors } from './helper';

package/src/theme.ts

@@ -1,88 +1,143 @@
 // TSDX + stiches doesn't work with import statement and has a bug.
 
-import { PropertyValue, CreateStitches } from '@stitches/react';
-import { DefaultThemeMap } from '@stitches/react/types/config';
+import type { PropertyValue } from '@stitches/react';
+import type { DefaultThemeMap } from '@stitches/react/types/config';
+
 import { createStitches } from '@stitches/react';
 
 /* ----------------------- Values ----------------------- */
 
-const theme = {
+export const theme = {
   colors: {
-    primary: '#5FA425',
-    primary100: '#9FC87C',
-    primary200: '#8FBF66',
-    primary300: '#7FB651',
-    primary400: '#6FAD3B',
-    primary500: '#5FA425',
-    primary600: '#4C831E',
-    primary700: '#396216',
-    primary800: '#26420F',
-    primary900: '#132107',
-    surface: '#fff',
-    neutral100: '#f3f3f3',
-    neutral200: '#FAFAFA',
-    neutral300: '#EAEAEA',
-    neutral400: '#999999',
-    neutral500: '#888888',
-    neutral600: '#666666',
-    neutral700: '#444444',
-    neutral800: '#333333',
-    neutral900: '#111111',
-    background: '#fff',
-    foreground: '#000',
-    success: '#0070F3',
-    success100: '#D3E5FF',
-    success300: '#3291FF',
-    success500: '#0070F3',
-    success700: '#0761D1',
-    warning: '#F5A623',
-    warning100: '#FFEFCF',
-    warning300: '#F7B955',
-    warning500: '#F5A623',
-    warning700: '#AB570A',
-    error: '#FF0000',
-    error100: '#F7D4D6',
-    error300: '#FF3333',
-    error500: '#FF0000',
-    error700: '#E60000',
-    // Only use this color when you are going to use white for both dark and light theme.
-    white: '#fff',
+    primary500: '#1C3CF1',
+    primary600: '#0B27C5',
+
+    secondary100: '#E9F4FF',
+    secondary200: '#D6EAFF',
+    secondary300: '#C8E3FF',
+    secondary400: '#B5D9FF',
+    secondary500: '#469BF5',
+    secondary600: '#2284ED',
+    secondary700: '#242D5B',
+    secondary800: '#131C49',
+    secondary900: '#0E1744',
+
+    neutral100: '#F9F9F9',
+    neutral200: '#F6F6F6',
+    neutral300: '#F2F2F2',
+    neutral400: '#EEEEEE',
+    neutral500: '#E6E6E6',
+    neutral600: '#1B1B1B',
+    neutral700: '#121212',
+    neutral800: '#A2A2A2',
+    neutral900: '#727272',
+
+    error100: '#FDF3F3',
+    error300: '#FFD7D7',
+    error500: '#FF3B3B',
+    error600: '#432F2F',
+    error700: '#191212',
+
+    warning100: '#FFF1D4',
+    warning300: '#FFD8B4',
+    warning500: '#F17606',
+    warning600: '#38271F',
+    warning700: '#1A1412',
+
+    info100: '#E9F3FF',
+    info300: '#C8E2FF',
+    info500: '#5BABFF',
+    info600: '#2E2E41',
+    info700: '#121521',
+
+    success100: '#CEFAE6',
+    success300: '#BDECD7',
+    success500: '#06C270',
+    success600: '#1F2825',
+    success700: '#0F1412',
+
+    background: '#FDFDFD',
+    foreground: '#010101',
   },
   space: {
+    0: '0rem',
+    5: '0.313rem',
+    10: '0.625rem',
+    15: '0.938rem',
+    20: '1.25rem',
+    25: '1.563rem',
+    30: '1.875rem',
+    40: '2.5rem',
+    46: '2.875rem',
+    50: '3.125rem',
+    60: '3.75rem',
+    70: '4.375rem',
+    80: '5rem',
+    90: '5.625rem',
+    100: '6.25rem',
+
+    //These should be removed
     2: '2px',
     4: '4px',
     6: '6px',
     8: '8px',
-    10: '10px',
     12: '12px',
     16: '16px',
-    20: '20px',
     24: '24px',
     28: '28px',
-    30: '30px',
     32: '32px',
   },
+
+  radii: {
+    xs: '5px',
+    sm: '10px',
+    xm: '15px',
+    md: '25px',
+    xl: '35px',
+    lg: '40px',
+    primary: '20px',
+    secondary: `$md`,
+  },
+
   fontSizes: {
-    10: '10px',
-    12: '12px',
-    14: '14px',
-    16: '16px',
-    18: '18px',
-    20: '20px',
-    24: '24px',
-    32: '32px',
-    36: '36px',
-    40: '40px',
-    48: '48px',
+    10: '0.625rem',
+    12: '0.75rem',
+    14: '0.875rem',
+    16: '1rem',
+    18: '1.125rem',
+    20: '1.25rem',
+    22: '1.375rem',
+    24: '1.5rem',
+    28: '1.75rem',
+    32: '2rem',
+    36: '2.25rem',
+    40: '2.5rem',
+    48: '3rem',
+  },
+  fonts: {
+    primary: 'Roboto',
+    widget: '$primary',
   },
-  fonts: {},
   fontWeights: {
-    400: '400',
-    500: '500',
-    600: '600',
-    700: '700',
+    regular: 400,
+    medium: 500,
+    semiBold: 600,
+    bold: 700,
+  },
+  lineHeights: {
+    12: '0.75rem',
+    16: '1rem',
+    20: '1.25rem',
+    24: '1.5rem',
+    26: '1.625rem',
+    28: '1.75rem',
+    30: '1.875rem',
+    36: '2.25rem',
+    40: '2.5rem',
+    44: '2.75rem',
+    52: '3.25rem',
+    64: '4rem',
   },
-  lineHeights: {},
   letterSpacings: {},
   sizes: {
     4: '4px',
@@ -90,20 +145,18 @@ const theme = {
     8: '8px',
     12: '12px',
     16: '16px',
+    18: '18px',
     20: '20px',
     24: '24px',
     28: '28px',
     32: '32px',
     36: '36px',
     40: '40px',
+    45: '45px',
     48: '48px',
   },
   borderWidths: {},
   borderStyles: {},
-  radii: {
-    5: '8px',
-    10: '12px',
-  },
   shadows: {
     s: '0px 3px 5px 3px #f0f2f5, 0px 6px 10px 3px #f0f2f5, 0px 1px 18px 3px #f0f2f5',
   },
@@ -123,37 +176,39 @@ const utils = {
 
 /* ----------------------- End of Values ----------------------- */
 
-const typedCreateStiches = createStitches as CreateStitches;
-
-export const { styled, css, createTheme, keyframes, globalCss, config } = typedCreateStiches<
-  '',
-  typeof media,
-  typeof theme,
-  DefaultThemeMap,
-  // TODO: Make `utils` typesafe as well.
-  {}
->({
-  media,
-  theme,
-  utils,
-});
+const typedCreateStiches = createStitches;
+
+export const { styled, css, createTheme, keyframes, globalCss, config } =
+  typedCreateStiches<'', typeof media, typeof theme, DefaultThemeMap>({
+    media,
+    theme,
+    utils,
+  });
 
 export const lightTheme = createTheme({});
 
 export const darkTheme = createTheme({
   colors: {
-    surface: '#000',
-    neutral900: '#f3f3f3',
-    neutral800: '#FAFAFA',
-    neutral700: '#EAEAEA',
-    neutral600: '#999999',
-    neutral500: '#888888',
-    neutral400: '#666666',
-    neutral300: '#444444',
-    neutral200: '#333333',
-    neutral100: '#111111',
-    foreground: '#fff',
-    background: '#000',
+    secondary400: '#469BF5',
+    secondary500: '#2284ED',
+    secondary600: '#2B3462',
+
+    neutral900: '#E9E9E9',
+    neutral800: '#B8B8B8',
+    neutral700: '#F2F2F2',
+    neutral600: '#EEEEEE',
+    neutral500: '#222222',
+    neutral400: '#1B1B1B',
+    neutral300: '#121212',
+    neutral200: '#111111',
+    neutral100: '#101010',
+
+    error500: '#FF5050',
+
+    warning500: '#FF8A20',
+
+    background: '#010101',
+    foreground: '#FDFDFD',
   },
   shadows: {
     s: '0px 3px 5px 3px #222, 0px 6px 10px 3px #222, 0px 1px 18px 3px #222',

package/src/types/index.ts

@@ -1,3 +1,2 @@
-export * from './wallet';
-
 export type { BestRouteWithFee } from './swaps';
+export type { ConnectedWallet } from './wallet';

package/src/types/meta.ts

@@ -1,4 +1,4 @@
-import { Token } from 'rango-sdk';
+import type { Token } from 'rango-sdk';
 
 export type TokenMeta = {
   blockchain: string;

package/src/types/swaps.ts

@@ -1,10 +1,11 @@
-import {
+import type {
   BestRouteResponse,
   BlockchainValidationStatus,
   SimulationResult,
   SwapResult,
   WalletRequiredAssets,
 } from 'rango-sdk';
+
 export type SwapStatus = 'running' | 'failed' | 'success';
 export type MessageSeverity = 'error' | 'warning' | 'info' | 'success';