@rango-dev/ui 0.15.1-next.8 → 0.16.0

package/src/components/Wallet/Wallet.types.ts

@@ -56,6 +56,7 @@ interface WalletProps {
   selected?: boolean;
   description?: string;
   isLoading?: boolean;
+  container?: HTMLElement;
 }
 
 export type WalletPropTypes = State & WalletProps;

package/src/components/index.ts

@@ -1,9 +1,11 @@
 export * from './I18nManager';
 export * from './Alert';
 export * from './BestRoute';
+export * from './BlockchainsChip';
 export * from './BottomLogo';
 export * from './Button';
 export * from './IconButton';
+export * from './Collapsible';
 export * from './ChangeSlippageButton';
 export * from './Checkbox';
 export * from './Chip';
@@ -20,6 +22,7 @@ export * from './RoutesOverview';
 export * from './SecondaryPage';
 export * from './SelectableWalletList';
 export * from './Wallet';
+export * from './SelectableCategoryList';
 export * from './Spinner';
 export * from './StepDetail';
 export * from './SwapContainer';

package/src/containers/SwapInput/SwapInput.stories.tsx

@@ -32,6 +32,7 @@ export const SwapTo = (args: SwapInputProps) => (
   <SwapInput
     {...args}
     label="To"
+    mode="To"
     price={{ value: '2.5', usdValue: '610' }}
     percentageChange="6.4"
     warningLevel="high"

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

@@ -2,7 +2,11 @@ import { Button, TextField } from '../../components';
 import { darkTheme, styled } from '../../theme';
 
 export const Container = styled('div', {
-  backgroundColor: '$neutral100',
+  $$color: '$colors$neutral100',
+  [`.${darkTheme} &`]: {
+    $$color: '$colors$neutral300',
+  },
+  backgroundColor: '$$color',
   borderRadius: '$xm',
   padding: '$15',
   variants: {

package/src/containers/SwapInput/SwapInput.tsx

@@ -1,5 +1,6 @@
 import type { SwapInputProps } from './SwapInput.types';
 
+import { i18n } from '@lingui/core';
 import React from 'react';
 
 import { Divider, PriceImpact, Skeleton, Typography } from '../../components';
@@ -22,14 +23,14 @@ export function SwapInput(props: SwapInputProps) {
                 mr={4}
                 variant="body"
                 size="xsmall">
-                Balance: {props.balance}
+                {i18n.t('Balance')}: {props.balance}
               </Typography>
               <MaxButton
                 variant="default"
                 size="xsmall"
                 onClick={props.onSelectMaxBalance}>
                 <Typography variant="body" size="xsmall" color="secondary500">
-                  Max
+                  {i18n.t('Max')}
                 </Typography>
               </MaxButton>
             </div>
@@ -61,7 +62,7 @@ export function SwapInput(props: SwapInputProps) {
           ) : (
             <>
               <InputAmount
-                disabled={props.disabled || props.label === 'To'}
+                disabled={props.disabled || props.mode === 'To'}
                 style={{ padding: 0 }}
                 value={props.price.value}
                 type={'onInputChange' in props ? 'number' : 'text'}
@@ -94,7 +95,9 @@ export function SwapInput(props: SwapInputProps) {
                     overflow: 'hidden',
                     textOverflow: 'ellipsis',
                   }}>
-                  {props.price.usdValue || props.price.error}
+                  {props.price.usdValue
+                    ? `~$${props.price.usdValue}`
+                    : props.price.error}
                 </Typography>
               )}
             </>

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

@@ -17,25 +17,22 @@ export type BaseProps = {
   loading?: boolean;
   error?: boolean;
   disabled?: boolean;
+  label: string;
   sharpBottomStyle?: boolean;
   onClickToken: () => void;
 };
 
 type FromProps = {
-  label: 'From';
+  mode: 'From';
   balance?: string;
   onSelectMaxBalance: () => void;
   onInputChange: (inputAmount: string) => void;
 };
 
 type ToProps = {
-  label: 'To';
+  mode: 'To';
   percentageChange: string | null;
   warningLevel: PriceImpactWarningLevel;
 };
 
-type Common = {
-  label: string;
-};
-
-export type SwapInputProps = BaseProps & (FromProps | ToProps | Common);
+export type SwapInputProps = BaseProps & (FromProps | ToProps);

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

@@ -2,24 +2,28 @@ 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',
-        },
-      },
+  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',
   },
 });
 

package/src/containers/SwapInput/TokenSection.tsx

