@rango-dev/ui 0.1.10-next.69

package/src/components/Icon/CheckIcon.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { SvgWithFillColor } from './common';
+import { IconProps } from './types';
+
+export const CheckIcon = React.forwardRef<SVGSVGElement, 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,35 @@
+import * as React from 'react';
+import { SvgWithStrokeColor } from './common';
+import { IconProps } from './types';
+
+export const CheckSquareIcon = React.forwardRef<SVGSVGElement, 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,43 @@
+import * as React from 'react';
+import { IconProps } from './types';
+import { SvgWithFillColor } from './common';
+
+export const CheckWalletIcon = React.forwardRef<SVGSVGElement, 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/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/DeleteCircleIcon.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { SvgWithStrokeColor } from './common';
+import { IconProps } from './types';
+
+export const DeleteCircleIcon = React.forwardRef<SVGSVGElement, 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,48 @@
+import * as React from 'react';
+import { SvgWithFillColor } from './common';
+import { IconProps } from './types';
+
+export const DeleteWalletIcon = React.forwardRef<SVGSVGElement, 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/DownloadIcon.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { IconProps } from './types';
+import { SvgWithStrokeColor } from './common';
+
+export const DownloadIcon = React.forwardRef<SVGSVGElement, 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="M16.44 8.9c3.6.31 5.07 2.16 5.07 6.21v.13c0 4.47-1.79 6.26-6.26 6.26H8.74c-4.47 0-6.26-1.79-6.26-6.26v-.13c0-4.02 1.45-5.87 4.99-6.2M12 2v12.88"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M15.35 12.65 12 16l-3.35-3.35"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </SvgWithStrokeColor>
+    );
+  }
+);
+
+DownloadIcon.toString = () => '._icon';

package/src/components/Icon/GasIcon.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { SvgWithStrokeColor } from './common';
+import { IconProps } from './types';
+
+export const GasIcon = React.forwardRef<SVGSVGElement, 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="M4 22V5c0-2 1.34-3 3-3h8c1.66 0 3 1 3 3v17H4ZM2.5 22h17"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M8.89 10h4.23c1.04 0 1.89-.5 1.89-1.89V6.88c0-1.39-.85-1.89-1.89-1.89H8.89C7.85 4.99 7 5.49 7 6.88v1.23C7 9.5 7.85 10 8.89 10ZM7 13h3M18 16.01l4.5-.01v-6l-2-1"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </SvgWithStrokeColor>
+    );
+  }
+);
+
+GasIcon.toString = () => '._icon';

package/src/components/Icon/HistoryIcon.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { SvgWithFillColor } from './common';
+import { IconProps } from './types';
+
+export const HistoryIcon = React.forwardRef<SVGSVGElement, 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="M16.767 1.5c-.7.002-1.267.57-1.267 1.26V9h2.67c.63 0 1.07-.196 1.352-.478C19.804 8.24 20 7.8 20 7.17V4.75c0-.89-.363-1.704-.952-2.301a3.27 3.27 0 0 0-2.281-.949ZM14 2.76C14 1.23 15.25 0 16.77 0h.007a4.77 4.77 0 0 1 3.333 1.39l.004.003A4.775 4.775 0 0 1 21.5 4.75v2.42c0 .95-.304 1.8-.917 2.413-.613.613-1.462.917-2.413.917h-3.42a.75.75 0 0 1-.75-.75V2.76Z"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M1.057 1.431C1.862.5 3.097 0 4.75 0h12a.75.75 0 0 1 0 1.5c-.686 0-1.25.564-1.25 1.25v17c0 1.442-1.646 2.256-2.797 1.402l-.002-.002-1.718-1.285a.242.242 0 0 0-.313.025l-1.68 1.68a1.758 1.758 0 0 1-2.48 0l-.002-.001L4.85 19.9a.258.258 0 0 0-.34-.03l-1.707 1.278-.002.001C1.643 22.024 0 21.193 0 19.75v-15c0-1.203.27-2.408 1.057-3.319Zm13.245.069H4.75c-1.346 0-2.112.396-2.557.911C1.73 2.948 1.5 3.743 1.5 4.75v15c0 .216.235.325.397.202l.004-.002 1.709-1.28a1.757 1.757 0 0 1 2.3.17l.002.001L7.57 20.51a.259.259 0 0 0 .36 0l1.68-1.68c.61-.61 1.59-.688 2.283-.158l1.704 1.276c.17.125.403 0 .403-.198v-17c0-.45.109-.875.302-1.25Z"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M4 7.75A.75.75 0 0 1 4.75 7h6a.75.75 0 0 1 0 1.5h-6A.75.75 0 0 1 4 7.75ZM4.75 11.75A.75.75 0 0 1 5.5 11H10a.75.75 0 0 1 0 1.5H5.5a.75.75 0 0 1-.75-.75Z"
+        />
+      </SvgWithFillColor>
+    );
+  }
+);
+
+HistoryIcon.toString = () => '._icon';

