@rango-dev/ui 0.1.10-next.102

package/src/components/Icon/AddWalletIcon.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { SvgWithFillColor } from './common';
+import { IconProps } from './types';
+
+export const AddWalletIcon: React.FC<IconProps> = ({
+  size = 16,
+  color,
+  ...props
+}) => {
+  return (
+    <SvgWithFillColor
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      color={color}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className="_icon"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.569 7.205a3.018 3.018 0 0 0-3.01 3.01v3.076a4.749 4.749 0 0 1 6.5 4.414c0 .808-.206 1.579-.574 2.25h8.564a3.018 3.018 0 0 0 3.01-3.01v-.44h-1.15c-1.41 0-2.778-1.03-2.907-2.553a2.758 2.758 0 0 1 .816-2.227 2.743 2.743 0 0 1 1.97-.82h1.27v-.69a3.018 3.018 0 0 0-3.01-3.01H6.569Zm-4.51 3.01a4.518 4.518 0 0 1 4.51-4.51h11.48a4.518 4.518 0 0 1 4.51 4.51v1.44a.75.75 0 0 1-.75.75h-2.02c-.36 0-.675.14-.903.373l-.014.014c-.266.26-.414.63-.377 1.022l.001.009c.053.635.664 1.182 1.413 1.182h1.9a.75.75 0 0 1 .75.75v1.19a4.518 4.518 0 0 1-4.51 4.51H7.939a.75.75 0 0 1-.482-1.324c.243-.204.457-.457.624-.744l.01-.015a3.17 3.17 0 0 0 .468-1.667 3.249 3.249 0 0 0-5.283-2.533.75.75 0 0 1-1.217-.587v-4.37Z"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M14.409 2.655a1.15 1.15 0 0 0-1.555-1.078l-7.94 3a2.098 2.098 0 0 0-1.355 1.968v4.57a.75.75 0 0 1-1.5 0v-4.57c0-1.5.921-2.84 2.324-3.371l7.94-3c1.733-.657 3.586.629 3.586 2.481v3.8a.75.75 0 0 1-1.5 0v-3.8ZM19.787 12.405c-.359 0-.674.14-.902.374l-.014.013c-.266.26-.414.63-.377 1.022v.01c.054.634.664 1.181 1.413 1.181h1.943a.276.276 0 0 0 .267-.27v-2.06a.276.276 0 0 0-.267-.27h-2.063Zm-1.97-.68a2.743 2.743 0 0 1 1.97-.82h2.107a1.777 1.777 0 0 1 1.723 1.77v2.06a1.777 1.777 0 0 1-1.75 1.77h-1.96c-1.41 0-2.777-1.03-2.907-2.553a2.759 2.759 0 0 1 .817-2.227Z"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.559 10.705a.75.75 0 0 1 .75-.75h7a.75.75 0 0 1 0 1.5h-7a.75.75 0 0 1-.75-.75ZM5.309 14.455c-.762 0-1.469.267-2.033.717h-.001a3.22 3.22 0 0 0-1.216 2.533c0 .61.17 1.184.468 1.667l.006.01a3.22 3.22 0 0 0 2.776 1.573 3.155 3.155 0 0 0 2.148-.824c.243-.204.457-.457.624-.744l.01-.015a3.17 3.17 0 0 0 .468-1.667 3.249 3.249 0 0 0-3.25-3.25Zm-2.967-.457a4.749 4.749 0 0 1 7.717 3.707c0 .888-.248 1.73-.687 2.446-.25.427-.57.808-.941 1.12a4.656 4.656 0 0 1-3.122 1.184 4.72 4.72 0 0 1-4.062-2.301 4.671 4.671 0 0 1-.688-2.449 4.72 4.72 0 0 1 1.783-3.707Z"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M3.07 17.685a.75.75 0 0 1 .75-.75H6.8a.75.75 0 0 1 0 1.5H3.82a.75.75 0 0 1-.75-.75Z"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5.309 15.475a.75.75 0 0 1 .75.75v2.99a.75.75 0 0 1-1.5 0v-2.99a.75.75 0 0 1 .75-.75Z"
+      />
+    </SvgWithFillColor>
+  );
+};
+
+AddWalletIcon.toString = () => '._icon';