@@ -18,11 +18,11 @@ export function TokenSection(props: TokenSectionProps) {
     loading,
   } = props;
   return (
-    <Container variant="ghost" disabled={error || loading} onClick={onClick}>
+    <Container variant="default" disabled={error || loading} onClick={onClick}>
       <TokenSectionContainer>
         <ChainToken
           size="large"
-          useAsPlaceholder={error || (!loading && (!chainImage || !tokenImage))}
+          useAsPlaceholder={error}
           chainImage={chainImage}
           tokenImage={tokenImage}
           loading={loading}

package/src/hooks/index.ts

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

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/Desktop.tsx

@@ -0,0 +1,271 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon';
+
+function SvgDesktop(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 228 165" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M37.772 108.328C37.772 90.9014 51.9386 76.78 69.4209 76.78H74.9067V68.0667C74.9067 52.2627 87.7472 39.4032 103.662 39.4032C119.517 39.4032 132.417 52.2026 132.417 68.0667C132.417 80.9263 142.907 91.3822 155.807 91.3822H181.127C183.9 91.3822 186.552 91.923 189.024 92.8844V108.328H37.772Z"
+        fill="url(#paint0_linear_7539_98594)"
+      />
+      <path
+        d="M82.3193 143.601H140.372C142.724 143.601 144.231 141.017 143.025 138.974L134.646 124.913C130.124 117.341 127.713 108.628 127.713 99.7948H95.0994C95.0994 108.628 92.6881 117.281 88.1668 124.913L79.7874 138.974C78.5817 141.017 80.0285 143.601 82.4398 143.601H82.3193Z"
+        fill="#D6EAFF"
+      />
+      <path
+        d="M140.373 144.202H82.3198C80.9936 144.202 79.7879 143.541 79.1248 142.339C78.4617 141.197 78.4617 139.815 79.1248 138.674L87.5042 124.612C91.9652 117.101 94.3766 108.568 94.3766 99.8547V99.2538H128.196V99.8547C128.196 108.568 130.547 117.161 135.068 124.612L143.447 138.674C144.111 139.815 144.171 141.197 143.447 142.339C142.784 143.481 141.579 144.202 140.252 144.202H140.373ZM95.6425 100.456C95.5219 109.169 93.1106 117.762 88.6496 125.273L80.2702 139.335C79.7879 140.116 79.7879 141.017 80.2702 141.798C80.6922 142.58 81.5361 143.06 82.3801 143.06H140.433C141.338 143.06 142.121 142.58 142.543 141.798C142.965 141.017 142.965 140.116 142.543 139.335L134.164 125.273C129.703 117.762 127.231 109.229 127.171 100.456H95.7631H95.6425Z"
+        fill="#0B27C4"
+      />
+      <path
+        d="M33.6713 117.341L189.083 117.341C194.043 117.341 198.065 113.333 198.065 108.388V9.77779C198.065 4.83286 194.043 0.824196 189.083 0.824196L33.6713 0.824196C28.7106 0.824196 24.6891 4.83286 24.6891 9.77779V108.388C24.6891 113.333 28.7106 117.341 33.6713 117.341Z"
+        fill="#D6EAFF"
+      />
+      <path
+        d="M189.022 117.942H33.611C28.306 117.942 24.0259 113.676 24.0259 108.388V9.77803C24.0259 4.48999 28.306 0.223511 33.611 0.223511H189.022C194.327 0.223511 198.607 4.48999 198.607 9.77803V108.388C198.607 113.676 194.327 117.942 189.022 117.942ZM33.611 1.42534C28.9691 1.42534 25.2316 5.151 25.2316 9.77803V108.388C25.2316 113.015 28.9691 116.741 33.611 116.741H189.022C193.664 116.741 197.402 113.015 197.402 108.388V9.77803C197.402 5.151 193.664 1.42534 189.022 1.42534H33.611Z"
+        fill="#0B27C4"
+      />
+      <path
+        d="M189.022 108.328V9.83826L33.7312 9.83826V108.328L189.022 108.328Z"
+        fill="white"
+      />
+      <path
+        d="M189.626 108.929H33.0688V9.23718H189.626V108.929ZM34.3348 107.727H188.42V10.439H34.2745V107.727H34.3348Z"
+        fill="#0B27C4"
+      />
+      <path
+        d="M37.772 108.328C37.772 90.9014 51.9386 76.78 69.4209 76.78H74.9067V68.0667C74.9067 52.2627 87.7472 39.4032 103.662 39.4032C119.517 39.4032 132.417 52.2026 132.417 68.0667C132.417 80.9263 142.907 91.3822 155.807 91.3822H181.127C183.9 91.3822 186.552 91.923 189.024 92.8844V108.328H37.772Z"
+        fill="url(#paint1_linear_7539_98594)"
+      />
+      <path
+        opacity={0.8}
+        d="M179.98 91.3822V104.122C176.484 103.761 173.229 102.559 170.456 100.696V91.3822H179.98Z"
+        fill="#3F5AF3"
+      />
+      <path
+        d="M186.972 143.601H218.138C222.001 143.601 225.131 140.481 225.131 136.631V62.2979C225.131 58.4482 222.001 55.3273 218.138 55.3273H186.972C183.11 55.3273 179.979 58.4482 179.979 62.2979V136.631C179.979 140.481 183.11 143.601 186.972 143.601Z"
+        fill="#D6EAFF"
+      />
+      <path
+        d="M218.14 144.202H186.973C182.753 144.202 179.377 140.777 179.377 136.631V62.2979C179.377 58.0915 182.814 54.7264 186.973 54.7264H218.14C222.36 54.7264 225.736 58.1516 225.736 62.2979V136.631C225.736 140.837 222.299 144.202 218.14 144.202ZM186.973 55.9283C183.416 55.9283 180.583 58.8126 180.583 62.2979V136.631C180.583 140.176 183.477 143.001 186.973 143.001H218.14C221.697 143.001 224.53 140.116 224.53 136.631V62.2979C224.53 58.7526 221.636 55.9283 218.14 55.9283H186.973Z"
+        fill="#0B27C4"
+      />
+      <path
+        d="M220.913 62.2377V136.571C220.913 138.073 219.647 139.335 218.14 139.335H186.973C185.466 139.335 184.2 138.073 184.2 136.571V62.2377C184.2 60.7354 185.466 59.4735 186.973 59.4735H218.14C219.647 59.4735 220.913 60.7354 220.913 62.2377Z"
+        fill="white"
+      />
+      <path
+        d="M218.139 139.996H186.972C185.103 139.996 183.596 138.493 183.596 136.631V62.2976C183.596 60.4348 185.103 58.9325 186.972 58.9325H218.139C220.008 58.9325 221.515 60.4348 221.515 62.2976V136.631C221.515 138.493 220.008 139.996 218.139 139.996ZM186.972 60.1343C185.766 60.1343 184.802 61.0958 184.802 62.2976V136.631C184.802 137.832 185.766 138.794 186.972 138.794H218.139C219.344 138.794 220.309 137.832 220.309 136.631V62.2976C220.309 61.0958 219.344 60.1343 218.139 60.1343H186.972Z"
+        fill="#0B27C4"
+      />
+      <path
+        opacity={0.8}
+        d="M167.261 91.3822V98.1124C165.332 96.1895 163.705 93.9661 162.62 91.3822H167.261Z"
+        fill="#3F5AF3"
+      />
+      <path
+        d="M202.586 67.045C201.259 67.045 200.174 65.9633 200.174 64.6413C200.174 63.3193 201.259 62.2377 202.586 62.2377C203.912 62.2377 204.997 63.3193 204.997 64.6413C204.997 65.9633 203.912 67.045 202.586 67.045ZM202.586 63.4395C201.923 63.4395 201.38 63.9803 201.38 64.6413C201.38 65.3023 201.923 65.8431 202.586 65.8431C203.249 65.8431 203.791 65.3023 203.791 64.6413C203.791 63.9803 203.249 63.4395 202.586 63.4395Z"
+        fill="#0B27C4"
+      />
+      <path
+        d="M111.317 6.8935C110.292 6.8935 109.448 6.05223 109.448 5.03068C109.448 4.00912 110.292 3.16785 111.317 3.16785C112.341 3.16785 113.185 4.00912 113.185 5.03068C113.185 6.05223 112.341 6.8935 111.317 6.8935ZM111.317 4.36967C110.955 4.36967 110.653 4.67013 110.653 5.03068C110.653 5.39122 110.955 5.69168 111.317 5.69168C111.678 5.69168 111.98 5.39122 111.98 5.03068C111.98 4.67013 111.678 4.36967 111.317 4.36967Z"
+        fill="#0B27C4"
+      />
+      <path
+        d="M46.2358 75.712H39.9061C39.5444 75.712 39.3032 75.4716 39.3032 75.111C39.3032 74.7505 39.5444 74.5101 39.9061 74.5101H46.2358C46.5975 74.5101 46.8387 74.7505 46.8387 75.111C46.8387 75.4716 46.5975 75.712 46.2358 75.712Z"
+        fill="#0B27C4"
+      />
+      <path
+        d="M54.6733 75.712H48.3436C47.9819 75.712 47.7407 75.4716 47.7407 75.111C47.7407 74.7505 47.9819 74.5101 48.3436 74.5101H54.6733C55.035 74.5101 55.2762 74.7505 55.2762 75.111C55.2762 75.4716 55.035 75.712 54.6733 75.712Z"
+        fill="#0B27C4"
+      />
+      <path
+        d="M227.183 79.1236C226.822 79.1236 226.581 78.8832 226.581 78.5227V72.2131C226.581 71.8525 226.822 71.6122 227.183 71.6122C227.545 71.6122 227.786 71.8525 227.786 72.2131V78.5227C227.786 78.8832 227.545 79.1236 227.183 79.1236Z"
+        fill="#0B27C4"
+      />
+      <path
+        d="M202.588 112.715H205.422C210.907 112.715 216.152 113.856 220.914 115.959V136.571C220.914 138.073 219.648 139.335 218.141 139.335H186.975C185.468 139.335 184.202 138.073 184.202 136.571V91.5624C194.57 93.0647 202.588 101.958 202.588 112.715Z"
+        fill="url(#paint2_linear_7539_98594)"
+      />
+      <path
+        opacity={0.8}
+        d="M197.042 98.4728C193.606 101.658 189.145 103.761 184.202 104.182V91.6224C189.265 92.3435 193.787 94.8674 197.042 98.4728Z"
+        fill="#3F5AF3"
+      />
+      <path
+        d="M140.373 140.597H128.316C127.955 140.597 127.713 140.356 127.713 139.996C127.713 139.635 127.955 139.395 128.316 139.395H140.373C140.735 139.395 140.976 139.635 140.976 139.996C140.976 140.356 140.735 140.597 140.373 140.597Z"
+        fill="#0B27C4"
+      />
+      <path
+        d="M124.641 140.597H120.722C120.361 140.597 120.12 140.356 120.12 139.996C120.12 139.635 120.361 139.395 120.722 139.395H124.641C125.003 139.395 125.244 139.635 125.244 139.996C125.244 140.356 125.003 140.597 124.641 140.597Z"
+        fill="#0B27C4"
+      />
+      <path
+        d="M117.826 140.597H116.5C116.138 140.597 115.897 140.356 115.897 139.996C115.897 139.635 116.138 139.395 116.5 139.395H117.826C118.188 139.395 118.429 139.635 118.429 139.996C118.429 140.356 118.188 140.597 117.826 140.597Z"
+        fill="#0B27C4"
+      />
+      <path
+        opacity={0.8}
+        d="M49.8892 83.5102C53.0842 80.9864 56.7615 79.1235 60.7402 77.9818V87.957C56.8218 87.1157 53.1445 85.6134 49.8892 83.5102Z"
+        fill="#3F5AF3"
+      />
+      <path
+        d="M113.365 140.597H97.6912C97.3295 140.597 97.0884 140.356 97.0884 139.996C97.0884 139.635 97.3295 139.395 97.6912 139.395H113.365C113.727 139.395 113.968 139.635 113.968 139.996C113.968 140.356 113.727 140.597 113.365 140.597Z"
+        fill="#0B27C4"
+      />
+      <path
+        d="M93.7137 140.597H82.3201C81.9584 140.597 81.7173 140.356 81.7173 139.996C81.7173 139.635 81.9584 139.395 82.3201 139.395H93.7137C94.0754 139.395 94.3166 139.635 94.3166 139.996C94.3166 140.356 94.0754 140.597 93.7137 140.597Z"
+        fill="#0B27C4"
+      />
+      <path
+        d="M162.063 50.1633C169.509 48.1187 173.883 40.4436 171.832 33.0205C169.781 25.5975 162.081 21.2374 154.635 23.2821C147.188 25.3267 142.814 33.0018 144.865 40.4249C146.916 47.8479 154.616 52.208 162.063 50.1633Z"
+        fill="url(#paint3_linear_7539_98594)"
+      />
+      <g opacity={0.8}>
+        <path
+          d="M187.816 135.91C187.455 135.91 187.213 135.669 187.213 135.309V119.384C187.213 119.024 187.455 118.784 187.816 118.784C188.178 118.784 188.419 119.024 188.419 119.384V135.309C188.419 135.669 188.178 135.91 187.816 135.91Z"
+          fill="white"
+        />
+      </g>
+      <g opacity={0.8}>
+        <path
+          d="M187.816 116.26C187.455 116.26 187.213 116.02 187.213 115.659V111.753C187.213 111.393 187.455 111.152 187.816 111.152C188.178 111.152 188.419 111.393 188.419 111.753V115.659C188.419 116.02 188.178 116.26 187.816 116.26Z"
+          fill="white"
+        />
+      </g>
+      <g opacity={0.8}>
+        <path
+          d="M187.816 109.469C187.455 109.469 187.213 109.229 187.213 108.868V107.967C187.213 107.606 187.455 107.366 187.816 107.366C188.178 107.366 188.419 107.606 188.419 107.967V108.868C188.419 109.229 188.178 109.469 187.816 109.469Z"
+          fill="white"
+        />
+      </g>
+      <path
+        d="M210.847 96.0089C210.847 95.2878 210.244 94.7469 209.581 94.7469C208.918 94.7469 208.315 95.3479 208.315 96.0089C208.315 96.6699 208.918 97.2708 209.581 97.2708C210.244 97.2708 210.847 96.6699 210.847 96.0089Z"
+        fill="url(#paint4_linear_7539_98594)"
+      />
+      <path
+        d="M200.48 75.9466C201.124 73.2337 199.439 70.5145 196.717 69.8731C193.996 69.2318 191.268 70.9112 190.624 73.6242C189.981 76.3372 191.666 79.0564 194.387 79.6977C197.109 80.339 199.837 78.6596 200.48 75.9466Z"
+        fill="url(#paint5_linear_7539_98594)"
+      />
+      <path
+        d="M218.139 139.996H186.972C185.103 139.996 183.596 138.493 183.596 136.631V62.2976C183.596 60.4348 185.103 58.9325 186.972 58.9325H218.139C220.008 58.9325 221.515 60.4348 221.515 62.2976V136.631C221.515 138.493 220.008 139.996 218.139 139.996ZM186.972 60.1343C185.766 60.1343 184.802 61.0958 184.802 62.2976V136.631C184.802 137.832 185.766 138.794 186.972 138.794H218.139C219.344 138.794 220.309 137.832 220.309 136.631V62.2976C220.309 61.0958 219.344 60.1343 218.139 60.1343H186.972Z"
+        fill="#0B27C4"
+      />
+      <path
+        d="M101.309 38.862H48.9829C46.5715 38.862 44.5822 36.879 44.5822 34.4753C44.5822 32.0717 43.1354 31.2905 41.3871 31.2905H23.7843C21.373 31.2905 19.3836 29.3075 19.3836 26.9038C19.3836 24.5002 17.9368 23.719 16.1886 23.719H4.61409C2.20274 23.719 0.213379 21.736 0.213379 19.3323C0.213379 16.9287 2.20274 14.9457 4.61409 14.9457H25.8942C28.3056 14.9457 30.2949 16.9287 30.2949 19.3323C30.2949 21.736 31.7417 22.5172 33.49 22.5172H76.1105C78.5219 22.5172 80.5112 24.5002 80.5112 26.9038C80.5112 29.3075 81.9581 30.0887 83.7063 30.0887H101.309C103.72 30.0887 105.71 32.0717 105.71 34.4753C105.71 36.879 103.72 38.862 101.309 38.862ZM4.5538 16.0874C2.80558 16.0874 1.35877 17.5296 1.35877 19.2722C1.35877 21.0149 2.80558 22.4571 4.5538 22.4571H16.1283C18.5396 22.4571 20.529 24.4401 20.529 26.8437C20.529 29.2474 21.9758 30.0286 23.724 30.0286H41.3269C43.7382 30.0286 45.7276 32.0116 45.7276 34.4153C45.7276 36.8189 47.1744 37.6001 48.9226 37.6001H101.249C102.997 37.6001 104.444 36.1579 104.444 34.4153C104.444 32.6726 102.997 31.2304 101.249 31.2304H83.646C81.2346 31.2304 79.2453 29.2474 79.2453 26.8437C79.2453 24.4401 77.7985 23.6589 76.0503 23.6589H33.4297C31.0183 23.6589 29.029 21.6759 29.029 19.2722C29.029 16.8686 27.5822 16.0874 25.8339 16.0874H4.5538Z"
+        fill="#0B27C4"
+      />
+      <path
+        d="M12.9149 45.4861C10.5035 45.4861 8.51416 43.5031 8.51416 41.0994C8.51416 38.6958 10.5035 36.7128 12.9149 36.7128C15.3262 36.7128 17.3156 38.6958 17.3156 41.0994C17.3156 43.5031 17.0744 41.7003 16.7127 41.7003C16.351 41.7003 16.1099 41.46 16.1099 41.0994C16.1099 39.3568 14.6631 37.9146 12.9149 37.9146C11.1666 37.9146 9.71984 39.3568 9.71984 41.0994C9.71984 42.8421 11.1666 44.2843 12.9149 44.2843C14.6631 44.2843 13.5177 44.5246 13.5177 44.8852C13.5177 45.2457 13.2766 45.4861 12.9149 45.4861Z"
+        fill="#0B27C4"
+      />
+      <path
+        d="M2.18466 45.4861C1.82296 45.4861 1.58182 45.2457 1.58182 44.8852C1.58182 44.5246 1.82296 44.2843 2.18466 44.2843C3.93289 44.2843 5.37969 42.8421 5.37969 41.0994C5.37969 39.3568 3.93289 37.9146 2.18466 37.9146C0.436432 37.9146 1.58182 37.6742 1.58182 37.3137C1.58182 36.9531 1.82296 36.7128 2.18466 36.7128C4.59601 36.7128 6.58537 38.6958 6.58537 41.0994C6.58537 43.5031 4.59601 45.4861 2.18466 45.4861Z"
+        fill="#0B27C4"
+      />
+      <path
+        d="M208.313 38.8621C205.902 38.8621 203.913 36.8791 203.913 34.4754C203.913 32.0718 205.902 30.0887 208.313 30.0887C210.725 30.0887 208.916 30.3291 208.916 30.6897C208.916 31.0502 208.675 31.2906 208.313 31.2906C206.565 31.2906 205.118 32.7328 205.118 34.4754C205.118 36.2181 206.565 37.6602 208.313 37.6602C210.062 37.6602 211.508 36.2181 211.508 34.4754C211.508 32.7328 211.749 33.8745 212.111 33.8745C212.473 33.8745 212.714 34.1149 212.714 34.4754C212.714 36.8791 210.725 38.8621 208.313 38.8621Z"
+        fill="#0B27C4"
+      />
+      <path
+        d="M219.95 38.8621C217.539 38.8621 215.549 36.8791 215.549 34.4754C215.549 32.0718 217.539 30.0887 219.95 30.0887C222.361 30.0887 220.553 30.3291 220.553 30.6897C220.553 31.0502 220.312 31.2906 219.95 31.2906C218.202 31.2906 216.755 32.7328 216.755 34.4754C216.755 36.2181 218.202 37.6602 219.95 37.6602C221.698 37.6602 220.553 37.9006 220.553 38.2612C220.553 38.6217 220.312 38.8621 219.95 38.8621Z"
+        fill="#0B27C4"
+      />
+      <path
+        d="M113.173 163.601L112.923 163.601L112.923 163.852L113.174 163.851L113.173 163.601ZM113.35 146.526C113.252 146.428 113.094 146.428 112.996 146.526L111.405 148.117C111.307 148.214 111.307 148.373 111.405 148.47C111.503 148.568 111.661 148.568 111.759 148.47L113.173 147.056L114.587 148.47C114.685 148.568 114.843 148.568 114.941 148.47C115.038 148.373 115.038 148.214 114.941 148.117L113.35 146.526ZM207.17 163.299L207.171 163.549L207.419 163.548L207.42 163.301L207.17 163.299ZM207.031 144.201L207.025 145.156L207.525 145.159L207.53 144.204L207.031 144.201ZM207.014 147.066L207.003 148.975L207.503 148.978L207.514 147.069L207.014 147.066ZM206.992 150.885L206.981 152.795L207.481 152.798L207.492 150.888L206.992 150.885ZM206.97 154.704L206.959 156.614L207.459 156.617L207.47 154.707L206.97 154.704ZM206.948 158.524L206.937 160.433L207.437 160.436L207.448 158.527L206.948 158.524ZM206.926 162.343L206.92 163.298L207.42 163.301L207.426 162.346L206.926 162.343ZM207.169 163.049L206.148 163.053L206.149 163.553L207.171 163.549L207.169 163.049ZM204.104 163.059L202.061 163.066L202.062 163.566L204.106 163.559L204.104 163.059ZM200.017 163.072L197.974 163.079L197.976 163.579L200.019 163.572L200.017 163.072ZM195.931 163.085L193.887 163.092L193.889 163.592L195.932 163.585L195.931 163.085ZM191.844 163.099L189.8 163.105L189.802 163.605L191.845 163.599L191.844 163.099ZM187.757 163.112L185.713 163.118L185.715 163.618L187.758 163.612L187.757 163.112ZM183.67 163.125L181.627 163.131L181.628 163.631L183.672 163.625L183.67 163.125ZM179.583 163.138L177.54 163.145L177.541 163.645L179.585 163.638L179.583 163.138ZM175.496 163.151L173.453 163.158L173.455 163.658L175.498 163.651L175.496 163.151ZM171.41 163.164L169.366 163.171L169.368 163.671L171.411 163.664L171.41 163.164ZM167.323 163.177L165.279 163.184L165.281 163.684L167.324 163.677L167.323 163.177ZM163.236 163.191L161.192 163.197L161.194 163.697L163.237 163.691L163.236 163.191ZM159.149 163.204L157.106 163.21L157.107 163.71L159.151 163.704L159.149 163.204ZM155.062 163.217L153.019 163.223L153.02 163.723L155.064 163.717L155.062 163.217ZM150.975 163.23L148.932 163.236L148.933 163.736L150.977 163.73L150.975 163.23ZM146.888 163.243L144.845 163.25L144.847 163.75L146.89 163.743L146.888 163.243ZM142.802 163.256L140.758 163.263L140.76 163.763L142.803 163.756L142.802 163.256ZM138.715 163.269L136.671 163.276L136.673 163.776L138.716 163.769L138.715 163.269ZM134.628 163.282L132.585 163.289L132.586 163.789L134.63 163.782L134.628 163.282ZM130.541 163.296L128.498 163.302L128.499 163.802L130.543 163.796L130.541 163.296ZM126.454 163.309L124.411 163.315L124.412 163.815L126.456 163.809L126.454 163.309ZM122.367 163.322L120.324 163.328L120.326 163.828L122.369 163.822L122.367 163.322ZM118.281 163.335L116.237 163.342L116.239 163.842L118.282 163.835L118.281 163.335ZM114.194 163.348L113.172 163.351L113.174 163.851L114.195 163.848L114.194 163.348ZM113.423 163.601L113.423 162.545L112.923 162.545L112.923 163.601L113.423 163.601ZM113.423 160.433L113.423 158.321L112.923 158.321L112.923 160.433L113.423 160.433ZM113.423 156.208L113.423 154.096L112.923 154.096L112.923 156.208L113.423 156.208ZM113.423 151.983L113.423 149.871L112.923 149.871L112.923 151.983L113.423 151.983ZM113.423 147.759L113.423 146.703L112.923 146.703L112.923 147.759L113.423 147.759ZM113.173 163.601L112.673 163.601L112.673 164.103L113.174 164.101L113.173 163.601ZM113.526 146.349C113.331 146.154 113.015 146.154 112.819 146.349L109.637 149.531C109.442 149.726 109.442 150.043 109.637 150.238C109.833 150.433 110.149 150.433 110.344 150.238L113.173 147.41L116.001 150.238C116.197 150.433 116.513 150.433 116.708 150.238C116.904 150.043 116.904 149.726 116.708 149.531L113.526 146.349ZM207.17 163.299L207.172 163.799L207.667 163.798L207.67 163.302L207.17 163.299ZM206.781 144.2L206.775 145.155L207.775 145.16L207.78 144.205L206.781 144.2ZM206.764 147.064L206.753 148.974L207.753 148.98L207.764 147.07L206.764 147.064ZM206.742 150.884L206.731 152.793L207.731 152.799L207.742 150.889L206.742 150.884ZM206.72 154.703L206.709 156.613L207.709 156.618L207.72 154.709L206.72 154.703ZM206.698 158.522L206.687 160.432L207.687 160.438L207.698 158.528L206.698 158.522ZM206.676 162.342L206.67 163.296L207.67 163.302L207.676 162.347L206.676 162.342ZM207.169 162.799L206.147 162.803L206.15 163.803L207.172 163.799L207.169 162.799ZM204.103 162.809L202.06 162.816L202.063 163.816L204.107 163.809L204.103 162.809ZM200.017 162.822L197.973 162.829L197.976 163.829L200.02 163.822L200.017 162.822ZM195.93 162.835L193.886 162.842L193.89 163.842L195.933 163.835L195.93 162.835ZM191.843 162.849L189.799 162.855L189.803 163.855L191.846 163.849L191.843 162.849ZM187.756 162.862L185.713 162.868L185.716 163.868L187.759 163.862L187.756 162.862ZM183.669 162.875L181.626 162.881L181.629 163.881L183.672 163.875L183.669 162.875ZM179.582 162.888L177.539 162.895L177.542 163.895L179.586 163.888L179.582 162.888ZM175.496 162.901L173.452 162.908L173.455 163.908L175.499 163.901L175.496 162.901ZM171.409 162.914L169.365 162.921L169.368 163.921L171.412 163.914L171.409 162.914ZM167.322 162.927L165.278 162.934L165.282 163.934L167.325 163.927L167.322 162.927ZM163.235 162.941L161.192 162.947L161.195 163.947L163.238 163.94L163.235 162.941ZM159.148 162.954L157.105 162.96L157.108 163.96L159.151 163.954L159.148 162.954ZM155.061 162.967L153.018 162.973L153.021 163.973L155.065 163.967L155.061 162.967ZM150.974 162.98L148.931 162.986L148.934 163.986L150.978 163.98L150.974 162.98ZM146.888 162.993L144.844 163L144.847 164L146.891 163.993L146.888 162.993ZM142.801 163.006L140.757 163.013L140.761 164.013L142.804 164.006L142.801 163.006ZM138.714 163.019L136.671 163.026L136.674 164.026L138.717 164.019L138.714 163.019ZM134.627 163.032L132.584 163.039L132.587 164.039L134.63 164.032L134.627 163.032ZM130.54 163.046L128.497 163.052L128.5 164.052L130.544 164.046L130.54 163.046ZM126.453 163.059L124.41 163.065L124.413 164.065L126.457 164.059L126.453 163.059ZM122.367 163.072L120.323 163.078L120.326 164.078L122.37 164.072L122.367 163.072ZM118.28 163.085L116.236 163.092L116.24 164.092L118.283 164.085L118.28 163.085ZM114.193 163.098L113.171 163.101L113.174 164.101L114.196 164.098L114.193 163.098ZM113.673 163.601L113.673 162.545L112.673 162.545L112.673 163.601L113.673 163.601ZM113.673 160.433L113.673 158.321L112.673 158.321L112.673 160.433L113.673 160.433ZM113.673 156.208L113.673 154.096L112.673 154.096L112.673 156.208L113.673 156.208ZM113.673 151.983L113.673 149.871L112.673 149.871L112.673 151.983L113.673 151.983ZM113.673 147.759L113.673 146.703L112.673 146.703L112.673 147.759L113.673 147.759Z"
+        fill="#0B27C4"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_7539_98594"
+          x1={8.23296}
+          y1={35.6175}
+          x2={371.22}
+          y2={246.222}
+          gradientUnits="userSpaceOnUse">
+          <stop stopColor="#2644F1" />
+          <stop offset={0.2} stopColor="#1334F0" />
+          <stop offset={0.4} stopColor="#3D59F3" />
+          <stop offset={0.6} stopColor="#526AF4" />
+          <stop offset={0.8} stopColor="#5E75F5" />
+          <stop offset={1} stopColor="#0E2CD7" />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_7539_98594"
+          x1={-4.30604}
+          y1={-56.4424}
+          x2={250.429}
+          y2={285.597}
+          gradientUnits="userSpaceOnUse">
+          <stop stopColor="#2644F1" />
+          <stop offset={0.2} stopColor="#1334F0" />
+          <stop offset={0.4} stopColor="#3D59F3" />
+          <stop offset={0.6} stopColor="#526AF4" />
+          <stop offset={0.8} stopColor="#5E75F5" />
+          <stop offset={1} stopColor="#0E2CD7" />
+        </linearGradient>
+        <linearGradient
+          id="paint2_linear_7539_98594"
+          x1={40.3648}
+          y1={-89.733}
+          x2={295.1}
+          y2={252.366}
+          gradientUnits="userSpaceOnUse">
+          <stop stopColor="#2644F1" />
+          <stop offset={0.2} stopColor="#1334F0" />
+          <stop offset={0.4} stopColor="#3D59F3" />
+          <stop offset={0.6} stopColor="#526AF4" />
+          <stop offset={0.8} stopColor="#5E75F5" />
+          <stop offset={1} stopColor="#0E2CD7" />
+        </linearGradient>
+        <linearGradient
+          id="paint3_linear_7539_98594"
+          x1={42.7137}
+          y1={-120.169}
+          x2={360.531}
+          y2={314.058}
+          gradientUnits="userSpaceOnUse">
+          <stop stopColor="#2644F1" />
+          <stop offset={0.2} stopColor="#1334F0" />
+          <stop offset={0.4} stopColor="#3D59F3" />
+          <stop offset={0.6} stopColor="#526AF4" />
+          <stop offset={0.8} stopColor="#5E75F5" />
+          <stop offset={1} stopColor="#0E2CD7" />
+        </linearGradient>
+        <linearGradient
+          id="paint4_linear_7539_98594"
+          x1={47.7199}
+          y1={-123.745}
+          x2={365.538}
+          y2={310.421}
+          gradientUnits="userSpaceOnUse">
+          <stop stopColor="#2644F1" />
+          <stop offset={0.2} stopColor="#1334F0" />
+          <stop offset={0.4} stopColor="#3D59F3" />
+          <stop offset={0.6} stopColor="#526AF4" />
+          <stop offset={0.8} stopColor="#5E75F5" />
+          <stop offset={1} stopColor="#0E2CD7" />
+        </linearGradient>
+        <linearGradient
+          id="paint5_linear_7539_98594"
+          x1={48.4927}
+          y1={-124.657}
+          x2={366.371}
+          y2={309.511}
+          gradientUnits="userSpaceOnUse">
+          <stop stopColor="#2644F1" />
+          <stop offset={0.2} stopColor="#1334F0" />
+          <stop offset={0.4} stopColor="#3D59F3" />
+          <stop offset={0.6} stopColor="#526AF4" />
+          <stop offset={0.8} stopColor="#5E75F5" />
+          <stop offset={1} stopColor="#0E2CD7" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}
+export default SvgDesktop;

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;