package/src/components/Icon/HorizontalSwapIcon.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { SvgWithStrokeColor } from './common';
+import { IconProps } from './types';
+
+export const HorizontalSwapIcon = React.forwardRef<SVGSVGElement, 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="m17.15 13.82-3.04 3.04M6.85 13.82h10.3M6.85 10.18l3.04-3.04M17.15 10.18H6.85"
+          strokeWidth={1.5}
+          strokeMiterlimit={10}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </SvgWithStrokeColor>
+    );
+  }
+);
+
+HorizontalSwapIcon.toString = () => '._icon';

package/src/components/Icon/Icons.stories.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Icon, IconProps } from './types';
+import * as Icons from '.';
+import { ComponentMeta } from '@storybook/react';
+import { styled } from '../../theme';
+
+export default {
+  title: 'Components/Icons',
+  component: Icons.AngleRightIcon,
+  argTypes: {
+    color: {
+      name: 'color',
+      control: { type: 'select' },
+      options: ['primary', 'error', 'warning', 'success', 'black', 'white'],
+    },
+
+    size: {
+      name: 'size',
+      control: { type: 'radio' },
+      options: [16, 18, 20, 24, 28, 32, 36, 40],
+      defaultValue: 16,
+    },
+  },
+} as ComponentMeta<typeof Icons.AngleRightIcon>;
+
+const Container = styled('div', {
+  display: 'grid',
+  gridTemplateColumns: 'auto auto auto auto auto',
+  gap: 15,
+});
+
+export const Main = (props: IconProps) => (
+  <Container>
+    {Object.keys(Icons).map(icon => {
+      const Component = Icons[icon as Icon];
+      return (
+        <div>
+          <Component {...props} />
+          <p> {icon}</p>
+        </div>
+      );
+    })}
+  </Container>
+);

package/src/components/Icon/InfoCircleIcon.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { IconProps } from './types';
+import { SvgWithFillColor } from './common';
+
+export const InfoCircleIcon = React.forwardRef<SVGSVGElement, 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 10ZM12 8v5"
+          strokeWidth={2}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          stroke="#fff"
+        />
+        <path
+          d="M11.994 16h.01"
+          strokeWidth={2}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          stroke="#fff"
+        />
+      </SvgWithFillColor>
+    );
+  }
+);
+
+InfoCircleIcon.toString = () => '._icon';

package/src/components/Icon/MinusCircleIcon.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { SvgWithStrokeColor } from './common';
+import { IconProps } from './types';
+
+export const MinusCircleIcon = React.forwardRef<SVGSVGElement, 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="M11.92 22c5.5 0 10-4.5 10-10s-4.5-10-10-10-10 4.5-10 10 4.5 10 10 10ZM7.92 12h8"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </SvgWithStrokeColor>
+    );
+  }
+);
+
+MinusCircleIcon.toString = () => '._icon';

package/src/components/Icon/RetryIcon.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { SvgWithFillColor } from './common';
+import { IconProps } from './types';
+
+export const RetryIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color, size = 16, ...props }, forwardedRef) => {
+    return (
+      <SvgWithFillColor
+        width={size}
+        height={size}
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        color={color}
+        className="_icon"
+        {...props}
+        ref={forwardedRef}
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M17.016 13.45c.199-.384.002-.842-.397-1.005-.406-.166-.864.033-1.077.416A6.17 6.17 0 0 1 13 15.345a6.051 6.051 0 0 1-4.244.513 6.127 6.127 0 0 1-3.543-2.425 6.286 6.286 0 0 1 .73-8.095A6.089 6.089 0 0 1 9.86 3.604a6.07 6.07 0 0 1 4.083 1.286 6.196 6.196 0 0 1 1.65 1.97l-1.053.363a.302.302 0 0 0-.073.534l2.607 1.758a.3.3 0 0 0 .45-.155l1.01-3.007a.298.298 0 0 0-.38-.378l-1.057.365a7.79 7.79 0 0 0-2.194-2.713 7.627 7.627 0 0 0-5.13-1.615A7.65 7.65 0 0 0 4.852 4.19a7.898 7.898 0 0 0-.917 10.17 7.7 7.7 0 0 0 4.452 3.048 7.604 7.604 0 0 0 5.333-.644 7.757 7.757 0 0 0 3.297-3.315Z"
+          fill={color}
+        />
+      </SvgWithFillColor>
+    );
+  }
+);
+
+RetryIcon.toString = () => '._icon';