package/src/components/Icon/AngleDownIcon.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { IconProps } from './types';
+import { SvgWithStrokeColor } from './common';
+
+export const AngleDownIcon: React.FC<IconProps> = ({
+  size = 16,
+  color,
+  ...props
+}) => (
+  <SvgWithStrokeColor
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    color={color}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className="_icon"
+    {...props}
+  >
+    <path
+      d="m19.92 8.95-6.52 6.52c-.77.77-2.03.77-2.8 0L4.08 8.95"
+      strokeWidth={1.5}
+      strokeMiterlimit={10}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </SvgWithStrokeColor>
+);
+
+AngleDownIcon.toString = () => '._icon';

package/src/components/Icon/AngleLeftIcon.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { IconProps } from './types';
+import { SvgWithStrokeColor } from './common';
+import { AngleDownIcon } from './AngleDownIcon';
+
+export const AngleLeftIcon: React.FC<IconProps> = ({
+  size = 16,
+  color,
+  ...props
+}) => {
+  return (
+    <SvgWithStrokeColor
+      width={size}
+      height={size}
+      fill="none"
+      viewBox="0 0 24 24"
+      color={color}
+      xmlns="http://www.w3.org/2000/svg"
+      className="_icon"
+      {...props}
+    >
+      <path
+        d="M15 19.92 8.48 13.4c-.77-.77-.77-2.03 0-2.8L15 4.08"
+        strokeWidth={1.5}
+        strokeMiterlimit={10}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </SvgWithStrokeColor>
+  );
+};
+
+AngleDownIcon.toString = () => '._icon';

package/src/components/Icon/AngleRightIcon.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { IconProps } from './types';
+import { SvgWithStrokeColor } from './common';
+
+export const AngleRightIcon: React.FC<IconProps> = ({
+  size = 16,
+  color,
+  ...props
+}) => {
+  return (
+    <SvgWithStrokeColor
+      width={size}
+      height={size}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      color={color}
+      className="_icon"
+      {...props}
+    >
+      <path
+        d="m8.91 19.92 6.52-6.52c.77-.77.77-2.03 0-2.8L8.91 4.08"
+        strokeWidth={1.5}
+        strokeMiterlimit={10}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </SvgWithStrokeColor>
+  );
+};
+
+AngleRightIcon.toString = () => '._icon';

package/src/components/Icon/AngleUpIcon.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { IconProps } from './types';
+import { SvgWithStrokeColor } from './common';
+
+export const AngleUpIcon: React.FC<IconProps> = ({
+  size = 16,
+  color,
+  ...props
+}) => {
+  return (
+    <SvgWithStrokeColor
+      width={size}
+      height={size}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      color={color}
+      className="_icon"
+      {...props}
+    >
+      <path
+        d="M19.92 15.05 13.4 8.53c-.77-.77-2.03-.77-2.8 0l-6.52 6.52"
+        strokeWidth={1.5}
+        strokeMiterlimit={10}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </SvgWithStrokeColor>
+  );
+};
+
+AngleUpIcon.toString = () => '._icon';

package/src/components/Icon/ArrowRightIcon.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { IconProps } from './types';
+import { SvgWithStrokeColor } from './common';
+
+export const ArrowRightIcon: React.FC<IconProps> = ({
+  size = 16,
+  color,
+  ...props
+}) => {
+  return (
+    <SvgWithStrokeColor
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      color={color}
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      xmlns="http://www.w3.org/2000/svg"
+      className="_icon"
+      {...props}
+    >
+      <line x1="5" y1="12" x2="19" y2="12"></line>
+      <polyline points="12 5 19 12 12 19"></polyline>
+    </SvgWithStrokeColor>
+  );
+};
+
+ArrowRightIcon.toString = () => '._icon';

