Merge branch 'master' into feature-merge-master

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

@@ -357,9 +357,9 @@ const GlobalDemoStyles: React.FC = () => {
         }
 
         ${antCls}-row-rtl {
-          #components-tooltip-demo-placement,
+          #tooltip-demo-placement,
-          #components-popover-demo-placement,
+          #popover-demo-placement,
-          #components-popconfirm-demo-placement {
+          #popconfirm-demo-placement {
             .code-box-demo {
               direction: ltr;
             }

.dumi/theme/common/styles/Markdown.tsx

@@ -389,7 +389,7 @@ const GlobalStyle: React.FC = () => {
         }
 
         .grid-demo,
-        [id^='components-grid-demo-'] {
+        [id^='grid-demo-'] {
           ${antCls}-row > div,
             .code-box-demo ${antCls}-row > div {
             min-height: 30px;
@@ -467,8 +467,8 @@ const GlobalStyle: React.FC = () => {
           }
         }
 
-        [id='components-grid-demo-playground'],
+        [id='grid-demo-playground'],
-        [id='components-grid-demo-gutter'] {
+        [id='grid-demo-gutter'] {
           > .code-box-demo ${antCls}-row > div {
             margin-top: 0;
             margin-bottom: 0;

.dumi/theme/layouts/GlobalLayout.tsx

@@ -35,6 +35,16 @@ export const ANT_DESIGN_NOT_SHOW_BANNER = 'ANT_DESIGN_NOT_SHOW_BANNER';
 //   (global as any).styleCache = styleCache;
 // }
 
+// Compatible with old anchors
+if (typeof window !== 'undefined') {
+  const hashId = location.hash.slice(1);
+  if (hashId.startsWith('components-')) {
+    if (!document.querySelector(`#${hashId}`)) {
+      location.hash = `#${hashId.replace(/^components-/, '')}`;
+    }
+  }
+}
+
 const getAlgorithm = (themes: ThemeName[] = []) =>
   themes
     .map((theme) => {

.dumi/theme/plugin.ts

@@ -39,6 +39,13 @@ export const getHash = (str: string, length = 8) =>
 class AntdReactTechStack extends ReactTechStack {
   // eslint-disable-next-line class-methods-use-this
   generatePreviewerProps(...[props, opts]: any) {
+    props.pkgDependencyList = { ...devDependencies, ...dependencies };
+    props.jsx ??= '';
+
+    if (opts.type === 'code-block') {
+      props.jsx = opts?.entryPointCode ? sylvanas.parseText(opts.entryPointCode) : '';
+    }
+
     if (opts.type === 'external') {
       // try to find md file with the same name as the demo tsx file
       const locale = opts.mdAbsPath.match(/index\.([a-z-]+)\.md$/i)?.[1];
@@ -48,7 +55,6 @@ class AntdReactTechStack extends ReactTechStack {
       const codePath = opts.fileAbsPath!.replace(/\.\w+$/, '.tsx');
       const code = fs.existsSync(codePath) ? fs.readFileSync(codePath, 'utf-8') : '';
 
-      props.pkgDependencyList = { ...devDependencies, ...dependencies };
       props.jsx = sylvanas.parseText(code);
 
       if (md) {

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

@@ -78,7 +78,13 @@ jobs:
       # Save PR id to output
       - name: save PR id
         id: pr
-        run: echo "id=$(<tmp/visual-regression-pr-id.txt)" >> $GITHUB_OUTPUT
+        run: |
+          pr_id=$(<tmp/visual-regression-pr-id.txt)
+          if ! [[ "$pr_id" =~ ^[0-9]+$ ]]; then
+            echo "Error: pr-id.txt does not contain a valid numeric PR id. Please check."
+            exit 1
+          fi
+          echo "id=$pr_id" >> $GITHUB_OUTPUT
 
       # Download report artifact
       - name: download report artifact
@@ -146,13 +152,15 @@ jobs:
       - name: Reset Commit Status
         uses: actions/github-script@v7
         if: ${{ steps.report.outcome == 'success' }}
+        env:
+          PR_ID: ${{ steps.pr.outputs.id }}
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           script: |
             const prResponse = await github.rest.pulls.get({
               owner: context.repo.owner,
               repo: context.repo.repo,
-              pull_number: ${{ steps.pr.outputs.id }},
+              pull_number: process.env.PR_ID,
             });
             const prHeadSha = prResponse.data.head.sha;
 

.husky/pre-commit

@@ -1,4 +1 @@
-#!/bin/sh
+lint-staged
-. "$(dirname "$0")/_/husky.sh"
-
-npx --no-install lint-staged

components/_util/responsiveObserver.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type { GlobalToken } from '../theme/interface';
+import type { GlobalToken } from '../theme/internal';
 import { useToken } from '../theme/internal';
 
 export type Breakpoint = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';

components/_util/wave/interface.ts

@@ -1,5 +1,5 @@
 import { defaultPrefixCls } from '../../config-provider';
-import type { GlobalToken } from '../../theme';
+import type { GlobalToken } from '../../theme/internal';
 
 export const TARGET_CLS = `${defaultPrefixCls}-wave-target`;
 

components/alert/design/behavior-pattern.tsx

@@ -16,12 +16,12 @@ const BehaviorPattern: React.FC = () => (
             {
               id: '707000085',
               label: '了解提示内容',
-              link: 'components-alert-index-tab-design-demo-content',
+              link: 'alert-index-tab-design-demo-content',
             },
             {
               id: '707000086',
               label: '了解提示类型',
-              link: 'components-alert-index-tab-design-demo-type',
+              link: 'alert-index-tab-design-demo-type',
             },
           ],
         },
@@ -29,7 +29,7 @@ const BehaviorPattern: React.FC = () => (
           id: '200000005',
           label: '针对提示进行操作',
           targetType: 'extension',
-          link: 'components-alert-index-tab-design-demo-action',
+          link: 'alert-index-tab-design-demo-action',
         },
       ],
     }}

components/anchor/__tests__/Anchor.test.tsx

@@ -67,12 +67,12 @@ describe('Anchor Render', () => {
         items={[
           {
             key: '1',
-            href: '#components-anchor-demo-basic',
+            href: '#anchor-demo-basic',
             title: 'Item Basic Demo',
           },
           {
             key: '2',
-            href: '#components-anchor-demo-static',
+            href: '#anchor-demo-static',
             title: 'Static demo',
           },
           {
@@ -101,8 +101,8 @@ describe('Anchor Render', () => {
     const linkTitles = Array.from(container.querySelector('.ant-anchor')?.childNodes!).map((n) =>
       (n as HTMLElement).querySelector('.ant-anchor-link-title'),
     );
-    expect((linkTitles[1] as HTMLAnchorElement).href).toContain('#components-anchor-demo-basic');
+    expect((linkTitles[1] as HTMLAnchorElement).href).toContain('#anchor-demo-basic');
-    expect((linkTitles[2] as HTMLAnchorElement).href).toContain('#components-anchor-demo-static');
+    expect((linkTitles[2] as HTMLAnchorElement).href).toContain('#anchor-demo-static');
     expect((linkTitles[3] as HTMLAnchorElement).href).toContain('#api');
     expect(
       (
@@ -127,12 +127,12 @@ describe('Anchor Render', () => {
         items={[
           {
             key: '1',
-            href: '#components-anchor-demo-basic',
+            href: '#anchor-demo-basic',
             title: 'Item Basic Demo',
           },
           {
             key: '2',
-            href: '#components-anchor-demo-static',
+            href: '#anchor-demo-static',
             title: 'Static demo',
           },
           {
@@ -147,8 +147,8 @@ describe('Anchor Render', () => {
     const linkTitles = Array.from(container.querySelector('.ant-anchor')?.childNodes!).map((n) =>
       (n as HTMLElement).querySelector('.ant-anchor-link-title'),
     );
-    expect((linkTitles[1] as HTMLAnchorElement).href).toContain('#components-anchor-demo-basic');
+    expect((linkTitles[1] as HTMLAnchorElement).href).toContain('#anchor-demo-basic');
-    expect((linkTitles[2] as HTMLAnchorElement).href).toContain('#components-anchor-demo-static');
+    expect((linkTitles[2] as HTMLAnchorElement).href).toContain('#anchor-demo-static');
     expect((linkTitles[3] as HTMLAnchorElement).href).toContain('#api');
     expect(asFragment().firstChild).toMatchSnapshot();
   });
@@ -159,7 +159,7 @@ describe('Anchor Render', () => {
         items={[
           {
             key: '1',
-            href: '#components-anchor-demo-basic',
+            href: '#anchor-demo-basic',
             title: 'Item Basic Demo',
           },
         ]}
@@ -170,7 +170,7 @@ describe('Anchor Render', () => {
     expect(container.querySelectorAll('.ant-anchor .ant-anchor-link').length).toBe(1);
     expect(
       (container.querySelector('.ant-anchor .ant-anchor-link-title') as HTMLAnchorElement).href,
-    ).toContain('#components-anchor-demo-basic');
+    ).toContain('#anchor-demo-basic');
     expect(asFragment().firstChild).toMatchSnapshot();
   });
 
@@ -694,12 +694,12 @@ describe('Anchor Render', () => {
           items={[
             {
               key: '1',
-              href: '#components-anchor-demo-basic',
+              href: '#anchor-demo-basic',
               title: 'Item Basic Demo',
             },
             {
               key: '2',
-              href: '#components-anchor-demo-static',
+              href: '#anchor-demo-static',
               title: 'Static demo',
             },
             {
@@ -725,12 +725,12 @@ describe('Anchor Render', () => {
           items={[
             {
               key: '1',
-              href: '#components-anchor-demo-basic',
+              href: '#anchor-demo-basic',
               title: 'Item Basic Demo',
             },
             {
               key: '2',
-              href: '#components-anchor-demo-static',
+              href: '#anchor-demo-static',
               title: 'Static demo',
             },
             {
@@ -759,8 +759,8 @@ describe('Anchor Render', () => {
     it('nested children via jsx should be filtered out when direction is horizontal', () => {
       const { container } = render(
         <Anchor direction="horizontal">
-          <Link href="#components-anchor-demo-basic" title="Basic demo" />
+          <Link href="#anchor-demo-basic" title="Basic demo" />
-          <Link href="#components-anchor-demo-static" title="Static demo" />
+          <Link href="#anchor-demo-static" title="Static demo" />
           <Link href="#api" title="API">
             <Link href="#anchor-props" title="Anchor Props" />
             <Link href="#link-props" title="Link Props" />
@@ -904,12 +904,12 @@ describe('Anchor Render', () => {
           items={[
             {
               key: '1',
-              href: '#components-anchor-demo-basic',
+              href: '#anchor-demo-basic',
               title: 'Item Basic Demo',
             },
             {
               key: '2',
-              href: '#components-anchor-demo-static',
+              href: '#anchor-demo-static',
               title: 'Static demo',
             },
             {
@@ -935,8 +935,8 @@ describe('Anchor Render', () => {
     it('deprecated jsx style', () => {
       render(
         <Anchor direction="horizontal">
-          <Link href="#components-anchor-demo-basic" title="Basic demo" />
+          <Link href="#anchor-demo-basic" title="Basic demo" />
-          <Link href="#components-anchor-demo-static" title="Static demo" />
+          <Link href="#anchor-demo-static" title="Static demo" />
         </Anchor>,
       );
       expect(errSpy).toHaveBeenCalledWith(
@@ -947,8 +947,8 @@ describe('Anchor Render', () => {
     it('deprecated jsx style for direction#vertical', () => {
       render(
         <Anchor>
-          <Link href="#components-anchor-demo-basic" title="Basic demo" />
+          <Link href="#anchor-demo-basic" title="Basic demo" />
-          <Link href="#components-anchor-demo-static" title="Static demo" />
+          <Link href="#anchor-demo-static" title="Static demo" />
         </Anchor>,
       );
       expect(errSpy).toHaveBeenCalledWith(

components/anchor/__tests__/__snapshots__/Anchor.test.tsx.snap

@@ -20,7 +20,7 @@ exports[`Anchor Render render items and ignore jsx children 1`] = `
         >
           <a
             class="ant-anchor-link-title"
-            href="#components-anchor-demo-basic"
+            href="#anchor-demo-basic"
             title="Item Basic Demo"
           >
             Item Basic Demo
@@ -52,7 +52,7 @@ exports[`Anchor Render renders items correctly 1`] = `
         >
           <a
             class="ant-anchor-link-title"
-            href="#components-anchor-demo-basic"
+            href="#anchor-demo-basic"
             title="Item Basic Demo"
           >
             Item Basic Demo
@@ -63,7 +63,7 @@ exports[`Anchor Render renders items correctly 1`] = `
         >
           <a
             class="ant-anchor-link-title"
-            href="#components-anchor-demo-static"
+            href="#anchor-demo-static"
             title="Static demo"
           >
             Static demo
@@ -128,7 +128,7 @@ exports[`Anchor Render renders items correctly#horizontal 1`] = `
         >
           <a
             class="ant-anchor-link-title"
-            href="#components-anchor-demo-basic"
+            href="#anchor-demo-basic"
             title="Item Basic Demo"
           >
             Item Basic Demo
@@ -139,7 +139,7 @@ exports[`Anchor Render renders items correctly#horizontal 1`] = `
         >
           <a
             class="ant-anchor-link-title"
-            href="#components-anchor-demo-static"
+            href="#anchor-demo-static"
             title="Static demo"
           >
             Static demo

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

@@ -179,7 +179,7 @@ exports[`renders components/anchor/demo/customizeHighlight.tsx extend context co
     >
       <a
         class="ant-anchor-link-title"
-        href="#components-anchor-demo-basic"
+        href="#anchor-demo-basic"
         title="Basic demo"
       >
         Basic demo
@@ -190,7 +190,7 @@ exports[`renders components/anchor/demo/customizeHighlight.tsx extend context co
     >
       <a
         class="ant-anchor-link-title ant-anchor-link-title-active"
-        href="#components-anchor-demo-static"
+        href="#anchor-demo-static"
         title="Static demo"
       >
         Static demo
@@ -328,7 +328,7 @@ exports[`renders components/anchor/demo/legacy-anchor.tsx extend context correct
     >
       <a
         class="ant-anchor-link-title"
-        href="#components-anchor-demo-basic"
+        href="#anchor-demo-basic"
         title="Basic demo"
       >
         Basic demo
@@ -339,7 +339,7 @@ exports[`renders components/anchor/demo/legacy-anchor.tsx extend context correct
     >
       <a
         class="ant-anchor-link-title"
-        href="#components-anchor-demo-static"
+        href="#anchor-demo-static"
         title="Static demo"
       >
         Static demo
@@ -404,7 +404,7 @@ exports[`renders components/anchor/demo/onChange.tsx extend context correctly 1`
     >
       <a
         class="ant-anchor-link-title"
-        href="#components-anchor-demo-basic"
+        href="#anchor-demo-basic"
         title="Basic demo"
       >
         Basic demo
@@ -415,7 +415,7 @@ exports[`renders components/anchor/demo/onChange.tsx extend context correctly 1`
     >
       <a
         class="ant-anchor-link-title"
-        href="#components-anchor-demo-static"
+        href="#anchor-demo-static"
         title="Static demo"
       >
         Static demo
@@ -476,7 +476,7 @@ exports[`renders components/anchor/demo/onClick.tsx extend context correctly 1`]
     >
       <a
         class="ant-anchor-link-title"
-        href="#components-anchor-demo-basic"
+        href="#anchor-demo-basic"
         title="Basic demo"
       >
         Basic demo
@@ -487,7 +487,7 @@ exports[`renders components/anchor/demo/onClick.tsx extend context correctly 1`]
     >
       <a
         class="ant-anchor-link-title"
-        href="#components-anchor-demo-static"
+        href="#anchor-demo-static"
         title="Static demo"
       >
         Static demo
@@ -629,7 +629,7 @@ exports[`renders components/anchor/demo/static.tsx extend context correctly 1`]
     >
       <a
         class="ant-anchor-link-title"
-        href="#components-anchor-demo-basic"
+        href="#anchor-demo-basic"
         title="Basic demo"
       >
         Basic demo
@@ -640,7 +640,7 @@ exports[`renders components/anchor/demo/static.tsx extend context correctly 1`]
     >
       <a
         class="ant-anchor-link-title"
-        href="#components-anchor-demo-static"
+        href="#anchor-demo-static"
         title="Static demo"
       >
         Static demo

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

@@ -172,7 +172,7 @@ exports[`renders components/anchor/demo/customizeHighlight.tsx correctly 1`] = `
     >
       <a
         class="ant-anchor-link-title"
-        href="#components-anchor-demo-basic"
+        href="#anchor-demo-basic"
         title="Basic demo"
       >
         Basic demo
@@ -183,7 +183,7 @@ exports[`renders components/anchor/demo/customizeHighlight.tsx correctly 1`] = `
     >
       <a
         class="ant-anchor-link-title"
-        href="#components-anchor-demo-static"
+        href="#anchor-demo-static"
         title="Static demo"
       >
         Static demo
@@ -316,7 +316,7 @@ exports[`renders components/anchor/demo/legacy-anchor.tsx correctly 1`] = `
     >
       <a
         class="ant-anchor-link-title"
-        href="#components-anchor-demo-basic"
+        href="#anchor-demo-basic"
         title="Basic demo"
       >
         Basic demo
@@ -327,7 +327,7 @@ exports[`renders components/anchor/demo/legacy-anchor.tsx correctly 1`] = `
     >
       <a
         class="ant-anchor-link-title"
-        href="#components-anchor-demo-static"
+        href="#anchor-demo-static"
         title="Static demo"
       >
         Static demo
@@ -386,7 +386,7 @@ exports[`renders components/anchor/demo/onChange.tsx correctly 1`] = `
     >
       <a
         class="ant-anchor-link-title"
-        href="#components-anchor-demo-basic"
+        href="#anchor-demo-basic"
         title="Basic demo"
       >
         Basic demo
@@ -397,7 +397,7 @@ exports[`renders components/anchor/demo/onChange.tsx correctly 1`] = `
     >
       <a
         class="ant-anchor-link-title"
-        href="#components-anchor-demo-static"
+        href="#anchor-demo-static"
         title="Static demo"
       >
         Static demo
@@ -456,7 +456,7 @@ exports[`renders components/anchor/demo/onClick.tsx correctly 1`] = `
     >
       <a
         class="ant-anchor-link-title"
-        href="#components-anchor-demo-basic"
+        href="#anchor-demo-basic"
         title="Basic demo"
       >
         Basic demo
@@ -467,7 +467,7 @@ exports[`renders components/anchor/demo/onClick.tsx correctly 1`] = `
     >
       <a
         class="ant-anchor-link-title"
-        href="#components-anchor-demo-static"
+        href="#anchor-demo-static"
         title="Static demo"
       >
         Static demo
@@ -604,7 +604,7 @@ exports[`renders components/anchor/demo/static.tsx correctly 1`] = `
     >
       <a
         class="ant-anchor-link-title"
-        href="#components-anchor-demo-basic"
+        href="#anchor-demo-basic"
         title="Basic demo"
       >
         Basic demo
@@ -615,7 +615,7 @@ exports[`renders components/anchor/demo/static.tsx correctly 1`] = `
     >
       <a
         class="ant-anchor-link-title"
-        href="#components-anchor-demo-static"
+        href="#anchor-demo-static"
         title="Static demo"
       >
         Static demo

components/anchor/demo/customizeHighlight.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Anchor } from 'antd';
 
-const getCurrentAnchor = () => '#components-anchor-demo-static';
+const getCurrentAnchor = () => '#anchor-demo-static';
 
 const App: React.FC = () => (
   <Anchor
@@ -10,12 +10,12 @@ const App: React.FC = () => (
     items={[
       {
         key: '1',
-        href: '#components-anchor-demo-basic',
+        href: '#anchor-demo-basic',
         title: 'Basic demo',
       },
       {
         key: '2',
-        href: '#components-anchor-demo-static',
+        href: '#anchor-demo-static',
         title: 'Static demo',
       },
       {

components/anchor/demo/legacy-anchor.tsx

@@ -5,8 +5,8 @@ const { Link } = Anchor;
 
 const App: React.FC = () => (
   <Anchor affix={false}>
-    <Link href="#components-anchor-demo-basic" title="Basic demo" />
+    <Link href="#anchor-demo-basic" title="Basic demo" />
-    <Link href="#components-anchor-demo-static" title="Static demo" />
+    <Link href="#anchor-demo-static" title="Static demo" />
     <Link href="#api" title="API">
       <Link href="#anchor-props" title="Anchor Props" />
       <Link href="#link-props" title="Link Props" />

components/anchor/demo/onChange.tsx

@@ -12,12 +12,12 @@ const App: React.FC = () => (
     items={[
       {
         key: '1',
-        href: '#components-anchor-demo-basic',
+        href: '#anchor-demo-basic',
         title: 'Basic demo',
       },
       {
         key: '2',
-        href: '#components-anchor-demo-static',
+        href: '#anchor-demo-static',
         title: 'Static demo',
       },
       {

components/anchor/demo/onClick.tsx

@@ -19,12 +19,12 @@ const App: React.FC = () => (
     items={[
       {
         key: '1',
-        href: '#components-anchor-demo-basic',
+        href: '#anchor-demo-basic',
         title: 'Basic demo',
       },
       {
         key: '2',
-        href: '#components-anchor-demo-static',
+        href: '#anchor-demo-static',
         title: 'Static demo',
       },
       {

components/anchor/demo/static.tsx

@@ -7,12 +7,12 @@ const App: React.FC = () => (
     items={[
       {
         key: '1',
-        href: '#components-anchor-demo-basic',
+        href: '#anchor-demo-basic',
         title: 'Basic demo',
       },
       {
         key: '2',
-        href: '#components-anchor-demo-static',
+        href: '#anchor-demo-static',
         title: 'Static demo',
       },
       {

components/anchor/index.en-US.md

@@ -46,7 +46,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | getCurrentAnchor | Customize the anchor highlight | (activeLink: string) => string | - |  |
 | offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 |  |
 | showInkInFixed | Whether show ink-square when `affix={false}` | boolean | false |  |
-| targetOffset | Anchor scroll offset, default as `offsetTop`, [example](#components-anchor-demo-targetoffset) | number | - |  |
+| targetOffset | Anchor scroll offset, default as `offsetTop`, [example](#anchor-demo-targetoffset) | number | - |  |
 | onChange | Listening for anchor link change | (currentActiveLink: string) => void |  |  |
 | onClick | Set the handler to handle `click` event | (e: MouseEvent, link: object) => void | - |  |
 | items | Data configuration option content, support nesting through children | { key, href, title, target, children }\[] [see](#anchoritem) | - | 5.1.0 |

components/anchor/index.zh-CN.md

@@ -47,7 +47,7 @@ group:
 | getCurrentAnchor | 自定义高亮的锚点 | (activeLink: string) => string | - |  |
 | offsetTop | 距离窗口顶部达到指定偏移量后触发 | number |  |  |
 | showInkInFixed | `affix={false}` 时是否显示小方块 | boolean | false |  |
-| targetOffset | 锚点滚动偏移量，默认与 offsetTop 相同，[例子](#components-anchor-demo-targetoffset) | number | - |  |
+| targetOffset | 锚点滚动偏移量，默认与 offsetTop 相同，[例子](#anchor-demo-targetoffset) | number | - |  |
 | onChange | 监听锚点链接改变 | (currentActiveLink: string) => void | - |  |
 | onClick | `click` 事件的 handler | (e: MouseEvent, link: object) => void | - |  |
 | items | 数据化配置选项内容，支持通过 children 嵌套 | { key, href, title, target, children }\[] [具体见](#anchoritem) | - | 5.1.0 |

components/badge/style/index.ts

@@ -1,9 +1,13 @@
 import { Keyframes, unit } from '@ant-design/cssinjs';
 
 import { resetComponent } from '../../style';
-import type { FullToken, GenerateStyle } from '../../theme/internal';
+import type {
+  FullToken,
+  GenerateStyle,
+  GenStyleFn,
+  GetDefaultToken,
+} from '../../theme/internal';
 import { genPresetColor, genStyleHooks, mergeToken } from '../../theme/internal';
-import type { GenStyleFn, GetDefaultToken } from '../../theme/util/genComponentStyleHook';
 
 /** Component only token. Which will handle additional calculation of alias token */
 export interface ComponentToken {

components/breadcrumb/design/behavior-pattern.tsx

@@ -16,12 +16,12 @@ const BehaviorPattern: React.FC = () => (
             {
               id: '707000085',
               label: '了解当前页面的位置',
-              link: 'components-breadcrumb-index-tab-design-demo-basic',
+              link: 'breadcrumb-index-tab-design-demo-basic',
             },
             {
               id: '707000086',
               label: '了解系统层级结构',
-              link: 'components-breadcrumb-index-tab-design-demo-basic',
+              link: 'breadcrumb-index-tab-design-demo-basic',
             },
           ],
         },
@@ -29,13 +29,13 @@ const BehaviorPattern: React.FC = () => (
           id: '200000005',
           label: '向上导航',
           targetType: 'mvp',
-          link: 'components-breadcrumb-index-tab-design-demo-basic',
+          link: 'breadcrumb-index-tab-design-demo-basic',
         },
         {
           id: '200000006',
           label: '快捷导航',
           targetType: 'extension',
-          link: 'components-breadcrumb-index-tab-design-demo-overlay',
+          link: 'breadcrumb-index-tab-design-demo-overlay',
         },
       ],
     }}

components/button/demo/multiple.md

@@ -1,7 +1,7 @@
 ## zh-CN
 
-按钮组合使用时，推荐使用 1 个主操作 + n 个次操作，3 个以上操作时把更多操作放到 [Dropdown.Button](/components/dropdown-cn/#components-dropdown-demo-dropdown-button) 中组合使用。
+按钮组合使用时，推荐使用 1 个主操作 + n 个次操作，3 个以上操作时把更多操作放到 [Dropdown.Button](/components/dropdown-cn/#dropdown-demo-dropdown-button) 中组合使用。
 
 ## en-US
 
-If you need several buttons, we recommend that you use 1 primary button + n secondary buttons. If there are more than three operations, you can group some of them into a [Dropdown.Button](/components/dropdown/#components-dropdown-demo-dropdown-button).
+If you need several buttons, we recommend that you use 1 primary button + n secondary buttons. If there are more than three operations, you can group some of them into a [Dropdown.Button](/components/dropdown/#dropdown-demo-dropdown-button).

components/button/style/token.ts

@@ -1,8 +1,11 @@
 import type { CSSProperties } from 'react';
 
-import type { FullToken, GetDefaultToken } from '../../theme/internal';
+import type {
+  FullToken,
+  GetDefaultToken,
+  GenStyleFn,
+} from '../../theme/internal';
 import { getLineHeight, mergeToken } from '../../theme/internal';
-import type { GenStyleFn } from '../../theme/util/genComponentStyleHook';
 
 /** Component only token. Which will handle additional calculation of alias token */
 export interface ComponentToken {

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

@@ -7963,11 +7963,7 @@ exports[`renders components/calendar/demo/customize-header.tsx extend context co
 </div>
 `;
 
-exports[`renders components/calendar/demo/customize-header.tsx extend context correctly 2`] = `
+exports[`renders components/calendar/demo/customize-header.tsx extend context correctly 2`] = `[]`;
-[
-  "Warning: [antd: Select] \`dropdownMatchSelectWidth\` is deprecated. Please use \`popupMatchSelectWidth\` instead.",
-]
-`;
 
 exports[`renders components/calendar/demo/notice-calendar.tsx extend context correctly 1`] = `
 <div

components/calendar/__tests__/index.test.tsx

@@ -371,7 +371,7 @@ describe('Calendar', () => {
       return (
         <Select
           size="small"
-          dropdownMatchSelectWidth={false}
+          popupMatchSelectWidth={false}
           className="my-year-select"
           onChange={onYearChange}
           value={String(year)}
@@ -415,7 +415,7 @@ describe('Calendar', () => {
       return (
         <Select
           size="small"
-          dropdownMatchSelectWidth={false}
+          popupMatchSelectWidth={false}
           className="my-month-select"
           onChange={onMonthChange}
           value={String(month)}

components/calendar/demo/customize-header.tsx

@@ -75,7 +75,7 @@ const App: React.FC = () => {
                 <Col>
                   <Select
                     size="small"
-                    dropdownMatchSelectWidth={false}
+                    popupMatchSelectWidth={false}
                     className="my-year-select"
                     value={year}
                     onChange={(newYear) => {
@@ -89,7 +89,7 @@ const App: React.FC = () => {
                 <Col>
                   <Select
                     size="small"
-                    dropdownMatchSelectWidth={false}
+                    popupMatchSelectWidth={false}
                     value={month}
                     onChange={(newMonth) => {
                       const now = value.clone().month(newMonth);

components/calendar/demo/lunar.tsx

@@ -209,7 +209,7 @@ const App: React.FC = () => {
               <Col>
                 <Select
                   size="small"
-                  dropdownMatchSelectWidth={false}
+                  popupMatchSelectWidth={false}
                   className="my-year-select"
                   value={year}
                   options={options}
@@ -222,7 +222,7 @@ const App: React.FC = () => {
               <Col>
                 <Select
                   size="small"
-                  dropdownMatchSelectWidth={false}
+                  popupMatchSelectWidth={false}
                   value={month}
                   options={monthOptions}
                   onChange={(newMonth) => {

components/cascader/style/index.ts

@@ -1,8 +1,7 @@
 import type { CSSProperties } from 'react';
 
 import { genCompactItemStyle } from '../../style/compact-item';
-import type { GlobalToken } from '../../theme';
+import type { FullToken, GenerateStyle, GlobalToken } from '../../theme/internal';
-import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genStyleHooks } from '../../theme/internal';
 import getColumnsStyle from './columns';
 

components/collapse/demo/collapsible.md

@@ -7,7 +7,7 @@
 Specify the trigger area of collapsible by `collapsible`.
 
 <style>
-#components-collapse-demo-collapsible .ant-space {
+#collapse-demo-collapsible .ant-space {
   width: 100%;
 }
 </style>

components/collapse/index.en-US.md

@@ -79,7 +79,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | accordion | If true, Collapse renders as Accordion | boolean | false |  |
-| activeKey | Key of the active panel | string\[] \| string <br/> number\[] \| number | No default value. In [accordion mode](#components-collapse-demo-accordion), it's the key of the first panel |  |
+| activeKey | Key of the active panel | string\[] \| string <br/> number\[] \| number | No default value. In [accordion mode](#collapse-demo-accordion), it's the key of the first panel |  |
 | bordered | Toggles rendering of the border around the collapse block | boolean | true |  |
 | collapsible | Specify whether the panels of children be collapsible or the trigger area of collapsible | `header` \| `icon` \| `disabled` | - | 4.9.0 |
 | defaultActiveKey | Key of the initial active panel | string\[] \| string <br/> number\[] \| number | - |  |

components/collapse/index.zh-CN.md

@@ -80,7 +80,7 @@ const items: CollapseProps['items'] = [
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | accordion | 手风琴模式 | boolean | false |  |
-| activeKey | 当前激活 tab 面板的 key | string\[] \| string <br/> number\[] \| number | [手风琴模式](#components-collapse-demo-accordion)下默认第一个元素 |  |
+| activeKey | 当前激活 tab 面板的 key | string\[] \| string <br/> number\[] \| number | [手风琴模式](#collapse-demo-accordion)下默认第一个元素 |  |
 | bordered | 带边框风格的折叠面板 | boolean | true |  |
 | collapsible | 所有子面板是否可折叠或指定可折叠触发区域 | `header` \| `icon` \| `disabled` | - | 4.9.0 |
 | defaultActiveKey | 初始化选中面板的 key | string\[] \| string<br/> number\[] \| number | - |  |

components/config-provider/__tests__/theme.test.tsx

@@ -7,7 +7,7 @@ import { Button, InputNumber, Select } from '../..';
 import { resetWarned } from '../../_util/warning';
 import { render } from '../../../tests/utils';
 import theme from '../../theme';
-import type { GlobalToken } from '../../theme';
+import type { GlobalToken } from '../../theme/internal';
 import { useToken } from '../../theme/internal';
 
 const { defaultAlgorithm, darkAlgorithm, compactAlgorithm } = theme;

components/config-provider/index.en-US.md

@@ -55,7 +55,7 @@ Some components use dynamic style to support wave effect. You can config `csp` p
 | componentDisabled | Config antd component `disabled` | boolean | - | 4.21.0 |
 | componentSize | Config antd component size | `small` \| `middle` \| `large` | - |  |
 | csp | Set [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) config | { nonce: string } | - |  |
-| direction | Set direction of layout. See [demo](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` |  |
+| direction | Set direction of layout. See [demo](#config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` |  |
 | getPopupContainer | To set the container of the popup element. The default is to create a `div` element in `body` | function(triggerNode) | () => document.body |  |
 | getTargetContainer | Config Affix, Anchor scroll target container | () => HTMLElement | () => window | 4.2.0 |
 | iconPrefixCls | Set icon prefix className | string | `anticon` | 4.11.0 |

components/config-provider/index.zh-CN.md

@@ -56,7 +56,7 @@ export default Demo;
 | componentDisabled | 设置 antd 组件禁用状态 | boolean | - | 4.21.0 |
 | componentSize | 设置 antd 组件大小 | `small` \| `middle` \| `large` | - |  |
 | csp | 设置 [Content Security Policy](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP) 配置 | { nonce: string } | - |  |
-| direction | 设置文本展示方向。 [示例](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` |  |
+| direction | 设置文本展示方向。 [示例](#config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` |  |
 | getPopupContainer | 弹出框（Select, Tooltip, Menu 等等）渲染父节点，默认渲染到 body 上。 | function(triggerNode) | () => document.body |  |
 | getTargetContainer | 配置 Affix、Anchor 滚动监听容器。 | () => HTMLElement | () => window | 4.2.0 |
 | iconPrefixCls | 设置图标统一样式前缀 | string | `anticon` | 4.11.0 |

components/date-picker/design/behavior-pattern.tsx

@@ -16,32 +16,32 @@ const BehaviorPattern: React.FC = () => (
             {
               id: '707000085',
               label: '选择某天',
-              link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-date',
+              link: 'date-picker-index-tab-design-zh-cn-demo-pick-date',
             },
             {
               id: '707000086',
               label: '选择某周',
-              link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-week',
+              link: 'date-picker-index-tab-design-zh-cn-demo-pick-week',
             },
             {
               id: '707000087',
               label: '选择某月',
-              link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-month',
+              link: 'date-picker-index-tab-design-zh-cn-demo-pick-month',
             },
             {
               id: '707000088',
               label: '选择某季度',
-              link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-quarter',
+              link: 'date-picker-index-tab-design-zh-cn-demo-pick-quarter',
             },
             {
               id: '707000089',
               label: '选择某年',
-              link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-year',
+              link: 'date-picker-index-tab-design-zh-cn-demo-pick-year',
             },
             {
               id: '707000090',
               label: '选择某时间',
-              link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-time',
+              link: 'date-picker-index-tab-design-zh-cn-demo-pick-time',
             },
           ],
         },
@@ -53,32 +53,32 @@ const BehaviorPattern: React.FC = () => (
             {
               id: '7070000851',
               label: '选择某天至某天',
-              link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-date-range',
+              link: 'date-picker-index-tab-design-zh-cn-demo-pick-date-range',
             },
             {
               id: '7070000861',
               label: '选择某周至某周',
-              link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-week-range',
+              link: 'date-picker-index-tab-design-zh-cn-demo-pick-week-range',
             },
             {
               id: '7070000871',
               label: '选择某月至某月',
-              link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-month-range',
+              link: 'date-picker-index-tab-design-zh-cn-demo-pick-month-range',
             },
             {
               id: '7070000881',
               label: '选择某季度至某季度',
-              link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-quarter-range',
+              link: 'date-picker-index-tab-design-zh-cn-demo-pick-quarter-range',
             },
             {
               id: '7070000891',
               label: '选择某年至某年',
-              link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-year-range',
+              link: 'date-picker-index-tab-design-zh-cn-demo-pick-year-range',
             },
             {
               id: '7070000901',
               label: '选择某时间至某时间',
-              link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-time-range',
+              link: 'date-picker-index-tab-design-zh-cn-demo-pick-time-range',
             },
           ],
         },
@@ -90,12 +90,12 @@ const BehaviorPattern: React.FC = () => (
             {
               id: '70700008912',
               label: '快捷选择时间点',
-              link: 'components-date-picker-index-tab-design-zh-cn-demo-preset-time',
+              link: 'date-picker-index-tab-design-zh-cn-demo-preset-time',
             },
             {
               id: '70700009012',
               label: '快捷选择时间段',
-              link: 'components-date-picker-index-tab-design-zh-cn-demo-preset-range',
+              link: 'date-picker-index-tab-design-zh-cn-demo-preset-range',
             },
           ],
         },
@@ -103,7 +103,7 @@ const BehaviorPattern: React.FC = () => (
           id: '200000007',
           label: '查看日期附属信息',
           targetType: 'extension',
-          link: 'components-date-picker-index-tab-design-zh-cn-demo-date-extra-info',
+          link: 'date-picker-index-tab-design-zh-cn-demo-date-extra-info',
         },
       ],
     }}

components/date-picker/index.en-US.md

@@ -99,7 +99,7 @@ The following APIs are shared by DatePicker, RangePicker.
 | components | Custom panels | Record<Panel \| 'input', React.ComponentType> | - | 5.14.0 |
 | disabled | Determine whether the DatePicker is disabled | boolean | false |  |
 | disabledDate | Specify the date that cannot be selected | (currentDate: dayjs, info: { from?: dayjs }) => boolean | - | `info`: 5.14.0 |
-| format | To set the date format, support multi-format matching when it is an array, display the first one shall prevail. refer to [dayjs#format](https://day.js.org/docs/en/display/format). for example: [Custom Format](#components-date-picker-demo-format) | [formatType](#formattype) | [rc-picker](https://github.com/react-component/picker/blob/f512f18ed59d6791280d1c3d7d37abbb9867eb0b/src/utils/uiUtil.ts#L155-L177) |  |
+| format | To set the date format, support multi-format matching when it is an array, display the first one shall prevail. refer to [dayjs#format](https://day.js.org/docs/en/display/format). for example: [Custom Format](#date-picker-demo-format) | [formatType](#formattype) | [rc-picker](https://github.com/react-component/picker/blob/f512f18ed59d6791280d1c3d7d37abbb9867eb0b/src/utils/uiUtil.ts#L155-L177) |  |
 | order | Auto order date when multiple or range selection | boolean | true | 5.14.0 |
 | popupClassName | To customize the className of the popup calendar | string | - | 4.23.0 |
 | preserveInvalidOnBlur | Not clean input on blur even when the typing is invalidate | boolean | false | 5.14.0 |
@@ -149,7 +149,7 @@ The following APIs are shared by DatePicker, RangePicker.
 | renderExtraFooter | Render extra footer in panel | (mode) => React.ReactNode | - |  |
 | showNow | Show the fast access of current datetime | boolean | - | 4.4.0 |
 | showTime | To provide an additional time selection | object \| boolean | [TimePicker Options](/components/time-picker/#api) |  |
-| showTime.defaultValue | To set default time of selected date, [demo](#components-date-picker-demo-disabled-date) | [dayjs](https://day.js.org/) | dayjs() |  |
+| showTime.defaultValue | To set default time of selected date, [demo](#date-picker-demo-disabled-date) | [dayjs](https://day.js.org/) | dayjs() |  |
 | showWeek | Show week info when in DatePicker | boolean | false | 5.14.0 |
 | value | To set date | [dayjs](https://day.js.org/) | - |  |
 | onChange | Callback function, can be executed when the selected time is changing | function(date: dayjs, dateString: string) | - |  |
@@ -220,7 +220,7 @@ Added in `4.1.0`.
 | renderExtraFooter | Render extra footer in panel | () => React.ReactNode | - |  |
 | separator | Set separator between inputs | React.ReactNode | `<SwapRightOutlined />` |  |
 | showTime | To provide an additional time selection | object \| boolean | [TimePicker Options](/components/time-picker/#api) |  |
-| showTime.defaultValue | To set default time of selected date, [demo](#components-date-picker-demo-disabled-date) | [dayjs](https://day.js.org/)\[] | \[dayjs(), dayjs()] |  |
+| showTime.defaultValue | To set default time of selected date, [demo](#date-picker-demo-disabled-date) | [dayjs](https://day.js.org/)\[] | \[dayjs(), dayjs()] |  |
 | value | To set date | \[[dayjs](https://day.js.org/), [dayjs](https://day.js.org/)] | - |  |
 | onCalendarChange | Callback function, can be executed when the start time or the end time of the range is changing. `info` argument is added in 4.4.0 | function(dates: \[dayjs, dayjs], dateStrings: \[string, string], info: { range:`start`\|`end` }) | - |  |
 | onChange | Callback function, can be executed when the selected time is changing | function(dates: \[dayjs, dayjs], dateStrings: \[string, string]) | - |  |

components/date-picker/index.zh-CN.md

@@ -100,7 +100,7 @@ dayjs.locale('zh-cn');
 | components | 自定义面板 | Record<Panel \| 'input', React.ComponentType> | - | 5.14.0 |
 | disabled | 禁用 | boolean | false |  |
 | disabledDate | 不可选择的日期 | (currentDate: dayjs, info: { from?: dayjs }) => boolean | - | `info`: 5.14.0 |
-| format | 设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 [dayjs#format](https://day.js.org/docs/zh-CN/display/format#%E6%94%AF%E6%8C%81%E7%9A%84%E6%A0%BC%E5%BC%8F%E5%8C%96%E5%8D%A0%E4%BD%8D%E7%AC%A6%E5%88%97%E8%A1%A8)。示例：[自定义格式](#components-date-picker-demo-format) | [formatType](#formattype) | [rc-picker](https://github.com/react-component/picker/blob/f512f18ed59d6791280d1c3d7d37abbb9867eb0b/src/utils/uiUtil.ts#L155-L177) |  |
+| format | 设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 [dayjs#format](https://day.js.org/docs/zh-CN/display/format#%E6%94%AF%E6%8C%81%E7%9A%84%E6%A0%BC%E5%BC%8F%E5%8C%96%E5%8D%A0%E4%BD%8D%E7%AC%A6%E5%88%97%E8%A1%A8)。示例：[自定义格式](#date-picker-demo-format) | [formatType](#formattype) | [rc-picker](https://github.com/react-component/picker/blob/f512f18ed59d6791280d1c3d7d37abbb9867eb0b/src/utils/uiUtil.ts#L155-L177) |  |
 | order | 多选、范围时是否自动排序 | boolean | true | 5.14.0 |
 | preserveInvalidOnBlur | 失去焦点是否要清空输入框内无效内容 | boolean | false | 5.14.0 |
 | popupClassName | 额外的弹出日历 className | string | - | 4.23.0 |
@@ -150,7 +150,7 @@ dayjs.locale('zh-cn');
 | renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - |  |
 | showNow | 显示当前日期时间的快捷选择 | boolean | - |  |
 | showTime | 增加时间选择功能 | Object \| boolean | [TimePicker Options](/components/time-picker-cn#api) |  |
-| showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](#components-date-picker-demo-disabled-date) | [dayjs](https://day.js.org/) | dayjs() |  |
+| showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](#date-picker-demo-disabled-date) | [dayjs](https://day.js.org/) | dayjs() |  |
 | showWeek | DatePicker 下展示当前周 | boolean | false | 5.14.0 |
 | value | 日期 | [dayjs](https://day.js.org/) | - |  |
 | onChange | 时间发生变化的回调 | function(date: dayjs, dateString: string) | - |  |
@@ -221,7 +221,7 @@ dayjs.locale('zh-cn');
 | renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - |  |
 | separator | 设置分隔符 | React.ReactNode | `<SwapRightOutlined />` |  |
 | showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](/components/time-picker-cn#api) |  |
-| showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](#components-date-picker-demo-disabled-date) | [dayjs](https://day.js.org/)\[] | \[dayjs(), dayjs()] |  |
+| showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](#date-picker-demo-disabled-date) | [dayjs](https://day.js.org/)\[] | \[dayjs(), dayjs()] |  |
 | value | 日期 | [dayjs](https://day.js.org/)\[] | - |  |
 | onCalendarChange | 待选日期发生变化的回调。`info` 参数自 4.4.0 添加 | function(dates: \[dayjs, dayjs], dateStrings: \[string, string], info: { range:`start`\|`end` }) | - |  |
 | onChange | 日期范围发生变化的回调 | function(dates: \[dayjs, dayjs], dateStrings: \[string, string]) | - |  |

components/date-picker/style/panel.ts

@@ -214,6 +214,15 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
               ${componentCls}-super-next-icon`]: {
             transform: 'rotate(-135deg)',
           },
+
+          [`${componentCls}-time-panel`]: {
+            [`${componentCls}-content`]: {
+              direction: 'ltr',
+              '> *': {
+                direction: 'rtl',
+              },
+            },
+          },
         },
       },
 

components/date-picker/style/token.ts

@@ -5,12 +5,12 @@ import { initComponentToken } from '../../input/style/token';
 import type { MultipleSelectorToken, SelectorToken } from '../../select/style/token';
 import type { ArrowToken } from '../../style/roundedArrow';
 import { getArrowToken } from '../../style/roundedArrow';
-import type { GlobalToken } from '../../theme/interface';
 import type {
+  GlobalToken,
   FullToken,
   GetDefaultToken,
   TokenWithCommonCls,
-} from '../../theme/util/genComponentStyleHook';
+} from '../../theme/internal';
 
 export interface PanelComponentToken extends MultipleSelectorToken {
   /**

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

@@ -8235,7 +8235,7 @@ exports[`renders components/form/demo/inline-login.tsx extend context correctly
               >
                 <span
                   aria-label="user"
-                  class="anticon anticon-user site-form-item-icon"
+                  class="anticon anticon-user"
                   role="img"
                 >
                   <svg
@@ -8290,7 +8290,7 @@ exports[`renders components/form/demo/inline-login.tsx extend context correctly
               >
                 <span
                   aria-label="lock"
-                  class="anticon anticon-lock site-form-item-icon"
+                  class="anticon anticon-lock"
                   role="img"
                 >
                   <svg
@@ -8984,6 +8984,210 @@ Array [
 
 exports[`renders components/form/demo/layout-multiple.tsx extend context correctly 2`] = `[]`;
 
+exports[`renders components/form/demo/login.tsx extend context correctly 1`] = `
+<form
+  class="ant-form ant-form-horizontal"
+  id="login"
+  style="max-width: 360px;"
+>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-input-affix-wrapper ant-input-outlined"
+            >
+              <span
+                class="ant-input-prefix"
+              >
+                <span
+                  aria-label="user"
+                  class="anticon anticon-user"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="user"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+                    />
+                  </svg>
+                </span>
+              </span>
+              <input
+                aria-required="true"
+                class="ant-input"
+                id="login_username"
+                placeholder="Username"
+                type="text"
+                value=""
+              />
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-input-affix-wrapper ant-input-outlined"
+            >
+              <span
+                class="ant-input-prefix"
+              >
+                <span
+                  aria-label="lock"
+                  class="anticon anticon-lock"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="lock"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M832 464h-68V240c0-70.7-57.3-128-128-128H388c-70.7 0-128 57.3-128 128v224h-68c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V496c0-17.7-14.3-32-32-32zM332 240c0-30.9 25.1-56 56-56h248c30.9 0 56 25.1 56 56v224H332V240zm460 600H232V536h560v304zM484 701v53c0 4.4 3.6 8 8 8h40c4.4 0 8-3.6 8-8v-53a48.01 48.01 0 10-56 0z"
+                    />
+                  </svg>
+                </span>
+              </span>
+              <input
+                aria-required="true"
+                class="ant-input"
+                id="login_password"
+                placeholder="Password"
+                type="password"
+                value=""
+              />
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <div
+              class="ant-flex ant-flex-align-center ant-flex-justify-space-between"
+            >
+              <label
+                class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-in-form-item"
+              >
+                <span
+                  class="ant-checkbox ant-wave-target ant-checkbox-checked"
+                >
+                  <input
+                    checked=""
+                    class="ant-checkbox-input"
+                    id="login_remember"
+                    type="checkbox"
+                  />
+                  <span
+                    class="ant-checkbox-inner"
+                  />
+                </span>
+                <span>
+                  Remember me
+                </span>
+              </label>
+              <a
+                href=""
+              >
+                Forgot password
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <button
+              class="ant-btn ant-btn-primary ant-btn-block"
+              type="submit"
+            >
+              <span>
+                Log in
+              </span>
+            </button>
+            or 
+            <a
+              href=""
+            >
+              Register now!
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders components/form/demo/login.tsx extend context correctly 2`] = `[]`;
+
 exports[`renders components/form/demo/nest-messages.tsx extend context correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal"
@@ -9275,206 +9479,6 @@ exports[`renders components/form/demo/nest-messages.tsx extend context correctly
 
 exports[`renders components/form/demo/nest-messages.tsx extend context correctly 2`] = `[]`;
 
-exports[`renders components/form/demo/normal-login.tsx extend context correctly 1`] = `
-<form
-  class="ant-form ant-form-horizontal login-form"
-  id="normal_login"
->
-  <div
-    class="ant-form-item"
-  >
-    <div
-      class="ant-row ant-form-item-row"
-    >
-      <div
-        class="ant-col ant-form-item-control"
-      >
-        <div
-          class="ant-form-item-control-input"
-        >
-          <div
-            class="ant-form-item-control-input-content"
-          >
-            <span
-              class="ant-input-affix-wrapper ant-input-outlined"
-            >
-              <span
-                class="ant-input-prefix"
-              >
-                <span
-                  aria-label="user"
-                  class="anticon anticon-user site-form-item-icon"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="user"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <input
-                aria-required="true"
-                class="ant-input"
-                id="normal_login_username"
-                placeholder="Username"
-                type="text"
-                value=""
-              />
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-form-item"
-  >
-    <div
-      class="ant-row ant-form-item-row"
-    >
-      <div
-        class="ant-col ant-form-item-control"
-      >
-        <div
-          class="ant-form-item-control-input"
-        >
-          <div
-            class="ant-form-item-control-input-content"
-          >
-            <span
-              class="ant-input-affix-wrapper ant-input-outlined"
-            >
-              <span
-                class="ant-input-prefix"
-              >
-                <span
-                  aria-label="lock"
-                  class="anticon anticon-lock site-form-item-icon"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="lock"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M832 464h-68V240c0-70.7-57.3-128-128-128H388c-70.7 0-128 57.3-128 128v224h-68c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V496c0-17.7-14.3-32-32-32zM332 240c0-30.9 25.1-56 56-56h248c30.9 0 56 25.1 56 56v224H332V240zm460 600H232V536h560v304zM484 701v53c0 4.4 3.6 8 8 8h40c4.4 0 8-3.6 8-8v-53a48.01 48.01 0 10-56 0z"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <input
-                aria-required="true"
-                class="ant-input"
-                id="normal_login_password"
-                placeholder="Password"
-                type="password"
-                value=""
-              />
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-form-item"
-  >
-    <div
-      class="ant-row ant-form-item-row"
-    >
-      <div
-        class="ant-col ant-form-item-control"
-      >
-        <div
-          class="ant-form-item-control-input"
-        >
-          <div
-            class="ant-form-item-control-input-content"
-          >
-            <label
-              class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-in-form-item"
-            >
-              <span
-                class="ant-checkbox ant-wave-target ant-checkbox-checked"
-              >
-                <input
-                  checked=""
-                  class="ant-checkbox-input"
-                  id="normal_login_remember"
-                  type="checkbox"
-                />
-                <span
-                  class="ant-checkbox-inner"
-                />
-              </span>
-              <span>
-                Remember me
-              </span>
-            </label>
-            <a
-              class="login-form-forgot"
-              href=""
-            >
-              Forgot password
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-form-item"
-  >
-    <div
-      class="ant-row ant-form-item-row"
-    >
-      <div
-        class="ant-col ant-form-item-control"
-      >
-        <div
-          class="ant-form-item-control-input"
-        >
-          <div
-            class="ant-form-item-control-input-content"
-          >
-            <button
-              class="ant-btn ant-btn-primary login-form-button"
-              type="submit"
-            >
-              <span>
-                Log in
-              </span>
-            </button>
-            Or 
-            <a
-              href=""
-            >
-              register now!
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders components/form/demo/normal-login.tsx extend context correctly 2`] = `[]`;
-
 exports[`renders components/form/demo/ref-item.tsx extend context correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal"

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

@@ -4567,7 +4567,7 @@ exports[`renders components/form/demo/inline-login.tsx correctly 1`] = `
               >
                 <span
                   aria-label="user"
-                  class="anticon anticon-user site-form-item-icon"
+                  class="anticon anticon-user"
                   role="img"
                 >
                   <svg
@@ -4622,7 +4622,7 @@ exports[`renders components/form/demo/inline-login.tsx correctly 1`] = `
               >
                 <span
                   aria-label="lock"
-                  class="anticon anticon-lock site-form-item-icon"
+                  class="anticon anticon-lock"
                   role="img"
                 >
                   <svg
@@ -5306,6 +5306,208 @@ Array [
 ]
 `;
 
+exports[`renders components/form/demo/login.tsx correctly 1`] = `
+<form
+  class="ant-form ant-form-horizontal"
+  id="login"
+  style="max-width:360px"
+>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-input-affix-wrapper ant-input-outlined"
+            >
+              <span
+                class="ant-input-prefix"
+              >
+                <span
+                  aria-label="user"
+                  class="anticon anticon-user"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="user"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+                    />
+                  </svg>
+                </span>
+              </span>
+              <input
+                aria-required="true"
+                class="ant-input"
+                id="login_username"
+                placeholder="Username"
+                type="text"
+                value=""
+              />
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <span
+              class="ant-input-affix-wrapper ant-input-outlined"
+            >
+              <span
+                class="ant-input-prefix"
+              >
+                <span
+                  aria-label="lock"
+                  class="anticon anticon-lock"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="lock"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M832 464h-68V240c0-70.7-57.3-128-128-128H388c-70.7 0-128 57.3-128 128v224h-68c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V496c0-17.7-14.3-32-32-32zM332 240c0-30.9 25.1-56 56-56h248c30.9 0 56 25.1 56 56v224H332V240zm460 600H232V536h560v304zM484 701v53c0 4.4 3.6 8 8 8h40c4.4 0 8-3.6 8-8v-53a48.01 48.01 0 10-56 0z"
+                    />
+                  </svg>
+                </span>
+              </span>
+              <input
+                aria-required="true"
+                class="ant-input"
+                id="login_password"
+                placeholder="Password"
+                type="password"
+                value=""
+              />
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <div
+              class="ant-flex ant-flex-align-center ant-flex-justify-space-between"
+            >
+              <label
+                class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-in-form-item"
+              >
+                <span
+                  class="ant-checkbox ant-wave-target ant-checkbox-checked"
+                >
+                  <input
+                    checked=""
+                    class="ant-checkbox-input"
+                    id="login_remember"
+                    type="checkbox"
+                  />
+                  <span
+                    class="ant-checkbox-inner"
+                  />
+                </span>
+                <span>
+                  Remember me
+                </span>
+              </label>
+              <a
+                href=""
+              >
+                Forgot password
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-form-item"
+  >
+    <div
+      class="ant-row ant-form-item-row"
+    >
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <button
+              class="ant-btn ant-btn-primary ant-btn-block"
+              type="submit"
+            >
+              <span>
+                Log in
+              </span>
+            </button>
+            or 
+            <a
+              href=""
+            >
+              Register now!
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
 exports[`renders components/form/demo/nest-messages.tsx correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal"
@@ -5595,204 +5797,6 @@ exports[`renders components/form/demo/nest-messages.tsx correctly 1`] = `
 </form>
 `;
 
-exports[`renders components/form/demo/normal-login.tsx correctly 1`] = `
-<form
-  class="ant-form ant-form-horizontal login-form"
-  id="normal_login"
->
-  <div
-    class="ant-form-item"
-  >
-    <div
-      class="ant-row ant-form-item-row"
-    >
-      <div
-        class="ant-col ant-form-item-control"
-      >
-        <div
-          class="ant-form-item-control-input"
-        >
-          <div
-            class="ant-form-item-control-input-content"
-          >
-            <span
-              class="ant-input-affix-wrapper ant-input-outlined"
-            >
-              <span
-                class="ant-input-prefix"
-              >
-                <span
-                  aria-label="user"
-                  class="anticon anticon-user site-form-item-icon"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="user"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <input
-                aria-required="true"
-                class="ant-input"
-                id="normal_login_username"
-                placeholder="Username"
-                type="text"
-                value=""
-              />
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-form-item"
-  >
-    <div
-      class="ant-row ant-form-item-row"
-    >
-      <div
-        class="ant-col ant-form-item-control"
-      >
-        <div
-          class="ant-form-item-control-input"
-        >
-          <div
-            class="ant-form-item-control-input-content"
-          >
-            <span
-              class="ant-input-affix-wrapper ant-input-outlined"
-            >
-              <span
-                class="ant-input-prefix"
-              >
-                <span
-                  aria-label="lock"
-                  class="anticon anticon-lock site-form-item-icon"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="lock"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M832 464h-68V240c0-70.7-57.3-128-128-128H388c-70.7 0-128 57.3-128 128v224h-68c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V496c0-17.7-14.3-32-32-32zM332 240c0-30.9 25.1-56 56-56h248c30.9 0 56 25.1 56 56v224H332V240zm460 600H232V536h560v304zM484 701v53c0 4.4 3.6 8 8 8h40c4.4 0 8-3.6 8-8v-53a48.01 48.01 0 10-56 0z"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <input
-                aria-required="true"
-                class="ant-input"
-                id="normal_login_password"
-                placeholder="Password"
-                type="password"
-                value=""
-              />
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-form-item"
-  >
-    <div
-      class="ant-row ant-form-item-row"
-    >
-      <div
-        class="ant-col ant-form-item-control"
-      >
-        <div
-          class="ant-form-item-control-input"
-        >
-          <div
-            class="ant-form-item-control-input-content"
-          >
-            <label
-              class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-in-form-item"
-            >
-              <span
-                class="ant-checkbox ant-wave-target ant-checkbox-checked"
-              >
-                <input
-                  checked=""
-                  class="ant-checkbox-input"
-                  id="normal_login_remember"
-                  type="checkbox"
-                />
-                <span
-                  class="ant-checkbox-inner"
-                />
-              </span>
-              <span>
-                Remember me
-              </span>
-            </label>
-            <a
-              class="login-form-forgot"
-              href=""
-            >
-              Forgot password
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-form-item"
-  >
-    <div
-      class="ant-row ant-form-item-row"
-    >
-      <div
-        class="ant-col ant-form-item-control"
-      >
-        <div
-          class="ant-form-item-control-input"
-        >
-          <div
-            class="ant-form-item-control-input-content"
-          >
-            <button
-              class="ant-btn ant-btn-primary login-form-button"
-              type="submit"
-            >
-              <span>
-                Log in
-              </span>
-            </button>
-            Or 
-            <a
-              href=""
-            >
-              register now!
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
 exports[`renders components/form/demo/ref-item.tsx correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal"

components/form/demo/inline-login.tsx

@@ -21,17 +21,13 @@ const App: React.FC = () => {
         name="username"
         rules={[{ required: true, message: 'Please input your username!' }]}
       >
-        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
+        <Input prefix={<UserOutlined />} placeholder="Username" />
       </Form.Item>
       <Form.Item
         name="password"
         rules={[{ required: true, message: 'Please input your password!' }]}
       >
-        <Input
+        <Input prefix={<LockOutlined />} type="password" placeholder="Password" />
-          prefix={<LockOutlined className="site-form-item-icon" />}
-          type="password"
-          placeholder="Password"
-        />
       </Form.Item>
       <Form.Item shouldUpdate>
         {() => (

components/form/demo/login.md

@@ -0,0 +1,9 @@
+## zh-CN
+
+普通的登录框，可以容纳更多的元素。
+
+> 🛎️ 想要 3 分钟实现登录表单？试试 [Pro Components](https://procomponents.ant.design/components/login-form)！
+
+## en-US
+
+Normal login form which can contain more elements.

components/form/demo/login.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { LockOutlined, UserOutlined } from '@ant-design/icons';
-import { Button, Checkbox, Form, Input } from 'antd';
+import { Button, Checkbox, Form, Input, Flex } from 'antd';
 
 const App: React.FC = () => {
   const onFinish = (values: any) => {
@@ -9,42 +9,37 @@ const App: React.FC = () => {
 
   return (
     <Form
-      name="normal_login"
+      name="login"
-      className="login-form"
       initialValues={{ remember: true }}
+      style={{ maxWidth: 360 }}
       onFinish={onFinish}
     >
       <Form.Item
         name="username"
         rules={[{ required: true, message: 'Please input your Username!' }]}
       >
-        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
+        <Input prefix={<UserOutlined />} placeholder="Username" />
       </Form.Item>
       <Form.Item
         name="password"
         rules={[{ required: true, message: 'Please input your Password!' }]}
       >
-        <Input
+        <Input prefix={<LockOutlined />} type="password" placeholder="Password" />
-          prefix={<LockOutlined className="site-form-item-icon" />}
-          type="password"
-          placeholder="Password"
-        />
       </Form.Item>
       <Form.Item>
-        <Form.Item name="remember" valuePropName="checked" noStyle>
+        <Flex justify="space-between" align="center">
-          <Checkbox>Remember me</Checkbox>
+          <Form.Item name="remember" valuePropName="checked" noStyle>
-        </Form.Item>
+            <Checkbox>Remember me</Checkbox>
-
+          </Form.Item>
-        <a className="login-form-forgot" href="">
+          <a href="">Forgot password</a>
-          Forgot password
+        </Flex>
-        </a>
       </Form.Item>
 
       <Form.Item>
-        <Button type="primary" htmlType="submit" className="login-form-button">
+        <Button block type="primary" htmlType="submit">
           Log in
         </Button>
-        Or <a href="">register now!</a>
+        or <a href="">Register now!</a>
       </Form.Item>
     </Form>
   );

components/form/demo/normal-login.md

@@ -1,24 +0,0 @@
-## zh-CN
-
-普通的登录框，可以容纳更多的元素。
-
-> 🛎️ 想要 3 分钟实现？试试 [ProForm](https://procomponents.ant.design/components/form/#%E7%99%BB%E5%BD%95)！
-
-## en-US
-
-Normal login form which can contain more elements.
-
-```css
-#components-form-demo-normal-login .login-form {
-  max-width: 300px;
-}
-#components-form-demo-normal-login .login-form-forgot {
-  float: right;
-}
-#components-form-demo-normal-login .ant-col-rtl .login-form-forgot {
-  float: left;
-}
-#components-form-demo-normal-login .login-form-button {
-  width: 100%;
-}
-```

components/form/index.en-US.md

@@ -39,7 +39,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ylFATY6w-ygAAA
 <code src="./demo/global-state.tsx">Store Form Data into Upper Component</code>
 <code src="./demo/form-context.tsx">Control between forms</code>
 <code src="./demo/inline-login.tsx">Inline Login Form</code>
-<code src="./demo/normal-login.tsx">Login Form</code>
+<code src="./demo/login.tsx">Login Form</code>
 <code src="./demo/register.tsx">Registration</code>
 <code src="./demo/advanced-search.tsx">Advanced search</code>
 <code src="./demo/form-in-modal.tsx">Form in Modal to Create</code>
@@ -69,7 +69,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | colon | Configure the default value of `colon` for Form.Item. Indicates whether the colon after the label is displayed (only effective when prop layout is horizontal) | boolean | true |  |
 | disabled | Set form component disable, only available for antd components | boolean | false | 4.21.0 |
 | component | Set the Form rendering element. Do not create a DOM node for `false` | ComponentType \| false | form |  |
-| fields | Control of form fields through state management (such as redux). Not recommended for non-strong demand. View [example](#components-form-demo-global-state) | [FieldData](#fielddata)\[] | - |  |
+| fields | Control of form fields through state management (such as redux). Not recommended for non-strong demand. View [example](#form-demo-global-state) | [FieldData](#fielddata)\[] | - |  |
 | form | Form control instance created by `Form.useForm()`. Automatically created when not provided | [FormInstance](#forminstance) | - |  |
 | feedbackIcons | Can be passed custom icons while `Form.Item` element has `hasFeedback` | [FeedbackIcons](#feedbackicons) | - | 5.9.0 |
 | initialValues | Set value by Form initialization or reset | object | - |  |
@@ -143,10 +143,10 @@ Form field component for data bidirectional binding, validation, layout, and so
 | noStyle | No style for `true`, used as a pure field control. Will inherit parent Form.Item `validateStatus` if self `validateStatus` not configured | boolean | false |  |
 | preserve | Keep field value even when field removed | boolean | true | 4.4.0 |
 | required | Display required style. It will be generated by the validation rule | boolean | false |  |
-| rules | Rules for field validation. Click [here](#components-form-demo-basic) to see an example | [Rule](#rule)\[] | - |  |
+| rules | Rules for field validation. Click [here](#form-demo-basic) to see an example | [Rule](#rule)\[] | - |  |
 | shouldUpdate | Custom field update logic. See [below](#shouldupdate) | boolean \| (prevValue, curValue) => boolean | false |  |
 | tooltip | Config tooltip info | ReactNode \| [TooltipProps & { icon: ReactNode }](/components/tooltip#api) | - | 4.7.0 |
-| trigger | When to collect the value of children node. Click [here](#components-form-demo-customized-form-controls) to see an example | string | `onChange` |  |
+| trigger | When to collect the value of children node. Click [here](#form-demo-customized-form-controls) to see an example | string | `onChange` |  |
 | validateDebounce | Delay milliseconds to start validation | number | - | 5.9.0 |
 | validateFirst | Whether stop validate on first rule of error for this field. Will parallel validate when `parallel` configured | boolean \| `parallel` | false | `parallel`: 4.5.0 |
 | validateStatus | The validation status. If not provided, it will be generated by validation rule. options: `success` `warning` `error` `validating` | string | - |  |
@@ -163,7 +163,7 @@ After wrapped by `Form.Item` with `name` property, `value`(or other property def
 
 ### dependencies
 
-Used when there are dependencies between fields. If a field has the `dependencies` prop, this field will automatically trigger updates and validations when upstream is updated. A common scenario is a user registration form with "password" and "confirm password" fields. The "Confirm Password" validation depends on the "Password" field. After setting `dependencies`, the "Password" field update will re-trigger the validation of "Check Password". You can refer [examples](#components-form-demo-dependencies).
+Used when there are dependencies between fields. If a field has the `dependencies` prop, this field will automatically trigger updates and validations when upstream is updated. A common scenario is a user registration form with "password" and "confirm password" fields. The "Confirm Password" validation depends on the "Password" field. After setting `dependencies`, the "Password" field update will re-trigger the validation of "Check Password". You can refer [examples](#form-demo-dependencies).
 
 `dependencies` shouldn't be used together with `shouldUpdate`, since it may result in conflicting update logic.
 
@@ -187,7 +187,7 @@ related issue: [#34500](https://github.com/ant-design/ant-design/issues/34500)
 </Form.Item>
 ```
 
-You can ref [example](#components-form-demo-horizontal-login) to see detail.
+You can ref [example](#form-demo-horizontal-login) to see detail.
 
 When `shouldUpdate` is a function, it will be called by form values update. Providing original values and current value to compare. This is very helpful for rendering additional fields based on values:
 
@@ -203,7 +203,7 @@ When `shouldUpdate` is a function, it will be called by form values update. Prov
 </Form.Item>
 ```
 
-You can ref [example](#components-form-demo-control-hooks) to see detail.
+You can ref [example](#form-demo-control-hooks) to see detail.
 
 ### messageVariables
 
@@ -267,7 +267,7 @@ Some operator functions in render form of Form.List.
 
 ## Form.ErrorList
 
-New in 4.7.0. Show error messages, should only work with `rules` of Form.List. See [example](#components-form-demo-dynamic-form-item).
+New in 4.7.0. Show error messages, should only work with `rules` of Form.List. See [example](#form-demo-dynamic-form-item).
 
 | Property | Description | Type         | Default |
 | -------- | ----------- | ------------ | ------- |
@@ -275,7 +275,7 @@ New in 4.7.0. Show error messages, should only work with `rules` of Form.List. S
 
 ## Form.Provider
 
-Provide linkage between forms. If a sub form with `name` prop update, it will auto trigger Provider related events. See [example](#components-form-demo-form-context).
+Provide linkage between forms. If a sub form with `name` prop update, it will auto trigger Provider related events. See [example](#form-demo-form-context).
 
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
@@ -546,7 +546,7 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
 | transform | Transform value to the rule before validation | (value) => any |  |
 | type | Normally `string` \|`number` \|`boolean` \|`url` \| `email`. More type to ref [here](https://github.com/react-component/async-validator#type) | string |  |
 | validateTrigger | Set validate trigger event. Must be the sub set of `validateTrigger` in Form.Item | string \| string\[] |  |
-| validator | Customize validation rule. Accept Promise as return. See [example](#components-form-demo-register) | ([rule](#rule), value) => Promise |  |
+| validator | Customize validation rule. Accept Promise as return. See [example](#form-demo-register) | ([rule](#rule), value) => Promise |  |
 | warningOnly | Warning only. Not block form submit | boolean | 4.17.0 |
 | whitespace | Failed if only has whitespace, only work with `type: 'string'` rule | boolean |  |
 
@@ -659,12 +659,6 @@ dependencies should be `['users', 0, 'name']`
 
 React can not get correct interaction of controlled component with async value update. When user trigger `onChange`, component will do no response since `value` update is async. If you want to trigger value update async, you should use customize component to handle value state internal and pass sync value control to Form instead.
 
-<style>
-.site-form-item-icon {
-  color: rgba(0, 0, 0, 0.25);
-}
-</style>
-
 ### `scrollToFirstError` and `scrollToField` not working?
 
 1. use custom form control

components/form/index.zh-CN.md

@@ -40,7 +40,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ylFATY6w-ygAAA
 <code src="./demo/global-state.tsx">表单数据存储于上层组件</code>
 <code src="./demo/form-context.tsx">多表单联动</code>
 <code src="./demo/inline-login.tsx">内联登录栏</code>
-<code src="./demo/normal-login.tsx">登录框</code>
+<code src="./demo/login.tsx">登录框</code>
 <code src="./demo/register.tsx">注册新用户</code>
 <code src="./demo/advanced-search.tsx">高级搜索</code>
 <code src="./demo/form-in-modal.tsx">弹出层中的新建表单</code>
@@ -70,7 +70,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ylFATY6w-ygAAA
 | colon | 配置 Form.Item 的 `colon` 的默认值。表示是否显示 label 后面的冒号 (只有在属性 layout 为 horizontal 时有效) | boolean | true |  |
 | disabled | 设置表单组件禁用，仅对 antd 组件有效 | boolean | false | 4.21.0 |
 | component | 设置 Form 渲染元素，为 `false` 则不创建 DOM 节点 | ComponentType \| false | form |  |
-| fields | 通过状态管理（如 redux）控制表单字段，如非强需求不推荐使用。查看[示例](#components-form-demo-global-state) | [FieldData](#fielddata)\[] | - |  |
+| fields | 通过状态管理（如 redux）控制表单字段，如非强需求不推荐使用。查看[示例](#form-demo-global-state) | [FieldData](#fielddata)\[] | - |  |
 | form | 经 `Form.useForm()` 创建的 form 控制实例，不提供时会自动创建 | [FormInstance](#forminstance) | - |  |
 | feedbackIcons | 当 `Form.Item` 有 `hasFeedback` 属性时可以自定义图标 | [FeedbackIcons](#feedbackicons) | - | 5.9.0 |
 | initialValues | 表单默认值，只有初始化以及重置时生效 | object | - |  |
@@ -144,10 +144,10 @@ const validateMessages = {
 | noStyle | 为 `true` 时不带样式，作为纯字段控件使用。当自身没有 `validateStatus` 而父元素存在有 `validateStatus` 的 Form.Item 会继承父元素的 `validateStatus` | boolean | false |  |
 | preserve | 当字段被删除时保留字段值 | boolean | true | 4.4.0 |
 | required | 必填样式设置。如不设置，则会根据校验规则自动生成 | boolean | false |  |
-| rules | 校验规则，设置字段的校验逻辑。点击[此处](#components-form-demo-basic)查看示例 | [Rule](#rule)\[] | - |  |
+| rules | 校验规则，设置字段的校验逻辑。点击[此处](#form-demo-basic)查看示例 | [Rule](#rule)\[] | - |  |
 | shouldUpdate | 自定义字段更新逻辑，说明[见下](#shouldupdate) | boolean \| (prevValue, curValue) => boolean | false |  |
 | tooltip | 配置提示信息 | ReactNode \| [TooltipProps & { icon: ReactNode }](/components/tooltip-cn#api) | - | 4.7.0 |
-| trigger | 设置收集字段值变更的时机。点击[此处](#components-form-demo-customized-form-controls)查看示例 | string | `onChange` |  |
+| trigger | 设置收集字段值变更的时机。点击[此处](#form-demo-customized-form-controls)查看示例 | string | `onChange` |  |
 | validateFirst | 当某一规则校验不通过时，是否停止剩下的规则的校验。设置 `parallel` 时会并行校验 | boolean \| `parallel` | false | `parallel`: 4.5.0 |
 | validateDebounce | 设置防抖，延迟毫秒数后进行校验 | number | - | 5.9.0 |
 | validateStatus | 校验状态，如不设置，则会根据校验规则自动生成，可选：'success' 'warning' 'error' 'validating' | string | - |  |
@@ -164,7 +164,7 @@ const validateMessages = {
 
 ### dependencies
 
-当字段间存在依赖关系时使用。如果一个字段设置了 `dependencies` 属性。那么它所依赖的字段更新时，该字段将自动触发更新与校验。一种常见的场景，就是注册用户表单的“密码”与“确认密码”字段。“确认密码”校验依赖于“密码”字段，设置 `dependencies` 后，“密码”字段更新会重新触发“校验密码”的校验逻辑。你可以参考[具体例子](#components-form-demo-dependencies)。
+当字段间存在依赖关系时使用。如果一个字段设置了 `dependencies` 属性。那么它所依赖的字段更新时，该字段将自动触发更新与校验。一种常见的场景，就是注册用户表单的“密码”与“确认密码”字段。“确认密码”校验依赖于“密码”字段，设置 `dependencies` 后，“密码”字段更新会重新触发“校验密码”的校验逻辑。你可以参考[具体例子](#form-demo-dependencies)。
 
 `dependencies` 不应和 `shouldUpdate` 一起使用，因为这可能带来更新逻辑的混乱。
 
@@ -188,7 +188,7 @@ Form 通过增量更新方式，只更新被修改的字段相关组件以达到
 </Form.Item>
 ```
 
-你可以参考[示例](#components-form-demo-horizontal-login)查看具体使用场景。
+你可以参考[示例](#form-demo-horizontal-login)查看具体使用场景。
 
 当 `shouldUpdate` 为方法时，表单的每次数值更新都会调用该方法，提供原先的值与当前的值以供你比较是否需要更新。这对于是否根据值来渲染额外字段十分有帮助：
 
@@ -204,7 +204,7 @@ Form 通过增量更新方式，只更新被修改的字段相关组件以达到
 </Form.Item>
 ```
 
-你可以参考[示例](#components-form-demo-control-hooks)查看具体使用场景。
+你可以参考[示例](#form-demo-control-hooks)查看具体使用场景。
 
 ### messageVariables
 
@@ -266,7 +266,7 @@ Form.List 渲染表单相关操作函数。
 
 ## Form.ErrorList
 
-4.7.0 新增。错误展示组件，仅限配合 Form.List 的 rules 一同使用。参考[示例](#components-form-demo-dynamic-form-item)。
+4.7.0 新增。错误展示组件，仅限配合 Form.List 的 rules 一同使用。参考[示例](#form-demo-dynamic-form-item)。
 
 | 参数   | 说明     | 类型         | 默认值 |
 | ------ | -------- | ------------ | ------ |
@@ -274,7 +274,7 @@ Form.List 渲染表单相关操作函数。
 
 ## Form.Provider
 
-提供表单间联动功能，其下设置 `name` 的 Form 更新时，会自动触发对应事件。查看[示例](#components-form-demo-form-context)。
+提供表单间联动功能，其下设置 `name` 的 Form 更新时，会自动触发对应事件。查看[示例](#form-demo-form-context)。
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
@@ -545,7 +545,7 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
 | transform | 将字段值转换成目标值后进行校验 | (value) => any |  |
 | type | 类型，常见有 `string` \|`number` \|`boolean` \|`url` \| `email`。更多请参考[此处](https://github.com/react-component/async-validator#type) | string |  |
 | validateTrigger | 设置触发验证时机，必须是 Form.Item 的 `validateTrigger` 的子集 | string \| string\[] |  |
-| validator | 自定义校验，接收 Promise 作为返回值。[示例](#components-form-demo-register)参考 | ([rule](#rule), value) => Promise |  |
+| validator | 自定义校验，接收 Promise 作为返回值。[示例](#form-demo-register)参考 | ([rule](#rule), value) => Promise |  |
 | warningOnly | 仅警告，不阻塞表单提交 | boolean | 4.17.0 |
 | whitespace | 如果字段仅包含空格则校验不通过，只在 `type: 'string'` 时生效 | boolean |  |
 
@@ -658,12 +658,6 @@ Form.List 下的字段需要包裹 Form.List 本身的 `name`，比如：
 
 React 中异步更新会导致受控组件交互行为异常。当用户交互触发 `onChange` 后，通过异步改变值会导致组件 `value` 不会立刻更新，使得组件呈现假死状态。如果你需要异步触发变更，请通过自定义组件实现内部异步状态。
 
-<style>
-.site-form-item-icon {
-  color: rgba(0, 0, 0, 0.25);
-}
-</style>
-
 ### `scrollToFirstError` 和 `scrollToField` 失效？
 
 1. 使用了自定义表单控件

components/form/style/index.ts

@@ -4,9 +4,14 @@ import { unit } from '@ant-design/cssinjs';
 
 import { resetComponent } from '../../style';
 import { genCollapseMotion, zoomIn } from '../../style/motion';
-import type { AliasToken, FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
+import type {
+  AliasToken,
+  FullToken,
+  GenerateStyle,
+  GetDefaultToken,
+  GenStyleFn,
+} from '../../theme/internal';
 import { genStyleHooks, mergeToken } from '../../theme/internal';
-import type { GenStyleFn } from '../../theme/util/genComponentStyleHook';
 import genFormValidateMotionStyle from './explain';
 
 export interface ComponentToken {
@@ -314,7 +319,6 @@ const genFormItemStyle: GenerateStyle<FormToken> = (token) => {
           '&-content': {
             flex: 'auto',
             maxWidth: '100%',
-            lineHeight: '100%',
           },
         },
       },

components/grid/demo/flex-align.md

@@ -7,7 +7,7 @@
 Child elements vertically aligned.
 
 ```css
-#components-grid-demo-flex-align [class~='ant-row'] {
+#grid-demo-flex-align [class~='ant-row'] {
   background: rgba(128, 128, 128, 0.08);
 }
 ```

components/grid/demo/flex-order.md

@@ -7,7 +7,7 @@
 To change the element sort by `order`.
 
 ```css
-#components-grid-demo-flex-order [class~='ant-row'] {
+#grid-demo-flex-order [class~='ant-row'] {
   background: rgba(128, 128, 128, 0.08);
 }
 ```

components/grid/demo/flex.md

@@ -9,7 +9,7 @@
 Child elements depending on the value of the `start`, `center`, `end`, `space-between`, `space-around` and `space-evenly`, which are defined in its parent node typesetting mode.
 
 ```css
-#components-grid-demo-flex [class~='ant-row'] {
+#grid-demo-flex [class~='ant-row'] {
   background: rgba(128, 128, 128, 0.08);
 }
 ```

components/grid/demo/playground.md

@@ -7,27 +7,27 @@
 A simple playground for column count and gutter.
 
 ```css
-#components-grid-demo-playground [class~='ant-col'] {
+#grid-demo-playground [class~='ant-col'] {
   background: transparent;
   border: 0;
 }
-#components-grid-demo-playground [class~='ant-col'] > div {
+#grid-demo-playground [class~='ant-col'] > div {
   height: 120px;
   font-size: 14px;
   line-height: 120px;
   background: #0092ff;
   border-radius: 4px;
 }
-#components-grid-demo-playground pre {
+#grid-demo-playground pre {
   padding: 8px 16px;
   font-size: 14px;
   background: #f9f9f9;
   border-radius: 6px;
 }
-#components-grid-demo-playground pre.demo-code {
+#grid-demo-playground pre.demo-code {
   direction: ltr;
 }
-#components-grid-demo-playground .ant-col {
+#grid-demo-playground .ant-col {
   padding: 0;
 }
 ```

components/input/style/index.ts

@@ -657,7 +657,7 @@ const genSearchInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
       },
 
       // fix slight height diff in Firefox:
-      // https://ant.design/components/auto-complete-cn/#components-auto-complete-demo-certain-category
+      // https://ant.design/components/auto-complete-cn/#auto-complete-demo-certain-category
       [`${componentCls}-lg`]: {
         lineHeight: token.calc(token.lineHeightLG).sub(0.0002).equal(),
       },

components/locale/fr_BE.ts

@@ -33,6 +33,11 @@ const localeValues: Locale = {
     triggerAsc: 'Trier par ordre croissant',
     cancelSort: 'Annuler le tri',
   },
+  Tour: {
+    Next: 'Étape suivante',
+    Previous: 'Étape précédente',
+    Finish: 'Fin de la visite guidée',
+  },
   Modal: {
     okText: 'OK',
     cancelText: 'Annuler',

components/locale/fr_FR.ts

@@ -33,16 +33,16 @@ const localeValues: Locale = {
     triggerAsc: 'Trier par ordre croissant',
     cancelSort: 'Annuler le tri',
   },
-  Modal: {
-    okText: 'OK',
-    cancelText: 'Annuler',
-    justOkText: 'OK',
-  },
   Tour: {
     Next: 'Étape suivante',
     Previous: 'Étape précédente',
     Finish: 'Fin de la visite guidée',
   },
+  Modal: {
+    okText: 'OK',
+    cancelText: 'Annuler',
+    justOkText: 'OK',
+  },
   Popconfirm: {
     okText: 'OK',
     cancelText: 'Annuler',

components/locale/nl_BE.ts

@@ -34,6 +34,11 @@ const localeValues: Locale = {
     triggerAsc: 'Klik om oplopend te sorteren',
     triggerDesc: 'Klik om aflopend te sorteren',
   },
+  Tour: {
+    Next: 'Volgende',
+    Previous: 'Vorige',
+    Finish: 'Voltooien',
+  },
   Modal: {
     okText: 'OK',
     cancelText: 'Annuleer',

components/menu/demo/inline-collapsed.md

@@ -2,10 +2,10 @@
 
 内嵌菜单可以被缩起/展开。
 
-你可以在 [Layout](/components/layout-cn/#components-layout-demo-side) 里查看侧边布局结合的完整示例。
+你可以在 [Layout](/components/layout-cn/#layout-demo-side) 里查看侧边布局结合的完整示例。
 
 ## en-US
 
 Inline menu could be collapsed.
 
-Here is [a complete demo](/components/layout/#components-layout-demo-side) with sider layout.
+Here is [a complete demo](/components/layout/#layout-demo-side) with sider layout.

components/modal/demo/dark.tsx

@@ -455,10 +455,10 @@ export default () => {
           style={{ marginTop: 16 }}
         />
         <Anchor>
-          <Link href="#components-anchor-demo-basic" title="Basic demo" />
+          <Link href="#anchor-demo-basic" title="Basic demo" />
-          <Link href="#components-anchor-demo-static" title="Static demo" />
+          <Link href="#anchor-demo-static" title="Static demo" />
           <Link
-            href="#components-anchor-demo-basic"
+            href="#anchor-demo-basic"
             title="Basic demo with Target"
             target="_blank"
           />

components/modal/style/index.ts

@@ -3,10 +3,15 @@ import { unit } from '@ant-design/cssinjs';
 
 import { genFocusStyle, resetComponent } from '../../style';
 import { initFadeMotion, initZoomMotion } from '../../style/motion';
-import type { GlobalToken } from '../../theme';
+import type {
-import type { AliasToken, FullToken, GenerateStyle } from '../../theme/internal';
+  AliasToken,
+  FullToken,
+  GenerateStyle,
+  GlobalToken,
+  GenStyleFn,
+  TokenWithCommonCls,
+} from '../../theme/internal';
 import { genStyleHooks, mergeToken } from '../../theme/internal';
-import type { GenStyleFn, TokenWithCommonCls } from '../../theme/util/genComponentStyleHook';
 
 /** Component only token. Which will handle additional calculation of alias token */
 export interface ComponentToken {

components/notification/index.en-US.md

@@ -76,6 +76,8 @@ The properties of config are as follows:
 | closeIcon | Custom close icon | ReactNode | true | 5.7.0: close button will be hidden when setting to null or false |
 | getContainer | Return the mount node for Notification | () => HTMLNode | () => document.body |  |
 | placement | Position of Notification, can be one of `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | string | `topRight` |  |
+| showProgress | Show progress bar for auto-closing notification | boolean |  | 5.18.0 |
+| pauseOnHover | keep the timer running or not on hover | boolean | true | 5.18.0 |
 | rtl | Whether to enable RTL mode | boolean | false |  |
 | stack | Notifications will be stacked when amount is over threshold | boolean \| `{ threshold: number }` | `{ threshold: 3 }` | 5.10.0 |
 | top | Distance from the top of the viewport, when `placement` is `top` `topRight` or `topLeft` (unit: pixels) | number | 24 |  |
@@ -109,6 +111,8 @@ notification.config({
 | duration | Time in seconds before Notification is closed. When set to 0 or null, it will never be closed automatically | number | 4.5 |  |
 | getContainer | Return the mount node for Notification, but still display at fullScreen | () => HTMLNode | () => document.body |  |
 | placement | Position of Notification, can be one of `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | string | `topRight` |  |
+| showProgress | Show progress bar for auto-closing notification | boolean |  | 5.18.0 |
+| pauseOnHover | keep the timer running or not on hover | boolean | true | 5.18.0 |
 | rtl | Whether to enable RTL mode | boolean | false |  |
 | top | Distance from the top of the viewport, when `placement` is `top` `topRight` or `topLeft` (unit: pixels) | number | 24 |  |
 | maxCount | Max Notification show, drop oldest if exceed limit | number | - | 4.17.0 |

components/notification/index.zh-CN.md

@@ -55,6 +55,8 @@ config 参数如下：
 | closeIcon | 自定义关闭图标 | ReactNode | true | 5.7.0：设置为 null 或 false 时隐藏关闭按钮 |
 | description | 通知提醒内容，必选 | ReactNode | - | - |
 | duration | 默认 4.5 秒后自动关闭，配置为 null 则不自动关闭 | number | 4.5 | - |
+| showProgress | 显示自动关闭通知框的进度条 | boolean |  | 5.18.0 |
+| pauseOnHover | 悬停时是否暂停计时器 | boolean | true | 5.18.0 |
 | icon | 自定义图标 | ReactNode | - | - |
 | key | 当前通知唯一标志 | string | - | - |
 | message | 通知提醒标题，必选 | ReactNode | - | - |
@@ -75,6 +77,8 @@ config 参数如下：
 | closeIcon | 自定义关闭图标 | ReactNode | true | 5.7.0：设置为 null 或 false 时隐藏关闭按钮 |
 | getContainer | 配置渲染节点的输出位置 | () => HTMLNode | () => document.body |  |
 | placement | 弹出位置，可选 `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | string | `topRight` |  |
+| showProgress | 显示自动关闭通知框的进度条 | boolean |  | 5.18.0 |
+| pauseOnHover | 悬停时是否暂停计时器 | boolean | true | 5.18.0 |
 | rtl | 是否开启 RTL 模式 | boolean | false |  |
 | stack | 堆叠模式，超过阈值时会将所有消息收起 | boolean \| `{ threshold: number }` | `{ threshold: 3 }` | 5.10.0 |
 | top | 消息从顶部弹出时，距离顶部的位置，单位像素 | number | 24 |  |

components/notification/style/index.ts

@@ -3,9 +3,13 @@ import { Keyframes, unit } from '@ant-design/cssinjs';
 
 import { CONTAINER_MAX_OFFSET } from '../../_util/hooks/useZIndex';
 import { genFocusStyle, resetComponent } from '../../style';
-import type { AliasToken, FullToken, GenerateStyle } from '../../theme/internal';
+import type {
+  AliasToken,
+  FullToken,
+  GenerateStyle,
+  GenStyleFn,
+} from '../../theme/internal';
 import { genStyleHooks, mergeToken } from '../../theme/internal';
-import type { GenStyleFn } from '../../theme/util/genComponentStyleHook';
 import genNotificationPlacementStyle from './placement';
 import genStackStyle from './stack';
 

components/pagination/demo/mini.md

@@ -7,7 +7,7 @@
 Mini size pagination.
 
 <style>
-#components-pagination-demo-mini .ant-pagination:not(:last-child) {
+#pagination-demo-mini .ant-pagination:not(:last-child) {
   margin-bottom: 24px;
 }
 </style>

components/pagination/design/behavior-pattern.tsx

@@ -17,19 +17,19 @@ const BehaviorPattern: React.FC = () => (
           id: '200000005',
           label: '调整单页展示条数',
           targetType: 'extension',
-          link: 'components-pagination-index-tab-design-demo-page-size',
+          link: 'pagination-index-tab-design-demo-page-size',
         },
         {
           id: '200000006',
           label: '快速跳转',
           targetType: 'extension',
-          link: 'components-pagination-index-tab-design-demo-quick-jump',
+          link: 'pagination-index-tab-design-demo-quick-jump',
         },
         {
           id: '200000007',
           label: '了解数据总量',
           targetType: 'extension',
-          link: 'components-pagination-index-tab-design-demo-total',
+          link: 'pagination-index-tab-design-demo-total',
         },
       ],
     }}

components/pagination/style/bordered.ts

@@ -3,7 +3,7 @@ import { unit } from '@ant-design/cssinjs';
 import type { PaginationToken } from '.';
 import { prepareComponentToken, prepareToken } from '.';
 import type { GenerateStyle } from '../../theme/interface';
-import { genSubStyleComponent } from '../../theme/util/genComponentStyleHook';
+import { genSubStyleComponent } from '../../theme/internal';
 
 const genBorderedStyle: GenerateStyle<PaginationToken> = (token) => {
   const { componentCls } = token;

components/pagination/style/index.ts

@@ -1,6 +1,5 @@
 import { unit } from '@ant-design/cssinjs';
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { GenStyleFn } from 'antd/es/theme/util/genComponentStyleHook';
 
 import {
   genBasicInputStyle,
@@ -11,7 +10,12 @@ import {
 import type { SharedComponentToken, SharedInputToken } from '../../input/style/token';
 import { genBaseOutlinedStyle, genDisabledStyle } from '../../input/style/variants';
 import { genFocusOutline, genFocusStyle, resetComponent } from '../../style';
-import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
+import type {
+  FullToken,
+  GenerateStyle,
+  GetDefaultToken,
+  GenStyleFn,
+} from '../../theme/internal';
 import { genStyleHooks, mergeToken } from '../../theme/internal';
 
 export interface ComponentToken {

components/popconfirm/demo/placement.md

@@ -7,7 +7,7 @@
 There are 12 `placement` options available. Use `arrow: { pointAtCenter: true }` if you want the arrow to point at the center of target.
 
 <style>
-#components-popconfirm-demo-placement .ant-btn {
+#popconfirm-demo-placement .ant-btn {
   margin-left: 0;
   margin-right: 8px;
   margin-bottom: 8px;
@@ -15,7 +15,7 @@ There are 12 `placement` options available. Use `arrow: { pointAtCenter: true }`
   text-align: center;
   padding: 0;
 }
-#components-popconfirm-demo-placement .ant-btn-rtl {
+#popconfirm-demo-placement .ant-btn-rtl {
   margin-left: 8px;
   margin-right: 0;
 }

components/progress/design/behavior-pattern.tsx

@@ -16,12 +16,12 @@ const BehaviorPattern: React.FC = () => (
             {
               id: '707000085',
               label: '了解任务进度',
-              link: 'components-progress-index-tab-design-demo-progress',
+              link: 'progress-index-tab-design-demo-progress',
             },
             {
               id: '707000086',
               label: '了解任务状态',
-              link: 'components-progress-index-tab-design-demo-status',
+              link: 'progress-index-tab-design-demo-status',
             },
           ],
         },
@@ -29,7 +29,7 @@ const BehaviorPattern: React.FC = () => (
           id: '200000005',
           label: '查看进度相关描述',
           targetType: 'extension',
-          link: 'components-progress-index-tab-design-demo-info',
+          link: 'progress-index-tab-design-demo-info',
         },
       ],
     }}

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

@@ -9126,11 +9126,7 @@ Array [
 ]
 `;
 
-exports[`renders components/select/demo/placement.tsx extend context correctly 2`] = `
+exports[`renders components/select/demo/placement.tsx extend context correctly 2`] = `[]`;
-[
-  "Warning: [antd: Select] \`dropdownMatchSelectWidth\` is deprecated. Please use \`popupMatchSelectWidth\` instead.",
-]
-`;
 
 exports[`renders components/select/demo/placement-debug.tsx extend context correctly 1`] = `
 <div

components/select/demo/placement.tsx

@@ -24,7 +24,7 @@ const App: React.FC = () => {
       <Select
         defaultValue="HangZhou"
         style={{ width: 120 }}
-        dropdownMatchSelectWidth={false}
+        popupMatchSelectWidth={false}
         placement={placement}
         options={[
           {

components/select/style/multiple.ts

@@ -3,8 +3,7 @@ import { unit } from '@ant-design/cssinjs';
 
 import { resetIcon } from '../../style';
 import { mergeToken } from '../../theme/internal';
-import type { AliasToken } from '../../theme/internal';
+import type { AliasToken, TokenWithCommonCls } from '../../theme/internal';
-import type { TokenWithCommonCls } from '../../theme/util/genComponentStyleHook';
 import type { SelectToken } from './token';
 
 type SelectItemToken = Pick<

components/select/style/token.ts

@@ -1,5 +1,5 @@
 import type { CSSProperties } from 'react';
-import type { FullToken, GetDefaultToken } from 'antd/es/theme/util/genComponentStyleHook';
+import type { FullToken, GetDefaultToken } from 'antd/es/theme/internal';
 
 export interface MultipleSelectorToken {
   /**

components/skeleton/style/index.ts

@@ -1,9 +1,13 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import { Keyframes, unit } from '@ant-design/cssinjs';
 
-import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
+import type {
+  FullToken,
+  GenerateStyle,
+  GetDefaultToken,
+  CSSUtil,
+} from '../../theme/internal';
 import { genStyleHooks, mergeToken } from '../../theme/internal';
-import type { CSSUtil } from '../../theme/util/genComponentStyleHook';
 
 export type ComponentToken = {
   /** @deprecated use gradientFromColor instead. */

components/slider/demo/mark.md

@@ -7,10 +7,10 @@
 Using `marks` property to mark a graduated slider, use `value` or `defaultValue` to specify the position of thumb. When `included` is false, means that different thumbs are coordinative. when `step` is null, users can only slide the thumbs onto marks.
 
 <style>
-#components-slider-demo-mark h4 {
+#slider-demo-mark h4 {
   margin: 0 0 16px;
 }
-#components-slider-demo-mark .ant-slider-with-marks {
+#slider-demo-mark .ant-slider-with-marks {
   margin-bottom: 44px;
 }
 </style>