diff --git a/.dumi/hooks/useDark.tsx b/.dumi/hooks/useDark.tsx
new file mode 100644
index 000000000000..6b31dee12c40
--- /dev/null
+++ b/.dumi/hooks/useDark.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const DarkContext = React.createContext(false);
+
+export default function useDark() {
+  return React.useContext(DarkContext);
+}
diff --git a/.dumi/mirror-modal.js b/.dumi/mirror-modal.js
new file mode 100644
index 000000000000..71ce7b2e28f4
--- /dev/null
+++ b/.dumi/mirror-modal.js
@@ -0,0 +1,172 @@
+(function createMirrorModal() {
+  if (
+    (navigator.languages.includes('zh') || navigator.languages.includes('zh-CN')) &&
+    /-cn\/?$/.test(window.location.pathname) &&
+    !['ant-design.gitee.io', 'ant-design.antgroup.com'].includes(window.location.hostname)
+  ) {
+    const ANTD_DOT_NOT_SHOW_MIRROR_MODAL = 'ANT_DESIGN_DO_NOT_OPEN_MIRROR_MODAL';
+
+    const lastShowTime = window.localStorage.getItem(ANTD_DOT_NOT_SHOW_MIRROR_MODAL);
+    if (
+      lastShowTime &&
+      lastShowTime !== 'true' &&
+      Date.now() - new Date(lastShowTime).getTime() < 7 * 24 * 60 * 60 * 1000
+    ) {
+      return;
+    }
+
+    const style = document.createElement('style');
+    style.innerHTML = `
+  @keyframes mirror-fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes mirror-zoom-in {
+    from {
+      transform: scale(0.8);
+    }
+    to {
+      transform: scale(1);
+    }
+  }
+
+  .mirror-modal-mask {
+    position: fixed;
+    inset: 0;
+    height: '100vh';
+    width: '100vw';
+    background: rgba(0, 0, 0, 0.3);
+    z-index: 9999;
+    animation: mirror-fade-in 0.3s forwards;
+  }
+
+  .mirror-modal-dialog {
+    position: fixed;
+    inset: 0;
+    top: 120px;
+    margin-left: auto;
+    margin-right: auto;
+    width: 400px;
+    height: 120px;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    border-radius: 8px;
+    border: 1px solid #eee;
+    background: #fff;
+    padding: 20px 24px;
+    box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+    animation: mirror-zoom-in 0.3s forwards;
+  }
+
+  .mirror-modal-title {
+    font-size: 16px;
+    font-weight: 500;
+    align-self: flex-start;
+    margin-bottom: 8px;
+  }
+
+  .mirror-modal-content {
+    font-size: 14px;
+    align-self: flex-start;
+    margin-bottom: 16px;
+  }
+
+  .mirror-modal-btns {
+    align-self: flex-end;
+    margin-top: auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .mirror-modal-btn {
+    border-radius: 6px;
+    cursor: pointer;
+    height: 32px;
+    box-sizing: border-box;
+    font-size: 14px;
+    padding: 4px 16px;
+    display: inline-flex;
+    align-items: center;
+    text-decoration: none;
+    transition: all 0.2s;
+  }
+
+  .mirror-modal-confirm-btn {
+    background: #1677ff;
+    color: #fff;
+  }
+
+  .mirror-modal-confirm-btn:hover {
+    background: #4096ff;
+  }
+
+  .mirror-modal-confirm-btn:active {
+    background: #0958d9;
+  }
+
+  .mirror-modal-cancel-btn {
+    border: 1px solid #eee;
+    color: #000;
+    margin-right: 8px;
+  }
+
+  .mirror-modal-cancel-btn:hover {
+    border-color: #4096ff;
+    color: #4096ff
+  }
+
+  .mirror-modal-cancel-btn:active {
+    border-color: #0958d9;
+    color: #0958d9;
+  }
+    `;
+    document.head.append(style);
+
+    const modal = document.createElement('div');
+    modal.className = 'mirror-modal-mask';
+
+    const dialog = document.createElement('div');
+    dialog.className = 'mirror-modal-dialog';
+    modal.append(dialog);
+
+    const title = document.createElement('div');
+    title.className = 'mirror-modal-title';
+    title.innerText = '提示';
+    dialog.append(title);
+
+    const content = document.createElement('div');
+    content.className = 'mirror-modal-content';
+    content.innerText = '国内用户推荐访问国内镜像以获得极速体验～';
+    dialog.append(content);
+
+    const btnWrapper = document.createElement('div');
+    btnWrapper.className = 'mirror-modal-btns';
+    dialog.append(btnWrapper);
+
+    const cancelBtn = document.createElement('a');
+    cancelBtn.className = 'mirror-modal-cancel-btn mirror-modal-btn';
+    cancelBtn.innerText = '7 天内不再显示';
+    btnWrapper.append(cancelBtn);
+    cancelBtn.addEventListener('click', () => {
+      window.localStorage.setItem(ANTD_DOT_NOT_SHOW_MIRROR_MODAL, new Date().toISOString());
+      document.body.removeChild(modal);
+      document.head.removeChild(style);
+      document.body.style.overflow = '';
+    });
+
+    const confirmBtn = document.createElement('a');
+    confirmBtn.className = 'mirror-modal-confirm-btn mirror-modal-btn';
+    confirmBtn.href = window.location.href.replace(window.location.host, 'ant-design.antgroup.com');
+    confirmBtn.innerText = '🚀 立刻前往';
+    btnWrapper.append(confirmBtn);
+
+    document.body.append(modal);
+    document.body.style.overflow = 'hidden';
+  }
+})();
diff --git a/.dumi/pages/index/components/ComponentsList.tsx b/.dumi/pages/index/components/ComponentsList.tsx
index 4885c7a0ba92..a528d1c4ce4a 100644
--- a/.dumi/pages/index/components/ComponentsList.tsx
+++ b/.dumi/pages/index/components/ComponentsList.tsx
@@ -1,21 +1,23 @@
 /* eslint-disable react/jsx-pascal-case */
 import React, { useContext } from 'react';
-import dayjs from 'dayjs';
 import { CustomerServiceOutlined, QuestionCircleOutlined, SyncOutlined } from '@ant-design/icons';
-import { createStyles, css, useTheme } from 'antd-style';
-import classNames from 'classnames';
 import {
-  Space,
-  Typography,
-  Tour,
-  Tag,
-  DatePicker,
   Alert,
-  Modal,
+  Carousel,
+  DatePicker,
   FloatButton,
+  Modal,
   Progress,
-  Carousel,
+  Space,
+  Tag,
+  Tour,
+  Typography,
 } from 'antd';
+import { createStyles, css, useTheme } from 'antd-style';
+import classNames from 'classnames';
+import dayjs from 'dayjs';
+
+import useDark from '../../../hooks/useDark';
 import useLocale from '../../../hooks/useLocale';
 import SiteContext from '../../../theme/slots/SiteContext';
 import { getCarouselStyle } from './util';
@@ -55,40 +57,45 @@ const locales = {
   },
 };
 
-const useStyle = createStyles(({ token }) => {
-  const { carousel } = getCarouselStyle();
+const useStyle = () => {
+  const isRootDark = useDark();
 
-  return {
-    card: css`
-      border-radius: ${token.borderRadius}px;
-      background: #f5f8ff;
-      padding: ${token.paddingXL}px;
-      flex: none;
-      overflow: hidden;
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      align-items: stretch;
+  return createStyles(({ token }) => {
+    const { carousel } = getCarouselStyle();
 
-      > * {
+    return {
+      card: css`
+        border-radius: ${token.borderRadius}px;
+        border: 1px solid ${isRootDark ? token.colorBorder : 'transparent'};
+        background: ${isRootDark ? token.colorBgContainer : '#f5f8ff'};
+        padding: ${token.paddingXL}px;
         flex: none;
-      }
-    `,
-    cardCircle: css`
-      position: absolute;
-      width: 120px;
-      height: 120px;
-      background: #1677ff;
-      border-radius: 50%;
-      filter: blur(40px);
-      opacity: 0.1;
-    `,
-    mobileCard: css`
-      height: 395px;
-    `,
-    carousel,
-  };
-});
+        overflow: hidden;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+
+        > * {
+          flex: none;
+        }
+      `,
+      cardCircle: css`
+        position: absolute;
+        width: 120px;
+        height: 120px;
+        background: #1677ff;
+        border-radius: 50%;
+        filter: blur(40px);
+        opacity: 0.1;
+      `,
+      mobileCard: css`
+        height: 395px;
+      `,
+      carousel,
+    };
+  })();
+};
 
 const ComponentItem: React.FC<ComponentItemProps> = ({ title, node, type, index }) => {
   const tagColor = type === 'new' ? 'processing' : 'warning';
diff --git a/.dumi/pages/index/components/DesignFramework.tsx b/.dumi/pages/index/components/DesignFramework.tsx
index 4060493b23c4..1f744b343329 100644
--- a/.dumi/pages/index/components/DesignFramework.tsx
+++ b/.dumi/pages/index/components/DesignFramework.tsx
@@ -1,10 +1,12 @@
 import React, { useContext } from 'react';
+import { Col, Row, Typography } from 'antd';
 import { createStyles, useTheme } from 'antd-style';
 import { Link, useLocation } from 'dumi';
-import { Col, Row, Typography } from 'antd';
+
+import useDark from '../../../hooks/useDark';
 import useLocale from '../../../hooks/useLocale';
-import * as utils from '../../../theme/utils';
 import SiteContext from '../../../theme/slots/SiteContext';
+import * as utils from '../../../theme/utils';
 
 const SECONDARY_LIST = [
   {
@@ -60,12 +62,17 @@ const locales = {
   },
 };
 
-const useStyle = createStyles(({ token, css }) => ({
-  card: css`
+const useStyle = () => {
+  const isRootDark = useDark();
+
+  return createStyles(({ token, css }) => ({
+    card: css`
       padding: ${token.paddingSM}px;
       border-radius: ${token.borderRadius * 2}px;
-      background: #fff;
-      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02),
+      background: ${isRootDark ? 'rgba(0,0,0,0.45)' : token.colorBgElevated};
+      box-shadow:
+        0 1px 2px rgba(0, 0, 0, 0.03),
+        0 1px 6px -1px rgba(0, 0, 0, 0.02),
         0 2px 4px rgba(0, 0, 0, 0.02);
 
       img {
@@ -75,18 +82,19 @@ const useStyle = createStyles(({ token, css }) => ({
       }
     `,
 
-  cardMini: css`
+    cardMini: css`
       display: block;
       border-radius: ${token.borderRadius * 2}px;
       padding: ${token.paddingMD}px ${token.paddingLG}px;
-      background: rgba(0, 0, 0, 0.02);
-      border: 1px solid rgba(0, 0, 0, 0.06);
+      background: ${isRootDark ? 'rgba(0,0,0,0.25)' : 'rgba(0, 0, 0, 0.02)'};
+      border: 1px solid ${isRootDark ? 'rgba(255,255,255, 0.45)' : 'rgba(0, 0, 0, 0.06)'};
 
       img {
         height: 48px;
       }
     `,
-}));
+  }))();
+};
 
 export default function DesignFramework() {
   const [locale] = useLocale(locales);
diff --git a/.dumi/pages/index/components/PreviewBanner/ComponentsBlock.tsx b/.dumi/pages/index/components/PreviewBanner/ComponentsBlock.tsx
new file mode 100644
index 000000000000..bda81b5b2967
--- /dev/null
+++ b/.dumi/pages/index/components/PreviewBanner/ComponentsBlock.tsx
@@ -0,0 +1,256 @@
+import React from 'react';
+import { AntDesignOutlined, CheckOutlined, CloseOutlined } from '@ant-design/icons';
+import {
+  Alert,
+  Button,
+  Checkbox,
+  ColorPicker,
+  Dropdown,
+  Input,
+  message,
+  Modal,
+  Progress,
+  Select,
+  Slider,
+  Steps,
+  Switch,
+  Tooltip,
+} from 'antd';
+import { createStyles } from 'antd-style';
+import classNames from 'classnames';
+
+import useLocale from '../../../../hooks/useLocale';
+
+const { _InternalPanelDoNotUseOrYouWillBeFired: ModalPanel } = Modal;
+const { _InternalPanelDoNotUseOrYouWillBeFired: InternalTooltip } = Tooltip;
+const { _InternalPanelDoNotUseOrYouWillBeFired: InternalMessage } = message;
+
+const locales = {
+  cn: {
+    range: '设置范围',
+    text: 'Ant Design 5.0 使用 CSS-in-JS 技术以提供动态与混合主题的能力。与此同时，我们使用组件级别的 CSS-in-JS 解决方案，让你的应用获得更好的性能。',
+    infoText: '信息内容展示',
+    dropdown: '下拉菜单',
+    finished: '已完成',
+    inProgress: '进行中',
+    waiting: '等待中',
+    option: '选项',
+    apple: '苹果',
+    banana: '香蕉',
+    orange: '橘子',
+    watermelon: '西瓜',
+    primary: '主要按钮',
+    danger: '危险按钮',
+    default: '默认按钮',
+    dashed: '虚线按钮',
+    icon: '图标按钮',
+    hello: '你好，Ant Design!',
+    release: 'Ant Design 5.0 正式发布！',
+  },
+  en: {
+    range: 'Set Range',
+    text: 'Ant Design 5.0 use CSS-in-JS technology to provide dynamic & mix theme ability. And which use component level CSS-in-JS solution get your application a better performance.',
+    infoText: 'Info Text',
+    dropdown: 'Dropdown',
+    finished: 'Finished',
+    inProgress: 'In Progress',
+    waiting: 'Waiting',
+    option: 'Option',
+    apple: 'Apple',
+    banana: 'Banana',
+    orange: 'Orange',
+    watermelon: 'Watermelon',
+    primary: 'Primary',
+    danger: 'Danger',
+    default: 'Default',
+    dashed: 'Dashed',
+    icon: 'Icon',
+    hello: 'Hello, Ant Design!',
+    release: 'Ant Design 5.0 is released!',
+  },
+};
+
+const useStyle = createStyles(({ token, css }) => {
+  const gap = token.padding;
+
+  return {
+    holder: css`
+      width: 500px;
+      display: flex;
+      flex-direction: column;
+      row-gap: ${gap}px;
+      opacity: 0.65;
+    `,
+
+    flex: css`
+      display: flex;
+      flex-wrap: nowrap;
+      column-gap: ${gap}px;
+    `,
+    ptg_20: css`
+      flex: 0 1 20%;
+    `,
+    ptg_none: css`
+      flex: none;
+    `,
+    block: css`
+      background-color: ${token.colorBgContainer};
+      padding: ${token.paddingXS}px ${token.paddingSM}px;
+      border-radius: ${token.borderRadius}px;
+      border: 1px solid ${token.colorBorder};
+    `,
+    noMargin: css`
+      margin: 0;
+    `,
+  };
+});
+
+export interface ComponentsBlockProps {
+  className?: string;
+}
+
+export default function ComponentsBlock(props: ComponentsBlockProps) {
+  const { className } = props;
+
+  const [locale] = useLocale(locales);
+  const { styles } = useStyle();
+
+  return (
+    <div className={classNames(className, styles.holder)}>
+      <ModalPanel title="Ant Design 5.0" width="100%">
+        {locale.text}
+      </ModalPanel>
+
+      <Alert message={locale.infoText} type="info" />
+
+      {/* Line */}
+      <div className={styles.flex}>
+        <ColorPicker style={{ flex: 'none' }} />
+        <div style={{ flex: 'none' }}>
+          <Dropdown.Button
+            menu={{
+              items: new Array(5).fill(null).map((_, index) => ({
+                key: `opt${index}`,
+                label: `${locale.option} ${index}`,
+              })),
+            }}
+          >
+            {locale.dropdown}
+          </Dropdown.Button>
+        </div>
+
+        <Select
+          style={{ flex: 'auto' }}
+          mode="multiple"
+          maxTagCount="responsive"
+          defaultValue={[{ value: 'apple' }, { value: 'banana' }]}
+          options={[
+            {
+              value: 'apple',
+              label: locale.apple,
+            },
+            {
+              value: 'banana',
+              label: locale.banana,
+            },
+            {
+              value: 'orange',
+              label: locale.orange,
+            },
+            {
+              value: 'watermelon',
+              label: locale.watermelon,
+            },
+          ]}
+        />
+
+        <Input style={{ flex: 'none', width: 120 }} />
+      </div>
+
+      <Progress
+        style={{ margin: 0 }}
+        percent={100}
+        strokeColor={{ '0%': '#108ee9', '100%': '#87d068' }}
+      />
+      <Progress style={{ margin: 0 }} percent={33} status="exception" />
+
+      <Steps
+        current={1}
+        items={[
+          {
+            title: locale.finished,
+          },
+          {
+            title: locale.inProgress,
+          },
+          {
+            title: locale.waiting,
+          },
+        ]}
+      />
+
+      {/* Line */}
+      <div className={styles.block}>
+        <Slider
+          style={{ marginInline: 20 }}
+          range
+          marks={{
+            0: '0°C',
+            26: '26°C',
+            37: '37°C',
+            100: {
+              style: {
+                color: '#f50',
+              },
+              label: <strong>100°C</strong>,
+            },
+          }}
+          defaultValue={[26, 37]}
+        />
+      </div>
+
+      {/* Line */}
+      <div className={styles.flex}>
+        <Button className={styles.ptg_20} type="primary">
+          {locale.primary}
+        </Button>
+        <Button className={styles.ptg_20} type="primary" danger>
+          {locale.danger}
+        </Button>
+        <Button className={styles.ptg_20}>{locale.default}</Button>
+        <Button className={styles.ptg_20} type="dashed">
+          {locale.dashed}
+        </Button>
+        <Button className={styles.ptg_20} icon={<AntDesignOutlined />}>
+          {locale.icon}
+        </Button>
+      </div>
+
+      {/* Line */}
+      <div className={styles.block}>
+        <div className={styles.flex}>
+          <Switch
+            className={styles.ptg_none}
+            defaultChecked
+            checkedChildren={<CheckOutlined />}
+            unCheckedChildren={<CloseOutlined />}
+          />
+
+          <Checkbox.Group
+            className={styles.ptg_none}
+            options={[locale.apple, locale.banana, locale.orange]}
+            defaultValue={[locale.apple]}
+          />
+        </div>
+      </div>
+
+      <div>
+        <InternalMessage content={locale.release} type="success" />
+      </div>
+
+      <InternalTooltip title={locale.hello} placement="topLeft" className={styles.noMargin} />
+
+      <Alert message="Ant Design love you!" type="success" />
+    </div>
+  );
+}
diff --git a/.dumi/pages/index/components/PreviewBanner/index.tsx b/.dumi/pages/index/components/PreviewBanner/index.tsx
new file mode 100644
index 000000000000..dd8835c03c8c
--- /dev/null
+++ b/.dumi/pages/index/components/PreviewBanner/index.tsx
@@ -0,0 +1,137 @@
+import React from 'react';
+import { Button, ConfigProvider, Space, Typography } from 'antd';
+import { createStyles, useTheme } from 'antd-style';
+import { Link, useLocation } from 'dumi';
+
+import useLocale from '../../../../hooks/useLocale';
+import SiteContext from '../../../../theme/slots/SiteContext';
+import * as utils from '../../../../theme/utils';
+import { GroupMask } from '../Group';
+import ComponentsBlock from './ComponentsBlock';
+
+const locales = {
+  cn: {
+    slogan: '助力设计开发者「更灵活」地搭建出「更美」的产品，让用户「快乐工作」～',
+    start: '开始使用',
+    designLanguage: '设计语言',
+  },
+  en: {
+    slogan:
+      'Help designers/developers building beautiful products more flexible and working with happiness',
+    start: 'Getting Started',
+    designLanguage: 'Design Language',
+  },
+};
+
+const useStyle = () => {
+  const { direction } = React.useContext(ConfigProvider.ConfigContext);
+  const isRTL = direction === 'rtl';
+
+  return createStyles(({ token, css }) => {
+    const textShadow = `0 0 3px ${token.colorBgContainer}`;
+
+    return {
+      holder: css`
+        height: 520px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        overflow: hidden;
+        perspective: 800px;
+        row-gap: ${token.marginXL}px;
+      `,
+
+      typography: css`
+        text-align: center;
+        position: relative;
+        z-index: 1;
+        padding-inline: ${token.paddingXL}px;
+        text-shadow: ${new Array(5)
+          .fill(null)
+          .map(() => textShadow)
+          .join(', ')};
+
+        h1 {
+          font-family: AliPuHui, ${token.fontFamily} !important;
+          font-weight: 900 !important;
+          font-size: ${token.fontSizeHeading2 * 2}px !important;
+          line-height: ${token.lineHeightHeading2} !important;
+        }
+
+        p {
+          font-size: ${token.fontSizeLG}px !important;
+          font-weight: normal !important;
+          margin-bottom: 0;
+        }
+      `,
+
+      block: css`
+        position: absolute;
+        inset-inline-end: 0;
+        top: -38px;
+        transform: ${isRTL ? 'rotate3d(24, 83, -45, 57deg)' : 'rotate3d(24, -83, 45, 57deg)'};
+      `,
+
+      child: css`
+        position: relative;
+        z-index: 1;
+      `,
+    };
+  })();
+};
+export interface PreviewBannerProps {
+  children?: React.ReactNode;
+}
+
+export default function PreviewBanner(props: PreviewBannerProps) {
+  const { children } = props;
+
+  const [locale] = useLocale(locales);
+  const { styles } = useStyle();
+  const { isMobile } = React.useContext(SiteContext);
+  const token = useTheme();
+  const { pathname, search } = useLocation();
+  const isZhCN = utils.isZhCN(pathname);
+
+  return (
+    <GroupMask>
+      {/* Image Left Top */}
+      <img
+        style={{ position: 'absolute', left: isMobile ? -120 : 0, top: 0, width: 240 }}
+        src="https://gw.alipayobjects.com/zos/bmw-prod/49f963db-b2a8-4f15-857a-270d771a1204.svg"
+        alt="bg"
+      />
+      {/* Image Right Top */}
+      <img
+        style={{ position: 'absolute', right: isMobile ? 0 : '40%', bottom: 120, width: 240 }}
+        src="https://gw.alipayobjects.com/zos/bmw-prod/e152223c-bcae-4913-8938-54fda9efe330.svg"
+        alt="bg"
+      />
+
+      <div className={styles.holder}>
+        {/* Mobile not show the component preview */}
+        {!isMobile && <ComponentsBlock className={styles.block} />}
+
+        <Typography className={styles.typography}>
+          <h1>Ant Design 5.0</h1>
+          <p>{locale.slogan}</p>
+        </Typography>
+
+        <Space size="middle" style={{ marginBottom: token.marginXL }}>
+          <Link to={utils.getLocalizedPathname('/components/overview/', isZhCN, search)}>
+            <Button size="large" type="primary">
+              {locale.start}
+            </Button>
+          </Link>
+          <Link to={utils.getLocalizedPathname('/docs/spec/introduce/', isZhCN, search)}>
+            <Button size="large">{locale.designLanguage}</Button>
+          </Link>
+        </Space>
+
+        <div className={styles.child}>{children}</div>
+      </div>
+    </GroupMask>
+  );
+}
diff --git a/.dumi/pages/index/components/Theme/ThemePicker.tsx b/.dumi/pages/index/components/Theme/ThemePicker.tsx
index e99b1cd13872..790a553fc498 100644
--- a/.dumi/pages/index/components/Theme/ThemePicker.tsx
+++ b/.dumi/pages/index/components/Theme/ThemePicker.tsx
@@ -43,6 +43,7 @@ const useStyle = createStyles(({ token, css }) => ({
         width: 0;
         height: 0;
         opacity: 0;
+        position: absolute;
       }
 
       img {
diff --git a/.dumi/pages/index/components/Theme/index.tsx b/.dumi/pages/index/components/Theme/index.tsx
index 436c90cf61c1..7003d1e5fe83 100644
--- a/.dumi/pages/index/components/Theme/index.tsx
+++ b/.dumi/pages/index/components/Theme/index.tsx
@@ -1,15 +1,12 @@
-import { TinyColor } from '@ctrl/tinycolor';
+import * as React from 'react';
+import { defaultAlgorithm, defaultTheme } from '@ant-design/compatible';
 import {
   BellOutlined,
   FolderOutlined,
   HomeOutlined,
   QuestionCircleOutlined,
 } from '@ant-design/icons';
-import { createStyles, css, useTheme } from 'antd-style';
-import * as React from 'react';
-import classNames from 'classnames';
-import { defaultTheme, defaultAlgorithm } from '@ant-design/compatible';
-import { useLocation } from 'dumi';
+import { TinyColor } from '@ctrl/tinycolor';
 import type { MenuProps } from 'antd';
 import {
   Breadcrumb,
@@ -21,24 +18,29 @@ import {
   Menu,
   Radio,
   Space,
-  Typography,
   theme,
+  Typography,
 } from 'antd';
+import { createStyles, css, useTheme } from 'antd-style';
 import type { Color } from 'antd/es/color-picker';
 import { generateColor } from 'antd/es/color-picker/util';
-import * as utils from '../../../../theme/utils';
+import classNames from 'classnames';
+import { useLocation } from 'dumi';
+
+import useDark from '../../../../hooks/useDark';
 import useLocale from '../../../../hooks/useLocale';
+import Link from '../../../../theme/common/Link';
 import SiteContext from '../../../../theme/slots/SiteContext';
+import * as utils from '../../../../theme/utils';
 import Group from '../Group';
 import { getCarouselStyle } from '../util';
 import BackgroundImage from './BackgroundImage';
 import ColorPicker from './ColorPicker';
+import { DEFAULT_COLOR, getAvatarURL, getClosetColor, PINK_COLOR } from './colorUtil';
 import MobileCarousel from './MobileCarousel';
 import RadiusPicker from './RadiusPicker';
 import type { THEME } from './ThemePicker';
 import ThemePicker from './ThemePicker';
-import { DEFAULT_COLOR, PINK_COLOR, getAvatarURL, getClosetColor } from './colorUtil';
-import Link from '../../../../theme/common/Link';
 
 const { Header, Content, Sider } = Layout;
 
@@ -355,6 +357,15 @@ export default function Theme() {
     form.setFieldsValue(mergedData);
   }, [themeType]);
 
+  const isRootDark = useDark();
+
+  React.useEffect(() => {
+    onThemeChange(null, {
+      ...themeData,
+      themeType: isRootDark ? 'dark' : 'default',
+    });
+  }, [isRootDark]);
+
   // ================================ Tokens ================================
   const closestColor = getClosetColor(colorPrimaryValue);
 
diff --git a/.dumi/pages/index/index.tsx b/.dumi/pages/index/index.tsx
index 71e85f2f51d3..8494a508d605 100644
--- a/.dumi/pages/index/index.tsx
+++ b/.dumi/pages/index/index.tsx
@@ -1,12 +1,14 @@
+import React from 'react';
+import { ConfigProvider, theme } from 'antd';
 import { createStyles, css } from 'antd-style';
-import React, { Suspense } from 'react';
-import { ConfigProvider } from 'antd';
+
+import useDark from '../../hooks/useDark';
 import useLocale from '../../hooks/useLocale';
-import Banner from './components/Banner';
-import BannerRecommends, { BannerRecommendsFallback } from './components/BannerRecommends';
+// import BannerRecommends, { BannerRecommendsFallback } from './components/BannerRecommends';
 import ComponentsList from './components/ComponentsList';
 import DesignFramework from './components/DesignFramework';
 import Group from './components/Group';
+import PreviewBanner from './components/PreviewBanner';
 import Theme from './components/Theme';
 
 const useStyle = createStyles(() => ({
@@ -36,43 +38,57 @@ const locales = {
 const Homepage: React.FC = () => {
   const [locale] = useLocale(locales);
   const { styles } = useStyle();
+  const { token } = theme.useToken();
+
+  const isRootDark = useDark();
 
   return (
-    <ConfigProvider theme={{ algorithm: undefined }}>
-      <section>
-        <Banner>
-          <Suspense fallback={<BannerRecommendsFallback />}>
-            <BannerRecommends />
-          </Suspense>
-        </Banner>
-        <div>
+    <section>
+      <PreviewBanner>
+        {/* 文档很久没更新了，先藏起来 */}
+        {/* <Suspense fallback={<BannerRecommendsFallback />}>
+          <BannerRecommends />
+        </Suspense> */}
+      </PreviewBanner>
+
+      <div>
+        {/* 定制主题 */}
+        <ConfigProvider
+          theme={{
+            algorithm: theme.defaultAlgorithm,
+          }}
+        >
           <Theme />
-          <Group
-            background="#fff"
-            collapse
-            title={locale.assetsTitle}
-            description={locale.assetsDesc}
-            id="design"
-          >
-            <ComponentsList />
-          </Group>
-          <Group
-            title={locale.designTitle}
-            description={locale.designDesc}
-            background="#F5F8FF"
-            decoration={
-              <img
-                className={styles.image}
-                src="https://gw.alipayobjects.com/zos/bmw-prod/ba37a413-28e6-4be4-b1c5-01be1a0ebb1c.svg"
-                alt=""
-              />
-            }
-          >
-            <DesignFramework />
-          </Group>
-        </div>
-      </section>
-    </ConfigProvider>
+        </ConfigProvider>
+
+        {/* 组件列表 */}
+        <Group
+          background={token.colorBgElevated}
+          collapse
+          title={locale.assetsTitle}
+          description={locale.assetsDesc}
+          id="design"
+        >
+          <ComponentsList />
+        </Group>
+
+        {/* 设计语言 */}
+        <Group
+          title={locale.designTitle}
+          description={locale.designDesc}
+          background={isRootDark ? 'rgb(57, 63, 74)' : '#F5F8FF'}
+          decoration={
+            <img
+              className={styles.image}
+              src="https://gw.alipayobjects.com/zos/bmw-prod/ba37a413-28e6-4be4-b1c5-01be1a0ebb1c.svg"
+              alt=""
+            />
+          }
+        >
+          <DesignFramework />
+        </Group>
+      </div>
+    </section>
   );
 };
 
diff --git a/.dumi/pages/theme-editor/index.tsx b/.dumi/pages/theme-editor/index.tsx
index d67fa4ca52d6..9b62a90e8014 100644
--- a/.dumi/pages/theme-editor/index.tsx
+++ b/.dumi/pages/theme-editor/index.tsx
@@ -44,11 +44,6 @@ const CustomTheme = () => {
     const storedConfig = localStorage.getItem(ANT_DESIGN_V5_THEME_EDITOR_THEME);
     if (storedConfig) {
       const themeConfig = JSON.parse(storedConfig);
-      const originThemeConfig = {
-        json: themeConfig,
-        text: undefined,
-      };
-      setThemeConfigContent(originThemeConfig);
       setTheme(themeConfig);
     }
   }, []);
diff --git a/.dumi/theme/builtins/ComponentOverview/index.tsx b/.dumi/theme/builtins/ComponentOverview/index.tsx
index 2347962cb17b..6582b05f5bd4 100644
--- a/.dumi/theme/builtins/ComponentOverview/index.tsx
+++ b/.dumi/theme/builtins/ComponentOverview/index.tsx
@@ -1,57 +1,61 @@
 import React, { memo, useContext, useMemo, useRef, useState } from 'react';
 import type { CSSProperties } from 'react';
-import { Link, useIntl, useSidebarData, useLocation } from 'dumi';
+import { SearchOutlined } from '@ant-design/icons';
+import { Affix, Card, Col, Divider, Input, Row, Space, Tag, Typography } from 'antd';
 import { createStyles, useTheme } from 'antd-style';
+import { Link, useIntl, useLocation, useSidebarData } from 'dumi';
 import debounce from 'lodash/debounce';
-import { SearchOutlined } from '@ant-design/icons';
-import { Card, Col, Divider, Input, Row, Space, Tag, Typography, Affix } from 'antd';
+
+import SiteContext from '../../slots/SiteContext';
 import type { Component } from './ProComponentsList';
 import proComponentsList from './ProComponentsList';
-import SiteContext from '../../slots/SiteContext';
 
 const useStyle = createStyles(({ token, css }) => ({
   componentsOverviewGroupTitle: css`
-      margin-bottom: 24px !important;
-    `,
+    margin-bottom: 24px !important;
+  `,
   componentsOverviewTitle: css`
-      overflow: hidden;
-      color: ${token.colorTextHeading};
-      text-overflow: ellipsis;
-    `,
+    overflow: hidden;
+    color: ${token.colorTextHeading};
+    text-overflow: ellipsis;
+  `,
   componentsOverviewImg: css`
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: 152px;
-    `,
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 152px;
+  `,
   componentsOverviewCard: css`
-      cursor: pointer;
-      transition: all 0.5s;
-      &:hover {
-        box-shadow: 0 6px 16px -8px #00000014, 0 9px 28px #0000000d, 0 12px 48px 16px #00000008;
-      }
-    `,
+    cursor: pointer;
+    transition: all 0.5s;
+    &:hover {
+      box-shadow:
+        0 6px 16px -8px #00000014,
+        0 9px 28px #0000000d,
+        0 12px 48px 16px #00000008;
+    }
+  `,
   componentsOverviewAffix: css`
-      display: flex;
-      transition: all 0.3s;
-      justify-content: space-between;
-    `,
+    display: flex;
+    transition: all 0.3s;
+    justify-content: space-between;
+  `,
   componentsOverviewSearch: css`
-      padding: 0;
-      .anticon-search {
-        color: ${token.colorTextDisabled};
-      }
-    `,
+    padding: 0;
+    .anticon-search {
+      color: ${token.colorTextDisabled};
+    }
+  `,
   componentsOverviewContent: css`
-      &:empty:after {
-        display: block;
-        padding: 16px 0 40px;
-        color: ${token.colorTextDisabled};
-        text-align: center;
-        border-bottom: 1px solid ${token.colorSplit};
-        content: 'Not Found';
-      }
-    `,
+    &:empty:after {
+      display: block;
+      padding: 16px 0 40px;
+      color: ${token.colorTextDisabled};
+      text-align: center;
+      border-bottom: 1px solid ${token.colorSplit};
+      content: 'Not Found';
+    }
+  `,
 }));
 
 const onClickCard = (pathname: string) => {
@@ -107,7 +111,7 @@ const Overview: React.FC = () => {
 
   const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (event) => {
     if (event.keyCode === 13 && search.trim().length) {
-      sectionRef.current?.querySelector<HTMLElement>('.components-overview-card')?.click();
+      sectionRef.current?.querySelector<HTMLElement>(`.${styles.componentsOverviewCard}`)?.click();
     }
   };
 
diff --git a/.dumi/theme/builtins/ComponentTokenTable/index.tsx b/.dumi/theme/builtins/ComponentTokenTable/index.tsx
index c67edab7b904..7d64eb2d5aed 100644
--- a/.dumi/theme/builtins/ComponentTokenTable/index.tsx
+++ b/.dumi/theme/builtins/ComponentTokenTable/index.tsx
@@ -1,10 +1,10 @@
-import { RightOutlined } from '@ant-design/icons';
+import { RightOutlined, LinkOutlined, QuestionCircleOutlined } from '@ant-design/icons';
 import { createStyles, css, useTheme } from 'antd-style';
 import { getDesignToken } from 'antd-token-previewer';
 import React, { useMemo, useState } from 'react';
 import tokenMeta from 'antd/es/version/token-meta.json';
 import tokenData from 'antd/es/version/token.json';
-import { ConfigProvider, Table } from 'antd';
+import { ConfigProvider, Table, Popover, Typography } from 'antd';
 import useLocale from '../../../hooks/useLocale';
 import { useColumns } from '../TokenTable';
 
@@ -18,6 +18,9 @@ const locales = {
     value: '默认值',
     componentToken: '组件 Token',
     globalToken: '全局 Token',
+    help: '如何定制？',
+    customizeTokenLink: '/docs/react/customize-theme-cn#修改主题变量',
+    customizeComponentTokenLink: '/docs/react/customize-theme-cn#修改组件变量',
   },
   en: {
     token: 'Token Name',
@@ -26,6 +29,9 @@ const locales = {
     value: 'Default Value',
     componentToken: 'Component Token',
     globalToken: 'Global Token',
+    help: 'How to use?',
+    customizeTokenLink: '/docs/react/customize-theme#customize-design-token',
+    customizeComponentTokenLink: 'docs/react/customize-theme#customize-component-token',
   },
 };
 
@@ -45,16 +51,34 @@ const useStyle = createStyles(() => ({
       transition: all 0.3s;
     }
   `,
+  help: css`
+    margin-left: 8px;
+    font-size: 12px;
+    font-weight: normal;
+    color: #999;
+    a {
+      color: #999;
+    }
+  `,
 }));
 
 interface SubTokenTableProps {
   defaultOpen?: boolean;
   title: string;
+  helpText: React.ReactNode;
+  helpLink: string;
   tokens: string[];
   component?: string;
 }
 
-const SubTokenTable: React.FC<SubTokenTableProps> = ({ defaultOpen, tokens, title, component }) => {
+const SubTokenTable: React.FC<SubTokenTableProps> = ({
+  defaultOpen,
+  tokens,
+  title,
+  helpText,
+  helpLink,
+  component,
+}) => {
   const [, lang] = useLocale(locales);
   const token = useTheme();
   const columns = useColumns();
@@ -104,11 +128,53 @@ const SubTokenTable: React.FC<SubTokenTableProps> = ({ defaultOpen, tokens, titl
     })
     .filter(Boolean);
 
+  const code = component
+    ? `<ConfigProvider
+  theme={{
+    components: {
+      ${component}: {
+        /* here is your component tokens */
+      },
+    },
+  }}
+>
+  ...
+</ConfigProvider>`
+    : `<ConfigProvider
+  theme={{
+    token: {
+      /* here is your global tokens */
+    },
+  }}
+>
+  ...
+</ConfigProvider>`;
+
   return (
-    <div>
+    <>
       <div className={styles.tableTitle} onClick={() => setOpen(!open)}>
         <RightOutlined className={styles.arrowIcon} rotate={open ? 90 : 0} />
-        <h3>{title}</h3>
+        <h3>
+          {title}
+          <Popover
+            title={null}
+            popupStyle={{ width: 400 }}
+            content={
+              <Typography>
+                <pre style={{ fontSize: 12 }}>{code}</pre>
+                <a href={helpLink} target="_blank" rel="noreferrer">
+                  <LinkOutlined style={{ marginRight: 4 }} />
+                  {helpText}
+                </a>
+              </Typography>
+            }
+          >
+            <span className={styles.help}>
+              <QuestionCircleOutlined style={{ marginRight: 3 }} />
+              {helpText}
+            </span>
+          </Popover>
+        </h3>
       </div>
       {open && (
         <ConfigProvider theme={{ token: { borderRadius: 0 } }}>
@@ -123,7 +189,7 @@ const SubTokenTable: React.FC<SubTokenTableProps> = ({ defaultOpen, tokens, titl
           />
         </ConfigProvider>
       )}
-    </div>
+    </>
   );
 };
 
@@ -152,11 +218,19 @@ const ComponentTokenTable: React.FC<ComponentTokenTableProps> = ({ component })
       {tokenMeta.components[component] && (
         <SubTokenTable
           title={locale.componentToken}
+          helpText={locale.help}
+          helpLink={locale.customizeTokenLink}
           tokens={tokenMeta.components[component].map((item) => item.token)}
           component={component}
+          defaultOpen
         />
       )}
-      <SubTokenTable title={locale.globalToken} tokens={mergedGlobalTokens} />
+      <SubTokenTable
+        title={locale.globalToken}
+        helpText={locale.help}
+        helpLink={locale.customizeComponentTokenLink}
+        tokens={mergedGlobalTokens}
+      />
     </>
   );
 };
diff --git a/.dumi/theme/builtins/IconSearch/Category.tsx b/.dumi/theme/builtins/IconSearch/Category.tsx
index 83b70a309eea..1cbbdf4c57c6 100644
--- a/.dumi/theme/builtins/IconSearch/Category.tsx
+++ b/.dumi/theme/builtins/IconSearch/Category.tsx
@@ -16,7 +16,7 @@ const Category: React.FC<CategoryProps> = (props) => {
   const { icons, title, newIcons, theme } = props;
   const intl = useIntl();
   const [justCopied, setJustCopied] = React.useState<string | null>(null);
-  const copyId = React.useRef<NodeJS.Timeout | null>(null);
+  const copyId = React.useRef<ReturnType<typeof setTimeout> | null>(null);
   const onCopied = React.useCallback((type: string, text: string) => {
     message.success(
       <span>
diff --git a/.dumi/theme/builtins/Previewer/CodePreviewer.tsx b/.dumi/theme/builtins/Previewer/CodePreviewer.tsx
index 9bbd9b08d2dc..e97ee0d8faf0 100644
--- a/.dumi/theme/builtins/Previewer/CodePreviewer.tsx
+++ b/.dumi/theme/builtins/Previewer/CodePreviewer.tsx
@@ -1,20 +1,20 @@
+import React, { useContext, useEffect, useRef, useState } from 'react';
 import {
   CheckOutlined,
   LinkOutlined,
   SnippetsOutlined,
   ThunderboltOutlined,
+  UpOutlined,
 } from '@ant-design/icons';
 import type { Project } from '@stackblitz/sdk';
 import stackblitzSdk from '@stackblitz/sdk';
+import { Alert, Badge, Space, Tooltip } from 'antd';
+import { createStyles, css } from 'antd-style';
 import classNames from 'classnames';
 import { FormattedMessage, useSiteData } from 'dumi';
-import toReactElement from 'jsonml-to-react-element';
-import JsonML from 'jsonml.js/lib/utils';
 import LZString from 'lz-string';
-import Prism from 'prismjs';
-import React, { useContext, useEffect, useRef, useState } from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
-import { Alert, Badge, Space, Tooltip } from 'antd';
+
 import type { AntdPreviewerProps } from '.';
 import useLocation from '../../../hooks/useLocation';
 import BrowserFrame from '../../common/BrowserFrame';
@@ -31,28 +31,6 @@ import { ping } from '../../utils';
 
 const { ErrorBoundary } = Alert;
 
-function toReactComponent(jsonML: any) {
-  return toReactElement(jsonML, [
-    [
-      (node: any) => JsonML.isElement(node) && JsonML.getTagName(node) === 'pre',
-      (node: any, index: any) => {
-        // ref: https://github.com/benjycui/bisheng/blob/master/packages/bisheng/src/bisheng-plugin-highlight/lib/browser.js#L7
-        const attr = JsonML.getAttributes(node);
-        return React.createElement(
-          'pre',
-          {
-            key: index,
-            className: `language-${attr.lang}`,
-          },
-          React.createElement('code', {
-            dangerouslySetInnerHTML: { __html: attr.highlighted },
-          }),
-        );
-      },
-    ],
-  ]);
-}
-
 function compress(string: string): string {
   return LZString.compressToBase64(string)
     .replace(/\+/g, '-') // Convert '+' to '-'
@@ -88,6 +66,31 @@ function useShowRiddleButton() {
   return showRiddleButton;
 }
 
+const useStyle = createStyles(({ token }) => {
+  const { borderRadius } = token;
+  return {
+    codeHideBtn: css`
+      width: 100%;
+      height: 40px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: 0 0 ${borderRadius}px ${borderRadius}px;
+      border-top: 1px solid ${token.colorSplit};
+      color: ${token.colorTextSecondary};
+      transition: all 0.2s ease-in-out;
+      background-color: ${token.colorBgElevated};
+      cursor: pointer;
+      &:hover {
+        color: ${token.colorPrimary};
+      }
+      span {
+        margin-right: ${token.marginXXS}px;
+      }
+    `,
+  };
+});
+
 const CodePreviewer: React.FC<AntdPreviewerProps> = (props) => {
   const {
     asset,
@@ -111,6 +114,8 @@ const CodePreviewer: React.FC<AntdPreviewerProps> = (props) => {
   const { pkg } = useSiteData();
   const location = useLocation();
 
+  const { styles } = useStyle();
+
   const entryCode = asset.dependencies['index.tsx'].value;
   const showRiddleButton = useShowRiddleButton();
 
@@ -130,13 +135,6 @@ const CodePreviewer: React.FC<AntdPreviewerProps> = (props) => {
 
   const [showOnlineUrl, setShowOnlineUrl] = useState<boolean>(false);
 
-  const highlightedCodes = {
-    jsx: Prism.highlight(jsx, Prism.languages.javascript, 'jsx'),
-    tsx: Prism.highlight(entryCode, Prism.languages.javascript, 'jsx'),
-  };
-
-  const highlightedStyle = style ? Prism.highlight(style, Prism.languages.css, 'css') : '';
-
   useEffect(() => {
     const regexp = /preview-(\d+)-ant-design/; // matching PR preview addresses
     setShowOnlineUrl(
@@ -538,17 +536,20 @@ createRoot(document.getElementById('container')).render(<Demo />);
       {codeExpand && (
         <section className={highlightClass} key="code">
           <CodePreview
-            codes={highlightedCodes}
-            toReactComponent={toReactComponent}
-            onCodeTypeChange={(type) => setCodeType(type)}
+            sourceCode={entryCode}
+            jsxCode={jsx}
+            styleCode={style}
+            onCodeTypeChange={setCodeType}
           />
-          {highlightedStyle ? (
-            <div key="style" className="highlight">
-              <pre>
-                <code className="css" dangerouslySetInnerHTML={{ __html: highlightedStyle }} />
-              </pre>
-            </div>
-          ) : null}
+          <div
+            tabIndex={0}
+            role="button"
+            className={styles.codeHideBtn}
+            onClick={() => setCodeExpand(false)}
+          >
+            <UpOutlined />
+            <FormattedMessage id="app.demo.code.hide.simplify" />
+          </div>
         </section>
       )}
     </section>
@@ -560,7 +561,9 @@ createRoot(document.getElementById('container')).render(<Demo />);
     // resulting in some response delays like following issue:
     // https://github.com/ant-design/ant-design/issues/39995
     // So we insert style tag into head tag.
-    if (!style) return;
+    if (!style) {
+      return;
+    }
     const styleTag = document.createElement('style');
     styleTag.type = 'text/css';
     styleTag.innerHTML = style;
diff --git a/.dumi/theme/builtins/Previewer/Previewer.tsx b/.dumi/theme/builtins/Previewer/Previewer.tsx
new file mode 100644
index 000000000000..fb23c55e0f71
--- /dev/null
+++ b/.dumi/theme/builtins/Previewer/Previewer.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import type { IPreviewerProps } from 'dumi';
+import { useTabMeta } from 'dumi';
+
+import CodePreviewer from './CodePreviewer';
+import DesignPreviewer from './DesignPreviewer';
+
+export interface AntdPreviewerProps extends IPreviewerProps {
+  originDebug?: IPreviewerProps['debug'];
+}
+
+const Previewer: React.FC<AntdPreviewerProps> = (props) => {
+  const tab = useTabMeta();
+
+  if (tab?.frontmatter.title === 'Design') {
+    return <DesignPreviewer {...props} />;
+  }
+
+  return <CodePreviewer {...props} />;
+};
+
+export default Previewer;
diff --git a/.dumi/theme/builtins/Previewer/index.tsx b/.dumi/theme/builtins/Previewer/index.tsx
index a37144956fd6..e36c556112f8 100644
--- a/.dumi/theme/builtins/Previewer/index.tsx
+++ b/.dumi/theme/builtins/Previewer/index.tsx
@@ -1,21 +1,40 @@
+import React, { Suspense } from 'react';
 import type { IPreviewerProps } from 'dumi';
-import { useTabMeta } from 'dumi';
-import React from 'react';
-import CodePreviewer from './CodePreviewer';
-import DesignPreviewer from './DesignPreviewer';
+import { Skeleton, Alert } from 'antd';
+import { createStyles } from 'antd-style';
 
-export interface AntdPreviewerProps extends IPreviewerProps {
-  originDebug?: IPreviewerProps['debug'];
-}
+const { ErrorBoundary } = Alert;
 
-const Previewer: React.FC<AntdPreviewerProps> = (props) => {
-  const tab = useTabMeta();
+const Previewer = React.lazy(() => import('./Previewer'));
 
-  if (tab?.frontmatter.title === 'Design') {
-    return <DesignPreviewer {...props} />;
-  }
+const useStyle = createStyles(({ css }) => ({
+  skeletonWrapper: css`
+    width: 100% !important;
+    height: 500px;
+    margin-bottom: 16px;
+  `,
+}));
 
-  return <CodePreviewer {...props} />;
+export default (props: IPreviewerProps) => {
+  const { styles } = useStyle();
+  return (
+    <ErrorBoundary>
+      <Suspense
+        fallback={
+          <Skeleton.Node
+            active
+            className={styles.skeletonWrapper}
+            style={{
+              width: '100%',
+              height: '100%',
+            }}
+          >
+            {' '}
+          </Skeleton.Node>
+        }
+      >
+        <Previewer {...props} />
+      </Suspense>
+    </ErrorBoundary>
+  );
 };
-
-export default Previewer;
diff --git a/.dumi/theme/builtins/TokenCompare/index.tsx b/.dumi/theme/builtins/TokenCompare/index.tsx
index a44ffcda8da2..9ae37389f0b0 100644
--- a/.dumi/theme/builtins/TokenCompare/index.tsx
+++ b/.dumi/theme/builtins/TokenCompare/index.tsx
@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import { TinyColor } from '@ctrl/tinycolor';
 import { createStyles } from 'antd-style';
 import tokenMeta from 'antd/es/version/token-meta.json';
-import { theme, Space } from 'antd';
+import { Space, theme } from 'antd';
 import useLocale from '../../../hooks/useLocale';
 
 const useStyle = createStyles(({ token, css }) => {
@@ -29,7 +29,7 @@ const useStyle = createStyles(({ token, css }) => {
       display: flex;
       align-items: center;
       justify-content: center;
-
+      color: rgba(0,0,0,0.88);
       border-right: 1px solid rgba(0, 0, 0, 0.1);
     `,
 
diff --git a/.dumi/theme/common/CodePreview.tsx b/.dumi/theme/common/CodePreview.tsx
index 93c9c4580710..827630fcc014 100644
--- a/.dumi/theme/common/CodePreview.tsx
+++ b/.dumi/theme/common/CodePreview.tsx
@@ -1,37 +1,95 @@
-import React from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { Tabs } from 'antd';
+import toReactElement from 'jsonml-to-react-element';
+import JsonML from 'jsonml.js/lib/utils';
+import Prism from 'prismjs';
 
 const LANGS = {
   tsx: 'TypeScript',
   jsx: 'JavaScript',
+  style: 'CSS',
 };
 
 interface CodePreviewProps {
-  codes?: Record<PropertyKey, string>;
-  toReactComponent?: (node: any) => React.ReactNode;
+  sourceCode?: string;
+  jsxCode?: string;
+  styleCode?: string;
   onCodeTypeChange?: (activeKey: string) => void;
 }
 
-const CodePreview: React.FC<CodePreviewProps> = ({ toReactComponent, codes, onCodeTypeChange }) => {
-  const langList = Object.keys(codes).sort().reverse();
+function toReactComponent(jsonML: any[]) {
+  return toReactElement(jsonML, [
+    [
+      (node: any) => JsonML.isElement(node) && JsonML.getTagName(node) === 'pre',
+      (node: any, index: number) => {
+        const attr = JsonML.getAttributes(node);
+        return (
+          <pre key={index} className={`language-${attr.lang}`}>
+            <code dangerouslySetInnerHTML={{ __html: attr.highlighted }} />
+          </pre>
+        );
+      },
+    ],
+  ]);
+}
+
+const CodePreview: React.FC<CodePreviewProps> = ({
+  sourceCode = '',
+  jsxCode = '',
+  styleCode = '',
+  onCodeTypeChange,
+}) => {
+  // 避免 Tabs 数量不稳定的闪动问题
+  const initialCodes = {};
+  if (sourceCode) {
+    initialCodes.tsx = '';
+  }
+  if (jsxCode) {
+    initialCodes.jsx = '';
+  }
+  if (styleCode) {
+    initialCodes.style = '';
+  }
+  const [highlightedCodes, setHighlightedCodes] = React.useState(initialCodes);
+
+  useEffect(() => {
+    const codes = {
+      tsx: Prism.highlight(sourceCode, Prism.languages.javascript, 'jsx'),
+      jsx: Prism.highlight(jsxCode, Prism.languages.javascript, 'jsx'),
+      style: Prism.highlight(styleCode, Prism.languages.css, 'css'),
+    };
+    // 去掉空的代码类型
+    Object.keys(codes).forEach((key) => {
+      if (!codes[key]) {
+        delete codes[key];
+      }
+    });
+    setHighlightedCodes(codes);
+  }, [jsxCode, sourceCode, styleCode]);
+
+  const langList = Object.keys(highlightedCodes);
+  const items = useMemo(
+    () =>
+      langList.map((lang) => ({
+        label: LANGS[lang],
+        key: lang,
+        children: toReactComponent(['pre', { lang, highlighted: highlightedCodes[lang] }]),
+      })),
+    [JSON.stringify(highlightedCodes)],
+  );
+
+  if (!langList.length) {
+    return null;
+  }
+
   if (langList.length === 1) {
     return toReactComponent([
       'pre',
-      { lang: langList[0], highlighted: codes[langList[0]], className: 'highlight' },
+      { lang: langList[0], highlighted: highlightedCodes[langList[0]], className: 'highlight' },
     ]);
   }
-  return (
-    <Tabs
-      centered
-      className="highlight"
-      onChange={onCodeTypeChange}
-      items={langList.map((lang) => ({
-        label: LANGS[lang],
-        key: lang,
-        children: toReactComponent(['pre', { lang, highlighted: codes[lang] }]),
-      }))}
-    />
-  );
+
+  return <Tabs centered className="highlight" onChange={onCodeTypeChange} items={items} />;
 };
 
 export default CodePreview;
diff --git a/.dumi/theme/common/Color/ColorPaletteTool.tsx b/.dumi/theme/common/Color/ColorPaletteTool.tsx
index 5f9b4319eb68..2c2de6d3f9ef 100644
--- a/.dumi/theme/common/Color/ColorPaletteTool.tsx
+++ b/.dumi/theme/common/Color/ColorPaletteTool.tsx
@@ -3,26 +3,44 @@ import React, { useMemo, useState } from 'react';
 import { ColorPicker } from 'antd';
 import type { Color } from 'antd/es/color-picker';
 import ColorPatterns from './ColorPatterns';
+import useLocale from '../../../hooks/useLocale';
 
 const primaryMinSaturation = 70; // 主色推荐最小饱和度
 const primaryMinBrightness = 70; // 主色推荐最小亮度
 
+const locales = {
+  cn: {
+    saturation: (s: string) => `饱和度建议不低于${primaryMinSaturation}（现在${s}）`,
+    brightness: (b: string) => `亮度建议不低于${primaryMinBrightness}（现在${b}）`,
+  },
+  en: {
+    saturation: (s: string) =>
+      `Saturation is recommended not to be lower than ${primaryMinSaturation}（currently${s}）`,
+    brightness: (b: string) =>
+      `Brightness is recommended not to be lower than ${primaryMinBrightness}（currently${b}）`,
+  },
+};
+
 const ColorPaletteTool: React.FC = () => {
   const [primaryColor, setPrimaryColor] = useState<string>('#1890ff');
   const [primaryColorInstance, setPrimaryColorInstance] = useState<Color>(null);
+
+  const [locale] = useLocale(locales);
+
   const handleChangeColor = (color: Color, hex: string) => {
     setPrimaryColor(hex);
     setPrimaryColorInstance(color);
   };
+
   const colorValidation = useMemo<React.ReactNode>(() => {
     let text = '';
     if (primaryColorInstance) {
-      const { s, b } = primaryColorInstance.toHsb();
+      const { s, b } = primaryColorInstance.toHsb() || {};
       if (s * 100 < primaryMinSaturation) {
-        text += ` 饱和度建议不低于${primaryMinSaturation}（现在 ${(s * 100).toFixed(2)}）`;
+        text += locale.saturation((s * 100).toFixed(2));
       }
       if (b * 100 < primaryMinBrightness) {
-        text += ` 亮度建议不低于${primaryMinBrightness}（现在 ${(b * 100).toFixed(2)}）`;
+        text += locale.brightness((s * 100).toFixed(2));
       }
     }
     return <span className="color-palette-picker-validation">{text.trim()}</span>;
@@ -32,7 +50,9 @@ const ColorPaletteTool: React.FC = () => {
       <div className="color-palette-pick">
         <FormattedMessage id="app.docs.color.pick-primary" />
       </div>
-      <div className="main-color">{ColorPatterns({ color: primaryColor })}</div>
+      <div className="main-color">
+        <ColorPatterns color={primaryColor} />
+      </div>
       <div className="color-palette-picker">
         <span style={{ display: 'inline-block', verticalAlign: 'middle' }}>
           <ColorPicker value={primaryColor} onChange={handleChangeColor} />
diff --git a/.dumi/theme/common/Color/ColorPaletteToolDark.tsx b/.dumi/theme/common/Color/ColorPaletteToolDark.tsx
index 2c81fa008a5c..59400cfae121 100644
--- a/.dumi/theme/common/Color/ColorPaletteToolDark.tsx
+++ b/.dumi/theme/common/Color/ColorPaletteToolDark.tsx
@@ -2,14 +2,30 @@ import { FormattedMessage } from 'dumi';
 import React, { useMemo, useState } from 'react';
 import { Col, ColorPicker, Row } from 'antd';
 import ColorPatterns from './ColorPatterns';
+import useLocale from '../../../hooks/useLocale';
 
 const primaryMinSaturation = 70; // 主色推荐最小饱和度
 const primaryMinBrightness = 70; // 主色推荐最小亮度
 
+const locales = {
+  cn: {
+    saturation: (s: string) => `饱和度建议不低于${primaryMinSaturation}（现在${s}）`,
+    brightness: (b: string) => `亮度建议不低于${primaryMinBrightness}（现在${b}）`,
+  },
+  en: {
+    saturation: (s: string) =>
+      `Saturation is recommended not to be lower than ${primaryMinSaturation}（currently${s}）`,
+    brightness: (b: string) =>
+      `Brightness is recommended not to be lower than ${primaryMinBrightness}（currently${b}）`,
+  },
+};
+
 const ColorPaletteTool: React.FC = () => {
   const [primaryColor, setPrimaryColor] = useState<string>('#1890ff');
   const [backgroundColor, setBackgroundColor] = useState<string>('#141414');
-  const [primaryColorInstance, setPrimaryColorInstance] = useState(null);
+  const [primaryColorInstance, setPrimaryColorInstance] = useState<Color>(null);
+
+  const [locale] = useLocale(locales);
 
   const handleChangeColor = (color: Color, hex: string) => {
     setPrimaryColor(hex);
@@ -23,12 +39,12 @@ const ColorPaletteTool: React.FC = () => {
   const colorValidation = useMemo<React.ReactNode>(() => {
     let text = '';
     if (primaryColorInstance) {
-      const { s, b } = primaryColorInstance.toHsb();
+      const { s, b } = primaryColorInstance.toHsb() || {};
       if (s * 100 < primaryMinSaturation) {
-        text += ` 饱和度建议不低于${primaryMinSaturation}（现在 ${(s * 100).toFixed(2)}）`;
+        text += locale.saturation((s * 100).toFixed(2));
       }
       if (b * 100 < primaryMinBrightness) {
-        text += ` 亮度建议不低于${primaryMinBrightness}（现在 ${(b * 100).toFixed(2)}）`;
+        text += locale.brightness((s * 100).toFixed(2));
       }
     }
     return (
@@ -41,7 +57,7 @@ const ColorPaletteTool: React.FC = () => {
   return (
     <div className="color-palette-horizontal color-palette-horizontal-dark">
       <div className="main-color">
-        {ColorPatterns({ color: primaryColor, dark: true, backgroundColor })}
+        <ColorPatterns color={primaryColor} backgroundColor={backgroundColor} dark />
       </div>
       <div className="color-palette-picker">
         <Row>
diff --git a/.dumi/theme/common/Color/ColorPatterns.tsx b/.dumi/theme/common/Color/ColorPatterns.tsx
index d40d88a0c997..080b5651cea9 100644
--- a/.dumi/theme/common/Color/ColorPatterns.tsx
+++ b/.dumi/theme/common/Color/ColorPatterns.tsx
@@ -9,11 +9,15 @@ interface ColorPatternsProps {
   backgroundColor?: string;
 }
 
-const ColorPatterns = ({ color, dark, backgroundColor }: ColorPatternsProps) => {
+const ColorPatterns: React.FC<ColorPatternsProps> = ({ color, dark, backgroundColor }) => {
   const colors = generate(color, dark ? { theme: 'dark', backgroundColor } : {});
-  return uniq(colors).map((colorString, i) => (
-    <ColorBlock color={colorString} index={i + 1} dark={dark} key={colorString} />
-  ));
+  return (
+    <>
+      {uniq(colors).map((colorString, i) => (
+        <ColorBlock color={colorString} index={i + 1} dark={dark} key={colorString} />
+      ))}
+    </>
+  );
 };
 
 export default ColorPatterns;
diff --git a/.dumi/theme/common/styles/Common.tsx b/.dumi/theme/common/styles/Common.tsx
index a805422a238c..395f21aba9a9 100644
--- a/.dumi/theme/common/styles/Common.tsx
+++ b/.dumi/theme/common/styles/Common.tsx
@@ -1,9 +1,13 @@
 import { css, Global } from '@emotion/react';
 import React from 'react';
+import { useTheme } from 'antd-style';
 
-export default () => (
-  <Global
-    styles={css`
+export default () => {
+  const { headerHeight, margin } = useTheme();
+
+  return (
+    <Global
+      styles={css`
       body,
       div,
       dl,
@@ -55,6 +59,15 @@ export default () => (
         vertical-align: middle;
         border-style: none;
       }
+
+      html {
+        scroll-padding-top: ${headerHeight + margin}px;
+      }
+
+      [data-prefers-color='dark'] {
+        color-scheme: dark;
+      }
     `}
-  />
-);
+    />
+  );
+};
diff --git a/.dumi/theme/common/styles/Demo.tsx b/.dumi/theme/common/styles/Demo.tsx
index c7b9b6fc5c75..9b0d8c1faa96 100644
--- a/.dumi/theme/common/styles/Demo.tsx
+++ b/.dumi/theme/common/styles/Demo.tsx
@@ -1,5 +1,5 @@
-import { css, Global } from '@emotion/react';
 import React from 'react';
+import { css, Global } from '@emotion/react';
 import { useTheme } from 'antd-style';
 
 const GlobalDemoStyles: React.FC = () => {
diff --git a/.dumi/theme/layouts/DocLayout/index.tsx b/.dumi/theme/layouts/DocLayout/index.tsx
index f5af2a0a7876..4e910e6edc9b 100644
--- a/.dumi/theme/layouts/DocLayout/index.tsx
+++ b/.dumi/theme/layouts/DocLayout/index.tsx
@@ -32,7 +32,7 @@ const DocLayout: React.FC = () => {
   const location = useLocation();
   const { pathname, search, hash } = location;
   const [locale, lang] = useLocale(locales);
-  const timerRef = useRef<NodeJS.Timeout | null>(null);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const { direction } = useContext(SiteContext);
   const { loading } = useSiteData();
 
diff --git a/.dumi/theme/layouts/GlobalLayout.tsx b/.dumi/theme/layouts/GlobalLayout.tsx
index 828c69771680..61f73be23261 100644
--- a/.dumi/theme/layouts/GlobalLayout.tsx
+++ b/.dumi/theme/layouts/GlobalLayout.tsx
@@ -1,22 +1,30 @@
+import React, { useCallback, useEffect, useMemo } from 'react';
 import {
   createCache,
+  extractStyle,
   legacyNotSelectorLinter,
   logicalPropertiesLinter,
   parentSelectorLinter,
   StyleProvider,
-  extractStyle,
 } from '@ant-design/cssinjs';
 import { HappyProvider } from '@ant-design/happy-work-theme';
-import React, { useCallback, useEffect, useMemo } from 'react';
-import { createSearchParams, useOutlet, useSearchParams, useServerInsertedHTML } from 'dumi';
 import { getSandpackCssText } from '@codesandbox/sandpack-react';
-import { App, theme as antdTheme } from 'antd';
+import { theme as antdTheme, App } from 'antd';
 import type { DirectionType } from 'antd/es/config-provider';
+import {
+  createSearchParams,
+  useOutlet,
+  useSearchParams,
+  useServerInsertedHTML,
+  usePrefersColor,
+} from 'dumi';
+
+import { DarkContext } from '../../hooks/useDark';
 import useLayoutState from '../../hooks/useLayoutState';
-import SiteThemeProvider from '../SiteThemeProvider';
 import useLocation from '../../hooks/useLocation';
 import type { ThemeName } from '../common/ThemeSwitch';
 import ThemeSwitch from '../common/ThemeSwitch';
+import SiteThemeProvider from '../SiteThemeProvider';
 import type { SiteContextProps } from '../slots/SiteContext';
 import SiteContext from '../slots/SiteContext';
 
@@ -45,6 +53,7 @@ const GlobalLayout: React.FC = () => {
   const outlet = useOutlet();
   const { pathname } = useLocation();
   const [searchParams, setSearchParams] = useSearchParams();
+  const [, , setPrefersColor] = usePrefersColor();
   const [{ theme = [], direction, isMobile }, setSiteState] = useLayoutState<SiteState>({
     isMobile: false,
     direction: 'ltr',
@@ -68,10 +77,12 @@ const GlobalLayout: React.FC = () => {
           }
         }
         if (key === 'theme') {
+          const _theme = value.filter((t) => t !== 'light');
           nextSearchParams = createSearchParams({
             ...nextSearchParams,
-            theme: value.filter((t) => t !== 'light'),
+            theme: _theme,
           });
+          setPrefersColor(_theme.includes('dark') ? 'dark' : 'light');
         }
       });
 
@@ -93,6 +104,8 @@ const GlobalLayout: React.FC = () => {
     setSiteState({ theme: _theme, direction: _direction === 'rtl' ? 'rtl' : 'ltr' });
     // Handle isMobile
     updateMobileMode();
+    // https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
+    setPrefersColor(_theme.includes('dark') ? 'dark' : 'light');
 
     window.addEventListener('resize', updateMobileMode);
     return () => {
@@ -144,23 +157,25 @@ const GlobalLayout: React.FC = () => {
   }
 
   return (
-    <StyleProvider
-      cache={styleCache}
-      linters={[logicalPropertiesLinter, legacyNotSelectorLinter, parentSelectorLinter]}
-    >
-      <SiteContext.Provider value={siteContextValue}>
-        <SiteThemeProvider
-          theme={{
-            algorithm: getAlgorithm(theme),
-            token: {
-              motion: !theme.includes('motion-off'),
-            },
-          }}
-        >
-          <HappyProvider disabled={!theme.includes('happy-work')}>{content}</HappyProvider>
-        </SiteThemeProvider>
-      </SiteContext.Provider>
-    </StyleProvider>
+    <DarkContext.Provider value={theme.includes('dark')}>
+      <StyleProvider
+        cache={styleCache}
+        linters={[logicalPropertiesLinter, legacyNotSelectorLinter, parentSelectorLinter]}
+      >
+        <SiteContext.Provider value={siteContextValue}>
+          <SiteThemeProvider
+            theme={{
+              algorithm: getAlgorithm(theme),
+              token: {
+                motion: !theme.includes('motion-off'),
+              },
+            }}
+          >
+            <HappyProvider disabled={!theme.includes('happy-work')}>{content}</HappyProvider>
+          </SiteThemeProvider>
+        </SiteContext.Provider>
+      </StyleProvider>
+    </DarkContext.Provider>
   );
 };
 
diff --git a/.dumi/theme/locales/en-US.json b/.dumi/theme/locales/en-US.json
index 7a9f792abbd9..6ca8a49d35ef 100644
--- a/.dumi/theme/locales/en-US.json
+++ b/.dumi/theme/locales/en-US.json
@@ -31,6 +31,7 @@
   "app.demo.copied": "Copied!",
   "app.demo.code.show": "Show code",
   "app.demo.code.hide": "Hide code",
+  "app.demo.code.hide.simplify": "Hide",
   "app.demo.codepen": "Open in CodePen",
   "app.demo.codesandbox": "Open in CodeSandbox",
   "app.demo.stackblitz": "Open in Stackblitz",
diff --git a/.dumi/theme/locales/zh-CN.json b/.dumi/theme/locales/zh-CN.json
index 3618d9dabbd6..2a37d63e3ea7 100644
--- a/.dumi/theme/locales/zh-CN.json
+++ b/.dumi/theme/locales/zh-CN.json
@@ -31,6 +31,7 @@
   "app.demo.copied": "复制成功",
   "app.demo.code.show": "显示代码",
   "app.demo.code.hide": "收起代码",
+  "app.demo.code.hide.simplify": "收起",
   "app.demo.codepen": "在 CodePen 中打开",
   "app.demo.codesandbox": "在 CodeSandbox 中打开",
   "app.demo.stackblitz": "在 Stackblitz 中打开",
diff --git a/.dumi/theme/slots/Footer/index.tsx b/.dumi/theme/slots/Footer/index.tsx
index f65a6a3e23b2..6b34e18ed5aa 100644
--- a/.dumi/theme/slots/Footer/index.tsx
+++ b/.dumi/theme/slots/Footer/index.tsx
@@ -102,7 +102,7 @@ const Footer: React.FC = () => {
       items: [
         {
           title: 'Ant Design Charts',
-          url: 'https://charts.ant.design',
+          url: isZhCN ? 'https://ant-design-charts.antgroup.com' : 'https://charts.ant.design',
           openExternal: true,
         },
         {
@@ -117,12 +117,12 @@ const Footer: React.FC = () => {
         },
         {
           title: 'Ant Design Mobile',
-          url: 'https://mobile.ant.design',
+          url: isZhCN ? 'https://ant-design-mobile.antgroup.com/zh' : 'https://mobile.ant.design',
           openExternal: true,
         },
         {
           title: 'Ant Design Mini',
-          url: 'https://mini.ant.design',
+          url: isZhCN ? 'https://ant-design-mini.antgroup.com/' : 'https://mini.ant.design',
           openExternal: true,
         },
         {
@@ -338,7 +338,7 @@ const Footer: React.FC = () => {
             />
           ),
           title: 'AntV',
-          url: 'https://antv.vision',
+          url: 'https://antv.antgroup.com',
           description: <FormattedMessage id="app.footer.antv.slogan" />,
           openExternal: true,
         },
diff --git a/.dumi/theme/slots/Header/Navigation.tsx b/.dumi/theme/slots/Header/Navigation.tsx
index 6bdb4b5012dc..597dc1fd3101 100644
--- a/.dumi/theme/slots/Header/Navigation.tsx
+++ b/.dumi/theme/slots/Header/Navigation.tsx
@@ -30,7 +30,8 @@ const locales = {
 
 // ============================= Style =============================
 const useStyle = createStyles(({ token }) => {
-  const { antCls, iconCls, fontFamily, headerHeight, menuItemBorder, colorPrimary } = token;
+  const { antCls, iconCls, fontFamily, headerHeight, menuItemBorder, colorPrimary, colorText } =
+    token;
 
   return {
     nav: css`
@@ -56,6 +57,17 @@ const useStyle = createStyles(({ token }) => {
             left: 12px;
             border-width: ${menuItemBorder}px;
           }
+
+          a {
+            color: ${colorText};
+          }
+
+          a:before {
+            position: absolute;
+            inset: 0;
+            background-color: transparent;
+            content: "";
+          }
         }
 
         & ${antCls}-menu-submenu-title ${iconCls} {
@@ -97,7 +109,6 @@ const useStyle = createStyles(({ token }) => {
 
 export interface NavigationProps extends SharedProps {
   isMobile: boolean;
-  isClient: boolean;
   responsive: null | 'narrow' | 'crowded';
   directionText: string;
   onLangChange: () => void;
@@ -106,7 +117,6 @@ export interface NavigationProps extends SharedProps {
 
 export default ({
   isZhCN,
-  isClient,
   isMobile,
   responsive,
   directionText,
@@ -224,16 +234,21 @@ export default ({
       ),
       key: 'docs/resources',
     },
-    isZhCN &&
-    isClient &&
-    window.location.host !== 'ant-design.antgroup.com' &&
-    window.location.host !== 'ant-design.gitee.io'
+    isZhCN
       ? {
-          label: '国内镜像',
+          label: (
+            <a href="https://ant-design.antgroup.com" target="_blank" rel="noreferrer">
+              国内镜像
+            </a>
+          ),
           key: 'mirror',
           children: [
             {
-              label: <a href="https://ant-design.antgroup.com">官方镜像</a>,
+              label: (
+                <a href="https://ant-design.antgroup.com" target="_blank" rel="noreferrer">
+                  官方镜像
+                </a>
+              ),
               icon: (
                 <img
                   alt="logo"
@@ -245,7 +260,11 @@ export default ({
               key: 'antgroup',
             },
             {
-              label: <a href="https://ant-design.gitee.io">Gitee 镜像</a>,
+              label: (
+                <a href="https://ant-design.gitee.io" target="_blank" rel="noreferrer">
+                  Gitee 镜像
+                </a>
+              ),
               icon: (
                 <img
                   alt="gitee"
diff --git a/.dumi/theme/slots/Header/index.tsx b/.dumi/theme/slots/Header/index.tsx
index ae41778b685d..4e68fe78ae60 100644
--- a/.dumi/theme/slots/Header/index.tsx
+++ b/.dumi/theme/slots/Header/index.tsx
@@ -4,11 +4,11 @@ import classNames from 'classnames';
 import { useLocation, useSiteData } from 'dumi';
 import DumiSearchBar from 'dumi/theme-default/slots/SearchBar';
 import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import { Col, Modal, Popover, Row, Select } from 'antd';
+import { Col, Popover, Row, Select } from 'antd';
 import useLocale from '../../../hooks/useLocale';
 import DirectionIcon from '../../common/DirectionIcon';
 import * as utils from '../../utils';
-import { getThemeConfig, ping } from '../../utils';
+import { getThemeConfig } from '../../utils';
 import type { SiteContextProps } from '../SiteContext';
 import SiteContext from '../SiteContext';
 import Logo from './Logo';
@@ -109,16 +109,6 @@ const useStyle = createStyles(({ token, css }) => {
   };
 });
 
-const SHOULD_OPEN_ANT_DESIGN_MIRROR_MODAL = 'ANT_DESIGN_DO_NOT_OPEN_MIRROR_MODAL';
-
-function disableAntdMirrorModal() {
-  window.localStorage.setItem(SHOULD_OPEN_ANT_DESIGN_MIRROR_MODAL, 'true');
-}
-
-function shouldOpenAntdMirrorModal() {
-  return !window.localStorage.getItem(SHOULD_OPEN_ANT_DESIGN_MIRROR_MODAL);
-}
-
 interface HeaderState {
   menuVisible: boolean;
   windowWidth: number;
@@ -127,7 +117,6 @@ interface HeaderState {
 
 // ================================= Header =================================
 const Header: React.FC = () => {
-  const [isClient, setIsClient] = React.useState(false);
   const [, lang] = useLocale();
 
   const { pkg } = useSiteData();
@@ -139,7 +128,7 @@ const Header: React.FC = () => {
     searching: false,
   });
   const { direction, isMobile, updateSiteConfig } = useContext<SiteContextProps>(SiteContext);
-  const pingTimer = useRef<NodeJS.Timeout | null>(null);
+  const pingTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
   const location = useLocation();
   const { pathname, search } = location;
 
@@ -166,34 +155,8 @@ const Header: React.FC = () => {
   }, [location]);
 
   useEffect(() => {
-    setIsClient(typeof window !== 'undefined');
     onWindowResize();
     window.addEventListener('resize', onWindowResize);
-    pingTimer.current = ping((status) => {
-      if (status !== 'timeout' && status !== 'error') {
-        if (
-          // process.env.NODE_ENV === 'production' &&
-          window.location.host !== 'ant-design.antgroup.com' &&
-          shouldOpenAntdMirrorModal()
-        ) {
-          Modal.confirm({
-            title: '提示',
-            content: '内网用户推荐访问国内镜像以获得极速体验～',
-            okText: '🚀 立刻前往',
-            cancelText: '不再弹出',
-            closable: true,
-            zIndex: 99999,
-            onOk() {
-              window.open('https://ant-design.antgroup.com', '_self');
-              disableAntdMirrorModal();
-            },
-            onCancel() {
-              disableAntdMirrorModal();
-            },
-          });
-        }
-      }
-    });
     return () => {
       window.removeEventListener('resize', onWindowResize);
       if (pingTimer.current) {
@@ -273,7 +236,6 @@ const Header: React.FC = () => {
   const sharedProps: SharedProps = {
     isZhCN,
     isRTL,
-    isClient,
   };
 
   const navigationNode = (
diff --git a/.dumi/theme/slots/Header/interface.ts b/.dumi/theme/slots/Header/interface.ts
index 4c8824787310..8a0755c1bf0e 100644
--- a/.dumi/theme/slots/Header/interface.ts
+++ b/.dumi/theme/slots/Header/interface.ts
@@ -1,5 +1,4 @@
 export interface SharedProps {
   isZhCN: boolean;
   isRTL: boolean;
-  isClient: boolean;
 }
diff --git a/.dumirc.ts b/.dumirc.ts
index f9aed1f0e5ec..b6aa833febbd 100644
--- a/.dumirc.ts
+++ b/.dumirc.ts
@@ -3,6 +3,7 @@ import path from 'path';
 import rehypeAntd from './.dumi/rehypeAntd';
 import remarkAntd from './.dumi/remarkAntd';
 import { version } from './package.json';
+import * as fs from 'fs-extra';
 
 export default defineConfig({
   conventionRoutes: {
@@ -44,42 +45,42 @@ export default defineConfig({
   },
   links: [
     {
-      rel: 'preload',
+      rel: 'prefetch',
       as: 'font',
       href: '//at.alicdn.com/t/webfont_6e11e43nfj.woff2',
       type: 'font/woff2',
       crossorigin: true,
     },
     {
-      rel: 'preload',
+      rel: 'prefetch',
       as: 'font',
       href: '//at.alicdn.com/t/webfont_6e11e43nfj.woff',
       type: 'font/woff',
       crossorigin: true,
     },
     {
-      rel: 'preload',
+      rel: 'prefetch',
       as: 'font',
       href: '//at.alicdn.com/t/webfont_6e11e43nfj.ttf',
       type: 'font/ttf',
       crossorigin: true,
     },
     {
-      rel: 'preload',
+      rel: 'prefetch',
       as: 'font',
       href: '//at.alicdn.com/t/webfont_exesdog9toj.woff2',
       type: 'font/woff2',
       crossorigin: true,
     },
     {
-      rel: 'preload',
+      rel: 'prefetch',
       as: 'font',
       href: '//at.alicdn.com/t/webfont_exesdog9toj.woff',
       type: 'font/woff',
       crossorigin: true,
     },
     {
-      rel: 'preload',
+      rel: 'prefetch',
       as: 'font',
       href: '//at.alicdn.com/t/webfont_exesdog9toj.ttf',
       type: 'font/ttf',
@@ -158,4 +159,10 @@ export default defineConfig({
     })();
     `,
   ],
+  scripts: [
+    {
+      async: true,
+      content: fs.readFileSync(path.join(__dirname, '.dumi', 'mirror-modal.js')).toString(),
+    },
+  ],
 });
diff --git a/.eslintrc.js b/.eslintrc.js
index a341d58bb440..12e49328d21e 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -126,6 +126,12 @@ module.exports = {
         'comma-dangle': 0,
       },
     },
+    {
+      files: ['**/*.test.ts', '**/*.test.tsx', '**/*.spec.ts', '**/*.spec.tsx'],
+      rules: {
+        'compat/compat': 0,
+      },
+    },
   ],
   rules: {
     'react/jsx-one-expression-per-line': 0,
@@ -205,6 +211,7 @@ module.exports = {
     '@typescript-eslint/no-shadow': [2, { ignoreTypeValueShadow: true }],
     // https://github.com/typescript-eslint/typescript-eslint/issues/2528#issuecomment-689369395
     'no-undef': 0,
+    'import/order': 0,
   },
   globals: {
     gtag: true,
diff --git a/.github/workflows/pr-contributor-welcome.yml b/.github/workflows/pr-contributor-welcome.yml
new file mode 100644
index 000000000000..b8610144b645
--- /dev/null
+++ b/.github/workflows/pr-contributor-welcome.yml
@@ -0,0 +1,54 @@
+# 当 PR 被合并时，留言欢迎加入共建群
+name: PullRequest Contributor Welcome
+
+on:
+  pull_request_target:
+    types:
+      - closed
+    paths:
+      - 'components/**'
+
+jobs:
+  read-file:
+    runs-on: ubuntu-latest
+    outputs:
+      require-result: ${{ steps.contributors.outputs.content }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Read contributors.json
+        id: contributors
+        uses: juliangruber/read-file-action@v1
+        with:
+          path: ./contributors.json
+
+  output-log:
+    runs-on: ubuntu-latest
+    needs: read-file
+    steps:
+      - name: contributors.json
+        run: echo "${{ needs.read-file.outputs.require-result }}"
+      - name: creator
+        run: echo "${{ github.event.pull_request.user.login }}"
+      - name: contains
+        run: echo "${{ contains(fromJSON(needs.read-file.outputs.require-result), github.event.pull_request.user.login) }}"
+      - name: merged
+        run: echo "${{ github.event.pull_request.merged }}"
+
+  check-merged:
+    runs-on: ubuntu-latest
+    needs: read-file
+    if: github.event.pull_request.merged == true
+    steps:
+      - uses: actions-cool/maintain-one-comment@v3
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          body: |
+            🎉 Thanks for contribution. Please feel free to join DingTalk Social Community (Provide the PR link please).
+
+            🎉 感谢参与贡献，欢迎扫码加入钉钉社区（进群后请提供 PR 地址）。
+
+            <img src="https://github.com/ant-design/ant-design/assets/5378891/e24c6080-bf38-4523-b1cd-f6c43ad7375f" height="200" />
+
+            <!-- WELCOME_CONTRIBUTION -->
+          body-include: '<!-- WELCOME_CONTRIBUTION -->'
diff --git a/.prettierrc b/.prettierrc
index 9d5b9bf640c1..73e7db810cd9 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -4,6 +4,8 @@
   "trailingComma": "all",
   "printWidth": 100,
   "proseWrap": "never",
+  "importOrder": ["^(react|react-dom)$", "^([a-z]|@[a-z])", "", ".*"],
+  "plugins": ["@ianvs/prettier-plugin-sort-imports"],
   "overrides": [
     {
       "files": ".prettierrc",
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index dc13f5c553a7..8720832f787a 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -16,6 +16,64 @@ tag: vVERSION
 
 ---
 
+## 5.8.6
+
+`2023-09-02`
+
+- 🛠 Optimize some styles size in document.head by extracting unused styles.
+  - 🛠 Notification and Message only generate styles when displayed. [#44488](https://github.com/ant-design/ant-design/pull/44488)
+  - 🛠 Extract Tag status & preset color style which will only generate by needed. [#44512](https://github.com/ant-design/ant-design/pull/44512)
+  - 🛠 Extract Button compact style, now only the corresponding style will be generated when Space.Compact is used. [#44475](https://github.com/ant-design/ant-design/pull/44475)
+- 📦 Remove `lodash/camelCase` from `@ant-design/icons` dependencies to reduce bundle size. [ant-design-icons#595](https://github.com/ant-design/ant-design-icons/pull/595)
+- Form
+  - 🐞 Fix Form.Item children not hidden when `wrapperCol.span` is `0`. [#44485](https://github.com/ant-design/ant-design/pull/44485) [#44472](https://github.com/ant-design/ant-design/pull/44472) [@crazyair](https://github.com/crazyair)
+  - 🐞 Fix Form `wrapperCol` to be 24 not working when `labelCol` is set to 24. [#44541](https://github.com/ant-design/ant-design/pull/44541)
+- 🐞 Fix Watermark that would crash if `content` is empty string. [#44501](https://github.com/ant-design/ant-design/pull/44501)
+- 🐞 Fix ColorPicker popup still working when `disabled` is `true`. [#44466](https://github.com/ant-design/ant-design/pull/44466) [@RedJue](https://github.com/RedJue)
+- 🐞 Fix Transfer trigger `onSelectChange` twice sometimes when click checkbox. [#44471](https://github.com/ant-design/ant-design/pull/44471) [@kovsu](https://github.com/kovsu)
+- 🐞 Fix Typography scrollbar flush problem when enable `ellipsis`. [#43058](https://github.com/ant-design/ant-design/pull/43058) [@bbb169](https://github.com/bbb169)
+- Slider
+  - 🐞 Fix Slider draggable track unpredictable behavior. [#44503](https://github.com/ant-design/ant-design/pull/44503) [@BoyYangzai](https://github.com/BoyYangzai) [@yoyo837](https://github.com/yoyo837)
+  - ⌨️ Improve Slider a11y behavior by adding `aria-orientation`. [react-component/slider#859](https://github.com/react-component/slider/pull/859) [@5im0n](https://github.com/5im0n)
+- 🐞 Fix Steps `type="nav"` last item did not hide arrow properly. [#44582](https://github.com/ant-design/ant-design/pull/44582) [@ohhoney1](https://github.com/ohhoney1)
+- TypeScript
+  - 🤖 Fix Upload file `status` definition to remove unused success status. [#44468](https://github.com/ant-design/ant-design/pull/44468)
+
+## 5.8.5
+
+`2023-08-28`
+
+- 🛠 Refactor Badge style logic and take Ribbon style out to reduce SSR inline style size. [#44451](https://github.com/ant-design/ant-design/pull/44451)
+- 🐞 Fix the issue of abnormal icon styling when using `@ant-design/icons` within App. [#41208](https://github.com/ant-design/ant-design/pull/41208) [@Wxh16144](https://github.com/Wxh16144)
+- 🐞 Fix the issue of vertical dragging malfunction in Carousel. [#44460](https://github.com/ant-design/ant-design/pull/44460) [@RedJue](https://github.com/RedJue)
+- 🐞 Fix Tour panel use wrong design token. [#44428](https://github.com/ant-design/ant-design/pull/44428)
+- 🐞 Fix Form `wrapperCol` with responsive `xs` config not working. [#44388](https://github.com/ant-design/ant-design/pull/44388)
+- 🐞 Fix ColorPicker duplicate `key` issue. [#44370](https://github.com/ant-design/ant-design/pull/44370) [@xr0master](https://github.com/xr0master)
+- 🐞 Fix Radio that not work in Tree title. [#44380](https://github.com/ant-design/ant-design/pull/44380) [@MadCcc](https://github.com/MadCcc)
+- 🐞 Fix Table that would crash when `filterDropdown` does not support `ref`. [#44357](https://github.com/ant-design/ant-design/pull/44357) [@MadCcc](https://github.com/MadCcc)
+- 🐞 Fix Form `inline` layout show extra bottom margin when validation failed. [#44360](https://github.com/ant-design/ant-design/pull/44360)
+- 🐞 Fix DatePicker `showTime` working error when `format` is Array. [#44306](https://github.com/ant-design/ant-design/pull/44306) [@Zian502](https://github.com/Zian502)
+- 🐞 Fix Watermark can not be fully shown when `content` is too long. [#44321](https://github.com/ant-design/ant-design/pull/44321)
+- TypeScript
+  - 🤖 Fix the type error with align property in Dropdown component. [#44423](https://github.com/ant-design/ant-design/pull/44423) [@LeTuongKhanh](https://github.com/LeTuongKhanh)
+
+## 5.8.4
+
+`2023-08-18`
+
+- ColorPicker
+  - 🐞 Fix the cursor jumps when entering lowercase English letters in the ColorPicker color value input box. [#44137](https://github.com/ant-design/ant-design/pull/44137) [@gouge666](https://github.com/gouge666)
+  - 🐞 Fix the ColorPicker style is deformed under different sizes. [#44273](https://github.com/ant-design/ant-design/pull/44273) [@kouchao](https://github.com/kouchao)
+- 🐞 Fix Descriptions throwing `key is not a prop` error message. [#44278](https://github.com/ant-design/ant-design/pull/44278) [@RedJue](https://github.com/RedJue)
+- 🐞 Fix the node is still rendered when Pagination `itemRender` is customized to `null`. [#44226](https://github.com/ant-design/ant-design/pull/44226)
+- 🐞 Fix Modal in Dropdown `menu.items`, rapid mouse movement when expanding Modal will make Dropdown reopen. [#44204](https://github.com/ant-design/ant-design/pull/44204)
+- DatePicker
+  - 💄 Fix DatePicker content is not centered. [#44245](https://github.com/ant-design/ant-design/pull/44245) [@Zian502](https://github.com/Zian502)
+  - 💄 Optimize DatePicker selection range style. [#44206](https://github.com/ant-design/ant-design/pull/44206) [@kiner-tang](https://github.com/kiner-tang)
+- 💄 Fix clicking on the Tabs area on the mobile terminal triggers a color change. [#44200](https://github.com/ant-design/ant-design/pull/44200) [@yilaikesi](https://github.com/yilaikesi)
+- RTL
+  - 💄 Fix the numbers in the Badge are also RTL when the text direction of the page is RTL. [#43998](https://github.com/ant-design/ant-design/pull/43998) [@NotEvenANeko](https://github.com/NotEvenANeko)
+
 ## 5.8.3
 
 `2023-08-11`
@@ -69,7 +127,7 @@ tag: vVERSION
 - 🆕 Descriptions support `items` prop. [#43483](https://github.com/ant-design/ant-design/pull/43483) [@RedJue](https://github.com/RedJue)
 - 🆕 ColorPicker support `disabledAlpha` prop. [#43355](https://github.com/ant-design/ant-design/pull/43355) [@RedJue](https://github.com/RedJue)
 - 🆕 Avatar.Group support `shape` prop. [#43817](https://github.com/ant-design/ant-design/pull/43817) [@li-jia-nan](https://github.com/li-jia-nan)
-- 🆕 AutoComplete/Cascader/DatePicker/Input.Textarea/TimePicker/TreeSelect support `allowClear` prop to customize clear button。[#43582](https://github.com/ant-design/ant-design/discussions/43582) [@kiner-tang](https://github.com/kiner-tang)
+- 🆕 AutoComplete/Cascader/DatePicker/Input.Textarea/TimePicker/TreeSelect support `allowClear` prop to customize clear button. [#43582](https://github.com/ant-design/ant-design/discussions/43582) [@kiner-tang](https://github.com/kiner-tang)
 - 🆕 DatePicker.RangePicker `presets` support callback functions. [#43476](https://github.com/ant-design/ant-design/pull/43476) [@Wxh16144](https://github.com/Wxh16144)
 - 🆕 Added the `preview={{ movable: Boolean }}` prop to the Image component to support dragging and dropping into folders. [#43823](https://github.com/ant-design/ant-design/pull/43823) [@linxianxi](https://github.com/linxianxi)
 - 🆕 Slider `tooltip` support `autoAdjustOverflow` prop. [#43788](https://github.com/ant-design/ant-design/pull/43788)
@@ -161,7 +219,7 @@ tag: vVERSION
 - 🐞 MISC: Fixed an issue where some browsers had scroll bars that were not redrawn when style feature support was detected. [#43358](https://github.com/ant-design/ant-design/pull/43358) [@LeeeeeeM](https://github.com/LeeeeeeM)
 - 🐞 Fixed an issue where the Tab component of Card would not be displayed at all when tabList is empty. [#43416](https://github.com/ant-design/ant-design/pull/43416) [@linxianxi](https://github.com/linxianxi)
 - 🐞 Fixed an issue where the `form.validateMessages` configuration would be lost when using ConfigProvider nestedly. [#43239](https://github.com/ant-design/ant-design/pull/43239) [@Wxh16144](https://github.com/Wxh16144)
-- 🐞 Fixed an issue where the ripple effect of Tag click would sometimes be offset from the Tag element .[#43402](https://github.com/ant-design/ant-design/pull/43402)
+- 🐞 Fixed an issue where the ripple effect of Tag click would sometimes be offset from the Tag element. [#43402](https://github.com/ant-design/ant-design/pull/43402)
 - 🐞 Fixed an issue where clicking "now" in DatePicker when switching to the year-month panel would not work. [#43367](https://github.com/ant-design/ant-design/pull/43367) [@Yuiai01](https://github.com/Yuiai01)
 - 🐞 Fixed an issue where the height set for the Input.TextArea component would become invalid when the screen size changed. [#43169](https://github.com/ant-design/ant-design/pull/43169) [@MadCcc](https://github.com/MadCcc)
 - 💄 In Slider, the `tooltip` should be centered when there is little content. [#43430](https://github.com/ant-design/ant-design/pull/43430) [@Jomorx](https://github.com/Jomorx)
@@ -621,7 +679,7 @@ tag: vVERSION
 `2023-02-27`
 
 - 🐞 Fix for setting `percent` and `success.percent` at the same time for `Progress`, the progress text does not change as `percent` changes. [#40922](https://github.com/ant-design/ant-design/pull/40922)
-- 🐞 Fixed Image preview icon was misaligned.[#40911](https://github.com/ant-design/ant-design/pull/40911)
+- 🐞 Fixed Image preview icon was misaligned. [#40911](https://github.com/ant-design/ant-design/pull/40911)
 - 🐞 Fix ConfigProvider validation message template override Form configure template sometime. [#40533](https://github.com/ant-design/ant-design/pull/40533) [@Wxh16144](https://github.com/Wxh16144)
 - 🐞 Fixed Confirm Modal `onOk` event could be triggered twice when close. [#40719](https://github.com/ant-design/ant-design/pull/40719) [@Rafael-Martins](https://github.com/Rafael-Martins)
 - 🛠 Rewrote the `useLocale` method and exposed `localeCode` to the public. [#40884](https://github.com/ant-design/ant-design/pull/40884) [@li-jia-nan](https://github.com/li-jia-nan)
@@ -631,10 +689,10 @@ tag: vVERSION
 - 🐞 Fixed where Descriptions did not accept `data-_` and `aria-_` attributes. [#40859](https://github.com/ant-design/ant-design/pull/40859) [@goveo](https://github.com/goveo)
 - 🛠 Changed the Breadcrumb Separator's DOM element from `span` to `li`. [#40867](https://github.com/ant-design/ant-design/pull/40867) [@heiyu4585](https://github.com/heiyu4585)
 - 🐞 Fix token of `Layout.colorBgHeader` not work when single use Layout.Header directly. [#40933](https://github.com/ant-design/ant-design/pull/40933)
-- 💄 Changed Design Token the component's focus `outline` to the default `4px`.[#40839](https://github.com/ant-design/ant-design/pull/40839)
+- 💄 Changed Design Token the component's focus `outline` to the default `4px`. [#40839](https://github.com/ant-design/ant-design/pull/40839)
 - 🐞 Fixed the Badge color was displayed abnormally. [#40848](https://github.com/ant-design/ant-design/pull/40848) [@kiner-tang](https://github.com/kiner-tang)
 - 🐞 Fixed an issue with the Timeline item's `className`. [#40835](https://github.com/ant-design/ant-design/pull/40835) [@Yuiai01](https://github.com/Yuiai01)
-- 💄 Fixed the interaction style of the Rate component in the disabled state.[#40836](https://github.com/ant-design/ant-design/pull/40836) [@Yuiai01](https://github.com/Yuiai01)
+- 💄 Fixed the interaction style of the Rate component in the disabled state. [#40836](https://github.com/ant-design/ant-design/pull/40836) [@Yuiai01](https://github.com/Yuiai01)
 - 🇮🇷 Added Iranian localization. [#40895](https://github.com/ant-design/ant-design/pull/40895) [@majidsadr](https://github.com/majidsadr)
 
 ## 5.2.2
@@ -843,8 +901,8 @@ tag: vVERSION
 
 `2022-12-26`
 
-- 📦 Remove IE and other legacy browsers from browserslist to reduce bundle size.[#38779](https://github.com/ant-design/ant-design/pull/38779)
-- ⚡️ Improve Transfer performance when selecting and moving nodes with large data.[#39465](https://github.com/ant-design/ant-design/pull/39465) [@wqs576222103](https://github.com/wqs576222103)
+- 📦 Remove IE and other legacy browsers from browserslist to reduce bundle size. [#38779](https://github.com/ant-design/ant-design/pull/38779)
+- ⚡️ Improve Transfer performance when selecting and moving nodes with large data. [#39465](https://github.com/ant-design/ant-design/pull/39465) [@wqs576222103](https://github.com/wqs576222103)
 - 🐞 Fix Design Token wrong `font-family` of components. [#39806](https://github.com/ant-design/ant-design/pull/39806)
 - 🐞 Fix Drawer default props not working when `placement` `open` `width` are `undefined`. [#39782](https://github.com/ant-design/ant-design/pull/39782)
 - 🐞 Fix Menu icon animation when collapse it. [#39800](https://github.com/ant-design/ant-design/pull/39800) [@JarvisArt](https://github.com/JarvisArt)
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index 6ba8ef008e4d..3faac82200c9 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -16,6 +16,64 @@ tag: vVERSION
 
 ---
 
+## 5.8.6
+
+`2023-09-02`
+
+- 🛠 针对 CSSInJS 加载 styles 大小进行了优化。
+  - 🛠 Notification 和 Message 组件只有在展示时才会插入对应样式。[#44488](https://github.com/ant-design/ant-design/pull/44488)
+  - 🛠 剥离 Tag 状态与预设颜色样式，现在只有当使用的使用才会生成它们。[#44512](https://github.com/ant-design/ant-design/pull/44512)
+  - 🛠 剥离 Button 紧凑模式样式，现在只有当使用了 Space.Compact 才会生成对应样式。[#44475](https://github.com/ant-design/ant-design/pull/44475)
+- 📦 移除 `@ant-design/icons` 依赖 `lodash/camelCase` 以优化 bundle size。[ant-design-icons#595](https://github.com/ant-design/ant-design-icons/pull/595)
+- Form
+  - 🐞 修复 Form.Item 设置 `wrapperCol.span` 为 `0` 时，子元素不隐藏的问题。[#44485](https://github.com/ant-design/ant-design/pull/44485) [#44472](https://github.com/ant-design/ant-design/pull/44472) [@crazyair](https://github.com/crazyair)
+  - 🐞 修复 Form `labelCol` 设置为 24 时，会使 `wrapperCol` 设置 24 失效的问题。[#44541](https://github.com/ant-design/ant-design/pull/44541)
+- 🐞 修复 Watermark 组件在 `content` 是空字符串时报错的问题。[#44501](https://github.com/ant-design/ant-design/pull/44501)
+- 🐞 修复 ColorPicker 禁用时依然能弹出选择窗口的问题。[#44466](https://github.com/ant-design/ant-design/pull/44466) [@RedJue](https://github.com/RedJue)
+- 🐞 修复 Transfer 点击 Checkbox 时有时会触发两次选择行为的问题。[#44471](https://github.com/ant-design/ant-design/pull/44471) [@kovsu](https://github.com/kovsu)
+- 🐞 修复 Typography 使用 `ellipsis` 时滚动条闪动的问题。[#43058](https://github.com/ant-design/ant-design/pull/43058) [@bbb169](https://github.com/bbb169)
+- Slider
+  - 🐞 修复 Slider 滑块可拖拽区域范围异常的问题。[#44503](https://github.com/ant-design/ant-design/pull/44503) [@BoyYangzai](https://github.com/BoyYangzai) [@yoyo837](https://github.com/yoyo837)
+  - ⌨️ 优化 Slider `aria-orientation` 可访问性属性。[react-component/slider#859](https://github.com/react-component/slider/pull/859) [@5im0n](https://github.com/5im0n)
+- 🐞 修复 Steps `type="nav"` 垂直导航步骤条的最后一项箭头没隐藏的问题。[#44582](https://github.com/ant-design/ant-design/pull/44582) [@ohhoney1](https://github.com/ohhoney1)
+- TypeScript
+  - 🤖 修复 Upload 文件状态定义，移除未使用过的 `success` 状态。[#44468](https://github.com/ant-design/ant-design/pull/44468)
+
+## 5.8.5
+
+`2023-08-28`
+
+- 🛠 重构 Badge 样式逻辑将 Ribbon 样式抽离以降低 SSR 内联样式尺寸。[#44451](https://github.com/ant-design/ant-design/pull/44451)
+- 🐞 修复 App 组件下使用 `@ant-design/icons` 的图标样式异常的问题。[#41208](https://github.com/ant-design/ant-design/pull/41208) [@Wxh16144](https://github.com/Wxh16144)
+- 🐞 修复 Carousel 组件垂直方向拖动失效的问题。[#44460](https://github.com/ant-design/ant-design/pull/44460) [@RedJue](https://github.com/RedJue)
+- 🐞 修复 Tour 面板使用的 design token 错误的问题。[#44428](https://github.com/ant-design/ant-design/pull/44428)
+- 🐞 修复 Form `wrapperCol` 配置响应式 `xs` 属性无效的问题。[#44388](https://github.com/ant-design/ant-design/pull/44388)
+- 🐞 修复 ColorPicker 中重复 `key` 的问题。[#44370](https://github.com/ant-design/ant-design/pull/44370) [@xr0master](https://github.com/xr0master)
+- 🐞 修复 Radio 组件组合 Tree 组件后失效的问题。[#44380](https://github.com/ant-design/ant-design/pull/44380) [@MadCcc](https://github.com/MadCcc)
+- 🐞 修复 Table 组件 `filterDropdown` 不支持 `ref` 时报错的问题。[#44357](https://github.com/ant-design/ant-design/pull/44357) [@MadCcc](https://github.com/MadCcc)
+- 🐞 修复 Form `inline` 布局在校验失败时出现额外空行的问题。[#44360](https://github.com/ant-design/ant-design/pull/44360)
+- 🐞 修复 DatePicker 中 `showTime` 为 true 且 `format` 为数组时，组件报错。[#44306](https://github.com/ant-design/ant-design/pull/44306) [@Zian502](https://github.com/Zian502)
+- 🐞 修复 Watermark 中 `content` 内容过长时无法完整显示的问题。[#44321](https://github.com/ant-design/ant-design/pull/44321)
+- TypeScript
+  - 🤖 修复 Dropdown 组件中 `align` 属性的类型错误。[#44423](https://github.com/ant-design/ant-design/pull/44423) [@LeTuongKhanh](https://github.com/LeTuongKhanh)
+
+## 5.8.4
+
+`2023-08-18`
+
+- ColorPicker
+  - 🐞 修复 ColorPicker 色值输入框输入小写英文字母时光标跳动的问题。[#44137](https://github.com/ant-design/ant-design/pull/44137) [@gouge666](https://github.com/gouge666)
+  - 🐞 修复 ColorPicker 在不同尺寸下样式变形的问题。[#44273](https://github.com/ant-design/ant-design/pull/44273) [@kouchao](https://github.com/kouchao)
+- 🐞 修复 Descriptions 抛出 `key is not a prop` 的错误提示。[#44278](https://github.com/ant-design/ant-design/pull/44278) [@RedJue](https://github.com/RedJue)
+- 🐞 修复 Pagination `itemRender` 自定义为 `null` 时，仍然渲染节点的问题。[#44226](https://github.com/ant-design/ant-design/pull/44226)
+- 🐞 修复 Modal 在 Dropdown `menu.items` 中，展开 Modal 时快速移动鼠标会使 Dropdown 重新打开的问题。[#44204](https://github.com/ant-design/ant-design/pull/44204)
+- DatePicker
+  - 💄 修复 DatePicker 内容不居中问题。[#44245](https://github.com/ant-design/ant-design/pull/44245) [@Zian502](https://github.com/Zian502)
+  - 💄 优化 DatePicker 中范围选择区域样式。[#44206](https://github.com/ant-design/ant-design/pull/44206) [@kiner-tang](https://github.com/kiner-tang)
+- 💄 修复移动端点击 Tabs 区域触发颜色改变的问题。[#44200](https://github.com/ant-design/ant-design/pull/44200) [@yilaikesi](https://github.com/yilaikesi)
+- RTL
+  - 💄 修复了当页面的文字方向为 RTL 时 Badge 里面的数字也是 RTL 的问题。[#43998](https://github.com/ant-design/ant-design/pull/43998) [@NotEvenANeko](https://github.com/NotEvenANeko)
+
 ## 5.8.3
 
 `2023-08-11`
@@ -33,7 +91,7 @@ tag: vVERSION
 - 🐞 修复 `@ant-design/cssinjs` 版本小于 `1.15.0` 时 Design Token 部分丢失的问题。[#44091](https://github.com/ant-design/ant-design/pull/44091) [@MadCcc](https://github.com/MadCcc)
 - 💄 修复 Badge `status="processing"` 和 `dot` 配合使用时，波纹样式异常的问题。[#44153](https://github.com/ant-design/ant-design/pull/44153)
 - 💄 修复 Descriptions 组件自行嵌套时的边框样式问题。[#43454](https://github.com/ant-design/ant-design/pull/43454) [@Yuiai01](https://github.com/Yuiai01)
-- 💄 修复 Pagination 上下页切换按钮 `transition`` 丢失的问题。[#44030](https://github.com/ant-design/ant-design/pull/44030)
+- 💄 修复 Pagination 上下页切换按钮 `transition` 丢失的问题。[#44030](https://github.com/ant-design/ant-design/pull/44030)
 - 💄 修复 Popconfirm 按钮组意外换行的问题。[#44022](https://github.com/ant-design/ant-design/pull/44022) [@MuxinFeng](https://github.com/MuxinFeng)
 - 💄 优化 Image 组件预览操作图标的样式。[#44141](https://github.com/ant-design/ant-design/pull/44141) [@MadCcc](https://github.com/MadCcc)
 - 💄 优化 Input 和 InputNumber 在大尺寸下的字体大小。[#44000](https://github.com/ant-design/ant-design/pull/44000) [@MuxinFeng](https://github.com/MuxinFeng)
@@ -148,13 +206,13 @@ tag: vVERSION
   - 🆕 ColorPicker 支持 `onChangeComplete`。[#43370](https://github.com/ant-design/ant-design/pull/43370) [@RedJue](https://github.com/RedJue)
   - 🆕 ColorPicker 支持 `panelRender`。[#43134](https://github.com/ant-design/ant-design/pull/43134) [@RedJue](https://github.com/RedJue)
   - 🆕 ColorPicker 支持 `size`。[#43116](https://github.com/ant-design/ant-design/pull/43116) [@RedJue](https://github.com/RedJue)
-- 🆕 Alert、Drawer、Modal、Notifaction、Tag、Tabs 均已支持通过设置 `closeIcon` 为 null 或 false 隐藏关闭按钮。 [#42828](https://github.com/ant-design/ant-design/discussions/42828) [@kiner-tang](https://github.com/kiner-tang)
+- 🆕 Alert、Drawer、Modal、Notifaction、Tag、Tabs 均已支持通过设置 `closeIcon` 为 null 或 false 隐藏关闭按钮。[#42828](https://github.com/ant-design/ant-design/discussions/42828) [@kiner-tang](https://github.com/kiner-tang)
 - 🆕 Anchor 添加 `replace` 属性。[#43006](https://github.com/ant-design/ant-design/pull/43006) [@ds1371dani](https://github.com/ds1371dani)
 - 🆕 Image 支持 `imageRender`、`toolbarRender` 属性以支持预览图和工具栏的自定义渲染，还支持了 `onTransform`、`minScale`、`maxScale` 等新属性，Image.PreviewGroup 支持 `items` 属性传入列表数据，并修复了 img 标签的原生属性没有传递给预览图的问题。[#43075](https://github.com/ant-design/ant-design/pull/43075) [@linxianxi](https://github.com/linxianxi)
 - 🆕 修改 Image 预览图的布局风格，`preview` 属性支持 `closeIcon`，Image.PreviewGroup 支持 `fallback` 属性，修复加载预览资源提前加载的问题。[#43167](https://github.com/ant-design/ant-design/pull/43167) [@linxianxi](https://github.com/linxianxi)
 - 🛠 InputNumber 使用 rc-input 进行重构。[#43000](https://github.com/ant-design/ant-design/pull/43000) [@MuxinFeng](https://github.com/MuxinFeng)
 - 🛠 解决 vite、rollup、meteor、microbundle 等构建工具中遇到的循环依赖问题，并增加相关的检测。[#42750](https://github.com/ant-design/ant-design/pull/42750)，感谢 [@jrr997](https://github.com/jrr997)、[@kiner-tang](https://github.com/kiner-tang) 和 [@MuxinFeng](https://github.com/MuxinFeng) 的贡献。
-- 🐞 移除 Anchor/CollapsePanel/Input.Group 组件中 `className` 属性的默认值（空字符串）。 [#43481](https://github.com/ant-design/ant-design/pull/43481) [@thinkasany](https://github.com/thinkasany)
+- 🐞 移除 Anchor/CollapsePanel/Input.Group 组件中 `className` 属性的默认值（空字符串）。[#43481](https://github.com/ant-design/ant-design/pull/43481) [@thinkasany](https://github.com/thinkasany)
 - 🐞 修复 Upload 上传进度条延迟消失且丢失动画效果的问题。[#43471](https://github.com/ant-design/ant-design/pull/43471)
 - 🐞 为 Menu 中组件 Token `colorItemBgSelected` 添加废弃警告。[#43461](https://github.com/ant-design/ant-design/pull/43461) [@MadCcc](https://github.com/MadCcc)
 - 🐞 杂项：修复样式特性支持检测时部分浏览器因为未重绘导致出现滚动条的问题。[#43358](https://github.com/ant-design/ant-design/pull/43358) [@LeeeeeeM](https://github.com/LeeeeeeM)
@@ -447,7 +505,7 @@ tag: vVERSION
 `2023-04-19`
 
 - 🐞 修复 FloatButton 警告: findDOMNode is deprecated in StrictMode.。[#41833](https://github.com/ant-design/ant-design/pull/41833) [@fourcels](https://github.com/fourcels)
-- 🐞 杂项：箭头元素兼容旧版本不支持 `clip-path: path()` 的浏览器。 [#41872](https://github.com/ant-design/ant-design/pull/41872)
+- 🐞 杂项：箭头元素兼容旧版本不支持 `clip-path: path()` 的浏览器。[#41872](https://github.com/ant-design/ant-design/pull/41872)
 - 🐞 修复 Layout.Sider 切换主题时存在背景切换延迟的问题。[#41828](https://github.com/ant-design/ant-design/pull/41828)
 - 🐞 修复 Tour 的 `type="primary"` 时箭头的颜色仍为白色的问题。[#41761](https://github.com/ant-design/ant-design/pull/41761)
 - 🐞 优化 Form 字段绑定，现在会忽略在 Form.Item 内的注释不再作为子组件进行绑定。[#41771](https://github.com/ant-design/ant-design/pull/41771)
@@ -775,7 +833,7 @@ tag: vVERSION
 
 `2023-01-15`
 
-- 🐞 修复 Checkbox 组件 label 不对齐的问题。 [#40208](https://github.com/ant-design/ant-design/pull/40208)
+- 🐞 修复 Checkbox 组件 label 不对齐的问题。[#40208](https://github.com/ant-design/ant-design/pull/40208)
 - 🐞 修复 Button 水波纹效果有时会使得布局抖动的问题。[#40192](https://github.com/ant-design/ant-design/pull/40192)
 - 🐞 修复 Select 组件会卡住的问题。[#40158](https://github.com/ant-design/ant-design/pull/40158) [@helloqian12138](https://github.com/helloqian12138)
 - 🐞 修复 Timeline 组件自定义颜色显示错误类名和对齐溢出的问题。[#39394](https://github.com/ant-design/ant-design/pull/39394) [@Wxh16144](https://github.com/Wxh16144)
@@ -862,7 +920,7 @@ tag: vVERSION
 - 🐞 修复 Card 只有 `extra` 时标题栏高度不足的问题。[#39646](https://github.com/ant-design/ant-design/pull/39646) [@JarvisArt](https://github.com/JarvisArt)
 - 🐞 修复 Row 组件 `justify` 和 `align` 属性，动态改变不生效的问题。[#39704](https://github.com/ant-design/ant-design/pull/39704) [@candy4290](https://github.com/candy4290)
 - 🐞 修复 App 中 `children` 使用相同 key 的警告。[#39695](https://github.com/ant-design/ant-design/pull/39695) [@Kamahl19](https://github.com/Kamahl19)，[#39701](https://github.com/ant-design/ant-design/pull/39701) [@li-jia-nan](https://github.com/li-jia-nan)
-- 💄 Image 组件预览交互优化. [#39812](https://github.com/ant-design/ant-design/pull/39812) [@JarvisArt](https://github.com/JarvisArt)
+- 💄 Image 组件预览交互优化。[#39812](https://github.com/ant-design/ant-design/pull/39812) [@JarvisArt](https://github.com/JarvisArt)
 - 💄 修复 Table 筛选菜单选中背景色和菜单阴影样式。[#39805](https://github.com/ant-design/ant-design/pull/39805)
 - TypeScript
   - 🤖 修复部分 Design Token 缺少类型提示的问题。[#39754](https://github.com/ant-design/ant-design/pull/39754)
diff --git a/README-ar_EG.md b/README-ar_EG.md
deleted file mode 100644
index e36cf43d15c8..000000000000
--- a/README-ar_EG.md
+++ /dev/null
@@ -1,155 +0,0 @@
-<p align="center">
-  <a href="https://ant.design">
-    <img width="200" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg">
-  </a>
-</p>
-
-<h1 align="center">Ant Design</h1>
-
-<div align="center">
-
-لغة تصميم واجهة المستخدم على مستوى المؤسسات ومكتبة React UI.
-
-[![CI status][github-action-image]][github-action-url] [![codecov][codecov-image]][codecov-url] [![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url]
-
-[![][bundlephobia-image]][bundlephobia-url] [![][bundlesize-js-image]][unpkg-js-url] [![FOSSA Status][fossa-image]][fossa-url]
-
-[![Follow Twitter][twitter-image]][twitter-url] [![Renovate status][renovate-image]][renovate-dashboard-url] [![][issues-helper-image]][issues-helper-url] [![dumi][dumi-image]][dumi-url] [![Issues need help][help-wanted-image]][help-wanted-url]
-
-[npm-image]: http://img.shields.io/npm/v/antd.svg?style=flat-square
-[npm-url]: http://npmjs.org/package/antd
-[github-action-image]: https://github.com/ant-design/ant-design/workflows/%E2%9C%85%20test/badge.svg
-[github-action-url]: https://github.com/ant-design/ant-design/actions?query=workflow%3A%22%E2%9C%85+test%22
-[codecov-image]: https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square
-[codecov-url]: https://codecov.io/gh/ant-design/ant-design/branch/master
-[download-image]: https://img.shields.io/npm/dm/antd.svg?style=flat-square
-[download-url]: https://npmjs.org/package/antd
-[fossa-image]: https://app.fossa.io/api/projects/git%2Bgithub.com%2Fant-design%2Fant-design.svg?type=shield
-[fossa-url]: https://app.fossa.io/projects/git%2Bgithub.com%2Fant-design%2Fant-design?ref=badge_shield
-[help-wanted-image]: https://flat.badgen.net/github/label-issues/ant-design/ant-design/help%20wanted/open
-[help-wanted-url]: https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22
-[twitter-image]: https://img.shields.io/twitter/follow/AntDesignUI.svg?label=Ant%20Design
-[twitter-url]: https://twitter.com/AntDesignUI
-[bundlesize-js-image]: https://img.badgesize.io/https:/unpkg.com/antd/dist/antd.min.js?label=antd.min.js&compression=gzip&style=flat-square
-[unpkg-js-url]: https://unpkg.com/browse/antd/dist/antd.min.js
-[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/antd?style=flat-square
-[bundlephobia-url]: https://bundlephobia.com/package/antd
-[issues-helper-image]: https://img.shields.io/badge/using-issues--helper-orange?style=flat-square
-[issues-helper-url]: https://github.com/actions-cool/issues-helper
-[renovate-image]: https://img.shields.io/badge/renovate-enabled-brightgreen.svg?style=flat-square
-[renovate-dashboard-url]: https://github.com/ant-design/ant-design/issues/32498
-[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square
-[dumi-url]: https://github.com/umijs/dumi
-
-</div>
-
-[![](https://user-images.githubusercontent.com/507615/209472919-6f7e8561-be8c-4b0b-9976-eb3c692aa20a.png)](https://ant.design)
-
-[English](./README.md) | [Português](./README-pt_BR.md) | [简体中文](./README-zh_CN.md) | [Українською](./README-uk_UA.md) | [Spanish](./README-sp_MX.md) | [日本語](./README-ja_JP.md) | العربية
-
-## ✨ الميزات
-
-- 🌈 واجهة مستخدم من فئة المؤسسات مصممة لتطبيقات الويب.
-- 📦 مجموعة من مكونات React عالية الجودة خارج الصندوق.
-- 🛡 مكتوب في TypeScript بأنواع ثابتة يمكن التنبؤ بها.
-- ⚙️ مجموعة كاملة من موارد التصميم وأدوات التطوير.
-- 🌍 دعم التدويل لعشرات اللغات.
-- 🎨 تخصيص موضوع قوي على أساس CSS-in-JS.
-
-## 🖥 دعم البيئة البرمجية
-
-- المتصفحات الحديثة
-- التقديم من جانب الخادم
-- [إلكترون](https://www.electronjs.org/)
-
-| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Electron |
-| --- | --- | --- | --- | --- |
-| Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
-
-## 📦 التثبيت
-
-```bash
-npm install antd
-```
-
-```bash
-yarn add antd
-```
-
-## 🔨 الاستخدام
-
-```jsx
-import React from 'react';
-import { Button, DatePicker } from 'antd';
-
-const App = () => (
-  <>
-    <Button type="primary">PRESS ME</Button>
-    <DatePicker placeholder="select date" />
-  </>
-);
-```
-
-### كتابة السكربيت
-
-الخاصية `antd` مكتوبة في TypeScript مع تعريفات كاملة ، تحقق [Use in TypeScript](https://ant.design/docs/react/use-in-typescript) للبدء.
-
-## 🌍 التدويل
-
-يتم دعم عشرات اللغات في`antd`, انظر [i18n](https://ant.design/docs/react/i18n).
-
-## 🔗 الروابط
-
-- [الصفحة الرئيسية](https://ant.design/)
-- [نظرة عامة على المكونات](https://ant.design/components/overview)
-- [برنامج Ant Design Pro](https://pro.ant.design/)
-- [تغير الدخول](CHANGELOG.en-US.md)
-- [مكونات](https://react-component.github.io/)
-- [موبايل UI](https://mobile.ant.design)
-- [برنامج صغير UI](https://mini.ant.design)
-- [مكونات Ant Design Pro](https://procomponents.ant.design)
-- [رسوم بيانية Ant Design](https://charts.ant.design)
-- [أيقونات Ant Design](https://github.com/ant-design/ant-design-icons)
-- [ألوان Ant Design](https://github.com/ant-design/ant-design-colors)
-- [صفحة لاند](https://landing.ant.design)
-- [حركة](https://motion.ant.design)
-- [سوق Scaffold](https://scaffold.ant.design)
-- [تعليمات المطورين](https://github.com/ant-design/ant-design/wiki/Development)
-- [إعداد نسخ الاصدارات](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
-- [أسئلة مكرة](https://ant.design/docs/react/faq)
-- [قالب CodeSandbox](https://u.ant.design/codesandbox-repro)
-- [تخصيص ثيم](https://ant.design/docs/react/customize-theme)
-- [كيفية التقدم بطلب المشاركة كمتعاون](https://github.com/ant-design/ant-design/wiki/Collaborators#how-to-apply-for-being-a-collaborator)
-
-## ⌨️ التطوير
-
-استخدم Gitpod, بيئة تطوير مجانية عبر الإنترنت لـ GitHub.
-
-[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/ant-design/ant-design)
-
-أو انسخه محلياً:
-
-```bash
-$ git clone git@github.com:ant-design/ant-design.git
-$ cd ant-design
-$ npm install
-$ npm start
-```
-
-افتح متصفحك وقم بزيارة http://127.0.0.1:8001 , شاهد المزيد [Development](https://github.com/ant-design/ant-design/wiki/Development).
-
-## 🤝 المساهمة [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
-
-أقرأ [دليل المساهمة](https://ant.design/docs/react/contributing) ودعونا نبني معاً الأفضل.
-
-نرحب بجميع المساهمات. يرجى قراءة [CONTRIBUTING.md](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md) أولاً. يمكنك تقديم أي أفكار [pull requests](https://github.com/ant-design/ant-design/pulls) أو [GitHub issues](https://github.com/ant-design/ant-design/issues). إذا كنت ترغب في تحسين التعليمات البرمجية ، تحقق من [Development Instructions](https://github.com/ant-design/ant-design/wiki/Development) وأتمنى لك وقتاً ممتعاً! :)
-
-إذا كنت مساهماً ، فيرجى اتباع [Pull Request principle](https://github.com/ant-design/ant-design/wiki/PR-principle) لإنشاء طلب مساهمة مع [collaborator template](https://github.com/ant-design/ant-design/compare?expand=1&template=collaborator.md).
-
-[![Let's fund issues in this repository](https://issuehunt.io/static/embed/issuehunt-button-v1.svg)](https://issuehunt.io/repos/34526884)
-
-## ❤️ الرعاة والداعمون [![](https://opencollective.com/ant-design/tiers/sponsors/badge.svg?label=Sponsors&color=brightgreen)](https://opencollective.com/ant-design#support) [![](https://opencollective.com/ant-design/tiers/backers/badge.svg?label=Backers&color=brightgreen)](https://opencollective.com/ant-design#support)
-
-[![](https://opencollective.com/ant-design/tiers/sponsors.svg?avatarHeight=36)](https://opencollective.com/ant-design#support)
-
-[![](https://opencollective.com/ant-design/tiers/backers.svg?avatarHeight=36)](https://opencollective.com/ant-design#support)
diff --git a/README-ja_JP.md b/README-ja_JP.md
deleted file mode 100644
index 94424a959318..000000000000
--- a/README-ja_JP.md
+++ /dev/null
@@ -1,155 +0,0 @@
-<p align="center">
-  <a href="https://ant.design">
-    <img width="200" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg">
-  </a>
-</p>
-
-<h1 align="center">Ant Design</h1>
-
-<div align="center">
-
-エンタープライズクラスの UI 設計言語と React UI ライブラリです。
-
-[![CI status][github-action-image]][github-action-url] [![codecov][codecov-image]][codecov-url] [![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url]
-
-[![][bundlephobia-image]][bundlephobia-url] [![][bundlesize-js-image]][unpkg-js-url] [![FOSSA Status][fossa-image]][fossa-url]
-
-[![Follow Twitter][twitter-image]][twitter-url] [![Renovate status][renovate-image]][renovate-dashboard-url] [![][issues-helper-image]][issues-helper-url] [![dumi][dumi-image]][dumi-url] [![Issues need help][help-wanted-image]][help-wanted-url]
-
-[npm-image]: http://img.shields.io/npm/v/antd.svg?style=flat-square
-[npm-url]: http://npmjs.org/package/antd
-[github-action-image]: https://github.com/ant-design/ant-design/workflows/%E2%9C%85%20test/badge.svg
-[github-action-url]: https://github.com/ant-design/ant-design/actions?query=workflow%3A%22%E2%9C%85+test%22
-[codecov-image]: https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square
-[codecov-url]: https://codecov.io/gh/ant-design/ant-design/branch/master
-[download-image]: https://img.shields.io/npm/dm/antd.svg?style=flat-square
-[download-url]: https://npmjs.org/package/antd
-[fossa-image]: https://app.fossa.io/api/projects/git%2Bgithub.com%2Fant-design%2Fant-design.svg?type=shield
-[fossa-url]: https://app.fossa.io/projects/git%2Bgithub.com%2Fant-design%2Fant-design?ref=badge_shield
-[help-wanted-image]: https://flat.badgen.net/github/label-issues/ant-design/ant-design/help%20wanted/open
-[help-wanted-url]: https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22
-[twitter-image]: https://img.shields.io/twitter/follow/AntDesignUI.svg?label=Ant%20Design
-[twitter-url]: https://twitter.com/AntDesignUI
-[bundlesize-js-image]: https://img.badgesize.io/https:/unpkg.com/antd/dist/antd.min.js?label=antd.min.js&compression=gzip&style=flat-square
-[unpkg-js-url]: https://unpkg.com/browse/antd/dist/antd.min.js
-[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/antd?style=flat-square
-[bundlephobia-url]: https://bundlephobia.com/package/antd
-[issues-helper-image]: https://img.shields.io/badge/using-issues--helper-orange?style=flat-square
-[issues-helper-url]: https://github.com/actions-cool/issues-helper
-[renovate-image]: https://img.shields.io/badge/renovate-enabled-brightgreen.svg?style=flat-square
-[renovate-dashboard-url]: https://github.com/ant-design/ant-design/issues/32498
-[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square
-[dumi-url]: https://github.com/umijs/dumi
-
-</div>
-
-[![](https://user-images.githubusercontent.com/507615/209472919-6f7e8561-be8c-4b0b-9976-eb3c692aa20a.png)](https://ant.design)
-
-[English](./README.md) | [Português](./README-pt_BR.md) | [简体中文](./README-zh_CN.md) | [Українською](./README-uk_UA.md) | [Spanish](./README-sp_MX.md) | 日本語 | [العربية](./README-ar_EG.md)
-
-## ✨ 機能
-
-- 🌈 ウェブアプリケーション用に設計されたエンタープライズクラスの UI。
-- 📦 高品質な React コンポーネントのセットが箱から出されます。
-- 🛡 TypeScript で書かれており、予測可能な静的型がある。
-- ⚙️ デザインリソースと開発ツールの全体的なパッケージ。
-- 🌍 数十の言語に対応した国際化サポート。
-- 🎨 強力なテーマのカスタマイズを細部にわたって実現。
-
-## 🖥 環境対応
-
-- モダンブラウザ
-- サーバーサイド レンダリング
-- [Electron](https://www.electronjs.org/)
-
-| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Electron |
-| --- | --- | --- | --- | --- |
-| Edge | 直近の 2 バージョン | 直近の 2 バージョン | 直近の 2 バージョン | 直近の 2 バージョン |
-
-## 📦 インストール
-
-```bash
-npm install antd
-```
-
-```bash
-yarn add antd
-```
-
-## 🔨 使い方
-
-```jsx
-import React from 'react';
-import { Button, DatePicker } from 'antd';
-
-const App = () => (
-  <>
-    <Button type="primary">PRESS ME</Button>
-    <DatePicker placeholder="select date" />
-  </>
-);
-```
-
-### TypeScript
-
-`antd` は TypeScript で書かれており、完全な定義がなされています。まずは [TypeScript で使う](https://ant.design/docs/react/use-in-typescript)をチェックしてください。
-
-## 🌍 国際化対応
-
-数十の言語が `antd` でサポートされています。[i18n](https://ant.design/docs/react/i18n) を参照してください。
-
-## 🔗 リンク
-
-- [ホームページ](https://ant.design/)
-- [コンポーネントの概要](https://ant.design/components/overview)
-- [Ant Design Pro](http://pro.ant.design/)
-- [変更ログ](CHANGELOG.en-US.md)
-- [rc-components](http://react-component.github.io/)
-- [Mobile UI](http://mobile.ant.design)
-- [Mini Program UI](http://mini.ant.design)
-- [Ant Design Pro コンポーネント](https://procomponents.ant.design)
-- [Ant Design チャート](https://charts.ant.design)
-- [Ant Design アイコン](https://github.com/ant-design/ant-design-icons)
-- [Ant Design カラー](https://github.com/ant-design/ant-design-colors)
-- [ランディングページ](https://landing.ant.design)
-- [動作](https://motion.ant.design)
-- [足場マーケット](http://scaffold.ant.design)
-- [開発者向けインストラクション](https://github.com/ant-design/ant-design/wiki/Development)
-- [バージョン管理リリースノート](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
-- [FAQ](https://ant.design/docs/react/faq)
-- バグレポート用の [CodeSandbox テンプレート](https://u.ant.design/codesandbox-repro)
-- [テーマのカスタマイズ](https://ant.design/docs/react/customize-theme)
-- [コラボレーターへの応募方法](https://github.com/ant-design/ant-design/wiki/Collaborators#how-to-apply-for-being-a-collaborator)
-
-## ⌨️ 開発
-
-GitHub の無料オンライン開発環境である Gitpod を利用する。
-
-[![Gitpod で開く](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/ant-design/ant-design)
-
-またはローカルにクローンする:
-
-```bash
-$ git clone git@github.com:ant-design/ant-design.git
-$ cd ant-design
-$ npm install
-$ npm start
-```
-
-ブラウザを起動し、http://127.0.0.1:8001 にアクセスして[開発セクション](https://github.com/ant-design/ant-design/wiki/Development)の続きをもっと見る.
-
-## 🤝 貢献 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
-
-[貢献ガイド](https://ant.design/docs/react/contributing)を読んで、よりよい antd を一緒の作り上げましょう。
-
-すべての貢献に感謝します。まずは [CONTRIBUTING.md](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md) をお読みください. どんなアイデアも [Pull Request](https://github.com/ant-design/ant-design/pulls) や [GitHub issues](https://github.com/ant-design/ant-design/issues) で応募することができます. コードの改良をしたい方は、[開発手順](https://github.com/ant-design/ant-design/wiki/Development) を確認してください。あとは楽しみましょう! :)
-
-コラボレーターの方は、[コラボレーター テンプレート](https://github.com/ant-design/ant-design/compare?expand=1&template=collaborator.md)を使い、Pull Request を作成するための[プルリクエストの原則](https://github.com/ant-design/ant-design/wiki/PR-principle)に従ってください。
-
-[![このレポジトリの課題に資金を提供しよう](https://issuehunt.io/static/embed/issuehunt-button-v1.svg)](https://issuehunt.io/repos/34526884)
-
-## ❤️ スポンサーと後援者 [![](https://opencollective.com/ant-design/tiers/sponsors/badge.svg?label=Sponsors&color=brightgreen)](https://opencollective.com/ant-design#support) [![](https://opencollective.com/ant-design/tiers/backers/badge.svg?label=Backers&color=brightgreen)](https://opencollective.com/ant-design#support)
-
-[![](https://opencollective.com/ant-design/tiers/sponsors.svg?avatarHeight=36)](https://opencollective.com/ant-design#support)
-
-[![](https://opencollective.com/ant-design/tiers/backers.svg?avatarHeight=36)](https://opencollective.com/ant-design#support)
diff --git a/README-pt_BR.md b/README-pt_BR.md
deleted file mode 100644
index a267d27d70d8..000000000000
--- a/README-pt_BR.md
+++ /dev/null
@@ -1,158 +0,0 @@
-<p align="center">
-  <a href="https://ant.design">
-    <img width="200" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg">
-  </a>
-</p>
-
-<h1 align="center">Ant Design</h1>
-
-<div align="center">
-
-Uma solução empresarial de design e biblioteca UI para React.
-
-[![CI status][github-action-image]][github-action-url] [![codecov][codecov-image]][codecov-url] [![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url]
-
-[![][bundlephobia-image]][bundlephobia-url] [![][bundlesize-js-image]][unpkg-js-url] [![FOSSA Status][fossa-image]][fossa-url]
-
-[![Follow Twitter][twitter-image]][twitter-url] [![Renovate status][renovate-image]][renovate-dashboard-url] [![][issues-helper-image]][issues-helper-url] [![dumi][dumi-image]][dumi-url] [![Issues need help][help-wanted-image]][help-wanted-url]
-
-[npm-image]: http://img.shields.io/npm/v/antd.svg?style=flat-square
-[npm-url]: http://npmjs.org/package/antd
-[github-action-image]: https://github.com/ant-design/ant-design/workflows/%E2%9C%85%20test/badge.svg
-[github-action-url]: https://github.com/ant-design/ant-design/actions?query=workflow%3A%22%E2%9C%85+test%22
-[codecov-image]: https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square
-[codecov-url]: https://codecov.io/gh/ant-design/ant-design/branch/master
-[download-image]: https://img.shields.io/npm/dm/antd.svg?style=flat-square
-[download-url]: https://npmjs.org/package/antd
-[fossa-image]: https://app.fossa.io/api/projects/git%2Bgithub.com%2Fant-design%2Fant-design.svg?type=shield
-[fossa-url]: https://app.fossa.io/projects/git%2Bgithub.com%2Fant-design%2Fant-design?ref=badge_shield
-[help-wanted-image]: https://flat.badgen.net/github/label-issues/ant-design/ant-design/help%20wanted/open
-[help-wanted-url]: https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22
-[twitter-image]: https://img.shields.io/twitter/follow/AntDesignUI.svg?label=Ant%20Design
-[twitter-url]: https://twitter.com/AntDesignUI
-[bundlesize-js-image]: https://img.badgesize.io/https:/unpkg.com/antd/dist/antd.min.js?label=antd.min.js&compression=gzip&style=flat-square
-[unpkg-js-url]: https://unpkg.com/browse/antd/dist/antd.min.js
-[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/antd?style=flat-square
-[bundlephobia-url]: https://bundlephobia.com/package/antd
-[issues-helper-image]: https://img.shields.io/badge/using-issues--helper-orange?style=flat-square
-[issues-helper-url]: https://github.com/actions-cool/issues-helper
-[renovate-image]: https://img.shields.io/badge/renovate-enabled-brightgreen.svg?style=flat-square
-[renovate-dashboard-url]: https://github.com/ant-design/ant-design/issues/32498
-[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square
-[dumi-url]: https://github.com/umijs/dumi
-
-</div>
-
-[![](https://user-images.githubusercontent.com/507615/209472919-6f7e8561-be8c-4b0b-9976-eb3c692aa20a.png)](https://ant.design)
-
-[English](./README.md) | Português | [简体中文](./README-zh_CN.md) | [Українською](./README-uk_UA.md) | [Spanish](./README-sp_MX.md) | [日本語](./README-ja_JP.md) | [العربية](./README-ar_EG.md)
-
-## ✨ Funcionalidades
-
-- 🌈 Design empresarial de interface para aplicações web.
-- 📦 Um conjunto de alta qualidade, componentes React prontos para uso.
-- 🛡 Escrito em TypeScript com tipos previsíveis.
-- ⚙️ Pacote completo de recursos de design e ferramentas de desenvolvimento.
-- 🌍 Suporte de internacionalização para dezenas de idiomas.
-- 🎨 Personalização poderosa do tema em todos os detalhes.
-
-## 🖥 Suporte aos ambientes
-
-- Navegadores modernos
-- Renderização no lado do servidor (server-side)
-- [Electron](https://www.electronjs.org/)
-
-| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Electron |
-| --- | --- | --- | --- | --- | --- |
-| Edge | últimas 2 versões | últimas 2 versões | últimas 2 versões | últimas 2 versões | últimas 2 versões |
-
-## 📦 Instalação
-
-```bash
-npm install antd
-```
-
-```bash
-yarn add antd
-```
-
-## 🔨 Uso
-
-```jsx
-import React from 'react';
-import { Button, DatePicker } from 'antd';
-
-const App = () => (
-  <>
-    <Button type="primary">PRESS ME</Button>
-    <DatePicker />
-  </>
-);
-```
-
-### TypeScript
-
-Veja [Uso no Typescript](https://ant.design/docs/react/use-in-typescript).
-
-## 🌍 Internacionalização
-
-Veja [i18n](https://ant.design/docs/react/i18n).
-
-## 🔗 Links
-
-- [Página inicial](https://ant.design/)
-- [Componentes](https://ant.design/components/overview)
-- [Ant Design Pro](http://pro.ant.design/)
-- [Ant Design Charts](https://charts.ant.design)
-- [Change Log](CHANGELOG.en-US.md)
-- [rc-components](http://react-component.github.io/)
-- [Mobile UI](http://mobile.ant.design)
-- [Mini Program UI](http://mini.ant.design)
-- [Ant Design Icones](https://github.com/ant-design/ant-design-icons)
-- [Ant Design Cores](https://github.com/ant-design/ant-design-colors)
-- [Ant Design Pro Layout](https://github.com/ant-design/ant-design-pro-layout)
-- [Ant Design Pro Blocks](https://github.com/ant-design/pro-blocks)
-- [Tema escuro](https://github.com/ant-design/ant-design-dark-theme)
-- [Página de aterrissagem](https://landing.ant.design)
-- [Motion](https://motion.ant.design)
-- [Mercado de páginas](http://scaffold.ant.design)
-- [Instruções ao desenvolvedor](https://github.com/ant-design/ant-design/wiki/Development)
-- [Versionando as notas de atualização](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
-- [FAQ](https://ant.design/docs/react/faq)
-- [CodeSandbox Template](https://u.ant.design/codesandbox-repro) para relatório de erros
-- [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design)
-- [Customize Theme](https://ant.design/docs/react/customize-theme)
-- [How to Apply for Being A Collaborator](https://github.com/ant-design/ant-design/wiki/Collaborators#how-to-apply-for-being-a-collaborator)
-
-## ⌨️ Desenvolvimento
-
-Use Gitpod, um ambiente de desenvolvimento online para GitHub.
-
-[![Abrir no Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/ant-design/ant-design)
-
-Ou clone localmente:
-
-```bash
-$ git clone git@github.com:ant-design/ant-design.git
-$ cd ant-design
-$ npm install
-$ npm start
-```
-
-Abra seu navegador e visite http://127.0.0.1:8001, veja mais em [Desenvolvimento](https://github.com/ant-design/ant-design/wiki/Development).
-
-## 🤝 Contribuição [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
-
-Leia nosso [guia de contribução](https://ant.design/docs/react/contributing) e vamos contruir um melhor antd juntos.
-
-Nós saudamos todas as contribuições. Por favor, leia nosso [CONTRIBUTING.md](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md) primeiro. Você pode submeter todas as ideias como [Pull Requests](https://github.com/ant-design/ant-design/pulls) ou como [GitHub issues](https://github.com/ant-design/ant-design/issues). Se você quiser melhorar o código, verifique [instruções ao desenvolvedor](https://github.com/ant-design/ant-design/wiki/Development) e divirta-se! :)
-
-Se você é um colaborador, por favor siga nossa [Pull Request princípio](https://github.com/ant-design/ant-design/wiki/PR-principle) para criar um Pull Request através do [template do colaborador](https://github.com/ant-design/ant-design/compare?expand=1&template=collaborator.md).
-
-[![Let's fund issues in this repository](https://issuehunt.io/static/embed/issuehunt-button-v1.svg)](https://issuehunt.io/repos/34526884)
-
-## ❤️ Patrocionadores e Apoiadores [![](https://opencollective.com/ant-design/tiers/sponsors/badge.svg?label=Sponsors&color=brightgreen)](https://opencollective.com/ant-design#support) [![](https://opencollective.com/ant-design/tiers/backers/badge.svg?label=Backers&color=brightgreen)](https://opencollective.com/ant-design#support)
-
-[![](https://opencollective.com/ant-design/tiers/sponsors.svg?avatarHeight=36)](https://opencollective.com/ant-design#support)
-
-[![](https://opencollective.com/ant-design/tiers/backers.svg?avatarHeight=36)](https://opencollective.com/ant-design#support)
diff --git a/README-sp_MX.md b/README-sp_MX.md
deleted file mode 100644
index 0e2298117733..000000000000
--- a/README-sp_MX.md
+++ /dev/null
@@ -1,154 +0,0 @@
-<p align="center">
-  <a href="https://ant.design">
-    <img width="200" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg">
-  </a>
-</p>
-
-<h1 align="center">Ant Design</h1>
-
-<div align="center">
-
-Un lenguaje de diseño de interfaz de usuario de clase empresarial y una biblioteca de interfaz de usuario React.
-
-[![CI status][github-action-image]][github-action-url] [![codecov][codecov-image]][codecov-url] [![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url]
-
-[![][bundlephobia-image]][bundlephobia-url] [![][bundlesize-js-image]][unpkg-js-url] [![FOSSA Status][fossa-image]][fossa-url]
-
-[![Follow Twitter][twitter-image]][twitter-url] [![Renovate status][renovate-image]][renovate-dashboard-url] [![][issues-helper-image]][issues-helper-url] [![dumi][dumi-image]][dumi-url] [![Issues need help][help-wanted-image]][help-wanted-url]
-
-[npm-image]: http://img.shields.io/npm/v/antd.svg?style=flat-square
-[npm-url]: http://npmjs.org/package/antd
-[github-action-image]: https://github.com/ant-design/ant-design/workflows/%E2%9C%85%20test/badge.svg
-[github-action-url]: https://github.com/ant-design/ant-design/actions?query=workflow%3A%22%E2%9C%85+test%22
-[codecov-image]: https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square
-[codecov-url]: https://codecov.io/gh/ant-design/ant-design/branch/master
-[download-image]: https://img.shields.io/npm/dm/antd.svg?style=flat-square
-[download-url]: https://npmjs.org/package/antd
-[fossa-image]: https://app.fossa.io/api/projects/git%2Bgithub.com%2Fant-design%2Fant-design.svg?type=shield
-[fossa-url]: https://app.fossa.io/projects/git%2Bgithub.com%2Fant-design%2Fant-design?ref=badge_shield
-[help-wanted-image]: https://flat.badgen.net/github/label-issues/ant-design/ant-design/help%20wanted/open
-[help-wanted-url]: https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22
-[twitter-image]: https://img.shields.io/twitter/follow/AntDesignUI.svg?label=Ant%20Design
-[twitter-url]: https://twitter.com/AntDesignUI
-[bundlesize-js-image]: https://img.badgesize.io/https:/unpkg.com/antd/dist/antd.min.js?label=antd.min.js&compression=gzip&style=flat-square
-[unpkg-js-url]: https://unpkg.com/browse/antd/dist/antd.min.js
-[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/antd?style=flat-square
-[bundlephobia-url]: https://bundlephobia.com/package/antd
-[issues-helper-image]: https://img.shields.io/badge/using-issues--helper-orange?style=flat-square
-[issues-helper-url]: https://github.com/actions-cool/issues-helper
-[renovate-image]: https://img.shields.io/badge/renovate-enabled-brightgreen.svg?style=flat-square
-[renovate-dashboard-url]: https://github.com/ant-design/ant-design/issues/32498
-[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square
-[dumi-url]: https://github.com/umijs/dumi
-
-</div>
-
-[![](https://user-images.githubusercontent.com/507615/209472919-6f7e8561-be8c-4b0b-9976-eb3c692aa20a.png)](https://ant.design)
-
-[English](./README.md) | [Português](./README-pt_BR.md) | [简体中文](./README-zh_CN.md) | [Українською](./README-uk_UA.md) | Spanish | [日本語](./README-ja_JP.md) | [العربية](./README-ar_EG.md)
-
-## ✨ Características
-
-- 🌈 Interfaz de usuario de clase empresarial diseñada para aplicaciones de web
-- 📦 Un conjunto de componentes React de alta calidad listos para usar.
-- 🛡 Escrito en TypeScript con tipos estáticos predecibles.
-- ⚙️ Paquete completo de recursos de diseño y herramientas de desarrollo.
-- 🌍 Soporte de internacionalización para decenas de idiomas.
-- 🎨 Potente personalización del tema en cada detalle.
-
-## 🖥 Entornos soportados
-
-- Navegadores modernos
-- Representación del lado del servidor
-- [Electron](https://www.electronjs.org/)
-
-| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Electron |
-| --- | --- | --- | --- | --- |
-| Edge | últimas 2 versiones | últimas 2 versiones | últimas 2 versiones | últimas 2 versiones |
-
-## 📦 Instalar
-
-```bash
-npm install antd
-```
-
-```bash
-yarn add antd
-```
-
-## 🔨 Uso
-
-```jsx
-import React from 'react';
-import { Button, DatePicker } from 'antd';
-
-const App = () => (
-  <>
-    <Button type="primary">PRESS ME</Button>
-    <DatePicker placeholder="select date" />
-  </>
-);
-```
-
-### TypeScript
-
-`antd` está escrito en TypeScript con definiciones completas, ver Usar en TypeScript [Usar en TypeScript](https://ant.design/docs/react/use-in-typescript) para comenzar.
-
-## 🌍 Internacionalización
-
-Docenas de idiomas compatibles en `antd`, ver [i18n](https://ant.design/docs/react/i18n).
-
-## 🔗 Enlaces
-
-- [Página de Inicio](https://ant.design/)
-- [Descripción General de los Componentes](https://ant.design/components/overview)
-- [Ant Design Pro](http://pro.ant.design/)
-- [Cambio de Registro](CHANGELOG.en-US.md)
-- [componentes-rc](http://react-component.github.io/)
-- [Interfaz de Usuario Móvil](http://mobile.ant.design)
-- [Componentes Ant Design Pro](https://procomponents.ant.design)
-- [Gráficos de Diseño de Ant Design](https://charts.ant.design)
-- [Iconos de Diseño de Ant Design](https://github.com/ant-design/ant-design-icons)
-- [Colores de Diseño de Ant Design](https://github.com/ant-design/ant-design-colors)
-- [Páginas de Destino](https://landing.ant.design)
-- [Movimiento](https://motion.ant.design)
-- [Mercado Scaffold](http://scaffold.ant.design)
-- [Instrucción para Desarrolladores](https://github.com/ant-design/ant-design/wiki/Development)
-- [Nota de la Versión de Control de Versiones](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
-- [FAQ](https://ant.design/docs/react/faq)
-- [Plantilla de CodeSandbox](https://u.ant.design/codesandbox-repro) para reportes de errores
-- [Tema personalizado](https://ant.design/docs/react/customize-theme)
-- [Cómo Postularse para ser Colaborador](https://github.com/ant-design/ant-design/wiki/Collaborators#how-to-apply-for-being-a-collaborator)
-
-## ⌨️ Desarrollo
-
-Utilice Gitpod, un entorno de desarrollo en línea gratuito para GitHub.
-
-[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/ant-design/ant-design)
-
-O clonar localmente:
-
-```bash
-$ git clone git@github.com:ant-design/ant-design.git
-$ cd ant-design
-$ npm install
-$ npm start
-```
-
-Abra su navegador y visite http://127.0.0.1:8001 , vea más en [Desarollo](https://github.com/ant-design/ant-design/wiki/Development).
-
-## 🤝 Contribuyendo [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
-
-Lea nuestro [guía de contribución](https://ant.design/docs/react/contributing) y construyamos un mejor antd juntos.
-
-Damos la bienvenida a todas las contribuciones. Por favor lea nuestro[CONTRIBUTING.md](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md) primero. Puede enviar ideas como [solicitudes de extracción](https://github.com/ant-design/ant-design/pulls) o como [problemas de GitHub](https://github.com/ant-design/ant-design/issues). Si desea mejorar el código, consulte las [Instrucciones de Desarrollo](https://github.com/ant-design/ant-design/wiki/Development) y ¡diviértase! :)
-
-Si usted es un colaborador, siga nuestro [principio de solicitud de extracción](https://github.com/ant-design/ant-design/wiki/PR-principle) para crear una solicitud de extracción con una [plantilla de colaborador](https://github.com/ant-design/ant-design/compare?expand=1&template=collaborator.md).
-
-[![Let's fund issues in this repository](https://issuehunt.io/static/embed/issuehunt-button-v1.svg)](https://issuehunt.io/repos/34526884)
-
-## ❤️ Patrocinadores [![](https://opencollective.com/ant-design/tiers/sponsors/badge.svg?label=Sponsors&color=brightgreen)](https://opencollective.com/ant-design#support) [![](https://opencollective.com/ant-design/tiers/backers/badge.svg?label=Backers&color=brightgreen)](https://opencollective.com/ant-design#support)
-
-[![](https://opencollective.com/ant-design/tiers/sponsors.svg?avatarHeight=36)](https://opencollective.com/ant-design#support)
-
-[![](https://opencollective.com/ant-design/tiers/backers.svg?avatarHeight=36)](https://opencollective.com/ant-design#support)
diff --git a/README-uk_UA.md b/README-uk_UA.md
deleted file mode 100644
index fccd2a1f1a48..000000000000
--- a/README-uk_UA.md
+++ /dev/null
@@ -1,155 +0,0 @@
-<p align="center">
-  <a href="https://ant.design">
-    <img width="200" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg">
-  </a>
-</p>
-
-<h1 align="center">Ant Design</h1>
-
-<div align="center">
-
-Мова інтерфейсу корпоративного класу та React UI бібліотека.
-
-[![CI status][github-action-image]][github-action-url] [![codecov][codecov-image]][codecov-url] [![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url]
-
-[![][bundlephobia-image]][bundlephobia-url] [![][bundlesize-js-image]][unpkg-js-url] [![FOSSA Status][fossa-image]][fossa-url]
-
-[![Follow Twitter][twitter-image]][twitter-url] [![Renovate status][renovate-image]][renovate-dashboard-url] [![][issues-helper-image]][issues-helper-url] [![dumi][dumi-image]][dumi-url] [![Issues need help][help-wanted-image]][help-wanted-url]
-
-[npm-image]: http://img.shields.io/npm/v/antd.svg?style=flat-square
-[npm-url]: http://npmjs.org/package/antd
-[github-action-image]: https://github.com/ant-design/ant-design/workflows/%E2%9C%85%20test/badge.svg
-[github-action-url]: https://github.com/ant-design/ant-design/actions?query=workflow%3A%22%E2%9C%85+test%22
-[codecov-image]: https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square
-[codecov-url]: https://codecov.io/gh/ant-design/ant-design/branch/master
-[download-image]: https://img.shields.io/npm/dm/antd.svg?style=flat-square
-[download-url]: https://npmjs.org/package/antd
-[fossa-image]: https://app.fossa.io/api/projects/git%2Bgithub.com%2Fant-design%2Fant-design.svg?type=shield
-[fossa-url]: https://app.fossa.io/projects/git%2Bgithub.com%2Fant-design%2Fant-design?ref=badge_shield
-[help-wanted-image]: https://flat.badgen.net/github/label-issues/ant-design/ant-design/help%20wanted/open
-[help-wanted-url]: https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22
-[twitter-image]: https://img.shields.io/twitter/follow/AntDesignUI.svg?label=Ant%20Design
-[twitter-url]: https://twitter.com/AntDesignUI
-[bundlesize-js-image]: https://img.badgesize.io/https:/unpkg.com/antd/dist/antd.min.js?label=antd.min.js&compression=gzip&style=flat-square
-[unpkg-js-url]: https://unpkg.com/browse/antd/dist/antd.min.js
-[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/antd?style=flat-square
-[bundlephobia-url]: https://bundlephobia.com/package/antd
-[issues-helper-image]: https://img.shields.io/badge/using-issues--helper-orange?style=flat-square
-[issues-helper-url]: https://github.com/actions-cool/issues-helper
-[renovate-image]: https://img.shields.io/badge/renovate-enabled-brightgreen.svg?style=flat-square
-[renovate-dashboard-url]: https://github.com/ant-design/ant-design/issues/32498
-[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square
-[dumi-url]: https://github.com/umijs/dumi
-
-</div>
-
-[![](https://user-images.githubusercontent.com/507615/209472919-6f7e8561-be8c-4b0b-9976-eb3c692aa20a.png)](https://ant.design)
-
-[English](./README.md) | [Português](./README-pt_BR.md) | [简体中文](./README-zh_CN.md) | Українською | [Spanish](./README-sp_MX.md) | [日本語](./README-ja_JP.md) | [العربية](./README-ar_EG.md)
-
-## ✨ Особливості
-
-- 🌈 UI корпоративного класу, призначений для веб-додатків.
-- 📦 Набір високоякісних компонентів React з коробки.
-- 🛡 Написано на TypeScript із вбудованими статичними типами.
-- ⚙️ Весь пакет дизайнерських ресурсів та засобів розробки.
-- 🌍 Підтримка інтернаціоналізації для десятків мов.
-- 🎨 Потужне налаштування теми в кожній деталі.
-
-## 🖥 Підтримка навколишнього середовища
-
-- Сучасні браузери
-- Рендеринг на стороні сервера (SSR)
-- [Electron](https://www.electronjs.org/)
-
-| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Electron |
-| --- | --- | --- | --- | --- |
-| Edge | 2 останні версії | 2 останні версії | 2 останні версії | 2 останні версії |
-
-## 📦 Встановлення
-
-```bash
-npm install antd
-```
-
-```bash
-yarn add antd
-```
-
-## 🔨 Використання
-
-```jsx
-import React from 'react';
-import { Button, DatePicker } from 'antd';
-
-const App = () => (
-  <>
-    <Button type="primary">PRESS ME</Button>
-    <DatePicker placeholder="select date" />
-  </>
-);
-```
-
-### TypeScript
-
-`antd` написано на TypeScript із повною типізацією, вибери [Використання у TypeScript](https://ant.design/docs/react/use-in-typescript) щоб розпочати.
-
-## 🌍 Інтернаціоналізація
-
-Десятки мов підтримуються в `antd`, дивись [i18n](https://ant.design/docs/react/i18n).
-
-## 🔗 Посилання
-
-- [Домашня сторінка](https://ant.design/)
-- [Компоненти](https://ant.design/components/overview)
-- [Ant Design Pro](http://pro.ant.design/)
-- [Change Log](CHANGELOG.en-US.md)
-- [rc-components](http://react-component.github.io/)
-- [Mobile UI](http://mobile.ant.design)
-- [Mini Program UI](http://mini.ant.design)
-- [Ant Design Pro Components](https://procomponents.ant.design)
-- [Ant Design Charts](https://charts.ant.design)
-- [Ant Design Icons](https://github.com/ant-design/ant-design-icons)
-- [Ant Design Colors](https://github.com/ant-design/ant-design-colors)
-- [Лендінги](https://landing.ant.design)
-- [Motion](https://motion.ant.design)
-- [Scaffold Market](http://scaffold.ant.design)
-- [Інструкція розробника](https://github.com/ant-design/ant-design/wiki/Development)
-- [Примітка до випуску версій](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
-- [FAQ](https://ant.design/docs/react/faq)
-- [CodeSandbox темплейт](https://u.ant.design/codesandbox-repro) для звітів про помилки
-- [Кастомізація теми](https://ant.design/docs/react/customize-theme)
-- [Як подати заявку на участь у програмі Співавторства](https://github.com/ant-design/ant-design/wiki/Collaborators#how-to-apply-for-being-a-collaborator)
-
-## ⌨️ Розробка
-
-Використовуй Gitpod, безкоштовне середовище розробки для GitHub.
-
-[![Відкрити у Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/ant-design/ant-design)
-
-Або клонуй локально:
-
-```bash
-$ git clone git@github.com:ant-design/ant-design.git
-$ cd ant-design
-$ npm install
-$ npm start
-```
-
-Відкрий у браузері http://127.0.0.1:8001, докладніше дивись [Розробка](https://github.com/ant-design/ant-design/wiki/Development).
-
-## 🤝 Контрибьютинг [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
-
-Прочитай наш [посібник контриб'ютора](https://ant.design/docs/react/contributing) і давай будувати кращий antd разом.
-
-Ми вітаємо всі внески. Будь ласка, прочитай наш [CONTRIBUTING.md](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md) спочатку. Ти можеш пропонувати будь-які ідеї як [Pull Request](https://github.com/ant-design/ant-design/pulls) або як [GitHub issues](https://github.com/ant-design/ant-design/issues). Якщо ти хочеш вдосконалити код, переглянь [Інструкції з розробки](https://github.com/ant-design/ant-design/wiki/Development) та добре проведи час! :)
-
-Якщо ти співавтор, дотримуйся нашого [Pull Request принципу](https://github.com/ant-design/ant-design/wiki/PR-principle) щоб створити Pull Request за [темплейтом співавтора](https://github.com/ant-design/ant-design/compare?expand=1&template=collaborator.md).
-
-[![Let's fund issues in this repository](https://issuehunt.io/static/embed/issuehunt-button-v1.svg)](https://issuehunt.io/repos/34526884)
-
-## ❤️ Спонсори та Меценати [![](https://opencollective.com/ant-design/tiers/sponsors/badge.svg?label=Sponsors&color=brightgreen)](https://opencollective.com/ant-design#support) [![](https://opencollective.com/ant-design/tiers/backers/badge.svg?label=Backers&color=brightgreen)](https://opencollective.com/ant-design#support)
-
-[![](https://opencollective.com/ant-design/tiers/sponsors.svg?avatarHeight=36)](https://opencollective.com/ant-design#support)
-
-[![](https://opencollective.com/ant-design/tiers/backers.svg?avatarHeight=36)](https://opencollective.com/ant-design#support)
diff --git a/README-zh_CN.md b/README-zh_CN.md
index 1f822316defe..71c26a3921a6 100644
--- a/README-zh_CN.md
+++ b/README-zh_CN.md
@@ -12,7 +12,7 @@
 
 [![CI status][github-action-image]][github-action-url] [![codecov][codecov-image]][codecov-url] [![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url]
 
-[![][bundlephobia-image]][bundlephobia-url] [![][bundlesize-js-image]][unpkg-js-url] [![FOSSA Status][fossa-image]][fossa-url]
+[![][bundlephobia-image]][bundlephobia-url] [![][bundlesize-js-image]][unpkg-js-url] [![FOSSA Status][fossa-image]][fossa-url] [![Covered by Argos Visual Testing][argos-ci-image]][argos-ci-url]
 
 [![Follow Twitter][twitter-image]][twitter-url] [![Renovate status][renovate-image]][renovate-dashboard-url] [![][issues-helper-image]][issues-helper-url] [![dumi][dumi-image]][dumi-url] [![Issues need help][help-wanted-image]][help-wanted-url]
 
@@ -40,12 +40,14 @@
 [renovate-dashboard-url]: https://github.com/ant-design/ant-design/issues/32498
 [dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square
 [dumi-url]: https://github.com/umijs/dumi
+[argos-ci-image]: https://argos-ci.com/badge.svg
+[argos-ci-url]: https://app.argos-ci.com/ant-design/ant-design/reference
 
 </div>
 
 [![](https://user-images.githubusercontent.com/507615/209472919-6f7e8561-be8c-4b0b-9976-eb3c692aa20a.png)](https://ant.design)
 
-[English](./README.md) | [Português](./README-pt_BR.md) | 简体中文 | [Українською](./README-uk_UA.md) | [Spanish](./README-sp_MX.md) | [日本語](./README-ja_JP.md) | [العربية](./README-ar_EG.md)
+[English](./README.md) | 中文
 
 ## ✨ 特性
 
@@ -150,7 +152,7 @@ $ npm start
 
 > 强烈推荐阅读 [《提问的智慧》](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way)、[《如何向开源社区提问题》](https://github.com/seajs/seajs/issues/545) 和 [《如何有效地报告 Bug》](http://www.chiark.greenend.org.uk/%7Esgtatham/bugs-cn.html)、[《如何向开源项目提交无法解答的问题》](https://zhuanlan.zhihu.com/p/25795393)，更好的问题更容易获得帮助。
 
-[![Let's fund issues in this repository](https://issuehunt.io/static/embed/issuehunt-button-v1.svg)](https://issuehunt.io/repos/34526884)
+[![赞助链接](https://raw.githubusercontent.com/BoostIO/issuehunt-materials/master/v1/issuehunt-button-v1.svg)](https://issuehunt.io/repos/34526884)
 
 ## 👥 社区互助
 
diff --git a/README.md b/README.md
index a7fc1da34977..954eb3e7d830 100644
--- a/README.md
+++ b/README.md
@@ -47,7 +47,7 @@ An enterprise-class UI design language and React UI library.
 
 [![](https://user-images.githubusercontent.com/507615/209472919-6f7e8561-be8c-4b0b-9976-eb3c692aa20a.png)](https://ant.design)
 
-English | [Português](./README-pt_BR.md) | [简体中文](./README-zh_CN.md) | [Українською](./README-uk_UA.md) | [Spanish](./README-sp_MX.md) | [日本語](./README-ja_JP.md) | [العربية](./README-ar_EG.md)
+English | [中文](./README-zh_CN.md)
 
 ## ✨ Features
 
@@ -148,7 +148,7 @@ We welcome all contributions. Please read our [CONTRIBUTING.md](https://github.c
 
 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).
 
-[![Let's fund issues in this repository](https://issuehunt.io/static/embed/issuehunt-button-v1.svg)](https://issuehunt.io/repos/34526884)
+[![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)
 
 ## ❤️ Sponsors and Backers [![](https://opencollective.com/ant-design/tiers/sponsors/badge.svg?label=Sponsors&color=brightgreen)](https://opencollective.com/ant-design#support) [![](https://opencollective.com/ant-design/tiers/backers/badge.svg?label=Backers&color=brightgreen)](https://opencollective.com/ant-design#support)
 
diff --git a/rome.json b/biome.json
similarity index 80%
rename from rome.json
rename to biome.json
index 618edc3e25f1..9bf6ce31fdd1 100644
--- a/rome.json
+++ b/biome.json
@@ -1,4 +1,5 @@
 {
+  "$schema": "https://biomejs.dev/schemas/1.0.0/schema.json",
   "formatter": {
     "enabled": true,
     "ignore": ["./dist/*", "./es/**/*", "./lib/**/*", "_site/**/*"],
diff --git a/components/_util/ActionButton.tsx b/components/_util/ActionButton.tsx
index aed3cd743997..18552030c216 100644
--- a/components/_util/ActionButton.tsx
+++ b/components/_util/ActionButton.tsx
@@ -48,7 +48,7 @@ const ActionButton: React.FC<ActionButtonProps> = (props) => {
   };
 
   React.useEffect(() => {
-    let timeoutId: NodeJS.Timer | null = null;
+    let timeoutId: ReturnType<typeof setTimeout> | null = null;
     if (autoFocus) {
       timeoutId = setTimeout(() => {
         buttonRef.current?.focus();
diff --git a/components/affix/index.tsx b/components/affix/index.tsx
index 9f60cdf6661b..af3c9e3f54c0 100644
--- a/components/affix/index.tsx
+++ b/components/affix/index.tsx
@@ -1,9 +1,11 @@
 'use client';
 
+import React, { createRef, forwardRef, useContext } from 'react';
+
 import classNames from 'classnames';
 import ResizeObserver from 'rc-resize-observer';
 import omit from 'rc-util/lib/omit';
-import React, { createRef, forwardRef, useContext } from 'react';
+
 import throttleByAnimationFrame from '../_util/throttleByAnimationFrame';
 import type { ConfigConsumerProps } from '../config-provider';
 import { ConfigContext } from '../config-provider';
@@ -71,7 +73,7 @@ class InternalAffix extends React.Component<InternalAffixProps, AffixState> {
 
   private fixedNodeRef = createRef<HTMLDivElement>();
 
-  private timer: NodeJS.Timeout | null;
+  private timer: ReturnType<typeof setTimeout> | null;
 
   context: ConfigConsumerProps;
 
diff --git a/components/anchor/index.zh-CN.md b/components/anchor/index.zh-CN.md
index fc988e824e4c..5745c52bb40b 100644
--- a/components/anchor/index.zh-CN.md
+++ b/components/anchor/index.zh-CN.md
@@ -76,6 +76,6 @@ group:
 | target | 该属性指定在何处显示链接的资源 | string    | -      |      |
 | title  | 文字内容                       | ReactNode | -      |      |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Anchor"></ComponentTokenTable>
diff --git a/components/app/__tests__/index.test.tsx b/components/app/__tests__/index.test.tsx
index 7cfccbdc93e5..c67fed6ce686 100644
--- a/components/app/__tests__/index.test.tsx
+++ b/components/app/__tests__/index.test.tsx
@@ -1,3 +1,4 @@
+import { SmileOutlined } from '@ant-design/icons';
 import React, { useEffect } from 'react';
 import type { NotificationConfig } from 'antd/es/notification/interface';
 import App from '..';
@@ -181,4 +182,30 @@ describe('App', () => {
     );
     expect(container.querySelector<HTMLDivElement>('.ant-app')).toHaveStyle('color: blue;');
   });
+
+  // https://github.com/ant-design/ant-design/issues/41197#issuecomment-1465803061
+  describe('restIcon style', () => {
+    beforeEach(() => {
+      Array.from(document.querySelectorAll('style')).forEach((style) => {
+        style.parentNode?.removeChild(style);
+      });
+    });
+
+    it('should work by default', () => {
+      const { container } = render(
+        <App>
+          <SmileOutlined />
+        </App>,
+      );
+
+      expect(container.querySelector('.anticon')).toBeTruthy();
+      const dynamicStyles = Array.from(document.querySelectorAll('style[data-css-hash]'));
+      expect(
+        dynamicStyles.some((style) => {
+          const { innerHTML } = style;
+          return innerHTML.startsWith('.anticon');
+        }),
+      ).toBeTruthy();
+    });
+  });
 });
diff --git a/components/app/index.zh-CN.md b/components/app/index.zh-CN.md
index 2be00c5bd562..7d6ee0c9704f 100644
--- a/components/app/index.zh-CN.md
+++ b/components/app/index.zh-CN.md
@@ -30,8 +30,8 @@ tag: New
 App 组件通过 `Context` 提供上下文方法调用，因而 useApp 需要作为子组件才能使用，我们推荐在应用中顶层包裹 App。
 
 ```tsx
-import { App } from 'antd';
 import React from 'react';
+import { App } from 'antd';
 
 const MyPage: React.FC = () => {
   const { message, notification, modal } = App.useApp();
@@ -103,8 +103,9 @@ export { message, notification, modal };
 
 ```tsx
 // sub page
-import { Button, Space } from 'antd';
 import React from 'react';
+import { Button, Space } from 'antd';
+
 import { message } from './store';
 
 export default () => {
@@ -133,6 +134,6 @@ export default () => {
 | message | App 内 Message 的全局配置 | [MessageConfig](/components/message-cn/#messageconfig) | - | 5.3.0 |
 | notification | App 内 Notification 的全局配置 | [NotificationConfig](/components/notification-cn/#notificationconfig) | - | 5.3.0 |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="App"></ComponentTokenTable>
diff --git a/components/auto-complete/index.zh-CN.md b/components/auto-complete/index.zh-CN.md
index 7c358bc32f81..edd2df6dd9e4 100644
--- a/components/auto-complete/index.zh-CN.md
+++ b/components/auto-complete/index.zh-CN.md
@@ -79,7 +79,7 @@ demo:
 | blur()  | 移除焦点 |      |
 | focus() | 获取焦点 |      |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Select"></ComponentTokenTable>
 
diff --git a/components/avatar/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/avatar/__tests__/__snapshots__/demo-extend.test.ts.snap
index a0f571456c6a..e59a79d34005 100644
--- a/components/avatar/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/avatar/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -39,16 +39,18 @@ exports[`renders components/avatar/demo/badge.tsx extend context correctly 1`] =
         data-show="true"
         title="1"
       >
-        <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
-        >
+        <bdi>
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition: none;"
           >
-            1
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              1
+            </span>
           </span>
-        </span>
+        </bdi>
       </sup>
     </span>
   </div>
@@ -531,16 +533,18 @@ Array [
           data-show="true"
           title="1"
         >
-          <span
-            class="ant-scroll-number-only"
-            style="transition: none;"
-          >
+          <bdi>
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition: none;"
             >
-              1
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                1
+              </span>
             </span>
-          </span>
+          </bdi>
         </sup>
       </span>
     </div>
diff --git a/components/avatar/__tests__/__snapshots__/demo.test.tsx.snap b/components/avatar/__tests__/__snapshots__/demo.test.tsx.snap
index 6f87ea0a1eb5..9c10e9e3a429 100644
--- a/components/avatar/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/avatar/__tests__/__snapshots__/demo.test.tsx.snap
@@ -39,16 +39,18 @@ exports[`renders components/avatar/demo/badge.tsx correctly 1`] = `
         data-show="true"
         title="1"
       >
-        <span
-          class="ant-scroll-number-only"
-          style="transition:none"
-        >
+        <bdi>
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition:none"
           >
-            1
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              1
+            </span>
           </span>
-        </span>
+        </bdi>
       </sup>
     </span>
   </div>
@@ -438,16 +440,18 @@ Array [
           data-show="true"
           title="1"
         >
-          <span
-            class="ant-scroll-number-only"
-            style="transition:none"
-          >
+          <bdi>
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition:none"
             >
-              1
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                1
+              </span>
             </span>
-          </span>
+          </bdi>
         </sup>
       </span>
     </div>
diff --git a/components/avatar/index.zh-CN.md b/components/avatar/index.zh-CN.md
index cf242ff013a9..1424b00085b2 100644
--- a/components/avatar/index.zh-CN.md
+++ b/components/avatar/index.zh-CN.md
@@ -62,6 +62,6 @@ group:
 | size | 设置头像的大小 | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` | 4.8.0 |
 | shape | 设置头像的形状 | `circle` \| `square` | `circle` | 5.8.0 |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Avatar"></ComponentTokenTable>
diff --git a/components/badge/Ribbon.tsx b/components/badge/Ribbon.tsx
index 453c071d0c61..0a4d9b21c3f0 100644
--- a/components/badge/Ribbon.tsx
+++ b/components/badge/Ribbon.tsx
@@ -1,10 +1,11 @@
-import classNames from 'classnames';
 import * as React from 'react';
+import classNames from 'classnames';
+
 import type { PresetColorType } from '../_util/colors';
 import { isPresetColor } from '../_util/colors';
 import type { LiteralUnion } from '../_util/type';
 import { ConfigContext } from '../config-provider';
-import useStyle from './style';
+import useStyle from './style/ribbon';
 
 type RibbonPlacement = 'start' | 'end';
 
diff --git a/components/badge/ScrollNumber.tsx b/components/badge/ScrollNumber.tsx
index a71762ac2c6e..79414bcde678 100644
--- a/components/badge/ScrollNumber.tsx
+++ b/components/badge/ScrollNumber.tsx
@@ -51,15 +51,19 @@ const ScrollNumber = React.forwardRef<HTMLElement, ScrollNumberProps>((props, re
   if (count && Number(count) % 1 === 0) {
     const numberList = String(count).split('');
 
-    numberNodes = numberList.map((num, i) => (
-      <SingleNumber
-        prefixCls={prefixCls}
-        count={Number(count)}
-        value={num}
-        // eslint-disable-next-line react/no-array-index-key
-        key={numberList.length - i}
-      />
-    ));
+    numberNodes = (
+      <bdi>
+        {numberList.map((num, i) => (
+          <SingleNumber
+            prefixCls={prefixCls}
+            count={Number(count)}
+            value={num}
+            // eslint-disable-next-line react/no-array-index-key
+            key={numberList.length - i}
+          />
+        ))}
+      </bdi>
+    );
   }
 
   // allow specify the border
diff --git a/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap
index 4d00eec5cdd2..698b1c57b2bc 100644
--- a/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -24,16 +24,18 @@ exports[`renders components/badge/demo/basic.tsx extend context correctly 1`] =
         data-show="true"
         title="5"
       >
-        <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
-        >
+        <bdi>
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition: none;"
           >
-            5
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              5
+            </span>
           </span>
-        </span>
+        </bdi>
       </sup>
     </span>
   </div>
@@ -136,16 +138,18 @@ exports[`renders components/badge/demo/change.tsx extend context correctly 1`] =
             data-show="true"
             title="5"
           >
-            <span
-              class="ant-scroll-number-only"
-              style="transition: none;"
-            >
+            <bdi>
               <span
-                class="ant-scroll-number-only-unit current"
+                class="ant-scroll-number-only"
+                style="transition: none;"
               >
-                5
+                <span
+                  class="ant-scroll-number-only-unit current"
+                >
+                  5
+                </span>
               </span>
-            </span>
+            </bdi>
           </sup>
         </span>
       </div>
@@ -204,14 +208,11 @@ exports[`renders components/badge/demo/change.tsx extend context correctly 1`] =
                   viewBox="64 64 896 896"
                   width="1em"
                 >
-                  <defs>
-                    <style />
-                  </defs>
                   <path
                     d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
                   />
                   <path
-                    d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+                    d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
                   />
                 </svg>
               </span>
@@ -655,26 +656,28 @@ Array [
           data-show="true"
           title="44"
         >
-          <span
-            class="ant-scroll-number-only"
-            style="transition: none;"
-          >
+          <bdi>
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition: none;"
             >
-              4
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                4
+              </span>
             </span>
-          </span>
-          <span
-            class="ant-scroll-number-only"
-            style="transition: none;"
-          >
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition: none;"
             >
-              4
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                4
+              </span>
             </span>
-          </span>
+          </bdi>
         </sup>
       </span>
     </div>
@@ -695,26 +698,28 @@ Array [
           data-show="true"
           title="44"
         >
-          <span
-            class="ant-scroll-number-only"
-            style="transition: none;"
-          >
+          <bdi>
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition: none;"
             >
-              4
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                4
+              </span>
             </span>
-          </span>
-          <span
-            class="ant-scroll-number-only"
-            style="transition: none;"
-          >
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition: none;"
             >
-              4
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                4
+              </span>
             </span>
-          </span>
+          </bdi>
         </sup>
       </span>
     </div>
@@ -735,26 +740,28 @@ Array [
           data-show="true"
           title="44"
         >
-          <span
-            class="ant-scroll-number-only"
-            style="transition: none;"
-          >
+          <bdi>
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition: none;"
             >
-              4
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                4
+              </span>
             </span>
-          </span>
-          <span
-            class="ant-scroll-number-only"
-            style="transition: none;"
-          >
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition: none;"
             >
-              4
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                4
+              </span>
             </span>
-          </span>
+          </bdi>
         </sup>
       </span>
     </div>
@@ -775,26 +782,28 @@ Array [
           data-show="true"
           title="44"
         >
-          <span
-            class="ant-scroll-number-only"
-            style="transition: none;"
-          >
+          <bdi>
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition: none;"
             >
-              4
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                4
+              </span>
             </span>
-          </span>
-          <span
-            class="ant-scroll-number-only"
-            style="transition: none;"
-          >
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition: none;"
             >
-              4
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                4
+              </span>
             </span>
-          </span>
+          </bdi>
         </sup>
       </span>
     </div>
@@ -815,26 +824,28 @@ Array [
           data-show="true"
           title="44"
         >
-          <span
-            class="ant-scroll-number-only"
-            style="transition: none;"
-          >
+          <bdi>
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition: none;"
             >
-              4
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                4
+              </span>
             </span>
-          </span>
-          <span
-            class="ant-scroll-number-only"
-            style="transition: none;"
-          >
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition: none;"
             >
-              4
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                4
+              </span>
             </span>
-          </span>
+          </bdi>
         </sup>
       </span>
     </div>
@@ -855,26 +866,28 @@ Array [
           data-show="true"
           title="44"
         >
-          <span
-            class="ant-scroll-number-only"
-            style="transition: none;"
-          >
+          <bdi>
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition: none;"
             >
-              4
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                4
+              </span>
             </span>
-          </span>
-          <span
-            class="ant-scroll-number-only"
-            style="transition: none;"
-          >
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition: none;"
             >
-              4
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                4
+              </span>
             </span>
-          </span>
+          </bdi>
         </sup>
       </span>
     </div>
@@ -895,26 +908,28 @@ Array [
           data-show="true"
           title="44"
         >
-          <span
-            class="ant-scroll-number-only"
-            style="transition: none;"
-          >
+          <bdi>
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition: none;"
             >
-              4
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                4
+              </span>
             </span>
-          </span>
-          <span
-            class="ant-scroll-number-only"
-            style="transition: none;"
-          >
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition: none;"
             >
-              4
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                4
+              </span>
             </span>
-          </span>
+          </bdi>
         </sup>
       </span>
     </div>
@@ -935,26 +950,28 @@ Array [
           data-show="true"
           title="44"
         >
-          <span
-            class="ant-scroll-number-only"
-            style="transition: none;"
-          >
+          <bdi>
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition: none;"
             >
-              4
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                4
+              </span>
             </span>
-          </span>
-          <span
-            class="ant-scroll-number-only"
-            style="transition: none;"
-          >
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition: none;"
             >
-              4
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                4
+              </span>
             </span>
-          </span>
+          </bdi>
         </sup>
       </span>
     </div>
@@ -975,26 +992,28 @@ Array [
           data-show="true"
           title="44"
         >
-          <span
-            class="ant-scroll-number-only"
-            style="transition: none;"
-          >
+          <bdi>
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition: none;"
             >
-              4
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                4
+              </span>
             </span>
-          </span>
-          <span
-            class="ant-scroll-number-only"
-            style="transition: none;"
-          >
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition: none;"
             >
-              4
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                4
+              </span>
             </span>
-          </span>
+          </bdi>
         </sup>
       </span>
     </div>
@@ -1015,26 +1034,28 @@ Array [
           data-show="true"
           title="44"
         >
-          <span
-            class="ant-scroll-number-only"
-            style="transition: none;"
-          >
+          <bdi>
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition: none;"
             >
-              4
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                4
+              </span>
             </span>
-          </span>
-          <span
-            class="ant-scroll-number-only"
-            style="transition: none;"
-          >
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition: none;"
             >
-              4
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                4
+              </span>
             </span>
-          </span>
+          </bdi>
         </sup>
       </span>
     </div>
@@ -1055,26 +1076,28 @@ Array [
           data-show="true"
           title="44"
         >
-          <span
-            class="ant-scroll-number-only"
-            style="transition: none;"
-          >
+          <bdi>
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition: none;"
             >
-              4
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                4
+              </span>
             </span>
-          </span>
-          <span
-            class="ant-scroll-number-only"
-            style="transition: none;"
-          >
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition: none;"
             >
-              4
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                4
+              </span>
             </span>
-          </span>
+          </bdi>
         </sup>
       </span>
     </div>
@@ -1095,26 +1118,28 @@ Array [
           data-show="true"
           title="44"
         >
-          <span
-            class="ant-scroll-number-only"
-            style="transition: none;"
-          >
+          <bdi>
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition: none;"
             >
-              4
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                4
+              </span>
             </span>
-          </span>
-          <span
-            class="ant-scroll-number-only"
-            style="transition: none;"
-          >
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition: none;"
             >
-              4
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                4
+              </span>
             </span>
-          </span>
+          </bdi>
         </sup>
       </span>
     </div>
@@ -1135,26 +1160,28 @@ Array [
           data-show="true"
           title="44"
         >
-          <span
-            class="ant-scroll-number-only"
-            style="transition: none;"
-          >
+          <bdi>
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition: none;"
             >
-              4
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                4
+              </span>
             </span>
-          </span>
-          <span
-            class="ant-scroll-number-only"
-            style="transition: none;"
-          >
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition: none;"
             >
-              4
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                4
+              </span>
             </span>
-          </span>
+          </bdi>
         </sup>
       </span>
     </div>
@@ -1469,16 +1496,18 @@ exports[`renders components/badge/demo/link.tsx extend context correctly 1`] = `
       data-show="true"
       title="5"
     >
-      <span
-        class="ant-scroll-number-only"
-        style="transition: none;"
-      >
+      <bdi>
         <span
-          class="ant-scroll-number-only-unit current"
+          class="ant-scroll-number-only"
+          style="transition: none;"
         >
-          5
+          <span
+            class="ant-scroll-number-only-unit current"
+          >
+            5
+          </span>
         </span>
-      </span>
+      </bdi>
     </sup>
   </span>
 </a>
@@ -1519,16 +1548,18 @@ exports[`renders components/badge/demo/mix.tsx extend context correctly 1`] = `
             data-show="true"
             title="5"
           >
-            <span
-              class="ant-scroll-number-only"
-              style="transition: none;"
-            >
+            <bdi>
               <span
-                class="ant-scroll-number-only-unit current"
+                class="ant-scroll-number-only"
+                style="transition: none;"
               >
-                5
+                <span
+                  class="ant-scroll-number-only-unit current"
+                >
+                  5
+                </span>
               </span>
-            </span>
+            </bdi>
           </sup>
         </span>
       </div>
@@ -1552,16 +1583,18 @@ exports[`renders components/badge/demo/mix.tsx extend context correctly 1`] = `
             data-show="true"
             title="5"
           >
-            <span
-              class="ant-scroll-number-only"
-              style="transition: none;"
-            >
+            <bdi>
               <span
-                class="ant-scroll-number-only-unit current"
+                class="ant-scroll-number-only"
+                style="transition: none;"
               >
-                5
+                <span
+                  class="ant-scroll-number-only-unit current"
+                >
+                  5
+                </span>
               </span>
-            </span>
+            </bdi>
           </sup>
         </span>
       </div>
@@ -1585,16 +1618,18 @@ exports[`renders components/badge/demo/mix.tsx extend context correctly 1`] = `
             data-show="true"
             title="5"
           >
-            <span
-              class="ant-scroll-number-only"
-              style="transition: none;"
-            >
+            <bdi>
               <span
-                class="ant-scroll-number-only-unit current"
+                class="ant-scroll-number-only"
+                style="transition: none;"
               >
-                5
+                <span
+                  class="ant-scroll-number-only-unit current"
+                >
+                  5
+                </span>
               </span>
-            </span>
+            </bdi>
           </sup>
         </span>
       </div>
@@ -1619,16 +1654,18 @@ exports[`renders components/badge/demo/mix.tsx extend context correctly 1`] = `
             style="background: rgb(250, 84, 28);"
             title="5"
           >
-            <span
-              class="ant-scroll-number-only"
-              style="transition: none;"
-            >
+            <bdi>
               <span
-                class="ant-scroll-number-only-unit current"
+                class="ant-scroll-number-only"
+                style="transition: none;"
               >
-                5
+                <span
+                  class="ant-scroll-number-only-unit current"
+                >
+                  5
+                </span>
               </span>
-            </span>
+            </bdi>
           </sup>
         </span>
       </div>
@@ -1894,26 +1931,28 @@ exports[`renders components/badge/demo/no-wrapper.tsx extend context correctly 1
         style="background: rgb(250, 173, 20);"
         title="11"
       >
-        <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
-        >
+        <bdi>
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition: none;"
           >
-            1
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              1
+            </span>
           </span>
-        </span>
-        <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
-        >
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition: none;"
           >
-            1
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              1
+            </span>
           </span>
-        </span>
+        </bdi>
       </sup>
     </span>
   </div>
@@ -1929,26 +1968,28 @@ exports[`renders components/badge/demo/no-wrapper.tsx extend context correctly 1
         data-show="true"
         title="25"
       >
-        <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
-        >
+        <bdi>
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition: none;"
           >
-            2
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              2
+            </span>
           </span>
-        </span>
-        <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
-        >
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition: none;"
           >
-            5
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              5
+            </span>
           </span>
-        </span>
+        </bdi>
       </sup>
     </span>
   </div>
@@ -2023,16 +2064,18 @@ exports[`renders components/badge/demo/offset.tsx extend context correctly 1`] =
     style="margin-top: 10px; right: -10px;"
     title="5"
   >
-    <span
-      class="ant-scroll-number-only"
-      style="transition: none;"
-    >
+    <bdi>
       <span
-        class="ant-scroll-number-only-unit current"
+        class="ant-scroll-number-only"
+        style="transition: none;"
       >
-        5
+        <span
+          class="ant-scroll-number-only-unit current"
+        >
+          5
+        </span>
       </span>
-    </span>
+    </bdi>
   </sup>
 </span>
 `;
@@ -2063,26 +2106,28 @@ exports[`renders components/badge/demo/overflow.tsx extend context correctly 1`]
         data-show="true"
         title="99"
       >
-        <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
-        >
+        <bdi>
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition: none;"
           >
-            9
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              9
+            </span>
           </span>
-        </span>
-        <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
-        >
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition: none;"
           >
-            9
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              9
+            </span>
           </span>
-        </span>
+        </bdi>
       </sup>
     </span>
   </div>
@@ -2704,16 +2749,18 @@ exports[`renders components/badge/demo/size.tsx extend context correctly 1`] = `
         data-show="true"
         title="5"
       >
-        <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
-        >
+        <bdi>
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition: none;"
           >
-            5
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              5
+            </span>
           </span>
-        </span>
+        </bdi>
       </sup>
     </span>
   </div>
@@ -2736,16 +2783,18 @@ exports[`renders components/badge/demo/size.tsx extend context correctly 1`] = `
         data-show="true"
         title="5"
       >
-        <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
-        >
+        <bdi>
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition: none;"
           >
-            5
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              5
+            </span>
           </span>
-        </span>
+        </bdi>
       </sup>
     </span>
   </div>
@@ -2937,16 +2986,18 @@ exports[`renders components/badge/demo/title.tsx extend context correctly 1`] =
         data-show="true"
         title="Custom hover text"
       >
-        <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
-        >
+        <bdi>
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition: none;"
           >
-            5
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              5
+            </span>
           </span>
-        </span>
+        </bdi>
       </sup>
     </span>
   </div>
@@ -2969,26 +3020,28 @@ exports[`renders components/badge/demo/title.tsx extend context correctly 1`] =
         data-show="true"
         title="Negative"
       >
-        <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
-        >
+        <bdi>
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition: none;"
           >
-            -
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              -
+            </span>
           </span>
-        </span>
-        <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
-        >
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition: none;"
           >
-            5
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              5
+            </span>
           </span>
-        </span>
+        </bdi>
       </sup>
     </span>
   </div>
diff --git a/components/badge/__tests__/__snapshots__/demo.test.ts.snap b/components/badge/__tests__/__snapshots__/demo.test.ts.snap
index 337d80134b2d..78af6466ff49 100644
--- a/components/badge/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/badge/__tests__/__snapshots__/demo.test.ts.snap
@@ -24,16 +24,18 @@ exports[`renders components/badge/demo/basic.tsx correctly 1`] = `
         data-show="true"
         title="5"
       >
-        <span
-          class="ant-scroll-number-only"
-          style="transition:none"
-        >
+        <bdi>
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition:none"
           >
-            5
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              5
+            </span>
           </span>
-        </span>
+        </bdi>
       </sup>
     </span>
   </div>
@@ -134,16 +136,18 @@ exports[`renders components/badge/demo/change.tsx correctly 1`] = `
             data-show="true"
             title="5"
           >
-            <span
-              class="ant-scroll-number-only"
-              style="transition:none"
-            >
+            <bdi>
               <span
-                class="ant-scroll-number-only-unit current"
+                class="ant-scroll-number-only"
+                style="transition:none"
               >
-                5
+                <span
+                  class="ant-scroll-number-only-unit current"
+                >
+                  5
+                </span>
               </span>
-            </span>
+            </bdi>
           </sup>
         </span>
       </div>
@@ -202,14 +206,11 @@ exports[`renders components/badge/demo/change.tsx correctly 1`] = `
                   viewBox="64 64 896 896"
                   width="1em"
                 >
-                  <defs>
-                    <style />
-                  </defs>
                   <path
                     d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
                   />
                   <path
-                    d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+                    d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
                   />
                 </svg>
               </span>
@@ -650,26 +651,28 @@ Array [
           data-show="true"
           title="44"
         >
-          <span
-            class="ant-scroll-number-only"
-            style="transition:none"
-          >
+          <bdi>
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition:none"
             >
-              4
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                4
+              </span>
             </span>
-          </span>
-          <span
-            class="ant-scroll-number-only"
-            style="transition:none"
-          >
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition:none"
             >
-              4
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                4
+              </span>
             </span>
-          </span>
+          </bdi>
         </sup>
       </span>
     </div>
@@ -690,26 +693,28 @@ Array [
           data-show="true"
           title="44"
         >
-          <span
-            class="ant-scroll-number-only"
-            style="transition:none"
-          >
+          <bdi>
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition:none"
             >
-              4
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                4
+              </span>
             </span>
-          </span>
-          <span
-            class="ant-scroll-number-only"
-            style="transition:none"
-          >
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition:none"
             >
-              4
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                4
+              </span>
             </span>
-          </span>
+          </bdi>
         </sup>
       </span>
     </div>
@@ -730,26 +735,28 @@ Array [
           data-show="true"
           title="44"
         >
-          <span
-            class="ant-scroll-number-only"
-            style="transition:none"
-          >
+          <bdi>
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition:none"
             >
-              4
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                4
+              </span>
             </span>
-          </span>
-          <span
-            class="ant-scroll-number-only"
-            style="transition:none"
-          >
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition:none"
             >
-              4
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                4
+              </span>
             </span>
-          </span>
+          </bdi>
         </sup>
       </span>
     </div>
@@ -770,26 +777,28 @@ Array [
           data-show="true"
           title="44"
         >
-          <span
-            class="ant-scroll-number-only"
-            style="transition:none"
-          >
+          <bdi>
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition:none"
             >
-              4
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                4
+              </span>
             </span>
-          </span>
-          <span
-            class="ant-scroll-number-only"
-            style="transition:none"
-          >
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition:none"
             >
-              4
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                4
+              </span>
             </span>
-          </span>
+          </bdi>
         </sup>
       </span>
     </div>
@@ -810,26 +819,28 @@ Array [
           data-show="true"
           title="44"
         >
-          <span
-            class="ant-scroll-number-only"
-            style="transition:none"
-          >
+          <bdi>
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition:none"
             >
-              4
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                4
+              </span>
             </span>
-          </span>
-          <span
-            class="ant-scroll-number-only"
-            style="transition:none"
-          >
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition:none"
             >
-              4
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                4
+              </span>
             </span>
-          </span>
+          </bdi>
         </sup>
       </span>
     </div>
@@ -850,26 +861,28 @@ Array [
           data-show="true"
           title="44"
         >
-          <span
-            class="ant-scroll-number-only"
-            style="transition:none"
-          >
+          <bdi>
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition:none"
             >
-              4
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                4
+              </span>
             </span>
-          </span>
-          <span
-            class="ant-scroll-number-only"
-            style="transition:none"
-          >
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition:none"
             >
-              4
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                4
+              </span>
             </span>
-          </span>
+          </bdi>
         </sup>
       </span>
     </div>
@@ -890,26 +903,28 @@ Array [
           data-show="true"
           title="44"
         >
-          <span
-            class="ant-scroll-number-only"
-            style="transition:none"
-          >
+          <bdi>
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition:none"
             >
-              4
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                4
+              </span>
             </span>
-          </span>
-          <span
-            class="ant-scroll-number-only"
-            style="transition:none"
-          >
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition:none"
             >
-              4
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                4
+              </span>
             </span>
-          </span>
+          </bdi>
         </sup>
       </span>
     </div>
@@ -930,26 +945,28 @@ Array [
           data-show="true"
           title="44"
         >
-          <span
-            class="ant-scroll-number-only"
-            style="transition:none"
-          >
+          <bdi>
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition:none"
             >
-              4
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                4
+              </span>
             </span>
-          </span>
-          <span
-            class="ant-scroll-number-only"
-            style="transition:none"
-          >
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition:none"
             >
-              4
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                4
+              </span>
             </span>
-          </span>
+          </bdi>
         </sup>
       </span>
     </div>
@@ -970,26 +987,28 @@ Array [
           data-show="true"
           title="44"
         >
-          <span
-            class="ant-scroll-number-only"
-            style="transition:none"
-          >
+          <bdi>
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition:none"
             >
-              4
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                4
+              </span>
             </span>
-          </span>
-          <span
-            class="ant-scroll-number-only"
-            style="transition:none"
-          >
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition:none"
             >
-              4
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                4
+              </span>
             </span>
-          </span>
+          </bdi>
         </sup>
       </span>
     </div>
@@ -1010,26 +1029,28 @@ Array [
           data-show="true"
           title="44"
         >
-          <span
-            class="ant-scroll-number-only"
-            style="transition:none"
-          >
+          <bdi>
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition:none"
             >
-              4
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                4
+              </span>
             </span>
-          </span>
-          <span
-            class="ant-scroll-number-only"
-            style="transition:none"
-          >
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition:none"
             >
-              4
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                4
+              </span>
             </span>
-          </span>
+          </bdi>
         </sup>
       </span>
     </div>
@@ -1050,26 +1071,28 @@ Array [
           data-show="true"
           title="44"
         >
-          <span
-            class="ant-scroll-number-only"
-            style="transition:none"
-          >
+          <bdi>
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition:none"
             >
-              4
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                4
+              </span>
             </span>
-          </span>
-          <span
-            class="ant-scroll-number-only"
-            style="transition:none"
-          >
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition:none"
             >
-              4
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                4
+              </span>
             </span>
-          </span>
+          </bdi>
         </sup>
       </span>
     </div>
@@ -1090,26 +1113,28 @@ Array [
           data-show="true"
           title="44"
         >
-          <span
-            class="ant-scroll-number-only"
-            style="transition:none"
-          >
+          <bdi>
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition:none"
             >
-              4
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                4
+              </span>
             </span>
-          </span>
-          <span
-            class="ant-scroll-number-only"
-            style="transition:none"
-          >
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition:none"
             >
-              4
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                4
+              </span>
             </span>
-          </span>
+          </bdi>
         </sup>
       </span>
     </div>
@@ -1130,26 +1155,28 @@ Array [
           data-show="true"
           title="44"
         >
-          <span
-            class="ant-scroll-number-only"
-            style="transition:none"
-          >
+          <bdi>
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition:none"
             >
-              4
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                4
+              </span>
             </span>
-          </span>
-          <span
-            class="ant-scroll-number-only"
-            style="transition:none"
-          >
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition:none"
             >
-              4
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                4
+              </span>
             </span>
-          </span>
+          </bdi>
         </sup>
       </span>
     </div>
@@ -1460,16 +1487,18 @@ exports[`renders components/badge/demo/link.tsx correctly 1`] = `
       data-show="true"
       title="5"
     >
-      <span
-        class="ant-scroll-number-only"
-        style="transition:none"
-      >
+      <bdi>
         <span
-          class="ant-scroll-number-only-unit current"
+          class="ant-scroll-number-only"
+          style="transition:none"
         >
-          5
+          <span
+            class="ant-scroll-number-only-unit current"
+          >
+            5
+          </span>
         </span>
-      </span>
+      </bdi>
     </sup>
   </span>
 </a>
@@ -1508,16 +1537,18 @@ exports[`renders components/badge/demo/mix.tsx correctly 1`] = `
             data-show="true"
             title="5"
           >
-            <span
-              class="ant-scroll-number-only"
-              style="transition:none"
-            >
+            <bdi>
               <span
-                class="ant-scroll-number-only-unit current"
+                class="ant-scroll-number-only"
+                style="transition:none"
               >
-                5
+                <span
+                  class="ant-scroll-number-only-unit current"
+                >
+                  5
+                </span>
               </span>
-            </span>
+            </bdi>
           </sup>
         </span>
       </div>
@@ -1541,16 +1572,18 @@ exports[`renders components/badge/demo/mix.tsx correctly 1`] = `
             data-show="true"
             title="5"
           >
-            <span
-              class="ant-scroll-number-only"
-              style="transition:none"
-            >
+            <bdi>
               <span
-                class="ant-scroll-number-only-unit current"
+                class="ant-scroll-number-only"
+                style="transition:none"
               >
-                5
+                <span
+                  class="ant-scroll-number-only-unit current"
+                >
+                  5
+                </span>
               </span>
-            </span>
+            </bdi>
           </sup>
         </span>
       </div>
@@ -1574,16 +1607,18 @@ exports[`renders components/badge/demo/mix.tsx correctly 1`] = `
             data-show="true"
             title="5"
           >
-            <span
-              class="ant-scroll-number-only"
-              style="transition:none"
-            >
+            <bdi>
               <span
-                class="ant-scroll-number-only-unit current"
+                class="ant-scroll-number-only"
+                style="transition:none"
               >
-                5
+                <span
+                  class="ant-scroll-number-only-unit current"
+                >
+                  5
+                </span>
               </span>
-            </span>
+            </bdi>
           </sup>
         </span>
       </div>
@@ -1608,16 +1643,18 @@ exports[`renders components/badge/demo/mix.tsx correctly 1`] = `
             style="background:#fa541c"
             title="5"
           >
-            <span
-              class="ant-scroll-number-only"
-              style="transition:none"
-            >
+            <bdi>
               <span
-                class="ant-scroll-number-only-unit current"
+                class="ant-scroll-number-only"
+                style="transition:none"
               >
-                5
+                <span
+                  class="ant-scroll-number-only-unit current"
+                >
+                  5
+                </span>
               </span>
-            </span>
+            </bdi>
           </sup>
         </span>
       </div>
@@ -1881,26 +1918,28 @@ exports[`renders components/badge/demo/no-wrapper.tsx correctly 1`] = `
         style="background:#faad14"
         title="11"
       >
-        <span
-          class="ant-scroll-number-only"
-          style="transition:none"
-        >
+        <bdi>
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition:none"
           >
-            1
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              1
+            </span>
           </span>
-        </span>
-        <span
-          class="ant-scroll-number-only"
-          style="transition:none"
-        >
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition:none"
           >
-            1
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              1
+            </span>
           </span>
-        </span>
+        </bdi>
       </sup>
     </span>
   </div>
@@ -1916,26 +1955,28 @@ exports[`renders components/badge/demo/no-wrapper.tsx correctly 1`] = `
         data-show="true"
         title="25"
       >
-        <span
-          class="ant-scroll-number-only"
-          style="transition:none"
-        >
+        <bdi>
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition:none"
           >
-            2
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              2
+            </span>
           </span>
-        </span>
-        <span
-          class="ant-scroll-number-only"
-          style="transition:none"
-        >
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition:none"
           >
-            5
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              5
+            </span>
           </span>
-        </span>
+        </bdi>
       </sup>
     </span>
   </div>
@@ -2008,16 +2049,18 @@ exports[`renders components/badge/demo/offset.tsx correctly 1`] = `
     style="margin-top:10px;right:-10px"
     title="5"
   >
-    <span
-      class="ant-scroll-number-only"
-      style="transition:none"
-    >
+    <bdi>
       <span
-        class="ant-scroll-number-only-unit current"
+        class="ant-scroll-number-only"
+        style="transition:none"
       >
-        5
+        <span
+          class="ant-scroll-number-only-unit current"
+        >
+          5
+        </span>
       </span>
-    </span>
+    </bdi>
   </sup>
 </span>
 `;
@@ -2046,26 +2089,28 @@ exports[`renders components/badge/demo/overflow.tsx correctly 1`] = `
         data-show="true"
         title="99"
       >
-        <span
-          class="ant-scroll-number-only"
-          style="transition:none"
-        >
+        <bdi>
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition:none"
           >
-            9
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              9
+            </span>
           </span>
-        </span>
-        <span
-          class="ant-scroll-number-only"
-          style="transition:none"
-        >
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition:none"
           >
-            9
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              9
+            </span>
           </span>
-        </span>
+        </bdi>
       </sup>
     </span>
   </div>
@@ -2681,16 +2726,18 @@ exports[`renders components/badge/demo/size.tsx correctly 1`] = `
         data-show="true"
         title="5"
       >
-        <span
-          class="ant-scroll-number-only"
-          style="transition:none"
-        >
+        <bdi>
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition:none"
           >
-            5
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              5
+            </span>
           </span>
-        </span>
+        </bdi>
       </sup>
     </span>
   </div>
@@ -2713,16 +2760,18 @@ exports[`renders components/badge/demo/size.tsx correctly 1`] = `
         data-show="true"
         title="5"
       >
-        <span
-          class="ant-scroll-number-only"
-          style="transition:none"
-        >
+        <bdi>
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition:none"
           >
-            5
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              5
+            </span>
           </span>
-        </span>
+        </bdi>
       </sup>
     </span>
   </div>
@@ -2910,16 +2959,18 @@ exports[`renders components/badge/demo/title.tsx correctly 1`] = `
         data-show="true"
         title="Custom hover text"
       >
-        <span
-          class="ant-scroll-number-only"
-          style="transition:none"
-        >
+        <bdi>
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition:none"
           >
-            5
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              5
+            </span>
           </span>
-        </span>
+        </bdi>
       </sup>
     </span>
   </div>
@@ -2942,26 +2993,28 @@ exports[`renders components/badge/demo/title.tsx correctly 1`] = `
         data-show="true"
         title="Negative"
       >
-        <span
-          class="ant-scroll-number-only"
-          style="transition:none"
-        >
+        <bdi>
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition:none"
           >
-            -
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              -
+            </span>
           </span>
-        </span>
-        <span
-          class="ant-scroll-number-only"
-          style="transition:none"
-        >
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition:none"
           >
-            5
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              5
+            </span>
           </span>
-        </span>
+        </bdi>
       </sup>
     </span>
   </div>
diff --git a/components/badge/__tests__/__snapshots__/index.test.tsx.snap b/components/badge/__tests__/__snapshots__/index.test.tsx.snap
index 05ea8ed2e09c..ca44c0f66b97 100644
--- a/components/badge/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/badge/__tests__/__snapshots__/index.test.tsx.snap
@@ -11,16 +11,18 @@ exports[`Badge render Badge status/color when contains children 1`] = `
       data-show="true"
       title="5"
     >
-      <span
-        class="ant-scroll-number-only"
-        style="transition: none;"
-      >
+      <bdi>
         <span
-          class="ant-scroll-number-only-unit current"
+          class="ant-scroll-number-only"
+          style="transition: none;"
         >
-          5
+          <span
+            class="ant-scroll-number-only-unit current"
+          >
+            5
+          </span>
         </span>
-      </span>
+      </bdi>
     </sup>
   </span>
   <span
@@ -32,16 +34,18 @@ exports[`Badge render Badge status/color when contains children 1`] = `
       data-show="true"
       title="5"
     >
-      <span
-        class="ant-scroll-number-only"
-        style="transition: none;"
-      >
+      <bdi>
         <span
-          class="ant-scroll-number-only-unit current"
+          class="ant-scroll-number-only"
+          style="transition: none;"
         >
-          5
+          <span
+            class="ant-scroll-number-only-unit current"
+          >
+            5
+          </span>
         </span>
-      </span>
+      </bdi>
     </sup>
   </span>
   <span
@@ -54,16 +58,18 @@ exports[`Badge render Badge status/color when contains children 1`] = `
       style="background: rgb(0, 136, 204);"
       title="5"
     >
-      <span
-        class="ant-scroll-number-only"
-        style="transition: none;"
-      >
+      <bdi>
         <span
-          class="ant-scroll-number-only-unit current"
+          class="ant-scroll-number-only"
+          style="transition: none;"
         >
-          5
+          <span
+            class="ant-scroll-number-only-unit current"
+          >
+            5
+          </span>
         </span>
-      </span>
+      </bdi>
     </sup>
   </span>
 </div>
@@ -79,36 +85,38 @@ exports[`Badge render correct with negative number 1`] = `
       data-show="true"
       title="-10"
     >
-      <span
-        class="ant-scroll-number-only"
-        style="transition: none;"
-      >
+      <bdi>
         <span
-          class="ant-scroll-number-only-unit current"
+          class="ant-scroll-number-only"
+          style="transition: none;"
         >
-          -
+          <span
+            class="ant-scroll-number-only-unit current"
+          >
+            -
+          </span>
         </span>
-      </span>
-      <span
-        class="ant-scroll-number-only"
-        style="transition: none;"
-      >
         <span
-          class="ant-scroll-number-only-unit current"
+          class="ant-scroll-number-only"
+          style="transition: none;"
         >
-          1
+          <span
+            class="ant-scroll-number-only-unit current"
+          >
+            1
+          </span>
         </span>
-      </span>
-      <span
-        class="ant-scroll-number-only"
-        style="transition: none;"
-      >
         <span
-          class="ant-scroll-number-only-unit current"
+          class="ant-scroll-number-only"
+          style="transition: none;"
         >
-          0
+          <span
+            class="ant-scroll-number-only-unit current"
+          >
+            0
+          </span>
         </span>
-      </span>
+      </bdi>
     </sup>
   </span>
   <span
@@ -119,36 +127,38 @@ exports[`Badge render correct with negative number 1`] = `
       data-show="true"
       title="-10"
     >
-      <span
-        class="ant-scroll-number-only"
-        style="transition: none;"
-      >
+      <bdi>
         <span
-          class="ant-scroll-number-only-unit current"
+          class="ant-scroll-number-only"
+          style="transition: none;"
         >
-          -
+          <span
+            class="ant-scroll-number-only-unit current"
+          >
+            -
+          </span>
         </span>
-      </span>
-      <span
-        class="ant-scroll-number-only"
-        style="transition: none;"
-      >
         <span
-          class="ant-scroll-number-only-unit current"
+          class="ant-scroll-number-only"
+          style="transition: none;"
         >
-          1
+          <span
+            class="ant-scroll-number-only-unit current"
+          >
+            1
+          </span>
         </span>
-      </span>
-      <span
-        class="ant-scroll-number-only"
-        style="transition: none;"
-      >
         <span
-          class="ant-scroll-number-only-unit current"
+          class="ant-scroll-number-only"
+          style="transition: none;"
         >
-          0
+          <span
+            class="ant-scroll-number-only-unit current"
+          >
+            0
+          </span>
         </span>
-      </span>
+      </bdi>
     </sup>
   </span>
 </div>
@@ -176,16 +186,18 @@ exports[`Badge rtl render component should be rendered correctly in RTL directio
     style="margin-top: 10px; left: 10px;"
     title="5"
   >
-    <span
-      class="ant-scroll-number-only"
-      style="transition: none;"
-    >
+    <bdi>
       <span
-        class="ant-scroll-number-only-unit current"
+        class="ant-scroll-number-only"
+        style="transition: none;"
       >
-        5
+        <span
+          class="ant-scroll-number-only-unit current"
+        >
+          5
+        </span>
       </span>
-    </span>
+    </bdi>
   </sup>
 </span>
 `;
@@ -200,16 +212,18 @@ exports[`Badge should be compatible with borderColor style 1`] = `
     style="background-color: rgb(255, 255, 255); color: rgb(153, 153, 153); border-color: #d9d9d9; box-shadow: 0 0 0 1px #d9d9d9 inset;"
     title="4"
   >
-    <span
-      class="ant-scroll-number-only"
-      style="transition: none;"
-    >
+    <bdi>
       <span
-        class="ant-scroll-number-only-unit current"
+        class="ant-scroll-number-only"
+        style="transition: none;"
       >
-        4
+        <span
+          class="ant-scroll-number-only-unit current"
+        >
+          4
+        </span>
       </span>
-    </span>
+    </bdi>
   </sup>
 </span>
 `;
@@ -274,86 +288,88 @@ exports[`Badge should render when count is changed 1`] = `
     data-show="true"
     title="10"
   >
-    <span
-      class="ant-scroll-number-only"
-      style="transition: none;"
-    >
-      <span
-        class="ant-scroll-number-only-unit current"
-      >
-        1
-      </span>
-    </span>
-    <span
-      class="ant-scroll-number-only"
-      style="transform: translateY(-100%);"
-    >
-      <span
-        class="ant-scroll-number-only-unit"
-        style="position: absolute; top: -900%; left: 0px;"
-      >
-        0
-      </span>
+    <bdi>
       <span
-        class="ant-scroll-number-only-unit"
-        style="position: absolute; top: -800%; left: 0px;"
-      >
-        1
-      </span>
-      <span
-        class="ant-scroll-number-only-unit"
-        style="position: absolute; top: -700%; left: 0px;"
-      >
-        2
-      </span>
-      <span
-        class="ant-scroll-number-only-unit"
-        style="position: absolute; top: -600%; left: 0px;"
-      >
-        3
-      </span>
-      <span
-        class="ant-scroll-number-only-unit"
-        style="position: absolute; top: -500%; left: 0px;"
-      >
-        4
-      </span>
-      <span
-        class="ant-scroll-number-only-unit"
-        style="position: absolute; top: -400%; left: 0px;"
-      >
-        5
-      </span>
-      <span
-        class="ant-scroll-number-only-unit"
-        style="position: absolute; top: -300%; left: 0px;"
-      >
-        6
-      </span>
-      <span
-        class="ant-scroll-number-only-unit"
-        style="position: absolute; top: -200%; left: 0px;"
-      >
-        7
-      </span>
-      <span
-        class="ant-scroll-number-only-unit"
-        style="position: absolute; top: -100%; left: 0px;"
-      >
-        8
-      </span>
-      <span
-        class="ant-scroll-number-only-unit current"
+        class="ant-scroll-number-only"
+        style="transition: none;"
       >
-        9
+        <span
+          class="ant-scroll-number-only-unit current"
+        >
+          1
+        </span>
       </span>
       <span
-        class="ant-scroll-number-only-unit"
-        style="position: absolute; top: 100%; left: 0px;"
+        class="ant-scroll-number-only"
+        style="transform: translateY(-100%);"
       >
-        0
+        <span
+          class="ant-scroll-number-only-unit"
+          style="position: absolute; top: -900%; left: 0px;"
+        >
+          0
+        </span>
+        <span
+          class="ant-scroll-number-only-unit"
+          style="position: absolute; top: -800%; left: 0px;"
+        >
+          1
+        </span>
+        <span
+          class="ant-scroll-number-only-unit"
+          style="position: absolute; top: -700%; left: 0px;"
+        >
+          2
+        </span>
+        <span
+          class="ant-scroll-number-only-unit"
+          style="position: absolute; top: -600%; left: 0px;"
+        >
+          3
+        </span>
+        <span
+          class="ant-scroll-number-only-unit"
+          style="position: absolute; top: -500%; left: 0px;"
+        >
+          4
+        </span>
+        <span
+          class="ant-scroll-number-only-unit"
+          style="position: absolute; top: -400%; left: 0px;"
+        >
+          5
+        </span>
+        <span
+          class="ant-scroll-number-only-unit"
+          style="position: absolute; top: -300%; left: 0px;"
+        >
+          6
+        </span>
+        <span
+          class="ant-scroll-number-only-unit"
+          style="position: absolute; top: -200%; left: 0px;"
+        >
+          7
+        </span>
+        <span
+          class="ant-scroll-number-only-unit"
+          style="position: absolute; top: -100%; left: 0px;"
+        >
+          8
+        </span>
+        <span
+          class="ant-scroll-number-only-unit current"
+        >
+          9
+        </span>
+        <span
+          class="ant-scroll-number-only-unit"
+          style="position: absolute; top: 100%; left: 0px;"
+        >
+          0
+        </span>
       </span>
-    </span>
+    </bdi>
   </sup>
 </span>
 `;
@@ -367,86 +383,88 @@ exports[`Badge should render when count is changed 2`] = `
     data-show="true"
     title="11"
   >
-    <span
-      class="ant-scroll-number-only"
-      style="transition: none;"
-    >
-      <span
-        class="ant-scroll-number-only-unit current"
-      >
-        1
-      </span>
-    </span>
-    <span
-      class="ant-scroll-number-only"
-      style="transform: translateY(-100%);"
-    >
-      <span
-        class="ant-scroll-number-only-unit"
-        style="position: absolute; top: -900%; left: 0px;"
-      >
-        1
-      </span>
+    <bdi>
       <span
-        class="ant-scroll-number-only-unit"
-        style="position: absolute; top: -800%; left: 0px;"
-      >
-        2
-      </span>
-      <span
-        class="ant-scroll-number-only-unit"
-        style="position: absolute; top: -700%; left: 0px;"
-      >
-        3
-      </span>
-      <span
-        class="ant-scroll-number-only-unit"
-        style="position: absolute; top: -600%; left: 0px;"
-      >
-        4
-      </span>
-      <span
-        class="ant-scroll-number-only-unit"
-        style="position: absolute; top: -500%; left: 0px;"
-      >
-        5
-      </span>
-      <span
-        class="ant-scroll-number-only-unit"
-        style="position: absolute; top: -400%; left: 0px;"
-      >
-        6
-      </span>
-      <span
-        class="ant-scroll-number-only-unit"
-        style="position: absolute; top: -300%; left: 0px;"
-      >
-        7
-      </span>
-      <span
-        class="ant-scroll-number-only-unit"
-        style="position: absolute; top: -200%; left: 0px;"
-      >
-        8
-      </span>
-      <span
-        class="ant-scroll-number-only-unit"
-        style="position: absolute; top: -100%; left: 0px;"
-      >
-        9
-      </span>
-      <span
-        class="ant-scroll-number-only-unit current"
+        class="ant-scroll-number-only"
+        style="transition: none;"
       >
-        0
+        <span
+          class="ant-scroll-number-only-unit current"
+        >
+          1
+        </span>
       </span>
       <span
-        class="ant-scroll-number-only-unit"
-        style="position: absolute; top: 100%; left: 0px;"
+        class="ant-scroll-number-only"
+        style="transform: translateY(-100%);"
       >
-        1
+        <span
+          class="ant-scroll-number-only-unit"
+          style="position: absolute; top: -900%; left: 0px;"
+        >
+          1
+        </span>
+        <span
+          class="ant-scroll-number-only-unit"
+          style="position: absolute; top: -800%; left: 0px;"
+        >
+          2
+        </span>
+        <span
+          class="ant-scroll-number-only-unit"
+          style="position: absolute; top: -700%; left: 0px;"
+        >
+          3
+        </span>
+        <span
+          class="ant-scroll-number-only-unit"
+          style="position: absolute; top: -600%; left: 0px;"
+        >
+          4
+        </span>
+        <span
+          class="ant-scroll-number-only-unit"
+          style="position: absolute; top: -500%; left: 0px;"
+        >
+          5
+        </span>
+        <span
+          class="ant-scroll-number-only-unit"
+          style="position: absolute; top: -400%; left: 0px;"
+        >
+          6
+        </span>
+        <span
+          class="ant-scroll-number-only-unit"
+          style="position: absolute; top: -300%; left: 0px;"
+        >
+          7
+        </span>
+        <span
+          class="ant-scroll-number-only-unit"
+          style="position: absolute; top: -200%; left: 0px;"
+        >
+          8
+        </span>
+        <span
+          class="ant-scroll-number-only-unit"
+          style="position: absolute; top: -100%; left: 0px;"
+        >
+          9
+        </span>
+        <span
+          class="ant-scroll-number-only-unit current"
+        >
+          0
+        </span>
+        <span
+          class="ant-scroll-number-only-unit"
+          style="position: absolute; top: 100%; left: 0px;"
+        >
+          1
+        </span>
       </span>
-    </span>
+    </bdi>
   </sup>
 </span>
 `;
@@ -460,27 +478,29 @@ exports[`Badge should render when count is changed 3`] = `
     data-show="true"
     title="11"
   >
-    <span
-      class="ant-scroll-number-only"
-      style="transition: none;"
-    >
+    <bdi>
       <span
-        class="ant-scroll-number-only-unit current"
+        class="ant-scroll-number-only"
+        style="transition: none;"
       >
-        1
+        <span
+          class="ant-scroll-number-only-unit current"
+        >
+          1
+        </span>
       </span>
-    </span>
-    <span
-      class="ant-scroll-number-only"
-      style="transition: none;"
-    >
       <span
-        class="ant-scroll-number-only-unit current"
-        style=""
+        class="ant-scroll-number-only"
+        style="transition: none;"
       >
-        1
+        <span
+          class="ant-scroll-number-only-unit current"
+          style=""
+        >
+          1
+        </span>
       </span>
-    </span>
+    </bdi>
   </sup>
 </span>
 `;
@@ -508,26 +528,28 @@ exports[`Badge should render when count is changed 5`] = `
     data-show="true"
     title="10"
   >
-    <span
-      class="ant-scroll-number-only"
-      style="transition: none;"
-    >
+    <bdi>
       <span
-        class="ant-scroll-number-only-unit current"
+        class="ant-scroll-number-only"
+        style="transition: none;"
       >
-        1
+        <span
+          class="ant-scroll-number-only-unit current"
+        >
+          1
+        </span>
       </span>
-    </span>
-    <span
-      class="ant-scroll-number-only"
-      style="transition: none;"
-    >
       <span
-        class="ant-scroll-number-only-unit current"
+        class="ant-scroll-number-only"
+        style="transition: none;"
       >
-        0
+        <span
+          class="ant-scroll-number-only-unit current"
+        >
+          0
+        </span>
       </span>
-    </span>
+    </bdi>
   </sup>
 </span>
 `;
@@ -541,76 +563,78 @@ exports[`Badge should render when count is changed 6`] = `
     data-show="true"
     title="9"
   >
-    <span
-      class="ant-scroll-number-only"
-      style="transform: translateY(100%);"
-    >
-      <span
-        class="ant-scroll-number-only-unit"
-        style="position: absolute; top: -100%; left: 0px;"
-      >
-        9
-      </span>
-      <span
-        class="ant-scroll-number-only-unit current"
-      >
-        0
-      </span>
-      <span
-        class="ant-scroll-number-only-unit"
-        style="position: absolute; top: 100%; left: 0px;"
-      >
-        1
-      </span>
-      <span
-        class="ant-scroll-number-only-unit"
-        style="position: absolute; top: 200%; left: 0px;"
-      >
-        2
-      </span>
-      <span
-        class="ant-scroll-number-only-unit"
-        style="position: absolute; top: 300%; left: 0px;"
-      >
-        3
-      </span>
-      <span
-        class="ant-scroll-number-only-unit"
-        style="position: absolute; top: 400%; left: 0px;"
-      >
-        4
-      </span>
-      <span
-        class="ant-scroll-number-only-unit"
-        style="position: absolute; top: 500%; left: 0px;"
-      >
-        5
-      </span>
-      <span
-        class="ant-scroll-number-only-unit"
-        style="position: absolute; top: 600%; left: 0px;"
-      >
-        6
-      </span>
-      <span
-        class="ant-scroll-number-only-unit"
-        style="position: absolute; top: 700%; left: 0px;"
-      >
-        7
-      </span>
+    <bdi>
       <span
-        class="ant-scroll-number-only-unit"
-        style="position: absolute; top: 800%; left: 0px;"
-      >
-        8
-      </span>
-      <span
-        class="ant-scroll-number-only-unit"
-        style="position: absolute; top: 900%; left: 0px;"
+        class="ant-scroll-number-only"
+        style="transform: translateY(100%);"
       >
-        9
+        <span
+          class="ant-scroll-number-only-unit"
+          style="position: absolute; top: -100%; left: 0px;"
+        >
+          9
+        </span>
+        <span
+          class="ant-scroll-number-only-unit current"
+        >
+          0
+        </span>
+        <span
+          class="ant-scroll-number-only-unit"
+          style="position: absolute; top: 100%; left: 0px;"
+        >
+          1
+        </span>
+        <span
+          class="ant-scroll-number-only-unit"
+          style="position: absolute; top: 200%; left: 0px;"
+        >
+          2
+        </span>
+        <span
+          class="ant-scroll-number-only-unit"
+          style="position: absolute; top: 300%; left: 0px;"
+        >
+          3
+        </span>
+        <span
+          class="ant-scroll-number-only-unit"
+          style="position: absolute; top: 400%; left: 0px;"
+        >
+          4
+        </span>
+        <span
+          class="ant-scroll-number-only-unit"
+          style="position: absolute; top: 500%; left: 0px;"
+        >
+          5
+        </span>
+        <span
+          class="ant-scroll-number-only-unit"
+          style="position: absolute; top: 600%; left: 0px;"
+        >
+          6
+        </span>
+        <span
+          class="ant-scroll-number-only-unit"
+          style="position: absolute; top: 700%; left: 0px;"
+        >
+          7
+        </span>
+        <span
+          class="ant-scroll-number-only-unit"
+          style="position: absolute; top: 800%; left: 0px;"
+        >
+          8
+        </span>
+        <span
+          class="ant-scroll-number-only-unit"
+          style="position: absolute; top: 900%; left: 0px;"
+        >
+          9
+        </span>
       </span>
-    </span>
+    </bdi>
   </sup>
 </span>
 `;
diff --git a/components/badge/index.en-US.md b/components/badge/index.en-US.md
index 253195ffb89b..5602c7926c5b 100644
--- a/components/badge/index.en-US.md
+++ b/components/badge/index.en-US.md
@@ -48,13 +48,13 @@ Common props ref：[Common props](/docs/react/common-props)
 | offset | Set offset of the badge dot | \[number, number] | - |  |
 | overflowCount | Max count to show | number | 99 |  |
 | showZero | Whether to show badge when `count` is zero | boolean | false |  |
-| size | If `count` is set, `size` sets the size of badge | `default` \| `small` | - | 4.6.0 |
+| size | If `count` is set, `size` sets the size of badge | `default` \| `small` | - | - |
 | status | Set Badge as a status dot | `success` \| `processing` \| `default` \| `error` \| `warning` | - |  |
 | styles | Semantic DOM style | Record<SemanticDOM, CSSProperties> | - | 5.7.0 |
 | text | If `status` is set, `text` sets the display text of the status `dot` | ReactNode | - |  |
 | title | Text to show when hovering over the badge | string | - |  |
 
-### Badge.Ribbon (4.5.0+)
+### Badge.Ribbon
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
diff --git a/components/badge/index.zh-CN.md b/components/badge/index.zh-CN.md
index 83640d7aa28a..29b6014c4b12 100644
--- a/components/badge/index.zh-CN.md
+++ b/components/badge/index.zh-CN.md
@@ -49,13 +49,13 @@ group: 数据展示
 | offset | 设置状态点的位置偏移 | \[number, number] | - |  |
 | overflowCount | 展示封顶的数字值 | number | 99 |  |
 | showZero | 当数值为 0 时，是否展示 Badge | boolean | false |  |
-| size | 在设置了 `count` 的前提下有效，设置小圆点的大小 | `default` \| `small` | - | 4.6.0 |
+| size | 在设置了 `count` 的前提下有效，设置小圆点的大小 | `default` \| `small` | - | - |
 | status | 设置 Badge 为状态点 | `success` \| `processing` \| `default` \| `error` \| `warning` | - |  |
 | styles | 语义化结构 style | Record<SemanticDOM, CSSProperties> | - | 5.7.0 |
 | text | 在设置了 `status` 的前提下有效，设置状态点的文本 | ReactNode | - |  |
 | title | 设置鼠标放在状态点上时显示的文字 | string | - |  |
 
-### Badge.Ribbon (4.5.0+)
+### Badge.Ribbon
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
@@ -70,6 +70,6 @@ group: 数据展示
 | root      | 设置根元素   | 5.7.0 |
 | indicator | 设置徽标元素 | 5.7.0 |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Badge"></ComponentTokenTable>
diff --git a/components/badge/style/index.ts b/components/badge/style/index.ts
index 44b0cbdf18c2..5d8ed9de3e3c 100644
--- a/components/badge/style/index.ts
+++ b/components/badge/style/index.ts
@@ -1,10 +1,12 @@
 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, genPresetColor, mergeToken } from '../../theme/internal';
+import type { GenStyleFn } from '../../theme/util/genComponentStyleHook';
 
-interface BadgeToken extends FullToken<'Badge'> {
+export interface BadgeToken extends FullToken<'Badge'> {
   badgeFontHeight: number;
   badgeZIndex: number | string;
   badgeHeight: number;
@@ -61,17 +63,13 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO
     componentCls,
     iconCls,
     antCls,
-    badgeFontHeight,
     badgeShadowSize,
     badgeHeightSm,
     motionDurationSlow,
     badgeStatusSize,
     marginXS,
-    badgeRibbonOffset,
   } = token;
   const numberPrefixCls = `${antCls}-scroll-number`;
-  const ribbonPrefixCls = `${antCls}-ribbon`;
-  const ribbonWrapperPrefixCls = `${antCls}-ribbon-wrapper`;
 
   const colorPreset = genPresetColor(token, (colorKey, { darkColor }) => ({
     [`&${componentCls} ${componentCls}-color-${colorKey}`]: {
@@ -82,13 +80,6 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO
     },
   }));
 
-  const statusRibbonPreset = genPresetColor(token, (colorKey, { darkColor }) => ({
-    [`&${ribbonPrefixCls}-color-${colorKey}`]: {
-      background: darkColor,
-      color: darkColor,
-    },
-  }));
-
   return {
     [componentCls]: {
       ...resetComponent(token),
@@ -133,6 +124,10 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO
 
       [`${componentCls}-multiple-words`]: {
         padding: `0 ${token.paddingXS}px`,
+
+        bdi: {
+          unicodeBidi: 'plaintext',
+        },
       },
 
       [`${componentCls}-dot`]: {
@@ -282,59 +277,11 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO
         },
       },
     },
-    [`${ribbonWrapperPrefixCls}`]: { position: 'relative' },
-    [`${ribbonPrefixCls}`]: {
-      ...resetComponent(token),
-      position: 'absolute',
-      top: marginXS,
-      padding: `0 ${token.paddingXS}px`,
-      color: token.colorPrimary,
-      lineHeight: `${badgeFontHeight}px`,
-      whiteSpace: 'nowrap',
-      backgroundColor: token.colorPrimary,
-      borderRadius: token.borderRadiusSM,
-      [`${ribbonPrefixCls}-text`]: { color: token.colorTextLightSolid },
-      [`${ribbonPrefixCls}-corner`]: {
-        position: 'absolute',
-        top: '100%',
-        width: badgeRibbonOffset,
-        height: badgeRibbonOffset,
-        color: 'currentcolor',
-        border: `${badgeRibbonOffset / 2}px solid`,
-        transform: token.badgeRibbonCornerTransform,
-        transformOrigin: 'top',
-        filter: token.badgeRibbonCornerFilter,
-      },
-      ...statusRibbonPreset,
-      [`&${ribbonPrefixCls}-placement-end`]: {
-        insetInlineEnd: -badgeRibbonOffset,
-        borderEndEndRadius: 0,
-        [`${ribbonPrefixCls}-corner`]: {
-          insetInlineEnd: 0,
-          borderInlineEndColor: 'transparent',
-          borderBlockEndColor: 'transparent',
-        },
-      },
-      [`&${ribbonPrefixCls}-placement-start`]: {
-        insetInlineStart: -badgeRibbonOffset,
-        borderEndStartRadius: 0,
-        [`${ribbonPrefixCls}-corner`]: {
-          insetInlineStart: 0,
-          borderBlockEndColor: 'transparent',
-          borderInlineStartColor: 'transparent',
-        },
-      },
-
-      // ====================== RTL =======================
-      '&-rtl': {
-        direction: 'rtl',
-      },
-    },
   };
 };
 
 // ============================== Export ==============================
-export default genComponentStyleHook('Badge', (token) => {
+export const prepareToken: (token: Parameters<GenStyleFn<'Badge'>>[0]) => BadgeToken = (token) => {
   const { fontSize, lineHeight, fontSizeSM, lineWidth, marginXS, colorBorderBg } = token;
 
   const badgeFontHeight = Math.round(fontSize * lineHeight);
@@ -374,5 +321,11 @@ export default genComponentStyleHook('Badge', (token) => {
     badgeRibbonCornerFilter: `brightness(75%)`,
   });
 
+  return badgeToken;
+};
+
+export default genComponentStyleHook('Badge', (token) => {
+  const badgeToken = prepareToken(token);
+
   return [genSharedBadgeStyle(badgeToken)];
 });
diff --git a/components/badge/style/ribbon.ts b/components/badge/style/ribbon.ts
new file mode 100644
index 000000000000..c25dd0e63c3a
--- /dev/null
+++ b/components/badge/style/ribbon.ts
@@ -0,0 +1,78 @@
+import type { CSSObject } from '@ant-design/cssinjs';
+
+import { prepareToken, type BadgeToken } from '.';
+import { resetComponent } from '../../style';
+import type { GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, genPresetColor } from '../../theme/internal';
+
+// ============================== Ribbon ==============================
+const genRibbonStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSObject => {
+  const { antCls, badgeFontHeight, marginXS, badgeRibbonOffset } = token;
+  const ribbonPrefixCls = `${antCls}-ribbon`;
+  const ribbonWrapperPrefixCls = `${antCls}-ribbon-wrapper`;
+
+  const statusRibbonPreset = genPresetColor(token, (colorKey, { darkColor }) => ({
+    [`&${ribbonPrefixCls}-color-${colorKey}`]: {
+      background: darkColor,
+      color: darkColor,
+    },
+  }));
+
+  return {
+    [`${ribbonWrapperPrefixCls}`]: { position: 'relative' },
+    [`${ribbonPrefixCls}`]: {
+      ...resetComponent(token),
+      position: 'absolute',
+      top: marginXS,
+      padding: `0 ${token.paddingXS}px`,
+      color: token.colorPrimary,
+      lineHeight: `${badgeFontHeight}px`,
+      whiteSpace: 'nowrap',
+      backgroundColor: token.colorPrimary,
+      borderRadius: token.borderRadiusSM,
+      [`${ribbonPrefixCls}-text`]: { color: token.colorTextLightSolid },
+      [`${ribbonPrefixCls}-corner`]: {
+        position: 'absolute',
+        top: '100%',
+        width: badgeRibbonOffset,
+        height: badgeRibbonOffset,
+        color: 'currentcolor',
+        border: `${badgeRibbonOffset / 2}px solid`,
+        transform: token.badgeRibbonCornerTransform,
+        transformOrigin: 'top',
+        filter: token.badgeRibbonCornerFilter,
+      },
+      ...statusRibbonPreset,
+      [`&${ribbonPrefixCls}-placement-end`]: {
+        insetInlineEnd: -badgeRibbonOffset,
+        borderEndEndRadius: 0,
+        [`${ribbonPrefixCls}-corner`]: {
+          insetInlineEnd: 0,
+          borderInlineEndColor: 'transparent',
+          borderBlockEndColor: 'transparent',
+        },
+      },
+      [`&${ribbonPrefixCls}-placement-start`]: {
+        insetInlineStart: -badgeRibbonOffset,
+        borderEndStartRadius: 0,
+        [`${ribbonPrefixCls}-corner`]: {
+          insetInlineStart: 0,
+          borderBlockEndColor: 'transparent',
+          borderInlineStartColor: 'transparent',
+        },
+      },
+
+      // ====================== RTL =======================
+      '&-rtl': {
+        direction: 'rtl',
+      },
+    },
+  };
+};
+
+// ============================== Export ==============================
+export default genComponentStyleHook(['Badge', 'Ribbon'], (token) => {
+  const badgeToken = prepareToken(token);
+
+  return [genRibbonStyle(badgeToken)];
+});
diff --git a/components/breadcrumb/index.zh-CN.md b/components/breadcrumb/index.zh-CN.md
index ad95f7263255..25754eaf0dbb 100644
--- a/components/breadcrumb/index.zh-CN.md
+++ b/components/breadcrumb/index.zh-CN.md
@@ -131,6 +131,6 @@ function itemRender(item, params, items, paths) {
 return <Breadcrumb itemRender={itemRender} items={items} />;
 ```
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Breadcrumb"></ComponentTokenTable>
diff --git a/components/button/button.tsx b/components/button/button.tsx
index 8fbc7f8807fe..02b741a74d77 100644
--- a/components/button/button.tsx
+++ b/components/button/button.tsx
@@ -1,7 +1,4 @@
 /* eslint-disable react/button-has-type */
-import classNames from 'classnames';
-import omit from 'rc-util/lib/omit';
-import { composeRef } from 'rc-util/lib/ref';
 import React, {
   Children,
   createRef,
@@ -11,19 +8,24 @@ import React, {
   useMemo,
   useState,
 } from 'react';
+import classNames from 'classnames';
+import omit from 'rc-util/lib/omit';
+import { composeRef } from 'rc-util/lib/ref';
+
 import warning from '../_util/warning';
 import Wave from '../_util/wave';
 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 { useCompactItemContext } from '../space/Compact';
-import IconWrapper from './IconWrapper';
-import LoadingIcon from './LoadingIcon';
 import Group, { GroupSizeContext } from './button-group';
 import type { ButtonHTMLType, ButtonShape, ButtonType } from './buttonHelpers';
 import { isTwoCNChar, isUnBorderedButtonType, spaceChildren } from './buttonHelpers';
+import IconWrapper from './IconWrapper';
+import LoadingIcon from './LoadingIcon';
 import useStyle from './style';
+import CompactCmp from './style/compactCmp';
 
 export type LegacyButtonType = ButtonType | 'danger';
 
@@ -145,7 +147,7 @@ const InternalButton: React.ForwardRefRenderFunction<
   const needInserted = Children.count(children) === 1 && !icon && !isUnBorderedButtonType(type);
 
   useEffect(() => {
-    let delayTimer: NodeJS.Timer | null = null;
+    let delayTimer: ReturnType<typeof setTimeout> | null = null;
     if (loadingOrDelay.delay > 0) {
       delayTimer = setTimeout(() => {
         delayTimer = null;
@@ -285,6 +287,9 @@ const InternalButton: React.ForwardRefRenderFunction<
     >
       {iconNode}
       {kids}
+
+      {/* Styles: compact */}
+      {compactItemClassnames && <CompactCmp key="compact" prefixCls={prefixCls} />}
     </button>
   );
 
diff --git a/components/button/index.en-US.md b/components/button/index.en-US.md
index 6016061b5780..f26397bb1722 100644
--- a/components/button/index.en-US.md
+++ b/components/button/index.en-US.md
@@ -20,7 +20,7 @@ In Ant Design we provide 5 types of button.
 
 - Primary button: indicate the main action, one primary button at most in one section.
 - Default button: indicate a series of actions without priority.
-- Dashed button: used for adding action commonly.
+- Dashed button: commonly used for adding more actions.
 - Text button: used for the most secondary action.
 - Link button: used for external links.
 
diff --git a/components/button/index.zh-CN.md b/components/button/index.zh-CN.md
index 46fda89b226a..8a8bafce16b0 100644
--- a/components/button/index.zh-CN.md
+++ b/components/button/index.zh-CN.md
@@ -85,7 +85,7 @@ group:
 | ---- | ------------ | ----- |
 | icon | 设置图标元素 | 5.5.0 |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Button"></ComponentTokenTable>
 
diff --git a/components/button/style/compactCmp.ts b/components/button/style/compactCmp.ts
new file mode 100644
index 000000000000..ef3f4550329a
--- /dev/null
+++ b/components/button/style/compactCmp.ts
@@ -0,0 +1,16 @@
+// Style as inline component
+import { prepareToken } from '.';
+import { genCompactItemStyle } from '../../style/compact-item';
+import { genCompactItemVerticalStyle } from '../../style/compact-item-vertical';
+import { genSubStyleComponent } from '../../theme/internal';
+
+// ============================== Export ==============================
+export default genSubStyleComponent(['Button', 'compact'], (token) => {
+  const buttonToken = prepareToken(token);
+
+  return [
+    // Space Compact
+    genCompactItemStyle(buttonToken),
+    genCompactItemVerticalStyle(buttonToken),
+  ];
+});
diff --git a/components/button/style/index.ts b/components/button/style/index.ts
index 1631719dbc7a..9994801a2f37 100644
--- a/components/button/style/index.ts
+++ b/components/button/style/index.ts
@@ -1,9 +1,9 @@
 import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
+
 import { genFocusStyle } from '../../style';
-import { genCompactItemStyle } from '../../style/compact-item';
-import { genCompactItemVerticalStyle } from '../../style/compact-item-vertical';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
+import type { GenStyleFn } from '../../theme/util/genComponentStyleHook';
 import genGroupStyle from './group';
 
 /** Component only token. Which will handle additional calculation of alias token */
@@ -517,7 +517,7 @@ const genBlockButtonStyle: GenerateStyle<ButtonToken> = (token) => {
 };
 
 // ============================== Export ==============================
-export default genComponentStyleHook('Button', (token) => {
+export const prepareToken: (token: Parameters<GenStyleFn<'Badge'>>[0]) => ButtonToken = (token) => {
   const { controlTmpOutline, paddingContentHorizontal } = token;
 
   const buttonToken = mergeToken<ButtonToken>(token, {
@@ -527,6 +527,12 @@ export default genComponentStyleHook('Button', (token) => {
     buttonFontWeight: 400,
   });
 
+  return buttonToken;
+};
+
+export default genComponentStyleHook('Button', (token) => {
+  const buttonToken = prepareToken(token);
+
   return [
     // Shared
     genSharedButtonStyle(buttonToken),
@@ -544,9 +550,5 @@ export default genComponentStyleHook('Button', (token) => {
 
     // Button Group
     genGroupStyle(buttonToken),
-
-    // Space Compact
-    genCompactItemStyle(token),
-    genCompactItemVerticalStyle(token),
   ];
 });
diff --git a/components/calendar/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/calendar/__tests__/__snapshots__/demo-extend.test.ts.snap
index 410db2eea5c1..69a258a0a8b4 100644
--- a/components/calendar/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/calendar/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -9282,7 +9282,7 @@ exports[`renders components/calendar/demo/notice-calendar.tsx extend context cor
                           <span
                             class="ant-badge-status-text"
                           >
-                            This is very long usual event。。....
+                            This is very long usual event......
                           </span>
                         </span>
                       </li>
diff --git a/components/calendar/__tests__/__snapshots__/demo.test.ts.snap b/components/calendar/__tests__/__snapshots__/demo.test.ts.snap
index 8c6ffc118b29..6d3ec9a8624d 100644
--- a/components/calendar/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/calendar/__tests__/__snapshots__/demo.test.ts.snap
@@ -5418,7 +5418,7 @@ exports[`renders components/calendar/demo/notice-calendar.tsx correctly 1`] = `
                           <span
                             class="ant-badge-status-text"
                           >
-                            This is very long usual event。。....
+                            This is very long usual event......
                           </span>
                         </span>
                       </li>
diff --git a/components/calendar/__tests__/demo-extend.test.ts b/components/calendar/__tests__/demo-extend.test.ts
index 943a699b5e64..d5dc6e118d5a 100644
--- a/components/calendar/__tests__/demo-extend.test.ts
+++ b/components/calendar/__tests__/demo-extend.test.ts
@@ -1,3 +1,3 @@
 import { extendTest } from '../../../tests/shared/demoTest';
 
-extendTest('calendar');
+extendTest('calendar', { skip: ['lunar.tsx'] });
diff --git a/components/calendar/__tests__/demo.test.ts b/components/calendar/__tests__/demo.test.ts
index d8ead2ddc9d3..a29e22786fd0 100644
--- a/components/calendar/__tests__/demo.test.ts
+++ b/components/calendar/__tests__/demo.test.ts
@@ -5,4 +5,5 @@ demoTest('calendar', {
   testRootProps: {
     value: dayjs(),
   },
+  skip: ['lunar.tsx'],
 });
diff --git a/components/calendar/demo/basic.tsx b/components/calendar/demo/basic.tsx
index c95cd92fd37c..0255c4beceb6 100644
--- a/components/calendar/demo/basic.tsx
+++ b/components/calendar/demo/basic.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import type { Dayjs } from 'dayjs';
 import { Calendar } from 'antd';
-import type { CalendarMode } from 'antd/es/calendar/generateCalendar';
+import type { CalendarProps } from 'antd';
 
 const App: React.FC = () => {
-  const onPanelChange = (value: Dayjs, mode: CalendarMode) => {
+  const onPanelChange = (value: Dayjs, mode: CalendarProps<Dayjs>['mode']) => {
     console.log(value.format('YYYY-MM-DD'), mode);
   };
 
diff --git a/components/calendar/demo/card.tsx b/components/calendar/demo/card.tsx
index 2d4ea63e9328..aa08fc1690b6 100644
--- a/components/calendar/demo/card.tsx
+++ b/components/calendar/demo/card.tsx
@@ -1,9 +1,9 @@
 import type { Dayjs } from 'dayjs';
 import React from 'react';
 import { Calendar, theme } from 'antd';
-import type { CalendarMode } from 'antd/es/calendar/generateCalendar';
+import type { CalendarProps } from 'antd';
 
-const onPanelChange = (value: Dayjs, mode: CalendarMode) => {
+const onPanelChange = (value: Dayjs, mode: CalendarProps<Dayjs>['mode']) => {
   console.log(value.format('YYYY-MM-DD'), mode);
 };
 
diff --git a/components/calendar/demo/component-token.tsx b/components/calendar/demo/component-token.tsx
index 37629d39c613..90c3223d2fcb 100644
--- a/components/calendar/demo/component-token.tsx
+++ b/components/calendar/demo/component-token.tsx
@@ -1,11 +1,11 @@
 import type { Dayjs } from 'dayjs';
 import React from 'react';
 import { Calendar, ConfigProvider } from 'antd';
-import type { CalendarMode } from 'antd/es/calendar/generateCalendar';
+import type { CalendarProps } from 'antd';
 
 /** Test usage. Do not use in your production. */
 export default () => {
-  const onPanelChange = (value: Dayjs, mode: CalendarMode) => {
+  const onPanelChange = (value: Dayjs, mode: CalendarProps<Dayjs>['mode']) => {
     console.log(value.format('YYYY-MM-DD'), mode);
   };
 
diff --git a/components/calendar/demo/customize-header.tsx b/components/calendar/demo/customize-header.tsx
index 175150ba9375..4b969e0f33c1 100644
--- a/components/calendar/demo/customize-header.tsx
+++ b/components/calendar/demo/customize-header.tsx
@@ -4,14 +4,14 @@ import 'dayjs/locale/zh-cn';
 import type { Dayjs } from 'dayjs';
 import dayLocaleData from 'dayjs/plugin/localeData';
 import { Calendar, Col, Radio, Row, Select, Typography, theme } from 'antd';
-import type { CalendarMode } from 'antd/es/calendar/generateCalendar';
+import type { CalendarProps } from 'antd';
 
 dayjs.extend(dayLocaleData);
 
 const App: React.FC = () => {
   const { token } = theme.useToken();
 
-  const onPanelChange = (value: Dayjs, mode: CalendarMode) => {
+  const onPanelChange = (value: Dayjs, mode: CalendarProps<Dayjs>['mode']) => {
     console.log(value.format('YYYY-MM-DD'), mode);
   };
 
diff --git a/components/calendar/demo/lunar.md b/components/calendar/demo/lunar.md
new file mode 100644
index 000000000000..1e6f795fe0b1
--- /dev/null
+++ b/components/calendar/demo/lunar.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+展示农历、节气等信息。
+
+## en-US
+
+Display lunar calendar, solar terms and other information.
diff --git a/components/calendar/demo/lunar.tsx b/components/calendar/demo/lunar.tsx
new file mode 100644
index 000000000000..efc64412a0c2
--- /dev/null
+++ b/components/calendar/demo/lunar.tsx
@@ -0,0 +1,235 @@
+import dayjs, { type Dayjs } from 'dayjs';
+import React from 'react';
+import { Lunar, HolidayUtil } from 'lunar-typescript';
+import { createStyles } from 'antd-style';
+import classNames from 'classnames';
+import { Calendar, Col, Radio, Row, Select } from 'antd';
+import type { CalendarProps } from 'antd';
+
+const useStyle = createStyles(({ token, css, cx }) => {
+  const lunar = css`
+    color: ${token.colorTextTertiary};
+    font-size: ${token.fontSizeSM}px;
+  `;
+  return {
+    wrapper: css`
+      width: 450px;
+      border: 1px solid ${token.colorBorderSecondary};
+      border-radius: ${token.borderRadiusOuter};
+      padding: 5px;
+    `,
+    dateCell: css`
+      position: relative;
+      &:before {
+        content: '';
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        margin: auto;
+        max-width: 40px;
+        max-height: 40px;
+        background: transparent;
+        transition: background 300ms;
+        border-radius: ${token.borderRadiusOuter}px;
+        border: 1px solid transparent;
+        box-sizing: border-box;
+      }
+      &:hover:before {
+        background: rgba(0, 0, 0, 0.04);
+      }
+    `,
+    today: css`
+      &:before {
+        border: 1px solid ${token.colorPrimary};
+      }
+    `,
+    text: css`
+      position: relative;
+      z-index: 1;
+    `,
+    lunar,
+    current: css`
+      color: ${token.colorTextLightSolid};
+      &:before {
+        background: ${token.colorPrimary};
+      }
+      &:hover:before {
+        background: ${token.colorPrimary};
+        opacity: 0.8;
+      }
+      .${cx(lunar)} {
+        color: ${token.colorTextLightSolid};
+        opacity: 0.9;
+      }
+    `,
+    monthCell: css`
+      width: 120px;
+      color: ${token.colorTextBase};
+      border-radius: ${token.borderRadiusOuter}px;
+      padding: 5px 0;
+      &:hover {
+        background: rgba(0, 0, 0, 0.04);
+      }
+    `,
+    monthCellCurrent: css`
+      color: ${token.colorTextLightSolid};
+      background: ${token.colorPrimary};
+      &:hover {
+        background: ${token.colorPrimary};
+        opacity: 0.8;
+      }
+    `,
+  };
+});
+
+const App: React.FC = () => {
+  const { styles } = useStyle({ test: true });
+
+  const [selectDate, setSelectDate] = React.useState<Dayjs>(dayjs());
+
+  const onPanelChange = (value: Dayjs, mode: CalendarProps<Dayjs>['mode']) => {
+    console.log(value.format('YYYY-MM-DD'), mode);
+  };
+
+  const onDateChange: CalendarProps<Dayjs>['onSelect'] = (value, selectInfo) => {
+    if (selectInfo.source === 'date') {
+      setSelectDate(value);
+    }
+  };
+
+  const cellRender: CalendarProps<Dayjs>['fullCellRender'] = (date, info) => {
+    const d = Lunar.fromDate(date.toDate());
+    const lunar = d.getDayInChinese();
+    const solarTerm = d.getJieQi();
+    const h = HolidayUtil.getHoliday(date.get('year'), date.get('month') + 1, date.get('date'));
+    const displayHoliday = h?.getTarget() === h?.getDay() ? h?.getName() : undefined;
+    if (info.type === 'date') {
+      return React.cloneElement(info.originNode, {
+        ...info.originNode.props,
+        className: classNames(styles.dateCell, {
+          [styles.current]: selectDate.isSame(date, 'date'),
+          [styles.today]: date.isSame(dayjs(), 'date'),
+        }),
+        children: (
+          <div className={styles.text}>
+            {date.get('date')}
+            {info.type === 'date' && (
+              <div className={styles.lunar}>{displayHoliday || solarTerm || lunar}</div>
+            )}
+          </div>
+        ),
+      });
+    }
+
+    if (info.type === 'month') {
+      // Due to the fact that a solar month is part of the lunar month X and part of the lunar month X+1,
+      // when rendering a month, always take X as the lunar month of the month
+      const d2 = Lunar.fromDate(new Date(date.get('year'), date.get('month')));
+      const month = d2.getMonthInChinese();
+      return (
+        <div
+          className={classNames(styles.monthCell, {
+            [styles.monthCellCurrent]: selectDate.isSame(date, 'month'),
+          })}
+        >
+          {date.get('month') + 1}月（{month}月）
+        </div>
+      );
+    }
+  };
+
+  const getYearLabel = (year: number) => {
+    const d = Lunar.fromDate(new Date(year + 1, 0));
+    return `${d.getYearInChinese()}年（${d.getYearInGanZhi()}${d.getYearShengXiao()}年）`;
+  };
+
+  const getMonthLabel = (month: number, value: Dayjs) => {
+    const d = Lunar.fromDate(new Date(value.year(), month));
+    const lunar = d.getMonthInChinese();
+    return `${month + 1}月（${lunar}月）`;
+  };
+
+  return (
+    <div className={styles.wrapper}>
+      <Calendar
+        fullCellRender={cellRender}
+        fullscreen={false}
+        onPanelChange={onPanelChange}
+        onSelect={onDateChange}
+        headerRender={({ value, type, onChange, onTypeChange }) => {
+          const start = 0;
+          const end = 12;
+          const monthOptions = [];
+
+          let current = value.clone();
+          const localeData = value.localeData();
+          const months = [];
+          for (let i = 0; i < 12; i++) {
+            current = current.month(i);
+            months.push(localeData.monthsShort(current));
+          }
+
+          for (let i = start; i < end; i++) {
+            monthOptions.push({
+              label: getMonthLabel(i, value),
+              value: i,
+            });
+          }
+
+          const year = value.year();
+          const month = value.month();
+          const options = [];
+          for (let i = year - 10; i < year + 10; i += 1) {
+            options.push({
+              label: getYearLabel(i),
+              value: i,
+            });
+          }
+          return (
+            <Row justify="end" gutter={8} style={{ padding: 8 }}>
+              <Col>
+                <Select
+                  size="small"
+                  dropdownMatchSelectWidth={false}
+                  className="my-year-select"
+                  value={year}
+                  options={options}
+                  onChange={(newYear) => {
+                    const now = value.clone().year(newYear);
+                    onChange(now);
+                  }}
+                />
+              </Col>
+              <Col>
+                <Select
+                  size="small"
+                  dropdownMatchSelectWidth={false}
+                  value={month}
+                  options={monthOptions}
+                  onChange={(newMonth) => {
+                    const now = value.clone().month(newMonth);
+                    onChange(now);
+                  }}
+                />
+              </Col>
+              <Col>
+                <Radio.Group
+                  size="small"
+                  onChange={(e) => onTypeChange(e.target.value)}
+                  value={type}
+                >
+                  <Radio.Button value="month">月</Radio.Button>
+                  <Radio.Button value="year">年</Radio.Button>
+                </Radio.Group>
+              </Col>
+            </Row>
+          );
+        }}
+      />
+    </div>
+  );
+};
+
+export default App;
diff --git a/components/calendar/demo/notice-calendar.tsx b/components/calendar/demo/notice-calendar.tsx
index 3051372a8895..fbf6aa24bddb 100644
--- a/components/calendar/demo/notice-calendar.tsx
+++ b/components/calendar/demo/notice-calendar.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import type { Dayjs } from 'dayjs';
-import type { CellRenderInfo } from 'rc-picker/lib/interface';
-import type { BadgeProps } from 'antd';
+import type { BadgeProps, CalendarProps } from 'antd';
 import { Badge, Calendar } from 'antd';
 
 const getListData = (value: Dayjs) => {
@@ -23,7 +22,7 @@ const getListData = (value: Dayjs) => {
     case 15:
       listData = [
         { type: 'warning', content: 'This is warning event' },
-        { type: 'success', content: 'This is very long usual event。。....' },
+        { type: 'success', content: 'This is very long usual event......' },
         { type: 'error', content: 'This is error event 1.' },
         { type: 'error', content: 'This is error event 2.' },
         { type: 'error', content: 'This is error event 3.' },
@@ -65,7 +64,7 @@ const App: React.FC = () => {
     );
   };
 
-  const cellRender = (current: Dayjs, info: CellRenderInfo<Dayjs>) => {
+  const cellRender: CalendarProps<Dayjs>['cellRender'] = (current, info) => {
     if (info.type === 'date') return dateCellRender(current);
     if (info.type === 'month') return monthCellRender(current);
     return info.originNode;
diff --git a/components/calendar/index.en-US.md b/components/calendar/index.en-US.md
index 61e71d774862..4480bc7fffb7 100644
--- a/components/calendar/index.en-US.md
+++ b/components/calendar/index.en-US.md
@@ -19,6 +19,7 @@ When data is in the form of dates, such as schedules, timetables, prices calenda
 <code src="./demo/notice-calendar.tsx" clientOnly>Notice Calendar</code>
 <code src="./demo/card.tsx" clientOnly>Card</code>
 <code src="./demo/select.tsx" clientOnly>Selectable Calendar</code>
+<code src="./demo/lunar.tsx" clientOnly>Lunar Calendar</code>
 <code src="./demo/customize-header.tsx" clientOnly>Customize Header</code>
 <code src="./demo/component-token.tsx" debug>Component Token</code>
 
diff --git a/components/calendar/index.zh-CN.md b/components/calendar/index.zh-CN.md
index c3cdb4730b96..dbda79cb72e9 100644
--- a/components/calendar/index.zh-CN.md
+++ b/components/calendar/index.zh-CN.md
@@ -20,6 +20,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-p-wQLik200AAA
 <code src="./demo/notice-calendar.tsx" clientOnly>通知事项日历</code>
 <code src="./demo/card.tsx" clientOnly>卡片模式</code>
 <code src="./demo/select.tsx" clientOnly>选择功能</code>
+<code src="./demo/lunar.tsx" clientOnly>农历日历</code>
 <code src="./demo/customize-header.tsx" clientOnly>自定义头部</code>
 <code src="./demo/component-token.tsx" debug>组件 Token</code>
 
@@ -65,7 +66,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-p-wQLik200AAA
 | onPanelChange | 日期面板变化回调 | function(date: Dayjs, mode: string) | - |  |
 | onSelect | 选择日期回调，包含来源信息 | function(date: Dayjs, info: { source: 'year' \| 'month' \| 'date' \| 'customize' }) | - | `info`: 5.6.0 |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Calendar"></ComponentTokenTable>
 
diff --git a/components/card/__tests__/__snapshots__/index.test.tsx.snap b/components/card/__tests__/__snapshots__/index.test.tsx.snap
index 7629799ca37a..91a0c52066e6 100644
--- a/components/card/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/card/__tests__/__snapshots__/index.test.tsx.snap
@@ -157,14 +157,11 @@ exports[`Card correct pass tabList props 1`] = `
                   viewBox="64 64 896 896"
                   width="1em"
                 >
-                  <defs>
-                    <style />
-                  </defs>
                   <path
                     d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
                   />
                   <path
-                    d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+                    d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
                   />
                 </svg>
               </span>
@@ -227,14 +224,11 @@ exports[`Card correct pass tabList props 1`] = `
                 viewBox="64 64 896 896"
                 width="1em"
               >
-                <defs>
-                  <style />
-                </defs>
                 <path
                   d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
                 />
                 <path
-                  d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+                  d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
                 />
               </svg>
             </span>
diff --git a/components/card/index.zh-CN.md b/components/card/index.zh-CN.md
index 8aff97ab1a31..776e76f44926 100644
--- a/components/card/index.zh-CN.md
+++ b/components/card/index.zh-CN.md
@@ -76,6 +76,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*a-8zR6rrupgAAA
 | style       | 定义容器类名的样式 | CSSProperties | -      |      |
 | title       | 标题内容           | ReactNode     | -      |      |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Card"></ComponentTokenTable>
diff --git a/components/carousel/index.tsx b/components/carousel/index.tsx
index 451a95bf8649..7b5ddb0c470a 100644
--- a/components/carousel/index.tsx
+++ b/components/carousel/index.tsx
@@ -1,9 +1,10 @@
 'use client';
 
+import * as React from 'react';
 import type { Settings } from '@ant-design/react-slick';
 import SlickCarousel from '@ant-design/react-slick';
 import classNames from 'classnames';
-import * as React from 'react';
+
 import { ConfigContext } from '../config-provider';
 import useStyle from './style';
 
@@ -116,6 +117,7 @@ const Carousel = React.forwardRef<CarouselRef, CarouselProps>((props, ref) => {
         dotsClass={dsClass}
         arrows={arrows}
         draggable={draggable}
+        verticalSwiping={vertical}
         waitForAnimate={waitForAnimate}
       />
     </div>,
diff --git a/components/carousel/index.zh-CN.md b/components/carousel/index.zh-CN.md
index 2c545c879efe..4b53c62f128a 100644
--- a/components/carousel/index.zh-CN.md
+++ b/components/carousel/index.zh-CN.md
@@ -51,7 +51,7 @@ demo:
 
 更多 API 可参考：<https://react-slick.neostack.com/docs/api>
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Carousel"></ComponentTokenTable>
 
diff --git a/components/cascader/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/cascader/__tests__/__snapshots__/demo-extend.test.ts.snap
index 944d8c73f5e3..a58009b95437 100644
--- a/components/cascader/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/cascader/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -665,9 +665,7 @@ exports[`renders components/cascader/demo/custom-render.tsx extend context corre
 exports[`renders components/cascader/demo/custom-trigger.tsx extend context correctly 1`] = `
 <span>
   Unselect
-  <a
-    href="#"
-  >
+  <a>
     Change city
   </a>
   <div
diff --git a/components/cascader/__tests__/__snapshots__/demo.test.tsx.snap b/components/cascader/__tests__/__snapshots__/demo.test.tsx.snap
index 0c5aa2ec9f50..b1ffecb8e3ad 100644
--- a/components/cascader/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/cascader/__tests__/__snapshots__/demo.test.tsx.snap
@@ -296,9 +296,7 @@ exports[`renders components/cascader/demo/custom-trigger.tsx correctly 1`] = `
 <span>
   Unselect
   <!-- -->
-  <a
-    href="#"
-  >
+  <a>
     Change city
   </a>
 </span>
diff --git a/components/cascader/demo/custom-trigger.tsx b/components/cascader/demo/custom-trigger.tsx
index 799ff0cd0a22..0424d713e0e7 100644
--- a/components/cascader/demo/custom-trigger.tsx
+++ b/components/cascader/demo/custom-trigger.tsx
@@ -42,7 +42,7 @@ const App: React.FC = () => {
       {text}
       &nbsp;
       <Cascader options={options} onChange={onChange}>
-        <a href="#">Change city</a>
+        <a>Change city</a>
       </Cascader>
     </span>
   );
diff --git a/components/cascader/index.en-US.md b/components/cascader/index.en-US.md
index 05c674426685..fc819ba2d3ae 100644
--- a/components/cascader/index.en-US.md
+++ b/components/cascader/index.en-US.md
@@ -48,7 +48,7 @@ Common props ref：[Common props](/docs/react/common-props)
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| allowClear | Show clear button | boolean \| { clearIcon?: ReactNode } | false | 5.8.0: Support object type |
+| allowClear | Show clear button | boolean \| { clearIcon?: ReactNode } | true | 5.8.0: Support object type |
 | autoFocus | If get focus when component mounted | boolean | false |  |
 | bordered | Whether has border style | boolean | true |  |
 | changeOnSelect | (Work on single select) Change value on each selection if set to true, see above demo for details | boolean | false |  |
@@ -83,7 +83,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | multiple | Support multiple or not | boolean | - | 4.17.0 |
 | removeIcon | The custom remove icon | ReactNode | - |  |
 | showCheckedStrategy | The way show selected item in box. ** `SHOW_CHILD`: ** just show child treeNode. **`Cascader.SHOW_PARENT`:** just show parent treeNode (when all child treeNode under the parent treeNode are checked) | `Cascader.SHOW_PARENT` \| `Cascader.SHOW_CHILD` | `Cascader.SHOW_PARENT` | 4.20.0 |
-| searchValue | Set search value，Need work with `showSearch` | string | - | 4.17.0 |
+| searchValue | Set search value, Need work with `showSearch` | string | - | 4.17.0 |
 | onSearch | The callback function triggered when input changed | (search: string) => void | - | 4.17.0 |
 | dropdownMenuColumnStyle | The style of the drop-down menu column | CSSProperties | - |  |
 | loadingIcon | The appearance of lazy loading (now is useless) | ReactNode | - |  |
diff --git a/components/cascader/index.tsx b/components/cascader/index.tsx
index 23f48cfd6659..91d31f887561 100644
--- a/components/cascader/index.tsx
+++ b/components/cascader/index.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import * as React from 'react';
 import LeftOutlined from '@ant-design/icons/LeftOutlined';
 import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
 import RightOutlined from '@ant-design/icons/RightOutlined';
@@ -15,18 +16,18 @@ import type {
 import RcCascader from 'rc-cascader';
 import type { Placement } from 'rc-select/lib/BaseSelect';
 import omit from 'rc-util/lib/omit';
-import * as React from 'react';
-import genPurePanel from '../_util/PurePanel';
+
 import type { SelectCommonPlacement } from '../_util/motion';
 import { getTransitionName } from '../_util/motion';
+import genPurePanel from '../_util/PurePanel';
 import type { InputStatus } from '../_util/statusUtils';
 import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
 import warning from '../_util/warning';
 import { ConfigContext } from '../config-provider';
-import DisabledContext from '../config-provider/DisabledContext';
-import type { SizeType } from '../config-provider/SizeContext';
 import DefaultRenderEmpty from '../config-provider/defaultRenderEmpty';
+import DisabledContext from '../config-provider/DisabledContext';
 import useSize from '../config-provider/hooks/useSize';
+import type { SizeType } from '../config-provider/SizeContext';
 import { FormItemInputContext } from '../form/context';
 import useSelectStyle from '../select/style';
 import useBuiltinPlacements from '../select/useBuiltinPlacements';
@@ -40,7 +41,7 @@ import useStyle from './style';
 // - Hover opacity style
 // - Search filter match case
 
-export { BaseOptionType, DefaultOptionType };
+export type { BaseOptionType, DefaultOptionType };
 
 export type FieldNamesType = FieldNames;
 
diff --git a/components/cascader/index.zh-CN.md b/components/cascader/index.zh-CN.md
index e16b45bf6c29..2a2141fcf476 100644
--- a/components/cascader/index.zh-CN.md
+++ b/components/cascader/index.zh-CN.md
@@ -49,7 +49,7 @@ demo:
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| allowClear | 支持清除 | boolean \| { clearIcon?: ReactNode } | false | 5.8.0: 支持对象形式 |
+| allowClear | 支持清除 | boolean \| { clearIcon?: ReactNode } | true | 5.8.0: 支持对象形式 |
 | autoFocus | 自动获取焦点 | boolean | false |  |
 | bordered | 是否有边框 | boolean | true |  |
 | changeOnSelect | （单选时生效）当此项为 true 时，点选每级菜单选项值都会发生变化，具体见上面的演示 | boolean | false |  |
@@ -123,6 +123,6 @@ interface Option {
 
 > 注意，如果需要获得中国省市区数据，可以参考 [china-division](https://gist.github.com/afc163/7582f35654fd03d5be7009444345ea17)。
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Cascader"></ComponentTokenTable>
diff --git a/components/checkbox/index.zh-CN.md b/components/checkbox/index.zh-CN.md
index 727c7d90c2b0..d55074ba349b 100644
--- a/components/checkbox/index.zh-CN.md
+++ b/components/checkbox/index.zh-CN.md
@@ -73,6 +73,6 @@ interface Option {
 | blur()  | 移除焦点 |      |
 | focus() | 获取焦点 |      |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Checkbox"></ComponentTokenTable>
diff --git a/components/collapse/__tests__/index.test.tsx b/components/collapse/__tests__/index.test.tsx
index 143b487049de..a7e23f68e618 100644
--- a/components/collapse/__tests__/index.test.tsx
+++ b/components/collapse/__tests__/index.test.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
+
 import { act } from 'react-dom/test-utils';
+
 import { fireEvent, render, waitFakeTimer } from '../../../tests/utils';
 import { resetWarned } from '../../_util/warning';
 
diff --git a/components/collapse/index.zh-CN.md b/components/collapse/index.zh-CN.md
index c87916fa67ef..6a66ce57c621 100644
--- a/components/collapse/index.zh-CN.md
+++ b/components/collapse/index.zh-CN.md
@@ -105,6 +105,6 @@ const items: CollapseProps['items'] = [
 | key | 对应 activeKey | string \| number | - |  |
 | showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能置为 icon） | boolean | true |  |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Collapse"></ComponentTokenTable>
diff --git a/components/color-picker/ColorPicker.tsx b/components/color-picker/ColorPicker.tsx
index d71fe4c64859..7b9eab1e51c9 100644
--- a/components/color-picker/ColorPicker.tsx
+++ b/components/color-picker/ColorPicker.tsx
@@ -1,24 +1,25 @@
+import type { CSSProperties, FC } from 'react';
+import React, { useContext, useMemo, useRef, useState } from 'react';
 import type {
   HsbaColorType,
   ColorPickerProps as RcColorPickerProps,
 } from '@rc-component/color-picker';
 import classNames from 'classnames';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
-import type { CSSProperties, FC } from 'react';
-import React, { useContext, useMemo, useRef, useState } from 'react';
+
 import genPurePanel from '../_util/PurePanel';
 import { getStatusClassNames } from '../_util/statusUtils';
 import warning from '../_util/warning';
-import type { SizeType } from '../config-provider/SizeContext';
 import type { ConfigConsumerProps } from '../config-provider/context';
 import { ConfigContext } from '../config-provider/context';
 import useSize from '../config-provider/hooks/useSize';
+import type { SizeType } from '../config-provider/SizeContext';
 import { FormItemInputContext, NoFormStyle } from '../form/context';
 import type { PopoverProps } from '../popover';
 import Popover from '../popover';
 import theme from '../theme';
-import ColorPickerPanel from './ColorPickerPanel';
 import type { Color } from './color';
+import ColorPickerPanel from './ColorPickerPanel';
 import ColorTrigger from './components/ColorTrigger';
 import useColorState from './hooks/useColorState';
 import type {
@@ -227,7 +228,7 @@ const ColorPicker: CompoundedComponent = (props) => {
       style={styles?.popup}
       overlayInnerStyle={styles?.popupOverlayInner}
       onOpenChange={(visible) => {
-        if (popupAllowCloseRef.current) {
+        if (popupAllowCloseRef.current && !disabled) {
           setPopupOpen(visible);
         }
       }}
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 46c42fd96141..717c27014ec1 100644
--- a/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -296,7 +296,7 @@ Array [
                   <input
                     class="ant-input ant-input-sm"
                     type="text"
-                    value="1677FF"
+                    value="1677ff"
                   />
                 </span>
               </div>
@@ -680,7 +680,7 @@ Array [
                   <input
                     class="ant-input ant-input-sm"
                     type="text"
-                    value="1677FF"
+                    value="1677ff"
                   />
                 </span>
               </div>
@@ -1066,7 +1066,7 @@ exports[`renders components/color-picker/demo/change-completed.tsx extend contex
                   <input
                     class="ant-input ant-input-sm"
                     type="text"
-                    value="1677FF"
+                    value="1677ff"
                   />
                 </span>
               </div>
@@ -1450,7 +1450,7 @@ Array [
                   <input
                     class="ant-input ant-input-sm"
                     type="text"
-                    value="1677FF"
+                    value="1677ff"
                   />
                 </span>
               </div>
@@ -1839,7 +1839,7 @@ Array [
                   <input
                     class="ant-input ant-input-sm"
                     type="text"
-                    value="1677FF"
+                    value="1677ff"
                   />
                 </span>
               </div>
@@ -2202,7 +2202,7 @@ Array [
                   <input
                     class="ant-input ant-input-sm"
                     type="text"
-                    value="1677FF"
+                    value="1677ff"
                   />
                 </span>
               </div>
@@ -2530,7 +2530,7 @@ exports[`renders components/color-picker/demo/format.tsx extend context correctl
                             <input
                               class="ant-input ant-input-sm"
                               type="text"
-                              value="1677FF"
+                              value="1677ff"
                             />
                           </span>
                         </div>
@@ -4222,7 +4222,7 @@ exports[`renders components/color-picker/demo/panel-render.tsx extend context co
                               <input
                                 class="ant-input ant-input-sm"
                                 type="text"
-                                value="1677FF"
+                                value="1677ff"
                               />
                             </span>
                           </div>
@@ -5055,7 +5055,7 @@ exports[`renders components/color-picker/demo/panel-render.tsx extend context co
                                 <input
                                   class="ant-input ant-input-sm"
                                   type="text"
-                                  value="1677FF"
+                                  value="1677ff"
                                 />
                               </span>
                             </div>
@@ -5446,7 +5446,7 @@ Array [
                   <input
                     class="ant-input ant-input-sm"
                     type="text"
-                    value="1677FF"
+                    value="1677ff"
                   />
                 </span>
               </div>
@@ -6207,7 +6207,7 @@ exports[`renders components/color-picker/demo/pure-panel.tsx extend context corr
                     <input
                       class="ant-input ant-input-sm"
                       type="text"
-                      value="1677FF"
+                      value="1677ff"
                     />
                   </span>
                 </div>
@@ -6605,7 +6605,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
                         <input
                           class="ant-input ant-input-sm"
                           type="text"
-                          value="1677FF"
+                          value="1677ff"
                         />
                       </span>
                     </div>
@@ -6987,7 +6987,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
                         <input
                           class="ant-input ant-input-sm"
                           type="text"
-                          value="1677FF"
+                          value="1677ff"
                         />
                       </span>
                     </div>
@@ -7368,7 +7368,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
                         <input
                           class="ant-input ant-input-sm"
                           type="text"
-                          value="1677FF"
+                          value="1677ff"
                         />
                       </span>
                     </div>
@@ -7763,7 +7763,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
                         <input
                           class="ant-input ant-input-sm"
                           type="text"
-                          value="1677FF"
+                          value="1677ff"
                         />
                       </span>
                     </div>
@@ -8150,7 +8150,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
                         <input
                           class="ant-input ant-input-sm"
                           type="text"
-                          value="1677FF"
+                          value="1677ff"
                         />
                       </span>
                     </div>
@@ -8536,7 +8536,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
                         <input
                           class="ant-input ant-input-sm"
                           type="text"
-                          value="1677FF"
+                          value="1677ff"
                         />
                       </span>
                     </div>
@@ -8934,7 +8934,7 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor
                     <input
                       class="ant-input ant-input-sm"
                       type="text"
-                      value="1677FF"
+                      value="1677ff"
                     />
                   </span>
                 </div>
@@ -9323,7 +9323,7 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor
                     <input
                       class="ant-input ant-input-sm"
                       type="text"
-                      value="1677FF"
+                      value="1677ff"
                     />
                   </span>
                 </div>
@@ -9728,7 +9728,7 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor
                     <input
                       class="ant-input ant-input-sm"
                       type="text"
-                      value="1677FF"
+                      value="1677ff"
                     />
                   </span>
                 </div>
@@ -10110,7 +10110,7 @@ Array [
                   <input
                     class="ant-input ant-input-sm"
                     type="text"
-                    value="1677FF"
+                    value="1677ff"
                   />
                 </span>
               </div>
@@ -10494,7 +10494,7 @@ Array [
                   <input
                     class="ant-input ant-input-sm"
                     type="text"
-                    value="1677FF"
+                    value="1677ff"
                   />
                 </span>
               </div>
diff --git a/components/color-picker/__tests__/__snapshots__/index.test.tsx.snap b/components/color-picker/__tests__/__snapshots__/index.test.tsx.snap
index d81f2ecdf702..abf3be3921fa 100644
--- a/components/color-picker/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/color-picker/__tests__/__snapshots__/index.test.tsx.snap
@@ -216,7 +216,7 @@ exports[`ColorPicker Should panelRender work 1`] = `
                     <input
                       class="ant-input ant-input-sm"
                       type="text"
-                      value="1677FF"
+                      value="1677ff"
                     />
                   </span>
                 </div>
@@ -505,7 +505,7 @@ exports[`ColorPicker Should panelRender work 2`] = `
                     <input
                       class="ant-input ant-input-sm"
                       type="text"
-                      value="1677FF"
+                      value="1677ff"
                     />
                   </span>
                 </div>
diff --git a/components/color-picker/__tests__/index.test.tsx b/components/color-picker/__tests__/index.test.tsx
index a005aefb84a2..4c6763a0d21e 100644
--- a/components/color-picker/__tests__/index.test.tsx
+++ b/components/color-picker/__tests__/index.test.tsx
@@ -1,16 +1,18 @@
+import React, { useMemo, useState } from 'react';
 import { createEvent, fireEvent, render } from '@testing-library/react';
 import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
-import React, { useMemo, useState } from 'react';
+
+import { resetWarned } from '../../_util/warning';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import { waitFakeTimer } from '../../../tests/utils';
-import { resetWarned } from '../../_util/warning';
+import Button from '../../button';
 import ConfigProvider from '../../config-provider';
 import Form from '../../form';
 import theme from '../../theme';
+import type { Color } from '../color';
 import type { ColorPickerProps } from '../ColorPicker';
 import ColorPicker from '../ColorPicker';
-import type { Color } from '../color';
 
 function doMouseMove(
   container: HTMLElement,
@@ -518,4 +520,41 @@ describe('ColorPicker', () => {
     render(<ColorPicker disabledAlpha value="#1677ff" />);
     expect(errorSpy).not.toHaveBeenCalled();
   });
+
+  it('Should not show popup when disabled', async () => {
+    const Demo = () => {
+      const [disabled, setDisabled] = useState(false);
+      return (
+        <div className="App">
+          <ColorPicker disabled={disabled} />
+          <div className="buttons">
+            <Button
+              className="disabled-btn"
+              disabled={disabled}
+              onClick={() => {
+                setDisabled(true);
+              }}
+            >
+              禁用
+            </Button>
+            <Button
+              className="active-btn"
+              disabled={!disabled}
+              onClick={() => {
+                setDisabled(false);
+              }}
+            >
+              启用
+            </Button>
+          </div>
+        </div>
+      );
+    };
+    const { container } = render(<Demo />);
+    fireEvent.click(container.querySelector('.disabled-btn')!);
+    fireEvent.click(container.querySelector('.ant-color-picker-trigger')!);
+    await waitFakeTimer();
+    fireEvent.click(container.querySelector('.active-btn')!);
+    expect(document.body.querySelector('.ant-popover')).toBeFalsy();
+  });
 });
diff --git a/components/color-picker/components/ColorHexInput.tsx b/components/color-picker/components/ColorHexInput.tsx
index f98bf6520fa1..92130806c76d 100644
--- a/components/color-picker/components/ColorHexInput.tsx
+++ b/components/color-picker/components/ColorHexInput.tsx
@@ -37,7 +37,7 @@ const ColorHexInput: FC<ColorHexInputProps> = ({ prefixCls, value, onChange }) =
   return (
     <Input
       className={colorHexInputPrefixCls}
-      value={hexValue?.toUpperCase()}
+      value={hexValue}
       prefix="#"
       onChange={handleHexChange}
       size="small"
diff --git a/components/color-picker/components/ColorPresets.tsx b/components/color-picker/components/ColorPresets.tsx
index 0d5cdaacbe31..a6b99f1fecc3 100644
--- a/components/color-picker/components/ColorPresets.tsx
+++ b/components/color-picker/components/ColorPresets.tsx
@@ -59,9 +59,10 @@ const ColorPresets: FC<ColorPresetsProps> = ({ prefixCls, presets, value: color,
     children: (
       <div className={`${colorPresetsPrefixCls}-items`}>
         {Array.isArray(preset?.colors) && preset.colors?.length > 0 ? (
-          preset.colors.map((presetColor: Color) => (
+          preset.colors.map((presetColor: Color, index: number) => (
             <ColorBlock
-              key={`preset-${presetColor.toHexString()}`}
+              // eslint-disable-next-line react/no-array-index-key
+              key={`preset-${index}-${presetColor.toHexString()}`}
               color={generateColor(presetColor).toRgbString()}
               prefixCls={prefixCls}
               className={classNames(`${colorPresetsPrefixCls}-color`, {
diff --git a/components/color-picker/style/index.ts b/components/color-picker/style/index.ts
index b7c035b83550..3294bf25f78a 100644
--- a/components/color-picker/style/index.ts
+++ b/components/color-picker/style/index.ts
@@ -134,7 +134,7 @@ const genSizeStyle = (token: ColorPickerToken): CSSObject => {
       minWidth: controlHeightLG,
       height: controlHeightLG,
       borderRadius: borderRadiusLG,
-      [`${componentCls}-color-block`]: {
+      [`${componentCls}-color-block, ${componentCls}-clear`]: {
         width: controlHeight,
         height: controlHeight,
         borderRadius,
@@ -147,7 +147,7 @@ const genSizeStyle = (token: ColorPickerToken): CSSObject => {
       minWidth: controlHeightSM,
       height: controlHeightSM,
       borderRadius: borderRadiusSM,
-      [`${componentCls}-color-block`]: {
+      [`${componentCls}-color-block, ${componentCls}-clear`]: {
         width: controlHeightXS,
         height: controlHeightXS,
         borderRadius: borderRadiusXS,
diff --git a/components/color-picker/style/input.ts b/components/color-picker/style/input.ts
index e4ac9bfa55ed..2aea1b876fd1 100644
--- a/components/color-picker/style/input.ts
+++ b/components/color-picker/style/input.ts
@@ -86,6 +86,7 @@ const genInputStyle: GenerateStyle<ColorPickerToken, CSSObject> = (token) => {
           padding: `0 ${paddingXS}px`,
           [`${antCls}-input`]: {
             fontSize: fontSizeSM,
+            textTransform: 'uppercase',
             lineHeight: `${controlHeightSM - 2 * lineWidth}px`,
           },
           [`${antCls}-input-prefix`]: {
diff --git a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap
index 571042719a1b..9cd77f31275d 100644
--- a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap
+++ b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap
@@ -901,16 +901,18 @@ exports[`ConfigProvider components Badge configProvider 1`] = `
       data-show="true"
       title="5"
     >
-      <span
-        class="config-scroll-number-only"
-        style="transition: none;"
-      >
+      <bdi>
         <span
-          class="config-scroll-number-only-unit current"
+          class="config-scroll-number-only"
+          style="transition: none;"
         >
-          5
+          <span
+            class="config-scroll-number-only-unit current"
+          >
+            5
+          </span>
         </span>
-      </span>
+      </bdi>
     </sup>
   </span>
   <span
@@ -936,16 +938,18 @@ exports[`ConfigProvider components Badge configProvider componentDisabled 1`] =
       data-show="true"
       title="5"
     >
-      <span
-        class="config-scroll-number-only"
-        style="transition: none;"
-      >
+      <bdi>
         <span
-          class="config-scroll-number-only-unit current"
+          class="config-scroll-number-only"
+          style="transition: none;"
         >
-          5
+          <span
+            class="config-scroll-number-only-unit current"
+          >
+            5
+          </span>
         </span>
-      </span>
+      </bdi>
     </sup>
   </span>
   <span
@@ -971,16 +975,18 @@ exports[`ConfigProvider components Badge configProvider componentSize large 1`]
       data-show="true"
       title="5"
     >
-      <span
-        class="config-scroll-number-only"
-        style="transition: none;"
-      >
+      <bdi>
         <span
-          class="config-scroll-number-only-unit current"
+          class="config-scroll-number-only"
+          style="transition: none;"
         >
-          5
+          <span
+            class="config-scroll-number-only-unit current"
+          >
+            5
+          </span>
         </span>
-      </span>
+      </bdi>
     </sup>
   </span>
   <span
@@ -1006,16 +1012,18 @@ exports[`ConfigProvider components Badge configProvider componentSize middle 1`]
       data-show="true"
       title="5"
     >
-      <span
-        class="config-scroll-number-only"
-        style="transition: none;"
-      >
+      <bdi>
         <span
-          class="config-scroll-number-only-unit current"
+          class="config-scroll-number-only"
+          style="transition: none;"
         >
-          5
+          <span
+            class="config-scroll-number-only-unit current"
+          >
+            5
+          </span>
         </span>
-      </span>
+      </bdi>
     </sup>
   </span>
   <span
@@ -1041,16 +1049,18 @@ exports[`ConfigProvider components Badge configProvider componentSize small 1`]
       data-show="true"
       title="5"
     >
-      <span
-        class="config-scroll-number-only"
-        style="transition: none;"
-      >
+      <bdi>
         <span
-          class="config-scroll-number-only-unit current"
+          class="config-scroll-number-only"
+          style="transition: none;"
         >
-          5
+          <span
+            class="config-scroll-number-only-unit current"
+          >
+            5
+          </span>
         </span>
-      </span>
+      </bdi>
     </sup>
   </span>
   <span
@@ -1076,16 +1086,18 @@ exports[`ConfigProvider components Badge normal 1`] = `
       data-show="true"
       title="5"
     >
-      <span
-        class="ant-scroll-number-only"
-        style="transition: none;"
-      >
+      <bdi>
         <span
-          class="ant-scroll-number-only-unit current"
+          class="ant-scroll-number-only"
+          style="transition: none;"
         >
-          5
+          <span
+            class="ant-scroll-number-only-unit current"
+          >
+            5
+          </span>
         </span>
-      </span>
+      </bdi>
     </sup>
   </span>
   <span
@@ -1111,16 +1123,18 @@ exports[`ConfigProvider components Badge prefixCls 1`] = `
       data-show="true"
       title="5"
     >
-      <span
-        class="prefix-scroll-number-only"
-        style="transition: none;"
-      >
+      <bdi>
         <span
-          class="prefix-scroll-number-only-unit current"
+          class="prefix-scroll-number-only"
+          style="transition: none;"
         >
-          5
+          <span
+            class="prefix-scroll-number-only-unit current"
+          >
+            5
+          </span>
         </span>
-      </span>
+      </bdi>
     </sup>
   </span>
   <span
@@ -25430,6 +25444,7 @@ exports[`ConfigProvider components Slider configProvider 1`] = `
   />
   <div
     aria-disabled="false"
+    aria-orientation="horizontal"
     aria-valuemax="100"
     aria-valuemin="0"
     aria-valuenow="0"
@@ -25476,6 +25491,7 @@ exports[`ConfigProvider components Slider configProvider componentDisabled 1`] =
   />
   <div
     aria-disabled="true"
+    aria-orientation="horizontal"
     aria-valuemax="100"
     aria-valuemin="0"
     aria-valuenow="0"
@@ -25521,6 +25537,7 @@ exports[`ConfigProvider components Slider configProvider componentSize large 1`]
   />
   <div
     aria-disabled="false"
+    aria-orientation="horizontal"
     aria-valuemax="100"
     aria-valuemin="0"
     aria-valuenow="0"
@@ -25567,6 +25584,7 @@ exports[`ConfigProvider components Slider configProvider componentSize middle 1`
   />
   <div
     aria-disabled="false"
+    aria-orientation="horizontal"
     aria-valuemax="100"
     aria-valuemin="0"
     aria-valuenow="0"
@@ -25613,6 +25631,7 @@ exports[`ConfigProvider components Slider configProvider componentSize small 1`]
   />
   <div
     aria-disabled="false"
+    aria-orientation="horizontal"
     aria-valuemax="100"
     aria-valuemin="0"
     aria-valuenow="0"
@@ -25659,6 +25678,7 @@ exports[`ConfigProvider components Slider normal 1`] = `
   />
   <div
     aria-disabled="false"
+    aria-orientation="horizontal"
     aria-valuemax="100"
     aria-valuemin="0"
     aria-valuenow="0"
@@ -25705,6 +25725,7 @@ exports[`ConfigProvider components Slider prefixCls 1`] = `
   />
   <div
     aria-disabled="false"
+    aria-orientation="horizontal"
     aria-valuemax="100"
     aria-valuemin="0"
     aria-valuenow="0"
diff --git a/components/config-provider/style/index.ts b/components/config-provider/style/index.ts
index 87514c6073f1..23c40cb76c27 100644
--- a/components/config-provider/style/index.ts
+++ b/components/config-provider/style/index.ts
@@ -1,31 +1,2 @@
-import { useStyleRegister } from '@ant-design/cssinjs';
-import type { CSPConfig } from '..';
-import { resetIcon } from '../../style';
-import { useToken } from '../../theme/internal';
-
-const useStyle = (iconPrefixCls: string, csp?: CSPConfig) => {
-  const [theme, token] = useToken();
-
-  // Generate style for icons
-  return useStyleRegister(
-    {
-      theme,
-      token,
-      hashId: '',
-      path: ['ant-design-icons', iconPrefixCls],
-      nonce: () => csp?.nonce!,
-    },
-    () => [
-      {
-        [`.${iconPrefixCls}`]: {
-          ...resetIcon(),
-          [`.${iconPrefixCls} .${iconPrefixCls}-icon`]: {
-            display: 'block',
-          },
-        },
-      },
-    ],
-  );
-};
-
-export default useStyle;
+// eslint-disable-next-line no-restricted-exports
+export { useResetIconStyle as default } from '../../theme/internal';
diff --git a/components/date-picker/__tests__/DatePicker.test.tsx b/components/date-picker/__tests__/DatePicker.test.tsx
index 54c91b3bbfb5..00270af3faf6 100644
--- a/components/date-picker/__tests__/DatePicker.test.tsx
+++ b/components/date-picker/__tests__/DatePicker.test.tsx
@@ -186,6 +186,25 @@ describe('DatePicker', () => {
     expect(mouseDownEvent).not.toThrow();
   });
 
+  it('showTime should work correctly when format is Array', () => {
+    const { container } = render(
+      <DatePicker
+        defaultValue={dayjs()}
+        showTime
+        format={['YYYY-MM-DD HH:mm']}
+        open
+      />,
+    );
+    const fuousEvent = () => {
+      fireEvent.focus(container.querySelector('input')!);
+    };
+    const mouseDownEvent = () => {
+      fireEvent.mouseDown(container.querySelector('input')!);
+    };
+    expect(fuousEvent).not.toThrow();
+    expect(mouseDownEvent).not.toThrow();
+  });
+
   it('12 hours', () => {
     const { container } = render(
       <DatePicker defaultValue={dayjs()} showTime format="YYYY-MM-DD HH:mm:ss A" open />,
diff --git a/components/date-picker/generatePicker/generateRangePicker.tsx b/components/date-picker/generatePicker/generateRangePicker.tsx
index 503f2806ddfb..e601f0e70e75 100644
--- a/components/date-picker/generatePicker/generateRangePicker.tsx
+++ b/components/date-picker/generatePicker/generateRangePicker.tsx
@@ -68,9 +68,7 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
 
     const [wrapSSR, hashId] = useStyle(prefixCls);
 
-    let additionalOverrideProps: any = {};
-    additionalOverrideProps = {
-      ...additionalOverrideProps,
+    const additionalOverrideProps: any = {
       ...(showTime ? getTimeProps({ format, picker, ...showTime }) : {}),
       ...(picker === 'time' ? getTimeProps({ format, ...props, picker }) : {}),
     };
diff --git a/components/date-picker/index.zh-CN.md b/components/date-picker/index.zh-CN.md
index bcb7e655e222..d9f1dc1371ba 100644
--- a/components/date-picker/index.zh-CN.md
+++ b/components/date-picker/index.zh-CN.md
@@ -58,6 +58,7 @@ demo:
 
 ```jsx
 import 'dayjs/locale/zh-cn';
+
 import locale from 'antd/es/date-picker/locale/zh_CN';
 
 <DatePicker locale={locale} />;
@@ -66,7 +67,9 @@ import locale from 'antd/es/date-picker/locale/zh_CN';
 ```jsx
 // 默认语言为 en-US，如果你需要设置其他语言，推荐在入口文件全局设置 locale
 import dayjs from 'dayjs';
+
 import 'dayjs/locale/zh-cn';
+
 import locale from 'antd/locale/zh_CN';
 
 <ConfigProvider locale={locale}>
@@ -216,7 +219,7 @@ type GenericFn = (value: Dayjs) => string;
 export type FormatType = Generic | GenericFn | Array<Generic | GenericFn>;
 ```
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="DatePicker"></ComponentTokenTable>
 
@@ -244,6 +247,7 @@ export type FormatType = Generic | GenericFn | Array<Generic | GenericFn>;
 
 ```js
 import dayjs from 'dayjs';
+
 import 'dayjs/locale/zh-cn';
 
 import updateLocale from 'dayjs/plugin/updateLocale';
diff --git a/components/date-picker/style/index.ts b/components/date-picker/style/index.ts
index 340ad44eb9cd..62ef3f039d5b 100644
--- a/components/date-picker/style/index.ts
+++ b/components/date-picker/style/index.ts
@@ -130,6 +130,12 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
       borderRadius: borderRadiusSM,
       transition: `background ${motionDurationMid}, border ${motionDurationMid}`,
     },
+    [`&-range-hover-start, &-range-hover-end`]: {
+      [pickerCellInnerCls]: {
+        borderStartEndRadius: 0,
+        borderEndEndRadius: 0,
+      },
+    },
 
     // >>> Hover
     [`&:hover:not(${pickerCellCls}-in-view),
@@ -263,8 +269,8 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
       &-in-view${pickerCellCls}-range-hover-start::after`]: {
       insetInlineStart: (pickerPanelCellWidth - pickerPanelCellHeight) / 2,
       borderInlineStart: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
-      borderStartStartRadius: lineWidth,
-      borderEndStartRadius: lineWidth,
+      borderStartStartRadius: borderRadiusSM,
+      borderEndStartRadius: borderRadiusSM,
     },
 
     // Edge end
@@ -275,8 +281,8 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
       &-in-view${pickerCellCls}-range-hover-end::after`]: {
       insetInlineEnd: (pickerPanelCellWidth - pickerPanelCellHeight) / 2,
       borderInlineEnd: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
-      borderStartEndRadius: lineWidth,
-      borderEndEndRadius: lineWidth,
+      borderStartEndRadius: borderRadiusSM,
+      borderEndEndRadius: borderRadiusSM,
     },
 
     // >>> Disabled
@@ -801,6 +807,8 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
 
           th: {
             width: pickerPanelCellWidth,
+            boxSizing: 'border-box',
+            padding: 0,
           },
         },
       },
diff --git a/components/date-picker/util.ts b/components/date-picker/util.ts
index f624b5aebba0..c308fad42260 100644
--- a/components/date-picker/util.ts
+++ b/components/date-picker/util.ts
@@ -126,6 +126,11 @@ export function getTimeProps<DateType, DisabledTime>(
   const firstFormat = toArray(format)[0];
   const showTimeObj = { ...props };
 
+  // https://github.com/ant-design/ant-design/issues/44275
+  if (format && Array.isArray(format)) {
+    showTimeObj.format = firstFormat;
+  }
+
   if (firstFormat && typeof firstFormat === 'string') {
     if (!firstFormat.includes('s') && showSecond === undefined) {
       showTimeObj.showSecond = false;
diff --git a/components/descriptions/__tests__/index.test.tsx b/components/descriptions/__tests__/index.test.tsx
index 5b652e350493..54669dbe6523 100644
--- a/components/descriptions/__tests__/index.test.tsx
+++ b/components/descriptions/__tests__/index.test.tsx
@@ -320,4 +320,20 @@ describe('Descriptions', () => {
     const view = nestDesc.querySelector('.ant-descriptions-view');
     expect(getComputedStyle(view!).border).toBeFalsy();
   });
+
+  it('Should Descriptions not throw react key prop error in jsx mode', () => {
+    render(
+      <Descriptions title="User Info">
+        <Descriptions.Item key="1" label="UserName">
+          Zhou Maomao
+        </Descriptions.Item>
+        <Descriptions.Item label="Telephone">1810000000</Descriptions.Item>
+      </Descriptions>,
+    );
+    expect(errorSpy).not.toHaveBeenCalledWith(
+      expect.stringContaining('`key` is not a prop'),
+      expect.anything(),
+      expect.anything(),
+    );
+  });
 });
diff --git a/components/descriptions/hooks/useRow.ts b/components/descriptions/hooks/useRow.ts
index 40e4b05039b7..0b44fe06314e 100644
--- a/components/descriptions/hooks/useRow.ts
+++ b/components/descriptions/hooks/useRow.ts
@@ -27,7 +27,7 @@ function getFilledItem(
 
 // Convert children into items
 const transChildren2Items = (childNodes?: React.ReactNode) =>
-  toArray(childNodes).map((node) => node?.props);
+  toArray(childNodes).map((node) => ({ ...node?.props }));
 
 // Calculate the sum of span in a row
 function getCalcRows(rowItems: DescriptionsItemType[], mergedColumn: number) {
diff --git a/components/descriptions/index.zh-CN.md b/components/descriptions/index.zh-CN.md
index d61a1e9eae68..8b5c51a62f54 100644
--- a/components/descriptions/index.zh-CN.md
+++ b/components/descriptions/index.zh-CN.md
@@ -103,6 +103,6 @@ const items: DescriptionsProps['items'] = [
 
 > span 是 Description.Item 的数量。 span={2} 会占用两个 DescriptionItem 的宽度。当同时配置 `style` 和 `labelStyle`（或 `contentStyle`）时，两者会同时作用。样式冲突时，后者会覆盖前者。
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Descriptions"></ComponentTokenTable>
diff --git a/components/divider/index.zh-CN.md b/components/divider/index.zh-CN.md
index c5005e407992..50196b3ada01 100644
--- a/components/divider/index.zh-CN.md
+++ b/components/divider/index.zh-CN.md
@@ -42,6 +42,6 @@ group:
 | style | 分割线样式对象 | CSSProperties | - |  |
 | type | 水平还是垂直类型 | `horizontal` \| `vertical` | `horizontal` |  |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Divider"></ComponentTokenTable>
diff --git a/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap b/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap
index 381b208a98a2..55884ca70abf 100644
--- a/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap
+++ b/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap
@@ -526,14 +526,11 @@ Array [
           viewBox="64 64 896 896"
           width="1em"
         >
-          <defs>
-            <style />
-          </defs>
           <path
             d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
           />
           <path
-            d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+            d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
           />
         </svg>
       </span>
diff --git a/components/drawer/__tests__/__snapshots__/demo.test.ts.snap b/components/drawer/__tests__/__snapshots__/demo.test.ts.snap
index 44f81dd70fbf..96a9281129e8 100644
--- a/components/drawer/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/drawer/__tests__/__snapshots__/demo.test.ts.snap
@@ -218,14 +218,11 @@ exports[`renders components/drawer/demo/form-in-drawer.tsx correctly 1`] = `
         viewBox="64 64 896 896"
         width="1em"
       >
-        <defs>
-          <style />
-        </defs>
         <path
           d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
         />
         <path
-          d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+          d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
         />
       </svg>
     </span>
diff --git a/components/drawer/demo/render-in-current.md b/components/drawer/demo/render-in-current.md
index 3432c203483c..ce5ddaaa4551 100644
--- a/components/drawer/demo/render-in-current.md
+++ b/components/drawer/demo/render-in-current.md
@@ -4,8 +4,12 @@
 
 > 注意：在 v5 中 `style` 与 `className` 迁移至 Drawer 面板上与 Modal 保持一致，原 `style` 与 `className` 替换为 `rootStyle` 与 `rootClassName`。
 
+> 当 `getContainer` 返回 DOM 节点时，需要手动设置 `rootStyle` 为 `{ position: 'absolute' }`，参考 [#41951](https://github.com/ant-design/ant-design/issues/41951#issuecomment-1521099152)。
+
 ## en-US
 
 Render in current dom. custom container, check `getContainer`.
 
 > Note: `style` and `className` props are moved to Drawer panel in v5 which is aligned with Modal component. Original `style` and `className` props are replaced by `rootStyle` and `rootClassName`.
+
+> When `getContainer` returns a DOM node, you need to manually set `rootStyle` to `{ position: 'absolute' }`, see [#41951](https://github.com/ant-design/ant-design/issues/41951#issuecomment-1521099152).
diff --git a/components/drawer/index.zh-CN.md b/components/drawer/index.zh-CN.md
index 06ac5808f7dd..d926ceb57d03 100644
--- a/components/drawer/index.zh-CN.md
+++ b/components/drawer/index.zh-CN.md
@@ -56,7 +56,7 @@ demo:
 | forceRender | 预渲染 Drawer 内元素 | boolean | false |  |
 | getContainer | 指定 Drawer 挂载的节点，**并在容器内展现**，`false` 为挂载在当前位置 | HTMLElement \| () => HTMLElement \| Selectors \| false | body |  |
 | headerStyle | 用于设置 Drawer 头部的样式 | CSSProperties | - |  |
-| height | 高度, 在 `placement` 为 `top` 或 `bottom` 时使用 | string \| number | 378 |  |
+| height | 高度，在 `placement` 为 `top` 或 `bottom` 时使用 | string \| number | 378 |  |
 | keyboard | 是否支持键盘 esc 关闭 | boolean | true |  |
 | mask | 是否展示遮罩 | boolean | true |  |
 | maskClosable | 点击蒙层是否允许关闭 | boolean | true |  |
@@ -72,6 +72,6 @@ demo:
 | zIndex | 设置 Drawer 的 `z-index` | number | 1000 |  |
 | onClose | 点击遮罩层或左上角叉或取消按钮的回调 | function(e) | - |  |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Drawer"></ComponentTokenTable>
diff --git a/components/dropdown/dropdown.tsx b/components/dropdown/dropdown.tsx
index ca92efd35b03..8bc58cd2b0bb 100644
--- a/components/dropdown/dropdown.tsx
+++ b/components/dropdown/dropdown.tsx
@@ -4,6 +4,7 @@ import RcDropdown from 'rc-dropdown';
 import useEvent from 'rc-util/lib/hooks/useEvent';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import omit from 'rc-util/lib/omit';
+import type { AlignType } from '@rc-component/trigger';
 import * as React from 'react';
 import genPurePanel from '../_util/PurePanel';
 import type { AdjustOverflow } from '../_util/placements';
@@ -28,24 +29,11 @@ const Placements = [
   'bottom',
 ] as const;
 
-type Placement = (typeof Placements)[number];
+type Placement = typeof Placements[number];
 type DropdownPlacement = Exclude<Placement, 'topCenter' | 'bottomCenter'>;
 
 type OverlayFunc = () => React.ReactElement;
 
-type Align = {
-  points?: [string, string];
-  offset?: [number, number];
-  targetOffset?: [number, number];
-  overflow?: {
-    adjustX?: boolean;
-    adjustY?: boolean;
-  };
-  useCssRight?: boolean;
-  useCssBottom?: boolean;
-  useCssTransform?: boolean;
-};
-
 export type DropdownArrowOptions = {
   pointAtCenter?: boolean;
 };
@@ -60,7 +48,7 @@ export interface DropdownProps {
   open?: boolean;
   disabled?: boolean;
   destroyPopupOnHide?: boolean;
-  align?: Align;
+  align?: AlignType;
   getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
   prefixCls?: string;
   className?: string;
diff --git a/components/dropdown/index.zh-CN.md b/components/dropdown/index.zh-CN.md
index b460404089be..f9911a85ac05 100644
--- a/components/dropdown/index.zh-CN.md
+++ b/components/dropdown/index.zh-CN.md
@@ -58,7 +58,7 @@ demo:
 | overlayClassName | 下拉根元素的类名称 | string | - |  |
 | overlayStyle | 下拉根元素的样式 | CSSProperties | - |  |
 | placement | 菜单弹出位置：`bottom` `bottomLeft` `bottomRight` `top` `topLeft` `topRight` | string | `bottomLeft` |  |
-| trigger | 触发下拉的行为, 移动端不支持 hover | Array&lt;`click`\|`hover`\|`contextMenu`> | \[`hover`] |  |
+| 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 |
 
@@ -80,7 +80,7 @@ demo:
 
 请确保 `Dropdown` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Dropdown"></ComponentTokenTable>
 
diff --git a/components/empty/index.zh-CN.md b/components/empty/index.zh-CN.md
index 568a4fb64c8a..f2f5499fd609 100644
--- a/components/empty/index.zh-CN.md
+++ b/components/empty/index.zh-CN.md
@@ -66,6 +66,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*obM7S5lIxeMAAA
   }
 </style>
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Empty"></ComponentTokenTable>
diff --git a/components/float-button/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/float-button/__tests__/__snapshots__/demo-extend.test.ts.snap
index b2861ebf4250..d3ebfdb2e715 100644
--- a/components/float-button/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/float-button/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -124,16 +124,18 @@ Array [
           data-show="true"
           title="5"
         >
-          <span
-            class="ant-scroll-number-only"
-            style="transition: none;"
-          >
+          <bdi>
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition: none;"
             >
-              5
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                5
+              </span>
             </span>
-          </span>
+          </bdi>
         </sup>
       </span>
       <div
@@ -201,16 +203,18 @@ Array [
           data-show="true"
           title="5"
         >
-          <span
-            class="ant-scroll-number-only"
-            style="transition: none;"
-          >
+          <bdi>
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition: none;"
             >
-              5
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                5
+              </span>
             </span>
-          </span>
+          </bdi>
         </sup>
       </span>
     </button>
@@ -264,26 +268,28 @@ Array [
           data-show="true"
           title="12"
         >
-          <span
-            class="ant-scroll-number-only"
-            style="transition: none;"
-          >
+          <bdi>
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition: none;"
             >
-              1
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                1
+              </span>
             </span>
-          </span>
-          <span
-            class="ant-scroll-number-only"
-            style="transition: none;"
-          >
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition: none;"
             >
-              2
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                2
+              </span>
             </span>
-          </span>
+          </bdi>
         </sup>
       </span>
     </button>
@@ -330,36 +336,38 @@ Array [
           data-show="true"
           title="123"
         >
-          <span
-            class="ant-scroll-number-only"
-            style="transition: none;"
-          >
+          <bdi>
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition: none;"
             >
-              1
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                1
+              </span>
             </span>
-          </span>
-          <span
-            class="ant-scroll-number-only"
-            style="transition: none;"
-          >
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition: none;"
             >
-              2
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                2
+              </span>
             </span>
-          </span>
-          <span
-            class="ant-scroll-number-only"
-            style="transition: none;"
-          >
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition: none;"
             >
-              3
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                3
+              </span>
             </span>
-          </span>
+          </bdi>
         </sup>
       </span>
     </button>
@@ -423,6 +431,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="20"
       aria-valuemin="0"
       aria-valuenow="0"
diff --git a/components/float-button/__tests__/__snapshots__/demo.test.ts.snap b/components/float-button/__tests__/__snapshots__/demo.test.ts.snap
index 9bae2695d30a..bc587db888a5 100644
--- a/components/float-button/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/float-button/__tests__/__snapshots__/demo.test.ts.snap
@@ -122,16 +122,18 @@ Array [
           data-show="true"
           title="5"
         >
-          <span
-            class="ant-scroll-number-only"
-            style="transition:none"
-          >
+          <bdi>
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition:none"
             >
-              5
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                5
+              </span>
             </span>
-          </span>
+          </bdi>
         </sup>
       </span>
     </button>
@@ -178,16 +180,18 @@ Array [
           data-show="true"
           title="5"
         >
-          <span
-            class="ant-scroll-number-only"
-            style="transition:none"
-          >
+          <bdi>
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition:none"
             >
-              5
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                5
+              </span>
             </span>
-          </span>
+          </bdi>
         </sup>
       </span>
     </button>
@@ -241,26 +245,28 @@ Array [
           data-show="true"
           title="12"
         >
-          <span
-            class="ant-scroll-number-only"
-            style="transition:none"
-          >
+          <bdi>
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition:none"
             >
-              1
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                1
+              </span>
             </span>
-          </span>
-          <span
-            class="ant-scroll-number-only"
-            style="transition:none"
-          >
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition:none"
             >
-              2
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                2
+              </span>
             </span>
-          </span>
+          </bdi>
         </sup>
       </span>
     </button>
@@ -307,36 +313,38 @@ Array [
           data-show="true"
           title="123"
         >
-          <span
-            class="ant-scroll-number-only"
-            style="transition:none"
-          >
+          <bdi>
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition:none"
             >
-              1
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                1
+              </span>
             </span>
-          </span>
-          <span
-            class="ant-scroll-number-only"
-            style="transition:none"
-          >
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition:none"
             >
-              2
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                2
+              </span>
             </span>
-          </span>
-          <span
-            class="ant-scroll-number-only"
-            style="transition:none"
-          >
             <span
-              class="ant-scroll-number-only-unit current"
+              class="ant-scroll-number-only"
+              style="transition:none"
             >
-              3
+              <span
+                class="ant-scroll-number-only-unit current"
+              >
+                3
+              </span>
             </span>
-          </span>
+          </bdi>
         </sup>
       </span>
     </button>
@@ -398,6 +406,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="20"
       aria-valuemin="0"
       aria-valuenow="0"
diff --git a/components/float-button/index.zh-CN.md b/components/float-button/index.zh-CN.md
index 165cb9872668..3b9efdc5e8d5 100644
--- a/components/float-button/index.zh-CN.md
+++ b/components/float-button/index.zh-CN.md
@@ -71,6 +71,6 @@ tag: New
 | visibilityHeight | 滚动高度达到此参数值才出现 BackTop | number            | 400          |      |
 | onClick          | 点击按钮的回调函数                 | () => void        | -            |      |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="FloatButton"></ComponentTokenTable>
diff --git a/components/float-button/style/index.ts b/components/float-button/style/index.ts
index a0c031f5998c..0e70ad8a6a39 100644
--- a/components/float-button/style/index.ts
+++ b/components/float-button/style/index.ts
@@ -220,9 +220,6 @@ const sharedFloatButtonStyle: GenerateStyle<FloatButtonToken, CSSObject> = (toke
       position: 'fixed',
       cursor: 'pointer',
       zIndex: 99,
-      display: 'block',
-      justifyContent: 'center',
-      alignItems: 'center',
       width: floatButtonSize,
       height: floatButtonSize,
       insetInlineEnd: token.floatButtonInsetInlineEnd,
diff --git a/components/form/FormItemInput.tsx b/components/form/FormItemInput.tsx
index a806be17940c..741a86d92061 100644
--- a/components/form/FormItemInput.tsx
+++ b/components/form/FormItemInput.tsx
@@ -1,10 +1,12 @@
-import classNames from 'classnames';
 import * as React from 'react';
+import classNames from 'classnames';
+
 import type { ColProps } from '../grid/col';
 import Col from '../grid/col';
 import { FormContext, FormItemPrefixContext } from './context';
 import ErrorList from './ErrorList';
 import type { ValidateStatus } from './FormItem';
+import FallbackCmp from './style/fallbackCmp';
 
 interface FormItemInputMiscProps {
   prefixCls: string;
@@ -116,6 +118,7 @@ const FormItemInput: React.FC<FormItemInputProps & FormItemInputMiscProps> = (pr
       <Col {...mergedWrapperCol} className={className}>
         {dom}
       </Col>
+      <FallbackCmp prefixCls={prefixCls} />
     </FormContext.Provider>
   );
 };
diff --git a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
index 23adac0b8e45..5c48f9b1dc7a 100644
--- a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -2434,6 +2434,142 @@ exports[`renders components/form/demo/customized-form-controls.tsx extend contex
 
 exports[`renders components/form/demo/customized-form-controls.tsx extend context correctly 2`] = `[]`;
 
+exports[`renders components/form/demo/dependencies.tsx extend context correctly 1`] = `
+<form
+  autocomplete="off"
+  class="ant-form ant-form-vertical"
+  id="dependencies"
+  style="max-width: 600px;"
+>
+  <div
+    class="ant-alert ant-alert-info"
+    data-show="true"
+    role="alert"
+  >
+    <span
+      aria-label="info-circle"
+      class="anticon anticon-info-circle ant-alert-icon"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        data-icon="info-circle"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+        />
+      </svg>
+    </span>
+    <div
+      class="ant-alert-content"
+    >
+      <div
+        class="ant-alert-message"
+      >
+         Try modify \`Password2\` and then modify \`Password\`
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label"
+      >
+        <label
+          class="ant-form-item-required"
+          for="dependencies_password"
+          title="Password"
+        >
+          Password
+        </label>
+      </div>
+      <div
+        class="ant-col 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="dependencies_password"
+              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-form-item-label"
+      >
+        <label
+          class="ant-form-item-required"
+          for="dependencies_password2"
+          title="Confirm Password"
+        >
+          Confirm Password
+        </label>
+      </div>
+      <div
+        class="ant-col 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="dependencies_password2"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <article
+    class="ant-typography"
+  >
+    <p>
+      Only Update when
+      <code>
+        password2
+      </code>
+       updated:
+    </p>
+    <pre>
+      {}
+    </pre>
+  </article>
+</form>
+`;
+
+exports[`renders components/form/demo/dependencies.tsx extend context correctly 2`] = `[]`;
+
 exports[`renders components/form/demo/disabled.tsx extend context correctly 1`] = `
 Array [
   <label
@@ -5177,14 +5313,11 @@ Array [
                             viewBox="64 64 896 896"
                             width="1em"
                           >
-                            <defs>
-                              <style />
-                            </defs>
                             <path
                               d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
                             />
                             <path
-                              d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+                              d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
                             />
                           </svg>
                         </span>
@@ -5282,6 +5415,7 @@ Array [
                 />
                 <div
                   aria-disabled="true"
+                  aria-orientation="horizontal"
                   aria-valuemax="100"
                   aria-valuemin="0"
                   aria-valuenow="0"
@@ -6051,14 +6185,11 @@ exports[`renders components/form/demo/dynamic-form-item.tsx extend context corre
                     viewBox="64 64 896 896"
                     width="1em"
                   >
-                    <defs>
-                      <style />
-                    </defs>
                     <path
                       d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
                     />
                     <path
-                      d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+                      d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
                     />
                   </svg>
                 </span>
@@ -6089,14 +6220,11 @@ exports[`renders components/form/demo/dynamic-form-item.tsx extend context corre
                     viewBox="64 64 896 896"
                     width="1em"
                   >
-                    <defs>
-                      <style />
-                    </defs>
                     <path
                       d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
                     />
                     <path
-                      d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+                      d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
                     />
                   </svg>
                 </span>
@@ -6186,14 +6314,11 @@ exports[`renders components/form/demo/dynamic-form-items.tsx extend context corr
                     viewBox="64 64 896 896"
                     width="1em"
                   >
-                    <defs>
-                      <style />
-                    </defs>
                     <path
                       d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
                     />
                     <path
-                      d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+                      d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
                     />
                   </svg>
                 </span>
@@ -6248,261 +6373,153 @@ exports[`renders components/form/demo/dynamic-form-items-complex.tsx extend cont
   style="max-width: 600px;"
 >
   <div
-    class="ant-form-item"
+    style="display: flex; row-gap: 16px; flex-direction: column;"
   >
     <div
-      class="ant-row ant-form-item-row"
+      class="ant-card ant-card-bordered ant-card-small"
     >
       <div
-        class="ant-col ant-form-item-label"
+        class="ant-card-head"
       >
-        <label
-          class="ant-form-item-required"
-          for="dynamic_form_complex_area"
-          title="Area"
+        <div
+          class="ant-card-head-wrapper"
         >
-          Area
-        </label>
+          <div
+            class="ant-card-head-title"
+          >
+            Item 1
+          </div>
+          <div
+            class="ant-card-extra"
+          >
+            <span
+              aria-label="close"
+              class="anticon anticon-close"
+              role="img"
+              tabindex="-1"
+            >
+              <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>
+          </div>
+        </div>
       </div>
       <div
-        class="ant-col ant-form-item-control"
+        class="ant-card-body"
       >
         <div
-          class="ant-form-item-control-input"
+          class="ant-form-item"
         >
           <div
-            class="ant-form-item-control-input-content"
+            class="ant-row ant-form-item-row"
           >
             <div
-              aria-required="true"
-              class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
+              class="ant-col ant-col-6 ant-form-item-label"
+            >
+              <label
+                class=""
+                for="dynamic_form_complex_items_0_name"
+                title="Name"
+              >
+                Name
+              </label>
+            </div>
+            <div
+              class="ant-col ant-col-18 ant-form-item-control"
             >
               <div
-                class="ant-select-selector"
+                class="ant-form-item-control-input"
               >
-                <span
-                  class="ant-select-selection-search"
+                <div
+                  class="ant-form-item-control-input-content"
                 >
                   <input
-                    aria-autocomplete="list"
-                    aria-controls="dynamic_form_complex_area_list"
-                    aria-expanded="false"
-                    aria-haspopup="listbox"
-                    aria-label="Search"
-                    aria-owns="dynamic_form_complex_area_list"
-                    aria-required="true"
-                    autocomplete="off"
-                    class="ant-select-selection-search-input"
-                    id="dynamic_form_complex_area"
-                    readonly=""
-                    role="combobox"
-                    style="opacity: 0;"
-                    type="search"
-                    unselectable="on"
+                    class="ant-input"
+                    id="dynamic_form_complex_items_0_name"
+                    type="text"
                     value=""
                   />
-                </span>
-                <span
-                  class="ant-select-selection-placeholder"
-                />
-              </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="dynamic_form_complex_area_list"
-                    role="listbox"
-                    style="height: 0px; width: 0px; overflow: hidden;"
-                  >
-                    <div
-                      aria-label="Beijing"
-                      aria-selected="false"
-                      id="dynamic_form_complex_area_list_0"
-                      role="option"
-                    >
-                      Beijing
-                    </div>
-                    <div
-                      aria-label="Shanghai"
-                      aria-selected="false"
-                      id="dynamic_form_complex_area_list_1"
-                      role="option"
-                    >
-                      Shanghai
-                    </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="Beijing"
-                          >
-                            <div
-                              class="ant-select-item-option-content"
-                            >
-                              Beijing
-                            </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="Shanghai"
-                          >
-                            <div
-                              class="ant-select-item-option-content"
-                            >
-                              Shanghai
-                            </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-form-item-control"
-      >
         <div
-          class="ant-form-item-control-input"
+          class="ant-form-item"
         >
           <div
-            class="ant-form-item-control-input-content"
+            class="ant-row ant-form-item-row"
           >
-            <button
-              class="ant-btn ant-btn-dashed ant-btn-block"
-              type="button"
+            <div
+              class="ant-col ant-col-6 ant-form-item-label"
             >
-              <span
-                class="ant-btn-icon"
+              <label
+                class=""
+                title="List"
               >
-                <span
-                  aria-label="plus"
-                  class="anticon anticon-plus"
-                  role="img"
+                List
+              </label>
+            </div>
+            <div
+              class="ant-col ant-col-18 ant-form-item-control"
+            >
+              <div
+                class="ant-form-item-control-input"
+              >
+                <div
+                  class="ant-form-item-control-input-content"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="plus"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
+                  <div
+                    style="display: flex; flex-direction: column; row-gap: 16px;"
                   >
-                    <defs>
-                      <style />
-                    </defs>
-                    <path
-                      d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
-                    />
-                    <path
-                      d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <span>
-                Add sights
-              </span>
-            </button>
+                    <button
+                      class="ant-btn ant-btn-dashed ant-btn-block"
+                      type="button"
+                    >
+                      <span>
+                        + Add Sub Item
+                      </span>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-  <div
-    class="ant-form-item"
-  >
-    <div
-      class="ant-row ant-form-item-row"
+    <button
+      class="ant-btn ant-btn-dashed ant-btn-block"
+      type="button"
     >
-      <div
-        class="ant-col 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>
-          </div>
-        </div>
-      </div>
-    </div>
+      <span>
+        + Add Item
+      </span>
+    </button>
   </div>
+  <article
+    class="ant-typography"
+  >
+    <pre>
+      {
+  "items": [
+    {}
+  ]
+}
+    </pre>
+  </article>
 </form>
 `;
 
@@ -6576,14 +6593,11 @@ exports[`renders components/form/demo/dynamic-form-items-no-style.tsx extend con
                               viewBox="64 64 896 896"
                               width="1em"
                             >
-                              <defs>
-                                <style />
-                              </defs>
                               <path
                                 d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
                               />
                               <path
-                                d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+                                d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
                               />
                             </svg>
                           </span>
@@ -6833,6 +6847,25 @@ exports[`renders components/form/demo/form-context.tsx extend context correctly
       </div>
     </div>
   </div>
+  <div
+    class="ant-form-item ant-form-item-hidden"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <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>
+      </div>
+    </div>
+  </div>
   <div
     class="ant-form-item"
   >
@@ -6928,7 +6961,11 @@ exports[`renders components/form/demo/form-context.tsx extend context correctly
 </form>
 `;
 
-exports[`renders components/form/demo/form-context.tsx extend context correctly 2`] = `[]`;
+exports[`renders components/form/demo/form-context.tsx extend context correctly 2`] = `
+[
+  "Warning: [antd: Form.Item] \`name\` is only used for validate React element. If you are using Form.Item as layout display, please remove \`name\` instead.",
+]
+`;
 
 exports[`renders components/form/demo/form-in-modal.tsx extend context correctly 1`] = `
 <div>
@@ -19953,6 +19990,7 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl
               </div>
               <div
                 aria-disabled="false"
+                aria-orientation="horizontal"
                 aria-valuemax="100"
                 aria-valuemin="0"
                 aria-valuenow="0"
diff --git a/components/form/__tests__/__snapshots__/demo.test.tsx.snap b/components/form/__tests__/__snapshots__/demo.test.tsx.snap
index 76849810c1f1..f67e46fa3051 100644
--- a/components/form/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/form/__tests__/__snapshots__/demo.test.tsx.snap
@@ -1777,6 +1777,140 @@ exports[`renders components/form/demo/customized-form-controls.tsx correctly 1`]
 </form>
 `;
 
+exports[`renders components/form/demo/dependencies.tsx correctly 1`] = `
+<form
+  autocomplete="off"
+  class="ant-form ant-form-vertical"
+  id="dependencies"
+  style="max-width:600px"
+>
+  <div
+    class="ant-alert ant-alert-info"
+    data-show="true"
+    role="alert"
+  >
+    <span
+      aria-label="info-circle"
+      class="anticon anticon-info-circle ant-alert-icon"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        data-icon="info-circle"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+        />
+      </svg>
+    </span>
+    <div
+      class="ant-alert-content"
+    >
+      <div
+        class="ant-alert-message"
+      >
+         Try modify \`Password2\` and then modify \`Password\`
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-label"
+      >
+        <label
+          class="ant-form-item-required"
+          for="dependencies_password"
+          title="Password"
+        >
+          Password
+        </label>
+      </div>
+      <div
+        class="ant-col 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="dependencies_password"
+              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-form-item-label"
+      >
+        <label
+          class="ant-form-item-required"
+          for="dependencies_password2"
+          title="Confirm Password"
+        >
+          Confirm Password
+        </label>
+      </div>
+      <div
+        class="ant-col 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="dependencies_password2"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <article
+    class="ant-typography"
+  >
+    <p>
+      Only Update when
+      <code>
+        password2
+      </code>
+       updated:
+    </p>
+    <pre>
+      {}
+    </pre>
+  </article>
+</form>
+`;
+
 exports[`renders components/form/demo/disabled.tsx correctly 1`] = `
 Array [
   <label
@@ -2658,14 +2792,11 @@ Array [
                             viewBox="64 64 896 896"
                             width="1em"
                           >
-                            <defs>
-                              <style />
-                            </defs>
                             <path
                               d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
                             />
                             <path
-                              d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+                              d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
                             />
                           </svg>
                         </span>
@@ -2763,6 +2894,7 @@ Array [
                 />
                 <div
                   aria-disabled="true"
+                  aria-orientation="horizontal"
                   aria-valuemax="100"
                   aria-valuemin="0"
                   aria-valuenow="0"
@@ -3333,14 +3465,11 @@ exports[`renders components/form/demo/dynamic-form-item.tsx correctly 1`] = `
                     viewBox="64 64 896 896"
                     width="1em"
                   >
-                    <defs>
-                      <style />
-                    </defs>
                     <path
                       d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
                     />
                     <path
-                      d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+                      d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
                     />
                   </svg>
                 </span>
@@ -3371,14 +3500,11 @@ exports[`renders components/form/demo/dynamic-form-item.tsx correctly 1`] = `
                     viewBox="64 64 896 896"
                     width="1em"
                   >
-                    <defs>
-                      <style />
-                    </defs>
                     <path
                       d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
                     />
                     <path
-                      d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+                      d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
                     />
                   </svg>
                 </span>
@@ -3466,14 +3592,11 @@ exports[`renders components/form/demo/dynamic-form-items.tsx correctly 1`] = `
                     viewBox="64 64 896 896"
                     width="1em"
                   >
-                    <defs>
-                      <style />
-                    </defs>
                     <path
                       d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
                     />
                     <path
-                      d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+                      d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
                     />
                   </svg>
                 </span>
@@ -3526,181 +3649,149 @@ exports[`renders components/form/demo/dynamic-form-items-complex.tsx correctly 1
   style="max-width:600px"
 >
   <div
-    class="ant-form-item"
+    style="display:flex;row-gap:16px;flex-direction:column"
   >
     <div
-      class="ant-row ant-form-item-row"
+      class="ant-card ant-card-bordered ant-card-small"
     >
       <div
-        class="ant-col ant-form-item-label"
+        class="ant-card-head"
       >
-        <label
-          class="ant-form-item-required"
-          for="dynamic_form_complex_area"
-          title="Area"
+        <div
+          class="ant-card-head-wrapper"
         >
-          Area
-        </label>
+          <div
+            class="ant-card-head-title"
+          >
+            Item 1
+          </div>
+          <div
+            class="ant-card-extra"
+          >
+            <span
+              aria-label="close"
+              class="anticon anticon-close"
+              role="img"
+              tabindex="-1"
+            >
+              <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>
+          </div>
+        </div>
       </div>
       <div
-        class="ant-col ant-form-item-control"
+        class="ant-card-body"
       >
         <div
-          class="ant-form-item-control-input"
+          class="ant-form-item"
         >
           <div
-            class="ant-form-item-control-input-content"
+            class="ant-row ant-form-item-row"
           >
             <div
-              aria-required="true"
-              class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
+              class="ant-col ant-col-6 ant-form-item-label"
+            >
+              <label
+                class=""
+                for="dynamic_form_complex_items_0_name"
+                title="Name"
+              >
+                Name
+              </label>
+            </div>
+            <div
+              class="ant-col ant-col-18 ant-form-item-control"
             >
               <div
-                class="ant-select-selector"
+                class="ant-form-item-control-input"
               >
-                <span
-                  class="ant-select-selection-search"
+                <div
+                  class="ant-form-item-control-input-content"
                 >
                   <input
-                    aria-autocomplete="list"
-                    aria-controls="dynamic_form_complex_area_list"
-                    aria-expanded="false"
-                    aria-haspopup="listbox"
-                    aria-label="Search"
-                    aria-owns="dynamic_form_complex_area_list"
-                    aria-required="true"
-                    autocomplete="off"
-                    class="ant-select-selection-search-input"
-                    id="dynamic_form_complex_area"
-                    readonly=""
-                    role="combobox"
-                    style="opacity:0"
-                    type="search"
-                    unselectable="on"
+                    class="ant-input"
+                    id="dynamic_form_complex_items_0_name"
+                    type="text"
                     value=""
                   />
-                </span>
-                <span
-                  class="ant-select-selection-placeholder"
-                />
+                </div>
               </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-form-item-control"
-      >
         <div
-          class="ant-form-item-control-input"
+          class="ant-form-item"
         >
           <div
-            class="ant-form-item-control-input-content"
+            class="ant-row ant-form-item-row"
           >
-            <button
-              class="ant-btn ant-btn-dashed ant-btn-block"
-              type="button"
+            <div
+              class="ant-col ant-col-6 ant-form-item-label"
             >
-              <span
-                class="ant-btn-icon"
+              <label
+                class=""
+                title="List"
               >
-                <span
-                  aria-label="plus"
-                  class="anticon anticon-plus"
-                  role="img"
+                List
+              </label>
+            </div>
+            <div
+              class="ant-col ant-col-18 ant-form-item-control"
+            >
+              <div
+                class="ant-form-item-control-input"
+              >
+                <div
+                  class="ant-form-item-control-input-content"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="plus"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
+                  <div
+                    style="display:flex;flex-direction:column;row-gap:16px"
                   >
-                    <defs>
-                      <style />
-                    </defs>
-                    <path
-                      d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
-                    />
-                    <path
-                      d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <span>
-                Add sights
-              </span>
-            </button>
+                    <button
+                      class="ant-btn ant-btn-dashed ant-btn-block"
+                      type="button"
+                    >
+                      <span>
+                        + Add Sub Item
+                      </span>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-  <div
-    class="ant-form-item"
-  >
-    <div
-      class="ant-row ant-form-item-row"
+    <button
+      class="ant-btn ant-btn-dashed ant-btn-block"
+      type="button"
     >
-      <div
-        class="ant-col 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>
-          </div>
-        </div>
-      </div>
-    </div>
+      <span>
+        + Add Item
+      </span>
+    </button>
   </div>
+  <article
+    class="ant-typography"
+  >
+    <pre>
+      {}
+    </pre>
+  </article>
 </form>
 `;
 
@@ -3772,14 +3863,11 @@ exports[`renders components/form/demo/dynamic-form-items-no-style.tsx correctly
                               viewBox="64 64 896 896"
                               width="1em"
                             >
-                              <defs>
-                                <style />
-                              </defs>
                               <path
                                 d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
                               />
                               <path
-                                d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+                                d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
                               />
                             </svg>
                           </span>
@@ -4025,6 +4113,25 @@ exports[`renders components/form/demo/form-context.tsx correctly 1`] = `
       </div>
     </div>
   </div>
+  <div
+    class="ant-form-item ant-form-item-hidden"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <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>
+      </div>
+    </div>
+  </div>
   <div
     class="ant-form-item"
   >
@@ -4457,6 +4564,7 @@ exports[`renders components/form/demo/inline-login.tsx correctly 1`] = `
           >
             <button
               class="ant-btn ant-btn-primary"
+              disabled=""
               type="submit"
             >
               <span>
@@ -8773,6 +8881,7 @@ exports[`renders components/form/demo/validate-other.tsx correctly 1`] = `
               </div>
               <div
                 aria-disabled="false"
+                aria-orientation="horizontal"
                 aria-valuemax="100"
                 aria-valuemin="0"
                 aria-valuenow="0"
diff --git a/components/form/__tests__/__snapshots__/index.test.tsx.snap b/components/form/__tests__/__snapshots__/index.test.tsx.snap
index bf5d5cd851b1..a4d9358f53c9 100644
--- a/components/form/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/form/__tests__/__snapshots__/index.test.tsx.snap
@@ -1033,6 +1033,7 @@ exports[`Form form should support disabled 1`] = `
               />
               <div
                 aria-disabled="true"
+                aria-orientation="horizontal"
                 aria-valuemax="100"
                 aria-valuemin="0"
                 aria-valuenow="0"
diff --git a/components/form/demo/dep-debug.md b/components/form/demo/dep-debug.md
deleted file mode 100644
index 48ae23c246fc..000000000000
--- a/components/form/demo/dep-debug.md
+++ /dev/null
@@ -1,7 +0,0 @@
-## zh-CN
-
-Buggy!
-
-## en-US
-
-Buggy!
diff --git a/components/form/demo/dep-debug.tsx b/components/form/demo/dep-debug.tsx
deleted file mode 100644
index d554bb3111e2..000000000000
--- a/components/form/demo/dep-debug.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react';
-import { Form, Input } from 'antd';
-
-let acc = 0;
-
-const App: React.FC = () => {
-  const [form] = Form.useForm();
-  return (
-    <Form
-      form={form}
-      name="debug"
-      initialValues={{ debug1: 'debug1', debug2: 'debug2' }}
-      style={{ maxWidth: 600 }}
-    >
-      <Form.Item noStyle dependencies={['debug1']}>
-        {
-          () => acc++
-          // return <pre>{JSON.stringify(form.getFieldsValue(), null, 2)}</pre>;
-        }
-      </Form.Item>
-      <Form.Item label="debug1" name="debug1">
-        <Input />
-      </Form.Item>
-      <Form.Item label="debug2" name="debug2">
-        <Input />
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default App;
diff --git a/components/form/demo/dependencies.md b/components/form/demo/dependencies.md
new file mode 100644
index 000000000000..b902166f6b4e
--- /dev/null
+++ b/components/form/demo/dependencies.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+Form.Item 可以通过 `dependencies` 属性，设置关联字段。当关联字段的值发生变化时，会触发校验与更新。
+
+## en-US
+
+Form.Item can set the associated field through the `dependencies` property. When the value of the associated field changes, the validation and update will be triggered.
diff --git a/components/form/demo/dependencies.tsx b/components/form/demo/dependencies.tsx
new file mode 100644
index 000000000000..b1f9b44bca26
--- /dev/null
+++ b/components/form/demo/dependencies.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { Alert, Form, Input, Typography } from 'antd';
+
+const App: React.FC = () => {
+  const [form] = Form.useForm();
+  return (
+    <Form
+      form={form}
+      name="dependencies"
+      autoComplete="off"
+      style={{ maxWidth: 600 }}
+      layout="vertical"
+    >
+      <Alert message=" Try modify `Password2` and then modify `Password`" type="info" showIcon />
+
+      <Form.Item label="Password" name="password" rules={[{ required: true }]}>
+        <Input />
+      </Form.Item>
+
+      {/* Field */}
+      <Form.Item
+        label="Confirm Password"
+        name="password2"
+        dependencies={['password']}
+        rules={[
+          {
+            required: true,
+          },
+          ({ getFieldValue }) => ({
+            validator(_, value) {
+              if (!value || getFieldValue('password') === value) {
+                return Promise.resolve();
+              }
+              return Promise.reject(new Error('The new password that you entered do not match!'));
+            },
+          }),
+        ]}
+      >
+        <Input />
+      </Form.Item>
+
+      {/* Render Props */}
+      <Form.Item noStyle dependencies={['password2']}>
+        {() => (
+          <Typography>
+            <p>
+              Only Update when <code>password2</code> updated:
+            </p>
+            <pre>{JSON.stringify(form.getFieldsValue(), null, 2)}</pre>
+          </Typography>
+        )}
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default App;
diff --git a/components/form/demo/dynamic-form-items-complex.md b/components/form/demo/dynamic-form-items-complex.md
index fe335dccd794..43c1dd8e5f38 100644
--- a/components/form/demo/dynamic-form-items-complex.md
+++ b/components/form/demo/dynamic-form-items-complex.md
@@ -1,7 +1,7 @@
 ## zh-CN
 
-这个例子演示了一个表单中包含多个表单控件的情况。
+多个 Form.List 嵌套的使用场景。
 
 ## en-US
 
-This example demonstrates the case that a form contains multiple form controls.
+Multiple Form.List nested usage scenarios.
diff --git a/components/form/demo/dynamic-form-items-complex.tsx b/components/form/demo/dynamic-form-items-complex.tsx
index 2de26286bb0a..e35434d3dc8b 100644
--- a/components/form/demo/dynamic-form-items-complex.tsx
+++ b/components/form/demo/dynamic-form-items-complex.tsx
@@ -1,96 +1,83 @@
 import React from 'react';
-import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
-import { Button, Form, Input, Select, Space } from 'antd';
-
-const { Option } = Select;
-
-const areas = [
-  { label: 'Beijing', value: 'Beijing' },
-  { label: 'Shanghai', value: 'Shanghai' },
-];
-
-const sights = {
-  Beijing: ['Tiananmen', 'Great Wall'],
-  Shanghai: ['Oriental Pearl', 'The Bund'],
-};
-
-type SightsKeys = keyof typeof sights;
+import { CloseOutlined } from '@ant-design/icons';
+import { Button, Card, Form, Input, Space, Typography } from 'antd';
 
 const App: React.FC = () => {
   const [form] = Form.useForm();
 
-  const onFinish = (values: any) => {
-    console.log('Received values of form:', values);
-  };
-
-  const handleChange = () => {
-    form.setFieldsValue({ sights: [] });
-  };
-
   return (
     <Form
+      labelCol={{ span: 6 }}
+      wrapperCol={{ span: 18 }}
       form={form}
       name="dynamic_form_complex"
-      onFinish={onFinish}
       style={{ maxWidth: 600 }}
       autoComplete="off"
+      initialValues={{ items: [{}] }}
     >
-      <Form.Item name="area" label="Area" rules={[{ required: true, message: 'Missing area' }]}>
-        <Select options={areas} onChange={handleChange} />
-      </Form.Item>
-      <Form.List name="sights">
+      <Form.List name="items">
         {(fields, { add, remove }) => (
-          <>
+          <div style={{ display: 'flex', rowGap: 16, flexDirection: 'column' }}>
             {fields.map((field) => (
-              <Space key={field.key} align="baseline">
-                <Form.Item
-                  noStyle
-                  shouldUpdate={(prevValues, curValues) =>
-                    prevValues.area !== curValues.area || prevValues.sights !== curValues.sights
-                  }
-                >
-                  {() => (
-                    <Form.Item
-                      {...field}
-                      label="Sight"
-                      name={[field.name, 'sight']}
-                      rules={[{ required: true, message: 'Missing sight' }]}
-                    >
-                      <Select disabled={!form.getFieldValue('area')} style={{ width: 130 }}>
-                        {(sights[form.getFieldValue('area') as SightsKeys] || []).map((item) => (
-                          <Option key={item} value={item}>
-                            {item}
-                          </Option>
-                        ))}
-                      </Select>
-                    </Form.Item>
-                  )}
-                </Form.Item>
-                <Form.Item
-                  {...field}
-                  label="Price"
-                  name={[field.name, 'price']}
-                  rules={[{ required: true, message: 'Missing price' }]}
-                >
+              <Card
+                size="small"
+                title={`Item ${field.name + 1}`}
+                key={field.key}
+                extra={
+                  <CloseOutlined
+                    onClick={() => {
+                      remove(field.name);
+                    }}
+                  />
+                }
+              >
+                <Form.Item label="Name" name={[field.name, 'name']}>
                   <Input />
                 </Form.Item>
 
-                <MinusCircleOutlined onClick={() => remove(field.name)} />
-              </Space>
+                {/* Nest Form.List */}
+                <Form.Item label="List">
+                  <Form.List name={[field.name, 'list']}>
+                    {(subFields, subOpt) => (
+                      <div style={{ display: 'flex', flexDirection: 'column', rowGap: 16 }}>
+                        {subFields.map((subField) => (
+                          <Space key={subField.key}>
+                            <Form.Item noStyle name={[subField.name, 'first']}>
+                              <Input placeholder="first" />
+                            </Form.Item>
+                            <Form.Item noStyle name={[subField.name, 'second']}>
+                              <Input placeholder="second" />
+                            </Form.Item>
+                            <CloseOutlined
+                              onClick={() => {
+                                subOpt.remove(subField.name);
+                              }}
+                            />
+                          </Space>
+                        ))}
+                        <Button type="dashed" onClick={() => subOpt.add()} block>
+                          + Add Sub Item
+                        </Button>
+                      </div>
+                    )}
+                  </Form.List>
+                </Form.Item>
+              </Card>
             ))}
 
-            <Form.Item>
-              <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
-                Add sights
-              </Button>
-            </Form.Item>
-          </>
+            <Button type="dashed" onClick={() => add()} block>
+              + Add Item
+            </Button>
+          </div>
         )}
       </Form.List>
-      <Form.Item>
-        <Button type="primary" htmlType="submit">
-          Submit
-        </Button>
+
+      <Form.Item noStyle shouldUpdate>
+        {() => (
+          <Typography>
+            <pre>{JSON.stringify(form.getFieldsValue(), null, 2)}</pre>
+          </Typography>
+        )}
       </Form.Item>
     </Form>
   );
diff --git a/components/form/demo/form-context.tsx b/components/form/demo/form-context.tsx
index 2b689925eadc..284cda9537e6 100644
--- a/components/form/demo/form-context.tsx
+++ b/components/form/demo/form-context.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { SmileOutlined, UserOutlined } from '@ant-design/icons';
-import { Avatar, Button, Form, Input, InputNumber, Modal, Typography } from 'antd';
+import { Avatar, Button, Form, Input, InputNumber, Modal, Space, Typography } from 'antd';
 import type { FormInstance } from 'antd/es/form';
 
 const layout = {
@@ -93,6 +93,10 @@ const App: React.FC = () => {
         <Form.Item name="group" label="Group Name" rules={[{ required: true }]}>
           <Input />
         </Form.Item>
+
+        {/* Create a hidden field to make Form instance record this */}
+        <Form.Item name="users" hidden />
+
         <Form.Item
           label="User List"
           shouldUpdate={(prevValues, curValues) => prevValues.users !== curValues.users}
@@ -103,8 +107,10 @@ const App: React.FC = () => {
               <ul>
                 {users.map((user) => (
                   <li key={user.name} className="user">
-                    <Avatar icon={<UserOutlined />} />
-                    {user.name} - {user.age}
+                    <Space>
+                      <Avatar icon={<UserOutlined />} />
+                      {`${user.name} - ${user.age}`}
+                    </Space>
                   </li>
                 ))}
               </ul>
diff --git a/components/form/demo/inline-login.tsx b/components/form/demo/inline-login.tsx
index 77795abf17b4..15996b1ac9ff 100644
--- a/components/form/demo/inline-login.tsx
+++ b/components/form/demo/inline-login.tsx
@@ -4,11 +4,11 @@ import { Button, Form, Input } from 'antd';
 
 const App: React.FC = () => {
   const [form] = Form.useForm();
-  const [, forceUpdate] = useState({});
+  const [clientReady, setClientReady] = useState<boolean>(false);
 
   // To disable submit button at the beginning.
   useEffect(() => {
-    forceUpdate({});
+    setClientReady(true);
   }, []);
 
   const onFinish = (values: any) => {
@@ -39,6 +39,7 @@ const App: React.FC = () => {
             type="primary"
             htmlType="submit"
             disabled={
+              !clientReady ||
               !form.isFieldsTouched(true) ||
               !!form.getFieldsError().filter(({ errors }) => errors.length).length
             }
diff --git a/components/form/index.en-US.md b/components/form/index.en-US.md
index 4363236da885..f8dff3bcde46 100644
--- a/components/form/index.en-US.md
+++ b/components/form/index.en-US.md
@@ -46,9 +46,9 @@ High performance Form component with data scope management. Including data colle
 <code src="./demo/without-form-create.tsx">Handle Form Data Manually</code>
 <code src="./demo/validate-static.tsx">Customized Validation</code>
 <code src="./demo/dynamic-rule.tsx">Dynamic Rules</code>
+<code src="./demo/dependencies.tsx">Dependencies</code>
 <code src="./demo/validate-other.tsx">Other Form Controls</code>
 <code src="./demo/disabled-input-debug.tsx" debug>Disabled Input Debug</code>
-<code src="./demo/dep-debug.tsx" debug>Dep Debug</code>
 <code src="./demo/label-debug.tsx" debug>label ellipsis</code>
 <code src="./demo/col-24-debug.tsx" debug>Test col 24 usage</code>
 <code src="./demo/ref-item.tsx" debug>Ref item</code>
@@ -153,17 +153,17 @@ After wrapped by `Form.Item` with `name` property, `value`(or other property def
 
 ### dependencies
 
-Used when there are dependencies between fields. If a field has the `dependencies` prop, this field will automatically trigger updates and validations when upstream is updated. A common scenario is a user registration form with "password" and "confirm password" fields. The "Confirm Password" validation depends on the "Password" field. After setting `dependencies`, the "Password" field update will re-trigger the validation of "Check Password". You can refer [examples](#components-form-demo-register).
+Used when there are dependencies between fields. If a field has the `dependencies` prop, this field will automatically trigger updates and validations when upstream is updated. A common scenario is a user registration form with "password" and "confirm password" fields. The "Confirm Password" validation depends on the "Password" field. After setting `dependencies`, the "Password" field update will re-trigger the validation of "Check Password". You can refer [examples](#components-form-demo-dependencies).
 
 `dependencies` shouldn't be used together with `shouldUpdate`, since it may result in conflicting update logic.
 
-`dependencies` supports `Form.Item` with render props children since `4.5.0`.
-
 ### shouldUpdate
 
 Form updates only the modified field-related components for performance optimization purposes by incremental update. In most cases, you only need to write code or do validation with the [`dependencies`](#dependencies) property. In some specific cases, such as when a new field option appears with a field value changed, or you just want to keep some area updating by form update, you can modify the update logic of Form.Item via the `shouldUpdate`.
 
-When `shouldUpdate` is `true`, any Form update will cause the Form.Item to be re-rendered. This is very helpful for custom rendering some areas:
+When `shouldUpdate` is `true`, any Form update will cause the Form.Item to be re-rendered. This is very helpful for custom rendering some areas. It should be noted that the child component should be returned in a function, otherwise `shouldUpdate` won't behave correctly:
+
+related issue: [#34500](https://github.com/ant-design/ant-design/issues/34500)
 
 ```jsx
 <Form.Item shouldUpdate>
@@ -296,8 +296,8 @@ Provide linkage between forms. If a sub form with `name` prop update, it will au
 | resetFields | Reset fields to `initialValues` | (fields?: [NamePath](#namepath)\[]) => void |  |
 | scrollToField | Scroll to field position | (name: [NamePath](#namepath), options: \[[ScrollOptions](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options)]) => void |  |
 | setFields | Set fields status | (fields: [FieldData](#fielddata)\[]) => void |  |
-| setFieldValue | Set fields value(Will directly pass to form store. 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. 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 |  |
+| 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 | (nameList?: [NamePath](#namepath)\[], { validateOnly?: boolean }) => Promise | `validateOnly`: 5.5.0 |
 
@@ -477,7 +477,7 @@ New in `5.8.0`. Accept configuration parameters. When `strict` is `true`, only t
 
 #### FilterFunc
 
-用于过滤一些字段值，`meta` 会返回字段相关信息。例如可以用来获取仅被用户修改过的值等等。
+To filter certain field values, `meta` will provide information related to the fields. For example, it can be used to retrieve values that have only been modified by the user, and so on.
 
 ```tsx
 type FilterFunc = (meta: { touched: boolean; validating: boolean }) => boolean;
diff --git a/components/form/index.zh-CN.md b/components/form/index.zh-CN.md
index 98ae05170e46..17e2b03de542 100644
--- a/components/form/index.zh-CN.md
+++ b/components/form/index.zh-CN.md
@@ -47,9 +47,9 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ylFATY6w-ygAAA
 <code src="./demo/without-form-create.tsx">自行处理表单数据</code>
 <code src="./demo/validate-static.tsx">自定义校验</code>
 <code src="./demo/dynamic-rule.tsx">动态校验规则</code>
+<code src="./demo/dependencies.tsx">校验与更新依赖</code>
 <code src="./demo/validate-other.tsx">校验其他组件</code>
 <code src="./demo/disabled-input-debug.tsx" debug>Disabled Input Debug</code>
-<code src="./demo/dep-debug.tsx" debug>Dep Debug</code>
 <code src="./demo/label-debug.tsx" debug>测试 label 省略</code>
 <code src="./demo/col-24-debug.tsx" debug>测试特殊 col 24 用法</code>
 <code src="./demo/ref-item.tsx" debug>引用字段</code>
@@ -154,17 +154,17 @@ const validateMessages = {
 
 ### dependencies
 
-当字段间存在依赖关系时使用。如果一个字段设置了 `dependencies` 属性。那么它所依赖的字段更新时，该字段将自动触发更新与校验。一种常见的场景，就是注册用户表单的“密码”与“确认密码”字段。“确认密码”校验依赖于“密码”字段，设置 `dependencies` 后，“密码”字段更新会重新触发“校验密码”的校验逻辑。你可以参考[具体例子](#components-form-demo-register)。
+当字段间存在依赖关系时使用。如果一个字段设置了 `dependencies` 属性。那么它所依赖的字段更新时，该字段将自动触发更新与校验。一种常见的场景，就是注册用户表单的“密码”与“确认密码”字段。“确认密码”校验依赖于“密码”字段，设置 `dependencies` 后，“密码”字段更新会重新触发“校验密码”的校验逻辑。你可以参考[具体例子](#components-form-demo-dependencies)。
 
 `dependencies` 不应和 `shouldUpdate` 一起使用，因为这可能带来更新逻辑的混乱。
 
-从 `4.5.0` 版本开始，`dependencies` 支持使用 render props 类型 children 的 `Form.Item`。
-
 ### shouldUpdate
 
 Form 通过增量更新方式，只更新被修改的字段相关组件以达到性能优化目的。大部分场景下，你只需要编写代码或者与 [`dependencies`](#dependencies) 属性配合校验即可。而在某些特定场景，例如修改某个字段值后出现新的字段选项、或者纯粹希望表单任意变化都对某一个区域进行渲染。你可以通过 `shouldUpdate` 修改 Form.Item 的更新逻辑。
 
-当 `shouldUpdate` 为 `true` 时，Form 的任意变化都会使该 Form.Item 重新渲染。这对于自定义渲染一些区域十分有帮助：
+当 `shouldUpdate` 为 `true` 时，Form 的任意变化都会使该 Form.Item 重新渲染。这对于自定义渲染一些区域十分有帮助，要注意 Form.Item 里包裹的子组件必须由函数返回，否则 `shouldUpdate` 不会起作用：
+
+相关issue：[#34500](https://github.com/ant-design/ant-design/issues/34500)
 
 ```jsx
 <Form.Item shouldUpdate>
@@ -295,8 +295,8 @@ Form.List 渲染表单相关操作函数。
 | resetFields | 重置一组字段到 `initialValues` | (fields?: [NamePath](#namepath)\[]) => void |  |
 | scrollToField | 滚动到对应字段位置 | (name: [NamePath](#namepath), options: [ScrollOptions](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options)) => void |  |
 | setFields | 设置一组字段状态 | (fields: [FieldData](#fielddata)\[]) => void |  |
-| setFieldValue | 设置表单的值（该值将直接传入 form store 中。如果你不希望传入对象被修改，请克隆后传入） | (name: [NamePath](#namepath), value: any) => void | 4.22.0 |
-| setFieldsValue | 设置表单的值（该值将直接传入 form store 中。如果你不希望传入对象被修改，请克隆后传入）。如果你只想修改 Form.List 中单项值，请通过 `setFieldValue` 进行指定 | (values) => void |  |
+| setFieldValue | 设置表单的值（该值将直接传入 form store 中并且**重置错误信息**。如果你不希望传入对象被修改，请克隆后传入） | (name: [NamePath](#namepath), value: any) => void | 4.22.0 |
+| setFieldsValue | 设置表单的值（该值将直接传入 form store 中并且**重置错误信息**。如果你不希望传入对象被修改，请克隆后传入）。如果你只想修改 Form.List 中单项值，请通过 `setFieldValue` 进行指定 | (values) => void |  |
 | submit | 提交表单，与点击 `submit` 按钮效果相同 | () => void |  |
 | validateFields | 触发表单验证 | (nameList?: [NamePath](#namepath)\[], { validateOnly?: boolean }) => Promise | `validateOnly`: 5.5.0 |
 
@@ -526,7 +526,7 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
 | form     | 指定 Form 实例                        | FormInstance | 当前 context 中的 Form | 5.4.0 |
 | preserve | 是否监视没有对应的 `Form.Item` 的字段 | boolean      | false                  | 5.4.0 |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Form"></ComponentTokenTable>
 
diff --git a/components/form/style/fallbackCmp.ts b/components/form/style/fallbackCmp.ts
new file mode 100644
index 000000000000..cf3e11336573
--- /dev/null
+++ b/components/form/style/fallbackCmp.ts
@@ -0,0 +1,29 @@
+/**
+ * Fallback of IE.
+ * Safe to remove.
+ */
+
+// Style as inline component
+import { prepareToken, type FormToken } from '.';
+import { genSubStyleComponent, type GenerateStyle } from '../../theme/internal';
+
+// ============================= Fallback =============================
+const genFallbackStyle: GenerateStyle<FormToken> = (token) => {
+  const { formItemCls } = token;
+
+  return {
+    '@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)': {
+      // Fallback for IE, safe to remove we not support it anymore
+      [`${formItemCls}-control`]: {
+        display: 'flex',
+      },
+    },
+  };
+};
+
+// ============================== Export ==============================
+export default genSubStyleComponent(['Form', 'item-item'], (token, { rootPrefixCls }) => {
+  const formToken = prepareToken(token, rootPrefixCls);
+
+  return [genFallbackStyle(formToken)];
+});
diff --git a/components/form/style/index.ts b/components/form/style/index.ts
index a78320f37cbc..ae82154bf88f 100644
--- a/components/form/style/index.ts
+++ b/components/form/style/index.ts
@@ -1,8 +1,10 @@
 import type { CSSObject } from '@ant-design/cssinjs';
+
 import { resetComponent } from '../../style';
 import { genCollapseMotion, zoomIn } from '../../style/motion';
 import type { AliasToken, FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
+import type { GenStyleFn } from '../../theme/util/genComponentStyleHook';
 import genFormValidateMotionStyle from './explain';
 
 export interface FormToken extends FullToken<'Form'> {
@@ -148,7 +150,6 @@ const genFormItemStyle: GenerateStyle<FormToken> = (token) => {
       // =                            Label                           =
       // ==============================================================
       [`${formItemCls}-label`]: {
-        display: 'inline-block',
         flexGrow: 0,
         overflow: 'hidden',
         whiteSpace: 'nowrap',
@@ -231,7 +232,7 @@ const genFormItemStyle: GenerateStyle<FormToken> = (token) => {
       // =                            Input                           =
       // ==============================================================
       [`${formItemCls}-control`]: {
-        display: 'flex',
+        ['--ant-display' as any]: 'flex',
         flexDirection: 'column',
         flexGrow: 1,
 
@@ -322,7 +323,7 @@ const genFormItemStyle: GenerateStyle<FormToken> = (token) => {
 };
 
 const genHorizontalStyle: GenerateStyle<FormToken> = (token) => {
-  const { componentCls, formItemCls, rootPrefixCls } = token;
+  const { componentCls, formItemCls } = token;
 
   return {
     [`${componentCls}-horizontal`]: {
@@ -337,9 +338,14 @@ const genHorizontalStyle: GenerateStyle<FormToken> = (token) => {
         minWidth: 0,
       },
 
+      // Do not change this to `ant-col-24`! `-24` match all the responsive rules
       // https://github.com/ant-design/ant-design/issues/32980
-      [`${formItemCls}-label.${rootPrefixCls}-col-24 + ${formItemCls}-control`]: {
-        minWidth: 'unset',
+      // https://github.com/ant-design/ant-design/issues/34903
+      // https://github.com/ant-design/ant-design/issues/44538
+      [`${formItemCls}-label[class$='-24'], ${formItemCls}-label[class*='-24 ']`]: {
+        [`& + ${formItemCls}-control`]: {
+          minWidth: 'unset',
+        },
       },
     },
   };
@@ -362,10 +368,6 @@ const genInlineStyle: GenerateStyle<FormToken> = (token) => {
           flexWrap: 'nowrap',
         },
 
-        '&-with-help': {
-          marginBottom: token.marginLG,
-        },
-
         [`> ${formItemCls}-label,
         > ${formItemCls}-control`]: {
           display: 'inline-block',
@@ -404,7 +406,7 @@ const makeVerticalLayoutLabel = (token: FormToken): CSSObject => ({
 });
 
 const makeVerticalLayout = (token: FormToken): CSSObject => {
-  const { componentCls, formItemCls } = token;
+  const { componentCls, formItemCls, rootPrefixCls } = token;
 
   return {
     [`${formItemCls} ${formItemCls}-label`]: makeVerticalLayoutLabel(token),
@@ -412,10 +414,14 @@ const makeVerticalLayout = (token: FormToken): CSSObject => {
       [formItemCls]: {
         flexWrap: 'wrap',
 
-        [`${formItemCls}-label,
-          ${formItemCls}-control`]: {
-          flex: '0 0 100%',
-          maxWidth: '100%',
+        [`${formItemCls}-label, ${formItemCls}-control`]: {
+          // When developer pass `xs: { span }`,
+          // It should follow the `xs` screen config
+          // ref: https://github.com/ant-design/ant-design/issues/44386
+          [`&:not([class*=" ${rootPrefixCls}-col-xs"])`]: {
+            flex: '0 0 100%',
+            maxWidth: '100%',
+          },
         },
       },
     },
@@ -476,20 +482,38 @@ const genVerticalStyle: GenerateStyle<FormToken> = (token) => {
 };
 
 // ============================== Export ==============================
-export default genComponentStyleHook('Form', (token, { rootPrefixCls }) => {
+export const prepareToken: (
+  token: Parameters<GenStyleFn<'Form'>>[0],
+  rootPrefixCls: string,
+) => FormToken = (token, rootPrefixCls) => {
   const formToken = mergeToken<FormToken>(token, {
     formItemCls: `${token.componentCls}-item`,
     rootPrefixCls,
   });
 
-  return [
-    genFormStyle(formToken),
-    genFormItemStyle(formToken),
-    genFormValidateMotionStyle(formToken),
-    genHorizontalStyle(formToken),
-    genInlineStyle(formToken),
-    genVerticalStyle(formToken),
-    genCollapseMotion(formToken),
-    zoomIn,
-  ];
-});
+  return formToken;
+};
+
+export default genComponentStyleHook(
+  'Form',
+  (token, { rootPrefixCls }) => {
+    const formToken = prepareToken(token, rootPrefixCls);
+
+    return [
+      genFormStyle(formToken),
+      genFormItemStyle(formToken),
+      genFormValidateMotionStyle(formToken),
+      genHorizontalStyle(formToken),
+      genInlineStyle(formToken),
+      genVerticalStyle(formToken),
+      genCollapseMotion(formToken),
+      zoomIn,
+    ];
+  },
+  null,
+  {
+    // Let From style before the Grid
+    // ref https://github.com/ant-design/ant-design/issues/44386
+    order: -1000,
+  },
+);
diff --git a/components/grid/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/grid/__tests__/__snapshots__/demo-extend.test.ts.snap
index 9a17ca9d4d7c..11f8a6aeca9c 100644
--- a/components/grid/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/grid/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -925,6 +925,7 @@ Array [
       </div>
       <div
         aria-disabled="false"
+        aria-orientation="horizontal"
         aria-valuemax="5"
         aria-valuemin="0"
         aria-valuenow="1"
@@ -1040,6 +1041,7 @@ Array [
       </div>
       <div
         aria-disabled="false"
+        aria-orientation="horizontal"
         aria-valuemax="5"
         aria-valuemin="0"
         aria-valuenow="1"
@@ -1155,6 +1157,7 @@ Array [
       </div>
       <div
         aria-disabled="false"
+        aria-orientation="horizontal"
         aria-valuemax="5"
         aria-valuemin="0"
         aria-valuenow="2"
diff --git a/components/grid/__tests__/__snapshots__/demo.test.ts.snap b/components/grid/__tests__/__snapshots__/demo.test.ts.snap
index 96849bd844c4..2a5b8a179cd2 100644
--- a/components/grid/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/grid/__tests__/__snapshots__/demo.test.ts.snap
@@ -911,6 +911,7 @@ Array [
       </div>
       <div
         aria-disabled="false"
+        aria-orientation="horizontal"
         aria-valuemax="5"
         aria-valuemin="0"
         aria-valuenow="1"
@@ -1007,6 +1008,7 @@ Array [
       </div>
       <div
         aria-disabled="false"
+        aria-orientation="horizontal"
         aria-valuemax="5"
         aria-valuemin="0"
         aria-valuenow="1"
@@ -1103,6 +1105,7 @@ Array [
       </div>
       <div
         aria-disabled="false"
+        aria-orientation="horizontal"
         aria-valuemax="5"
         aria-valuemin="0"
         aria-valuenow="2"
diff --git a/components/grid/index.zh-CN.md b/components/grid/index.zh-CN.md
index 3dbf1c9229b2..44fcace7b836 100644
--- a/components/grid/index.zh-CN.md
+++ b/components/grid/index.zh-CN.md
@@ -87,6 +87,6 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用
 
 响应式栅格的断点扩展自 [BootStrap 4 的规则](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)（不包含链接里 `occasionally` 的部分)。
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Grid"></ComponentTokenTable>
diff --git a/components/grid/style/index.ts b/components/grid/style/index.ts
index 1772f59e8f03..2ebac21eb302 100644
--- a/components/grid/style/index.ts
+++ b/components/grid/style/index.ts
@@ -1,4 +1,5 @@
 import type { CSSObject } from '@ant-design/cssinjs';
+
 import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 
@@ -114,11 +115,21 @@ const genLoopGridColumnsStyle = (token: GridColToken, sizeCls: string): CSSObjec
         order: 0,
       };
     } else {
-      gridColumnsStyle[`${componentCls}${sizeCls}-${i}`] = {
-        display: 'block',
-        flex: `0 0 ${(i / gridColumns) * 100}%`,
-        maxWidth: `${(i / gridColumns) * 100}%`,
-      };
+      gridColumnsStyle[`${componentCls}${sizeCls}-${i}`] = [
+        // https://github.com/ant-design/ant-design/issues/44456
+        // Form set `display: flex` on Col which will override `display: block`.
+        // Let's get it from css variable to support override.
+        {
+          ['--ant-display' as any]: 'block',
+          // Fallback to display if variable not support
+          display: 'block',
+        },
+        {
+          display: 'var(--ant-display)',
+          flex: `0 0 ${(i / gridColumns) * 100}%`,
+          maxWidth: `${(i / gridColumns) * 100}%`,
+        },
+      ];
       gridColumnsStyle[`${componentCls}${sizeCls}-push-${i}`] = {
         insetInlineStart: `${(i / gridColumns) * 100}%`,
       };
diff --git a/components/icon/index.zh-CN.md b/components/icon/index.zh-CN.md
index 9d6434e3efb8..f9274c2cc703 100644
--- a/components/icon/index.zh-CN.md
+++ b/components/icon/index.zh-CN.md
@@ -103,8 +103,8 @@ getTwoToneColor(); // #eb2f96
 
 ```jsx
 import React from 'react';
-import ReactDOM from 'react-dom/client';
 import { createFromIconfontCN } from '@ant-design/icons';
+import ReactDOM from 'react-dom/client';
 
 const MyIcon = createFromIconfontCN({
   scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // 在 iconfont.cn 上生成
@@ -152,9 +152,10 @@ module.exports = {
 
 ```jsx
 import React from 'react';
-import ReactDOM from 'react-dom/client';
 import Icon from '@ant-design/icons';
 import MessageSvg from 'path/to/message.svg'; // 你的 '*.svg' 文件路径
+import ReactDOM from 'react-dom/client';
+
 // in create-react-app:
 // import { ReactComponent as MessageSvg } from 'path/to/message.svg';
 
@@ -171,6 +172,6 @@ ReactDOM.createRoot(mountNode).render(<Icon component={MessageSvg} />);
 | style     | 计算后的 `svg` 元素样式 | CSSProperties    | -              |      |
 | width     | `svg` 元素宽度          | string \| number | `1em`          |      |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Icon"></ComponentTokenTable>
diff --git a/components/image/index.tsx b/components/image/index.tsx
index fb87bacd55ca..e844cc069ccd 100644
--- a/components/image/index.tsx
+++ b/components/image/index.tsx
@@ -1,9 +1,11 @@
 'use client';
 
+import * as React from 'react';
 import EyeOutlined from '@ant-design/icons/EyeOutlined';
 import classNames from 'classnames';
-import RcImage, { type ImageProps } from 'rc-image';
-import * as React from 'react';
+import RcImage from 'rc-image';
+import type { ImageProps } from 'rc-image';
+
 import { getTransitionName } from '../_util/motion';
 import { ConfigContext } from '../config-provider';
 import defaultLocale from '../locale/en_US';
@@ -77,7 +79,7 @@ const Image: CompositionImage<ImageProps> = (props) => {
   );
 };
 
-export { ImageProps };
+export type { ImageProps };
 
 Image.PreviewGroup = PreviewGroup;
 
diff --git a/components/image/index.zh-CN.md b/components/image/index.zh-CN.md
index 197b3a00545d..ffbac88e7785 100644
--- a/components/image/index.zh-CN.md
+++ b/components/image/index.zh-CN.md
@@ -42,7 +42,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LVQ3R5JjjJEAAA
 | alt | 图像描述 | string | - | 4.6.0 |
 | fallback | 加载失败容错地址 | string | - | 4.6.0 |
 | height | 图像高度 | string \| number | - | 4.6.0 |
-| placeholder | 加载占位, 为 `true` 时使用默认占位 | ReactNode | - | 4.6.0 |
+| placeholder | 加载占位，为 `true` 时使用默认占位 | ReactNode | - | 4.6.0 |
 | preview | 预览参数，为 `false` 时禁用 | boolean \| [PreviewType](#previewtype) | true | 4.6.0 [PreviewType](#previewyype):4.7.0 |
 | src | 图片地址 | string | - | 4.6.0 |
 | width | 图像宽度 | string \| number | - | 4.6.0 |
@@ -162,6 +162,6 @@ type TransformAction =
 }
 ```
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Image"></ComponentTokenTable>
diff --git a/components/input-number/index.zh-CN.md b/components/input-number/index.zh-CN.md
index 243cbefb0ce7..7f6b2c5382ce 100644
--- a/components/input-number/index.zh-CN.md
+++ b/components/input-number/index.zh-CN.md
@@ -71,7 +71,7 @@ demo:
 | blur()  | 移除焦点 |
 | focus() | 获取焦点 |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="InputNumber"></ComponentTokenTable>
 
diff --git a/components/input/hooks/useRemovePasswordTimeout.ts b/components/input/hooks/useRemovePasswordTimeout.ts
index b67d7ae9ce3c..94bf78a8279f 100644
--- a/components/input/hooks/useRemovePasswordTimeout.ts
+++ b/components/input/hooks/useRemovePasswordTimeout.ts
@@ -5,7 +5,7 @@ export default function useRemovePasswordTimeout(
   inputRef: React.RefObject<InputRef>,
   triggerOnMount?: boolean,
 ) {
-  const removePasswordTimeoutRef = useRef<NodeJS.Timer[]>([]);
+  const removePasswordTimeoutRef = useRef<ReturnType<typeof setTimeout>[]>([]);
   const removePasswordTimeout = () => {
     removePasswordTimeoutRef.current.push(
       setTimeout(() => {
diff --git a/components/input/index.zh-CN.md b/components/input/index.zh-CN.md
index 21f46a9e0ead..bdf1e7ebbc29 100644
--- a/components/input/index.zh-CN.md
+++ b/components/input/index.zh-CN.md
@@ -141,7 +141,7 @@ Input 的其他属性和 React 自带的 [input](https://reactjs.org/docs/dom-el
 | textarea | `textarea` 元素 | 5.4.0 |
 | count    | 文字计数元素    | 5.4.0 |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Input"></ComponentTokenTable>
 
diff --git a/components/layout/index.zh-CN.md b/components/layout/index.zh-CN.md
index 7d7527bd6be0..414358ccfb62 100644
--- a/components/layout/index.zh-CN.md
+++ b/components/layout/index.zh-CN.md
@@ -131,6 +131,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HdS6Q5vUCDcAAA
 }
 ```
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Layout"></ComponentTokenTable>
diff --git a/components/list/index.zh-CN.md b/components/list/index.zh-CN.md
index e7d26b9c0da6..f532377310d8 100644
--- a/components/list/index.zh-CN.md
+++ b/components/list/index.zh-CN.md
@@ -43,11 +43,11 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*tBzwQ7raKX8AAA
 | footer | 列表底部 | ReactNode | - |  |
 | grid | 列表栅格配置 | [object](#list-grid-props) | - |  |
 | header | 列表头部 | ReactNode | - |  |
-| itemLayout | 设置 `List.Item` 布局, 设置成 `vertical` 则竖直样式显示, 默认横排 | string | - |  |
+| itemLayout | 设置 `List.Item` 布局，设置成 `vertical` 则竖直样式显示，默认横排 | string | - |  |
 | loading | 当卡片内容还在加载中时，可以用 `loading` 展示一个占位 | boolean \| [object](/components/spin-cn#api) ([更多](https://github.com/ant-design/ant-design/issues/8659)) | false |  |
 | loadMore | 加载更多 | ReactNode | - |  |
 | locale | 默认文案设置，目前包括空数据文案 | object | {emptyText: `暂无数据`} |  |
-| pagination | 对应的 `pagination` 配置, 设置 false 不显示 | boolean \| object | false |  |
+| pagination | 对应的 `pagination` 配置，设置 false 不显示 | boolean \| object | false |  |
 | renderItem | 当使用 dataSource 时，可以用 `renderItem` 自定义渲染列表项 | (item) => ReactNode | - |  |
 | rowKey | 当 `renderItem` 自定义渲染列表项有效时，自定义每一行的 `key` 的获取方式 | `keyof` T \| (item: T) => `React.Key` | `"key"` |  |
 | size | list 的尺寸 | `default` \| `large` \| `small` | `default` |  |
@@ -81,8 +81,8 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*tBzwQ7raKX8AAA
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| actions | 列表操作组，根据 `itemLayout` 的不同, 位置在卡片底部或者最右侧 | Array&lt;ReactNode> | - |  |
-| extra | 额外内容, 通常用在 `itemLayout` 为 `vertical` 的情况下, 展示右侧内容; `horizontal` 展示在列表元素最右侧 | ReactNode | - |  |
+| actions | 列表操作组，根据 `itemLayout` 的不同，位置在卡片底部或者最右侧 | Array&lt;ReactNode> | - |  |
+| extra | 额外内容，通常用在 `itemLayout` 为 `vertical` 的情况下，展示右侧内容; `horizontal` 展示在列表元素最右侧 | ReactNode | - |  |
 
 ### List.Item.Meta
 
@@ -92,6 +92,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*tBzwQ7raKX8AAA
 | description | 列表元素的描述内容 | ReactNode | -      |      |
 | title       | 列表元素的标题     | ReactNode | -      |      |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="List"></ComponentTokenTable>
diff --git a/components/mentions/index.zh-CN.md b/components/mentions/index.zh-CN.md
index cd9bb5804149..11136657e27c 100644
--- a/components/mentions/index.zh-CN.md
+++ b/components/mentions/index.zh-CN.md
@@ -92,6 +92,6 @@ return (
 | className | css 类名       | string              | -      |
 | style     | 选项样式       | React.CSSProperties | -      |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Mentions"></ComponentTokenTable>
diff --git a/components/mentions/style/index.ts b/components/mentions/style/index.ts
index b7e8adfeb152..c106f4b82bc4 100644
--- a/components/mentions/style/index.ts
+++ b/components/mentions/style/index.ts
@@ -1,6 +1,5 @@
 import type { InputToken } from '../../input/style';
 import {
-  genActiveStyle,
   genBasicInputStyle,
   genDisabledStyle,
   genPlaceholderStyle,
@@ -77,10 +76,6 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = (token) => {
         },
       },
 
-      '&-focused': {
-        ...genActiveStyle(token),
-      },
-
       [`&-affix-wrapper ${componentCls}-suffix`]: {
         position: 'absolute',
         top: 0,
diff --git a/components/menu/OverrideContext.tsx b/components/menu/OverrideContext.tsx
index bec81a456b42..f8b9720379ce 100644
--- a/components/menu/OverrideContext.tsx
+++ b/components/menu/OverrideContext.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { NoCompactStyle } from '../space/Compact';
 import type { MenuProps } from './menu';
+import { supportNodeRef } from 'rc-util';
 
 // Used for Dropdown only
 export interface OverrideContextProps {
@@ -36,7 +37,11 @@ export const OverrideProvider = React.forwardRef<
 
   return (
     <OverrideContext.Provider value={context}>
-      <NoCompactStyle>{React.cloneElement(children as React.ReactElement, { ref })}</NoCompactStyle>
+      <NoCompactStyle>
+        {supportNodeRef(children)
+          ? React.cloneElement(children as React.ReactElement, { ref })
+          : children}
+      </NoCompactStyle>
     </OverrideContext.Provider>
   );
 });
diff --git a/components/menu/demo/sider-current.tsx b/components/menu/demo/sider-current.tsx
index 37f497b1af06..5c3a0afa6c68 100644
--- a/components/menu/demo/sider-current.tsx
+++ b/components/menu/demo/sider-current.tsx
@@ -49,7 +49,7 @@ const App: React.FC = () => {
 
   const onOpenChange: MenuProps['onOpenChange'] = (keys) => {
     const latestOpenKey = keys.find((key) => openKeys.indexOf(key) === -1);
-    if (rootSubmenuKeys.indexOf(latestOpenKey!) === -1) {
+    if (latestOpenKey && rootSubmenuKeys.indexOf(latestOpenKey!) === -1) {
       setOpenKeys(keys);
     } else {
       setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
diff --git a/components/menu/index.zh-CN.md b/components/menu/index.zh-CN.md
index 6440e3c8973a..3321db025268 100644
--- a/components/menu/index.zh-CN.md
+++ b/components/menu/index.zh-CN.md
@@ -146,6 +146,6 @@ Menu 初始化时会先全部渲染，然后根据宽度裁剪内容。当处于
 </div>
 ```
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Menu"></ComponentTokenTable>
diff --git a/components/message/index.tsx b/components/message/index.tsx
index a9c5e134577e..d3216af7fccc 100755
--- a/components/message/index.tsx
+++ b/components/message/index.tsx
@@ -1,9 +1,9 @@
 'use client';
 
-import { render } from 'rc-util/lib/React/render';
 import * as React from 'react';
+import { render } from 'rc-util/lib/React/render';
+
 import ConfigProvider, { globalConfig, warnContext } from '../config-provider';
-import PurePanel from './PurePanel';
 import type {
   ArgsProps,
   ConfigOptions,
@@ -12,10 +12,11 @@ import type {
   NoticeType,
   TypeOpen,
 } from './interface';
+import PurePanel from './PurePanel';
 import useMessage, { useInternalMessage } from './useMessage';
 import { wrapPromiseFn } from './util';
 
-export { ArgsProps };
+export type { ArgsProps };
 
 let message: GlobalMessage | null = null;
 
@@ -70,7 +71,7 @@ function getGlobalContext() {
 
   return {
     prefixCls: mergedPrefixCls,
-    container: mergedContainer,
+    getContainer: () => mergedContainer!,
     duration,
     rtl,
     maxCount,
@@ -84,20 +85,7 @@ interface GlobalHolderRef {
 }
 
 const GlobalHolder = React.forwardRef<GlobalHolderRef, {}>((_, ref) => {
-  const initializeMessageConfig: () => ConfigOptions = () => {
-    const { prefixCls, container, maxCount, duration, rtl, top } = getGlobalContext();
-
-    return {
-      prefixCls,
-      getContainer: () => container!,
-      maxCount,
-      duration,
-      rtl,
-      top,
-    };
-  };
-
-  const [messageConfig, setMessageConfig] = React.useState<ConfigOptions>(initializeMessageConfig);
+  const [messageConfig, setMessageConfig] = React.useState<ConfigOptions>(getGlobalContext);
 
   const [api, holder] = useInternalMessage(messageConfig);
 
@@ -107,7 +95,7 @@ const GlobalHolder = React.forwardRef<GlobalHolderRef, {}>((_, ref) => {
   const theme = global.getTheme();
 
   const sync = () => {
-    setMessageConfig(initializeMessageConfig);
+    setMessageConfig(getGlobalContext);
   };
 
   React.useEffect(sync, []);
diff --git a/components/message/index.zh-CN.md b/components/message/index.zh-CN.md
index b140e999dc0c..d2d6a2cfc8b5 100644
--- a/components/message/index.zh-CN.md
+++ b/components/message/index.zh-CN.md
@@ -107,12 +107,12 @@ message.config({
 | --- | --- | --- | --- | --- |
 | duration | 默认自动关闭延时，单位秒 | number | 3 |  |
 | getContainer | 配置渲染节点的输出位置，但依旧为全屏展示 | () => HTMLElement | () => document.body |  |
-| maxCount | 最大显示数, 超过限制时，最早的消息会被自动关闭 | number | - |  |
+| maxCount | 最大显示数，超过限制时，最早的消息会被自动关闭 | number | - |  |
 | prefixCls | 消息节点的 className 前缀 | string | `ant-message` | 4.5.0 |
 | rtl | 是否开启 RTL 模式 | boolean | false |  |
 | top | 消息距离顶部的位置 | number | 8 |  |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Message"></ComponentTokenTable>
 
diff --git a/components/message/style/index.tsx b/components/message/style/index.tsx
index 794734729130..80cee4cbc5c9 100644
--- a/components/message/style/index.tsx
+++ b/components/message/style/index.tsx
@@ -201,7 +201,4 @@ export default genComponentStyleHook(
       token.paddingSM
     }px`,
   }),
-  {
-    clientOnly: true,
-  },
 );
diff --git a/components/message/useMessage.tsx b/components/message/useMessage.tsx
index 5fb3ed25b992..c49e4a6e26b6 100644
--- a/components/message/useMessage.tsx
+++ b/components/message/useMessage.tsx
@@ -1,6 +1,6 @@
 import CloseOutlined from '@ant-design/icons/CloseOutlined';
 import classNames from 'classnames';
-import { useNotification as useRcNotification } from 'rc-notification';
+import { NotificationProvider, useNotification as useRcNotification } from 'rc-notification';
 import type { NotificationAPI } from 'rc-notification/lib';
 import * as React from 'react';
 import warning from '../_util/warning';
@@ -17,6 +17,8 @@ import type {
 } from './interface';
 import useStyle from './style';
 import { getMotion, wrapPromiseFn } from './util';
+import type { FC, PropsWithChildren } from 'react';
+import type { NotificationConfig as RcNotificationConfig } from 'rc-notification/lib/useNotification';
 
 const DEFAULT_OFFSET = 8;
 const DEFAULT_DURATION = 3;
@@ -30,10 +32,27 @@ type HolderProps = ConfigOptions & {
 
 interface HolderRef extends NotificationAPI {
   prefixCls: string;
-  hashId: string;
   message?: ComponentStyleConfig;
 }
 
+const Wrapper: FC<PropsWithChildren<{ prefixCls: string }>> = ({ children, prefixCls }) => {
+  const [, hashId] = useStyle(prefixCls);
+  return (
+    <NotificationProvider classNames={{ list: hashId, notice: hashId }}>
+      {children}
+    </NotificationProvider>
+  );
+};
+
+const renderNotifications: RcNotificationConfig['renderNotifications'] = (
+  node,
+  { prefixCls, key },
+) => (
+  <Wrapper prefixCls={prefixCls} key={key}>
+    {node}
+  </Wrapper>
+);
+
 const Holder = React.forwardRef<HolderRef, HolderProps>((props, ref) => {
   const {
     top,
@@ -49,8 +68,6 @@ const Holder = React.forwardRef<HolderRef, HolderProps>((props, ref) => {
 
   const prefixCls = staticPrefixCls || getPrefixCls('message');
 
-  const [, hashId] = useStyle(prefixCls);
-
   // =============================== Style ===============================
   const getStyle = (): React.CSSProperties => ({
     left: '50%',
@@ -58,7 +75,7 @@ const Holder = React.forwardRef<HolderRef, HolderProps>((props, ref) => {
     top: top ?? DEFAULT_OFFSET,
   });
 
-  const getClassName = () => classNames(hashId, { [`${prefixCls}-rtl`]: rtl });
+  const getClassName = () => classNames({ [`${prefixCls}-rtl`]: rtl });
 
   // ============================== Motion ===============================
   const getNotificationMotion = () => getMotion(prefixCls, transitionName);
@@ -82,13 +99,13 @@ const Holder = React.forwardRef<HolderRef, HolderProps>((props, ref) => {
     getContainer: () => staticGetContainer?.() || getPopupContainer?.() || document.body,
     maxCount,
     onAllRemoved,
+    renderNotifications,
   });
 
   // ================================ Ref ================================
   React.useImperativeHandle(ref, () => ({
     ...api,
     prefixCls,
-    hashId,
     message,
   }));
 
@@ -128,7 +145,7 @@ export function useInternalMessage(
         return fakeResult;
       }
 
-      const { open: originOpen, prefixCls, hashId, message } = holderRef.current;
+      const { open: originOpen, prefixCls, message } = holderRef.current;
       const noticePrefixCls = `${prefixCls}-notice`;
 
       const { content, icon, type, key, className, style, onClose, ...restConfig } = config;
@@ -151,7 +168,6 @@ export function useInternalMessage(
           placement: 'top',
           className: classNames(
             type && `${noticePrefixCls}-${type}`,
-            hashId,
             className,
             message?.className,
           ),
diff --git a/components/modal/confirm.tsx b/components/modal/confirm.tsx
index 5dc126aaae91..26a6883d0e94 100644
--- a/components/modal/confirm.tsx
+++ b/components/modal/confirm.tsx
@@ -31,7 +31,7 @@ export default function confirm(config: ModalFuncProps) {
   const container = document.createDocumentFragment();
   // eslint-disable-next-line @typescript-eslint/no-use-before-define
   let currentConfig = { ...config, close, open: true } as any;
-  let timeoutId: NodeJS.Timeout;
+  let timeoutId: ReturnType<typeof setTimeout>;
 
   function destroy(...args: any[]) {
     const triggerCancel = args.some((param) => param && param.triggerCancel);
diff --git a/components/modal/index.zh-CN.md b/components/modal/index.zh-CN.md
index a293e7b14676..6f79fd8c4669 100644
--- a/components/modal/index.zh-CN.md
+++ b/components/modal/index.zh-CN.md
@@ -77,7 +77,7 @@ demo:
 
 #### 注意
 
-- `<Modal />` 默认关闭后状态不会自动清空, 如果希望每次打开都是新内容，请设置 `destroyOnClose`。
+- `<Modal />` 默认关闭后状态不会自动清空，如果希望每次打开都是新内容，请设置 `destroyOnClose`。
 - `<Modal />` 和 Form 一起配合使用时，设置 `destroyOnClose` 也不会在 Modal 关闭时销毁表单字段数据，需要设置 `<Form preserve={false} />`。
 - `Modal.method()` RTL 模式仅支持 hooks 用法。
 
@@ -105,7 +105,7 @@ demo:
 | closeIcon | 自定义关闭图标。5.7.0：设置为 `null` 或 `false` 时隐藏关闭按钮 | boolean \| ReactNode | &lt;CloseOutlined /> |  |
 | content | 内容 | ReactNode | - |  |
 | footer | 底部内容，当不需要默认底部按钮时，可以设为 `footer: null` | ReactNode | - | 5.1.0 |
-| getContainer | 指定 Modal 挂载的 HTML 节点, false 为挂载在当前 dom | HTMLElement \| () => HTMLElement \| Selectors \| false | document.body |  |
+| getContainer | 指定 Modal 挂载的 HTML 节点，false 为挂载在当前 dom | HTMLElement \| () => HTMLElement \| Selectors \| false | document.body |  |
 | icon | 自定义图标 | ReactNode | &lt;ExclamationCircleFilled /> |  |
 | keyboard | 是否支持键盘 esc 关闭 | boolean | true |  |
 | mask | 是否展示遮罩 | boolean | true |  |
@@ -181,7 +181,7 @@ return <div>{contextHolder}</div>;
 const confirmed = await modal.confirm({ ... });
 ```
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Modal"></ComponentTokenTable>
 
diff --git a/components/modal/style/index.tsx b/components/modal/style/index.tsx
index 77e007673b0a..14d18166250e 100644
--- a/components/modal/style/index.tsx
+++ b/components/modal/style/index.tsx
@@ -62,10 +62,7 @@ export interface ModalToken extends FullToken<'Modal'> {
 function box(position: React.CSSProperties['position']): React.CSSProperties {
   return {
     position,
-    top: 0,
-    insetInlineEnd: 0,
-    bottom: 0,
-    insetInlineStart: 0,
+    inset: 0,
   };
 }
 
@@ -95,6 +92,7 @@ export const genModalMaskStyle: GenerateStyle<TokenWithCommonCls<AliasToken>> =
           zIndex: token.zIndexPopupBase,
           height: '100%',
           backgroundColor: token.colorBgMask,
+          pointerEvents: 'none',
 
           [`${componentCls}-hidden`]: {
             display: 'none',
@@ -103,9 +101,16 @@ export const genModalMaskStyle: GenerateStyle<TokenWithCommonCls<AliasToken>> =
 
         [`${componentCls}-wrap`]: {
           ...box('fixed'),
+          zIndex: token.zIndexPopupBase,
           overflow: 'auto',
           outline: 0,
           WebkitOverflowScrolling: 'touch',
+
+          // Note: Firefox not support `:has` yet
+          [`&:has(${componentCls}${antCls}-zoom-enter), &:has(${componentCls}${antCls}-zoom-appear)`]:
+            {
+              pointerEvents: 'none',
+            },
         },
       },
     },
@@ -120,14 +125,6 @@ const genModalStyle: GenerateStyle<ModalToken> = (token) => {
     // ======================== Root =========================
     {
       [`${componentCls}-root`]: {
-        [`${componentCls}-wrap`]: {
-          zIndex: token.zIndexPopupBase,
-          position: 'fixed',
-          inset: 0,
-          overflow: 'auto',
-          outline: 0,
-          WebkitOverflowScrolling: 'touch',
-        },
         [`${componentCls}-wrap-rtl`]: {
           direction: 'rtl',
         },
diff --git a/components/notification/index.tsx b/components/notification/index.tsx
index dd852fea5659..21c70ba69775 100755
--- a/components/notification/index.tsx
+++ b/components/notification/index.tsx
@@ -1,10 +1,11 @@
 'use client';
 
-import { render } from 'rc-util/lib/React/render';
 import * as React from 'react';
+import { render } from 'rc-util/lib/React/render';
+
 import ConfigProvider, { globalConfig, warnContext } from '../config-provider';
-import PurePanel from './PurePanel';
 import type { ArgsProps, GlobalConfigProps, NotificationInstance } from './interface';
+import PurePanel from './PurePanel';
 import useNotification, { useInternalNotification } from './useNotification';
 
 let notification: GlobalNotification | null = null;
@@ -45,7 +46,7 @@ function getGlobalContext() {
 
   return {
     prefixCls: mergedPrefixCls,
-    container: mergedContainer,
+    getContainer: () => mergedContainer!,
     rtl,
     maxCount,
     top,
@@ -59,21 +60,10 @@ interface GlobalHolderRef {
 }
 
 const GlobalHolder = React.forwardRef<GlobalHolderRef, {}>((_, ref) => {
-  const [prefixCls, setPrefixCls] = React.useState<string>();
-  const [container, setContainer] = React.useState<HTMLElement | ShadowRoot>();
-  const [maxCount, setMaxCount] = React.useState<number>();
-  const [rtl, setRTL] = React.useState<boolean>();
-  const [top, setTop] = React.useState<number>();
-  const [bottom, setBottom] = React.useState<number>();
-
-  const [api, holder] = useInternalNotification({
-    prefixCls,
-    getContainer: () => container!,
-    maxCount,
-    rtl,
-    top,
-    bottom,
-  });
+  const [notificationConfig, setNotificationConfig] =
+    React.useState<GlobalConfigProps>(getGlobalContext);
+
+  const [api, holder] = useInternalNotification(notificationConfig);
 
   const global = globalConfig();
   const rootPrefixCls = global.getRootPrefixCls();
@@ -81,21 +71,7 @@ const GlobalHolder = React.forwardRef<GlobalHolderRef, {}>((_, ref) => {
   const theme = global.getTheme();
 
   const sync = () => {
-    const {
-      prefixCls: nextGlobalPrefixCls,
-      container: nextGlobalContainer,
-      maxCount: nextGlobalMaxCount,
-      rtl: nextGlobalRTL,
-      top: nextTop,
-      bottom: nextBottom,
-    } = getGlobalContext();
-
-    setPrefixCls(nextGlobalPrefixCls);
-    setContainer(nextGlobalContainer);
-    setMaxCount(nextGlobalMaxCount);
-    setRTL(nextGlobalRTL);
-    setTop(nextTop);
-    setBottom(nextBottom);
+    setNotificationConfig(getGlobalContext);
   };
 
   React.useEffect(sync, []);
diff --git a/components/notification/index.zh-CN.md b/components/notification/index.zh-CN.md
index 53bdfb4e08dc..dc249152b5da 100644
--- a/components/notification/index.zh-CN.md
+++ b/components/notification/index.zh-CN.md
@@ -76,7 +76,7 @@ config 参数如下：
 | placement | 弹出位置，可选 `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | string | `topRight` |  |
 | rtl | 是否开启 RTL 模式 | boolean | false |  |
 | top | 消息从顶部弹出时，距离顶部的位置，单位像素 | number | 24 |  |
-| maxCount | 最大显示数, 超过限制时，最早的消息会被自动关闭 | number | - | 4.17.0 |
+| maxCount | 最大显示数，超过限制时，最早的消息会被自动关闭 | number | - | 4.17.0 |
 
 ### 全局配置
 
@@ -108,9 +108,9 @@ notification.config({
 | placement | 弹出位置，可选 `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | string | `topRight` |  |
 | rtl | 是否开启 RTL 模式 | boolean | false |  |
 | top | 消息从顶部弹出时，距离顶部的位置，单位像素 | number | 24 |  |
-| maxCount | 最大显示数, 超过限制时，最早的消息会被自动关闭 | number | - | 4.17.0 |
+| maxCount | 最大显示数，超过限制时，最早的消息会被自动关闭 | number | - | 4.17.0 |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Notification"></ComponentTokenTable>
 
diff --git a/components/notification/style/index.tsx b/components/notification/style/index.tsx
index c4bfa12e5531..c14d08a802b3 100644
--- a/components/notification/style/index.tsx
+++ b/components/notification/style/index.tsx
@@ -300,7 +300,4 @@ export default genComponentStyleHook(
     zIndexPopup: token.zIndexPopupBase + 50,
     width: 384,
   }),
-  {
-    clientOnly: true,
-  },
 );
diff --git a/components/notification/useNotification.tsx b/components/notification/useNotification.tsx
index 505109b04e94..f9b045133833 100644
--- a/components/notification/useNotification.tsx
+++ b/components/notification/useNotification.tsx
@@ -1,7 +1,10 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import { useNotification as useRcNotification } from 'rc-notification';
-import type { NotificationAPI } from 'rc-notification/lib';
+import { NotificationProvider, useNotification as useRcNotification } from 'rc-notification';
+import type {
+  NotificationAPI,
+  NotificationConfig as RcNotificationConfig,
+} from 'rc-notification/lib';
 import warning from '../_util/warning';
 import { ConfigContext } from '../config-provider';
 import type { ComponentStyleConfig } from '../config-provider/context';
@@ -14,6 +17,7 @@ import type {
 import { getCloseIcon, PureContent } from './PurePanel';
 import useStyle from './style';
 import { getMotion, getPlacementStyle } from './util';
+import type { FC, PropsWithChildren } from 'react';
 
 const DEFAULT_OFFSET = 24;
 const DEFAULT_DURATION = 4.5;
@@ -28,10 +32,27 @@ type HolderProps = NotificationConfig & {
 
 interface HolderRef extends NotificationAPI {
   prefixCls: string;
-  hashId: string;
   notification?: ComponentStyleConfig;
 }
 
+const Wrapper: FC<PropsWithChildren<{ prefixCls: string }>> = ({ children, prefixCls }) => {
+  const [, hashId] = useStyle(prefixCls);
+  return (
+    <NotificationProvider classNames={{ list: hashId, notice: hashId }}>
+      {children}
+    </NotificationProvider>
+  );
+};
+
+const renderNotifications: RcNotificationConfig['renderNotifications'] = (
+  node,
+  { prefixCls, key },
+) => (
+  <Wrapper prefixCls={prefixCls} key={key}>
+    {node}
+  </Wrapper>
+);
+
 const Holder = React.forwardRef<HolderRef, HolderProps>((props, ref) => {
   const {
     top,
@@ -50,10 +71,7 @@ const Holder = React.forwardRef<HolderRef, HolderProps>((props, ref) => {
   const getStyle = (placement: NotificationPlacement): React.CSSProperties =>
     getPlacementStyle(placement, top ?? DEFAULT_OFFSET, bottom ?? DEFAULT_OFFSET);
 
-  // Style
-  const [, hashId] = useStyle(prefixCls);
-
-  const getClassName = () => classNames(hashId, { [`${prefixCls}-rtl`]: rtl });
+  const getClassName = () => classNames({ [`${prefixCls}-rtl`]: rtl });
 
   // ============================== Motion ===============================
   const getNotificationMotion = () => getMotion(prefixCls);
@@ -70,13 +88,13 @@ const Holder = React.forwardRef<HolderRef, HolderProps>((props, ref) => {
     getContainer: () => staticGetContainer?.() || getPopupContainer?.() || document.body,
     maxCount,
     onAllRemoved,
+    renderNotifications,
   });
 
   // ================================ Ref ================================
   React.useImperativeHandle(ref, () => ({
     ...api,
     prefixCls,
-    hashId,
     notification,
   }));
 
@@ -106,7 +124,7 @@ export function useInternalNotification(
         return;
       }
 
-      const { open: originOpen, prefixCls, hashId, notification } = holderRef.current;
+      const { open: originOpen, prefixCls, notification } = holderRef.current;
 
       const noticePrefixCls = `${prefixCls}-notice`;
 
@@ -142,7 +160,6 @@ export function useInternalNotification(
         ),
         className: classNames(
           type && `${noticePrefixCls}-${type}`,
-          hashId,
           className,
           notification?.className,
         ),
diff --git a/components/pagination/index.zh-CN.md b/components/pagination/index.zh-CN.md
index 7085ca158947..cd390892df5a 100644
--- a/components/pagination/index.zh-CN.md
+++ b/components/pagination/index.zh-CN.md
@@ -60,6 +60,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*WM86SrBC8TsAAA
 | onChange | 页码或 `pageSize` 改变的回调，参数是改变后的页码及每页条数 | function(page, pageSize) | - |  |
 | onShowSizeChange | pageSize 变化的回调 | function(current, size) | - |  |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Pagination"></ComponentTokenTable>
diff --git a/components/popconfirm/index.zh-CN.md b/components/popconfirm/index.zh-CN.md
index 7f289f4b013d..743256bbb927 100644
--- a/components/popconfirm/index.zh-CN.md
+++ b/components/popconfirm/index.zh-CN.md
@@ -52,7 +52,7 @@ demo:
 
 更多属性请参考 [Tooltip](/components/tooltip-cn/#api)。
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Popconfirm"></ComponentTokenTable>
 
diff --git a/components/popover/index.zh-CN.md b/components/popover/index.zh-CN.md
index 27ded634f532..218e67f14496 100644
--- a/components/popover/index.zh-CN.md
+++ b/components/popover/index.zh-CN.md
@@ -45,7 +45,7 @@ demo:
 
 请确保 `Popover` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Popover"></ComponentTokenTable>
 
diff --git a/components/progress/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/progress/__tests__/__snapshots__/demo-extend.test.ts.snap
index 51a62b88a3da..269fa47c9fda 100644
--- a/components/progress/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/progress/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -323,14 +323,11 @@ Array [
             viewBox="64 64 896 896"
             width="1em"
           >
-            <defs>
-              <style />
-            </defs>
             <path
               d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
             />
             <path
-              d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+              d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
             />
           </svg>
         </span>
@@ -846,14 +843,11 @@ Array [
             viewBox="64 64 896 896"
             width="1em"
           >
-            <defs>
-              <style />
-            </defs>
             <path
               d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
             />
             <path
-              d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+              d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
             />
           </svg>
         </span>
diff --git a/components/progress/__tests__/__snapshots__/demo.test.ts.snap b/components/progress/__tests__/__snapshots__/demo.test.ts.snap
index caead4be2fa2..f6a4562238ca 100644
--- a/components/progress/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/progress/__tests__/__snapshots__/demo.test.ts.snap
@@ -321,14 +321,11 @@ Array [
             viewBox="64 64 896 896"
             width="1em"
           >
-            <defs>
-              <style />
-            </defs>
             <path
               d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
             />
             <path
-              d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+              d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
             />
           </svg>
         </span>
@@ -812,14 +809,11 @@ Array [
             viewBox="64 64 896 896"
             width="1em"
           >
-            <defs>
-              <style />
-            </defs>
             <path
               d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
             />
             <path
-              d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+              d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
             />
           </svg>
         </span>
diff --git a/components/progress/index.zh-CN.md b/components/progress/index.zh-CN.md
index 646c1ecdc6e6..4e8a4d6cbacc 100644
--- a/components/progress/index.zh-CN.md
+++ b/components/progress/index.zh-CN.md
@@ -77,6 +77,6 @@ demo:
 | gapPosition | 仪表盘进度条缺口位置 | `top` \| `bottom` \| `left` \| `right` | `bottom` | - |
 | strokeWidth | 仪表盘进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 | - |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Progress"></ComponentTokenTable>
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 1a7cd27858cc..ea9b6fb1c677 100644
--- a/components/qr-code/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/qr-code/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -177,14 +177,11 @@ Array [
             viewBox="64 64 896 896"
             width="1em"
           >
-            <defs>
-              <style />
-            </defs>
             <path
               d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
             />
             <path
-              d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+              d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
             />
           </svg>
         </span>
diff --git a/components/qr-code/__tests__/__snapshots__/demo.test.ts.snap b/components/qr-code/__tests__/__snapshots__/demo.test.ts.snap
index 2f8777697910..5b552e702bae 100644
--- a/components/qr-code/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/qr-code/__tests__/__snapshots__/demo.test.ts.snap
@@ -136,14 +136,11 @@ Array [
             viewBox="64 64 896 896"
             width="1em"
           >
-            <defs>
-              <style />
-            </defs>
             <path
               d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
             />
             <path
-              d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+              d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
             />
           </svg>
         </span>
diff --git a/components/qr-code/index.zh-CN.md b/components/qr-code/index.zh-CN.md
index b14cd3b2aa25..1e31634998c4 100644
--- a/components/qr-code/index.zh-CN.md
+++ b/components/qr-code/index.zh-CN.md
@@ -53,7 +53,7 @@ tag: New
 | status | 二维码状态 | `active \| expired \| loading ` | `active` |
 | onRefresh | 点击"点击刷新"的回调 | `() => void` | - |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="QRCode"></ComponentTokenTable>
 
diff --git a/components/radio/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/radio/__tests__/__snapshots__/demo-extend.test.ts.snap
index 988eaaa17e64..affb88bff622 100644
--- a/components/radio/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/radio/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -31,16 +31,18 @@ exports[`renders components/radio/demo/badge.tsx extend context correctly 1`] =
       data-show="true"
       title="1"
     >
-      <span
-        class="ant-scroll-number-only"
-        style="transition: none;"
-      >
+      <bdi>
         <span
-          class="ant-scroll-number-only-unit current"
+          class="ant-scroll-number-only"
+          style="transition: none;"
         >
-          1
+          <span
+            class="ant-scroll-number-only-unit current"
+          >
+            1
+          </span>
         </span>
-      </span>
+      </bdi>
     </sup>
   </span>
   <span
@@ -70,16 +72,18 @@ exports[`renders components/radio/demo/badge.tsx extend context correctly 1`] =
       data-show="true"
       title="2"
     >
-      <span
-        class="ant-scroll-number-only"
-        style="transition: none;"
-      >
+      <bdi>
         <span
-          class="ant-scroll-number-only-unit current"
+          class="ant-scroll-number-only"
+          style="transition: none;"
         >
-          2
+          <span
+            class="ant-scroll-number-only-unit current"
+          >
+            2
+          </span>
         </span>
-      </span>
+      </bdi>
     </sup>
   </span>
 </div>
diff --git a/components/radio/__tests__/__snapshots__/demo.test.tsx.snap b/components/radio/__tests__/__snapshots__/demo.test.tsx.snap
index 224b99ac45af..70bd7a5ab9ad 100644
--- a/components/radio/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/radio/__tests__/__snapshots__/demo.test.tsx.snap
@@ -31,16 +31,18 @@ exports[`renders components/radio/demo/badge.tsx correctly 1`] = `
       data-show="true"
       title="1"
     >
-      <span
-        class="ant-scroll-number-only"
-        style="transition:none"
-      >
+      <bdi>
         <span
-          class="ant-scroll-number-only-unit current"
+          class="ant-scroll-number-only"
+          style="transition:none"
         >
-          1
+          <span
+            class="ant-scroll-number-only-unit current"
+          >
+            1
+          </span>
         </span>
-      </span>
+      </bdi>
     </sup>
   </span>
   <span
@@ -70,16 +72,18 @@ exports[`renders components/radio/demo/badge.tsx correctly 1`] = `
       data-show="true"
       title="2"
     >
-      <span
-        class="ant-scroll-number-only"
-        style="transition:none"
-      >
+      <bdi>
         <span
-          class="ant-scroll-number-only-unit current"
+          class="ant-scroll-number-only"
+          style="transition:none"
         >
-          2
+          <span
+            class="ant-scroll-number-only-unit current"
+          >
+            2
+          </span>
         </span>
-      </span>
+      </bdi>
     </sup>
   </span>
 </div>
diff --git a/components/radio/index.zh-CN.md b/components/radio/index.zh-CN.md
index f7c35d6f8744..4a9d2ef1dc91 100644
--- a/components/radio/index.zh-CN.md
+++ b/components/radio/index.zh-CN.md
@@ -74,6 +74,6 @@ demo:
 | blur()  | 移除焦点 |
 | focus() | 获取焦点 |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Radio"></ComponentTokenTable>
diff --git a/components/radio/style/index.tsx b/components/radio/style/index.tsx
index 18bdc10dd3fe..f2bf9bb8e0cb 100644
--- a/components/radio/style/index.tsx
+++ b/components/radio/style/index.tsx
@@ -223,14 +223,7 @@ const getRadioBasicStyle: GenerateStyle<RadioToken> = (token) => {
 
       [`${componentCls}-input`]: {
         position: 'absolute',
-        insetBlockStart: 0,
-        insetInlineEnd: 0,
-        insetBlockEnd: 0,
-        insetInlineStart: 0,
-        width: 0,
-        height: 0,
-        padding: 0,
-        margin: 0,
+        inset: 0,
         zIndex: 1,
         cursor: 'pointer',
         opacity: 0,
diff --git a/components/rate/index.zh-CN.md b/components/rate/index.zh-CN.md
index cb0b4293639e..d554adbf538c 100644
--- a/components/rate/index.zh-CN.md
+++ b/components/rate/index.zh-CN.md
@@ -58,6 +58,6 @@ demo:
 | blur()  | 移除焦点 |
 | focus() | 获取焦点 |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Rate"></ComponentTokenTable>
diff --git a/components/result/index.zh-CN.md b/components/result/index.zh-CN.md
index afb3d7bff3f8..1867fb58350e 100644
--- a/components/result/index.zh-CN.md
+++ b/components/result/index.zh-CN.md
@@ -38,6 +38,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-0kxQrbHx2kAAA
 | subTitle | subTitle 文字 | ReactNode | - |
 | title | title 文字 | ReactNode | - |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Result"></ComponentTokenTable>
diff --git a/components/segmented/index.zh-CN.md b/components/segmented/index.zh-CN.md
index c38be07ee8ee..8962c30fe51a 100644
--- a/components/segmented/index.zh-CN.md
+++ b/components/segmented/index.zh-CN.md
@@ -50,6 +50,6 @@ demo:
 | size | 控件尺寸 | `large` \| `middle` \| `small` | `middle` |  |
 | value | 当前选中的值 | string \| number |  |  |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Segmented"></ComponentTokenTable>
diff --git a/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap
index 80c859070aaf..5daa54a2ce75 100644
--- a/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1768,14 +1768,11 @@ exports[`renders components/select/demo/custom-dropdown-menu.tsx extend context
                   viewBox="64 64 896 896"
                   width="1em"
                 >
-                  <defs>
-                    <style />
-                  </defs>
                   <path
                     d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
                   />
                   <path
-                    d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+                    d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
                   />
                 </svg>
               </span>
diff --git a/components/select/demo/search.tsx b/components/select/demo/search.tsx
index 511aeca2a6c5..ca580b1e0b85 100644
--- a/components/select/demo/search.tsx
+++ b/components/select/demo/search.tsx
@@ -9,6 +9,10 @@ const onSearch = (value: string) => {
   console.log('search:', value);
 };
 
+// Filter `option.label` match the user type `input`
+const filterOption = (input: string, option: { label: string; value: string }) =>
+  (option?.label ?? '').toLowerCase().includes(input.toLowerCase());
+
 const App: React.FC = () => (
   <Select
     showSearch
@@ -16,9 +20,7 @@ const App: React.FC = () => (
     optionFilterProp="children"
     onChange={onChange}
     onSearch={onSearch}
-    filterOption={(input, option) =>
-      (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
-    }
+    filterOption={filterOption}
     options={[
       {
         value: 'jack',
diff --git a/components/select/index.en-US.md b/components/select/index.en-US.md
index c6f940e1ebf6..2df3e5f4364b 100644
--- a/components/select/index.en-US.md
+++ b/components/select/index.en-US.md
@@ -14,6 +14,7 @@ Select component to select value from options.
 
 - A dropdown menu for displaying choices - an elegant alternative to the native `<select>` element.
 - Utilizing [Radio](/components/radio/) is recommended when there are fewer total options (less than 5).
+- You probably need [AutoComplete](/components/auto-complete/) if you're looking for an input box that can be typed or selected.
 
 ## Examples
 
diff --git a/components/select/index.zh-CN.md b/components/select/index.zh-CN.md
index 468ca665b110..1dd288826d50 100644
--- a/components/select/index.zh-CN.md
+++ b/components/select/index.zh-CN.md
@@ -15,6 +15,7 @@ demo:
 
 - 弹出一个下拉菜单给用户选择操作，用于代替原生的选择器，或者需要一个更优雅的多选器时。
 - 当选项少时（少于 5 项），建议直接将选项平铺，使用 [Radio](/components/radio-cn/) 是更好的选择。
+- 如果你在寻找一个可输可选的输入框，那你可能需要 [AutoComplete](/components/auto-complete-cn/)。
 
 ## 代码演示
 
@@ -69,7 +70,7 @@ demo:
 | dropdownRender | 自定义下拉框内容 | (originNode: ReactNode) => ReactNode | - |  |
 | dropdownStyle | 下拉菜单的 style 属性 | CSSProperties | - |  |
 | fieldNames | 自定义节点 label、value、options、groupLabel 的字段 | object | { label: `label`, value: `value`, options: `options`, groupLabel: `label` } | 4.17.0（`groupLabel` 在 5.6.0 新增） |
-| filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 true，反之则返回 false | boolean \| function(inputValue, option) | true |  |
+| filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 true，反之则返回 false。[示例](#select-demo-search) | boolean \| function(inputValue, option) | true |  |
 | filterSort | 搜索时对筛选结果项的排序函数, 类似[Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)里的 compareFunction | (optionA: Option, optionB: Option) => number | - | 4.9.0 |
 | getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codesandbox.io/s/4j168r7jw0) | function(triggerNode) | () => document.body |  |
 | labelInValue | 是否把每个选项的 label 包装到 value 中，会把 Select 的 value 类型从 `string` 变为 { value: string, label: ReactNode } 的格式 | boolean | false |  |
@@ -135,7 +136,7 @@ demo:
 | key   | Key  | string                  | -      |      |
 | label | 组名 | string \| React.Element | -      |      |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Select"></ComponentTokenTable>
 
diff --git a/components/skeleton/index.zh-CN.md b/components/skeleton/index.zh-CN.md
index c5b12708c1b4..3b670bbbc84a 100644
--- a/components/skeleton/index.zh-CN.md
+++ b/components/skeleton/index.zh-CN.md
@@ -79,6 +79,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*VcjGQLSrYdcAAA
 | active | 是否展示动画效果 | boolean                         | false  |
 | size   | 设置输入框的大小 | `large` \| `small` \| `default` | -      |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Skeleton"></ComponentTokenTable>
diff --git a/components/slider/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/slider/__tests__/__snapshots__/demo-extend.test.ts.snap
index b419dc1a5f88..e1c9c2dcc4e0 100644
--- a/components/slider/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/slider/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -17,6 +17,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="30"
@@ -60,6 +61,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="20"
@@ -89,6 +91,7 @@ Array [
     </div>
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="50"
@@ -160,6 +163,7 @@ Array [
     />
     <div
       aria-disabled="true"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="30"
@@ -194,7 +198,7 @@ Array [
       class="ant-slider-rail"
     />
     <div
-      class="ant-slider-track ant-slider-track-1"
+      class="ant-slider-track ant-slider-track-1 ant-slider-track-draggable"
       style="left: 20%; width: 30%;"
     />
     <div
@@ -202,6 +206,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="20"
@@ -231,6 +236,7 @@ Array [
     </div>
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="50"
@@ -277,6 +283,7 @@ Array [
       />
       <div
         aria-disabled="false"
+        aria-orientation="vertical"
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow="30"
@@ -324,6 +331,7 @@ Array [
       />
       <div
         aria-disabled="false"
+        aria-orientation="vertical"
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow="20"
@@ -353,6 +361,7 @@ Array [
       </div>
       <div
         aria-disabled="false"
+        aria-orientation="vertical"
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow="50"
@@ -417,6 +426,7 @@ Array [
       </div>
       <div
         aria-disabled="false"
+        aria-orientation="vertical"
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow="26"
@@ -446,6 +456,7 @@ Array [
       </div>
       <div
         aria-disabled="false"
+        aria-orientation="vertical"
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow="37"
@@ -518,7 +529,7 @@ exports[`renders components/slider/demo/draggableTrack.tsx extend context correc
     class="ant-slider-rail"
   />
   <div
-    class="ant-slider-track ant-slider-track-1"
+    class="ant-slider-track ant-slider-track-1 ant-slider-track-draggable"
     style="left: 20%; width: 30%;"
   />
   <div
@@ -526,6 +537,7 @@ exports[`renders components/slider/demo/draggableTrack.tsx extend context correc
   />
   <div
     aria-disabled="false"
+    aria-orientation="horizontal"
     aria-valuemax="100"
     aria-valuemin="0"
     aria-valuenow="20"
@@ -555,6 +567,7 @@ exports[`renders components/slider/demo/draggableTrack.tsx extend context correc
   </div>
   <div
     aria-disabled="false"
+    aria-orientation="horizontal"
     aria-valuemax="100"
     aria-valuemin="0"
     aria-valuenow="50"
@@ -604,6 +617,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="30"
@@ -647,6 +661,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="20"
@@ -676,6 +691,7 @@ Array [
     </div>
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="50"
@@ -747,6 +763,7 @@ exports[`renders components/slider/demo/icon-slider.tsx extend context correctly
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="20"
       aria-valuemin="0"
       aria-valuenow="0"
@@ -829,6 +846,7 @@ exports[`renders components/slider/demo/input-number.tsx extend context correctl
           />
           <div
             aria-disabled="false"
+            aria-orientation="horizontal"
             aria-valuemax="20"
             aria-valuemin="1"
             aria-valuenow="1"
@@ -965,6 +983,7 @@ exports[`renders components/slider/demo/input-number.tsx extend context correctl
           />
           <div
             aria-disabled="false"
+            aria-orientation="horizontal"
             aria-valuemax="1"
             aria-valuemin="0"
             aria-valuenow="0"
@@ -1119,6 +1138,7 @@ Array [
     </div>
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="37"
@@ -1209,6 +1229,7 @@ Array [
     </div>
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="26"
@@ -1238,6 +1259,7 @@ Array [
     </div>
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="37"
@@ -1327,6 +1349,7 @@ Array [
     </div>
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="37"
@@ -1420,6 +1443,7 @@ Array [
     </div>
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="37"
@@ -1513,6 +1537,7 @@ Array [
     </div>
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="37"
@@ -1593,6 +1618,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="30"
@@ -1636,6 +1662,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="20"
@@ -1665,6 +1692,7 @@ Array [
     </div>
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="50"
@@ -1735,6 +1763,7 @@ exports[`renders components/slider/demo/show-tooltip.tsx extend context correctl
   />
   <div
     aria-disabled="false"
+    aria-orientation="horizontal"
     aria-valuemax="100"
     aria-valuemin="0"
     aria-valuenow="30"
@@ -1784,6 +1813,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="0"
@@ -1827,6 +1857,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="0"
@@ -1878,6 +1909,7 @@ Array [
       />
       <div
         aria-disabled="false"
+        aria-orientation="vertical"
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow="30"
@@ -1925,6 +1957,7 @@ Array [
       />
       <div
         aria-disabled="false"
+        aria-orientation="vertical"
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow="20"
@@ -1954,6 +1987,7 @@ Array [
       </div>
       <div
         aria-disabled="false"
+        aria-orientation="vertical"
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow="50"
@@ -2018,6 +2052,7 @@ Array [
       </div>
       <div
         aria-disabled="false"
+        aria-orientation="vertical"
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow="26"
@@ -2047,6 +2082,7 @@ Array [
       </div>
       <div
         aria-disabled="false"
+        aria-orientation="vertical"
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow="37"
diff --git a/components/slider/__tests__/__snapshots__/demo.test.ts.snap b/components/slider/__tests__/__snapshots__/demo.test.ts.snap
index f0ffbae372a6..946ff045c089 100644
--- a/components/slider/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/slider/__tests__/__snapshots__/demo.test.ts.snap
@@ -17,6 +17,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="30"
@@ -41,6 +42,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="20"
@@ -51,6 +53,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="50"
@@ -101,6 +104,7 @@ Array [
     />
     <div
       aria-disabled="true"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="30"
@@ -116,7 +120,7 @@ Array [
       class="ant-slider-rail"
     />
     <div
-      class="ant-slider-track ant-slider-track-1"
+      class="ant-slider-track ant-slider-track-1 ant-slider-track-draggable"
       style="left:20%;width:30%"
     />
     <div
@@ -124,6 +128,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="20"
@@ -134,6 +139,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="50"
@@ -161,6 +167,7 @@ Array [
       />
       <div
         aria-disabled="false"
+        aria-orientation="vertical"
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow="30"
@@ -189,6 +196,7 @@ Array [
       />
       <div
         aria-disabled="false"
+        aria-orientation="vertical"
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow="20"
@@ -199,6 +207,7 @@ Array [
       />
       <div
         aria-disabled="false"
+        aria-orientation="vertical"
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow="50"
@@ -244,6 +253,7 @@ Array [
       </div>
       <div
         aria-disabled="false"
+        aria-orientation="vertical"
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow="26"
@@ -254,6 +264,7 @@ Array [
       />
       <div
         aria-disabled="false"
+        aria-orientation="vertical"
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow="37"
@@ -305,7 +316,7 @@ exports[`renders components/slider/demo/draggableTrack.tsx correctly 1`] = `
     class="ant-slider-rail"
   />
   <div
-    class="ant-slider-track ant-slider-track-1"
+    class="ant-slider-track ant-slider-track-1 ant-slider-track-draggable"
     style="left:20%;width:30%"
   />
   <div
@@ -313,6 +324,7 @@ exports[`renders components/slider/demo/draggableTrack.tsx correctly 1`] = `
   />
   <div
     aria-disabled="false"
+    aria-orientation="horizontal"
     aria-valuemax="100"
     aria-valuemin="0"
     aria-valuenow="20"
@@ -323,6 +335,7 @@ exports[`renders components/slider/demo/draggableTrack.tsx correctly 1`] = `
   />
   <div
     aria-disabled="false"
+    aria-orientation="horizontal"
     aria-valuemax="100"
     aria-valuemin="0"
     aria-valuenow="50"
@@ -351,6 +364,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="30"
@@ -375,6 +389,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="20"
@@ -385,6 +400,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="50"
@@ -435,6 +451,7 @@ exports[`renders components/slider/demo/icon-slider.tsx correctly 1`] = `
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="20"
       aria-valuemin="0"
       aria-valuenow="0"
@@ -496,6 +513,7 @@ exports[`renders components/slider/demo/input-number.tsx correctly 1`] = `
           />
           <div
             aria-disabled="false"
+            aria-orientation="horizontal"
             aria-valuemax="20"
             aria-valuemin="1"
             aria-valuenow="1"
@@ -613,6 +631,7 @@ exports[`renders components/slider/demo/input-number.tsx correctly 1`] = `
           />
           <div
             aria-disabled="false"
+            aria-orientation="horizontal"
             aria-valuemax="1"
             aria-valuemin="0"
             aria-valuenow="0"
@@ -746,6 +765,7 @@ Array [
     </div>
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="37"
@@ -817,6 +837,7 @@ Array [
     </div>
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="26"
@@ -827,6 +848,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="37"
@@ -897,6 +919,7 @@ Array [
     </div>
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="37"
@@ -971,6 +994,7 @@ Array [
     </div>
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="37"
@@ -1045,6 +1069,7 @@ Array [
     </div>
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="37"
@@ -1104,6 +1129,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="30"
@@ -1128,6 +1154,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="20"
@@ -1138,6 +1165,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="50"
@@ -1188,6 +1216,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="0"
@@ -1212,6 +1241,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="0"
@@ -1244,6 +1274,7 @@ Array [
       />
       <div
         aria-disabled="false"
+        aria-orientation="vertical"
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow="30"
@@ -1272,6 +1303,7 @@ Array [
       />
       <div
         aria-disabled="false"
+        aria-orientation="vertical"
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow="20"
@@ -1282,6 +1314,7 @@ Array [
       />
       <div
         aria-disabled="false"
+        aria-orientation="vertical"
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow="50"
@@ -1327,6 +1360,7 @@ Array [
       </div>
       <div
         aria-disabled="false"
+        aria-orientation="vertical"
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow="26"
@@ -1337,6 +1371,7 @@ Array [
       />
       <div
         aria-disabled="false"
+        aria-orientation="vertical"
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow="37"
diff --git a/components/slider/__tests__/__snapshots__/index.test.tsx.snap b/components/slider/__tests__/__snapshots__/index.test.tsx.snap
index 980ed81e7b84..9376b8b1b812 100644
--- a/components/slider/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/slider/__tests__/__snapshots__/index.test.tsx.snap
@@ -16,6 +16,7 @@ exports[`Slider rtl render component should be rendered correctly in RTL directi
   />
   <div
     aria-disabled="false"
+    aria-orientation="horizontal"
     aria-valuemax="100"
     aria-valuemin="0"
     aria-valuenow="0"
@@ -44,6 +45,7 @@ exports[`Slider should render in RTL direction 1`] = `
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="30"
diff --git a/components/slider/index.zh-CN.md b/components/slider/index.zh-CN.md
index 438a12a56be8..1bf140a85f0a 100644
--- a/components/slider/index.zh-CN.md
+++ b/components/slider/index.zh-CN.md
@@ -80,6 +80,6 @@ demo:
 | blur()  | 移除焦点 |      |
 | focus() | 获取焦点 |      |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Slider"></ComponentTokenTable>
diff --git a/components/slider/style/index.tsx b/components/slider/style/index.tsx
index 21b7935bab75..ae796144064d 100644
--- a/components/slider/style/index.tsx
+++ b/components/slider/style/index.tsx
@@ -105,6 +105,14 @@ const genBaseStyle: GenerateStyle<SliderToken> = (token) => {
         transition: `background-color ${token.motionDurationMid}`,
       },
 
+      [`${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)',
+      },
+
       '&:hover': {
         [`${componentCls}-rail`]: {
           backgroundColor: token.railHoverBg,
@@ -290,6 +298,19 @@ const genDirectionStyle = (token: SliderToken, horizontal: boolean): CSSObject =
   const handlePos: keyof React.CSSProperties = horizontal ? 'insetBlockStart' : 'insetInlineStart';
   const markInset: keyof React.CSSProperties = horizontal ? 'top' : 'insetInlineStart';
 
+  const handlePosSize = (railSize * 3 - handleSize) / 2;
+  const draggableBorderSize = (handleSize - railSize) / 2;
+
+  const draggableBorder: React.CSSProperties = horizontal
+    ? {
+        borderWidth: `${draggableBorderSize}px 0`,
+        transform: `translateY(-${draggableBorderSize}px)`,
+      }
+    : {
+        borderWidth: `0 ${draggableBorderSize}px`,
+        transform: `translateX(-${draggableBorderSize}px)`,
+      };
+
   return {
     [railPadding]: railSize,
     [part]: railSize * 3,
@@ -303,8 +324,12 @@ const genDirectionStyle = (token: SliderToken, horizontal: boolean): CSSObject =
       [part]: railSize,
     },
 
+    [`${componentCls}-track-draggable`]: {
+      ...draggableBorder,
+    },
+
     [`${componentCls}-handle`]: {
-      [handlePos]: (railSize * 3 - handleSize) / 2,
+      [handlePos]: handlePosSize,
     },
 
     [`${componentCls}-mark`]: {
diff --git a/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
index 581a6fe274b4..17105b6d76d0 100644
--- a/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -15224,6 +15224,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="8"
diff --git a/components/space/__tests__/__snapshots__/demo.test.tsx.snap b/components/space/__tests__/__snapshots__/demo.test.tsx.snap
index 1b614f3f1101..95a8a7c28080 100644
--- a/components/space/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/space/__tests__/__snapshots__/demo.test.tsx.snap
@@ -3987,6 +3987,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="8"
diff --git a/components/space/index.zh-CN.md b/components/space/index.zh-CN.md
index 1c3f05aea4d1..6bc6b2011438 100644
--- a/components/space/index.zh-CN.md
+++ b/components/space/index.zh-CN.md
@@ -81,6 +81,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*37T2R6O9oi0AAA
 | ---- | --------------------- | ----- |
 | item | 设置 `Space` 包裹的子组件 | 5.6.0 |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Space"></ComponentTokenTable>
diff --git a/components/spin/index.zh-CN.md b/components/spin/index.zh-CN.md
index 47eefecae496..ad3f977fca92 100644
--- a/components/spin/index.zh-CN.md
+++ b/components/spin/index.zh-CN.md
@@ -45,6 +45,6 @@ demo:
 
   你可以自定义全局默认 Spin 的元素。
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Spin"></ComponentTokenTable>
diff --git a/components/statistic/Countdown.tsx b/components/statistic/Countdown.tsx
index 4fcd5c95eeba..6fbdf5de1bc6 100644
--- a/components/statistic/Countdown.tsx
+++ b/components/statistic/Countdown.tsx
@@ -24,7 +24,7 @@ const Countdown: React.FC<CountdownProps> = (props) => {
 
   const forceUpdate = useForceUpdate();
 
-  const countdown = React.useRef<NodeJS.Timer | null>(null);
+  const countdown = React.useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const stopTimer = () => {
     onFinish?.();
diff --git a/components/statistic/index.zh-CN.md b/components/statistic/index.zh-CN.md
index 363b4915632f..ec0224fcd164 100644
--- a/components/statistic/index.zh-CN.md
+++ b/components/statistic/index.zh-CN.md
@@ -58,6 +58,6 @@ demo:
 | onFinish | 倒计时完成时触发 | () => void | - |  |
 | onChange | 倒计时时间变化时触发 | (value: number) => void | - | 4.16.0 |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Statistic"></ComponentTokenTable>
diff --git a/components/steps/index.zh-CN.md b/components/steps/index.zh-CN.md
index 768fdf55463b..596915b0f227 100644
--- a/components/steps/index.zh-CN.md
+++ b/components/steps/index.zh-CN.md
@@ -84,6 +84,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cFsBQLA0b7UAAA
 | subTitle | 子标题 | ReactNode | - |  |
 | title | 标题 | ReactNode | - |  |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Steps"></ComponentTokenTable>
diff --git a/components/steps/style/nav.ts b/components/steps/style/nav.ts
index 27f3b1defcef..df906350594a 100644
--- a/components/steps/style/nav.ts
+++ b/components/steps/style/nav.ts
@@ -130,6 +130,13 @@ const genStepsNavStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
           textAlign: 'center',
           transform: 'translateY(-50%) translateX(-50%) rotate(135deg)',
         },
+
+        '&:last-child': {
+          '&::after': {
+            display: 'none',
+          },
+        },
+
         [`> ${componentCls}-item-container > ${componentCls}-item-tail`]: {
           visibility: 'hidden',
         },
diff --git a/components/switch/index.zh-CN.md b/components/switch/index.zh-CN.md
index 51402a7f8f7a..386829a6a32a 100644
--- a/components/switch/index.zh-CN.md
+++ b/components/switch/index.zh-CN.md
@@ -50,6 +50,6 @@ demo:
 | blur()  | 移除焦点 |
 | focus() | 获取焦点 |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Switch"></ComponentTokenTable>
diff --git a/components/table/__tests__/Table.filter.test.tsx b/components/table/__tests__/Table.filter.test.tsx
index 129f1d9c4761..df1ffe210589 100644
--- a/components/table/__tests__/Table.filter.test.tsx
+++ b/components/table/__tests__/Table.filter.test.tsx
@@ -2834,4 +2834,24 @@ describe('Table.filter', () => {
       true,
     );
   });
+
+  it('should not crash when filterDropdown is boolean', () => {
+    const tableProps = {
+      key: 'stabletable',
+      rowKey: 'name',
+      dataSource: [],
+      columns: [
+        {
+          title: 'Name',
+          dataIndex: 'name',
+          filterDropdown: true,
+        },
+      ],
+    };
+
+    const { container } = render(createTable(tableProps));
+
+    // User opens filter Dropdown.
+    fireEvent.click(container.querySelector('.ant-dropdown-trigger.ant-table-filter-trigger')!);
+  });
 });
diff --git a/components/table/index.zh-CN.md b/components/table/index.zh-CN.md
index 4b81b5fe7fdf..9b84bb7bdd84 100644
--- a/components/table/index.zh-CN.md
+++ b/components/table/index.zh-CN.md
@@ -173,7 +173,7 @@ const columns = [
 | --- | --- | --- | --- | --- |
 | align | 设置列的对齐方式 | `left` \| `right` \| `center` | `left` |  |
 | className | 列样式类名 | string | - |  |
-| colSpan | 表头列合并,设置为 0 时，不渲染 | number | - |  |
+| colSpan | 表头列合并，设置为 0 时，不渲染 | number | - |  |
 | dataIndex | 列数据在数据项中对应的路径，支持通过数组查询嵌套路径 | string \| string\[] | - |  |
 | defaultFilteredValue | 默认筛选值 | string\[] | - |  |
 | filterResetToDefaultFilteredValue | 点击重置按钮的时候，是否恢复默认筛选值 | boolean | false |  |
@@ -290,9 +290,9 @@ const columns = [
 ## 在 TypeScript 中使用
 
 ```tsx
+import React from 'react';
 import { Table } from 'antd';
 import type { ColumnsType } from 'antd/es/table';
-import React from 'react';
 
 interface User {
   key: number;
@@ -329,7 +329,7 @@ export default Demo;
 
 TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/serene-platform-0jo5t)。
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Table"></ComponentTokenTable>
 
diff --git a/components/tabs/TabPane.ts b/components/tabs/TabPane.ts
index 6583651e32cf..d75078d0045a 100644
--- a/components/tabs/TabPane.ts
+++ b/components/tabs/TabPane.ts
@@ -7,6 +7,6 @@ if (process.env.NODE_ENV !== 'production') {
   TabPane.displayName = 'DeprecatedTabPane';
 }
 
-export { TabPaneProps };
+export type { TabPaneProps };
 
 export default TabPane;
diff --git a/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap
index abc08d05e9c6..01e230e03cff 100644
--- a/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -2588,14 +2588,11 @@ exports[`renders components/tabs/demo/editable-card.tsx extend context correctly
               viewBox="64 64 896 896"
               width="1em"
             >
-              <defs>
-                <style />
-              </defs>
               <path
                 d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
               />
               <path
-                d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+                d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
               />
             </svg>
           </span>
@@ -2675,14 +2672,11 @@ exports[`renders components/tabs/demo/editable-card.tsx extend context correctly
             viewBox="64 64 896 896"
             width="1em"
           >
-            <defs>
-              <style />
-            </defs>
             <path
               d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
             />
             <path
-              d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+              d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
             />
           </svg>
         </span>
diff --git a/components/tabs/__tests__/__snapshots__/demo.test.ts.snap b/components/tabs/__tests__/__snapshots__/demo.test.ts.snap
index d1d1ee824c20..137a5badd8c3 100644
--- a/components/tabs/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/tabs/__tests__/__snapshots__/demo.test.ts.snap
@@ -2155,14 +2155,11 @@ exports[`renders components/tabs/demo/editable-card.tsx correctly 1`] = `
               viewBox="64 64 896 896"
               width="1em"
             >
-              <defs>
-                <style />
-              </defs>
               <path
                 d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
               />
               <path
-                d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+                d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
               />
             </svg>
           </span>
@@ -2225,14 +2222,11 @@ exports[`renders components/tabs/demo/editable-card.tsx correctly 1`] = `
             viewBox="64 64 896 896"
             width="1em"
           >
-            <defs>
-              <style />
-            </defs>
             <path
               d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
             />
             <path
-              d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+              d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
             />
           </svg>
         </span>
diff --git a/components/tabs/demo/animated.tsx b/components/tabs/demo/animated.tsx
index 4fd231f33d57..fc1fd3cff35e 100644
--- a/components/tabs/demo/animated.tsx
+++ b/components/tabs/demo/animated.tsx
@@ -26,27 +26,27 @@ const App: React.FC = () => {
         animated={{ inkBar, tabPane }}
         items={[
           {
-            label: `Bamboo`,
+            label: 'Bamboo',
             key: '1',
-            children: `Hello Bamboo!`,
+            children: 'Hello Bamboo!',
             style: {
               height: 200,
               boxShadow: '0 0 3px rgba(255, 0, 0, 0.5)',
             },
           },
           {
-            label: `Little`,
+            label: 'Little',
             key: '2',
-            children: `Hi Little!`,
+            children: 'Hi Little!',
             style: {
               height: 300,
               boxShadow: '0 0 3px rgba(0, 255, 0, 0.5)',
             },
           },
           {
-            label: `Light`,
+            label: 'Light',
             key: '3',
-            children: `Welcome Light!`,
+            children: 'Welcome Light!',
             style: {
               height: 100,
               boxShadow: '0 0 3px rgba(0, 0, 255, 0.5)',
diff --git a/components/tabs/demo/basic.tsx b/components/tabs/demo/basic.tsx
index 2b954ec312a6..085ea73bb3f1 100644
--- a/components/tabs/demo/basic.tsx
+++ b/components/tabs/demo/basic.tsx
@@ -9,18 +9,18 @@ const onChange = (key: string) => {
 const items: TabsProps['items'] = [
   {
     key: '1',
-    label: `Tab 1`,
-    children: `Content of Tab Pane 1`,
+    label: 'Tab 1',
+    children: 'Content of Tab Pane 1',
   },
   {
     key: '2',
-    label: `Tab 2`,
-    children: `Content of Tab Pane 2`,
+    label: 'Tab 2',
+    children: 'Content of Tab Pane 2',
   },
   {
     key: '3',
-    label: `Tab 3`,
-    children: `Content of Tab Pane 3`,
+    label: 'Tab 3',
+    children: 'Content of Tab Pane 3',
   },
 ];
 
diff --git a/components/tabs/demo/custom-tab-bar-node.tsx b/components/tabs/demo/custom-tab-bar-node.tsx
index ed429f99bd81..b28bacd05e34 100644
--- a/components/tabs/demo/custom-tab-bar-node.tsx
+++ b/components/tabs/demo/custom-tab-bar-node.tsx
@@ -38,17 +38,17 @@ const App: React.FC = () => {
   const [items, setItems] = useState([
     {
       key: '1',
-      label: `Tab 1`,
+      label: 'Tab 1',
       children: 'Content of Tab Pane 1',
     },
     {
       key: '2',
-      label: `Tab 2`,
+      label: 'Tab 2',
       children: 'Content of Tab Pane 2',
     },
     {
       key: '3',
-      label: `Tab 3`,
+      label: 'Tab 3',
       children: 'Content of Tab Pane 3',
     },
   ]);
diff --git a/components/tabs/demo/custom-tab-bar.tsx b/components/tabs/demo/custom-tab-bar.tsx
index 5a5fc4898441..1e538404a7ef 100644
--- a/components/tabs/demo/custom-tab-bar.tsx
+++ b/components/tabs/demo/custom-tab-bar.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
-import StickyBox from 'react-sticky-box';
+
 import type { TabsProps } from 'antd';
 import { Tabs, theme } from 'antd';
+import StickyBox from 'react-sticky-box';
 
 const items = new Array(3).fill(null).map((_, i) => {
   const id = String(i + 1);
diff --git a/components/tabs/index.en-US.md b/components/tabs/index.en-US.md
index 404628eeb2d7..de4ef153840a 100644
--- a/components/tabs/index.en-US.md
+++ b/components/tabs/index.en-US.md
@@ -48,7 +48,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | --- | --- | --- | --- | --- |
 | activeKey | Current TabPane's key | string | - |  |
 | addIcon | Customize add icon | ReactNode | - | 4.4.0 |
-| animated | Whether to change tabs with animation. Only works while `tabPosition="top"` | boolean \| { inkBar: boolean, tabPane: boolean } | { inkBar: true, tabPane: false } |  |
+| animated | Whether to change tabs with animation. | boolean \| { inkBar: boolean, tabPane: boolean } | { inkBar: true, tabPane: false } |  |
 | centered | Centers tabs | boolean | false | 4.4.0 |
 | defaultActiveKey | Initial active TabPane's key, if `activeKey` is not set | string | - |  |
 | hideAdd | Hide plus icon or not. Only works while `type="editable-card"` | boolean | false |  |
diff --git a/components/tabs/index.zh-CN.md b/components/tabs/index.zh-CN.md
index 1ba9899eddfb..0a76a2d7c959 100644
--- a/components/tabs/index.zh-CN.md
+++ b/components/tabs/index.zh-CN.md
@@ -50,7 +50,7 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
 | --- | --- | --- | --- | --- |
 | activeKey | 当前激活 tab 面板的 key | string | - |  |
 | addIcon | 自定义添加按钮 | ReactNode | - | 4.4.0 |
-| animated | 是否使用动画切换 Tabs, 仅生效于 `tabPosition="top"` | boolean\| { inkBar: boolean, tabPane: boolean } | { inkBar: true, tabPane: false } |  |
+| animated | 是否使用动画切换 Tabs | boolean\| { inkBar: boolean, tabPane: boolean } | { inkBar: true, tabPane: false } |  |
 | centered | 标签居中展示 | boolean | false | 4.4.0 |
 | defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | string | `第一个面板` |  |
 | hideAdd | 是否隐藏加号图标，在 `type="editable-card"` 时有效 | boolean | false |  |
@@ -83,6 +83,6 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
 | label | 选项卡头显示文字 | ReactNode | - |
 | children | 选项卡头显示内容 | ReactNode | - |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Tabs"></ComponentTokenTable>
diff --git a/components/tabs/style/index.ts b/components/tabs/style/index.ts
index c010b20f457c..43c2f34ddaee 100644
--- a/components/tabs/style/index.ts
+++ b/components/tabs/style/index.ts
@@ -663,6 +663,8 @@ const genTabStyle: GenerateStyle<TabsToken, CSSObject> = (token: TabsToken) => {
   return {
     [tabCls]: {
       position: 'relative',
+      WebkitTouchCallout: 'none',
+      WebkitTapHighlightColor: 'transparent',
       display: 'inline-flex',
       alignItems: 'center',
       padding: horizontalItemPadding,
diff --git a/components/tag/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tag/__tests__/__snapshots__/demo-extend.test.ts.snap
index 0c012184a7d8..89502f9bf46f 100644
--- a/components/tag/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/tag/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -116,14 +116,11 @@ Array [
         viewBox="64 64 896 896"
         width="1em"
       >
-        <defs>
-          <style />
-        </defs>
         <path
           d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
         />
         <path
-          d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+          d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
         />
       </svg>
     </span>
@@ -1323,14 +1320,11 @@ exports[`renders components/tag/demo/control.tsx extend context correctly 1`] =
               viewBox="64 64 896 896"
               width="1em"
             >
-              <defs>
-                <style />
-              </defs>
               <path
                 d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
               />
               <path
-                d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+                d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
               />
             </svg>
           </span>
diff --git a/components/tag/__tests__/__snapshots__/demo.test.ts.snap b/components/tag/__tests__/__snapshots__/demo.test.ts.snap
index 4ca5e3007694..27901969540a 100644
--- a/components/tag/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/tag/__tests__/__snapshots__/demo.test.ts.snap
@@ -116,14 +116,11 @@ Array [
         viewBox="64 64 896 896"
         width="1em"
       >
-        <defs>
-          <style />
-        </defs>
         <path
           d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
         />
         <path
-          d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+          d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
         />
       </svg>
     </span>
@@ -1307,14 +1304,11 @@ exports[`renders components/tag/demo/control.tsx correctly 1`] = `
               viewBox="64 64 896 896"
               width="1em"
             >
-              <defs>
-                <style />
-              </defs>
               <path
                 d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
               />
               <path
-                d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+                d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
               />
             </svg>
           </span>
diff --git a/components/tag/index.tsx b/components/tag/index.tsx
index c4e2f890358d..d06a0bae1c81 100644
--- a/components/tag/index.tsx
+++ b/components/tag/index.tsx
@@ -1,8 +1,9 @@
 'use client';
 
+import * as React from 'react';
 import CloseOutlined from '@ant-design/icons/CloseOutlined';
 import classNames from 'classnames';
-import * as React from 'react';
+
 import type { PresetColorType, PresetStatusColorType } from '../_util/colors';
 import { isPresetColor, isPresetStatusColor } from '../_util/colors';
 import useClosable from '../_util/hooks/useClosable';
@@ -12,6 +13,8 @@ import Wave from '../_util/wave';
 import { ConfigContext } from '../config-provider';
 import CheckableTag from './CheckableTag';
 import useStyle from './style';
+import PresetCmp from './style/presetCmp';
+import StatusCmp from './style/statusCmp';
 
 export type { CheckableTagProps } from './CheckableTag';
 
@@ -69,7 +72,9 @@ const InternalTag: React.ForwardRefRenderFunction<HTMLSpanElement, TagProps> = (
     }
   }, [props.visible]);
 
-  const isInternalColor = isPresetColor(color) || isPresetStatusColor(color);
+  const isPreset = isPresetColor(color);
+  const isStatus = isPresetStatusColor(color);
+  const isInternalColor = isPreset || isStatus;
 
   const tagStyle: React.CSSProperties = {
     backgroundColor: color && !isInternalColor ? color : undefined,
@@ -140,6 +145,8 @@ const InternalTag: React.ForwardRefRenderFunction<HTMLSpanElement, TagProps> = (
     <span {...props} ref={ref} className={tagClassName} style={tagStyle}>
       {kids}
       {mergedCloseIcon}
+      {isPreset && <PresetCmp key="preset" prefixCls={prefixCls} />}
+      {isStatus && <StatusCmp key="status" prefixCls={prefixCls} />}
     </span>
   );
 
diff --git a/components/tag/index.zh-CN.md b/components/tag/index.zh-CN.md
index 2898ec49b829..f2706c2f2f4d 100644
--- a/components/tag/index.zh-CN.md
+++ b/components/tag/index.zh-CN.md
@@ -54,6 +54,6 @@ demo:
 | checked  | 设置标签的选中状态   | boolean           | false  |
 | onChange | 点击标签时触发的回调 | (checked) => void | -      |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Tag"></ComponentTokenTable>
diff --git a/components/tag/style/index.ts b/components/tag/style/index.ts
index ec39b35268b9..c54b28f1f8d8 100644
--- a/components/tag/style/index.ts
+++ b/components/tag/style/index.ts
@@ -1,9 +1,11 @@
-import type { CSSInterpolation } from '@ant-design/cssinjs';
 import type React from 'react';
-import capitalize from '../../_util/capitalize';
+import type { CSSInterpolation } from '@ant-design/cssinjs';
+
 import { resetComponent } from '../../style';
+import type { GlobalToken } from '../../theme';
 import type { FullToken } from '../../theme/internal';
-import { genComponentStyleHook, genPresetColor, mergeToken } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
+import type { GenStyleFn } from '../../theme/util/genComponentStyleHook';
 
 export interface ComponentToken {
   /**
@@ -18,7 +20,7 @@ export interface ComponentToken {
   defaultColor: string;
 }
 
-interface TagToken extends FullToken<'Tag'> {
+export interface TagToken extends FullToken<'Tag'> {
   tagFontSize: number;
   tagLineHeight: React.CSSProperties['lineHeight'];
   tagIconSize: number;
@@ -28,44 +30,6 @@ interface TagToken extends FullToken<'Tag'> {
 
 // ============================== Styles ==============================
 
-type CssVariableType = 'Success' | 'Info' | 'Error' | 'Warning';
-
-const genTagStatusStyle = (
-  token: TagToken,
-  status: 'success' | 'processing' | 'error' | 'warning',
-  cssVariableType: CssVariableType,
-): CSSInterpolation => {
-  const capitalizedCssVariableType = capitalize<CssVariableType>(cssVariableType);
-  return {
-    [`${token.componentCls}-${status}`]: {
-      color: token[`color${cssVariableType}`],
-      background: token[`color${capitalizedCssVariableType}Bg`],
-      borderColor: token[`color${capitalizedCssVariableType}Border`],
-      [`&${token.componentCls}-borderless`]: {
-        borderColor: 'transparent',
-      },
-    },
-  };
-};
-
-const genPresetStyle = (token: TagToken) =>
-  genPresetColor(token, (colorKey, { textColor, lightBorderColor, lightColor, darkColor }) => ({
-    [`${token.componentCls}-${colorKey}`]: {
-      color: textColor,
-      background: lightColor,
-      borderColor: lightBorderColor,
-      // Inverse color
-      '&-inverse': {
-        color: token.colorTextLightSolid,
-        background: darkColor,
-        borderColor: darkColor,
-      },
-      [`&${token.componentCls}-borderless`]: {
-        borderColor: 'transparent',
-      },
-    },
-  }));
-
 const genBaseStyle = (token: TagToken): CSSInterpolation => {
   const { paddingXXS, lineWidth, tagPaddingHorizontal, componentCls } = token;
   const paddingInline = tagPaddingHorizontal - lineWidth;
@@ -162,33 +126,33 @@ const genBaseStyle = (token: TagToken): CSSInterpolation => {
 };
 
 // ============================== Export ==============================
+export const prepareToken: (token: Parameters<GenStyleFn<'Tag'>>[0]) => TagToken = (token) => {
+  const { lineWidth, fontSizeIcon } = token;
+
+  const tagFontSize = token.fontSizeSM;
+  const tagLineHeight = `${token.lineHeightSM * tagFontSize}px`;
+
+  const tagToken = mergeToken<TagToken>(token, {
+    tagFontSize,
+    tagLineHeight,
+    tagIconSize: fontSizeIcon - 2 * lineWidth, // Tag icon is much smaller
+    tagPaddingHorizontal: 8, // Fixed padding.
+    tagBorderlessBg: token.colorFillTertiary,
+  });
+  return tagToken;
+};
+
+export const prepareCommonToken: (token: GlobalToken) => ComponentToken = (token) => ({
+  defaultBg: token.colorFillQuaternary,
+  defaultColor: token.colorText,
+});
+
 export default genComponentStyleHook(
   'Tag',
   (token) => {
-    const { lineWidth, fontSizeIcon } = token;
-
-    const tagFontSize = token.fontSizeSM;
-    const tagLineHeight = `${token.lineHeightSM * tagFontSize}px`;
-
-    const tagToken = mergeToken<TagToken>(token, {
-      tagFontSize,
-      tagLineHeight,
-      tagIconSize: fontSizeIcon - 2 * lineWidth, // Tag icon is much smaller
-      tagPaddingHorizontal: 8, // Fixed padding.
-      tagBorderlessBg: token.colorFillTertiary,
-    });
-
-    return [
-      genBaseStyle(tagToken),
-      genPresetStyle(tagToken),
-      genTagStatusStyle(tagToken, 'success', 'Success'),
-      genTagStatusStyle(tagToken, 'processing', 'Info'),
-      genTagStatusStyle(tagToken, 'error', 'Error'),
-      genTagStatusStyle(tagToken, 'warning', 'Warning'),
-    ];
+    const tagToken = prepareToken(token);
+
+    return genBaseStyle(tagToken);
   },
-  (token) => ({
-    defaultBg: token.colorFillQuaternary,
-    defaultColor: token.colorText,
-  }),
+  prepareCommonToken,
 );
diff --git a/components/tag/style/presetCmp.ts b/components/tag/style/presetCmp.ts
new file mode 100644
index 000000000000..fe796b0d45e2
--- /dev/null
+++ b/components/tag/style/presetCmp.ts
@@ -0,0 +1,33 @@
+// Style as status component
+import { prepareCommonToken, prepareToken, type TagToken } from '.';
+import { genPresetColor, genSubStyleComponent } from '../../theme/internal';
+
+// ============================== Preset ==============================
+const genPresetStyle = (token: TagToken) =>
+  genPresetColor(token, (colorKey, { textColor, lightBorderColor, lightColor, darkColor }) => ({
+    [`${token.componentCls}-${colorKey}`]: {
+      color: textColor,
+      background: lightColor,
+      borderColor: lightBorderColor,
+      // Inverse color
+      '&-inverse': {
+        color: token.colorTextLightSolid,
+        background: darkColor,
+        borderColor: darkColor,
+      },
+      [`&${token.componentCls}-borderless`]: {
+        borderColor: 'transparent',
+      },
+    },
+  }));
+
+// ============================== Export ==============================
+export default genSubStyleComponent(
+  ['Tag', 'preset'],
+  (token) => {
+    const tagToken = prepareToken(token);
+
+    return genPresetStyle(tagToken);
+  },
+  prepareCommonToken,
+);
diff --git a/components/tag/style/statusCmp.ts b/components/tag/style/statusCmp.ts
new file mode 100644
index 000000000000..f8d2704d4006
--- /dev/null
+++ b/components/tag/style/statusCmp.ts
@@ -0,0 +1,43 @@
+// Style as status component
+import type { CSSInterpolation } from '@ant-design/cssinjs';
+
+import { prepareCommonToken, prepareToken, type TagToken } from '.';
+import capitalize from '../../_util/capitalize';
+import { genSubStyleComponent } from '../../theme/internal';
+
+// ============================== Status ==============================
+type CssVariableType = 'Success' | 'Info' | 'Error' | 'Warning';
+
+const genTagStatusStyle = (
+  token: TagToken,
+  status: 'success' | 'processing' | 'error' | 'warning',
+  cssVariableType: CssVariableType,
+): CSSInterpolation => {
+  const capitalizedCssVariableType = capitalize<CssVariableType>(cssVariableType);
+  return {
+    [`${token.componentCls}-${status}`]: {
+      color: token[`color${cssVariableType}`],
+      background: token[`color${capitalizedCssVariableType}Bg`],
+      borderColor: token[`color${capitalizedCssVariableType}Border`],
+      [`&${token.componentCls}-borderless`]: {
+        borderColor: 'transparent',
+      },
+    },
+  };
+};
+
+// ============================== Export ==============================
+export default genSubStyleComponent(
+  ['Tag', 'status'],
+  (token) => {
+    const tagToken = prepareToken(token);
+
+    return [
+      genTagStatusStyle(tagToken, 'success', 'Success'),
+      genTagStatusStyle(tagToken, 'processing', 'Info'),
+      genTagStatusStyle(tagToken, 'error', 'Error'),
+      genTagStatusStyle(tagToken, 'warning', 'Warning'),
+    ];
+  },
+  prepareCommonToken,
+);
diff --git a/components/theme/internal.ts b/components/theme/internal.ts
index 66c2fb55e5fd..23bf38fc7748 100644
--- a/components/theme/internal.ts
+++ b/components/theme/internal.ts
@@ -1,4 +1,5 @@
 import { useStyleRegister } from '@ant-design/cssinjs';
+
 import type {
   AliasToken,
   GenerateStyle,
@@ -10,18 +11,21 @@ import type {
 import { PresetColors } from './interface';
 import useToken from './useToken';
 import type { FullToken } from './util/genComponentStyleHook';
-import genComponentStyleHook from './util/genComponentStyleHook';
+import genComponentStyleHook, { genSubStyleComponent } from './util/genComponentStyleHook';
 import genPresetColor from './util/genPresetColor';
 import statisticToken, { merge as mergeToken } from './util/statistic';
+import useResetIconStyle from './util/useResetIconStyle';
 
 export { DesignTokenContext, defaultConfig } from './context';
 export {
   PresetColors,
   genComponentStyleHook,
+  genSubStyleComponent,
   genPresetColor,
   mergeToken,
   statisticToken,
   // hooks
+  useResetIconStyle,
   useStyleRegister,
   useToken,
 };
diff --git a/components/theme/util/genComponentStyleHook.ts b/components/theme/util/genComponentStyleHook.ts
index 4e3838417d4e..ddad00bf3792 100644
--- a/components/theme/util/genComponentStyleHook.ts
+++ b/components/theme/util/genComponentStyleHook.ts
@@ -1,8 +1,9 @@
 /* eslint-disable no-redeclare */
+import { useContext, type ComponentType } from 'react';
 import type { CSSInterpolation } from '@ant-design/cssinjs';
 import { useStyleRegister } from '@ant-design/cssinjs';
 import { warning } from 'rc-util';
-import { useContext } from 'react';
+
 import { ConfigContext } from '../../config-provider/context';
 import { genCommonStyle, genLinkStyle } from '../../style';
 import type {
@@ -13,6 +14,7 @@ import type {
 } from '../interface';
 import useToken from '../useToken';
 import statisticToken, { merge as mergeToken } from './statistic';
+import useResetIconStyle from './useResetIconStyle';
 
 export type OverrideTokenWithoutDerivative = ComponentTokenMap;
 export type OverrideComponent = keyof OverrideTokenWithoutDerivative;
@@ -48,13 +50,19 @@ export type FullToken<ComponentName extends OverrideComponent> = TokenWithCommon
   GlobalTokenWithComponent<ComponentName>
 >;
 
+export type GenStyleFn<ComponentName extends OverrideComponent> = (
+  token: FullToken<ComponentName>,
+  info: StyleInfo<ComponentName>,
+) => CSSInterpolation;
+
 export default function genComponentStyleHook<ComponentName extends OverrideComponent>(
-  component: ComponentName,
-  styleFn: (token: FullToken<ComponentName>, info: StyleInfo<ComponentName>) => CSSInterpolation,
+  componentName: ComponentName | [ComponentName, string],
+  styleFn: GenStyleFn<ComponentName>,
   getDefaultToken?:
+    | null
     | OverrideTokenWithoutDerivative[ComponentName]
     | ((token: GlobalToken) => OverrideTokenWithoutDerivative[ComponentName]),
-  options?: {
+  options: {
     resetStyle?: boolean;
     // Deprecated token key map [["oldTokenKey", "newTokenKey"], ["oldTokenKey", "newTokenKey"]]
     deprecatedTokens?: [ComponentTokenKey<ComponentName>, ComponentTokenKey<ComponentName>][];
@@ -62,8 +70,20 @@ export default function genComponentStyleHook<ComponentName extends OverrideComp
      * Only use component style in client side. Ignore in SSR.
      */
     clientOnly?: boolean;
-  },
+    /**
+     * Set order of component style. Default is -999.
+     */
+    order?: number;
+  } = {},
 ) {
+  const cells = (Array.isArray(componentName) ? componentName : [componentName, componentName]) as [
+    ComponentName,
+    string,
+  ];
+
+  const [component] = cells;
+  const concatComponent = cells.join('-');
+
   return (prefixCls: string): UseComponentStyleResult => {
     const [theme, token, hashId] = useToken();
     const { getPrefixCls, iconPrefixCls, csp } = useContext(ConfigContext);
@@ -75,10 +95,10 @@ export default function genComponentStyleHook<ComponentName extends OverrideComp
       token,
       hashId,
       nonce: () => csp?.nonce!,
-      clientOnly: options?.clientOnly,
+      clientOnly: options.clientOnly,
 
       // antd is always at top of styles
-      order: -999,
+      order: options.order || -999,
     };
 
     // Generate style for all a tags in antd component.
@@ -92,64 +112,91 @@ export default function genComponentStyleHook<ComponentName extends OverrideComp
       ],
     );
 
+    // Generate style for icons
+    useResetIconStyle(iconPrefixCls);
+
     return [
-      useStyleRegister({ ...sharedConfig, path: [component, prefixCls, iconPrefixCls] }, () => {
-        const { token: proxyToken, flush } = statisticToken(token);
-
-        const customComponentToken = { ...(token[component] as ComponentToken<ComponentName>) };
-        if (options?.deprecatedTokens) {
-          const { deprecatedTokens } = options;
-          deprecatedTokens.forEach(([oldTokenKey, newTokenKey]) => {
-            if (process.env.NODE_ENV !== 'production') {
-              warning(
-                !customComponentToken?.[oldTokenKey],
-                `The token '${String(oldTokenKey)}' of ${component} had deprecated, use '${String(
-                  newTokenKey,
-                )}' instead.`,
-              );
-            }
-
-            // Should wrap with `if` clause, or there will be `undefined` in object.
-            if (customComponentToken?.[oldTokenKey] || customComponentToken?.[newTokenKey]) {
-              customComponentToken[newTokenKey] ??= customComponentToken?.[oldTokenKey];
-            }
-          });
-        }
-        const defaultComponentToken =
-          typeof getDefaultToken === 'function'
-            ? getDefaultToken(mergeToken(proxyToken, customComponentToken ?? {}))
-            : getDefaultToken;
-
-        const mergedComponentToken = { ...defaultComponentToken, ...customComponentToken };
-
-        const componentCls = `.${prefixCls}`;
-        const mergedToken = mergeToken<
-          TokenWithCommonCls<GlobalTokenWithComponent<OverrideComponent>>
-        >(
-          proxyToken,
-          {
-            componentCls,
+      useStyleRegister(
+        { ...sharedConfig, path: [concatComponent, prefixCls, iconPrefixCls] },
+        () => {
+          const { token: proxyToken, flush } = statisticToken(token);
+
+          const customComponentToken = { ...(token[component] as ComponentToken<ComponentName>) };
+          if (options.deprecatedTokens) {
+            const { deprecatedTokens } = options;
+            deprecatedTokens.forEach(([oldTokenKey, newTokenKey]) => {
+              if (process.env.NODE_ENV !== 'production') {
+                warning(
+                  !customComponentToken?.[oldTokenKey],
+                  `The token '${String(oldTokenKey)}' of ${component} had deprecated, use '${String(
+                    newTokenKey,
+                  )}' instead.`,
+                );
+              }
+
+              // Should wrap with `if` clause, or there will be `undefined` in object.
+              if (customComponentToken?.[oldTokenKey] || customComponentToken?.[newTokenKey]) {
+                customComponentToken[newTokenKey] ??= customComponentToken?.[oldTokenKey];
+              }
+            });
+          }
+          const defaultComponentToken =
+            typeof getDefaultToken === 'function'
+              ? getDefaultToken(mergeToken(proxyToken, customComponentToken ?? {}))
+              : getDefaultToken;
+
+          const mergedComponentToken = { ...defaultComponentToken, ...customComponentToken };
+
+          const componentCls = `.${prefixCls}`;
+          const mergedToken = mergeToken<
+            TokenWithCommonCls<GlobalTokenWithComponent<OverrideComponent>>
+          >(
+            proxyToken,
+            {
+              componentCls,
+              prefixCls,
+              iconCls: `.${iconPrefixCls}`,
+              antCls: `.${rootPrefixCls}`,
+            },
+            mergedComponentToken,
+          );
+
+          const styleInterpolation = styleFn(mergedToken as unknown as FullToken<ComponentName>, {
+            hashId,
             prefixCls,
-            iconCls: `.${iconPrefixCls}`,
-            antCls: `.${rootPrefixCls}`,
-          },
-          mergedComponentToken,
-        );
-
-        const styleInterpolation = styleFn(mergedToken as unknown as FullToken<ComponentName>, {
-          hashId,
-          prefixCls,
-          rootPrefixCls,
-          iconPrefixCls,
-          overrideComponentToken: customComponentToken as any,
-        });
-        flush(component, mergedComponentToken);
-        return [
-          options?.resetStyle === false ? null : genCommonStyle(token, prefixCls),
-          styleInterpolation,
-        ];
-      }),
+            rootPrefixCls,
+            iconPrefixCls,
+            overrideComponentToken: customComponentToken as any,
+          });
+          flush(component, mergedComponentToken);
+          return [
+            options.resetStyle === false ? null : genCommonStyle(token, prefixCls),
+            styleInterpolation,
+          ];
+        },
+      ),
       hashId,
     ];
   };
 }
+
+export interface SubStyleComponentProps {
+  prefixCls: string;
+}
+
+export const genSubStyleComponent: <ComponentName extends OverrideComponent>(
+  ...args: Parameters<typeof genComponentStyleHook<ComponentName>>
+) => ComponentType<SubStyleComponentProps> = (componentName, styleFn, getDefaultToken, options) => {
+  const useStyle = genComponentStyleHook(componentName, styleFn, getDefaultToken, {
+    resetStyle: false,
+
+    // Sub Style should default after root one
+    order: -998,
+    ...options,
+  });
+
+  return ({ prefixCls }: SubStyleComponentProps) => {
+    useStyle(prefixCls);
+    return null;
+  };
+};
diff --git a/components/theme/util/statistic.ts b/components/theme/util/statistic.ts
index 7a9458c5e6ba..affc8022b184 100644
--- a/components/theme/util/statistic.ts
+++ b/components/theme/util/statistic.ts
@@ -67,7 +67,13 @@ export default function statisticToken<T extends object>(token: T) {
     });
 
     flush = (componentName, componentToken) => {
-      statistic[componentName] = { global: Array.from(tokenKeys!), component: componentToken };
+      statistic[componentName] = {
+        global: Array.from(tokenKeys!),
+        component: {
+          ...statistic[componentName]?.component,
+          ...componentToken,
+        },
+      };
     };
   }
 
diff --git a/components/theme/util/useResetIconStyle.ts b/components/theme/util/useResetIconStyle.ts
new file mode 100644
index 000000000000..f31204f49ba0
--- /dev/null
+++ b/components/theme/util/useResetIconStyle.ts
@@ -0,0 +1,31 @@
+import { useStyleRegister } from '@ant-design/cssinjs';
+import { resetIcon } from '../../style';
+import type { CSPConfig } from '../../config-provider';
+import useToken from '../useToken';
+
+const useResetIconStyle = (iconPrefixCls: string, csp?: CSPConfig) => {
+  const [theme, token] = useToken();
+
+  // Generate style for icons
+  return useStyleRegister(
+    {
+      theme,
+      token,
+      hashId: '',
+      path: ['ant-design-icons', iconPrefixCls],
+      nonce: () => csp?.nonce!,
+    },
+    () => [
+      {
+        [`.${iconPrefixCls}`]: {
+          ...resetIcon(),
+          [`.${iconPrefixCls} .${iconPrefixCls}-icon`]: {
+            display: 'block',
+          },
+        },
+      },
+    ],
+  );
+};
+
+export default useResetIconStyle;
diff --git a/components/time-picker/index.zh-CN.md b/components/time-picker/index.zh-CN.md
index 07364a66ea69..1702aae7870b 100644
--- a/components/time-picker/index.zh-CN.md
+++ b/components/time-picker/index.zh-CN.md
@@ -121,7 +121,7 @@ type RangeDisabledTime = (
 };
 ```
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="DatePicker"></ComponentTokenTable>
 
diff --git a/components/timeline/index.zh-CN.md b/components/timeline/index.zh-CN.md
index d25d9d7f0a9a..8879f4ef46f6 100644
--- a/components/timeline/index.zh-CN.md
+++ b/components/timeline/index.zh-CN.md
@@ -70,6 +70,6 @@ return (
 | children | 设置内容 | ReactNode | - |
 | position | 自定义节点位置 | `left` \| `right` | - |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Timeline"></ComponentTokenTable>
diff --git a/components/tooltip/index.zh-CN.md b/components/tooltip/index.zh-CN.md
index f0de98cdfc83..23d538f7e515 100644
--- a/components/tooltip/index.zh-CN.md
+++ b/components/tooltip/index.zh-CN.md
@@ -63,7 +63,7 @@ demo:
 | zIndex | 设置 Tooltip 的 `z-index` | number | - |  |
 | onOpenChange | 显示隐藏的回调 | (open: boolean) => void | - | 4.23.0 |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Tooltip"></ComponentTokenTable>
 
diff --git a/components/tour/index.zh-CN.md b/components/tour/index.zh-CN.md
index 3e09e4d85dc6..348293ee8b48 100644
--- a/components/tour/index.zh-CN.md
+++ b/components/tour/index.zh-CN.md
@@ -64,6 +64,6 @@ tag: New
 | prevButtonProps | 上一步按钮的属性 | `{ children: ReactNode; onClick: Function }` | - |  |
 | scrollIntoViewOptions | 是否支持当前元素滚动到视窗内，也可传入配置指定滚动视窗的相关参数，默认跟随 Tour 的 `scrollIntoViewOptions` 属性 | `boolean \| ScrollIntoViewOptions` | `true` | 5.2.0 |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Tour"></ComponentTokenTable>
diff --git a/components/tour/style/index.ts b/components/tour/style/index.ts
index 679ba7d078c8..c95762b56820 100644
--- a/components/tour/style/index.ts
+++ b/components/tour/style/index.ts
@@ -1,4 +1,5 @@
 import { TinyColor } from '@ctrl/tinycolor';
+
 import { resetComponent } from '../../style';
 import getArrowStyle, { MAX_VERTICAL_CONTENT_RADIUS } from '../../style/placementArrow';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
@@ -31,7 +32,7 @@ const genBaseStyle: GenerateStyle<TourToken> = (token) => {
     boxShadowTertiary,
     tourZIndexPopup,
     fontSize,
-    colorBgContainer,
+    colorBgElevated,
     fontWeightStrong,
     marginXS,
     colorTextLightSolid,
@@ -56,7 +57,7 @@ const genBaseStyle: GenerateStyle<TourToken> = (token) => {
         fontSize,
         lineHeight,
         width: 520,
-        '--antd-arrow-background-color': colorBgContainer,
+        '--antd-arrow-background-color': colorBgElevated,
 
         '&-pure': {
           maxWidth: '100%',
@@ -77,7 +78,7 @@ const genBaseStyle: GenerateStyle<TourToken> = (token) => {
           borderRadius: tourBorderRadius,
           boxShadow: boxShadowTertiary,
           position: 'relative',
-          backgroundColor: colorBgContainer,
+          backgroundColor: colorBgElevated,
           border: 'none',
           backgroundClip: 'padding-box',
 
diff --git a/components/transfer/index.zh-CN.md b/components/transfer/index.zh-CN.md
index 4a61c6304be3..555549f6574c 100644
--- a/components/transfer/index.zh-CN.md
+++ b/components/transfer/index.zh-CN.md
@@ -97,7 +97,7 @@ Transfer 支持接收 `children` 自定义渲染列表，并返回以下参数
 return <Transfer rowKey={(record) => record.uid} />;
 ```
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Transfer"></ComponentTokenTable>
 
diff --git a/components/transfer/style/index.ts b/components/transfer/style/index.ts
index 54e01e3e0182..cb6ffd25e2f8 100644
--- a/components/transfer/style/index.ts
+++ b/components/transfer/style/index.ts
@@ -305,6 +305,11 @@ const genTransferListStyle: GenerateStyle<TransferToken> = (token: TransferToken
     '&-footer': {
       borderTop: `${lineWidth}px ${lineType} ${colorSplit}`,
     },
+
+    // fix: https://github.com/ant-design/ant-design/issues/44489
+    '&-checkbox': {
+      lineHeight: 1,
+    },
   };
 };
 
diff --git a/components/tree-select/index.zh-CN.md b/components/tree-select/index.zh-CN.md
index 00a15d34dd7b..8c2fbd8b2126 100644
--- a/components/tree-select/index.zh-CN.md
+++ b/components/tree-select/index.zh-CN.md
@@ -110,7 +110,7 @@ demo:
 | title           | 树节点显示的内容                                   | ReactNode | `---`  |      |
 | value           | 默认根据此属性值进行筛选（其值在整个树范围内唯一） | string    | -      |      |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="TreeSelect"></ComponentTokenTable>
 
diff --git a/components/tree/index.zh-CN.md b/components/tree/index.zh-CN.md
index c4d985bdaf8c..58fc9db305ab 100644
--- a/components/tree/index.zh-CN.md
+++ b/components/tree/index.zh-CN.md
@@ -126,7 +126,7 @@ demo:
 | --- | --- |
 | scrollTo({ key: string \| number; align?: 'top' \| 'bottom' \| 'auto'; offset?: number }) | 虚拟滚动下，滚动到指定 key 条目 |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Transfer"></ComponentTokenTable>
 
diff --git a/components/typography/Base/Ellipsis.tsx b/components/typography/Base/Ellipsis.tsx
index 9e840e3a0453..9383e1369460 100644
--- a/components/typography/Base/Ellipsis.tsx
+++ b/components/typography/Base/Ellipsis.tsx
@@ -86,6 +86,8 @@ const Ellipsis: React.FC<EllipsisProps> = ({
   const [[startLen, midLen, endLen], setCutLength] = React.useState<
     [startLen: number, midLen: number, endLen: number]
   >([0, 0, 0]);
+  // record last done with ellipsis width
+  const [lastLen, setLastLen] = React.useState(0);
   const [walkingState, setWalkingState] = React.useState<WalkingState>(NONE);
 
   const [singleRowHeight, setSingleRowHeight] = React.useState(0);
@@ -98,6 +100,10 @@ const Ellipsis: React.FC<EllipsisProps> = ({
 
   const mergedChildren = React.useMemo(() => {
     if (!enabledMeasure || walkingState !== DONE_WITH_ELLIPSIS) {
+      // if has lastLen, use it as temporary width to avoid lots of text to squeeze space.
+      if (lastLen && walkingState !== DONE_WITHOUT_ELLIPSIS && enabledMeasure)
+        return children(sliceNodes(nodeList, lastLen), lastLen < totalLen);
+
       return children(nodeList, false);
     }
 
@@ -153,6 +159,7 @@ const Ellipsis: React.FC<EllipsisProps> = ({
           setCutLength([nextStartLen, nextMidLen, nextEndLen]);
         } else {
           setWalkingState(DONE_WITH_ELLIPSIS);
+          setLastLen(midLen);
           onEllipsis(true);
         }
       }
diff --git a/components/typography/Base/index.tsx b/components/typography/Base/index.tsx
index 56cef15b4775..7baefd7711de 100644
--- a/components/typography/Base/index.tsx
+++ b/components/typography/Base/index.tsx
@@ -193,7 +193,7 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
   // ========================== Copyable ==========================
   const [enableCopy, copyConfig] = useMergedConfig<CopyConfig>(copyable);
   const [copied, setCopied] = React.useState(false);
-  const copyIdRef = React.useRef<NodeJS.Timeout | null>(null);
+  const copyIdRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const copyOptions: Pick<CopyConfig, 'format'> = {};
   if (copyConfig.format) {
diff --git a/components/typography/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/typography/__tests__/__snapshots__/demo-extend.test.ts.snap
index 5e108e042211..e0063e78afaa 100644
--- a/components/typography/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/typography/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -618,6 +618,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="10"
       aria-valuemin="1"
       aria-valuenow="1"
@@ -2424,6 +2425,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="10"
       aria-valuemin="1"
       aria-valuenow="1"
diff --git a/components/typography/__tests__/__snapshots__/demo.test.tsx.snap b/components/typography/__tests__/__snapshots__/demo.test.tsx.snap
index 05a3490c2820..743abc44b66e 100644
--- a/components/typography/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/typography/__tests__/__snapshots__/demo.test.tsx.snap
@@ -629,6 +629,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="10"
       aria-valuemin="1"
       aria-valuenow="1"
@@ -1957,6 +1958,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="10"
       aria-valuemin="1"
       aria-valuenow="1"
diff --git a/components/typography/__tests__/ellipsis.test.tsx b/components/typography/__tests__/ellipsis.test.tsx
index 0306cad46f52..e50a47e06d41 100644
--- a/components/typography/__tests__/ellipsis.test.tsx
+++ b/components/typography/__tests__/ellipsis.test.tsx
@@ -45,7 +45,7 @@ describe('Typography.Ellipsis', () => {
 
     computeSpy = jest
       .spyOn(window, 'getComputedStyle')
-      .mockImplementation(() => ({ fontSize: 12 } as unknown as CSSStyleDeclaration));
+      .mockImplementation(() => ({ fontSize: 12 }) as unknown as CSSStyleDeclaration);
   });
 
   afterEach(() => {
@@ -433,4 +433,78 @@ describe('Typography.Ellipsis', () => {
     });
     mockRectSpy.mockRestore();
   });
+
+  it('should not throw default dom nodes', async () => {
+    let currentWidth = 100;
+    // string count is different with different width
+    const getLineStrCount = (width: number) => {
+      const res = width === 100 ? 20 : 17;
+      return res;
+    };
+
+    const ref = React.createRef<HTMLElement>();
+    const resize = (width: number) => {
+      currentWidth = width;
+      if (ref.current) triggerResize(ref.current);
+    };
+
+    mockRectSpy = spyElementPrototypes(HTMLElement, {
+      offsetHeight: {
+        get() {
+          let html = this.innerHTML;
+          html = html.replace(/<[^>]*>/g, '');
+          const lines = Math.ceil(html.length / getLineStrCount(currentWidth));
+
+          return lines * 16;
+        },
+      },
+      offsetWidth: {
+        get: () => currentWidth,
+      },
+      getBoundingClientRect() {
+        let html = this.innerHTML;
+        html = html.replace(/<[^>]*>/g, '');
+        const lines = Math.ceil(html.length / getLineStrCount(currentWidth));
+        return { height: lines * 16 };
+      },
+    });
+
+    const { container } = render(
+      <Base
+        ellipsis={{
+          rows: 2,
+        }}
+        ref={ref}
+        editable
+        component="p"
+      >
+        {fullStr}
+      </Base>,
+    );
+
+    // hijackings Math.ceil
+    const originalCeil = Math.ceil;
+    let hasDefaultStr = false;
+
+    // Math.ceil will be used for ellipsis's calculations;
+    Math.ceil = (value) => {
+      const text = container.querySelector('p')?.innerHTML.replace(/<[^>]*>/g, '');
+      if (text && !text.includes('...')) {
+        hasDefaultStr = true;
+      }
+      return originalCeil.call(Math, value);
+    };
+
+    resize(50);
+    await waitFakeTimer(20, 1);
+    // ignore last result
+    hasDefaultStr = false;
+    resize(100);
+    await waitFakeTimer();
+
+    expect(hasDefaultStr).not.toBeTruthy();
+    // reset
+    mockRectSpy.mockRestore();
+    Math.ceil = originalCeil;
+  });
 });
diff --git a/components/typography/index.en-US.md b/components/typography/index.en-US.md
index 8a7e6a5b8630..a65157ad279c 100644
--- a/components/typography/index.en-US.md
+++ b/components/typography/index.en-US.md
@@ -40,7 +40,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | delete | Deleted line style | boolean | false |  |
 | disabled | Disabled content | boolean | false |  |
 | editable | If editable. Can control edit state when is object | boolean \| [editable](#editable) | false | [editable](#editable) |
-| ellipsis | Display ellipsis when text overflows，can't configure expandable、rows and onExpand by using object. Diff with Typography.Paragraph, Text do not have 100% width style which means it will fix width on the first ellipsis. If you want to have responsive ellipsis, please set width manually | boolean \| [Omit<ellipsis, 'expandable' \| 'rows' \| 'onExpand'>](#ellipsis) | false | [ellipsis](#ellipsis) |
+| ellipsis | Display ellipsis when text overflows, can't configure expandable、rows and onExpand by using object. Diff with Typography.Paragraph, Text do not have 100% width style which means it will fix width on the first ellipsis. If you want to have responsive ellipsis, please set width manually | boolean \| [Omit<ellipsis, 'expandable' \| 'rows' \| 'onExpand'>](#ellipsis) | false | [ellipsis](#ellipsis) |
 | keyboard | Keyboard style | boolean | false | 4.3.0 |
 | mark | Marked style | boolean | false |  |
 | onClick | Set the handler to handle click event | (event) => void | - |  |
diff --git a/components/typography/index.zh-CN.md b/components/typography/index.zh-CN.md
index c9af276415a3..8ef789c95d9c 100644
--- a/components/typography/index.zh-CN.md
+++ b/components/typography/index.zh-CN.md
@@ -156,7 +156,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LT2jR41Uj2EAAA
 | onEllipsis | 触发省略时的回调 | function(ellipsis) | - | 4.2.0 |
 | onExpand | 点击展开时的回调 | function(event) | - |  |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Typography"></ComponentTokenTable>
 
diff --git a/components/upload/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/upload/__tests__/__snapshots__/demo-extend.test.ts.snap
index 1a120c1bd875..2527c49996aa 100644
--- a/components/upload/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/upload/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -33,14 +33,11 @@ Array [
               viewBox="64 64 896 896"
               width="1em"
             >
-              <defs>
-                <style />
-              </defs>
               <path
                 d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
               />
               <path
-                d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+                d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
               />
             </svg>
           </span>
@@ -84,14 +81,11 @@ Array [
               viewBox="64 64 896 896"
               width="1em"
             >
-              <defs>
-                <style />
-              </defs>
               <path
                 d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
               />
               <path
-                d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+                d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
               />
             </svg>
           </span>
@@ -2120,14 +2114,11 @@ exports[`renders components/upload/demo/file-type.tsx extend context correctly 1
               viewBox="64 64 896 896"
               width="1em"
             >
-              <defs>
-                <style />
-              </defs>
               <path
                 d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
               />
               <path
-                d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+                d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
               />
             </svg>
           </span>
@@ -2951,14 +2942,11 @@ exports[`renders components/upload/demo/picture-card.tsx extend context correctl
               viewBox="64 64 896 896"
               width="1em"
             >
-              <defs>
-                <style />
-              </defs>
               <path
                 d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
               />
               <path
-                d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+                d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
               />
             </svg>
           </span>
@@ -3255,14 +3243,11 @@ exports[`renders components/upload/demo/picture-circle.tsx extend context correc
               viewBox="64 64 896 896"
               width="1em"
             >
-              <defs>
-                <style />
-              </defs>
               <path
                 d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
               />
               <path
-                d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+                d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
               />
             </svg>
           </span>
diff --git a/components/upload/__tests__/__snapshots__/demo.test.ts.snap b/components/upload/__tests__/__snapshots__/demo.test.ts.snap
index cd5d21ce9cc1..d278b942d734 100644
--- a/components/upload/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/upload/__tests__/__snapshots__/demo.test.ts.snap
@@ -33,14 +33,11 @@ Array [
               viewBox="64 64 896 896"
               width="1em"
             >
-              <defs>
-                <style />
-              </defs>
               <path
                 d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
               />
               <path
-                d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+                d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
               />
             </svg>
           </span>
@@ -84,14 +81,11 @@ Array [
               viewBox="64 64 896 896"
               width="1em"
             >
-              <defs>
-                <style />
-              </defs>
               <path
                 d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
               />
               <path
-                d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+                d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
               />
             </svg>
           </span>
@@ -1973,14 +1967,11 @@ exports[`renders components/upload/demo/file-type.tsx correctly 1`] = `
               viewBox="64 64 896 896"
               width="1em"
             >
-              <defs>
-                <style />
-              </defs>
               <path
                 d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
               />
               <path
-                d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+                d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
               />
             </svg>
           </span>
@@ -2779,14 +2770,11 @@ exports[`renders components/upload/demo/picture-card.tsx correctly 1`] = `
               viewBox="64 64 896 896"
               width="1em"
             >
-              <defs>
-                <style />
-              </defs>
               <path
                 d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
               />
               <path
-                d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+                d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
               />
             </svg>
           </span>
@@ -3062,14 +3050,11 @@ exports[`renders components/upload/demo/picture-circle.tsx correctly 1`] = `
               viewBox="64 64 896 896"
               width="1em"
             >
-              <defs>
-                <style />
-              </defs>
               <path
                 d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
               />
               <path
-                d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+                d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
               />
             </svg>
           </span>
diff --git a/components/upload/index.en-US.md b/components/upload/index.en-US.md
index a31fe17e110b..e7f01b70a6f0 100644
--- a/components/upload/index.en-US.md
+++ b/components/upload/index.en-US.md
@@ -72,7 +72,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | progress | Custom progress bar | [ProgressProps](/components/progress/#api) (support `type="line"` only) | { strokeWidth: 2, showInfo: false } | 4.3.0 |
 | showUploadList | Whether to show default upload list, could be an object to specify `showPreviewIcon`, `showRemoveIcon`, `showDownloadIcon`, `removeIcon` and `downloadIcon` individually | boolean \| { showPreviewIcon?: boolean, showDownloadIcon?: boolean, showRemoveIcon?: boolean, previewIcon?: ReactNode \| (file: UploadFile) => ReactNode, removeIcon?: ReactNode \| (file: UploadFile) => ReactNode, downloadIcon?: ReactNode \| (file: UploadFile) => ReactNode } | true | function: 4.7.0 |
 | withCredentials | The ajax upload with cookie sent | boolean | false |  |
-| onChange | A callback function, can be executed when uploading state is changing, see [onChange](#onchange) | function | - |  |
+| onChange | A callback function, can be executed when uploading state is changing. It will trigger by every uploading phase. see [onChange](#onchange) | function | - |  |
 | onDrop | A callback function executed when files are dragged and dropped into the upload area | (event: React.DragEvent) => void | - | 4.16.0 |
 | onDownload | Click the method to download the file, pass the method to perform the method logic, and do not pass the default jump to the new TAB | function(file): void | (Jump to new TAB) |  |
 | onPreview | A callback function, will be executed when the file link or preview icon is clicked | function(file) | - |  |
@@ -87,18 +87,18 @@ Extends File with additional props.
 | crossOrigin | CORS settings attributes | `'anonymous'` \| `'use-credentials'` \| `''` | - | 4.20.0 |
 | name | File name | string | - | - |
 | percent | Upload progress percent | number | - | - |
-| status | Upload status. Show different style when configured | `error` \| `success` \| `done` \| `uploading` \| `removed` | - | - |
+| status | Upload status. Show different style when configured | `error` \| `done` \| `uploading` \| `removed` | - | - |
 | thumbUrl | Thumb image url | string | - | - |
 | uid | unique id. Will auto-generate when not provided | string | - | - |
 | url | Download url | string | - | - |
 
 ### onChange
 
-> The function will be called when uploading is in progress, completed, or failed.
+> 💡 The function will be called when uploading is in progress, completed, or failed.
 
 When uploading state change, it returns:
 
-```js
+```jsx
 {
   file: { /* ... */ },
   fileList: [ /* ... */ ],
@@ -108,11 +108,11 @@ When uploading state change, it returns:
 
 1. `file` File object for the current operation.
 
-   ```js
+   ```jsx
    {
       uid: 'uid',      // unique identifier, negative is recommended, to prevent interference with internally generated id
       name: 'xx.png',   // file name
-      status: 'done', // options： uploading, done, error, removed. Intercepted file by beforeUpload doesn't have a status field.
+      status: 'done' | 'uploading' | 'error' | 'removed', // Intercepted file by beforeUpload doesn't have a status field.
       response: '{"status": "success"}', // response from server
       linkProps: '{"download": "image"}', // additional HTML props of file link
       xhr: 'XMLHttpRequest{ ... }', // XMLHttpRequest Header
@@ -152,7 +152,9 @@ For compatible case, we return File object when `beforeUpload` return `false`. I
 
 ### Why sometimes Chrome can not upload?
 
-Chrome update will also break native upload. Please restart Chrome to finish the upload work. Ref:
+Chrome update will also break native upload. Please restart Chrome to finish the upload work.
+
+Ref:
 
 - [#32672](https://github.com/ant-design/ant-design/issues/32672)
 - [#32913](https://github.com/ant-design/ant-design/issues/32913)
diff --git a/components/upload/index.zh-CN.md b/components/upload/index.zh-CN.md
index 6d91bba9ca77..d3203de4ab45 100644
--- a/components/upload/index.zh-CN.md
+++ b/components/upload/index.zh-CN.md
@@ -50,7 +50,7 @@ demo:
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| accept | 接受上传的文件类型, 详见 [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) | string | - |  |
+| accept | 接受上传的文件类型，详见 [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) | string | - |  |
 | action | 上传的地址 | string \| (file) => Promise&lt;string> | - |  |
 | beforeUpload | 上传文件之前的钩子，参数为上传的文件，若返回 `false` 则停止上传。支持返回一个 Promise 对象，Promise 对象 reject 时则停止上传，resolve 时开始上传（ resolve 传入 `File` 或 `Blob` 对象则上传 resolve 传入对象）；也可以返回 `Upload.LIST_IGNORE`，此时列表中将不展示此文件。 **注意：IE9 不支持该方法** | (file, fileList) => boolean \| Promise&lt;File> \| `Upload.LIST_IGNORE` | - |  |
 | customRequest | 通过覆盖默认的上传行为，可以自定义自己的上传实现 | function | - |  |
@@ -73,7 +73,7 @@ demo:
 | progress | 自定义进度条样式 | [ProgressProps](/components/progress-cn#api)（仅支持 `type="line"`） | { strokeWidth: 2, showInfo: false } | 4.3.0 |
 | showUploadList | 是否展示文件列表, 可设为一个对象，用于单独设定 `showPreviewIcon`, `showRemoveIcon`, `showDownloadIcon`, `removeIcon` 和 `downloadIcon` | boolean \| { showPreviewIcon?: boolean, showRemoveIcon?: boolean, showDownloadIcon?: boolean, previewIcon?: ReactNode \| (file: UploadFile) => ReactNode, removeIcon?: ReactNode \| (file: UploadFile) => ReactNode, downloadIcon?: ReactNode \| (file: UploadFile) => ReactNode } | true | function: 4.7.0 |
 | withCredentials | 上传请求时是否携带 cookie | boolean | false |  |
-| onChange | 上传文件改变时的回调，详见 [onChange](#onchange) | function | - |  |
+| onChange | 上传文件改变时的回调，上传每个阶段都会触发该事件。详见 [onChange](#onchange) | function | - |  |
 | onDrop | 当文件被拖入上传区域时执行的回调功能 | (event: React.DragEvent) => void | - | 4.16.0 |
 | onDownload | 点击下载文件时的回调，如果没有指定，则默认跳转到文件 url 对应的标签页 | function(file): void | (跳转新标签页) |  |
 | onPreview | 点击文件链接或预览图标时的回调 | function(file) | - |  |
@@ -88,18 +88,18 @@ demo:
 | crossOrigin | CORS 属性设置 | `'anonymous'` \| `'use-credentials'` \| `''` | - | 4.20.0 |
 | name | 文件名 | string | - | - |
 | percent | 上传进度 | number | - | - |
-| status | 上传状态，不同状态展示颜色也会有所不同 | `error` \| `success` \| `done` \| `uploading` \| `removed` | - | - |
+| status | 上传状态，不同状态展示颜色也会有所不同 | `error` \| `done` \| `uploading` \| `removed` | - | - |
 | thumbUrl | 缩略图地址 | string | - | - |
 | uid | 唯一标识符，不设置时会自动生成 | string | - | - |
 | url | 下载地址 | string | - | - |
 
 ### onChange
 
-> 上传中、完成、失败都会调用这个函数。
+> 💡 上传中、完成、失败都会调用这个函数。
 
 文件状态改变的回调，返回为：
 
-```js
+```jsx
 {
   file: { /* ... */ },
   fileList: [ /* ... */ ],
@@ -109,11 +109,11 @@ demo:
 
 1. `file` 当前操作的文件对象。
 
-   ```js
+   ```jsx
    {
       uid: 'uid',      // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突
       name: 'xx.png',   // 文件名
-      status: 'done', // 状态有：uploading done error removed，被 beforeUpload 拦截的文件没有 status 属性
+      status: 'done' | 'uploading' | 'error' | 'removed' , //  beforeUpload 拦截的文件没有 status 状态属性
       response: '{"status": "success"}', // 服务端响应内容
       linkProps: '{"download": "image"}', // 下载链接额外的 HTML 属性
    }
@@ -123,7 +123,7 @@ demo:
 
 3. `event` 上传中的服务端响应内容，包含了上传进度等信息，高级浏览器支持。
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Upload"></ComponentTokenTable>
 
@@ -136,7 +136,7 @@ demo:
 
 ### 如何显示下载链接？
 
-请使用 fileList 属性设置数组项的 url 属性进行展示控制。
+请使用 `fileList` 属性设置数组项的 `url` 属性进行展示控制。
 
 ### `customRequest` 怎么使用？
 
@@ -148,11 +148,13 @@ demo:
 
 ### `onChange` 为什么有时候返回 File 有时候返回 { originFileObj: File }？
 
-历史原因，在 `beforeUpload` 返回 `false` 时，会返回 File 对象。在下个大版本我们会统一返回 `{ originFileObj: File }` 对象。当前版本已经兼容所有场景下 `info.file.originFileObj` 获取原 File 写法。你可以提前切换。
+历史原因，在 `beforeUpload` 返回 `false` 时，会返回 `File` 对象。在下个大版本我们会统一返回 `{ originFileObj: File }` 对象。当前版本已经兼容所有场景下 `info.file.originFileObj` 获取原 `File` 写法。你可以提前切换。
 
 ### 为何有时 Chrome 点击 Upload 无法弹出文件选择框？
 
-与 antd 无关，原生上传也会失败。请重启 Chrome 浏览器，让其完成升级工作。相关 issue：
+与 `antd` 无关，原生上传也会失败。请重启 `Chrome` 浏览器，让其完成升级工作。
+
+相关 `issue`：
 
 - [#32672](https://github.com/ant-design/ant-design/issues/32672)
 - [#32913](https://github.com/ant-design/ant-design/issues/32913)
diff --git a/components/upload/interface.ts b/components/upload/interface.ts
index 0639346be407..928919a6a5ba 100755
--- a/components/upload/interface.ts
+++ b/components/upload/interface.ts
@@ -1,16 +1,17 @@
+import type * as React from 'react';
 import type {
   RcFile as OriRcFile,
   UploadRequestOption as RcCustomRequestOptions,
   UploadProps as RcUploadProps,
 } from 'rc-upload/lib/interface';
-import type * as React from 'react';
+
 import type { ProgressAriaProps, ProgressProps } from '../progress';
 
 export interface RcFile extends OriRcFile {
   readonly lastModifiedDate: Date;
 }
 
-export type UploadFileStatus = 'error' | 'success' | 'done' | 'uploading' | 'removed';
+export type UploadFileStatus = 'error' | 'done' | 'uploading' | 'removed';
 
 export interface HttpRequestHeader {
   [key: string]: string;
diff --git a/components/watermark/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/watermark/__tests__/__snapshots__/demo-extend.test.ts.snap
index 6eb701ceba52..7c871333b68c 100644
--- a/components/watermark/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/watermark/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -9,7 +9,7 @@ exports[`renders components/watermark/demo/basic.tsx extend context correctly 1`
     style="height: 500px;"
   />
   <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: 220px;"
+    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;"
   />
 </div>
 `;
@@ -49,7 +49,7 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1
       style="z-index: 10; width: 100%; max-width: 800px; position: relative;"
     />
     <div
-      style="z-index: 11; 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: 220px;"
+      style="z-index: 11; 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;"
     />
   </div>
   <form
@@ -536,19 +536,20 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1
                 />
                 <div
                   class="ant-slider-track"
-                  style="left: 0%; width: 16%;"
+                  style="left: 0%; width: 15.151515151515152%;"
                 />
                 <div
                   class="ant-slider-step"
                 />
                 <div
                   aria-disabled="false"
+                  aria-orientation="horizontal"
                   aria-valuemax="100"
-                  aria-valuemin="0"
+                  aria-valuemin="1"
                   aria-valuenow="16"
                   class="ant-slider-handle"
                   role="slider"
-                  style="left: 16%; transform: translateX(-50%);"
+                  style="left: 15.151515151515152%; transform: translateX(-50%);"
                   tabindex="0"
                 />
                 <div
@@ -617,6 +618,7 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1
                 />
                 <div
                   aria-disabled="false"
+                  aria-orientation="horizontal"
                   aria-valuemax="100"
                   aria-valuemin="0"
                   aria-valuenow="11"
@@ -691,6 +693,7 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1
                 />
                 <div
                   aria-disabled="false"
+                  aria-orientation="horizontal"
                   aria-valuemax="180"
                   aria-valuemin="-180"
                   aria-valuenow="-22"
diff --git a/components/watermark/__tests__/__snapshots__/demo.test.ts.snap b/components/watermark/__tests__/__snapshots__/demo.test.ts.snap
index 2f0ff2f26fc1..a33ab6a160b5 100644
--- a/components/watermark/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/watermark/__tests__/__snapshots__/demo.test.ts.snap
@@ -163,19 +163,20 @@ exports[`renders components/watermark/demo/custom.tsx correctly 1`] = `
                 />
                 <div
                   class="ant-slider-track"
-                  style="left:0%;width:16%"
+                  style="left:0%;width:15.151515151515152%"
                 />
                 <div
                   class="ant-slider-step"
                 />
                 <div
                   aria-disabled="false"
+                  aria-orientation="horizontal"
                   aria-valuemax="100"
-                  aria-valuemin="0"
+                  aria-valuemin="1"
                   aria-valuenow="16"
                   class="ant-slider-handle"
                   role="slider"
-                  style="left:16%;transform:translateX(-50%)"
+                  style="left:15.151515151515152%;transform:translateX(-50%)"
                   tabindex="0"
                 />
               </div>
@@ -225,6 +226,7 @@ exports[`renders components/watermark/demo/custom.tsx correctly 1`] = `
                 />
                 <div
                   aria-disabled="false"
+                  aria-orientation="horizontal"
                   aria-valuemax="100"
                   aria-valuemin="0"
                   aria-valuenow="11"
@@ -280,6 +282,7 @@ exports[`renders components/watermark/demo/custom.tsx correctly 1`] = `
                 />
                 <div
                   aria-disabled="false"
+                  aria-orientation="horizontal"
                   aria-valuemax="180"
                   aria-valuemin="-180"
                   aria-valuenow="-22"
diff --git a/components/watermark/__tests__/__snapshots__/index.test.tsx.snap b/components/watermark/__tests__/__snapshots__/index.test.tsx.snap
index 8744905df39d..a19ad3c7de10 100644
--- a/components/watermark/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/watermark/__tests__/__snapshots__/index.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`Watermark Image watermark snapshot 1`] = `
     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: 440px;"
+      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: 470px;"
     />
   </div>
 </div>
@@ -20,7 +20,7 @@ exports[`Watermark Interleaved watermark backgroundSize is correct 1`] = `
     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: 600px;"
+      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: 720px;"
     />
   </div>
 </div>
@@ -33,7 +33,7 @@ exports[`Watermark Invalid image watermark 1`] = `
     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: 440px;"
+      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: 470px;"
     />
   </div>
 </div>
@@ -46,7 +46,7 @@ exports[`Watermark MutationObserver should work properly 1`] = `
     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: 232px;"
+      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: 229px;"
     />
   </div>
 </div>
@@ -59,7 +59,7 @@ exports[`Watermark Observe the modification of style 1`] = `
     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: -250px -250px; background-image: url('data:image/png;base64,00'); background-size: 232px;"
+      style="z-index: 9; position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; background-repeat: repeat; background-position: -250px -250px; background-image: url('data:image/png;base64,00'); background-size: 229px;"
     />
   </div>
 </div>
@@ -85,7 +85,7 @@ exports[`Watermark The watermark should render successfully 1`] = `
     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: 220px;"
+      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;"
     />
   </div>
 </div>
diff --git a/components/watermark/__tests__/index.test.tsx b/components/watermark/__tests__/index.test.tsx
index be45ffb33b0c..ef7182cdf3d0 100644
--- a/components/watermark/__tests__/index.test.tsx
+++ b/components/watermark/__tests__/index.test.tsx
@@ -16,10 +16,18 @@ describe('Watermark', () => {
     });
   });
 
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
   afterAll(() => {
     mockSrcSet.mockRestore();
   });
 
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
   it('The watermark should render successfully', () => {
     const { container } = render(<Watermark className="watermark" content="Ant Design" />);
     expect(container.querySelector('.watermark div')).toBeTruthy();
@@ -53,7 +61,7 @@ describe('Watermark', () => {
       />,
     );
     const target = container.querySelector<HTMLDivElement>('.watermark div');
-    expect(target?.style.backgroundSize).toBe('600px');
+    expect(target?.style.backgroundSize).toBe('720px');
     expect(container).toMatchSnapshot();
   });
 
@@ -94,4 +102,15 @@ describe('Watermark', () => {
     await waitFor(() => expect(target).toBeTruthy());
     expect(container).toMatchSnapshot();
   });
+
+  it('should not crash if content is empty string', async () => {
+    const spy = jest.spyOn(CanvasRenderingContext2D.prototype, 'drawImage');
+    render(<Watermark content="" className="watermark" />);
+    await waitFakeTimer();
+    expect(spy).not.toHaveBeenCalledWith(expect.anything(), 0, 0);
+    expect(spy).not.toHaveBeenCalledWith(expect.anything(), -0, 0);
+    expect(spy).not.toHaveBeenCalledWith(expect.anything(), -0, -0);
+    expect(spy).not.toHaveBeenCalledWith(expect.anything(), 0, -0);
+    spy.mockRestore();
+  });
 });
diff --git a/components/watermark/demo/custom.tsx b/components/watermark/demo/custom.tsx
index c73c01a86826..54a4fac98c7c 100644
--- a/components/watermark/demo/custom.tsx
+++ b/components/watermark/demo/custom.tsx
@@ -103,7 +103,7 @@ const App: React.FC = () => {
           <ColorPicker />
         </Form.Item>
         <Form.Item name="fontSize" label="FontSize">
-          <Slider step={1} min={0} max={100} />
+          <Slider step={1} min={1} max={100} />
         </Form.Item>
         <Form.Item name="zIndex" label="zIndex">
           <Slider step={1} min={0} max={100} />
diff --git a/components/watermark/index.tsx b/components/watermark/index.tsx
index 43d99510728f..fa5b54c86b28 100644
--- a/components/watermark/index.tsx
+++ b/components/watermark/index.tsx
@@ -1,15 +1,11 @@
+import React, { useEffect, useRef } from 'react';
+
 import MutateObserver from '@rc-component/mutate-observer';
 import classNames from 'classnames';
-import React, { useEffect, useRef } from 'react';
-import { getPixelRatio, getStyleStr, reRendering, rotateWatermark } from './utils';
-import theme from '../theme';
 
-/**
- * Base size of the canvas, 1 for parallel layout and 2 for alternate layout
- * Only alternate layout is currently supported
- */
-const BaseSize = 2;
-const FontGap = 3;
+import theme from '../theme';
+import useClips, { FontGap } from './useClips';
+import { getPixelRatio, getStyleStr, reRendering } from './utils';
 
 export interface WatermarkProps {
   zIndex?: number;
@@ -117,7 +113,7 @@ const Watermark: React.FC<WatermarkProps> = (props) => {
         getStyleStr({
           ...getMarkStyle(),
           backgroundImage: `url('${base64Url}')`,
-          backgroundSize: `${(gapX + markWidth) * BaseSize}px`,
+          backgroundSize: `${Math.floor(markWidth)}px`,
         }),
       );
       containerRef.current?.append(watermarkRef.current);
@@ -138,53 +134,20 @@ const Watermark: React.FC<WatermarkProps> = (props) => {
     if (!image && ctx.measureText) {
       ctx.font = `${Number(fontSize)}px ${fontFamily}`;
       const contents = Array.isArray(content) ? content : [content];
-      const widths = contents.map((item) => ctx.measureText(item!).width);
-      defaultWidth = Math.ceil(Math.max(...widths));
-      defaultHeight = Number(fontSize) * contents.length + (contents.length - 1) * FontGap;
+      const sizes = contents.map((item) => {
+        const metrics = ctx.measureText(item!);
+
+        return [metrics.width, metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent];
+      });
+      defaultWidth = Math.ceil(Math.max(...sizes.map((size) => size[0])));
+      defaultHeight =
+        Math.ceil(Math.max(...sizes.map((size) => size[1]))) * contents.length +
+        (contents.length - 1) * FontGap;
     }
     return [width ?? defaultWidth, height ?? defaultHeight] as const;
   };
 
-  const fillTexts = (
-    ctx: CanvasRenderingContext2D,
-    drawX: number,
-    drawY: number,
-    drawWidth: number,
-    drawHeight: number,
-  ) => {
-    const ratio = getPixelRatio();
-    const mergedFontSize = Number(fontSize) * ratio;
-    ctx.font = `${fontStyle} normal ${fontWeight} ${mergedFontSize}px/${drawHeight}px ${fontFamily}`;
-    ctx.fillStyle = color;
-    ctx.textAlign = 'center';
-    ctx.textBaseline = 'top';
-    ctx.translate(drawWidth / 2, 0);
-    const contents = Array.isArray(content) ? content : [content];
-    contents?.forEach((item, index) => {
-      ctx.fillText(item ?? '', drawX, drawY + index * (mergedFontSize + FontGap * ratio));
-    });
-  };
-
-  const drawText = (
-    canvas: HTMLCanvasElement,
-    ctx: CanvasRenderingContext2D,
-    drawX: number,
-    drawY: number,
-    drawWidth: number,
-    drawHeight: number,
-    alternateRotateX: number,
-    alternateRotateY: number,
-    alternateDrawX: number,
-    alternateDrawY: number,
-    markWidth: number,
-  ) => {
-    fillTexts(ctx, drawX, drawY, drawWidth, drawHeight);
-    /** Fill the interleaved text after rotation */
-    ctx.restore();
-    rotateWatermark(ctx, alternateRotateX, alternateRotateY, rotate);
-    fillTexts(ctx, alternateDrawX, alternateDrawY, drawWidth, drawHeight);
-    appendWatermark(canvas.toDataURL(), markWidth);
-  };
+  const getClips = useClips();
 
   const renderWatermark = () => {
     const canvas = document.createElement('canvas');
@@ -197,67 +160,43 @@ const Watermark: React.FC<WatermarkProps> = (props) => {
 
       const ratio = getPixelRatio();
       const [markWidth, markHeight] = getMarkSize(ctx);
-      const canvasWidth = (gapX + markWidth) * ratio;
-      const canvasHeight = (gapY + markHeight) * ratio;
-      canvas.setAttribute('width', `${canvasWidth * BaseSize}px`);
-      canvas.setAttribute('height', `${canvasHeight * BaseSize}px`);
 
-      const drawX = (gapX * ratio) / 2;
-      const drawY = (gapY * ratio) / 2;
-      const drawWidth = markWidth * ratio;
-      const drawHeight = markHeight * ratio;
-      const rotateX = (drawWidth + gapX * ratio) / 2;
-      const rotateY = (drawHeight + gapY * ratio) / 2;
-      /** Alternate drawing parameters */
-      const alternateDrawX = drawX + canvasWidth;
-      const alternateDrawY = drawY + canvasHeight;
-      const alternateRotateX = rotateX + canvasWidth;
-      const alternateRotateY = rotateY + canvasHeight;
+      const drawCanvas = (
+        drawContent?: NonNullable<WatermarkProps['content']> | HTMLImageElement,
+      ) => {
+        const [textClips, clipWidth] = getClips(
+          drawContent || '',
+          rotate,
+          ratio,
+          markWidth,
+          markHeight,
+          {
+            color,
+            fontSize,
+            fontStyle,
+            fontWeight,
+            fontFamily,
+          },
+          gapX,
+          gapY,
+        );
 
-      ctx.save();
-      rotateWatermark(ctx, rotateX, rotateY, rotate);
+        appendWatermark(textClips, clipWidth);
+      };
 
       if (image) {
         const img = new Image();
         img.onload = () => {
-          ctx.drawImage(img, drawX, drawY, drawWidth, drawHeight);
-          /** Draw interleaved pictures after rotation */
-          ctx.restore();
-          rotateWatermark(ctx, alternateRotateX, alternateRotateY, rotate);
-          ctx.drawImage(img, alternateDrawX, alternateDrawY, drawWidth, drawHeight);
-          appendWatermark(canvas.toDataURL(), markWidth);
+          drawCanvas(img);
+        };
+        img.onerror = () => {
+          drawCanvas(content);
         };
-        img.onerror = () =>
-          drawText(
-            canvas,
-            ctx,
-            drawX,
-            drawY,
-            drawWidth,
-            drawHeight,
-            alternateRotateX,
-            alternateRotateY,
-            alternateDrawX,
-            alternateDrawY,
-            markWidth,
-          );
         img.crossOrigin = 'anonymous';
         img.referrerPolicy = 'no-referrer';
         img.src = image;
       } else {
-        drawText(
-          canvas,
-          ctx,
-          drawX,
-          drawY,
-          drawWidth,
-          drawHeight,
-          alternateRotateX,
-          alternateRotateY,
-          alternateDrawX,
-          alternateDrawY,
-          markWidth,
-        );
+        drawCanvas(content);
       }
     }
   };
diff --git a/components/watermark/index.zh-CN.md b/components/watermark/index.zh-CN.md
index 7fbe6b894742..d68a6d031c58 100644
--- a/components/watermark/index.zh-CN.md
+++ b/components/watermark/index.zh-CN.md
@@ -54,7 +54,7 @@ tag: New
 | fontFamily | 字体类型 | string | sans-serif |  |
 | fontStyle | 字体样式 | `none` \| `normal` \| `italic` \| `oblique` | normal |  |
 
-## Design Token
+## 主题变量（Design Token）
 
 <ComponentTokenTable component="Watermark"></ComponentTokenTable>
 
diff --git a/components/watermark/useClips.ts b/components/watermark/useClips.ts
new file mode 100644
index 000000000000..c8c8843ab440
--- /dev/null
+++ b/components/watermark/useClips.ts
@@ -0,0 +1,138 @@
+import type { WatermarkProps } from '.';
+
+export const FontGap = 3;
+
+function prepareCanvas(
+  width: number,
+  height: number,
+  ratio: number = 1,
+): [
+  ctx: CanvasRenderingContext2D,
+  canvas: HTMLCanvasElement,
+  realWidth: number,
+  realHeight: number,
+] {
+  const canvas = document.createElement('canvas');
+  const ctx = canvas.getContext('2d')!;
+
+  const realWidth = width * ratio;
+  const realHeight = height * ratio;
+  canvas.setAttribute('width', `${realWidth}px`);
+  canvas.setAttribute('height', `${realHeight}px`);
+  ctx.save();
+
+  return [ctx, canvas, realWidth, realHeight];
+}
+
+/**
+ * Get the clips of text content.
+ * This is a lazy hook function since SSR no need this
+ */
+export default function useClips() {
+  // Get single clips
+  function getClips(
+    content: NonNullable<WatermarkProps['content']> | HTMLImageElement,
+    rotate: number,
+    ratio: number,
+    width: number,
+    height: number,
+    font: Required<NonNullable<WatermarkProps['font']>>,
+    gapX: number,
+    gapY: number,
+  ): [dataURL: string, finalWidth: number, finalHeight: number] {
+    // ================= Text / Image =================
+    const [ctx, canvas, contentWidth, contentHeight] = prepareCanvas(width, height, ratio);
+
+    if (content instanceof HTMLImageElement) {
+      // Image
+      ctx.drawImage(content, 0, 0, contentWidth, contentHeight);
+    } else {
+      // Text
+      const { color, fontSize, fontStyle, fontWeight, fontFamily } = font;
+      const mergedFontSize = Number(fontSize) * ratio;
+
+      ctx.font = `${fontStyle} normal ${fontWeight} ${mergedFontSize}px/${height}px ${fontFamily}`;
+      ctx.fillStyle = color;
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'top';
+      const contents = Array.isArray(content) ? content : [content];
+      contents?.forEach((item, index) => {
+        ctx.fillText(item ?? '', contentWidth / 2, index * (mergedFontSize + FontGap * ratio));
+      });
+    }
+
+    // ==================== Rotate ====================
+    const angle = (Math.PI / 180) * Number(rotate);
+    const maxSize = Math.max(width, height);
+    const [rCtx, rCanvas, realMaxSize] = prepareCanvas(maxSize, maxSize, ratio);
+
+    // Copy from `ctx` and rotate
+    rCtx.translate(realMaxSize / 2, realMaxSize / 2);
+    rCtx.rotate(angle);
+    if (contentWidth > 0 && contentHeight > 0) {
+      rCtx.drawImage(canvas, -contentWidth / 2, -contentHeight / 2);
+    }
+
+    // Get boundary of rotated text
+    function getRotatePos(x: number, y: number) {
+      const targetX = x * Math.cos(angle) - y * Math.sin(angle);
+      const targetY = x * Math.sin(angle) + y * Math.cos(angle);
+      return [targetX, targetY];
+    }
+
+    let left = 0;
+    let right = 0;
+    let top = 0;
+    let bottom = 0;
+
+    const halfWidth = contentWidth / 2;
+    const halfHeight = contentHeight / 2;
+    const points = [
+      [0 - halfWidth, 0 - halfHeight],
+      [0 + halfWidth, 0 - halfHeight],
+      [0 + halfWidth, 0 + halfHeight],
+      [0 - halfWidth, 0 + halfHeight],
+    ];
+    points.forEach(([x, y]) => {
+      const [targetX, targetY] = getRotatePos(x, y);
+      left = Math.min(left, targetX);
+      right = Math.max(right, targetX);
+      top = Math.min(top, targetY);
+      bottom = Math.max(bottom, targetY);
+    });
+
+    const cutLeft = left + realMaxSize / 2;
+    const cutTop = top + realMaxSize / 2;
+    const cutWidth = right - left;
+    const cutHeight = bottom - top;
+
+    // ================ Fill Alternate ================
+    const realGapX = gapX * ratio;
+    const realGapY = gapY * ratio;
+    const filledWidth = (cutWidth + realGapX) * 2;
+    const filledHeight = cutHeight + realGapY;
+
+    const [fCtx, fCanvas] = prepareCanvas(filledWidth, filledHeight);
+
+    function drawImg(targetX = 0, targetY = 0) {
+      fCtx.drawImage(
+        rCanvas,
+        cutLeft,
+        cutTop,
+        cutWidth,
+        cutHeight,
+        targetX,
+        targetY,
+        cutWidth,
+        cutHeight,
+      );
+    }
+    drawImg();
+    drawImg(cutWidth + realGapX, -cutHeight / 2 - realGapY / 2);
+    drawImg(cutWidth + realGapX, +cutHeight / 2 + realGapY / 2);
+
+    return [fCanvas.toDataURL(), filledWidth / ratio, filledHeight / ratio];
+  }
+
+  return getClips;
+}
diff --git a/components/watermark/utils.ts b/components/watermark/utils.ts
index 84103b59c533..e2ba19f73c4a 100644
--- a/components/watermark/utils.ts
+++ b/components/watermark/utils.ts
@@ -14,18 +14,6 @@ export function getPixelRatio() {
   return window.devicePixelRatio || 1;
 }
 
-/** Rotate with the watermark as the center point */
-export function rotateWatermark(
-  ctx: CanvasRenderingContext2D,
-  rotateX: number,
-  rotateY: number,
-  rotate: number,
-) {
-  ctx.translate(rotateX, rotateY);
-  ctx.rotate((Math.PI / 180) * Number(rotate));
-  ctx.translate(-rotateX, -rotateY);
-}
-
 /** Whether to re-render the watermark */
 export const reRendering = (mutation: MutationRecord, watermarkElement?: HTMLElement) => {
   let flag = false;
diff --git a/docs/blog/github-actions-workflow.zh-CN.md b/docs/blog/github-actions-workflow.zh-CN.md
index 98c8628ffc3c..2fd30a1be1a7 100644
--- a/docs/blog/github-actions-workflow.zh-CN.md
+++ b/docs/blog/github-actions-workflow.zh-CN.md
@@ -115,7 +115,7 @@ Ant Design 团队非常鼓励社区参与 Pull Request (PR)，可以先阅读 [
 
 团队对于单元测试的态度非常谨慎，需要考虑组件在 React 的各个主要版本上的运行情况（通常为 16、17 和 18 这三个版本）如果是主分支的更新，还需要考虑项目构建产物（通常为 `dist`、`es` 以及 `lib`）在三个 React 版本上的运行情况。目前已知 Ant Design 所有组件共有 4000 多个测试用例。为了进一步提高测试效率，我们还搭建了分布式测试环境。
 
-所有这些功能都得益于 GitHub Action 的 [Job 矩阵策略](https://docs.github.com/zh/actions/using-jobs/using-a-matrix-for-your-jobs) ，使得我们可以一次性配置多个 Job 来执行测试任务, [Normal test](https://github.com/ant-design/ant-design/blob/40fb753349c4f2be314c91dbb7e6f1a960097c19/.github/workflows/test.yml#L141-L223) 和 [Module test](https://github.com/ant-design/ant-design/blob/40fb753349c4f2be314c91dbb7e6f1a960097c19/.github/workflows/test.yml#L294-L357) 是 Ant Design 利用矩阵策略测试相关的 Job。
+所有这些功能都得益于 GitHub Action 的 [Job 矩阵策略](https://docs.github.com/zh/actions/using-jobs/using-a-matrix-for-your-jobs) ，使得我们可以一次性配置多个 Job 来执行测试任务，[Normal test](https://github.com/ant-design/ant-design/blob/40fb753349c4f2be314c91dbb7e6f1a960097c19/.github/workflows/test.yml#L141-L223) 和 [Module test](https://github.com/ant-design/ant-design/blob/40fb753349c4f2be314c91dbb7e6f1a960097c19/.github/workflows/test.yml#L294-L357) 是 Ant Design 利用矩阵策略测试相关的 Job。
 
 ## 网站部署
 
@@ -224,7 +224,7 @@ jobs:
 
 ### 添加缓存
 
-为了进一步优化安装依赖速度，我们可以添加 pnpm 缓存, 然后发起一个 Pull Request 验证上一个步骤：
+为了进一步优化安装依赖速度，我们可以添加 pnpm 缓存，然后发起一个 Pull Request 验证上一个步骤：
 
 ```yml
 # ...
diff --git a/docs/blog/happy-work.zh-CN.md b/docs/blog/happy-work.zh-CN.md
index 1adeca9c1b5e..ecc87f858000 100644
--- a/docs/blog/happy-work.zh-CN.md
+++ b/docs/blog/happy-work.zh-CN.md
@@ -1,5 +1,5 @@
 ---
-title: 快乐工作主题(一)
+title: 快乐工作主题（一）
 date: 2023-08-04
 author: zombieJ
 ---
diff --git a/docs/blog/testing-migrate.zh-CN.md b/docs/blog/testing-migrate.zh-CN.md
index d8ac5cfd45b1..82f4f10cf54a 100644
--- a/docs/blog/testing-migrate.zh-CN.md
+++ b/docs/blog/testing-migrate.zh-CN.md
@@ -4,7 +4,7 @@ date: 2022-12-20
 author: li-jia-nan,zombieJ
 ---
 
-大家好，我是 **[@li-jia-nan](https://github.com/li-jia-nan)**。也是前几个月新加入 antd 的 Collaborator, 有幸作为 Collaborators 之一，我开发了 **[FloatButton](/components/float-button-cn)** 组件和 **[QRCode](/components/qrcode-cn)** 组件，以及一些其它维护工作，下面分享一下 antd 测试库迁移的那些事儿～
+大家好，我是 **[@li-jia-nan](https://github.com/li-jia-nan)**。也是前几个月新加入 antd 的 Collaborator，有幸作为 Collaborators 之一，我开发了 **[FloatButton](/components/float-button-cn)** 组件和 **[QRCode](/components/qrcode-cn)** 组件，以及一些其它维护工作，下面分享一下 antd 测试库迁移的那些事儿～
 
 ## 引言
 
diff --git a/docs/react/contributing.en-US.md b/docs/react/contributing.en-US.md
index 971c8f9c3cc8..20980de91f5f 100644
--- a/docs/react/contributing.en-US.md
+++ b/docs/react/contributing.en-US.md
@@ -55,7 +55,7 @@ The core team is monitoring for pull requests. We will review your pull request
 3. If you've fixed a bug or added code that should be tested, add tests!
 4. Ensure the test suite passes (npm run test). Tip: `npm test -- --watch TestName` is helpful in development.
 5. Run `npm test -- -u` to update the [jest snapshots](https://jestjs.io/docs/snapshot-testing) and commit these changes as well (if there are any updates).
-6. Ensure the UI change passes `npm run test-image`，Run `npm run test-image -- -u` to update UI snapshots and commit these changes as well (if there are any updates), **UI test base on [Docker](https://docs.docker.com/get-docker/), need download the corresponding installation according to the platform**
+6. Ensure the UI change passes `npm run test-image`, Run `npm run test-image -- -u` to update UI snapshots and commit these changes as well (if there are any updates), **UI test base on [Docker](https://docs.docker.com/get-docker/), need download the corresponding installation according to the platform**
 7. Make sure your code lints (npm run lint). Tip: Lint runs automatically when you `git commit` (Use [Git Hooks](https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks)).
 8. Finally, please make sure that all GitHub CI checks pass, if they fail, you can click `detail` to enter the details to view the reason.
 
diff --git a/docs/react/faq.en-US.md b/docs/react/faq.en-US.md
index ebcdc03abe16..252c467ed2af 100644
--- a/docs/react/faq.en-US.md
+++ b/docs/react/faq.en-US.md
@@ -157,7 +157,7 @@ In a real world development, you may need a `YearPicker`, `MonthRangePicker` or
 
 Like [the explanation](https://github.com/ant-design/ant-design/issues/11586#issuecomment-429189877) explains, this is because `<DatePicker mode="year" />` does not equal the `YearPicker`, nor is `<RangePicker mode="month" />` equal to `MonthRangePicker`. The `mode` property was added to support [showing time picker panel in DatePicker](https://github.com/ant-design/ant-design/issues/5190) in antd 3.0, which simply controls the displayed panel, and won't change the original date picking behavior of `DatePicker`/`RangePicker` (for instance you will still need to click date cell to finish selection in a `DatePicker`, whatever the `mode` is).
 
-Likewise，`disabledDate` [cannot work on year/month panels](https://github.com/ant-design/ant-design/issues/9008#issuecomment-358554118) of `<DatePicker mode="year/month" />`, but only on cells of date panel.
+Likewise, `disabledDate` [cannot work on year/month panels](https://github.com/ant-design/ant-design/issues/9008#issuecomment-358554118) of `<DatePicker mode="year/month" />`, but only on cells of date panel.
 
 ### Workaround
 
diff --git a/docs/react/faq.zh-CN.md b/docs/react/faq.zh-CN.md
index 43fe3c03a93f..886b8d98d390 100644
--- a/docs/react/faq.zh-CN.md
+++ b/docs/react/faq.zh-CN.md
@@ -11,7 +11,7 @@ title: FAQ
 
 ## `undefined` 和 `null` 在 `antd` 的受控组件中有区别吗？
 
-**有。antd 约定：`undefined` 是非受控的标志，`null` 作为显式的受控空值。**
+**有区别。antd 约定：`undefined` 是非受控的标志，`null` 作为显式的受控空值。**
 
 在输入元素中，React 认为 `undefined` 和 `null` 都属于非受控的标志。当 `value` 由非空值转化为 `undefined` 或 `null` 时，组件不再受控，这通常是一些意外情况发生的原因。
 
@@ -107,12 +107,19 @@ antd 内部会对 props 进行浅比较实现性能优化。当状态变更，
 
 有的，你可以访问 https://ant-design.antgroup.com/index-cn 或 https://ant-design.gitee.io/index-cn 。
 
-历史版本:
-
-- 4.x: https://4x-ant-design.antgroup.com
-- 3.x: https://ant-design-3x.gitee.io/
-- 2.x: https://ant-design-2x.gitee.io/
-- 1.x: https://ant-design-1x.gitee.io/
+| 产品/版本 | 地址 |
+| --- | --- |
+| Ant Design 5.x  |  https://ant-design.antgroup.com <br />  https://ant-design.gitee.io   |
+| Ant Design 4.x  |  https://4x-ant-design.antgroup.com   |
+| Ant Design 3.x  |  https://ant-design-3x.gitee.io |
+| Ant Design 2.x  |  https://ant-design-2x.gitee.io |
+| Ant Design 1.x   |  https://ant-design-1x.gitee.io |
+| Ant Design Pro | https://ant-design-pro.gitee.io/ |
+| Ant Design Mobile | https://ant-design-mobile.antgroup.com/zh <br /> https://antd-mobile.gitee.io/ |
+| Ant Design Mini | https://ant-design-mini.antgroup.com/zh <br /> https://antd-mobile.gitee.io/ |
+| Ant Design Charts | https://ant-design-charts.antgroup.com<br /> https://antd-mobile.gitee.io/ |
+| AntV | https://antv.antgroup.com |
+| Ant Motion | https://ant-motion.gitee.io |
 
 ## `antd` 可以像 `React` 那样使用单文件引入吗？
 
diff --git a/docs/react/migrate-less-variables.en-US.md b/docs/react/migrate-less-variables.en-US.md
index ec39acb61ee2..145da10f74a2 100644
--- a/docs/react/migrate-less-variables.en-US.md
+++ b/docs/react/migrate-less-variables.en-US.md
@@ -563,7 +563,7 @@ export default App;
 | `@tooltip-bg` | `colorBgSpotlight` | Global Token |
 | `@tooltip-arrow-width` | `sizePopupArrow` | Global Token |
 | `@tooltip-distance` | `marginXXS` | Global Token |
-| `@tooltip-arrow-color` | - | same as `@tooltip-bg`，Deprecated |
+| `@tooltip-arrow-color` | - | same as `@tooltip-bg`, Deprecated |
 | `@tooltip-border-radius` | `borderRadius` | Global Token |
 
 ### Transfer
diff --git a/docs/react/recommendation.en-US.md b/docs/react/recommendation.en-US.md
index 3e5a150649bf..de423fe0c4cb 100644
--- a/docs/react/recommendation.en-US.md
+++ b/docs/react/recommendation.en-US.md
@@ -41,8 +41,9 @@ title: Third-Party Libraries
 | Animation | [react-move](https://github.com/react-tools/react-move) [Ant Motion](https://motion.ant.design/components/tween-one) [react-spring](https://www.react-spring.io) |
 | Page Footer | [rc-footer](https://github.com/react-component/footer) |
 | Number/Currency | [react-countup](https://www.npmjs.com/package/react-countup) [react-number-format](https://github.com/s-yadav/react-number-format) [react-currency-input-field](https://github.com/cchanxzy/react-currency-input-field) |
-
 | Application Frameworks | [umi](https://github.com/umijs/umi/) [remix](https://github.com/remix-run/remix) [refine](https://github.com/pankod/refine) |
+| Flow-based UI | [react-flow](https://github.com/wbkd/react-flow) [x6](https://github.com/antvis/x6) |
+| Phone Input | [react-phone-number-input](https://gitlab.com/catamphetamine/react-phone-number-input) [antd-phone-input](https://github.com/ArtyomVancyan/antd-phone-input/) |
 
 ## Products we are using ✨
 
diff --git a/docs/react/recommendation.zh-CN.md b/docs/react/recommendation.zh-CN.md
index e023933178df..9d37c6568670 100644
--- a/docs/react/recommendation.zh-CN.md
+++ b/docs/react/recommendation.zh-CN.md
@@ -44,6 +44,8 @@ title: 社区精选组件
 | 数字/金额 | [react-number-format](https://github.com/s-yadav/react-number-format) [react-currency-input-fiel](https://github.com/cchanxzy/react-currency-input-field) |
 | 移动端探测 | [react-device-detect](https://github.com/duskload/react-device-detect) |
 | 应用程序框架 | [umi](https://github.com/umijs/umi/) [remix](https://github.com/remix-run/remix) [refine](https://github.com/pankod/refine) |
+| Flow 流 | [react-flow](https://github.com/wbkd/react-flow) [x6](https://github.com/antvis/x6) |
+| 电话输入 | [react-phone-number-input](https://gitlab.com/catamphetamine/react-phone-number-input) [antd-phone-input](https://github.com/ArtyomVancyan/antd-phone-input/) |
 
 ## 推荐产品 ✨
 
diff --git a/docs/react/use-with-next.en-US.md b/docs/react/use-with-next.en-US.md
index 096d0098ae26..a4e9e58542a3 100644
--- a/docs/react/use-with-next.en-US.md
+++ b/docs/react/use-with-next.en-US.md
@@ -51,7 +51,7 @@ OK, you should now see a blue primary button displayed on the page. Next you can
 
 We are successfully running antd components now, go build your own application!
 
-## Use the Pages Router of Next.js
+## Using Pages Router
 
 If you are using the Pages Router in Next.js and using antd as your component library, to make the antd component library work better in your Next.js application and provide a better user experience, you can try using the following method to extract and inject antd's first-screen styles into HTML to avoid page flicker.
 
@@ -155,7 +155,7 @@ export default Home;
 
 For more detailed information, please refer to [with-nextjs-inline-style](https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-inline-style).
 
-## Using Next.js App Router
+## Using App Router
 
 If you are using the App Router in Next.js and using antd as your component library, to make the antd component library work better in your Next.js application and provide a better user experience, you can try using the following method to extract and inject antd's first-screen styles into HTML to avoid page flicker.
 
@@ -171,9 +171,10 @@ If you are using the App Router in Next.js and using antd as your component libr
 import React from 'react';
 import { StyleProvider, createCache, extractStyle } from '@ant-design/cssinjs';
 import { useServerInsertedHTML } from 'next/navigation';
+import type Entity from '@ant-design/cssinjs/es/Cache';
 
 const StyledComponentsRegistry = ({ children }: { children: React.ReactNode }) => {
-  const cache = createCache();
+  const cache = React.useMemo<Entity>(() => createCache(), [createCache]);
   useServerInsertedHTML(() => (
     <style id="antd" dangerouslySetInnerHTML={{ __html: extractStyle(cache, true) }} />
   ));
diff --git a/docs/react/use-with-next.zh-CN.md b/docs/react/use-with-next.zh-CN.md
index 2b90e366eb3b..0225951da77a 100644
--- a/docs/react/use-with-next.zh-CN.md
+++ b/docs/react/use-with-next.zh-CN.md
@@ -51,7 +51,7 @@ export default Home;
 
 我们现在已经把 antd 组件成功运行起来了，开始开发你的应用吧！
 
-## 使用 Next.js 的 Pages Router
+## 使用 Pages Router
 
 如果你在 Next.js 当中使用了 Pages Router, 并使用 antd 作为页面组件库，为了让 antd 组件库在你的 Next.js 应用中能够更好的工作，提供更好的用户体验，你可以尝试使用下面的方式将 antd 首屏样式按需抽离并植入到 HTML 中，以避免页面闪动的情况。
 
@@ -155,7 +155,7 @@ export default Home;
 
 更多详细的细节可以参考 [with-nextjs-inline-style](https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-inline-style)。
 
-## 使用 Next.js 的 App Router
+## 使用 App Router
 
 如果你在 Next.js 当中使用了 App Router, 并使用 antd 作为页面组件库，为了让 antd 组件库在你的 Next.js 应用中能够更好的工作，提供更好的用户体验，你可以尝试使用下面的方式将 antd 首屏样式按需抽离并植入到 HTML 中，以避免页面闪动的情况。
 
@@ -171,9 +171,10 @@ export default Home;
 import React from 'react';
 import { StyleProvider, createCache, extractStyle } from '@ant-design/cssinjs';
 import { useServerInsertedHTML } from 'next/navigation';
+import type Entity from '@ant-design/cssinjs/es/Cache';
 
 const StyledComponentsRegistry = ({ children }: { children: React.ReactNode }) => {
-  const cache = createCache();
+  const cache = React.useMemo<Entity>(() => createCache(), [createCache]);
   useServerInsertedHTML(() => (
     <style id="antd" dangerouslySetInnerHTML={{ __html: extractStyle(cache, true) }} />
   ));
diff --git a/docs/spec/data-format.en-US.md b/docs/spec/data-format.en-US.md
index 78e753223cec..2cdbdfb735e9 100644
--- a/docs/spec/data-format.en-US.md
+++ b/docs/spec/data-format.en-US.md
@@ -55,7 +55,7 @@ We suggest the following formats:
 | Format | How and when to use | Examples |
 | --- | --- | --- |
 | Year, month, day | In China `YYYY-MM-DD` format is used by default. | 2019-12-08 |
-| Terms | When a special term containing a date expressed with numbers，display a `.` between the month and the day, and quotation marks should be added before and after the term. | 6.1 children's day |
+| Terms | When a special term containing a date expressed with numbers, display a `.` between the month and the day, and quotation marks should be added before and after the term. | 6.1 children's day |
 | Date range | Put `~` or `-` between the date or time range (space is required before and after). | 2018-12-08 ~ 2019-12-07 |
 
 **Time Format:**
@@ -77,7 +77,7 @@ To the users, the accuracy of time is not so important as the immediacy of the i
 | Less than 1 hour     | N minutes ago                               |
 | Within 24 hours      | N hours ago                                 |
 | Longer than 24 hours | `MM-DD HH:MM`, e.g. "12-08 08:00"           |
-| Longer than one year | `YYYY-MM-DD HH:MM`，e.g. "2019-12-08 08:00" |
+| Longer than one year | `YYYY-MM-DD HH:MM`, e.g. "2019-12-08 08:00" |
 
 ### Data Redaction
 
diff --git a/docs/spec/navigation.zh-CN.md b/docs/spec/navigation.zh-CN.md
index 10d87f0e3048..5f66dcf3fb11 100644
--- a/docs/spec/navigation.zh-CN.md
+++ b/docs/spec/navigation.zh-CN.md
@@ -101,7 +101,7 @@ skip: true
 <img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/ugeAGDXQQYkZIbCAGlIP.png">
 </ImagePreview>
 
-步骤多于 2 步时使用, 但建议不超过 5 步，每阶段文字长度保持在 12 个字符以内。
+步骤多于 2 步时使用，但建议不超过 5 步，每阶段文字长度保持在 12 个字符以内。
 
 ### 竖向流程步骤条
 
diff --git a/package.json b/package.json
index fa6a79bf0bc3..bf4b91bb945c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "antd",
-  "version": "5.8.3",
+  "version": "5.8.6",
   "packageManager": "^npm@9.0.0",
   "description": "An enterprise-class UI design language and React components implementation",
   "title": "Ant Design",
@@ -45,7 +45,7 @@
   "unpkg": "dist/antd.min.js",
   "typings": "es/index.d.ts",
   "scripts": {
-    "prepare": "husky install",
+    "prepare": "is-ci || husky install",
     "api-collection": "antd-tools run api-collection",
     "authors": "ts-node --esm --project tsconfig.node.json scripts/generate-authors.ts",
     "build": "npm run compile && NODE_OPTIONS='--max-old-space-size=4096' npm run dist",
@@ -82,7 +82,7 @@
     "pre-publish": "npm run test-all -- --skip-build && node ./scripts/pre-publish-notice.js",
     "prettier": "prettier -c --write **/* --cache",
     "pub": "npm run version && npm run collect-token-statistic && npm run token-meta && antd-tools run pub",
-    "rome:format": "rome format --write .",
+    "biome:format": "biome format --write .",
     "prepublishOnly": "antd-tools run guard",
     "postpublish": "node ./scripts/post-script.js",
     "site": "dumi build && cp .surgeignore _site",
@@ -136,15 +136,15 @@
     "rc-mentions": "~2.5.0",
     "rc-menu": "~9.10.0",
     "rc-motion": "^2.7.3",
-    "rc-notification": "~5.0.4",
-    "rc-pagination": "~3.5.0",
+    "rc-notification": "~5.1.1",
+    "rc-pagination": "~3.6.0",
     "rc-picker": "~3.13.0",
     "rc-progress": "~3.4.1",
     "rc-rate": "~2.12.0",
     "rc-resize-observer": "^1.2.0",
     "rc-segmented": "~2.2.0",
     "rc-select": "~14.7.1",
-    "rc-slider": "~10.1.0",
+    "rc-slider": "~10.2.1",
     "rc-steps": "~6.0.1",
     "rc-switch": "~4.1.0",
     "rc-table": "~7.32.1",
@@ -154,17 +154,18 @@
     "rc-tree": "~5.7.6",
     "rc-tree-select": "~5.11.0",
     "rc-upload": "~4.3.0",
-    "rc-util": "^5.32.0",
+    "rc-util": "^5.37.0",
     "scroll-into-view-if-needed": "^3.0.3",
     "throttle-debounce": "^5.0.0"
   },
   "devDependencies": {
-    "@ant-design/compatible": "^5.1.1",
+    "@ant-design/compatible": "^5.1.2",
     "@ant-design/happy-work-theme": "^1.0.0",
     "@ant-design/tools": "^17.0.0",
     "@antv/g6": "^4.8.13",
     "@argos-ci/core": "^0.9.0",
     "@babel/eslint-plugin": "^7.19.1",
+    "@biomejs/biome": "^1.0.0",
     "@codesandbox/sandpack-react": "^2.6.9",
     "@dnd-kit/core": "^6.0.7",
     "@dnd-kit/modifiers": "^6.0.1",
@@ -172,13 +173,14 @@
     "@dnd-kit/utilities": "^3.2.1",
     "@emotion/react": "^11.10.4",
     "@emotion/server": "^11.4.0",
+    "@ianvs/prettier-plugin-sort-imports": "^4.1.0",
     "@qixian.cs/github-contributors-list": "^1.1.0",
     "@size-limit/file": "^8.1.0",
     "@stackblitz/sdk": "^1.3.0",
     "@swc/core": "^1.3.50",
     "@swc/helpers": "^0.5.0",
     "@testing-library/dom": "^9.0.0",
-    "@testing-library/jest-dom": "^5.16.3",
+    "@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",
@@ -206,8 +208,8 @@
     "@types/react-window": "^1.8.2",
     "@types/throttle-debounce": "^5.0.0",
     "@types/warning": "^3.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.40.0",
-    "@typescript-eslint/parser": "^5.40.0",
+    "@typescript-eslint/eslint-plugin": "^6.5.0",
+    "@typescript-eslint/parser": "^6.5.0",
     "antd-img-crop": "^4.9.0",
     "antd-style": "^3.4.2-beta.1",
     "antd-token-previewer": "^2.0.1",
@@ -244,6 +246,7 @@
     "identity-obj-proxy": "^3.0.0",
     "immer": "^10.0.1",
     "inquirer": "^9.1.2",
+    "is-ci": "^3.0.1",
     "isomorphic-fetch": "^3.0.0",
     "jest": "^29.4.1",
     "jest-axe": "^8.0.0",
@@ -256,8 +259,9 @@
     "jsdom": "^22.0.0",
     "jsonml-to-react-element": "^1.1.11",
     "jsonml.js": "^0.1.0",
-    "lint-staged": "^13.0.3",
+    "lint-staged": "^14.0.0",
     "lodash": "^4.17.21",
+    "lunar-typescript": "^1.6.9",
     "lz-string": "^1.4.4",
     "mockdate": "^3.0.0",
     "node-notifier": "^10.0.1",
@@ -289,7 +293,6 @@
     "remark-cli": "^11.0.0",
     "remark-lint": "^9.0.0",
     "remark-preset-lint-recommended": "^6.0.0",
-    "rome": "12.1.3-nightly.f65b0d9",
     "semver": "^7.3.5",
     "simple-git": "^3.0.0",
     "size-limit": "^8.1.0",
@@ -300,9 +303,9 @@
     "sylvanas": "^0.6.1",
     "terser": "^5.16.1",
     "ts-node": "^10.8.2",
-    "typedoc": "^0.24.8",
-    "typescript": "~5.1.3",
-    "vanilla-jsoneditor": "^0.17.1",
+    "typedoc": "^0.25.0",
+    "typescript": "~5.2.2",
+    "vanilla-jsoneditor": "^0.18.0",
     "webpack-bundle-analyzer": "^4.1.0",
     "xhr-mock": "^2.4.1"
   },
@@ -327,7 +330,7 @@
     "mode": "npm"
   },
   "lint-staged": {
-    "*.{ts,tsx,js,jsx}": "rome format --write",
+    "*.{ts,tsx,js,jsx}": "biome format --write",
     "*.{json,less,md}": "prettier --ignore-unknown --write"
   }
 }
diff --git a/scripts/generate-token-meta.ts b/scripts/generate-token-meta.ts
index 39dca5c685c3..ae864c85b337 100644
--- a/scripts/generate-token-meta.ts
+++ b/scripts/generate-token-meta.ts
@@ -2,12 +2,12 @@ import fs from 'fs-extra';
 import type { DeclarationReflection } from 'typedoc';
 import { Application, TSConfigReader, TypeDocReader } from 'typedoc';
 
-type TokenMeta = {
+interface TokenMeta {
   seed: ReturnType<typeof getTokenList>;
   map: ReturnType<typeof getTokenList>;
   alias: ReturnType<typeof getTokenList>;
   components: Record<string, ReturnType<typeof getTokenList>>;
-};
+}
 
 function getTokenList(list?: DeclarationReflection[], source?: string) {
   return (list || [])
@@ -40,20 +40,17 @@ function getTokenList(list?: DeclarationReflection[], source?: string) {
     }));
 }
 
-const main = () => {
-  const app = new Application();
-
-  // If you want TypeDoc to load tsconfig.json / typedoc.json files
-  app.options.addReader(new TSConfigReader());
-  app.options.addReader(new TypeDocReader());
-
-  app.bootstrap({
-    // typedoc options here
-    entryPoints: ['components/theme/interface/index.ts', 'components/*/style/index.{ts,tsx}'],
-    skipErrorChecking: true,
-  });
+const main = async () => {
+  const app = await (Application as any).bootstrap(
+    {
+      // typedoc options here
+      entryPoints: ['components/theme/interface/index.ts', 'components/*/style/index.{ts,tsx}'],
+      skipErrorChecking: true,
+    },
+    [new TSConfigReader(), new TypeDocReader()],
+  );
 
-  const project = app.convert();
+  const project = await app.convert();
 
   if (project) {
     // Project may not have converted correctly
@@ -66,11 +63,11 @@ const main = () => {
     };
 
     // eslint-disable-next-line no-restricted-syntax
-    project?.children?.forEach((file) => {
+    project?.children?.forEach((file: any) => {
       // Global Token
       if (file.name === 'theme/interface') {
         let presetColors: string[] = [];
-        file.children?.forEach((type) => {
+        file.children?.forEach((type: any) => {
           if (type.name === 'SeedToken') {
             tokenMeta.seed = getTokenList(type.children, 'seed');
           } else if (type.name === 'MapToken') {
@@ -102,8 +99,8 @@ const main = () => {
       } else {
         const component = file.name
           .slice(0, file.name.indexOf('/'))
-          .replace(/(^(.)|-(.))/g, (match) => match.replace('-', '').toUpperCase());
-        const componentToken = file.children?.find((item) => item.name === `ComponentToken`);
+          .replace(/(^(.)|-(.))/g, (match: string) => match.replace('-', '').toUpperCase());
+        const componentToken = file.children?.find((item: any) => item?.name === 'ComponentToken');
         if (componentToken) {
           tokenMeta.components[component] = getTokenList(componentToken.children, component);
         }