@rango-dev/ui 0.15.1-next.2 → 0.15.1-next.3

package/src/components/Header/Header.styles.ts

@@ -0,0 +1,18 @@
+import { styled } from '../../theme';
+
+export const Container = styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: '$15 $20',
+  backgroundColor: '$neutral100',
+  position: 'relative',
+  borderTopRightRadius: '$md',
+  borderTopLeftRadius: '$md',
+});
+
+export const Suffix = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  gap: '$5',
+});

package/src/components/Header/Header.tsx

@@ -1,39 +1,24 @@
-import { styled } from '../../theme';
-import React, { PropsWithChildren } from 'react';
-import { AngleLeftIcon } from '../Icon';
-import { Typography } from '../Typography';
-import { Button } from '../Button';
+import type { PropTypes } from './Header.types';
+import type { PropsWithChildren } from 'react';
 
-const HeaderContainer = styled('div', {
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  padding: '$8 0',
-  position: 'relative',
-});
+import React from 'react';
 
-const BackButton = styled(Button, {
-  padding: '$8',
-});
+import { Typography } from '../Typography';
 
-interface PropTypes {
-  onBack?: () => void;
-  prefix?: React.ReactNode;
-  suffix?: React.ReactNode;
-  title: string;
-}
+import { Container, Suffix } from './Header.styles';
 
-export function Header(props: PropsWithChildren<PropTypes>) {
+export function Header({
+  prefix,
+  suffix,
+  title,
+}: PropsWithChildren<PropTypes>) {
   return (
-    <HeaderContainer>
-      {props.onBack ? (
-        <BackButton variant="ghost" size="small" onClick={props.onBack}>
-          <AngleLeftIcon size={24} />
-        </BackButton>
-      ) : null}
-      {props.prefix}
-      <Typography variant="h4">{props.title}</Typography>
-      {props.suffix || <div></div>}
-    </HeaderContainer>
+    <Container>
+      {prefix}
+      <Typography variant="headline" size="small">
+        {title}
+      </Typography>
+      <Suffix>{suffix}</Suffix>
+    </Container>
   );
 }

package/src/components/Header/Header.types.ts

@@ -0,0 +1,5 @@
+export interface PropTypes {
+  prefix?: React.ReactNode;
+  suffix?: React.ReactNode;
+  title: string;
+}

package/src/components/I18nManager/I18nManager.tsx

@@ -1,18 +1,20 @@
-import React, { useEffect } from 'react';
+import type { PropsWithChildren } from 'react';
+
 import { i18n } from '@lingui/core';
 import { I18nProvider } from '@lingui/react';
-import { PropsWithChildren } from 'react';
-/* 
-  Note: esbuild doesn't work properly with paths yet, so I couldn't use `paths` to make this path shorter. 
-  e.g:
-  "paths": {
-    "translations/*": ["../../translations/*"]
-  }  
-*/
+import React, { useEffect } from 'react';
+
+/*
+ *Note: esbuild doesn't work properly with paths yet, so I couldn't use `paths` to make this path shorter.
+ *e.g:
+ *"paths": {
+ *  "translations/*": ["../../translations/*"]
+ *}
+ */
 import { messages as enMessages } from '../../../../../translations/en';
 import { messages as esMessages } from '../../../../../translations/es';
-import { messages as jpMessages } from '../../../../../translations/jp';
 import { messages as frMessages } from '../../../../../translations/fr';
+import { messages as jpMessages } from '../../../../../translations/jp';
 
 const DEFAULT_LANGUAGE = 'en';
 const messages = {

package/src/components/Icon/AddCircleIcon.tsx

@@ -16,8 +16,7 @@ export const AddCircleIcon: React.FC<IconProps> = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...props}>
       <path
         d="M12 22c5.5 0 10-4.5 10-10S17.5 2 12 2 2 6.5 2 12s4.5 10 10 10ZM8 12h8M12 16V8"
         strokeWidth={1.5}

package/src/components/Icon/AddIcon.tsx

@@ -16,8 +16,7 @@ export const AddIcon: React.FC<IconProps> = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...props}>
       <path
         d="M6 12h12M12 18V6"
         strokeWidth={1.5}

