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

package/src/containers/SwapInput/SwapInput.tsx

@@ -0,0 +1,109 @@
+import type { SwapInputProps } from './SwapInput.types';
+
+import { i18n } from '@lingui/core';
+import React from 'react';
+
+import { Divider, PriceImpact, Skeleton, Typography } from '../../components';
+
+import { Container, InputAmount, MaxButton } from './SwapInput.styles';
+import { TokenSection } from './TokenSection';
+
+export function SwapInput(props: SwapInputProps) {
+  return (
+    <Container sharpBottomStyle={props.sharpBottomStyle}>
+      <div className="label__container">
+        <div className="label">
+          <Typography variant="body" size="small" color="$neutral800">
+            {props.label}
+          </Typography>
+          {'balance' in props && !props.loading && (
+            <div className="balance">
+              <Typography
+                color="$neutral800"
+                mr={4}
+                variant="body"
+                size="xsmall">
+                {i18n.t('Balance')}: {props.balance}
+              </Typography>
+              <MaxButton
+                variant="default"
+                size="xsmall"
+                onClick={props.onSelectMaxBalance}>
+                <Typography variant="body" size="xsmall" color="secondary500">
+                  {i18n.t('Max')}
+                </Typography>
+              </MaxButton>
+            </div>
+          )}
+          {props.loading && (
+            <div className="balance">
+              <Skeleton variant="text" size="large" width={105} />
+            </div>
+          )}
+        </div>
+      </div>
+      <div className="form">
+        <TokenSection
+          chain={props.chain.displayName}
+          tokenSymbol={props.token.displayName}
+          error={props.error}
+          chainImage={props.chain.image}
+          tokenImage={props.token.image}
+          onClick={props.onClickToken}
+          loading={props.loading}
+        />
+        <div className="amount">
+          {props.loading ? (
+            <>
+              <Skeleton variant="text" size="large" width={92} />
+              <Divider size={8} />
+              <Skeleton variant="text" size="medium" width={92} />
+            </>
+          ) : (
+            <>
+              <InputAmount
+                disabled={props.disabled || props.mode === 'To'}
+                style={{ padding: 0 }}
+                value={props.price.value}
+                type={'onInputChange' in props ? 'number' : 'text'}
+                size="large"
+                placeholder="0"
+                variant="ghost"
+                min={0}
+                {...('onInputChange' in props && {
+                  onChange: (event: React.ChangeEvent<HTMLInputElement>) =>
+                    props.onInputChange(event.target.value),
+                })}
+              />
+              {'percentageChange' in props ? (
+                <PriceImpact
+                  size="large"
+                  outputUsdValue={props.price.usdValue}
+                  error={props.price.error}
+                  percentageChange={props.percentageChange}
+                  warningLevel={props.warningLevel}
+                />
+              ) : (
+                <Typography
+                  variant="body"
+                  size="medium"
+                  color={!props.price.error ? '$neutral800' : '$warning500'}
+                  style={{
+                    width: 140,
+                    textAlign: 'right',
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                  }}>
+                  {props.price.usdValue
+                    ? `~$${props.price.usdValue}`
+                    : props.price.error}
+                </Typography>
+              )}
+            </>
+          )}
+        </div>
+      </div>
+    </Container>
+  );
+}

package/src/containers/SwapInput/SwapInput.types.ts

@@ -0,0 +1,38 @@
+import type { PriceImpactWarningLevel } from '../../components/PriceImpact/PriceImpact.types';
+
+export type BaseProps = {
+  chain: {
+    displayName: string;
+    image: string;
+  };
+  token: {
+    displayName: string;
+    image: string;
+  };
+  price: {
+    value: string;
+    usdValue?: string;
+    error?: string;
+  };
+  loading?: boolean;
+  error?: boolean;
+  disabled?: boolean;
+  label: string;
+  sharpBottomStyle?: boolean;
+  onClickToken: () => void;
+};
+
+type FromProps = {
+  mode: 'From';
+  balance?: string;
+  onSelectMaxBalance: () => void;
+  onInputChange: (inputAmount: string) => void;
+};
+
+type ToProps = {
+  mode: 'To';
+  percentageChange: string | null;
+  warningLevel: PriceImpactWarningLevel;
+};
+
+export type SwapInputProps = BaseProps & (FromProps | ToProps);

