diff --git a/.circleci/config.yml b/.circleci/config.yml
index 2e2f2fd3c8b1..1301ae42fcbc 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -7,9 +7,7 @@ version: 2.1
 jobs:
   test-argos-ci:
     docker:
-      - image: cimg/node:21.1-browsers
-    environment:
-      NODE_OPTIONS: --openssl-legacy-provider
+      - image: cimg/node:21.2-browsers
     steps:
       - checkout
       - run:
diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
index c1e8e1305f2d..96c2526e4c4b 100644
--- a/.codesandbox/ci.json
+++ b/.codesandbox/ci.json
@@ -1,4 +1,4 @@
 {
-  "sandboxes": ["antd-reproduction-template-y9vgcf"],
-  "node": "14"
+  "sandboxes": ["antd-reproduction-template-forked-jyh2k9"],
+  "node": "18"
 }
diff --git a/.dumi/pages/index/components/PreviewBanner/ComponentsBlock.tsx b/.dumi/pages/index/components/PreviewBanner/ComponentsBlock.tsx
index 42dc50702d02..f9f937b3f289 100644
--- a/.dumi/pages/index/components/PreviewBanner/ComponentsBlock.tsx
+++ b/.dumi/pages/index/components/PreviewBanner/ComponentsBlock.tsx
@@ -19,6 +19,7 @@ import {
 import { createStyles } from 'antd-style';
 import classNames from 'classnames';
 
+import Tilt from './Tilt';
 import useLocale from '../../../../hooks/useLocale';
 
 const { _InternalPanelDoNotUseOrYouWillBeFired: ModalPanel } = Modal;
@@ -79,7 +80,7 @@ const useStyle = createStyles(({ token, css }) => {
       display: flex;
       flex-direction: column;
       row-gap: ${gap}px;
-      opacity: 0.65;
+      opacity: 0.8;
     `,
 
     flex: css`
@@ -117,7 +118,11 @@ const ComponentsBlock: React.FC<ComponentsBlockProps> = (props) => {
   const { styles } = useStyle();
 
   return (
-    <div className={classNames(className, styles.holder)} style={style}>
+    <Tilt
+      options={{ max: 20, glare: true, scale: 1 }}
+      className={classNames(className, styles.holder)}
+      style={style}
+    >
       <ModalPanel title="Ant Design 5.0" width="100%">
         {locale.text}
       </ModalPanel>
@@ -252,7 +257,7 @@ const ComponentsBlock: React.FC<ComponentsBlockProps> = (props) => {
       <InternalTooltip title={locale.hello} placement="topLeft" className={styles.noMargin} />
 
       <Alert message="Ant Design love you!" type="success" />
-    </div>
+    </Tilt>
   );
 };
 
diff --git a/.dumi/pages/index/components/PreviewBanner/Tilt.tsx b/.dumi/pages/index/components/PreviewBanner/Tilt.tsx
new file mode 100644
index 000000000000..51f758ab86f9
--- /dev/null
+++ b/.dumi/pages/index/components/PreviewBanner/Tilt.tsx
@@ -0,0 +1,33 @@
+import React, { useEffect, useRef } from 'react';
+import VanillaTilt, { type TiltOptions } from 'vanilla-tilt';
+
+interface TiltProps extends React.HTMLAttributes<HTMLDivElement> {
+  options?: TiltOptions;
+}
+
+// https://micku7zu.github.io/vanilla-tilt.js/index.html
+const defaultTiltOptions = {
+  scale: 1.02,
+  max: 8,
+  speed: 1500,
+  glare: true,
+  'max-glare': 0.8,
+};
+
+const Tilt: React.FC<TiltProps> = ({ options, ...props }) => {
+  const node = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (node.current) {
+      VanillaTilt.init(node.current, {
+        ...defaultTiltOptions,
+        ...options,
+      });
+    }
+    return () => {
+      (node.current as any)?.vanillaTilt.destroy();
+    };
+  }, []);
+  return <div ref={node} {...props} />;
+};
+
+export default Tilt;
diff --git a/.dumi/pages/index/components/PreviewBanner/index.tsx b/.dumi/pages/index/components/PreviewBanner/index.tsx
index 45991dfaba52..e84689170b4e 100644
--- a/.dumi/pages/index/components/PreviewBanner/index.tsx
+++ b/.dumi/pages/index/components/PreviewBanner/index.tsx
@@ -7,7 +7,6 @@ import useLocale from '../../../../hooks/useLocale';
 import SiteContext from '../../../../theme/slots/SiteContext';
 import * as utils from '../../../../theme/utils';
 import { GroupMask } from '../Group';
-import useMouseTransform from './useMouseTransform';
 
 const ComponentsBlock = React.lazy(() => import('./ComponentsBlock'));
 
@@ -28,7 +27,6 @@ const locales = {
 const useStyle = () => {
   const { direction } = React.useContext(ConfigProvider.ConfigContext);
   const isRTL = direction === 'rtl';
-
   return createStyles(({ token, css, cx }) => {
     const textShadow = `0 0 3px ${token.colorBgContainer}`;
 
@@ -37,7 +35,9 @@ const useStyle = () => {
       inset: 0;
       backdrop-filter: blur(4px);
       opacity: 1;
-      transition: opacity 1s ease;
+      background: rgba(255, 255, 255, 0.2);
+      transition: all 1s ease;
+      pointer-events: none;
     `);
 
     return {
@@ -114,10 +114,8 @@ const PreviewBanner: React.FC<PreviewBannerProps> = (props) => {
   const { pathname, search } = useLocation();
   const isZhCN = utils.isZhCN(pathname);
 
-  const [componentsBlockStyle, mouseEvents] = useMouseTransform();
-
   return (
-    <GroupMask {...mouseEvents}>
+    <GroupMask>
       {/* Image Left Top */}
       <img
         style={{ position: 'absolute', left: isMobile ? -120 : 0, top: 0, width: 240 }}
@@ -134,7 +132,11 @@ const PreviewBanner: React.FC<PreviewBannerProps> = (props) => {
       <div className={styles.holder}>
         {/* Mobile not show the component preview */}
         <Suspense fallback={null}>
-          {!isMobile && <ComponentsBlock className={styles.block} style={componentsBlockStyle} />}
+          {isMobile ? null : (
+            <div className={styles.block}>
+              <ComponentsBlock />
+            </div>
+          )}
         </Suspense>
         <div className={styles.mask} />
 
diff --git a/.dumi/pages/index/components/PreviewBanner/useMouseTransform.tsx b/.dumi/pages/index/components/PreviewBanner/useMouseTransform.tsx
deleted file mode 100644
index a6985067bb6a..000000000000
--- a/.dumi/pages/index/components/PreviewBanner/useMouseTransform.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import React, { startTransition } from 'react';
-import { ConfigProvider } from 'antd';
-
-const getTransformRotateStyle = (
-  event: React.MouseEvent<HTMLDivElement, MouseEvent>,
-  currentTarget: EventTarget & HTMLDivElement,
-  multiple: number,
-  isRTL: boolean,
-): string => {
-  const box = currentTarget?.getBoundingClientRect();
-  const calcX = -(event.clientY - box.y - box.height / 2) / multiple;
-  const calcY = (event.clientX - box.x - box.width / 2) / multiple;
-  return isRTL
-    ? `rotate3d(${24 + calcX}, ${83 + calcY}, -45, 57deg)`
-    : `rotate3d(${24 + calcX}, ${-83 + calcY}, 45, 57deg)`;
-};
-
-const useMouseTransform = ({ transitionDuration = 500, multiple = 36 } = {}) => {
-  const [componentsBlockStyle, setComponentsBlockStyle] = React.useState<React.CSSProperties>({});
-
-  const { direction } = React.useContext(ConfigProvider.ConfigContext);
-
-  const isRTL = direction === 'rtl';
-
-  const onMouseMove: React.MouseEventHandler<HTMLDivElement> = (event) => {
-    const { currentTarget } = event;
-    startTransition(() => {
-      setComponentsBlockStyle((style) => ({
-        ...style,
-        transform: getTransformRotateStyle(event, currentTarget, multiple, isRTL),
-      }));
-    });
-  };
-
-  const onMouseEnter: React.MouseEventHandler<HTMLDivElement> = () => {
-    startTransition(() => {
-      setComponentsBlockStyle((style) => ({
-        ...style,
-        transition: `transform ${transitionDuration / 1000}s`,
-      }));
-    });
-
-    setTimeout(() => {
-      startTransition(() => {
-        setComponentsBlockStyle((style) => ({
-          ...style,
-          transition: '',
-        }));
-      });
-    }, transitionDuration);
-  };
-
-  const onMouseLeave: React.MouseEventHandler<HTMLDivElement> = () => {
-    startTransition(() => {
-      setComponentsBlockStyle((style) => ({
-        ...style,
-        transition: `transform ${transitionDuration / 1000}s`,
-        transform: '',
-      }));
-    });
-  };
-
-  return [
-    componentsBlockStyle,
-    {
-      onMouseMove,
-      onMouseEnter,
-      onMouseLeave,
-    },
-  ] as const;
-};
-
-export default useMouseTransform;
diff --git a/.dumi/theme/common/LiveCode.tsx b/.dumi/theme/common/LiveCode.tsx
index 9f80e95c6e04..960e47529ac0 100644
--- a/.dumi/theme/common/LiveCode.tsx
+++ b/.dumi/theme/common/LiveCode.tsx
@@ -16,11 +16,11 @@ const useStyle = createStyles(({ token, css }) => {
         outline: none;
 
         &:hover {
-          border: 1px solid ${colorPrimaryBorder} !important;
+          box-shadow: inset 0 0 0 1px ${colorPrimaryBorder} !important;
         }
 
         &:focus {
-          border: 1px solid ${colorPrimary} !important;
+          box-shadow: inset 0 0 0 1px ${colorPrimary} !important;
         }
       }
     `,
diff --git a/.dumi/theme/locales/en-US.json b/.dumi/theme/locales/en-US.json
index 6ca8a49d35ef..41dd07030610 100644
--- a/.dumi/theme/locales/en-US.json
+++ b/.dumi/theme/locales/en-US.json
@@ -111,6 +111,8 @@
   "app.footer.seeconf": "Experience Tech Conference",
   "app.footer.xtech": "Ant Financial Experience Tech",
   "app.footer.xtech.slogan": "Experience The Beauty",
+  "app.footer.galacean": "Galacean",
+  "app.footer.galacean.slogan": "Interactive Graphics Solution",
   "app.docs.color.pick-primary": "Pick your primary color",
   "app.docs.color.pick-background": "Pick your background color",
   "app.docs.components.icon.search.placeholder": "Search icons here, click icon to copy code",
diff --git a/.dumi/theme/locales/zh-CN.json b/.dumi/theme/locales/zh-CN.json
index 2a37d63e3ea7..1cefada772ef 100644
--- a/.dumi/theme/locales/zh-CN.json
+++ b/.dumi/theme/locales/zh-CN.json
@@ -110,6 +110,8 @@
   "app.footer.seeconf": "蚂蚁体验科技大会",
   "app.footer.xtech": "蚂蚁体验科技",
   "app.footer.xtech.slogan": "让用户体验美好",
+  "app.footer.galacean": "Galacean",
+  "app.footer.galacean.slogan": "互动图形解决方案",
   "app.docs.color.pick-primary": "选择你的主色",
   "app.docs.color.pick-background": "选择你的背景色",
   "app.docs.components.icon.search.placeholder": "在此搜索图标，点击图标可复制代码",
diff --git a/.dumi/theme/slots/Footer/index.tsx b/.dumi/theme/slots/Footer/index.tsx
index 6b34e18ed5aa..fa5ab60ad71d 100644
--- a/.dumi/theme/slots/Footer/index.tsx
+++ b/.dumi/theme/slots/Footer/index.tsx
@@ -363,6 +363,20 @@ const Footer: React.FC = () => {
           url: 'https://kitchen.alipay.com',
           openExternal: true,
         },
+        {
+          icon: (
+            <img
+              src="https://mdn.alipayobjects.com/huamei_j9rjmc/afts/img/A*3ittT5OEo2gAAAAAAAAAAAAADvGmAQ/original"
+              width={16}
+              height={16}
+              alt="Galacean"
+            />
+          ),
+          title: <FormattedMessage id="app.footer.galacean" />,
+          description: <FormattedMessage id="app.footer.galacean.slogan" />,
+          url: 'https://galacean.antgroup.com/',
+          openExternal: true,
+        },
         {
           icon: (
             <img
diff --git a/.dumi/theme/slots/Header/index.tsx b/.dumi/theme/slots/Header/index.tsx
index 9850087a0131..22dd3a92ed54 100644
--- a/.dumi/theme/slots/Header/index.tsx
+++ b/.dumi/theme/slots/Header/index.tsx
@@ -25,15 +25,16 @@ const RESPONSIVE_SM = 1200;
 
 const locales = {
   cn: {
-    message:
-      '语雀公益计划：大学生认证教育邮箱，即可免费获得语雀会员。语雀，支付宝匠心打造的在线文档平台。',
-    shortMessage: '支付宝语雀 · 大学生公益计划火热进行中！',
-    more: '了解更多',
+    message: 'Galacean Effects · 所见即所得的动效新方案。',
+    shortMessage: 'Galacean Effects · 所见即所得的动效新方案。',
+    more: '前往了解',
+    link: 'https://galacean.antgroup.com/effects/',
   },
   en: {
     message: '',
     shortMessage: '',
     more: '',
+    link: '',
   },
 };
 
@@ -366,26 +367,21 @@ const Header: React.FC = () => {
         </Popover>
       )}
       {isZhCN && bannerVisible && (
-        <ConfigProvider theme={{ token: { colorInfoBg: '#daf5eb', colorTextBase: '#000' } }}>
+        <ConfigProvider theme={{ token: { colorInfoBg: '#ceebf9', colorTextBase: '#000' } }}>
           <Alert
             className={styles.banner}
             message={
               <>
-                <img
-                  className={styles.icon}
-                  src="https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg"
-                  alt="yuque"
-                />
                 <span>{isMobile ? locale.shortMessage : locale.message}</span>
                 <a
                   className={styles.link}
-                  href="https://www.yuque.com/yuque/blog/welfare-edu?source=antd"
+                  href={locale.link}
                   target="_blank"
                   rel="noreferrer"
                   onClick={() => {
                     window.gtag?.('event', '点击', {
                       event_category: 'top_banner',
-                      event_label: 'https://www.yuque.com/yuque/blog/welfare-edu?source=antd',
+                      event_label: locale.link,
                     });
                   }}
                 >
diff --git a/.eslintrc.js b/.eslintrc.js
index 12e49328d21e..ca15e6624923 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -25,7 +25,16 @@ module.exports = {
     },
   },
   parser: '@typescript-eslint/parser',
-  plugins: ['react', '@babel', 'jest', '@typescript-eslint', 'react-hooks', 'unicorn', 'markdown'],
+  plugins: [
+    'react',
+    '@babel',
+    'jest',
+    '@typescript-eslint',
+    'react-hooks',
+    'unicorn',
+    'markdown',
+    'lodash',
+  ],
   // https://github.com/typescript-eslint/typescript-eslint/issues/46#issuecomment-470486034
   overrides: [
     {
@@ -156,6 +165,7 @@ module.exports = {
     'react/no-unused-class-component-methods': 0,
     'import/extensions': 0,
     'import/no-cycle': 2,
+    'lodash/import-scope': 2,
     'import/no-extraneous-dependencies': [
       'error',
       {
diff --git a/.github/lock.yml b/.github/lock.yml
deleted file mode 100644
index e5b9a627f1e1..000000000000
--- a/.github/lock.yml
+++ /dev/null
@@ -1,14 +0,0 @@
-# Configuration for lock-threads - https://github.com/dessant/lock-threads
-
-# Number of days of inactivity before a closed issue or pull request is locked
-daysUntilLock: 365
-# Comment to post before locking. Set to `false` to disable
-lockComment: >
-  This thread has been automatically locked because it has not had recent
-  activity. Please open a new issue for related bugs and link to relevant
-  comments in this thread.
-# Issues or pull requests with these labels will not be locked
-# exemptLabels:
-#   - no-locking
-# Limit to only `issues` or `pulls`
-only: issues
diff --git a/.github/tests_checker.yml b/.github/tests_checker.yml
deleted file mode 100644
index 46378d7461df..000000000000
--- a/.github/tests_checker.yml
+++ /dev/null
@@ -1,3 +0,0 @@
-comment: 'Could you please add tests to make sure this change works as expected?',
-fileExtensions: [.ts', '.tsx', '.json']
-testDir: '__tests__'
diff --git a/.github/workflows/issue-labeled.yml b/.github/workflows/issue-labeled.yml
index 40f70446d23c..2f818e5a7cf8 100644
--- a/.github/workflows/issue-labeled.yml
+++ b/.github/workflows/issue-labeled.yml
@@ -40,7 +40,9 @@ jobs:
           body: |
             Hello @${{ github.event.issue.user.login }}. Please provide a online reproduction by forking codesandbox of [antd@5.x](https://u.ant.design/codesandbox-repro) or [antd@4.x](https://u.ant.design/codesandbox-repro-4x), or provide a minimal GitHub repository. Issues labeled by `Need Reproduce` will be closed if no activities in 3 days.
 
-            你好 @${{ github.event.issue.user.login }}, 我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击这里创建一个 [antd@5.x](https://u.ant.design/codesandbox-repro) 或 [antd@4.x](https://u.ant.design/codesandbox-repro-4x) 的 codesandbox，或者提供一个最小化的 GitHub 仓库。3 天内未跟进此 issue 将会被自动关闭。
+            你好 @${{ github.event.issue.user.login }}，我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击这里创建一个 [antd@5.x](https://u.ant.design/codesandbox-repro) 或 [antd@4.x](https://u.ant.design/codesandbox-repro-4x) 的 codesandbox，或者提供一个最小化的 GitHub 仓库。3 天内未跟进此 issue 将会被自动关闭。
+
+            > [什么是最小化重现，为什么这是必需的？](https://github.com/ant-design/ant-design/wiki/%E4%BB%80%E4%B9%88%E6%98%AF%E6%9C%80%E5%B0%8F%E5%8C%96%E9%87%8D%E7%8E%B0%EF%BC%8C%E4%B8%BA%E4%BB%80%E4%B9%88%E8%BF%99%E6%98%AF%E5%BF%85%E9%9C%80%E7%9A%84%EF%BC%9F)
 
             ![](https://gw.alipayobjects.com/zos/antfincdn/y9kwg7DVCd/reproduce.gif)
 
diff --git a/.github/workflows/pr-open-check.yml b/.github/workflows/pr-open-check.yml
index 2c6c89b3c9f8..f30c621392ad 100644
--- a/.github/workflows/pr-open-check.yml
+++ b/.github/workflows/pr-open-check.yml
@@ -19,10 +19,13 @@ jobs:
           refuse-issue-label: '🎱 Collaborate PR only'
           need-creator-authority: 'write'
           comment: |
-            Hi @${{ github.event.pull_request.user.login }}. The issue mentioned in this PR needs to be confirmed with the designer or core team. This PR is temporarily not accepted. Thank you again for your contribution! 😊
+            Hi @${{ github.event.pull_request.user.login }}. The issue mentioned in this PR needs to be confirmed with the designer or core team. Thank you for your contribution! 😊
 
-            你好 @${{ github.event.pull_request.user.login }}。这个 PR 提及的 issue 需要和设计师或核心团队进行确认，暂时不接受 PR，再次感谢你的贡献！😊
-          close: true
+            你好 @${{ github.event.pull_request.user.login }}。这个 PR 提及的 issue 需要和设计师或核心团队进行确认！感谢您的贡献！😊
+          close: false
+          reviewers: |
+            MadCcc
+            zombieJ
 
   check-changelog:
     permissions:
diff --git a/.github/workflows/preview-build.yml b/.github/workflows/preview-build.yml
index 03660a33f417..d8d58e4c1ba9 100644
--- a/.github/workflows/preview-build.yml
+++ b/.github/workflows/preview-build.yml
@@ -74,7 +74,7 @@ jobs:
         run: npm run site
         env:
           SITE_ENV: development
-          NODE_OPTIONS: "--max_old_space_size=4096 --openssl-legacy-provider"
+          NODE_OPTIONS: "--max_old_space_size=4096"
 
       - name: upload site artifact
         uses: actions/upload-artifact@v3
diff --git a/.github/workflows/preview-deploy.yml b/.github/workflows/preview-deploy.yml
index 2c6910ea67e3..faff89343859 100644
--- a/.github/workflows/preview-deploy.yml
+++ b/.github/workflows/preview-deploy.yml
@@ -74,6 +74,7 @@ jobs:
 
       # Download site artifact
       - name: download site artifact
+        if: ${{ fromJSON(needs.upstream-workflow-summary.outputs.build-success) }}
         uses: dawidd6/action-download-artifact@v2
         with:
           workflow: ${{ github.event.workflow_run.workflow_id }}
@@ -81,7 +82,6 @@ jobs:
           name: site
 
       - name: upload surge service
-        if: ${{ fromJSON(needs.upstream-workflow-summary.outputs.build-success) }}
         id: deploy
         continue-on-error: true
         run: |
diff --git a/.github/workflows/release-tweet.yml b/.github/workflows/release-tweet.yml
index 00939457ad8a..449ea8ae6f64 100644
--- a/.github/workflows/release-tweet.yml
+++ b/.github/workflows/release-tweet.yml
@@ -1,21 +1,21 @@
 name: 🐦 Release to Tweet
 
 on:
-  release:
-    types: [published]
+  create
 
 permissions:
   contents: read
 
 jobs:
   tweet:
+    if: ${{ github.event.ref_type == 'tag' && !contains(github.event.ref, 'alpha') }}
     runs-on: ubuntu-latest
     steps:
       - name: Tweet
         uses: nearform-actions/github-action-notify-twitter@v1
         with:
           message: |
-            Ant Design (antd@${{ github.event.release.tag_name }}) has been released ~ 🎊🎊🎊 Check out the release notes: ${{ github.event.release.html_url }}
+            🤖 Ant Design just released antd@${{ github.event.ref }} ✨🎊✨ Check out the full release note: https://github.com/ant-design/ant-design/releases/tag/${{ github.event.ref }}
           twitter-app-key: ${{ secrets.TWITTER_API_KEY }}
           twitter-app-secret: ${{ secrets.TWITTER_API_SECRET_KEY }}
           twitter-access-token: ${{ secrets.TWITTER_ACCESS_TOKEN }}
diff --git a/.github/workflows/site-deploy.yml b/.github/workflows/site-deploy.yml
index 5b7e12a470bf..4f2bc798da98 100644
--- a/.github/workflows/site-deploy.yml
+++ b/.github/workflows/site-deploy.yml
@@ -70,13 +70,13 @@ jobs:
       - name: build site
         run: npm run predeploy
         env:
-          NODE_OPTIONS: "--max_old_space_size=4096 --openssl-legacy-provider"
+          NODE_OPTIONS: "--max_old_space_size=4096"
 
       - name: build dist and bundle analyzer report
         run: npm run dist
         env:
           ANALYZER: 1
-          NODE_OPTIONS: "--max_old_space_size=4096 --openssl-legacy-provider"
+          NODE_OPTIONS: "--max_old_space_size=4096"
 
       - name: Get version
         id: publish-version
diff --git a/.github/workflows/size-limit.yml b/.github/workflows/size-limit.yml
index 89b0b50e008c..d42cd6f3a05d 100644
--- a/.github/workflows/size-limit.yml
+++ b/.github/workflows/size-limit.yml
@@ -63,5 +63,5 @@ jobs:
           build_script: dist
           skip_step: install
         env:
-          NODE_OPTIONS: "--max_old_space_size=4096 --openssl-legacy-provider"
+          NODE_OPTIONS: "--max_old_space_size=4096"
           PRODUCTION_ONLY: 1
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 1c15128b37db..2e295185ab04 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -131,7 +131,7 @@ jobs:
       - name: dist
         run: npm run dist
         env:
-          NODE_OPTIONS: "--max_old_space_size=4096 --openssl-legacy-provider"
+          NODE_OPTIONS: "--max_old_space_size=4096"
           CI: 1
     needs: setup
 
diff --git a/.github/workflows/trigger-argos-with-whitelist-users.yml b/.github/workflows/trigger-argos-with-whitelist-users.yml
index 3c310afaf4a8..126f0dd67628 100644
--- a/.github/workflows/trigger-argos-with-whitelist-users.yml
+++ b/.github/workflows/trigger-argos-with-whitelist-users.yml
@@ -40,9 +40,17 @@ jobs:
             echo "whitelisted=false" >> $GITHUB_OUTPUT
           fi 
 
-      - name: install dependencies
-        if: ${{ steps.check_user.outputs.whitelisted == 'true' }}
-        run: yarn
+      - name: cache package-lock.json
+        uses: actions/cache@v3
+        with:
+          path: package-temp-dir
+          key: lock-${{ github.sha }}
+
+      - name: create package-lock.json
+        run: npm i --package-lock-only --ignore-scripts
+
+      - name: install
+        run: npm install
 
       - name: Build dist file
         id: build
diff --git a/.github/workflows/upgrade-deps.yml b/.github/workflows/upgrade-deps.yml
new file mode 100644
index 000000000000..d6169a8c6b2d
--- /dev/null
+++ b/.github/workflows/upgrade-deps.yml
@@ -0,0 +1,60 @@
+name: Upgrade Dependencies
+
+on:
+  schedule:
+    - cron: "0 18 * * *" # every day at 18:00 UTC
+    # - timezone: Asia/Shanghai # not supported yet https://github.com/orgs/community/discussions/13454
+
+jobs:
+  upgrade-deps:
+    runs-on: ubuntu-latest
+    if: github.ref == 'refs/heads/master'
+    permissions:
+      pull-requests: write # for peter-evans/create-pull-request to create PRs
+      contents: write # for git push
+    steps:
+      - name: checkout
+        uses: actions/checkout@v4
+        with:
+          sparse-checkout: |
+            .github
+            .ncurc.js
+            package.json
+
+      - name: setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - name: upgrade deps
+        id: upgrade
+        run: |
+          if [ ! -d .tmp ] ; then
+            mkdir .tmp
+          fi
+          $(npx npm-check-updates -u > .tmp/upgrade-deps-logs.txt) 2>&1 || true
+          if [ -s .tmp/upgrade-deps-logs.txt ]; then
+            cat .tmp/upgrade-deps-logs.txt
+            echo "logs<<EOF" >> $GITHUB_OUTPUT
+            cat .tmp/upgrade-deps-logs.txt >> $GITHUB_OUTPUT
+            echo "EOF" >> $GITHUB_OUTPUT
+          fi
+
+      - name: create pull request
+        id: cpr
+        uses: peter-evans/create-pull-request@v5
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }} # Cannot be default!!!
+          assignees: 'afc163, zombieJ, xrkffgg, MadCcc'
+          title: "chore: upgrade deps"
+          commit-message: "chore: upgrade deps"
+          body: |
+            Upgrade dependencies
+
+            ```
+            ${{ steps.upgrade.outputs.logs }}
+            ```
+          branch: auto-upgrade-deps
+          delete-branch: true
+          add-paths: |
+            package.json
diff --git a/.ncurc.js b/.ncurc.js
new file mode 100644
index 000000000000..a521db4d8050
--- /dev/null
+++ b/.ncurc.js
@@ -0,0 +1,29 @@
+// doc: https://github.com/raineorshine/npm-check-updates/tree/v16.14.6#readme
+const path = require('path');
+
+const rcOrg = ['@rc-component/', 'rc-'];
+const check = ['@ant-design/', ...rcOrg];
+
+// rules: https://github.com/ant-design/ant-design/pull/45593#issuecomment-1784891887
+module.exports = {
+  packageFile: path.resolve(__dirname, './package.json'),
+  upgrade: false, // use `npx npm-check-updates -u` to upgrade
+  packageManager: 'npm',
+  dep: ['prod'], // check only prod dependencies
+  // https://github.com/raineorshine/npm-check-updates#filter
+  filter: (name) => check.some((prefix) => name.startsWith(prefix)),
+  // https://github.com/raineorshine/npm-check-updates#target
+  target: (name, semver) => {
+    const { operator } = semver[0] ?? {};
+
+    // rc-component
+    if (rcOrg.some((prefix) => name.startsWith(prefix))) {
+      // `^` always upgrade latest, otherwise follow semver.
+      if (operator === '^') {
+        return 'latest';
+      }
+    }
+
+    return 'semver';
+  },
+};
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index dfdafd7ce544..cbf6f12aced9 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -16,6 +16,91 @@ tag: vVERSION
 
 ---
 
+## 5.11.3
+
+`2023-11-22`
+
+- 🐞 Fix Modal static method create `zIndex` too high will cover other popup content. [#46012](https://github.com/ant-design/ant-design/pull/46012)
+- Image
+  - 🆕 Image preview support mobile touch interactive. [#45989](https://github.com/ant-design/ant-design/pull/45989) [@JarvisArt](https://github.com/JarvisArt)
+  - 🐞 Fixed Image preview `z-index` conflict when in a nested pop-up. [#45979](https://github.com/ant-design/ant-design/pull/45979) [@kiner-tang](https://github.com/kiner-tang)
+- 🐞 Fix Collapse header cursor style. [#45994](https://github.com/ant-design/ant-design/pull/45994)
+- 🐞 Fix ColorPicker not support Form disabled config. [#45978](https://github.com/ant-design/ant-design/pull/45978) [@RedJue](https://github.com/RedJue)
+- 🐞 Fix Typography.Text `ellipsis.tooltip` cannot open under Layout component. [#45962](https://github.com/ant-design/ant-design/pull/45962)
+- 🐞 Remove Select native 🔍 icon from search input in Safari. [#46008](https://github.com/ant-design/ant-design/pull/46008)
+- 💄 Remove Rate useless style.[#45927](https://github.com/ant-design/ant-design/pull/45927) [@JarvisArt](https://github.com/JarvisArt)
+- 🛠 UMD `antd.js` will try to reuse global `@ant-design/cssinjs` first now. [#46009](https://github.com/ant-design/ant-design/pull/46009)
+- 🌐 Improve `eu_ES` localization. [#45928](https://github.com/ant-design/ant-design/pull/45928) [@ionlizarazu](https://github.com/ionlizarazu)
+
+## 5.11.2
+
+`2023-11-17`
+
+- 🆕 Table with `virtual` can now customize `components` except the `components.body`. [#45857](https://github.com/ant-design/ant-design/pull/45857)
+- 🐞 Fix Button with href and disabled that could be focused. [#45910](https://github.com/ant-design/ant-design/pull/45910) [@MadCcc](https://github.com/MadCcc)
+- 🐞 Fix `zIndex` logic problem that message and notification are covered when multiple Modal are opened. [#45911](https://github.com/ant-design/ant-design/pull/45911) [#45864](https://github.com/ant-design/ant-design/pull/45864) [@kiner-tang](https://github.com/kiner-tang)
+- 💄 Fix QRCode `style.padding` is not working. [#45815](https://github.com/ant-design/ant-design/pull/45815)
+- 💄 Optimize Carousel dots border radius style. [#45817](https://github.com/ant-design/ant-design/pull/45817)
+- TypeScript
+  - 🤖 Optimize List `gutter` property type definition. [#45791](https://github.com/ant-design/ant-design/pull/45791) [@Asanio06](https://github.com/Asanio06)
+
+## 5.11.1
+
+`2023-11-09`
+
+- 🐞 Fix Dropdown use wrong `zIndex` when nest items. [#45761](https://github.com/ant-design/ant-design/pull/45761)
+- 🐞 Fix Upload should show remove icon when `showRemoveIcon` is specified to true explicitly. [#45752](https://github.com/ant-design/ant-design/pull/45752)
+- 🐞 Fix Descriptions use `children` structure missing the Descriptions.Item `key` prop. [#45757](https://github.com/ant-design/ant-design/pull/45757)
+- 🐞 Fix Message that token specified in component scope not work. [#45721](https://github.com/ant-design/ant-design/pull/45721) [@MadCcc](https://github.com/MadCcc)
+- 🐞 Fix Popconfirm not compatible with `visible` prop. [#45702](https://github.com/ant-design/ant-design/pull/45702) [@linhf123](https://github.com/linhf123)
+- 🐞 Fix Tag default background color not correct. [#45711](https://github.com/ant-design/ant-design/pull/45711) [@kiner-tang](https://github.com/kiner-tang)
+- 💄 Fix Notification that `style.width` not work. [#45681](https://github.com/ant-design/ant-design/pull/45681) [@MadCcc](https://github.com/MadCcc)
+- 🐞 Fix App console unexpected attr warning when set `component=false`. [#45671](https://github.com/ant-design/ant-design/pull/45671) [@li-jia-nan](https://github.com/li-jia-nan)
+- TypeScript
+  - 🤖 App support generic type definition. [#45669](https://github.com/ant-design/ant-design/pull/45669) [@JexLau](https://github.com/JexLau)
+
+## 5.11.0
+
+`2023-11-03`
+
+- Slider
+  - 🆕 Slider will show tooltip when focus handler. [#45653](https://github.com/ant-design/ant-design/pull/45653)
+  - 💄 Slider handler should be movable after click tracker. [#45651](https://github.com/ant-design/ant-design/pull/45651)
+- InputNumber
+  - 🆕 InputNumber support `changeOnBlur` prop to disable trigger `onChange` event when blur. [#45395](https://github.com/ant-design/ant-design/pull/45395)
+  - 🐞 Fix InputNumber in Form with `hasFeedback` that will lose focus when feedback icon appear. [#45632](https://github.com/ant-design/ant-design/pull/45632) [@MadCcc](https://github.com/MadCcc)
+  - 🐞 Fix InputNumber dynamic modify `formatter` not working. [#45325](https://github.com/ant-design/ant-design/pull/45325)
+- Table
+  - 🆕 Table `columnTitle` support render function. [#41937](https://github.com/ant-design/ant-design/pull/41937) [@Zhou-Bill](https://github.com/Zhou-Bill)
+  - 🛠 Refactor Table `ref` to support `scrollTo` to scroll to target `key` or `index` or `top`. [#45245](https://github.com/ant-design/ant-design/pull/45245)
+- Tabs
+  - 🆕 Tabs `items` support tab pane level `destroyInactiveTabPane`. [#45359](https://github.com/ant-design/ant-design/pull/45359)
+  - 🐞 Fix Tabs overflow blinking when Tab bar has decimal width. [#45370](https://github.com/ant-design/ant-design/pull/45370)
+- ConfigProvider
+  - 🆕 ConfigProvider support RangePicker `className` and `style` properties. [#45479](https://github.com/ant-design/ant-design/pull/45479) [@chenzhuo198](https://github.com/chenzhuo198)
+  - 🆕 ConfigProvider support Dropdown `className` and `style` properties. [#45621](https://github.com/ant-design/ant-design/pull/45621) [@li-jia-nan](https://github.com/li-jia-nan)
+- 🆕 ColorPicker `preset` prop support `defaultOpen` to control whether preset colors is open by default. [#45607](https://github.com/ant-design/ant-design/pull/45607) [@Wxh16144](https://github.com/Wxh16144)
+- 🆕 Select support `optionRender` prop. [#45529](https://github.com/ant-design/ant-design/pull/45529) [@RedJue](https://github.com/RedJue)
+- 🆕 Pagination support combine `simple` and `showSizeChanger`. [#45538](https://github.com/ant-design/ant-design/pull/45538)
+- 🆕 Spin support `fullscreen` to display as backdrop. [#44986](https://github.com/ant-design/ant-design/pull/44986) [@Rafael-Martins](https://github.com/Rafael-Martins) [#45436](https://github.com/ant-design/ant-design/pull/45436) [@li-jia-nan](https://github.com/li-jia-nan)
+- 🆕 Form `validateFields` support `dirty` for validating touched and validated fields. [#45389](https://github.com/ant-design/ant-design/pull/45389)
+- 🆕 Watermark support `inherit` prop to disable watermark pass to Drawer and Modal. [#45319](https://github.com/ant-design/ant-design/pull/45319)
+- 🆕 App support `component` for customization. [#45292](https://github.com/ant-design/ant-design/pull/45292)
+- 🆕 Input and Input.TextArea support `count` custom character count (for example, fix emoji character length to `1`); `count.max` supports out-of-range styles; restore emoji to native count to solve the problem of `maxLength` and `value` mismatch. [#45140](https://github.com/ant-design/ant-design/pull/45140)
+- 🐞 Fix Dropdown not trigger `onOpenChange` when click menu item to close the popup. [#45378](https://github.com/ant-design/ant-design/pull/45378)
+- 💄 Modal static function support `styles`. [#45558](https://github.com/ant-design/ant-design/pull/45558) [@KotoriK](https://github.com/KotoriK)
+- 💄 Optimize z-index logic of popup components, and make them don't block each other by default. [#45512](https://github.com/ant-design/ant-design/pull/45512) [#45490](https://github.com/ant-design/ant-design/pull/45490) [@kiner-tang](https://github.com/kiner-tang)
+  - Optimize z-index logic of Menu. [#45498](https://github.com/ant-design/ant-design/pull/45498) [@kiner-tang](https://github.com/kiner-tang)
+  - Optimize z-index logic of DatePicker and TimePicker. [#45497](https://github.com/ant-design/ant-design/pull/45497) [@kiner-tang](https://github.com/kiner-tang)
+  - Optimize z-index logic of Drawer. [#45496](https://github.com/ant-design/ant-design/pull/45496) [#45417](https://github.com/ant-design/ant-design/pull/45417) [@kiner-tang](https://github.com/kiner-tang)
+  - Optimize z-index logic of Cascader, TreeSelect and AutoComplete. [#45494](https://github.com/ant-design/ant-design/pull/45494) [@kiner-tang](https://github.com/kiner-tang)
+  - Optimize z-index logic of Dropdown. [#45486](https://github.com/ant-design/ant-design/pull/45486) [@kiner-tang](https://github.com/kiner-tang)
+  - Optimize z-index logic of Tour. [#45425](https://github.com/ant-design/ant-design/pull/45425) [@kiner-tang](https://github.com/kiner-tang)
+  - Optimize z-index logic of Tooltip. [#45422](https://github.com/ant-design/ant-design/pull/45422) [@kiner-tang](https://github.com/kiner-tang)
+  - Optimize z-index logic of Popover. [#45420](https://github.com/ant-design/ant-design/pull/45420) [@kiner-tang](https://github.com/kiner-tang)
+  - Optimize z-index logic of Popconfirm. [#45421](https://github.com/ant-design/ant-design/pull/45421) [@kiner-tang](https://github.com/kiner-tang)
+  - Optimize z-index logic of Modal and Select. [#45346](https://github.com/ant-design/ant-design/pull/45346) [@kiner-tang](https://github.com/kiner-tang)
+
 ## 5.10.3
 
 `2023-10-30`
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index cb605d6f3953..354bcceda3f6 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -16,6 +16,91 @@ tag: vVERSION
 
 ---
 
+## 5.11.3
+
+`2023-11-22`
+
+- 🐞 修复 Modal 静态方法创建 `zIndex` 过高会覆盖其他弹出内容的问题。[#46012](https://github.com/ant-design/ant-design/pull/46012)
+- Image
+  - 🆕 Image 预览支持移动触摸事件交互。[#45989](https://github.com/ant-design/ant-design/pull/45989) [@JarvisArt](https://github.com/JarvisArt)
+  - 🐞 修复 Image 预览在嵌套弹框中 `z-index` 设置不正确的问题。[#45979](https://github.com/ant-design/ant-design/pull/45979) [@kiner-tang](https://github.com/kiner-tang)
+- 🐞 修复 Collapse 可折叠区域鼠标 `hover` 样式问题。[#45994](https://github.com/ant-design/ant-design/pull/45994)
+- 🐞 修复 ColorPicker 不支持 Form 组件的禁用问题。[#45978](https://github.com/ant-design/ant-design/pull/45978) [@RedJue](https://github.com/RedJue)
+- 🐞 修复 Typography.Text `code` 在 Layout 下开启 `ellipsis` 时 tooltip 无效的问题。[#45962](https://github.com/ant-design/ant-design/pull/45962)
+- 🐞 修复 Select 搜索框在 Safari 下显示多余的 🔍 图标。[#46008](https://github.com/ant-design/ant-design/pull/46008)
+- 💄 删除 Rate 组件无用样式。 [#45927](https://github.com/ant-design/ant-design/pull/45927) [@JarvisArt](https://github.com/JarvisArt)
+- 🛠 UMD 版本 `antd.js` 现在会优先使用全局的 `@ant-design/cssinjs` 依赖。[#46009](https://github.com/ant-design/ant-design/pull/46009)
+- 🌐 补充 `eu_ES` 国际化内容。[#45928](https://github.com/ant-design/ant-design/pull/45928) [@ionlizarazu](https://github.com/ionlizarazu)
+
+## 5.11.2
+
+`2023-11-17`
+
+- 🆕 放开 Table `virtual` 下 `components` 的限制，现在除了 `components.body` 都可以自定义。[#45857](https://github.com/ant-design/ant-design/pull/45857)
+- 🐞 修复 Button 带有链接且禁用时可以被聚焦到的问题。[#45910](https://github.com/ant-design/ant-design/pull/45910) [@MadCcc](https://github.com/MadCcc)
+- 🐞 修复 `zIndex` 逻辑，解决多层 Modal 打开时，message 与 notification 被遮盖的问题。[#45911](https://github.com/ant-design/ant-design/pull/45911) [#45864](https://github.com/ant-design/ant-design/pull/45864) [@kiner-tang](https://github.com/kiner-tang)
+- 💄 修复 QRCode 设置 `style.padding` 时无效的问题。[#45815](https://github.com/ant-design/ant-design/pull/45815)
+- 💄 优化 Carousel 切换条圆角样式。[#45817](https://github.com/ant-design/ant-design/pull/45817)
+- TypeScript
+  - 🤖 优化 List 属性 `gutter` 的类型定义。[#45791](https://github.com/ant-design/ant-design/pull/45791) [@Asanio06](https://github.com/Asanio06)
+
+## 5.11.1
+
+`2023-11-09`
+
+- 🐞 修复 Dropdown 在嵌套列表时 `zIndex` 错误的问题。[#45761](https://github.com/ant-design/ant-design/pull/45761)
+- 🐞 修复 Upload 显式指定 `showRemoveIcon: true` 时删除图标未显示的问题。[#45752](https://github.com/ant-design/ant-design/pull/45752)
+- 🐞 修复 Descriptions 使用 `children` 结构语法糖时，会丢失 Descriptions.Item 的 `key` 的问题。[#45757](https://github.com/ant-design/ant-design/pull/45757)
+- 🐞 修复 Message 组件在组件范围设置全局 `token` 无效的问题。[#45721](https://github.com/ant-design/ant-design/pull/45721) [@MadCcc](https://github.com/MadCcc)
+- 🐞 修复 Popconfirm 不兼容 `visible` 的问题。[#45702](https://github.com/ant-design/ant-design/pull/45702) [@linhf123](https://github.com/linhf123)
+- 🐞 修复默认 Tag 的背景颜色不正确的问题。[#45711](https://github.com/ant-design/ant-design/pull/45711) [@kiner-tang](https://github.com/kiner-tang)
+- 💄 修复 Notification 组件设置 `style.width` 无效的问题。[#45681](https://github.com/ant-design/ant-design/pull/45681) [@MadCcc](https://github.com/MadCcc)
+- 🐞 修复 App 设置 `component=false` 时，会报非预期的属性警告的问题。[#45671](https://github.com/ant-design/ant-design/pull/45671) [@li-jia-nan](https://github.com/li-jia-nan)
+- TypeScript
+  - 🤖 App 支持泛型定义。[#45669](https://github.com/ant-design/ant-design/pull/45669) [@JexLau](https://github.com/JexLau)
+
+## 5.11.0
+
+`2023-11-03`
+
+- Slider
+  - 🆕 Slider 聚焦滑块时现在会显示 Tooltip。[#45653](https://github.com/ant-design/ant-design/pull/45653)
+  - 💄 优化 Slider 交互体验，点击轨道后可直接拖拽滑块。[#45651](https://github.com/ant-design/ant-design/pull/45651)
+- InputNumber
+  - 🆕 InputNumber 添加 `changeOnBlur` 属性以支持在失去焦点时不触发 `onChange` 事件。[#45395](https://github.com/ant-design/ant-design/pull/45395)
+  - 🐞 修复 InputNumber 组件在 Form 组件中使用并且启用 `hasFeedback` 时，反馈图标出现会使 InputNumber 失去焦点的问题。[#45632](https://github.com/ant-design/ant-design/pull/45632) [@MadCcc](https://github.com/MadCcc)
+  - 🐞 修复 InputNumber 动态改变 `formatter` 不生效的问题。[#45325](https://github.com/ant-design/ant-design/pull/45325)
+- Table
+  - 🆕 Table 组件 `columnTitle` 支持传入 render 方法。[#41937](https://github.com/ant-design/ant-design/pull/41937) [@Zhou-Bill](https://github.com/Zhou-Bill)
+  - 🛠 重构 Table `ref` 支持 `scrollTo` 以滚动到目标 `key` 或 `index` 或 `top`。[#45245](https://github.com/ant-design/ant-design/pull/45245)
+- Tabs
+  - 🆕 Tabs `items` 支持单个标签页设置 `destroyInactiveTabPane`。[#45359](https://github.com/ant-design/ant-design/pull/45359)
+  - 🐞 修复 Tabs 的标签宽度存在小数时，滚动会出现抖动的问题。[#45370](https://github.com/ant-design/ant-design/pull/45370)
+- ConfigProvider
+  - 🆕 ConfigProvider 支持 RangePicker 组件的 `className` 和 `style` 属性。[#45479](https://github.com/ant-design/ant-design/pull/45479) [@chenzhuo198](https://github.com/chenzhuo198)
+  - 🆕 ConfigProvider 支持 Dropdown 组件的 `className` 和 `style` 属性。[#45621](https://github.com/ant-design/ant-design/pull/45621) [@li-jia-nan](https://github.com/li-jia-nan)
+- 🆕 ColorPicker 组件 `preset` 新增 `defaultOpen` 属性，可控制预设颜色默认是否展开。[#45607](https://github.com/ant-design/ant-design/pull/45607) [@Wxh16144](https://github.com/Wxh16144)
+- 🆕 Select 组件支持 `optionRender` 方法。[#45529](https://github.com/ant-design/ant-design/pull/45529) [@RedJue](https://github.com/RedJue)
+- 🆕 Pagination 组件支持组合 `simple` 和 `showSizeChanger` 使用。[#45538](https://github.com/ant-design/ant-design/pull/45538)
+- 🆕 Spin 组件新增 `fullscreen` 属性，支持全屏展示。[#44986](https://github.com/ant-design/ant-design/pull/44986) [@Rafael-Martins](https://github.com/Rafael-Martins) [#45436](https://github.com/ant-design/ant-design/pull/45436) [@li-jia-nan](https://github.com/li-jia-nan)
+- 🆕 Form `validateFields` 支持 `dirty` 参数以校验被修改过和校验过的字段。[#45389](https://github.com/ant-design/ant-design/pull/45389)
+- 🆕 Watermark 支持 `inherit` 配置，关闭水印传导至弹出 Drawer 与 Modal。[#45319](https://github.com/ant-design/ant-design/pull/45319)
+- 🆕 App 支持 `component` 以自定义渲染元素。[#45292](https://github.com/ant-design/ant-design/pull/45292)
+- 🆕 Input 与 Input.TextArea 支持 `count` 自定义字符计数（例如固定 emoji 字符长度为 `1`）；`count.max` 支持超出范围样式；将 emoji 计数还原为原生计数以解决 `maxLength` 与 `value` 不匹配的问题。[#45140](https://github.com/ant-design/ant-design/pull/45140)
+- 🐞 修复 Dropdown 在点击菜单项关闭弹出框时不会触发 `onOpenChange` 的问题。[#45378](https://github.com/ant-design/ant-design/pull/45378)
+- 💄 Modal 静态方法支持 `styles` 属性。[#45558](https://github.com/ant-design/ant-design/pull/45558) [@KotoriK](https://github.com/KotoriK)
+- 💄 优化弹层组件的 `z-index` 逻辑，使其在默认情况下不会互相遮挡。[#45512](https://github.com/ant-design/ant-design/pull/45512) [#45490](https://github.com/ant-design/ant-design/pull/45490) [@kiner-tang](https://github.com/kiner-tang)
+  - 优化 Menu 组件 `z-index` 逻辑。[#45498](https://github.com/ant-design/ant-design/pull/45498) [@kiner-tang](https://github.com/kiner-tang)
+  - 优化 DatePicker、TimePicker 组件 `z-index` 逻辑。[#45497](https://github.com/ant-design/ant-design/pull/45497) [@kiner-tang](https://github.com/kiner-tang)
+  - 优化 Drawer 组件 `z-index` 逻辑。[#45496](https://github.com/ant-design/ant-design/pull/45496) [#45417](https://github.com/ant-design/ant-design/pull/45417) [@kiner-tang](https://github.com/kiner-tang)
+  - 优化 Cascader、TreeSelect、AutoComplete 组件 `z-index` 逻辑。[#45494](https://github.com/ant-design/ant-design/pull/45494) [@kiner-tang](https://github.com/kiner-tang)
+  - 优化 Dropdown 组件 `z-index` 逻辑。[#45486](https://github.com/ant-design/ant-design/pull/45486) [@kiner-tang](https://github.com/kiner-tang)
+  - 优化 Tour 组件 `z-index` 逻辑。[#45425](https://github.com/ant-design/ant-design/pull/45425) [@kiner-tang](https://github.com/kiner-tang)
+  - 优化 Tooltip 组件 `z-index` 逻辑。[#45422](https://github.com/ant-design/ant-design/pull/45422) [@kiner-tang](https://github.com/kiner-tang)
+  - 优化 Popover 组件 `z-index` 逻辑。[#45420](https://github.com/ant-design/ant-design/pull/45420) [@kiner-tang](https://github.com/kiner-tang)
+  - 优化 Popconfirm 组件 `z-index` 逻辑。[#45421](https://github.com/ant-design/ant-design/pull/45421) [@kiner-tang](https://github.com/kiner-tang)
+  - 优化 Modal、Select 组件 `z-index` 逻辑。[#45346](https://github.com/ant-design/ant-design/pull/45346) [@kiner-tang](https://github.com/kiner-tang)
+
 ## 5.10.3
 
 `2023-10-30`
diff --git a/README-zh_CN.md b/README-zh_CN.md
index 1d9e5c6e417c..ff2c60baa56d 100644
--- a/README-zh_CN.md
+++ b/README-zh_CN.md
@@ -84,7 +84,7 @@ pnpm add antd
 
 ## 🔨 示例
 
-```jsx
+```tsx
 import React from 'react';
 import { Button, DatePicker } from 'antd';
 
@@ -94,6 +94,8 @@ const App = () => (
     <DatePicker />
   </>
 );
+
+export default App;
 ```
 
 ### 🌈 定制主题
@@ -102,7 +104,7 @@ const App = () => (
 
 ### 🛡 TypeScript
 
-参考 [在 TypeScript 中使用](https://ant.design/docs/react/use-in-typescript-cn)。
+`antd` 使用 TypeScript 编写，具有完整的类型定义，参考 [在 create-react-app 中使用](https://ant.design/docs/react/use-with-create-react-app-cn)。
 
 ## 🌍 国际化
 
diff --git a/README.md b/README.md
index 82971f3c6632..18fbbcd8ea7a 100644
--- a/README.md
+++ b/README.md
@@ -84,7 +84,7 @@ pnpm add antd
 
 ## 🔨 Usage
 
-```jsx
+```tsx
 import React from 'react';
 import { Button, DatePicker } from 'antd';
 
@@ -94,11 +94,13 @@ const App = () => (
     <DatePicker placeholder="select date" />
   </>
 );
+
+export default App;
 ```
 
 ### TypeScript
 
-`antd` is written in TypeScript with complete definitions, check [Use in TypeScript](https://ant.design/docs/react/use-in-typescript) to get started.
+`antd` is written in TypeScript with complete definitions, check [Usage with create-react-app](https://ant.design/docs/react/use-with-create-react-app) to get started.
 
 ## 🌍 Internationalization
 
@@ -146,11 +148,11 @@ Open your browser and visit http://127.0.0.1:8001 , see more at [Development](ht
 
 ## 🤝 Contributing [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
 
-Read our [contributing guide](https://ant.design/docs/react/contributing) and let's build a better antd together.
+Let's build a better antd together.
 
-We welcome all contributions. Please read our [CONTRIBUTING.md](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md) first. You can submit any ideas as [pull requests](https://github.com/ant-design/ant-design/pulls) or as [GitHub issues](https://github.com/ant-design/ant-design/issues). If you'd like to improve code, check out the [Development Instructions](https://github.com/ant-design/ant-design/wiki/Development) and have a good time! :)
+We welcome all contributions. Please read our [Contributing Guide](https://ant.design/docs/react/contributing) first. You can submit any ideas as [Pull Requests](https://github.com/ant-design/ant-design/pulls) or as [GitHub Issues](https://github.com/ant-design/ant-design/issues). If you'd like to improve code, check out the [Development Instructions](https://github.com/ant-design/ant-design/wiki/Development) and have a good time! :)
 
-If you are a collaborator, please follow our [Pull Request principle](https://github.com/ant-design/ant-design/wiki/PR-principle) to create a Pull Request with [collaborator template](https://github.com/ant-design/ant-design/compare?expand=1&template=collaborator.md).
+If you are a collaborator, please follow our [Pull Request Principle](https://github.com/ant-design/ant-design/wiki/PR-principle) to create a Pull Request with our [Pull Request Template](https://github.com/ant-design/ant-design/wiki/PR-principle#pull-request-template).
 
 [![Let's fund issues in this repository](https://raw.githubusercontent.com/BoostIO/issuehunt-materials/master/v1/issuehunt-button-v1.svg)](https://issuehunt.io/repos/34526884)
 
diff --git a/alias/cssinjs.js b/alias/cssinjs.js
new file mode 100644
index 000000000000..ab46a110abff
--- /dev/null
+++ b/alias/cssinjs.js
@@ -0,0 +1,19 @@
+/* eslint-disable global-require, import/no-unresolved */
+
+// This is a alias proxy, which will use global `@ant-design/cssinjs` first.
+// Use local if global not found.
+let cssinjs;
+
+if (typeof window !== 'undefined' && window.antdCssinjs) {
+  // Use window UMD version
+  cssinjs = window.antdCssinjs;
+} else if (typeof global !== 'undefined' && global.antdCssinjs) {
+  // Use global UMD version
+  cssinjs = global.antdCssinjs;
+} else {
+  // Use local version.
+  // Use relative path since webpack will also replace module here.
+  cssinjs = require('../node_modules/@ant-design/cssinjs');
+}
+
+module.exports = cssinjs;
diff --git a/components/_util/__tests__/useZIndex.test.tsx b/components/_util/__tests__/useZIndex.test.tsx
new file mode 100644
index 000000000000..be5da90d1305
--- /dev/null
+++ b/components/_util/__tests__/useZIndex.test.tsx
@@ -0,0 +1,374 @@
+import type { PropsWithChildren } from 'react';
+import React, { useEffect } from 'react';
+import { render } from '@testing-library/react';
+import type { ImageProps, MenuProps } from 'antd';
+import {
+  AutoComplete,
+  Cascader,
+  ColorPicker,
+  DatePicker,
+  Drawer,
+  Dropdown,
+  Image,
+  Menu,
+  Modal,
+  Popconfirm,
+  Popover,
+  Select,
+  Tooltip,
+  Tour,
+  TreeSelect,
+} from 'antd';
+
+import { waitFakeTimer } from '../../../tests/utils';
+import type { ZIndexConsumer, ZIndexContainer } from '../hooks/useZIndex';
+import { consumerBaseZIndexOffset, containerBaseZIndexOffset, useZIndex } from '../hooks/useZIndex';
+import zIndexContext from '../zindexContext';
+
+const WrapWithProvider: React.FC<PropsWithChildren<{ containerType: ZIndexContainer }>> = ({
+  children,
+  containerType,
+}) => {
+  const [, contextZIndex] = useZIndex(containerType);
+  return <zIndexContext.Provider value={contextZIndex}>{children}</zIndexContext.Provider>;
+};
+
+const containerComponent: Record<
+  ZIndexContainer,
+  React.FC<PropsWithChildren<{ rootClassName?: string }>>
+> = {
+  Modal: ({ children, ...restProps }) => (
+    <Modal {...restProps} open>
+      {children}
+    </Modal>
+  ),
+  Drawer: ({ children, ...restProps }) => (
+    <Drawer {...restProps} open>
+      {children}
+    </Drawer>
+  ),
+  Popover: ({ children, ...restProps }) => (
+    <Popover {...restProps} open content="test">
+      {children}
+    </Popover>
+  ),
+  Popconfirm: ({ children, ...restProps }) => (
+    <Popconfirm {...restProps} open title="test">
+      {children}
+    </Popconfirm>
+  ),
+  Tooltip: ({ children, ...restProps }) => (
+    <Tooltip {...restProps} open title="test">
+      {children}
+    </Tooltip>
+  ),
+  Tour: ({ children, ...restProps }) => (
+    <Tour
+      {...restProps}
+      open
+      steps={[
+        {
+          title: 'cover title',
+          description: children,
+        },
+      ]}
+    />
+  ),
+};
+
+const options = [
+  {
+    label: 'Option 1',
+    value: '1',
+  },
+  {
+    label: 'Option 2',
+    value: '2',
+  },
+];
+
+const items: MenuProps['items'] = [
+  {
+    label: 'Test',
+    key: 'SubMenu',
+    children: [
+      {
+        type: 'group',
+        label: 'Item 1',
+        children: [
+          {
+            label: 'Option 1',
+            key: 'setting:1',
+          },
+          {
+            label: 'Option 2',
+            key: 'setting:2',
+          },
+        ],
+      },
+      {
+        type: 'group',
+        label: 'Item 2',
+        children: [
+          {
+            label: 'Option 3',
+            key: 'setting:3',
+          },
+          {
+            label: 'Option 4',
+            key: 'setting:4',
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const consumerComponent: Record<ZIndexConsumer, React.FC<{ rootClassName: string }>> = {
+  SelectLike: ({ rootClassName, ...props }) => (
+    <>
+      <Select
+        {...props}
+        rootClassName={`${rootClassName} comp-item comp-Select`}
+        options={options}
+        open
+      />
+      <Cascader
+        {...props}
+        rootClassName={`${rootClassName} comp-item comp-Cascader`}
+        options={options}
+        open
+      />
+      <TreeSelect
+        {...props}
+        rootClassName={`${rootClassName} comp-item comp-TreeSelect`}
+        treeData={options}
+        open
+      />
+      <AutoComplete
+        {...props}
+        rootClassName={`${rootClassName} comp-item comp-AutoComplete`}
+        options={options}
+        open
+      />
+      <ColorPicker {...props} open rootClassName={`${rootClassName} comp-item comp-ColorPicker`} />
+    </>
+  ),
+  Dropdown: (props) => (
+    <Dropdown
+      {...props}
+      menu={{
+        items: options.map((item) => ({
+          key: item.value,
+          label: item.label,
+        })),
+      }}
+      open
+    >
+      <button type="button">test</button>
+    </Dropdown>
+  ),
+  DatePicker: ({ rootClassName, ...props }) => (
+    <>
+      <DatePicker {...props} rootClassName={`${rootClassName} comp-item comp-DatePicker`} open />
+      <DatePicker.TimePicker
+        {...props}
+        rootClassName={`${rootClassName} comp-item comp-TimePicker`}
+        open
+      />
+    </>
+  ),
+  Menu: (props) => <Menu {...props} items={items} defaultOpenKeys={['SubMenu']} />,
+  ImagePreview: ({ rootClassName }: ImageProps) => (
+    <Image
+      src="xxx"
+      preview={{
+        visible: true,
+        rootClassName: `${rootClassName} comp-item comp-ImagePreview`,
+      }}
+    />
+  ),
+};
+
+function getConsumerSelector(baseSelector: string, consumer: ZIndexConsumer): string {
+  let selector = baseSelector;
+  if (consumer === 'SelectLike') {
+    selector = ['Select', 'Cascader', 'TreeSelect', 'AutoComplete', 'ColorPicker']
+      .map((item) =>
+        item === 'ColorPicker'
+          ? `${baseSelector}.ant-popover-placement-bottomLeft`
+          : `${baseSelector}.comp-${item}.ant-slide-up`,
+      )
+      .join(',');
+  } else if (consumer === 'DatePicker') {
+    selector = ['DatePicker', 'TimePicker']
+      .map((item) => `${baseSelector}.comp-${item}.ant-picker-dropdown`)
+      .join(',');
+  } else if (['Menu'].includes(consumer)) {
+    selector = `${baseSelector}.ant-menu-submenu-placement-rightTop`;
+  } else if (consumer === 'ImagePreview') {
+    selector = `${baseSelector}.comp-ImagePreview`;
+  }
+  return selector;
+}
+
+describe('Test useZIndex hooks', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+  const containers = Object.keys(containerComponent);
+  const consumers = Object.keys(consumerComponent);
+
+  containers.forEach((containerKey) => {
+    consumers.forEach((key) => {
+      describe(`Test ${key} zIndex in ${containerKey}`, () => {
+        it('Test hooks', () => {
+          const fn = jest.fn();
+          const Child = () => {
+            const [zIndex] = useZIndex(key as ZIndexConsumer);
+            useEffect(() => {
+              fn(zIndex);
+            }, [zIndex]);
+            return <div>Child</div>;
+          };
+
+          const App = () => (
+            <WrapWithProvider containerType={containerKey as ZIndexContainer}>
+              <WrapWithProvider containerType={containerKey as ZIndexContainer}>
+                <WrapWithProvider containerType={containerKey as ZIndexContainer}>
+                  <Child />
+                </WrapWithProvider>
+              </WrapWithProvider>
+            </WrapWithProvider>
+          );
+          render(<App />);
+          expect(fn).toHaveBeenLastCalledWith(
+            1000 +
+              containerBaseZIndexOffset[containerKey as ZIndexContainer] * 3 +
+              consumerBaseZIndexOffset[key as ZIndexConsumer],
+          );
+        });
+
+        it('Test Component', async () => {
+          const Container = containerComponent[containerKey as ZIndexContainer];
+          const Consumer = consumerComponent[key as ZIndexConsumer];
+
+          const App = () => (
+            <>
+              <Consumer rootClassName="consumer1" />
+              <Container rootClassName="container1">
+                <Consumer rootClassName="consumer2" />
+                <Container rootClassName="container2">
+                  <Consumer rootClassName="consumer3" />
+                </Container>
+              </Container>
+            </>
+          );
+
+          const { unmount } = render(<App />);
+
+          await waitFakeTimer(1000);
+
+          const selector1 = getConsumerSelector('.consumer1', key as ZIndexConsumer);
+          const selector2 = getConsumerSelector('.consumer2', key as ZIndexConsumer);
+          const selector3 = getConsumerSelector('.consumer3', key as ZIndexConsumer);
+
+          if (['SelectLike', 'DatePicker'].includes(key)) {
+            let comps = document.querySelectorAll(selector1);
+            comps.forEach((comp) => {
+              expect((comp as HTMLDivElement).style.zIndex).toBeFalsy();
+            });
+            comps = document.querySelectorAll(selector2);
+            comps.forEach((comp) => {
+              const isColorPicker = (comp as HTMLDivElement).className.includes('comp-ColorPicker');
+              const consumerOffset = isColorPicker
+                ? containerBaseZIndexOffset.Popover
+                : consumerBaseZIndexOffset[key as ZIndexConsumer];
+              expect((comp as HTMLDivElement).style.zIndex).toBe(
+                String(
+                  1000 +
+                    containerBaseZIndexOffset[containerKey as ZIndexContainer] +
+                    consumerOffset,
+                ),
+              );
+            });
+
+            comps = document.querySelectorAll(selector3);
+            comps.forEach((comp) => {
+              const isColorPicker = (comp as HTMLDivElement).className.includes('comp-ColorPicker');
+              const consumerOffset = isColorPicker
+                ? containerBaseZIndexOffset.Popover
+                : consumerBaseZIndexOffset[key as ZIndexConsumer];
+              expect((comp as HTMLDivElement).style.zIndex).toBe(
+                String(
+                  1000 +
+                    containerBaseZIndexOffset[containerKey as ZIndexContainer] * 2 +
+                    consumerOffset,
+                ),
+              );
+            });
+          } else {
+            if (key === 'Tour') {
+              expect((document.querySelector(selector1) as HTMLDivElement).style.zIndex).toBe(
+                '1001',
+              );
+            } else {
+              expect(
+                (document.querySelector(selector1) as HTMLDivElement).style.zIndex,
+              ).toBeFalsy();
+            }
+
+            expect((document.querySelector(selector2) as HTMLDivElement).style.zIndex).toBe(
+              String(
+                1000 +
+                  containerBaseZIndexOffset[containerKey as ZIndexContainer] +
+                  consumerBaseZIndexOffset[key as ZIndexConsumer],
+              ),
+            );
+
+            expect((document.querySelector(selector3) as HTMLDivElement).style.zIndex).toBe(
+              String(
+                1000 +
+                  containerBaseZIndexOffset[containerKey as ZIndexContainer] * 2 +
+                  consumerBaseZIndexOffset[key as ZIndexConsumer],
+              ),
+            );
+          }
+
+          unmount();
+        }, 15000);
+      });
+    });
+  });
+
+  it('Modal static func should always use max zIndex', async () => {
+    jest.useFakeTimers();
+
+    const instance = Modal.confirm({
+      title: 'bamboo',
+      content: <Select open />,
+    });
+
+    await waitFakeTimer();
+
+    expect(document.querySelector('.ant-modal-wrap')).toHaveStyle({
+      zIndex: '2000',
+    });
+
+    expect(document.querySelector('.ant-select-dropdown')).toHaveStyle({
+      zIndex: '2050',
+    });
+
+    instance.destroy();
+
+    await waitFakeTimer();
+
+    // Clean up for static method
+    document.body.innerHTML = '';
+
+    jest.useRealTimers();
+  });
+});
diff --git a/components/_util/hooks/useMultipleSelect.ts b/components/_util/hooks/useMultipleSelect.ts
new file mode 100644
index 000000000000..2fd9ff464612
--- /dev/null
+++ b/components/_util/hooks/useMultipleSelect.ts
@@ -0,0 +1,47 @@
+import { useCallback, useState } from 'react';
+
+export type PrevSelectedIndex = null | number;
+
+/**
+ * @title multipleSelect hooks
+ * @description multipleSelect by hold down shift key
+ */
+export default function useMultipleSelect<T, K>(getKey: (item: T) => K) {
+  const [prevSelectedIndex, setPrevSelectedIndex] = useState<PrevSelectedIndex>(null);
+
+  const multipleSelect = useCallback(
+    (currentSelectedIndex: number, data: T[], selectedKeys: Set<K>) => {
+      const configPrevSelectedIndex = prevSelectedIndex ?? currentSelectedIndex;
+
+      // add/delete the selected range
+      const startIndex = Math.min(configPrevSelectedIndex || 0, currentSelectedIndex);
+      const endIndex = Math.max(configPrevSelectedIndex || 0, currentSelectedIndex);
+      const rangeKeys = data.slice(startIndex, endIndex + 1).map((item) => getKey(item));
+      const shouldSelected = rangeKeys.some((rangeKey) => !selectedKeys.has(rangeKey));
+      const changedKeys: K[] = [];
+
+      rangeKeys.forEach((item) => {
+        if (shouldSelected) {
+          if (!selectedKeys.has(item)) {
+            changedKeys.push(item);
+          }
+          selectedKeys.add(item);
+        } else {
+          selectedKeys.delete(item);
+          changedKeys.push(item);
+        }
+      });
+
+      setPrevSelectedIndex(shouldSelected ? endIndex : null);
+
+      return changedKeys;
+    },
+    [prevSelectedIndex],
+  );
+
+  const updatePrevSelectedIndex = (val: PrevSelectedIndex) => {
+    setPrevSelectedIndex(val);
+  };
+
+  return [multipleSelect, updatePrevSelectedIndex] as const;
+}
diff --git a/components/_util/hooks/useProxyImperativeHandle.ts b/components/_util/hooks/useProxyImperativeHandle.ts
new file mode 100644
index 000000000000..849630cbcfef
--- /dev/null
+++ b/components/_util/hooks/useProxyImperativeHandle.ts
@@ -0,0 +1,47 @@
+// Proxy the dom ref with `{ nativeElement, otherFn }` type
+// ref: https://github.com/ant-design/ant-design/discussions/45242
+
+import { useImperativeHandle, type Ref } from 'react';
+
+function fillProxy(
+  element: HTMLElement & { _antProxy?: Record<string, any> },
+  handler: Record<string, any>,
+) {
+  element._antProxy = element._antProxy || {};
+
+  Object.keys(handler).forEach((key) => {
+    if (!(key in element._antProxy!)) {
+      const ori = (element as any)[key];
+      element._antProxy![key] = ori;
+
+      (element as any)[key] = handler[key];
+    }
+  });
+
+  return element;
+}
+
+export default function useProxyImperativeHandle<
+  NativeELementType extends HTMLElement,
+  ReturnRefType extends { nativeElement: NativeELementType },
+>(ref: Ref<any> | undefined, init: () => ReturnRefType) {
+  return useImperativeHandle(ref, () => {
+    const refObj = init();
+    const { nativeElement } = refObj;
+
+    if (typeof Proxy !== 'undefined') {
+      return new Proxy(nativeElement, {
+        get(obj: any, prop: any) {
+          if ((refObj as any)[prop]) {
+            return (refObj as any)[prop];
+          }
+
+          return Reflect.get(obj, prop);
+        },
+      });
+    }
+
+    // Fallback of IE
+    return fillProxy(nativeElement, refObj);
+  });
+}
diff --git a/components/_util/hooks/useZIndex.tsx b/components/_util/hooks/useZIndex.tsx
new file mode 100644
index 000000000000..786c3fd7405e
--- /dev/null
+++ b/components/_util/hooks/useZIndex.tsx
@@ -0,0 +1,66 @@
+import React from 'react';
+
+import useToken from '../../theme/useToken';
+import zIndexContext from '../zindexContext';
+
+export type ZIndexContainer = 'Modal' | 'Drawer' | 'Popover' | 'Popconfirm' | 'Tooltip' | 'Tour';
+
+export type ZIndexConsumer = 'SelectLike' | 'Dropdown' | 'DatePicker' | 'Menu' | 'ImagePreview';
+
+// Z-Index control range
+// Container: 1000 + offset 100 (max base + 10 * offset = 2000)
+// Popover: offset 50
+// Notification: Container Max zIndex + componentOffset
+
+const CONTAINER_OFFSET = 100;
+const CONTAINER_OFFSET_MAX_COUNT = 10;
+
+export const CONTAINER_MAX_OFFSET = CONTAINER_OFFSET * CONTAINER_OFFSET_MAX_COUNT;
+
+export const containerBaseZIndexOffset: Record<ZIndexContainer, number> = {
+  Modal: CONTAINER_OFFSET,
+  Drawer: CONTAINER_OFFSET,
+  Popover: CONTAINER_OFFSET,
+  Popconfirm: CONTAINER_OFFSET,
+  Tooltip: CONTAINER_OFFSET,
+  Tour: CONTAINER_OFFSET,
+};
+export const consumerBaseZIndexOffset: Record<ZIndexConsumer, number> = {
+  SelectLike: 50,
+  Dropdown: 50,
+  DatePicker: 50,
+  Menu: 50,
+  ImagePreview: 1,
+};
+
+function isContainerType(type: ZIndexContainer | ZIndexConsumer): type is ZIndexContainer {
+  return type in containerBaseZIndexOffset;
+}
+
+export function useZIndex(
+  componentType: ZIndexContainer | ZIndexConsumer,
+  customZIndex?: number,
+): [zIndex: number | undefined, contextZIndex: number] {
+  const [, token] = useToken();
+  const parentZIndex = React.useContext(zIndexContext);
+  const isContainer = isContainerType(componentType);
+
+  if (customZIndex !== undefined) {
+    return [customZIndex, customZIndex];
+  }
+
+  let zIndex = parentZIndex ?? 0;
+
+  if (isContainer) {
+    zIndex +=
+      // Use preset token zIndex by default but not stack when has parent container
+      (parentZIndex ? 0 : token.zIndexPopupBase) +
+      // Container offset
+      containerBaseZIndexOffset[componentType];
+
+    zIndex = Math.min(zIndex, token.zIndexPopupBase + CONTAINER_MAX_OFFSET);
+  } else {
+    zIndex += consumerBaseZIndexOffset[componentType];
+  }
+  return [parentZIndex === undefined ? customZIndex : zIndex, zIndex];
+}
diff --git a/components/_util/type.ts b/components/_util/type.ts
index 02f9aaaca969..25115ca42007 100644
--- a/components/_util/type.ts
+++ b/components/_util/type.ts
@@ -2,3 +2,5 @@
 export type LiteralUnion<T extends string> = T | (string & {});
 
 export type AnyObject = Record<PropertyKey, any>;
+
+export type CustomComponent<P = AnyObject> = React.ComponentType<P> | string;
diff --git a/components/_util/zindexContext.ts b/components/_util/zindexContext.ts
new file mode 100644
index 000000000000..39df635c168b
--- /dev/null
+++ b/components/_util/zindexContext.ts
@@ -0,0 +1,9 @@
+import React from 'react';
+
+const zIndexContext = React.createContext<number | undefined>(undefined);
+
+if (process.env.NODE_ENV !== 'production') {
+  zIndexContext.displayName = 'zIndexContext';
+}
+
+export default zIndexContext;
diff --git a/components/app/__tests__/index.test.tsx b/components/app/__tests__/index.test.tsx
index c67fed6ce686..aafcac03eafb 100644
--- a/components/app/__tests__/index.test.tsx
+++ b/components/app/__tests__/index.test.tsx
@@ -1,6 +1,7 @@
-import { SmileOutlined } from '@ant-design/icons';
 import React, { useEffect } from 'react';
+import { SmileOutlined } from '@ant-design/icons';
 import type { NotificationConfig } from 'antd/es/notification/interface';
+
 import App from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
@@ -208,4 +209,28 @@ describe('App', () => {
       ).toBeTruthy();
     });
   });
+
+  describe('component', () => {
+    it('replace', () => {
+      const { container } = render(
+        <App component="section">
+          <p />
+        </App>,
+      );
+
+      expect(container.querySelector('section.ant-app')).toBeTruthy();
+    });
+
+    it('to false', () => {
+      const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+      const { container } = render(
+        <App component={false}>
+          <p />
+        </App>,
+      );
+      expect(warnSpy).not.toHaveBeenCalled();
+      expect(container.querySelector('.ant-app')).toBeFalsy();
+      warnSpy.mockRestore();
+    });
+  });
 });
diff --git a/components/app/context.ts b/components/app/context.ts
index 23f73aa1446b..4b3220a3da7d 100644
--- a/components/app/context.ts
+++ b/components/app/context.ts
@@ -1,12 +1,13 @@
 import React from 'react';
-import type { MessageInstance, ConfigOptions as MessageConfig } from '../message/interface';
-import type { NotificationInstance, NotificationConfig } from '../notification/interface';
+
+import type { ConfigOptions as MessageConfig, MessageInstance } from '../message/interface';
 import type { HookAPI as ModalHookAPI } from '../modal/useModal';
+import type { NotificationConfig, NotificationInstance } from '../notification/interface';
 
-export type AppConfig = {
+export interface AppConfig {
   message?: MessageConfig;
   notification?: NotificationConfig;
-};
+}
 
 export const AppConfigContext = React.createContext<AppConfig>({});
 
diff --git a/components/app/index.en-US.md b/components/app/index.en-US.md
index 155e82a30649..ddbd04af366e 100644
--- a/components/app/index.en-US.md
+++ b/components/app/index.en-US.md
@@ -29,8 +29,8 @@ Application wrapper for some global usages.
 App provides upstream and downstream method calls through `Context`, because useApp needs to be used as a subcomponent, we recommend encapsulating App at the top level in the application.
 
 ```tsx
-import { App } from 'antd';
 import React from 'react';
+import { App } from 'antd';
 
 const MyPage: React.FC = () => {
   const { message, notification, modal } = App.useApp();
@@ -102,8 +102,9 @@ export { message, modal, notification };
 
 ```tsx
 // sub page
-import { Button, Space } from 'antd';
 import React from 'react';
+import { Button, Space } from 'antd';
+
 import { message } from './store';
 
 export default () => {
@@ -129,6 +130,7 @@ Common props ref：[Common props](/docs/react/common-props)
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
+| component | Config render element, if `false` will not create DOM node | ComponentType | div | 5.11.0 |
 | message | Global config for Message | [MessageConfig](/components/message/#messageconfig) | - | 5.3.0 |
 | notification | Global config for Notification | [NotificationConfig](/components/notification/#notificationconfig) | - | 5.3.0 |
 
diff --git a/components/app/index.tsx b/components/app/index.tsx
index 56df12b953a8..03692525280e 100644
--- a/components/app/index.tsx
+++ b/components/app/index.tsx
@@ -1,6 +1,8 @@
-import classNames from 'classnames';
 import type { ReactNode } from 'react';
 import React, { useContext } from 'react';
+import classNames from 'classnames';
+
+import type { AnyObject, CustomComponent } from '../_util/type';
 import type { ConfigConsumerProps } from '../config-provider';
 import { ConfigContext } from '../config-provider';
 import useMessage from '../message/useMessage';
@@ -10,17 +12,18 @@ import type { AppConfig, useAppProps } from './context';
 import AppContext, { AppConfigContext } from './context';
 import useStyle from './style';
 
-export interface AppProps extends AppConfig {
+export interface AppProps<P = AnyObject> extends AppConfig {
   style?: React.CSSProperties;
   className?: string;
   rootClassName?: string;
   prefixCls?: string;
   children?: ReactNode;
+  component?: CustomComponent<P> | false;
 }
 
 const useApp = () => React.useContext<useAppProps>(AppContext);
 
-const App: React.FC<AppProps> & { useApp: typeof useApp } = (props) => {
+const App: React.FC<AppProps> & { useApp: () => useAppProps } = (props) => {
   const {
     prefixCls: customizePrefixCls,
     children,
@@ -29,6 +32,7 @@ const App: React.FC<AppProps> & { useApp: typeof useApp } = (props) => {
     message,
     notification,
     style,
+    component = 'div',
   } = props;
   const { getPrefixCls } = useContext<ConfigConsumerProps>(ConfigContext);
   const prefixCls = getPrefixCls('app', customizePrefixCls);
@@ -60,15 +64,22 @@ const App: React.FC<AppProps> & { useApp: typeof useApp } = (props) => {
     [messageApi, notificationApi, ModalApi],
   );
 
+  // ============================ Render ============================
+  const Component = component === false ? React.Fragment : component;
+  const rootProps: AppProps = {
+    className: customClassName,
+    style,
+  };
+
   return wrapSSR(
     <AppContext.Provider value={memoizedContextValue}>
       <AppConfigContext.Provider value={mergedAppConfig}>
-        <div className={customClassName} style={style}>
+        <Component {...(component === false ? undefined : rootProps)}>
           {ModalContextHolder}
           {messageContextHolder}
           {notificationContextHolder}
           {children}
-        </div>
+        </Component>
       </AppConfigContext.Provider>
     </AppContext.Provider>,
   );
diff --git a/components/app/index.zh-CN.md b/components/app/index.zh-CN.md
index 7d6ee0c9704f..056c54716058 100644
--- a/components/app/index.zh-CN.md
+++ b/components/app/index.zh-CN.md
@@ -131,6 +131,7 @@ export default () => {
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
+| component | 设置渲染元素，为 `false` 则不创建 DOM 节点 | ComponentType | div | 5.11.0 |
 | message | App 内 Message 的全局配置 | [MessageConfig](/components/message-cn/#messageconfig) | - | 5.3.0 |
 | notification | App 内 Notification 的全局配置 | [NotificationConfig](/components/notification-cn/#notificationconfig) | - | 5.3.0 |
 
diff --git a/components/auto-complete/index.tsx b/components/auto-complete/index.tsx
index 30a62f50170d..7870b73a4c01 100755
--- a/components/auto-complete/index.tsx
+++ b/components/auto-complete/index.tsx
@@ -18,6 +18,7 @@ import type {
   SelectProps,
 } from '../select';
 import Select from '../select';
+import { useZIndex } from '../_util/hooks/useZIndex';
 
 const { Option } = Select;
 
@@ -128,6 +129,9 @@ const AutoComplete: React.ForwardRefRenderFunction<RefSelectProps, AutoCompleteP
 
   const prefixCls = getPrefixCls('select', customizePrefixCls);
 
+  // ============================ zIndex ============================
+  const [zIndex] = useZIndex('SelectLike', props.dropdownStyle?.zIndex as number);
+
   return (
     <Select
       ref={ref}
@@ -135,6 +139,10 @@ const AutoComplete: React.ForwardRefRenderFunction<RefSelectProps, AutoCompleteP
       {...omit(props, ['dataSource', 'dropdownClassName'])}
       prefixCls={prefixCls}
       popupClassName={popupClassName || dropdownClassName}
+      dropdownStyle={{
+        ...props.dropdownStyle,
+        zIndex,
+      }}
       className={classNames(`${prefixCls}-auto-complete`, className)}
       mode={Select.SECRET_COMBOBOX_MODE_DO_NOT_USE as SelectProps['mode']}
       {...{
diff --git a/components/avatar/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/avatar/__tests__/__snapshots__/demo-extend.test.ts.snap
index 6e13e4991338..69105054c41c 100644
--- a/components/avatar/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/avatar/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -439,7 +439,7 @@ Array [
                 </span>
                 <div
                   class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
-                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1200;"
                 >
                   <div
                     class="ant-tooltip-arrow"
@@ -822,7 +822,7 @@ Array [
             </span>
             <div
               class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
-              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1200;"
             >
               <div
                 class="ant-tooltip-arrow"
@@ -948,7 +948,7 @@ Array [
             </span>
             <div
               class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
-              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1200;"
             >
               <div
                 class="ant-tooltip-arrow"
@@ -1074,7 +1074,7 @@ Array [
             </span>
             <div
               class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
-              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1200;"
             >
               <div
                 class="ant-tooltip-arrow"
diff --git a/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap
index d1c0a066c48a..1009804424ab 100644
--- a/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -898,6 +898,7 @@ Array [
       <a
         class="ant-btn ant-btn-default ant-btn-lg ant-btn-icon-only"
         href="https://www.google.com"
+        tabindex="0"
       >
         <span
           class="ant-btn-icon"
@@ -1072,6 +1073,7 @@ exports[`renders components/button/demo/disabled.tsx extend context correctly 1`
     <a
       class="ant-btn ant-btn-primary"
       href="https://ant.design/index-cn"
+      tabindex="0"
     >
       <span>
         Href Primary
@@ -1079,7 +1081,7 @@ exports[`renders components/button/demo/disabled.tsx extend context correctly 1`
     </a>
     <a
       class="ant-btn ant-btn-primary ant-btn-disabled"
-      href="https://ant.design/index-cn"
+      tabindex="-1"
     >
       <span>
         Href Primary(disabled)
@@ -1550,6 +1552,7 @@ exports[`renders components/button/demo/icon.tsx extend context correctly 1`] =
     <a
       class="ant-btn ant-btn-default ant-btn-icon-only"
       href="https://www.google.com"
+      tabindex="0"
     >
       <span
         class="ant-btn-icon"
diff --git a/components/button/__tests__/__snapshots__/demo.test.ts.snap b/components/button/__tests__/__snapshots__/demo.test.ts.snap
index c2506f70547f..5d7fa93cd96a 100644
--- a/components/button/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/button/__tests__/__snapshots__/demo.test.ts.snap
@@ -805,6 +805,7 @@ Array [
       <a
         class="ant-btn ant-btn-default ant-btn-lg ant-btn-icon-only"
         href="https://www.google.com"
+        tabindex="0"
       >
         <span
           class="ant-btn-icon"
@@ -977,6 +978,7 @@ exports[`renders components/button/demo/disabled.tsx correctly 1`] = `
     <a
       class="ant-btn ant-btn-primary"
       href="https://ant.design/index-cn"
+      tabindex="0"
     >
       <span>
         Href Primary
@@ -984,7 +986,7 @@ exports[`renders components/button/demo/disabled.tsx correctly 1`] = `
     </a>
     <a
       class="ant-btn ant-btn-primary ant-btn-disabled"
-      href="https://ant.design/index-cn"
+      tabindex="-1"
     >
       <span>
         Href Primary(disabled)
@@ -1375,6 +1377,7 @@ exports[`renders components/button/demo/icon.tsx correctly 1`] = `
     <a
       class="ant-btn ant-btn-default ant-btn-icon-only"
       href="https://www.google.com"
+      tabindex="0"
     >
       <span
         class="ant-btn-icon"
diff --git a/components/button/__tests__/__snapshots__/index.test.tsx.snap b/components/button/__tests__/__snapshots__/index.test.tsx.snap
index 14af7fb3be36..88a1b6a324e8 100644
--- a/components/button/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/button/__tests__/__snapshots__/index.test.tsx.snap
@@ -383,6 +383,7 @@ exports[`Button should support link button 1`] = `
 <a
   class="ant-btn ant-btn-default"
   href="https://ant.design"
+  tabindex="0"
   target="_blank"
 >
   <span>
diff --git a/components/button/button.tsx b/components/button/button.tsx
index d224167f0906..fa4a3ff8f1a5 100644
--- a/components/button/button.tsx
+++ b/components/button/button.tsx
@@ -260,9 +260,11 @@ const InternalButton: React.ForwardRefRenderFunction<
         className={classNames(classes, {
           [`${prefixCls}-disabled`]: mergedDisabled,
         })}
+        href={mergedDisabled ? undefined : linkButtonRestProps.href}
         style={fullStyle}
         onClick={handleClick}
         ref={buttonRef as React.Ref<HTMLAnchorElement>}
+        tabIndex={mergedDisabled ? -1 : 0}
       >
         {iconNode}
         {kids}
diff --git a/components/card/Card.tsx b/components/card/Card.tsx
index 5521e360bc2e..cfe959eee71c 100644
--- a/components/card/Card.tsx
+++ b/components/card/Card.tsx
@@ -1,7 +1,8 @@
+import * as React from 'react';
 import classNames from 'classnames';
 import type { Tab } from 'rc-tabs/lib/interface';
 import omit from 'rc-util/lib/omit';
-import * as React from 'react';
+
 import { ConfigContext } from '../config-provider';
 import useSize from '../config-provider/hooks/useSize';
 import Skeleton from '../skeleton';
@@ -46,14 +47,24 @@ export interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 't
   tabProps?: TabsProps;
 }
 
-function getAction(actions: React.ReactNode[]): React.ReactNode[] {
-  return actions.map<React.ReactNode>((action, index) => (
-    // eslint-disable-next-line react/no-array-index-key
-    <li style={{ width: `${100 / actions.length}%` }} key={`action-${index}`}>
-      <span>{action}</span>
-    </li>
-  ));
-}
+const ActionNode: React.FC<{ prefixCls: string; actions: React.ReactNode[] }> = (props) => {
+  const { prefixCls, actions = [] } = props;
+  return (
+    <ul className={`${prefixCls}-actions`}>
+      {actions.map<React.ReactNode>((action, index) => {
+        // Move this out since eslint not allow index key
+        // And eslint-disable makes conflict with rollup
+        // ref https://github.com/ant-design/ant-design/issues/46022
+        const key = `action-${index}`;
+        return (
+          <li style={{ width: `${100 / actions.length}%` }} key={key}>
+            <span>{action}</span>
+          </li>
+        );
+      })}
+    </ul>
+  );
+};
 
 const Card = React.forwardRef<HTMLDivElement, CardProps>((props, ref) => {
   const {
@@ -144,10 +155,9 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>((props, ref) => {
       {loading ? loadingBlock : children}
     </div>
   );
+
   const actionDom =
-    actions && actions.length ? (
-      <ul className={`${prefixCls}-actions`}>{getAction(actions)}</ul>
-    ) : null;
+    actions && actions.length ? <ActionNode prefixCls={prefixCls} actions={actions} /> : null;
 
   const divProps = omit(others, ['onTabChange']);
 
diff --git a/components/carousel/index.en-US.md b/components/carousel/index.en-US.md
index 392b1a81e523..484a1d0db581 100644
--- a/components/carousel/index.en-US.md
+++ b/components/carousel/index.en-US.md
@@ -32,13 +32,17 @@ Common props ref：[Common props](/docs/react/common-props)
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | autoplay | Whether to scroll automatically | boolean | false |  |
+| autoplaySpeed | Delay between each auto scroll (in milliseconds) | number | 3000 |  |
 | dotPosition | The position of the dots, which can be one of `top` `bottom` `left` `right` | string | `bottom` |  |
 | dots | Whether to show the dots at the bottom of the gallery, `object` for `dotsClass` and any others | boolean \| { className?: string } | true |  |
-| waitForAnimate | Whether to wait for the animation when switching | boolean | false |  |
+| fade | Whether to use fade transition | boolean | false |  |
+| infinite | Infinitely wrap around contents | boolean | true |  |
+| speed | Animation speed in milliseconds | number | 500 |  |
 | easing | Transition interpolation function name | string | `linear` |  |
 | effect | Transition effect | `scrollx` \| `fade` | `scrollx` |  |
 | afterChange | Callback function called after the current index changes | (current: number) => void | - |  |
 | beforeChange | Callback function called before the current index changes | (current: number, next: number) => void | - |  |
+| waitForAnimate | Whether to wait for the animation when switching | boolean | false |  |
 
 ## Methods
 
diff --git a/components/carousel/index.zh-CN.md b/components/carousel/index.zh-CN.md
index 4b53c62f128a..20958ef57b44 100644
--- a/components/carousel/index.zh-CN.md
+++ b/components/carousel/index.zh-CN.md
@@ -33,13 +33,17 @@ demo:
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | autoplay | 是否自动切换 | boolean | false |  |
+| autoplaySpeed | 自动切换的间隔（毫秒） | number | 3000 |  |
 | dotPosition | 面板指示点位置，可选 `top` `bottom` `left` `right` | string | `bottom` |  |
 | dots | 是否显示面板指示点，如果为 `object` 则同时可以指定 `dotsClass` 或者 | boolean \| { className?: string } | true |  |
-| waitForAnimate | 是否等待切换动画 | boolean | false |  |
+| fade | 使用渐变切换动效 | boolean | false |  |
+| infinite | 是否无限循环切换（实现方式是复制两份 children 元素，如果子元素有副作用则可能会引发 bug） | boolean | true |  |
+| speed | 切换动效的时间（毫秒） | number | 500 |  |
 | easing | 动画效果 | string | `linear` |  |
 | effect | 动画效果函数 | `scrollx` \| `fade` | `scrollx` |  |
 | afterChange | 切换面板的回调 | (current: number) => void | - |  |
 | beforeChange | 切换面板的回调 | (current: number, next: number) => void | - |  |
+| waitForAnimate | 是否等待切换动画 | boolean | false |  |
 
 ## 方法
 
diff --git a/components/carousel/style/index.ts b/components/carousel/style/index.ts
index 391df4f58954..e783f4a615e8 100644
--- a/components/carousel/style/index.ts
+++ b/components/carousel/style/index.ts
@@ -230,7 +230,7 @@ const genCarouselStyle: GenerateStyle<CarouselToken> = (token) => {
             fontSize: 0,
             background: token.colorBgContainer,
             border: 0,
-            borderRadius: 1,
+            borderRadius: token.dotHeight,
             outline: 'none',
             cursor: 'pointer',
             opacity: 0.3,
diff --git a/components/cascader/index.tsx b/components/cascader/index.tsx
index 50b680400c5f..98c3d69b7150 100644
--- a/components/cascader/index.tsx
+++ b/components/cascader/index.tsx
@@ -34,6 +34,7 @@ import useCheckable from './hooks/useCheckable';
 import useColumnIcons from './hooks/useColumnIcons';
 import CascaderPanel from './Panel';
 import useStyle from './style';
+import { useZIndex } from '../_util/hooks/useZIndex';
 
 // Align the design since we use `rc-select` in root. This help:
 // - List search content will show all content
@@ -288,6 +289,9 @@ const Cascader = React.forwardRef<CascaderRef, CascaderProps<any>>((props, ref)
 
   const mergedAllowClear = allowClear === true ? { clearIcon } : allowClear;
 
+  // ============================ zIndex ============================
+  const [zIndex] = useZIndex('SelectLike', restProps.dropdownStyle?.zIndex as number);
+
   // ==================== Render =====================
   const renderNode = (
     <RcCascader
@@ -324,6 +328,10 @@ const Cascader = React.forwardRef<CascaderRef, CascaderProps<any>>((props, ref)
       checkable={checkable}
       dropdownClassName={mergedDropdownClassName}
       dropdownPrefixCls={customizePrefixCls || cascaderPrefixCls}
+      dropdownStyle={{
+        ...restProps.dropdownStyle,
+        zIndex,
+      }}
       choiceTransitionName={getTransitionName(rootPrefixCls, '', choiceTransitionName)}
       transitionName={getTransitionName(rootPrefixCls, 'slide-up', transitionName)}
       getPopupContainer={getPopupContainer || getContextPopupContainer}
diff --git a/components/checkbox/Checkbox.tsx b/components/checkbox/Checkbox.tsx
index 6e790d4f6197..b4f351a01089 100644
--- a/components/checkbox/Checkbox.tsx
+++ b/components/checkbox/Checkbox.tsx
@@ -35,6 +35,7 @@ export interface AbstractCheckboxProps<T> {
   autoFocus?: boolean;
   type?: string;
   skipGroup?: boolean;
+  required?: boolean;
 }
 
 export interface CheckboxChangeEventTarget extends CheckboxProps {
diff --git a/components/checkbox/Group.tsx b/components/checkbox/Group.tsx
index 94dba906651e..0e22569430ea 100644
--- a/components/checkbox/Group.tsx
+++ b/components/checkbox/Group.tsx
@@ -18,6 +18,7 @@ export interface CheckboxOptionType {
   title?: string;
   id?: string;
   onChange?: (e: CheckboxChangeEvent) => void;
+  required?: boolean;
 }
 
 export interface AbstractCheckboxGroupProps {
@@ -126,6 +127,7 @@ const InternalGroup: React.ForwardRefRenderFunction<HTMLDivElement, CheckboxGrou
           style={option.style}
           title={option.title}
           id={option.id}
+          required={option.required}
         >
           {option.label}
         </Checkbox>
diff --git a/components/collapse/style/index.ts b/components/collapse/style/index.ts
index 18630323b9f5..3af31b0d7408 100644
--- a/components/collapse/style/index.ts
+++ b/components/collapse/style/index.ts
@@ -130,17 +130,8 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = (token) => {
           },
         },
 
-        [`${componentCls}-header-collapsible-only`]: {
-          cursor: 'default',
-
-          [`${componentCls}-header-text`]: {
-            flex: 'none',
-            cursor: 'pointer',
-          },
-        },
-
         [`${componentCls}-icon-collapsible-only`]: {
-          cursor: 'default',
+          cursor: 'unset',
 
           [`${componentCls}-expand-icon`]: {
             cursor: 'pointer',
diff --git a/components/color-picker/ColorPicker.tsx b/components/color-picker/ColorPicker.tsx
index 3f8f4d183b20..2fcb54ed0520 100644
--- a/components/color-picker/ColorPicker.tsx
+++ b/components/color-picker/ColorPicker.tsx
@@ -12,6 +12,7 @@ import { getStatusClassNames } from '../_util/statusUtils';
 import { devUseWarning } from '../_util/warning';
 import type { ConfigConsumerProps } from '../config-provider/context';
 import { ConfigContext } from '../config-provider/context';
+import DisabledContext from '../config-provider/DisabledContext';
 import useSize from '../config-provider/hooks/useSize';
 import type { SizeType } from '../config-provider/SizeContext';
 import { FormItemInputContext, NoFormStyle } from '../form/context';
@@ -104,7 +105,8 @@ const ColorPicker: CompoundedComponent = (props) => {
   } = props;
 
   const { getPrefixCls, direction, colorPicker } = useContext<ConfigConsumerProps>(ConfigContext);
-
+  const contextDisabled = useContext(DisabledContext);
+  const mergedDisabled = disabled ?? contextDisabled;
   const [, token] = useToken();
 
   const [colorValue, setColorValue] = useColorState(token.colorPrimary, {
@@ -113,7 +115,7 @@ const ColorPicker: CompoundedComponent = (props) => {
   });
   const [popupOpen, setPopupOpen] = useMergedState(false, {
     value: open,
-    postState: (openData) => !disabled && openData,
+    postState: (openData) => !mergedDisabled && openData,
     onChange: onOpenChange,
   });
   const [formatValue, setFormatValue] = useMergedState(format, {
@@ -219,7 +221,7 @@ const ColorPicker: CompoundedComponent = (props) => {
     color: colorValue,
     allowClear,
     colorCleared,
-    disabled,
+    disabled: mergedDisabled,
     disabledAlpha,
     presets,
     panelRender,
@@ -230,12 +232,14 @@ const ColorPicker: CompoundedComponent = (props) => {
 
   const mergedStyle: React.CSSProperties = { ...colorPicker?.style, ...style };
 
+  // ============================ zIndex ============================
+
   return wrapSSR(
     <Popover
       style={styles?.popup}
       overlayInnerStyle={styles?.popupOverlayInner}
       onOpenChange={(visible) => {
-        if (popupAllowCloseRef.current && !disabled) {
+        if (popupAllowCloseRef.current && !mergedDisabled) {
           setPopupOpen(visible);
         }
       }}
@@ -259,7 +263,7 @@ const ColorPicker: CompoundedComponent = (props) => {
           style={mergedStyle}
           color={value ? generateColor(value) : colorValue}
           prefixCls={prefixCls}
-          disabled={disabled}
+          disabled={mergedDisabled}
           colorCleared={colorCleared}
           showText={showText}
           format={formatValue}
diff --git a/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap
index 5b6d1e5a9849..02bf8b6337be 100644
--- a/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -159,7 +159,7 @@ Array [
                 </div>
                 <div
                   class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; width: 68px;"
+                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                 >
                   <div>
                     <div
@@ -542,7 +542,7 @@ Array [
                 </div>
                 <div
                   class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; width: 68px;"
+                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                 >
                   <div>
                     <div
@@ -927,7 +927,7 @@ exports[`renders components/color-picker/demo/change-completed.tsx extend contex
                 </div>
                 <div
                   class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; width: 68px;"
+                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                 >
                   <div>
                     <div
@@ -1310,7 +1310,7 @@ Array [
                 </div>
                 <div
                   class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; width: 68px;"
+                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                 >
                   <div>
                     <div
@@ -1698,7 +1698,7 @@ Array [
                 </div>
                 <div
                   class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; width: 68px;"
+                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                 >
                   <div>
                     <div
@@ -2060,7 +2060,7 @@ Array [
                 </div>
                 <div
                   class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; width: 68px;"
+                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                 >
                   <div>
                     <div
@@ -2385,7 +2385,7 @@ exports[`renders components/color-picker/demo/format.tsx extend context correctl
                           </div>
                           <div
                             class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                            style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; width: 68px;"
+                            style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                           >
                             <div>
                               <div
@@ -2793,7 +2793,7 @@ exports[`renders components/color-picker/demo/format.tsx extend context correctl
                           </div>
                           <div
                             class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                            style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; width: 68px;"
+                            style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                           >
                             <div>
                               <div
@@ -3419,7 +3419,7 @@ exports[`renders components/color-picker/demo/format.tsx extend context correctl
                           </div>
                           <div
                             class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                            style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; width: 68px;"
+                            style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                           >
                             <div>
                               <div
@@ -4069,7 +4069,7 @@ exports[`renders components/color-picker/demo/panel-render.tsx extend context co
                             </div>
                             <div
                               class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; width: 68px;"
+                              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                             >
                               <div>
                                 <div
@@ -4900,7 +4900,7 @@ exports[`renders components/color-picker/demo/panel-render.tsx extend context co
                               </div>
                               <div
                                 class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                                style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; width: 68px;"
+                                style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                               >
                                 <div>
                                   <div
@@ -5290,7 +5290,7 @@ Array [
                 </div>
                 <div
                   class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; width: 68px;"
+                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                 >
                   <div>
                     <div
@@ -6050,7 +6050,7 @@ exports[`renders components/color-picker/demo/pure-panel.tsx extend context corr
                   </div>
                   <div
                     class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; width: 68px;"
+                    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 150; width: 68px;"
                   >
                     <div>
                       <div
@@ -6453,7 +6453,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
                       </div>
                       <div
                         class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; width: 68px;"
+                        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                       >
                         <div>
                           <div
@@ -6833,7 +6833,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
                       </div>
                       <div
                         class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; width: 68px;"
+                        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                       >
                         <div>
                           <div
@@ -7213,7 +7213,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
                       </div>
                       <div
                         class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; width: 68px;"
+                        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                       >
                         <div>
                           <div
@@ -7606,7 +7606,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
                       </div>
                       <div
                         class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; width: 68px;"
+                        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                       >
                         <div>
                           <div
@@ -7991,7 +7991,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
                       </div>
                       <div
                         class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; width: 68px;"
+                        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                       >
                         <div>
                           <div
@@ -8376,7 +8376,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
                       </div>
                       <div
                         class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; width: 68px;"
+                        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                       >
                         <div>
                           <div
@@ -8772,7 +8772,7 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor
                   </div>
                   <div
                     class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; width: 68px;"
+                    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                   >
                     <div>
                       <div
@@ -9159,7 +9159,7 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor
                   </div>
                   <div
                     class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; width: 68px;"
+                    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                   >
                     <div>
                       <div
@@ -9563,7 +9563,7 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor
                   </div>
                   <div
                     class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; width: 68px;"
+                    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                   >
                     <div>
                       <div
@@ -9944,7 +9944,7 @@ Array [
                 </div>
                 <div
                   class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; width: 68px;"
+                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                 >
                   <div>
                     <div
@@ -10327,7 +10327,7 @@ Array [
                 </div>
                 <div
                   class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; width: 68px;"
+                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                 >
                   <div>
                     <div
diff --git a/components/color-picker/__tests__/index.test.tsx b/components/color-picker/__tests__/index.test.tsx
index 6ffa1af07dd6..161b4b692650 100644
--- a/components/color-picker/__tests__/index.test.tsx
+++ b/components/color-picker/__tests__/index.test.tsx
@@ -225,6 +225,39 @@ describe('ColorPicker', () => {
     expect(handleColorChange).toHaveBeenCalledTimes(2);
   });
 
+  describe('preset collapsed', () => {
+    const recommendedPreset = {
+      label: 'Recommended',
+      colors: ['#f00', '#0f0', '#00f'],
+    };
+
+    const selector = '.ant-color-picker-presets .ant-collapse-item.ant-collapse-item-active';
+
+    it('Should default collapsed work', async () => {
+      const { container } = render(<ColorPicker open presets={[recommendedPreset]} />);
+
+      expect(container.querySelectorAll(selector)).toHaveLength(1);
+    });
+
+    it('Should collapsed work', async () => {
+      const { container } = render(
+        <ColorPicker
+          open
+          presets={[
+            recommendedPreset,
+            {
+              label: 'Recent',
+              colors: ['#f00d', '#0f0d', '#00fd'],
+              defaultOpen: false,
+            },
+          ]}
+        />,
+      );
+
+      expect(container.querySelectorAll(selector)).toHaveLength(1);
+    });
+  });
+
   it('Should format change work', async () => {
     const { container } = render(<ColorPicker />);
     fireEvent.click(container.querySelector('.ant-color-picker-trigger')!);
diff --git a/components/color-picker/components/ColorPresets.tsx b/components/color-picker/components/ColorPresets.tsx
index 0bcadbef074c..adbc137f1889 100644
--- a/components/color-picker/components/ColorPresets.tsx
+++ b/components/color-picker/components/ColorPresets.tsx
@@ -34,6 +34,8 @@ const isBright = (value: Color, bgColorToken: string) => {
   return r * 0.299 + g * 0.587 + b * 0.114 > 192;
 };
 
+const genCollapsePanelKey = ({ label }: PresetsItem) => `panel-${label}`;
+
 const ColorPresets: FC<ColorPresetsProps> = ({ prefixCls, presets, value: color, onChange }) => {
   const [locale] = useLocale('ColorPicker');
   const [, token] = useToken();
@@ -43,8 +45,13 @@ const ColorPresets: FC<ColorPresetsProps> = ({ prefixCls, presets, value: color,
   });
   const colorPresetsPrefixCls = `${prefixCls}-presets`;
 
-  const activeKeys = useMemo<string[]>(
-    () => presetsValue.map((preset) => `panel-${preset.label}`),
+  const activeKeys = useMemo(
+    () =>
+      presetsValue.reduce<string[]>((acc, preset) => {
+        const { defaultOpen = true } = preset;
+        if (defaultOpen) acc.push(genCollapsePanelKey(preset));
+        return acc;
+      }, []),
     [presetsValue],
   );
 
@@ -53,7 +60,7 @@ const ColorPresets: FC<ColorPresetsProps> = ({ prefixCls, presets, value: color,
   };
 
   const items: CollapseProps['items'] = presetsValue.map((preset) => ({
-    key: `panel-${preset.label}`,
+    key: genCollapsePanelKey(preset),
     label: <div className={`${colorPresetsPrefixCls}-label`}>{preset?.label}</div>,
     children: (
       <div className={`${colorPresetsPrefixCls}-items`}>
diff --git a/components/color-picker/index.en-US.md b/components/color-picker/index.en-US.md
index b340ba2d6742..a9ca6338a45d 100644
--- a/components/color-picker/index.en-US.md
+++ b/components/color-picker/index.en-US.md
@@ -53,7 +53,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | destroyTooltipOnHide | Whether destroy popover when hidden | `boolean` | false | 5.7.0 |
 | format | Format of color | `rgb` \| `hex` \| `hsb` | `hex` | |
 | open | Whether to show popup | boolean | - | |
-| presets | 	Preset colors | `{ label: ReactNode, colors: Array<string \| Color> }[]` | - | |
+| presets | Preset colors | `{ label: ReactNode, colors: Array<string \| Color>, defaultOpen?: boolean }[]` | - | `defaultOpen: 5.11.0` |
 | placement | Placement of popup | `top` \| `topLeft` \| `topRight` \| `bottom` \| `bottomLeft` \| `bottomRight` | `bottomLeft` | |
 | panelRender | Custom Render Panel | `(panel: React.ReactNode, extra: { components: { Picker: FC; Presets: FC } }) => React.ReactNode` | - | 5.7.0 |
 | showText | Show color text | boolean \| `(color: Color) => React.ReactNode` | - | 5.7.0 |
diff --git a/components/color-picker/index.zh-CN.md b/components/color-picker/index.zh-CN.md
index 782611c38533..867481239fee 100644
--- a/components/color-picker/index.zh-CN.md
+++ b/components/color-picker/index.zh-CN.md
@@ -54,7 +54,7 @@ group:
 | destroyTooltipOnHide | 关闭后是否销毁弹窗 | `boolean` | false | 5.7.0 |
 | format | 颜色格式 | `rgb` \| `hex` \| `hsb` | `hex` | |
 | open | 是否显示弹出窗口 | boolean | - | |
-| presets | 预设的颜色 | `{ label: ReactNode, colors: Array<string \| Color> }[]` | - | |
+| presets | 预设的颜色 | `{ label: ReactNode, colors: Array<string \| Color>, defaultOpen?: boolean }[]` | - | `defaultOpen: 5.11.0` |
 | placement | 弹出窗口的位置 | `top` \| `topLeft` \| `topRight` \| `bottom` \| `bottomLeft` \| `bottomRight` | `bottomLeft` | |
 | panelRender | 自定义渲染面板 | `(panel: React.ReactNode, extra: { components: { Picker: FC; Presets: FC } }) => React.ReactNode` | - | 5.7.0 |
 | showText | 显示颜色文本 | boolean \| `(color: Color) => React.ReactNode` | - | 5.7.0 |
diff --git a/components/color-picker/interface.ts b/components/color-picker/interface.ts
index f0c4c3e93565..f56f5eb69396 100644
--- a/components/color-picker/interface.ts
+++ b/components/color-picker/interface.ts
@@ -11,6 +11,12 @@ export enum ColorFormat {
 export interface PresetsItem {
   label: ReactNode;
   colors: (string | Color)[];
+  /**
+   * Whether the initial state is collapsed
+   * @since 5.11.0
+   * @default true
+   */
+  defaultOpen?: boolean;
 }
 export type TriggerType = 'click' | 'hover';
 
diff --git a/components/config-provider/__tests__/style.test.tsx b/components/config-provider/__tests__/style.test.tsx
index 23f588b2c67a..355fad352407 100644
--- a/components/config-provider/__tests__/style.test.tsx
+++ b/components/config-provider/__tests__/style.test.tsx
@@ -18,6 +18,7 @@ import DatePicker from '../../date-picker';
 import Descriptions from '../../descriptions';
 import Divider from '../../divider';
 import Drawer from '../../drawer';
+import Dropdown from '../../dropdown';
 import Empty from '../../empty';
 import Flex from '../../flex';
 import Form from '../../form';
@@ -1045,6 +1046,34 @@ describe('ConfigProvider support style and className props', () => {
     expect(container.querySelector('.ant-picker')).toHaveStyle('color: red; font-size: 16px;');
   });
 
+  it('Should RangePicker className works', () => {
+    const { RangePicker } = TimePicker;
+    const { container } = render(
+      <ConfigProvider
+        rangePicker={{
+          className: 'test-class',
+        }}
+      >
+        <RangePicker />
+      </ConfigProvider>,
+    );
+    expect(container.querySelector('.ant-picker')).toHaveClass('test-class');
+  });
+
+  it('Should RangePicker style works', () => {
+    const { RangePicker } = TimePicker;
+    const { container } = render(
+      <ConfigProvider
+        rangePicker={{
+          style: { color: 'red' },
+        }}
+      >
+        <RangePicker style={{ fontSize: '16px' }} />
+      </ConfigProvider>,
+    );
+    expect(container.querySelector('.ant-picker')).toHaveStyle('color: red; font-size: 16px;');
+  });
+
   it('Should message className & style works', () => {
     const Demo: React.FC = () => {
       const [messageApi, contextHolder] = message.useMessage();
@@ -1279,4 +1308,17 @@ describe('ConfigProvider support style and className props', () => {
     expect(element).toHaveClass('cp-flex');
     expect(element).toHaveStyle({ backgroundColor: 'blue' });
   });
+
+  it('Should Dropdown className & style works', () => {
+    const { container } = render(
+      <ConfigProvider dropdown={{ className: 'cp-dropdown', style: { backgroundColor: 'red' } }}>
+        <Dropdown menu={{ items: [{ label: 'foo', key: '1' }] }} open>
+          <span>test</span>
+        </Dropdown>
+      </ConfigProvider>,
+    );
+    const element = container.querySelector<HTMLDivElement>('.ant-dropdown');
+    expect(element).toHaveClass('cp-dropdown');
+    expect(element).toHaveStyle({ backgroundColor: 'red' });
+  });
 });
diff --git a/components/config-provider/__tests__/theme.test.tsx b/components/config-provider/__tests__/theme.test.tsx
index d3c14df61c0b..dc691224beb5 100644
--- a/components/config-provider/__tests__/theme.test.tsx
+++ b/components/config-provider/__tests__/theme.test.tsx
@@ -1,10 +1,11 @@
-import { kebabCase } from 'lodash';
-import canUseDom from 'rc-util/lib/Dom/canUseDom';
 import React from 'react';
+import kebabCase from 'lodash/kebabCase';
+import canUseDom from 'rc-util/lib/Dom/canUseDom';
+
 import ConfigProvider from '..';
 import { InputNumber } from '../..';
-import { render } from '../../../tests/utils';
 import { resetWarned } from '../../_util/warning';
+import { render } from '../../../tests/utils';
 import theme from '../../theme';
 import { useToken } from '../../theme/internal';
 
diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts
index 2ecf8152247c..c7abb8a7fda1 100644
--- a/components/config-provider/context.ts
+++ b/components/config-provider/context.ts
@@ -5,18 +5,18 @@ import type { Options } from 'scroll-into-view-if-needed';
 import type { WarningContextProps } from '../_util/warning';
 import type { ShowWaveEffect } from '../_util/wave/interface';
 import type { BadgeProps } from '../badge';
-import type { ModalProps } from '../modal';
 import type { ButtonProps } from '../button';
+import type { DrawerProps } from '../drawer';
 import type { FlexProps } from '../flex/interface';
 import type { RequiredMark } from '../form/Form';
 import type { InputProps } from '../input';
 import type { Locale } from '../locale';
+import type { ModalProps } from '../modal';
 import type { SpaceProps } from '../space';
 import type { TabsProps } from '../tabs';
 import type { AliasToken, MappingAlgorithm, OverrideToken } from '../theme/interface';
 import type { RenderEmptyHandler } from './defaultRenderEmpty';
 import type { SizeType } from './SizeContext';
-import type { DrawerProps } from '../drawer';
 
 export const defaultIconPrefixCls = 'anticon';
 
@@ -171,6 +171,8 @@ export interface ConfigConsumerProps {
   tree?: ComponentStyleConfig;
   colorPicker?: ComponentStyleConfig;
   datePicker?: ComponentStyleConfig;
+  rangePicker?: ComponentStyleConfig;
+  dropdown?: ComponentStyleConfig;
   flex?: FlexConfig;
   wave?: WaveConfig;
   warning?: WarningContextProps;
diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md
index 33f41f761032..548ac8a38bc4 100644
--- a/components/config-provider/index.en-US.md
+++ b/components/config-provider/index.en-US.md
@@ -118,9 +118,11 @@ const {
 | collapse | Set Collapse common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | colorPicker | Set ColorPicker common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | datePicker | Set datePicker common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| rangePicker | Set rangePicker common props | { className?: string, style?: React.CSSProperties } | - | 5.11.0 |
 | descriptions | Set Descriptions common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | divider | Set Divider common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | drawer | Set Drawer common props | { className?: string, style?: React.CSSProperties, classNames?: [DrawerProps\["classNames"\]](/components/drawer-cn#api), styles?: [DrawerProps\["styles"\]](/components/drawer-cn#api) } | - | 5.7.0, `classNames` and `styles`: 5.10.0 |
+| dropdown | Set Dropdown common props | { className?: string, style?: React.CSSProperties } | - | 5.11.0 |
 | empty | Set Empty common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | flex | Set Flex common props | { className?: string, style?: React.CSSProperties, vertical?: boolean } | - | 5.10.0 |
 | form | Set Form common props | { className?: string, style?: React.CSSProperties, validateMessages?: [ValidateMessages](/components/form/#validatemessages), requiredMark?: boolean \| `optional`, scrollToFirstError?: boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options) } | - | requiredMark: 4.8.0; colon: 4.18.0; scrollToFirstError: 5.2.0; className: 5.7.0; style: 5.7.0 |
diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx
index ba2056fb8525..e7e612bc2c58 100644
--- a/components/config-provider/index.tsx
+++ b/components/config-provider/index.tsx
@@ -198,6 +198,8 @@ export interface ConfigProviderProps {
   tree?: ComponentStyleConfig;
   colorPicker?: ComponentStyleConfig;
   datePicker?: ComponentStyleConfig;
+  rangePicker?: ComponentStyleConfig;
+  dropdown?: ComponentStyleConfig;
   flex?: FlexConfig;
   /**
    * Wave is special component which only patch on the effect of component interaction.
@@ -339,8 +341,10 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     tree,
     colorPicker,
     datePicker,
+    rangePicker,
     flex,
     wave,
+    dropdown,
     warning: warningConfig,
   } = props;
 
@@ -430,8 +434,10 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     tree,
     colorPicker,
     datePicker,
+    rangePicker,
     flex,
     wave,
+    dropdown,
     warning: warningConfig,
   };
 
diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md
index a5b53faa4d3a..f10b2a2439b4 100644
--- a/components/config-provider/index.zh-CN.md
+++ b/components/config-provider/index.zh-CN.md
@@ -120,9 +120,11 @@ const {
 | collapse | 设置 Collapse 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | colorPicker | 设置 ColorPicker 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | datePicker | 设置 DatePicker 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| rangePicker | 设置 RangePicker 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.11.0 |
 | descriptions | 设置 Descriptions 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | divider | 设置 Divider 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | drawer | 设置 Drawer 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: [DrawerProps\["classNames"\]](/components/drawer-cn#api), styles?: [DrawerProps\["styles"\]](/components/drawer-cn#api) } | - | 5.7.0, `classNames` 和 `styles`: 5.10.0 |
+| dropdown | 设置 Dropdown 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.11.0 |
 | empty | 设置 Empty 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | flex | 设置 Flex 组件的通用属性 | { className?: string, style?: React.CSSProperties, vertical?: boolean } | - | 5.10.0 |
 | form | 设置 Form 组件的通用属性 | { className?: string, style?: React.CSSProperties, validateMessages?: [ValidateMessages](/components/form-cn#validatemessages), requiredMark?: boolean \| `optional`, colon?: boolean, scrollToFirstError?: boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options)} | - | requiredMark: 4.8.0; colon: 4.18.0; scrollToFirstError: 5.2.0; className: 5.7.0; style: 5.7.0 |
diff --git a/components/date-picker/generatePicker/generateRangePicker.tsx b/components/date-picker/generatePicker/generateRangePicker.tsx
index 7eb6c49a81a9..5c779fd870ab 100644
--- a/components/date-picker/generatePicker/generateRangePicker.tsx
+++ b/components/date-picker/generatePicker/generateRangePicker.tsx
@@ -27,6 +27,7 @@ import {
 } from '../util';
 import Components from './Components';
 import type { CommonPickerMethods, PickerComponentClass } from './interface';
+import { useZIndex } from '../../_util/hooks/useZIndex';
 
 export default function generateRangePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
   type InternalRangePickerProps = RangePickerProps<DateType> & {};
@@ -48,6 +49,7 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
       prefixCls: customizePrefixCls,
       getPopupContainer: customGetPopupContainer,
       className,
+      style,
       placement,
       size: customizeSize,
       disabled: customDisabled,
@@ -63,7 +65,7 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
     } = props;
 
     const innerRef = React.useRef<RCRangePicker<DateType>>(null);
-    const { getPrefixCls, direction, getPopupContainer } = useContext(ConfigContext);
+    const { getPrefixCls, direction, getPopupContainer, rangePicker } = useContext(ConfigContext);
     const prefixCls = getPrefixCls('picker', customizePrefixCls);
     const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction);
     const { format, showTime, picker } = props as any;
@@ -110,6 +112,9 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
 
     const locale = { ...contextLocale, ...props.locale! };
 
+    // ============================ zIndex ============================
+    const [zIndex] = useZIndex('DatePicker', props.popupStyle?.zIndex as number);
+
     return wrapSSR(
       <RCRangePicker<DateType>
         separator={
@@ -138,8 +143,10 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
           hashId,
           compactItemClassnames,
           className,
+          rangePicker?.className,
           rootClassName,
         )}
+        style={{ ...rangePicker?.style, ...style }}
         locale={locale.lang}
         prefixCls={prefixCls}
         getPopupContainer={customGetPopupContainer || getPopupContainer}
@@ -147,6 +154,10 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
         components={Components}
         direction={direction}
         dropdownClassName={classNames(hashId, popupClassName || dropdownClassName, rootClassName)}
+        popupStyle={{
+          ...props.popupStyle,
+          zIndex,
+        }}
         allowClear={mergeAllowClear(allowClear, clearIcon, <CloseCircleFilled />)}
       />,
     );
diff --git a/components/date-picker/generatePicker/generateSinglePicker.tsx b/components/date-picker/generatePicker/generateSinglePicker.tsx
index 5039f2733ff0..c79979b2b5d0 100644
--- a/components/date-picker/generatePicker/generateSinglePicker.tsx
+++ b/components/date-picker/generatePicker/generateSinglePicker.tsx
@@ -28,6 +28,7 @@ import {
 } from '../util';
 import Components from './Components';
 import type { CommonPickerMethods, DatePickRef, PickerComponentClass } from './interface';
+import { useZIndex } from '../../_util/hooks/useZIndex';
 
 export default function generatePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
   type CustomPickerProps = {
@@ -138,6 +139,8 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
         const [contextLocale] = useLocale('DatePicker', enUS);
 
         const locale = { ...contextLocale, ...props.locale! };
+        // ============================ zIndex ============================
+        const [zIndex] = useZIndex('DatePicker', props.popupStyle?.zIndex as number);
 
         return wrapSSR(
           <RCPicker<DateType>
@@ -182,6 +185,10 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
               rootClassName,
               popupClassName || dropdownClassName,
             )}
+            popupStyle={{
+              ...props.popupStyle,
+              zIndex,
+            }}
             allowClear={mergeAllowClear(allowClear, clearIcon, <CloseCircleFilled />)}
           />,
         );
diff --git a/components/date-picker/index.en-US.md b/components/date-picker/index.en-US.md
index 2801d8cb719e..43d008ec6101 100644
--- a/components/date-picker/index.en-US.md
+++ b/components/date-picker/index.en-US.md
@@ -56,6 +56,12 @@ The default locale is en-US, if you need to use other languages, recommend to us
 
 If there are special needs (only modifying single component language), Please use the property: local. Example: [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json).
 
+<!-- prettier-ignore -->
+:::warning
+When use with Nextjs App Router, make sure to add `'use client'` before import locale file of dayjs.
+It's because all components of Ant Design only works in client, importing locale in RSC will not work.
+:::
+
 ```jsx
 import locale from 'antd/es/date-picker/locale/zh_CN';
 
diff --git a/components/date-picker/index.zh-CN.md b/components/date-picker/index.zh-CN.md
index 7ed5483b3d16..c1fe46aa019d 100644
--- a/components/date-picker/index.zh-CN.md
+++ b/components/date-picker/index.zh-CN.md
@@ -57,6 +57,12 @@ demo:
 
 如有特殊需求（仅修改单一组件的语言），请使用 locale 参数，参考：[默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json)。
 
+<!-- prettier-ignore -->
+:::warning
+在搭配 Nextjs 的 App Router 使用时，注意在引入 dayjs 的 locale 文件时加上 `'use client'`。
+这是由于 Ant Design 的组件都是客户端组件，在 RSC 中引入 dayjs 的 locale 文件将不会在客户端生效。
+:::
+
 ```jsx
 import locale from 'antd/es/date-picker/locale/zh_CN';
 
diff --git a/components/descriptions/__tests__/hooks.test.tsx b/components/descriptions/__tests__/hooks.test.tsx
new file mode 100644
index 000000000000..5f3fd2175791
--- /dev/null
+++ b/components/descriptions/__tests__/hooks.test.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+import Descriptions from '..';
+import { render } from '../../../tests/utils';
+import useBreakpoint from '../../grid/hooks/useBreakpoint';
+import useItems from '../hooks/useItems';
+
+describe('Descriptions.Hooks', () => {
+  it('Should Descriptions not throw react key prop error in jsx mode', () => {
+    const Demo = () => {
+      const screens = useBreakpoint();
+      const items = useItems(
+        screens,
+        undefined,
+        <Descriptions.Item key="bamboo" label="UserName">
+          Bamboo
+        </Descriptions.Item>,
+      );
+
+      return <p>{(items[0] as any).key}</p>;
+    };
+
+    const { container } = render(<Demo />);
+    expect(container.querySelector('p')?.textContent).toBe('bamboo');
+  });
+});
diff --git a/components/descriptions/hooks/useItems.ts b/components/descriptions/hooks/useItems.ts
index 357385bde1a5..db0917772a93 100644
--- a/components/descriptions/hooks/useItems.ts
+++ b/components/descriptions/hooks/useItems.ts
@@ -6,7 +6,7 @@ import { matchScreen, type ScreenMap } from '../../_util/responsiveObserver';
 
 // Convert children into items
 const transChildren2Items = (childNodes?: React.ReactNode) =>
-  toArray(childNodes).map((node) => ({ ...node?.props }));
+  toArray(childNodes).map((node) => ({ ...node?.props, key: node.key }));
 
 export default function useItems(
   screens: ScreenMap,
diff --git a/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap b/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap
index 8917bb43c791..ad975b99342c 100644
--- a/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap
+++ b/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap
@@ -1049,7 +1049,7 @@ Array [
                               </div>
                               <div
                                 class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
-                                style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+                                style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150;"
                               >
                                 <div>
                                   <div
@@ -1226,7 +1226,7 @@ Array [
                               </div>
                               <div
                                 class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
-                                style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+                                style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150;"
                               >
                                 <div>
                                   <div
@@ -1408,7 +1408,7 @@ Array [
                               </div>
                               <div
                                 class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
-                                style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+                                style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150;"
                               >
                                 <div>
                                   <div
@@ -1635,7 +1635,7 @@ Array [
                             </div>
                             <div
                               class="ant-picker-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-picker-dropdown-range ant-picker-dropdown-placement-bottomLeft"
-                              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+                              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150;"
                             >
                               <div
                                 class="ant-picker-range-wrapper ant-picker-date-range-wrapper"
@@ -2867,6 +2867,7 @@ Array [
             </button>
             <div
               class="ant-drawer ant-drawer-right ant-drawer-open ant-drawer-inline"
+              style="z-index: 1200;"
               tabindex="-1"
             >
               <div
@@ -3536,6 +3537,7 @@ exports[`renders components/drawer/demo/scroll-debug.tsx extend context correctl
             Some contents...
             <div
               class="ant-drawer ant-drawer-right ant-drawer-open ant-drawer-inline"
+              style="z-index: 1200;"
               tabindex="-1"
             >
               <div
diff --git a/components/drawer/index.en-US.md b/components/drawer/index.en-US.md
index 2f92b5241444..e86bbe0da700 100644
--- a/components/drawer/index.en-US.md
+++ b/components/drawer/index.en-US.md
@@ -49,7 +49,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | afterOpenChange | Callback after the animation ends when switching drawers | function(open) | - |  |
 | className | Config Drawer Panel className. Use `rootClassName` if want to config top dom style | string | - |  |
 | classNames | Config Drawer build-in module's className | `header?: string; body?: string; footer?: string; mask?: string; wrapper?: string;` | - |  |
-| styles | onfig Drawer build-in module's style | `header?: CSSProperties; body?: CSSProperties; footer?: CSSProperties; mask?: CSSProperties; wrapper?: CSSProperties;` | - | 5.10.0 |
+| styles | Config Drawer build-in module's style | `header?: CSSProperties; body?: CSSProperties; footer?: CSSProperties; mask?: CSSProperties; wrapper?: CSSProperties;` | - | 5.10.0 |
 | closeIcon | Custom close icon. 5.7.0: close button will be hidden when setting to `null` or `false` | boolean \| ReactNode | &lt;CloseOutlined /> |  |
 | contentWrapperStyle | Style of the drawer wrapper of content part | CSSProperties | - |  |
 | destroyOnClose | Whether to unmount child components on closing drawer or not | boolean | false |  |
diff --git a/components/drawer/index.tsx b/components/drawer/index.tsx
index 2b7f9201d7da..f7683798a2c0 100644
--- a/components/drawer/index.tsx
+++ b/components/drawer/index.tsx
@@ -5,6 +5,7 @@ import RcDrawer from 'rc-drawer';
 import type { Placement } from 'rc-drawer/lib/Drawer';
 import type { CSSMotionProps } from 'rc-motion';
 
+import { useZIndex } from '../_util/hooks/useZIndex';
 import { getTransitionName } from '../_util/motion';
 import { devUseWarning } from '../_util/warning';
 import { ConfigContext } from '../config-provider';
@@ -15,6 +16,7 @@ import { usePanelRef } from '../watermark/context';
 import type { DrawerClassNames, DrawerPanelProps, DrawerStyles } from './DrawerPanel';
 import DrawerPanel from './DrawerPanel';
 import useStyle from './style';
+import zIndexContext from '../_util/zindexContext';
 
 const SizeTypes = ['default', 'large'] as const;
 type sizeType = typeof SizeTypes[number];
@@ -143,44 +145,50 @@ const Drawer: React.FC<DrawerProps> & {
   // Select `ant-modal-content` by `panelRef`
   const panelRef = usePanelRef();
 
+  // ============================ zIndex ============================
+  const [zIndex, contextZIndex] = useZIndex('Drawer', rest.zIndex);
+
   // =========================== Render ===========================
   return wrapSSR(
     <NoCompactStyle>
       <NoFormStyle status override>
-        <RcDrawer
-          prefixCls={prefixCls}
-          onClose={onClose}
-          maskMotion={maskMotion}
-          motion={panelMotion}
-          {...rest}
-          classNames={{
-            mask: classNames(rest.classNames?.mask, drawer?.classNames?.mask),
-            content: classNames(rest.classNames?.content, drawer?.classNames?.content),
-          }}
-          styles={{
-            mask: {
-              ...rest.styles?.mask,
-              ...drawer?.styles?.mask,
-            },
-            content: {
-              ...rest.styles?.content,
-              ...drawer?.styles?.content,
-            },
-          }}
-          open={open ?? visible}
-          mask={mask}
-          push={push}
-          width={mergedWidth}
-          height={mergedHeight}
-          style={{ ...drawer?.style, ...style }}
-          className={classNames(drawer?.className, className)}
-          rootClassName={drawerClassName}
-          getContainer={getContainer}
-          afterOpenChange={afterOpenChange ?? afterVisibleChange}
-          panelRef={panelRef}
-        >
-          <DrawerPanel prefixCls={prefixCls} {...rest} onClose={onClose} />
-        </RcDrawer>
+        <zIndexContext.Provider value={contextZIndex}>
+          <RcDrawer
+            prefixCls={prefixCls}
+            onClose={onClose}
+            maskMotion={maskMotion}
+            motion={panelMotion}
+            {...rest}
+            classNames={{
+              mask: classNames(rest.classNames?.mask, drawer?.classNames?.mask),
+              content: classNames(rest.classNames?.content, drawer?.classNames?.content),
+            }}
+            styles={{
+              mask: {
+                ...rest.styles?.mask,
+                ...drawer?.styles?.mask,
+              },
+              content: {
+                ...rest.styles?.content,
+                ...drawer?.styles?.content,
+              },
+            }}
+            open={open ?? visible}
+            mask={mask}
+            push={push}
+            width={mergedWidth}
+            height={mergedHeight}
+            style={{ ...drawer?.style, ...style }}
+            className={classNames(drawer?.className, className)}
+            rootClassName={drawerClassName}
+            getContainer={getContainer}
+            afterOpenChange={afterOpenChange ?? afterVisibleChange}
+            panelRef={panelRef}
+            zIndex={zIndex}
+          >
+            <DrawerPanel prefixCls={prefixCls} {...rest} onClose={onClose} />
+          </RcDrawer>
+        </zIndexContext.Provider>
       </NoFormStyle>
     </NoCompactStyle>,
   );
diff --git a/components/dropdown/__tests__/__snapshots__/dropdown-button.test.tsx.snap b/components/dropdown/__tests__/__snapshots__/dropdown-button.test.tsx.snap
index d18d6490a266..a6fd8e063e47 100644
--- a/components/dropdown/__tests__/__snapshots__/dropdown-button.test.tsx.snap
+++ b/components/dropdown/__tests__/__snapshots__/dropdown-button.test.tsx.snap
@@ -46,6 +46,7 @@ exports[`DropdownButton should support href like Button 1`] = `
   <a
     class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
     href="https://ant.design"
+    tabindex="0"
   />
   <button
     class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
diff --git a/components/dropdown/__tests__/index.test.tsx b/components/dropdown/__tests__/index.test.tsx
index ffd76c9022f7..a980f92c14a1 100644
--- a/components/dropdown/__tests__/index.test.tsx
+++ b/components/dropdown/__tests__/index.test.tsx
@@ -265,24 +265,41 @@ describe('Dropdown', () => {
     expect(divRef.current).toBeTruthy();
   });
 
-  it('is still open after selection in multiple mode', () => {
-    jest.useFakeTimers();
-    const { container } = render(
+  it('should trigger open event when click on item', () => {
+    const onOpenChange = jest.fn();
+    render(
       <Dropdown
-        trigger={['click']}
+        onOpenChange={onOpenChange}
+        open
         menu={{
           items: [
             {
-              label: '1',
+              label: <div className="bamboo" />,
               key: 1,
             },
-            {
-              label: '2',
-              key: 2,
-            },
           ],
+        }}
+      >
+        <a />
+      </Dropdown>,
+    );
+
+    fireEvent.click(document.body.querySelector('.bamboo')!);
+    expect(onOpenChange).toHaveBeenCalledWith(false, { source: 'menu' });
+  });
+
+  it('is still open after selection in multiple mode', () => {
+    jest.useFakeTimers();
+    const { container } = render(
+      <Dropdown
+        trigger={['click']}
+        menu={{
           selectable: true,
           multiple: true,
+          items: [
+            { label: '1', key: 1 },
+            { label: '2', key: 2 },
+          ],
         }}
       >
         <a />
@@ -304,9 +321,7 @@ describe('Dropdown', () => {
         jest.runAllTimers();
       });
     }
-
     expect(container.querySelector('.ant-dropdown-hidden')).toBeFalsy();
-
     jest.useRealTimers();
   });
 });
diff --git a/components/dropdown/demo/overlay-open.tsx b/components/dropdown/demo/overlay-open.tsx
index 5047972e2e79..6b63c06ae38a 100644
--- a/components/dropdown/demo/overlay-open.tsx
+++ b/components/dropdown/demo/overlay-open.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { DownOutlined } from '@ant-design/icons';
-import type { MenuProps } from 'antd';
+import type { DropdownProps, MenuProps } from 'antd';
 import { Dropdown, Space } from 'antd';
 
 const App: React.FC = () => {
@@ -12,8 +12,10 @@ const App: React.FC = () => {
     }
   };
 
-  const handleOpenChange = (flag: boolean) => {
-    setOpen(flag);
+  const handleOpenChange: DropdownProps['onOpenChange'] = (nextOpen, info) => {
+    if (info.source === 'trigger' || nextOpen) {
+      setOpen(nextOpen);
+    }
   };
 
   const items: MenuProps['items'] = [
diff --git a/components/dropdown/dropdown.tsx b/components/dropdown/dropdown.tsx
index 83a7f60b8b09..73223b999d5e 100644
--- a/components/dropdown/dropdown.tsx
+++ b/components/dropdown/dropdown.tsx
@@ -7,11 +7,13 @@ import { useEvent } from 'rc-util';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import omit from 'rc-util/lib/omit';
 
+import { useZIndex } from '../_util/hooks/useZIndex';
 import type { AdjustOverflow } from '../_util/placements';
 import getPlacements from '../_util/placements';
 import genPurePanel from '../_util/PurePanel';
 import { cloneElement } from '../_util/reactNode';
 import { devUseWarning } from '../_util/warning';
+import zIndexContext from '../_util/zindexContext';
 import { ConfigContext } from '../config-provider';
 import type { MenuProps } from '../menu';
 import Menu from '../menu';
@@ -45,7 +47,7 @@ export interface DropdownProps {
   arrow?: boolean | DropdownArrowOptions;
   trigger?: ('click' | 'hover' | 'contextMenu')[];
   dropdownRender?: (originNode: React.ReactNode) => React.ReactNode;
-  onOpenChange?: (open: boolean) => void;
+  onOpenChange?: (open: boolean, info: { source: 'trigger' | 'menu' }) => void;
   open?: boolean;
   disabled?: boolean;
   destroyPopupOnHide?: boolean;
@@ -90,6 +92,7 @@ const Dropdown: CompoundedComponent = (props) => {
     getPopupContainer,
     overlayClassName,
     rootClassName,
+    overlayStyle,
     open,
     onOpenChange,
     // Deprecated
@@ -106,6 +109,7 @@ const Dropdown: CompoundedComponent = (props) => {
     getPopupContainer: getContextPopupContainer,
     getPrefixCls,
     direction,
+    dropdown,
   } = React.useContext(ConfigContext);
 
   // Warning for deprecated usage
@@ -194,15 +198,19 @@ const Dropdown: CompoundedComponent = (props) => {
   });
 
   const onInnerOpenChange = useEvent((nextOpen: boolean) => {
-    onOpenChange?.(nextOpen);
+    onOpenChange?.(nextOpen, { source: 'trigger' });
     onVisibleChange?.(nextOpen);
     setOpen(nextOpen);
   });
 
   // =========================== Overlay ============================
-  const overlayClassNameCustomized = classNames(overlayClassName, rootClassName, hashId, {
-    [`${prefixCls}-rtl`]: direction === 'rtl',
-  });
+  const overlayClassNameCustomized = classNames(
+    overlayClassName,
+    rootClassName,
+    hashId,
+    dropdown?.className,
+    { [`${prefixCls}-rtl`]: direction === 'rtl' },
+  );
 
   const builtinPlacements = getPlacements({
     arrowPointAtCenter: typeof arrow === 'object' && arrow.pointAtCenter,
@@ -216,6 +224,7 @@ const Dropdown: CompoundedComponent = (props) => {
     if (menu?.selectable && menu?.multiple) {
       return;
     }
+    onOpenChange?.(false, { source: 'menu' });
     setOpen(false);
   }, [menu?.selectable, menu?.multiple]);
 
@@ -263,8 +272,11 @@ const Dropdown: CompoundedComponent = (props) => {
     );
   };
 
+  // =========================== zIndex ============================
+  const [zIndex, contextZIndex] = useZIndex('Dropdown', overlayStyle?.zIndex as number);
+
   // ============================ Render ============================
-  return wrapSSR(
+  let renderNode = (
     <RcDropdown
       alignPoint={alignPoint!}
       {...omit(props, ['rootClassName'])}
@@ -281,10 +293,19 @@ const Dropdown: CompoundedComponent = (props) => {
       overlay={renderOverlay}
       placement={memoPlacement}
       onVisibleChange={onInnerOpenChange}
+      overlayStyle={{ ...dropdown?.style, ...overlayStyle, zIndex }}
     >
       {dropdownTrigger}
-    </RcDropdown>,
+    </RcDropdown>
   );
+
+  if (zIndex) {
+    renderNode = (
+      <zIndexContext.Provider value={contextZIndex}>{renderNode}</zIndexContext.Provider>
+    );
+  }
+
+  return wrapSSR(renderNode);
 };
 
 function postPureProps(props: DropdownProps) {
diff --git a/components/dropdown/index.en-US.md b/components/dropdown/index.en-US.md
index 11697cabe5c5..a3256a3f5ca6 100644
--- a/components/dropdown/index.en-US.md
+++ b/components/dropdown/index.en-US.md
@@ -56,7 +56,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | placement | Placement of popup menu: `bottom` `bottomLeft` `bottomRight` `top` `topLeft` `topRight` | string | `bottomLeft` |  |
 | trigger | The trigger mode which executes the dropdown action. Note that hover can't be used on touchscreens | Array&lt;`click`\|`hover`\|`contextMenu`> | \[`hover`] |  |
 | open | Whether the dropdown menu is currently open. Use `visible` under 4.23.0 ([why?](/docs/react/faq#why-open)) | boolean | - | 4.23.0 |
-| onOpenChange | Called when the open state is changed. Not trigger when hidden by click item. Use `onVisibleChange` under 4.23.0 ([why?](/docs/react/faq#why-open)) | (open: boolean) => void | - | 4.23.0 |
+| onOpenChange | Called when the open state is changed. Not trigger when hidden by click item. Use `onVisibleChange` under 4.23.0 ([why?](/docs/react/faq#why-open)) | (open: boolean, info: { source: 'trigger' \| 'menu' }) => void | - | `info.source`: 5.11.0 |
 
 ### Dropdown.Button
 
diff --git a/components/dropdown/index.zh-CN.md b/components/dropdown/index.zh-CN.md
index f9911a85ac05..60f5853a2baf 100644
--- a/components/dropdown/index.zh-CN.md
+++ b/components/dropdown/index.zh-CN.md
@@ -60,7 +60,7 @@ demo:
 | placement | 菜单弹出位置：`bottom` `bottomLeft` `bottomRight` `top` `topLeft` `topRight` | string | `bottomLeft` |  |
 | trigger | 触发下拉的行为，移动端不支持 hover | Array&lt;`click`\|`hover`\|`contextMenu`> | \[`hover`] |  |
 | open | 菜单是否显示，小于 4.23.0 使用 `visible`（[为什么?](/docs/react/faq#弹层类组件为什么要统一至-open-属性)） | boolean | - | 4.23.0 |
-| onOpenChange | 菜单显示状态改变时调用，点击菜单按钮导致的消失不会触发。小于 4.23.0 使用 `onVisibleChange`（[为什么?](/docs/react/faq#弹层类组件为什么要统一至-open-属性)） | (open: boolean) => void | - | 4.23.0 |
+| onOpenChange | 菜单显示状态改变时调用，点击菜单按钮导致的消失不会触发。小于 4.23.0 使用 `onVisibleChange`（[为什么?](/docs/react/faq#弹层类组件为什么要统一至-open-属性)） | (open: boolean, info: { source: 'trigger' \| 'menu' }) => void | - | `info.source`: 5.11.0 |
 
 ### Dropdown.Button
 
diff --git a/components/flex/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/flex/__tests__/__snapshots__/demo-extend.test.ts.snap
index 3b3773654dd7..6b20f73f7ee0 100644
--- a/components/flex/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/flex/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -293,6 +293,7 @@ exports[`renders components/flex/demo/combination.tsx extend context correctly 1
         <a
           class="ant-btn ant-btn-primary"
           href="https://ant.design"
+          tabindex="0"
           target="_blank"
         >
           <span>
diff --git a/components/flex/__tests__/__snapshots__/demo.test.ts.snap b/components/flex/__tests__/__snapshots__/demo.test.ts.snap
index 3bd7aec00563..6d50abb1f52a 100644
--- a/components/flex/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/flex/__tests__/__snapshots__/demo.test.ts.snap
@@ -289,6 +289,7 @@ exports[`renders components/flex/demo/combination.tsx correctly 1`] = `
         <a
           class="ant-btn ant-btn-primary"
           href="https://ant.design"
+          tabindex="0"
           target="_blank"
         >
           <span>
diff --git a/components/flex/interface.ts b/components/flex/interface.ts
index d5240cfcae05..6e7f42151b72 100644
--- a/components/flex/interface.ts
+++ b/components/flex/interface.ts
@@ -1,6 +1,6 @@
 import type React from 'react';
 
-import type { AnyObject } from '../_util/type';
+import type { AnyObject, CustomComponent } from '../_util/type';
 import type { SizeType } from '../config-provider/SizeContext';
 
 export interface FlexProps<P = AnyObject> extends React.HTMLAttributes<HTMLElement> {
@@ -13,5 +13,5 @@ export interface FlexProps<P = AnyObject> extends React.HTMLAttributes<HTMLEleme
   flex?: React.CSSProperties['flex'];
   gap?: React.CSSProperties['gap'] | SizeType;
   children: React.ReactNode;
-  component?: React.ComponentType<P> | string;
+  component?: CustomComponent<P>;
 }
diff --git a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
index 87167b41b368..a2cd43e0469b 100644
--- a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1925,288 +1925,6 @@ exports[`renders components/form/demo/control-hooks.tsx extend context correctly
 
 exports[`renders components/form/demo/control-hooks.tsx extend context correctly 2`] = `[]`;
 
-exports[`renders components/form/demo/control-ref.tsx extend context correctly 1`] = `
-<form
-  class="ant-form ant-form-horizontal"
-  id="control-ref"
-  style="max-width: 600px;"
->
-  <div
-    class="ant-form-item"
-  >
-    <div
-      class="ant-row ant-form-item-row"
-    >
-      <div
-        class="ant-col ant-col-8 ant-form-item-label"
-      >
-        <label
-          class="ant-form-item-required"
-          for="control-ref_note"
-          title="Note"
-        >
-          Note
-        </label>
-      </div>
-      <div
-        class="ant-col ant-col-16 ant-form-item-control"
-      >
-        <div
-          class="ant-form-item-control-input"
-        >
-          <div
-            class="ant-form-item-control-input-content"
-          >
-            <input
-              aria-required="true"
-              class="ant-input"
-              id="control-ref_note"
-              type="text"
-              value=""
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-form-item"
-  >
-    <div
-      class="ant-row ant-form-item-row"
-    >
-      <div
-        class="ant-col ant-col-8 ant-form-item-label"
-      >
-        <label
-          class="ant-form-item-required"
-          for="control-ref_gender"
-          title="Gender"
-        >
-          Gender
-        </label>
-      </div>
-      <div
-        class="ant-col ant-col-16 ant-form-item-control"
-      >
-        <div
-          class="ant-form-item-control-input"
-        >
-          <div
-            class="ant-form-item-control-input-content"
-          >
-            <div
-              aria-required="true"
-              class="ant-select ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
-            >
-              <div
-                class="ant-select-selector"
-              >
-                <span
-                  class="ant-select-selection-search"
-                >
-                  <input
-                    aria-autocomplete="list"
-                    aria-controls="control-ref_gender_list"
-                    aria-expanded="false"
-                    aria-haspopup="listbox"
-                    aria-owns="control-ref_gender_list"
-                    aria-required="true"
-                    autocomplete="off"
-                    class="ant-select-selection-search-input"
-                    id="control-ref_gender"
-                    readonly=""
-                    role="combobox"
-                    style="opacity: 0;"
-                    type="search"
-                    unselectable="on"
-                    value=""
-                  />
-                </span>
-                <span
-                  class="ant-select-selection-placeholder"
-                >
-                  Select a option and change input text above
-                </span>
-              </div>
-              <div
-                class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
-                style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-              >
-                <div>
-                  <div
-                    id="control-ref_gender_list"
-                    role="listbox"
-                    style="height: 0px; width: 0px; overflow: hidden;"
-                  >
-                    <div
-                      aria-label="male"
-                      aria-selected="false"
-                      id="control-ref_gender_list_0"
-                      role="option"
-                    >
-                      male
-                    </div>
-                    <div
-                      aria-label="female"
-                      aria-selected="false"
-                      id="control-ref_gender_list_1"
-                      role="option"
-                    >
-                      female
-                    </div>
-                  </div>
-                  <div
-                    class="rc-virtual-list"
-                    style="position: relative;"
-                  >
-                    <div
-                      class="rc-virtual-list-holder"
-                      style="max-height: 256px; overflow-y: auto;"
-                    >
-                      <div>
-                        <div
-                          class="rc-virtual-list-holder-inner"
-                          style="display: flex; flex-direction: column;"
-                        >
-                          <div
-                            aria-selected="false"
-                            class="ant-select-item ant-select-item-option ant-select-item-option-active"
-                            title="male"
-                          >
-                            <div
-                              class="ant-select-item-option-content"
-                            >
-                              male
-                            </div>
-                            <span
-                              aria-hidden="true"
-                              class="ant-select-item-option-state"
-                              style="user-select: none;"
-                              unselectable="on"
-                            />
-                          </div>
-                          <div
-                            aria-selected="false"
-                            class="ant-select-item ant-select-item-option"
-                            title="female"
-                          >
-                            <div
-                              class="ant-select-item-option-content"
-                            >
-                              female
-                            </div>
-                            <span
-                              aria-hidden="true"
-                              class="ant-select-item-option-state"
-                              style="user-select: none;"
-                              unselectable="on"
-                            />
-                          </div>
-                          <div
-                            aria-selected="false"
-                            class="ant-select-item ant-select-item-option"
-                            title="other"
-                          >
-                            <div
-                              class="ant-select-item-option-content"
-                            >
-                              other
-                            </div>
-                            <span
-                              aria-hidden="true"
-                              class="ant-select-item-option-state"
-                              style="user-select: none;"
-                              unselectable="on"
-                            />
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <span
-                aria-hidden="true"
-                class="ant-select-arrow"
-                style="user-select: none;"
-                unselectable="on"
-              >
-                <span
-                  aria-label="down"
-                  class="anticon anticon-down ant-select-suffix"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="down"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-form-item"
-  >
-    <div
-      class="ant-row ant-form-item-row"
-    >
-      <div
-        class="ant-col ant-col-16 ant-col-offset-8 ant-form-item-control"
-      >
-        <div
-          class="ant-form-item-control-input"
-        >
-          <div
-            class="ant-form-item-control-input-content"
-          >
-            <button
-              class="ant-btn ant-btn-primary"
-              type="submit"
-            >
-              <span>
-                Submit
-              </span>
-            </button>
-            <button
-              class="ant-btn ant-btn-default"
-              type="button"
-            >
-              <span>
-                Reset
-              </span>
-            </button>
-            <button
-              class="ant-btn ant-btn-link"
-              type="button"
-            >
-              <span>
-                Fill form
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders components/form/demo/control-ref.tsx extend context correctly 2`] = `[]`;
-
 exports[`renders components/form/demo/custom-feedback-icons.tsx extend context correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal"
@@ -5608,6 +5326,415 @@ Array [
         </div>
       </div>
     </div>
+    <div
+      class="ant-form-item"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-col-4 ant-form-item-label"
+        >
+          <label
+            class=""
+            title="ColorPicker"
+          >
+            ColorPicker
+          </label>
+        </div>
+        <div
+          class="ant-col ant-col-14 ant-form-item-control"
+        >
+          <div
+            class="ant-form-item-control-input"
+          >
+            <div
+              class="ant-form-item-control-input-content"
+            >
+              <div
+                class="ant-color-picker-trigger ant-color-picker-trigger-disabled"
+              >
+                <div
+                  class="ant-color-picker-color-block"
+                >
+                  <div
+                    class="ant-color-picker-color-block-inner"
+                    style="background: rgb(22, 119, 255);"
+                  />
+                </div>
+              </div>
+              <div
+                class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-color-picker ant-popover-placement-bottomLeft"
+                style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+              >
+                <div
+                  class="ant-popover-arrow"
+                  style="position: absolute;"
+                />
+                <div
+                  class="ant-popover-content"
+                >
+                  <div
+                    class="ant-popover-inner"
+                    role="tooltip"
+                  >
+                    <div
+                      class="ant-popover-inner-content"
+                    >
+                      <div
+                        class="ant-color-picker-inner-content"
+                      >
+                        <div
+                          class="ant-color-picker-panel"
+                        >
+                          <div
+                            class="ant-color-picker-select"
+                          >
+                            <div
+                              class="ant-color-picker-palette"
+                              style="position: relative;"
+                            >
+                              <div
+                                style="position: absolute; left: 0px; top: 0px; z-index: 1;"
+                              >
+                                <div
+                                  class="ant-color-picker-handler"
+                                  style="background-color: rgb(22, 119, 255);"
+                                />
+                              </div>
+                              <div
+                                class="ant-color-picker-saturation"
+                                style="background-color: rgb(0, 0, 0);"
+                              />
+                            </div>
+                          </div>
+                          <div
+                            class="ant-color-picker-slider-container"
+                          >
+                            <div
+                              class="ant-color-picker-slider-group"
+                            >
+                              <div
+                                class="ant-color-picker-slider ant-color-picker-slider-hue"
+                              >
+                                <div
+                                  class="ant-color-picker-palette"
+                                  style="position: relative;"
+                                >
+                                  <div
+                                    style="position: absolute; left: 0px; top: 0px; z-index: 1;"
+                                  >
+                                    <div
+                                      class="ant-color-picker-handler ant-color-picker-handler-sm"
+                                      style="background-color: rgb(0, 0, 0);"
+                                    />
+                                  </div>
+                                  <div
+                                    class="ant-color-picker-gradient"
+                                    style="position: absolute; inset: 0;"
+                                  />
+                                </div>
+                              </div>
+                              <div
+                                class="ant-color-picker-slider ant-color-picker-slider-alpha"
+                              >
+                                <div
+                                  class="ant-color-picker-palette"
+                                  style="position: relative;"
+                                >
+                                  <div
+                                    style="position: absolute; left: 0px; top: 0px; z-index: 1;"
+                                  >
+                                    <div
+                                      class="ant-color-picker-handler ant-color-picker-handler-sm"
+                                      style="background-color: rgb(22, 119, 255);"
+                                    />
+                                  </div>
+                                  <div
+                                    class="ant-color-picker-gradient"
+                                    style="position: absolute; inset: 0;"
+                                  />
+                                </div>
+                              </div>
+                            </div>
+                            <div
+                              class="ant-color-picker-color-block"
+                            >
+                              <div
+                                class="ant-color-picker-color-block-inner"
+                                style="background: rgb(22, 119, 255);"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          class="ant-color-picker-input-container"
+                        >
+                          <div
+                            class="ant-select ant-select-sm ant-select-borderless ant-color-picker-format-select ant-select-single ant-select-show-arrow ant-select-disabled"
+                          >
+                            <div
+                              class="ant-select-selector"
+                            >
+                              <span
+                                class="ant-select-selection-search"
+                              >
+                                <input
+                                  aria-autocomplete="list"
+                                  aria-controls="rc_select_TEST_OR_SSR_list"
+                                  aria-expanded="false"
+                                  aria-haspopup="listbox"
+                                  aria-owns="rc_select_TEST_OR_SSR_list"
+                                  autocomplete="off"
+                                  class="ant-select-selection-search-input"
+                                  disabled=""
+                                  id="rc_select_TEST_OR_SSR"
+                                  readonly=""
+                                  role="combobox"
+                                  style="opacity: 0;"
+                                  type="search"
+                                  unselectable="on"
+                                  value=""
+                                />
+                              </span>
+                              <span
+                                class="ant-select-selection-item"
+                                title="HEX"
+                              >
+                                HEX
+                              </span>
+                            </div>
+                            <div
+                              class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
+                              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
+                            >
+                              <div>
+                                <div
+                                  id="rc_select_TEST_OR_SSR_list"
+                                  role="listbox"
+                                  style="height: 0px; width: 0px; overflow: hidden;"
+                                >
+                                  <div
+                                    aria-label="HEX"
+                                    aria-selected="true"
+                                    id="rc_select_TEST_OR_SSR_list_0"
+                                    role="option"
+                                  >
+                                    hex
+                                  </div>
+                                  <div
+                                    aria-label="HSB"
+                                    aria-selected="false"
+                                    id="rc_select_TEST_OR_SSR_list_1"
+                                    role="option"
+                                  >
+                                    hsb
+                                  </div>
+                                </div>
+                                <div
+                                  class="rc-virtual-list"
+                                  style="position: relative;"
+                                >
+                                  <div
+                                    class="rc-virtual-list-holder"
+                                    style="max-height: 256px; overflow-y: auto;"
+                                  >
+                                    <div>
+                                      <div
+                                        class="rc-virtual-list-holder-inner"
+                                        style="display: flex; flex-direction: column;"
+                                      >
+                                        <div
+                                          aria-selected="true"
+                                          class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
+                                          title="HEX"
+                                        >
+                                          <div
+                                            class="ant-select-item-option-content"
+                                          >
+                                            HEX
+                                          </div>
+                                          <span
+                                            aria-hidden="true"
+                                            class="ant-select-item-option-state"
+                                            style="user-select: none;"
+                                            unselectable="on"
+                                          />
+                                        </div>
+                                        <div
+                                          aria-selected="false"
+                                          class="ant-select-item ant-select-item-option"
+                                          title="HSB"
+                                        >
+                                          <div
+                                            class="ant-select-item-option-content"
+                                          >
+                                            HSB
+                                          </div>
+                                          <span
+                                            aria-hidden="true"
+                                            class="ant-select-item-option-state"
+                                            style="user-select: none;"
+                                            unselectable="on"
+                                          />
+                                        </div>
+                                        <div
+                                          aria-selected="false"
+                                          class="ant-select-item ant-select-item-option"
+                                          title="RGB"
+                                        >
+                                          <div
+                                            class="ant-select-item-option-content"
+                                          >
+                                            RGB
+                                          </div>
+                                          <span
+                                            aria-hidden="true"
+                                            class="ant-select-item-option-state"
+                                            style="user-select: none;"
+                                            unselectable="on"
+                                          />
+                                        </div>
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                            <span
+                              aria-hidden="true"
+                              class="ant-select-arrow"
+                              style="user-select: none;"
+                              unselectable="on"
+                            >
+                              <span
+                                aria-label="down"
+                                class="anticon anticon-down ant-select-suffix"
+                                role="img"
+                              >
+                                <svg
+                                  aria-hidden="true"
+                                  data-icon="down"
+                                  fill="currentColor"
+                                  focusable="false"
+                                  height="1em"
+                                  viewBox="64 64 896 896"
+                                  width="1em"
+                                >
+                                  <path
+                                    d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                                  />
+                                </svg>
+                              </span>
+                            </span>
+                          </div>
+                          <div
+                            class="ant-color-picker-input"
+                          >
+                            <span
+                              class="ant-input-affix-wrapper ant-input-affix-wrapper-disabled ant-color-picker-hex-input ant-input-affix-wrapper-sm"
+                            >
+                              <span
+                                class="ant-input-prefix"
+                              >
+                                #
+                              </span>
+                              <input
+                                class="ant-input ant-input-disabled ant-input-sm"
+                                disabled=""
+                                type="text"
+                                value="1677ff"
+                              />
+                            </span>
+                          </div>
+                          <div
+                            class="ant-input-number ant-input-number-sm ant-color-picker-steppers ant-color-picker-alpha-input ant-input-number-disabled"
+                          >
+                            <div
+                              class="ant-input-number-handler-wrap"
+                            >
+                              <span
+                                aria-disabled="true"
+                                aria-label="Increase Value"
+                                class="ant-input-number-handler ant-input-number-handler-up ant-input-number-handler-up-disabled"
+                                role="button"
+                                unselectable="on"
+                              >
+                                <span
+                                  aria-label="up"
+                                  class="anticon anticon-up ant-input-number-handler-up-inner"
+                                  role="img"
+                                >
+                                  <svg
+                                    aria-hidden="true"
+                                    data-icon="up"
+                                    fill="currentColor"
+                                    focusable="false"
+                                    height="1em"
+                                    viewBox="64 64 896 896"
+                                    width="1em"
+                                  >
+                                    <path
+                                      d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
+                                    />
+                                  </svg>
+                                </span>
+                              </span>
+                              <span
+                                aria-disabled="false"
+                                aria-label="Decrease Value"
+                                class="ant-input-number-handler ant-input-number-handler-down"
+                                role="button"
+                                unselectable="on"
+                              >
+                                <span
+                                  aria-label="down"
+                                  class="anticon anticon-down ant-input-number-handler-down-inner"
+                                  role="img"
+                                >
+                                  <svg
+                                    aria-hidden="true"
+                                    data-icon="down"
+                                    fill="currentColor"
+                                    focusable="false"
+                                    height="1em"
+                                    viewBox="64 64 896 896"
+                                    width="1em"
+                                  >
+                                    <path
+                                      d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                                    />
+                                  </svg>
+                                </span>
+                              </span>
+                            </div>
+                            <div
+                              class="ant-input-number-input-wrap"
+                            >
+                              <input
+                                aria-valuemax="100"
+                                aria-valuemin="0"
+                                aria-valuenow="100"
+                                autocomplete="off"
+                                class="ant-input-number-input"
+                                disabled=""
+                                role="spinbutton"
+                                step="1"
+                                value="100%"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </form>,
 ]
 `;
@@ -9551,6 +9678,7 @@ exports[`renders components/form/demo/register.tsx extend context correctly 1`]
                 aria-required="true"
                 class="ant-input"
                 id="register_intro"
+                maxlength="100"
               />
               <span
                 class="ant-input-suffix"
@@ -21298,7 +21426,7 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl
                           </div>
                           <div
                             class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                            style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; width: 68px;"
+                            style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                           >
                             <div>
                               <div
diff --git a/components/form/__tests__/__snapshots__/demo.test.tsx.snap b/components/form/__tests__/__snapshots__/demo.test.tsx.snap
index b9ce99047491..8938d79790d5 100644
--- a/components/form/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/form/__tests__/__snapshots__/demo.test.tsx.snap
@@ -1450,189 +1450,6 @@ exports[`renders components/form/demo/control-hooks.tsx correctly 1`] = `
 </form>
 `;
 
-exports[`renders components/form/demo/control-ref.tsx correctly 1`] = `
-<form
-  class="ant-form ant-form-horizontal"
-  id="control-ref"
-  style="max-width:600px"
->
-  <div
-    class="ant-form-item"
-  >
-    <div
-      class="ant-row ant-form-item-row"
-    >
-      <div
-        class="ant-col ant-col-8 ant-form-item-label"
-      >
-        <label
-          class="ant-form-item-required"
-          for="control-ref_note"
-          title="Note"
-        >
-          Note
-        </label>
-      </div>
-      <div
-        class="ant-col ant-col-16 ant-form-item-control"
-      >
-        <div
-          class="ant-form-item-control-input"
-        >
-          <div
-            class="ant-form-item-control-input-content"
-          >
-            <input
-              aria-required="true"
-              class="ant-input"
-              id="control-ref_note"
-              type="text"
-              value=""
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-form-item"
-  >
-    <div
-      class="ant-row ant-form-item-row"
-    >
-      <div
-        class="ant-col ant-col-8 ant-form-item-label"
-      >
-        <label
-          class="ant-form-item-required"
-          for="control-ref_gender"
-          title="Gender"
-        >
-          Gender
-        </label>
-      </div>
-      <div
-        class="ant-col ant-col-16 ant-form-item-control"
-      >
-        <div
-          class="ant-form-item-control-input"
-        >
-          <div
-            class="ant-form-item-control-input-content"
-          >
-            <div
-              aria-required="true"
-              class="ant-select ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
-            >
-              <div
-                class="ant-select-selector"
-              >
-                <span
-                  class="ant-select-selection-search"
-                >
-                  <input
-                    aria-autocomplete="list"
-                    aria-controls="control-ref_gender_list"
-                    aria-expanded="false"
-                    aria-haspopup="listbox"
-                    aria-owns="control-ref_gender_list"
-                    aria-required="true"
-                    autocomplete="off"
-                    class="ant-select-selection-search-input"
-                    id="control-ref_gender"
-                    readonly=""
-                    role="combobox"
-                    style="opacity:0"
-                    type="search"
-                    unselectable="on"
-                    value=""
-                  />
-                </span>
-                <span
-                  class="ant-select-selection-placeholder"
-                >
-                  Select a option and change input text above
-                </span>
-              </div>
-              <span
-                aria-hidden="true"
-                class="ant-select-arrow"
-                style="user-select:none;-webkit-user-select:none"
-                unselectable="on"
-              >
-                <span
-                  aria-label="down"
-                  class="anticon anticon-down ant-select-suffix"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="down"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-form-item"
-  >
-    <div
-      class="ant-row ant-form-item-row"
-    >
-      <div
-        class="ant-col ant-col-16 ant-col-offset-8 ant-form-item-control"
-      >
-        <div
-          class="ant-form-item-control-input"
-        >
-          <div
-            class="ant-form-item-control-input-content"
-          >
-            <button
-              class="ant-btn ant-btn-primary"
-              type="submit"
-            >
-              <span>
-                Submit
-              </span>
-            </button>
-            <button
-              class="ant-btn ant-btn-default"
-              type="button"
-            >
-              <span>
-                Reset
-              </span>
-            </button>
-            <button
-              class="ant-btn ant-btn-link"
-              type="button"
-            >
-              <span>
-                Fill form
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
 exports[`renders components/form/demo/custom-feedback-icons.tsx correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal"
@@ -3024,6 +2841,48 @@ Array [
         </div>
       </div>
     </div>
+    <div
+      class="ant-form-item"
+    >
+      <div
+        class="ant-row ant-form-item-row"
+      >
+        <div
+          class="ant-col ant-col-4 ant-form-item-label"
+        >
+          <label
+            class=""
+            title="ColorPicker"
+          >
+            ColorPicker
+          </label>
+        </div>
+        <div
+          class="ant-col ant-col-14 ant-form-item-control"
+        >
+          <div
+            class="ant-form-item-control-input"
+          >
+            <div
+              class="ant-form-item-control-input-content"
+            >
+              <div
+                class="ant-color-picker-trigger ant-color-picker-trigger-disabled"
+              >
+                <div
+                  class="ant-color-picker-color-block"
+                >
+                  <div
+                    class="ant-color-picker-color-block-inner"
+                    style="background:rgb(22, 119, 255)"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </form>,
 ]
 `;
@@ -6504,6 +6363,7 @@ exports[`renders components/form/demo/register.tsx correctly 1`] = `
                 aria-required="true"
                 class="ant-input"
                 id="register_intro"
+                maxlength="100"
               />
               <span
                 class="ant-input-suffix"
diff --git a/components/form/__tests__/__snapshots__/index.test.tsx.snap b/components/form/__tests__/__snapshots__/index.test.tsx.snap
index 887ee37be400..bd201797fd8b 100644
--- a/components/form/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/form/__tests__/__snapshots__/index.test.tsx.snap
@@ -1045,6 +1045,48 @@ exports[`Form form should support disabled 1`] = `
       </div>
     </div>
   </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-col-4 ant-form-item-label"
+      >
+        <label
+          class=""
+          title="ColorPicker"
+        >
+          ColorPicker
+        </label>
+      </div>
+      <div
+        class="ant-col ant-col-14 ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <div
+              class="ant-color-picker-trigger ant-color-picker-trigger-disabled"
+            >
+              <div
+                class="ant-color-picker-color-block"
+              >
+                <div
+                  class="ant-color-picker-color-block-inner"
+                  style="background: rgb(22, 119, 255);"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </form>
 `;
 
diff --git a/components/form/__tests__/index.test.tsx b/components/form/__tests__/index.test.tsx
index 45dce79324d2..387bdf586c7f 100644
--- a/components/form/__tests__/index.test.tsx
+++ b/components/form/__tests__/index.test.tsx
@@ -1,19 +1,20 @@
 import type { ChangeEventHandler } from 'react';
 import React, { version as ReactVersion, useEffect, useRef, useState } from 'react';
+import { AlertFilled } from '@ant-design/icons';
 import type { ColProps } from 'antd/es/grid';
 import classNames from 'classnames';
 import scrollIntoView from 'scroll-into-view-if-needed';
-import { AlertFilled } from '@ant-design/icons';
 
 import type { FormInstance } from '..';
 import Form from '..';
 import { resetWarned } from '../../_util/warning';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
-import { fireEvent, pureRender, render, screen, waitFakeTimer } from '../../../tests/utils';
+import { act, fireEvent, pureRender, render, screen, waitFakeTimer } from '../../../tests/utils';
 import Button from '../../button';
 import Cascader from '../../cascader';
 import Checkbox from '../../checkbox';
+import ColorPicker from '../../color-picker';
 import ConfigProvider from '../../config-provider';
 import DatePicker from '../../date-picker';
 import Drawer from '../../drawer';
@@ -1166,6 +1167,9 @@ describe('Form', () => {
         <Form.Item label="Slider">
           <Slider />
         </Form.Item>
+        <Form.Item label="ColorPicker">
+          <ColorPicker />
+        </Form.Item>
       </Form>
     );
     const { container } = render(<App />);
@@ -1692,6 +1696,7 @@ describe('Form', () => {
           { label: 'female', value: 1 },
         ]}
       />,
+      <ColorPicker key="ColorPicker" disabled={disabled} />,
       <InputNumber key="InputNumber" disabled={disabled} />,
       <Input key="Input" disabled={disabled} />,
       <Select key="Select" disabled={disabled} />,
@@ -2071,4 +2076,35 @@ describe('Form', () => {
       expect(bt).not.toHaveAttribute('disabled');
     });
   });
+
+  it('InputNumber with hasFeedback should keep dom stable', () => {
+    const Demo = () => (
+      <Form>
+        <Form.Item
+          name="light"
+          hasFeedback
+          rules={[{ required: true, message: 'Please input a entry price' }]}
+        >
+          <InputNumber />
+        </Form.Item>
+      </Form>
+    );
+    const { container } = render(<Demo />);
+
+    const input = container.querySelector('input')!;
+
+    expect(container.querySelector('.ant-input-number-suffix')).toBeTruthy();
+
+    act(() => {
+      fireEvent.focus(input);
+    });
+    expect(container.querySelector('.ant-input-number-focused')).toBeTruthy();
+
+    fireEvent.change(input, {
+      target: { value: '1' },
+    });
+
+    expect(container.querySelector('.ant-input-number-suffix')).toBeTruthy();
+    expect(container.querySelector('.ant-input-number-focused')).toBeTruthy();
+  });
 });
diff --git a/components/form/demo/control-hooks.md b/components/form/demo/control-hooks.md
index bfa18732ab34..9559d7ee9581 100644
--- a/components/form/demo/control-hooks.md
+++ b/components/form/demo/control-hooks.md
@@ -2,16 +2,10 @@
 
 通过 `Form.useForm` 对表单数据域进行交互。
 
-> 注意 `useForm` 是 [React Hooks](https://reactjs.org/docs/hooks-intro.html) 的实现，只能用于函数组件，class 组件请查看下面的例子。
+> 注意 `useForm` 是 [React Hooks](https://reactjs.org/docs/hooks-intro.html) 的实现，只能用于函数组件。如果是在 Class Component 下，你也可以通过 `ref` 获取数据域：https://codesandbox.io/p/sandbox/ngtjtm
 
 ## en-US
 
 Call form method with `Form.useForm`.
 
-> Note that `useForm` is a [React Hooks](https://reactjs.org/docs/hooks-intro.html) that only works in functional component.
-
-```css
-#components-form-demo-control-hooks .ant-btn {
-  margin-right: 8px;
-}
-```
+> Note that `useForm` is a [React Hooks](https://reactjs.org/docs/hooks-intro.html) that only works in functional component. You can also use `ref` to get the form instance in class component: https://codesandbox.io/p/sandbox-ngtjtm
diff --git a/components/form/demo/control-ref.md b/components/form/demo/control-ref.md
deleted file mode 100644
index 1399c7e60a12..000000000000
--- a/components/form/demo/control-ref.md
+++ /dev/null
@@ -1,13 +0,0 @@
-## zh-CN
-
-我们推荐使用 `Form.useForm` 创建表单数据域进行控制。如果是在 class component 下，你也可以通过 `ref` 获取数据域。
-
-## en-US
-
-We recommend use `Form.useForm` to create data control. If you are using class component, you can get it by `ref`.
-
-```css
-#components-form-demo-control-ref .ant-btn {
-  margin-right: 8px;
-}
-```
diff --git a/components/form/demo/control-ref.tsx b/components/form/demo/control-ref.tsx
deleted file mode 100644
index d79a9c2adb9a..000000000000
--- a/components/form/demo/control-ref.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import React from 'react';
-import { Button, Form, Input, Select } from 'antd';
-import type { FormInstance } from 'antd/es/form';
-
-const { Option } = Select;
-
-const layout = {
-  labelCol: { span: 8 },
-  wrapperCol: { span: 16 },
-};
-
-const tailLayout = {
-  wrapperCol: { offset: 8, span: 16 },
-};
-
-const App: React.FC = () => {
-  const formRef = React.useRef<FormInstance>(null);
-
-  const onGenderChange = (value: string) => {
-    switch (value) {
-      case 'male':
-        formRef.current?.setFieldsValue({ note: 'Hi, man!' });
-        break;
-      case 'female':
-        formRef.current?.setFieldsValue({ note: 'Hi, lady!' });
-        break;
-      case 'other':
-        formRef.current?.setFieldsValue({ note: 'Hi there!' });
-        break;
-      default:
-        break;
-    }
-  };
-
-  const onFinish = (values: any) => {
-    console.log(values);
-  };
-
-  const onReset = () => {
-    formRef.current?.resetFields();
-  };
-
-  const onFill = () => {
-    formRef.current?.setFieldsValue({ note: 'Hello world!', gender: 'male' });
-  };
-
-  return (
-    <Form
-      {...layout}
-      ref={formRef}
-      name="control-ref"
-      onFinish={onFinish}
-      style={{ maxWidth: 600 }}
-    >
-      <Form.Item name="note" label="Note" rules={[{ required: true }]}>
-        <Input />
-      </Form.Item>
-      <Form.Item name="gender" label="Gender" rules={[{ required: true }]}>
-        <Select
-          placeholder="Select a option and change input text above"
-          onChange={onGenderChange}
-          allowClear
-        >
-          <Option value="male">male</Option>
-          <Option value="female">female</Option>
-          <Option value="other">other</Option>
-        </Select>
-      </Form.Item>
-      <Form.Item
-        noStyle
-        shouldUpdate={(prevValues, currentValues) => prevValues.gender !== currentValues.gender}
-      >
-        {({ getFieldValue }) =>
-          getFieldValue('gender') === 'other' ? (
-            <Form.Item name="customizeGender" label="Customize Gender" rules={[{ required: true }]}>
-              <Input />
-            </Form.Item>
-          ) : null
-        }
-      </Form.Item>
-      <Form.Item {...tailLayout}>
-        <Button type="primary" htmlType="submit">
-          Submit
-        </Button>
-        <Button htmlType="button" onClick={onReset}>
-          Reset
-        </Button>
-        <Button type="link" htmlType="button" onClick={onFill}>
-          Fill form
-        </Button>
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default App;
diff --git a/components/form/demo/custom-feedback-icons.tsx b/components/form/demo/custom-feedback-icons.tsx
index 7af3c276a33d..4719749dae81 100644
--- a/components/form/demo/custom-feedback-icons.tsx
+++ b/components/form/demo/custom-feedback-icons.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
-import { uniqueId } from 'lodash';
-
-import { createStyles, css } from 'antd-style';
 import { AlertFilled, CloseSquareFilled } from '@ant-design/icons';
 import { Button, Form, Input, Tooltip } from 'antd';
+import { createStyles, css } from 'antd-style';
+import uniqueId from 'lodash/uniqueId';
 
 const useStyle = createStyles(() => ({
   'custom-feedback-icons': css`
diff --git a/components/form/demo/disabled.tsx b/components/form/demo/disabled.tsx
index d2373cfdd657..060b157f48ed 100644
--- a/components/form/demo/disabled.tsx
+++ b/components/form/demo/disabled.tsx
@@ -1,9 +1,10 @@
-import { PlusOutlined } from '@ant-design/icons';
 import React, { useState } from 'react';
+import { PlusOutlined } from '@ant-design/icons';
 import {
   Button,
   Cascader,
   Checkbox,
+  ColorPicker,
   DatePicker,
   Form,
   Input,
@@ -113,6 +114,9 @@ const FormDisabledDemo: React.FC = () => {
         <Form.Item label="Slider">
           <Slider />
         </Form.Item>
+        <Form.Item label="ColorPicker">
+          <ColorPicker />
+        </Form.Item>
       </Form>
     </>
   );
diff --git a/components/form/index.en-US.md b/components/form/index.en-US.md
index 8da3eb2e670d..f63847bd0bc3 100644
--- a/components/form/index.en-US.md
+++ b/components/form/index.en-US.md
@@ -18,7 +18,6 @@ High performance Form component with data scope management. Including data colle
 <!-- prettier-ignore -->
 <code src="./demo/basic.tsx">Basic Usage</code>
 <code src="./demo/control-hooks.tsx">Form methods</code>
-<code src="./demo/control-ref.tsx">Form methods (Class component)</code>
 <code src="./demo/layout.tsx">Form Layout</code>
 <code src="./demo/disabled.tsx">Form disabled</code>
 <code src="./demo/required-mark.tsx">Required style</code>
@@ -308,9 +307,23 @@ Provide linkage between forms. If a sub form with `name` prop update, it will au
 | setFieldValue | Set fields value(Will directly pass to form store and **reset validation message**. If you do not want to modify passed object, please clone first) | (name: [NamePath](#namepath), value: any) => void | 4.22.0 |
 | setFieldsValue | Set fields value(Will directly pass to form store and **reset validation message**. If you do not want to modify passed object, please clone first). Use `setFieldValue` instead if you want to only config single value in Form.List | (values) => void |  |
 | submit | Submit the form. It's same as click `submit` button | () => void |  |
-| validateFields | Validate fields. Use `recursive` to validate all the field in the path | (nameList?: [NamePath](#namepath)\[], { validateOnly?: boolean }) => Promise | `validateOnly`: 5.5.0, `recursive`: 5.9.0 |
+| validateFields | Validate fields. Use `recursive` to validate all the field in the path | (nameList?: [NamePath](#namepath)\[], config?: [ValidateConfig](#validateFields)) => Promise |  |
 
-#### validateFields return sample
+#### validateFields
+
+```tsx
+export interface ValidateConfig {
+  // New in 5.5.0. Only validate content and not show error message on UI.
+  validateOnly?: boolean;
+  // New in 5.9.0. Recursively validate the provided `nameList` and its sub-paths.
+  recursive?: boolean;
+  // New in 5.11.0. Validate dirty fields (touched + validated).
+  // It's useful to validate fields only when they are touched or validated.
+  dirty?: boolean;
+}
+```
+
+return sample:
 
 ```jsx
 validateFields()
diff --git a/components/form/index.zh-CN.md b/components/form/index.zh-CN.md
index 5424cbe33f75..f5fbfd6e39db 100644
--- a/components/form/index.zh-CN.md
+++ b/components/form/index.zh-CN.md
@@ -19,7 +19,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ylFATY6w-ygAAA
 <!-- prettier-ignore -->
 <code src="./demo/basic.tsx">基本使用</code>
 <code src="./demo/control-hooks.tsx">表单方法调用</code>
-<code src="./demo/control-ref.tsx">表单方法调用（Class component）</code>
 <code src="./demo/layout.tsx">表单布局</code>
 <code src="./demo/disabled.tsx">表单禁用</code>
 <code src="./demo/required-mark.tsx">必选样式</code>
@@ -307,9 +306,23 @@ Form.List 渲染表单相关操作函数。
 | setFieldValue | 设置表单的值（该值将直接传入 form store 中并且**重置错误信息**。如果你不希望传入对象被修改，请克隆后传入） | (name: [NamePath](#namepath), value: any) => void | 4.22.0 |
 | setFieldsValue | 设置表单的值（该值将直接传入 form store 中并且**重置错误信息**。如果你不希望传入对象被修改，请克隆后传入）。如果你只想修改 Form.List 中单项值，请通过 `setFieldValue` 进行指定 | (values) => void |  |
 | submit | 提交表单，与点击 `submit` 按钮效果相同 | () => void |  |
-| validateFields | 触发表单验证，设置 `recursive` 时会递归校验所有包含的路径 | (nameList?: [NamePath](#namepath)\[], { validateOnly?: boolean, recursive?: boolean }) => Promise | `validateOnly`: 5.5.0, `recursive`: 5.9.0 |
+| validateFields | 触发表单验证，设置 `recursive` 时会递归校验所有包含的路径 | (nameList?: [NamePath](#namepath)\[], config?: [ValidateConfig](#validateFields)) => Promise |  |
 
-#### validateFields 返回示例
+#### validateFields
+
+```tsx
+export interface ValidateConfig {
+  // 5.5.0 新增。仅校验内容而不会将错误信息展示到 UI 上。
+  validateOnly?: boolean;
+  // 5.9.0 新增。对提供的 `nameList` 与其子路径进行递归校验。
+  recursive?: boolean;
+  // 5.11.0 新增。校验 dirty 的字段（touched + validated）。
+  // 使用 `dirty` 可以很方便的仅校验用户操作过和被校验过的字段。
+  dirty?: boolean;
+}
+```
+
+返回示例：
 
 ```jsx
 validateFields()
diff --git a/components/image/index.en-US.md b/components/image/index.en-US.md
index d9233d884a5a..04f1265766d5 100644
--- a/components/image/index.en-US.md
+++ b/components/image/index.en-US.md
@@ -51,7 +51,7 @@ Other attributes [&lt;img>](https://developer.mozilla.org/en-US/docs/Web/HTML/El
 
 ### PreviewType
 
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | visible | Whether the preview dialog is visible or not | boolean | - | - |
 | src | Custom preview src | string | - | 4.10.0 |
@@ -72,7 +72,7 @@ Other attributes [&lt;img>](https://developer.mozilla.org/en-US/docs/Web/HTML/El
 
 ## PreviewGroup
 
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | preview | Preview config, `disabled` when false | boolean \| [PreviewGroupType](#previewgrouptype) | true | 4.6.0 [PreviewGroupType](#previewgrouptype):4.7.0 |
 | items | Preview items | string[] \| { src: string, crossOrigin: string, ... }[] | - | 5.7.0 |
@@ -80,7 +80,7 @@ Other attributes [&lt;img>](https://developer.mozilla.org/en-US/docs/Web/HTML/El
 
 ### PreviewGroupType
 
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | visible | Whether the preview dialog is visible or not | boolean | - | - |
 | getContainer | The mounted node for preview dialog but still display at fullScreen | string \| HTMLElement \| (() => HTMLElement) \| false | - | 4.8.0 |
@@ -99,7 +99,7 @@ Other attributes [&lt;img>](https://developer.mozilla.org/en-US/docs/Web/HTML/El
 | imageRender | Custom preview content | (originalNode: React.ReactElement, info: { transform: [TransformType](#transformtype), current: number }) => React.ReactNode | - | 5.7.0 |
 | onTransform | Callback when the transform of image changed | { transform: [TransformType](#transformtype), action: [TransformAction](#transformaction) } | - | 5.7.0 |
 | onChange | Callback when switch preview image | (current: number, prevCurrent: number) => void | - | 5.3.0 |
-| onVisibleChange | Callback when `visible` changed | (visible: boolean, prevVisible: boolean, current: number) => void | - | current 参数 5.3.0 |
+| onVisibleChange | Callback when `visible` changed | (visible: boolean, prevVisible: boolean, current: number) => void | - | current Property 5.3.0 |
 
 ## Interface
 
diff --git a/components/image/index.tsx b/components/image/index.tsx
index 3d60dcfb85a0..61cedf51182c 100644
--- a/components/image/index.tsx
+++ b/components/image/index.tsx
@@ -4,6 +4,7 @@ import classNames from 'classnames';
 import RcImage from 'rc-image';
 import type { ImageProps } from 'rc-image';
 
+import { useZIndex } from '../_util/hooks/useZIndex';
 import { getTransitionName } from '../_util/motion';
 import { ConfigContext } from '../config-provider';
 import defaultLocale from '../locale/en_US';
@@ -42,6 +43,11 @@ const Image: CompositionImage<ImageProps> = (props) => {
 
   const mergedClassName = classNames(className, hashId, image?.className);
 
+  const [zIndex] = useZIndex(
+    'ImagePreview',
+    typeof preview === 'object' ? preview.zIndex : undefined,
+  );
+
   const mergedPreview = React.useMemo(() => {
     if (preview === false) {
       return preview;
@@ -60,6 +66,7 @@ const Image: CompositionImage<ImageProps> = (props) => {
       getContainer: getContainer || getContextPopupContainer,
       transitionName: getTransitionName(rootPrefixCls, 'zoom', _preview.transitionName),
       maskTransitionName: getTransitionName(rootPrefixCls, 'fade', _preview.maskTransitionName),
+      zIndex,
     };
   }, [preview, imageLocale]);
 
diff --git a/components/input-number/index.en-US.md b/components/input-number/index.en-US.md
index 836f3582f8ed..3d259bf4781b 100644
--- a/components/input-number/index.en-US.md
+++ b/components/input-number/index.en-US.md
@@ -42,8 +42,10 @@ Common props ref：[Common props](/docs/react/common-props)
 | addonBefore | The label text displayed before (on the left side of) the input field | ReactNode | - |  |
 | autoFocus | If get focus when component mounted | boolean | false | - |
 | bordered | Whether has border style | boolean | true | 4.12.0 |
+| changeOnBlur | Trigger `onChange` when blur. e.g. reset value in range by blur | boolean | true | 5.11.0 |
 | controls | Whether to show `+-` controls, or set custom arrows icon | boolean \| { upIcon?: React.ReactNode; downIcon?: React.ReactNode; } | - | 4.19.0 |
 | decimalSeparator | Decimal separator | string | - | - |
+| placeholder | placeholder | string | - |  |
 | defaultValue | The initial value | number | - | - |
 | disabled | If disable the input | boolean | false | - |
 | formatter | Specifies the format of the value presented | function(value: number \| string, info: { userTyping: boolean, input: string }): string | - | info: 4.17.0 |
diff --git a/components/input-number/index.tsx b/components/input-number/index.tsx
index 1c928728e860..218c5bc99e4c 100644
--- a/components/input-number/index.tsx
+++ b/components/input-number/index.tsx
@@ -103,6 +103,9 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
   );
   const wrapperClassName = `${prefixCls}-group`;
 
+  // eslint-disable-next-line react/jsx-no-useless-fragment
+  const suffixNode = hasFeedback && <>{feedbackIcon}</>;
+
   const element = (
     <RcInputNumber
       ref={inputRef}
@@ -114,7 +117,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
       readOnly={readOnly}
       controls={controlsTemp}
       prefix={prefix}
-      suffix={hasFeedback && feedbackIcon}
+      suffix={suffixNode}
       addonAfter={
         addonAfter && (
           <NoCompactStyle>
diff --git a/components/input-number/index.zh-CN.md b/components/input-number/index.zh-CN.md
index 7f6b2c5382ce..81458d22a6ca 100644
--- a/components/input-number/index.zh-CN.md
+++ b/components/input-number/index.zh-CN.md
@@ -43,8 +43,10 @@ demo:
 | addonBefore | 带标签的 input，设置前置标签 | ReactNode | - | 4.17.0 |
 | autoFocus | 自动获取焦点 | boolean | false | - |
 | bordered | 是否有边框 | boolean | true | 4.12.0 |
+| changeOnBlur | 是否在失去焦点时，触发 `onChange` 事件（例如值超出范围时，重新限制回范围并触发事件） | boolean | true | 5.11.0 |
 | controls | 是否显示增减按钮，也可设置自定义箭头图标 | boolean \| { upIcon?: React.ReactNode; downIcon?: React.ReactNode; } | - | 4.19.0 |
 | decimalSeparator | 小数点 | string | - | - |
+| placeholder | 占位符 | string | - |  |
 | defaultValue | 初始值 | number | - | - |
 | disabled | 禁用 | boolean | false | - |
 | formatter | 指定输入框展示值的格式 | function(value: number \| string, info: { userTyping: boolean, input: string }): string | - | info: 4.17.0 |
diff --git a/components/input/TextArea.tsx b/components/input/TextArea.tsx
index 21a44e6dbd7a..fc492694f992 100644
--- a/components/input/TextArea.tsx
+++ b/components/input/TextArea.tsx
@@ -1,17 +1,18 @@
+import * as React from 'react';
+import { forwardRef } from 'react';
 import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
 import classNames from 'classnames';
 import type { BaseInputProps } from 'rc-input/lib/interface';
 import type { TextAreaRef as RcTextAreaRef } from 'rc-textarea';
 import RcTextArea from 'rc-textarea';
 import type { TextAreaProps as RcTextAreaProps } from 'rc-textarea/lib/interface';
-import * as React from 'react';
-import { forwardRef } from 'react';
+
 import type { InputStatus } from '../_util/statusUtils';
 import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
 import { ConfigContext } from '../config-provider';
 import DisabledContext from '../config-provider/DisabledContext';
-import type { SizeType } from '../config-provider/SizeContext';
 import useSize from '../config-provider/hooks/useSize';
+import type { SizeType } from '../config-provider/SizeContext';
 import { FormItemInputContext } from '../form/context';
 import type { InputFocusOptions } from './Input';
 import { triggerFocus } from './Input';
@@ -38,7 +39,6 @@ const TextArea = forwardRef<TextAreaRef, TextAreaProps>((props, ref) => {
     disabled: customDisabled,
     status: customStatus,
     allowClear,
-    showCount,
     classNames: classes,
     rootClassName,
     className,
@@ -99,7 +99,7 @@ const TextArea = forwardRef<TextAreaRef, TextAreaProps>((props, ref) => {
             [`${prefixCls}-affix-wrapper-borderless`]: !bordered,
             [`${prefixCls}-affix-wrapper-sm`]: mergedSize === 'small',
             [`${prefixCls}-affix-wrapper-lg`]: mergedSize === 'large',
-            [`${prefixCls}-textarea-show-count`]: showCount,
+            [`${prefixCls}-textarea-show-count`]: props.showCount || props.count?.show,
           },
           getStatusClassNames(`${prefixCls}-affix-wrapper`, mergedStatus),
           hashId,
@@ -120,7 +120,6 @@ const TextArea = forwardRef<TextAreaRef, TextAreaProps>((props, ref) => {
       }}
       prefixCls={prefixCls}
       suffix={hasFeedback && <span className={`${prefixCls}-textarea-suffix`}>{feedbackIcon}</span>}
-      showCount={showCount}
       ref={innerRef}
     />,
   );
diff --git a/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap
index e52987c7c3fc..d0245ed32aa5 100644
--- a/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -599,6 +599,91 @@ exports[`renders components/input/demo/addon.tsx extend context correctly 1`] =
 
 exports[`renders components/input/demo/addon.tsx extend context correctly 2`] = `[]`;
 
+exports[`renders components/input/demo/advance-count.tsx extend context correctly 1`] = `
+<div
+  class="ant-flex ant-flex-align-stretch ant-flex-vertical"
+  style="gap: 16px;"
+>
+  <div>
+    <h5
+      class="ant-typography"
+    >
+      Exceed Max
+    </h5>
+    <span
+      class="ant-input-affix-wrapper ant-input-out-of-range"
+    >
+      <input
+        class="ant-input"
+        type="text"
+        value="Hello, antd!"
+      />
+      <span
+        class="ant-input-suffix"
+      >
+        <span
+          class="ant-input-show-count-suffix"
+        >
+          12 / 10
+        </span>
+      </span>
+    </span>
+  </div>
+  <div>
+    <h5
+      class="ant-typography"
+    >
+      Emoji count as length 1
+    </h5>
+    <span
+      class="ant-input-affix-wrapper"
+    >
+      <input
+        class="ant-input"
+        type="text"
+        value="🔥🔥🔥"
+      />
+      <span
+        class="ant-input-suffix"
+      >
+        <span
+          class="ant-input-show-count-suffix"
+        >
+          3
+        </span>
+      </span>
+    </span>
+  </div>
+  <div>
+    <h5
+      class="ant-typography"
+    >
+      Not exceed max
+    </h5>
+    <span
+      class="ant-input-affix-wrapper"
+    >
+      <input
+        class="ant-input"
+        type="text"
+        value="🔥 antd"
+      />
+      <span
+        class="ant-input-suffix"
+      >
+        <span
+          class="ant-input-show-count-suffix"
+        >
+          6 / 6
+        </span>
+      </span>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`renders components/input/demo/advance-count.tsx extend context correctly 2`] = `[]`;
+
 exports[`renders components/input/demo/align.tsx extend context correctly 1`] = `
 Array [
   <div
@@ -10328,7 +10413,10 @@ Array [
 exports[`renders components/input/demo/search-input-loading.tsx extend context correctly 2`] = `[]`;
 
 exports[`renders components/input/demo/show-count.tsx extend context correctly 1`] = `
-Array [
+<div
+  class="ant-flex ant-flex-align-stretch ant-flex-vertical"
+  style="gap: 32px;"
+>
   <span
     class="ant-input-affix-wrapper"
   >
@@ -10347,15 +10435,15 @@ Array [
         0 / 20
       </span>
     </span>
-  </span>,
-  <br />,
-  <br />,
+  </span>
   <span
     class="ant-input-affix-wrapper ant-input-textarea-affix-wrapper ant-input-textarea-show-count ant-input-show-count"
     data-count="0 / 100"
   >
     <textarea
       class="ant-input"
+      maxlength="100"
+      placeholder="can resize"
     />
     <span
       class="ant-input-suffix"
@@ -10366,8 +10454,29 @@ Array [
         0 / 100
       </span>
     </span>
-  </span>,
-]
+  </span>
+  <span
+    class="ant-input-affix-wrapper ant-input-textarea-affix-wrapper ant-input-textarea-show-count ant-input-show-count"
+    data-count="0 / 100"
+    style="height: 120px; resize: none;"
+  >
+    <textarea
+      class="ant-input"
+      maxlength="100"
+      placeholder="disable resize"
+      style="resize: none;"
+    />
+    <span
+      class="ant-input-suffix"
+    >
+      <span
+        class="ant-input-data-count"
+      >
+        0 / 100
+      </span>
+    </span>
+  </span>
+</div>
 `;
 
 exports[`renders components/input/demo/show-count.tsx extend context correctly 2`] = `[]`;
@@ -10602,6 +10711,7 @@ Array [
   <br />,
   <textarea
     class="ant-input"
+    maxlength="6"
     placeholder="maxLength is 6"
     rows="4"
   />,
@@ -10670,52 +10780,6 @@ Array [
 
 exports[`renders components/input/demo/textarea-resize.tsx extend context correctly 2`] = `[]`;
 
-exports[`renders components/input/demo/textarea-show-count.tsx extend context correctly 1`] = `
-Array [
-  <span
-    class="ant-input-affix-wrapper ant-input-textarea-affix-wrapper ant-input-textarea-show-count ant-input-show-count"
-    data-count="0 / 100"
-    style="height: 120px; margin-bottom: 24px;"
-  >
-    <textarea
-      class="ant-input"
-      placeholder="can resize"
-    />
-    <span
-      class="ant-input-suffix"
-    >
-      <span
-        class="ant-input-data-count"
-      >
-        0 / 100
-      </span>
-    </span>
-  </span>,
-  <span
-    class="ant-input-affix-wrapper ant-input-textarea-affix-wrapper ant-input-textarea-show-count ant-input-show-count"
-    data-count="0 / 100"
-    style="height: 120px; resize: none;"
-  >
-    <textarea
-      class="ant-input"
-      placeholder="disable resize"
-      style="resize: none;"
-    />
-    <span
-      class="ant-input-suffix"
-    >
-      <span
-        class="ant-input-data-count"
-      >
-        0 / 100
-      </span>
-    </span>
-  </span>,
-]
-`;
-
-exports[`renders components/input/demo/textarea-show-count.tsx extend context correctly 2`] = `[]`;
-
 exports[`renders components/input/demo/tooltip.tsx extend context correctly 1`] = `
 Array [
   <input
diff --git a/components/input/__tests__/__snapshots__/demo.test.tsx.snap b/components/input/__tests__/__snapshots__/demo.test.tsx.snap
index 865f85968a39..592dfdd8abc0 100644
--- a/components/input/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/input/__tests__/__snapshots__/demo.test.tsx.snap
@@ -328,6 +328,89 @@ exports[`renders components/input/demo/addon.tsx correctly 1`] = `
 </div>
 `;
 
+exports[`renders components/input/demo/advance-count.tsx correctly 1`] = `
+<div
+  class="ant-flex ant-flex-align-stretch ant-flex-vertical"
+  style="gap:16px"
+>
+  <div>
+    <h5
+      class="ant-typography"
+    >
+      Exceed Max
+    </h5>
+    <span
+      class="ant-input-affix-wrapper ant-input-out-of-range"
+    >
+      <input
+        class="ant-input"
+        type="text"
+        value="Hello, antd!"
+      />
+      <span
+        class="ant-input-suffix"
+      >
+        <span
+          class="ant-input-show-count-suffix"
+        >
+          12 / 10
+        </span>
+      </span>
+    </span>
+  </div>
+  <div>
+    <h5
+      class="ant-typography"
+    >
+      Emoji count as length 1
+    </h5>
+    <span
+      class="ant-input-affix-wrapper"
+    >
+      <input
+        class="ant-input"
+        type="text"
+        value="🔥🔥🔥"
+      />
+      <span
+        class="ant-input-suffix"
+      >
+        <span
+          class="ant-input-show-count-suffix"
+        >
+          3
+        </span>
+      </span>
+    </span>
+  </div>
+  <div>
+    <h5
+      class="ant-typography"
+    >
+      Not exceed max
+    </h5>
+    <span
+      class="ant-input-affix-wrapper"
+    >
+      <input
+        class="ant-input"
+        type="text"
+        value="🔥 antd"
+      />
+      <span
+        class="ant-input-suffix"
+      >
+        <span
+          class="ant-input-show-count-suffix"
+        >
+          6 / 6
+        </span>
+      </span>
+    </span>
+  </div>
+</div>
+`;
+
 exports[`renders components/input/demo/align.tsx correctly 1`] = `
 Array [
   <div
@@ -3879,7 +3962,10 @@ Array [
 `;
 
 exports[`renders components/input/demo/show-count.tsx correctly 1`] = `
-Array [
+<div
+  class="ant-flex ant-flex-align-stretch ant-flex-vertical"
+  style="gap:32px"
+>
   <span
     class="ant-input-affix-wrapper"
   >
@@ -3898,15 +3984,15 @@ Array [
         0 / 20
       </span>
     </span>
-  </span>,
-  <br />,
-  <br />,
+  </span>
   <span
     class="ant-input-affix-wrapper ant-input-textarea-affix-wrapper ant-input-textarea-show-count ant-input-show-count"
     data-count="0 / 100"
   >
     <textarea
       class="ant-input"
+      maxlength="100"
+      placeholder="can resize"
     />
     <span
       class="ant-input-suffix"
@@ -3917,8 +4003,29 @@ Array [
         0 / 100
       </span>
     </span>
-  </span>,
-]
+  </span>
+  <span
+    class="ant-input-affix-wrapper ant-input-textarea-affix-wrapper ant-input-textarea-show-count ant-input-show-count"
+    data-count="0 / 100"
+    style="height:120px;resize:none"
+  >
+    <textarea
+      class="ant-input"
+      maxlength="100"
+      placeholder="disable resize"
+      style="resize:none"
+    />
+    <span
+      class="ant-input-suffix"
+    >
+      <span
+        class="ant-input-data-count"
+      >
+        0 / 100
+      </span>
+    </span>
+  </span>
+</div>
 `;
 
 exports[`renders components/input/demo/size.tsx correctly 1`] = `
@@ -4147,6 +4254,7 @@ Array [
   <br />,
   <textarea
     class="ant-input"
+    maxlength="6"
     placeholder="maxLength is 6"
     rows="4"
   />,
@@ -4211,50 +4319,6 @@ Array [
 ]
 `;
 
-exports[`renders components/input/demo/textarea-show-count.tsx correctly 1`] = `
-Array [
-  <span
-    class="ant-input-affix-wrapper ant-input-textarea-affix-wrapper ant-input-textarea-show-count ant-input-show-count"
-    data-count="0 / 100"
-    style="height:120px;margin-bottom:24px"
-  >
-    <textarea
-      class="ant-input"
-      placeholder="can resize"
-    />
-    <span
-      class="ant-input-suffix"
-    >
-      <span
-        class="ant-input-data-count"
-      >
-        0 / 100
-      </span>
-    </span>
-  </span>,
-  <span
-    class="ant-input-affix-wrapper ant-input-textarea-affix-wrapper ant-input-textarea-show-count ant-input-show-count"
-    data-count="0 / 100"
-    style="height:120px;resize:none"
-  >
-    <textarea
-      class="ant-input"
-      placeholder="disable resize"
-      style="resize:none"
-    />
-    <span
-      class="ant-input-suffix"
-    >
-      <span
-        class="ant-input-data-count"
-      >
-        0 / 100
-      </span>
-    </span>
-  </span>,
-]
-`;
-
 exports[`renders components/input/demo/tooltip.tsx correctly 1`] = `
 <input
   class="ant-input"
diff --git a/components/input/__tests__/__snapshots__/textarea.test.tsx.snap b/components/input/__tests__/__snapshots__/textarea.test.tsx.snap
index daefcb2d7cc2..429697e0ce9e 100644
--- a/components/input/__tests__/__snapshots__/textarea.test.tsx.snap
+++ b/components/input/__tests__/__snapshots__/textarea.test.tsx.snap
@@ -354,6 +354,7 @@ exports[`TextArea allowClear should not show icon if value is undefined, null or
 exports[`TextArea maxLength should support maxLength 1`] = `
 <textarea
   class="ant-input"
+  maxlength="10"
 />
 `;
 
diff --git a/components/input/__tests__/index.test.tsx b/components/input/__tests__/index.test.tsx
index 140e4187e4a4..a89162e6b20a 100644
--- a/components/input/__tests__/index.test.tsx
+++ b/components/input/__tests__/index.test.tsx
@@ -261,23 +261,6 @@ describe('should support showCount', () => {
     expect(container.querySelector('.ant-input-show-count-suffix')?.innerHTML).toBe('8 / 5');
   });
 
-  describe('emoji', () => {
-    it('should minimize value between emoji length and maxLength', () => {
-      const { container } = render(<Input maxLength={1} showCount value="👀" />);
-      expect(container.querySelector('input')?.getAttribute('value')).toBe('👀');
-      expect(container.querySelector('.ant-input-show-count-suffix')?.innerHTML).toBe('1 / 1');
-
-      const { container: container1 } = render(<Input maxLength={2} showCount value="👀" />);
-      expect(container1.querySelector('.ant-input-show-count-suffix')?.innerHTML).toBe('1 / 2');
-    });
-
-    it('slice emoji', () => {
-      const { container } = render(<Input maxLength={5} showCount value="1234😂" />);
-      expect(container.querySelector('input')?.getAttribute('value')).toBe('1234😂');
-      expect(container.querySelector('.ant-input-show-count-suffix')?.innerHTML).toBe('5 / 5');
-    });
-  });
-
   it('count formatter', () => {
     const { container } = render(
       <Input
@@ -291,6 +274,20 @@ describe('should support showCount', () => {
     expect(container.querySelector('input')?.getAttribute('value')).toBe('12345');
     expect(container.querySelector('.ant-input-show-count-suffix')?.innerHTML).toBe('12345, 5, 5');
   });
+
+  it('count', () => {
+    const { container } = render(
+      <Input
+        count={{
+          show: ({ value, count, maxLength }) => `${value}, ${count}, ${maxLength}`,
+          max: 5,
+        }}
+        value="12345"
+      />,
+    );
+    expect(container.querySelector('input')?.getAttribute('value')).toBe('12345');
+    expect(container.querySelector('.ant-input-show-count-suffix')?.innerHTML).toBe('12345, 5, 5');
+  });
 });
 
 describe('Input allowClear', () => {
diff --git a/components/input/__tests__/textarea.test.tsx b/components/input/__tests__/textarea.test.tsx
index 6fd52fb4db3c..5f401d2b51fc 100644
--- a/components/input/__tests__/textarea.test.tsx
+++ b/components/input/__tests__/textarea.test.tsx
@@ -1,6 +1,7 @@
-import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
 import type { ChangeEventHandler, TextareaHTMLAttributes } from 'react';
 import React, { useState } from 'react';
+import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
+
 import Input from '..';
 import focusTest from '../../../tests/shared/focusTest';
 import type { RenderOptions } from '../../../tests/utils';
@@ -102,18 +103,6 @@ describe('TextArea', () => {
       expect(container.querySelector('textarea')?.value).toEqual('light');
     });
 
-    it('should limit correctly when in control', () => {
-      const Demo = () => {
-        const [val, setVal] = React.useState('');
-        return <TextArea maxLength={1} value={val} onChange={(e) => setVal(e.target.value)} />;
-      };
-
-      const { container } = render(<Demo />);
-      fireEvent.change(container.querySelector('textarea')!, { target: { value: 'light' } });
-
-      expect(container.querySelector('textarea')?.value).toEqual('l');
-    });
-
     it('should exceed maxLength when use IME', () => {
       const onChange = jest.fn();
 
@@ -129,68 +118,6 @@ describe('TextArea', () => {
         expect.objectContaining({ target: expect.objectContaining({ value: '竹' }) }),
       );
     });
-
-    // 字符输入
-    it('should not cut off string when cursor position is not at the end', () => {
-      const onChange = jest.fn();
-      const { container } = render(
-        <TextArea maxLength={6} defaultValue="123456" onChange={onChange} />,
-      );
-      fireEvent.change(container.querySelector('textarea')!, {
-        target: { selectionStart: 1, value: 'w123456' },
-      });
-      fireEvent.change(container.querySelector('textarea')!, {
-        target: { selectionStart: 3, value: 'w123456' },
-      });
-      expect(container.querySelector('textarea')?.value).toBe('123456');
-    });
-
-    // 拼音输入
-    // 1. 光标位于最后，且当前字符数未达到6个，若选中的字符 + 原字符的长度超过6个，则将最终的字符按照maxlength截断
-    it('when the input method is pinyin and the cursor is at the end, should use maxLength to crop', () => {
-      const onChange = jest.fn();
-      const { container } = render(
-        <TextArea maxLength={6} defaultValue="1234" onChange={onChange} />,
-      );
-      fireEvent.change(container.querySelector('textarea')!, {
-        target: { selectionStart: 4, value: '1234' },
-      });
-      fireEvent.compositionStart(container.querySelector('textarea')!);
-
-      fireEvent.change(container.querySelector('textarea')!, {
-        target: { selectionStart: 9, value: '1234z z z' },
-      });
-      fireEvent.change(container.querySelector('textarea')!, {
-        target: { selectionStart: 7, value: '1234组织者' },
-      });
-
-      fireEvent.compositionEnd(container.querySelector('textarea')!);
-
-      expect(container.querySelector('textarea')?.value).toBe('1234组织');
-    });
-
-    // 2. 光标位于中间或开头，且当前字符数未达到6个，若选中的字符 + 原字符的长度超过6个，则显示原有字符
-    it('when the input method is Pinyin and the cursor is in the middle, should display the original string', () => {
-      const onChange = jest.fn();
-      const { container } = render(
-        <TextArea maxLength={6} defaultValue="1234" onChange={onChange} />,
-      );
-      fireEvent.change(container.querySelector('textarea')!, {
-        target: { selectionStart: 2, value: '1234' },
-      });
-      fireEvent.compositionStart(container.querySelector('textarea')!);
-
-      fireEvent.change(container.querySelector('textarea')!, {
-        target: { selectionStart: 2, value: '12z z z34' },
-      });
-      fireEvent.change(container.querySelector('textarea')!, {
-        target: { selectionStart: 5, value: '12组织者34' },
-      });
-
-      fireEvent.compositionEnd(container.querySelector('textarea')!);
-
-      expect(container.querySelector('textarea')?.value).toBe('1234');
-    });
   });
 
   it('handleKeyDown', () => {
@@ -259,37 +186,6 @@ describe('TextArea', () => {
       ).toBe('8 / 5');
     });
 
-    describe('emoji', () => {
-      it('should minimize value between emoji length and maxLength', () => {
-        const { container } = render(<TextArea maxLength={1} showCount value="👀" />);
-        expect(container.querySelector('textarea')?.value).toBe('👀');
-        expect(
-          container.querySelector('.ant-input-textarea-show-count')?.getAttribute('data-count'),
-        ).toBe('1 / 1');
-
-        // fix: 当 maxLength 长度为 2 的时候，输入 emoji 之后 showCount 会显示 1/2，但是不能再输入了
-        // zombieJ: 逻辑统一了，emoji 现在也可以正确计数了
-        const { container: container1 } = render(<TextArea maxLength={2} showCount value="👀" />);
-        expect(
-          container1.querySelector('.ant-input-textarea-show-count')?.getAttribute('data-count'),
-        ).toBe('1 / 2');
-      });
-
-      it('defaultValue should slice', () => {
-        const { container } = render(<TextArea maxLength={1} defaultValue="🧐cut" />);
-        expect(container.querySelector('textarea')?.value).toBe('🧐');
-      });
-
-      // 修改TextArea value截取规则后新增单测
-      it('slice emoji', () => {
-        const { container } = render(<TextArea maxLength={5} showCount value="1234😂" />);
-        expect(container.querySelector('textarea')?.value).toBe('1234😂');
-        expect(
-          container.querySelector('.ant-input-textarea-show-count')?.getAttribute('data-count'),
-        ).toBe('5 / 5');
-      });
-    });
-
     it('className & style patch to outer', () => {
       const { container } = render(
         <TextArea className="bamboo" style={{ background: 'red' }} showCount />,
diff --git a/components/input/demo/advance-count.md b/components/input/demo/advance-count.md
new file mode 100644
index 000000000000..e03b9be00bb7
--- /dev/null
+++ b/components/input/demo/advance-count.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+在某些场景下，需要定制计数能力（例如 emoji 长度以 1 计算），可以通过 `count` 属性来实现。在该模式下，通过 `count.max` 属性来超出原生 `maxLength` 的限制。
+
+## en-US
+
+It is necessary to customize the counting ability in some scenarios (such as emoji length is counted as 1), which can be achieved through the `count` attribute. Use `count.max` attribute exceeds the limit of the native `maxLength`.
diff --git a/components/input/demo/advance-count.tsx b/components/input/demo/advance-count.tsx
new file mode 100644
index 000000000000..079a227e2243
--- /dev/null
+++ b/components/input/demo/advance-count.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { Flex, Input, Typography } from 'antd';
+import { runes } from 'runes2';
+
+const App: React.FC = () => (
+  <Flex vertical gap={16}>
+    <div>
+      <Typography.Title level={5}>Exceed Max</Typography.Title>
+      <Input
+        count={{
+          show: true,
+          max: 10,
+        }}
+        defaultValue="Hello, antd!"
+      />
+    </div>
+
+    <div>
+      <Typography.Title level={5}>Emoji count as length 1</Typography.Title>
+      <Input
+        count={{
+          show: true,
+          strategy: (txt) => runes(txt).length,
+        }}
+        defaultValue="🔥🔥🔥"
+      />
+    </div>
+
+    <div>
+      <Typography.Title level={5}>Not exceed max</Typography.Title>
+      <Input
+        count={{
+          show: true,
+          max: 6,
+          strategy: (txt) => runes(txt).length,
+          exceedFormatter: (txt, { max }) => runes(txt).slice(0, max).join(''),
+        }}
+        defaultValue="🔥 antd"
+      />
+    </div>
+  </Flex>
+);
+
+export default App;
diff --git a/components/input/demo/show-count.tsx b/components/input/demo/show-count.tsx
index 18c5df3dd2cb..ae715896367e 100644
--- a/components/input/demo/show-count.tsx
+++ b/components/input/demo/show-count.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Input } from 'antd';
+import { Flex, Input } from 'antd';
 
 const { TextArea } = Input;
 
@@ -8,12 +8,17 @@ const onChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>)
 };
 
 const App: React.FC = () => (
-  <>
+  <Flex vertical gap={32}>
     <Input showCount maxLength={20} onChange={onChange} />
-    <br />
-    <br />
-    <TextArea showCount maxLength={100} onChange={onChange} />
-  </>
+    <TextArea showCount maxLength={100} onChange={onChange} placeholder="can resize" />
+    <TextArea
+      showCount
+      maxLength={100}
+      onChange={onChange}
+      placeholder="disable resize"
+      style={{ height: 120, resize: 'none' }}
+    />
+  </Flex>
 );
 
 export default App;
diff --git a/components/input/demo/textarea-show-count.md b/components/input/demo/textarea-show-count.md
deleted file mode 100644
index 3e48eba88e00..000000000000
--- a/components/input/demo/textarea-show-count.md
+++ /dev/null
@@ -1,7 +0,0 @@
-## zh-CN
-
-展示字数提示。
-
-## en-US
-
-Show character counting.
diff --git a/components/input/demo/textarea-show-count.tsx b/components/input/demo/textarea-show-count.tsx
deleted file mode 100644
index ea2b3f0c2096..000000000000
--- a/components/input/demo/textarea-show-count.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react';
-import { Input } from 'antd';
-
-const { TextArea } = Input;
-
-const onChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-  console.log('Change:', e.target.value);
-};
-
-const App: React.FC = () => (
-  <>
-    <TextArea
-      showCount
-      maxLength={100}
-      style={{ height: 120, marginBottom: 24 }}
-      onChange={onChange}
-      placeholder="can resize"
-    />
-    <TextArea
-      showCount
-      maxLength={100}
-      style={{ height: 120, resize: 'none' }}
-      onChange={onChange}
-      placeholder="disable resize"
-    />
-  </>
-);
-
-export default App;
diff --git a/components/input/index.en-US.md b/components/input/index.en-US.md
index ea4618290c96..55520e242589 100644
--- a/components/input/index.en-US.md
+++ b/components/input/index.en-US.md
@@ -32,7 +32,7 @@ A basic widget for getting the user input is a text field. Keyboard and mouse ca
 <code src="./demo/password-input.tsx">Password box</code>
 <code src="./demo/allowClear.tsx">With clear icon</code>
 <code src="./demo/show-count.tsx">With character counting</code>
-<code src="./demo/textarea-show-count.tsx">Textarea with character counting</code>
+<code src="./demo/advance-count.tsx" version=">= 5.10.0">Custom count logic</code>
 <code src="./demo/status.tsx">Status</code>
 <code src="./demo/borderless.tsx">Borderless</code>
 <code src="./demo/focus.tsx">Focus</code>
@@ -55,14 +55,15 @@ Common props ref：[Common props](/docs/react/common-props)
 | allowClear | If allow to remove input content with clear icon | boolean \| { clearIcon: ReactNode } | false |  |
 | bordered | Whether has border style | boolean | true | 4.5.0 |
 | classNames | Semantic DOM class | Record<[SemanticDOM](#input-1), string> | - | 5.4.0 |
+| count | Character count config | [CountConfig](#countconfig) | - | 5.10.0 |
 | defaultValue | The initial input content | string | - |  |
 | disabled | Whether the input is disabled | boolean | false |  |
 | id | The ID for input | string | - |  |
 | maxLength | The maximum number of characters in Input | number | - |  |
+| prefix | The prefix icon for the Input | ReactNode | - |  |
 | showCount | Whether to show character count | boolean \| { formatter: (info: { value: string, count: number, maxLength?: number }) => ReactNode } | false | 4.18.0 info.value: 4.23.0 |
 | status | Set validation status | 'error' \| 'warning' | - | 4.19.0 |
 | styles | Semantic DOM style | Record<[SemanticDOM](#input-1), CSSProperties> | - | 5.4.0 |
-| prefix | The prefix icon for the Input | ReactNode | - |  |
 | size | The size of the input box. Note: in the context of a form, the `middle` size is used | `large` \| `middle` \| `small` | - |  |
 | suffix | The suffix icon for the Input | ReactNode | - |  |
 | type | The type of input, see: [MDN](https://developer.mozilla.org/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types)( use `Input.TextArea` instead of `type="textarea"`) | string | `text` |  |
@@ -74,21 +75,30 @@ Common props ref：[Common props](/docs/react/common-props)
 
 The rest of the props of Input are exactly the same as the original [input](https://reactjs.org/docs/dom-elements.html#all-supported-html-attributes).
 
+#### CountConfig
+
+```tsx
+interface CountConfig {
+  // Max character count. Different from the native `maxLength`, it will be marked warning but not truncated
+  max?: number;
+  // Custom character count, for example, the standard emoji length is greater than 1, you can customize the counting strategy to change it to 1
+  strategy?: (value: string) => number;
+  // Same as `showCount`
+  show?: boolean | ((args: { value: string; count: number; maxLength?: number }) => ReactNode);
+  // Custom clipping logic when the number of characters exceeds `count.max`, no clipping when not configured
+  exceedFormatter?: (value: string, config: { max: number }) => string;
+}
+```
+
 ### Input.TextArea
 
+Same as Input, and more:
+
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| allowClear | Customize clear icon | boolean \| { clearIcon?: ReactNode } | false | 5.8.0: Support object type |
-| autoSize | Height autosize feature, can be set to true \| false or an object { minRows: 2, maxRows: 6 } | boolean \| object | false |  |
-| bordered | Whether has border style | boolean | true | 4.5.0 |
+| autoSize | Height auto size feature, can be set to true \| false or an object { minRows: 2, maxRows: 6 } | boolean \| object | false |  |
 | classNames | Semantic DOM class | Record<[SemanticDOM](#inputtextarea-1), string> | - | 5.4.0 |
-| defaultValue | The initial input content | string | - |  |
-| maxLength | The maximum number of characters in TextArea | number | - | 4.7.0 |
-| showCount | Whether to show character count | boolean \| { formatter: (info: { value: string, count: number, maxLength?: number }) => string } | false | 4.7.0 formatter: 4.10.0 info.value: 4.23.0 |
 | styles | Semantic DOM style | Record<[SemanticDOM](#inputtextarea-1), CSSProperties> | - | 5.4.0 |
-| value | The input content value | string | - |  |
-| onPressEnter | The callback function that is triggered when Enter key is pressed | function(e) | - |  |
-| onResize | The callback function that is triggered when resize | function({ width, height }) | - |  |
 
 The rest of the props of `Input.TextArea` are the same as the original [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea).
 
diff --git a/components/input/index.zh-CN.md b/components/input/index.zh-CN.md
index 6a4c9926fc8a..22778624dbb0 100644
--- a/components/input/index.zh-CN.md
+++ b/components/input/index.zh-CN.md
@@ -33,7 +33,7 @@ demo:
 <code src="./demo/password-input.tsx">密码框</code>
 <code src="./demo/allowClear.tsx">带移除图标</code>
 <code src="./demo/show-count.tsx">带字数提示</code>
-<code src="./demo/textarea-show-count.tsx">带字数提示的文本域</code>
+<code src="./demo/advance-count.tsx" version=">= 5.10.0">定制计数能力</code>
 <code src="./demo/status.tsx">自定义状态</code>
 <code src="./demo/borderless.tsx">无边框</code>
 <code src="./demo/focus.tsx">聚焦</code>
@@ -56,14 +56,15 @@ demo:
 | allowClear | 可以点击清除图标删除内容 | boolean \| { clearIcon: ReactNode } | - |  |
 | bordered | 是否有边框 | boolean | true | 4.5.0 |
 | classNames | 语义化结构 class | Record<[SemanticDOM](#input-1), string> | - | 5.4.0 |
+| count | 字符计数配置 | [CountConfig](#countconfig) | - | 5.10.0 |
 | defaultValue | 输入框默认内容 | string | - |  |
 | disabled | 是否禁用状态，默认为 false | boolean | false |  |
 | id | 输入框的 id | string | - |  |
 | maxLength | 最大长度 | number | - |  |
+| prefix | 带有前缀图标的 input | ReactNode | - |  |
 | showCount | 是否展示字数 | boolean \| { formatter: (info: { value: string, count: number, maxLength?: number }) => ReactNode } | false | 4.18.0 info.value: 4.23.0 |
 | status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
 | styles | 语义化结构 style | Record<[SemanticDOM](#input-1), CSSProperties> | - | 5.4.0 |
-| prefix | 带有前缀图标的 input | ReactNode | - |  |
 | size | 控件大小。注：标准表单内的输入框大小限制为 `middle` | `large` \| `middle` \| `small` | - |  |
 | suffix | 带有后缀图标的 input | ReactNode | - |  |
 | type | 声明 input 类型，同原生 input 标签的 type 属性，见：[MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#属性)(请直接使用 `Input.TextArea` 代替 `type="textarea"`) | string | `text` |  |
@@ -75,21 +76,30 @@ demo:
 
 Input 的其他属性和 React 自带的 [input](https://reactjs.org/docs/dom-elements.html#all-supported-html-attributes) 一致。
 
+#### CountConfig
+
+```tsx
+interface CountConfig {
+  // 最大字符数，不同于原生 `maxLength`，超出后标红但不会截断
+  max?: number;
+  // 自定义字符计数，例如标准 emoji 长度大于 1，可以自定义计数策略将其改为 1
+  strategy?: (value: string) => number;
+  // 同 `showCount`
+  show?: boolean | ((args: { value: string; count: number; maxLength?: number }) => ReactNode);
+  // 当字符数超出 `count.max` 时的自定义裁剪逻辑，不配置时不进行裁剪
+  exceedFormatter?: (value: string, config: { max: number }) => string;
+}
+```
+
 ### Input.TextArea
 
+同 Input 属性，外加：
+
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| allowClear | 自定义清除按钮 | boolean \| { clearIcon?: ReactNode } | false | 5.8.0: 支持对象类型 |
 | autoSize | 自适应内容高度，可设置为 true \| false 或对象：{ minRows: 2, maxRows: 6 } | boolean \| object | false |  |
-| bordered | 是否有边框 | boolean | true | 4.5.0 |
 | classNames | 语义化结构 class | Record<[SemanticDOM](#inputtextarea-1), string> | - | 5.4.0 |
-| defaultValue | 输入框默认内容 | string | - |  |
-| maxLength | 内容最大长度 | number | - | 4.7.0 |
-| showCount | 是否展示字数 | boolean \| { formatter: (info: { value: string, count: number, maxLength?: number }) => string } | false | 4.7.0 formatter: 4.10.0 info.value: 4.23.0 |
 | styles | 语义化结构 style | Record<[SemanticDOM](#inputtextarea-1), CSSProperties> | - | 5.4.0 |
-| value | 输入框内容 | string | - |  |
-| onPressEnter | 按下回车的回调 | function(e) | - |  |
-| onResize | resize 回调 | function({ width, height }) | - |  |
 
 `Input.TextArea` 的其他属性和浏览器自带的 [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) 一致。
 
diff --git a/components/input/style/index.ts b/components/input/style/index.ts
index 24867bd57fd8..0537ce075694 100644
--- a/components/input/style/index.ts
+++ b/components/input/style/index.ts
@@ -1,4 +1,5 @@
 import type { CSSObject } from '@ant-design/cssinjs';
+
 import { clearFix, resetComponent } from '../../style';
 import { genCompactItemStyle } from '../../style/compact-item';
 import type { GlobalToken } from '../../theme/interface';
@@ -1017,6 +1018,20 @@ const genTextAreaStyle: GenerateStyle<InputToken> = (token) => {
   };
 };
 
+// ============================== Range ===============================
+const genRangeStyle: GenerateStyle<InputToken> = (token) => {
+  const { componentCls } = token;
+
+  return {
+    [`${componentCls}-out-of-range`]: {
+      [`&, & input, & textarea, ${componentCls}-show-count-suffix, ${componentCls}-data-count`]: {
+        color: token.colorError,
+      },
+    },
+  };
+};
+
+// ============================== Tokens ==============================
 export function initInputToken(token: GlobalToken): SharedInputToken {
   return mergeToken<InputToken>(token, {
     inputAffixPadding: token.paddingXXS,
@@ -1082,6 +1097,7 @@ export default genComponentStyleHook(
       genAffixStyle(inputToken),
       genGroupStyle(inputToken),
       genSearchInputStyle(inputToken),
+      genRangeStyle(inputToken),
       // =====================================================
       // ==             Space Compact                       ==
       // =====================================================
diff --git a/components/layout/index.ts b/components/layout/index.ts
index 1cd8a7a70e3c..843c18b41558 100644
--- a/components/layout/index.ts
+++ b/components/layout/index.ts
@@ -1,5 +1,5 @@
 import InternalLayout, { Content, Footer, Header } from './layout';
-import Sider from './Sider';
+import Sider, { SiderContext } from './Sider';
 
 export type { BasicProps as LayoutProps } from './layout';
 export type { SiderProps } from './Sider';
@@ -11,6 +11,8 @@ type CompoundedComponent = InternalLayoutType & {
   Footer: typeof Footer;
   Content: typeof Content;
   Sider: typeof Sider;
+  /** @private Internal Context. Do not use in your production. */
+  _InternalSiderContext: typeof SiderContext;
 };
 
 const Layout = InternalLayout as CompoundedComponent;
@@ -19,5 +21,6 @@ Layout.Header = Header;
 Layout.Footer = Footer;
 Layout.Content = Content;
 Layout.Sider = Sider;
+Layout._InternalSiderContext = SiderContext;
 
 export default Layout;
diff --git a/components/list/index.tsx b/components/list/index.tsx
index 0467245a916a..cfcdc962a0a7 100644
--- a/components/list/index.tsx
+++ b/components/list/index.tsx
@@ -7,6 +7,7 @@ import { responsiveArray } from '../_util/responsiveObserver';
 import { ConfigContext } from '../config-provider';
 import DefaultRenderEmpty from '../config-provider/defaultRenderEmpty';
 import { Row } from '../grid';
+import type { RowProps } from '../grid';
 import useBreakpoint from '../grid/hooks/useBreakpoint';
 import type { PaginationConfig } from '../pagination';
 import Pagination from '../pagination';
@@ -27,7 +28,7 @@ export type ColumnCount = number;
 export type ColumnType = 'gutter' | 'column' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
 
 export interface ListGridType {
-  gutter?: number;
+  gutter?: RowProps['gutter'];
   column?: ColumnCount;
   xs?: ColumnCount;
   sm?: ColumnCount;
diff --git a/components/locale/__tests__/__snapshots__/index.test.tsx.snap b/components/locale/__tests__/__snapshots__/index.test.tsx.snap
index 935d89d485fe..f3b5be08c4c4 100644
--- a/components/locale/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/locale/__tests__/__snapshots__/index.test.tsx.snap
@@ -76900,7 +76900,7 @@ exports[`Locale Provider should display the text as eu 1`] = `
                 type="button"
               >
                 <span>
-                  Ezeztatu
+                  Utzi
                 </span>
               </button>
               <button
@@ -76965,7 +76965,7 @@ exports[`Locale Provider should display the text as eu 1`] = `
           class="ant-transfer-list-header-selected"
         >
           0
-          Elementu
+          elementu
         </span>
         <span
           class="ant-transfer-list-header-title"
@@ -77199,7 +77199,7 @@ exports[`Locale Provider should display the text as eu 1`] = `
           class="ant-transfer-list-header-selected"
         >
           0
-          Elementu
+          elementu
         </span>
         <span
           class="ant-transfer-list-header-title"
@@ -78486,7 +78486,7 @@ exports[`Locale Provider should display the text as eu 1`] = `
               type="button"
             >
               <span>
-                Ezeztatu
+                Utzi
               </span>
             </button>
             <button
diff --git a/components/locale/eu_ES.ts b/components/locale/eu_ES.ts
index 84dd73338c49..878f5d1e42be 100644
--- a/components/locale/eu_ES.ts
+++ b/components/locale/eu_ES.ts
@@ -19,36 +19,41 @@ const localeValues: Locale = {
   Table: {
     filterTitle: 'Iragazi menua',
     filterConfirm: 'Onartu',
-    filterReset: 'Berrasi',
+    filterReset: 'Garbitu',
     filterEmptyText: 'Iragazkirik gabe',
-    filterCheckall: 'Autatu dena',
+    filterCheckall: 'Hautatu dena',
     filterSearchPlaceholder: 'Bilatu iragazkietan',
     emptyText: 'Daturik gabe',
-    selectAll: 'Autatu dena',
+    selectAll: 'Hautatu dena',
     selectInvert: 'Alderantzikatu hautaketa',
     selectNone: 'Hustu dena',
-    selectionAll: 'Autatu datu guztiak',
+    selectionAll: 'Hautatu datu guztiak',
     sortTitle: 'Ordenatu',
-    expand: 'Zabaldu ilera',
-    collapse: 'Ilera kolapsatu',
-    triggerDesc: 'Klik beheranzko ordenan ordenatzeko',
-    triggerAsc: 'Klik goranzko ordenan ordenatzeko',
+    expand: 'Zabaldu',
+    collapse: 'Itxi',
+    triggerDesc: 'Egin klik beheranzko ordenean ordenatzeko',
+    triggerAsc: 'Egin klik goranzko ordenean ordenatzeko',
     cancelSort: 'Egin klik ordenamendua ezeztatzeko',
   },
+  Tour: {
+    Next: 'Hurrengoa',
+    Previous: 'Aurrekoa',
+    Finish: 'Bukatu',
+  },
   Modal: {
     okText: 'Onartu',
-    cancelText: 'Ezeztatu',
+    cancelText: 'Utzi',
     justOkText: 'Onartu',
   },
   Popconfirm: {
     okText: 'Onartu',
-    cancelText: 'Ezeztatu',
+    cancelText: 'Utzi',
   },
   Transfer: {
     titles: ['', ''],
     searchPlaceholder: 'Bilatu hemen',
-    itemUnit: 'Elementu',
-    itemsUnit: 'Elementuak',
+    itemUnit: 'elementu',
+    itemsUnit: 'elementuak',
     remove: 'Ezabatu',
     selectCurrent: 'Hautatu uneko orria',
     removeCurrent: 'Uneko orria ezabatu',
@@ -57,9 +62,9 @@ const localeValues: Locale = {
     selectInvert: 'Uneko orrialdea alderantzikatu',
   },
   Upload: {
-    uploading: 'Eguneratzen...',
-    removeFile: 'Fitxategi ezabatu',
-    uploadError: 'Errore bat gertate da fitxategia igotzerakoan',
+    uploading: 'Igotzen...',
+    removeFile: 'Fitxategia ezabatu',
+    uploadError: 'Errorea fitxategia igotzerakoan',
     previewFile: 'Aurrebista',
     downloadFile: 'Fitxategia deskargatu',
   },
@@ -81,13 +86,13 @@ const localeValues: Locale = {
   Form: {
     optional: '(aukerakoa)',
     defaultValidateMessages: {
-      default: '${label} eremuaren balidazio errore',
+      default: '${label} eremuaren balidazio errorea',
       required: 'Mesedez, sartu ${label}',
       enum: '${label} [${enum}] -tako bat izan behar da',
       whitespace: '${label} ezin da izan karaktere zuri bat',
       date: {
         format: '${label} dataren formatua baliogabea da',
-        parse: '${label} ezin da data batera deitu',
+        parse: '${label} ezin da data batera doitu',
         invalid: '${label} data baliogabea da',
       },
       types: {
@@ -106,19 +111,19 @@ const localeValues: Locale = {
         hex: typeTemplate,
       },
       string: {
-        len: '${label} ${len} karaktere izan dehar ditu',
-        min: '${label} gutxienez ${min} karaktere izan behar ditu',
-        max: '${label} gehienez ${max} karaktere izan behar ditu',
-        range: '${label} ${min}-${max} karaktere artean izan behar ditu',
+        len: '${label} eremuak ${len} karaktere izan dehar ditu',
+        min: '${label} eremuak gutxienez ${min} karaktere izan behar ditu',
+        max: '${label} eremuak gehienez ${max} karaktere izan behar ditu',
+        range: '${label} eremuak ${min}-${max} karaktere artean izan behar ditu',
       },
       number: {
-        len: '${label} -ren balioa ${len} izan behar da',
-        min: '${label} -ren balio minimoa ${min} da',
-        max: '${label} -ren balio maximoa ${max} da',
-        range: '${label} -ren balioa ${min}-${max} -ren artean izan behar da',
+        len: '${label} eremuaren balioa ${len} izan behar da',
+        min: '${label} eremuaren balio minimoa ${min} da',
+        max: '${label} eremuaren balio maximoa ${max} da',
+        range: '${label} eremuaren balioa ${min}-${max} artekoa izan behar da',
       },
       array: {
-        len: '${len} ${label} izan behar du',
+        len: '${len} ${label} izan behar dira',
         min: 'Gutxienez ${min} ${label}',
         max: 'Gehienez ${max} ${label}',
         range: '${label} kopuruak ${min}-${max} -ra bitartekoa izan behar du',
@@ -129,7 +134,14 @@ const localeValues: Locale = {
     },
   },
   Image: {
-    preview: 'Arruebista',
+    preview: 'Aurrebista',
+  },
+  QRCode: {
+    expired: 'QR kodea kadukatuta',
+    refresh: 'Freskatu',
+  },
+  ColorPicker: {
+    presetEmpty: 'Hustu',
   },
 };
 
diff --git a/components/menu/SubMenu.tsx b/components/menu/SubMenu.tsx
index 1b800fa49d62..ca85e4207e36 100644
--- a/components/menu/SubMenu.tsx
+++ b/components/menu/SubMenu.tsx
@@ -1,7 +1,9 @@
+import * as React from 'react';
 import classNames from 'classnames';
 import { SubMenu as RcSubMenu, useFullPath } from 'rc-menu';
 import omit from 'rc-util/lib/omit';
-import * as React from 'react';
+
+import { useZIndex } from '../_util/hooks/useZIndex';
 import { cloneElement, isValidElement } from '../_util/reactNode';
 import type { MenuContextProps, MenuTheme } from './MenuContext';
 import MenuContext from './MenuContext';
@@ -65,6 +67,9 @@ const SubMenu: React.FC<SubMenuProps> = (props) => {
     [context],
   );
 
+  // ============================ zIndex ============================
+  const [zIndex] = useZIndex('Menu');
+
   return (
     <MenuContext.Provider value={contextValue}>
       <RcSubMenu
@@ -75,6 +80,9 @@ const SubMenu: React.FC<SubMenuProps> = (props) => {
           popupClassName,
           `${prefixCls}-${customTheme || contextTheme}`,
         )}
+        popupStyle={{
+          zIndex,
+        }}
       />
     </MenuContext.Provider>
   );
diff --git a/components/message/__tests__/hooks.test.tsx b/components/message/__tests__/hooks.test.tsx
index 4d5cf68f78e4..d5ba98c42692 100644
--- a/components/message/__tests__/hooks.test.tsx
+++ b/components/message/__tests__/hooks.test.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable jsx-a11y/control-has-associated-label */
-import React from 'react';
+import React, { useEffect } from 'react';
 import { act } from 'react-dom/test-utils';
 import { StyleProvider, createCache, extractStyle } from '@ant-design/cssinjs';
 import message from '..';
@@ -271,4 +271,32 @@ describe('message.hooks', () => {
     const styleText = extractStyle(cache, true);
     expect(styleText).not.toContain('.ant-message');
   });
+
+  it('component fontSize should work', () => {
+    const Demo = () => {
+      const [api, holder] = message.useMessage();
+
+      useEffect(() => {
+        api.info({
+          content: <div />,
+          className: 'fontSize',
+        });
+      }, []);
+
+      return (
+        <ConfigProvider theme={{ components: { Message: { fontSize: 20 } } }}>
+          {holder}
+        </ConfigProvider>
+      );
+    };
+
+    render(<Demo />);
+
+    const msg = document.querySelector('.fontSize');
+
+    expect(msg).toBeTruthy();
+    expect(msg).toHaveStyle({
+      fontSize: '20px',
+    });
+  });
 });
diff --git a/components/message/style/index.tsx b/components/message/style/index.tsx
index f58d433bf3be..91a5b5b6ffbe 100644
--- a/components/message/style/index.tsx
+++ b/components/message/style/index.tsx
@@ -1,7 +1,9 @@
 // deps-lint-skip-all
+import type { CSSProperties } from 'react';
 import type { CSSObject } from '@ant-design/cssinjs';
 import { Keyframes } from '@ant-design/cssinjs';
-import type { CSSProperties } from 'react';
+
+import { CONTAINER_MAX_OFFSET } from '../../_util/hooks/useZIndex';
 import { resetComponent } from '../../style';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
@@ -195,7 +197,7 @@ export default genComponentStyleHook(
     return [genMessageStyle(combinedToken)];
   },
   (token) => ({
-    zIndexPopup: token.zIndexPopupBase + 10,
+    zIndexPopup: token.zIndexPopupBase + CONTAINER_MAX_OFFSET + 10,
     contentBg: token.colorBgElevated,
     contentPadding: `${(token.controlHeightLG - token.fontSize * token.lineHeight) / 2}px ${
       token.paddingSM
diff --git a/components/modal/ConfirmDialog.tsx b/components/modal/ConfirmDialog.tsx
index 44db2a21d68a..15c7b07009d7 100644
--- a/components/modal/ConfirmDialog.tsx
+++ b/components/modal/ConfirmDialog.tsx
@@ -5,17 +5,19 @@ import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
 import InfoCircleFilled from '@ant-design/icons/InfoCircleFilled';
 import classNames from 'classnames';
 
+import { CONTAINER_MAX_OFFSET } from '../_util/hooks/useZIndex';
 import { getTransitionName } from '../_util/motion';
 import { devUseWarning } from '../_util/warning';
 import type { ThemeConfig } from '../config-provider';
 import ConfigProvider from '../config-provider';
 import { useLocale } from '../locale';
+import useToken from '../theme/useToken';
 import CancelBtn from './components/ConfirmCancelBtn';
 import OkBtn from './components/ConfirmOkBtn';
 import type { ModalContextProps } from './context';
 import { ModalContextProvider } from './context';
 import type { ModalFuncProps, ModalLocale } from './interface';
-import Dialog from './Modal';
+import Modal from './Modal';
 import ConfirmCmp from './style/confirmCmp';
 
 export interface ConfirmDialogProps extends ModalFuncProps {
@@ -31,6 +33,10 @@ export interface ConfirmDialogProps extends ModalFuncProps {
   autoFocusButton?: null | 'ok' | 'cancel';
   rootPrefixCls?: string;
   iconPrefixCls?: string;
+
+  /**
+   * Only passed by static method
+   */
   theme?: ThemeConfig;
 
   /** @private Internal Usage. Do not override this */
@@ -177,14 +183,13 @@ const ConfirmDialog: React.FC<ConfirmDialogProps> = (props) => {
     prefixCls,
     wrapClassName,
     rootPrefixCls,
-    iconPrefixCls,
-    theme,
     bodyStyle,
     closable = false,
     closeIcon,
     modalRender,
     focusTriggerAfterClose,
     onConfirm,
+    styles,
   } = props;
 
   if (process.env.NODE_ENV !== 'production') {
@@ -214,6 +219,63 @@ const ConfirmDialog: React.FC<ConfirmDialogProps> = (props) => {
     props.className,
   );
 
+  // ========================= zIndex =========================
+  const [, token] = useToken();
+
+  const mergedZIndex = React.useMemo(() => {
+    if (zIndex !== undefined) {
+      return zIndex;
+    }
+
+    // Static always use max zIndex
+    return token.zIndexPopupBase + CONTAINER_MAX_OFFSET;
+  }, [zIndex, token]);
+
+  // ========================= Render =========================
+  return (
+    <Modal
+      prefixCls={prefixCls}
+      className={classString}
+      wrapClassName={classNames(
+        { [`${confirmPrefixCls}-centered`]: !!props.centered },
+        wrapClassName,
+      )}
+      onCancel={() => {
+        close?.({ triggerCancel: true });
+        onConfirm?.(false);
+      }}
+      open={open}
+      title=""
+      footer={null}
+      transitionName={getTransitionName(rootPrefixCls || '', 'zoom', props.transitionName)}
+      maskTransitionName={getTransitionName(rootPrefixCls || '', 'fade', props.maskTransitionName)}
+      mask={mask}
+      maskClosable={maskClosable}
+      style={style}
+      styles={{
+        body: bodyStyle,
+        mask: maskStyle,
+        ...styles,
+      }}
+      width={width}
+      zIndex={mergedZIndex}
+      afterClose={afterClose}
+      keyboard={keyboard}
+      centered={centered}
+      getContainer={getContainer}
+      closable={closable}
+      closeIcon={closeIcon}
+      modalRender={modalRender}
+      focusTriggerAfterClose={focusTriggerAfterClose}
+    >
+      <ConfirmContent {...props} confirmPrefixCls={confirmPrefixCls} />
+    </Modal>
+  );
+};
+
+const ConfirmDialogWrapper: React.FC<ConfirmDialogProps> = (props) => {
+  const { rootPrefixCls, iconPrefixCls, direction, theme } = props;
+
   return (
     <ConfigProvider
       prefixCls={rootPrefixCls}
@@ -221,52 +283,14 @@ const ConfirmDialog: React.FC<ConfirmDialogProps> = (props) => {
       direction={direction}
       theme={theme}
     >
-      <Dialog
-        prefixCls={prefixCls}
-        className={classString}
-        wrapClassName={classNames(
-          { [`${confirmPrefixCls}-centered`]: !!props.centered },
-          wrapClassName,
-        )}
-        onCancel={() => {
-          close?.({ triggerCancel: true });
-          onConfirm?.(false);
-        }}
-        open={open}
-        title=""
-        footer={null}
-        transitionName={getTransitionName(rootPrefixCls || '', 'zoom', props.transitionName)}
-        maskTransitionName={getTransitionName(
-          rootPrefixCls || '',
-          'fade',
-          props.maskTransitionName,
-        )}
-        mask={mask}
-        maskClosable={maskClosable}
-        style={style}
-        styles={{
-          body: bodyStyle,
-          mask: maskStyle,
-        }}
-        width={width}
-        zIndex={zIndex}
-        afterClose={afterClose}
-        keyboard={keyboard}
-        centered={centered}
-        getContainer={getContainer}
-        closable={closable}
-        closeIcon={closeIcon}
-        modalRender={modalRender}
-        focusTriggerAfterClose={focusTriggerAfterClose}
-      >
-        <ConfirmContent {...props} confirmPrefixCls={confirmPrefixCls} />
-      </Dialog>
+      <ConfirmDialog {...props} />
     </ConfigProvider>
   );
 };
 
 if (process.env.NODE_ENV !== 'production') {
   ConfirmDialog.displayName = 'ConfirmDialog';
+  ConfirmDialogWrapper.displayName = 'ConfirmDialogWrapper';
 }
 
-export default ConfirmDialog;
+export default ConfirmDialogWrapper;
diff --git a/components/modal/Modal.tsx b/components/modal/Modal.tsx
index 966cd3011ecf..c9ec2dfaee1f 100644
--- a/components/modal/Modal.tsx
+++ b/components/modal/Modal.tsx
@@ -7,6 +7,7 @@ import useClosable from '../_util/hooks/useClosable';
 import { getTransitionName } from '../_util/motion';
 import { canUseDocElement } from '../_util/styleChecker';
 import { devUseWarning } from '../_util/warning';
+import zIndexContext from '../_util/zindexContext';
 import { ConfigContext } from '../config-provider';
 import { NoFormStyle } from '../form/context';
 import { NoCompactStyle } from '../space/Compact';
@@ -14,6 +15,7 @@ import { usePanelRef } from '../watermark/context';
 import type { ModalProps, MousePosition } from './interface';
 import { Footer, renderCloseIcon } from './shared';
 import useStyle from './style';
+import { useZIndex } from '../_util/hooks/useZIndex';
 
 let mousePosition: MousePosition;
 
@@ -113,38 +115,44 @@ const Modal: React.FC<ModalProps> = (props) => {
   // Select `ant-modal-content` by `panelRef`
   const panelRef = usePanelRef(`.${prefixCls}-content`);
 
+  // ============================ zIndex ============================
+  const [zIndex, contextZIndex] = useZIndex('Modal', restProps.zIndex);
+
   // =========================== Render ===========================
   return wrapSSR(
     <NoCompactStyle>
       <NoFormStyle status override>
-        <Dialog
-          width={width}
-          {...restProps}
-          getContainer={getContainer === undefined ? getContextPopupContainer : getContainer}
-          prefixCls={prefixCls}
-          rootClassName={classNames(hashId, rootClassName)}
-          footer={dialogFooter}
-          visible={open ?? visible}
-          mousePosition={restProps.mousePosition ?? mousePosition}
-          onClose={handleCancel}
-          closable={mergedClosable}
-          closeIcon={mergedCloseIcon}
-          focusTriggerAfterClose={focusTriggerAfterClose}
-          transitionName={getTransitionName(rootPrefixCls, 'zoom', props.transitionName)}
-          maskTransitionName={getTransitionName(rootPrefixCls, 'fade', props.maskTransitionName)}
-          className={classNames(hashId, className, modal?.className)}
-          style={{ ...modal?.style, ...style }}
-          classNames={{
-            wrapper: wrapClassNameExtended,
-            ...modal?.classNames,
-            ...modalClassNames,
-          }}
-          styles={{
-            ...modal?.styles,
-            ...modalStyles,
-          }}
-          panelRef={panelRef}
-        />
+        <zIndexContext.Provider value={contextZIndex}>
+          <Dialog
+            width={width}
+            {...restProps}
+            zIndex={zIndex}
+            getContainer={getContainer === undefined ? getContextPopupContainer : getContainer}
+            prefixCls={prefixCls}
+            rootClassName={classNames(hashId, rootClassName)}
+            footer={dialogFooter}
+            visible={open ?? visible}
+            mousePosition={restProps.mousePosition ?? mousePosition}
+            onClose={handleCancel}
+            closable={mergedClosable}
+            closeIcon={mergedCloseIcon}
+            focusTriggerAfterClose={focusTriggerAfterClose}
+            transitionName={getTransitionName(rootPrefixCls, 'zoom', props.transitionName)}
+            maskTransitionName={getTransitionName(rootPrefixCls, 'fade', props.maskTransitionName)}
+            className={classNames(hashId, className, modal?.className)}
+            style={{ ...modal?.style, ...style }}
+            classNames={{
+              wrapper: wrapClassNameExtended,
+              ...modal?.classNames,
+              ...modalClassNames,
+            }}
+            styles={{
+              ...modal?.styles,
+              ...modalStyles,
+            }}
+            panelRef={panelRef}
+          />
+        </zIndexContext.Provider>
       </NoFormStyle>
     </NoCompactStyle>,
   );
diff --git a/components/modal/PurePanel.tsx b/components/modal/PurePanel.tsx
index 66ee59fcf2e2..7abde564794d 100644
--- a/components/modal/PurePanel.tsx
+++ b/components/modal/PurePanel.tsx
@@ -13,8 +13,8 @@ import { Footer, renderCloseIcon } from './shared';
 import useStyle from './style';
 
 export interface PurePanelProps
-  extends Omit<PanelProps, 'prefixCls'>,
-    Pick<ModalFuncProps, 'type'> {
+  extends Omit<PanelProps, 'prefixCls' | 'footer'>,
+    Pick<ModalFuncProps, 'type' | 'footer'> {
   prefixCls?: string;
   style?: React.CSSProperties;
 }
@@ -28,6 +28,7 @@ const PurePanel: React.FC<PurePanelProps> = (props) => {
     type,
     title,
     children,
+    footer,
     ...restProps
   } = props;
   const { getPrefixCls } = React.useContext(ConfigContext);
@@ -60,7 +61,7 @@ const PurePanel: React.FC<PurePanelProps> = (props) => {
     additionalProps = {
       closable: closable ?? true,
       title,
-      footer: props.footer === undefined ? <Footer {...props} /> : props.footer,
+      footer: footer !== null && <Footer {...props} />,
       children,
     };
   }
diff --git a/components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap
index 57837025046e..9bef2aa2885d 100644
--- a/components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -669,6 +669,65 @@ exports[`renders components/modal/demo/modal-render.tsx extend context correctly
 
 exports[`renders components/modal/demo/modal-render.tsx extend context correctly 2`] = `[]`;
 
+exports[`renders components/modal/demo/nested.tsx extend context correctly 1`] = `
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
+>
+  <div
+    class="ant-space-item"
+  >
+    <button
+      aria-checked="false"
+      class="ant-switch"
+      role="switch"
+      style="position: relative; z-index: 0;"
+      type="button"
+    >
+      <div
+        class="ant-switch-handle"
+      />
+      <span
+        class="ant-switch-inner"
+      >
+        <span
+          class="ant-switch-inner-checked"
+        >
+          Open
+        </span>
+        <span
+          class="ant-switch-inner-unchecked"
+        >
+          Close
+        </span>
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <button
+      class="ant-btn ant-btn-default"
+      type="button"
+    >
+      <span>
+        Static
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-space-item"
+  />
+  <div
+    class="ant-space-item"
+  />
+  <div
+    class="ant-space-item"
+  />
+</div>
+`;
+
+exports[`renders components/modal/demo/nested.tsx extend context correctly 2`] = `[]`;
+
 exports[`renders components/modal/demo/position.tsx extend context correctly 1`] = `
 Array [
   <button
@@ -942,6 +1001,164 @@ exports[`renders components/modal/demo/render-panel.tsx extend context correctly
       tabindex="0"
     />
   </div>
+  <div
+    aria-modal="true"
+    class="ant-modal ant-modal-pure-panel"
+    role="dialog"
+    style="width: 380px; height: 200px;"
+  >
+    <div
+      aria-hidden="true"
+      style="width: 0px; height: 0px; overflow: hidden; outline: none;"
+      tabindex="0"
+    />
+    <div
+      class="ant-modal-content"
+    >
+      <button
+        aria-label="Close"
+        class="ant-modal-close"
+        type="button"
+      >
+        <span
+          class="ant-modal-close-x"
+        >
+          <span
+            aria-label="close"
+            class="anticon anticon-close ant-modal-close-icon"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="close"
+              fill="currentColor"
+              fill-rule="evenodd"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
+              />
+            </svg>
+          </span>
+        </span>
+      </button>
+      <div
+        class="ant-modal-header"
+      >
+        <div
+          class="ant-modal-title"
+        >
+          Custom Footer Render
+        </div>
+      </div>
+      <div
+        class="ant-modal-body"
+      >
+        <div
+          class="ant-typography"
+        >
+          <a
+            class="ant-typography"
+            href="https://github.com/ant-design/ant-design/pull/44318"
+          >
+            Feature #44318
+          </a>
+        </div>
+      </div>
+      <div
+        class="ant-modal-footer"
+      >
+        <div
+          class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
+        >
+          <div
+            class="ant-space-item"
+          >
+            <div
+              class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
+            >
+              <div
+                class="ant-space-item"
+              >
+                <button
+                  class="ant-btn ant-btn-default"
+                  type="button"
+                >
+                  <span>
+                    Cancel
+                  </span>
+                </button>
+              </div>
+              <div
+                class="ant-space-item"
+              >
+                <button
+                  class="ant-btn ant-btn-primary"
+                  type="button"
+                >
+                  <span>
+                    OK
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+          <div
+            class="ant-space-item"
+          >
+            <div
+              class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
+            >
+              <div
+                class="ant-space-item"
+              >
+                <button
+                  class="ant-btn ant-btn-default"
+                  type="button"
+                >
+                  <span>
+                    Cancel
+                  </span>
+                </button>
+              </div>
+              <div
+                class="ant-space-item"
+              >
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-dangerous"
+                  type="button"
+                >
+                  <span>
+                    Custom
+                  </span>
+                </button>
+              </div>
+              <div
+                class="ant-space-item"
+              >
+                <button
+                  class="ant-btn ant-btn-primary"
+                  type="button"
+                >
+                  <span>
+                    OK
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-hidden="true"
+      style="width: 0px; height: 0px; overflow: hidden; outline: none;"
+      tabindex="0"
+    />
+  </div>
 </div>
 `;
 
diff --git a/components/modal/__tests__/__snapshots__/demo.test.tsx.snap b/components/modal/__tests__/__snapshots__/demo.test.tsx.snap
index 845beacdf927..77b26e875e48 100644
--- a/components/modal/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/modal/__tests__/__snapshots__/demo.test.tsx.snap
@@ -639,6 +639,63 @@ exports[`renders components/modal/demo/modal-render.tsx correctly 1`] = `
 </button>
 `;
 
+exports[`renders components/modal/demo/nested.tsx correctly 1`] = `
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
+>
+  <div
+    class="ant-space-item"
+  >
+    <button
+      aria-checked="false"
+      class="ant-switch"
+      role="switch"
+      style="position:relative;z-index:0"
+      type="button"
+    >
+      <div
+        class="ant-switch-handle"
+      />
+      <span
+        class="ant-switch-inner"
+      >
+        <span
+          class="ant-switch-inner-checked"
+        >
+          Open
+        </span>
+        <span
+          class="ant-switch-inner-unchecked"
+        >
+          Close
+        </span>
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <button
+      class="ant-btn ant-btn-default"
+      type="button"
+    >
+      <span>
+        Static
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-space-item"
+  />
+  <div
+    class="ant-space-item"
+  />
+  <div
+    class="ant-space-item"
+  />
+</div>
+`;
+
 exports[`renders components/modal/demo/position.tsx correctly 1`] = `
 Array [
   <button
@@ -910,6 +967,164 @@ exports[`renders components/modal/demo/render-panel.tsx correctly 1`] = `
       tabindex="0"
     />
   </div>
+  <div
+    aria-modal="true"
+    class="ant-modal ant-modal-pure-panel"
+    role="dialog"
+    style="width:380px;height:200px"
+  >
+    <div
+      aria-hidden="true"
+      style="width:0;height:0;overflow:hidden;outline:none"
+      tabindex="0"
+    />
+    <div
+      class="ant-modal-content"
+    >
+      <button
+        aria-label="Close"
+        class="ant-modal-close"
+        type="button"
+      >
+        <span
+          class="ant-modal-close-x"
+        >
+          <span
+            aria-label="close"
+            class="anticon anticon-close ant-modal-close-icon"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="close"
+              fill="currentColor"
+              fill-rule="evenodd"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
+              />
+            </svg>
+          </span>
+        </span>
+      </button>
+      <div
+        class="ant-modal-header"
+      >
+        <div
+          class="ant-modal-title"
+        >
+          Custom Footer Render
+        </div>
+      </div>
+      <div
+        class="ant-modal-body"
+      >
+        <div
+          class="ant-typography"
+        >
+          <a
+            class="ant-typography"
+            href="https://github.com/ant-design/ant-design/pull/44318"
+          >
+            Feature #44318
+          </a>
+        </div>
+      </div>
+      <div
+        class="ant-modal-footer"
+      >
+        <div
+          class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
+        >
+          <div
+            class="ant-space-item"
+          >
+            <div
+              class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
+            >
+              <div
+                class="ant-space-item"
+              >
+                <button
+                  class="ant-btn ant-btn-default"
+                  type="button"
+                >
+                  <span>
+                    Cancel
+                  </span>
+                </button>
+              </div>
+              <div
+                class="ant-space-item"
+              >
+                <button
+                  class="ant-btn ant-btn-primary"
+                  type="button"
+                >
+                  <span>
+                    OK
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+          <div
+            class="ant-space-item"
+          >
+            <div
+              class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
+            >
+              <div
+                class="ant-space-item"
+              >
+                <button
+                  class="ant-btn ant-btn-default"
+                  type="button"
+                >
+                  <span>
+                    Cancel
+                  </span>
+                </button>
+              </div>
+              <div
+                class="ant-space-item"
+              >
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-dangerous"
+                  type="button"
+                >
+                  <span>
+                    Custom
+                  </span>
+                </button>
+              </div>
+              <div
+                class="ant-space-item"
+              >
+                <button
+                  class="ant-btn ant-btn-primary"
+                  type="button"
+                >
+                  <span>
+                    OK
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-hidden="true"
+      style="width:0;height:0;overflow:hidden;outline:none"
+      tabindex="0"
+    />
+  </div>
 </div>
 `;
 
diff --git a/components/modal/__tests__/confirm.test.tsx b/components/modal/__tests__/confirm.test.tsx
index 7a0060cc97b9..16a4070988f8 100644
--- a/components/modal/__tests__/confirm.test.tsx
+++ b/components/modal/__tests__/confirm.test.tsx
@@ -663,6 +663,14 @@ describe('Modal.confirm triggers callbacks correctly', () => {
     spy.mockRestore();
   });
 
+  it('styles', async () => {
+    resetWarned();
+    await open({ styles: { body: { width: 500 } } });
+
+    const { width } = $$('.ant-modal-body')[0].style;
+    expect(width).toBe('500px');
+  });
+
   describe('the callback close should be a method when onCancel has a close parameter', () => {
     (['confirm', 'info', 'success', 'warning', 'error'] as const).forEach((type) => {
       it(`click the close icon to trigger ${type} onCancel`, async () => {
diff --git a/components/modal/__tests__/hook.test.tsx b/components/modal/__tests__/hook.test.tsx
index 3ed782691a6a..cdf94dedb2c2 100644
--- a/components/modal/__tests__/hook.test.tsx
+++ b/components/modal/__tests__/hook.test.tsx
@@ -35,6 +35,7 @@ describe('Modal.hook', () => {
           <Button
             onClick={() => {
               instance = modal.confirm({
+                zIndex: 903,
                 content: (
                   <Context.Consumer>
                     {(name) => <div className="test-hook">{name}</div>}
@@ -55,6 +56,10 @@ describe('Modal.hook', () => {
     expect(document.body.querySelectorAll('.ant-btn').length).toBeTruthy();
     expect(document.body.querySelectorAll('.ant-modal-body').length).toBeTruthy();
 
+    expect(document.querySelector('.ant-modal-wrap')).toHaveStyle({
+      zIndex: '903',
+    });
+
     // Update instance
     act(() => {
       instance.update({
diff --git a/components/modal/demo/nested.md b/components/modal/demo/nested.md
new file mode 100644
index 000000000000..9d9108cb13ff
--- /dev/null
+++ b/components/modal/demo/nested.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+嵌套弹框
+
+## en-US
+
+Nested modal.
diff --git a/components/modal/demo/nested.tsx b/components/modal/demo/nested.tsx
new file mode 100644
index 000000000000..fcb946546c31
--- /dev/null
+++ b/components/modal/demo/nested.tsx
@@ -0,0 +1,137 @@
+import React, { useState } from 'react';
+import { Button, message, Modal, notification, Select, Space, Switch } from 'antd';
+
+const options = [
+  {
+    label: 'Option 1',
+    value: '1',
+  },
+  {
+    label: 'Option 2',
+    value: '2',
+  },
+];
+
+const Demo: React.FC = () => {
+  const [messageInstance, messageHolder] = message.useMessage();
+  const [notificationInstance, notificationHolder] = notification.useNotification();
+
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+
+  const onShowStatic = () => {
+    Modal.confirm({
+      content: <Select open value="1" options={options} />,
+    });
+  };
+
+  return (
+    <Space>
+      <Switch
+        style={{ position: 'relative', zIndex: isModalOpen ? 4000 : 0 }}
+        checkedChildren="Open"
+        unCheckedChildren="Close"
+        onChange={(open) => setIsModalOpen(open)}
+      />
+      <Button onClick={onShowStatic}>Static</Button>
+      <Modal
+        title="Basic Modal"
+        open={isModalOpen}
+        footer={null}
+        destroyOnClose
+        onCancel={() => setIsModalOpen(false)}
+        maskClosable={false}
+        closable={false}
+        styles={{
+          content: {
+            marginBlockStart: 100,
+          },
+        }}
+      >
+        <Select open value="1" options={options} />
+        <Modal
+          title="Nested Modal"
+          open={isModalOpen}
+          footer={null}
+          destroyOnClose
+          mask={false}
+          onCancel={() => setIsModalOpen(false)}
+          maskClosable={false}
+          closable={false}
+          styles={{
+            content: {
+              marginBlockStart: 250,
+            },
+            body: {
+              display: 'flex',
+              justifyContent: 'center',
+            },
+          }}
+        >
+          <Select open value="1" options={options} />
+
+          <Modal
+            title="Nested Modal"
+            open={isModalOpen}
+            footer={null}
+            destroyOnClose
+            mask={false}
+            maskClosable={false}
+            onCancel={() => setIsModalOpen(false)}
+            closable={false}
+            styles={{
+              content: {
+                marginBlockStart: 400,
+              },
+              body: {
+                display: 'flex',
+                justifyContent: 'flex-end',
+              },
+            }}
+          >
+            <Space wrap>
+              <Button
+                onClick={() => {
+                  Modal.confirm({
+                    title: 'Are you OK?',
+                    content: 'I am OK',
+                  });
+                }}
+              >
+                Static Confirm
+              </Button>
+
+              <Button
+                onClick={() => {
+                  message.success('Hello World');
+                  notification.success({
+                    message: 'Hello World',
+                  });
+                }}
+              >
+                Static Message, Notification
+              </Button>
+
+              <Button
+                onClick={() => {
+                  messageInstance.success('Hello World');
+                  notificationInstance.success({
+                    message: 'Hello World',
+                  });
+                }}
+              >
+                Hook Message, Notification
+              </Button>
+
+              <Select open value="1" options={options} />
+            </Space>
+          </Modal>
+        </Modal>
+      </Modal>
+
+      {messageHolder}
+      {notificationHolder}
+    </Space>
+  );
+};
+
+export default Demo;
diff --git a/components/modal/demo/render-panel.tsx b/components/modal/demo/render-panel.tsx
index 8e6ac8e5e833..b58784fe2a1a 100644
--- a/components/modal/demo/render-panel.tsx
+++ b/components/modal/demo/render-panel.tsx
@@ -1,9 +1,23 @@
 import React from 'react';
-import { Modal } from 'antd';
+import { Button, Modal, Space, Typography } from 'antd';
+import type { ModalFuncProps } from 'antd/es/modal/interface';
 
 /** Test usage. Do not use in your production. */
 const { _InternalPanelDoNotUseOrYouWillBeFired: InternalPanel } = Modal;
 
+const customFooterFn: ModalFuncProps['footer'] = (originNode, { OkBtn, CancelBtn }) => (
+  <Space direction="vertical">
+    <Space>{originNode}</Space>
+    <Space>
+      <CancelBtn />
+      <Button danger type="primary">
+        Custom
+      </Button>
+      <OkBtn />
+    </Space>
+  </Space>
+);
+
 export default () => (
   <div style={{ display: 'flex', flexDirection: 'column', rowGap: 16 }}>
     <InternalPanel title="Hello World!" style={{ width: '100%', height: 200 }}>
@@ -15,5 +29,17 @@ export default () => (
     <InternalPanel title="Confirm This?" type="confirm" style={{ width: 300, height: 200 }}>
       Some descriptions.
     </InternalPanel>
+
+    <InternalPanel
+      title="Custom Footer Render"
+      style={{ width: 380, height: 200 }}
+      footer={customFooterFn}
+    >
+      <Typography.Paragraph>
+        <Typography.Link href="https://github.com/ant-design/ant-design/pull/44318">
+          Feature #44318
+        </Typography.Link>
+      </Typography.Paragraph>
+    </InternalPanel>
   </div>
 );
diff --git a/components/modal/index.en-US.md b/components/modal/index.en-US.md
index ba94fa149746..2c007a4aa7cc 100644
--- a/components/modal/index.en-US.md
+++ b/components/modal/index.en-US.md
@@ -35,6 +35,7 @@ Additionally, if you need show a simple confirmation dialog, you can use [`App.u
 <code src="./demo/confirm.tsx">Static confirmation</code>
 <code src="./demo/classNames.tsx">Customize className for build-in module</code>
 <code src="./demo/confirm-router.tsx">destroy confirmation modal dialog</code>
+<code src="./demo/nested.tsx" debug>Nested Modal</code>
 <code src="./demo/render-panel.tsx" debug>\_InternalPanelDoNotUseOrYouWillBeFired</code>
 <code src="./demo/custom-mouse-position.tsx" debug>Control modal's animation origin position</code>
 <code src="./demo/wireframe.tsx" debug>Wireframe</code>
@@ -102,7 +103,8 @@ The items listed above are all functions, expecting a settings object as paramet
 | cancelText | Text of the Cancel button with Modal.confirm | string | `Cancel` |  |
 | centered | Centered Modal | boolean | false |  |
 | className | The className of container | string | - |  |
-| closeIcon | Custom close icon. 5.7.0: close button will be hidden when setting to `null` or `false` | boolean \| ReactNode | &lt;CloseOutlined /> |  |
+| closable | Whether a close (x) button is visible on top right of the confirm dialog or not | boolean | false | 4.9.0 |
+| closeIcon | Custom close icon | ReactNode | undefined | 4.9.0 |
 | content | Content | ReactNode | - |  |
 | footer | Footer content, set as `footer: null` when you don't need default buttons | (params:[footerRenderParams](/components/modal-cn#footerrenderparams))=> React.ReactNode \| React.ReactNode | - | 5.9.0 |
 | getContainer | Return the mount node for Modal | HTMLElement \| () => HTMLElement \| Selectors \| false | document.body |  |
diff --git a/components/modal/index.zh-CN.md b/components/modal/index.zh-CN.md
index dc042cd8254c..ea6c53034c13 100644
--- a/components/modal/index.zh-CN.md
+++ b/components/modal/index.zh-CN.md
@@ -36,6 +36,7 @@ demo:
 <code src="./demo/confirm.tsx">静态确认对话框</code>
 <code src="./demo/classNames.tsx">自定义内部模块 className</code>
 <code src="./demo/confirm-router.tsx">销毁确认对话框</code>
+<code src="./demo/nested.tsx" debug>嵌套弹框</code>
 <code src="./demo/render-panel.tsx" debug>\_InternalPanelDoNotUseOrYouWillBeFired</code>
 <code src="./demo/custom-mouse-position.tsx" debug>控制弹框动画原点</code>
 <code src="./demo/wireframe.tsx" debug>线框风格</code>
@@ -103,7 +104,8 @@ demo:
 | cancelText | 设置 Modal.confirm 取消按钮文字 | string | `取消` |  |
 | centered | 垂直居中展示 Modal | boolean | false |  |
 | className | 容器类名 | string | - |  |
-| closeIcon | 自定义关闭图标。5.7.0：设置为 `null` 或 `false` 时隐藏关闭按钮 | boolean \| ReactNode | &lt;CloseOutlined /> |  |
+| closable | 是否显示右上角的关闭按钮 | boolean | false | 4.9.0 |
+| closeIcon | 自定义关闭图标 | ReactNode | undefined | 4.9.0 |
 | content | 内容 | ReactNode | - |  |
 | footer | 底部内容，当不需要默认底部按钮时，可以设为 `footer: null` | (params:[footerRenderParams](/components/modal-cn#footerrenderparams))=> React.ReactNode \| React.ReactNode | - | 5.9.0 |
 | getContainer | 指定 Modal 挂载的 HTML 节点，false 为挂载在当前 dom | HTMLElement \| () => HTMLElement \| Selectors \| false | document.body |  |
diff --git a/components/modal/interface.ts b/components/modal/interface.ts
index a74164eb6fb1..9e4e2b4b0efd 100644
--- a/components/modal/interface.ts
+++ b/components/modal/interface.ts
@@ -8,7 +8,10 @@ export type ModalFooterRender = (
   originNode: React.ReactNode,
   extra: { OkBtn: FC; CancelBtn: FC },
 ) => React.ReactNode;
-export interface ModalProps {
+interface ModalCommonProps {
+  styles?: Omit<NonNullable<DialogProps['styles']>, 'wrapper'>;
+}
+export interface ModalProps extends ModalCommonProps {
   /** Whether the modal dialog is visible or not */
   open?: boolean;
   /** Whether to apply loading visual effect for OK button or not */
@@ -50,7 +53,6 @@ export interface ModalProps {
   className?: string;
   rootClassName?: string;
   classNames?: Omit<NonNullable<DialogProps['classNames']>, 'wrapper'>;
-  styles?: Omit<NonNullable<DialogProps['styles']>, 'wrapper'>;
   getContainer?: string | HTMLElement | getContainerFunc | false;
   zIndex?: number;
   /** @deprecated Please use `styles.body` instead */
@@ -74,7 +76,7 @@ export interface ModalProps {
 
 type getContainerFunc = () => HTMLElement;
 
-export interface ModalFuncProps {
+export interface ModalFuncProps extends ModalCommonProps {
   prefixCls?: string;
   className?: string;
   rootClassName?: string;
diff --git a/components/notification/PurePanel.tsx b/components/notification/PurePanel.tsx
index 32daa2707b53..efd0f9789aac 100644
--- a/components/notification/PurePanel.tsx
+++ b/components/notification/PurePanel.tsx
@@ -11,6 +11,7 @@ import * as React from 'react';
 import { ConfigContext } from '../config-provider';
 import type { IconType } from './interface';
 import useStyle from './style';
+import PurePanelStyle from './style/pure-panel';
 
 export const TypeIcon = {
   info: <InfoCircleFilled />,
@@ -99,6 +100,7 @@ const PurePanel: React.FC<PurePanelProps> = (props) => {
 
   return (
     <div className={classNames(`${noticePrefixCls}-pure-panel`, hashId, className)}>
+      <PurePanelStyle prefixCls={prefixCls} />
       <Notice
         {...restProps}
         prefixCls={prefixCls}
diff --git a/components/notification/__tests__/index.test.tsx b/components/notification/__tests__/index.test.tsx
index a29967794d8a..59668a510421 100644
--- a/components/notification/__tests__/index.test.tsx
+++ b/components/notification/__tests__/index.test.tsx
@@ -313,6 +313,7 @@ describe('notification', () => {
 
     expect(document.querySelectorAll('[role="status"]').length).toBe(1);
   });
+
   it('should hide close btn when closeIcon setting to null or false', async () => {
     notification.config({
       closeIcon: undefined,
@@ -348,4 +349,22 @@ describe('notification', () => {
     expect(document.querySelectorAll('.with-null .ant-notification-notice-close').length).toBe(0);
     expect(document.querySelectorAll('.with-false .ant-notification-notice-close').length).toBe(0);
   });
+
+  it('style.width could be overrided', async () => {
+    act(() => {
+      notification.open({
+        message: 'Notification Title',
+        duration: 0,
+        style: {
+          width: 600,
+        },
+        className: 'with-style',
+      });
+    });
+    await awaitPromise();
+    expect(document.querySelector('.with-style')).toHaveStyle({ width: '600px' });
+    expect(
+      document.querySelector('.ant-notification-notice-wrapper:has(.width-style)'),
+    ).toHaveStyle({ width: '' });
+  });
 });
diff --git a/components/notification/style/index.ts b/components/notification/style/index.ts
index 2e4599b8ae3a..48e95294cd3b 100644
--- a/components/notification/style/index.ts
+++ b/components/notification/style/index.ts
@@ -1,7 +1,9 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import { Keyframes } from '@ant-design/cssinjs';
+
+import { CONTAINER_MAX_OFFSET } from '../../_util/hooks/useZIndex';
 import { resetComponent } from '../../style';
-import type { FullToken, GenerateStyle } from '../../theme/internal';
+import type { AliasToken, FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import genNotificationPlacementStyle from './placement';
 import genStackStyle from './stack';
@@ -33,7 +35,7 @@ export interface NotificationToken extends FullToken<'Notification'> {
   notificationStackLayer: number;
 }
 
-const genNotificationStyle: GenerateStyle<NotificationToken> = (token) => {
+export const genNoticeStyle = (token: NotificationToken): CSSObject => {
   const {
     iconCls,
     componentCls, // .ant-notification
@@ -49,8 +51,6 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = (token) => {
     notificationBg,
     notificationPadding,
     notificationMarginEdge,
-    motionDurationMid,
-    motionEaseInOut,
     fontSize,
     lineHeight,
     width,
@@ -60,25 +60,8 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = (token) => {
 
   const noticeCls = `${componentCls}-notice`;
 
-  const fadeOut = new Keyframes('antNotificationFadeOut', {
-    '0%': {
-      maxHeight: token.animationMaxHeight,
-      marginBottom: notificationMarginBottom,
-    },
-
-    '100%': {
-      maxHeight: 0,
-      marginBottom: 0,
-      paddingTop: 0,
-      paddingBottom: 0,
-      opacity: 0,
-    },
-  });
-
-  const noticeStyle: CSSObject = {
+  return {
     position: 'relative',
-    width,
-    maxWidth: `calc(100vw - ${notificationMarginEdge * 2}px)`,
     marginBottom: notificationMarginBottom,
     marginInlineStart: 'auto',
     background: notificationBg,
@@ -87,6 +70,8 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = (token) => {
 
     [noticeCls]: {
       padding: notificationPadding,
+      width,
+      maxWidth: `calc(100vw - ${notificationMarginEdge * 2}px)`,
       overflow: 'hidden',
       lineHeight,
       wordWrap: 'break-word',
@@ -172,6 +157,33 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = (token) => {
       marginTop: token.marginSM,
     },
   };
+};
+
+const genNotificationStyle: GenerateStyle<NotificationToken> = (token) => {
+  const {
+    componentCls, // .ant-notification
+    notificationMarginBottom,
+    notificationMarginEdge,
+    motionDurationMid,
+    motionEaseInOut,
+  } = token;
+
+  const noticeCls = `${componentCls}-notice`;
+
+  const fadeOut = new Keyframes('antNotificationFadeOut', {
+    '0%': {
+      maxHeight: token.animationMaxHeight,
+      marginBottom: notificationMarginBottom,
+    },
+
+    '100%': {
+      maxHeight: 0,
+      marginBottom: 0,
+      paddingTop: 0,
+      paddingBottom: 0,
+      opacity: 0,
+    },
+  });
 
   return [
     // ============================ Holder ============================
@@ -236,39 +248,42 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = (token) => {
     {
       [componentCls]: {
         [`${noticeCls}-wrapper`]: {
-          ...noticeStyle,
+          ...genNoticeStyle(token),
         },
       },
     },
-
-    // ============================= Pure =============================
-    {
-      [`${noticeCls}-pure-panel`]: {
-        ...noticeStyle,
-        margin: 0,
-      },
-    },
   ];
 };
 
 // ============================== Export ==============================
+export const prepareComponentToken = (token: AliasToken) => ({
+  zIndexPopup: token.zIndexPopupBase + CONTAINER_MAX_OFFSET + 50,
+  width: 384,
+});
+
+export const prepareNotificationToken = (token: AliasToken) => {
+  const notificationPaddingVertical = token.paddingMD;
+  const notificationPaddingHorizontal = token.paddingLG;
+  const notificationToken = mergeToken<NotificationToken>(token, {
+    notificationBg: token.colorBgElevated,
+    notificationPaddingVertical,
+    notificationPaddingHorizontal,
+    notificationIconSize: token.fontSizeLG * token.lineHeightLG,
+    notificationCloseButtonSize: token.controlHeightLG * 0.55,
+    notificationMarginBottom: token.margin,
+    notificationPadding: `${token.paddingMD}px ${token.paddingContentHorizontalLG}px`,
+    notificationMarginEdge: token.marginLG,
+    animationMaxHeight: 150,
+    notificationStackLayer: 3,
+  });
+
+  return notificationToken;
+};
+
 export default genComponentStyleHook(
   'Notification',
   (token) => {
-    const notificationPaddingVertical = token.paddingMD;
-    const notificationPaddingHorizontal = token.paddingLG;
-    const notificationToken = mergeToken<NotificationToken>(token, {
-      notificationBg: token.colorBgElevated,
-      notificationPaddingVertical,
-      notificationPaddingHorizontal,
-      notificationIconSize: token.fontSizeLG * token.lineHeightLG,
-      notificationCloseButtonSize: token.controlHeightLG * 0.55,
-      notificationMarginBottom: token.margin,
-      notificationPadding: `${token.paddingMD}px ${token.paddingContentHorizontalLG}px`,
-      notificationMarginEdge: token.marginLG,
-      animationMaxHeight: 150,
-      notificationStackLayer: 3,
-    });
+    const notificationToken = prepareNotificationToken(token);
 
     return [
       genNotificationStyle(notificationToken),
@@ -276,8 +291,5 @@ export default genComponentStyleHook(
       genStackStyle(notificationToken),
     ];
   },
-  (token) => ({
-    zIndexPopup: token.zIndexPopupBase + 50,
-    width: 384,
-  }),
+  prepareComponentToken,
 );
diff --git a/components/notification/style/pure-panel.ts b/components/notification/style/pure-panel.ts
new file mode 100644
index 000000000000..6358709f9099
--- /dev/null
+++ b/components/notification/style/pure-panel.ts
@@ -0,0 +1,20 @@
+import { genSubStyleComponent } from '../../theme/internal';
+import { prepareComponentToken, genNoticeStyle, prepareNotificationToken } from '.';
+
+export default genSubStyleComponent(
+  ['Notification', 'PurePanel'],
+  (token) => {
+    const noticeCls = `${token.componentCls}-notice`;
+    const notificationToken = prepareNotificationToken(token);
+
+    return {
+      [`${noticeCls}-pure-panel`]: {
+        ...genNoticeStyle(notificationToken),
+        width: notificationToken.width,
+        maxWidth: `calc(100vw - ${notificationToken.notificationMarginEdge * 2}px)`,
+        margin: 0,
+      },
+    };
+  },
+  prepareComponentToken,
+);
diff --git a/components/notification/style/stack.ts b/components/notification/style/stack.ts
index 4fb5b55b9522..b2834354caf0 100644
--- a/components/notification/style/stack.ts
+++ b/components/notification/style/stack.ts
@@ -88,7 +88,6 @@ const genStackStyle: GenerateStyle<NotificationToken> = (token) => {
       [`& > ${componentCls}-notice-wrapper`]: {
         '&:not(:nth-last-child(-n + 1))': {
           opacity: 1,
-          width: token.width,
           overflow: 'unset',
           color: 'inherit',
           pointerEvents: 'auto',
diff --git a/components/popconfirm/__tests__/index.test.tsx b/components/popconfirm/__tests__/index.test.tsx
index 2d6f11e08057..b238a951133d 100644
--- a/components/popconfirm/__tests__/index.test.tsx
+++ b/components/popconfirm/__tests__/index.test.tsx
@@ -128,6 +128,38 @@ describe('Popconfirm', () => {
     jest.useRealTimers();
   });
 
+  it('should be controlled by visible', () => {
+    jest.useFakeTimers();
+    const popconfirm = render(
+      <Popconfirm title="code">
+        <span>show me your code</span>
+      </Popconfirm>,
+    );
+
+    expect(popconfirm.container.querySelector('.ant-popover')).toBe(null);
+    popconfirm.rerender(
+      <Popconfirm title="code" visible>
+        <span>show me your code</span>
+      </Popconfirm>,
+    );
+
+    expect(popconfirm.container.querySelector('.ant-popover')).not.toBe(null);
+    expect(popconfirm.container.querySelector('.ant-popover')?.className).not.toContain(
+      'ant-popover-hidden',
+    );
+
+    popconfirm.rerender(
+      <Popconfirm title="code" visible={false}>
+        <span>show me your code</span>
+      </Popconfirm>,
+    );
+    act(() => {
+      jest.runAllTimers();
+    });
+    expect(popconfirm.container.querySelector('.ant-popover')).not.toBe(null);
+    jest.useRealTimers();
+  });
+
   it('should trigger onConfirm and onCancel', async () => {
     const confirm = jest.fn();
     const cancel = jest.fn();
diff --git a/components/popconfirm/index.tsx b/components/popconfirm/index.tsx
index ebc2d6f1ac02..de36dd66a94e 100644
--- a/components/popconfirm/index.tsx
+++ b/components/popconfirm/index.tsx
@@ -1,9 +1,10 @@
+import * as React from 'react';
 import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
 import classNames from 'classnames';
-import KeyCode from 'rc-util/lib/KeyCode';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
+import KeyCode from 'rc-util/lib/KeyCode';
 import omit from 'rc-util/lib/omit';
-import * as React from 'react';
+
 import type { RenderFunction } from '../_util/getRenderPropValue';
 import { cloneElement } from '../_util/reactNode';
 import type { ButtonProps, LegacyButtonType } from '../button/button';
@@ -53,8 +54,8 @@ const Popconfirm = React.forwardRef<TooltipRef, PopconfirmProps>((props, ref) =>
 
   const { getPrefixCls } = React.useContext(ConfigContext);
   const [open, setOpen] = useMergedState(false, {
-    value: props.open,
-    defaultValue: props.defaultOpen,
+    value: props.open ?? props.visible,
+    defaultValue: props.defaultOpen ?? props.defaultVisible,
   });
 
   const settingOpen = (
diff --git a/components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap
index 3bf41e09c374..5100bf3afca5 100644
--- a/components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -813,7 +813,7 @@ Array [
   </button>,
   <div
     class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-top"
-    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1200;"
   >
     <div
       class="ant-popover-arrow"
diff --git a/components/popover/index.tsx b/components/popover/index.tsx
index 42a7ddf9f68a..074ff3995989 100644
--- a/components/popover/index.tsx
+++ b/components/popover/index.tsx
@@ -1,5 +1,6 @@
-import classNames from 'classnames';
 import * as React from 'react';
+import classNames from 'classnames';
+
 import type { RenderFunction } from '../_util/getRenderPropValue';
 import { getRenderPropValue } from '../_util/getRenderPropValue';
 import { getTransitionName } from '../_util/motion';
diff --git a/components/qr-code/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/qr-code/__tests__/__snapshots__/demo-extend.test.ts.snap
index dbd4c88d4246..71331aba6ff3 100644
--- a/components/qr-code/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/qr-code/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -32,9 +32,8 @@ Array [
             style="width: 160px; height: 160px; background-color: transparent;"
           >
             <canvas
-              height="134"
-              style="height: 134px; width: 134px;"
-              width="134"
+              height="160"
+              width="160"
             />
           </div>
         </div>
@@ -58,9 +57,8 @@ exports[`renders components/qr-code/demo/base.tsx extend context correctly 1`] =
       style="width: 160px; height: 160px; background-color: transparent;"
     >
       <canvas
-        height="134"
-        style="height: 134px; width: 134px;"
-        width="134"
+        height="160"
+        width="160"
       />
     </div>
   </div>
@@ -92,9 +90,8 @@ exports[`renders components/qr-code/demo/customColor.tsx extend context correctl
       style="width: 160px; height: 160px; background-color: transparent;"
     >
       <canvas
-        height="134"
-        style="height: 134px; width: 134px;"
-        width="134"
+        height="160"
+        width="160"
       />
     </div>
   </div>
@@ -106,9 +103,8 @@ exports[`renders components/qr-code/demo/customColor.tsx extend context correctl
       style="width: 160px; height: 160px; background-color: rgb(245, 245, 245);"
     >
       <canvas
-        height="134"
-        style="height: 134px; width: 134px;"
-        width="134"
+        height="160"
+        width="160"
       />
     </div>
   </div>
@@ -194,9 +190,8 @@ Array [
     style="width: 160px; height: 160px; background-color: transparent;"
   >
     <canvas
-      height="134"
-      style="height: 134px; width: 134px;"
-      width="134"
+      height="160"
+      width="160"
     />
     <img
       src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
@@ -217,9 +212,8 @@ exports[`renders components/qr-code/demo/download.tsx extend context correctly 1
     style="margin-bottom: 16px; width: 160px; height: 160px; background-color: rgb(255, 255, 255);"
   >
     <canvas
-      height="134"
-      style="height: 134px; width: 134px;"
-      width="134"
+      height="160"
+      width="160"
     />
   </div>
   <button
@@ -242,9 +236,8 @@ Array [
     style="margin-bottom: 16px; width: 160px; height: 160px; background-color: transparent;"
   >
     <canvas
-      height="134"
-      style="height: 134px; width: 134px;"
-      width="134"
+      height="160"
+      width="160"
     />
   </div>,
   <div
@@ -323,9 +316,8 @@ exports[`renders components/qr-code/demo/icon.tsx extend context correctly 1`] =
   style="width: 160px; height: 160px; background-color: transparent;"
 >
   <canvas
-    height="134"
-    style="height: 134px; width: 134px;"
-    width="134"
+    height="160"
+    width="160"
   />
   <img
     src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
@@ -375,9 +367,8 @@ exports[`renders components/qr-code/demo/status.tsx extend context correctly 1`]
         </div>
       </div>
       <canvas
-        height="134"
-        style="height: 134px; width: 134px;"
-        width="134"
+        height="160"
+        width="160"
       />
     </div>
   </div>
@@ -429,9 +420,8 @@ exports[`renders components/qr-code/demo/status.tsx extend context correctly 1`]
         </button>
       </div>
       <canvas
-        height="134"
-        style="height: 134px; width: 134px;"
-        width="134"
+        height="160"
+        width="160"
       />
     </div>
   </div>
@@ -452,9 +442,8 @@ exports[`renders components/qr-code/demo/type.tsx extend context correctly 1`] =
       style="width: 160px; height: 160px; background-color: transparent;"
     >
       <canvas
-        height="134"
-        style="height: 134px; width: 134px;"
-        width="134"
+        height="160"
+        width="160"
       />
     </div>
   </div>
@@ -466,9 +455,9 @@ exports[`renders components/qr-code/demo/type.tsx extend context correctly 1`] =
       style="width: 160px; height: 160px; background-color: transparent;"
     >
       <svg
-        height="134"
+        height="160"
         viewBox="0 0 25 25"
-        width="134"
+        width="160"
       >
         <path
           d="M0,0 h25v25H0z"
diff --git a/components/qr-code/__tests__/__snapshots__/demo.test.ts.snap b/components/qr-code/__tests__/__snapshots__/demo.test.ts.snap
index 3f6e59cfa7ed..fe990a9d22f7 100644
--- a/components/qr-code/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/qr-code/__tests__/__snapshots__/demo.test.ts.snap
@@ -21,9 +21,8 @@ exports[`renders components/qr-code/demo/base.tsx correctly 1`] = `
       style="width:160px;height:160px;background-color:transparent"
     >
       <canvas
-        height="134"
-        style="height:134px;width:134px"
-        width="134"
+        height="160"
+        width="160"
       />
     </div>
   </div>
@@ -53,9 +52,8 @@ exports[`renders components/qr-code/demo/customColor.tsx correctly 1`] = `
       style="width:160px;height:160px;background-color:transparent"
     >
       <canvas
-        height="134"
-        style="height:134px;width:134px"
-        width="134"
+        height="160"
+        width="160"
       />
     </div>
   </div>
@@ -67,9 +65,8 @@ exports[`renders components/qr-code/demo/customColor.tsx correctly 1`] = `
       style="width:160px;height:160px;background-color:#f5f5f5"
     >
       <canvas
-        height="134"
-        style="height:134px;width:134px"
-        width="134"
+        height="160"
+        width="160"
       />
     </div>
   </div>
@@ -153,9 +150,8 @@ Array [
     style="width:160px;height:160px;background-color:transparent"
   >
     <canvas
-      height="134"
-      style="height:134px;width:134px"
-      width="134"
+      height="160"
+      width="160"
     />
     <img
       src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
@@ -174,9 +170,8 @@ exports[`renders components/qr-code/demo/download.tsx correctly 1`] = `
     style="margin-bottom:16px;width:160px;height:160px;background-color:#fff"
   >
     <canvas
-      height="134"
-      style="height:134px;width:134px"
-      width="134"
+      height="160"
+      width="160"
     />
   </div>
   <button
@@ -197,9 +192,8 @@ Array [
     style="margin-bottom:16px;width:160px;height:160px;background-color:transparent"
   >
     <canvas
-      height="134"
-      style="height:134px;width:134px"
-      width="134"
+      height="160"
+      width="160"
     />
   </div>,
   <div
@@ -276,9 +270,8 @@ exports[`renders components/qr-code/demo/icon.tsx correctly 1`] = `
   style="width:160px;height:160px;background-color:transparent"
 >
   <canvas
-    height="134"
-    style="height:134px;width:134px"
-    width="134"
+    height="160"
+    width="160"
   />
   <img
     src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
@@ -326,9 +319,8 @@ exports[`renders components/qr-code/demo/status.tsx correctly 1`] = `
         </div>
       </div>
       <canvas
-        height="134"
-        style="height:134px;width:134px"
-        width="134"
+        height="160"
+        width="160"
       />
     </div>
   </div>
@@ -380,9 +372,8 @@ exports[`renders components/qr-code/demo/status.tsx correctly 1`] = `
         </button>
       </div>
       <canvas
-        height="134"
-        style="height:134px;width:134px"
-        width="134"
+        height="160"
+        width="160"
       />
     </div>
   </div>
@@ -401,9 +392,8 @@ exports[`renders components/qr-code/demo/type.tsx correctly 1`] = `
       style="width:160px;height:160px;background-color:transparent"
     >
       <canvas
-        height="134"
-        style="height:134px;width:134px"
-        width="134"
+        height="160"
+        width="160"
       />
     </div>
   </div>
@@ -415,9 +405,9 @@ exports[`renders components/qr-code/demo/type.tsx correctly 1`] = `
       style="width:160px;height:160px;background-color:transparent"
     >
       <svg
-        height="134"
+        height="160"
         viewBox="0 0 25 25"
-        width="134"
+        width="160"
       >
         <path
           d="M0,0 h25v25H0z"
diff --git a/components/qr-code/__tests__/__snapshots__/index.test.tsx.snap b/components/qr-code/__tests__/__snapshots__/index.test.tsx.snap
index 19b02c5ce81b..2e3bc986de10 100644
--- a/components/qr-code/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/qr-code/__tests__/__snapshots__/index.test.tsx.snap
@@ -9,9 +9,8 @@ exports[`QRCode test should correct render 1`] = `
     style="width: 160px; height: 160px; background-color: transparent;"
   >
     <canvas
-      height="134"
-      style="height: 134px; width: 134px;"
-      width="134"
+      height="160"
+      width="160"
     />
   </div>
 </div>
diff --git a/components/qr-code/__tests__/index.test.tsx b/components/qr-code/__tests__/index.test.tsx
index a47f60d3a059..26d83994ecd1 100644
--- a/components/qr-code/__tests__/index.test.tsx
+++ b/components/qr-code/__tests__/index.test.tsx
@@ -39,9 +39,7 @@ describe('QRCode test', () => {
 
   it('support custom size', () => {
     const { container } = render(<QRCode value="test" size={100} />);
-    const wrapper = container.querySelector<HTMLDivElement>('.ant-qrcode');
-    expect(wrapper?.style?.width).toBe('100px');
-    expect(wrapper?.style?.height).toBe('100px');
+    expect(container.querySelector('.ant-qrcode')).toHaveStyle('width: 100px; height: 100px');
   });
 
   it('support refresh', () => {
diff --git a/components/qr-code/index.en-US.md b/components/qr-code/index.en-US.md
index 70c291217242..a1c4e6a14f47 100644
--- a/components/qr-code/index.en-US.md
+++ b/components/qr-code/index.en-US.md
@@ -43,7 +43,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | value | scanned text | string | - |
 | type | render type | `canvas \| svg ` | `canvas` | 5.6.0 |
 | icon | include image url (only image link are supported) | string | - |
-| size | QRCode size | number | 128 |
+| size | QRCode size | number | 160 |
 | iconSize | include image size | number | 32 |
 | color | QRCode Color | string | `#000` |
 | bgColor | QRCode Background Color | string | `transparent` | 5.5.0 |
diff --git a/components/qr-code/index.tsx b/components/qr-code/index.tsx
index 10ef01b77bdd..ef644f4e4a58 100644
--- a/components/qr-code/index.tsx
+++ b/components/qr-code/index.tsx
@@ -47,10 +47,11 @@ const QRCode: React.FC<QRCodeProps> = (props) => {
 
   const qrCodeProps = {
     value,
-    size: size - (token.paddingSM + token.lineWidth) * 2,
+    size,
     level: errorLevel,
     bgColor,
     fgColor: color,
+    style: { width: undefined, height: undefined },
     imageSettings: icon ? imageSettings : undefined,
   };
 
diff --git a/components/qr-code/style/index.ts b/components/qr-code/style/index.ts
index f40e1f30a9df..43ca82a2c3dc 100644
--- a/components/qr-code/style/index.ts
+++ b/components/qr-code/style/index.ts
@@ -22,9 +22,8 @@ const genQRCodeStyle: GenerateStyle<QRCodeToken> = (token) => {
       borderRadius: token.borderRadiusLG,
       border: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
       position: 'relative',
-      width: '100%',
-      height: '100%',
       overflow: 'hidden',
+
       [`& > ${componentCls}-mask`]: {
         position: 'absolute',
         insetBlockStart: 0,
@@ -44,6 +43,13 @@ const genQRCodeStyle: GenerateStyle<QRCodeToken> = (token) => {
           color: token.QRCodeExpiredTextColor,
         },
       },
+
+      '> canvas': {
+        alignSelf: 'stretch',
+        flex: 'auto',
+        minWidth: 0,
+      },
+
       '&-icon': {
         marginBlockEnd: token.marginXS,
         fontSize: token.controlHeight,
diff --git a/components/radio/__tests__/radio.test.tsx b/components/radio/__tests__/radio.test.tsx
index 07b9c6e97c67..010b3235e3e9 100644
--- a/components/radio/__tests__/radio.test.tsx
+++ b/components/radio/__tests__/radio.test.tsx
@@ -54,4 +54,8 @@ describe('Radio', () => {
     );
     expect(getByRole('radio')).not.toBeDisabled();
   });
+
+  it('have static property for type detecting', () => {
+    expect(Radio.__ANT_RADIO).toBeTruthy();
+  });
 });
diff --git a/components/radio/group.tsx b/components/radio/group.tsx
index 9e2efab1c526..0168e8144adf 100644
--- a/components/radio/group.tsx
+++ b/components/radio/group.tsx
@@ -80,6 +80,7 @@ const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>((props, ref
           title={option.title}
           style={option.style}
           id={option.id}
+          required={option.required}
         >
           {option.label}
         </Radio>
diff --git a/components/rate/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/rate/__tests__/__snapshots__/demo-extend.test.ts.snap
index ab2f34701140..295864088ca6 100644
--- a/components/rate/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/rate/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1261,609 +1261,629 @@ exports[`renders components/rate/demo/character-function.tsx extend context corr
 
 exports[`renders components/rate/demo/clear.tsx extend context correctly 1`] = `
 Array [
-  <ul
-    class="ant-rate"
-    role="radiogroup"
-    tabindex="0"
+  <div
+    class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
   >
-    <li
-      class="ant-rate-star ant-rate-star-full"
+    <div
+      class="ant-space-item"
     >
-      <div
-        aria-checked="true"
-        aria-posinset="1"
-        aria-setsize="5"
-        role="radio"
+      <ul
+        class="ant-rate"
+        role="radiogroup"
         tabindex="0"
       >
-        <div
-          class="ant-rate-star-first"
+        <li
+          class="ant-rate-star ant-rate-star-full"
         >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
+          <div
+            aria-checked="true"
+            aria-posinset="1"
+            aria-setsize="5"
+            role="radio"
+            tabindex="0"
           >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+            <div
+              class="ant-rate-star-first"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-rate-star-second"
-        >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+              <span
+                aria-label="star"
+                class="anticon anticon-star"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="star"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                  />
+                </svg>
+              </span>
+            </div>
+            <div
+              class="ant-rate-star-second"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
-        </div>
-      </div>
-    </li>
-    <li
-      class="ant-rate-star ant-rate-star-full"
-    >
-      <div
-        aria-checked="true"
-        aria-posinset="2"
-        aria-setsize="5"
-        role="radio"
-        tabindex="0"
-      >
-        <div
-          class="ant-rate-star-first"
-        >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+              <span
+                aria-label="star"
+                class="anticon anticon-star"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="star"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                  />
+                </svg>
+              </span>
+            </div>
+          </div>
+        </li>
+        <li
+          class="ant-rate-star ant-rate-star-full"
+        >
+          <div
+            aria-checked="true"
+            aria-posinset="2"
+            aria-setsize="5"
+            role="radio"
+            tabindex="0"
+          >
+            <div
+              class="ant-rate-star-first"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-rate-star-second"
-        >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+              <span
+                aria-label="star"
+                class="anticon anticon-star"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="star"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                  />
+                </svg>
+              </span>
+            </div>
+            <div
+              class="ant-rate-star-second"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
-        </div>
-      </div>
-    </li>
-    <li
-      class="ant-rate-star ant-rate-star-full"
-    >
-      <div
-        aria-checked="true"
-        aria-posinset="3"
-        aria-setsize="5"
-        role="radio"
-        tabindex="0"
-      >
-        <div
-          class="ant-rate-star-first"
-        >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+              <span
+                aria-label="star"
+                class="anticon anticon-star"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="star"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                  />
+                </svg>
+              </span>
+            </div>
+          </div>
+        </li>
+        <li
+          class="ant-rate-star ant-rate-star-full"
+        >
+          <div
+            aria-checked="true"
+            aria-posinset="3"
+            aria-setsize="5"
+            role="radio"
+            tabindex="0"
+          >
+            <div
+              class="ant-rate-star-first"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-rate-star-second"
-        >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+              <span
+                aria-label="star"
+                class="anticon anticon-star"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="star"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                  />
+                </svg>
+              </span>
+            </div>
+            <div
+              class="ant-rate-star-second"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
-        </div>
-      </div>
-    </li>
-    <li
-      class="ant-rate-star ant-rate-star-zero"
-    >
-      <div
-        aria-checked="false"
-        aria-posinset="4"
-        aria-setsize="5"
-        role="radio"
-        tabindex="0"
-      >
-        <div
-          class="ant-rate-star-first"
-        >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+              <span
+                aria-label="star"
+                class="anticon anticon-star"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="star"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                  />
+                </svg>
+              </span>
+            </div>
+          </div>
+        </li>
+        <li
+          class="ant-rate-star ant-rate-star-zero"
+        >
+          <div
+            aria-checked="false"
+            aria-posinset="4"
+            aria-setsize="5"
+            role="radio"
+            tabindex="0"
+          >
+            <div
+              class="ant-rate-star-first"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-rate-star-second"
-        >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+              <span
+                aria-label="star"
+                class="anticon anticon-star"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="star"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                  />
+                </svg>
+              </span>
+            </div>
+            <div
+              class="ant-rate-star-second"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
-        </div>
-      </div>
-    </li>
-    <li
-      class="ant-rate-star ant-rate-star-zero"
-    >
-      <div
-        aria-checked="false"
-        aria-posinset="5"
-        aria-setsize="5"
-        role="radio"
-        tabindex="0"
-      >
-        <div
-          class="ant-rate-star-first"
-        >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+              <span
+                aria-label="star"
+                class="anticon anticon-star"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="star"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                  />
+                </svg>
+              </span>
+            </div>
+          </div>
+        </li>
+        <li
+          class="ant-rate-star ant-rate-star-zero"
+        >
+          <div
+            aria-checked="false"
+            aria-posinset="5"
+            aria-setsize="5"
+            role="radio"
+            tabindex="0"
+          >
+            <div
+              class="ant-rate-star-first"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-rate-star-second"
-        >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+              <span
+                aria-label="star"
+                class="anticon anticon-star"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="star"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                  />
+                </svg>
+              </span>
+            </div>
+            <div
+              class="ant-rate-star-second"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
-        </div>
-      </div>
-    </li>
-  </ul>,
-  <span
-    class="ant-rate-text"
-  >
-    allowClear: true
-  </span>,
+              <span
+                aria-label="star"
+                class="anticon anticon-star"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="star"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                  />
+                </svg>
+              </span>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <div
+      class="ant-space-item"
+    >
+      <span>
+        allowClear: true
+      </span>
+    </div>
+  </div>,
   <br />,
-  <ul
-    class="ant-rate"
-    role="radiogroup"
-    tabindex="0"
+  <div
+    class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
   >
-    <li
-      class="ant-rate-star ant-rate-star-full"
+    <div
+      class="ant-space-item"
     >
-      <div
-        aria-checked="true"
-        aria-posinset="1"
-        aria-setsize="5"
-        role="radio"
+      <ul
+        class="ant-rate"
+        role="radiogroup"
         tabindex="0"
       >
-        <div
-          class="ant-rate-star-first"
+        <li
+          class="ant-rate-star ant-rate-star-full"
         >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
+          <div
+            aria-checked="true"
+            aria-posinset="1"
+            aria-setsize="5"
+            role="radio"
+            tabindex="0"
           >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+            <div
+              class="ant-rate-star-first"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-rate-star-second"
-        >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+              <span
+                aria-label="star"
+                class="anticon anticon-star"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="star"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                  />
+                </svg>
+              </span>
+            </div>
+            <div
+              class="ant-rate-star-second"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
-        </div>
-      </div>
-    </li>
-    <li
-      class="ant-rate-star ant-rate-star-full"
-    >
-      <div
-        aria-checked="true"
-        aria-posinset="2"
-        aria-setsize="5"
-        role="radio"
-        tabindex="0"
-      >
-        <div
-          class="ant-rate-star-first"
-        >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+              <span
+                aria-label="star"
+                class="anticon anticon-star"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="star"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                  />
+                </svg>
+              </span>
+            </div>
+          </div>
+        </li>
+        <li
+          class="ant-rate-star ant-rate-star-full"
+        >
+          <div
+            aria-checked="true"
+            aria-posinset="2"
+            aria-setsize="5"
+            role="radio"
+            tabindex="0"
+          >
+            <div
+              class="ant-rate-star-first"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-rate-star-second"
-        >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+              <span
+                aria-label="star"
+                class="anticon anticon-star"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="star"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                  />
+                </svg>
+              </span>
+            </div>
+            <div
+              class="ant-rate-star-second"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
-        </div>
-      </div>
-    </li>
-    <li
-      class="ant-rate-star ant-rate-star-full"
-    >
-      <div
-        aria-checked="true"
-        aria-posinset="3"
-        aria-setsize="5"
-        role="radio"
-        tabindex="0"
-      >
-        <div
-          class="ant-rate-star-first"
-        >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+              <span
+                aria-label="star"
+                class="anticon anticon-star"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="star"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                  />
+                </svg>
+              </span>
+            </div>
+          </div>
+        </li>
+        <li
+          class="ant-rate-star ant-rate-star-full"
+        >
+          <div
+            aria-checked="true"
+            aria-posinset="3"
+            aria-setsize="5"
+            role="radio"
+            tabindex="0"
+          >
+            <div
+              class="ant-rate-star-first"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-rate-star-second"
-        >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+              <span
+                aria-label="star"
+                class="anticon anticon-star"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="star"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                  />
+                </svg>
+              </span>
+            </div>
+            <div
+              class="ant-rate-star-second"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
-        </div>
-      </div>
-    </li>
-    <li
-      class="ant-rate-star ant-rate-star-zero"
-    >
-      <div
-        aria-checked="false"
-        aria-posinset="4"
-        aria-setsize="5"
-        role="radio"
-        tabindex="0"
-      >
-        <div
-          class="ant-rate-star-first"
-        >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+              <span
+                aria-label="star"
+                class="anticon anticon-star"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="star"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                  />
+                </svg>
+              </span>
+            </div>
+          </div>
+        </li>
+        <li
+          class="ant-rate-star ant-rate-star-zero"
+        >
+          <div
+            aria-checked="false"
+            aria-posinset="4"
+            aria-setsize="5"
+            role="radio"
+            tabindex="0"
+          >
+            <div
+              class="ant-rate-star-first"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-rate-star-second"
-        >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+              <span
+                aria-label="star"
+                class="anticon anticon-star"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="star"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                  />
+                </svg>
+              </span>
+            </div>
+            <div
+              class="ant-rate-star-second"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
-        </div>
-      </div>
-    </li>
-    <li
-      class="ant-rate-star ant-rate-star-zero"
-    >
-      <div
-        aria-checked="false"
-        aria-posinset="5"
-        aria-setsize="5"
-        role="radio"
-        tabindex="0"
-      >
-        <div
-          class="ant-rate-star-first"
-        >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+              <span
+                aria-label="star"
+                class="anticon anticon-star"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="star"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                  />
+                </svg>
+              </span>
+            </div>
+          </div>
+        </li>
+        <li
+          class="ant-rate-star ant-rate-star-zero"
+        >
+          <div
+            aria-checked="false"
+            aria-posinset="5"
+            aria-setsize="5"
+            role="radio"
+            tabindex="0"
+          >
+            <div
+              class="ant-rate-star-first"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-rate-star-second"
-        >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+              <span
+                aria-label="star"
+                class="anticon anticon-star"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="star"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                  />
+                </svg>
+              </span>
+            </div>
+            <div
+              class="ant-rate-star-second"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
-        </div>
-      </div>
-    </li>
-  </ul>,
-  <span
-    class="ant-rate-text"
-  >
-    allowClear: false
-  </span>,
+              <span
+                aria-label="star"
+                class="anticon anticon-star"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="star"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                  />
+                </svg>
+              </span>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <div
+      class="ant-space-item"
+    >
+      <span>
+        allowClear: false
+      </span>
+    </div>
+  </div>,
 ]
 `;
 
@@ -2773,404 +2793,412 @@ exports[`renders components/rate/demo/half.tsx extend context correctly 1`] = `
 exports[`renders components/rate/demo/half.tsx extend context correctly 2`] = `[]`;
 
 exports[`renders components/rate/demo/text.tsx extend context correctly 1`] = `
-<span>
-  <ul
-    class="ant-rate"
-    role="radiogroup"
-    tabindex="0"
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
+>
+  <div
+    class="ant-space-item"
   >
-    <li
-      class="ant-rate-star ant-rate-star-full"
+    <ul
+      class="ant-rate"
+      role="radiogroup"
+      tabindex="0"
     >
-      <div
-        aria-checked="true"
-        aria-posinset="1"
-        aria-setsize="5"
-        role="radio"
-        tabindex="0"
+      <li
+        class="ant-rate-star ant-rate-star-full"
       >
         <div
-          class="ant-rate-star-first"
+          aria-checked="true"
+          aria-posinset="1"
+          aria-setsize="5"
+          role="radio"
+          tabindex="0"
         >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
+          <div
+            class="ant-rate-star-first"
           >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+            <span
+              aria-label="star"
+              class="anticon anticon-star"
+              role="img"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-rate-star-second"
-        >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+              <svg
+                aria-hidden="true"
+                data-icon="star"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                />
+              </svg>
+            </span>
+          </div>
+          <div
+            class="ant-rate-star-second"
+          >
+            <span
+              aria-label="star"
+              class="anticon anticon-star"
+              role="img"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
+              <svg
+                aria-hidden="true"
+                data-icon="star"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                />
+              </svg>
+            </span>
+          </div>
         </div>
-      </div>
-    </li>
-    <div
-      class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
-      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-    >
-      <div
-        class="ant-tooltip-arrow"
-        style="position: absolute; bottom: 0px; left: 0px;"
-      />
+      </li>
       <div
-        class="ant-tooltip-content"
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
       >
         <div
-          class="ant-tooltip-inner"
-          role="tooltip"
+          class="ant-tooltip-arrow"
+          style="position: absolute; bottom: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
         >
-          terrible
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          >
+            terrible
+          </div>
         </div>
       </div>
-    </div>
-    <li
-      class="ant-rate-star ant-rate-star-full"
-    >
-      <div
-        aria-checked="true"
-        aria-posinset="2"
-        aria-setsize="5"
-        role="radio"
-        tabindex="0"
+      <li
+        class="ant-rate-star ant-rate-star-full"
       >
         <div
-          class="ant-rate-star-first"
+          aria-checked="true"
+          aria-posinset="2"
+          aria-setsize="5"
+          role="radio"
+          tabindex="0"
         >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
+          <div
+            class="ant-rate-star-first"
           >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+            <span
+              aria-label="star"
+              class="anticon anticon-star"
+              role="img"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-rate-star-second"
-        >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+              <svg
+                aria-hidden="true"
+                data-icon="star"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                />
+              </svg>
+            </span>
+          </div>
+          <div
+            class="ant-rate-star-second"
+          >
+            <span
+              aria-label="star"
+              class="anticon anticon-star"
+              role="img"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
+              <svg
+                aria-hidden="true"
+                data-icon="star"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                />
+              </svg>
+            </span>
+          </div>
         </div>
-      </div>
-    </li>
-    <div
-      class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
-      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-    >
+      </li>
       <div
-        class="ant-tooltip-arrow"
-        style="position: absolute; bottom: 0px; left: 0px;"
-      />
-      <div
-        class="ant-tooltip-content"
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
       >
         <div
-          class="ant-tooltip-inner"
-          role="tooltip"
+          class="ant-tooltip-arrow"
+          style="position: absolute; bottom: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
         >
-          bad
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          >
+            bad
+          </div>
         </div>
       </div>
-    </div>
-    <li
-      class="ant-rate-star ant-rate-star-full"
-    >
-      <div
-        aria-checked="true"
-        aria-posinset="3"
-        aria-setsize="5"
-        role="radio"
-        tabindex="0"
+      <li
+        class="ant-rate-star ant-rate-star-full"
       >
         <div
-          class="ant-rate-star-first"
+          aria-checked="true"
+          aria-posinset="3"
+          aria-setsize="5"
+          role="radio"
+          tabindex="0"
         >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
+          <div
+            class="ant-rate-star-first"
           >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+            <span
+              aria-label="star"
+              class="anticon anticon-star"
+              role="img"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-rate-star-second"
-        >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+              <svg
+                aria-hidden="true"
+                data-icon="star"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                />
+              </svg>
+            </span>
+          </div>
+          <div
+            class="ant-rate-star-second"
+          >
+            <span
+              aria-label="star"
+              class="anticon anticon-star"
+              role="img"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
+              <svg
+                aria-hidden="true"
+                data-icon="star"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                />
+              </svg>
+            </span>
+          </div>
         </div>
-      </div>
-    </li>
-    <div
-      class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
-      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-    >
-      <div
-        class="ant-tooltip-arrow"
-        style="position: absolute; bottom: 0px; left: 0px;"
-      />
+      </li>
       <div
-        class="ant-tooltip-content"
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
       >
         <div
-          class="ant-tooltip-inner"
-          role="tooltip"
+          class="ant-tooltip-arrow"
+          style="position: absolute; bottom: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
         >
-          normal
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          >
+            normal
+          </div>
         </div>
       </div>
-    </div>
-    <li
-      class="ant-rate-star ant-rate-star-zero"
-    >
-      <div
-        aria-checked="false"
-        aria-posinset="4"
-        aria-setsize="5"
-        role="radio"
-        tabindex="0"
+      <li
+        class="ant-rate-star ant-rate-star-zero"
       >
         <div
-          class="ant-rate-star-first"
+          aria-checked="false"
+          aria-posinset="4"
+          aria-setsize="5"
+          role="radio"
+          tabindex="0"
         >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
+          <div
+            class="ant-rate-star-first"
           >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+            <span
+              aria-label="star"
+              class="anticon anticon-star"
+              role="img"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-rate-star-second"
-        >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+              <svg
+                aria-hidden="true"
+                data-icon="star"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                />
+              </svg>
+            </span>
+          </div>
+          <div
+            class="ant-rate-star-second"
+          >
+            <span
+              aria-label="star"
+              class="anticon anticon-star"
+              role="img"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
+              <svg
+                aria-hidden="true"
+                data-icon="star"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                />
+              </svg>
+            </span>
+          </div>
         </div>
-      </div>
-    </li>
-    <div
-      class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
-      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-    >
+      </li>
       <div
-        class="ant-tooltip-arrow"
-        style="position: absolute; bottom: 0px; left: 0px;"
-      />
-      <div
-        class="ant-tooltip-content"
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
       >
         <div
-          class="ant-tooltip-inner"
-          role="tooltip"
+          class="ant-tooltip-arrow"
+          style="position: absolute; bottom: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
         >
-          good
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          >
+            good
+          </div>
         </div>
       </div>
-    </div>
-    <li
-      class="ant-rate-star ant-rate-star-zero"
-    >
-      <div
-        aria-checked="false"
-        aria-posinset="5"
-        aria-setsize="5"
-        role="radio"
-        tabindex="0"
+      <li
+        class="ant-rate-star ant-rate-star-zero"
       >
         <div
-          class="ant-rate-star-first"
+          aria-checked="false"
+          aria-posinset="5"
+          aria-setsize="5"
+          role="radio"
+          tabindex="0"
         >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
+          <div
+            class="ant-rate-star-first"
           >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+            <span
+              aria-label="star"
+              class="anticon anticon-star"
+              role="img"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-rate-star-second"
-        >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+              <svg
+                aria-hidden="true"
+                data-icon="star"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                />
+              </svg>
+            </span>
+          </div>
+          <div
+            class="ant-rate-star-second"
+          >
+            <span
+              aria-label="star"
+              class="anticon anticon-star"
+              role="img"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
-        </div>
-      </div>
-    </li>
-    <div
-      class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
-      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
-    >
-      <div
-        class="ant-tooltip-arrow"
-        style="position: absolute; bottom: 0px; left: 0px;"
-      />
-      <div
-        class="ant-tooltip-content"
-      >
-        <div
-          class="ant-tooltip-inner"
-          role="tooltip"
-        >
-          wonderful
-        </div>
-      </div>
-    </div>
-  </ul>
-  <span
-    class="ant-rate-text"
+              <svg
+                aria-hidden="true"
+                data-icon="star"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+      </li>
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; bottom: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          >
+            wonderful
+          </div>
+        </div>
+      </div>
+    </ul>
+  </div>
+  <div
+    class="ant-space-item"
   >
-    normal
-  </span>
-</span>
+    <span>
+      normal
+    </span>
+  </div>
+</div>
 `;
 
 exports[`renders components/rate/demo/text.tsx extend context correctly 2`] = `[]`;
diff --git a/components/rate/__tests__/__snapshots__/demo.test.ts.snap b/components/rate/__tests__/__snapshots__/demo.test.ts.snap
index 9ac4ea2e1ac8..cbf0d9e53ac7 100644
--- a/components/rate/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/rate/__tests__/__snapshots__/demo.test.ts.snap
@@ -1255,609 +1255,629 @@ Array [
 
 exports[`renders components/rate/demo/clear.tsx correctly 1`] = `
 Array [
-  <ul
-    class="ant-rate"
-    role="radiogroup"
-    tabindex="0"
+  <div
+    class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
   >
-    <li
-      class="ant-rate-star ant-rate-star-full"
+    <div
+      class="ant-space-item"
     >
-      <div
-        aria-checked="true"
-        aria-posinset="1"
-        aria-setsize="5"
-        role="radio"
+      <ul
+        class="ant-rate"
+        role="radiogroup"
         tabindex="0"
       >
-        <div
-          class="ant-rate-star-first"
+        <li
+          class="ant-rate-star ant-rate-star-full"
         >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
+          <div
+            aria-checked="true"
+            aria-posinset="1"
+            aria-setsize="5"
+            role="radio"
+            tabindex="0"
           >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+            <div
+              class="ant-rate-star-first"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-rate-star-second"
-        >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+              <span
+                aria-label="star"
+                class="anticon anticon-star"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="star"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                  />
+                </svg>
+              </span>
+            </div>
+            <div
+              class="ant-rate-star-second"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
-        </div>
-      </div>
-    </li>
-    <li
-      class="ant-rate-star ant-rate-star-full"
-    >
-      <div
-        aria-checked="true"
-        aria-posinset="2"
-        aria-setsize="5"
-        role="radio"
-        tabindex="0"
-      >
-        <div
-          class="ant-rate-star-first"
-        >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+              <span
+                aria-label="star"
+                class="anticon anticon-star"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="star"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                  />
+                </svg>
+              </span>
+            </div>
+          </div>
+        </li>
+        <li
+          class="ant-rate-star ant-rate-star-full"
+        >
+          <div
+            aria-checked="true"
+            aria-posinset="2"
+            aria-setsize="5"
+            role="radio"
+            tabindex="0"
+          >
+            <div
+              class="ant-rate-star-first"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-rate-star-second"
-        >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+              <span
+                aria-label="star"
+                class="anticon anticon-star"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="star"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                  />
+                </svg>
+              </span>
+            </div>
+            <div
+              class="ant-rate-star-second"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
-        </div>
-      </div>
-    </li>
-    <li
-      class="ant-rate-star ant-rate-star-full"
-    >
-      <div
-        aria-checked="true"
-        aria-posinset="3"
-        aria-setsize="5"
-        role="radio"
-        tabindex="0"
-      >
-        <div
-          class="ant-rate-star-first"
-        >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+              <span
+                aria-label="star"
+                class="anticon anticon-star"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="star"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                  />
+                </svg>
+              </span>
+            </div>
+          </div>
+        </li>
+        <li
+          class="ant-rate-star ant-rate-star-full"
+        >
+          <div
+            aria-checked="true"
+            aria-posinset="3"
+            aria-setsize="5"
+            role="radio"
+            tabindex="0"
+          >
+            <div
+              class="ant-rate-star-first"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-rate-star-second"
-        >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+              <span
+                aria-label="star"
+                class="anticon anticon-star"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="star"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                  />
+                </svg>
+              </span>
+            </div>
+            <div
+              class="ant-rate-star-second"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
-        </div>
-      </div>
-    </li>
-    <li
-      class="ant-rate-star ant-rate-star-zero"
-    >
-      <div
-        aria-checked="false"
-        aria-posinset="4"
-        aria-setsize="5"
-        role="radio"
-        tabindex="0"
-      >
-        <div
-          class="ant-rate-star-first"
-        >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+              <span
+                aria-label="star"
+                class="anticon anticon-star"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="star"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                  />
+                </svg>
+              </span>
+            </div>
+          </div>
+        </li>
+        <li
+          class="ant-rate-star ant-rate-star-zero"
+        >
+          <div
+            aria-checked="false"
+            aria-posinset="4"
+            aria-setsize="5"
+            role="radio"
+            tabindex="0"
+          >
+            <div
+              class="ant-rate-star-first"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-rate-star-second"
-        >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+              <span
+                aria-label="star"
+                class="anticon anticon-star"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="star"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                  />
+                </svg>
+              </span>
+            </div>
+            <div
+              class="ant-rate-star-second"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
-        </div>
-      </div>
-    </li>
-    <li
-      class="ant-rate-star ant-rate-star-zero"
-    >
-      <div
-        aria-checked="false"
-        aria-posinset="5"
-        aria-setsize="5"
-        role="radio"
-        tabindex="0"
-      >
-        <div
-          class="ant-rate-star-first"
-        >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+              <span
+                aria-label="star"
+                class="anticon anticon-star"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="star"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                  />
+                </svg>
+              </span>
+            </div>
+          </div>
+        </li>
+        <li
+          class="ant-rate-star ant-rate-star-zero"
+        >
+          <div
+            aria-checked="false"
+            aria-posinset="5"
+            aria-setsize="5"
+            role="radio"
+            tabindex="0"
+          >
+            <div
+              class="ant-rate-star-first"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-rate-star-second"
-        >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+              <span
+                aria-label="star"
+                class="anticon anticon-star"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="star"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                  />
+                </svg>
+              </span>
+            </div>
+            <div
+              class="ant-rate-star-second"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
-        </div>
-      </div>
-    </li>
-  </ul>,
-  <span
-    class="ant-rate-text"
-  >
-    allowClear: true
-  </span>,
+              <span
+                aria-label="star"
+                class="anticon anticon-star"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="star"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                  />
+                </svg>
+              </span>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <div
+      class="ant-space-item"
+    >
+      <span>
+        allowClear: true
+      </span>
+    </div>
+  </div>,
   <br />,
-  <ul
-    class="ant-rate"
-    role="radiogroup"
-    tabindex="0"
+  <div
+    class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
   >
-    <li
-      class="ant-rate-star ant-rate-star-full"
-    >
-      <div
-        aria-checked="true"
-        aria-posinset="1"
-        aria-setsize="5"
-        role="radio"
-        tabindex="0"
-      >
-        <div
-          class="ant-rate-star-first"
-        >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-rate-star-second"
-        >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
-        </div>
-      </div>
-    </li>
-    <li
-      class="ant-rate-star ant-rate-star-full"
+    <div
+      class="ant-space-item"
     >
-      <div
-        aria-checked="true"
-        aria-posinset="2"
-        aria-setsize="5"
-        role="radio"
+      <ul
+        class="ant-rate"
+        role="radiogroup"
         tabindex="0"
       >
-        <div
-          class="ant-rate-star-first"
+        <li
+          class="ant-rate-star ant-rate-star-full"
         >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
+          <div
+            aria-checked="true"
+            aria-posinset="1"
+            aria-setsize="5"
+            role="radio"
+            tabindex="0"
           >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+            <div
+              class="ant-rate-star-first"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-rate-star-second"
-        >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+              <span
+                aria-label="star"
+                class="anticon anticon-star"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="star"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                  />
+                </svg>
+              </span>
+            </div>
+            <div
+              class="ant-rate-star-second"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
-        </div>
-      </div>
-    </li>
-    <li
-      class="ant-rate-star ant-rate-star-full"
-    >
-      <div
-        aria-checked="true"
-        aria-posinset="3"
-        aria-setsize="5"
-        role="radio"
-        tabindex="0"
-      >
-        <div
-          class="ant-rate-star-first"
-        >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+              <span
+                aria-label="star"
+                class="anticon anticon-star"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="star"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                  />
+                </svg>
+              </span>
+            </div>
+          </div>
+        </li>
+        <li
+          class="ant-rate-star ant-rate-star-full"
+        >
+          <div
+            aria-checked="true"
+            aria-posinset="2"
+            aria-setsize="5"
+            role="radio"
+            tabindex="0"
+          >
+            <div
+              class="ant-rate-star-first"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-rate-star-second"
-        >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+              <span
+                aria-label="star"
+                class="anticon anticon-star"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="star"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                  />
+                </svg>
+              </span>
+            </div>
+            <div
+              class="ant-rate-star-second"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
-        </div>
-      </div>
-    </li>
-    <li
-      class="ant-rate-star ant-rate-star-zero"
-    >
-      <div
-        aria-checked="false"
-        aria-posinset="4"
-        aria-setsize="5"
-        role="radio"
-        tabindex="0"
-      >
-        <div
-          class="ant-rate-star-first"
-        >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+              <span
+                aria-label="star"
+                class="anticon anticon-star"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="star"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                  />
+                </svg>
+              </span>
+            </div>
+          </div>
+        </li>
+        <li
+          class="ant-rate-star ant-rate-star-full"
+        >
+          <div
+            aria-checked="true"
+            aria-posinset="3"
+            aria-setsize="5"
+            role="radio"
+            tabindex="0"
+          >
+            <div
+              class="ant-rate-star-first"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-rate-star-second"
-        >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+              <span
+                aria-label="star"
+                class="anticon anticon-star"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="star"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                  />
+                </svg>
+              </span>
+            </div>
+            <div
+              class="ant-rate-star-second"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
-        </div>
-      </div>
-    </li>
-    <li
-      class="ant-rate-star ant-rate-star-zero"
-    >
-      <div
-        aria-checked="false"
-        aria-posinset="5"
-        aria-setsize="5"
-        role="radio"
-        tabindex="0"
-      >
-        <div
-          class="ant-rate-star-first"
-        >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+              <span
+                aria-label="star"
+                class="anticon anticon-star"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="star"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                  />
+                </svg>
+              </span>
+            </div>
+          </div>
+        </li>
+        <li
+          class="ant-rate-star ant-rate-star-zero"
+        >
+          <div
+            aria-checked="false"
+            aria-posinset="4"
+            aria-setsize="5"
+            role="radio"
+            tabindex="0"
+          >
+            <div
+              class="ant-rate-star-first"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-rate-star-second"
-        >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+              <span
+                aria-label="star"
+                class="anticon anticon-star"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="star"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                  />
+                </svg>
+              </span>
+            </div>
+            <div
+              class="ant-rate-star-second"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
-        </div>
-      </div>
-    </li>
-  </ul>,
-  <span
-    class="ant-rate-text"
-  >
-    allowClear: false
-  </span>,
+              <span
+                aria-label="star"
+                class="anticon anticon-star"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="star"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                  />
+                </svg>
+              </span>
+            </div>
+          </div>
+        </li>
+        <li
+          class="ant-rate-star ant-rate-star-zero"
+        >
+          <div
+            aria-checked="false"
+            aria-posinset="5"
+            aria-setsize="5"
+            role="radio"
+            tabindex="0"
+          >
+            <div
+              class="ant-rate-star-first"
+            >
+              <span
+                aria-label="star"
+                class="anticon anticon-star"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="star"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                  />
+                </svg>
+              </span>
+            </div>
+            <div
+              class="ant-rate-star-second"
+            >
+              <span
+                aria-label="star"
+                class="anticon anticon-star"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="star"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                  />
+                </svg>
+              </span>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <div
+      class="ant-space-item"
+    >
+      <span>
+        allowClear: false
+      </span>
+    </div>
+  </div>,
 ]
 `;
 
@@ -2759,307 +2779,315 @@ exports[`renders components/rate/demo/half.tsx correctly 1`] = `
 `;
 
 exports[`renders components/rate/demo/text.tsx correctly 1`] = `
-<span>
-  <ul
-    class="ant-rate"
-    role="radiogroup"
-    tabindex="0"
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
+>
+  <div
+    class="ant-space-item"
   >
-    <li
-      class="ant-rate-star ant-rate-star-full"
+    <ul
+      class="ant-rate"
+      role="radiogroup"
+      tabindex="0"
     >
-      <div
-        aria-checked="true"
-        aria-posinset="1"
-        aria-setsize="5"
-        role="radio"
-        tabindex="0"
+      <li
+        class="ant-rate-star ant-rate-star-full"
       >
         <div
-          class="ant-rate-star-first"
+          aria-checked="true"
+          aria-posinset="1"
+          aria-setsize="5"
+          role="radio"
+          tabindex="0"
         >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
+          <div
+            class="ant-rate-star-first"
           >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+            <span
+              aria-label="star"
+              class="anticon anticon-star"
+              role="img"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-rate-star-second"
-        >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+              <svg
+                aria-hidden="true"
+                data-icon="star"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                />
+              </svg>
+            </span>
+          </div>
+          <div
+            class="ant-rate-star-second"
+          >
+            <span
+              aria-label="star"
+              class="anticon anticon-star"
+              role="img"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
-        </div>
-      </div>
-    </li>
-    <li
-      class="ant-rate-star ant-rate-star-full"
-    >
-      <div
-        aria-checked="true"
-        aria-posinset="2"
-        aria-setsize="5"
-        role="radio"
-        tabindex="0"
-      >
-        <div
-          class="ant-rate-star-first"
-        >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+              <svg
+                aria-hidden="true"
+                data-icon="star"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+      </li>
+      <li
+        class="ant-rate-star ant-rate-star-full"
+      >
+        <div
+          aria-checked="true"
+          aria-posinset="2"
+          aria-setsize="5"
+          role="radio"
+          tabindex="0"
+        >
+          <div
+            class="ant-rate-star-first"
+          >
+            <span
+              aria-label="star"
+              class="anticon anticon-star"
+              role="img"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-rate-star-second"
-        >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+              <svg
+                aria-hidden="true"
+                data-icon="star"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                />
+              </svg>
+            </span>
+          </div>
+          <div
+            class="ant-rate-star-second"
+          >
+            <span
+              aria-label="star"
+              class="anticon anticon-star"
+              role="img"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
-        </div>
-      </div>
-    </li>
-    <li
-      class="ant-rate-star ant-rate-star-full"
-    >
-      <div
-        aria-checked="true"
-        aria-posinset="3"
-        aria-setsize="5"
-        role="radio"
-        tabindex="0"
-      >
-        <div
-          class="ant-rate-star-first"
-        >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+              <svg
+                aria-hidden="true"
+                data-icon="star"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+      </li>
+      <li
+        class="ant-rate-star ant-rate-star-full"
+      >
+        <div
+          aria-checked="true"
+          aria-posinset="3"
+          aria-setsize="5"
+          role="radio"
+          tabindex="0"
+        >
+          <div
+            class="ant-rate-star-first"
+          >
+            <span
+              aria-label="star"
+              class="anticon anticon-star"
+              role="img"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-rate-star-second"
-        >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+              <svg
+                aria-hidden="true"
+                data-icon="star"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                />
+              </svg>
+            </span>
+          </div>
+          <div
+            class="ant-rate-star-second"
+          >
+            <span
+              aria-label="star"
+              class="anticon anticon-star"
+              role="img"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
-        </div>
-      </div>
-    </li>
-    <li
-      class="ant-rate-star ant-rate-star-zero"
-    >
-      <div
-        aria-checked="false"
-        aria-posinset="4"
-        aria-setsize="5"
-        role="radio"
-        tabindex="0"
-      >
-        <div
-          class="ant-rate-star-first"
-        >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+              <svg
+                aria-hidden="true"
+                data-icon="star"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+      </li>
+      <li
+        class="ant-rate-star ant-rate-star-zero"
+      >
+        <div
+          aria-checked="false"
+          aria-posinset="4"
+          aria-setsize="5"
+          role="radio"
+          tabindex="0"
+        >
+          <div
+            class="ant-rate-star-first"
+          >
+            <span
+              aria-label="star"
+              class="anticon anticon-star"
+              role="img"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-rate-star-second"
-        >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+              <svg
+                aria-hidden="true"
+                data-icon="star"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                />
+              </svg>
+            </span>
+          </div>
+          <div
+            class="ant-rate-star-second"
+          >
+            <span
+              aria-label="star"
+              class="anticon anticon-star"
+              role="img"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
-        </div>
-      </div>
-    </li>
-    <li
-      class="ant-rate-star ant-rate-star-zero"
-    >
-      <div
-        aria-checked="false"
-        aria-posinset="5"
-        aria-setsize="5"
-        role="radio"
-        tabindex="0"
-      >
-        <div
-          class="ant-rate-star-first"
-        >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+              <svg
+                aria-hidden="true"
+                data-icon="star"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+      </li>
+      <li
+        class="ant-rate-star ant-rate-star-zero"
+      >
+        <div
+          aria-checked="false"
+          aria-posinset="5"
+          aria-setsize="5"
+          role="radio"
+          tabindex="0"
+        >
+          <div
+            class="ant-rate-star-first"
+          >
+            <span
+              aria-label="star"
+              class="anticon anticon-star"
+              role="img"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="ant-rate-star-second"
-        >
-          <span
-            aria-label="star"
-            class="anticon anticon-star"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="star"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+              <svg
+                aria-hidden="true"
+                data-icon="star"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                />
+              </svg>
+            </span>
+          </div>
+          <div
+            class="ant-rate-star-second"
+          >
+            <span
+              aria-label="star"
+              class="anticon anticon-star"
+              role="img"
             >
-              <path
-                d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
-              />
-            </svg>
-          </span>
-        </div>
-      </div>
-    </li>
-  </ul>
-  <span
-    class="ant-rate-text"
+              <svg
+                aria-hidden="true"
+                data-icon="star"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
+  <div
+    class="ant-space-item"
   >
-    normal
-  </span>
-</span>
+    <span>
+      normal
+    </span>
+  </div>
+</div>
 `;
diff --git a/components/rate/demo/clear.tsx b/components/rate/demo/clear.tsx
index 845e31ee12e8..eed37f8e4f0e 100644
--- a/components/rate/demo/clear.tsx
+++ b/components/rate/demo/clear.tsx
@@ -1,13 +1,17 @@
 import React from 'react';
-import { Rate } from 'antd';
+import { Space, Rate } from 'antd';
 
 const App: React.FC = () => (
   <>
-    <Rate defaultValue={3} />
-    <span className="ant-rate-text">allowClear: true</span>
+    <Space>
+      <Rate defaultValue={3} />
+      <span>allowClear: true</span>
+    </Space>
     <br />
-    <Rate allowClear={false} defaultValue={3} />
-    <span className="ant-rate-text">allowClear: false</span>
+    <Space>
+      <Rate allowClear={false} defaultValue={3} />
+      <span>allowClear: false</span>
+    </Space>
   </>
 );
 
diff --git a/components/rate/demo/text.tsx b/components/rate/demo/text.tsx
index a306d87fd4c7..0122b64821bb 100644
--- a/components/rate/demo/text.tsx
+++ b/components/rate/demo/text.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Rate } from 'antd';
+import { Space, Rate } from 'antd';
 
 const desc = ['terrible', 'bad', 'normal', 'good', 'wonderful'];
 
@@ -7,10 +7,10 @@ const App: React.FC = () => {
   const [value, setValue] = useState(3);
 
   return (
-    <span>
+    <Space>
       <Rate tooltips={desc} onChange={setValue} value={value} />
-      {value ? <span className="ant-rate-text">{desc[value - 1]}</span> : ''}
-    </span>
+      {value ? <span>{desc[value - 1]}</span> : ''}
+    </Space>
   );
 };
 
diff --git a/components/rate/style/index.tsx b/components/rate/style/index.tsx
index 25a34ed5ec50..3dd745dd5e4f 100644
--- a/components/rate/style/index.tsx
+++ b/components/rate/style/index.tsx
@@ -120,13 +120,6 @@ const genRateStyle: GenerateStyle<RateToken> = (token) => {
       // star styles
       ...genRateStarStyle(token),
 
-      // text styles
-      [`+ ${componentCls}-text`]: {
-        display: 'inline-block',
-        marginInlineStart: token.marginXS,
-        fontSize: token.fontSize,
-      },
-
       // rtl styles
       ...genRateRtlStyle(token),
     },
diff --git a/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap
index 411d91ceca7f..36e4570c7972 100644
--- a/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -7380,6 +7380,7 @@ exports[`renders components/select/demo/option-label-prop.tsx extend context cor
         style="height: 0px; width: 0px; overflow: hidden;"
       >
         <div
+          aria-label="China"
           aria-selected="true"
           id="rc_select_TEST_OR_SSR_list_0"
           role="option"
@@ -7387,6 +7388,7 @@ exports[`renders components/select/demo/option-label-prop.tsx extend context cor
           china
         </div>
         <div
+          aria-label="USA"
           aria-selected="false"
           id="rc_select_TEST_OR_SSR_list_1"
           role="option"
@@ -7410,7 +7412,7 @@ exports[`renders components/select/demo/option-label-prop.tsx extend context cor
               <div
                 aria-selected="true"
                 class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
-                label="China"
+                title="China"
               >
                 <div
                   class="ant-select-item-option-content"
@@ -7465,7 +7467,7 @@ exports[`renders components/select/demo/option-label-prop.tsx extend context cor
               <div
                 aria-selected="false"
                 class="ant-select-item ant-select-item-option"
-                label="USA"
+                title="USA"
               >
                 <div
                   class="ant-select-item-option-content"
@@ -7494,7 +7496,7 @@ exports[`renders components/select/demo/option-label-prop.tsx extend context cor
               <div
                 aria-selected="false"
                 class="ant-select-item ant-select-item-option"
-                label="Japan"
+                title="Japan"
               >
                 <div
                   class="ant-select-item-option-content"
@@ -7523,7 +7525,7 @@ exports[`renders components/select/demo/option-label-prop.tsx extend context cor
               <div
                 aria-selected="false"
                 class="ant-select-item ant-select-item-option"
-                label="Korea"
+                title="Korea"
               >
                 <div
                   class="ant-select-item-option-content"
diff --git a/components/select/demo/option-label-prop.tsx b/components/select/demo/option-label-prop.tsx
index a01c57fafd95..7f3cbb686e3f 100644
--- a/components/select/demo/option-label-prop.tsx
+++ b/components/select/demo/option-label-prop.tsx
@@ -1,12 +1,38 @@
 import React from 'react';
+import type { SelectProps } from 'antd';
 import { Select, Space } from 'antd';
 
-const { Option } = Select;
-
 const handleChange = (value: string[]) => {
   console.log(`selected ${value}`);
 };
 
+const options: SelectProps['options'] = [
+  {
+    label: 'China',
+    value: 'china',
+    emoji: '🇨🇳',
+    desc: 'China (中国)',
+  },
+  {
+    label: 'USA',
+    value: 'usa',
+    emoji: '🇺🇸',
+    desc: 'USA (美国)',
+  },
+  {
+    label: 'Japan',
+    value: 'japan',
+    emoji: '🇯🇵',
+    desc: 'Japan (日本)',
+  },
+  {
+    label: 'Korea',
+    value: 'korea',
+    emoji: '🇰🇷',
+    desc: 'Korea (韩国)',
+  },
+];
+
 const App: React.FC = () => (
   <Select
     mode="multiple"
@@ -15,40 +41,16 @@ const App: React.FC = () => (
     defaultValue={['china']}
     onChange={handleChange}
     optionLabelProp="label"
-  >
-    <Option value="china" label="China">
-      <Space>
-        <span role="img" aria-label="China">
-          🇨🇳
-        </span>
-        China (中国)
-      </Space>
-    </Option>
-    <Option value="usa" label="USA">
-      <Space>
-        <span role="img" aria-label="USA">
-          🇺🇸
-        </span>
-        USA (美国)
-      </Space>
-    </Option>
-    <Option value="japan" label="Japan">
-      <Space>
-        <span role="img" aria-label="Japan">
-          🇯🇵
-        </span>
-        Japan (日本)
-      </Space>
-    </Option>
-    <Option value="korea" label="Korea">
+    options={options}
+    optionRender={(option) => (
       <Space>
-        <span role="img" aria-label="Korea">
-          🇰🇷
+        <span role="img" aria-label={option.data.label}>
+          {option.data.emoji}
         </span>
-        Korea (韩国)
+        {option.data.desc}
       </Space>
-    </Option>
-  </Select>
+    )}
+  />
 );
 
 export default App;
diff --git a/components/select/index.en-US.md b/components/select/index.en-US.md
index 17afe348b6b7..ec4d6c907dc0 100644
--- a/components/select/index.en-US.md
+++ b/components/select/index.en-US.md
@@ -85,6 +85,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | optionFilterProp | Which prop value of option will be used for filter if filterOption is true. If `options` is set, it should be set to `label` | string | `value` |  |
 | optionLabelProp | Which prop value of option will render as content of select. [Example](https://codesandbox.io/s/antd-reproduction-template-tk678) | string | `children` |  |
 | options | Select options. Will get better perf than jsx definition | { label, value }\[] | - |  |
+| optionRender | Customize the rendering dropdown options | (option: FlattenOptionData\<BaseOptionType\> , info: { index: number }) => React.ReactNode | - | 5.11.0 |
 | placeholder | Placeholder of select | ReactNode | - |  |
 | placement | The position where the selection box pops up | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft |  |
 | removeIcon | The custom remove icon | ReactNode | - |  |
diff --git a/components/select/index.tsx b/components/select/index.tsx
index f4e899230cce..b22b0be14580 100755
--- a/components/select/index.tsx
+++ b/components/select/index.tsx
@@ -7,6 +7,7 @@ import type { OptionProps } from 'rc-select/lib/Option';
 import type { BaseOptionType, DefaultOptionType } from 'rc-select/lib/Select';
 import omit from 'rc-util/lib/omit';
 
+import { useZIndex } from '../_util/hooks/useZIndex';
 import type { SelectCommonPlacement } from '../_util/motion';
 import { getTransitionName } from '../_util/motion';
 import genPurePanel from '../_util/PurePanel';
@@ -22,8 +23,8 @@ import { FormItemInputContext } from '../form/context';
 import { useCompactItemContext } from '../space/Compact';
 import useStyle from './style';
 import useBuiltinPlacements from './useBuiltinPlacements';
-import useShowArrow from './useShowArrow';
 import useIcons from './useIcons';
+import useShowArrow from './useShowArrow';
 
 type RawValue = string | number;
 
@@ -240,6 +241,9 @@ const InternalSelect = <
     );
   }
 
+  // ====================== zIndex =========================
+  const [zIndex] = useZIndex('SelectLike', props.dropdownStyle?.zIndex as number);
+
   // ====================== Render =======================
   return wrapSSR(
     <RcSelect<ValueType, OptionType>
@@ -266,6 +270,10 @@ const InternalSelect = <
       getPopupContainer={getPopupContainer || getContextPopupContainer}
       dropdownClassName={rcSelectRtlDropdownClassName}
       disabled={mergedDisabled}
+      dropdownStyle={{
+        ...props?.dropdownStyle,
+        zIndex,
+      }}
     />,
   );
 };
diff --git a/components/select/index.zh-CN.md b/components/select/index.zh-CN.md
index 587d6e871990..eb0965941c41 100644
--- a/components/select/index.zh-CN.md
+++ b/components/select/index.zh-CN.md
@@ -86,6 +86,7 @@ demo:
 | optionFilterProp | 搜索时过滤对应的 `option` 属性，如设置为 `children` 表示对内嵌内容进行搜索。若通过 `options` 属性配置选项内容，建议设置 `optionFilterProp="label"` 来对内容进行搜索。 | string | `value` |  |
 | optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value`。[示例](https://codesandbox.io/s/antd-reproduction-template-tk678) | string | `children` |  |
 | options | 数据化配置选项内容，相比 jsx 定义会获得更好的渲染性能 | { label, value }\[] | - |  |
+| optionRender | 自定义渲染下拉选项 | (option: FlattenOptionData\<BaseOptionType\> , info: { index: number }) => React.ReactNode | - | 5.11.0 |
 | placeholder | 选择框默认文本 | string | - |  |
 | placement | 选择框弹出的位置 | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft |  |
 | removeIcon | 自定义的多选框清除图标 | ReactNode | - |  |
diff --git a/components/select/style/single.tsx b/components/select/style/single.tsx
index 93ce26866a60..1bbd4da81523 100644
--- a/components/select/style/single.tsx
+++ b/components/select/style/single.tsx
@@ -33,6 +33,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
 
           '&-input': {
             width: '100%',
+            WebkitAppearance: 'textfield',
           },
         },
 
diff --git a/components/slider/__tests__/__snapshots__/index.test.tsx.snap b/components/slider/__tests__/__snapshots__/index.test.tsx.snap
index 6a2ca2116381..abbe2a629f22 100644
--- a/components/slider/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/slider/__tests__/__snapshots__/index.test.tsx.snap
@@ -79,7 +79,7 @@ exports[`Slider should render in RTL direction 1`] = `
 
 exports[`Slider should show tooltip when hovering slider handler 1`] = `
 <div
-  class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-slider-tooltip ant-tooltip-placement-top"
+  class="ant-tooltip ant-slider-tooltip ant-tooltip-placement-top"
   style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
 >
   <div
@@ -101,7 +101,7 @@ exports[`Slider should show tooltip when hovering slider handler 1`] = `
 
 exports[`Slider should show tooltip when hovering slider handler 2`] = `
 <div
-  class="ant-tooltip ant-zoom-big-fast-leave ant-zoom-big-fast-leave-start ant-zoom-big-fast ant-slider-tooltip ant-tooltip-placement-top"
+  class="ant-tooltip ant-tooltip-hidden ant-slider-tooltip ant-tooltip-placement-top"
   style="--arrow-x: 0px; --arrow-y: 0px; left: 0px; top: -1000vh; box-sizing: border-box; bottom: 0px; pointer-events: none;"
 >
   <div
diff --git a/components/slider/__tests__/index.test.tsx b/components/slider/__tests__/index.test.tsx
index d10cdbc64902..4a601deda372 100644
--- a/components/slider/__tests__/index.test.tsx
+++ b/components/slider/__tests__/index.test.tsx
@@ -3,7 +3,7 @@ import Slider from '..';
 import focusTest from '../../../tests/shared/focusTest';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
-import { act, fireEvent, render } from '../../../tests/utils';
+import { act, fireEvent, render, waitFakeTimer } from '../../../tests/utils';
 import { resetWarned } from '../../_util/warning';
 import ConfigProvider from '../../config-provider';
 import type { TooltipProps, TooltipRef } from '../../tooltip';
@@ -37,14 +37,15 @@ describe('Slider', () => {
     jest.useRealTimers();
   });
 
-  it('should show tooltip when hovering slider handler', () => {
+  it('should show tooltip when hovering slider handler', async () => {
     const { container } = render(<Slider defaultValue={30} />);
 
     fireEvent.mouseEnter(container.querySelector('.ant-slider-handle')!);
+    await waitFakeTimer();
     expect(document.querySelector('.ant-tooltip')).toMatchSnapshot();
 
     fireEvent.mouseLeave(container.querySelector('.ant-slider-handle')!);
-
+    await waitFakeTimer();
     expect(document.querySelector('.ant-tooltip')).toMatchSnapshot();
   });
 
diff --git a/components/slider/index.tsx b/components/slider/index.tsx
index 1d55c56f7d6b..c1ed02cca31c 100644
--- a/components/slider/index.tsx
+++ b/components/slider/index.tsx
@@ -25,15 +25,14 @@ export type HandleGeneratorFn = (config: {
   info: HandleGeneratorInfo;
 }) => React.ReactElement;
 
-export type Formatter = (value?: number) => React.ReactNode;
-const defaultFormatter: Formatter = (val) => (typeof val === 'number' ? val.toString() : '');
+export type Formatter = ((value?: number) => React.ReactNode) | null;
 
 export interface SliderTooltipProps extends AbstractTooltipProps {
   prefixCls?: string;
   open?: boolean;
   placement?: TooltipPlacement;
   getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
-  formatter?: null | Formatter;
+  formatter?: Formatter;
   autoAdjustOverflow?: boolean;
 }
 
@@ -58,12 +57,14 @@ export interface SliderBaseProps {
 
   styles?: RcSliderProps['styles'];
   classNames?: RcSliderProps['classNames'];
+  onFocus?: React.FocusEventHandler<HTMLDivElement>;
+  onBlur?: React.FocusEventHandler<HTMLDivElement>;
 
   // Deprecated
   /** @deprecated `tooltipPrefixCls` is deprecated. Please use `tooltip.prefixCls` instead. */
   tooltipPrefixCls?: string;
   /** @deprecated `tipFormatter` is deprecated. Please use `tooltip.formatter` instead. */
-  tipFormatter?: null | ((value?: number) => React.ReactNode);
+  tipFormatter?: Formatter;
   /** @deprecated `tooltipVisible` is deprecated. Please use `tooltip.open` instead. */
   tooltipVisible?: boolean;
   /**
@@ -109,6 +110,16 @@ interface SliderRange {
 
 export type Opens = { [index: number]: boolean };
 
+function getTipFormatter(tipFormatter?: Formatter, legacyTipFormatter?: Formatter) {
+  if (tipFormatter || tipFormatter === null) {
+    return tipFormatter;
+  }
+  if (legacyTipFormatter || legacyTipFormatter === null) {
+    return legacyTipFormatter;
+  }
+  return (val?: number) => (typeof val === 'number' ? val.toString() : '');
+}
+
 const Slider = React.forwardRef<SliderRef, SliderSingleProps | SliderRangeProps>((props, ref) => {
   const {
     prefixCls: customizePrefixCls,
@@ -204,14 +215,7 @@ const Slider = React.forwardRef<SliderRef, SliderSingleProps | SliderRangeProps>
       formatter: tipFormatter,
     } = tooltipProps;
 
-    let mergedTipFormatter;
-    if (tipFormatter || tipFormatter === null) {
-      mergedTipFormatter = tipFormatter;
-    } else if (legacyTipFormatter || legacyTipFormatter === null) {
-      mergedTipFormatter = legacyTipFormatter;
-    } else {
-      mergedTipFormatter = defaultFormatter;
-    }
+    const mergedTipFormatter = getTipFormatter(tipFormatter, legacyTipFormatter);
 
     const isTipFormatter = mergedTipFormatter ? opens[index] || dragging : false;
     const open =
@@ -221,17 +225,20 @@ const Slider = React.forwardRef<SliderRef, SliderSingleProps | SliderRangeProps>
       ...node.props,
       onMouseEnter: () => toggleTooltipOpen(index, true),
       onMouseLeave: () => toggleTooltipOpen(index, false),
+      onFocus: (e: React.FocusEvent<HTMLDivElement>) => {
+        toggleTooltipOpen(index, true);
+        restProps.onFocus?.(e);
+      },
+      onBlur: (e: React.FocusEvent<HTMLDivElement>) => {
+        toggleTooltipOpen(index, false);
+        restProps.onBlur?.(e);
+      },
     };
 
-    const tooltipPrefixCls = getPrefixCls(
-      'tooltip',
-      customizeTooltipPrefixCls ?? legacyTooltipPrefixCls,
-    );
-
     return (
       <SliderTooltip
         {...tooltipProps}
-        prefixCls={tooltipPrefixCls}
+        prefixCls={getPrefixCls('tooltip', customizeTooltipPrefixCls ?? legacyTooltipPrefixCls)}
         title={mergedTipFormatter ? mergedTipFormatter(info.value) : ''}
         open={open}
         placement={getTooltipPlacement(tooltipPlacement ?? legacyTooltipPlacement, vertical)}
diff --git a/components/slider/style/index.tsx b/components/slider/style/index.tsx
index d178479f4546..e189d46c0b17 100644
--- a/components/slider/style/index.tsx
+++ b/components/slider/style/index.tsx
@@ -110,8 +110,6 @@ const genBaseStyle: GenerateStyle<SliderToken> = (token) => {
       },
 
       [`${componentCls}-track-draggable`]: {
-        // base on https://github.com/ant-design/ant-design/pull/42825/files#diff-9b9560a611e7ed0e6ef24ca9f1faff1e8c816d3f35ed6a1f73c36d2b42790aba
-        // zIndex: 1,
         boxSizing: 'content-box',
         backgroundClip: 'content-box',
         border: 'solid rgba(0,0,0,0)',
@@ -145,10 +143,6 @@ const genBaseStyle: GenerateStyle<SliderToken> = (token) => {
         height: token.handleSize,
         outline: 'none',
 
-        [`${componentCls}-dragging`]: {
-          zIndex: 1,
-        },
-
         // 扩大选区
         '&::before': {
           content: '""',
diff --git a/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
index 7e31a01c59bb..ddac8b825d5c 100644
--- a/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -10721,7 +10721,7 @@ exports[`renders components/space/demo/compact-debug.tsx extend context correctl
               </div>
               <div
                 class="ant-picker-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-picker-dropdown-placement-bottomLeft"
-                style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+                style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150;"
               >
                 <div
                   class="ant-picker-panel-container"
@@ -11388,7 +11388,7 @@ exports[`renders components/space/demo/compact-debug.tsx extend context correctl
                 </div>
                 <div
                   class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-empty ant-select-dropdown-placement-bottomLeft"
-                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150;"
                 >
                   <div>
                     <div
diff --git a/components/spin/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/spin/__tests__/__snapshots__/demo-extend.test.ts.snap
index 294bf31f2edd..57f99bb5007f 100644
--- a/components/spin/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/spin/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -118,6 +118,43 @@ Array [
 
 exports[`renders components/spin/demo/delayAndDebounce.tsx extend context correctly 2`] = `[]`;
 
+exports[`renders components/spin/demo/fullscreen.tsx extend context correctly 1`] = `
+Array [
+  <button
+    class="ant-btn ant-btn-default"
+    type="button"
+  >
+    <span>
+      Show fullscreen for 3s
+    </span>
+  </button>,
+  <div
+    aria-busy="false"
+    aria-live="polite"
+    class="ant-spin ant-spin-fullscreen"
+  >
+    <span
+      class="ant-spin-dot ant-spin-dot-spin"
+    >
+      <i
+        class="ant-spin-dot-item"
+      />
+      <i
+        class="ant-spin-dot-item"
+      />
+      <i
+        class="ant-spin-dot-item"
+      />
+      <i
+        class="ant-spin-dot-item"
+      />
+    </span>
+  </div>,
+]
+`;
+
+exports[`renders components/spin/demo/fullscreen.tsx extend context correctly 2`] = `[]`;
+
 exports[`renders components/spin/demo/inside.tsx extend context correctly 1`] = `
 <div
   class="example"
diff --git a/components/spin/__tests__/__snapshots__/demo.test.ts.snap b/components/spin/__tests__/__snapshots__/demo.test.ts.snap
index cfc03cf0e739..e22ba0bac194 100644
--- a/components/spin/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/spin/__tests__/__snapshots__/demo.test.ts.snap
@@ -112,6 +112,41 @@ Array [
 ]
 `;
 
+exports[`renders components/spin/demo/fullscreen.tsx correctly 1`] = `
+Array [
+  <button
+    class="ant-btn ant-btn-default"
+    type="button"
+  >
+    <span>
+      Show fullscreen for 3s
+    </span>
+  </button>,
+  <div
+    aria-busy="false"
+    aria-live="polite"
+    class="ant-spin ant-spin-fullscreen"
+  >
+    <span
+      class="ant-spin-dot ant-spin-dot-spin"
+    >
+      <i
+        class="ant-spin-dot-item"
+      />
+      <i
+        class="ant-spin-dot-item"
+      />
+      <i
+        class="ant-spin-dot-item"
+      />
+      <i
+        class="ant-spin-dot-item"
+      />
+    </span>
+  </div>,
+]
+`;
+
 exports[`renders components/spin/demo/inside.tsx correctly 1`] = `
 <div
   class="example"
diff --git a/components/spin/__tests__/index.test.tsx b/components/spin/__tests__/index.test.tsx
index 802f270c9052..a4ac897e2f00 100644
--- a/components/spin/__tests__/index.test.tsx
+++ b/components/spin/__tests__/index.test.tsx
@@ -1,5 +1,6 @@
-import { render } from '@testing-library/react';
 import React from 'react';
+import { render } from '@testing-library/react';
+
 import Spin from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
@@ -19,6 +20,15 @@ describe('Spin', () => {
     expect(container.querySelector<HTMLElement>('.ant-spin')?.style.background).toBe('red');
   });
 
+  it('should not apply nested styles when full screen', () => {
+    const { container } = render(
+      <Spin fullscreen>
+        <div>content</div>
+      </Spin>,
+    );
+    expect(container.querySelector<HTMLElement>('ant-spin-nested-loading')).toBeNull();
+  });
+
   it("should render custom indicator when it's set", () => {
     const customIndicator = <div className="custom-indicator" />;
     const { asFragment } = render(<Spin indicator={customIndicator} />);
diff --git a/components/spin/demo/fullscreen.md b/components/spin/demo/fullscreen.md
new file mode 100644
index 000000000000..ead4a9a5d691
--- /dev/null
+++ b/components/spin/demo/fullscreen.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+`fullscreen` 属性非常适合创建流畅的页面加载器。它添加了半透明覆盖层，并在其中心放置了一个旋转加载符号。
+
+## en-US
+
+The `fullscreen` mode is perfect for creating page loaders. It adds a dimmed overlay with a centered spinner.
diff --git a/components/spin/demo/fullscreen.tsx b/components/spin/demo/fullscreen.tsx
new file mode 100644
index 000000000000..32dacea9dcaa
--- /dev/null
+++ b/components/spin/demo/fullscreen.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { Button, Spin } from 'antd';
+
+const App: React.FC = () => {
+  const [spinning, setSpinning] = React.useState<boolean>(false);
+
+  const showLoader = () => {
+    setSpinning(true);
+    setTimeout(() => {
+      setSpinning(false);
+    }, 3000);
+  };
+
+  return (
+    <>
+      <Button onClick={showLoader}>Show fullscreen for 3s</Button>
+      <Spin spinning={spinning} fullscreen />
+    </>
+  );
+};
+
+export default App;
diff --git a/components/spin/index.en-US.md b/components/spin/index.en-US.md
index d274827c7c9d..22b2d6c22297 100644
--- a/components/spin/index.en-US.md
+++ b/components/spin/index.en-US.md
@@ -17,26 +17,28 @@ When part of the page is waiting for asynchronous data or during a rendering pro
 ## Examples
 
 <!-- prettier-ignore -->
-<code src="./demo/basic.tsx">basic Usage</code>
+<code src="./demo/basic.tsx">Basic Usage</code>
 <code src="./demo/size.tsx">Size</code>
 <code src="./demo/inside.tsx">Inside a container</code>
 <code src="./demo/nested.tsx">Embedded mode</code>
 <code src="./demo/tip.tsx">Customized description</code>
-<code src="./demo/delayAndDebounce.tsx">delay</code>
+<code src="./demo/delayAndDebounce.tsx">Delay</code>
 <code src="./demo/custom-indicator.tsx">Custom spinning indicator</code>
+<code src="./demo/fullscreen.tsx">Fullscreen</code>
 
 ## API
 
 Common props ref：[Common props](/docs/react/common-props)
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
 | delay | Specifies a delay in milliseconds for loading state (prevent flush) | number (milliseconds) | - |
 | indicator | React node of the spinning indicator | ReactNode | - |
 | size | The size of Spin, options: `small`, `default` and `large` | string | `default` |
 | spinning | Whether Spin is visible | boolean | true |
 | tip | Customize description content when Spin has children | ReactNode | - |
 | wrapperClassName | The className of wrapper when Spin has children | string | - |
+| fullscreen | Display a backdrop with the `Spin` component | boolean | false | 5.11.0 |
 
 ### Static Method
 
diff --git a/components/spin/index.tsx b/components/spin/index.tsx
index b7160e2e666d..53d5e1da020a 100644
--- a/components/spin/index.tsx
+++ b/components/spin/index.tsx
@@ -25,6 +25,7 @@ export interface SpinProps {
   wrapperClassName?: string;
   indicator?: SpinIndicator;
   children?: React.ReactNode;
+  fullscreen?: boolean;
 }
 
 export interface SpinClassProps extends SpinProps {
@@ -87,6 +88,7 @@ const Spin: React.FC<SpinClassProps> = (props) => {
     style,
     children,
     hashId,
+    fullscreen,
     ...restProps
   } = props;
 
@@ -108,7 +110,10 @@ const Spin: React.FC<SpinClassProps> = (props) => {
     setSpinning(false);
   }, [delay, customSpinning]);
 
-  const isNestedPattern = React.useMemo<boolean>(() => typeof children !== 'undefined', [children]);
+  const isNestedPattern = React.useMemo<boolean>(
+    () => typeof children !== 'undefined' && !fullscreen,
+    [children, fullscreen],
+  );
 
   if (process.env.NODE_ENV !== 'production') {
     const warning = devUseWarning('Spin');
@@ -126,6 +131,8 @@ const Spin: React.FC<SpinClassProps> = (props) => {
       [`${prefixCls}-lg`]: size === 'large',
       [`${prefixCls}-spinning`]: spinning,
       [`${prefixCls}-show-text`]: !!tip,
+      [`${prefixCls}-fullscreen`]: fullscreen,
+      [`${prefixCls}-fullscreen-show`]: fullscreen && spinning,
       [`${prefixCls}-rtl`]: direction === 'rtl',
     },
     className,
@@ -151,7 +158,9 @@ const Spin: React.FC<SpinClassProps> = (props) => {
       aria-busy={spinning}
     >
       {renderIndicator(prefixCls, props)}
-      {tip && isNestedPattern ? <div className={`${prefixCls}-text`}>{tip}</div> : null}
+      {tip && (isNestedPattern || fullscreen) ? (
+        <div className={`${prefixCls}-text`}>{tip}</div>
+      ) : null}
     </div>
   );
 
diff --git a/components/spin/index.zh-CN.md b/components/spin/index.zh-CN.md
index ad3f977fca92..c482b3af3eef 100644
--- a/components/spin/index.zh-CN.md
+++ b/components/spin/index.zh-CN.md
@@ -25,19 +25,21 @@ demo:
 <code src="./demo/tip.tsx">自定义描述文案</code>
 <code src="./demo/delayAndDebounce.tsx">延迟</code>
 <code src="./demo/custom-indicator.tsx">自定义指示符</code>
+<code src="./demo/fullscreen.tsx">全屏</code>
 
 ## API
 
 通用属性参考：[通用属性](/docs/react/common-props)
 
-| 参数             | 说明                                         | 类型          | 默认值    |
-| ---------------- | -------------------------------------------- | ------------- | --------- |
-| delay            | 延迟显示加载效果的时间（防止闪烁）           | number (毫秒) | -         |
-| indicator        | 加载指示符                                   | ReactNode     | -         |
-| size             | 组件大小，可选值为 `small` `default` `large` | string        | `default` |
-| spinning         | 是否为加载中状态                             | boolean       | true      |
-| tip              | 当作为包裹元素时，可以自定义描述文案         | ReactNode     | -         |
-| wrapperClassName | 包装器的类属性                               | string        | -         |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| delay | 延迟显示加载效果的时间（防止闪烁） | number (毫秒) | - |
+| indicator | 加载指示符 | ReactNode | - |
+| size | 组件大小，可选值为 `small` `default` `large` | string | `default` |
+| spinning | 是否为加载中状态 | boolean | true |
+| tip | 当作为包裹元素时，可以自定义描述文案 | ReactNode | - |
+| wrapperClassName | 包装器的类属性 | string | - |
+| fullscreen | 显示带有 `Spin` 组件的背景 | boolean | false | 5.11.0 |
 
 ### 静态方法
 
diff --git a/components/spin/style/index.tsx b/components/spin/style/index.ts
similarity index 87%
rename from components/spin/style/index.tsx
rename to components/spin/style/index.ts
index 2ee6ddd5bde0..cbd61d563c2a 100644
--- a/components/spin/style/index.tsx
+++ b/components/spin/style/index.ts
@@ -1,5 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import { Keyframes } from '@ant-design/cssinjs';
+
 import { resetComponent } from '../../style';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
@@ -39,6 +40,8 @@ const antRotate = new Keyframes('antRotate', {
   to: { transform: 'rotate(405deg)' },
 });
 
+const dotPadding = (token: SpinToken) => (token.dotSize - token.fontSize) / 2 + 2;
+
 const genSpinStyle: GenerateStyle<SpinToken> = (token: SpinToken): CSSObject => ({
   [`${token.componentCls}`]: {
     ...resetComponent(token),
@@ -57,6 +60,37 @@ const genSpinStyle: GenerateStyle<SpinToken> = (token: SpinToken): CSSObject =>
       opacity: 1,
     },
 
+    [`${token.componentCls}-text`]: {
+      fontSize: token.fontSize,
+      paddingTop: dotPadding(token),
+    },
+    '&-fullscreen': {
+      position: 'fixed',
+      width: '100vw',
+      height: '100vh',
+      backgroundColor: token.colorBgMask,
+      zIndex: token.zIndexPopupBase,
+      inset: 0,
+      display: 'flex',
+      alignItems: 'center',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      pointerEvents: 'none',
+      opacity: 0,
+      visibility: 'hidden',
+      transition: `all ${token.motionDurationMid}`,
+      '&-show': {
+        opacity: 1,
+        visibility: 'visible',
+      },
+      [`${token.componentCls}-dot ${token.componentCls}-dot-item`]: {
+        backgroundColor: token.colorWhite,
+      },
+      [`${token.componentCls}-text`]: {
+        color: token.colorTextLightSolid,
+      },
+    },
+
     '&-nested-loading': {
       position: 'relative',
       [`> div > ${token.componentCls}`]: {
@@ -80,9 +114,7 @@ const genSpinStyle: GenerateStyle<SpinToken> = (token: SpinToken): CSSObject =>
           position: 'absolute',
           top: '50%',
           width: '100%',
-          paddingTop: (token.dotSize - token.fontSize) / 2 + 2,
           textShadow: `0 1px 2px ${token.colorBgContainer}`, // FIXME: shadow
-          fontSize: token.fontSize,
         },
 
         [`&${token.componentCls}-show-text ${token.componentCls}-dot`]: {
diff --git a/components/switch/__tests__/index.test.tsx b/components/switch/__tests__/index.test.tsx
index 070777c63f9e..a14f18c89e10 100644
--- a/components/switch/__tests__/index.test.tsx
+++ b/components/switch/__tests__/index.test.tsx
@@ -44,4 +44,8 @@ describe('Switch', () => {
     );
     errorSpy.mockRestore();
   });
+
+  it('have static property for type detecting', () => {
+    expect(Switch.__ANT_SWITCH).toBeTruthy();
+  });
 });
diff --git a/components/table/InternalTable.tsx b/components/table/InternalTable.tsx
index 4c280df443a5..843c50e6f057 100644
--- a/components/table/InternalTable.tsx
+++ b/components/table/InternalTable.tsx
@@ -1,9 +1,14 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import { INTERNAL_HOOKS, type TableProps as RcTableProps } from 'rc-table';
+import {
+  INTERNAL_HOOKS,
+  type Reference as RcReference,
+  type TableProps as RcTableProps,
+} from 'rc-table';
 import { convertChildrenToColumns } from 'rc-table/lib/hooks/useColumns';
 import omit from 'rc-util/lib/omit';
 
+import useProxyImperativeHandle from '../_util/hooks/useProxyImperativeHandle';
 import type { Breakpoint } from '../_util/responsiveObserver';
 import scrollTo from '../_util/scrollTo';
 import type { AnyObject } from '../_util/type';
@@ -222,6 +227,15 @@ const InternalTable = <RecordType extends AnyObject = AnyObject>(
   // ============================ Width =============================
   const getContainerWidth = useContainerWidth(prefixCls);
 
+  // ============================= Refs =============================
+  const rootRef = React.useRef<HTMLDivElement>(null);
+  const tblRef = React.useRef<RcReference>(null);
+
+  useProxyImperativeHandle(ref, () => ({
+    ...tblRef.current!,
+    nativeElement: rootRef.current!,
+  }));
+
   // ============================ RowKey ============================
   const getRowKey = React.useMemo<GetRowKey<RecordType>>(() => {
     if (typeof rowKey === 'function') {
@@ -571,12 +585,13 @@ const InternalTable = <RecordType extends AnyObject = AnyObject>(
   }
 
   return wrapSSR(
-    <div ref={ref} className={wrapperClassNames} style={mergedStyle}>
+    <div ref={rootRef} className={wrapperClassNames} style={mergedStyle}>
       <Spin spinning={false} {...spinProps}>
         {topPaginationNode}
         <TableComponent
           {...virtualProps}
           {...tableProps}
+          ref={tblRef}
           columns={mergedColumns as RcTableProps<RecordType>['columns']}
           direction={direction}
           expandable={mergedExpandable}
diff --git a/components/table/Table.tsx b/components/table/Table.tsx
index 12a136a95541..f708d72eae2f 100644
--- a/components/table/Table.tsx
+++ b/components/table/Table.tsx
@@ -1,10 +1,9 @@
-import { EXPAND_COLUMN, Summary } from 'rc-table';
 import * as React from 'react';
+import { EXPAND_COLUMN, Summary, type Reference } from 'rc-table';
+
 import type { AnyObject } from '../_util/type';
 import Column from './Column';
 import ColumnGroup from './ColumnGroup';
-import type { TableProps } from './InternalTable';
-import InternalTable from './InternalTable';
 import {
   SELECTION_ALL,
   SELECTION_COLUMN,
@@ -12,10 +11,12 @@ import {
   SELECTION_NONE,
 } from './hooks/useSelection';
 import type { RefTable } from './interface';
+import type { TableProps } from './InternalTable';
+import InternalTable from './InternalTable';
 
 const Table = <RecordType extends AnyObject = AnyObject>(
   props: TableProps<RecordType>,
-  ref: React.Ref<HTMLDivElement>,
+  ref: React.Ref<Reference>,
 ) => {
   const renderTimesRef = React.useRef<number>(0);
   renderTimesRef.current += 1;
diff --git a/components/table/__tests__/Table.IE.test.tsx b/components/table/__tests__/Table.IE.test.tsx
new file mode 100644
index 000000000000..85d3d5211562
--- /dev/null
+++ b/components/table/__tests__/Table.IE.test.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+import type { TableRef } from '..';
+import Table from '..';
+import { render } from '../../../tests/utils';
+
+describe('Table.IE', () => {
+  beforeAll(() => {
+    window.Proxy = undefined as any;
+    global.Proxy = undefined as any;
+  });
+
+  it('support reference', () => {
+    const tblRef = React.createRef<TableRef>();
+    const { container } = render(<Table ref={tblRef} />);
+
+    const wrapDom = container.querySelector('.ant-table-wrapper')!;
+
+    expect(tblRef.current).toBe(wrapDom);
+    expect(tblRef.current?.nativeElement).toBe(wrapDom);
+  });
+});
diff --git a/components/table/__tests__/Table.rowSelection.test.tsx b/components/table/__tests__/Table.rowSelection.test.tsx
index 19abf4e2a537..7288e7132e17 100644
--- a/components/table/__tests__/Table.rowSelection.test.tsx
+++ b/components/table/__tests__/Table.rowSelection.test.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
+
 import type { TableProps } from '..';
 import Table from '..';
-import { act, fireEvent, render } from '../../../tests/utils';
 import { resetWarned } from '../../_util/warning';
+import { act, fireEvent, render } from '../../../tests/utils';
 import ConfigProvider from '../../config-provider';
 import type { TableRowSelection } from '../interface';
 
@@ -293,7 +294,45 @@ describe('Table.rowSelection', () => {
     ]);
   });
 
-  it('reset last select key after performing select and bulk operations', async () => {
+  it('reset last select key after deselect', async () => {
+    jest.useFakeTimers();
+    const onChange = jest.fn();
+
+    const { container } = render(
+      createTable({
+        checkbox: true,
+        rowSelection: {
+          selections: [Table.SELECTION_NONE],
+          onChange: (keys) => onChange(keys),
+        },
+      } as TableProps<any>),
+    );
+
+    const last = () => {
+      const elements = container.querySelectorAll('td input');
+      return elements[elements.length - 1];
+    };
+
+    const first = () => {
+      const elements = container.querySelectorAll('td input');
+      return elements[0];
+    };
+
+    fireEvent.click(first());
+    expect(onChange).toHaveBeenLastCalledWith([0]);
+    fireEvent.click(last());
+    expect(onChange).toHaveBeenLastCalledWith([0, 3]);
+    fireEvent.click(last());
+    expect(onChange).toHaveBeenLastCalledWith([0]);
+    fireEvent.click(last(), {
+      shiftKey: true,
+    });
+    expect(onChange).toHaveBeenLastCalledWith([0, 3]);
+
+    jest.useRealTimers();
+  });
+
+  it('reset last select key after bulk operations', async () => {
     jest.useFakeTimers();
     const onChange = jest.fn();
 
@@ -340,16 +379,6 @@ describe('Table.rowSelection', () => {
     });
     expect(onChange).toHaveBeenLastCalledWith([0]);
 
-    // Reset last select key when deselect
-    fireEvent.click(last());
-    expect(onChange).toHaveBeenLastCalledWith([0, 3]);
-    fireEvent.click(first());
-    expect(onChange).toHaveBeenLastCalledWith([3]);
-    fireEvent.click(first(), {
-      shiftKey: true,
-    });
-    expect(onChange).toHaveBeenLastCalledWith([3, 0]);
-
     // Reset last select key when bulk operations
     fireEvent.mouseEnter(container.querySelector('.ant-dropdown-trigger')!);
     act(() => {
@@ -860,6 +889,33 @@ describe('Table.rowSelection', () => {
     expect(container.querySelector('thead tr th')?.textContent).toBe('单选');
   });
 
+  it('columnTitle for rowSelection to be renderProps', () => {
+    const { container } = render(
+      <Table
+        columns={columns}
+        dataSource={data}
+        rowSelection={{
+          columnTitle: (originalNode) =>
+            React.cloneElement(originalNode as any, {
+              'data-testid': 'selection-checkbox',
+              children: '多选',
+            }),
+        }}
+      />,
+    );
+
+    expect(container.querySelector('thead tr th')?.textContent).toBe('多选');
+    expect(container.querySelector('thead tr th input')?.getAttribute('data-testid')).toBe(
+      'selection-checkbox',
+    );
+
+    fireEvent.click(container.querySelector('thead tr th input')!);
+    container.querySelectorAll('.ant-checkbox').forEach((checkbox) => {
+      expect(checkbox.querySelector('input')?.checked).toBe(true);
+      expect(checkbox.className.includes('ant-checkbox-indeterminate')).toBe(false);
+    });
+  });
+
   // https://github.com/ant-design/ant-design/issues/11384
   it('should keep item even if in filter', () => {
     const filterColumns = [
diff --git a/components/table/__tests__/Table.test.tsx b/components/table/__tests__/Table.test.tsx
index 65d2787a8f16..31d5d2b7b8e4 100644
--- a/components/table/__tests__/Table.test.tsx
+++ b/components/table/__tests__/Table.test.tsx
@@ -1,6 +1,7 @@
 import React, { useRef } from 'react';
 import { ConfigProvider } from 'antd';
-import type { TableProps } from '..';
+
+import type { TableProps, TableRef } from '..';
 import Table from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
@@ -279,7 +280,7 @@ describe('Table', () => {
       },
     ];
     const Wrapper: React.FC = () => {
-      const ref = React.useRef<HTMLDivElement>(null);
+      const ref = React.useRef<any>(null);
       return <Table ref={ref} columns={columns} />;
     };
     render(<Wrapper />);
@@ -401,4 +402,15 @@ describe('Table', () => {
     await waitFakeTimer();
     expect(container.querySelector('.ant-dropdown')).toBeTruthy();
   });
+
+  it('support reference', () => {
+    const tblRef = React.createRef<TableRef>();
+    const { container } = render(<Table ref={tblRef} />);
+
+    const wrapDom = container.querySelector('.ant-table-wrapper')!;
+
+    expect(tblRef.current).toHaveClass('ant-table-wrapper');
+    expect(tblRef.current?.nativeElement).toBe(wrapDom);
+    expect(tblRef.current?.scrollTo instanceof Function).toBeTruthy();
+  });
 });
diff --git a/components/table/demo/virtual-list.tsx b/components/table/demo/virtual-list.tsx
index c4b88e57d6e6..6fd1190a9ab7 100644
--- a/components/table/demo/virtual-list.tsx
+++ b/components/table/demo/virtual-list.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Segmented, Space, Switch, Table, Typography } from 'antd';
+import { Button, Segmented, Space, Switch, Table, Typography } from 'antd';
 import type { TableProps } from 'antd';
 
 interface RecordType {
@@ -114,6 +114,7 @@ const App = () => {
   const [empty, setEmpty] = React.useState(false);
   const [count, setCount] = React.useState(10000);
 
+  const tblRef: Parameters<typeof Table>[0]['ref'] = React.useRef(null);
   const data = React.useMemo(() => getData(count), [count]);
 
   const mergedColumns = React.useMemo<typeof fixedColumns>(() => {
@@ -186,6 +187,16 @@ const App = () => {
               },
             ]}
           />
+
+          {data.length >= 999 && (
+            <Button
+              onClick={() => {
+                tblRef.current?.scrollTo({ index: 999 });
+              }}
+            >
+              Scroll To index 999
+            </Button>
+          )}
         </Space>
 
         <Table
@@ -196,6 +207,7 @@ const App = () => {
           rowKey="id"
           dataSource={empty ? [] : data}
           pagination={false}
+          ref={tblRef}
           rowSelection={
             expanded
               ? undefined
diff --git a/components/table/hooks/useFilter/FilterDropdown.tsx b/components/table/hooks/useFilter/FilterDropdown.tsx
index a18c1badc094..5f2805325d1b 100644
--- a/components/table/hooks/useFilter/FilterDropdown.tsx
+++ b/components/table/hooks/useFilter/FilterDropdown.tsx
@@ -11,7 +11,7 @@ import Button from '../../../button';
 import type { CheckboxChangeEvent } from '../../../checkbox';
 import Checkbox from '../../../checkbox';
 import { ConfigContext } from '../../../config-provider/context';
-import Dropdown from '../../../dropdown';
+import Dropdown, { type DropdownProps } from '../../../dropdown';
 import Empty from '../../../empty';
 import type { MenuProps } from '../../../menu';
 import Menu from '../../../menu';
@@ -295,17 +295,19 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
     internalTriggerFilter(getFilteredKeysSync());
   };
 
-  const onVisibleChange = (newVisible: boolean) => {
-    if (newVisible && propFilteredKeys !== undefined) {
-      // Sync filteredKeys on appear in controlled mode (propFilteredKeys !== undefined)
-      setFilteredKeysSync(wrapStringListType(propFilteredKeys));
-    }
+  const onVisibleChange: DropdownProps['onOpenChange'] = (newVisible, info) => {
+    if (info.source === 'trigger') {
+      if (newVisible && propFilteredKeys !== undefined) {
+        // Sync filteredKeys on appear in controlled mode (propFilteredKeys !== undefined)
+        setFilteredKeysSync(wrapStringListType(propFilteredKeys));
+      }
 
-    triggerVisible(newVisible);
+      triggerVisible(newVisible);
 
-    // Default will filter when closed
-    if (!newVisible && !column.filterDropdown) {
-      onConfirm();
+      // Default will filter when closed
+      if (!newVisible && !column.filterDropdown) {
+        onConfirm();
+      }
     }
   };
 
diff --git a/components/table/hooks/useSelection.tsx b/components/table/hooks/useSelection.tsx
index bc7630b61cb5..fdedc3586570 100644
--- a/components/table/hooks/useSelection.tsx
+++ b/components/table/hooks/useSelection.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useMemo } from 'react';
 import DownOutlined from '@ant-design/icons/DownOutlined';
 import classNames from 'classnames';
 import { INTERNAL_COL_DEFINE } from 'rc-table';
@@ -10,6 +10,7 @@ import { conductCheck } from 'rc-tree/lib/utils/conductUtil';
 import { convertDataToEntities } from 'rc-tree/lib/utils/treeUtil';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 
+import useMultipleSelect from '../../_util/hooks/useMultipleSelect';
 import type { AnyObject } from '../../_util/type';
 import { devUseWarning } from '../../_util/warning';
 import type { CheckboxProps } from '../../checkbox';
@@ -109,6 +110,11 @@ const useSelection = <RecordType extends AnyObject = AnyObject>(
 
   const warning = devUseWarning('Table');
 
+  // ========================= MultipleSelect =========================
+  const [multipleSelect, updatePrevSelectedIndex] = useMultipleSelect<React.Key, React.Key>(
+    (item) => item,
+  );
+
   // ========================= Keys =========================
   const [mergedSelectedKeys, setMergedSelectedKeys] = useMergedState(
     selectedRowKeys || defaultSelectedRowKeys || EMPTY_LIST,
@@ -217,9 +223,6 @@ const useSelection = <RecordType extends AnyObject = AnyObject>(
     [derivedHalfSelectedKeys, selectionType],
   );
 
-  // Save last selected key to enable range selection
-  const [lastSelectedKey, setLastSelectedKey] = useState<Key | null>(null);
-
   // Reset if rowSelection reset
   React.useEffect(() => {
     if (!rowSelection) {
@@ -350,7 +353,7 @@ const useSelection = <RecordType extends AnyObject = AnyObject>(
         ...selection,
         onSelect: (...rest) => {
           selection.onSelect?.(...rest);
-          setLastSelectedKey(null);
+          updatePrevSelectedIndex(null);
         },
       }));
   }, [selections, derivedSelectedKeySet, pageData, getRowKey, onSelectInvert, setSelectedKeys]);
@@ -406,12 +409,13 @@ const useSelection = <RecordType extends AnyObject = AnyObject>(
         );
 
         setSelectedKeys(keys, 'all');
-        setLastSelectedKey(null);
+        updatePrevSelectedIndex(null);
       };
 
       // ===================== Render =====================
       // Title Cell
       let title: React.ReactNode;
+      let columnTitleCheckbox: React.ReactNode;
       if (selectionType !== 'radio') {
         let customizeSelections: React.ReactNode;
         if (mergedSelections) {
@@ -456,22 +460,26 @@ const useSelection = <RecordType extends AnyObject = AnyObject>(
         const allDisabledSomeChecked =
           allDisabled && allDisabledData.some(({ checked }) => checked);
 
+        columnTitleCheckbox = (
+          <Checkbox
+            checked={
+              !allDisabled ? !!flattedData.length && checkedCurrentAll : allDisabledAndChecked
+            }
+            indeterminate={
+              !allDisabled
+                ? !checkedCurrentAll && checkedCurrentSome
+                : !allDisabledAndChecked && allDisabledSomeChecked
+            }
+            onChange={onSelectAllChange}
+            disabled={flattedData.length === 0 || allDisabled}
+            aria-label={customizeSelections ? 'Custom selection' : 'Select all'}
+            skipGroup
+          />
+        );
+
         title = !hideSelectAll && (
           <div className={`${prefixCls}-selection`}>
-            <Checkbox
-              checked={
-                !allDisabled ? !!flattedData.length && checkedCurrentAll : allDisabledAndChecked
-              }
-              indeterminate={
-                !allDisabled
-                  ? !checkedCurrentAll && checkedCurrentSome
-                  : !allDisabledAndChecked && allDisabledSomeChecked
-              }
-              onChange={onSelectAllChange}
-              disabled={flattedData.length === 0 || allDisabled}
-              aria-label={customizeSelections ? 'Custom selection' : 'Select all'}
-              skipGroup
-            />
+            {columnTitleCheckbox}
             {customizeSelections}
           </div>
         );
@@ -532,50 +540,13 @@ const useSelection = <RecordType extends AnyObject = AnyObject>(
                 onClick={(e) => e.stopPropagation()}
                 onChange={({ nativeEvent }) => {
                   const { shiftKey } = nativeEvent;
+                  const currentSelectedIndex = recordKeys.findIndex((item) => item === key);
+                  const isMultiple = derivedSelectedKeys.some((item) => recordKeys.includes(item));
 
-                  let startIndex: number = -1;
-                  let endIndex: number = -1;
-
-                  // Get range of this
-                  if (shiftKey && checkStrictly) {
-                    const pointKeys = new Set([lastSelectedKey, key]);
-
-                    recordKeys.some((recordKey, recordIndex) => {
-                      if (pointKeys.has(recordKey)) {
-                        if (startIndex === -1) {
-                          startIndex = recordIndex;
-                        } else {
-                          endIndex = recordIndex;
-                          return true;
-                        }
-                      }
-
-                      return false;
-                    });
-                  }
-
-                  if (endIndex !== -1 && startIndex !== endIndex && checkStrictly) {
-                    // Batch update selections
-                    const rangeKeys = recordKeys.slice(startIndex, endIndex + 1);
-                    const changedKeys: Key[] = [];
-
-                    if (checked) {
-                      rangeKeys.forEach((recordKey) => {
-                        if (keySet.has(recordKey)) {
-                          changedKeys.push(recordKey);
-                          keySet.delete(recordKey);
-                        }
-                      });
-                    } else {
-                      rangeKeys.forEach((recordKey) => {
-                        if (!keySet.has(recordKey)) {
-                          changedKeys.push(recordKey);
-                          keySet.add(recordKey);
-                        }
-                      });
-                    }
-
+                  if (shiftKey && checkStrictly && isMultiple) {
+                    const changedKeys = multipleSelect(currentSelectedIndex, recordKeys, keySet);
                     const keys = Array.from(keySet);
+
                     onSelectMultiple?.(
                       !checked,
                       keys.map((recordKey) => getRecordByKey(recordKey)),
@@ -619,9 +590,9 @@ const useSelection = <RecordType extends AnyObject = AnyObject>(
                   }
 
                   if (checked) {
-                    setLastSelectedKey(null);
+                    updatePrevSelectedIndex(null);
                   } else {
-                    setLastSelectedKey(key);
+                    updatePrevSelectedIndex(currentSelectedIndex);
                   }
                 }}
               />
@@ -699,6 +670,16 @@ const useSelection = <RecordType extends AnyObject = AnyObject>(
         [`${prefixCls}-selection-col-with-dropdown`]: selections && selectionType === 'checkbox',
       });
 
+      const renderColumnTitle = () => {
+        if (!rowSelection?.columnTitle) {
+          return title;
+        }
+        if (typeof rowSelection.columnTitle === 'function') {
+          return rowSelection.columnTitle(columnTitleCheckbox);
+        }
+        return rowSelection.columnTitle;
+      };
+
       // Replace with real selection column
       const selectionColumn: ColumnsType<RecordType>[0] & {
         RC_TABLE_INTERNAL_COL_DEFINE: Record<string, any>;
@@ -706,7 +687,7 @@ const useSelection = <RecordType extends AnyObject = AnyObject>(
         fixed: mergedFixed,
         width: selectionColWidth,
         className: `${prefixCls}-selection-column`,
-        title: rowSelection.columnTitle || title,
+        title: renderColumnTitle(),
         render: renderSelectionCell,
         onCell: rowSelection.onCell,
         [INTERNAL_COL_DEFINE]: { className: columnCls },
@@ -724,7 +705,6 @@ const useSelection = <RecordType extends AnyObject = AnyObject>(
       selectionColWidth,
       mergedSelections,
       expandType,
-      lastSelectedKey,
       checkboxPropsMap,
       onSelectMultiple,
       triggerSingleSelection,
diff --git a/components/table/index.en-US.md b/components/table/index.en-US.md
index d2363b0db73b..19f406f781cb 100644
--- a/components/table/index.en-US.md
+++ b/components/table/index.en-US.md
@@ -142,6 +142,13 @@ Common props ref：[Common props](/docs/react/common-props)
 | onRow | Set props on per row | function(record, index) | - |  |
 | virtual | Support virtual list | boolean | - | 5.9.0 |
 
+### Table ref
+
+| Property | Description | Type | Version |
+| --- | --- | --- | --- |
+| nativeElement | The wrap element | HTMLDivElement | 5.11.0 |
+| scrollTo | Trigger to scroll to target position. `key` match with record `rowKey` | (config: { index?: number, key?: React.Key, top?: number }) => void | 5.11.0 |
+
 #### onRow usage
 
 Same as `onRow` `onHeaderRow` `onCell` `onHeaderCell`
@@ -252,7 +259,7 @@ Properties for row selection.
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | checkStrictly | Check table row precisely; parent row and children rows are not associated | boolean | true | 4.4.0 |
-| columnTitle | Set the title of the selection column | ReactNode | - |  |
+| columnTitle | Set the title of the selection column | ReactNode \| (originalNode: ReactNode) => ReactNode | - |  |
 | columnWidth | Set the width of the selection column | string \| number | `32px` |  |
 | fixed | Fixed selection column on the left | boolean | - |  |
 | getCheckboxProps | Get Checkbox or Radio props | function(record) | - |  |
diff --git a/components/table/index.ts b/components/table/index.ts
index 36f439e0b83e..be1d74368e0b 100644
--- a/components/table/index.ts
+++ b/components/table/index.ts
@@ -3,6 +3,7 @@ import Table from './Table';
 
 export type { ColumnProps } from './Column';
 export type { ColumnGroupType, ColumnType, ColumnsType } from './interface';
+export type { Reference as TableRef } from 'rc-table';
 export type { TablePaginationConfig, TableProps };
 
 export default Table;
diff --git a/components/table/index.zh-CN.md b/components/table/index.zh-CN.md
index 7513cf9aa7ba..b52c578f9cf9 100644
--- a/components/table/index.zh-CN.md
+++ b/components/table/index.zh-CN.md
@@ -143,6 +143,13 @@ const columns = [
 | onRow | 设置行属性 | function(record, index) | - |  |
 | virtual | 支持虚拟列表 | boolean | - | 5.9.0 |
 
+### Table ref
+
+| 参数 | 说明 | 类型 | 版本 |
+| --- | --- | --- | --- |
+| nativeElement | 最外层 div 元素 | HTMLDivElement | 5.11.0 |
+| scrollTo | 滚动到目标位置（设置 `key` 时为 Record 对应的 `rowKey`） | (config: { index?: number, key?: React.Key, top?: number }) => void | 5.11.0 |
+
 #### onRow 用法
 
 适用于 `onRow` `onHeaderRow` `onCell` `onHeaderCell`。
@@ -170,7 +177,6 @@ const columns = [
 
 列描述数据对象，是 columns 中的一项，Column 使用相同的 API。
 
-<!-- prettier-ignore -->
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | align | 设置列的对齐方式 | `left` \| `right` \| `center` | `left` |  |
@@ -205,7 +211,7 @@ const columns = [
 | width | 列宽度（[指定了也不生效？](https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241)） | string \| number | - |  |
 | onCell | 设置单元格属性 | function(record, rowIndex) | - |  |
 | onFilter | 本地模式下，确定筛选的运行函数 | function | - |  |
-| onFilterDropdownOpenChange | 自定义筛选菜单可见变化时调用 | function(visible) {} | - |  |  |
+| onFilterDropdownOpenChange | 自定义筛选菜单可见变化时调用 | function(visible) {} | - |  |
 | onHeaderCell | 设置头部单元格属性 | function(column) | - |  |
 
 ### ColumnGroup
@@ -254,7 +260,7 @@ const columns = [
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | checkStrictly | checkable 状态下节点选择完全受控（父子数据选中状态不再关联） | boolean | true | 4.4.0 |
-| columnTitle | 自定义列表选择框标题 | ReactNode | - |  |
+| columnTitle | 自定义列表选择框标题 | ReactNode \| (originalNode: ReactNode) => ReactNode | - |  |
 | columnWidth | 自定义列表选择框宽度 | string \| number | `32px` |  |
 | fixed | 把选择框列固定在左边 | boolean | - |  |
 | getCheckboxProps | 选择框的默认属性配置 | function(record) | - |  |
diff --git a/components/table/interface.ts b/components/table/interface.ts
index 86ec27a5cdf1..cece5808392a 100644
--- a/components/table/interface.ts
+++ b/components/table/interface.ts
@@ -1,4 +1,5 @@
 import type * as React from 'react';
+import type { Reference } from 'rc-table';
 import type {
   FixedType,
   GetComponentProps,
@@ -16,12 +17,12 @@ import type { INTERNAL_SELECTION_ITEM } from './hooks/useSelection';
 import type { InternalTableProps, TableProps } from './InternalTable';
 
 export type RefTable = <RecordType extends AnyObject = AnyObject>(
-  props: React.PropsWithChildren<TableProps<RecordType>> & { ref?: React.Ref<HTMLDivElement> },
+  props: React.PropsWithChildren<TableProps<RecordType>> & { ref?: React.Ref<Reference> },
 ) => React.ReactElement;
 
 export type RefInternalTable = <RecordType extends AnyObject = AnyObject>(
   props: React.PropsWithChildren<InternalTableProps<RecordType>> & {
-    ref?: React.Ref<HTMLDivElement>;
+    ref?: React.Ref<Reference>;
   },
 ) => React.ReactElement;
 
@@ -196,7 +197,7 @@ export interface TableRowSelection<T> {
   hideSelectAll?: boolean;
   fixed?: FixedType;
   columnWidth?: string | number;
-  columnTitle?: string | React.ReactNode;
+  columnTitle?: React.ReactNode | ((checkboxNode: React.ReactNode) => React.ReactNode);
   checkStrictly?: boolean;
   renderCell?: (
     value: boolean,
diff --git a/components/tabs/index.en-US.md b/components/tabs/index.en-US.md
index 6dba1a34c162..009848a7bf54 100644
--- a/components/tabs/index.en-US.md
+++ b/components/tabs/index.en-US.md
@@ -74,14 +74,16 @@ More option at [rc-tabs tabs](https://github.com/react-component/tabs#tabs)
 
 ### TabItemType
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| closeIcon | Customize close icon in TabPane's head. Only works while `type="editable-card"`. 5.7.0: close button will be hidden when setting to `null` or `false` | boolean \| ReactNode | - |
-| disabled | Set TabPane disabled | boolean | false |
-| forceRender | Forced render of content in tabs, not lazy render after clicking on tabs | boolean | false |
-| key | TabPane's key | string | - |
-| label | TabPane's head display text | ReactNode | - |
-| children | TabPane's head display content | ReactNode | - |
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| closeIcon | Customize close icon in TabPane's head. Only works while `type="editable-card"`. 5.7.0: close button will be hidden when setting to `null` or `false` | boolean \| ReactNode | - |  |
+| destroyInactiveTabPane | Whether destroy inactive TabPane when change tab | boolean | false | 5.11.0 |
+| disabled | Set TabPane disabled | boolean | false |  |
+| forceRender | Forced render of content in tabs, not lazy render after clicking on tabs | boolean | false |  |
+| key | TabPane's key | string | - |  |
+| label | TabPane's head display text | ReactNode | - |  |
+| children | TabPane's head display content | ReactNode | - |  |
+| closable | Whether a close (x) button is visible, Only works while `type="editable-card"` | boolean | true |  |
 
 ## Design Token
 
diff --git a/components/tabs/index.zh-CN.md b/components/tabs/index.zh-CN.md
index b25430ceb5fd..273fc46fe9bf 100644
--- a/components/tabs/index.zh-CN.md
+++ b/components/tabs/index.zh-CN.md
@@ -76,14 +76,16 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
 
 ### TabItemType
 
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| closeIcon | 自定义关闭图标，在 `type="editable-card"` 时有效。5.7.0：设置为 `null` 或 `false` 时隐藏关闭按钮 | boolean \| ReactNode | - |
-| disabled | 禁用某一项 | boolean | false |
-| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false |
-| key | 对应 activeKey | string | - |
-| label | 选项卡头显示文字 | ReactNode | - |
-| children | 选项卡头显示内容 | ReactNode | - |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| closeIcon | 自定义关闭图标，在 `type="editable-card"` 时有效。5.7.0：设置为 `null` 或 `false` 时隐藏关闭按钮 | boolean \| ReactNode | - |  |
+| destroyInactiveTabPane | 被隐藏时是否销毁 DOM 结构 | boolean | false | 5.11.0 |
+| disabled | 禁用某一项 | boolean | false |  |
+| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false |  |
+| key | 对应 activeKey | string | - |  |
+| label | 选项卡头显示文字 | ReactNode | - |  |
+| children | 选项卡头显示内容 | ReactNode | - |  |
+| closable | 是否显示选项卡的关闭按钮，在 `type="editable-card"` 时有效 | boolean | true |  |
 
 ## 主题变量（Design Token）
 
diff --git a/components/tag/style/index.ts b/components/tag/style/index.ts
index c54b28f1f8d8..27de1907d3cb 100644
--- a/components/tag/style/index.ts
+++ b/components/tag/style/index.ts
@@ -6,6 +6,7 @@ import type { GlobalToken } from '../../theme';
 import type { FullToken } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import type { GenStyleFn } from '../../theme/util/genComponentStyleHook';
+import { TinyColor } from '@ctrl/tinycolor';
 
 export interface ComponentToken {
   /**
@@ -143,7 +144,9 @@ export const prepareToken: (token: Parameters<GenStyleFn<'Tag'>>[0]) => TagToken
 };
 
 export const prepareCommonToken: (token: GlobalToken) => ComponentToken = (token) => ({
-  defaultBg: token.colorFillQuaternary,
+  defaultBg: new TinyColor(token.colorFillQuaternary)
+    .onBackground(token.colorBgContainer)
+    .toHexString(),
   defaultColor: token.colorText,
 });
 
diff --git a/components/theme/util/genComponentStyleHook.ts b/components/theme/util/genComponentStyleHook.ts
index 74fa3d25010f..ea1f7d3da326 100644
--- a/components/theme/util/genComponentStyleHook.ts
+++ b/components/theme/util/genComponentStyleHook.ts
@@ -170,7 +170,7 @@ export default function genComponentStyleHook<ComponentName extends OverrideComp
           });
           flush(component, mergedComponentToken);
           return [
-            options.resetStyle === false ? null : genCommonStyle(token, prefixCls),
+            options.resetStyle === false ? null : genCommonStyle(mergedToken, prefixCls),
             styleInterpolation,
           ];
         },
diff --git a/components/theme/util/statistic.ts b/components/theme/util/statistic.ts
index affc8022b184..1d366043fcc7 100644
--- a/components/theme/util/statistic.ts
+++ b/components/theme/util/statistic.ts
@@ -54,7 +54,7 @@ export default function statisticToken<T extends object>(token: T) {
   let flush: (componentName: string, componentToken: Record<string, string | number>) => void =
     noop;
 
-  if (enableStatistic) {
+  if (enableStatistic && typeof Proxy !== 'undefined') {
     tokenKeys = new Set<string>();
 
     proxy = new Proxy(token, {
diff --git a/components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap
index 1f6b37fa830d..4c2f994cd0ba 100644
--- a/components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1284,6 +1284,51 @@ Array [
 exports[`renders components/tooltip/demo/destroy-tooltip-on-hide.tsx extend context correctly 2`] = `[]`;
 
 exports[`renders components/tooltip/demo/disabled.tsx extend context correctly 1`] = `
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
+>
+  <div
+    class="ant-space-item"
+  >
+    <button
+      class="ant-btn ant-btn-default"
+      type="button"
+    >
+      <span>
+        Enable
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <span>
+      Tooltip will show on mouse enter.
+    </span>
+    <div
+      class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
+      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+    >
+      <div
+        class="ant-tooltip-arrow"
+        style="position: absolute; bottom: 0px; left: 0px;"
+      />
+      <div
+        class="ant-tooltip-content"
+      >
+        <div
+          class="ant-tooltip-inner"
+          role="tooltip"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders components/tooltip/demo/disabled.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/tooltip/demo/disabled-children.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
 >
@@ -1521,7 +1566,7 @@ exports[`renders components/tooltip/demo/disabled.tsx extend context correctly 1
       </div>
       <div
         class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-empty ant-select-dropdown-placement-bottomLeft"
-        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150;"
       >
         <div>
           <div
@@ -1627,7 +1672,7 @@ exports[`renders components/tooltip/demo/disabled.tsx extend context correctly 1
 </div>
 `;
 
-exports[`renders components/tooltip/demo/disabled.tsx extend context correctly 2`] = `[]`;
+exports[`renders components/tooltip/demo/disabled-children.tsx extend context correctly 2`] = `[]`;
 
 exports[`renders components/tooltip/demo/placement.tsx extend context correctly 1`] = `
 <div
diff --git a/components/tooltip/__tests__/__snapshots__/demo.test.tsx.snap b/components/tooltip/__tests__/__snapshots__/demo.test.tsx.snap
index 13d0a09887ce..fb12b1bd1578 100644
--- a/components/tooltip/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/tooltip/__tests__/__snapshots__/demo.test.tsx.snap
@@ -533,6 +533,32 @@ exports[`renders components/tooltip/demo/destroy-tooltip-on-hide.tsx correctly 1
 `;
 
 exports[`renders components/tooltip/demo/disabled.tsx correctly 1`] = `
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
+>
+  <div
+    class="ant-space-item"
+  >
+    <button
+      class="ant-btn ant-btn-default"
+      type="button"
+    >
+      <span>
+        Enable
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <span>
+      Tooltip will show on mouse enter.
+    </span>
+  </div>
+</div>
+`;
+
+exports[`renders components/tooltip/demo/disabled-children.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
 >
diff --git a/components/tooltip/demo/disabled-children.md b/components/tooltip/demo/disabled-children.md
new file mode 100644
index 000000000000..af24076a4cba
--- /dev/null
+++ b/components/tooltip/demo/disabled-children.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+Disabled 子元素。
+
+## en-US
+
+Disabled wrapper.
diff --git a/components/tooltip/demo/disabled-children.tsx b/components/tooltip/demo/disabled-children.tsx
new file mode 100644
index 000000000000..2d63d5c09c10
--- /dev/null
+++ b/components/tooltip/demo/disabled-children.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { Button, Checkbox, Input, Select, Space, Tooltip, InputNumber } from 'antd';
+
+const WrapperTooltip: React.FC<{ children?: React.ReactNode }> = (props) => (
+  <Tooltip title="Thanks for using antd. Have a nice day!" {...props} />
+);
+
+const App: React.FC = () => (
+  <Space>
+    <WrapperTooltip>
+      <Button disabled>Disabled</Button>
+    </WrapperTooltip>
+    <WrapperTooltip>
+      <Input disabled placeholder="disabled" />
+    </WrapperTooltip>
+    <WrapperTooltip>
+      <InputNumber disabled />
+    </WrapperTooltip>
+    <WrapperTooltip>
+      <Checkbox disabled />
+    </WrapperTooltip>
+    <WrapperTooltip>
+      <Select disabled />
+    </WrapperTooltip>
+  </Space>
+);
+
+export default App;
diff --git a/components/tooltip/demo/disabled.md b/components/tooltip/demo/disabled.md
index af24076a4cba..44db81b21833 100644
--- a/components/tooltip/demo/disabled.md
+++ b/components/tooltip/demo/disabled.md
@@ -1,7 +1,7 @@
 ## zh-CN
 
-Disabled 子元素。
+通过设置 `title=""` 可以禁用 Tooltip。
 
 ## en-US
 
-Disabled wrapper.
+The Tooltip can be disabled by setting `title=""`.
diff --git a/components/tooltip/demo/disabled.tsx b/components/tooltip/demo/disabled.tsx
index 2d63d5c09c10..da07150cddef 100644
--- a/components/tooltip/demo/disabled.tsx
+++ b/components/tooltip/demo/disabled.tsx
@@ -1,28 +1,17 @@
-import React from 'react';
-import { Button, Checkbox, Input, Select, Space, Tooltip, InputNumber } from 'antd';
+import React, { useState } from 'react';
+import { Space, Button, Tooltip } from 'antd';
 
-const WrapperTooltip: React.FC<{ children?: React.ReactNode }> = (props) => (
-  <Tooltip title="Thanks for using antd. Have a nice day!" {...props} />
-);
+const App: React.FC = () => {
+  const [disabled, setDisabled] = useState(true);
 
-const App: React.FC = () => (
-  <Space>
-    <WrapperTooltip>
-      <Button disabled>Disabled</Button>
-    </WrapperTooltip>
-    <WrapperTooltip>
-      <Input disabled placeholder="disabled" />
-    </WrapperTooltip>
-    <WrapperTooltip>
-      <InputNumber disabled />
-    </WrapperTooltip>
-    <WrapperTooltip>
-      <Checkbox disabled />
-    </WrapperTooltip>
-    <WrapperTooltip>
-      <Select disabled />
-    </WrapperTooltip>
-  </Space>
-);
+  return (
+    <Space>
+      <Button onClick={() => setDisabled(!disabled)}>{disabled ? 'Enable' : 'Disable'}</Button>
+      <Tooltip title={disabled ? '' : 'prompt text'}>
+        <span>Tooltip will show on mouse enter.</span>
+      </Tooltip>
+    </Space>
+  );
+};
 
 export default App;
diff --git a/components/tooltip/index.en-US.md b/components/tooltip/index.en-US.md
index a5180219c2cc..864e1d7ba5f9 100644
--- a/components/tooltip/index.en-US.md
+++ b/components/tooltip/index.en-US.md
@@ -27,7 +27,8 @@ A simple text popup tip.
 <code src="./demo/colorful.tsx">Colorful Tooltip</code>
 <code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
 <code src="./demo/debug.tsx" debug>Debug</code>
-<code src="./demo/disabled.tsx" debug>Disabled</code>
+<code src="./demo/disabled.tsx">Disabled</code>
+<code src="./demo/disabled-children.tsx" debug>Disabled children</code>
 
 ## API
 
diff --git a/components/tooltip/index.tsx b/components/tooltip/index.tsx
index 0c204bd232b2..ee6cee48733c 100644
--- a/components/tooltip/index.tsx
+++ b/components/tooltip/index.tsx
@@ -11,12 +11,14 @@ import useMergedState from 'rc-util/lib/hooks/useMergedState';
 
 import type { PresetColorType } from '../_util/colors';
 import type { RenderFunction } from '../_util/getRenderPropValue';
+import { useZIndex } from '../_util/hooks/useZIndex';
 import { getTransitionName } from '../_util/motion';
 import type { AdjustOverflow, PlacementsConfig } from '../_util/placements';
 import getPlacements from '../_util/placements';
 import { cloneElement, isFragment, isValidElement } from '../_util/reactNode';
 import type { LiteralUnion } from '../_util/type';
 import { devUseWarning } from '../_util/warning';
+import zIndexContext from '../_util/zindexContext';
 import { ConfigContext } from '../config-provider';
 import { NoCompactStyle } from '../space/Compact';
 import { useToken } from '../theme/internal';
@@ -292,9 +294,13 @@ const Tooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref) => {
     hashId,
   );
 
-  return wrapSSR(
+  // ============================ zIndex ============================
+  const [zIndex, contextZIndex] = useZIndex('Tooltip', otherProps.zIndex);
+
+  const content = (
     <RcTooltip
       {...otherProps}
+      zIndex={zIndex}
       showArrow={mergedShowArrow}
       placement={placement}
       mouseEnterDelay={mouseEnterDelay}
@@ -318,8 +324,10 @@ const Tooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref) => {
       destroyTooltipOnHide={!!destroyTooltipOnHide}
     >
       {tempOpen ? cloneElement(child, { className: childCls }) : child}
-    </RcTooltip>,
+    </RcTooltip>
   );
+
+  return wrapSSR(<zIndexContext.Provider value={contextZIndex}>{content}</zIndexContext.Provider>);
 }) as React.ForwardRefExoticComponent<
   React.PropsWithoutRef<TooltipProps> & React.RefAttributes<unknown>
 > & {
diff --git a/components/tooltip/index.zh-CN.md b/components/tooltip/index.zh-CN.md
index 6e1a10fdd77a..de9fc176e482 100644
--- a/components/tooltip/index.zh-CN.md
+++ b/components/tooltip/index.zh-CN.md
@@ -29,7 +29,8 @@ demo:
 <code src="./demo/colorful.tsx">多彩文字提示</code>
 <code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
 <code src="./demo/debug.tsx" debug>Debug</code>
-<code src="./demo/disabled.tsx" debug>禁用</code>
+<code src="./demo/disabled.tsx">禁用</code>
+<code src="./demo/disabled-children.tsx" debug>禁用子元素</code>
 
 ## API
 
diff --git a/components/tour/__tests__/index.test.tsx b/components/tour/__tests__/index.test.tsx
index fede3f9fa098..c3626a699669 100644
--- a/components/tour/__tests__/index.test.tsx
+++ b/components/tour/__tests__/index.test.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable react/no-unstable-nested-components */
 import React, { useEffect, useRef } from 'react';
+
 import Tour from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
diff --git a/components/tour/index.tsx b/components/tour/index.tsx
index ab3207d8230b..db6d38dbdbc4 100644
--- a/components/tour/index.tsx
+++ b/components/tour/index.tsx
@@ -2,7 +2,9 @@ import React, { useContext, useMemo } from 'react';
 import RCTour from '@rc-component/tour';
 import classNames from 'classnames';
 
+import { useZIndex } from '../_util/hooks/useZIndex';
 import getPlacements from '../_util/placements';
+import zIndexContext from '../_util/zindexContext';
 import type { ConfigConsumerProps } from '../config-provider';
 import { ConfigContext } from '../config-provider';
 import { useToken } from '../theme/internal';
@@ -63,16 +65,22 @@ const Tour: React.FC<TourProps> & { _InternalPanelDoNotUseOrYouWillBeFired: type
     />
   );
 
+  // ============================ zIndex ============================
+  const [zIndex, contextZIndex] = useZIndex('Tour', restProps.zIndex);
+
   return wrapSSR(
-    <RCTour
-      {...restProps}
-      rootClassName={customClassName}
-      prefixCls={prefixCls}
-      animated
-      renderPanel={mergedRenderPanel}
-      builtinPlacements={builtinPlacements}
-      steps={mergedSteps}
-    />,
+    <zIndexContext.Provider value={contextZIndex}>
+      <RCTour
+        {...restProps}
+        zIndex={zIndex}
+        rootClassName={customClassName}
+        prefixCls={prefixCls}
+        animated
+        renderPanel={mergedRenderPanel}
+        builtinPlacements={builtinPlacements}
+        steps={mergedSteps}
+      />
+    </zIndexContext.Provider>,
   );
 };
 
diff --git a/components/transfer/ListBody.tsx b/components/transfer/ListBody.tsx
index 5708422f123f..b2d1c21829b6 100644
--- a/components/transfer/ListBody.tsx
+++ b/components/transfer/ListBody.tsx
@@ -1,15 +1,15 @@
-import classNames from 'classnames';
 import * as React from 'react';
-
+import classNames from 'classnames';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
+
 import type { KeyWiseTransferItem } from '.';
 import Pagination from '../pagination';
-import ListItem from './ListItem';
 import type { PaginationType } from './interface';
 import type { RenderedItem, TransferListProps } from './list';
+import ListItem from './ListItem';
 
 export const OmitProps = ['handleFilter', 'handleClear', 'checkedKeys'] as const;
-export type OmitProp = (typeof OmitProps)[number];
+export type OmitProp = typeof OmitProps[number];
 type PartialTransferListProps<RecordType> = Omit<TransferListProps<RecordType>, OmitProp>;
 type ExistPagination = Exclude<PaginationType, boolean>;
 
@@ -73,8 +73,8 @@ const TransferListBody: React.ForwardRefRenderFunction<
     }
   }, [filteredRenderItems, mergedPagination, pageSize]);
 
-  const onClick = (item: RecordType) => {
-    onItemSelect?.(item.key, !selectedKeys.includes(item.key));
+  const onInternalClick = (item: RecordType, e: React.MouseEvent<Element, MouseEvent>) => {
+    onItemSelect(item.key, !selectedKeys.includes(item.key), e);
   };
 
   const onRemove = (item: RecordType) => {
@@ -130,7 +130,7 @@ const TransferListBody: React.ForwardRefRenderFunction<
             renderedEl={renderedEl}
             prefixCls={prefixCls}
             showRemove={showRemove}
-            onClick={onClick}
+            onClick={onInternalClick}
             onRemove={onRemove}
             checked={selectedKeys.includes(item.key)}
             disabled={globalDisabled || item.disabled}
diff --git a/components/transfer/ListItem.tsx b/components/transfer/ListItem.tsx
index f74d8583959d..ff76ed552dbc 100644
--- a/components/transfer/ListItem.tsx
+++ b/components/transfer/ListItem.tsx
@@ -13,7 +13,7 @@ type ListItemProps<RecordType> = {
   disabled?: boolean;
   checked?: boolean;
   prefixCls: string;
-  onClick: (item: RecordType) => void;
+  onClick: (item: RecordType, e: React.MouseEvent<HTMLLIElement, MouseEvent>) => void;
   onRemove?: (item: RecordType) => void;
   item: RecordType;
   showRemove?: boolean;
@@ -67,7 +67,7 @@ const ListItem = <RecordType extends KeyWiseTransferItem>(props: ListItemProps<R
   }
 
   // Default click to select
-  liProps.onClick = disabled || item.disabled ? undefined : () => onClick(item);
+  liProps.onClick = disabled || item.disabled ? undefined : (event) => onClick(item, event);
 
   return (
     <li {...liProps}>
diff --git a/components/transfer/__tests__/index.test.tsx b/components/transfer/__tests__/index.test.tsx
index a14674d2d266..adbbc0a2cdca 100644
--- a/components/transfer/__tests__/index.test.tsx
+++ b/components/transfer/__tests__/index.test.tsx
@@ -1,6 +1,7 @@
+import React, { useCallback, useEffect, useState } from 'react';
 import { fireEvent, render, waitFor } from '@testing-library/react';
 import type { DefaultRecordType } from 'rc-table/lib/interface';
-import React, { useCallback, useEffect, useState } from 'react';
+
 import type { SelectAllLabel, TransferProps } from '..';
 import Transfer from '..';
 import mountTest from '../../../tests/shared/mountTest';
@@ -151,6 +152,92 @@ describe('Transfer', () => {
     expect(handleSelectChange).toHaveBeenLastCalledWith(['a'], ['b']);
   });
 
+  it('multiple select/deselect by hold down the shift key', () => {
+    const handleSelectChange = jest.fn();
+    const { getByText } = render(
+      <Transfer
+        dataSource={[
+          { key: 'a', title: 'a' },
+          { key: 'b', title: 'b' },
+          { key: 'c', title: 'c' },
+        ]}
+        onSelectChange={handleSelectChange}
+        render={(item) => item.title}
+      />,
+    );
+
+    fireEvent.click(getByText('a'));
+    expect(handleSelectChange).toHaveBeenLastCalledWith(['a'], []);
+
+    fireEvent.click(getByText('c'), {
+      shiftKey: true,
+    });
+    expect(handleSelectChange).toHaveBeenLastCalledWith(['a', 'b', 'c'], []);
+
+    fireEvent.click(getByText('b'), {
+      shiftKey: true,
+    });
+    expect(handleSelectChange).toHaveBeenLastCalledWith(['a'], []);
+  });
+
+  it('multiple select targetKeys by hold down the shift key', () => {
+    const handleSelectChange = jest.fn();
+    const { getByText } = render(
+      <Transfer
+        dataSource={[
+          { key: 'a', title: 'a' },
+          { key: 'b', title: 'b' },
+          { key: 'c', title: 'c' },
+        ]}
+        targetKeys={['a', 'b', 'c']}
+        onSelectChange={handleSelectChange}
+        render={(item) => item.title}
+      />,
+    );
+
+    fireEvent.click(getByText('a'));
+    expect(handleSelectChange).toHaveBeenLastCalledWith([], ['a']);
+
+    fireEvent.click(getByText('c'), {
+      shiftKey: true,
+    });
+    expect(handleSelectChange).toHaveBeenLastCalledWith([], ['a', 'b', 'c']);
+
+    fireEvent.click(getByText('b'), {
+      shiftKey: true,
+    });
+    expect(handleSelectChange).toHaveBeenLastCalledWith([], ['a']);
+  });
+
+  it('reset last select key after deselect', () => {
+    const handleSelectChange = jest.fn();
+    const { getByText } = render(
+      <Transfer
+        dataSource={[
+          { key: 'a', title: 'a' },
+          { key: 'b', title: 'b' },
+          { key: 'c', title: 'c' },
+          { key: 'd', title: 'd' },
+        ]}
+        onSelectChange={handleSelectChange}
+        render={(item) => item.title}
+      />,
+    );
+
+    fireEvent.click(getByText('a'));
+    expect(handleSelectChange).toHaveBeenLastCalledWith(['a'], []);
+    fireEvent.click(getByText('c'), {
+      shiftKey: true,
+    });
+    expect(handleSelectChange).toHaveBeenLastCalledWith(['a', 'b', 'c'], []);
+    fireEvent.click(getByText('c'));
+    expect(handleSelectChange).toHaveBeenLastCalledWith(['a', 'b'], []);
+    fireEvent.click(getByText('d'), {
+      shiftKey: true,
+    });
+    expect(handleSelectChange).toHaveBeenLastCalledWith(['a', 'b', 'd'], []);
+  });
+
   it('should not check checkbox when component disabled', () => {
     const handleSelectChange = jest.fn();
     const { getByText } = render(
diff --git a/components/transfer/__tests__/list.test.tsx b/components/transfer/__tests__/list.test.tsx
index 654254e414b1..f00033dac6c1 100644
--- a/components/transfer/__tests__/list.test.tsx
+++ b/components/transfer/__tests__/list.test.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
+
 import type { KeyWiseTransferItem } from '..';
+import { fireEvent, render } from '../../../tests/utils';
 import type { TransferListProps } from '../list';
-import { render } from '../../../tests/utils';
 import List from '../list';
 
 const listCommonProps: TransferListProps<KeyWiseTransferItem> = {
@@ -78,4 +79,26 @@ describe('Transfer.List', () => {
       ),
     ).toBeTruthy();
   });
+
+  it('onItemSelect should be called correctly', () => {
+    const onItemSelect = jest.fn();
+    const { container } = render(
+      <List
+        {...listCommonProps}
+        onItemSelect={onItemSelect}
+        renderList={(props) => (
+          <div
+            className="custom-list-body"
+            onClick={(e) => {
+              props.onItemSelect('a', false, e);
+            }}
+          >
+            custom list body
+          </div>
+        )}
+      />,
+    );
+    fireEvent.click(container.querySelector('.custom-list-body')!);
+    expect(onItemSelect).toHaveBeenCalledWith('a', false);
+  });
 });
diff --git a/components/transfer/demo/component-token.tsx b/components/transfer/demo/component-token.tsx
index 7983154a1097..154a2018a8d5 100644
--- a/components/transfer/demo/component-token.tsx
+++ b/components/transfer/demo/component-token.tsx
@@ -1,8 +1,8 @@
-import difference from 'lodash/difference';
 import React, { useState } from 'react';
 import { ConfigProvider, Space, Switch, Table, Tag, Transfer } from 'antd';
 import type { ColumnsType, TableRowSelection } from 'antd/es/table/interface';
 import type { TransferDirection, TransferItem, TransferProps } from 'antd/es/transfer';
+import difference from 'lodash/difference';
 
 interface RecordType {
   key: string;
diff --git a/components/transfer/demo/table-transfer.tsx b/components/transfer/demo/table-transfer.tsx
index 94bc45d8e1b3..3c1f7d6932b9 100644
--- a/components/transfer/demo/table-transfer.tsx
+++ b/components/transfer/demo/table-transfer.tsx
@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
-import difference from 'lodash/difference';
 import { Space, Switch, Table, Tag, Transfer } from 'antd';
 import type { ColumnsType, TableRowSelection } from 'antd/es/table/interface';
 import type { TransferItem, TransferProps } from 'antd/es/transfer';
+import difference from 'lodash/difference';
 
 interface RecordType {
   key: string;
diff --git a/components/transfer/index.tsx b/components/transfer/index.tsx
index 2282935d454a..72954bf4a981 100644
--- a/components/transfer/index.tsx
+++ b/components/transfer/index.tsx
@@ -2,6 +2,8 @@ import type { ChangeEvent, CSSProperties } from 'react';
 import React, { useCallback, useContext } from 'react';
 import classNames from 'classnames';
 
+import type { PrevSelectedIndex } from '../_util/hooks/useMultipleSelect';
+import useMultipleSelect from '../_util/hooks/useMultipleSelect';
 import type { InputStatus } from '../_util/statusUtils';
 import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
 import { groupDisabledKeysMap, groupKeysMap } from '../_util/transKeys';
@@ -16,9 +18,8 @@ import defaultLocale from '../locale/en_US';
 import useData from './hooks/useData';
 import useSelection from './hooks/useSelection';
 import type { PaginationType } from './interface';
-import type { TransferListProps } from './list';
+import type { TransferCustomListBodyProps, TransferListProps } from './list';
 import List from './list';
-import type { TransferListBodyProps } from './ListBody';
 import Operation from './operation';
 import Search from './search';
 import useStyle from './style';
@@ -98,7 +99,7 @@ export interface TransferProps<RecordType> {
   rowKey?: (record: RecordType) => string;
   onSearch?: (direction: TransferDirection, value: string) => void;
   onScroll?: (direction: TransferDirection, e: React.SyntheticEvent<HTMLUListElement>) => void;
-  children?: (props: TransferListBodyProps<RecordType>) => React.ReactNode;
+  children?: (props: TransferCustomListBodyProps<RecordType>) => React.ReactNode;
   showSelectAll?: boolean;
   selectAllLabels?: SelectAllLabel[];
   oneWay?: boolean;
@@ -169,6 +170,15 @@ const Transfer = <RecordType extends TransferItem = TransferItem>(
     setTargetSelectedKeys,
   ] = useSelection(leftDataSource, rightDataSource, selectedKeys);
 
+  const [leftMultipleSelect, updateLeftPrevSelectedIndex] = useMultipleSelect<
+    KeyWise<RecordType>,
+    string
+  >((item) => item.key);
+  const [rightMultipleSelect, updateRightPrevSelectedIndex] = useMultipleSelect<
+    KeyWise<RecordType>,
+    string
+  >((item) => item.key);
+
   if (process.env.NODE_ENV !== 'production') {
     const warning = devUseWarning('Transfer');
 
@@ -188,6 +198,14 @@ const Transfer = <RecordType extends TransferItem = TransferItem>(
     [sourceSelectedKeys, targetSelectedKeys],
   );
 
+  const setPrevSelectedIndex = (direction: TransferDirection, value: PrevSelectedIndex) => {
+    const isLeftDirection = direction === 'left';
+    const updatePrevSelectedIndex = isLeftDirection
+      ? updateLeftPrevSelectedIndex
+      : updateRightPrevSelectedIndex;
+    updatePrevSelectedIndex(value);
+  };
+
   const handleSelectChange = useCallback(
     (direction: TransferDirection, holder: string[]) => {
       if (direction === 'left') {
@@ -231,10 +249,12 @@ const Transfer = <RecordType extends TransferItem = TransferItem>(
 
   const moveToLeft = () => {
     moveTo('left');
+    setPrevSelectedIndex('left', null);
   };
 
   const moveToRight = () => {
     moveTo('right');
+    setPrevSelectedIndex('right', null);
   };
 
   const onItemSelectAll = (
@@ -257,6 +277,7 @@ const Transfer = <RecordType extends TransferItem = TransferItem>(
       handleSelectChange(direction, mergedCheckedKeys);
       return mergedCheckedKeys;
     });
+    setPrevSelectedIndex(direction, null);
   };
 
   const onLeftItemSelectAll = (keys: string[], checkAll: boolean) => {
@@ -275,27 +296,75 @@ const Transfer = <RecordType extends TransferItem = TransferItem>(
 
   const handleRightClear = () => onSearch?.('right', '');
 
-  const onItemSelect = (direction: TransferDirection, selectedKey: string, checked: boolean) => {
-    const holder = [...(direction === 'left' ? sourceSelectedKeys : targetSelectedKeys)];
-    const index = holder.indexOf(selectedKey);
-    if (index > -1) {
-      holder.splice(index, 1);
+  const handleSingleSelect = (
+    direction: TransferDirection,
+    holder: Set<string>,
+    selectedKey: string,
+    checked: boolean,
+    currentSelectedIndex: number,
+  ) => {
+    const isSelected = holder.has(selectedKey);
+    if (isSelected) {
+      holder.delete(selectedKey);
+      setPrevSelectedIndex(direction, null);
     }
     if (checked) {
-      holder.push(selectedKey);
+      holder.add(selectedKey);
+      setPrevSelectedIndex(direction, currentSelectedIndex);
     }
-    handleSelectChange(direction, holder);
+  };
+
+  const handleMultipleSelect = (
+    direction: TransferDirection,
+    data: KeyWise<RecordType>[],
+    holder: Set<string>,
+    currentSelectedIndex: number,
+  ) => {
+    const isLeftDirection = direction === 'left';
+    const multipleSelect = isLeftDirection ? leftMultipleSelect : rightMultipleSelect;
+    multipleSelect(currentSelectedIndex, data, holder);
+  };
+
+  const onItemSelect = (
+    direction: TransferDirection,
+    selectedKey: string,
+    checked: boolean,
+    multiple?: boolean,
+  ) => {
+    const isLeftDirection = direction === 'left';
+    const holder = [...(isLeftDirection ? sourceSelectedKeys : targetSelectedKeys)];
+    const holderSet = new Set(holder);
+    const data = [...(isLeftDirection ? leftDataSource : rightDataSource)].filter(
+      (item) => !item.disabled,
+    );
+    const currentSelectedIndex = data.findIndex((item) => item.key === selectedKey);
+    // multiple select by hold down the shift key
+    if (multiple && holder.length > 0) {
+      handleMultipleSelect(direction, data, holderSet, currentSelectedIndex);
+    } else {
+      handleSingleSelect(direction, holderSet, selectedKey, checked, currentSelectedIndex);
+    }
+    const holderArr = Array.from(holderSet);
+    handleSelectChange(direction, holderArr);
     if (!props.selectedKeys) {
-      setStateKeys(direction, holder);
+      setStateKeys(direction, holderArr);
     }
   };
 
-  const onLeftItemSelect = (selectedKey: string, checked: boolean) => {
-    onItemSelect('left', selectedKey, checked);
+  const onLeftItemSelect = (
+    selectedKey: string,
+    checked: boolean,
+    e?: React.MouseEvent<Element, MouseEvent>,
+  ) => {
+    onItemSelect('left', selectedKey, checked, e?.shiftKey);
   };
 
-  const onRightItemSelect = (selectedKey: string, checked: boolean) => {
-    onItemSelect('right', selectedKey, checked);
+  const onRightItemSelect = (
+    selectedKey: string,
+    checked: boolean,
+    e?: React.MouseEvent<Element, MouseEvent>,
+  ) => {
+    onItemSelect('right', selectedKey, checked, e?.shiftKey);
   };
 
   const onRightItemRemove = (keys: string[]) => {
diff --git a/components/transfer/list.tsx b/components/transfer/list.tsx
index 80e28caba9f4..0d6963b3e3c9 100644
--- a/components/transfer/list.tsx
+++ b/components/transfer/list.tsx
@@ -1,14 +1,13 @@
+import React, { useMemo, useRef, useState } from 'react';
 import DownOutlined from '@ant-design/icons/DownOutlined';
 import classNames from 'classnames';
 import omit from 'rc-util/lib/omit';
-import React, { useMemo, useRef, useState } from 'react';
+
 import { isValidElement } from '../_util/reactNode';
 import { groupKeysMap } from '../_util/transKeys';
 import Checkbox from '../checkbox';
 import Dropdown from '../dropdown';
 import type { MenuProps } from '../menu';
-import type { ListBodyRef, TransferListBodyProps } from './ListBody';
-import DefaultListBody, { OmitProps } from './ListBody';
 import type {
   KeyWiseTransferItem,
   RenderResult,
@@ -18,6 +17,8 @@ import type {
   TransferLocale,
 } from './index';
 import type { PaginationType } from './interface';
+import type { ListBodyRef, TransferListBodyProps } from './ListBody';
+import DefaultListBody, { OmitProps } from './ListBody';
 import Search from './search';
 
 const defaultRender = () => null;
@@ -52,7 +53,7 @@ export interface TransferListProps<RecordType> extends TransferLocale {
   style?: React.CSSProperties;
   checkedKeys: string[];
   handleFilter: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  onItemSelect: (key: string, check: boolean) => void;
+  onItemSelect: (key: string, check: boolean, e?: React.MouseEvent<Element, MouseEvent>) => void;
   onItemSelectAll: (dataSource: string[], checkAll: boolean | 'replace') => void;
   onItemRemove?: (keys: string[]) => void;
   handleClear: () => void;
@@ -77,6 +78,10 @@ export interface TransferListProps<RecordType> extends TransferLocale {
   selectionsIcon?: React.ReactNode;
 }
 
+export interface TransferCustomListBodyProps<T> extends TransferListBodyProps<T> {
+  onItemSelect: (key: string, check: boolean) => void;
+}
+
 const TransferList = <RecordType extends KeyWiseTransferItem>(
   props: TransferListProps<RecordType>,
 ) => {
@@ -134,7 +139,12 @@ const TransferList = <RecordType extends KeyWiseTransferItem>(
   };
 
   const renderListBody = (listProps: TransferListBodyProps<RecordType>) => {
-    let bodyContent: React.ReactNode = renderList ? renderList(listProps) : null;
+    let bodyContent: React.ReactNode = renderList
+      ? renderList({
+          ...listProps,
+          onItemSelect: (key: string, check: boolean) => listProps.onItemSelect(key, check),
+        })
+      : null;
     const customize: boolean = !!bodyContent;
     if (!customize) {
       bodyContent = <DefaultListBody ref={listBodyRef} {...listProps} />;
diff --git a/components/tree-select/demo/checkable.tsx b/components/tree-select/demo/checkable.tsx
index da48d91a6598..91f6d81b23aa 100644
--- a/components/tree-select/demo/checkable.tsx
+++ b/components/tree-select/demo/checkable.tsx
@@ -44,7 +44,7 @@ const App: React.FC = () => {
   const [value, setValue] = useState(['0-0-0']);
 
   const onChange = (newValue: string[]) => {
-    console.log('onChange ', value);
+    console.log('onChange ', newValue);
     setValue(newValue);
   };
 
diff --git a/components/tree-select/index.tsx b/components/tree-select/index.tsx
index 4d00510d7928..7ce88452350d 100644
--- a/components/tree-select/index.tsx
+++ b/components/tree-select/index.tsx
@@ -28,6 +28,7 @@ import type { AntTreeNodeProps, TreeProps } from '../tree';
 import type { SwitcherIcon } from '../tree/Tree';
 import SwitcherIconCom from '../tree/utils/iconUtil';
 import useStyle from './style';
+import { useZIndex } from '../_util/hooks/useZIndex';
 
 type RawValue = string | number;
 
@@ -249,6 +250,9 @@ const InternalTreeSelect = <
     />
   );
 
+  // ============================ zIndex ============================
+  const [zIndex] = useZIndex('SelectLike', props.dropdownStyle?.zIndex as number);
+
   const returnNode = (
     <RcTreeSelect
       virtual={virtual}
@@ -276,6 +280,10 @@ const InternalTreeSelect = <
       getPopupContainer={getPopupContainer || getContextPopupContainer}
       treeMotion={null}
       dropdownClassName={mergedDropdownClassName}
+      dropdownStyle={{
+        ...props.dropdownStyle,
+        zIndex,
+      }}
       choiceTransitionName={getTransitionName(rootPrefixCls, '', choiceTransitionName)}
       transitionName={getTransitionName(rootPrefixCls, 'slide-up', transitionName)}
       treeExpandAction={treeExpandAction}
diff --git a/components/tree/index.en-US.md b/components/tree/index.en-US.md
index 8d890db815ed..35c1106d7445 100644
--- a/components/tree/index.en-US.md
+++ b/components/tree/index.en-US.md
@@ -71,17 +71,17 @@ Common props ref：[Common props](/docs/react/common-props)
 | titleRender | Customize tree node title render | (nodeData) => ReactNode | - | 4.5.0 |
 | treeData | The treeNodes data Array, if set it then you need not to construct children TreeNode. (key should be unique across the whole array) | array&lt;{ key, title, children, \[disabled, selectable] }> | - |  |
 | virtual | Disable virtual scroll when set to false | boolean | true | 4.1.0 |
-| onCheck | Callback function for when the onCheck event occurs | function(checkedKeys, e:{checked: bool, checkedNodes, node, event, halfCheckedKeys}) | - |  |
+| onCheck | Callback function for when the onCheck event occurs | function(checkedKeys, e:{checked: boolean, checkedNodes, node, event, halfCheckedKeys}) | - |  |
 | onDragEnd | Callback function for when the onDragEnd event occurs | function({event, node}) | - |  |
 | onDragEnter | Callback function for when the onDragEnter event occurs | function({event, node, expandedKeys}) | - |  |
 | onDragLeave | Callback function for when the onDragLeave event occurs | function({event, node}) | - |  |
 | onDragOver | Callback function for when the onDragOver event occurs | function({event, node}) | - |  |
 | onDragStart | Callback function for when the onDragStart event occurs | function({event, node}) | - |  |
 | onDrop | Callback function for when the onDrop event occurs | function({event, node, dragNode, dragNodesKeys}) | - |  |
-| onExpand | Callback function for when a treeNode is expanded or collapsed | function(expandedKeys, {expanded: bool, node}) | - |  |
+| onExpand | Callback function for when a treeNode is expanded or collapsed | function(expandedKeys, {expanded: boolean, node}) | - |  |
 | onLoad | Callback function for when a treeNode is loaded | function(loadedKeys, {event, node}) | - |  |
 | onRightClick | Callback function for when the user right clicks a treeNode | function({event, node}) | - |  |
-| onSelect | Callback function for when the user clicks a treeNode | function(selectedKeys, e:{selected: bool, selectedNodes, node, event}) | - |  |
+| onSelect | Callback function for when the user clicks a treeNode | function(selectedKeys, e:{selected: boolean, selectedNodes, node, event}) | - |  |
 
 ### TreeNode props
 
diff --git a/components/tree/index.zh-CN.md b/components/tree/index.zh-CN.md
index c2812e6f7636..0db46fa1835b 100644
--- a/components/tree/index.zh-CN.md
+++ b/components/tree/index.zh-CN.md
@@ -73,17 +73,17 @@ demo:
 | titleRender | 自定义渲染节点 | (nodeData) => ReactNode | - | 4.5.0 |
 | treeData | treeNodes 数据，如果设置则不需要手动构造 TreeNode 节点（key 在整个树范围内唯一） | array&lt;{key, title, children, \[disabled, selectable]}> | - |  |
 | virtual | 设置 false 时关闭虚拟滚动 | boolean | true | 4.1.0 |
-| onCheck | 点击复选框触发 | function(checkedKeys, e:{checked: bool, checkedNodes, node, event, halfCheckedKeys}) | - |  |
+| onCheck | 点击复选框触发 | function(checkedKeys, e:{checked: boolean, checkedNodes, node, event, halfCheckedKeys}) | - |  |
 | onDragEnd | dragend 触发时调用 | function({event, node}) | - |  |
 | onDragEnter | dragenter 触发时调用 | function({event, node, expandedKeys}) | - |  |
 | onDragLeave | dragleave 触发时调用 | function({event, node}) | - |  |
 | onDragOver | dragover 触发时调用 | function({event, node}) | - |  |
 | onDragStart | 开始拖拽时调用 | function({event, node}) | - |  |
 | onDrop | drop 触发时调用 | function({event, node, dragNode, dragNodesKeys}) | - |  |
-| onExpand | 展开/收起节点时触发 | function(expandedKeys, {expanded: bool, node}) | - |  |
+| onExpand | 展开/收起节点时触发 | function(expandedKeys, {expanded: boolean, node}) | - |  |
 | onLoad | 节点加载完毕时触发 | function(loadedKeys, {event, node}) | - |  |
 | onRightClick | 响应右键点击 | function({event, node}) | - |  |
-| onSelect | 点击树节点触发 | function(selectedKeys, e:{selected: bool, selectedNodes, node, event}) | - |  |
+| onSelect | 点击树节点触发 | function(selectedKeys, e:{selected: boolean, selectedNodes, node, event}) | - |  |
 
 ### TreeNode props
 
diff --git a/components/typography/style/mixins.ts b/components/typography/style/mixins.ts
index 086d60171999..73df94c4ea9c 100644
--- a/components/typography/style/mixins.ts
+++ b/components/typography/style/mixins.ts
@@ -261,6 +261,8 @@ export const getEllipsisStyles = (): CSSObject => ({
       overflow: 'hidden',
       textOverflow: 'ellipsis',
       verticalAlign: 'bottom',
+      // https://github.com/ant-design/ant-design/issues/45953
+      boxSizing: 'content-box',
     },
   },
 
diff --git a/components/upload/Upload.tsx b/components/upload/Upload.tsx
index 07c1d8d89779..8d9914f25890 100644
--- a/components/upload/Upload.tsx
+++ b/components/upload/Upload.tsx
@@ -376,6 +376,10 @@ const InternalUpload: React.ForwardRefRenderFunction<UploadRef, UploadProps> = (
     downloadIcon,
   } = typeof showUploadList === 'boolean' ? ({} as ShowUploadListInterface) : showUploadList;
 
+  // use showRemoveIcon if it is specified explicitly
+  const realShowRemoveIcon =
+    typeof showRemoveIcon === 'undefined' ? !mergedDisabled : !!showRemoveIcon;
+
   const renderUploadList = (button?: React.ReactNode, buttonVisible?: boolean) => {
     if (!showUploadList) {
       return button;
@@ -389,7 +393,7 @@ const InternalUpload: React.ForwardRefRenderFunction<UploadRef, UploadProps> = (
         onPreview={onPreview}
         onDownload={onDownload}
         onRemove={handleRemove}
-        showRemoveIcon={!mergedDisabled && showRemoveIcon}
+        showRemoveIcon={realShowRemoveIcon}
         showPreviewIcon={showPreviewIcon}
         showDownloadIcon={showDownloadIcon}
         removeIcon={removeIcon}
diff --git a/components/upload/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/upload/__tests__/__snapshots__/demo-extend.test.ts.snap
index 13880f9a2451..12d27c861ce9 100644
--- a/components/upload/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/upload/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -519,6 +519,760 @@ exports[`renders components/upload/demo/customize-progress-bar.tsx extend contex
 
 exports[`renders components/upload/demo/customize-progress-bar.tsx extend context correctly 2`] = `[]`;
 
+exports[`renders components/upload/demo/debug-disabled.tsx extend context correctly 1`] = `
+<div
+  class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
+>
+  <div
+    class="ant-space-item"
+  >
+    <span
+      class="ant-upload-wrapper"
+    >
+      <div
+        class="ant-upload ant-upload-select ant-upload-disabled"
+      >
+        <span
+          class="ant-upload ant-upload-disabled"
+          role="button"
+        >
+          <input
+            accept=""
+            disabled=""
+            style="display: none;"
+            type="file"
+          />
+          Click Text to Upload
+        </span>
+      </div>
+      <div
+        class="ant-upload-list ant-upload-list-text"
+      />
+    </span>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <span
+      class="ant-upload-wrapper"
+    >
+      <div
+        class="ant-upload ant-upload-select ant-upload-disabled"
+      >
+        <span
+          class="ant-upload ant-upload-disabled"
+          role="button"
+        >
+          <input
+            accept=""
+            disabled=""
+            style="display: none;"
+            type="file"
+          />
+          <button
+            class="ant-btn ant-btn-default"
+            type="button"
+          >
+            <span
+              class="ant-btn-icon"
+            >
+              <span
+                aria-label="upload"
+                class="anticon anticon-upload"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="upload"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
+                  />
+                </svg>
+              </span>
+            </span>
+            <span>
+              Click to Upload
+            </span>
+          </button>
+        </span>
+      </div>
+      <div
+        class="ant-upload-list ant-upload-list-text"
+      />
+    </span>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <span
+      class="ant-upload-wrapper ant-upload-picture-card-wrapper"
+    >
+      <div
+        class="ant-upload-list ant-upload-list-picture-card"
+      >
+        <div
+          class="ant-upload-list-item-container"
+        >
+          <div
+            class="ant-upload-list-item ant-upload-list-item-done"
+          >
+            <a
+              class="ant-upload-list-item-thumbnail"
+              href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <img
+                alt="image.png"
+                class="ant-upload-list-item-image"
+                src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+              />
+            </a>
+            <a
+              class="ant-upload-list-item-name"
+              href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+              rel="noopener noreferrer"
+              target="_blank"
+              title="image.png"
+            >
+              image.png
+            </a>
+            <span
+              class="ant-upload-list-item-actions"
+            >
+              <a
+                href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+                rel="noopener noreferrer"
+                target="_blank"
+                title="Preview file"
+              >
+                <span
+                  aria-label="eye"
+                  class="anticon anticon-eye"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="eye"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
+                    />
+                  </svg>
+                </span>
+              </a>
+            </span>
+          </div>
+        </div>
+        <div
+          class="ant-upload-list-item-container"
+        >
+          <div
+            class="ant-upload-list-item ant-upload-list-item-done"
+          >
+            <a
+              class="ant-upload-list-item-thumbnail"
+              href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <img
+                alt="image.png"
+                class="ant-upload-list-item-image"
+                src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+              />
+            </a>
+            <a
+              class="ant-upload-list-item-name"
+              href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+              rel="noopener noreferrer"
+              target="_blank"
+              title="image.png"
+            >
+              image.png
+            </a>
+            <span
+              class="ant-upload-list-item-actions"
+            >
+              <a
+                href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+                rel="noopener noreferrer"
+                target="_blank"
+                title="Preview file"
+              >
+                <span
+                  aria-label="eye"
+                  class="anticon anticon-eye"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="eye"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
+                    />
+                  </svg>
+                </span>
+              </a>
+            </span>
+          </div>
+        </div>
+        <div
+          class="ant-upload-list-item-container"
+        >
+          <div
+            class="ant-upload-list-item ant-upload-list-item-uploading"
+          >
+            <div
+              class="ant-upload-list-item-thumbnail"
+            >
+              Uploading...
+            </div>
+            <a
+              class="ant-upload-list-item-name"
+              href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+              rel="noopener noreferrer"
+              target="_blank"
+              title="image.png"
+            >
+              image.png
+            </a>
+          </div>
+        </div>
+        <div
+          class="ant-upload-list-item-container"
+        >
+          <div
+            class="ant-upload-list-item ant-upload-list-item-error"
+          >
+            <div
+              class="ant-upload-list-item-thumbnail ant-upload-list-item-file"
+            >
+              <span
+                aria-label="picture"
+                class="anticon anticon-picture"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="picture"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 632H136v-39.9l138.5-164.3 150.1 178L658.1 489 888 761.6V792zm0-129.8L664.2 396.8c-3.2-3.8-9-3.8-12.2 0L424.6 666.4l-144-170.7c-3.2-3.8-9-3.8-12.2 0L136 652.7V232h752v430.2z"
+                    fill="#1677ff"
+                  />
+                  <path
+                    d="M424.6 765.8l-150.1-178L136 752.1V792h752v-30.4L658.1 489z"
+                    fill="#e6f4ff"
+                  />
+                  <path
+                    d="M136 652.7l132.4-157c3.2-3.8 9-3.8 12.2 0l144 170.7L652 396.8c3.2-3.8 9-3.8 12.2 0L888 662.2V232H136v420.7zM304 280a88 88 0 110 176 88 88 0 010-176z"
+                    fill="#e6f4ff"
+                  />
+                  <path
+                    d="M276 368a28 28 0 1056 0 28 28 0 10-56 0z"
+                    fill="#e6f4ff"
+                  />
+                  <path
+                    d="M304 456a88 88 0 100-176 88 88 0 000 176zm0-116c15.5 0 28 12.5 28 28s-12.5 28-28 28-28-12.5-28-28 12.5-28 28-28z"
+                    fill="#1677ff"
+                  />
+                </svg>
+              </span>
+            </div>
+            <span
+              class="ant-upload-list-item-name"
+              title="image.png"
+            >
+              image.png
+            </span>
+            <span
+              class="ant-upload-list-item-actions"
+            >
+              <a
+                rel="noopener noreferrer"
+                style="pointer-events: none; opacity: 0.5;"
+                target="_blank"
+                title="Preview file"
+              >
+                <span
+                  aria-label="eye"
+                  class="anticon anticon-eye"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="eye"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
+                    />
+                  </svg>
+                </span>
+              </a>
+            </span>
+          </div>
+          <div
+            class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
+            style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+          >
+            <div
+              class="ant-tooltip-arrow"
+              style="position: absolute; bottom: 0px; left: 0px;"
+            />
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              >
+                Upload error
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="ant-upload ant-upload-select ant-upload-disabled"
+        >
+          <span
+            class="ant-upload ant-upload-disabled"
+            role="button"
+          >
+            <input
+              accept=""
+              disabled=""
+              style="display: none;"
+              type="file"
+            />
+            <div>
+              <span
+                aria-label="plus"
+                class="anticon anticon-plus"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="plus"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
+                  />
+                  <path
+                    d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
+                  />
+                </svg>
+              </span>
+              <div
+                style="margin-top: 8px;"
+              >
+                Upload
+              </div>
+            </div>
+          </span>
+        </div>
+      </div>
+    </span>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <span
+      class="ant-upload-wrapper ant-upload-picture-circle-wrapper"
+    >
+      <div
+        class="ant-upload-list ant-upload-list-picture-circle"
+      >
+        <div
+          class="ant-upload-list-item-container"
+        >
+          <div
+            class="ant-upload-list-item ant-upload-list-item-done"
+          >
+            <a
+              class="ant-upload-list-item-thumbnail"
+              href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <img
+                alt="image.png"
+                class="ant-upload-list-item-image"
+                src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+              />
+            </a>
+            <a
+              class="ant-upload-list-item-name"
+              href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+              rel="noopener noreferrer"
+              target="_blank"
+              title="image.png"
+            >
+              image.png
+            </a>
+            <span
+              class="ant-upload-list-item-actions"
+            >
+              <a
+                href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+                rel="noopener noreferrer"
+                target="_blank"
+                title="Preview file"
+              >
+                <span
+                  aria-label="eye"
+                  class="anticon anticon-eye"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="eye"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
+                    />
+                  </svg>
+                </span>
+              </a>
+            </span>
+          </div>
+        </div>
+        <div
+          class="ant-upload-list-item-container"
+        >
+          <div
+            class="ant-upload-list-item ant-upload-list-item-done"
+          >
+            <a
+              class="ant-upload-list-item-thumbnail"
+              href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <img
+                alt="image.png"
+                class="ant-upload-list-item-image"
+                src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+              />
+            </a>
+            <a
+              class="ant-upload-list-item-name"
+              href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+              rel="noopener noreferrer"
+              target="_blank"
+              title="image.png"
+            >
+              image.png
+            </a>
+            <span
+              class="ant-upload-list-item-actions"
+            >
+              <a
+                href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+                rel="noopener noreferrer"
+                target="_blank"
+                title="Preview file"
+              >
+                <span
+                  aria-label="eye"
+                  class="anticon anticon-eye"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="eye"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
+                    />
+                  </svg>
+                </span>
+              </a>
+            </span>
+          </div>
+        </div>
+        <div
+          class="ant-upload-list-item-container"
+        >
+          <div
+            class="ant-upload-list-item ant-upload-list-item-uploading"
+          >
+            <div
+              class="ant-upload-list-item-thumbnail"
+            >
+              Uploading...
+            </div>
+            <a
+              class="ant-upload-list-item-name"
+              href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+              rel="noopener noreferrer"
+              target="_blank"
+              title="image.png"
+            >
+              image.png
+            </a>
+          </div>
+        </div>
+        <div
+          class="ant-upload-list-item-container"
+        >
+          <div
+            class="ant-upload-list-item ant-upload-list-item-error"
+          >
+            <div
+              class="ant-upload-list-item-thumbnail ant-upload-list-item-file"
+            >
+              <span
+                aria-label="picture"
+                class="anticon anticon-picture"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="picture"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 632H136v-39.9l138.5-164.3 150.1 178L658.1 489 888 761.6V792zm0-129.8L664.2 396.8c-3.2-3.8-9-3.8-12.2 0L424.6 666.4l-144-170.7c-3.2-3.8-9-3.8-12.2 0L136 652.7V232h752v430.2z"
+                    fill="#1677ff"
+                  />
+                  <path
+                    d="M424.6 765.8l-150.1-178L136 752.1V792h752v-30.4L658.1 489z"
+                    fill="#e6f4ff"
+                  />
+                  <path
+                    d="M136 652.7l132.4-157c3.2-3.8 9-3.8 12.2 0l144 170.7L652 396.8c3.2-3.8 9-3.8 12.2 0L888 662.2V232H136v420.7zM304 280a88 88 0 110 176 88 88 0 010-176z"
+                    fill="#e6f4ff"
+                  />
+                  <path
+                    d="M276 368a28 28 0 1056 0 28 28 0 10-56 0z"
+                    fill="#e6f4ff"
+                  />
+                  <path
+                    d="M304 456a88 88 0 100-176 88 88 0 000 176zm0-116c15.5 0 28 12.5 28 28s-12.5 28-28 28-28-12.5-28-28 12.5-28 28-28z"
+                    fill="#1677ff"
+                  />
+                </svg>
+              </span>
+            </div>
+            <span
+              class="ant-upload-list-item-name"
+              title="image.png"
+            >
+              image.png
+            </span>
+            <span
+              class="ant-upload-list-item-actions"
+            >
+              <a
+                rel="noopener noreferrer"
+                style="pointer-events: none; opacity: 0.5;"
+                target="_blank"
+                title="Preview file"
+              >
+                <span
+                  aria-label="eye"
+                  class="anticon anticon-eye"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="eye"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
+                    />
+                  </svg>
+                </span>
+              </a>
+            </span>
+          </div>
+          <div
+            class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
+            style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+          >
+            <div
+              class="ant-tooltip-arrow"
+              style="position: absolute; bottom: 0px; left: 0px;"
+            />
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              >
+                Upload error
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="ant-upload ant-upload-select ant-upload-disabled"
+        >
+          <span
+            class="ant-upload ant-upload-disabled"
+            role="button"
+          >
+            <input
+              accept=""
+              disabled=""
+              style="display: none;"
+              type="file"
+            />
+            <div>
+              <span
+                aria-label="plus"
+                class="anticon anticon-plus"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="plus"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
+                  />
+                  <path
+                    d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
+                  />
+                </svg>
+              </span>
+              <div
+                style="margin-top: 8px;"
+              >
+                Upload
+              </div>
+            </div>
+          </span>
+        </div>
+      </div>
+    </span>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <span
+      class="ant-upload-wrapper"
+    >
+      <div
+        class="ant-upload ant-upload-drag ant-upload-disabled"
+      >
+        <span
+          class="ant-upload ant-upload-disabled ant-upload-btn"
+          role="button"
+        >
+          <input
+            accept=""
+            disabled=""
+            style="display: none;"
+            type="file"
+          />
+          <div
+            class="ant-upload-drag-container"
+          >
+            <p
+              class="ant-upload-drag-icon"
+            >
+              <span
+                aria-label="inbox"
+                class="anticon anticon-inbox"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="inbox"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="0 0 1024 1024"
+                  width="1em"
+                >
+                  <path
+                    d="M885.2 446.3l-.2-.8-112.2-285.1c-5-16.1-19.9-27.2-36.8-27.2H281.2c-17 0-32.1 11.3-36.9 27.6L139.4 443l-.3.7-.2.8c-1.3 4.9-1.7 9.9-1 14.8-.1 1.6-.2 3.2-.2 4.8V830a60.9 60.9 0 0060.8 60.8h627.2c33.5 0 60.8-27.3 60.9-60.8V464.1c0-1.3 0-2.6-.1-3.7.4-4.9 0-9.6-1.3-14.1zm-295.8-43l-.3 15.7c-.8 44.9-31.8 75.1-77.1 75.1-22.1 0-41.1-7.1-54.8-20.6S436 441.2 435.6 419l-.3-15.7H229.5L309 210h399.2l81.7 193.3H589.4zm-375 76.8h157.3c24.3 57.1 76 90.8 140.4 90.8 33.7 0 65-9.4 90.3-27.2 22.2-15.6 39.5-37.4 50.7-63.6h156.5V814H214.4V480.1z"
+                  />
+                </svg>
+              </span>
+            </p>
+            <p
+              class="ant-upload-text"
+            >
+              Click or drag file to this area to upload
+            </p>
+            <p
+              class="ant-upload-hint"
+            >
+              Support for a single or bulk upload. Strictly prohibited from uploading company data or other banned files.
+            </p>
+          </div>
+        </span>
+      </div>
+      <div
+        class="ant-upload-list ant-upload-list-text"
+      />
+    </span>
+  </div>
+</div>
+`;
+
+exports[`renders components/upload/demo/debug-disabled.tsx extend context correctly 2`] = `[]`;
+
 exports[`renders components/upload/demo/defaultFileList.tsx extend context correctly 1`] = `
 <span
   class="ant-upload-wrapper"
diff --git a/components/upload/__tests__/__snapshots__/demo.test.ts.snap b/components/upload/__tests__/__snapshots__/demo.test.ts.snap
index b6f963ab5ec3..8cccae045b2e 100644
--- a/components/upload/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/upload/__tests__/__snapshots__/demo.test.ts.snap
@@ -492,6 +492,720 @@ exports[`renders components/upload/demo/customize-progress-bar.tsx correctly 1`]
 </span>
 `;
 
+exports[`renders components/upload/demo/debug-disabled.tsx correctly 1`] = `
+<div
+  class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
+>
+  <div
+    class="ant-space-item"
+  >
+    <span
+      class="ant-upload-wrapper"
+    >
+      <div
+        class="ant-upload ant-upload-select ant-upload-disabled"
+      >
+        <span
+          class="ant-upload ant-upload-disabled"
+          role="button"
+        >
+          <input
+            accept=""
+            disabled=""
+            style="display:none"
+            type="file"
+          />
+          Click Text to Upload
+        </span>
+      </div>
+      <div
+        class="ant-upload-list ant-upload-list-text"
+      />
+    </span>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <span
+      class="ant-upload-wrapper"
+    >
+      <div
+        class="ant-upload ant-upload-select ant-upload-disabled"
+      >
+        <span
+          class="ant-upload ant-upload-disabled"
+          role="button"
+        >
+          <input
+            accept=""
+            disabled=""
+            style="display:none"
+            type="file"
+          />
+          <button
+            class="ant-btn ant-btn-default"
+            type="button"
+          >
+            <span
+              class="ant-btn-icon"
+            >
+              <span
+                aria-label="upload"
+                class="anticon anticon-upload"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="upload"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
+                  />
+                </svg>
+              </span>
+            </span>
+            <span>
+              Click to Upload
+            </span>
+          </button>
+        </span>
+      </div>
+      <div
+        class="ant-upload-list ant-upload-list-text"
+      />
+    </span>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <span
+      class="ant-upload-wrapper ant-upload-picture-card-wrapper"
+    >
+      <div
+        class="ant-upload-list ant-upload-list-picture-card"
+      >
+        <div
+          class="ant-upload-list-item-container"
+        >
+          <div
+            class="ant-upload-list-item ant-upload-list-item-done"
+          >
+            <a
+              class="ant-upload-list-item-thumbnail"
+              href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <img
+                alt="image.png"
+                class="ant-upload-list-item-image"
+                src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+              />
+            </a>
+            <a
+              class="ant-upload-list-item-name"
+              href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+              rel="noopener noreferrer"
+              target="_blank"
+              title="image.png"
+            >
+              image.png
+            </a>
+            <span
+              class="ant-upload-list-item-actions"
+            >
+              <a
+                href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+                rel="noopener noreferrer"
+                target="_blank"
+                title="Preview file"
+              >
+                <span
+                  aria-label="eye"
+                  class="anticon anticon-eye"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="eye"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
+                    />
+                  </svg>
+                </span>
+              </a>
+            </span>
+          </div>
+        </div>
+        <div
+          class="ant-upload-list-item-container"
+        >
+          <div
+            class="ant-upload-list-item ant-upload-list-item-done"
+          >
+            <a
+              class="ant-upload-list-item-thumbnail"
+              href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <img
+                alt="image.png"
+                class="ant-upload-list-item-image"
+                src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+              />
+            </a>
+            <a
+              class="ant-upload-list-item-name"
+              href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+              rel="noopener noreferrer"
+              target="_blank"
+              title="image.png"
+            >
+              image.png
+            </a>
+            <span
+              class="ant-upload-list-item-actions"
+            >
+              <a
+                href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+                rel="noopener noreferrer"
+                target="_blank"
+                title="Preview file"
+              >
+                <span
+                  aria-label="eye"
+                  class="anticon anticon-eye"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="eye"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
+                    />
+                  </svg>
+                </span>
+              </a>
+            </span>
+          </div>
+        </div>
+        <div
+          class="ant-upload-list-item-container"
+        >
+          <div
+            class="ant-upload-list-item ant-upload-list-item-uploading"
+          >
+            <div
+              class="ant-upload-list-item-thumbnail"
+            >
+              Uploading...
+            </div>
+            <a
+              class="ant-upload-list-item-name"
+              href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+              rel="noopener noreferrer"
+              target="_blank"
+              title="image.png"
+            >
+              image.png
+            </a>
+          </div>
+        </div>
+        <div
+          class="ant-upload-list-item-container"
+        >
+          <div
+            class="ant-upload-list-item ant-upload-list-item-error"
+          >
+            <div
+              class="ant-upload-list-item-thumbnail ant-upload-list-item-file"
+            >
+              <span
+                aria-label="picture"
+                class="anticon anticon-picture"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="picture"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 632H136v-39.9l138.5-164.3 150.1 178L658.1 489 888 761.6V792zm0-129.8L664.2 396.8c-3.2-3.8-9-3.8-12.2 0L424.6 666.4l-144-170.7c-3.2-3.8-9-3.8-12.2 0L136 652.7V232h752v430.2z"
+                    fill="#1677ff"
+                  />
+                  <path
+                    d="M424.6 765.8l-150.1-178L136 752.1V792h752v-30.4L658.1 489z"
+                    fill="#e6f4ff"
+                  />
+                  <path
+                    d="M136 652.7l132.4-157c3.2-3.8 9-3.8 12.2 0l144 170.7L652 396.8c3.2-3.8 9-3.8 12.2 0L888 662.2V232H136v420.7zM304 280a88 88 0 110 176 88 88 0 010-176z"
+                    fill="#e6f4ff"
+                  />
+                  <path
+                    d="M276 368a28 28 0 1056 0 28 28 0 10-56 0z"
+                    fill="#e6f4ff"
+                  />
+                  <path
+                    d="M304 456a88 88 0 100-176 88 88 0 000 176zm0-116c15.5 0 28 12.5 28 28s-12.5 28-28 28-28-12.5-28-28 12.5-28 28-28z"
+                    fill="#1677ff"
+                  />
+                </svg>
+              </span>
+            </div>
+            <span
+              class="ant-upload-list-item-name"
+              title="image.png"
+            >
+              image.png
+            </span>
+            <span
+              class="ant-upload-list-item-actions"
+            >
+              <a
+                rel="noopener noreferrer"
+                style="pointer-events:none;opacity:0.5"
+                target="_blank"
+                title="Preview file"
+              >
+                <span
+                  aria-label="eye"
+                  class="anticon anticon-eye"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="eye"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
+                    />
+                  </svg>
+                </span>
+              </a>
+            </span>
+          </div>
+        </div>
+        <div
+          class="ant-upload ant-upload-select ant-upload-disabled"
+        >
+          <span
+            class="ant-upload ant-upload-disabled"
+            role="button"
+          >
+            <input
+              accept=""
+              disabled=""
+              style="display:none"
+              type="file"
+            />
+            <div>
+              <span
+                aria-label="plus"
+                class="anticon anticon-plus"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="plus"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
+                  />
+                  <path
+                    d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
+                  />
+                </svg>
+              </span>
+              <div
+                style="margin-top:8px"
+              >
+                Upload
+              </div>
+            </div>
+          </span>
+        </div>
+      </div>
+    </span>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <span
+      class="ant-upload-wrapper ant-upload-picture-circle-wrapper"
+    >
+      <div
+        class="ant-upload-list ant-upload-list-picture-circle"
+      >
+        <div
+          class="ant-upload-list-item-container"
+        >
+          <div
+            class="ant-upload-list-item ant-upload-list-item-done"
+          >
+            <a
+              class="ant-upload-list-item-thumbnail"
+              href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <img
+                alt="image.png"
+                class="ant-upload-list-item-image"
+                src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+              />
+            </a>
+            <a
+              class="ant-upload-list-item-name"
+              href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+              rel="noopener noreferrer"
+              target="_blank"
+              title="image.png"
+            >
+              image.png
+            </a>
+            <span
+              class="ant-upload-list-item-actions"
+            >
+              <a
+                href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+                rel="noopener noreferrer"
+                target="_blank"
+                title="Preview file"
+              >
+                <span
+                  aria-label="eye"
+                  class="anticon anticon-eye"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="eye"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
+                    />
+                  </svg>
+                </span>
+              </a>
+            </span>
+          </div>
+        </div>
+        <div
+          class="ant-upload-list-item-container"
+        >
+          <div
+            class="ant-upload-list-item ant-upload-list-item-done"
+          >
+            <a
+              class="ant-upload-list-item-thumbnail"
+              href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <img
+                alt="image.png"
+                class="ant-upload-list-item-image"
+                src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+              />
+            </a>
+            <a
+              class="ant-upload-list-item-name"
+              href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+              rel="noopener noreferrer"
+              target="_blank"
+              title="image.png"
+            >
+              image.png
+            </a>
+            <span
+              class="ant-upload-list-item-actions"
+            >
+              <a
+                href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+                rel="noopener noreferrer"
+                target="_blank"
+                title="Preview file"
+              >
+                <span
+                  aria-label="eye"
+                  class="anticon anticon-eye"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="eye"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
+                    />
+                  </svg>
+                </span>
+              </a>
+            </span>
+          </div>
+        </div>
+        <div
+          class="ant-upload-list-item-container"
+        >
+          <div
+            class="ant-upload-list-item ant-upload-list-item-uploading"
+          >
+            <div
+              class="ant-upload-list-item-thumbnail"
+            >
+              Uploading...
+            </div>
+            <a
+              class="ant-upload-list-item-name"
+              href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+              rel="noopener noreferrer"
+              target="_blank"
+              title="image.png"
+            >
+              image.png
+            </a>
+          </div>
+        </div>
+        <div
+          class="ant-upload-list-item-container"
+        >
+          <div
+            class="ant-upload-list-item ant-upload-list-item-error"
+          >
+            <div
+              class="ant-upload-list-item-thumbnail ant-upload-list-item-file"
+            >
+              <span
+                aria-label="picture"
+                class="anticon anticon-picture"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="picture"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 632H136v-39.9l138.5-164.3 150.1 178L658.1 489 888 761.6V792zm0-129.8L664.2 396.8c-3.2-3.8-9-3.8-12.2 0L424.6 666.4l-144-170.7c-3.2-3.8-9-3.8-12.2 0L136 652.7V232h752v430.2z"
+                    fill="#1677ff"
+                  />
+                  <path
+                    d="M424.6 765.8l-150.1-178L136 752.1V792h752v-30.4L658.1 489z"
+                    fill="#e6f4ff"
+                  />
+                  <path
+                    d="M136 652.7l132.4-157c3.2-3.8 9-3.8 12.2 0l144 170.7L652 396.8c3.2-3.8 9-3.8 12.2 0L888 662.2V232H136v420.7zM304 280a88 88 0 110 176 88 88 0 010-176z"
+                    fill="#e6f4ff"
+                  />
+                  <path
+                    d="M276 368a28 28 0 1056 0 28 28 0 10-56 0z"
+                    fill="#e6f4ff"
+                  />
+                  <path
+                    d="M304 456a88 88 0 100-176 88 88 0 000 176zm0-116c15.5 0 28 12.5 28 28s-12.5 28-28 28-28-12.5-28-28 12.5-28 28-28z"
+                    fill="#1677ff"
+                  />
+                </svg>
+              </span>
+            </div>
+            <span
+              class="ant-upload-list-item-name"
+              title="image.png"
+            >
+              image.png
+            </span>
+            <span
+              class="ant-upload-list-item-actions"
+            >
+              <a
+                rel="noopener noreferrer"
+                style="pointer-events:none;opacity:0.5"
+                target="_blank"
+                title="Preview file"
+              >
+                <span
+                  aria-label="eye"
+                  class="anticon anticon-eye"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="eye"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
+                    />
+                  </svg>
+                </span>
+              </a>
+            </span>
+          </div>
+        </div>
+        <div
+          class="ant-upload ant-upload-select ant-upload-disabled"
+        >
+          <span
+            class="ant-upload ant-upload-disabled"
+            role="button"
+          >
+            <input
+              accept=""
+              disabled=""
+              style="display:none"
+              type="file"
+            />
+            <div>
+              <span
+                aria-label="plus"
+                class="anticon anticon-plus"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="plus"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
+                  />
+                  <path
+                    d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
+                  />
+                </svg>
+              </span>
+              <div
+                style="margin-top:8px"
+              >
+                Upload
+              </div>
+            </div>
+          </span>
+        </div>
+      </div>
+    </span>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <span
+      class="ant-upload-wrapper"
+    >
+      <div
+        class="ant-upload ant-upload-drag ant-upload-disabled"
+      >
+        <span
+          class="ant-upload ant-upload-disabled ant-upload-btn"
+          role="button"
+        >
+          <input
+            accept=""
+            disabled=""
+            style="display:none"
+            type="file"
+          />
+          <div
+            class="ant-upload-drag-container"
+          >
+            <p
+              class="ant-upload-drag-icon"
+            >
+              <span
+                aria-label="inbox"
+                class="anticon anticon-inbox"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="inbox"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="0 0 1024 1024"
+                  width="1em"
+                >
+                  <path
+                    d="M885.2 446.3l-.2-.8-112.2-285.1c-5-16.1-19.9-27.2-36.8-27.2H281.2c-17 0-32.1 11.3-36.9 27.6L139.4 443l-.3.7-.2.8c-1.3 4.9-1.7 9.9-1 14.8-.1 1.6-.2 3.2-.2 4.8V830a60.9 60.9 0 0060.8 60.8h627.2c33.5 0 60.8-27.3 60.9-60.8V464.1c0-1.3 0-2.6-.1-3.7.4-4.9 0-9.6-1.3-14.1zm-295.8-43l-.3 15.7c-.8 44.9-31.8 75.1-77.1 75.1-22.1 0-41.1-7.1-54.8-20.6S436 441.2 435.6 419l-.3-15.7H229.5L309 210h399.2l81.7 193.3H589.4zm-375 76.8h157.3c24.3 57.1 76 90.8 140.4 90.8 33.7 0 65-9.4 90.3-27.2 22.2-15.6 39.5-37.4 50.7-63.6h156.5V814H214.4V480.1z"
+                  />
+                </svg>
+              </span>
+            </p>
+            <p
+              class="ant-upload-text"
+            >
+              Click or drag file to this area to upload
+            </p>
+            <p
+              class="ant-upload-hint"
+            >
+              Support for a single or bulk upload. Strictly prohibited from uploading company data or other banned files.
+            </p>
+          </div>
+        </span>
+      </div>
+      <div
+        class="ant-upload-list ant-upload-list-text"
+      />
+    </span>
+  </div>
+</div>
+`;
+
 exports[`renders components/upload/demo/defaultFileList.tsx correctly 1`] = `
 <span
   class="ant-upload-wrapper"
diff --git a/components/upload/__tests__/upload.test.tsx b/components/upload/__tests__/upload.test.tsx
index 891c899c1178..6e1d790dd568 100644
--- a/components/upload/__tests__/upload.test.tsx
+++ b/components/upload/__tests__/upload.test.tsx
@@ -1,13 +1,14 @@
+import React, { useEffect, useRef } from 'react';
 import { produce } from 'immer';
-import { cloneDeep } from 'lodash';
+import cloneDeep from 'lodash/cloneDeep';
 import type { UploadRequestOption } from 'rc-upload/lib/interface';
-import React, { useEffect, useRef } from 'react';
+
 import type { RcFile, UploadFile, UploadProps } from '..';
 import Upload from '..';
+import { resetWarned } from '../../_util/warning';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import { act, fireEvent, render, waitFakeTimer } from '../../../tests/utils';
-import { resetWarned } from '../../_util/warning';
 import Form from '../../form';
 import { getFileItem, isImageUrl, removeFileItem } from '../utils';
 import { setup, teardown } from './mock';
diff --git a/components/upload/__tests__/uploadlist.test.tsx b/components/upload/__tests__/uploadlist.test.tsx
index 95c3f219b7f7..d7cb156775d3 100644
--- a/components/upload/__tests__/uploadlist.test.tsx
+++ b/components/upload/__tests__/uploadlist.test.tsx
@@ -579,6 +579,34 @@ describe('Upload List', () => {
     unmount();
   });
 
+  // https://github.com/ant-design/ant-design/issues/27519
+  // https://github.com/ant-design/ant-design/issues/45735
+  it('should show remove icon when showRemoveIcon is true', () => {
+    const list = [
+      {
+        name: 'image',
+        status: 'uploading',
+        uid: '-4',
+        url: 'https://cdn.xxx.com/aaa',
+      },
+    ];
+
+    const { container: wrapper, unmount } = render(
+      <Upload
+        listType="picture"
+        defaultFileList={list as UploadProps['defaultFileList']}
+        showUploadList={{
+          showRemoveIcon: true,
+        }}
+        disabled
+      >
+        <button type="button">upload</button>
+      </Upload>,
+    );
+    expect(wrapper.querySelector('.anticon-delete')).toBeTruthy();
+    unmount();
+  });
+
   it('should support custom onClick in custom icon', async () => {
     const handleRemove = jest.fn();
     const handleChange = jest.fn();
diff --git a/components/upload/demo/debug-disabled.md b/components/upload/demo/debug-disabled.md
new file mode 100644
index 000000000000..922e5b96c8cf
--- /dev/null
+++ b/components/upload/demo/debug-disabled.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+Disabled Style Debug.
+
+## en-US
+
+Disabled Style Debug.
diff --git a/components/upload/demo/debug-disabled.tsx b/components/upload/demo/debug-disabled.tsx
new file mode 100644
index 000000000000..a01b0f871826
--- /dev/null
+++ b/components/upload/demo/debug-disabled.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import { InboxOutlined, PlusOutlined, UploadOutlined } from '@ant-design/icons';
+import { Button, Space, Upload } from 'antd';
+import type { UploadFile } from 'antd/es/upload/interface';
+
+const { Dragger } = Upload;
+
+const fileList: UploadFile[] = [
+  {
+    uid: '-1',
+    name: 'image.png',
+    status: 'done',
+    url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+  },
+  {
+    uid: '-2',
+    name: 'image.png',
+    status: 'done',
+    url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+  },
+  {
+    uid: '-xxx',
+    percent: 50,
+    name: 'image.png',
+    status: 'uploading',
+    url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+  },
+  {
+    uid: '-5',
+    name: 'image.png',
+    status: 'error',
+  },
+];
+
+const App: React.FC = () => {
+  const uploadButton = (
+    <div>
+      <PlusOutlined />
+      <div style={{ marginTop: 8 }}>Upload</div>
+    </div>
+  );
+
+  return (
+    <Space direction="vertical">
+      <Upload disabled>Click Text to Upload</Upload>
+      <Upload disabled>
+        <Button icon={<UploadOutlined />}>Click to Upload</Button>
+      </Upload>
+      <Upload name="avatar" listType="picture-card" fileList={fileList} disabled>
+        {uploadButton}
+      </Upload>
+      <Upload name="avatar" listType="picture-circle" fileList={fileList} disabled>
+        {uploadButton}
+      </Upload>
+      <Dragger disabled>
+        <p className="ant-upload-drag-icon">
+          <InboxOutlined />
+        </p>
+        <p className="ant-upload-text">Click or drag file to this area to upload</p>
+        <p className="ant-upload-hint">
+          Support for a single or bulk upload. Strictly prohibited from uploading company data or
+          other banned files.
+        </p>
+      </Dragger>
+    </Space>
+  );
+};
+
+export default App;
diff --git a/components/upload/index.en-US.md b/components/upload/index.en-US.md
index d7c32eb5a9a2..1321dbd6dadf 100644
--- a/components/upload/index.en-US.md
+++ b/components/upload/index.en-US.md
@@ -42,6 +42,7 @@ Uploading is the process of publishing information (web pages, text, pictures, v
 <code src="./demo/crop-image.tsx">Crop image before uploading</code>
 <code src="./demo/customize-progress-bar.tsx">Customize Progress Bar</code>
 <code src="./demo/component-token.tsx" debug>Component Token</code>
+<code src="./demo/debug-disabled.tsx" debug>Debug Disabled Styles</code>
 
 ## API
 
@@ -56,7 +57,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | data | Uploading extra params or function which can return uploading extra params | object \| (file) => object \| Promise&lt;object> | - |  |
 | defaultFileList | Default list of files that have been uploaded | object\[] | - |  |
 | directory | Support upload whole directory ([caniuse](https://caniuse.com/#feat=input-file-directory)) | boolean | false |  |
-| disabled | Disable upload button | boolean | false |  |
+| disabled | Disable upload button | boolean | false | When customizing Upload children, please pass the disabled attribute to the child node at the same time to ensure the disabled rendering effect is consistent. |
 | fileList | List of files that have been uploaded (controlled). Here is a common issue [#2423](https://github.com/ant-design/ant-design/issues/2423) when using it | [UploadFile](#uploadfile)\[] | - |  |
 | headers | Set request headers, valid above IE10 | object | - |  |
 | iconRender | Custom show icon | (file: UploadFile, listType?: UploadListType) => ReactNode | - |  |
diff --git a/components/upload/index.zh-CN.md b/components/upload/index.zh-CN.md
index 58ecfc11c9fd..644f8ff739d9 100644
--- a/components/upload/index.zh-CN.md
+++ b/components/upload/index.zh-CN.md
@@ -43,6 +43,7 @@ demo:
 <code src="./demo/crop-image.tsx">上传前裁切图片</code>
 <code src="./demo/customize-progress-bar.tsx">自定义进度条样式</code>
 <code src="./demo/component-token.tsx" debug>组件 Token</code>
+<code src="./demo/debug-disabled.tsx" debug>Debug Disabled Styles</code>
 
 ## API
 
@@ -57,7 +58,7 @@ demo:
 | data | 上传所需额外参数或返回上传额外参数的方法 | object\|(file) => object \| Promise&lt;object> | - |  |
 | defaultFileList | 默认已经上传的文件列表 | object\[] | - |  |
 | directory | 支持上传文件夹（[caniuse](https://caniuse.com/#feat=input-file-directory)） | boolean | false |  |
-| disabled | 是否禁用 | boolean | false |  |
+| disabled | 是否禁用 | boolean | false | 对于自定义 Upload children 时请将 disabled 属性同时传给 child node 确保 disabled 渲染效果保持一致 |
 | fileList | 已经上传的文件列表（受控），使用此参数时，如果遇到 `onChange` 只调用一次的问题，请参考 [#2423](https://github.com/ant-design/ant-design/issues/2423) | [UploadFile](#uploadfile)\[] | - |  |
 | headers | 设置上传的请求头部，IE10 以上有效 | object | - |  |
 | iconRender | 自定义显示 icon | (file: UploadFile, listType?: UploadListType) => ReactNode | - |  |
diff --git a/components/upload/style/dragger.ts b/components/upload/style/dragger.ts
index f4ca5e65b370..40e54e6f3117 100644
--- a/components/upload/style/dragger.ts
+++ b/components/upload/style/dragger.ts
@@ -33,7 +33,10 @@ const genDraggerStyle: GenerateStyle<UploadToken> = (token) => {
           verticalAlign: 'middle',
         },
 
-        [`&:not(${componentCls}-disabled):hover`]: {
+        [`
+          &:not(${componentCls}-disabled):hover,
+          &-hover:not(${componentCls}-disabled)
+        `]: {
           borderColor: token.colorPrimaryHover,
         },
 
diff --git a/components/watermark/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/watermark/__tests__/__snapshots__/demo-extend.test.ts.snap
index 65a7c0f9069d..bdbac0ff09b3 100644
--- a/components/watermark/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/watermark/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -275,7 +275,7 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1
                             </div>
                             <div
                               class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
-                              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; width: 68px;"
+                              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
                             >
                               <div>
                                 <div
@@ -1249,7 +1249,7 @@ Array [
         type="button"
       >
         <span>
-          Show Modal
+          Show in Modal
         </span>
       </button>
     </div>
@@ -1261,10 +1261,30 @@ Array [
         type="button"
       >
         <span>
-          Show Drawer
+          Show in Drawer
         </span>
       </button>
     </div>
+    <div
+      class="ant-space-item"
+    >
+      <button
+        class="ant-btn ant-btn-default"
+        type="button"
+      >
+        <span>
+          Not Show in Drawer
+        </span>
+      </button>
+    </div>
+  </div>,
+  <div
+    class=""
+    style="position: relative;"
+  >
+    <div
+      style="z-index: 9; position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; background-repeat: repeat; background-position: 0px 0px; background-image: url('data:image/png;base64,00'); background-size: 218px; visibility: visible !important;"
+    />
   </div>,
   <div
     class=""
diff --git a/components/watermark/__tests__/__snapshots__/demo.test.ts.snap b/components/watermark/__tests__/__snapshots__/demo.test.ts.snap
index d22cb48d0dd3..144527018611 100644
--- a/components/watermark/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/watermark/__tests__/__snapshots__/demo.test.ts.snap
@@ -811,7 +811,7 @@ Array [
         type="button"
       >
         <span>
-          Show Modal
+          Show in Modal
         </span>
       </button>
     </div>
@@ -823,7 +823,19 @@ Array [
         type="button"
       >
         <span>
-          Show Drawer
+          Show in Drawer
+        </span>
+      </button>
+    </div>
+    <div
+      class="ant-space-item"
+    >
+      <button
+        class="ant-btn ant-btn-default"
+        type="button"
+      >
+        <span>
+          Not Show in Drawer
         </span>
       </button>
     </div>
@@ -832,5 +844,9 @@ Array [
     class=""
     style="position:relative"
   />,
+  <div
+    class=""
+    style="position:relative"
+  />,
 ]
 `;
diff --git a/components/watermark/__tests__/index.test.tsx b/components/watermark/__tests__/index.test.tsx
index 5517533de1a1..dcf21ca7cda5 100644
--- a/components/watermark/__tests__/index.test.tsx
+++ b/components/watermark/__tests__/index.test.tsx
@@ -134,6 +134,19 @@ describe('Watermark', () => {
       <Drawer open />,
       () => document.body.querySelector('.ant-drawer-content')!.lastChild!,
     );
+
+    it('inherit = false', async () => {
+      render(
+        <Watermark inherit={false}>
+          <Drawer open />
+        </Watermark>,
+      );
+      await waitFakeTimer();
+
+      expect(document.body.querySelector('.ant-drawer-content')!.lastChild).toHaveClass(
+        'ant-drawer-wrapper-body',
+      );
+    });
   });
 
   it('should not crash if content is empty string', async () => {
diff --git a/components/watermark/demo/portal.tsx b/components/watermark/demo/portal.tsx
index cfb1223fa751..64bd52e82ef4 100644
--- a/components/watermark/demo/portal.tsx
+++ b/components/watermark/demo/portal.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Watermark, Modal, Drawer, Button, Space } from 'antd';
+import { Button, Drawer, Modal, Space, Watermark } from 'antd';
 
 const placeholder = (
   <div
@@ -18,15 +18,18 @@ const placeholder = (
 const App: React.FC = () => {
   const [showModal, setShowModal] = React.useState(false);
   const [showDrawer, setShowDrawer] = React.useState(false);
+  const [showDrawer2, setShowDrawer2] = React.useState(false);
 
   const closeModal = () => setShowModal(false);
   const closeDrawer = () => setShowDrawer(false);
+  const closeDrawer2 = () => setShowDrawer2(false);
 
   return (
     <>
       <Space>
-        <Button onClick={() => setShowModal(true)}>Show Modal</Button>
-        <Button onClick={() => setShowDrawer(true)}>Show Drawer</Button>
+        <Button onClick={() => setShowModal(true)}>Show in Modal</Button>
+        <Button onClick={() => setShowDrawer(true)}>Show in Drawer</Button>
+        <Button onClick={() => setShowDrawer2(true)}>Not Show in Drawer</Button>
       </Space>
 
       <Watermark content="Ant Design">
@@ -43,6 +46,11 @@ const App: React.FC = () => {
           {placeholder}
         </Drawer>
       </Watermark>
+      <Watermark content="Ant Design" inherit={false}>
+        <Drawer destroyOnClose open={showDrawer2} title="Drawer" onClose={closeDrawer2}>
+          {placeholder}
+        </Drawer>
+      </Watermark>
     </>
   );
 };
diff --git a/components/watermark/index.en-US.md b/components/watermark/index.en-US.md
index b982669758d6..cedad2cd0f4f 100644
--- a/components/watermark/index.en-US.md
+++ b/components/watermark/index.en-US.md
@@ -34,6 +34,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | --- | --- | --- | --- | --- |
 | width | The width of the watermark, the default value of `content` is its own width | number | 120 |  |
 | height | The height of the watermark, the default value of `content` is its own height | number | 64 |  |
+| inherit | Pass the watermark to the pop-up component such as Modal, Drawer | boolean | true | 5.11.0 |
 | rotate | When the watermark is drawn, the rotation Angle, unit `°` | number | -22 |  |
 | zIndex | The z-index of the appended watermark element | number | 9 |  |
 | image | Image source, it is recommended to export 2x or 3x image, high priority (support base64 format) | string | - |  |
diff --git a/components/watermark/index.tsx b/components/watermark/index.tsx
index 95fdd9911ab4..2eb512b02dee 100644
--- a/components/watermark/index.tsx
+++ b/components/watermark/index.tsx
@@ -31,6 +31,7 @@ export interface WatermarkProps {
   gap?: [number, number];
   offset?: [number, number];
   children?: React.ReactNode;
+  inherit?: boolean;
 }
 
 /**
@@ -63,6 +64,7 @@ const Watermark: React.FC<WatermarkProps> = (props) => {
     gap = [DEFAULT_GAP_X, DEFAULT_GAP_Y],
     offset,
     children,
+    inherit = true,
   } = props;
   const [, token] = useToken();
   const {
@@ -270,13 +272,19 @@ const Watermark: React.FC<WatermarkProps> = (props) => {
   );
 
   // ============================= Render =============================
+  const childNode = inherit ? (
+    <WatermarkContext.Provider value={watermarkContext}>{children}</WatermarkContext.Provider>
+  ) : (
+    children
+  );
+
   return (
     <div
       ref={setContainer}
       className={classNames(className, rootClassName)}
       style={{ position: 'relative', ...style }}
     >
-      <WatermarkContext.Provider value={watermarkContext}>{children}</WatermarkContext.Provider>
+      {childNode}
     </div>
   );
 };
diff --git a/components/watermark/index.zh-CN.md b/components/watermark/index.zh-CN.md
index cda9a2d18b32..efeef1145a82 100644
--- a/components/watermark/index.zh-CN.md
+++ b/components/watermark/index.zh-CN.md
@@ -36,6 +36,7 @@ tag: New
 | --- | --- | --- | --- | --- |
 | width | 水印的宽度，`content` 的默认值为自身的宽度 | number | 120 |  |
 | height | 水印的高度，`content` 的默认值为自身的高度 | number | 64 |  |
+| inherit | 是否将水印传导给弹出组件如 Modal、Drawer | boolean | true | 5.11.0 |
 | rotate | 水印绘制时，旋转的角度，单位 `°` | number | -22 |  |
 | zIndex | 追加的水印元素的 z-index | number | 9 |  |
 | image | 图片源，建议导出 2 倍或 3 倍图，优先级高 (支持 base64 格式) | string | - |  |
diff --git a/contributors.json b/contributors.json
index bb06a24ebde3..3fc74141b3eb 100644
--- a/contributors.json
+++ b/contributors.json
@@ -264,7 +264,6 @@
   "Eugene Molokov",
   "Eusen",
   "Evan Charlton",
-  "EvanOne（文一）",
   "Evgeny Kuznetsov",
   "Eward Song",
   "FJHou",
@@ -300,6 +299,7 @@
   "Geoffrey Bell",
   "George Ciobanu",
   "George Gray",
+  "George H",
   "Germini",
   "Gerson Garrido",
   "Gherciu Gheorghe",
@@ -368,6 +368,8 @@
   "ImJoeHs",
   "Infinity",
   "Inian",
+  "Ion Lizarazu",
+  "Isaac Batista",
   "Israel kusayev",
   "Italo",
   "Ivan",
@@ -400,6 +402,7 @@
   "Jaroslav Bereza",
   "Jarret Moses",
   "Jarvis1010",
+  "JarvisArt",
   "Jase Owens",
   "Jase Pellerin",
   "Jason",
@@ -448,6 +451,7 @@
   "Johnny Lim",
   "Johnny-young",
   "Johnsen",
+  "Jonasz",
   "Jonatas Walker",
   "Jonathan Gabaut",
   "Jonathan Lee",
@@ -467,6 +471,7 @@
   "Julia Passynkova",
   "Julien Confetti",
   "Jun Wooram",
+  "Jung Min O",
   "JuniorTour",
   "Junwoo Ji",
   "Junyu Zhan",
@@ -499,6 +504,7 @@
   "Kian",
   "Kieren",
   "Kiho · Cham",
+  "Kilig",
   "Kim, Harim",
   "Kimmo Saari",
   "KingxBeta",
@@ -531,6 +537,7 @@
   "LeoYang",
   "Leon Koole",
   "Leon Shi",
+  "Leslie Wu",
   "Lewis",
   "Li C. Pan",
   "Li Chao",
@@ -594,6 +601,7 @@
   "Matt Wilkinson",
   "Max",
   "Maximilian Meyer",
+  "Mayowa Sogbein",
   "Md_ZubairAhmed",
   "Mehdi Salem Naraghi",
   "MeiLin",
@@ -658,6 +666,7 @@
   "Neil",
   "Nekron",
   "Neo Tan",
+  "Nerohero",
   "Neto Braghetto",
   "Neverland",
   "Nghiệp",
@@ -680,6 +689,7 @@
   "Noel Kim (김민혁)",
   "Nokecy",
   "OAwan",
+  "Oceansdeep7",
   "Olaniyi Philip Ojeyinka",
   "Oleg Kuzava",
   "Oleksandr Kovalchuk",
@@ -840,6 +850,7 @@
   "Sukka",
   "Sumit Vekariya",
   "Sunny Luo",
+  "Sven",
   "Sven Efftinge",
   "Svyatoslav",
   "SyMind",
@@ -851,6 +862,7 @@
   "Tannmay S Gupta",
   "Tao",
   "Tao Zhang",
+  "Tao Zhou",
   "Taucher Christoph",
   "Taylor Sabell",
   "Ted Shin",
@@ -889,11 +901,13 @@
   "Varun Dey",
   "Varun Sharma",
   "Vemund Santi",
+  "ViPro (京京)",
   "Vic",
   "Victor",
   "Victor Repkow",
   "Victor Ye",
   "Vijay Thirugnanam",
+  "Vincent",
   "Vincent Zhang",
   "Vineet Srivastav",
   "Viorel Cojocaru",
@@ -902,8 +916,10 @@
   "Vitaly Budovski",
   "ViviaRui",
   "Vlad Vovk",
+  "Vladimir Yamshikov",
   "Vu Hoang Minh",
   "Vyacheslav Kamenev",
+  "Vyacheslav Sedykh",
   "Walter Barbagallo",
   "Wang Jun",
   "Wang Riwu",
@@ -995,10 +1011,12 @@
   "Zester Quinn Albano",
   "Zhang Zhi",
   "Zhanghao",
+  "Zhaolin Liang",
   "Zheeeng",
   "ZhiHao Li",
   "Zhiqiang Gong",
   "Zhongjan",
+  "Zhou Bill",
   "Zhou Fang",
   "ZhouZhen",
   "Zhuo Chen",
@@ -1062,6 +1080,7 @@
   "chen wen jun",
   "chen-jingjie",
   "chencheng (云谦)",
+  "cheng87126",
   "chenlei",
   "chenlong",
   "chensw",
@@ -1081,6 +1100,7 @@
   "cooljser",
   "corneyl",
   "csr632",
+  "cwg",
   "daczczcz1",
   "dainli",
   "dally_G",
@@ -1113,6 +1133,7 @@
   "eruca",
   "ezpub",
   "fairyland",
+  "faruxue",
   "feeng",
   "feng zhi hao",
   "fengmk2",
@@ -1205,6 +1226,7 @@
   "keng",
   "kenve",
   "kermolaev",
+  "killa",
   "kily zhou",
   "kiner-tang(文辉)",
   "klouskingsley",
@@ -1220,6 +1242,7 @@
   "leadream",
   "lehug",
   "leijingdao",
+  "leixd1994",
   "lewis liu",
   "lexlexa",
   "lgmcolin",
@@ -1386,6 +1409,7 @@
   "wangxing",
   "wangxingkang",
   "wangxueliang",
+  "wangzhihao",
   "wanli",
   "warmhug",
   "weited",
@@ -1490,6 +1514,7 @@
   "二手掉包工程师",
   "二货爱吃白萝卜",
   "云剪者",
+  "云泥",
   "付引",
   "何乐",
   "何志勇",
@@ -1534,6 +1559,7 @@
   "期贤",
   "未觉雨声",
   "朮厃",
+  "李勇",
   "李瀚",
   "李环冀",
   "杨兴洲",
diff --git a/docs/blog/css-var-plan.en-US.md b/docs/blog/css-var-plan.en-US.md
new file mode 100644
index 000000000000..3dc9c946e237
--- /dev/null
+++ b/docs/blog/css-var-plan.en-US.md
@@ -0,0 +1,204 @@
+---
+title: Ant Design meets CSS Variables
+date: 2023-11-21
+author: MadCcc
+---
+
+## Pain of Ant Design 5.0
+
+Ant Design allows customization of theme tokens through ConfigProvider, supporting nested themes. Nested theme tokens inherit modifications made in the parent theme. From this perspective, antd's theme capabilities have reached their peak in the 5.0 version.
+
+However, the purpose of this article is not to praise antd 5.0 again; that has already been done when it was released. Since the release of version 5.0, almost a year has passed, during which the community has raised various questions and demands. These issues and directions for improvement are the pain points faced by antd.
+
+### CSS Output Size
+
+One significant impact is on users in SSR (Server-Side Rendering) scenarios.
+
+While antd switched to cssinjs, it implemented the ability to selectively import CSS without relying on babel-plugin-import for automatic tree-shaking. However, compared to component libraries like MUI or Mantine, which started using cssinjs from the beginning, antd's adoption of cssinjs can be considered a partial departure. One key difference is that **antd's cssinjs does not follow changes in component props**.
+
+In libraries like MUI or Mantine 6.x, the generated CSS for components with different props configurations is actually different. These styles are placed within a hash class. For example, named classNames in MUI, such as `xxx-focused`, are essentially empty shells, allowing users to customize them easily. The benefit is a significant reduction in the size of the style file. If a page only uses the outlined variant of a Button, there won't be any styles for the filled variant in the final output.
+
+![image](https://github.com/ant-design/ant-design/assets/27722486/e3a1fbe4-2cba-487b-9e3d-06233dda40b4)
+
+In antd 5.0, whenever a component is used, antd automatically includes all styles related to that component—whether they are used or not. This approach has two reasons:
+
+1. Antd did not change the organization of styles from version 4.x to 5.x; it still combines classes to achieve different style effects.
+2. To reduce the frequency of dynamically generating styles, antd has implemented a caching strategy at the component level. The same component will only insert styles once, reducing the performance cost of cssinjs during CSS serialization.
+
+It is evident that the advantages of traditional cssinjs and antd are also each other's disadvantages. Antd's css output size becomes significantly large, which is particularly noticeable in SSR scenarios where inline style tags are required.
+
+### Theme Switching
+
+When switching between light and dark themes in cssinjs component libraries, two common issues arise:
+
+1. There is a delay when switching themes.
+2. When a static site is switched to a dark theme and then refreshed, it always reverts from the light theme to the dark theme.
+
+Antd has encountered these two issues, and they stem from the nature of runtime-generated styles using cssinjs. The delay is due to the need for a new round of CSS serialization when switching themes. The inability to seamlessly refresh from a static site to a dark theme is because static sites cannot retain the styles of the switched theme.
+
+These issues are non-existent in theme systems based on CSS variables. Examples of such pages include [react.dev](https://react.dev). The principle is simple:
+
+1. Modifying CSS variables does not require re-serialization of CSS, eliminating this performance cost.
+2. CSS variables can be injected before page rendering using a script under the body, blocking rendering and avoiding unnecessary style rendering.
+
+## How to Break Through?
+
+Looking at the case of Mantine 7.0, it seems that a theme system/style engine based on CSS variables has a better user experience. However, for cssinjs, there are reasons not to abandon its flexible theme capabilities. In other words, there is a desire to have both the small size and fast switching features of CSS variables, while retaining cssinjs's theme nesting and ability to have multiple themes coexist.
+
+Naturally, the question arises: can we combine cssinjs with CSS variables? After all, they don't seem to be completely mutually exclusive.
+
+## Ant Design and CSS Variables
+
+Antd has collaborated with CSS variables before, as seen in the 4.x era, where there was a set of CSS files based on CSS variables. In version 4.x, antd's theme was mainly implemented using less variables, assigning less variables as CSS variable names, and then assigning values to these CSS variables elsewhere. This was the capability of antd's 4.x CSS variable theme.
+
+The theme capability of antd 5.0 is actually an evolution from 4.x, still using a set of theme tokens for customization. The current theme system's processing flow involves calculating a unique hash variable based on the values of theme tokens to ensure isolation between themes:
+
+![image](https://github.com/ant-design/ant-design/assets/27722486/29ccf0be-3b8e-4ab2-a01d-24dff391ea98)
+
+> The :where selector does not increase the overall specificity, making it suitable for theme isolation.
+
+### Mapping CSS Variables
+
+Naturally, we thought of mapping all tokens to CSS variables. In this [RFC](https://github.com/ant-design/ant-design/discussions/44654), all tokens are mapped to CSS variables, and CSS variables are used to fill the values of the tokens with. As a result, the hash calculation for theme isolation becomes fixed because the values of each token, now represented as CSS variables, will not change. Now, we have a stable HTML, and switching themes only requires replacing the corresponding CSS variables without going through the lengthy cssinjs serialization process.
+
+![image](https://github.com/ant-design/ant-design/assets/27722486/ef9eeb23-b231-45f9-b27d-9ea9b21dc098)
+
+In this approach, the insertion of CSS variables is excluded from the lifecycle of the entire theme. Antd only cares about the replacement between tokens and CSS variables. As long as antd applies CSS variables to various parts of component styles, we can build themes based on CSS variables on top of this.
+
+As shown in the figure, the control of CSS variables for the entire theme is placed under the `:root` selector. This implies that we can modify these CSS variables at any time, either at compile time or in the browser environment. However, placing CSS variables under :root also means that this will be a theme affecting the entire document, and we cannot make adjustments to a specific part of the theme.
+
+Now the question becomes: Can we make CSS variables work locally?
+
+### CSS Variables Isolation
+
+The answer is yes. Recall the hash introduced in 5.0. It plays a crucial role in solving this problem.
+
+By constraining CSS variables within a hash class selector, we can make these CSS variables only effective for components under that theme. At the same time, we can use the provided theme context to dynamically generate CSS variables based on the current theme. We directly convert the values of current theme tokens into CSS variables, combining them with the current hash value to obtain a complete set of styles.
+
+![image](https://github.com/ant-design/ant-design/assets/27722486/7f01d46c-63be-4a81-b576-bfbbfb9a2988)
+
+It appears perfect, utilizing the existing theme features to achieve the isolation of CSS variables between themes. However, up to this point, there is a significant flaw in this approach, as mentioned earlier: to ensure the stability of HTML, when calculating the hash, we actually use the mapped token values to CSS variables, similar to var(--color-primary); and these values do not change because we do not intentionally modify the mapping between CSS variables and tokens. This results in a **fixed hash value**.
+
+Consider the scenario of nesting:
+
+```tsx
+<ConfigProvider theme={{ token: { colorPrimary: 'blue' } }}>
+  <Button>Button 1</Button>
+  <ConfigProvider theme={{ token: { colorPrimary: 'green' } }}>
+    <Button>Button 2</Button>
+  </ConfigProvider>
+</ConfigProvider>
+```
+
+In the current theme system of Ant Design 5.0, the hash values corresponding to these two buttons are different. As a result, their styles do not affect each other, illustrating the role of hash in theme isolation.
+
+However, in the CSS variable solution, the modification of these two tokens does not actually affect the calculation of the hash. Consequently, theme isolation breaks down, and both `colorPrimary` values end up under the same hash, leading to mutual overlap. To maintain theme isolation, we require different hash values for Button 1 and Button 2, creating a clear contradiction and a new issue.
+
+Let's reconsider the original intention of adopting CSS variables: to achieve faster theme switching and reduce the performance overhead of theme changes. It can be observed that the emphasis is on **switching**.
+
+For nested or parallel themes, their focus is not on "switching" but on "isolation." Therefore, they require distinct and stable hash values, and in most scenarios, their HTML remains stable.
+
+For theme switching, the emphasis is on "switching". What we expect is to achieve fast and high-performance theme switching using CSS variables under a fixed hash (i.e., stable HTML). This does not conflict with theme isolation. Therefore, we still need different hashes to achieve CSS variable isolation. On top of this, different themes corresponding to various hash values can be generated based on user preferences for CSS variable styles.
+
+It might sound a bit abstract, so let's use code to explain the desired outcome. Taking the example of nested themes mentioned earlier, here's what we want the generated CSS file to include:
+
+```css
+:where(.css-hash1).ant-btn {
+  background-color: var(--color-primary);
+}
+
+:where(.css-hash2).ant-btn {
+  background-color: var(--color-primary);
+}
+
+.css-hash1 {
+  --color-primary: blue;
+}
+
+.css-hash2 {
+  --color-primary: green;
+}
+```
+
+The result is as expected, combining CSS variables with hashes. But in fact, we should adjust our thinking slightly and return the hash calculation to the original value of the token, or directly use CSS variables to calculate the hash:
+
+![image](https://github.com/ant-design/ant-design/assets/27722486/e4c2a109-34d6-4fe7-a3e4-03ed532775b8)
+
+<a name="HAyMz"></a>
+
+### CSS Variables Switching
+
+So far, we have integrated theme isolation with CSS variables using hash, meeting our ambitious goals. However, there is still an issue with hash. It is dynamically calculated, and users cannot know the hash value in advance, making it impossible to directly manipulate CSS variables using JavaScript.
+
+But there is always a solution. Besides directly using JavaScript to modify CSS variables, we can also utilize CSS selectors to switch CSS variables in different scenarios. This requires us to generate CSS variables for different themes in advance:
+
+```css
+/* Using custom classes as selectors */
+.light .css-hash {
+  --color-text: rgba(0, 0, 0, 0.85);
+}
+
+.dark .css-hash {
+  --color-text: rgba(255, 255, 255, 0.88);
+}
+```
+
+At this point, we only need to switch the class on the outermost DOM element wrapping the component to easily achieve theme switching. This outer DOM element can be `html`, `body`, or a specific element in the application. It depends on users.
+
+The problems always seem to be interconnected. We mentioned that the hash is normally calculated based on tokens, but when it comes to dynamic switching, we want the hash to remain constant. So, for the two sets of themes mentioned earlier, their hashes should be consistent, even though their corresponding CSS variables are different. Therefore, we need to make some adjustments to the hash calculation method.
+
+![image](https://github.com/ant-design/ant-design/assets/27722486/43639237-e286-4a06-85c2-f2e93d82087a)
+
+In fact, it can be observed that after applying CSS variables, what we have been doing is turning the 'dynamic' into 'static', making every effort to avoid dynamically modifying tokens using JavaScript. This is crucial as it would trigger JavaScript computation, thereby slowing down webpage performance. Conversely, we leverage the static compilation capability of CSS variables to gradually narrow down the scope of things that would change at runtime. Ultimately, it becomes a matter of efficiently switching themes by modifying only a class name or a DOM attribute.
+
+Finally, don't forget that tokens can be passed through the context. In the case of nested themes, the current tokens inherit values from the context to override them. As described earlier, we need to provide multiple tokens in the theme, each with a different theme name. If multiple themes are used in nested themes at different levels, the computational complexity is actually multiplied. For example:
+
+![image](https://github.com/ant-design/ant-design/assets/27722486/c5493235-68af-495c-b5cd-7e1730c38898)
+
+This can become a potential burden.
+
+### Dynamic Themes with CSS Variables
+
+Consider the following scenario: users can freely modify the theme color and text font size on the webpage to suit their preferences. This scenario does not align with the research discussed earlier because our previous study was based on a complete set of known themes (such as a dark theme). When users can freely modify the value of a variable, we cannot pre-build the theme; instead, we must rely on runtime capabilities for modifications. This situation can be referred to as a true 'dynamic theme'.
+
+As mentioned earlier, there are two obstacles to implementing dynamic themes based on CSS variables:
+
+1. Changes in hash values will cause components and the DOM to re-render.
+2. Users cannot know the hash value in advance.
+
+There are two solutions for these two points, respectively.
+
+#### Random Hash
+
+For the first issue, the apparent problem to solve is the dynamic hash value caused by token changes. The existence of hash values serves two purposes: style isolation and caching. In the context of dynamic CSS themes, we can discard the caching feature since we have replaced all tokens with CSS variables. The styles themselves do not change; each token change only affects the inserted CSS variables. At this point, the performance impact of serializing CSS has been significantly reduced. Therefore, we can use random hashes to ensure style isolation.
+
+![image](https://github.com/ant-design/ant-design/assets/27722486/c7128e5e-6330-4dd4-939f-312e11f88af3)
+
+At this point, we can see that users can simply modify tokens in the ConfigProvider, just like before, to use dynamic themes without any noticeable changes in usage. An additional point is that we eliminate the performance cost of calculating hashes here. However, as a trade-off, we might generate two sets of CSS variables that are identical, yet their hashes are different. The impact of this depends on the user's specific usage patterns.
+
+#### Custom Hash
+
+The above solution can actually address most of the issues in various scenarios. However, let's revisit a problem mentioned from the beginning: the FOUC issue. In a statically compiled web page, all theme changes implemented through React lifecycle methods cannot be reflected in the user's browser immediately. We must provide users with the ability to modify the theme before the browser renders the page.
+
+The implementation of this capability essentially involves allowing users to replace CSS variables in scripts. As mentioned earlier, one method is to directly replace the class or attribute on the HTML in the script to apply statically compiled CSS variables, which is not suitable for dynamic themes. Therefore, users need to directly modify the values of CSS variables in the script, introducing the problem of 'needing to know the hash value in advance.' If the hash value is completely random or calculated based on tokens, users cannot use this hash value outside the React lifecycle, or it is challenging to save this hash value for use in scripts outside the React lifecycle.
+
+In other words, as long as the user knows the hash value, is that sufficient? Therefore, we allow users to customize the hash value, and users do not need to worry about the loss of style isolation due to custom reasons—because we can easily detect if users are using the same hash value in the application. In this way, users only need to override hashed CSS variables in the format of Ant Design (antd)—we can provide a factory function to help users generate CSS variable styles.
+
+![image](https://github.com/ant-design/ant-design/assets/27722486/257c5811-bd67-48b3-8ea3-29a428d96bc8)
+
+### Farewell Hash
+
+After ceasing the active calculation of the hash, two questions arise:
+
+1. Is it still a hash?
+2. Do we still need to add hash to the styles?
+
+The first question is somewhat philosophical. From a historical perspective, it is still a hash. However, since it is no longer necessary to compute it, it is simply a pure random value or a user-defined string.
+
+The second question is crucial. Now that all tokens have been replaced, styles under different themes no longer have any differences, and the isolating role played by the hash is no longer significant. We still add the hash class to the DOM as the scope of the theme, which directly affects where the components derive their CSS variable values. However, the styles themselves do not care about these, so we can optimize further:
+
+![image](https://github.com/ant-design/ant-design/assets/27722486/f49c5e57-f17e-4725-b850-43708e9a6235)
+
+Styles can now exist independently! This means that different themes can share the same set of styles—there is no longer a need to generate these styles repeatedly.
+
+However, we still need to consider micro-application scenarios. Although hash values are isolated between different versions of antd, styles lose their scope without a hash. Without hash, different versions of antd can contaminate each other. Therefore, we will still provide the ability to apply hash to the overall styles of the application—this is the application-level hash. Unlike the theme hash, the entire application can still reuse the same set of styles.
diff --git a/docs/blog/css-var-plan.zh-CN.md b/docs/blog/css-var-plan.zh-CN.md
new file mode 100644
index 000000000000..eb02498443c5
--- /dev/null
+++ b/docs/blog/css-var-plan.zh-CN.md
@@ -0,0 +1,208 @@
+---
+title: 当 Ant Design 遇上 CSS 变量
+date: 2023-11-21
+author: MadCcc
+---
+
+## Ant Design 5.0 的痛点
+
+antd 可以通过 ConfigProvider 对主题 token 进行定制，同样支持嵌套主题，并且嵌套的主题 token 会继承上一层已经修改的部分。从这一点上来讲，antd 的主题能力已经达到了 5 个大版本以来的巅峰。
+
+当然我写这篇文章并不是为了把 antd 5.0 再拉出来夸一遍的，这件事在 5.0 发布的时候已经做过了。自 5.0 发布至今已经过去了快一年，其间也充斥着社区的各种质疑与需求，这些也都是 antd 目前面临的痛点与优化方向。
+
+### CSS 产物体积
+
+这一点的主要影响的为 SSR 场景用户。
+
+antd 其实切换到 cssinjs 的时候已经默认实现了按需引入 css 的能力，不需要依靠 `babel-plugin-import` 就能够实现自动的 tree-shaking。但是与 MUI 或者 Mantine 这些一开始就已经使用 cssinjs 的组件库相比，antd 使用 cssinjs 其实算是半路出家，也因此有一些历史债务是无法去除的，在 cssinjs 的使用方面也与其他组件库不同：**antd 的 cssinjs 并不跟随组件本身的 props 改变**。
+
+在 MUI 与 Mantine 6.x 中，配置了不同 props 的组件所生成的 css 其实是不一样的，而这些样式都会放在一个 hash class 里面。是的没错，MUI 的那些具名的 className 比如 `xxx-focused` 都是空壳，是方便用户进行魔改的。这样做的好处是会大大减少样式文件的大小，比如一个页面只使用了 outlined 变体的 Button，那么最终的样式里就不会存在 filled 变体的样式。
+
+![image](https://github.com/ant-design/ant-design/assets/27722486/e3a1fbe4-2cba-487b-9e3d-06233dda40b4)
+
+而在 antd 5.0 中，只要使用了某个组件，antd 就会自动引入有关这个组件的所有样式——不管有没有使用过。这样做有两个原因：
+
+1. antd 从 4.x 到 5.x 进行改造时并没有改变样式的组织方式，任然是和 4.x 一样通过 class 的组合来实现不同的样式效果。
+2. 减少动态生成样式的次数。我们以组件为维度制定了缓存策略，同一个组件只会插入一次样式，这样会减少 cssinjs 在序列化 css 时的性能损耗。
+
+可以看出传统 cssinjs 和 antd 各自的优点其实反过来也是对方的缺点。antd 的 css 产物大小因此变得非常庞大，这一点在 SSR 场景下需要内联 style 标签时就显得格外碍眼。
+
+### 主题切换
+
+在 cssinjs 的组件库中切换亮暗色主题时我们通常会发现两个问题：
+
+1. 切换主题时有卡顿感
+2. 静态站点切换到暗色后刷新，总是会从亮色再变回暗色
+
+这两个问题其实 antd 也中招了，其原因归结起来其实还是由于 cssinjs 运行时生成样式的特性。前者卡顿是因为需要进行一轮新的 css 序列化；后者不能无缝刷新是因为静态站点不能保留切换后主题的样式。
+
+这两个问题在 CSS 变量的主题系统下就不存在，典型页面就是 [react.dev](https://react.dev)。原理其实也很简单：
+
+1. 修改 CSS 变量不需要重新序列化 css，省去了这一性能消耗
+2. 在页面渲染之前 CSS 变量就可以进行注入，即通过 body 下的 script 来阻塞渲染，从而避免了渲染不必要的样式。
+
+## 如何破局？
+
+结合 Mantine 7.0 的案例来看，似乎以 CSS 变量为基础的主题系统/样式引擎拥有更好的用户体验。但是对于 cssinjs 我们也有不能割舍的理由——我们并不希望像 Mantine 那样舍弃更加灵活的主题能力。也就是说我们希望拥有 CSS 变量体积小、切换快的特性，又希望保留 cssinjs 的主题嵌套、多主题并存的能力。
+
+那么我们自然而然的就想到能不能将 cssinjs 与 CSS 变量结合到一起？毕竟他们看起来并不是完全互斥的。
+
+## Ant Design 与 CSS 变量
+
+antd 不是第一次与 CSS 变量合作了，早在 4.x 时代就已经有了一套基于 CSS 变量的 CSS 文件。4.x 中 antd 的主题主要通过 less 变量来实现，将 less 变量赋值为 CSS 变量名，然后在其他地方给这些 CSS 变量赋值，这就是 antd 4.x CSS 变量主题的能力。
+
+antd 5.0 的主题能力其实由 4.x 的进化而来，同样拥有一套主题 token 来进行主题定制。这是目前的主题系统的处理过程，其中我们会基于主题 Token 的值来计算一个唯一的 hash 变量，从而保证主题之间相互隔离：
+
+![image](https://github.com/ant-design/ant-design/assets/27722486/29ccf0be-3b8e-4ab2-a01d-24dff391ea98)
+
+> `:where`选择器不会提高整体权重，所以很适合用来做主题隔离
+
+### CSS 变量映射
+
+所以很自然地，我们也想到了将所有 token 用 CSS 变量填充的方案，于是这篇 RFC 便诞生了：[[RFC] CSS variable theme of antd](https://github.com/ant-design/ant-design/discussions/44654)
+
+在这篇 RFC 中，我们引入了一个设想：将所有 token 都映射到 CSS 变量，并用 CSS 变量来填充 token 的值。如此一来 antd 对于主题的 hash 计算就会固定，因为每个 token 的值都不会再变了。这时我们就会得到一份稳定的 HTML，想要切换主题时只需要替换对应的 CSS 变量，而不需要经历冗长的 cssinjs 序列化过程。
+
+![image](https://github.com/ant-design/ant-design/assets/27722486/ef9eeb23-b231-45f9-b27d-9ea9b21dc098)
+
+现在我们融合 cssinjs 和 CSS 变量的方案初具雏形了。这个方案中，其实 CSS 变量插入的环节被排除在了整个主题的生命周期之外，因为我们只关心 token 和 CSS 变量之间的相互替换。只要 antd 将 CSS 变量运用到了组件样式的各个角落，我们自然就可以在此之上进行基于 CSS 变量的主题构筑。
+
+如上图所示，控制整个主题的 CSS 变量最终被放在了 `:root`选择器下，这也就意味着我们可以在任何时机修改这一份 CSS 变量：可以是编译时，也可以在浏览器环境中。但是另一方面，将 CSS 变量放置在 `:root` 下也意味着这将会是一份影响范围是整个 document 的主题，我们无法进行局部主题的调整。
+
+那么现在问题就变成了：我们能否让 CSS 变量局部生效？
+
+### CSS 变量隔离
+
+答案是可以的。还记得我们在 5.0 引入的 hash 吗？这就是解决这个问题的关键。
+
+通过将 CSS 变量约束在 hash 的类选择器下，我们就可以让这批 CSS 变量只对该主题下的组件生效。同时我们也可以利用上下文中所提供的主题来实时地生产 CSS 变量：把当前主题配置的 token 值直接转化为 CSS 变量，组合上当前的 hash 值就得到了一份完整的样式。
+
+![image](https://github.com/ant-design/ant-design/assets/27722486/7f01d46c-63be-4a81-b576-bfbbfb9a2988)
+
+看起来很完美，利用现有的主题特性实现了 CSS 变量在主题之间隔离的功能。但是实际上到目前为止这个方案有一个巨大的缺陷，而这在上文中也提到过：为了保证 HTML 的稳定，计算 hash 时我们实际上是使用的映射到 CSS 变量后的 token 值，也就是类似 `var(--color-primary)` 的值；而这些值是不会变的，因为我们不会去刻意修改 CSS 变量与 token 间的映射关系，**所以这也就会导致 hash 是一个固定值。**
+
+考虑嵌套的场景：
+
+```tsx
+<ConfigProvider theme={{ token: { colorPrimary: 'blue' } }}>
+  <Button>Button 1</Button>
+  <ConfigProvider theme={{ token: { colorPrimary: 'green' } }}>
+    <Button>Button 2</Button>
+  </ConfigProvider>
+</ConfigProvider>
+```
+
+在 antd 5.0 当前的主题系统下，这两个 Button 所对应的 hash 值是不一样的，所以他们的样式互不影响，这就是 hash 在主题隔离的作用。
+
+但是在 CSS 变量的方案下，这两处 token 修改并不会实际影响 hash 的计算，所以会导致主题隔离失效，两个 `colorPrimary`会被放置在相同的 hash 下，导致相互覆盖。在保证主题隔离的前提下，我们需要 Button 1 和 Button 2 的 hash 值不一样，但这又明显是矛盾的，产生了一个新的问题。
+
+回过头来思考一下我们采用 CSS 变量的初衷：**实现更快的主题切换，降低主题切换的性能消耗。**可以发现重点其实在“切换”上。
+
+对于嵌套主题或者平行主题来说，他们的侧重点并不是“切换”而是“隔离”，所以需要各异且稳定的 hash，在大多数场景下他们的 HTML 也是稳定的。
+
+对于切换主题来说，重点就来到了“切换”。我们所期望的是在固定 hash（即稳定的 HTML）的情况下利用 CSS 变量实现快速、高性能的主题切换，这一点与主题隔离并不冲突，所以我们仍然需要不同的 hash 来 CSS 变量隔离的局面。在此之上，再根据用户的需求生产各个 hash 下不同的主题对应的 CSS 变量样式。
+
+这说起来有些抽象，我们来用代码解释一下想要的效果。同样是上面举出的嵌套主题的场景，我们最终希望得到的 CSS 文件应该包含这些：
+
+```css
+:where(.css-hash1).ant-btn {
+  background-color: var(--color-primary);
+}
+
+:where(.css-hash2).ant-btn {
+  background-color: var(--color-primary);
+}
+
+.css-hash1 {
+  --color-primary: blue;
+}
+
+.css-hash2 {
+  --color-primary: green;
+}
+```
+
+这样的产物是符合预期的，它将 CSS 变量与 hash 结合到了一起。但实际上这样我们应该稍微调整一下我们的思路，将 hash 计算回归到 token 原本的值上，或者直接利用 CSS 变量来计算 hash：
+
+![image](https://github.com/ant-design/ant-design/assets/27722486/e4c2a109-34d6-4fe7-a3e4-03ed532775b8)
+
+<a name="HAyMz"></a>
+
+### CSS 变量切换
+
+到目前为止，我们通过 hash 将主题隔离与 CSS 变量融合到了一起，满足了一下我们既要又要的野心。但是 hash 其实还有一个问题——它是动态计算的，用户无法提前得知 hash 值到底是什么，也就无法实现直接用 js 操作修改 CSS 变量。
+
+但是办法总是有的。我们除了直接利用 js 修改 CSS 变量之外，还可以利用 CSS 选择器来实现不同场景下 CSS 变量的切换，这就要求我们提前把不同主题的 CSS 变量同时生成好：
+
+```css
+/* 利用自定义的主题 class 作为嵌套选择器 */
+.light .css-hash {
+  --color-text: rgba(0, 0, 0, 0.85);
+}
+
+.dark .css-hash {
+  --color-text: rgba(255, 255, 255, 0.88);
+}
+```
+
+此时我们只需要切换包裹在组件外层的 dom 上的 class，就可以轻易实现主题的切换。这个外层 dom 可以是 html，可以是 body，也可以是应用中的某一层元素 —— 这由用户自由决定。
+
+问题总是一环套一环的。我们之前提到 hash 还是正常通过 token 计算的，但是涉及到动态切换时我们又希望 hash 是不变的。所以想上文中列出的两套主题，他们的 hash 应该是一致的，尽管他们对应的 CSS 变量并不相同。于是我们需要在 hash 的计算方法上做一些文章。
+
+![image](https://github.com/ant-design/ant-design/assets/27722486/43639237-e286-4a06-85c2-f2e93d82087a)
+
+实际上可以发现我们在套用 CSS 变量之后，我们一直在做的一件事情就是把“动态”变为“静态”，极力去避免使用 js 动态修改 token 的情况发生，因为这一定会唤起 js 的计算逻辑从而拖慢网页性能。相对的，我们利用 CSS 变量可提前编译的静态能力，将运行时会产生变化的东西一步步缩小范围，最终变成只需要修改一个类名或者 dom 属性就可以做到高性能的主题切换。
+
+最后别忘了 token 是可以通过 context 进行传递的，在嵌套主题时，当前的 token 会继承来自上下文的 token 值进行覆盖。根据上文中的描述，我们需要在主题中提供复数的 token，他们分别拥有不同的主题名。如果在嵌套的主题中多层使用了多主题，那么其计算量其实是乘算的。举个例子：
+
+![image](https://github.com/ant-design/ant-design/assets/27722486/c5493235-68af-495c-b5cd-7e1730c38898)
+
+这会成为一个潜在的负担。
+
+### CSS 变量动态主题
+
+考虑这样的场景：用户可以在网页中任意修改主题色以及文字字号，以符合自己的喜好。这个场景与上文所研究的就并不适配了，原因是我们之前的研究建立在有一整套已知的主题（如暗色主题）上，但用户可以随意修改某个变量值的时候我们就不能够提前对主题进行构建，只能够依赖运行时的能力进行修改。这种场景可以称为是真正的“动态主题”。
+
+如同上文所说，实现基于 CSS 变量的动态主题有两个阻碍：
+
+1. hash 值变化会导致组件和 dom 重新渲染；
+2. 用户无法提前得知 hash 值
+
+而针对这两点分别有两种解决方案。
+
+#### 随机 hash
+
+对于前者，我们需要解决的问题明显是 token 变化带来的动态 hash 值。hash 值存在的原因有两个，样式隔离和缓存。样式隔离需要的是每个主题对应不一样的 hash，缓存需要的是每个主题对应唯一的 hash。在 CSS 动态主题的场景下，我们可以抛弃缓存这一特性，因为我们已经将所有的 token 替换为了 CSS 变量，样式本身并不会改变，每次改变 token 只会改变插入的 CSS 变量，这时**序列化 CSS 带来的性能消耗已经被大幅减小了**。因此我们完全可以采用随机 hash 来保证样式隔离。
+
+![image](https://github.com/ant-design/ant-design/assets/27722486/c7128e5e-6330-4dd4-939f-312e11f88af3)
+
+这时我们可以发现用户想要使用动态主题时只要像之前一样在 ConfigProvider 里修改 token 就可以了，不会产生任何使用上的变化。而额外的一点就是，这里我们省去了计算 hash 带来的性能损耗，但相对的我们可能会生产出一模一样的两套 CSS 变量而他们的 hash 并不一致。这一点具体会带来正面还是负面的影响还得具体看用户的使用方法。
+
+#### 自定义 hash
+
+上述的方案其实已经可以解决大部分场景下的问题，但我们回过头看还有一个从一开始就提到的问题：FOUC 问题。在一个已经静态编译的网页上，所有利用 react 生命周期实现的主题变化都不能在第一时间反应到用户的浏览器上。我们必须提供给用户能够在浏览器渲染页面前，就能够修改主题的能力。
+
+这种能力的实现方式其实就是能够让用户在脚本中替换 CSS 变量。我们在上面提到了一种方法是在脚本中直接替换 html 上的 class 或者属性来套用已经静态编译完成的 CSS 变量，这对于动态主题并不适用。所以用户就需要在脚本中直接修改 CSS 变量的值，所以就引入了“需要提前得知 hash 值”这个问题，因为如果 hash 值完全随机或者根据 token 计算，用户就无法在 react 生命周期之外使用这个 hash 值；或者说很难把这个 hash 值存下来，供在 react 生命周期之外的 script 使用。
+
+那么换句话讲，只要用户知道 hash 值是不是就可以了呢？
+
+所以我们允许用户 diy hash 值，用户也不需要担心因为自定义的原因导致样式隔离失效——我们很容易就可以检测出用户在应用中使用了相同的 hash 值。如此一来用户只需要按照 antd 的格式来覆盖 hashed CSS 变量就可以了——我们可以提供一个工厂函数来帮助用户生产 CSS 变量样式。
+
+![image](https://github.com/ant-design/ant-design/assets/27722486/257c5811-bd67-48b3-8ea3-29a428d96bc8)
+
+### 再见了 hash
+
+不再主动计算 hash 后，我们心中冒出了两个问题：
+
+1. hash 它还是 hash 吗？
+2. 我们还需要在样式上添加 hash 吗？
+
+第一个问题其实有点哲学，从发展历程来讲，它就是 hash。但是他已经不再需要计算了，所以就是一个纯粹的随机值或者用户自定义的字符串。
+
+第二个问题很重要。在所有 token 都被替换的现在，不同主题下的样式已经不会再有任何区别了，hash 起到的隔离作用也不再重要。我们仍然会在 dom 上添加 hash class 作为主题的 scope，它会直接影响组件所采用的 CSS 变量源于何处。但是样式并不关心这些，所以我们再进行一次优化：
+
+![image](https://github.com/ant-design/ant-design/assets/27722486/f49c5e57-f17e-4725-b850-43708e9a6235)
+
+样式居然可以单独存在了！这意味着不同的主题可以共用同一份样式——我们不再需要重复生成这些样式了。
+
+当然还需要考虑微应用场景，不同版本的 antd 之间虽然 hash 是隔离的，但是样式失去了 hash 之后也就失去了作用域，不同版本的 antd 会相互污染，所以我们仍会提供对应用整体的样式打上 hash 的能力——这就是应用级别的 hash，与主题 hash 不同，整个应用仍然可以复用同一份样式。
diff --git a/docs/react/compatible-style.zh-CN.md b/docs/react/compatible-style.zh-CN.md
index 4487e9546473..f7769d7d7cf6 100644
--- a/docs/react/compatible-style.zh-CN.md
+++ b/docs/react/compatible-style.zh-CN.md
@@ -56,7 +56,7 @@ export default () => (
 为了统一 LTR 和 RTL 样式，Ant Design 使用了 CSS 逻辑属性。例如原 `margin-left` 使用 `margin-inline-start` 代替，使其在 LTR 和 RTL 下都为起始位置间距。如果你需要兼容旧版浏览器（如 360 浏览器、QQ 浏览器 等等），可以通过 `@ant-design/cssinjs` 的 `StyleProvider` 配置 `transformers` 将其转换：
 
 ```tsx
-import { StyleProvider, legacyLogicalPropertiesTransformer } from '@ant-design/cssinjs';
+import { legacyLogicalPropertiesTransformer, StyleProvider } from '@ant-design/cssinjs';
 
 // `transformers` 提供预处理功能将样式进行转换
 export default () => (
@@ -83,7 +83,7 @@ export default () => (
 在响应式网页开发中，需要一种方便且灵活的方式来实现页面的适配和响应式设计。`px2remTransformer` 转换器可以快速而准确地将样式表中的像素单位转换为相对于根元素（HTML 标签）的 rem 单位，实现页面的自适应和响应式布局。
 
 ```tsx
-import { StyleProvider, px2remTransformer } from '@ant-design/cssinjs';
+import { px2remTransformer, StyleProvider } from '@ant-design/cssinjs';
 
 const px2rem = px2remTransformer({
   rootValue: 32, // 32px = 1rem; @default 16
diff --git a/docs/react/customize-theme.zh-CN.md b/docs/react/customize-theme.zh-CN.md
index 083b6306353d..fd35111ffee9 100644
--- a/docs/react/customize-theme.zh-CN.md
+++ b/docs/react/customize-theme.zh-CN.md
@@ -329,9 +329,9 @@ const globalToken = getDesignToken();
 `getDesignToken` 和 ConfigProvider 一样，支持传入 `theme` 属性，用于获取指定主题的 Design Token。
 
 ```tsx
-import { createRoot } from 'react-dom/client';
 import type { ThemeConfig } from 'antd';
 import { theme } from 'antd';
+import { createRoot } from 'react-dom/client';
 
 const { getDesignToken, useToken } = theme;
 
diff --git a/docs/react/getting-started.zh-CN.md b/docs/react/getting-started.zh-CN.md
index a3a55d72b39e..ac5e2b64da94 100755
--- a/docs/react/getting-started.zh-CN.md
+++ b/docs/react/getting-started.zh-CN.md
@@ -47,12 +47,15 @@ export default App;
 
 ```jsx
 import React, { useState } from 'react';
-import { createRoot } from 'react-dom/client';
 import { ConfigProvider, DatePicker, message } from 'antd';
 // 由于 antd 组件的默认文案是英文，所以需要修改为中文
 import dayjs from 'dayjs';
+import { createRoot } from 'react-dom/client';
+
 import 'dayjs/locale/zh-cn';
+
 import zhCN from 'antd/locale/zh_CN';
+
 import './index.css';
 
 dayjs.locale('zh-cn');
diff --git a/docs/react/recommendation.en-US.md b/docs/react/recommendation.en-US.md
index de423fe0c4cb..de05270f920a 100644
--- a/docs/react/recommendation.en-US.md
+++ b/docs/react/recommendation.en-US.md
@@ -56,7 +56,6 @@ There are some products to recommend for developer/designer/product manager.
 | Sketch plugin     | [Kitchen](https://kitchen.alipay.com)                                 |
 | Online Playground | [codesandbox](https://codesandbox.io/) [codepen](https://codepen.io/) |
 | Image Compressor  | [tinypng](https://tinypng.com/)                                       |
-| Charts Dictionary | [图之典](http://tuzhidian.com/)                                       |
 
 <style>
 .markdown table td:first-child {
diff --git a/docs/react/recommendation.zh-CN.md b/docs/react/recommendation.zh-CN.md
index 9d37c6568670..20a097dcf109 100644
--- a/docs/react/recommendation.zh-CN.md
+++ b/docs/react/recommendation.zh-CN.md
@@ -10,7 +10,7 @@ title: 社区精选组件
 
 | 类型 | 推荐组件 |
 | --- | --- |
-| 可视化图表 | [Ant Design Charts](https://charts.ant.design/zh) [AntV 数据可视化解决方案](https://antv.vision/zh) [reactflow](https://reactflow.dev/) |
+| 可视化图表 | [Ant Design Charts](https://charts.ant.design) [AntV 数据可视化解决方案](https://antv.vision/zh) [reactflow](https://reactflow.dev/) |
 | React Hooks 库 | [ahooks](https://github.com/alibaba/hooks) |
 | 表单 | [ProForm](https://procomponents.ant.design/components/form) [Formily](https://github.com/alibaba/formily) [react-hook-form](https://github.com/react-hook-form/react-hook-form) [formik](https://github.com/formium/formik) |
 | 路由 | [react-router](https://github.com/ReactTraining/react-router) |
@@ -58,7 +58,6 @@ title: 社区精选组件
 | Sketch 插件  | [Kitchen](https://kitchen.alipay.com)                                 |
 | 在线代码编辑 | [codesandbox](https://codesandbox.io/) [codepen](https://codepen.io/) |
 | 图片压缩     | [tinypng](https://tinypng.com/)                                       |
-| 图表分类查询 | [图之典](http://tuzhidian.com/)                                       |
 
 <style>
 .markdown table td:first-child {
diff --git a/docs/react/server-side-rendering.en-US.md b/docs/react/server-side-rendering.en-US.md
index 39b4b3de214e..480e08108348 100644
--- a/docs/react/server-side-rendering.en-US.md
+++ b/docs/react/server-side-rendering.en-US.md
@@ -16,13 +16,14 @@ There are two options for server-side rendering styles, each with advantages and
 Use `@ant-design/cssinjs` to extract style:
 
 ```tsx
+import React from 'react';
 import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';
+import type Entity from '@ant-design/cssinjs/es/Cache';
 import { renderToString } from 'react-dom/server';
 
-export default () => {
+const App = () => {
   // SSR Render
-  const cache = createCache();
-
+  const cache = React.useMemo<Entity>(() => createCache(), []);
   const html = renderToString(
     <StyleProvider cache={cache}>
       <MyApp />
@@ -34,17 +35,19 @@ export default () => {
 
   // Mix with style
   return `
-<!DOCTYPE html>
-<html>
-  <head>
-    ${styleText}
-  </head>
-  <body>
-    <div id="root">${html}</div>
-  </body>
-</html>
-`;
+    <!DOCTYPE html>
+    <html>
+      <head>
+        ${styleText}
+      </head>
+      <body>
+        <div id="root">${html}</div>
+      </body>
+    </html>
+  `;
 };
+
+export default App;
 ```
 
 ## Whole Export
@@ -89,8 +92,8 @@ If you want to use mixed themes or custom themes, you can use the following scri
 
 ```tsx
 import fs from 'fs';
-import { extractStyle } from '@ant-design/static-style-extract';
 import React from 'react';
+import { extractStyle } from '@ant-design/static-style-extract';
 import { ConfigProvider } from 'antd';
 
 const outputPath = './public/antd.min.css';
@@ -155,6 +158,7 @@ Then, you just need to import this file into the `pages/_app.tsx` file:
 ```tsx
 import { StyleProvider } from '@ant-design/cssinjs';
 import type { AppProps } from 'next/app';
+
 import '../public/antd.min.css'; // add this line
 import '../styles/globals.css';
 
@@ -237,8 +241,8 @@ More about static-style-extract, see [static-style-extract](https://github.com/a
 import { createHash } from 'crypto';
 import fs from 'fs';
 import path from 'path';
-import type Entity from '@ant-design/cssinjs/lib/Cache';
 import { extractStyle } from '@ant-design/cssinjs';
+import type Entity from '@ant-design/cssinjs/lib/Cache';
 
 export type DoExtraStyleOptions = {
   cache: Entity;
@@ -280,9 +284,10 @@ Export on demand using the above tools in `_document.tsx`
 
 ```tsx
 // _document.tsx
-import { StyleProvider, createCache } from '@ant-design/cssinjs';
+import { createCache, StyleProvider } from '@ant-design/cssinjs';
 import type { DocumentContext } from 'next/document';
 import Document, { Head, Html, Main, NextScript } from 'next/document';
+
 import { doExtraStyle } from '../scripts/genAntdCss';
 
 export default class MyDocument extends Document {
diff --git a/docs/react/server-side-rendering.zh-CN.md b/docs/react/server-side-rendering.zh-CN.md
index 5a50d1bce884..decc1965cf50 100644
--- a/docs/react/server-side-rendering.zh-CN.md
+++ b/docs/react/server-side-rendering.zh-CN.md
@@ -16,13 +16,14 @@ tag: New
 使用 `@ant-design/cssinjs` 将所需样式抽离：
 
 ```tsx
+import React from 'react';
 import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';
+import type Entity from '@ant-design/cssinjs/es/Cache';
 import { renderToString } from 'react-dom/server';
 
-export default () => {
+const App = () => {
   // SSR Render
-  const cache = createCache();
-
+  const cache = React.useMemo<Entity>(() => createCache(), []);
   const html = renderToString(
     <StyleProvider cache={cache}>
       <MyApp />
@@ -34,17 +35,19 @@ export default () => {
 
   // Mix with style
   return `
-<!DOCTYPE html>
-<html>
-  <head>
-    ${styleText}
-  </head>
-  <body>
-    <div id="root">${html}</div>
-  </body>
-</html>
-`;
+    <!DOCTYPE html>
+    <html>
+      <head>
+        ${styleText}
+      </head>
+      <body>
+        <div id="root">${html}</div>
+      </body>
+    </html>
+  `;
 };
+
+export default App;
 ```
 
 ## 整体导出
@@ -89,8 +92,8 @@ fs.writeFileSync(outputPath, css);
 
 ```tsx
 import fs from 'fs';
-import { extractStyle } from '@ant-design/static-style-extract';
 import React from 'react';
+import { extractStyle } from '@ant-design/static-style-extract';
 import { ConfigProvider } from 'antd';
 
 const outputPath = './public/antd.min.css';
@@ -155,6 +158,7 @@ fs.writeFileSync(outputPath, css);
 ```tsx
 import { StyleProvider } from '@ant-design/cssinjs';
 import type { AppProps } from 'next/app';
+
 import '../public/antd.min.css'; // 添加这行
 import '../styles/globals.css';
 
@@ -237,8 +241,8 @@ const cssText = extractStyle((node) => (
 import { createHash } from 'crypto';
 import fs from 'fs';
 import path from 'path';
-import type Entity from '@ant-design/cssinjs/lib/Cache';
 import { extractStyle } from '@ant-design/cssinjs';
+import type Entity from '@ant-design/cssinjs/lib/Cache';
 
 export type DoExtraStyleOptions = {
   cache: Entity;
@@ -280,9 +284,10 @@ export function doExtraStyle({
 
 ```tsx
 // _document.tsx
-import { StyleProvider, createCache } from '@ant-design/cssinjs';
+import { createCache, StyleProvider } from '@ant-design/cssinjs';
 import type { DocumentContext } from 'next/document';
 import Document, { Head, Html, Main, NextScript } from 'next/document';
+
 import { doExtraStyle } from '../scripts/genAntdCss';
 
 export default class MyDocument extends Document {
diff --git a/docs/react/use-with-next.en-US.md b/docs/react/use-with-next.en-US.md
index a46075edfaa1..120fb6bf33c2 100644
--- a/docs/react/use-with-next.en-US.md
+++ b/docs/react/use-with-next.en-US.md
@@ -57,6 +57,12 @@ If you are using the App Router in Next.js and using antd as your component libr
 
 1. Install `@ant-design/cssinjs`
 
+> Notes for developers
+>
+> Please note that when you install `@ant-design/cssinjs`, you must ensure that the version is consistent with the version of `@ant-design/cssinjs` in local `node_modules` of `antd`, otherwise, multiple React instances will appear, resulting in ctx being unable to be read correctly. (Tips: you can use `npm ls @ant-design/cssinjs` command to view the local version)
+>
+> <img width="514" alt="image" src="https://github.com/ant-design/ant-design/assets/49217418/aad6e9e2-62cc-4c89-a0b6-38c592e3c648">
+
 <InstallDependencies npm='$ npm install @ant-design/cssinjs --save' yarn='$ yarn add @ant-design/cssinjs' pnpm='$ pnpm install @ant-design/cssinjs --save'></InstallDependencies>
 
 2. Create `lib/AntdRegistry.tsx`
@@ -71,9 +77,15 @@ import { useServerInsertedHTML } from 'next/navigation';
 
 const StyledComponentsRegistry = ({ children }: React.PropsWithChildren) => {
   const cache = React.useMemo<Entity>(() => createCache(), []);
-  useServerInsertedHTML(() => (
-    <style id="antd" dangerouslySetInnerHTML={{ __html: extractStyle(cache, true) }} />
-  ));
+  const isServerInserted = React.useRef<boolean>(false);
+  useServerInsertedHTML(() => {
+    // avoid duplicate css insert
+    if (isServerInserted.current) {
+      return;
+    }
+    isServerInserted.current = true;
+    return <style id="antd" dangerouslySetInnerHTML={{ __html: extractStyle(cache, true) }} />;
+  });
   return <StyleProvider cache={cache}>{children}</StyleProvider>;
 };
 
@@ -153,6 +165,12 @@ If you are using the Pages Router in Next.js and using antd as your component li
 
 1. Install `@ant-design/cssinjs`
 
+> Notes for developers
+>
+> Please note that when you install `@ant-design/cssinjs`, you must ensure that the version is consistent with the version of `@ant-design/cssinjs` in local `node_modules` of `antd`, otherwise, multiple React instances will appear, resulting in ctx being unable to be read correctly. (Tips: you can use `npm ls @ant-design/cssinjs` command to view the local version)
+>
+> <img width="514" alt="image" src="https://github.com/ant-design/ant-design/assets/49217418/aad6e9e2-62cc-4c89-a0b6-38c592e3c648">
+
 <InstallDependencies npm='$ npm install @ant-design/cssinjs --save' yarn='$ yarn add @ant-design/cssinjs' pnpm='$ pnpm install @ant-design/cssinjs --save'></InstallDependencies>
 
 2. Rewrite `pages/_document.tsx`
diff --git a/docs/react/use-with-next.zh-CN.md b/docs/react/use-with-next.zh-CN.md
index 76c23de0a54a..d145415eedf9 100644
--- a/docs/react/use-with-next.zh-CN.md
+++ b/docs/react/use-with-next.zh-CN.md
@@ -57,6 +57,12 @@ export default Home;
 
 1. 安装 `@ant-design/cssinjs`
 
+> 开发者注意事项：
+>
+> 请注意，安装 `@ant-design/cssinjs` 时必须确保版本号跟 `antd` 本地的 `node_modules` 中的 `@ant-design/cssinjs` 版本保持一致，否则会出现多个 React 实例，导致无法正确的读取 ctx。（Tips: 你可以通过 `npm ls @ant-design/cssinjs` 命令查看本地版本）
+>
+> <img width="514" alt="image" src="https://github.com/ant-design/ant-design/assets/49217418/aad6e9e2-62cc-4c89-a0b6-38c592e3c648">
+
 <InstallDependencies npm='$ npm install @ant-design/cssinjs --save' yarn='$ yarn add @ant-design/cssinjs' pnpm='$ pnpm install @ant-design/cssinjs --save'></InstallDependencies>
 
 2. 创建 `lib/AntdRegistry.tsx`
@@ -71,9 +77,15 @@ import { useServerInsertedHTML } from 'next/navigation';
 
 const StyledComponentsRegistry = ({ children }: React.PropsWithChildren) => {
   const cache = React.useMemo<Entity>(() => createCache(), []);
-  useServerInsertedHTML(() => (
-    <style id="antd" dangerouslySetInnerHTML={{ __html: extractStyle(cache, true) }} />
-  ));
+  const isServerInserted = React.useRef<boolean>(false);
+  useServerInsertedHTML(() => {
+    // 避免 css 重复插入
+    if (isServerInserted.current) {
+      return;
+    }
+    isServerInserted.current = true;
+    return <style id="antd" dangerouslySetInnerHTML={{ __html: extractStyle(cache, true) }} />;
+  });
   return <StyleProvider cache={cache}>{children}</StyleProvider>;
 };
 
@@ -153,6 +165,12 @@ export default HomePage;
 
 1. 安装 `@ant-design/cssinjs`
 
+> 开发者注意事项：
+>
+> 请注意，安装 `@ant-design/cssinjs` 时必须确保版本号跟 `antd` 本地的 `node_modules` 中的 `@ant-design/cssinjs` 版本保持一致，否则会出现多个 React 实例，导致无法正确的读取 ctx。（Tips: 你可以通过 `npm ls @ant-design/cssinjs` 命令查看本地版本）
+>
+> <img width="514" alt="image" src="https://github.com/ant-design/ant-design/assets/49217418/aad6e9e2-62cc-4c89-a0b6-38c592e3c648">
+
 <InstallDependencies npm='$ npm install @ant-design/cssinjs --save' yarn='$ yarn add @ant-design/cssinjs' pnpm='$ pnpm install @ant-design/cssinjs --save'></InstallDependencies>
 
 2. 改写 `pages/_document.tsx`
diff --git a/docs/react/use-with-umi.zh-CN.md b/docs/react/use-with-umi.zh-CN.md
index 34c8498647bd..054ebbb5f8e0 100644
--- a/docs/react/use-with-umi.zh-CN.md
+++ b/docs/react/use-with-umi.zh-CN.md
@@ -131,8 +131,8 @@ export default defineConfig({
 新建 `src/components/ProductList.tsx` 文件，内容如下。
 
 ```tsx
-import { Button, Popconfirm, Table } from 'antd';
 import React from 'react';
+import { Button, Popconfirm, Table } from 'antd';
 
 const ProductList: React.FC<{ products: { name: string }[]; onDelete: (id: string) => void }> = ({
   onDelete,
@@ -221,11 +221,12 @@ export default defineConfig({
 再编辑 `src/pages/products.tsx`，内容如下。
 
 ```tsx
-import ProductList from '@/components/ProductList';
-import axios from 'axios';
 import React from 'react';
+import axios from 'axios';
 import { useMutation, useQuery, useQueryClient } from 'umi';
+
 import styles from './products.less';
+import ProductList from '@/components/ProductList';
 
 export default function Page() {
   const queryClient = useQueryClient();
diff --git a/docs/spec/introduce.en-US.md b/docs/spec/introduce.en-US.md
index fc57bfcffa26..f7a49c552d2b 100644
--- a/docs/spec/introduce.en-US.md
+++ b/docs/spec/introduce.en-US.md
@@ -60,7 +60,6 @@ We provide comprehensive design guidelines, best practices, resources, and tools
 - Alligator: [Crafting Beautiful UIs in React Using Ant Design](https://alligator.io/react/beautiful-uis-ant-design/)
 - [Introduction to Ant Design](https://blog.logrocket.com/introduction-to-ant-design/)
 - [Build a React App with Ant Design Principles](https://developer.okta.com/blog/2020/09/16/ant-design-react-app)
-- [Meet Antd, an enterprise React UI library](https://medium.com/javascript-in-plain-english/antd-library-what-why-useful-or-not-5fec225b639d)
 
 ## How to Contribute
 
diff --git a/docs/spec/introduce.zh-CN.md b/docs/spec/introduce.zh-CN.md
index a7b699aa42f1..33ba15db9006 100644
--- a/docs/spec/introduce.zh-CN.md
+++ b/docs/spec/introduce.zh-CN.md
@@ -62,7 +62,6 @@ title: 介绍
 - [漫谈 Material Design & Ant Design](http://dwbbb.com/blog/MaterialDesignAntDesign/)
 - [Introduction to Ant Design](https://blog.logrocket.com/introduction-to-ant-design/)
 - [Build a React App with Ant Design Principles](https://developer.okta.com/blog/2020/09/16/ant-design-react-app)
-- [Meet Antd, an enterprise React UI library](https://medium.com/javascript-in-plain-english/antd-library-what-why-useful-or-not-5fec225b639d)
 
 ## 如何贡献
 
diff --git a/docs/spec/motion.zh-CN.md b/docs/spec/motion.zh-CN.md
index f22590ae0004..14d144e0314d 100644
--- a/docs/spec/motion.zh-CN.md
+++ b/docs/spec/motion.zh-CN.md
@@ -51,7 +51,7 @@ const text = [
 ];
 
 function Principle() {
-  const childrenToRender = text.map(item => (
+  const childrenToRender = text.map((item) => (
     <Col key={item.title} sm={24} md={8}>
       <div className="principle">
         <div>
diff --git a/package.json b/package.json
index cffb89ad0a8d..02ccb675593a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "antd",
-  "version": "5.10.3",
+  "version": "5.11.3",
   "description": "An enterprise-class UI design language and React components implementation",
   "keywords": [
     "ant",
@@ -113,7 +113,7 @@
   ],
   "dependencies": {
     "@ant-design/colors": "^7.0.0",
-    "@ant-design/cssinjs": "^1.17.2",
+    "@ant-design/cssinjs": "^1.17.5",
     "@ant-design/icons": "^5.2.6",
     "@ant-design/react-slick": "~1.0.2",
     "@babel/runtime": "^7.18.3",
@@ -121,74 +121,75 @@
     "@rc-component/color-picker": "~1.4.1",
     "@rc-component/mutate-observer": "^1.1.0",
     "@rc-component/tour": "~1.10.0",
-    "@rc-component/trigger": "^1.18.0",
-    "classnames": "^2.2.6",
-    "copy-to-clipboard": "^3.2.0",
+    "@rc-component/trigger": "^1.18.2",
+    "classnames": "^2.3.2",
+    "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.1",
     "qrcode.react": "^3.1.0",
-    "rc-cascader": "~3.18.1",
+    "rc-cascader": "~3.20.0",
     "rc-checkbox": "~3.1.0",
     "rc-collapse": "~3.7.1",
     "rc-dialog": "~9.3.4",
     "rc-drawer": "~6.5.2",
     "rc-dropdown": "~4.1.0",
-    "rc-field-form": "~1.39.0",
-    "rc-image": "~7.3.1",
-    "rc-input": "~1.2.1",
-    "rc-input-number": "~8.1.0",
-    "rc-mentions": "~2.8.0",
+    "rc-field-form": "~1.40.0",
+    "rc-image": "~7.5.0",
+    "rc-input": "~1.3.6",
+    "rc-input-number": "~8.4.0",
+    "rc-mentions": "~2.9.1",
     "rc-menu": "~9.12.2",
     "rc-motion": "^2.9.0",
     "rc-notification": "~5.3.0",
-    "rc-pagination": "~3.6.1",
+    "rc-pagination": "~3.7.0",
     "rc-picker": "~3.14.6",
     "rc-progress": "~3.5.1",
     "rc-rate": "~2.12.0",
     "rc-resize-observer": "^1.4.0",
     "rc-segmented": "~2.2.2",
-    "rc-select": "~14.9.2",
-    "rc-slider": "~10.3.1",
+    "rc-select": "~14.10.0",
+    "rc-slider": "~10.4.0",
     "rc-steps": "~6.0.1",
     "rc-switch": "~4.1.0",
-    "rc-table": "~7.34.4",
-    "rc-tabs": "~12.12.1",
-    "rc-textarea": "~1.4.0",
+    "rc-table": "~7.36.0",
+    "rc-tabs": "~12.13.1",
+    "rc-textarea": "~1.5.3",
     "rc-tooltip": "~6.1.2",
-    "rc-tree": "~5.7.12",
-    "rc-tree-select": "~5.13.0",
+    "rc-tree": "~5.8.2",
+    "rc-tree-select": "~5.15.0",
     "rc-upload": "~4.3.5",
-    "rc-util": "^5.38.0",
-    "scroll-into-view-if-needed": "^3.0.3",
+    "rc-util": "^5.38.1",
+    "scroll-into-view-if-needed": "^3.1.0",
     "throttle-debounce": "^5.0.0"
   },
   "devDependencies": {
     "@ant-design/compatible": "^5.1.2",
     "@ant-design/happy-work-theme": "^1.0.0",
-    "@ant-design/tools": "^17.3.2",
+    "@ant-design/tools": "^18.0.0",
     "@antv/g6": "^4.8.13",
     "@argos-ci/core": "^1.0.0",
     "@babel/eslint-plugin": "^7.19.1",
     "@biomejs/biome": "^1.0.0",
-    "@codesandbox/sandpack-react": "^2.6.9",
+    "@codesandbox/sandpack-react": "^2.9.0",
     "@dnd-kit/core": "^6.0.7",
-    "@dnd-kit/modifiers": "^6.0.1",
-    "@dnd-kit/sortable": "^7.0.2",
+    "@dnd-kit/modifiers": "^7.0.0",
+    "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.1",
     "@emotion/react": "^11.10.4",
     "@emotion/server": "^11.4.0",
     "@ianvs/prettier-plugin-sort-imports": "^4.1.0",
+    "@madccc/duplicate-package-checker-webpack-plugin": "^1.0.0",
     "@qixian.cs/github-contributors-list": "^1.1.0",
-    "@size-limit/file": "^10.0.0",
+    "@size-limit/file": "^11.0.0",
     "@stackblitz/sdk": "^1.3.0",
     "@testing-library/dom": "^9.0.0",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.2",
     "@types/fs-extra": "^11.0.1",
-    "@types/gtag.js": "^0.0.17",
+    "@types/gtag.js": "^0.0.18",
     "@types/http-server": "^0.12.1",
     "@types/inquirer": "^9.0.3",
-    "@types/isomorphic-fetch": "^0.0.38",
+    "@types/isomorphic-fetch": "^0.0.39",
     "@types/jest": "^29.0.0",
     "@types/jest-axe": "^3.5.3",
     "@types/jest-environment-puppeteer": "^5.0.0",
@@ -222,7 +223,6 @@
     "dekko": "^0.2.1",
     "dumi": "^2.3.0-alpha.9",
     "dumi-plugin-color-chunk": "^1.0.2",
-    "duplicate-package-checker-webpack-plugin": "^3.0.0",
     "esbuild-loader": "^4.0.0",
     "eslint": "^8.40.0",
     "eslint-config-airbnb": "^19.0.0",
@@ -232,10 +232,11 @@
     "eslint-plugin-import": "^2.28.0",
     "eslint-plugin-jest": "^27.0.1",
     "eslint-plugin-jsx-a11y": "^6.2.1",
+    "eslint-plugin-lodash": "^7.4.0",
     "eslint-plugin-markdown": "^3.0.0",
     "eslint-plugin-react": "^7.31.8",
     "eslint-plugin-react-hooks": "^4.1.2",
-    "eslint-plugin-unicorn": "^48.0.0",
+    "eslint-plugin-unicorn": "^49.0.0",
     "fast-glob": "^3.2.11",
     "fetch-jsonp": "^1.1.3",
     "fs-extra": "^11.0.0",
@@ -295,19 +296,22 @@
     "remark-lint": "^9.0.0",
     "remark-lint-no-undefined-references": "^4.2.1",
     "remark-preset-lint-recommended": "^6.0.0",
+    "runes2": "^1.1.2",
     "semver": "^7.3.5",
     "simple-git": "^3.0.0",
-    "size-limit": "^10.0.0",
+    "size-limit": "^11.0.0",
     "stylelint": "^15.1.0",
     "stylelint-config-rational-order": "^0.1.2",
     "stylelint-config-standard": "^34.0.0",
     "stylelint-prettier": "^4.0.0",
     "sylvanas": "^0.6.1",
     "terser": "^5.16.1",
-    "tsx": "^3.12.8",
+    "tsx": "^4.1.0",
     "typedoc": "^0.25.0",
     "typescript": "~5.2.2",
     "vanilla-jsoneditor": "^0.18.0",
+    "vanilla-tilt": "^1.8.1",
+    "webpack": "^5.89.0",
     "webpack-bundle-analyzer": "^4.1.0",
     "xhr-mock": "^2.4.1"
   },
@@ -323,15 +327,15 @@
       "dumi": "^2.3.0-alpha.4"
     }
   },
-  "packageManager": "npm@10.2.1",
+  "packageManager": "npm@10.2.4",
   "size-limit": [
     {
       "path": "./dist/antd.min.js",
-      "limit": "400 KiB"
+      "limit": "325 KiB"
     },
     {
       "path": "./dist/antd-with-locales.min.js",
-      "limit": "459 KiB"
+      "limit": "371 KiB"
     }
   ],
   "title": "Ant Design",
diff --git a/scripts/__snapshots__/check-site.ts.snap b/scripts/__snapshots__/check-site.ts.snap
index fc9036144372..6892bd0da922 100644
--- a/scripts/__snapshots__/check-site.ts.snap
+++ b/scripts/__snapshots__/check-site.ts.snap
@@ -220,9 +220,9 @@ exports[`site test Component components/switch en Page 1`] = `2`;
 
 exports[`site test Component components/switch zh Page 1`] = `2`;
 
-exports[`site test Component components/table en Page 1`] = `8`;
+exports[`site test Component components/table en Page 1`] = `9`;
 
-exports[`site test Component components/table zh Page 1`] = `8`;
+exports[`site test Component components/table zh Page 1`] = `9`;
 
 exports[`site test Component components/tabs en Page 1`] = `2`;
 
diff --git a/scripts/ci-mock-project-build.sh b/scripts/ci-mock-project-build.sh
index 6c559be160c4..d54b0f19860a 100644
--- a/scripts/ci-mock-project-build.sh
+++ b/scripts/ci-mock-project-build.sh
@@ -3,14 +3,23 @@
 # clean up
 rm -rf ~tmpProj/
 
+# clean up `packageManager` since this will block yarn install
+echo "Cleaning up package.json..."
+sed -i '/packageManager/d' 'package.json' # linux no need for `''`
+sed -i '' '/packageManager/d' 'package.json' # mac need `''`
+
 # clone project
+echo "Cloning project..."
 git clone https://github.com/ant-design/ant-design-examples.git ~tmpProj --depth=1
 
 # change directory
+echo "Changing directory..."
 cd ~tmpProj/examples/with-nextjs-inline-style
 
 # install dependencies
+echo "Installing dependencies..."
 yarn
 
 # build
+echo "Building..."
 yarn run build
diff --git a/scripts/generate-authors.ts b/scripts/generate-authors.ts
index 0195abad0143..648d40d320a6 100644
--- a/scripts/generate-authors.ts
+++ b/scripts/generate-authors.ts
@@ -1,6 +1,8 @@
 import fs from 'fs';
 import path from 'path';
-import _ from 'lodash';
+import remove from 'lodash/remove';
+import sortBy from 'lodash/sortBy';
+import unionBy from 'lodash/unionBy';
 import simpleGit from 'simple-git';
 
 const cwd = process.cwd();
@@ -18,7 +20,7 @@ const excludes = [
 
 async function execute() {
   let { all } = await git.log();
-  all = _.remove(all, ({ author_email: email }) => {
+  all = remove(all, ({ author_email: email }) => {
     for (let i = 0; i < excludes.length; i++) {
       const item = excludes[i];
       if (email.includes(item)) {
@@ -28,7 +30,7 @@ async function execute() {
     return true;
   });
 
-  all = _.sortBy(_.unionBy(all, 'author_email'), 'author_name');
+  all = sortBy(unionBy(all, 'author_email'), 'author_name');
 
   fs.writeFileSync(
     path.join(cwd, 'contributors.json'),
diff --git a/scripts/post-script.ts b/scripts/post-script.ts
index bb60817585fc..d58f608ab0d4 100644
--- a/scripts/post-script.ts
+++ b/scripts/post-script.ts
@@ -48,6 +48,9 @@ const DEPRECIATED_VERSION = {
   '5.8.0': ['https://github.com/ant-design/ant-design/issues/43943'],
   '5.9.1': ['https://github.com/ant-design/ant-design/issues/44907'],
   '5.10.0': ['https://github.com/ant-design/ant-design/issues/45289'],
+  '5.11.0': ['https://github.com/ant-design/ant-design/issues/45742'],
+  '5.11.1': ['https://github.com/ant-design/ant-design/issues/45883'],
+  '5.11.2': ['https://github.com/ant-design/ant-design/issues/46005'],
 } as const;
 
 function matchDeprecated(v: string) {
diff --git a/scripts/test-all.sh b/scripts/test-all.sh
index 26fff26931e4..c62564827cc1 100755
--- a/scripts/test-all.sh
+++ b/scripts/test-all.sh
@@ -1,18 +1,49 @@
-#!/bin/sh
+#!/bin/bash
 
-echo "[TEST ALL] test changelog"
-echo "[TEST ALL] test changelog" > ~test-all.txt
-tsx ./scripts/check-version-md.ts
+# Full skip argms
+# npm run test-all -- --skip-changelog --skip-commit --skip-lint --skip-build --skip-dekko --skip-dist --skip-es --skip-lib --skip-test --skip-node
 
-echo "[TEST ALL] check-commit"
-echo "[TEST ALL] check-commit" > ~test-all.txt
-npm run check-commit
+# Check exist argument
+has_arg() {
+  local term="$1"
+  local start=0
 
-echo "[TEST ALL] lint"
-echo "[TEST ALL] lint" > ~test-all.txt
-npm run lint
+  for arg in "$@"; do
+    if [ $start -gt 0 ] && [ "$arg" == "$term" ]; then
+      return 0 # Return 0 if argument exist
+    fi
 
-if [ "$1" != "--skip-build" ]; then
+    start=$((start+1))
+  done
+
+  return 1 # Return 1 if argument not exist
+}
+
+if ! has_arg '--skip-changelog' "$@"; then
+  echo "[TEST ALL] test changelog"
+  echo "[TEST ALL] test changelog" > ~test-all.txt
+  tsx ./scripts/check-version-md.ts
+else
+  echo "[TEST ALL] test changelog...skip"
+fi
+
+if ! has_arg '--skip-commit' "$@"; then
+  echo "[TEST ALL] check-commit"
+  echo "[TEST ALL] check-commit" > ~test-all.txt
+  npm run check-commit
+else
+  echo "[TEST ALL] check-commit...skip"
+fi
+
+if ! has_arg '--skip-lint' "$@"; then
+  echo "[TEST ALL] lint"
+  echo "[TEST ALL] lint" > ~test-all.txt
+  npm run lint
+else
+  echo "[TEST ALL] lint...skip"
+fi
+
+if ! has_arg '--skip-build' "$@"; then
   echo "[TEST ALL] dist"
   echo "[TEST ALL] dist" > ~test-all.txt
   npm run dist
@@ -21,32 +52,57 @@ if [ "$1" != "--skip-build" ]; then
   echo "[TEST ALL] compile" > ~test-all.txt
   npm run compile
 else
-  echo "Skip build..."
+  echo "[TEST ALL] build...skip"
 fi
 
-echo "[TEST ALL] dekko dist"
-echo "[TEST ALL] dekko dist" > ~test-all.txt
-node ./tests/dekko/dist.test.js
+if ! has_arg '--skip-dekko' "$@"; then
+  echo "[TEST ALL] dekko dist"
+  echo "[TEST ALL] dekko dist" > ~test-all.txt
+  node ./tests/dekko/dist.test.js
 
-echo "[TEST ALL] dist test"
-echo "[TEST ALL] dist test" > ~test-all.txt
-LIB_DIR=dist npm test
+  echo "[TEST ALL] dekko lib"
+  echo "[TEST ALL] dekko lib" > ~test-all.txt
+  node ./tests/dekko/lib.test.js
+else
+  echo "[TEST ALL] dekko test...skip"
+fi
 
-echo "[TEST ALL] dekko lib"
-echo "[TEST ALL] dekko lib" > ~test-all.txt
+if ! has_arg '--skip-dist' "$@"; then
+  echo "[TEST ALL] dist test"
+  echo "[TEST ALL] dist test" > ~test-all.txt
+  LIB_DIR=dist npm test -- --bail
+else
+  echo "[TEST ALL] dist test...skip"
+fi
 
-echo "[TEST ALL] test es"
-echo "[TEST ALL] test es" > ~test-all.txt
-LIB_DIR=es npm test
+if ! has_arg '--skip-es' "$@"; then
+  echo "[TEST ALL] test es"
+  echo "[TEST ALL] test es" > ~test-all.txt
+  LIB_DIR=es npm test -- --bail
+else
+  echo "[TEST ALL] test es...skip"
+fi
 
-echo "[TEST ALL] test lib"
-echo "[TEST ALL] test lib" > ~test-all.txt
-LIB_DIR=lib npm test
+if ! has_arg '--skip-lib' "$@"; then
+  echo "[TEST ALL] test lib"
+  echo "[TEST ALL] test lib" > ~test-all.txt
+  LIB_DIR=lib npm test -- --bail
+else
+  echo "[TEST ALL] test lib...skip"
+fi
 
-echo "[TEST ALL] test"
-echo "[TEST ALL] test" > ~test-all.txt
-npm test
+if ! has_arg '--skip-test' "$@"; then
+  echo "[TEST ALL] test"
+  echo "[TEST ALL] test" > ~test-all.txt
+  npm test -- --bail
+else
+  echo "[TEST ALL] test...skip"
+fi
 
-echo "[TEST ALL] test node"
-echo "[TEST ALL] test node" > ~test-all.txt
-npm run test-node
+if ! has_arg '--skip-node' "$@"; then
+  echo "[TEST ALL] test node"
+  echo "[TEST ALL] test node" > ~test-all.txt
+  npm run test-node -- --bail
+else
+  echo "[TEST ALL] test node...skip"
+fi
diff --git a/tests/shared/demoTest.tsx b/tests/shared/demoTest.tsx
index 620bed701f2c..538a4a3c7e73 100644
--- a/tests/shared/demoTest.tsx
+++ b/tests/shared/demoTest.tsx
@@ -1,15 +1,16 @@
 /* eslint-disable react/jsx-no-constructed-context-values */
 import path from 'path';
+import * as React from 'react';
 import { createCache, StyleProvider } from '@ant-design/cssinjs';
 import { globSync } from 'glob';
-import * as React from 'react';
+import kebabCase from 'lodash/kebabCase';
 import { renderToString } from 'react-dom/server';
-import { kebabCase } from 'lodash';
+
+import { resetWarned } from '../../components/_util/warning';
 import { render } from '../utils';
 import { TriggerMockContext } from './demoTestContext';
 import { excludeWarning, isSafeWarning } from './excludeWarning';
 import rootPropsTest from './rootPropsTest';
-import { resetWarned } from '../../components/_util/warning';
 
 export { rootPropsTest };
 
diff --git a/webpack.config.js b/webpack.config.js
index 829a4f725110..278f2ce360b1 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -4,7 +4,8 @@ const getWebpackConfig = require('@ant-design/tools/lib/getWebpackConfig');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const { EsbuildPlugin } = require('esbuild-loader');
 const CircularDependencyPlugin = require('circular-dependency-plugin');
-const DuplicatePackageCheckerPlugin = require('duplicate-package-checker-webpack-plugin');
+const DuplicatePackageCheckerPlugin = require('@madccc/duplicate-package-checker-webpack-plugin');
+const path = require('path');
 
 function addLocales(webpackConfig) {
   let packageName = 'antd-with-locales';
@@ -24,6 +25,13 @@ function externalDayjs(config) {
   };
 }
 
+function externalCssinjs(config) {
+  config.resolve = config.resolve || {};
+  config.resolve.alias = config.resolve.alias || {};
+
+  config.resolve.alias['@ant-design/cssinjs'] = path.resolve(__dirname, 'alias/cssinjs');
+}
+
 let webpackConfig = getWebpackConfig(false);
 
 // Used for `size-limit` ci which only need to check min files
@@ -37,6 +45,8 @@ if (process.env.RUN_ENV === 'PRODUCTION') {
   webpackConfig.forEach((config) => {
     addLocales(config);
     externalDayjs(config);
+    externalCssinjs(config);
+
     // Reduce non-minified dist files size
     config.optimization.usedExports = true;
     // use esbuild