package/src/components/Icon/AddWalletIcon.tsx

@@ -16,8 +16,7 @@ export const AddWalletIcon: React.FC<IconProps> = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...props}>
       <path
         fillRule="evenodd"
         clipRule="evenodd"

package/src/components/Icon/AngleDownIcon.tsx

@@ -15,8 +15,7 @@ export const AngleDownIcon: React.FC<IconProps> = ({
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     className="_icon"
-    {...props}
-  >
+    {...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}

package/src/components/Icon/AngleLeftIcon.tsx

@@ -17,8 +17,7 @@ export const AngleLeftIcon: React.FC<IconProps> = ({
       color={color}
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...props}>
       <path
         d="M15 19.92 8.48 13.4c-.77-.77-.77-2.03 0-2.8L15 4.08"
         strokeWidth={1.5}

package/src/components/Icon/AngleRightIcon.tsx

@@ -16,8 +16,7 @@ export const AngleRightIcon: React.FC<IconProps> = ({
       viewBox="0 0 24 24"
       color={color}
       className="_icon"
-      {...props}
-    >
+      {...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}

package/src/components/Icon/AngleUpIcon.tsx

@@ -16,8 +16,7 @@ export const AngleUpIcon: React.FC<IconProps> = ({
       viewBox="0 0 24 24"
       color={color}
       className="_icon"
-      {...props}
-    >
+      {...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}

package/src/components/Icon/ArrowRightIcon.tsx

@@ -20,8 +20,7 @@ export const ArrowRightIcon: React.FC<IconProps> = ({
       strokeLinejoin="round"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...props}>
       <line x1="5" y1="12" x2="19" y2="12"></line>
       <polyline points="12 5 19 12 12 19"></polyline>
     </SvgWithStrokeColor>

package/src/components/Icon/BagIcon.tsx

@@ -16,8 +16,7 @@ export const BagIcon: React.FC<IconProps> = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...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

package/src/components/Icon/BanIcon.tsx

@@ -16,8 +16,7 @@ export const BanIcon: React.FC<IconProps> = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...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}

package/src/components/Icon/CheckCircleIcon.tsx

@@ -16,8 +16,7 @@ export const CheckCircleIcon: React.FC<IconProps> = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...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}

package/src/components/Icon/CheckIcon.tsx

@@ -16,8 +16,7 @@ export const CheckIcon: React.FC<IconProps> = ({
       xmlns="http://www.w3.org/2000/svg"
       color={color}
       className="_icon"
-      {...props}
-    >
+      {...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"

package/src/components/Icon/CheckSquareIcon.tsx

@@ -16,8 +16,7 @@ export const CheckSquareIcon: React.FC<IconProps> = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...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}

package/src/components/Icon/CheckWalletIcon.tsx

@@ -16,8 +16,7 @@ export const CheckWalletIcon: React.FC<IconProps> = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...props}>
       <path
         fillRule="evenodd"
         clipRule="evenodd"

package/src/components/Icon/ChevronRightIcon.tsx

@@ -18,8 +18,7 @@ export const ChevronRightIcon = React.forwardRef<SVGSVGElement, IconProps>(
         strokeLinejoin="round"
         className="_icon"
         {...props}
-        ref={forwardedRef}
-      >
+        ref={forwardedRef}>
         <polyline points="9 18 15 12 9 6"></polyline>
       </SvgWithStrokeColor>
     );

package/src/components/Icon/CopyIcon.tsx

@@ -15,8 +15,7 @@ export const CopyIcon: React.FC<IconProps> = ({
       color={color}
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...props}>
       <g id="Text-files">
         <path
           d="M53.9791489,9.1429005H50.010849c-0.0826988,0-0.1562004,0.0283995-0.2331009,0.0469999V5.0228

package/src/components/Icon/DeleteCircleIcon.tsx

@@ -16,8 +16,7 @@ export const DeleteCircleIcon: React.FC<IconProps> = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...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}

package/src/components/Icon/DeleteWalletIcon.tsx

@@ -16,8 +16,7 @@ export const DeleteWalletIcon: React.FC<IconProps> = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...props}>
       <path
         fillRule="evenodd"
         clipRule="evenodd"

package/src/components/Icon/DisconnectIcon.tsx

@@ -18,8 +18,7 @@ export const DisconnectIcon = React.forwardRef<SVGSVGElement, IconProps>(
         strokeLinejoin="round"
         className="_icon"
         {...props}
-        ref={forwardedRef}
-      >
+        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>

package/src/components/Icon/DownloadIcon.tsx

@@ -16,8 +16,7 @@ export const DownloadIcon: React.FC<IconProps> = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...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}

package/src/components/Icon/GasIcon.tsx

@@ -1,6 +1,9 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import type { IconProps } from './types';
+
 import * as React from 'react';
+
 import { SvgWithStrokeColor } from './common';
-import { IconProps } from './types';
 
 export const GasIcon: React.FC<IconProps> = ({
   size = 16,
@@ -16,8 +19,7 @@ export const GasIcon: React.FC<IconProps> = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...props}>
       <path
         d="M4 22V5c0-2 1.34-3 3-3h8c1.66 0 3 1 3 3v17H4ZM2.5 22h17"
         strokeWidth={1.5}

package/src/components/Icon/HistoryIcon.tsx

@@ -20,8 +20,7 @@ export const HistoryIcon: React.FC<IconProps> = ({
       strokeLinejoin="round"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...props}>
       <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
       <polyline points="14 2 14 8 20 8"></polyline>
       <line x1="16" y1="13" x2="8" y2="13"></line>

package/src/components/Icon/HorizontalSwapIcon.tsx

@@ -16,8 +16,7 @@ export const HorizontalSwapIcon: React.FC<IconProps> = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...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}

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

@@ -5,7 +5,7 @@ import { Meta } from '@storybook/react';
 import { styled } from '../../theme';
 
 export default {
-  title: 'Components/Icons',
+  title: 'Components/Icons (Deprecated)',
   component: Icons.AngleRightIcon,
   args: {
     size: 16,

package/src/components/Icon/InfoCircleIcon.tsx

@@ -16,8 +16,7 @@ export const InfoCircleIcon: React.FC<IconProps> = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...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}

package/src/components/Icon/MinusCircleIcon.tsx

@@ -16,8 +16,7 @@ export const MinusCircleIcon: React.FC<IconProps> = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...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}

package/src/components/Icon/RetryIcon.tsx

@@ -18,8 +18,7 @@ export const RetryIcon = React.forwardRef<SVGSVGElement, IconProps>(
         strokeLinejoin="round"
         className="_icon"
         {...props}
-        ref={forwardedRef}
-      >
+        ref={forwardedRef}>
         <polyline points="23 4 23 10 17 10"></polyline>
         <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path>
       </SvgWithStrokeColor>

package/src/components/Icon/RetryLeftIcon.tsx

@@ -16,8 +16,7 @@ export const RetryLeftIcon: React.FC<IconProps> = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...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}

package/src/components/Icon/RetryRightIcon.tsx

@@ -16,8 +16,7 @@ export const RetryRightIcon: React.FC<IconProps> = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...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}

package/src/components/Icon/SearchIcon.tsx

@@ -16,8 +16,7 @@ export const SearchIcon: React.FC<IconProps> = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...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}

package/src/components/Icon/SearchMinusIcon.tsx

@@ -16,8 +16,7 @@ export const SearchMinusIcon: React.FC<IconProps> = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...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}

package/src/components/Icon/SettingIcon.tsx

@@ -20,8 +20,7 @@ export const SettingsIcon: React.FC<IconProps> = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...props}>
       <circle cx="12" cy="12" r="3"></circle>
       <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
     </SvgWithStrokeColor>

package/src/components/Icon/SignatureIcon.tsx

@@ -16,8 +16,7 @@ export const SignatureIcon: React.FC<IconProps> = ({
       viewBox="0 0 122.88 107.95"
       xmlSpace="preserve"
       className="_icon"
-      {...props}
-    >
+      {...props}>
       <path
         d="M82.19 0c1.22-.01 2.27.4 3.18 1.27l13.27 12.7c.86.82 1.28 1.91 1.3 3.11.02 1.22-.34 2.33-1.18 3.18l-7.06 7.35L72.09 8.67l6.99-7.28C79.94.5 80.98.02 82.19 0zM20.08 68.29a4.536 4.536 0 1 1 2.67 8.67c-6.98 2.14-11.66 6.28-13.21 10.17-.41 1.04-.55 1.99-.39 2.77.12.59.48 1.13 1.07 1.56 2.55 1.86 8.04 2.34 17.26.1 5.46-1.33 11.31-3.13 16.49-4.73 5.29-1.63 9.91-3.06 13.12-3.66 5.92-1.1 11.83-1.85 16.6-1.61 6.26.31 10.96 2.32 12.57 7.13 1.04 3.11.75 5.81.49 8.23-.09.87-.18 1.68-.14 2.21 0 .02.95-.05 5.53-.41 5.3-.42 10.79-2.51 16.21-4.58 2.78-1.06 5.54-2.11 8.67-3.07 2.4-.73 4.93.63 5.65 3.02.73 2.4-.63 4.93-3.02 5.65-2.43.74-5.24 1.82-8.06 2.89-6.04 2.3-12.14 4.63-18.74 5.15-12.07.95-14.87-2.46-15.3-7.95-.1-1.29.03-2.54.17-3.88.16-1.5.34-3.18-.07-4.39-.18-.54-1.89-.82-4.39-.94-3.99-.2-9.22.48-14.54 1.47-2.65.49-7.05 1.85-12.09 3.41-5.27 1.63-11.22 3.46-17.02 4.87-12.14 2.95-20.21 1.7-24.73-1.6-2.54-1.85-4.05-4.27-4.63-7-.54-2.54-.23-5.28.85-8 2.46-6.14 9.23-12.5 18.98-15.48zm21.19-19.84L53.3 60.02l-14.71 3.95c-.53.1-.74-.11-.65-.6l3.33-14.92zm24.6-33.34 19.59 18.87L58.7 62.23l-23.98 6.43c-.86.17-1.2-.17-1.06-.98l5.43-24.31 26.78-28.26z"
         style={{

package/src/components/Icon/SwapWalletIcon.tsx

@@ -16,8 +16,7 @@ export const SwapWalletIcon: React.FC<IconProps> = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...props}>
       <path
         fillRule="evenodd"
         clipRule="evenodd"

package/src/components/Icon/TimeIcon.tsx

@@ -13,8 +13,7 @@ export const TimeIcon = React.forwardRef<SVGSVGElement, IconProps>(
         xmlns="http://www.w3.org/2000/svg"
         className="_icon"
         {...props}
-        ref={forwardedRef}
-      >
+        ref={forwardedRef}>
         <circle cx={10} cy={10} r={7.25} strokeWidth={1.5} />
         <path
           fillRule="evenodd"

package/src/components/Icon/TrashIcon.tsx

@@ -16,8 +16,7 @@ export const TrashIcon: React.FC<IconProps> = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...props}>
       <path
         d="M21.5 5.98c-3.33-.33-6.68-.5-10.02-.5-1.98 0-3.96.1-5.94.3l-2.04.2M9 4.97l.22-1.31C9.38 2.71 9.5 2 11.19 2h2.62c1.69 0 1.82.75 1.97 1.67l.22 1.3M19.35 9.14l-.65 10.07c-.11 1.57-.2 2.79-2.99 2.79H9.29c-2.79 0-2.88-1.22-2.99-2.79L5.65 9.14M10.83 16.5h3.33M10 12.5h5"
         strokeWidth={1.5}

package/src/components/Icon/TryAgainIcon.tsx

@@ -16,8 +16,7 @@ export const TryAgainIcon: React.FC<IconProps> = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...props}>
       <path
         d="M22 12c0 5.52-4.48 10-10 10s-8.89-5.56-8.89-5.56m0 0h4.52m-4.52 0v5M2 12C2 6.48 6.44 2 12 2c6.67 0 10 5.56 10 5.56m0 0v-5m0 5h-4.44"
         strokeWidth={1.5}

package/src/components/Icon/VerticalSwapIcon.tsx

@@ -16,8 +16,7 @@ export const VerticalSwapIcon: React.FC<IconProps> = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...props}>
       <path
         d="m13.82 6.85 3.04 3.04M13.82 17.15V6.85M10.18 17.15l-3.04-3.04M10.18 6.85v10.3"
         strokeWidth={1.5}

package/src/components/Icon/WalletIconIcon.tsx

@@ -16,8 +16,7 @@ export const WalletIcon: React.FC<IconProps> = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...props}>
       <path
         fillRule="evenodd"
         clipRule="evenodd"

package/src/components/Icon/WarningIcon.tsx

@@ -16,8 +16,7 @@ export const WarningIcon: React.FC<IconProps> = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...props}>
       <path
         d="M12 9v5M12 21.41H5.94c-3.47 0-4.92-2.48-3.24-5.51l3.12-5.62L8.76 5c1.78-3.21 4.7-3.21 6.48 0l2.94 5.29 3.12 5.62c1.68 3.03.22 5.51-3.24 5.51H12v-.01Z"
         strokeWidth={1.5}

package/src/components/IconButton/IconButton.stories.tsx

@@ -0,0 +1,20 @@
+import type { PropTypes } from './IconButton.types';
+import type { Meta } from '@storybook/react';
+
+import React from 'react';
+
+import { WalletIcon } from '../../icons';
+
+import { IconButton } from './IconButton';
+
+const meta: Meta<typeof IconButton> = {
+  component: IconButton,
+};
+
+export default meta;
+
+export const Main = (props: PropTypes) => (
+  <IconButton {...props}>
+    <WalletIcon />
+  </IconButton>
+);

package/src/components/IconButton/IconButton.tsx

@@ -0,0 +1,27 @@
+import type { PropTypes } from './IconButton.types';
+import type { PropsWithChildren } from 'react';
+
+import React from 'react';
+
+import { Button } from '../Button';
+
+// border-radius: 100% + overflow: hidden
+function IconButton(props: PropsWithChildren<PropTypes>) {
+  const { style, ...otherProps } = props;
+  return (
+    <Button
+      className="_icon-button"
+      {...otherProps}
+      style={{
+        borderRadius: '100%',
+        lineHeight: 0,
+        ...style,
+      }}>
+      {props.children}
+    </Button>
+  );
+}
+
+IconButton.toString = () => '._icon-button';
+
+export { IconButton };

package/src/components/IconButton/IconButton.types.ts

@@ -0,0 +1,12 @@
+import type { PropTypes as ButtonPropTypes } from '../Button/Button.types';
+import type { CSSProperties } from 'react';
+
+export type PropTypes = {
+  size?: ButtonPropTypes['size'];
+  type?: ButtonPropTypes['type'];
+  variant?: ButtonPropTypes['variant'];
+  onClick?: ButtonPropTypes['onClick'];
+  style?: CSSProperties;
+  loading?: boolean;
+  disabled?: boolean;
+};

package/src/components/IconButton/index.ts

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