@rango-dev/ui 0.0.0-experimental-936229e8-20251208

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

@@ -0,0 +1,49 @@
+import type { PriceImpactWarningLevel } from '../../components/PriceImpact/PriceImpact.types.js';
+
+export type BaseProps = {
+  id: string;
+  chain: {
+    displayName: string;
+    image?: string;
+  };
+  token: {
+    displayName: string;
+    image?: string;
+    securityWarning?: boolean;
+  };
+  price: {
+    value: string;
+    usdValue?: string;
+    realValue?: string;
+    realUsdValue?: string;
+    error?: string;
+  };
+  loading?: boolean;
+  error?: boolean;
+  disabled?: boolean;
+  label: string;
+  sharpBottomStyle?: boolean;
+  onClickToken: () => void;
+  tooltipContainer?: HTMLElement;
+  selectionType?: 'token' | 'chain';
+};
+
+type FromProps = {
+  mode: 'From';
+  balance?: string;
+  loadingBalance: boolean;
+  onSelectMaxBalance: () => void;
+  onInputChange: (inputAmount: string) => void;
+  anyWalletConnected: boolean;
+  onInputBlur?: (inputAmount: string) => void;
+};
+
+type ToProps = {
+  mode: 'To';
+  fetchingQuote?: boolean;
+  percentageChange: string | null;
+  warningLevel: PriceImpactWarningLevel;
+};
+
+export type SwapInputPropTypes = BaseProps &
+  (FromProps | ToProps) & { tooltipContainer?: HTMLElement };

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

@@ -0,0 +1,123 @@
+import { ChainImageContainer } from '../../components/ChainToken/ChainToken.styles.js';
+import {
+  Button,
+  type TooltipPropTypes,
+  Typography,
+} from '../../components/index.js';
+import { css, darkTheme, styled } from '../../theme.js';
+
+export const Container = styled(Button, {
+  width: '100%',
+  maxWidth: '180px',
+  minWidth: '130px',
+  backgroundColor: 'transparent',
+  borderRadius: '$xs',
+
+  color: '$neutral700',
+  '&:disabled': {
+    color: '$neutral600',
+  },
+  '&:focus-visible': {
+    $$color: '$colors$secondary100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$info700',
+    },
+    backgroundColor: '$$color !important',
+    outline: 0,
+  },
+  '&:disabled:hover': {
+    backgroundColor: 'transparent',
+  },
+  '&:hover': {
+    $$color: '$colors$secondary100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral100',
+    },
+    backgroundColor: '$$color !important',
+
+    [`& ${ChainImageContainer}`]: {
+      $$color: '$colors$secondary100',
+      [`.${darkTheme} &`]: {
+        $$color: '$colors$neutral100',
+      },
+      backgroundColor: '$$color !important',
+    },
+  },
+
+  '& > span': {
+    width: '100%',
+  },
+});
+
+export const chainNameStyles = css();
+
+export const TokenSectionContainer = styled('div', {
+  width: '100%',
+  maxWidth: '170px',
+  padding: '$2 $5',
+  display: 'flex',
+  borderRadius: '$xs',
+  justifyContent: 'start',
+  boxSizing: 'border-box',
+  alignItems: 'center',
+  [`& .${chainNameStyles}`]: {
+    $$color: '$colors$neutral600',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral700',
+    },
+    color: '$$color',
+  },
+});
+
+export const tokenChainStyles = css({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'start',
+  paddingLeft: '$10',
+  flexGrow: 1,
+  textAlign: 'left',
+  width: '100%',
+  overflow: 'hidden',
+});
+
+export const skeletonStyles = css({
+  width: '100%',
+  padding: '$5 $0',
+});
+
+export const TitleContainer = styled('div', {
+  width: '100%',
+  display: 'flex',
+  alignItems: 'center',
+});
+
+export const Title = styled(Typography, {
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+});
+
+export const SymbolTooltipStyles: TooltipPropTypes['styles'] = {
+  content: {
+    padding: '$10',
+  },
+  root: {
+    zIndex: 10,
+    maxWidth: 'calc(100% - 18px)',
+    display: 'flex',
+    justifyContent: 'start',
+  },
+};
+
+export const SymbolTooltipContent = styled(Typography, {
+  maxWidth: 217,
+  lineBreak: 'anywhere',
+});
+
+export const BlockChainTypography = styled(Typography, {
+  maxWidth: 96,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+});

package/src/containers/SwapInput/TokenSection.tsx

