chore: adjust

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Signed-off-by: 遇见同学 <1875694521@qq.com>

.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 { createStyles } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 import { clsx } from 'clsx';
 import { useFullSidebarData, useSidebarData } from 'dumi';
 
@@ -33,7 +33,7 @@ const getTagColor = (val?: string) => {
   }
 };
 
-const useStyle = createStyles(({ css, cssVar }) => ({
+const styles = createStaticStyles(({ css, cssVar }) => ({
   link: css`
     display: flex;
     align-items: center;
@@ -62,7 +62,6 @@ 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);

.dumi/hooks/useThemeAnimation.ts

@@ -3,10 +3,14 @@ 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: none;
+  animation: keepAlive ${duration}s linear;
+  animation-fill-mode: forwards;
   mix-blend-mode: normal;
 }
 
@@ -50,7 +54,7 @@ const useThemeAnimation = () => {
           clipPath: isDark ? [...clipPath].reverse() : clipPath,
         },
         {
-          duration: 500,
+          duration: duration * 1000,
           easing: 'ease-in',
           pseudoElement: isDark ? '::view-transition-old(root)' : '::view-transition-new(root)',
         },

.dumi/pages/index/components/BannerRecommends.tsx

@@ -49,7 +49,8 @@ const useStyle = createStyles(({ cssVar, css, cx }) => {
       max-width: 100%;
       margin-inline: auto;
       box-sizing: border-box;
-      column-gap: calc(${cssVar.paddingMD} * 2);
+      column-gap: ${cssVar.paddingMD};
+      padding: 0 ${cssVar.padding};
       align-items: stretch;
       text-align: start;
       min-height: 178px;

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

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { Typography } from 'antd';
-import { createStyles, useTheme } from 'antd-style';
+import { createStaticStyles, useTheme } from 'antd-style';
 import { clsx } from 'clsx';
 
 import SiteContext from '../../../theme/slots/SiteContext';
 import GroupMaskLayer from './GroupMaskLayer';
 
-const useStyle = createStyles(({ css, cssVar }) => ({
+const styles = createStaticStyles(({ css, cssVar }) => ({
   box: css`
     position: relative;
     transition: all ${cssVar.motionDurationSlow};
@@ -46,7 +46,6 @@ 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 { createStyles } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 import { clsx } from 'clsx';
 
-const useStyle = createStyles(({ css }) => ({
+const classNames = createStaticStyles(({ css }) => ({
   siteMask: css`
     z-index: 1;
     position: relative;
@@ -19,11 +19,10 @@ 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, styles.siteMask)}
+      className={clsx(className, classNames.siteMask)}
       onMouseMove={onMouseMove}
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}

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

@@ -5,6 +5,7 @@ import {
   Button,
   Checkbox,
   ColorPicker,
+  ConfigProvider,
   Dropdown,
   Input,
   message,
@@ -17,9 +18,11 @@ import {
   Switch,
   Tooltip,
 } from 'antd';
-import { createStyles } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
+import type { ConfigProviderProps } from 'antd';
 
 import useLocale from '../../../../hooks/useLocale';
+
 import Tilt from './Tilt';
 
 const { _InternalPanelDoNotUseOrYouWillBeFired: ModalPanel } = Modal;
@@ -71,7 +74,7 @@ const locales = {
   },
 };
 
-const useStyle = createStyles(({ cssVar, css }) => {
+const styles = createStaticStyles(({ cssVar, css }) => {
   const gap = cssVar.padding;
   return {
     holder: css`
@@ -103,118 +106,123 @@ const useStyle = createStyles(({ cssVar, css }) => {
     `,
   };
 });
+interface ComponentsBlockProps {
+  config: ConfigProviderProps;
+}
 
-const ComponentsBlock: React.FC = () => {
+const ComponentsBlock: React.FC<ComponentsBlockProps> = (props) => {
   const [locale] = useLocale(locales);
-  const { styles } = useStyle();
+  const { config } = props;
 
   return (
-    <Tilt options={{ max: 4, glare: false, scale: 0.98 }} className={styles.holder}>
-      <ModalPanel title="Ant Design" width="100%">
-        {locale.text}
-      </ModalPanel>
-      <Alert title={locale.infoText} type="info" />
-      {/* Line */}
-      <div className={styles.flex}>
-        <ColorPicker style={{ flex: 'none' }} />
-        <div style={{ flex: 'none' }}>
-          <Space.Compact>
-            <Button>{locale.dropdown}</Button>
-            <Dropdown
-              menu={{
-                items: Array.from({ length: 5 }).map((_, index) => ({
-                  key: `opt${index}`,
-                  label: `${locale.option} ${index}`,
-                })),
-              }}
-            >
-              <Button icon={<DownOutlined />} />
-            </Dropdown>
-          </Space.Compact>
+    <ConfigProvider {...config}>
+      <Tilt options={{ max: 4, glare: false, scale: 0.98 }} className={styles.holder}>
+        <ModalPanel title="Ant Design" width="100%">
+          {locale.text}
+        </ModalPanel>
+        <Alert title={locale.infoText} type="info" />
+        {/* Line */}
+        <div className={styles.flex}>
+          <ColorPicker style={{ flex: 'none' }} />
+          <div style={{ flex: 'none' }}>
+            <Space.Compact>
+              <Button>{locale.dropdown}</Button>
+              <Dropdown
+                menu={{
+                  items: Array.from({ length: 5 }).map((_, index) => ({
+                    key: `opt${index}`,
+                    label: `${locale.option} ${index}`,
+                  })),
+                }}
+              >
+                <Button icon={<DownOutlined />} />
+              </Dropdown>
+            </Space.Compact>
+          </div>
+          <Select
+            style={{ flex: 'auto' }}
+            mode="multiple"
+            maxTagCount="responsive"
+            defaultValue={[{ value: 'apple' }, { value: 'banana' }]}
+            options={[
+              { value: 'apple', label: locale.apple },
+              { value: 'banana', label: locale.banana },
+              { value: 'orange', label: locale.orange },
+              { value: 'watermelon', label: locale.watermelon },
+            ]}
+          />
+          <Input style={{ flex: 'none', width: 120 }} />
         </div>
-        <Select
-          style={{ flex: 'auto' }}
-          mode="multiple"
-          maxTagCount="responsive"
-          defaultValue={[{ value: 'apple' }, { value: 'banana' }]}
-          options={[
-            { value: 'apple', label: locale.apple },
-            { value: 'banana', label: locale.banana },
-            { value: 'orange', label: locale.orange },
-            { value: 'watermelon', label: locale.watermelon },
+        <Progress
+          style={{ margin: 0 }}
+          percent={100}
+          strokeColor={{ '0%': '#108ee9', '100%': '#87d068' }}
+        />
+        <Progress style={{ margin: 0 }} percent={33} status="exception" />
+        <Steps
+          current={1}
+          items={[
+            { title: locale.finished },
+            { title: locale.inProgress },
+            { title: locale.waiting },
           ]}
         />
-        <Input style={{ flex: 'none', width: 120 }} />
-      </div>
-      <Progress
-        style={{ margin: 0 }}
-        percent={100}
-        strokeColor={{ '0%': '#108ee9', '100%': '#87d068' }}
-      />
-      <Progress style={{ margin: 0 }} percent={33} status="exception" />
-      <Steps
-        current={1}
-        items={[
-          { title: locale.finished },
-          { title: locale.inProgress },
-          { title: locale.waiting },
-        ]}
-      />
-      {/* Line */}
-      <div className={styles.block}>
-        <Slider
-          style={{ marginInline: 20 }}
-          range
-          marks={{
-            0: '0°C',
-            26: '26°C',
-            37: '37°C',
-            100: {
-              style: { color: '#f50' },
-              label: <strong>100°C</strong>,
-            },
-          }}
-          defaultValue={[26, 37]}
-        />
-      </div>
-      {/* Line */}
-      <div className={styles.flex}>
-        <Button className={styles.ptg_20} type="primary">
-          {locale.primary}
-        </Button>
-        <Button className={styles.ptg_20} type="primary" danger>
-          {locale.danger}
-        </Button>
-        <Button className={styles.ptg_20}>{locale.default}</Button>
-        <Button className={styles.ptg_20} type="dashed">
-          {locale.dashed}
-        </Button>
-        <Button className={styles.ptg_20} icon={<AntDesignOutlined />}>
-          {locale.icon}
-        </Button>
-      </div>
-      {/* Line */}
-      <div className={styles.block}>
-        <div className={styles.flex}>
-          <Switch
-            className={styles.ptg_none}
-            defaultChecked
-            checkedChildren={<CheckOutlined />}
-            unCheckedChildren={<CloseOutlined />}
-          />
-          <Checkbox.Group
-            className={styles.ptg_none}
-            options={[locale.apple, locale.banana, locale.orange]}
-            defaultValue={[locale.apple]}
+        {/* Line */}
+        <div className={styles.block}>
+          <Slider
+            style={{ marginInline: 20 }}
+            range
+            marks={{
+              0: '0°C',
+              26: '26°C',
+              37: '37°C',
+              100: {
+                style: { color: '#f50' },
+                label: <strong>100°C</strong>,
+              },
+            }}
+            defaultValue={[26, 37]}
           />
         </div>
-      </div>
-      <div>
-        <InternalMessage content={locale.release} type="success" />
-      </div>
-      <InternalTooltip title={locale.hello} placement="topLeft" className={styles.noMargin} />
-      <Alert title="Ant Design love you!" type="success" />
-    </Tilt>
+        {/* Line */}
+        <div className={styles.flex}>
+          <Button className={styles.ptg_20} type="primary">
+            {locale.primary}
+          </Button>
+          <Button className={styles.ptg_20} type="primary" danger>
+            {locale.danger}
+          </Button>
+          <Button className={styles.ptg_20}>{locale.default}</Button>
+          <Button className={styles.ptg_20} type="dashed">
+            {locale.dashed}
+          </Button>
+          <Button className={styles.ptg_20} icon={<AntDesignOutlined />}>
+            {locale.icon}
+          </Button>
+        </div>
+        {/* Line */}
+        <div className={styles.block}>
+          <div className={styles.flex}>
+            <Switch
+              className={styles.ptg_none}
+              defaultChecked
+              checkedChildren={<CheckOutlined />}
+              unCheckedChildren={<CloseOutlined />}
+            />
+            <Checkbox.Group
+              className={styles.ptg_none}
+              options={[locale.apple, locale.banana, locale.orange]}
+              defaultValue={[locale.apple]}
+            />
+          </div>
+        </div>
+        <div>
+          <InternalMessage content={locale.release} type="success" />
+        </div>
+        <InternalTooltip title={locale.hello} placement="topLeft" className={styles.noMargin} />
+        <Alert title="Ant Design love you!" type="success" />
+      </Tilt>
+    </ConfigProvider>
   );
 };
 

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

@@ -1,15 +1,21 @@
-import React, { Suspense, use } from 'react';
-import { Flex, Typography } from 'antd';
+import React, { Suspense, use, useState } from 'react';
+import { Button, Flex, Typography } from 'antd';
+import type { ConfigProviderProps, ThemeConfig } from 'antd';
 import { createStyles } from 'antd-style';
 import { clsx } from 'clsx';
 import { useLocation } from 'dumi';
 
+import { DarkContext } from '../../../../hooks/useDark';
 import useLocale from '../../../../hooks/useLocale';
 import LinkButton from '../../../../theme/common/LinkButton';
+import PromptDrawer from '../../../../theme/common/ThemeSwitch/PromptDrawer';
+import ThemeIcon from '../../../../theme/common/ThemeSwitch/ThemeIcon';
 import SiteContext from '../../../../theme/slots/SiteContext';
 import type { SiteContextProps } from '../../../../theme/slots/SiteContext';
 import * as utils from '../../../../theme/utils';
 import GroupMaskLayer from '../GroupMaskLayer';
+import { muiComponentConfig, muiDark, muiLight } from './themes/mui';
+import { shadcnComponentConfig, shadcnDark, shadcnLight } from './themes/shadcn';
 
 import '../SiteContext';
 
@@ -119,64 +125,251 @@ const useStyle = createStyles(({ cssVar, css, cx }, siteConfig: SiteContextProps
       bottom: 120px;
       inset-inline-end: ${siteConfig.isMobile ? 0 : '40%'};
     `,
+    themeBar: css`
+      display: flex;
+      gap: 12px;
+      margin: 24px 0;
+      align-items: center;
+      justify-content: center;
+    `,
+    themeLabel: css`
+      background: ${cssVar.colorBgElevated};
+      padding: 6px 12px;
+      border-radius: 20px;
+      box-shadow: ${cssVar.boxShadowSecondary};
+      color: ${cssVar.colorText};
+      font-weight: 600;
+      font-size: ${cssVar.fontSizeSM};
+    `,
+    presets: css`
+      display: flex;
+      gap: 8px;
+      align-items: center;
+    `,
+    presetButton: cx(css`
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      border-radius: 14px;
+      background: ${cssVar.colorBgElevated};
+      color: ${cssVar.colorText};
+      cursor: pointer;
+      border: 1px solid transparent;
+      box-shadow: ${cssVar.boxShadowSecondary};
+      transition: all 0.2s ease;
+      font-size: ${cssVar.fontSizeSM};
+      padding: 7px 18px;
+      line-height: 18px;
+      border-radius: 6px;
+      font-size: 14px;
+      &:hover {
+        transform: translateY(-2px);
+      }
+    `),
+    swatches: css`
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+    `,
+    swatch: css`
+      width: 10px;
+      height: 10px;
+      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
+    `,
+    name: css`
+      margin-left: 10px;
+      text-transform: capitalize;
+    `,
   };
 });
 
+type THEME_MAP = 'antd' | 'shadcn' | 'mui';
+
+interface Theme {
+  name: THEME_MAP;
+  theme: ThemeConfig;
+  componentsConfig: Partial<ConfigProviderProps>;
+  style?: React.CSSProperties;
+  activeStyle: React.CSSProperties;
+  swatches: string[];
+}
+
 const PreviewBanner: React.FC<Readonly<React.PropsWithChildren>> = (props) => {
+  const { updateSiteConfig } = use<SiteContextProps>(SiteContext);
+  const [isMarketDrawerOpen, setIsMarketDrawerOpen] = useState(false);
   const { children } = props;
   const [locale] = useLocale(locales);
   const siteConfig = use(SiteContext);
   const { styles } = useStyle(siteConfig);
   const { pathname, search } = useLocation();
   const isZhCN = utils.isZhCN(pathname);
+  const [theme, setTheme] = useState<THEME_MAP>('antd');
+  const isDark = React.use(DarkContext);
+
+  const themeMap: Record<THEME_MAP, Theme> = {
+    antd: {
+      name: 'antd',
+      theme: {},
+      componentsConfig: {},
+      activeStyle: {
+        border: '1px solid #1677ff',
+      },
+      swatches: ['#1677ff', '#91d5ff', '#f0f5ff'],
+    },
+    shadcn: {
+      name: 'shadcn',
+      theme: isDark ? shadcnDark : shadcnLight,
+      style: {
+        backgroundColor: 'rgba(0, 0, 0, 0.1)',
+      },
+      activeStyle: {
+        border: '1px solid oklch(0.205 0 0)',
+      },
+      componentsConfig: shadcnComponentConfig,
+      swatches: ['oklch(0.205 0 0)', 'oklch(0.556 0 0)', 'rgba(0, 0, 0, 0.05)'],
+    },
+    mui: {
+      name: 'mui',
+      theme: isDark ? muiDark : muiLight,
+      componentsConfig: muiComponentConfig,
+      style: {
+        color: '#fff',
+        backgroundColor: 'rgb(2, 136, 209, 0.5)',
+      },
+      activeStyle: {
+        border: '1px solid rgb(25, 118, 210)',
+      },
+      swatches: ['#1677ff', '#91d5ff', '#f0f5ff'],
+    },
+  };
+  const config: ConfigProviderProps = {
+    theme: themeMap[theme].theme,
+    ...themeMap[theme].componentsConfig,
+  };
 
   return (
     <GroupMaskLayer>
-      {/* Image Left Top */}
-      <img
-        alt="bg"
-        src="https://gw.alipayobjects.com/zos/bmw-prod/49f963db-b2a8-4f15-857a-270d771a1204.svg"
-        draggable={false}
-        className={clsx(styles.bgImg, styles.bgImgTop)}
-      />
-      {/* Image Right Top */}
-      <img
-        alt="bg"
-        src="https://gw.alipayobjects.com/zos/bmw-prod/e152223c-bcae-4913-8938-54fda9efe330.svg"
-        draggable={false}
-        className={clsx(styles.bgImg, styles.bgImgBottom)}
-      />
+      <div
+        className={styles.holder}
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'stretch',
+          justifyContent: 'center',
+          height: 640,
+          position: 'relative',
+          overflow: 'hidden',
+          perspective: 800,
+        }}
+      >
+        <div
+          style={{
+            flex: 1,
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
+            position: 'relative',
+            zIndex: 1,
+          }}
+        >
+          <img
+            alt="bg"
+            src="https://gw.alipayobjects.com/zos/bmw-prod/49f963db-b2a8-4f15-857a-270d771a1204.svg"
+            draggable={false}
+            className={clsx(styles.bgImg, styles.bgImgTop)}
+            style={{ position: 'absolute', left: 0, top: 0, zIndex: 0 }}
+          />
+          <div className={styles.mask} />
 
-      <div className={styles.holder}>
-        {/* Mobile not show the component preview */}
-        <Suspense fallback={null}>
-          {siteConfig.isMobile ? null : (
-            <div className={styles.block}>
-              <ComponentsBlock />
+          <Typography className={styles.typography}>
+            <h1>Ant Design</h1>
+            <p>{locale.slogan}</p>
+          </Typography>
+          <div className={styles.themeBar}>
+            <div className={styles.presets}>
+              {Object.keys(themeMap).map((v, i) => {
+                const key = v as THEME_MAP;
+                return (
+                  <div
+                    key={i}
+                    role="button"
+                    tabIndex={0}
+                    onClick={() => setTheme(themeMap[key].name)}
+                    className={clsx(styles.presetButton)}
+                    style={{
+                      ...themeMap[key].style,
+                      ...(theme === themeMap[key].name ? themeMap[key].activeStyle : {}),
+                    }}
+                  >
+                    <div className={styles.swatches}>
+                      {themeMap[key].swatches?.map((s: any) => (
+                        <span key={s} className={styles.swatch} style={{ background: s }} />
+                      ))}
+                    </div>
+                    <span className={styles.name}>{themeMap[key].name}</span>
+                  </div>
+                );
+              })}
+              <Button
+                variant="solid"
+                icon={<ThemeIcon />}
+                onClick={() => setIsMarketDrawerOpen(true)}
+                style={{ fontSize: 16 }}
+              />
             </div>
-          )}
-        </Suspense>
-        <div className={styles.mask} />
-        <Typography className={styles.typography}>
-          <h1>Ant Design</h1>
-          <p>{locale.slogan}</p>
-        </Typography>
-        <Flex gap="middle" className={styles.btnWrap}>
-          <LinkButton
-            size="large"
-            type="primary"
-            to={utils.getLocalizedPathname('/components/overview/', isZhCN, search)}
-          >
-            {locale.start}
-          </LinkButton>
-          <LinkButton
-            size="large"
-            to={utils.getLocalizedPathname('/docs/spec/introduce/', isZhCN, search)}
-          >
-            {locale.designLanguage}
-          </LinkButton>
-        </Flex>
-        <div className={styles.child}>{children}</div>
+          </div>
+          <Flex gap="middle" className={styles.btnWrap}>
+            <LinkButton
+              size="large"
+              type="primary"
+              to={utils.getLocalizedPathname('/components/overview/', isZhCN, search)}
+            >
+              {locale.start}
+            </LinkButton>
+            <LinkButton
+              size="large"
+              to={utils.getLocalizedPathname('/docs/spec/introduce/', isZhCN, search)}
+            >
+              {locale.designLanguage}
+            </LinkButton>
+          </Flex>
+          <div className={styles.child}>{children}</div>
+        </div>
+        <PromptDrawer
+          open={isMarketDrawerOpen}
+          onClose={() => setIsMarketDrawerOpen(false)}
+          onThemeChange={(nextTheme) => {
+            updateSiteConfig({
+              dynamicTheme: nextTheme,
+            });
+          }}
+        />
+        <div
+          style={{
+            width: '40%',
+            display: 'flex',
+            alignItems: 'center',
+            position: 'relative',
+            backgroundColor: isDark ? '#393F4A' : '#f4f8ff',
+            borderRadius: '0 0px 0px 12px',
+          }}
+        >
+          <img
+            alt="bg"
+            src="https://gw.alipayobjects.com/zos/bmw-prod/e152223c-bcae-4913-8938-54fda9efe330.svg"
+            draggable={false}
+            className={clsx(styles.bgImg, styles.bgImgBottom)}
+            style={{ position: 'absolute', right: 0, top: 0, zIndex: 0 }}
+          />
+          <Suspense fallback={null}>
+            {siteConfig.isMobile ? null : (
+              <div className={styles.block} style={{ position: 'relative', zIndex: 1 }}>
+                <ComponentsBlock config={config} />
+              </div>
+            )}
+          </Suspense>
+        </div>
       </div>
     </GroupMaskLayer>
   );

.dumi/pages/index/components/PreviewBanner/themes/mui.ts

@@ -0,0 +1,244 @@
+import type { ConfigProviderProps, ThemeConfig } from 'antd';
+import { theme } from 'antd';
+
+const { darkAlgorithm, defaultAlgorithm } = theme;
+
+export const mui: ThemeConfig = {
+  token: {
+    colorPrimary: '#1976d2',
+    colorSuccess: '#2e7d32',
+    colorWarning: '#ed6c02',
+    colorError: '#d32f2f',
+    colorInfo: '#0288d1',
+    colorTextBase: '#212121',
+    colorBgBase: '#fafafa',
+    colorPrimaryBg: '#e3f2fd',
+    colorPrimaryBgHover: '#bbdefb',
+    colorPrimaryBorder: '#90caf9',
+    colorPrimaryBorderHover: '#64b5f6',
+    colorPrimaryHover: '#42a5f5',
+    colorPrimaryActive: '#1565c0',
+    colorPrimaryText: '#1976d2',
+    colorPrimaryTextHover: '#42a5f5',
+    colorPrimaryTextActive: '#1565c0',
+    colorSuccessBg: '#e8f5e9',
+    colorSuccessBgHover: '#c8e6c9',
+    colorSuccessBorder: '#a5d6a7',
+    colorSuccessBorderHover: '#81c784',
+    colorSuccessHover: '#4caf50',
+    colorSuccessActive: '#1b5e20',
+    colorSuccessText: '#2e7d32',
+    colorSuccessTextHover: '#4caf50',
+    colorSuccessTextActive: '#1b5e20',
+    colorWarningBg: '#fff3e0',
+    colorWarningBgHover: '#ffe0b2',
+    colorWarningBorder: '#ffcc02',
+    colorWarningBorderHover: '#ffb74d',
+    colorWarningHover: '#ff9800',
+    colorWarningActive: '#e65100',
+    colorWarningText: '#ed6c02',
+    colorWarningTextHover: '#ff9800',
+    colorWarningTextActive: '#e65100',
+    colorErrorBg: '#ffebee',
+    colorErrorBgHover: '#ffcdd2',
+    colorErrorBorder: '#ef9a9a',
+    colorErrorBorderHover: '#e57373',
+    colorErrorHover: '#ef5350',
+    colorErrorActive: '#c62828',
+    colorErrorText: '#d32f2f',
+    colorErrorTextHover: '#ef5350',
+    colorErrorTextActive: '#c62828',
+    colorInfoBg: '#e1f5fe',
+    colorInfoBgHover: '#b3e5fc',
+    colorInfoBorder: '#81d4fa',
+    colorInfoBorderHover: '#4fc3f7',
+    colorInfoHover: '#03a9f4',
+    colorInfoActive: '#01579b',
+    colorInfoText: '#0288d1',
+    colorInfoTextHover: '#03a9f4',
+    colorInfoTextActive: '#01579b',
+    colorText: 'rgba(33, 33, 33, 0.87)',
+    colorTextSecondary: 'rgba(33, 33, 33, 0.6)',
+    colorTextTertiary: 'rgba(33, 33, 33, 0.38)',
+    colorTextQuaternary: 'rgba(33, 33, 33, 0.26)',
+    colorTextDisabled: 'rgba(33, 33, 33, 0.38)',
+    colorBgContainer: '#ffffff',
+    colorBgElevated: '#ffffff',
+    colorBgLayout: '#f5f5f5',
+    colorBgSpotlight: 'rgba(33, 33, 33, 0.85)',
+    colorBgMask: 'rgba(33, 33, 33, 0.5)',
+    colorBorder: '#e0e0e0',
+    colorBorderSecondary: '#eeeeee',
+    borderRadius: 4,
+    borderRadiusXS: 1,
+    borderRadiusSM: 2,
+    borderRadiusLG: 6,
+    padding: 16,
+    paddingSM: 8,
+    paddingLG: 24,
+    margin: 16,
+    marginSM: 8,
+    marginLG: 24,
+    boxShadow:
+      '0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)',
+    boxShadowSecondary:
+      '0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)',
+  },
+  components: {
+    Button: {
+      primaryShadow:
+        '0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12)',
+      defaultShadow:
+        '0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12)',
+      dangerShadow:
+        '0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12)',
+      fontWeight: 500,
+      defaultBorderColor: 'rgba(0, 0, 0, 0.23)',
+      defaultColor: 'rgba(0, 0, 0, 0.87)',
+      defaultBg: '#ffffff',
+      defaultHoverBg: 'rgba(25, 118, 210, 0.04)',
+      defaultHoverBorderColor: 'rgba(0, 0, 0, 0.23)',
+      paddingInline: 16,
+      paddingBlock: 6,
+      contentFontSize: 14,
+      borderRadius: 4,
+    },
+    Alert: {
+      borderRadiusLG: 4,
+    },
+    Modal: {
+      borderRadiusLG: 4,
+    },
+    Progress: {
+      defaultColor: '#1976d2',
+      remainingColor: 'rgba(25, 118, 210, 0.12)',
+    },
+    Steps: {
+      iconSize: 24,
+    },
+    Checkbox: {
+      borderRadiusSM: 2,
+    },
+    Slider: {
+      trackBg: 'rgba(25, 118, 210, 0.26)',
+      trackHoverBg: 'rgba(25, 118, 210, 0.38)',
+      handleSize: 20,
+      handleSizeHover: 20,
+      railSize: 4,
+    },
+    ColorPicker: {
+      borderRadius: 4,
+    },
+  },
+};
+export const muiLight: ThemeConfig = {
+  algorithm: defaultAlgorithm,
+  token: mui.token,
+  components: mui.components,
+};
+
+export const muiDark: ThemeConfig = {
+  algorithm: darkAlgorithm,
+  token: {
+    ...mui.token,
+  },
+  components: {
+    ...mui.components,
+    Message: {
+      contentBg: '#212121',
+      contentPadding: '8px 16px',
+      zIndexPopup: 1010,
+    },
+  },
+};
+
+export const muiComponentConfig: Partial<ConfigProviderProps> = {
+  button: {
+    styles: (info) => {
+      const { props } = info;
+      if (props.type === 'primary') {
+        return {
+          root: {
+            backgroundColor: '#1976d2',
+            color: '#ffffff',
+            border: 'none',
+            fontWeight: 500,
+            textTransform: 'uppercase' as const,
+            letterSpacing: '0.02857em',
+            boxShadow:
+              '0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12)',
+            transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
+          },
+        };
+      }
+      if (props.type === 'default') {
+        return {
+          root: {
+            backgroundColor: '#ffffff',
+            color: 'rgba(0, 0, 0, 0.87)',
+            border: '1px solid rgba(0, 0, 0, 0.23)',
+            fontWeight: 500,
+            textTransform: 'uppercase' as const,
+            letterSpacing: '0.02857em',
+            transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
+          },
+        };
+      }
+      if (props.danger) {
+        return {
+          root: {
+            backgroundColor: '#d32f2f',
+            color: '#ffffff',
+            border: 'none',
+            fontWeight: 500,
+            textTransform: 'uppercase' as const,
+            letterSpacing: '0.02857em',
+            boxShadow:
+              '0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12)',
+          },
+        };
+      }
+      return {};
+    },
+  },
+  input: {
+    styles: (info) => {
+      const { props } = info;
+      const baseStyle = {
+        root: {
+          borderColor: 'rgba(0, 0, 0, 0.23)',
+          transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
+        },
+        input: {
+          color: 'rgba(0, 0, 0, 0.87)',
+          fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+        },
+      };
+      if (props.status === 'error') {
+        return {
+          ...baseStyle,
+          root: {
+            ...baseStyle.root,
+            borderColor: '#d32f2f',
+          },
+        };
+      }
+      return baseStyle;
+    },
+  },
+  select: {
+    styles: {
+      root: {
+        borderColor: 'rgba(0, 0, 0, 0.23)',
+        fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+      },
+      popup: {
+        root: {
+          borderRadius: 4,
+          boxShadow:
+            '0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12)',
+        },
+      },
+    },
+  },
+};

.dumi/pages/index/components/PreviewBanner/themes/shadcn.ts

@@ -0,0 +1,243 @@
+import type { ConfigProviderProps, ThemeConfig } from 'antd';
+import { theme } from 'antd';
+
+const { darkAlgorithm, defaultAlgorithm } = theme;
+
+export const shadcn: ThemeConfig = {
+  algorithm: defaultAlgorithm,
+  token: {
+    colorPrimary: '#262626',
+    colorSuccess: '#22c55e',
+    colorWarning: '#f97316',
+    colorError: '#ef4444',
+    colorInfo: '#262626',
+    colorTextBase: '#262626',
+    colorBgBase: '#ffffff',
+    colorPrimaryBg: '#f5f5f5',
+    colorPrimaryBgHover: '#e5e5e5',
+    colorPrimaryBorder: '#d4d4d4',
+    colorPrimaryBorderHover: '#a3a3a3',
+    colorPrimaryHover: '#404040',
+    colorPrimaryActive: '#171717',
+    colorPrimaryText: '#262626',
+    colorPrimaryTextHover: '#404040',
+    colorPrimaryTextActive: '#171717',
+    colorSuccessBg: '#f0fdf4',
+    colorSuccessBgHover: '#dcfce7',
+    colorSuccessBorder: '#bbf7d0',
+    colorSuccessBorderHover: '#86efac',
+    colorSuccessHover: '#16a34a',
+    colorSuccessActive: '#15803d',
+    colorSuccessText: '#16a34a',
+    colorSuccessTextHover: '#16a34a',
+    colorSuccessTextActive: '#15803d',
+    colorWarningBg: '#fff7ed',
+    colorWarningBgHover: '#fed7aa',
+    colorWarningBorder: '#fdba74',
+    colorWarningBorderHover: '#fb923c',
+    colorWarningHover: '#ea580c',
+    colorWarningActive: '#c2410c',
+    colorWarningText: '#ea580c',
+    colorWarningTextHover: '#ea580c',
+    colorWarningTextActive: '#c2410c',
+    colorErrorBg: '#fef2f2',
+    colorErrorBgHover: '#fecaca',
+    colorErrorBorder: '#fca5a5',
+    colorErrorBorderHover: '#f87171',
+    colorErrorHover: '#dc2626',
+    colorErrorActive: '#b91c1c',
+    colorErrorText: '#dc2626',
+    colorErrorTextHover: '#dc2626',
+    colorErrorTextActive: '#b91c1c',
+    colorInfoBg: '#f5f5f5',
+    colorInfoBgHover: '#e5e5e5',
+    colorInfoBorder: '#d4d4d4',
+    colorInfoBorderHover: '#a3a3a3',
+    colorInfoHover: '#404040',
+    colorInfoActive: '#171717',
+    colorInfoText: '#262626',
+    colorInfoTextHover: '#404040',
+    colorInfoTextActive: '#171717',
+    colorText: '#262626',
+    colorTextSecondary: '#525252',
+    colorTextTertiary: '#737373',
+    colorTextQuaternary: '#a3a3a3',
+    colorTextDisabled: '#a3a3a3',
+    colorBgContainer: '#ffffff',
+    colorBgElevated: '#ffffff',
+    colorBgLayout: '#fafafa',
+    colorBgSpotlight: 'rgba(38, 38, 38, 0.85)',
+    colorBgMask: 'rgba(38, 38, 38, 0.45)',
+    colorBorder: '#e5e5e5',
+    colorBorderSecondary: '#f5f5f5',
+    borderRadius: 10,
+    borderRadiusXS: 2,
+    borderRadiusSM: 6,
+    borderRadiusLG: 14,
+    padding: 16,
+    paddingSM: 12,
+    paddingLG: 24,
+    margin: 16,
+    marginSM: 12,
+    marginLG: 24,
+    boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)',
+    boxShadowSecondary: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)',
+  },
+  components: {
+    Button: {
+      primaryShadow: 'none',
+      defaultShadow: 'none',
+      dangerShadow: 'none',
+      defaultBorderColor: '#e4e4e7',
+      defaultColor: '#18181b',
+      defaultBg: '#ffffff',
+      defaultHoverBg: '#f4f4f5',
+      defaultHoverBorderColor: '#d4d4d8',
+      defaultHoverColor: '#18181b',
+      defaultActiveBg: '#e4e4e7',
+      defaultActiveBorderColor: '#d4d4d8',
+      borderRadius: 6,
+    },
+    Input: {
+      activeShadow: 'none',
+      hoverBorderColor: '#a1a1aa',
+      activeBorderColor: '#18181b',
+      borderRadius: 6,
+    },
+    Select: {
+      optionSelectedBg: '#f4f4f5',
+      optionActiveBg: '#fafafa',
+      optionSelectedFontWeight: 500,
+      borderRadius: 6,
+    },
+    Alert: {
+      borderRadiusLG: 8,
+    },
+    Modal: {
+      borderRadiusLG: 12,
+    },
+    Progress: {
+      defaultColor: '#18181b',
+      remainingColor: '#f4f4f5',
+    },
+    Steps: {
+      iconSize: 32,
+    },
+    Switch: {
+      trackHeight: 24,
+      trackMinWidth: 44,
+      innerMinMargin: 4,
+      innerMaxMargin: 24,
+    },
+    Checkbox: {
+      borderRadiusSM: 4,
+    },
+    Slider: {
+      trackBg: '#f4f4f5',
+      trackHoverBg: '#e4e4e7',
+      handleSize: 18,
+      handleSizeHover: 20,
+      railSize: 6,
+    },
+    ColorPicker: {
+      borderRadius: 6,
+    },
+  },
+};
+
+export const shadcnLight: ThemeConfig = {
+  algorithm: defaultAlgorithm,
+  token: shadcn.token,
+  components: shadcn.components,
+};
+
+export const shadcnDark: ThemeConfig = {
+  algorithm: darkAlgorithm,
+  token: {
+    ...shadcn.token,
+  },
+  components: {
+    ...shadcn.components,
+    Message: {
+      contentBg: '#212121',
+    },
+  },
+};
+
+export const shadcnComponentConfig: Partial<ConfigProviderProps> = {
+  button: {
+    styles: (info) => {
+      const { props } = info;
+      if (props.type === 'primary') {
+        return {
+          root: {
+            backgroundColor: '#18181b',
+            color: '#ffffff',
+            border: '1px solid #18181b',
+            fontWeight: 500,
+            transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
+          },
+        };
+      }
+      if (props.type === 'default') {
+        return {
+          root: {
+            backgroundColor: '#ffffff',
+            color: '#18181b',
+            border: '1px solid #e4e4e7',
+            fontWeight: 500,
+            transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
+          },
+        };
+      }
+      if (props.danger) {
+        return {
+          root: {
+            backgroundColor: '#dc2626',
+            color: '#ffffff',
+            border: '1px solid #dc2626',
+            fontWeight: 500,
+          },
+        };
+      }
+      return {};
+    },
+  },
+  input: {
+    styles: (info) => {
+      const { props } = info;
+      const baseStyle = {
+        root: {
+          borderColor: '#e4e4e7',
+          transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
+        },
+        input: {
+          color: '#18181b',
+        },
+      };
+      if (props.status === 'error') {
+        return {
+          ...baseStyle,
+          root: {
+            ...baseStyle.root,
+            borderColor: '#dc2626',
+          },
+        };
+      }
+      return baseStyle;
+    },
+  },
+  select: {
+    styles: {
+      root: {
+        borderColor: '#e4e4e7',
+      },
+      popup: {
+        root: {
+          borderRadius: 8,
+          boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)',
+        },
+      },
+    },
+  },
+};

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

@@ -1,6 +1,6 @@
 import React, { useMemo, useState } from 'react';
 import { CSSMotionList } from '@rc-component/motion';
-import { createStyles, css } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 import { clsx } from 'clsx';
 
 import { COLOR_IMAGES, getClosetColor } from './colorUtil';
@@ -10,7 +10,7 @@ export interface BackgroundImageProps {
   isLight?: boolean;
 }
 
-const useStyle = createStyles(({ cssVar }) => ({
+const styles = createStaticStyles(({ css, cssVar }) => ({
   image: css`
     transition: all ${cssVar.motionDurationSlow};
     position: absolute;
@@ -29,7 +29,6 @@ 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 { createStyles } from 'antd-style';
+import { createStaticStyles } 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 useStyle = createStyles(({ cssVar, css }) => ({
+const styles = createStaticStyles(({ cssVar, css }) => ({
   color: css`
     width: calc(${cssVar.controlHeightLG} / 2);
     height: calc(${cssVar.controlHeightLG} / 2);
@@ -69,8 +69,6 @@ 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 { createStyles } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 import { clsx } from 'clsx';
 
 import useLocale from '../../../../hooks/useLocale';
@@ -32,7 +32,7 @@ const locales = {
   },
 };
 
-const useStyle = createStyles(({ cssVar, css }) => ({
+const styles = createStaticStyles(({ cssVar, css }) => ({
   themeCard: css`
     border-radius: ${cssVar.borderRadius};
     cursor: pointer;
@@ -80,7 +80,6 @@ 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 { createStyles } from 'antd-style';
+import { createStaticStyles } 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 useStyle = createStyles(({ cssVar, css, cx }) => {
+const styles = createStaticStyles(({ cssVar, css, cx }) => {
   const { carousel } = getCarouselStyle();
   const demo = css`
     overflow: hidden;
@@ -345,7 +345,6 @@ 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/index.tsx

@@ -1,6 +1,6 @@
 import React, { Suspense } from 'react';
 import { ConfigProvider, theme } from 'antd';
-import { createStyles, css } from 'antd-style';
+import { createStaticStyles } 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 useStyle = createStyles(() => ({
+const classNames = createStaticStyles(({ css }) => ({
   image: css`
     position: absolute;
     inset-inline-start: 0;
@@ -38,7 +38,6 @@ const locales = {
 
 const Homepage: React.FC = () => {
   const [locale] = useLocale(locales);
-  const { styles } = useStyle();
   const { token } = theme.useToken();
 
   const isDark = React.use(DarkContext);
@@ -50,13 +49,6 @@ const Homepage: React.FC = () => {
       </PreviewBanner>
 
       <div>
-        {/* 定制主题 */}
-        <ConfigProvider theme={{ algorithm: theme.defaultAlgorithm }}>
-          <Suspense fallback={null}>
-            <Theme />
-          </Suspense>
-        </ConfigProvider>
-
         {/* 组件列表 */}
         <Group
           background={token.colorBgElevated}
@@ -70,15 +62,22 @@ const Homepage: React.FC = () => {
           </Suspense>
         </Group>
 
+        {/* 定制主题 */}
+        <ConfigProvider theme={{ algorithm: theme.defaultAlgorithm }}>
+          <Suspense fallback={null}>
+            <Theme />
+          </Suspense>
+        </ConfigProvider>
+
         {/* 设计语言 */}
         <Group
           title={locale.designTitle}
           description={locale.designDesc}
-          background={isDark ? '#393F4A' : '#F5F8FF'}
+          background={isDark ? '#393F4A' : token.colorBgContainer}
           decoration={
             <img
               draggable={false}
-              className={styles.image}
+              className={classNames.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 { createStyles } from 'antd-style';
+import { createStaticStyles } 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 useStyle = createStyles(({ css }) => ({
+const classNames = createStaticStyles(({ css }) => ({
   editor: css`
     svg,
     img {
@@ -49,7 +49,6 @@ 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 {
@@ -78,7 +77,7 @@ const CustomTheme: React.FC = () => {
             hideAdvancedSwitcher
             theme={{ name: 'Custom Theme', key: 'test', config: theme }}
             style={{ height: 'calc(100vh - 64px)' }}
-            className={styles.editor}
+            className={classNames.editor}
             onThemeChange={(newTheme) => {
               setTheme(newTheme.config);
             }}

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import { SoundOutlined } from '@ant-design/icons';
-import { createStyles } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 
-const useStyle = createStyles(({ css, cssVar }) => {
+const styles = createStaticStyles(({ css, cssVar }) => {
   return {
     playBtn: css`
       display: inline-flex;
@@ -30,7 +30,6 @@ 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 { createStyles, useTheme } from 'antd-style';
+import { createStaticStyles, 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 useStyle = createStyles(({ cssVar, css }) => ({
+const styles = createStaticStyles(({ cssVar, css }) => ({
   componentsOverviewGroupTitle: css`
     margin-bottom: ${cssVar.marginLG} !important;
   `,
@@ -78,7 +78,6 @@ 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();
@@ -227,7 +226,7 @@ const Overview: React.FC = () => {
                             src={
                               isDark && component.coverDark ? component.coverDark : component.cover
                             }
-                            alt={component.title}
+                            alt=""
                           />
                         </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 { createStyles, css, useTheme } from 'antd-style';
+import { createStaticStyles, 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 useStyle = createStyles(({ cssVar }) => ({
+const styles = createStaticStyles(({ cssVar }) => ({
   tableTitle: css`
     cursor: pointer;
     position: relative;
@@ -104,8 +104,6 @@ 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 { createStyles } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 import { useIntl } from 'dumi';
 
 import CopyableIcon from './CopyableIcon';
 import type { CategoriesKeys } from './fields';
 import type { ThemeType } from './IconSearch';
 
-const useStyle = createStyles(({ css, cssVar }) => ({
+const styles = createStaticStyles(({ css, cssVar }) => ({
   anticonsList: css`
     margin: ${cssVar.margin} 0;
     overflow: hidden;
@@ -36,7 +36,6 @@ 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 { createStyles, useTheme } from 'antd-style';
+import { createStaticStyles, 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 useStyle = createStyles(({ css, cssVar }) => ({
+const styles = createStaticStyles(({ css, cssVar }) => ({
   iconSearchAffix: css`
     display: flex;
     transition: all ${cssVar.motionDurationSlow};
@@ -39,7 +39,6 @@ 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 { createStyles } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 
 const IconSearch = React.lazy(() => import('./IconSearch'));
 
-const useStyle = createStyles(({ css, cssVar }) => ({
+const styles = createStaticStyles(({ css, cssVar }) => ({
   searchWrapper: css`
     display: flex;
     gap: ${cssVar.padding};
@@ -34,8 +34,6 @@ const useStyle = createStyles(({ 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 { createStyles, css } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 import { clsx } from 'clsx';
 
 interface IconProps {
@@ -7,7 +7,7 @@ interface IconProps {
   style?: React.CSSProperties;
 }
 
-const useStyle = createStyles(() => ({
+const classNames = createStaticStyles(({ css }) => ({
   iconWrap: css`
     display: inline-flex;
     align-items: center;
@@ -19,9 +19,8 @@ const useStyle = createStyles(() => ({
 
 const BunIcon: React.FC<IconProps> = (props) => {
   const { className, style } = props;
-  const { styles } = useStyle();
   return (
-    <span className={clsx(styles.iconWrap, className)} style={style}>
+    <span className={clsx(classNames.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/npm.tsx

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

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

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

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

@@ -2,7 +2,7 @@ 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 { createStyles, css } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 import { clsx } from 'clsx';
 import { FormattedMessage, useLiveDemo, useSiteData } from 'dumi';
 import { major, minVersion } from 'semver';
@@ -17,7 +17,7 @@ import DemoContext from '../../slots/DemoContext';
 import { isOfficialHost } from '../../utils';
 import Actions from './Actions';
 
-const useStyle = createStyles(({ cssVar }) => {
+const styles = createStaticStyles(({ cssVar, css }) => {
   return {
     codeHideBtn: css`
       position: sticky;
@@ -68,7 +68,6 @@ const CodePreviewer: React.FC<AntdPreviewerProps> = (props) => {
   const { pkg } = useSiteData();
 
   const location = useLocation();
-  const { styles } = useStyle();
 
   const entryName = 'index.tsx';
   const entryCode = asset.dependencies[entryName].value;

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

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

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

@@ -2,7 +2,7 @@ import type { FC } from 'react';
 import React, { useEffect, useRef } from 'react';
 import { CheckOutlined, SketchOutlined } from '@ant-design/icons';
 import { App } from 'antd';
-import { createStyles } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 import copy from '../../../../components/_util/copy';
 import { nodeToGroup } from 'html2sketch';
 
@@ -22,7 +22,7 @@ const locales = {
   },
 };
 
-const useStyle = createStyles(({ cssVar, css }) => ({
+const styles = createStaticStyles(({ cssVar, css }) => ({
   wrapper: css`
     position: relative;
     border: 1px solid ${cssVar.colorBorderSecondary};
@@ -72,7 +72,6 @@ const useStyle = createStyles(({ 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 { createStyles } from 'antd-style';
+import { createStaticStyles, cx } from 'antd-style';
 import dayjs from 'dayjs';
 import type { Dayjs } from 'dayjs';
 
@@ -33,7 +33,7 @@ const locales = {
   },
 };
 
-const useStyle = createStyles(({ cssVar, css }) => ({
+const styles = createStaticStyles(({ cssVar, css }) => ({
   container: css`
     margin-block: ${cssVar.margin};
     padding: ${cssVar.padding};
@@ -49,8 +49,6 @@ const useStyle = createStyles(({ 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 { createStyles } from 'antd-style';
+import { createStaticStyles } 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 useStyle = createStyles(({ css, cssVar }) => ({
+const styles = createStaticStyles(({ css, cssVar }) => ({
   fallback: css`
     width: 100%;
     > * {
@@ -32,7 +32,6 @@ const useStyle = createStyles(({ css, cssVar }) => ({
 }));
 
 const SandpackFallback: React.FC = () => {
-  const { styles } = useStyle();
   return (
     <div className={styles.fallback}>
       <Skeleton.Node active style={{ height: 500, width: '100%' }}>

.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 { createStyles } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 import tokenMeta from 'antd/es/version/token-meta.json';
 import { clsx } from 'clsx';
 
 import useLocale from '../../../hooks/useLocale';
 
-const useStyle = createStyles(({ cssVar, css }) => {
+const styles = createStaticStyles(({ cssVar, css }) => {
   const height = cssVar.controlHeightLG;
   const dotSize = height / 5;
 
@@ -63,7 +63,6 @@ interface ColorCircleProps {
 }
 
 const ColorCircle: React.FC<ColorCircleProps> = ({ color }) => {
-  const { styles } = useStyle();
   return (
     <Flex align="center" gap={4}>
       <div className={styles.dot} style={{ background: color }} />
@@ -79,7 +78,6 @@ 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 { createStyles, css } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 import { clsx } from 'clsx';
 
-const useStyles = createStyles(({ cx, cssVar }) => {
+const styles = createStaticStyles(({ css, cx, cssVar }) => {
   const play = css`
     position: absolute;
     inset-inline-end: ${cssVar.paddingLG};
@@ -45,7 +45,6 @@ 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 { createStyles, css } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 import { useRouteMeta } from 'dumi';
 
 import useLocale from '../../../hooks/useLocale';
@@ -17,7 +17,7 @@ export interface BehaviorMapProps {
   data: BehaviorMapItem;
 }
 
-const useStyle = createStyles(({ cssVar }) => ({
+const styles = createStaticStyles(({ css, cssVar }) => ({
   container: css`
     width: 100%;
     min-height: 600px;
@@ -100,7 +100,6 @@ const locales = {
 
 const BehaviorMap: React.FC<BehaviorMapProps> = ({ data }) => {
   const chartRef = useRef<HTMLDivElement>(null);
-  const { styles } = useStyle();
   const [locale] = useLocale(locales);
   const meta = useRouteMeta();
 

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

.dumi/theme/common/BrowserFrame.tsx

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

.dumi/theme/common/LiveCode.tsx

@@ -1,11 +1,11 @@
 import type { ComponentProps, FC } from 'react';
 import React from 'react';
-import { createStyles } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 import SourceCodeEditor from 'dumi/theme-default/slots/SourceCodeEditor';
 
 import LiveError from '../slots/LiveError';
 
-const useStyle = createStyles(({ cssVar, css }) => {
+const styles = createStaticStyles(({ cssVar, css }) => {
   return {
     editor: css`
       // override dumi editor styles
@@ -54,7 +54,6 @@ 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 { createStyles } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 import { useLocation } from 'dumi';
 
 import { Common } from './styles';
 
-const useStyle = createStyles(({ css, cssVar }) => {
+const styles = createStaticStyles(({ css, cssVar }) => {
   return {
     skeletonWrapper: css`
       width: 100%;
@@ -27,8 +27,6 @@ const useStyle = createStyles(({ css, cssVar }) => {
 const Loading: React.FC = () => {
   const { pathname } = useLocation();
 
-  const { styles } = useStyle();
-
   let loadingNode: React.ReactNode = null;
 
   if (

.dumi/theme/common/Marker.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { createStyles, css } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 import { clsx } from 'clsx';
 
-const useStyle = createStyles(({ cssVar, cx }) => {
+const styles = createStaticStyles(({ cssVar, css, cx }) => {
   const duration = cssVar.motionDurationSlow;
 
   const marker = css`
@@ -55,8 +55,6 @@ export interface MarkerProps {
 }
 
 const Marker = React.memo<MarkerProps>((props) => {
-  const { styles } = useStyle();
-
   const { rect, primary, ...restProps } = props;
 
   const rectRef = React.useRef(rect);

.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 { createStyles, css } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 import { clsx } from 'clsx';
 import Prism from 'prismjs';
 
@@ -12,7 +12,7 @@ export interface SemanticPreviewInjectionProps {
   classNames?: Record<string, string>;
 }
 
-const useStyle = createStyles(({ cssVar }) => ({
+const styles = createStaticStyles(({ css, cssVar }) => ({
   container: css`
     position: relative;
     z-index: 0;
@@ -155,8 +155,6 @@ 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,6 +1,8 @@
 import React, { useRef, useState } from 'react';
+import { StyleProvider } from '@ant-design/cssinjs';
 import { AntDesignOutlined, UserOutlined } from '@ant-design/icons';
 import { Bubble, Sender } from '@ant-design/x';
+import type { SenderRef } from '@ant-design/x/es/sender';
 import { Drawer, Flex, Typography } from 'antd';
 import type { GetProp } from 'antd';
 
@@ -28,7 +30,8 @@ export interface PromptDrawerProps {
 const PromptDrawer: React.FC<PromptDrawerProps> = ({ open, onClose, onThemeChange }) => {
   const [locale] = useLocale(locales);
   const [inputValue, setInputValue] = useState('');
-  const senderRef = useRef<any>(null);
+
+  const senderRef = useRef<SenderRef>(null);
 
   const [submitPrompt, loading, prompt, resText, cancelRequest] = usePromptTheme(onThemeChange);
 
@@ -51,17 +54,21 @@ const PromptDrawer: React.FC<PromptDrawerProps> = ({ open, onClose, onThemeChang
 
     const nextItems: GetProp<typeof Bubble.List, 'items'> = [
       {
+        key: 1,
+        role: 'user',
         placement: 'end',
         content: prompt,
-        avatar: { icon: <UserOutlined /> },
+        avatar: <UserOutlined />,
         shape: 'corner',
       },
       {
+        key: 2,
+        role: 'system',
         placement: 'start',
         content: resText,
-        avatar: { icon: <AntDesignOutlined /> },
+        avatar: <AntDesignOutlined />,
         loading: !resText,
-        messageRender: (content: string) => (
+        contentRender: (content: string) => (
           <Typography>
             <pre style={{ margin: 0 }}>{content}</pre>
           </Typography>
@@ -71,9 +78,11 @@ const PromptDrawer: React.FC<PromptDrawerProps> = ({ open, onClose, onThemeChang
 
     if (!loading) {
       nextItems.push({
+        key: 3,
+        role: 'divider',
         placement: 'start',
         content: locale.finishTips,
-        avatar: { icon: <AntDesignOutlined /> },
+        avatar: <AntDesignOutlined />,
         shape: 'corner',
       });
     }
@@ -91,16 +100,21 @@ const PromptDrawer: React.FC<PromptDrawerProps> = ({ open, onClose, onThemeChang
       afterOpenChange={handleAfterOpenChange}
     >
       <Flex vertical style={{ height: '100%' }}>
-        <Bubble.List style={{ flex: 1, overflow: 'auto' }} items={items} />
-        <Sender
-          ref={senderRef}
-          style={{ flex: 0 }}
-          value={inputValue}
-          onChange={setInputValue}
-          onSubmit={handleSubmit}
-          loading={loading}
-          onCancel={cancelRequest}
-        />
+        {/* Workaround for layer incompat between site `StyleProvider layer` and `@ant-design/x`.
+         * See: https://github.com/ant-design/x/issues/1588
+         */}
+        <StyleProvider layer={false}>
+          <Bubble.List style={{ flex: 1, overflow: 'auto' }} items={items} />
+          <Sender
+            ref={senderRef}
+            style={{ flex: 0 }}
+            value={inputValue}
+            onChange={setInputValue}
+            onSubmit={handleSubmit}
+            loading={loading}
+            onCancel={cancelRequest}
+          />
+        </StyleProvider>
       </Flex>
     </Drawer>
   );

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

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

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { createStyles } from 'antd-style';
+import { createStaticStyles } 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 useStyle = createStyles(({ css }) => ({
+const classNames = createStaticStyles(({ css }) => ({
   container: css`
     max-height: max(62vh, 500px);
     overflow-y: scroll;
@@ -25,13 +25,11 @@ const useStyle = createStyles(({ 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={styles.container}>
+    <div className={classNames.container}>
       <C />
     </div>
   );

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

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

.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 { createStyles } from 'antd-style';
+import { createStaticStyles } 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 useStyle = createStyles(({ cssVar, css }) => ({
+const styles = createStaticStyles(({ cssVar, css }) => ({
   card: css`
     width: 100%;
     margin: calc(${cssVar.marginMD} * 2) 0;
@@ -113,19 +113,17 @@ interface Props {
 const ColumnCard: React.FC<Props> = ({ zhihuLink, yuqueLink, juejinLink }) => {
   const [locale] = useLocale(locales);
   const {
-    styles: {
-      card,
-      bigTitle,
-      cardBody,
-      leftCard,
-      title,
-      subTitle,
-      logo,
-      arrowIcon,
-      zlBtn,
-      discussLogo,
-    },
-  } = useStyle();
+    card,
+    bigTitle,
+    cardBody,
+    leftCard,
+    title,
+    subTitle,
+    logo,
+    arrowIcon,
+    zlBtn,
+    discussLogo,
+  } = styles;
   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 { createStyles } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 import { clsx } from 'clsx';
 import { useIntl } from 'dumi';
 
 import SiteContext from '../SiteContext';
 import ContributorAvatar from './ContributorAvatar';
 
-const useStyle = createStyles(({ cssVar, css }) => ({
+const styles = createStaticStyles(({ cssVar, css }) => ({
   listMobile: css`
     margin: 1em 0 !important;
   `,
@@ -48,7 +48,6 @@ const blockList = [
 
 const Contributors: React.FC<ContributorsProps> = ({ filename }) => {
   const { formatMessage } = useIntl();
-  const { styles } = useStyle();
   const { isMobile } = React.use(SiteContext);
 
   if (!filename) {

.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 { createStyles } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 
 import useLocale from '../../../hooks/useLocale';
 
@@ -20,7 +20,7 @@ const locales = {
   },
 };
 
-const useStyle = createStyles(({ css, cssVar }) => ({
+const styles = createStaticStyles(({ css, cssVar }) => ({
   container: css`
     position: fixed;
     inset-inline-start: 0;
@@ -80,8 +80,6 @@ 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 { createStyles } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 import { clsx } from 'clsx';
 
 export interface SwitchBtnProps {
@@ -18,7 +18,7 @@ export interface SwitchBtnProps {
 
 const BASE_SIZE = '1.2em';
 
-const useStyle = createStyles(({ cssVar, css }) => {
+const styles = createStaticStyles(({ cssVar, css }) => {
   return {
     btn: css`
       width: ${cssVar.controlHeight};
@@ -65,9 +65,7 @@ const useStyle = createStyles(({ cssVar, css }) => {
 const SwitchBtn: React.FC<SwitchBtnProps> = (props) => {
   const { label1, label2, tooltip1, tooltip2, value, pure, onClick, ...rest } = props;
 
-  const {
-    styles: { btn, innerDiv, labelStyle, label1Style, label2Style },
-  } = useStyle();
+  const { btn, innerDiv, labelStyle, label1Style, label2Style } = styles;
 
   const node = (
     <Button

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

@@ -2,11 +2,14 @@ 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';
@@ -14,7 +17,6 @@ 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';
@@ -132,7 +134,8 @@ const useStyle = createStyles(({ cssVar, token, css }) => {
       }
     `,
     versionSelect: css`
-      min-width: 90px;
+      width: 112px;
+      min-width: 112px; // 这个宽度需要和 Empty 状态的宽度保持一致
       .rc-virtual-list {
         .rc-virtual-list-holder {
           scrollbar-width: thin;
@@ -149,19 +152,57 @@ interface HeaderState {
   searching: boolean;
 }
 
+interface VersionItem {
+  version: string;
+  url: string;
+  chineseMirrorUrl?: string;
+}
+
+const fetcher = (...args: Parameters<typeof fetch>) => {
+  // eslint-disable-next-line compat/compat
+  return fetch(...args).then((res) => res.json());
+};
+
 // ================================= Header =================================
 const Header: React.FC = () => {
   const [, lang] = useLocale();
 
   const { pkg } = useSiteData();
 
-  const themeConfig = getThemeConfig();
+  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 [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();
@@ -258,14 +299,6 @@ 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';
@@ -308,6 +341,7 @@ 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,6 +1,3 @@
-const chineseMirror =
-  typeof location !== 'undefined' && location.hostname.includes('.antgroup.com');
-
 export default {
   categoryOrder: {
     'Ant Design': 0,
@@ -45,15 +42,4 @@ 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,7 +3,6 @@ import flattenDeep from 'lodash/flattenDeep';
 import semver from 'semver';
 
 import deprecatedVersions from '../../../BUG_VERSIONS.json';
-import themeConfig from '../themeConfig';
 
 interface Meta {
   skip?: boolean;
@@ -215,5 +214,3 @@ export function isOfficialHost(hostname: string) {
   const officialHostnames = ['ant.design', 'antgroup.com'];
   return officialHostnames.some((official) => hostname.includes(official));
 }
-
-export const getThemeConfig = () => themeConfig;

.github/workflows/site-deploy.yml

@@ -12,7 +12,7 @@ permissions:
 
 jobs:
   build-site:
-    runs-on: blacksmith-4vcpu-ubuntu-2404
+    runs-on: ubuntu-latest
     if: (startsWith(github.ref, 'refs/tags/') && (contains(github.ref_name, '-') == false)) || github.event_name == 'workflow_dispatch'
 
     # https://docs.github.com/en/actions/writing-workflows/workflow-syntax-for-github-actions#example-defining-outputs-for-a-job

.github/workflows/size-limit.yml

@@ -17,12 +17,12 @@ jobs:
 
     steps:
       - uses: actions/checkout@v6
-      - uses: utooland/setup-utoo@v1
+      - uses: oven-sh/setup-bun@v2
       - name: size-limit
         uses: ant-design/size-limit-action@master
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
-          package_manager: ut
+          package_manager: bun
           build_script: dist
         env:
           NODE_OPTIONS: --max_old_space_size=4096

CHANGELOG.en-US.md

@@ -15,6 +15,38 @@ tag: vVERSION
 
 ---
 
+## 6.2.0
+
+`2026-01-13`
+
+- 🛠 Button, Masonry, Mentions, Select, Space, Splitter, Steps and other components batch use `genCssVar` method to generate more stable CSS variable names. [#56562](https://github.com/ant-design/ant-design/pull/56562) [#56559](https://github.com/ant-design/ant-design/pull/56559) [#56557](https://github.com/ant-design/ant-design/pull/56557) [#56555](https://github.com/ant-design/ant-design/pull/56555) [#56550](https://github.com/ant-design/ant-design/pull/56550) [#56547](https://github.com/ant-design/ant-design/pull/56547) [#56546](https://github.com/ant-design/ant-design/pull/56546) [#56529](https://github.com/ant-design/ant-design/pull/56529) [@li-jia-nan](https://github.com/li-jia-nan)
+- 🆕 QRCode adds `marginSize` property for displaying QR code margin area. [#56569](https://github.com/ant-design/ant-design/pull/56569) [@afc163](https://github.com/afc163)
+- 🆕 Tour adds `keyboard` property to configure keyboard operations. [#56581](https://github.com/ant-design/ant-design/pull/56581) [@cactuser-Lu](https://github.com/cactuser-Lu)
+- Tooltip
+  - 🆕 Tooltip adds `maxWidth` design token. [#56540](https://github.com/ant-design/ant-design/pull/56540) [@guoyunhe](https://github.com/guoyunhe)
+  - 🆕 Tooltip/Popover/Popconfirm can be closed with ESC by default. [#56492](https://github.com/ant-design/ant-design/pull/56492) [@aojunhao123](https://github.com/aojunhao123)
+- 🛠 Steps remove useless styles. [#56565](https://github.com/ant-design/ant-design/pull/56565) [@li-jia-nan](https://github.com/li-jia-nan)
+- 🆕 Form supports `tel` type validation. [#56533](https://github.com/ant-design/ant-design/pull/56533) [@guoyunhe](https://github.com/guoyunhe)
+- 🐞 Fix Badge `ref` not working when using `text` property. [#56532](https://github.com/ant-design/ant-design/pull/56532) [@zombieJ](https://github.com/zombieJ)
+- 🆕 Calendar and DatePicker `locale` configuration now supports partial content filling. [#56376](https://github.com/ant-design/ant-design/pull/56376) [@QDyanbing](https://github.com/QDyanbing)
+- 🐞 Fix ConfigProvider `theme.cssVar` configuration not working for icons. [#56504](https://github.com/ant-design/ant-design/pull/56504) [@seanparmelee](https://github.com/seanparmelee)
+- 🐞 Fix Collapse `items` semantic properties not working. [#56517](https://github.com/ant-design/ant-design/pull/56517) [@zombieJ](https://github.com/zombieJ)
+- Modal
+  - 🆕 Modal supports `focusable.trap` to configure whether to lock focus within the Modal. [#56500](https://github.com/ant-design/ant-design/pull/56500) [@zombieJ](https://github.com/zombieJ)
+  - 🛠 Remove useless DOM structure from Modal and optimize focus capture to prevent accidental focus escape outside the Modal. [#56142](https://github.com/ant-design/ant-design/pull/56142) [@zombieJ](https://github.com/zombieJ)
+- ConfigProvider
+  - 🆕 ConfigProvider supports `pagination` configuration for `totalBoundary` and `showSizeChanger` properties. [#56475](https://github.com/ant-design/ant-design/pull/56475) [@chiaweilee](https://github.com/chiaweilee)
+  - 🆕 ConfigProvider supports configuring Alert global icons. [#56241](https://github.com/ant-design/ant-design/pull/56241) [@guoyunhe](https://github.com/guoyunhe)
+- Drawer
+  - 🆕 Drawer adds `focusable` to configure focus behavior after opening, supporting focus locking within the container and focus returning after closing. [#56463](https://github.com/ant-design/ant-design/pull/56463) [@zombieJ](https://github.com/zombieJ)
+  - 🐞 Fix Drawer `size` definition not supporting string type. [#56358](https://github.com/ant-design/ant-design/pull/56358) [@ug-hero](https://github.com/ug-hero)
+- 🐞 Fix Image nested in Modal cannot be closed sequentially with Esc. [#56386](https://github.com/ant-design/ant-design/pull/56386) [@aojunhao123](https://github.com/aojunhao123)
+- 🆕 Pagination supports `size` property. [#56009](https://github.com/ant-design/ant-design/pull/56009) [@guoyunhe](https://github.com/guoyunhe)
+- 🆕 Breadcrumb supports `dropdownIcon` customization. [#56250](https://github.com/ant-design/ant-design/pull/56250) [@guoyunhe](https://github.com/guoyunhe)
+- 🆕 Checkbox.Group supports `role` configuration. [#56126](https://github.com/ant-design/ant-design/pull/56126) [@Pareder](https://github.com/Pareder)
+- 💄 Mentions fix invalid style `padding: undefined` in different sizes. [#56564](https://github.com/ant-design/ant-design/pull/56564) [@li-jia-nan](https://github.com/li-jia-nan)
+- 🐞 Fix Select clear button alignment issue when `size="small"`. [#56525](https://github.com/ant-design/ant-design/pull/56525) [@QDyanbing](https://github.com/QDyanbing)
+
 ## 6.1.4
 
 `2026-01-05`

CHANGELOG.zh-CN.md

@@ -15,6 +15,38 @@ tag: vVERSION
 
 ---
 
+## 6.2.0
+
+`2026-01-13`
+
+- 🛠 Button、Masonry、Mentions、Select、Space、Splitter、Steps 等组件批量使用 `genCssVar` 方法以生成更加稳定的 css 变量名。[#56562](https://github.com/ant-design/ant-design/pull/56562) [#56559](https://github.com/ant-design/ant-design/pull/56559) [#56557](https://github.com/ant-design/ant-design/pull/56557) [#56555](https://github.com/ant-design/ant-design/pull/56555) [#56550](https://github.com/ant-design/ant-design/pull/56550) [#56547](https://github.com/ant-design/ant-design/pull/56547) [#56546](https://github.com/ant-design/ant-design/pull/56546) [#56529](https://github.com/ant-design/ant-design/pull/56529) [@li-jia-nan](https://github.com/li-jia-nan)
+- 🆕 QRCode 新增 `marginSize` 属性用于展示二维码留白区。[#56569](https://github.com/ant-design/ant-design/pull/56569) [@afc163](https://github.com/afc163)
+- 🆕 Tour 新增 `keyboard` 属性以配置键盘操作。[#56581](https://github.com/ant-design/ant-design/pull/56581) [@cactuser-Lu](https://github.com/cactuser-Lu)
+- Tooltip
+  - 🆕 Tooltip 增加 `maxWidth` design token。[#56540](https://github.com/ant-design/ant-design/pull/56540) [@guoyunhe](https://github.com/guoyunhe)
+  - 🆕 Tooltip/Popover/Popconfirm 默认情况下可以通过 ESC 关闭。[#56492](https://github.com/ant-design/ant-design/pull/56492) [@aojunhao123](https://github.com/aojunhao123)
+- 🛠 Steps 移除无用的样式。[#56565](https://github.com/ant-design/ant-design/pull/56565) [@li-jia-nan](https://github.com/li-jia-nan)
+- 🆕 Form 支持 `tel` 类型校验。[#56533](https://github.com/ant-design/ant-design/pull/56533) [@guoyunhe](https://github.com/guoyunhe)
+- 🐞 修复 Badge 在使用 `text` 属性时，`ref` 无效的问题。[#56532](https://github.com/ant-design/ant-design/pull/56532) [@zombieJ](https://github.com/zombieJ)
+- 🆕 Calendar 和 DatePicker 的 `locale` 配置现在支持只填充部分内容。[#56376](https://github.com/ant-design/ant-design/pull/56376) [@QDyanbing](https://github.com/QDyanbing)
+- 🐞 修复 ConfigProvider 配置 `theme.cssVar` 对图标无效的问题。[#56504](https://github.com/ant-design/ant-design/pull/56504) [@seanparmelee](https://github.com/seanparmelee)
+- 🐞 修复 Collapse `items` 语义化属性无效的问题。[#56517](https://github.com/ant-design/ant-design/pull/56517) [@zombieJ](https://github.com/zombieJ)
+- Modal
+  - 🆕 Modal 支持 `focusable.trap` 以配置是否将焦点锁定在 Modal 内部。[#56500](https://github.com/ant-design/ant-design/pull/56500) [@zombieJ](https://github.com/zombieJ)
+  - 🛠 移除 Modal 无用的 DOM 结构并且优化焦点捕获以防止意外的焦点逃逸到 Modal 外的情况。[#56142](https://github.com/ant-design/ant-design/pull/56142) [@zombieJ](https://github.com/zombieJ)
+- ConfigProvider
+  - 🆕 ConfigProvider 支持 `pagination` 配置 `totalBoundary` 与 `showSizeChanger` 属性。[#56475](https://github.com/ant-design/ant-design/pull/56475) [@chiaweilee](https://github.com/chiaweilee)
+  - 🆕 ConfigProvider 支持配置 Alert 全局图标。[#56241](https://github.com/ant-design/ant-design/pull/56241) [@guoyunhe](https://github.com/guoyunhe)
+- Drawer
+  - 🆕 Drawer 新增 `focusable` 以配置展开后的焦点行为，支持配置锁定焦点在框内、关闭后是否返回焦点。[#56463](https://github.com/ant-design/ant-design/pull/56463) [@zombieJ](https://github.com/zombieJ)
+  - 🐞 修复 Drawer `size` 定义不支持 string 的问题。[#56358](https://github.com/ant-design/ant-design/pull/56358) [@ug-hero](https://github.com/ug-hero)
+- 🐞 修复 Image 嵌套在 Modal 内时，Esc无法顺序关闭。[#56386](https://github.com/ant-design/ant-design/pull/56386) [@aojunhao123](https://github.com/aojunhao123)
+- 🆕 Pagination 支持 `size` 属性。[#56009](https://github.com/ant-design/ant-design/pull/56009) [@guoyunhe](https://github.com/guoyunhe)
+- 🆕 Breadcrumb 支持 `dropdownIcon` 自定义。[#56250](https://github.com/ant-design/ant-design/pull/56250) [@guoyunhe](https://github.com/guoyunhe)
+- 🆕 Checkbox.Group 支持 `role` 配置。[#56126](https://github.com/ant-design/ant-design/pull/56126) [@Pareder](https://github.com/Pareder)
+- 💄 Mentions 修复不同尺寸下 `padding: undefined` 的无效样式。[#56564](https://github.com/ant-design/ant-design/pull/56564) [@li-jia-nan](https://github.com/li-jia-nan)
+- 🐞 修复 Select 在 `size="small"` 时，清除按钮位置对齐问题。[#56525](https://github.com/ant-design/ant-design/pull/56525) [@QDyanbing](https://github.com/QDyanbing)
+
 ## 6.1.4
 
 `2026-01-05`

components/_util/__tests__/wave.test.tsx

@@ -4,11 +4,15 @@ import { clsx } from 'clsx';
 import mountTest from '../../../tests/shared/mountTest';
 import { act, fireEvent, getByText, render, waitFakeTimer } from '../../../tests/utils';
 import Checkbox from '../../checkbox';
+import { defaultPrefixCls } from '../../config-provider';
+import { genCssVar } from '../../theme/util/genStyleUtils';
 import Wave from '../wave';
 import { TARGET_CLS } from '../wave/interface';
 
 (global as any).isVisible = true;
 
+const [varName] = genCssVar(defaultPrefixCls, 'wave');
+
 // TODO: Remove this. Mock for React 19
 jest.mock('react-dom', () => {
   const realReactDOM = jest.requireActual('react-dom');
@@ -139,9 +143,8 @@ describe('Wave component', () => {
 
     fireEvent.click(container.querySelector('button')!);
     waitRaf();
-
     const style = getWaveStyle();
-    expect(style['--wave-color']).toEqual(undefined);
+    expect(style[varName('color')]).toBe(undefined);
 
     unmount();
   });
@@ -159,7 +162,7 @@ describe('Wave component', () => {
     waitRaf();
 
     const style = getWaveStyle();
-    expect(style['--wave-color']).toEqual('rgb(255, 0, 0)');
+    expect(style[varName('color')]).toBe('rgb(255, 0, 0)');
 
     unmount();
   });
@@ -175,7 +178,7 @@ describe('Wave component', () => {
     waitRaf();
 
     const style = getWaveStyle();
-    expect(style['--wave-color']).toEqual('rgb(0, 0, 255)');
+    expect(style[varName('color')]).toBe('rgb(0, 0, 255)');
 
     unmount();
   });
@@ -191,7 +194,7 @@ describe('Wave component', () => {
     waitRaf();
 
     const style = getWaveStyle();
-    expect(style['--wave-color']).toEqual('rgb(0, 128, 0)');
+    expect(style[varName('color')]).toBe('rgb(0, 128, 0)');
 
     unmount();
   });
@@ -207,7 +210,7 @@ describe('Wave component', () => {
     waitRaf();
 
     const style = getWaveStyle();
-    expect(style['--wave-color']).toEqual('rgb(255, 255, 0)');
+    expect(style[varName('color')]).toBe('rgb(255, 255, 0)');
 
     unmount();
   });
@@ -288,7 +291,7 @@ describe('Wave component', () => {
     waitRaf();
 
     const style = getWaveStyle();
-    expect(style['--wave-color']).toEqual('rgb(255, 0, 0)');
+    expect(style[varName('color')]).toBe('rgb(255, 0, 0)');
 
     unmount();
   });
@@ -306,7 +309,7 @@ describe('Wave component', () => {
     waitRaf();
 
     const style = getWaveStyle();
-    expect(style['--wave-color']).toEqual('red');
+    expect(style[varName('color')]).toBe('red');
 
     unmount();
   });
@@ -374,7 +377,7 @@ describe('Wave component', () => {
     expect(document.querySelector('.ant-wave')).toBeTruthy();
 
     const style = getWaveStyle();
-    expect(style['--wave-color']).toEqual('rgb(255, 0, 0)');
+    expect(style[varName('color')]).toBe('rgb(255, 0, 0)');
 
     unmount();
   });

components/_util/convertToTooltipProps.ts

@@ -4,16 +4,16 @@ import { isValidElement } from 'react';
 import type { TooltipProps } from '../tooltip';
 import isNonNullable from './isNonNullable';
 
-const convertToTooltipProps = <P extends TooltipProps>(tooltip: P | ReactNode) => {
+const convertToTooltipProps = <P extends TooltipProps>(tooltip: P | ReactNode, context?: P) => {
   if (!isNonNullable(tooltip)) {
     return null;
   }
 
   if (typeof tooltip === 'object' && !isValidElement(tooltip)) {
-    return tooltip as P;
+    return { ...context, ...tooltip } as P;
   }
 
-  return { title: tooltip } as P;
+  return { ...context, title: tooltip } as P;
 };
 
 export default convertToTooltipProps;

components/_util/hooks/useMergeSemantic.ts

@@ -7,23 +7,19 @@ export type SemanticSchema = { _default?: string } & {
   [key: `${ValidChar}${string}`]: SemanticSchema;
 };
 
-export type SemanticClassNames<Name extends string> = Partial<Record<Name, string>>;
-
-export type SemanticStyles<Name extends string> = Partial<Record<Name, React.CSSProperties>>;
-
 export type Resolvable<T, P extends AnyObject> = T | ((info: { props: P }) => T);
 
 export type SemanticClassNamesType<
   Props extends AnyObject,
-  SemanticName extends string,
+  SemanticClassNames extends Record<PropertyKey, string>,
   NestedStructure extends EmptyObject = EmptyObject,
-> = Resolvable<Readonly<SemanticClassNames<SemanticName>>, Props> & NestedStructure;
+> = Resolvable<Readonly<SemanticClassNames>, Props> & NestedStructure;
 
 export type SemanticStylesType<
   Props extends AnyObject,
-  SemanticName extends string,
+  SemanticStyles extends Record<PropertyKey, React.CSSProperties>,
   NestedStructure extends EmptyObject = EmptyObject,
-> = Resolvable<Readonly<SemanticStyles<SemanticName>>, Props> & NestedStructure;
+> = Resolvable<Readonly<SemanticStyles>, Props> & NestedStructure;
 
 // ========================= ClassNames =========================
 export const mergeClassNames = <

components/_util/wave/WaveEffect.tsx

@@ -6,6 +6,8 @@ import { composeRef } from '@rc-component/util/lib/ref';
 import { clsx } from 'clsx';
 
 import type { WaveProps } from '.';
+import { ConfigContext } from '../../config-provider';
+import { genCssVar } from '../../theme/util/genStyleUtils';
 import { TARGET_CLS } from './interface';
 import type { ShowWaveEffect } from './interface';
 import { getTargetWaveColor } from './util';
@@ -21,10 +23,16 @@ export interface WaveEffectProps {
   colorSource?: WaveProps['colorSource'];
 }
 
-const WaveEffect = (props: WaveEffectProps) => {
+const WaveEffect: React.FC<WaveEffectProps> = (props) => {
   const { className, target, component, colorSource } = props;
   const divRef = React.useRef<HTMLDivElement>(null);
 
+  const { getPrefixCls } = React.useContext(ConfigContext);
+
+  const rootPrefixCls = getPrefixCls();
+
+  const [varName] = genCssVar(rootPrefixCls, 'wave');
+
   // ===================== Effect =====================
   const [color, setWaveColor] = React.useState<string | null>(null);
   const [borderRadius, setBorderRadius] = React.useState<number[]>([]);
@@ -43,7 +51,7 @@ const WaveEffect = (props: WaveEffectProps) => {
   };
 
   if (color) {
-    waveStyle['--wave-color'] = color;
+    waveStyle[varName('color')] = color;
   }
 
   function syncPos() {

components/_util/wave/style.ts

@@ -1,5 +1,6 @@
 import { genComponentStyleHook } from '../../theme/internal';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genCssVar } from '../../theme/util/genStyleUtils';
 
 // biome-ignore lint/suspicious/noEmptyInterface: ComponentToken need to be empty by default
 export interface ComponentToken {}
@@ -7,15 +8,15 @@ export interface ComponentToken {}
 export interface WaveToken extends FullToken<'Wave'> {}
 
 const genWaveStyle: GenerateStyle<WaveToken> = (token) => {
-  const { componentCls, colorPrimary } = token;
+  const { componentCls, colorPrimary, antCls } = token;
+  const [, varRef] = genCssVar(antCls, 'wave');
   return {
     [componentCls]: {
       position: 'absolute',
       background: 'transparent',
       pointerEvents: 'none',
       boxSizing: 'border-box',
-      color: `var(--wave-color, ${colorPrimary})`,
-
+      color: varRef('color', colorPrimary),
       boxShadow: `0 0 0 0 currentcolor`,
       opacity: 0.2,
 

components/alert/Alert.tsx

@@ -1,4 +1,3 @@
-import type { ReactElement } from 'react';
 import * as React from 'react';
 import CheckCircleFilled from '@ant-design/icons/CheckCircleFilled';
 import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
@@ -13,7 +12,6 @@ import { clsx } from 'clsx';
 import type { ClosableType, SemanticClassNamesType, SemanticStylesType } from '../_util/hooks';
 import { useMergeSemantic } from '../_util/hooks';
 import isNonNullable from '../_util/isNonNullable';
-import { replaceElement } from '../_util/reactNode';
 import { devUseWarning } from '../_util/warning';
 import { useComponentConfig } from '../config-provider/context';
 import useStyle from './style';
@@ -22,17 +20,31 @@ export interface AlertRef {
   nativeElement: HTMLDivElement;
 }
 
-export type AlertSemanticName =
-  | 'root'
-  | 'icon'
-  | 'section'
-  | 'title'
-  | 'description'
-  | 'actions'
-  | 'close';
+export type AlertSemanticName = keyof AlertSemanticClassNames & keyof AlertSemanticStyles;
 
-export type AlertClassNamesType = SemanticClassNamesType<AlertProps, AlertSemanticName>;
-export type AlertStylesType = SemanticStylesType<AlertProps, AlertSemanticName>;
+export type AlertSemanticClassNames = {
+  root?: string;
+  icon?: string;
+  section?: string;
+  title?: string;
+  description?: string;
+  actions?: string;
+  close?: string;
+};
+
+export type AlertSemanticStyles = {
+  root?: React.CSSProperties;
+  icon?: React.CSSProperties;
+  section?: React.CSSProperties;
+  title?: React.CSSProperties;
+  description?: React.CSSProperties;
+  actions?: React.CSSProperties;
+  close?: React.CSSProperties;
+};
+
+export type AlertClassNamesType = SemanticClassNamesType<AlertProps, AlertSemanticClassNames>;
+
+export type AlertStylesType = SemanticStylesType<AlertProps, AlertSemanticStyles>;
 
 export interface AlertProps {
   /** Type of Alert styles, options:`success`, `info`, `warning`, `error` */
@@ -90,13 +102,6 @@ export interface AlertProps {
   id?: string;
 }
 
-const iconMapFilled = {
-  success: CheckCircleFilled,
-  info: InfoCircleFilled,
-  error: CloseCircleFilled,
-  warning: ExclamationCircleFilled,
-};
-
 interface IconNodeProps {
   type: AlertProps['type'];
   icon: AlertProps['icon'];
@@ -104,21 +109,25 @@ interface IconNodeProps {
   description: AlertProps['description'];
   className?: string;
   style?: React.CSSProperties;
+  successIcon?: React.ReactNode;
+  infoIcon?: React.ReactNode;
+  warningIcon?: React.ReactNode;
+  errorIcon?: React.ReactNode;
 }
 
 const IconNode: React.FC<IconNodeProps> = (props) => {
-  const { icon, prefixCls, type, className, style } = props;
-  const iconType = iconMapFilled[type!] || null;
-  if (icon) {
-    return replaceElement(icon, <span className={`${prefixCls}-icon`}>{icon}</span>, () => ({
-      className: clsx((icon as ReactElement<{ className?: string }>).props.className, className),
-      style,
-    })) as ReactElement;
-  }
-  return React.createElement(iconType, {
-    className,
-    style,
-  });
+  const { icon, type, className, style, successIcon, infoIcon, warningIcon, errorIcon } = props;
+  const iconMapFilled = {
+    success: successIcon ?? <CheckCircleFilled />,
+    info: infoIcon ?? <InfoCircleFilled />,
+    error: errorIcon ?? <CloseCircleFilled />,
+    warning: warningIcon ?? <ExclamationCircleFilled />,
+  };
+  return (
+    <span className={className} style={style}>
+      {icon ?? iconMapFilled[type!]}
+    </span>
+  );
 };
 
 type CloseIconProps = {
@@ -203,6 +212,10 @@ const Alert = React.forwardRef<AlertRef, AlertProps>((props, ref) => {
     style: contextStyle,
     classNames: contextClassNames,
     styles: contextStyles,
+    successIcon,
+    infoIcon,
+    warningIcon,
+    errorIcon,
   } = useComponentConfig('alert');
 
   const prefixCls = getPrefixCls('alert', customizePrefixCls);
@@ -342,6 +355,10 @@ const Alert = React.forwardRef<AlertRef, AlertProps>((props, ref) => {
               icon={props.icon}
               prefixCls={prefixCls}
               type={type}
+              successIcon={successIcon}
+              infoIcon={infoIcon}
+              warningIcon={warningIcon}
+              errorIcon={errorIcon}
             />
           ) : null}
           <div

components/alert/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -8,23 +8,27 @@ Array [
     role="alert"
   >
     <span
-      aria-label="check-circle"
-      class="anticon anticon-check-circle ant-alert-icon"
-      role="img"
+      class="ant-alert-icon"
     >
-      <svg
-        aria-hidden="true"
-        data-icon="check-circle"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
+      <span
+        aria-label="check-circle"
+        class="anticon anticon-check-circle"
+        role="img"
       >
-        <path
-          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
-        />
-      </svg>
+        <svg
+          aria-hidden="true"
+          data-icon="check-circle"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
+          />
+        </svg>
+      </span>
     </span>
     <div
       class="ant-alert-section"
@@ -81,24 +85,28 @@ Array [
     role="alert"
   >
     <span
-      aria-label="close-circle"
-      class="anticon anticon-close-circle ant-alert-icon"
-      role="img"
+      class="ant-alert-icon"
     >
-      <svg
-        aria-hidden="true"
-        data-icon="close-circle"
-        fill="currentColor"
-        fill-rule="evenodd"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
+      <span
+        aria-label="close-circle"
+        class="anticon anticon-close-circle"
+        role="img"
       >
-        <path
-          d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
-        />
-      </svg>
+        <svg
+          aria-hidden="true"
+          data-icon="close-circle"
+          fill="currentColor"
+          fill-rule="evenodd"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
+          />
+        </svg>
+      </span>
     </span>
     <div
       class="ant-alert-section"
@@ -281,23 +289,27 @@ Array [
     role="alert"
   >
     <span
-      aria-label="exclamation-circle"
-      class="anticon anticon-exclamation-circle ant-alert-icon"
-      role="img"
+      class="ant-alert-icon"
     >
-      <svg
-        aria-hidden="true"
-        data-icon="exclamation-circle"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
+      <span
+        aria-label="exclamation-circle"
+        class="anticon anticon-exclamation-circle"
+        role="img"
       >
-        <path
-          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-        />
-      </svg>
+        <svg
+          aria-hidden="true"
+          data-icon="exclamation-circle"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+          />
+        </svg>
+      </span>
     </span>
     <div
       class="ant-alert-section"
@@ -316,23 +328,27 @@ Array [
     role="alert"
   >
     <span
-      aria-label="exclamation-circle"
-      class="anticon anticon-exclamation-circle ant-alert-icon"
-      role="img"
+      class="ant-alert-icon"
     >
-      <svg
-        aria-hidden="true"
-        data-icon="exclamation-circle"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
+      <span
+        aria-label="exclamation-circle"
+        class="anticon anticon-exclamation-circle"
+        role="img"
       >
-        <path
-          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-        />
-      </svg>
+        <svg
+          aria-hidden="true"
+          data-icon="exclamation-circle"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+          />
+        </svg>
+      </span>
     </span>
     <div
       class="ant-alert-section"
@@ -393,24 +409,28 @@ Array [
     role="alert"
   >
     <span
-      aria-label="close-circle"
-      class="anticon anticon-close-circle ant-alert-icon"
-      role="img"
+      class="ant-alert-icon"
     >
-      <svg
-        aria-hidden="true"
-        data-icon="close-circle"
-        fill="currentColor"
-        fill-rule="evenodd"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
+      <span
+        aria-label="close-circle"
+        class="anticon anticon-close-circle"
+        role="img"
       >
-        <path
-          d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
-        />
-      </svg>
+        <svg
+          aria-hidden="true"
+          data-icon="close-circle"
+          fill="currentColor"
+          fill-rule="evenodd"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
+          />
+        </svg>
+      </span>
     </span>
     <div
       class="ant-alert-section"
@@ -649,23 +669,27 @@ Array [
     role="alert"
   >
     <span
-      aria-label="smile"
-      class="anticon anticon-smile ant-alert-icon"
-      role="img"
+      class="ant-alert-icon"
     >
-      <svg
-        aria-hidden="true"
-        data-icon="smile"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
+      <span
+        aria-label="smile"
+        class="anticon anticon-smile"
+        role="img"
       >
-        <path
-          d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
-        />
-      </svg>
+        <svg
+          aria-hidden="true"
+          data-icon="smile"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
+          />
+        </svg>
+      </span>
     </span>
     <div
       class="ant-alert-section"
@@ -684,23 +708,27 @@ Array [
     role="alert"
   >
     <span
-      aria-label="smile"
-      class="anticon anticon-smile ant-alert-icon"
-      role="img"
+      class="ant-alert-icon"
     >
-      <svg
-        aria-hidden="true"
-        data-icon="smile"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
+      <span
+        aria-label="smile"
+        class="anticon anticon-smile"
+        role="img"
       >
-        <path
-          d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
-        />
-      </svg>
+        <svg
+          aria-hidden="true"
+          data-icon="smile"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
+          />
+        </svg>
+      </span>
     </span>
     <div
       class="ant-alert-section"
@@ -719,23 +747,27 @@ Array [
     role="alert"
   >
     <span
-      aria-label="smile"
-      class="anticon anticon-smile ant-alert-icon"
-      role="img"
+      class="ant-alert-icon"
     >
-      <svg
-        aria-hidden="true"
-        data-icon="smile"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
+      <span
+        aria-label="smile"
+        class="anticon anticon-smile"
+        role="img"
       >
-        <path
-          d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
-        />
-      </svg>
+        <svg
+          aria-hidden="true"
+          data-icon="smile"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
+          />
+        </svg>
+      </span>
     </span>
     <div
       class="ant-alert-section"
@@ -754,23 +786,27 @@ Array [
     role="alert"
   >
     <span
-      aria-label="smile"
-      class="anticon anticon-smile ant-alert-icon"
-      role="img"
+      class="ant-alert-icon"
     >
-      <svg
-        aria-hidden="true"
-        data-icon="smile"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
+      <span
+        aria-label="smile"
+        class="anticon anticon-smile"
+        role="img"
       >
-        <path
-          d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
-        />
-      </svg>
+        <svg
+          aria-hidden="true"
+          data-icon="smile"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
+          />
+        </svg>
+      </span>
     </span>
     <div
       class="ant-alert-section"
@@ -789,23 +825,27 @@ Array [
     role="alert"
   >
     <span
-      aria-label="smile"
-      class="anticon anticon-smile ant-alert-icon"
-      role="img"
+      class="ant-alert-icon"
     >
-      <svg
-        aria-hidden="true"
-        data-icon="smile"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
+      <span
+        aria-label="smile"
+        class="anticon anticon-smile"
+        role="img"
       >
-        <path
-          d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
-        />
-      </svg>
+        <svg
+          aria-hidden="true"
+          data-icon="smile"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
+          />
+        </svg>
+      </span>
     </span>
     <div
       class="ant-alert-section"
@@ -829,23 +869,27 @@ Array [
     role="alert"
   >
     <span
-      aria-label="smile"
-      class="anticon anticon-smile ant-alert-icon"
-      role="img"
+      class="ant-alert-icon"
     >
-      <svg
-        aria-hidden="true"
-        data-icon="smile"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
+      <span
+        aria-label="smile"
+        class="anticon anticon-smile"
+        role="img"
       >
-        <path
-          d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
-        />
-      </svg>
+        <svg
+          aria-hidden="true"
+          data-icon="smile"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
+          />
+        </svg>
+      </span>
     </span>
     <div
       class="ant-alert-section"
@@ -869,23 +913,27 @@ Array [
     role="alert"
   >
     <span
-      aria-label="smile"
-      class="anticon anticon-smile ant-alert-icon"
-      role="img"
+      class="ant-alert-icon"
     >
-      <svg
-        aria-hidden="true"
-        data-icon="smile"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
+      <span
+        aria-label="smile"
+        class="anticon anticon-smile"
+        role="img"
       >
-        <path
-          d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
-        />
-      </svg>
+        <svg
+          aria-hidden="true"
+          data-icon="smile"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
+          />
+        </svg>
+      </span>
     </span>
     <div
       class="ant-alert-section"
@@ -909,23 +957,27 @@ Array [
     role="alert"
   >
     <span
-      aria-label="smile"
-      class="anticon anticon-smile ant-alert-icon"
-      role="img"
+      class="ant-alert-icon"
     >
-      <svg
-        aria-hidden="true"
-        data-icon="smile"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
+      <span
+        aria-label="smile"
+        class="anticon anticon-smile"
+        role="img"
       >
-        <path
-          d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
-        />
-      </svg>
+        <svg
+          aria-hidden="true"
+          data-icon="smile"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
+          />
+        </svg>
+      </span>
     </span>
     <div
       class="ant-alert-section"
@@ -1058,23 +1110,27 @@ Array [
     role="alert"
   >
     <span
-      aria-label="check-circle"
-      class="anticon anticon-check-circle ant-alert-icon"
-      role="img"
+      class="ant-alert-icon"
     >
-      <svg
-        aria-hidden="true"
-        data-icon="check-circle"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
+      <span
+        aria-label="check-circle"
+        class="anticon anticon-check-circle"
+        role="img"
       >
-        <path
-          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
-        />
-      </svg>
+        <svg
+          aria-hidden="true"
+          data-icon="check-circle"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
+          />
+        </svg>
+      </span>
     </span>
     <div
       class="ant-alert-section"
@@ -1093,23 +1149,27 @@ Array [
     role="alert"
   >
     <span
-      aria-label="info-circle"
-      class="anticon anticon-info-circle ant-alert-icon"
-      role="img"
+      class="ant-alert-icon"
     >
-      <svg
-        aria-hidden="true"
-        data-icon="info-circle"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
+      <span
+        aria-label="info-circle"
+        class="anticon anticon-info-circle"
+        role="img"
       >
-        <path
-          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-        />
-      </svg>
+        <svg
+          aria-hidden="true"
+          data-icon="info-circle"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+          />
+        </svg>
+      </span>
     </span>
     <div
       class="ant-alert-section"
@@ -1128,23 +1188,27 @@ Array [
     role="alert"
   >
     <span
-      aria-label="exclamation-circle"
-      class="anticon anticon-exclamation-circle ant-alert-icon"
-      role="img"
+      class="ant-alert-icon"
     >
-      <svg
-        aria-hidden="true"
-        data-icon="exclamation-circle"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
+      <span
+        aria-label="exclamation-circle"
+        class="anticon anticon-exclamation-circle"
+        role="img"
       >
-        <path
-          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-        />
-      </svg>
+        <svg
+          aria-hidden="true"
+          data-icon="exclamation-circle"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+          />
+        </svg>
+      </span>
     </span>
     <div
       class="ant-alert-section"
@@ -1189,24 +1253,28 @@ Array [
     role="alert"
   >
     <span
-      aria-label="close-circle"
-      class="anticon anticon-close-circle ant-alert-icon"
-      role="img"
+      class="ant-alert-icon"
     >
-      <svg
-        aria-hidden="true"
-        data-icon="close-circle"
-        fill="currentColor"
-        fill-rule="evenodd"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
+      <span
+        aria-label="close-circle"
+        class="anticon anticon-close-circle"
+        role="img"
       >
-        <path
-          d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
-        />
-      </svg>
+        <svg
+          aria-hidden="true"
+          data-icon="close-circle"
+          fill="currentColor"
+          fill-rule="evenodd"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
+          />
+        </svg>
+      </span>
     </span>
     <div
       class="ant-alert-section"
@@ -1225,23 +1293,27 @@ Array [
     role="alert"
   >
     <span
-      aria-label="check-circle"
-      class="anticon anticon-check-circle ant-alert-icon"
-      role="img"
+      class="ant-alert-icon"
     >
-      <svg
-        aria-hidden="true"
-        data-icon="check-circle"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
+      <span
+        aria-label="check-circle"
+        class="anticon anticon-check-circle"
+        role="img"
       >
-        <path
-          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
-        />
-      </svg>
+        <svg
+          aria-hidden="true"
+          data-icon="check-circle"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
+          />
+        </svg>
+      </span>
     </span>
     <div
       class="ant-alert-section"
@@ -1265,23 +1337,27 @@ Array [
     role="alert"
   >
     <span
-      aria-label="info-circle"
-      class="anticon anticon-info-circle ant-alert-icon"
-      role="img"
+      class="ant-alert-icon"
     >
-      <svg
-        aria-hidden="true"
-        data-icon="info-circle"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
+      <span
+        aria-label="info-circle"
+        class="anticon anticon-info-circle"
+        role="img"
       >
-        <path
-          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-        />
-      </svg>
+        <svg
+          aria-hidden="true"
+          data-icon="info-circle"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+          />
+        </svg>
+      </span>
     </span>
     <div
       class="ant-alert-section"
@@ -1305,23 +1381,27 @@ Array [
     role="alert"
   >
     <span
-      aria-label="exclamation-circle"
-      class="anticon anticon-exclamation-circle ant-alert-icon"
-      role="img"
+      class="ant-alert-icon"
     >
-      <svg
-        aria-hidden="true"
-        data-icon="exclamation-circle"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
+      <span
+        aria-label="exclamation-circle"
+        class="anticon anticon-exclamation-circle"
+        role="img"
       >
-        <path
-          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-        />
-      </svg>
+        <svg
+          aria-hidden="true"
+          data-icon="exclamation-circle"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+          />
+        </svg>
+      </span>
     </span>
     <div
       class="ant-alert-section"
@@ -1371,24 +1451,28 @@ Array [
     role="alert"
   >
     <span
-      aria-label="close-circle"
-      class="anticon anticon-close-circle ant-alert-icon"
-      role="img"
+      class="ant-alert-icon"
     >
-      <svg
-        aria-hidden="true"
-        data-icon="close-circle"
-        fill="currentColor"
-        fill-rule="evenodd"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
+      <span
+        aria-label="close-circle"
+        class="anticon anticon-close-circle"
+        role="img"
       >
-        <path
-          d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
-        />
-      </svg>
+        <svg
+          aria-hidden="true"
+          data-icon="close-circle"
+          fill="currentColor"
+          fill-rule="evenodd"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
+          />
+        </svg>
+      </span>
     </span>
     <div
       class="ant-alert-section"
@@ -1562,24 +1646,28 @@ exports[`renders components/alert/demo/style-class.tsx extend context correctly
     role="alert"
   >
     <span
-      aria-label="info-circle"
-      class="anticon anticon-info-circle ant-alert-icon"
-      role="img"
+      class="ant-alert-icon"
       style="font-size: 18px;"
     >
-      <svg
-        aria-hidden="true"
-        data-icon="info-circle"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
+      <span
+        aria-label="info-circle"
+        class="anticon anticon-info-circle"
+        role="img"
       >
-        <path
-          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-        />
-      </svg>
+        <svg
+          aria-hidden="true"
+          data-icon="info-circle"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+          />
+        </svg>
+      </span>
     </span>
     <div
       class="ant-alert-section"
@@ -1611,24 +1699,28 @@ exports[`renders components/alert/demo/style-class.tsx extend context correctly
     style="background-color: rgba(82, 196, 26, 0.1); border-color: rgb(183, 235, 143);"
   >
     <span
-      aria-label="check-circle"
-      class="anticon anticon-check-circle ant-alert-icon"
-      role="img"
+      class="ant-alert-icon"
       style="color: rgb(82, 196, 26);"
     >
-      <svg
-        aria-hidden="true"
-        data-icon="check-circle"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
+      <span
+        aria-label="check-circle"
+        class="anticon anticon-check-circle"
+        role="img"
       >
-        <path
-          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
-        />
-      </svg>
+        <svg
+          aria-hidden="true"
+          data-icon="check-circle"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
+          />
+        </svg>
+      </span>
     </span>
     <div
       class="ant-alert-section"

components/alert/__tests__/__snapshots__/demo.test.ts.snap

@@ -8,23 +8,27 @@ Array [
     role="alert"
   >
     <span
-      aria-label="check-circle"
-      class="anticon anticon-check-circle ant-alert-icon"
-      role="img"
+      class="ant-alert-icon"
     >
-      <svg
-        aria-hidden="true"
-        data-icon="check-circle"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
+      <span
+        aria-label="check-circle"
+        class="anticon anticon-check-circle"
+        role="img"
       >
-        <path
-          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
-        />
-      </svg>
+        <svg
+          aria-hidden="true"
+          data-icon="check-circle"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
+          />
+        </svg>
+      </span>
     </span>
     <div
       class="ant-alert-section"
@@ -81,24 +85,28 @@ Array [
     role="alert"
   >
     <span
-      aria-label="close-circle"
-      class="anticon anticon-close-circle ant-alert-icon"
-      role="img"
+      class="ant-alert-icon"
     >
-      <svg
-        aria-hidden="true"
-        data-icon="close-circle"
-        fill="currentColor"
-        fill-rule="evenodd"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
+      <span
+        aria-label="close-circle"
+        class="anticon anticon-close-circle"
+        role="img"
       >
-        <path
-          d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
-        />
-      </svg>
+        <svg
+          aria-hidden="true"
+          data-icon="close-circle"
+          fill="currentColor"
+          fill-rule="evenodd"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
+          />
+        </svg>
+      </span>
     </span>
     <div
       class="ant-alert-section"
@@ -279,23 +287,27 @@ Array [
     role="alert"
   >
     <span
-      aria-label="exclamation-circle"
-      class="anticon anticon-exclamation-circle ant-alert-icon"
-      role="img"
+      class="ant-alert-icon"
     >
-      <svg
-        aria-hidden="true"
-        data-icon="exclamation-circle"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
+      <span
+        aria-label="exclamation-circle"
+        class="anticon anticon-exclamation-circle"
+        role="img"
       >
-        <path
-          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-        />
-      </svg>
+        <svg
+          aria-hidden="true"
+          data-icon="exclamation-circle"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+          />
+        </svg>
+      </span>
     </span>
     <div
       class="ant-alert-section"
@@ -314,23 +326,27 @@ Array [
     role="alert"
   >
     <span
-      aria-label="exclamation-circle"
-      class="anticon anticon-exclamation-circle ant-alert-icon"
-      role="img"
+      class="ant-alert-icon"
     >
-      <svg
-        aria-hidden="true"
-        data-icon="exclamation-circle"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
+      <span
+        aria-label="exclamation-circle"
+        class="anticon anticon-exclamation-circle"
+        role="img"
       >
-        <path
-          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-        />
-      </svg>
+        <svg
+          aria-hidden="true"
+          data-icon="exclamation-circle"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+          />
+        </svg>
+      </span>
     </span>
     <div
       class="ant-alert-section"
@@ -391,24 +407,28 @@ Array [
     role="alert"
   >
     <span
-      aria-label="close-circle"
-      class="anticon anticon-close-circle ant-alert-icon"
-      role="img"
+      class="ant-alert-icon"
     >
-      <svg
-        aria-hidden="true"
-        data-icon="close-circle"
-        fill="currentColor"
-        fill-rule="evenodd"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
+      <span
+        aria-label="close-circle"
+        class="anticon anticon-close-circle"
+        role="img"
       >
-        <path
-          d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
-        />
-      </svg>
+        <svg
+          aria-hidden="true"
+          data-icon="close-circle"
+          fill="currentColor"
+          fill-rule="evenodd"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
+          />
+        </svg>
+      </span>
     </span>
     <div
       class="ant-alert-section"
@@ -641,23 +661,27 @@ Array [
     role="alert"
   >
     <span
-      aria-label="smile"
-      class="anticon anticon-smile ant-alert-icon"
-      role="img"
+      class="ant-alert-icon"
     >
-      <svg
-        aria-hidden="true"
-        data-icon="smile"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
+      <span
+        aria-label="smile"
+        class="anticon anticon-smile"
+        role="img"
       >
-        <path
-          d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
-        />
-      </svg>
+        <svg
+          aria-hidden="true"
+          data-icon="smile"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
+          />
+        </svg>
+      </span>
     </span>
     <div
       class="ant-alert-section"
@@ -676,23 +700,27 @@ Array [
     role="alert"
   >
     <span
-      aria-label="smile"
-      class="anticon anticon-smile ant-alert-icon"
-      role="img"
+      class="ant-alert-icon"
     >
-      <svg
-        aria-hidden="true"
-        data-icon="smile"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
+      <span
+        aria-label="smile"
+        class="anticon anticon-smile"
+        role="img"
       >
-        <path
-          d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
-        />
-      </svg>
+        <svg
+          aria-hidden="true"
+          data-icon="smile"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
+          />
+        </svg>
+      </span>
     </span>
     <div
       class="ant-alert-section"
@@ -711,23 +739,27 @@ Array [
     role="alert"
   >
     <span
-      aria-label="smile"
-      class="anticon anticon-smile ant-alert-icon"
-      role="img"
+      class="ant-alert-icon"
     >
-      <svg
-        aria-hidden="true"
-        data-icon="smile"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
+      <span
+        aria-label="smile"
+        class="anticon anticon-smile"
+        role="img"
       >
-        <path
-          d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
-        />
-      </svg>
+        <svg
+          aria-hidden="true"
+          data-icon="smile"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
+          />
+        </svg>
+      </span>
     </span>
     <div
       class="ant-alert-section"
@@ -746,23 +778,27 @@ Array [
     role="alert"
   >
     <span
-      aria-label="smile"
-      class="anticon anticon-smile ant-alert-icon"
-      role="img"
+      class="ant-alert-icon"
     >
-      <svg
-        aria-hidden="true"
-        data-icon="smile"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
+      <span
+        aria-label="smile"
+        class="anticon anticon-smile"
+        role="img"
       >
-        <path
-          d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
-        />
-      </svg>
+        <svg
+          aria-hidden="true"
+          data-icon="smile"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
+          />
+        </svg>
+      </span>
     </span>
     <div
       class="ant-alert-section"
@@ -781,23 +817,27 @@ Array [
     role="alert"
   >
     <span
-      aria-label="smile"
-      class="anticon anticon-smile ant-alert-icon"
-      role="img"
+      class="ant-alert-icon"
     >
-      <svg
-        aria-hidden="true"
-        data-icon="smile"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
+      <span
+        aria-label="smile"
+        class="anticon anticon-smile"
+        role="img"
       >
-        <path
-          d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
-        />
-      </svg>
+        <svg
+          aria-hidden="true"
+          data-icon="smile"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
+          />
+        </svg>
+      </span>
     </span>
     <div
       class="ant-alert-section"
@@ -821,23 +861,27 @@ Array [
     role="alert"
   >
     <span
-      aria-label="smile"
-      class="anticon anticon-smile ant-alert-icon"
-      role="img"
+      class="ant-alert-icon"
     >
-      <svg
-        aria-hidden="true"
-        data-icon="smile"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
+      <span
+        aria-label="smile"
+        class="anticon anticon-smile"
+        role="img"
       >
-        <path
-          d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
-        />
-      </svg>
+        <svg
+          aria-hidden="true"
+          data-icon="smile"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
+          />
+        </svg>
+      </span>
     </span>
     <div
       class="ant-alert-section"
@@ -861,23 +905,27 @@ Array [
     role="alert"
   >
     <span
-      aria-label="smile"
-      class="anticon anticon-smile ant-alert-icon"
-      role="img"
+      class="ant-alert-icon"
     >
-      <svg
-        aria-hidden="true"
-        data-icon="smile"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
+      <span
+        aria-label="smile"
+        class="anticon anticon-smile"
+        role="img"
       >
-        <path
-          d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
-        />
-      </svg>
+        <svg
+          aria-hidden="true"
+          data-icon="smile"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
+          />
+        </svg>
+      </span>
     </span>
     <div
       class="ant-alert-section"
@@ -901,23 +949,27 @@ Array [
     role="alert"
   >
     <span
-      aria-label="smile"
-      class="anticon anticon-smile ant-alert-icon"
-      role="img"
+      class="ant-alert-icon"
     >
-      <svg
-        aria-hidden="true"
-        data-icon="smile"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
+      <span
+        aria-label="smile"
+        class="anticon anticon-smile"
+        role="img"
       >
-        <path
-          d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
-        />
-      </svg>
+        <svg
+          aria-hidden="true"
+          data-icon="smile"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
+          />
+        </svg>
+      </span>
     </span>
     <div
       class="ant-alert-section"
@@ -1044,23 +1096,27 @@ Array [
     role="alert"
   >
     <span
-      aria-label="check-circle"
-      class="anticon anticon-check-circle ant-alert-icon"
-      role="img"
+      class="ant-alert-icon"
     >
-      <svg
-        aria-hidden="true"
-        data-icon="check-circle"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
+      <span
+        aria-label="check-circle"
+        class="anticon anticon-check-circle"
+        role="img"
       >
-        <path
-          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
-        />
-      </svg>
+        <svg
+          aria-hidden="true"
+          data-icon="check-circle"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
+          />
+        </svg>
+      </span>
     </span>
     <div
       class="ant-alert-section"
@@ -1079,23 +1135,27 @@ Array [
     role="alert"
   >
     <span
-      aria-label="info-circle"
-      class="anticon anticon-info-circle ant-alert-icon"
-      role="img"
+      class="ant-alert-icon"
     >
-      <svg
-        aria-hidden="true"
-        data-icon="info-circle"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
+      <span
+        aria-label="info-circle"
+        class="anticon anticon-info-circle"
+        role="img"
       >
-        <path
-          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-        />
-      </svg>
+        <svg
+          aria-hidden="true"
+          data-icon="info-circle"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+          />
+        </svg>
+      </span>
     </span>
     <div
       class="ant-alert-section"
@@ -1114,23 +1174,27 @@ Array [
     role="alert"
   >
     <span
-      aria-label="exclamation-circle"
-      class="anticon anticon-exclamation-circle ant-alert-icon"
-      role="img"
+      class="ant-alert-icon"
     >
-      <svg
-        aria-hidden="true"
-        data-icon="exclamation-circle"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
+      <span
+        aria-label="exclamation-circle"
+        class="anticon anticon-exclamation-circle"
+        role="img"
       >
-        <path
-          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-        />
-      </svg>
+        <svg
+          aria-hidden="true"
+          data-icon="exclamation-circle"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+          />
+        </svg>
+      </span>
     </span>
     <div
       class="ant-alert-section"
@@ -1175,24 +1239,28 @@ Array [
     role="alert"
   >
     <span
-      aria-label="close-circle"
-      class="anticon anticon-close-circle ant-alert-icon"
-      role="img"
+      class="ant-alert-icon"
     >
-      <svg
-        aria-hidden="true"
-        data-icon="close-circle"
-        fill="currentColor"
-        fill-rule="evenodd"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
+      <span
+        aria-label="close-circle"
+        class="anticon anticon-close-circle"
+        role="img"
       >
-        <path
-          d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
-        />
-      </svg>
+        <svg
+          aria-hidden="true"
+          data-icon="close-circle"
+          fill="currentColor"
+          fill-rule="evenodd"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
+          />
+        </svg>
+      </span>
     </span>
     <div
       class="ant-alert-section"
@@ -1211,23 +1279,27 @@ Array [
     role="alert"
   >
     <span
-      aria-label="check-circle"
-      class="anticon anticon-check-circle ant-alert-icon"
-      role="img"
+      class="ant-alert-icon"
     >
-      <svg
-        aria-hidden="true"
-        data-icon="check-circle"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
+      <span
+        aria-label="check-circle"
+        class="anticon anticon-check-circle"
+        role="img"
       >
-        <path
-          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
-        />
-      </svg>
+        <svg
+          aria-hidden="true"
+          data-icon="check-circle"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
+          />
+        </svg>
+      </span>
     </span>
     <div
       class="ant-alert-section"
@@ -1251,23 +1323,27 @@ Array [
     role="alert"
   >
     <span
-      aria-label="info-circle"
-      class="anticon anticon-info-circle ant-alert-icon"
-      role="img"
+      class="ant-alert-icon"
     >
-      <svg
-        aria-hidden="true"
-        data-icon="info-circle"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
+      <span
+        aria-label="info-circle"
+        class="anticon anticon-info-circle"
+        role="img"
       >
-        <path
-          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-        />
-      </svg>
+        <svg
+          aria-hidden="true"
+          data-icon="info-circle"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+          />
+        </svg>
+      </span>
     </span>
     <div
       class="ant-alert-section"
@@ -1291,23 +1367,27 @@ Array [
     role="alert"
   >
     <span
-      aria-label="exclamation-circle"
-      class="anticon anticon-exclamation-circle ant-alert-icon"
-      role="img"
+      class="ant-alert-icon"
     >
-      <svg
-        aria-hidden="true"
-        data-icon="exclamation-circle"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
+      <span
+        aria-label="exclamation-circle"
+        class="anticon anticon-exclamation-circle"
+        role="img"
       >
-        <path
-          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-        />
-      </svg>
+        <svg
+          aria-hidden="true"
+          data-icon="exclamation-circle"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+          />
+        </svg>
+      </span>
     </span>
     <div
       class="ant-alert-section"
@@ -1357,24 +1437,28 @@ Array [
     role="alert"
   >
     <span
-      aria-label="close-circle"
-      class="anticon anticon-close-circle ant-alert-icon"
-      role="img"
+      class="ant-alert-icon"
     >
-      <svg
-        aria-hidden="true"
-        data-icon="close-circle"
-        fill="currentColor"
-        fill-rule="evenodd"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
+      <span
+        aria-label="close-circle"
+        class="anticon anticon-close-circle"
+        role="img"
       >
-        <path
-          d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
-        />
-      </svg>
+        <svg
+          aria-hidden="true"
+          data-icon="close-circle"
+          fill="currentColor"
+          fill-rule="evenodd"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
+          />
+        </svg>
+      </span>
     </span>
     <div
       class="ant-alert-section"
@@ -1542,24 +1626,28 @@ exports[`renders components/alert/demo/style-class.tsx correctly 1`] = `
     role="alert"
   >
     <span
-      aria-label="info-circle"
-      class="anticon anticon-info-circle ant-alert-icon"
-      role="img"
+      class="ant-alert-icon"
       style="font-size:18px"
     >
-      <svg
-        aria-hidden="true"
-        data-icon="info-circle"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
+      <span
+        aria-label="info-circle"
+        class="anticon anticon-info-circle"
+        role="img"
       >
-        <path
-          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-        />
-      </svg>
+        <svg
+          aria-hidden="true"
+          data-icon="info-circle"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+          />
+        </svg>
+      </span>
     </span>
     <div
       class="ant-alert-section"
@@ -1591,24 +1679,28 @@ exports[`renders components/alert/demo/style-class.tsx correctly 1`] = `
     style="background-color:rgba(82, 196, 26, 0.1);border-color:#b7eb8f"
   >
     <span
-      aria-label="check-circle"
-      class="anticon anticon-check-circle ant-alert-icon"
-      role="img"
+      class="ant-alert-icon"
       style="color:#52c41a"
     >
-      <svg
-        aria-hidden="true"
-        data-icon="check-circle"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
+      <span
+        aria-label="check-circle"
+        class="anticon anticon-check-circle"
+        role="img"
       >
-        <path
-          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
-        />
-      </svg>
+        <svg
+          aria-hidden="true"
+          data-icon="check-circle"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
+          />
+        </svg>
+      </span>
     </span>
     <div
       class="ant-alert-section"

components/alert/__tests__/__snapshots__/index.test.tsx.snap

@@ -7,23 +7,27 @@ exports[`Alert custom action 1`] = `
   role="alert"
 >
   <span
-    aria-label="check-circle"
-    class="anticon anticon-check-circle ant-alert-icon"
-    role="img"
+    class="ant-alert-icon"
   >
-    <svg
-      aria-hidden="true"
-      data-icon="check-circle"
-      fill="currentColor"
-      focusable="false"
-      height="1em"
-      viewBox="64 64 896 896"
-      width="1em"
+    <span
+      aria-label="check-circle"
+      class="anticon anticon-check-circle"
+      role="img"
     >
-      <path
-        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
-      />
-    </svg>
+      <svg
+        aria-hidden="true"
+        data-icon="check-circle"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
+        />
+      </svg>
+    </span>
   </span>
   <div
     class="ant-alert-section"

components/alert/__tests__/index.test.tsx

@@ -10,6 +10,7 @@ import Button from '../../button';
 import Popconfirm from '../../popconfirm';
 import Tooltip from '../../tooltip';
 import type { AlertProps, AlertRef } from '../Alert';
+import ConfigProvider from 'antd/es/config-provider';
 
 const { resetWarned } = warning;
 
@@ -288,4 +289,13 @@ describe('Alert', () => {
     expect(actionElement).toHaveStyle({ color: customStyles.actions?.color });
     expect(closeElement).toHaveStyle({ color: customStyles.close?.color });
   });
+
+  it('should support custom success icon', () => {
+    render(
+      <ConfigProvider alert={{ successIcon: 'foobar' }}>
+        <Alert title="Success Tips" type="success" showIcon />
+      </ConfigProvider>,
+    );
+    expect(screen.getByRole('alert')).toHaveTextContent(/foobar/i);
+  });
 });

components/alert/demo/style-class.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { Alert, Button, Flex } from 'antd';
 import type { AlertProps } from 'antd';
-import { createStyles } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 
-const useStyle = createStyles(({ css }) => ({
+const classNames = createStaticStyles(({ css }) => ({
   root: css`
     border: 2px dashed #ccc;
     border-radius: 8px;
@@ -40,12 +40,10 @@ const styleFn: AlertProps['styles'] = ({ props: { type } }) => {
 };
 
 const App: React.FC = () => {
-  const { styles } = useStyle();
-
   const alertSharedProps: AlertProps = {
     showIcon: true,
     classNames: {
-      root: styles.root,
+      root: classNames.root,
     },
   };
 

components/alert/index.tsx

@@ -1,7 +1,13 @@
 import InternalAlert from './Alert';
 import ErrorBoundary from './ErrorBoundary';
 
-export type { AlertProps } from './Alert';
+export type {
+  AlertProps,
+  AlertSemanticClassNames,
+  AlertSemanticName,
+  AlertSemanticStyles,
+} from './Alert';
+
 export type { ErrorBoundaryProps } from './ErrorBoundary';
 
 type CompoundedComponent = typeof InternalAlert & {

components/anchor/Anchor.tsx

@@ -4,12 +4,7 @@ import { clsx } from 'clsx';
 import scrollIntoView from 'scroll-into-view-if-needed';
 
 import getScroll from '../_util/getScroll';
-import type {
-  SemanticClassNames,
-  SemanticClassNamesType,
-  SemanticStyles,
-  SemanticStylesType,
-} from '../_util/hooks';
+import type { SemanticClassNamesType, SemanticStylesType } from '../_util/hooks';
 import { useMergeSemantic } from '../_util/hooks';
 import scrollTo from '../_util/scrollTo';
 import { devUseWarning } from '../_util/warning';
@@ -42,7 +37,7 @@ function getOffsetTop(element: HTMLElement, container: AnchorContainer): number
 
   if (rect.width || rect.height) {
     if (container === window) {
-      return rect.top - element.ownerDocument!.documentElement!.clientTop;
+      return rect.top - element.ownerDocument.documentElement!.clientTop;
     }
     return rect.top - (container as HTMLElement).getBoundingClientRect().top;
   }
@@ -57,9 +52,26 @@ interface Section {
   top: number;
 }
 
-type SemanticName = 'root' | 'item' | 'itemTitle' | 'indicator';
-export type AnchorClassNamesType = SemanticClassNamesType<AnchorProps, SemanticName>;
-export type AnchorStylesType = SemanticStylesType<AnchorProps, SemanticName>;
+export type AnchorSemanticName = keyof AnchorSemanticClassNames & keyof AnchorSemanticStyles;
+
+export type AnchorSemanticClassNames = {
+  root?: string;
+  item?: string;
+  itemTitle?: string;
+  indicator?: string;
+};
+
+export type AnchorSemanticStyles = {
+  root?: React.CSSProperties;
+  item?: React.CSSProperties;
+  itemTitle?: React.CSSProperties;
+  indicator?: React.CSSProperties;
+};
+
+export type AnchorClassNamesType = SemanticClassNamesType<AnchorProps, AnchorSemanticClassNames>;
+
+export type AnchorStylesType = SemanticStylesType<AnchorProps, AnchorSemanticStyles>;
+
 export interface AnchorProps {
   prefixCls?: string;
   className?: string;
@@ -114,8 +126,8 @@ export interface AntAnchor {
     link: { title: React.ReactNode; href: string },
   ) => void;
   direction: AnchorDirection;
-  classNames?: SemanticClassNames<SemanticName>;
-  styles?: SemanticStyles<SemanticName>;
+  classNames?: AnchorSemanticClassNames;
+  styles?: AnchorSemanticStyles;
 }
 
 const Anchor: React.FC<AnchorProps> = (props) => {

components/anchor/index.tsx

@@ -1,7 +1,12 @@
 import InternalAnchor from './Anchor';
 import AnchorLink from './AnchorLink';
 
-export type { AnchorProps } from './Anchor';
+export type {
+  AnchorProps,
+  AnchorSemanticClassNames,
+  AnchorSemanticName,
+  AnchorSemanticStyles,
+} from './Anchor';
 export type { AnchorLinkProps } from './AnchorLink';
 
 type InternalAnchorType = typeof InternalAnchor;
@@ -13,4 +18,5 @@ type CompoundedComponent = InternalAnchorType & {
 const Anchor = InternalAnchor as CompoundedComponent;
 
 Anchor.Link = AnchorLink;
+
 export default Anchor;

components/auto-complete/AutoComplete.tsx

@@ -3,12 +3,7 @@ import type { BaseSelectRef } from '@rc-component/select';
 import { omit, toArray } from '@rc-component/util';
 import { clsx } from 'clsx';
 
-import type {
-  SemanticClassNames,
-  SemanticClassNamesType,
-  SemanticStyles,
-  SemanticStylesType,
-} from '../_util/hooks';
+import type { SemanticClassNamesType, SemanticStylesType } from '../_util/hooks';
 import { useMergeSemantic } from '../_util/hooks';
 import type { InputStatus } from '../_util/statusUtils';
 import { devUseWarning } from '../_util/warning';
@@ -19,13 +14,30 @@ import type {
   DefaultOptionType,
   InternalSelectProps,
   RefSelectProps,
+  SelectPopupSemanticClassNames,
+  SelectPopupSemanticStyles,
   SelectProps,
 } from '../select';
 import Select from '../select';
 
-export type AutoCompleteSemanticName = 'root' | 'prefix' | 'input' | 'placeholder' | 'content';
+export type AutoCompleteSemanticName = keyof AutoCompleteSemanticClassNames &
+  keyof AutoCompleteSemanticStyles;
 
-type PopupSemantic = 'root' | 'listItem' | 'list';
+export type AutoCompleteSemanticClassNames = {
+  root?: string;
+  prefix?: string;
+  input?: string;
+  placeholder?: string;
+  content?: string;
+};
+
+export type AutoCompleteSemanticStyles = {
+  root?: React.CSSProperties;
+  prefix?: React.CSSProperties;
+  input?: React.CSSProperties;
+  placeholder?: React.CSSProperties;
+  content?: React.CSSProperties;
+};
 
 const { Option } = Select;
 
@@ -38,14 +50,14 @@ export type DataSourceItemType = DataSourceItemObject | React.ReactNode;
 
 export type AutoCompleteClassNamesType = SemanticClassNamesType<
   AutoCompleteProps,
-  AutoCompleteSemanticName,
-  { popup?: SemanticClassNames<PopupSemantic> }
+  AutoCompleteSemanticClassNames,
+  { popup?: SelectPopupSemanticClassNames }
 >;
 
 export type AutoCompleteStylesType = SemanticStylesType<
   AutoCompleteProps,
-  AutoCompleteSemanticName,
-  { popup?: SemanticStyles<PopupSemantic> }
+  AutoCompleteSemanticStyles,
+  { popup?: SelectPopupSemanticStyles }
 >;
 
 export interface AutoCompleteProps<

components/auto-complete/demo/style-class.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { AutoComplete, Flex } from 'antd';
 import type { AutoCompleteProps } from 'antd';
-import { createStyles } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 
-const useStyle = createStyles(({ css }) => ({
+const classNames = createStaticStyles(({ css }) => ({
   root: css`
     border-radius: 4px;
   `,
@@ -39,7 +39,6 @@ const options: AutoCompleteProps['options'] = [
 ];
 
 const App: React.FC = () => {
-  const { styles: classNames } = useStyle();
   const sharedProps: AutoCompleteProps = {
     options,
     classNames: {

components/auto-complete/index.tsx

@@ -4,7 +4,12 @@ import genPurePanel from '../_util/PurePanel';
 import Select from '../select';
 import RefAutoComplete from './AutoComplete';
 
-export type { AutoCompleteProps } from './AutoComplete';
+export type {
+  AutoCompleteProps,
+  AutoCompleteSemanticClassNames,
+  AutoCompleteSemanticName,
+  AutoCompleteSemanticStyles,
+} from './AutoComplete';
 
 const { Option } = Select;
 

components/avatar/Avatar.tsx

@@ -18,7 +18,7 @@ export interface AvatarProps {
   /** Shape of avatar, options: `circle`, `square` */
   shape?: 'circle' | 'square';
   /*
-   * Size of avatar, options: `large`, `small`, `default`
+   * Size of avatar, options: `large`, `medium`, `small`
    * or a custom number size
    * */
   size?: AvatarSize;
@@ -111,7 +111,7 @@ const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>((props, ref) => {
     }
   };
 
-  const size = useSize((ctxSize) => customSize ?? avatarCtx?.size ?? ctxSize ?? 'default');
+  const size = useSize((ctxSize) => customSize ?? avatarCtx?.size ?? ctxSize ?? 'medium');
 
   const needResponsive = Object.keys(typeof size === 'object' ? size || {} : {}).some((key) =>
     ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].includes(key),

components/avatar/AvatarContext.ts

@@ -1,8 +1,12 @@
 import * as React from 'react';
 
 import type { ScreenSizeMap } from '../_util/responsiveObserver';
+import type { SizeType } from '../config-provider/SizeContext';
 
-export type AvatarSize = 'large' | 'small' | 'default' | number | ScreenSizeMap;
+/**
+ * 'default' is deprecated and will be removed in v7, please use `medium` instead.
+ */
+export type AvatarSize = SizeType | 'default' | number | ScreenSizeMap;
 
 export interface AvatarContextType {
   size?: AvatarSize;

components/avatar/AvatarGroup.tsx

@@ -13,11 +13,7 @@ import type { AvatarContextType, AvatarSize } from './AvatarContext';
 import AvatarContext from './AvatarContext';
 import useStyle from './style';
 
-interface ContextProps {
-  children?: React.ReactNode;
-}
-
-const AvatarContextProvider: React.FC<AvatarContextType & ContextProps> = (props) => {
+const AvatarContextProvider: React.FC<React.PropsWithChildren<AvatarContextType>> = (props) => {
   const { size, shape } = React.useContext<AvatarContextType>(AvatarContext);
   const avatarContextValue = React.useMemo<AvatarContextType>(
     () => ({ size: props.size || size, shape: props.shape || shape }),
@@ -48,7 +44,7 @@ export interface AvatarGroupProps {
     popover?: PopoverProps;
   };
   /*
-   * Size of avatar, options: `large`, `small`, `default`
+   * Size of avatar, options: `large`, `medium`, `small`
    * or a custom number size
    * */
   size?: AvatarSize;

components/avatar/demo/toggle-debug.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Avatar, Button, Space } from 'antd';
 
-type SizeType = 'large' | 'small' | 'default' | number;
+type SizeType = 'large' | 'small' | 'medium' | number;
 
 const App: React.FC = () => {
   const [hide, setHide] = useState(true);
@@ -13,7 +13,7 @@ const App: React.FC = () => {
   };
 
   const toggleSize = () => {
-    const sizes = ['small', 'default', 'large'] as SizeType[];
+    const sizes = ['small', 'medium', 'large'] as SizeType[];
     let current = sizes.indexOf(size) + 1;
     if (current > 2) {
       current = 0;

components/avatar/index.en-US.md

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

components/avatar/index.zh-CN.md

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

components/back-top/index.tsx

@@ -25,6 +25,9 @@ export interface BackTopProps {
   duration?: number;
 }
 
+/**
+ * @deprecated Please use `FloatButton.BackTop` instead.
+ */
 const BackTop: React.FC<React.PropsWithChildren<BackTopProps>> = (props) => {
   const {
     prefixCls: customizePrefixCls,

components/badge/Badge.tsx

@@ -15,10 +15,21 @@ import type { PresetColorKey } from '../theme/internal';
 import ScrollNumber from './ScrollNumber';
 import useStyle from './style';
 
-type SemanticName = 'root' | 'indicator';
+export type BadgeSemanticName = keyof BadgeSemanticClassNames & keyof BadgeSemanticStyles;
 
-export type BadgeClassNamesType = SemanticClassNamesType<BadgeProps, SemanticName>;
-export type BadgeStylesType = SemanticStylesType<BadgeProps, SemanticName>;
+export type BadgeSemanticClassNames = {
+  root?: string;
+  indicator?: string;
+};
+
+export type BadgeSemanticStyles = {
+  root?: React.CSSProperties;
+  indicator?: React.CSSProperties;
+};
+
+export type BadgeClassNamesType = SemanticClassNamesType<BadgeProps, BadgeSemanticClassNames>;
+
+export type BadgeStylesType = SemanticStylesType<BadgeProps, BadgeSemanticStyles>;
 
 export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
   /** Number to show in badge */
@@ -211,6 +222,7 @@ const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>((props, ref) => {
     const statusTextColor = mergedStyle.color;
     return (
       <span
+        ref={ref}
         {...restProps}
         className={badgeClassName}
         style={{ ...mergedStyles.root, ...mergedStyle }}

components/badge/Ribbon.tsx

@@ -11,10 +11,23 @@ import useStyle from './style/ribbon';
 
 type RibbonPlacement = 'start' | 'end';
 
-type SemanticName = 'root' | 'content' | 'indicator';
+export type RibbonSemanticName = keyof RibbonSemanticClassNames & keyof RibbonSemanticStyles;
 
-export type RibbonClassNamesType = SemanticClassNamesType<RibbonProps, SemanticName>;
-export type RibbonStylesType = SemanticStylesType<RibbonProps, SemanticName>;
+export type RibbonSemanticClassNames = {
+  root?: string;
+  content?: string;
+  indicator?: string;
+};
+
+export type RibbonSemanticStyles = {
+  root?: React.CSSProperties;
+  content?: React.CSSProperties;
+  indicator?: React.CSSProperties;
+};
+
+export type RibbonClassNamesType = SemanticClassNamesType<RibbonProps, RibbonSemanticClassNames>;
+
+export type RibbonStylesType = SemanticStylesType<RibbonProps, RibbonSemanticStyles>;
 
 export interface RibbonProps {
   className?: string;

components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -3083,7 +3083,7 @@ exports[`renders components/badge/demo/style-class.tsx extend context correctly
           />
         </span>
         <sup
-          class="ant-scroll-number acss-9c7r58 ant-badge-count ant-badge-count-sm"
+          class="ant-scroll-number acss-1aprf71 ant-badge-count ant-badge-count-sm"
           data-show="true"
           title="5"
         >
@@ -3113,7 +3113,7 @@ exports[`renders components/badge/demo/style-class.tsx extend context correctly
           />
         </span>
         <sup
-          class="ant-scroll-number acss-9c7r58 ant-badge-count"
+          class="ant-scroll-number acss-1aprf71 ant-badge-count"
           data-show="true"
           style="font-size: 14px; background-color: rgb(105, 111, 199);"
           title="5"
@@ -3141,7 +3141,7 @@ exports[`renders components/badge/demo/style-class.tsx extend context correctly
       class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
     >
       <div
-        class="ant-ribbon-wrapper css-var-test-id acss-19a7de9"
+        class="ant-ribbon-wrapper css-var-test-id acss-15qh5u5"
       >
         <div
           class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -3180,7 +3180,7 @@ exports[`renders components/badge/demo/style-class.tsx extend context correctly
         </div>
       </div>
       <div
-        class="ant-ribbon-wrapper css-var-test-id acss-19a7de9"
+        class="ant-ribbon-wrapper css-var-test-id acss-15qh5u5"
       >
         <div
           class="ant-card ant-card-bordered ant-card-small css-var-test-id"

components/badge/__tests__/__snapshots__/demo.test.tsx.snap

@@ -3053,7 +3053,7 @@ exports[`renders components/badge/demo/style-class.tsx correctly 1`] = `
           />
         </span>
         <sup
-          class="ant-scroll-number acss-9c7r58 ant-badge-count ant-badge-count-sm"
+          class="ant-scroll-number acss-1aprf71 ant-badge-count ant-badge-count-sm"
           data-show="true"
           title="5"
         >
@@ -3083,7 +3083,7 @@ exports[`renders components/badge/demo/style-class.tsx correctly 1`] = `
           />
         </span>
         <sup
-          class="ant-scroll-number acss-9c7r58 ant-badge-count"
+          class="ant-scroll-number acss-1aprf71 ant-badge-count"
           data-show="true"
           style="font-size:14px;background-color:#696FC7"
           title="5"
@@ -3111,7 +3111,7 @@ exports[`renders components/badge/demo/style-class.tsx correctly 1`] = `
       class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
     >
       <div
-        class="ant-ribbon-wrapper css-var-test-id acss-19a7de9"
+        class="ant-ribbon-wrapper css-var-test-id acss-15qh5u5"
       >
         <div
           class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -3150,7 +3150,7 @@ exports[`renders components/badge/demo/style-class.tsx correctly 1`] = `
         </div>
       </div>
       <div
-        class="ant-ribbon-wrapper css-var-test-id acss-19a7de9"
+        class="ant-ribbon-wrapper css-var-test-id acss-15qh5u5"
       >
         <div
           class="ant-card ant-card-bordered ant-card-small css-var-test-id"

components/badge/__tests__/index.test.tsx

@@ -240,4 +240,10 @@ describe('Badge', () => {
     rerender(<Badge count={0} showZero color="#ff0" />);
     expect(container.querySelectorAll('[title="0"]')).toHaveLength(1);
   });
+
+  it('should support ref when exist status & text', () => {
+    const badgeRef = React.createRef<HTMLSpanElement>();
+    const { container } = render(<Badge ref={badgeRef} status="success" text="Success" />);
+    expect(badgeRef.current).toBe(container.querySelector('.ant-badge'));
+  });
 });

components/badge/demo/style-class.tsx

@@ -1,21 +1,21 @@
 import React from 'react';
 import { Avatar, Badge, Card, Flex, Space } from 'antd';
 import type { BadgeProps } from 'antd';
-import { createStyles } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 import type { RibbonProps } from 'antd/es/badge/Ribbon';
 
-const useStylesBadge = createStyles(() => ({
-  indicator: {
-    fontSize: 10,
-  },
+const badgeClassNames = createStaticStyles(({ css }) => ({
+  indicator: css`
+   font-size: 10px;
+  `,
 }));
 
-const useStylesRibbon = createStyles(() => ({
-  root: {
-    width: 400,
-    border: '1px solid #d9d9d9',
-    borderRadius: 10,
-  },
+const ribbonClassNames = createStaticStyles(({ css }) => ({
+  root: css`
+    width: 400px;
+    border: 1px solid #d9d9d9;
+    border-radius: 10px;
+  `,
 }));
 
 const badgeStyles: BadgeProps['styles'] = {
@@ -57,8 +57,6 @@ const ribbonStylesFn: RibbonProps['styles'] = (info) => {
 };
 
 const App: React.FC = () => {
-  const { styles: badgeClassNames } = useStylesBadge();
-  const { styles: ribbonClassNames } = useStylesRibbon();
   return (
     <Space size="large" vertical>
       <Flex gap="middle">

components/badge/index.tsx

@@ -1,7 +1,21 @@
 import InternalBadge from './Badge';
 import Ribbon from './Ribbon';
 
-export type { BadgeClassNamesType, BadgeProps, BadgeStylesType } from './Badge';
+export type {
+  BadgeClassNamesType,
+  BadgeProps,
+  BadgeSemanticClassNames,
+  BadgeSemanticName,
+  BadgeSemanticStyles,
+  BadgeStylesType,
+} from './Badge';
+
+export type {
+  RibbonProps,
+  RibbonSemanticClassNames,
+  RibbonSemanticName,
+  RibbonSemanticStyles,
+} from './Ribbon';
 
 export type { ScrollNumberProps } from './ScrollNumber';
 

components/breadcrumb/Breadcrumb.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { DownOutlined } from '@ant-design/icons';
 import { toArray } from '@rc-component/util';
 import pickAttrs from '@rc-component/util/lib/pickAttrs';
 import { clsx } from 'clsx';
@@ -13,7 +14,7 @@ import type { DropdownProps } from '../dropdown';
 import type { BreadcrumbContextProps } from './BreadcrumbContext';
 import BreadcrumbContext from './BreadcrumbContext';
 import type { BreadcrumbItemProps } from './BreadcrumbItem';
-import BreadcrumbItem, { InternalBreadcrumbItem } from './BreadcrumbItem';
+import { InternalBreadcrumbItem } from './BreadcrumbItem';
 import BreadcrumbSeparator from './BreadcrumbSeparator';
 import useStyle from './style';
 import useItemRender from './useItemRender';
@@ -52,22 +53,36 @@ export type ItemType = Partial<BreadcrumbItemType & BreadcrumbSeparatorType>;
 
 export type InternalRouteType = Partial<BreadcrumbItemType & BreadcrumbSeparatorType>;
 
-export type BreadcrumbSemanticName = 'root' | 'item' | 'separator';
+export type BreadcrumbSemanticName = keyof BreadcrumbSemanticClassNames &
+  keyof BreadcrumbSemanticStyles;
+
+export type BreadcrumbSemanticClassNames = {
+  root?: string;
+  item?: string;
+  separator?: string;
+};
+
+export type BreadcrumbSemanticStyles = {
+  root?: React.CSSProperties;
+  item?: React.CSSProperties;
+  separator?: React.CSSProperties;
+};
 
 export type BreadcrumbClassNamesType<T extends AnyObject = AnyObject> = SemanticClassNamesType<
   BreadcrumbProps<T>,
-  BreadcrumbSemanticName
+  BreadcrumbSemanticClassNames
 >;
 
 export type BreadcrumbStylesType<T extends AnyObject = AnyObject> = SemanticStylesType<
   BreadcrumbProps<T>,
-  BreadcrumbSemanticName
+  BreadcrumbSemanticStyles
 >;
 
 export interface BreadcrumbProps<T extends AnyObject = AnyObject> {
   prefixCls?: string;
   params?: T;
   separator?: React.ReactNode;
+  dropdownIcon?: React.ReactNode;
   style?: React.CSSProperties;
   className?: string;
   rootClassName?: string;
@@ -108,6 +123,7 @@ const Breadcrumb = <T extends AnyObject = AnyObject>(props: BreadcrumbProps<T>)
     params = {},
     classNames,
     styles,
+    dropdownIcon,
     ...restProps
   } = props;
 
@@ -119,9 +135,11 @@ const Breadcrumb = <T extends AnyObject = AnyObject>(props: BreadcrumbProps<T>)
     classNames: contextClassNames,
     styles: contextStyles,
     separator: contextSeparator,
+    dropdownIcon: contextDropdownIcon,
   } = useComponentConfig('breadcrumb');
 
   const mergedSeparator = separator ?? contextSeparator ?? '/';
+  const mergedDropdownIcon = dropdownIcon ?? contextDropdownIcon ?? <DownOutlined />;
 
   let crumbs: React.ReactNode;
 
@@ -227,6 +245,7 @@ const Breadcrumb = <T extends AnyObject = AnyObject>(props: BreadcrumbProps<T>)
           className={itemClassName}
           style={style}
           dropdownProps={dropdownProps}
+          dropdownIcon={mergedDropdownIcon}
           href={href}
           separator={isLastItem ? '' : mergedSeparator}
           onClick={onClick}
@@ -283,9 +302,6 @@ const Breadcrumb = <T extends AnyObject = AnyObject>(props: BreadcrumbProps<T>)
   );
 };
 
-Breadcrumb.Item = BreadcrumbItem;
-Breadcrumb.Separator = BreadcrumbSeparator;
-
 if (process.env.NODE_ENV !== 'production') {
   Breadcrumb.displayName = 'Breadcrumb';
 }

components/breadcrumb/BreadcrumbContext.ts

@@ -1,12 +1,10 @@
 import React from 'react';
 
-import type { SemanticClassNames, SemanticStyles } from '../_util/hooks';
-
-export type SemanticName = 'root' | 'item' | 'separator';
+import type { BreadcrumbSemanticClassNames, BreadcrumbSemanticStyles } from './Breadcrumb';
 
 export interface BreadcrumbContextProps {
-  classNames?: SemanticClassNames<SemanticName>;
-  styles?: SemanticStyles<SemanticName>;
+  classNames?: BreadcrumbSemanticClassNames;
+  styles?: BreadcrumbSemanticStyles;
 }
 
 const BreadcrumbContext = React.createContext<BreadcrumbContextProps>({});

components/breadcrumb/BreadcrumbItem.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import DownOutlined from '@ant-design/icons/DownOutlined';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 
 import isNonNullable from '../_util/isNonNullable';
 import { ConfigContext } from '../config-provider';
@@ -17,6 +16,7 @@ export interface SeparatorType {
 }
 
 type MenuType = NonNullable<DropdownProps['menu']>;
+
 interface MenuItem {
   key?: React.Key;
   title?: React.ReactNode;
@@ -32,6 +32,7 @@ export interface BreadcrumbItemProps extends SeparatorType {
     items?: MenuItem[];
   };
   dropdownProps?: DropdownProps;
+  dropdownIcon?: React.ReactNode;
   onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLSpanElement>;
   className?: string;
   style?: React.CSSProperties;
@@ -39,7 +40,7 @@ export interface BreadcrumbItemProps extends SeparatorType {
 }
 
 export const InternalBreadcrumbItem: React.FC<BreadcrumbItemProps> = (props) => {
-  const { prefixCls, separator = '/', children, menu, dropdownProps, href } = props;
+  const { prefixCls, separator = '/', children, menu, dropdownProps, href, dropdownIcon } = props;
   const breadcrumbContext = React.useContext(BreadcrumbContext);
   const { classNames: mergedClassNames, styles: mergedStyles } = breadcrumbContext;
   /** If overlay is have Wrap a Dropdown */
@@ -73,7 +74,7 @@ export const InternalBreadcrumbItem: React.FC<BreadcrumbItemProps> = (props) =>
         <Dropdown placement="bottom" {...mergeDropDownProps}>
           <span className={`${prefixCls}-overlay-link`}>
             {breadcrumbItem}
-            <DownOutlined />
+            {dropdownIcon}
           </span>
         </Dropdown>
       );

components/breadcrumb/__tests__/Breadcrumb.test.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { accessibilityTest } from '../../../tests/shared/accessibilityTest';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
-import { render } from '../../../tests/utils';
+import { render, screen } from '../../../tests/utils';
 import ConfigProvider from '../../config-provider';
 import type { ItemType } from '../Breadcrumb';
 import Breadcrumb from '../index';
@@ -311,6 +311,75 @@ describe('Breadcrumb', () => {
     expect(document.querySelector('.ant-dropdown')).toBeTruthy();
   });
 
+  it('should support custom dropdownIcon', () => {
+    render(
+      <Breadcrumb
+        items={[
+          {
+            title: 'test',
+            menu: {
+              items: [
+                {
+                  key: '1',
+                  label: 'label',
+                },
+              ],
+            },
+          },
+        ]}
+        dropdownIcon={<span>foobar</span>}
+      />,
+    );
+    expect(screen.getByText('foobar')).toBeTruthy();
+  });
+
+  it('should support custom dropdownIcon in ConfigProvider', () => {
+    render(
+      <ConfigProvider breadcrumb={{ dropdownIcon: <span>foobar</span> }}>
+        <Breadcrumb
+          items={[
+            {
+              title: 'test',
+              menu: {
+                items: [
+                  {
+                    key: '1',
+                    label: 'label',
+                  },
+                ],
+              },
+            },
+          ]}
+        />
+      </ConfigProvider>,
+    );
+    expect(screen.getByText('foobar')).toBeTruthy();
+  });
+
+  it('should prefer custom dropdownIcon prop than ConfigProvider', () => {
+    render(
+      <ConfigProvider breadcrumb={{ dropdownIcon: <span>foobar</span> }}>
+        <Breadcrumb
+          items={[
+            {
+              title: 'test',
+              menu: {
+                items: [
+                  {
+                    key: '1',
+                    label: 'label',
+                  },
+                ],
+              },
+            },
+          ]}
+          dropdownIcon={<span>bamboo</span>}
+        />
+      </ConfigProvider>,
+    );
+    expect(screen.getByText('bamboo')).toBeTruthy();
+  });
+
   it('Breadcrumb params type test', () => {
     interface Params {
       key1?: number;

components/breadcrumb/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -881,12 +881,12 @@ exports[`renders components/breadcrumb/demo/style-class.tsx extend context corre
 >
   <nav
     aria-label="Breadcrumb with Object"
-    class="ant-breadcrumb acss-lz3q7n css-var-test-id"
+    class="ant-breadcrumb acss-14g82y5 css-var-test-id"
     style="border: 1px solid rgb(240, 240, 240); padding: 8px; border-radius: 4px;"
   >
     <ol>
       <li
-        class="ant-breadcrumb-item acss-3btzkp"
+        class="ant-breadcrumb-item acss-11xwyle"
         style="color: rgb(24, 144, 255);"
       >
         <span
@@ -897,13 +897,13 @@ exports[`renders components/breadcrumb/demo/style-class.tsx extend context corre
       </li>
       <li
         aria-hidden="true"
-        class="ant-breadcrumb-separator acss-t9kin8"
+        class="ant-breadcrumb-separator acss-1qxitnl"
         style="color: rgba(0, 0, 0, 0.45);"
       >
         /
       </li>
       <li
-        class="ant-breadcrumb-item acss-3btzkp"
+        class="ant-breadcrumb-item acss-11xwyle"
         style="color: rgb(24, 144, 255);"
       >
         <span
@@ -920,12 +920,12 @@ exports[`renders components/breadcrumb/demo/style-class.tsx extend context corre
   </nav>
   <nav
     aria-label="Breadcrumb with Function"
-    class="ant-breadcrumb acss-lz3q7n css-var-test-id"
+    class="ant-breadcrumb acss-14g82y5 css-var-test-id"
     style="border: 1px solid rgb(245, 239, 255); padding: 8px; border-radius: 4px;"
   >
     <ol>
       <li
-        class="ant-breadcrumb-item acss-3btzkp"
+        class="ant-breadcrumb-item acss-11xwyle"
         style="color: rgb(143, 135, 241);"
       >
         <span
@@ -936,12 +936,12 @@ exports[`renders components/breadcrumb/demo/style-class.tsx extend context corre
       </li>
       <li
         aria-hidden="true"
-        class="ant-breadcrumb-separator acss-t9kin8"
+        class="ant-breadcrumb-separator acss-1qxitnl"
       >
         /
       </li>
       <li
-        class="ant-breadcrumb-item acss-3btzkp"
+        class="ant-breadcrumb-item acss-11xwyle"
         style="color: rgb(143, 135, 241);"
       >
         <span
@@ -956,12 +956,12 @@ exports[`renders components/breadcrumb/demo/style-class.tsx extend context corre
       </li>
       <li
         aria-hidden="true"
-        class="ant-breadcrumb-separator acss-t9kin8"
+        class="ant-breadcrumb-separator acss-1qxitnl"
       >
         /
       </li>
       <li
-        class="ant-breadcrumb-item acss-3btzkp"
+        class="ant-breadcrumb-item acss-11xwyle"
         style="color: rgb(143, 135, 241);"
       >
         <span

components/breadcrumb/__tests__/__snapshots__/demo.test.ts.snap

@@ -525,12 +525,12 @@ exports[`renders components/breadcrumb/demo/style-class.tsx correctly 1`] = `
 >
   <nav
     aria-label="Breadcrumb with Object"
-    class="ant-breadcrumb acss-lz3q7n css-var-test-id"
+    class="ant-breadcrumb acss-14g82y5 css-var-test-id"
     style="border:1px solid #f0f0f0;padding:8px;border-radius:4px"
   >
     <ol>
       <li
-        class="ant-breadcrumb-item acss-3btzkp"
+        class="ant-breadcrumb-item acss-11xwyle"
         style="color:#1890ff"
       >
         <span
@@ -541,13 +541,13 @@ exports[`renders components/breadcrumb/demo/style-class.tsx correctly 1`] = `
       </li>
       <li
         aria-hidden="true"
-        class="ant-breadcrumb-separator acss-t9kin8"
+        class="ant-breadcrumb-separator acss-1qxitnl"
         style="color:rgba(0, 0, 0, 0.45)"
       >
         /
       </li>
       <li
-        class="ant-breadcrumb-item acss-3btzkp"
+        class="ant-breadcrumb-item acss-11xwyle"
         style="color:#1890ff"
       >
         <span
@@ -564,12 +564,12 @@ exports[`renders components/breadcrumb/demo/style-class.tsx correctly 1`] = `
   </nav>
   <nav
     aria-label="Breadcrumb with Function"
-    class="ant-breadcrumb acss-lz3q7n css-var-test-id"
+    class="ant-breadcrumb acss-14g82y5 css-var-test-id"
     style="border:1px solid #F5EFFF;padding:8px;border-radius:4px"
   >
     <ol>
       <li
-        class="ant-breadcrumb-item acss-3btzkp"
+        class="ant-breadcrumb-item acss-11xwyle"
         style="color:#8F87F1"
       >
         <span
@@ -580,12 +580,12 @@ exports[`renders components/breadcrumb/demo/style-class.tsx correctly 1`] = `
       </li>
       <li
         aria-hidden="true"
-        class="ant-breadcrumb-separator acss-t9kin8"
+        class="ant-breadcrumb-separator acss-1qxitnl"
       >
         /
       </li>
       <li
-        class="ant-breadcrumb-item acss-3btzkp"
+        class="ant-breadcrumb-item acss-11xwyle"
         style="color:#8F87F1"
       >
         <span
@@ -600,12 +600,12 @@ exports[`renders components/breadcrumb/demo/style-class.tsx correctly 1`] = `
       </li>
       <li
         aria-hidden="true"
-        class="ant-breadcrumb-separator acss-t9kin8"
+        class="ant-breadcrumb-separator acss-1qxitnl"
       >
         /
       </li>
       <li
-        class="ant-breadcrumb-item acss-3btzkp"
+        class="ant-breadcrumb-item acss-11xwyle"
         style="color:#8F87F1"
       >
         <span

components/breadcrumb/demo/style-class.tsx

@@ -1,12 +1,19 @@
 import React from 'react';
 import { Breadcrumb, Flex } from 'antd';
 import type { BreadcrumbProps } from 'antd';
-import { createStyles } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 
-const useStyles = createStyles(() => ({
-  root: { padding: 8, borderRadius: 4 },
-  item: { color: '#1890ff' },
-  separator: { color: 'rgba(0, 0, 0, 0.45)' },
+const classNames = createStaticStyles(({ css }) => ({
+  root: css`
+    padding: 8px;
+    border-radius: 4px;
+  `,
+  item: css`
+    color: #1890ff;
+  `,
+  separator: css`
+    color: rgba(0, 0, 0, 0.45);
+  `,
 }));
 
 const styles: BreadcrumbProps['styles'] = {
@@ -33,8 +40,6 @@ const items = [
 ];
 
 const App: React.FC = () => {
-  const { styles: classNames } = useStyles();
-
   return (
     <Flex vertical gap="middle">
       <Breadcrumb

components/breadcrumb/index.en-US.md

@@ -53,6 +53,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<[SemanticDOM](#semantic-dom), string> \| (info: { props })=> Record<[SemanticDOM](#semantic-dom), string> | - |  |
+| dropdownIcon | Custom dropdown icon | ReactNode | `<DownOutlined />` | 6.2.0 |
 | itemRender | Custom item renderer | (route, params, routes, paths) => ReactNode | - |  |
 | params | Routing parameters | object | - |  |
 | items | The routing stack information of router | [ItemType\[\]](#itemtype) | - | 5.3.0 |

components/breadcrumb/index.tsx

@@ -1,6 +1,23 @@
-import Breadcrumb from './Breadcrumb';
+import InternalBreadcrumb from './Breadcrumb';
+import BreadcrumbItem from './BreadcrumbItem';
+import BreadcrumbSeparator from './BreadcrumbSeparator';
 
-export type { BreadcrumbProps } from './Breadcrumb';
+export type {
+  BreadcrumbProps,
+  BreadcrumbSemanticClassNames,
+  BreadcrumbSemanticName,
+  BreadcrumbSemanticStyles,
+} from './Breadcrumb';
 export type { BreadcrumbItemProps, SeparatorType } from './BreadcrumbItem';
 
+type CompoundedComponent = typeof InternalBreadcrumb & {
+  Item: typeof BreadcrumbItem;
+  Separator: typeof BreadcrumbSeparator;
+};
+
+const Breadcrumb = InternalBreadcrumb as CompoundedComponent;
+
+Breadcrumb.Item = BreadcrumbItem;
+Breadcrumb.Separator = BreadcrumbSeparator;
+
 export default Breadcrumb;

components/breadcrumb/index.zh-CN.md

@@ -54,6 +54,7 @@ return <Breadcrumb routes={[{ breadcrumbName: 'sample' }]} />;
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | classNames | 用于自定义组件内部各语义化结构的 class，支持对象或函数 | Record<[SemanticDOM](#semantic-dom), string> \| (info: { props })=> Record<[SemanticDOM](#semantic-dom), string> | - |  |
+| dropdownIcon | 自定义下拉图标 | ReactNode | `<DownOutlined />` | 6.2.0 |
 | itemRender | 自定义链接函数，和 react-router 配置使用 | (route, params, routes, paths) => ReactNode | - |  |
 | params | 路由的参数 | object | - |  |
 | items | 路由栈信息 | [items\[\]](#itemtype) | - | 5.3.0 |

components/button/Button.tsx

@@ -29,11 +29,26 @@ import Compact from './style/compact';
 
 export type LegacyButtonType = ButtonType | 'danger';
 
-export type ButtonSemanticName = 'root' | 'icon' | 'content';
+export type ButtonSemanticName = keyof ButtonSemanticClassNames & keyof ButtonSemanticStyles;
 
-export type ButtonClassNamesType = SemanticClassNamesType<BaseButtonProps, ButtonSemanticName>;
+export type ButtonSemanticClassNames = {
+  root?: string;
+  icon?: string;
+  content?: string;
+};
 
-export type ButtonStylesType = SemanticStylesType<BaseButtonProps, ButtonSemanticName>;
+export type ButtonSemanticStyles = {
+  root?: React.CSSProperties;
+  icon?: React.CSSProperties;
+  content?: React.CSSProperties;
+};
+
+export type ButtonClassNamesType = SemanticClassNamesType<
+  BaseButtonProps,
+  ButtonSemanticClassNames
+>;
+
+export type ButtonStylesType = SemanticStylesType<BaseButtonProps, ButtonSemanticStyles>;
 
 export interface BaseButtonProps {
   type?: ButtonType;
@@ -316,7 +331,7 @@ const InternalCompoundedButton = React.forwardRef<
   // ========================== Size ==========================
   const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction);
 
-  const sizeClassNameMap = { large: 'lg', small: 'sm', middle: undefined };
+  const sizeClassNameMap = { large: 'lg', small: 'sm', middle: undefined, medium: undefined };
 
   const sizeFullName = useSize((ctxSize) => customizeSize ?? compactSize ?? groupSize ?? ctxSize);
 

components/button/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -977,6 +977,7 @@ exports[`renders components/button/demo/debug-icon.tsx extend context correctly
 Array [
   <div
     class="ant-radio-group ant-radio-group-outline css-var-test-id ant-radio-css-var"
+    role="radiogroup"
   >
     <label
       class="ant-radio-button-wrapper ant-radio-button-wrapper-checked css-var-test-id ant-radio-css-var"
@@ -2780,6 +2781,7 @@ Array [
     >
       <div
         class="ant-radio-group ant-radio-group-outline css-var-test-id ant-radio-css-var"
+        role="radiogroup"
       >
         <label
           class="ant-radio-button-wrapper css-var-test-id ant-radio-css-var"
@@ -4100,6 +4102,7 @@ exports[`renders components/button/demo/size.tsx extend context correctly 1`] =
 Array [
   <div
     class="ant-radio-group ant-radio-group-outline css-var-test-id ant-radio-css-var"
+    role="radiogroup"
   >
     <label
       class="ant-radio-button-wrapper ant-radio-button-wrapper-checked css-var-test-id ant-radio-css-var"

components/button/__tests__/__snapshots__/demo.test.ts.snap

@@ -959,6 +959,7 @@ exports[`renders components/button/demo/debug-icon.tsx correctly 1`] = `
 Array [
   <div
     class="ant-radio-group ant-radio-group-outline css-var-test-id ant-radio-css-var"
+    role="radiogroup"
   >
     <label
       class="ant-radio-button-wrapper ant-radio-button-wrapper-checked css-var-test-id ant-radio-css-var"
@@ -2586,6 +2587,7 @@ Array [
     >
       <div
         class="ant-radio-group ant-radio-group-outline css-var-test-id ant-radio-css-var"
+        role="radiogroup"
       >
         <label
           class="ant-radio-button-wrapper css-var-test-id ant-radio-css-var"
@@ -3573,6 +3575,7 @@ exports[`renders components/button/demo/size.tsx correctly 1`] = `
 Array [
   <div
     class="ant-radio-group ant-radio-group-outline css-var-test-id ant-radio-css-var"
+    role="radiogroup"
   >
     <label
       class="ant-radio-button-wrapper ant-radio-button-wrapper-checked css-var-test-id ant-radio-css-var"

components/button/__tests__/index.test.tsx

@@ -115,6 +115,23 @@ describe('Button', () => {
     expect(container.querySelector('.ant-btn')).toHaveClass('ant-btn-two-chinese-chars');
   });
 
+  // https://github.com/ant-design/ant-design/issues/56591
+  it('should preserve className when rendering two Chinese characters in child element', () => {
+    const { container } = render(
+      <Button>
+        <span className="custom-class" style={{ color: 'rgb(255, 0, 0)' }}>
+          按钮
+        </span>
+      </Button>,
+    );
+
+    const span = container.querySelector('span.custom-class');
+    expect(span).toBeTruthy();
+    expect(span).toHaveClass('custom-class');
+    expect(span).toHaveStyle({ color: 'rgb(255, 0, 0)' });
+    expect(span).toHaveTextContent('按 钮');
+  });
+
   // https://github.com/ant-design/ant-design/issues/18118
   it('should not insert space to link or text button', () => {
     const wrapper1 = render(<Button type="link">按钮</Button>);

components/button/buttonHelpers.tsx

@@ -7,6 +7,7 @@ import { PresetColors } from '../theme/interface';
 import type { BaseButtonProps, LegacyButtonType } from './Button';
 
 const rxTwoCNChar = /^[\u4E00-\u9FA5]{2}$/;
+
 export const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar);
 
 export function convertLegacyProps(
@@ -27,7 +28,7 @@ export function isUnBorderedButtonVariant(type?: ButtonVariantType) {
 }
 
 function splitCNCharsBySpace(
-  child: React.ReactElement | string | number,
+  child: React.ReactElement<any> | string | number,
   needInserted: boolean,
   style?: React.CSSProperties,
   className?: string,
@@ -42,20 +43,18 @@ function splitCNCharsBySpace(
     typeof child !== 'string' &&
     typeof child !== 'number' &&
     isString(child.type) &&
-    isTwoCNChar(
-      (
-        child as React.ReactElement<{
-          children: string;
-        }>
-      ).props.children,
-    )
+    isTwoCNChar((child as React.ReactElement<{ children: string }>).props.children)
   ) {
-    return cloneElement(child, (oriProps) => ({
-      ...oriProps,
-      children: oriProps.children.split('').join(SPACE),
-      className,
-      style,
-    }));
+    return cloneElement(child, (oriProps) => {
+      const mergedCls = clsx(oriProps.className, className) || undefined;
+      const mergedStyle: React.CSSProperties = { ...style, ...oriProps.style };
+      return {
+        ...oriProps,
+        children: oriProps.children.split('').join(SPACE),
+        className: mergedCls,
+        style: mergedStyle,
+      };
+    });
   }
 
   if (isString(child)) {