chore: adjust

Update .dumi/pages/index/components/PreviewBanner/ComponentsBlock.tsx
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> Signed-off-by: 遇见同学 <1875694521@qq.com>
2026-02-11 03:49:19 +08:00 · 2026-01-15 10:24:42 +08:00 · 2026-01-15 10:24:41 +08:00 · 2026-01-15 10:24:41 +08:00 · 2026-01-15 10:24:40 +08:00 · 2026-01-15 10:24:39 +08:00
290 changed files with 3258 additions and 53777 deletions
--- a/.dumi/hooks/useIssueCount.ts
+++ b/.dumi/hooks/useIssueCount.ts
@@ -7,6 +7,7 @@ const isNumber = (value: any): value is number => {
 };

 const fetcher = async (url: string): Promise<number> => {
+  // eslint-disable-next-line compat/compat
  const res = await fetch(url, { headers: { Accept: 'application/vnd.github+json' } });
  const data = await res.json();
  const totalCount = isNumber(data?.total_count) ? data.total_count : 0;
--- a/.dumi/pages/index/components/BannerRecommends.tsx
+++ b/.dumi/pages/index/components/BannerRecommends.tsx
@@ -49,7 +49,8 @@ const useStyle = createStyles(({ cssVar, css, cx }) => {
      max-width: 100%;
      margin-inline: auto;
      box-sizing: border-box;
-      column-gap: calc(${cssVar.paddingMD} * 2);
+      column-gap: ${cssVar.paddingMD};
+      padding: 0 ${cssVar.padding};
      align-items: stretch;
      text-align: start;
      min-height: 178px;
--- a/.dumi/pages/index/components/PreviewBanner/ComponentsBlock.tsx
+++ b/.dumi/pages/index/components/PreviewBanner/ComponentsBlock.tsx
@@ -5,6 +5,7 @@ import {
  Button,
  Checkbox,
  ColorPicker,
+  ConfigProvider,
  Dropdown,
  Input,
  message,
@@ -18,8 +19,10 @@ import {
  Tooltip,
 } from 'antd';
 import { createStaticStyles } from 'antd-style';
+import type { ConfigProviderProps } from 'antd';

 import useLocale from '../../../../hooks/useLocale';
+
 import Tilt from './Tilt';

 const { _InternalPanelDoNotUseOrYouWillBeFired: ModalPanel } = Modal;
@@ -103,117 +106,123 @@ const styles = createStaticStyles(({ cssVar, css }) => {
    `,
  };
 });
+interface ComponentsBlockProps {
+  config: ConfigProviderProps;
+}

-const ComponentsBlock: React.FC = () => {
+const ComponentsBlock: React.FC<ComponentsBlockProps> = (props) => {
  const [locale] = useLocale(locales);
+  const { config } = props;

  return (
-    <Tilt options={{ max: 4, glare: false, scale: 0.98 }} className={styles.holder}>
-      <ModalPanel title="Ant Design" width="100%">
-        {locale.text}
-      </ModalPanel>
-      <Alert title={locale.infoText} type="info" />
-      {/* Line */}
-      <div className={styles.flex}>
-        <ColorPicker style={{ flex: 'none' }} />
-        <div style={{ flex: 'none' }}>
-          <Space.Compact>
-            <Button>{locale.dropdown}</Button>
-            <Dropdown
-              menu={{
-                items: Array.from({ length: 5 }).map((_, index) => ({
-                  key: `opt${index}`,
-                  label: `${locale.option} ${index}`,
-                })),
-              }}
-            >
-              <Button icon={<DownOutlined />} />
-            </Dropdown>
-          </Space.Compact>
+    <ConfigProvider {...config}>
+      <Tilt options={{ max: 4, glare: false, scale: 0.98 }} className={styles.holder}>
+        <ModalPanel title="Ant Design" width="100%">
+          {locale.text}
+        </ModalPanel>
+        <Alert title={locale.infoText} type="info" />
+        {/* Line */}
+        <div className={styles.flex}>
+          <ColorPicker style={{ flex: 'none' }} />
+          <div style={{ flex: 'none' }}>
+            <Space.Compact>
+              <Button>{locale.dropdown}</Button>
+              <Dropdown
+                menu={{
+                  items: Array.from({ length: 5 }).map((_, index) => ({
+                    key: `opt${index}`,
+                    label: `${locale.option} ${index}`,
+                  })),
+                }}
+              >
+                <Button icon={<DownOutlined />} />
+              </Dropdown>
+            </Space.Compact>
+          </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>
-        <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 },
+        <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 },
          ]}
        />
-        <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]}
+        {/* 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>
-      </div>
-      <div>
-        <InternalMessage content={locale.release} type="success" />
-      </div>
-      <InternalTooltip title={locale.hello} placement="topLeft" className={styles.noMargin} />
-      <Alert title="Ant Design love you!" type="success" />
-    </Tilt>
+        {/* 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 title="Ant Design love you!" type="success" />
+      </Tilt>
+    </ConfigProvider>
  );
 };

--- a/.dumi/pages/index/components/PreviewBanner/index.tsx
+++ b/.dumi/pages/index/components/PreviewBanner/index.tsx
@@ -1,15 +1,21 @@
-import React, { Suspense, use } from 'react';
-import { Flex, Typography } from 'antd';
+import React, { Suspense, use, useState } from 'react';
+import { Button, Flex, Typography } from 'antd';
+import type { ConfigProviderProps, ThemeConfig } from 'antd';
 import { createStyles } from 'antd-style';
 import { clsx } from 'clsx';
 import { useLocation } from 'dumi';

+import { DarkContext } from '../../../../hooks/useDark';
 import useLocale from '../../../../hooks/useLocale';
 import LinkButton from '../../../../theme/common/LinkButton';
+import PromptDrawer from '../../../../theme/common/ThemeSwitch/PromptDrawer';
+import ThemeIcon from '../../../../theme/common/ThemeSwitch/ThemeIcon';
 import SiteContext from '../../../../theme/slots/SiteContext';
 import type { SiteContextProps } from '../../../../theme/slots/SiteContext';
 import * as utils from '../../../../theme/utils';
 import GroupMaskLayer from '../GroupMaskLayer';
+import { muiComponentConfig, muiDark, muiLight } from './themes/mui';
+import { shadcnComponentConfig, shadcnDark, shadcnLight } from './themes/shadcn';

 import '../SiteContext';

@@ -119,64 +125,251 @@ const useStyle = createStyles(({ cssVar, css, cx }, siteConfig: SiteContextProps
      bottom: 120px;
      inset-inline-end: ${siteConfig.isMobile ? 0 : '40%'};
    `,
+    themeBar: css`
+      display: flex;
+      gap: 12px;
+      margin: 24px 0;
+      align-items: center;
+      justify-content: center;
+    `,
+    themeLabel: css`
+      background: ${cssVar.colorBgElevated};
+      padding: 6px 12px;
+      border-radius: 20px;
+      box-shadow: ${cssVar.boxShadowSecondary};
+      color: ${cssVar.colorText};
+      font-weight: 600;
+      font-size: ${cssVar.fontSizeSM};
+    `,
+    presets: css`
+      display: flex;
+      gap: 8px;
+      align-items: center;
+    `,
+    presetButton: cx(css`
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      border-radius: 14px;
+      background: ${cssVar.colorBgElevated};
+      color: ${cssVar.colorText};
+      cursor: pointer;
+      border: 1px solid transparent;
+      box-shadow: ${cssVar.boxShadowSecondary};
+      transition: all 0.2s ease;
+      font-size: ${cssVar.fontSizeSM};
+      padding: 7px 18px;
+      line-height: 18px;
+      border-radius: 6px;
+      font-size: 14px;
+      &:hover {
+        transform: translateY(-2px);
+      }
+    `),
+    swatches: css`
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+    `,
+    swatch: css`
+      width: 10px;
+      height: 10px;
+      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
+    `,
+    name: css`
+      margin-left: 10px;
+      text-transform: capitalize;
+    `,
  };
 });

+type THEME_MAP = 'antd' | 'shadcn' | 'mui';
+
+interface Theme {
+  name: THEME_MAP;
+  theme: ThemeConfig;
+  componentsConfig: Partial<ConfigProviderProps>;
+  style?: React.CSSProperties;
+  activeStyle: React.CSSProperties;
+  swatches: string[];
+}
+
 const PreviewBanner: React.FC<Readonly<React.PropsWithChildren>> = (props) => {
+  const { updateSiteConfig } = use<SiteContextProps>(SiteContext);
+  const [isMarketDrawerOpen, setIsMarketDrawerOpen] = useState(false);
  const { children } = props;
  const [locale] = useLocale(locales);
  const siteConfig = use(SiteContext);
  const { styles } = useStyle(siteConfig);
  const { pathname, search } = useLocation();
  const isZhCN = utils.isZhCN(pathname);
+  const [theme, setTheme] = useState<THEME_MAP>('antd');
+  const isDark = React.use(DarkContext);
+
+  const themeMap: Record<THEME_MAP, Theme> = {
+    antd: {
+      name: 'antd',
+      theme: {},
+      componentsConfig: {},
+      activeStyle: {
+        border: '1px solid #1677ff',
+      },
+      swatches: ['#1677ff', '#91d5ff', '#f0f5ff'],
+    },
+    shadcn: {
+      name: 'shadcn',
+      theme: isDark ? shadcnDark : shadcnLight,
+      style: {
+        backgroundColor: 'rgba(0, 0, 0, 0.1)',
+      },
+      activeStyle: {
+        border: '1px solid oklch(0.205 0 0)',
+      },
+      componentsConfig: shadcnComponentConfig,
+      swatches: ['oklch(0.205 0 0)', 'oklch(0.556 0 0)', 'rgba(0, 0, 0, 0.05)'],
+    },
+    mui: {
+      name: 'mui',
+      theme: isDark ? muiDark : muiLight,
+      componentsConfig: muiComponentConfig,
+      style: {
+        color: '#fff',
+        backgroundColor: 'rgb(2, 136, 209, 0.5)',
+      },
+      activeStyle: {
+        border: '1px solid rgb(25, 118, 210)',
+      },
+      swatches: ['#1677ff', '#91d5ff', '#f0f5ff'],
+    },
+  };
+  const config: ConfigProviderProps = {
+    theme: themeMap[theme].theme,
+    ...themeMap[theme].componentsConfig,
+  };

  return (
    <GroupMaskLayer>
-      {/* Image Left Top */}
-      <img
-        alt="bg"
-        src="https://gw.alipayobjects.com/zos/bmw-prod/49f963db-b2a8-4f15-857a-270d771a1204.svg"
-        draggable={false}
-        className={clsx(styles.bgImg, styles.bgImgTop)}
-      />
-      {/* Image Right Top */}
-      <img
-        alt="bg"
-        src="https://gw.alipayobjects.com/zos/bmw-prod/e152223c-bcae-4913-8938-54fda9efe330.svg"
-        draggable={false}
-        className={clsx(styles.bgImg, styles.bgImgBottom)}
-      />
+      <div
+        className={styles.holder}
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'stretch',
+          justifyContent: 'center',
+          height: 640,
+          position: 'relative',
+          overflow: 'hidden',
+          perspective: 800,
+        }}
+      >
+        <div
+          style={{
+            flex: 1,
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
+            position: 'relative',
+            zIndex: 1,
+          }}
+        >
+          <img
+            alt="bg"
+            src="https://gw.alipayobjects.com/zos/bmw-prod/49f963db-b2a8-4f15-857a-270d771a1204.svg"
+            draggable={false}
+            className={clsx(styles.bgImg, styles.bgImgTop)}
+            style={{ position: 'absolute', left: 0, top: 0, zIndex: 0 }}
+          />
+          <div className={styles.mask} />

-      <div className={styles.holder}>
-        {/* Mobile not show the component preview */}
-        <Suspense fallback={null}>
-          {siteConfig.isMobile ? null : (
-            <div className={styles.block}>
-              <ComponentsBlock />
+          <Typography className={styles.typography}>
+            <h1>Ant Design</h1>
+            <p>{locale.slogan}</p>
+          </Typography>
+          <div className={styles.themeBar}>
+            <div className={styles.presets}>
+              {Object.keys(themeMap).map((v, i) => {
+                const key = v as THEME_MAP;
+                return (
+                  <div
+                    key={i}
+                    role="button"
+                    tabIndex={0}
+                    onClick={() => setTheme(themeMap[key].name)}
+                    className={clsx(styles.presetButton)}
+                    style={{
+                      ...themeMap[key].style,
+                      ...(theme === themeMap[key].name ? themeMap[key].activeStyle : {}),
+                    }}
+                  >
+                    <div className={styles.swatches}>
+                      {themeMap[key].swatches?.map((s: any) => (
+                        <span key={s} className={styles.swatch} style={{ background: s }} />
+                      ))}
+                    </div>
+                    <span className={styles.name}>{themeMap[key].name}</span>
+                  </div>
+                );
+              })}
+              <Button
+                variant="solid"
+                icon={<ThemeIcon />}
+                onClick={() => setIsMarketDrawerOpen(true)}
+                style={{ fontSize: 16 }}
+              />
            </div>
-          )}
-        </Suspense>
-        <div className={styles.mask} />
-        <Typography className={styles.typography}>
-          <h1>Ant Design</h1>
-          <p>{locale.slogan}</p>
-        </Typography>
-        <Flex gap="middle" className={styles.btnWrap}>
-          <LinkButton
-            size="large"
-            type="primary"
-            to={utils.getLocalizedPathname('/components/overview/', isZhCN, search)}
-          >
-            {locale.start}
-          </LinkButton>
-          <LinkButton
-            size="large"
-            to={utils.getLocalizedPathname('/docs/spec/introduce/', isZhCN, search)}
-          >
-            {locale.designLanguage}
-          </LinkButton>
-        </Flex>
-        <div className={styles.child}>{children}</div>
+          </div>
+          <Flex gap="middle" className={styles.btnWrap}>
+            <LinkButton
+              size="large"
+              type="primary"
+              to={utils.getLocalizedPathname('/components/overview/', isZhCN, search)}
+            >
+              {locale.start}
+            </LinkButton>
+            <LinkButton
+              size="large"
+              to={utils.getLocalizedPathname('/docs/spec/introduce/', isZhCN, search)}
+            >
+              {locale.designLanguage}
+            </LinkButton>
+          </Flex>
+          <div className={styles.child}>{children}</div>
+        </div>
+        <PromptDrawer
+          open={isMarketDrawerOpen}
+          onClose={() => setIsMarketDrawerOpen(false)}
+          onThemeChange={(nextTheme) => {
+            updateSiteConfig({
+              dynamicTheme: nextTheme,
+            });
+          }}
+        />
+        <div
+          style={{
+            width: '40%',
+            display: 'flex',
+            alignItems: 'center',
+            position: 'relative',
+            backgroundColor: isDark ? '#393F4A' : '#f4f8ff',
+            borderRadius: '0 0px 0px 12px',
+          }}
+        >
+          <img
+            alt="bg"
+            src="https://gw.alipayobjects.com/zos/bmw-prod/e152223c-bcae-4913-8938-54fda9efe330.svg"
+            draggable={false}
+            className={clsx(styles.bgImg, styles.bgImgBottom)}
+            style={{ position: 'absolute', right: 0, top: 0, zIndex: 0 }}
+          />
+          <Suspense fallback={null}>
+            {siteConfig.isMobile ? null : (
+              <div className={styles.block} style={{ position: 'relative', zIndex: 1 }}>
+                <ComponentsBlock config={config} />
+              </div>
+            )}
+          </Suspense>
+        </div>
      </div>
    </GroupMaskLayer>
  );
--- a/.dumi/pages/index/components/PreviewBanner/themes/mui.ts
+++ b/.dumi/pages/index/components/PreviewBanner/themes/mui.ts
@@ -0,0 +1,244 @@
+import type { ConfigProviderProps, ThemeConfig } from 'antd';
+import { theme } from 'antd';
+
+const { darkAlgorithm, defaultAlgorithm } = theme;
+
+export const mui: ThemeConfig = {
+  token: {
+    colorPrimary: '#1976d2',
+    colorSuccess: '#2e7d32',
+    colorWarning: '#ed6c02',
+    colorError: '#d32f2f',
+    colorInfo: '#0288d1',
+    colorTextBase: '#212121',
+    colorBgBase: '#fafafa',
+    colorPrimaryBg: '#e3f2fd',
+    colorPrimaryBgHover: '#bbdefb',
+    colorPrimaryBorder: '#90caf9',
+    colorPrimaryBorderHover: '#64b5f6',
+    colorPrimaryHover: '#42a5f5',
+    colorPrimaryActive: '#1565c0',
+    colorPrimaryText: '#1976d2',
+    colorPrimaryTextHover: '#42a5f5',
+    colorPrimaryTextActive: '#1565c0',
+    colorSuccessBg: '#e8f5e9',
+    colorSuccessBgHover: '#c8e6c9',
+    colorSuccessBorder: '#a5d6a7',
+    colorSuccessBorderHover: '#81c784',
+    colorSuccessHover: '#4caf50',
+    colorSuccessActive: '#1b5e20',
+    colorSuccessText: '#2e7d32',
+    colorSuccessTextHover: '#4caf50',
+    colorSuccessTextActive: '#1b5e20',
+    colorWarningBg: '#fff3e0',
+    colorWarningBgHover: '#ffe0b2',
+    colorWarningBorder: '#ffcc02',
+    colorWarningBorderHover: '#ffb74d',
+    colorWarningHover: '#ff9800',
+    colorWarningActive: '#e65100',
+    colorWarningText: '#ed6c02',
+    colorWarningTextHover: '#ff9800',
+    colorWarningTextActive: '#e65100',
+    colorErrorBg: '#ffebee',
+    colorErrorBgHover: '#ffcdd2',
+    colorErrorBorder: '#ef9a9a',
+    colorErrorBorderHover: '#e57373',
+    colorErrorHover: '#ef5350',
+    colorErrorActive: '#c62828',
+    colorErrorText: '#d32f2f',
+    colorErrorTextHover: '#ef5350',
+    colorErrorTextActive: '#c62828',
+    colorInfoBg: '#e1f5fe',
+    colorInfoBgHover: '#b3e5fc',
+    colorInfoBorder: '#81d4fa',
+    colorInfoBorderHover: '#4fc3f7',
+    colorInfoHover: '#03a9f4',
+    colorInfoActive: '#01579b',
+    colorInfoText: '#0288d1',
+    colorInfoTextHover: '#03a9f4',
+    colorInfoTextActive: '#01579b',
+    colorText: 'rgba(33, 33, 33, 0.87)',
+    colorTextSecondary: 'rgba(33, 33, 33, 0.6)',
+    colorTextTertiary: 'rgba(33, 33, 33, 0.38)',
+    colorTextQuaternary: 'rgba(33, 33, 33, 0.26)',
+    colorTextDisabled: 'rgba(33, 33, 33, 0.38)',
+    colorBgContainer: '#ffffff',
+    colorBgElevated: '#ffffff',
+    colorBgLayout: '#f5f5f5',
+    colorBgSpotlight: 'rgba(33, 33, 33, 0.85)',
+    colorBgMask: 'rgba(33, 33, 33, 0.5)',
+    colorBorder: '#e0e0e0',
+    colorBorderSecondary: '#eeeeee',
+    borderRadius: 4,
+    borderRadiusXS: 1,
+    borderRadiusSM: 2,
+    borderRadiusLG: 6,
+    padding: 16,
+    paddingSM: 8,
+    paddingLG: 24,
+    margin: 16,
+    marginSM: 8,
+    marginLG: 24,
+    boxShadow:
+      '0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)',
+    boxShadowSecondary:
+      '0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)',
+  },
+  components: {
+    Button: {
+      primaryShadow:
+        '0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12)',
+      defaultShadow:
+        '0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12)',
+      dangerShadow:
+        '0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12)',
+      fontWeight: 500,
+      defaultBorderColor: 'rgba(0, 0, 0, 0.23)',
+      defaultColor: 'rgba(0, 0, 0, 0.87)',
+      defaultBg: '#ffffff',
+      defaultHoverBg: 'rgba(25, 118, 210, 0.04)',
+      defaultHoverBorderColor: 'rgba(0, 0, 0, 0.23)',
+      paddingInline: 16,
+      paddingBlock: 6,
+      contentFontSize: 14,
+      borderRadius: 4,
+    },
+    Alert: {
+      borderRadiusLG: 4,
+    },
+    Modal: {
+      borderRadiusLG: 4,
+    },
+    Progress: {
+      defaultColor: '#1976d2',
+      remainingColor: 'rgba(25, 118, 210, 0.12)',
+    },
+    Steps: {
+      iconSize: 24,
+    },
+    Checkbox: {
+      borderRadiusSM: 2,
+    },
+    Slider: {
+      trackBg: 'rgba(25, 118, 210, 0.26)',
+      trackHoverBg: 'rgba(25, 118, 210, 0.38)',
+      handleSize: 20,
+      handleSizeHover: 20,
+      railSize: 4,
+    },
+    ColorPicker: {
+      borderRadius: 4,
+    },
+  },
+};
+export const muiLight: ThemeConfig = {
+  algorithm: defaultAlgorithm,
+  token: mui.token,
+  components: mui.components,
+};
+
+export const muiDark: ThemeConfig = {
+  algorithm: darkAlgorithm,
+  token: {
+    ...mui.token,
+  },
+  components: {
+    ...mui.components,
+    Message: {
+      contentBg: '#212121',
+      contentPadding: '8px 16px',
+      zIndexPopup: 1010,
+    },
+  },
+};
+
+export const muiComponentConfig: Partial<ConfigProviderProps> = {
+  button: {
+    styles: (info) => {
+      const { props } = info;
+      if (props.type === 'primary') {
+        return {
+          root: {
+            backgroundColor: '#1976d2',
+            color: '#ffffff',
+            border: 'none',
+            fontWeight: 500,
+            textTransform: 'uppercase' as const,
+            letterSpacing: '0.02857em',
+            boxShadow:
+              '0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12)',
+            transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
+          },
+        };
+      }
+      if (props.type === 'default') {
+        return {
+          root: {
+            backgroundColor: '#ffffff',
+            color: 'rgba(0, 0, 0, 0.87)',
+            border: '1px solid rgba(0, 0, 0, 0.23)',
+            fontWeight: 500,
+            textTransform: 'uppercase' as const,
+            letterSpacing: '0.02857em',
+            transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
+          },
+        };
+      }
+      if (props.danger) {
+        return {
+          root: {
+            backgroundColor: '#d32f2f',
+            color: '#ffffff',
+            border: 'none',
+            fontWeight: 500,
+            textTransform: 'uppercase' as const,
+            letterSpacing: '0.02857em',
+            boxShadow:
+              '0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12)',
+          },
+        };
+      }
+      return {};
+    },
+  },
+  input: {
+    styles: (info) => {
+      const { props } = info;
+      const baseStyle = {
+        root: {
+          borderColor: 'rgba(0, 0, 0, 0.23)',
+          transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
+        },
+        input: {
+          color: 'rgba(0, 0, 0, 0.87)',
+          fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+        },
+      };
+      if (props.status === 'error') {
+        return {
+          ...baseStyle,
+          root: {
+            ...baseStyle.root,
+            borderColor: '#d32f2f',
+          },
+        };
+      }
+      return baseStyle;
+    },
+  },
+  select: {
+    styles: {
+      root: {
+        borderColor: 'rgba(0, 0, 0, 0.23)',
+        fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+      },
+      popup: {
+        root: {
+          borderRadius: 4,
+          boxShadow:
+            '0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12)',
+        },
+      },
+    },
+  },
+};
--- a/.dumi/pages/index/components/PreviewBanner/themes/shadcn.ts
+++ b/.dumi/pages/index/components/PreviewBanner/themes/shadcn.ts
@@ -0,0 +1,243 @@
+import type { ConfigProviderProps, ThemeConfig } from 'antd';
+import { theme } from 'antd';
+
+const { darkAlgorithm, defaultAlgorithm } = theme;
+
+export const shadcn: ThemeConfig = {
+  algorithm: defaultAlgorithm,
+  token: {
+    colorPrimary: '#262626',
+    colorSuccess: '#22c55e',
+    colorWarning: '#f97316',
+    colorError: '#ef4444',
+    colorInfo: '#262626',
+    colorTextBase: '#262626',
+    colorBgBase: '#ffffff',
+    colorPrimaryBg: '#f5f5f5',
+    colorPrimaryBgHover: '#e5e5e5',
+    colorPrimaryBorder: '#d4d4d4',
+    colorPrimaryBorderHover: '#a3a3a3',
+    colorPrimaryHover: '#404040',
+    colorPrimaryActive: '#171717',
+    colorPrimaryText: '#262626',
+    colorPrimaryTextHover: '#404040',
+    colorPrimaryTextActive: '#171717',
+    colorSuccessBg: '#f0fdf4',
+    colorSuccessBgHover: '#dcfce7',
+    colorSuccessBorder: '#bbf7d0',
+    colorSuccessBorderHover: '#86efac',
+    colorSuccessHover: '#16a34a',
+    colorSuccessActive: '#15803d',
+    colorSuccessText: '#16a34a',
+    colorSuccessTextHover: '#16a34a',
+    colorSuccessTextActive: '#15803d',
+    colorWarningBg: '#fff7ed',
+    colorWarningBgHover: '#fed7aa',
+    colorWarningBorder: '#fdba74',
+    colorWarningBorderHover: '#fb923c',
+    colorWarningHover: '#ea580c',
+    colorWarningActive: '#c2410c',
+    colorWarningText: '#ea580c',
+    colorWarningTextHover: '#ea580c',
+    colorWarningTextActive: '#c2410c',
+    colorErrorBg: '#fef2f2',
+    colorErrorBgHover: '#fecaca',
+    colorErrorBorder: '#fca5a5',
+    colorErrorBorderHover: '#f87171',
+    colorErrorHover: '#dc2626',
+    colorErrorActive: '#b91c1c',
+    colorErrorText: '#dc2626',
+    colorErrorTextHover: '#dc2626',
+    colorErrorTextActive: '#b91c1c',
+    colorInfoBg: '#f5f5f5',
+    colorInfoBgHover: '#e5e5e5',
+    colorInfoBorder: '#d4d4d4',
+    colorInfoBorderHover: '#a3a3a3',
+    colorInfoHover: '#404040',
+    colorInfoActive: '#171717',
+    colorInfoText: '#262626',
+    colorInfoTextHover: '#404040',
+    colorInfoTextActive: '#171717',
+    colorText: '#262626',
+    colorTextSecondary: '#525252',
+    colorTextTertiary: '#737373',
+    colorTextQuaternary: '#a3a3a3',
+    colorTextDisabled: '#a3a3a3',
+    colorBgContainer: '#ffffff',
+    colorBgElevated: '#ffffff',
+    colorBgLayout: '#fafafa',
+    colorBgSpotlight: 'rgba(38, 38, 38, 0.85)',
+    colorBgMask: 'rgba(38, 38, 38, 0.45)',
+    colorBorder: '#e5e5e5',
+    colorBorderSecondary: '#f5f5f5',
+    borderRadius: 10,
+    borderRadiusXS: 2,
+    borderRadiusSM: 6,
+    borderRadiusLG: 14,
+    padding: 16,
+    paddingSM: 12,
+    paddingLG: 24,
+    margin: 16,
+    marginSM: 12,
+    marginLG: 24,
+    boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)',
+    boxShadowSecondary: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)',
+  },
+  components: {
+    Button: {
+      primaryShadow: 'none',
+      defaultShadow: 'none',
+      dangerShadow: 'none',
+      defaultBorderColor: '#e4e4e7',
+      defaultColor: '#18181b',
+      defaultBg: '#ffffff',
+      defaultHoverBg: '#f4f4f5',
+      defaultHoverBorderColor: '#d4d4d8',
+      defaultHoverColor: '#18181b',
+      defaultActiveBg: '#e4e4e7',
+      defaultActiveBorderColor: '#d4d4d8',
+      borderRadius: 6,
+    },
+    Input: {
+      activeShadow: 'none',
+      hoverBorderColor: '#a1a1aa',
+      activeBorderColor: '#18181b',
+      borderRadius: 6,
+    },
+    Select: {
+      optionSelectedBg: '#f4f4f5',
+      optionActiveBg: '#fafafa',
+      optionSelectedFontWeight: 500,
+      borderRadius: 6,
+    },
+    Alert: {
+      borderRadiusLG: 8,
+    },
+    Modal: {
+      borderRadiusLG: 12,
+    },
+    Progress: {
+      defaultColor: '#18181b',
+      remainingColor: '#f4f4f5',
+    },
+    Steps: {
+      iconSize: 32,
+    },
+    Switch: {
+      trackHeight: 24,
+      trackMinWidth: 44,
+      innerMinMargin: 4,
+      innerMaxMargin: 24,
+    },
+    Checkbox: {
+      borderRadiusSM: 4,
+    },
+    Slider: {
+      trackBg: '#f4f4f5',
+      trackHoverBg: '#e4e4e7',
+      handleSize: 18,
+      handleSizeHover: 20,
+      railSize: 6,
+    },
+    ColorPicker: {
+      borderRadius: 6,
+    },
+  },
+};
+
+export const shadcnLight: ThemeConfig = {
+  algorithm: defaultAlgorithm,
+  token: shadcn.token,
+  components: shadcn.components,
+};
+
+export const shadcnDark: ThemeConfig = {
+  algorithm: darkAlgorithm,
+  token: {
+    ...shadcn.token,
+  },
+  components: {
+    ...shadcn.components,
+    Message: {
+      contentBg: '#212121',
+    },
+  },
+};
+
+export const shadcnComponentConfig: Partial<ConfigProviderProps> = {
+  button: {
+    styles: (info) => {
+      const { props } = info;
+      if (props.type === 'primary') {
+        return {
+          root: {
+            backgroundColor: '#18181b',
+            color: '#ffffff',
+            border: '1px solid #18181b',
+            fontWeight: 500,
+            transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
+          },
+        };
+      }
+      if (props.type === 'default') {
+        return {
+          root: {
+            backgroundColor: '#ffffff',
+            color: '#18181b',
+            border: '1px solid #e4e4e7',
+            fontWeight: 500,
+            transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
+          },
+        };
+      }
+      if (props.danger) {
+        return {
+          root: {
+            backgroundColor: '#dc2626',
+            color: '#ffffff',
+            border: '1px solid #dc2626',
+            fontWeight: 500,
+          },
+        };
+      }
+      return {};
+    },
+  },
+  input: {
+    styles: (info) => {
+      const { props } = info;
+      const baseStyle = {
+        root: {
+          borderColor: '#e4e4e7',
+          transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
+        },
+        input: {
+          color: '#18181b',
+        },
+      };
+      if (props.status === 'error') {
+        return {
+          ...baseStyle,
+          root: {
+            ...baseStyle.root,
+            borderColor: '#dc2626',
+          },
+        };
+      }
+      return baseStyle;
+    },
+  },
+  select: {
+    styles: {
+      root: {
+        borderColor: '#e4e4e7',
+      },
+      popup: {
+        root: {
+          borderRadius: 8,
+          boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)',
+        },
+      },
+    },
+  },
+};
--- a/.dumi/pages/index/components/util.ts
+++ b/.dumi/pages/index/components/util.ts
@@ -1,3 +1,4 @@
+/* eslint-disable compat/compat */
 import { css } from 'antd-style';
 import useSWR from 'swr';

