reorder imports and improve code consistency across components

.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;

.dumi/hooks/useMenu.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import type { MenuProps } from 'antd';
 import { Flex, Tag, version } from 'antd';
-import { createStaticStyles } from 'antd-style';
+import { createStyles } from 'antd-style';
 import { clsx } from 'clsx';
 import { useFullSidebarData, useSidebarData } from 'dumi';
 
@@ -12,28 +12,29 @@ import useLocation from './useLocation';
 const locales = {
   cn: {
     deprecated: '废弃',
-    updated: '更新',
+    update: '更新',
     new: '新增',
   },
   en: {
     deprecated: 'DEPRECATED',
-    updated: 'UPDATED',
+    update: 'UPDATE',
     new: 'NEW',
   },
 };
 
 const getTagColor = (val?: string) => {
   switch (val?.toUpperCase()) {
-    case 'UPDATED':
+    case 'UPDATE':
       return 'processing';
     case 'DEPRECATED':
       return 'red';
+
     default:
       return 'success';
   }
 };
 
-const styles = createStaticStyles(({ css, cssVar }) => ({
+const useStyle = createStyles(({ css, cssVar }) => ({
   link: css`
     display: flex;
     align-items: center;
@@ -46,7 +47,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     font-weight: normal;
     font-size: ${cssVar.fontSizeSM};
     opacity: 0.8;
-    margin-inline-start: ${cssVar.marginSM};
+    margin-left: 4px;
   `,
 }));
 
@@ -62,10 +63,10 @@ interface MenuItemLabelProps {
 }
 
 const MenuItemLabelWithTag: React.FC<MenuItemLabelProps> = (props) => {
+  const { styles } = useStyle();
   const { before, after, link, title, subtitle, search, tag, className } = props;
 
   const [locale] = useLocale(locales);
-
   const getLocale = (name: string) => {
     return (locale as any)[name.toLowerCase()] ?? name;
   };
@@ -73,7 +74,7 @@ const MenuItemLabelWithTag: React.FC<MenuItemLabelProps> = (props) => {
   if (!before && !after) {
     return (
       <Link to={`${link}${search}`} className={clsx(className, { [styles.link]: tag })}>
-        <Flex justify="flex-start" align="center">
+        <Flex justify="flex-start" align="center" gap="small">
           <span>{title}</span>
           {subtitle && <span className={styles.subtitle}>{subtitle}</span>}
         </Flex>

.dumi/hooks/useThemeAnimation.ts

@@ -3,14 +3,10 @@ import { removeCSS, updateCSS } from '@rc-component/util/lib/Dom/dynamicCSS';
 
 import theme from '../../components/theme';
 
-const duration = 0.5;
 const viewTransitionStyle = `
-@keyframes keepAlive {100% { z-index: -1 }}
-
 ::view-transition-old(root),
 ::view-transition-new(root) {
-  animation: keepAlive ${duration}s linear;
-  animation-fill-mode: forwards;
+  animation: none;
   mix-blend-mode: normal;
 }
 
@@ -54,7 +50,7 @@ const useThemeAnimation = () => {
           clipPath: isDark ? [...clipPath].reverse() : clipPath,
         },
         {
-          duration: duration * 1000,
+          duration: 500,
           easing: 'ease-in',
           pseudoElement: isDark ? '::view-transition-old(root)' : '::view-transition-new(root)',
         },

.dumi/pages/index/components/ComponentsList.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { CustomerServiceOutlined, QuestionCircleOutlined, SyncOutlined } from '@ant-design/icons';
 import {
-  Card,
+  Alert,
   Carousel,
   DatePicker,
   Flex,
   FloatButton,
-  Masonry,
-  Splitter,
+  Modal,
+  Progress,
   Tag,
   Tour,
   Typography,
@@ -21,6 +21,7 @@ import SiteContext from '../../../theme/slots/SiteContext';
 import { DarkContext } from './../../../hooks/useDark';
 import { getCarouselStyle } from './util';
 
+const { _InternalPanelDoNotUseOrYouWillBeFired: ModalDoNotUseOrYouWillBeFired } = Modal;
 const { _InternalPanelDoNotUseOrYouWillBeFired: DatePickerDoNotUseOrYouWillBeFired } = DatePicker;
 const { _InternalPanelDoNotUseOrYouWillBeFired: TourDoNotUseOrYouWillBeFired } = Tour;
 const { _InternalPanelDoNotUseOrYouWillBeFired: FloatButtonDoNotUseOrYouWillBeFired } = FloatButton;
@@ -147,26 +148,24 @@ const ComponentsList: React.FC = () => {
   const { styles } = useStyle();
   const [locale] = useLocale(locales);
   const { isMobile } = React.use(SiteContext);
-  const isDark = React.use(DarkContext);
   const COMPONENTS = React.useMemo<Omit<ComponentItemProps, 'index'>[]>(
     () => [
-      // {
-      //   title: 'Modal',
-      //   type: 'update',
-      //   node: (
-      //     <ModalDoNotUseOrYouWillBeFired title="Ant Design" width={300}>
-      //       {locale.sampleContent}
-      //     </ModalDoNotUseOrYouWillBeFired>
-      //   ),
-      // },
+      {
+        title: 'Modal',
+        type: 'update',
+        node: (
+          <ModalDoNotUseOrYouWillBeFired title="Ant Design" width={300}>
+            {locale.sampleContent}
+          </ModalDoNotUseOrYouWillBeFired>
+        ),
+      },
 
       {
         title: 'DatePicker',
         type: 'update',
         node: (
           <DatePickerDoNotUseOrYouWillBeFired
-            value={dayjs('2025-11-22 00:00:00')}
-            // defaultValue={dayjs('2025-11-22 00:00:00')}
+            value={dayjs('2022-11-18 14:00:00')}
             showToday={false}
             presets={
               isMobile
@@ -181,30 +180,30 @@ const ComponentsList: React.FC = () => {
           />
         ),
       },
-      // {
-      //   title: 'Progress',
-      //   type: 'update',
-      //   node: (
-      //     <Flex gap="small" vertical>
-      //       <Flex gap="small" align="center">
-      //         <Progress type="circle" railColor="#e6f4ff" percent={60} size={14} />
-      //         {locale.inProgress}
-      //       </Flex>
-      //       <Flex gap="small" align="center">
-      //         <Progress type="circle" percent={100} size={14} />
-      //         {locale.success}
-      //       </Flex>
-      //       <Flex gap="small" align="center">
-      //         <Progress type="circle" status="exception" percent={88} size={14} />
-      //         {locale.taskFailed}
-      //       </Flex>
-      //     </Flex>
-      //   ),
-      // },
 
       {
-        title: 'Tour',
+        title: 'Progress',
         type: 'update',
+        node: (
+          <Flex gap="small" vertical>
+            <Flex gap="small" align="center">
+              <Progress type="circle" railColor="#e6f4ff" percent={60} size={14} />
+              {locale.inProgress}
+            </Flex>
+            <Flex gap="small" align="center">
+              <Progress type="circle" percent={100} size={14} />
+              {locale.success}
+            </Flex>
+            <Flex gap="small" align="center">
+              <Progress type="circle" status="exception" percent={88} size={14} />
+              {locale.taskFailed}
+            </Flex>
+          </Flex>
+        ),
+      },
+      {
+        title: 'Tour',
+        type: 'new',
         node: (
           <TourDoNotUseOrYouWillBeFired
             title="Ant Design"
@@ -215,10 +214,9 @@ const ComponentsList: React.FC = () => {
           />
         ),
       },
-
       {
         title: 'FloatButton',
-        type: 'update',
+        type: 'new',
         node: (
           <Flex align="center" gap="large">
             <FloatButtonDoNotUseOrYouWillBeFired
@@ -248,83 +246,19 @@ const ComponentsList: React.FC = () => {
       // },
 
       {
-        title: 'Splitter',
-        type: 'new',
+        title: 'Alert',
+        type: 'update',
         node: (
-          <Splitter
-            orientation="vertical"
-            style={{
-              height: 320,
-              width: 200,
-              background: isDark ? '#1f1f1f' : '#ffffff',
-              boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)',
-            }}
-          >
-            <Splitter.Panel defaultSize="40%" min="20%" max="70%">
-              <Flex justify="center" align="center" style={{ height: '100%' }}>
-                <Typography.Title type="secondary" level={5} style={{ whiteSpace: 'nowrap' }}>
-                  First
-                </Typography.Title>
-              </Flex>
-            </Splitter.Panel>
-
-            <Splitter.Panel>
-              <Flex justify="center" align="center" style={{ height: '100%' }}>
-                <Typography.Title type="secondary" level={5} style={{ whiteSpace: 'nowrap' }}>
-                  Second
-                </Typography.Title>
-              </Flex>
-            </Splitter.Panel>
-          </Splitter>
-        ),
-      },
-
-      {
-        title: 'Masonry',
-        type: 'new',
-        node: (
-          <Masonry
-            columns={2}
-            gutter={8}
-            style={{
-              width: 300,
-              height: 320,
-            }}
-            items={[
-              { key: '1', data: 80 },
-              { key: '2', data: 60 },
-              { key: '3', data: 40 },
-              { key: '4', data: 120 },
-              { key: '5', data: 90 },
-              { key: '6', data: 40 },
-              { key: '7', data: 60 },
-              { key: '8', data: 70 },
-              { key: '9', data: 120 },
-            ]}
-            itemRender={({ data, index }) => (
-              <Card size="small" style={{ height: data }}>
-                {index + 1}
-              </Card>
-            )}
+          <Alert
+            style={{ width: 400 }}
+            title="Ant Design"
+            description={locale.sampleContent}
+            closable={{ closeIcon: true, disabled: true }}
           />
         ),
       },
-
-      // {
-      //   title: 'Alert',
-      //   type: 'update',
-      //   node: (
-      //     <Alert
-      //       style={{ width: 400 }}
-      //       title="Ant Design"
-      //       description={locale.sampleContent}
-      //       closable={{ closeIcon: true, disabled: true }}
-      //     />
-      //   ),
-      // },
     ],
     [
-      isDark,
       isMobile,
       locale.inProgress,
       locale.lastMonth,

.dumi/pages/index/components/Group.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { Typography } from 'antd';
-import { createStaticStyles, useTheme } from 'antd-style';
+import { createStyles, useTheme } from 'antd-style';
 import { clsx } from 'clsx';
 
 import SiteContext from '../../../theme/slots/SiteContext';
 import GroupMaskLayer from './GroupMaskLayer';
 
-const styles = createStaticStyles(({ css, cssVar }) => ({
+const useStyle = createStyles(({ css, cssVar }) => ({
   box: css`
     position: relative;
     transition: all ${cssVar.motionDurationSlow};
@@ -46,6 +46,7 @@ export interface GroupProps {
 const Group: React.FC<React.PropsWithChildren<GroupProps>> = (props) => {
   const { id, title, titleColor, description, children, decoration, background, collapse } = props;
   const token = useTheme();
+  const { styles } = useStyle();
   const { isMobile } = React.use(SiteContext);
   return (
     <div style={{ backgroundColor: background }} className={styles.box}>

.dumi/pages/index/components/GroupMaskLayer.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { createStaticStyles } from 'antd-style';
+import { createStyles } from 'antd-style';
 import { clsx } from 'clsx';
 
-const classNames = createStaticStyles(({ css }) => ({
+const useStyle = createStyles(({ css }) => ({
   siteMask: css`
     z-index: 1;
     position: relative;
@@ -19,10 +19,11 @@ export interface GroupMaskLayerProps {
 
 const GroupMaskLayer: React.FC<React.PropsWithChildren<GroupMaskLayerProps>> = (props) => {
   const { children, className, style, onMouseMove, onMouseEnter, onMouseLeave } = props;
+  const { styles } = useStyle();
   return (
     <div
       style={style}
-      className={clsx(className, classNames.siteMask)}
+      className={clsx(className, styles.siteMask)}
       onMouseMove={onMouseMove}
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}

.dumi/pages/index/components/PreviewBanner/ComponentsBlock.tsx

@@ -17,7 +17,7 @@ import {
   Switch,
   Tooltip,
 } from 'antd';
-import { createStaticStyles } from 'antd-style';
+import { createStyles } from 'antd-style';
 
 import useLocale from '../../../../hooks/useLocale';
 import Tilt from './Tilt';
@@ -71,7 +71,7 @@ const locales = {
   },
 };
 
-const styles = createStaticStyles(({ cssVar, css }) => {
+const useStyle = createStyles(({ cssVar, css }) => {
   const gap = cssVar.padding;
   return {
     holder: css`
@@ -106,6 +106,7 @@ const styles = createStaticStyles(({ cssVar, css }) => {
 
 const ComponentsBlock: React.FC = () => {
   const [locale] = useLocale(locales);
+  const { styles } = useStyle();
 
   return (
     <Tilt options={{ max: 4, glare: false, scale: 0.98 }} className={styles.holder}>

.dumi/pages/index/components/Theme/BackgroundImage.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo, useState } from 'react';
 import { CSSMotionList } from '@rc-component/motion';
-import { createStaticStyles } from 'antd-style';
+import { createStyles, css } from 'antd-style';
 import { clsx } from 'clsx';
 
 import { COLOR_IMAGES, getClosetColor } from './colorUtil';
@@ -10,7 +10,7 @@ export interface BackgroundImageProps {
   isLight?: boolean;
 }
 
-const styles = createStaticStyles(({ css, cssVar }) => ({
+const useStyle = createStyles(({ cssVar }) => ({
   image: css`
     transition: all ${cssVar.motionDurationSlow};
     position: absolute;
@@ -29,6 +29,7 @@ const onHide = () => ({ opacity: 0 });
 
 const BackgroundImage: React.FC<BackgroundImageProps> = ({ colorPrimary, isLight }) => {
   const activeColor = useMemo(() => getClosetColor(colorPrimary), [colorPrimary]);
+  const { styles } = useStyle();
 
   const [keyList, setKeyList] = useState<string[]>([]);
 

.dumi/pages/index/components/Theme/ColorPicker.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { ColorPicker, Flex, Input } from 'antd';
 import type { ColorPickerProps, GetProp } from 'antd';
-import { createStaticStyles } from 'antd-style';
+import { createStyles } from 'antd-style';
 import { generateColor } from 'antd/es/color-picker/util';
 import { clsx } from 'clsx';
 
@@ -9,7 +9,7 @@ import { PRESET_COLORS } from './colorUtil';
 
 type Color = Extract<GetProp<ColorPickerProps, 'value'>, string | { cleared: any }>;
 
-const styles = createStaticStyles(({ cssVar, css }) => ({
+const useStyle = createStyles(({ cssVar, css }) => ({
   color: css`
     width: calc(${cssVar.controlHeightLG} / 2);
     height: calc(${cssVar.controlHeightLG} / 2);
@@ -69,6 +69,8 @@ const DebouncedColorPicker: React.FC<React.PropsWithChildren<ThemeColorPickerPro
 };
 
 const ThemeColorPicker: React.FC<ThemeColorPickerProps> = ({ value, onChange, id }) => {
+  const { styles } = useStyle();
+
   const matchColors = React.useMemo(() => {
     const valueStr = generateColor(value || '').toRgbString();
     const colors = PRESET_COLORS.map((color) => {

.dumi/pages/index/components/Theme/ThemePicker.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Flex } from 'antd';
-import { createStaticStyles } from 'antd-style';
+import { createStyles } from 'antd-style';
 import { clsx } from 'clsx';
 
 import useLocale from '../../../../hooks/useLocale';
@@ -32,7 +32,7 @@ const locales = {
   },
 };
 
-const styles = createStaticStyles(({ cssVar, css }) => ({
+const useStyle = createStyles(({ cssVar, css }) => ({
   themeCard: css`
     border-radius: ${cssVar.borderRadius};
     cursor: pointer;
@@ -80,6 +80,7 @@ export interface ThemePickerProps {
 
 const ThemePicker: React.FC<ThemePickerProps> = (props) => {
   const { value, id, onChange } = props;
+  const { styles } = useStyle();
   const [locale] = useLocale(locales);
   return (
     <Flex gap="large" wrap>

.dumi/pages/index/components/Theme/index.tsx

@@ -20,7 +20,7 @@ import {
   theme,
   Typography,
 } from 'antd';
-import { createStaticStyles } from 'antd-style';
+import { createStyles } from 'antd-style';
 import { generateColor } from 'antd/es/color-picker/util';
 import { clsx } from 'clsx';
 import { useLocation } from 'dumi';
@@ -92,7 +92,7 @@ const locales = {
 };
 
 // ============================= Style =============================
-const styles = createStaticStyles(({ cssVar, css, cx }) => {
+const useStyle = createStyles(({ cssVar, css, cx }) => {
   const { carousel } = getCarouselStyle();
   const demo = css`
     overflow: hidden;
@@ -345,6 +345,7 @@ function rgbToColorMatrix(color: string) {
 }
 
 const Theme: React.FC = () => {
+  const { styles } = useStyle();
   const [locale, lang] = useLocale(locales);
   const isZhCN = lang === 'cn';
   const { search } = useLocation();

.dumi/pages/index/components/util.ts

@@ -1,3 +1,4 @@
+/* eslint-disable compat/compat */
 import { css } from 'antd-style';
 import useSWR from 'swr';
 

.dumi/pages/index/index.tsx

@@ -1,6 +1,6 @@
 import React, { Suspense } from 'react';
 import { ConfigProvider, theme } from 'antd';
-import { createStaticStyles } from 'antd-style';
+import { createStyles, css } from 'antd-style';
 
 import useLocale from '../../hooks/useLocale';
 import { DarkContext } from './../../hooks/useDark';
@@ -12,7 +12,7 @@ const ComponentsList = React.lazy(() => import('./components/ComponentsList'));
 const DesignFramework = React.lazy(() => import('./components/DesignFramework'));
 const Theme = React.lazy(() => import('./components/Theme'));
 
-const classNames = createStaticStyles(({ css }) => ({
+const useStyle = createStyles(() => ({
   image: css`
     position: absolute;
     inset-inline-start: 0;
@@ -38,6 +38,7 @@ const locales = {
 
 const Homepage: React.FC = () => {
   const [locale] = useLocale(locales);
+  const { styles } = useStyle();
   const { token } = theme.useToken();
 
   const isDark = React.use(DarkContext);
@@ -77,7 +78,7 @@ const Homepage: React.FC = () => {
           decoration={
             <img
               draggable={false}
-              className={classNames.image}
+              className={styles.image}
               src="https://gw.alipayobjects.com/zos/bmw-prod/ba37a413-28e6-4be4-b1c5-01be1a0ebb1c.svg"
               alt="bg"
             />

.dumi/pages/theme-editor/index.tsx

@@ -1,6 +1,6 @@
 import React, { Suspense } from 'react';
 import { App, Button, ConfigProvider, Skeleton, version } from 'antd';
-import { createStaticStyles } from 'antd-style';
+import { createStyles } from 'antd-style';
 import { enUS, zhCN } from 'antd-token-previewer';
 import type { ThemeConfig } from 'antd/es/config-provider/context';
 import { Helmet } from 'dumi';
@@ -9,7 +9,7 @@ import useLocale from '../../hooks/useLocale';
 
 const ThemeEditor = React.lazy(() => import('antd-token-previewer/lib/ThemeEditor'));
 
-const classNames = createStaticStyles(({ css }) => ({
+const useStyle = createStyles(({ css }) => ({
   editor: css`
     svg,
     img {
@@ -49,6 +49,7 @@ const ANT_DESIGN_V5_THEME_EDITOR_THEME = `ant-design-v${antdMajor}-theme-editor-
 const CustomTheme: React.FC = () => {
   const { message } = App.useApp();
   const [locale, lang] = useLocale(locales);
+  const { styles } = useStyle();
 
   const [theme, setTheme] = React.useState<ThemeConfig>(() => {
     try {
@@ -77,7 +78,7 @@ const CustomTheme: React.FC = () => {
             hideAdvancedSwitcher
             theme={{ name: 'Custom Theme', key: 'test', config: theme }}
             style={{ height: 'calc(100vh - 64px)' }}
-            className={classNames.editor}
+            className={styles.editor}
             onThemeChange={(newTheme) => {
               setTheme(newTheme.config);
             }}

.dumi/theme/SiteThemeProvider.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
+import { updateCSS } from '@rc-component/util/lib/Dom/dynamicCSS';
 import { theme as antdTheme, ConfigProvider } from 'antd';
 import type { ThemeConfig } from 'antd';
 import type { ThemeProviderProps } from 'antd-style';
 import { ThemeProvider } from 'antd-style';
-import { updateCSS } from '@rc-component/util/lib/Dom/dynamicCSS';
 
 import SiteContext from './slots/SiteContext';
 

.dumi/theme/builtins/Audio/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { SoundOutlined } from '@ant-design/icons';
-import { createStaticStyles } from 'antd-style';
+import { createStyles } from 'antd-style';
 
-const styles = createStaticStyles(({ css, cssVar }) => {
+const useStyle = createStyles(({ css, cssVar }) => {
   return {
     playBtn: css`
       display: inline-flex;
@@ -30,6 +30,7 @@ interface AudioProps {
 }
 
 const AudioControl: React.FC<React.PropsWithChildren<AudioProps>> = ({ id, children }) => {
+  const { styles } = useStyle();
   const onClick: React.MouseEventHandler<HTMLAnchorElement> = () => {
     const audio = document.querySelector<HTMLAudioElement>(`#${id}`);
     audio?.play();

.dumi/theme/builtins/ComponentOverview/index.tsx

@@ -2,7 +2,7 @@ import React, { memo, useMemo, useRef, useState } from 'react';
 import type { CSSProperties } from 'react';
 import { SearchOutlined } from '@ant-design/icons';
 import { Affix, Card, Col, Divider, Flex, Input, Row, Tag, Typography } from 'antd';
-import { createStaticStyles, useTheme } from 'antd-style';
+import { createStyles, useTheme } from 'antd-style';
 import { useIntl, useLocation, useSidebarData } from 'dumi';
 import debounce from 'lodash/debounce';
 import scrollIntoView from 'scroll-into-view-if-needed';
@@ -12,7 +12,7 @@ import SiteContext from '../../slots/SiteContext';
 import type { Component } from './ProComponentsList';
 import proComponentsList from './ProComponentsList';
 
-const styles = createStaticStyles(({ cssVar, css }) => ({
+const useStyle = createStyles(({ cssVar, css }) => ({
   componentsOverviewGroupTitle: css`
     margin-bottom: ${cssVar.marginLG} !important;
   `,
@@ -78,6 +78,7 @@ const reportSearch = debounce<(value: string) => void>((value) => {
 const { Title } = Typography;
 
 const Overview: React.FC = () => {
+  const { styles } = useStyle();
   const { isDark } = React.use(SiteContext);
 
   const data = useSidebarData();
@@ -226,7 +227,7 @@ const Overview: React.FC = () => {
                             src={
                               isDark && component.coverDark ? component.coverDark : component.cover
                             }
-                            alt=""
+                            alt={component.title}
                           />
                         </div>
                       </Card>

.dumi/theme/builtins/ComponentTokenTable/index.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo, useState } from 'react';
 import { LinkOutlined, QuestionCircleOutlined, RightOutlined } from '@ant-design/icons';
 import { ConfigProvider, Flex, Popover, Table, Typography } from 'antd';
-import { createStaticStyles, css, useTheme } from 'antd-style';
+import { createStyles, css, useTheme } from 'antd-style';
 import { getDesignToken } from 'antd-token-previewer';
 import tokenMeta from 'antd/es/version/token-meta.json';
 import tokenData from 'antd/es/version/token.json';
@@ -53,7 +53,7 @@ const locales = {
   },
 };
 
-const styles = createStaticStyles(({ cssVar }) => ({
+const useStyle = createStyles(({ cssVar }) => ({
   tableTitle: css`
     cursor: pointer;
     position: relative;
@@ -104,6 +104,8 @@ const SubTokenTable: React.FC<SubTokenTableProps> = (props) => {
 
   const [open, setOpen] = useState<boolean>(defaultOpen ?? process.env.NODE_ENV !== 'production');
 
+  const { styles } = useStyle();
+
   if (!tokens.length) {
     return null;
   }

.dumi/theme/builtins/IconSearch/Category.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { App } from 'antd';
-import { createStaticStyles } from 'antd-style';
+import { createStyles } from 'antd-style';
 import { useIntl } from 'dumi';
 
 import CopyableIcon from './CopyableIcon';
 import type { CategoriesKeys } from './fields';
 import type { ThemeType } from './IconSearch';
 
-const styles = createStaticStyles(({ css, cssVar }) => ({
+const useStyle = createStyles(({ css, cssVar }) => ({
   anticonsList: css`
     margin: ${cssVar.margin} 0;
     overflow: hidden;
@@ -36,6 +36,7 @@ interface CategoryProps {
 const Category: React.FC<CategoryProps> = (props) => {
   const { message } = App.useApp();
   const { icons, title, newIcons, theme } = props;
+  const { styles } = useStyle();
   const intl = useIntl();
   const [justCopied, setJustCopied] = React.useState<string | null>(null);
   const copyId = React.useRef<ReturnType<typeof setTimeout> | null>(null);

.dumi/theme/builtins/IconSearch/IconSearch.tsx

@@ -2,7 +2,7 @@ import type { CSSProperties } from 'react';
 import React, { useCallback, useMemo, useState } from 'react';
 import Icon, * as AntdIcons from '@ant-design/icons';
 import { Affix, Empty, Input, Segmented } from 'antd';
-import { createStaticStyles, useTheme } from 'antd-style';
+import { createStyles, useTheme } from 'antd-style';
 import type { SegmentedOptions } from 'antd/es/segmented';
 import { useIntl } from 'dumi';
 import debounce from 'lodash/debounce';
@@ -22,7 +22,7 @@ export enum ThemeType {
 
 const allIcons: { [key: string]: any } = AntdIcons;
 
-const styles = createStaticStyles(({ css, cssVar }) => ({
+const useStyle = createStyles(({ css, cssVar }) => ({
   iconSearchAffix: css`
     display: flex;
     transition: all ${cssVar.motionDurationSlow};
@@ -39,6 +39,7 @@ const NEW_ICON_NAMES: ReadonlyArray<string> = [];
 
 const IconSearch: React.FC = () => {
   const intl = useIntl();
+  const { styles } = useStyle();
   const [displayState, setDisplayState] = useState<IconSearchState>({
     searchKey: '',
     theme: ThemeType.Outlined,

.dumi/theme/builtins/IconSearch/index.tsx

@@ -1,10 +1,10 @@
 import React, { Suspense } from 'react';
 import { Skeleton } from 'antd';
-import { createStaticStyles } from 'antd-style';
+import { createStyles } from 'antd-style';
 
 const IconSearch = React.lazy(() => import('./IconSearch'));
 
-const styles = createStaticStyles(({ css, cssVar }) => ({
+const useStyle = createStyles(({ css, cssVar }) => ({
   searchWrapper: css`
     display: flex;
     gap: ${cssVar.padding};
@@ -34,6 +34,8 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
 }));
 
 const IconSearchFallback: React.FC = () => {
+  const { styles } = useStyle();
+
   return (
     <>
       <div className={styles.searchWrapper}>

.dumi/theme/builtins/InstallDependencies/bun.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { createStaticStyles } from 'antd-style';
+import { createStyles, css } from 'antd-style';
 import { clsx } from 'clsx';
 
 interface IconProps {
@@ -7,7 +7,7 @@ interface IconProps {
   style?: React.CSSProperties;
 }
 
-const classNames = createStaticStyles(({ css }) => ({
+const useStyle = createStyles(() => ({
   iconWrap: css`
     display: inline-flex;
     align-items: center;
@@ -19,8 +19,9 @@ const classNames = createStaticStyles(({ css }) => ({
 
 const BunIcon: React.FC<IconProps> = (props) => {
   const { className, style } = props;
+  const { styles } = useStyle();
   return (
-    <span className={clsx(classNames.iconWrap, className)} style={style}>
+    <span className={clsx(styles.iconWrap, className)} style={style}>
       <svg id="Bun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 70" width="1em" height="1em">
         <title>Bun Logo</title>
         <path

.dumi/theme/builtins/InstallDependencies/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
+import type { Tab } from '@rc-component/tabs/lib/interface';
 import { ConfigProvider, Tabs } from 'antd';
 import SourceCode from 'dumi/theme-default/builtins/SourceCode';
-import type { Tab } from '@rc-component/tabs/lib/interface';
 
 import BunLogo from './bun';
 import NpmLogo from './npm';

.dumi/theme/builtins/InstallDependencies/npm.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { createStaticStyles } from 'antd-style';
+import { createStyles, css } from 'antd-style';
 import { clsx } from 'clsx';
 
 interface IconProps {
@@ -7,7 +7,7 @@ interface IconProps {
   style?: React.CSSProperties;
 }
 
-const classNames = createStaticStyles(({ css }) => ({
+const useStyle = createStyles(() => ({
   iconWrap: css`
     display: inline-flex;
     align-items: center;
@@ -19,8 +19,9 @@ const classNames = createStaticStyles(({ css }) => ({
 
 const NpmIcon: React.FC<IconProps> = (props) => {
   const { className, style } = props;
+  const { styles } = useStyle();
   return (
-    <span className={clsx(classNames.iconWrap, className)} style={style}>
+    <span className={clsx(styles.iconWrap, className)} style={style}>
       <svg
         fill="#E53E3E"
         focusable="false"

.dumi/theme/builtins/InstallDependencies/pnpm.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { createStaticStyles } from 'antd-style';
+import { createStyles, css } from 'antd-style';
 import { clsx } from 'clsx';
 
 interface IconProps {
@@ -7,7 +7,7 @@ interface IconProps {
   style?: React.CSSProperties;
 }
 
-const classNames = createStaticStyles(({ css }) => ({
+const useStyle = createStyles(() => ({
   iconWrap: css`
     display: inline-flex;
     align-items: center;
@@ -19,8 +19,9 @@ const classNames = createStaticStyles(({ css }) => ({
 
 const PnpmIcon: React.FC<IconProps> = (props) => {
   const { className, style } = props;
+  const { styles } = useStyle();
   return (
-    <span className={clsx(classNames.iconWrap, className)} style={style}>
+    <span className={clsx(styles.iconWrap, className)} style={style}>
       <svg
         aria-hidden="true"
         fill="#F69220"

.dumi/theme/builtins/InstallDependencies/yarn.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { createStaticStyles } from 'antd-style';
+import { createStyles, css } from 'antd-style';
 import { clsx } from 'clsx';
 
 interface IconProps {
@@ -7,7 +7,7 @@ interface IconProps {
   style?: React.CSSProperties;
 }
 
-const classNames = createStaticStyles(({ css }) => ({
+const useStyle = createStyles(() => ({
   iconWrap: css`
     display: inline-flex;
     align-items: center;
@@ -19,8 +19,9 @@ const classNames = createStaticStyles(({ css }) => ({
 
 const YarnIcon: React.FC<IconProps> = (props) => {
   const { className, style } = props;
+  const { styles } = useStyle();
   return (
-    <span className={clsx(classNames.iconWrap, className)} style={style}>
+    <span className={clsx(styles.iconWrap, className)} style={style}>
       <svg
         aria-hidden="true"
         fill="#2C8EBB"

.dumi/theme/builtins/Previewer/Actions.tsx

@@ -1,8 +1,7 @@
 import React, { Suspense, useRef } from 'react';
-import { BugOutlined, ThunderboltOutlined } from '@ant-design/icons';
+import { LinkOutlined, ThunderboltOutlined } from '@ant-design/icons';
 import stackblitzSdk from '@stackblitz/sdk';
-import type { MenuProps } from 'antd';
-import { Button, Dropdown, Flex, Tooltip } from 'antd';
+import { Flex, Tooltip } from 'antd';
 import { FormattedMessage, useSiteData } from 'dumi';
 import LZString from 'lz-string';
 
@@ -29,6 +28,8 @@ function compress(string: string): string {
 }
 
 interface ActionsProps {
+  showOnlineUrl: boolean;
+  docsOnlineUrl?: string;
   assetId: string;
   title?: string;
   pkgDependencyList: Record<PropertyKey, string>;
@@ -38,10 +39,11 @@ interface ActionsProps {
   onCodeExpand: () => void;
   entryCode: string;
   styleCode: string;
-  debugOptions?: MenuProps['items'];
 }
 
 const Actions: React.FC<ActionsProps> = ({
+  showOnlineUrl,
+  docsOnlineUrl,
   assetId,
   title,
   jsx,
@@ -51,7 +53,6 @@ const Actions: React.FC<ActionsProps> = ({
   pkgDependencyList,
   entryCode,
   styleCode,
-  debugOptions,
 }) => {
   const [, lang] = useLocale();
   const isZhCN = lang === 'cn';
@@ -127,8 +128,8 @@ const Actions: React.FC<ActionsProps> = ({
     editors: '001',
     css: '',
     js_external: [
-      'react@18/umd/react.production.min.js',
-      'react-dom@18/umd/react-dom.production.min.js',
+      'react@19/cjs/react.development.js',
+      'react-dom@19/cjs/react-dom.development.js',
       'dayjs@1/dayjs.min.js',
       `antd@${pkg.version}/dist/antd-with-locales.min.js`,
       `@ant-design/icons/dist/index.umd.js`,
@@ -212,15 +213,21 @@ createRoot(document.getElementById('container')).render(<Demo />);
   });
 
   return (
-    <Flex wrap gap="middle" className="code-box-actions" align="center">
-      {
-        // 调试选项
-        debugOptions?.length ? (
-          <Dropdown menu={{ items: debugOptions }} arrow={{ pointAtCenter: true }}>
-            <Button icon={<BugOutlined />} color="purple" variant="filled" size="small" />
-          </Dropdown>
-        ) : null
-      }
+    <Flex wrap gap="middle" className="code-box-actions">
+      {/* 在线文档按钮 */}
+      {showOnlineUrl && (
+        <Tooltip title={<FormattedMessage id="app.demo.online" />}>
+          <a
+            className="code-box-code-action"
+            aria-label="open in new tab"
+            target="_blank"
+            rel="noreferrer"
+            href={docsOnlineUrl || ''}
+          >
+            <LinkOutlined className="code-box-online" />
+          </a>
+        </Tooltip>
+      )}
       {/* CodeSandbox 按钮 */}
       <form
         className="code-box-code-action"

.dumi/theme/builtins/Previewer/CodePreviewer.tsx

@@ -1,11 +1,10 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { UpOutlined } from '@ant-design/icons';
-import type { MenuProps } from 'antd';
-import { Badge, Tag, Tooltip } from 'antd';
-import { createStaticStyles } from 'antd-style';
+import { Badge, Tooltip } from 'antd';
+import { createStyles, css } from 'antd-style';
 import { clsx } from 'clsx';
-import { FormattedMessage, useLiveDemo, useSiteData } from 'dumi';
-import { major, minVersion } from 'semver';
+import { FormattedMessage, useLiveDemo } from 'dumi';
+
 import type { AntdPreviewerProps } from '.';
 import useLocation from '../../../hooks/useLocation';
 import BrowserFrame from '../../common/BrowserFrame';
@@ -13,11 +12,9 @@ import ClientOnly from '../../common/ClientOnly';
 import CodePreview from '../../common/CodePreview';
 import EditButton from '../../common/EditButton';
 import SiteContext from '../../slots/SiteContext';
-import DemoContext from '../../slots/DemoContext';
-import { isOfficialHost } from '../../utils';
 import Actions from './Actions';
 
-const styles = createStaticStyles(({ cssVar, css }) => {
+const useStyle = createStyles(({ cssVar }) => {
   return {
     codeHideBtn: css`
       position: sticky;
@@ -64,10 +61,8 @@ const CodePreviewer: React.FC<AntdPreviewerProps> = (props) => {
     clientOnly,
     pkgDependencyList,
   } = props;
-  const { showDebug } = React.use(DemoContext);
-  const { pkg } = useSiteData();
-
   const location = useLocation();
+  const { styles } = useStyle();
 
   const entryName = 'index.tsx';
   const entryCode = asset.dependencies[entryName].value;
@@ -84,15 +79,17 @@ const CodePreviewer: React.FC<AntdPreviewerProps> = (props) => {
   const anchorRef = useRef<HTMLAnchorElement>(null);
   const [codeExpand, setCodeExpand] = useState<boolean>(false);
   const { isDark } = React.use(SiteContext);
-  const { hash, pathname, search } = location;
 
-  /**
-   * Record whether it is deployed on the official domain name.
-   * Note that window.location.hostname is not available on the server side due to hydration issues
-   */
-  const [deployedOnOfficialHost, setDeployedOnOfficialHost] = useState<boolean>(true);
+  const { hash, pathname, search } = location;
+  const docsOnlineUrl = `https://ant.design${pathname ?? ''}${search ?? ''}#${asset.id}`;
+
+  const [showOnlineUrl, setShowOnlineUrl] = useState<boolean>(false);
+
   useEffect(() => {
-    setDeployedOnOfficialHost(isOfficialHost(window.location.hostname));
+    const regexp = /preview-(\d+)-ant-design/; // matching PR preview addresses
+    setShowOnlineUrl(
+      process.env.NODE_ENV === 'development' || regexp.test(window.location.hostname),
+    );
   }, []);
 
   useEffect(() => {
@@ -105,33 +102,6 @@ const CodePreviewer: React.FC<AntdPreviewerProps> = (props) => {
     setCodeExpand(expand);
   }, [expand]);
 
-  const generateDocUrl = (domain = 'https://ant.design') =>
-    `${domain}${pathname ?? ''}${search ?? ''}#${asset.id}`;
-
-  // Enable "Go Online Docs" only when deployed on non-official domains
-  const enableDocsOnlineUrl = process.env.NODE_ENV === 'development' || !deployedOnOfficialHost;
-
-  // Previous version demos are only available during the maintenance window
-  const [supportsPreviousVersionDemo, previousVersionDomain, previousVersion] = useMemo(() => {
-    const maintenanceDeadline = new Date('2026/12/31');
-
-    if (new Date() > maintenanceDeadline) {
-      return [false, undefined, -1] as const;
-    }
-
-    const currentMajor = major(pkg.version);
-    const previousMajor = Math.min(currentMajor - 1, 5);
-
-    let enabled = true;
-    // If the demo specifies a version, perform an additional check;
-    if (version) {
-      const minVer = minVersion(version);
-      enabled = minVer?.major ? minVer.major < currentMajor : true;
-    }
-
-    return [enabled, `https://${previousMajor}x.ant.design`, previousMajor];
-  }, [version, pkg.version]);
-
   const mergedChildren = !iframe && clientOnly ? <ClientOnly>{children}</ClientOnly> : children;
   const demoUrlWithTheme = useMemo(() => {
     return `${demoUrl}${isDark ? '?theme=dark' : ''}`;
@@ -173,47 +143,6 @@ const CodePreviewer: React.FC<AntdPreviewerProps> = (props) => {
     backgroundColor: background === 'grey' ? backgroundGrey : undefined,
   };
 
-  const debugOptions: MenuProps['items'] = [
-    {
-      key: 'online',
-      label: (
-        <a
-          aria-label="Go to online documentation"
-          href={generateDocUrl()}
-          target="_blank"
-          rel="noreferrer"
-        >
-          <FormattedMessage id="app.demo.online" />
-        </a>
-      ),
-      icon: (
-        <Tag variant="filled" color="blue">
-          ant.design
-        </Tag>
-      ),
-      enabled: enableDocsOnlineUrl,
-    },
-    {
-      key: 'previousVersion',
-      label: (
-        <a
-          aria-label="Go to previous version documentation"
-          href={generateDocUrl(previousVersionDomain)}
-          target="_blank"
-          rel="noreferrer"
-        >
-          <FormattedMessage id="app.demo.previousVersion" values={{ version: previousVersion }} />
-        </a>
-      ),
-      icon: (
-        <Tag variant="filled" color="purple">
-          v{previousVersion}
-        </Tag>
-      ),
-      enabled: supportsPreviousVersionDemo,
-    },
-  ].filter(({ enabled }) => showDebug && enabled);
-
   const codeBox: React.ReactNode = (
     <section className={codeBoxClass} id={asset.id}>
       <section
@@ -245,7 +174,8 @@ const CodePreviewer: React.FC<AntdPreviewerProps> = (props) => {
             />
           )}
           <Actions
-            debugOptions={debugOptions}
+            showOnlineUrl={showOnlineUrl}
+            docsOnlineUrl={docsOnlineUrl}
             entryCode={entryCode}
             styleCode={style}
             pkgDependencyList={pkgDependencyList}

.dumi/theme/builtins/Previewer/DemoFallback.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Skeleton } from 'antd';
-import { createStaticStyles } from 'antd-style';
+import { createStyles } from 'antd-style';
 
-const styles = createStaticStyles(({ css, cssVar }) => ({
+const useStyle = createStyles(({ css, cssVar }) => ({
   skeletonWrapper: css`
     width: 100% !important;
     height: 250px;
@@ -12,6 +12,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
 }));
 
 const DemoFallback = () => {
+  const { styles } = useStyle();
   return (
     <Skeleton.Node
       active

.dumi/theme/builtins/Previewer/DesignPreviewer.tsx

@@ -2,11 +2,11 @@ import type { FC } from 'react';
 import React, { useEffect, useRef } from 'react';
 import { CheckOutlined, SketchOutlined } from '@ant-design/icons';
 import { App } from 'antd';
-import { createStaticStyles } from 'antd-style';
-import copy from '../../../../components/_util/copy';
+import { createStyles } from 'antd-style';
 import { nodeToGroup } from 'html2sketch';
 
 import type { AntdPreviewerProps } from '.';
+import copy from '../../../../components/_util/copy';
 import useLocale from '../../../hooks/useLocale';
 
 const locales = {
@@ -22,7 +22,7 @@ const locales = {
   },
 };
 
-const styles = createStaticStyles(({ cssVar, css }) => ({
+const useStyle = createStyles(({ cssVar, css }) => ({
   wrapper: css`
     position: relative;
     border: 1px solid ${cssVar.colorBorderSecondary};
@@ -72,6 +72,7 @@ const styles = createStaticStyles(({ cssVar, css }) => ({
 }));
 
 const DesignPreviewer: FC<AntdPreviewerProps> = ({ children, title, description, tip, asset }) => {
+  const { styles } = useStyle();
   const demoRef = useRef<HTMLDivElement>(null);
   const [copied, setCopied] = React.useState<boolean>(false);
   const { message } = App.useApp();

.dumi/theme/builtins/RefinedChangelog/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { BugOutlined } from '@ant-design/icons';
 import { Button, Flex, Popover, theme } from 'antd';
-import { createStaticStyles, cx } from 'antd-style';
+import { createStyles } from 'antd-style';
 import dayjs from 'dayjs';
 import type { Dayjs } from 'dayjs';
 
@@ -33,7 +33,7 @@ const locales = {
   },
 };
 
-const styles = createStaticStyles(({ cssVar, css }) => ({
+const useStyle = createStyles(({ cssVar, css }) => ({
   container: css`
     margin-block: ${cssVar.margin};
     padding: ${cssVar.padding};
@@ -49,6 +49,8 @@ const styles = createStaticStyles(({ cssVar, css }) => ({
 const RefinedChangelog: React.FC<React.PropsWithChildren<RefinedChangelogProps>> = (props) => {
   const { version, date, children } = props;
 
+  const { styles, cx } = useStyle();
+
   const memoizedValue = React.useMemo<ContextProps>(() => {
     const realVersion = version || '0.0.0';
     const bugVersionInfo = matchDeprecated(realVersion);

.dumi/theme/builtins/Sandpack/index.tsx

@@ -1,7 +1,7 @@
 import React, { Suspense } from 'react';
 import type { SandpackSetup } from '@codesandbox/sandpack-react';
 import { Skeleton } from 'antd';
-import { createStaticStyles } from 'antd-style';
+import { createStyles } from 'antd-style';
 import { useSearchParams } from 'dumi';
 
 import { version } from '../../../../package.json';
@@ -17,7 +17,7 @@ const root = createRoot(document.getElementById("root"));
 root.render(<App />);
 `;
 
-const styles = createStaticStyles(({ css, cssVar }) => ({
+const useStyle = createStyles(({ css, cssVar }) => ({
   fallback: css`
     width: 100%;
     > * {
@@ -32,6 +32,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
 }));
 
 const SandpackFallback: React.FC = () => {
+  const { styles } = useStyle();
   return (
     <div className={styles.fallback}>
       <Skeleton.Node active style={{ height: 500, width: '100%' }}>
@@ -82,7 +83,6 @@ const Sandpack: React.FC<React.PropsWithChildren<SandpackProps>> = (props) => {
       <OriginSandpack
         theme={searchParams.getAll('theme').includes('dark') ? 'dark' : undefined}
         customSetup={setup}
-        template="vite-react-ts"
         options={options}
         files={{
           'index.tsx': indexContent,

.dumi/theme/builtins/TokenCompare/index.tsx

@@ -2,13 +2,13 @@
 import React from 'react';
 import { FastColor } from '@ant-design/fast-color';
 import { Flex, theme } from 'antd';
-import { createStaticStyles } from 'antd-style';
+import { createStyles } from 'antd-style';
 import tokenMeta from 'antd/es/version/token-meta.json';
 import { clsx } from 'clsx';
 
 import useLocale from '../../../hooks/useLocale';
 
-const styles = createStaticStyles(({ cssVar, css }) => {
+const useStyle = createStyles(({ cssVar, css }) => {
   const height = cssVar.controlHeightLG;
   const dotSize = height / 5;
 
@@ -63,6 +63,7 @@ interface ColorCircleProps {
 }
 
 const ColorCircle: React.FC<ColorCircleProps> = ({ color }) => {
+  const { styles } = useStyle();
   return (
     <Flex align="center" gap={4}>
       <div className={styles.dot} style={{ background: color }} />
@@ -78,6 +79,7 @@ export interface TokenCompareProps {
 const TokenCompare: React.FC<TokenCompareProps> = (props) => {
   const { tokenNames = '' } = props;
   const [, lang] = useLocale();
+  const { styles } = useStyle();
 
   const tokenList = React.useMemo(() => {
     const list = tokenNames.split('|');

.dumi/theme/builtins/VideoPlayer/index.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { PauseCircleFilled, PlayCircleFilled } from '@ant-design/icons';
-import { createStaticStyles } from 'antd-style';
+import { createStyles, css } from 'antd-style';
 import { clsx } from 'clsx';
 
-const styles = createStaticStyles(({ css, cx, cssVar }) => {
+const useStyles = createStyles(({ cx, cssVar }) => {
   const play = css`
     position: absolute;
     inset-inline-end: ${cssVar.paddingLG};
@@ -45,6 +45,7 @@ const VideoPlayer: React.FC<React.HtmlHTMLAttributes<HTMLVideoElement>> = ({
   className,
   ...restProps
 }) => {
+  const { styles } = useStyles();
   const videoRef = React.useRef<HTMLVideoElement>(null);
   const [playing, setPlaying] = React.useState(false);
 

.dumi/theme/common/BehaviorMap/BehaviorMap.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from 'react';
-import { createStaticStyles } from 'antd-style';
+import { createStyles, css } from 'antd-style';
 import { useRouteMeta } from 'dumi';
 
 import useLocale from '../../../hooks/useLocale';
@@ -17,12 +17,12 @@ export interface BehaviorMapProps {
   data: BehaviorMapItem;
 }
 
-const styles = createStaticStyles(({ css, cssVar }) => ({
+const useStyle = createStyles(({ cssVar }) => ({
   container: css`
     width: 100%;
     min-height: 600px;
     height: fit-content;
-    background-color: ${cssVar.colorBgLayout};
+    background-color: #f5f5f5;
     border: 1px solid #e8e8e8;
     border-radius: ${cssVar.borderRadiusLG};
     overflow: hidden;
@@ -54,7 +54,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     inset-inline-end: 20px;
     z-index: 10;
     border-radius: 4px;
-    font-size: ${cssVar.fontSize};
+    font-size: 14px;
   `,
   mvp: css`
     margin-inline-end: ${cssVar.marginMD};
@@ -100,27 +100,23 @@ const locales = {
 
 const BehaviorMap: React.FC<BehaviorMapProps> = ({ data }) => {
   const chartRef = useRef<HTMLDivElement>(null);
+  const { styles } = useStyle();
   const [locale] = useLocale(locales);
   const meta = useRouteMeta();
 
   const mermaidCode = useMermaidCode(data);
 
-  const cancelledRef = useRef<boolean>(false);
-
   useEffect(() => {
-    cancelledRef.current = false;
+    let isCancelled = false;
 
     const renderChart = async () => {
-      if (!chartRef.current || !mermaidCode) {
-        return;
-      }
+      if (!chartRef.current || !mermaidCode) return;
 
       try {
-        const mermaid = (await import('mermaid')).default;
+        const mermaidModule = await import('mermaid');
+        const mermaid = mermaidModule.default;
 
-        if (cancelledRef.current) {
-          return;
-        }
+        if (isCancelled) return;
 
         mermaid.initialize({
           startOnLoad: false,
@@ -134,15 +130,18 @@ const BehaviorMap: React.FC<BehaviorMapProps> = ({ data }) => {
           },
         });
 
-        const id = `mermaid-${Date.now()}`;
+        let mermaidChartCounter = 0;
+        mermaidChartCounter += 1;
+        const id = `mermaid-${Date.now()}-${mermaidChartCounter}`;
 
         const { svg } = await mermaid.render(id, mermaidCode);
 
-        if (!cancelledRef.current && chartRef.current) {
+        if (!isCancelled && chartRef.current) {
           chartRef.current.innerHTML = svg;
         }
-      } catch {
-        if (!cancelledRef.current && chartRef.current) {
+      } catch (error) {
+        if (!isCancelled && chartRef.current) {
+          console.error('Mermaid render error:', error);
           chartRef.current.innerHTML = 'Render Error';
         }
       }
@@ -151,7 +150,7 @@ const BehaviorMap: React.FC<BehaviorMapProps> = ({ data }) => {
     renderChart();
 
     return () => {
-      cancelledRef.current = true;
+      isCancelled = true;
     };
   }, [mermaidCode]);
 

.dumi/theme/common/BehaviorMap/index.tsx

@@ -1,14 +1,14 @@
 import type { FC } from 'react';
 import React, { Suspense } from 'react';
 import { Skeleton } from 'antd';
-import { createStaticStyles } from 'antd-style';
+import { createStyles } from 'antd-style';
 
 import useLocale from '../../../hooks/useLocale';
 import type { BehaviorMapProps } from './BehaviorMap';
 
 const InternalBehaviorMap = React.lazy(() => import('./BehaviorMap'));
 
-const styles = createStaticStyles(({ cssVar, css }) => ({
+const useStyle = createStyles(({ cssVar, css }) => ({
   fallback: css`
     width: 100%;
     > * {
@@ -32,6 +32,7 @@ const locales = {
 };
 
 const BehaviorMapFallback: React.FC = () => {
+  const { styles } = useStyle();
   const [locale] = useLocale(locales);
   return (
     <div className={styles.fallback}>

.dumi/theme/common/BehaviorMap/useMermaidCode.ts

@@ -2,45 +2,50 @@ import { useMemo } from 'react';
 
 import type { BehaviorMapItem } from './BehaviorMap';
 
-const generateMermaidCode = (root: BehaviorMapItem) => {
-  const lines: string[] = [];
+export const useMermaidCode = (data: BehaviorMapItem): string => {
+  const generateMermaidCode = (root: BehaviorMapItem): string => {
+    const lines: string[] = [];
 
-  lines.push('graph LR');
+    lines.push('graph LR');
 
-  lines.push(`classDef baseNode fill:#fff,stroke:none,stroke-width:0px,rx:5,ry:5,font-size:14px`);
+    lines.push(`classDef baseNode fill:#fff,stroke:none,stroke-width:0px,rx:5,ry:5,font-size:14px`);
 
-  const traverse = (node: BehaviorMapItem, parentId?: string) => {
-    const safeId = `node_${node.id.replace(/[^a-z0-9]/gi, '_')}`;
-    let labelText = node.label.replace(/"/g, "'");
+    const traverse = (node: BehaviorMapItem, parentId?: string) => {
+      const safeId = `node_${node.id.replace(/[^a-z0-9]/gi, '_')}`;
+      let labelText = node.label.replace(/"/g, "'");
 
-    if (!parentId) {
-      lines.push(`style ${safeId} font-size:16px`);
-      labelText = `**${labelText}**`;
-    } else if (node.targetType === 'mvp') {
-      const blueDot = `<span style="display:inline-block;width:8px;height:8px;background-color:rgb(22, 119, 255);border-radius:50%;margin-inline-end:8px;vertical-align:middle;"></span>`;
-      labelText = `${blueDot}${labelText}`;
-    } else if (node.targetType === 'extension') {
-      const grayDot = `<span style="display:inline-block;width:8px;height:8px;background-color:rgb(160, 160, 160);border-radius:50%;margin-inline-end:8px;vertical-align:middle;"></span>`;
-      labelText = `${grayDot}${labelText}`;
-    }
-    lines.push(`${safeId}["${labelText}"]:::baseNode`);
+      if (!parentId) {
+        lines.push(`style ${safeId} font-size:16px`);
+        labelText = `**${labelText}**`;
+      } else if (node.targetType === 'mvp') {
+        const blueDot = `<span style="display:inline-block;width:8px;height:8px;background-color:rgb(22, 119, 255);border-radius:50%;margin-right:8px;vertical-align:middle;"></span>`;
+        labelText = `${blueDot}${labelText}`;
+      } else if (node.targetType === 'extension') {
+        const grayDot = `<span style="display:inline-block;width:8px;height:8px;background-color:rgb(160, 160, 160);border-radius:50%;margin-right:8px;vertical-align:middle;"></span>`;
+        labelText = `${grayDot}${labelText}`;
+      }
+      lines.push(`${safeId}["${labelText}"]:::baseNode`);
 
-    if (node.link) {
-      lines.push(`click ${safeId} "#${node.link}"`);
-    }
+      if (node.link) {
+        lines.push(`click ${safeId} "#${node.link}"`);
+      }
 
-    if (parentId) {
-      lines.push(`${parentId} --> ${safeId}`);
-    }
+      if (parentId) {
+        lines.push(`${parentId} --> ${safeId}`);
+      }
 
-    if (node.children && node.children.length > 0) {
-      node.children.forEach((child) => traverse(child, safeId));
-    }
+      if (node.children && node.children.length > 0) {
+        node.children.forEach((child) => traverse(child, safeId));
+      }
+    };
+
+    traverse(root);
+    return lines.join('\n');
   };
-  traverse(root);
-  return lines.join('\n');
-};
 
-export const useMermaidCode = (data: BehaviorMapItem) => {
-  return useMemo(() => generateMermaidCode(data), [data]);
+  const mermaidCode = useMemo(() => {
+    return generateMermaidCode(data);
+  }, [data]);
+
+  return mermaidCode;
 };

.dumi/theme/common/BezierVisualizer/index.tsx

@@ -20,7 +20,7 @@ const locales = {
   },
 };
 
-const BezierVisualizer: React.FC<BezierVisualizerProps> = (props) => {
+const BezierVisualizer = (props: BezierVisualizerProps) => {
   const { value } = props;
   const [locale] = useLocale(locales);
 

.dumi/theme/common/BrowserFrame.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { createStaticStyles } from 'antd-style';
+import { createStyles } from 'antd-style';
 
-const styles = createStaticStyles(({ cssVar, css }) => ({
+const useStyle = createStyles(({ cssVar, css }) => ({
   browserMockup: css`
     position: relative;
     border-top: 2em solid rgba(230, 230, 230, 0.7);
@@ -49,6 +49,7 @@ const styles = createStaticStyles(({ cssVar, css }) => ({
 }));
 
 const BrowserFrame: React.FC<React.PropsWithChildren> = ({ children }) => {
+  const { styles } = useStyle();
   return <div className={styles.browserMockup}>{children}</div>;
 };
 

.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;

.dumi/theme/common/LinkButton.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Button } from 'antd';
 import type { ButtonProps } from 'antd';
+
 import Link from './Link';
 import type { LinkProps } from './Link';
 

.dumi/theme/common/LiveCode.tsx

@@ -1,11 +1,11 @@
 import type { ComponentProps, FC } from 'react';
 import React from 'react';
-import { createStaticStyles } from 'antd-style';
+import { createStyles } from 'antd-style';
 import SourceCodeEditor from 'dumi/theme-default/slots/SourceCodeEditor';
 
 import LiveError from '../slots/LiveError';
 
-const styles = createStaticStyles(({ cssVar, css }) => {
+const useStyle = createStyles(({ cssVar, css }) => {
   return {
     editor: css`
       // override dumi editor styles
@@ -54,6 +54,7 @@ const LiveCode: FC<
     error: Error | null;
   } & Pick<ComponentProps<typeof SourceCodeEditor>, 'lang' | 'initialValue' | 'onChange'>
 > = (props) => {
+  const { styles } = useStyle();
   return (
     <div className={styles.editor}>
       <SourceCodeEditor

.dumi/theme/common/Loading.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import { StyleProvider } from '@ant-design/cssinjs';
 import { ConfigProvider, Flex, Skeleton, Spin } from 'antd';
-import { createStaticStyles } from 'antd-style';
+import { createStyles } from 'antd-style';
 import { useLocation } from 'dumi';
 
 import { Common } from './styles';
 
-const styles = createStaticStyles(({ css, cssVar }) => {
+const useStyle = createStyles(({ css, cssVar }) => {
   return {
     skeletonWrapper: css`
       width: 100%;
@@ -27,6 +27,8 @@ const styles = createStaticStyles(({ css, cssVar }) => {
 const Loading: React.FC = () => {
   const { pathname } = useLocation();
 
+  const { styles } = useStyle();
+
   let loadingNode: React.ReactNode = null;
 
   if (

.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
       />

.dumi/theme/common/SemanticPreview.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { InfoCircleOutlined, PushpinOutlined } from '@ant-design/icons';
 import { get, set } from '@rc-component/util';
 import { Button, Col, ConfigProvider, Flex, Popover, Row, Tag, theme, Typography } from 'antd';
-import { createStaticStyles } from 'antd-style';
+import { createStyles, css } from 'antd-style';
 import { clsx } from 'clsx';
 import Prism from 'prismjs';
 
@@ -12,7 +12,7 @@ export interface SemanticPreviewInjectionProps {
   classNames?: Record<string, string>;
 }
 
-const styles = createStaticStyles(({ css, cssVar }) => ({
+const useStyle = createStyles(({ cssVar }) => ({
   container: css`
     position: relative;
     z-index: 0;
@@ -155,6 +155,8 @@ const SemanticPreview: React.FC<SemanticPreviewProps> = (props) => {
 
   const mergedSemantic = pinSemantic || hoverSemantic;
 
+  const { styles } = useStyle();
+
   const hoveredSemanticClassNames = React.useMemo(() => {
     if (!mergedSemantic) {
       return semanticClassNames;

.dumi/theme/common/ThemeSwitch/PromptDrawer.tsx

@@ -1,7 +1,6 @@
 import React, { useRef, useState } from 'react';
 import { AntDesignOutlined, UserOutlined } from '@ant-design/icons';
 import { Bubble, Sender } from '@ant-design/x';
-import type { SenderRef } from '@ant-design/x/es/sender';
 import { Drawer, Flex, Typography } from 'antd';
 import type { GetProp } from 'antd';
 
@@ -29,8 +28,7 @@ export interface PromptDrawerProps {
 const PromptDrawer: React.FC<PromptDrawerProps> = ({ open, onClose, onThemeChange }) => {
   const [locale] = useLocale(locales);
   const [inputValue, setInputValue] = useState('');
-
-  const senderRef = useRef<SenderRef>(null);
+  const senderRef = useRef<any>(null);
 
   const [submitPrompt, loading, prompt, resText, cancelRequest] = usePromptTheme(onThemeChange);
 
@@ -53,21 +51,17 @@ const PromptDrawer: React.FC<PromptDrawerProps> = ({ open, onClose, onThemeChang
 
     const nextItems: GetProp<typeof Bubble.List, 'items'> = [
       {
-        key: 1,
-        role: 'user',
         placement: 'end',
         content: prompt,
-        avatar: <UserOutlined />,
+        avatar: { icon: <UserOutlined /> },
         shape: 'corner',
       },
       {
-        key: 2,
-        role: 'system',
         placement: 'start',
         content: resText,
-        avatar: <AntDesignOutlined />,
+        avatar: { icon: <AntDesignOutlined /> },
         loading: !resText,
-        contentRender: (content: string) => (
+        messageRender: (content: string) => (
           <Typography>
             <pre style={{ margin: 0 }}>{content}</pre>
           </Typography>
@@ -77,11 +71,9 @@ const PromptDrawer: React.FC<PromptDrawerProps> = ({ open, onClose, onThemeChang
 
     if (!loading) {
       nextItems.push({
-        key: 3,
-        role: 'divider',
         placement: 'start',
         content: locale.finishTips,
-        avatar: <AntDesignOutlined />,
+        avatar: { icon: <AntDesignOutlined /> },
         shape: 'corner',
       });
     }

.dumi/theme/common/ThemeSwitch/usePromptTheme.ts

@@ -1,5 +1,6 @@
+/* eslint-disable compat/compat */
 import { useRef, useState } from 'react';
-import { XStream } from '@ant-design/x-sdk';
+import { XStream } from '@ant-design/x';
 
 import type { SiteContextProps } from '../../../theme/slots/SiteContext';
 

.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>

.dumi/theme/common/VersionUpgrade/ChangeLog.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { createStaticStyles } from 'antd-style';
+import { createStyles } from 'antd-style';
 
 import useLocale from '../../../hooks/useLocale';
 import EN from './en-US.md';
@@ -7,7 +7,7 @@ import CN from './zh-CN.md';
 
 const changeLog = { cn: CN, en: EN };
 
-const classNames = createStaticStyles(({ css }) => ({
+const useStyle = createStyles(({ css }) => ({
   container: css`
     max-height: max(62vh, 500px);
     overflow-y: scroll;
@@ -25,11 +25,13 @@ const classNames = createStaticStyles(({ css }) => ({
 const ChangeLog = () => {
   const [, lang] = useLocale();
 
+  const { styles } = useStyle();
+
   const validatedLanguage = Object.keys(changeLog).includes(lang) ? lang : 'en';
   const C = changeLog[validatedLanguage];
 
   return (
-    <div className={classNames.container}>
+    <div className={styles.container}>
       <C />
     </div>
   );

.dumi/theme/common/styles/Demo.tsx

@@ -246,7 +246,7 @@ const GlobalDemoStyles: React.FC = () => {
             cursor: pointer;
           }
 
-           &-codeblock {
+          &-codeblock {
             width: 16px;
             height: 16px;
             overflow: hidden;

.dumi/theme/layouts/DocLayout/index.tsx

@@ -11,12 +11,12 @@ import { Helmet, useOutlet, useSearchParams, useSiteData } from 'dumi';
 import useLocale from '../../../hooks/useLocale';
 import useLocation from '../../../hooks/useLocation';
 import GlobalStyles from '../../common/GlobalStyles';
+import VersionUpgrade from '../../common/VersionUpgrade';
 import Header from '../../slots/Header';
 import SiteContext from '../../slots/SiteContext';
 import IndexLayout from '../IndexLayout';
 import ResourceLayout from '../ResourceLayout';
 import SidebarLayout from '../SidebarLayout';
-import VersionUpgrade from '../../common/VersionUpgrade';
 
 const locales = {
   cn: {

.dumi/theme/layouts/SidebarLayout/index.tsx

@@ -1,13 +1,13 @@
 import type { PropsWithChildren } from 'react';
 import React from 'react';
-import { createStaticStyles } from 'antd-style';
+import { createStyles } from 'antd-style';
 import { useSearchParams } from 'dumi';
 
 import CommonHelmet from '../../common/CommonHelmet';
 import Content from '../../slots/Content';
 import Sidebar from '../../slots/Sidebar';
 
-const styles = createStaticStyles(({ css, cssVar }) => ({
+const useStyle = createStyles(({ css, cssVar }) => ({
   main: css`
     display: flex;
     margin-top: ${cssVar.marginXL};
@@ -15,6 +15,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
 }));
 
 const SidebarLayout: React.FC<PropsWithChildren> = ({ children }) => {
+  const { styles } = useStyle();
   const [searchParams] = useSearchParams();
   const hideLayout = searchParams.get('layout') === 'false';
   return (

.dumi/theme/locales/en-US.json

@@ -36,8 +36,7 @@
   "app.demo.stackblitz": "Open in Stackblitz",
   "app.demo.codeblock": "Open in Hitu (This feature is only available in the internal network environment)",
   "app.demo.separate": "Open in a new window",
-  "app.demo.online": "Official demo",
-  "app.demo.previousVersion": "Previous version",
+  "app.demo.online": "Online Address",
   "app.home.introduce": "A design system for enterprise-level products. Create an efficient and enjoyable work experience.",
   "app.home.pr-welcome": "💡 It is an alpha version and still in progress. Contribution from community is welcome!",
   "app.home.recommend": "Recommended",

.dumi/theme/locales/zh-CN.json

@@ -36,8 +36,7 @@
   "app.demo.stackblitz": "在 Stackblitz 中打开",
   "app.demo.codeblock": "在海兔中打开（此功能仅在内网环境可用）",
   "app.demo.separate": "在新窗口打开",
-  "app.demo.online": "官网示例",
-  "app.demo.previousVersion": "历史版本",
+  "app.demo.online": "线上地址",
   "app.home.introduce": "企业级产品设计体系，创造高效愉悦的工作体验",
   "app.home.pr-welcome": "💡 当前为 alpha 版本，仍在开发中。欢迎社区一起共建，让 Ant Design 变得更好！",
   "app.home.recommend": "精彩推荐",

.dumi/theme/plugin.ts

@@ -4,9 +4,9 @@ import path from 'path';
 import createEmotionServer from '@emotion/server/create-instance';
 import type { IApi, IRoute } from 'dumi';
 import ReactTechStack from 'dumi/dist/techStacks/react';
-import tsToJs from './utils/tsToJs';
 
 import { dependencies, devDependencies } from '../../package.json';
+import tsToJs from './utils/tsToJs';
 
 function extractEmotionStyle(html: string) {
   // copy from emotion ssr

.dumi/theme/slots/Content/ColumnCard.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { RightOutlined, YuqueOutlined, ZhihuOutlined } from '@ant-design/icons';
 import { Button, Card, Divider } from 'antd';
-import { createStaticStyles } from 'antd-style';
+import { createStyles } from 'antd-style';
 import { clsx } from 'clsx';
 
 import useLocale from '../../../hooks/useLocale';
@@ -10,7 +10,7 @@ import JuejinIcon from '../../../theme/icons/JuejinIcon';
 const ANTD_IMG_URL =
   'https://picx.zhimg.com/v2-3b2bca09c2771e7a82a81562e806be4d.jpg?source=d16d100b';
 
-const styles = createStaticStyles(({ cssVar, css }) => ({
+const useStyle = createStyles(({ cssVar, css }) => ({
   card: css`
     width: 100%;
     margin: calc(${cssVar.marginMD} * 2) 0;
@@ -113,17 +113,19 @@ interface Props {
 const ColumnCard: React.FC<Props> = ({ zhihuLink, yuqueLink, juejinLink }) => {
   const [locale] = useLocale(locales);
   const {
-    card,
-    bigTitle,
-    cardBody,
-    leftCard,
-    title,
-    subTitle,
-    logo,
-    arrowIcon,
-    zlBtn,
-    discussLogo,
-  } = styles;
+    styles: {
+      card,
+      bigTitle,
+      cardBody,
+      leftCard,
+      title,
+      subTitle,
+      logo,
+      arrowIcon,
+      zlBtn,
+      discussLogo,
+    },
+  } = useStyle();
   if (!zhihuLink && !yuqueLink && !juejinLink) {
     return null;
   }

.dumi/theme/slots/Content/Contributors.tsx

@@ -1,13 +1,13 @@
 import React, { Suspense } from 'react';
 import ContributorsList from '@qixian.cs/github-contributors-list';
-import { createStaticStyles } from 'antd-style';
+import { createStyles } from 'antd-style';
 import { clsx } from 'clsx';
 import { useIntl } from 'dumi';
 
 import SiteContext from '../SiteContext';
 import ContributorAvatar from './ContributorAvatar';
 
-const styles = createStaticStyles(({ cssVar, css }) => ({
+const useStyle = createStyles(({ cssVar, css }) => ({
   listMobile: css`
     margin: 1em 0 !important;
   `,
@@ -48,6 +48,7 @@ const blockList = [
 
 const Contributors: React.FC<ContributorsProps> = ({ filename }) => {
   const { formatMessage } = useIntl();
+  const { styles } = useStyle();
   const { isMobile } = React.use(SiteContext);
 
   if (!filename) {

.dumi/theme/slots/ContentTabs/index.tsx

@@ -1,10 +1,10 @@
 import type { FC, ReactNode } from 'react';
 import React from 'react';
 import { CodeOutlined, SkinOutlined } from '@ant-design/icons';
+import type { TabsProps } from '@rc-component/tabs';
 import { Tabs } from 'antd';
 import { useRouteMeta } from 'dumi';
 import type { IContentTabsProps } from 'dumi/theme-default/slots/ContentTabs';
-import type { TabsProps } from '@rc-component/tabs';
 
 import useLocale from '../../../hooks/useLocale';
 

.dumi/theme/slots/Footer/AdditionalInfo.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { removeCSS, updateCSS } from '@rc-component/util/lib/Dom/dynamicCSS';
-import { createStaticStyles } from 'antd-style';
+import { createStyles } from 'antd-style';
 
 import useLocale from '../../../hooks/useLocale';
 
@@ -20,7 +20,7 @@ const locales = {
   },
 };
 
-const styles = createStaticStyles(({ css, cssVar }) => ({
+const useStyle = createStyles(({ css, cssVar }) => ({
   container: css`
     position: fixed;
     inset-inline-start: 0;
@@ -80,6 +80,8 @@ const InfoNewVersion: React.FC = () => {
     removeCSS(whereCls);
   }, []);
 
+  const { styles } = useStyle();
+
   if (supportWhere) {
     return null;
   }

.dumi/theme/slots/Header/SwitchBtn.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { omit } from '@rc-component/util';
 import { Button, Tooltip } from 'antd';
-import { createStaticStyles } from 'antd-style';
+import { createStyles } from 'antd-style';
 import { clsx } from 'clsx';
 
 export interface SwitchBtnProps {
@@ -18,7 +18,7 @@ export interface SwitchBtnProps {
 
 const BASE_SIZE = '1.2em';
 
-const styles = createStaticStyles(({ cssVar, css }) => {
+const useStyle = createStyles(({ cssVar, css }) => {
   return {
     btn: css`
       width: ${cssVar.controlHeight};
@@ -65,7 +65,9 @@ const styles = createStaticStyles(({ cssVar, css }) => {
 const SwitchBtn: React.FC<SwitchBtnProps> = (props) => {
   const { label1, label2, tooltip1, tooltip2, value, pure, onClick, ...rest } = props;
 
-  const { btn, innerDiv, labelStyle, label1Style, label2Style } = styles;
+  const {
+    styles: { btn, innerDiv, labelStyle, label1Style, label2Style },
+  } = useStyle();
 
   const node = (
     <Button

.dumi/theme/slots/Header/index.tsx

@@ -2,14 +2,11 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { GithubOutlined, MenuOutlined } from '@ant-design/icons';
 import { Alert, Button, Col, ConfigProvider, Popover, Row, Select, Tooltip } from 'antd';
 import { createStyles } from 'antd-style';
-import type { DefaultOptionType } from 'antd/es/select';
 import { clsx } from 'clsx';
 import dayjs from 'dayjs';
 import { useLocation, useSiteData } from 'dumi';
 import DumiSearchBar from 'dumi/theme-default/slots/SearchBar';
-import useSWR from 'swr';
 
-import versionsFile from '../../../../public/versions.json';
 import useLocale from '../../../hooks/useLocale';
 import useLocalStorage from '../../../hooks/useLocalStorage';
 import { getBannerData } from '../../../pages/index/components/util';
@@ -17,6 +14,7 @@ import ThemeSwitch from '../../common/ThemeSwitch';
 import DirectionIcon from '../../icons/DirectionIcon';
 import { ANT_DESIGN_NOT_SHOW_BANNER } from '../../layouts/GlobalLayout';
 import * as utils from '../../utils';
+import { getThemeConfig } from '../../utils';
 import SiteContext from '../SiteContext';
 import type { SharedProps } from './interface';
 import Logo from './Logo';
@@ -134,8 +132,7 @@ const useStyle = createStyles(({ cssVar, token, css }) => {
       }
     `,
     versionSelect: css`
-      width: 112px;
-      min-width: 112px; // 这个宽度需要和 Empty 状态的宽度保持一致
+      min-width: 90px;
       .rc-virtual-list {
         .rc-virtual-list-holder {
           scrollbar-width: thin;
@@ -152,56 +149,19 @@ interface HeaderState {
   searching: boolean;
 }
 
-interface VersionItem {
-  version: string;
-  url: string;
-  chineseMirrorUrl?: string;
-}
-
-const fetcher = (...args: Parameters<typeof fetch>) => {
-  return fetch(...args).then((res) => res.json());
-};
-
 // ================================= Header =================================
 const Header: React.FC = () => {
   const [, lang] = useLocale();
 
   const { pkg } = useSiteData();
 
-  const isChineseMirror =
-    typeof window !== 'undefined' && typeof window.location !== 'undefined'
-      ? window.location.hostname.includes('.antgroup.com')
-      : false;
-
-  const { data: versions = [], isLoading } = useSWR<VersionItem[]>(
-    process.env.NODE_ENV === 'production' && typeof window !== 'undefined'
-      ? `${window.location.origin}/versions.json`
-      : null,
-    fetcher,
-    {
-      fallbackData: versionsFile,
-      errorRetryCount: 3,
-    },
-  );
-
-  const versionOptions = useMemo(() => {
-    if (isLoading) {
-      return [];
-    }
-    return versions.map<DefaultOptionType>((item) => {
-      const isMatch = item.version.startsWith(pkg.version[0]);
-      const label = isMatch ? pkg.version : item.version;
-      const value = isChineseMirror && item.chineseMirrorUrl ? item.chineseMirrorUrl : item.url;
-      return { value, label };
-    });
-  }, [versions, isLoading, pkg.version, isChineseMirror]);
+  const themeConfig = getThemeConfig();
 
   const [headerState, setHeaderState] = useState<HeaderState>({
     menuVisible: false,
     windowWidth: 1400,
     searching: false,
   });
-
   const { direction, isMobile, bannerVisible, updateSiteConfig } = React.use(SiteContext);
   const pingTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
   const location = useLocation();
@@ -298,6 +258,14 @@ const Header: React.FC = () => {
   );
 
   const { menuVisible, windowWidth, searching } = headerState;
+  const docVersions: Record<string, string> = {
+    [pkg.version]: pkg.version,
+    ...themeConfig?.docVersions,
+  };
+  const versionOptions = Object.keys(docVersions).map((version) => ({
+    value: docVersions[version],
+    label: version,
+  }));
 
   const isHome = ['', 'index', 'index-cn'].includes(pathname);
   const isZhCN = lang === 'cn';
@@ -340,7 +308,6 @@ const Header: React.FC = () => {
       key="version"
       size="small"
       variant="filled"
-      loading={isLoading}
       className={styles.versionSelect}
       defaultValue={pkg.version}
       onChange={handleVersionChange}

.dumi/theme/themeConfig.ts

@@ -1,3 +1,6 @@
+const chineseMirror =
+  typeof location !== 'undefined' && location.hostname.includes('.antgroup.com');
+
 export default {
   categoryOrder: {
     'Ant Design': 0,
@@ -42,4 +45,15 @@ export default {
     模板文档: 3,
     'Template Document': 3,
   },
+  docVersions: {
+    '5.x': chineseMirror ? 'https://5x-ant-design.antgroup.com' : 'https://5x.ant.design',
+    '4.x': chineseMirror ? 'https://4x-ant-design.antgroup.com' : 'https://4x.ant.design',
+    '3.x': 'https://3x.ant.design',
+    '2.x': 'https://2x.ant.design',
+    '1.x': 'https://1x.ant.design',
+    '0.12.x': 'https://012x.ant.design',
+    '0.11.x': 'https://011x.ant.design',
+    '0.10.x': 'https://010x.ant.design',
+    '0.9.x': 'https://09x.ant.design',
+  },
 };

.dumi/theme/utils/index.ts

@@ -3,6 +3,7 @@ import flattenDeep from 'lodash/flattenDeep';
 import semver from 'semver';
 
 import deprecatedVersions from '../../../BUG_VERSIONS.json';
+import themeConfig from '../themeConfig';
 
 interface Meta {
   skip?: boolean;
@@ -205,12 +206,4 @@ export function matchDeprecated(v: string): MatchDeprecatedResult {
   };
 }
 
-/**
- * Determine if a hostname is an official domain.
- * antd creates a temporary preview site for each PR for convenient preview and testing.
- * Usually on platforms like surge.sh or Cloudflare Pages.
- */
-export function isOfficialHost(hostname: string) {
-  const officialHostnames = ['ant.design', 'antgroup.com'];
-  return officialHostnames.some((official) => hostname.includes(official));
-}
+export const getThemeConfig = () => themeConfig;

.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';
     })();
     `,
   ],

.fatherrc.ts

@@ -1,5 +1,5 @@
-import { defineConfig } from 'father';
 import path from 'path';
+import { defineConfig } from 'father';
 
 const externalsConfig = {
   react: {

.github/workflows/discussion-open-check.yml

@@ -11,7 +11,7 @@ jobs:
   discussion-create:
     permissions:
       contents: read  # for visiky/dingtalk-release-notify to get latest release
-    runs-on: blacksmith-4vcpu-ubuntu-2404
+    runs-on: ubuntu-latest
     steps:
       - name: send to dingtalk
         uses: visiky/dingtalk-release-notify@main

.github/workflows/issue-check-inactive.yml

@@ -12,7 +12,7 @@ jobs:
     permissions:
       issues: write  # for actions-cool/issues-helper to update issues
       pull-requests: write  # for actions-cool/issues-helper to update PRs
-    runs-on: blacksmith-4vcpu-ubuntu-2404
+    runs-on: ubuntu-latest
     steps:
       - name: check-inactive
         uses: actions-cool/issues-helper@v3

.github/workflows/issue-close-require.yml

@@ -12,7 +12,7 @@ jobs:
     permissions:
       issues: write  # for actions-cool/issues-helper to update issues
       pull-requests: write  # for actions-cool/issues-helper to update PRs
-    runs-on: blacksmith-4vcpu-ubuntu-2404
+    runs-on: ubuntu-latest
     steps:
       - name: need reproduce
         uses: actions-cool/issues-helper@v3

.github/workflows/issue-inactivity-reminder.yml

@@ -9,7 +9,7 @@ permissions:
 
 jobs:
   reminder_job:
-    runs-on: blacksmith-4vcpu-ubuntu-2404
+    runs-on: ubuntu-latest
     steps:
       - name: Send reminders for inactive issues
         uses: actions/github-script@v8

.github/workflows/issue-labeled.yml

@@ -14,7 +14,7 @@ jobs:
     permissions:
       issues: write  # for actions-cool/issues-helper to update issues
       pull-requests: write  # for actions-cool/issues-helper to update PRs
-    runs-on: blacksmith-4vcpu-ubuntu-2404
+    runs-on: ubuntu-latest
     steps:
       - name: help wanted
         if: github.event.label.name == 'help wanted'

.github/workflows/issue-open-check.yml

@@ -13,7 +13,7 @@ jobs:
       contents: read  # for visiky/dingtalk-release-notify to get latest release
       issues: write  # for actions-cool/issues-helper to update issues
       pull-requests: write  # for actions-cool/issues-helper to update PRs
-    runs-on: blacksmith-4vcpu-ubuntu-2404
+    runs-on: ubuntu-latest
     steps:
       - uses: actions-cool/check-user-permission@v2
         id: checkUser

.github/workflows/issue-remove-inactive.yml

@@ -14,7 +14,7 @@ jobs:
     permissions:
       issues: write  # for actions-cool/issues-helper to update issues
       pull-requests: write  # for actions-cool/issues-helper to update PRs
-    runs-on: blacksmith-4vcpu-ubuntu-2404
+    runs-on: ubuntu-latest
     steps:
       - name: remove inactive
         if: github.event.issue.state == 'open' && github.actor == github.event.issue.user.login

.github/workflows/issue-schedule.yml

@@ -6,7 +6,7 @@ on:
 
 jobs:
   send-message:
-    runs-on: blacksmith-4vcpu-ubuntu-2404
+    runs-on: ubuntu-latest
     steps:
       - name: Send Unconfirmed Issues to DingTalk
         uses: actions/github-script@v8

.github/workflows/mock-project-build.yml

@@ -14,7 +14,7 @@ concurrency:
 jobs:
   pr-check-ci:
     if: github.repository == 'ant-design/ant-design'
-    runs-on: blacksmith-4vcpu-ubuntu-2404
+    runs-on: ubuntu-latest
     name: Build Project
     steps:
       - name: checkout

.github/workflows/pkg.pr.new.yml

@@ -3,7 +3,7 @@ on: [push, pull_request]
 
 jobs:
   build:
-    runs-on: blacksmith-4vcpu-ubuntu-2404
+    runs-on: ubuntu-latest
 
     steps:
       - name: Checkout code

.github/workflows/pr-auto-merge.yml

@@ -16,7 +16,7 @@ jobs:
       contents: write  # for actions-cool/check-pr-ci to merge PRs
       issues: write  # for actions-cool/check-pr-ci to update issues
       pull-requests: write  # for actions-cool/check-pr-ci to update PRs
-    runs-on: blacksmith-4vcpu-ubuntu-2404
+    runs-on: ubuntu-latest
     steps:
       - uses: actions-cool/check-pr-ci@v1
         with:

.github/workflows/pr-check-merge.yml

@@ -12,10 +12,10 @@ jobs:
     permissions:
       issues: write  # for actions-cool/issues-helper to update issues
       pull-requests: write  # for actions-cool/issues-helper to update PRs
-    runs-on: blacksmith-4vcpu-ubuntu-2404
+    runs-on: ubuntu-latest
     if: (github.event.pull_request.head.ref == 'next' || github.event.pull_request.head.ref == 'feature' || github.event.pull_request.head.ref == 'master') && github.event.pull_request.head.user.login == 'ant-design'
     steps:
-      - uses: actions-cool/issues-helper@e2ff99831a4f13625d35064e2b3dfe65c07a0396
+      - uses: actions-cool/issues-helper@d1d51fccf39469b5458203b1369060db0ff0c0db
         with:
           actions: create-comment
           issue-number: ${{ github.event.number }}

.github/workflows/pr-contributor-welcome.yml

@@ -17,7 +17,7 @@ jobs:
       issues: write  # for actions-cool/maintain-one-comment to modify or create issue comments
       pull-requests: write  # for actions-cool/maintain-one-comment to modify or create PR comments
     if: github.event.pull_request.merged == true && github.repository == 'ant-design/ant-design'
-    runs-on: blacksmith-4vcpu-ubuntu-2404
+    runs-on: ubuntu-latest
     steps:
       - name: get commit count
         id: get_commit_count

.github/workflows/pr-open-check.yml

@@ -12,7 +12,7 @@ jobs:
     permissions:
       issues: write  # for actions-cool/pr-welcome to create, update & react on issues
       pull-requests: write  # for actions-cool/pr-welcome to request reviewer
-    runs-on: blacksmith-4vcpu-ubuntu-2404
+    runs-on: ubuntu-latest
     steps:
       - uses: actions-cool/pr-welcome@4bd317d60ef3b40a3ccda39c22f66c3358010f92
         with:
@@ -30,7 +30,7 @@ jobs:
   check-changelog:
     permissions:
       pull-requests: write  # for actions-cool/pr-check-fill to create or update PR comments
-    runs-on: blacksmith-4vcpu-ubuntu-2404
+    runs-on: ubuntu-latest
     steps:
       - name: check fill
         uses: actions-cool/pr-check-fill@35194e32fd717c88c4fde15fbde9005933c2d452

.github/workflows/pr-open-notify.yml

@@ -9,7 +9,7 @@ permissions:
 
 jobs:
   send-to-dingtalk:
-    runs-on: blacksmith-4vcpu-ubuntu-2404
+    runs-on: ubuntu-latest
     steps:
       - name: send to dingtalk
         uses: visiky/dingtalk-release-notify@64fcb0373782b6c2f6d9b9ea3c68af80ca189585

.github/workflows/preview-deploy.yml

@@ -14,7 +14,7 @@ permissions:
 jobs:
   upstream-workflow-summary:
     name: upstream workflow summary
-    runs-on: blacksmith-4vcpu-ubuntu-2404
+    runs-on: ubuntu-latest
     if: github.event.workflow_run.event == 'pull_request'
     outputs:
       jobs: ${{ steps.prep-summary.outputs.result }}
@@ -57,13 +57,13 @@ jobs:
       actions: read # for dawidd6/action-download-artifact to query and download artifacts
       issues: write # for actions-cool/maintain-one-comment to modify or create issue comments
       pull-requests: write # for actions-cool/maintain-one-comment to modify or create PR comments
-    runs-on: blacksmith-4vcpu-ubuntu-2404
+    runs-on: ubuntu-latest
     needs: upstream-workflow-summary
     if: github.event.workflow_run.event == 'pull_request'
     steps:
       # We need get PR id first
       - name: download pr artifact
-        uses: dawidd6/action-download-artifact@v12
+        uses: dawidd6/action-download-artifact@v11
         with:
           workflow: ${{ github.event.workflow_run.workflow_id }}
           run_id: ${{ github.event.workflow_run.id }}
@@ -83,7 +83,7 @@ jobs:
       # Download site artifact
       - name: download site artifact
         if: ${{ fromJSON(needs.upstream-workflow-summary.outputs.build-success) }}
-        uses: dawidd6/action-download-artifact@v12
+        uses: dawidd6/action-download-artifact@v11
         with:
           workflow: ${{ github.event.workflow_run.workflow_id }}
           run_id: ${{ github.event.workflow_run.id }}

.github/workflows/preview-start.yml

@@ -19,7 +19,7 @@ jobs:
       issues: write  # for actions-cool/maintain-one-comment to modify or create issue comments
       pull-requests: write  # for actions-cool/maintain-one-comment to modify or create PR comments
     name: start preview info
-    runs-on: blacksmith-4vcpu-ubuntu-2404
+    runs-on: ubuntu-latest
     steps:
       - name: update status comment
         uses: actions-cool/maintain-one-comment@4b2dbf086015f892dcb5e8c1106f5fccd6c1476b

.github/workflows/release-dingtalk.yml

@@ -18,7 +18,7 @@ jobs:
     permissions:
       contents: write  # for actions-cool/release-helper to create releases
     if: github.event.ref_type == 'tag'
-    runs-on: blacksmith-4vcpu-ubuntu-2404
+    runs-on: ubuntu-latest
     steps:
       - name: Send to Ant Design DingGroup
         uses: actions-cool/release-helper@v2

.github/workflows/release-x.yml

@@ -5,7 +5,7 @@ on:
 
 jobs:
   tweet:
-    runs-on: blacksmith-4vcpu-ubuntu-2404
+    runs-on: ubuntu-latest
     if: ${{ github.event.ref_type == 'tag' && !contains(github.event.ref, 'alpha') }}
     steps:
       - name: Tweet

.github/workflows/site-deploy.yml

@@ -57,7 +57,7 @@ jobs:
         run: echo "VERSION=$(echo ${{ github.ref_name }} | sed 's/\./-/g')" >> $GITHUB_OUTPUT
 
   deploy-to-pages:
-    runs-on: blacksmith-4vcpu-ubuntu-2404
+    runs-on: ubuntu-latest
     needs: build-site
     steps:
       - uses: utooland/setup-utoo@v1
@@ -101,7 +101,7 @@ jobs:
 
   # https://github.com/ant-design/ant-design/pull/49213/files#r1625446496
   upload-to-release:
-    runs-on: blacksmith-4vcpu-ubuntu-2404
+    runs-on: ubuntu-latest
     # 仅在 tag 的时候工作，因为我们要将内容发布到以 tag 为版本号的 release 里
     if: startsWith(github.ref, 'refs/tags/')
     needs: build-site

.github/workflows/size-limit.yml

@@ -13,16 +13,16 @@ jobs:
     permissions:
       contents: read
       pull-requests: write
-    runs-on: blacksmith-4vcpu-ubuntu-2404
+    runs-on: ubuntu-latest
 
     steps:
       - uses: actions/checkout@v6
-      - uses: oven-sh/setup-bun@v2
+      - uses: utooland/setup-utoo@v1
       - name: size-limit
         uses: ant-design/size-limit-action@master
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
-          package_manager: bun
+          package_manager: ut
           build_script: dist
         env:
           NODE_OPTIONS: --max_old_space_size=4096

.github/workflows/sync-gitee.yml

@@ -19,7 +19,7 @@ jobs:
   mirror:
     permissions:
       contents: none
-    runs-on: blacksmith-4vcpu-ubuntu-2404
+    runs-on: ubuntu-latest
     if: github.repository == 'ant-design/ant-design'
     steps:
       - name: mirror

.github/workflows/test-v6.yml

@@ -0,0 +1,231 @@
+# Origin Source
+# https://github.com/ant-design/ant-design/blob/79f566b7f8abb1012ef55b0d2793bfdf5595b85d/.github/workflows/test.yml
+name: ✅ test v6
+
+on:
+  push:
+    branches: [next]
+  pull_request:
+    branches: [next]
+
+# Cancel prev CI if new commit come
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+permissions:
+  contents: read
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+      - uses: utooland/setup-utoo@v1
+      - run: ut install
+      - run: ut lint
+
+  ################################ Test ################################
+  test-react-legacy:
+    name: test-react-legacy
+    strategy:
+      matrix:
+        react: ['18']
+        shard: [1/2, 2/2]
+    env:
+      REACT: ${{ matrix.react }}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+      - uses: utooland/setup-utoo@v1
+      - run: ut
+      - name: install react 18
+        if: ${{ matrix.react == '18' }}
+        run: ut ut-install-react-18
+      # dom test
+      - name: dom test
+        run: ut test -- --maxWorkers=2 --shard=${{matrix.shard}}
+
+  test-node:
+    name: test-node
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+      - uses: utooland/setup-utoo@v1
+      - run: ut install
+      - run: ut run test:node
+
+  test-react-latest:
+    name: test-react-latest
+    strategy:
+      matrix:
+        module: [dom]
+        shard: [1/2, 2/2]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+      - uses: utooland/setup-utoo@v1
+      - run: ut install --ignore-scripts
+
+      # dom test
+      - name: dom test
+        run: ut test -- --maxWorkers=2 --shard=${{matrix.shard}} --coverage
+
+      - name: persist coverages
+        run: |
+          mkdir persist-coverage
+          mv coverage/coverage-final.json persist-coverage/react-test-${{matrix.module}}-${{strategy.job-index}}.json
+
+      - uses: actions/upload-artifact@v4
+        name: upload coverages
+        with:
+          name: coverage-artifacts-${{ matrix.module }}-${{ strategy.job-index }}
+          path: persist-coverage/
+
+  test-react-latest-dist:
+    name: test-react-latest-dist
+    strategy:
+      matrix:
+        module: [dist, dist-min]
+        shard: [1/2, 2/2]
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - uses: actions/checkout@v6
+      - uses: utooland/setup-utoo@v1
+      - run: ut
+
+      - name: restore cache from dist
+        uses: actions/cache@v5
+        with:
+          path: dist
+          key: dist-${{ github.sha }}
+
+      - name: dist-min test
+        if: ${{ matrix.module == 'dist-min' }}
+        run: ut test
+        env:
+          LIB_DIR: dist-min
+
+      - name: dist test
+        if: ${{ matrix.module == 'dist' }}
+        run: ut test
+        env:
+          LIB_DIR: dist
+
+  ############################ Test Coverage ###########################
+  upload-test-coverage:
+    name: test-coverage
+    runs-on: ubuntu-latest
+    needs: test-react-latest
+    steps:
+      - uses: actions/checkout@v6
+      - uses: utooland/setup-utoo@v1
+      - uses: actions/download-artifact@v7
+        with:
+          pattern: coverage-artifacts-*
+          merge-multiple: true
+          path: persist-coverage
+      - name: Merge Code Coverage
+        run: |
+          utx nyc merge persist-coverage/ coverage/coverage-final.json
+          utx nyc report --reporter text -t coverage --report-dir coverage
+          rm -rf persist-coverage
+      - name: Upload coverage to codecov
+        uses: codecov/codecov-action@v5
+        with:
+          # use own token to upload coverage reports
+          token: ${{ secrets.CODECOV_TOKEN }}
+
+  ########################### Compile & Test ###########################
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+      - uses: utooland/setup-utoo@v1
+      - run: ut
+
+      - name: cache lib
+        uses: actions/cache@v5
+        with:
+          path: lib
+          key: lib-${{ github.sha }}
+
+      - name: cache es
+        uses: actions/cache@v5
+        with:
+          path: es
+          key: es-${{ github.sha }}
+
+      - name: compile
+        run: ut compile
+
+      - name: cache dist
+        uses: actions/cache@v5
+        with:
+          path: dist
+          key: dist-${{ github.sha }}
+
+      - name: dist
+        run: ut dist
+        env:
+          NODE_OPTIONS: --max_old_space_size=4096
+          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+          CI: 1
+
+      - name: check build files
+        run: ut test:dekko
+
+      # Artifact build files
+      - uses: actions/upload-artifact@v4
+        if: github.event_name == 'push' && github.ref == 'refs/heads/next'
+        with:
+          name: build artifacts
+          path: |
+            dist
+            locale
+            es
+            lib
+
+      - name: zip builds
+        if: github.repository == 'ant-design/ant-design' && github.event_name == 'push' && github.ref == 'refs/heads/next'
+        env:
+          ALI_OSS_AK_ID: ${{ secrets.ALI_OSS_AK_ID }}
+          ALI_OSS_AK_SECRET: ${{ secrets.ALI_OSS_AK_SECRET }}
+          HEAD_SHA: ${{ github.sha }}
+        run: |
+          zip -r oss-artifacts.zip dist locale es lib
+          echo "🤖 Uploading"
+          node scripts/visual-regression/upload.js ./oss-artifacts.zip --ref=$HEAD_SHA
+
+  test-lib-es:
+    name: test lib/es module
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        module: [lib, es]
+        shard: [1/2, 2/2]
+    steps:
+      - uses: actions/checkout@v6
+      - uses: utooland/setup-utoo@v1
+      - run: ut
+
+      - name: restore cache from ${{ matrix.module }}
+        # lib only run in master branch not in pull request
+        if: ${{ github.event_name != 'pull_request' || matrix.module != 'lib' }}
+        uses: actions/cache@v5
+        with:
+          path: ${{ matrix.module }}
+          key: ${{ matrix.module }}-${{ github.sha }}
+
+      - name: compile
+        # lib only run in master branch not in pull request
+        if: ${{ github.event_name != 'pull_request' || matrix.module != 'lib' }}
+        run: ut compile
+
+      - name: test
+        # lib only run in master branch not in pull request
+        if: ${{ github.event_name != 'pull_request' || matrix.module != 'lib' }}
+        run: ut test -- --maxWorkers=2 --shard=${{matrix.shard}}
+        env:
+          LIB_DIR: ${{ matrix.module }}

.github/workflows/test.yml

@@ -18,7 +18,7 @@ permissions:
 
 jobs:
   lint:
-    runs-on: blacksmith-4vcpu-ubuntu-2404
+    runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v6
       - uses: utooland/setup-utoo@v1
@@ -34,40 +34,37 @@ jobs:
         shard: [1/2, 2/2]
     env:
       REACT: ${{ matrix.react }}
-    runs-on: blacksmith-4vcpu-ubuntu-2404
+    runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v6
       - uses: utooland/setup-utoo@v1
       - run: ut
+      - name: install react 16
+        if: ${{ matrix.react == '16' }}
+        run: ut bun-install-react-16
+      - name: install react 17
+        if: ${{ matrix.react == '17' }}
+        run: ut bun-install-react-17
       # dom test
       - name: dom test
         run: ut test -- --maxWorkers=2 --shard=${{matrix.shard}} --coverage
 
   test-node:
     name: test-node
-    runs-on: blacksmith-4vcpu-ubuntu-2404
+    runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v6
       - uses: utooland/setup-utoo@v1
       - 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:
       matrix:
         module: [dom]
         shard: [1/2, 2/2]
-    runs-on: blacksmith-4vcpu-ubuntu-2404
+    runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v6
       - uses: utooland/setup-utoo@v1
@@ -94,7 +91,7 @@ jobs:
       matrix:
         module: [dist, dist-min]
         shard: [1/2, 2/2]
-    runs-on: blacksmith-4vcpu-ubuntu-2404
+    runs-on: ubuntu-latest
     needs: build
     steps:
       - uses: actions/checkout@v6
@@ -122,7 +119,7 @@ jobs:
   ############################ Test Coverage ###########################
   upload-test-coverage:
     name: test-coverage
-    runs-on: blacksmith-4vcpu-ubuntu-2404
+    runs-on: ubuntu-latest
     needs: test-react-latest
     steps:
       - uses: actions/checkout@v6
@@ -147,7 +144,7 @@ jobs:
 
   ########################### Compile & Test ###########################
   build:
-    runs-on: blacksmith-4vcpu-ubuntu-2404
+    runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v6
       - uses: utooland/setup-utoo@v1
@@ -208,7 +205,7 @@ jobs:
 
   test-lib-es:
     name: test lib/es module
-    runs-on: blacksmith-4vcpu-ubuntu-2404
+    runs-on: ubuntu-latest
     strategy:
       matrix:
         module: [lib, es]

.github/workflows/upgrade-deps.yml

@@ -7,7 +7,7 @@ on:
 
 jobs:
   upgrade-deps:
-    runs-on: blacksmith-4vcpu-ubuntu-2404
+    runs-on: ubuntu-latest
     if: github.repository == 'ant-design/ant-design' && github.ref == 'refs/heads/master'
     permissions:
       pull-requests: write # for peter-evans/create-pull-request to create PRs

.github/workflows/verify-files-modify.yml

@@ -12,7 +12,7 @@ jobs:
     if: github.event.pull_request.user.login != 'renovate[bot]' && github.event.pull_request.user.login != 'Copilot'
     permissions:
       pull-requests: write  # for actions-cool/verify-files-modify to update status of PRs
-    runs-on: blacksmith-4vcpu-ubuntu-2404
+    runs-on: ubuntu-latest
     steps:
       - name: verify-version
         uses: actions-cool/verify-files-modify@9f38a3b3d324d4d92c88c8a946001522e17ad554 # pin to latest verified commit
@@ -33,7 +33,7 @@ jobs:
     if: github.event.pull_request.user.login != 'renovate[bot]' && github.event.pull_request.user.login != 'Copilot'
     permissions:
       pull-requests: write  # for actions-cool/verify-files-modify to update status of PRs
-    runs-on: blacksmith-4vcpu-ubuntu-2404
+    runs-on: ubuntu-latest
     steps:
       - name: verify-readme
         uses: actions-cool/verify-files-modify@9f38a3b3d324d4d92c88c8a946001522e17ad554 # pin to latest verified commit

.github/workflows/verify-package-version.yml

@@ -12,7 +12,7 @@ jobs:
     permissions:
       contents: read  # for actions/checkout to fetch code
       pull-requests: write  # for actions-cool/verify-package-version to comment on PR
-    runs-on: blacksmith-4vcpu-ubuntu-2404
+    runs-on: ubuntu-latest
     if: contains(github.event.pull_request.title, 'changelog') || contains(github.event.pull_request.title, 'release')
     steps:
       - uses: actions/checkout@v6

.github/workflows/visual-regression-diff-approver.yml

@@ -17,7 +17,7 @@ jobs:
       statuses: write  # Allow to modfiy commit status
     name: Check Virtual Regression Approval
     if: github.event.issue.pull_request != ''
-    runs-on: blacksmith-4vcpu-ubuntu-2404
+    runs-on: ubuntu-latest
     steps:
     # Check all the comments if contains `VISUAL_DIFF_SUCCESS` or `VISUAL_DIFF_FAILED`
     # Check if member of repo comment `Pass Visual Diff`

.github/workflows/visual-regression-diff-build.yml

@@ -22,7 +22,7 @@ jobs:
     strategy:
       matrix:
         shard: [1/2, 2/2]
-    runs-on: blacksmith-4vcpu-ubuntu-2404
+    runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v6
       - uses: utooland/setup-utoo@v1
@@ -47,7 +47,7 @@ jobs:
   ############################### Diff Images ##############################
   visual-diff-report:
     name: visual-diff report
-    runs-on: blacksmith-4vcpu-ubuntu-2404
+    runs-on: ubuntu-latest
     needs: visual-diff-snapshot
     steps:
       - uses: actions/checkout@v6

.github/workflows/visual-regression-diff-finish.yml

@@ -14,7 +14,7 @@ permissions:
 jobs:
   upstream-workflow-summary:
     name: upstream workflow summary
-    runs-on: blacksmith-4vcpu-ubuntu-2404
+    runs-on: ubuntu-latest
     outputs:
       jobs: ${{ steps.visual_diff_build_job_status.outputs.result }}
       upstream-job-link: ${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.event.workflow_run.id }}/job/${{ steps.visual_diff_build_job_status.outputs.job-id }}
@@ -62,7 +62,7 @@ jobs:
       issues: write  # for actions-cool/maintain-one-comment to modify or create issue comments
       pull-requests: write  # for actions-cool/maintain-one-comment to modify or create PR comments
       statuses: write
-    runs-on: blacksmith-4vcpu-ubuntu-2404
+    runs-on: ubuntu-latest
     needs: [upstream-workflow-summary]
     steps:
       - uses: actions/checkout@v6
@@ -70,7 +70,7 @@ jobs:
 
       # We need get persist-index first
       - name: download image snapshot artifact
-        uses: dawidd6/action-download-artifact@v12
+        uses: dawidd6/action-download-artifact@v11
         with:
           workflow: ${{ github.event.workflow_run.workflow_id }}
           run_id: ${{ github.event.workflow_run.id }}
@@ -92,7 +92,7 @@ jobs:
       - name: download report artifact
         id: download_report
         if: ${{ needs.upstream-workflow-summary.outputs.build-status == 'success' || needs.upstream-workflow-summary.outputs.build-status == 'failure' }}
-        uses: dawidd6/action-download-artifact@v12
+        uses: dawidd6/action-download-artifact@v11
         with:
           workflow: ${{ github.event.workflow_run.workflow_id }}
           run_id: ${{ github.event.workflow_run.id }}

.github/workflows/visual-regression-diff-start.yml

@@ -20,7 +20,7 @@ jobs:
       issues: write  # for actions-cool/maintain-one-comment to modify or create issue comments
       pull-requests: write  # for actions-cool/maintain-one-comment to modify or create PR comments
     name: start visual-regression diff
-    runs-on: blacksmith-4vcpu-ubuntu-2404
+    runs-on: ubuntu-latest
     steps:
       - name: update status comment
         uses: actions-cool/maintain-one-comment@4b2dbf086015f892dcb5e8c1106f5fccd6c1476b

.github/workflows/visual-regression-persist-finish.yml

@@ -14,7 +14,7 @@ permissions:
 jobs:
   upstream-workflow-summary:
     name: upstream workflow summary
-    runs-on: blacksmith-4vcpu-ubuntu-2404
+    runs-on: ubuntu-latest
     outputs:
       jobs: ${{ steps.persist_start_job_status.outputs.result }}
       build-success: ${{ steps.persist_start_job_status.outputs.build-success }}
@@ -56,7 +56,7 @@ jobs:
     name: persist image-snapshots
     permissions:
       actions: read # for dawidd6/action-download-artifact to query and download artifacts
-    runs-on: blacksmith-4vcpu-ubuntu-2404
+    runs-on: ubuntu-latest
     needs: [upstream-workflow-summary]
     steps:
       - name: checkout
@@ -67,7 +67,7 @@ jobs:
 
       # We need get persist key first
       - name: Download Visual Regression Ref
-        uses: dawidd6/action-download-artifact@v12
+        uses: dawidd6/action-download-artifact@v11
         with:
           workflow: ${{ github.event.workflow_run.workflow_id }}
           run_id: ${{ github.event.workflow_run.id }}
@@ -81,7 +81,7 @@ jobs:
 
       - name: Download Visual-Regression Artifact
         if: ${{ fromJSON(needs.upstream-workflow-summary.outputs.build-success) }}
-        uses: dawidd6/action-download-artifact@v12
+        uses: dawidd6/action-download-artifact@v11
         with:
           workflow: ${{ github.event.workflow_run.workflow_id }}
           run_id: ${{ github.event.workflow_run.id }}

.github/workflows/visual-regression-persist-start.yml

@@ -15,7 +15,7 @@ permissions:
 jobs:
   test-image:
     name: test image
-    runs-on: blacksmith-4vcpu-ubuntu-2404
+    runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v6
       - uses: utooland/setup-utoo@v1

.jest.js

@@ -9,7 +9,6 @@ const compileModules = [
   '@rc-component',
   // jsdom 27+ depends on ESM parse5, need transform
   'parse5',
-  '@exodus',
   'jsdom',
 ];
 
@@ -48,14 +47,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 +63,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/**',

.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,
-};