diff --git a/.github/workflows/publish-lowcoder-cli.yml b/.github/workflows/publish-lowcoder-cli.yml
new file mode 100644
index 0000000000..17eafa909c
--- /dev/null
+++ b/.github/workflows/publish-lowcoder-cli.yml
@@ -0,0 +1,47 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
+
+name: Publish Lowcoder CLI
+
+on:
+  push:
+    branches: [ "dev" ]
+
+jobs:
+  publish-package:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Check version changes
+        uses: EndBug/version-check@v1
+        id: check
+        with:
+          diff-search: true
+          file-name: client/packages/lowcoder-cli/package.json
+
+      - name: Version update detected
+        if: steps.check.outputs.changed == 'true'
+        run: 'echo "Version change found! New version: ${{ steps.check.outputs.version }} (${{ steps.check.outputs.type }})"'
+      
+      - name: Set up Node.js for NPM
+        if: steps.check.outputs.changed == 'true'
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          registry-url: https://registry.npmjs.org/
+
+      - name: Install dependencies
+        if: steps.check.outputs.changed == 'true'
+        uses: borales/actions-yarn@v4.2.0
+        with:
+          cmd: install
+          dir: client/packages/lowcoder-cli
+      
+      - name: Publish package to NPM
+        if: steps.check.outputs.changed == 'true'
+        run: npm publish
+        working-directory: client/packages/lowcoder-cli
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.LOWCODERNPMBOT }}
\ No newline at end of file
diff --git a/.github/workflows/publish-lowcoder-comps.yml b/.github/workflows/publish-lowcoder-comps.yml
new file mode 100644
index 0000000000..40eb567e01
--- /dev/null
+++ b/.github/workflows/publish-lowcoder-comps.yml
@@ -0,0 +1,49 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
+
+name: Publish Lowcoder Comps
+
+on:
+  push:
+    branches: [ "dev" ]
+
+jobs:
+  publish-package:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Check version changes
+        uses: EndBug/version-check@v1
+        id: check
+        with:
+          diff-search: true
+          file-name: client/packages/lowcoder-comps/package.json
+
+      - name: Version update detected
+        if: steps.check.outputs.changed == 'true'
+        run: 'echo "Version change found! New version: ${{ steps.check.outputs.version }} (${{ steps.check.outputs.type }})"'
+      
+      - name: Set up Node.js for NPM
+        if: steps.check.outputs.changed == 'true'
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          registry-url: https://registry.npmjs.org/
+
+      - name: Install dependencies
+        if: steps.check.outputs.changed == 'true'
+        uses: borales/actions-yarn@v4.2.0
+        with:
+          cmd: install
+          dir: client/packages/lowcoder-comps
+
+      - name: Publish
+        if: steps.check.outputs.changed == 'true'
+        uses: borales/actions-yarn@v4.2.0
+        with:
+          cmd: build_publish
+          dir: client/packages/lowcoder-comps
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.LOWCODERNPMBOT }}
\ No newline at end of file
diff --git a/.github/workflows/publish-lowcoder-core.yml b/.github/workflows/publish-lowcoder-core.yml
new file mode 100644
index 0000000000..5d36c46c7a
--- /dev/null
+++ b/.github/workflows/publish-lowcoder-core.yml
@@ -0,0 +1,47 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
+
+name: Publish Lowcoder Core
+
+on:
+  push:
+    branches: [ "dev" ]
+
+jobs:
+  publish-package:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Check version changes
+        uses: EndBug/version-check@v1
+        id: check
+        with:
+          diff-search: true
+          file-name: client/packages/lowcoder-core/package.json
+
+      - name: Version update detected
+        if: steps.check.outputs.changed == 'true'
+        run: 'echo "Version change found! New version: ${{ steps.check.outputs.version }} (${{ steps.check.outputs.type }})"'
+      
+      - name: Set up Node.js for NPM
+        if: steps.check.outputs.changed == 'true'
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          registry-url: https://registry.npmjs.org/
+
+      - name: Install dependencies
+        if: steps.check.outputs.changed == 'true'
+        uses: borales/actions-yarn@v4.2.0
+        with:
+          cmd: install
+          dir: client/packages/lowcoder-core
+
+      - name: Publish package to NPM
+        if: steps.check.outputs.changed == 'true'
+        run: npm publish
+        working-directory: client/packages/lowcoder-core
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.LOWCODERNPMBOT }}
\ No newline at end of file
diff --git a/.github/workflows/publish-lowcoder-sdk.yml b/.github/workflows/publish-lowcoder-sdk.yml
new file mode 100644
index 0000000000..40d93e71a7
--- /dev/null
+++ b/.github/workflows/publish-lowcoder-sdk.yml
@@ -0,0 +1,54 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
+
+name: Publish Lowcoder SDK
+
+on:
+  push:
+    branches: [ "dev" ]
+
+jobs:
+  publish-package:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Check version changes
+        uses: EndBug/version-check@v1
+        id: check
+        with:
+          diff-search: true
+          file-name: client/packages/lowcoder-sdk/package.json
+
+      - name: Version update detected
+        if: steps.check.outputs.changed == 'true'
+        run: 'echo "Version change found! New version: ${{ steps.check.outputs.version }} (${{ steps.check.outputs.type }})"'
+      
+      - name: Set up Node.js for NPM
+        if: steps.check.outputs.changed == 'true'
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          registry-url: https://registry.npmjs.org/
+
+      - name: Install dependencies
+        if: steps.check.outputs.changed == 'true'
+        uses: borales/actions-yarn@v4.2.0
+        with:
+          cmd: install
+          dir: client/packages/lowcoder-sdk
+      
+      - name: Build Package
+        if: steps.check.outputs.changed == 'true'
+        uses: borales/actions-yarn@v4.2.0
+        with:
+          cmd: build
+          dir: client/packages/lowcoder-sdk
+
+      - name: Publish package to NPM
+        if: steps.check.outputs.changed == 'true'
+        run: npm publish
+        working-directory: client/packages/lowcoder-sdk
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.LOWCODERNPMBOT }}
\ No newline at end of file
diff --git a/client/config/test/jest.setup-after-env.js b/client/config/test/jest.setup-after-env.js
index 6bb7398393..f332f518b9 100644
--- a/client/config/test/jest.setup-after-env.js
+++ b/client/config/test/jest.setup-after-env.js
@@ -22,9 +22,25 @@ window.ResizeObserver = function () {
   };
 };
 
-window.ImageData = {}
-window.MediaStreamTrack = {}
-window.URL.createObjectURL = () => {}
+Object.defineProperty(window, 'ImageData', { value: 'yourValue' });
+Object.defineProperty(window, 'MediaStreamTrack', { value: 'yourValue' });
+Object.defineProperty(window, 'URL', {
+  writable: true,
+  value: {
+    createObjectURL: jest.fn(),
+  }
+});
+Object.defineProperty(window, "navigator", {
+  writable: true,
+  value: {
+    mediaDevices: {
+      enumerateDevices: jest.fn(),
+    },
+    userAgent: '',
+    language: '',
+    browserLanguage: '',
+  },
+});
 
 class Worker {
   constructor(stringUrl) {
@@ -36,4 +52,5 @@ class Worker {
     this.onmessage(msg);
   }
 }
+
 window.Worker = Worker;
\ No newline at end of file
diff --git a/client/package.json b/client/package.json
index 0b64d0cd5a..2f49baf8c4 100644
--- a/client/package.json
+++ b/client/package.json
@@ -34,7 +34,6 @@
     "@types/react-resizable": "^3.0.5",
     "@types/react-router-dom": "^5.3.2",
     "@types/shelljs": "^0.8.11",
-    "@types/styled-components": "^5.1.19",
     "@types/stylis": "^4.0.2",
     "@types/tern": "0.23.4",
     "@types/ua-parser-js": "^0.7.36",
@@ -71,6 +70,9 @@
   },
   "dependencies": {
     "@lottiefiles/react-lottie-player": "^3.5.3",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/styled-components": "^5.1.34",
     "antd-mobile": "^5.28.0",
     "chalk": "4",
     "number-precision": "^1.6.0",
diff --git a/client/packages/lowcoder-cli/package.json b/client/packages/lowcoder-cli/package.json
index ebc038749b..e7e740e1cb 100644
--- a/client/packages/lowcoder-cli/package.json
+++ b/client/packages/lowcoder-cli/package.json
@@ -1,7 +1,7 @@
 {
   "name": "lowcoder-cli",
   "description": "CLI tool used to start build publish lowcoder components",
-  "version": "0.0.27",
+  "version": "0.0.28",
   "license": "MIT",
   "bin": "./index.js",
   "type": "module",
diff --git a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx
index 37c15507f1..72f292ece4 100644
--- a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx
@@ -22,7 +22,8 @@ import {
   CalendarDeleteIcon,
   Tooltip,
 } from "lowcoder-sdk";
-import { Input, Form } from "antd";
+import { default as Form } from "antd/es/form";
+import { default as Input } from "antd/es/input";
 import { trans, getCalendarLocale } from "../../i18n/comps";
 import { createRef, useContext, useRef, useState } from "react";
 import FullCalendar from "@fullcalendar/react";
@@ -290,11 +291,11 @@ let CalendarBasicComp = (function () {
     return (
       <Wrapper
         ref={ref}
-        editable={editable}
+        $editable={editable}
         $style={style}
-        theme={theme?.theme}
+        $theme={theme?.theme}
         onDoubleClick={handleDbClick}
-        left={left}
+        $left={left}
         key={initialDate ? defaultView + initialDate : defaultView}
       >
         <FullCalendar
diff --git a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx
index 0e33adf1e1..93c07c4628 100644
--- a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx
+++ b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx
@@ -24,13 +24,13 @@ import {
   SlotLabelContentArg,
   ViewContentArg,
 } from "@fullcalendar/core";
-import { Form } from "antd";
+import { default as Form } from "antd/es/form";
 
 export const Wrapper = styled.div<{
-  editable: boolean;
+  $editable: boolean;
   $style: CalendarStyleType;
-  theme?: ThemeDetail;
-  left?: number;
+  $theme?: ThemeDetail;
+  $left?: number;
 }>`
   position: relative;
   height: 100%;
@@ -205,9 +205,9 @@ export const Wrapper = styled.div<{
       flex-direction: inherit;
     }
     .fc-day-today .fc-daygrid-day-number {
-      background-color: ${(props) => props.theme.primary};
+      background-color: ${(props) => props.$theme.primary};
       color: ${(props) =>
-        contrastText(props.theme.primary || "", props.theme.textDark, props.theme.textLight)};
+        contrastText(props.$theme.primary || "", props.$theme.textDark, props.$theme.textLight)};
     }
     .fc-daygrid-day-events {
       padding: 1px 0 5px 0;
@@ -261,7 +261,7 @@ export const Wrapper = styled.div<{
     border-radius: 4px;
     box-shadow: 0 0px 10px 4px rgba(0, 0, 0, 0.25);
     overflow: hidden;
-    left: ${(props) => `min(${props.left}px, calc(100% - 210px)) !important`};
+    left: ${(props) => `min(${props.$left}px, calc(100% - 210px)) !important`};
     .fc-popover-body {
       padding: 4px 0;
       min-width: 200px;
@@ -368,7 +368,7 @@ export const Wrapper = styled.div<{
     }
     &:hover {
       .event-remove {
-        opacity: ${(props) => props.editable && 1};
+        opacity: ${(props) => props.$editable ? 1 : undefined};
       }
     }
   }
@@ -585,10 +585,10 @@ export const Wrapper = styled.div<{
     }
     .fc-day-today.fc-col-header-cell {
       background-color: ${(props) =>
-        isDarkColor(props.$style.background) ? "#ffffff19" : toHex(props.theme.primary!) + "19"};
+        isDarkColor(props.$style.background) ? "#ffffff19" : toHex(props.$theme.primary!) + "19"};
       a {
         color: ${(props) =>
-          !isDarkColor(props.$style.background) && darkenColor(props.theme.primary!, 0.1)};
+          !isDarkColor(props.$style.background) && darkenColor(props.$theme.primary!, 0.1)};
       }
     }
     .fc-col-header-cell-cushion {
diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/chartUrls.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/chartUrls.tsx
index 320bfc0c1f..ef8ada4b00 100644
--- a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/chartUrls.tsx
+++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/chartUrls.tsx
@@ -4,6 +4,6 @@ const echartsUrlLocale = language === "zh" ? "zh" : "en";
 export const optionUrl = `https://echarts.apache.org/${echartsUrlLocale}/option.html`;
 export const examplesUrl = `https://echarts.apache.org/examples/${echartsUrlLocale}/index.html`;
 export const xAxisTypeUrl = `${optionUrl}#xAxis.type`;
-export const googleMapsApiUrl = `https://maps.googleapis.com/maps/api/js?v=3.exp`;
+export const googleMapsApiUrl = `https://maps.googleapis.com/maps/api/js`;
 export const mapOptionUrl = `https://github.com/plainheart/echarts-extension-gmap`;
 export const mapExamplesUrl = `https://codepen.io/plainheart/pen/VweLGbR`;
\ No newline at end of file
diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartUtils.ts b/client/packages/lowcoder-comps/src/comps/chartComp/chartUtils.ts
index 2e784b56f0..8a1d912fe5 100644
--- a/client/packages/lowcoder-comps/src/comps/chartComp/chartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartUtils.ts
@@ -266,8 +266,8 @@ export function getSelectedPoints(param: any, option: any) {
   return [];
 }
 
-export function loadGoogleMapsScript(apiKey?: string) {
-  const mapsUrl = `${googleMapsApiUrl}&key=${apiKey}`;
+export function loadGoogleMapsScript(apiKey: string) {
+  const mapsUrl = `${googleMapsApiUrl}?key=${apiKey}`;
   const scripts = document.getElementsByTagName('script');
   // is script already loaded
   let scriptIndex = _.findIndex(scripts, (script) => script.src.endsWith(mapsUrl));
diff --git a/client/packages/lowcoder-comps/src/comps/imageEditorComp/imageEditorConstants.tsx b/client/packages/lowcoder-comps/src/comps/imageEditorComp/imageEditorConstants.tsx
index 968955f63f..c5aa552a0c 100644
--- a/client/packages/lowcoder-comps/src/comps/imageEditorComp/imageEditorConstants.tsx
+++ b/client/packages/lowcoder-comps/src/comps/imageEditorComp/imageEditorConstants.tsx
@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { Button } from "antd";
+import { default as Button } from "antd/es/button";
 import { EventConfigType } from "lowcoder-sdk";
 import { trans } from "i18n/comps";
 
diff --git a/client/packages/lowcoder-core/package.json b/client/packages/lowcoder-core/package.json
index 55ddc026cb..04fcd14aca 100644
--- a/client/packages/lowcoder-core/package.json
+++ b/client/packages/lowcoder-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lowcoder-core",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "type": "module",
   "scripts": {
     "start": "rollup -c rollup.config.js --watch",
diff --git a/client/packages/lowcoder-design/src/components/Collapase.tsx b/client/packages/lowcoder-design/src/components/Collapase.tsx
index 63b849835c..c445ac4749 100644
--- a/client/packages/lowcoder-design/src/components/Collapase.tsx
+++ b/client/packages/lowcoder-design/src/components/Collapase.tsx
@@ -1,26 +1,20 @@
-import { Collapse as AntdCollapse, CollapseProps } from "antd";
+import { default as AntdCollapse, CollapseProps } from "antd/es/collapse";
 import { ReactComponent as UnFold } from "icons/icon-unfold.svg";
 import { ReactComponent as Folded } from "icons/icon-folded.svg";
 import { ReactComponent as Omit } from "icons/icon-omit.svg";
 import styled, { css } from "styled-components";
 import React, { ReactNode } from "react";
 
-const Panel = styled(AntdCollapse.Panel)`
-  .ant-collapse-header-text {
-    max-width: calc(100% - 14px);
-  }
-`;
-
-const Container = styled.div<{ optColor?: boolean; simple?: boolean }>`
+const Container = styled.div<{ $optColor?: boolean; $simple?: boolean }>`
   &&& {
-    background: ${(props) => (props.optColor ? "#f2f7fc" : null)};
+    background: ${(props) => (props.$optColor ? "#f2f7fc" : null)};
   }
 
   cursor: pointer;
-  padding-left: ${(props) => (props.simple ? 0 : "2px")};
+  padding-left: ${(props) => (props.$simple ? 0 : "2px")};
 
   &:hover {
-    background-color: ${(props) => (props.simple ? "#FFFFFF" : "#f2f7fc80")};
+    background-color: ${(props) => (props.$simple ? "#FFFFFF" : "#f2f7fc80")};
   }
 
   .ant-collapse > .ant-collapse-item > .ant-collapse-header {
@@ -39,12 +33,12 @@ const Container = styled.div<{ optColor?: boolean; simple?: boolean }>`
     font-weight: 500;
     font-size: 13px;
     line-height: 13px;
-    padding-left: ${(props) => (props.simple ? 0 : "6px")};
+    padding-left: ${(props) => (props.$simple ? 0 : "6px")};
     user-select: none;
   }
 
   .ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow {
-    margin-right: ${(props) => (props.simple ? 0 : "2px")};
+    margin-right: ${(props) => (props.$simple ? 0 : "2px")};
   }
 `;
 
@@ -106,7 +100,7 @@ export const Collapse = (props: Iprops) => {
 
   return (
     // <Contain $color={props.isSelected || Color!==""}>
-    <Container optColor={props.isSelected} simple={props.simple} className={props.className}>
+    <Container $optColor={props.isSelected} $simple={props.simple} className={props.className}>
       <AntdCollapse
         ghost
         expandIcon={getExpandIcon}
diff --git a/client/packages/lowcoder-design/src/components/CustomModal.tsx b/client/packages/lowcoder-design/src/components/CustomModal.tsx
index 54bb8389aa..ac513ea980 100644
--- a/client/packages/lowcoder-design/src/components/CustomModal.tsx
+++ b/client/packages/lowcoder-design/src/components/CustomModal.tsx
@@ -1,5 +1,5 @@
-import { ButtonProps, Modal as AntdModal } from "antd";
-import { ModalFuncProps, ModalProps as AntdModalProps } from "antd/lib/modal";
+import { ButtonProps } from "antd/es/button";
+import { default as AntdModal, ModalFuncProps, ModalProps as AntdModalProps } from "antd/es/modal";
 import { ReactComponent as PackUpIcon } from "icons/icon-Pack-up.svg";
 import React, { ReactNode, useState } from "react";
 import styled from "styled-components";
@@ -11,7 +11,7 @@ import { trans } from "i18n/design";
 import { modalInstance } from "components/GlobalInstances";
 
 type ModalWrapperProps = {
-  width?: string | number;
+  $width?: string | number;
 };
 
 type Model = {
@@ -22,7 +22,7 @@ type Model = {
 const ModalWrapper = styled.div<ModalWrapperProps>`
   display: flex;
   flex-direction: column;
-  width: ${(props) => (props.width ? props.width : "368px")};
+  width: ${(props) => (props.$width ? props.$width : "368px")};
   height: fit-content;
   background: #ffffff;
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
@@ -217,7 +217,7 @@ const DEFAULT_PROPS = {
 function CustomModalRender(props: CustomModalProps & ModalFuncProps) {
   return (
     <Draggable handle=".handle" disabled={!props.draggable}>
-      <ModalWrapper width={props.width}>
+      <ModalWrapper $width={props.width}>
         <>
           <ModalHeaderWrapper className="handle" $draggable={props.draggable}>
             <ModalHeader
diff --git a/client/packages/lowcoder-design/src/components/Drawer.tsx b/client/packages/lowcoder-design/src/components/Drawer.tsx
index 4bd9449b00..89b152a64d 100644
--- a/client/packages/lowcoder-design/src/components/Drawer.tsx
+++ b/client/packages/lowcoder-design/src/components/Drawer.tsx
@@ -1,4 +1,4 @@
-import { Drawer as AntdDrawer, DrawerProps as AntdDrawerProps } from "antd";
+import { default as AntdDrawer, DrawerProps as AntdDrawerProps } from "antd/es/drawer";
 import Handle from "./Modal/handler";
 import { useEffect, useMemo, useState } from "react";
 import { Resizable, ResizeHandle } from "react-resizable";
diff --git a/client/packages/lowcoder-design/src/components/Dropdown.tsx b/client/packages/lowcoder-design/src/components/Dropdown.tsx
index e8d879cfb1..2dc6675a2f 100644
--- a/client/packages/lowcoder-design/src/components/Dropdown.tsx
+++ b/client/packages/lowcoder-design/src/components/Dropdown.tsx
@@ -1,4 +1,5 @@
-import { Segmented as AntdSegmented, SelectProps } from "antd";
+import { default as AntdSegmented } from "antd/es/segmented";
+import { SelectProps } from "antd/es/select";
 import { GreyTextColor } from "constants/style";
 import _ from "lodash";
 import { ReactNode } from "react";
@@ -10,11 +11,11 @@ import { Tooltip, ToolTipLabel } from "./toolTip";
 
 type ControlPlacement = "bottom" | "right" | "modal";
 
-export const DropdownContainer = styled.div<{ placement: ControlPlacement }>`
+export const DropdownContainer = styled.div<{ $placement: ControlPlacement }>`
   display: flex;
   height: 32px;
   width: ${(props) =>
-    props.placement === "right"
+    props.$placement === "right"
       ? "calc(100% - 96px)"
       : "bottom"
       ? "calc(100% - 112px)"
@@ -35,18 +36,18 @@ export const DropdownContainer = styled.div<{ placement: ControlPlacement }>`
   }
 
   > div {
-    width: 100%;
+    width: 100% !important;
   }
 
   ${(props) =>
-    props.placement === "bottom" &&
+    props.$placement === "bottom" &&
     `
     > div {
       width: 184px;
       flex-grow: 1;
     }
     
-    ::after {
+    &::after {
       content: "";
       width: 264px;
       flex-grow: 1;
@@ -60,21 +61,21 @@ const DropDownItemLabel = styled.div`
   line-height: 15px;
 `;
 
-const SegmentedWrapper = styled.div<{ placement: ControlPlacement }>`
+const SegmentedWrapper = styled.div<{ $placement: ControlPlacement }>`
   display: flex;
   height: 28px;
-  width: ${(props) => (props.placement === "right" ? "calc(100% - 96px)" : "100% - 112px")};
+  width: ${(props) => (props.$placement === "right" ? "calc(100% - 96px)" : "100% - 112px")};
   flex-grow: 1;
 
   ${(props) =>
-    props.placement === "bottom" &&
+    props.$placement === "bottom" &&
     `
     > div {
       width: 184px;
       flex-grow: 1;
     }
     
-    ::after {
+    &::after {
       content: "";
       width: 264px;
       flex-grow: 1;
@@ -120,9 +121,9 @@ const FlexDiv = styled.div`
   align-items: center;
 `;
 
-const LabelWrapper = styled.div<{ placement: ControlPlacement }>`
+const LabelWrapper = styled.div<{ $placement: ControlPlacement }>`
   flex-shrink: 0;
-  width: ${(props) => (props.placement === "right" ? "96px" : "bottom" ? "112px" : "136px")};
+  width: ${(props) => (props.$placement === "right" ? "96px" : "bottom" ? "112px" : "136px")};
 `;
 
 export type OptionType = {
@@ -159,14 +160,14 @@ export function Dropdown<T extends OptionsType>(props: DropdownProps<T>) {
   return (
     <FlexDiv style={props.style} className={props.className}>
       {props.label && (
-        <LabelWrapper placement={placement} style={props.labelStyle}>
+        <LabelWrapper $placement={placement} style={props.labelStyle}>
           <ToolTipLabel title={props.toolTip} label={props.label} />
         </LabelWrapper>
       )}
 
       {!props.radioButton && (
         <Tooltip title={!props.label ? props.toolTip : undefined}>
-          <DropdownContainer placement={placement} style={props.dropdownStyle}>
+          <DropdownContainer $placement={placement} style={props.dropdownStyle}>
             <CustomSelect
               open={props.open}
               listHeight={props.lineHeight}
@@ -231,7 +232,7 @@ export function Dropdown<T extends OptionsType>(props: DropdownProps<T>) {
       )}
 
       {props.radioButton && (
-        <SegmentedWrapper placement={placement}>
+        <SegmentedWrapper $placement={placement}>
           <Segmented
             block={true}
             onChange={(value) => props.onChange(value.toString())}
diff --git a/client/packages/lowcoder-design/src/components/ExternalLink.tsx b/client/packages/lowcoder-design/src/components/ExternalLink.tsx
index d496a497ee..51fcb3c8ed 100644
--- a/client/packages/lowcoder-design/src/components/ExternalLink.tsx
+++ b/client/packages/lowcoder-design/src/components/ExternalLink.tsx
@@ -9,7 +9,7 @@ export const ExternalLink = styled.a`
   display: inline-flex;
   align-items: center;
 
-  :hover {
+  &:hover {
     color: ${ActiveTextColor};
   }
 `;
diff --git a/client/packages/lowcoder-design/src/components/Input.tsx b/client/packages/lowcoder-design/src/components/Input.tsx
index 68b949e1ea..7fb9ced59a 100644
--- a/client/packages/lowcoder-design/src/components/Input.tsx
+++ b/client/packages/lowcoder-design/src/components/Input.tsx
@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { Input as AntdInput, InputProps as AntdInputProps, InputRef } from "antd";
+import { default as AntdInput, InputProps as AntdInputProps, InputRef } from "antd/es/input";
 import { BorderActiveColor, BorderColor, BorderRadius, GreyTextColor } from "constants/style";
 import { ChangeEvent, useEffect, useRef, useState } from "react";
 import _ from "lodash";
diff --git a/client/packages/lowcoder-design/src/components/Label.tsx b/client/packages/lowcoder-design/src/components/Label.tsx
index c07eed08a5..0ec5cce40b 100644
--- a/client/packages/lowcoder-design/src/components/Label.tsx
+++ b/client/packages/lowcoder-design/src/components/Label.tsx
@@ -7,7 +7,7 @@ export const labelCss: any = css`
   font-size: 13px;
   color: #222222;
 
-  :hover {
+  &:hover {
     cursor: default;
   }
 `;
@@ -67,21 +67,21 @@ export const BlockLabel = (props: IBlocklabel) => {
 
 // Title text in each line of Collapse
 const LeftTitle = styled.span<{
-  color?: string;
-  line?: number;
-  hasChild?: boolean;
+  $color?: string;
+  $line?: number;
+  $hasChild?: boolean;
 }>`
   word-wrap: break-word;
   word-break: break-all;
   white-space: pre-wrap;
   user-select: none;
   font-size: 13px;
-  line-height: ${(props) => (props.line ? props.line : 23)}px;
-  color: ${(props) => (props.color ? props.color : "#333333")};
+  line-height: ${(props) => (props.$line ? props.$line : 23)}px;
+  color: ${(props) => (props.$color ? props.$color : "#333333")};
   margin-right: 8px;
-  font-weight: ${(props) => (props.hasChild ? "600" : "normal")};
+  font-weight: ${(props) => (props.$hasChild ? "600" : "normal")};
 
-  :hover {
+  &:hover {
     cursor: pointer;
   }
 `;
@@ -97,7 +97,7 @@ interface ICollapseTitle {
 export const CollapseTitle = (props: ICollapseTitle) => {
   const { color, label, lineHeight, hasChild } = props;
   return (
-    <LeftTitle style={props.style} color={color} line={lineHeight} hasChild={hasChild}>
+    <LeftTitle style={props.style} $color={color} $line={lineHeight} $hasChild={hasChild}>
       {label}
     </LeftTitle>
   );
@@ -140,16 +140,16 @@ export const CommonGrayLabel = styled.p`
   margin: 0;
 `;
 
-export const CommonErrorLabel = styled.p<{ fontSize?: number }>`
-  font-size: ${(props) => (props.fontSize ? props.fontSize : 12)}px;
-  line-height: ${(props) => (props.fontSize ? props.fontSize : 12)}px;
+export const CommonErrorLabel = styled.p<{ $fontSize?: number }>`
+  font-size: ${(props) => (props.$fontSize ? props.$fontSize : 12)}px;
+  line-height: ${(props) => (props.$fontSize ? props.$fontSize : 12)}px;
   color: #f73131;
   margin: 0;
 `;
 
 export const CommonBlueLabel = styled.span`
   ${labelCss}
-  :hover {
+  &:hover {
     cursor: pointer;
   }
 
diff --git a/client/packages/lowcoder-design/src/components/Loading.tsx b/client/packages/lowcoder-design/src/components/Loading.tsx
index 97adc72329..21718bd07b 100644
--- a/client/packages/lowcoder-design/src/components/Loading.tsx
+++ b/client/packages/lowcoder-design/src/components/Loading.tsx
@@ -2,9 +2,9 @@ import styled, { css } from "styled-components";
 import { CSSProperties } from "react";
 
 type LoadingContainerProps = {
-  backgroundColor: string;
-  color: string;
-  size: number;
+  $backgroundColor: string;
+  $color: string;
+  $size: number;
 };
 
 const LoadingWrapper = styled.div`
@@ -16,8 +16,8 @@ const LoadingWrapper = styled.div`
 
 // Loading
 const ContainerX = styled.div<LoadingContainerProps>`
-  height: ${(props) => props.size}px;
-  width: ${(props) => props.size}px;
+  height: ${(props) => props.$size}px;
+  width: ${(props) => props.$size}px;
   animation: circle infinite 1.75s linear;
   @keyframes circle {
     0% {
@@ -29,14 +29,14 @@ const ContainerX = styled.div<LoadingContainerProps>`
   }
 `;
 const Container = styled.div<LoadingContainerProps>`
-  height: ${(props) => props.size / 2}px;
-  width: ${(props) => props.size}px;
-  background-color: ${(props) => props.backgroundColor};
+  height: ${(props) => props.$size / 2}px;
+  width: ${(props) => props.$size}px;
+  background-color: ${(props) => props.$backgroundColor};
   overflow: hidden;
 `;
 const loadcss = css<LoadingContainerProps>`
-  width: ${(props) => props.size}px;
-  height: ${(props) => props.size}px;
+  width: ${(props) => props.$size}px;
+  height: ${(props) => props.$size}px;
   border: solid 2.5px transparent;
   border-radius: 999px;
   background-origin: border-box;
@@ -46,19 +46,19 @@ const loadcss = css<LoadingContainerProps>`
 const Load1 = styled.div<LoadingContainerProps>`
   ${loadcss};
   background-image: linear-gradient(
-      ${(props) => props.backgroundColor},
-      ${(props) => props.backgroundColor}
+      ${(props) => props.$backgroundColor},
+      ${(props) => props.$backgroundColor}
     ),
-    linear-gradient(to left, ${(props) => props.color}, ${(props) => props.color}91);
+    linear-gradient(to left, ${(props) => props.$color}, ${(props) => props.$color}91);
 `;
 const Load2 = styled.div<LoadingContainerProps>`
   ${loadcss};
-  transform: translateY(-${(props) => props.size / 2}px);
+  transform: translateY(-${(props) => props.$size / 2}px);
   background-image: linear-gradient(
-      ${(props) => props.backgroundColor},
-      ${(props) => props.backgroundColor}
+      ${(props) => props.$backgroundColor},
+      ${(props) => props.$backgroundColor}
     ),
-    linear-gradient(to right, ${(props) => props.color}a3, ${(props) => props.color}1a);
+    linear-gradient(to right, ${(props) => props.$color}a3, ${(props) => props.$color}1a);
 `;
 
 type LoadingProps = {
@@ -71,9 +71,9 @@ type LoadingProps = {
 
 export const Loading = (props: LoadingProps) => {
   const loadingProps = {
-    backgroundColor: props.backgroundColor ?? "#315efb",
-    color: props.color ?? "#ffffff",
-    size: props.size ?? 14,
+    $backgroundColor: props.backgroundColor ?? "#315efb",
+    $color: props.color ?? "#ffffff",
+    $size: props.size ?? 14,
   };
   return (
     <LoadingWrapper className={props.className} style={props.style}>
diff --git a/client/packages/lowcoder-design/src/components/Menu.tsx b/client/packages/lowcoder-design/src/components/Menu.tsx
index 9fdfd79460..704c28d6be 100644
--- a/client/packages/lowcoder-design/src/components/Menu.tsx
+++ b/client/packages/lowcoder-design/src/components/Menu.tsx
@@ -1,4 +1,4 @@
-import { Menu as AntdMenu, MenuProps, SubMenuProps } from "antd";
+import { default as AntdMenu, MenuProps, SubMenuProps } from "antd/es/menu";
 import { NormalMenuIconColor, TabActiveColor } from "constants/style";
 import { ReactComponent as AddIcon } from "icons/icon-add.svg";
 import { ReactComponent as RecycleBinIcon } from "icons/icon-recycle-bin.svg";
@@ -107,7 +107,7 @@ const StyledCreateBtn = styled.button`
   cursor: pointer;
   height: 40px;
 
-  :hover {
+  &:hover {
     color: #315efb;
 
     svg g path {
diff --git a/client/packages/lowcoder-design/src/components/MenuItem.tsx b/client/packages/lowcoder-design/src/components/MenuItem.tsx
index 077a176357..9510c13d92 100644
--- a/client/packages/lowcoder-design/src/components/MenuItem.tsx
+++ b/client/packages/lowcoder-design/src/components/MenuItem.tsx
@@ -4,14 +4,14 @@ import { PointIcon, DragIcon, PencilIcon } from "icons";
 import { labelCss } from "./Label";
 
 interface IItem {
-  width?: number;
-  colorChange?: number;
+  $width?: number;
+  $colorChange?: number;
 }
 const Item = styled.div<IItem>`
-  width: ${(props) => (props.width ? props.width : 280)}px;
+  width: ${(props) => (props.$width ? props.$width : 280)}px;
   height: 32px;
   background: #f5f5f6;
-  background: ${(props) => (props.colorChange ? "#E1E3EB" : "#f5f5f6")};
+  background: ${(props) => (props.$colorChange ? "#E1E3EB" : "#f5f5f6")};
   border-radius: 4px;
   float: right;
   margin-right: 16px;
@@ -22,7 +22,7 @@ const IconCss = css`
   height: 16px;
   width: 16px;
   color: #8b8fa3;
-  :hover {
+  &:hover {
     cursor: pointer;
   }
 `;
@@ -49,7 +49,7 @@ interface IMenuItem {
 export const MenuItem = (props: IMenuItem) => {
   const { label, width, colorChange } = props;
   return (
-    <Item width={width} colorChange={colorChange}>
+    <Item $width={width} $colorChange={colorChange}>
       <StyledDragIcon />
       <Text>{label}</Text>
     </Item>
diff --git a/client/packages/lowcoder-design/src/components/Modal/handler.tsx b/client/packages/lowcoder-design/src/components/Modal/handler.tsx
index 8b22b96e30..c5c293ca31 100644
--- a/client/packages/lowcoder-design/src/components/Modal/handler.tsx
+++ b/client/packages/lowcoder-design/src/components/Modal/handler.tsx
@@ -26,9 +26,9 @@ const EdgeHandle = css`
   }
 `;
 
-const HorizontalHandle = css<{ axis: string }>`
+const HorizontalHandle = css<{ $axis: string }>`
   ${EdgeHandle}
-  ${(props) => (props.axis === "s" ? "bottom: -10px;" : "top: -10px;")}
+  ${(props) => (props.$axis === "s" ? "bottom: -10px;" : "top: -10px;")}
   /* left: -4px; */
   height: 12px !important;
   /* width: calc(100% + 8px) !important; */
@@ -42,9 +42,9 @@ const HorizontalHandle = css<{ axis: string }>`
   }
 `;
 
-const VerticalHandleStyles = css<{ axis: string }>`
+const VerticalHandleStyles = css<{ $axis: string }>`
   ${EdgeHandle}
-  ${(props) => (props.axis === "e" ? "right: -10px;" : "left: -10px;")}
+  ${(props) => (props.$axis === "e" ? "right: -10px;" : "left: -10px;")}
   width: 12px !important;
   top: 0px;
   /* height: calc(100% + 8px) !important; */
@@ -58,7 +58,7 @@ const VerticalHandleStyles = css<{ axis: string }>`
   }
 `;
 
-const CornerHandle = css<{ axis: string }>`
+const CornerHandle = css<{ $axis: string }>`
   position: absolute;
   z-index: 3;
   width: 10px !important;
@@ -68,23 +68,23 @@ const CornerHandle = css<{ axis: string }>`
     height: 10px !important;
     border: none !important;
   }
-  cursor: ${(props) => props.axis + "-resize"} !important;
-  ${(props) => (["nw", "ne"].indexOf(props.axis) >= 0 ? "top: -5px;" : "")};
-  ${(props) => (["sw", "se"].indexOf(props.axis) >= 0 ? "bottom: -5px;" : "")};
-  ${(props) => (["sw", "nw"].indexOf(props.axis) >= 0 ? "left: -5px;" : "")};
-  ${(props) => (["se", "ne"].indexOf(props.axis) >= 0 ? "right: -5px;" : "")};
+  cursor: ${(props) => props.$axis + "-resize"} !important;
+  ${(props) => (["nw", "ne"].indexOf(props.$axis) >= 0 ? "top: -5px;" : "")};
+  ${(props) => (["sw", "se"].indexOf(props.$axis) >= 0 ? "bottom: -5px;" : "")};
+  ${(props) => (["sw", "nw"].indexOf(props.$axis) >= 0 ? "left: -5px;" : "")};
+  ${(props) => (["se", "ne"].indexOf(props.$axis) >= 0 ? "right: -5px;" : "")};
 `;
 
-const ResizeHandle = styled.div<{ axis: string }>`
+const ResizeHandle = styled.div<{ $axis: string }>`
   position: absolute;
   background-image: none;
-  ${(props) => (["s", "n"].indexOf(props.axis) >= 0 ? HorizontalHandle : "")};
-  ${(props) => (["w", "e"].indexOf(props.axis) >= 0 ? VerticalHandleStyles : "")};
-  ${(props) => (["sw", "nw", "se", "ne"].indexOf(props.axis) >= 0 ? CornerHandle : "")};
+  ${(props) => (["s", "n"].indexOf(props.$axis) >= 0 ? HorizontalHandle : "")};
+  ${(props) => (["w", "e"].indexOf(props.$axis) >= 0 ? VerticalHandleStyles : "")};
+  ${(props) => (["sw", "nw", "se", "ne"].indexOf(props.$axis) >= 0 ? CornerHandle : "")};
 `;
 
 const Handle = (axis: ResizeHandleAxis, ref: ReactRef<HTMLDivElement>) => {
-  return <ResizeHandle ref={ref} axis={axis} className={`react-resizable-handle`}></ResizeHandle>;
+  return <ResizeHandle ref={ref} $axis={axis} className={`react-resizable-handle`}></ResizeHandle>;
 };
 
 export default Handle;
diff --git a/client/packages/lowcoder-design/src/components/Modal/index.tsx b/client/packages/lowcoder-design/src/components/Modal/index.tsx
index 91f35b88e9..1677bcb9bc 100644
--- a/client/packages/lowcoder-design/src/components/Modal/index.tsx
+++ b/client/packages/lowcoder-design/src/components/Modal/index.tsx
@@ -1,4 +1,4 @@
-import { Modal as AntdModal, ModalProps as AntdModalProps } from "antd";
+import { default as AntdModal, ModalProps as AntdModalProps } from "antd/es/modal";
 import { useEffect, useState } from "react";
 import { Resizable, ResizeHandle } from "react-resizable";
 import { useResizeDetector } from "react-resize-detector";
diff --git a/client/packages/lowcoder-design/src/components/Search.tsx b/client/packages/lowcoder-design/src/components/Search.tsx
index 2e97e8e98d..05249e3c12 100644
--- a/client/packages/lowcoder-design/src/components/Search.tsx
+++ b/client/packages/lowcoder-design/src/components/Search.tsx
@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { Input, InputProps } from "antd";
+import { default as Input, InputProps } from "antd/es/input";
 import { ReactComponent as Icon } from "icons/icon-Search.svg";
 import React, { CSSProperties } from "react";
 
@@ -14,7 +14,7 @@ const SearchInput = styled(Input)`
   user-select: none;
   overflow: hidden;
 
-  :focus {
+  &:focus {
     outline: none;
     box-shadow: 0 0 0 3px #daecfc;
   }
diff --git a/client/packages/lowcoder-design/src/components/Section.tsx b/client/packages/lowcoder-design/src/components/Section.tsx
index e1c019bde8..869c0eabfe 100644
--- a/client/packages/lowcoder-design/src/components/Section.tsx
+++ b/client/packages/lowcoder-design/src/components/Section.tsx
@@ -5,8 +5,8 @@ import { ReactComponent as Packup } from "icons/icon-Pack-up.svg";
 import { labelCss } from "./Label";
 import { controlItem, ControlNode } from "./control";
 
-const SectionItem = styled.div<{ width?: number }>`
-  width: ${(props) => (props.width ? props.width : 312)}px;
+const SectionItem = styled.div<{ $width?: number }>`
+  width: ${(props) => (props.$width ? props.$width : 312)}px;
   border-bottom: 1px solid #e1e3eb;
 
   &:last-child {
@@ -21,7 +21,7 @@ const SectionLabel = styled.div`
   line-height: 46px;
   font-weight: 600;
 
-  :hover {
+  &:hover {
     cursor: pointer;
   }
 `;
@@ -39,7 +39,7 @@ const PackupIcon = styled(Packup)<Irotate>`
   color: #8b8fa3;
   transform: ${(props) => props.deg};
 
-  :hover {
+  &:hover {
     cursor: pointer;
   }
 `;
@@ -50,7 +50,7 @@ const SectionLabelDiv = styled.div`
   height: 46px;
   margin-left: 16px;
 
-  :hover {
+  &:hover {
     cursor: pointer;
   }
 
@@ -63,14 +63,14 @@ const SectionLabelDiv = styled.div`
   }
 `;
 
-const ShowChildren = styled.div<{ show?: string; noMargin?: boolean }>`
-  display: ${(props) => props.show || "none"};
+const ShowChildren = styled.div<{ $show?: string; $noMargin?: boolean }>`
+  display: ${(props) => props.$show || "none"};
   flex-direction: column;
   gap: 8px;
   transition: all 3s;
-  margin-left: ${(props) => (props.noMargin ? 0 : 16)}px;
+  margin-left: ${(props) => (props.$noMargin ? 0 : 16)}px;
   padding-bottom: 16px;
-  padding-right: ${(props) => (props.noMargin ? 0 : "16px")};
+  padding-right: ${(props) => (props.$noMargin ? 0 : "16px")};
 `;
 
 interface ISectionConfig<T> {
@@ -113,7 +113,7 @@ export const BaseSection = (props: ISectionConfig<ReactNode>) => {
   };
 
   return (
-    <SectionItem width={props.width} style={props.style}>
+    <SectionItem $width={props.width} style={props.style}>
       {props.name && (
         <SectionLabelDiv onClick={handleToggle} className={"section-header"}>
           <SectionLabel>{props.name}</SectionLabel>
@@ -123,7 +123,7 @@ export const BaseSection = (props: ISectionConfig<ReactNode>) => {
           </div>
         </SectionLabelDiv>
       )}
-      <ShowChildren show={open ? "flex" : "none"} noMargin={props.noMargin}>
+      <ShowChildren $show={open ? "flex" : "none"} $noMargin={props.noMargin}>
         {props.children}
       </ShowChildren>
     </SectionItem>
diff --git a/client/packages/lowcoder-design/src/components/SuspensionBox.tsx b/client/packages/lowcoder-design/src/components/SuspensionBox.tsx
index d1a6663401..d62ed39a45 100644
--- a/client/packages/lowcoder-design/src/components/SuspensionBox.tsx
+++ b/client/packages/lowcoder-design/src/components/SuspensionBox.tsx
@@ -2,8 +2,8 @@ import styled from "styled-components";
 import { ReactComponent as close } from "icons/icon-flokclose.svg";
 import { ScrollBar } from "../components/ScrollBar";
 
-const Container = styled.div<{ width: number }>`
-  width: ${(props) => props.width}px;
+const Container = styled.div<{ $width: number }>`
+  width: ${(props) => props.$width}px;
   background: #ffffff;
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
   border-radius: 8px;
@@ -24,7 +24,7 @@ const CloseIcon = styled(close)`
   padding: 1px;
   color: #8b8fa3;
 
-  :hover {
+  &:hover {
     cursor: pointer;
   }
 
@@ -75,7 +75,7 @@ export const SuspensionBox = (props: Iprops) => {
     scrollable,
   } = props;
   return (
-    <Container width={width}>
+    <Container $width={width}>
       <TitleDiv>
         <TitleText>{title}</TitleText>
         {onClose && <CloseIcon onClick={onClose} />}
diff --git a/client/packages/lowcoder-design/src/components/Switch.tsx b/client/packages/lowcoder-design/src/components/Switch.tsx
index 09946f7aee..05f5b25772 100644
--- a/client/packages/lowcoder-design/src/components/Switch.tsx
+++ b/client/packages/lowcoder-design/src/components/Switch.tsx
@@ -27,20 +27,20 @@ const SwitchStyle: any = styled.input`
   transform: translateY(0);
   /* transition: all 0.4s ease; */
 
-  :hover {
+  &:hover {
     cursor: pointer;
   }
 
-  :checked {
+  &:checked {
     border-color: #636775;
     background-color: #636775;
   }
 
-  :checked::before {
+  &:checked::before {
     left: 10px;
   }
 
-  ::before {
+  &::before {
     content: "";
     left: 0;
     transition: left 0.4s;
@@ -55,13 +55,13 @@ const SwitchStyle: any = styled.input`
 `;
 
 const SwitchDiv = styled.div<{
-  placement?: ControlPlacement;
+  $placement?: ControlPlacement;
 }>`
   min-height: 21px;
   display: flex;
   align-items: center;
   ${(props) => {
-    if (props.placement === "bottom") {
+    if (props.$placement === "bottom") {
       return css`
         margin-left: 112px;
       `;
@@ -82,7 +82,7 @@ const IconCss = css`
   width: 20px;
   margin-top: 1px;
 
-  :hover {
+  &:hover {
     cursor: pointer;
   }
 
@@ -137,7 +137,7 @@ export const SwitchWrapper = (props: {
   const tooltip = props.tooltip;
   const label = props.label;
   return (
-    <SwitchDiv placement={props.placement}>
+    <SwitchDiv $placement={props.placement}>
       {props.children}
       {label ? (
         <LabelDiv>
diff --git a/client/packages/lowcoder-design/src/components/Tab.tsx b/client/packages/lowcoder-design/src/components/Tab.tsx
index 0ac9c88fa0..0c9df3216d 100644
--- a/client/packages/lowcoder-design/src/components/Tab.tsx
+++ b/client/packages/lowcoder-design/src/components/Tab.tsx
@@ -15,7 +15,7 @@ const IconCss = css`
   margin-bottom: 12px;
 `;
 
-const IconAndName = styled.div<{ isActive: boolean }>`
+const IconAndName = styled.div<{ $isActive: boolean }>`
   padding: 0;
   display: inline-block;
   margin-left: 17px;
@@ -24,7 +24,7 @@ const IconAndName = styled.div<{ isActive: boolean }>`
   vertical-align: top;
   height: 40px;
   transition: all 0.2s ease;
-  border-bottom: 2px solid ${(props) => (props.isActive ? "#222222" : "transparent")};
+  border-bottom: 2px solid ${(props) => (props.$isActive ? "#222222" : "transparent")};
 
   &:hover path {
     transition: all 0.2s ease;
@@ -40,13 +40,13 @@ const IconAndName = styled.div<{ isActive: boolean }>`
     ${IconCss};
 
     path {
-      fill: ${(props) => (props.isActive ? "#222222" : "#8b8fa3")};
+      fill: ${(props) => (props.$isActive ? "#222222" : "#8b8fa3")};
     }
   }
 `;
 
 const Text = styled.p<{
-  color: string;
+  $color: string;
 }>`
   user-select: none;
   display: inline-block;
@@ -56,7 +56,7 @@ const Text = styled.p<{
   line-height: 40px;
   margin-left: 5px;
   margin-bottom: 0;
-  color: ${(props) => props.color || "#222222"};
+  color: ${(props) => props.$color || "#222222"};
   vertical-align: top;
 `;
 
@@ -89,9 +89,9 @@ const Tabs = (props: ITabs) => {
         {props.tabsConfig.map((tab) => {
           const isActive = activeTab.key === tab.key;
           return (
-            <IconAndName key={tab.key} onClick={() => onChange(tab.key)} isActive={isActive}>
+            <IconAndName key={tab.key} onClick={() => onChange(tab.key)} $isActive={isActive}>
               {tab.icon}
-              <Text color={isActive ? "#222222" : "#8b8fa3"}>{tab.title}</Text>
+              <Text $color={isActive ? "#222222" : "#8b8fa3"}>{tab.title}</Text>
             </IconAndName>
           );
         })}
diff --git a/client/packages/lowcoder-design/src/components/Table.tsx b/client/packages/lowcoder-design/src/components/Table.tsx
index f3f9f35c40..82b38bf0b2 100644
--- a/client/packages/lowcoder-design/src/components/Table.tsx
+++ b/client/packages/lowcoder-design/src/components/Table.tsx
@@ -1,4 +1,4 @@
-import { Table } from "antd";
+import { default as Table } from "antd/es/table";
 import styled from "styled-components";
 
 const { Column } = Table;
diff --git a/client/packages/lowcoder-design/src/components/alert.tsx b/client/packages/lowcoder-design/src/components/alert.tsx
index 591f926b2c..bbc24b4372 100644
--- a/client/packages/lowcoder-design/src/components/alert.tsx
+++ b/client/packages/lowcoder-design/src/components/alert.tsx
@@ -1,4 +1,4 @@
-import { Alert as AntAlert, AlertProps } from "antd";
+import { default as AntAlert, AlertProps } from "antd/es/alert";
 import styled from "styled-components";
 
 const Container = styled.div`
diff --git a/client/packages/lowcoder-design/src/components/button.tsx b/client/packages/lowcoder-design/src/components/button.tsx
index a159ecae71..0001442b64 100644
--- a/client/packages/lowcoder-design/src/components/button.tsx
+++ b/client/packages/lowcoder-design/src/components/button.tsx
@@ -1,6 +1,6 @@
-import { Button, ButtonProps } from "antd";
+import Button, { ButtonProps } from "antd/es/button";
 import styled, { css } from "styled-components";
-import { LightLoading, Loading } from "./Loading";
+import { Loading } from "./Loading";
 import * as React from "react";
 import { CSSProperties, forwardRef } from "react";
 
@@ -12,13 +12,13 @@ const buttonStyleConfig = {
     color: #333333;
     /* padding: 4px; */
 
-    :focus {
+    &:focus {
       background: #f5f5f6;
       border: 1px solid #d7d9e0;
       color: #333333;
     }
 
-    :hover {
+    &:hover {
       background: #f5f5f6;
       border: 1px solid #d7d9e0;
       color: #333333;
@@ -35,33 +35,33 @@ const buttonStyleConfig = {
         color: #4965f2;
         border-color: #c9d1fc;
 
-        :hover {
+        &:hover {
           color: #315efb;
           background-color: #f5faff;
           border-color: #c2d6ff;
         }
 
-        :focus {
+        &:focus {
           color: #315efb;
           background-color: #f5faff;
           border-color: #c2d6ff;
         }
       }
 
-      :focus {
+      &:focus {
         background: #4965f2;
         border: 1px solid #4965f2;
         color: #ffffff;
       }
 
-      :hover {
+      &:hover {
         border: 1px solid #315efb;
         background: #315efb;
         color: #ffffff;
       }
 
       :disabled {
-        :hover {
+        &:hover {
           border: 1px solid #dbe1fd;
           background: #dbe1fd;
           color: #ffffff;
@@ -80,13 +80,13 @@ const buttonStyleConfig = {
     color: #4965f2;
     border-color: #c9d1fc;
 
-    :hover {
+    &:hover {
       color: #315efb;
       background-color: #f5faff;
       border-color: #c2d6ff;
     }
 
-    :focus {
+    &:focus {
       color: #315efb;
       background-color: #f5faff;
       border-color: #c2d6ff;
@@ -277,7 +277,7 @@ const StyledAddButton = styled.button`
   user-select: none;
   padding: 0;
 
-  :hover {
+  &:hover {
     color: #315efb;
     background: white;
 
@@ -286,7 +286,7 @@ const StyledAddButton = styled.button`
     }
   }
 
-  :focus {
+  &:focus {
     background: white;
     color: #315efb;
   }
diff --git a/client/packages/lowcoder-design/src/components/checkBox.tsx b/client/packages/lowcoder-design/src/components/checkBox.tsx
index 555b8c49ca..8c1c8e5167 100644
--- a/client/packages/lowcoder-design/src/components/checkBox.tsx
+++ b/client/packages/lowcoder-design/src/components/checkBox.tsx
@@ -1,4 +1,4 @@
-import { Checkbox as AntdCheckBox } from "antd";
+import { default as AntdCheckBox } from "antd/es/checkbox";
 import styled from "styled-components";
 
 const CheckBox = styled(AntdCheckBox)`
diff --git a/client/packages/lowcoder-design/src/components/colorSelect/index.tsx b/client/packages/lowcoder-design/src/components/colorSelect/index.tsx
index 71339c86f9..8e44156769 100644
--- a/client/packages/lowcoder-design/src/components/colorSelect/index.tsx
+++ b/client/packages/lowcoder-design/src/components/colorSelect/index.tsx
@@ -1,5 +1,5 @@
 import { RgbaStringColorPicker } from "react-colorful";
-import { Popover } from "antd";
+import { default as Popover } from "antd/es/popover";
 import { ActionType } from '@rc-component/trigger/lib/interface';
 import {
   alphaOfRgba,
@@ -45,7 +45,7 @@ export const ColorSelect = (props: ColorSelectProps) => {
           <div style={{ position: "relative" }}>
             <RgbaStringColorPicker color={pickerColor.current} onChange={throttleChange} />
             <AlphaDiv color={color?.substring(0, 7)}>
-              <BackDiv color={alphaOfRgba(toRGBA(color))}></BackDiv>
+              <BackDiv $color={alphaOfRgba(toRGBA(color))}></BackDiv>
             </AlphaDiv>
           </div>
           <ConstantDiv>
@@ -65,8 +65,8 @@ export const ColorSelect = (props: ColorSelectProps) => {
         </PopoverContainer>
       }
     >
-      <ColorBlock color={color?.substring(0, 7)}>
-        <BackDiv color={alphaOfRgba(toRGBA(color))}></BackDiv>
+      <ColorBlock $color={color?.substring(0, 7)}>
+        <BackDiv $color={alphaOfRgba(toRGBA(color))}></BackDiv>
       </ColorBlock>
     </Popover>
   );
@@ -80,7 +80,7 @@ const ConstantDiv = styled.div`
   flex-wrap: wrap;
 `;
 const ConstantBlock = styled.div.attrs<{ color: string }>((props) => ({
-  tabIndex: "0",
+  tabIndex: 0,
   style: {
     backgroundColor: props.color,
   },
@@ -159,9 +159,9 @@ const AlphaDiv = styled.div.attrs((props) => ({
   background-clip: content-box;
 `;
 
-const BackDiv = styled.div.attrs<{ color: string }>((props: { color: string }) => ({
+const BackDiv = styled.div.attrs<{ $color: string }>((props: { $color: string }) => ({
   style: {
-    opacity: 1 - parseFloat(props.color ? props.color : "1"),
+    opacity: 1 - parseFloat(props.$color ? props.$color : "1"),
   },
 }))`
   height: 100%;
@@ -169,8 +169,8 @@ const BackDiv = styled.div.attrs<{ color: string }>((props: { color: string }) =
   background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8ZGVmcz4KICAgICAgICA8cGF0dGVybiBpZD0icGF0dGVybi0xIiBwYXR0ZXJuVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiB4PSIwJSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSI+CiAgICAgICAgICAgIDx1c2UgeGxpbms6aHJlZj0iI2ltYWdlLTIiIHRyYW5zZm9ybT0ic2NhbGUoMC41LDAuNSkiPjwvdXNlPgogICAgICAgIDwvcGF0dGVybj4KICAgICAgICA8aW1hZ2UgaWQ9ImltYWdlLTIiIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9wbmc7YmFzZTY0LGlWQk9SdzBLR2dvQUFBQU5TVWhFVWdBQUFEQUFBQUF3Q0FZQUFBQlhBdm1IQUFBQUFYTlNSMElBcnM0YzZRQUFBTE5KUkVGVWFBWHRtRUVLd3pBTUJPUCt5ZjkvZ0IvVjB1TWV4WkJ0QTVPYndKTGlHUXVNMTk3N2ZRMitjODRhTEwvdXJ2K2EvTXcvcm5VRHY3YWlBUTFBQWg0aENCQ25hd0FqaEFVZWIyQjByL25DdXZ0dU02My9lQU51QU00Z1R0Y0FSZ2dMYUFBQ3hPa2F3QWhoQVExQWdEaDlUZThldmd0aDVsbkFHVWdlL1VnRGZlYlpVUVBKb3g5cG9NODhPMm9nZWZRajM0WDZ6TE9qTTVBOCtwRUcrc3l6b3dhU1J6L1NRSjk1ZHRSQTh1aEhIeHRKRzVsckREVTlBQUFBQUVsRlRrU3VRbUNDIj48L2ltYWdlPgogICAgPC9kZWZzPgogICAgPGcgaWQ9Iumhtemdoi0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0i572R5qC85bqV6ImyIj4KICAgICAgICAgICAgPHBvbHlnb24gaWQ9Iue7hOS7ti3ovpPlhaXmoYYiIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iLTkuMjgyNTc3MzdlLTE1IDAgMjQgMCAyNCAyNCAtOS4yODI1NzczN2UtMTUgMjQiPjwvcG9seWdvbj4KICAgICAgICAgICAgPHBvbHlnb24gaWQ9Iue7hOS7ti3ovpPlhaXmoYYiIGZpbGwtb3BhY2l0eT0iMC4yIiBmaWxsPSJ1cmwoI3BhdHRlcm4tMSkiIHBvaW50cz0iLTkuMjgyNTc3MzdlLTE1IDAgMjQgMCAyNCAyNCAtOS4yODI1NzczN2UtMTUgMjQiPjwvcG9seWdvbj4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==");
 `;
 // main block
-const ColorBlock = styled.div<{ color: string }>`
-  background-color: ${(props) => (isValidColor(props.color) ? props.color : "#FFFFFF")};
+const ColorBlock = styled.div<{ $color: string }>`
+  background-color: ${(props) => (isValidColor(props.$color) ? props.color : "#FFFFFF")};
   border: 1px solid rgba(0, 0, 0, 0.1);
   border-radius: 4px;
   height: 24px;
diff --git a/client/packages/lowcoder-design/src/components/control.tsx b/client/packages/lowcoder-design/src/components/control.tsx
index fb9f2480e2..e8f1f4ca1c 100644
--- a/client/packages/lowcoder-design/src/components/control.tsx
+++ b/client/packages/lowcoder-design/src/components/control.tsx
@@ -15,17 +15,17 @@ type ControlPlacement = "bottom" | "right" | "modal"; // set propertyView's posi
 // place common comps of control comps
 
 const Wrapper = styled.div<{
-  layout: ControlLayout;
-  placement: ControlPlacement;
+  $layout: ControlLayout;
+  $placement: ControlPlacement;
 }>`
   width: 100%;
   ${(props) => {
-    switch (props.layout) {
+    switch (props.$layout) {
       case "horizontal":
         return css`
           display: flex;
           flex-direction: row;
-          align-items: ${props.placement === "bottom" ? "baseline" : "center"};
+          align-items: ${props.$placement === "bottom" ? "baseline" : "center"};
           justify-content: space-between;
         `;
       case "vertical":
@@ -57,15 +57,15 @@ function getWidth(placement: ControlPlacement) {
 }
 
 const LabelWrapper = styled.div<{
-  layout: ControlLayout;
-  placement: ControlPlacement;
-  labelEllipsis?: boolean;
+  $layout: ControlLayout;
+  $placement: ControlPlacement;
+  $labelEllipsis?: boolean;
 }>`
   ${(props) => {
-    switch (props.layout) {
+    switch (props.$layout) {
       case "horizontal":
         return css`
-          flex: 0 0 ${getWidth(props.placement)}px;
+          flex: 0 0 ${getWidth(props.$placement)}px;
         `;
       case "vertical":
         return css`
@@ -74,10 +74,10 @@ const LabelWrapper = styled.div<{
     }
   }}
   ${(props) => {
-    if (props.labelEllipsis && props.layout === "horizontal") {
+    if (props.$labelEllipsis && props.$layout === "horizontal") {
       return css`
         .tooltipLabel {
-          width: ${getWidth(props.placement)}px;
+          width: ${getWidth(props.$placement)}px;
           padding-right: 2px;
           text-overflow: ellipsis;
           overflow: hidden;
@@ -87,10 +87,10 @@ const LabelWrapper = styled.div<{
     }
   }}
 `;
-const ChildrenWrapper = styled.div<{ layout: ControlLayout }>`
+const ChildrenWrapper = styled.div<{ $layout: ControlLayout }>`
   min-width: 0;
   ${(props) => {
-    switch (props.layout) {
+    switch (props.$layout) {
       case "horizontal":
         return `
             flex:1 1 auto;
@@ -148,12 +148,12 @@ export const ControlPropertyViewWrapper = (
   } = props;
 
   return (
-    <Wrapper layout={layout} placement={placement}>
+    <Wrapper $layout={layout} $placement={placement}>
       {label && (
         <LabelWrapper
-          layout={layout}
-          placement={placement}
-          labelEllipsis={labelEllipsis}
+          $layout={layout}
+          $placement={placement}
+          $labelEllipsis={labelEllipsis}
           style={labelStyle}
         >
           <ToolTipLabel
@@ -164,7 +164,7 @@ export const ControlPropertyViewWrapper = (
         </LabelWrapper>
       )}
       {preInputNode}
-      <ChildrenWrapper style={childrenWrapperStyle} layout={layout}>
+      <ChildrenWrapper style={childrenWrapperStyle} $layout={layout}>
         {children}
         {extraChildren}
       </ChildrenWrapper>
diff --git a/client/packages/lowcoder-design/src/components/customSelect.tsx b/client/packages/lowcoder-design/src/components/customSelect.tsx
index 8a5889b861..7f7ab99fbd 100644
--- a/client/packages/lowcoder-design/src/components/customSelect.tsx
+++ b/client/packages/lowcoder-design/src/components/customSelect.tsx
@@ -1,9 +1,9 @@
-import { Select as AntdSelect, SelectProps as AntdSelectProps } from "antd";
+import { default as AntdSelect, SelectProps as AntdSelectProps } from "antd/es/select";
 import { ReactComponent as PackUpIcon } from "icons/icon-Pack-up.svg";
 import styled from "styled-components";
 import React from "react";
 
-const SelectWrapper = styled.div<{ border?: boolean }>`
+const SelectWrapper = styled.div<{ $border?: boolean }>`
   .ant-select-open {
     .ant-select-arrow {
       transform: rotate(0deg);
@@ -15,9 +15,9 @@ const SelectWrapper = styled.div<{ border?: boolean }>`
   }
 
   .ant-select .ant-select-selector {
-    border: ${(props) => (props.border ? "1px solid transparent" : "1px solid #d7d9e0")};
+    border: ${(props) => (props.$border ? "1px solid transparent" : "1px solid #d7d9e0")};
     border-radius: 4px;
-    padding: ${(props) => (props.border ? "0px" : "0 0 0 12px")};
+    padding: ${(props) => (props.$border ? "0px" : "0 0 0 12px")};
     height: 100%;
     align-items: center;
     margin-right: 8px;
@@ -30,16 +30,16 @@ const SelectWrapper = styled.div<{ border?: boolean }>`
 
   .ant-select-focused.ant-select.ant-select-show-arrow {
     .ant-select-selector {
-      border: ${(props) => (props.border ? "1px solid transparent" : "1px solid #3377ff")};
+      border: ${(props) => (props.$border ? "1px solid transparent" : "1px solid #3377ff")};
       border-radius: 4px;
-      box-shadow: 0 0 0 2px ${(props) => (props.border ? "transparent" : "rgba(51,119,255,0.20)")};
+      box-shadow: 0 0 0 2px ${(props) => (props.$border ? "transparent" : "rgba(51,119,255,0.20)")};
     }
   }
 
   .ant-select:hover,
   .ant-select-disabled:hover {
     .ant-select-selector {
-      border: ${(props) => (props.border ? "1px solid transparent" : "1px solid #8b8fa3")};
+      border: ${(props) => (props.$border ? "1px solid transparent" : "1px solid #8b8fa3")};
       border-radius: 4px;
     }
   }
@@ -56,7 +56,7 @@ const SelectWrapper = styled.div<{ border?: boolean }>`
 
   .ant-select-disabled.ant-select {
     .ant-select-selector {
-      background: ${(props) => (props.border ? "#ffffff" : "#fdfdfd")};
+      background: ${(props) => (props.$border ? "#ffffff" : "#fdfdfd")};
       border-radius: 4px;
       color: #b8b9bf;
     }
@@ -93,7 +93,7 @@ const CustomSelect = React.forwardRef<HTMLDivElement, CustomSelectProps>((
     ...restProps
   } = props;
   return (
-    <SelectWrapper className={className} ref={ref} border={border}>
+    <SelectWrapper className={className} ref={ref} $border={border}>
       <AntdSelect
         popupClassName={popupClassName}
         popupMatchSelectWidth={false}
diff --git a/client/packages/lowcoder-design/src/components/edit.tsx b/client/packages/lowcoder-design/src/components/edit.tsx
index a4c7949469..8c703b8786 100644
--- a/client/packages/lowcoder-design/src/components/edit.tsx
+++ b/client/packages/lowcoder-design/src/components/edit.tsx
@@ -2,7 +2,7 @@ import styled from "styled-components";
 import { ReactComponent as Edit } from "icons/icon-text-edit.svg";
 import { CSSProperties, ReactNode, useEffect, useRef, useState } from "react";
 import { Input } from "../components/Input";
-import { InputProps, InputRef } from "antd";
+import { InputProps, InputRef } from "antd/es/input";
 
 const Wrapper = styled.div`
   position: relative;
@@ -14,13 +14,13 @@ const Prefix = styled.div`
   top: 6px;
 `;
 
-export const EditTextWrapper = styled.div<{ disabled?: boolean; hasPrefix?: boolean }>`
+export const EditTextWrapper = styled.div<{ disabled?: boolean; $hasPrefix?: boolean }>`
   font-weight: 500;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0 8px 0 4px;
-  padding-left: ${(props) => (props.hasPrefix ? "28px" : "4px")};
+  padding-left: ${(props) => (props.$hasPrefix ? "28px" : "4px")};
   border-radius: 4px;
   width: 220px;
   height: 28px;
@@ -29,7 +29,7 @@ export const EditTextWrapper = styled.div<{ disabled?: boolean; hasPrefix?: bool
   font-size: 14px;
   cursor: ${(props) => !props.disabled && "pointer"};
 
-  :hover {
+  &:hover {
     background-color: ${(props) => !props.disabled && "#8b8fa34c"};
   }
 
@@ -72,7 +72,7 @@ const TextInput = styled(Input)<InputProps & { $hasPrefix?: boolean }>`
   line-height: 28px;
   font-size: 14px;
 
-  :focus {
+  &:focus {
     box-shadow: none;
   }
 `;
@@ -123,7 +123,7 @@ export const EditText = (props: EditTextProps) => {
         <EditTextWrapper
           style={props.style}
           disabled={props.disabled}
-          hasPrefix={!!props.prefixIcon}
+          $hasPrefix={!!props.prefixIcon}
           className="taco-edit-text-wrapper"
           onClick={() => !props.disabled && !props.forceClickIcon && setEditing(true)}
         >
diff --git a/client/packages/lowcoder-design/src/components/form.tsx b/client/packages/lowcoder-design/src/components/form.tsx
index 23487d8a31..ac66238b13 100644
--- a/client/packages/lowcoder-design/src/components/form.tsx
+++ b/client/packages/lowcoder-design/src/components/form.tsx
@@ -1,13 +1,10 @@
-import {
-  Form,
-  Input,
-  InputNumber,
-  InputNumberProps,
-  InputProps,
-  Radio,
-  Select,
-  SelectProps,
-} from "antd";
+import { default as Form } from "antd/es/form";
+import { default as AntdFormItem, FormItemProps as AntdFormItemProps } from "antd/es/form/FormItem";
+import { default as Input, InputProps } from "antd/es/input";
+import { default as TextArea, TextAreaProps } from "antd/es/input/TextArea";
+import { default as InputNumber, InputNumberProps } from "antd/es/input-number";
+import { default as Radio, RadioGroupProps } from "antd/es/radio";
+import { default as Select, SelectProps } from "antd/es/select";
 import { ReactNode } from "react";
 import { CheckBox } from "./checkBox";
 import { CustomSelect } from "./customSelect";
@@ -15,16 +12,13 @@ import { EllipsisTextCss, labelCss } from "./Label";
 import { ToolTipLabel } from "./toolTip";
 import styled from "styled-components";
 import { ReactComponent as Star } from "icons/icon-star.svg";
-import { FormItemProps as AntdFormItemProps } from "antd/lib/form/FormItem";
 import _ from "lodash";
 import { KeyValueList } from "./keyValueList";
 import { OptionsType, ValueFromOption } from "./Dropdown";
-import { RadioGroupProps } from "antd/lib/radio/interface";
-import { TextAreaProps } from "antd/lib/input";
 
 export type FormSize = "middle" | "small";
 
-const FormItem = styled(Form.Item)`
+const FormItem = styled(AntdFormItem)`
   min-width: 0;
   flex-grow: 1;
   margin: 0;
@@ -69,7 +63,7 @@ const FormInputPassword = styled(Input)`
   border-radius: 4px;
 `;
 
-const FormTextArea = styled(Input.TextArea)`
+const FormTextArea = styled(TextArea)`
   background: #ffffff;
 `;
 
@@ -86,13 +80,13 @@ const StartIcon = styled(Star)`
   margin-right: 4px;
   flex-shrink: 0;
 `;
-const LabelDiv = styled.div<{ width?: number }>`
+const LabelDiv = styled.div<{ $width?: number }>`
   display: flex;
   justify-content: flex-start;
   flex-wrap: nowrap;
   align-items: center;
   margin-right: 8px;
-  width: ${(props) => props.width || 122}px;
+  width: ${(props) => props.$width || 122}px;
   flex-shrink: 0;
 `;
 const FormItemContain = styled.div`
@@ -132,11 +126,11 @@ export const FormSectionLabel = styled.label`
   overflow: hidden;
   max-width: 100px;
 `;
-export const FormSection = styled.div<{ size?: FormSize }>`
+export const FormSection = styled.div<{ $size?: FormSize }>`
   width: 100%;
 
   .taco-form-item-wrapper {
-    padding-left: ${(props) => (props.size === "middle" ? "24px" : "0")};
+    padding-left: ${(props) => (props.$size === "middle" ? "24px" : "0")};
   }
 `;
 
@@ -153,7 +147,7 @@ const FormItemLabel = (props: Partial<FormItemProps>) => {
   const isRequired =
     props.required || !!props.rules?.find((i) => typeof i === "object" && i.required);
   return (
-    <LabelDiv width={props.labelWidth}>
+    <LabelDiv $width={props.labelWidth}>
       <StartIcon style={{ visibility: isRequired ? "visible" : "hidden" }} />
       <ToolTipLabel title={props.help} label={props.label} labelStyle={{ fontSize: "14px" }} />
     </LabelDiv>
@@ -263,7 +257,7 @@ const CustomCheckbox = (props: any) => {
 export const FormCheckboxItem = (props: FormItemProps) => {
   return (
     <FormItemContain className={"taco-form-item-wrapper"}>
-      <LabelDiv width={props.labelWidth} />
+      <LabelDiv $width={props.labelWidth} />
       <FormItem
         rules={props.rules}
         name={props.name}
diff --git a/client/packages/lowcoder-design/src/components/iconSelect/index.tsx b/client/packages/lowcoder-design/src/components/iconSelect/index.tsx
index 41f0bcf61e..eaae8bfe52 100644
--- a/client/packages/lowcoder-design/src/components/iconSelect/index.tsx
+++ b/client/packages/lowcoder-design/src/components/iconSelect/index.tsx
@@ -1,6 +1,6 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import type { IconDefinition } from "@fortawesome/free-regular-svg-icons";
-import { Popover } from "antd";
+import { default as Popover } from "antd/es/popover";
 import { ActionType } from '@rc-component/trigger/lib/interface';
 import { TacoInput } from "components/tacoInput";
 import { Tooltip } from "components/toolTip";
@@ -8,7 +8,7 @@ import { trans } from "i18n/design";
 import _ from "lodash";
 import { ReactNode, useEffect, useCallback, useMemo, useRef, useState } from "react";
 import Draggable from "react-draggable";
-import { List, ListRowProps } from "react-virtualized";
+import { default as List, ListRowProps } from "react-virtualized/dist/es/List";
 import styled from "styled-components";
 import { CloseIcon, SearchIcon } from "icons";
 
@@ -62,17 +62,17 @@ const IconListWrapper = styled.div`
 const IconList = styled(List)`
   scrollbar-gutter: stable;
 
-  ::-webkit-scrollbar {
+  &::-webkit-scrollbar {
     width: 6px;
   }
 
-  ::-webkit-scrollbar-thumb {
+  &::-webkit-scrollbar-thumb {
     background-clip: content-box;
     border-radius: 9999px;
     background-color: rgba(139, 143, 163, 0.2);
   }
 
-  ::-webkit-scrollbar-thumb:hover {
+  &::-webkit-scrollbar-thumb:hover {
     background-color: rgba(139, 143, 163, 0.36);
   }
 `;
@@ -82,7 +82,7 @@ const IconRow = styled.div`
   align-items: center;
   justify-content: space-between;
 
-  :last-child {
+  &:last-child {
     gap: 8px;
     justify-content: flex-start;
   }
diff --git a/client/packages/lowcoder-design/src/components/keyValueList.tsx b/client/packages/lowcoder-design/src/components/keyValueList.tsx
index 576fe616de..aea98fde7a 100644
--- a/client/packages/lowcoder-design/src/components/keyValueList.tsx
+++ b/client/packages/lowcoder-design/src/components/keyValueList.tsx
@@ -24,7 +24,7 @@ const DelIcon = styled(Bin)<{
     ${(props) => props.$forbidden && "stroke: #D7D9E0;"}
   }
 
-  :hover {
+  &:hover {
     cursor: ${(props) => (props.$forbidden ? "default" : "pointer")};
   }
 
@@ -50,13 +50,13 @@ const AddBtn = styled(TacoButton)`
   box-shadow: none;
   margin-bottom: 2px;
 
-  :hover {
+  &:hover {
     color: #315efb;
     border: none;
     background-color: #ffffff;
   }
 
-  :focus {
+  &:focus {
     color: #315efb;
     border: none;
     background-color: #ffffff;
diff --git a/client/packages/lowcoder-design/src/components/option.tsx b/client/packages/lowcoder-design/src/components/option.tsx
index fd822af9f9..90b34d2dba 100644
--- a/client/packages/lowcoder-design/src/components/option.tsx
+++ b/client/packages/lowcoder-design/src/components/option.tsx
@@ -31,25 +31,25 @@ const RowText = styled.span`
   margin-left: 4px;
   max-width: calc(100% - 56px);
 
-  :hover {
+  &:hover {
     cursor: pointer;
   }
 `;
 
-const OptionRow = styled.div<{ selected?: boolean }>`
+const OptionRow = styled.div<{ $selected?: boolean }>`
   color: #ffffff;
   width: 100%;
   height: 32px;
   border-bottom: 1px solid #d7d9e0;
   display: flex;
 
-  :hover {
+  &:hover {
     background-color: #fafafa;
     cursor: pointer;
   }
 
   ${(props) => {
-    if (props.selected) {
+    if (props.$selected) {
       return css`
         background-color: #fafafa;
 
@@ -59,7 +59,7 @@ const OptionRow = styled.div<{ selected?: boolean }>`
       `;
     }
   }}
-  :last-child {
+  &:last-child {
     border-bottom: none;
     height: 31px;
   }
@@ -76,7 +76,7 @@ const IconCss = css`
   height: 16px;
   width: 16px;
 
-  :hover {
+  &:hover {
     cursor: pointer;
   }
 `;
@@ -109,12 +109,12 @@ const StyledDragIcon = styled(DragIcon)`
   margin-left: 8px;
   color: #8b8fa3;
 
-  :hover {
+  &:hover {
     cursor: grab;
     outline: none;
   }
 
-  :focus {
+  &:focus {
     cursor: grab;
     outline: none;
   }
@@ -165,7 +165,7 @@ const OptionItem = (props: {
     transition,
   };
   const optionRow = (
-    <OptionRow ref={setNodeRef} style={style} selected={visible}>
+    <OptionRow ref={setNodeRef} style={style} $selected={visible}>
       {draggable && <StyledDragIcon {...attributes} {...listeners} />}
       <RowText>{title}</RowText>
       <OptionItemExtraWrapper>{optionExtra}</OptionItemExtraWrapper>
diff --git a/client/packages/lowcoder-design/src/components/popover.tsx b/client/packages/lowcoder-design/src/components/popover.tsx
index 2f9167fb2a..c7e745d06e 100644
--- a/client/packages/lowcoder-design/src/components/popover.tsx
+++ b/client/packages/lowcoder-design/src/components/popover.tsx
@@ -1,5 +1,5 @@
 import { SuspensionBox } from "./SuspensionBox";
-import { Popover, PopoverProps } from "antd";
+import { default as Popover, PopoverProps } from "antd/es/popover";
 import { Children, cloneElement, MouseEvent, ReactNode, useState } from "react";
 import styled from "styled-components";
 import { ActiveTextColor, GreyTextColor } from "constants/style";
@@ -11,9 +11,9 @@ const Wedge = styled.div`
   /* width: 88px; */
   min-width: 110px;
 `;
-const HandleText = styled.span<{ color?: string }>`
+const HandleText = styled.span<{ $color?: string }>`
   font-size: 13px;
-  color: ${(props) => (props.color ? props.color : "#333333")};
+  color: ${(props) => (props.$color ? props.$color : "#333333")};
   line-height: 13px;
   display: block;
 `;
@@ -29,7 +29,7 @@ const Handle = styled.div`
   padding: 0 8px;
   cursor: pointer;
 
-  :hover {
+  &:hover {
     background-color: #f2f7fc;
     border-radius: 4px;
     cursor: pointer;
@@ -181,7 +181,7 @@ const EditPopover = (props: EditPopoverProps) => {
                 hide();
               }}
             >
-              <HandleText color={item.type === "delete" ? "#F73131" : "#333333"}>
+              <HandleText $color={item.type === "delete" ? "#F73131" : "#333333"}>
                 {item.text}
               </HandleText>
             </Handle>
@@ -238,7 +238,7 @@ const EditPopover = (props: EditPopoverProps) => {
                 hide();
               }}
             >
-              <HandleText color={"#F73131"}>{trans("delete")}</HandleText>
+              <HandleText $color={"#F73131"}>{trans("delete")}</HandleText>
             </Handle>
           )}
           <Wedge />
diff --git a/client/packages/lowcoder-design/src/components/popupCard.tsx b/client/packages/lowcoder-design/src/components/popupCard.tsx
index 0d109c309c..5307ba9e9e 100644
--- a/client/packages/lowcoder-design/src/components/popupCard.tsx
+++ b/client/packages/lowcoder-design/src/components/popupCard.tsx
@@ -1,13 +1,14 @@
-import { Alert, Card } from "antd";
+import { default as Alert } from "antd/es/alert";
+import { default as Card } from "antd/es/card";
 import { CopyTextButton } from "./copyTextButton";
 import { CSSProperties, ReactNode, useState } from "react";
 import styled from "styled-components";
 import { ErrorIcon, SuccessIcon } from "icons";
 
-const StyledCard = styled(Card)<{ backcolor: string }>`
+const StyledCard = styled(Card)<{ $backcolor: string }>`
   z-index: 3;
   margin-top: 4px;
-  background-color: ${(props) => (props.backcolor ? props.backcolor : "#eff9f6")};
+  background-color: ${(props) => (props.$backcolor ? props.$backcolor : "#eff9f6")};
   border-color: #82bf99;
   color: #3b734f;
   border: none;
@@ -119,7 +120,7 @@ export function PopupCard(props: PopupCardProps) {
         <Contain>
           <StyledCard
             style={props.cardStyle}
-            backcolor={props.hasError ? "#FFF3F1" : "#EFF9F6"}
+            $backcolor={props.hasError ? "#FFF3F1" : "#EFF9F6"}
             title={
               <Alert
                 message={props.title}
diff --git a/client/packages/lowcoder-design/src/components/query.tsx b/client/packages/lowcoder-design/src/components/query.tsx
index 51b45aa344..6ff0ce9131 100644
--- a/client/packages/lowcoder-design/src/components/query.tsx
+++ b/client/packages/lowcoder-design/src/components/query.tsx
@@ -1,5 +1,5 @@
 import styled, { css } from "styled-components";
-import { Alert } from "antd";
+import { default as Alert } from "antd/es/alert";
 import { ReactNode } from "react";
 import { AlertProps } from "antd/lib/alert";
 import { ToolTipLabel } from "./toolTip";
@@ -109,12 +109,12 @@ export const QueryConfigItemWrapper = styled.div<{ direction?: "row" | "column"
 
 type TutorialStyle = "dropdownRight" | "begin";
 
-const TutorialButtonWrapper = styled.div<{ styleName: TutorialStyle }>`
+const TutorialButtonWrapper = styled.div<{ $styleName: TutorialStyle }>`
   height: 100%;
   display: flex;
   align-items: center;
   ${(props) => {
-    if (props.styleName === "dropdownRight") {
+    if (props.$styleName === "dropdownRight") {
       return css`
         padding-left: 8px;
         width: 264px;
@@ -134,7 +134,7 @@ export const QueryTutorialButton = ({
   styleName: "dropdownRight" | "begin";
 }) =>
   url ? (
-    <TutorialButtonWrapper styleName={styleName}>
+    <TutorialButtonWrapper $styleName={styleName}>
       <DocLink href={url}>{label}</DocLink>
     </TutorialButtonWrapper>
   ) : (
diff --git a/client/packages/lowcoder-design/src/components/tacoInput.tsx b/client/packages/lowcoder-design/src/components/tacoInput.tsx
index 84445f4096..eaf9b19832 100644
--- a/client/packages/lowcoder-design/src/components/tacoInput.tsx
+++ b/client/packages/lowcoder-design/src/components/tacoInput.tsx
@@ -1,4 +1,4 @@
-import { Input as AntdInput, InputRef } from "antd";
+import { default as AntdInput, InputRef } from "antd/es/input";
 import { ReactComponent as MustFillStar } from "icons/icon-must-fill-star.svg";
 import { trans } from "i18n/design";
 import { CSSProperties, Ref, useEffect, useRef, useState } from "react";
@@ -17,15 +17,15 @@ const TacoInput = styled(AntdInput)`
   line-height: 13px;
   height: 32px;
 
-  :hover {
+  &:hover {
     border: 1px solid #8b8fa3;
   }
 
-  :focus {
+  &:focus {
     border: 1px solid #3377ff;
   }
 
-  ::placeholder {
+  &::placeholder {
     font-size: 13px;
     color: #b8b9bf;
     line-height: 13px;
@@ -93,7 +93,7 @@ const OptInputWrapper = styled.div`
   border: 1px solid #d7d9e0;
   border-radius: 8px;
 
-  :hover {
+  &:hover {
     border: 1px solid #8b8fa3;
   }
 
@@ -107,8 +107,8 @@ const OtpInput = styled(TacoInput)`
   border: none;
   box-shadow: none;
 
-  :focus,
-  :hover {
+  &:focus,
+  &:hover {
     border: none;
     box-shadow: none;
   }
@@ -122,12 +122,12 @@ const OtpSplit = styled.span`
   transform: scaleX(0.8);
 `;
 
-const StyledOtpButton = styled.button<{ isTiming: boolean }>`
+const StyledOtpButton = styled.button<{ $isTiming: boolean }>`
   flex-shrink: 0;
   width: 124px;
 
   font-size: 16px;
-  color: ${(props) => (props.isTiming ? "#8B8FA3" : "#4965f2")};
+  color: ${(props) => (props.$isTiming ? "#8B8FA3" : "#4965f2")};
   line-height: 16px;
   border: none;
   cursor: pointer;
@@ -208,11 +208,11 @@ const PhoneNumberInputWrapper = styled.div`
   border-radius: 4px;
   height: 40px;
 
-  :hover {
+  &:hover {
     border: 1px solid #8b8fa3;
   }
 
-  :focus-within {
+  &:focus-within {
     box-shadow: 0 0 0 2px rgb(24 144 255 / 20%);
     border: 1px solid #3377ff;
   }
@@ -227,7 +227,7 @@ const StyledPhoneNumberInput = styled(AntdInput)`
   border: unset;
   border-radius: 4px !important;
 
-  :focus {
+  &:focus {
     box-shadow: unset;
   }
 `;
@@ -513,7 +513,7 @@ const OtpFormInput = (props: {
             setTiming(true);
             onOtpSend();
           }}
-          isTiming={timing}
+          $isTiming={timing}
         >
           {timing ? `${count}s` : trans("verifyCodeInput.sendCode")}
         </StyledOtpButton>
diff --git a/client/packages/lowcoder-design/src/components/tacoPagination.tsx b/client/packages/lowcoder-design/src/components/tacoPagination.tsx
index 0164e0b2b2..d16b1b9f9a 100644
--- a/client/packages/lowcoder-design/src/components/tacoPagination.tsx
+++ b/client/packages/lowcoder-design/src/components/tacoPagination.tsx
@@ -1,5 +1,4 @@
-import { Pagination } from "antd";
-import { PaginationProps } from "antd/lib/pagination/Pagination";
+import { default as Pagination, PaginationProps } from "antd/es/pagination";
 import styled, { css } from "styled-components";
 import { ReactComponent as PackUpIcon } from "icons/icon-Pack-up.svg";
 
@@ -7,7 +6,7 @@ const packUpIconCss = css`
   height: 24px;
   width: 24px;
 
-  :hover:not([disabled]) {
+  &:hover:not([disabled]) {
     g path {
       fill: #315efb;
     }
diff --git a/client/packages/lowcoder-design/src/components/toolTip.tsx b/client/packages/lowcoder-design/src/components/toolTip.tsx
index 892ea9d92e..897cd4a34e 100644
--- a/client/packages/lowcoder-design/src/components/toolTip.tsx
+++ b/client/packages/lowcoder-design/src/components/toolTip.tsx
@@ -1,5 +1,5 @@
-import { Button, Tooltip as AntdTooltip } from "antd";
-import { TooltipProps } from "antd/lib/tooltip";
+import { default as Button } from "antd/es/button";
+import { default as AntdTooltip, TooltipProps } from "antd/es/tooltip";
 import { CSSProperties, ReactNode } from "react";
 import styled, { css } from "styled-components";
 import { labelCss } from "components/Label";
@@ -71,13 +71,13 @@ const PreButton = styled(Button)`
   ${buttonCss};
 
   &,
-  :focus {
+  &:focus {
     background-color: #6179f2;
     border-color: #6179f2;
     color: #ffffff;
   }
 
-  :hover {
+  &:hover {
     background-color: #798df2;
     border-color: #798df2;
     color: #ffffff;
@@ -88,13 +88,13 @@ const NextButton = styled(Button)`
   ${buttonCss};
 
   &,
-  :focus {
+  &:focus {
     color: #4965f2;
     border-color: #ffffff;
     background-color: #ffffff;
   }
 
-  :hover {
+  &:hover {
     color: #4965f2;
     border-color: #e6eaff;
     background-color: #e6eaff;
@@ -129,8 +129,8 @@ export const TooltipCodeBlock = (props: { text: string }) => {
 
 export const TooltipLink = styled.a`
   &,
-  :hover,
-  :focus {
+  &:hover,
+  &:focus {
     color: #ffffff;
     text-decoration: underline;
   }
@@ -158,10 +158,10 @@ function Tooltip(props: TooltipProps) {
   return <AntdTooltip color="#2c2c2c2" overlayInnerStyle={overlayInnerCss} {...props} />;
 }
 
-const Label = styled.div<{ border?: boolean }>`
+const Label = styled.div<{ $border?: boolean }>`
   span {
-    ${(props) => props.border && UnderlineCss}
-    line-height: ${(props) => props.border && "18px"};
+    ${(props) => props.$border && UnderlineCss}
+    line-height: ${(props) => props.$border ? "18px" : undefined};
   }
   ${labelCss};
   margin: 0;
@@ -192,7 +192,7 @@ function ToolTipLabel(
       {...restProps}
     >
       {label ? (
-        <Label style={labelStyle} border={!!title} className="tooltipLabel">
+        <Label style={labelStyle} $border={!!title} className="tooltipLabel">
           <span>{label}</span>
         </Label>
       ) : (
diff --git a/client/packages/lowcoder-sdk/package.json b/client/packages/lowcoder-sdk/package.json
index 00564e5800..72f718a3c2 100644
--- a/client/packages/lowcoder-sdk/package.json
+++ b/client/packages/lowcoder-sdk/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lowcoder-sdk",
-  "version": "2.1.10",
+  "version": "2.1.11",
   "type": "module",
   "files": [
     "src",
diff --git a/client/packages/lowcoder/package.json b/client/packages/lowcoder/package.json
index 10c70a263a..f575d828d7 100644
--- a/client/packages/lowcoder/package.json
+++ b/client/packages/lowcoder/package.json
@@ -24,10 +24,10 @@
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/react-fontawesome": "latest",
     "@manaflair/redux-batch": "^1.0.0",
-    "@rjsf/antd": "^5.10.0",
-    "@rjsf/core": "^5.10.0",
-    "@rjsf/utils": "^5.10.0",
-    "@rjsf/validator-ajv8": "^5.10.0",
+    "@rjsf/antd": "^5.15.1",
+    "@rjsf/core": "^5.15.1",
+    "@rjsf/utils": "^5.15.1",
+    "@rjsf/validator-ajv8": "^5.15.1",
     "@types/lodash": "^4.14.194",
     "@types/node": "^16.7.13",
     "@types/react": "^18.2.45",
@@ -38,7 +38,7 @@
     "agora-access-token": "^2.0.4",
     "agora-rtc-sdk-ng": "^4.19.0",
     "agora-rtm-sdk": "^1.5.1",
-    "antd": "^5.12.2",
+    "antd": "^5.12.5",
     "axios": "^1.6.2",
     "buffer": "^6.0.3",
     "clsx": "^2.0.0",
@@ -94,7 +94,7 @@
     "resize-observer-polyfill": "^1.5.1",
     "simplebar-react": "2.3.6",
     "sql-formatter": "^8.2.0",
-    "styled-components": "^5.3.3",
+    "styled-components": "^6.1.6",
     "stylis": "^4.1.1",
     "tern": "^0.24.3",
     "typescript-collections": "^1.3.3",
diff --git a/client/packages/lowcoder/src/app-env.d.ts b/client/packages/lowcoder/src/app-env.d.ts
index 2b02bb6169..2858df0504 100644
--- a/client/packages/lowcoder/src/app-env.d.ts
+++ b/client/packages/lowcoder/src/app-env.d.ts
@@ -4,7 +4,10 @@ declare module "*.svg" {
   import * as React from "react";
 
   export const ReactComponent: React.FunctionComponent<
-    React.SVGProps<SVGSVGElement> & { title?: string }
+    React.SVGProps<SVGSVGElement> & {
+      title?: string
+      $show?: boolean
+    }
   >;
 
   const src: string;
diff --git a/client/packages/lowcoder/src/app.tsx b/client/packages/lowcoder/src/app.tsx
index 6cfbb7735d..0e25e3a52e 100644
--- a/client/packages/lowcoder/src/app.tsx
+++ b/client/packages/lowcoder/src/app.tsx
@@ -1,4 +1,5 @@
-import { App, ConfigProvider } from "antd";
+import { default as App } from "antd/es/app";
+import { default as ConfigProvider } from "antd/es/config-provider";
 import {
   ALL_APPLICATIONS_URL,
   APP_EDITOR_URL,
diff --git a/client/packages/lowcoder/src/base/codeEditor/codeEditor.tsx b/client/packages/lowcoder/src/base/codeEditor/codeEditor.tsx
index 0c463e46eb..b6ac336bd0 100644
--- a/client/packages/lowcoder/src/base/codeEditor/codeEditor.tsx
+++ b/client/packages/lowcoder/src/base/codeEditor/codeEditor.tsx
@@ -270,8 +270,8 @@ function clickCompNameCss(enableClickCompName?: boolean) {
 }
 
 const CodeEditorPanelContainer = styled.div<{
-  styleName?: StyleName;
-  enableClickCompName?: boolean;
+  $styleName?: StyleName;
+  $enableClickCompName?: boolean;
 }>`
   height: 100%;
   max-height: 100%;
@@ -326,7 +326,7 @@ const CodeEditorPanelContainer = styled.div<{
     padding-right: 16px;
   }
 
-  ${(props) => clickCompNameCss(props.enableClickCompName)}
+  ${(props) => clickCompNameCss(props.$enableClickCompName)}
 `;
 
 const CodeEditorWrapper = styled.div`
@@ -370,9 +370,9 @@ function CodeEditorForPanel(props: CodeEditorProps) {
   return (
     <CodeEditorCommon {...props} editor={editor} cardStyle={{ borderRadius: "8px" }}>
       <CodeEditorPanelContainer
-        styleName={props.styleName}
+        $styleName={props.styleName}
         ref={editor as MutableRefObject<HTMLDivElement>}
-        enableClickCompName={props.enableClickCompName}
+        $enableClickCompName={props.enableClickCompName}
       />
     </CodeEditorCommon>
   );
@@ -389,12 +389,12 @@ export function CodeEditor(props: CodeEditorProps) {
     <CodeEditorTooltipContainer>
       <CodeEditorCommon {...editorProps} editor={editor} disabled={disabled}>
         <Container
-          styleName={props.styleName}
-          bordered={props.bordered}
+          $styleName={props.styleName}
+          $bordered={props.bordered}
           disabled={disabled}
-          error={props.hasError}
+          $error={props.hasError}
           ref={editor as MutableRefObject<HTMLDivElement>}
-          enableClickCompName={props.enableClickCompName}
+          $enableClickCompName={props.enableClickCompName}
         >
           {expandable && (
             <CodeEditorPanel
@@ -411,32 +411,32 @@ export function CodeEditor(props: CodeEditorProps) {
 
 const Container = styled.div<{
   disabled?: boolean;
-  error?: boolean;
-  bordered?: boolean;
-  styleName?: StyleName;
-  enableClickCompName?: boolean;
+  $error?: boolean;
+  $bordered?: boolean;
+  $styleName?: StyleName;
+  $enableClickCompName?: boolean;
 }>`
   position: relative;
   height: 100%;
 
-  :hover {
+  &:hover {
     .code-editor-panel-open-button {
       display: block;
     }
   }
 
   .cm-editor:hover {
-    border: 1px solid ${(props) => (props.error ? "#f73131" : "#8B8FA3")};
+    border: 1px solid ${(props) => (props.$error ? "#f73131" : "#8B8FA3")};
   }
 
   .cm-editor.cm-focused {
-    border: 1px solid ${(props) => (props.error ? "#f73131" : "#3377ff")};
-    box-shadow: 0 0 0 2px ${(props) => (props.error ? "#feeaea" : "#d6e4ff")};
+    border: 1px solid ${(props) => (props.$error ? "#f73131" : "#3377ff")};
+    box-shadow: 0 0 0 2px ${(props) => (props.$error ? "#feeaea" : "#d6e4ff")};
   }
 
   .cm-editor {
-    border: 1px solid ${(props) => (props.error ? "#f73131" : "#d7d9e0")};
-    border-radius: ${(props) => (props.bordered ? "4px" : "")};
+    border: 1px solid ${(props) => (props.$error ? "#f73131" : "#d7d9e0")};
+    border-radius: ${(props) => (props.$bordered ? "4px" : "")};
   }
 
   .cm-line {
@@ -444,17 +444,17 @@ const Container = styled.div<{
   }
 
   .cm-editor {
-    min-height: ${(props) => getStyle(props.styleName).minHeight};
+    min-height: ${(props) => getStyle(props.$styleName).minHeight};
   }
   .cm-content,
   .cm-gutter {
-    min-height: ${(props) => getStyle(props.styleName).minHeight};
-    min-height: calc(${(props) => getStyle(props.styleName).minHeight} - 2px);
+    min-height: ${(props) => getStyle(props.$styleName).minHeight};
+    min-height: calc(${(props) => getStyle(props.$styleName).minHeight} - 2px);
   }
 
   .cm-editor {
     overflow: hidden;
-    max-height: ${(props) => getStyle(props.styleName).maxHeight};
+    max-height: ${(props) => getStyle(props.$styleName).maxHeight};
   }
 
   ${(props) => {
@@ -469,5 +469,5 @@ const Container = styled.div<{
       `;
     }
   }}
-  ${(props) => clickCompNameCss(props.enableClickCompName)}
+  ${(props) => clickCompNameCss(props.$enableClickCompName)}
 `;
diff --git a/client/packages/lowcoder/src/components/ColorPicker.tsx b/client/packages/lowcoder/src/components/ColorPicker.tsx
index 6f06b82c39..a647657389 100644
--- a/client/packages/lowcoder/src/components/ColorPicker.tsx
+++ b/client/packages/lowcoder/src/components/ColorPicker.tsx
@@ -182,7 +182,7 @@ export default function ColorPicker(props: ColorConfigProps) {
       )} 
       {colorKey === "borderRadius" && (
         <div className="config-input">
-          <Radius radius={defaultRadius || "0"}>
+          <Radius $radius={defaultRadius || "0"}>
             <div>
               <div />
             </div>
@@ -197,7 +197,7 @@ export default function ColorPicker(props: ColorConfigProps) {
       )}
       {colorKey === "margin" && (	
         <div className="config-input">	
-          <Margin margin={defaultMargin || "3px"}>	
+          <Margin $margin={defaultMargin || "3px"}>	
             <div>	
               <ExpandIcon title="" />	
             </div>	
@@ -215,7 +215,7 @@ export default function ColorPicker(props: ColorConfigProps) {
       )}	
       {colorKey === "padding" && (	
         <div className="config-input">	
-          <Padding padding={defaultPadding || "3px"}>	
+          <Padding $padding={defaultPadding || "3px"}>	
             <div>	
               <CompressIcon title="" />	
             </div>	
@@ -233,7 +233,7 @@ export default function ColorPicker(props: ColorConfigProps) {
         )}
       {colorKey === "gridColumns" && (
         <div className="config-input">
-          <GridColumns gridColumns={defaultGridColumns || "24"}>
+          <GridColumns $gridColumns={defaultGridColumns || "24"}>
             <div>
               <GridIcon title="" />
             </div>
diff --git a/client/packages/lowcoder/src/components/CompName.tsx b/client/packages/lowcoder/src/components/CompName.tsx
index 2f0b26b8b4..d6a92dc46f 100644
--- a/client/packages/lowcoder/src/components/CompName.tsx
+++ b/client/packages/lowcoder/src/components/CompName.tsx
@@ -14,27 +14,27 @@ import { getComponentDocUrl } from "comps/utils/compDocUtil";
 import { getComponentPlaygroundUrl } from "comps/utils/compDocUtil";
 import { parseCompType } from "comps/utils/remote";
 
-const CompDiv = styled.div<{ width?: number; hasSearch?: boolean; showSearch?: boolean }>`
-  width: ${(props) => (props.width ? props.width : 312)}px;
-  height: ${(props) => (props.showSearch ? 45 : 46)}px;
+const CompDiv = styled.div<{ $width?: number; $hasSearch?: boolean; $showSearch?: boolean }>`
+  width: ${(props) => (props.$width ? props.$width : 312)}px;
+  height: ${(props) => (props.$showSearch ? 45 : 46)}px;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  border-bottom: ${(props) => (props.showSearch ? 0 : 1)}px solid #e1e3eb;
+  border-bottom: ${(props) => (props.$showSearch ? 0 : 1)}px solid #e1e3eb;
 
   .taco-edit-text-wrapper {
-    width: ${(props) => (props.hasSearch ? 226 : 252)}px;
+    width: ${(props) => (props.$hasSearch ? 226 : 252)}px;
     color: #222222;
     font-size: 16px;
     margin-left: 8px;
 
-    :hover {
+    &:hover {
       background-color: #f5f5f6;
     }
   }
 
   .taco-edit-text-input {
-    width: ${(props) => (props.hasSearch ? 226 : 252)}px;
+    width: ${(props) => (props.$hasSearch ? 226 : 252)}px;
     color: #222222;
     font-size: 16px;
     background-color: #f5f5f6;
@@ -126,7 +126,7 @@ export const CompName = (props: Iprops) => {
     setShowSearch(false);
   }, [props.name]);
   const compName = (
-    <CompDiv width={props.width} hasSearch={!!search} showSearch={showSearch}>
+    <CompDiv $width={props.width} $hasSearch={!!search} $showSearch={showSearch}>
       <div>
         <EditText
           text={props.name}
diff --git a/client/packages/lowcoder/src/components/CreateAppButton.tsx b/client/packages/lowcoder/src/components/CreateAppButton.tsx
index 9787e2b319..fc3faa36ca 100644
--- a/client/packages/lowcoder/src/components/CreateAppButton.tsx
+++ b/client/packages/lowcoder/src/components/CreateAppButton.tsx
@@ -18,7 +18,7 @@ const CreateSpan = styled.span`
   cursor: pointer;
   color: ${LightActiveTextColor};
 
-  :hover {
+  &:hover {
     color: ${ActiveTextColor};
   }
 `;
diff --git a/client/packages/lowcoder/src/components/DraggableTree/DraggableItem.tsx b/client/packages/lowcoder/src/components/DraggableTree/DraggableItem.tsx
index 9cf2a53306..c8a0f093e7 100644
--- a/client/packages/lowcoder/src/components/DraggableTree/DraggableItem.tsx
+++ b/client/packages/lowcoder/src/components/DraggableTree/DraggableItem.tsx
@@ -4,56 +4,56 @@ import styled from "styled-components";
 import { DraggableTreeContext } from "./DraggableTreeContext";
 
 const Wrapper = styled.div<{
-  showPositionLine: boolean;
-  dragging: boolean;
-  isOver: boolean;
-  dropInAsSub: boolean;
-  positionLineHeight?: number;
-  showPositionLineDot?: boolean;
-  positionLineDotDiameter?: number;
-  positionLineIndent?: number;
-  itemHeight?: number;
+  $showPositionLine: boolean;
+  $dragging: boolean;
+  $isOver: boolean;
+  $dropInAsSub: boolean;
+  $positionLineHeight?: number;
+  $showPositionLineDot?: boolean;
+  $positionLineDotDiameter?: number;
+  $positionLineIndent?: number;
+  $itemHeight?: number;
 }>`
   position: relative;
   width: 100%;
-  height: ${(props) => props.itemHeight ?? 30}px;
+  height: ${(props) => props.$itemHeight ?? 30}px;
   /* border: 1px solid #d7d9e0; */
   border-radius: 4px;
-  margin-bottom: ${(props) => props.positionLineHeight ?? 4}px;
+  margin-bottom: ${(props) => props.$positionLineHeight ?? 4}px;
   display: flex;
   /* padding: 0 8px; */
   align-items: center;
-  opacity: ${(props) => (props.dragging ? "0.5" : 1)};
+  opacity: ${(props) => (props.$dragging ? "0.5" : 1)};
 
   &::before {
     content: "";
     display: ${(props) =>
-      (props.showPositionLineDot ?? false) && props.isOver && props.showPositionLine
+      (props.$showPositionLineDot ?? false) && props.$isOver && props.$showPositionLine
         ? "block"
         : "none"};
     position: absolute;
     background-color: #315efb;
-    height: ${(props) => props.positionLineDotDiameter}px;
-    width: ${(props) => props.positionLineDotDiameter}px;
+    height: ${(props) => props.$positionLineDotDiameter}px;
+    width: ${(props) => props.$positionLineDotDiameter}px;
     left: 0;
     border-radius: 100%;
     bottom: ${(props) =>
-      -(props.positionLineHeight ?? 4) -
-      ((props.positionLineDotDiameter ?? 8) - (props.positionLineHeight ?? 4)) / 2}px;
-    left: ${(props) => props.positionLineIndent ?? (props.dropInAsSub ? 15 : -1)}px;
+      -(props.$positionLineHeight ?? 4) -
+      ((props.$positionLineDotDiameter ?? 8) - (props.$positionLineHeight ?? 4)) / 2}px;
+    left: ${(props) => props.$positionLineIndent ?? (props.$dropInAsSub ? 15 : -1)}px;
     z-index: 1;
   }
 
   &::after {
     content: "";
-    display: ${(props) => (props.isOver && props.showPositionLine ? "block" : "none")};
-    height: ${(props) => props.positionLineHeight ?? 4}px;
+    display: ${(props) => (props.$isOver && props.$showPositionLine ? "block" : "none")};
+    height: ${(props) => props.$positionLineHeight ?? 4}px;
     border-radius: 4px;
     position: absolute;
-    left: ${(props) => props.positionLineIndent ?? (props.dropInAsSub ? 15 : -1)}px;
+    left: ${(props) => props.$positionLineIndent ?? (props.$dropInAsSub ? 15 : -1)}px;
     right: 0;
     background-color: #315efb;
-    bottom: ${(props) => -(props.positionLineHeight ?? 4)}px;
+    bottom: ${(props) => -(props.$positionLineHeight ?? 4)}px;
   }
 `;
 
@@ -82,15 +82,15 @@ function DraggableItem(props: IProps, ref: Ref<HTMLDivElement>) {
   const showPositionLine = (context.showDropInPositionLine ?? true) || !dropInAsSub;
   return (
     <Wrapper
-      showPositionLine={showPositionLine}
-      positionLineIndent={positionLineIndent}
-      positionLineDotDiameter={context.positionLineDotDiameter}
-      showPositionLineDot={context.showPositionLineDot}
-      positionLineHeight={context.positionLineHeight}
-      itemHeight={context.itemHeight}
-      isOver={isOver}
-      dragging={dragging}
-      dropInAsSub={dropInAsSub}
+      $showPositionLine={showPositionLine}
+      $positionLineIndent={positionLineIndent}
+      $positionLineDotDiameter={context.positionLineDotDiameter}
+      $showPositionLineDot={context.showPositionLineDot}
+      $positionLineHeight={context.positionLineHeight}
+      $itemHeight={context.itemHeight}
+      $isOver={isOver}
+      $dragging={dragging}
+      $dropInAsSub={dropInAsSub}
       ref={ref}
       {...divProps}
       {...dragListeners}
diff --git a/client/packages/lowcoder/src/components/DraggableTree/DroppablePlaceHolder.tsx b/client/packages/lowcoder/src/components/DraggableTree/DroppablePlaceHolder.tsx
index 3eb8abe0f9..5c96c4a336 100644
--- a/client/packages/lowcoder/src/components/DraggableTree/DroppablePlaceHolder.tsx
+++ b/client/packages/lowcoder/src/components/DraggableTree/DroppablePlaceHolder.tsx
@@ -11,38 +11,38 @@ interface IDroppablePlaceholderProps {
 }
 
 const PlaceHolderWrapper = styled.div<{
-  active: boolean;
-  positionLineIndent?: number;
-  positionLineHeight?: number;
-  showPositionLineDot?: boolean;
-  positionLineDotDiameter?: number;
-  itemHeight?: number;
+  $active: boolean;
+  $positionLineIndent?: number;
+  $positionLineHeight?: number;
+  $showPositionLineDot?: boolean;
+  $positionLineDotDiameter?: number;
+  $itemHeight?: number;
 }>`
   pointer-events: none;
   position: absolute;
   width: 100%;
-  top: -${(props) => props.positionLineHeight ?? 4}px;
-  height: ${(props) => (props.itemHeight ?? 30) * 0.6}px;
+  top: -${(props) => props.$positionLineHeight ?? 4}px;
+  height: ${(props) => (props.$itemHeight ?? 30) * 0.6}px;
   z-index: 10;
   /* background-color: rgba(0, 0, 0, 0.2); */
   .position-line {
-    height: ${(props) => props.positionLineHeight ?? 4}px;
+    height: ${(props) => props.$positionLineHeight ?? 4}px;
     border-radius: 4px;
-    background-color: ${(props) => (props.active ? "#315efb" : "transparent")};
+    background-color: ${(props) => (props.$active ? "#315efb" : "transparent")};
     width: 100%;
-    margin-left: ${(props) => props.positionLineIndent ?? 0}px;
+    margin-left: ${(props) => props.$positionLineIndent ?? 0}px;
     position: relative;
     &::after {
       content: "";
       position: absolute;
       background-color: #315efb;
       display: ${(props) =>
-        (props.showPositionLineDot ?? false) && props.active ? "block" : "none"};
+        (props.$showPositionLineDot ?? false) && props.$active ? "block" : "none"};
       left: 0;
-      height: ${(props) => props.positionLineDotDiameter ?? 8}px;
-      width: ${(props) => props.positionLineDotDiameter ?? 8}px;
+      height: ${(props) => props.$positionLineDotDiameter ?? 8}px;
+      width: ${(props) => props.$positionLineDotDiameter ?? 8}px;
       top: ${(props) =>
-        -((props.positionLineDotDiameter ?? 8) - (props.positionLineHeight ?? 4)) / 2}px;
+        -((props.$positionLineDotDiameter ?? 8) - (props.$positionLineHeight ?? 4)) / 2}px;
       border-radius: 100%;
     }
   }
@@ -63,12 +63,12 @@ export default function DroppablePlaceholder(props: IDroppablePlaceholderProps)
   const context = useContext(DraggableTreeContext);
   return (
     <PlaceHolderWrapper
-      itemHeight={context.itemHeight}
-      showPositionLineDot={context.showPositionLineDot}
-      positionLineDotDiameter={context.positionLineDotDiameter}
-      positionLineHeight={context.positionLineHeight}
-      positionLineIndent={context.positionLineIndent?.(path, false)}
-      active={isOver}
+      $itemHeight={context.itemHeight}
+      $showPositionLineDot={context.showPositionLineDot}
+      $positionLineDotDiameter={context.positionLineDotDiameter}
+      $positionLineHeight={context.positionLineHeight}
+      $positionLineIndent={context.positionLineIndent?.(path, false)}
+      $active={isOver}
       ref={setDropNodeRef}
     >
       <div className="position-line"></div>
diff --git a/client/packages/lowcoder/src/components/InputList.tsx b/client/packages/lowcoder/src/components/InputList.tsx
index 03ebecf8c1..12477fc5d1 100644
--- a/client/packages/lowcoder/src/components/InputList.tsx
+++ b/client/packages/lowcoder/src/components/InputList.tsx
@@ -1,4 +1,5 @@
-import { Form } from "antd";
+import { default as Form } from "antd/es/form";
+import { default as FormItem } from "antd/es/form/FormItem";
 import { FormListProps, Rule } from "antd/lib/form";
 import { TacoButton } from "lowcoder-design";
 import { Input } from "lowcoder-design";
@@ -9,7 +10,7 @@ import { useEffect } from "react";
 import { useForm } from "antd/lib/form/Form";
 import { trans } from "i18n";
 
-const StyledItem = styled(Form.Item)`
+const StyledItem = styled(FormItem)`
   margin-bottom: 8px;
   &:last-child {
     margin-bottom: 2px;
diff --git a/client/packages/lowcoder/src/components/JSLibraryModal.tsx b/client/packages/lowcoder/src/components/JSLibraryModal.tsx
index 4dfd9796dd..3d99b0df08 100644
--- a/client/packages/lowcoder/src/components/JSLibraryModal.tsx
+++ b/client/packages/lowcoder/src/components/JSLibraryModal.tsx
@@ -5,7 +5,7 @@ import { trans } from "i18n";
 import { DocLink } from "components/ExternalLink";
 import { Input } from "components/Input";
 import { TacoButton } from "components/button";
-import { Spin } from "antd";
+import { default as Spin } from "antd/es/spin";
 import { useDispatch, useSelector } from "react-redux";
 import { recommendJSLibrarySelector } from "redux/selectors/jsLibrarySelector";
 import { JSLibraryInfo, JSLibraryLabel } from "components/JSLibraryTree";
@@ -53,7 +53,7 @@ const StyledDocIcon = styled(DocBoldIcon)`
   cursor: pointer;
   color: ${GreyTextColor};
 
-  :hover {
+  &:hover {
     & > g > g {
       stroke: ${ActiveTextColor};
     }
@@ -62,7 +62,7 @@ const StyledDocIcon = styled(DocBoldIcon)`
 const StyledDownloadIcon = styled(DownloadBoldIcon)`
   cursor: pointer;
 
-  :hover {
+  &:hover {
     & > g > g {
       stroke: ${ActiveTextColor};
     }
@@ -169,20 +169,20 @@ const ErrorWrapper = styled.div`
       color: #8b8fa3;
       display: none;
 
-      :hover {
+      &:hover {
         color: #000000;
       }
     }
   }
 
-  :hover {
+  &:hover {
     .close-button {
       display: block;
     }
   }
 
   .error-description a {
-    :hover {
+    &:hover {
       color: #315efb;
     }
   }
diff --git a/client/packages/lowcoder/src/components/JSLibraryTree.tsx b/client/packages/lowcoder/src/components/JSLibraryTree.tsx
index 0bdd60a795..e7c464c605 100644
--- a/client/packages/lowcoder/src/components/JSLibraryTree.tsx
+++ b/client/packages/lowcoder/src/components/JSLibraryTree.tsx
@@ -9,7 +9,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { parseJSLibraryURL } from "util/jsLibraryUtils";
 import { jsLibrarySelector } from "redux/selectors/jsLibrarySelector";
 import { fetchJSLibraryMetasAction } from "redux/reduxActions/jsLibraryActions";
-import { Typography } from "antd";
+import { default as TypographyParagraph } from "antd/es/typography/Paragraph";
 
 const InfoWrapper = styled.div`
   color: #8b8fa3;
@@ -30,7 +30,7 @@ const ExportWrapper = styled.div`
   height: 20px;
   line-height: 20px;
 `;
-const DescWrapper = styled(Typography.Paragraph)`
+const DescWrapper = styled(TypographyParagraph)`
   line-height: 1.5em;
   font-size: 13px;
   color: #8b8fa3;
@@ -73,7 +73,7 @@ const Icon = styled(PointIcon)`
   }
 `;
 
-const JSLibraryCollapse = styled(Collapse)<{ mode: "row" | "column" }>`
+const JSLibraryCollapse = styled(Collapse)<{ $mode: "row" | "column" }>`
   margin-bottom: 12px;
 
   cursor: inherit;
@@ -84,7 +84,7 @@ const JSLibraryCollapse = styled(Collapse)<{ mode: "row" | "column" }>`
   }
 
   ${(props) =>
-    props.mode === "row"
+    props.$mode === "row"
       ? css`
           width: 284px;
 
@@ -176,7 +176,7 @@ export const JSLibraryTree = (props: {
 
   return (
     <JSLibraryCollapse
-      mode={props.mode}
+      $mode={props.mode}
       isSelected={false}
       isOpen={false}
       config={finalMetas.map((meta, idx) => {
diff --git a/client/packages/lowcoder/src/components/KeyValueItemList.tsx b/client/packages/lowcoder/src/components/KeyValueItemList.tsx
index a09f6d1758..38db309106 100644
--- a/client/packages/lowcoder/src/components/KeyValueItemList.tsx
+++ b/client/packages/lowcoder/src/components/KeyValueItemList.tsx
@@ -57,14 +57,14 @@ const ListWrapper = styled.div`
   }
 `;
 
-const ItemWrapper = styled.div<{ popover: boolean; active: boolean; hasValue: boolean }>`
+const ItemWrapper = styled.div<{ $popover: boolean; $active: boolean; $hasValue: boolean }>`
   height: 32px;
   font-size: 13px;
   padding-left: 12px;
   display: flex;
-  background-color: ${(props) => (props.active ? ItemHoverBackgroundColor : "inherit")};
+  background-color: ${(props) => (props.$active ? ItemHoverBackgroundColor : "inherit")};
 
-  cursor: ${(props) => (props.popover ? "pointer" : "default")};
+  cursor: ${(props) => (props.$popover ? "pointer" : "default")};
 
   &:hover {
     background-color: ${ItemHoverBackgroundColor};
@@ -79,8 +79,8 @@ const ItemWrapper = styled.div<{ popover: boolean; active: boolean; hasValue: bo
     white-space: nowrap;
     overflow: hidden;
     padding-right: 8px;
-    width: ${(props) => (props.hasValue ? col1Width : "auto")};
-    ${(props) => (props.active ? `color: ${ActiveTextColor}` : "")}
+    width: ${(props) => (props.$hasValue ? col1Width : "auto")};
+    ${(props) => (props.$active ? `color: ${ActiveTextColor}` : "")}
   }
 
   .col2 {
@@ -152,7 +152,7 @@ export function KeyValueItem(props: KeyValueItemProps) {
   );
 
   return (
-    <ItemWrapper active={isPopShow} popover={!!clickPopoverContent} hasValue={!!value}>
+    <ItemWrapper $active={isPopShow} $popover={!!clickPopoverContent} $hasValue={!!value}>
       {clickPopoverContent ? content : itemContent}
       <div className="item-op-btn">
         <EditPopover {...editPopoverProps}>
diff --git a/client/packages/lowcoder/src/components/LazyRoute.tsx b/client/packages/lowcoder/src/components/LazyRoute.tsx
index 81f2f8733e..0b0e27c3dd 100644
--- a/client/packages/lowcoder/src/components/LazyRoute.tsx
+++ b/client/packages/lowcoder/src/components/LazyRoute.tsx
@@ -1,4 +1,4 @@
-import { Skeleton } from "antd";
+import { default as Skeleton } from "antd/es/skeleton";
 import { ComponentType, lazy, Suspense, useRef } from "react";
 import { Route, RouteProps } from "react-router";
 import PageSkeleton from "./PageSkeleton";
diff --git a/client/packages/lowcoder/src/components/LinkPlusButton.tsx b/client/packages/lowcoder/src/components/LinkPlusButton.tsx
index f32c8443ad..ec50f1ac31 100644
--- a/client/packages/lowcoder/src/components/LinkPlusButton.tsx
+++ b/client/packages/lowcoder/src/components/LinkPlusButton.tsx
@@ -22,7 +22,7 @@ const Btn = styled(TacoButton)`
     line-height: 13px;
     box-shadow: none;
 
-    :hover {
+    &:hover {
       color: #315efb;
       border: none;
       background-color: #ffffff;
diff --git a/client/packages/lowcoder/src/components/ModuleLoading.tsx b/client/packages/lowcoder/src/components/ModuleLoading.tsx
index 73dcfe0544..5d3901c8db 100644
--- a/client/packages/lowcoder/src/components/ModuleLoading.tsx
+++ b/client/packages/lowcoder/src/components/ModuleLoading.tsx
@@ -1,4 +1,4 @@
-import { Spin } from "antd";
+import { default as Spin } from "antd/es/spin";
 import { GreyTextColor } from "constants/style";
 import styled from "styled-components";
 
diff --git a/client/packages/lowcoder/src/components/PageSkeleton.tsx b/client/packages/lowcoder/src/components/PageSkeleton.tsx
index d3bf0fcdbe..79dcbc21de 100644
--- a/client/packages/lowcoder/src/components/PageSkeleton.tsx
+++ b/client/packages/lowcoder/src/components/PageSkeleton.tsx
@@ -1,4 +1,5 @@
-import { Layout, Skeleton } from "antd";
+import { default as Layout } from "antd/es/layout";
+import { default as Skeleton } from "antd/es/skeleton";
 import MainContent from "components/layout/MainContent";
 import SideBar from "components/layout/SideBar";
 import Header from "./layout/Header";
diff --git a/client/packages/lowcoder/src/components/PermissionDialog/Permission.tsx b/client/packages/lowcoder/src/components/PermissionDialog/Permission.tsx
index b97548de23..74beb77aa0 100644
--- a/client/packages/lowcoder/src/components/PermissionDialog/Permission.tsx
+++ b/client/packages/lowcoder/src/components/PermissionDialog/Permission.tsx
@@ -21,7 +21,7 @@ import {
 } from "./commonComponents";
 import { getInitialsAndColorCode } from "util/stringUtils";
 import { CustomTagProps } from "rc-select/lib/BaseSelect";
-import { Tag } from "antd";
+import { default as Tag } from "antd/es/tag";
 import { User } from "constants/userConstants";
 import { getUser } from "redux/selectors/usersSelectors";
 import { EmptyContent } from "pages/common/styledComponent";
@@ -62,18 +62,18 @@ const AddPermissionDropDown = styled.div`
     .rc-virtual-list-holder {
       overflow-y: overlay !important;
 
-      ::-webkit-scrollbar {
+      &::-webkit-scrollbar {
         width: 16px;
       }
 
-      ::-webkit-scrollbar-thumb {
+      &::-webkit-scrollbar-thumb {
         border: 5px solid transparent;
         background-clip: content-box;
         border-radius: 9999px;
         background-color: rgba(139, 143, 163, 0.12);
       }
 
-      ::-webkit-scrollbar-thumb:hover {
+      &::-webkit-scrollbar-thumb:hover {
         background-color: rgba(139, 143, 163, 0.25);
       }
     }
@@ -94,11 +94,11 @@ const PermissionSelectWrapper = styled.div`
     line-height: 13px;
   }
 
-  :hover {
+  &:hover {
     outline: 1px solid #8b8fa3;
   }
 
-  :focus-within {
+  &:focus-within {
     outline: 1px solid #315efb;
     border-radius: 4px;
     box-shadow: 0 0 0 3px rgb(24 144 255 / 20%);
@@ -117,7 +117,7 @@ const AddPermissionsSelect = styled(CustomSelect)`
   overflow-y: scroll;
   overflow-x: hidden;
 
-  ::-webkit-scrollbar {
+  &::-webkit-scrollbar {
     display: none;
   }
 
@@ -165,7 +165,7 @@ const StyledTag = styled(Tag)`
     align-items: center;
     margin-left: 8px;
 
-    :hover svg g line {
+    &:hover svg g line {
       stroke: #222222;
     }
   }
@@ -241,7 +241,7 @@ function getPermissionOptionView(
 function PermissionSelectorOption(props: { optionView: AddAppOptionView }) {
   const { optionView } = props;
   const groupIcon = optionView.type === "GROUP" && (
-    <StyledGroupIcon color={getInitialsAndColorCode(optionView.name)[1]} />
+    <StyledGroupIcon $color={getInitialsAndColorCode(optionView.name)[1]} />
   );
   return (
     <OptionViewWrapper>
@@ -259,7 +259,7 @@ function PermissionSelectorOption(props: { optionView: AddAppOptionView }) {
 function PermissionSelectorLabel(props: { view: AddAppOptionView }) {
   const { view } = props;
   const groupIcon = view.type === "GROUP" && (
-    <StyledGroupIcon color={getInitialsAndColorCode(view.name)[1]} side={9} />
+    <StyledGroupIcon $color={getInitialsAndColorCode(view.name)[1]} $side={9} />
   );
   return (
     <div style={{ display: "flex", alignItems: "center" }}>
diff --git a/client/packages/lowcoder/src/components/PermissionDialog/PermissionDialog.tsx b/client/packages/lowcoder/src/components/PermissionDialog/PermissionDialog.tsx
index 860789147d..0834cf2d9e 100644
--- a/client/packages/lowcoder/src/components/PermissionDialog/PermissionDialog.tsx
+++ b/client/packages/lowcoder/src/components/PermissionDialog/PermissionDialog.tsx
@@ -15,8 +15,8 @@ const BottomWrapper = styled.div`
 
 const AddPermissionButton = styled(TacoButton)`
   &,
-  :hover,
-  :focus {
+  &:hover,
+  &:focus {
     border: none;
     box-shadow: none;
     padding: 0;
@@ -32,7 +32,7 @@ const AddPermissionButton = styled(TacoButton)`
     margin-right: 4px;
   }
 
-  :hover {
+  &:hover {
     color: #315efb;
 
     svg g path {
diff --git a/client/packages/lowcoder/src/components/PermissionDialog/PermissionList.tsx b/client/packages/lowcoder/src/components/PermissionDialog/PermissionList.tsx
index e88541dfd1..d834b7cd05 100644
--- a/client/packages/lowcoder/src/components/PermissionDialog/PermissionList.tsx
+++ b/client/packages/lowcoder/src/components/PermissionDialog/PermissionList.tsx
@@ -25,31 +25,31 @@ const PermissionLi = styled.li`
   padding: 8px 8px;
   width: 424px;
 
-  :hover {
+  &:hover {
     background: #f2f7fc;
     border-radius: 4px;
   }
 `;
 
-const UserPermissionUl = styled.ul<{ height: number }>`
+const UserPermissionUl = styled.ul<{ $height: number }>`
   padding: 0;
-  height: ${(props) => props.height}px;
+  height: ${(props) => props.$height}px;
   overflow-y: overlay !important;
   overflow-x: hidden;
   margin: 0 -16px 0 -8px;
 
-  ::-webkit-scrollbar {
+  &::-webkit-scrollbar {
     width: 16px;
   }
 
-  ::-webkit-scrollbar-thumb {
+  &::-webkit-scrollbar-thumb {
     border: 5px solid transparent;
     background-clip: content-box;
     border-radius: 9999px;
     background-color: rgba(139, 143, 163, 0.12);
   }
 
-  ::-webkit-scrollbar-thumb:hover {
+  &::-webkit-scrollbar-thumb:hover {
     background-color: rgba(139, 143, 163, 0.25);
   }
 `;
@@ -101,7 +101,7 @@ function PermissionLiItem(props: {
         side={32}
         userName={permissionItem.name}
         source={permissionItem.avatar && ASSETS_URI(permissionItem.avatar)}
-        svg={SvgIcon && <SvgIcon color={getInitialsAndColorCode(permissionItem.name)[1]} />}
+        svg={SvgIcon && <SvgIcon $color={getInitialsAndColorCode(permissionItem.name)[1]} />}
       />
       <PermissionItemName title={permissionItem.name}>
         {permissionItem.type === "GROUP" && trans("home.groupWithSquareBrackets")}
@@ -145,7 +145,7 @@ function PermissionLiItem(props: {
             value="delete"
             permissionid={permissionItem.permissionId}
           >
-            <CommonErrorLabel fontSize={13}>{trans("remove")}</CommonErrorLabel>
+            <CommonErrorLabel $fontSize={13}>{trans("remove")}</CommonErrorLabel>
           </CustomSelect.Option>
         </StyledRoleSelect>
       )}
@@ -165,7 +165,7 @@ export const PermissionList = (props: {
     <CommonTextLabel style={{ marginBottom: "4px" }}>
       {trans("home.memberPermissionList")}
     </CommonTextLabel>
-    <UserPermissionUl height={201}>
+    <UserPermissionUl $height={201}>
       {props.permissionItems.map((item, index) => (
         <PermissionLiItem
           key={index}
diff --git a/client/packages/lowcoder/src/components/PermissionDialog/commonComponents.tsx b/client/packages/lowcoder/src/components/PermissionDialog/commonComponents.tsx
index 4ec71c83f3..f5a9f884ad 100644
--- a/client/packages/lowcoder/src/components/PermissionDialog/commonComponents.tsx
+++ b/client/packages/lowcoder/src/components/PermissionDialog/commonComponents.tsx
@@ -42,23 +42,23 @@ export const RoleSelectOptionWrapper = styled.div`
 `;
 
 export const StyledGroupIcon = styled(GroupIcon)<{
-  color: string;
-  side?: number;
+  $color: string;
+  $side?: number;
 }>`
-  width: ${(props) => props.side ?? 16}px;
-  height: ${(props) => props.side ?? 16}px;
+  width: ${(props) => props.$side ?? 16}px;
+  height: ${(props) => props.$side ?? 16}px;
 
   g g {
-    fill: ${(props) => props.color};
+    fill: ${(props) => props.$color};
   }
 `;
 
-export const StyledAdminIcon = styled(AdminIcon)<{ color: string }>`
+export const StyledAdminIcon = styled(AdminIcon)<{ $color: string }>`
   width: 16px;
   height: 16px;
 
   g path {
-    fill: ${(props) => props.color};
+    fill: ${(props) => props.$color};
   }
 `;
 
diff --git a/client/packages/lowcoder/src/components/ResCreatePanel.tsx b/client/packages/lowcoder/src/components/ResCreatePanel.tsx
index c5c85968a9..efcbb38f03 100644
--- a/client/packages/lowcoder/src/components/ResCreatePanel.tsx
+++ b/client/packages/lowcoder/src/components/ResCreatePanel.tsx
@@ -19,20 +19,20 @@ import {
   QUICK_REST_API_ID,
 } from "../constants/datasourceConstants";
 import { ResourceType } from "@lowcoder-ee/constants/queryConstants";
-import { Upload } from "antd";
+import { default as Upload } from "antd/es/upload";
 import { useSelector } from "react-redux";
 import { getUser } from "../redux/selectors/usersSelectors";
 import DataSourceIcon from "./DataSourceIcon";
 import { genRandomKey } from "comps/utils/idGenerator";
 
-const Wrapper = styled.div<{ placement: PageType }>`
+const Wrapper = styled.div<{ $placement: PageType }>`
   width: 100%;
   height: 100%;
   position: absolute;
   background-color: white;
 
   ${(props) => {
-    return props.placement === "editor"
+    return props.$placement === "editor"
       ? css`
           top: 0;
         `
@@ -57,16 +57,16 @@ const Wrapper = styled.div<{ placement: PageType }>`
   }
 `;
 
-const Title = styled.div<{ shadow: boolean; placement: PageType }>`
+const Title = styled.div<{ $shadow: boolean; $placement: PageType }>`
   height: 40px;
   display: flex;
   padding: 0 16px;
   justify-content: space-between;
-  align-items: ${(props) => (props.placement === "editor" ? "center" : "flex-start")};
+  align-items: ${(props) => (props.$placement === "editor" ? "center" : "flex-start")};
 
-  ${(props) => (props.shadow ? `box-shadow: ${BottomShadow};` : "")}
+  ${(props) => (props.$shadow ? `box-shadow: ${BottomShadow};` : "")}
   .title-text {
-    font-size: ${(props) => (props.placement === "editor" ? 16 : 18)}px;
+    font-size: ${(props) => (props.$placement === "editor" ? 16 : 18)}px;
     font-weight: 500;
   }
 
@@ -90,9 +90,9 @@ const InnerContent = styled.div`
   padding: 8px 16px 24px;
 `;
 
-const DataSourceListWrapper = styled.div<{ placement?: PageType }>`
+const DataSourceListWrapper = styled.div<{ $placement?: PageType }>`
   display: flex;
-  gap: ${(props) => (props.placement === "queryLibrary" ? 12 : 8)}px;
+  gap: ${(props) => (props.$placement === "queryLibrary" ? 12 : 8)}px;
   flex-wrap: wrap;
 `;
 
@@ -243,8 +243,8 @@ export function ResCreatePanel(props: ResCreateModalProps) {
   }, 100);
 
   return (
-    <Wrapper placement={placement}>
-      <Title shadow={isScrolling} placement={placement}>
+    <Wrapper $placement={placement}>
+      <Title $shadow={isScrolling} $placement={placement}>
         <div onScroll={handleScroll} className="title-text">
           {trans("query.newQuery")}
         </div>
@@ -257,7 +257,7 @@ export function ResCreatePanel(props: ResCreateModalProps) {
           <InnerContent>
             <div className="section-title">{trans("query.recentlyUsed")}</div>
             <div ref={ref} className="section">
-              <DataSourceListWrapper placement={placement}>
+              <DataSourceListWrapper $placement={placement}>
                 {_.uniq(recentlyUsed)
                   .slice(0, count)
                   .map((id, idx) => (
@@ -270,7 +270,7 @@ export function ResCreatePanel(props: ResCreateModalProps) {
               <>
                 <div className="section-title">{trans("code")}</div>
                 <div className="section">
-                  <DataSourceListWrapper placement={placement}>
+                  <DataSourceListWrapper $placement={placement}>
                     <ResButton
                       size={buttonSize}
                       identifier={BottomResTypeEnum.TempState}
@@ -302,7 +302,7 @@ export function ResCreatePanel(props: ResCreateModalProps) {
               <>
                 <div className="section-title">{trans("home.import")}</div>
                 <div className="section">
-                  <DataSourceListWrapper placement={placement}>
+                  <DataSourceListWrapper $placement={placement}>
                     <Upload
                       accept=".json"
                       showUploadList={false}
@@ -323,7 +323,7 @@ export function ResCreatePanel(props: ResCreateModalProps) {
 
             <div className="section-title">{trans("query.datasource")}</div>
             <div className="section">
-              <DataSourceListWrapper placement={placement}>
+              <DataSourceListWrapper $placement={placement}>
                 <ResButton size={buttonSize} identifier={"restApi"} onSelect={onSelect} />
                 <ResButton size={buttonSize} identifier={"streamApi"} onSelect={onSelect} />
                 <ResButton size={buttonSize} identifier={"graphql"} onSelect={onSelect} />
diff --git a/client/packages/lowcoder/src/components/Segmented.tsx b/client/packages/lowcoder/src/components/Segmented.tsx
index 71246664cc..91f8750d44 100644
--- a/client/packages/lowcoder/src/components/Segmented.tsx
+++ b/client/packages/lowcoder/src/components/Segmented.tsx
@@ -1,4 +1,4 @@
-import { Segmented as AntdSegmented } from "antd";
+import { default as AntdSegmented } from "antd/es/segmented";
 import styled from "styled-components";
 
 type PropsType<T extends React.ForwardRefExoticComponent<any>> =
diff --git a/client/packages/lowcoder/src/components/SnapshotList.tsx b/client/packages/lowcoder/src/components/SnapshotList.tsx
index 936bcf8bd6..3613b946ac 100644
--- a/client/packages/lowcoder/src/components/SnapshotList.tsx
+++ b/client/packages/lowcoder/src/components/SnapshotList.tsx
@@ -1,11 +1,11 @@
 import styled from "styled-components";
 
-const SnapshotItemDiv = styled.div<{ selected?: boolean }>`
+const SnapshotItemDiv = styled.div<{ $selected?: boolean }>`
   padding: 10px 16px 12px 0;
   border-left: 4px solid transparent;
   cursor: pointer;
   ${(props) =>
-    props.selected &&
+    props.$selected &&
     `
       background: #f2f7fc;
       border-radius: 4px;
@@ -16,7 +16,7 @@ const SnapshotItemDiv = styled.div<{ selected?: boolean }>`
       }
   `};
 
-  :hover {
+  &:hover {
     background: #f2f7fc;
     border-radius: 4px;
   }
@@ -81,7 +81,7 @@ export interface SnapshotItemProps {
 }
 
 const SnapshotItem = (props: SnapshotItemProps) => (
-  <SnapshotItemDiv onClick={props.onClick} tabIndex={0} selected={props.selected}>
+  <SnapshotItemDiv onClick={props.onClick} tabIndex={0} $selected={props.selected}>
     <ItemTitle>
       <Dot className="snapshot-item-dot" />
       <span title={props.title}>{props.title}</span>
diff --git a/client/packages/lowcoder/src/components/Table.tsx b/client/packages/lowcoder/src/components/Table.tsx
index 82b5abb5ca..5478829ca3 100644
--- a/client/packages/lowcoder/src/components/Table.tsx
+++ b/client/packages/lowcoder/src/components/Table.tsx
@@ -1,4 +1,4 @@
-import { Table as AntdTable } from "antd";
+import { default as AntdTable } from "antd/es/table";
 import styled from "styled-components";
 
 export const Table = styled(AntdTable)`
diff --git a/client/packages/lowcoder/src/components/Tabs.tsx b/client/packages/lowcoder/src/components/Tabs.tsx
index 41e4892330..1735a838cb 100644
--- a/client/packages/lowcoder/src/components/Tabs.tsx
+++ b/client/packages/lowcoder/src/components/Tabs.tsx
@@ -1,4 +1,4 @@
-import { Tabs as AntdTabs } from "antd";
+import { default as AntdTabs } from "antd/es/tabs";
 import { GreyTextColor, TabActiveColor } from "constants/style";
 import { ReactNode } from "react";
 import styled from "styled-components";
diff --git a/client/packages/lowcoder/src/components/TextArea.tsx b/client/packages/lowcoder/src/components/TextArea.tsx
index b2d9333623..e9c5800fc6 100644
--- a/client/packages/lowcoder/src/components/TextArea.tsx
+++ b/client/packages/lowcoder/src/components/TextArea.tsx
@@ -1,13 +1,11 @@
 import styled from "styled-components";
-import { Input as AntdInput } from "antd";
+import { default as AntdTextArea, TextAreaRef, TextAreaProps as AntdTextAreaProps } from "antd/es/input/TextArea";
 import { ChangeEvent, useEffect, useRef, useState } from "react";
 import _ from "lodash";
 import React from "react";
-import { TextAreaProps as AntdTextAreaProps } from "antd/lib/input";
-import { TextAreaRef } from "antd/lib/input/TextArea";
 import { INPUT_DEFAULT_ONCHANGE_DEBOUNCE } from "constants/perf";
 
-const StyledTextArea = styled(AntdInput.TextArea)``;
+const StyledTextArea = styled(AntdTextArea)``;
 
 export interface TextAreaProps extends AntdTextAreaProps {
   debounce?: number;
diff --git a/client/packages/lowcoder/src/components/TypographyText.tsx b/client/packages/lowcoder/src/components/TypographyText.tsx
index a18b338db8..7bf1568593 100644
--- a/client/packages/lowcoder/src/components/TypographyText.tsx
+++ b/client/packages/lowcoder/src/components/TypographyText.tsx
@@ -1,8 +1,8 @@
-import { Typography } from "antd";
+import { default as AntdTypographyText } from "antd/es/typography/Text";
 import React from "react";
 import styled from "styled-components";
 
-const AntdTypographyText = styled(Typography.Text)`
+const StyledTypographyText = styled(AntdTypographyText)`
   font-size: 14px;
   color: #333333;
   line-height: 14px;
@@ -10,7 +10,7 @@ const AntdTypographyText = styled(Typography.Text)`
   text-overflow: ellipsis;
   display: block;
 
-  :is(.ant-typography-edit-content) {
+  &:is(.ant-typography-edit-content) {
     color: red;
     padding: unset;
     margin: unset !important;
@@ -33,7 +33,7 @@ const AntdTypographyText = styled(Typography.Text)`
     color: #333333;
     line-height: 14px;
 
-    ::-webkit-scrollbar {
+    &::-webkit-scrollbar {
       display: none;
     }
   }
@@ -44,7 +44,7 @@ export const TypographyText = (props: {
   editing: boolean;
   onChange: (value: string) => void;
 }) => (
-  <AntdTypographyText
+  <StyledTypographyText
     title={props.value}
     ellipsis={true}
     editable={{
@@ -57,5 +57,5 @@ export const TypographyText = (props: {
     }}
   >
     {props.value}
-  </AntdTypographyText>
+  </StyledTypographyText>
 );
diff --git a/client/packages/lowcoder/src/components/layout/Header.tsx b/client/packages/lowcoder/src/components/layout/Header.tsx
index c3ca094c39..b704eef88c 100644
--- a/client/packages/lowcoder/src/components/layout/Header.tsx
+++ b/client/packages/lowcoder/src/components/layout/Header.tsx
@@ -9,11 +9,11 @@ const HeaderWrapper = styled.header<IHeaderProps>`
   height: ${TopHeaderHeight};
   background-color: #2c2c2c;
   /* filter: drop-shadow(0px 1px 0px #ebebeb); */
-  padding: ${(props) => (props.isEditViewPreview ? "8px 24px 8px 8px" : "8px 24px")};
+  padding: ${(props) => (props.$isEditViewPreview ? "8px 24px 8px 8px" : "8px 24px")};
   justify-content: space-between;
 
   > div:nth-of-type(1) svg {
-    max-width: ${(props) => props.isEditViewPreview && "24px"};
+    max-width: ${(props) => props.$isEditViewPreview && "24px"};
   }
 `;
 
@@ -39,7 +39,7 @@ export interface IHeaderProps {
   headerStart?: ReactNode;
   headerMiddle?: ReactNode;
   headerEnd?: ReactNode;
-  isEditViewPreview?: boolean;
+  $isEditViewPreview?: boolean;
 }
 
 export default function Header(props: IHeaderProps) {
@@ -49,7 +49,7 @@ export default function Header(props: IHeaderProps) {
   return (
     <HeaderWrapper
       className={CNSiteHeader}
-      isEditViewPreview={isEditViewPreview}
+      $isEditViewPreview={isEditViewPreview}
       style={props.style}
     >
       <HeaderStart>{headerStart}</HeaderStart>
diff --git a/client/packages/lowcoder/src/components/layout/Layout.tsx b/client/packages/lowcoder/src/components/layout/Layout.tsx
index 36304606e8..bb0d041159 100644
--- a/client/packages/lowcoder/src/components/layout/Layout.tsx
+++ b/client/packages/lowcoder/src/components/layout/Layout.tsx
@@ -1,5 +1,5 @@
 import { Route, Switch } from "react-router-dom";
-import { Layout as AntdLayout } from "antd";
+import { default as AntdLayout } from "antd/es/layout";
 import { AppHeader } from "pages/common/header";
 import * as React from "react";
 import { ReactElement } from "react";
@@ -15,7 +15,7 @@ type LayoutProps = {
 };
 
 const SideBarV2 = styled(SideBar)`
-  background-color: #f7f9fc;
+  background: #f7f9fc !important;
   padding: 28px 10px;
   border-right: 1px solid #ebebeb;
 
@@ -24,7 +24,7 @@ const SideBarV2 = styled(SideBar)`
     display: block;
     width: 204px;
     height: 1px;
-    background-color: #ebebeb;
+    background: #ebebeb !important;
     margin: 0 auto 4px;
   }
 `;
diff --git a/client/packages/lowcoder/src/components/layout/MainContent.tsx b/client/packages/lowcoder/src/components/layout/MainContent.tsx
index d7cc7666e5..c83a0ec92f 100644
--- a/client/packages/lowcoder/src/components/layout/MainContent.tsx
+++ b/client/packages/lowcoder/src/components/layout/MainContent.tsx
@@ -1,8 +1,10 @@
-import { Layout } from "antd";
+import { default as Layout } from "antd/es/layout";
 import { TopHeaderHeight } from "constants/style";
 import styled from "styled-components";
 
-const MainContent = styled(Layout.Content)`
+const { Content } = Layout;
+
+const MainContent = styled((props: any) => <Content {...props} />)`
   height: calc(100vh - ${TopHeaderHeight});
   /* display: flex; */
   overflow: auto;
diff --git a/client/packages/lowcoder/src/components/layout/SideBar.tsx b/client/packages/lowcoder/src/components/layout/SideBar.tsx
index 84f4d346e2..492df7d282 100644
--- a/client/packages/lowcoder/src/components/layout/SideBar.tsx
+++ b/client/packages/lowcoder/src/components/layout/SideBar.tsx
@@ -1,8 +1,8 @@
-import { Layout, SiderProps } from "antd";
+import { default as LayoutSider, SiderProps } from "antd/es/layout/Sider";
 import { TopHeaderHeight } from "constants/style";
 import styled from "styled-components";
 
-const Sider = styled(Layout.Sider)`
+const Sider = styled(LayoutSider)`
   height: calc(100vh - ${TopHeaderHeight});
   background: #f9f9fa;
   padding: 0 24px 0 24px;
diff --git a/client/packages/lowcoder/src/components/layout/SideBarItem.tsx b/client/packages/lowcoder/src/components/layout/SideBarItem.tsx
index 7b7209b090..655c01257c 100644
--- a/client/packages/lowcoder/src/components/layout/SideBarItem.tsx
+++ b/client/packages/lowcoder/src/components/layout/SideBarItem.tsx
@@ -6,21 +6,21 @@ import { useLocation } from "react-router-dom";
 
 type SideBarSize = "medium" | "small";
 
-const Wrapper = styled.div<{ size?: SideBarSize; selected?: boolean }>`
+const Wrapper = styled.div<{ $size?: SideBarSize; $selected?: boolean }>`
   width: 100%;
-  height: ${(props) => (props.size === "small" ? "36px" : "44px")};
+  height: ${(props) => (props.$size === "small" ? "36px" : "44px")};
   border-radius: 4px;
   display: flex;
   align-items: center;
   padding: 0 8px 0 26px;
   cursor: pointer;
 
-  :hover {
-    background: ${(props) => (props.selected ? "#ebf0f7" : "#efeff1")};
+  &:hover {
+    background: ${(props) => (props.$selected ? "#ebf0f7" : "#efeff1")};
   }
 
   ${(props) =>
-    props.selected &&
+    props.$selected &&
     css`
       color: #4965f2;
       background: #ebf0f7;
@@ -35,8 +35,8 @@ export const SideBarItem = (props: SideBarItemProps) => {
     <Wrapper
       style={props.style}
       className={CNSidebarItem}
-      size={props.size}
-      selected={props.selected}
+      $size={props.size}
+      $selected={props.selected}
       onClick={() => props.onClick?.(currentPath)}
     >
       {Icon && <Icon selected={props.selected} style={{ marginRight: "8px" }} />}
diff --git a/client/packages/lowcoder/src/components/resultPanel/BottomResultPanel.tsx b/client/packages/lowcoder/src/components/resultPanel/BottomResultPanel.tsx
index 2a15600c92..36e0a64fd3 100644
--- a/client/packages/lowcoder/src/components/resultPanel/BottomResultPanel.tsx
+++ b/client/packages/lowcoder/src/components/resultPanel/BottomResultPanel.tsx
@@ -6,9 +6,9 @@ import { EditorContext } from "../../comps/editorState";
 import { Layers } from "constants/Layers";
 import { HeaderWrapper, useResultPanel } from "./index";
 
-const Wrapper = styled.div<{ bottom?: number }>`
+const Wrapper = styled.div<{ $bottom?: number }>`
   right: calc(313px + 4px); // FIXME: don't rely on the width of the right panel
-  bottom: ${(props) => (props.bottom ? props.bottom + 4 + "px" : 285 + 4 + "px")};
+  bottom: ${(props) => (props.$bottom ? props.$bottom + 4 + "px" : 285 + 4 + "px")};
   position: fixed;
   z-index: ${Layers.queryResultPanel};
 
@@ -72,7 +72,7 @@ export const BottomResultPanel = (props: BottomResultPanelProps) => {
         });
       }}
     >
-      <Wrapper bottom={bottom} ref={draggableRef}>
+      <Wrapper $bottom={bottom} ref={draggableRef}>
         <HeaderWrapper
           onMouseOver={() => setUnDraggable(false)}
           onMouseOut={() => setUnDraggable(true)}
diff --git a/client/packages/lowcoder/src/components/resultPanel/index.tsx b/client/packages/lowcoder/src/components/resultPanel/index.tsx
index 12161e3a6e..69c405228c 100644
--- a/client/packages/lowcoder/src/components/resultPanel/index.tsx
+++ b/client/packages/lowcoder/src/components/resultPanel/index.tsx
@@ -6,7 +6,7 @@ import { isArray, isObject, isObjectLike, isPlainObject } from "lodash";
 import ReactJson from "react-json-view";
 import { trans } from "../../i18n";
 import { DarkActiveTextColor, GreyTextColor } from "../../constants/style";
-import { Table as AntdTable } from "antd";
+import { default as AntdTable } from "antd/es/table";
 import { Switch } from "components/Switch";
 import { CloseIcon, ErrorIcon, SuccessIcon } from "icons";
 
@@ -57,7 +57,7 @@ const CloseIconWrapper = styled.div`
 
   color: ${GreyTextColor};
 
-  :hover {
+  &:hover {
     color: ${DarkActiveTextColor};
   }
 `;
diff --git a/client/packages/lowcoder/src/components/table/columnTypeView.tsx b/client/packages/lowcoder/src/components/table/columnTypeView.tsx
index bf50fac8cd..645c0764ee 100644
--- a/client/packages/lowcoder/src/components/table/columnTypeView.tsx
+++ b/client/packages/lowcoder/src/components/table/columnTypeView.tsx
@@ -2,9 +2,9 @@ import React, { useEffect, useMemo, useRef, useState } from "react";
 import styled from "styled-components";
 
 const ColumnTypeViewWrapper = styled.div<{
-  textOverflow?: boolean
+  $textOverflow?: boolean
 }>`
-  ${props => !props.textOverflow && `
+  ${props => !props.$textOverflow && `
     div {
       overflow: hidden;
       white-space: nowrap;
@@ -15,33 +15,33 @@ const ColumnTypeViewWrapper = styled.div<{
 `;
 
 const ColumnTypeHoverView = styled.div<{
-  adjustLeft?: number;
-  adjustTop?: number;
-  adjustWidth?: number;
-  adjustHeight?: number;
-  minWidth?: number;
-  padding: string;
-  visible: boolean;
+  $adjustLeft?: number;
+  $adjustTop?: number;
+  $adjustWidth?: number;
+  $adjustHeight?: number;
+  $minWidth?: number;
+  $padding: string;
+  $visible: boolean;
 }>`
   position: absolute;
-  height: ${(props) => (props.adjustHeight ? `${props.adjustHeight}px` : "max-content")};
-  width: ${(props) => (props.adjustWidth ? `${props.adjustWidth}px` : "max-content")};
-  visibility: ${(props) => (props.visible ? "visible" : "hidden")};
-  min-width: ${(props) => (props.minWidth ? `${props.minWidth}px` : "unset")};
+  height: ${(props) => (props.$adjustHeight ? `${props.$adjustHeight}px` : "max-content")};
+  width: ${(props) => (props.$adjustWidth ? `${props.$adjustWidth}px` : "max-content")};
+  visibility: ${(props) => (props.$visible ? "visible" : "hidden")};
+  min-width: ${(props) => (props.$minWidth ? `${props.$minWidth}px` : "unset")};
   max-height: 150px;
   max-width: 300px;
   overflow: auto;
   background: inherit;
   z-index: 3;
-  padding: ${(props) => props.padding};
-  top: ${(props) => `${props.adjustTop || 0}px`};
-  left: ${(props) => `${props.adjustLeft || 0}px`};
+  padding: ${(props) => props.$padding};
+  top: ${(props) => `${props.$adjustTop || 0}px`};
+  left: ${(props) => `${props.$adjustLeft || 0}px`};
 
-  ::-webkit-scrollbar {
+  &::-webkit-scrollbar {
     width: 16px;
   }
 
-  ::-webkit-scrollbar-thumb {
+  &::-webkit-scrollbar-thumb {
     border: 5px solid transparent;
     background-clip: content-box;
     border-radius: 9999px;
@@ -49,7 +49,7 @@ const ColumnTypeHoverView = styled.div<{
     min-height: 30px;
   }
 
-  ::-webkit-scrollbar-thumb:hover {
+  &::-webkit-scrollbar-thumb:hover {
     background-color: rgba(139, 143, 163, 0.5);
   }
 `;
@@ -168,7 +168,7 @@ export default function ColumnTypeView(props: {
     <>
       <ColumnTypeViewWrapper
         ref={wrapperRef}
-        textOverflow={props.textOverflow}
+        $textOverflow={props.textOverflow}
         onMouseEnter={() => {
           delayMouseEnter();
         }}
@@ -182,13 +182,13 @@ export default function ColumnTypeView(props: {
       {isHover && hasOverflow && wrapperRef.current && !props.textOverflow && (
         <ColumnTypeHoverView
           ref={hoverViewRef}
-          visible={adjustedPosition.done}
-          minWidth={wrapperRef.current.offsetParent?.clientWidth}
-          adjustWidth={adjustedPosition.width}
-          adjustHeight={adjustedPosition.height}
-          adjustLeft={adjustedPosition.left}
-          adjustTop={adjustedPosition.top}
-          padding={`${wrapperRef.current.offsetTop}px ${wrapperRef.current.offsetLeft}px`}
+          $visible={adjustedPosition.done}
+          $minWidth={wrapperRef.current.offsetParent?.clientWidth}
+          $adjustWidth={adjustedPosition.width}
+          $adjustHeight={adjustedPosition.height}
+          $adjustLeft={adjustedPosition.left}
+          $adjustTop={adjustedPosition.top}
+          $padding={`${wrapperRef.current.offsetTop}px ${wrapperRef.current.offsetLeft}px`}
           onMouseEnter={() => {
             setIsHover(true);
           }}
diff --git a/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx b/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx
index feb65a8793..f984860baf 100644
--- a/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx
@@ -10,7 +10,7 @@ import { getDefaultTheme, getThemeList } from "redux/selectors/commonSettingSele
 import styled, { css } from "styled-components";
 import { trans } from "i18n";
 import { GreyTextColor } from "constants/style";
-import { Divider } from "antd";
+import { default as Divider } from "antd/es/divider";
 import { THEME_SETTING } from "constants/routesURL";
 import { CustomShortcutsComp } from "./customShortcutsComp";
 import { DEFAULT_THEMEID } from "comps/utils/themeUtil";
@@ -25,9 +25,9 @@ const ItemSpan = styled.span`
   max-width: 218px;
 `;
 
-const getTagStyle = (theme: ThemeDetail) => {
+const getTagStyle = (theme?: ThemeDetail) => {
   return css`
-    background-color: ${theme.canvas};
+    background-color: ${theme?.canvas};
     padding: 3px 4px;
     .left,
     .right {
@@ -35,17 +35,17 @@ const getTagStyle = (theme: ThemeDetail) => {
       border: 1px solid rgba(0, 0, 0, 0.1);
     }
     .left {
-      background-color: ${theme.primary};
+      background-color: ${theme?.primary};
       border-radius: 2px 0 0 2px;
     }
     .right {
-      background-color: ${theme.primarySurface};
+      background-color: ${theme?.primarySurface};
       border-radius: 0 2px 2px 0;
     }
   `;
 };
 
-export const TagDesc = styled.span<{ theme: ThemeDetail }>`
+export const TagDesc = styled.span<{ $theme?: ThemeDetail }>`
   display: inline-flex;
   margin-right: 8px;
   height: 22px;
@@ -53,7 +53,7 @@ export const TagDesc = styled.span<{ theme: ThemeDetail }>`
   border-radius: 2px;
   border: 1px solid rgba(0, 0, 0, 0.1);
   font-size: 13px;
-  ${(props) => getTagStyle(props.theme)}
+  ${(props) => getTagStyle(props.$theme)}
 `;
 
 export const DefaultSpan = styled.span`
@@ -168,7 +168,7 @@ function AppSettingsModal(props: ChildrenInstance) {
     const themeItem = themeList.find((theme) => theme.id === params.value);
     return (
       <ItemSpan>
-        <TagDesc theme={themeItem?.theme}>
+        <TagDesc $theme={themeItem?.theme}>
           <div className="left" />
           <div className="right" />
         </TagDesc>
diff --git a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx
index a99d5eaee4..5c01bdc62d 100644
--- a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx
@@ -33,12 +33,10 @@ import {
 import { trans } from "i18n";
 import { IconControl } from "comps/controls/iconControl";
 import { hasIcon } from "comps/utils";
-import {
-  ConfigProvider,
-  InputRef,
-  AutoComplete,
-  Input as AntInput,
-} from "antd";
+import { InputRef } from "antd/es/input";
+import { default as  AntInputSearch } from "antd/es/input/Search";
+import { default as ConfigProvider } from "antd/es/config-provider";
+import { default as AutoComplete } from "antd/es/auto-complete";
 import { RefControl } from "comps/controls/refControl";
 import {
   booleanExposingStateControl,
@@ -72,7 +70,7 @@ const InputStyle = styled(Input)<{ $style: InputLikeStyleType }>`
   `}
 `;
 
-const CustomStyledSearch = styled(AntInput.Search)<{ $style: InputLikeStyleType }>`
+const CustomStyledSearch = styled(AntInputSearch)<{ $style: InputLikeStyleType }>`
   ${(props) => css`
     padding: 0;
     input.ant-input {
diff --git a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteConstants.tsx b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteConstants.tsx
index eb375a170c..ce554cebf3 100644
--- a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteConstants.tsx
@@ -1,7 +1,7 @@
 import { trans } from "i18n";
 import { check } from "util/convertUtils";
 import { refMethods } from "comps/generators/withMethodExposing";
-import { InputRef } from "antd";
+import { InputRef } from "antd/es/input";
 
 
 import {
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx
index 9d37ab6f18..86fa9cb2f6 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx
@@ -1,4 +1,4 @@
-import { Button } from "antd";
+import { default as Button } from "antd/es/button";
 import { styleControl } from "comps/controls/styleControl";
 import { ButtonStyleType, ButtonStyle } from "comps/controls/styleControlConstants";
 import { migrateOldData } from "comps/generators/simpleGenerators";
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx
index 9b153b83f6..f58b39bd6b 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx
@@ -1,4 +1,6 @@
-import { Dropdown, Menu } from "antd";
+import { default as Menu } from "antd/es/menu";
+import { default as Dropdown } from "antd/es/dropdown";
+import { default as DropdownButton } from "antd/es/dropdown/dropdown-button";
 import { BoolControl } from "comps/controls/boolControl";
 import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
 import { ButtonStyleType } from "comps/controls/styleControlConstants";
@@ -21,7 +23,7 @@ import {
 } from "./buttonCompConstants";
 
 
-const DropdownButton = styled(Dropdown.Button)`
+const StyledDropdownButton = styled(DropdownButton)`
   width: 100%;
   .ant-btn-group {
     width: 100%;
@@ -103,7 +105,7 @@ const DropdownTmpComp = (function () {
             </Button100>
           </Dropdown>
         ) : (
-          <DropdownButton
+          <StyledDropdownButton
             disabled={props.disabled}
             dropdownRender={() => menu}
             onClick={() => props.onEvent("click")}
@@ -122,7 +124,7 @@ const DropdownTmpComp = (function () {
           >
             {/* Avoid button disappearing */}
             {!props.text || props.text?.length === 0 ? " " : props.text}
-          </DropdownButton>
+          </StyledDropdownButton>
         )}
       </ButtonCompWrapper>
     );
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx
index d9dceec3b6..275b125b31 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx
@@ -1,4 +1,4 @@
-import { Button } from "antd";
+import { default as Button } from "antd/es/button";
 import { ButtonCompWrapper, buttonRefMethods } from "comps/comps/buttonComp/buttonCompConstants";
 import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
 import { ButtonEventHandlerControl } from "comps/controls/eventHandlerControl";
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx
index 991bf807fc..a4b075f57b 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx
@@ -1,4 +1,7 @@
-import { Button, Dropdown, Menu, Skeleton } from "antd";
+import { default as Button } from "antd/es/button";
+import { default as Dropdown } from "antd/es/dropdown";
+import { default as Menu } from "antd/es/menu";
+import { default as Skeleton } from "antd/es/skeleton";
 import {
   Button100,
   ButtonCompWrapper,
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx
index f9e4795813..4565f6a79f 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx
@@ -27,17 +27,17 @@ const IconWrapper = styled.div`
 `;
 
 const ButtonCompWrapperStyled = styled(ButtonCompWrapper)<{
-  align: "left" | "center" | "right" | "stretch";
-  showBorder: boolean;
+  $align: "left" | "center" | "right" | "stretch";
+  $showBorder: boolean;
 }>`
   width: 100%;
   display: flex;
-  justify-content: ${(props) => props.align};
+  justify-content: ${(props) => props.$align};
 
   > button {
-    width: ${(props) => props.align !== "stretch" && "auto"};
-    border: ${(props) => !props.showBorder && "none"};
-    box-shadow: ${(props) => !props.showBorder && "none"};
+    width: ${(props) => props.$align !== "stretch" && "auto"};
+    border: ${(props) => !props.$showBorder && "none"};
+    box-shadow: ${(props) => !props.$showBorder && "none"};
   }
 `;
 
@@ -65,8 +65,8 @@ const ToggleTmpComp = (function () {
     return (
       <ButtonCompWrapperStyled
         disabled={props.disabled}
-        align={props.alignment}
-        showBorder={props.showBorder}
+        $align={props.alignment}
+        $showBorder={props.showBorder}
       >
         <Button100
           ref={props.viewRef}
diff --git a/client/packages/lowcoder/src/comps/comps/carouselComp.tsx b/client/packages/lowcoder/src/comps/comps/carouselComp.tsx
index e2e2e654e7..8e9c776d46 100644
--- a/client/packages/lowcoder/src/comps/comps/carouselComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/carouselComp.tsx
@@ -1,4 +1,4 @@
-import { Carousel } from "antd";
+import { default as Carousel } from "antd/es/carousel";
 import { Section, sectionNames } from "lowcoder-design";
 import { BoolControl } from "../controls/boolControl";
 import { UICompBuilder, withDefault } from "../generators";
@@ -20,16 +20,16 @@ import { EditorContext } from "comps/editorState";
 
 // TODO: dots at top position needs proper margin (should be the same as bottom position)
 
-const CarouselItem = styled.div<{ src: string }>`
-  background: ${(props) => props.src && `url(${props.src})`} no-repeat 50% 50%;
+const CarouselItem = styled.div<{ $src: string }>`
+  background: ${(props) => props.$src && `url(${props.$src})`} no-repeat 50% 50%;
   background-size: contain;
 `;
 
-const Container = styled.div<{ bg: string }>`
+const Container = styled.div<{ $bg: string }>`
   &,
   .ant-carousel {
     height: 100%;
-    background-color: ${(props) => props.bg};
+    background-color: ${(props) => props.$bg};
   }
 `;
 
@@ -56,7 +56,7 @@ let CarouselBasicComp = (function () {
       }
     };
     return (
-      <Container ref={containerRef} bg={props.style.background}>
+      <Container ref={containerRef} $bg={props.style.background}>
         <ReactResizeDetector onResize={onResize}>
           <Carousel
             dots={props.showDots}
@@ -66,7 +66,7 @@ let CarouselBasicComp = (function () {
           >
             {props.data.map((url, index) => (
               <div key={index}>
-                <CarouselItem src={url} style={{ height }} />
+                <CarouselItem $src={url} style={{ height }} />
               </div>
             ))}
           </Carousel>
diff --git a/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx b/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx
index 609b8f70d7..e6721cebbd 100644
--- a/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx
@@ -53,7 +53,11 @@ import {
   checkUserInfoData,
   checkMentionListData,
 } from "./commentConstants";
-import { Avatar, List, Button, Mentions, Tooltip } from "antd";
+import { default as Avatar } from "antd/es/avatar";
+import { default as List } from "antd/es/list";
+import { default as Button } from "antd/es/button";
+import { default as Mentions } from "antd/es/mentions";
+import { default as Tooltip } from "antd/es/tooltip";
 import VirtualList, { ListRef } from "rc-virtual-list";
 import _ from "lodash";
 import relativeTime from "dayjs/plugin/relativeTime";
diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx
index 5d2cd30130..9445abd6e9 100644
--- a/client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx
@@ -278,9 +278,9 @@ type ViewPropsWithSelect = ContainerBaseProps & {
   dragSelectedComps?: Set<string>;
 };
 
-const ItemWrapper = styled.div<{ disableInteract?: boolean }>`
+const ItemWrapper = styled.div<{ $disableInteract?: boolean }>`
   height: 100%;
-  pointer-events: ${(props) => (props.disableInteract ? "none" : "unset")};
+  pointer-events: ${(props) => (props.$disableInteract ? "none" : "unset")};
 `;
 
 const GridItemWrapper = React.forwardRef(
@@ -291,7 +291,7 @@ const GridItemWrapper = React.forwardRef(
     const editorState = useContext(EditorContext);
     const { children, ...divProps } = props;
     return (
-      <ItemWrapper ref={ref} disableInteract={editorState.disableInteract} {...divProps}>
+      <ItemWrapper ref={ref} $disableInteract={editorState.disableInteract} {...divProps}>
         {props.children}
       </ItemWrapper>
     );
diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/flowContainerView.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/flowContainerView.tsx
index 186e74bd30..5dce4e4d54 100644
--- a/client/packages/lowcoder/src/comps/comps/containerComp/flowContainerView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/containerComp/flowContainerView.tsx
@@ -9,10 +9,10 @@ import { ThemeContext } from "comps/utils/themeContext";
 import { defaultTheme } from "comps/controls/styleControlConstants";
 import styled from "styled-components";
 
-const FlowContainerWrapper = styled.div<{ bgColor: string; maxWidth?: number; minHeight: string }>`
-  background-color: ${(props) => props.bgColor};
-  max-width: ${(props) => props.maxWidth}px;
-  min-height: ${(props) => props.minHeight};
+const FlowContainerWrapper = styled.div<{ $bgColor: string; $maxWidth?: number; $minHeight: string }>`
+  background-color: ${(props) => props.$bgColor};
+  max-width: ${(props) => props.$maxWidth}px;
+  min-height: ${(props) => props.$minHeight};
   display: flex;
   flex-direction: column;
 
@@ -40,7 +40,7 @@ export function FlowContainerView(
   const bgColor = (useContext(ThemeContext)?.theme || defaultTheme).canvas;
 
   return (
-    <FlowContainerWrapper bgColor={bgColor} maxWidth={maxWidth} minHeight={minHeight}>
+    <FlowContainerWrapper $bgColor={bgColor} $maxWidth={maxWidth} $minHeight={minHeight}>
       {layouts.map((layout, index) => {
         const comp = props.items[layout.i];
         if (!comp) {
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateRangeUIView.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/dateRangeUIView.tsx
index b07a1af2c4..b349ae0615 100644
--- a/client/packages/lowcoder/src/comps/comps/dateComp/dateRangeUIView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/dateComp/dateRangeUIView.tsx
@@ -7,11 +7,13 @@ import React, { useContext } from "react";
 import styled from "styled-components";
 import type { DateTimeStyleType } from "../../controls/styleControlConstants";
 import { EditorContext } from "../../editorState";
-import { DatePicker } from "antd";
+import { default as DatePicker } from "antd/es/date-picker";
 import { hasIcon } from "comps/utils";
 import { omit } from "lodash";
 
-const RangePickerStyled = styled(DatePicker.RangePicker)<{ $style: DateTimeStyleType }>`
+const { RangePicker } = DatePicker;
+
+const RangePickerStyled = styled((props: any) => <RangePicker {...props} />)<{ $style: DateTimeStyleType }>`
   width: 100%;
   ${(props) => props.$style && getStyle(props.$style)}
 `;
@@ -46,8 +48,8 @@ export const DateRangeUIView = (props: DateRangeUIViewProps) => {
       {...omit(props, "onChange")}
       ref={props.viewRef as any}
       value={[props.start, props.end]}
-      disabledDate={(current) => disabledDate(current, props.minDate, props.maxDate)}
-      onCalendarChange={(time) => {
+      disabledDate={(current: any) => disabledDate(current, props.minDate, props.maxDate)}
+      onCalendarChange={(time: any) => {
         props.onChange(time?.[0], time?.[1]);
       }}
       inputReadOnly={checkIsMobile(editorState?.getAppSettings().maxWidth)}
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateUIView.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/dateUIView.tsx
index ef8ef0840c..c00c05d615 100644
--- a/client/packages/lowcoder/src/comps/comps/dateComp/dateUIView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/dateComp/dateUIView.tsx
@@ -7,7 +7,7 @@ import React, { useContext } from "react";
 import styled from "styled-components";
 import type { DateTimeStyleType } from "../../controls/styleControlConstants";
 import { EditorContext } from "../../editorState";
-import { DatePicker } from "antd";
+import { default as DatePicker } from "antd/es/date-picker";
 
 const DatePickerStyled = styled(DatePicker)<{ $style: DateTimeStyleType }>`
   width: 100%;
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx
index 382d3733f0..219766f5ad 100644
--- a/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx
@@ -48,8 +48,8 @@ import { dateRefMethods, disabledTime, handleDateChange } from "comps/comps/date
 import { TimeUIView } from "./timeUIView";
 import { TimeRangeUIView } from "comps/comps/dateComp/timeRangeUIView";
 import { RefControl } from "comps/controls/refControl";
-import { CommonPickerMethods } from "antd/lib/date-picker/generatePicker/interface";
-import { TimePickerProps } from "antd";
+import { CommonPickerMethods } from "antd/es/date-picker/generatePicker/interface";
+import { TimePickerProps } from "antd/es/time-picker";
 
 import { EditorContext } from "comps/editorState";
 
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/timeRangeUIView.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/timeRangeUIView.tsx
index 1a34ecf4e2..a4a36ae684 100644
--- a/client/packages/lowcoder/src/comps/comps/dateComp/timeRangeUIView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/dateComp/timeRangeUIView.tsx
@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { TimePicker } from "antd";
+import { default as TimePicker } from "antd/es/time-picker";
 import { DateTimeStyleType } from "../../controls/styleControlConstants";
 import { getStyle } from "comps/comps/dateComp/dateCompUtil";
 import { useUIView } from "../../utils/useUIView";
@@ -11,7 +11,9 @@ import dayjs from "dayjs";
 import { hasIcon } from "comps/utils";
 import { omit } from "lodash";
 
-const RangePickerStyled = styled(TimePicker.RangePicker)<{ $style: DateTimeStyleType }>`
+const { RangePicker } = TimePicker;
+
+const RangePickerStyled = styled((props: any) => <RangePicker {...props} />)<{ $style: DateTimeStyleType }>`
   width: 100%;
   ${(props) => props.$style && getStyle(props.$style)}
 `;
@@ -46,7 +48,7 @@ export const TimeRangeUIView = (props: TimeRangeUIViewProps) => {
       value={[props.start, props.end]}
       order={true}
       hideDisabledOptions
-      onCalendarChange={(time) => {
+      onCalendarChange={(time: any) => {
         props.onChange(time?.[0], time?.[1]);
       }}
       inputReadOnly={checkIsMobile(editorState?.getAppSettings().maxWidth)}
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/timeUIView.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/timeUIView.tsx
index e7933da918..5c51d12ab2 100644
--- a/client/packages/lowcoder/src/comps/comps/dateComp/timeUIView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/dateComp/timeUIView.tsx
@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { TimePicker } from "antd";
+import { default as TimePicker } from "antd/es/time-picker";
 import { DateTimeStyleType } from "../../controls/styleControlConstants";
 import { getStyle } from "comps/comps/dateComp/dateCompUtil";
 import { useUIView } from "../../utils/useUIView";
diff --git a/client/packages/lowcoder/src/comps/comps/dividerComp.tsx b/client/packages/lowcoder/src/comps/comps/dividerComp.tsx
index 5d5517be27..5df573c18a 100644
--- a/client/packages/lowcoder/src/comps/comps/dividerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/dividerComp.tsx
@@ -1,4 +1,4 @@
-import { Divider, DividerProps } from "antd";
+import { default as Divider, DividerProps } from "antd/es/divider";
 import { StringControl } from "comps/controls/codeControl";
 import { BoolControl } from "comps/controls/boolControl";
 import { alignControl } from "comps/controls/alignControl";
diff --git a/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx b/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx
index e801a3a29f..52dbe74d07 100644
--- a/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx
@@ -1,6 +1,6 @@
-import { Button, Upload as AntdUpload } from "antd";
-import { UploadChangeParam } from "antd/lib/upload";
-import { UploadFile, UploadProps } from "antd/lib/upload/interface";
+import { default as Button } from "antd/es/button";
+import { default as AntdUpload } from "antd/es/upload";
+import { UploadFile, UploadProps, UploadChangeParam } from "antd/es/upload/interface";
 import { Buffer } from "buffer";
 import { darkenColor } from "components/colorSelect/colorUtils";
 import { Section, sectionNames } from "components/Section";
diff --git a/client/packages/lowcoder/src/comps/comps/formComp/createForm.tsx b/client/packages/lowcoder/src/comps/comps/formComp/createForm.tsx
index beb2c7b4a1..37fab64d4f 100644
--- a/client/packages/lowcoder/src/comps/comps/formComp/createForm.tsx
+++ b/client/packages/lowcoder/src/comps/comps/formComp/createForm.tsx
@@ -1,4 +1,6 @@
-import { Form, FormInstance, Select } from "antd";
+import { default as Form, FormInstance } from "antd/es/form";
+import { default as AntdFormItem } from "antd/es/form/FormItem";
+import { default as Select } from "antd/es/select";
 import {
   CheckBox,
   CustomModal,
@@ -29,7 +31,7 @@ import DataSourceIcon from "components/DataSourceIcon";
 import { messageInstance } from "lowcoder-design";
 
 const OpenDialogButton = styled.span`
-  :hover {
+  &:hover {
     cursor: pointer;
   }
 
@@ -75,7 +77,7 @@ const SelectOptionWrapper = styled.div`
   width: 100%;
   align-items: center;
 `;
-const FormItem = styled(Form.Item)`
+const FormItem = styled(AntdFormItem)`
   margin: 0;
   line-height: 13px;
   width: 100%;
@@ -115,11 +117,11 @@ const DataBody = styled.div`
   overflow: auto;
   height: 263px;
 
-  ::-webkit-scrollbar {
+  &::-webkit-scrollbar {
     width: 14px;
   }
 
-  ::-webkit-scrollbar-thumb {
+  &::-webkit-scrollbar-thumb {
     border: 4px solid transparent;
     background-clip: content-box;
     border-radius: 9999px;
@@ -140,23 +142,23 @@ const DataRow = styled.div<{ disabled?: boolean }>`
   color: ${(props) => (props.disabled ? "#B8B9BF" : "#333333")};
   line-height: 13px;
 `;
-const CellName = styled.div<{ head?: boolean }>`
+const CellName = styled.div<{ $head?: boolean }>`
   width: 176px;
-  padding-left: ${(props) => (props.head ? "16px" : "10px")};
+  padding-left: ${(props) => (props.$head ? "16px" : "10px")};
 `;
-const CellType = styled.div<{ head?: boolean }>`
+const CellType = styled.div<{ $head?: boolean }>`
   width: 128px;
   padding-left: 16px;
 `;
-const CellLabel = styled.div<{ head?: boolean }>`
+const CellLabel = styled.div<{ $head?: boolean }>`
   width: 104px;
-  padding-left: ${(props) => (props.head ? "16px" : "10px")};
+  padding-left: ${(props) => (props.$head ? "16px" : "10px")};
 `;
-const CellComp = styled.div<{ head?: boolean }>`
+const CellComp = styled.div<{ $head?: boolean }>`
   width: 126px;
   padding-left: 16px;
 `;
-const CellRequired = styled.div<{ head?: boolean }>`
+const CellRequired = styled.div<{ $head?: boolean }>`
   /* width: 52px; */
   padding-left: 16px;
 `;
@@ -183,7 +185,7 @@ const EditTextWrapper = styled.div<{ disabled?: boolean }>`
     color: ${(props) => (props.disabled ? "#B8B9BF" : "#333333")};
     line-height: 13px;
 
-    :hover {
+    &:hover {
       background-color: #f5f5f6;
     }
   }
@@ -209,7 +211,7 @@ const EditTextWrapper = styled.div<{ disabled?: boolean }>`
     background-color: #ffffff;
     border: 1px solid #315efb;
 
-    :focus {
+    &:focus {
       border-color: #315efb;
       box-shadow: 0 0 0 2px #d6e4ff;
     }
@@ -221,7 +223,7 @@ const CompFormItem = styled(FormItem)`
     color: #333333;
     line-height: 13px;
 
-    :hover {
+    &:hover {
       color: #315efb;
     }
   }
@@ -625,11 +627,11 @@ const CreateFormBody = (props: { onCreate: CreateHandler }) => {
         ) : (
           <>
             <HeaderRow>
-              <CellName head={true}>{trans("formComp.columnName")}</CellName>
-              <CellType head={true}>{trans("formComp.dataType")}</CellType>
-              <CellLabel head={true}>{trans("label")}</CellLabel>
-              <CellComp head={true}>{trans("formComp.compType")}</CellComp>
-              <CellRequired head={true}>{trans("formComp.required")}</CellRequired>
+              <CellName $head={true}>{trans("formComp.columnName")}</CellName>
+              <CellType $head={true}>{trans("formComp.dataType")}</CellType>
+              <CellLabel $head={true}>{trans("label")}</CellLabel>
+              <CellComp $head={true}>{trans("formComp.compType")}</CellComp>
+              <CellRequired $head={true}>{trans("formComp.required")}</CellRequired>
             </HeaderRow>
             <SortableBody
               items={items}
diff --git a/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx b/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx
index 28f0af0f41..61a02edeb4 100644
--- a/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx
@@ -40,7 +40,7 @@ import {
 import { TriContainer } from "../triContainerComp/triContainer";
 import { traverseCompTree } from "../containerBase/utils";
 import { IForm } from "./formDataConstants";
-import { Spin } from "antd";
+import { default as Spin } from "antd/es/spin";
 import { BoolControl } from "comps/controls/boolControl";
 import { BottomResTypeEnum } from "types/bottomRes";
 import { BoolCodeControl, JSONObjectControl } from "comps/controls/codeControl";
diff --git a/client/packages/lowcoder/src/comps/comps/gridLayoutComp/canvasView.tsx b/client/packages/lowcoder/src/comps/comps/gridLayoutComp/canvasView.tsx
index e8d0cee74b..9d59591a4a 100644
--- a/client/packages/lowcoder/src/comps/comps/gridLayoutComp/canvasView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/gridLayoutComp/canvasView.tsx
@@ -20,17 +20,17 @@ import { checkIsMobile } from "util/commonUtils";
 import { CanvasContainerID } from "constants/domLocators";
 import { CNRootContainer } from "constants/styleSelectors";
 
-const UICompContainer = styled.div<{ maxWidth?: number; readOnly?: boolean; bgColor: string }>`
+const UICompContainer = styled.div<{ $maxWidth?: number; readOnly?: boolean; $bgColor: string }>`
   height: 100%;
   margin: 0 auto;
-  max-width: ${(props) => props.maxWidth || 1600}px;
-  background-color: ${(props) => props.bgColor};
+  max-width: ${(props) => props.$maxWidth || 1600}px;
+  background-color: ${(props) => props.$bgColor};
 `;
 
 // modal/drawer container
-export const CanvasContainer = styled.div<{ maxWidth: number }>`
-  max-width: ${(props) => props.maxWidth}px;
-  min-width: min(${(props) => props.maxWidth}px, 718px);
+export const CanvasContainer = styled.div<{ $maxWidth: number }>`
+  max-width: ${(props) => props.$maxWidth}px;
+  min-width: min(${(props) => props.$maxWidth}px, 718px);
   margin: 0 auto;
   height: 100%;
   contain: paint;
@@ -106,10 +106,10 @@ export function CanvasView(props: ContainerBaseProps) {
   if (readOnly) {
     return (
       <UICompContainer
-        maxWidth={maxWidth}
+        $maxWidth={maxWidth}
         readOnly={true}
         className={CNRootContainer}
-        bgColor={bgColor}
+        $bgColor={bgColor}
       >
         <div>
           <Profiler id="Panel" onRender={profilerCallback}>
@@ -129,9 +129,9 @@ export function CanvasView(props: ContainerBaseProps) {
   }
 
   return (
-    <CanvasContainer maxWidth={maxWidth} id={CanvasContainerID}>
+    <CanvasContainer $maxWidth={maxWidth} id={CanvasContainerID}>
       <EditorContainer ref={scrollContainerRef}>
-        <UICompContainer maxWidth={maxWidth} className={CNRootContainer} bgColor={bgColor}>
+        <UICompContainer $maxWidth={maxWidth} className={CNRootContainer} $bgColor={bgColor}>
           <DragSelector
             onMouseDown={() => {
               setDragSelectedComp(EmptySet);
diff --git a/client/packages/lowcoder/src/comps/comps/imageComp.tsx b/client/packages/lowcoder/src/comps/comps/imageComp.tsx
index 3c9da34e14..81d6823429 100644
--- a/client/packages/lowcoder/src/comps/comps/imageComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/imageComp.tsx
@@ -26,7 +26,7 @@ import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { AutoHeightControl } from "comps/controls/autoHeightControl";
 import { BoolControl } from "comps/controls/boolControl";
-import { Image as AntImage } from "antd";
+import { default as AntImage } from "antd/es/image";
 import { DEFAULT_IMG_URL } from "util/stringUtils";
 
 import { useContext } from "react";
diff --git a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/dateWidget.tsx b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/dateWidget.tsx
index 954e6a94f3..94887ffa69 100644
--- a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/dateWidget.tsx
+++ b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/dateWidget.tsx
@@ -1,5 +1,5 @@
 import { WidgetProps } from "@rjsf/utils";
-import { DatePicker } from "antd";
+import { default as DatePicker } from "antd/es/date-picker";
 import dayjs from "dayjs";
 
 const DATE_PICKER_STYLE = {
diff --git a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/errorBoundary.tsx b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/errorBoundary.tsx
index db744eb7bf..fc20df2c50 100644
--- a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/errorBoundary.tsx
+++ b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/errorBoundary.tsx
@@ -1,4 +1,4 @@
-import { Button } from "antd";
+import { default as Button } from "antd/es/button";
 import { trans } from "i18n";
 import React from "react";
 
diff --git a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx
index a3d46fe2a7..37d5e4198d 100644
--- a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx
@@ -2,7 +2,7 @@ import { withTheme } from '@rjsf/core';
 import { RJSFValidationError, ErrorListProps, UISchemaSubmitButtonOptions } from "@rjsf/utils";
 import validator from "@rjsf/validator-ajv8";
 // import Ajv from "@rjsf/validator-ajv8";
-import { Button } from "antd";
+import { default as Button } from "antd/es/button";
 import { BoolControl } from "comps/controls/boolControl";
 import { jsonObjectExposingStateControl } from "comps/controls/codeStateControl";
 import { styleControl } from "comps/controls/styleControl";
@@ -320,11 +320,9 @@ let FormBasicComp = (function () {
           )}
 
           {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
-            <>
-              <Section name={sectionNames.style}>
-                {children.style.getPropertyView()}
-              </Section>
-            </>
+            <Section name={sectionNames.style}>
+              {children.style.getPropertyView()}
+            </Section>
           )}
 
         </>
diff --git a/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx b/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx
index 38c1a8063e..9e65222818 100644
--- a/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx
+++ b/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx
@@ -15,7 +15,7 @@ import { CanvasContainerID } from "constants/domLocators";
 import { EditorContainer, EmptyContent } from "pages/common/styledComponent";
 import { Layers } from "constants/Layers";
 import { ExternalEditorContext } from "util/context/ExternalEditorContext";
-import { Skeleton } from "antd";
+import { default as Skeleton } from "antd/es/skeleton";
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
 
 const TabBar = React.lazy(() => import("antd-mobile/es/components/tab-bar"));
@@ -43,7 +43,7 @@ const TabLayoutViewContainer = styled.div`
   height: calc(100% - ${TabBarHeight}px);
 `;
 
-const TabBarWrapper = styled.div<{ readOnly: boolean }>`
+const TabBarWrapper = styled.div<{ $readOnly: boolean }>`
   max-width: inherit;
   background: white;
   margin: 0 auto;
@@ -51,7 +51,7 @@ const TabBarWrapper = styled.div<{ readOnly: boolean }>`
   bottom: 0;
   left: 0;
   right: 0;
-  width: ${(props) => (props.readOnly ? "100%" : "418px")};
+  width: ${(props) => (props.$readOnly ? "100%" : "418px")};
   z-index: ${Layers.tabBar};
   padding-bottom: env(safe-area-inset-bottom, 0);
 
@@ -75,7 +75,7 @@ type TabBarProps = {
 function TabBarView(props: TabBarProps) {
   return (
     <Suspense fallback={<Skeleton />}>
-      <TabBarWrapper readOnly={props.readOnly}>
+      <TabBarWrapper $readOnly={props.readOnly}>
         <TabBar
           onChange={(key: string) => {
             if (key) {
@@ -201,7 +201,7 @@ MobileTabLayoutTmp = withViewFn(MobileTabLayoutTmp, (comp) => {
   }
 
   return (
-    <CanvasContainer maxWidth={MaxWidth} id={CanvasContainerID}>
+    <CanvasContainer $maxWidth={MaxWidth} id={CanvasContainerID}>
       <EditorContainer>{appView}</EditorContainer>
       {tabBarView}
     </CanvasContainer>
diff --git a/client/packages/lowcoder/src/comps/comps/layout/navLayout.tsx b/client/packages/lowcoder/src/comps/comps/layout/navLayout.tsx
index 368e459a97..35d13862d1 100644
--- a/client/packages/lowcoder/src/comps/comps/layout/navLayout.tsx
+++ b/client/packages/lowcoder/src/comps/comps/layout/navLayout.tsx
@@ -1,4 +1,7 @@
-import { Layout, Menu as AntdMenu, MenuProps, Segmented } from "antd";
+import { default as Layout } from "antd/es/layout";
+import { default as LayoutSider } from "antd/es/layout/Sider";
+import { default as AntdMenu, MenuProps } from "antd/es/menu";
+import { default as Segmented } from "antd/es/segmented";
 import MainContent from "components/layout/MainContent";
 import { LayoutMenuItemComp, LayoutMenuItemListComp } from "comps/comps/layout/layoutMenuItemComp";
 import { menuPropertyView } from "comps/comps/navComp/components/MenuItemList";
@@ -41,7 +44,7 @@ import {
 const DEFAULT_WIDTH = 240;
 type MenuItemStyleOptionValue = "normal" | "hover" | "active";
 
-const StyledSide = styled(Layout.Sider)`
+const StyledSide = styled(LayoutSider)`
   max-height: calc(100vh - ${TopHeaderHeight});
   overflow: auto;
 
diff --git a/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx b/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx
index 10bcefa553..97319c64ed 100644
--- a/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx
@@ -1,4 +1,4 @@
-import { Pagination } from "antd";
+import { default as Pagination } from "antd/es/pagination";
 import { EditorContext } from "comps/editorState";
 import { BackgroundColorContext } from "comps/utils/backgroundColorContext";
 import _ from "lodash";
diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx
index b77266fb55..1f7815a80e 100644
--- a/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx
+++ b/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx
@@ -33,11 +33,11 @@ import {
   ButtonStyleControl,
 } from "./videobuttonCompConstants";
 import { RefControl } from "comps/controls/refControl";
+import { AutoHeightControl } from "comps/controls/autoHeightControl";
 import {
-  AutoHeightControl,
   heightCalculator,
   widthCalculator,
-} from "@lowcoder-ee/index.sdk";
+} from "comps/controls/styleControlConstants";
 import { useEffect, useRef, useState } from "react";
 import ReactResizeDetector from "react-resize-detector";
 
@@ -176,21 +176,21 @@ function submitForm(editorState: EditorState, formName: string) {
   }
 }
 
-let ButtonTmpComp = (function () {
-  const childrenMap = {
-    iconSize: withDefault(StringControl, "20px"),
-    type: dropdownControl(typeOptions, ""),
-    autoHeight: withDefault(AutoHeightControl, "fixed"),
-    aspectRatio: withDefault(StringControl, "1 / 1"),
-    onEvent: ButtonEventHandlerControl,
-    disabled: BoolCodeControl,
-    loading: BoolCodeControl,
-    form: SelectFormControl,
-    prefixIcon: IconControl,
-    style: ButtonStyleControl,
-    viewRef: RefControl<HTMLElement>,
-  };
+const childrenMap = {
+  iconSize: withDefault(StringControl, "20px"),
+  type: dropdownControl(typeOptions, ""),
+  autoHeight: withDefault(AutoHeightControl, "fixed"),
+  aspectRatio: withDefault(StringControl, "1 / 1"),
+  onEvent: ButtonEventHandlerControl,
+  disabled: BoolCodeControl,
+  loading: BoolCodeControl,
+  form: SelectFormControl,
+  prefixIcon: IconControl,
+  style: ButtonStyleControl,
+  viewRef: RefControl<HTMLElement>,
+};
 
+let ButtonTmpComp = (function () {
   return new UICompBuilder(childrenMap, (props) => {
     const [width, setWidth] = useState(120);
     const [height, setHeight] = useState(0);
diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx
index 80bf6e8c1f..4ab476eace 100644
--- a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx
@@ -1,5 +1,5 @@
 import { CloseOutlined } from "@ant-design/icons";
-import { Button } from "antd";
+import { default as Button } from "antd/es/button";
 import { ContainerCompBuilder } from "comps/comps/containerBase/containerCompBuilder";
 import {
   gridItemCompToGridItems,
@@ -221,7 +221,7 @@ const rtmInit = async (appId: any, uid: any, token: any, channel: any) => {
   await rtmChannelResponse.join();
 };
 
-export const meetingControllerChildren = {
+const meetingControllerChildren = {
   visible: withDefault(BooleanStateControl, "false"),
   onEvent: eventHandlerControl(EventOptions),
   width: StringControl,
diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx
index 6c133ab6b7..68497e186c 100644
--- a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx
@@ -1,16 +1,14 @@
-import { BoolCodeControl } from "comps/controls/codeControl";
+import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
 import { EditorContext } from "comps/editorState";
-import { withDefault } from "comps/generators";
+import { withDefault } from "comps/generators/simpleGenerators";
 import { UICompBuilder } from "comps/generators/uiCompBuilder";
 import ReactResizeDetector from "react-resize-detector";
-
 import {
   Section,
   sectionNames,
 } from "lowcoder-design";
 import { trans } from "i18n";
-
-import styled, { css } from "styled-components";
+import styled from "styled-components";
 import {
   CommonNameConfig,
   NameConfig,
@@ -19,22 +17,13 @@ import {
 import { ButtonStyleControl } from "./videobuttonCompConstants";
 import { RefControl } from "comps/controls/refControl";
 import { useEffect, useRef, useState } from "react";
-
 import { AutoHeightControl } from "comps/controls/autoHeightControl";
 import { client } from "./videoMeetingControllerComp";
-
 import { IAgoraRTCRemoteUser } from "agora-rtc-sdk-ng";
-
-import {
-  MeetingEventHandlerControl,
-  StringControl,
-  StringStateControl,
-  hiddenPropertyView,
-  stringExposingStateControl,
-} from "@lowcoder-ee/index.sdk";
-import { BoolShareVideoControl } from "./meetingControlerUtils";
-
 import { useContext } from "react";
+import { MeetingEventHandlerControl } from "comps/controls/eventHandlerControl";
+import { StringStateControl, stringExposingStateControl } from "comps/controls/codeStateControl";
+import { hiddenPropertyView } from "comps/utils/propertyUtils";
 
 const VideoContainer = styled.video`
   height: 100%;
@@ -44,7 +33,7 @@ const VideoContainer = styled.video`
   justify-content: space-around;
 `;
 
-export const meetingStreamChildren = {
+const meetingStreamChildren = {
   autoHeight: withDefault(AutoHeightControl, "auto"),
   profilePadding: withDefault(StringControl, "0px"),
   profileBorderRadius: withDefault(StringControl, "0px"),
@@ -59,7 +48,7 @@ export const meetingStreamChildren = {
   noVideoText: stringExposingStateControl(trans("meeting.noVideo")),
 };
 
-let VideoCompBuilder = (function (props) {
+let VideoCompBuilder = (function () {
   return new UICompBuilder(meetingStreamChildren, (props) => {
     const videoRef = useRef<HTMLVideoElement>(null);
     const conRef = useRef<HTMLDivElement>(null);
diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/videoSharingStreamComp.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/videoSharingStreamComp.tsx
index b7663327ee..192a09ed42 100644
--- a/client/packages/lowcoder/src/comps/comps/meetingComp/videoSharingStreamComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/meetingComp/videoSharingStreamComp.tsx
@@ -1,4 +1,4 @@
-import { BoolCodeControl } from "comps/controls/codeControl";
+import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
 import { EditorContext } from "comps/editorState";
 import { withDefault } from "comps/generators";
 import { UICompBuilder } from "comps/generators/uiCompBuilder";
@@ -8,8 +8,7 @@ import {
   sectionNames,
 } from "lowcoder-design";
 import { trans } from "i18n";
-
-import styled, { css } from "styled-components";
+import styled from "styled-components";
 import {
   CommonNameConfig,
   NameConfig,
@@ -18,21 +17,13 @@ import {
 import { ButtonStyleControl } from "./videobuttonCompConstants";
 import { RefControl } from "comps/controls/refControl";
 import { useEffect, useRef, useState } from "react";
-
 import { AutoHeightControl } from "comps/controls/autoHeightControl";
 import { client } from "./videoMeetingControllerComp";
-
 import { IAgoraRTCRemoteUser } from "agora-rtc-sdk-ng";
-
-import {
-  MeetingEventHandlerControl,
-  StringControl,
-  hiddenPropertyView,
-  stringExposingStateControl,
-} from "@lowcoder-ee/index.sdk";
-import { BoolShareVideoControl } from "./meetingControlerUtils";
-
 import { useContext } from "react";
+import { MeetingEventHandlerControl } from "comps/controls/eventHandlerControl";
+import { stringExposingStateControl } from "comps/controls/codeStateControl";
+import { hiddenPropertyView } from "comps/utils/propertyUtils";
 
 const VideoContainer = styled.video`
   height: 100%;
@@ -42,7 +33,7 @@ const VideoContainer = styled.video`
   justify-content: space-around;
 `;
 
-export const meetingStreamChildren = {
+const sharingStreamChildren = {
   autoHeight: withDefault(AutoHeightControl, "fixed"),
   profilePadding: withDefault(StringControl, "0px"),
   profileBorderRadius: withDefault(StringControl, "0px"),
@@ -56,8 +47,8 @@ export const meetingStreamChildren = {
   noVideoText: stringExposingStateControl(trans("meeting.noVideo")),
 };
 
-let SharingCompBuilder = (function (props) {
-  return new UICompBuilder(meetingStreamChildren, (props) => {
+let SharingCompBuilder = (function () {
+  return new UICompBuilder(sharingStreamChildren, (props) => {
     const videoRef = useRef<HTMLVideoElement>(null);
     const conRef = useRef<HTMLDivElement>(null);
     const [userId, setUserId] = useState();
diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/videobuttonCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/videobuttonCompConstants.tsx
index 26da52f348..b0068495c1 100644
--- a/client/packages/lowcoder/src/comps/comps/meetingComp/videobuttonCompConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/meetingComp/videobuttonCompConstants.tsx
@@ -1,4 +1,4 @@
-import { Button } from "antd";
+import { default as Button } from "antd/es/button";
 import { styleControl } from "comps/controls/styleControl";
 import {
   ButtonStyleType,
@@ -32,8 +32,8 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) {
         margin: ${buttonStyle.margin};
         padding: ${buttonStyle.padding};
 
-        :hover,
-        :focus {
+        &:hover,
+        &:focus {
           color: ${buttonStyle.text};
           background-color: ${hoverColor};
           border-color: ${buttonStyle.border === buttonStyle.background
@@ -41,7 +41,7 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) {
             : buttonStyle.border};
         }
 
-        :active {
+        &:active {
           color: ${buttonStyle.text};
           background-color: ${activeColor};
           border-color: ${buttonStyle.border === buttonStyle.background
diff --git a/client/packages/lowcoder/src/comps/comps/moduleContainerComp/moduleContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/moduleContainerComp/moduleContainerComp.tsx
index 61202f7f2e..e2a1f0bac6 100644
--- a/client/packages/lowcoder/src/comps/comps/moduleContainerComp/moduleContainerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/moduleContainerComp/moduleContainerComp.tsx
@@ -14,8 +14,8 @@ import {
   InnerGrid,
 } from "../containerComp/containerView";
 
-const StyledInnerGrid = styled(InnerGrid)<ContainerBaseProps & { bordered: boolean }>`
-  border: ${(props) => (!props.bordered ? "0px" : `1px solid ${BorderColor}`)};
+const StyledInnerGrid = styled(InnerGrid)<ContainerBaseProps & { $bordered: boolean }>`
+  border: ${(props) => (!props.$bordered ? "0px" : `1px solid ${BorderColor}`)};
   height: 100%;
 `;
 
@@ -36,7 +36,7 @@ function ModuleContainerView(props: ContainerBaseProps) {
       overflow="hidden"
       containerPadding={readOnly ? [0, 0] : [4, 4]}
       hintPlaceholder={HintPlaceHolder}
-      bordered={!readOnly}
+      $bordered={!readOnly}
       isDraggable={!readOnly}
       isDroppable={!readOnly}
       isSelectable={!readOnly}
diff --git a/client/packages/lowcoder/src/comps/comps/navComp/components/DraggableItem.tsx b/client/packages/lowcoder/src/comps/comps/navComp/components/DraggableItem.tsx
index 6e857c07a6..7a4c6ba1b3 100644
--- a/client/packages/lowcoder/src/comps/comps/navComp/components/DraggableItem.tsx
+++ b/client/packages/lowcoder/src/comps/comps/navComp/components/DraggableItem.tsx
@@ -3,7 +3,7 @@ import React, { Ref } from "react";
 import { HTMLAttributes, ReactNode } from "react";
 import styled from "styled-components";
 
-const Wrapper = styled.div<{ dragging: boolean; isOver: boolean; dropInAsSub: boolean }>`
+const Wrapper = styled.div<{ $dragging: boolean; $isOver: boolean; $dropInAsSub: boolean }>`
   position: relative;
   width: 100%;
   height: 30px;
@@ -14,15 +14,15 @@ const Wrapper = styled.div<{ dragging: boolean; isOver: boolean; dropInAsSub: bo
   padding: 0 8px;
   background-color: #ffffff;
   align-items: center;
-  opacity: ${(props) => (props.dragging ? "0.5" : 1)};
+  opacity: ${(props) => (props.$dragging ? "0.5" : 1)};
 
   &::after {
     content: "";
-    display: ${(props) => (props.isOver ? "block" : "none")};
+    display: ${(props) => (props.$isOver ? "block" : "none")};
     height: 4px;
     border-radius: 4px;
     position: absolute;
-    left: ${(props) => (props.dropInAsSub ? "15px" : "-1px")};
+    left: ${(props) => (props.$dropInAsSub ? "15px" : "-1px")};
     right: 0;
     background-color: #315efb;
     bottom: -5px;
@@ -93,7 +93,7 @@ function DraggableItem(props: IProps, ref: Ref<HTMLDivElement>) {
     ...divProps
   } = props;
   return (
-    <Wrapper isOver={isOver} dragging={dragging} dropInAsSub={dropInAsSub} ref={ref} {...divProps}>
+    <Wrapper $isOver={isOver} $dragging={dragging} $dropInAsSub={dropInAsSub} ref={ref} {...divProps}>
       <div className="draggable-handle-icon">
         <DragIcon {...dragListeners} />
       </div>
diff --git a/client/packages/lowcoder/src/comps/comps/navComp/components/DroppablePlaceHolder.tsx b/client/packages/lowcoder/src/comps/comps/navComp/components/DroppablePlaceHolder.tsx
index 4a890fd6f8..72c15cf854 100644
--- a/client/packages/lowcoder/src/comps/comps/navComp/components/DroppablePlaceHolder.tsx
+++ b/client/packages/lowcoder/src/comps/comps/navComp/components/DroppablePlaceHolder.tsx
@@ -8,7 +8,7 @@ interface IDroppablePlaceholderProps {
   targetListSize: number;
 }
 
-const PlaceHolderWrapper = styled.div<{ active: boolean }>`
+const PlaceHolderWrapper = styled.div<{ $active: boolean }>`
   position: absolute;
   width: 100%;
   top: -4px;
@@ -18,7 +18,7 @@ const PlaceHolderWrapper = styled.div<{ active: boolean }>`
   .position-line {
     height: 4px;
     border-radius: 4px;
-    background-color: ${(props) => (props.active ? "#315efb" : "transparent")};
+    background-color: ${(props) => (props.$active ? "#315efb" : "transparent")};
     width: 100%;
   }
 `;
@@ -36,7 +36,7 @@ export default function DroppablePlaceholder(props: IDroppablePlaceholderProps)
     data,
   });
   return (
-    <PlaceHolderWrapper active={isOver} ref={setDropNodeRef}>
+    <PlaceHolderWrapper $active={isOver} ref={setDropNodeRef}>
       <div className="position-line"></div>
     </PlaceHolderWrapper>
   );
diff --git a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx
index eb80cced5b..fb6d4609b6 100644
--- a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx
@@ -8,7 +8,8 @@ import { alignWithJustifyControl } from "comps/controls/alignControl";
 import { navListComp } from "./navItemComp";
 import { menuPropertyView } from "./components/MenuItemList";
 import { DownOutlined } from "@ant-design/icons";
-import { Dropdown, Menu, MenuProps } from "antd";
+import { default as Dropdown } from "antd/es/dropdown";
+import { default as Menu, MenuProps } from "antd/es/menu";
 import { migrateOldData } from "comps/generators/simpleGenerators";
 import { styleControl } from "comps/controls/styleControl";
 import { NavigationStyle } from "comps/controls/styleControlConstants";
@@ -19,39 +20,39 @@ import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
 
 type IProps = {
-  justify: boolean;
-  bgColor: string;
-  borderColor: string;
+  $justify: boolean;
+  $bgColor: string;
+  $borderColor: string;
 };
 
-const Wrapper = styled("div")<Pick<IProps, "bgColor" | "borderColor">>`
+const Wrapper = styled("div")<Pick<IProps, "$bgColor" | "$borderColor">>`
   height: 100%;
   border-radius: 2px;
   box-sizing: border-box;
-  border: 1px solid ${(props) => props.borderColor};
-  background-color: ${(props) => props.bgColor};
+  border: 1px solid ${(props) => props.$borderColor};
+  background-color: ${(props) => props.$bgColor};
 `;
 
-const NavInner = styled("div")<Pick<IProps, "justify">>`
+const NavInner = styled("div")<Pick<IProps, "$justify">>`
   margin: 0 -16px;
   height: 100%;
   display: flex;
-  justify-content: ${(props) => (props.justify ? "space-between" : "left")};
+  justify-content: ${(props) => (props.$justify ? "space-between" : "left")};
 `;
 
 const Item = styled.div<{
-  active: boolean;
-  activeColor: string;
-  color: string;
+  $active: boolean;
+  $activeColor: string;
+  $color: string;
 }>`
   height: 30px;
   line-height: 30px;
   padding: 0 16px;
-  color: ${(props) => (props.active ? props.activeColor : props.color)};
+  color: ${(props) => (props.$active ? props.$activeColor : props.$color)};
   font-weight: 500;
 
   &:hover {
-    color: ${(props) => props.activeColor};
+    color: ${(props) => props.$activeColor};
     cursor: pointer;
   }
 
@@ -71,11 +72,11 @@ const LogoWrapper = styled.div`
   }
 `;
 
-const ItemList = styled.div<{ align: string }>`
+const ItemList = styled.div<{ $align: string }>`
   flex: 1;
   display: flex;
   flex-direction: row;
-  justify-content: ${(props) => props.align};
+  justify-content: ${(props) => props.$align};
 `;
 
 const StyledMenu = styled(Menu)<MenuProps>`
@@ -140,9 +141,9 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
         const item = (
           <Item
             key={idx}
-            active={active || subMenuSelectedKeys.length > 0}
-            color={props.style.text}
-            activeColor={props.style.accent}
+            $active={active || subMenuSelectedKeys.length > 0}
+            $color={props.style.text}
+            $activeColor={props.style.accent}
             onClick={() => onEvent("click")}
           >
             {label}
@@ -177,14 +178,14 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
   const justify = props.horizontalAlignment === "justify";
 
   return (
-    <Wrapper borderColor={props.style.border} bgColor={props.style.background}>
-      <NavInner justify={justify}>
+    <Wrapper $borderColor={props.style.border} $bgColor={props.style.background}>
+      <NavInner $justify={justify}>
         {props.logoUrl && (
           <LogoWrapper onClick={() => props.logoEvent("click")}>
             <img src={props.logoUrl} alt="LOGO" />
           </LogoWrapper>
         )}
-        {!justify ? <ItemList align={props.horizontalAlignment}>{items}</ItemList> : items}
+        {!justify ? <ItemList $align={props.horizontalAlignment}>{items}</ItemList> : items}
       </NavInner>
     </Wrapper>
   );
diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx
index 03d66d4dfb..f1c917521b 100644
--- a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx
@@ -1,4 +1,4 @@
-import { InputNumber as AntdInputNumber } from "antd";
+import { default as AntdInputNumber } from "antd/es/input-number";
 import {
   BoolCodeControl,
   codeControl,
diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx
index dddfe0cccc..5e7760acb2 100644
--- a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx
@@ -7,7 +7,7 @@ import { RecordConstructorToComp } from "lowcoder-core";
 import { styleControl } from "comps/controls/styleControl";
 import { SliderStyle, SliderStyleType } from "comps/controls/styleControlConstants";
 import styled, { css } from "styled-components";
-import { Slider } from "antd";
+import { default as Slider } from "antd/es/slider";
 import { darkenColor, fadeColor } from "lowcoder-design";
 import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
 import { IconControl } from "comps/controls/iconControl";
diff --git a/client/packages/lowcoder/src/comps/comps/preLoadComp.tsx b/client/packages/lowcoder/src/comps/comps/preLoadComp.tsx
index 0783ec3850..e8f4902c45 100644
--- a/client/packages/lowcoder/src/comps/comps/preLoadComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/preLoadComp.tsx
@@ -291,7 +291,7 @@ const AddJSLibraryButton = styled.div`
     stroke: #8b8fa3;
   }
 
-  :hover {
+  &:hover {
     g g {
       stroke: #222222;
     }
diff --git a/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx b/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx
index a62cedc659..d7b29f6336 100644
--- a/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx
@@ -1,4 +1,4 @@
-import { Progress } from "antd";
+import { default as Progress } from "antd/es/progress";
 import { styleControl } from "comps/controls/styleControl";
 import { ProgressStyle, ProgressStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
 import styled, { css } from "styled-components";
diff --git a/client/packages/lowcoder/src/comps/comps/progressComp.tsx b/client/packages/lowcoder/src/comps/comps/progressComp.tsx
index c4df44ae2d..1acf7f2d6a 100644
--- a/client/packages/lowcoder/src/comps/comps/progressComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/progressComp.tsx
@@ -1,4 +1,4 @@
-import { Progress } from "antd";
+import { default as Progress } from "antd/es/progress";
 import { Section, sectionNames } from "lowcoder-design";
 import { numberExposingStateControl } from "../controls/codeStateControl";
 import { BoolControl } from "../controls/boolControl";
diff --git a/client/packages/lowcoder/src/comps/comps/queryLibrary/inputListComp.tsx b/client/packages/lowcoder/src/comps/comps/queryLibrary/inputListComp.tsx
index 7506a2158b..5d0d0233b0 100644
--- a/client/packages/lowcoder/src/comps/comps/queryLibrary/inputListComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/queryLibrary/inputListComp.tsx
@@ -100,7 +100,7 @@ const PopoverIcon = styled(PointIcon)`
     fill: #8b8fa3;
   }
 
-  :hover {
+  &:hover {
     background: #eef0f3;
     border-radius: 4px;
     cursor: pointer;
@@ -121,20 +121,20 @@ const AddButton = styled(TacoButton)`
   align-items: center;
   box-shadow: none;
 
-  :hover {
+  &:hover {
     color: #315efb;
     background-color: #f5faff;
     border-color: #c2d6ff;
   }
 
-  :focus {
+  &:focus {
     color: #315efb;
     background-color: #f5faff;
     border-color: #c2d6ff;
   }
 
-  :disabled,
-  :disabled:hover {
+  &:disabled,
+  &:disabled:hover {
     background: #f9fbff;
     border: 1px solid #dee9ff;
     border-radius: 4px;
diff --git a/client/packages/lowcoder/src/comps/comps/queryLibrary/queryLibraryComp.tsx b/client/packages/lowcoder/src/comps/comps/queryLibrary/queryLibraryComp.tsx
index 60d9a6bd5c..7af0db9373 100644
--- a/client/packages/lowcoder/src/comps/comps/queryLibrary/queryLibraryComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/queryLibrary/queryLibraryComp.tsx
@@ -218,7 +218,7 @@ const PopoverButton = styled.div`
   border: 1px solid #d7d9e0;
   border-radius: 4px;
 
-  :hover {
+  &:hover {
     background-color: #f5f5f6;
     border: 1px solid #d7d9e0;
 
@@ -239,19 +239,19 @@ const RunButton = styled(TacoButton)`
   height: 32px;
   border: none;
 
-  :hover {
+  &:hover {
     padding: 0;
     border: none;
     box-shadow: none;
   }
 
-  :focus {
+  &:focus {
     padding: 0;
     border: none;
     box-shadow: none;
   }
 
-  :after {
+  &:after {
     content: "";
   }
 `;
diff --git a/client/packages/lowcoder/src/comps/comps/ratingComp.tsx b/client/packages/lowcoder/src/comps/comps/ratingComp.tsx
index c003746aec..992c45f742 100644
--- a/client/packages/lowcoder/src/comps/comps/ratingComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/ratingComp.tsx
@@ -1,4 +1,4 @@
-import { Rate } from "antd";
+import { default as Rate } from "antd/es/rate";
 import styled, { css } from "styled-components";
 import { Section, sectionNames } from "lowcoder-design";
 import { NumberControl, BoolCodeControl } from "../controls/codeControl";
diff --git a/client/packages/lowcoder/src/comps/comps/remoteComp/remoteComp.tsx b/client/packages/lowcoder/src/comps/comps/remoteComp/remoteComp.tsx
index 0abcde27fe..be0f9aae2f 100644
--- a/client/packages/lowcoder/src/comps/comps/remoteComp/remoteComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/remoteComp/remoteComp.tsx
@@ -1,4 +1,4 @@
-import { Skeleton } from "antd";
+import { default as Skeleton } from "antd/es/skeleton";
 import { simpleMultiComp } from "comps/generators";
 import { withExposingConfigs } from "comps/generators/withExposing";
 import { GreyTextColor } from "constants/style";
diff --git a/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx b/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx
index 324aa823fa..8a9ce63125 100644
--- a/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx
+++ b/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx
@@ -1,4 +1,5 @@
-import { Row, Col } from "antd";
+import { default as Row } from "antd/es/row";
+import { default as Col } from "antd/es/col";
 import { JSONObject, JSONValue } from "util/jsonTypes";
 import { CompAction, CompActionTypes, deleteCompAction, wrapChildAction } from "lowcoder-core";
 import { DispatchType, RecordConstructorToView, wrapDispatch } from "lowcoder-core";
diff --git a/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx b/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx
index adb6788f3e..f6e0403147 100644
--- a/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx
@@ -20,7 +20,7 @@ import {
 } from "comps/utils/propertyUtils";
 import _ from "lodash";
 import { trans } from "i18n";
-import { Skeleton } from "antd";
+import { default as Skeleton } from "antd/es/skeleton";
 import { styleControl } from "comps/controls/styleControl";
 import { RichTextEditorStyle, RichTextEditorStyleType } from "comps/controls/styleControlConstants";
 
@@ -124,7 +124,7 @@ const hideToolbarStyle = (style: RichTextEditorStyleType) => css`
 `;
 
 interface Props {
-  hideToolbar: boolean;
+  $hideToolbar: boolean;
   $style: RichTextEditorStyleType;
 }
 
@@ -134,7 +134,7 @@ const AutoHeightReactQuill = styled.div<Props>`
   & .ql-container .ql-editor {
     min-height: 125px;
   }
-  ${(props) => (props.hideToolbar ? hideToolbarStyle(props.$style) : "")};
+  ${(props) => (props.$hideToolbar ? hideToolbarStyle(props.$style) : "")};
 `;
 
 const FixHeightReactQuill = styled.div<Props>`
@@ -151,7 +151,7 @@ const FixHeightReactQuill = styled.div<Props>`
       overflow: auto;
     }
   }
-  ${(props) => (props.hideToolbar ? hideToolbarStyle(props.$style) : "")};
+  ${(props) => (props.$hideToolbar ? hideToolbarStyle(props.$style) : "")};
 `;
 
 const toolbarOptions = [
@@ -268,7 +268,7 @@ function RichTextEditor(props: IProps) {
       id={id}
       onClick={handleClickWrapper}
       ref={wrapperRef}
-      hideToolbar={props.hideToolbar}
+      $hideToolbar={props.hideToolbar}
       $style={props.$style}
     >
       <Suspense fallback={<Skeleton />}>
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx
index 26da1703ea..4c992874ac 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx
@@ -1,4 +1,4 @@
-import { Cascader } from "antd";
+import { default as Cascader } from "antd/es/cascader";
 import { CascaderStyleType } from "comps/controls/styleControlConstants";
 import { blurMethod, focusMethod } from "comps/utils/methodUtils";
 import { trans } from "i18n";
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx
index 97bbab0781..8152980d56 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx
@@ -1,4 +1,4 @@
-import { Checkbox } from "antd";
+import { default as AntdCheckboxGroup } from "antd/es/checkbox/Group";
 import { SelectInputOptionControl } from "comps/controls/optionsControl";
 import { BoolCodeControl } from "../../controls/codeControl";
 import { arrayStringExposingStateControl } from "../../controls/codeStateControl";
@@ -73,7 +73,7 @@ export const getStyle = (style: CheckboxStyleType) => {
   `;
 };
 
-const CheckboxGroup = styled(Checkbox.Group)<{
+const CheckboxGroup = styled(AntdCheckboxGroup)<{
   $style: CheckboxStyleType;
   $layout: ValueFromOption<typeof RadioLayoutOptions>;
 }>`
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx
index 473d9c9f7a..e1bc7033ce 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx
@@ -1,4 +1,4 @@
-import { Radio as AntdRadio } from "antd";
+import { default as AntdRadioGroup } from "antd/es/radio/group";
 import { RadioStyleType } from "comps/controls/styleControlConstants";
 import styled, { css } from "styled-components";
 import { UICompBuilder } from "../../generators";
@@ -52,7 +52,7 @@ const getStyle = (style: RadioStyleType) => {
   `;
 };
 
-const Radio = styled(AntdRadio.Group)<{
+const Radio = styled(AntdRadioGroup)<{
   $style: RadioStyleType;
   $layout: ValueFromOption<typeof RadioLayoutOptions>;
 }>`
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx
index b1ee2e2bb0..bf105982ae 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx
@@ -1,4 +1,4 @@
-import { Segmented as AntdSegmented } from "antd";
+import { default as AntdSegmented } from "antd/es/segmented";
 import { BoolCodeControl } from "comps/controls/codeControl";
 import { stringExposingStateControl } from "comps/controls/codeStateControl";
 import { ChangeEventHandlerControl } from "comps/controls/eventHandlerControl";
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx
index d458c67e66..86493bf765 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx
@@ -19,7 +19,7 @@ import {
 } from "lowcoder-design";
 import { SelectOptionControl } from "../../controls/optionsControl";
 import { SelectEventHandlerControl } from "../../controls/eventHandlerControl";
-import { Select as AntdSelect } from "antd";
+import { default as AntdSelect } from "antd/es/select";
 import { ControlParams } from "../../controls/controlParams";
 import { ReactNode } from "react";
 import styled, { css } from "styled-components";
@@ -144,7 +144,7 @@ const getDropdownStyle = (style: MultiSelectStyleType) => {
       margin: 0 8px;
       padding: 5px 8px;
 
-      :hover {
+      &:hover {
         background-color: rgb(242, 247, 252);
       }
 
diff --git a/client/packages/lowcoder/src/comps/comps/signatureComp.tsx b/client/packages/lowcoder/src/comps/comps/signatureComp.tsx
index 669d76bba3..8db3979157 100644
--- a/client/packages/lowcoder/src/comps/comps/signatureComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/signatureComp.tsx
@@ -1,5 +1,5 @@
 import { DeleteOutlined } from "@ant-design/icons";
-import { Skeleton } from "antd";
+import { default as Skeleton } from "antd/es/skeleton";
 import { BoolControl } from "comps/controls/boolControl";
 import { StringControl } from "comps/controls/codeControl";
 import { ChangeEventHandlerControl } from "comps/controls/eventHandlerControl";
@@ -28,7 +28,7 @@ import { formDataChildren, FormDataPropertyView } from "./formComp/formDataConst
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
 
-const Wrapper = styled.div<{ $style: SignatureStyleType; isEmpty: boolean }>`
+const Wrapper = styled.div<{ $style: SignatureStyleType; $isEmpty: boolean }>`
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -48,7 +48,7 @@ const Wrapper = styled.div<{ $style: SignatureStyleType; isEmpty: boolean }>`
   padding: ${(props) => props.$style.padding};
   .signature {
     background-color: ${(props) => props.$style.background};
-    opacity: ${(props) => (props.isEmpty ? 0 : 1)};
+    opacity: ${(props) => (props.$isEmpty ? 0 : 1)};
     width: 100%;
     height: 100%;
   }
@@ -138,7 +138,7 @@ let SignatureTmpComp = (function () {
               e.preventDefault();
             }}
             $style={props.style}
-            isEmpty={!props.value && !isBegin}
+            $isEmpty={!props.value && !isBegin}
           >
             <div className="signature">
               <Suspense fallback={<Skeleton />}>
diff --git a/client/packages/lowcoder/src/comps/comps/switchComp.tsx b/client/packages/lowcoder/src/comps/comps/switchComp.tsx
index e1f7e29988..3a3ecf9558 100644
--- a/client/packages/lowcoder/src/comps/comps/switchComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/switchComp.tsx
@@ -1,4 +1,4 @@
-import { Switch } from "antd";
+import { default as Switch } from "antd/es/switch";
 import { BoolCodeControl } from "comps/controls/codeControl";
 import { booleanExposingStateControl } from "comps/controls/codeStateControl";
 import { changeEvent, eventHandlerControl } from "comps/controls/eventHandlerControl";
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/ColumnNumberComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/ColumnNumberComp.tsx
index a775a1887b..20a3902947 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/ColumnNumberComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/ColumnNumberComp.tsx
@@ -1,4 +1,4 @@
-  import { Input } from "antd";
+  import { default as Input } from "antd/es/input";
 import { NumberControl, StringControl } from "comps/controls/codeControl";
 import { BoolControl } from "comps/controls/boolControl";
 import { trans } from "i18n";
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnBooleanComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnBooleanComp.tsx
index b48e626c04..3a1e91f8ae 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnBooleanComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnBooleanComp.tsx
@@ -1,6 +1,6 @@
 import { BoolCodeControl } from "comps/controls/codeControl";
 import { trans } from "i18n";
-import { Checkbox } from "antd";
+import { default as Checkbox } from "antd/es/checkbox";
 import { ColumnTypeCompBuilder, ColumnTypeViewFn } from "../columnTypeCompBuilder";
 import { ColumnValueTooltip } from "../simpleColumnTypeComps";
 import { getStyle } from "comps/comps/selectInputComp/checkboxComp";
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDateComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDateComp.tsx
index 76c6abe87f..af5070300c 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDateComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDateComp.tsx
@@ -1,4 +1,4 @@
-import { DatePicker } from "antd";
+import { default as DatePicker } from "antd/es/date-picker";
 import {
   ColumnTypeCompBuilder,
   ColumnTypeViewFn,
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnImgComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnImgComp.tsx
index 4eda274326..25fd9e1d32 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnImgComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnImgComp.tsx
@@ -1,4 +1,4 @@
-import { Input } from "antd";
+import { default as Input } from "antd/es/input";
 import {
   ColumnTypeCompBuilder,
   ColumnTypeViewFn,
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinkComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinkComp.tsx
index b7edaa5932..4ed3b40da8 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinkComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinkComp.tsx
@@ -1,4 +1,4 @@
-import { Input } from "antd";
+import { default as Input } from "antd/es/input";
 import {
   ColumnTypeCompBuilder,
   ColumnTypeViewFn,
@@ -22,7 +22,7 @@ const childrenMap = {
 
 const disableCss = css`
   &,
-  :hover {
+  &:hover {
     cursor: not-allowed;
     color: rgba(0, 0, 0, 0.25) !important;
   }
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinksComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinksComp.tsx
index 5bc0fb39bf..7329db7204 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinksComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinksComp.tsx
@@ -1,5 +1,6 @@
 import { EllipsisOutlined } from "@ant-design/icons";
-import { Dropdown, Menu } from "antd";
+import { default as Dropdown} from "antd/es/dropdown";
+import { default as Menu } from "antd/es/menu";
 import { ColumnTypeCompBuilder } from "comps/comps/tableComp/column/columnTypeCompBuilder";
 import { ActionSelectorControlInContext } from "comps/controls/actionSelector/actionSelectorControl";
 import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
@@ -27,7 +28,7 @@ const MenuLinkWrapper = styled.div`
   > a {
     color: ${PrimaryColor} !important;
 
-    :hover {
+    &:hover {
       color: ${LightActiveTextColor} !important;
     }
   }
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnMarkdownComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnMarkdownComp.tsx
index efcdd436cf..748308f869 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnMarkdownComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnMarkdownComp.tsx
@@ -1,4 +1,4 @@
-import { Input } from "antd";
+import { default as Input } from "antd/es/input";
 import {
   ColumnTypeCompBuilder,
   ColumnTypeViewFn,
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnProgressComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnProgressComp.tsx
index 7c5dc3bdde..60f302ce52 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnProgressComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnProgressComp.tsx
@@ -1,6 +1,6 @@
 import { NumberControl } from "comps/controls/codeControl";
 import { trans } from "i18n";
-import { InputNumber } from "antd";
+import { default as InputNumber } from "antd/es/input-number";
 import { ColumnTypeCompBuilder, ColumnTypeViewFn } from "../columnTypeCompBuilder";
 import { ColumnValueTooltip } from "../simpleColumnTypeComps";
 import { ProgressStyle } from "comps/controls/styleControlConstants";
@@ -55,7 +55,7 @@ const InputNumberStyled = styled(InputNumber)`
       position: unset;
       transform: none;
     }
-    :hover {
+    &:hover {
       &:not(.ant-input-number-handler-up-disabled):not(.ant-input-number-handler-down-disabled)
         path {
         fill: #315efb;
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnRatingComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnRatingComp.tsx
index a629dff3e9..8aca4df276 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnRatingComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnRatingComp.tsx
@@ -3,7 +3,7 @@ import { trans } from "i18n";
 import { ColumnTypeCompBuilder, ColumnTypeViewFn } from "../columnTypeCompBuilder";
 import { ColumnValueTooltip } from "../simpleColumnTypeComps";
 import styled from "styled-components";
-import { Rate } from "antd";
+import { default as Rate } from "antd/es/rate";
 
 const RateStyled = styled(Rate)<{ isEdit?: boolean }>`
   display: inline-flex;
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnStatusComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnStatusComp.tsx
index 3cdf9e84b1..28a2db0836 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnStatusComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnStatusComp.tsx
@@ -1,4 +1,4 @@
-import { Badge } from "antd";
+import { default as Badge } from "antd/es/badge";
 import {
   ColumnTypeCompBuilder,
   ColumnTypeViewFn,
@@ -9,7 +9,7 @@ import { DropdownStyled, Wrapper } from "./columnTagsComp";
 import { ReactNode, useContext, useState } from "react";
 import { StatusContext } from "components/table/EditableCell";
 import { CustomSelect, PackUpIcon, ScrollBar } from "lowcoder-design";
-import { PresetStatusColorType } from "antd/lib/_util/colors";
+import { PresetStatusColorType } from "antd/es/_util/colors";
 
 export const ColumnValueTooltip = trans("table.columnValueTooltip");
 
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnTagsComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnTagsComp.tsx
index 54930a7d14..4124d67ee6 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnTagsComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnTagsComp.tsx
@@ -1,4 +1,4 @@
-import { Tag } from "antd";
+import { default as Tag } from "antd/es/tag";
 import { PresetStatusColorTypes } from "antd/lib/_util/colors";
 import { TagsContext } from "components/table/EditableCell";
 import {
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/simpleTextComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/simpleTextComp.tsx
index 3311c01dc4..a0da677aee 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/simpleTextComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/simpleTextComp.tsx
@@ -1,4 +1,4 @@
-import { Input } from "antd";
+import { default as Input } from "antd/es/input";
 import { StringOrNumberControl } from "comps/controls/codeControl";
 import { trans } from "i18n";
 import { ColumnTypeCompBuilder, ColumnTypeViewFn } from "../columnTypeCompBuilder";
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx
index 7c462d8ee9..348ce73faf 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx
@@ -28,8 +28,7 @@ import { JSONValue } from "util/jsonTypes";
 import styled from "styled-components";
 import { TextOverflowControl } from "comps/controls/textOverflowControl";
 import { TableColumnLinkStyle, styleControl } from "@lowcoder-ee/index.sdk";
-import { Divider } from "antd";
-
+import { default as Divider } from "antd/es/divider";
 export type Render = ReturnType<ConstructorToComp<typeof RenderComp>["getOriginalComp"]>;
 export const RenderComp = withSelectedMultiContext(ColumnTypeComp);
 
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
index 38603b81b8..a523e7c587 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
@@ -1,5 +1,4 @@
-import { Table } from "antd";
-import { TableProps } from "antd/es/table";
+import { default as Table, TableProps } from "antd/es/table";
 import { TableCellContext, TableRowContext } from "comps/comps/tableComp/tableContext";
 import { TableToolbar } from "comps/comps/tableComp/tableToolbarComp";
 import { RowColorViewType, RowHeightViewType, TableEventOptionValues } from "comps/comps/tableComp/tableTypes";
@@ -130,9 +129,9 @@ const getStyle = (
 const TableWrapper = styled.div<{
   $style: TableStyleType;
   $rowStyle: TableRowStyleType;
-  toolbarPosition: "above" | "below" | "close";
-  fixedHeader: boolean;
-  fixedToolbar: boolean;
+  $toolbarPosition: "above" | "below" | "close";
+  $fixedHeader: boolean;
+  $fixedToolbar: boolean;
 }>`
   max-height: 100%;
   overflow-y: auto;
@@ -141,7 +140,7 @@ const TableWrapper = styled.div<{
   border-radius: ${(props) => props.$style.radius};
 
   .ant-table-wrapper {
-    border-top: ${(props) => (props.toolbarPosition === "above" ? "1px solid" : "unset")};
+    border-top: ${(props) => (props.$toolbarPosition === "above" ? "1px solid" : "unset")};
     border-color: inherit;
   }
 
@@ -193,10 +192,10 @@ const TableWrapper = styled.div<{
             color: ${(props) => props.$style.headerText};
             border-inline-end: ${(props) => `1px solid ${props.$style.border}`} !important;
             ${(props) => 
-              props.fixedHeader && `
+              props.$fixedHeader && `
                 position: sticky;
                 position: -webkit-sticky;
-                top: ${props.fixedToolbar ? '47px' : '0'};
+                top: ${props.$fixedToolbar ? '47px' : '0'};
                 z-index: 99;
               `
             }
@@ -253,7 +252,7 @@ const TableWrapper = styled.div<{
 
         // hide the bottom border of the last row
         ${(props) =>
-          props.toolbarPosition !== "below" &&
+          props.$toolbarPosition !== "below" &&
           `
             tbody > tr:last-child > td {
               border-bottom: unset;
@@ -284,7 +283,7 @@ const TableTh = styled.th<{ width?: number }>`
 `;
 
 const TableTd = styled.td<{
-  background: string;
+  $background: string;
   $style: TableColumnStyleType & {rowHeight?: string};
   $linkStyle?: TableColumnLinkStyleType;
   $isEditing: boolean;
@@ -296,10 +295,10 @@ const TableTd = styled.td<{
     display: ${(props) => (props.$isEditing ? "none" : "initial")};
   }
   &.ant-table-row-expand-icon-cell {
-    background: ${(props) => props.background};
+    background: ${(props) => props.$background};
     border-color: ${(props) => props.$style.border};
   }
-  background: ${(props) => props.background} !important;
+  background: ${(props) => props.$background} !important;
   border-color: ${(props) => props.$style.border} !important;
   border-width: ${(props) => props.$style.borderWidth} !important;
   border-radius: ${(props) => props.$style.radius};
@@ -498,7 +497,7 @@ function TableCellView(props: {
     tdView = (
       <TableTd
         {...restProps}
-        background={background}
+        $background={background}
         $style={style}
         $linkStyle={linkStyle}
         $isEditing={editing}
@@ -767,9 +766,9 @@ export function TableCompView(props: {
       <TableWrapper
         $style={style}
         $rowStyle={rowStyle}
-        toolbarPosition={toolbar.position}
-        fixedHeader={compChildren.fixedHeader.getView()}
-        fixedToolbar={toolbar.fixedToolbar && toolbar.position === 'above'}
+        $toolbarPosition={toolbar.position}
+        $fixedHeader={compChildren.fixedHeader.getView()}
+        $fixedToolbar={toolbar.fixedToolbar && toolbar.position === 'above'}
       >
         {toolbar.position === "above" && toolbarView}
         <ResizeableTable<RecordType>
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx
index cbc4bc11cc..76e01653ec 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx
@@ -51,7 +51,7 @@ const StyledRefreshIcon = styled(RefreshIcon)`
   height: 16px;
   cursor: pointer;
 
-  :hover {
+  &:hover {
     g g {
       stroke: #4965f2;
     }
@@ -63,7 +63,7 @@ const eyeIconCss = css`
   width: 16px;
   display: inline-block;
 
-  :hover {
+  &:hover {
     cursor: pointer;
   }
 
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableToolbarComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableToolbarComp.tsx
index 0fadfffc2e..f7e8829e08 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tableToolbarComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableToolbarComp.tsx
@@ -1,5 +1,6 @@
-import { Button, Pagination, Popover } from "antd";
-import { PaginationProps } from "antd/lib/pagination/Pagination";
+import { default as Button } from "antd/es/button";
+import { default as Pagination, PaginationProps } from "antd/es/pagination";
+import { default as Popover } from "antd/es/popover";
 import { ThemeDetail } from "api/commonSettingApi";
 import { ColumnCompType } from "comps/comps/tableComp/column/tableColumnComp";
 import { TableOnEventView } from "comps/comps/tableComp/tableTypes";
@@ -73,7 +74,7 @@ const getStyle = (
         }
 
         &:hover * {
-          stroke: ${theme.primary};
+          stroke: ${theme?.primary};
         }
       }
 
@@ -89,7 +90,7 @@ const getStyle = (
         }
 
         &:hover * {
-          stroke: ${theme.primary};
+          stroke: ${theme?.primary};
         }
       }
 
@@ -101,7 +102,7 @@ const getStyle = (
         }
 
         &:hover * {
-          stroke: ${theme.primary};
+          stroke: ${theme?.primary};
         }
       }
     }
@@ -114,7 +115,7 @@ const getStyle = (
 
       svg:hover {
         path {
-          fill: ${theme.primary};
+          fill: ${theme?.primary};
         }
       }
     }
@@ -135,7 +136,7 @@ const getStyle = (
       color: ${style.toolbarText};
 
       &:hover {
-        color: ${theme.primary};
+        color: ${theme?.primary};
       }
     }
 
@@ -144,7 +145,7 @@ const getStyle = (
       .ant-select-selector,
     .ant-pagination-options-quick-jumper input:hover,
     .ant-pagination-options-quick-jumper input:focus {
-      border-color: ${theme.primary};
+      border-color: ${theme?.primary};
     }
   `;
 };
@@ -152,17 +153,17 @@ const getStyle = (
 const ToolbarWrapper = styled.div<{
   $style: TableStyleType;
   $filtered: boolean;
-  theme: ThemeDetail;
-  position: ToolbarRowType["position"];
-  fixedToolbar: boolean;
+  $theme: ThemeDetail;
+  $position: ToolbarRowType["position"];
+  $fixedToolbar: boolean;
 }>`
   // overflow: auto;
   ${(props) => props.$style && getStyle(
     props.$style,
     props.$filtered,
-    props.theme,
-    props.position,
-    props.fixedToolbar,
+    props.$theme,
+    props.$position,
+    props.$fixedToolbar,
   )}
 `;
 
@@ -744,10 +745,10 @@ export function TableToolbar(props: {
   return (
     <ToolbarWrapper
       $style={props.$style}
-      theme={theme}
+      $theme={theme || defaultTheme}
       $filtered={toolbar.filter.filters.length > 0}
-      position={toolbar.position}
-      fixedToolbar={toolbar.fixedToolbar}
+      $position={toolbar.position}
+      $fixedToolbar={toolbar.fixedToolbar}
     >
       <ToolbarWrapper2>
         <ToolbarIcons className="toolbar-icons">
diff --git a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx
index 991cd2d901..125599b0b7 100644
--- a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx
@@ -1,4 +1,4 @@
-import { Tabs } from "antd";
+import { default as Tabs } from "antd/es/tabs";
 import { JSONObject, JSONValue } from "util/jsonTypes";
 import { CompAction, CompActionTypes, deleteCompAction, wrapChildAction } from "lowcoder-core";
 import { DispatchType, RecordConstructorToView, wrapDispatch } from "lowcoder-core";
diff --git a/client/packages/lowcoder/src/comps/comps/textComp.tsx b/client/packages/lowcoder/src/comps/comps/textComp.tsx
index 80b108d24d..797edcf50b 100644
--- a/client/packages/lowcoder/src/comps/comps/textComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textComp.tsx
@@ -66,13 +66,13 @@ const getStyle = (style: TextStyleType) => {
   `;
 };
 
-const TextContainer = styled.div<{ type: string; styleConfig: TextStyleType }>`
+const TextContainer = styled.div<{ $type: string; $styleConfig: TextStyleType }>`
   height: 100%;
   overflow: auto;
   margin: 0;
   ${(props) =>
-    props.type === "text" && "white-space:break-spaces;line-height: 1.9;"};
-  ${(props) => props.styleConfig && getStyle(props.styleConfig)}
+    props.$type === "text" && "white-space:break-spaces;line-height: 1.9;"};
+  ${(props) => props.$styleConfig && getStyle(props.$styleConfig)}
   display: flex;
   font-size: 13px;
   ${markdownCompCss};
@@ -127,8 +127,8 @@ let TextTmpComp = (function () {
     const value = props.text.value;
     return (
       <TextContainer
-        type={props.type}
-        styleConfig={props.style}
+        $type={props.type}
+        $styleConfig={props.style}
         style={{
           justifyContent: props.horizontalAlignment,
           alignItems: props.autoHeight ? "center" : props.verticalAlignment,
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx
index 04e52ef8a4..fc34bc7238 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx
@@ -28,7 +28,7 @@ import {
 import { trans } from "i18n";
 import { IconControl } from "comps/controls/iconControl";
 import { hasIcon } from "comps/utils";
-import { InputRef } from "antd";
+import { InputRef } from "antd/es/input";
 import { RefControl } from "comps/controls/refControl";
 
 import React, { useContext } from "react";
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx
index 89c75bd8e2..630f7e376e 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx
@@ -36,9 +36,9 @@ import { booleanExposingStateControl } from "comps/controls/codeStateControl";
 import { trans } from "i18n";
 import { RefControl } from "comps/controls/refControl";
 import { TextAreaRef } from "antd/lib/input/TextArea";
-import { Mentions, ConfigProvider } from "antd";
+import { default as ConfigProvider } from "antd/es/config-provider";
+import { default as Mentions, MentionsOptionProps } from "antd/es/mentions";
 import { blurMethod, focusWithOptions } from "comps/utils/methodUtils";
-import type { MentionsOptionProps } from "antd/es/mentions";
 import {
   textInputValidate,
 } from "../textInputComp/textInputConstants";
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx
index 0437e87b60..b5c3d701dc 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx
@@ -1,4 +1,5 @@
-import { Input, InputRef } from "antd";
+import { default as InputPassword } from "antd/es/input/Password";
+import { InputRef } from "antd/es/input";
 import {
   NameConfig,
   NameConfigPlaceHolder,
@@ -40,7 +41,7 @@ import { RefControl } from "comps/controls/refControl";
 import React, { useContext } from "react";
 import { EditorContext } from "comps/editorState";
 
-const PasswordStyle = styled(Input.Password)<{
+const PasswordStyle = styled(InputPassword)<{
   $style: InputLikeStyleType;
 }>`
   ${(props) => props.$style && getStyle(props.$style)}
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx
index 7859645937..23b99b319e 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx
@@ -34,7 +34,7 @@ import {
 import { trans } from "i18n";
 import { ChangeEvent, useRef, useState } from "react";
 import { refMethods } from "comps/generators/withMethodExposing";
-import { InputRef } from "antd";
+import { InputRef } from "antd/es/input";
 import {
   blurMethod,
   clickMethod,
diff --git a/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx b/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx
index 8591378ed2..78a2787afd 100644
--- a/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Button } from "antd";
+import { default as Button } from "antd/es/button";
 // 渲染组件到编辑器
 import {
   changeChildAction,
@@ -58,7 +58,7 @@ import {
 
 import { timelineDate, timelineNode, TimelineDataTooltip } from "./timelineConstants";
 import { convertTimeLineData } from "./timelineUtils";
-import { Timeline } from "antd";
+import { default as Timeline } from "antd/es/timeline";
 
 import { ANTDICON } from "./antIcon"; // todo: select icons to not import all icons
 
diff --git a/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx b/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx
index ccd5b46715..6474efa9b4 100644
--- a/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx
@@ -2,7 +2,7 @@ import { RecordConstructorToView } from "lowcoder-core";
 import { UICompBuilder } from "comps/generators/uiCompBuilder";
 import { withExposingConfigs } from "comps/generators/withExposing";
 import { Section, sectionNames } from "lowcoder-design";
-import { Tree } from "antd";
+import { default as Tree } from "antd/es/tree";
 import { useEffect, useState } from "react";
 import styled from "styled-components";
 import ReactResizeDetector from "react-resize-detector";
diff --git a/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx b/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx
index e154131bba..993113e970 100644
--- a/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx
@@ -2,7 +2,7 @@ import { changeChildAction, DispatchType, RecordConstructorToView } from "lowcod
 import { UICompBuilder } from "comps/generators/uiCompBuilder";
 import { NameConfig, withExposingConfigs } from "comps/generators/withExposing";
 import { Section, sectionNames, ValueFromOption } from "lowcoder-design";
-import { TreeSelect } from "antd";
+import { default as TreeSelect } from "antd/es/tree-select";
 import { useEffect } from "react";
 import styled from "styled-components";
 import { styleControl } from "comps/controls/styleControl";
diff --git a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx
index f9c0e23a47..0477ffb588 100644
--- a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx
+++ b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx
@@ -29,31 +29,31 @@ const Wrapper = styled.div<{ $style: ContainerStyleType }>`
   ${(props) => props.$style && getStyle(props.$style)}
 `;
 
-const HeaderInnerGrid = styled(InnerGrid)<{ backgroundColor: string }>`
+const HeaderInnerGrid = styled(InnerGrid)<{ $backgroundColor: string }>`
   overflow: visible;
-  ${(props) => props.backgroundColor && `background-color: ${props.backgroundColor};`}
+  ${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`}
   border-radius: 0;
 `;
 
 const BodyInnerGrid = styled(InnerGrid)<{
-  showBorder: boolean;
-  backgroundColor: string;
-  borderColor: string;
+  $showBorder: boolean;
+  $backgroundColor: string;
+  $borderColor: string;
 }>`
-  border-top: ${(props) => `${props.showBorder ? 1 : 0}px solid ${props.borderColor}`};
+  border-top: ${(props) => `${props.$showBorder ? 1 : 0}px solid ${props.$borderColor}`};
   flex: 1;
-  ${(props) => props.backgroundColor && `background-color: ${props.backgroundColor};`}
+  ${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`}
   border-radius: 0;
 `;
 
 const FooterInnerGrid = styled(InnerGrid)<{
-  showBorder: boolean;
-  backgroundColor: string;
-  borderColor: string;
+  $showBorder: boolean;
+  $backgroundColor: string;
+  $borderColor: string;
 }>`
-  border-top: ${(props) => `${props.showBorder ? 1 : 0}px solid ${props.borderColor}`};
+  border-top: ${(props) => `${props.$showBorder ? 1 : 0}px solid ${props.$borderColor}`};
   overflow: visible;
-  ${(props) => props.backgroundColor && `background-color: ${props.backgroundColor};`}
+  ${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`}
   border-radius: 0;
 `;
 
@@ -90,7 +90,7 @@ export function TriContainer(props: TriContainerProps) {
             minHeight="46px"
             containerPadding={[paddingWidth, 3]}
             showName={{ bottom: showBody || showFooter ? 20 : 0 }}
-            backgroundColor={style?.headerBackground}
+            $backgroundColor={style?.headerBackground}
             style={{padding: style.containerheaderpadding}}
           />
         </BackgroundColorContext.Provider>
@@ -98,7 +98,7 @@ export function TriContainer(props: TriContainerProps) {
       {showBody && (
         <BackgroundColorContext.Provider value={container.style.background}>
           <BodyInnerGrid
-            showBorder={showHeader}
+            $showBorder={showHeader}
             {...otherBodyProps}
             items={gridItemCompToGridItems(bodyItems)}
             autoHeight={container.autoHeight}
@@ -108,8 +108,8 @@ export function TriContainer(props: TriContainerProps) {
               (showHeader && showFooter) || showHeader ? [paddingWidth, 11.5] : [paddingWidth, 11]
             }
             hintPlaceholder={props.hintPlaceholder ?? HintPlaceHolder}
-            backgroundColor={style?.background}
-            borderColor={style?.border}
+            $backgroundColor={style?.background}
+            $borderColor={style?.border}
             style={{padding: style.containerbodypadding}}
           />
         </BackgroundColorContext.Provider>
@@ -117,7 +117,7 @@ export function TriContainer(props: TriContainerProps) {
       {showFooter && (
         <BackgroundColorContext.Provider value={container.style.footerBackground}>
           <FooterInnerGrid
-            showBorder={showHeader || showBody}
+            $showBorder={showHeader || showBody}
             {...otherFooterProps}
             items={gridItemCompToGridItems(footerItems)}
             autoHeight={true}
@@ -125,8 +125,8 @@ export function TriContainer(props: TriContainerProps) {
             minHeight={showBody ? "47px" : "46px"}
             containerPadding={showBody || showHeader ? [paddingWidth, 3.5] : [paddingWidth, 3]}
             showName={{ top: showHeader || showBody ? 20 : 0 }}
-            backgroundColor={style?.footerBackground}
-            borderColor={style?.border}
+            $backgroundColor={style?.footerBackground}
+            $borderColor={style?.border}
             style={{padding: style.containerfooterpadding}}
           />
         </BackgroundColorContext.Provider>
diff --git a/client/packages/lowcoder/src/comps/controls/boolControl.tsx b/client/packages/lowcoder/src/comps/controls/boolControl.tsx
index 541f97a028..7ea77e88e7 100644
--- a/client/packages/lowcoder/src/comps/controls/boolControl.tsx
+++ b/client/packages/lowcoder/src/comps/controls/boolControl.tsx
@@ -61,16 +61,16 @@ function parseValue(value?: any) {
   return { useCodeEditor, value: useCodeEditor ? value : value ? "true" : "false" };
 }
 
-const Wrapper = styled.div<{ hasLabel: boolean }>`
+const Wrapper = styled.div<{ $hasLabel: boolean }>`
   display: flex;
-  flex-direction: ${(props) => (props.hasLabel ? "column" : "row")};
-  height: ${(props) => (props.hasLabel ? "auto" : "32px")};
-  align-items: ${(props) => (props.hasLabel ? "auto" : "center")};
+  flex-direction: ${(props) => (props.$hasLabel ? "column" : "row")};
+  height: ${(props) => (props.$hasLabel ? "auto" : "32px")};
+  align-items: ${(props) => (props.$hasLabel ? "auto" : "center")};
   gap: 4px;
 `;
 
-const CodeEditorWrapper = styled.div<{ hasLabel: boolean }>`
-  ${(props) => (!props.hasLabel ? "flex: 1" : "")}
+const CodeEditorWrapper = styled.div<{ $hasLabel: boolean }>`
+  ${(props) => (!props.$hasLabel ? "flex: 1" : "")}
 `;
 
 /**
@@ -118,7 +118,7 @@ class BoolControl extends AbstractComp<boolean, DataType, Node<ValueAndMsg<boole
     const hasLabel = !!params.label;
     return controlItem(
       { filterText: params.label },
-      <Wrapper hasLabel={hasLabel}>
+      <Wrapper $hasLabel={hasLabel}>
         <SwitchWrapper
           label={params.label}
           tooltip={params.tooltip}
@@ -133,7 +133,7 @@ class BoolControl extends AbstractComp<boolean, DataType, Node<ValueAndMsg<boole
         </SwitchWrapper>
 
         {this.useCodeEditor && (
-          <CodeEditorWrapper hasLabel={hasLabel}>
+          <CodeEditorWrapper $hasLabel={hasLabel}>
             {this.codeControl.codeEditor(params)}
           </CodeEditorWrapper>
         )}
diff --git a/client/packages/lowcoder/src/comps/controls/keyValueControl.tsx b/client/packages/lowcoder/src/comps/controls/keyValueControl.tsx
index c691e65694..89cc6d2760 100644
--- a/client/packages/lowcoder/src/comps/controls/keyValueControl.tsx
+++ b/client/packages/lowcoder/src/comps/controls/keyValueControl.tsx
@@ -19,11 +19,11 @@ const KeyValueWrapper = styled.div`
   }
 `;
 
-const KeyWrapper = styled.div<{ flexBasics?: number }>`
+const KeyWrapper = styled.div<{ $flexBasics?: number }>`
   display: flex;
   margin-right: 8px;
   flex: 1;
-  flex-basis: ${(props) => (props.flexBasics ? props.flexBasics + "px" : "0%")};
+  flex-basis: ${(props) => (props.$flexBasics ? props.$flexBasics + "px" : "0%")};
 
   & > div:first-child {
     flex-grow: 1;
@@ -37,9 +37,9 @@ const TypeWrapper = styled.div`
   flex-shrink: 0;
 `;
 
-const ValueWrapper = styled.div<{ flexBasics?: number }>`
+const ValueWrapper = styled.div<{ $flexBasics?: number }>`
   flex: 1;
-  flex-basis: ${(props) => (props.flexBasics ? props.flexBasics + "px" : "0%")};
+  flex-basis: ${(props) => (props.$flexBasics ? props.$flexBasics + "px" : "0%")};
 `;
 
 export type KeyValueControlParams = ControlParams & {
@@ -81,7 +81,7 @@ function keyValueControl<T extends OptionsType>(
     propertyView(params: KeyValueControlParams) {
       return (
         <KeyValueWrapper>
-          <KeyWrapper flexBasics={params.keyFlexBasics}>
+          <KeyWrapper $flexBasics={params.keyFlexBasics}>
             {this.children.key.propertyView({ placeholder: "key", indentWithTab: false })}
             {hasType && params.showType && (
               <TypeWrapper>
@@ -93,7 +93,7 @@ function keyValueControl<T extends OptionsType>(
               </TypeWrapper>
             )}
           </KeyWrapper>
-          <ValueWrapper flexBasics={params.valueFlexBasics}>
+          <ValueWrapper $flexBasics={params.valueFlexBasics}>
             {this.children.value.propertyView({
               placeholder: "value",
               indentWithTab: false,
diff --git a/client/packages/lowcoder/src/comps/controls/labelControl.tsx b/client/packages/lowcoder/src/comps/controls/labelControl.tsx
index db3087e65f..92a1828b3d 100644
--- a/client/packages/lowcoder/src/comps/controls/labelControl.tsx
+++ b/client/packages/lowcoder/src/comps/controls/labelControl.tsx
@@ -1,6 +1,6 @@
 import { trans } from "i18n";
 import { green, red, yellow } from "@ant-design/colors";
-import { FormItemProps } from "antd";
+import { FormItemProps } from "antd/es/form/FormItem";
 import { BoolControl } from "comps/controls/boolControl";
 import { NumberControl, StringControl } from "comps/controls/codeControl";
 import { dropdownControl } from "comps/controls/dropdownControl";
@@ -48,37 +48,37 @@ const LabelViewWrapper = styled.div<{ $style: any }>`
 `;
 
 const MainWrapper = styled.div<{
-  position: PositionOptionsValue;
-  hasLabel: boolean;
+  $position: PositionOptionsValue;
+  $hasLabel: boolean;
 }>`
-  flex-direction: ${(props) => props.position};
+  flex-direction: ${(props) => props.$position};
   flex-grow: 1;
   width: 100%;
-  margin-top: ${(props) => (props.position === "column" && props.hasLabel ? "4px" : 0)};
+  margin-top: ${(props) => (props.$position === "column" && props.$hasLabel ? "4px" : 0)};
   height: ${(props) =>
-    props.position === "column" && props.hasLabel ? "calc(100% - 4px)" : "100%"};
+    props.$position === "column" && props.$hasLabel ? "calc(100% - 4px)" : "100%"};
   display: flex;
-  align-items: ${(props) => (props.position === "row" ? "center" : "start")};
+  align-items: ${(props) => (props.$position === "row" ? "center" : "start")};
   flex-shrink: 0;
 `;
 
 const LabelWrapper = styled.div<{
-  align: AlignOptionsValue;
-  position: PositionOptionsValue;
-  hasToolTip: boolean;
+  $align: AlignOptionsValue;
+  $position: PositionOptionsValue;
+  $hasToolTip: boolean;
 }>`
   display: flex;
   align-items: center;
   margin-right: 8px;
-  margin-bottom: ${(props) => (props.position === "row" ? 0 : "3.5px")};
-  justify-content: ${(props) => (props.align === "left" ? "start" : "end")};
-  max-width: ${(props) => (props.position === "row" ? "80%" : "100%")};
+  margin-bottom: ${(props) => (props.$position === "row" ? 0 : "3.5px")};
+  justify-content: ${(props) => (props.$align === "left" ? "start" : "end")};
+  max-width: ${(props) => (props.$position === "row" ? "80%" : "100%")};
   flex-shrink: 0;
 `;
 
-const Label = styled.span<{ border: boolean }>`
+const Label = styled.span<{ $border: boolean }>`
   ${labelCss};
-  ${(props) => props.border && UnderlineCss};
+  ${(props) => props.$border && UnderlineCss};
   width: fit-content;
   user-select: text;
   white-space: nowrap;
@@ -93,13 +93,13 @@ const ChildrenWrapper = styled.div`
 `;
 
 const HelpWrapper = styled.div<{
-  marginLeft: string;
-  color?: string;
+  $marginLeft: string;
+  $color?: string;
 }>`
   ${labelCss};
   margin-top: 4px;
-  margin-left: ${(props) => props.marginLeft};
-  color: ${(props) => props.color};
+  margin-left: ${(props) => props.$marginLeft};
+  color: ${(props) => props.$color};
   display: block;
   font-size: 13px;
 `;
@@ -147,8 +147,8 @@ export const LabelControl = (function () {
   return new MultiCompBuilder(childrenMap, (props) => (args: LabelViewProps) => (
     <LabelViewWrapper $style={args.style}>
       <MainWrapper	
-        position={props.position}	
-        hasLabel={!!props.text}	
+        $position={props.position}	
+        $hasLabel={!!props.text}	
         style={{	
           margin: args && args.style ? args?.style?.margin : 0,	
           // padding: args && args.style ? args?.style?.padding : 0,	
@@ -162,14 +162,14 @@ export const LabelControl = (function () {
       >
         {!props.hidden && !isEmpty(props.text) && (
           <LabelWrapper
-            align={props.align}
+            $align={props.align}
             style={{
               width:
                 props.position === "row" ? getLabelWidth(props.width, props.widthUnit) : "100%",
               maxWidth: props.position === "row" ? "70%" : "100%",
             }}
-            position={props.position}
-            hasToolTip={!!props.tooltip}
+            $position={props.position}
+            $hasToolTip={!!props.tooltip}
           >
             <Tooltip
               title={props.tooltip && <TooltipWrapper>{props.tooltip}</TooltipWrapper>}
@@ -180,7 +180,7 @@ export const LabelControl = (function () {
               color="#2c2c2c"
               getPopupContainer={(node: any) => node.closest(".react-grid-item")}
             >
-              <Label border={!!props.tooltip}>{props.text}</Label>
+              <Label $border={!!props.tooltip}>{props.text}</Label>
             </Tooltip>
             {args.required && <StyledStarIcon />}
           </LabelWrapper>
@@ -200,12 +200,12 @@ export const LabelControl = (function () {
 
       {args.help && (
         <HelpWrapper
-          marginLeft={
+          $marginLeft={
             props.position === "column" || isEmpty(props.text) || props.hidden
               ? "0"
               : `calc(min(${getLabelWidth(props.width, props.widthUnit)} , 70%) + 8px)`
           }
-          color={
+          $color={
             args.validateStatus === "error"
               ? red.primary
               : args.validateStatus === "warning"
diff --git a/client/packages/lowcoder/src/comps/controls/multiSelectControl.tsx b/client/packages/lowcoder/src/comps/controls/multiSelectControl.tsx
index a5838d2062..7b45a2690c 100644
--- a/client/packages/lowcoder/src/comps/controls/multiSelectControl.tsx
+++ b/client/packages/lowcoder/src/comps/controls/multiSelectControl.tsx
@@ -8,9 +8,9 @@ import styled from "styled-components";
 import { EllipsisTextCss } from "components/Label";
 import _ from "lodash";
 
-const LabelWrapper = styled.div<{ placement: ControlPlacement }>`
+const LabelWrapper = styled.div<{ $placement: ControlPlacement }>`
   flex-shrink: 0;
-  width: ${(props) => (props.placement === "right" ? "96px" : "bottom" ? "112px" : "136px")};
+  width: ${(props) => (props.$placement === "right" ? "96px" : "bottom" ? "112px" : "136px")};
 `;
 
 const DropDownItemLabel = styled.div`
@@ -60,13 +60,13 @@ export function multiSelectControl<T extends OptionsType>(
       return (
         <FlexDiv>
           {params.label && (
-            <LabelWrapper placement={placement}>
+            <LabelWrapper $placement={placement}>
               <ToolTipLabel title={params.tooltip} label={params.label} />
             </LabelWrapper>
           )}
 
           <Tooltip title={!params.label ? params.tooltip : undefined}>
-            <DropdownContainer placement={placement}>
+            <DropdownContainer $placement={placement}>
               <CustomSelect
                 mode={"multiple"}
                 popupClassName="ob-dropdown-control-select"
diff --git a/client/packages/lowcoder/src/comps/controls/numberSimpleControl.tsx b/client/packages/lowcoder/src/comps/controls/numberSimpleControl.tsx
index 9dd89a7c35..e706dcef47 100644
--- a/client/packages/lowcoder/src/comps/controls/numberSimpleControl.tsx
+++ b/client/packages/lowcoder/src/comps/controls/numberSimpleControl.tsx
@@ -1,4 +1,4 @@
-import { InputNumber } from "antd";
+import { default as InputNumber } from "antd/es/input-number";
 import { SimpleComp } from "lowcoder-core";
 import { ControlPropertyViewWrapper } from "lowcoder-design";
 import React, { ReactNode } from "react";
diff --git a/client/packages/lowcoder/src/comps/controls/slotControl.tsx b/client/packages/lowcoder/src/comps/controls/slotControl.tsx
index 8248e98f24..0c798c5aa5 100644
--- a/client/packages/lowcoder/src/comps/controls/slotControl.tsx
+++ b/client/packages/lowcoder/src/comps/controls/slotControl.tsx
@@ -1,4 +1,4 @@
-import { Modal } from "antd";
+import { default as Modal } from "antd/es/modal";
 import { SimpleContainerComp } from "comps/comps/containerBase/simpleContainerComp";
 import {
   ContainerBaseProps,
diff --git a/client/packages/lowcoder/src/comps/controls/styleControl.tsx b/client/packages/lowcoder/src/comps/controls/styleControl.tsx
index fe0f1b2278..a914294920 100644
--- a/client/packages/lowcoder/src/comps/controls/styleControl.tsx
+++ b/client/packages/lowcoder/src/comps/controls/styleControl.tsx
@@ -1,4 +1,4 @@
-import { Tooltip } from "antd";
+import { default as Tooltip } from "antd/es/tooltip";
 import { getThemeDetailName, isThemeColorKey, ThemeDetail } from "api/commonSettingApi";
 import { ControlItemCompBuilder } from "comps/generators/controlCompBuilder";
 import { childrenToProps, ToConstructor } from "comps/generators/multi";
diff --git a/client/packages/lowcoder/src/comps/generators/withIsLoading.tsx b/client/packages/lowcoder/src/comps/generators/withIsLoading.tsx
index 5331d251b9..26914c1df3 100644
--- a/client/packages/lowcoder/src/comps/generators/withIsLoading.tsx
+++ b/client/packages/lowcoder/src/comps/generators/withIsLoading.tsx
@@ -1,4 +1,4 @@
-import { Spin } from "antd";
+import { default as Spin } from "antd/es/spin";
 import {
   FetchCheckNode,
   FetchInfo,
diff --git a/client/packages/lowcoder/src/comps/hooks/drawerComp.tsx b/client/packages/lowcoder/src/comps/hooks/drawerComp.tsx
index 134b0e2299..1ae4b96734 100644
--- a/client/packages/lowcoder/src/comps/hooks/drawerComp.tsx
+++ b/client/packages/lowcoder/src/comps/hooks/drawerComp.tsx
@@ -1,5 +1,5 @@
 import { CloseOutlined } from "@ant-design/icons";
-import { Button } from "antd";
+import { default as Button } from "antd/es/button";
 import { ContainerCompBuilder } from "comps/comps/containerBase/containerCompBuilder";
 import { gridItemCompToGridItems, InnerGrid } from "comps/comps/containerComp/containerView";
 import { AutoHeightControl } from "comps/controls/autoHeightControl";
diff --git a/client/packages/lowcoder/src/comps/queries/esQuery.tsx b/client/packages/lowcoder/src/comps/queries/esQuery.tsx
index de933e46dd..902332bbdb 100644
--- a/client/packages/lowcoder/src/comps/queries/esQuery.tsx
+++ b/client/packages/lowcoder/src/comps/queries/esQuery.tsx
@@ -1,4 +1,4 @@
-import { Tag } from "antd";
+import { default as Tag } from "antd/es/tag";
 import { trans } from "i18n";
 import _, { includes, isEmpty, pick } from "lodash";
 import {
diff --git a/client/packages/lowcoder/src/comps/queries/httpQuery/httpQueryConstants.tsx b/client/packages/lowcoder/src/comps/queries/httpQuery/httpQueryConstants.tsx
index a0494477f2..ba9772af49 100644
--- a/client/packages/lowcoder/src/comps/queries/httpQuery/httpQueryConstants.tsx
+++ b/client/packages/lowcoder/src/comps/queries/httpQuery/httpQueryConstants.tsx
@@ -7,14 +7,14 @@ import { QueryConfigItemWrapper, QueryConfigLabel, QueryConfigWrapper } from "co
 import { GraphqlQuery } from "./graphqlQuery";
 import { StreamQuery } from "./streamQuery";
 
-const UrlInput = styled.div<{ hasAddonBefore: boolean }>`
+const UrlInput = styled.div<{ $hasAddonBefore: boolean }>`
   display: flex;
   width: 100%;
 
   .cm-editor {
     margin-top: 0;
-    ${(props) => props.hasAddonBefore && "border-top-left-radius: 0;"}
-    ${(props) => props.hasAddonBefore && "border-bottom-left-radius: 0;"};
+    ${(props) => props.$hasAddonBefore && "border-top-left-radius: 0;"}
+    ${(props) => props.$hasAddonBefore && "border-bottom-left-radius: 0;"};
   }
 `;
 
@@ -46,7 +46,7 @@ export const HttpPathPropertyView = (props: {
     <QueryConfigWrapper>
       <QueryConfigLabel>URL</QueryConfigLabel>
       <QueryConfigItemWrapper>
-        <UrlInput hasAddonBefore={!!httpConfig?.url}>
+        <UrlInput $hasAddonBefore={!!httpConfig?.url}>
           {httpConfig?.url && <UrlInputAddonBefore>{httpConfig?.url}</UrlInputAddonBefore>}
 
           {props.comp.children.path.propertyView({
diff --git a/client/packages/lowcoder/src/comps/queries/libraryQuery.tsx b/client/packages/lowcoder/src/comps/queries/libraryQuery.tsx
index bc30e137ed..26d0bc59be 100644
--- a/client/packages/lowcoder/src/comps/queries/libraryQuery.tsx
+++ b/client/packages/lowcoder/src/comps/queries/libraryQuery.tsx
@@ -1,5 +1,5 @@
 import { LoadingOutlined } from "@ant-design/icons";
-import { Spin } from "antd";
+import { default as Spin } from "antd/es/spin";
 import DataSourceIcon from "components/DataSourceIcon";
 import { ContextControlType, ContextJsonControl } from "comps/controls/contextCodeControl";
 import { trans } from "i18n";
diff --git a/client/packages/lowcoder/src/comps/queries/resourceDropdown.tsx b/client/packages/lowcoder/src/comps/queries/resourceDropdown.tsx
index d4b60a063a..037b50f496 100644
--- a/client/packages/lowcoder/src/comps/queries/resourceDropdown.tsx
+++ b/client/packages/lowcoder/src/comps/queries/resourceDropdown.tsx
@@ -1,11 +1,12 @@
-import { Divider, Select } from "antd";
+import { default as Divider } from "antd/es/divider";
+import { OptionProps, default as Select } from "antd/es/select";
 import { useSelector } from "react-redux";
 import React, { useContext, useMemo, useState } from "react";
 import { DataSourceTypeInfo } from "api/datasourceApi";
 import styled from "styled-components";
 import { CustomSelect, EllipsisTextCss } from "lowcoder-design";
 import { DatasourceModal } from "pages/datasource/datasourceModal";
-import { InputStatus } from "antd/lib/_util/statusUtils";
+import { InputStatus } from "antd/es/_util/statusUtils";
 import { getDataSource, getDataSourceTypes } from "redux/selectors/datasourceSelectors";
 import { getUser } from "redux/selectors/usersSelectors";
 import { getBottomResIcon } from "@lowcoder-ee/util/bottomResUtils";
@@ -24,6 +25,8 @@ import {
 import { QueryContext } from "util/context/QueryContext";
 import { messageInstance } from "lowcoder-design";
 
+const { Option } = Select;
+
 const SelectOptionLabel = styled.div`
   font-size: 13px;
   display: inline-block;
@@ -36,7 +39,7 @@ const SelectOptionContains = styled.div`
   align-items: center;
   width: 99%;
 `;
-const SelectOption = styled(Select.Option)`
+const SelectOption = styled((props: OptionProps) => <Option {...props} />)`
   display: flex;
   justify-content: space-between;
 
diff --git a/client/packages/lowcoder/src/comps/utils/useUIView.tsx b/client/packages/lowcoder/src/comps/utils/useUIView.tsx
index 2c5f1d1755..9456850901 100644
--- a/client/packages/lowcoder/src/comps/utils/useUIView.tsx
+++ b/client/packages/lowcoder/src/comps/utils/useUIView.tsx
@@ -1,6 +1,6 @@
 import React, { ReactNode, Suspense } from "react";
 import { useIsMobile } from "util/hooks";
-import { Skeleton } from "antd";
+import { default as Skeleton } from "antd/es/skeleton";
 
 export function useUIView(mobileView: ReactNode, pcView: ReactNode) {
   return <>{useIsMobile() ? <Suspense fallback={<Skeleton />}>{mobileView}</Suspense> : pcView}</>;
diff --git a/client/packages/lowcoder/src/debug.tsx b/client/packages/lowcoder/src/debug.tsx
index 1ef51485fd..f3dfcc8be9 100644
--- a/client/packages/lowcoder/src/debug.tsx
+++ b/client/packages/lowcoder/src/debug.tsx
@@ -1,4 +1,5 @@
-import { Layout, Menu } from "antd";
+import { default as Layout } from "antd/es/layout";
+import { default as Menu } from "antd/es/menu";
 import { Comp } from "lowcoder-core";
 import { InputComp } from "comps/comps/textInputComp/inputComp";
 import { ButtonComp } from "comps/comps/buttonComp/buttonComp";
diff --git a/client/packages/lowcoder/src/ide/CompIde.tsx b/client/packages/lowcoder/src/ide/CompIde.tsx
index 2ac7151b3a..31400138fe 100644
--- a/client/packages/lowcoder/src/ide/CompIde.tsx
+++ b/client/packages/lowcoder/src/ide/CompIde.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Menu } from "antd";
+import { default as Menu } from "antd/es/menu";
 import { CompPlayground } from "./CompPlayground";
 import styled from "styled-components";
 import { UICompLayoutInfo } from "comps/uiCompRegistry";
diff --git a/client/packages/lowcoder/src/ide/CompPlayground.tsx b/client/packages/lowcoder/src/ide/CompPlayground.tsx
index 2dcbf2e8b8..f458ee1847 100644
--- a/client/packages/lowcoder/src/ide/CompPlayground.tsx
+++ b/client/packages/lowcoder/src/ide/CompPlayground.tsx
@@ -2,7 +2,10 @@ import React, { useState, useMemo, ChangeEvent } from "react";
 import ReactJson from "react-json-view";
 import { UICompLayoutInfo } from "comps/uiCompRegistry";
 import { Comp, customAction } from "lowcoder-core";
-import { Button, Space, Input, Form } from "antd";
+import { default as Button } from "antd/es/button";
+import { default as Space } from "antd/es/space";
+import { default as Input } from "antd/es/input";
+import { default as Form } from "antd/es/form";
 import styled from "styled-components";
 import { useCompInstance, GetContainerParams } from "comps/utils/useCompInstance";
 import { CanvasContainerID } from "constants/domLocators";
diff --git a/client/packages/lowcoder/src/layout/compSelectionWrapper.tsx b/client/packages/lowcoder/src/layout/compSelectionWrapper.tsx
index 4214ab6d99..88de42290c 100644
--- a/client/packages/lowcoder/src/layout/compSelectionWrapper.tsx
+++ b/client/packages/lowcoder/src/layout/compSelectionWrapper.tsx
@@ -24,32 +24,32 @@ export type DragHandleName = "w" | "e" | "nw" | "ne" | "sw" | "se";
 type NamePos = "top" | "bottom" | "bottomInside";
 
 const NameDiv = styled.div<{
-  isSelected: boolean;
-  position: NamePos;
-  compType: UICompType;
-  isDraggable: boolean;
+  $isSelected: boolean;
+  $position: NamePos;
+  $compType: UICompType;
+  $isDraggable: boolean;
 }>`
   background: ${(props) => {
-    if (props.isSelected) {
-      return props.compType === "module" ? ModulePrimaryColor : PrimaryColor;
+    if (props.$isSelected) {
+      return props.$compType === "module" ? ModulePrimaryColor : PrimaryColor;
     }
     return "#B8B9BF";
   }};
-  border-radius: ${(props) => (props.position === "top" ? "2px 2px 0 0" : "0 0 2px 2px")};
+  border-radius: ${(props) => (props.$position === "top" ? "2px 2px 0 0" : "0 0 2px 2px")};
   font-weight: 500;
   color: #ffffff;
   position: absolute;
   font-size: 12px;
   line-height: 16px;
-  top: ${(props) => (props.position === "top" ? "-16px" : "unset")};
+  top: ${(props) => (props.$position === "top" ? "-16px" : "unset")};
   bottom: ${(props) =>
-    props.position === "top" ? "unset" : props.position === "bottom" ? "-16px" : "0px"};
+    props.$position === "top" ? "unset" : props.$position === "bottom" ? "-16px" : "0px"};
   height: 16px;
   right: 0;
   padding-right: 5px;
-  padding-left: ${(props) => (props.isDraggable ? 0 : "5px")};
+  padding-left: ${(props) => (props.$isDraggable ? 0 : "5px")};
   display: flex;
-  cursor: ${(props) => (props.isDraggable ? "grab" : "pointer")};
+  cursor: ${(props) => (props.$isDraggable ? "grab" : "pointer")};
   z-index: 10;
 `;
 const NameLabel = styled.span`
@@ -97,12 +97,12 @@ function getLineStyle(
 
 // padding: ${props => props.hover || props.showDashline ? 3 : 4}px;
 const SelectableDiv = styled.div<{
-  hover: boolean;
-  showDashLine: boolean;
-  isSelected: boolean;
-  compType: UICompType;
-  isHidden: boolean;
-  needResizeDetector: boolean;
+  $hover?: boolean;
+  $showDashLine: boolean;
+  $isSelected: boolean;
+  $compType: UICompType;
+  $isHidden: boolean;
+  $needResizeDetector: boolean;
 }>`
   width: 100%;
   height: 100%;
@@ -110,19 +110,19 @@ const SelectableDiv = styled.div<{
 
   ${(props) =>
     `${getLineStyle(
-      props.hover,
-      props.showDashLine,
-      props.isSelected,
-      props.compType,
-      props.isHidden
+      Boolean(props.$hover),
+      props.$showDashLine,
+      props.$isSelected,
+      props.$compType,
+      props.$isHidden
     )}`}
   & .module-wrapper {
     margin: ${-GRID_ITEM_BORDER_WIDTH}px;
   }
 
   ${(props) =>
-    props.compType === "image" &&
-    props.needResizeDetector &&
+    props.$compType === "image" &&
+    props.$needResizeDetector &&
     `
     display: inline-flex;
     align-items: center;
@@ -293,16 +293,16 @@ export const CompSelectionWrapper = (props: {
         onMouseOver,
         onMouseOut,
         onClick: props.onClick,
-        hover: hover,
-        showDashLine: editorState.showGridLines() || props.hidden,
-        isSelected: props.isSelected,
-        isHidden: props.hidden,
+        $hover: hover || undefined,
+        $showDashLine: editorState.showGridLines() || props.hidden,
+        $isSelected: props.isSelected,
+        $isHidden: props.hidden,
       }
     : {
-        hover: false,
-        showDashLine: false,
-        isSelected: false,
-        isHidden: false,
+        $hover: undefined,
+        $showDashLine: false,
+        $isSelected: false,
+        $isHidden: false,
       };
 
   const zIndex = props.isSelected
@@ -325,16 +325,16 @@ export const CompSelectionWrapper = (props: {
     <div id={props.id} style={{ ...props.style, zIndex }} className={props.className}>
       <SelectableDiv
         {...selectableDivProps}
-        compType={props.compType}
+        $compType={props.compType}
         ref={wrapperRef}
-        needResizeDetector={needResizeDetector}
+        $needResizeDetector={needResizeDetector}
       >
         {props.isSelectable && nameConfig.show && (hover || props.isSelected || props.hidden) && (
           <NameDiv
-            compType={props.compType}
-            isSelected={hover || props.isSelected}
-            position={nameConfig.pos}
-            isDraggable={props.isDraggable}
+            $compType={props.compType}
+            $isSelected={hover || props.isSelected}
+            $position={nameConfig.pos}
+            $isDraggable={props.isDraggable}
             ref={nameDivRef}
           >
             {props.isDraggable && <DragWhiteIcon />}
diff --git a/client/packages/lowcoder/src/layout/gridLayout.tsx b/client/packages/lowcoder/src/layout/gridLayout.tsx
index 52ff9d0ab0..328ff1ab6b 100644
--- a/client/packages/lowcoder/src/layout/gridLayout.tsx
+++ b/client/packages/lowcoder/src/layout/gridLayout.tsx
@@ -70,10 +70,10 @@ const DELAY_HIGHER_MS = 5;
 export const FLY_START_INFO = "flyStartInfo";
 export const FLY_OVER_INFO = "flyOverInfo";
 
-const DragPlaceHolder = styled.div<{ compType: UICompType }>`
+const DragPlaceHolder = styled.div<{ $compType: UICompType }>`
   height: 100%;
   background-color: ${(props) =>
-    props.compType === "module" ? ModulePrimaryColor : PrimaryColor} !important;
+    props.$compType === "module" ? ModulePrimaryColor : PrimaryColor} !important;
 `;
 
 /**
@@ -399,7 +399,7 @@ class GridLayout extends React.Component<GridLayoutProps, GridLayoutState> {
     const draggingExtraLayout = draggingUtils.getData<FlyStartInfo>(FLY_START_INFO)?.flyExtraLayout;
     const extraItem = this.props.extraLayout?.[item.i] ?? draggingExtraLayout?.[item.i];
     const child = item.placeholder ? (
-      <DragPlaceHolder compType={extraItem?.compType} className="react-grid-placeholder" />
+      <DragPlaceHolder $compType={extraItem?.compType} className="react-grid-placeholder" />
     ) : (
       childrenMap[item.i]
     );
@@ -1006,10 +1006,10 @@ class GridLayout extends React.Component<GridLayoutProps, GridLayoutState> {
         ref={this.ref}
         className={mergedClassName}
         style={style}
-        bgColor={this.props.bgColor}
-        radius={this.props.radius}
-        autoHeight={this.props.autoHeight}
-        overflow={this.props.overflow}
+        $bgColor={this.props.bgColor}
+        $radius={this.props.radius}
+        $autoHeight={this.props.autoHeight}
+        $overflow={this.props.overflow}
         tabIndex={-1}
         onDrop={isDroppable ? this.onDrop : _.noop}
         onDragLeave={isDroppable ? this.onDragLeave : _.noop}
@@ -1036,20 +1036,20 @@ class GridLayout extends React.Component<GridLayoutProps, GridLayoutState> {
 }
 
 const LayoutContainer = styled.div<{
-  bgColor?: string;
-  autoHeight?: boolean;
-  overflow?: string;
-  radius?: string;
+  $bgColor?: string;
+  $autoHeight?: boolean;
+  $overflow?: string;
+  $radius?: string;
 }>`
-  border-radius: ${(props) => props.radius ?? "4px"};
-  background-color: ${(props) => props.bgColor ?? "#f5f5f6"};
+  border-radius: ${(props) => props.$radius ?? "4px"};
+  background-color: ${(props) => props.$bgColor ?? "#f5f5f6"};
   /* height: 100%; */
-  height: ${(props) => (props.autoHeight ? "auto" : "100%")};
+  height: ${(props) => (props.$autoHeight ? "auto" : "100%")};
 
   overflow: auto;
-  overflow: ${(props) => props.overflow ?? "overlay"};
+  overflow: ${(props) => props.$overflow ?? "overlay"};
   ${(props) =>
-    props.autoHeight &&
+    props.$autoHeight &&
     `::-webkit-scrollbar {
     display: none;
   }`}
diff --git a/client/packages/lowcoder/src/layout/handler.tsx b/client/packages/lowcoder/src/layout/handler.tsx
index e09f1ebdff..6e98170142 100644
--- a/client/packages/lowcoder/src/layout/handler.tsx
+++ b/client/packages/lowcoder/src/layout/handler.tsx
@@ -22,9 +22,9 @@ const EdgeHandle = css`
   }
 `;
 
-const HorizontalHandle = css<{ axis: string }>`
+const HorizontalHandle = css<{ $axis: string }>`
   ${EdgeHandle}
-  ${(props) => (props.axis === "s" ? "bottom: -10px;" : "top: -10px;")}
+  ${(props) => (props.$axis === "s" ? "bottom: -10px;" : "top: -10px;")}
   /* left: -4px; */
   height: 12px !important;
   /* width: calc(100% + 8px) !important; */
@@ -38,9 +38,9 @@ const HorizontalHandle = css<{ axis: string }>`
   }
 `;
 
-const VerticalHandleStyles = css<{ axis: string }>`
+const VerticalHandleStyles = css<{ $axis: string }>`
   ${EdgeHandle}
-  ${(props) => (props.axis === "e" ? "right: -10px;" : "left: -10px;")}
+  ${(props) => (props.$axis === "e" ? "right: -10px;" : "left: -10px;")}
   width: 12px !important;
   top: 0px;
   /* height: calc(100% + 8px) !important; */
@@ -54,7 +54,7 @@ const VerticalHandleStyles = css<{ axis: string }>`
   }
 `;
 
-const CornerHandle = css<{ axis: string }>`
+const CornerHandle = css<{ $axis: string }>`
   position: absolute;
   z-index: 3;
   width: 10px !important;
@@ -64,23 +64,23 @@ const CornerHandle = css<{ axis: string }>`
     height: 10px !important;
     border: none !important;
   }
-  cursor: ${(props) => props.axis + "-resize"} !important;
-  ${(props) => (["nw", "ne"].indexOf(props.axis) >= 0 ? "top: -5px;" : "")};
-  ${(props) => (["sw", "se"].indexOf(props.axis) >= 0 ? "bottom: -5px;" : "")};
-  ${(props) => (["sw", "nw"].indexOf(props.axis) >= 0 ? "left: -5px;" : "")};
-  ${(props) => (["se", "ne"].indexOf(props.axis) >= 0 ? "right: -5px;" : "")};
+  cursor: ${(props) => props.$axis + "-resize"} !important;
+  ${(props) => (["nw", "ne"].indexOf(props.$axis) >= 0 ? "top: -5px;" : "")};
+  ${(props) => (["sw", "se"].indexOf(props.$axis) >= 0 ? "bottom: -5px;" : "")};
+  ${(props) => (["sw", "nw"].indexOf(props.$axis) >= 0 ? "left: -5px;" : "")};
+  ${(props) => (["se", "ne"].indexOf(props.$axis) >= 0 ? "right: -5px;" : "")};
 `;
 
-const ResizeHandle = styled.div<{ axis: string }>`
+const ResizeHandle = styled.div<{ $axis: string }>`
   position: absolute;
   background-image: none;
-  ${(props) => (["s", "n"].indexOf(props.axis) >= 0 ? HorizontalHandle : "")};
-  ${(props) => (["w", "e"].indexOf(props.axis) >= 0 ? VerticalHandleStyles : "")};
-  ${(props) => (["sw", "nw", "se", "ne"].indexOf(props.axis) >= 0 ? CornerHandle : "")};
+  ${(props) => (["s", "n"].indexOf(props.$axis) >= 0 ? HorizontalHandle : "")};
+  ${(props) => (["w", "e"].indexOf(props.$axis) >= 0 ? VerticalHandleStyles : "")};
+  ${(props) => (["sw", "nw", "se", "ne"].indexOf(props.$axis) >= 0 ? CornerHandle : "")};
 `;
 
 const Handle = (axis: ResizeHandleAxis, ref: ReactRef<HTMLDivElement>) => {
-  return <ResizeHandle ref={ref} axis={axis} className={`react-resizable-handle`}></ResizeHandle>;
+  return <ResizeHandle ref={ref} $axis={axis} className={`react-resizable-handle`}></ResizeHandle>;
 };
 
 export default Handle;
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/CreateDropdown.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/CreateDropdown.tsx
index 176552c26e..d3c97e6dab 100644
--- a/client/packages/lowcoder/src/pages/ApplicationV2/CreateDropdown.tsx
+++ b/client/packages/lowcoder/src/pages/ApplicationV2/CreateDropdown.tsx
@@ -11,11 +11,12 @@ import {
   TacoButton,
 } from "lowcoder-design";
 import React, { FunctionComponent, useState } from "react";
-import { ItemType } from "antd/lib/menu/hooks/useItems";
+import { ItemType } from "antd/es/menu/hooks/useItems";
 import { HomeResInfo } from "../../util/homeResUtils";
 import { createAppItemClass } from "../tutorials/HomeTutorialsV2";
 import styled from "styled-components";
-import { Dropdown as AntdDropdown, Menu as AntdMenu } from "antd";
+import { default as AntdDropdown } from "antd/es/dropdown";
+import { default as AntdMenu } from "antd/es/menu";
 import { HomeLayoutMode } from "./HomeLayout";
 import { useSelector } from "react-redux";
 import { getUser } from "../../redux/selectors/usersSelectors";
@@ -31,7 +32,6 @@ const Dropdown = styled(AntdDropdown)`
 
 const CreateDropdownMenu = styled(AntdMenu)`
 &&& {
-
   width: fit-content;
   min-width: 110px;
   padding: 8px;
@@ -44,12 +44,10 @@ const CreateDropdownMenu = styled(AntdMenu)`
     padding: 8px;
     display: flex;
     align-items: center;
-  }
-
-  .ant-dropdown-menu-item:hover,
-  .ant-dropdown-menu-submenu-title:hover {
-    background: #f2f7fc;
-    border-radius: 4px;
+    &:hover {
+      background: #f2f7fc;
+      border-radius: 4px;
+    }
   }
 
   .ant-dropdown-menu-title-content {
@@ -104,7 +102,7 @@ const LayoutItemWrapper = styled.div`
   align-items: center;
   flex-direction: column;
 
-  :hover {
+  &:hover {
     border: 1px solid ${ActiveTextColor};
 
     ${CommonTextLabel} {
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx
index ff680cc7d8..9ecd9aa16d 100644
--- a/client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx
+++ b/client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx
@@ -5,7 +5,9 @@ import { ApplicationMeta, FolderMeta } from "constants/applicationConstants";
 import { ALL_APPLICATIONS_URL } from "constants/routesURL";
 import history from "util/history";
 import dayjs from "dayjs";
-import { Breadcrumb as AntdBreadcrumb, Select, Skeleton } from "antd";
+import { default as AntdBreadcrumb } from "antd/es/breadcrumb";
+import { default as Select } from "antd/es/select";
+import { default as Skeleton } from "antd/es/skeleton";
 import React, { useEffect, useState } from "react";
 import {
   ArrowIcon,
@@ -208,7 +210,7 @@ const LayoutSwitcher = styled.div`
   align-items: center;
   justify-content: center;
 
-  :hover {
+  &:hover {
     background-color: #f5f5f6;
   }
 
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/HomeResCard.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/HomeResCard.tsx
index 3b62e16809..26c97eb30d 100644
--- a/client/packages/lowcoder/src/pages/ApplicationV2/HomeResCard.tsx
+++ b/client/packages/lowcoder/src/pages/ApplicationV2/HomeResCard.tsx
@@ -43,7 +43,7 @@ const ExecButton = styled(TacoButton)`
   font-weight: 500;
   color: #4965f2;
 
-  :hover {
+  &:hover {
     background: #f9fbff;
     border: 1px solid #c2d6ff;
     color: #315efb;
@@ -62,7 +62,7 @@ const Wrapper = styled.div`
   margin-bottom: -1px;
   margin-top: 1px;
 
-  :hover {
+  &:hover {
     background-color: #f5f7fa;
   }
 `;
@@ -79,7 +79,7 @@ const Card = styled.div`
     opacity: 0;
   }
 
-  :hover {
+  &:hover {
     button {
       opacity: 1;
     }
@@ -107,7 +107,7 @@ const CardInfo = styled.div`
   overflow: hidden;
   padding-right: 12px;
 
-  :hover {
+  &:hover {
     .ant-typography {
       color: #315efb;
     }
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/HomeResOptions.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/HomeResOptions.tsx
index f9a4cf61b3..1573cce3cc 100644
--- a/client/packages/lowcoder/src/pages/ApplicationV2/HomeResOptions.tsx
+++ b/client/packages/lowcoder/src/pages/ApplicationV2/HomeResOptions.tsx
@@ -22,7 +22,7 @@ const PopoverIcon = styled(PointIcon)`
     fill: #8b8fa3;
   }
 
-  :hover {
+  &:hover {
     background-color: #e1e3eb;
     border-radius: 4px;
     cursor: pointer;
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/HomeTableView.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/HomeTableView.tsx
index d62ee7a3b1..4a76939ee6 100644
--- a/client/packages/lowcoder/src/pages/ApplicationV2/HomeTableView.tsx
+++ b/client/packages/lowcoder/src/pages/ApplicationV2/HomeTableView.tsx
@@ -13,7 +13,7 @@ import { HomeResTypeEnum } from "../../types/homeRes";
 import React, { useState } from "react";
 import { updateFolder } from "../../redux/reduxActions/folderActions";
 import { updateAppMetaAction } from "../../redux/reduxActions/applicationActions";
-import { Typography } from "antd";
+import { default as AntdTypographyText } from "antd/es/typography/Text";
 import { HomeRes } from "./HomeLayout";
 import { HomeResOptions } from "./HomeResOptions";
 import { MoveToFolderModal } from "./MoveToFolderModal";
@@ -44,7 +44,7 @@ const EditBtn = styled(TacoButton)`
   height: 24px;
 `;
 
-const TypographyText = styled(Typography.Text)`
+const TypographyText = styled(AntdTypographyText)`
   margin: 0 !important;
   left: 0 !important;
   width: 100%;
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/MoveToFolderModal.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/MoveToFolderModal.tsx
index a1f0bb61fc..6a16283625 100644
--- a/client/packages/lowcoder/src/pages/ApplicationV2/MoveToFolderModal.tsx
+++ b/client/packages/lowcoder/src/pages/ApplicationV2/MoveToFolderModal.tsx
@@ -1,5 +1,5 @@
 import { HomeRes } from "./HomeLayout";
-import { Form } from "antd";
+import { default as Form } from "antd/es/form";
 import React, { useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useParams } from "react-router-dom";
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/TrashTableView.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/TrashTableView.tsx
index 2303aab15c..765d090b53 100644
--- a/client/packages/lowcoder/src/pages/ApplicationV2/TrashTableView.tsx
+++ b/client/packages/lowcoder/src/pages/ApplicationV2/TrashTableView.tsx
@@ -27,7 +27,8 @@ const NameWrapper = styled.div`
 
 const EditBtn = styled(TacoButton)`
   opacity: 0;
-  width: 52px;
+  min-width: 52px !important;
+  width: auto !important;
   height: 24px;
 `;
 
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/components/AppImport.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/components/AppImport.tsx
index 010b37bc78..e4d43e5763 100644
--- a/client/packages/lowcoder/src/pages/ApplicationV2/components/AppImport.tsx
+++ b/client/packages/lowcoder/src/pages/ApplicationV2/components/AppImport.tsx
@@ -1,4 +1,4 @@
-import { Upload as AntUpload } from "antd";
+import { default as AntUpload } from "antd/es/upload";
 import React from "react";
 import ApplicationApi from "api/applicationApi";
 import { validateResponse } from "api/apiUtils";
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/index.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/index.tsx
index 21ceba6402..7e24d5eee6 100644
--- a/client/packages/lowcoder/src/pages/ApplicationV2/index.tsx
+++ b/client/packages/lowcoder/src/pages/ApplicationV2/index.tsx
@@ -77,7 +77,7 @@ const FolderCountLabel = styled.span`
   color: #b8b9bf;
 `;
 
-const FolderNameWrapper = styled.div<{ selected: boolean }>`
+const FolderNameWrapper = styled.div<{ $selected: boolean }>`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -86,7 +86,7 @@ const FolderNameWrapper = styled.div<{ selected: boolean }>`
   height: 100%;
 
   ${(props) => {
-    if (props.selected) {
+    if (props.$selected) {
       return css`
         font-weight: 500;
 
@@ -101,7 +101,7 @@ const FolderNameWrapper = styled.div<{ selected: boolean }>`
     line-height: 16px;
   }
 
-  :hover {
+  &:hover {
     svg {
       display: inline-block;
     }
@@ -133,9 +133,9 @@ const FolderName = (props: { id: string; name: string }) => {
   );
 };
 
-const MoreFoldersWrapper = styled.div<{ selected: boolean }>`
+const MoreFoldersWrapper = styled.div<{ $selected: boolean }>`
   ${(props) => {
-    if (props.selected) {
+    if (props.$selected) {
       return css`
         font-weight: 500;
       `;
@@ -143,12 +143,12 @@ const MoreFoldersWrapper = styled.div<{ selected: boolean }>`
   }}
 `;
 
-const MoreFoldersIcon = styled(PointIcon)<{ selected: boolean }>`
+const MoreFoldersIcon = styled(PointIcon)<{ $selected: boolean }>`
   cursor: pointer;
   flex-shrink: 0;
 
   g {
-    fill: ${(props) => (props.selected ? "#4965f2" : "#8b8fa3")};
+    fill: ${(props) => (props.$selected ? "#4965f2" : "#8b8fa3")};
   }
 `;
 
@@ -161,7 +161,7 @@ const PopoverIcon = styled(PointIcon)`
     fill: #8b8fa3;
   }
 
-  :hover {
+  &:hover {
     background-color: #e1e3eb;
     border-radius: 4px;
     cursor: pointer;
@@ -183,7 +183,7 @@ const InviteUser = styled.div`
   cursor: pointer;
   width: 219px;
 
-  :hover {
+  &:hover {
     color: #315efb;
 
     svg g g {
@@ -202,7 +202,7 @@ const CreateFolderIcon = styled.div`
   justify-content: center;
   border-radius: 4px;
 
-  :hover {
+  &:hover {
     g {
       stroke: #315efb;
     }
@@ -292,7 +292,7 @@ export default function ApplicationHome() {
       return {
         onSelected: (_, currentPath) => currentPath === path,
         text: (props: { selected?: boolean }) => (
-          <FolderNameWrapper selected={Boolean(props.selected)}>
+          <FolderNameWrapper $selected={Boolean(props.selected)}>
             <FolderName name={folder.name} id={folder.folderId} />
           </FolderNameWrapper>
         ),
@@ -310,7 +310,7 @@ export default function ApplicationHome() {
       ...folderItems,
       {
         text: (props: { selected?: boolean }) => (
-          <MoreFoldersWrapper selected={Boolean(props.selected)}>{trans("more")}</MoreFoldersWrapper>
+          <MoreFoldersWrapper $selected={Boolean(props.selected)}>{trans("more")}</MoreFoldersWrapper>
         ),
         routePath: FOLDERS_URL,
         routeComp: RootFolderListView,
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/useCreateFolder.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/useCreateFolder.tsx
index 36d27b637a..4c12439497 100644
--- a/client/packages/lowcoder/src/pages/ApplicationV2/useCreateFolder.tsx
+++ b/client/packages/lowcoder/src/pages/ApplicationV2/useCreateFolder.tsx
@@ -2,13 +2,13 @@ import { CustomModal, DatasourceForm, FormInputItem, FormSection } from "lowcode
 import { RuleObject, StoreValue } from "rc-field-form/lib/interface";
 import { createFolder } from "../../redux/reduxActions/folderActions";
 import React, { useCallback, useMemo } from "react";
-import { Form } from "antd";
+import { default as Form } from "antd/es/form";
 import { useDispatch, useSelector } from "react-redux";
 import styled from "styled-components";
 import { getUser } from "../../redux/selectors/usersSelectors";
 import { trans } from "../../i18n";
 import { foldersSelector } from "../../redux/selectors/folderSelector";
-import { ModalFunc } from "antd/lib/modal/confirm";
+import { ModalFunc } from "antd/es/modal/confirm";
 
 const CreateFolderLabel = styled.div`
   font-size: 13px;
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/common/Example.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/common/Example.tsx
index 73402350bc..1a6d6c571a 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/common/Example.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/common/Example.tsx
@@ -69,8 +69,8 @@ const Wrapper = styled.div`
     }
   }
 `;
-const ColorLump = styled.div<{ inputColor: string }>`
-  background-color: ${(props) => props.inputColor};
+const ColorLump = styled.div<{ $inputColor: string }>`
+  background-color: ${(props) => props.$inputColor};
   border: 1px;
   border-radius: 5px;
   width: 16px;
@@ -172,7 +172,7 @@ function SettingValue(props: { value: React.ReactNode }) {
   if (Regex(content, /#[0-9a-zA-Z]{6,6}/)) {
     content = (
       <>
-        <ColorLump inputColor={String(value)} />
+        <ColorLump $inputColor={String(value)} />
         <div> {String(value)}</div>
       </>
     );
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/common/Exposing.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/common/Exposing.tsx
index 5d93dfa22a..eaf795de82 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/common/Exposing.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/common/Exposing.tsx
@@ -1,4 +1,4 @@
-import { Table } from "antd";
+import { default as Table } from "antd/es/table";
 import { Comp } from "lowcoder-core";
 import { UICompType } from "comps/uiCompRegistry";
 import { EventConfigsType } from "comps/controls/eventHandlerControl";
diff --git a/client/packages/lowcoder/src/pages/common/commonLayout.tsx b/client/packages/lowcoder/src/pages/common/commonLayout.tsx
index f78ab704f1..a4762742b2 100644
--- a/client/packages/lowcoder/src/pages/common/commonLayout.tsx
+++ b/client/packages/lowcoder/src/pages/common/commonLayout.tsx
@@ -1,5 +1,5 @@
 import { Route, Switch, useLocation } from "react-router-dom";
-import { Layout } from "antd";
+import { default as Layout } from "antd/es/layout";
 import { AppHeader } from "pages/common/header";
 import { Menu } from "lowcoder-design";
 import history from "util/history";
diff --git a/client/packages/lowcoder/src/pages/common/header.tsx b/client/packages/lowcoder/src/pages/common/header.tsx
index 0b80f0b73b..65663b68d7 100644
--- a/client/packages/lowcoder/src/pages/common/header.tsx
+++ b/client/packages/lowcoder/src/pages/common/header.tsx
@@ -1,4 +1,6 @@
-import { Dropdown, Skeleton, Radio, RadioChangeEvent } from "antd";
+import { default as Dropdown } from "antd/es/dropdown";
+import { default as Skeleton } from "antd/es/skeleton";
+import { default as Radio, RadioChangeEvent } from "antd/es/radio";
 import LayoutHeader from "components/layout/Header";
 import { SHARE_TITLE } from "constants/apiConstants";
 import { AppTypeEnum } from "constants/applicationConstants";
@@ -54,7 +56,7 @@ const LogoIcon = styled(Logo)`
   max-width: 24px;
 `;
 
-const IconCss = css<{ $show: boolean }>`
+const IconCss = css<{ $show?: boolean }>`
   &:hover {
     background-color: #8b8fa34c;
   }
@@ -133,8 +135,8 @@ const RecoverSnapshotBtn = styled(TacoButton)`
   padding: 4px 7px;
   height: 28px;
 
-  :disabled,
-  :disabled:hover {
+  &:disabled,
+  &:disabled:hover {
     background: #4965f2;
     border: 1px solid #4965f2;
     color: #ffffff;
diff --git a/client/packages/lowcoder/src/pages/common/headerStartDropdown.tsx b/client/packages/lowcoder/src/pages/common/headerStartDropdown.tsx
index bffcb4d78d..eefa27800b 100644
--- a/client/packages/lowcoder/src/pages/common/headerStartDropdown.tsx
+++ b/client/packages/lowcoder/src/pages/common/headerStartDropdown.tsx
@@ -1,4 +1,4 @@
-import { Dropdown } from "antd";
+import { default as Dropdown } from "antd/es/dropdown";
 import { BASE_URL } from "constants/routesURL";
 import {
   CommonTextLabel,
diff --git a/client/packages/lowcoder/src/pages/common/help.tsx b/client/packages/lowcoder/src/pages/common/help.tsx
index 18b4516180..2baaba2259 100644
--- a/client/packages/lowcoder/src/pages/common/help.tsx
+++ b/client/packages/lowcoder/src/pages/common/help.tsx
@@ -3,7 +3,9 @@ import { Layers } from "constants/Layers";
 import { HelpIcon, LeftHelpIcon, HelpGithubIcon, HelpDiscordIcon } from "lowcoder-design";
 import { VideoIcon, ChatIcon, DocIcon, TutorialIcon, ShortcutIcon } from "assets/icons";
 import TutorialVideoPic from "assets/images/tutorialVideoThumbnail.png";
-import { Dropdown, Popover, Tooltip } from "antd";
+import { default as Dropdown } from "antd/es/dropdown";
+import { default as Popover } from "antd/es/popover";
+import { default as Tooltip } from "antd/es/tooltip";
 import {
   customerService,
   showCustomerServicePanel,
@@ -76,7 +78,7 @@ const HelpDiv = styled.div`
   width: 40px;
   cursor: pointer;
 
-  :hover {
+  &:hover {
     background: #315efb;
   }
 
@@ -131,7 +133,7 @@ const VersionDivEdit = styled.div`
   }
 `;
 
-const SpanStyled = styled.span<{ selected?: boolean }>`
+const SpanStyled = styled.span<{ $selected?: boolean }>`
   display: block;
   width: 26px;
   height: 26px;
@@ -147,7 +149,7 @@ const SpanStyled = styled.span<{ selected?: boolean }>`
       border-radius: 4px;
     }
     ${(props) =>
-      props.selected &&
+      props.$selected &&
       `
         background: #8b8fa37f;
         border-radius: 4px;
@@ -432,7 +434,7 @@ export function HelpDropdown(props: HelpDropdownProps) {
         onOpenChange={(open: boolean) => setShowDropdown(open)}
       >
         {props.isEdit ? (
-          <SpanStyled selected={showDropdown}>
+          <SpanStyled $selected={showDropdown}>
             <LeftHelpIcon />
           </SpanStyled>
         ) : (
diff --git a/client/packages/lowcoder/src/pages/common/orgLogo.tsx b/client/packages/lowcoder/src/pages/common/orgLogo.tsx
index 99f0598a2e..0dc9427d40 100644
--- a/client/packages/lowcoder/src/pages/common/orgLogo.tsx
+++ b/client/packages/lowcoder/src/pages/common/orgLogo.tsx
@@ -16,7 +16,7 @@ export default function OrgImage(props: {
   const backgroundColor = shouldRenderImage ? "transparent" : initialsAndColorCode[1];
 
   return (
-    <ImgWrapper backgroundColor={backgroundColor} className={props.className} side={props.side}>
+    <ImgWrapper $backgroundColor={backgroundColor} className={props.className} $side={props.side}>
       {!shouldRenderImage ? (
         <span>{initialsAndColorCode[0]}</span>
       ) : (
diff --git a/client/packages/lowcoder/src/pages/common/previewHeader.tsx b/client/packages/lowcoder/src/pages/common/previewHeader.tsx
index a2ed496e42..507330cbf2 100644
--- a/client/packages/lowcoder/src/pages/common/previewHeader.tsx
+++ b/client/packages/lowcoder/src/pages/common/previewHeader.tsx
@@ -1,4 +1,4 @@
-import { Skeleton } from "antd";
+import { default as Skeleton } from "antd/es/skeleton";
 import Header from "components/layout/Header";
 import { SHARE_TITLE } from "constants/apiConstants";
 import { ALL_APPLICATIONS_URL, APPLICATION_VIEW_URL, AUTH_LOGIN_URL } from "constants/routesURL";
@@ -18,10 +18,10 @@ import { AppPermissionDialog } from "../../components/PermissionDialog/AppPermis
 import { useState } from "react";
 import { getBrandingConfig } from "../../redux/selectors/configSelectors";
 
-const HeaderFont = styled.div<{ bgColor: string }>`
+const HeaderFont = styled.div<{ $bgColor: string }>`
   font-weight: 500;
   font-size: 14px;
-  color: ${(props) => (isDarkColor(props.bgColor) ? "#ffffff" : "#000000")};
+  color: ${(props) => (isDarkColor(props.$bgColor) ? "#ffffff" : "#000000")};
   font-style: normal;
   line-height: 24px;
   margin-right: 8px;
@@ -137,7 +137,7 @@ export const PreviewHeader = () => {
       <StyledLink onClick={() => history.push(ALL_APPLICATIONS_URL)}>
         <LogoIcon branding={true} />
       </StyledLink>
-      <HeaderFont bgColor={brandingConfig?.headerColor ?? "#2c2c2c"}>
+      <HeaderFont $bgColor={brandingConfig?.headerColor ?? "#2c2c2c"}>
         {application && application.name}
       </HeaderFont>
     </>
diff --git a/client/packages/lowcoder/src/pages/common/profileDropdown.tsx b/client/packages/lowcoder/src/pages/common/profileDropdown.tsx
index adc001b76d..b6f8b51136 100644
--- a/client/packages/lowcoder/src/pages/common/profileDropdown.tsx
+++ b/client/packages/lowcoder/src/pages/common/profileDropdown.tsx
@@ -1,4 +1,5 @@
-import { Dropdown, Menu } from "antd";
+import { default as Dropdown } from "antd/es/dropdown";
+import { default as Menu, MenuItemProps } from "antd/es/menu";
 import { Org, OrgRoleInfo } from "constants/orgConstants";
 import { ORGANIZATION_SETTING } from "constants/routesURL";
 import { User } from "constants/userConstants";
@@ -28,6 +29,8 @@ import { checkIsMobile } from "util/commonUtils";
 import { selectSystemConfig } from "redux/selectors/configSelectors";
 import { ItemType } from "antd/es/menu/hooks/useItems";
 
+const { Item } = Menu;
+
 const ProfileWrapper = styled.div`
   display: flex;
   align-items: center;
@@ -68,7 +71,7 @@ const StyledPackUpIcon = styled(PackUpIcon)`
   transform: rotate(90deg);
 `;
 
-const SelectDropMenuItem = styled(Menu.Item)`
+const SelectDropMenuItem = styled((props: MenuItemProps) => <Item {...props} />)`
   .ant-dropdown-menu-item-icon {
     position: absolute;
     right: 0;
diff --git a/client/packages/lowcoder/src/pages/common/profileImage.tsx b/client/packages/lowcoder/src/pages/common/profileImage.tsx
index f3a73e5b9a..1a62dda4ca 100644
--- a/client/packages/lowcoder/src/pages/common/profileImage.tsx
+++ b/client/packages/lowcoder/src/pages/common/profileImage.tsx
@@ -4,29 +4,29 @@ import { getInitialsAndColorCode } from "util/stringUtils";
 import { fullAvatarUrl } from "util/urlUtils";
 
 export const ImgWrapper = styled.div<{
-  backgroundColor?: string;
-  side?: number;
-  fontSize?: number;
+  $backgroundColor?: string;
+  $side?: number;
+  $fontSize?: number;
 }>`
-  width: ${(props) => props.side || 34}px;
-  height: ${(props) => props.side || 34}px;
+  width: ${(props) => props.$side || 34}px;
+  height: ${(props) => props.$side || 34}px;
   display: flex;
   align-items: center;
   border-radius: 50%;
   border: 1px solid rgba(0, 0, 0, 0.1);
   justify-content: center;
   cursor: default;
-  background-color: ${(props) => props.backgroundColor};
+  background-color: ${(props) => props.$backgroundColor};
 
   & span {
     color: #ffffff;
     letter-spacing: normal;
     white-space: nowrap;
-    font-size: ${(props) => props.fontSize ?? 13}px;
+    font-size: ${(props) => props.$fontSize ?? 13}px;
     display: inline-block;
     ${(props) =>
-      props.fontSize && props.fontSize < 12
-        ? "-webkit-transform:scale(" + props.fontSize / 12 + ");"
+      props.$fontSize && props.$fontSize < 12
+        ? "-webkit-transform:scale(" + props.$fontSize / 12 + ");"
         : ""};
   }
 
@@ -56,11 +56,11 @@ export default function ProfileImage(props: {
 
   return (
     <ImgWrapper
-      fontSize={props.fontSize}
+      $fontSize={props.fontSize}
       style={props.style}
-      backgroundColor={backgroundColor}
+      $backgroundColor={backgroundColor}
       className={props.className}
-      side={props.side}
+      $side={props.side}
       title={props.userName}
     >
       {!shouldRenderImage ? (
diff --git a/client/packages/lowcoder/src/pages/common/shortcutListPopup.tsx b/client/packages/lowcoder/src/pages/common/shortcutListPopup.tsx
index ffca778506..a0b41ff929 100644
--- a/client/packages/lowcoder/src/pages/common/shortcutListPopup.tsx
+++ b/client/packages/lowcoder/src/pages/common/shortcutListPopup.tsx
@@ -23,21 +23,21 @@ const Content = styled.div`
   overflow: hidden scroll;
   scrollbar-gutter: stable;
   padding-right: 2px;
-  ::-webkit-scrollbar {
+  &::-webkit-scrollbar {
     width: 14px;
   }
-  ::-webkit-scrollbar-thumb {
+  &::-webkit-scrollbar-thumb {
     border: 4px solid transparent;
     background-clip: content-box;
     border-radius: 9999px;
     background-color: rgba(139, 143, 163, 0);
   }
-  :hover {
+  &:hover {
     ::-webkit-scrollbar-thumb {
       background-color: rgba(139, 143, 163, 0.24);
     }
   }
-  ::-webkit-scrollbar-thumb:hover {
+  &::-webkit-scrollbar-thumb:hover {
     background-color: rgba(139, 143, 163, 0.36);
   }
 `;
@@ -60,7 +60,7 @@ const CloseIconWrapper = styled.div`
   cursor: pointer;
   color: #7a7c80;
 
-  :hover svg g line {
+  &:hover svg g line {
     stroke: #ffffff;
   }
 `;
@@ -98,9 +98,9 @@ const ShortcutKey = styled.span`
   align-items: center;
 `;
 
-const ShortcutKeyItem = styled.div<{ autoWidth?: boolean }>`
-  ${(props) => (props.autoWidth ? "min-width" : "width")}: 20px;
-  ${(props) => (props.autoWidth ? "padding: 0 3px;" : "")}
+const ShortcutKeyItem = styled.div<{ $autoWidth?: boolean }>`
+  ${(props) => (props.$autoWidth ? "min-width" : "width")}: 20px;
+  ${(props) => (props.$autoWidth ? "padding: 0 3px;" : "")}
   height: 20px;
   background: #f9f9fa;
   border: 1px solid #d7d9e0;
@@ -167,7 +167,7 @@ export function ShortcutListPopup(props: { setShowShortcutList: (v: boolean) =>
                           {k.alt && <ShortcutKeyItem>⌥</ShortcutKeyItem>}
                           {k.shift && <ShortcutKeyItem>⇧</ShortcutKeyItem>}
                           {k.key && (
-                            <ShortcutKeyItem autoWidth={getKeyItemString(k.key).length > 1}>
+                            <ShortcutKeyItem $autoWidth={getKeyItemString(k.key).length > 1}>
                               {getKeyItemString(k.key)}
                             </ShortcutKeyItem>
                           )}
diff --git a/client/packages/lowcoder/src/pages/common/styledComponent.tsx b/client/packages/lowcoder/src/pages/common/styledComponent.tsx
index 10c3346276..a119953c1e 100644
--- a/client/packages/lowcoder/src/pages/common/styledComponent.tsx
+++ b/client/packages/lowcoder/src/pages/common/styledComponent.tsx
@@ -49,13 +49,13 @@ export const EditorContainerWithViewMode = styled.div`
   height: 100%;
 
   div {
-    ::-webkit-scrollbar {
+    &::-webkit-scrollbar {
       width: 16px;
     }
   }
 
   div {
-    ::-webkit-scrollbar-thumb {
+    &::-webkit-scrollbar-thumb {
       border: 5px solid transparent;
       background-clip: content-box;
       border-radius: 9999px;
@@ -65,7 +65,7 @@ export const EditorContainerWithViewMode = styled.div`
   }
 
   div {
-    ::-webkit-scrollbar-thumb:hover {
+    &::-webkit-scrollbar-thumb:hover {
       background-color: rgba(139, 143, 163, 0.5);
     }
   }
@@ -83,11 +83,11 @@ export const EditorContainer = styled.div`
   padding-right: 0;
   scrollbar-gutter: stable;
 
-  ::-webkit-scrollbar {
+  &::-webkit-scrollbar {
     width: 16px;
   }
 
-  ::-webkit-scrollbar-thumb {
+  &::-webkit-scrollbar-thumb {
     border: 5px solid transparent;
     background-clip: content-box;
     border-radius: 9999px;
@@ -95,7 +95,7 @@ export const EditorContainer = styled.div`
     min-height: 30px;
   }
 
-  ::-webkit-scrollbar-thumb:hover {
+  &::-webkit-scrollbar-thumb:hover {
     background-color: rgba(139, 143, 163, 0.5);
   }
 `;
@@ -103,7 +103,7 @@ export const EditorContainer = styled.div`
 export const StyledLink = styled.a`
   color: #4965f2;
 
-  :hover {
+  &:hover {
     color: #315efb;
   }
 `;
diff --git a/client/packages/lowcoder/src/pages/common/videoDialog.tsx b/client/packages/lowcoder/src/pages/common/videoDialog.tsx
index 8a57d96290..10ca346bbe 100644
--- a/client/packages/lowcoder/src/pages/common/videoDialog.tsx
+++ b/client/packages/lowcoder/src/pages/common/videoDialog.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from "react";
-import { Modal } from "antd";
+import { default as Modal } from "antd/es/modal";
 import { CloseIcon } from "lowcoder-design";
 import styled from "styled-components";
 import { Layers } from "constants/Layers";
diff --git a/client/packages/lowcoder/src/pages/datasource/datasourceEditPage.tsx b/client/packages/lowcoder/src/pages/datasource/datasourceEditPage.tsx
index 29f00bc891..74773f0c34 100644
--- a/client/packages/lowcoder/src/pages/datasource/datasourceEditPage.tsx
+++ b/client/packages/lowcoder/src/pages/datasource/datasourceEditPage.tsx
@@ -1,6 +1,6 @@
 import styled from "styled-components";
 import history from "../../util/history";
-import { Button } from "antd";
+import { default as Button } from "antd/es/button";
 import { useCallback, useMemo, useState } from "react";
 import { CopyTextButton, DocIcon, PackUpIcon, TacoButton } from "lowcoder-design";
 import { useDatasourceForm } from "./form/useDatasourceForm";
@@ -45,7 +45,7 @@ const BackBtn = styled.div`
   cursor: pointer;
   height: 24px;
 
-  :hover {
+  &:hover {
     color: #4965f2;
   }
 
@@ -56,7 +56,7 @@ const BackBtn = styled.div`
     margin-right: 4px;
   }
 
-  :hover svg g path {
+  &:hover svg g path {
     fill: #4965f2;
   }
 `;
@@ -128,13 +128,13 @@ const TutorialButton = styled(Button)`
   justify-content: center;
   padding: 0 10px;
 
-  :hover {
+  &:hover {
     background-color: #f5f5f6;
     border: 1px solid #d7d9e0;
     color: #333333;
   }
 
-  :focus {
+  &:focus {
     background-color: #f5f5f6;
     border: 1px solid #d7d9e0;
     color: #333333;
diff --git a/client/packages/lowcoder/src/pages/datasource/datasourceList.tsx b/client/packages/lowcoder/src/pages/datasource/datasourceList.tsx
index c7d38a9ec2..2a3841548d 100644
--- a/client/packages/lowcoder/src/pages/datasource/datasourceList.tsx
+++ b/client/packages/lowcoder/src/pages/datasource/datasourceList.tsx
@@ -77,7 +77,7 @@ const PopoverIcon = styled(PointIcon)`
     fill: #8b8fa3;
   }
 
-  :hover {
+  &:hover {
     background: #eef0f3;
     border-radius: 4px;
     cursor: pointer;
diff --git a/client/packages/lowcoder/src/pages/datasource/datasourceModal.tsx b/client/packages/lowcoder/src/pages/datasource/datasourceModal.tsx
index 17109a3055..3c16ebe06c 100644
--- a/client/packages/lowcoder/src/pages/datasource/datasourceModal.tsx
+++ b/client/packages/lowcoder/src/pages/datasource/datasourceModal.tsx
@@ -2,7 +2,7 @@ import React, { ReactNode, useEffect, useMemo, useState } from "react";
 import { DataSourceTypeInfo } from "../../api/datasourceApi";
 import { AddIcon, DocIcon, ModalFooterWrapper, TacoButton } from "lowcoder-design";
 import styled from "styled-components";
-import { Button } from "antd";
+import { default as Button } from "antd/es/button";
 import { useDatasourceForm } from "./form/useDatasourceForm";
 import { PluginPanel } from "./pluginPanel";
 import { DatasourceFormManifest } from "./form/datasourceFormRegistry";
@@ -30,12 +30,12 @@ const EditButton = styled(Button)`
   margin-right: 12px;
   padding: 4px;
 
-  :hover {
+  &:hover {
     color: #315efb;
     background-color: #edeff2;
   }
 
-  :focus {
+  &:focus {
     color: #315efb;
     background-color: #edeff2;
   }
@@ -64,13 +64,13 @@ const CreateButton = styled(Button)`
     fill: #315efb;
   }
 
-  :hover {
+  &:hover {
     color: #333333;
     background-color: #f2f7fc;
     border-color: #c2d6ff;
   }
 
-  :focus {
+  &:focus {
     color: #333333;
     background-color: #f2f7fc;
     border-color: #c2d6ff;
@@ -91,13 +91,13 @@ const TutorialButton = styled(Button)`
   padding: 0 7px;
   flex-shrink: 0;
 
-  :hover {
+  &:hover {
     background-color: #f5f5f6;
     border: 1px solid #d7d9e0;
     color: #333333;
   }
 
-  :focus {
+  &:focus {
     background-color: #f5f5f6;
     border: 1px solid #d7d9e0;
     color: #333333;
diff --git a/client/packages/lowcoder/src/pages/datasource/form/esDatasourceForm.tsx b/client/packages/lowcoder/src/pages/datasource/form/esDatasourceForm.tsx
index 7cd423c024..4070f4af83 100644
--- a/client/packages/lowcoder/src/pages/datasource/form/esDatasourceForm.tsx
+++ b/client/packages/lowcoder/src/pages/datasource/form/esDatasourceForm.tsx
@@ -16,14 +16,14 @@ export const EsDatasourceForm = (props: DatasourceFormProps) => {
 
   return (
     <DatasourceForm form={form} preserve={false}>
-      <FormSection size={props.size}>
+      <FormSection $size={props.size}>
         <DatasourceNameFormInputItem
           placeholder={"My Elasticsearch1"}
           initialValue={datasource?.name}
         />
       </FormSection>
 
-      <FormSection size={props.size}>
+      <FormSection $size={props.size}>
         <GeneralSettingFormSectionLabel />
         <FormInputItem
           name={"connectionString"}
diff --git a/client/packages/lowcoder/src/pages/datasource/form/googleSheetsDatasourceForm.tsx b/client/packages/lowcoder/src/pages/datasource/form/googleSheetsDatasourceForm.tsx
index 4e2b9b60eb..e42ba811d0 100644
--- a/client/packages/lowcoder/src/pages/datasource/form/googleSheetsDatasourceForm.tsx
+++ b/client/packages/lowcoder/src/pages/datasource/form/googleSheetsDatasourceForm.tsx
@@ -14,14 +14,14 @@ export const GoogleSheetsDatasourceForm = (props: DatasourceFormProps) => {
 
   return (
     <DatasourceForm form={form} preserve={false}>
-      <FormSection size={props.size}>
+      <FormSection $size={props.size}>
         <DatasourceNameFormInputItem
           placeholder={"My GoogleSheets1"}
           initialValue={datasource?.name}
         />
       </FormSection>
 
-      <FormSection size={props.size}>
+      <FormSection $size={props.size}>
         <GeneralSettingFormSectionLabel />
         <FormTextAreaItem
           name={"serviceAccount"}
diff --git a/client/packages/lowcoder/src/pages/datasource/form/graphqlDatasourceForm.tsx b/client/packages/lowcoder/src/pages/datasource/form/graphqlDatasourceForm.tsx
index bec2b48159..ef247e0a91 100644
--- a/client/packages/lowcoder/src/pages/datasource/form/graphqlDatasourceForm.tsx
+++ b/client/packages/lowcoder/src/pages/datasource/form/graphqlDatasourceForm.tsx
@@ -95,7 +95,7 @@ export const GraphqlDatasourceForm = (props: DatasourceFormProps) => {
 
   return (
     <DatasourceForm form={form} preserve={false}>
-      <FormSection size={props.size}>
+      <FormSection $size={props.size}>
         <DatasourceNameFormInputItem
           placeholder={"My Graphql1"}
           initialValue={datasource?.name}
@@ -103,7 +103,7 @@ export const GraphqlDatasourceForm = (props: DatasourceFormProps) => {
         />
       </FormSection>
 
-      <FormSection size={props.size}>
+      <FormSection $size={props.size}>
         <GeneralSettingFormSectionLabel />
         <FormInputItem
           name={"url"}
@@ -128,7 +128,7 @@ export const GraphqlDatasourceForm = (props: DatasourceFormProps) => {
         />
       </FormSection>
 
-      <FormSection size={props.size}>
+      <FormSection $size={props.size}>
         <FormSectionLabel>{trans("query.authentication")}</FormSectionLabel>
         <FormSelectItem
           name={"authConfigType"}
@@ -141,7 +141,7 @@ export const GraphqlDatasourceForm = (props: DatasourceFormProps) => {
         {showAuthItem(authType as AuthType)}
       </FormSection>
 
-      <FormSection size={props.size}>
+      <FormSection $size={props.size}>
         <AdvancedSettingFormSectionLabel />
         <CertValidationFormItem datasource={props.datasource} />
         <ForwardCookiesFormItem datasource={props.datasource} />
diff --git a/client/packages/lowcoder/src/pages/datasource/form/httpDatasourceForm.tsx b/client/packages/lowcoder/src/pages/datasource/form/httpDatasourceForm.tsx
index b0d60320f5..20a7cb74a9 100644
--- a/client/packages/lowcoder/src/pages/datasource/form/httpDatasourceForm.tsx
+++ b/client/packages/lowcoder/src/pages/datasource/form/httpDatasourceForm.tsx
@@ -100,7 +100,7 @@ export const HttpDatasourceForm = (props: DatasourceFormProps) => {
 
   return (
     <DatasourceForm form={form} preserve={false}>
-      <FormSection size={props.size}>
+      <FormSection $size={props.size}>
         <DatasourceNameFormInputItem
           placeholder={"My RestAPI1"}
           initialValue={datasource?.name}
@@ -108,7 +108,7 @@ export const HttpDatasourceForm = (props: DatasourceFormProps) => {
         />
       </FormSection>
 
-      <FormSection size={props.size}>
+      <FormSection $size={props.size}>
         <GeneralSettingFormSectionLabel />
         <FormInputItem
           name={"url"}
@@ -139,7 +139,7 @@ export const HttpDatasourceForm = (props: DatasourceFormProps) => {
         />
       </FormSection>
 
-      <FormSection size={props.size}>
+      <FormSection $size={props.size}>
         <FormSectionLabel>{trans("query.authentication")}</FormSectionLabel>
         <FormSelectItem
           name={"authConfigType"}
@@ -152,7 +152,7 @@ export const HttpDatasourceForm = (props: DatasourceFormProps) => {
         {showAuthItem(authType)}
       </FormSection>
 
-      <FormSection size={props.size}>
+      <FormSection $size={props.size}>
         <AdvancedSettingFormSectionLabel />
         <CertValidationFormItem datasource={props.datasource} />
         <ForwardCookiesFormItem datasource={props.datasource} />
diff --git a/client/packages/lowcoder/src/pages/datasource/form/mongoDatasourceForm.tsx b/client/packages/lowcoder/src/pages/datasource/form/mongoDatasourceForm.tsx
index 1a9ed08ac3..872185ebb9 100644
--- a/client/packages/lowcoder/src/pages/datasource/form/mongoDatasourceForm.tsx
+++ b/client/packages/lowcoder/src/pages/datasource/form/mongoDatasourceForm.tsx
@@ -25,7 +25,7 @@ export const MongoDatasourceForm = (props: DatasourceFormProps) => {
 
   return (
     <DatasourceForm form={form} preserve={false}>
-      <FormSection size={props.size}>
+      <FormSection $size={props.size}>
         <DatasourceNameFormInputItem placeholder={"My MongoDB1"} initialValue={datasource?.name} />
         <FormSelectItem
           name={"usingUri"}
diff --git a/client/packages/lowcoder/src/pages/datasource/form/oracleDatasourceForm.tsx b/client/packages/lowcoder/src/pages/datasource/form/oracleDatasourceForm.tsx
index 4299c8d5a1..1a9c5f3ba8 100644
--- a/client/packages/lowcoder/src/pages/datasource/form/oracleDatasourceForm.tsx
+++ b/client/packages/lowcoder/src/pages/datasource/form/oracleDatasourceForm.tsx
@@ -18,7 +18,7 @@ export const OracleDatasourceForm = (props: DatasourceFormProps) => {
 
   return (
     <DatasourceForm form={form} preserve={false} style={{ gap: "12px" }}>
-      <FormSection size={props.size}>
+      <FormSection $size={props.size}>
         <FormInputItem
           className={"ets"}
           name={"name"}
@@ -30,7 +30,7 @@ export const OracleDatasourceForm = (props: DatasourceFormProps) => {
         />
       </FormSection>
 
-      <FormSection size={props.size}>
+      <FormSection $size={props.size}>
         <GeneralSettingFormSectionLabel />
         <HostFormInputItem initialValue={datasourceConfig?.host} />
         <PortFormInputItem initialValue={"1521"} port={datasourceConfig?.port} />
diff --git a/client/packages/lowcoder/src/pages/datasource/form/pluginDataSourceForm.tsx b/client/packages/lowcoder/src/pages/datasource/form/pluginDataSourceForm.tsx
index 4eab38fb81..3ed9c974aa 100644
--- a/client/packages/lowcoder/src/pages/datasource/form/pluginDataSourceForm.tsx
+++ b/client/packages/lowcoder/src/pages/datasource/form/pluginDataSourceForm.tsx
@@ -35,7 +35,9 @@ import { trans } from "i18n";
 import { Datasource } from "constants/datasourceConstants";
 import { DatasourceApi } from "api/datasourceApi";
 import { FieldData } from "rc-field-form/es/interface";
-import { Alert, Form, Input } from "antd";
+import { default as Alert } from "antd/es/alert";
+import { default as Form } from "antd/es/form";
+import { default as Input } from "antd/es/input";
 
 const TooltipWrapper = styled.div`
   .markdown-body {
@@ -211,14 +213,14 @@ export const PluginDataSourceForm = (props: DatasourceFormProps) => {
       <Form.Item noStyle name="dynamicParamsDef">
         <Input hidden />
       </Form.Item>
-      <FormSection size={props.size}>
+      <FormSection $size={props.size}>
         <DatasourceNameFormInputItem
           placeholder="My DataSource 1"
           initialValue={datasource?.name}
         />
       </FormSection>
 
-      <FormSection size={props.size}>
+      <FormSection $size={props.size}>
         {hasGeneralSettings && <GeneralSettingFormSectionLabel />}
         {(dataSourceConfig.params || []).map((field) => {
           return (
diff --git a/client/packages/lowcoder/src/pages/datasource/form/redisDatasourceForm.tsx b/client/packages/lowcoder/src/pages/datasource/form/redisDatasourceForm.tsx
index 11492b7dab..24ab8dcaf9 100644
--- a/client/packages/lowcoder/src/pages/datasource/form/redisDatasourceForm.tsx
+++ b/client/packages/lowcoder/src/pages/datasource/form/redisDatasourceForm.tsx
@@ -23,7 +23,7 @@ export const RedisDatasourceForm = (props: DatasourceFormProps) => {
 
   return (
     <DatasourceForm form={form} preserve={false}>
-      <FormSection size={props.size}>
+      <FormSection $size={props.size}>
         <DatasourceNameFormInputItem placeholder={"My Redis1"} initialValue={datasource?.name} />
         <FormSelectItem
           name={"usingUri"}
diff --git a/client/packages/lowcoder/src/pages/datasource/form/smtpDatasourceForm.tsx b/client/packages/lowcoder/src/pages/datasource/form/smtpDatasourceForm.tsx
index adf9f70af1..724677df0c 100644
--- a/client/packages/lowcoder/src/pages/datasource/form/smtpDatasourceForm.tsx
+++ b/client/packages/lowcoder/src/pages/datasource/form/smtpDatasourceForm.tsx
@@ -17,11 +17,11 @@ export const SMTPDatasourceForm = (props: DatasourceFormProps) => {
 
   return (
     <DatasourceForm form={form} preserve={false}>
-      <FormSection size={props.size}>
+      <FormSection $size={props.size}>
         <DatasourceNameFormInputItem placeholder={"My SMTP1"} initialValue={datasource?.name} />
       </FormSection>
 
-      <FormSection size={props.size}>
+      <FormSection $size={props.size}>
         <GeneralSettingFormSectionLabel />
         <HostFormInputItem initialValue={datasourceConfig?.host} />
         <PortFormInputItem initialValue={"25"} port={datasourceConfig?.port} />
diff --git a/client/packages/lowcoder/src/pages/datasource/form/snowflakeDatasourceForm.tsx b/client/packages/lowcoder/src/pages/datasource/form/snowflakeDatasourceForm.tsx
index 2b6572921b..7e6c9d5dc2 100644
--- a/client/packages/lowcoder/src/pages/datasource/form/snowflakeDatasourceForm.tsx
+++ b/client/packages/lowcoder/src/pages/datasource/form/snowflakeDatasourceForm.tsx
@@ -10,7 +10,7 @@ import {
   PasswordFormInputItem,
   UserNameFormInputItem,
 } from "../form";
-import { FormInstance } from "antd";
+import { FormInstance } from "antd/es/form";
 import { fromPairs, omit, pick, toPairs } from "lodash";
 import { trans } from "i18n";
 
@@ -22,14 +22,14 @@ export const SnowflakeDatasourceForm = (props: DatasourceFormProps) => {
 
   return (
     <DatasourceForm form={form} preserve={false}>
-      <FormSection size={props.size}>
+      <FormSection $size={props.size}>
         <DatasourceNameFormInputItem
           placeholder={"My Snowflake1"}
           initialValue={datasource?.name}
         />
       </FormSection>
 
-      <FormSection size={props.size}>
+      <FormSection $size={props.size}>
         <GeneralSettingFormSectionLabel />
         <HostFormInputItem
           initialValue={datasourceConfig?.host}
diff --git a/client/packages/lowcoder/src/pages/datasource/form/sqlDatasourceForm.tsx b/client/packages/lowcoder/src/pages/datasource/form/sqlDatasourceForm.tsx
index eba66ce03f..5fde4b01dc 100644
--- a/client/packages/lowcoder/src/pages/datasource/form/sqlDatasourceForm.tsx
+++ b/client/packages/lowcoder/src/pages/datasource/form/sqlDatasourceForm.tsx
@@ -29,14 +29,14 @@ export const sqlDatasourceForm =
 
     return (
       <DatasourceForm form={form} preserve={false}>
-        <FormSection size={props.size}>
+        <FormSection $size={props.size}>
           <DatasourceNameFormInputItem
             placeholder={config.placeholder}
             initialValue={datasource?.name}
           />
         </FormSection>
 
-        <FormSection size={props.size}>
+        <FormSection $size={props.size}>
           <GeneralSettingFormSectionLabel />
           <HostFormInputItem initialValue={datasourceConfig?.host} />
           <PortFormInputItem initialValue={config.port} port={datasourceConfig?.port} />
diff --git a/client/packages/lowcoder/src/pages/datasource/form/useDatasourceForm.ts b/client/packages/lowcoder/src/pages/datasource/form/useDatasourceForm.ts
index 57a5269dda..f10603bda3 100644
--- a/client/packages/lowcoder/src/pages/datasource/form/useDatasourceForm.ts
+++ b/client/packages/lowcoder/src/pages/datasource/form/useDatasourceForm.ts
@@ -1,4 +1,4 @@
-import { Form } from "antd";
+import { default as Form } from "antd/es/form";
 import { DatasourceApi } from "../../../api/datasourceApi";
 import _ from "lodash";
 import { useState } from "react";
diff --git a/client/packages/lowcoder/src/pages/datasource/pluginPanel.tsx b/client/packages/lowcoder/src/pages/datasource/pluginPanel.tsx
index 5966cb7ce5..11f11fd8e4 100644
--- a/client/packages/lowcoder/src/pages/datasource/pluginPanel.tsx
+++ b/client/packages/lowcoder/src/pages/datasource/pluginPanel.tsx
@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { Button as AntdButton } from "antd";
+import { default as AntdButton } from "antd/es/button";
 import { useSelector } from "react-redux";
 import { getDataSourceTypes } from "../../redux/selectors/datasourceSelectors";
 import { getBottomResIcon } from "@lowcoder-ee/util/bottomResUtils";
diff --git a/client/packages/lowcoder/src/pages/editor/LeftContent.tsx b/client/packages/lowcoder/src/pages/editor/LeftContent.tsx
index 7772a52738..5924d90bfe 100644
--- a/client/packages/lowcoder/src/pages/editor/LeftContent.tsx
+++ b/client/packages/lowcoder/src/pages/editor/LeftContent.tsx
@@ -392,7 +392,7 @@ export const LeftContent = (props: LeftContentProps) => {
             ))}
         </span>
         {info?.show && data && (
-          <CollapseWrapper title="" clientX={info?.clientX} onClick={(e) => e.stopPropagation()}>
+          <CollapseWrapper title="" $clientX={info?.clientX} onClick={(e) => e.stopPropagation()}>
             <ScrollBar style={{ maxHeight: "400px" }}>
               <CollapseView
                 key={data.name}
diff --git a/client/packages/lowcoder/src/pages/editor/appEditorInternal.tsx b/client/packages/lowcoder/src/pages/editor/appEditorInternal.tsx
index b2fb88391a..0ebc77c8e5 100644
--- a/client/packages/lowcoder/src/pages/editor/appEditorInternal.tsx
+++ b/client/packages/lowcoder/src/pages/editor/appEditorInternal.tsx
@@ -17,7 +17,8 @@ import { RootComp } from "comps/comps/rootComp";
 import { useAppHistory } from "util/editoryHistory";
 import { useCompInstance } from "comps/utils/useCompInstance";
 import { MarkAppInitialized, perfMark } from "util/perfUtils";
-import { ConfigProvider, message } from "antd";
+import { default as ConfigProvider } from "antd/es/config-provider";
+import { default as message } from "antd/es/message";
 import { getAntdLocale } from "i18n/antdLocale";
 import { useUserViewMode } from "../../util/hooks";
 import { QueryApi } from "api/queryApi";
diff --git a/client/packages/lowcoder/src/pages/editor/appSnapshot.tsx b/client/packages/lowcoder/src/pages/editor/appSnapshot.tsx
index 985f6a9cd7..9e349ac781 100644
--- a/client/packages/lowcoder/src/pages/editor/appSnapshot.tsx
+++ b/client/packages/lowcoder/src/pages/editor/appSnapshot.tsx
@@ -17,7 +17,7 @@ import {
   isAppSnapshotDslFetching,
   isAppSnapshotsFetching,
 } from "redux/selectors/appSnapshotSelector";
-import { Skeleton } from "antd";
+import { default as Skeleton } from "antd/es/skeleton";
 import { TacoPagination } from "lowcoder-design";
 import { AppSnapshotContext, AppSnapshotList } from "constants/applicationConstants";
 import { ExtraActionType } from "lowcoder-core";
@@ -86,7 +86,7 @@ const StyledCloseIcon = styled(CloseIcon)`
   margin-left: auto;
   cursor: pointer;
 
-  :hover {
+  &:hover {
     g line {
       stroke: #4965f2;
     }
diff --git a/client/packages/lowcoder/src/pages/editor/bottom/BottomMetaDrawer.tsx b/client/packages/lowcoder/src/pages/editor/bottom/BottomMetaDrawer.tsx
index 126c9a4867..6dd207ef6c 100644
--- a/client/packages/lowcoder/src/pages/editor/bottom/BottomMetaDrawer.tsx
+++ b/client/packages/lowcoder/src/pages/editor/bottom/BottomMetaDrawer.tsx
@@ -1,7 +1,7 @@
-import { DataNode } from "antd/lib/tree";
+import { DataNode } from "antd/es/tree";
 import { CopyTextButton, CustomTree, labelCss, PackUpIcon, Search } from "lowcoder-design";
 import _ from "lodash";
-import { Drawer as AntdDrawer } from "antd";
+import { default as AntdDrawer } from "antd/es/drawer";
 import { CSSProperties, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { fetchDatasourceStructure } from "redux/reduxActions/datasourceActions";
@@ -64,8 +64,8 @@ const AllData = styled.span`
   margin: 0 0 7px 8px;
 `;
 
-const DrawerIcon = styled(PackUpIcon)<{ deg: string }>`
-  transform: ${(props) => props.deg};
+const DrawerIcon = styled(PackUpIcon)<{ $deg: string }>`
+  transform: ${(props) => props.$deg};
 `;
 
 const DrawerTitle = styled.div`
@@ -76,7 +76,7 @@ const DrawerTitle = styled.div`
   font-size: 13px;
   font-weight: 500;
 
-  :hover {
+  &:hover {
     cursor: pointer;
 
     svg g path {
@@ -263,7 +263,7 @@ export default function BottomMetaDrawer(props: BottomMetaDrawerProps) {
     <div style={props.style}>
       <DrawerTitle onClick={() => setVisible(!visible)}>
         {trans("bottomPanel.metaData")}
-        <DrawerIcon deg={visible ? "rotate(180deg)" : "rotate(0deg)"} />
+        <DrawerIcon $deg={visible ? "rotate(180deg)" : "rotate(0deg)"} />
       </DrawerTitle>
     </div>
   );
diff --git a/client/packages/lowcoder/src/pages/editor/bottom/BottomSidebar.tsx b/client/packages/lowcoder/src/pages/editor/bottom/BottomSidebar.tsx
index d45faf5acf..ab56ba31e9 100644
--- a/client/packages/lowcoder/src/pages/editor/bottom/BottomSidebar.tsx
+++ b/client/packages/lowcoder/src/pages/editor/bottom/BottomSidebar.tsx
@@ -94,13 +94,13 @@ const AddBtn = styled(TacoButton)`
     align-items: center;
     box-shadow: none;
   
-    :hover {
+    &:hover {
       color: #315efb;
       background-color: #f5faff;
       border-color: #c2d6ff;
     }
   
-    :focus {
+    &:focus {
       color: #315efb;
       background-color: #f5faff;
       border-color: #c2d6ff;
@@ -110,8 +110,8 @@ const AddBtn = styled(TacoButton)`
       stroke: #315efb;
     }
   
-    :disabled,
-    :disabled:hover {
+    &:disabled,
+    &:disabled:hover {
       background: #f9fbff;
       border: 1px solid #dee9ff;
       border-radius: 4px;
@@ -319,19 +319,19 @@ export function BottomSidebar(props: BottomSidebarProps) {
   );
 }
 
-const HighlightBorder = styled.div<{ active: boolean; foldable: boolean; level: number }>`
+const HighlightBorder = styled.div<{ $active: boolean; $foldable: boolean; $level: number }>`
   flex: 1;
   display: flex;
-  padding-left: ${(props) => props.level * 20 + (props.foldable ? 0 : 14)}px;
+  padding-left: ${(props) => props.$level * 20 + (props.$foldable ? 0 : 14)}px;
   border-radius: 4px;
-  border: 1px solid ${(props) => (props.active ? BorderActiveColor : "transparent")};
+  border: 1px solid ${(props) => (props.$active ? BorderActiveColor : "transparent")};
   align-items: center;
   justify-content: center;
 `;
 
 interface ColumnDivProps {
   $color?: boolean;
-  isOverlay: boolean;
+  $isOverlay: boolean;
 }
 
 const ColumnDiv = styled.div<ColumnDivProps>`
@@ -343,13 +343,13 @@ const ColumnDiv = styled.div<ColumnDivProps>`
   padding-right: 15px;
   /* background-color: #ffffff; */
   /* margin: 2px 0; */
-  background-color: ${(props) => (props.isOverlay ? "rgba(255, 255, 255, 0.11)" : "")};
+  background-color: ${(props) => (props.$isOverlay ? "rgba(255, 255, 255, 0.11)" : "")};
 
   &&& {
-    background-color: ${(props) => (props.$color && !props.isOverlay ? "#f2f7fc" : null)};
+    background-color: ${(props) => (props.$color && !props.$isOverlay ? "#f2f7fc" : null)};
   }
 
-  :hover {
+  &:hover {
     background-color: #f2f7fc80;
     cursor: pointer;
   }
@@ -363,7 +363,7 @@ const ColumnDiv = styled.div<ColumnDivProps>`
     font-size: 13px;
     padding-left: 0;
 
-    :hover {
+    &:hover {
       background-color: transparent;
     }
   }
@@ -379,7 +379,7 @@ const ColumnDiv = styled.div<ColumnDivProps>`
     border: 1px solid #3377ff;
     border-radius: 2px;
 
-    :focus {
+    &:focus {
       border-color: #3377ff;
       box-shadow: 0 0 0 2px #d6e4ff;
     }
@@ -472,8 +472,8 @@ function BottomSidebarItem(props: BottomSidebarItemProps) {
   };
 
   return (
-    <ColumnDiv onClick={handleClickItem} $color={isSelected} isOverlay={isOverlay}>
-      <HighlightBorder active={isOver && isFolder} level={level} foldable={isFolder}>
+    <ColumnDiv onClick={handleClickItem} $color={isSelected} $isOverlay={isOverlay}>
+      <HighlightBorder $active={isOver && isFolder} $level={level} $foldable={isFolder}>
         {isFolder && <FoldIconBtn>{!isFolded ? <FoldedIcon /> : <UnfoldIcon />}</FoldIconBtn>}
         {icon}
         <div style={{ flexGrow: 1, marginRight: "8px", width: "calc(100% - 62px)" }}>
diff --git a/client/packages/lowcoder/src/pages/editor/bottom/BottomTabs.tsx b/client/packages/lowcoder/src/pages/editor/bottom/BottomTabs.tsx
index b99f782012..6003554f87 100644
--- a/client/packages/lowcoder/src/pages/editor/bottom/BottomTabs.tsx
+++ b/client/packages/lowcoder/src/pages/editor/bottom/BottomTabs.tsx
@@ -17,21 +17,21 @@ import { showAppSnapshotSelector } from "redux/selectors/appSnapshotSelector";
 import { BottomResTypeEnum } from "types/bottomRes";
 import { trans } from "i18n";
 
-const Span = styled.span<{ border: boolean }>`
+const Span = styled.span<{ $border: boolean }>`
   ${labelCss};
   font-weight: 500;
   line-height: 40px;
   position: relative;
   display: inline-block;
   z-index: 0;
-  color: ${(props) => (props.border ? "#222222" : "#8B8FA3")};
+  color: ${(props) => (props.$border ? "#222222" : "#8B8FA3")};
 
-  :hover {
+  &:hover {
     cursor: pointer;
     color: #222222;
   }
 
-  ::before {
+  &::before {
     content: "";
     position: absolute;
     z-index: -1;
@@ -39,19 +39,19 @@ const Span = styled.span<{ border: boolean }>`
     right: 0;
     bottom: 0;
     height: 0;
-    color: ${(props) => (props.border ? "#222222" : "transparent")};
-    border: 1px solid ${(props) => (props.border ? "#222222" : "transparent")};
-    background-color: ${(props) => (props.border ? "#222222" : "transparent")};
+    color: ${(props) => (props.$border ? "#222222" : "transparent")};
+    border: 1px solid ${(props) => (props.$border ? "#222222" : "transparent")};
+    background-color: ${(props) => (props.$border ? "#222222" : "transparent")};
     border-radius: 2px;
   }
 `;
-const TabDiv = styled.div<{ cursor?: string | number }>`
+const TabDiv = styled.div<{ $cursor?: string | number }>`
   height: 40px;
   background-color: #ffffff;
   text-align: center;
   display: inline-block;
   min-width: 26px;
-  cursor: ${(props) => (props.cursor ? "pointer" : "default")};
+  cursor: ${(props) => (props.$cursor ? "pointer" : "default")};
 `;
 const TabContainer = styled.div`
   height: 40px;
@@ -85,7 +85,7 @@ const TabContainer = styled.div`
     font-size: 16px;
     margin-left: 0;
 
-    :hover {
+    &:hover {
       background-color: #f5f5f6;
     }
   }
@@ -102,7 +102,7 @@ const TabContainer = styled.div`
     margin-left: 0;
     background-color: #ffffff;
 
-    :focus {
+    &:focus {
       border-color: #3377ff;
       box-shadow: 0 0 0 2px #d6e4ff;
     }
@@ -114,19 +114,19 @@ const RunButton = styled(TacoButton)`
   height: 24px;
   border: none;
 
-  :hover {
+  &:hover {
     padding: 0 11px;
     border: none;
     box-shadow: none;
   }
 
-  :focus {
+  &:focus {
     padding: 0 11px;
     border: none;
     box-shadow: none;
   }
 
-  :after {
+  &:after {
     content: "";
   }
 `;
@@ -139,29 +139,29 @@ const DisconnectButton = styled(TacoButton)`
   border-color: #079968;
   background-color: #079968;
 
-  :hover, :focus, :disabled, :disabled:hover {
+  &:hover, &:focus, &:disabled, &:disabled:hover {
     padding: 0 11px;
     border: none;
     box-shadow: none;
   }
   
-  :disabled,
-  :disabled:hover {
+  &:disabled,
+  &:disabled:hover {
     background-color: #bbdecd !important;
     border-color: #bbdecd;
   }
 
-  :hover {
+  &:hover {
     background-color: #07714e;
     border-color: #07714e;
   }
 
-  :focus {
+  &:focus {
     background-color: #07714e;
     border-color: #07714e;
   }
 
-  :after {
+  &:after {
     content: "";
   }
 `;
@@ -258,8 +258,8 @@ export function BottomTabs<T extends TabsConfigType>(props: {
         {tabsConfig &&
           tabsConfig.map((item, index) => (
             <React.Fragment key={index}>
-              <TabDiv onClick={() => setKey(item.key)} cursor={item.key}>
-                <Span key={item.key} border={key === item.key}>
+              <TabDiv onClick={() => setKey(item.key)} $cursor={item.key}>
+                <Span key={item.key} $border={key === item.key}>
                   {item.title}
                 </Span>
               </TabDiv>
diff --git a/client/packages/lowcoder/src/pages/editor/codeEditorPanel.tsx b/client/packages/lowcoder/src/pages/editor/codeEditorPanel.tsx
index fdb78ce645..d50f00d7cb 100644
--- a/client/packages/lowcoder/src/pages/editor/codeEditorPanel.tsx
+++ b/client/packages/lowcoder/src/pages/editor/codeEditorPanel.tsx
@@ -68,7 +68,7 @@ const OpenButton = styled.div`
     margin: auto;
   }
 
-  :hover {
+  &:hover {
     svg g g {
       stroke: #222222;
     }
@@ -90,7 +90,7 @@ const CloseButton = styled.div`
   //margin-bottom: auto;
   cursor: pointer;
 
-  :hover {
+  &:hover {
     background: #f5f5f6;
 
     svg g g {
diff --git a/client/packages/lowcoder/src/pages/editor/editorSkeletonView.tsx b/client/packages/lowcoder/src/pages/editor/editorSkeletonView.tsx
index e1a1766ad3..9c6e5f599e 100644
--- a/client/packages/lowcoder/src/pages/editor/editorSkeletonView.tsx
+++ b/client/packages/lowcoder/src/pages/editor/editorSkeletonView.tsx
@@ -12,7 +12,8 @@ import { BottomSkeleton } from "pages/editor/bottom/BottomContent";
 import RightPanel from "pages/editor/right/RightPanel";
 import _ from "lodash";
 import styled from "styled-components";
-import { Skeleton, Spin } from "antd";
+import { default as Skeleton } from "antd/es/skeleton";
+import { default as Spin } from "antd/es/spin";
 import { useTemplateViewMode, useUserViewMode } from "util/hooks";
 import { ProductLoading } from "components/ProductLoading";
 
diff --git a/client/packages/lowcoder/src/pages/editor/editorView.tsx b/client/packages/lowcoder/src/pages/editor/editorView.tsx
index a63c2ad2fa..8fafb86477 100644
--- a/client/packages/lowcoder/src/pages/editor/editorView.tsx
+++ b/client/packages/lowcoder/src/pages/editor/editorView.tsx
@@ -1,5 +1,6 @@
-import { Divider, Menu } from "antd";
-import Sider from "antd/lib/layout/Sider";
+import { default as Divider } from "antd/es/divider";
+import { default as Menu } from "antd/es/menu";
+import { default as Sider} from "antd/es/layout/Sider";
 import { PreloadComp } from "comps/comps/preLoadComp";
 import UIComp from "comps/comps/uiComp";
 import { EditorContext } from "comps/editorState";
@@ -54,11 +55,11 @@ const HookCompContainer = styled.div`
   z-index: ${Layers.hooksCompContainer};
 `;
 
-const ViewBody = styled.div<{ hideBodyHeader?: boolean; height?: number }>`
+const ViewBody = styled.div<{ $hideBodyHeader?: boolean; $height?: number }>`
   height: ${(props) => `calc(${
-    props.height ? props.height + "px" : "100vh"
+    props.$height ? props.$height + "px" : "100vh"
   } - env(safe-area-inset-bottom) -
-      ${props.hideBodyHeader ? "0px" : TopHeaderHeight}
+      ${props.$hideBodyHeader ? "0px" : TopHeaderHeight}
   )`};
 `;
 
@@ -290,7 +291,7 @@ function EditorView(props: EditorViewProps) {
         <Helmet>{application && <title>{application.name}</title>}</Helmet>
         {!hideBodyHeader && <PreviewHeader />}
         <EditorContainerWithViewMode>
-          <ViewBody hideBodyHeader={hideBodyHeader} height={height}>
+          <ViewBody $hideBodyHeader={hideBodyHeader} $height={height}>
             {uiComp.getView()}
           </ViewBody>
           <div style={{ zIndex: Layers.hooksCompContainer }}>{hookCompViews}</div>
@@ -303,7 +304,7 @@ function EditorView(props: EditorViewProps) {
   let uiCompView;
   if (showAppSnapshot) {
     uiCompView = (
-      <ViewBody hideBodyHeader={hideBodyHeader} height={height}>
+      <ViewBody $hideBodyHeader={hideBodyHeader} $height={height}>
         <EditorContainer>{uiComp.getView()}</EditorContainer>
       </ViewBody>
     );
diff --git a/client/packages/lowcoder/src/pages/editor/right/styledComponent.tsx b/client/packages/lowcoder/src/pages/editor/right/styledComponent.tsx
index ed9d7704e2..605df8a9a2 100644
--- a/client/packages/lowcoder/src/pages/editor/right/styledComponent.tsx
+++ b/client/packages/lowcoder/src/pages/editor/right/styledComponent.tsx
@@ -11,25 +11,25 @@ const NoShake = css`
   transform-style: preserve-3d;
 `;
 
-export const CompIconDiv = styled.div<{ h: number; w: number }>`
+export const CompIconDiv = styled.div<{ $h: number; $w: number }>`
   ${NoShake};
   padding: 3px;
   background: #ffffff;
   border: 1px solid #d7d9e0;
   border-radius: 4px;
-  height: ${(props) => props.h}px;
-  width: ${(props) => props.w}px;
+  height: ${(props) => props.$h}px;
+  width: ${(props) => props.$w}px;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: grab;
   transition: all 0.2s ease-in-out;
 
-  :active {
+  &:active {
     background: #f2f4f8;
   }
 
-  :hover {
+  &:hover {
     ${NoShake};
     padding: 0;
     transform: scale(1.05);
diff --git a/client/packages/lowcoder/src/pages/editor/right/uiCompPanel.tsx b/client/packages/lowcoder/src/pages/editor/right/uiCompPanel.tsx
index 6bb6dd8da0..7ad8076706 100644
--- a/client/packages/lowcoder/src/pages/editor/right/uiCompPanel.tsx
+++ b/client/packages/lowcoder/src/pages/editor/right/uiCompPanel.tsx
@@ -66,7 +66,7 @@ const HovDiv = styled.div`
 const IconContain = (props: { Icon: React.FunctionComponent<React.SVGProps<SVGSVGElement>> }) => {
   const { Icon } = props;
   return (
-    <CompIconDiv w={64} h={64}>
+    <CompIconDiv $w={64} $h={64}>
       <Icon />
     </CompIconDiv>
   );
diff --git a/client/packages/lowcoder/src/pages/editor/styledComponents.tsx b/client/packages/lowcoder/src/pages/editor/styledComponents.tsx
index 8ce1bb9f4a..c0d68b2f95 100644
--- a/client/packages/lowcoder/src/pages/editor/styledComponents.tsx
+++ b/client/packages/lowcoder/src/pages/editor/styledComponents.tsx
@@ -105,14 +105,14 @@ export const Node = styled.span`
   }
 `;
 
-export const CollapseWrapper = styled.div<{ clientX?: number }>`
+export const CollapseWrapper = styled.div<{ $clientX?: number }>`
   width: 256px;
   border: 1px solid #E1E3EB;
   border-radius: 4px;
   overflow: hidden;
   background: #fff;
   padding: 4px 0;
-  margin: 4px -16px 4px ${(props) => props.clientX && `calc(-${props.clientX}px + 16px)`};
+  margin: 4px -16px 4px ${(props) => props.$clientX && `calc(-${props.$clientX}px + 16px)`};
   .simplebar-content > div {
     > .ant-collapse > .ant-collapse-item {
       > .ant-collapse-header {
diff --git a/client/packages/lowcoder/src/pages/queryLibrary/LeftNav.tsx b/client/packages/lowcoder/src/pages/queryLibrary/LeftNav.tsx
index a17c2541f2..949a41fa03 100644
--- a/client/packages/lowcoder/src/pages/queryLibrary/LeftNav.tsx
+++ b/client/packages/lowcoder/src/pages/queryLibrary/LeftNav.tsx
@@ -22,14 +22,14 @@ import { DatasourceType } from "@lowcoder-ee/constants/queryConstants";
 import { saveAs } from "file-saver";
 import DataSourceIcon from "components/DataSourceIcon";
 
-const Wrapper = styled.div<{ readOnly?: boolean }>`
+const Wrapper = styled.div<{ $readOnly?: boolean }>`
   display: flex;
   flex-direction: column;
   width: 264px;
   height: 100%;
   border-right: 1px solid #e1e3eb;
   ${(props) => {
-    if (props.readOnly) {
+    if (props.$readOnly) {
       return css`
         color: #8b8fa3;
       `;
@@ -50,21 +50,21 @@ const AddIcon = styled(BluePlusIcon)`
   width: 12px;
   margin-right: 2px;
 `;
-const CreateBtn = styled(TacoButton)<{ readOnly?: boolean }>`
+const CreateBtn = styled(TacoButton)<{ $readOnly?: boolean }>`
   min-height: 24px;
   width: 70px;
   padding: 4px 12px;
   display: flex;
   align-items: center;
   box-shadow: none;
-  opacity: ${(props) => (props.readOnly ? 0.5 : 1)};
+  opacity: ${(props) => (props.$readOnly ? 0.5 : 1)};
 
   &:hover ${AddIcon} g {
     stroke: #315efb;
   }
 
-  :disabled,
-  :disabled:hover {
+  &:disabled,
+  &:disabled:hover {
     ${AddIcon} g {
       stroke: #4965f230;
     }
@@ -89,15 +89,15 @@ const Title = styled.div`
 const SelectListWrapper = styled.div`
   height: calc(100% - 19px);
 `;
-const SelectItem = styled.div<{ selected: boolean; readOnly?: boolean }>`
+const SelectItem = styled.div<{ $selected: boolean; $readOnly?: boolean }>`
   height: 80px;
   padding: 0 16px;
   background-color: ${(props) =>
-    props.selected ? (props.readOnly ? "#EFEFF1" : "#F2F7FC") : "unset"};
+    props.$selected ? (props.$readOnly ? "#EFEFF1" : "#F2F7FC") : "unset"};
   cursor: pointer;
 
-  :hover {
-    background-color: ${(props) => !props.selected && "#f2f7fc80"};
+  &:hover {
+    background-color: ${(props) => !props.$selected && "#f2f7fc80"};
   }
 `;
 
@@ -141,7 +141,7 @@ const PopoverIcon = styled(PointIcon)`
     fill: #8b8fa3;
   }
 
-  :hover {
+  &:hover {
     background: #eef0f3;
     border-radius: 4px;
     cursor: pointer;
@@ -165,7 +165,7 @@ export const LeftNav = (props: {
 
   return (
     <ReadOnlyMask readOnly={!!props.readOnly}>
-      <Wrapper readOnly={props.readOnly}>
+      <Wrapper $readOnly={props.readOnly}>
         <Header>
           <Search
             disabled={props.readOnly}
@@ -174,7 +174,7 @@ export const LeftNav = (props: {
             onChange={(e) => setSearchValue(e.target.value)}
             style={{ width: "154px", height: "32px", margin: "0" }}
           />
-          <CreateBtn buttonType={"blue"} onClick={props.addQuery} readOnly={props.readOnly}>
+          <CreateBtn buttonType={"blue"} onClick={props.addQuery} $readOnly={props.readOnly}>
             <AddIcon />
             {trans("newItem")}
           </CreateBtn>
@@ -200,8 +200,8 @@ export const LeftNav = (props: {
                   .map((q) => (
                     <SelectItem
                       key={q.id}
-                      selected={q.id === props.selectedQuery}
-                      readOnly={props.readOnly}
+                      $selected={q.id === props.selectedQuery}
+                      $readOnly={props.readOnly}
                       onClick={() => props.onSelect(q.id)}
                     >
                       <Content>
diff --git a/client/packages/lowcoder/src/pages/queryLibrary/QueryLibraryEditor.tsx b/client/packages/lowcoder/src/pages/queryLibrary/QueryLibraryEditor.tsx
index 39ed969bbe..fdef2f1235 100644
--- a/client/packages/lowcoder/src/pages/queryLibrary/QueryLibraryEditor.tsx
+++ b/client/packages/lowcoder/src/pages/queryLibrary/QueryLibraryEditor.tsx
@@ -25,7 +25,7 @@ import { Comp } from "lowcoder-core";
 import { LibraryQuery } from "../../api/queryLibraryApi";
 import { NameGenerator } from "../../comps/utils";
 import { QueryLibraryHistoryView } from "./QueryLibraryHistoryView";
-import { Form } from "antd";
+import { default as Form } from "antd/es/form";
 import {
   CustomModal,
   DatasourceForm,
@@ -34,7 +34,7 @@ import {
   FormSection,
   TacoButton,
 } from "lowcoder-design";
-import { CheckboxOptionType } from "antd/lib/checkbox/Group";
+import { CheckboxOptionType } from "antd/es/checkbox/Group";
 import { trans } from "i18n";
 import { getDataSource } from "../../redux/selectors/datasourceSelectors";
 import {
diff --git a/client/packages/lowcoder/src/pages/queryLibrary/QueryLibraryHistoryView.tsx b/client/packages/lowcoder/src/pages/queryLibrary/QueryLibraryHistoryView.tsx
index 34f711a083..b3ea7db351 100644
--- a/client/packages/lowcoder/src/pages/queryLibrary/QueryLibraryHistoryView.tsx
+++ b/client/packages/lowcoder/src/pages/queryLibrary/QueryLibraryHistoryView.tsx
@@ -23,19 +23,19 @@ const RevertButton = styled(TacoButton)`
   height: 32px;
   border: none;
 
-  :hover {
+  &:hover {
     padding: 0 11px;
     border: none;
     box-shadow: none;
   }
 
-  :focus {
+  &:focus {
     padding: 0 11px;
     border: none;
     box-shadow: none;
   }
 
-  :after {
+  &:after {
     content: "";
   }
 `;
@@ -45,17 +45,17 @@ const ExitButton = styled(TacoButton)`
   width: 80px;
   height: 32px;
 
-  :hover {
+  &:hover {
     padding: 0;
     box-shadow: none;
   }
 
-  :focus {
+  &:focus {
     padding: 0;
     box-shadow: none;
   }
 
-  :after {
+  &:after {
     content: "";
   }
 `;
diff --git a/client/packages/lowcoder/src/pages/queryLibrary/QueryLibrarySkeletonView.tsx b/client/packages/lowcoder/src/pages/queryLibrary/QueryLibrarySkeletonView.tsx
index b36f53a100..f7fc745a75 100644
--- a/client/packages/lowcoder/src/pages/queryLibrary/QueryLibrarySkeletonView.tsx
+++ b/client/packages/lowcoder/src/pages/queryLibrary/QueryLibrarySkeletonView.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import { Spin } from "antd";
+import { default as Spin } from "antd/es/spin";
 
 const StyledSpin = styled(Spin)`
   display: flex;
diff --git a/client/packages/lowcoder/src/pages/queryLibrary/queryLibraryEditorView.tsx b/client/packages/lowcoder/src/pages/queryLibrary/queryLibraryEditorView.tsx
index aac1204fea..40c5d0e371 100644
--- a/client/packages/lowcoder/src/pages/queryLibrary/queryLibraryEditorView.tsx
+++ b/client/packages/lowcoder/src/pages/queryLibrary/queryLibraryEditorView.tsx
@@ -33,7 +33,7 @@ const HeaderLeft = styled.div`
     font-weight: 500;
     margin-left: -8px;
 
-    :hover {
+    &:hover {
       background-color: #f5f5f6;
     }
   }
@@ -47,7 +47,7 @@ const HeaderLeft = styled.div`
     border: 1px solid #3377ff;
     margin-left: -8px;
 
-    :focus {
+    &:focus {
       border-color: #3377ff;
       box-shadow: 0 0 0 2px #d6e4ff;
     }
diff --git a/client/packages/lowcoder/src/pages/setting/idSource/createModal.tsx b/client/packages/lowcoder/src/pages/setting/idSource/createModal.tsx
index f52c270a31..8b21065687 100644
--- a/client/packages/lowcoder/src/pages/setting/idSource/createModal.tsx
+++ b/client/packages/lowcoder/src/pages/setting/idSource/createModal.tsx
@@ -10,7 +10,10 @@ import {
   SpanStyled,
   PasswordLabel
 } from "./styledComponents";
-import { Form, Input, Select, Tooltip } from "antd";
+import { default as Form } from "antd/es/form";
+import { default as Input } from "antd/es/input";
+import { default as Select } from "antd/es/select";
+import { default as Tooltip } from "antd/es/tooltip";
 import IdSourceApi, { ConfigItem } from "api/idSourceApi";
 import { validateResponse } from "api/apiUtils";
 import { authConfig, AuthType, clientIdandSecretConfig, ItemType } from "./idSourceConstants";
diff --git a/client/packages/lowcoder/src/pages/setting/idSource/detail/deleteConfig.tsx b/client/packages/lowcoder/src/pages/setting/idSource/detail/deleteConfig.tsx
index f9cfc370f6..63ebd48170 100644
--- a/client/packages/lowcoder/src/pages/setting/idSource/detail/deleteConfig.tsx
+++ b/client/packages/lowcoder/src/pages/setting/idSource/detail/deleteConfig.tsx
@@ -1,4 +1,4 @@
-import { Button } from "antd";
+import { default as Button } from "antd/es/button";
 import { DeleteWrapper } from "pages/setting/idSource/styledComponents";
 import { trans } from "i18n";
 import { useState } from "react";
diff --git a/client/packages/lowcoder/src/pages/setting/idSource/detail/index.tsx b/client/packages/lowcoder/src/pages/setting/idSource/detail/index.tsx
index 1bdaa5d34d..9d59de7fee 100644
--- a/client/packages/lowcoder/src/pages/setting/idSource/detail/index.tsx
+++ b/client/packages/lowcoder/src/pages/setting/idSource/detail/index.tsx
@@ -20,7 +20,11 @@ import {
 } from "@lowcoder-ee/pages/setting/idSource/idSourceConstants";
 import { Manual } from "pages/setting/idSource/detail/manual";
 import { DeleteConfig } from "pages/setting/idSource/detail/deleteConfig";
-import { Divider, Form, Input, Tooltip } from "antd";
+import { default as Divider } from "antd/es/divider";
+import { default as Form } from "antd/es/form";
+import { useForm } from "antd/es/form/Form";
+import { default as Input } from "antd/es/input";
+import { default as Tooltip } from "antd/es/tooltip";
 import {
   SaveButton,
   CheckboxStyled,
@@ -31,7 +35,6 @@ import {
 } from "pages/setting/idSource/styledComponents";
 import { validateResponse } from "api/apiUtils";
 import { ItemType } from "pages/setting/idSource/idSourceConstants";
-import { useForm } from "antd/es/form/Form";
 import _ from "lodash";
 import { messageInstance } from "lowcoder-design";
 
diff --git a/client/packages/lowcoder/src/pages/setting/idSource/detail/manual.tsx b/client/packages/lowcoder/src/pages/setting/idSource/detail/manual.tsx
index c83bfa80fb..6e1b9229dd 100644
--- a/client/packages/lowcoder/src/pages/setting/idSource/detail/manual.tsx
+++ b/client/packages/lowcoder/src/pages/setting/idSource/detail/manual.tsx
@@ -1,4 +1,4 @@
-import { Button } from "antd";
+import { default as Button } from "antd/es/button";
 import { ManualWapper } from "pages/setting/idSource/styledComponents";
 import { trans } from "i18n";
 import { SyncManualIcon } from "lowcoder-design";
diff --git a/client/packages/lowcoder/src/pages/setting/idSource/list.tsx b/client/packages/lowcoder/src/pages/setting/idSource/list.tsx
index b1536e7a9b..14fd3a43a2 100644
--- a/client/packages/lowcoder/src/pages/setting/idSource/list.tsx
+++ b/client/packages/lowcoder/src/pages/setting/idSource/list.tsx
@@ -4,7 +4,7 @@ import {
   Level1SettingPageContentWithList,
   Level1SettingPageTitleWithBtn,
 } from "pages/setting/styled";
-import Column from "antd/lib/table/Column";
+import { default as Column } from "antd/es/table/Column";
 import { useSelector } from "react-redux";
 import { getUser } from "redux/selectors/usersSelectors";
 import IdSourceApi, { ConfigItem } from "api/idSourceApi";
@@ -25,7 +25,7 @@ import history from "util/history";
 import { OAUTH_PROVIDER_DETAIL } from "constants/routesURL";
 import { selectSystemConfig } from "redux/selectors/configSelectors";
 import { isEnterpriseMode, isSelfDomain } from "util/envUtils";
-import { Badge } from "antd";
+import { default as Badge } from "antd/es/badge";
 import { validateResponse } from "api/apiUtils";
 import { ServerAuthTypeInfo } from "@lowcoder-ee/constants/authConstants";
 import { GeneralLoginIcon } from "assets/icons";
diff --git a/client/packages/lowcoder/src/pages/setting/idSource/styledComponents.tsx b/client/packages/lowcoder/src/pages/setting/idSource/styledComponents.tsx
index ee41f0b6a7..577684f98e 100644
--- a/client/packages/lowcoder/src/pages/setting/idSource/styledComponents.tsx
+++ b/client/packages/lowcoder/src/pages/setting/idSource/styledComponents.tsx
@@ -1,6 +1,8 @@
 import styled, { css } from "styled-components";
 import { Table } from "components/Table";
-import { Button, Checkbox, Form } from "antd";
+import { default as Button } from "antd/es/button";
+import { default as Checkbox} from "antd/es/checkbox";
+import { default as Form } from "antd/es/form";
 import { UnderlineCss } from "lowcoder-design";
 
 const btnLoadingCss = css`
diff --git a/client/packages/lowcoder/src/pages/setting/organization/orgList.tsx b/client/packages/lowcoder/src/pages/setting/organization/orgList.tsx
index dcd262d6af..0db0e6235a 100644
--- a/client/packages/lowcoder/src/pages/setting/organization/orgList.tsx
+++ b/client/packages/lowcoder/src/pages/setting/organization/orgList.tsx
@@ -18,7 +18,8 @@ import { Level1SettingPageContentWithList, Level1SettingPageTitleWithBtn } from
 import { timestampToHumanReadable } from "util/dateTimeUtils";
 import { isSaasMode } from "util/envUtils";
 import { selectSystemConfig } from "redux/selectors/configSelectors";
-import { Form, Input } from "antd";
+import { default as Form } from "antd/es/form";
+import { default as Input } from "antd/es/input";
 import { getUser } from "redux/selectors/usersSelectors";
 import { getOrgCreateStatus } from "redux/selectors/orgSelectors";
 
diff --git a/client/packages/lowcoder/src/pages/setting/permission/permissionList.tsx b/client/packages/lowcoder/src/pages/setting/permission/permissionList.tsx
index 30216a16a0..b2fb697315 100644
--- a/client/packages/lowcoder/src/pages/setting/permission/permissionList.tsx
+++ b/client/packages/lowcoder/src/pages/setting/permission/permissionList.tsx
@@ -1,4 +1,4 @@
-import { Typography } from "antd";
+import { default as Typography } from "antd/es/typography";
 import OrgApi from "api/orgApi";
 import { buildGroupId } from "constants/routesURL";
 import { AddIcon, CustomModal, EditPopover } from "lowcoder-design";
diff --git a/client/packages/lowcoder/src/pages/setting/permission/styledComponents.tsx b/client/packages/lowcoder/src/pages/setting/permission/styledComponents.tsx
index 7223016be8..4f2be19b4b 100644
--- a/client/packages/lowcoder/src/pages/setting/permission/styledComponents.tsx
+++ b/client/packages/lowcoder/src/pages/setting/permission/styledComponents.tsx
@@ -1,4 +1,5 @@
-import { Popover, Table as AntdTable } from "antd";
+import { default as Popover } from "antd/es/popover";
+import { default as AntdTable } from "antd/es/table";
 import {
   CustomModal,
   LockIcon,
@@ -48,11 +49,11 @@ export const StyledTable = styled(AntdTable)`
   }
 
   .ant-table-body {
-    ::-webkit-scrollbar {
+    &::-webkit-scrollbar {
       width: 16px;
     }
 
-    ::-webkit-scrollbar-thumb {
+    &::-webkit-scrollbar-thumb {
       border: 5px solid transparent;
       background-clip: content-box;
       border-radius: 9999px;
@@ -172,7 +173,7 @@ export const PermissionHeaderWrapper = styled.div`
     padding: 7px 12px;
     white-space: nowrap;
 
-    ::-webkit-scrollbar {
+    &::-webkit-scrollbar {
       display: none;
     }
   }
@@ -294,7 +295,7 @@ export const PopoverIcon = styled(PointIcon)`
     fill: #8b8fa3;
   }
 
-  :hover {
+  &:hover {
     background-color: #e1e3eb;
     border-radius: 4px;
     cursor: pointer;
diff --git a/client/packages/lowcoder/src/pages/setting/profile/profileComponets.tsx b/client/packages/lowcoder/src/pages/setting/profile/profileComponets.tsx
index 17e20f8bdd..61ee5c6780 100644
--- a/client/packages/lowcoder/src/pages/setting/profile/profileComponets.tsx
+++ b/client/packages/lowcoder/src/pages/setting/profile/profileComponets.tsx
@@ -14,10 +14,9 @@ import { User } from "constants/userConstants";
 import { replaceMiddleWithStar } from "util/stringUtils";
 import { useDispatch, useSelector } from "react-redux";
 import { getUser } from "redux/selectors/usersSelectors";
-import { UploadChangeParam } from "antd/lib/upload";
 import { beforeImgUpload, getBase64 } from "util/fileUtils";
 import { updateUserAction, updateUserSuccess } from "redux/reduxActions/userActions";
-import { Upload } from "antd";
+import { default as Upload, UploadChangeParam } from "antd/es/upload";
 import { USER_HEAD_UPLOAD_URL } from "constants/apiConstants";
 import { trans } from "i18n";
 import { messageInstance } from "lowcoder-design";
@@ -165,7 +164,7 @@ const ProfileImageMask = styled.div`
   opacity: 0;
   cursor: pointer;
 
-  :hover {
+  &:hover {
     opacity: 1;
     background: rgba(0, 0, 0, 0.5);
     border: 1px solid rgba(0, 0, 0, 0.1);
diff --git a/client/packages/lowcoder/src/pages/setting/theme/createModal.tsx b/client/packages/lowcoder/src/pages/setting/theme/createModal.tsx
index d1ca5265b0..753f1477a7 100644
--- a/client/packages/lowcoder/src/pages/setting/theme/createModal.tsx
+++ b/client/packages/lowcoder/src/pages/setting/theme/createModal.tsx
@@ -54,7 +54,7 @@ function CreateModal(props: CreateModalProp) {
     return (
       <ThemeBtn
         key={theme.id}
-        theme={theme.theme}
+        $theme={theme.theme}
         onClick={() => setSelectId(theme.id)}
         className={selectId === theme.id ? "selected" : ""}
       >
diff --git a/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx b/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
index e6583a67a3..a6968e6ae9 100644
--- a/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
+++ b/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
@@ -1,4 +1,5 @@
-import { InputRef, message } from "antd";
+import { InputRef } from "antd/es/input";
+import { default as message } from "antd/es/message";
 import {
   CommonSettingResponseData,
   SetCommonSettingPayload,
diff --git a/client/packages/lowcoder/src/pages/setting/theme/styledComponents.tsx b/client/packages/lowcoder/src/pages/setting/theme/styledComponents.tsx
index a58eebcc0a..4974c3feeb 100644
--- a/client/packages/lowcoder/src/pages/setting/theme/styledComponents.tsx
+++ b/client/packages/lowcoder/src/pages/setting/theme/styledComponents.tsx
@@ -1,4 +1,6 @@
-import { Button, Divider, Table } from "antd";
+import { default as Button } from "antd/es/button";
+import { default as Divider } from "antd/es/divider";
+import { default as Table } from "antd/es/table";
 import { ThemeDetail } from "api/commonSettingApi";
 import {
   CustomModal,
@@ -150,7 +152,7 @@ export const BackBtn = styled.div`
   cursor: pointer;
   height: 24px;
 
-  :hover {
+  &:hover {
     color: #4965f2;
   }
 
@@ -161,7 +163,7 @@ export const BackBtn = styled.div`
     margin-right: 4px;
   }
 
-  :hover svg g path {
+  &:hover svg g path {
     fill: #4965f2;
   }
 `;
@@ -216,19 +218,19 @@ export const TacoInputStyled = styled(TacoInput)`
   }
 `;
 
-export const ThemeBtn = styled.div<{ theme: ThemeDetail }>`
+export const ThemeBtn = styled.div<{ $theme: ThemeDetail }>`
   width: 180px;
   margin-bottom: 4px;
   height: auto;
   padding: 7px;
-  background-color: ${(props) => props.theme.canvas};
+  background-color: ${(props) => props.$theme.canvas};
   border-radius: 6px;
   border: 1px solid #efeff1;
   font-size: 12px;
   position: relative;
   cursor: pointer;
   color: ${(props) =>
-    isDarkColor(props.theme.primarySurface) ? props.theme.textLight : props.theme.textDark};
+    isDarkColor(props.$theme.primarySurface) ? props.$theme.textLight : props.$theme.textDark};
   .name {
     font-size: 13px;
     font-weight: 600;
@@ -239,7 +241,7 @@ export const ThemeBtn = styled.div<{ theme: ThemeDetail }>`
   &:hover,
   &:focus,
   &:active {
-    background-color: ${(props) => props.theme.canvas};
+    background-color: ${(props) => props.$theme.canvas};
     border-color: #315efb;
     box-shadow: 0 0 1px 4px #d6e4ff;
   }
@@ -247,8 +249,8 @@ export const ThemeBtn = styled.div<{ theme: ThemeDetail }>`
     border-radius: 6px;
     overflow: hidden;
     display: block;
-    border: 1px solid ${(props) => darkenColor(props.theme.primarySurface, 0.1)};
-    background-color: ${(props) => props.theme.primarySurface};
+    border: 1px solid ${(props) => darkenColor(props.$theme.primarySurface, 0.1)};
+    background-color: ${(props) => props.$theme.primarySurface};
     span {
       display: inline-flex;
       align-items: center;
@@ -257,7 +259,7 @@ export const ThemeBtn = styled.div<{ theme: ThemeDetail }>`
       display: flex;
       align-items: center;
       padding: 0 6px;
-      border-bottom: 1px solid ${(props) => darkenColor(props.theme.primarySurface, 0.1)};
+      border-bottom: 1px solid ${(props) => darkenColor(props.$theme.primarySurface, 0.1)};
     }
     > div:nth-of-type(1) {
       height: 28px;
@@ -266,7 +268,7 @@ export const ThemeBtn = styled.div<{ theme: ThemeDetail }>`
       svg {
         margin-right: 2px;
         rect {
-          fill: ${(props) => props.theme.primary};
+          fill: ${(props) => props.$theme.primary};
         }
       }
     }
@@ -290,10 +292,10 @@ export const ThemeBtn = styled.div<{ theme: ThemeDetail }>`
         svg {
           margin-right: 2px;
           circle:nth-of-type(1) {
-            stroke: ${(props) => props.theme.primary};
+            stroke: ${(props) => props.$theme.primary};
           }
           circle:nth-of-type(2) {
-            fill: ${(props) => props.theme.primary};
+            fill: ${(props) => props.$theme.primary};
           }
         }
         span {
@@ -327,9 +329,9 @@ export const ThemeBtn = styled.div<{ theme: ThemeDetail }>`
         display: flex;
         align-items: center;
         justify-content: center;
-        background-color: ${(props) => props.theme.primary};
+        background-color: ${(props) => props.$theme.primary};
         color: ${(props) =>
-          isDarkColor(props.theme.primary) ? props.theme.textLight : props.theme.textDark};
+          isDarkColor(props.$theme.primary) ? props.$theme.textLight : props.$theme.textDark};
       }
     }
   }
@@ -435,7 +437,7 @@ export const ConfigItem = styled.div`
   }
 `;
 
-export const Radius = styled.div<{ radius: string }>`
+export const Radius = styled.div<{ $radius: string }>`
   width: 24px;
   height: 24px;
   border-radius: 4px 0 0 4px;
@@ -449,7 +451,7 @@ export const Radius = styled.div<{ radius: string }>`
       height: 24px;
       width: 24px;
       border: 2px solid #777;
-      border-radius: ${(props) => props.radius};
+      border-radius: ${(props) => props.$radius};
     }
   }
 `;
@@ -576,7 +578,7 @@ export const StyledMoreActionIcon = styled(PopoverIcon)`
     fill: #8b8fa3;
   }
 
-  :hover {
+  &:hover {
     background-color: #e1e3eb;
     border-radius: 4px;
     cursor: pointer;
@@ -616,14 +618,14 @@ const getTagStyle = (theme: ThemeDetail) => {
   `;
 };
 
-export const TagDesc = styled.span<{ theme: ThemeDetail }>`
+export const TagDesc = styled.span<{ $theme: ThemeDetail }>`
   display: inline-flex;
   margin-right: 12px;
   height: 36px;
   width: 58px;
   border-radius: 6px;
   border: 1px solid rgba(0, 0, 0, 0.1);
-  ${(props) => getTagStyle(props.theme)}
+  ${(props) => getTagStyle(props.$theme)}
 `;
 
 export const EmptySpan = styled.span`
@@ -654,7 +656,7 @@ export const CustomModalStyled = styled(CustomModal)`
   }
 `;
 
-export const Margin = styled.div<{ margin: string }>`	
+export const Margin = styled.div<{ $margin: string }>`	
 > div {	
   margin: 3px;	
   overflow: hidden;	
@@ -664,7 +666,7 @@ export const Margin = styled.div<{ margin: string }>`
   }	
 }	
 `;	
-export const Padding = styled.div<{ padding: string }>`	
+export const Padding = styled.div<{ $padding: string }>`	
 > div {	
   margin: 3px;	
   overflow: hidden;	
@@ -674,7 +676,7 @@ export const Padding = styled.div<{ padding: string }>`
   }	
 }`
 // Added By Aqib Mirza
-export const GridColumns = styled.div<{ gridColumns: string }>`
+export const GridColumns = styled.div<{ $gridColumns: string }>`
   > div {
     margin: 3px;
     overflow: hidden;
diff --git a/client/packages/lowcoder/src/pages/setting/theme/themeList.tsx b/client/packages/lowcoder/src/pages/setting/theme/themeList.tsx
index 5170a1c07d..7b662b1988 100644
--- a/client/packages/lowcoder/src/pages/setting/theme/themeList.tsx
+++ b/client/packages/lowcoder/src/pages/setting/theme/themeList.tsx
@@ -1,4 +1,9 @@
-import { Button, Dropdown, Empty, Menu, Table, Typography } from "antd";
+import { default as Button } from "antd/es/button";
+import { default as Dropdown } from "antd/es/dropdown";
+import { default as Empty } from "antd/es/empty";
+import { default as Menu } from "antd/es/menu";
+import { default as Table } from "antd/es/table";
+import { default as Typography } from "antd/es/typography";
 import { timestampToHumanReadable } from "util/dateTimeUtils";
 import { MENU_TYPE } from "./themeConstant";
 import React, { useState } from "react";
@@ -87,7 +92,7 @@ function ThemeList(props: ThemeListProp) {
         render={(value, theme: ThemeType) => {
           return (
             <ColumnName>
-              <TagDesc theme={theme.theme}>
+              <TagDesc $theme={theme.theme}>
                 <div className="left" />
                 <div className="right" />
               </TagDesc>
diff --git a/client/packages/lowcoder/src/pages/userAuth/authComponents.tsx b/client/packages/lowcoder/src/pages/userAuth/authComponents.tsx
index 7df9dd684d..3b6f6942ff 100644
--- a/client/packages/lowcoder/src/pages/userAuth/authComponents.tsx
+++ b/client/packages/lowcoder/src/pages/userAuth/authComponents.tsx
@@ -32,7 +32,7 @@ const AuthCard = styled.div`
   }
 `;
 
-const AuthCardHeading = styled.div<{ type?: string }>`
+const AuthCardHeading = styled.div<{ $type?: string }>`
   font-weight: 600;
   font-size: 28px;
   color: #222222;
@@ -47,7 +47,7 @@ const AuthCardHeading = styled.div<{ type?: string }>`
   @media screen and (max-width: 640px) {
     font-size: 23px;
     line-height: 23px;
-    ${(props) => props.type === "large" && "margin-top: 32px"}
+    ${(props) => props.$type === "large" && "margin-top: 32px"}
   }
 `;
 
@@ -70,8 +70,8 @@ const AuthBottom = styled.div`
 
   > button:first-child {
     // over 5 children, hide the button label
-    :nth-last-child(n + 5),
-    :nth-last-child(n + 5) ~ button {
+    &:nth-last-child(n + 5),
+    &:nth-last-child(n + 5) ~ button {
       margin-right: 16px;
 
       .auth-label {
@@ -131,7 +131,7 @@ export const AuthContainer = (props: {
   return (
     <AuthCardContainer>
       <AuthCardHeading
-        type={props.type}
+        $type={props.type}
       >
         {props.heading || ""}
       </AuthCardHeading>
@@ -267,7 +267,7 @@ export const StyledRouteLink = styled(Link)`
   line-height: 16px;
   margin-left: auto;
 
-  :hover {
+  &:hover {
     color: #315efb;
   }
 `;
diff --git a/client/packages/lowcoder/src/pages/userAuth/thirdParty/thirdPartyAuth.tsx b/client/packages/lowcoder/src/pages/userAuth/thirdParty/thirdPartyAuth.tsx
index 78017a639c..219e759bd0 100644
--- a/client/packages/lowcoder/src/pages/userAuth/thirdParty/thirdPartyAuth.tsx
+++ b/client/packages/lowcoder/src/pages/userAuth/thirdParty/thirdPartyAuth.tsx
@@ -13,7 +13,7 @@ import { messageInstance } from "lowcoder-design";
 import styled from "styled-components";
 import { trans } from "i18n";
 import { geneAuthStateAndSaveParam, getAuthUrl, getRedirectUrl } from "pages/userAuth/authUtils";
-import { Divider } from "antd";
+import { default as Divider } from "antd/es/divider";
 import { useRedirectUrl } from "util/hooks";
 
 const ThirdPartyLoginButtonWrapper = styled.div`
diff --git a/client/packages/lowcoder/src/util/bottomResUtils.tsx b/client/packages/lowcoder/src/util/bottomResUtils.tsx
index 6abceb332e..099a00e075 100644
--- a/client/packages/lowcoder/src/util/bottomResUtils.tsx
+++ b/client/packages/lowcoder/src/util/bottomResUtils.tsx
@@ -40,10 +40,10 @@ const QueryLibrary = styled(QueryLibraryIcon)`
   }
 `;
 
-export const IconWrapper = styled.div<{ isRestApi?: boolean }>`
+export const IconWrapper = styled.div<{ $isRestApi?: boolean }>`
   display: flex;
-  width: ${(props) => (props.isRestApi ? "26px" : "16px")};
-  height: ${(props) => (props.isRestApi ? "13px" : "16px")};
+  width: ${(props) => (props.$isRestApi ? "26px" : "16px")};
+  height: ${(props) => (props.$isRestApi ? "13px" : "16px")};
   border-radius: 2px;
   flex-shrink: 0;
   margin-right: 4px;
@@ -51,13 +51,13 @@ export const IconWrapper = styled.div<{ isRestApi?: boolean }>`
 `;
 
 export const LargeBottomResIconWrapper = styled(IconWrapper)`
-  width: ${(props) => (props.isRestApi ? "32px" : "20px")};
-  height: ${(props) => (props.isRestApi ? "16px" : "20px")};
+  width: ${(props) => (props.$isRestApi ? "32px" : "20px")};
+  height: ${(props) => (props.$isRestApi ? "16px" : "20px")};
   margin-right: 8px;
 
   svg {
-    width: ${(props) => (props.isRestApi ? "32px" : "20px")};
-    height: ${(props) => (props.isRestApi ? "16px" : "20px")};
+    width: ${(props) => (props.$isRestApi ? "32px" : "20px")};
+    height: ${(props) => (props.$isRestApi ? "16px" : "20px")};
   }
 `;
 
@@ -146,8 +146,8 @@ export const getBottomResIcon = (
   };
   const isRestApi = type === "restApi" && !!httpMethod;
   return size === "large" ? (
-    <LargeBottomResIconWrapper isRestApi={isRestApi}>{getIcon()}</LargeBottomResIconWrapper>
+    <LargeBottomResIconWrapper $isRestApi={isRestApi}>{getIcon()}</LargeBottomResIconWrapper>
   ) : (
-    <IconWrapper isRestApi={isRestApi}>{getIcon()}</IconWrapper>
+    <IconWrapper $isRestApi={isRestApi}>{getIcon()}</IconWrapper>
   );
 };
diff --git a/client/yarn.lock b/client/yarn.lock
index a322d1b062..bd2fabaaa6 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -72,30 +72,30 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@ant-design/colors@npm:^7.0.0":
-  version: 7.0.0
-  resolution: "@ant-design/colors@npm:7.0.0"
+"@ant-design/colors@npm:^7.0.0, @ant-design/colors@npm:^7.0.2":
+  version: 7.0.2
+  resolution: "@ant-design/colors@npm:7.0.2"
   dependencies:
-    "@ctrl/tinycolor": ^3.4.0
-  checksum: 419e98d9cb823ff0935024f4278f7b9c5896805dce4c93d667b5a4d76b03f5fa969b32d1998ee761113da43063e2b23a94c330ad6e865f03fbbb2579907e7fdb
+    "@ctrl/tinycolor": ^3.6.1
+  checksum: e09eec01d3f88b4101cbf28498ba181af65a02cb28fc1b7b70f5fdf509bef0fa61185c451d1a83fdcc9f8356057d0a0436253d8183a35e6f78845fea01f40072
   languageName: node
   linkType: hard
 
-"@ant-design/cssinjs@npm:^1.18.1":
-  version: 1.18.1
-  resolution: "@ant-design/cssinjs@npm:1.18.1"
+"@ant-design/cssinjs@npm:^1.18.2":
+  version: 1.18.2
+  resolution: "@ant-design/cssinjs@npm:1.18.2"
   dependencies:
     "@babel/runtime": ^7.11.1
     "@emotion/hash": ^0.8.0
     "@emotion/unitless": ^0.7.5
     classnames: ^2.3.1
-    csstype: 3.1.2
+    csstype: ^3.1.3
     rc-util: ^5.35.0
     stylis: ^4.0.13
   peerDependencies:
     react: ">=16.0.0"
     react-dom: ">=16.0.0"
-  checksum: 69a46791ef18a66fabe6569e58ad97feff9f4366c6653a2ae1360aca21607c6ce448595dd26c72d2e387352d6bafe5f1ff4339c956798c19a7de69f09c4f2818
+  checksum: b3430547a625fae25b0b459fc9055422985fb1855f0296bb0208d51586e7c0c1e1dae2dc59b6af28234f4b3de938434a0b737bde59d8c4f52feb7a14e7fa8202
   languageName: node
   linkType: hard
 
@@ -172,25 +172,25 @@ __metadata:
   linkType: hard
 
 "@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.3, @babel/core@npm:^7.16.0, @babel/core@npm:^7.19.6":
-  version: 7.23.6
-  resolution: "@babel/core@npm:7.23.6"
+  version: 7.23.7
+  resolution: "@babel/core@npm:7.23.7"
   dependencies:
     "@ampproject/remapping": ^2.2.0
     "@babel/code-frame": ^7.23.5
     "@babel/generator": ^7.23.6
     "@babel/helper-compilation-targets": ^7.23.6
     "@babel/helper-module-transforms": ^7.23.3
-    "@babel/helpers": ^7.23.6
+    "@babel/helpers": ^7.23.7
     "@babel/parser": ^7.23.6
     "@babel/template": ^7.22.15
-    "@babel/traverse": ^7.23.6
+    "@babel/traverse": ^7.23.7
     "@babel/types": ^7.23.6
     convert-source-map: ^2.0.0
     debug: ^4.1.0
     gensync: ^1.0.0-beta.2
     json5: ^2.2.3
     semver: ^6.3.1
-  checksum: 4bddd1b80394a64b2ee33eeb216e8a2a49ad3d74f0ca9ba678c84a37f4502b2540662d72530d78228a2a349fda837fa852eea5cd3ae28465d1188acc6055868e
+  checksum: 32d5bf73372a47429afaae9adb0af39e47bcea6a831c4b5dcbb4791380cda6949cb8cb1a2fea8b60bb1ebe189209c80e333903df1fa8e9dcb04798c0ce5bf59e
   languageName: node
   linkType: hard
 
@@ -251,9 +251,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-create-class-features-plugin@npm:^7.18.6, @babel/helper-create-class-features-plugin@npm:^7.21.0, @babel/helper-create-class-features-plugin@npm:^7.22.15, @babel/helper-create-class-features-plugin@npm:^7.23.6":
-  version: 7.23.6
-  resolution: "@babel/helper-create-class-features-plugin@npm:7.23.6"
+"@babel/helper-create-class-features-plugin@npm:^7.18.6, @babel/helper-create-class-features-plugin@npm:^7.21.0, @babel/helper-create-class-features-plugin@npm:^7.22.15, @babel/helper-create-class-features-plugin@npm:^7.23.6, @babel/helper-create-class-features-plugin@npm:^7.23.7":
+  version: 7.23.7
+  resolution: "@babel/helper-create-class-features-plugin@npm:7.23.7"
   dependencies:
     "@babel/helper-annotate-as-pure": ^7.22.5
     "@babel/helper-environment-visitor": ^7.22.20
@@ -266,7 +266,7 @@ __metadata:
     semver: ^6.3.1
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 356b71b9f4a3a95917432bf6a452f475a292d394d9310e9c8b23c8edb564bee91e40d4290b8aa8779d2987a7c39ae717b2d76edc7c952078b8952df1a20259e3
+  checksum: 33e60714b856c3816a7965d4c76278cc8f430644a2dfc4eeafad2f7167c4fbd2becdb74cbfeb04b02efd6bbd07176ef53c6683262b588e65d378438e9c55c26b
   languageName: node
   linkType: hard
 
@@ -333,7 +333,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-module-imports@npm:^7.0.0, @babel/helper-module-imports@npm:^7.22.15, @babel/helper-module-imports@npm:^7.22.5":
+"@babel/helper-module-imports@npm:^7.22.15":
   version: 7.22.15
   resolution: "@babel/helper-module-imports@npm:7.22.15"
   dependencies:
@@ -458,14 +458,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helpers@npm:^7.23.6":
-  version: 7.23.6
-  resolution: "@babel/helpers@npm:7.23.6"
+"@babel/helpers@npm:^7.23.7":
+  version: 7.23.7
+  resolution: "@babel/helpers@npm:7.23.7"
   dependencies:
     "@babel/template": ^7.22.15
-    "@babel/traverse": ^7.23.6
+    "@babel/traverse": ^7.23.7
     "@babel/types": ^7.23.6
-  checksum: c5ba62497e1d717161d107c4b3de727565c68b6b9f50f59d6298e613afeca8895799b227c256e06d362e565aec34e26fb5c675b9c3d25055c52b945a21c21e21
+  checksum: 4f3bdf35fb54ff79107c6020ba1e36a38213a15b05ca0fa06c553b65f566e185fba6339fb3344be04593ebc244ed0bbb0c6087e73effe0d053a30bcd2db3a013
   languageName: node
   linkType: hard
 
@@ -513,15 +513,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:7.23.3"
+"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:^7.23.7":
+  version: 7.23.7
+  resolution: "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:7.23.7"
   dependencies:
     "@babel/helper-environment-visitor": ^7.22.20
     "@babel/helper-plugin-utils": ^7.22.5
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 4690123f0ef7c11d6bf1a9579e4f463ce363563b75ec3f6ca66cf68687e39d8d747a82c833847653962f79da367eca895d9095c60d8ebb224a1d4277003acc11
+  checksum: f88e400b548202a6f8c5dfd25bc4949a13ea1ccb64a170d7dea4deaa655a0fcb001d3fd61c35e1ad9c09a3d5f0d43f783400425471fe6d660ccaf33dabea9aba
   languageName: node
   linkType: hard
 
@@ -538,18 +538,15 @@ __metadata:
   linkType: hard
 
 "@babel/plugin-proposal-decorators@npm:^7.16.4":
-  version: 7.23.6
-  resolution: "@babel/plugin-proposal-decorators@npm:7.23.6"
+  version: 7.23.7
+  resolution: "@babel/plugin-proposal-decorators@npm:7.23.7"
   dependencies:
-    "@babel/helper-create-class-features-plugin": ^7.23.6
+    "@babel/helper-create-class-features-plugin": ^7.23.7
     "@babel/helper-plugin-utils": ^7.22.5
-    "@babel/helper-replace-supers": ^7.22.20
-    "@babel/helper-skip-transparent-expression-wrappers": ^7.22.5
-    "@babel/helper-split-export-declaration": ^7.22.6
     "@babel/plugin-syntax-decorators": ^7.23.3
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 9d69891e0c37c73a8fd5deafbf42bd82e727f96a779cf1e5e194d97f856e04e79d2d39081c48ffcea596e6ff95024016479d728772e692999ab5af74d4106f27
+  checksum: 53c3d3af451ea75fa48cb26811dce8a9cdcc51ff4bd48fa037482a6527e0c3eec1737541ab0f7e7d5c210cbe81badda15cf043b21049e036ef376deabf176c06
   languageName: node
   linkType: hard
 
@@ -757,7 +754,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-jsx@npm:^7.22.5, @babel/plugin-syntax-jsx@npm:^7.23.3, @babel/plugin-syntax-jsx@npm:^7.7.2":
+"@babel/plugin-syntax-jsx@npm:^7.23.3, @babel/plugin-syntax-jsx@npm:^7.7.2":
   version: 7.23.3
   resolution: "@babel/plugin-syntax-jsx@npm:7.23.3"
   dependencies:
@@ -890,9 +887,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-async-generator-functions@npm:^7.23.4":
-  version: 7.23.4
-  resolution: "@babel/plugin-transform-async-generator-functions@npm:7.23.4"
+"@babel/plugin-transform-async-generator-functions@npm:^7.23.7":
+  version: 7.23.7
+  resolution: "@babel/plugin-transform-async-generator-functions@npm:7.23.7"
   dependencies:
     "@babel/helper-environment-visitor": ^7.22.20
     "@babel/helper-plugin-utils": ^7.22.5
@@ -900,7 +897,7 @@ __metadata:
     "@babel/plugin-syntax-async-generators": ^7.8.4
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: e2fc132c9033711d55209f4781e1fc73f0f4da5e0ca80a2da73dec805166b73c92a6e83571a8994cd2c893a28302e24107e90856202b24781bab734f800102bb
+  checksum: b1f66b23423933c27336b1161ac92efef46683321caea97e2255a666f992979376f47a5559f64188d3831fa66a4b24c2a7a40838cc0e9737e90eebe20e8e6372
   languageName: node
   linkType: hard
 
@@ -1452,18 +1449,18 @@ __metadata:
   linkType: hard
 
 "@babel/plugin-transform-runtime@npm:^7.16.4":
-  version: 7.23.6
-  resolution: "@babel/plugin-transform-runtime@npm:7.23.6"
+  version: 7.23.7
+  resolution: "@babel/plugin-transform-runtime@npm:7.23.7"
   dependencies:
     "@babel/helper-module-imports": ^7.22.15
     "@babel/helper-plugin-utils": ^7.22.5
-    babel-plugin-polyfill-corejs2: ^0.4.6
-    babel-plugin-polyfill-corejs3: ^0.8.5
-    babel-plugin-polyfill-regenerator: ^0.5.3
+    babel-plugin-polyfill-corejs2: ^0.4.7
+    babel-plugin-polyfill-corejs3: ^0.8.7
+    babel-plugin-polyfill-regenerator: ^0.5.4
     semver: ^6.3.1
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: d87da909e40d31e984ca5487ba36fa229449b773bc0f3fbf1d3c5ccac788ad3aef7481f1d4a3384c1813ee4f958af52b449089d96c0d5625868c028dd630d683
+  checksum: b3cc760afbfdddac5fec3ba3a3916a448d152ada213dcb3ffe54115eaa09db1249f1661b7f271d79c8e6b03ebd5315c049800287cde372900f2557a6e2fe3333
   languageName: node
   linkType: hard
 
@@ -1585,8 +1582,8 @@ __metadata:
   linkType: hard
 
 "@babel/preset-env@npm:^7.16.4, @babel/preset-env@npm:^7.19.4, @babel/preset-env@npm:^7.20.2":
-  version: 7.23.6
-  resolution: "@babel/preset-env@npm:7.23.6"
+  version: 7.23.7
+  resolution: "@babel/preset-env@npm:7.23.7"
   dependencies:
     "@babel/compat-data": ^7.23.5
     "@babel/helper-compilation-targets": ^7.23.6
@@ -1594,7 +1591,7 @@ __metadata:
     "@babel/helper-validator-option": ^7.23.5
     "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": ^7.23.3
     "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": ^7.23.3
-    "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": ^7.23.3
+    "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": ^7.23.7
     "@babel/plugin-proposal-private-property-in-object": 7.21.0-placeholder-for-preset-env.2
     "@babel/plugin-syntax-async-generators": ^7.8.4
     "@babel/plugin-syntax-class-properties": ^7.12.13
@@ -1615,7 +1612,7 @@ __metadata:
     "@babel/plugin-syntax-top-level-await": ^7.14.5
     "@babel/plugin-syntax-unicode-sets-regex": ^7.18.6
     "@babel/plugin-transform-arrow-functions": ^7.23.3
-    "@babel/plugin-transform-async-generator-functions": ^7.23.4
+    "@babel/plugin-transform-async-generator-functions": ^7.23.7
     "@babel/plugin-transform-async-to-generator": ^7.23.3
     "@babel/plugin-transform-block-scoped-functions": ^7.23.3
     "@babel/plugin-transform-block-scoping": ^7.23.4
@@ -1663,14 +1660,14 @@ __metadata:
     "@babel/plugin-transform-unicode-regex": ^7.23.3
     "@babel/plugin-transform-unicode-sets-regex": ^7.23.3
     "@babel/preset-modules": 0.1.6-no-external-plugins
-    babel-plugin-polyfill-corejs2: ^0.4.6
-    babel-plugin-polyfill-corejs3: ^0.8.5
-    babel-plugin-polyfill-regenerator: ^0.5.3
+    babel-plugin-polyfill-corejs2: ^0.4.7
+    babel-plugin-polyfill-corejs3: ^0.8.7
+    babel-plugin-polyfill-regenerator: ^0.5.4
     core-js-compat: ^3.31.0
     semver: ^6.3.1
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 130262f263c8a76915ff5361f78afa9e63b4ecbf3ade8e833dc7546db7b9552ab507835bdea0feb5e70861345ca128a31327fd2e187084a215fc9dd1cc0ed38e
+  checksum: 4b5eb466d9d4beca56c6fdaac92e99d440dc5650fdfd6ebf0d2a07380ebb43b4dc9aedf93bb30d1d1cd56d9e264d3728df348159e18dd138729b249261be11bf
   languageName: node
   linkType: hard
 
@@ -1725,12 +1722,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.10.4, @babel/runtime@npm:^7.11.1, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.13, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.16.7, @babel/runtime@npm:^7.18.0, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.2.0, @babel/runtime@npm:^7.20.0, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.22.5, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.23.4, @babel/runtime@npm:^7.6.3, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
-  version: 7.23.6
-  resolution: "@babel/runtime@npm:7.23.6"
+"@babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.10.4, @babel/runtime@npm:^7.11.1, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.13, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.16.7, @babel/runtime@npm:^7.18.0, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.2.0, @babel/runtime@npm:^7.20.0, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.22.5, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.23.6, @babel/runtime@npm:^7.6.3, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
+  version: 7.23.7
+  resolution: "@babel/runtime@npm:7.23.7"
   dependencies:
     regenerator-runtime: ^0.14.0
-  checksum: 1a8eaf3d3a103ef5227b60ca7ab5c589118c36ca65ef2d64e65380b32a98a3f3b5b3ef96660fa0471b079a18b619a8317f3e7f03ab2b930c45282a8b69ed9a16
+  checksum: eba85bd24d250abb5ae19b16cffc15a54d3894d8228ace40fa4c0e2f1938f28b38ad3e3430ebff9a1ef511eeb8c527e36044ac19076d6deafa52cef35d8624b9
   languageName: node
   linkType: hard
 
@@ -1745,9 +1742,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/traverse@npm:^7.23.6, @babel/traverse@npm:^7.4.5":
-  version: 7.23.6
-  resolution: "@babel/traverse@npm:7.23.6"
+"@babel/traverse@npm:^7.23.7":
+  version: 7.23.7
+  resolution: "@babel/traverse@npm:7.23.7"
   dependencies:
     "@babel/code-frame": ^7.23.5
     "@babel/generator": ^7.23.6
@@ -1759,7 +1756,7 @@ __metadata:
     "@babel/types": ^7.23.6
     debug: ^4.3.1
     globals: ^11.1.0
-  checksum: 48f2eac0e86b6cb60dab13a5ea6a26ba45c450262fccdffc334c01089e75935f7546be195e260e97f6e43cea419862eda095018531a2718fef8189153d479f88
+  checksum: d4a7afb922361f710efc97b1e25ec343fab8b2a4ddc81ca84f9a153f22d4482112cba8f263774be8d297918b6c4767c7a98988ab4e53ac73686c986711dd002e
   languageName: node
   linkType: hard
 
@@ -1806,14 +1803,14 @@ __metadata:
   linkType: hard
 
 "@codemirror/commands@npm:^6.3.2":
-  version: 6.3.2
-  resolution: "@codemirror/commands@npm:6.3.2"
+  version: 6.3.3
+  resolution: "@codemirror/commands@npm:6.3.3"
   dependencies:
     "@codemirror/language": ^6.0.0
-    "@codemirror/state": ^6.2.0
+    "@codemirror/state": ^6.4.0
     "@codemirror/view": ^6.0.0
     "@lezer/common": ^1.1.0
-  checksum: 683c444d8e6ad889ab5efd0d742b0fa28b78c8cad63276ec60d298b13d4939c8bd7e1d6fd3535645b8d255147de0d3aef46d89a29c19d0af58a7f2914bdcb3ab
+  checksum: 7d23aecc973823969434b839aefa9a98bb47212d2ce0e6869ae903adbb5233aad22a760788fb7bb6eb45b00b01a4932fb93ad43bacdcbc0215e7500cf54b17bb
   languageName: node
   linkType: hard
 
@@ -1873,29 +1870,30 @@ __metadata:
   linkType: hard
 
 "@codemirror/lang-sql@npm:^6.5.4":
-  version: 6.5.4
-  resolution: "@codemirror/lang-sql@npm:6.5.4"
+  version: 6.5.5
+  resolution: "@codemirror/lang-sql@npm:6.5.5"
   dependencies:
     "@codemirror/autocomplete": ^6.0.0
     "@codemirror/language": ^6.0.0
     "@codemirror/state": ^6.0.0
+    "@lezer/common": ^1.2.0
     "@lezer/highlight": ^1.0.0
     "@lezer/lr": ^1.0.0
-  checksum: face21b0231ac5a7981949b5bf6a99ed092d0d6f7eb83f35dcd31d56ecf07dafa19d21623e0bad36cec7a12e3149df7b45c3588aeee31eae41e9b05942c4fdd7
+  checksum: 404003ae73b986bd7a00f6924db78b7ffb28fdc38d689fdc11416aaafe2d5c6dc37cc18972530f82e940acb61e18ac74a1cf7712beef448c145344ff93970dc3
   languageName: node
   linkType: hard
 
 "@codemirror/language@npm:^6.0.0, @codemirror/language@npm:^6.4.0, @codemirror/language@npm:^6.6.0":
-  version: 6.9.3
-  resolution: "@codemirror/language@npm:6.9.3"
+  version: 6.10.0
+  resolution: "@codemirror/language@npm:6.10.0"
   dependencies:
     "@codemirror/state": ^6.0.0
-    "@codemirror/view": ^6.0.0
+    "@codemirror/view": ^6.23.0
     "@lezer/common": ^1.1.0
     "@lezer/highlight": ^1.0.0
     "@lezer/lr": ^1.0.0
     style-mod: ^4.0.0
-  checksum: 774a40bc91c748d418a9a774161a5b083061124e4439bb753072bc657ec4c4784f595161c10c7c3935154b22291bf6dc74c9abe827033db32e217ac3963478f3
+  checksum: 3bfd9968f5a34ce22434489a5b226db5f3bc454a1ae7c4381587ff4270ac6af61b10f93df560cb73e9a77cc13d4843722a7a7b94dbed02a3ab1971dd329b9e81
   languageName: node
   linkType: hard
 
@@ -1921,25 +1919,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@codemirror/state@npm:^6.0.0, @codemirror/state@npm:^6.1.4, @codemirror/state@npm:^6.2.0":
-  version: 6.3.3
-  resolution: "@codemirror/state@npm:6.3.3"
-  checksum: 08b075c738cc29391519d3e9b60c4398e7f56ba344983ab9b2263c7ace17d3056e4dcbc2ff651fd49099b48c8b4dc8535404a2f94bd017827f5f90c1045a1b05
+"@codemirror/state@npm:^6.0.0, @codemirror/state@npm:^6.4.0":
+  version: 6.4.0
+  resolution: "@codemirror/state@npm:6.4.0"
+  checksum: c5236fe5786f1b85d17273a5c17fa8aeb063658c1404ab18caeb6e7591663ec96b65d453ab8162f75839c3801b04cd55ba4bc48f44cb61ebfeeee383f89553c7
   languageName: node
   linkType: hard
 
-"@codemirror/view@npm:^6.0.0, @codemirror/view@npm:^6.17.0":
-  version: 6.22.3
-  resolution: "@codemirror/view@npm:6.22.3"
+"@codemirror/view@npm:^6.0.0, @codemirror/view@npm:^6.17.0, @codemirror/view@npm:^6.23.0":
+  version: 6.23.0
+  resolution: "@codemirror/view@npm:6.23.0"
   dependencies:
-    "@codemirror/state": ^6.1.4
+    "@codemirror/state": ^6.4.0
     style-mod: ^4.1.0
     w3c-keyname: ^2.2.4
-  checksum: 89d011afa87b754a4207d18393109c1972c9403762d288711e96c77f51c693a825431c8e35c26268a6eb0889f7184602080d8dcf27fa21354a87dff80636d971
+  checksum: 6e5f2314a3da2c724dc6a525654d949d3f2fcf7009f4d85f980d52ddc885c8969717e903ca1d9132afbe7c524af5d19bff8285fd394106282a965ae83aa47db4
   languageName: node
   linkType: hard
 
-"@ctrl/tinycolor@npm:^3.4.0, @ctrl/tinycolor@npm:^3.6.0, @ctrl/tinycolor@npm:^3.6.1":
+"@ctrl/tinycolor@npm:^3.4.0, @ctrl/tinycolor@npm:^3.6.1":
   version: 3.6.1
   resolution: "@ctrl/tinycolor@npm:3.6.1"
   checksum: cefec6fcaaa3eb8ddf193f981e097dccf63b97b93b1e861cb18c645654824c831a568f444996e15ee509f255658ed82fba11c5365494a6e25b9b12ac454099e0
@@ -2021,7 +2019,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/is-prop-valid@npm:^1.1.0":
+"@emotion/is-prop-valid@npm:1.2.1":
   version: 1.2.1
   resolution: "@emotion/is-prop-valid@npm:1.2.1"
   dependencies:
@@ -2037,14 +2035,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/stylis@npm:^0.8.4":
-  version: 0.8.5
-  resolution: "@emotion/stylis@npm:0.8.5"
-  checksum: 67ff5958449b2374b329fb96e83cb9025775ffe1e79153b499537c6c8b2eb64b77f32d7b5d004d646973662356ceb646afd9269001b97c54439fceea3203ce65
+"@emotion/unitless@npm:0.8.0":
+  version: 0.8.0
+  resolution: "@emotion/unitless@npm:0.8.0"
+  checksum: 176141117ed23c0eb6e53a054a69c63e17ae532ec4210907a20b2208f91771821835f1c63dd2ec63e30e22fcc984026d7f933773ee6526dd038e0850919fae7a
   languageName: node
   linkType: hard
 
-"@emotion/unitless@npm:^0.7.4, @emotion/unitless@npm:^0.7.5":
+"@emotion/unitless@npm:^0.7.5":
   version: 0.7.5
   resolution: "@emotion/unitless@npm:0.7.5"
   checksum: f976e5345b53fae9414a7b2e7a949aa6b52f8bdbcc84458b1ddc0729e77ba1d1dfdff9960e0da60183877873d3a631fa24d9695dd714ed94bcd3ba5196586a6b
@@ -2240,10 +2238,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@eslint/js@npm:8.55.0":
-  version: 8.55.0
-  resolution: "@eslint/js@npm:8.55.0"
-  checksum: fa33ef619f0646ed15649b0c2e313e4d9ccee8425884bdbfc78020d6b6b64c0c42fa9d83061d0e6158e1d4274f03f0f9008786540e2efab8fcdc48082259908c
+"@eslint/js@npm:8.56.0":
+  version: 8.56.0
+  resolution: "@eslint/js@npm:8.56.0"
+  checksum: 5804130574ef810207bdf321c265437814e7a26f4e6fac9b496de3206afd52f533e09ec002a3be06cd9adcc9da63e727f1883938e663c4e4751c007d5b58e539
   languageName: node
   linkType: hard
 
@@ -2451,12 +2449,12 @@ __metadata:
   linkType: hard
 
 "@gilbarbara/helpers@npm:^0.9.0":
-  version: 0.9.0
-  resolution: "@gilbarbara/helpers@npm:0.9.0"
+  version: 0.9.1
+  resolution: "@gilbarbara/helpers@npm:0.9.1"
   dependencies:
     "@gilbarbara/types": ^0.2.2
     is-lite: ^1.2.0
-  checksum: d525f5b6386f4132dff175bd7f9b24f9171d4940ce29e68cbc9ad15d79d4a7514b2035b80df47c3d384ac478d09e5089fdb6eca6ea4355ec9b4a8d34c953d03b
+  checksum: a4eace1d6b0a0342a8e148d26fb1e59ec13d44af181475686b51133723e953dbefe055fbb5265bf7421c5b8ef9b1ae9fd0bb1ec6cb4d042b756d0a35af8d4797
   languageName: node
   linkType: hard
 
@@ -2817,20 +2815,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@lezer/common@npm:^1.0.0, @lezer/common@npm:^1.0.2, @lezer/common@npm:^1.1.0":
-  version: 1.1.2
-  resolution: "@lezer/common@npm:1.1.2"
-  checksum: 2d08c67f467d9625eac1cd79618f964353b63305f17822067c9aa7586c4983bfeaa4e6712f0e5685cf1de679fda5d707a4389a0dd01337397757d2cde0b070ea
+"@lezer/common@npm:^1.0.0, @lezer/common@npm:^1.0.2, @lezer/common@npm:^1.1.0, @lezer/common@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "@lezer/common@npm:1.2.0"
+  checksum: dc6f53f831515f2a25ee93a2c5c032ced527013b4edf148568941dde7d01b5a17ccf7fec11bf3d1c19bf0944a8aae4acebef08b9ba76275da0a64d0533cb5266
   languageName: node
   linkType: hard
 
 "@lezer/css@npm:^1.0.0, @lezer/css@npm:^1.1.0":
-  version: 1.1.4
-  resolution: "@lezer/css@npm:1.1.4"
+  version: 1.1.6
+  resolution: "@lezer/css@npm:1.1.6"
   dependencies:
+    "@lezer/common": ^1.2.0
     "@lezer/highlight": ^1.0.0
     "@lezer/lr": ^1.0.0
-  checksum: 13ffe83e7aaf4213b6a86d01cd68ac02a22e96e9b8ac91368f5f79572cf5e494cee1dc039dc4ed331ba38754681d6013397d06d8c319f1fcb6852b5625eba055
+  checksum: b02860b38fce44b394b5b9d999753843115878542f31048a59d9540f81eb472d25e8c4e19a0c7fb719712959efb8c276d42b171601179c0a1bc4816950c77c79
   languageName: node
   linkType: hard
 
@@ -2844,33 +2843,34 @@ __metadata:
   linkType: hard
 
 "@lezer/html@npm:^1.3.0":
-  version: 1.3.7
-  resolution: "@lezer/html@npm:1.3.7"
+  version: 1.3.8
+  resolution: "@lezer/html@npm:1.3.8"
   dependencies:
-    "@lezer/common": ^1.0.0
+    "@lezer/common": ^1.2.0
     "@lezer/highlight": ^1.0.0
     "@lezer/lr": ^1.0.0
-  checksum: 7145c0eae4f5cf79e34c6bf2fe3f812460969b58dd8923adeb2d14ddfbd6111fed91eaee24d914430c1dcca711a0aac144afc71df00abb750ed7b9d96a6b6f84
+  checksum: 06bce804487435ea6ccb39595176bb65d68691f082b0b68fb7d22d90d4de9798a8202f16e9aefe22865db15257a37f6fca93275d660715eea98f7578579e7135
   languageName: node
   linkType: hard
 
 "@lezer/javascript@npm:^1.0.0":
-  version: 1.4.11
-  resolution: "@lezer/javascript@npm:1.4.11"
+  version: 1.4.12
+  resolution: "@lezer/javascript@npm:1.4.12"
   dependencies:
     "@lezer/highlight": ^1.1.3
     "@lezer/lr": ^1.3.0
-  checksum: aeae5cd01702054593740deb66ed246d82cd8fc9d9788b2724d71a0ddce00743fdf710a2598c244e74d67efc32fa9147d5c0cf5a8d1da7be36a5994bf518cf6f
+  checksum: 431e01107e5b1dde5294bd57baf4d76ecea570697faefb0c54f2bbbe2b4757fa12c5552306d54f8a1db79349d4fa0f79408a1e8cea4ecddbe1731c37c9a8e09e
   languageName: node
   linkType: hard
 
 "@lezer/json@npm:^1.0.0":
-  version: 1.0.1
-  resolution: "@lezer/json@npm:1.0.1"
+  version: 1.0.2
+  resolution: "@lezer/json@npm:1.0.2"
   dependencies:
+    "@lezer/common": ^1.2.0
     "@lezer/highlight": ^1.0.0
     "@lezer/lr": ^1.0.0
-  checksum: fcd17178f6a58e71c83e08fdc047e3708528b28591ba8f08ed35268f370d1ec9b63af0afa9d82a77fec26e9eb477ab3cfdc31c951e080d118ef607f9f9bb52e3
+  checksum: f899d13765d95599c9199fc3404cb57969031dc40ce07de30f4e648979153966581f0bee02e2f8f70463b0a5322206a97c2fe8d5d14f218888c72a6dcedf90ef
   languageName: node
   linkType: hard
 
@@ -2968,18 +2968,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rc-component/color-picker@npm:~1.4.1":
-  version: 1.4.1
-  resolution: "@rc-component/color-picker@npm:1.4.1"
+"@rc-component/color-picker@npm:~1.5.1":
+  version: 1.5.1
+  resolution: "@rc-component/color-picker@npm:1.5.1"
   dependencies:
-    "@babel/runtime": ^7.10.1
-    "@ctrl/tinycolor": ^3.6.0
+    "@babel/runtime": ^7.23.6
+    "@ctrl/tinycolor": ^3.6.1
     classnames: ^2.2.6
-    rc-util: ^5.30.0
+    rc-util: ^5.38.1
   peerDependencies:
     react: ">=16.9.0"
     react-dom: ">=16.9.0"
-  checksum: 7695dc182d5c88039b7c1a82acbd796111f5e90692641151555dc78b234ab67b7f2aedfab38a6874eb245f98a0b444c8b36c0c08885eb9de5eb6a096801c2225
+  checksum: b8997f4844e6dcd6b5e66a2ed2d17d0906642a155a0e8d6e276d1b9c0bb052d7336a3ca1dd990e9ed7e10345cb266eeb7e56c7030b6be0e0aca211b04e5876a1
   languageName: node
   linkType: hard
 
@@ -3133,9 +3133,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@redux-saga/core@npm:^1.2.3":
-  version: 1.2.3
-  resolution: "@redux-saga/core@npm:1.2.3"
+"@redux-saga/core@npm:^1.3.0":
+  version: 1.3.0
+  resolution: "@redux-saga/core@npm:1.3.0"
   dependencies:
     "@babel/runtime": ^7.6.3
     "@redux-saga/deferred": ^1.2.1
@@ -3143,9 +3143,8 @@ __metadata:
     "@redux-saga/is": ^1.1.3
     "@redux-saga/symbols": ^1.1.3
     "@redux-saga/types": ^1.2.1
-    redux: ^4.0.4
     typescript-tuple: ^2.2.1
-  checksum: a18249aa4e771699f103c2e18952d5fc0f65124f88c1fe33f4551b658b5ef7fb2d827091fea3e339c91f324e5d9098f758282d92536e1701bd003812353dd004
+  checksum: b2ef695f506220ba4da581669ff6e5f2d30483afecf804497cc752097af93e8767915de4f1a56e23072935272b13a43b53fe44cae6a993ff586fff40d760ea2b
   languageName: node
   linkType: hard
 
@@ -3189,7 +3188,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rjsf/antd@npm:^5.10.0":
+"@rjsf/antd@npm:^5.15.1":
   version: 5.15.1
   resolution: "@rjsf/antd@npm:5.15.1"
   dependencies:
@@ -3208,7 +3207,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rjsf/core@npm:^5.10.0":
+"@rjsf/core@npm:^5.15.1":
   version: 5.15.1
   resolution: "@rjsf/core@npm:5.15.1"
   dependencies:
@@ -3224,7 +3223,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rjsf/utils@npm:^5.10.0":
+"@rjsf/utils@npm:^5.15.1":
   version: 5.15.1
   resolution: "@rjsf/utils@npm:5.15.1"
   dependencies:
@@ -3239,7 +3238,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rjsf/validator-ajv8@npm:^5.10.0":
+"@rjsf/validator-ajv8@npm:^5.15.1":
   version: 5.15.1
   resolution: "@rjsf/validator-ajv8@npm:5.15.1"
   dependencies:
@@ -3487,9 +3486,9 @@ __metadata:
   linkType: hard
 
 "@rushstack/eslint-patch@npm:^1.1.0":
-  version: 1.6.0
-  resolution: "@rushstack/eslint-patch@npm:1.6.0"
-  checksum: 9fbc39e6070508139ac9ded5cc223780315a1e65ccb7612dd3dff07a0957fa9985a2b049bb5cae21d7eeed44ed315e2868b8755941500dc64ed9932c5760c80d
+  version: 1.6.1
+  resolution: "@rushstack/eslint-patch@npm:1.6.1"
+  checksum: d0c0fcc430dae71d9d929e593844aeaec8d326b1d6c27f18059e22dad486d8df43d6f0206b2021a0df789baf514642355bd86eae7a42c457b7b2f48a29bb0f53
   languageName: node
   linkType: hard
 
@@ -3675,6 +3674,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@testing-library/dom@npm:^9.0.0":
+  version: 9.3.3
+  resolution: "@testing-library/dom@npm:9.3.3"
+  dependencies:
+    "@babel/code-frame": ^7.10.4
+    "@babel/runtime": ^7.12.5
+    "@types/aria-query": ^5.0.1
+    aria-query: 5.1.3
+    chalk: ^4.1.0
+    dom-accessibility-api: ^0.5.9
+    lz-string: ^1.5.0
+    pretty-format: ^27.0.2
+  checksum: 34e0a564da7beb92aa9cc44a9080221e2412b1a132eb37be3d513fe6c58027674868deb9f86195756d98d15ba969a30fe00632a4e26e25df2a5a4f6ac0686e37
+  languageName: node
+  linkType: hard
+
 "@testing-library/jest-dom@npm:^5.16.5":
   version: 5.17.0
   resolution: "@testing-library/jest-dom@npm:5.17.0"
@@ -3692,6 +3707,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@testing-library/react@npm:^14.1.2":
+  version: 14.1.2
+  resolution: "@testing-library/react@npm:14.1.2"
+  dependencies:
+    "@babel/runtime": ^7.12.5
+    "@testing-library/dom": ^9.0.0
+    "@types/react-dom": ^18.0.0
+  peerDependencies:
+    react: ^18.0.0
+    react-dom: ^18.0.0
+  checksum: 0269903e53412cf96fddb55c8a97a9987a89c3308d71fa1418fe61c47d275445e7044c5387f57cf39b8cda319a41623dbad2cce7a17016aed3a9e85185aac75a
+  languageName: node
+  linkType: hard
+
+"@testing-library/user-event@npm:^14.5.1":
+  version: 14.5.2
+  resolution: "@testing-library/user-event@npm:14.5.2"
+  peerDependencies:
+    "@testing-library/dom": ">=7.21.4"
+  checksum: d76937dffcf0082fbf3bb89eb2b81a31bf5448048dd61c33928c5f10e33a58e035321d39145cefd469bb5a499c68a5b4086b22f1a44e3e7c7e817dc5f6782867
+  languageName: node
+  linkType: hard
+
 "@tootallnate/once@npm:2":
   version: 2.0.0
   resolution: "@tootallnate/once@npm:2.0.0"
@@ -3706,6 +3744,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/aria-query@npm:^5.0.1":
+  version: 5.0.4
+  resolution: "@types/aria-query@npm:5.0.4"
+  checksum: ad8b87e4ad64255db5f0a73bc2b4da9b146c38a3a8ab4d9306154334e0fc67ae64e76bfa298eebd1e71830591fb15987e5de7111bdb36a2221bdc379e3415fb0
+  languageName: node
+  linkType: hard
+
 "@types/axios@npm:^0.14.0":
   version: 0.14.0
   resolution: "@types/axios@npm:0.14.0"
@@ -3729,11 +3774,11 @@ __metadata:
   linkType: hard
 
 "@types/babel__generator@npm:*":
-  version: 7.6.7
-  resolution: "@types/babel__generator@npm:7.6.7"
+  version: 7.6.8
+  resolution: "@types/babel__generator@npm:7.6.8"
   dependencies:
     "@babel/types": ^7.0.0
-  checksum: 03e96ea327a5238f00c38394a05cc01619b9f5f3ea57371419a1c25cf21676a6d327daf802435819f8cb3b8fa10e938a94bcbaf79a38c132068c813a1807ff93
+  checksum: 5b332ea336a2efffbdeedb92b6781949b73498606ddd4205462f7d96dafd45ff3618770b41de04c4881e333dd84388bfb8afbdf6f2764cbd98be550d85c6bb48
   languageName: node
   linkType: hard
 
@@ -3748,11 +3793,11 @@ __metadata:
   linkType: hard
 
 "@types/babel__traverse@npm:*, @types/babel__traverse@npm:^7.0.6":
-  version: 7.20.4
-  resolution: "@types/babel__traverse@npm:7.20.4"
+  version: 7.20.5
+  resolution: "@types/babel__traverse@npm:7.20.5"
   dependencies:
     "@babel/types": ^7.20.7
-  checksum: f044ba80e00d07e46ee917c44f96cfc268fcf6d3871f7dfb8db8d3c6dab1508302f3e6bc508352a4a3ae627d2522e3fc500fa55907e0410a08e2e0902a8f3576
+  checksum: 608e0ab4fc31cd47011d98942e6241b34d461608c0c0e153377c5fd822c436c475f1ded76a56bfa76a1adf8d9266b727bbf9bfac90c4cb152c97f30dadc5b7e8
   languageName: node
   linkType: hard
 
@@ -3836,11 +3881,11 @@ __metadata:
   linkType: hard
 
 "@types/hast@npm:^2.0.0":
-  version: 2.3.8
-  resolution: "@types/hast@npm:2.3.8"
+  version: 2.3.9
+  resolution: "@types/hast@npm:2.3.9"
   dependencies:
     "@types/unist": ^2
-  checksum: 4c3b3efb7067d32a568a9bf5d2a7599f99ec08c2eaade3aaeb579b7a31bcdf8f6475f56c1ac5bc3f4e4e07b84a93a9b1cf1ef9a8b52b39e3deabea7989e5dd4b
+  checksum: 32a742021a973b1e23399f09a21325fda89bf55486068ef7c6364f5054b991cc8ab007f1134cc9d6c7030b6ed60633d70f7401dffb3dec8d10c997330d458a3f
   languageName: node
   linkType: hard
 
@@ -3982,18 +4027,18 @@ __metadata:
   linkType: hard
 
 "@types/node@npm:*":
-  version: 20.10.4
-  resolution: "@types/node@npm:20.10.4"
+  version: 20.10.6
+  resolution: "@types/node@npm:20.10.6"
   dependencies:
     undici-types: ~5.26.4
-  checksum: 054b296417e771ab524bea63cf3289559c6bdf290d45428f7cc68e9b00030ff7a0ece47b8c99a26b4f47a443919813bcf42beadff2f0bea7d8125fa541d92eb0
+  checksum: ada40e4ccbda3697dca88f8d13f4c996c493be6fbc15f5f5d3b91096d56bd700786a2c148a92a2b4c5d1f133379e63f754a786b3aebfc6a7d09fc7ea16dc017b
   languageName: node
   linkType: hard
 
 "@types/node@npm:^16.7.13":
-  version: 16.18.68
-  resolution: "@types/node@npm:16.18.68"
-  checksum: 094ae9ed80eed2af4bd34d551467e307f2ecb6efb0f8b872feebfb9da5ea4b446c5883c9abe2349f8ea2b78bdacd8726a946c27c2a246676c4c330e41ccb9284
+  version: 16.18.69
+  resolution: "@types/node@npm:16.18.69"
+  checksum: ac7076062e59169ac1907e9347d939ed5f79c6a3ec2a531fe7186caf2fcf8d66de9b87ad42d92c4dfa6cb44b1018ab89fef1e054a82af36deea04ba32a5a670a
   languageName: node
   linkType: hard
 
@@ -4045,7 +4090,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-dom@npm:^18.2.18":
+"@types/react-dom@npm:^18.0.0, @types/react-dom@npm:^18.2.18":
   version: 18.2.18
   resolution: "@types/react-dom@npm:18.2.18"
   dependencies:
@@ -4144,13 +4189,13 @@ __metadata:
   linkType: hard
 
 "@types/react@npm:^18":
-  version: 18.2.45
-  resolution: "@types/react@npm:18.2.45"
+  version: 18.2.46
+  resolution: "@types/react@npm:18.2.46"
   dependencies:
     "@types/prop-types": "*"
     "@types/scheduler": "*"
     csstype: ^3.0.2
-  checksum: 40b256bdce67b026348022b4f8616a693afdad88cf493b77f7b4e6c5f4b0e4ba13a6068e690b9b94572920840ff30d501ea3d8518e1f21cc8fb8204d4b140c8a
+  checksum: cb0e4dc7f41988a059e1246a19ec377101f5b16097ec4bf7000ef3c431ec0c8c873f40e95075821f908db1f4e3352775f0f18cea53dcad14dce67c0f5110f2bd
   languageName: node
   linkType: hard
 
@@ -4215,7 +4260,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/styled-components@npm:^5.1.19":
+"@types/styled-components@npm:^5.1.34":
   version: 5.1.34
   resolution: "@types/styled-components@npm:5.1.34"
   dependencies:
@@ -4226,10 +4271,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/stylis@npm:4.2.0":
+  version: 4.2.0
+  resolution: "@types/stylis@npm:4.2.0"
+  checksum: 02a47584acd2fcb664f7d8270a69686c83752bdfb855f804015d33116a2b09c0b2ac535213a4a7b6d3a78b2915b22b4024cce067ae979beee0e4f8f5fdbc26a9
+  languageName: node
+  linkType: hard
+
 "@types/stylis@npm:^4.0.2":
-  version: 4.2.4
-  resolution: "@types/stylis@npm:4.2.4"
-  checksum: 0734b4136192f97f4c8792ea41f1293091dfda53434ede08281fa42689d31f16cd1ad0e058de88c11980c18aae29e62a87027b235b98ab0cb237641b6ec44bcb
+  version: 4.2.5
+  resolution: "@types/stylis@npm:4.2.5"
+  checksum: 24f91719db5569979e9e2f197e050ef82e1fd72474e8dc45bca38d48ee56481eae0f0d4a7ac172540d7774b45a2a78d901a4c6d07bba77a33dbccff464ea3edf
   languageName: node
   linkType: hard
 
@@ -4610,11 +4662,11 @@ __metadata:
   linkType: hard
 
 "acorn@npm:^8.1.0, acorn@npm:^8.8.1, acorn@npm:^8.8.2, acorn@npm:^8.9.0":
-  version: 8.11.2
-  resolution: "acorn@npm:8.11.2"
+  version: 8.11.3
+  resolution: "acorn@npm:8.11.3"
   bin:
     acorn: bin/acorn
-  checksum: 818450408684da89423e3daae24e4dc9b68692db8ab49ea4569c7c5abb7a3f23669438bf129cc81dfdada95e1c9b944ee1bfca2c57a05a4dc73834a612fbf6a7
+  checksum: 76d8e7d559512566b43ab4aadc374f11f563f0a9e21626dd59cb2888444e9445923ae9f3699972767f18af61df89cd89f5eaaf772d1327b055b45cb829b4a88c
   languageName: node
   linkType: hard
 
@@ -4844,8 +4896,8 @@ __metadata:
   linkType: hard
 
 "antd-mobile@npm:^5.28.0":
-  version: 5.33.1
-  resolution: "antd-mobile@npm:5.33.1"
+  version: 5.34.0
+  resolution: "antd-mobile@npm:5.34.0"
   dependencies:
     "@floating-ui/dom": ^1.4.2
     "@rc-component/mini-decimal": ^1.1.0
@@ -4858,7 +4910,7 @@ __metadata:
     dayjs: ^1.11.7
     lodash: ^4.17.21
     rc-field-form: ~1.27.4
-    rc-util: ^5.30.0
+    rc-util: ^5.38.1
     react-is: ^18.2.0
     runes2: ^1.1.2
     staged-components: ^1.1.3
@@ -4866,27 +4918,26 @@ __metadata:
     use-sync-external-store: ^1.2.0
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: e57c563460ea5cc89a7e4d0a97d78c53a5532d7f5100c3766054b3a51c229e324bf111c51448b3e7b5dc019cbd26d59f8e2f467e322cfbd53228286db3da92ac
+  checksum: b30dae9507a6e0ee2fb15dea9a1700a8a625668604d6656530ceaff178efb96d16674c86080456af51a3ac6ac9d6c78f1abc3d375e1bdf3ffb18464a91af527c
   languageName: node
   linkType: hard
 
-"antd@npm:^5.12.2":
-  version: 5.12.2
-  resolution: "antd@npm:5.12.2"
+"antd@npm:^5.12.5":
+  version: 5.12.8
+  resolution: "antd@npm:5.12.8"
   dependencies:
-    "@ant-design/colors": ^7.0.0
-    "@ant-design/cssinjs": ^1.18.1
+    "@ant-design/colors": ^7.0.2
+    "@ant-design/cssinjs": ^1.18.2
     "@ant-design/icons": ^5.2.6
     "@ant-design/react-slick": ~1.0.2
-    "@babel/runtime": ^7.23.4
     "@ctrl/tinycolor": ^3.6.1
-    "@rc-component/color-picker": ~1.4.1
+    "@rc-component/color-picker": ~1.5.1
     "@rc-component/mutate-observer": ^1.1.0
     "@rc-component/tour": ~1.11.1
     "@rc-component/trigger": ^1.18.2
-    classnames: ^2.3.2
+    classnames: ^2.5.1
     copy-to-clipboard: ^3.3.3
-    dayjs: ^1.11.1
+    dayjs: ^1.11.10
     qrcode.react: ^3.1.0
     rc-cascader: ~3.20.0
     rc-checkbox: ~3.1.0
@@ -4896,13 +4947,13 @@ __metadata:
     rc-dropdown: ~4.1.0
     rc-field-form: ~1.41.0
     rc-image: ~7.5.1
-    rc-input: ~1.3.6
+    rc-input: ~1.3.11
     rc-input-number: ~8.4.0
     rc-mentions: ~2.9.1
     rc-menu: ~9.12.4
     rc-motion: ^2.9.0
     rc-notification: ~5.3.0
-    rc-pagination: ~4.0.3
+    rc-pagination: ~4.0.4
     rc-picker: ~3.14.6
     rc-progress: ~3.5.1
     rc-rate: ~2.12.0
@@ -4912,20 +4963,20 @@ __metadata:
     rc-slider: ~10.5.0
     rc-steps: ~6.0.1
     rc-switch: ~4.1.0
-    rc-table: ~7.36.0
+    rc-table: ~7.36.1
     rc-tabs: ~12.14.1
     rc-textarea: ~1.5.3
-    rc-tooltip: ~6.1.2
+    rc-tooltip: ~6.1.3
     rc-tree: ~5.8.2
     rc-tree-select: ~5.15.0
-    rc-upload: ~4.3.5
+    rc-upload: ~4.5.2
     rc-util: ^5.38.1
     scroll-into-view-if-needed: ^3.1.0
     throttle-debounce: ^5.0.0
   peerDependencies:
     react: ">=16.9.0"
     react-dom: ">=16.9.0"
-  checksum: de4daf00999b27a9414378c9c2d484ab5e99a0e344735ea45f7f938ba15565c939416308097cfcff19d24a90a7e780de965fa42cfb6258ac34f2f2e3a13161d3
+  checksum: 827334d691daccfbb59519f998b5718c20cffd8a1c718557ca7f59425a3524515a655129040b6d8b53b9e0a3c0c58c391c752f0573ccc738c41028c3c39c06ac
   languageName: node
   linkType: hard
 
@@ -4962,6 +5013,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"aria-query@npm:5.1.3":
+  version: 5.1.3
+  resolution: "aria-query@npm:5.1.3"
+  dependencies:
+    deep-equal: ^2.0.5
+  checksum: 929ff95f02857b650fb4cbcd2f41072eee2f46159a6605ea03bf63aa572e35ffdff43d69e815ddc462e16e07de8faba3978afc2813650b4448ee18c9895d982b
+  languageName: node
+  linkType: hard
+
 "aria-query@npm:^5.0.0, aria-query@npm:^5.3.0":
   version: 5.3.0
   resolution: "aria-query@npm:5.3.0"
@@ -5181,13 +5241,13 @@ __metadata:
   linkType: hard
 
 "axios@npm:*, axios@npm:^1.1.3, axios@npm:^1.6.2":
-  version: 1.6.2
-  resolution: "axios@npm:1.6.2"
+  version: 1.6.4
+  resolution: "axios@npm:1.6.4"
   dependencies:
-    follow-redirects: ^1.15.0
+    follow-redirects: ^1.15.4
     form-data: ^4.0.0
     proxy-from-env: ^1.1.0
-  checksum: 4a7429e2b784be0f2902ca2680964391eae7236faa3967715f30ea45464b98ae3f1c6f631303b13dfe721b17126b01f486c7644b9ef276bfc63112db9fd379f8
+  checksum: 48d8af8488ac7402fae312437c0189b3b609a472fca2f7fc796129c804d98520589b6317096eba8509711d49f855a3f620b6a24ff23acd73ac26433d0383b8f9
   languageName: node
   linkType: hard
 
@@ -5263,7 +5323,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-polyfill-corejs2@npm:^0.4.6":
+"babel-plugin-polyfill-corejs2@npm:^0.4.7":
   version: 0.4.7
   resolution: "babel-plugin-polyfill-corejs2@npm:0.4.7"
   dependencies:
@@ -5276,7 +5336,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-polyfill-corejs3@npm:^0.8.5":
+"babel-plugin-polyfill-corejs3@npm:^0.8.7":
   version: 0.8.7
   resolution: "babel-plugin-polyfill-corejs3@npm:0.8.7"
   dependencies:
@@ -5288,7 +5348,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-polyfill-regenerator@npm:^0.5.3":
+"babel-plugin-polyfill-regenerator@npm:^0.5.4":
   version: 0.5.4
   resolution: "babel-plugin-polyfill-regenerator@npm:0.5.4"
   dependencies:
@@ -5299,21 +5359,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-styled-components@npm:>= 1.12.0":
-  version: 2.1.4
-  resolution: "babel-plugin-styled-components@npm:2.1.4"
-  dependencies:
-    "@babel/helper-annotate-as-pure": ^7.22.5
-    "@babel/helper-module-imports": ^7.22.5
-    "@babel/plugin-syntax-jsx": ^7.22.5
-    lodash: ^4.17.21
-    picomatch: ^2.3.1
-  peerDependencies:
-    styled-components: ">= 2"
-  checksum: d791aed68d975dae4f73055f86cd47afa99cb402b8113acdaf5678c8b6fba2cbc15543f2debe8ed09becb198aae8be2adfe268ad41f4bca917288e073a622bf8
-  languageName: node
-  linkType: hard
-
 "babel-plugin-transform-react-remove-prop-types@npm:^0.4.24":
   version: 0.4.24
   resolution: "babel-plugin-transform-react-remove-prop-types@npm:0.4.24"
@@ -5646,8 +5691,8 @@ __metadata:
   linkType: hard
 
 "cacache@npm:^18.0.0":
-  version: 18.0.1
-  resolution: "cacache@npm:18.0.1"
+  version: 18.0.2
+  resolution: "cacache@npm:18.0.2"
   dependencies:
     "@npmcli/fs": ^3.1.0
     fs-minipass: ^3.0.0
@@ -5661,7 +5706,7 @@ __metadata:
     ssri: ^10.0.0
     tar: ^6.1.11
     unique-filename: ^3.0.0
-  checksum: 5a0b3b2ea451a0379814dc1d3c81af48c7c6db15cd8f7d72e028501ae0036a599a99bbac9687bfec307afb2760808d1c7708e9477c8c70d2b166e7d80b162a23
+  checksum: 0250df80e1ad0c828c956744850c5f742c24244e9deb5b7dc81bca90f8c10e011e132ecc58b64497cc1cad9a98968676147fb6575f4f94722f7619757b17a11b
   languageName: node
   linkType: hard
 
@@ -5722,9 +5767,9 @@ __metadata:
   linkType: hard
 
 "caniuse-lite@npm:^1.0.30001565":
-  version: 1.0.30001570
-  resolution: "caniuse-lite@npm:1.0.30001570"
-  checksum: 460be2c7a9b1c8a83b6aae4226661c276d9dada6c84209dee547699cf4b28030b9d1fc29ddd7626acee77412b6401993878ea0ef3eadbf3a63ded9034896ae20
+  version: 1.0.30001574
+  resolution: "caniuse-lite@npm:1.0.30001574"
+  checksum: 4064719755371a9716446ee79714ff5cee347861492d6325c2e3db00c37cb27f184742f53f2b6e4c15cc2e1a47fae32cc44c9b15e957a9290982bf4108933245
   languageName: node
   linkType: hard
 
@@ -5759,7 +5804,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chalk@npm:4, chalk@npm:^4.0.0, chalk@npm:^4.0.2, chalk@npm:^4.1.1":
+"chalk@npm:4, chalk@npm:^4.0.0, chalk@npm:^4.0.2, chalk@npm:^4.1.0, chalk@npm:^4.1.1":
   version: 4.1.2
   resolution: "chalk@npm:4.1.2"
   dependencies:
@@ -5861,10 +5906,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"classnames@npm:2.x, classnames@npm:^2.2.1, classnames@npm:^2.2.3, classnames@npm:^2.2.5, classnames@npm:^2.2.6, classnames@npm:^2.3.1, classnames@npm:^2.3.2":
-  version: 2.3.2
-  resolution: "classnames@npm:2.3.2"
-  checksum: 2c62199789618d95545c872787137262e741f9db13328e216b093eea91c85ef2bfb152c1f9e63027204e2559a006a92eb74147d46c800a9f96297ae1d9f96f4e
+"classnames@npm:2.x, classnames@npm:^2.2.1, classnames@npm:^2.2.3, classnames@npm:^2.2.5, classnames@npm:^2.2.6, classnames@npm:^2.3.1, classnames@npm:^2.3.2, classnames@npm:^2.5.1":
+  version: 2.5.1
+  resolution: "classnames@npm:2.5.1"
+  checksum: da424a8a6f3a96a2e87d01a432ba19315503294ac7e025f9fece656db6b6a0f7b5003bb1fbb51cbb0d9624d964f1b9bb35a51c73af9b2434c7b292c42231c1e5
   languageName: node
   linkType: hard
 
@@ -5936,25 +5981,25 @@ __metadata:
   linkType: hard
 
 "clsx@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "clsx@npm:2.0.0"
-  checksum: a2cfb2351b254611acf92faa0daf15220f4cd648bdf96ce369d729813b85336993871a4bf6978ddea2b81b5a130478339c20d9d0b5c6fc287e5147f0c059276e
+  version: 2.1.0
+  resolution: "clsx@npm:2.1.0"
+  checksum: 43fefc29b6b49c9476fbce4f8b1cc75c27b67747738e598e6651dd40d63692135dc60b18fa1c5b78a2a9ba8ae6fd2055a068924b94e20b42039bd53b78b98e1d
   languageName: node
   linkType: hard
 
-"cnchar-types@npm:^3.2.4":
-  version: 3.2.4
-  resolution: "cnchar-types@npm:3.2.4"
-  checksum: 5a79f30632cbc34e94c1fa5a81efa535956a1d9ad2c6f0dcf4f5fdaa20cbe3983056769806b04a37ed6e9aa2e80f529eaa90436ebb6faac7c8341e4a9440bb4d
+"cnchar-types@npm:^3.2.5":
+  version: 3.2.5
+  resolution: "cnchar-types@npm:3.2.5"
+  checksum: fbbe186b03c20c50499d37027ae3fbeea695d4f2bd6144baf55a35e890f892ae59d17e1b6918c13addf5f134c8e28dba490a2ad2a2f79cf0eb542b0b3c3343cb
   languageName: node
   linkType: hard
 
 "cnchar@npm:^3.2.4":
-  version: 3.2.4
-  resolution: "cnchar@npm:3.2.4"
+  version: 3.2.5
+  resolution: "cnchar@npm:3.2.5"
   dependencies:
-    cnchar-types: ^3.2.4
-  checksum: 536502ce4e5e3087ce33658fe250350bf247f8a546b5bb7e67fe760ee122618a7cdc5d3019171d326b7123afc05ddc573f70adf949587375c70685e23a95c172
+    cnchar-types: ^3.2.5
+  checksum: b12317386642a04b41f791631d7af25cfaa9251572083b102c684a786ac280c61dedcfab31e870acaa1be4498580f1794725ff965c40e9e2fe1fcfde99ef6e1b
   languageName: node
   linkType: hard
 
@@ -6186,18 +6231,18 @@ __metadata:
   linkType: hard
 
 "core-js-compat@npm:^3.31.0, core-js-compat@npm:^3.33.1":
-  version: 3.34.0
-  resolution: "core-js-compat@npm:3.34.0"
+  version: 3.35.0
+  resolution: "core-js-compat@npm:3.35.0"
   dependencies:
     browserslist: ^4.22.2
-  checksum: 6281f7f57a72f254c06611ec088445e11cf84e0b4edfb5f43dece1a1ff8b0ed0e81ed0bc291024761cd90c39d0f007d8bc46548265139808081d311c7cbc9c81
+  checksum: 64c41ce6870aa9130b9d0cb8f00c05204094f46db7e345d520ec2e38f8b6e1d51e921d4974ceb880948f19c0a79e5639e55be0e56f88ea20e32e9a6274da7f82
   languageName: node
   linkType: hard
 
 "core-js@npm:^3.0.1, core-js@npm:^3.25.2":
-  version: 3.34.0
-  resolution: "core-js@npm:3.34.0"
-  checksum: 26b0d103716b33fc660ee8737da7bc9475fbc655f93bbf1360ab692966449d18f2fc393805095937283db9f919ca2aa5c88d86d16f2846217983ad7da707e31e
+  version: 3.35.0
+  resolution: "core-js@npm:3.35.0"
+  checksum: 25c224aca3df012b98f08f13ccbd8171ef5852acd33fd5e58e106d27f5f0c97de2fdbc520f0b4364d26253caf2deb3e5d265310f57d2a66ae6cc922850e649f0
   languageName: node
   linkType: hard
 
@@ -6409,7 +6454,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"css-to-react-native@npm:^3.0.0":
+"css-to-react-native@npm:3.2.0":
   version: 3.2.0
   resolution: "css-to-react-native@npm:3.2.0"
   dependencies:
@@ -6430,7 +6475,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"css-tree@npm:^2.2.1":
+"css-tree@npm:^2.3.1":
   version: 2.3.1
   resolution: "css-tree@npm:2.3.1"
   dependencies:
@@ -6471,15 +6516,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"csso@npm:5.0.5":
-  version: 5.0.5
-  resolution: "csso@npm:5.0.5"
-  dependencies:
-    css-tree: ~2.2.0
-  checksum: 0ad858d36bf5012ed243e9ec69962a867509061986d2ee07cc040a4b26e4d062c00d4c07e5ba8d430706ceb02dd87edd30a52b5937fd45b1b6f2119c4993d59a
-  languageName: node
-  linkType: hard
-
 "csso@npm:^4.2.0":
   version: 4.2.0
   resolution: "csso@npm:4.2.0"
@@ -6489,6 +6525,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"csso@npm:^5.0.5":
+  version: 5.0.5
+  resolution: "csso@npm:5.0.5"
+  dependencies:
+    css-tree: ~2.2.0
+  checksum: 0ad858d36bf5012ed243e9ec69962a867509061986d2ee07cc040a4b26e4d062c00d4c07e5ba8d430706ceb02dd87edd30a52b5937fd45b1b6f2119c4993d59a
+  languageName: node
+  linkType: hard
+
 "cssom@npm:^0.4.1":
   version: 0.4.4
   resolution: "cssom@npm:0.4.4"
@@ -6526,7 +6571,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"csstype@npm:^3.0.2, csstype@npm:^3.1.2":
+"csstype@npm:^3.0.2, csstype@npm:^3.1.2, csstype@npm:^3.1.3":
   version: 3.1.3
   resolution: "csstype@npm:3.1.3"
   checksum: 8db785cc92d259102725b3c694ec0c823f5619a84741b5c7991b8ad135dfaa66093038a1cc63e03361a6cd28d122be48f2106ae72334e067dd619a51f49eddf7
@@ -6563,12 +6608,12 @@ __metadata:
   linkType: hard
 
 "cytoscape@npm:^3.23.0":
-  version: 3.28.0
-  resolution: "cytoscape@npm:3.28.0"
+  version: 3.28.1
+  resolution: "cytoscape@npm:3.28.1"
   dependencies:
     heap: ^0.2.6
     lodash: ^4.17.21
-  checksum: 7db2d05fd53b507356d321af300ea7c0fdc334ab1478a3f593aad94bb7d607aad10f7c2627c282156b8b1c56dca647420ccb5d78011282cdc2ee2a4487573b32
+  checksum: d9fcb14e909931ebead0fffaf230be7302156166372b7f0d446fea96bc5dfed2c36024842a8d80cd8817d6120125422beaee4a1e9ece4ba53a9addc880116afd
   languageName: node
   linkType: hard
 
@@ -6982,7 +7027,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dayjs@npm:1.x, dayjs@npm:^1.11.1, dayjs@npm:^1.11.7, dayjs@npm:^1.9.1":
+"dayjs@npm:1.x, dayjs@npm:^1.11.10, dayjs@npm:^1.11.7, dayjs@npm:^1.9.1":
   version: 1.11.10
   resolution: "dayjs@npm:1.11.10"
   checksum: a6b5a3813b8884f5cd557e2e6b7fa569f4c5d0c97aca9558e38534af4f2d60daafd3ff8c2000fed3435cfcec9e805bcebd99f90130c6d1c5ef524084ced588c4
@@ -7059,6 +7104,32 @@ __metadata:
   languageName: node
   linkType: hard
 
+"deep-equal@npm:^2.0.5":
+  version: 2.2.3
+  resolution: "deep-equal@npm:2.2.3"
+  dependencies:
+    array-buffer-byte-length: ^1.0.0
+    call-bind: ^1.0.5
+    es-get-iterator: ^1.1.3
+    get-intrinsic: ^1.2.2
+    is-arguments: ^1.1.1
+    is-array-buffer: ^3.0.2
+    is-date-object: ^1.0.5
+    is-regex: ^1.1.4
+    is-shared-array-buffer: ^1.0.2
+    isarray: ^2.0.5
+    object-is: ^1.1.5
+    object-keys: ^1.1.1
+    object.assign: ^4.1.4
+    regexp.prototype.flags: ^1.5.1
+    side-channel: ^1.0.4
+    which-boxed-primitive: ^1.0.2
+    which-collection: ^1.0.1
+    which-typed-array: ^1.1.13
+  checksum: ee8852f23e4d20a5626c13b02f415ba443a1b30b4b3d39eaf366d59c4a85e6545d7ec917db44d476a85ae5a86064f7e5f7af7479f38f113995ba869f3a1ddc53
+  languageName: node
+  linkType: hard
+
 "deep-is@npm:^0.1.3, deep-is@npm:~0.1.3":
   version: 0.1.4
   resolution: "deep-is@npm:0.1.4"
@@ -7210,7 +7281,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dom-accessibility-api@npm:^0.5.6":
+"dom-accessibility-api@npm:^0.5.6, dom-accessibility-api@npm:^0.5.9":
   version: 0.5.16
   resolution: "dom-accessibility-api@npm:0.5.16"
   checksum: 005eb283caef57fc1adec4d5df4dd49189b628f2f575af45decb210e04d634459e3f1ee64f18b41e2dcf200c844bc1d9279d80807e686a30d69a4756151ad248
@@ -7300,9 +7371,9 @@ __metadata:
   linkType: hard
 
 "dompurify@npm:^3.0.5":
-  version: 3.0.6
-  resolution: "dompurify@npm:3.0.6"
-  checksum: e5c6cdc5fe972a9d0859d939f1d86320de275be00bbef7bd5591c80b1e538935f6ce236624459a1b0c84ecd7c6a1e248684aa4637512659fccc0ce7c353828a6
+  version: 3.0.7
+  resolution: "dompurify@npm:3.0.7"
+  checksum: 4c1381d4c5d28a42ff3b09238e44fdd88078015ab7c451b532305f9c8c45d85cf8e4529767502ff3eac1b6127b5e39cc1506ba0ea1ec17b02cc1d8f73b71a1b1
   languageName: node
   linkType: hard
 
@@ -7407,9 +7478,9 @@ __metadata:
   linkType: hard
 
 "electron-to-chromium@npm:^1.4.601":
-  version: 1.4.612
-  resolution: "electron-to-chromium@npm:1.4.612"
-  checksum: fbb044289dcea34246254520b05245549013c68c7cc25ce69604ebd496a59d3b41defd10be4a2fca2d5e6e46d92481736e3d1498093e28c96cbe86e48d19634b
+  version: 1.4.622
+  resolution: "electron-to-chromium@npm:1.4.622"
+  checksum: 38da56a5f723626880c1790555a15c26b40b1470b68298dceb246f3fdbfc635753d924a331cd9b27d21f8f2b4ae63a2bbf9aae58f248d214bd6d2520a8cda7bc
   languageName: node
   linkType: hard
 
@@ -7581,6 +7652,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"es-get-iterator@npm:^1.1.3":
+  version: 1.1.3
+  resolution: "es-get-iterator@npm:1.1.3"
+  dependencies:
+    call-bind: ^1.0.2
+    get-intrinsic: ^1.1.3
+    has-symbols: ^1.0.3
+    is-arguments: ^1.1.1
+    is-map: ^2.0.2
+    is-set: ^2.0.2
+    is-string: ^1.0.7
+    isarray: ^2.0.5
+    stop-iteration-iterator: ^1.0.0
+  checksum: 8fa118da42667a01a7c7529f8a8cca514feeff243feec1ce0bb73baaa3514560bd09d2b3438873cf8a5aaec5d52da248131de153b28e2638a061b6e4df13267d
+  languageName: node
+  linkType: hard
+
 "es-iterator-helpers@npm:^1.0.12, es-iterator-helpers@npm:^1.0.15":
   version: 1.0.15
   resolution: "es-iterator-helpers@npm:1.0.15"
@@ -7845,8 +7933,8 @@ __metadata:
   linkType: hard
 
 "eslint-plugin-import@npm:^2.25.3":
-  version: 2.29.0
-  resolution: "eslint-plugin-import@npm:2.29.0"
+  version: 2.29.1
+  resolution: "eslint-plugin-import@npm:2.29.1"
   dependencies:
     array-includes: ^3.1.7
     array.prototype.findlastindex: ^1.2.3
@@ -7864,10 +7952,10 @@ __metadata:
     object.groupby: ^1.0.1
     object.values: ^1.1.7
     semver: ^6.3.1
-    tsconfig-paths: ^3.14.2
+    tsconfig-paths: ^3.15.0
   peerDependencies:
     eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8
-  checksum: 19ee541fb95eb7a796f3daebe42387b8d8262bbbcc4fd8a6e92f63a12035f3d2c6cb8bc0b6a70864fa14b1b50ed6b8e6eed5833e625e16cb6bb98b665beff269
+  checksum: e65159aef808136d26d029b71c8c6e4cb5c628e65e5de77f1eb4c13a379315ae55c9c3afa847f43f4ff9df7e54515c77ffc6489c6a6f81f7dd7359267577468c
   languageName: node
   linkType: hard
 
@@ -8020,13 +8108,13 @@ __metadata:
   linkType: hard
 
 "eslint@npm:^8.0.0":
-  version: 8.55.0
-  resolution: "eslint@npm:8.55.0"
+  version: 8.56.0
+  resolution: "eslint@npm:8.56.0"
   dependencies:
     "@eslint-community/eslint-utils": ^4.2.0
     "@eslint-community/regexpp": ^4.6.1
     "@eslint/eslintrc": ^2.1.4
-    "@eslint/js": 8.55.0
+    "@eslint/js": 8.56.0
     "@humanwhocodes/config-array": ^0.11.13
     "@humanwhocodes/module-importer": ^1.0.1
     "@nodelib/fs.walk": ^1.2.8
@@ -8063,7 +8151,7 @@ __metadata:
     text-table: ^0.2.0
   bin:
     eslint: bin/eslint.js
-  checksum: 83f82a604559dc1faae79d28fdf3dfc9e592ca221052e2ea516e1b379b37e77e4597705a16880e2f5ece4f79087c1dd13fd7f6e9746f794a401175519db18b41
+  checksum: 883436d1e809b4a25d9eb03d42f584b84c408dbac28b0019f6ea07b5177940bf3cca86208f749a6a1e0039b63e085ee47aca1236c30721e91f0deef5cc5a5136
   languageName: node
   linkType: hard
 
@@ -8370,11 +8458,11 @@ __metadata:
   linkType: hard
 
 "fastq@npm:^1.6.0":
-  version: 1.15.0
-  resolution: "fastq@npm:1.15.0"
+  version: 1.16.0
+  resolution: "fastq@npm:1.16.0"
   dependencies:
     reusify: ^1.0.4
-  checksum: 0170e6bfcd5d57a70412440b8ef600da6de3b2a6c5966aeaf0a852d542daff506a0ee92d6de7679d1de82e644bce69d7a574a6c93f0b03964b5337eed75ada1a
+  checksum: 1d40ed1f100ae625e5720484e8602b7ad07649370f1cbc3e34a6b9630a0bfed6946bab0322d8a368a1e3cde87bb9bbb8d3bc2ae01a0c1f022fac1d07c04e4feb
   languageName: node
   linkType: hard
 
@@ -8512,13 +8600,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"follow-redirects@npm:^1.0.0, follow-redirects@npm:^1.14.9, follow-redirects@npm:^1.15.0":
-  version: 1.15.3
-  resolution: "follow-redirects@npm:1.15.3"
+"follow-redirects@npm:^1.0.0, follow-redirects@npm:^1.14.9, follow-redirects@npm:^1.15.4":
+  version: 1.15.4
+  resolution: "follow-redirects@npm:1.15.4"
   peerDependenciesMeta:
     debug:
       optional: true
-  checksum: 584da22ec5420c837bd096559ebfb8fe69d82512d5585004e36a3b4a6ef6d5905780e0c74508c7b72f907d1fa2b7bd339e613859e9c304d0dc96af2027fd0231
+  checksum: e178d1deff8b23d5d24ec3f7a94cde6e47d74d0dc649c35fc9857041267c12ec5d44650a0c5597ef83056ada9ea6ca0c30e7c4f97dbf07d035086be9e6a5b7b6
   languageName: node
   linkType: hard
 
@@ -8785,20 +8873,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"glob@npm:7.1.6":
-  version: 7.1.6
-  resolution: "glob@npm:7.1.6"
-  dependencies:
-    fs.realpath: ^1.0.0
-    inflight: ^1.0.4
-    inherits: 2
-    minimatch: ^3.0.4
-    once: ^1.3.0
-    path-is-absolute: ^1.0.0
-  checksum: 351d549dd90553b87c2d3f90ce11aed9e1093c74130440e7ae0592e11bbcd2ce7f0ebb8ba6bfe63aaf9b62166a7f4c80cb84490ae5d78408bb2572bf7d4ee0a6
-  languageName: node
-  linkType: hard
-
 "glob@npm:^10.2.2, glob@npm:^10.3.10":
   version: 10.3.10
   resolution: "glob@npm:10.3.10"
@@ -9137,7 +9211,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hoist-non-react-statics@npm:^3.0.0, hoist-non-react-statics@npm:^3.1.0, hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.2":
+"hoist-non-react-statics@npm:^3.1.0, hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.2":
   version: 3.3.2
   resolution: "hoist-non-react-statics@npm:3.3.2"
   dependencies:
@@ -9147,9 +9221,9 @@ __metadata:
   linkType: hard
 
 "hotkeys-js@npm:^3.8.7":
-  version: 3.13.2
-  resolution: "hotkeys-js@npm:3.13.2"
-  checksum: 9c44e02a52273bc4ae489a8efd397acfac8ac6f39d72a808ef7c30726d5d1f92ecf186130b2392eea36290a7524b3ed9834c7281c6e86d9475e20c4957147ff5
+  version: 3.13.3
+  resolution: "hotkeys-js@npm:3.13.3"
+  checksum: fdd2b088671dbf2b2434ba40a4d604bf3f5cbe2f121233f8474f493a557d8a1cced0f1cb0c812b62e34ee9c2ad4ec6c4fd25035aa836ebe12da5dfa11f5afc2d
   languageName: node
   linkType: hard
 
@@ -9452,7 +9526,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"internal-slot@npm:^1.0.5":
+"internal-slot@npm:^1.0.4, internal-slot@npm:^1.0.5":
   version: 1.0.6
   resolution: "internal-slot@npm:1.0.6"
   dependencies:
@@ -9711,13 +9785,13 @@ __metadata:
   linkType: hard
 
 "is-lite@npm:^1.2.0":
-  version: 1.2.0
-  resolution: "is-lite@npm:1.2.0"
-  checksum: 3b891a4fca8bc1c0db7656035e0e29cee3f7c2eee91f414035eab40f037c92b97b94d2eb1a1469ba0eb584649655f62119e02dff86236f9d408e2eff387c56bc
+  version: 1.2.1
+  resolution: "is-lite@npm:1.2.1"
+  checksum: 44ecdfce4a40714c97a59c3ee98dfd525c552cebdb253a5c409f6248ad4a62c050f5029a022d6153ddb415775c50655d070c670d8d70b084ebc598ca35c899c6
   languageName: node
   linkType: hard
 
-"is-map@npm:^2.0.1":
+"is-map@npm:^2.0.1, is-map@npm:^2.0.2":
   version: 2.0.2
   resolution: "is-map@npm:2.0.2"
   checksum: ace3d0ecd667bbdefdb1852de601268f67f2db725624b1958f279316e13fecb8fa7df91fd60f690d7417b4ec180712f5a7ee967008e27c65cfd475cc84337728
@@ -9817,7 +9891,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-set@npm:^2.0.1":
+"is-set@npm:^2.0.1, is-set@npm:^2.0.2":
   version: 2.0.2
   resolution: "is-set@npm:2.0.2"
   checksum: b64343faf45e9387b97a6fd32be632ee7b269bd8183701f3b3f5b71a7cf00d04450ed8669d0bd08753e08b968beda96fca73a10fd0ff56a32603f64deba55a57
@@ -11437,6 +11511,8 @@ __metadata:
     "@lottiefiles/react-lottie-player": ^3.5.3
     "@rollup/plugin-typescript": ^8.5.0
     "@testing-library/jest-dom": ^5.16.5
+    "@testing-library/react": ^14.1.2
+    "@testing-library/user-event": ^14.5.1
     "@types/file-saver": ^2.0.5
     "@types/jest": ^29.2.2
     "@types/mime": ^2.0.3
@@ -11446,7 +11522,7 @@ __metadata:
     "@types/react-resizable": ^3.0.5
     "@types/react-router-dom": ^5.3.2
     "@types/shelljs": ^0.8.11
-    "@types/styled-components": ^5.1.19
+    "@types/styled-components": ^5.1.34
     "@types/stylis": ^4.0.2
     "@types/tern": 0.23.4
     "@types/ua-parser-js": ^0.7.36
@@ -11527,10 +11603,10 @@ __metadata:
     "@fortawesome/free-solid-svg-icons": ^6.4.0
     "@fortawesome/react-fontawesome": latest
     "@manaflair/redux-batch": ^1.0.0
-    "@rjsf/antd": ^5.10.0
-    "@rjsf/core": ^5.10.0
-    "@rjsf/utils": ^5.10.0
-    "@rjsf/validator-ajv8": ^5.10.0
+    "@rjsf/antd": ^5.15.1
+    "@rjsf/core": ^5.15.1
+    "@rjsf/utils": ^5.15.1
+    "@rjsf/validator-ajv8": ^5.15.1
     "@types/core-js": ^2.5.5
     "@types/intl": ^1.2.1
     "@types/lodash": ^4.14.194
@@ -11547,7 +11623,7 @@ __metadata:
     agora-access-token: ^2.0.4
     agora-rtc-sdk-ng: ^4.19.0
     agora-rtm-sdk: ^1.5.1
-    antd: ^5.12.2
+    antd: ^5.12.5
     axios: ^1.6.2
     buffer: ^6.0.3
     clsx: ^2.0.0
@@ -11609,7 +11685,7 @@ __metadata:
     rollup-plugin-visualizer: ^5.9.2
     simplebar-react: 2.3.6
     sql-formatter: ^8.2.0
-    styled-components: ^5.3.3
+    styled-components: ^6.1.6
     stylis: ^4.1.1
     tern: ^0.24.3
     typescript: ^4.8.4
@@ -11674,6 +11750,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lz-string@npm:^1.5.0":
+  version: 1.5.0
+  resolution: "lz-string@npm:1.5.0"
+  bin:
+    lz-string: bin/bin.js
+  checksum: 1ee98b4580246fd90dd54da6e346fb1caefcf05f677c686d9af237a157fdea3fd7c83a4bc58f858cd5b10a34d27afe0fdcbd0505a47e0590726a873dc8b8f65d
+  languageName: node
+  linkType: hard
+
 "magic-string@npm:^0.22.5":
   version: 0.22.5
   resolution: "magic-string@npm:0.22.5"
@@ -11783,11 +11868,11 @@ __metadata:
   linkType: hard
 
 "markdown-to-jsx@npm:^7.3.2":
-  version: 7.3.2
-  resolution: "markdown-to-jsx@npm:7.3.2"
+  version: 7.4.0
+  resolution: "markdown-to-jsx@npm:7.4.0"
   peerDependencies:
     react: ">= 0.14.0"
-  checksum: 8885c6343b71570b0a7ec16cd85a49b853a830234790ee7430e2517ea5d8d361ff138bd52147f650790f3e7b3a28a15c755fc16f8856dd01ddf09a6161782e06
+  checksum: 59959d14d7927ed8a97e42d39771e2b445b90fa098477fb6ab040f044d230517dc4a95ba38a4f924cfc965a96b32211d93def150a6184f0e51d2cefdc8cb415d
   languageName: node
   linkType: hard
 
@@ -12828,11 +12913,11 @@ __metadata:
   linkType: hard
 
 "npm-run-path@npm:^5.1.0":
-  version: 5.1.0
-  resolution: "npm-run-path@npm:5.1.0"
+  version: 5.2.0
+  resolution: "npm-run-path@npm:5.2.0"
   dependencies:
     path-key: ^4.0.0
-  checksum: dc184eb5ec239d6a2b990b43236845332ef12f4e0beaa9701de724aa797fe40b6bbd0157fb7639d24d3ab13f5d5cf22d223a19c6300846b8126f335f788bee66
+  checksum: c5325e016014e715689c4014f7e0be16cc4cbf529f32a1723e511bc4689b5f823b704d2bca61ac152ce2bda65e0205dc8b3ba0ec0f5e4c3e162d302f6f5b9efb
   languageName: node
   linkType: hard
 
@@ -13376,14 +13461,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss@npm:8.4.31":
+  version: 8.4.31
+  resolution: "postcss@npm:8.4.31"
+  dependencies:
+    nanoid: ^3.3.6
+    picocolors: ^1.0.0
+    source-map-js: ^1.0.2
+  checksum: 1d8611341b073143ad90486fcdfeab49edd243377b1f51834dc4f6d028e82ce5190e4f11bb2633276864503654fb7cab28e67abdc0fbf9d1f88cad4a0ff0beea
+  languageName: node
+  linkType: hard
+
 "postcss@npm:^8.4.27":
-  version: 8.4.32
-  resolution: "postcss@npm:8.4.32"
+  version: 8.4.33
+  resolution: "postcss@npm:8.4.33"
   dependencies:
     nanoid: ^3.3.7
     picocolors: ^1.0.0
     source-map-js: ^1.0.2
-  checksum: 220d9d0bf5d65be7ed31006c523bfb11619461d296245c1231831f90150aeb4a31eab9983ac9c5c89759a3ca8b60b3e0d098574964e1691673c3ce5c494305ae
+  checksum: 6f98b2af4b76632a3de20c4f47bf0e984a1ce1a531cf11adcb0b1d63a6cbda0aae4165e578b66c32ca4879038e3eaad386a6be725a8fb4429c78e3c1ab858fe9
   languageName: node
   linkType: hard
 
@@ -13417,6 +13513,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pretty-format@npm:^27.0.2":
+  version: 27.5.1
+  resolution: "pretty-format@npm:27.5.1"
+  dependencies:
+    ansi-regex: ^5.0.1
+    ansi-styles: ^5.0.0
+    react-is: ^17.0.1
+  checksum: cf610cffcb793885d16f184a62162f2dd0df31642d9a18edf4ca298e909a8fe80bdbf556d5c9573992c102ce8bf948691da91bf9739bee0ffb6e79c8a8a6e088
+  languageName: node
+  linkType: hard
+
 "pretty-format@npm:^29.0.0, pretty-format@npm:^29.7.0":
   version: 29.7.0
   resolution: "pretty-format@npm:29.7.0"
@@ -13812,7 +13919,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rc-input@npm:~1.3.5, rc-input@npm:~1.3.6":
+"rc-input@npm:~1.3.11, rc-input@npm:~1.3.5":
   version: 1.3.11
   resolution: "rc-input@npm:1.3.11"
   dependencies:
@@ -13905,9 +14012,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rc-pagination@npm:~4.0.3":
-  version: 4.0.3
-  resolution: "rc-pagination@npm:4.0.3"
+"rc-pagination@npm:~4.0.4":
+  version: 4.0.4
+  resolution: "rc-pagination@npm:4.0.4"
   dependencies:
     "@babel/runtime": ^7.10.1
     classnames: ^2.3.2
@@ -13915,7 +14022,7 @@ __metadata:
   peerDependencies:
     react: ">=16.9.0"
     react-dom: ">=16.9.0"
-  checksum: 7b238f0c9c2d7e3d0d42b54007ca3e60adae67b04455c186a3c9038c52257bdd1ff90690f0ca0087233b35a5132207a0c197e93caeb301ec41085d8162e052a3
+  checksum: 2ff6f2dd6ad0b855d1e747d09534f2efe9a124af4ff4cd5d5550a6cae9392879c06f471d4ee29d2a72c2c416f89dac6e43a7788650db5b8e54001affba2b172c
   languageName: node
   linkType: hard
 
@@ -14084,9 +14191,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rc-table@npm:~7.36.0":
-  version: 7.36.0
-  resolution: "rc-table@npm:7.36.0"
+"rc-table@npm:~7.36.1":
+  version: 7.36.1
+  resolution: "rc-table@npm:7.36.1"
   dependencies:
     "@babel/runtime": ^7.10.1
     "@rc-component/context": ^1.4.0
@@ -14097,7 +14204,7 @@ __metadata:
   peerDependencies:
     react: ">=16.9.0"
     react-dom: ">=16.9.0"
-  checksum: 4db1fbd348bd2ebde767f87e047abd07c60a2ddd054f74bf3193a6bf789714512c5aca36e946ee7491d08b202b625a652c7ac9f48d213f034816a6ad6d8dcffe
+  checksum: b4441944eb0feb011091caeb433d455dbf52c8c16b39b0730a48bce05b28ce8928344053c8b9eb5f3dab60f1590edcfaeca05b5cf6e9c77832cf379e6f1568c7
   languageName: node
   linkType: hard
 
@@ -14135,9 +14242,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rc-tooltip@npm:~6.1.2":
-  version: 6.1.2
-  resolution: "rc-tooltip@npm:6.1.2"
+"rc-tooltip@npm:~6.1.3":
+  version: 6.1.3
+  resolution: "rc-tooltip@npm:6.1.3"
   dependencies:
     "@babel/runtime": ^7.11.2
     "@rc-component/trigger": ^1.18.0
@@ -14145,7 +14252,7 @@ __metadata:
   peerDependencies:
     react: ">=16.9.0"
     react-dom: ">=16.9.0"
-  checksum: 0450fe0bac954fe13cc1117cef1e632ec65e5fbb7bc9d31069925e7df026ff39211cad95509ec93500541bf55e70efaf0ee99694fdd18deac7e804b1b3f72240
+  checksum: f67cf4e409d110f9f4098807303bd4590297f45ffb21d20f3c59a93de45b38c477eeee346e78b9c2e07bffd2ed53e22f435023113a08b553ed10e269754507e2
   languageName: node
   linkType: hard
 
@@ -14197,9 +14304,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rc-upload@npm:~4.3.5":
-  version: 4.3.5
-  resolution: "rc-upload@npm:4.3.5"
+"rc-upload@npm:~4.5.2":
+  version: 4.5.2
+  resolution: "rc-upload@npm:4.5.2"
   dependencies:
     "@babel/runtime": ^7.18.3
     classnames: ^2.2.5
@@ -14207,7 +14314,7 @@ __metadata:
   peerDependencies:
     react: ">=16.9.0"
     react-dom: ">=16.9.0"
-  checksum: 00758b3f34d5850a37cba8e1b4d7c5e2e60c8bd21e44b42c4ac2fe5f641575464e4209d7b9bdbdab70e46ff55705f5be71b1df7f13bbe15fd5950e895474c0cd
+  checksum: 5a7e1942657d91d78dab3a84367629d8dac7c3dcd961d8839d1d481e982504de2944c74c5b79fb63e3971ff84bc667e841e0e4305af10b37615c185e6d92d644
   languageName: node
   linkType: hard
 
@@ -14387,7 +14494,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-is@npm:^17.0.2":
+"react-is@npm:^17.0.1, react-is@npm:^17.0.2":
   version: 17.0.2
   resolution: "react-is@npm:17.0.2"
   checksum: 9d6d111d8990dc98bc5402c1266a808b0459b5d54830bbea24c12d908b536df7883f268a7868cfaedde3dd9d4e0d574db456f84d2e6df9c4526f99bb4b5344d8
@@ -14395,8 +14502,8 @@ __metadata:
   linkType: hard
 
 "react-joyride@npm:^2.4.0":
-  version: 2.7.1
-  resolution: "react-joyride@npm:2.7.1"
+  version: 2.7.2
+  resolution: "react-joyride@npm:2.7.2"
   dependencies:
     "@gilbarbara/deep-equal": ^0.3.1
     "@gilbarbara/helpers": ^0.9.0
@@ -14413,7 +14520,7 @@ __metadata:
   peerDependencies:
     react: 15 - 18
     react-dom: 15 - 18
-  checksum: ea0eaa93318b29aa6e527509a546bbd52ba7109c4ee54c04796fdbd35de8ebbdd53d8ff9f90863ca8cc7d35536c035fac0421df33d065066f0c1f7094995a8aa
+  checksum: acd27052770ac784b4acfd075764f1c4ca7060751f1ea47a4a4ae9a26376533dbc7a1a0d587220411dc4ced238bc11362724039e7de876ae249980e1f0f0ba32
   languageName: node
   linkType: hard
 
@@ -14466,8 +14573,8 @@ __metadata:
   linkType: hard
 
 "react-player@npm:^2.11.0":
-  version: 2.13.0
-  resolution: "react-player@npm:2.13.0"
+  version: 2.14.1
+  resolution: "react-player@npm:2.14.1"
   dependencies:
     deepmerge: ^4.0.0
     load-script: ^1.0.0
@@ -14476,7 +14583,7 @@ __metadata:
     react-fast-compare: ^3.0.1
   peerDependencies:
     react: ">=16.6.0"
-  checksum: 7e0e69e0ac37227ab5bfdda73991d4f5d4741585562f3ad9cfb787ae2c427510b69ddf6ef3f23f319d699b790af852fca57f3e9b1dae94f385d545a3db200d67
+  checksum: 19b496d26d571a8dd7cb60930ba32e31d83a17cf11846e59d70954c206d025665106528a1fafc429ce08fd2cdfaadbd8301746a5f92a6c13b8c27963d0c80a05
   languageName: node
   linkType: hard
 
@@ -14868,15 +14975,15 @@ __metadata:
   linkType: hard
 
 "redux-saga@npm:^1.1.3":
-  version: 1.2.3
-  resolution: "redux-saga@npm:1.2.3"
+  version: 1.3.0
+  resolution: "redux-saga@npm:1.3.0"
   dependencies:
-    "@redux-saga/core": ^1.2.3
-  checksum: 5c70799272cfbc94e046992d04bbe967e9f86ca3a35aa0c1562e6727e85b96b1a5aae68e180fdbbbc58de453dc22b39d99c81d7c604fbda7c45a8b60a729ef9d
+    "@redux-saga/core": ^1.3.0
+  checksum: 77c2fa106f6fdee7bb88970d6bdd60d6ba961a271b06c287636788d8597c437b615f7af1f65f3ed1d9e9972894e77443ccc6cfe6a24b1fd840cd9c9504c2cef2
   languageName: node
   linkType: hard
 
-"redux@npm:^4.0.0, redux@npm:^4.0.4":
+"redux@npm:^4.0.0":
   version: 4.2.1
   resolution: "redux@npm:4.2.1"
   dependencies:
@@ -14923,9 +15030,9 @@ __metadata:
   linkType: hard
 
 "regenerator-runtime@npm:^0.14.0":
-  version: 0.14.0
-  resolution: "regenerator-runtime@npm:0.14.0"
-  checksum: 1c977ad82a82a4412e4f639d65d22be376d3ebdd30da2c003eeafdaaacd03fc00c2320f18120007ee700900979284fc78a9f00da7fb593f6e6eeebc673fba9a3
+  version: 0.14.1
+  resolution: "regenerator-runtime@npm:0.14.1"
+  checksum: 9f57c93277b5585d3c83b0cf76be47b473ae8c6d9142a46ce8b0291a04bb2cf902059f0f8445dcabb3fb7378e5fe4bb4ea1e008876343d42e46d3b484534ce38
   languageName: node
   linkType: hard
 
@@ -15408,8 +15515,8 @@ __metadata:
   linkType: hard
 
 "rollup-plugin-visualizer@npm:^5.9.2":
-  version: 5.11.0
-  resolution: "rollup-plugin-visualizer@npm:5.11.0"
+  version: 5.12.0
+  resolution: "rollup-plugin-visualizer@npm:5.12.0"
   dependencies:
     open: ^8.4.0
     picomatch: ^2.3.1
@@ -15422,7 +15529,7 @@ __metadata:
       optional: true
   bin:
     rollup-plugin-visualizer: dist/bin/cli.js
-  checksum: 9f4469f83a63f57462258f7e4327cb85f5218cc3e49de9f06213728e35aff72f613d48331788e3e666bb16ccd5a9ab7e478cc1dd8cbceafb78bf397c8e30cc4d
+  checksum: 17dc10a93d4bd457c8bb7796a57c284487fb00f4b9703a33a1a954f5d40c66a89b24aca98564569922456f4fa8f72281c3ef96a95502195e6930b3fac62fce8e
   languageName: node
   linkType: hard
 
@@ -15715,7 +15822,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"shallowequal@npm:^1.1.0":
+"shallowequal@npm:1.1.0, shallowequal@npm:^1.1.0":
   version: 1.1.0
   resolution: "shallowequal@npm:1.1.0"
   checksum: f4c1de0837f106d2dbbfd5d0720a5d059d1c66b42b580965c8f06bb1db684be8783538b684092648c981294bf817869f743a066538771dbecb293df78f765e00
@@ -16050,6 +16157,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"stop-iteration-iterator@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "stop-iteration-iterator@npm:1.0.0"
+  dependencies:
+    internal-slot: ^1.0.4
+  checksum: d04173690b2efa40e24ab70e5e51a3ff31d56d699550cfad084104ab3381390daccb36652b25755e420245f3b0737de66c1879eaa2a8d4fc0a78f9bf892fcb42
+  languageName: node
+  linkType: hard
+
 "string-argv@npm:0.3.2":
   version: 0.3.2
   resolution: "string-argv@npm:0.3.2"
@@ -16263,42 +16379,40 @@ __metadata:
   languageName: node
   linkType: hard
 
-"styled-components@npm:^5.3.3":
-  version: 5.3.11
-  resolution: "styled-components@npm:5.3.11"
+"styled-components@npm:^6.1.6":
+  version: 6.1.6
+  resolution: "styled-components@npm:6.1.6"
   dependencies:
-    "@babel/helper-module-imports": ^7.0.0
-    "@babel/traverse": ^7.4.5
-    "@emotion/is-prop-valid": ^1.1.0
-    "@emotion/stylis": ^0.8.4
-    "@emotion/unitless": ^0.7.4
-    babel-plugin-styled-components: ">= 1.12.0"
-    css-to-react-native: ^3.0.0
-    hoist-non-react-statics: ^3.0.0
-    shallowequal: ^1.1.0
-    supports-color: ^5.5.0
+    "@emotion/is-prop-valid": 1.2.1
+    "@emotion/unitless": 0.8.0
+    "@types/stylis": 4.2.0
+    css-to-react-native: 3.2.0
+    csstype: 3.1.2
+    postcss: 8.4.31
+    shallowequal: 1.1.0
+    stylis: 4.3.1
+    tslib: 2.5.0
   peerDependencies:
     react: ">= 16.8.0"
     react-dom: ">= 16.8.0"
-    react-is: ">= 16.8.0"
-  checksum: 10edd4dae3b0231ec02d86bdd09c88e894eedfa7e9d4f8e562b09fb69c67a27d586cbcf35c785002d59b3bf11e6c0940b0efce40d13ae9ed148b26b1dc8f3284
+  checksum: 8bcda3719af222ebde8be358d0db4019e6fb03b6f9b19797ec20acc26aad4b1ede83b3820b25b8dd4aa7a1dfa7bb26d82e69f063b8e1f3b0d8a8e6e095f1b643
   languageName: node
   linkType: hard
 
-"stylis@npm:^4.0.13, stylis@npm:^4.1.1, stylis@npm:^4.1.3, stylis@npm:^4.3.0":
-  version: 4.3.0
-  resolution: "stylis@npm:4.3.0"
-  checksum: 6120de3f03eacf3b5adc8e7919c4cca991089156a6badc5248752a3088106afaaf74996211a6817a7760ebeadca09004048eea31875bd8d4df51386365c50025
+"stylis@npm:4.3.1, stylis@npm:^4.0.13, stylis@npm:^4.1.1, stylis@npm:^4.1.3, stylis@npm:^4.3.0":
+  version: 4.3.1
+  resolution: "stylis@npm:4.3.1"
+  checksum: d365f1b008677b2147e8391e9cf20094a4202a5f9789562e7d9d0a3bd6f0b3067d39e8fd17cce5323903a56f6c45388e3d839e9c0bb5a738c91726992b14966d
   languageName: node
   linkType: hard
 
 "sucrase@npm:^3.20.3":
-  version: 3.34.0
-  resolution: "sucrase@npm:3.34.0"
+  version: 3.35.0
+  resolution: "sucrase@npm:3.35.0"
   dependencies:
     "@jridgewell/gen-mapping": ^0.3.2
     commander: ^4.0.0
-    glob: 7.1.6
+    glob: ^10.3.10
     lines-and-columns: ^1.1.6
     mz: ^2.7.0
     pirates: ^4.0.1
@@ -16306,11 +16420,11 @@ __metadata:
   bin:
     sucrase: bin/sucrase
     sucrase-node: bin/sucrase-node
-  checksum: 61860063bdf6103413698e13247a3074d25843e91170825a9752e4af7668ffadd331b6e99e92fc32ee5b3c484ee134936f926fa9039d5711fafff29d017a2110
+  checksum: 9fc5792a9ab8a14dcf9c47dcb704431d35c1cdff1d17d55d382a31c2e8e3063870ad32ce120a80915498486246d612e30cda44f1624d9d9a10423e1a43487ad1
   languageName: node
   linkType: hard
 
-"supports-color@npm:^5.3.0, supports-color@npm:^5.5.0":
+"supports-color@npm:^5.3.0":
   version: 5.5.0
   resolution: "supports-color@npm:5.5.0"
   dependencies:
@@ -16369,19 +16483,19 @@ __metadata:
   linkType: hard
 
 "svgo@npm:^3.0.0":
-  version: 3.1.0
-  resolution: "svgo@npm:3.1.0"
+  version: 3.2.0
+  resolution: "svgo@npm:3.2.0"
   dependencies:
     "@trysound/sax": 0.2.0
     commander: ^7.2.0
     css-select: ^5.1.0
-    css-tree: ^2.2.1
+    css-tree: ^2.3.1
     css-what: ^6.1.0
-    csso: 5.0.5
+    csso: ^5.0.5
     picocolors: ^1.0.0
   bin:
     svgo: ./bin/svgo
-  checksum: c07d49757264d9122090e8b6c674c25d25608feec7eb5df5276f8c8e3ec113e9b515ffc3cb5b57a4c24942980b15b5078321105a15f379650271dc1f25b05eb6
+  checksum: 42168748a5586d85d447bec2867bc19814a4897f973ff023e6aad4ff19ba7408be37cf3736e982bb78e3f1e52df8785da5dca77a8ebc64c0ebd6fcf9915d2895
   languageName: node
   linkType: hard
 
@@ -16665,15 +16779,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tsconfig-paths@npm:^3.14.2":
-  version: 3.14.2
-  resolution: "tsconfig-paths@npm:3.14.2"
+"tsconfig-paths@npm:^3.15.0":
+  version: 3.15.0
+  resolution: "tsconfig-paths@npm:3.15.0"
   dependencies:
     "@types/json5": ^0.0.29
     json5: ^1.0.2
     minimist: ^1.2.6
     strip-bom: ^3.0.0
-  checksum: a6162eaa1aed680537f93621b82399c7856afd10ec299867b13a0675e981acac4e0ec00896860480efc59fc10fd0b16fdc928c0b885865b52be62cadac692447
+  checksum: 59f35407a390d9482b320451f52a411a256a130ff0e7543d18c6f20afab29ac19fbe55c360a93d6476213cc335a4d76ce90f67df54c4e9037f7d240920832201
   languageName: node
   linkType: hard
 
@@ -16695,6 +16809,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tslib@npm:2.5.0":
+  version: 2.5.0
+  resolution: "tslib@npm:2.5.0"
+  checksum: ae3ed5f9ce29932d049908ebfdf21b3a003a85653a9a140d614da6b767a93ef94f460e52c3d787f0e4f383546981713f165037dc2274df212ea9f8a4541004e1
+  languageName: node
+  linkType: hard
+
 "tslib@npm:^1.8.1, tslib@npm:^1.9.3":
   version: 1.14.1
   resolution: "tslib@npm:1.14.1"
@@ -16808,9 +16929,9 @@ __metadata:
   linkType: hard
 
 "type-fest@npm:^4.1.0, type-fest@npm:^4.8.3":
-  version: 4.8.3
-  resolution: "type-fest@npm:4.8.3"
-  checksum: cd8c9a20a32b9d813f5f6d84bd81e52e22fb779a7ef0ae53974bae5baac427974bc8243269e9832b22ce2b6277d857b44769b3664f97dcac344e600bdd95f186
+  version: 4.9.0
+  resolution: "type-fest@npm:4.9.0"
+  checksum: 73383de23237b399a70397a53101152548846d919aebcc7d8733000c6c354dc2632fe37c4a70b8571b79fdbfa099e2d8304c5ac56b3254780acff93e4c7a797f
   languageName: node
   linkType: hard
 
@@ -17391,8 +17512,8 @@ __metadata:
   linkType: hard
 
 "vite-plugin-html@npm:^3.2.0":
-  version: 3.2.0
-  resolution: "vite-plugin-html@npm:3.2.0"
+  version: 3.2.1
+  resolution: "vite-plugin-html@npm:3.2.1"
   dependencies:
     "@rollup/pluginutils": ^4.2.0
     colorette: ^2.0.16
@@ -17408,7 +17529,7 @@ __metadata:
     pathe: ^0.2.0
   peerDependencies:
     vite: ">=2.0.0"
-  checksum: f5222247b65da1c36215f0b2f509fd3975a7426b8d44546beb49f3ba51ee87b3a6b6e6afc9e7567a0d8bd1016631f2db3f934808f62a7c8f7f83fa83d8561d2d
+  checksum: 6add7cd7a8f9e83b0c58b20cde2d4da7e132ef56db6a60f3d4cc7022c944896236aeca6bde4c6dc2da3d506f756f63de56251adc47f0ae359c07485b24dd64db
   languageName: node
   linkType: hard
 
@@ -17598,9 +17719,9 @@ __metadata:
   linkType: hard
 
 "web-streams-polyfill@npm:^3.0.3":
-  version: 3.2.1
-  resolution: "web-streams-polyfill@npm:3.2.1"
-  checksum: b119c78574b6d65935e35098c2afdcd752b84268e18746606af149e3c424e15621b6f1ff0b42b2676dc012fc4f0d313f964b41a4b5031e525faa03997457da02
+  version: 3.3.2
+  resolution: "web-streams-polyfill@npm:3.3.2"
+  checksum: 0292f4113c1bda40d8e8ecebee39eb14cc2e2e560a65a6867980e394537a2645130e2c73f5ef6e641fd3697d2f71720ccf659aebaf69a9d5a773f653a0fdf39d
   languageName: node
   linkType: hard
 
@@ -17612,9 +17733,9 @@ __metadata:
   linkType: hard
 
 "web-worker@npm:^1.2.0":
-  version: 1.2.0
-  resolution: "web-worker@npm:1.2.0"
-  checksum: 1bb28348ddcf9b2e7c62c5fd02e49a84098795856cd905456de957271bba288e9618941cf69d8960f0a7ae81f5dfb74b427c0634be47ec69e3e955c4ec5213be
+  version: 1.3.0
+  resolution: "web-worker@npm:1.3.0"
+  checksum: ed1f869aefd1d81a43d0fbfe7b315a65beb6d7d2486b378c436a7047eed4216be34b2e6afca738b6fa95d016326b765f5f816355db33267dbf43b2b8a1837c0c
   languageName: node
   linkType: hard
 
@@ -17874,8 +17995,8 @@ __metadata:
   linkType: hard
 
 "ws@npm:^8.11.0":
-  version: 8.15.1
-  resolution: "ws@npm:8.15.1"
+  version: 8.16.0
+  resolution: "ws@npm:8.16.0"
   peerDependencies:
     bufferutil: ^4.0.1
     utf-8-validate: ">=5.0.2"
@@ -17884,7 +18005,7 @@ __metadata:
       optional: true
     utf-8-validate:
       optional: true
-  checksum: 8c67365f6e6134278ad635d558bfce466d7ef7543a043baea333aaa430429f0af8a130c0c36e7dd78f918d68167a659ba9b5067330b77c4b279e91533395952b
+  checksum: feb3eecd2bae82fa8a8beef800290ce437d8b8063bdc69712725f21aef77c49cb2ff45c6e5e7fce622248f9c7abaee506bae0a9064067ffd6935460c7357321b
   languageName: node
   linkType: hard
 