package/src/components/Icon/BagIcon.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { SvgWithStrokeColor } from './common';
+import { IconProps } from './types';
+
+export const BagIcon: React.FC<IconProps> = ({
+  size = 16,
+  color,
+  ...props
+}) => {
+  return (
+    <SvgWithStrokeColor
+      width={size}
+      height={size}
+      viewBox="0 0 32 32"
+      color={color}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className="_icon"
+      {...props}
+    >
+      <g clipPath="url(#a)" strokeWidth={1.5}>
+        <path d="M9.333 9.333V4.8a.8.8 0 0 1 .8-.8h11.734a.8.8 0 0 1 .8.8v4.533M13.333 4v5.333M16 4v5.333m9.333 17.334H6.667A2.667 2.667 0 0 1 4 24V12a2.667 2.667 0 0 1 2.667-2.667h18.666A2.667 2.667 0 0 1 28 12v12a2.667 2.667 0 0 1-2.667 2.667Z" />
+        <path
+          d="M22 18.666a.667.667 0 1 1 0-1.334.667.667 0 0 1 0 1.334Z"
+          fill={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="a">
+          <path fill={color} d="M0 0h32v32H0z" />
+        </clipPath>
+      </defs>
+    </SvgWithStrokeColor>
+  );
+};
+
+BagIcon.toString = () => '._icon';

package/src/components/Icon/BanIcon.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { SvgWithStrokeColor } from './common';
+import { IconProps } from './types';
+
+export const BanIcon: React.FC<IconProps> = ({
+  size = 16,
+  color,
+  ...props
+}) => {
+  return (
+    <SvgWithStrokeColor
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      color={color}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className="_icon"
+      {...props}
+    >
+      <path
+        d="M12 22c5.52 0 10-4.48 10-10S17.52 2 12 2 2 6.48 2 12s4.48 10 10 10ZM18.9 5l-14 14"
+        strokeWidth={1.5}
+        strokeMiterlimit={10}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </SvgWithStrokeColor>
+  );
+};
+
+BanIcon.toString = () => '._icon';

package/src/components/Icon/CheckCircleIcon.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { IconProps } from './types';
+import { SvgWithFillColor } from './common';
+
+export const CheckCircleIcon: React.FC<IconProps> = ({
+  size = 16,
+  color,
+  ...props
+}) => {
+  return (
+    <SvgWithFillColor
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      color={color}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className="_icon"
+      {...props}
+    >
+      <path
+        d="M12 22c5.5 0 10-4.5 10-10S17.5 2 12 2 2 6.5 2 12s4.5 10 10 10Z"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        stroke="#fff"
+      />
+      <path
+        d="m7.75 12 2.83 2.83 5.67-5.66"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        stroke="#fff"
+      />
+    </SvgWithFillColor>
+  );
+};
+
+CheckCircleIcon.toString = () => '._icon';

package/src/components/Icon/CheckIcon.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { SvgWithFillColor } from './common';
+import { IconProps } from './types';
+
+export const CheckIcon: React.FC<IconProps> = ({
+  size = 16,
+  color,
+  ...props
+}) => {
+  return (
+    <SvgWithFillColor
+      width={size}
+      height={size}
+      viewBox="0 0 15 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      color={color}
+      className="_icon"
+      {...props}
+    >
+      <path
+        d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
+        fillRule="evenodd"
+        clipRule="evenodd"
+      />
+    </SvgWithFillColor>
+  );
+};
+
+CheckIcon.toString = () => '._icon';

package/src/components/Icon/CheckSquareIcon.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { SvgWithStrokeColor } from './common';
+import { IconProps } from './types';
+
+export const CheckSquareIcon: React.FC<IconProps> = ({
+  size = 16,
+  color,
+  ...props
+}) => {
+  return (
+    <SvgWithStrokeColor
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      color={color}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className="_icon"
+      {...props}
+    >
+      <path
+        d="M9 22h6c5 0 7-2 7-7V9c0-5-2-7-7-7H9C4 2 2 4 2 9v6c0 5 2 7 7 7Z"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="m7.75 12 2.83 2.83 5.67-5.66"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </SvgWithStrokeColor>
+  );
+};
+
+CheckSquareIcon.toString = () => '._icon';

package/src/components/Icon/CheckWalletIcon.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { IconProps } from './types';
+import { SvgWithFillColor } from './common';
+
+export const CheckWalletIcon: React.FC<IconProps> = ({
+  size = 16,
+  color,
+  ...props
+}) => {
+  return (
+    <SvgWithFillColor
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      color={color}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className="_icon"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.686 7.205a3.018 3.018 0 0 0-3.01 3.01v3.076a4.749 4.749 0 0 1 6.5 4.414c0 .808-.205 1.579-.573 2.25h8.563a3.018 3.018 0 0 0 3.01-3.01v-.44h-1.15c-1.41 0-2.778-1.03-2.907-2.553a2.758 2.758 0 0 1 .816-2.227 2.743 2.743 0 0 1 1.97-.82h1.27v-.69a3.018 3.018 0 0 0-3.01-3.01H6.686Zm-4.51 3.01a4.518 4.518 0 0 1 4.51-4.51h11.48a4.518 4.518 0 0 1 4.51 4.51v1.44a.75.75 0 0 1-.75.75h-2.02c-.36 0-.675.14-.903.373l-.013.014c-.266.26-.415.63-.378 1.022l.001.009c.053.635.664 1.182 1.413 1.182h1.9a.75.75 0 0 1 .75.75v1.19a4.518 4.518 0 0 1-4.51 4.51H8.056a.75.75 0 0 1-.482-1.324c.243-.204.457-.457.624-.744l.01-.015a3.17 3.17 0 0 0 .468-1.667 3.249 3.249 0 0 0-5.283-2.533.75.75 0 0 1-1.217-.587v-4.37Z"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M14.526 2.655a1.15 1.15 0 0 0-1.554-1.078l-7.94 3a2.098 2.098 0 0 0-1.356 1.968v4.57a.75.75 0 0 1-1.5 0v-4.57c0-1.5.921-2.84 2.324-3.371l7.94-3c1.733-.657 3.586.629 3.586 2.481v3.8a.75.75 0 0 1-1.5 0v-3.8ZM19.905 12.405c-.36 0-.675.14-.903.374l-.014.013c-.265.26-.414.63-.377 1.022l.001.01c.053.634.664 1.181 1.413 1.181h1.942a.276.276 0 0 0 .268-.27v-2.06a.276.276 0 0 0-.268-.27h-2.062Zm-1.971-.68a2.743 2.743 0 0 1 1.97-.82h2.107a1.777 1.777 0 0 1 1.724 1.77v2.06a1.777 1.777 0 0 1-1.75 1.77h-1.96c-1.41 0-2.778-1.03-2.907-2.553a2.758 2.758 0 0 1 .816-2.227Z"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.676 10.705a.75.75 0 0 1 .75-.75h7a.75.75 0 0 1 0 1.5h-7a.75.75 0 0 1-.75-.75ZM5.426 14.455c-.762 0-1.469.267-2.033.717h-.001a3.22 3.22 0 0 0-1.216 2.533c0 .61.17 1.184.468 1.667l.006.01a3.22 3.22 0 0 0 2.776 1.573 3.155 3.155 0 0 0 2.148-.824c.243-.204.457-.457.624-.744l.01-.015a3.17 3.17 0 0 0 .468-1.667 3.249 3.249 0 0 0-3.25-3.25Zm-2.967-.457a4.749 4.749 0 0 1 7.717 3.707c0 .888-.248 1.73-.687 2.446-.25.427-.57.808-.941 1.12a4.656 4.656 0 0 1-3.122 1.184 4.72 4.72 0 0 1-4.062-2.301 4.671 4.671 0 0 1-.688-2.449 4.72 4.72 0 0 1 1.783-3.707Z"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.538 16.215a.75.75 0 0 1-.042 1.06l-2.13 1.97a.75.75 0 0 1-1.04-.02l-.99-.99a.75.75 0 1 1 1.062-1.06l.48.48 1.6-1.48a.75.75 0 0 1 1.06.04Z"
+      />
+    </SvgWithFillColor>
+  );
+};
+
+CheckWalletIcon.toString = () => '._icon';

package/src/components/Icon/ChevronRightIcon.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { SvgWithStrokeColor } from './common';
+import { IconProps } from './types';
+
+export const ChevronRightIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = 'black', size = 16, ...props }, forwardedRef) => {
+    return (
+      <SvgWithStrokeColor
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        color={color}
+        viewBox={`0 0 24 24`}
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        className="_icon"
+        {...props}
+        ref={forwardedRef}
+      >
+        <polyline points="9 18 15 12 9 6"></polyline>
+      </SvgWithStrokeColor>
+    );
+  }
+);
+
+ChevronRightIcon.toString = () => '._icon';