package/src/containers/SwapInput/TokenSection.styles.ts

@@ -0,0 +1,49 @@
+import { Button } from '../../components';
+import { darkTheme, styled } from '../../theme';
+
+export const Container = styled(Button, {
+  backgroundColor: 'transparent',
+  color: '$neutral900',
+  '&:disabled': {
+    color: '$neutral800',
+  },
+  '&:focus-visible': {
+    $$color: '$colors$info100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$info700',
+    },
+    backgroundColor: '$$color !important',
+    outline: 0,
+  },
+  '&:disabled:hover': {
+    backgroundColor: 'transparent',
+  },
+  '&:hover': {
+    $$color: '$colors$info100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral400',
+    },
+    backgroundColor: '$$color !important',
+  },
+});
+
+export const TokenSectionContainer = styled('div', {
+  width: '10.625rem',
+  padding: '$2 $5',
+  display: 'flex',
+  borderRadius: '$xs',
+  justifyContent: 'start',
+  boxSizing: 'border-box',
+  alignItems: 'center',
+
+  '& .token-chain-name': {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'start',
+    paddingLeft: '$10',
+  },
+  '& .token-chain-name__skeleton': {
+    padding: '$5 $0',
+  },
+});

package/src/containers/SwapInput/TokenSection.tsx

@@ -0,0 +1,53 @@
+import type { TokenSectionProps } from './TokenSection.types';
+
+import { i18n } from '@lingui/core';
+import React from 'react';
+
+import { ChainToken, Divider, Skeleton, Typography } from '../../components';
+
+import { Container, TokenSectionContainer } from './TokenSection.styles';
+
+export function TokenSection(props: TokenSectionProps) {
+  const {
+    error,
+    chainImage,
+    tokenImage,
+    tokenSymbol,
+    chain,
+    onClick,
+    loading,
+  } = props;
+  return (
+    <Container variant="default" disabled={error || loading} onClick={onClick}>
+      <TokenSectionContainer>
+        <ChainToken
+          size="large"
+          useAsPlaceholder={error || (!loading && (!chainImage || !tokenImage))}
+          chainImage={chainImage}
+          tokenImage={tokenImage}
+          loading={loading}
+        />
+        <div className="token-chain-name">
+          {loading ? (
+            <div className="token-chain-name__skeleton">
+              <Skeleton variant="text" size="large" width={92} />
+              <Divider size={8} />
+              <Skeleton variant="text" size="medium" width={92} />
+            </div>
+          ) : (
+            <>
+              <Typography variant="title" size="medium">
+                {error || (!loading && !tokenSymbol)
+                  ? i18n.t('Token')
+                  : tokenSymbol}
+              </Typography>
+              <Typography variant="body" size="medium" color="$neutral800">
+                {error || (!loading && !chain) ? i18n.t('Chain') : chain}
+              </Typography>
+            </>
+          )}
+        </div>
+      </TokenSectionContainer>
+    </Container>
+  );
+}

package/src/containers/SwapInput/TokenSection.types.ts

@@ -0,0 +1,9 @@
+export type TokenSectionProps = {
+  chainImage: string;
+  tokenImage: string;
+  tokenSymbol: string;
+  chain: string;
+  error?: boolean;
+  onClick: () => void;
+  loading?: boolean;
+};

package/src/containers/SwapInput/index.ts

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

package/src/containers/TokenInfo/TokenInfo.tsx

