@rango-dev/ui 0.1.10-next.74 → 0.1.10-next.76

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.1.10-next.74",
+  "version": "0.1.10-next.76",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -86,6 +86,5 @@
   },
   "publishConfig": {
     "access": "public"
-  },
-  "gitHead": "038334e680f1172e7e861689eec7ca7b385f0a92"
+  }
 }

package/src/components/Alert/Alert.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { CheckCircleIcon, InfoCircleIcon, WarningIcon } from '../Icon';
 import { Typography } from '../Typography';
-import { styled } from '../../theme';
+import { darkTheme, styled } from '../../theme';
 
 const MainContainer = styled('div', {
   display: 'flex',
@@ -21,7 +21,7 @@ const MainContainer = styled('div', {
         backgroundColor: '$success300',
       },
       warning: {
-        backgroundColor: '$warning300',
+        backgroundColor: '$warning500',
       },
       error: {
         backgroundColor: '$error300',
@@ -43,6 +43,10 @@ const IconContainer = styled('div', {
   marginRight: '$24',
 });
 
+const StyledTypography = styled(Typography, {
+  color: darkTheme.colors.foreground.value,
+});
+
 export interface PropTypes {
   type: 'primary' | 'secondary' | 'success' | 'warning' | 'error';
   description: string;
@@ -61,17 +65,17 @@ export function Alert(props: PropTypes) {
       {showIcon && (
         <IconContainer>
           {type === 'success' && <CheckCircleIcon color="success" size={28} />}
-          {type === 'warning' && <WarningIcon size={28} />}
+          {type === 'warning' && <WarningIcon color="white" size={28} />}
           {type === 'error' && <InfoCircleIcon color="error" size={28} />}
         </IconContainer>
       )}
       <ContentContainer>
         {title && (
           <TitleContainer>
-            <Typography variant="h6">{title}</Typography>
+            <StyledTypography variant="h6">{title}</StyledTypography>
           </TitleContainer>
         )}
-        <Typography variant="body2">{description}</Typography>
+        <StyledTypography variant="body2">{description}</StyledTypography>
       </ContentContainer>
     </MainContainer>
   );

package/src/components/BestRoute/BestRoute.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from 'react';
+import React, { Fragment, PropsWithChildren } from 'react';
 import { GasIcon, TimeIcon } from '../../components/Icon';
 import { StepDetail } from '../../components/StepDetail';
 import { Typography } from '../../components/Typography';
@@ -149,7 +149,7 @@ export function BestRoute({
 
         {!!data &&
           data.result?.swaps.map((swap, index) => (
-            <>
+            <Fragment key={index}>
               {index === 0 && (
                 <RelativeContainer>
                   <StepDetail
@@ -178,7 +178,7 @@ export function BestRoute({
                 blockchain={swap.to.blockchain}
                 amount={swap.toAmount}
               />
-            </>
+            </Fragment>
           ))}
         {!!data && !data?.result && (
           <Typography variant="body2">No routes found</Typography>

package/src/components/Icon/AddCircleIcon.tsx

@@ -2,28 +2,30 @@ import * as React from 'react';
 import { SvgWithStrokeColor } from './common';
 import { IconProps } from './types';
 
-export const AddCircleIcon = 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 10ZM8 12h8M12 16V8"
-          strokeWidth={1.5}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </SvgWithStrokeColor>
-    );
-  }
-);
+export const AddCircleIcon: 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 10ZM8 12h8M12 16V8"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </SvgWithStrokeColor>
+  );
+};
 
 AddCircleIcon.toString = () => '._icon';

package/src/components/Icon/AddIcon.tsx

@@ -2,27 +2,30 @@ import * as React from 'react';
 import { SvgWithStrokeColor } from './common';
 import { IconProps } from './types';
 
-export const AddIcon = 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="M6 12h12M12 18V6"
-          strokeWidth={1.5}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </SvgWithStrokeColor>
-    );
-  }
-);
+export const AddIcon: 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="M6 12h12M12 18V6"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </SvgWithStrokeColor>
+  );
+};
+
 AddIcon.toString = () => '._icon';

package/src/components/Icon/AddWalletIcon.tsx

@@ -2,47 +2,49 @@ import * as React from 'react';
 import { SvgWithFillColor } from './common';
 import { IconProps } from './types';
 
-export const AddWalletIcon = 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.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>
-    );
-  }
-);
+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

@@ -1,30 +1,30 @@
-import * as React from 'react';
+import React from 'react';
 import { IconProps } from './types';
 import { SvgWithStrokeColor } from './common';
 
-export const AngleDownIcon = 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="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>
-    );
-  }
+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

@@ -3,29 +3,31 @@ import { IconProps } from './types';
 import { SvgWithStrokeColor } from './common';
 import { AngleDownIcon } from './AngleDownIcon';
 
-export const AngleLeftIcon = React.forwardRef<SVGSVGElement, 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>
-    );
-  }
-);
+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

@@ -2,29 +2,31 @@ import * as React from 'react';
 import { IconProps } from './types';
 import { SvgWithStrokeColor } from './common';
 
-export const AngleRightIcon = React.forwardRef<SVGSVGElement, 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>
-    );
-  }
-);
+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

@@ -2,29 +2,31 @@ import * as React from 'react';
 import { IconProps } from './types';
 import { SvgWithStrokeColor } from './common';
 
-export const AngleUpIcon = React.forwardRef<SVGSVGElement, 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>
-    );
-  }
-);
+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/BagIcon.tsx

@@ -2,36 +2,38 @@ import * as React from 'react';
 import { SvgWithStrokeColor } from './common';
 import { IconProps } from './types';
 
-export const BagIcon = React.forwardRef<SVGSVGElement, 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>
-    );
-  }
-);
+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

@@ -2,29 +2,31 @@ import * as React from 'react';
 import { SvgWithStrokeColor } from './common';
 import { IconProps } from './types';
 
-export const BanIcon = 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.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>
-    );
-  }
-);
+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';