@rango-dev/ui 0.15.1-next.0 → 0.15.1-next.10

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,41 @@
+import type { MutableRefObject } from 'react';
+
+import { useLayoutEffect } from 'react';
+
+type Params = {
+  elementRef: MutableRefObject<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 { elementRef, paddingRight } = params;
+  useLayoutEffect(() => {
+    let resizeObserver: ResizeObserver | null = null;
+    if (elementRef.current) {
+      resizeObserver = new ResizeObserver(() => {
+        if (elementRef.current) {
+          const scrollable =
+            elementRef.current.scrollHeight > elementRef.current.clientHeight;
+          if (scrollable) {
+            elementRef.current.style.paddingRight = `${
+              parseInt(paddingRight) -
+              (elementRef.current.offsetWidth - elementRef.current.clientWidth)
+            }px`;
+          } else {
+            elementRef.current.style.paddingRight = paddingRight;
+          }
+        }
+      });
+      resizeObserver.observe(elementRef.current);
+    }
+    return () => {
+      if (elementRef.current) {
+        resizeObserver?.unobserve(elementRef.current);
+      }
+    };
+  }, [elementRef.current]);
+}

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;

package/src/icons/ChevronLeft.tsx

@@ -0,0 +1,21 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon';
+
+function SvgChevronLeft(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="M17.9597 0.540478C18.2136 0.794319 18.2136 1.20588 17.9597 1.45972L7.41934 12.0001L17.9597 22.5405C18.2136 22.7943 18.2136 23.2059 17.9597 23.4597C17.7059 23.7136 17.2943 23.7136 17.0405 23.4597L6.04048 12.4597C5.78664 12.2059 5.78664 11.7943 6.04048 11.5405L17.0405 0.540478C17.2943 0.286637 17.7059 0.286637 17.9597 0.540478Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+export default SvgChevronLeft;

package/src/icons/ChevronRight.tsx

@@ -0,0 +1,21 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon';
+
+function SvgChevronRight(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="M6.04028 0.540478C5.78644 0.794319 5.78644 1.20588 6.04028 1.45972L16.5807 12.0001L6.04028 22.5405C5.78644 22.7943 5.78644 23.2059 6.04028 23.4597C6.29412 23.7136 6.70568 23.7136 6.95952 23.4597L17.9595 12.4597C18.2134 12.2059 18.2134 11.7943 17.9595 11.5405L6.95952 0.540478C6.70568 0.286637 6.29412 0.286637 6.04028 0.540478Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+export default SvgChevronRight;

package/src/icons/ChevronUp.tsx

@@ -0,0 +1,21 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon';
+
+function SvgChevronUp(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="M1.17976 17.6273C1.41944 17.867 1.80803 17.867 2.04771 17.6273L12 7.67504L21.9523 17.6273C22.192 17.867 22.5806 17.867 22.8202 17.6273C23.0599 17.3877 23.0599 16.9991 22.8202 16.7594L12.434 6.37312C12.1943 6.13344 11.8057 6.13344 11.566 6.37312L1.17976 16.7594C0.940081 16.9991 0.940081 17.3877 1.17976 17.6273Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+export default SvgChevronUp;

package/src/icons/Close.tsx

@@ -0,0 +1,28 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon';
+
+function SvgClose(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_3736_40175)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M23.4597 0.540356C23.7135 0.794197 23.7135 1.20575 23.4597 1.45959L12.9193 12L23.4597 22.5404C23.7135 22.7942 23.7135 23.2058 23.4597 23.4596C23.2059 23.7134 22.7943 23.7134 22.5405 23.4596L12.0001 12.9192L1.45972 23.4596C1.20588 23.7134 0.794319 23.7134 0.540478 23.4596C0.286637 23.2057 0.286637 22.7942 0.540478 22.5403L11.0808 12L0.54048 1.45961C0.286639 1.20577 0.286639 0.794217 0.54048 0.540376C0.794321 0.286535 1.20588 0.286535 1.45972 0.540376L12.0001 11.0807L22.5405 0.540356C22.7943 0.286515 23.2059 0.286515 23.4597 0.540356Z"
+          fill="currentColor"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_3736_40175">
+          <rect width={24} height={24} fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
+export default SvgClose;

package/src/icons/Complete.tsx

@@ -0,0 +1,19 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon';
+
+function SvgComplete(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M12 24C9.62663 24 7.30655 23.2962 5.33316 21.9776C3.35977 20.6591 1.8217 18.7849 0.913451 16.5922C0.00519937 14.3995 -0.232441 11.9867 0.230582 9.65892C0.693604 7.33115 1.83649 5.19295 3.51472 3.51472C5.19295 1.83649 7.33115 0.693604 9.65892 0.230582C11.9867 -0.232441 14.3995 0.00519937 16.5922 0.913451C18.7849 1.8217 20.6591 3.35977 21.9776 5.33316C23.2962 7.30655 24 9.62663 24 12C23.9964 15.1815 22.731 18.2317 20.4813 20.4813C18.2317 22.731 15.1815 23.9964 12 24ZM5.24958 10.7467C5.02396 10.7461 4.80338 10.8134 4.61649 10.9398C4.42961 11.0663 4.28505 11.2459 4.20158 11.4556C4.11812 11.6652 4.09962 11.8951 4.14847 12.1153C4.19732 12.3356 4.31128 12.5361 4.47553 12.6908L9.38309 17.3238C9.59865 17.5247 9.88439 17.6329 10.1789 17.6253C10.4734 17.6178 10.7532 17.495 10.9582 17.2833L19.556 8.28277C19.7619 8.06674 19.8735 7.77777 19.8663 7.47942C19.8591 7.18108 19.7338 6.89781 19.5177 6.69192C19.3017 6.48603 19.0127 6.3744 18.7144 6.38157C18.416 6.38875 18.1328 6.51414 17.9269 6.73017L10.1144 14.9139L6.02363 11.0527C5.81479 10.856 5.5387 10.7466 5.25183 10.7467H5.24958Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+export default SvgComplete;

package/src/icons/Copy.tsx

@@ -0,0 +1,19 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon';
+
+function SvgCopy(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 25 24" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M20.4327 5.58132H16.0737V1.95344C16.071 1.43619 15.8811 0.941128 15.5451 0.575383C15.2091 0.209663 14.7541 0.00277478 14.2789 0H4.02234C3.54722 0.00280315 3.09223 0.209677 2.75619 0.575383C2.42017 0.941104 2.23026 1.43614 2.22754 1.95344V16.465C2.23029 16.9823 2.42019 17.4776 2.75619 17.8433C3.09221 18.209 3.54722 18.4157 4.02234 18.4187H8.38133V22.0466C8.38408 22.5638 8.57398 23.0589 8.90999 23.4246C9.246 23.7903 9.70101 23.9972 10.1761 24H20.4327C20.9079 23.9972 21.3628 23.7903 21.6989 23.4246C22.0349 23.0589 22.2248 22.5639 22.2275 22.0466V7.53495C22.2248 7.0177 22.0349 6.52245 21.6989 6.1567C21.3629 5.79098 20.9079 5.58429 20.4327 5.58132ZM4.02278 16.7441C3.88129 16.7441 3.76625 16.6192 3.76625 16.465V1.95344C3.76625 1.79927 3.88112 1.67443 4.0226 1.67443H14.2792C14.3472 1.67443 14.4125 1.70377 14.4605 1.7561C14.5086 1.80842 14.5356 1.87944 14.5356 1.95344V5.58132H10.1766C9.70145 5.58431 9.24647 5.791 8.91043 6.1567C8.57441 6.52242 8.3845 7.01765 8.38177 7.53495V16.7443L4.02278 16.7441ZM20.689 22.0467C20.689 22.1208 20.662 22.1918 20.614 22.2441C20.5659 22.2964 20.5006 22.3258 20.4327 22.3258H10.176C10.0346 22.3258 9.91969 22.2009 9.91969 22.0467V7.53515C9.91969 7.38097 10.0346 7.25595 10.176 7.25595H20.4327C20.5006 7.25595 20.5659 7.28548 20.614 7.3378C20.6621 7.39013 20.689 7.46114 20.689 7.53515V22.0467Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+export default SvgCopy;

package/src/icons/DarkMode.tsx

@@ -0,0 +1,19 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon';
+
+function SvgDarkMode(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 25 24" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M23.2108 17.0072C23.0403 16.7482 22.6992 16.5755 22.3582 16.6619C21.9319 16.7482 21.5055 16.7914 21.0792 16.7914C16.7734 16.7914 13.235 13.2518 13.235 8.84892C13.235 6.1295 14.5992 3.6259 16.9013 2.15827C17.1997 1.98561 17.3276 1.64029 17.285 1.33813C17.2424 0.992806 17.0292 0.733814 16.6882 0.604317C15.4945 0.215828 14.2155 0 12.9366 0C6.41392 0 1.08496 5.39568 1.08496 12C1.08496 18.6043 6.41392 24 12.9366 24C17.1571 24 21.0792 21.7122 23.2108 18C23.424 17.6547 23.424 17.2662 23.2108 17.0072Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+export default SvgDarkMode;

package/src/icons/Delete.tsx

@@ -0,0 +1,33 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon';
+
+function SvgDelete(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 25 24" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_3736_40135)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M6.42673 4.10987C6.81047 1.73825 8.80256 0 11.1368 0H13.773C16.1072 0 18.0993 1.73825 18.483 4.10987C18.4847 4.1205 18.4862 4.13118 18.4874 4.14188L18.5405 4.60777C19.409 4.71723 20.1677 4.84185 20.8164 4.96697C20.8225 4.96804 20.8285 4.96921 20.8345 4.97045C21.7656 5.15059 22.4685 5.33139 22.9433 5.46895C23.1816 5.53796 23.3623 5.59608 23.4856 5.63775C23.5473 5.65859 23.5946 5.67531 23.6275 5.68723L23.6661 5.70141L23.6773 5.70564L23.6809 5.70701L23.6821 5.7075L23.6827 5.7077C23.6829 5.70779 23.6831 5.70787 23.4549 6.33476L23.6831 5.70787C24.0192 5.8377 24.1895 6.22362 24.0635 6.56985C23.9375 6.91583 23.5633 7.09125 23.2274 6.96194C23.2272 6.96189 23.2271 6.96185 23.227 6.9618L23.2266 6.96166L23.2222 6.95999L23.1963 6.95049C23.1719 6.94166 23.1333 6.92796 23.0803 6.91006C22.9745 6.87428 22.8115 6.82175 22.5914 6.75799C22.278 6.6672 21.8487 6.55361 21.3036 6.43317L20.5397 18.1139L20.5395 18.1166C20.3096 21.4316 17.6317 24 14.4051 24H10.5046C7.27806 24 4.6001 21.4316 4.37022 18.1166L4.37004 18.1139L3.60614 6.43317C3.06101 6.55361 2.63175 6.6672 2.31835 6.75799C2.09824 6.82175 1.93526 6.87428 1.82939 6.91006C1.77645 6.92796 1.7378 6.94166 1.71341 6.95049L1.68755 6.95999L1.68309 6.96166L1.68274 6.9618C1.34671 7.09138 0.972254 6.91596 0.84625 6.56985C0.720202 6.22362 0.890505 5.8377 1.22663 5.70787L1.45486 6.33476C1.22663 5.70787 1.22684 5.70779 1.22707 5.7077L1.22758 5.7075L1.22887 5.70701L1.23245 5.70564L1.24366 5.70141L1.28225 5.68723C1.31516 5.67531 1.36244 5.65859 1.42409 5.63775C1.54739 5.59608 1.72815 5.53796 1.96638 5.46895C2.44118 5.33139 3.14416 5.15059 4.07525 4.97045C4.08123 4.9692 4.08724 4.96804 4.09327 4.96697C4.74202 4.84186 5.50068 4.71723 6.36923 4.60777L6.42232 4.14188C6.42354 4.13118 6.42501 4.1205 6.42673 4.10987ZM7.01295 5.87877C7.02196 5.87794 7.03092 5.87693 7.03984 5.87573C8.53259 5.70737 10.3376 5.58798 12.4549 5.58798C14.5722 5.58798 16.3771 5.70737 17.8699 5.87573C17.8788 5.87693 17.8878 5.87794 17.8968 5.87877C18.6928 5.96908 19.3996 6.07327 20.0172 6.18058L19.2428 18.0212C19.2428 18.0217 19.2427 18.0222 19.2427 18.0227C19.0607 20.6363 16.9491 22.6609 14.4051 22.6609H10.5046C7.96052 22.6609 5.84891 20.6361 5.66701 18.0225C5.66698 18.022 5.66695 18.0216 5.66692 18.0212L4.89257 6.18058C5.51014 6.07327 6.21693 5.96908 7.01295 5.87877ZM17.215 4.46238C15.8455 4.33369 14.2588 4.24893 12.4549 4.24893C10.6509 4.24893 9.0642 4.33369 7.69472 4.46238L7.71155 4.31473C7.99687 2.5966 9.44306 1.33906 11.1368 1.33906H13.773C15.4667 1.33906 16.9129 2.59661 17.1982 4.31474L17.215 4.46238ZM12.4549 9.91416C12.8138 9.91416 13.1049 10.2139 13.1049 10.5837V17.6652C13.1049 18.035 12.8138 18.3348 12.4549 18.3348C12.0959 18.3348 11.8049 18.035 11.8049 17.6652L11.8049 10.5837C11.8049 10.2139 12.0959 9.91416 12.4549 9.91416ZM9.01736 11.3305C9.37635 11.3305 9.66736 11.6302 9.66736 12V16.2489C9.66736 16.6187 9.37635 16.9185 9.01736 16.9185C8.65838 16.9185 8.36736 16.6187 8.36736 16.2489V12C8.36736 11.6302 8.65838 11.3305 9.01736 11.3305ZM15.8924 11.3305C16.2513 11.3305 16.5424 11.6302 16.5424 12V16.2489C16.5424 16.6187 16.2513 16.9185 15.8924 16.9185C15.5334 16.9185 15.2424 16.6187 15.2424 16.2489V12C15.2424 11.6302 15.5334 11.3305 15.8924 11.3305Z"
+          fill="currentColor"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_3736_40135">
+          <rect
+            width={24}
+            height={24}
+            fill="white"
+            transform="translate(0.45459)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
+export default SvgDelete;

package/src/icons/Done.tsx

@@ -0,0 +1,21 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon';
+
+function SvgDone(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="M23.7846 4.31584C24.1751 4.70637 24.1751 5.33953 23.7846 5.73006L10.0607 19.4539C9.1495 20.3651 7.67211 20.3651 6.76089 19.4539L1.03703 13.7301C0.64651 13.3395 0.64651 12.7064 1.03703 12.3158C1.42756 11.9253 2.06072 11.9253 2.45125 12.3158L8.17511 18.0397C8.30528 18.1699 8.51634 18.1699 8.64651 18.0397L22.3704 4.31584C22.7609 3.92532 23.3941 3.92532 23.7846 4.31584Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+export default SvgDone;

package/src/icons/Error.tsx

@@ -0,0 +1,21 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon';
+
+function SvgError(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="M12 0C5.376 0 0 5.376 0 12C0 18.624 5.376 24 12 24C18.624 24 24 18.624 24 12C24 5.376 18.624 0 12 0ZM10.8 18V15.6H13.2V18H10.8ZM10.8 6V13.2H13.2V6H10.8Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+export default SvgError;

package/src/icons/ExternalLink.tsx

@@ -0,0 +1,21 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon';
+
+function SvgExternalLink(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="M21.4046 1.85421C21.1566 1.83395 20.8342 1.83345 20.3523 1.83345H14.6314C14.2724 1.83345 13.9814 1.54243 13.9814 1.18345C13.9814 0.824463 14.2724 0.533448 14.6314 0.533448L20.3786 0.533448C20.8274 0.533438 21.2032 0.53343 21.5104 0.558531C21.8312 0.58474 22.134 0.641521 22.4209 0.787689C22.8598 1.01133 23.2167 1.36818 23.4403 1.80709C23.5865 2.09396 23.6433 2.3968 23.6695 2.71758C23.6946 3.02482 23.6946 3.40062 23.6945 3.8495V9.59659C23.6945 9.95558 23.4035 10.2466 23.0445 10.2466C22.6856 10.2466 22.3945 9.95558 22.3945 9.59659V3.87565C22.3945 3.39375 22.394 3.07141 22.3738 2.82344C22.3541 2.58305 22.3192 2.47034 22.282 2.39727C22.183 2.20297 22.025 2.045 21.8307 1.946C21.7577 1.90877 21.6449 1.87385 21.4046 1.85421ZM21.8215 2.40646C22.0754 2.6603 22.0754 3.07186 21.8215 3.3257L12.6873 12.46C12.4334 12.7138 12.0219 12.7138 11.768 12.46C11.5142 12.2061 11.5142 11.7946 11.768 11.5407L20.9023 2.40646C21.1561 2.15262 21.5677 2.15262 21.8215 2.40646ZM7.93747 4.13908H10.4248C10.7838 4.13908 11.0748 4.4301 11.0748 4.78908C11.0748 5.14807 10.7838 5.43908 10.4248 5.43908H7.96644C6.80836 5.43908 5.97889 5.43959 5.32826 5.49275C4.68523 5.54528 4.27433 5.646 3.94301 5.81482C3.29435 6.14532 2.76698 6.67269 2.43648 7.32135C2.26766 7.65267 2.16694 8.06357 2.11441 8.7066C2.06125 9.35723 2.06074 10.1867 2.06074 11.3448V16.2616C2.06074 17.4196 2.06125 18.2491 2.11441 18.8997C2.16694 19.5428 2.26766 19.9537 2.43648 20.285C2.76698 20.9336 3.29435 21.461 3.94301 21.7915C4.27433 21.9603 4.68523 22.061 5.32827 22.1136C5.97889 22.1667 6.80836 22.1673 7.96644 22.1673H12.8832C14.0413 22.1673 14.8708 22.1667 15.5214 22.1136C16.1644 22.061 16.5753 21.9603 16.9066 21.7915C17.5553 21.461 18.0827 20.9336 18.4132 20.285C18.582 19.9537 18.6827 19.5428 18.7352 18.8997C18.7884 18.2491 18.7889 17.4196 18.7889 16.2616V13.8032C18.7889 13.4442 19.0799 13.1532 19.4389 13.1532C19.7979 13.1532 20.0889 13.4442 20.0889 13.8032V16.2905C20.0889 17.4133 20.0889 18.2958 20.0309 19.0056C19.9718 19.729 19.8492 20.33 19.5715 20.8752C19.1163 21.7684 18.3901 22.4947 17.4968 22.9498C16.9517 23.2276 16.3507 23.3502 15.6273 23.4093C14.9175 23.4673 14.035 23.4673 12.9121 23.4673H7.93758C6.8147 23.4673 5.93218 23.4673 5.2224 23.4093C4.49897 23.3502 3.89795 23.2276 3.35282 22.9498C2.45956 22.4947 1.73331 21.7684 1.27817 20.8752C1.00041 20.33 0.87783 19.729 0.818724 19.0056C0.760735 18.2958 0.760738 17.4133 0.760742 16.2905V11.3158C0.760738 10.193 0.760735 9.31049 0.818724 8.60074C0.87783 7.87731 1.00041 7.27629 1.27817 6.73116C1.73331 5.83789 2.45956 5.11165 3.35282 4.65651C3.89795 4.37875 4.49897 4.25617 5.2224 4.19706C5.93215 4.13907 6.81465 4.13908 7.93747 4.13908Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+export default SvgExternalLink;

package/src/icons/Font.tsx

@@ -0,0 +1,27 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon';
+
+function SvgFont(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M17.2235 5.409C16.7886 5.409 16.4469 5.06861 16.4469 4.63539V2.73234C16.4469 2.37648 16.2295 2.09798 16.0276 2.09798H1.97239C1.77049 2.09798 1.55306 2.36101 1.55306 2.73234V4.63539C1.55306 5.06861 1.21139 5.409 0.776532 5.409C0.341674 5.409 0 5.06861 0 4.63539V2.73234C0 1.52552 0.885246 0.550781 1.97239 0.550781H16.0276C17.1148 0.550781 18 1.52552 18 2.73234V4.63539C18 5.05314 17.6428 5.409 17.2235 5.409Z"
+        fill="#727272"
+      />
+      <path
+        d="M8.99212 17.2606C8.55726 17.2606 8.21559 16.9202 8.21559 16.487V1.32438C8.21559 0.891166 8.55726 0.550781 8.99212 0.550781C9.42698 0.550781 9.76865 0.891166 9.76865 1.32438V16.487C9.76865 16.9047 9.42698 17.2606 8.99212 17.2606Z"
+        fill="#727272"
+      />
+      <path
+        d="M11.6953 17.4462H6.2906C5.85575 17.4462 5.51407 17.1058 5.51407 16.6726C5.51407 16.2393 5.85575 15.899 6.2906 15.899H11.6953C12.1301 15.899 12.4718 16.2393 12.4718 16.6726C12.4718 17.1058 12.1301 17.4462 11.6953 17.4462Z"
+        fill="#727272"
+      />
+    </svg>
+  );
+}
+export default SvgFont;

package/src/icons/Gas.tsx

@@ -0,0 +1,39 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon';
+
+function SvgGas(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="M23.8071 0C24.1477 0 24.4237 0.276065 24.4237 0.616609V17.6986C24.4237 17.7076 24.4235 17.7165 24.4232 17.7255C24.3829 18.6498 23.8666 19.4876 23.0583 19.9387C22.2503 20.3897 21.2662 20.3897 20.4582 19.9387C19.6499 19.4876 19.1337 18.6498 19.0934 17.7255C19.093 17.7165 19.0928 17.7076 19.0928 17.6986V11.5193C19.0928 11.1389 18.9418 10.7742 18.6727 10.5052L18.6726 10.5051C18.4039 10.2362 18.0391 10.0851 17.6586 10.0851C17.3181 10.0851 17.042 9.80903 17.042 9.46848C17.042 9.12794 17.3181 8.85187 17.6586 8.85187C18.3659 8.85187 19.0445 9.13273 19.5447 9.63314M19.5448 9.63324C20.0451 10.1335 20.326 10.8119 20.326 11.5193V17.684C20.3517 18.1764 20.6283 18.6214 21.0592 18.8618L21.0593 18.8619C21.4937 19.1044 22.0229 19.1044 22.4573 18.8619L22.4573 18.8618C22.8882 18.6214 23.1649 18.1763 23.1905 17.684V0.616609C23.1905 0.276065 23.4666 0 23.8071 0"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5.53542 0.57105L5.53714 0.571045L14.4217 0.571047C15.3082 0.57351 16.1576 0.926858 16.7844 1.55365C17.4112 2.18044 17.7645 3.02981 17.767 3.91636L17.767 3.91808L17.767 20.3758H18.8651C19.2057 20.3758 19.4817 20.6518 19.4817 20.9924V23.3831C19.4817 23.7236 19.2057 23.9997 18.8651 23.9997H1.09952C0.758975 23.9997 0.48291 23.7236 0.48291 23.3831V20.9924C0.48291 20.6518 0.758975 20.3758 1.09952 20.3758H2.18995V3.91637C2.19242 3.02981 2.54577 2.18043 3.17256 1.55365C3.79938 0.926839 4.64891 0.573525 5.53542 0.57105ZM5.53805 1.80427C4.97773 1.80604 4.44078 2.02946 4.04457 2.42567C3.64832 2.82191 3.42493 3.35873 3.42317 3.91902V20.9924C3.42317 21.3329 3.14711 21.609 2.80656 21.609H1.71613V22.7665H18.2485V21.609H17.1504C16.8098 21.609 16.5338 21.3329 16.5338 20.9924V3.91862C16.5319 3.35847 16.3085 2.82182 15.9124 2.42566C15.5161 2.02942 14.9793 1.80603 14.419 1.80427H5.53805Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.22655 4.30646C6.18948 4.30646 6.15949 4.33645 6.15949 4.37352V8.75265C6.15985 8.75356 6.16028 8.75458 6.16078 8.75571C6.16671 8.76915 6.17792 8.78734 6.19405 8.80464C6.21007 8.82182 6.22439 8.83114 6.2323 8.83503C6.23277 8.83526 6.23319 8.83546 6.23357 8.83564H13.7229C13.7599 8.83564 13.7899 8.80564 13.7899 8.76858V4.38944C13.7896 4.38853 13.7891 4.38752 13.7886 4.38639C13.7827 4.37294 13.7715 4.35476 13.7554 4.33746C13.7393 4.32028 13.725 4.31096 13.7171 4.30707C13.7166 4.30684 13.7162 4.30664 13.7158 4.30646H6.22655ZM4.92627 4.37352C4.92627 3.65538 5.50838 3.07324 6.22655 3.07324H13.7229C14.1221 3.07324 14.4468 3.27076 14.6572 3.49636C14.862 3.71596 15.0231 4.03077 15.0231 4.37352V8.76858C15.0231 9.48672 14.441 10.0689 13.7229 10.0689H6.22655C5.8273 10.0689 5.50257 9.87134 5.29217 9.64573C5.08738 9.42614 4.92627 9.11132 4.92627 8.76858V4.37352Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M23.7244 3.19696C23.9967 3.40155 24.0515 3.7881 23.8469 4.06033L22.489 5.86725C22.3169 6.09312 22.2662 6.38829 22.3529 6.65787C22.4396 6.92722 22.6522 7.13715 22.922 7.22041L23.9853 7.53627C24.3118 7.63324 24.4978 7.97649 24.4008 8.30293C24.3038 8.62938 23.9606 8.8154 23.6341 8.71843L22.5634 8.40035C21.9063 8.1994 21.3894 7.68949 21.179 7.03563C20.9687 6.38201 21.0916 5.66758 21.5067 5.12163L22.8611 3.31944C23.0657 3.0472 23.4522 2.99237 23.7244 3.19696Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+export default SvgGas;