@@ -1,20 +1,21 @@
+import type { ConnectedWallet } from '../..';
+import type { TokenWithBalance } from '../../types/meta';
+import type { BestRouteResponse, BlockchainMeta, Token } from 'rango-sdk';
+
+import { i18n } from '@lingui/core';
+import { Trans } from '@lingui/react';
 import React from 'react';
+
 import {
-  AngleDownIcon,
   Button,
-  InfoCircleIcon,
-  styled,
-  TextField,
-  Typography,
-  Image,
   Divider,
+  Image,
   PercentageChange,
-  ConnectedWallet,
+  TextField,
+  Typography,
 } from '../..';
-import { BestRouteResponse, BlockchainMeta, Token } from 'rango-sdk';
-import { Trans } from '@lingui/react';
-import { i18n } from '@lingui/core';
-import { TokenWithBalance } from '../../types/meta';
+import { AngleDownIcon, InfoCircleIcon } from '../../components/Icon';
+import { styled } from '../../theme';
 
 type PropTypes = (
   | {
@@ -32,8 +33,8 @@ type PropTypes = (
   chain: BlockchainMeta | null;
   token: Token | null;
   loadingStatus: 'loading' | 'success' | 'failed';
-  fromChain: BlockchainMeta | null;
-  toChain: BlockchainMeta | null;
+  fromBlockchain: BlockchainMeta | null;
+  toBlockchain: BlockchainMeta | null;
   inputUsdValue: string;
   fromToken: TokenWithBalance | null;
   setInputAmount: (amount: string) => void;
@@ -56,16 +57,16 @@ const Box = styled('div', {
 
 const Container = styled('div', {
   boxSizing: 'border-box',
-  borderRadius: '$5',
+  borderRadius: '$xs',
   padding: '$8 $16 $16 $16',
 
   variants: {
     type: {
       filled: {
-        backgroundColor: '$neutral100',
+        backgroundColor: '$background',
       },
       outlined: {
-        border: '1px solid $neutral100',
+        border: '1px solid $background',
         backgroundColor: '$surface',
       },
     },
@@ -120,14 +121,14 @@ const Options = styled('div', {
 const ImagePlaceholder = styled('span', {
   width: '24px',
   height: '24px',
-  backgroundColor: '$neutral100',
+  backgroundColor: '$background',
   borderRadius: '99999px',
 });
 
 const OutputContainer = styled('div', {
   windth: '100%',
   height: '$48',
-  borderRadius: '$5',
+  borderRadius: '$xs',
   backgroundColor: '$surface',
   border: '1px solid transparent',
   position: 'relative',
@@ -143,8 +144,8 @@ export function TokenInfo(props: PropTypes) {
     chain,
     token,
     loadingStatus,
-    fromChain,
-    toChain,
+    fromBlockchain,
+    toBlockchain,
     fromToken,
     setInputAmount,
     inputUsdValue,
@@ -173,7 +174,7 @@ export function TokenInfo(props: PropTypes) {
     <Box>
       <Container type={type === 'From' ? 'filled' : 'outlined'}>
         <div className="head">
-          <Typography variant="body2" color="neutral800">
+          <Typography variant="body" size="small" color="neutral800">
             {type === 'From' ? (
               <Trans id="swap from" message="From" />
             ) : (
@@ -185,14 +186,15 @@ export function TokenInfo(props: PropTypes) {
               <div
                 className="balance"
                 onClick={() => {
-                  if (tokenBalance !== '0')
+                  if (tokenBalance !== '0') {
                     setInputAmount(tokenBalanceReal.split(',').join(''));
+                  }
                 }}>
-                <Typography variant="body3" color="neutral600">
+                <Typography variant="body" size="small" color="neutral600">
                   {i18n.t('Balance')}: {tokenBalance} {fromToken?.symbol || ''}
                 </Typography>
                 <Divider size={4} />
-                <Button type="primary" variant="ghost" size="compact">
+                <Button type="primary" variant="ghost" size="small">
                   <Trans id="maximum amount of asset" message="Max" />
                 </Button>
               </div>
@@ -205,7 +207,8 @@ export function TokenInfo(props: PropTypes) {
               />
               <div>
                 <Typography
-                  variant="caption"
+                  variant="body"
+                  size="xsmall"
                   color="neutral600">{`$${props.outputUsdValue}`}</Typography>
               </div>
             </div>
@@ -226,7 +229,6 @@ export function TokenInfo(props: PropTypes) {
               )
             }
             suffix={ItemSuffix}
-            align="start"
             size="large">
             {loadingStatus === 'success' && chain
               ? chain.displayName
@@ -239,8 +241,8 @@ export function TokenInfo(props: PropTypes) {
             variant="outlined"
             disabled={
               loadingStatus === 'failed' ||
-              (type === 'From' && !fromChain) ||
-              (type === 'To' && !toChain)
+              (type === 'From' && !fromBlockchain) ||
+              (type === 'To' && !toBlockchain)
             }
             loading={loadingStatus === 'loading'}
             prefix={
@@ -251,8 +253,7 @@ export function TokenInfo(props: PropTypes) {
               )
             }
             suffix={ItemSuffix}
-            size="large"
-            align="start">
+            size="large">
             {loadingStatus === 'success' && token
               ? token.symbol
               : i18n.t('Token')}
@@ -277,7 +278,8 @@ export function TokenInfo(props: PropTypes) {
                       bottom: '2px',
                     }}>
                     <Typography
-                      variant="caption"
+                      variant="body"
+                      size="xsmall"
                       color="neutral800">{`$${inputUsdValue}`}</Typography>
                   </span>
                 }
@@ -285,7 +287,7 @@ export function TokenInfo(props: PropTypes) {
                 min={0}
                 onChange={
                   type === 'From'
-                    ? (event) => {
+                    ? (event: React.ChangeEvent<HTMLInputElement>) => {
                         props.onAmountChange(event.target.value);
                       }
                     : undefined
@@ -293,7 +295,7 @@ export function TokenInfo(props: PropTypes) {
               />
             ) : (
               <OutputContainer>
-                <Typography variant="h4">
+                <Typography variant="title" size="medium">
                   {fetchingBestRoute && '?'}
                   {!!bestRoute?.result && `≈ ${props.outputAmount}`}
                   {(!inputAmount || inputAmount === '0') && '0'}

package/src/containers/Warnings/BalanceErrors.tsx

@@ -1,27 +1,19 @@
-import { Divider, Typography } from '../../components';
-import { styled } from '../../theme';
 import React from 'react';
-import { i18n } from '@lingui/core';
+
+import { Typography } from '../../components';
+import { styled } from '../../theme';
+
 interface PropTypes {
   messages: string[];
 }
 
 const List = styled('ul', {
-  padding: 0,
+  padding: '$0 $0 $40 $0',
   margin: 0,
-  variants: {
-    showListStyle: {
-      true: { paddingLeft: '$24' },
-    },
-  },
 });
 
 const ListItem = styled('li', {
-  variants: {
-    showListStyle: {
-      true: { listStyleType: 'disc', listStylePosition: 'outside' },
-    },
-  },
+  paddingBottom: '$10',
 });
 
 const Message = styled(Typography, {
@@ -29,19 +21,19 @@ const Message = styled(Typography, {
 });
 
 export function BalanceErrors({ messages }: PropTypes) {
-  const showListStyle = messages.length > 1;
   return (
     <>
-      <Typography className="title" variant="title" color={'error'}>
-        {i18n.t('Insufficent Balance:')}
-      </Typography>
-      <Divider size={8} />
-      <List showListStyle={showListStyle}>
-        {messages.map((warning, index) => (
-          <ListItem showListStyle={showListStyle} key={index}>
-            <Message variant="body2">{warning}</Message>
-          </ListItem>
-        ))}
+      <List>
+        {messages.map((warning, index) => {
+          const key = index + warning;
+          return (
+            <ListItem key={key}>
+              <Message variant="body" size="medium" color="$neutral900">
+                {warning}
+              </Message>
+            </ListItem>
+          );
+        })}
       </List>
     </>
   );

package/src/containers/Warnings/MinRequiredSlippage.tsx

@@ -17,7 +17,7 @@ export function MinRequiredSlippage({
   changeSlippage,
 }: PropTypes) {
   return (
-    <StyledMessage variant="body2">
+    <StyledMessage variant="body" size="small">
       {i18n.t(
         'increaseSlippage',
         { minRequiredSlippage },

package/src/containers/index.ts

@@ -1,11 +1,8 @@
-export * from './ConfirmSwap';
-export * from './History';
 export * from './HomePanel';
 export * from './SwapHistory';
 export * from './BlockchainSelector';
 export * from './ConnectWalletsModal';
-export * from './LiquiditySourcesSelector';
 export * from './TokenInfo';
 export * from './TokenSelector';
-export * from './Settings';
 export * from './Warnings';
+export * from './SwapInput';

package/src/helper/index.ts

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+
 export function containsText(text: string, searchText: string): boolean {
   return text.toLowerCase().indexOf(searchText.toLowerCase()) > -1;
 }
@@ -7,8 +9,12 @@ export function getConciseAddress(
   maxChars = 8,
   ellipsisLength = 3
 ): string | null {
-  if (!address) return null;
-  if (address.length < 2 * maxChars + ellipsisLength) return address;
+  if (!address) {
+    return null;
+  }
+  if (address.length < 2 * maxChars + ellipsisLength) {
+    return address;
+  }
   const start = Math.ceil((address.length - maxChars) / 2);
   const end = address.length - maxChars;
   return `${address.substr(start, maxChars)}${'.'.repeat(
@@ -16,20 +22,6 @@ export function getConciseAddress(
   )}${address.substr(end)}`;
 }
 
-export function limitDecimalPlaces(
-  numberString: string,
-  maxDecimalPlaces = 4
-): string {
-  const number = parseFloat(numberString);
-  if (isNaN(number))
-    return numberString; // Return the original string if it's not a valid number
-  else {
-    const multiplier = Math.pow(10, maxDecimalPlaces);
-    const roundedNumber = Math.round(number * multiplier) / multiplier;
-    return roundedNumber.toString();
-  }
-}
-
 const hexToRgb = (hex: string) =>
   ((value) =>
     value.length === 3
@@ -50,8 +42,9 @@ const isHexTooLight = (hexColor: string) =>
 
 const colorShade = (col: string, amt: number) => {
   col = col.replace(/^#/, '');
-  if (col.length === 3)
+  if (col.length === 3) {
     col = col[0] + col[0] + col[1] + col[1] + col[2] + col[2];
+  }
   let [r, g, b]: any = col.match(/.{2}/g);
   [r, g, b] = [
     parseInt(r, 16) + amt,

package/src/icons/AutoTheme.tsx

@@ -0,0 +1,25 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon';
+
+function SvgAutoTheme(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 25 24" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11.3379 0.900473C11.3535 0.896847 11.3694 0.894202 11.3853 0.892578C11.4364 0.892541 11.487 0.902821 11.5341 0.922847C11.5811 0.942874 11.6236 0.972213 11.659 1.00909C11.6944 1.04597 11.722 1.08963 11.7401 1.13745C11.7582 1.18526 11.7664 1.23623 11.7643 1.28731V4.29523C11.73 4.2936 11.6954 4.29167 11.6605 4.28972C11.5691 4.28462 11.4763 4.27944 11.3853 4.27944C11.2915 4.27944 11.1997 4.28461 11.1076 4.28979C11.0739 4.29169 11.0402 4.29358 11.0063 4.29523V1.28731C11.0037 1.19316 11.0361 1.10138 11.0974 1.02986C11.1587 0.958345 11.2445 0.91222 11.3379 0.900473ZM3.55405 4.1215C3.61081 4.07707 3.67907 4.04976 3.75081 4.04275C3.80713 4.037 3.86401 4.04394 3.91729 4.06307C3.97058 4.0822 4.0189 4.11303 4.05871 4.15328L6.19035 6.28492C6.00138 6.45588 5.82477 6.63316 5.6535 6.82178L3.52186 4.69013C3.47047 4.63958 3.43457 4.57541 3.41836 4.50517C3.40215 4.43494 3.40631 4.36154 3.43034 4.29358C3.45438 4.22562 3.49729 4.16593 3.55405 4.1215ZM4.87177 12.0009C4.87177 8.41239 7.78091 5.49542 11.3694 5.49542C11.4975 5.49542 11.6248 5.49914 11.7512 5.50648C10.3976 7.08208 9.57614 9.13644 9.57614 11.3769C9.57614 14.1771 10.8593 16.6866 12.8608 18.334C12.3818 18.4467 11.8824 18.5063 11.3694 18.5063C7.78065 18.5063 4.87177 15.5894 4.87177 12.0009ZM0.312672 11.7608C0.376338 11.6823 0.468568 11.6324 0.569074 11.6219C0.582224 11.6212 0.5954 11.6212 0.608549 11.6219C0.621698 11.6212 0.634875 11.6212 0.648024 11.6219H3.66403C3.66249 11.6534 3.66074 11.6853 3.65897 11.7173C3.65366 11.814 3.64824 11.9126 3.64824 12.0088C3.64824 12.098 3.65325 12.1856 3.65828 12.2734C3.6603 12.3088 3.66233 12.3443 3.66403 12.3798H0.648024C0.547518 12.3903 0.446969 12.3604 0.368498 12.2968C0.290026 12.2331 0.24006 12.1409 0.229591 12.0403C0.219121 11.9398 0.249007 11.8393 0.312672 11.7608ZM3.52179 19.3116L5.65343 17.18C5.82343 17.3675 5.99492 17.5468 6.18238 17.7168L4.05865 19.8485C3.98746 19.9197 3.8909 19.9596 3.79022 19.9596C3.68954 19.9596 3.59298 19.9197 3.52179 19.8485C3.4506 19.7773 3.41061 19.6807 3.41061 19.58C3.41061 19.5302 3.42042 19.4808 3.4395 19.4348C3.45858 19.3887 3.48654 19.3469 3.52179 19.3116ZM11.0061 22.7221V19.7141C11.0406 19.7158 11.0748 19.7177 11.1091 19.7196C11.2006 19.7247 11.2918 19.7298 11.3851 19.7298C11.4783 19.7298 11.5736 19.7245 11.6673 19.7193C11.6997 19.7175 11.732 19.7157 11.764 19.7141V22.7221C11.7648 22.7723 11.7556 22.8223 11.737 22.869C11.7183 22.9157 11.6905 22.9582 11.6552 22.994C11.62 23.0299 11.5779 23.0584 11.5315 23.0778C11.4851 23.0972 11.4353 23.1072 11.3851 23.1072C11.3348 23.1072 11.285 23.0972 11.2386 23.0778C11.1922 23.0584 11.1501 23.0299 11.1149 22.994C11.0796 22.9582 11.0518 22.9157 11.0331 22.869C11.0145 22.8223 11.0053 22.7723 11.0061 22.7221Z"
+        fill="currentColor"
+      />
+      <path
+        d="M24.1275 14.5602C24.0212 14.402 23.8085 14.2966 23.5959 14.3493C23.3301 14.402 23.0643 14.4284 22.7985 14.4284C20.1138 14.4284 17.9076 12.2673 17.9076 9.57917C17.9076 7.91884 18.7582 6.39029 20.1935 5.49423C20.3796 5.38882 20.4593 5.17798 20.4328 4.9935C20.4062 4.78267 20.2733 4.62454 20.0606 4.54548C19.3164 4.30829 18.5189 4.17651 17.7215 4.17651C13.6546 4.17651 10.332 7.47082 10.332 11.503C10.332 15.5353 13.6546 18.8296 17.7215 18.8296C20.353 18.8296 22.7985 17.4328 24.1275 15.1663C24.2604 14.9555 24.2604 14.7183 24.1275 14.5602Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+export default SvgAutoTheme;

package/src/icons/BorderRadius.tsx

@@ -0,0 +1,21 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon';
+
+function SvgBorderRadius(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 19 18" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0.489258 4.74652C0.489258 2.15304 2.592 0 5.24997 0C5.53793 0 5.77138 0.22074 5.77138 0.493036C5.77138 0.765333 5.53793 0.986072 5.24997 0.986072C3.22533 0.986072 1.53208 2.64173 1.53208 4.74652C1.53208 5.01881 1.29864 5.23955 1.01067 5.23955C0.722702 5.23955 0.489258 5.01881 0.489258 4.74652ZM13.2071 0.493036C13.2071 0.22074 13.4406 0 13.7286 0C16.3865 0 18.4893 2.15304 18.4893 4.74652C18.4893 5.01882 18.2558 5.23956 17.9678 5.23956C17.6799 5.23956 17.4464 5.01882 17.4464 4.74652C17.4464 2.64173 15.7532 0.986072 13.7286 0.986072C13.4406 0.986072 13.2071 0.765333 13.2071 0.493036ZM2.60885 4.74638C2.60885 3.32747 3.76259 2.1266 5.24991 2.1266L13.7285 2.1266C15.2158 2.1266 16.3696 3.32747 16.3696 4.74638L16.3696 13.2533C16.3696 14.6722 15.2158 15.8731 13.7285 15.8731L5.2499 15.8731C3.76259 15.8731 2.60885 14.6722 2.60885 13.2533L2.60885 4.74638ZM5.24991 3.11267C4.39592 3.11267 3.65167 3.81615 3.65167 4.74638L3.65167 13.2533C3.65167 14.1836 4.39592 14.887 5.2499 14.887L13.7285 14.887C14.5825 14.887 15.3267 14.1836 15.3267 13.2533L15.3267 4.74638C15.3267 3.81616 14.5825 3.11267 13.7285 3.11267L5.24991 3.11267ZM1.01067 12.7604C1.29864 12.7604 1.53208 12.9812 1.53208 13.2535C1.53208 15.3583 3.22533 17.0139 5.24996 17.0139C5.53793 17.0139 5.77138 17.2347 5.77138 17.507C5.77138 17.7793 5.53793 18 5.24996 18C2.592 18 0.489258 15.847 0.489258 13.2535C0.489258 12.9812 0.722702 12.7604 1.01067 12.7604ZM17.9678 12.7604C18.2558 12.7604 18.4893 12.9812 18.4893 13.2535C18.4893 15.847 16.3865 18 13.7285 18C13.4406 18 13.2071 17.7793 13.2071 17.507C13.2071 17.2347 13.4406 17.0139 13.7285 17.0139C15.7532 17.0139 17.4464 15.3583 17.4464 13.2535C17.4464 12.9812 17.6799 12.7604 17.9678 12.7604Z"
+        fill="#727272"
+      />
+    </svg>
+  );
+}
+export default SvgBorderRadius;

package/src/icons/ChevronDown.tsx

@@ -0,0 +1,21 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon';
+
+function SvgChevronDown(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M23.4595 6.04028C23.2057 5.78644 22.7941 5.78644 22.5403 6.04028L11.9999 16.5807L1.45952 6.04028C1.20568 5.78644 0.794123 5.78644 0.540283 6.04028C0.286442 6.29412 0.286442 6.70568 0.540283 6.95952L11.5403 17.9595C11.7941 18.2134 12.2057 18.2134 12.4595 17.9595L23.4595 6.95952C23.7134 6.70568 23.7134 6.29412 23.4595 6.04028Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+export default SvgChevronDown;