package/src/components/Icon/CloseIcon.tsx

@@ -0,0 +1,9 @@
+import { styled } from '../../theme';
+import { AddIcon } from './AddIcon';
+
+export const CloseIcon = styled(AddIcon, {
+  transform: 'rotate(45deg)',
+  cursor: 'pointer',
+});
+
+CloseIcon.toString = () => '._icon';

package/src/components/Icon/CopyIcon.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { SvgWithFillColor } from './common';
+import { IconProps } from './types';
+
+export const CopyIcon: React.FC<IconProps> = ({
+  size = 16,
+  color,
+  ...props
+}) => {
+  return (
+    <SvgWithFillColor
+      width={size}
+      height={size}
+      viewBox="0 0 64 64"
+      color={color}
+      xmlns="http://www.w3.org/2000/svg"
+      className="_icon"
+      {...props}
+    >
+      <g id="Text-files">
+        <path
+          d="M53.9791489,9.1429005H50.010849c-0.0826988,0-0.1562004,0.0283995-0.2331009,0.0469999V5.0228
+		C49.7777481,2.253,47.4731483,0,44.6398468,0h-34.422596C7.3839517,0,5.0793519,2.253,5.0793519,5.0228v46.8432999
+		c0,2.7697983,2.3045998,5.0228004,5.1378999,5.0228004h6.0367002v2.2678986C16.253952,61.8274002,18.4702511,64,21.1954517,64
+		h32.783699c2.7252007,0,4.9414978-2.1725998,4.9414978-4.8432007V13.9861002
+		C58.9206467,11.3155003,56.7043495,9.1429005,53.9791489,9.1429005z M7.1110516,51.8661003V5.0228
+		c0-1.6487999,1.3938999-2.9909999,3.1062002-2.9909999h34.422596c1.7123032,0,3.1062012,1.3422,3.1062012,2.9909999v46.8432999
+		c0,1.6487999-1.393898,2.9911003-3.1062012,2.9911003h-34.422596C8.5049515,54.8572006,7.1110516,53.5149002,7.1110516,51.8661003z
+		 M56.8888474,59.1567993c0,1.550602-1.3055,2.8115005-2.9096985,2.8115005h-32.783699
+		c-1.6042004,0-2.9097996-1.2608986-2.9097996-2.8115005v-2.2678986h26.3541946
+		c2.8333015,0,5.1379013-2.2530022,5.1379013-5.0228004V11.1275997c0.0769005,0.0186005,0.1504021,0.0469999,0.2331009,0.0469999
+		h3.9682999c1.6041985,0,2.9096985,1.2609005,2.9096985,2.8115005V59.1567993z"
+        />
+        <path
+          d="M38.6031494,13.2063999H16.253952c-0.5615005,0-1.0159006,0.4542999-1.0159006,1.0158005
+		c0,0.5615997,0.4544001,1.0158997,1.0159006,1.0158997h22.3491974c0.5615005,0,1.0158997-0.4542999,1.0158997-1.0158997
+		C39.6190491,13.6606998,39.16465,13.2063999,38.6031494,13.2063999z"
+        />
+        <path
+          d="M38.6031494,21.3334007H16.253952c-0.5615005,0-1.0159006,0.4542999-1.0159006,1.0157986
+		c0,0.5615005,0.4544001,1.0159016,1.0159006,1.0159016h22.3491974c0.5615005,0,1.0158997-0.454401,1.0158997-1.0159016
+		C39.6190491,21.7877007,39.16465,21.3334007,38.6031494,21.3334007z"
+        />
+        <path
+          d="M38.6031494,29.4603004H16.253952c-0.5615005,0-1.0159006,0.4543991-1.0159006,1.0158997
+		s0.4544001,1.0158997,1.0159006,1.0158997h22.3491974c0.5615005,0,1.0158997-0.4543991,1.0158997-1.0158997
+		S39.16465,29.4603004,38.6031494,29.4603004z"
+        />
+        <path
+          d="M28.4444485,37.5872993H16.253952c-0.5615005,0-1.0159006,0.4543991-1.0159006,1.0158997
+		s0.4544001,1.0158997,1.0159006,1.0158997h12.1904964c0.5615025,0,1.0158005-0.4543991,1.0158005-1.0158997
+		S29.0059509,37.5872993,28.4444485,37.5872993z"
+        />
+      </g>
+    </SvgWithFillColor>
+  );
+};
+
+CopyIcon.toString = () => '._icon';

