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

package/src/containers/SwapInput/SwapInput.tsx

@@ -0,0 +1,106 @@
+import type { SwapInputProps } from './SwapInput.types';
+
+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">
+                Balance: {props.balance}
+              </Typography>
+              <MaxButton
+                variant="default"
+                size="xsmall"
+                onClick={props.onSelectMaxBalance}>
+                <Typography variant="body" size="xsmall" color="secondary500">
+                  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={4} />
+              <Skeleton variant="text" size="medium" width={92} />
+            </>
+          ) : (
+            <>
+              <InputAmount
+                disabled={props.disabled || props.label === '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.error}
+                </Typography>
+              )}
+            </>
+          )}
+        </div>
+      </div>
+    </Container>
+  );
+}

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

@@ -0,0 +1,41 @@
+import type { PriceImpactWarningLevel } from 'src/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;
+  sharpBottomStyle?: boolean;
+  onClickToken: () => void;
+};
+
+type FromProps = {
+  label: 'From';
+  balance?: string;
+  onSelectMaxBalance: () => void;
+  onInputChange: (inputAmount: string) => void;
+};
+
+type ToProps = {
+  label: 'To';
+  percentageChange: string | null;
+  warningLevel: PriceImpactWarningLevel;
+};
+
+type Common = {
+  label: string;
+};
+
+export type SwapInputProps = BaseProps & (FromProps | ToProps | Common);

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

@@ -0,0 +1,42 @@
+import { Button } from '../../components';
+import { darkTheme, styled } from '../../theme';
+
+export const Container = styled(Button, {
+  variants: {
+    loading: {
+      true: {
+        '&:hover': {
+          background: 'none',
+        },
+      },
+      false: {
+        '&:hover': {
+          borderRadius: '$xs',
+          $$color: '$colors$info100',
+          [`.${darkTheme} &`]: {
+            $$color: '$colors$neutral400',
+          },
+          backgroundColor: '$$color',
+        },
+      },
+    },
+  },
+});
+
+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',
+  },
+});

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="ghost" 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 ? (
+            <>
+              <Skeleton variant="text" size="large" width={92} />
+              <Divider size={4} />
+              <Skeleton variant="text" size="medium" width={92} />
+            </>
+          ) : (
+            <>
+              <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/hooks/index.ts

@@ -1 +1,2 @@
 export { useCopyToClipboard } from './useCopyToClipboard';
+export { usePaddingRight } from './usePaddingRight';

package/src/hooks/usePaddingRight.ts

@@ -0,0 +1,38 @@
+import { useEffect } from 'react';
+
+type Params = {
+  element: HTMLElement | null;
+  paddingRight: string;
+};
+
+/*
+ * This hook employs ResizeObserver to prevent layout shift when the content of the layout overflows.
+ * By implementing this solution, we ensure that there is a constant padding on the right side of the content, regardless of whether or not a scrollbar is present.
+ */
+export function usePaddingRight(params: Params) {
+  const { element, paddingRight } = params;
+  useEffect(() => {
+    let resizeObserver: ResizeObserver | null = null;
+    if (element) {
+      resizeObserver = new ResizeObserver(() => {
+        if (element) {
+          const scrollable = element.scrollHeight > element.clientHeight;
+          if (scrollable) {
+            element.style.paddingRight = `${
+              parseInt(paddingRight) -
+              (element.offsetWidth - element.clientWidth)
+            }px`;
+          } else {
+            element.style.paddingRight = paddingRight;
+          }
+        }
+      });
+      resizeObserver.observe(element);
+    }
+    return () => {
+      if (element) {
+        resizeObserver?.unobserve(element);
+      }
+    };
+  }, [element]);
+}

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/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;