@@ -0,0 +1,124 @@
+import type { TokenSectionProps } from './TokenSection.types.js';
+
+import { i18n } from '@lingui/core';
+import React from 'react';
+import { CustomTokenWarning } from 'src/components/CustomTokenWarning/CustomTokenWarning.js';
+
+import {
+  ChainToken,
+  Divider,
+  Skeleton,
+  Tooltip,
+  Typography,
+} from '../../components/index.js';
+
+import {
+  chainNameStyles,
+  Container,
+  skeletonStyles,
+  SymbolTooltipContent,
+  SymbolTooltipStyles,
+  Title,
+  TitleContainer,
+  tokenChainStyles,
+  TokenSectionContainer,
+} from './TokenSection.styles.js';
+
+export function TokenSection(props: TokenSectionProps) {
+  const {
+    error,
+    chainImage,
+    tokenImage,
+    tokenSymbol,
+    chain,
+    chianImageId,
+    onClick,
+    loading,
+    warning,
+    tooltipContainer,
+    id,
+    selectionType = 'token',
+  } = props;
+
+  const tokenSelected = !error && !loading && !!tokenSymbol;
+
+  const getBodyContent = () => {
+    if (error) {
+      return error;
+    } else if (!loading && !chain) {
+      return selectionType === 'token'
+        ? i18n.t('Select Chain')
+        : i18n.t('Select gas chain');
+    }
+    return chain;
+  };
+
+  return (
+    <Container
+      id={`${id}-clear-all-btn`}
+      variant="default"
+      disabled={error || loading}
+      onClick={onClick}>
+      <TokenSectionContainer>
+        <ChainToken
+          chianImageId={chianImageId}
+          size="large"
+          useAsPlaceholder={error}
+          chainImage={chainImage}
+          tokenImage={tokenImage}
+          loading={loading}
+        />
+        <div className={tokenChainStyles()}>
+          {loading ? (
+            <div className={skeletonStyles()}>
+              <Skeleton variant="text" size="large" />
+              <Divider size={8} />
+              <Skeleton variant="text" size="medium" />
+            </div>
+          ) : (
+            <>
+              <TitleContainer>
+                {tokenSelected ? (
+                  <Tooltip
+                    styles={SymbolTooltipStyles}
+                    align="start"
+                    side="bottom"
+                    alignOffset={-15}
+                    sideOffset={15}
+                    container={tooltipContainer}
+                    content={
+                      <SymbolTooltipContent variant="body" size="xsmall">
+                        {tokenSymbol}
+                      </SymbolTooltipContent>
+                    }>
+                    <Title variant="title" size="medium">
+                      {tokenSymbol}
+                    </Title>
+                  </Tooltip>
+                ) : (
+                  <Typography variant="title" size="medium">
+                    {selectionType === 'token'
+                      ? i18n.t('Select Token')
+                      : i18n.t('Select Chain')}
+                  </Typography>
+                )}
+                {warning && (
+                  <>
+                    <Divider size={4} direction="horizontal" />
+                    <CustomTokenWarning container={tooltipContainer} />
+                  </>
+                )}
+              </TitleContainer>
+              <Typography
+                variant="body"
+                size="medium"
+                className={chainNameStyles()}>
+                {getBodyContent()}
+              </Typography>
+            </>
+          )}
+        </div>
+      </TokenSectionContainer>
+    </Container>
+  );
+}

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

@@ -0,0 +1,14 @@
+export type TokenSectionProps = {
+  chainImage?: string;
+  tokenImage?: string;
+  tokenSymbol: string;
+  id: string;
+  chain: string;
+  chianImageId?: string;
+  error?: boolean;
+  onClick: () => void;
+  loading?: boolean;
+  warning?: boolean;
+  tooltipContainer?: HTMLElement;
+  selectionType?: 'token' | 'chain';
+};

package/src/containers/SwapInput/index.ts

@@ -0,0 +1,2 @@
+export { SwapInput } from './SwapInput.js';
+export type { SwapInputPropTypes } from './SwapInput.types.js';

package/src/containers/Warnings/BalanceErrors.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import { Typography } from '../../components/index.js';
+import { styled } from '../../theme.js';
+
+interface PropTypes {
+  messages: string[];
+}
+
+const List = styled('ul', {
+  padding: '$0 $0 $40 $0',
+  margin: 0,
+});
+
+const ListItem = styled('li', {
+  paddingBottom: '$10',
+});
+
+const Message = styled(Typography, {
+  display: 'block',
+});
+
+export function BalanceErrors({ messages }: PropTypes) {
+  return (
+    <>
+      <List>
+        {messages.map((warning, index) => {
+          const key = index + warning;
+          return (
+            <ListItem key={key}>
+              <Message variant="body" size="medium" color="$neutral700">
+                {warning}
+              </Message>
+            </ListItem>
+          );
+        })}
+      </List>
+    </>
+  );
+}