--- a/.dumi/pages/index/index.tsx
+++ b/.dumi/pages/index/index.tsx
@@ -49,13 +49,6 @@ const Homepage: React.FC = () => {
      </PreviewBanner>

      <div>
-        {/* 定制主题 */}
-        <ConfigProvider theme={{ algorithm: theme.defaultAlgorithm }}>
-          <Suspense fallback={null}>
-            <Theme />
-          </Suspense>
-        </ConfigProvider>
-
        {/* 组件列表 */}
        <Group
          background={token.colorBgElevated}
@@ -69,11 +62,18 @@ const Homepage: React.FC = () => {
          </Suspense>
        </Group>

+        {/* 定制主题 */}
+        <ConfigProvider theme={{ algorithm: theme.defaultAlgorithm }}>
+          <Suspense fallback={null}>
+            <Theme />
+          </Suspense>
+        </ConfigProvider>
+
        {/* 设计语言 */}
        <Group
          title={locale.designTitle}
          description={locale.designDesc}
-          background={isDark ? '#393F4A' : '#F5F8FF'}
+          background={isDark ? '#393F4A' : token.colorBgContainer}
          decoration={
            <img
              draggable={false}
--- a/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx
+++ b/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx
@@ -72,7 +72,6 @@ const useStyle = createStyles(({ cssVar, token, css }) => ({
    font-weight: 600;
    font-size: 20px;
    margin: 0 !important;
-    padding: 0;
  `,
  versionTag: css`
    user-select: none;
--- a/.dumi/theme/common/Marker.tsx
+++ b/.dumi/theme/common/Marker.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { createStyles, css } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 import { clsx } from 'clsx';

-const useStyle = createStyles(({ cssVar, cx }) => {
+const styles = createStaticStyles(({ cssVar, css, cx }) => {
  const duration = cssVar.motionDurationSlow;

  const marker = css`
@@ -55,8 +55,6 @@ export interface MarkerProps {
 }

 const Marker = React.memo<MarkerProps>((props) => {
-  const { styles } = useStyle();
-
  const { rect, primary, ...restProps } = props;

  const rectRef = React.useRef(rect);
--- a/.dumi/theme/common/SelectSemanticTemplate.tsx
+++ b/.dumi/theme/common/SelectSemanticTemplate.tsx
@@ -67,14 +67,11 @@ const Block: React.FC<BlockProps> = ({
  ...props
 }) => {
  const divRef = React.useRef<HTMLDivElement>(null);
-  // 多选模式下，优先使用 multipleProps 中的 defaultValue
-  const multipleDefaultValue = (multipleProps as any)?.defaultValue;
-  const initialValue = mode === 'single' ? defaultValue : multipleDefaultValue;
-  const [value, setValue] = React.useState(initialValue);
+  const [value, setValue] = React.useState(defaultValue);

  React.useEffect(() => {
-    setValue(mode === 'single' ? defaultValue : multipleDefaultValue);
-  }, [mode, defaultValue, multipleDefaultValue]);
+    setValue(defaultValue);
+  }, [mode]);

  return (
    <Flex
@@ -104,7 +101,7 @@ const Block: React.FC<BlockProps> = ({
        options={options}
        {...(mode === 'multiple' ? multipleProps : {})}
        styles={{ popup: { zIndex: 1 } }}
-        maxTagCount={process.env.NODE_ENV === 'test' ? 1 : 'responsive'}
+        maxTagCount="responsive"
        placeholder="Please select"
        allowClear
      />
--- a/.dumi/theme/common/ThemeSwitch/PromptDrawer.tsx
+++ b/.dumi/theme/common/ThemeSwitch/PromptDrawer.tsx
@@ -1,4 +1,5 @@
 import React, { useRef, useState } from 'react';
+import { StyleProvider } from '@ant-design/cssinjs';
 import { AntDesignOutlined, UserOutlined } from '@ant-design/icons';
 import { Bubble, Sender } from '@ant-design/x';
 import type { SenderRef } from '@ant-design/x/es/sender';
@@ -99,16 +100,21 @@ const PromptDrawer: React.FC<PromptDrawerProps> = ({ open, onClose, onThemeChang
      afterOpenChange={handleAfterOpenChange}
    >
      <Flex vertical style={{ height: '100%' }}>
-        <Bubble.List style={{ flex: 1, overflow: 'auto' }} items={items} />
-        <Sender
-          ref={senderRef}
-          style={{ flex: 0 }}
-          value={inputValue}
-          onChange={setInputValue}
-          onSubmit={handleSubmit}
-          loading={loading}
-          onCancel={cancelRequest}
-        />
+        {/* Workaround for layer incompat between site `StyleProvider layer` and `@ant-design/x`.
+         * See: https://github.com/ant-design/x/issues/1588
+         */}
+        <StyleProvider layer={false}>
+          <Bubble.List style={{ flex: 1, overflow: 'auto' }} items={items} />
+          <Sender
+            ref={senderRef}
+            style={{ flex: 0 }}
+            value={inputValue}
+            onChange={setInputValue}
+            onSubmit={handleSubmit}
+            loading={loading}
+            onCancel={cancelRequest}
+          />
+        </StyleProvider>
      </Flex>
    </Drawer>
  );
--- a/.dumi/theme/common/ThemeSwitch/usePromptTheme.ts
+++ b/.dumi/theme/common/ThemeSwitch/usePromptTheme.ts
@@ -1,3 +1,4 @@
+/* eslint-disable compat/compat */
 import { useRef, useState } from 'react';
 import { XStream } from '@ant-design/x-sdk';

--- a/.dumi/theme/common/TreeSelectSemanticTemplate.tsx
+++ b/.dumi/theme/common/TreeSelectSemanticTemplate.tsx
@@ -61,14 +61,11 @@ const Block: React.FC<BlockProps> = ({
  ...props
 }) => {
  const divRef = React.useRef<HTMLDivElement>(null);
-  // 多选模式下，优先使用 multipleProps 中的 defaultValue
-  const multipleDefaultValue = (multipleProps as any)?.defaultValue;
-  const initialValue = mode === 'single' ? defaultValue : multipleDefaultValue;
-  const [value, setValue] = React.useState(initialValue);
+  const [value, setValue] = React.useState(defaultValue);

  React.useEffect(() => {
-    setValue(mode === 'single' ? defaultValue : multipleDefaultValue);
-  }, [mode, defaultValue, multipleDefaultValue]);
+    setValue(defaultValue);
+  }, [mode]);

  return (
    <Flex
@@ -96,7 +93,7 @@ const Block: React.FC<BlockProps> = ({
        treeData={treeData}
        {...(mode === 'multiple' ? multipleProps : {})}
        styles={{ popup: { zIndex: 1 } }}
-        maxTagCount={process.env.NODE_ENV === 'test' ? 1 : 'responsive'}
+        maxTagCount="responsive"
        placeholder="Please select"
      />
    </Flex>
--- a/.dumi/theme/slots/Header/index.tsx
+++ b/.dumi/theme/slots/Header/index.tsx
@@ -159,6 +159,7 @@ interface VersionItem {
 }

 const fetcher = (...args: Parameters<typeof fetch>) => {
+  // eslint-disable-next-line compat/compat
  return fetch(...args).then((res) => res.json());
 };

--- a/.dumirc.ts
+++ b/.dumirc.ts
@@ -160,27 +160,18 @@ export default defineConfig({
      }

      // 首页无视链接里面的语言设置 https://github.com/ant-design/ant-design/issues/4552
-      const normalizedPathname = pathname || '/';
-      if (normalizedPathname === '/' || normalizedPathname === '/index-cn') {
-        let lang;
-        if (window.localStorage) {
-          const antLocale = localStorage.getItem('ANT_LOCAL_TYPE_KEY');
-          // 尝试解析 JSON，因为可能是被序列化后存储的 "en-US" / en-US https://github.com/ant-design/ant-design/issues/56606
-          try {
-            lang = antLocale ? JSON.parse(antLocale) : localStorage.getItem('locale');
-          } catch (e) {
-            lang = antLocale ? antLocale : localStorage.getItem('locale');
-          }
-        }
-        lang = lang || ((navigator.language || navigator.browserLanguage).toLowerCase() === 'zh-cn'
+      if (pathname === '/' || pathname === '/index-cn') {
+        const lang =
+          (window.localStorage && localStorage.getItem('locale')) ||
+          ((navigator.language || navigator.browserLanguage).toLowerCase() === 'zh-cn'
            ? 'zh-CN'
            : 'en-US');
        // safari is 'zh-cn', while other browser is 'zh-CN';
-        if ((lang === 'zh-CN') !== isZhCN(normalizedPathname)) {
-          location.pathname = getLocalizedPathname(normalizedPathname, lang === 'zh-CN');
+        if ((lang === 'zh-CN') !== isZhCN(pathname)) {
+          location.pathname = getLocalizedPathname(pathname, lang === 'zh-CN');
        }
      }
-      document.documentElement.className += isZhCN(normalizedPathname) ? 'zh-cn' : 'en-us';
+      document.documentElement.className += isZhCN(pathname) ? 'zh-cn' : 'en-us';
    })();
    `,
  ],
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -52,15 +52,6 @@ jobs:
      - run: ut
      - run: ut test:node

-  test-semantic:
-    name: test-semantic
-    runs-on: blacksmith-4vcpu-ubuntu-2404
-    steps:
-      - uses: actions/checkout@v6
-      - uses: utooland/setup-utoo@v1
-      - run: ut
-      - run: ut test:semantic
-
  test-react-latest:
    name: test-react-latest
    strategy:
--- a/.jest.js
+++ b/.jest.js
@@ -48,14 +48,7 @@ module.exports = {
    '^antd/lib/(.*)$': '<rootDir>/components/$1',
    '^antd/locale/(.*)$': '<rootDir>/components/locale/$1',
  },
-  testPathIgnorePatterns: [
-    '/node_modules/',
-    'dekko',
-    'node',
-    'image.test.js',
-    'image.test.ts',
-    'demo-semantic.test',
-  ],
+  testPathIgnorePatterns: ['/node_modules/', 'dekko', 'node', 'image.test.js', 'image.test.ts'],
  transform: {
    '\\.tsx?$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
    '\\.(m?)js$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
@@ -71,7 +64,6 @@ module.exports = {
    '!components/*/__tests__/type.test.tsx',
    '!components/**/*/interface.{ts,tsx}',
    '!components/*/__tests__/image.test.{ts,tsx}',
-    '!components/*/__tests__/demo-semantic.test.tsx',
    '!components/__tests__/node.test.tsx',
    '!components/*/demo/*.tsx',
    '!components/*/design/**',
--- a/.jest.semantic.js
+++ b/.jest.semantic.js
@@ -1,30 +0,0 @@
-const { moduleNameMapper, transformIgnorePatterns } = require('./.jest');
-
-// jest config for semantic demo snapshots
-// Semantic tests don't need to run in React 18, 19, lib, es, dist repeatedly
-module.exports = {
-  verbose: true,
-  testEnvironment: 'jsdom',
-  setupFiles: ['./tests/setup.ts', 'jest-canvas-mock'],
-  setupFilesAfterEnv: ['./tests/setupAfterEnv.ts'],
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'md'],
-  modulePathIgnorePatterns: ['/_site/'],
-  moduleNameMapper,
-  testPathIgnorePatterns: ['/node_modules/'],
-  transform: {
-    '\\.tsx?$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
-    '\\.(m?)js$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
-    '\\.md$': './node_modules/@ant-design/tools/lib/jest/demoPreprocessor',
-  },
-  testRegex: 'demo-semantic\\.test\\.(j|t)sx?$',
-  transformIgnorePatterns,
-  globals: {
-    'ts-jest': {
-      tsConfig: './tsconfig.test.json',
-    },
-  },
-  testEnvironmentOptions: {
-    url: 'http://localhost',
-  },
-  testTimeout: 10000,
-};
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -15,31 +15,6 @@ tag: vVERSION

 ---

-## 6.2.2
-
-`2026-01-26`
-
- 🐞 Fix Button with href wrapped by Typography showing incorrect color and flickering outline on hover. [#56619](https://github.com/ant-design/ant-design/pull/56619) [@QdabuliuQ](https://github.com/QdabuliuQ)
- 🐞 Fix component token not taking effect for Button with `type="text"`. [#56291](https://github.com/ant-design/ant-design/pull/56291) [@QDyanbing](https://github.com/QDyanbing)
- 🐞 Fix where components within the Popover were affected by the state association with Form.Item. [#56728](https://github.com/ant-design/ant-design/pull/56728)
- 🐞 Fix the placeholders displayed incorrectly when selecting multiple items in Select. [#56675](https://github.com/ant-design/ant-design/pull/56675)
- 💄 Fix misaligned elements in Pagination when the global `fontSize` is increased. [#56715](https://github.com/ant-design/ant-design/pull/56715) [@QDyanbing](https://github.com/QDyanbing)
- 💄 Fix incorrect Drawer dragger position in RTL mode. [#56693](https://github.com/ant-design/ant-design/pull/56693) [@QdabuliuQ](https://github.com/QdabuliuQ)
-
-## 6.2.1
-
-`2026-01-20`
-
- 🐞 Fix Button child element's `className` be cleared if it contains two Chinese characters. [#56593](https://github.com/ant-design/ant-design/pull/56593) [@QdabuliuQ](https://github.com/QdabuliuQ)
- 🐞 Fix DatePicker DOM not updated bug after update `suffixIcon` as `null`. [#56637](https://github.com/ant-design/ant-design/pull/56637) [@AlanQtten](https://github.com/AlanQtten)
- 🐞 Fix Table content area border radius when set border radius for container. [#56478](https://github.com/ant-design/ant-design/pull/56478) [@QDyanbing](https://github.com/QDyanbing)
- 💄 Fix Card unexpected border radius for Body area. [#56653](https://github.com/ant-design/ant-design/pull/56653) [@ug-hero](https://github.com/ug-hero)
- 💄 MISC: Fix unexpected `undefined` and `null` in the injected styles. [#56636](https://github.com/ant-design/ant-design/pull/56636) [@li-jia-nan](https://github.com/li-jia-nan)
- 💄 MISC: Improve `background` transition to `background-color` for all components. [#56598](https://github.com/ant-design/ant-design/pull/56598) [@li-jia-nan](https://github.com/li-jia-nan)
- 🛠 Improve Grid use `genCssVar` method to generate more stable CSS variable names. [#56635](https://github.com/ant-design/ant-design/pull/56635) [@li-jia-nan](https://github.com/li-jia-nan)
- 🛠 Improve @ant-design/icons usage to avoid depend on full package since externals. [#56639](https://github.com/ant-design/ant-design/pull/56639) [@ShenHongFei](https://github.com/ShenHongFei)
-
-
 ## 6.2.0

 `2026-01-13`
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -15,30 +15,6 @@ tag: vVERSION

 ---

-## 6.2.2
-
-`2026-01-26`
-
- 🐞 修复被 Typography 包裹的带 href 的 Button 显示错误颜色和 hover 时 outline 闪烁的问题。[#56619](https://github.com/ant-design/ant-design/pull/56619) [@QdabuliuQ](https://github.com/QdabuliuQ)
- 🐞 修复 Button `type="text"` 时组件 Token 不生效的问题。[#56291](https://github.com/ant-design/ant-design/pull/56291) [@QDyanbing](https://github.com/QDyanbing)
- 🐞 修复 Popover 内组件被 Form.Item 状态关联影响的问题。[#56728](https://github.com/ant-design/ant-design/pull/56728)
- 🐞 修复 Select 多选时占位符显示异常的问题。[#56675](https://github.com/ant-design/ant-design/pull/56675)
- 💄 修复 Pagination 全局 `fontSize` 变大时各元素上下错位的问题。[#56715](https://github.com/ant-design/ant-design/pull/56715) [@QDyanbing](https://github.com/QDyanbing)
- 💄 修复 Drawer 在 rtl 模式下 dragger 位置错误的样式问题。[#56693](https://github.com/ant-design/ant-design/pull/56693) [@QdabuliuQ](https://github.com/QdabuliuQ)
-
-## 6.2.1
-
-`2026-01-20`
-
- 🐞 修复 Button 子元素为包含两个中文字符的标签时，原有 `className` 被清空的问题。[#56593](https://github.com/ant-design/ant-design/pull/56593) [@QdabuliuQ](https://github.com/QdabuliuQ)
- 🐞 修复 DatePicker 在设置 `suffixIcon` 为 `null` 后不会更新 DOM 的问题。[#56637](https://github.com/ant-design/ant-design/pull/56637) [@AlanQtten](https://github.com/AlanQtten)
- 🐞 修复 Table 容器设置圆角时，内部内容区域圆角不一致的问题。[#56478](https://github.com/ant-design/ant-design/pull/56478) [@QDyanbing](https://github.com/QDyanbing)
- 💄 修复 Card Body 区域有非预期圆角值的问题。[#56653](https://github.com/ant-design/ant-design/pull/56653) [@ug-hero](https://github.com/ug-hero)
- 💄 杂项：修复 `undefined` 和 `null` 值被注入到 CSS 的问题。[#56636](https://github.com/ant-design/ant-design/pull/56636) [@li-jia-nan](https://github.com/li-jia-nan)
- 💄 杂项：优化所有组件中的 `background` 过渡为 `background-color`。[#56598](https://github.com/ant-design/ant-design/pull/56598) [@li-jia-nan](https://github.com/li-jia-nan)
- 🛠 优化 Grid 使用 `genCssVar` 方法以生成更加稳定的 CSS 变量名。[#56635](https://github.com/ant-design/ant-design/pull/56635) [@li-jia-nan](https://github.com/li-jia-nan)
- 🛠 优化 @ant-design/icons 引入方式为独立图标引入，避免被 externals 增加前置依赖。[#56639](https://github.com/ant-design/ant-design/pull/56639) [@ShenHongFei](https://github.com/ShenHongFei)
-
 ## 6.2.0

 `2026-01-13`
--- a/components/_util/tests/useZIndex.test.tsx
+++ b/components/_util/tests/useZIndex.test.tsx
@@ -130,10 +130,10 @@ const items: MenuProps['items'] = [
 ];

 const consumerComponent: Partial<
-  Record<ZIndexConsumer, React.FC<Readonly<{ rootClassName: string; ref?: React.Ref<any> }>>>
+  Record<ZIndexConsumer, React.FC<Readonly<{ rootClassName: string }>>>
 > = {
-  SelectLike: ({ rootClassName, ref, ...props }) => (
-    <div ref={ref}>
+  SelectLike: ({ rootClassName, ...props }) => (
+    <>
      <Select
        {...props}
        rootClassName={`${rootClassName} comp-item comp-Select`}
@@ -159,7 +159,7 @@ const consumerComponent: Partial<
        open
      />
      <ColorPicker {...props} open rootClassName={`${rootClassName} comp-item comp-ColorPicker`} />
-    </div>
+    </>
  ),
  Dropdown: (props) => (
    <Dropdown
@@ -175,15 +175,15 @@ const consumerComponent: Partial<
      <button type="button">test</button>
    </Dropdown>
  ),
-  DatePicker: ({ rootClassName, ref, ...props }) => (
-    <div ref={ref}>
+  DatePicker: ({ rootClassName, ...props }) => (
+    <>
      <DatePicker {...props} rootClassName={`${rootClassName} comp-item comp-DatePicker`} open />
      <DatePicker.TimePicker
        {...props}
        rootClassName={`${rootClassName} comp-item comp-TimePicker`}
        open
      />
-    </div>
+    </>
  ),
  Menu: (props) => <Menu {...props} items={items} defaultOpenKeys={['SubMenu']} />,
  ImagePreview: ({ rootClassName }: ImageProps) => (
--- a/components/_util/convertToTooltipProps.ts
+++ b/components/_util/convertToTooltipProps.ts
@@ -4,16 +4,16 @@ import { isValidElement } from 'react';
 import type { TooltipProps } from '../tooltip';
 import isNonNullable from './isNonNullable';

-const convertToTooltipProps = <P extends TooltipProps>(tooltip: P | ReactNode) => {
+const convertToTooltipProps = <P extends TooltipProps>(tooltip: P | ReactNode, context?: P) => {
  if (!isNonNullable(tooltip)) {
    return null;
  }

  if (typeof tooltip === 'object' && !isValidElement(tooltip)) {
-    return tooltip as P;
+    return { ...context, ...tooltip } as P;
  }

-  return { title: tooltip } as P;
+  return { ...context, title: tooltip } as P;
 };

 export default convertToTooltipProps;
--- a/components/alert/tests/snapshots/demo-semantic.test.tsx.snap
+++ b/components/alert/tests/snapshots/demo-semantic.test.tsx.snap
@@ -1,811 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`renders components/alert/demo/_semantic.tsx correctly 1`] = `
-<div
-  class="acss-1ucck97"
->
-  <div
-    class="ant-row css-var-test-id"
-  >
-    <div
-      class="ant-col ant-col-16 acss-my3sst css-var-test-id"
-    >
-      <div
-        class="ant-alert ant-alert-info ant-alert-with-description semantic-mark-root css-var-test-id"
-        data-show="true"
-        role="alert"
-      >
-        <span
-          class="ant-alert-icon semantic-mark-icon"
-        >
-          <span
-            aria-label="info-circle"
-            class="anticon anticon-info-circle"
-            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>
-        </span>
-        <div
-          class="ant-alert-section semantic-mark-section"
-        >
-          <div
-            class="ant-alert-title semantic-mark-title"
-          >
-            Info Text
-          </div>
-          <div
-            class="ant-alert-description semantic-mark-description"
-          >
-            Info Description Info Description Info Description Info Description
-          </div>
-        </div>
-        <div
-          class="ant-alert-actions semantic-mark-actions"
-        >
-          <div
-            class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small css-var-test-id"
-          >
-            <div
-              class="ant-space-item"
-            >
-              <button
-                class="ant-btn css-var-test-id ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Accept
-                </span>
-              </button>
-            </div>
-            <div
-              class="ant-space-item"
-            >
-              <button
-                class="ant-btn css-var-test-id ant-btn-default ant-btn-dangerous ant-btn-color-dangerous ant-btn-variant-outlined ant-btn-sm ant-btn-background-ghost"
-                type="button"
-              >
-                <span>
-                  Decline
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-        <button
-          class="ant-alert-close-icon semantic-mark-close"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            aria-label="close"
-            class="anticon anticon-close"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="close"
-              fill="currentColor"
-              fill-rule="evenodd"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
-              />
-            </svg>
-          </span>
-        </button>
-      </div>
-    </div>
-    <div
-      class="ant-col ant-col-8 css-var-test-id"
-    >
-      <ul
-        class="acss-1ry21g5"
-      >
-        <li
-          class="acss-1ehfz5v"
-        >
-          <div
-            class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
-          >
-            <div
-              class="ant-flex css-var-test-id ant-flex-align-center ant-flex-justify-space-between ant-flex-gap-small"
-            >
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <h5
-                  class="ant-typography css-var-test-id"
-                  style="margin: 0px;"
-                >
-                  root
-                </h5>
-                <span
-                  class="ant-tag ant-tag-filled ant-tag-blue css-var-test-id"
-                >
-                  6.0.0
-                </span>
-              </div>
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="pushpin"
-                      class="anticon anticon-pushpin"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="pushpin"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M878.3 392.1L631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3a33.23 33.23 0 00-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 00-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8zM666.2 549.3l-24.5 24.5 3.8 34.4a259.92 259.92 0 01-30.4 153.9L262 408.8c12.9-7.1 26.3-13.1 40.3-17.9 27.2-9.4 55.7-14.1 84.7-14.1 9.6 0 19.3.5 28.9 1.6l34.4 3.8 24.5-24.5L608.5 224 800 415.5 666.2 549.3z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="info-circle"
-                      class="anticon anticon-info-circle"
-                      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 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-                        />
-                        <path
-                          d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ant-typography css-var-test-id"
-              style="margin: 0px; font-size: 12px;"
-            >
-              根元素，包含边框、背景色、内边距、圆角、位置布局等警告提示框的基础样式
-            </div>
-          </div>
-        </li>
-        <li
-          class="acss-1ehfz5v"
-        >
-          <div
-            class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
-          >
-            <div
-              class="ant-flex css-var-test-id ant-flex-align-center ant-flex-justify-space-between ant-flex-gap-small"
-            >
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <h5
-                  class="ant-typography css-var-test-id"
-                  style="margin: 0px;"
-                >
-                  icon
-                </h5>
-                <span
-                  class="ant-tag ant-tag-filled ant-tag-blue css-var-test-id"
-                >
-                  6.0.0
-                </span>
-              </div>
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="pushpin"
-                      class="anticon anticon-pushpin"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="pushpin"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M878.3 392.1L631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3a33.23 33.23 0 00-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 00-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8zM666.2 549.3l-24.5 24.5 3.8 34.4a259.92 259.92 0 01-30.4 153.9L262 408.8c12.9-7.1 26.3-13.1 40.3-17.9 27.2-9.4 55.7-14.1 84.7-14.1 9.6 0 19.3.5 28.9 1.6l34.4 3.8 24.5-24.5L608.5 224 800 415.5 666.2 549.3z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="info-circle"
-                      class="anticon anticon-info-circle"
-                      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 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-                        />
-                        <path
-                          d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ant-typography css-var-test-id"
-              style="margin: 0px; font-size: 12px;"
-            >
-              图标元素，包含图标的颜色、行高、外边距等样式，支持不同类型的状态图标
-            </div>
-          </div>
-        </li>
-        <li
-          class="acss-1ehfz5v"
-        >
-          <div
-            class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
-          >
-            <div
-              class="ant-flex css-var-test-id ant-flex-align-center ant-flex-justify-space-between ant-flex-gap-small"
-            >
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <h5
-                  class="ant-typography css-var-test-id"
-                  style="margin: 0px;"
-                >
-                  section
-                </h5>
-                <span
-                  class="ant-tag ant-tag-filled ant-tag-blue css-var-test-id"
-                >
-                  6.0.0
-                </span>
-              </div>
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="pushpin"
-                      class="anticon anticon-pushpin"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="pushpin"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M878.3 392.1L631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3a33.23 33.23 0 00-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 00-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8zM666.2 549.3l-24.5 24.5 3.8 34.4a259.92 259.92 0 01-30.4 153.9L262 408.8c12.9-7.1 26.3-13.1 40.3-17.9 27.2-9.4 55.7-14.1 84.7-14.1 9.6 0 19.3.5 28.9 1.6l34.4 3.8 24.5-24.5L608.5 224 800 415.5 666.2 549.3z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="info-circle"
-                      class="anticon anticon-info-circle"
-                      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 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-                        />
-                        <path
-                          d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ant-typography css-var-test-id"
-              style="margin: 0px; font-size: 12px;"
-            >
-              内容元素，采用 flex 布局控制内容区域的排版和最小宽度
-            </div>
-          </div>
-        </li>
-        <li
-          class="acss-1ehfz5v"
-        >
-          <div
-            class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
-          >
-            <div
-              class="ant-flex css-var-test-id ant-flex-align-center ant-flex-justify-space-between ant-flex-gap-small"
-            >
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <h5
-                  class="ant-typography css-var-test-id"
-                  style="margin: 0px;"
-                >
-                  title
-                </h5>
-                <span
-                  class="ant-tag ant-tag-filled ant-tag-blue css-var-test-id"
-                >
-                  6.0.0
-                </span>
-              </div>
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="pushpin"
-                      class="anticon anticon-pushpin"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="pushpin"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M878.3 392.1L631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3a33.23 33.23 0 00-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 00-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8zM666.2 549.3l-24.5 24.5 3.8 34.4a259.92 259.92 0 01-30.4 153.9L262 408.8c12.9-7.1 26.3-13.1 40.3-17.9 27.2-9.4 55.7-14.1 84.7-14.1 9.6 0 19.3.5 28.9 1.6l34.4 3.8 24.5-24.5L608.5 224 800 415.5 666.2 549.3z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="info-circle"
-                      class="anticon anticon-info-circle"
-                      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 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-                        />
-                        <path
-                          d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ant-typography css-var-test-id"
-              style="margin: 0px; font-size: 12px;"
-            >
-              标题元素，包含标题文字的颜色、字体等样式
-            </div>
-          </div>
-        </li>
-        <li
-          class="acss-1ehfz5v"
-        >
-          <div
-            class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
-          >
-            <div
-              class="ant-flex css-var-test-id ant-flex-align-center ant-flex-justify-space-between ant-flex-gap-small"
-            >
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <h5
-                  class="ant-typography css-var-test-id"
-                  style="margin: 0px;"
-                >
-                  description
-                </h5>
-                <span
-                  class="ant-tag ant-tag-filled ant-tag-blue css-var-test-id"
-                >
-                  6.0.0
-                </span>
-              </div>
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="pushpin"
-                      class="anticon anticon-pushpin"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="pushpin"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M878.3 392.1L631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3a33.23 33.23 0 00-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 00-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8zM666.2 549.3l-24.5 24.5 3.8 34.4a259.92 259.92 0 01-30.4 153.9L262 408.8c12.9-7.1 26.3-13.1 40.3-17.9 27.2-9.4 55.7-14.1 84.7-14.1 9.6 0 19.3.5 28.9 1.6l34.4 3.8 24.5-24.5L608.5 224 800 415.5 666.2 549.3z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="info-circle"
-                      class="anticon anticon-info-circle"
-                      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 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-                        />
-                        <path
-                          d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ant-typography css-var-test-id"
-              style="margin: 0px; font-size: 12px;"
-            >
-              描述元素，包含描述文字的字体大小、行高等排版样式
-            </div>
-          </div>
-        </li>
-        <li
-          class="acss-1ehfz5v"
-        >
-          <div
-            class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
-          >
-            <div
-              class="ant-flex css-var-test-id ant-flex-align-center ant-flex-justify-space-between ant-flex-gap-small"
-            >
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <h5
-                  class="ant-typography css-var-test-id"
-                  style="margin: 0px;"
-                >
-                  actions
-                </h5>
-                <span
-                  class="ant-tag ant-tag-filled ant-tag-blue css-var-test-id"
-                >
-                  6.0.0
-                </span>
-              </div>
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="pushpin"
-                      class="anticon anticon-pushpin"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="pushpin"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M878.3 392.1L631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3a33.23 33.23 0 00-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 00-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8zM666.2 549.3l-24.5 24.5 3.8 34.4a259.92 259.92 0 01-30.4 153.9L262 408.8c12.9-7.1 26.3-13.1 40.3-17.9 27.2-9.4 55.7-14.1 84.7-14.1 9.6 0 19.3.5 28.9 1.6l34.4 3.8 24.5-24.5L608.5 224 800 415.5 666.2 549.3z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="info-circle"
-                      class="anticon anticon-info-circle"
-                      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 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-                        />
-                        <path
-                          d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ant-typography css-var-test-id"
-              style="margin: 0px; font-size: 12px;"
-            >
-              操作组元素，包含操作按钮的布局和间距样式
-            </div>
-          </div>
-        </li>
-        <li
-          class="acss-1ehfz5v"
-        >
-          <div
-            class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
-          >
-            <div
-              class="ant-flex css-var-test-id ant-flex-align-center ant-flex-justify-space-between ant-flex-gap-small"
-            >
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <h5
-                  class="ant-typography css-var-test-id"
-                  style="margin: 0px;"
-                >
-                  close
-                </h5>
-                <span
-                  class="ant-tag ant-tag-filled ant-tag-blue css-var-test-id"
-                >
-                  6.1.0
-                </span>
-              </div>
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="pushpin"
-                      class="anticon anticon-pushpin"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="pushpin"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M878.3 392.1L631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3a33.23 33.23 0 00-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 00-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8zM666.2 549.3l-24.5 24.5 3.8 34.4a259.92 259.92 0 01-30.4 153.9L262 408.8c12.9-7.1 26.3-13.1 40.3-17.9 27.2-9.4 55.7-14.1 84.7-14.1 9.6 0 19.3.5 28.9 1.6l34.4 3.8 24.5-24.5L608.5 224 800 415.5 666.2 549.3z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="info-circle"
-                      class="anticon anticon-info-circle"
-                      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 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-                        />
-                        <path
-                          d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ant-typography css-var-test-id"
-              style="margin: 0px; font-size: 12px;"
-            >
-              关闭按钮元素，包含按钮的基础样式
-            </div>
-          </div>
-        </li>
-      </ul>
-    </div>
-  </div>
-</div>
-`;
--- a/components/alert/tests/demo-semantic.test.tsx
+++ b/components/alert/tests/demo-semantic.test.tsx
@@ -1,3 +0,0 @@
-import { semanticDemoTest } from '../../../tests/shared/demoTest';
-
-semanticDemoTest('alert');
--- a/components/anchor/tests/snapshots/demo-semantic.test.tsx.snap
+++ b/components/anchor/tests/snapshots/demo-semantic.test.tsx.snap
@@ -1,483 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`renders components/anchor/demo/_semantic.tsx correctly 1`] = `
-<div
-  class="acss-1ucck97"
->
-  <div
-    class="ant-row css-var-test-id"
-  >
-    <div
-      class="ant-col ant-col-16 acss-my3sst css-var-test-id"
-    >
-      <div
-        class="css-var-test-id ant-anchor-css-var ant-anchor-wrapper semantic-mark-root"
-        style="max-height: 100vh;"
-      >
-        <div
-          class="ant-anchor ant-anchor-fixed"
-        >
-          <span
-            class="ant-anchor-ink semantic-mark-indicator"
-          />
-          <div
-            class="ant-anchor-link semantic-mark-item"
-          >
-            <a
-              class="ant-anchor-link-title semantic-mark-itemTitle"
-              href="#api"
-              title="API"
-            >
-              API
-            </a>
-            <div
-              class="ant-anchor-link semantic-mark-item"
-            >
-              <a
-                class="ant-anchor-link-title semantic-mark-itemTitle"
-                href="#anchor-props"
-                title="Anchor Props"
-              >
-                Anchor Props
-              </a>
-            </div>
-            <div
-              class="ant-anchor-link semantic-mark-item"
-            >
-              <a
-                class="ant-anchor-link-title semantic-mark-itemTitle"
-                href="#link-props"
-                title="Link Props"
-              >
-                Link Props
-              </a>
-            </div>
-          </div>
-          <div
-            class="ant-anchor-link semantic-mark-item"
-          >
-            <a
-              class="ant-anchor-link-title semantic-mark-itemTitle"
-              href="#anchor-demo-basic"
-              title="Basic demo"
-            >
-              Basic demo
-            </a>
-          </div>
-          <div
-            class="ant-anchor-link semantic-mark-item"
-          >
-            <a
-              class="ant-anchor-link-title semantic-mark-itemTitle"
-              href="#anchor-demo-static"
-              title="Static demo"
-            >
-              Static demo
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="ant-col ant-col-8 css-var-test-id"
-    >
-      <ul
-        class="acss-1ry21g5"
-      >
-        <li
-          class="acss-1ehfz5v"
-        >
-          <div
-            class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
-          >
-            <div
-              class="ant-flex css-var-test-id ant-flex-align-center ant-flex-justify-space-between ant-flex-gap-small"
-            >
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <h5
-                  class="ant-typography css-var-test-id"
-                  style="margin: 0px;"
-                >
-                  root
-                </h5>
-                <span
-                  class="ant-tag ant-tag-filled ant-tag-blue css-var-test-id"
-                >
-                  6.0.0
-                </span>
-              </div>
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="pushpin"
-                      class="anticon anticon-pushpin"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="pushpin"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M878.3 392.1L631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3a33.23 33.23 0 00-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 00-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8zM666.2 549.3l-24.5 24.5 3.8 34.4a259.92 259.92 0 01-30.4 153.9L262 408.8c12.9-7.1 26.3-13.1 40.3-17.9 27.2-9.4 55.7-14.1 84.7-14.1 9.6 0 19.3.5 28.9 1.6l34.4 3.8 24.5-24.5L608.5 224 800 415.5 666.2 549.3z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="info-circle"
-                      class="anticon anticon-info-circle"
-                      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 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-                        />
-                        <path
-                          d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ant-typography css-var-test-id"
-              style="margin: 0px; font-size: 12px;"
-            >
-              根元素，包含布局定位、内边距、边距、背景色等基础样式
-            </div>
-          </div>
-        </li>
-        <li
-          class="acss-1ehfz5v"
-        >
-          <div
-            class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
-          >
-            <div
-              class="ant-flex css-var-test-id ant-flex-align-center ant-flex-justify-space-between ant-flex-gap-small"
-            >
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <h5
-                  class="ant-typography css-var-test-id"
-                  style="margin: 0px;"
-                >
-                  item
-                </h5>
-                <span
-                  class="ant-tag ant-tag-filled ant-tag-blue css-var-test-id"
-                >
-                  6.0.0
-                </span>
-              </div>
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="pushpin"
-                      class="anticon anticon-pushpin"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="pushpin"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M878.3 392.1L631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3a33.23 33.23 0 00-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 00-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8zM666.2 549.3l-24.5 24.5 3.8 34.4a259.92 259.92 0 01-30.4 153.9L262 408.8c12.9-7.1 26.3-13.1 40.3-17.9 27.2-9.4 55.7-14.1 84.7-14.1 9.6 0 19.3.5 28.9 1.6l34.4 3.8 24.5-24.5L608.5 224 800 415.5 666.2 549.3z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="info-circle"
-                      class="anticon anticon-info-circle"
-                      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 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-                        />
-                        <path
-                          d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ant-typography css-var-test-id"
-              style="margin: 0px; font-size: 12px;"
-            >
-              链接项元素，包含内边距、文字颜色、悬停状态、过渡动画等样式
-            </div>
-          </div>
-        </li>
-        <li
-          class="acss-1ehfz5v"
-        >
-          <div
-            class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
-          >
-            <div
-              class="ant-flex css-var-test-id ant-flex-align-center ant-flex-justify-space-between ant-flex-gap-small"
-            >
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <h5
-                  class="ant-typography css-var-test-id"
-                  style="margin: 0px;"
-                >
-                  itemTitle
-                </h5>
-                <span
-                  class="ant-tag ant-tag-filled ant-tag-blue css-var-test-id"
-                >
-                  6.0.0
-                </span>
-              </div>
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="pushpin"
-                      class="anticon anticon-pushpin"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="pushpin"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M878.3 392.1L631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3a33.23 33.23 0 00-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 00-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8zM666.2 549.3l-24.5 24.5 3.8 34.4a259.92 259.92 0 01-30.4 153.9L262 408.8c12.9-7.1 26.3-13.1 40.3-17.9 27.2-9.4 55.7-14.1 84.7-14.1 9.6 0 19.3.5 28.9 1.6l34.4 3.8 24.5-24.5L608.5 224 800 415.5 666.2 549.3z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="info-circle"
-                      class="anticon anticon-info-circle"
-                      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 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-                        />
-                        <path
-                          d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ant-typography css-var-test-id"
-              style="margin: 0px; font-size: 12px;"
-            >
-              标题文字元素，包含字体样式、颜色变化、文本装饰、过渡效果等样式
-            </div>
-          </div>
-        </li>
-        <li
-          class="acss-1ehfz5v"
-        >
-          <div
-            class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
-          >
-            <div
-              class="ant-flex css-var-test-id ant-flex-align-center ant-flex-justify-space-between ant-flex-gap-small"
-            >
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <h5
-                  class="ant-typography css-var-test-id"
-                  style="margin: 0px;"
-                >
-                  indicator
-                </h5>
-                <span
-                  class="ant-tag ant-tag-filled ant-tag-blue css-var-test-id"
-                >
-                  6.0.0
-                </span>
-              </div>
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="pushpin"
-                      class="anticon anticon-pushpin"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="pushpin"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M878.3 392.1L631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3a33.23 33.23 0 00-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 00-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8zM666.2 549.3l-24.5 24.5 3.8 34.4a259.92 259.92 0 01-30.4 153.9L262 408.8c12.9-7.1 26.3-13.1 40.3-17.9 27.2-9.4 55.7-14.1 84.7-14.1 9.6 0 19.3.5 28.9 1.6l34.4 3.8 24.5-24.5L608.5 224 800 415.5 666.2 549.3z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="info-circle"
-                      class="anticon anticon-info-circle"
-                      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 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-                        />
-                        <path
-                          d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ant-typography css-var-test-id"
-              style="margin: 0px; font-size: 12px;"
-            >
-              指示器元素，包含宽度、高度、背景色、位置变化、过渡动画等样式
-            </div>
-          </div>
-        </li>
-      </ul>
-    </div>
-  </div>
-</div>
-`;
--- a/components/anchor/tests/demo-semantic.test.tsx
+++ b/components/anchor/tests/demo-semantic.test.tsx
@@ -1,3 +0,0 @@
-import { semanticDemoTest } from '../../../tests/shared/demoTest';
-
-semanticDemoTest('anchor');
--- a/components/auto-complete/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/auto-complete/tests/snapshots/demo-extend.test.ts.snap
@@ -100,10 +100,10 @@ exports[`renders components/auto-complete/demo/AutoComplete-and-Select.tsx exten
                    stroke="#d9d9d9"
                  >
                    <path
-                      d="M55 12.8 44.9 1.3Q44 0 42.9 0H21.1q-1.2 0-2 1.3L9 12.8V22h46z"
+                      d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
                    />
                    <path
-                      d="M41.6 16c0-1.7 1-3 2.2-3H55v18.1c0 2.2-1.3 3.9-3 3.9H12c-1.7 0-3-1.7-3-3.9V13h11.2c1.2 0 2.2 1.3 2.2 3s1 2.9 2.2 2.9h14.8c1.2 0 2.2-1.4 2.2-3"
+                      d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
                      fill="#fafafa"
                    />
                  </g>
@@ -254,10 +254,10 @@ exports[`renders components/auto-complete/demo/AutoComplete-and-Select.tsx exten
                    stroke="#d9d9d9"
                  >
                    <path
-                      d="M55 12.8 44.9 1.3Q44 0 42.9 0H21.1q-1.2 0-2 1.3L9 12.8V22h46z"
+                      d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
                    />
                    <path
-                      d="M41.6 16c0-1.7 1-3 2.2-3H55v18.1c0 2.2-1.3 3.9-3 3.9H12c-1.7 0-3-1.7-3-3.9V13h11.2c1.2 0 2.2 1.3 2.2 3s1 2.9 2.2 2.9h14.8c1.2 0 2.2-1.4 2.2-3"
+                      d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
                      fill="#fafafa"
                    />
                  </g>
@@ -408,10 +408,10 @@ exports[`renders components/auto-complete/demo/AutoComplete-and-Select.tsx exten
                    stroke="#d9d9d9"
                  >
                    <path
-                      d="M55 12.8 44.9 1.3Q44 0 42.9 0H21.1q-1.2 0-2 1.3L9 12.8V22h46z"
+                      d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
                    />
                    <path
-                      d="M41.6 16c0-1.7 1-3 2.2-3H55v18.1c0 2.2-1.3 3.9-3 3.9H12c-1.7 0-3-1.7-3-3.9V13h11.2c1.2 0 2.2 1.3 2.2 3s1 2.9 2.2 2.9h14.8c1.2 0 2.2-1.4 2.2-3"
+                      d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
                      fill="#fafafa"
                    />
                  </g>
@@ -1221,10 +1221,10 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
                            stroke="#d9d9d9"
                          >
                            <path
-                              d="M55 12.8 44.9 1.3Q44 0 42.9 0H21.1q-1.2 0-2 1.3L9 12.8V22h46z"
+                              d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
                            />
                            <path
-                              d="M41.6 16c0-1.7 1-3 2.2-3H55v18.1c0 2.2-1.3 3.9-3 3.9H12c-1.7 0-3-1.7-3-3.9V13h11.2c1.2 0 2.2 1.3 2.2 3s1 2.9 2.2 2.9h14.8c1.2 0 2.2-1.4 2.2-3"
+                              d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
                              fill="#fafafa"
                            />
                          </g>
@@ -1362,10 +1362,10 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
                              stroke="#d9d9d9"
                            >
                              <path
-                                d="M55 12.8 44.9 1.3Q44 0 42.9 0H21.1q-1.2 0-2 1.3L9 12.8V22h46z"
+                                d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
                              />
                              <path
-                                d="M41.6 16c0-1.7 1-3 2.2-3H55v18.1c0 2.2-1.3 3.9-3 3.9H12c-1.7 0-3-1.7-3-3.9V13h11.2c1.2 0 2.2 1.3 2.2 3s1 2.9 2.2 2.9h14.8c1.2 0 2.2-1.4 2.2-3"
+                                d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
                                fill="#fafafa"
                              />
                            </g>
@@ -1631,10 +1631,10 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
                              stroke="#d9d9d9"
                            >
                              <path
-                                d="M55 12.8 44.9 1.3Q44 0 42.9 0H21.1q-1.2 0-2 1.3L9 12.8V22h46z"
+                                d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
                              />
                              <path
-                                d="M41.6 16c0-1.7 1-3 2.2-3H55v18.1c0 2.2-1.3 3.9-3 3.9H12c-1.7 0-3-1.7-3-3.9V13h11.2c1.2 0 2.2 1.3 2.2 3s1 2.9 2.2 2.9h14.8c1.2 0 2.2-1.4 2.2-3"
+                                d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
                                fill="#fafafa"
                              />
                            </g>
@@ -1835,10 +1835,10 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
                              stroke="#d9d9d9"
                            >
                              <path
-                                d="M55 12.8 44.9 1.3Q44 0 42.9 0H21.1q-1.2 0-2 1.3L9 12.8V22h46z"
+                                d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
                              />
                              <path
-                                d="M41.6 16c0-1.7 1-3 2.2-3H55v18.1c0 2.2-1.3 3.9-3 3.9H12c-1.7 0-3-1.7-3-3.9V13h11.2c1.2 0 2.2 1.3 2.2 3s1 2.9 2.2 2.9h14.8c1.2 0 2.2-1.4 2.2-3"
+                                d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
                                fill="#fafafa"
                              />
                            </g>
@@ -2044,10 +2044,10 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
                              stroke="#d9d9d9"
                            >
                              <path
-                                d="M55 12.8 44.9 1.3Q44 0 42.9 0H21.1q-1.2 0-2 1.3L9 12.8V22h46z"
+                                d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
                              />
                              <path
-                                d="M41.6 16c0-1.7 1-3 2.2-3H55v18.1c0 2.2-1.3 3.9-3 3.9H12c-1.7 0-3-1.7-3-3.9V13h11.2c1.2 0 2.2 1.3 2.2 3s1 2.9 2.2 2.9h14.8c1.2 0 2.2-1.4 2.2-3"
+                                d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
                                fill="#fafafa"
                              />
                            </g>
--- a/components/auto-complete/tests/snapshots/demo-semantic.test.tsx.snap
+++ b/components/auto-complete/tests/snapshots/demo-semantic.test.tsx.snap
@@ -1,987 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`renders components/auto-complete/demo/_semantic.tsx correctly 1`] = `
-<div
-  class="acss-1ucck97"
->
-  <div
-    class="ant-row css-var-test-id"
-  >
-    <div
-      class="ant-col ant-col-16 acss-my3sst css-var-test-id"
-      style="align-items: flex-start;"
-    >
-      <div
-        class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-middle ant-flex-vertical"
-        style="position: absolute; margin-bottom: 80px;"
-      >
-        <div
-          class="ant-select ant-select-outlined ant-select-auto-complete semantic-mark-root css-var-test-id ant-select-css-var ant-select-single ant-select-open ant-select-show-search"
-          style="width: 200px;"
-        >
-          <div
-            class="ant-select-prefix semantic-mark-prefix"
-          >
-            prefix
-          </div>
-          <div
-            class="ant-select-content semantic-mark-content"
-          >
-            <div
-              class="ant-select-placeholder semantic-mark-placeholder"
-              style="visibility: visible;"
-            >
-              Please select
-            </div>
-            <input
-              aria-activedescendant="test-id_list_-1"
-              aria-autocomplete="list"
-              aria-controls="test-id_list"
-              aria-expanded="true"
-              aria-haspopup="listbox"
-              aria-owns="test-id_list"
-              autocomplete="off"
-              class="ant-select-input semantic-mark-input"
-              id="test-id"
-              role="combobox"
-              type="text"
-              value=""
-            />
-          </div>
-        </div>
-        <div
-          class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up semantic-mark-popup-root css-var-test-id ant-select-css-var ant-select-dropdown-placement-bottomLeft"
-          style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
-        >
-          <div>
-            <div
-              id="test-id_list"
-              role="listbox"
-              style="height: 0px; width: 0px; overflow: hidden;"
-            >
-              <div
-                aria-label="aojunhao123"
-                aria-selected="false"
-                id="test-id_list_0"
-                role="option"
-              >
-                aojunhao123
-              </div>
-            </div>
-            <div
-              class="rc-virtual-list semantic-mark-popup-list"
-              style="position: relative;"
-            >
-              <div
-                class="rc-virtual-list-holder"
-                style="max-height: 256px; overflow-y: auto; overflow-anchor: none;"
-              >
-                <div>
-                  <div
-                    class="rc-virtual-list-holder-inner"
-                    style="display: flex; flex-direction: column;"
-                  >
-                    <div
-                      class="ant-select-item ant-select-item-option semantic-mark-popup-listItem"
-                      title="aojunhao123"
-                    >
-                      <div
-                        class="ant-select-item-option-content"
-                      >
-                        aojunhao123
-                      </div>
-                      <span
-                        aria-hidden="true"
-                        class="ant-select-item-option-state"
-                        style="user-select: none;"
-                        unselectable="on"
-                      />
-                    </div>
-                    <div
-                      class="ant-select-item ant-select-item-option semantic-mark-popup-listItem"
-                      title="thinkasany"
-                    >
-                      <div
-                        class="ant-select-item-option-content"
-                      >
-                        thinkasany
-                      </div>
-                      <span
-                        aria-hidden="true"
-                        class="ant-select-item-option-state"
-                        style="user-select: none;"
-                        unselectable="on"
-                      />
-                    </div>
-                    <div
-                      class="ant-select-item ant-select-item-option semantic-mark-popup-listItem"
-                      title="meet-student"
-                    >
-                      <div
-                        class="ant-select-item-option-content"
-                      >
-                        meet-student
-                      </div>
-                      <span
-                        aria-hidden="true"
-                        class="ant-select-item-option-state"
-                        style="user-select: none;"
-                        unselectable="on"
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="ant-col ant-col-8 css-var-test-id"
-    >
-      <ul
-        class="acss-1ry21g5"
-      >
-        <li
-          class="acss-1ehfz5v"
-        >
-          <div
-            class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
-          >
-            <div
-              class="ant-flex css-var-test-id ant-flex-align-center ant-flex-justify-space-between ant-flex-gap-small"
-            >
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <h5
-                  class="ant-typography css-var-test-id"
-                  style="margin: 0px;"
-                >
-                  root
-                </h5>
-              </div>
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="pushpin"
-                      class="anticon anticon-pushpin"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="pushpin"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M878.3 392.1L631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3a33.23 33.23 0 00-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 00-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8zM666.2 549.3l-24.5 24.5 3.8 34.4a259.92 259.92 0 01-30.4 153.9L262 408.8c12.9-7.1 26.3-13.1 40.3-17.9 27.2-9.4 55.7-14.1 84.7-14.1 9.6 0 19.3.5 28.9 1.6l34.4 3.8 24.5-24.5L608.5 224 800 415.5 666.2 549.3z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="info-circle"
-                      class="anticon anticon-info-circle"
-                      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 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-                        />
-                        <path
-                          d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ant-typography css-var-test-id"
-              style="margin: 0px; font-size: 12px;"
-            >
-              根元素，包含相对定位、行内 flex 布局、光标样式、过渡动画、边框等选择器容器的基础样式
-            </div>
-          </div>
-        </li>
-        <li
-          class="acss-1ehfz5v"
-        >
-          <div
-            class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
-          >
-            <div
-              class="ant-flex css-var-test-id ant-flex-align-center ant-flex-justify-space-between ant-flex-gap-small"
-            >
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <h5
-                  class="ant-typography css-var-test-id"
-                  style="margin: 0px;"
-                >
-                  prefix
-                </h5>
-              </div>
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="pushpin"
-                      class="anticon anticon-pushpin"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="pushpin"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M878.3 392.1L631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3a33.23 33.23 0 00-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 00-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8zM666.2 549.3l-24.5 24.5 3.8 34.4a259.92 259.92 0 01-30.4 153.9L262 408.8c12.9-7.1 26.3-13.1 40.3-17.9 27.2-9.4 55.7-14.1 84.7-14.1 9.6 0 19.3.5 28.9 1.6l34.4 3.8 24.5-24.5L608.5 224 800 415.5 666.2 549.3z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="info-circle"
-                      class="anticon anticon-info-circle"
-                      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 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-                        />
-                        <path
-                          d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ant-typography css-var-test-id"
-              style="margin: 0px; font-size: 12px;"
-            >
-              前缀元素，包含前缀内容的布局和样式
-            </div>
-          </div>
-        </li>
-        <li
-          class="acss-1ehfz5v"
-        >
-          <div
-            class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
-          >
-            <div
-              class="ant-flex css-var-test-id ant-flex-align-center ant-flex-justify-space-between ant-flex-gap-small"
-            >
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <h5
-                  class="ant-typography css-var-test-id"
-                  style="margin: 0px;"
-                >
-                  content
-                </h5>
-              </div>
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="pushpin"
-                      class="anticon anticon-pushpin"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="pushpin"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M878.3 392.1L631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3a33.23 33.23 0 00-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 00-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8zM666.2 549.3l-24.5 24.5 3.8 34.4a259.92 259.92 0 01-30.4 153.9L262 408.8c12.9-7.1 26.3-13.1 40.3-17.9 27.2-9.4 55.7-14.1 84.7-14.1 9.6 0 19.3.5 28.9 1.6l34.4 3.8 24.5-24.5L608.5 224 800 415.5 666.2 549.3z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="info-circle"
-                      class="anticon anticon-info-circle"
-                      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 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-                        />
-                        <path
-                          d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ant-typography css-var-test-id"
-              style="margin: 0px; font-size: 12px;"
-            >
-              多选容器，包含已选项的布局、间距、换行相关样式
-            </div>
-          </div>
-        </li>
-        <li
-          class="acss-1ehfz5v"
-        >
-          <div
-            class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
-          >
-            <div
-              class="ant-flex css-var-test-id ant-flex-align-center ant-flex-justify-space-between ant-flex-gap-small"
-            >
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <h5
-                  class="ant-typography css-var-test-id"
-                  style="margin: 0px;"
-                >
-                  placeholder
-                </h5>
-              </div>
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="pushpin"
-                      class="anticon anticon-pushpin"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="pushpin"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M878.3 392.1L631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3a33.23 33.23 0 00-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 00-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8zM666.2 549.3l-24.5 24.5 3.8 34.4a259.92 259.92 0 01-30.4 153.9L262 408.8c12.9-7.1 26.3-13.1 40.3-17.9 27.2-9.4 55.7-14.1 84.7-14.1 9.6 0 19.3.5 28.9 1.6l34.4 3.8 24.5-24.5L608.5 224 800 415.5 666.2 549.3z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="info-circle"
-                      class="anticon anticon-info-circle"
-                      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 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-                        />
-                        <path
-                          d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ant-typography css-var-test-id"
-              style="margin: 0px; font-size: 12px;"
-            >
-              占位符元素，包含占位符文本的字体样式和颜色
-            </div>
-          </div>
-        </li>
-        <li
-          class="acss-1ehfz5v"
-        >
-          <div
-            class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
-          >
-            <div
-              class="ant-flex css-var-test-id ant-flex-align-center ant-flex-justify-space-between ant-flex-gap-small"
-            >
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <h5
-                  class="ant-typography css-var-test-id"
-                  style="margin: 0px;"
-                >
-                  clear
-                </h5>
-              </div>
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="pushpin"
-                      class="anticon anticon-pushpin"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="pushpin"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M878.3 392.1L631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3a33.23 33.23 0 00-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 00-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8zM666.2 549.3l-24.5 24.5 3.8 34.4a259.92 259.92 0 01-30.4 153.9L262 408.8c12.9-7.1 26.3-13.1 40.3-17.9 27.2-9.4 55.7-14.1 84.7-14.1 9.6 0 19.3.5 28.9 1.6l34.4 3.8 24.5-24.5L608.5 224 800 415.5 666.2 549.3z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="info-circle"
-                      class="anticon anticon-info-circle"
-                      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 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-                        />
-                        <path
-                          d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ant-typography css-var-test-id"
-              style="margin: 0px; font-size: 12px;"
-            >
-              清除按钮元素，包含清除按钮的布局、样式和交互效果
-            </div>
-          </div>
-        </li>
-        <li
-          class="acss-1ehfz5v"
-        >
-          <div
-            class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
-          >
-            <div
-              class="ant-flex css-var-test-id ant-flex-align-center ant-flex-justify-space-between ant-flex-gap-small"
-            >
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <h5
-                  class="ant-typography css-var-test-id"
-                  style="margin: 0px;"
-                >
-                  input
-                </h5>
-              </div>
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="pushpin"
-                      class="anticon anticon-pushpin"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="pushpin"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M878.3 392.1L631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3a33.23 33.23 0 00-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 00-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8zM666.2 549.3l-24.5 24.5 3.8 34.4a259.92 259.92 0 01-30.4 153.9L262 408.8c12.9-7.1 26.3-13.1 40.3-17.9 27.2-9.4 55.7-14.1 84.7-14.1 9.6 0 19.3.5 28.9 1.6l34.4 3.8 24.5-24.5L608.5 224 800 415.5 666.2 549.3z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="info-circle"
-                      class="anticon anticon-info-circle"
-                      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 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-                        />
-                        <path
-                          d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ant-typography css-var-test-id"
-              style="margin: 0px; font-size: 12px;"
-            >
-              输入框元素，包含搜索输入框的样式、光标控制、字体继承等搜索相关样式，去除了边框样式
-            </div>
-          </div>
-        </li>
-        <li
-          class="acss-1ehfz5v"
-        >
-          <div
-            class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
-          >
-            <div
-              class="ant-flex css-var-test-id ant-flex-align-center ant-flex-justify-space-between ant-flex-gap-small"
-            >
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <h5
-                  class="ant-typography css-var-test-id"
-                  style="margin: 0px;"
-                >
-                  popup.root
-                </h5>
-              </div>
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="pushpin"
-                      class="anticon anticon-pushpin"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="pushpin"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M878.3 392.1L631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3a33.23 33.23 0 00-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 00-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8zM666.2 549.3l-24.5 24.5 3.8 34.4a259.92 259.92 0 01-30.4 153.9L262 408.8c12.9-7.1 26.3-13.1 40.3-17.9 27.2-9.4 55.7-14.1 84.7-14.1 9.6 0 19.3.5 28.9 1.6l34.4 3.8 24.5-24.5L608.5 224 800 415.5 666.2 549.3z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="info-circle"
-                      class="anticon anticon-info-circle"
-                      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 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-                        />
-                        <path
-                          d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ant-typography css-var-test-id"
-              style="margin: 0px; font-size: 12px;"
-            >
-              弹出菜单元素，包含弹出层的定位、层级、背景、边框、阴影等弹出容器样式
-            </div>
-          </div>
-        </li>
-        <li
-          class="acss-1ehfz5v"
-        >
-          <div
-            class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
-          >
-            <div
-              class="ant-flex css-var-test-id ant-flex-align-center ant-flex-justify-space-between ant-flex-gap-small"
-            >
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <h5
-                  class="ant-typography css-var-test-id"
-                  style="margin: 0px;"
-                >
-                  popup.list
-                </h5>
-              </div>
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="pushpin"
-                      class="anticon anticon-pushpin"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="pushpin"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M878.3 392.1L631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3a33.23 33.23 0 00-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 00-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8zM666.2 549.3l-24.5 24.5 3.8 34.4a259.92 259.92 0 01-30.4 153.9L262 408.8c12.9-7.1 26.3-13.1 40.3-17.9 27.2-9.4 55.7-14.1 84.7-14.1 9.6 0 19.3.5 28.9 1.6l34.4 3.8 24.5-24.5L608.5 224 800 415.5 666.2 549.3z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="info-circle"
-                      class="anticon anticon-info-circle"
-                      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 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-                        />
-                        <path
-                          d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ant-typography css-var-test-id"
-              style="margin: 0px; font-size: 12px;"
-            >
-              弹出菜单列表元素，包含选项列表的布局、滚动、最大高度等列表容器样式
-            </div>
-          </div>
-        </li>
-        <li
-          class="acss-1ehfz5v"
-        >
-          <div
-            class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
-          >
-            <div
-              class="ant-flex css-var-test-id ant-flex-align-center ant-flex-justify-space-between ant-flex-gap-small"
-            >
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <h5
-                  class="ant-typography css-var-test-id"
-                  style="margin: 0px;"
-                >
-                  popup.listItem
-                </h5>
-              </div>
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="pushpin"
-                      class="anticon anticon-pushpin"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="pushpin"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M878.3 392.1L631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3a33.23 33.23 0 00-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 00-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8zM666.2 549.3l-24.5 24.5 3.8 34.4a259.92 259.92 0 01-30.4 153.9L262 408.8c12.9-7.1 26.3-13.1 40.3-17.9 27.2-9.4 55.7-14.1 84.7-14.1 9.6 0 19.3.5 28.9 1.6l34.4 3.8 24.5-24.5L608.5 224 800 415.5 666.2 549.3z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="info-circle"
-                      class="anticon anticon-info-circle"
-                      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 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-                        />
-                        <path
-                          d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ant-typography css-var-test-id"
-              style="margin: 0px; font-size: 12px;"
-            >
-              弹出菜单条目元素，包含选项项的内边距、悬浮效果、选中状态、禁用状态等选项交互样式
-            </div>
-          </div>
-        </li>
-      </ul>
-    </div>
-  </div>
-</div>
-`;
--- a/components/auto-complete/tests/demo-semantic.test.tsx
+++ b/components/auto-complete/tests/demo-semantic.test.tsx
@@ -1,3 +0,0 @@
-import { semanticDemoTest } from '../../../tests/shared/demoTest';
-
-semanticDemoTest('auto-complete');
--- a/components/auto-complete/index.tsx
+++ b/components/auto-complete/index.tsx
@@ -20,7 +20,6 @@ const PurePanel = genPurePanel(RefAutoComplete, 'popupAlign', (props: any) =>
 );

 type CompoundedComponent = typeof RefAutoComplete & {
-  /** @deprecated Please use `options` instead. */
  Option: typeof Option;
  _InternalPanelDoNotUseOrYouWillBeFired: typeof PurePanel;
 };
--- a/components/avatar/Avatar.tsx
+++ b/components/avatar/Avatar.tsx
@@ -18,7 +18,7 @@ export interface AvatarProps {
  /** Shape of avatar, options: `circle`, `square` */
  shape?: 'circle' | 'square';
  /*
-   * Size of avatar, options: `large`, `small`, `default`
+   * Size of avatar, options: `large`, `medium`, `small`
   * or a custom number size
   * */
  size?: AvatarSize;
@@ -111,7 +111,7 @@ const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>((props, ref) => {
    }
  };

-  const size = useSize((ctxSize) => customSize ?? avatarCtx?.size ?? ctxSize ?? 'default');
+  const size = useSize((ctxSize) => customSize ?? avatarCtx?.size ?? ctxSize ?? 'medium');

  const needResponsive = Object.keys(typeof size === 'object' ? size || {} : {}).some((key) =>
    ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].includes(key),
--- a/components/avatar/AvatarContext.ts
+++ b/components/avatar/AvatarContext.ts
@@ -1,8 +1,12 @@
 import * as React from 'react';

 import type { ScreenSizeMap } from '../_util/responsiveObserver';
+import type { SizeType } from '../config-provider/SizeContext';

-export type AvatarSize = 'large' | 'small' | 'default' | number | ScreenSizeMap;
+/**
+ * 'default' is deprecated and will be removed in v7, please use `medium` instead.
+ */
+export type AvatarSize = SizeType | 'default' | number | ScreenSizeMap;

 export interface AvatarContextType {
  size?: AvatarSize;
--- a/components/avatar/AvatarGroup.tsx
+++ b/components/avatar/AvatarGroup.tsx
@@ -44,7 +44,7 @@ export interface AvatarGroupProps {
    popover?: PopoverProps;
  };
  /*
-   * Size of avatar, options: `large`, `small`, `default`
+   * Size of avatar, options: `large`, `medium`, `small`
   * or a custom number size
   * */
  size?: AvatarSize;
--- a/components/avatar/demo/toggle-debug.tsx
+++ b/components/avatar/demo/toggle-debug.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Avatar, Button, Space } from 'antd';

-type SizeType = 'large' | 'small' | 'default' | number;
+type SizeType = 'large' | 'small' | 'medium' | number;

 const App: React.FC = () => {
  const [hide, setHide] = useState(true);
@@ -13,7 +13,7 @@ const App: React.FC = () => {
  };

  const toggleSize = () => {
-    const sizes = ['small', 'default', 'large'] as SizeType[];
+    const sizes = ['small', 'medium', 'large'] as SizeType[];
    let current = sizes.indexOf(size) + 1;
    if (current > 2) {
      current = 0;
--- a/components/avatar/index.en-US.md
+++ b/components/avatar/index.en-US.md
@@ -36,7 +36,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | gap | Letter type unit distance between left and right sides | number | 4 | 4.3.0 |
 | icon | Custom icon type for an icon avatar | ReactNode | - |  |
 | shape | The shape of avatar | `circle` \| `square` | `circle` |  |
-| size | The size of the avatar | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` | 4.7.0 |
+| size | The size of the avatar | number \| `large` \| `medium` \| `small` \| { xs: number, sm: number, ...} | `medium` | 4.7.0 |
 | src | The address of the image for an image avatar or image element | string \| ReactNode | - | ReactNode: 4.8.0 |
 | srcSet | A list of sources to use for different screen resolutions | string | - |  |
 | draggable | Whether the picture is allowed to be dragged | boolean \| `'true'` \| `'false'` | true |  |
@@ -50,7 +50,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | max | Set maximum display related configurations, Before `5.18.0` you can use [parameters](https://github.com/ant-design/ant-design/blob/9d134859becbdae5b9ce276f6d9af4264691d81f/components/avatar/group.tsx#L35-L38) | `{ count?: number; style?: CSSProperties; popover?: PopoverProps }` | - | 5.18.0 |
-| size | The size of the avatar | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` | 4.8.0 |
+| size | The size of the avatar | number \| `large` \| `medium` \| `small` \| { xs: number, sm: number, ...} | `medium` | 4.8.0 |
 | shape | The shape of the avatar | `circle` \| `square` | `circle` | 5.8.0 |

 ## Design Token
--- a/components/avatar/index.zh-CN.md
+++ b/components/avatar/index.zh-CN.md
@@ -41,7 +41,7 @@ group:
 | gap | 字符类型距离左右两侧边界单位像素 | number | 4 | 4.3.0 |
 | icon | 设置头像的自定义图标 | ReactNode | - |  |
 | shape | 指定头像的形状 | `circle` \| `square` | `circle` |  |
-| size | 设置头像的大小 | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` | 4.7.0 |
+| size | 设置头像的大小 | number \| `large` \| `medium` \| `small` \| { xs: number, sm: number, ...} | `medium` | 4.7.0 |
 | src | 图片类头像的资源地址或者图片元素 | string \| ReactNode | - | ReactNode: 4.8.0 |
 | srcSet | 设置图片类头像响应式资源地址 | string | - |  |
 | draggable | 图片是否允许拖动 | boolean \| `'true'` \| `'false'` | true |  |
@@ -55,7 +55,7 @@ group:
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | max | 设置最多显示相关配置，`5.18.0` 前可使用 [参数](https://github.com/ant-design/ant-design/blob/9d134859becbdae5b9ce276f6d9af4264691d81f/components/avatar/group.tsx#L35-L38) | `{ count?: number; style?: CSSProperties; popover?: PopoverProps }` | - | 5.18.0 |
-| size | 设置头像的大小 | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` | 4.8.0 |
+| size | 设置头像的大小 | number \| `large` \| `medium` \| `small` \| { xs: number, sm: number, ...} | `medium` | 4.8.0 |
 | shape | 设置头像的形状 | `circle` \| `square` | `circle` | 5.8.0 |

 ## 主题变量（Design Token）{#design-token}
--- a/components/badge/tests/snapshots/demo-semantic.test.tsx.snap
+++ b/components/badge/tests/snapshots/demo-semantic.test.tsx.snap
@@ -1,609 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`renders components/badge/demo/_semantic.tsx correctly 1`] = `
-<div
-  class="acss-1ucck97"
->
-  <div
-    class="ant-row css-var-test-id"
-  >
-    <div
-      class="ant-col ant-col-16 acss-my3sst css-var-test-id"
-    >
-      <span
-        class="ant-badge semantic-mark-root css-var-test-id"
-      >
-        <span
-          class="ant-avatar ant-avatar-lg ant-avatar-square css-var-test-id ant-avatar-css-var"
-        >
-          <span
-            class="ant-avatar-string"
-            style="-webkit-transform: scale(1); transform: scale(1);"
-          />
-        </span>
-        <sup
-          class="ant-scroll-number semantic-mark-indicator ant-badge-count"
-          data-show="true"
-          title="5"
-        >
-          <bdi>
-            <span
-              class="ant-scroll-number-only"
-              style="transition: none;"
-            >
-              <span
-                class="ant-scroll-number-only-unit current"
-              >
-                5
-              </span>
-            </span>
-          </bdi>
-        </sup>
-      </span>
-    </div>
-    <div
-      class="ant-col ant-col-8 css-var-test-id"
-    >
-      <ul
-        class="acss-1ry21g5"
-      >
-        <li
-          class="acss-1ehfz5v"
-        >
-          <div
-            class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
-          >
-            <div
-              class="ant-flex css-var-test-id ant-flex-align-center ant-flex-justify-space-between ant-flex-gap-small"
-            >
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <h5
-                  class="ant-typography css-var-test-id"
-                  style="margin: 0px;"
-                >
-                  root
-                </h5>
-                <span
-                  class="ant-tag ant-tag-filled ant-tag-blue css-var-test-id"
-                >
-                  5.7.0
-                </span>
-              </div>
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="pushpin"
-                      class="anticon anticon-pushpin"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="pushpin"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M878.3 392.1L631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3a33.23 33.23 0 00-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 00-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8zM666.2 549.3l-24.5 24.5 3.8 34.4a259.92 259.92 0 01-30.4 153.9L262 408.8c12.9-7.1 26.3-13.1 40.3-17.9 27.2-9.4 55.7-14.1 84.7-14.1 9.6 0 19.3.5 28.9 1.6l34.4 3.8 24.5-24.5L608.5 224 800 415.5 666.2 549.3z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="info-circle"
-                      class="anticon anticon-info-circle"
-                      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 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-                        />
-                        <path
-                          d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ant-typography css-var-test-id"
-              style="margin: 0px; font-size: 12px;"
-            >
-              根元素，包含相对定位、行内块布局、适应内容宽度等基础布局样式
-            </div>
-          </div>
-        </li>
-        <li
-          class="acss-1ehfz5v"
-        >
-          <div
-            class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
-          >
-            <div
-              class="ant-flex css-var-test-id ant-flex-align-center ant-flex-justify-space-between ant-flex-gap-small"
-            >
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <h5
-                  class="ant-typography css-var-test-id"
-                  style="margin: 0px;"
-                >
-                  indicator
-                </h5>
-                <span
-                  class="ant-tag ant-tag-filled ant-tag-blue css-var-test-id"
-                >
-                  5.7.0
-                </span>
-              </div>
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="pushpin"
-                      class="anticon anticon-pushpin"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="pushpin"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M878.3 392.1L631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3a33.23 33.23 0 00-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 00-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8zM666.2 549.3l-24.5 24.5 3.8 34.4a259.92 259.92 0 01-30.4 153.9L262 408.8c12.9-7.1 26.3-13.1 40.3-17.9 27.2-9.4 55.7-14.1 84.7-14.1 9.6 0 19.3.5 28.9 1.6l34.4 3.8 24.5-24.5L608.5 224 800 415.5 666.2 549.3z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="info-circle"
-                      class="anticon anticon-info-circle"
-                      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 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-                        />
-                        <path
-                          d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ant-typography css-var-test-id"
-              style="margin: 0px; font-size: 12px;"
-            >
-              指示器元素，包含定位、层级、尺寸、颜色、字体、文本对齐、背景、圆角、阴影、过渡动画等完整的徽标样式
-            </div>
-          </div>
-        </li>
-      </ul>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`renders components/badge/demo/_semantic_ribbon.tsx correctly 1`] = `
-<div
-  class="acss-1ucck97"
->
-  <div
-    class="ant-row css-var-test-id"
-  >
-    <div
-      class="ant-col ant-col-16 acss-my3sst css-var-test-id"
-    >
-      <div
-        style="width: 100%;"
-      >
-        <div
-          class="ant-ribbon-wrapper css-var-test-id semantic-mark-root"
-        >
-          <div
-            class="ant-card ant-card-bordered ant-card-small css-var-test-id"
-          >
-            <div
-              class="ant-card-head"
-            >
-              <div
-                class="ant-card-head-wrapper"
-              >
-                <div
-                  class="ant-card-head-title"
-                >
-                  Pushes open the window
-                </div>
-              </div>
-            </div>
-            <div
-              class="ant-card-body"
-            >
-              and raises the spyglass.
-            </div>
-          </div>
-          <div
-            class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-pink semantic-mark-indicator"
-          >
-            <span
-              class="ant-ribbon-content semantic-mark-content"
-            >
-              Hippies
-            </span>
-            <div
-              class="ant-ribbon-corner"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="ant-col ant-col-8 css-var-test-id"
-    >
-      <ul
-        class="acss-1ry21g5"
-      >
-        <li
-          class="acss-1ehfz5v"
-        >
-          <div
-            class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
-          >
-            <div
-              class="ant-flex css-var-test-id ant-flex-align-center ant-flex-justify-space-between ant-flex-gap-small"
-            >
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <h5
-                  class="ant-typography css-var-test-id"
-                  style="margin: 0px;"
-                >
-                  root
-                </h5>
-                <span
-                  class="ant-tag ant-tag-filled ant-tag-blue css-var-test-id"
-                >
-                  6.0.0
-                </span>
-              </div>
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="pushpin"
-                      class="anticon anticon-pushpin"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="pushpin"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M878.3 392.1L631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3a33.23 33.23 0 00-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 00-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8zM666.2 549.3l-24.5 24.5 3.8 34.4a259.92 259.92 0 01-30.4 153.9L262 408.8c12.9-7.1 26.3-13.1 40.3-17.9 27.2-9.4 55.7-14.1 84.7-14.1 9.6 0 19.3.5 28.9 1.6l34.4 3.8 24.5-24.5L608.5 224 800 415.5 666.2 549.3z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="info-circle"
-                      class="anticon anticon-info-circle"
-                      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 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-                        />
-                        <path
-                          d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ant-typography css-var-test-id"
-              style="margin: 0px; font-size: 12px;"
-            >
-              根元素，设置相对定位和包装容器样式
-            </div>
-          </div>
-        </li>
-        <li
-          class="acss-1ehfz5v"
-        >
-          <div
-            class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
-          >
-            <div
-              class="ant-flex css-var-test-id ant-flex-align-center ant-flex-justify-space-between ant-flex-gap-small"
-            >
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <h5
-                  class="ant-typography css-var-test-id"
-                  style="margin: 0px;"
-                >
-                  indicator
-                </h5>
-                <span
-                  class="ant-tag ant-tag-filled ant-tag-blue css-var-test-id"
-                >
-                  6.0.0
-                </span>
-              </div>
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="pushpin"
-                      class="anticon anticon-pushpin"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="pushpin"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M878.3 392.1L631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3a33.23 33.23 0 00-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 00-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8zM666.2 549.3l-24.5 24.5 3.8 34.4a259.92 259.92 0 01-30.4 153.9L262 408.8c12.9-7.1 26.3-13.1 40.3-17.9 27.2-9.4 55.7-14.1 84.7-14.1 9.6 0 19.3.5 28.9 1.6l34.4 3.8 24.5-24.5L608.5 224 800 415.5 666.2 549.3z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="info-circle"
-                      class="anticon anticon-info-circle"
-                      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 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-                        />
-                        <path
-                          d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ant-typography css-var-test-id"
-              style="margin: 0px; font-size: 12px;"
-            >
-              指示器元素，设置绝对定位、内边距、背景色、圆角和缎带样式
-            </div>
-          </div>
-        </li>
-        <li
-          class="acss-1ehfz5v"
-        >
-          <div
-            class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
-          >
-            <div
-              class="ant-flex css-var-test-id ant-flex-align-center ant-flex-justify-space-between ant-flex-gap-small"
-            >
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <h5
-                  class="ant-typography css-var-test-id"
-                  style="margin: 0px;"
-                >
-                  content
-                </h5>
-                <span
-                  class="ant-tag ant-tag-filled ant-tag-blue css-var-test-id"
-                >
-                  6.0.0
-                </span>
-              </div>
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="pushpin"
-                      class="anticon anticon-pushpin"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="pushpin"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M878.3 392.1L631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3a33.23 33.23 0 00-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 00-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8zM666.2 549.3l-24.5 24.5 3.8 34.4a259.92 259.92 0 01-30.4 153.9L262 408.8c12.9-7.1 26.3-13.1 40.3-17.9 27.2-9.4 55.7-14.1 84.7-14.1 9.6 0 19.3.5 28.9 1.6l34.4 3.8 24.5-24.5L608.5 224 800 415.5 666.2 549.3z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="info-circle"
-                      class="anticon anticon-info-circle"
-                      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 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-                        />
-                        <path
-                          d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ant-typography css-var-test-id"
-              style="margin: 0px; font-size: 12px;"
-            >
-              文本元素，设置文本颜色和缎带内容显示样式
-            </div>
-          </div>
-        </li>
-      </ul>
-    </div>
-  </div>
-</div>
-`;
--- a/components/badge/tests/demo-semantic.test.tsx
+++ b/components/badge/tests/demo-semantic.test.tsx
@@ -1,3 +0,0 @@
-import { semanticDemoTest } from '../../../tests/shared/demoTest';
-
-semanticDemoTest('badge');
--- a/components/badge/style/index.ts
+++ b/components/badge/style/index.ts
@@ -192,7 +192,7 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token) => {
        background: token.badgeColor,
        borderRadius: calc(indicatorHeight).div(2).equal(),
        boxShadow: `0 0 0 ${unit(badgeShadowSize)} ${token.badgeShadowColor}`,
-        transition: `background-color ${token.motionDurationMid}`,
+        transition: `background ${token.motionDurationMid}`,

        a: {
          color: token.badgeTextColor,
--- a/components/breadcrumb/Breadcrumb.tsx
+++ b/components/breadcrumb/Breadcrumb.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import DownOutlined from '@ant-design/icons/DownOutlined';
+import { DownOutlined } from '@ant-design/icons';
 import { toArray } from '@rc-component/util';
 import pickAttrs from '@rc-component/util/lib/pickAttrs';
 import { clsx } from 'clsx';
--- a/components/breadcrumb/tests/snapshots/demo-semantic.test.tsx.snap
+++ b/components/breadcrumb/tests/snapshots/demo-semantic.test.tsx.snap
@@ -1,404 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`renders components/breadcrumb/demo/_semantic.tsx correctly 1`] = `
-<div
-  class="acss-1ucck97"
->
-  <div
-    class="ant-row css-var-test-id"
-  >
-    <div
-      class="ant-col ant-col-16 acss-my3sst css-var-test-id"
-    >
-      <nav
-        class="ant-breadcrumb semantic-mark-root css-var-test-id"
-      >
-        <ol>
-          <li
-            class="ant-breadcrumb-item semantic-mark-item"
-          >
-            <a
-              class="ant-breadcrumb-link"
-              href=""
-            >
-              <span
-                aria-label="home"
-                class="anticon anticon-home"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="home"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M946.5 505L560.1 118.8l-25.9-25.9a31.5 31.5 0 00-44.4 0L77.5 505a63.9 63.9 0 00-18.8 46c.4 35.2 29.7 63.3 64.9 63.3h42.5V940h691.8V614.3h43.4c17.1 0 33.2-6.7 45.3-18.8a63.6 63.6 0 0018.7-45.3c0-17-6.7-33.1-18.8-45.2zM568 868H456V664h112v204zm217.9-325.7V868H632V640c0-22.1-17.9-40-40-40H432c-22.1 0-40 17.9-40 40v228H238.1V542.3h-96l370-369.7 23.1 23.1L882 542.3h-96.1z"
-                  />
-                </svg>
-              </span>
-            </a>
-          </li>
-          <li
-            aria-hidden="true"
-            class="ant-breadcrumb-separator semantic-mark-separator"
-          >
-            /
-          </li>
-          <li
-            class="ant-breadcrumb-item semantic-mark-item"
-          >
-            <a
-              class="ant-breadcrumb-link"
-              href=""
-            >
-              <span
-                aria-label="user"
-                class="anticon anticon-user"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="user"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
-                  />
-                </svg>
-              </span>
-              <span>
-                Application List
-              </span>
-            </a>
-          </li>
-          <li
-            aria-hidden="true"
-            class="ant-breadcrumb-separator semantic-mark-separator"
-          >
-            /
-          </li>
-          <li
-            class="ant-breadcrumb-item semantic-mark-item"
-          >
-            <span
-              class="ant-breadcrumb-link"
-            >
-              Application
-            </span>
-          </li>
-        </ol>
-      </nav>
-    </div>
-    <div
-      class="ant-col ant-col-8 css-var-test-id"
-    >
-      <ul
-        class="acss-1ry21g5"
-      >
-        <li
-          class="acss-1ehfz5v"
-        >
-          <div
-            class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
-          >
-            <div
-              class="ant-flex css-var-test-id ant-flex-align-center ant-flex-justify-space-between ant-flex-gap-small"
-            >
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <h5
-                  class="ant-typography css-var-test-id"
-                  style="margin: 0px;"
-                >
-                  root
-                </h5>
-                <span
-                  class="ant-tag ant-tag-filled ant-tag-blue css-var-test-id"
-                >
-                  6.0.0
-                </span>
-              </div>
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="pushpin"
-                      class="anticon anticon-pushpin"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="pushpin"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M878.3 392.1L631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3a33.23 33.23 0 00-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 00-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8zM666.2 549.3l-24.5 24.5 3.8 34.4a259.92 259.92 0 01-30.4 153.9L262 408.8c12.9-7.1 26.3-13.1 40.3-17.9 27.2-9.4 55.7-14.1 84.7-14.1 9.6 0 19.3.5 28.9 1.6l34.4 3.8 24.5-24.5L608.5 224 800 415.5 666.2 549.3z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="info-circle"
-                      class="anticon anticon-info-circle"
-                      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 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-                        />
-                        <path
-                          d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ant-typography css-var-test-id"
-              style="margin: 0px; font-size: 12px;"
-            >
-              根元素，包含文字颜色、字体大小、图标尺寸等基础样式，内部使用 flex 布局的有序列表
-            </div>
-          </div>
-        </li>
-        <li
-          class="acss-1ehfz5v"
-        >
-          <div
-            class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
-          >
-            <div
-              class="ant-flex css-var-test-id ant-flex-align-center ant-flex-justify-space-between ant-flex-gap-small"
-            >
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <h5
-                  class="ant-typography css-var-test-id"
-                  style="margin: 0px;"
-                >
-                  item
-                </h5>
-                <span
-                  class="ant-tag ant-tag-filled ant-tag-blue css-var-test-id"
-                >
-                  6.0.0
-                </span>
-              </div>
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="pushpin"
-                      class="anticon anticon-pushpin"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="pushpin"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M878.3 392.1L631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3a33.23 33.23 0 00-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 00-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8zM666.2 549.3l-24.5 24.5 3.8 34.4a259.92 259.92 0 01-30.4 153.9L262 408.8c12.9-7.1 26.3-13.1 40.3-17.9 27.2-9.4 55.7-14.1 84.7-14.1 9.6 0 19.3.5 28.9 1.6l34.4 3.8 24.5-24.5L608.5 224 800 415.5 666.2 549.3z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="info-circle"
-                      class="anticon anticon-info-circle"
-                      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 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-                        />
-                        <path
-                          d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ant-typography css-var-test-id"
-              style="margin: 0px; font-size: 12px;"
-            >
-              Item 元素，包含文字颜色、链接的颜色变化、悬浮效果、内边距、圆角、高度、外边距等样式
-            </div>
-          </div>
-        </li>
-        <li
-          class="acss-1ehfz5v"
-        >
-          <div
-            class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
-          >
-            <div
-              class="ant-flex css-var-test-id ant-flex-align-center ant-flex-justify-space-between ant-flex-gap-small"
-            >
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <h5
-                  class="ant-typography css-var-test-id"
-                  style="margin: 0px;"
-                >
-                  separator
-                </h5>
-                <span
-                  class="ant-tag ant-tag-filled ant-tag-blue css-var-test-id"
-                >
-                  6.0.0
-                </span>
-              </div>
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="pushpin"
-                      class="anticon anticon-pushpin"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="pushpin"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M878.3 392.1L631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3a33.23 33.23 0 00-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 00-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8zM666.2 549.3l-24.5 24.5 3.8 34.4a259.92 259.92 0 01-30.4 153.9L262 408.8c12.9-7.1 26.3-13.1 40.3-17.9 27.2-9.4 55.7-14.1 84.7-14.1 9.6 0 19.3.5 28.9 1.6l34.4 3.8 24.5-24.5L608.5 224 800 415.5 666.2 549.3z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="info-circle"
-                      class="anticon anticon-info-circle"
-                      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 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-                        />
-                        <path
-                          d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ant-typography css-var-test-id"
-              style="margin: 0px; font-size: 12px;"
-            >
-              分隔符元素，包含分隔符的外边距和颜色样式
-            </div>
-          </div>
-        </li>
-      </ul>
-    </div>
-  </div>
-</div>
-`;
--- a/components/breadcrumb/tests/demo-semantic.test.tsx
+++ b/components/breadcrumb/tests/demo-semantic.test.tsx
@@ -1,3 +0,0 @@
-import { semanticDemoTest } from '../../../tests/shared/demoTest';
-
-semanticDemoTest('breadcrumb');
--- a/components/breadcrumb/index.tsx
+++ b/components/breadcrumb/index.tsx
@@ -11,9 +11,7 @@ export type {
 export type { BreadcrumbItemProps, SeparatorType } from './BreadcrumbItem';

 type CompoundedComponent = typeof InternalBreadcrumb & {
-  /** @deprecated Please use `items` instead. */
  Item: typeof BreadcrumbItem;
-  /** @deprecated Please use `separator` instead. */
  Separator: typeof BreadcrumbSeparator;
 };

--- a/components/button/Button.tsx
+++ b/components/button/Button.tsx
@@ -331,7 +331,7 @@ const InternalCompoundedButton = React.forwardRef<
  // ========================== Size ==========================
  const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction);

-  const sizeClassNameMap = { large: 'lg', small: 'sm', middle: undefined };
+  const sizeClassNameMap = { large: 'lg', small: 'sm', middle: undefined, medium: undefined };

  const sizeFullName = useSize((ctxSize) => customizeSize ?? compactSize ?? groupSize ?? ctxSize);

--- a/components/button/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/button/tests/snapshots/demo-extend.test.ts.snap
@@ -968,18 +968,6 @@ exports[`renders components/button/demo/debug-color-variant.tsx extend context c
      </span>
    </button>
  </div>
-  <div
-    class="ant-flex css-var-test-id ant-flex-wrap-wrap ant-flex-gap-small"
-  >
-    <button
-      class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text"
-      type="button"
-    >
-      <span>
-        type="text" (Default)
-      </span>
-    </button>
-  </div>
 </div>
 `;

--- a/components/button/tests/snapshots/demo-semantic.test.tsx.snap
+++ b/components/button/tests/snapshots/demo-semantic.test.tsx.snap
@@ -1,351 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`renders components/button/demo/_semantic.tsx correctly 1`] = `
-<div
-  class="acss-1ucck97"
->
-  <div
-    class="ant-row css-var-test-id"
-  >
-    <div
-      class="ant-col ant-col-16 acss-my3sst css-var-test-id"
-    >
-      <button
-        class="ant-btn css-var-test-id ant-btn-primary ant-btn-color-primary ant-btn-variant-solid semantic-mark-root"
-        type="button"
-      >
-        <span
-          class="ant-btn-icon semantic-mark-icon"
-        >
-          <span
-            aria-label="ant-design"
-            class="anticon anticon-ant-design"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="ant-design"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M716.3 313.8c19-18.9 19-49.7 0-68.6l-69.9-69.9.1.1c-18.5-18.5-50.3-50.3-95.3-95.2-21.2-20.7-55.5-20.5-76.5.5L80.9 474.2a53.84 53.84 0 000 76.4L474.6 944a54.14 54.14 0 0076.5 0l165.1-165c19-18.9 19-49.7 0-68.6a48.7 48.7 0 00-68.7 0l-125 125.2c-5.2 5.2-13.3 5.2-18.5 0L189.5 521.4c-5.2-5.2-5.2-13.3 0-18.5l314.4-314.2c.4-.4.9-.7 1.3-1.1 5.2-4.1 12.4-3.7 17.2 1.1l125.2 125.1c19 19 49.8 19 68.7 0zM408.6 514.4a106.3 106.2 0 10212.6 0 106.3 106.2 0 10-212.6 0zm536.2-38.6L821.9 353.5c-19-18.9-49.8-18.9-68.7.1a48.4 48.4 0 000 68.6l83 82.9c5.2 5.2 5.2 13.3 0 18.5l-81.8 81.7a48.4 48.4 0 000 68.6 48.7 48.7 0 0068.7 0l121.8-121.7a53.93 53.93 0 00-.1-76.4z"
-              />
-            </svg>
-          </span>
-        </span>
-        <span
-          class="semantic-mark-content"
-        >
-          Ant Design
-        </span>
-      </button>
-    </div>
-    <div
-      class="ant-col ant-col-8 css-var-test-id"
-    >
-      <ul
-        class="acss-1ry21g5"
-      >
-        <li
-          class="acss-1ehfz5v"
-        >
-          <div
-            class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
-          >
-            <div
-              class="ant-flex css-var-test-id ant-flex-align-center ant-flex-justify-space-between ant-flex-gap-small"
-            >
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <h5
-                  class="ant-typography css-var-test-id"
-                  style="margin: 0px;"
-                >
-                  root
-                </h5>
-                <span
-                  class="ant-tag ant-tag-filled ant-tag-blue css-var-test-id"
-                >
-                  6.0.0
-                </span>
-              </div>
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="pushpin"
-                      class="anticon anticon-pushpin"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="pushpin"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M878.3 392.1L631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3a33.23 33.23 0 00-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 00-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8zM666.2 549.3l-24.5 24.5 3.8 34.4a259.92 259.92 0 01-30.4 153.9L262 408.8c12.9-7.1 26.3-13.1 40.3-17.9 27.2-9.4 55.7-14.1 84.7-14.1 9.6 0 19.3.5 28.9 1.6l34.4 3.8 24.5-24.5L608.5 224 800 415.5 666.2 549.3z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="info-circle"
-                      class="anticon anticon-info-circle"
-                      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 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-                        />
-                        <path
-                          d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ant-typography css-var-test-id"
-              style="margin: 0px; font-size: 12px;"
-            >
-              根元素，包含边框样式、背景色、内边距、圆角、阴影效果、过渡动画、光标样式、文字权重、对齐方式等完整的按钮外观样式
-            </div>
-          </div>
-        </li>
-        <li
-          class="acss-1ehfz5v"
-        >
-          <div
-            class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
-          >
-            <div
-              class="ant-flex css-var-test-id ant-flex-align-center ant-flex-justify-space-between ant-flex-gap-small"
-            >
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <h5
-                  class="ant-typography css-var-test-id"
-                  style="margin: 0px;"
-                >
-                  icon
-                </h5>
-                <span
-                  class="ant-tag ant-tag-filled ant-tag-blue css-var-test-id"
-                >
-                  5.5.0
-                </span>
-              </div>
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="pushpin"
-                      class="anticon anticon-pushpin"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="pushpin"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M878.3 392.1L631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3a33.23 33.23 0 00-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 00-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8zM666.2 549.3l-24.5 24.5 3.8 34.4a259.92 259.92 0 01-30.4 153.9L262 408.8c12.9-7.1 26.3-13.1 40.3-17.9 27.2-9.4 55.7-14.1 84.7-14.1 9.6 0 19.3.5 28.9 1.6l34.4 3.8 24.5-24.5L608.5 224 800 415.5 666.2 549.3z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="info-circle"
-                      class="anticon anticon-info-circle"
-                      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 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-                        />
-                        <path
-                          d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ant-typography css-var-test-id"
-              style="margin: 0px; font-size: 12px;"
-            >
-              图标元素，包含图标的字体大小、颜色继承、SVG 样式重置等图标显示相关样式
-            </div>
-          </div>
-        </li>
-        <li
-          class="acss-1ehfz5v"
-        >
-          <div
-            class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
-          >
-            <div
-              class="ant-flex css-var-test-id ant-flex-align-center ant-flex-justify-space-between ant-flex-gap-small"
-            >
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <h5
-                  class="ant-typography css-var-test-id"
-                  style="margin: 0px;"
-                >
-                  content
-                </h5>
-                <span
-                  class="ant-tag ant-tag-filled ant-tag-blue css-var-test-id"
-                >
-                  6.0.0
-                </span>
-              </div>
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="pushpin"
-                      class="anticon anticon-pushpin"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="pushpin"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M878.3 392.1L631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3a33.23 33.23 0 00-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 00-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8zM666.2 549.3l-24.5 24.5 3.8 34.4a259.92 259.92 0 01-30.4 153.9L262 408.8c12.9-7.1 26.3-13.1 40.3-17.9 27.2-9.4 55.7-14.1 84.7-14.1 9.6 0 19.3.5 28.9 1.6l34.4 3.8 24.5-24.5L608.5 224 800 415.5 666.2 549.3z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="info-circle"
-                      class="anticon anticon-info-circle"
-                      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 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-                        />
-                        <path
-                          d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ant-typography css-var-test-id"
-              style="margin: 0px; font-size: 12px;"
-            >
-              内容元素，包装按钮文本内容，控制文本的不换行显示、居中对齐、中文字符间距优化等文本排版样式
-            </div>
-          </div>
-        </li>
-      </ul>
-    </div>
-  </div>
-</div>
-`;
--- a/components/button/tests/snapshots/demo.test.ts.snap
+++ b/components/button/tests/snapshots/demo.test.ts.snap
@@ -952,18 +952,6 @@ exports[`renders components/button/demo/debug-color-variant.tsx correctly 1`] =
      </span>
    </button>
  </div>
-  <div
-    class="ant-flex css-var-test-id ant-flex-wrap-wrap ant-flex-gap-small"
-  >
-    <button
-      class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text"
-      type="button"
-    >
-      <span>
-        type="text" (Default)
-      </span>
-    </button>
-  </div>
 </div>
 `;

--- a/components/button/tests/demo-semantic.test.tsx
+++ b/components/button/tests/demo-semantic.test.tsx
@@ -1,3 +0,0 @@
-import { semanticDemoTest } from '../../../tests/shared/demoTest';
-
-semanticDemoTest('button');
--- a/components/button/tests/image.test.ts
+++ b/components/button/tests/image.test.ts
@@ -1,5 +1,5 @@
 import { imageDemoTest } from '../../../tests/shared/imageTest';

 describe('Button image', () => {
-  imageDemoTest('button', { skip: ['loading.tsx', 'chinese-chars-loading.tsx'] });
+  imageDemoTest('button', { skip: ['loading.tsx'] });
 });
--- a/components/button/demo/debug-color-variant.tsx
+++ b/components/button/demo/debug-color-variant.tsx
@@ -114,22 +114,6 @@ const App: React.FC = () => {
          <Button type="dashed">Dashed</Button>
        </ConfigProvider>
      </Flex>
-      <Flex gap="small" wrap>
-        <ConfigProvider
-          theme={{
-            components: {
-              Button: {
-                textTextColor: '#f60',
-                textTextHoverColor: '#722ed1',
-                textTextActiveColor: '#0f0',
-                textHoverBg: '#000',
-              },
-            },
-          }}
-        >
-          <Button type="text">type="text" (Default)</Button>
-        </ConfigProvider>
-      </Flex>
    </Flex>
  );
 };
--- a/components/button/style/compact.ts
+++ b/components/button/style/compact.ts
@@ -5,67 +5,38 @@ import { genCompactItemStyle } from '../../style/compact-item';
 import { genCompactItemVerticalStyle } from '../../style/compact-item-vertical';
 import type { GenerateStyle } from '../../theme/internal';
 import { genSubStyleComponent } from '../../theme/internal';
-import { genCssVar } from '../../theme/util/genStyleUtils';
 import type { ButtonToken } from './token';
 import { prepareComponentToken, prepareToken } from './token';

 const genButtonCompactStyle: GenerateStyle<ButtonToken> = (token) => {
-  const { antCls, componentCls, lineWidth, calc, colorBgContainer } = token;
-
-  const solidSelector = `${componentCls}-variant-solid:not([disabled])`;
+  const { componentCls, colorPrimaryHover, lineWidth, calc } = token;
  const insetOffset = calc(lineWidth).mul(-1).equal();
-
-  const [varName, varRef] = genCssVar(antCls, 'btn');
-
-  const getCompactBorderStyle = (vertical?: boolean): CSSObject => {
+  const getCompactBorderStyle = (vertical?: boolean) => {
    const itemCls = `${componentCls}-compact${vertical ? '-vertical' : ''}-item`;
+    const selector = `${itemCls}${componentCls}-primary:not([disabled])`;

    return {
      // TODO: Border color transition should be not cover when has color.
      [itemCls]: {
-        [varName('compact-connect-border-color')]: varRef('bg-color-hover'),
-
-        [`&${solidSelector}`]: {
-          transition: `none`,
-
-          [`& + ${solidSelector}:before`]: [
-            {
-              position: 'absolute',
-              backgroundColor: varRef('compact-connect-border-color'),
-              content: '""',
-            },
-            vertical
-              ? {
-                  top: insetOffset,
-                  insetInline: insetOffset,
-                  height: lineWidth,
-                }
-              : {
-                  insetBlock: insetOffset,
-                  insetInlineStart: insetOffset,
-                  width: lineWidth,
-                },
-          ],
-
-          '&:hover:before': {
-            display: 'none',
-          },
-        },
+        transition: `none`,
      },
+
+      [`${selector} + ${selector}::before`]: {
+        position: 'absolute',
+        top: vertical ? insetOffset : 0,
+        insetInlineStart: vertical ? 0 : insetOffset,
+        backgroundColor: colorPrimaryHover,
+        content: '""',
+        width: vertical ? '100%' : lineWidth,
+        height: vertical ? lineWidth : '100%',
+      } as CSSObject,
    };
  };
-
-  // Special styles for solid Button
-  return [
-    getCompactBorderStyle(),
-    getCompactBorderStyle(true),
-    {
-      [`${solidSelector}${componentCls}-color-default`]: {
-        [varName('compact-connect-border-color')]:
-          `color-mix(in srgb, ${varRef('bg-color-hover')} 75%, ${colorBgContainer})`,
-      },
-    },
-  ];
+  // Special styles for Primary Button
+  return {
+    ...getCompactBorderStyle(),
+    ...getCompactBorderStyle(true),
+  };
 };

 // ============================== Export ==============================
--- a/components/button/style/variant.ts
+++ b/components/button/style/variant.ts
@@ -239,13 +239,6 @@ const genVariantStyle: GenerateStyle<ButtonToken> = (token) => {
            [varName('bg-color-active')]: token.defaultActiveBg,
          },

-          [`&${componentCls}-variant-text`]: {
-            [varName('text-color')]: token.textTextColor,
-            [varName('text-color-hover')]: token.textTextHoverColor,
-            [varName('text-color-active')]: token.textTextActiveColor,
-            [varName('bg-color-hover')]: token.textHoverBg,
-          },
-
          [`&${componentCls}-background-ghost`]: {
            [`&${componentCls}-variant-outlined, &${componentCls}-variant-dashed`]: {
              [varName('text-color')]: token.defaultGhostColor,
--- a/components/calendar/Header.tsx
+++ b/components/calendar/Header.tsx
@@ -72,7 +72,7 @@ function YearSelect<DateType>(props: SharedProps<DateType>) {

        onChange(newDate);
      }}
-      getPopupContainer={() => divRef.current}
+      getPopupContainer={() => divRef!.current!}
    />
  );
 }
@@ -114,7 +114,7 @@ function MonthSelect<DateType>(props: SharedProps<DateType>) {
      onChange={(newMonth) => {
        onChange(generateConfig.setMonth(value, newMonth));
      }}
-      getPopupContainer={() => divRef.current}
+      getPopupContainer={() => divRef!.current!}
    />
  );
 }
--- a/components/calendar/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/calendar/tests/snapshots/demo-extend.test.ts.snap
@@ -15,6 +15,7 @@ exports[`renders components/calendar/demo/basic.tsx extend context correctly 1`]
      >
        <div
          class="ant-select-content-value"
+          style="visibility: visible;"
          title="2016"
        >
          2016
@@ -430,6 +431,7 @@ exports[`renders components/calendar/demo/basic.tsx extend context correctly 1`]
      >
        <div
          class="ant-select-content-value"
+          style="visibility: visible;"
          title="Nov"
        >
          Nov
@@ -1553,6 +1555,7 @@ exports[`renders components/calendar/demo/card.tsx extend context correctly 1`]
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="2016"
          >
            2016
@@ -1968,6 +1971,7 @@ exports[`renders components/calendar/demo/card.tsx extend context correctly 1`]
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="Nov"
          >
            Nov
@@ -3090,6 +3094,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="2016"
          >
            2016
@@ -3505,6 +3510,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="Nov"
          >
            Nov
@@ -4621,6 +4627,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="2016"
          >
            2016
@@ -5036,6 +5043,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="Nov"
          >
            Nov
@@ -6219,6 +6227,7 @@ exports[`renders components/calendar/demo/customize-header.tsx extend context co
          >
            <div
              class="ant-select-content-value"
+              style="visibility: visible;"
              title="2016"
            >
              2016
@@ -6674,6 +6683,7 @@ exports[`renders components/calendar/demo/customize-header.tsx extend context co
          >
            <div
              class="ant-select-content-value"
+              style="visibility: visible;"
              title="Nov"
            >
              Nov
@@ -7762,6 +7772,7 @@ exports[`renders components/calendar/demo/notice-calendar.tsx extend context cor
      >
        <div
          class="ant-select-content-value"
+          style="visibility: visible;"
          title="2016"
        >
          2016
@@ -8177,6 +8188,7 @@ exports[`renders components/calendar/demo/notice-calendar.tsx extend context cor
      >
        <div
          class="ant-select-content-value"
+          style="visibility: visible;"
          title="Nov"
        >
          Nov
@@ -9710,6 +9722,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="2017"
          >
            2017
@@ -10125,6 +10138,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="Jan"
          >
            Jan
@@ -11250,6 +11264,7 @@ exports[`renders components/calendar/demo/style-class.tsx extend context correct
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="2016"
          >
            2016
@@ -11665,6 +11680,7 @@ exports[`renders components/calendar/demo/style-class.tsx extend context correct
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="Nov"
          >
            Nov
@@ -12781,6 +12797,7 @@ exports[`renders components/calendar/demo/style-class.tsx extend context correct
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="2016"
          >
            2016
@@ -13196,6 +13213,7 @@ exports[`renders components/calendar/demo/style-class.tsx extend context correct
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="Nov"
          >
            Nov
@@ -14318,6 +14336,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="2016"
          >
            2016
@@ -14733,6 +14752,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="Nov"
          >
            Nov
@@ -15910,6 +15930,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="2016"
          >
            2016
@@ -16325,6 +16346,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility: visible;"
            title="Nov"
          >
            Nov
--- a/components/calendar/tests/snapshots/demo-semantic.test.tsx.snap
+++ b/components/calendar/tests/snapshots/demo-semantic.test.tsx.snap
--- a/components/calendar/tests/snapshots/demo.test.ts.snap
+++ b/components/calendar/tests/snapshots/demo.test.ts.snap
@@ -15,6 +15,7 @@ exports[`renders components/calendar/demo/basic.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
+          style="visibility:visible"
          title="2016"
        >
          2016
@@ -64,6 +65,7 @@ exports[`renders components/calendar/demo/basic.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
+          style="visibility:visible"
          title="Nov"
        >
          Nov
@@ -947,6 +949,7 @@ exports[`renders components/calendar/demo/card.tsx correctly 1`] = `
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="2016"
          >
            2016
@@ -996,6 +999,7 @@ exports[`renders components/calendar/demo/card.tsx correctly 1`] = `
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="Nov"
          >
            Nov
@@ -1878,6 +1882,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="2016"
          >
            2016
@@ -1927,6 +1932,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="Nov"
          >
            Nov
@@ -2805,6 +2811,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="2016"
          >
            2016
@@ -2854,6 +2861,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="Nov"
          >
            Nov
@@ -3797,6 +3805,7 @@ exports[`renders components/calendar/demo/customize-header.tsx correctly 1`] = `
          >
            <div
              class="ant-select-content-value"
+              style="visibility:visible"
              title="2016"
            >
              2016
@@ -3846,6 +3855,7 @@ exports[`renders components/calendar/demo/customize-header.tsx correctly 1`] = `
          >
            <div
              class="ant-select-content-value"
+              style="visibility:visible"
              title="Nov"
            >
              Nov
@@ -4678,6 +4688,7 @@ exports[`renders components/calendar/demo/notice-calendar.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
+          style="visibility:visible"
          title="2016"
        >
          2016
@@ -4727,6 +4738,7 @@ exports[`renders components/calendar/demo/notice-calendar.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
+          style="visibility:visible"
          title="Nov"
        >
          Nov
@@ -6020,6 +6032,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="2017"
          >
            2017
@@ -6069,6 +6082,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="Jan"
          >
            Jan
@@ -6954,6 +6968,7 @@ exports[`renders components/calendar/demo/style-class.tsx correctly 1`] = `
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="2016"
          >
            2016
@@ -7003,6 +7018,7 @@ exports[`renders components/calendar/demo/style-class.tsx correctly 1`] = `
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="Nov"
          >
            Nov
@@ -7881,6 +7897,7 @@ exports[`renders components/calendar/demo/style-class.tsx correctly 1`] = `
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="2016"
          >
            2016
@@ -7930,6 +7947,7 @@ exports[`renders components/calendar/demo/style-class.tsx correctly 1`] = `
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="Nov"
          >
            Nov
@@ -8812,6 +8830,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="2016"
          >
            2016
@@ -8861,6 +8880,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="Nov"
          >
            Nov
@@ -9800,6 +9820,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="2016"
          >
            2016
@@ -9849,6 +9870,7 @@ Array [
        >
          <div
            class="ant-select-content-value"
+            style="visibility:visible"
            title="Nov"
          >
            Nov
--- a/components/calendar/tests/snapshots/index.test.tsx.snap
+++ b/components/calendar/tests/snapshots/index.test.tsx.snap
@@ -15,6 +15,7 @@ exports[`Calendar Calendar MonthSelect should display correct label 1`] = `
      >
        <div
          class="ant-select-content-value"
+          style="visibility: visible;"
          title="2019"
        >
          2019
@@ -64,6 +65,7 @@ exports[`Calendar Calendar MonthSelect should display correct label 1`] = `
      >
        <div
          class="ant-select-content-value"
+          style="visibility: visible;"
          title="Jan"
        >
          Jan
@@ -944,6 +946,7 @@ exports[`Calendar Calendar should support locale 1`] = `
      >
        <div
          class="ant-select-content-value"
+          style="visibility: visible;"
          title="2018年"
        >
          2018年
@@ -993,6 +996,7 @@ exports[`Calendar Calendar should support locale 1`] = `
      >
        <div
          class="ant-select-content-value"
+          style="visibility: visible;"
          title="10月"
        >
          10月
@@ -1873,6 +1877,7 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc
      >
        <div
          class="ant-select-content-value"
+          style="visibility: visible;"
          title="2000"
        >
          2000
@@ -1922,6 +1927,7 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc
      >
        <div
          class="ant-select-content-value"
+          style="visibility: visible;"
          title="Sep"
        >
          Sep
@@ -2802,6 +2808,7 @@ exports[`Calendar support Calendar.generateCalendar 1`] = `
      >
        <div
          class="ant-select-content-value"
+          style="visibility: visible;"
          title="2000"
        >
          2000
@@ -2851,6 +2858,7 @@ exports[`Calendar support Calendar.generateCalendar 1`] = `
      >
        <div
          class="ant-select-content-value"
+          style="visibility: visible;"
          title="Jan"
        >
          Jan
--- a/components/calendar/tests/demo-semantic.test.tsx
+++ b/components/calendar/tests/demo-semantic.test.tsx
@@ -1,3 +0,0 @@
-import { semanticDemoTest } from '../../../tests/shared/demoTest';
-
-semanticDemoTest('calendar');
--- a/components/calendar/style/index.ts
+++ b/components/calendar/style/index.ts
@@ -196,7 +196,7 @@ export const genCalendarStyles = (token: CalendarToken): CSSObject => {
        border: 0,
        borderTop: `${unit(token.lineWidthBold)} ${token.lineType} ${token.colorSplit}`,
        borderRadius: 0,
-        transition: `background-color ${token.motionDurationSlow}`,
+        transition: `background ${token.motionDurationSlow}`,
        '&-value': {
          lineHeight: unit(token.dateValueHeight),
          transition: `color ${token.motionDurationSlow}`,
--- a/components/card/tests/snapshots/demo-semantic.test.tsx.snap
+++ b/components/card/tests/snapshots/demo-semantic.test.tsx.snap
--- a/components/card/tests/demo-semantic.test.tsx
+++ b/components/card/tests/demo-semantic.test.tsx
@@ -1,3 +0,0 @@
-import { semanticDemoTest } from '../../../tests/shared/demoTest';
-
-semanticDemoTest('card');
--- a/components/card/style/index.ts
+++ b/components/card/style/index.ts
@@ -342,14 +342,6 @@ const genCardStyle: GenerateStyle<CardToken> = (token): CSSObject => {
      [`${componentCls}-body`]: {
        padding: bodyPadding,
        borderRadius: `0 0 ${unit(token.borderRadiusLG)} ${unit(token.borderRadiusLG)}`,
-        '&:first-child': {
-          borderStartStartRadius: token.borderRadiusLG,
-          borderStartEndRadius: token.borderRadiusLG,
-        },
-        '&:not(:last-child)': {
-          borderEndStartRadius: 0,
-          borderEndEndRadius: 0,
-        },
      },

      [`${componentCls}-grid`]: genCardGridStyle(token),
--- a/components/cascader/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/cascader/tests/snapshots/demo-extend.test.ts.snap
@@ -601,6 +601,7 @@ Array [
    >
      <div
        class="ant-select-content-value"
+        style="visibility: visible;"
      >
        <span>
          Zhejiang / 
@@ -879,6 +880,7 @@ Array [
    >
      <div
        class="ant-select-content-value"
+        style="visibility: visible;"
        title="Zhejiang / Hangzhou / West Lake"
      >
        Zhejiang / Hangzhou / West Lake
@@ -2023,10 +2025,10 @@ exports[`renders components/cascader/demo/panel.tsx extend context correctly 1`]
              stroke="#d9d9d9"
            >
              <path
-                d="M55 12.8 44.9 1.3Q44 0 42.9 0H21.1q-1.2 0-2 1.3L9 12.8V22h46z"
+                d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
              />
              <path
-                d="M41.6 16c0-1.7 1-3 2.2-3H55v18.1c0 2.2-1.3 3.9-3 3.9H12c-1.7 0-3-1.7-3-3.9V13h11.2c1.2 0 2.2 1.3 2.2 3s1 2.9 2.2 2.9h14.8c1.2 0 2.2-1.4 2.2-3"
+                d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
                fill="#fafafa"
              />
            </g>
@@ -3497,10 +3499,10 @@ exports[`renders components/cascader/demo/status.tsx extend context correctly 1`
                          stroke="#d9d9d9"
                        >
                          <path
-                            d="M55 12.8 44.9 1.3Q44 0 42.9 0H21.1q-1.2 0-2 1.3L9 12.8V22h46z"
+                            d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
                          />
                          <path
-                            d="M41.6 16c0-1.7 1-3 2.2-3H55v18.1c0 2.2-1.3 3.9-3 3.9H12c-1.7 0-3-1.7-3-3.9V13h11.2c1.2 0 2.2 1.3 2.2 3s1 2.9 2.2 2.9h14.8c1.2 0 2.2-1.4 2.2-3"
+                            d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
                            fill="#fafafa"
                          />
                        </g>
@@ -3636,10 +3638,10 @@ exports[`renders components/cascader/demo/status.tsx extend context correctly 1`
                          stroke="#d9d9d9"
                        >
                          <path
-                            d="M55 12.8 44.9 1.3Q44 0 42.9 0H21.1q-1.2 0-2 1.3L9 12.8V22h46z"
+                            d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
                          />
                          <path
-                            d="M41.6 16c0-1.7 1-3 2.2-3H55v18.1c0 2.2-1.3 3.9-3 3.9H12c-1.7 0-3-1.7-3-3.9V13h11.2c1.2 0 2.2 1.3 2.2 3s1 2.9 2.2 2.9h14.8c1.2 0 2.2-1.4 2.2-3"
+                            d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
                            fill="#fafafa"
                          />
                        </g>
@@ -4738,10 +4740,10 @@ exports[`renders components/cascader/demo/variant.tsx extend context correctly 1
                        stroke="#d9d9d9"
                      >
                        <path
-                          d="M55 12.8 44.9 1.3Q44 0 42.9 0H21.1q-1.2 0-2 1.3L9 12.8V22h46z"
+                          d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
                        />
                        <path
-                          d="M41.6 16c0-1.7 1-3 2.2-3H55v18.1c0 2.2-1.3 3.9-3 3.9H12c-1.7 0-3-1.7-3-3.9V13h11.2c1.2 0 2.2 1.3 2.2 3s1 2.9 2.2 2.9h14.8c1.2 0 2.2-1.4 2.2-3"
+                          d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
                          fill="#fafafa"
                        />
                      </g>
@@ -4862,10 +4864,10 @@ exports[`renders components/cascader/demo/variant.tsx extend context correctly 1
                        stroke="#d9d9d9"
                      >
                        <path
-                          d="M55 12.8 44.9 1.3Q44 0 42.9 0H21.1q-1.2 0-2 1.3L9 12.8V22h46z"
+                          d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
                        />
                        <path
-                          d="M41.6 16c0-1.7 1-3 2.2-3H55v18.1c0 2.2-1.3 3.9-3 3.9H12c-1.7 0-3-1.7-3-3.9V13h11.2c1.2 0 2.2 1.3 2.2 3s1 2.9 2.2 2.9h14.8c1.2 0 2.2-1.4 2.2-3"
+                          d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
                          fill="#fafafa"
                        />
                      </g>
@@ -4986,10 +4988,10 @@ exports[`renders components/cascader/demo/variant.tsx extend context correctly 1
                        stroke="#d9d9d9"
                      >
                        <path
-                          d="M55 12.8 44.9 1.3Q44 0 42.9 0H21.1q-1.2 0-2 1.3L9 12.8V22h46z"
+                          d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
                        />
                        <path
-                          d="M41.6 16c0-1.7 1-3 2.2-3H55v18.1c0 2.2-1.3 3.9-3 3.9H12c-1.7 0-3-1.7-3-3.9V13h11.2c1.2 0 2.2 1.3 2.2 3s1 2.9 2.2 2.9h14.8c1.2 0 2.2-1.4 2.2-3"
+                          d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
                          fill="#fafafa"
                        />
                      </g>
@@ -5110,10 +5112,10 @@ exports[`renders components/cascader/demo/variant.tsx extend context correctly 1
                        stroke="#d9d9d9"
                      >
                        <path
-                          d="M55 12.8 44.9 1.3Q44 0 42.9 0H21.1q-1.2 0-2 1.3L9 12.8V22h46z"
+                          d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
                        />
                        <path
-                          d="M41.6 16c0-1.7 1-3 2.2-3H55v18.1c0 2.2-1.3 3.9-3 3.9H12c-1.7 0-3-1.7-3-3.9V13h11.2c1.2 0 2.2 1.3 2.2 3s1 2.9 2.2 2.9h14.8c1.2 0 2.2-1.4 2.2-3"
+                          d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
                          fill="#fafafa"
                        />
                      </g>
--- a/components/cascader/tests/snapshots/demo-semantic.test.tsx.snap
+++ b/components/cascader/tests/snapshots/demo-semantic.test.tsx.snap
--- a/components/cascader/tests/snapshots/demo.test.tsx.snap
+++ b/components/cascader/tests/snapshots/demo.test.tsx.snap
@@ -216,6 +216,7 @@ exports[`renders components/cascader/demo/custom-render.tsx correctly 1`] = `
  >
    <div
      class="ant-select-content-value"
+      style="visibility:visible"
    >
      <span>
        Zhejiang
@@ -319,6 +320,7 @@ exports[`renders components/cascader/demo/default-value.tsx correctly 1`] = `
  >
    <div
      class="ant-select-content-value"
+      style="visibility:visible"
      title="Zhejiang / Hangzhou / West Lake"
    >
      Zhejiang / Hangzhou / West Lake
@@ -897,10 +899,10 @@ exports[`renders components/cascader/demo/panel.tsx correctly 1`] = `
              stroke="#d9d9d9"
            >
              <path
-                d="M55 12.8 44.9 1.3Q44 0 42.9 0H21.1q-1.2 0-2 1.3L9 12.8V22h46z"
+                d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
              />
              <path
-                d="M41.6 16c0-1.7 1-3 2.2-3H55v18.1c0 2.2-1.3 3.9-3 3.9H12c-1.7 0-3-1.7-3-3.9V13h11.2c1.2 0 2.2 1.3 2.2 3s1 2.9 2.2 2.9h14.8c1.2 0 2.2-1.4 2.2-3"
+                d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
                fill="#fafafa"
              />
            </g>
--- a/components/cascader/tests/snapshots/index.test.tsx.snap
+++ b/components/cascader/tests/snapshots/index.test.tsx.snap
@@ -1165,6 +1165,7 @@ exports[`Cascader popup correctly with defaultValue RTL 1`] = `
  >
    <div
      class="ant-select-content-value"
+      style="visibility: visible;"
      title="Zhejiang / Hangzhou"
    >
      Zhejiang / Hangzhou
@@ -1342,10 +1343,10 @@ exports[`Cascader should render not found content 1`] = `
                      stroke="#d9d9d9"
                    >
                      <path
-                        d="M55 12.8 44.9 1.3Q44 0 42.9 0H21.1q-1.2 0-2 1.3L9 12.8V22h46z"
+                        d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
                      />
                      <path
-                        d="M41.6 16c0-1.7 1-3 2.2-3H55v18.1c0 2.2-1.3 3.9-3 3.9H12c-1.7 0-3-1.7-3-3.9V13h11.2c1.2 0 2.2 1.3 2.2 3s1 2.9 2.2 2.9h14.8c1.2 0 2.2-1.4 2.2-3"
+                        d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
                        fill="#fafafa"
                      />
                    </g>
@@ -1420,10 +1421,10 @@ exports[`Cascader should show not found content when options.length is 0 1`] = `
                      stroke="#d9d9d9"
                    >
                      <path
-                        d="M55 12.8 44.9 1.3Q44 0 42.9 0H21.1q-1.2 0-2 1.3L9 12.8V22h46z"
+                        d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
                      />
                      <path
-                        d="M41.6 16c0-1.7 1-3 2.2-3H55v18.1c0 2.2-1.3 3.9-3 3.9H12c-1.7 0-3-1.7-3-3.9V13h11.2c1.2 0 2.2 1.3 2.2 3s1 2.9 2.2 2.9h14.8c1.2 0 2.2-1.4 2.2-3"
+                        d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
                        fill="#fafafa"
                      />
                    </g>
@@ -1453,6 +1454,7 @@ exports[`Cascader support controlled mode 1`] = `
  >
    <div
      class="ant-select-content-value"
+      style="visibility: visible;"
      title="Zhejiang / Hangzhou / West Lake"
    >
      Zhejiang / Hangzhou / West Lake
--- a/components/cascader/tests/demo-semantic.test.tsx
+++ b/components/cascader/tests/demo-semantic.test.tsx
@@ -1,3 +0,0 @@
-import { createPostFn, semanticDemoTest } from '../../../tests/shared/demoTest';
-
-semanticDemoTest('cascader', { postRenderFn: createPostFn(['Multiple']) });
--- a/components/cascader/demo/_semantic.tsx
+++ b/components/cascader/demo/_semantic.tsx
@@ -40,10 +40,7 @@ const App: React.FC = () => {
      prefix="prefix"
      style={{ width: 200 }}
      options={options}
-      multipleProps={{
-        multiple: true,
-        defaultValue: [['contributors', 'thinkasany']],
-      }}
+      multipleProps={{ multiple: true }}
    />
  );
 };
--- a/components/checkbox/tests/snapshots/demo-semantic.test.tsx.snap
+++ b/components/checkbox/tests/snapshots/demo-semantic.test.tsx.snap
@@ -1,338 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`renders components/checkbox/demo/_semantic.tsx correctly 1`] = `
-<div
-  class="acss-1ucck97"
->
-  <div
-    class="ant-row css-var-test-id"
-  >
-    <div
-      class="ant-col ant-col-16 acss-my3sst css-var-test-id"
-    >
-      <label
-        class="ant-checkbox-wrapper semantic-mark-root css-var-test-id ant-checkbox-css-var"
-      >
-        <span
-          class="ant-checkbox semantic-mark-icon ant-wave-target"
-        >
-          <input
-            class="ant-checkbox-input"
-            type="checkbox"
-          />
-          <span
-            class="ant-checkbox-inner"
-          />
-        </span>
-        <span
-          class="ant-checkbox-label semantic-mark-label"
-        >
-          Checkbox
-        </span>
-      </label>
-    </div>
-    <div
-      class="ant-col ant-col-8 css-var-test-id"
-    >
-      <ul
-        class="acss-1ry21g5"
-      >
-        <li
-          class="acss-1ehfz5v"
-        >
-          <div
-            class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
-          >
-            <div
-              class="ant-flex css-var-test-id ant-flex-align-center ant-flex-justify-space-between ant-flex-gap-small"
-            >
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <h5
-                  class="ant-typography css-var-test-id"
-                  style="margin: 0px;"
-                >
-                  root
-                </h5>
-                <span
-                  class="ant-tag ant-tag-filled ant-tag-blue css-var-test-id"
-                >
-                  6.0.0
-                </span>
-              </div>
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="pushpin"
-                      class="anticon anticon-pushpin"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="pushpin"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M878.3 392.1L631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3a33.23 33.23 0 00-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 00-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8zM666.2 549.3l-24.5 24.5 3.8 34.4a259.92 259.92 0 01-30.4 153.9L262 408.8c12.9-7.1 26.3-13.1 40.3-17.9 27.2-9.4 55.7-14.1 84.7-14.1 9.6 0 19.3.5 28.9 1.6l34.4 3.8 24.5-24.5L608.5 224 800 415.5 666.2 549.3z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="info-circle"
-                      class="anticon anticon-info-circle"
-                      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 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-                        />
-                        <path
-                          d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ant-typography css-var-test-id"
-              style="margin: 0px; font-size: 12px;"
-            >
-              根元素，包含行内 flex 布局、基线对齐、光标样式、重置样式等复选框容器的基础样式
-            </div>
-          </div>
-        </li>
-        <li
-          class="acss-1ehfz5v"
-        >
-          <div
-            class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
-          >
-            <div
-              class="ant-flex css-var-test-id ant-flex-align-center ant-flex-justify-space-between ant-flex-gap-small"
-            >
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <h5
-                  class="ant-typography css-var-test-id"
-                  style="margin: 0px;"
-                >
-                  icon
-                </h5>
-                <span
-                  class="ant-tag ant-tag-filled ant-tag-blue css-var-test-id"
-                >
-                  6.0.0
-                </span>
-              </div>
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="pushpin"
-                      class="anticon anticon-pushpin"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="pushpin"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M878.3 392.1L631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3a33.23 33.23 0 00-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 00-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8zM666.2 549.3l-24.5 24.5 3.8 34.4a259.92 259.92 0 01-30.4 153.9L262 408.8c12.9-7.1 26.3-13.1 40.3-17.9 27.2-9.4 55.7-14.1 84.7-14.1 9.6 0 19.3.5 28.9 1.6l34.4 3.8 24.5-24.5L608.5 224 800 415.5 666.2 549.3z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="info-circle"
-                      class="anticon anticon-info-circle"
-                      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 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-                        />
-                        <path
-                          d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ant-typography css-var-test-id"
-              style="margin: 0px; font-size: 12px;"
-            >
-              选中框元素，包含尺寸、方向、背景色、边框、圆角、过渡动画，以及选中状态的勾选标记样式
-            </div>
-          </div>
-        </li>
-        <li
-          class="acss-1ehfz5v"
-        >
-          <div
-            class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
-          >
-            <div
-              class="ant-flex css-var-test-id ant-flex-align-center ant-flex-justify-space-between ant-flex-gap-small"
-            >
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <h5
-                  class="ant-typography css-var-test-id"
-                  style="margin: 0px;"
-                >
-                  label
-                </h5>
-                <span
-                  class="ant-tag ant-tag-filled ant-tag-blue css-var-test-id"
-                >
-                  6.0.0
-                </span>
-              </div>
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="pushpin"
-                      class="anticon anticon-pushpin"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="pushpin"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M878.3 392.1L631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3a33.23 33.23 0 00-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 00-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8zM666.2 549.3l-24.5 24.5 3.8 34.4a259.92 259.92 0 01-30.4 153.9L262 408.8c12.9-7.1 26.3-13.1 40.3-17.9 27.2-9.4 55.7-14.1 84.7-14.1 9.6 0 19.3.5 28.9 1.6l34.4 3.8 24.5-24.5L608.5 224 800 415.5 666.2 549.3z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="info-circle"
-                      class="anticon anticon-info-circle"
-                      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 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-                        />
-                        <path
-                          d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ant-typography css-var-test-id"
-              style="margin: 0px; font-size: 12px;"
-            >
-              文本元素，包含文本的内边距和与复选框的间距样式
-            </div>
-          </div>
-        </li>
-      </ul>
-    </div>
-  </div>
-</div>
-`;
--- a/components/checkbox/tests/demo-semantic.test.tsx
+++ b/components/checkbox/tests/demo-semantic.test.tsx
@@ -1,3 +0,0 @@
-import { semanticDemoTest } from '../../../tests/shared/demoTest';
-
-semanticDemoTest('checkbox');
--- a/components/collapse/Collapse.tsx
+++ b/components/collapse/Collapse.tsx
@@ -164,8 +164,11 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
            aria-label={panelProps.isActive ? 'expanded' : 'collapsed'}
          />
        );
-      return cloneElement(icon, (oriProps) => ({
-        className: clsx(oriProps.className, `${prefixCls}-arrow`),
+      return cloneElement(icon, () => ({
+        className: clsx(
+          (icon as React.ReactElement<{ className?: string }>)?.props?.className,
+          `${prefixCls}-arrow`,
+        ),
      }));
    },
    [mergedExpandIcon, prefixCls, direction],
--- a/components/collapse/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/collapse/tests/snapshots/demo-extend.test.ts.snap
@@ -1102,6 +1102,7 @@ Array [
    >
      <div
        class="ant-select-content-value"
+        style="visibility: visible;"
        title="start"
      >
        start
--- a/components/collapse/tests/snapshots/demo-semantic.test.tsx.snap
+++ b/components/collapse/tests/snapshots/demo-semantic.test.tsx.snap
@@ -1,574 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`renders components/collapse/demo/_semantic.tsx correctly 1`] = `
-<div
-  class="acss-1ucck97"
->
-  <div
-    class="ant-row css-var-test-id"
-  >
-    <div
-      class="ant-col ant-col-16 acss-my3sst css-var-test-id"
-    >
-      <div
-        style="position: absolute; inset: 0; margin: 32px;"
-      >
-        <div
-          class="ant-collapse ant-collapse-icon-placement-start css-var-test-id semantic-mark-root"
-        >
-          <div
-            class="ant-collapse-item ant-collapse-item-active"
-          >
-            <div
-              aria-disabled="false"
-              aria-expanded="true"
-              class="ant-collapse-header semantic-mark-header"
-              role="button"
-              tabindex="0"
-            >
-              <div
-                class="ant-collapse-expand-icon semantic-mark-icon"
-              >
-                <span
-                  aria-label="expanded"
-                  class="anticon anticon-right ant-collapse-arrow"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="right"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    style="transform: rotate(90deg);"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-                    />
-                  </svg>
-                </span>
-              </div>
-              <span
-                class="ant-collapse-title semantic-mark-title"
-              >
-                This is panel header
-              </span>
-            </div>
-            <div
-              class="ant-collapse-panel ant-collapse-panel-active"
-            >
-              <div
-                class="ant-collapse-body semantic-mark-body"
-              >
-                <p>
-                  This is panel body
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="ant-col ant-col-8 css-var-test-id"
-    >
-      <ul
-        class="acss-1ry21g5"
-      >
-        <li
-          class="acss-1ehfz5v"
-        >
-          <div
-            class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
-          >
-            <div
-              class="ant-flex css-var-test-id ant-flex-align-center ant-flex-justify-space-between ant-flex-gap-small"
-            >
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <h5
-                  class="ant-typography css-var-test-id"
-                  style="margin: 0px;"
-                >
-                  root
-                </h5>
-                <span
-                  class="ant-tag ant-tag-filled ant-tag-blue css-var-test-id"
-                >
-                  6.0.0
-                </span>
-              </div>
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="pushpin"
-                      class="anticon anticon-pushpin"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="pushpin"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M878.3 392.1L631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3a33.23 33.23 0 00-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 00-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8zM666.2 549.3l-24.5 24.5 3.8 34.4a259.92 259.92 0 01-30.4 153.9L262 408.8c12.9-7.1 26.3-13.1 40.3-17.9 27.2-9.4 55.7-14.1 84.7-14.1 9.6 0 19.3.5 28.9 1.6l34.4 3.8 24.5-24.5L608.5 224 800 415.5 666.2 549.3z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="info-circle"
-                      class="anticon anticon-info-circle"
-                      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 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-                        />
-                        <path
-                          d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ant-typography css-var-test-id"
-              style="margin: 0px; font-size: 12px;"
-            >
-              根元素，包含折叠面板的边框、圆角、背景色等容器样式，控制面板的整体布局和外观
-            </div>
-          </div>
-        </li>
-        <li
-          class="acss-1ehfz5v"
-        >
-          <div
-            class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
-          >
-            <div
-              class="ant-flex css-var-test-id ant-flex-align-center ant-flex-justify-space-between ant-flex-gap-small"
-            >
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <h5
-                  class="ant-typography css-var-test-id"
-                  style="margin: 0px;"
-                >
-                  header
-                </h5>
-                <span
-                  class="ant-tag ant-tag-filled ant-tag-blue css-var-test-id"
-                >
-                  5.21.0
-                </span>
-              </div>
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="pushpin"
-                      class="anticon anticon-pushpin"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="pushpin"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M878.3 392.1L631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3a33.23 33.23 0 00-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 00-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8zM666.2 549.3l-24.5 24.5 3.8 34.4a259.92 259.92 0 01-30.4 153.9L262 408.8c12.9-7.1 26.3-13.1 40.3-17.9 27.2-9.4 55.7-14.1 84.7-14.1 9.6 0 19.3.5 28.9 1.6l34.4 3.8 24.5-24.5L608.5 224 800 415.5 666.2 549.3z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="info-circle"
-                      class="anticon anticon-info-circle"
-                      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 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-                        />
-                        <path
-                          d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ant-typography css-var-test-id"
-              style="margin: 0px; font-size: 12px;"
-            >
-              头部元素，包含flex布局、内边距、颜色、行高、光标样式、过渡动画等面板头部的交互和样式
-            </div>
-          </div>
-        </li>
-        <li
-          class="acss-1ehfz5v"
-        >
-          <div
-            class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
-          >
-            <div
-              class="ant-flex css-var-test-id ant-flex-align-center ant-flex-justify-space-between ant-flex-gap-small"
-            >
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <h5
-                  class="ant-typography css-var-test-id"
-                  style="margin: 0px;"
-                >
-                  icon
-                </h5>
-                <span
-                  class="ant-tag ant-tag-filled ant-tag-blue css-var-test-id"
-                >
-                  6.0.0
-                </span>
-              </div>
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="pushpin"
-                      class="anticon anticon-pushpin"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="pushpin"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M878.3 392.1L631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3a33.23 33.23 0 00-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 00-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8zM666.2 549.3l-24.5 24.5 3.8 34.4a259.92 259.92 0 01-30.4 153.9L262 408.8c12.9-7.1 26.3-13.1 40.3-17.9 27.2-9.4 55.7-14.1 84.7-14.1 9.6 0 19.3.5 28.9 1.6l34.4 3.8 24.5-24.5L608.5 224 800 415.5 666.2 549.3z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="info-circle"
-                      class="anticon anticon-info-circle"
-                      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 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-                        />
-                        <path
-                          d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ant-typography css-var-test-id"
-              style="margin: 0px; font-size: 12px;"
-            >
-              图标元素，包含字体大小、过渡动画、旋转变换等展开收起箭头的样式和动效
-            </div>
-          </div>
-        </li>
-        <li
-          class="acss-1ehfz5v"
-        >
-          <div
-            class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
-          >
-            <div
-              class="ant-flex css-var-test-id ant-flex-align-center ant-flex-justify-space-between ant-flex-gap-small"
-            >
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <h5
-                  class="ant-typography css-var-test-id"
-                  style="margin: 0px;"
-                >
-                  title
-                </h5>
-                <span
-                  class="ant-tag ant-tag-filled ant-tag-blue css-var-test-id"
-                >
-                  6.0.0
-                </span>
-              </div>
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="pushpin"
-                      class="anticon anticon-pushpin"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="pushpin"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M878.3 392.1L631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3a33.23 33.23 0 00-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 00-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8zM666.2 549.3l-24.5 24.5 3.8 34.4a259.92 259.92 0 01-30.4 153.9L262 408.8c12.9-7.1 26.3-13.1 40.3-17.9 27.2-9.4 55.7-14.1 84.7-14.1 9.6 0 19.3.5 28.9 1.6l34.4 3.8 24.5-24.5L608.5 224 800 415.5 666.2 549.3z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="info-circle"
-                      class="anticon anticon-info-circle"
-                      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 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-                        />
-                        <path
-                          d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ant-typography css-var-test-id"
-              style="margin: 0px; font-size: 12px;"
-            >
-              标题元素，包含flex自适应布局、右边距等标题文字的布局和排版样式
-            </div>
-          </div>
-        </li>
-        <li
-          class="acss-1ehfz5v"
-        >
-          <div
-            class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
-          >
-            <div
-              class="ant-flex css-var-test-id ant-flex-align-center ant-flex-justify-space-between ant-flex-gap-small"
-            >
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <h5
-                  class="ant-typography css-var-test-id"
-                  style="margin: 0px;"
-                >
-                  body
-                </h5>
-                <span
-                  class="ant-tag ant-tag-filled ant-tag-blue css-var-test-id"
-                >
-                  5.21.0
-                </span>
-              </div>
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="pushpin"
-                      class="anticon anticon-pushpin"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="pushpin"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M878.3 392.1L631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3a33.23 33.23 0 00-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 00-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8zM666.2 549.3l-24.5 24.5 3.8 34.4a259.92 259.92 0 01-30.4 153.9L262 408.8c12.9-7.1 26.3-13.1 40.3-17.9 27.2-9.4 55.7-14.1 84.7-14.1 9.6 0 19.3.5 28.9 1.6l34.4 3.8 24.5-24.5L608.5 224 800 415.5 666.2 549.3z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="info-circle"
-                      class="anticon anticon-info-circle"
-                      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 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-                        />
-                        <path
-                          d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ant-typography css-var-test-id"
-              style="margin: 0px; font-size: 12px;"
-            >
-              内容元素，包含内边距、颜色、背景色等面板内容区域的展示样式
-            </div>
-          </div>
-        </li>
-      </ul>
-    </div>
-  </div>
-</div>
-`;
--- a/components/collapse/tests/snapshots/demo.test.ts.snap
+++ b/components/collapse/tests/snapshots/demo.test.ts.snap
@@ -1090,6 +1090,7 @@ Array [
    >
      <div
        class="ant-select-content-value"
+        style="visibility:visible"
        title="start"
      >
        start
--- a/components/collapse/tests/demo-semantic.test.tsx
+++ b/components/collapse/tests/demo-semantic.test.tsx
@@ -1,3 +0,0 @@
-import { semanticDemoTest } from '../../../tests/shared/demoTest';
-
-semanticDemoTest('collapse');
--- a/components/color-picker/ColorPicker.tsx
+++ b/components/color-picker/ColorPicker.tsx
@@ -225,7 +225,7 @@ const ColorPicker: CompoundedComponent = (props) => {
  const rootCls = useCSSVarCls(prefixCls);
  const [hashId, cssVarCls] = useStyle(prefixCls, rootCls);
  const rtlCls = { [`${prefixCls}-rtl`]: direction };
-  const mergedRootCls = clsx(mergedClassNames.root, rootClassName, cssVarCls, rootCls, rtlCls);
+  const mergedRootCls = clsx(rootClassName, cssVarCls, rootCls, rtlCls);
  const mergedCls = clsx(
    getStatusClassNames(prefixCls, contextStatus),
    {
@@ -262,7 +262,7 @@ const ColorPicker: CompoundedComponent = (props) => {
    destroyOnHidden: destroyOnHidden ?? !!destroyTooltipOnHide,
  };

-  const mergedStyle: React.CSSProperties = { ...mergedStyles.root, ...contextStyle, ...style };
+  const mergedStyle: React.CSSProperties = { ...contextStyle, ...style };

  // ============================ zIndex ============================

@@ -305,6 +305,8 @@ const ColorPicker: CompoundedComponent = (props) => {
          open={popupOpen}
          className={mergedCls}
          style={mergedStyle}
+          classNames={mergedClassNames}
+          styles={mergedStyles}
          prefixCls={prefixCls}
          disabled={mergedDisabled}
          showText={showText}
--- a/components/color-picker/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/color-picker/tests/snapshots/demo-extend.test.ts.snap
@@ -144,6 +144,7 @@ Array [
                >
                  <div
                    class="ant-select-content-value"
+                    style="visibility: visible;"
                    title="HEX"
                  >
                    HEX
@@ -517,6 +518,7 @@ Array [
                >
                  <div
                    class="ant-select-content-value"
+                    style="visibility: visible;"
                    title="HEX"
                  >
                    HEX
@@ -895,6 +897,7 @@ exports[`renders components/color-picker/demo/controlled.tsx extend context corr
                  >
                    <div
                      class="ant-select-content-value"
+                      style="visibility: visible;"
                      title="HEX"
                    >
                      HEX
@@ -1265,6 +1268,7 @@ exports[`renders components/color-picker/demo/controlled.tsx extend context corr
                  >
                    <div
                      class="ant-select-content-value"
+                      style="visibility: visible;"
                      title="HEX"
                    >
                      HEX
@@ -1644,6 +1648,7 @@ Array [
                >
                  <div
                    class="ant-select-content-value"
+                    style="visibility: visible;"
                    title="HEX"
                  >
                    HEX
@@ -1995,6 +2000,7 @@ Array [
                >
                  <div
                    class="ant-select-content-value"
+                    style="visibility: visible;"
                    title="HEX"
                  >
                    HEX
@@ -2308,6 +2314,7 @@ exports[`renders components/color-picker/demo/format.tsx extend context correctl
                      >
                        <div
                          class="ant-select-content-value"
+                          style="visibility: visible;"
                          title="HEX"
                        >
                          HEX
@@ -2693,6 +2700,7 @@ exports[`renders components/color-picker/demo/format.tsx extend context correctl
                      >
                        <div
                          class="ant-select-content-value"
+                          style="visibility: visible;"
                          title="HSB"
                        >
                          HSB
@@ -3284,6 +3292,7 @@ exports[`renders components/color-picker/demo/format.tsx extend context correctl
                      >
                        <div
                          class="ant-select-content-value"
+                          style="visibility: visible;"
                          title="RGB"
                        >
                          RGB
@@ -3975,6 +3984,7 @@ exports[`renders components/color-picker/demo/line-gradient.tsx extend context c
                  >
                    <div
                      class="ant-select-content-value"
+                      style="visibility: visible;"
                      title="HEX"
                    >
                      HEX
@@ -4399,6 +4409,7 @@ exports[`renders components/color-picker/demo/line-gradient.tsx extend context c
                  >
                    <div
                      class="ant-select-content-value"
+                      style="visibility: visible;"
                      title="HEX"
                    >
                      HEX
@@ -4799,6 +4810,7 @@ exports[`renders components/color-picker/demo/panel-render.tsx extend context co
                        >
                          <div
                            class="ant-select-content-value"
+                            style="visibility: visible;"
                            title="HEX"
                          >
                            HEX
@@ -5755,6 +5767,7 @@ exports[`renders components/color-picker/demo/panel-render.tsx extend context co
                        >
                          <div
                            class="ant-select-content-value"
+                            style="visibility: visible;"
                            title="HEX"
                          >
                            HEX
@@ -6132,6 +6145,7 @@ Array [
                >
                  <div
                    class="ant-select-content-value"
+                    style="visibility: visible;"
                    title="HEX"
                  >
                    HEX
@@ -6934,6 +6948,7 @@ exports[`renders components/color-picker/demo/pure-panel.tsx extend context corr
                  >
                    <div
                      class="ant-select-content-value"
+                      style="visibility: visible;"
                      title="HEX"
                    >
                      HEX
@@ -7319,6 +7334,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
                      >
                        <div
                          class="ant-select-content-value"
+                          style="visibility: visible;"
                          title="HEX"
                        >
                          HEX
@@ -7689,6 +7705,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
                      >
                        <div
                          class="ant-select-content-value"
+                          style="visibility: visible;"
                          title="HEX"
                        >
                          HEX
@@ -8059,6 +8076,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
                      >
                        <div
                          class="ant-select-content-value"
+                          style="visibility: visible;"
                          title="HEX"
                        >
                          HEX
@@ -8442,6 +8460,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
                      >
                        <div
                          class="ant-select-content-value"
+                          style="visibility: visible;"
                          title="HEX"
                        >
                          HEX
@@ -8817,6 +8836,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
                      >
                        <div
                          class="ant-select-content-value"
+                          style="visibility: visible;"
                          title="HEX"
                        >
                          HEX
@@ -9192,6 +9212,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
                      >
                        <div
                          class="ant-select-content-value"
+                          style="visibility: visible;"
                          title="HEX"
                        >
                          HEX
@@ -9444,7 +9465,7 @@ exports[`renders components/color-picker/demo/style-class.tsx extend context cor
    >
      <div
        aria-describedby="test-id"
-        class="ant-color-picker-trigger acss-pbemrr css-var-test-id ant-color-picker-css-var"
+        class="ant-color-picker-trigger css-var-test-id ant-color-picker-css-var acss-pbemrr"
      >
        <div
          class="ant-color-picker-color-block"
@@ -9456,7 +9477,7 @@ exports[`renders components/color-picker/demo/style-class.tsx extend context cor
        </div>
      </div>
      <div
-        class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-css-var css-var-test-id css-var-test-id ant-color-picker acss-pbemrr css-var-test-id ant-color-picker-css-var ant-popover-placement-bottomLeft"
+        class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-css-var css-var-test-id css-var-test-id ant-color-picker css-var-test-id ant-color-picker-css-var ant-popover-placement-bottomLeft"
        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box; border: 1px solid rgb(255, 255, 255);"
      >
        <div
@@ -9569,6 +9590,7 @@ exports[`renders components/color-picker/demo/style-class.tsx extend context cor
                    >
                      <div
                        class="ant-select-content-value"
+                        style="visibility: visible;"
                        title="HEX"
                      >
                        HEX
@@ -9810,7 +9832,7 @@ exports[`renders components/color-picker/demo/style-class.tsx extend context cor
    >
      <div
        aria-describedby="test-id"
-        class="ant-color-picker-trigger ant-color-picker-lg acss-pbemrr css-var-test-id ant-color-picker-css-var"
+        class="ant-color-picker-trigger ant-color-picker-lg css-var-test-id ant-color-picker-css-var acss-pbemrr"
      >
        <div
          class="ant-color-picker-color-block"
@@ -9822,7 +9844,7 @@ exports[`renders components/color-picker/demo/style-class.tsx extend context cor
        </div>
      </div>
      <div
-        class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-css-var css-var-test-id css-var-test-id ant-color-picker acss-pbemrr css-var-test-id ant-color-picker-css-var ant-popover-placement-bottomLeft"
+        class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-css-var css-var-test-id css-var-test-id ant-color-picker css-var-test-id ant-color-picker-css-var ant-popover-placement-bottomLeft"
        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box; border: 1px solid rgb(114, 46, 209);"
      >
        <div
@@ -9935,6 +9957,7 @@ exports[`renders components/color-picker/demo/style-class.tsx extend context cor
                    >
                      <div
                        class="ant-select-content-value"
+                        style="visibility: visible;"
                        title="HEX"
                      >
                        HEX
@@ -10327,6 +10350,7 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor
                  >
                    <div
                      class="ant-select-content-value"
+                      style="visibility: visible;"
                      title="HEX"
                    >
                      HEX
@@ -10704,6 +10728,7 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor
                  >
                    <div
                      class="ant-select-content-value"
+                      style="visibility: visible;"
                      title="HEX"
                    >
                      HEX
@@ -11098,6 +11123,7 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor
                  >
                    <div
                      class="ant-select-content-value"
+                      style="visibility: visible;"
                      title="HEX"
                    >
                      HEX
@@ -11469,6 +11495,7 @@ Array [
                >
                  <div
                    class="ant-select-content-value"
+                    style="visibility: visible;"
                    title="HEX"
                  >
                    HEX
@@ -11842,6 +11869,7 @@ Array [
                >
                  <div
                    class="ant-select-content-value"
+                    style="visibility: visible;"
                    title="HEX"
                  >
                    HEX
--- a/components/color-picker/tests/snapshots/demo-semantic.test.tsx.snap
+++ b/components/color-picker/tests/snapshots/demo-semantic.test.tsx.snap
@@ -1,487 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`renders components/color-picker/demo/_semantic.tsx correctly 1`] = `
-<div
-  class="acss-1ucck97"
->
-  <div
-    class="ant-row css-var-test-id"
-  >
-    <div
-      class="ant-col ant-col-16 acss-my3sst css-var-test-id"
-    >
-      <div
-        style="height: 300px;"
-      >
-        <div
-          aria-describedby="test-id"
-          class="ant-color-picker-trigger semantic-mark-root css-var-test-id ant-color-picker-css-var ant-popover-open ant-color-picker-trigger-active"
-        >
-          <div
-            class="ant-color-picker-color-block"
-          >
-            <div
-              class="ant-color-picker-color-block-inner"
-              style="background: rgb(22, 119, 255);"
-            />
-          </div>
-        </div>
-        <div
-          class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-css-var css-var-test-id css-var-test-id ant-color-picker semantic-mark-root css-var-test-id ant-color-picker-css-var semantic-mark-popup-root ant-popover-placement-bottomLeft"
-          style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box; z-index: 1;"
-        >
-          <div
-            class="ant-popover-arrow"
-            style="position: absolute;"
-          >
-            <span
-              class="ant-popover-arrow-content"
-            />
-          </div>
-          <div
-            class="ant-popover-container"
-            id="test-id"
-            role="tooltip"
-          >
-            <div
-              class="ant-popover-content"
-            >
-              <div
-                class="ant-color-picker-inner"
-              >
-                <div
-                  class="ant-color-picker-inner-content"
-                >
-                  <div
-                    class="ant-color-picker-panel"
-                  >
-                    <div
-                      class="ant-color-picker-select"
-                    >
-                      <div
-                        class="ant-color-picker-palette"
-                        style="position: relative;"
-                      >
-                        <div
-                          style="position: absolute; left: 91.37254901960785%; top: 0%; z-index: 1; transform: translate(-50%, -50%);"
-                        >
-                          <div
-                            class="ant-color-picker-handler"
-                            style="background-color: rgb(22, 119, 255);"
-                          />
-                        </div>
-                        <div
-                          class="ant-color-picker-saturation"
-                          style="background-color: rgb(0, 106, 255); background-image: linear-gradient(0deg, #000, transparent), linear-gradient(90deg, #fff, hsla(0, 0%, 100%, 0));"
-                        />
-                      </div>
-                    </div>
-                    <div
-                      class="ant-color-picker-slider-container"
-                    >
-                      <div
-                        class="ant-color-picker-slider-group"
-                      >
-                        <div
-                          class="ant-slider ant-color-picker-slider css-var-test-id ant-slider-horizontal"
-                        >
-                          <div
-                            class="ant-slider-rail ant-color-picker-slider-rail"
-                            style="background: linear-gradient(90deg, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%);"
-                          />
-                          <div
-                            class="ant-slider-step"
-                          />
-                          <div
-                            aria-disabled="false"
-                            aria-orientation="horizontal"
-                            aria-valuemax="359"
-                            aria-valuemin="0"
-                            aria-valuenow="215"
-                            class="ant-slider-handle ant-slider-handle-1 ant-color-picker-slider-handle"
-                            role="slider"
-                            style="left: 59.888579387186624%; transform: translateX(-50%); background: rgb(0, 106, 255);"
-                            tabindex="0"
-                          />
-                        </div>
-                        <div
-                          class="ant-slider ant-color-picker-slider css-var-test-id ant-slider-horizontal"
-                        >
-                          <div
-                            class="ant-slider-rail ant-color-picker-slider-rail"
-                            style="background: linear-gradient(90deg, rgba(255, 0, 4, 0) 0%, rgb(22,119,255) 100%);"
-                          />
-                          <div
-                            class="ant-slider-step"
-                          />
-                          <div
-                            aria-disabled="false"
-                            aria-orientation="horizontal"
-                            aria-valuemax="100"
-                            aria-valuemin="0"
-                            aria-valuenow="100"
-                            class="ant-slider-handle ant-slider-handle-1 ant-color-picker-slider-handle"
-                            role="slider"
-                            style="left: 100%; transform: translateX(-50%); background: rgb(22, 119, 255);"
-                            tabindex="0"
-                          />
-                        </div>
-                      </div>
-                      <div
-                        class="ant-color-picker-color-block"
-                      >
-                        <div
-                          class="ant-color-picker-color-block-inner"
-                          style="background: rgb(22, 119, 255);"
-                        />
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    class="ant-color-picker-input-container"
-                  >
-                    <div
-                      class="ant-select ant-select-sm ant-select-borderless ant-color-picker-format-select css-var-test-id ant-select-css-var ant-select-single ant-select-show-arrow"
-                    >
-                      <div
-                        class="ant-select-content"
-                      >
-                        <div
-                          class="ant-select-content-value"
-                          style="visibility: visible;"
-                          title="HEX"
-                        >
-                          HEX
-                        </div>
-                        <input
-                          aria-autocomplete="list"
-                          aria-expanded="false"
-                          aria-haspopup="listbox"
-                          autocomplete="off"
-                          class="ant-select-input"
-                          id="test-id"
-                          readonly=""
-                          role="combobox"
-                          type="search"
-                          value=""
-                        />
-                      </div>
-                      <div
-                        class="ant-select-suffix"
-                      >
-                        <span
-                          aria-label="down"
-                          class="anticon anticon-down"
-                          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>
-                      </div>
-                    </div>
-                    <div
-                      class="ant-color-picker-input"
-                    >
-                      <span
-                        class="ant-input-affix-wrapper ant-input-affix-wrapper-sm ant-input-outlined ant-color-picker-hex-input css-var-test-id ant-input-css-var"
-                      >
-                        <span
-                          class="ant-input-prefix"
-                        >
-                          #
-                        </span>
-                        <input
-                          class="ant-input ant-input-sm"
-                          type="text"
-                          value="1677ff"
-                        />
-                      </span>
-                    </div>
-                    <div
-                      class="ant-input-number ant-input-number-mode-input css-var-test-id ant-input-number-css-var ant-color-picker-steppers ant-color-picker-alpha-input ant-input-number-outlined ant-input-number-sm"
-                    >
-                      <input
-                        aria-valuemax="100"
-                        aria-valuemin="0"
-                        aria-valuenow="100"
-                        autocomplete="off"
-                        class="ant-input-number-input"
-                        role="spinbutton"
-                        step="1"
-                        value="100%"
-                      />
-                      <div
-                        class="ant-input-number-actions"
-                      >
-                        <span
-                          aria-disabled="true"
-                          aria-label="Increase Value"
-                          class="ant-input-number-action ant-input-number-action-up ant-input-number-action-up-disabled"
-                          role="button"
-                          unselectable="on"
-                        >
-                          <span
-                            aria-label="up"
-                            class="anticon anticon-up"
-                            role="img"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              data-icon="up"
-                              fill="currentColor"
-                              focusable="false"
-                              height="1em"
-                              viewBox="64 64 896 896"
-                              width="1em"
-                            >
-                              <path
-                                d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
-                              />
-                            </svg>
-                          </span>
-                        </span>
-                        <span
-                          aria-disabled="false"
-                          aria-label="Decrease Value"
-                          class="ant-input-number-action ant-input-number-action-down"
-                          role="button"
-                          unselectable="on"
-                        >
-                          <span
-                            aria-label="down"
-                            class="anticon anticon-down"
-                            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>
-        </div>
-      </div>
-    </div>
-    <div
-      class="ant-col ant-col-8 css-var-test-id"
-    >
-      <ul
-        class="acss-1ry21g5"
-      >
-        <li
-          class="acss-1ehfz5v"
-        >
-          <div
-            class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
-          >
-            <div
-              class="ant-flex css-var-test-id ant-flex-align-center ant-flex-justify-space-between ant-flex-gap-small"
-            >
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <h5
-                  class="ant-typography css-var-test-id"
-                  style="margin: 0px;"
-                >
-                  root
-                </h5>
-              </div>
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="pushpin"
-                      class="anticon anticon-pushpin"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="pushpin"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M878.3 392.1L631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3a33.23 33.23 0 00-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 00-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8zM666.2 549.3l-24.5 24.5 3.8 34.4a259.92 259.92 0 01-30.4 153.9L262 408.8c12.9-7.1 26.3-13.1 40.3-17.9 27.2-9.4 55.7-14.1 84.7-14.1 9.6 0 19.3.5 28.9 1.6l34.4 3.8 24.5-24.5L608.5 224 800 415.5 666.2 549.3z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="info-circle"
-                      class="anticon anticon-info-circle"
-                      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 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-                        />
-                        <path
-                          d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ant-typography css-var-test-id"
-              style="margin: 0px; font-size: 12px;"
-            >
-              触发器容器，包含边框样式、过渡动画、尺寸控制等样式，显示颜色块和文本内容
-            </div>
-          </div>
-        </li>
-        <li
-          class="acss-1ehfz5v"
-        >
-          <div
-            class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
-          >
-            <div
-              class="ant-flex css-var-test-id ant-flex-align-center ant-flex-justify-space-between ant-flex-gap-small"
-            >
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <h5
-                  class="ant-typography css-var-test-id"
-                  style="margin: 0px;"
-                >
-                  popup.root
-                </h5>
-              </div>
-              <div
-                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
-              >
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="pushpin"
-                      class="anticon anticon-pushpin"
-                      role="img"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        data-icon="pushpin"
-                        fill="currentColor"
-                        focusable="false"
-                        height="1em"
-                        viewBox="64 64 896 896"
-                        width="1em"
-                      >
-                        <path
-                          d="M878.3 392.1L631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3a33.23 33.23 0 00-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 00-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8zM666.2 549.3l-24.5 24.5 3.8 34.4a259.92 259.92 0 01-30.4 153.9L262 408.8c12.9-7.1 26.3-13.1 40.3-17.9 27.2-9.4 55.7-14.1 84.7-14.1 9.6 0 19.3.5 28.9 1.6l34.4 3.8 24.5-24.5L608.5 224 800 415.5 666.2 549.3z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-                <button
-                  aria-hidden="true"
-                  class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
-                  type="button"
-                >
-                  <span
-                    class="ant-btn-icon"
-                  >
-                    <span
-                      aria-label="info-circle"
-                      class="anticon anticon-info-circle"
-                      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 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-                        />
-                        <path
-                          d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ant-typography css-var-test-id"
-              style="margin: 0px; font-size: 12px;"
-            >
-              弹出面板根容器，包含背景色、阴影效果、色彩选择面板、滑块控制和预设颜色等样式
-            </div>
-          </div>
-        </li>
-      </ul>
-    </div>
-  </div>
-</div>
-`;
--- a/components/color-picker/tests/snapshots/demo.test.tsx.snap
+++ b/components/color-picker/tests/snapshots/demo.test.tsx.snap
@@ -552,7 +552,7 @@ exports[`renders components/color-picker/demo/style-class.tsx correctly 1`] = `
      class="ant-flex css-var-test-id ant-flex-gap-small"
    >
      <div
-        class="ant-color-picker-trigger acss-pbemrr css-var-test-id ant-color-picker-css-var"
+        class="ant-color-picker-trigger css-var-test-id ant-color-picker-css-var acss-pbemrr"
      >
        <div
          class="ant-color-picker-color-block"
@@ -572,7 +572,7 @@ exports[`renders components/color-picker/demo/style-class.tsx correctly 1`] = `
      class="ant-flex css-var-test-id ant-flex-gap-small"
    >
      <div
-        class="ant-color-picker-trigger ant-color-picker-lg acss-pbemrr css-var-test-id ant-color-picker-css-var"
+        class="ant-color-picker-trigger ant-color-picker-lg css-var-test-id ant-color-picker-css-var acss-pbemrr"
      >
        <div
          class="ant-color-picker-color-block"
--- a/components/color-picker/tests/snapshots/index.test.tsx.snap
+++ b/components/color-picker/tests/snapshots/index.test.tsx.snap
@@ -147,6 +147,7 @@ exports[`ColorPicker Should panelRender work 1`] = `
                  >
                    <div
                      class="ant-select-content-value"
+                      style="visibility: visible;"
                      title="HEX"
                    >
                      HEX
@@ -420,6 +421,7 @@ exports[`ColorPicker Should panelRender work 2`] = `
                >
                  <div
                    class="ant-select-content-value"
+                    style="visibility: visible;"
                    title="HEX"
                  >
                    HEX
--- a/components/color-picker/tests/demo-semantic.test.tsx
+++ b/components/color-picker/tests/demo-semantic.test.tsx
@@ -1,3 +0,0 @@
-import { semanticDemoTest } from '../../../tests/shared/demoTest';
-
-semanticDemoTest('color-picker');
--- a/components/color-picker/components/ColorClear.tsx
+++ b/components/color-picker/components/ColorClear.tsx
@@ -1,5 +1,6 @@
 import type { FC } from 'react';
 import React from 'react';
+import clsx from 'clsx';

 import type { AggregationColor } from '../color';
 import { generateColor } from '../util';
@@ -8,10 +9,12 @@ interface ColorClearProps {
  prefixCls: string;
  value?: AggregationColor;
  onChange?: (value: AggregationColor) => void;
+  className?: string;
+  style?: React.CSSProperties;
 }

-const ColorClear: FC<ColorClearProps> = ({ prefixCls, value, onChange }) => {
-  const handleClick = () => {
+const ColorClear: FC<ColorClearProps> = ({ prefixCls, value, onChange, className, style }) => {
+  const onClick = () => {
    if (onChange && value && !value.cleared) {
      const hsba = value.toHsb();
      hsba.a = 0;
@@ -21,7 +24,7 @@ const ColorClear: FC<ColorClearProps> = ({ prefixCls, value, onChange }) => {
      onChange(genColor);
    }
  };
-  return <div className={`${prefixCls}-clear`} onClick={handleClick} />;
+  return <div className={clsx(`${prefixCls}-clear`, className)} style={style} onClick={onClick} />;
 };

 export default ColorClear;
--- a/components/color-picker/components/ColorTrigger.tsx
+++ b/components/color-picker/components/ColorTrigger.tsx
@@ -7,7 +7,12 @@ import { clsx } from 'clsx';

 import { useLocale } from '../../locale';
 import type { AggregationColor } from '../color';
-import type { ColorFormatType, ColorPickerProps } from '../interface';
+import type {
+  ColorFormatType,
+  ColorPickerProps,
+  ColorPickerSemanticClassNames,
+  ColorPickerSemanticStyles,
+} from '../interface';
 import { getColorAlpha } from '../util';
 import ColorClear from './ColorClear';

@@ -20,6 +25,8 @@ export interface ColorTriggerProps {
  showText?: ColorPickerProps['showText'];
  className?: string;
  style?: CSSProperties;
+  classNames: ColorPickerSemanticClassNames;
+  styles: ColorPickerSemanticStyles;
  onClick?: MouseEventHandler<HTMLDivElement>;
  onMouseEnter?: MouseEventHandler<HTMLDivElement>;
  onMouseLeave?: MouseEventHandler<HTMLDivElement>;
@@ -27,8 +34,20 @@ export interface ColorTriggerProps {
 }

 const ColorTrigger = forwardRef<HTMLDivElement, ColorTriggerProps>((props, ref) => {
-  const { color, prefixCls, open, disabled, format, className, showText, activeIndex, ...rest } =
-    props;
+  const {
+    color,
+    prefixCls,
+    open,
+    disabled,
+    format,
+    className,
+    style,
+    classNames,
+    styles,
+    showText,
+    activeIndex,
+    ...rest
+  } = props;

  const colorTriggerPrefixCls = `${prefixCls}-trigger`;
  const colorTextPrefixCls = `${colorTriggerPrefixCls}-text`;
@@ -85,24 +104,42 @@ const ColorTrigger = forwardRef<HTMLDivElement, ColorTriggerProps>((props, ref)
  const containerNode = useMemo<React.ReactNode>(
    () =>
      color.cleared ? (
-        <ColorClear prefixCls={prefixCls} />
+        <ColorClear prefixCls={prefixCls} className={classNames.body} style={styles.body} />
      ) : (
-        <ColorBlock prefixCls={prefixCls} color={color.toCssString()} />
+        <ColorBlock
+          prefixCls={prefixCls}
+          color={color.toCssString()}
+          className={classNames.body}
+          innerClassName={classNames.content}
+          style={styles.body}
+          innerStyle={styles.content}
+        />
      ),
-    [color, prefixCls],
+    [color, prefixCls, classNames.body, classNames.content, styles.body, styles.content],
  );

  return (
    <div
      ref={ref}
-      className={clsx(colorTriggerPrefixCls, className, {
+      className={clsx(colorTriggerPrefixCls, className, classNames.root, {
        [`${colorTriggerPrefixCls}-active`]: open,
        [`${colorTriggerPrefixCls}-disabled`]: disabled,
      })}
+      style={{
+        ...styles.root,
+        ...style,
+      }}
      {...pickAttrs(rest)}
    >
      {containerNode}
-      {showText && <div className={colorTextPrefixCls}>{desc}</div>}
+      {showText && (
+        <div
+          className={clsx(colorTextPrefixCls, classNames.description)}
+          style={styles.description}
+        >
+          {desc}
+        </div>
+      )}
    </div>
  );
 });
--- a/components/color-picker/demo/_semantic.tsx
+++ b/components/color-picker/demo/_semantic.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import type { ColorPickerProps } from 'antd';
-import { ColorPicker } from 'antd';
+import { ColorPicker, Flex } from 'antd';

 import useLocale from '../../../.dumi/hooks/useLocale';
 import SemanticPreview from '../../../.dumi/theme/common/SemanticPreview';
@@ -8,10 +8,16 @@ import SemanticPreview from '../../../.dumi/theme/common/SemanticPreview';
 const locales = {
  cn: {
    root: '触发器容器，包含边框样式、过渡动画、尺寸控制等样式，显示颜色块和文本内容',
+    body: '色块容器，包含底色、边框等样式',
+    content: '色块颜色元素，包含实际选择的颜色样式',
+    description: '描述文本内容，包含字体样式、颜色等样式',
    'popup.root': '弹出面板根容器，包含背景色、阴影效果、色彩选择面板、滑块控制和预设颜色等样式',
  },
  en: {
    root: 'Trigger container with border styles, transition animations, size controls, displaying color block and text content',
+    body: 'Color block container with background color, border styles',
+    content: 'Color block element with actual selected color styles',
+    description: 'Description text content with font styles and color',
    'popup.root':
      'Popup panel root container with background color, shadow effects, color selection panel, slider controls and preset colors',
  },
@@ -20,19 +26,21 @@ const locales = {
 const Block: React.FC<Readonly<ColorPickerProps>> = (props) => {
  const divRef = React.useRef<HTMLDivElement>(null);
  return (
-    <div ref={divRef} style={{ height: 300 }}>
+    <Flex ref={divRef} style={{ height: 300 }} align="flex-start" gap="small">
      <ColorPicker
        defaultValue="#1677ff"
        open
+        showText
        {...props}
-        getPopupContainer={() => divRef.current || document.body}
+        getPopupContainer={() => divRef!.current!}
        styles={{
          popup: {
            root: { zIndex: 1 },
          },
        }}
      />
-    </div>
+      <ColorPicker open={false} allowClear {...props} />
+    </Flex>
  );
 };

@@ -43,6 +51,9 @@ const App: React.FC = () => {
      componentName="ColorPicker"
      semantics={[
        { name: 'root', desc: locale.root },
+        { name: 'body', desc: locale.body },
+        { name: 'content', desc: locale.content },
+        { name: 'description', desc: locale.description },
        { name: 'popup.root', desc: locale['popup.root'] },
      ]}
    >
--- a/components/color-picker/interface.ts
+++ b/components/color-picker/interface.ts
@@ -59,10 +59,16 @@ export type ColorPickerSemanticName = keyof ColorPickerSemanticClassNames &

 export type ColorPickerSemanticClassNames = {
  root?: string;
+  body?: string;
+  content?: string;
+  description?: string;
 };

 export type ColorPickerSemanticStyles = {
  root?: React.CSSProperties;
+  body?: React.CSSProperties;
+  content?: React.CSSProperties;
+  description?: React.CSSProperties;
 };

 export type ColorPickerClassNamesType = SemanticClassNamesType<
--- a/components/config-provider/SizeContext.tsx
+++ b/components/config-provider/SizeContext.tsx
@@ -1,6 +1,9 @@
 import * as React from 'react';

-export type SizeType = 'small' | 'middle' | 'large' | undefined;
+/**
+ * Note: `middle` is deprecated and will be removed in v7, please use `medium` instead.
+ */
+export type SizeType = 'small' | 'medium' | 'middle' | 'large' | undefined;

 const SizeContext = React.createContext<SizeType>(undefined);

--- a/components/config-provider/tests/snapshots/components.test.tsx.snap
+++ b/components/config-provider/tests/snapshots/components.test.tsx.snap
--- a/components/config-provider/tests/snapshots/renderEmpty.test.tsx.snap
+++ b/components/config-provider/tests/snapshots/renderEmpty.test.tsx.snap
@@ -33,10 +33,10 @@ exports[`renderEmpty should render Cascader empty 1`] = `
          stroke="#d9d9d9"
        >
          <path
-            d="M55 12.8 44.9 1.3Q44 0 42.9 0H21.1q-1.2 0-2 1.3L9 12.8V22h46z"
+            d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
          />
          <path
-            d="M41.6 16c0-1.7 1-3 2.2-3H55v18.1c0 2.2-1.3 3.9-3 3.9H12c-1.7 0-3-1.7-3-3.9V13h11.2c1.2 0 2.2 1.3 2.2 3s1 2.9 2.2 2.9h14.8c1.2 0 2.2-1.4 2.2-3"
+            d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
            fill="#fafafa"
          />
        </g>
@@ -84,10 +84,10 @@ exports[`renderEmpty should render List empty 1`] = `
          stroke="#d9d9d9"
        >
          <path
-            d="M55 12.8 44.9 1.3Q44 0 42.9 0H21.1q-1.2 0-2 1.3L9 12.8V22h46z"
+            d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
          />
          <path
-            d="M41.6 16c0-1.7 1-3 2.2-3H55v18.1c0 2.2-1.3 3.9-3 3.9H12c-1.7 0-3-1.7-3-3.9V13h11.2c1.2 0 2.2 1.3 2.2 3s1 2.9 2.2 2.9h14.8c1.2 0 2.2-1.4 2.2-3"
+            d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
            fill="#fafafa"
          />
        </g>
@@ -135,10 +135,10 @@ exports[`renderEmpty should render Mentions empty 1`] = `
          stroke="#d9d9d9"
        >
          <path
-            d="M55 12.8 44.9 1.3Q44 0 42.9 0H21.1q-1.2 0-2 1.3L9 12.8V22h46z"
+            d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
          />
          <path
-            d="M41.6 16c0-1.7 1-3 2.2-3H55v18.1c0 2.2-1.3 3.9-3 3.9H12c-1.7 0-3-1.7-3-3.9V13h11.2c1.2 0 2.2 1.3 2.2 3s1 2.9 2.2 2.9h14.8c1.2 0 2.2-1.4 2.2-3"
+            d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
            fill="#fafafa"
          />
        </g>
@@ -186,10 +186,10 @@ exports[`renderEmpty should render Select empty 1`] = `
          stroke="#d9d9d9"
        >
          <path
-            d="M55 12.8 44.9 1.3Q44 0 42.9 0H21.1q-1.2 0-2 1.3L9 12.8V22h46z"
+            d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
          />
          <path
-            d="M41.6 16c0-1.7 1-3 2.2-3H55v18.1c0 2.2-1.3 3.9-3 3.9H12c-1.7 0-3-1.7-3-3.9V13h11.2c1.2 0 2.2 1.3 2.2 3s1 2.9 2.2 2.9h14.8c1.2 0 2.2-1.4 2.2-3"
+            d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
            fill="#fafafa"
          />
        </g>
@@ -237,10 +237,10 @@ exports[`renderEmpty should render Table empty 1`] = `
          stroke="#d9d9d9"
        >
          <path
-            d="M55 12.8 44.9 1.3Q44 0 42.9 0H21.1q-1.2 0-2 1.3L9 12.8V22h46z"
+            d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
          />
          <path
-            d="M41.6 16c0-1.7 1-3 2.2-3H55v18.1c0 2.2-1.3 3.9-3 3.9H12c-1.7 0-3-1.7-3-3.9V13h11.2c1.2 0 2.2 1.3 2.2 3s1 2.9 2.2 2.9h14.8c1.2 0 2.2-1.4 2.2-3"
+            d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
            fill="#fafafa"
          />
        </g>
@@ -290,10 +290,10 @@ exports[`renderEmpty should render Transfer empty 1`] = `
          stroke="#d9d9d9"
        >
          <path
-            d="M55 12.8 44.9 1.3Q44 0 42.9 0H21.1q-1.2 0-2 1.3L9 12.8V22h46z"
+            d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
          />
          <path
-            d="M41.6 16c0-1.7 1-3 2.2-3H55v18.1c0 2.2-1.3 3.9-3 3.9H12c-1.7 0-3-1.7-3-3.9V13h11.2c1.2 0 2.2 1.3 2.2 3s1 2.9 2.2 2.9h14.8c1.2 0 2.2-1.4 2.2-3"
+            d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
            fill="#fafafa"
          />
        </g>
@@ -341,10 +341,10 @@ exports[`renderEmpty should render TreeSelect empty 1`] = `
          stroke="#d9d9d9"
        >
          <path
-            d="M55 12.8 44.9 1.3Q44 0 42.9 0H21.1q-1.2 0-2 1.3L9 12.8V22h46z"
+            d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
          />
          <path
-            d="M41.6 16c0-1.7 1-3 2.2-3H55v18.1c0 2.2-1.3 3.9-3 3.9H12c-1.7 0-3-1.7-3-3.9V13h11.2c1.2 0 2.2 1.3 2.2 3s1 2.9 2.2 2.9h14.8c1.2 0 2.2-1.4 2.2-3"
+            d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
            fill="#fafafa"
          />
        </g>
@@ -380,44 +380,50 @@ exports[`renderEmpty should return empty when componentName is not matched 1`] =
        fill-rule="evenodd"
      >
        <g
-          transform="translate(24 31.7)"
+          transform="translate(24 31.67)"
        >
          <ellipse
-            cx="67.8"
-            cy="106.9"
+            cx="67.797"
+            cy="106.89"
            fill="#F5F5F7"
            fill-opacity=".8"
-            rx="67.8"
-            ry="12.7"
+            rx="67.797"
+            ry="12.668"
          />
          <path
-            d="M122 69.7 98.1 40.2a6 6 0 0 0-4.6-2.2H42.1a6 6 0 0 0-4.6 2.2l-24 29.5V85H122z"
-            fill="#aeb8c2"
+            d="M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z"
+            fill="#AEB8C2"
          />
          <path
-            d="M33.8 0h68a4 4 0 0 1 4 4v93.3a4 4 0 0 1-4 4h-68a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4"
-            fill="#f5f5f7"
+            d="M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z"
+            fill="url(#linearGradient-1)"
+            transform="translate(13.56)"
          />
          <path
-            d="M42.7 10h50.2a2 2 0 0 1 2 2v25a2 2 0 0 1-2 2H42.7a2 2 0 0 1-2-2V12a2 2 0 0 1 2-2m.2 39.8h49.8a2.3 2.3 0 1 1 0 4.5H42.9a2.3 2.3 0 0 1 0-4.5m0 11.7h49.8a2.3 2.3 0 1 1 0 4.6H42.9a2.3 2.3 0 0 1 0-4.6m79 43.5a7 7 0 0 1-6.8 5.4H20.5a7 7 0 0 1-6.7-5.4l-.2-1.8V69.7h26.3c2.9 0 5.2 2.4 5.2 5.4s2.4 5.4 5.3 5.4h34.8c2.9 0 5.3-2.4 5.3-5.4s2.3-5.4 5.2-5.4H122v33.5q0 1-.2 1.8"
-            fill="#dce0e6"
+            d="M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z"
+            fill="#F5F5F7"
+          />
+          <path
+            d="M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z"
+            fill="#DCE0E6"
          />
        </g>
        <path
-          d="m149.1 33.3-6.8 2.6a1 1 0 0 1-1.3-1.2l2-6.2q-4.1-4.5-4.2-10.4c0-10 10.1-18.1 22.6-18.1S184 8.1 184 18.1s-10.1 18-22.6 18q-6.8 0-12.3-2.8"
-          fill="#dce0e6"
+          d="M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z"
+          fill="#DCE0E6"
        />
        <g
-          fill="#fff"
-          transform="translate(149.7 15.4)"
+          fill="#FFF"
+          transform="translate(149.65 15.383)"
        >
-          <circle
-            cx="20.7"
-            cy="3.2"
-            r="2.8"
+          <ellipse
+            cx="20.654"
+            cy="3.167"
+            rx="2.849"
+            ry="2.815"
          />
          <path
-            d="M5.7 5.6H0L2.9.7zM9.3.7h5v5h-5z"
+            d="M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z"
          />
        </g>
      </g>
--- a/components/config-provider/context.ts
+++ b/components/config-provider/context.ts
@@ -298,6 +298,7 @@ export type FormConfig = ComponentStyleConfig &
    | 'variant'
    | 'classNames'
    | 'styles'
+    | 'tooltip'
  >;

 export type FloatButtonConfig = ComponentStyleConfig &
--- a/components/config-provider/index.en-US.md
+++ b/components/config-provider/index.en-US.md
@@ -133,7 +133,7 @@ const {
 | flex | Set Flex common props | { className?: string, style?: React.CSSProperties, vertical?: boolean } | - | 5.10.0 |
 | floatButton | Set FloatButton common props | { className?: string, style?: React.CSSProperties, classNames?: [FloatButtonProps\["classNames"\]](/components/float-button#semantic-dom), styles?: [FloatButtonProps\["styles"\]](/components/float-button#semantic-dom), backTopIcon?: React.ReactNode } | - |  |
 | floatButtonGroup | Set FloatButton.Group common props | { closeIcon?: React.ReactNode, className?: string, style?: React.CSSProperties, classNames?: [FloatButtonProps\["classNames"\]](/components/float-button#semantic-dom), styles?: [FloatButtonProps\["styles"\]](/components/float-button#semantic-dom) } | - |  |
-| form | Set Form common props | { className?: string, style?: React.CSSProperties, validateMessages?: [ValidateMessages](/components/form/#validatemessages), requiredMark?: boolean \| `optional`, scrollToFirstError?: boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options), classNames?:[FormConfig\["classNames"\]](/components/form#semantic-dom), styles?: [FormConfig\["styles"\]](/components/form#semantic-dom) } | - | `requiredMark`: 4.8.0; `colon`: 4.18.0; `scrollToFirstError`: 5.2.0; `className` and `style`: 5.7.0 |
+| form | Set Form common props | { className?: string, style?: React.CSSProperties, validateMessages?: [ValidateMessages](/components/form/#validatemessages), requiredMark?: boolean \| `optional`, scrollToFirstError?: boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options), classNames?:[FormConfig\["classNames"\]](/components/form#semantic-dom), styles?: [FormConfig\["styles"\]](/components/form#semantic-dom), tooltip?: [TooltipProps](/components/tooltip#api) & { icon?: ReactNode } } | - | `requiredMark`: 4.8.0; `colon`: 4.18.0; `scrollToFirstError`: 5.2.0; `className` and `style`: 5.7.0; `tooltip`: 6.3.0 |
 | image | Set Image common props | { className?: string, style?: React.CSSProperties, preview?: { closeIcon?: React.ReactNode, classNames?:[ImageConfig\["classNames"\]](/components/image#semantic-dom), styles?: [ImageConfig\["styles"\]](/components/image#semantic-dom) }, fallback?: string } | - | 5.7.0, `closeIcon`: 5.14.0, `classNames` and `styles`: 6.0.0 |
 | input | Set Input common props | { autoComplete?: string, className?: string, style?: React.CSSProperties, allowClear?: boolean \| { clearIcon?: ReactNode } } | - | 4.2.0, `allowClear`: 5.15.0 |
 | inputNumber | Set InputNumber common props | { className?: string, style?: React.CSSProperties, classNames?: [InputNumberConfig\["classNames"\]](/components/input-number#semantic-dom), styles?: [InputNumberConfig\["styles"\]](/components/input-number#semantic-dom) } | - |  |
--- a/components/config-provider/index.zh-CN.md
+++ b/components/config-provider/index.zh-CN.md
@@ -135,7 +135,7 @@ const {
 | flex | 设置 Flex 组件的通用属性 | { className?: string, style?: React.CSSProperties, vertical?: boolean } | - | 5.10.0 |
 | floatButton | 设置 FloatButton 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: [FloatButtonProps\["classNames"\]](/components/float-button-cn#semantic-dom), styles?: [FloatButtonProps\["styles"\]](/components/float-button-cn#semantic-dom), backTopIcon?: React.ReactNode } | - |  |
 | floatButtonGroup | 设置 FloatButton.Group 组件的通用属性 | { closeIcon?: React.ReactNode, className?: string, style?: React.CSSProperties, classNames?: [FloatButtonProps\["classNames"\]](/components/float-button-cn#semantic-dom), styles?: [FloatButtonProps\["styles"\]](/components/float-button-cn#semantic-dom) } | - |  |
-| form | 设置 Form 组件的通用属性 | { className?: string, style?: React.CSSProperties, validateMessages?: [ValidateMessages](/components/form-cn#validatemessages), requiredMark?: boolean \| `optional`, colon?: boolean, scrollToFirstError?: boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options), classNames?:[FormConfig\["classNames"\]](/components/form-cn#semantic-dom), styles?: [FormConfig\["styles"\]](/components/form-cn#semantic-dom) } | - | `requiredMark`: 4.8.0; `colon`: 4.18.0; `scrollToFirstError`: 5.2.0; `className` 和 `style`: 5.7.0 |
+| form | 设置 Form 组件的通用属性 | { className?: string, style?: React.CSSProperties, validateMessages?: [ValidateMessages](/components/form-cn#validatemessages), requiredMark?: boolean \| `optional`, colon?: boolean, scrollToFirstError?: boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options), classNames?:[FormConfig\["classNames"\]](/components/form-cn#semantic-dom), styles?: [FormConfig\["styles"\]](/components/form-cn#semantic-dom), tooltip?: [TooltipProps](/components/tooltip-cn#api) & { icon?: ReactNode } } | - | `requiredMark`: 4.8.0; `colon`: 4.18.0; `scrollToFirstError`: 5.2.0; `className` 和 `style`: 5.7.0; `tooltip`: 6.3.0 |
 | image | 设置 Image 组件的通用属性 | { className?: string, style?: React.CSSProperties, preview?: { closeIcon?: React.ReactNode, classNames?:[ImageConfig\["classNames"\]](/components/image-cn#semantic-dom), styles?: [ImageConfig\["styles"\]](/components/image-cn#semantic-dom) }, fallback?: string } | - | 5.7.0, `closeIcon`: 5.14.0, `classNames` 和 `styles`: 6.0.0 |
 | input | 设置 Input 组件的通用属性 | { autoComplete?: string, className?: string, style?: React.CSSProperties,classNames?:[InputConfig\["classNames"\]](/components/input-cn#semantic-input), styles?: [InputConfig\["styles"\]](/components/input-cn#semantic-input), allowClear?: boolean \| { clearIcon?: ReactNode } } | - | 5.7.0, `allowClear`: 5.15.0 |
 | inputNumber | 设置 Input 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: [InputNumberConfig\["classNames"\]](/components/input-number-cn#semantic-dom), styles?: [InputNumberConfig\["styles"\]](/components/input-number-cn#semantic-dom) } | - |  |
--- a/components/date-picker/tests/DatePicker.test.tsx
+++ b/components/date-picker/tests/DatePicker.test.tsx
@@ -491,10 +491,10 @@ describe('DatePicker', () => {
    expect(container.querySelector('.ant-picker-suffix')!.children.length).toBeTruthy();

    rerender(<DatePicker suffixIcon={false} />);
-    expect(container.querySelector('.ant-picker-suffix')).toBeFalsy();
+    expect(container.querySelector('.ant-picker-suffix')!.children.length).toBeFalsy();

    rerender(<DatePicker suffixIcon={null} />);
-    expect(container.querySelector('.ant-picker-suffix')).toBeFalsy();
+    expect(container.querySelector('.ant-picker-suffix')!.children.length).toBeFalsy();

    rerender(<DatePicker suffixIcon={'123'} />);
    expect(container.querySelector('.ant-picker-suffix')?.textContent).toBe('123');
--- a/components/date-picker/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/date-picker/tests/snapshots/demo-extend.test.ts.snap
@@ -85686,6 +85686,9 @@ exports[`renders components/date-picker/demo/suffixIcon-debug.tsx extend context
          size="12"
          value=""
        />
+        <span
+          class="ant-picker-suffix"
+        />
      </div>
    </div>
    <div
@@ -86897,6 +86900,9 @@ exports[`renders components/date-picker/demo/suffixIcon-debug.tsx extend context
          size="12"
          value=""
        />
+        <span
+          class="ant-picker-suffix"
+        />
      </div>
    </div>
    <div
@@ -88094,6 +88100,7 @@ exports[`renders components/date-picker/demo/switchable.tsx extend context corre
      >
        <div
          class="ant-select-content-value"
+          style="visibility: visible;"
          title="Time"
        >
          Time
--- a/components/date-picker/tests/snapshots/demo-semantic.test.tsx.snap
+++ b/components/date-picker/tests/snapshots/demo-semantic.test.tsx.snap
--- a/components/date-picker/tests/snapshots/demo.test.tsx.snap
+++ b/components/date-picker/tests/snapshots/demo.test.tsx.snap
@@ -7564,6 +7564,9 @@ exports[`renders components/date-picker/demo/suffixIcon-debug.tsx correctly 1`]
          size="12"
          value=""
        />
+        <span
+          class="ant-picker-suffix"
+        />
      </div>
    </div>
  </div>
@@ -7625,6 +7628,9 @@ exports[`renders components/date-picker/demo/suffixIcon-debug.tsx correctly 1`]
          size="12"
          value=""
        />
+        <span
+          class="ant-picker-suffix"
+        />
      </div>
    </div>
  </div>
@@ -7670,6 +7676,7 @@ exports[`renders components/date-picker/demo/switchable.tsx correctly 1`] = `
      >
        <div
          class="ant-select-content-value"
+          style="visibility:visible"
          title="Time"
        >
          Time
--- a/components/date-picker/tests/demo-semantic.test.tsx
+++ b/components/date-picker/tests/demo-semantic.test.tsx
@@ -1,3 +0,0 @@
-import { createPostFn, semanticDemoTest } from '../../../tests/shared/demoTest';
-
-semanticDemoTest('date-picker', { postRenderFn: createPostFn(['Multiple']) });
--- a/components/date-picker/generatePicker/useSuffixIcon.tsx
+++ b/components/date-picker/generatePicker/useSuffixIcon.tsx
@@ -3,16 +3,21 @@ import CalendarOutlined from '@ant-design/icons/CalendarOutlined';
 import ClockCircleOutlined from '@ant-design/icons/ClockCircleOutlined';
 import type { PickerMode } from '@rc-component/picker/interface';

-import { TIME } from './constant';
+import { TIME } from '../generatePicker/constant';

-interface UseSuffixIconProps {
+interface SuffixIconProps {
  picker?: PickerMode;
  hasFeedback?: boolean;
  feedbackIcon?: React.ReactNode;
  suffixIcon?: React.ReactNode;
 }

-const useSuffixIcon = ({ picker, hasFeedback, feedbackIcon, suffixIcon }: UseSuffixIconProps) => {
+const SuffixIcon: React.FC<SuffixIconProps> = ({
+  picker,
+  hasFeedback,
+  feedbackIcon,
+  suffixIcon,
+}) => {
  if (suffixIcon === null || suffixIcon === false) {
    return null;
  }
@@ -28,4 +33,4 @@ const useSuffixIcon = ({ picker, hasFeedback, feedbackIcon, suffixIcon }: UseSuf
  return suffixIcon;
 };

-export default useSuffixIcon;
+export default SuffixIcon;
--- a/components/date-picker/generatePicker/generateRangePicker.tsx
+++ b/components/date-picker/generatePicker/generateRangePicker.tsx
@@ -26,7 +26,7 @@ import useStyle from '../style';
 import { getRangePlaceholder, useIcons } from '../util';
 import { TIME } from './constant';
 import type { PickerLocale, RangePickerProps } from './interface';
-import useSuffixIcon from './useSuffixIcon';
+import SuffixIcon from './SuffixIcon';
 import useComponents from './useComponents';

 const generateRangePicker = <DateType extends AnyObject = AnyObject>(
@@ -113,7 +113,7 @@ const generateRangePicker = <DateType extends AnyObject = AnyObject>(
    // ===================== FormItemInput =====================
    const formItemContext = useContext(FormItemInputContext);
    const { hasFeedback, status: contextStatus, feedbackIcon } = formItemContext;
-    const mergedSuffixIcon = useSuffixIcon({ picker, hasFeedback, feedbackIcon, suffixIcon });
+    const mergedSuffixIcon = <SuffixIcon {...{ picker, hasFeedback, feedbackIcon, suffixIcon }} />;
    useImperativeHandle(ref, () => innerRef.current!);

    const [contextLocale] = useLocale('Calendar', enUS);
--- a/components/date-picker/generatePicker/generateSinglePicker.tsx
+++ b/components/date-picker/generatePicker/generateSinglePicker.tsx
@@ -42,7 +42,7 @@ import type {
  PickerProps,
  PickerPropsWithMultiple,
 } from './interface';
-import useSuffixIcon from './useSuffixIcon';
+import SuffixIcon from './SuffixIcon';
 import useComponents from './useComponents';

 const generatePicker = <DateType extends AnyObject = AnyObject>(
@@ -178,12 +178,9 @@ const generatePicker = <DateType extends AnyObject = AnyObject>(
      const formItemContext = useContext(FormItemInputContext);
      const { hasFeedback, status: contextStatus, feedbackIcon } = formItemContext;

-      const mergedSuffixIcon = useSuffixIcon({
-        picker: mergedPicker,
-        hasFeedback,
-        feedbackIcon,
-        suffixIcon,
-      });
+      const mergedSuffixIcon = (
+        <SuffixIcon {...{ picker: mergedPicker, hasFeedback, feedbackIcon, suffixIcon }} />
+      );
      const [contextLocale] = useLocale('DatePicker', enUS);

      const locale = merge(contextLocale, (props.locale || {}) as PickerLocale);
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
遇见同学	c1cc97c90e	chore: adjust	2026-01-15 10:24:42 +08:00
遇见同学	06a4287d73	Update .dumi/pages/index/components/PreviewBanner/ComponentsBlock.tsx Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> Signed-off-by: 遇见同学 <1875694521@qq.com>	2026-01-15 10:24:41 +08:00
遇见同学	37a3ef15d8	Update .dumi/pages/index/index.tsx Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> Signed-off-by: 遇见同学 <1875694521@qq.com>	2026-01-15 10:24:41 +08:00
遇见同学	b22a7108cf	Update .dumi/pages/index/components/BannerRecommends.tsx Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> Signed-off-by: 遇见同学 <1875694521@qq.com>	2026-01-15 10:24:40 +08:00
遇见同学	67305c0ace	site: Homepage style redesign, theme switching	2026-01-15 10:24:39 +08:00
github-actions[bot]	4ab542e7c3	chore: auto merge branches (#56614 ) chore: sync master into feature	2026-01-15 02:22:27 +00:00
二货爱吃白萝卜	3e0b56dacf	feat: ColorPicker semantic support ColorBlock customize (#56607 ) * feat: ColorPicker missing semantic * chore: fix lint * test: update snapshot * chore: fix lint	2026-01-14 17:53:23 +08:00
Guo Yunhe	7d35e112ae	feat(ConfigProvider,Form): support tooltip prop and config (#56372 ) * feat(ConfigProvider,Form): support tooltipIcon and tooltipProps * feat(ConfigProvider,Form): support tooltipIcon and tooltipProps * feat(ConfigProvider,Form): support tooltipIcon and tooltipProps * feat(Form): support tooltip config * feat(Form): support tooltip config * fix(Form): remove unnecessary type assertion in tooltip prop * refactor(Form): enhance tooltip prop handling by merging context with tooltip properties --------- Co-authored-by: thinkasany <480968828@qq.com>	2026-01-14 16:23:30 +08:00
Guo Yunhe	6e55573b5c	feat(Avatar): size default to 'medium' instead of 'default' for consistancy (#56440 ) Co-authored-by: 遇见同学 <1875694521@qq.com>	2026-01-14 13:18:27 +08:00
github-actions[bot]	0e4f60dd01	chore: auto merge branches (#56601 ) chore: sync master into feature	2026-01-14 02:16:19 +00:00
github-actions[bot]	98614197cb	chore: auto merge branches (#56596 ) chore: sync master into feature	2026-01-13 12:57:25 +00:00