package/src/components/Icon/DeleteCircleIcon.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { SvgWithStrokeColor } from './common';
+import { IconProps } from './types';
+
+export const DeleteCircleIcon: React.FC<IconProps> = ({
+  size = 16,
+  color,
+  ...props
+}) => {
+  return (
+    <SvgWithStrokeColor
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      color={color}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className="_icon"
+      {...props}
+    >
+      <path
+        d="M12 22c5.5 0 10-4.5 10-10S17.5 2 12 2 2 6.5 2 12s4.5 10 10 10ZM9.17 14.83l5.66-5.66M14.83 14.83 9.17 9.17"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </SvgWithStrokeColor>
+  );
+};
+
+DeleteCircleIcon.toString = () => '._icon';

package/src/components/Icon/DeleteWalletIcon.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { SvgWithFillColor } from './common';
+import { IconProps } from './types';
+
+export const DeleteWalletIcon: React.FC<IconProps> = ({
+  size = 16,
+  color,
+  ...props
+}) => {
+  return (
+    <SvgWithFillColor
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      color={color}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className="_icon"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.627 7.205a3.018 3.018 0 0 0-3.01 3.01v3.076a4.749 4.749 0 0 1 6.5 4.414c0 .808-.205 1.579-.573 2.25h8.563a3.018 3.018 0 0 0 3.01-3.01v-.44h-1.15c-1.41 0-2.777-1.03-2.907-2.553a2.759 2.759 0 0 1 .817-2.227 2.743 2.743 0 0 1 1.97-.82h1.27v-.69a3.018 3.018 0 0 0-3.01-3.01H6.627Zm-4.51 3.01a4.518 4.518 0 0 1 4.51-4.51h11.48a4.518 4.518 0 0 1 4.51 4.51v1.44a.75.75 0 0 1-.75.75h-2.02c-.359 0-.675.14-.902.373l-.014.014c-.266.26-.415.63-.377 1.022v.009c.054.635.664 1.182 1.413 1.182h1.9a.75.75 0 0 1 .75.75v1.19a4.518 4.518 0 0 1-4.51 4.51H7.997a.75.75 0 0 1-.482-1.325c.243-.203.457-.456.624-.743l.01-.016a3.17 3.17 0 0 0 .468-1.666 3.249 3.249 0 0 0-5.282-2.533.75.75 0 0 1-1.218-.587v-4.37Z"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M14.467 2.655a1.15 1.15 0 0 0-1.554-1.079l-7.94 3a2.098 2.098 0 0 0-1.356 1.97v4.569a.75.75 0 1 1-1.5 0v-4.57c0-1.5.922-2.84 2.325-3.371l7.94-3c1.732-.657 3.585.629 3.585 2.481v3.8a.75.75 0 0 1-1.5 0v-3.8ZM19.846 12.405c-.359 0-.675.14-.903.373l-.013.014c-.266.26-.415.63-.377 1.022v.009c.053.635.664 1.182 1.413 1.182h1.943a.276.276 0 0 0 .267-.27v-2.06a.276.276 0 0 0-.267-.27h-2.063Zm-1.97-.68a2.743 2.743 0 0 1 1.97-.82h2.107a1.777 1.777 0 0 1 1.723 1.77v2.06a1.777 1.777 0 0 1-1.75 1.77h-1.96c-1.41 0-2.778-1.03-2.907-2.553a2.759 2.759 0 0 1 .816-2.227Z"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.617 10.705a.75.75 0 0 1 .75-.75h7a.75.75 0 0 1 0 1.5h-7a.75.75 0 0 1-.75-.75ZM5.367 14.455c-.761 0-1.468.267-2.032.717h-.002a3.22 3.22 0 0 0-1.216 2.533c0 .61.17 1.183.469 1.666l.006.01a3.22 3.22 0 0 0 2.775 1.574 3.155 3.155 0 0 0 2.148-.825c.243-.203.457-.456.624-.743l.01-.016a3.17 3.17 0 0 0 .468-1.666 3.249 3.249 0 0 0-3.25-3.25ZM2.4 13.998a4.749 4.749 0 0 1 7.717 3.707 4.67 4.67 0 0 1-.687 2.446c-.25.427-.57.808-.94 1.12a4.655 4.655 0 0 1-3.123 1.184 4.72 4.72 0 0 1-4.061-2.301 4.67 4.67 0 0 1-.689-2.449A4.72 4.72 0 0 1 2.4 13.998Z"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M3.785 16.106a.75.75 0 0 1 1.06-.003l2.12 2.11a.75.75 0 1 1-1.058 1.064l-2.12-2.11a.75.75 0 0 1-.002-1.061Z"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.948 16.136a.75.75 0 0 1-.002 1.06l-2.12 2.11a.75.75 0 0 1-1.058-1.063l2.12-2.11a.75.75 0 0 1 1.06.003Z"
+      />
+    </SvgWithFillColor>
+  );
+};
+
+DeleteWalletIcon.toString = () => '._icon';

package/src/components/Icon/DisconnectIcon.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { SvgWithStrokeColor } from './common';
+import { IconProps } from './types';
+
+export const DisconnectIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = 'black', size = 16, ...props }, forwardedRef) => {
+    return (
+      <SvgWithStrokeColor
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        color={color}
+        viewBox={`0 0 24 24`}
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        className="_icon"
+        {...props}
+        ref={forwardedRef}
+      >
+        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
+        <polyline points="16 17 21 12 16 7"></polyline>
+        <line x1="21" y1="12" x2="9" y2="12"></line>
+      </SvgWithStrokeColor>
+    );
+  }
+);
+
+DisconnectIcon.toString = () => '._icon';