package/src/containers/Warnings/index.ts

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

package/src/containers/index.ts

@@ -0,0 +1,4 @@
+export * from './ConnectWalletsModal/index.js';
+export * from './Warnings/index.js';
+export * from './SwapInput/index.js';
+export * from './Notifications/index.js';

package/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export { useCopyToClipboard } from './useCopyToClipboard.js';
+export { useIsTruncated } from './useIsTruncated.js';

package/src/hooks/useCopyToClipboard.ts

@@ -0,0 +1,23 @@
+import copy from 'copy-to-clipboard';
+import React from 'react';
+
+export function useCopyToClipboard(resetInterval?: number) {
+  const [isCopied, setCopied] = React.useState(false);
+
+  const handleCopy = React.useCallback((text: string | number) => {
+    copy(text.toString());
+    setCopied(true);
+  }, []);
+
+  React.useEffect(() => {
+    let timeout: NodeJS.Timeout;
+    if (isCopied && resetInterval) {
+      timeout = setTimeout(() => setCopied(false), resetInterval);
+    }
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [isCopied, resetInterval]);
+
+  return [isCopied, handleCopy] as const;
+}

package/src/hooks/useIsTruncated.tsx

@@ -0,0 +1,27 @@
+import { type RefObject, useEffect, useState } from 'react';
+
+/*
+ * This hook checks whether the text (or content) inside a React element fits within its width.
+ * In other words, it determines if the content is truncated or fully visible.
+ */
+
+export function useIsTruncated(
+  content: string,
+  ref: RefObject<HTMLElement>
+): boolean {
+  const [isTruncated, setIsTruncated] = useState(false);
+
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) {
+      return;
+    }
+    if (element.scrollWidth > element.clientWidth) {
+      setIsTruncated(true);
+    } else {
+      setIsTruncated(false);
+    }
+  }, [content, ref.current]);
+
+  return isTruncated;
+}

package/src/icons/Add.tsx

