@lobehub/chat 1.83.8 → 1.84.0

package/src/app/[variants]/(main)/settings/provider/features/ModelList/ModelTitle/Search.tsx

@@ -1,7 +1,5 @@
-import { Icon } from '@lobehub/ui';
-import { Input, InputProps } from 'antd';
-import { SearchIcon } from 'lucide-react';
-import { memo, useState } from 'react';
+import { InputProps, SearchBar } from '@lobehub/ui';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 interface SearchProps {
@@ -12,24 +10,14 @@ interface SearchProps {
 
 const Search = memo<SearchProps>(({ value, onChange, variant }) => {
   const { t } = useTranslation('modelProvider');
-  const [keyword, setValue] = useState<string>(value);
 
   return (
-    <Input
+    <SearchBar
       allowClear
-      onBlur={() => {
-        onChange(keyword);
-      }}
-      onChange={(e) => {
-        setValue(e.target.value);
-      }}
-      onPressEnter={() => {
-        onChange(keyword);
-      }}
+      defaultValue={value}
+      onSearch={(keyword) => onChange(keyword)}
       placeholder={t('providerModels.list.search')}
-      prefix={<Icon icon={SearchIcon} />}
       size={'small'}
-      value={keyword}
       variant={variant}
     />
   );

package/src/app/[variants]/(main)/settings/provider/features/ModelList/ModelTitle/index.tsx

@@ -1,5 +1,5 @@
-import { ActionIcon, Icon } from '@lobehub/ui';
-import { App, Button, Dropdown, Skeleton, Space, Typography } from 'antd';
+import { ActionIcon, Button, Dropdown } from '@lobehub/ui';
+import { App, Skeleton, Space, Typography } from 'antd';
 import { useTheme } from 'antd-style';
 import { CircleX, EllipsisVertical, LucideRefreshCcwDot, PlusIcon } from 'lucide-react';
 import { memo, useState } from 'react';
@@ -57,7 +57,7 @@ const ModelTitle = memo<ModelFetcherProps>(
         gap={12}
         paddingBlock={8}
         style={{
-          background: theme.colorBgLayout,
+          background: theme.colorBgContainer,
           position: 'sticky',
           top: mobile ? -2 : -16,
           zIndex: 15,
@@ -107,7 +107,7 @@ const ModelTitle = memo<ModelFetcherProps>(
               <Space.Compact>
                 {showModelFetcher && (
                   <Button
-                    icon={<Icon icon={LucideRefreshCcwDot} />}
+                    icon={LucideRefreshCcwDot}
                     loading={fetchRemoteModelsLoading}
                     onClick={async () => {
                       setFetchRemoteModelsLoading(true);
@@ -128,7 +128,7 @@ const ModelTitle = memo<ModelFetcherProps>(
                 {showAddNewModel && (
                   <>
                     <Button
-                      icon={<Icon icon={PlusIcon} />}
+                      icon={PlusIcon}
                       onClick={() => {
                         setShowModal(true);
                       }}
@@ -157,7 +157,7 @@ const ModelTitle = memo<ModelFetcherProps>(
                     ],
                   }}
                 >
-                  <Button icon={<Icon icon={EllipsisVertical} />} size={'small'} />
+                  <Button icon={EllipsisVertical} size={'small'} />
                 </Dropdown>
               </Space.Compact>
             </Flexbox>

package/src/app/[variants]/(main)/settings/provider/features/ModelList/SortModelModal/index.tsx

@@ -1,5 +1,5 @@
-import { Modal, SortableList } from '@lobehub/ui';
-import { App, Button } from 'antd';
+import { Button, Modal, SortableList } from '@lobehub/ui';
+import { App } from 'antd';
 import { createStyles } from 'antd-style';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';

package/src/app/[variants]/(main)/settings/provider/features/ProviderConfig/Checker.tsx

@@ -2,8 +2,7 @@
 
 import { CheckCircleFilled } from '@ant-design/icons';
 import { ModelIcon } from '@lobehub/icons';
-import { Alert, Highlighter, Icon } from '@lobehub/ui';
-import { Button, Select, Space } from 'antd';
+import { Alert, Button, Highlighter, Icon, Select } from '@lobehub/ui';
 import { useTheme } from 'antd-style';
 import { Loader2Icon } from 'lucide-react';
 import { ReactNode, memo, useState } from 'react';
@@ -25,7 +24,7 @@ const Error = memo<{ error: ChatMessageError }>(({ error }) => {
       <Alert
         extra={
           <Flexbox>
-            <Highlighter copyButtonSize={'small'} language={'json'} type={'pure'}>
+            <Highlighter actionIconSize={'small'} language={'json'} variant={'borderless'}>
               {JSON.stringify(error.body || error, null, 2)}
             </Highlighter>
           </Flexbox>
@@ -72,7 +71,7 @@ const Checker = memo<ConnectionCheckerProps>(
       // Clear previous check results immediately
       setPass(false);
       setError(undefined);
-      
+
       let isError = false;
 
       await chatService.fetchPresetTaskResult({
@@ -126,7 +125,7 @@ const Checker = memo<ConnectionCheckerProps>(
 
     return (
       <Flexbox gap={8}>
-        <Space.Compact block>
+        <Flexbox gap={8} horizontal>
           <Select
             listItemHeight={36}
             onSelect={async (value) => {
@@ -152,7 +151,7 @@ const Checker = memo<ConnectionCheckerProps>(
           <Button disabled={isProviderConfigUpdating} loading={loading} onClick={checkConnection}>
             {t('llm.checker.button')}
           </Button>
-        </Space.Compact>
+        </Flexbox>
 
         {pass && (
           <Flexbox gap={4} horizontal>

package/src/app/[variants]/(main)/settings/provider/features/ProviderConfig/UpdateProviderInfo/SettingModal.tsx

@@ -1,7 +1,6 @@
 import { ProviderIcon } from '@lobehub/icons';
-import { FormModal, Icon } from '@lobehub/ui';
-import type { FormItemProps } from '@lobehub/ui/es/Form/components/FormItem';
-import { App, Button, Input, Select } from 'antd';
+import { Button, type FormItemProps, FormModal, Icon, Input, Select, TextArea } from '@lobehub/ui';
+import { App } from 'antd';
 import { BrainIcon } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import { memo, useState } from 'react';
@@ -61,7 +60,7 @@ const CreateNewProvider = memo<CreateNewProviderProps>(({ onClose, open, initial
     },
     {
       children: (
-        <Input.TextArea
+        <TextArea
           placeholder={t('createNewAiProvider.description.placeholder')}
           style={{ minHeight: 80 }}
           variant={'filled'}

package/src/app/[variants]/(main)/settings/provider/features/ProviderConfig/UpdateProviderInfo/index.tsx

@@ -1,7 +1,6 @@
 'use client';
 
-import { Icon, Tooltip } from '@lobehub/ui';
-import { Button } from 'antd';
+import { Button, Tooltip } from '@lobehub/ui';
 import isEqual from 'fast-deep-equal';
 import { SettingsIcon } from 'lucide-react';
 import { memo, useState } from 'react';
@@ -21,15 +20,14 @@ const UpdateProviderInfo = memo(() => {
     <>
       <Tooltip title={t('updateAiProvider.tooltip')}>
         <Button
-          color={'default'}
-          icon={<Icon icon={SettingsIcon} />}
+          icon={SettingsIcon}
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
             setOpen(true);
           }}
           size={'small'}
-          variant={'text'}
+          type={'text'}
         />
       </Tooltip>
       {open && providerConfig && (

package/src/app/[variants]/(main)/settings/provider/features/ProviderConfig/index.tsx

@@ -1,7 +1,14 @@
 'use client';
 
 import { ProviderCombine } from '@lobehub/icons';
-import { Avatar, Form, type FormItemProps, Icon, type ItemGroup, Tooltip } from '@lobehub/ui';
+import {
+  Avatar,
+  Form,
+  type FormGroupItemType,
+  type FormItemProps,
+  Icon,
+  Tooltip,
+} from '@lobehub/ui';
 import { useDebounceFn } from 'ahooks';
 import { Skeleton, Switch } from 'antd';
 import { createStyles } from 'antd-style';
@@ -292,7 +299,7 @@ const ProviderConfig = memo<ProviderConfigProps>(
     ].filter(Boolean) as FormItemProps[];
 
     const logoUrl = data?.logo ?? logo;
-    const model: ItemGroup = {
+    const model: FormGroupItemType = {
       children: configItems,
 
       defaultActive: true,
@@ -353,7 +360,7 @@ const ProviderConfig = memo<ProviderConfigProps>(
         onValuesChange={(_, values) => {
           debouncedUpdate(id, values);
         }}
-        variant={'pure'}
+        variant={'borderless'}
         {...FORM_STYLE}
       />
     );

package/src/app/[variants]/(main)/settings/storage/Advanced.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { Form, Icon, type ItemGroup } from '@lobehub/ui';
-import { App, Button } from 'antd';
+import { Button, Form, type FormGroupItemType, Icon } from '@lobehub/ui';
+import { App } from 'antd';
 import isEqual from 'fast-deep-equal';
 import { HardDriveDownload, HardDriveUpload } from 'lucide-react';
 import { useCallback } from 'react';
@@ -53,7 +53,7 @@ const AdvancedActions = () => {
     });
   }, []);
 
-  const system: ItemGroup = {
+  const system: FormGroupItemType = {
     children: [
       {
         children: (
@@ -82,7 +82,7 @@ const AdvancedActions = () => {
       },
       {
         children: (
-          <Button danger onClick={handleClear} type="primary">
+          <Button danger onClick={handleClear} type={'primary'}>
             {t('danger.clear.action')}
           </Button>
         ),
@@ -99,7 +99,7 @@ const AdvancedActions = () => {
       initialValues={settings}
       items={[system]}
       itemsType={'group'}
-      variant={'pure'}
+      variant={'borderless'}
       {...FORM_STYLE}
     />
   );

package/src/app/[variants]/(main)/settings/sync/features/DeviceInfo/DeviceName.tsx

@@ -44,17 +44,17 @@ const DeviceName = memo(() => {
       )}
       <EditableText
         editing={editing}
-        onBlur={(e) => {
-          updateDeviceName(e.target.value);
+        inputProps={{
+          placeholder: t('sync.device.deviceName.placeholder'),
         }}
+        onBlur={(e) => updateDeviceName(e.target.value)}
         onChange={(e) => {
           updateDeviceName(e);
         }}
         onEditingChange={setEditing}
-        placeholder={t('sync.device.deviceName.placeholder')}
         size={'large'}
-        type={'block'}
         value={deviceName}
+        variant={'filled'}
       />
     </Flexbox>
   );

package/src/app/[variants]/(main)/settings/sync/features/WebRTC/ChannelNameInput.tsx

@@ -1,5 +1,4 @@
-import { ActionIcon } from '@lobehub/ui';
-import { Input, InputProps } from 'antd';
+import { ActionIcon, Input, InputProps } from '@lobehub/ui';
 import { FormInstance } from 'antd/es/form/hooks/useForm';
 import { LucideDices } from 'lucide-react';
 import { memo, useState } from 'react';

package/src/app/[variants]/(main)/settings/sync/features/WebRTC/SyncSwitch/index.css

@@ -119,7 +119,8 @@
   height: 2em;
 
   background-color: hsl(var(--hue), 10%, 15%);
-  background-image: radial-gradient(
+  background-image:
+    radial-gradient(
       88% 88% at 50% 50%,
       hsl(var(--hue), 10%, 20%) 47%,
       hsla(var(--hue), 10%, 20%, 0%) 50%

package/src/app/[variants]/(main)/settings/sync/features/WebRTC/index.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import { SiWebrtc } from '@icons-pack/react-simple-icons';
-import { Form, type ItemGroup, Tooltip } from '@lobehub/ui';
-import { Form as AntForm, Input, Switch, Typography } from 'antd';
+import { Form, type FormGroupItemType, Input, InputPassword, Tooltip } from '@lobehub/ui';
+import { Form as AntForm, Switch, Typography } from 'antd';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
@@ -14,8 +14,6 @@ import { useUserStore } from '@/store/user';
 
 import ChannelNameInput from './ChannelNameInput';
 
-type SettingItemGroup = ItemGroup;
-
 const WebRTC = memo(() => {
   const { t } = useTranslation('setting');
   const [form] = Form.useForm();
@@ -27,7 +25,7 @@ const WebRTC = memo(() => {
   const channelName = AntForm.useWatch(['sync', 'webrtc', 'channelName'], form);
   const signaling = AntForm.useWatch(['sync', 'webrtc', 'signaling'], form);
 
-  const config: SettingItemGroup = {
+  const config: FormGroupItemType = {
     children: [
       {
         children: <Input placeholder={t('sync.webrtc.signaling.placeholder')} />,
@@ -43,7 +41,7 @@ const WebRTC = memo(() => {
       },
       {
         children: (
-          <Input.Password
+          <InputPassword
             autoComplete={'nw-password'}
             placeholder={t('sync.webrtc.channelPassword.placeholder')}
           />
@@ -96,7 +94,7 @@ const WebRTC = memo(() => {
       itemsType={'group'}
       onFinish={setSettings}
       onValuesChange={setSettings}
-      variant={'pure'}
+      variant={'borderless'}
       {...FORM_STYLE}
     />
   );

package/src/app/[variants]/(main)/settings/system-agent/features/createForm.tsx

@@ -1,8 +1,7 @@
 'use client';
 
-import { Form, Icon, type ItemGroup } from '@lobehub/ui';
-import type { FormItemProps } from '@lobehub/ui/es/Form/components/FormItem';
-import { Form as AntForm, Button, Switch } from 'antd';
+import { Button, Form, type FormGroupItemType, type FormItemProps } from '@lobehub/ui';
+import { Form as AntForm, Switch } from 'antd';
 import isEqual from 'fast-deep-equal';
 import { PencilIcon } from 'lucide-react';
 import { memo } from 'react';
@@ -17,8 +16,6 @@ import { type UserSystemAgentConfigKey } from '@/types/user/settings';
 
 import { useSyncSystemAgent } from './useSync';
 
-type SettingItemGroup = ItemGroup;
-
 interface SystemAgentFormProps {
   allowCustomPrompt?: boolean;
   allowDisable?: boolean;
@@ -36,7 +33,7 @@ const SystemAgentForm = memo(
     const [form] = AntForm.useForm();
     const value = settings[systemAgentKey];
 
-    const systemAgentSettings: SettingItemGroup = {
+    const systemAgentSettings: FormGroupItemType = {
       children: [
         {
           children: (
@@ -65,7 +62,7 @@ const SystemAgentForm = memo(
           ) : (
             <Button
               block
-              icon={<Icon icon={PencilIcon} />}
+              icon={PencilIcon}
               onClick={async () => {
                 await updateSystemAgent(systemAgentKey, { customPrompt: defaultPrompt });
               }}

package/src/app/[variants]/(main)/settings/tts/features/OpenAI.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { Form, type ItemGroup } from '@lobehub/ui';
-import { Select } from 'antd';
+import { Form, type FormGroupItemType } from '@lobehub/ui';
+import { Select } from '@lobehub/ui';
 import isEqual from 'fast-deep-equal';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -12,8 +12,6 @@ import { settingsSelectors } from '@/store/user/selectors';
 
 import { opeanaiSTTOptions, opeanaiTTSOptions } from './const';
 
-type SettingItemGroup = ItemGroup;
-
 const TTS_SETTING_KEY = 'tts';
 
 const OpenAI = memo(() => {
@@ -22,7 +20,7 @@ const OpenAI = memo(() => {
   const settings = useUserStore(settingsSelectors.currentSettings, isEqual);
   const [setSettings] = useUserStore((s) => [s.setSettings]);
 
-  const openai: SettingItemGroup = {
+  const openai: FormGroupItemType = {
     children: [
       {
         children: <Select options={opeanaiTTSOptions} />,
@@ -45,7 +43,7 @@ const OpenAI = memo(() => {
       items={[openai]}
       itemsType={'group'}
       onValuesChange={setSettings}
-      variant={'pure'}
+      variant={'borderless'}
       {...FORM_STYLE}
     />
   );

package/src/app/[variants]/(main)/settings/tts/features/STT.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { Form, type ItemGroup } from '@lobehub/ui';
-import { Select, Switch } from 'antd';
+import { Form, type FormGroupItemType, Select } from '@lobehub/ui';
+import { Switch } from 'antd';
 import isEqual from 'fast-deep-equal';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -12,8 +12,6 @@ import { settingsSelectors } from '@/store/user/selectors';
 
 import { sttOptions } from './const';
 
-type SettingItemGroup = ItemGroup;
-
 const TTS_SETTING_KEY = 'tts';
 
 const STT = memo(() => {
@@ -22,7 +20,7 @@ const STT = memo(() => {
   const settings = useUserStore(settingsSelectors.currentSettings, isEqual);
   const [setSettings] = useUserStore((s) => [s.setSettings]);
 
-  const stt: SettingItemGroup = {
+  const stt: FormGroupItemType = {
     children: [
       {
         children: <Select options={sttOptions} />,
@@ -34,6 +32,7 @@ const STT = memo(() => {
         children: <Switch />,
         desc: t('settingTTS.sttAutoStop.desc'),
         label: t('settingTTS.sttAutoStop.title'),
+        layout: 'horizontal',
         minWidth: undefined,
         name: [TTS_SETTING_KEY, 'sttAutoStop'],
         valuePropName: 'checked',
@@ -49,7 +48,7 @@ const STT = memo(() => {
       items={[stt]}
       itemsType={'group'}
       onValuesChange={setSettings}
-      variant={'pure'}
+      variant={'borderless'}
       {...FORM_STYLE}
     />
   );

package/src/app/[variants]/(main)/settings/tts/features/const.tsx

@@ -1,5 +1,5 @@
 import { OpenAI } from '@lobehub/icons';
-import { SelectProps } from 'antd';
+import type { SelectProps } from '@lobehub/ui';
 
 import { LabelRenderer } from '@/components/ModelSelect';
 

package/src/app/[variants]/@modal/(.)changelog/modal/features/ReadDetail.tsx

@@ -13,6 +13,8 @@ import urlJoin from 'url-join';
 import { OFFICIAL_SITE } from '@/const/url';
 import { useShare } from '@/hooks/useShare';
 
+const ICON_SIZE = { blockSize: 28, size: 16 };
+
 const useStyles = createStyles(
   ({ css, token }) => css`
     position: relative;
@@ -35,39 +37,19 @@ const ReadDetail = memo<{ desc: string; postId: string; title: string }>(
     return (
       <Flexbox align={'center'} className={styles} gap={4} horizontal>
         <Link href={x.link} style={{ color: 'inherit' }} target={'_blank'}>
-          <ActionIcon
-            fill={theme.colorTextSecondary}
-            icon={x.icon}
-            size={{ blockSize: 28, fontSize: 16 }}
-          />
+          <ActionIcon fill={theme.colorTextSecondary} icon={x.icon} size={ICON_SIZE} />
         </Link>
         <Link href={telegram.link} style={{ color: 'inherit' }} target={'_blank'}>
-          <ActionIcon
-            fill={theme.colorTextSecondary}
-            icon={telegram.icon}
-            size={{ blockSize: 28, fontSize: 16 }}
-          />
+          <ActionIcon fill={theme.colorTextSecondary} icon={telegram.icon} size={ICON_SIZE} />
         </Link>
         <Link href={reddit.link} style={{ color: 'inherit' }} target={'_blank'}>
-          <ActionIcon
-            fill={theme.colorTextSecondary}
-            icon={reddit.icon}
-            size={{ blockSize: 28, fontSize: 16 }}
-          />
+          <ActionIcon fill={theme.colorTextSecondary} icon={reddit.icon} size={ICON_SIZE} />
         </Link>
         <Link href={mastodon.link} style={{ color: 'inherit' }} target={'_blank'}>
-          <ActionIcon
-            fill={theme.colorTextSecondary}
-            icon={mastodon.icon}
-            size={{ blockSize: 28, fontSize: 16 }}
-          />
+          <ActionIcon fill={theme.colorTextSecondary} icon={mastodon.icon} size={ICON_SIZE} />
         </Link>
         <Link href={whatsapp.link} style={{ color: 'inherit' }} target={'_blank'}>
-          <ActionIcon
-            fill={theme.colorTextSecondary}
-            icon={whatsapp.icon}
-            size={{ blockSize: 28, fontSize: 16 }}
-          />
+          <ActionIcon fill={theme.colorTextSecondary} icon={whatsapp.icon} size={ICON_SIZE} />
         </Link>
         <Divider style={{ height: '100%' }} type={'vertical'} />
         <Link href={url} style={{ color: 'inherit', flex: 1 }} target={'_blank'}>
@@ -79,11 +61,7 @@ const ReadDetail = memo<{ desc: string; postId: string; title: string }>(
             width={'100%'}
           >
             {t('readDetails')}
-            <Icon
-              color={theme.colorTextSecondary}
-              icon={ChevronRightIcon}
-              size={{ fontSize: 20 }}
-            />
+            <Icon color={theme.colorTextSecondary} icon={ChevronRightIcon} size={20} />
           </Flexbox>
         </Link>
       </Flexbox>

package/src/app/[variants]/loading/Client/Error.tsx

@@ -1,4 +1,4 @@
-import { Button } from 'antd';
+import { Button } from '@lobehub/ui';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Center } from 'react-layout-kit';

package/src/app/[variants]/oauth/consent/[uid]/Consent.tsx

@@ -1,8 +1,9 @@
 'use client';
 
-import { Button, Card, Divider, Typography } from 'antd';
+import { Button } from '@lobehub/ui';
+import { Card, Divider, Typography } from 'antd';
 import { createStyles } from 'antd-style';
-import React, { memo } from 'react';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 

package/src/app/[variants]/oauth/consent/[uid]/Login.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { Avatar } from '@lobehub/ui';
-import { Button, Card, Skeleton, Typography } from 'antd';
+import { Avatar, Button } from '@lobehub/ui';
+import { Card, Skeleton, Typography } from 'antd';
 import { createStyles } from 'antd-style';
 import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';

package/src/app/[variants]/oauth/consent/[uid]/failed/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { Icon } from '@lobehub/ui';
-import { Button, Card, Result } from 'antd';
+import { Button, Icon } from '@lobehub/ui';
+import { Card, Result } from 'antd';
 import { XCircle } from 'lucide-react';
 import Link from 'next/link';
 import React, { memo } from 'react';

package/src/app/desktop/devtools/page.tsx

@@ -58,13 +58,14 @@ const DevTools = memo(() => {
           topActions={items.map((item) => (
             <ActionIcon
               active={tab === item.key}
+              icon={item.icon}
               key={item.key}
               onClick={() => setTab(item.key)}
-              placement={'right'}
               title={item.key}
-            >
-              {item.icon}
-            </ActionIcon>
+              tooltipProps={{
+                placement: 'right',
+              }}
+            />
           ))}
         />
         {items.map((item) => (

package/src/components/404/index.tsx

@@ -1,7 +1,6 @@
 'use client';
 
-import { FluentEmoji } from '@lobehub/ui';
-import { Button } from 'antd';
+import { Button, FluentEmoji } from '@lobehub/ui';
 import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';

package/src/components/Cell/index.tsx

@@ -42,10 +42,10 @@ const Cell = memo<CellProps>(({ label, icon, onClick, type }) => {
       padding={16}
     >
       <Flexbox align={'center'} gap={12} horizontal>
-        {icon && <Icon color={theme.colorPrimaryBorder} icon={icon} size={{ fontSize: 20 }} />}
+        {icon && <Icon color={theme.colorPrimaryBorder} icon={icon} size={{ size: 20 }} />}
         {label}
       </Flexbox>
-      <Icon color={theme.colorBorder} icon={ChevronRight} size={{ fontSize: 16 }} />
+      <Icon color={theme.colorBorder} icon={ChevronRight} size={{ size: 16 }} />
     </Flexbox>
   );
 });

package/src/components/DragUpload/index.tsx

@@ -11,7 +11,7 @@ import { Center, Flexbox } from 'react-layout-kit';
 import { getContainer, useDragUpload } from './useDragUpload';
 
 const BLOCK_SIZE = 64;
-const ICON_SIZE = 36;
+const ICON_SIZE = { size: 36, strokeWidth: 1.5 };
 
 const useStyles = createStyles(({ css, token }) => {
   return {
@@ -90,7 +90,7 @@ const DragUpload = memo<DragUploadProps>(({ enabledFiles = true, onUploadFiles }
               }}
               width={BLOCK_SIZE}
             >
-              <Icon icon={FileImage} size={{ fontSize: ICON_SIZE, strokeWidth: 1.5 }} />
+              <Icon icon={FileImage} size={ICON_SIZE} />
             </Center>
             <Center
               className={styles.icon}
@@ -101,7 +101,7 @@ const DragUpload = memo<DragUploadProps>(({ enabledFiles = true, onUploadFiles }
               }}
               width={BLOCK_SIZE}
             >
-              <Icon icon={FileUpIcon} size={{ fontSize: ICON_SIZE, strokeWidth: 1.5 }} />
+              <Icon icon={FileUpIcon} size={ICON_SIZE} />
             </Center>
             <Center
               className={styles.icon}
@@ -112,7 +112,7 @@ const DragUpload = memo<DragUploadProps>(({ enabledFiles = true, onUploadFiles }
               }}
               width={BLOCK_SIZE}
             >
-              <Icon icon={FileText} size={{ fontSize: ICON_SIZE, strokeWidth: 1.5 }} />
+              <Icon icon={FileText} size={ICON_SIZE} />
             </Center>
           </Flexbox>
           <Flexbox align={'center'} gap={8} style={{ textAlign: 'center' }}>