package/src/components/Icon/RetryLeftIcon.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { IconProps } from './types';
+import { SvgWithStrokeColor } from './common';
+
+export const RetryLeftIcon = React.forwardRef<SVGSVGElement, 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.11 5.08c.87-.26 1.83-.43 2.89-.43 4.79 0 8.67 3.88 8.67 8.67s-3.88 8.67-8.67 8.67-8.67-3.88-8.67-8.67c0-1.78.54-3.44 1.46-4.82M7.87 5.32 10.76 2M7.87 5.32l3.37 2.46"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </SvgWithStrokeColor>
+    );
+  }
+);
+
+RetryLeftIcon.toString = () => '._icon';

package/src/components/Icon/RetryRightIcon.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { SvgWithStrokeColor } from './common';
+import { IconProps } from './types';
+
+export const RetryRightIcon = React.forwardRef<SVGSVGElement, 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="M14.89 5.08c-.87-.26-1.83-.43-2.89-.43-4.79 0-8.67 3.88-8.67 8.67C3.33 18.12 7.21 22 12 22s8.67-3.88 8.67-8.67c0-1.78-.54-3.44-1.46-4.82M16.13 5.32 13.24 2M16.13 5.32l-3.37 2.46"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </SvgWithStrokeColor>
+    );
+  }
+);
+
+RetryRightIcon.toString = () => '._icon';

package/src/components/Icon/SearchIcon.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { SvgWithStrokeColor } from './common';
+import { IconProps } from './types';
+
+export const SearchIcon = React.forwardRef<SVGSVGElement, 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="M11.5 21a9.5 9.5 0 1 0 0-19 9.5 9.5 0 0 0 0 19ZM22 22l-2-2"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </SvgWithStrokeColor>
+    );
+  }
+);
+
+SearchIcon.toString = () => '._icon';

package/src/components/Icon/SearchMinusIcon.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { SvgWithStrokeColor } from './common';
+import { IconProps } from './types';
+
+export const SearchMinusIcon = React.forwardRef<SVGSVGElement, 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 11.7h5M11.5 21a9.5 9.5 0 1 0 0-19 9.5 9.5 0 0 0 0 19ZM22 22l-2-2"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </SvgWithStrokeColor>
+    );
+  }
+);
+
+SearchMinusIcon.toString = () => '._icon';

package/src/components/Icon/SettingIcon.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { SvgWithStrokeColor } from './common';
+import { IconProps } from './types';
+
+export const SettingsIcon = React.forwardRef<SVGSVGElement, 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.5 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"
+          strokeWidth={1.5}
+          strokeMiterlimit={10}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M2.5 12.88v-1.76c0-1.04.85-1.9 1.9-1.9 1.81 0 2.55-1.28 1.64-2.85-.52-.9-.21-2.07.7-2.59l1.73-.99c.79-.47 1.81-.19 2.28.6l.11.19c.9 1.57 2.38 1.57 3.29 0l.11-.19c.47-.79 1.49-1.07 2.28-.6l1.73.99c.91.52 1.22 1.69.7 2.59-.91 1.57-.17 2.85 1.64 2.85 1.04 0 1.9.85 1.9 1.9v1.76c0 1.04-.85 1.9-1.9 1.9-1.81 0-2.55 1.28-1.64 2.85.52.91.21 2.07-.7 2.59l-1.73.99c-.79.47-1.81.19-2.28-.6l-.11-.19c-.9-1.57-2.38-1.57-3.29 0l-.11.19c-.47.79-1.49 1.07-2.28.6l-1.73-.99a1.899 1.899 0 0 1-.7-2.59c.91-1.57.17-2.85-1.64-2.85-1.05 0-1.9-.86-1.9-1.9Z"
+          strokeWidth={1.5}
+          strokeMiterlimit={10}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </SvgWithStrokeColor>
+    );
+  }
+);
+
+SettingsIcon.toString = () => '._icon';