@@ -0,0 +1,25 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon/index.js';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon/index.js';
+
+function SvgAdd(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 24 25" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        d="M18.8611 13.6389H4.63889C4.15296 13.6389 3.75 13.2359 3.75 12.75C3.75 12.2641 4.15296 11.8611 4.63889 11.8611H18.8611C19.347 11.8611 19.75 12.2641 19.75 12.75C19.75 13.2359 19.347 13.6389 18.8611 13.6389Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        d="M11.75 20.75C11.2641 20.75 10.8611 20.347 10.8611 19.8611V5.63889C10.8611 5.15296 11.2641 4.75 11.75 4.75C12.2359 4.75 12.6389 5.15296 12.6389 5.63889V19.8611C12.6389 20.347 12.2359 20.75 11.75 20.75Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+export default SvgAdd;

package/src/icons/Affiliate.tsx

@@ -0,0 +1,21 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon/index.js';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon/index.js';
+
+function SvgAffiliate(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="M3.45318 2.60045C3.57763 2.60561 3.70937 2.61423 3.84631 2.62555C4.17141 2.65241 4.5031 2.69234 4.81038 2.72934C4.83446 2.73224 4.85839 2.73512 4.88215 2.73798C5.19198 2.77521 5.50531 2.81244 5.71946 2.81549C6.0508 2.82019 6.32322 2.55541 6.32793 2.22407C6.33264 1.89274 6.06785 1.62032 5.73651 1.61561C5.60081 1.61368 5.3621 1.58702 5.02531 1.54655C5.00076 1.5436 4.97583 1.5406 4.95056 1.53755C4.6469 1.50097 4.29373 1.45842 3.94513 1.42962C3.57094 1.3987 3.17504 1.38108 2.82889 1.4088C2.65549 1.42269 2.47599 1.44926 2.30897 1.49983C2.14712 1.54884 1.9535 1.63327 1.79549 1.79127M3.45318 2.60045L5.48846 4.63574C5.72278 4.87005 5.72278 5.24995 5.48846 5.48426C5.25415 5.71858 4.87425 5.71858 4.63994 5.48426L2.60464 3.44897C2.6098 3.57342 2.61842 3.70517 2.62974 3.84211C2.6566 4.16722 2.69654 4.49891 2.73354 4.80619C2.73644 4.83027 2.73932 4.85419 2.74217 4.87795C2.77941 5.18779 2.81664 5.50112 2.81969 5.71527C2.82439 6.04661 2.55961 6.31903 2.22827 6.32374C1.89693 6.32844 1.62452 6.06366 1.61981 5.73232C1.61788 5.59663 1.59122 5.35791 1.55075 5.02112C1.54779 4.99657 1.54479 4.97164 1.54175 4.94637C1.50516 4.64271 1.46262 4.28953 1.43381 3.94093C1.40289 3.56674 1.38526 3.17084 1.41299 2.82468C1.42688 2.65128 1.45345 2.47178 1.50403 2.30476C1.55304 2.14291 1.63748 1.94928 1.79549 1.79128M21.6816 1.49983C21.8435 1.54884 22.0371 1.63327 22.1951 1.79128C22.3531 1.94928 22.4375 2.14291 22.4866 2.30476C22.5371 2.47178 22.5637 2.65128 22.5776 2.82468C22.6053 3.17084 22.5877 3.56674 22.5568 3.94093C22.528 4.28956 22.4854 4.64277 22.4488 4.94645C22.4458 4.97169 22.4428 4.99659 22.4398 5.02112C22.3994 5.35791 22.3727 5.59663 22.3708 5.73232C22.3661 6.06366 22.0936 6.32844 21.7623 6.32374C21.431 6.31903 21.1662 6.04661 21.1709 5.71527C21.1739 5.50112 21.2112 5.18779 21.2484 4.87795C21.2513 4.85418 21.2541 4.83023 21.257 4.80614C21.294 4.49887 21.334 4.1672 21.3608 3.84211C21.3722 3.70517 21.3808 3.57342 21.3859 3.44897L19.3506 5.48426C19.1163 5.71858 18.7364 5.71858 18.5021 5.48426C18.2678 5.24995 18.2678 4.87005 18.5021 4.63574L20.5374 2.60045C20.413 2.60561 20.2812 2.61423 20.1443 2.62555C19.8192 2.65241 19.4875 2.69235 19.1802 2.72934C19.1561 2.73224 19.1322 2.73512 19.1084 2.73798C18.7986 2.77521 18.4853 2.81244 18.2711 2.81549C17.9398 2.82019 17.6674 2.55541 17.6627 2.22407C17.6579 1.89274 17.9227 1.62032 18.2541 1.61561C18.3898 1.61368 18.6285 1.58702 18.9653 1.54655C18.9898 1.5436 19.0148 1.5406 19.04 1.53755C19.3437 1.50097 19.6969 1.45842 20.0455 1.42962C20.4196 1.3987 20.8155 1.38108 21.1617 1.4088C21.3351 1.42269 21.5146 1.44926 21.6816 1.49983ZM12 5.6C8.46537 5.6 5.59999 8.46538 5.59999 12C5.59999 15.5346 8.46537 18.4 12 18.4C15.5346 18.4 18.4 15.5346 18.4 12C18.4 8.46538 15.5346 5.6 12 5.6ZM4.39999 12C4.39999 7.80264 7.80263 4.4 12 4.4C16.1974 4.4 19.6 7.80264 19.6 12C19.6 16.1974 16.1974 19.6 12 19.6C7.80263 19.6 4.39999 16.1974 4.39999 12ZM11.914 7.85703C12.2454 7.85703 12.514 8.12566 12.514 8.45703V8.74862C12.7685 8.79155 12.9983 8.86333 13.2082 8.96269C13.5718 9.13478 13.8401 9.37297 14.0577 9.61866C14.2774 9.86671 14.2545 10.2459 14.0064 10.4656C13.7584 10.6854 13.3792 10.6624 13.1595 10.4143C13.0136 10.2497 12.87 10.1302 12.6948 10.0473C12.5196 9.96434 12.2773 9.90127 11.914 9.90127C11.4745 9.90127 11.1257 10.0294 10.9013 10.1966C10.6762 10.3644 10.6 10.547 10.6 10.6887C10.6 10.8984 10.6593 10.9952 10.778 11.0741C10.9459 11.1858 11.3023 11.2999 12 11.2999C12.8926 11.2999 13.5695 11.5021 14.0216 11.9271C14.4822 12.3602 14.6 12.9206 14.6 13.3875C14.6 13.975 14.31 14.4863 13.8122 14.8284C13.4625 15.0687 13.0219 15.2201 12.514 15.2849V15.5088C12.514 15.8402 12.2454 16.1088 11.914 16.1088C11.5826 16.1088 11.314 15.8402 11.314 15.5088V15.2883C11.0965 15.2607 10.8972 15.214 10.7078 15.1413C10.3529 15.0052 10.0837 14.7967 9.8224 14.5603C9.5767 14.3379 9.55776 13.9585 9.7801 13.7128C10.0024 13.4671 10.3819 13.4482 10.6276 13.6705C10.8459 13.8681 10.9857 13.9626 11.1377 14.021C11.294 14.0809 11.5136 14.1214 11.914 14.1214C12.5245 14.1214 12.9142 13.9895 13.1325 13.8394C13.3341 13.7009 13.4 13.5453 13.4 13.3875C13.4 13.1093 13.3319 12.9258 13.1996 12.8014C13.0587 12.6689 12.7356 12.4999 12 12.4999C11.2196 12.4999 10.576 12.381 10.1134 12.0734C9.60164 11.733 9.39999 11.2242 9.39999 10.6887C9.39999 10.0851 9.7285 9.57404 10.1842 9.23441C10.499 8.99982 10.886 8.83524 11.314 8.75567V8.45703C11.314 8.12566 11.5826 7.85703 11.914 7.85703ZM2.22827 17.6422C2.55961 17.6469 2.82439 17.9193 2.81969 18.2506C2.81664 18.4648 2.77941 18.7781 2.74217 19.0879C2.73932 19.1117 2.73644 19.1356 2.73354 19.1597C2.69654 19.467 2.6566 19.7987 2.62974 20.1238C2.61842 20.2607 2.6098 20.3925 2.60464 20.5169L4.63994 18.4816C4.87425 18.2473 5.25415 18.2473 5.48846 18.4816C5.72278 18.716 5.72278 19.0959 5.48846 19.3302L3.45318 21.3654C3.57763 21.3603 3.70937 21.3517 3.84631 21.3404C4.17139 21.3135 4.50305 21.2736 4.81032 21.2366C4.83442 21.2337 4.85837 21.2308 4.88215 21.2279C5.19198 21.1907 5.50531 21.1535 5.71946 21.1504C6.0508 21.1457 6.32322 21.4105 6.32793 21.7418C6.33264 22.0732 6.06785 22.3456 5.73651 22.3503C5.60081 22.3522 5.3621 22.3789 5.02531 22.4194C5.00073 22.4223 4.97578 22.4253 4.95049 22.4284C4.64685 22.4649 4.2937 22.5075 3.94513 22.5363C3.57094 22.5672 3.17504 22.5848 2.82889 22.5571C2.65549 22.5432 2.47599 22.5166 2.30897 22.4661C2.14712 22.4171 1.9535 22.3326 1.79549 22.1746C1.63748 22.0166 1.55304 21.823 1.50403 21.6611C1.45345 21.4941 1.42688 21.3146 1.41299 21.1412C1.38526 20.7951 1.40289 20.3992 1.43381 20.025C1.46262 19.6764 1.50517 19.3232 1.54175 19.0195C1.54479 18.9943 1.5478 18.9693 1.55075 18.9448C1.59122 18.608 1.61788 18.3693 1.61981 18.2336C1.62452 17.9022 1.89693 17.6375 2.22827 17.6422ZM21.7623 17.6422C22.0936 17.6375 22.3661 17.9022 22.3708 18.2336C22.3727 18.3693 22.3994 18.608 22.4398 18.9448C22.4428 18.9693 22.4458 18.9942 22.4488 19.0194C22.4854 19.3231 22.528 19.6763 22.5568 20.025C22.5877 20.3992 22.6053 20.7951 22.5776 21.1412C22.5637 21.3146 22.5371 21.4941 22.4866 21.6611C22.4375 21.823 22.3531 22.0166 22.1951 22.1746C22.0371 22.3326 21.8435 22.4171 21.6816 22.4661C21.5146 22.5166 21.3351 22.5432 21.1617 22.5571C20.8155 22.5848 20.4196 22.5672 20.0455 22.5363C19.6969 22.5075 19.3437 22.4649 19.0401 22.4284C19.0148 22.4253 18.9899 22.4223 18.9653 22.4194C18.6285 22.3789 18.3898 22.3522 18.2541 22.3503C17.9227 22.3456 17.6579 22.0732 17.6627 21.7418C17.6674 21.4105 17.9398 21.1457 18.2711 21.1504C18.4853 21.1535 18.7986 21.1907 19.1084 21.2279C19.1322 21.2308 19.1562 21.2337 19.1803 21.2366C19.4875 21.2736 19.8192 21.3135 20.1443 21.3404C20.2812 21.3517 20.413 21.3603 20.5374 21.3655L18.5021 19.3302C18.2678 19.0959 18.2678 18.716 18.5021 18.4816C18.7364 18.2473 19.1163 18.2473 19.3506 18.4816L21.3859 20.5169C21.3808 20.3925 21.3722 20.2607 21.3608 20.1238C21.334 19.7987 21.294 19.467 21.257 19.1598C21.2541 19.1357 21.2513 19.1117 21.2484 19.0879C21.2112 18.7781 21.1739 18.4648 21.1709 18.2506C21.1662 17.9193 21.431 17.6469 21.7623 17.6422Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+export default SvgAffiliate;

package/src/icons/AutoTheme.tsx

@@ -0,0 +1,45 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon/index.js';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon/index.js';
+
+function SvgAutoTheme(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 24 25" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M8.67039 5.54766C8.67994 5.54187 8.68937 5.53695 8.69935 5.53245L8.71277 5.52846C8.74207 5.52051 8.77226 5.51778 8.80218 5.52045C8.8367 5.52346 8.87064 5.53342 8.90134 5.54974C8.93205 5.56607 8.95903 5.58852 8.98102 5.61568C9.00257 5.64277 9.01894 5.67402 9.02829 5.70756L9.66563 7.65375L9.60439 7.67032C9.54198 7.68708 9.47797 7.70395 9.41702 7.72391C9.33427 7.75101 9.2558 7.78366 9.17544 7.81428L8.53809 5.86809C8.51629 5.80775 8.51786 5.74138 8.54227 5.68226C8.56661 5.62296 8.61265 5.57495 8.67039 5.54766Z"
+        fill="currentColor"
+      />
+      <path
+        d="M4.31652 9.28115C4.34365 9.24036 4.38217 9.20811 4.4269 9.18856C4.46226 9.17289 4.50065 9.16523 4.53906 9.16635C4.57746 9.16747 4.61539 9.17714 4.64978 9.19471L6.48083 10.1223C6.42748 10.2155 6.37764 10.3093 6.3311 10.4045C6.30215 10.4635 6.27424 10.5231 6.247 10.5836L4.41595 9.65597C4.372 9.63416 4.33549 9.60011 4.30989 9.55818C4.28467 9.51613 4.27171 9.46782 4.27283 9.41878C4.27395 9.36974 4.28895 9.32188 4.31652 9.28115Z"
+        fill="currentColor"
+      />
+      <path
+        d="M6.83869 14.1002C6.07832 11.7784 7.34267 9.27443 9.66435 8.51412C9.9063 8.43488 10.1502 8.37772 10.3939 8.34146C10.0982 9.29702 10.0106 10.3458 10.181 11.417C10.5306 13.6147 11.8965 15.3978 13.6791 16.2836C13.3073 16.5594 12.8853 16.781 12.4214 16.9329C10.0993 17.6934 7.59912 16.4223 6.83869 14.1002Z"
+        fill="currentColor"
+      />
+      <path
+        d="M3.8378 14.911C3.86254 14.8466 3.91143 14.7948 3.97426 14.7669L3.99187 14.7607L3.99975 14.7585C4.00807 14.7552 4.01693 14.7523 4.02561 14.7501L5.97678 14.1111C5.99167 14.1653 6.00637 14.2214 6.02212 14.277C6.03057 14.3066 6.03933 14.3358 6.04876 14.3646C6.06177 14.4043 6.07607 14.443 6.09068 14.4814L6.13737 14.6015L4.1862 15.2404C4.12305 15.2687 4.05169 15.2706 3.98759 15.246C3.92313 15.2215 3.87145 15.1724 3.84351 15.1095C3.8152 15.0468 3.81343 14.9752 3.8378 14.911Z"
+        fill="currentColor"
+      />
+      <path
+        d="M7.51423 19.1168L8.44186 17.2858C8.59168 17.3711 8.74049 17.4508 8.89807 17.5211L7.97561 19.3504C7.9445 19.4115 7.89054 19.4578 7.82552 19.4791C7.76014 19.5005 7.68924 19.4951 7.62801 19.4643C7.56708 19.4331 7.52078 19.3791 7.49943 19.3139C7.4889 19.2818 7.48472 19.2478 7.48711 19.2139C7.48993 19.18 7.49914 19.1469 7.51423 19.1168Z"
+        fill="currentColor"
+      />
+      <path
+        d="M13.0798 19.7377L12.4423 17.7913C12.5256 17.7683 12.6078 17.7484 12.691 17.7212C12.7722 17.6945 12.8537 17.6609 12.9329 17.6307L13.5703 19.577C13.5813 19.6094 13.586 19.6437 13.5837 19.6778L13.5815 19.7C13.5775 19.7262 13.5695 19.752 13.5573 19.776C13.5421 19.8068 13.5211 19.8341 13.495 19.8565C13.4806 19.8688 13.4653 19.8795 13.4489 19.8884C13.4354 19.8957 13.4214 19.9017 13.4066 19.9065C13.3741 19.9172 13.3399 19.9212 13.3055 19.9186C13.2714 19.9158 13.238 19.9063 13.2079 19.8904C13.1966 19.8847 13.1858 19.878 13.1757 19.8707C13.1581 19.8583 13.1422 19.8434 13.1282 19.8269C13.1065 19.8007 13.09 19.7703 13.0798 19.7377Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M14.2386 8.51423C14.5854 7.29762 15.4329 6.31226 16.5434 5.77669C16.777 5.66404 16.7626 5.29952 16.5044 5.27455C13.9779 5.03012 11.5363 6.63125 10.831 9.17829C10.0531 11.9895 11.6984 14.9386 14.5238 15.7463C16.3896 16.2796 18.3976 15.7372 19.7517 14.4016C19.9363 14.2195 19.7197 13.9339 19.4689 13.9996C16.3574 14.8152 13.1572 12.308 14.2386 8.51423Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+export default SvgAutoTheme;

package/src/icons/Autorenew.tsx

@@ -0,0 +1,20 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon/index.js';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon/index.js';
+
+function SvgAutorenew(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 24 24">
+      <path
+        fillRule="evenodd"
+        d="M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8c-.45-.83-.7-1.79-.7-2.8 0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+export default SvgAutorenew;

package/src/icons/BorderRadius.tsx

@@ -0,0 +1,24 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon/index.js';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon/index.js';
+
+function SvgBorderRadius(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <g id="Icons">
+        <path
+          id="Border-Radius"
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M3.48926 7.74652C3.48926 5.15304 5.592 3 8.24997 3C8.53793 3 8.77138 3.22074 8.77138 3.49304C8.77138 3.76533 8.53793 3.98607 8.24997 3.98607C6.22533 3.98607 4.53208 5.64173 4.53208 7.74652C4.53208 8.01881 4.29864 8.23955 4.01067 8.23955C3.7227 8.23955 3.48926 8.01881 3.48926 7.74652ZM16.2071 3.49304C16.2071 3.22074 16.4406 3 16.7286 3C19.3865 3 21.4893 5.15304 21.4893 7.74652C21.4893 8.01882 21.2558 8.23956 20.9678 8.23956C20.6799 8.23956 20.4464 8.01882 20.4464 7.74652C20.4464 5.64173 18.7532 3.98607 16.7286 3.98607C16.4406 3.98607 16.2071 3.76533 16.2071 3.49304ZM5.60885 7.74638C5.60885 6.32747 6.76259 5.1266 8.24991 5.1266L16.7285 5.1266C18.2158 5.1266 19.3696 6.32747 19.3696 7.74638L19.3696 16.2533C19.3696 17.6722 18.2158 18.8731 16.7285 18.8731L8.2499 18.8731C6.76259 18.8731 5.60885 17.6722 5.60885 16.2533L5.60885 7.74638ZM8.24991 6.11267C7.39592 6.11267 6.65167 6.81615 6.65167 7.74638L6.65167 16.2533C6.65167 17.1836 7.39592 17.887 8.2499 17.887L16.7285 17.887C17.5825 17.887 18.3267 17.1836 18.3267 16.2533L18.3267 7.74638C18.3267 6.81616 17.5825 6.11267 16.7285 6.11267L8.24991 6.11267ZM4.01067 15.7604C4.29864 15.7604 4.53208 15.9812 4.53208 16.2535C4.53208 18.3583 6.22533 20.0139 8.24996 20.0139C8.53793 20.0139 8.77138 20.2347 8.77138 20.507C8.77138 20.7793 8.53793 21 8.24996 21C5.592 21 3.48926 18.847 3.48926 16.2535C3.48926 15.9812 3.7227 15.7604 4.01067 15.7604ZM20.9678 15.7604C21.2558 15.7604 21.4893 15.9812 21.4893 16.2535C21.4893 18.847 19.3865 21 16.7285 21C16.4406 21 16.2071 20.7793 16.2071 20.507C16.2071 20.2347 16.4406 20.0139 16.7285 20.0139C18.7532 20.0139 20.4464 18.3583 20.4464 16.2535C20.4464 15.9812 20.6799 15.7604 20.9678 15.7604Z"
+          fill="#727272"
+        />
+      </g>
+    </svg>
+  );
+}
+export default SvgBorderRadius;

package/src/icons/Bridges.tsx

@@ -0,0 +1,19 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon/index.js';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon/index.js';
+
+function SvgBridges(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M18.21 9.21C15.93 10.78 13.45 13.3 13 17H15V19H9V17H11C10.5 12.5 6.63 9 2 9V7C6.39 7 10.22 9.55 12 13.3C13.13 10.87 14.99 9.05 16.78 7.78L14 5H21V12L18.21 9.21Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+export default SvgBridges;

package/src/icons/BugReport.tsx

@@ -0,0 +1,58 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon/index.js';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon/index.js';
+
+function SvgBugReport(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_20032_457548)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M1.3999 5.9999C1.3999 3.45939 3.45939 1.3999 5.9999 1.3999H14.9999C17.5404 1.3999 19.5999 3.45939 19.5999 5.9999V10.9999C19.5999 11.3313 19.3313 11.5999 18.9999 11.5999C18.6685 11.5999 18.3999 11.3313 18.3999 10.9999V5.9999C18.3999 4.12213 16.8777 2.5999 14.9999 2.5999H5.9999C4.12213 2.5999 2.5999 4.12213 2.5999 5.9999V17.9999C2.5999 19.8777 4.12213 21.3999 5.9999 21.3999H9.9999C10.3313 21.3999 10.5999 21.6685 10.5999 21.9999C10.5999 22.3313 10.3313 22.5999 9.9999 22.5999H5.9999C3.45939 22.5999 1.3999 20.5404 1.3999 17.9999V5.9999Z"
+          fill="currentColor"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M4.8999 6.9999C4.8999 6.66853 5.16853 6.3999 5.4999 6.3999H15.4999C15.8313 6.3999 16.0999 6.66853 16.0999 6.9999C16.0999 7.33127 15.8313 7.5999 15.4999 7.5999H5.4999C5.16853 7.5999 4.8999 7.33127 4.8999 6.9999Z"
+          fill="currentColor"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M4.8999 10.9999C4.8999 10.6685 5.16853 10.3999 5.4999 10.3999H11.4999C11.8313 10.3999 12.0999 10.6685 12.0999 10.9999C12.0999 11.3313 11.8313 11.5999 11.4999 11.5999H5.4999C5.16853 11.5999 4.8999 11.3313 4.8999 10.9999Z"
+          fill="currentColor"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M16.4999 22.7999C18.8747 22.7999 20.7999 20.8747 20.7999 18.4999C20.7999 16.1251 18.8747 14.1999 16.4999 14.1999C14.1251 14.1999 12.1999 16.1251 12.1999 18.4999C12.1999 20.8747 14.1251 22.7999 16.4999 22.7999ZM16.4999 23.9999C19.5375 23.9999 21.9999 21.5375 21.9999 18.4999C21.9999 15.4623 19.5375 12.9999 16.4999 12.9999C13.4623 12.9999 10.9999 15.4623 10.9999 18.4999C10.9999 21.5375 13.4623 23.9999 16.4999 23.9999Z"
+          fill="currentColor"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M16.4999 15.7999C16.8313 15.7999 17.0999 16.0685 17.0999 16.3999V18.4999C17.0999 18.8313 16.8313 19.0999 16.4999 19.0999C16.1685 19.0999 15.8999 18.8313 15.8999 18.4999V16.3999C15.8999 16.0685 16.1685 15.7999 16.4999 15.7999Z"
+          fill="currentColor"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M16.4999 19.7999C16.8313 19.7999 17.0999 20.0685 17.0999 20.3999V20.4499C17.0999 20.7813 16.8313 21.0499 16.4999 21.0499C16.1685 21.0499 15.8999 20.7813 15.8999 20.4499V20.3999C15.8999 20.0685 16.1685 19.7999 16.4999 19.7999Z"
+          fill="currentColor"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_20032_457548">
+          <rect width={24} height={24} fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
+export default SvgBugReport;