From fbab5df6559be6391783cd0837bef70c212695eb Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Mon, 5 Dec 2022 14:06:42 +0800
Subject: [PATCH 01/41] docs: update Layout demo (#39255)

* docs: update Layout demo

* chore: code clean

* chore: update snapshot
---
 .../__snapshots__/demo-extend.test.ts.snap    | 57 +++++++-------
 .../__tests__/__snapshots__/demo.test.ts.snap | 57 +++++++-------
 components/layout/demo/basic.md               | 12 ---
 .../layout/demo/custom-trigger-debug.tsx      |  9 ++-
 components/layout/demo/custom-trigger.md      |  4 -
 components/layout/demo/custom-trigger.tsx     |  9 ++-
 components/layout/demo/fixed-sider.md         | 17 -----
 components/layout/demo/fixed-sider.tsx        | 76 ++++++++++---------
 components/layout/demo/fixed.md               | 19 -----
 components/layout/demo/fixed.tsx              | 68 ++++++++++-------
 components/layout/demo/responsive.md          | 14 ----
 components/layout/demo/responsive.tsx         | 76 ++++++++++---------
 components/layout/demo/side.md                | 18 -----
 components/layout/demo/side.tsx               | 11 ++-
 components/layout/demo/top-side-2.md          |  4 -
 components/layout/demo/top-side-2.tsx         | 74 +++++++++---------
 components/layout/demo/top-side.md            |  4 -
 components/layout/demo/top-side.tsx           | 64 +++++++++-------
 components/layout/demo/top.md                 |  7 --
 components/layout/demo/top.tsx                | 66 +++++++++-------
 components/layout/index.en-US.md              |  9 ---
 components/layout/index.zh-CN.md              |  9 ---
 22 files changed, 306 insertions(+), 378 deletions(-)

diff --git a/components/layout/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/layout/__tests__/__snapshots__/demo-extend.test.ts.snap
index 4ccce9523e49..06e84c120066 100644
--- a/components/layout/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/layout/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -380,8 +380,8 @@ exports[`renders ./components/layout/demo/custom-trigger.tsx extend context corr
     class="ant-layout site-layout"
   >
     <header
-      class="ant-layout-header site-layout-background"
-      style="padding:0"
+      class="ant-layout-header"
+      style="padding:0;background:#ffffff"
     >
       <span
         aria-label="menu-fold"
@@ -405,8 +405,8 @@ exports[`renders ./components/layout/demo/custom-trigger.tsx extend context corr
       </span>
     </header>
     <main
-      class="ant-layout-content site-layout-background"
-      style="margin:24px 16px;padding:24px;min-height:280px"
+      class="ant-layout-content"
+      style="margin:24px 16px;padding:24px;min-height:280px;background:#ffffff"
     >
       Content
     </main>
@@ -423,7 +423,7 @@ exports[`renders ./components/layout/demo/fixed.tsx extend context correctly 1`]
     style="position:sticky;top:0;z-index:1;width:100%"
   >
     <div
-      class="logo"
+      style="float:left;width:120px;height:31px;margin:16px 24px 16px 0;background:rgba(255, 255, 255, 0.2)"
     />
     <ul
       class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-dark"
@@ -656,7 +656,7 @@ exports[`renders ./components/layout/demo/fixed.tsx extend context correctly 1`]
   </header>
   <main
     class="ant-layout-content site-layout"
-    style="padding:0 50px;margin-top:64px"
+    style="padding:0 50px"
   >
     <nav
       class="ant-breadcrumb"
@@ -702,8 +702,7 @@ exports[`renders ./components/layout/demo/fixed.tsx extend context correctly 1`]
       </ol>
     </nav>
     <div
-      class="site-layout-background"
-      style="padding:24px;min-height:380px"
+      style="padding:24px;min-height:380px;background:#ffffff"
     >
       Content
     </div>
@@ -729,7 +728,7 @@ exports[`renders ./components/layout/demo/fixed-sider.tsx extend context correct
       class="ant-layout-sider-children"
     >
       <div
-        class="logo"
+        style="height:32px;margin:16px;background:rgba(255, 255, 255, 0.2)"
       />
       <ul
         class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark"
@@ -1350,16 +1349,15 @@ exports[`renders ./components/layout/demo/fixed-sider.tsx extend context correct
     style="margin-left:200px"
   >
     <header
-      class="ant-layout-header site-layout-background"
-      style="padding:0"
+      class="ant-layout-header"
+      style="padding:0;background:#ffffff"
     />
     <main
       class="ant-layout-content"
       style="margin:24px 16px 0;overflow:initial"
     >
       <div
-        class="site-layout-background"
-        style="padding:24px;text-align:center"
+        style="padding:24px;text-align:center;background:#ffffff"
       >
         <p>
           long content
@@ -1908,16 +1906,15 @@ exports[`renders ./components/layout/demo/responsive.tsx extend context correctl
     class="ant-layout"
   >
     <header
-      class="ant-layout-header site-layout-sub-header-background"
-      style="padding:0"
+      class="ant-layout-header"
+      style="padding:0;background:#ffffff"
     />
     <main
       class="ant-layout-content"
       style="margin:24px 16px 0"
     >
       <div
-        class="site-layout-background"
-        style="padding:24px;min-height:360px"
+        style="padding:24px;min-height:360px;background:#ffffff"
       >
         content
       </div>
@@ -1945,7 +1942,7 @@ exports[`renders ./components/layout/demo/side.tsx extend context correctly 1`]
       class="ant-layout-sider-children"
     >
       <div
-        class="logo"
+        style="height:32px;margin:16px;background:rgba(255, 255, 255, 0.2)"
       />
       <ul
         class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark"
@@ -2600,8 +2597,8 @@ exports[`renders ./components/layout/demo/side.tsx extend context correctly 1`]
     class="ant-layout site-layout"
   >
     <header
-      class="ant-layout-header site-layout-background"
-      style="padding:0"
+      class="ant-layout-header"
+      style="padding:0;background:#ffffff"
     />
     <main
       class="ant-layout-content"
@@ -2639,8 +2636,7 @@ exports[`renders ./components/layout/demo/side.tsx extend context correctly 1`]
         </ol>
       </nav>
       <div
-        class="site-layout-background"
-        style="padding:24px;min-height:360px"
+        style="padding:24px;min-height:360px;background:#ffffff"
       >
         Bill is a cat.
       </div>
@@ -3615,6 +3611,7 @@ exports[`renders ./components/layout/demo/top.tsx extend context correctly 1`] =
     </nav>
     <div
       class="site-layout-content"
+      style="background:#ffffff"
     >
       Content
     </div>
@@ -3915,12 +3912,12 @@ exports[`renders ./components/layout/demo/top-side.tsx extend context correctly
       </ol>
     </nav>
     <section
-      class="ant-layout site-layout-background"
-      style="padding:24px 0"
+      class="ant-layout"
+      style="padding:24px 0;background:#ffffff"
     >
       <aside
-        class="ant-layout-sider ant-layout-sider-dark site-layout-background"
-        style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
+        class="ant-layout-sider ant-layout-sider-dark"
+        style="background:#ffffff;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
       >
         <div
           class="ant-layout-sider-children"
@@ -5172,8 +5169,8 @@ exports[`renders ./components/layout/demo/top-side-2.tsx extend context correctl
     class="ant-layout"
   >
     <aside
-      class="ant-layout-sider ant-layout-sider-dark site-layout-background"
-      style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
+      class="ant-layout-sider ant-layout-sider-dark"
+      style="background:#ffffff;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
     >
       <div
         class="ant-layout-sider-children"
@@ -6213,8 +6210,8 @@ exports[`renders ./components/layout/demo/top-side-2.tsx extend context correctl
         </ol>
       </nav>
       <main
-        class="ant-layout-content site-layout-background"
-        style="padding:24px;margin:0;min-height:280px"
+        class="ant-layout-content"
+        style="padding:24px;margin:0;min-height:280px;background:#ffffff"
       >
         Content
       </main>
diff --git a/components/layout/__tests__/__snapshots__/demo.test.ts.snap b/components/layout/__tests__/__snapshots__/demo.test.ts.snap
index 84abce9d23e2..dcb33927f085 100644
--- a/components/layout/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/layout/__tests__/__snapshots__/demo.test.ts.snap
@@ -247,8 +247,8 @@ exports[`renders ./components/layout/demo/custom-trigger.tsx correctly 1`] = `
     class="ant-layout site-layout"
   >
     <header
-      class="ant-layout-header site-layout-background"
-      style="padding:0"
+      class="ant-layout-header"
+      style="padding:0;background:#ffffff"
     >
       <span
         aria-label="menu-fold"
@@ -272,8 +272,8 @@ exports[`renders ./components/layout/demo/custom-trigger.tsx correctly 1`] = `
       </span>
     </header>
     <main
-      class="ant-layout-content site-layout-background"
-      style="margin:24px 16px;padding:24px;min-height:280px"
+      class="ant-layout-content"
+      style="margin:24px 16px;padding:24px;min-height:280px;background:#ffffff"
     >
       Content
     </main>
@@ -290,7 +290,7 @@ exports[`renders ./components/layout/demo/fixed.tsx correctly 1`] = `
     style="position:sticky;top:0;z-index:1;width:100%"
   >
     <div
-      class="logo"
+      style="float:left;width:120px;height:31px;margin:16px 24px 16px 0;background:rgba(255, 255, 255, 0.2)"
     />
     <ul
       class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-dark"
@@ -379,7 +379,7 @@ exports[`renders ./components/layout/demo/fixed.tsx correctly 1`] = `
   </header>
   <main
     class="ant-layout-content site-layout"
-    style="padding:0 50px;margin-top:64px"
+    style="padding:0 50px"
   >
     <nav
       class="ant-breadcrumb"
@@ -425,8 +425,7 @@ exports[`renders ./components/layout/demo/fixed.tsx correctly 1`] = `
       </ol>
     </nav>
     <div
-      class="site-layout-background"
-      style="padding:24px;min-height:380px"
+      style="padding:24px;min-height:380px;background:#ffffff"
     >
       Content
     </div>
@@ -452,7 +451,7 @@ exports[`renders ./components/layout/demo/fixed-sider.tsx correctly 1`] = `
       class="ant-layout-sider-children"
     >
       <div
-        class="logo"
+        style="height:32px;margin:16px;background:rgba(255, 255, 255, 0.2)"
       />
       <ul
         class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark"
@@ -720,16 +719,15 @@ exports[`renders ./components/layout/demo/fixed-sider.tsx correctly 1`] = `
     style="margin-left:200px"
   >
     <header
-      class="ant-layout-header site-layout-background"
-      style="padding:0"
+      class="ant-layout-header"
+      style="padding:0;background:#ffffff"
     />
     <main
       class="ant-layout-content"
       style="margin:24px 16px 0;overflow:initial"
     >
       <div
-        class="site-layout-background"
-        style="padding:24px;text-align:center"
+        style="padding:24px;text-align:center;background:#ffffff"
       >
         <p>
           long content
@@ -1101,16 +1099,15 @@ exports[`renders ./components/layout/demo/responsive.tsx correctly 1`] = `
     class="ant-layout"
   >
     <header
-      class="ant-layout-header site-layout-sub-header-background"
-      style="padding:0"
+      class="ant-layout-header"
+      style="padding:0;background:#ffffff"
     />
     <main
       class="ant-layout-content"
       style="margin:24px 16px 0"
     >
       <div
-        class="site-layout-background"
-        style="padding:24px;min-height:360px"
+        style="padding:24px;min-height:360px;background:#ffffff"
       >
         content
       </div>
@@ -1138,7 +1135,7 @@ exports[`renders ./components/layout/demo/side.tsx correctly 1`] = `
       class="ant-layout-sider-children"
     >
       <div
-        class="logo"
+        style="height:32px;margin:16px;background:rgba(255, 255, 255, 0.2)"
       />
       <ul
         class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark"
@@ -1356,8 +1353,8 @@ exports[`renders ./components/layout/demo/side.tsx correctly 1`] = `
     class="ant-layout site-layout"
   >
     <header
-      class="ant-layout-header site-layout-background"
-      style="padding:0"
+      class="ant-layout-header"
+      style="padding:0;background:#ffffff"
     />
     <main
       class="ant-layout-content"
@@ -1395,8 +1392,7 @@ exports[`renders ./components/layout/demo/side.tsx correctly 1`] = `
         </ol>
       </nav>
       <div
-        class="site-layout-background"
-        style="padding:24px;min-height:360px"
+        style="padding:24px;min-height:360px;background:#ffffff"
       >
         Bill is a cat.
       </div>
@@ -1699,6 +1695,7 @@ exports[`renders ./components/layout/demo/top.tsx correctly 1`] = `
     </nav>
     <div
       class="site-layout-content"
+      style="background:#ffffff"
     >
       Content
     </div>
@@ -1855,12 +1852,12 @@ exports[`renders ./components/layout/demo/top-side.tsx correctly 1`] = `
       </ol>
     </nav>
     <section
-      class="ant-layout site-layout-background"
-      style="padding:24px 0"
+      class="ant-layout"
+      style="padding:24px 0;background:#ffffff"
     >
       <aside
-        class="ant-layout-sider ant-layout-sider-dark site-layout-background"
-        style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
+        class="ant-layout-sider ant-layout-sider-dark"
+        style="background:#ffffff;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
       >
         <div
           class="ant-layout-sider-children"
@@ -2171,8 +2168,8 @@ exports[`renders ./components/layout/demo/top-side-2.tsx correctly 1`] = `
     class="ant-layout"
   >
     <aside
-      class="ant-layout-sider ant-layout-sider-dark site-layout-background"
-      style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
+      class="ant-layout-sider ant-layout-sider-dark"
+      style="background:#ffffff;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
     >
       <div
         class="ant-layout-sider-children"
@@ -2415,8 +2412,8 @@ exports[`renders ./components/layout/demo/top-side-2.tsx correctly 1`] = `
         </ol>
       </nav>
       <main
-        class="ant-layout-content site-layout-background"
-        style="padding:24px;margin:0;min-height:280px"
+        class="ant-layout-content"
+        style="padding:24px;margin:0;min-height:280px;background:#ffffff"
       >
         Content
       </main>
diff --git a/components/layout/demo/basic.md b/components/layout/demo/basic.md
index 4e5be478abdc..6e2fb2a9cc70 100644
--- a/components/layout/demo/basic.md
+++ b/components/layout/demo/basic.md
@@ -15,12 +15,6 @@ Classic page layouts.
   color: #fff;
   background: #7dbcea;
 }
-[data-theme="dark"] #components-layout-demo-basic .ant-layout-header {
-  background: #6aa0c7;
-}
-[data-theme="dark"] #components-layout-demo-basic .ant-layout-footer {
-  background: #6aa0c7;
-}
 #components-layout-demo-basic .ant-layout-footer {
   line-height: 1.5;
 }
@@ -29,18 +23,12 @@ Classic page layouts.
   line-height: 120px;
   background: #3ba0e9;
 }
-[data-theme="dark"] #components-layout-demo-basic .ant-layout-sider {
-  background: #3499ec;
-}
 #components-layout-demo-basic .ant-layout-content {
   min-height: 120px;
   color: #fff;
   line-height: 120px;
   background: rgba(16, 142, 233, 1);
 }
-[data-theme="dark"] #components-layout-demo-basic .ant-layout-content {
-  background: #107bcb;
-}
 #components-layout-demo-basic > .code-box-demo > .ant-layout + .ant-layout {
   margin-top: 48px;
 }
diff --git a/components/layout/demo/custom-trigger-debug.tsx b/components/layout/demo/custom-trigger-debug.tsx
index cea718e6e7b7..c6ed4d4df36c 100644
--- a/components/layout/demo/custom-trigger-debug.tsx
+++ b/components/layout/demo/custom-trigger-debug.tsx
@@ -9,7 +9,7 @@ import {
   UserOutlined,
 } from '@ant-design/icons';
 import type { MenuProps } from 'antd';
-import { Layout, Menu } from 'antd';
+import { Layout, Menu, theme } from 'antd';
 
 const { Header, Sider, Content } = Layout;
 
@@ -66,6 +66,9 @@ const items: MenuProps['items'] = [
 
 const App: React.FC = () => {
   const [collapsed, setCollapsed] = useState(true);
+  const {
+    token: { colorBgContainer },
+  } = theme.useToken();
 
   return (
     <Layout>
@@ -80,18 +83,18 @@ const App: React.FC = () => {
         />
       </Sider>
       <Layout>
-        <Header className="site-layout-background" style={{ padding: 0 }}>
+        <Header style={{ padding: 0, background: colorBgContainer }}>
           {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
             className: 'trigger',
             onClick: () => setCollapsed(!collapsed),
           })}
         </Header>
         <Content
-          className="site-layout-background"
           style={{
             margin: '24px 16px',
             padding: 24,
             minHeight: 280,
+            background: colorBgContainer,
           }}
         >
           Content
diff --git a/components/layout/demo/custom-trigger.md b/components/layout/demo/custom-trigger.md
index 98827a39673b..9b0d61d78796 100644
--- a/components/layout/demo/custom-trigger.md
+++ b/components/layout/demo/custom-trigger.md
@@ -24,8 +24,4 @@ If you want to use a customized trigger, you can hide the default one by setting
   margin: 16px;
   background: rgba(255, 255, 255, 0.3);
 }
-
-#components-layout-demo-custom-trigger .site-layout .site-layout-background {
-  background: #fff;
-}
 ```
diff --git a/components/layout/demo/custom-trigger.tsx b/components/layout/demo/custom-trigger.tsx
index 76a8ab945393..bf436c5ac0eb 100644
--- a/components/layout/demo/custom-trigger.tsx
+++ b/components/layout/demo/custom-trigger.tsx
@@ -6,12 +6,15 @@ import {
   UserOutlined,
   VideoCameraOutlined,
 } from '@ant-design/icons';
-import { Layout, Menu } from 'antd';
+import { Layout, Menu, theme } from 'antd';
 
 const { Header, Sider, Content } = Layout;
 
 const App: React.FC = () => {
   const [collapsed, setCollapsed] = useState(false);
+  const {
+    token: { colorBgContainer },
+  } = theme.useToken();
 
   return (
     <Layout>
@@ -41,18 +44,18 @@ const App: React.FC = () => {
         />
       </Sider>
       <Layout className="site-layout">
-        <Header className="site-layout-background" style={{ padding: 0 }}>
+        <Header style={{ padding: 0, background: colorBgContainer }}>
           {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
             className: 'trigger',
             onClick: () => setCollapsed(!collapsed),
           })}
         </Header>
         <Content
-          className="site-layout-background"
           style={{
             margin: '24px 16px',
             padding: 24,
             minHeight: 280,
+            background: colorBgContainer,
           }}
         >
           Content
diff --git a/components/layout/demo/fixed-sider.md b/components/layout/demo/fixed-sider.md
index c90b786223be..f19e70e0d13e 100644
--- a/components/layout/demo/fixed-sider.md
+++ b/components/layout/demo/fixed-sider.md
@@ -5,20 +5,3 @@
 ## en-US
 
 When dealing with long content, a fixed sider can provide a better user experience.
-
-```css
-#components-layout-demo-fixed-sider .logo {
-  height: 32px;
-  margin: 16px;
-  background: rgba(255, 255, 255, 0.2);
-}
-#components-layout-demo-fixed-sider .site-layout .site-layout-background {
-  background: #fff;
-}
-```
-
-<style>
-  [data-theme="dark"] .site-layout .site-layout-background {
-    background: #141414;
-  }
-</style>
diff --git a/components/layout/demo/fixed-sider.tsx b/components/layout/demo/fixed-sider.tsx
index bf6db0ffa47c..82be9021cf89 100644
--- a/components/layout/demo/fixed-sider.tsx
+++ b/components/layout/demo/fixed-sider.tsx
@@ -10,7 +10,7 @@ import {
   VideoCameraOutlined,
 } from '@ant-design/icons';
 import type { MenuProps } from 'antd';
-import { Layout, Menu } from 'antd';
+import { Layout, Menu, theme } from 'antd';
 
 const { Header, Content, Footer, Sider } = Layout;
 
@@ -29,40 +29,46 @@ const items: MenuProps['items'] = [
   label: `nav ${index + 1}`,
 }));
 
-const App: React.FC = () => (
-  <Layout hasSider>
-    <Sider
-      style={{
-        overflow: 'auto',
-        height: '100vh',
-        position: 'fixed',
-        left: 0,
-        top: 0,
-        bottom: 0,
-      }}
-    >
-      <div className="logo" />
-      <Menu theme="dark" mode="inline" defaultSelectedKeys={['4']} items={items} />
-    </Sider>
-    <Layout className="site-layout" style={{ marginLeft: 200 }}>
-      <Header className="site-layout-background" style={{ padding: 0 }} />
-      <Content style={{ margin: '24px 16px 0', overflow: 'initial' }}>
-        <div className="site-layout-background" style={{ padding: 24, textAlign: 'center' }}>
-          <p>long content</p>
-          {
-            // indicates very long content
-            Array.from({ length: 100 }, (_, index) => (
-              <React.Fragment key={index}>
-                {index % 20 === 0 && index ? 'more' : '...'}
-                <br />
-              </React.Fragment>
-            ))
-          }
-        </div>
-      </Content>
-      <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
+const App: React.FC = () => {
+  const {
+    token: { colorBgContainer },
+  } = theme.useToken();
+
+  return (
+    <Layout hasSider>
+      <Sider
+        style={{
+          overflow: 'auto',
+          height: '100vh',
+          position: 'fixed',
+          left: 0,
+          top: 0,
+          bottom: 0,
+        }}
+      >
+        <div style={{ height: 32, margin: 16, background: 'rgba(255, 255, 255, 0.2)' }} />
+        <Menu theme="dark" mode="inline" defaultSelectedKeys={['4']} items={items} />
+      </Sider>
+      <Layout className="site-layout" style={{ marginLeft: 200 }}>
+        <Header style={{ padding: 0, background: colorBgContainer }} />
+        <Content style={{ margin: '24px 16px 0', overflow: 'initial' }}>
+          <div style={{ padding: 24, textAlign: 'center', background: colorBgContainer }}>
+            <p>long content</p>
+            {
+              // indicates very long content
+              Array.from({ length: 100 }, (_, index) => (
+                <React.Fragment key={index}>
+                  {index % 20 === 0 && index ? 'more' : '...'}
+                  <br />
+                </React.Fragment>
+              ))
+            }
+          </div>
+        </Content>
+        <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
+      </Layout>
     </Layout>
-  </Layout>
-);
+  );
+};
 
 export default App;
diff --git a/components/layout/demo/fixed.md b/components/layout/demo/fixed.md
index 721ded4ea816..b68792873d19 100644
--- a/components/layout/demo/fixed.md
+++ b/components/layout/demo/fixed.md
@@ -5,22 +5,3 @@
 ## en-US
 
 Fixed Header is generally used to fix the top navigation to facilitate page switching.
-
-```css
-#components-layout-demo-fixed .logo {
-  float: left;
-  width: 120px;
-  height: 31px;
-  margin: 16px 24px 16px 0;
-  background: rgba(255, 255, 255, 0.2);
-}
-#components-layout-demo-fixed .site-layout .site-layout-background {
-  background: #fff;
-}
-```
-
-<style>
-[data-theme="dark"] .site-layout .site-layout-background {
-  background: #141414;
-}
-</style>
diff --git a/components/layout/demo/fixed.tsx b/components/layout/demo/fixed.tsx
index 5c7aa4abce93..79d2901f7326 100644
--- a/components/layout/demo/fixed.tsx
+++ b/components/layout/demo/fixed.tsx
@@ -1,34 +1,46 @@
 import React from 'react';
-import { Breadcrumb, Layout, Menu } from 'antd';
+import { Breadcrumb, Layout, Menu, theme } from 'antd';
 
 const { Header, Content, Footer } = Layout;
 
-const App: React.FC = () => (
-  <Layout>
-    <Header style={{ position: 'sticky', top: 0, zIndex: 1, width: '100%' }}>
-      <div className="logo" />
-      <Menu
-        theme="dark"
-        mode="horizontal"
-        defaultSelectedKeys={['2']}
-        items={new Array(3).fill(null).map((_, index) => ({
-          key: String(index + 1),
-          label: `nav ${index + 1}`,
-        }))}
-      />
-    </Header>
-    <Content className="site-layout" style={{ padding: '0 50px', marginTop: 64 }}>
-      <Breadcrumb style={{ margin: '16px 0' }}>
-        <Breadcrumb.Item>Home</Breadcrumb.Item>
-        <Breadcrumb.Item>List</Breadcrumb.Item>
-        <Breadcrumb.Item>App</Breadcrumb.Item>
-      </Breadcrumb>
-      <div className="site-layout-background" style={{ padding: 24, minHeight: 380 }}>
-        Content
-      </div>
-    </Content>
-    <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
-  </Layout>
-);
+const App: React.FC = () => {
+  const {
+    token: { colorBgContainer },
+  } = theme.useToken();
+
+  return (
+    <Layout>
+      <Header style={{ position: 'sticky', top: 0, zIndex: 1, width: '100%' }}>
+        <div
+          style={{
+            float: 'left',
+            width: 120,
+            height: 31,
+            margin: '16px 24px 16px 0',
+            background: 'rgba(255, 255, 255, 0.2)',
+          }}
+        />
+        <Menu
+          theme="dark"
+          mode="horizontal"
+          defaultSelectedKeys={['2']}
+          items={new Array(3).fill(null).map((_, index) => ({
+            key: String(index + 1),
+            label: `nav ${index + 1}`,
+          }))}
+        />
+      </Header>
+      <Content className="site-layout" style={{ padding: '0 50px' }}>
+        <Breadcrumb style={{ margin: '16px 0' }}>
+          <Breadcrumb.Item>Home</Breadcrumb.Item>
+          <Breadcrumb.Item>List</Breadcrumb.Item>
+          <Breadcrumb.Item>App</Breadcrumb.Item>
+        </Breadcrumb>
+        <div style={{ padding: 24, minHeight: 380, background: colorBgContainer }}>Content</div>
+      </Content>
+      <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
+    </Layout>
+  );
+};
 
 export default App;
diff --git a/components/layout/demo/responsive.md b/components/layout/demo/responsive.md
index 3a50b89dd7d5..ee8ecb0d816a 100644
--- a/components/layout/demo/responsive.md
+++ b/components/layout/demo/responsive.md
@@ -16,18 +16,4 @@ Layout.Sider supports responsive layout.
   margin: 16px;
   background: rgba(255, 255, 255, 0.2);
 }
-
-#components-layout-demo-responsive .site-layout-sub-header-background {
-  background: #fff;
-}
-
-#components-layout-demo-responsive .site-layout-background {
-  background: #fff;
-}
 ```
-
-<style>
-  [data-theme="dark"] .site-layout-sub-header-background {
-    background: #141414;
-  }
-</style>
diff --git a/components/layout/demo/responsive.tsx b/components/layout/demo/responsive.tsx
index 35f47ebf8273..33d859935a0d 100644
--- a/components/layout/demo/responsive.tsx
+++ b/components/layout/demo/responsive.tsx
@@ -1,45 +1,49 @@
 import React from 'react';
 import { UploadOutlined, UserOutlined, VideoCameraOutlined } from '@ant-design/icons';
-import { Layout, Menu } from 'antd';
+import { Layout, Menu, theme } from 'antd';
 
 const { Header, Content, Footer, Sider } = Layout;
 
-const App: React.FC = () => (
-  <Layout>
-    <Sider
-      breakpoint="lg"
-      collapsedWidth="0"
-      onBreakpoint={(broken) => {
-        console.log(broken);
-      }}
-      onCollapse={(collapsed, type) => {
-        console.log(collapsed, type);
-      }}
-    >
-      <div className="logo" />
-      <Menu
-        theme="dark"
-        mode="inline"
-        defaultSelectedKeys={['4']}
-        items={[UserOutlined, VideoCameraOutlined, UploadOutlined, UserOutlined].map(
-          (icon, index) => ({
-            key: String(index + 1),
-            icon: React.createElement(icon),
-            label: `nav ${index + 1}`,
-          }),
-        )}
-      />
-    </Sider>
+const App: React.FC = () => {
+  const {
+    token: { colorBgContainer },
+  } = theme.useToken();
+
+  return (
     <Layout>
-      <Header className="site-layout-sub-header-background" style={{ padding: 0 }} />
-      <Content style={{ margin: '24px 16px 0' }}>
-        <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
-          content
-        </div>
-      </Content>
-      <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
+      <Sider
+        breakpoint="lg"
+        collapsedWidth="0"
+        onBreakpoint={(broken) => {
+          console.log(broken);
+        }}
+        onCollapse={(collapsed, type) => {
+          console.log(collapsed, type);
+        }}
+      >
+        <div className="logo" />
+        <Menu
+          theme="dark"
+          mode="inline"
+          defaultSelectedKeys={['4']}
+          items={[UserOutlined, VideoCameraOutlined, UploadOutlined, UserOutlined].map(
+            (icon, index) => ({
+              key: String(index + 1),
+              icon: React.createElement(icon),
+              label: `nav ${index + 1}`,
+            }),
+          )}
+        />
+      </Sider>
+      <Layout>
+        <Header style={{ padding: 0, background: colorBgContainer }} />
+        <Content style={{ margin: '24px 16px 0' }}>
+          <div style={{ padding: 24, minHeight: 360, background: colorBgContainer }}>content</div>
+        </Content>
+        <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
+      </Layout>
     </Layout>
-  </Layout>
-);
+  );
+};
 
 export default App;
diff --git a/components/layout/demo/side.md b/components/layout/demo/side.md
index 84ceff397b39..ef1954abf6ac 100644
--- a/components/layout/demo/side.md
+++ b/components/layout/demo/side.md
@@ -13,21 +13,3 @@ Two-columns layout. The sider menu can be collapsed when horizontal space is lim
 Generally, the mainnav is placed on the left side of the page, and the secondary menu is placed on the top of the working area. Contents will adapt the layout to the viewing area to improve the horizontal space usage, while the layout of the whole page is not stable.
 
 The level of the aside navigation is scalable. The first, second, and third level navigations could be present more fluently and relevantly, and aside navigation can be fixed, allowing the user to quickly switch and spot the current position, improving the user experience. However, this navigation occupies some horizontal space of the contents.
-
-```css
-#components-layout-demo-side .logo {
-  height: 32px;
-  margin: 16px;
-  background: rgba(255, 255, 255, 0.3);
-}
-
-#components-layout-demo-side .site-layout .site-layout-background {
-  background: #fff;
-}
-```
-
-<style>
-  [data-theme="dark"] .site-layout .site-layout-background {
-    background: #141414;
-  }
-</style>
diff --git a/components/layout/demo/side.tsx b/components/layout/demo/side.tsx
index 1e3b5a4ad9c6..9a6a98dc83e2 100644
--- a/components/layout/demo/side.tsx
+++ b/components/layout/demo/side.tsx
@@ -7,7 +7,7 @@ import {
   UserOutlined,
 } from '@ant-design/icons';
 import type { MenuProps } from 'antd';
-import { Breadcrumb, Layout, Menu } from 'antd';
+import { Breadcrumb, Layout, Menu, theme } from 'antd';
 
 const { Header, Content, Footer, Sider } = Layout;
 
@@ -41,21 +41,24 @@ const items: MenuItem[] = [
 
 const App: React.FC = () => {
   const [collapsed, setCollapsed] = useState(false);
+  const {
+    token: { colorBgContainer },
+  } = theme.useToken();
 
   return (
     <Layout style={{ minHeight: '100vh' }}>
       <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
-        <div className="logo" />
+        <div style={{ height: 32, margin: 16, background: 'rgba(255, 255, 255, 0.2)' }} />
         <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={items} />
       </Sider>
       <Layout className="site-layout">
-        <Header className="site-layout-background" style={{ padding: 0 }} />
+        <Header style={{ padding: 0, background: colorBgContainer }} />
         <Content style={{ margin: '0 16px' }}>
           <Breadcrumb style={{ margin: '16px 0' }}>
             <Breadcrumb.Item>User</Breadcrumb.Item>
             <Breadcrumb.Item>Bill</Breadcrumb.Item>
           </Breadcrumb>
-          <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
+          <div style={{ padding: 24, minHeight: 360, background: colorBgContainer }}>
             Bill is a cat.
           </div>
         </Content>
diff --git a/components/layout/demo/top-side-2.md b/components/layout/demo/top-side-2.md
index 0ea4993b0517..638204f3b1fc 100644
--- a/components/layout/demo/top-side-2.md
+++ b/components/layout/demo/top-side-2.md
@@ -19,8 +19,4 @@ Both the top navigation and the sidebar, commonly used in application site.
   float: right;
   margin: 16px 0 16px 24px;
 }
-
-#components-layout-demo-top-side-2 .site-layout-background {
-  background: #fff;
-}
 ```
diff --git a/components/layout/demo/top-side-2.tsx b/components/layout/demo/top-side-2.tsx
index 0b90ce8d87a3..211633611f09 100644
--- a/components/layout/demo/top-side-2.tsx
+++ b/components/layout/demo/top-side-2.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { LaptopOutlined, NotificationOutlined, UserOutlined } from '@ant-design/icons';
 import type { MenuProps } from 'antd';
-import { Breadcrumb, Layout, Menu } from 'antd';
+import { Breadcrumb, Layout, Menu, theme } from 'antd';
 
 const { Header, Content, Sider } = Layout;
 
@@ -30,41 +30,47 @@ const items2: MenuProps['items'] = [UserOutlined, LaptopOutlined, NotificationOu
   },
 );
 
-const App: React.FC = () => (
-  <Layout>
-    <Header className="header">
-      <div className="logo" />
-      <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']} items={items1} />
-    </Header>
+const App: React.FC = () => {
+  const {
+    token: { colorBgContainer },
+  } = theme.useToken();
+
+  return (
     <Layout>
-      <Sider width={200} className="site-layout-background">
-        <Menu
-          mode="inline"
-          defaultSelectedKeys={['1']}
-          defaultOpenKeys={['sub1']}
-          style={{ height: '100%', borderRight: 0 }}
-          items={items2}
-        />
-      </Sider>
-      <Layout style={{ padding: '0 24px 24px' }}>
-        <Breadcrumb style={{ margin: '16px 0' }}>
-          <Breadcrumb.Item>Home</Breadcrumb.Item>
-          <Breadcrumb.Item>List</Breadcrumb.Item>
-          <Breadcrumb.Item>App</Breadcrumb.Item>
-        </Breadcrumb>
-        <Content
-          className="site-layout-background"
-          style={{
-            padding: 24,
-            margin: 0,
-            minHeight: 280,
-          }}
-        >
-          Content
-        </Content>
+      <Header className="header">
+        <div className="logo" />
+        <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']} items={items1} />
+      </Header>
+      <Layout>
+        <Sider width={200} style={{ background: colorBgContainer }}>
+          <Menu
+            mode="inline"
+            defaultSelectedKeys={['1']}
+            defaultOpenKeys={['sub1']}
+            style={{ height: '100%', borderRight: 0 }}
+            items={items2}
+          />
+        </Sider>
+        <Layout style={{ padding: '0 24px 24px' }}>
+          <Breadcrumb style={{ margin: '16px 0' }}>
+            <Breadcrumb.Item>Home</Breadcrumb.Item>
+            <Breadcrumb.Item>List</Breadcrumb.Item>
+            <Breadcrumb.Item>App</Breadcrumb.Item>
+          </Breadcrumb>
+          <Content
+            style={{
+              padding: 24,
+              margin: 0,
+              minHeight: 280,
+              background: colorBgContainer,
+            }}
+          >
+            Content
+          </Content>
+        </Layout>
       </Layout>
     </Layout>
-  </Layout>
-);
+  );
+};
 
 export default App;
diff --git a/components/layout/demo/top-side.md b/components/layout/demo/top-side.md
index 348bbf460381..7c3d0e5900a3 100644
--- a/components/layout/demo/top-side.md
+++ b/components/layout/demo/top-side.md
@@ -19,8 +19,4 @@ Both the top navigation and the sidebar, commonly used in documentation site.
   float: right;
   margin: 16px 0 16px 24px;
 }
-
-#components-layout-demo-top-side .site-layout-background {
-  background: #fff;
-}
 ```
diff --git a/components/layout/demo/top-side.tsx b/components/layout/demo/top-side.tsx
index 07c94906fed2..1a5933230c4d 100644
--- a/components/layout/demo/top-side.tsx
+++ b/components/layout/demo/top-side.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { LaptopOutlined, NotificationOutlined, UserOutlined } from '@ant-design/icons';
 import type { MenuProps } from 'antd';
-import { Breadcrumb, Layout, Menu } from 'antd';
+import { Breadcrumb, Layout, Menu, theme } from 'antd';
 
 const { Header, Content, Footer, Sider } = Layout;
 
@@ -30,33 +30,39 @@ const items2: MenuProps['items'] = [UserOutlined, LaptopOutlined, NotificationOu
   },
 );
 
-const App: React.FC = () => (
-  <Layout>
-    <Header className="header">
-      <div className="logo" />
-      <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']} items={items1} />
-    </Header>
-    <Content style={{ padding: '0 50px' }}>
-      <Breadcrumb style={{ margin: '16px 0' }}>
-        <Breadcrumb.Item>Home</Breadcrumb.Item>
-        <Breadcrumb.Item>List</Breadcrumb.Item>
-        <Breadcrumb.Item>App</Breadcrumb.Item>
-      </Breadcrumb>
-      <Layout className="site-layout-background" style={{ padding: '24px 0' }}>
-        <Sider className="site-layout-background" width={200}>
-          <Menu
-            mode="inline"
-            defaultSelectedKeys={['1']}
-            defaultOpenKeys={['sub1']}
-            style={{ height: '100%' }}
-            items={items2}
-          />
-        </Sider>
-        <Content style={{ padding: '0 24px', minHeight: 280 }}>Content</Content>
-      </Layout>
-    </Content>
-    <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
-  </Layout>
-);
+const App: React.FC = () => {
+  const {
+    token: { colorBgContainer },
+  } = theme.useToken();
+
+  return (
+    <Layout>
+      <Header className="header">
+        <div className="logo" />
+        <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']} items={items1} />
+      </Header>
+      <Content style={{ padding: '0 50px' }}>
+        <Breadcrumb style={{ margin: '16px 0' }}>
+          <Breadcrumb.Item>Home</Breadcrumb.Item>
+          <Breadcrumb.Item>List</Breadcrumb.Item>
+          <Breadcrumb.Item>App</Breadcrumb.Item>
+        </Breadcrumb>
+        <Layout style={{ padding: '24px 0', background: colorBgContainer }}>
+          <Sider style={{ background: colorBgContainer }} width={200}>
+            <Menu
+              mode="inline"
+              defaultSelectedKeys={['1']}
+              defaultOpenKeys={['sub1']}
+              style={{ height: '100%' }}
+              items={items2}
+            />
+          </Sider>
+          <Content style={{ padding: '0 24px', minHeight: 280 }}>Content</Content>
+        </Layout>
+      </Content>
+      <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
+    </Layout>
+  );
+};
 
 export default App;
diff --git a/components/layout/demo/top.md b/components/layout/demo/top.md
index 8daa32345f91..b5ffbe9e79f0 100644
--- a/components/layout/demo/top.md
+++ b/components/layout/demo/top.md
@@ -16,7 +16,6 @@ Top-bottom structure is conform with the top-bottom viewing habit, it's a classi
 .site-layout-content {
   min-height: 280px;
   padding: 24px;
-  background: #fff;
 }
 #components-layout-demo-top .logo {
   float: left;
@@ -30,9 +29,3 @@ Top-bottom structure is conform with the top-bottom viewing habit, it's a classi
   margin: 16px 0 16px 24px;
 }
 ```
-
-<style>
-  [data-theme="dark"] .site-layout-content {
-    background: #141414;
-  }
-</style>
diff --git a/components/layout/demo/top.tsx b/components/layout/demo/top.tsx
index 4ce8c2f8dae9..ccb0292ac583 100644
--- a/components/layout/demo/top.tsx
+++ b/components/layout/demo/top.tsx
@@ -1,35 +1,43 @@
 import React from 'react';
-import { Breadcrumb, Layout, Menu } from 'antd';
+import { Breadcrumb, Layout, Menu, theme } from 'antd';
 
 const { Header, Content, Footer } = Layout;
 
-const App: React.FC = () => (
-  <Layout className="layout">
-    <Header>
-      <div className="logo" />
-      <Menu
-        theme="dark"
-        mode="horizontal"
-        defaultSelectedKeys={['2']}
-        items={new Array(15).fill(null).map((_, index) => {
-          const key = index + 1;
-          return {
-            key,
-            label: `nav ${key}`,
-          };
-        })}
-      />
-    </Header>
-    <Content style={{ padding: '0 50px' }}>
-      <Breadcrumb style={{ margin: '16px 0' }}>
-        <Breadcrumb.Item>Home</Breadcrumb.Item>
-        <Breadcrumb.Item>List</Breadcrumb.Item>
-        <Breadcrumb.Item>App</Breadcrumb.Item>
-      </Breadcrumb>
-      <div className="site-layout-content">Content</div>
-    </Content>
-    <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
-  </Layout>
-);
+const App: React.FC = () => {
+  const {
+    token: { colorBgContainer },
+  } = theme.useToken();
+
+  return (
+    <Layout className="layout">
+      <Header>
+        <div className="logo" />
+        <Menu
+          theme="dark"
+          mode="horizontal"
+          defaultSelectedKeys={['2']}
+          items={new Array(15).fill(null).map((_, index) => {
+            const key = index + 1;
+            return {
+              key,
+              label: `nav ${key}`,
+            };
+          })}
+        />
+      </Header>
+      <Content style={{ padding: '0 50px' }}>
+        <Breadcrumb style={{ margin: '16px 0' }}>
+          <Breadcrumb.Item>Home</Breadcrumb.Item>
+          <Breadcrumb.Item>List</Breadcrumb.Item>
+          <Breadcrumb.Item>App</Breadcrumb.Item>
+        </Breadcrumb>
+        <div className="site-layout-content" style={{ background: colorBgContainer }}>
+          Content
+        </div>
+      </Content>
+      <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
+    </Layout>
+  );
+};
 
 export default App;
diff --git a/components/layout/index.en-US.md b/components/layout/index.en-US.md
index 222342567cb9..3f9668c0f9cc 100644
--- a/components/layout/index.en-US.md
+++ b/components/layout/index.en-US.md
@@ -126,12 +126,3 @@ The sidebar.
   xxl: '1600px',
 }
 ```
-
-<style>
-  [data-theme="dark"] .site-layout-background {
-    background: #141414;
-  }
-  [data-theme="dark"] .site-layout-header-background {
-    background: #1f1f1f;
-  }
-</style>
diff --git a/components/layout/index.zh-CN.md b/components/layout/index.zh-CN.md
index 3fca43cd3f66..14021ad8ed87 100644
--- a/components/layout/index.zh-CN.md
+++ b/components/layout/index.zh-CN.md
@@ -127,12 +127,3 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*4i58ToAcxaYAAAAAAA
   xxl: '1600px',
 }
 ```
-
-<style>
-  [data-theme="dark"] .site-layout-background {
-    background: #141414;
-  }
-  [data-theme="dark"] .site-layout-header-background {
-    background: #1f1f1f;
-  }
-</style>

From 240210a281e1eba4f3a6f849e88232c6a722ff09 Mon Sep 17 00:00:00 2001
From: lijianan <574980606@qq.com>
Date: Mon, 5 Dec 2022 14:15:26 +0800
Subject: [PATCH 02/41] feat: New Component QRCode (#38948)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: qrcode

* chore: code clean

* feat: New Component Qr-Code (#38891)

* feat: QrCode

* fix

* fix

* fix: fix bug

* fix: fix bug

* fix

* fix

* fix

* delete

* delete

* test case

* fix lint

* bundlesize

* demo

* fix: fix test

* remove dep

* update snap

* en docs

* refactor: rename tests dir

* Update components/qr-code/demo/base.md

Co-authored-by: MadCcc <1075746765@qq.com>

* Update components/qr-code/demo/base.md

Co-authored-by: MadCcc <1075746765@qq.com>

* Update components/qr-code/demo/download.md

Co-authored-by: MadCcc <1075746765@qq.com>

* Update components/qr-code/demo/download.md

Co-authored-by: MadCcc <1075746765@qq.com>

* Update components/qr-code/demo/download.tsx

Co-authored-by: MadCcc <1075746765@qq.com>

* Update components/qr-code/demo/logo.md

Co-authored-by: MadCcc <1075746765@qq.com>

* Update components/qr-code/index.tsx

Co-authored-by: MadCcc <1075746765@qq.com>

* Update components/qr-code/style/index.ts

Co-authored-by: MadCcc <1075746765@qq.com>

* Update components/qr-code/style/index.ts

Co-authored-by: MadCcc <1075746765@qq.com>

* Update components/qr-code/demo/logo.md

Co-authored-by: MadCcc <1075746765@qq.com>

* rename

* fix

* adjust text

* rename

* fix title

* rename

* rename

* fix: snap

* fix

* bundlesize

* update demo

* update docs

* add demo

* add docs

* add docs

* test: add warning

* update demo

* bundlesize

* update test case

* update demo

* feat: add onRefresh、add status

* fix: fix demo

* fix: fix demo

* add locale

* add locale

* add test case

* update snap

* fix demo

* update demo

* update demo

* update demo

* Update components/qrcode/style/index.ts

Co-authored-by: MadCcc <1075746765@qq.com>

* Update components/qrcode/style/index.ts

Co-authored-by: MadCcc <1075746765@qq.com>

* Update components/qrcode/style/index.ts

Co-authored-by: MadCcc <1075746765@qq.com>

* Update components/qrcode/style/index.ts

Co-authored-by: MadCcc <1075746765@qq.com>

* Update components/qrcode/style/index.ts

Co-authored-by: MadCcc <1075746765@qq.com>

* Update components/qrcode/interface.ts

Co-authored-by: MadCcc <1075746765@qq.com>

* Update components/qrcode/style/index.ts

Co-authored-by: MadCcc <1075746765@qq.com>

* fix

* Update components/qrcode/index.tsx

Co-authored-by: MadCcc <1075746765@qq.com>

* fix

* fix

* fix

* add decs

* fix

* fix

* fix type

* fix

* fix demo

* fix lint

* fix lint

* add test case for bordered

* prettier-ignore

Co-authored-by: MadCcc <1075746765@qq.com>
Co-authored-by: 栗嘉男 <lijianan@lijianandeMacBook-Pro.local>
---
 .../__snapshots__/index.test.ts.snap          |   1 +
 components/index.tsx                          |   2 +
 components/locale-provider/index.tsx          |   4 +
 components/locale/en_US.tsx                   |   4 +
 components/locale/zh_CN.tsx                   |   4 +
 components/mentions/index.en-US.md            |   3 +-
 .../__snapshots__/demo-extend.test.ts.snap    | 403 ++++++++++++++++++
 .../__tests__/__snapshots__/demo.test.ts.snap | 363 ++++++++++++++++
 .../__snapshots__/index.test.tsx.snap         |  20 +
 .../qrcode/__tests__/demo-extend.test.ts      |   3 +
 components/qrcode/__tests__/demo.test.ts      |   3 +
 components/qrcode/__tests__/image.test.ts     |   5 +
 components/qrcode/__tests__/index.test.tsx    |  82 ++++
 components/qrcode/demo/Popover.md             |   7 +
 components/qrcode/demo/Popover.tsx            |  12 +
 components/qrcode/demo/base.md                |   7 +
 components/qrcode/demo/base.tsx               |   6 +
 components/qrcode/demo/customColor.md         |   7 +
 components/qrcode/demo/customColor.tsx        |  24 ++
 components/qrcode/demo/customSize.md          |   7 +
 components/qrcode/demo/customSize.tsx         |  48 +++
 components/qrcode/demo/download.md            |   7 +
 components/qrcode/demo/download.tsx           |  26 ++
 components/qrcode/demo/errorlevel.md          |   7 +
 components/qrcode/demo/errorlevel.tsx         |  19 +
 components/qrcode/demo/icon.md                |   7 +
 components/qrcode/demo/icon.tsx               |  11 +
 components/qrcode/demo/status.md              |   7 +
 components/qrcode/demo/status.tsx             |  11 +
 components/qrcode/index.en-US.md              |  56 +++
 components/qrcode/index.tsx                   |  92 ++++
 components/qrcode/index.zh-CN.md              |  57 +++
 components/qrcode/interface.ts                |  33 ++
 components/qrcode/style/index.ts              |  59 +++
 components/theme/interface/components.ts      |   2 +
 components/theme/themes/seed.ts               |  14 +-
 components/theme/util/alias.ts                |  10 +-
 components/theme/util/getAlphaColor.ts        |   3 +-
 components/tour/style/index.tsx               |  12 +-
 package.json                                  |   3 +-
 tests/__snapshots__/index.test.ts.snap        |   1 +
 41 files changed, 1431 insertions(+), 21 deletions(-)
 create mode 100644 components/qrcode/__tests__/__snapshots__/demo-extend.test.ts.snap
 create mode 100644 components/qrcode/__tests__/__snapshots__/demo.test.ts.snap
 create mode 100644 components/qrcode/__tests__/__snapshots__/index.test.tsx.snap
 create mode 100644 components/qrcode/__tests__/demo-extend.test.ts
 create mode 100644 components/qrcode/__tests__/demo.test.ts
 create mode 100644 components/qrcode/__tests__/image.test.ts
 create mode 100644 components/qrcode/__tests__/index.test.tsx
 create mode 100644 components/qrcode/demo/Popover.md
 create mode 100644 components/qrcode/demo/Popover.tsx
 create mode 100644 components/qrcode/demo/base.md
 create mode 100644 components/qrcode/demo/base.tsx
 create mode 100644 components/qrcode/demo/customColor.md
 create mode 100644 components/qrcode/demo/customColor.tsx
 create mode 100644 components/qrcode/demo/customSize.md
 create mode 100644 components/qrcode/demo/customSize.tsx
 create mode 100644 components/qrcode/demo/download.md
 create mode 100644 components/qrcode/demo/download.tsx
 create mode 100644 components/qrcode/demo/errorlevel.md
 create mode 100644 components/qrcode/demo/errorlevel.tsx
 create mode 100644 components/qrcode/demo/icon.md
 create mode 100644 components/qrcode/demo/icon.tsx
 create mode 100644 components/qrcode/demo/status.md
 create mode 100644 components/qrcode/demo/status.tsx
 create mode 100644 components/qrcode/index.en-US.md
 create mode 100644 components/qrcode/index.tsx
 create mode 100644 components/qrcode/index.zh-CN.md
 create mode 100644 components/qrcode/interface.ts
 create mode 100644 components/qrcode/style/index.ts

diff --git a/components/__tests__/__snapshots__/index.test.ts.snap b/components/__tests__/__snapshots__/index.test.ts.snap
index 740ef46f1fa8..9364bf329bad 100644
--- a/components/__tests__/__snapshots__/index.test.ts.snap
+++ b/components/__tests__/__snapshots__/index.test.ts.snap
@@ -40,6 +40,7 @@ exports[`antd exports modules correctly 1`] = `
   "Popconfirm",
   "Popover",
   "Progress",
+  "QRCode",
   "Radio",
   "Rate",
   "Result",
diff --git a/components/index.tsx b/components/index.tsx
index 9043a3add8a9..a9848329c2e1 100644
--- a/components/index.tsx
+++ b/components/index.tsx
@@ -149,4 +149,6 @@ export { default as Typography } from './typography';
 export type { TypographyProps } from './typography';
 export { default as Upload } from './upload';
 export type { UploadFile, UploadProps } from './upload';
+export { default as QRCode } from './qrcode';
+export type { QRCodeProps, QRPropsCanvas } from './qrcode/interface';
 export { default as version } from './version';
diff --git a/components/locale-provider/index.tsx b/components/locale-provider/index.tsx
index 3691222058d7..1c937030227f 100644
--- a/components/locale-provider/index.tsx
+++ b/components/locale-provider/index.tsx
@@ -46,6 +46,10 @@ export interface Locale {
   Image?: {
     preview: string;
   };
+  QRCode?: {
+    expired: string;
+    refresh: string;
+  };
 }
 
 export interface LocaleProviderProps {
diff --git a/components/locale/en_US.tsx b/components/locale/en_US.tsx
index 4b87557341e5..080e2ebcd9d2 100644
--- a/components/locale/en_US.tsx
+++ b/components/locale/en_US.tsx
@@ -136,6 +136,10 @@ const localeValues: Locale = {
   Image: {
     preview: 'Preview',
   },
+  QRCode: {
+    expired: 'QRCode is expired',
+    refresh: 'click refresh',
+  },
 };
 
 export default localeValues;
diff --git a/components/locale/zh_CN.tsx b/components/locale/zh_CN.tsx
index 6d155dde0aec..ea97e256bfa6 100644
--- a/components/locale/zh_CN.tsx
+++ b/components/locale/zh_CN.tsx
@@ -136,6 +136,10 @@ const localeValues: Locale = {
   Image: {
     preview: '预览',
   },
+  QRCode: {
+    expired: '二维码过期',
+    refresh: '点击刷新',
+  },
 };
 
 export default localeValues;
diff --git a/components/mentions/index.en-US.md b/components/mentions/index.en-US.md
index 638e0e5bdbcc..8d607c0b34cc 100644
--- a/components/mentions/index.en-US.md
+++ b/components/mentions/index.en-US.md
@@ -68,7 +68,7 @@ return <Mentions options={options} />;
 | onResize | The callback function that is triggered when textarea resize | function({ width, height }) | - |  |
 | onSearch | Trigger when prefix hit | (text: string, prefix: string) => void | - |  |
 | onSelect | Trigger when user select the option | (option: OptionProps, prefix: string) => void | - |  |
-| options | Option Configuration | [Options](#Option) | \[] | 5.1.0       |
+| options | Option Configuration | [Options](#Option) | \[] | 5.1.0 |
 
 ### Mention methods
 
@@ -79,6 +79,7 @@ return <Mentions options={options} />;
 
 ### Option
 
+<!-- prettier-ignore -->
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
 | label | Title of the option | React.ReactNode | - |
diff --git a/components/qrcode/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/qrcode/__tests__/__snapshots__/demo-extend.test.ts.snap
new file mode 100644
index 000000000000..74af4d455c9e
--- /dev/null
+++ b/components/qrcode/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -0,0 +1,403 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/qrcode/demo/Popover.tsx extend context correctly 1`] = `
+Array [
+  <img
+    alt="icon"
+    height="100"
+    src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
+    width="100"
+  />,
+  <div>
+    <div
+      class="ant-popover"
+      style="opacity:0"
+    >
+      <div
+        class="ant-popover-content"
+      >
+        <div
+          class="ant-popover-arrow"
+        >
+          <span
+            class="ant-popover-arrow-content"
+          />
+        </div>
+        <div
+          class="ant-popover-inner"
+          role="tooltip"
+          style="padding:0"
+        >
+          <div
+            class="ant-popover-inner-content"
+          >
+            <div
+              class="ant-qrcode ant-qrcode-borderless"
+              style="width:160px;height:160px"
+            >
+              <canvas
+                height="134"
+                style="height:134px;width:134px"
+                width="134"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+]
+`;
+
+exports[`renders ./components/qrcode/demo/base.tsx extend context correctly 1`] = `
+<div
+  class="ant-qrcode"
+  style="width:160px;height:160px"
+>
+  <canvas
+    height="134"
+    style="height:134px;width:134px"
+    width="134"
+  />
+</div>
+`;
+
+exports[`renders ./components/qrcode/demo/customColor.tsx extend context correctly 1`] = `
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center"
+>
+  <div
+    class="ant-space-item"
+    style="margin-right:8px"
+  >
+    <div
+      class="ant-qrcode"
+      style="margin-bottom:16px;background-color:#f5f5f5;width:160px;height:160px"
+    >
+      <canvas
+        height="134"
+        style="height:134px;width:134px"
+        width="134"
+      />
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <div
+      class="ant-qrcode"
+      style="margin-bottom:16px;background-color:#f5f5f5;width:160px;height:160px"
+    >
+      <canvas
+        height="134"
+        style="height:134px;width:134px"
+        width="134"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders ./components/qrcode/demo/customSize.tsx extend context correctly 1`] = `
+Array [
+  <div
+    class="ant-btn-group"
+    style="margin-bottom:16px"
+  >
+    <button
+      class="ant-btn ant-btn-default"
+      type="button"
+    >
+      <span
+        aria-label="minus"
+        class="anticon anticon-minus"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="minus"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M872 474H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"
+          />
+        </svg>
+      </span>
+      <span>
+        Smaller
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default"
+      type="button"
+    >
+      <span
+        aria-label="plus"
+        class="anticon anticon-plus"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="plus"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <defs>
+            <style />
+          </defs>
+          <path
+            d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
+          />
+          <path
+            d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+          />
+        </svg>
+      </span>
+      <span>
+        Larger
+      </span>
+    </button>
+  </div>,
+  <div
+    class="ant-qrcode"
+    style="width:160px;height:160px"
+  >
+    <canvas
+      height="134"
+      style="height:134px;width:134px"
+      width="134"
+    />
+    <img
+      src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
+      style="display:none"
+    />
+  </div>,
+]
+`;
+
+exports[`renders ./components/qrcode/demo/download.tsx extend context correctly 1`] = `
+<div
+  id="myqrcode"
+>
+  <div
+    class="ant-qrcode"
+    style="margin-bottom:16px;width:160px;height:160px"
+  >
+    <canvas
+      height="134"
+      style="height:134px;width:134px"
+      width="134"
+    />
+  </div>
+  <button
+    class="ant-btn ant-btn-primary"
+    type="button"
+  >
+    <span>
+      Download
+    </span>
+  </button>
+</div>
+`;
+
+exports[`renders ./components/qrcode/demo/errorlevel.tsx extend context correctly 1`] = `
+Array [
+  <div
+    class="ant-qrcode"
+    style="margin-bottom:16px;width:160px;height:160px"
+  >
+    <canvas
+      height="134"
+      style="height:134px;width:134px"
+      width="134"
+    />
+  </div>,
+  <div
+    class="ant-segmented"
+  >
+    <div
+      class="ant-segmented-group"
+    >
+      <label
+        class="ant-segmented-item ant-segmented-item-selected"
+      >
+        <input
+          checked=""
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="L"
+        >
+          L
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item"
+      >
+        <input
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="M"
+        >
+          M
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item"
+      >
+        <input
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="Q"
+        >
+          Q
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item"
+      >
+        <input
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="H"
+        >
+          H
+        </div>
+      </label>
+    </div>
+  </div>,
+]
+`;
+
+exports[`renders ./components/qrcode/demo/icon.tsx extend context correctly 1`] = `
+<div
+  class="ant-qrcode"
+  style="width:160px;height:160px"
+>
+  <canvas
+    height="134"
+    style="height:134px;width:134px"
+    width="134"
+  />
+  <img
+    src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
+    style="display:none"
+  />
+</div>
+`;
+
+exports[`renders ./components/qrcode/demo/status.tsx extend context correctly 1`] = `
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center"
+  style="flex-wrap:wrap;margin-bottom:-8px"
+>
+  <div
+    class="ant-space-item"
+    style="margin-right:8px;padding-bottom:8px"
+  >
+    <div
+      class="ant-qrcode"
+      style="width:160px;height:160px"
+    >
+      <div
+        class="ant-qrcode-mask"
+      >
+        <div
+          aria-busy="true"
+          aria-live="polite"
+          class="ant-spin ant-spin-spinning"
+        >
+          <span
+            class="ant-spin-dot ant-spin-dot-spin"
+          >
+            <i
+              class="ant-spin-dot-item"
+            />
+            <i
+              class="ant-spin-dot-item"
+            />
+            <i
+              class="ant-spin-dot-item"
+            />
+            <i
+              class="ant-spin-dot-item"
+            />
+          </span>
+        </div>
+      </div>
+      <canvas
+        height="134"
+        style="height:134px;width:134px"
+        width="134"
+      />
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="padding-bottom:8px"
+  >
+    <div
+      class="ant-qrcode"
+      style="width:160px;height:160px"
+    >
+      <div
+        class="ant-qrcode-mask"
+      >
+        <p>
+          QRCode is expired
+        </p>
+        <button
+          class="ant-btn ant-btn-link"
+          type="button"
+        >
+          <span
+            aria-label="reload"
+            class="anticon anticon-reload"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="reload"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M909.1 209.3l-56.4 44.1C775.8 155.1 656.2 92 521.9 92 290 92 102.3 279.5 102 511.5 101.7 743.7 289.8 932 521.9 932c181.3 0 335.8-115 394.6-276.1 1.5-4.2-.7-8.9-4.9-10.3l-56.7-19.5a8 8 0 00-10.1 4.8c-1.8 5-3.8 10-5.9 14.9-17.3 41-42.1 77.8-73.7 109.4A344.77 344.77 0 01655.9 829c-42.3 17.9-87.4 27-133.8 27-46.5 0-91.5-9.1-133.8-27A341.5 341.5 0 01279 755.2a342.16 342.16 0 01-73.7-109.4c-17.9-42.4-27-87.4-27-133.9s9.1-91.5 27-133.9c17.3-41 42.1-77.8 73.7-109.4 31.6-31.6 68.4-56.4 109.3-73.8 42.3-17.9 87.4-27 133.8-27 46.5 0 91.5 9.1 133.8 27a341.5 341.5 0 01109.3 73.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 003 14.1l175.6 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c-.1-6.6-7.8-10.3-13-6.2z"
+              />
+            </svg>
+          </span>
+          <span>
+            click refresh
+          </span>
+        </button>
+      </div>
+      <canvas
+        height="134"
+        style="height:134px;width:134px"
+        width="134"
+      />
+    </div>
+  </div>
+</div>
+`;
diff --git a/components/qrcode/__tests__/__snapshots__/demo.test.ts.snap b/components/qrcode/__tests__/__snapshots__/demo.test.ts.snap
new file mode 100644
index 000000000000..51e8a82e7078
--- /dev/null
+++ b/components/qrcode/__tests__/__snapshots__/demo.test.ts.snap
@@ -0,0 +1,363 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/qrcode/demo/Popover.tsx correctly 1`] = `
+<img
+  alt="icon"
+  height="100"
+  src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
+  width="100"
+/>
+`;
+
+exports[`renders ./components/qrcode/demo/base.tsx correctly 1`] = `
+<div
+  class="ant-qrcode"
+  style="width:160px;height:160px"
+>
+  <canvas
+    height="134"
+    style="height:134px;width:134px"
+    width="134"
+  />
+</div>
+`;
+
+exports[`renders ./components/qrcode/demo/customColor.tsx correctly 1`] = `
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center"
+>
+  <div
+    class="ant-space-item"
+    style="margin-right:8px"
+  >
+    <div
+      class="ant-qrcode"
+      style="margin-bottom:16px;background-color:#f5f5f5;width:160px;height:160px"
+    >
+      <canvas
+        height="134"
+        style="height:134px;width:134px"
+        width="134"
+      />
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <div
+      class="ant-qrcode"
+      style="margin-bottom:16px;background-color:#f5f5f5;width:160px;height:160px"
+    >
+      <canvas
+        height="134"
+        style="height:134px;width:134px"
+        width="134"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders ./components/qrcode/demo/customSize.tsx correctly 1`] = `
+Array [
+  <div
+    class="ant-btn-group"
+    style="margin-bottom:16px"
+  >
+    <button
+      class="ant-btn ant-btn-default"
+      type="button"
+    >
+      <span
+        aria-label="minus"
+        class="anticon anticon-minus"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="minus"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M872 474H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"
+          />
+        </svg>
+      </span>
+      <span>
+        Smaller
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default"
+      type="button"
+    >
+      <span
+        aria-label="plus"
+        class="anticon anticon-plus"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="plus"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <defs>
+            <style />
+          </defs>
+          <path
+            d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
+          />
+          <path
+            d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+          />
+        </svg>
+      </span>
+      <span>
+        Larger
+      </span>
+    </button>
+  </div>,
+  <div
+    class="ant-qrcode"
+    style="width:160px;height:160px"
+  >
+    <canvas
+      height="134"
+      style="height:134px;width:134px"
+      width="134"
+    />
+    <img
+      src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
+      style="display:none"
+    />
+  </div>,
+]
+`;
+
+exports[`renders ./components/qrcode/demo/download.tsx correctly 1`] = `
+<div
+  id="myqrcode"
+>
+  <div
+    class="ant-qrcode"
+    style="margin-bottom:16px;width:160px;height:160px"
+  >
+    <canvas
+      height="134"
+      style="height:134px;width:134px"
+      width="134"
+    />
+  </div>
+  <button
+    class="ant-btn ant-btn-primary"
+    type="button"
+  >
+    <span>
+      Download
+    </span>
+  </button>
+</div>
+`;
+
+exports[`renders ./components/qrcode/demo/errorlevel.tsx correctly 1`] = `
+Array [
+  <div
+    class="ant-qrcode"
+    style="margin-bottom:16px;width:160px;height:160px"
+  >
+    <canvas
+      height="134"
+      style="height:134px;width:134px"
+      width="134"
+    />
+  </div>,
+  <div
+    class="ant-segmented"
+  >
+    <div
+      class="ant-segmented-group"
+    >
+      <label
+        class="ant-segmented-item ant-segmented-item-selected"
+      >
+        <input
+          checked=""
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="L"
+        >
+          L
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item"
+      >
+        <input
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="M"
+        >
+          M
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item"
+      >
+        <input
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="Q"
+        >
+          Q
+        </div>
+      </label>
+      <label
+        class="ant-segmented-item"
+      >
+        <input
+          class="ant-segmented-item-input"
+          type="radio"
+        />
+        <div
+          class="ant-segmented-item-label"
+          title="H"
+        >
+          H
+        </div>
+      </label>
+    </div>
+  </div>,
+]
+`;
+
+exports[`renders ./components/qrcode/demo/icon.tsx correctly 1`] = `
+<div
+  class="ant-qrcode"
+  style="width:160px;height:160px"
+>
+  <canvas
+    height="134"
+    style="height:134px;width:134px"
+    width="134"
+  />
+  <img
+    src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
+    style="display:none"
+  />
+</div>
+`;
+
+exports[`renders ./components/qrcode/demo/status.tsx correctly 1`] = `
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center"
+  style="flex-wrap:wrap;margin-bottom:-8px"
+>
+  <div
+    class="ant-space-item"
+    style="margin-right:8px;padding-bottom:8px"
+  >
+    <div
+      class="ant-qrcode"
+      style="width:160px;height:160px"
+    >
+      <div
+        class="ant-qrcode-mask"
+      >
+        <div
+          aria-busy="true"
+          aria-live="polite"
+          class="ant-spin ant-spin-spinning"
+        >
+          <span
+            class="ant-spin-dot ant-spin-dot-spin"
+          >
+            <i
+              class="ant-spin-dot-item"
+            />
+            <i
+              class="ant-spin-dot-item"
+            />
+            <i
+              class="ant-spin-dot-item"
+            />
+            <i
+              class="ant-spin-dot-item"
+            />
+          </span>
+        </div>
+      </div>
+      <canvas
+        height="134"
+        style="height:134px;width:134px"
+        width="134"
+      />
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="padding-bottom:8px"
+  >
+    <div
+      class="ant-qrcode"
+      style="width:160px;height:160px"
+    >
+      <div
+        class="ant-qrcode-mask"
+      >
+        <p>
+          QRCode is expired
+        </p>
+        <button
+          class="ant-btn ant-btn-link"
+          type="button"
+        >
+          <span
+            aria-label="reload"
+            class="anticon anticon-reload"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="reload"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M909.1 209.3l-56.4 44.1C775.8 155.1 656.2 92 521.9 92 290 92 102.3 279.5 102 511.5 101.7 743.7 289.8 932 521.9 932c181.3 0 335.8-115 394.6-276.1 1.5-4.2-.7-8.9-4.9-10.3l-56.7-19.5a8 8 0 00-10.1 4.8c-1.8 5-3.8 10-5.9 14.9-17.3 41-42.1 77.8-73.7 109.4A344.77 344.77 0 01655.9 829c-42.3 17.9-87.4 27-133.8 27-46.5 0-91.5-9.1-133.8-27A341.5 341.5 0 01279 755.2a342.16 342.16 0 01-73.7-109.4c-17.9-42.4-27-87.4-27-133.9s9.1-91.5 27-133.9c17.3-41 42.1-77.8 73.7-109.4 31.6-31.6 68.4-56.4 109.3-73.8 42.3-17.9 87.4-27 133.8-27 46.5 0 91.5 9.1 133.8 27a341.5 341.5 0 01109.3 73.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 003 14.1l175.6 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c-.1-6.6-7.8-10.3-13-6.2z"
+              />
+            </svg>
+          </span>
+          <span>
+            click refresh
+          </span>
+        </button>
+      </div>
+      <canvas
+        height="134"
+        style="height:134px;width:134px"
+        width="134"
+      />
+    </div>
+  </div>
+</div>
+`;
diff --git a/components/qrcode/__tests__/__snapshots__/index.test.tsx.snap b/components/qrcode/__tests__/__snapshots__/index.test.tsx.snap
new file mode 100644
index 000000000000..6dcb91c4b332
--- /dev/null
+++ b/components/qrcode/__tests__/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`QRCode test rtl render component should be rendered correctly in RTL direction 1`] = `null`;
+
+exports[`QRCode test should correct render 1`] = `
+<div>
+  <div
+    class="ant-qrcode"
+    style="width: 160px; height: 160px;"
+  >
+    <canvas
+      height="134"
+      style="height: 134px; width: 134px;"
+      width="134"
+    />
+  </div>
+</div>
+`;
+
+exports[`QRCode test should render \`null\` and console Error when value not exist 1`] = `null`;
diff --git a/components/qrcode/__tests__/demo-extend.test.ts b/components/qrcode/__tests__/demo-extend.test.ts
new file mode 100644
index 000000000000..79dea1e4faf5
--- /dev/null
+++ b/components/qrcode/__tests__/demo-extend.test.ts
@@ -0,0 +1,3 @@
+import { extendTest } from '../../../tests/shared/demoTest';
+
+extendTest('qrcode');
diff --git a/components/qrcode/__tests__/demo.test.ts b/components/qrcode/__tests__/demo.test.ts
new file mode 100644
index 000000000000..1cb1d77dd4fd
--- /dev/null
+++ b/components/qrcode/__tests__/demo.test.ts
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest';
+
+demoTest('qrcode');
diff --git a/components/qrcode/__tests__/image.test.ts b/components/qrcode/__tests__/image.test.ts
new file mode 100644
index 000000000000..df82d405e561
--- /dev/null
+++ b/components/qrcode/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('QRCode image', () => {
+  imageDemoTest('qrcode');
+});
diff --git a/components/qrcode/__tests__/index.test.tsx b/components/qrcode/__tests__/index.test.tsx
new file mode 100644
index 000000000000..6de938dab5a5
--- /dev/null
+++ b/components/qrcode/__tests__/index.test.tsx
@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+import QRCode from '..';
+import mountTest from '../../../tests/shared/mountTest';
+import rtlTest from '../../../tests/shared/rtlTest';
+import { fireEvent, render } from '../../../tests/utils';
+import type { QRCodeProps } from '../interface';
+
+describe('QRCode test', () => {
+  mountTest(QRCode);
+  rtlTest(QRCode);
+
+  it('should correct render', () => {
+    const { container } = render(<QRCode value="test" />);
+    expect(
+      container
+        ?.querySelector<HTMLDivElement>('.ant-qrcode')
+        ?.querySelector<HTMLCanvasElement>('canvas'),
+    ).toBeTruthy();
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should render `null` and console Error when value not exist', () => {
+    const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    const { container } = render(<QRCode value={undefined as unknown as string} />);
+    expect(container.firstChild).toBe(null);
+    expect(container.firstChild).toMatchSnapshot();
+    expect(errSpy).toHaveBeenCalledWith('Warning: [antd: QRCode] need to receive `value` props');
+    errSpy.mockRestore();
+  });
+
+  it('support custom icon', () => {
+    const { container } = render(<QRCode value="test" icon="test" />);
+    expect(
+      container
+        ?.querySelector<HTMLDivElement>('.ant-qrcode')
+        ?.querySelector<HTMLImageElement>('img'),
+    ).toBeTruthy();
+  });
+
+  it('support custom size', () => {
+    const { container } = render(<QRCode value="test" size={100} />);
+    const wapper = container.querySelector<HTMLDivElement>('.ant-qrcode');
+    expect(wapper?.style?.width).toBe('100px');
+    expect(wapper?.style?.height).toBe('100px');
+  });
+
+  it('support refresh', () => {
+    const refresh = jest.fn();
+    const { container } = render(<QRCode value="test" status="expired" onRefresh={refresh} />);
+    fireEvent.click(
+      container
+        ?.querySelector<HTMLDivElement>('.ant-qrcode')
+        ?.querySelector<HTMLButtonElement>('button.ant-btn-link')!,
+    );
+    expect(refresh).toHaveBeenCalled();
+  });
+
+  it('support loading', () => {
+    const Demo: React.FC = () => {
+      const [status, setStatus] = useState<QRCodeProps['status']>('active');
+      return (
+        <>
+          <QRCode value="test" status={status} />
+          <button type="button" onClick={() => setStatus('loading')}>
+            set loading
+          </button>
+        </>
+      );
+    };
+    const { container } = render(<Demo />);
+    expect(container.querySelector<HTMLDivElement>('.ant-spin-spinning')).toBeFalsy();
+    fireEvent.click(container?.querySelector<HTMLButtonElement>('button')!);
+    expect(container.querySelector<HTMLDivElement>('.ant-spin-spinning')).toBeTruthy();
+  });
+
+  it('support bordered', () => {
+    const { container } = render(<QRCode value="test" bordered={false} />);
+    expect(container?.querySelector<HTMLDivElement>('.ant-qrcode')).toHaveClass(
+      'ant-qrcode-borderless',
+    );
+  });
+});
diff --git a/components/qrcode/demo/Popover.md b/components/qrcode/demo/Popover.md
new file mode 100644
index 000000000000..48c076f08cf6
--- /dev/null
+++ b/components/qrcode/demo/Popover.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+带气泡卡片的例子。
+
+## en-US
+
+With Popover.
diff --git a/components/qrcode/demo/Popover.tsx b/components/qrcode/demo/Popover.tsx
new file mode 100644
index 000000000000..342e1505d402
--- /dev/null
+++ b/components/qrcode/demo/Popover.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { QRCode, Popover } from 'antd';
+
+const src = 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg';
+
+const App: React.FC = () => (
+  <Popover overlayInnerStyle={{ padding: 0 }} content={<QRCode value={src} bordered={false} />}>
+    <img width={100} height={100} src={src} alt="icon" />
+  </Popover>
+);
+
+export default App;
diff --git a/components/qrcode/demo/base.md b/components/qrcode/demo/base.md
new file mode 100644
index 000000000000..d7c5bd3ef03d
--- /dev/null
+++ b/components/qrcode/demo/base.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+基本用法。
+
+## en-US
+
+Basic Usage.
diff --git a/components/qrcode/demo/base.tsx b/components/qrcode/demo/base.tsx
new file mode 100644
index 000000000000..5092f0f86e1a
--- /dev/null
+++ b/components/qrcode/demo/base.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { QRCode } from 'antd';
+
+const App: React.FC = () => <QRCode value="https://ant.design/" />;
+
+export default App;
diff --git a/components/qrcode/demo/customColor.md b/components/qrcode/demo/customColor.md
new file mode 100644
index 000000000000..f6824980303d
--- /dev/null
+++ b/components/qrcode/demo/customColor.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+通过设置 `color` 自定义二维码颜色，通过设置 `style` 自定义背景颜色。
+
+## en-US
+
+Custom Color.
diff --git a/components/qrcode/demo/customColor.tsx b/components/qrcode/demo/customColor.tsx
new file mode 100644
index 000000000000..8b6118461439
--- /dev/null
+++ b/components/qrcode/demo/customColor.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { QRCode, Space, theme } from 'antd';
+
+const { useToken } = theme;
+
+const App: React.FC = () => {
+  const { token } = useToken();
+  return (
+    <Space>
+      <QRCode
+        value="https://ant.design/"
+        color={token.colorSuccessText}
+        style={{ marginBottom: 16, backgroundColor: token.colorBgLayout }}
+      />
+      <QRCode
+        value="https://ant.design/"
+        color={token.colorInfoText}
+        style={{ marginBottom: 16, backgroundColor: token.colorBgLayout }}
+      />
+    </Space>
+  );
+};
+
+export default App;
diff --git a/components/qrcode/demo/customSize.md b/components/qrcode/demo/customSize.md
new file mode 100644
index 000000000000..08e60002d8c3
--- /dev/null
+++ b/components/qrcode/demo/customSize.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+自定义尺寸
+
+## en-US
+
+Custom Size.
diff --git a/components/qrcode/demo/customSize.tsx b/components/qrcode/demo/customSize.tsx
new file mode 100644
index 000000000000..35b06fff456f
--- /dev/null
+++ b/components/qrcode/demo/customSize.tsx
@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
+import { QRCode, Button } from 'antd';
+
+const App: React.FC = () => {
+  const [size, setSize] = useState<number>(160);
+
+  const increase = () => {
+    setSize((prevSize) => {
+      const newSize = prevSize + 10;
+      if (newSize > 300) {
+        return 300;
+      }
+      return newSize;
+    });
+  };
+
+  const decline = () => {
+    setSize((prevSize) => {
+      const newSize = prevSize - 10;
+      if (newSize < 48) {
+        return 48;
+      }
+      return newSize;
+    });
+  };
+
+  return (
+    <>
+      <Button.Group style={{ marginBottom: 16 }}>
+        <Button onClick={decline} disabled={size <= 48} icon={<MinusOutlined />}>
+          Smaller
+        </Button>
+        <Button onClick={increase} disabled={size >= 300} icon={<PlusOutlined />}>
+          Larger
+        </Button>
+      </Button.Group>
+      <QRCode
+        size={size}
+        iconSize={size / 4}
+        value="https://ant.design/"
+        icon="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
+      />
+    </>
+  );
+};
+
+export default App;
diff --git a/components/qrcode/demo/download.md b/components/qrcode/demo/download.md
new file mode 100644
index 000000000000..9967cf7fa2f1
--- /dev/null
+++ b/components/qrcode/demo/download.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+下载二维码的简单实现。
+
+## en-US
+
+A way to download QRCode.
diff --git a/components/qrcode/demo/download.tsx b/components/qrcode/demo/download.tsx
new file mode 100644
index 000000000000..c66ce361cc65
--- /dev/null
+++ b/components/qrcode/demo/download.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { QRCode, Button } from 'antd';
+
+const downloadQRCode = () => {
+  const canvas = document.getElementById('myqrcode')?.querySelector<HTMLCanvasElement>('canvas');
+  if (canvas) {
+    const url = canvas.toDataURL();
+    const a = document.createElement('a');
+    a.download = 'QRCode.png';
+    a.href = url;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  }
+};
+
+const App: React.FC = () => (
+  <div id="myqrcode">
+    <QRCode value="https://ant.design/" style={{ marginBottom: 16 }} />
+    <Button type="primary" onClick={downloadQRCode}>
+      Download
+    </Button>
+  </div>
+);
+
+export default App;
diff --git a/components/qrcode/demo/errorlevel.md b/components/qrcode/demo/errorlevel.md
new file mode 100644
index 000000000000..1df7f09c4606
--- /dev/null
+++ b/components/qrcode/demo/errorlevel.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+通过设置 errorLevel 调整不同的容错等级。
+
+## en-US
+
+set Error Level.
diff --git a/components/qrcode/demo/errorlevel.tsx b/components/qrcode/demo/errorlevel.tsx
new file mode 100644
index 000000000000..0995a120a10f
--- /dev/null
+++ b/components/qrcode/demo/errorlevel.tsx
@@ -0,0 +1,19 @@
+import React, { useState } from 'react';
+import type { QRCodeProps } from 'antd';
+import { Segmented, QRCode } from 'antd';
+
+const App: React.FC = () => {
+  const [level, setLevel] = useState<string | number>('L');
+  return (
+    <>
+      <QRCode
+        style={{ marginBottom: 16 }}
+        errorLevel={level as QRCodeProps['errorLevel']}
+        value="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
+      />
+      <Segmented options={['L', 'M', 'Q', 'H']} value={level} onChange={setLevel} />
+    </>
+  );
+};
+
+export default App;
diff --git a/components/qrcode/demo/icon.md b/components/qrcode/demo/icon.md
new file mode 100644
index 000000000000..05a34f1d8cb6
--- /dev/null
+++ b/components/qrcode/demo/icon.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+带 Icon 的二维码。
+
+## en-US
+
+QRCode with Icon.
diff --git a/components/qrcode/demo/icon.tsx b/components/qrcode/demo/icon.tsx
new file mode 100644
index 000000000000..77a62185921e
--- /dev/null
+++ b/components/qrcode/demo/icon.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { QRCode } from 'antd';
+
+const App: React.FC = () => (
+  <QRCode
+    value="https://ant.design/"
+    icon="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
+  />
+);
+
+export default App;
diff --git a/components/qrcode/demo/status.md b/components/qrcode/demo/status.md
new file mode 100644
index 000000000000..bc25a6993a3d
--- /dev/null
+++ b/components/qrcode/demo/status.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+可以通过 `status` 的值控制二维码的状态。
+
+## en-US
+
+The status can be controlled by the value `status`.
diff --git a/components/qrcode/demo/status.tsx b/components/qrcode/demo/status.tsx
new file mode 100644
index 000000000000..3f0a57bca60c
--- /dev/null
+++ b/components/qrcode/demo/status.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { QRCode, Space } from 'antd';
+
+const App: React.FC = () => (
+  <Space wrap>
+    <QRCode value="https://ant.design/" status="loading" />
+    <QRCode value="https://ant.design/" status="expired" onRefresh={() => console.log('refresh')} />
+  </Space>
+);
+
+export default App;
diff --git a/components/qrcode/index.en-US.md b/components/qrcode/index.en-US.md
new file mode 100644
index 000000000000..63c2df1a6c3d
--- /dev/null
+++ b/components/qrcode/index.en-US.md
@@ -0,0 +1,56 @@
+---
+category: Components
+title: QRCode
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cJopQrf0ncwAAAAAAAAAAAAADrJ8AQ/original
+demo:
+  cols: 2
+group:
+  title: Data Display
+  order: 5
+---
+
+Components that can convert links into QR codes, and support custom color and logo. Available since `antd@5.1.0`.
+
+<Alert message="If the QR code cannot be scanned for identification, it may be because the link address is too long, which leads to too dense pixels. You can configure the QR code to be larger through `size`, or shorten the link through short link services."></Alert>
+
+## When To Use
+
+Used when the link needs to be converted into a QR Code.
+
+## Examples
+
+<!-- prettier-ignore -->
+<code src="./demo/base.tsx">base</code>
+<code src="./demo/icon.tsx">With Icon</code>
+<code src="./demo/status.tsx">other statu</code>
+<code src="./demo/customSize.tsx">Custom Size</code>
+<code src="./demo/customColor.tsx">Custom Color</code>
+<code src="./demo/download.tsx">Download QRCode</code>
+<code src="./demo/errorlevel.tsx">Error Level</code>
+<code src="./demo/Popover.tsx">Advanced Usage</code>
+
+## API
+
+> This component is available since `antd@5.1.0`
+
+| Property | Description | Type | Default |
+| :-- | :-- | :-- | :-- |
+| value | scanned link | string | - |
+| icon | include image url (only image link are supported) | string | - |
+| size | QRCode size | number | 128 |
+| iconSize | include image size | number | 32 |
+| color | QRCode Color | string | `#000` |
+| bordered | Whether has border style | boolean | `true` |
+| errorLevel | Error Code Level | `'L' \| 'M' \| 'Q' \| 'H' ` | `M` |
+| status | QRCode statu | `active \| expired \| loading ` | `active` |
+| onRefresh | callback | `() => void` | - |
+
+## FAQ
+
+### About QRCode ErrorLevel
+
+The ErrorLevel means that the QR code can be scanned normally after being blocked, and the maximum area that can be blocked is the error correction rate.
+
+Generally, the QR code is divided into 4 error correction levels: Level `L` can correct about `7%` errors, Level `M` can correct about `15%` errors, Level `Q` can correct about `25%` errors, and Level `H` can correct about `30%` errors. When the content encoding of the QR code carries less information, in other words, when the value link is short, set different error correction levels, and the generated image will not change.
+
+> For more information, see the: [https://www.qrcode.com/en/about/error_correction](https://www.qrcode.com/en/about/error_correction.html)
diff --git a/components/qrcode/index.tsx b/components/qrcode/index.tsx
new file mode 100644
index 000000000000..eec3f9e27f10
--- /dev/null
+++ b/components/qrcode/index.tsx
@@ -0,0 +1,92 @@
+import React, { useMemo, useContext } from 'react';
+import { QRCodeCanvas } from 'qrcode.react';
+import classNames from 'classnames';
+import { ReloadOutlined } from '@ant-design/icons';
+import { ConfigContext } from '../config-provider';
+import LocaleReceiver from '../locale-provider/LocaleReceiver';
+import type { ConfigConsumerProps } from '../config-provider';
+import type { QRCodeProps, QRPropsCanvas } from './interface';
+import warning from '../_util/warning';
+import useStyle from './style/index';
+import Spin from '../spin';
+import Button from '../button';
+import theme from '../theme';
+
+const { useToken } = theme;
+
+const QRCode: React.FC<QRCodeProps> = (props) => {
+  const {
+    value,
+    icon = '',
+    size = 160,
+    iconSize = 40,
+    color = '#000',
+    errorLevel = 'M',
+    status = 'active',
+    bordered = true,
+    onRefresh,
+    style,
+    className,
+    prefixCls: customizePrefixCls,
+  } = props;
+  const { getPrefixCls } = useContext<ConfigConsumerProps>(ConfigContext);
+  const prefixCls = getPrefixCls('qrcode', customizePrefixCls);
+  const [wrapSSR, hashId] = useStyle(prefixCls);
+  const { token } = useToken();
+  const qrCodeProps = useMemo<QRPropsCanvas>(() => {
+    const imageSettings: QRCodeProps['imageSettings'] = {
+      src: icon,
+      x: undefined,
+      y: undefined,
+      height: iconSize,
+      width: iconSize,
+      excavate: true,
+    };
+    return {
+      value,
+      size: size - (token.paddingSM + token.lineWidth) * 2,
+      level: errorLevel,
+      bgColor: 'transparent',
+      fgColor: color,
+      imageSettings: icon ? imageSettings : undefined,
+    };
+  }, [errorLevel, color, icon, iconSize, size, value]);
+
+  if (!value) {
+    if (process.env.NODE_ENV !== 'production') {
+      warning(false, 'QRCode', 'need to receive `value` props');
+    }
+    return null;
+  }
+
+  const cls = classNames(prefixCls, className, hashId, {
+    [`${prefixCls}-borderless`]: !bordered,
+  });
+
+  return wrapSSR(
+    <LocaleReceiver componentName="QRCode">
+      {(locale) => (
+        <div style={{ ...style, width: size, height: size }} className={cls}>
+          {status !== 'active' && (
+            <div className={`${prefixCls}-mask`}>
+              {status === 'loading' && <Spin />}
+              {status === 'expired' && (
+                <>
+                  <p>{locale.expired}</p>
+                  {typeof onRefresh === 'function' && (
+                    <Button type="link" icon={<ReloadOutlined />} onClick={onRefresh}>
+                      {locale.refresh}
+                    </Button>
+                  )}
+                </>
+              )}
+            </div>
+          )}
+          <QRCodeCanvas {...qrCodeProps} />
+        </div>
+      )}
+    </LocaleReceiver>,
+  );
+};
+
+export default QRCode;
diff --git a/components/qrcode/index.zh-CN.md b/components/qrcode/index.zh-CN.md
new file mode 100644
index 000000000000..16d2d7402545
--- /dev/null
+++ b/components/qrcode/index.zh-CN.md
@@ -0,0 +1,57 @@
+---
+category: Components
+subtitle: 二维码
+title: QRCode
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cJopQrf0ncwAAAAAAAAAAAAADrJ8AQ/original
+demo:
+  cols: 2
+group:
+  title: 数据展示
+  order: 5
+---
+
+能够将链接转换生成二维码的组件，支持自定义配色和 Logo 配置，自 `antd@5.1.0` 版本开始提供该组件。
+
+<Alert message="若二维码无法扫码识别，可能是因为链接地址过长导致像素过于密集，可以通过 `size` 配置二维码更大，或者通过短链接服务等方式将链接变短。"></Alert>
+
+## 何时使用
+
+当需要将链接转换成为二维码时使用。
+
+## 代码演示
+
+<!-- prettier-ignore -->
+<code src="./demo/base.tsx">基本使用</code>
+<code src="./demo/icon.tsx">带 Icon 的例子</code>
+<code src="./demo/status.tsx">不同的状态</code>
+<code src="./demo/customSize.tsx">自定义尺寸</code>
+<code src="./demo/customColor.tsx">自定义颜色</code>
+<code src="./demo/download.tsx">下载二维码</code>
+<code src="./demo/errorlevel.tsx">纠错比例</code>
+<code src="./demo/Popover.tsx">高级用法</code>
+
+## API
+
+> 自 `antd@5.1.0` 版本开始提供该组件。
+
+| 参数 | 说明 | 类型 | 默认值 |
+| :-- | :-- | :-- | :-- |
+| value | 扫描后的地址 | string | - |
+| icon | 二维码中图片的地址（目前只支持图片地址） | string | - |
+| size | 二维码大小 | number | 160 |
+| iconSize | 二维码中图片的大小 | number | 40 |
+| color | 二维码颜色 | string | `#000` |
+| bordered | 是否有边框 | boolean | `true` |
+| errorLevel | 二维码纠错等级 | `'L' \| 'M' \| 'Q' \| 'H' ` | `M` |
+| status | 二维码状态 | `active \| expired \| loading ` | `active` |
+| onRefresh | 点击"点击刷新"的回调 | `() => void` | - |
+
+## FAQ
+
+### 关于二维码纠错等级
+
+纠错等级也叫纠错率，就是指二维码可以被遮挡后还能正常扫描，而这个能被遮挡的最大面积就是纠错率。
+
+通常情况下二维码分为 4 个纠错级别：`L级` 可纠正约 `7%` 错误、`M级` 可纠正约 `15%` 错误、`Q级` 可纠正约 `25%` 错误、`H级` 可纠正约`30%` 错误。并不是所有位置都可以缺损，像最明显的三个角上的方框，直接影响初始定位。中间零散的部分是内容编码，可以容忍缺损。当二维码的内容编码携带信息比较少的时候，也就是链接比较短的时候，设置不同的纠错等级，生成的图片不会发生变化。
+
+> 有关更多信息，可参阅相关资料：[https://www.qrcode.com/zh/about/error_correction](https://www.qrcode.com/zh/about/error_correction.html)
diff --git a/components/qrcode/interface.ts b/components/qrcode/interface.ts
new file mode 100644
index 000000000000..3371e0203521
--- /dev/null
+++ b/components/qrcode/interface.ts
@@ -0,0 +1,33 @@
+import type { CSSProperties } from 'react';
+
+interface ImageSettings {
+  src: string;
+  height: number;
+  width: number;
+  excavate: boolean;
+  x?: number;
+  y?: number;
+}
+
+interface QRProps {
+  value: string;
+  size?: number;
+  level?: string;
+  color?: string;
+  style?: CSSProperties;
+  includeMargin?: boolean;
+  imageSettings?: ImageSettings;
+}
+
+export type QRPropsCanvas = QRProps & React.CanvasHTMLAttributes<HTMLCanvasElement>;
+
+export interface QRCodeProps extends QRProps {
+  className?: string;
+  prefixCls?: string;
+  icon?: string;
+  iconSize?: number;
+  bordered?: boolean;
+  errorLevel?: 'L' | 'M' | 'Q' | 'H';
+  status?: 'active' | 'expired' | 'loading';
+  onRefresh?: () => void;
+}
diff --git a/components/qrcode/style/index.ts b/components/qrcode/style/index.ts
new file mode 100644
index 000000000000..0cb4e323d740
--- /dev/null
+++ b/components/qrcode/style/index.ts
@@ -0,0 +1,59 @@
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { mergeToken, genComponentStyleHook } from '../../theme/internal';
+import { resetComponent } from '../../style';
+
+export interface ComponentToken {}
+
+interface QRCodeToken extends FullToken<'QRCode'> {
+  QRCodeMaskBackgroundColor: string;
+}
+
+const genQRCodeStyle: GenerateStyle<QRCodeToken> = (token) => {
+  const { componentCls } = token;
+  return {
+    [componentCls]: {
+      ...resetComponent(token),
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      padding: token.paddingSM,
+      borderRadius: token.borderRadiusLG,
+      border: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
+      position: 'relative',
+      width: '100%',
+      height: '100%',
+      overflow: 'hidden',
+      [`& > ${componentCls}-mask`]: {
+        position: 'absolute',
+        insetBlockStart: 0,
+        insetInlineStart: 0,
+        zIndex: 10,
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: '100%',
+        height: '100%',
+        color: token.colorText,
+        lineHeight: token.lineHeight,
+        background: token.QRCodeMaskBackgroundColor,
+        textAlign: 'center',
+      },
+      '&-icon': {
+        marginBlockEnd: token.marginXS,
+        fontSize: token.controlHeight,
+      },
+    },
+    [`${componentCls}-borderless`]: {
+      borderColor: 'transparent',
+    },
+  };
+};
+
+export default genComponentStyleHook<'QRCode'>('QRCode', (token) =>
+  genQRCodeStyle(
+    mergeToken<QRCodeToken>(token, {
+      QRCodeMaskBackgroundColor: 'rgba(255, 255, 255, 0.96)',
+    }),
+  ),
+);
diff --git a/components/theme/interface/components.ts b/components/theme/interface/components.ts
index 2e4a427f56b3..5ac94683989e 100644
--- a/components/theme/interface/components.ts
+++ b/components/theme/interface/components.ts
@@ -46,6 +46,7 @@ import type { ComponentToken as TransferComponentToken } from '../../transfer/st
 import type { ComponentToken as TypographyComponentToken } from '../../typography/style';
 import type { ComponentToken as UploadComponentToken } from '../../upload/style';
 import type { ComponentToken as TourComponentToken } from '../../tour/style';
+import type { ComponentToken as QRCodeComponentToken } from '../../qrcode/style';
 
 export interface ComponentTokenMap {
   Affix?: {};
@@ -108,4 +109,5 @@ export interface ComponentTokenMap {
   Space?: SpaceComponentToken;
   Progress?: ProgressComponentToken;
   Tour?: TourComponentToken;
+  QRCode?: QRCodeComponentToken;
 }
diff --git a/components/theme/themes/seed.ts b/components/theme/themes/seed.ts
index 032bded2b731..2abdf240e85a 100644
--- a/components/theme/themes/seed.ts
+++ b/components/theme/themes/seed.ts
@@ -43,14 +43,14 @@ const seedToken: SeedToken = {
   // Motion
   motionUnit: 0.1,
   motionBase: 0,
-  motionEaseOutCirc: `cubic-bezier(0.08, 0.82, 0.17, 1)`,
-  motionEaseInOutCirc: `cubic-bezier(0.78, 0.14, 0.15, 0.86)`,
+  motionEaseOutCirc: 'cubic-bezier(0.08, 0.82, 0.17, 1)',
+  motionEaseInOutCirc: 'cubic-bezier(0.78, 0.14, 0.15, 0.86)',
   motionEaseOut: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
-  motionEaseInOut: `cubic-bezier(0.645, 0.045, 0.355, 1)`,
-  motionEaseOutBack: `cubic-bezier(0.12, 0.4, 0.29, 1.46)`,
-  motionEaseInBack: `cubic-bezier(0.71, -0.46, 0.88, 0.6)`,
-  motionEaseInQuint: `cubic-bezier(0.645, 0.045, 0.355, 1)`,
-  motionEaseOutQuint: `cubic-bezier(0.23, 1, 0.32, 1)`,
+  motionEaseInOut: 'cubic-bezier(0.645, 0.045, 0.355, 1)',
+  motionEaseOutBack: 'cubic-bezier(0.12, 0.4, 0.29, 1.46)',
+  motionEaseInBack: 'cubic-bezier(0.71, -0.46, 0.88, 0.6)',
+  motionEaseInQuint: 'cubic-bezier(0.645, 0.045, 0.355, 1)',
+  motionEaseOutQuint: 'cubic-bezier(0.23, 1, 0.32, 1)',
 
   // Radius
   borderRadius: 6,
diff --git a/components/theme/util/alias.ts b/components/theme/util/alias.ts
index 0a45b6db69ff..fee69167ce3c 100644
--- a/components/theme/util/alias.ts
+++ b/components/theme/util/alias.ts
@@ -175,7 +175,7 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
     screenXXLMin: screenXXL,
 
     // FIXME: component box-shadow, should be removed
-    boxShadowPopoverArrow: `3px 3px 7px rgba(0, 0, 0, 0.1)`,
+    boxShadowPopoverArrow: '3px 3px 7px rgba(0, 0, 0, 0.1)',
     boxShadowCard: `
       0 1px 2px -2px ${new TinyColor('rgba(0, 0, 0, 0.16)').toRgbString()},
       0 3px 6px 0 ${new TinyColor('rgba(0, 0, 0, 0.12)').toRgbString()},
@@ -201,10 +201,10 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
       0 -3px 6px -4px rgba(0, 0, 0, 0.12),
       0 -9px 28px 8px rgba(0, 0, 0, 0.05)
     `,
-    boxShadowTabsOverflowLeft: `inset 10px 0 8px -8px rgba(0, 0, 0, 0.08)`,
-    boxShadowTabsOverflowRight: `inset -10px 0 8px -8px rgba(0, 0, 0, 0.08)`,
-    boxShadowTabsOverflowTop: `inset 0 10px 8px -8px rgba(0, 0, 0, 0.08)`,
-    boxShadowTabsOverflowBottom: `inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08)`,
+    boxShadowTabsOverflowLeft: 'inset 10px 0 8px -8px rgba(0, 0, 0, 0.08)',
+    boxShadowTabsOverflowRight: 'inset -10px 0 8px -8px rgba(0, 0, 0, 0.08)',
+    boxShadowTabsOverflowTop: 'inset 0 10px 8px -8px rgba(0, 0, 0, 0.08)',
+    boxShadowTabsOverflowBottom: 'inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08)',
 
     // Override AliasToken
     ...overrideTokens,
diff --git a/components/theme/util/getAlphaColor.ts b/components/theme/util/getAlphaColor.ts
index a0adc212f9da..7cd1d3fdbbeb 100644
--- a/components/theme/util/getAlphaColor.ts
+++ b/components/theme/util/getAlphaColor.ts
@@ -16,8 +16,9 @@ function getAlphaColor(frontColor: string, backgroundColor: string): string {
     const r = Math.round((fR - bR * (1 - fA)) / fA);
     const g = Math.round((fG - bG * (1 - fA)) / fA);
     const b = Math.round((fB - bB * (1 - fA)) / fA);
-    if (isStableColor(r) && isStableColor(g) && isStableColor(b))
+    if (isStableColor(r) && isStableColor(g) && isStableColor(b)) {
       return new TinyColor({ r, g, b, a: Math.round(fA * 100) / 100 }).toRgbString();
+    }
   }
 
   // fallback
diff --git a/components/tour/style/index.tsx b/components/tour/style/index.tsx
index 3a892c226160..c32d4d93fc55 100644
--- a/components/tour/style/index.tsx
+++ b/components/tour/style/index.tsx
@@ -209,12 +209,12 @@ const genBaseStyle: GenerateStyle<TourToken> = (token) => {
 
       // =========== Limit left and right placement radius ==============
       [[
-        `&-placement-left`,
-        `&-placement-leftTop`,
-        `&-placement-leftBottom`,
-        `&-placement-right`,
-        `&-placement-rightTop`,
-        `&-placement-rightBottom`,
+        '&-placement-left',
+        '&-placement-leftTop',
+        '&-placement-leftBottom',
+        '&-placement-right',
+        '&-placement-rightTop',
+        '&-placement-rightBottom',
       ].join(',')]: {
         [`${componentCls}-inner`]: {
           borderRadius:
diff --git a/package.json b/package.json
index b492e7a83b86..dcf8025a9666 100644
--- a/package.json
+++ b/package.json
@@ -120,6 +120,7 @@
     "copy-to-clipboard": "^3.2.0",
     "dayjs": "^1.11.1",
     "lodash": "^4.17.21",
+    "qrcode.react": "^3.1.0",
     "rc-cascader": "~3.7.0",
     "rc-checkbox": "~2.3.0",
     "rc-collapse": "~3.4.2",
@@ -322,7 +323,7 @@
   "bundlesize": [
     {
       "path": "./dist/antd.min.js",
-      "maxSize": "377.5 kB"
+      "maxSize": "381 kB"
     }
   ],
   "tnpm": {
diff --git a/tests/__snapshots__/index.test.ts.snap b/tests/__snapshots__/index.test.ts.snap
index b867fa54bcd4..6d5e6564cf6e 100644
--- a/tests/__snapshots__/index.test.ts.snap
+++ b/tests/__snapshots__/index.test.ts.snap
@@ -40,6 +40,7 @@ exports[`antd dist files exports modules correctly 1`] = `
   "Popconfirm",
   "Popover",
   "Progress",
+  "QRCode",
   "Radio",
   "Rate",
   "Result",

From 93c141675a43b702c1e768d0f0b4a113f952c68d Mon Sep 17 00:00:00 2001
From: Dunqing <dengqing0821@gmail.com>
Date: Mon, 5 Dec 2022 15:03:59 +0800
Subject: [PATCH 03/41] fix(switch): only one of the two props
 `checkedChildren` or `unCheckedChildren` will not work (#39262)

---
 components/switch/style/index.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/switch/style/index.tsx b/components/switch/style/index.tsx
index 2a5018ebb24a..d712357854cb 100644
--- a/components/switch/style/index.tsx
+++ b/components/switch/style/index.tsx
@@ -182,6 +182,7 @@ const genSwitchInnerStyle: GenerateStyle<SwitchToken, CSSObject> = (token) => {
         display: 'block',
         overflow: 'hidden',
         borderRadius: 100,
+        height: '100%',
 
         [`${switchInnerCls}-checked, ${switchInnerCls}-unchecked`]: {
           display: 'block',

From 1f8c0476d2c8bc7abbe8bf8fe8600b929f50721e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?=
 =?UTF-8?q?=E5=8D=9C?= <smith3816@gmail.com>
Date: Mon, 5 Dec 2022 15:17:58 +0800
Subject: [PATCH 04/41] docs: 5.0.4 changelog (#39256)

* docs: 5.0.4 changelog

* Update CHANGELOG.zh-CN.md

Co-authored-by: afc163 <afc163@gmail.com>

* docs: adjust changelog & tree style

* docs: update desc

* docs: add missing one

* chore: adjust tree style

* docs: add more

Co-authored-by: afc163 <afc163@gmail.com>
---
 CHANGELOG.en-US.md              | 20 ++++++++++++++++++++
 CHANGELOG.zh-CN.md              | 20 ++++++++++++++++++++
 components/tree/style/index.tsx | 10 ++++++----
 package.json                    |  2 +-
 4 files changed, 47 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index 42aad221a1b5..b49dd92b5384 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -15,6 +15,26 @@ timeline: true
 
 ---
 
+## 5.0.4
+
+`2022-12-05`
+
+- Modal
+  - 🐞 Fix Modal with long content exceed the panel. [#39249](https://github.com/ant-design/ant-design/pull/39249) [@MuxinFeng](https://github.com/MuxinFeng)
+  - 🐞 Fix Modal.info content width when without icon. [#39047](https://github.com/ant-design/ant-design/pull/39047) [@owjs3901](https://github.com/owjs3901)
+- 🐞 Fix Tree config `checkable` and `blockNode` not makes `title` stretch issue. [#39209](https://github.com/ant-design/ant-design/pull/39209) [@Wxh16144](https://github.com/Wxh16144)
+- 🐞 Fix Dropdown sub menu missing motion. [#39235](https://github.com/ant-design/ant-design/pull/39235)
+- 💄 Fix RangePicker time panel padding style. [#39228](https://github.com/ant-design/ant-design/pull/39228)
+- 🐞 Fix Card action button round style. [#39210](https://github.com/ant-design/ant-design/pull/39210) [@muxin](https://github.com/muxin)
+- 🐞 Fix Badge wave effect color not follow `color`. [#39182](https://github.com/ant-design/ant-design/pull/39182) [@li-jia-nan](https://github.com/li-jia-nan)
+- 🐞 Fix Radio disabled status check style. [#39165](https://github.com/ant-design/ant-design/pull/39165) [@Wxh16144](https://github.com/Wxh16144)
+- 🐞 Fixed TextArea count style when `resize` is not `none`. [#39121](https://github.com/ant-design/ant-design/pull/39121) [@51wangping](https://github.com/51wangping)
+- 🐞 Fix Transfer clicking the checkbox position cannot be unchecked and onSelectChange is triggered twice. [#39078](https://github.com/ant-design/ant-design/pull/39078) [@edc-hui](https://github.com/edc-hui)
+- 🐞 Fix Steps set `size="small"` with progress not fully display. [#39100](https://github.com/ant-design/ant-design/pull/39100) [@Wxh16144](https://github.com/Wxh16144)
+- 🐞 Fix Form horizontal layout with `xs` responsive config not work. [#39130](https://github.com/ant-design/ant-design/pull/39130)
+- 🐞 Fix message position not correct in RTL. [#39248](https://github.com/ant-design/ant-design/pull/39248) [@Yuiai01](https://github.com/Yuiai01)
+- 🐞 Fix Switch only set with `checkedChildren` or `unCheckedChildren` content not display. [#39262](https://github.com/ant-design/ant-design/pull/39262)
+
 ## 5.0.3
 
 `2022-11-30`
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index 4572e406b628..1dbbd177ee97 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -15,6 +15,26 @@ timeline: true
 
 ---
 
+## 5.0.4
+
+`2022-12-05`
+
+- Modal
+  - 🐞 修复 Modal 文字内容过多会超出框体的样式问题。[#39249](https://github.com/ant-design/ant-design/pull/39249) [@MuxinFeng](https://github.com/MuxinFeng)
+  - 🐞 修复 Modal.info 没有图标时，内容宽度不正确的问题。[#39047](https://github.com/ant-design/ant-design/pull/39047) [@owjs3901](https://github.com/owjs3901)
+- 🐞 修复 Tree `checkable` 与 `blockNode` 配合时，`title` 元素不拉伸的问题。[#39209](https://github.com/ant-design/ant-design/pull/39209) [@Wxh16144](https://github.com/Wxh16144)
+- 🐞 修复 Dropdown 二级菜单丢失动画的问题。[#39235](https://github.com/ant-design/ant-design/pull/39235)
+- 💄 修复 RangePicker 内时间面板的 padding 样式。[#39228](https://github.com/ant-design/ant-design/pull/39228)
+- 🐞 修复 Card 的按钮组圆角样式。[#39210](https://github.com/ant-design/ant-design/pull/39210) [@muxin](https://github.com/muxin)
+- 🐞 修复了 Badge 自定义颜色的时候，波纹的颜色不会跟着小圆点颜色发生变化的问题。[#39182](https://github.com/ant-design/ant-design/pull/39182) [@li-jia-nan](https://github.com/li-jia-nan)
+- 🐞 修复 Radio 禁用状态选中样式。[#39165](https://github.com/ant-design/ant-design/pull/39165) [@Wxh16144](https://github.com/Wxh16144)
+- 🐞 修复 TextArea `resize` 不是 `none` 时计数文字的样式问题。[#39121](https://github.com/ant-design/ant-design/pull/39121) [@51wangping](https://github.com/51wangping)
+- 🐞 修复 Transfer 组件 点击复选框位置不可以取消选中，并触发了两次 onSelectChange 问题。[#39078](https://github.com/ant-design/ant-design/pull/39078) [@edc-hui](https://github.com/edc-hui)
+- 🐞 修复 Steps `size="small"` 第一项带有进度时，进度条显示不全的问题。[#39100](https://github.com/ant-design/ant-design/pull/39100) [@Wxh16144](https://github.com/Wxh16144)
+- 🐞 修复 Form 水平布局下 `xs` 的响应式布局不生效的问题。[#39130](https://github.com/ant-design/ant-design/pull/39130)
+- 🐞 修复 message 在 RTL 下位置不正确的问题。[#39248](https://github.com/ant-design/ant-design/pull/39248) [@Yuiai01](https://github.com/Yuiai01)
+- 🐞 修复 Switch 在只设置 `checkedChildren` 或 `unCheckedChildren` 时，其内容不会显示的问题。[#39262](https://github.com/ant-design/ant-design/pull/39262)
+
 ## 5.0.3
 
 `2022-11-30`
diff --git a/components/tree/style/index.tsx b/components/tree/style/index.tsx
index efeaa32ed42f..a46e69979aa4 100644
--- a/components/tree/style/index.tsx
+++ b/components/tree/style/index.tsx
@@ -265,10 +265,12 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject =>
 
       // >>> Title
       // add `${treeCls}-checkbox + span` to cover checkbox `${checkboxCls} + span`
-      [`
-        ${treeCls}-node-content-wrapper,
-        ${treeCls}-checkbox + span
-      `]: {
+      [`${treeCls}-node-content-wrapper, ${treeCls}-checkbox + span`]: {
+        paddingInline: 0,
+      },
+      [`${treeCls}-node-content-wrapper`]: {
+        display: 'flex',
+        flexWrap: 'nowrap',
         position: 'relative',
         zIndex: 'auto',
         minHeight: treeTitleHeight,
diff --git a/package.json b/package.json
index b492e7a83b86..dd5ef4360524 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "antd",
-  "version": "5.0.3",
+  "version": "5.0.4",
   "description": "An enterprise-class UI design language and React components implementation",
   "title": "Ant Design",
   "keywords": [

From 80f167e5f26f2d2f1b7efb16848489056cb97d1a Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Mon, 5 Dec 2022 16:42:03 +0800
Subject: [PATCH 05/41] docs: update footer

---
 .dumi/theme/slots/Footer/index.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/.dumi/theme/slots/Footer/index.tsx b/.dumi/theme/slots/Footer/index.tsx
index c54c7ef3eeb5..062ebaed8bdc 100644
--- a/.dumi/theme/slots/Footer/index.tsx
+++ b/.dumi/theme/slots/Footer/index.tsx
@@ -154,7 +154,7 @@ const Footer = () => {
         },
         {
           title: <FormattedMessage id="app.footer.chinamirror" />,
-          url: 'https://ant-design.gitee.io/',
+          url: 'https://ant-design.antgroup.com',
         },
       ],
     };
@@ -181,19 +181,24 @@ const Footer = () => {
           openExternal: true,
         },
         {
-          icon: <YuqueFilled style={{ color: '#00b96b' }} />,
+          icon: (
+            <img
+              src="https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg"
+              alt="yuque"
+            />
+          ),
           title: <FormattedMessage id="app.footer.yuque.repo" />,
           url: 'https://yuque.com/ant-design/ant-design',
           openExternal: true,
         },
         {
-          icon: <ZhihuOutlined style={{ color: '#0084ff' }} />,
+          icon: <ZhihuOutlined style={{ color: '#056de8' }} />,
           title: <FormattedMessage id="app.footer.zhihu" />,
           url: 'https://www.zhihu.com/column/c_1564262000561106944',
           openExternal: true,
         },
         {
-          icon: <ZhihuOutlined style={{ color: '#0084ff' }} />,
+          icon: <ZhihuOutlined style={{ color: '#056de8' }} />,
           title: <FormattedMessage id="app.footer.zhihu.xtech" />,
           url: 'http://zhuanlan.zhihu.com/xtech',
           openExternal: true,

From 8afc84480dde9b383e777b36867e9687db1f251b Mon Sep 17 00:00:00 2001
From: Yuki Zhang <foryuki@outlook.com>
Date: Mon, 5 Dec 2022 17:26:32 +0800
Subject: [PATCH 06/41] fix: use before to avoid conflict with primary basic
 animation effect (#39241)

---
 components/button/style/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/button/style/index.tsx b/components/button/style/index.tsx
index 077e7ec35f35..4a33aad71226 100644
--- a/components/button/style/index.tsx
+++ b/components/button/style/index.tsx
@@ -62,7 +62,7 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
         '&:not([disabled]) + &:not([disabled])': {
           position: 'relative',
 
-          '&:after': {
+          '&:before': {
             position: 'absolute',
             top: -token.lineWidth,
             insetInlineStart: -token.lineWidth,
@@ -80,7 +80,7 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
           '&:not([disabled]) + &:not([disabled])': {
             position: 'relative',
 
-            '&:after': {
+            '&:before': {
               position: 'absolute',
               top: -token.lineWidth,
               insetInlineStart: -token.lineWidth,

From 8296b725857b4295e29eeee8ccf5f7d508b66177 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Mon, 5 Dec 2022 17:47:12 +0800
Subject: [PATCH 07/41] style: fix RangePicker hover range style (#39266)

* style: fix DatePicker hover range style

close #39219

* chore: fix lint
---
 .dumi/theme/slots/Footer/index.tsx     | 1 -
 components/date-picker/style/index.tsx | 4 ++--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/.dumi/theme/slots/Footer/index.tsx b/.dumi/theme/slots/Footer/index.tsx
index 062ebaed8bdc..0d8c8666200b 100644
--- a/.dumi/theme/slots/Footer/index.tsx
+++ b/.dumi/theme/slots/Footer/index.tsx
@@ -15,7 +15,6 @@ import {
   TwitterOutlined,
   UsergroupAddOutlined,
   ZhihuOutlined,
-  YuqueFilled,
 } from '@ant-design/icons';
 import { css } from '@emotion/react';
 import { TinyColor } from '@ctrl/tinycolor';
diff --git a/components/date-picker/style/index.tsx b/components/date-picker/style/index.tsx
index d4857963a7db..ab950ec025c8 100644
--- a/components/date-picker/style/index.tsx
+++ b/components/date-picker/style/index.tsx
@@ -531,14 +531,14 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
       [`&-date-panel
         ${componentCls}-cell-in-view${componentCls}-cell-in-range${componentCls}-cell-range-hover-start
         ${pickerCellInnerCls}::after`]: {
-        insetInlineEnd: (pickerPanelCellWidth - pickerPanelCellHeight) / 2,
+        insetInlineEnd: -(pickerPanelCellWidth - pickerPanelCellHeight) / 2,
         insetInlineStart: 0,
       },
 
       [`&-date-panel ${componentCls}-cell-in-view${componentCls}-cell-in-range${componentCls}-cell-range-hover-end ${pickerCellInnerCls}::after`]:
         {
           insetInlineEnd: 0,
-          insetInlineStart: (pickerPanelCellWidth - pickerPanelCellHeight) / 2,
+          insetInlineStart: -(pickerPanelCellWidth - pickerPanelCellHeight) / 2,
         },
 
       // Hover with range start & end

From c09dab585089f6d5adb2702017c40f36dc7550b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Mon, 5 Dec 2022 18:30:02 +0800
Subject: [PATCH 08/41] docs: fix site check where logic

---
 .dumi/theme/slots/Footer/AdditionalInfo.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/.dumi/theme/slots/Footer/AdditionalInfo.tsx b/.dumi/theme/slots/Footer/AdditionalInfo.tsx
index 09ee7516b585..a0a204e2e549 100644
--- a/.dumi/theme/slots/Footer/AdditionalInfo.tsx
+++ b/.dumi/theme/slots/Footer/AdditionalInfo.tsx
@@ -35,15 +35,15 @@ export default function InfoNewVersion() {
     updateCSS(
       `
 :where(.${whereCls}) {
-  width: 93px !important;
+  content: "__CHECK__";
 }
     `,
       whereCls,
     );
 
     // Check style
-    const { width } = getComputedStyle(p);
-    setSupportWhere(String(width) === '93px');
+    const { content } = getComputedStyle(p);
+    setSupportWhere(String(content).includes('CHECK'));
 
     return () => {
       document.body.removeChild(p);

From c9d8b89e25855a8996a4bb7a4d3d8218577b590e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=B3=8A=E6=B6=82?=
 <104620424+hu-tu-yi-shi@users.noreply.github.com>
Date: Mon, 5 Dec 2022 21:01:30 +0800
Subject: [PATCH 09/41] docs: improve property description (#39273)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

按钮失效状态 》 设置按钮失效状态
---
 components/button/index.zh-CN.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/button/index.zh-CN.md b/components/button/index.zh-CN.md
index a0e4a0ca7360..70532ceb5de4 100644
--- a/components/button/index.zh-CN.md
+++ b/components/button/index.zh-CN.md
@@ -59,7 +59,7 @@ group:
 | --- | --- | --- | --- | --- |
 | block | 将按钮宽度调整为其父宽度的选项 | boolean | false |  |
 | danger | 设置危险按钮 | boolean | false |  |
-| disabled | 按钮失效状态 | boolean | false |  |
+| disabled | 设置按钮失效状态 | boolean | false |  |
 | ghost | 幽灵属性，使按钮背景透明 | boolean | false |  |
 | href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - |  |
 | htmlType | 设置 `button` 原生的 `type` 值，可选值请参考 [HTML 标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` |  |

From 6614faee509f24bde22672d4da3004523b83a4f5 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Mon, 5 Dec 2022 21:32:10 +0800
Subject: [PATCH 10/41] chore: fix size-limit action (#39268)

* chore: fix size-limit action

* Update .github/workflows/size-limit.yml

* Apply suggestions from code review

* Apply suggestions from code review
---
 .github/workflows/compressed-size.yml | 31 ---------------------------
 .github/workflows/size-limit.yml      | 14 ++++++------
 package.json                          |  9 ++++++--
 3 files changed, 13 insertions(+), 41 deletions(-)
 delete mode 100644 .github/workflows/compressed-size.yml

diff --git a/.github/workflows/compressed-size.yml b/.github/workflows/compressed-size.yml
deleted file mode 100644
index 34f234d3ebeb..000000000000
--- a/.github/workflows/compressed-size.yml
+++ /dev/null
@@ -1,31 +0,0 @@
-name: 📦 Compressed Size
-
-on:
-  pull_request:
-    types: [opened, synchronize]
-
-# Cancel prev CI if new commit come
-concurrency:
-  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
-  cancel-in-progress: true
-
-permissions:
-  contents: read
-
-jobs:
-  compressed-size:
-    permissions:
-      contents: read  # for actions/checkout to fetch code
-      pull-requests: write  # for preactjs/compressed-size-action to create PR comments
-    runs-on: ubuntu-latest
-    env:
-      CI_JOB_NUMBER: 1
-
-    steps:
-    - uses: actions/checkout@v3
-    - uses: preactjs/compressed-size-action@v2
-      with:
-        repo-token: "${{ secrets.GITHUB_TOKEN }}"
-        pattern: "./dist/**/*.min.{js,css}"
-        build-script: "dist:esbuild-no-dup-check"
-        clean-script: "clean-lockfiles"
diff --git a/.github/workflows/size-limit.yml b/.github/workflows/size-limit.yml
index ed8009427cb0..fede7e0b873f 100644
--- a/.github/workflows/size-limit.yml
+++ b/.github/workflows/size-limit.yml
@@ -1,4 +1,4 @@
-name: 📦 Compressed Size(size-limit)
+name: 📦 Size Limit
 
 on:
   pull_request:
@@ -13,10 +13,10 @@ permissions:
   contents: read
 
 jobs:
-  compressed-size:
+  size:
     permissions:
-      contents: read  # for actions/checkout to fetch code
-      pull-requests: write  # for preactjs/compressed-size-action to create PR comments
+      contents: read
+      pull-requests: write
     runs-on: ubuntu-latest
     env:
       CI_JOB_NUMBER: 1
@@ -25,7 +25,5 @@ jobs:
     - uses: actions/checkout@v3
     - uses: andresz1/size-limit-action@v1
       with:
-        repo-token: "${{ secrets.GITHUB_TOKEN }}"
-        pattern: "./dist/**/*.min.{js,css}"
-        build-script: "dist:esbuild-no-dup-check"
-        clean-script: "clean-lockfiles"
+        github_token: ${{ secrets.GITHUB_TOKEN }}
+        script: npx size-limit --json --why
diff --git a/package.json b/package.json
index dd5ef4360524..f8d13c944592 100644
--- a/package.json
+++ b/package.json
@@ -167,6 +167,7 @@
     "@emotion/server": "^11.4.0",
     "@qixian.cs/github-contributors-list": "^1.0.3",
     "@size-limit/file": "^8.0.0",
+    "@size-limit/preset-big-lib": "^8.1.0",
     "@stackblitz/sdk": "^1.3.0",
     "@testing-library/dom": "^8.17.1",
     "@testing-library/jest-dom": "^5.16.3",
@@ -316,13 +317,17 @@
   "size-limit": [
     {
       "path": "./dist/antd.min.js",
-      "limit": "375 kB"
+      "limit": "390 kB"
+    },
+    {
+      "path": "./dist/antd-with-locales.min.js",
+      "limit": "450 kB"
     }
   ],
   "bundlesize": [
     {
       "path": "./dist/antd.min.js",
-      "maxSize": "377.5 kB"
+      "maxSize": "377 kB"
     }
   ],
   "tnpm": {

From 6bb9dbc692cd521e16a0979b4eefe957c02d7ac3 Mon Sep 17 00:00:00 2001
From: lijianan <574980606@qq.com>
Date: Mon, 5 Dec 2022 22:28:08 +0800
Subject: [PATCH 11/41] chore: remove useless node_modules (#39261)

* chore: remore useless node_modules

* fix

* fix

* fix

* fix
---
 .dumi/theme/builtins/Previewer/fromDumiProps.tsx | 1 -
 package.json                                     | 4 +---
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/.dumi/theme/builtins/Previewer/fromDumiProps.tsx b/.dumi/theme/builtins/Previewer/fromDumiProps.tsx
index f00d5872f591..435a9035f629 100644
--- a/.dumi/theme/builtins/Previewer/fromDumiProps.tsx
+++ b/.dumi/theme/builtins/Previewer/fromDumiProps.tsx
@@ -3,7 +3,6 @@ import React, { useEffect, useState } from 'react';
 import JsonML from 'jsonml.js/lib/utils';
 // @ts-ignore
 import toReactComponent from 'jsonml-to-react-element';
-// @ts-ignore
 import Prism from 'prismjs';
 import { useLocation, useIntl, type IPreviewerProps } from 'dumi';
 import { ping } from '../../utils';
diff --git a/package.json b/package.json
index f8d13c944592..ce93caa2bfb2 100644
--- a/package.json
+++ b/package.json
@@ -180,6 +180,7 @@
     "@types/jest-image-snapshot": "^5.1.0",
     "@types/jquery": "^3.5.14",
     "@types/lodash": "^4.14.139",
+    "@types/prismjs": "^1.26.0",
     "@types/puppeteer": "^7.0.4",
     "@types/qs": "^6.9.7",
     "@types/react": "^18.0.0",
@@ -274,7 +275,6 @@
     "react-draggable": "^4.4.3",
     "react-fast-marquee": "^1.2.1",
     "react-github-button": "^0.1.11",
-    "react-helmet-async": "~1.3.0",
     "react-highlight-words": "^0.18.0",
     "react-infinite-scroll-component": "^6.1.0",
     "react-resizable": "^3.0.1",
@@ -288,7 +288,6 @@
     "remove-files-webpack-plugin": "1.5.0",
     "rimraf": "^3.0.0",
     "rome": "^10.0.1",
-    "scrollama": "^3.0.0",
     "semver": "^7.3.5",
     "simple-git": "^3.0.0",
     "size-limit": "^8.0.0",
@@ -299,7 +298,6 @@
     "stylelint-declaration-block-no-ignored-properties": "^2.1.0",
     "stylelint-order": "^5.0.0",
     "sylvanas": "^0.6.1",
-    "theme-switcher": "^1.0.2",
     "ts-node": "^10.8.2",
     "typedoc": "^0.23.21",
     "typescript": "~4.9.3",

From 25d9ee096bfce654911ea0e8b3c868109b3a9d77 Mon Sep 17 00:00:00 2001
From: PisecesPeng <Piseces.Peng@outlook.com>
Date: Tue, 6 Dec 2022 00:23:29 +0800
Subject: [PATCH 12/41] docs: fix Grid demo slider tooltip (#39275)

* docs: fix Grid demo slider tooltip

* docs: fix Grid demo slider tooltip

* docs: fix Grid demo slider tooltip
---
 components/grid/demo/playground.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/grid/demo/playground.tsx b/components/grid/demo/playground.tsx
index 17d91ff1c0e8..adbf2699600a 100644
--- a/components/grid/demo/playground.tsx
+++ b/components/grid/demo/playground.tsx
@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
 import { Col, Row, Slider } from 'antd';
 
-const gutters: Record<string, number> = {};
-const vgutters: Record<string, number> = {};
-const colCounts: Record<string, number> = {};
+const gutters: Record<PropertyKey, number> = {};
+const vgutters: Record<PropertyKey, number> = {};
+const colCounts: Record<PropertyKey, number> = {};
 
 [8, 16, 24, 32, 40, 48].forEach((value, i) => {
   gutters[i] = value;
@@ -43,7 +43,7 @@ const App: React.FC = () => {
           onChange={setGutterKey}
           marks={gutters}
           step={null}
-          tooltip={{ formatter: (value) => value && gutters[value] }}
+          tooltip={{ formatter: (value: number) => gutters[value] }}
         />
       </div>
       <span>Vertical Gutter (px): </span>
@@ -55,7 +55,7 @@ const App: React.FC = () => {
           onChange={setVgutterKey}
           marks={vgutters}
           step={null}
-          tooltip={{ formatter: (value) => value && vgutters[value] }}
+          tooltip={{ formatter: (value: number) => vgutters[value] }}
         />
       </div>
       <span>Column Count:</span>
@@ -67,7 +67,7 @@ const App: React.FC = () => {
           onChange={setColCountKey}
           marks={colCounts}
           step={null}
-          tooltip={{ formatter: (value) => value && colCounts[value] }}
+          tooltip={{ formatter: (value: number) => colCounts[value] }}
         />
       </div>
       <Row gutter={[gutters[gutterKey], vgutters[vgutterKey]]}>

From cfc3aae4524e3dc253113fd5781718dc804ffbc3 Mon Sep 17 00:00:00 2001
From: Ran Sagy <77805401+Ran-Sagy@users.noreply.github.com>
Date: Tue, 6 Dec 2022 04:20:27 +0200
Subject: [PATCH 13/41] fixed he-il mistakes (#39280)

---
 components/locale/he_IL.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/locale/he_IL.tsx b/components/locale/he_IL.tsx
index c0fc9a6f87da..739dbb716acc 100644
--- a/components/locale/he_IL.tsx
+++ b/components/locale/he_IL.tsx
@@ -25,9 +25,9 @@ const localeValues: Locale = {
     selectionAll: 'בחר את כל הנתונים',
     sortTitle: 'מיון',
     expand: 'הרחב שורה',
-    collapse: 'צמצם שורהw',
-    triggerDesc: 'לחץ על מיון לפי סדר יורד',
-    triggerAsc: 'לחץ על מיון לפי סדר עולה',
+    collapse: 'צמצם שורה',
+    triggerDesc: 'לחץ למיון לפי סדר יורד',
+    triggerAsc: 'לחץ למיון לפי סדר עולה',
     cancelSort: 'לחץ כדי לבטל את המיון',
   },
   Modal: {

From 5ef11772707210fa6985aef2334a64326b673882 Mon Sep 17 00:00:00 2001
From: lijianan <574980606@qq.com>
Date: Tue, 6 Dec 2022 10:25:26 +0800
Subject: [PATCH 14/41] chore: remove useless node_modules (#39278)

* chore: remove useless node_modules

* Update package.json
---
 package.json | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/package.json b/package.json
index ce93caa2bfb2..58757673fe8a 100644
--- a/package.json
+++ b/package.json
@@ -285,8 +285,6 @@
     "remark-cli": "^11.0.0",
     "remark-lint": "^9.0.0",
     "remark-preset-lint-recommended": "^6.0.0",
-    "remove-files-webpack-plugin": "1.5.0",
-    "rimraf": "^3.0.0",
     "rome": "^10.0.1",
     "semver": "^7.3.5",
     "simple-git": "^3.0.0",
@@ -296,7 +294,6 @@
     "stylelint-config-rational-order": "^0.1.2",
     "stylelint-config-standard": "^29.0.0",
     "stylelint-declaration-block-no-ignored-properties": "^2.1.0",
-    "stylelint-order": "^5.0.0",
     "sylvanas": "^0.6.1",
     "ts-node": "^10.8.2",
     "typedoc": "^0.23.21",

From ac0139c2c7f4fe6c5ab308188f24f07f8dbb79b1 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Tue, 6 Dec 2022 14:54:34 +0800
Subject: [PATCH 15/41] chore: simpify size-limit output (#39285)

---
 .github/workflows/size-limit.yml | 1 -
 package.json                     | 6 +++---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/.github/workflows/size-limit.yml b/.github/workflows/size-limit.yml
index fede7e0b873f..c03b16a832ea 100644
--- a/.github/workflows/size-limit.yml
+++ b/.github/workflows/size-limit.yml
@@ -26,4 +26,3 @@ jobs:
     - uses: andresz1/size-limit-action@v1
       with:
         github_token: ${{ secrets.GITHUB_TOKEN }}
-        script: npx size-limit --json --why
diff --git a/package.json b/package.json
index 58757673fe8a..48f590ecba58 100644
--- a/package.json
+++ b/package.json
@@ -166,8 +166,8 @@
     "@emotion/react": "^11.10.4",
     "@emotion/server": "^11.4.0",
     "@qixian.cs/github-contributors-list": "^1.0.3",
-    "@size-limit/file": "^8.0.0",
-    "@size-limit/preset-big-lib": "^8.1.0",
+    "@size-limit/file": "^8.1.0",
+    "@size-limit/webpack-why": "^8.1.0",
     "@stackblitz/sdk": "^1.3.0",
     "@testing-library/dom": "^8.17.1",
     "@testing-library/jest-dom": "^5.16.3",
@@ -288,7 +288,7 @@
     "rome": "^10.0.1",
     "semver": "^7.3.5",
     "simple-git": "^3.0.0",
-    "size-limit": "^8.0.0",
+    "size-limit": "^8.1.0",
     "stylelint": "^14.9.0",
     "stylelint-config-prettier": "^9.0.2",
     "stylelint-config-rational-order": "^0.1.2",

From d17d98f81abd0a1f353efc4f9933b71887b316ba Mon Sep 17 00:00:00 2001
From: lijianan <574980606@qq.com>
Date: Tue, 6 Dec 2022 15:17:34 +0800
Subject: [PATCH 16/41] fix: fix style error (#39282)

* fix: fix style error

* fix
---
 components/float-button/style/index.tsx | 30 ++++++++++++-------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/components/float-button/style/index.tsx b/components/float-button/style/index.tsx
index ce82dfdf7b8b..05d391d84618 100644
--- a/components/float-button/style/index.tsx
+++ b/components/float-button/style/index.tsx
@@ -80,7 +80,7 @@ const initFloatButtonGroupMotion = (token: FloatButtonToken) => {
 
 // ============================== Group ==============================
 const floatButtonGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token) => {
-  const { componentCls, floatButtonSize, margin, borderRadius } = token;
+  const { componentCls, floatButtonSize, margin, borderRadiusLG } = token;
   const groupPrefixCls = `${componentCls}-group`;
   return {
     [groupPrefixCls]: {
@@ -95,7 +95,7 @@ const floatButtonGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token
       minHeight: floatButtonSize,
       insetInlineEnd: token.floatButtonInsetInlineEnd,
       insetBlockEnd: token.floatButtonInsetBlockEnd,
-      borderRadius: token.borderRadius,
+      borderRadius: borderRadiusLG,
 
       [`${groupPrefixCls}-wrap`]: {
         zIndex: -1,
@@ -124,12 +124,12 @@ const floatButtonGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token
         borderRadius: 0,
         padding: 0,
         '&:first-child': {
-          borderStartStartRadius: borderRadius,
-          borderStartEndRadius: borderRadius,
+          borderStartStartRadius: borderRadiusLG,
+          borderStartEndRadius: borderRadiusLG,
         },
         '&:last-child': {
-          borderEndStartRadius: borderRadius,
-          borderEndEndRadius: borderRadius,
+          borderEndStartRadius: borderRadiusLG,
+          borderEndEndRadius: borderRadiusLG,
         },
         '&:not(:last-child)': {
           borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
@@ -137,7 +137,7 @@ const floatButtonGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token
       },
       [`${groupPrefixCls}-wrap`]: {
         display: 'block',
-        borderRadius,
+        borderRadius: borderRadiusLG,
         boxShadow: token.boxShadowSecondary,
         overflow: 'hidden',
         [`${componentCls}-square`]: {
@@ -146,12 +146,12 @@ const floatButtonGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token
           borderRadius: 0,
           padding: token.paddingXXS,
           '&:first-child': {
-            borderStartStartRadius: borderRadius,
-            borderStartEndRadius: borderRadius,
+            borderStartStartRadius: borderRadiusLG,
+            borderStartEndRadius: borderRadiusLG,
           },
           '&:last-child': {
-            borderEndStartRadius: borderRadius,
-            borderEndEndRadius: borderRadius,
+            borderEndStartRadius: borderRadiusLG,
+            borderEndEndRadius: borderRadiusLG,
           },
           '&:not(:last-child)': {
             borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
@@ -183,7 +183,7 @@ const floatButtonGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token
 
 // ============================== Shared ==============================
 const sharedFloatButtonStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token) => {
-  const { componentCls, floatButtonIconSize, floatButtonSize } = token;
+  const { componentCls, floatButtonIconSize, floatButtonSize, borderRadiusLG } = token;
   return {
     [componentCls]: {
       ...resetComponent(token),
@@ -212,8 +212,8 @@ const sharedFloatButtonStyle: GenerateStyle<FloatButtonToken, CSSObject> = (toke
       },
 
       [`${componentCls}-body`]: {
-        width: floatButtonSize,
-        height: floatButtonSize,
+        width: '100%',
+        height: '100%',
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',
@@ -247,7 +247,7 @@ const sharedFloatButtonStyle: GenerateStyle<FloatButtonToken, CSSObject> = (toke
     [`${componentCls}-square`]: {
       height: 'auto',
       minHeight: floatButtonSize,
-      borderRadius: token.borderRadius,
+      borderRadius: borderRadiusLG,
       [`${componentCls}-body`]: {
         height: 'auto',
         borderRadius: token.borderRadiusSM,

From cadab499e1a4901a103f2df0c257ebf9b2147593 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nghi=E1=BB=87p?= <me@nghiep.dev>
Date: Tue, 6 Dec 2022 14:32:20 +0700
Subject: [PATCH 17/41] chore: fix vietnamese typos (#39279)

* chore: fix vietnamese typos

* Update snapshots
---
 .../__snapshots__/index.test.tsx.snap         |  8 ++++----
 components/locale/vi_VN.tsx                   | 20 +++++++++----------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/components/locale-provider/__tests__/__snapshots__/index.test.tsx.snap b/components/locale-provider/__tests__/__snapshots__/index.test.tsx.snap
index 0b4cd8b09523..6873c55febbc 100644
--- a/components/locale-provider/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/locale-provider/__tests__/__snapshots__/index.test.tsx.snap
@@ -326871,7 +326871,7 @@ exports[`Locale Provider should display the text as vi 1`] = `
                 type="button"
               >
                 <span>
-                  Huỷ
+                  Hủy
                 </span>
               </button>
               <button
@@ -326879,7 +326879,7 @@ exports[`Locale Provider should display the text as vi 1`] = `
                 type="button"
               >
                 <span>
-                  OK
+                  Đồng ý
                 </span>
               </button>
             </div>
@@ -328444,7 +328444,7 @@ exports[`Locale Provider should display the text as vi 1`] = `
               type="button"
             >
               <span>
-                Huỷ
+                Hủy
               </span>
             </button>
             <button
@@ -328452,7 +328452,7 @@ exports[`Locale Provider should display the text as vi 1`] = `
               type="button"
             >
               <span>
-                OK
+                Đồng ý
               </span>
             </button>
           </div>
diff --git a/components/locale/vi_VN.tsx b/components/locale/vi_VN.tsx
index 369686728af2..c7669b4447f2 100644
--- a/components/locale/vi_VN.tsx
+++ b/components/locale/vi_VN.tsx
@@ -11,20 +11,20 @@ const localeValues: Locale = {
   TimePicker,
   Calendar,
   Table: {
-    filterTitle: 'Bộ ',
-    filterConfirm: 'OK',
-    filterReset: 'Tạo Lại',
-    selectAll: 'Chọn Tất Cả',
-    selectInvert: 'Chọn Ngược Lại',
+    filterTitle: 'Bộ lọc',
+    filterConfirm: 'Đồng ý',
+    filterReset: 'Bỏ lọc',
+    selectAll: 'Chọn tất cả',
+    selectInvert: 'Chọn ngược lại',
   },
   Modal: {
-    okText: 'OK',
-    cancelText: 'Huỷ',
+    okText: 'Đồng ý',
+    cancelText: 'Hủy',
     justOkText: 'OK',
   },
   Popconfirm: {
-    okText: 'OK',
-    cancelText: 'Huỷ',
+    okText: 'Đồng ý',
+    cancelText: 'Hủy',
   },
   Transfer: {
     titles: ['', ''],
@@ -36,7 +36,7 @@ const localeValues: Locale = {
     uploading: 'Đang tải lên...',
     removeFile: 'Gỡ bỏ tập tin',
     uploadError: 'Lỗi tải lên',
-    previewFile: 'Xem thử tập tin',
+    previewFile: 'Xem trước tập tin',
     downloadFile: 'Tải tập tin',
   },
   Empty: {

From 1dca4eba9864fefa0caf93dfbcedbf85bf4b1b54 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?=
 =?UTF-8?q?=E5=8D=9C?= <smith3816@gmail.com>
Date: Tue, 6 Dec 2022 17:18:05 +0800
Subject: [PATCH 18/41] fix: Tree selection style missing (#39292)

* fix: Tree missing selection style

* test: add snapshot

* test: update snapshot

* docs: Update demo
---
 .../__snapshots__/demo-extend.test.ts.snap    | 163 ++++++++++++++++++
 .../__tests__/__snapshots__/demo.test.ts.snap | 163 ++++++++++++++++++
 components/tree/demo/block-node.tsx           |  28 +++
 components/tree/index.en-US.md                |   1 +
 components/tree/index.zh-CN.md                |   1 +
 components/tree/style/index.tsx               |   5 -
 6 files changed, 356 insertions(+), 5 deletions(-)
 create mode 100644 components/tree/demo/block-node.tsx

diff --git a/components/tree/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tree/__tests__/__snapshots__/demo-extend.test.ts.snap
index e8ddf1e3d03c..a1d57e7c786e 100644
--- a/components/tree/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/tree/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -857,6 +857,169 @@ exports[`renders ./components/tree/demo/basic-controlled.tsx extend context corr
 </div>
 `;
 
+exports[`renders ./components/tree/demo/block-node.tsx extend context correctly 1`] = `
+<div
+  class="ant-tree ant-tree-icon-hide ant-tree-block-node"
+  role="tree"
+>
+  <div>
+    <input
+      aria-label="for screen reader"
+      style="width:0;height:0;display:flex;overflow:hidden;opacity:0;border:0;padding:0;margin:0"
+      tabindex="0"
+      value=""
+    />
+  </div>
+  <div
+    aria-hidden="true"
+    class="ant-tree-treenode"
+    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
+  >
+    <div
+      class="ant-tree-indent"
+    >
+      <div
+        class="ant-tree-indent-unit"
+      />
+    </div>
+  </div>
+  <div
+    class="ant-tree-list"
+    style="position:relative"
+  >
+    <div
+      class="ant-tree-list-holder"
+    >
+      <div>
+        <div
+          class="ant-tree-list-holder-inner"
+          style="display:flex;flex-direction:column"
+        >
+          <div
+            aria-grabbed="false"
+            class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last"
+            draggable="false"
+          >
+            <span
+              aria-hidden="true"
+              class="ant-tree-indent"
+            />
+            <span
+              class="ant-tree-switcher ant-tree-switcher_open"
+            >
+              <span
+                aria-label="caret-down"
+                class="anticon anticon-caret-down ant-tree-switcher-icon"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="caret-down"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="0 0 1024 1024"
+                  width="1em"
+                >
+                  <path
+                    d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
+                  />
+                </svg>
+              </span>
+            </span>
+            <span
+              class="ant-tree-checkbox"
+            >
+              <span
+                class="ant-tree-checkbox-inner"
+              />
+            </span>
+            <span
+              class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"
+              title="parent"
+            >
+              <span
+                class="ant-tree-title"
+              >
+                parent
+              </span>
+            </span>
+          </div>
+          <div
+            aria-grabbed="false"
+            class="ant-tree-treenode ant-tree-treenode-disabled ant-tree-treenode-switcher-open"
+            draggable="false"
+          >
+            <span
+              aria-hidden="true"
+              class="ant-tree-indent"
+            >
+              <span
+                class="ant-tree-indent-unit ant-tree-indent-unit-start ant-tree-indent-unit-end"
+              />
+            </span>
+            <span
+              class="ant-tree-switcher ant-tree-switcher-noop"
+            />
+            <span
+              class="ant-tree-checkbox ant-tree-checkbox-disabled"
+            >
+              <span
+                class="ant-tree-checkbox-inner"
+              />
+            </span>
+            <span
+              class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
+              title="child 1"
+            >
+              <span
+                class="ant-tree-title"
+              >
+                child 1
+              </span>
+            </span>
+          </div>
+          <div
+            aria-grabbed="false"
+            class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-selected ant-tree-treenode-leaf-last"
+            draggable="false"
+          >
+            <span
+              aria-hidden="true"
+              class="ant-tree-indent"
+            >
+              <span
+                class="ant-tree-indent-unit ant-tree-indent-unit-start ant-tree-indent-unit-end"
+              />
+            </span>
+            <span
+              class="ant-tree-switcher ant-tree-switcher-noop"
+            />
+            <span
+              class="ant-tree-checkbox ant-tree-checkbox-disabled"
+            >
+              <span
+                class="ant-tree-checkbox-inner"
+              />
+            </span>
+            <span
+              class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal ant-tree-node-selected"
+              title="child 2"
+            >
+              <span
+                class="ant-tree-title"
+              >
+                child 2
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders ./components/tree/demo/customized-icon.tsx extend context correctly 1`] = `
 <div
   class="ant-tree"
diff --git a/components/tree/__tests__/__snapshots__/demo.test.ts.snap b/components/tree/__tests__/__snapshots__/demo.test.ts.snap
index 3201ab7f6f7f..02ef5f749c14 100644
--- a/components/tree/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/tree/__tests__/__snapshots__/demo.test.ts.snap
@@ -857,6 +857,169 @@ exports[`renders ./components/tree/demo/basic-controlled.tsx correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/tree/demo/block-node.tsx correctly 1`] = `
+<div
+  class="ant-tree ant-tree-icon-hide ant-tree-block-node"
+  role="tree"
+>
+  <div>
+    <input
+      aria-label="for screen reader"
+      style="width:0;height:0;display:flex;overflow:hidden;opacity:0;border:0;padding:0;margin:0"
+      tabindex="0"
+      value=""
+    />
+  </div>
+  <div
+    aria-hidden="true"
+    class="ant-tree-treenode"
+    style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden;border:0;padding:0"
+  >
+    <div
+      class="ant-tree-indent"
+    >
+      <div
+        class="ant-tree-indent-unit"
+      />
+    </div>
+  </div>
+  <div
+    class="ant-tree-list"
+    style="position:relative"
+  >
+    <div
+      class="ant-tree-list-holder"
+    >
+      <div>
+        <div
+          class="ant-tree-list-holder-inner"
+          style="display:flex;flex-direction:column"
+        >
+          <div
+            aria-grabbed="false"
+            class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last"
+            draggable="false"
+          >
+            <span
+              aria-hidden="true"
+              class="ant-tree-indent"
+            />
+            <span
+              class="ant-tree-switcher ant-tree-switcher_open"
+            >
+              <span
+                aria-label="caret-down"
+                class="anticon anticon-caret-down ant-tree-switcher-icon"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="caret-down"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="0 0 1024 1024"
+                  width="1em"
+                >
+                  <path
+                    d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
+                  />
+                </svg>
+              </span>
+            </span>
+            <span
+              class="ant-tree-checkbox"
+            >
+              <span
+                class="ant-tree-checkbox-inner"
+              />
+            </span>
+            <span
+              class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"
+              title="parent"
+            >
+              <span
+                class="ant-tree-title"
+              >
+                parent
+              </span>
+            </span>
+          </div>
+          <div
+            aria-grabbed="false"
+            class="ant-tree-treenode ant-tree-treenode-disabled ant-tree-treenode-switcher-open"
+            draggable="false"
+          >
+            <span
+              aria-hidden="true"
+              class="ant-tree-indent"
+            >
+              <span
+                class="ant-tree-indent-unit ant-tree-indent-unit-start ant-tree-indent-unit-end"
+              />
+            </span>
+            <span
+              class="ant-tree-switcher ant-tree-switcher-noop"
+            />
+            <span
+              class="ant-tree-checkbox ant-tree-checkbox-disabled"
+            >
+              <span
+                class="ant-tree-checkbox-inner"
+              />
+            </span>
+            <span
+              class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
+              title="child 1"
+            >
+              <span
+                class="ant-tree-title"
+              >
+                child 1
+              </span>
+            </span>
+          </div>
+          <div
+            aria-grabbed="false"
+            class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-selected ant-tree-treenode-leaf-last"
+            draggable="false"
+          >
+            <span
+              aria-hidden="true"
+              class="ant-tree-indent"
+            >
+              <span
+                class="ant-tree-indent-unit ant-tree-indent-unit-start ant-tree-indent-unit-end"
+              />
+            </span>
+            <span
+              class="ant-tree-switcher ant-tree-switcher-noop"
+            />
+            <span
+              class="ant-tree-checkbox ant-tree-checkbox-disabled"
+            >
+              <span
+                class="ant-tree-checkbox-inner"
+              />
+            </span>
+            <span
+              class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal ant-tree-node-selected"
+              title="child 2"
+            >
+              <span
+                class="ant-tree-title"
+              >
+                child 2
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders ./components/tree/demo/customized-icon.tsx correctly 1`] = `
 <div
   class="ant-tree"
diff --git a/components/tree/demo/block-node.tsx b/components/tree/demo/block-node.tsx
new file mode 100644
index 000000000000..3d52f2b5d327
--- /dev/null
+++ b/components/tree/demo/block-node.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { Tree } from 'antd';
+import type { DataNode } from 'antd/es/tree';
+
+const treeData: DataNode[] = [
+  {
+    title: 'parent',
+    key: '0',
+    children: [
+      {
+        title: 'child 1',
+        key: '0-0',
+        disabled: true,
+      },
+      {
+        title: 'child 2',
+        key: '0-1',
+        disableCheckbox: true,
+      },
+    ],
+  },
+];
+
+const App: React.FC = () => (
+  <Tree checkable defaultSelectedKeys={['0-1']} defaultExpandAll treeData={treeData} blockNode />
+);
+
+export default App;
diff --git a/components/tree/index.en-US.md b/components/tree/index.en-US.md
index 9a2552db428a..b7670b893cbb 100644
--- a/components/tree/index.en-US.md
+++ b/components/tree/index.en-US.md
@@ -28,6 +28,7 @@ Almost anything can be represented in a tree structure. Examples include directo
 <code src="./demo/virtual-scroll.tsx">Virtual scroll</code>
 <code src="./demo/drag-debug.tsx" debug>Drag Debug</code>
 <code src="./demo/big-data.tsx" debug>Big data</code>
+<code src="./demo/block-node.tsx">Block Node</code>
 
 ## API
 
diff --git a/components/tree/index.zh-CN.md b/components/tree/index.zh-CN.md
index 96145489ca1f..5066acd18d19 100644
--- a/components/tree/index.zh-CN.md
+++ b/components/tree/index.zh-CN.md
@@ -29,6 +29,7 @@ demo:
 <code src="./demo/virtual-scroll.tsx">虚拟滚动</code>
 <code src="./demo/drag-debug.tsx" debug>Drag Debug</code>
 <code src="./demo/big-data.tsx" debug>大数据</code>
+<code src="./demo/block-node.tsx">占据整行</code>
 
 ## API
 
diff --git a/components/tree/style/index.tsx b/components/tree/style/index.tsx
index a46e69979aa4..df0a92bca33a 100644
--- a/components/tree/style/index.tsx
+++ b/components/tree/style/index.tsx
@@ -266,11 +266,6 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject =>
       // >>> Title
       // add `${treeCls}-checkbox + span` to cover checkbox `${checkboxCls} + span`
       [`${treeCls}-node-content-wrapper, ${treeCls}-checkbox + span`]: {
-        paddingInline: 0,
-      },
-      [`${treeCls}-node-content-wrapper`]: {
-        display: 'flex',
-        flexWrap: 'nowrap',
         position: 'relative',
         zIndex: 'auto',
         minHeight: treeTitleHeight,

From 88d4b014e21aef5495b34cbc7fc657c15205809d Mon Sep 17 00:00:00 2001
From: kalykun <984757534@qq.com>
Date: Tue, 6 Dec 2022 17:19:27 +0800
Subject: [PATCH 19/41] docs: correct types (#39297)

---
 components/checkbox/index.en-US.md | 2 +-
 components/checkbox/index.zh-CN.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/checkbox/index.en-US.md b/components/checkbox/index.en-US.md
index 853a32647d92..625689e5e9b5 100644
--- a/components/checkbox/index.en-US.md
+++ b/components/checkbox/index.en-US.md
@@ -38,7 +38,7 @@ Checkbox component.
 | defaultChecked | Specifies the initial state: whether or not the checkbox is selected | boolean | false |  |
 | disabled | If disable checkbox | boolean | false |  |
 | indeterminate | The indeterminate checked state of checkbox | boolean | false |  |
-| onChange | The callback function that is triggered when the state changes | function(e:Event) | - |  |
+| onChange | The callback function that is triggered when the state changes | function(e: CheckboxChangeEvent) | - |  |
 
 #### Checkbox Group
 
diff --git a/components/checkbox/index.zh-CN.md b/components/checkbox/index.zh-CN.md
index c96cb86c0817..2b337893553d 100644
--- a/components/checkbox/index.zh-CN.md
+++ b/components/checkbox/index.zh-CN.md
@@ -39,7 +39,7 @@ demo:
 | defaultChecked | 初始是否选中                            | boolean           | false  |      |
 | disabled       | 失效状态                                | boolean           | false  |      |
 | indeterminate  | 设置 indeterminate 状态，只负责样式控制 | boolean           | false  |      |
-| onChange       | 变化时的回调函数                        | function(e:Event) | -      |      |
+| onChange       | 变化时的回调函数                        | function(e: CheckboxChangeEvent) | -      |      |
 
 #### Checkbox Group
 

From df9154e8ac8fd66c300048b76a32575dd984264c Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Tue, 6 Dec 2022 17:35:01 +0800
Subject: [PATCH 20/41] fix: Select search style (#39299)

---
 components/select/style/single.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/select/style/single.tsx b/components/select/style/single.tsx
index 988a4f550e2d..dad8aea78f84 100644
--- a/components/select/style/single.tsx
+++ b/components/select/style/single.tsx
@@ -165,7 +165,6 @@ export default function genSingleStyle(token: SelectToken): CSSInterpolation {
 
           // With arrow should provides `padding-right` to show the arrow
           [`&${componentCls}-show-arrow ${componentCls}-selection-search`]: {
-            insetInlineStart: 'auto',
             insetInlineEnd: inputPaddingHorizontalSM + token.fontSize * 1.5,
           },
 

From db4ee53ffa1c3db2e1ebcbd5dd60a9041a1a4ddf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=91=E9=9B=A8?= <wangning4567@163.com>
Date: Tue, 6 Dec 2022 17:45:10 +0800
Subject: [PATCH 21/41] feat : new components app (#39046)

* feat : new components app

* feat: update app

* feat: update app

* feat: update app

* feat: update app

* feat: update app

* feat: update app

* feat: update app

* feat: update style

* feat: update style

* feat: update style

* feat: add style

* chore: code clean

* feat: add prefixCls

* chore: update snapshot

* chore: update snapshot

* chore: update snapshot

* test: image test

* Update components/app/index.zh-CN.md

Co-authored-by: afc163 <afc163@gmail.com>

* feat : update for reviewer

* feat: update

* feat: update

* feat: update snap

Co-authored-by: MadCcc <1075746765@qq.com>
Co-authored-by: afc163 <afc163@gmail.com>
---
 .../__snapshots__/index.test.ts.snap          |  1 +
 .../__snapshots__/demo-extend.test.ts.snap    | 46 ++++++++++++++
 .../__tests__/__snapshots__/demo.test.ts.snap | 46 ++++++++++++++
 .../__snapshots__/index.test.tsx.snap         | 17 ++++++
 components/app/__tests__/demo-extend.test.ts  |  3 +
 components/app/__tests__/demo.test.ts         |  3 +
 components/app/__tests__/image.test.ts        |  5 ++
 components/app/__tests__/index.test.tsx       | 33 ++++++++++
 components/app/context.ts                     | 19 ++++++
 components/app/demo/message.md                |  7 +++
 components/app/demo/message.tsx               | 24 ++++++++
 components/app/demo/modal.md                  |  7 +++
 components/app/demo/modal.tsx                 | 27 +++++++++
 components/app/demo/notification.md           |  7 +++
 components/app/demo/notification.tsx          | 28 +++++++++
 components/app/index.en-US.md                 | 43 +++++++++++++
 components/app/index.tsx                      | 60 +++++++++++++++++++
 components/app/index.zh-CN.md                 | 45 ++++++++++++++
 components/app/style/index.tsx                | 22 +++++++
 components/index.tsx                          |  1 +
 components/style/index.tsx                    |  6 +-
 components/theme/interface/components.ts      |  2 +
 .../theme/util/genComponentStyleHook.ts       |  2 +-
 tests/__snapshots__/index.test.ts.snap        |  1 +
 tests/shared/imageTest.tsx                    |  5 +-
 25 files changed, 453 insertions(+), 7 deletions(-)
 create mode 100644 components/app/__tests__/__snapshots__/demo-extend.test.ts.snap
 create mode 100644 components/app/__tests__/__snapshots__/demo.test.ts.snap
 create mode 100644 components/app/__tests__/__snapshots__/index.test.tsx.snap
 create mode 100644 components/app/__tests__/demo-extend.test.ts
 create mode 100644 components/app/__tests__/demo.test.ts
 create mode 100644 components/app/__tests__/image.test.ts
 create mode 100644 components/app/__tests__/index.test.tsx
 create mode 100644 components/app/context.ts
 create mode 100644 components/app/demo/message.md
 create mode 100644 components/app/demo/message.tsx
 create mode 100644 components/app/demo/modal.md
 create mode 100644 components/app/demo/modal.tsx
 create mode 100644 components/app/demo/notification.md
 create mode 100644 components/app/demo/notification.tsx
 create mode 100644 components/app/index.en-US.md
 create mode 100644 components/app/index.tsx
 create mode 100644 components/app/index.zh-CN.md
 create mode 100644 components/app/style/index.tsx

diff --git a/components/__tests__/__snapshots__/index.test.ts.snap b/components/__tests__/__snapshots__/index.test.ts.snap
index 9364bf329bad..a0b933818ac3 100644
--- a/components/__tests__/__snapshots__/index.test.ts.snap
+++ b/components/__tests__/__snapshots__/index.test.ts.snap
@@ -5,6 +5,7 @@ exports[`antd exports modules correctly 1`] = `
   "Affix",
   "Alert",
   "Anchor",
+  "App",
   "AutoComplete",
   "Avatar",
   "BackTop",
diff --git a/components/app/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/app/__tests__/__snapshots__/demo-extend.test.ts.snap
new file mode 100644
index 000000000000..a405386610f1
--- /dev/null
+++ b/components/app/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/app/demo/message.tsx extend context correctly 1`] = `
+<div
+  class="ant-app"
+>
+  <button
+    class="ant-btn ant-btn-primary"
+    type="button"
+  >
+    <span>
+      Open message
+    </span>
+  </button>
+</div>
+`;
+
+exports[`renders ./components/app/demo/modal.tsx extend context correctly 1`] = `
+<div
+  class="ant-app"
+>
+  <button
+    class="ant-btn ant-btn-primary"
+    type="button"
+  >
+    <span>
+      Open modal
+    </span>
+  </button>
+</div>
+`;
+
+exports[`renders ./components/app/demo/notification.tsx extend context correctly 1`] = `
+<div
+  class="ant-app"
+>
+  <button
+    class="ant-btn ant-btn-primary"
+    type="button"
+  >
+    <span>
+      Open notification
+    </span>
+  </button>
+</div>
+`;
diff --git a/components/app/__tests__/__snapshots__/demo.test.ts.snap b/components/app/__tests__/__snapshots__/demo.test.ts.snap
new file mode 100644
index 000000000000..c8a98f5162f7
--- /dev/null
+++ b/components/app/__tests__/__snapshots__/demo.test.ts.snap
@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/app/demo/message.tsx correctly 1`] = `
+<div
+  class="ant-app"
+>
+  <button
+    class="ant-btn ant-btn-primary"
+    type="button"
+  >
+    <span>
+      Open message
+    </span>
+  </button>
+</div>
+`;
+
+exports[`renders ./components/app/demo/modal.tsx correctly 1`] = `
+<div
+  class="ant-app"
+>
+  <button
+    class="ant-btn ant-btn-primary"
+    type="button"
+  >
+    <span>
+      Open modal
+    </span>
+  </button>
+</div>
+`;
+
+exports[`renders ./components/app/demo/notification.tsx correctly 1`] = `
+<div
+  class="ant-app"
+>
+  <button
+    class="ant-btn ant-btn-primary"
+    type="button"
+  >
+    <span>
+      Open notification
+    </span>
+  </button>
+</div>
+`;
diff --git a/components/app/__tests__/__snapshots__/index.test.tsx.snap b/components/app/__tests__/__snapshots__/index.test.tsx.snap
new file mode 100644
index 000000000000..9d7d65275a4e
--- /dev/null
+++ b/components/app/__tests__/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`App rtl render component should be rendered correctly in RTL direction 1`] = `
+<div
+  class="ant-app"
+/>
+`;
+
+exports[`App single 1`] = `
+<div
+  class="ant-app"
+>
+  <div>
+    Hello World
+  </div>
+</div>
+`;
diff --git a/components/app/__tests__/demo-extend.test.ts b/components/app/__tests__/demo-extend.test.ts
new file mode 100644
index 000000000000..6ef0a0d13da1
--- /dev/null
+++ b/components/app/__tests__/demo-extend.test.ts
@@ -0,0 +1,3 @@
+import { extendTest } from '../../../tests/shared/demoTest';
+
+extendTest('app');
diff --git a/components/app/__tests__/demo.test.ts b/components/app/__tests__/demo.test.ts
new file mode 100644
index 000000000000..fbcb9a76c9d6
--- /dev/null
+++ b/components/app/__tests__/demo.test.ts
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest';
+
+demoTest('app');
diff --git a/components/app/__tests__/image.test.ts b/components/app/__tests__/image.test.ts
new file mode 100644
index 000000000000..8d3a08346d67
--- /dev/null
+++ b/components/app/__tests__/image.test.ts
@@ -0,0 +1,5 @@
+import { imageDemoTest } from '../../../tests/shared/imageTest';
+
+describe('app', () => {
+  imageDemoTest('app');
+});
diff --git a/components/app/__tests__/index.test.tsx b/components/app/__tests__/index.test.tsx
new file mode 100644
index 000000000000..3ea627cc9cc2
--- /dev/null
+++ b/components/app/__tests__/index.test.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import App from '..';
+import mountTest from '../../../tests/shared/mountTest';
+import rtlTest from '../../../tests/shared/rtlTest';
+import { render } from '../../../tests/utils';
+
+describe('App', () => {
+  mountTest(App);
+  rtlTest(App);
+
+  it('single', () => {
+    // Sub page
+    const MyPage = () => {
+      const { message } = App.useApp();
+      React.useEffect(() => {
+        message.success('Good!');
+      }, [message]);
+
+      return <div>Hello World</div>;
+    };
+
+    // Entry component
+    const MyApp = () => (
+      <App>
+        <MyPage />
+      </App>
+    );
+
+    const { getByText, container } = render(<MyApp />);
+    expect(getByText('Hello World')).toBeTruthy();
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});
diff --git a/components/app/context.ts b/components/app/context.ts
new file mode 100644
index 000000000000..823ae1ed7a96
--- /dev/null
+++ b/components/app/context.ts
@@ -0,0 +1,19 @@
+import React from 'react';
+import type { MessageInstance } from '../message/interface';
+import type { NotificationInstance } from '../notification/interface';
+import type { ModalStaticFunctions } from '../modal/confirm';
+
+type ModalType = Omit<ModalStaticFunctions, 'warn'>;
+export interface useAppProps {
+  message: MessageInstance;
+  notification: NotificationInstance;
+  modal: ModalType;
+}
+
+const AppContext = React.createContext<useAppProps>({
+  message: {} as MessageInstance,
+  notification: {} as NotificationInstance,
+  modal: {} as ModalType,
+});
+
+export default AppContext;
diff --git a/components/app/demo/message.md b/components/app/demo/message.md
new file mode 100644
index 000000000000..499640422814
--- /dev/null
+++ b/components/app/demo/message.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+获取 `message` 静态方法.
+
+## en-US
+
+Static method for `message`.
diff --git a/components/app/demo/message.tsx b/components/app/demo/message.tsx
new file mode 100644
index 000000000000..71ecffd5b978
--- /dev/null
+++ b/components/app/demo/message.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { App, Button } from 'antd';
+
+// Sub page
+const MyPage = () => {
+  const { message } = App.useApp();
+
+  const showMessage = () => {
+    message.success('Success!');
+  };
+
+  return (
+    <Button type="primary" onClick={showMessage}>
+      Open message
+    </Button>
+  );
+};
+
+// Entry component
+export default () => (
+  <App>
+    <MyPage />
+  </App>
+);
diff --git a/components/app/demo/modal.md b/components/app/demo/modal.md
new file mode 100644
index 000000000000..f07f87c7c8da
--- /dev/null
+++ b/components/app/demo/modal.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+获取 `modal` 静态方法.
+
+## en-US
+
+Static method for `modal`.
diff --git a/components/app/demo/modal.tsx b/components/app/demo/modal.tsx
new file mode 100644
index 000000000000..3fe95c848d39
--- /dev/null
+++ b/components/app/demo/modal.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { App, Button } from 'antd';
+
+// Sub page
+const MyPage = () => {
+  const { modal } = App.useApp();
+
+  const showModal = () => {
+    modal.warning({
+      title: 'This is a warning message',
+      content: 'some messages...some messages...',
+    });
+  };
+
+  return (
+    <Button type="primary" onClick={showModal}>
+      Open modal
+    </Button>
+  );
+};
+
+// Entry component
+export default () => (
+  <App>
+    <MyPage />
+  </App>
+);
diff --git a/components/app/demo/notification.md b/components/app/demo/notification.md
new file mode 100644
index 000000000000..28fa841aaba4
--- /dev/null
+++ b/components/app/demo/notification.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+获取 `notification` 静态方法.
+
+## en-US
+
+Static method for `notification`.
diff --git a/components/app/demo/notification.tsx b/components/app/demo/notification.tsx
new file mode 100644
index 000000000000..fe8613a7f4b6
--- /dev/null
+++ b/components/app/demo/notification.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { App, Button } from 'antd';
+
+// Sub page
+const MyPage = () => {
+  const { notification } = App.useApp();
+
+  const showNotification = () => {
+    notification.info({
+      message: `Notification topLeft`,
+      description: 'Hello, Ant Design!!',
+      placement: 'topLeft',
+    });
+  };
+
+  return (
+    <Button type="primary" onClick={showNotification}>
+      Open notification
+    </Button>
+  );
+};
+
+// Entry component
+export default () => (
+  <App>
+    <MyPage />
+  </App>
+);
diff --git a/components/app/index.en-US.md b/components/app/index.en-US.md
new file mode 100644
index 000000000000..0c9fbc26946e
--- /dev/null
+++ b/components/app/index.en-US.md
@@ -0,0 +1,43 @@
+---
+category: Components
+group: Other
+title: App
+cover: https://gw.alipayobjects.com/zos/bmw-prod/cc3fcbfa-bf5b-4c8c-8a3d-c3f8388c75e8.svg
+demo:
+  cols: 2
+---
+
+New App Component which provide global style & static function replacement.
+
+## When To Use
+
+Static function in React 18 concurrent mode will not well support. In v5, we recommend to use hooks for the static replacement. But it will make user manual work on define this.
+
+## Examples
+
+<!-- prettier-ignore -->
+<code src="./demo/message.tsx">message</code>
+<code src="./demo/notification.tsx">notification</code>
+<code src="./demo/modal.tsx">modal</code>
+
+## How to use
+
+```javascript
+import React from 'react';
+import { App } from 'antd';
+const MyPage = () => {
+  const { message, notification, modal } = App.useApp();
+  message.success('Good!');
+  notification.info({ message: 'Good' });
+  modal.warning({ title: 'Good' });
+  // ....
+  // other message,notification,modal static function
+  return <div>Hello word</div>;
+};
+
+const MyApp = () => (
+  <App>
+    <MyPage />
+  </App>
+);
+```
diff --git a/components/app/index.tsx b/components/app/index.tsx
new file mode 100644
index 000000000000..0e8add0cd98a
--- /dev/null
+++ b/components/app/index.tsx
@@ -0,0 +1,60 @@
+import React, { useContext } from 'react';
+import type { ReactNode } from 'react';
+import classNames from 'classnames';
+import type { ConfigConsumerProps } from '../config-provider';
+import { ConfigContext } from '../config-provider';
+import useStyle from './style';
+import useMessage from '../message/useMessage';
+import useNotification from '../notification/useNotification';
+import useModal from '../modal/useModal';
+import AppContext from './context';
+import type { useAppProps } from './context';
+
+export type AppProps = {
+  className?: string;
+  prefixCls?: string;
+  children?: ReactNode;
+};
+
+const useApp: () => useAppProps = () => React.useContext(AppContext);
+
+const App: React.ForwardRefRenderFunction<HTMLDivElement, AppProps> & {
+  useApp: () => useAppProps;
+} = (props) => {
+  const { prefixCls: customizePrefixCls, children, className } = props;
+  const { getPrefixCls } = useContext<ConfigConsumerProps>(ConfigContext);
+  const prefixCls = getPrefixCls('app', customizePrefixCls);
+  const [wrapSSR, hashId] = useStyle(prefixCls);
+  const customClassName = classNames(hashId, prefixCls, className);
+
+  const [messageApi, messageContextHolder] = useMessage();
+  const [notificationApi, notificationContextHolder] = useNotification();
+  const [ModalApi, ModalContextHolder] = useModal();
+
+  const memoizedContextValue = React.useMemo(
+    () => ({
+      message: messageApi,
+      notification: notificationApi,
+      modal: ModalApi,
+    }),
+    [messageApi, notificationApi, ModalApi],
+  );
+
+  return wrapSSR(
+    <AppContext.Provider value={memoizedContextValue}>
+      <div className={customClassName}>
+        {ModalContextHolder}
+        {messageContextHolder}
+        {notificationContextHolder}
+        {children}
+      </div>
+    </AppContext.Provider>,
+  );
+};
+
+if (process.env.NODE_ENV !== 'production') {
+  App.displayName = 'App';
+}
+
+App.useApp = useApp;
+export default App;
diff --git a/components/app/index.zh-CN.md b/components/app/index.zh-CN.md
new file mode 100644
index 000000000000..2ac40509bf9d
--- /dev/null
+++ b/components/app/index.zh-CN.md
@@ -0,0 +1,45 @@
+---
+category: Components
+subtitle: 包裹组件
+group: 其他
+title: App
+cover: https://gw.alipayobjects.com/zos/bmw-prod/cc3fcbfa-bf5b-4c8c-8a3d-c3f8388c75e8.svg
+demo:
+  cols: 2
+---
+
+新的包裹组件，提供重置样式和提供消费上下文的默认环境。
+
+## 何时使用
+
+- 提供可消费 React context 的 `message.xxx`、`Modal.xxx`、`notification.xxx` 的静态方法，可以简化 useMessage 等方法需要手动植入 `contextHolder` 的问题。
+- 提供基于 `.ant-app` 的默认重置样式，解决原生元素没有 antd 规范样式的问题。
+
+## 代码演示
+
+<!-- prettier-ignore -->
+<code src="./demo/message.tsx">message</code>
+<code src="./demo/notification.tsx">notification</code>
+<code src="./demo/modal.tsx">modal</code>
+
+## How to use
+
+```javascript
+import React from 'react';
+import { App } from 'antd';
+const MyPage = () => {
+  const { message, notification, modal } = App.useApp();
+  message.success('Good!');
+  notification.info({ message: 'Good' });
+  modal.warning({ title: 'Good' });
+  // ....
+  // other message,notification,modal static function
+  return <div>Hello word</div>;
+};
+
+const MyApp = () => (
+  <App>
+    <MyPage />
+  </App>
+);
+```
diff --git a/components/app/style/index.tsx b/components/app/style/index.tsx
new file mode 100644
index 000000000000..700aa8098b80
--- /dev/null
+++ b/components/app/style/index.tsx
@@ -0,0 +1,22 @@
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook } from '../../theme/internal';
+
+export type ComponentToken = {};
+
+interface AppToken extends FullToken<'App'> {}
+
+// =============================== Base ===============================
+const genBaseStyle: GenerateStyle<AppToken> = (token) => {
+  const { componentCls, colorText, fontSize, lineHeight, fontFamily } = token;
+  return {
+    [componentCls]: {
+      color: colorText,
+      fontSize,
+      lineHeight,
+      fontFamily,
+    },
+  };
+};
+
+// ============================== Export ==============================
+export default genComponentStyleHook('App', (token) => [genBaseStyle(token)]);
diff --git a/components/index.tsx b/components/index.tsx
index a9848329c2e1..806fdee89a83 100644
--- a/components/index.tsx
+++ b/components/index.tsx
@@ -135,6 +135,7 @@ export { default as Tooltip } from './tooltip';
 export type { TooltipProps } from './tooltip';
 export { default as Tour } from './tour';
 export type { TourProps, TourStepProps } from './tour/interface';
+export { default as App } from './app';
 export { default as Transfer } from './transfer';
 export type { TransferProps } from './transfer';
 export { default as Tree } from './tree';
diff --git a/components/style/index.tsx b/components/style/index.tsx
index 743ac86d504e..bcac9ee92a15 100644
--- a/components/style/index.tsx
+++ b/components/style/index.tsx
@@ -103,15 +103,11 @@ export const genLinkStyle = (token: DerivativeToken): CSSObject => ({
   },
 });
 
-export const genCommonStyle = (token: DerivativeToken, componentPrefixCls: string): CSSObject => {
-  const { fontFamily, fontSize } = token;
-
+export const genCommonStyle = (componentPrefixCls: string): CSSObject => {
   const rootPrefixSelector = `[class^="${componentPrefixCls}"], [class*=" ${componentPrefixCls}"]`;
 
   return {
     [rootPrefixSelector]: {
-      fontFamily,
-      fontSize,
       boxSizing: 'border-box',
 
       '&::before, &::after': {
diff --git a/components/theme/interface/components.ts b/components/theme/interface/components.ts
index 5ac94683989e..02678f801ef2 100644
--- a/components/theme/interface/components.ts
+++ b/components/theme/interface/components.ts
@@ -47,6 +47,7 @@ import type { ComponentToken as TypographyComponentToken } from '../../typograph
 import type { ComponentToken as UploadComponentToken } from '../../upload/style';
 import type { ComponentToken as TourComponentToken } from '../../tour/style';
 import type { ComponentToken as QRCodeComponentToken } from '../../qrcode/style';
+import type { ComponentToken as AppComponentToken } from '../../app/style';
 
 export interface ComponentTokenMap {
   Affix?: {};
@@ -110,4 +111,5 @@ export interface ComponentTokenMap {
   Progress?: ProgressComponentToken;
   Tour?: TourComponentToken;
   QRCode?: QRCodeComponentToken;
+  App?: AppComponentToken;
 }
diff --git a/components/theme/util/genComponentStyleHook.ts b/components/theme/util/genComponentStyleHook.ts
index db2bd218bbd9..7b5d172fbc47 100644
--- a/components/theme/util/genComponentStyleHook.ts
+++ b/components/theme/util/genComponentStyleHook.ts
@@ -87,7 +87,7 @@ export default function genComponentStyleHook<ComponentName extends OverrideComp
             overrideComponentToken: token[component],
           });
           flush(component, mergedComponentToken);
-          return [genCommonStyle(token, prefixCls), styleInterpolation];
+          return [genCommonStyle(prefixCls), styleInterpolation];
         },
       ),
       hashId,
diff --git a/tests/__snapshots__/index.test.ts.snap b/tests/__snapshots__/index.test.ts.snap
index 6d5e6564cf6e..abcb505f0bf0 100644
--- a/tests/__snapshots__/index.test.ts.snap
+++ b/tests/__snapshots__/index.test.ts.snap
@@ -5,6 +5,7 @@ exports[`antd dist files exports modules correctly 1`] = `
   "Affix",
   "Alert",
   "Anchor",
+  "App",
   "AutoComplete",
   "Avatar",
   "BackTop",
diff --git a/tests/shared/imageTest.tsx b/tests/shared/imageTest.tsx
index 777a3f6044d0..65a26b519b5b 100644
--- a/tests/shared/imageTest.tsx
+++ b/tests/shared/imageTest.tsx
@@ -7,6 +7,7 @@ import glob from 'glob';
 import { configureToMatchImageSnapshot } from 'jest-image-snapshot';
 import MockDate from 'mockdate';
 import ReactDOMServer from 'react-dom/server';
+import { App } from '../../components';
 
 const toMatchImageSnapshot = configureToMatchImageSnapshot({
   customSnapshotsDir: `${process.cwd()}/imageSnapshots`,
@@ -35,7 +36,9 @@ export default function imageTest(component: React.ReactElement) {
 
     const cache = createCache();
     const html = ReactDOMServer.renderToString(
-      <StyleProvider cache={cache}>{component}</StyleProvider>,
+      <App>
+        <StyleProvider cache={cache}>{component}</StyleProvider>,
+      </App>,
     );
     const styleStr = extractStyle(cache);
 

From a59058f0b2c21bb217a0a8c382a40387d7190442 Mon Sep 17 00:00:00 2001
From: lijianan <574980606@qq.com>
Date: Tue, 6 Dec 2022 18:18:38 +0800
Subject: [PATCH 22/41] type: optimization (#39305)

---
 components/anchor/Anchor.tsx     | 2 +-
 components/anchor/AnchorLink.tsx | 2 +-
 components/anchor/index.en-US.md | 2 +-
 components/anchor/index.zh-CN.md | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/anchor/Anchor.tsx b/components/anchor/Anchor.tsx
index 9c377a332414..1122dfcb78a4 100644
--- a/components/anchor/Anchor.tsx
+++ b/components/anchor/Anchor.tsx
@@ -85,7 +85,7 @@ export interface AntAnchor {
   activeLink: string | null;
   scrollTo: (link: string) => void;
   onClick?: (
-    e: React.MouseEvent<HTMLElement>,
+    e: React.MouseEvent<HTMLAnchorElement, MouseEvent>,
     link: { title: React.ReactNode; href: string },
   ) => void;
 }
diff --git a/components/anchor/AnchorLink.tsx b/components/anchor/AnchorLink.tsx
index 6d2c87fa2c08..5afba519b0d4 100644
--- a/components/anchor/AnchorLink.tsx
+++ b/components/anchor/AnchorLink.tsx
@@ -28,7 +28,7 @@ const AnchorLink: React.FC<AnchorLinkProps> = (props) => {
     };
   }, [href, registerLink, unregisterLink]);
 
-  const handleClick = (e: React.MouseEvent<HTMLElement>) => {
+  const handleClick = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
     onClick?.(e, { title, href });
     scrollTo?.(href);
   };
diff --git a/components/anchor/index.en-US.md b/components/anchor/index.en-US.md
index 9ed82572aeda..ef91c2b1ad60 100644
--- a/components/anchor/index.en-US.md
+++ b/components/anchor/index.en-US.md
@@ -43,7 +43,7 @@ For displaying anchor hyperlinks on page and jumping between them.
 | showInkInFixed | Whether show ink-balls when `affix={false}` | boolean | false |  |
 | targetOffset | Anchor scroll offset, default as `offsetTop`, [example](#components-anchor-demo-targetOffset) | number | - |  |
 | onChange | Listening for anchor link change | (currentActiveLink: string) => void |  |  |
-| onClick | Set the handler to handle `click` event | function(e: Event, link: Object) | - |  |
+| onClick | Set the handler to handle `click` event | (e: MouseEvent, link: object) => void | - |  |
 
 ### Link Props
 
diff --git a/components/anchor/index.zh-CN.md b/components/anchor/index.zh-CN.md
index 161c4e487bef..bbad12aa92f7 100644
--- a/components/anchor/index.zh-CN.md
+++ b/components/anchor/index.zh-CN.md
@@ -44,7 +44,7 @@ group:
 | showInkInFixed | `affix={false}` 时是否显示小圆点 | boolean | false |  |
 | targetOffset | 锚点滚动偏移量，默认与 offsetTop 相同，[例子](#components-anchor-demo-targetOffset) | number | - |  |
 | onChange | 监听锚点链接改变 | (currentActiveLink: string) => void | - |  |
-| onClick | `click` 事件的 handler | function(e: Event, link: Object) | - |  |
+| onClick | `click` 事件的 handler | (e: MouseEvent, link: object) => void | - |  |
 
 ### Link Props
 

From 8cb46243fd4b32698d680c92a47d532b564b4f6a Mon Sep 17 00:00:00 2001
From: huangkairan <56213366+huangkairan@users.noreply.github.com>
Date: Tue, 6 Dec 2022 20:11:22 +0800
Subject: [PATCH 23/41] docs: remove v3 to v4 migration docs (#39290)

* docs: remove v3 to v4 migration docs

* update

Co-authored-by: huangkairan <wb-hkr877030@alibaba-inc.com>
---
 components/auto-complete/index.en-US.md       |  26 --
 components/auto-complete/index.zh-CN.md       |  26 --
 components/breadcrumb/index.en-US.md          |  30 --
 components/breadcrumb/index.zh-CN.md          |  30 --
 .../__snapshots__/demo-extend.test.ts.snap    | 318 -----------------
 .../__tests__/__snapshots__/demo.test.ts.snap |  40 ---
 components/dropdown/demo/deprecated.md        |   7 -
 components/dropdown/demo/deprecated.tsx       |  55 ---
 components/dropdown/index.en-US.md            |  31 --
 components/dropdown/index.zh-CN.md            |  31 --
 components/form/index.en-US.md                |   4 -
 components/form/index.zh-CN.md                |   4 -
 components/form/v3.en-US.md                   | 326 -----------------
 components/form/v3.zh-CN.md                   | 328 ------------------
 .../__snapshots__/demo-extend.test.ts.snap    | 269 --------------
 .../__tests__/__snapshots__/demo.test.ts.snap | 125 -------
 components/menu/demo/deprecated.md            |   7 -
 components/menu/demo/deprecated.tsx           |  29 --
 components/menu/index.en-US.md                |  49 ---
 components/menu/index.zh-CN.md                |  49 ---
 .../__snapshots__/demo-extend.test.ts.snap    | 133 -------
 .../__tests__/__snapshots__/demo.test.ts.snap | 133 -------
 components/steps/demo/deprecated.md           |   7 -
 components/steps/demo/deprecated.tsx          |  14 -
 components/steps/index.en-US.md               |  18 -
 components/steps/index.zh-CN.md               |  18 -
 components/table/index.en-US.md               |   6 -
 components/table/index.zh-CN.md               |   6 -
 .../__snapshots__/demo-extend.test.ts.snap    | 130 -------
 .../__tests__/__snapshots__/demo.test.ts.snap | 111 ------
 components/tabs/demo/deprecated.md            |   7 -
 components/tabs/demo/deprecated.tsx           |  18 -
 components/tabs/index.en-US.md                |  24 --
 components/tabs/index.zh-CN.md                |  24 --
 34 files changed, 2433 deletions(-)
 delete mode 100644 components/dropdown/demo/deprecated.md
 delete mode 100644 components/dropdown/demo/deprecated.tsx
 delete mode 100644 components/form/v3.en-US.md
 delete mode 100644 components/form/v3.zh-CN.md
 delete mode 100755 components/menu/demo/deprecated.md
 delete mode 100644 components/menu/demo/deprecated.tsx
 delete mode 100644 components/steps/demo/deprecated.md
 delete mode 100644 components/steps/demo/deprecated.tsx
 delete mode 100644 components/tabs/demo/deprecated.md
 delete mode 100644 components/tabs/demo/deprecated.tsx

diff --git a/components/auto-complete/index.en-US.md b/components/auto-complete/index.en-US.md
index 11ae2e245fc9..9d47a6e8e2e7 100644
--- a/components/auto-complete/index.en-US.md
+++ b/components/auto-complete/index.en-US.md
@@ -78,29 +78,3 @@ The differences with Select are:
 Please use `onChange` to manage control state. `onSearch` is used for searching input which is not the same as `onChange`. Besides, clicking on the option will not trigger the `onSearch` event.
 
 Related issue: [#18230](https://github.com/ant-design/ant-design/issues/18230) [#17916](https://github.com/ant-design/ant-design/issues/17916)
-
-### Part of the api in v3 are not available in v4?
-
-AutoComplete is an Input component that supports auto complete tips. As such, it should not support props like `labelInValue` that affect value display. In v3, the AutoComplete implementation can not handle the case where the `value` and `label` are identical. v4 not longer support `label` as the value input.
-
-Besides, to unify the API, `dataSource` is replaced with `options`. You can migrate with the following change:
-
-#### v3
-
-```tsx
-dataSource = ['light', 'bamboo'];
-// or
-dataSource = [
-  { value: 'light', text: 'Light' },
-  { value: 'bamboo', text: 'Bamboo' },
-];
-```
-
-#### v4
-
-```tsx
-options = [
-  { value: 'light', label: 'Light' },
-  { value: 'bamboo', label: 'Bamboo' },
-];
-```
diff --git a/components/auto-complete/index.zh-CN.md b/components/auto-complete/index.zh-CN.md
index 2c1ffee0462d..01a078e5bcf4 100644
--- a/components/auto-complete/index.zh-CN.md
+++ b/components/auto-complete/index.zh-CN.md
@@ -80,29 +80,3 @@ demo:
 请使用 `onChange` 进行受控管理。`onSearch` 触发于搜索输入，与 `onChange` 时机不同。此外，点选选项时也不会触发 `onSearch` 事件。
 
 相关 issue：[#18230](https://github.com/ant-design/ant-design/issues/18230) [#17916](https://github.com/ant-design/ant-design/issues/17916)
-
-### v3 的部分属性为何在 v4 中没有了？
-
-AutoComplete 组件是一个支持自动提示的 Input 组件，因而其不具有 `labelInValue` 等影响 value 展示的属性。在 v3 版本，AutoComplete 实现存在输入值如果遇到 `value` 与 `label` 相同时无法映射的问题。 v4 中不再支持 `label` 为值的输入形态。
-
-此外为了统一 API，`dataSource` 改为 `options` 你可以如下转换：
-
-#### v3
-
-```tsx
-dataSource = ['light', 'bamboo'];
-// or
-dataSource = [
-  { value: 'light', text: 'Light' },
-  { value: 'bamboo', text: 'Bamboo' },
-];
-```
-
-#### v4
-
-```tsx
-options = [
-  { value: 'light', label: 'Light' },
-  { value: 'bamboo', label: 'Bamboo' },
-];
-```
diff --git a/components/breadcrumb/index.en-US.md b/components/breadcrumb/index.en-US.md
index 9b6afe9c2e81..614cc6d1daba 100644
--- a/components/breadcrumb/index.en-US.md
+++ b/components/breadcrumb/index.en-US.md
@@ -15,36 +15,6 @@ A breadcrumb displays the current location within a hierarchy. It allows going b
 - When you need to inform the user of where they are.
 - When the user may need to navigate back to a higher level.
 
-### Usage upgrade after 4.24.0
-
-<Alert message="After version 4.24.0, we provide a simpler usage &lt;Breadcrumb.Item menu={{ items: [...] }}&gt; with better performance and potential of writing simpler code style in your applications. Meanwhile, we deprecated the old usage in browser console, we will remove it in antd 5.0."></Alert>
-
-```jsx
-// works when >=4.24.0, recommended ✅
-const items = [
-  { label: 'item 1', key: 'item-1' }, // remember to pass the key prop
-  { label: 'item 2', key: 'item-2' },
-];
-return (
-  <Breadcrumb>
-    <Breadcrumb.Item menu={{ items }}>Ant Design</Breadcrumb.Item>
-  </Breadcrumb>
-);
-
-// works when <4.24.0, deprecated when >=4.24.0 🙅🏻‍♀️
-const menu = (
-  <Menu>
-    <Menu.Item>item 1</Menu.Item>
-    <Menu.Item>item 2</Menu.Item>
-  </Menu>
-);
-return (
-  <Breadcrumb>
-    <Breadcrumb.Item overlay={menu}>Ant Design</Breadcrumb.Item>
-  </Breadcrumb>
-);
-```
-
 ## Examples
 
 <!-- prettier-ignore -->
diff --git a/components/breadcrumb/index.zh-CN.md b/components/breadcrumb/index.zh-CN.md
index 295b6c7e64cb..420b0e697f9a 100644
--- a/components/breadcrumb/index.zh-CN.md
+++ b/components/breadcrumb/index.zh-CN.md
@@ -16,36 +16,6 @@ demo:
 - 当需要告知用户『你在哪里』时；
 - 当需要向上导航的功能时。
 
-### 4.24.0 用法升级
-
-<Alert message="在 4.24.0 版本后，我们提供了 &lt;Breadcrumb.Item menu={{ items: [...] }}&gt; 的简写方式，有更好的性能和更方便的数据组织方式，开发者不再需要自行拼接 JSX。同时我们废弃了原先的写法，你还是可以在 4.x 继续使用，但会在控制台看到警告，并会在 5.0 后移除。"></Alert>
-
-```jsx
-// >=4.24.0 可用，推荐的写法 ✅
-const items = [
-  { label: '菜单项一', key: 'item-1' }, // 菜单项务必填写 key
-  { label: '菜单项二', key: 'item-2' },
-];
-return (
-  <Breadcrumb>
-    <Breadcrumb.Item menu={{ items }}>Ant Design</Breadcrumb.Item>
-  </Breadcrumb>
-);
-
-// <4.24.0 可用，>=4.24.0 时不推荐 🙅🏻‍♀️
-const menu = (
-  <Menu>
-    <Menu.Item>菜单项一</Menu.Item>
-    <Menu.Item>菜单项二</Menu.Item>
-  </Menu>
-);
-return (
-  <Breadcrumb>
-    <Breadcrumb.Item overlay={menu}>Ant Design</Breadcrumb.Item>
-  </Breadcrumb>
-);
-```
-
 ## 代码演示
 
 <!-- prettier-ignore -->
diff --git a/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap
index d96817e743e1..76a267831456 100644
--- a/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -3351,324 +3351,6 @@ Array [
 ]
 `;
 
-exports[`renders ./components/dropdown/demo/deprecated.tsx extend context correctly 1`] = `
-Array [
-  <a
-    class="ant-dropdown-trigger"
-  >
-    <div
-      class="ant-space ant-space-horizontal ant-space-align-center"
-    >
-      <div
-        class="ant-space-item"
-        style="margin-right:8px"
-      >
-        Hover me
-      </div>
-      <div
-        class="ant-space-item"
-      >
-        <span
-          aria-label="down"
-          class="anticon anticon-down"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="down"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-            />
-          </svg>
-        </span>
-      </div>
-    </div>
-  </a>,
-  <div>
-    <div
-      class="ant-dropdown"
-      style="opacity:0"
-    >
-      <ul
-        class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
-        data-menu-list="true"
-        role="menu"
-        tabindex="0"
-      >
-        <li
-          class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
-          role="menuitem"
-          tabindex="-1"
-        >
-          <span
-            class="ant-dropdown-menu-title-content"
-          >
-            <a
-              href="https://www.antgroup.com"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              1st menu item
-            </a>
-          </span>
-        </li>
-        <div>
-          <div
-            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-            style="opacity:0"
-          >
-            <div
-              class="ant-tooltip-content"
-            >
-              <div
-                class="ant-tooltip-arrow"
-              >
-                <span
-                  class="ant-tooltip-arrow-content"
-                />
-              </div>
-              <div
-                class="ant-tooltip-inner"
-                role="tooltip"
-              />
-            </div>
-          </div>
-        </div>
-        <li
-          aria-disabled="true"
-          class="ant-dropdown-menu-item ant-dropdown-menu-item-disabled"
-          role="menuitem"
-        >
-          <span
-            aria-label="smile"
-            class="anticon anticon-smile ant-dropdown-menu-item-icon"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="smile"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
-              />
-            </svg>
-          </span>
-          <span
-            class="ant-dropdown-menu-title-content"
-          >
-            <a
-              href="https://www.aliyun.com"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              2nd menu item (disabled)
-            </a>
-          </span>
-        </li>
-        <div>
-          <div
-            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-            style="opacity:0"
-          >
-            <div
-              class="ant-tooltip-content"
-            >
-              <div
-                class="ant-tooltip-arrow"
-              >
-                <span
-                  class="ant-tooltip-arrow-content"
-                />
-              </div>
-              <div
-                class="ant-tooltip-inner"
-                role="tooltip"
-              />
-            </div>
-          </div>
-        </div>
-        <li
-          aria-disabled="true"
-          class="ant-dropdown-menu-item ant-dropdown-menu-item-disabled ant-dropdown-menu-item-only-child"
-          role="menuitem"
-        >
-          <span
-            class="ant-dropdown-menu-title-content"
-          >
-            <a
-              href="https://www.luohanacademy.com"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              3rd menu item (disabled)
-            </a>
-          </span>
-        </li>
-        <div>
-          <div
-            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-            style="opacity:0"
-          >
-            <div
-              class="ant-tooltip-content"
-            >
-              <div
-                class="ant-tooltip-arrow"
-              >
-                <span
-                  class="ant-tooltip-arrow-content"
-                />
-              </div>
-              <div
-                class="ant-tooltip-inner"
-                role="tooltip"
-              />
-            </div>
-          </div>
-        </div>
-        <li
-          class="ant-dropdown-menu-item ant-dropdown-menu-item-danger ant-dropdown-menu-item-only-child"
-          role="menuitem"
-          tabindex="-1"
-        >
-          <span
-            class="ant-dropdown-menu-title-content"
-          >
-            a danger item
-          </span>
-        </li>
-        <div>
-          <div
-            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-            style="opacity:0"
-          >
-            <div
-              class="ant-tooltip-content"
-            >
-              <div
-                class="ant-tooltip-arrow"
-              >
-                <span
-                  class="ant-tooltip-arrow-content"
-                />
-              </div>
-              <div
-                class="ant-tooltip-inner"
-                role="tooltip"
-              />
-            </div>
-          </div>
-        </div>
-      </ul>
-      <div
-        aria-hidden="true"
-        style="display:none"
-      >
-        <div>
-          <div
-            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-            style="opacity:0"
-          >
-            <div
-              class="ant-tooltip-content"
-            >
-              <div
-                class="ant-tooltip-arrow"
-              >
-                <span
-                  class="ant-tooltip-arrow-content"
-                />
-              </div>
-              <div
-                class="ant-tooltip-inner"
-                role="tooltip"
-              />
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-            style="opacity:0"
-          >
-            <div
-              class="ant-tooltip-content"
-            >
-              <div
-                class="ant-tooltip-arrow"
-              >
-                <span
-                  class="ant-tooltip-arrow-content"
-                />
-              </div>
-              <div
-                class="ant-tooltip-inner"
-                role="tooltip"
-              />
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-            style="opacity:0"
-          >
-            <div
-              class="ant-tooltip-content"
-            >
-              <div
-                class="ant-tooltip-arrow"
-              >
-                <span
-                  class="ant-tooltip-arrow-content"
-                />
-              </div>
-              <div
-                class="ant-tooltip-inner"
-                role="tooltip"
-              />
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-            style="opacity:0"
-          >
-            <div
-              class="ant-tooltip-content"
-            >
-              <div
-                class="ant-tooltip-arrow"
-              >
-                <span
-                  class="ant-tooltip-arrow-content"
-                />
-              </div>
-              <div
-                class="ant-tooltip-inner"
-                role="tooltip"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>,
-]
-`;
-
 exports[`renders ./components/dropdown/demo/dropdown-button.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
diff --git a/components/dropdown/__tests__/__snapshots__/demo.test.ts.snap b/components/dropdown/__tests__/__snapshots__/demo.test.ts.snap
index 37b7eb043d62..dbc897222018 100644
--- a/components/dropdown/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/dropdown/__tests__/__snapshots__/demo.test.ts.snap
@@ -197,46 +197,6 @@ exports[`renders ./components/dropdown/demo/custom-dropdown.tsx correctly 1`] =
 </a>
 `;
 
-exports[`renders ./components/dropdown/demo/deprecated.tsx correctly 1`] = `
-<a
-  class="ant-dropdown-trigger"
->
-  <div
-    class="ant-space ant-space-horizontal ant-space-align-center"
-  >
-    <div
-      class="ant-space-item"
-      style="margin-right:8px"
-    >
-      Hover me
-    </div>
-    <div
-      class="ant-space-item"
-    >
-      <span
-        aria-label="down"
-        class="anticon anticon-down"
-        role="img"
-      >
-        <svg
-          aria-hidden="true"
-          data-icon="down"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-          />
-        </svg>
-      </span>
-    </div>
-  </div>
-</a>
-`;
-
 exports[`renders ./components/dropdown/demo/dropdown-button.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
diff --git a/components/dropdown/demo/deprecated.md b/components/dropdown/demo/deprecated.md
deleted file mode 100644
index 988ed60cb2ce..000000000000
--- a/components/dropdown/demo/deprecated.md
+++ /dev/null
@@ -1,7 +0,0 @@
-## zh-CN
-
-最简单的下拉菜单。
-
-## en-US
-
-The most basic dropdown menu.
diff --git a/components/dropdown/demo/deprecated.tsx b/components/dropdown/demo/deprecated.tsx
deleted file mode 100644
index 330a946f871c..000000000000
--- a/components/dropdown/demo/deprecated.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from 'react';
-import { DownOutlined, SmileOutlined } from '@ant-design/icons';
-import { Dropdown, Menu, Space } from 'antd';
-
-const menu = (
-  <Menu
-    items={[
-      {
-        key: '1',
-        label: (
-          <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
-            1st menu item
-          </a>
-        ),
-      },
-      {
-        key: '2',
-        label: (
-          <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
-            2nd menu item (disabled)
-          </a>
-        ),
-        icon: <SmileOutlined />,
-        disabled: true,
-      },
-      {
-        key: '3',
-        label: (
-          <a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
-            3rd menu item (disabled)
-          </a>
-        ),
-        disabled: true,
-      },
-      {
-        key: '4',
-        danger: true,
-        label: 'a danger item',
-      },
-    ]}
-  />
-);
-
-const App: React.FC = () => (
-  <Dropdown overlay={menu}>
-    <a onClick={(e) => e.preventDefault()}>
-      <Space>
-        Hover me
-        <DownOutlined />
-      </Space>
-    </a>
-  </Dropdown>
-);
-
-export default App;
diff --git a/components/dropdown/index.en-US.md b/components/dropdown/index.en-US.md
index f7ca2273eae9..4cebe1e212f8 100644
--- a/components/dropdown/index.en-US.md
+++ b/components/dropdown/index.en-US.md
@@ -13,40 +13,9 @@ A dropdown list.
 
 When there are more than a few options to choose from, you can wrap them in a `Dropdown`. By hovering or clicking on the trigger, a dropdown menu will appear, which allows you to choose an option and execute the relevant action.
 
-### Usage upgrade after 4.24.0
-
-<Alert message="After version 4.24.0, we provide a simpler usage &lt;Dropdown menu={{ items: [...] }} /&gt; with better performance and potential of writing simpler code style in your applications. Meanwhile, we deprecated the old usage in browser console, we will remove it in antd 5.0."></Alert>
-
-```jsx
-// works when >=4.24.0, recommended ✅
-const items = [
-  { label: 'item 1', key: 'item-1' }, // remember to pass the key prop
-  { label: 'item 2', key: 'item-2' },
-];
-return (
-  <Dropdown menu={{ items }}>
-    <a>Hover me</a>
-  </Dropdown>
-);
-
-// works when <4.24.0, deprecated when >=4.24.0 🙅🏻‍♀️
-const menu = (
-  <Menu>
-    <Menu.Item>item 1</Menu.Item>
-    <Menu.Item>item 2</Menu.Item>
-  </Menu>
-);
-return (
-  <Dropdown overlay={menu}>
-    <a>Hover me</a>
-  </Dropdown>
-);
-```
-
 ## Examples
 
 <!-- prettier-ignore -->
-<code src="./demo/deprecated.tsx">Basic usage (deprecated syntactic sugar)</code>
 <code src="./demo/basic.tsx">Basic</code>
 <code src="./demo/placement.tsx">Placement</code>
 <code src="./demo/arrow.tsx">Arrow</code>
diff --git a/components/dropdown/index.zh-CN.md b/components/dropdown/index.zh-CN.md
index dacfd68b6494..c3802662cd1c 100644
--- a/components/dropdown/index.zh-CN.md
+++ b/components/dropdown/index.zh-CN.md
@@ -17,40 +17,9 @@ demo:
 - 用于收罗一组命令操作。
 - Select 用于选择，而 Dropdown 是命令集合。
 
-### 4.24.0 用法升级
-
-<Alert message="在 4.24.0 版本后，我们提供了 &lt;Dropdown menu={{ items: [...] }} /&gt; 的简写方式，有更好的性能和更方便的数据组织方式，开发者不再需要自行拼接 JSX。同时我们废弃了原先的写法，你还是可以在 4.x 继续使用，但会在控制台看到警告，并会在 5.0 后移除。"></Alert>
-
-```jsx
-// >=4.24.0 可用，推荐的写法 ✅
-const items = [
-  { label: '菜单项一', key: 'item-1' }, // 菜单项务必填写 key
-  { label: '菜单项二', key: 'item-2' },
-];
-return (
-  <Dropdown menu={{ items }}>
-    <a>Hover me</a>
-  </Dropdown>
-);
-
-// <4.24.0 可用，>=4.24.0 时不推荐 🙅🏻‍♀️
-const menu = (
-  <Menu>
-    <Menu.Item>菜单项一</Menu.Item>
-    <Menu.Item>菜单项二</Menu.Item>
-  </Menu>
-);
-return (
-  <Dropdown overlay={menu}>
-    <a>Hover me</a>
-  </Dropdown>
-);
-```
-
 ## 代码演示
 
 <!-- prettier-ignore -->
-<code src="./demo/deprecated.tsx">基础用法（废弃的语法糖）</code>
 <code src="./demo/basic.tsx">基本</code>
 <code src="./demo/placement.tsx">弹出位置</code>
 <code src="./demo/arrow.tsx">箭头</code>
diff --git a/components/form/index.en-US.md b/components/form/index.en-US.md
index 04282e9357b2..fb08775bb0aa 100644
--- a/components/form/index.en-US.md
+++ b/components/form/index.en-US.md
@@ -440,10 +440,6 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
 | warningOnly | Warning only. Not block form submit | boolean | 4.17.0 |
 | whitespace | Failed if only has whitespace, only work with `type: 'string'` rule | boolean |  |
 
-## Migrate to v4
-
-If you are a user of v3, you can ref [migrate doc](/components/form/v3)。
-
 <style>
 .code-box-demo .ant-form:not(.ant-form-inline):not(.ant-form-vertical) {
   max-width: 600px;
diff --git a/components/form/index.zh-CN.md b/components/form/index.zh-CN.md
index d1f6be0e79de..7b8e91ec8a3c 100644
--- a/components/form/index.zh-CN.md
+++ b/components/form/index.zh-CN.md
@@ -439,10 +439,6 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
 | warningOnly | 仅警告，不阻塞表单提交 | boolean | 4.17.0 |
 | whitespace | 如果字段仅包含空格则校验不通过，只在 `type: 'string'` 时生效 | boolean |  |
 
-## 从 v3 升级到 v4
-
-如果你是 antd v3 的用户，你可以参考[迁移示例](/components/form/v3)。
-
 <style>
 .code-box-demo .ant-form:not(.ant-form-inline):not(.ant-form-vertical) {
   max-width: 600px;
diff --git a/components/form/v3.en-US.md b/components/form/v3.en-US.md
deleted file mode 100644
index 18f7a3cee992..000000000000
--- a/components/form/v3.en-US.md
+++ /dev/null
@@ -1,326 +0,0 @@
----
-title: Migrate Form to v4
-skip: true
----
-
-### Remove Form.create
-
-Form of v4 does not need to create context by calling `Form.create()`. Form now has it's own data scope and you don't need `getFieldDecorator` anymore. Just use Form.Item directly:
-
-```jsx
-// antd v3
-const Demo = ({ form: { getFieldDecorator } }) => (
-  <Form>
-    <Form.Item>
-      {getFieldDecorator('username', {
-        rules: [{ required: true }],
-      })(<Input />)}
-    </Form.Item>
-  </Form>
-);
-
-const WrappedDemo = Form.create()(Demo);
-```
-
-To:
-
-```jsx
-// antd v4
-const Demo = () => (
-  <Form>
-    <Form.Item name="username" rules={[{ required: true }]}>
-      <Input />
-    </Form.Item>
-  </Form>
-);
-```
-
-Since `Form.create()` is removed, methods like `onFieldsChange` have moved to `Form` and form state is controlled by a `fields` prop. ref [example](/components/form/#components-form-demo-global-state)。
-
-### Form control
-
-If you want to control form, you can use `Form.useForm()` to create Form instance for operation:
-
-```jsx
-// antd v3
-const Demo = ({ form: { setFieldsValue } }) => {
-  React.useEffect(() => {
-    setFieldsValue({
-      username: 'Bamboo',
-    });
-  }, []);
-
-  return (
-    <Form>
-      <Form.Item>
-        {getFieldDecorator('username', {
-          rules: [{ required: true }],
-        })(<Input />)}
-      </Form.Item>
-    </Form>
-  );
-};
-
-const WrappedDemo = Form.create()(Demo);
-```
-
-To:
-
-```jsx
-// antd v4
-const Demo = () => {
-  const [form] = Form.useForm();
-
-  React.useEffect(() => {
-    form.setFieldsValue({
-      username: 'Bamboo',
-    });
-  }, []);
-
-  return (
-    <Form form={form}>
-      <Form.Item name="username" rules={[{ required: true }]}>
-        <Input />
-      </Form.Item>
-    </Form>
-  );
-};
-```
-
-For class component, you can use `ref` to access instance:
-
-```jsx
-// antd v4
-class Demo extends React.Component {
-  formRef = React.createRef();
-
-  componentDidMount() {
-    this.formRef.current.setFieldsValue({
-      username: 'Bamboo',
-    });
-  }
-
-  render() {
-    return (
-      <Form ref={this.formRef}>
-        <Form.Item name="username" rules={[{ required: true }]}>
-          <Input />
-        </Form.Item>
-      </Form>
-    );
-  }
-}
-```
-
-If you don't want to use the Item style, you can use `noStyle` prop to remove it:
-
-```jsx
-// antd v3
-const Demo = ({ form: { getFieldDecorator } }) => {
-  return <Form>{getFieldDecorator('username')(<Input />)}</Form>;
-};
-
-const WrappedDemo = Form.create()(Demo);
-```
-
-To:
-
-```jsx
-// antd v4
-const Demo = () => {
-  return (
-    <Form>
-      <Form.Item name="username" noStyle>
-        <Input />
-      </Form.Item>
-    </Form>
-  );
-};
-```
-
-### Linkage with field
-
-New Form uses incremental update which only updates related field. So if there is some linkage between fields or updates with the whole form, you can use [`dependencies`](/components/form/#dependencies) or [`shouldUpdate`](/components/form/#shouldUpdate) to handle that.
-
-### replace onSubmit with onFinish
-
-You need to listen to `onSubmit` and call `validateFields` to handle validation in old Form. New Form provides `onFinish` which will only trigger when validation has passed:
-
-```jsx
-// antd v3
-const Demo = ({ form: { getFieldDecorator, validateFields } }) => {
-  const onSubmit = e => {
-    e.preventDefault();
-    validateFields((err, values) => {
-      if (!err) {
-        console.log('Received values of form: ', values);
-      }
-    });
-  };
-
-  return (
-    <Form onSubmit={onSubmit}>
-      <Form.Item>
-        {getFieldDecorator('username', {
-          rules: [{ required: true }],
-        })(<Input />)}
-      </Form.Item>
-    </Form>
-  );
-};
-
-const WrappedDemo = Form.create()(Demo);
-```
-
-To:
-
-```jsx
-// antd v4
-const Demo = () => {
-  const onFinish = values => {
-    console.log('Received values of form: ', values);
-  };
-
-  return (
-    <Form onFinish={onFinish}>
-      <Form.Item name="username" rules={[{ required: true }]}>
-        <Input />
-      </Form.Item>
-    </Form>
-  );
-};
-```
-
-## Replace validateFieldsAndScroll with scrollToField
-
-New version recommend use `onFinish` for submit after validation. Thus `validateFieldsAndScroll` is changed to more flexible method `scrollToField`:
-
-```jsx
-// antd v3
-onSubmit = () => {
-  form.validateFieldsAndScroll((error, values) => {
-    // Your logic
-  });
-};
-```
-
-To:
-
-```jsx
-// antd v4
-onFinishFailed = ({ errorFields }) => {
-  form.scrollToField(errorFields[0].name);
-};
-```
-
-### Initialization
-
-Besides, we move `initialValue` into Form to avoid field with same name both using `initialValue` to cause conflict:
-
-```jsx
-// antd v3
-const Demo = ({ form: { getFieldDecorator } }) => (
-  <Form>
-    <Form.Item>
-      {getFieldDecorator('username', {
-        rules: [{ required: true }],
-        initialValue: 'Bamboo',
-      })(<Input />)}
-    </Form.Item>
-  </Form>
-);
-
-const WrappedDemo = Form.create()(Demo);
-```
-
-To:
-
-```jsx
-// antd v4
-const Demo = () => (
-  <Form initialValues={{ username: 'Bamboo' }}>
-    <Form.Item name="username" rules={[{ required: true }]}>
-      <Input />
-    </Form.Item>
-  </Form>
-);
-```
-
-In v3, modifying the `initialValue` of un-operated field will update the field value synchronously, which is a bug. However, since it has been used as a feature for a long time, we have not fixed it. In v4, the bug has been fixed. `initialValues` only takes effect when initializing and resetting the form.
-
-### Nested field paths using arrays
-
-In the past versions we used `.` to represent nested paths (such as `user.name` to represent `{ user: { name: '' } }`). However, in some backend systems, `.` is also included in the variable name. This causes the user to need additional code to convert, so in the new version, nested paths are represented by arrays to avoid unexpected behavior (eg `['user', 'name']`).
-
-Therefore, paths returned by methods such as `getFieldsError` are always in an array form for the user to handle:
-
-```jsx
-form.getFieldsError();
-
-/*
-[
-  { name: ['user', 'name'], errors: [] },
-  { name: ['user', 'age'], errors: ['Some error message'] },
-]
-*/
-```
-
-Nested field definition has changed from:
-
-```jsx
-// antd v3
-<Form.Item label="Firstname">{getFieldDecorator('user.0.firstname', {})(<Input />)}</Form.Item>
-```
-
-To
-
-```jsx
-// antd v4
-<Form.Item name={['user', 0, 'firstname']} label="Firstname">
-  <Input />
-</Form.Item>
-```
-
-Similarly using `setFieldsValue` has changed from:
-
-```jsx
-// antd v3
-this.formRef.current.setFieldsValue({
-  'user.0.firstname': 'John',
-});
-```
-
-To
-
-```jsx
-// antd v4
-this.formRef.current.setFieldsValue({
-  user: [
-    {
-      firstname: 'John',
-    },
-  ],
-});
-```
-
-### Remove callback in validateFields
-
-`validateFields` will return a Promise, so you can handle the error with `async/await` or `then/catch`. It is no longer necessary to determine if `errors` is empty:
-
-```jsx
-// antd v3
-validateFields((err, value) => {
-  if (!err) {
-    // Do something with value
-  }
-});
-```
-
-To
-
-```jsx
-// antd v4
-validateFields().then(values => {
-  // Do something with value
-});
-```
diff --git a/components/form/v3.zh-CN.md b/components/form/v3.zh-CN.md
deleted file mode 100644
index 40a33832ed94..000000000000
--- a/components/form/v3.zh-CN.md
+++ /dev/null
@@ -1,328 +0,0 @@
----
-title: Form 从 v3 到 v4
-skip: true
----
-
-新版本 Form 对使用方式进行了简化，因而如果你是从 v3 迁移上来。你可以参考本文做迁移工作。
-
-## 去除 Form.create
-
-v4 的 Form 不再需要通过 `Form.create()` 创建上下文。Form 组件现在自带数据域，因而 `getFieldDecorator` 也不再需要，直接写入 Form.Item 即可：
-
-```jsx
-// antd v3
-const Demo = ({ form: { getFieldDecorator } }) => (
-  <Form>
-    <Form.Item>
-      {getFieldDecorator('username', {
-        rules: [{ required: true }],
-      })(<Input />)}
-    </Form.Item>
-  </Form>
-);
-
-const WrappedDemo = Form.create()(Demo);
-```
-
-改成：
-
-```jsx
-// antd v4
-const Demo = () => (
-  <Form>
-    <Form.Item name="username" rules={[{ required: true }]}>
-      <Input />
-    </Form.Item>
-  </Form>
-);
-```
-
-由于移除了 `Form.create()`，原本的 `onFieldsChange` 等方法移入 Form 中，通过 `fields` 对 Form 进行控制。参考[示例](/components/form/#components-form-demo-global-state)。
-
-## 表单控制调整
-
-Form 自带表单控制实体，如需要调用 form 方法，可以通过 `Form.useForm()` 创建 Form 实体进行操作：
-
-```jsx
-// antd v3
-const Demo = ({ form: { setFieldsValue } }) => {
-  React.useEffect(() => {
-    setFieldsValue({
-      username: 'Bamboo',
-    });
-  }, []);
-
-  return (
-    <Form>
-      <Form.Item>
-        {getFieldDecorator('username', {
-          rules: [{ required: true }],
-        })(<Input />)}
-      </Form.Item>
-    </Form>
-  );
-};
-
-const WrappedDemo = Form.create()(Demo);
-```
-
-改成：
-
-```jsx
-// antd v4
-const Demo = () => {
-  const [form] = Form.useForm();
-
-  React.useEffect(() => {
-    form.setFieldsValue({
-      username: 'Bamboo',
-    });
-  }, []);
-
-  return (
-    <Form form={form}>
-      <Form.Item name="username" rules={[{ required: true }]}>
-        <Input />
-      </Form.Item>
-    </Form>
-  );
-};
-```
-
-对于 class component，也可以通过 `ref` 获得实体：
-
-```jsx
-// antd v4
-class Demo extends React.Component {
-  formRef = React.createRef();
-
-  componentDidMount() {
-    this.formRef.current.setFieldsValue({
-      username: 'Bamboo',
-    });
-  }
-
-  render() {
-    return (
-      <Form ref={this.formRef}>
-        <Form.Item name="username" rules={[{ required: true }]}>
-          <Input />
-        </Form.Item>
-      </Form>
-    );
-  }
-}
-```
-
-由于 Form.Item 内置字段绑定，如果需要不带样式的表单绑定，可以使用 `noStyle` 属性移除额外样式：
-
-```jsx
-// antd v3
-const Demo = ({ form: { getFieldDecorator } }) => {
-  return <Form>{getFieldDecorator('username')(<Input />)}</Form>;
-};
-
-const WrappedDemo = Form.create()(Demo);
-```
-
-改成：
-
-```jsx
-// antd v4
-const Demo = () => {
-  return (
-    <Form>
-      <Form.Item name="username" noStyle>
-        <Input />
-      </Form.Item>
-    </Form>
-  );
-};
-```
-
-## 字段联动调整
-
-新版 Form 采用增量更新方式，仅会更新需要更新的字段。因而如果有字段关联更新，或者跟随整个表单更新而更新。可以使用 [`dependencies`](/components/form/#dependencies) 或 [`shouldUpdate`](/components/form/#shouldUpdate)。
-
-## onFinish 替代 onSubmit
-
-对于表单校验，过去版本需要通过监听 `onSubmit` 事件手工触发 `validateFields`。新版直接使用 `onFinish` 事件，该事件仅当校验通过后才会执行：
-
-```jsx
-// antd v3
-const Demo = ({ form: { getFieldDecorator, validateFields } }) => {
-  const onSubmit = e => {
-    e.preventDefault();
-    validateFields((err, values) => {
-      if (!err) {
-        console.log('Received values of form: ', values);
-      }
-    });
-  };
-
-  return (
-    <Form onSubmit={onSubmit}>
-      <Form.Item>
-        {getFieldDecorator('username', {
-          rules: [{ required: true }],
-        })(<Input />)}
-      </Form.Item>
-    </Form>
-  );
-};
-
-const WrappedDemo = Form.create()(Demo);
-```
-
-改成：
-
-```jsx
-// antd v4
-const Demo = () => {
-  const onFinish = values => {
-    console.log('Received values of form: ', values);
-  };
-
-  return (
-    <Form onFinish={onFinish}>
-      <Form.Item name="username" rules={[{ required: true }]}>
-        <Input />
-      </Form.Item>
-    </Form>
-  );
-};
-```
-
-## scrollToField 替代 validateFieldsAndScroll
-
-新版推荐使用 `onFinish` 进行校验后提交操作，因而 `validateFieldsAndScroll` 拆成更独立的 `scrollToField` 方法：
-
-```jsx
-// antd v3
-onSubmit = () => {
-  form.validateFieldsAndScroll((error, values) => {
-    // Your logic
-  });
-};
-```
-
-改成：
-
-```jsx
-// antd v4
-onFinishFailed = ({ errorFields }) => {
-  form.scrollToField(errorFields[0].name);
-};
-```
-
-## 初始化调整
-
-此外，我们将 `initialValue` 从字段中移到 Form 中。以避免同名字段设置 `initialValue` 的冲突问题：
-
-```jsx
-// antd v3
-const Demo = ({ form: { getFieldDecorator } }) => (
-  <Form>
-    <Form.Item>
-      {getFieldDecorator('username', {
-        rules: [{ required: true }],
-        initialValue: 'Bamboo',
-      })(<Input />)}
-    </Form.Item>
-  </Form>
-);
-
-const WrappedDemo = Form.create()(Demo);
-```
-
-改成：
-
-```jsx
-// antd v4
-const Demo = () => (
-  <Form initialValues={{ username: 'Bamboo' }}>
-    <Form.Item name="username" rules={[{ required: true }]}>
-      <Input />
-    </Form.Item>
-  </Form>
-);
-```
-
-在 v3 版本中，修改未操作的字段 `initialValue` 会同步更新字段值，这是一个 BUG。但是由于被长期作为一个 feature 使用，因而我们一直没有修复。在 v4 中，该 BUG 已被修复。`initialValue` 只有在初始化以及重置表单时生效。
-
-## 嵌套字段路径使用数组
-
-过去版本我们通过 `.` 代表嵌套路径（诸如 `user.name` 来代表 `{ user: { name: '' } }`）。然而在一些后台系统中，变量名中也会带上 `.`。这造成用户需要额外的代码进行转化，因而新版中，嵌套路径通过数组来表示以避免错误的处理行为（如 `['user', 'name']`）。
-
-也因此，诸如 `getFieldsError` 等方法返回的路径总是数组形式以便于用户处理：
-
-```jsx
-form.getFieldsError();
-
-/*
-[
-  { name: ['user', 'name'], errors: [] },
-  { name: ['user', 'age'], errors: ['Some error message'] },
-]
-*/
-```
-
-嵌套字段定义由：
-
-```jsx
-// antd v3
-<Form.Item label="Firstname">{getFieldDecorator('user.0.firstname', {})(<Input />)}</Form.Item>
-```
-
-改至：
-
-```jsx
-// antd v4
-<Form.Item name={['user', 0, 'firstname']} label="Firstname">
-  <Input />
-</Form.Item>
-```
-
-相似的，`setFieldsValue` 由：
-
-```jsx
-// antd v3
-this.formRef.current.setFieldsValue({
-  'user.0.firstname': 'John',
-});
-```
-
-改至：
-
-```jsx
-// antd v4
-this.formRef.current.setFieldsValue({
-  user: [
-    {
-      firstname: 'John',
-    },
-  ],
-});
-```
-
-## validateFields 不再支持 callback
-
-`validateFields` 会返回 Promise 对象，因而你可以通过 `async/await` 或者 `then/catch` 来执行对应的错误处理。不再需要判断 `errors` 是否为空：
-
-```jsx
-// antd v3
-validateFields((err, value) => {
-  if (!err) {
-    // Do something with value
-  }
-});
-```
-
-改成：
-
-```jsx
-// antd v4
-validateFields().then(values => {
-  // Do something with value
-});
-```
diff --git a/components/menu/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/menu/__tests__/__snapshots__/demo-extend.test.ts.snap
index 72c92344ba9a..64222338f213 100644
--- a/components/menu/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/menu/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,274 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/menu/demo/deprecated.tsx extend context correctly 1`] = `
-Array [
-  <ul
-    class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-light"
-    data-menu-list="true"
-    role="menu"
-    tabindex="0"
-  >
-    <li
-      class="ant-menu-overflow-item ant-menu-item ant-menu-item-selected"
-      role="menuitem"
-      style="opacity:1;order:0"
-      tabindex="-1"
-    >
-      <span
-        aria-label="mail"
-        class="anticon anticon-mail ant-menu-item-icon"
-        role="img"
-      >
-        <svg
-          aria-hidden="true"
-          data-icon="mail"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"
-          />
-        </svg>
-      </span>
-      <span
-        class="ant-menu-title-content"
-      >
-        Navigation One
-      </span>
-    </li>
-    <div>
-      <div
-        class="ant-tooltip ant-menu-inline-collapsed-tooltip"
-        style="opacity:0"
-      >
-        <div
-          class="ant-tooltip-content"
-        >
-          <div
-            class="ant-tooltip-arrow"
-          >
-            <span
-              class="ant-tooltip-arrow-content"
-            />
-          </div>
-          <div
-            class="ant-tooltip-inner"
-            role="tooltip"
-          />
-        </div>
-      </div>
-    </div>
-    <li
-      class="ant-menu-overflow-item ant-menu-submenu ant-menu-submenu-horizontal"
-      role="none"
-      style="opacity:1;order:1"
-    >
-      <div
-        aria-expanded="false"
-        aria-haspopup="true"
-        class="ant-menu-submenu-title"
-        role="menuitem"
-        tabindex="-1"
-      >
-        <span
-          aria-label="setting"
-          class="anticon anticon-setting ant-menu-item-icon"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="setting"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"
-            />
-          </svg>
-        </span>
-        <span
-          class="ant-menu-title-content"
-        >
-          Navigation Two - Submenu
-        </span>
-        <i
-          class="ant-menu-submenu-arrow"
-        />
-      </div>
-    </li>
-    <li
-      aria-hidden="true"
-      class="ant-menu-overflow-item ant-menu-overflow-item-rest ant-menu-submenu ant-menu-submenu-horizontal"
-      role="none"
-      style="opacity:0;height:0;overflow-y:hidden;order:9007199254740991;pointer-events:none;position:absolute"
-    >
-      <div
-        aria-expanded="false"
-        aria-haspopup="true"
-        class="ant-menu-submenu-title"
-        role="menuitem"
-        tabindex="-1"
-      >
-        <span
-          aria-label="ellipsis"
-          class="anticon anticon-ellipsis"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="ellipsis"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
-            />
-          </svg>
-        </span>
-        <i
-          class="ant-menu-submenu-arrow"
-        />
-      </div>
-      <div>
-        <div
-          class="ant-menu-submenu ant-menu-submenu-popup ant-menu-light"
-          style="opacity:0"
-        >
-          <ul
-            class="ant-menu ant-menu-sub ant-menu-vertical"
-            data-menu-list="true"
-          />
-        </div>
-      </div>
-    </li>
-  </ul>,
-  <div
-    aria-hidden="true"
-    style="display:none"
-  >
-    <div>
-      <div
-        class="ant-tooltip ant-menu-inline-collapsed-tooltip"
-        style="opacity:0"
-      >
-        <div
-          class="ant-tooltip-content"
-        >
-          <div
-            class="ant-tooltip-arrow"
-          >
-            <span
-              class="ant-tooltip-arrow-content"
-            />
-          </div>
-          <div
-            class="ant-tooltip-inner"
-            role="tooltip"
-          />
-        </div>
-      </div>
-    </div>
-    <div>
-      <div
-        class="ant-tooltip ant-menu-inline-collapsed-tooltip"
-        style="opacity:0"
-      >
-        <div
-          class="ant-tooltip-content"
-        >
-          <div
-            class="ant-tooltip-arrow"
-          >
-            <span
-              class="ant-tooltip-arrow-content"
-            />
-          </div>
-          <div
-            class="ant-tooltip-inner"
-            role="tooltip"
-          />
-        </div>
-      </div>
-    </div>
-    <div>
-      <div
-        class="ant-tooltip ant-menu-inline-collapsed-tooltip"
-        style="opacity:0"
-      >
-        <div
-          class="ant-tooltip-content"
-        >
-          <div
-            class="ant-tooltip-arrow"
-          >
-            <span
-              class="ant-tooltip-arrow-content"
-            />
-          </div>
-          <div
-            class="ant-tooltip-inner"
-            role="tooltip"
-          />
-        </div>
-      </div>
-    </div>
-    <div>
-      <div
-        class="ant-tooltip ant-menu-inline-collapsed-tooltip"
-        style="opacity:0"
-      >
-        <div
-          class="ant-tooltip-content"
-        >
-          <div
-            class="ant-tooltip-arrow"
-          >
-            <span
-              class="ant-tooltip-arrow-content"
-            />
-          </div>
-          <div
-            class="ant-tooltip-inner"
-            role="tooltip"
-          />
-        </div>
-      </div>
-    </div>
-    <div>
-      <div
-        class="ant-tooltip ant-menu-inline-collapsed-tooltip"
-        style="opacity:0"
-      >
-        <div
-          class="ant-tooltip-content"
-        >
-          <div
-            class="ant-tooltip-arrow"
-          >
-            <span
-              class="ant-tooltip-arrow-content"
-            />
-          </div>
-          <div
-            class="ant-tooltip-inner"
-            role="tooltip"
-          />
-        </div>
-      </div>
-    </div>
-  </div>,
-]
-`;
-
 exports[`renders ./components/menu/demo/horizontal.tsx extend context correctly 1`] = `
 Array [
   <ul
diff --git a/components/menu/__tests__/__snapshots__/demo.test.ts.snap b/components/menu/__tests__/__snapshots__/demo.test.ts.snap
index 765adc93a305..a7eabb4a1076 100644
--- a/components/menu/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/menu/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,130 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/menu/demo/deprecated.tsx correctly 1`] = `
-Array [
-  <ul
-    class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-light"
-    data-menu-list="true"
-    role="menu"
-    tabindex="0"
-  >
-    <li
-      class="ant-menu-overflow-item ant-menu-item ant-menu-item-selected"
-      role="menuitem"
-      style="opacity:1;order:0"
-      tabindex="-1"
-    >
-      <span
-        aria-label="mail"
-        class="anticon anticon-mail ant-menu-item-icon"
-        role="img"
-      >
-        <svg
-          aria-hidden="true"
-          data-icon="mail"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"
-          />
-        </svg>
-      </span>
-      <span
-        class="ant-menu-title-content"
-      >
-        Navigation One
-      </span>
-    </li>
-    <li
-      class="ant-menu-overflow-item ant-menu-submenu ant-menu-submenu-horizontal"
-      role="none"
-      style="opacity:1;order:1"
-    >
-      <div
-        aria-expanded="false"
-        aria-haspopup="true"
-        class="ant-menu-submenu-title"
-        role="menuitem"
-        tabindex="-1"
-      >
-        <span
-          aria-label="setting"
-          class="anticon anticon-setting ant-menu-item-icon"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="setting"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"
-            />
-          </svg>
-        </span>
-        <span
-          class="ant-menu-title-content"
-        >
-          Navigation Two - Submenu
-        </span>
-        <i
-          class="ant-menu-submenu-arrow"
-        />
-      </div>
-    </li>
-    <li
-      aria-hidden="true"
-      class="ant-menu-overflow-item ant-menu-overflow-item-rest ant-menu-submenu ant-menu-submenu-horizontal"
-      role="none"
-      style="opacity:0;height:0;overflow-y:hidden;order:9007199254740991;pointer-events:none;position:absolute"
-    >
-      <div
-        aria-expanded="false"
-        aria-haspopup="true"
-        class="ant-menu-submenu-title"
-        role="menuitem"
-        tabindex="-1"
-      >
-        <span
-          aria-label="ellipsis"
-          class="anticon anticon-ellipsis"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="ellipsis"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
-            />
-          </svg>
-        </span>
-        <i
-          class="ant-menu-submenu-arrow"
-        />
-      </div>
-    </li>
-  </ul>,
-  <div
-    aria-hidden="true"
-    style="display:none"
-  />,
-]
-`;
-
 exports[`renders ./components/menu/demo/horizontal.tsx correctly 1`] = `
 Array [
   <ul
diff --git a/components/menu/demo/deprecated.md b/components/menu/demo/deprecated.md
deleted file mode 100755
index 8cd2dd161083..000000000000
--- a/components/menu/demo/deprecated.md
+++ /dev/null
@@ -1,7 +0,0 @@
-## zh-CN
-
-通过语法糖的方式组织菜单目录树，在 `4.20.0` 之后推荐通过 `items` 属性实现。在下个大版本中语法糖用法将被移除从而让 Menu 可以获得更好的性能优化。
-
-## en-US
-
-Use the syntax sugar to organize the menu directory tree. We recommend to use `items` after `4.20.0`. In the next major version, the syntax sugar will be removed to make performance improvement be possible.
diff --git a/components/menu/demo/deprecated.tsx b/components/menu/demo/deprecated.tsx
deleted file mode 100644
index 6f7d217a99b1..000000000000
--- a/components/menu/demo/deprecated.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react';
-import { Menu } from 'antd';
-import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons';
-
-const App = () => (
-  <Menu mode="horizontal" defaultSelectedKeys={['mail']}>
-    <Menu.Item key="mail" icon={<MailOutlined />}>
-      Navigation One
-    </Menu.Item>
-    <Menu.SubMenu key="SubMenu" title="Navigation Two - Submenu" icon={<SettingOutlined />}>
-      <Menu.Item key="two" icon={<AppstoreOutlined />}>
-        Navigation Two
-      </Menu.Item>
-      <Menu.Item key="three" icon={<AppstoreOutlined />}>
-        Navigation Three
-      </Menu.Item>
-      <Menu.ItemGroup title="Item Group">
-        <Menu.Item key="four" icon={<AppstoreOutlined />}>
-          Navigation Four
-        </Menu.Item>
-        <Menu.Item key="five" icon={<AppstoreOutlined />}>
-          Navigation Five
-        </Menu.Item>
-      </Menu.ItemGroup>
-    </Menu.SubMenu>
-  </Menu>
-);
-
-export default App;
diff --git a/components/menu/index.en-US.md b/components/menu/index.en-US.md
index f81b8bf1c9f5..769c569da7c3 100644
--- a/components/menu/index.en-US.md
+++ b/components/menu/index.en-US.md
@@ -18,39 +18,9 @@ More layouts with navigation: [Layout](/components/layout).
 - Menu is rendered as a `ul` element, so it only supports [`li` and `script-supporting` elements](https://html.spec.whatwg.org/multipage/grouping-content.html#the-ul-element) as children nodes。Your customized node should be wrapped by `Menu.Item`.
 - Menu needs to collect its node structure, so its children should be `Menu.*` or encapsulated HOCs.
 
-### Usage upgrade after 4.20.0
-
-<Alert message="After version 4.20.0, we provide a simpler usage &lt;Menu items={[...]} /&gt; with better performance and potential of writing simpler code style in your applications. Meanwhile, we deprecated the old usage in browser console, we will remove it in antd 5.0."></Alert>
-
-```jsx
-// works when >=4.20.0, recommended ✅
-const items = [
-  { label: 'item 1', key: 'item-1' }, // remember to pass the key prop
-  { label: 'item 2', key: 'item-2' }, // which is required
-  {
-    label: 'sub menu',
-    key: 'submenu',
-    children: [{ label: 'item 3', key: 'submenu-item-1' }],
-  },
-];
-return <Menu items={items} />;
-
-// works when <4.20.0, deprecated when >=4.20.0 🙅🏻‍♀️
-<Menu>
-  <Menu.Item>item 1</Menu.Item>
-  <Menu.Item>item 2</Menu.Item>
-  <Menu.SubMenu title="sub menu">
-    <Menu.Item>item 3</Menu.Item>
-  </Menu.SubMenu>
-</Menu>;
-```
-
-The legacy demo code for version `<4.20.0` could be found at [https://github.com/ant-design/ant-design/tree/4.19.5/components/menu/demo](https://github.com/ant-design/ant-design/tree/4.19.5/components/menu/demo).
-
 ## Examples
 
 <!-- prettier-ignore -->
-<code src="./demo/deprecated.tsx">Basic usage (deprecated syntactic sugar)</code>
 <code src="./demo/horizontal.tsx">Top Navigation</code>
 <code src="./demo/inline.tsx">Inline menu</code>
 <code src="./demo/inline-collapsed.tsx">Collapsed inline menu</code>
@@ -108,25 +78,6 @@ The legacy demo code for version `<4.20.0` could be found at [https://github.com
 | label    | Menu label                           | ReactNode | -             |         |
 | title    | Set display title for collapsed item | string    | -             |         |
 
-> Note: `icon` is a newly added prop in `4.2.0`. For previous versions, please use the following method to define the icon.
->
-> ```jsx
-> <Menu.Item>
->   <PieChartOutlined />
->   <span>Option 1</span>
-> </Menu.Item>
-> <Menu.SubMenu
->   title={
->     <>
->       <PieChartOutlined />
->       <span>Option 2</span>
->     </>
->   }
-> >
->   ...
-> </Menu.SubMenu>
-> ```
-
 #### SubMenuType
 
 <!-- prettier-ignore -->
diff --git a/components/menu/index.zh-CN.md b/components/menu/index.zh-CN.md
index 0c177521d879..d1ea917a13d4 100644
--- a/components/menu/index.zh-CN.md
+++ b/components/menu/index.zh-CN.md
@@ -19,39 +19,9 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*KeyQQL5iKkkAAAAAAA
 - Menu 元素为 `ul`，因而仅支持 [`li` 以及 `script-supporting` 子元素](https://html.spec.whatwg.org/multipage/grouping-content.html#the-ul-element)。因而你的子节点元素应该都在 `Menu.Item` 内使用。
 - Menu 需要计算节点结构，因而其子元素仅支持 `Menu.*` 以及对此进行封装的 HOC 组件。
 
-### 4.20.0 用法升级
-
-<Alert message="在 4.20.0 版本后，我们提供了 &lt;Menu items={[...]} /&gt; 的简写方式，有更好的性能和更方便的数据组织方式，开发者不再需要自行拼接 JSX。同时我们废弃了原先的写法，你还是可以在 4.x 继续使用，但会在控制台看到警告，并会在 5.0 后移除。"></Alert>
-
-```jsx
-// >=4.20.0 可用，推荐的写法 ✅
-const items = [
-  { label: '菜单项一', key: 'item-1' }, // 菜单项务必填写 key
-  { label: '菜单项二', key: 'item-2' },
-  {
-    label: '子菜单',
-    key: 'submenu',
-    children: [{ label: '子菜单项', key: 'submenu-item-1' }],
-  },
-];
-return <Menu items={items} />;
-
-// <4.20.0 可用，>=4.20.0 时不推荐 🙅🏻‍♀️
-<Menu>
-  <Menu.Item>菜单项一</Menu.Item>
-  <Menu.Item>菜单项二</Menu.Item>
-  <Menu.SubMenu title="子菜单">
-    <Menu.Item>子菜单项</Menu.Item>
-  </Menu.SubMenu>
-</Menu>;
-```
-
-`<4.20.0` 版本的 JSX 演示写法可以参考 [https://github.com/ant-design/ant-design/tree/4.19.5/components/menu/demo](https://github.com/ant-design/ant-design/tree/4.19.5/components/menu/demo)。
-
 ## 代码演示
 
 <!-- prettier-ignore -->
-<code src="./demo/deprecated.tsx">基础用法（废弃的语法糖）</code>
 <code src="./demo/horizontal.tsx">顶部导航</code>
 <code src="./demo/inline.tsx">内嵌菜单</code>
 <code src="./demo/inline-collapsed.tsx">缩起内嵌菜单</code>
@@ -109,25 +79,6 @@ return <Menu items={items} />;
 | label    | 菜单项标题               | ReactNode | -      |      |
 | title    | 设置收缩时展示的悬浮标题 | string    | -      |      |
 
-> 注意：`icon` 是 `4.2.0` 新增的属性，之前的版本请使用下面的方式定义图标。
->
-> ```jsx
-> <Menu.Item>
->   <PieChartOutlined />
->   <span>Option 1</span>
-> </Menu.Item>
-> <Menu.SubMenu
->   title={
->     <>
->       <PieChartOutlined />
->       <span>Option 2</span>
->     </>
->   }
-> >
->   ...
-> </Menu.SubMenu>
-> ```
-
 #### SubMenuType
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
diff --git a/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap
index ad38b92a37ea..1d4d7073f1b3 100644
--- a/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -528,139 +528,6 @@ exports[`renders ./components/steps/demo/customized-progress-dot.tsx extend cont
 </div>
 `;
 
-exports[`renders ./components/steps/demo/deprecated.tsx extend context correctly 1`] = `
-<div
-  class="ant-steps ant-steps-horizontal ant-steps-label-horizontal"
->
-  <div
-    class="ant-steps-item ant-steps-item-finish"
-  >
-    <div
-      class="ant-steps-item-container"
-    >
-      <div
-        class="ant-steps-item-tail"
-      />
-      <div
-        class="ant-steps-item-icon"
-      >
-        <span
-          class="ant-steps-icon"
-        >
-          <span
-            aria-label="check"
-            class="anticon anticon-check ant-steps-finish-icon"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="check"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
-              />
-            </svg>
-          </span>
-        </span>
-      </div>
-      <div
-        class="ant-steps-item-content"
-      >
-        <div
-          class="ant-steps-item-title"
-        >
-          Finished
-        </div>
-        <div
-          class="ant-steps-item-description"
-        >
-          This is a description.
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-steps-item ant-steps-item-process ant-steps-item-active"
-  >
-    <div
-      class="ant-steps-item-container"
-    >
-      <div
-        class="ant-steps-item-tail"
-      />
-      <div
-        class="ant-steps-item-icon"
-      >
-        <span
-          class="ant-steps-icon"
-        >
-          2
-        </span>
-      </div>
-      <div
-        class="ant-steps-item-content"
-      >
-        <div
-          class="ant-steps-item-title"
-        >
-          In Progress
-          <div
-            class="ant-steps-item-subtitle"
-            title="Left 00:00:08"
-          >
-            Left 00:00:08
-          </div>
-        </div>
-        <div
-          class="ant-steps-item-description"
-        >
-          This is a description.
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-steps-item ant-steps-item-wait"
-  >
-    <div
-      class="ant-steps-item-container"
-    >
-      <div
-        class="ant-steps-item-tail"
-      />
-      <div
-        class="ant-steps-item-icon"
-      >
-        <span
-          class="ant-steps-icon"
-        >
-          3
-        </span>
-      </div>
-      <div
-        class="ant-steps-item-content"
-      >
-        <div
-          class="ant-steps-item-title"
-        >
-          Waiting
-        </div>
-        <div
-          class="ant-steps-item-description"
-        >
-          This is a description.
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
 exports[`renders ./components/steps/demo/error.tsx extend context correctly 1`] = `
 <div
   class="ant-steps ant-steps-horizontal ant-steps-label-horizontal"
diff --git a/components/steps/__tests__/__snapshots__/demo.test.ts.snap b/components/steps/__tests__/__snapshots__/demo.test.ts.snap
index 0f2c4bb839e2..ce211c156350 100644
--- a/components/steps/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/steps/__tests__/__snapshots__/demo.test.ts.snap
@@ -384,139 +384,6 @@ exports[`renders ./components/steps/demo/customized-progress-dot.tsx correctly 1
 </div>
 `;
 
-exports[`renders ./components/steps/demo/deprecated.tsx correctly 1`] = `
-<div
-  class="ant-steps ant-steps-horizontal ant-steps-label-horizontal"
->
-  <div
-    class="ant-steps-item ant-steps-item-finish"
-  >
-    <div
-      class="ant-steps-item-container"
-    >
-      <div
-        class="ant-steps-item-tail"
-      />
-      <div
-        class="ant-steps-item-icon"
-      >
-        <span
-          class="ant-steps-icon"
-        >
-          <span
-            aria-label="check"
-            class="anticon anticon-check ant-steps-finish-icon"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="check"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
-              />
-            </svg>
-          </span>
-        </span>
-      </div>
-      <div
-        class="ant-steps-item-content"
-      >
-        <div
-          class="ant-steps-item-title"
-        >
-          Finished
-        </div>
-        <div
-          class="ant-steps-item-description"
-        >
-          This is a description.
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-steps-item ant-steps-item-process ant-steps-item-active"
-  >
-    <div
-      class="ant-steps-item-container"
-    >
-      <div
-        class="ant-steps-item-tail"
-      />
-      <div
-        class="ant-steps-item-icon"
-      >
-        <span
-          class="ant-steps-icon"
-        >
-          2
-        </span>
-      </div>
-      <div
-        class="ant-steps-item-content"
-      >
-        <div
-          class="ant-steps-item-title"
-        >
-          In Progress
-          <div
-            class="ant-steps-item-subtitle"
-            title="Left 00:00:08"
-          >
-            Left 00:00:08
-          </div>
-        </div>
-        <div
-          class="ant-steps-item-description"
-        >
-          This is a description.
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-steps-item ant-steps-item-wait"
-  >
-    <div
-      class="ant-steps-item-container"
-    >
-      <div
-        class="ant-steps-item-tail"
-      />
-      <div
-        class="ant-steps-item-icon"
-      >
-        <span
-          class="ant-steps-icon"
-        >
-          3
-        </span>
-      </div>
-      <div
-        class="ant-steps-item-content"
-      >
-        <div
-          class="ant-steps-item-title"
-        >
-          Waiting
-        </div>
-        <div
-          class="ant-steps-item-description"
-        >
-          This is a description.
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
 exports[`renders ./components/steps/demo/error.tsx correctly 1`] = `
 <div
   class="ant-steps ant-steps-horizontal ant-steps-label-horizontal"
diff --git a/components/steps/demo/deprecated.md b/components/steps/demo/deprecated.md
deleted file mode 100644
index b31206f35781..000000000000
--- a/components/steps/demo/deprecated.md
+++ /dev/null
@@ -1,7 +0,0 @@
-## zh-CN
-
-简单的步骤条。
-
-## en-US
-
-The most basic step bar.
diff --git a/components/steps/demo/deprecated.tsx b/components/steps/demo/deprecated.tsx
deleted file mode 100644
index 30b1237ce24c..000000000000
--- a/components/steps/demo/deprecated.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import { Steps } from 'antd';
-
-const { Step } = Steps;
-const description = 'This is a description.';
-const App: React.FC = () => (
-  <Steps current={1}>
-    <Step title="Finished" description={description} />
-    <Step title="In Progress" description={description} subTitle="Left 00:00:08" />
-    <Step title="Waiting" description={description} />
-  </Steps>
-);
-
-export default App;
diff --git a/components/steps/index.en-US.md b/components/steps/index.en-US.md
index fbb8aefb8260..017d405c6963 100644
--- a/components/steps/index.en-US.md
+++ b/components/steps/index.en-US.md
@@ -11,27 +11,9 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*677sTqCpE3wAAAAAAA
 
 When a given task is complicated or has a certain sequence in the series of subtasks, we can decompose it into several steps to make things easier.
 
-### Usage upgrade after 4.24.0
-
-<Alert message="After version 4.24.0, we provide a simpler usage &lt;Steps items={[...]} /&gt; with better performance and potential of writing simpler code style in your applications. Meanwhile, we deprecated the old usage in browser console, we will remove it in antd 5.0."></Alert>
-
-```jsx
-// works when >=4.24.0, recommended ✅
-const items = [{ title: 'first step' }, { title: 'second step' }, { title: 'third step' }];
-return <Steps items={items} />;
-
-// works when <4.24.0, deprecated when >=4.24.0 🙅🏻‍♀️
-<Steps>
-  <Step title="first step" />
-  <Step title="second step" />
-  <Step title="third step" />
-</Steps>;
-```
-
 ## Examples
 
 <!-- prettier-ignore -->
-<code src="./demo/deprecated.tsx">Basic (deprecated syntactic sugar)</code>
 <code src="./demo/simple.tsx">Basic</code>
 <code src="./demo/small-size.tsx">Mini version</code>
 <code src="./demo/icon.tsx">With icon</code>
diff --git a/components/steps/index.zh-CN.md b/components/steps/index.zh-CN.md
index ef9025c01642..8741dd8c4ec3 100644
--- a/components/steps/index.zh-CN.md
+++ b/components/steps/index.zh-CN.md
@@ -12,27 +12,9 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*677sTqCpE3wAAAAAAA
 
 当任务复杂或者存在先后关系时，将其分解成一系列步骤，从而简化任务。
 
-### 4.24.0 用法升级
-
-<Alert message="在 4.24.0 版本后，我们提供了 &lt;Steps items={[...]} /&gt; 的简写方式，有更好的性能和更方便的数据组织方式，开发者不再需要自行拼接 JSX。同时我们废弃了原先的写法，你还是可以在 4.x 继续使用，但会在控制台看到警告，并会在 5.0 后移除。"></Alert>
-
-```jsx
-// >=4.24.0 可用，推荐的写法 ✅
-const items = [{ title: '第一步' }, { title: '第二步' }, { title: '第三步' }];
-return <Steps items={items} />;
-
-// <4.24.0 可用，>=4.24.0 时不推荐 🙅🏻‍♀️
-<Steps>
-  <Step title="第一步" />
-  <Step title="第二步" />
-  <Step title="第三步" />
-</Steps>;
-```
-
 ## 代码演示
 
 <!-- prettier-ignore -->
-<code src="./demo/deprecated.tsx">基本用法 (废弃的语法糖)</code>
 <code src="./demo/simple.tsx">基本用法</code>
 <code src="./demo/small-size.tsx">迷你版</code>
 <code src="./demo/icon.tsx">带图标的步骤条</code>
diff --git a/components/table/index.en-US.md b/components/table/index.en-US.md
index bb6d1e3b5d14..0bbd952097cf 100644
--- a/components/table/index.en-US.md
+++ b/components/table/index.en-US.md
@@ -329,12 +329,6 @@ return <Table rowKey="uid" />;
 return <Table rowKey={(record) => record.uid} />;
 ```
 
-## Migrate to v4
-
-Table removes `onRowClick`, `onRowDoubleClick`, `onRowMouseEnter`, `onRowMouseLeave` and some other api which is already deprecated in v3. If you only use api listing in official document, that's OK.
-
-Besides, the breaking change is changing `dataIndex` from nest string path like `user.age` to string array path like `['user', 'age']`. This help to resolve developer should additional work on the field which contains `.`.
-
 ## FAQ
 
 ### How to hide pagination when single page or no data?
diff --git a/components/table/index.zh-CN.md b/components/table/index.zh-CN.md
index 40bf1b2b0df0..6859a3e00fd6 100644
--- a/components/table/index.zh-CN.md
+++ b/components/table/index.zh-CN.md
@@ -332,12 +332,6 @@ return <Table rowKey="uid" />;
 return <Table rowKey={(record) => record.uid} />;
 ```
 
-## 从 v3 升级到 v4
-
-Table 移除了在 v3 中废弃的 `onRowClick`、`onRowDoubleClick`、`onRowMouseEnter`、`onRowMouseLeave` 等方法。如果你使用的 api 为文档中列举的 api，那你不用担心会丢失功能。
-
-此外，比较重大的改动为 `dataIndex` 从支持路径嵌套如 `user.age` 改成了数组路径如 `['user', 'age']`。以解决过去属性名带 `.` 需要额外的数据转化问题。
-
 ## FAQ
 
 ### 如何在没有数据或只有一页数据时隐藏分页栏
diff --git a/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap
index 0e982660b3d6..d98ee9bd52f8 100644
--- a/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1197,136 +1197,6 @@ exports[`renders ./components/tabs/demo/custom-tab-bar-node.tsx extend context c
 </div>
 `;
 
-exports[`renders ./components/tabs/demo/deprecated.tsx extend context correctly 1`] = `
-<div
-  class="ant-tabs ant-tabs-top"
->
-  <div
-    class="ant-tabs-nav"
-    role="tablist"
-  >
-    <div
-      class="ant-tabs-nav-wrap"
-    >
-      <div
-        class="ant-tabs-nav-list"
-        style="transform:translate(0px, 0px)"
-      >
-        <div
-          class="ant-tabs-tab ant-tabs-tab-active"
-        >
-          <div
-            aria-selected="true"
-            class="ant-tabs-tab-btn"
-            role="tab"
-            tabindex="0"
-          >
-            Tab 1
-          </div>
-        </div>
-        <div
-          class="ant-tabs-tab"
-        >
-          <div
-            aria-selected="false"
-            class="ant-tabs-tab-btn"
-            role="tab"
-            tabindex="0"
-          >
-            Tab 2
-          </div>
-        </div>
-        <div
-          class="ant-tabs-tab"
-        >
-          <div
-            aria-selected="false"
-            class="ant-tabs-tab-btn"
-            role="tab"
-            tabindex="0"
-          >
-            Tab 3
-          </div>
-        </div>
-        <div
-          class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
-        />
-      </div>
-    </div>
-    <div
-      class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
-    >
-      <button
-        aria-controls="null-more-popup"
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        aria-hidden="true"
-        class="ant-tabs-nav-more"
-        id="null-more"
-        style="visibility:hidden;order:1"
-        tabindex="-1"
-        type="button"
-      >
-        <span
-          aria-label="ellipsis"
-          class="anticon anticon-ellipsis"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="ellipsis"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
-            />
-          </svg>
-        </span>
-      </button>
-      <div>
-        <div
-          class="ant-tabs-dropdown"
-          style="opacity:0"
-        >
-          <ul
-            aria-label="expanded dropdown"
-            class="ant-tabs-dropdown-menu ant-tabs-dropdown-menu-root ant-tabs-dropdown-menu-vertical"
-            data-menu-list="true"
-            id="null-more-popup"
-            role="listbox"
-            tabindex="-1"
-          />
-          <div
-            aria-hidden="true"
-            style="display:none"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-tabs-content-holder"
-  >
-    <div
-      class="ant-tabs-content ant-tabs-content-top"
-    >
-      <div
-        aria-hidden="false"
-        class="ant-tabs-tabpane ant-tabs-tabpane-active"
-        role="tabpanel"
-        tabindex="0"
-      >
-        Content of Tab Pane 1
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
 exports[`renders ./components/tabs/demo/disabled.tsx extend context correctly 1`] = `
 <div
   class="ant-tabs ant-tabs-top"
diff --git a/components/tabs/__tests__/__snapshots__/demo.test.ts.snap b/components/tabs/__tests__/__snapshots__/demo.test.ts.snap
index 95994d3823b2..f47012709439 100644
--- a/components/tabs/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/tabs/__tests__/__snapshots__/demo.test.ts.snap
@@ -1045,117 +1045,6 @@ exports[`renders ./components/tabs/demo/custom-tab-bar-node.tsx correctly 1`] =
 </div>
 `;
 
-exports[`renders ./components/tabs/demo/deprecated.tsx correctly 1`] = `
-<div
-  class="ant-tabs ant-tabs-top"
->
-  <div
-    class="ant-tabs-nav"
-    role="tablist"
-  >
-    <div
-      class="ant-tabs-nav-wrap"
-    >
-      <div
-        class="ant-tabs-nav-list"
-        style="transform:translate(0px, 0px)"
-      >
-        <div
-          class="ant-tabs-tab ant-tabs-tab-active"
-        >
-          <div
-            aria-selected="true"
-            class="ant-tabs-tab-btn"
-            role="tab"
-            tabindex="0"
-          >
-            Tab 1
-          </div>
-        </div>
-        <div
-          class="ant-tabs-tab"
-        >
-          <div
-            aria-selected="false"
-            class="ant-tabs-tab-btn"
-            role="tab"
-            tabindex="0"
-          >
-            Tab 2
-          </div>
-        </div>
-        <div
-          class="ant-tabs-tab"
-        >
-          <div
-            aria-selected="false"
-            class="ant-tabs-tab-btn"
-            role="tab"
-            tabindex="0"
-          >
-            Tab 3
-          </div>
-        </div>
-        <div
-          class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
-        />
-      </div>
-    </div>
-    <div
-      class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
-    >
-      <button
-        aria-controls="null-more-popup"
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        aria-hidden="true"
-        class="ant-tabs-nav-more"
-        id="null-more"
-        style="visibility:hidden;order:1"
-        tabindex="-1"
-        type="button"
-      >
-        <span
-          aria-label="ellipsis"
-          class="anticon anticon-ellipsis"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="ellipsis"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
-            />
-          </svg>
-        </span>
-      </button>
-    </div>
-  </div>
-  <div
-    class="ant-tabs-content-holder"
-  >
-    <div
-      class="ant-tabs-content ant-tabs-content-top"
-    >
-      <div
-        aria-hidden="false"
-        class="ant-tabs-tabpane ant-tabs-tabpane-active"
-        role="tabpanel"
-        tabindex="0"
-      >
-        Content of Tab Pane 1
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
 exports[`renders ./components/tabs/demo/disabled.tsx correctly 1`] = `
 <div
   class="ant-tabs ant-tabs-top"
diff --git a/components/tabs/demo/deprecated.md b/components/tabs/demo/deprecated.md
deleted file mode 100644
index de8991471d65..000000000000
--- a/components/tabs/demo/deprecated.md
+++ /dev/null
@@ -1,7 +0,0 @@
-## zh-CN
-
-默认选中第一项。
-
-## en-US
-
-Default activate first tab.
diff --git a/components/tabs/demo/deprecated.tsx b/components/tabs/demo/deprecated.tsx
deleted file mode 100644
index 2f5dbf7f01b7..000000000000
--- a/components/tabs/demo/deprecated.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import { Tabs } from 'antd';
-
-const App: React.FC = () => (
-  <Tabs defaultActiveKey="1">
-    <Tabs.TabPane tab="Tab 1" key="1">
-      Content of Tab Pane 1
-    </Tabs.TabPane>
-    <Tabs.TabPane tab="Tab 2" key="2">
-      Content of Tab Pane 2
-    </Tabs.TabPane>
-    <Tabs.TabPane tab="Tab 3" key="3">
-      Content of Tab Pane 3
-    </Tabs.TabPane>
-  </Tabs>
-);
-
-export default App;
diff --git a/components/tabs/index.en-US.md b/components/tabs/index.en-US.md
index cf9188cb387a..757d1bbf8084 100644
--- a/components/tabs/index.en-US.md
+++ b/components/tabs/index.en-US.md
@@ -15,33 +15,9 @@ Ant Design has 3 types of Tabs for different situations.
 - Normal Tabs: for functional aspects of a page.
 - [Radio.Button](/components/radio/#components-radio-demo-radiobutton): for secondary tabs.
 
-### Usage upgrade after 4.23.0
-
-<Alert message="After version 4.23.0, we provide a simpler usage &lt;Tabs items={[...]} /&gt; with better performance and potential of writing simpler code style in your applications. Meanwhile, we deprecated the old usage in browser console, we will remove it in antd 5.0."></Alert>
-
-```jsx
-// works when >=4.23.0, recommended ✅
-const items = [
-  { label: 'Tab 1', key: 'item-1', children: 'Content 1' }, // remember to pass the key prop
-  { label: 'Tab 2', key: 'item-2', children: 'Content 2' },
-];
-return <Tabs items={items} />;
-
-// works when <4.23.0, deprecated when >=4.23.0 🙅🏻‍♀️
-<Tabs>
-  <Tabs.TabPane tab="Tab 1" key="item-1">
-    Content 1
-  </Tabs.TabPane>
-  <Tabs.TabPane tab="Tab 2" key="item-2">
-    Content 2
-  </Tabs.TabPane>
-</Tabs>;
-```
-
 ## Examples
 
 <!-- prettier-ignore -->
-<code src="./demo/deprecated.tsx">Basic usage (deprecated syntactic sugar)</code>
 <code src="./demo/basic.tsx">Basic</code>
 <code src="./demo/disabled.tsx">Disabled</code>
 <code src="./demo/centered.tsx">Centered</code>
diff --git a/components/tabs/index.zh-CN.md b/components/tabs/index.zh-CN.md
index b725aff8a5a8..2f74cc02c681 100644
--- a/components/tabs/index.zh-CN.md
+++ b/components/tabs/index.zh-CN.md
@@ -18,33 +18,9 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
 - 既可用于容器顶部，也可用于容器内部，是最通用的 Tabs。
 - [Radio.Button](/components/radio/#components-radio-demo-radiobutton) 可作为更次级的页签来使用。
 
-### 4.23.0 用法升级
-
-<Alert message="在 4.23.0 版本后，我们提供了 &lt;Tabs items={[...]} /&gt; 的简写方式，有更好的性能和更方便的数据组织方式，开发者不再需要自行拼接 JSX。同时我们废弃了原先的写法，你还是可以在 4.x 继续使用，但会在控制台看到警告，并会在 5.0 后移除。"></Alert>
-
-```jsx
-// >=4.23.0 可用，推荐的写法 ✅
-const items = [
-  { label: '项目 1', key: 'item-1', children: '内容 1' }, // 务必填写 key
-  { label: '项目 2', key: 'item-2', children: '内容 2' },
-];
-return <Tabs items={items} />;
-
-// <4.23.0 可用，>=4.23.0 时不推荐 🙅🏻‍♀️
-<Tabs>
-  <Tabs.TabPane tab="项目 1" key="item-1">
-    内容 1
-  </Tabs.TabPane>
-  <Tabs.TabPane tab="项目 2" key="item-2">
-    内容 2
-  </Tabs.TabPane>
-</Tabs>;
-```
-
 ## 代码演示
 
 <!-- prettier-ignore -->
-<code src="./demo/deprecated.tsx">基础用法（废弃的语法糖）</code>
 <code src="./demo/basic.tsx">基本</code>
 <code src="./demo/disabled.tsx">禁用</code>
 <code src="./demo/centered.tsx">居中</code>

From 2ad7a98368db4f69b821fcfcd13694178f4cf87f Mon Sep 17 00:00:00 2001
From: wangxingkang <wang_xingkang@qq.com>
Date: Tue, 6 Dec 2022 21:09:59 +0800
Subject: [PATCH 24/41] chore: unify useContext usage (#39314)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: replace useContext to React.useContext

* docs(checkbox): update defaultValue、value type
---
 components/cascader/index.tsx      |  5 ++---
 components/checkbox/Checkbox.tsx   |  5 ++---
 components/checkbox/index.en-US.md |  4 ++--
 components/checkbox/index.zh-CN.md | 20 ++++++++++----------
 components/form/FormItem/index.tsx |  9 ++++-----
 components/image/index.tsx         |  3 +--
 components/input-number/index.tsx  |  3 +--
 components/radio/radio.tsx         |  3 +--
 components/select/index.tsx        |  3 +--
 components/tree-select/index.tsx   |  3 +--
 10 files changed, 25 insertions(+), 33 deletions(-)

diff --git a/components/cascader/index.tsx b/components/cascader/index.tsx
index 8c086114e16a..a3efedfdea5f 100644
--- a/components/cascader/index.tsx
+++ b/components/cascader/index.tsx
@@ -13,7 +13,6 @@ import type {
 import RcCascader from 'rc-cascader';
 import omit from 'rc-util/lib/omit';
 import * as React from 'react';
-import { useContext } from 'react';
 import { ConfigContext } from '../config-provider';
 import defaultRenderEmpty from '../config-provider/defaultRenderEmpty';
 import DisabledContext from '../config-provider/DisabledContext';
@@ -158,7 +157,7 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
     direction: rootDirection,
     // virtual,
     // dropdownMatchSelectWidth,
-  } = useContext(ConfigContext);
+  } = React.useContext(ConfigContext);
 
   const mergedDirection = direction || rootDirection;
   const isRtl = mergedDirection === 'rtl';
@@ -169,7 +168,7 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
     hasFeedback,
     isFormItemInput,
     feedbackIcon,
-  } = useContext(FormItemInputContext);
+  } = React.useContext(FormItemInputContext);
   const mergedStatus = getMergedStatus(contextStatus, customStatus);
 
   // =================== Warning =====================
diff --git a/components/checkbox/Checkbox.tsx b/components/checkbox/Checkbox.tsx
index 7360fc820aed..75d5efe2b8a0 100644
--- a/components/checkbox/Checkbox.tsx
+++ b/components/checkbox/Checkbox.tsx
@@ -1,7 +1,6 @@
 import classNames from 'classnames';
 import RcCheckbox from 'rc-checkbox';
 import * as React from 'react';
-import { useContext } from 'react';
 import { ConfigContext } from '../config-provider';
 import { FormItemInputContext } from '../form/context';
 import warning from '../_util/warning';
@@ -65,8 +64,8 @@ const InternalCheckbox: React.ForwardRefRenderFunction<HTMLInputElement, Checkbo
 ) => {
   const { getPrefixCls, direction } = React.useContext(ConfigContext);
   const checkboxGroup = React.useContext(GroupContext);
-  const { isFormItemInput } = useContext(FormItemInputContext);
-  const contextDisabled = useContext(DisabledContext);
+  const { isFormItemInput } = React.useContext(FormItemInputContext);
+  const contextDisabled = React.useContext(DisabledContext);
   const mergedDisabled = (checkboxGroup?.disabled || disabled) ?? contextDisabled;
 
   const prevValue = React.useRef(restProps.value);
diff --git a/components/checkbox/index.en-US.md b/components/checkbox/index.en-US.md
index 625689e5e9b5..947328a2586c 100644
--- a/components/checkbox/index.en-US.md
+++ b/components/checkbox/index.en-US.md
@@ -44,11 +44,11 @@ Checkbox component.
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| defaultValue | Default selected value | string\[] | \[] |  |
+| defaultValue | Default selected value | (string \| number)\[] | \[] |  |
 | disabled | If disable all checkboxes | boolean | false |  |
 | name | The `name` property of all `input[type="checkbox"]` children | string | - |  |
 | options | Specifies options | string\[] \| number\[] \| Option\[] | \[] |  |
-| value | Used for setting the currently selected value | string\[] | \[] |  |
+| value | Used for setting the currently selected value | (string \| number)\[] | \[] |  |
 | onChange | The callback function that is triggered when the state changes | function(checkedValue) | - |  |
 
 ### Methods
diff --git a/components/checkbox/index.zh-CN.md b/components/checkbox/index.zh-CN.md
index 2b337893553d..c0ceaf5101d5 100644
--- a/components/checkbox/index.zh-CN.md
+++ b/components/checkbox/index.zh-CN.md
@@ -32,24 +32,24 @@ demo:
 
 #### Checkbox
 
-| 参数           | 说明                                    | 类型              | 默认值 | 版本 |
-| -------------- | --------------------------------------- | ----------------- | ------ | ---- |
-| autoFocus      | 自动获取焦点                            | boolean           | false  |      |
-| checked        | 指定当前是否选中                        | boolean           | false  |      |
-| defaultChecked | 初始是否选中                            | boolean           | false  |      |
-| disabled       | 失效状态                                | boolean           | false  |      |
-| indeterminate  | 设置 indeterminate 状态，只负责样式控制 | boolean           | false  |      |
-| onChange       | 变化时的回调函数                        | function(e: CheckboxChangeEvent) | -      |      |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| autoFocus | 自动获取焦点 | boolean | false |  |
+| checked | 指定当前是否选中 | boolean | false |  |
+| defaultChecked | 初始是否选中 | boolean | false |  |
+| disabled | 失效状态 | boolean | false |  |
+| indeterminate | 设置 indeterminate 状态，只负责样式控制 | boolean | false |  |
+| onChange | 变化时的回调函数 | function(e: CheckboxChangeEvent) | - |  |
 
 #### Checkbox Group
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| defaultValue | 默认选中的选项 | string\[] | \[] |  |
+| defaultValue | 默认选中的选项 | (string \| number)\[] | \[] |  |
 | disabled | 整组失效 | boolean | false |  |
 | name | CheckboxGroup 下所有 `input[type="checkbox"]` 的 `name` 属性 | string | - |  |
 | options | 指定可选项 | string\[] \| number\[] \| Option\[] | \[] |  |
-| value | 指定选中的选项 | string\[] | \[] |  |
+| value | 指定选中的选项 | (string \| number)\[] | \[] |  |
 | onChange | 变化时的回调函数 | function(checkedValue) | - |  |
 
 ##### Option
diff --git a/components/form/FormItem/index.tsx b/components/form/FormItem/index.tsx
index 06a7b47b772c..21bd7061fcf6 100644
--- a/components/form/FormItem/index.tsx
+++ b/components/form/FormItem/index.tsx
@@ -6,7 +6,6 @@ import type { Meta, NamePath } from 'rc-field-form/lib/interface';
 import useState from 'rc-util/lib/hooks/useState';
 import { supportRef } from 'rc-util/lib/ref';
 import * as React from 'react';
-import { useContext } from 'react';
 import useFormItemStatus from '../hooks/useFormItemStatus';
 import { ConfigContext } from '../../config-provider';
 import { cloneElement, isValidElement } from '../../_util/reactNode';
@@ -107,12 +106,12 @@ function InternalFormItem<Values = any>(props: FormItemProps<Values>): React.Rea
     validateTrigger,
     hidden,
   } = props;
-  const { getPrefixCls } = useContext(ConfigContext);
-  const { name: formName } = useContext(FormContext);
+  const { getPrefixCls } = React.useContext(ConfigContext);
+  const { name: formName } = React.useContext(FormContext);
   const isRenderProps = typeof children === 'function';
-  const notifyParentMetaChange = useContext(NoStyleItemContext);
+  const notifyParentMetaChange = React.useContext(NoStyleItemContext);
 
-  const { validateTrigger: contextValidateTrigger } = useContext(FieldContext);
+  const { validateTrigger: contextValidateTrigger } = React.useContext(FieldContext);
   const mergedValidateTrigger =
     validateTrigger !== undefined ? validateTrigger : contextValidateTrigger;
 
diff --git a/components/image/index.tsx b/components/image/index.tsx
index 9569a3556dca..8db311f4233a 100644
--- a/components/image/index.tsx
+++ b/components/image/index.tsx
@@ -2,7 +2,6 @@ import EyeOutlined from '@ant-design/icons/EyeOutlined';
 import classNames from 'classnames';
 import RcImage, { type ImageProps } from 'rc-image';
 import * as React from 'react';
-import { useContext } from 'react';
 import { ConfigContext } from '../config-provider';
 import defaultLocale from '../locale/en_US';
 import { getTransitionName } from '../_util/motion';
@@ -24,7 +23,7 @@ const Image: CompositionImage<ImageProps> = ({
     getPrefixCls,
     locale: contextLocale = defaultLocale,
     getPopupContainer: getContextPopupContainer,
-  } = useContext(ConfigContext);
+  } = React.useContext(ConfigContext);
 
   const prefixCls = getPrefixCls('image', customizePrefixCls);
   const rootPrefixCls = getPrefixCls();
diff --git a/components/input-number/index.tsx b/components/input-number/index.tsx
index bf6ca7c91aa6..62c857631f4c 100644
--- a/components/input-number/index.tsx
+++ b/components/input-number/index.tsx
@@ -5,7 +5,6 @@ import type { InputNumberProps as RcInputNumberProps } from 'rc-input-number';
 import RcInputNumber from 'rc-input-number';
 import type { ValueType } from '@rc-component/mini-decimal';
 import * as React from 'react';
-import { useContext } from 'react';
 import ConfigProvider, { ConfigContext } from '../config-provider';
 import DisabledContext from '../config-provider/DisabledContext';
 import type { SizeType } from '../config-provider/SizeContext';
@@ -83,7 +82,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
     status: contextStatus,
     isFormItemInput,
     feedbackIcon,
-  } = useContext(FormItemInputContext);
+  } = React.useContext(FormItemInputContext);
   const mergedStatus = getMergedStatus(contextStatus, customStatus);
 
   const mergeSize = compactSize || customizeSize || size;
diff --git a/components/radio/radio.tsx b/components/radio/radio.tsx
index c4a8bf02fc45..85629d0af29f 100644
--- a/components/radio/radio.tsx
+++ b/components/radio/radio.tsx
@@ -2,7 +2,6 @@ import classNames from 'classnames';
 import RcCheckbox from 'rc-checkbox';
 import { composeRef } from 'rc-util/lib/ref';
 import * as React from 'react';
-import { useContext } from 'react';
 import { ConfigContext } from '../config-provider';
 import DisabledContext from '../config-provider/DisabledContext';
 import { FormItemInputContext } from '../form/context';
@@ -19,7 +18,7 @@ const InternalRadio: React.ForwardRefRenderFunction<HTMLElement, RadioProps> = (
   const { getPrefixCls, direction } = React.useContext(ConfigContext);
   const innerRef = React.useRef<HTMLElement>();
   const mergedRef = composeRef(ref, innerRef);
-  const { isFormItemInput } = useContext(FormItemInputContext);
+  const { isFormItemInput } = React.useContext(FormItemInputContext);
 
   warning(!('optionType' in props), 'Radio', '`optionType` is only support in Radio.Group.');
 
diff --git a/components/select/index.tsx b/components/select/index.tsx
index e4928cca74ed..32dec3676fc3 100755
--- a/components/select/index.tsx
+++ b/components/select/index.tsx
@@ -7,7 +7,6 @@ import type { OptionProps } from 'rc-select/lib/Option';
 import type { BaseOptionType, DefaultOptionType } from 'rc-select/lib/Select';
 import omit from 'rc-util/lib/omit';
 import * as React from 'react';
-import { useContext } from 'react';
 import { ConfigContext } from '../config-provider';
 import defaultRenderEmpty from '../config-provider/defaultRenderEmpty';
 import DisabledContext from '../config-provider/DisabledContext';
@@ -125,7 +124,7 @@ const InternalSelect = <OptionType extends BaseOptionType | DefaultOptionType =
     hasFeedback,
     isFormItemInput,
     feedbackIcon,
-  } = useContext(FormItemInputContext);
+  } = React.useContext(FormItemInputContext);
   const mergedStatus = getMergedStatus(contextStatus, customStatus);
 
   // ===================== Empty =====================
diff --git a/components/tree-select/index.tsx b/components/tree-select/index.tsx
index e1df7a9979ad..492548bd4a70 100644
--- a/components/tree-select/index.tsx
+++ b/components/tree-select/index.tsx
@@ -5,7 +5,6 @@ import RcTreeSelect, { SHOW_ALL, SHOW_CHILD, SHOW_PARENT, TreeNode } from 'rc-tr
 import type { BaseOptionType, DefaultOptionType } from 'rc-tree-select/lib/TreeSelect';
 import omit from 'rc-util/lib/omit';
 import * as React from 'react';
-import { useContext } from 'react';
 import { ConfigContext } from '../config-provider';
 import defaultRenderEmpty from '../config-provider/defaultRenderEmpty';
 import DisabledContext from '../config-provider/DisabledContext';
@@ -143,7 +142,7 @@ const InternalTreeSelect = <OptionType extends BaseOptionType | DefaultOptionTyp
     hasFeedback,
     isFormItemInput,
     feedbackIcon,
-  } = useContext(FormItemInputContext);
+  } = React.useContext(FormItemInputContext);
   const mergedStatus = getMergedStatus(contextStatus, customStatus);
 
   // ===================== Icons =====================

From 7b3adcb5ae745c1177be7df68cb047512ab73f7c Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Tue, 6 Dec 2022 23:14:30 +0800
Subject: [PATCH 25/41] fix: wireframe style for popconfirm (#39313)

* fix: wireframe style for popconfirm

* chore: add demos
---
 .../__snapshots__/components.test.tsx.snap    |   606 +-
 .../__snapshots__/index.test.tsx.snap         | 13734 ++++++++--------
 .../__snapshots__/demo-extend.test.ts.snap    |   242 +
 .../__tests__/__snapshots__/demo.test.ts.snap |   242 +
 components/modal/demo/wireframe.md            |     7 +
 components/modal/demo/wireframe.tsx           |    21 +
 components/modal/index.en-US.md               |     3 +-
 components/modal/index.zh-CN.md               |     3 +-
 .../__snapshots__/demo-extend.test.ts.snap    |   715 +
 .../__tests__/__snapshots__/demo.test.ts.snap |   483 +
 components/pagination/demo/wireframe.md       |     7 +
 components/pagination/demo/wireframe.tsx      |    12 +
 components/pagination/index.en-US.md          |     1 +
 components/pagination/index.zh-CN.md          |     1 +
 components/popconfirm/PurePanel.tsx           |     5 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  1875 ++-
 .../__tests__/__snapshots__/demo.test.ts.snap |   317 +-
 .../__snapshots__/index.test.tsx.snap         |     6 +-
 components/popconfirm/demo/wireframe.md       |     7 +
 components/popconfirm/demo/wireframe.tsx      |    13 +
 components/popconfirm/index.en-US.md          |     1 +
 components/popconfirm/index.tsx               |     6 +-
 components/popconfirm/index.zh-CN.md          |     1 +
 .../__snapshots__/demo-extend.test.ts.snap    |    73 +
 .../__tests__/__snapshots__/demo.test.ts.snap |    73 +
 components/popover/demo/wireframe.md          |     7 +
 components/popover/demo/wireframe.tsx         |    25 +
 components/popover/index.en-US.md             |     1 +
 components/popover/index.tsx                  |     5 +-
 components/popover/index.zh-CN.md             |     1 +
 .../__snapshots__/demo-extend.test.ts.snap    |   172 +
 .../__tests__/__snapshots__/demo.test.ts.snap |   172 +
 components/radio/demo/wireframe.md            |     7 +
 components/radio/demo/wireframe.tsx           |    22 +
 components/radio/index.en-US.md               |     3 +-
 components/radio/index.zh-CN.md               |     3 +-
 .../__snapshots__/demo-extend.test.ts.snap    |   270 +-
 .../__snapshots__/demo-extend.test.ts.snap    |   133 +
 .../__tests__/__snapshots__/demo.test.ts.snap |   133 +
 components/steps/demo/wireframe.md            |     7 +
 components/steps/demo/wireframe.tsx           |    28 +
 components/steps/index.en-US.md               |     1 +
 components/steps/index.zh-CN.md               |     1 +
 .../__snapshots__/demo-extend.test.ts.snap    |   176 +-
 .../__snapshots__/demo-extend.test.ts.snap    |    67 +
 .../__tests__/__snapshots__/demo.test.ts.snap |    67 +
 components/timeline/demo/wireframe.md         |     7 +
 components/timeline/demo/wireframe.tsx        |    15 +
 components/timeline/index.en-US.md            |     1 +
 components/timeline/index.zh-CN.md            |     1 +
 50 files changed, 11634 insertions(+), 8145 deletions(-)
 create mode 100644 components/modal/demo/wireframe.md
 create mode 100644 components/modal/demo/wireframe.tsx
 create mode 100644 components/pagination/demo/wireframe.md
 create mode 100644 components/pagination/demo/wireframe.tsx
 create mode 100644 components/popconfirm/demo/wireframe.md
 create mode 100644 components/popconfirm/demo/wireframe.tsx
 create mode 100644 components/popover/demo/wireframe.md
 create mode 100644 components/popover/demo/wireframe.tsx
 create mode 100644 components/radio/demo/wireframe.md
 create mode 100644 components/radio/demo/wireframe.tsx
 create mode 100644 components/steps/demo/wireframe.md
 create mode 100644 components/steps/demo/wireframe.tsx
 create mode 100644 components/timeline/demo/wireframe.md
 create mode 100644 components/timeline/demo/wireframe.tsx

diff --git a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap
index ff54c0429e9f..78438a96bc86 100644
--- a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap
+++ b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap
@@ -20960,57 +20960,61 @@ exports[`ConfigProvider components Popconfirm configProvider 1`] = `
           role="tooltip"
         >
           <div
-            class="config-popconfirm-inner-content"
+            class="config-popover-inner-content"
           >
             <div
-              class="config-popconfirm-message"
+              class="config-popconfirm-inner-content"
             >
-              <span
-                class="config-popconfirm-message-icon"
+              <div
+                class="config-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="config-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
                   >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="config-popconfirm-message-title"
+                />
+              </div>
               <div
-                class="config-popconfirm-message-title"
-              />
-            </div>
-            <div
-              class="config-popconfirm-buttons"
-            >
-              <button
-                class="config-btn config-btn-default config-btn-sm"
-                type="button"
+                class="config-popconfirm-buttons"
               >
-                <span>
-                  Cancel
-                </span>
-              </button>
-              <button
-                class="config-btn config-btn-primary config-btn-sm"
-                type="button"
-              >
-                <span>
-                  OK
-                </span>
-              </button>
+                <button
+                  class="config-btn config-btn-default config-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Cancel
+                  </span>
+                </button>
+                <button
+                  class="config-btn config-btn-primary config-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    OK
+                  </span>
+                </button>
+              </div>
             </div>
           </div>
         </div>
@@ -21047,59 +21051,63 @@ exports[`ConfigProvider components Popconfirm configProvider componentDisabled 1
           role="tooltip"
         >
           <div
-            class="config-popconfirm-inner-content"
+            class="config-popover-inner-content"
           >
             <div
-              class="config-popconfirm-message"
+              class="config-popconfirm-inner-content"
             >
-              <span
-                class="config-popconfirm-message-icon"
+              <div
+                class="config-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="config-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
                   >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="config-popconfirm-message-title"
+                />
+              </div>
               <div
-                class="config-popconfirm-message-title"
-              />
-            </div>
-            <div
-              class="config-popconfirm-buttons"
-            >
-              <button
-                class="config-btn config-btn-default config-btn-sm"
-                disabled=""
-                type="button"
-              >
-                <span>
-                  Cancel
-                </span>
-              </button>
-              <button
-                class="config-btn config-btn-primary config-btn-sm"
-                disabled=""
-                type="button"
+                class="config-popconfirm-buttons"
               >
-                <span>
-                  OK
-                </span>
-              </button>
+                <button
+                  class="config-btn config-btn-default config-btn-sm"
+                  disabled=""
+                  type="button"
+                >
+                  <span>
+                    Cancel
+                  </span>
+                </button>
+                <button
+                  class="config-btn config-btn-primary config-btn-sm"
+                  disabled=""
+                  type="button"
+                >
+                  <span>
+                    OK
+                  </span>
+                </button>
+              </div>
             </div>
           </div>
         </div>
@@ -21136,57 +21144,61 @@ exports[`ConfigProvider components Popconfirm configProvider componentSize large
           role="tooltip"
         >
           <div
-            class="config-popconfirm-inner-content"
+            class="config-popover-inner-content"
           >
             <div
-              class="config-popconfirm-message"
+              class="config-popconfirm-inner-content"
             >
-              <span
-                class="config-popconfirm-message-icon"
+              <div
+                class="config-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="config-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
                   >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="config-popconfirm-message-title"
+                />
+              </div>
               <div
-                class="config-popconfirm-message-title"
-              />
-            </div>
-            <div
-              class="config-popconfirm-buttons"
-            >
-              <button
-                class="config-btn config-btn-default config-btn-sm"
-                type="button"
-              >
-                <span>
-                  Cancel
-                </span>
-              </button>
-              <button
-                class="config-btn config-btn-primary config-btn-sm"
-                type="button"
+                class="config-popconfirm-buttons"
               >
-                <span>
-                  OK
-                </span>
-              </button>
+                <button
+                  class="config-btn config-btn-default config-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Cancel
+                  </span>
+                </button>
+                <button
+                  class="config-btn config-btn-primary config-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    OK
+                  </span>
+                </button>
+              </div>
             </div>
           </div>
         </div>
@@ -21223,57 +21235,61 @@ exports[`ConfigProvider components Popconfirm configProvider componentSize middl
           role="tooltip"
         >
           <div
-            class="config-popconfirm-inner-content"
+            class="config-popover-inner-content"
           >
             <div
-              class="config-popconfirm-message"
+              class="config-popconfirm-inner-content"
             >
-              <span
-                class="config-popconfirm-message-icon"
+              <div
+                class="config-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="config-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
                   >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="config-popconfirm-message-title"
+                />
+              </div>
               <div
-                class="config-popconfirm-message-title"
-              />
-            </div>
-            <div
-              class="config-popconfirm-buttons"
-            >
-              <button
-                class="config-btn config-btn-default config-btn-sm"
-                type="button"
-              >
-                <span>
-                  Cancel
-                </span>
-              </button>
-              <button
-                class="config-btn config-btn-primary config-btn-sm"
-                type="button"
+                class="config-popconfirm-buttons"
               >
-                <span>
-                  OK
-                </span>
-              </button>
+                <button
+                  class="config-btn config-btn-default config-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Cancel
+                  </span>
+                </button>
+                <button
+                  class="config-btn config-btn-primary config-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    OK
+                  </span>
+                </button>
+              </div>
             </div>
           </div>
         </div>
@@ -21310,57 +21326,61 @@ exports[`ConfigProvider components Popconfirm configProvider virtual and dropdow
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
             >
-              <span
-                class="ant-popconfirm-message-icon"
+              <div
+                class="ant-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="ant-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
                   >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                />
+              </div>
               <div
-                class="ant-popconfirm-message-title"
-              />
-            </div>
-            <div
-              class="ant-popconfirm-buttons"
-            >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Cancel
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
+                class="ant-popconfirm-buttons"
               >
-                <span>
-                  OK
-                </span>
-              </button>
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Cancel
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    OK
+                  </span>
+                </button>
+              </div>
             </div>
           </div>
         </div>
@@ -21397,57 +21417,61 @@ exports[`ConfigProvider components Popconfirm normal 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
             >
-              <span
-                class="ant-popconfirm-message-icon"
+              <div
+                class="ant-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="ant-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
                   >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                />
+              </div>
               <div
-                class="ant-popconfirm-message-title"
-              />
-            </div>
-            <div
-              class="ant-popconfirm-buttons"
-            >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Cancel
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
+                class="ant-popconfirm-buttons"
               >
-                <span>
-                  OK
-                </span>
-              </button>
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Cancel
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    OK
+                  </span>
+                </button>
+              </div>
             </div>
           </div>
         </div>
@@ -21484,57 +21508,61 @@ exports[`ConfigProvider components Popconfirm prefixCls 1`] = `
           role="tooltip"
         >
           <div
-            class="prefix-Popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="prefix-Popconfirm-message"
+              class="prefix-Popconfirm-inner-content"
             >
-              <span
-                class="prefix-Popconfirm-message-icon"
+              <div
+                class="prefix-Popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="prefix-Popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
                   >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="prefix-Popconfirm-message-title"
+                />
+              </div>
               <div
-                class="prefix-Popconfirm-message-title"
-              />
-            </div>
-            <div
-              class="prefix-Popconfirm-buttons"
-            >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Cancel
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
+                class="prefix-Popconfirm-buttons"
               >
-                <span>
-                  OK
-                </span>
-              </button>
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Cancel
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    OK
+                  </span>
+                </button>
+              </div>
             </div>
           </div>
         </div>
diff --git a/components/locale-provider/__tests__/__snapshots__/index.test.tsx.snap b/components/locale-provider/__tests__/__snapshots__/index.test.tsx.snap
index 6873c55febbc..5f2b78a01394 100644
--- a/components/locale-provider/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/locale-provider/__tests__/__snapshots__/index.test.tsx.snap
@@ -5342,60 +5342,64 @@ exports[`Locale Provider should display the text as ar 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
             >
-              <span
-                class="ant-popconfirm-message-icon"
+              <div
+                class="ant-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="ant-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
               <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-buttons"
               >
-                Question?
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    إلغاء
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    تأكيد
+                  </span>
+                </button>
               </div>
             </div>
-            <div
-              class="ant-popconfirm-buttons"
-            >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  إلغاء
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  تأكيد
-                </span>
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -10445,22 +10449,177 @@ exports[`Locale Provider should display the text as az 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
+            >
+              <div
+                class="ant-popconfirm-message"
+              >
+                <span
+                  class="ant-popconfirm-message-icon"
+                >
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
+              <div
+                class="ant-popconfirm-buttons"
+              >
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Ləğv et
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Bəli
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-transfer"
+  >
+    <div
+      class="ant-transfer-list"
+    >
+      <div
+        class="ant-transfer-list-header"
+      >
+        <label
+          class="ant-checkbox-wrapper ant-transfer-list-checkbox"
+        >
+          <span
+            class="ant-checkbox"
+          >
+            <input
+              class="ant-checkbox-input"
+              type="checkbox"
+              value=""
+            />
+            <span
+              class="ant-checkbox-inner"
+            />
+          </span>
+        </label>
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+        <span
+          class="ant-transfer-list-header-selected"
+        >
+          0
+          item
+        </span>
+        <span
+          class="ant-transfer-list-header-title"
+        />
+      </div>
+      <div
+        class="ant-transfer-list-body ant-transfer-list-body-with-search"
+      >
+        <div
+          class="ant-transfer-list-body-search-wrapper"
+        >
+          <span
+            class="ant-input-affix-wrapper ant-transfer-list-search"
+          >
+            <span
+              class="ant-input-prefix"
             >
               <span
-                class="ant-popconfirm-message-icon"
+                aria-label="search"
+                class="anticon anticon-search"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="search"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+                  />
+                </svg>
+              </span>
+            </span>
+            <input
+              class="ant-input"
+              placeholder="Burada axtar"
+              type="text"
+              value=""
+            />
+            <span
+              class="ant-input-suffix"
+            >
+              <span
+                class="ant-input-clear-icon ant-input-clear-icon-hidden"
+                role="button"
+                tabindex="-1"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
+                  aria-label="close-circle"
+                  class="anticon anticon-close-circle"
                   role="img"
                 >
                   <svg
                     aria-hidden="true"
-                    data-icon="exclamation-circle"
+                    data-icon="close-circle"
                     fill="currentColor"
                     focusable="false"
                     height="1em"
@@ -10468,270 +10627,119 @@ exports[`Locale Provider should display the text as az 1`] = `
                     width="1em"
                   >
                     <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
                     />
                   </svg>
                 </span>
               </span>
-              <div
-                class="ant-popconfirm-message-title"
+            </span>
+          </span>
+        </div>
+        <div
+          class="ant-transfer-list-body-not-found"
+        >
+          <div
+            class="ant-empty ant-empty-normal ant-empty-small"
+          >
+            <div
+              class="ant-empty-image"
+            >
+              <svg
+                height="41"
+                viewBox="0 0 64 41"
+                width="64"
+                xmlns="http://www.w3.org/2000/svg"
               >
-                Question?
-              </div>
+                <g
+                  fill="none"
+                  fill-rule="evenodd"
+                  transform="translate(0 1)"
+                >
+                  <ellipse
+                    cx="32"
+                    cy="33"
+                    fill="#f5f5f5"
+                    rx="32"
+                    ry="7"
+                  />
+                  <g
+                    fill-rule="nonzero"
+                    stroke="#d9d9d9"
+                  >
+                    <path
+                      d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
+                    />
+                    <path
+                      d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
+                      fill="#fafafa"
+                    />
+                  </g>
+                </g>
+              </svg>
             </div>
             <div
-              class="ant-popconfirm-buttons"
+              class="ant-empty-description"
             >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Ləğv et
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Bəli
-                </span>
-              </button>
+              No data
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-  <div
-    class="ant-transfer"
-  >
-    <div
-      class="ant-transfer-list"
-    >
-      <div
-        class="ant-transfer-list-header"
-      >
-        <label
-          class="ant-checkbox-wrapper ant-transfer-list-checkbox"
-        >
-          <span
-            class="ant-checkbox"
-          >
-            <input
-              class="ant-checkbox-input"
-              type="checkbox"
-              value=""
-            />
-            <span
-              class="ant-checkbox-inner"
-            />
-          </span>
-        </label>
-        <span
-          aria-label="down"
-          class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="down"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-            />
-          </svg>
-        </span>
-        <span
-          class="ant-transfer-list-header-selected"
-        >
-          0
-          item
-        </span>
-        <span
-          class="ant-transfer-list-header-title"
-        />
-      </div>
-      <div
-        class="ant-transfer-list-body ant-transfer-list-body-with-search"
-      >
-        <div
-          class="ant-transfer-list-body-search-wrapper"
-        >
-          <span
-            class="ant-input-affix-wrapper ant-transfer-list-search"
-          >
-            <span
-              class="ant-input-prefix"
-            >
-              <span
-                aria-label="search"
-                class="anticon anticon-search"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="search"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
-                  />
-                </svg>
-              </span>
-            </span>
-            <input
-              class="ant-input"
-              placeholder="Burada axtar"
-              type="text"
-              value=""
-            />
-            <span
-              class="ant-input-suffix"
-            >
-              <span
-                class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
-              >
-                <span
-                  aria-label="close-circle"
-                  class="anticon anticon-close-circle"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="close-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </span>
-          </span>
-        </div>
-        <div
-          class="ant-transfer-list-body-not-found"
-        >
-          <div
-            class="ant-empty ant-empty-normal ant-empty-small"
-          >
-            <div
-              class="ant-empty-image"
-            >
-              <svg
-                height="41"
-                viewBox="0 0 64 41"
-                width="64"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <g
-                  fill="none"
-                  fill-rule="evenodd"
-                  transform="translate(0 1)"
-                >
-                  <ellipse
-                    cx="32"
-                    cy="33"
-                    fill="#f5f5f5"
-                    rx="32"
-                    ry="7"
-                  />
-                  <g
-                    fill-rule="nonzero"
-                    stroke="#d9d9d9"
-                  >
-                    <path
-                      d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
-                    />
-                    <path
-                      d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
-                      fill="#fafafa"
-                    />
-                  </g>
-                </g>
-              </svg>
-            </div>
-            <div
-              class="ant-empty-description"
-            >
-              No data
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="ant-transfer-operation"
-    >
-      <button
-        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
-        disabled=""
-        type="button"
-      >
-        <span
-          aria-label="right"
-          class="anticon anticon-right"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="right"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-            />
-          </svg>
-        </span>
-      </button>
-      <button
-        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
-        disabled=""
-        type="button"
-      >
-        <span
-          aria-label="left"
-          class="anticon anticon-left"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="left"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-            />
-          </svg>
-        </span>
-      </button>
-    </div>
+    <div
+      class="ant-transfer-operation"
+    >
+      <button
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
+        disabled=""
+        type="button"
+      >
+        <span
+          aria-label="right"
+          class="anticon anticon-right"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="right"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+            />
+          </svg>
+        </span>
+      </button>
+      <button
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
+        disabled=""
+        type="button"
+      >
+        <span
+          aria-label="left"
+          class="anticon anticon-left"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="left"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
     <div
       class="ant-transfer-list"
     >
@@ -15548,60 +15556,64 @@ exports[`Locale Provider should display the text as bg 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
             >
-              <span
-                class="ant-popconfirm-message-icon"
+              <div
+                class="ant-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="ant-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
               <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-buttons"
               >
-                Question?
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Отказ
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Добре
+                  </span>
+                </button>
               </div>
             </div>
-            <div
-              class="ant-popconfirm-buttons"
-            >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Отказ
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Добре
-                </span>
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -20651,60 +20663,64 @@ exports[`Locale Provider should display the text as bn-bd 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
             >
-              <span
-                class="ant-popconfirm-message-icon"
+              <div
+                class="ant-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="ant-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
               <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-buttons"
               >
-                Question?
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    বাতিল
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    ঠিক
+                  </span>
+                </button>
               </div>
             </div>
-            <div
-              class="ant-popconfirm-buttons"
-            >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  বাতিল
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  ঠিক
-                </span>
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -25754,22 +25770,177 @@ exports[`Locale Provider should display the text as by 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
+            >
+              <div
+                class="ant-popconfirm-message"
+              >
+                <span
+                  class="ant-popconfirm-message-icon"
+                >
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
+              <div
+                class="ant-popconfirm-buttons"
+              >
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Адмена
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    OK
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-transfer"
+  >
+    <div
+      class="ant-transfer-list"
+    >
+      <div
+        class="ant-transfer-list-header"
+      >
+        <label
+          class="ant-checkbox-wrapper ant-transfer-list-checkbox"
+        >
+          <span
+            class="ant-checkbox"
+          >
+            <input
+              class="ant-checkbox-input"
+              type="checkbox"
+              value=""
+            />
+            <span
+              class="ant-checkbox-inner"
+            />
+          </span>
+        </label>
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+        <span
+          class="ant-transfer-list-header-selected"
+        >
+          0
+          элем.
+        </span>
+        <span
+          class="ant-transfer-list-header-title"
+        />
+      </div>
+      <div
+        class="ant-transfer-list-body ant-transfer-list-body-with-search"
+      >
+        <div
+          class="ant-transfer-list-body-search-wrapper"
+        >
+          <span
+            class="ant-input-affix-wrapper ant-transfer-list-search"
+          >
+            <span
+              class="ant-input-prefix"
             >
               <span
-                class="ant-popconfirm-message-icon"
+                aria-label="search"
+                class="anticon anticon-search"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="search"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+                  />
+                </svg>
+              </span>
+            </span>
+            <input
+              class="ant-input"
+              placeholder="Пошук"
+              type="text"
+              value=""
+            />
+            <span
+              class="ant-input-suffix"
+            >
+              <span
+                class="ant-input-clear-icon ant-input-clear-icon-hidden"
+                role="button"
+                tabindex="-1"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
+                  aria-label="close-circle"
+                  class="anticon anticon-close-circle"
                   role="img"
                 >
                   <svg
                     aria-hidden="true"
-                    data-icon="exclamation-circle"
+                    data-icon="close-circle"
                     fill="currentColor"
                     focusable="false"
                     height="1em"
@@ -25777,270 +25948,119 @@ exports[`Locale Provider should display the text as by 1`] = `
                     width="1em"
                   >
                     <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
                     />
                   </svg>
                 </span>
               </span>
-              <div
-                class="ant-popconfirm-message-title"
+            </span>
+          </span>
+        </div>
+        <div
+          class="ant-transfer-list-body-not-found"
+        >
+          <div
+            class="ant-empty ant-empty-normal ant-empty-small"
+          >
+            <div
+              class="ant-empty-image"
+            >
+              <svg
+                height="41"
+                viewBox="0 0 64 41"
+                width="64"
+                xmlns="http://www.w3.org/2000/svg"
               >
-                Question?
-              </div>
+                <g
+                  fill="none"
+                  fill-rule="evenodd"
+                  transform="translate(0 1)"
+                >
+                  <ellipse
+                    cx="32"
+                    cy="33"
+                    fill="#f5f5f5"
+                    rx="32"
+                    ry="7"
+                  />
+                  <g
+                    fill-rule="nonzero"
+                    stroke="#d9d9d9"
+                  >
+                    <path
+                      d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
+                    />
+                    <path
+                      d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
+                      fill="#fafafa"
+                    />
+                  </g>
+                </g>
+              </svg>
             </div>
             <div
-              class="ant-popconfirm-buttons"
+              class="ant-empty-description"
             >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Адмена
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  OK
-                </span>
-              </button>
+              Няма даных
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-  <div
-    class="ant-transfer"
-  >
-    <div
-      class="ant-transfer-list"
-    >
-      <div
-        class="ant-transfer-list-header"
-      >
-        <label
-          class="ant-checkbox-wrapper ant-transfer-list-checkbox"
-        >
-          <span
-            class="ant-checkbox"
-          >
-            <input
-              class="ant-checkbox-input"
-              type="checkbox"
-              value=""
-            />
-            <span
-              class="ant-checkbox-inner"
-            />
-          </span>
-        </label>
-        <span
-          aria-label="down"
-          class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="down"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-            />
-          </svg>
-        </span>
-        <span
-          class="ant-transfer-list-header-selected"
-        >
-          0
-          элем.
-        </span>
-        <span
-          class="ant-transfer-list-header-title"
-        />
-      </div>
-      <div
-        class="ant-transfer-list-body ant-transfer-list-body-with-search"
-      >
-        <div
-          class="ant-transfer-list-body-search-wrapper"
-        >
-          <span
-            class="ant-input-affix-wrapper ant-transfer-list-search"
-          >
-            <span
-              class="ant-input-prefix"
-            >
-              <span
-                aria-label="search"
-                class="anticon anticon-search"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="search"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
-                  />
-                </svg>
-              </span>
-            </span>
-            <input
-              class="ant-input"
-              placeholder="Пошук"
-              type="text"
-              value=""
-            />
-            <span
-              class="ant-input-suffix"
-            >
-              <span
-                class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
-              >
-                <span
-                  aria-label="close-circle"
-                  class="anticon anticon-close-circle"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="close-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </span>
-          </span>
-        </div>
-        <div
-          class="ant-transfer-list-body-not-found"
-        >
-          <div
-            class="ant-empty ant-empty-normal ant-empty-small"
-          >
-            <div
-              class="ant-empty-image"
-            >
-              <svg
-                height="41"
-                viewBox="0 0 64 41"
-                width="64"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <g
-                  fill="none"
-                  fill-rule="evenodd"
-                  transform="translate(0 1)"
-                >
-                  <ellipse
-                    cx="32"
-                    cy="33"
-                    fill="#f5f5f5"
-                    rx="32"
-                    ry="7"
-                  />
-                  <g
-                    fill-rule="nonzero"
-                    stroke="#d9d9d9"
-                  >
-                    <path
-                      d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
-                    />
-                    <path
-                      d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
-                      fill="#fafafa"
-                    />
-                  </g>
-                </g>
-              </svg>
-            </div>
-            <div
-              class="ant-empty-description"
-            >
-              Няма даных
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="ant-transfer-operation"
-    >
-      <button
-        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
-        disabled=""
-        type="button"
-      >
-        <span
-          aria-label="right"
-          class="anticon anticon-right"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="right"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-            />
-          </svg>
-        </span>
-      </button>
-      <button
-        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
-        disabled=""
-        type="button"
-      >
-        <span
-          aria-label="left"
-          class="anticon anticon-left"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="left"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-            />
-          </svg>
-        </span>
-      </button>
-    </div>
+    <div
+      class="ant-transfer-operation"
+    >
+      <button
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
+        disabled=""
+        type="button"
+      >
+        <span
+          aria-label="right"
+          class="anticon anticon-right"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="right"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+            />
+          </svg>
+        </span>
+      </button>
+      <button
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
+        disabled=""
+        type="button"
+      >
+        <span
+          aria-label="left"
+          class="anticon anticon-left"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="left"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
     <div
       class="ant-transfer-list"
     >
@@ -30857,60 +30877,64 @@ exports[`Locale Provider should display the text as ca 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
             >
-              <span
-                class="ant-popconfirm-message-icon"
+              <div
+                class="ant-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="ant-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
               <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-buttons"
               >
-                Question?
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Cancel·lar
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    D’acord
+                  </span>
+                </button>
               </div>
             </div>
-            <div
-              class="ant-popconfirm-buttons"
-            >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Cancel·lar
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  D’acord
-                </span>
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -35960,60 +35984,64 @@ exports[`Locale Provider should display the text as cs 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
             >
-              <span
-                class="ant-popconfirm-message-icon"
+              <div
+                class="ant-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="ant-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
               <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-buttons"
               >
-                Question?
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Zrušit
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    OK
+                  </span>
+                </button>
               </div>
             </div>
-            <div
-              class="ant-popconfirm-buttons"
-            >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Zrušit
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  OK
-                </span>
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -41063,22 +41091,177 @@ exports[`Locale Provider should display the text as da 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
+            >
+              <div
+                class="ant-popconfirm-message"
+              >
+                <span
+                  class="ant-popconfirm-message-icon"
+                >
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
+              <div
+                class="ant-popconfirm-buttons"
+              >
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Afbryd
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    OK
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-transfer"
+  >
+    <div
+      class="ant-transfer-list"
+    >
+      <div
+        class="ant-transfer-list-header"
+      >
+        <label
+          class="ant-checkbox-wrapper ant-transfer-list-checkbox"
+        >
+          <span
+            class="ant-checkbox"
+          >
+            <input
+              class="ant-checkbox-input"
+              type="checkbox"
+              value=""
+            />
+            <span
+              class="ant-checkbox-inner"
+            />
+          </span>
+        </label>
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+        <span
+          class="ant-transfer-list-header-selected"
+        >
+          0
+          element
+        </span>
+        <span
+          class="ant-transfer-list-header-title"
+        />
+      </div>
+      <div
+        class="ant-transfer-list-body ant-transfer-list-body-with-search"
+      >
+        <div
+          class="ant-transfer-list-body-search-wrapper"
+        >
+          <span
+            class="ant-input-affix-wrapper ant-transfer-list-search"
+          >
+            <span
+              class="ant-input-prefix"
             >
               <span
-                class="ant-popconfirm-message-icon"
+                aria-label="search"
+                class="anticon anticon-search"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="search"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+                  />
+                </svg>
+              </span>
+            </span>
+            <input
+              class="ant-input"
+              placeholder="Søg her"
+              type="text"
+              value=""
+            />
+            <span
+              class="ant-input-suffix"
+            >
+              <span
+                class="ant-input-clear-icon ant-input-clear-icon-hidden"
+                role="button"
+                tabindex="-1"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
+                  aria-label="close-circle"
+                  class="anticon anticon-close-circle"
                   role="img"
                 >
                   <svg
                     aria-hidden="true"
-                    data-icon="exclamation-circle"
+                    data-icon="close-circle"
                     fill="currentColor"
                     focusable="false"
                     height="1em"
@@ -41086,270 +41269,119 @@ exports[`Locale Provider should display the text as da 1`] = `
                     width="1em"
                   >
                     <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
                     />
                   </svg>
                 </span>
               </span>
-              <div
-                class="ant-popconfirm-message-title"
+            </span>
+          </span>
+        </div>
+        <div
+          class="ant-transfer-list-body-not-found"
+        >
+          <div
+            class="ant-empty ant-empty-normal ant-empty-small"
+          >
+            <div
+              class="ant-empty-image"
+            >
+              <svg
+                height="41"
+                viewBox="0 0 64 41"
+                width="64"
+                xmlns="http://www.w3.org/2000/svg"
               >
-                Question?
-              </div>
+                <g
+                  fill="none"
+                  fill-rule="evenodd"
+                  transform="translate(0 1)"
+                >
+                  <ellipse
+                    cx="32"
+                    cy="33"
+                    fill="#f5f5f5"
+                    rx="32"
+                    ry="7"
+                  />
+                  <g
+                    fill-rule="nonzero"
+                    stroke="#d9d9d9"
+                  >
+                    <path
+                      d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
+                    />
+                    <path
+                      d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
+                      fill="#fafafa"
+                    />
+                  </g>
+                </g>
+              </svg>
             </div>
             <div
-              class="ant-popconfirm-buttons"
+              class="ant-empty-description"
             >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Afbryd
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  OK
-                </span>
-              </button>
+              Ingen data
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-  <div
-    class="ant-transfer"
-  >
-    <div
-      class="ant-transfer-list"
-    >
-      <div
-        class="ant-transfer-list-header"
-      >
-        <label
-          class="ant-checkbox-wrapper ant-transfer-list-checkbox"
-        >
-          <span
-            class="ant-checkbox"
-          >
-            <input
-              class="ant-checkbox-input"
-              type="checkbox"
-              value=""
-            />
-            <span
-              class="ant-checkbox-inner"
-            />
-          </span>
-        </label>
-        <span
-          aria-label="down"
-          class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="down"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-            />
-          </svg>
-        </span>
-        <span
-          class="ant-transfer-list-header-selected"
-        >
-          0
-          element
-        </span>
-        <span
-          class="ant-transfer-list-header-title"
-        />
-      </div>
-      <div
-        class="ant-transfer-list-body ant-transfer-list-body-with-search"
-      >
-        <div
-          class="ant-transfer-list-body-search-wrapper"
-        >
-          <span
-            class="ant-input-affix-wrapper ant-transfer-list-search"
-          >
-            <span
-              class="ant-input-prefix"
-            >
-              <span
-                aria-label="search"
-                class="anticon anticon-search"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="search"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
-                  />
-                </svg>
-              </span>
-            </span>
-            <input
-              class="ant-input"
-              placeholder="Søg her"
-              type="text"
-              value=""
-            />
-            <span
-              class="ant-input-suffix"
-            >
-              <span
-                class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
-              >
-                <span
-                  aria-label="close-circle"
-                  class="anticon anticon-close-circle"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="close-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </span>
-          </span>
-        </div>
-        <div
-          class="ant-transfer-list-body-not-found"
-        >
-          <div
-            class="ant-empty ant-empty-normal ant-empty-small"
-          >
-            <div
-              class="ant-empty-image"
-            >
-              <svg
-                height="41"
-                viewBox="0 0 64 41"
-                width="64"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <g
-                  fill="none"
-                  fill-rule="evenodd"
-                  transform="translate(0 1)"
-                >
-                  <ellipse
-                    cx="32"
-                    cy="33"
-                    fill="#f5f5f5"
-                    rx="32"
-                    ry="7"
-                  />
-                  <g
-                    fill-rule="nonzero"
-                    stroke="#d9d9d9"
-                  >
-                    <path
-                      d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
-                    />
-                    <path
-                      d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
-                      fill="#fafafa"
-                    />
-                  </g>
-                </g>
-              </svg>
-            </div>
-            <div
-              class="ant-empty-description"
-            >
-              Ingen data
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="ant-transfer-operation"
-    >
-      <button
-        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
-        disabled=""
-        type="button"
-      >
-        <span
-          aria-label="right"
-          class="anticon anticon-right"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="right"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-            />
-          </svg>
-        </span>
-      </button>
-      <button
-        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
-        disabled=""
-        type="button"
-      >
-        <span
-          aria-label="left"
-          class="anticon anticon-left"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="left"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-            />
-          </svg>
-        </span>
-      </button>
-    </div>
+    <div
+      class="ant-transfer-operation"
+    >
+      <button
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
+        disabled=""
+        type="button"
+      >
+        <span
+          aria-label="right"
+          class="anticon anticon-right"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="right"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+            />
+          </svg>
+        </span>
+      </button>
+      <button
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
+        disabled=""
+        type="button"
+      >
+        <span
+          aria-label="left"
+          class="anticon anticon-left"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="left"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
     <div
       class="ant-transfer-list"
     >
@@ -46166,60 +46198,64 @@ exports[`Locale Provider should display the text as de 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
             >
-              <span
-                class="ant-popconfirm-message-icon"
+              <div
+                class="ant-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="ant-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
               <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-buttons"
               >
-                Question?
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Abbrechen
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    OK
+                  </span>
+                </button>
               </div>
             </div>
-            <div
-              class="ant-popconfirm-buttons"
-            >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Abbrechen
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  OK
-                </span>
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -51269,60 +51305,64 @@ exports[`Locale Provider should display the text as el 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
             >
-              <span
-                class="ant-popconfirm-message-icon"
+              <div
+                class="ant-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="ant-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
               <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-buttons"
               >
-                Question?
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Άκυρο
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    ΟΚ
+                  </span>
+                </button>
               </div>
             </div>
-            <div
-              class="ant-popconfirm-buttons"
-            >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Άκυρο
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  ΟΚ
-                </span>
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -56372,22 +56412,177 @@ exports[`Locale Provider should display the text as en 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
+            >
+              <div
+                class="ant-popconfirm-message"
+              >
+                <span
+                  class="ant-popconfirm-message-icon"
+                >
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
+              <div
+                class="ant-popconfirm-buttons"
+              >
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Cancel
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    OK
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-transfer"
+  >
+    <div
+      class="ant-transfer-list"
+    >
+      <div
+        class="ant-transfer-list-header"
+      >
+        <label
+          class="ant-checkbox-wrapper ant-transfer-list-checkbox"
+        >
+          <span
+            class="ant-checkbox"
+          >
+            <input
+              class="ant-checkbox-input"
+              type="checkbox"
+              value=""
+            />
+            <span
+              class="ant-checkbox-inner"
+            />
+          </span>
+        </label>
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+        <span
+          class="ant-transfer-list-header-selected"
+        >
+          0
+          item
+        </span>
+        <span
+          class="ant-transfer-list-header-title"
+        />
+      </div>
+      <div
+        class="ant-transfer-list-body ant-transfer-list-body-with-search"
+      >
+        <div
+          class="ant-transfer-list-body-search-wrapper"
+        >
+          <span
+            class="ant-input-affix-wrapper ant-transfer-list-search"
+          >
+            <span
+              class="ant-input-prefix"
             >
               <span
-                class="ant-popconfirm-message-icon"
+                aria-label="search"
+                class="anticon anticon-search"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="search"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+                  />
+                </svg>
+              </span>
+            </span>
+            <input
+              class="ant-input"
+              placeholder="Search here"
+              type="text"
+              value=""
+            />
+            <span
+              class="ant-input-suffix"
+            >
+              <span
+                class="ant-input-clear-icon ant-input-clear-icon-hidden"
+                role="button"
+                tabindex="-1"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
+                  aria-label="close-circle"
+                  class="anticon anticon-close-circle"
                   role="img"
                 >
                   <svg
                     aria-hidden="true"
-                    data-icon="exclamation-circle"
+                    data-icon="close-circle"
                     fill="currentColor"
                     focusable="false"
                     height="1em"
@@ -56395,270 +56590,119 @@ exports[`Locale Provider should display the text as en 1`] = `
                     width="1em"
                   >
                     <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
                     />
                   </svg>
                 </span>
               </span>
-              <div
-                class="ant-popconfirm-message-title"
+            </span>
+          </span>
+        </div>
+        <div
+          class="ant-transfer-list-body-not-found"
+        >
+          <div
+            class="ant-empty ant-empty-normal ant-empty-small"
+          >
+            <div
+              class="ant-empty-image"
+            >
+              <svg
+                height="41"
+                viewBox="0 0 64 41"
+                width="64"
+                xmlns="http://www.w3.org/2000/svg"
               >
-                Question?
-              </div>
+                <g
+                  fill="none"
+                  fill-rule="evenodd"
+                  transform="translate(0 1)"
+                >
+                  <ellipse
+                    cx="32"
+                    cy="33"
+                    fill="#f5f5f5"
+                    rx="32"
+                    ry="7"
+                  />
+                  <g
+                    fill-rule="nonzero"
+                    stroke="#d9d9d9"
+                  >
+                    <path
+                      d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
+                    />
+                    <path
+                      d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
+                      fill="#fafafa"
+                    />
+                  </g>
+                </g>
+              </svg>
             </div>
             <div
-              class="ant-popconfirm-buttons"
+              class="ant-empty-description"
             >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Cancel
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  OK
-                </span>
-              </button>
+              No data
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-  <div
-    class="ant-transfer"
-  >
-    <div
-      class="ant-transfer-list"
-    >
-      <div
-        class="ant-transfer-list-header"
-      >
-        <label
-          class="ant-checkbox-wrapper ant-transfer-list-checkbox"
-        >
-          <span
-            class="ant-checkbox"
-          >
-            <input
-              class="ant-checkbox-input"
-              type="checkbox"
-              value=""
-            />
-            <span
-              class="ant-checkbox-inner"
-            />
-          </span>
-        </label>
-        <span
-          aria-label="down"
-          class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="down"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-            />
-          </svg>
-        </span>
-        <span
-          class="ant-transfer-list-header-selected"
-        >
-          0
-          item
-        </span>
-        <span
-          class="ant-transfer-list-header-title"
-        />
-      </div>
-      <div
-        class="ant-transfer-list-body ant-transfer-list-body-with-search"
-      >
-        <div
-          class="ant-transfer-list-body-search-wrapper"
-        >
-          <span
-            class="ant-input-affix-wrapper ant-transfer-list-search"
-          >
-            <span
-              class="ant-input-prefix"
-            >
-              <span
-                aria-label="search"
-                class="anticon anticon-search"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="search"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
-                  />
-                </svg>
-              </span>
-            </span>
-            <input
-              class="ant-input"
-              placeholder="Search here"
-              type="text"
-              value=""
-            />
-            <span
-              class="ant-input-suffix"
-            >
-              <span
-                class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
-              >
-                <span
-                  aria-label="close-circle"
-                  class="anticon anticon-close-circle"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="close-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </span>
-          </span>
-        </div>
-        <div
-          class="ant-transfer-list-body-not-found"
-        >
-          <div
-            class="ant-empty ant-empty-normal ant-empty-small"
-          >
-            <div
-              class="ant-empty-image"
-            >
-              <svg
-                height="41"
-                viewBox="0 0 64 41"
-                width="64"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <g
-                  fill="none"
-                  fill-rule="evenodd"
-                  transform="translate(0 1)"
-                >
-                  <ellipse
-                    cx="32"
-                    cy="33"
-                    fill="#f5f5f5"
-                    rx="32"
-                    ry="7"
-                  />
-                  <g
-                    fill-rule="nonzero"
-                    stroke="#d9d9d9"
-                  >
-                    <path
-                      d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
-                    />
-                    <path
-                      d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
-                      fill="#fafafa"
-                    />
-                  </g>
-                </g>
-              </svg>
-            </div>
-            <div
-              class="ant-empty-description"
-            >
-              No data
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="ant-transfer-operation"
-    >
-      <button
-        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
-        disabled=""
-        type="button"
-      >
-        <span
-          aria-label="right"
-          class="anticon anticon-right"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="right"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-            />
-          </svg>
-        </span>
-      </button>
-      <button
-        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
-        disabled=""
-        type="button"
-      >
-        <span
-          aria-label="left"
-          class="anticon anticon-left"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="left"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-            />
-          </svg>
-        </span>
-      </button>
-    </div>
+    <div
+      class="ant-transfer-operation"
+    >
+      <button
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
+        disabled=""
+        type="button"
+      >
+        <span
+          aria-label="right"
+          class="anticon anticon-right"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="right"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+            />
+          </svg>
+        </span>
+      </button>
+      <button
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
+        disabled=""
+        type="button"
+      >
+        <span
+          aria-label="left"
+          class="anticon anticon-left"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="left"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
     <div
       class="ant-transfer-list"
     >
@@ -61475,60 +61519,64 @@ exports[`Locale Provider should display the text as en-gb 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
             >
-              <span
-                class="ant-popconfirm-message-icon"
+              <div
+                class="ant-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="ant-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
               <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-buttons"
               >
-                Question?
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Cancel
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    OK
+                  </span>
+                </button>
               </div>
             </div>
-            <div
-              class="ant-popconfirm-buttons"
-            >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Cancel
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  OK
-                </span>
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -66578,60 +66626,64 @@ exports[`Locale Provider should display the text as es 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
             >
-              <span
-                class="ant-popconfirm-message-icon"
+              <div
+                class="ant-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="ant-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
               <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-buttons"
               >
-                Question?
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Cancelar
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Aceptar
+                  </span>
+                </button>
               </div>
             </div>
-            <div
-              class="ant-popconfirm-buttons"
-            >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Cancelar
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Aceptar
-                </span>
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -71681,22 +71733,177 @@ exports[`Locale Provider should display the text as et 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
+            >
+              <div
+                class="ant-popconfirm-message"
+              >
+                <span
+                  class="ant-popconfirm-message-icon"
+                >
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
+              <div
+                class="ant-popconfirm-buttons"
+              >
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Tühista
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    OK
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-transfer"
+  >
+    <div
+      class="ant-transfer-list"
+    >
+      <div
+        class="ant-transfer-list-header"
+      >
+        <label
+          class="ant-checkbox-wrapper ant-transfer-list-checkbox"
+        >
+          <span
+            class="ant-checkbox"
+          >
+            <input
+              class="ant-checkbox-input"
+              type="checkbox"
+              value=""
+            />
+            <span
+              class="ant-checkbox-inner"
+            />
+          </span>
+        </label>
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+        <span
+          class="ant-transfer-list-header-selected"
+        >
+          0
+          kogus
+        </span>
+        <span
+          class="ant-transfer-list-header-title"
+        />
+      </div>
+      <div
+        class="ant-transfer-list-body ant-transfer-list-body-with-search"
+      >
+        <div
+          class="ant-transfer-list-body-search-wrapper"
+        >
+          <span
+            class="ant-input-affix-wrapper ant-transfer-list-search"
+          >
+            <span
+              class="ant-input-prefix"
             >
               <span
-                class="ant-popconfirm-message-icon"
+                aria-label="search"
+                class="anticon anticon-search"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="search"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+                  />
+                </svg>
+              </span>
+            </span>
+            <input
+              class="ant-input"
+              placeholder="Otsi siit"
+              type="text"
+              value=""
+            />
+            <span
+              class="ant-input-suffix"
+            >
+              <span
+                class="ant-input-clear-icon ant-input-clear-icon-hidden"
+                role="button"
+                tabindex="-1"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
+                  aria-label="close-circle"
+                  class="anticon anticon-close-circle"
                   role="img"
                 >
                   <svg
                     aria-hidden="true"
-                    data-icon="exclamation-circle"
+                    data-icon="close-circle"
                     fill="currentColor"
                     focusable="false"
                     height="1em"
@@ -71704,270 +71911,119 @@ exports[`Locale Provider should display the text as et 1`] = `
                     width="1em"
                   >
                     <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
                     />
                   </svg>
                 </span>
               </span>
-              <div
-                class="ant-popconfirm-message-title"
+            </span>
+          </span>
+        </div>
+        <div
+          class="ant-transfer-list-body-not-found"
+        >
+          <div
+            class="ant-empty ant-empty-normal ant-empty-small"
+          >
+            <div
+              class="ant-empty-image"
+            >
+              <svg
+                height="41"
+                viewBox="0 0 64 41"
+                width="64"
+                xmlns="http://www.w3.org/2000/svg"
               >
-                Question?
-              </div>
+                <g
+                  fill="none"
+                  fill-rule="evenodd"
+                  transform="translate(0 1)"
+                >
+                  <ellipse
+                    cx="32"
+                    cy="33"
+                    fill="#f5f5f5"
+                    rx="32"
+                    ry="7"
+                  />
+                  <g
+                    fill-rule="nonzero"
+                    stroke="#d9d9d9"
+                  >
+                    <path
+                      d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
+                    />
+                    <path
+                      d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
+                      fill="#fafafa"
+                    />
+                  </g>
+                </g>
+              </svg>
             </div>
             <div
-              class="ant-popconfirm-buttons"
+              class="ant-empty-description"
             >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Tühista
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  OK
-                </span>
-              </button>
+              Andmed puuduvad
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-  <div
-    class="ant-transfer"
-  >
-    <div
-      class="ant-transfer-list"
-    >
-      <div
-        class="ant-transfer-list-header"
-      >
-        <label
-          class="ant-checkbox-wrapper ant-transfer-list-checkbox"
-        >
-          <span
-            class="ant-checkbox"
-          >
-            <input
-              class="ant-checkbox-input"
-              type="checkbox"
-              value=""
-            />
-            <span
-              class="ant-checkbox-inner"
-            />
-          </span>
-        </label>
-        <span
-          aria-label="down"
-          class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="down"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-            />
-          </svg>
-        </span>
-        <span
-          class="ant-transfer-list-header-selected"
-        >
-          0
-          kogus
-        </span>
-        <span
-          class="ant-transfer-list-header-title"
-        />
-      </div>
-      <div
-        class="ant-transfer-list-body ant-transfer-list-body-with-search"
-      >
-        <div
-          class="ant-transfer-list-body-search-wrapper"
-        >
-          <span
-            class="ant-input-affix-wrapper ant-transfer-list-search"
-          >
-            <span
-              class="ant-input-prefix"
-            >
-              <span
-                aria-label="search"
-                class="anticon anticon-search"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="search"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
-                  />
-                </svg>
-              </span>
-            </span>
-            <input
-              class="ant-input"
-              placeholder="Otsi siit"
-              type="text"
-              value=""
-            />
-            <span
-              class="ant-input-suffix"
-            >
-              <span
-                class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
-              >
-                <span
-                  aria-label="close-circle"
-                  class="anticon anticon-close-circle"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="close-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </span>
-          </span>
-        </div>
-        <div
-          class="ant-transfer-list-body-not-found"
-        >
-          <div
-            class="ant-empty ant-empty-normal ant-empty-small"
-          >
-            <div
-              class="ant-empty-image"
-            >
-              <svg
-                height="41"
-                viewBox="0 0 64 41"
-                width="64"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <g
-                  fill="none"
-                  fill-rule="evenodd"
-                  transform="translate(0 1)"
-                >
-                  <ellipse
-                    cx="32"
-                    cy="33"
-                    fill="#f5f5f5"
-                    rx="32"
-                    ry="7"
-                  />
-                  <g
-                    fill-rule="nonzero"
-                    stroke="#d9d9d9"
-                  >
-                    <path
-                      d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
-                    />
-                    <path
-                      d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
-                      fill="#fafafa"
-                    />
-                  </g>
-                </g>
-              </svg>
-            </div>
-            <div
-              class="ant-empty-description"
-            >
-              Andmed puuduvad
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="ant-transfer-operation"
-    >
-      <button
-        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
-        disabled=""
-        type="button"
-      >
-        <span
-          aria-label="right"
-          class="anticon anticon-right"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="right"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-            />
-          </svg>
-        </span>
-      </button>
-      <button
-        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
-        disabled=""
-        type="button"
-      >
-        <span
-          aria-label="left"
-          class="anticon anticon-left"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="left"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-            />
-          </svg>
-        </span>
-      </button>
-    </div>
+    <div
+      class="ant-transfer-operation"
+    >
+      <button
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
+        disabled=""
+        type="button"
+      >
+        <span
+          aria-label="right"
+          class="anticon anticon-right"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="right"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+            />
+          </svg>
+        </span>
+      </button>
+      <button
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
+        disabled=""
+        type="button"
+      >
+        <span
+          aria-label="left"
+          class="anticon anticon-left"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="left"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
     <div
       class="ant-transfer-list"
     >
@@ -76784,60 +76840,64 @@ exports[`Locale Provider should display the text as fa 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
             >
-              <span
-                class="ant-popconfirm-message-icon"
+              <div
+                class="ant-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="ant-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
               <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-buttons"
               >
-                Question?
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    لغو
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    تایید
+                  </span>
+                </button>
               </div>
             </div>
-            <div
-              class="ant-popconfirm-buttons"
-            >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  لغو
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  تایید
-                </span>
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -81887,60 +81947,64 @@ exports[`Locale Provider should display the text as fi 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
             >
-              <span
-                class="ant-popconfirm-message-icon"
+              <div
+                class="ant-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="ant-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
               <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-buttons"
               >
-                Question?
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Peruuta
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    OK
+                  </span>
+                </button>
               </div>
             </div>
-            <div
-              class="ant-popconfirm-buttons"
-            >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Peruuta
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  OK
-                </span>
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -86990,22 +87054,177 @@ exports[`Locale Provider should display the text as fr 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
+            >
+              <div
+                class="ant-popconfirm-message"
+              >
+                <span
+                  class="ant-popconfirm-message-icon"
+                >
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
+              <div
+                class="ant-popconfirm-buttons"
+              >
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Annuler
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    OK
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-transfer"
+  >
+    <div
+      class="ant-transfer-list"
+    >
+      <div
+        class="ant-transfer-list-header"
+      >
+        <label
+          class="ant-checkbox-wrapper ant-transfer-list-checkbox"
+        >
+          <span
+            class="ant-checkbox"
+          >
+            <input
+              class="ant-checkbox-input"
+              type="checkbox"
+              value=""
+            />
+            <span
+              class="ant-checkbox-inner"
+            />
+          </span>
+        </label>
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+        <span
+          class="ant-transfer-list-header-selected"
+        >
+          0
+          élément
+        </span>
+        <span
+          class="ant-transfer-list-header-title"
+        />
+      </div>
+      <div
+        class="ant-transfer-list-body ant-transfer-list-body-with-search"
+      >
+        <div
+          class="ant-transfer-list-body-search-wrapper"
+        >
+          <span
+            class="ant-input-affix-wrapper ant-transfer-list-search"
+          >
+            <span
+              class="ant-input-prefix"
             >
               <span
-                class="ant-popconfirm-message-icon"
+                aria-label="search"
+                class="anticon anticon-search"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="search"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+                  />
+                </svg>
+              </span>
+            </span>
+            <input
+              class="ant-input"
+              placeholder="Recherche"
+              type="text"
+              value=""
+            />
+            <span
+              class="ant-input-suffix"
+            >
+              <span
+                class="ant-input-clear-icon ant-input-clear-icon-hidden"
+                role="button"
+                tabindex="-1"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
+                  aria-label="close-circle"
+                  class="anticon anticon-close-circle"
                   role="img"
                 >
                   <svg
                     aria-hidden="true"
-                    data-icon="exclamation-circle"
+                    data-icon="close-circle"
                     fill="currentColor"
                     focusable="false"
                     height="1em"
@@ -87013,270 +87232,119 @@ exports[`Locale Provider should display the text as fr 1`] = `
                     width="1em"
                   >
                     <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
                     />
                   </svg>
                 </span>
               </span>
-              <div
-                class="ant-popconfirm-message-title"
+            </span>
+          </span>
+        </div>
+        <div
+          class="ant-transfer-list-body-not-found"
+        >
+          <div
+            class="ant-empty ant-empty-normal ant-empty-small"
+          >
+            <div
+              class="ant-empty-image"
+            >
+              <svg
+                height="41"
+                viewBox="0 0 64 41"
+                width="64"
+                xmlns="http://www.w3.org/2000/svg"
               >
-                Question?
-              </div>
+                <g
+                  fill="none"
+                  fill-rule="evenodd"
+                  transform="translate(0 1)"
+                >
+                  <ellipse
+                    cx="32"
+                    cy="33"
+                    fill="#f5f5f5"
+                    rx="32"
+                    ry="7"
+                  />
+                  <g
+                    fill-rule="nonzero"
+                    stroke="#d9d9d9"
+                  >
+                    <path
+                      d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
+                    />
+                    <path
+                      d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
+                      fill="#fafafa"
+                    />
+                  </g>
+                </g>
+              </svg>
             </div>
             <div
-              class="ant-popconfirm-buttons"
+              class="ant-empty-description"
             >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Annuler
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  OK
-                </span>
-              </button>
+              Aucune donnée
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-  <div
-    class="ant-transfer"
-  >
-    <div
-      class="ant-transfer-list"
-    >
-      <div
-        class="ant-transfer-list-header"
-      >
-        <label
-          class="ant-checkbox-wrapper ant-transfer-list-checkbox"
-        >
-          <span
-            class="ant-checkbox"
-          >
-            <input
-              class="ant-checkbox-input"
-              type="checkbox"
-              value=""
-            />
-            <span
-              class="ant-checkbox-inner"
-            />
-          </span>
-        </label>
-        <span
-          aria-label="down"
-          class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="down"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-            />
-          </svg>
-        </span>
-        <span
-          class="ant-transfer-list-header-selected"
-        >
-          0
-          élément
-        </span>
-        <span
-          class="ant-transfer-list-header-title"
-        />
-      </div>
-      <div
-        class="ant-transfer-list-body ant-transfer-list-body-with-search"
-      >
-        <div
-          class="ant-transfer-list-body-search-wrapper"
-        >
-          <span
-            class="ant-input-affix-wrapper ant-transfer-list-search"
-          >
-            <span
-              class="ant-input-prefix"
-            >
-              <span
-                aria-label="search"
-                class="anticon anticon-search"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="search"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
-                  />
-                </svg>
-              </span>
-            </span>
-            <input
-              class="ant-input"
-              placeholder="Recherche"
-              type="text"
-              value=""
-            />
-            <span
-              class="ant-input-suffix"
-            >
-              <span
-                class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
-              >
-                <span
-                  aria-label="close-circle"
-                  class="anticon anticon-close-circle"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="close-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </span>
-          </span>
-        </div>
-        <div
-          class="ant-transfer-list-body-not-found"
-        >
-          <div
-            class="ant-empty ant-empty-normal ant-empty-small"
-          >
-            <div
-              class="ant-empty-image"
-            >
-              <svg
-                height="41"
-                viewBox="0 0 64 41"
-                width="64"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <g
-                  fill="none"
-                  fill-rule="evenodd"
-                  transform="translate(0 1)"
-                >
-                  <ellipse
-                    cx="32"
-                    cy="33"
-                    fill="#f5f5f5"
-                    rx="32"
-                    ry="7"
-                  />
-                  <g
-                    fill-rule="nonzero"
-                    stroke="#d9d9d9"
-                  >
-                    <path
-                      d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
-                    />
-                    <path
-                      d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
-                      fill="#fafafa"
-                    />
-                  </g>
-                </g>
-              </svg>
-            </div>
-            <div
-              class="ant-empty-description"
-            >
-              Aucune donnée
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="ant-transfer-operation"
-    >
-      <button
-        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
-        disabled=""
-        type="button"
-      >
-        <span
-          aria-label="right"
-          class="anticon anticon-right"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="right"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-            />
-          </svg>
-        </span>
-      </button>
-      <button
-        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
-        disabled=""
-        type="button"
-      >
-        <span
-          aria-label="left"
-          class="anticon anticon-left"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="left"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-            />
-          </svg>
-        </span>
-      </button>
-    </div>
+    <div
+      class="ant-transfer-operation"
+    >
+      <button
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
+        disabled=""
+        type="button"
+      >
+        <span
+          aria-label="right"
+          class="anticon anticon-right"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="right"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+            />
+          </svg>
+        </span>
+      </button>
+      <button
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
+        disabled=""
+        type="button"
+      >
+        <span
+          aria-label="left"
+          class="anticon anticon-left"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="left"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
     <div
       class="ant-transfer-list"
     >
@@ -92093,60 +92161,64 @@ exports[`Locale Provider should display the text as fr 2`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
             >
-              <span
-                class="ant-popconfirm-message-icon"
+              <div
+                class="ant-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="ant-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
               <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-buttons"
               >
-                Question?
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Annuler
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    OK
+                  </span>
+                </button>
               </div>
             </div>
-            <div
-              class="ant-popconfirm-buttons"
-            >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Annuler
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  OK
-                </span>
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -97196,60 +97268,64 @@ exports[`Locale Provider should display the text as fr 3`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
             >
-              <span
-                class="ant-popconfirm-message-icon"
+              <div
+                class="ant-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="ant-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
               <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-buttons"
               >
-                Question?
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Annuler
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    OK
+                  </span>
+                </button>
               </div>
             </div>
-            <div
-              class="ant-popconfirm-buttons"
-            >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Annuler
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  OK
-                </span>
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -102299,22 +102375,177 @@ exports[`Locale Provider should display the text as ga 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
+            >
+              <div
+                class="ant-popconfirm-message"
+              >
+                <span
+                  class="ant-popconfirm-message-icon"
+                >
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
+              <div
+                class="ant-popconfirm-buttons"
+              >
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Cancel
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    OK
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-transfer"
+  >
+    <div
+      class="ant-transfer-list"
+    >
+      <div
+        class="ant-transfer-list-header"
+      >
+        <label
+          class="ant-checkbox-wrapper ant-transfer-list-checkbox"
+        >
+          <span
+            class="ant-checkbox"
+          >
+            <input
+              class="ant-checkbox-input"
+              type="checkbox"
+              value=""
+            />
+            <span
+              class="ant-checkbox-inner"
+            />
+          </span>
+        </label>
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+        <span
+          class="ant-transfer-list-header-selected"
+        >
+          0
+          item
+        </span>
+        <span
+          class="ant-transfer-list-header-title"
+        />
+      </div>
+      <div
+        class="ant-transfer-list-body ant-transfer-list-body-with-search"
+      >
+        <div
+          class="ant-transfer-list-body-search-wrapper"
+        >
+          <span
+            class="ant-input-affix-wrapper ant-transfer-list-search"
+          >
+            <span
+              class="ant-input-prefix"
             >
               <span
-                class="ant-popconfirm-message-icon"
+                aria-label="search"
+                class="anticon anticon-search"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="search"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+                  />
+                </svg>
+              </span>
+            </span>
+            <input
+              class="ant-input"
+              placeholder="Search here"
+              type="text"
+              value=""
+            />
+            <span
+              class="ant-input-suffix"
+            >
+              <span
+                class="ant-input-clear-icon ant-input-clear-icon-hidden"
+                role="button"
+                tabindex="-1"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
+                  aria-label="close-circle"
+                  class="anticon anticon-close-circle"
                   role="img"
                 >
                   <svg
                     aria-hidden="true"
-                    data-icon="exclamation-circle"
+                    data-icon="close-circle"
                     fill="currentColor"
                     focusable="false"
                     height="1em"
@@ -102322,270 +102553,119 @@ exports[`Locale Provider should display the text as ga 1`] = `
                     width="1em"
                   >
                     <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
                     />
                   </svg>
                 </span>
               </span>
-              <div
-                class="ant-popconfirm-message-title"
+            </span>
+          </span>
+        </div>
+        <div
+          class="ant-transfer-list-body-not-found"
+        >
+          <div
+            class="ant-empty ant-empty-normal ant-empty-small"
+          >
+            <div
+              class="ant-empty-image"
+            >
+              <svg
+                height="41"
+                viewBox="0 0 64 41"
+                width="64"
+                xmlns="http://www.w3.org/2000/svg"
               >
-                Question?
-              </div>
+                <g
+                  fill="none"
+                  fill-rule="evenodd"
+                  transform="translate(0 1)"
+                >
+                  <ellipse
+                    cx="32"
+                    cy="33"
+                    fill="#f5f5f5"
+                    rx="32"
+                    ry="7"
+                  />
+                  <g
+                    fill-rule="nonzero"
+                    stroke="#d9d9d9"
+                  >
+                    <path
+                      d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
+                    />
+                    <path
+                      d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
+                      fill="#fafafa"
+                    />
+                  </g>
+                </g>
+              </svg>
             </div>
             <div
-              class="ant-popconfirm-buttons"
+              class="ant-empty-description"
             >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Cancel
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  OK
-                </span>
-              </button>
+              No Data
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-  <div
-    class="ant-transfer"
-  >
-    <div
-      class="ant-transfer-list"
-    >
-      <div
-        class="ant-transfer-list-header"
-      >
-        <label
-          class="ant-checkbox-wrapper ant-transfer-list-checkbox"
-        >
-          <span
-            class="ant-checkbox"
-          >
-            <input
-              class="ant-checkbox-input"
-              type="checkbox"
-              value=""
-            />
-            <span
-              class="ant-checkbox-inner"
-            />
-          </span>
-        </label>
-        <span
-          aria-label="down"
-          class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="down"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-            />
-          </svg>
-        </span>
-        <span
-          class="ant-transfer-list-header-selected"
-        >
-          0
-          item
-        </span>
-        <span
-          class="ant-transfer-list-header-title"
-        />
-      </div>
-      <div
-        class="ant-transfer-list-body ant-transfer-list-body-with-search"
-      >
-        <div
-          class="ant-transfer-list-body-search-wrapper"
-        >
-          <span
-            class="ant-input-affix-wrapper ant-transfer-list-search"
-          >
-            <span
-              class="ant-input-prefix"
-            >
-              <span
-                aria-label="search"
-                class="anticon anticon-search"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="search"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
-                  />
-                </svg>
-              </span>
-            </span>
-            <input
-              class="ant-input"
-              placeholder="Search here"
-              type="text"
-              value=""
-            />
-            <span
-              class="ant-input-suffix"
-            >
-              <span
-                class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
-              >
-                <span
-                  aria-label="close-circle"
-                  class="anticon anticon-close-circle"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="close-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </span>
-          </span>
-        </div>
-        <div
-          class="ant-transfer-list-body-not-found"
-        >
-          <div
-            class="ant-empty ant-empty-normal ant-empty-small"
-          >
-            <div
-              class="ant-empty-image"
-            >
-              <svg
-                height="41"
-                viewBox="0 0 64 41"
-                width="64"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <g
-                  fill="none"
-                  fill-rule="evenodd"
-                  transform="translate(0 1)"
-                >
-                  <ellipse
-                    cx="32"
-                    cy="33"
-                    fill="#f5f5f5"
-                    rx="32"
-                    ry="7"
-                  />
-                  <g
-                    fill-rule="nonzero"
-                    stroke="#d9d9d9"
-                  >
-                    <path
-                      d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
-                    />
-                    <path
-                      d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
-                      fill="#fafafa"
-                    />
-                  </g>
-                </g>
-              </svg>
-            </div>
-            <div
-              class="ant-empty-description"
-            >
-              No Data
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="ant-transfer-operation"
-    >
-      <button
-        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
-        disabled=""
-        type="button"
-      >
-        <span
-          aria-label="right"
-          class="anticon anticon-right"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="right"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-            />
-          </svg>
-        </span>
-      </button>
-      <button
-        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
-        disabled=""
-        type="button"
-      >
-        <span
-          aria-label="left"
-          class="anticon anticon-left"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="left"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-            />
-          </svg>
-        </span>
-      </button>
-    </div>
+    <div
+      class="ant-transfer-operation"
+    >
+      <button
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
+        disabled=""
+        type="button"
+      >
+        <span
+          aria-label="right"
+          class="anticon anticon-right"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="right"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+            />
+          </svg>
+        </span>
+      </button>
+      <button
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
+        disabled=""
+        type="button"
+      >
+        <span
+          aria-label="left"
+          class="anticon anticon-left"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="left"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
     <div
       class="ant-transfer-list"
     >
@@ -107402,60 +107482,64 @@ exports[`Locale Provider should display the text as gl 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
             >
-              <span
-                class="ant-popconfirm-message-icon"
+              <div
+                class="ant-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="ant-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
               <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-buttons"
               >
-                Question?
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Cancelar
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Aceptar
+                  </span>
+                </button>
               </div>
             </div>
-            <div
-              class="ant-popconfirm-buttons"
-            >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Cancelar
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Aceptar
-                </span>
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -112505,60 +112589,64 @@ exports[`Locale Provider should display the text as he 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
             >
-              <span
-                class="ant-popconfirm-message-icon"
+              <div
+                class="ant-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="ant-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
               <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-buttons"
               >
-                Question?
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    ביטול
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    אישור
+                  </span>
+                </button>
               </div>
             </div>
-            <div
-              class="ant-popconfirm-buttons"
-            >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  ביטול
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  אישור
-                </span>
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -117608,22 +117696,177 @@ exports[`Locale Provider should display the text as hi 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
+            >
+              <div
+                class="ant-popconfirm-message"
+              >
+                <span
+                  class="ant-popconfirm-message-icon"
+                >
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
+              <div
+                class="ant-popconfirm-buttons"
+              >
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    रद्द करना
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    अच्छी तरह से
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-transfer"
+  >
+    <div
+      class="ant-transfer-list"
+    >
+      <div
+        class="ant-transfer-list-header"
+      >
+        <label
+          class="ant-checkbox-wrapper ant-transfer-list-checkbox"
+        >
+          <span
+            class="ant-checkbox"
+          >
+            <input
+              class="ant-checkbox-input"
+              type="checkbox"
+              value=""
+            />
+            <span
+              class="ant-checkbox-inner"
+            />
+          </span>
+        </label>
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+        <span
+          class="ant-transfer-list-header-selected"
+        >
+          0
+          तत्त्व
+        </span>
+        <span
+          class="ant-transfer-list-header-title"
+        />
+      </div>
+      <div
+        class="ant-transfer-list-body ant-transfer-list-body-with-search"
+      >
+        <div
+          class="ant-transfer-list-body-search-wrapper"
+        >
+          <span
+            class="ant-input-affix-wrapper ant-transfer-list-search"
+          >
+            <span
+              class="ant-input-prefix"
             >
               <span
-                class="ant-popconfirm-message-icon"
+                aria-label="search"
+                class="anticon anticon-search"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="search"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+                  />
+                </svg>
+              </span>
+            </span>
+            <input
+              class="ant-input"
+              placeholder="यहां खोजें"
+              type="text"
+              value=""
+            />
+            <span
+              class="ant-input-suffix"
+            >
+              <span
+                class="ant-input-clear-icon ant-input-clear-icon-hidden"
+                role="button"
+                tabindex="-1"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
+                  aria-label="close-circle"
+                  class="anticon anticon-close-circle"
                   role="img"
                 >
                   <svg
                     aria-hidden="true"
-                    data-icon="exclamation-circle"
+                    data-icon="close-circle"
                     fill="currentColor"
                     focusable="false"
                     height="1em"
@@ -117631,270 +117874,119 @@ exports[`Locale Provider should display the text as hi 1`] = `
                     width="1em"
                   >
                     <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
                     />
                   </svg>
                 </span>
               </span>
-              <div
-                class="ant-popconfirm-message-title"
+            </span>
+          </span>
+        </div>
+        <div
+          class="ant-transfer-list-body-not-found"
+        >
+          <div
+            class="ant-empty ant-empty-normal ant-empty-small"
+          >
+            <div
+              class="ant-empty-image"
+            >
+              <svg
+                height="41"
+                viewBox="0 0 64 41"
+                width="64"
+                xmlns="http://www.w3.org/2000/svg"
               >
-                Question?
-              </div>
+                <g
+                  fill="none"
+                  fill-rule="evenodd"
+                  transform="translate(0 1)"
+                >
+                  <ellipse
+                    cx="32"
+                    cy="33"
+                    fill="#f5f5f5"
+                    rx="32"
+                    ry="7"
+                  />
+                  <g
+                    fill-rule="nonzero"
+                    stroke="#d9d9d9"
+                  >
+                    <path
+                      d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
+                    />
+                    <path
+                      d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
+                      fill="#fafafa"
+                    />
+                  </g>
+                </g>
+              </svg>
             </div>
             <div
-              class="ant-popconfirm-buttons"
+              class="ant-empty-description"
             >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  रद्द करना
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  अच्छी तरह से
-                </span>
-              </button>
+              कोई आकड़ा उपलब्ध नहीं है
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-  <div
-    class="ant-transfer"
-  >
-    <div
-      class="ant-transfer-list"
-    >
-      <div
-        class="ant-transfer-list-header"
-      >
-        <label
-          class="ant-checkbox-wrapper ant-transfer-list-checkbox"
-        >
-          <span
-            class="ant-checkbox"
-          >
-            <input
-              class="ant-checkbox-input"
-              type="checkbox"
-              value=""
-            />
-            <span
-              class="ant-checkbox-inner"
-            />
-          </span>
-        </label>
-        <span
-          aria-label="down"
-          class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="down"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-            />
-          </svg>
-        </span>
-        <span
-          class="ant-transfer-list-header-selected"
-        >
-          0
-          तत्त्व
-        </span>
-        <span
-          class="ant-transfer-list-header-title"
-        />
-      </div>
-      <div
-        class="ant-transfer-list-body ant-transfer-list-body-with-search"
-      >
-        <div
-          class="ant-transfer-list-body-search-wrapper"
-        >
-          <span
-            class="ant-input-affix-wrapper ant-transfer-list-search"
-          >
-            <span
-              class="ant-input-prefix"
-            >
-              <span
-                aria-label="search"
-                class="anticon anticon-search"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="search"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
-                  />
-                </svg>
-              </span>
-            </span>
-            <input
-              class="ant-input"
-              placeholder="यहां खोजें"
-              type="text"
-              value=""
-            />
-            <span
-              class="ant-input-suffix"
-            >
-              <span
-                class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
-              >
-                <span
-                  aria-label="close-circle"
-                  class="anticon anticon-close-circle"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="close-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </span>
-          </span>
-        </div>
-        <div
-          class="ant-transfer-list-body-not-found"
-        >
-          <div
-            class="ant-empty ant-empty-normal ant-empty-small"
-          >
-            <div
-              class="ant-empty-image"
-            >
-              <svg
-                height="41"
-                viewBox="0 0 64 41"
-                width="64"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <g
-                  fill="none"
-                  fill-rule="evenodd"
-                  transform="translate(0 1)"
-                >
-                  <ellipse
-                    cx="32"
-                    cy="33"
-                    fill="#f5f5f5"
-                    rx="32"
-                    ry="7"
-                  />
-                  <g
-                    fill-rule="nonzero"
-                    stroke="#d9d9d9"
-                  >
-                    <path
-                      d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
-                    />
-                    <path
-                      d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
-                      fill="#fafafa"
-                    />
-                  </g>
-                </g>
-              </svg>
-            </div>
-            <div
-              class="ant-empty-description"
-            >
-              कोई आकड़ा उपलब्ध नहीं है
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="ant-transfer-operation"
-    >
-      <button
-        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
-        disabled=""
-        type="button"
-      >
-        <span
-          aria-label="right"
-          class="anticon anticon-right"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="right"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-            />
-          </svg>
-        </span>
-      </button>
-      <button
-        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
-        disabled=""
-        type="button"
-      >
-        <span
-          aria-label="left"
-          class="anticon anticon-left"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="left"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-            />
-          </svg>
-        </span>
-      </button>
-    </div>
+    <div
+      class="ant-transfer-operation"
+    >
+      <button
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
+        disabled=""
+        type="button"
+      >
+        <span
+          aria-label="right"
+          class="anticon anticon-right"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="right"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+            />
+          </svg>
+        </span>
+      </button>
+      <button
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
+        disabled=""
+        type="button"
+      >
+        <span
+          aria-label="left"
+          class="anticon anticon-left"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="left"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
     <div
       class="ant-transfer-list"
     >
@@ -122711,60 +122803,64 @@ exports[`Locale Provider should display the text as hr 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
             >
-              <span
-                class="ant-popconfirm-message-icon"
+              <div
+                class="ant-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="ant-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
               <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-buttons"
               >
-                Question?
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Odustani
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    OK
+                  </span>
+                </button>
               </div>
             </div>
-            <div
-              class="ant-popconfirm-buttons"
-            >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Odustani
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  OK
-                </span>
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -127814,60 +127910,64 @@ exports[`Locale Provider should display the text as hu 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
             >
-              <span
-                class="ant-popconfirm-message-icon"
+              <div
+                class="ant-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="ant-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
               <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-buttons"
               >
-                Question?
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Visszavonás
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Alkalmazás
+                  </span>
+                </button>
               </div>
             </div>
-            <div
-              class="ant-popconfirm-buttons"
-            >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Visszavonás
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Alkalmazás
-                </span>
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -132917,22 +133017,177 @@ exports[`Locale Provider should display the text as hy-am 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
+            >
+              <div
+                class="ant-popconfirm-message"
+              >
+                <span
+                  class="ant-popconfirm-message-icon"
+                >
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
+              <div
+                class="ant-popconfirm-buttons"
+              >
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Մերժել
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Հաստատել
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-transfer"
+  >
+    <div
+      class="ant-transfer-list"
+    >
+      <div
+        class="ant-transfer-list-header"
+      >
+        <label
+          class="ant-checkbox-wrapper ant-transfer-list-checkbox"
+        >
+          <span
+            class="ant-checkbox"
+          >
+            <input
+              class="ant-checkbox-input"
+              type="checkbox"
+              value=""
+            />
+            <span
+              class="ant-checkbox-inner"
+            />
+          </span>
+        </label>
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+        <span
+          class="ant-transfer-list-header-selected"
+        >
+          0
+          պարագան
+        </span>
+        <span
+          class="ant-transfer-list-header-title"
+        />
+      </div>
+      <div
+        class="ant-transfer-list-body ant-transfer-list-body-with-search"
+      >
+        <div
+          class="ant-transfer-list-body-search-wrapper"
+        >
+          <span
+            class="ant-input-affix-wrapper ant-transfer-list-search"
+          >
+            <span
+              class="ant-input-prefix"
             >
               <span
-                class="ant-popconfirm-message-icon"
+                aria-label="search"
+                class="anticon anticon-search"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="search"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+                  />
+                </svg>
+              </span>
+            </span>
+            <input
+              class="ant-input"
+              placeholder="Որոնեք այստեղ"
+              type="text"
+              value=""
+            />
+            <span
+              class="ant-input-suffix"
+            >
+              <span
+                class="ant-input-clear-icon ant-input-clear-icon-hidden"
+                role="button"
+                tabindex="-1"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
+                  aria-label="close-circle"
+                  class="anticon anticon-close-circle"
                   role="img"
                 >
                   <svg
                     aria-hidden="true"
-                    data-icon="exclamation-circle"
+                    data-icon="close-circle"
                     fill="currentColor"
                     focusable="false"
                     height="1em"
@@ -132940,270 +133195,119 @@ exports[`Locale Provider should display the text as hy-am 1`] = `
                     width="1em"
                   >
                     <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
                     />
                   </svg>
                 </span>
               </span>
-              <div
-                class="ant-popconfirm-message-title"
+            </span>
+          </span>
+        </div>
+        <div
+          class="ant-transfer-list-body-not-found"
+        >
+          <div
+            class="ant-empty ant-empty-normal ant-empty-small"
+          >
+            <div
+              class="ant-empty-image"
+            >
+              <svg
+                height="41"
+                viewBox="0 0 64 41"
+                width="64"
+                xmlns="http://www.w3.org/2000/svg"
               >
-                Question?
-              </div>
+                <g
+                  fill="none"
+                  fill-rule="evenodd"
+                  transform="translate(0 1)"
+                >
+                  <ellipse
+                    cx="32"
+                    cy="33"
+                    fill="#f5f5f5"
+                    rx="32"
+                    ry="7"
+                  />
+                  <g
+                    fill-rule="nonzero"
+                    stroke="#d9d9d9"
+                  >
+                    <path
+                      d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
+                    />
+                    <path
+                      d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
+                      fill="#fafafa"
+                    />
+                  </g>
+                </g>
+              </svg>
             </div>
             <div
-              class="ant-popconfirm-buttons"
+              class="ant-empty-description"
             >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Մերժել
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Հաստատել
-                </span>
-              </button>
+              Տվյալներ չկան
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-  <div
-    class="ant-transfer"
-  >
-    <div
-      class="ant-transfer-list"
-    >
-      <div
-        class="ant-transfer-list-header"
-      >
-        <label
-          class="ant-checkbox-wrapper ant-transfer-list-checkbox"
-        >
-          <span
-            class="ant-checkbox"
-          >
-            <input
-              class="ant-checkbox-input"
-              type="checkbox"
-              value=""
-            />
-            <span
-              class="ant-checkbox-inner"
-            />
-          </span>
-        </label>
-        <span
-          aria-label="down"
-          class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="down"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-            />
-          </svg>
-        </span>
-        <span
-          class="ant-transfer-list-header-selected"
-        >
-          0
-          պարագան
-        </span>
-        <span
-          class="ant-transfer-list-header-title"
-        />
-      </div>
-      <div
-        class="ant-transfer-list-body ant-transfer-list-body-with-search"
-      >
-        <div
-          class="ant-transfer-list-body-search-wrapper"
-        >
-          <span
-            class="ant-input-affix-wrapper ant-transfer-list-search"
-          >
-            <span
-              class="ant-input-prefix"
-            >
-              <span
-                aria-label="search"
-                class="anticon anticon-search"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="search"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
-                  />
-                </svg>
-              </span>
-            </span>
-            <input
-              class="ant-input"
-              placeholder="Որոնեք այստեղ"
-              type="text"
-              value=""
-            />
-            <span
-              class="ant-input-suffix"
-            >
-              <span
-                class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
-              >
-                <span
-                  aria-label="close-circle"
-                  class="anticon anticon-close-circle"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="close-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </span>
-          </span>
-        </div>
-        <div
-          class="ant-transfer-list-body-not-found"
-        >
-          <div
-            class="ant-empty ant-empty-normal ant-empty-small"
-          >
-            <div
-              class="ant-empty-image"
-            >
-              <svg
-                height="41"
-                viewBox="0 0 64 41"
-                width="64"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <g
-                  fill="none"
-                  fill-rule="evenodd"
-                  transform="translate(0 1)"
-                >
-                  <ellipse
-                    cx="32"
-                    cy="33"
-                    fill="#f5f5f5"
-                    rx="32"
-                    ry="7"
-                  />
-                  <g
-                    fill-rule="nonzero"
-                    stroke="#d9d9d9"
-                  >
-                    <path
-                      d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
-                    />
-                    <path
-                      d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
-                      fill="#fafafa"
-                    />
-                  </g>
-                </g>
-              </svg>
-            </div>
-            <div
-              class="ant-empty-description"
-            >
-              Տվյալներ չկան
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="ant-transfer-operation"
-    >
-      <button
-        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
-        disabled=""
-        type="button"
-      >
-        <span
-          aria-label="right"
-          class="anticon anticon-right"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="right"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-            />
-          </svg>
-        </span>
-      </button>
-      <button
-        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
-        disabled=""
-        type="button"
-      >
-        <span
-          aria-label="left"
-          class="anticon anticon-left"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="left"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-            />
-          </svg>
-        </span>
-      </button>
-    </div>
+    <div
+      class="ant-transfer-operation"
+    >
+      <button
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
+        disabled=""
+        type="button"
+      >
+        <span
+          aria-label="right"
+          class="anticon anticon-right"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="right"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+            />
+          </svg>
+        </span>
+      </button>
+      <button
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
+        disabled=""
+        type="button"
+      >
+        <span
+          aria-label="left"
+          class="anticon anticon-left"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="left"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
     <div
       class="ant-transfer-list"
     >
@@ -138020,60 +138124,64 @@ exports[`Locale Provider should display the text as id 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
             >
-              <span
-                class="ant-popconfirm-message-icon"
+              <div
+                class="ant-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="ant-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
               <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-buttons"
               >
-                Question?
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Batal
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    OK
+                  </span>
+                </button>
               </div>
             </div>
-            <div
-              class="ant-popconfirm-buttons"
-            >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Batal
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  OK
-                </span>
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -143123,60 +143231,64 @@ exports[`Locale Provider should display the text as is 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
             >
-              <span
-                class="ant-popconfirm-message-icon"
+              <div
+                class="ant-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="ant-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
               <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-buttons"
               >
-                Question?
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Hætta við
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Áfram
+                  </span>
+                </button>
               </div>
             </div>
-            <div
-              class="ant-popconfirm-buttons"
-            >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Hætta við
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Áfram
-                </span>
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -148226,22 +148338,177 @@ exports[`Locale Provider should display the text as it 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
+            >
+              <div
+                class="ant-popconfirm-message"
+              >
+                <span
+                  class="ant-popconfirm-message-icon"
+                >
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
+              <div
+                class="ant-popconfirm-buttons"
+              >
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Annulla
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    OK
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-transfer"
+  >
+    <div
+      class="ant-transfer-list"
+    >
+      <div
+        class="ant-transfer-list-header"
+      >
+        <label
+          class="ant-checkbox-wrapper ant-transfer-list-checkbox"
+        >
+          <span
+            class="ant-checkbox"
+          >
+            <input
+              class="ant-checkbox-input"
+              type="checkbox"
+              value=""
+            />
+            <span
+              class="ant-checkbox-inner"
+            />
+          </span>
+        </label>
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+        <span
+          class="ant-transfer-list-header-selected"
+        >
+          0
+          elemento
+        </span>
+        <span
+          class="ant-transfer-list-header-title"
+        />
+      </div>
+      <div
+        class="ant-transfer-list-body ant-transfer-list-body-with-search"
+      >
+        <div
+          class="ant-transfer-list-body-search-wrapper"
+        >
+          <span
+            class="ant-input-affix-wrapper ant-transfer-list-search"
+          >
+            <span
+              class="ant-input-prefix"
             >
               <span
-                class="ant-popconfirm-message-icon"
+                aria-label="search"
+                class="anticon anticon-search"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="search"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+                  />
+                </svg>
+              </span>
+            </span>
+            <input
+              class="ant-input"
+              placeholder="Cerca qui"
+              type="text"
+              value=""
+            />
+            <span
+              class="ant-input-suffix"
+            >
+              <span
+                class="ant-input-clear-icon ant-input-clear-icon-hidden"
+                role="button"
+                tabindex="-1"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
+                  aria-label="close-circle"
+                  class="anticon anticon-close-circle"
                   role="img"
                 >
                   <svg
                     aria-hidden="true"
-                    data-icon="exclamation-circle"
+                    data-icon="close-circle"
                     fill="currentColor"
                     focusable="false"
                     height="1em"
@@ -148249,270 +148516,119 @@ exports[`Locale Provider should display the text as it 1`] = `
                     width="1em"
                   >
                     <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
                     />
                   </svg>
                 </span>
               </span>
-              <div
-                class="ant-popconfirm-message-title"
+            </span>
+          </span>
+        </div>
+        <div
+          class="ant-transfer-list-body-not-found"
+        >
+          <div
+            class="ant-empty ant-empty-normal ant-empty-small"
+          >
+            <div
+              class="ant-empty-image"
+            >
+              <svg
+                height="41"
+                viewBox="0 0 64 41"
+                width="64"
+                xmlns="http://www.w3.org/2000/svg"
               >
-                Question?
-              </div>
+                <g
+                  fill="none"
+                  fill-rule="evenodd"
+                  transform="translate(0 1)"
+                >
+                  <ellipse
+                    cx="32"
+                    cy="33"
+                    fill="#f5f5f5"
+                    rx="32"
+                    ry="7"
+                  />
+                  <g
+                    fill-rule="nonzero"
+                    stroke="#d9d9d9"
+                  >
+                    <path
+                      d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
+                    />
+                    <path
+                      d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
+                      fill="#fafafa"
+                    />
+                  </g>
+                </g>
+              </svg>
             </div>
             <div
-              class="ant-popconfirm-buttons"
+              class="ant-empty-description"
             >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Annulla
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  OK
-                </span>
-              </button>
+              Nessun dato
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-  <div
-    class="ant-transfer"
-  >
-    <div
-      class="ant-transfer-list"
-    >
-      <div
-        class="ant-transfer-list-header"
-      >
-        <label
-          class="ant-checkbox-wrapper ant-transfer-list-checkbox"
-        >
-          <span
-            class="ant-checkbox"
-          >
-            <input
-              class="ant-checkbox-input"
-              type="checkbox"
-              value=""
-            />
-            <span
-              class="ant-checkbox-inner"
-            />
-          </span>
-        </label>
-        <span
-          aria-label="down"
-          class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="down"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-            />
-          </svg>
-        </span>
-        <span
-          class="ant-transfer-list-header-selected"
-        >
-          0
-          elemento
-        </span>
-        <span
-          class="ant-transfer-list-header-title"
-        />
-      </div>
-      <div
-        class="ant-transfer-list-body ant-transfer-list-body-with-search"
-      >
-        <div
-          class="ant-transfer-list-body-search-wrapper"
-        >
-          <span
-            class="ant-input-affix-wrapper ant-transfer-list-search"
-          >
-            <span
-              class="ant-input-prefix"
-            >
-              <span
-                aria-label="search"
-                class="anticon anticon-search"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="search"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
-                  />
-                </svg>
-              </span>
-            </span>
-            <input
-              class="ant-input"
-              placeholder="Cerca qui"
-              type="text"
-              value=""
-            />
-            <span
-              class="ant-input-suffix"
-            >
-              <span
-                class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
-              >
-                <span
-                  aria-label="close-circle"
-                  class="anticon anticon-close-circle"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="close-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </span>
-          </span>
-        </div>
-        <div
-          class="ant-transfer-list-body-not-found"
-        >
-          <div
-            class="ant-empty ant-empty-normal ant-empty-small"
-          >
-            <div
-              class="ant-empty-image"
-            >
-              <svg
-                height="41"
-                viewBox="0 0 64 41"
-                width="64"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <g
-                  fill="none"
-                  fill-rule="evenodd"
-                  transform="translate(0 1)"
-                >
-                  <ellipse
-                    cx="32"
-                    cy="33"
-                    fill="#f5f5f5"
-                    rx="32"
-                    ry="7"
-                  />
-                  <g
-                    fill-rule="nonzero"
-                    stroke="#d9d9d9"
-                  >
-                    <path
-                      d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
-                    />
-                    <path
-                      d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
-                      fill="#fafafa"
-                    />
-                  </g>
-                </g>
-              </svg>
-            </div>
-            <div
-              class="ant-empty-description"
-            >
-              Nessun dato
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="ant-transfer-operation"
-    >
-      <button
-        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
-        disabled=""
-        type="button"
-      >
-        <span
-          aria-label="right"
-          class="anticon anticon-right"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="right"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-            />
-          </svg>
-        </span>
-      </button>
-      <button
-        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
-        disabled=""
-        type="button"
-      >
-        <span
-          aria-label="left"
-          class="anticon anticon-left"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="left"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-            />
-          </svg>
-        </span>
-      </button>
-    </div>
+    <div
+      class="ant-transfer-operation"
+    >
+      <button
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
+        disabled=""
+        type="button"
+      >
+        <span
+          aria-label="right"
+          class="anticon anticon-right"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="right"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+            />
+          </svg>
+        </span>
+      </button>
+      <button
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
+        disabled=""
+        type="button"
+      >
+        <span
+          aria-label="left"
+          class="anticon anticon-left"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="left"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
     <div
       class="ant-transfer-list"
     >
@@ -153329,60 +153445,64 @@ exports[`Locale Provider should display the text as ja 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
             >
-              <span
-                class="ant-popconfirm-message-icon"
+              <div
+                class="ant-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="ant-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
               <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-buttons"
               >
-                Question?
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    キャンセル
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    OK
+                  </span>
+                </button>
               </div>
             </div>
-            <div
-              class="ant-popconfirm-buttons"
-            >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  キャンセル
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  OK
-                </span>
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -158432,60 +158552,64 @@ exports[`Locale Provider should display the text as ka 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
             >
-              <span
-                class="ant-popconfirm-message-icon"
+              <div
+                class="ant-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="ant-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
               <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-buttons"
               >
-                Question?
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    გაუქმება
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    კარგი
+                  </span>
+                </button>
               </div>
             </div>
-            <div
-              class="ant-popconfirm-buttons"
-            >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  გაუქმება
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  კარგი
-                </span>
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -163535,22 +163659,177 @@ exports[`Locale Provider should display the text as kk 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
+            >
+              <div
+                class="ant-popconfirm-message"
+              >
+                <span
+                  class="ant-popconfirm-message-icon"
+                >
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
+              <div
+                class="ant-popconfirm-buttons"
+              >
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Болдырмау
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Жарайды
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-transfer"
+  >
+    <div
+      class="ant-transfer-list"
+    >
+      <div
+        class="ant-transfer-list-header"
+      >
+        <label
+          class="ant-checkbox-wrapper ant-transfer-list-checkbox"
+        >
+          <span
+            class="ant-checkbox"
+          >
+            <input
+              class="ant-checkbox-input"
+              type="checkbox"
+              value=""
+            />
+            <span
+              class="ant-checkbox-inner"
+            />
+          </span>
+        </label>
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+        <span
+          class="ant-transfer-list-header-selected"
+        >
+          0
+          элемент.
+        </span>
+        <span
+          class="ant-transfer-list-header-title"
+        />
+      </div>
+      <div
+        class="ant-transfer-list-body ant-transfer-list-body-with-search"
+      >
+        <div
+          class="ant-transfer-list-body-search-wrapper"
+        >
+          <span
+            class="ant-input-affix-wrapper ant-transfer-list-search"
+          >
+            <span
+              class="ant-input-prefix"
             >
               <span
-                class="ant-popconfirm-message-icon"
+                aria-label="search"
+                class="anticon anticon-search"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="search"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+                  />
+                </svg>
+              </span>
+            </span>
+            <input
+              class="ant-input"
+              placeholder="Іздеу"
+              type="text"
+              value=""
+            />
+            <span
+              class="ant-input-suffix"
+            >
+              <span
+                class="ant-input-clear-icon ant-input-clear-icon-hidden"
+                role="button"
+                tabindex="-1"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
+                  aria-label="close-circle"
+                  class="anticon anticon-close-circle"
                   role="img"
                 >
                   <svg
                     aria-hidden="true"
-                    data-icon="exclamation-circle"
+                    data-icon="close-circle"
                     fill="currentColor"
                     focusable="false"
                     height="1em"
@@ -163558,270 +163837,119 @@ exports[`Locale Provider should display the text as kk 1`] = `
                     width="1em"
                   >
                     <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
                     />
                   </svg>
                 </span>
               </span>
-              <div
-                class="ant-popconfirm-message-title"
+            </span>
+          </span>
+        </div>
+        <div
+          class="ant-transfer-list-body-not-found"
+        >
+          <div
+            class="ant-empty ant-empty-normal ant-empty-small"
+          >
+            <div
+              class="ant-empty-image"
+            >
+              <svg
+                height="41"
+                viewBox="0 0 64 41"
+                width="64"
+                xmlns="http://www.w3.org/2000/svg"
               >
-                Question?
-              </div>
+                <g
+                  fill="none"
+                  fill-rule="evenodd"
+                  transform="translate(0 1)"
+                >
+                  <ellipse
+                    cx="32"
+                    cy="33"
+                    fill="#f5f5f5"
+                    rx="32"
+                    ry="7"
+                  />
+                  <g
+                    fill-rule="nonzero"
+                    stroke="#d9d9d9"
+                  >
+                    <path
+                      d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
+                    />
+                    <path
+                      d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
+                      fill="#fafafa"
+                    />
+                  </g>
+                </g>
+              </svg>
             </div>
             <div
-              class="ant-popconfirm-buttons"
+              class="ant-empty-description"
             >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Болдырмау
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Жарайды
-                </span>
-              </button>
+              Деректер жоқ
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-  <div
-    class="ant-transfer"
-  >
-    <div
-      class="ant-transfer-list"
-    >
-      <div
-        class="ant-transfer-list-header"
-      >
-        <label
-          class="ant-checkbox-wrapper ant-transfer-list-checkbox"
-        >
-          <span
-            class="ant-checkbox"
-          >
-            <input
-              class="ant-checkbox-input"
-              type="checkbox"
-              value=""
-            />
-            <span
-              class="ant-checkbox-inner"
-            />
-          </span>
-        </label>
-        <span
-          aria-label="down"
-          class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="down"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-            />
-          </svg>
-        </span>
-        <span
-          class="ant-transfer-list-header-selected"
-        >
-          0
-          элемент.
-        </span>
-        <span
-          class="ant-transfer-list-header-title"
-        />
-      </div>
-      <div
-        class="ant-transfer-list-body ant-transfer-list-body-with-search"
-      >
-        <div
-          class="ant-transfer-list-body-search-wrapper"
-        >
-          <span
-            class="ant-input-affix-wrapper ant-transfer-list-search"
-          >
-            <span
-              class="ant-input-prefix"
-            >
-              <span
-                aria-label="search"
-                class="anticon anticon-search"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="search"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
-                  />
-                </svg>
-              </span>
-            </span>
-            <input
-              class="ant-input"
-              placeholder="Іздеу"
-              type="text"
-              value=""
-            />
-            <span
-              class="ant-input-suffix"
-            >
-              <span
-                class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
-              >
-                <span
-                  aria-label="close-circle"
-                  class="anticon anticon-close-circle"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="close-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </span>
-          </span>
-        </div>
-        <div
-          class="ant-transfer-list-body-not-found"
-        >
-          <div
-            class="ant-empty ant-empty-normal ant-empty-small"
-          >
-            <div
-              class="ant-empty-image"
-            >
-              <svg
-                height="41"
-                viewBox="0 0 64 41"
-                width="64"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <g
-                  fill="none"
-                  fill-rule="evenodd"
-                  transform="translate(0 1)"
-                >
-                  <ellipse
-                    cx="32"
-                    cy="33"
-                    fill="#f5f5f5"
-                    rx="32"
-                    ry="7"
-                  />
-                  <g
-                    fill-rule="nonzero"
-                    stroke="#d9d9d9"
-                  >
-                    <path
-                      d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
-                    />
-                    <path
-                      d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
-                      fill="#fafafa"
-                    />
-                  </g>
-                </g>
-              </svg>
-            </div>
-            <div
-              class="ant-empty-description"
-            >
-              Деректер жоқ
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="ant-transfer-operation"
-    >
-      <button
-        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
-        disabled=""
-        type="button"
-      >
-        <span
-          aria-label="right"
-          class="anticon anticon-right"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="right"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-            />
-          </svg>
-        </span>
-      </button>
-      <button
-        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
-        disabled=""
-        type="button"
-      >
-        <span
-          aria-label="left"
-          class="anticon anticon-left"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="left"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-            />
-          </svg>
-        </span>
-      </button>
-    </div>
+    <div
+      class="ant-transfer-operation"
+    >
+      <button
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
+        disabled=""
+        type="button"
+      >
+        <span
+          aria-label="right"
+          class="anticon anticon-right"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="right"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+            />
+          </svg>
+        </span>
+      </button>
+      <button
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
+        disabled=""
+        type="button"
+      >
+        <span
+          aria-label="left"
+          class="anticon anticon-left"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="left"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
     <div
       class="ant-transfer-list"
     >
@@ -168638,60 +168766,64 @@ exports[`Locale Provider should display the text as km 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
             >
-              <span
-                class="ant-popconfirm-message-icon"
+              <div
+                class="ant-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="ant-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
               <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-buttons"
               >
-                Question?
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    បោះបង់
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    យល់ព្រម
+                  </span>
+                </button>
               </div>
             </div>
-            <div
-              class="ant-popconfirm-buttons"
-            >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  បោះបង់
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  យល់ព្រម
-                </span>
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -173739,60 +173871,64 @@ exports[`Locale Provider should display the text as kn 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
             >
-              <span
-                class="ant-popconfirm-message-icon"
+              <div
+                class="ant-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="ant-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
               <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-buttons"
               >
-                Question?
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    ರದ್ದು
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    ಸರಿ
+                  </span>
+                </button>
               </div>
             </div>
-            <div
-              class="ant-popconfirm-buttons"
-            >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  ರದ್ದು
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  ಸರಿ
-                </span>
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -178842,22 +178978,177 @@ exports[`Locale Provider should display the text as ko 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
+            >
+              <div
+                class="ant-popconfirm-message"
+              >
+                <span
+                  class="ant-popconfirm-message-icon"
+                >
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
+              <div
+                class="ant-popconfirm-buttons"
+              >
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    취소
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    확인
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-transfer"
+  >
+    <div
+      class="ant-transfer-list"
+    >
+      <div
+        class="ant-transfer-list-header"
+      >
+        <label
+          class="ant-checkbox-wrapper ant-transfer-list-checkbox"
+        >
+          <span
+            class="ant-checkbox"
+          >
+            <input
+              class="ant-checkbox-input"
+              type="checkbox"
+              value=""
+            />
+            <span
+              class="ant-checkbox-inner"
+            />
+          </span>
+        </label>
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+        <span
+          class="ant-transfer-list-header-selected"
+        >
+          0
+          개
+        </span>
+        <span
+          class="ant-transfer-list-header-title"
+        />
+      </div>
+      <div
+        class="ant-transfer-list-body ant-transfer-list-body-with-search"
+      >
+        <div
+          class="ant-transfer-list-body-search-wrapper"
+        >
+          <span
+            class="ant-input-affix-wrapper ant-transfer-list-search"
+          >
+            <span
+              class="ant-input-prefix"
             >
               <span
-                class="ant-popconfirm-message-icon"
+                aria-label="search"
+                class="anticon anticon-search"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="search"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+                  />
+                </svg>
+              </span>
+            </span>
+            <input
+              class="ant-input"
+              placeholder="여기에 검색하세요"
+              type="text"
+              value=""
+            />
+            <span
+              class="ant-input-suffix"
+            >
+              <span
+                class="ant-input-clear-icon ant-input-clear-icon-hidden"
+                role="button"
+                tabindex="-1"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
+                  aria-label="close-circle"
+                  class="anticon anticon-close-circle"
                   role="img"
                 >
                   <svg
                     aria-hidden="true"
-                    data-icon="exclamation-circle"
+                    data-icon="close-circle"
                     fill="currentColor"
                     focusable="false"
                     height="1em"
@@ -178865,270 +179156,119 @@ exports[`Locale Provider should display the text as ko 1`] = `
                     width="1em"
                   >
                     <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
                     />
                   </svg>
                 </span>
               </span>
-              <div
-                class="ant-popconfirm-message-title"
+            </span>
+          </span>
+        </div>
+        <div
+          class="ant-transfer-list-body-not-found"
+        >
+          <div
+            class="ant-empty ant-empty-normal ant-empty-small"
+          >
+            <div
+              class="ant-empty-image"
+            >
+              <svg
+                height="41"
+                viewBox="0 0 64 41"
+                width="64"
+                xmlns="http://www.w3.org/2000/svg"
               >
-                Question?
-              </div>
+                <g
+                  fill="none"
+                  fill-rule="evenodd"
+                  transform="translate(0 1)"
+                >
+                  <ellipse
+                    cx="32"
+                    cy="33"
+                    fill="#f5f5f5"
+                    rx="32"
+                    ry="7"
+                  />
+                  <g
+                    fill-rule="nonzero"
+                    stroke="#d9d9d9"
+                  >
+                    <path
+                      d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
+                    />
+                    <path
+                      d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
+                      fill="#fafafa"
+                    />
+                  </g>
+                </g>
+              </svg>
             </div>
             <div
-              class="ant-popconfirm-buttons"
+              class="ant-empty-description"
             >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  취소
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  확인
-                </span>
-              </button>
+              데이터 없음
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-  <div
-    class="ant-transfer"
-  >
-    <div
-      class="ant-transfer-list"
-    >
-      <div
-        class="ant-transfer-list-header"
-      >
-        <label
-          class="ant-checkbox-wrapper ant-transfer-list-checkbox"
-        >
-          <span
-            class="ant-checkbox"
-          >
-            <input
-              class="ant-checkbox-input"
-              type="checkbox"
-              value=""
-            />
-            <span
-              class="ant-checkbox-inner"
-            />
-          </span>
-        </label>
-        <span
-          aria-label="down"
-          class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="down"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-            />
-          </svg>
-        </span>
-        <span
-          class="ant-transfer-list-header-selected"
-        >
-          0
-          개
-        </span>
-        <span
-          class="ant-transfer-list-header-title"
-        />
-      </div>
-      <div
-        class="ant-transfer-list-body ant-transfer-list-body-with-search"
-      >
-        <div
-          class="ant-transfer-list-body-search-wrapper"
-        >
-          <span
-            class="ant-input-affix-wrapper ant-transfer-list-search"
-          >
-            <span
-              class="ant-input-prefix"
-            >
-              <span
-                aria-label="search"
-                class="anticon anticon-search"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="search"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
-                  />
-                </svg>
-              </span>
-            </span>
-            <input
-              class="ant-input"
-              placeholder="여기에 검색하세요"
-              type="text"
-              value=""
-            />
-            <span
-              class="ant-input-suffix"
-            >
-              <span
-                class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
-              >
-                <span
-                  aria-label="close-circle"
-                  class="anticon anticon-close-circle"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="close-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </span>
-          </span>
-        </div>
-        <div
-          class="ant-transfer-list-body-not-found"
-        >
-          <div
-            class="ant-empty ant-empty-normal ant-empty-small"
-          >
-            <div
-              class="ant-empty-image"
-            >
-              <svg
-                height="41"
-                viewBox="0 0 64 41"
-                width="64"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <g
-                  fill="none"
-                  fill-rule="evenodd"
-                  transform="translate(0 1)"
-                >
-                  <ellipse
-                    cx="32"
-                    cy="33"
-                    fill="#f5f5f5"
-                    rx="32"
-                    ry="7"
-                  />
-                  <g
-                    fill-rule="nonzero"
-                    stroke="#d9d9d9"
-                  >
-                    <path
-                      d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
-                    />
-                    <path
-                      d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
-                      fill="#fafafa"
-                    />
-                  </g>
-                </g>
-              </svg>
-            </div>
-            <div
-              class="ant-empty-description"
-            >
-              데이터 없음
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="ant-transfer-operation"
-    >
-      <button
-        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
-        disabled=""
-        type="button"
-      >
-        <span
-          aria-label="right"
-          class="anticon anticon-right"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="right"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-            />
-          </svg>
-        </span>
-      </button>
-      <button
-        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
-        disabled=""
-        type="button"
-      >
-        <span
-          aria-label="left"
-          class="anticon anticon-left"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="left"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-            />
-          </svg>
-        </span>
-      </button>
-    </div>
+    <div
+      class="ant-transfer-operation"
+    >
+      <button
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
+        disabled=""
+        type="button"
+      >
+        <span
+          aria-label="right"
+          class="anticon anticon-right"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="right"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+            />
+          </svg>
+        </span>
+      </button>
+      <button
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
+        disabled=""
+        type="button"
+      >
+        <span
+          aria-label="left"
+          class="anticon anticon-left"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="left"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
     <div
       class="ant-transfer-list"
     >
@@ -183945,60 +184085,64 @@ exports[`Locale Provider should display the text as ku 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
             >
-              <span
-                class="ant-popconfirm-message-icon"
+              <div
+                class="ant-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="ant-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
               <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-buttons"
               >
-                Question?
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Betal ke
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Temam
+                  </span>
+                </button>
               </div>
             </div>
-            <div
-              class="ant-popconfirm-buttons"
-            >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Betal ke
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Temam
-                </span>
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -189048,60 +189192,64 @@ exports[`Locale Provider should display the text as ku-iq 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
             >
-              <span
-                class="ant-popconfirm-message-icon"
+              <div
+                class="ant-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="ant-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
               <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-buttons"
               >
-                Question?
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Betal ke
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Temam
+                  </span>
+                </button>
               </div>
             </div>
-            <div
-              class="ant-popconfirm-buttons"
-            >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Betal ke
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Temam
-                </span>
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -194151,22 +194299,177 @@ exports[`Locale Provider should display the text as lt 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
+            >
+              <div
+                class="ant-popconfirm-message"
+              >
+                <span
+                  class="ant-popconfirm-message-icon"
+                >
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
+              <div
+                class="ant-popconfirm-buttons"
+              >
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Atšaukti
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Taip
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-transfer"
+  >
+    <div
+      class="ant-transfer-list"
+    >
+      <div
+        class="ant-transfer-list-header"
+      >
+        <label
+          class="ant-checkbox-wrapper ant-transfer-list-checkbox"
+        >
+          <span
+            class="ant-checkbox"
+          >
+            <input
+              class="ant-checkbox-input"
+              type="checkbox"
+              value=""
+            />
+            <span
+              class="ant-checkbox-inner"
+            />
+          </span>
+        </label>
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+        <span
+          class="ant-transfer-list-header-selected"
+        >
+          0
+          vnt.
+        </span>
+        <span
+          class="ant-transfer-list-header-title"
+        />
+      </div>
+      <div
+        class="ant-transfer-list-body ant-transfer-list-body-with-search"
+      >
+        <div
+          class="ant-transfer-list-body-search-wrapper"
+        >
+          <span
+            class="ant-input-affix-wrapper ant-transfer-list-search"
+          >
+            <span
+              class="ant-input-prefix"
             >
               <span
-                class="ant-popconfirm-message-icon"
+                aria-label="search"
+                class="anticon anticon-search"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="search"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+                  />
+                </svg>
+              </span>
+            </span>
+            <input
+              class="ant-input"
+              placeholder="Paieška"
+              type="text"
+              value=""
+            />
+            <span
+              class="ant-input-suffix"
+            >
+              <span
+                class="ant-input-clear-icon ant-input-clear-icon-hidden"
+                role="button"
+                tabindex="-1"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
+                  aria-label="close-circle"
+                  class="anticon anticon-close-circle"
                   role="img"
                 >
                   <svg
                     aria-hidden="true"
-                    data-icon="exclamation-circle"
+                    data-icon="close-circle"
                     fill="currentColor"
                     focusable="false"
                     height="1em"
@@ -194174,270 +194477,119 @@ exports[`Locale Provider should display the text as lt 1`] = `
                     width="1em"
                   >
                     <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
                     />
                   </svg>
                 </span>
               </span>
-              <div
-                class="ant-popconfirm-message-title"
+            </span>
+          </span>
+        </div>
+        <div
+          class="ant-transfer-list-body-not-found"
+        >
+          <div
+            class="ant-empty ant-empty-normal ant-empty-small"
+          >
+            <div
+              class="ant-empty-image"
+            >
+              <svg
+                height="41"
+                viewBox="0 0 64 41"
+                width="64"
+                xmlns="http://www.w3.org/2000/svg"
               >
-                Question?
-              </div>
+                <g
+                  fill="none"
+                  fill-rule="evenodd"
+                  transform="translate(0 1)"
+                >
+                  <ellipse
+                    cx="32"
+                    cy="33"
+                    fill="#f5f5f5"
+                    rx="32"
+                    ry="7"
+                  />
+                  <g
+                    fill-rule="nonzero"
+                    stroke="#d9d9d9"
+                  >
+                    <path
+                      d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
+                    />
+                    <path
+                      d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
+                      fill="#fafafa"
+                    />
+                  </g>
+                </g>
+              </svg>
             </div>
             <div
-              class="ant-popconfirm-buttons"
+              class="ant-empty-description"
             >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Atšaukti
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Taip
-                </span>
-              </button>
+              Nėra duomenų
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-  <div
-    class="ant-transfer"
-  >
-    <div
-      class="ant-transfer-list"
-    >
-      <div
-        class="ant-transfer-list-header"
-      >
-        <label
-          class="ant-checkbox-wrapper ant-transfer-list-checkbox"
-        >
-          <span
-            class="ant-checkbox"
-          >
-            <input
-              class="ant-checkbox-input"
-              type="checkbox"
-              value=""
-            />
-            <span
-              class="ant-checkbox-inner"
-            />
-          </span>
-        </label>
-        <span
-          aria-label="down"
-          class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="down"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-            />
-          </svg>
-        </span>
-        <span
-          class="ant-transfer-list-header-selected"
-        >
-          0
-          vnt.
-        </span>
-        <span
-          class="ant-transfer-list-header-title"
-        />
-      </div>
-      <div
-        class="ant-transfer-list-body ant-transfer-list-body-with-search"
-      >
-        <div
-          class="ant-transfer-list-body-search-wrapper"
-        >
-          <span
-            class="ant-input-affix-wrapper ant-transfer-list-search"
-          >
-            <span
-              class="ant-input-prefix"
-            >
-              <span
-                aria-label="search"
-                class="anticon anticon-search"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="search"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
-                  />
-                </svg>
-              </span>
-            </span>
-            <input
-              class="ant-input"
-              placeholder="Paieška"
-              type="text"
-              value=""
-            />
-            <span
-              class="ant-input-suffix"
-            >
-              <span
-                class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
-              >
-                <span
-                  aria-label="close-circle"
-                  class="anticon anticon-close-circle"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="close-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </span>
-          </span>
-        </div>
-        <div
-          class="ant-transfer-list-body-not-found"
-        >
-          <div
-            class="ant-empty ant-empty-normal ant-empty-small"
-          >
-            <div
-              class="ant-empty-image"
-            >
-              <svg
-                height="41"
-                viewBox="0 0 64 41"
-                width="64"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <g
-                  fill="none"
-                  fill-rule="evenodd"
-                  transform="translate(0 1)"
-                >
-                  <ellipse
-                    cx="32"
-                    cy="33"
-                    fill="#f5f5f5"
-                    rx="32"
-                    ry="7"
-                  />
-                  <g
-                    fill-rule="nonzero"
-                    stroke="#d9d9d9"
-                  >
-                    <path
-                      d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
-                    />
-                    <path
-                      d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
-                      fill="#fafafa"
-                    />
-                  </g>
-                </g>
-              </svg>
-            </div>
-            <div
-              class="ant-empty-description"
-            >
-              Nėra duomenų
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="ant-transfer-operation"
-    >
-      <button
-        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
-        disabled=""
-        type="button"
-      >
-        <span
-          aria-label="right"
-          class="anticon anticon-right"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="right"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-            />
-          </svg>
-        </span>
-      </button>
-      <button
-        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
-        disabled=""
-        type="button"
-      >
-        <span
-          aria-label="left"
-          class="anticon anticon-left"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="left"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-            />
-          </svg>
-        </span>
-      </button>
-    </div>
+    <div
+      class="ant-transfer-operation"
+    >
+      <button
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
+        disabled=""
+        type="button"
+      >
+        <span
+          aria-label="right"
+          class="anticon anticon-right"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="right"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+            />
+          </svg>
+        </span>
+      </button>
+      <button
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
+        disabled=""
+        type="button"
+      >
+        <span
+          aria-label="left"
+          class="anticon anticon-left"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="left"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
     <div
       class="ant-transfer-list"
     >
@@ -199254,60 +199406,64 @@ exports[`Locale Provider should display the text as lv 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
             >
-              <span
-                class="ant-popconfirm-message-icon"
+              <div
+                class="ant-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="ant-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
               <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-buttons"
               >
-                Question?
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Atcelt
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    OK
+                  </span>
+                </button>
               </div>
             </div>
-            <div
-              class="ant-popconfirm-buttons"
-            >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Atcelt
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  OK
-                </span>
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -204357,60 +204513,64 @@ exports[`Locale Provider should display the text as mk 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
             >
-              <span
-                class="ant-popconfirm-message-icon"
+              <div
+                class="ant-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="ant-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
               <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-buttons"
               >
-                Question?
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Откажи
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    ОК
+                  </span>
+                </button>
               </div>
             </div>
-            <div
-              class="ant-popconfirm-buttons"
-            >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Откажи
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  ОК
-                </span>
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -209460,22 +209620,177 @@ exports[`Locale Provider should display the text as ml 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
+            >
+              <div
+                class="ant-popconfirm-message"
+              >
+                <span
+                  class="ant-popconfirm-message-icon"
+                >
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
+              <div
+                class="ant-popconfirm-buttons"
+              >
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    റദ്ദാക്കുക
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    ശരിയാണ്
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-transfer"
+  >
+    <div
+      class="ant-transfer-list"
+    >
+      <div
+        class="ant-transfer-list-header"
+      >
+        <label
+          class="ant-checkbox-wrapper ant-transfer-list-checkbox"
+        >
+          <span
+            class="ant-checkbox"
+          >
+            <input
+              class="ant-checkbox-input"
+              type="checkbox"
+              value=""
+            />
+            <span
+              class="ant-checkbox-inner"
+            />
+          </span>
+        </label>
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+        <span
+          class="ant-transfer-list-header-selected"
+        >
+          0
+          ഇനം
+        </span>
+        <span
+          class="ant-transfer-list-header-title"
+        />
+      </div>
+      <div
+        class="ant-transfer-list-body ant-transfer-list-body-with-search"
+      >
+        <div
+          class="ant-transfer-list-body-search-wrapper"
+        >
+          <span
+            class="ant-input-affix-wrapper ant-transfer-list-search"
+          >
+            <span
+              class="ant-input-prefix"
             >
               <span
-                class="ant-popconfirm-message-icon"
+                aria-label="search"
+                class="anticon anticon-search"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="search"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+                  />
+                </svg>
+              </span>
+            </span>
+            <input
+              class="ant-input"
+              placeholder="ഇവിടെ തിരയുക"
+              type="text"
+              value=""
+            />
+            <span
+              class="ant-input-suffix"
+            >
+              <span
+                class="ant-input-clear-icon ant-input-clear-icon-hidden"
+                role="button"
+                tabindex="-1"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
+                  aria-label="close-circle"
+                  class="anticon anticon-close-circle"
                   role="img"
                 >
                   <svg
                     aria-hidden="true"
-                    data-icon="exclamation-circle"
+                    data-icon="close-circle"
                     fill="currentColor"
                     focusable="false"
                     height="1em"
@@ -209483,270 +209798,119 @@ exports[`Locale Provider should display the text as ml 1`] = `
                     width="1em"
                   >
                     <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
                     />
                   </svg>
                 </span>
               </span>
-              <div
-                class="ant-popconfirm-message-title"
+            </span>
+          </span>
+        </div>
+        <div
+          class="ant-transfer-list-body-not-found"
+        >
+          <div
+            class="ant-empty ant-empty-normal ant-empty-small"
+          >
+            <div
+              class="ant-empty-image"
+            >
+              <svg
+                height="41"
+                viewBox="0 0 64 41"
+                width="64"
+                xmlns="http://www.w3.org/2000/svg"
               >
-                Question?
-              </div>
+                <g
+                  fill="none"
+                  fill-rule="evenodd"
+                  transform="translate(0 1)"
+                >
+                  <ellipse
+                    cx="32"
+                    cy="33"
+                    fill="#f5f5f5"
+                    rx="32"
+                    ry="7"
+                  />
+                  <g
+                    fill-rule="nonzero"
+                    stroke="#d9d9d9"
+                  >
+                    <path
+                      d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
+                    />
+                    <path
+                      d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
+                      fill="#fafafa"
+                    />
+                  </g>
+                </g>
+              </svg>
             </div>
             <div
-              class="ant-popconfirm-buttons"
+              class="ant-empty-description"
             >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  റദ്ദാക്കുക
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  ശരിയാണ്
-                </span>
-              </button>
+              ഡാറ്റയൊന്നുമില്ല
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-  <div
-    class="ant-transfer"
-  >
-    <div
-      class="ant-transfer-list"
-    >
-      <div
-        class="ant-transfer-list-header"
-      >
-        <label
-          class="ant-checkbox-wrapper ant-transfer-list-checkbox"
-        >
-          <span
-            class="ant-checkbox"
-          >
-            <input
-              class="ant-checkbox-input"
-              type="checkbox"
-              value=""
-            />
-            <span
-              class="ant-checkbox-inner"
-            />
-          </span>
-        </label>
-        <span
-          aria-label="down"
-          class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="down"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-            />
-          </svg>
-        </span>
-        <span
-          class="ant-transfer-list-header-selected"
-        >
-          0
-          ഇനം
-        </span>
-        <span
-          class="ant-transfer-list-header-title"
-        />
-      </div>
-      <div
-        class="ant-transfer-list-body ant-transfer-list-body-with-search"
-      >
-        <div
-          class="ant-transfer-list-body-search-wrapper"
-        >
-          <span
-            class="ant-input-affix-wrapper ant-transfer-list-search"
-          >
-            <span
-              class="ant-input-prefix"
-            >
-              <span
-                aria-label="search"
-                class="anticon anticon-search"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="search"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
-                  />
-                </svg>
-              </span>
-            </span>
-            <input
-              class="ant-input"
-              placeholder="ഇവിടെ തിരയുക"
-              type="text"
-              value=""
-            />
-            <span
-              class="ant-input-suffix"
-            >
-              <span
-                class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
-              >
-                <span
-                  aria-label="close-circle"
-                  class="anticon anticon-close-circle"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="close-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </span>
-          </span>
-        </div>
-        <div
-          class="ant-transfer-list-body-not-found"
-        >
-          <div
-            class="ant-empty ant-empty-normal ant-empty-small"
-          >
-            <div
-              class="ant-empty-image"
-            >
-              <svg
-                height="41"
-                viewBox="0 0 64 41"
-                width="64"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <g
-                  fill="none"
-                  fill-rule="evenodd"
-                  transform="translate(0 1)"
-                >
-                  <ellipse
-                    cx="32"
-                    cy="33"
-                    fill="#f5f5f5"
-                    rx="32"
-                    ry="7"
-                  />
-                  <g
-                    fill-rule="nonzero"
-                    stroke="#d9d9d9"
-                  >
-                    <path
-                      d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
-                    />
-                    <path
-                      d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
-                      fill="#fafafa"
-                    />
-                  </g>
-                </g>
-              </svg>
-            </div>
-            <div
-              class="ant-empty-description"
-            >
-              ഡാറ്റയൊന്നുമില്ല
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="ant-transfer-operation"
-    >
-      <button
-        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
-        disabled=""
-        type="button"
-      >
-        <span
-          aria-label="right"
-          class="anticon anticon-right"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="right"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-            />
-          </svg>
-        </span>
-      </button>
-      <button
-        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
-        disabled=""
-        type="button"
-      >
-        <span
-          aria-label="left"
-          class="anticon anticon-left"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="left"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-            />
-          </svg>
-        </span>
-      </button>
-    </div>
+    <div
+      class="ant-transfer-operation"
+    >
+      <button
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
+        disabled=""
+        type="button"
+      >
+        <span
+          aria-label="right"
+          class="anticon anticon-right"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="right"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+            />
+          </svg>
+        </span>
+      </button>
+      <button
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
+        disabled=""
+        type="button"
+      >
+        <span
+          aria-label="left"
+          class="anticon anticon-left"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="left"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
     <div
       class="ant-transfer-list"
     >
@@ -214563,60 +214727,64 @@ exports[`Locale Provider should display the text as mn-mn 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
             >
-              <span
-                class="ant-popconfirm-message-icon"
+              <div
+                class="ant-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="ant-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
               <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-buttons"
               >
-                Question?
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Цуцлах
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    OK
+                  </span>
+                </button>
               </div>
             </div>
-            <div
-              class="ant-popconfirm-buttons"
-            >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Цуцлах
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  OK
-                </span>
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -219666,60 +219834,64 @@ exports[`Locale Provider should display the text as ms-my 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
             >
-              <span
-                class="ant-popconfirm-message-icon"
+              <div
+                class="ant-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="ant-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
               <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-buttons"
               >
-                Question?
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Batal
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    OK
+                  </span>
+                </button>
               </div>
             </div>
-            <div
-              class="ant-popconfirm-buttons"
-            >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Batal
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  OK
-                </span>
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -224769,22 +224941,177 @@ exports[`Locale Provider should display the text as nb 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
+            >
+              <div
+                class="ant-popconfirm-message"
+              >
+                <span
+                  class="ant-popconfirm-message-icon"
+                >
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
+              <div
+                class="ant-popconfirm-buttons"
+              >
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Avbryt
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    OK
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-transfer"
+  >
+    <div
+      class="ant-transfer-list"
+    >
+      <div
+        class="ant-transfer-list-header"
+      >
+        <label
+          class="ant-checkbox-wrapper ant-transfer-list-checkbox"
+        >
+          <span
+            class="ant-checkbox"
+          >
+            <input
+              class="ant-checkbox-input"
+              type="checkbox"
+              value=""
+            />
+            <span
+              class="ant-checkbox-inner"
+            />
+          </span>
+        </label>
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+        <span
+          class="ant-transfer-list-header-selected"
+        >
+          0
+          element
+        </span>
+        <span
+          class="ant-transfer-list-header-title"
+        />
+      </div>
+      <div
+        class="ant-transfer-list-body ant-transfer-list-body-with-search"
+      >
+        <div
+          class="ant-transfer-list-body-search-wrapper"
+        >
+          <span
+            class="ant-input-affix-wrapper ant-transfer-list-search"
+          >
+            <span
+              class="ant-input-prefix"
             >
               <span
-                class="ant-popconfirm-message-icon"
+                aria-label="search"
+                class="anticon anticon-search"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="search"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+                  />
+                </svg>
+              </span>
+            </span>
+            <input
+              class="ant-input"
+              placeholder="Søk her"
+              type="text"
+              value=""
+            />
+            <span
+              class="ant-input-suffix"
+            >
+              <span
+                class="ant-input-clear-icon ant-input-clear-icon-hidden"
+                role="button"
+                tabindex="-1"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
+                  aria-label="close-circle"
+                  class="anticon anticon-close-circle"
                   role="img"
                 >
                   <svg
                     aria-hidden="true"
-                    data-icon="exclamation-circle"
+                    data-icon="close-circle"
                     fill="currentColor"
                     focusable="false"
                     height="1em"
@@ -224792,270 +225119,119 @@ exports[`Locale Provider should display the text as nb 1`] = `
                     width="1em"
                   >
                     <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
                     />
                   </svg>
                 </span>
               </span>
-              <div
-                class="ant-popconfirm-message-title"
+            </span>
+          </span>
+        </div>
+        <div
+          class="ant-transfer-list-body-not-found"
+        >
+          <div
+            class="ant-empty ant-empty-normal ant-empty-small"
+          >
+            <div
+              class="ant-empty-image"
+            >
+              <svg
+                height="41"
+                viewBox="0 0 64 41"
+                width="64"
+                xmlns="http://www.w3.org/2000/svg"
               >
-                Question?
-              </div>
+                <g
+                  fill="none"
+                  fill-rule="evenodd"
+                  transform="translate(0 1)"
+                >
+                  <ellipse
+                    cx="32"
+                    cy="33"
+                    fill="#f5f5f5"
+                    rx="32"
+                    ry="7"
+                  />
+                  <g
+                    fill-rule="nonzero"
+                    stroke="#d9d9d9"
+                  >
+                    <path
+                      d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
+                    />
+                    <path
+                      d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
+                      fill="#fafafa"
+                    />
+                  </g>
+                </g>
+              </svg>
             </div>
             <div
-              class="ant-popconfirm-buttons"
+              class="ant-empty-description"
             >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Avbryt
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  OK
-                </span>
-              </button>
+              Ingen data
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-  <div
-    class="ant-transfer"
-  >
-    <div
-      class="ant-transfer-list"
-    >
-      <div
-        class="ant-transfer-list-header"
-      >
-        <label
-          class="ant-checkbox-wrapper ant-transfer-list-checkbox"
-        >
-          <span
-            class="ant-checkbox"
-          >
-            <input
-              class="ant-checkbox-input"
-              type="checkbox"
-              value=""
-            />
-            <span
-              class="ant-checkbox-inner"
-            />
-          </span>
-        </label>
-        <span
-          aria-label="down"
-          class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="down"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-            />
-          </svg>
-        </span>
-        <span
-          class="ant-transfer-list-header-selected"
-        >
-          0
-          element
-        </span>
-        <span
-          class="ant-transfer-list-header-title"
-        />
-      </div>
-      <div
-        class="ant-transfer-list-body ant-transfer-list-body-with-search"
-      >
-        <div
-          class="ant-transfer-list-body-search-wrapper"
-        >
-          <span
-            class="ant-input-affix-wrapper ant-transfer-list-search"
-          >
-            <span
-              class="ant-input-prefix"
-            >
-              <span
-                aria-label="search"
-                class="anticon anticon-search"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="search"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
-                  />
-                </svg>
-              </span>
-            </span>
-            <input
-              class="ant-input"
-              placeholder="Søk her"
-              type="text"
-              value=""
-            />
-            <span
-              class="ant-input-suffix"
-            >
-              <span
-                class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
-              >
-                <span
-                  aria-label="close-circle"
-                  class="anticon anticon-close-circle"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="close-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </span>
-          </span>
-        </div>
-        <div
-          class="ant-transfer-list-body-not-found"
-        >
-          <div
-            class="ant-empty ant-empty-normal ant-empty-small"
-          >
-            <div
-              class="ant-empty-image"
-            >
-              <svg
-                height="41"
-                viewBox="0 0 64 41"
-                width="64"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <g
-                  fill="none"
-                  fill-rule="evenodd"
-                  transform="translate(0 1)"
-                >
-                  <ellipse
-                    cx="32"
-                    cy="33"
-                    fill="#f5f5f5"
-                    rx="32"
-                    ry="7"
-                  />
-                  <g
-                    fill-rule="nonzero"
-                    stroke="#d9d9d9"
-                  >
-                    <path
-                      d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
-                    />
-                    <path
-                      d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
-                      fill="#fafafa"
-                    />
-                  </g>
-                </g>
-              </svg>
-            </div>
-            <div
-              class="ant-empty-description"
-            >
-              Ingen data
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="ant-transfer-operation"
-    >
-      <button
-        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
-        disabled=""
-        type="button"
-      >
-        <span
-          aria-label="right"
-          class="anticon anticon-right"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="right"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-            />
-          </svg>
-        </span>
-      </button>
-      <button
-        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
-        disabled=""
-        type="button"
-      >
-        <span
-          aria-label="left"
-          class="anticon anticon-left"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="left"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-            />
-          </svg>
-        </span>
-      </button>
-    </div>
+    <div
+      class="ant-transfer-operation"
+    >
+      <button
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
+        disabled=""
+        type="button"
+      >
+        <span
+          aria-label="right"
+          class="anticon anticon-right"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="right"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+            />
+          </svg>
+        </span>
+      </button>
+      <button
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
+        disabled=""
+        type="button"
+      >
+        <span
+          aria-label="left"
+          class="anticon anticon-left"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="left"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
     <div
       class="ant-transfer-list"
     >
@@ -229872,60 +230048,64 @@ exports[`Locale Provider should display the text as ne-np 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
             >
-              <span
-                class="ant-popconfirm-message-icon"
+              <div
+                class="ant-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="ant-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
               <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-buttons"
               >
-                Question?
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    होईन
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    हो
+                  </span>
+                </button>
               </div>
             </div>
-            <div
-              class="ant-popconfirm-buttons"
-            >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  होईन
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  हो
-                </span>
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -234975,60 +235155,64 @@ exports[`Locale Provider should display the text as nl 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
             >
-              <span
-                class="ant-popconfirm-message-icon"
+              <div
+                class="ant-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="ant-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
               <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-buttons"
               >
-                Question?
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Annuleer
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    OK
+                  </span>
+                </button>
               </div>
             </div>
-            <div
-              class="ant-popconfirm-buttons"
-            >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Annuleer
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  OK
-                </span>
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -240078,22 +240262,177 @@ exports[`Locale Provider should display the text as nl-be 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
+            >
+              <div
+                class="ant-popconfirm-message"
+              >
+                <span
+                  class="ant-popconfirm-message-icon"
+                >
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
+              <div
+                class="ant-popconfirm-buttons"
+              >
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Annuleer
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    OK
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-transfer"
+  >
+    <div
+      class="ant-transfer-list"
+    >
+      <div
+        class="ant-transfer-list-header"
+      >
+        <label
+          class="ant-checkbox-wrapper ant-transfer-list-checkbox"
+        >
+          <span
+            class="ant-checkbox"
+          >
+            <input
+              class="ant-checkbox-input"
+              type="checkbox"
+              value=""
+            />
+            <span
+              class="ant-checkbox-inner"
+            />
+          </span>
+        </label>
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+        <span
+          class="ant-transfer-list-header-selected"
+        >
+          0
+          item
+        </span>
+        <span
+          class="ant-transfer-list-header-title"
+        />
+      </div>
+      <div
+        class="ant-transfer-list-body ant-transfer-list-body-with-search"
+      >
+        <div
+          class="ant-transfer-list-body-search-wrapper"
+        >
+          <span
+            class="ant-input-affix-wrapper ant-transfer-list-search"
+          >
+            <span
+              class="ant-input-prefix"
             >
               <span
-                class="ant-popconfirm-message-icon"
+                aria-label="search"
+                class="anticon anticon-search"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="search"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+                  />
+                </svg>
+              </span>
+            </span>
+            <input
+              class="ant-input"
+              placeholder="Zoek hier"
+              type="text"
+              value=""
+            />
+            <span
+              class="ant-input-suffix"
+            >
+              <span
+                class="ant-input-clear-icon ant-input-clear-icon-hidden"
+                role="button"
+                tabindex="-1"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
+                  aria-label="close-circle"
+                  class="anticon anticon-close-circle"
                   role="img"
                 >
                   <svg
                     aria-hidden="true"
-                    data-icon="exclamation-circle"
+                    data-icon="close-circle"
                     fill="currentColor"
                     focusable="false"
                     height="1em"
@@ -240101,270 +240440,119 @@ exports[`Locale Provider should display the text as nl-be 1`] = `
                     width="1em"
                   >
                     <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
                     />
                   </svg>
                 </span>
               </span>
-              <div
-                class="ant-popconfirm-message-title"
+            </span>
+          </span>
+        </div>
+        <div
+          class="ant-transfer-list-body-not-found"
+        >
+          <div
+            class="ant-empty ant-empty-normal ant-empty-small"
+          >
+            <div
+              class="ant-empty-image"
+            >
+              <svg
+                height="41"
+                viewBox="0 0 64 41"
+                width="64"
+                xmlns="http://www.w3.org/2000/svg"
               >
-                Question?
-              </div>
+                <g
+                  fill="none"
+                  fill-rule="evenodd"
+                  transform="translate(0 1)"
+                >
+                  <ellipse
+                    cx="32"
+                    cy="33"
+                    fill="#f5f5f5"
+                    rx="32"
+                    ry="7"
+                  />
+                  <g
+                    fill-rule="nonzero"
+                    stroke="#d9d9d9"
+                  >
+                    <path
+                      d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
+                    />
+                    <path
+                      d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
+                      fill="#fafafa"
+                    />
+                  </g>
+                </g>
+              </svg>
             </div>
             <div
-              class="ant-popconfirm-buttons"
+              class="ant-empty-description"
             >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Annuleer
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  OK
-                </span>
-              </button>
+              Geen gegevens
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-  <div
-    class="ant-transfer"
-  >
-    <div
-      class="ant-transfer-list"
-    >
-      <div
-        class="ant-transfer-list-header"
-      >
-        <label
-          class="ant-checkbox-wrapper ant-transfer-list-checkbox"
-        >
-          <span
-            class="ant-checkbox"
-          >
-            <input
-              class="ant-checkbox-input"
-              type="checkbox"
-              value=""
-            />
-            <span
-              class="ant-checkbox-inner"
-            />
-          </span>
-        </label>
-        <span
-          aria-label="down"
-          class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="down"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-            />
-          </svg>
-        </span>
-        <span
-          class="ant-transfer-list-header-selected"
-        >
-          0
-          item
-        </span>
-        <span
-          class="ant-transfer-list-header-title"
-        />
-      </div>
-      <div
-        class="ant-transfer-list-body ant-transfer-list-body-with-search"
-      >
-        <div
-          class="ant-transfer-list-body-search-wrapper"
-        >
-          <span
-            class="ant-input-affix-wrapper ant-transfer-list-search"
-          >
-            <span
-              class="ant-input-prefix"
-            >
-              <span
-                aria-label="search"
-                class="anticon anticon-search"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="search"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
-                  />
-                </svg>
-              </span>
-            </span>
-            <input
-              class="ant-input"
-              placeholder="Zoek hier"
-              type="text"
-              value=""
-            />
-            <span
-              class="ant-input-suffix"
-            >
-              <span
-                class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
-              >
-                <span
-                  aria-label="close-circle"
-                  class="anticon anticon-close-circle"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="close-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </span>
-          </span>
-        </div>
-        <div
-          class="ant-transfer-list-body-not-found"
-        >
-          <div
-            class="ant-empty ant-empty-normal ant-empty-small"
-          >
-            <div
-              class="ant-empty-image"
-            >
-              <svg
-                height="41"
-                viewBox="0 0 64 41"
-                width="64"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <g
-                  fill="none"
-                  fill-rule="evenodd"
-                  transform="translate(0 1)"
-                >
-                  <ellipse
-                    cx="32"
-                    cy="33"
-                    fill="#f5f5f5"
-                    rx="32"
-                    ry="7"
-                  />
-                  <g
-                    fill-rule="nonzero"
-                    stroke="#d9d9d9"
-                  >
-                    <path
-                      d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
-                    />
-                    <path
-                      d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
-                      fill="#fafafa"
-                    />
-                  </g>
-                </g>
-              </svg>
-            </div>
-            <div
-              class="ant-empty-description"
-            >
-              Geen gegevens
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="ant-transfer-operation"
-    >
-      <button
-        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
-        disabled=""
-        type="button"
-      >
-        <span
-          aria-label="right"
-          class="anticon anticon-right"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="right"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-            />
-          </svg>
-        </span>
-      </button>
-      <button
-        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
-        disabled=""
-        type="button"
-      >
-        <span
-          aria-label="left"
-          class="anticon anticon-left"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="left"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-            />
-          </svg>
-        </span>
-      </button>
-    </div>
+    <div
+      class="ant-transfer-operation"
+    >
+      <button
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
+        disabled=""
+        type="button"
+      >
+        <span
+          aria-label="right"
+          class="anticon anticon-right"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="right"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+            />
+          </svg>
+        </span>
+      </button>
+      <button
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
+        disabled=""
+        type="button"
+      >
+        <span
+          aria-label="left"
+          class="anticon anticon-left"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="left"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
     <div
       class="ant-transfer-list"
     >
@@ -245181,60 +245369,64 @@ exports[`Locale Provider should display the text as pl 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
             >
-              <span
-                class="ant-popconfirm-message-icon"
+              <div
+                class="ant-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="ant-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
               <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-buttons"
               >
-                Question?
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Anuluj
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    OK
+                  </span>
+                </button>
               </div>
             </div>
-            <div
-              class="ant-popconfirm-buttons"
-            >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Anuluj
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  OK
-                </span>
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -250284,60 +250476,64 @@ exports[`Locale Provider should display the text as pt 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
             >
-              <span
-                class="ant-popconfirm-message-icon"
+              <div
+                class="ant-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="ant-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
               <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-buttons"
               >
-                Question?
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Cancelar
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    OK
+                  </span>
+                </button>
               </div>
             </div>
-            <div
-              class="ant-popconfirm-buttons"
-            >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Cancelar
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  OK
-                </span>
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -255387,22 +255583,177 @@ exports[`Locale Provider should display the text as pt-br 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
+            >
+              <div
+                class="ant-popconfirm-message"
+              >
+                <span
+                  class="ant-popconfirm-message-icon"
+                >
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
+              <div
+                class="ant-popconfirm-buttons"
+              >
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Cancelar
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    OK
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-transfer"
+  >
+    <div
+      class="ant-transfer-list"
+    >
+      <div
+        class="ant-transfer-list-header"
+      >
+        <label
+          class="ant-checkbox-wrapper ant-transfer-list-checkbox"
+        >
+          <span
+            class="ant-checkbox"
+          >
+            <input
+              class="ant-checkbox-input"
+              type="checkbox"
+              value=""
+            />
+            <span
+              class="ant-checkbox-inner"
+            />
+          </span>
+        </label>
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+        <span
+          class="ant-transfer-list-header-selected"
+        >
+          0
+          item
+        </span>
+        <span
+          class="ant-transfer-list-header-title"
+        />
+      </div>
+      <div
+        class="ant-transfer-list-body ant-transfer-list-body-with-search"
+      >
+        <div
+          class="ant-transfer-list-body-search-wrapper"
+        >
+          <span
+            class="ant-input-affix-wrapper ant-transfer-list-search"
+          >
+            <span
+              class="ant-input-prefix"
             >
               <span
-                class="ant-popconfirm-message-icon"
+                aria-label="search"
+                class="anticon anticon-search"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="search"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+                  />
+                </svg>
+              </span>
+            </span>
+            <input
+              class="ant-input"
+              placeholder="Procurar"
+              type="text"
+              value=""
+            />
+            <span
+              class="ant-input-suffix"
+            >
+              <span
+                class="ant-input-clear-icon ant-input-clear-icon-hidden"
+                role="button"
+                tabindex="-1"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
+                  aria-label="close-circle"
+                  class="anticon anticon-close-circle"
                   role="img"
                 >
                   <svg
                     aria-hidden="true"
-                    data-icon="exclamation-circle"
+                    data-icon="close-circle"
                     fill="currentColor"
                     focusable="false"
                     height="1em"
@@ -255410,270 +255761,119 @@ exports[`Locale Provider should display the text as pt-br 1`] = `
                     width="1em"
                   >
                     <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
                     />
                   </svg>
                 </span>
               </span>
-              <div
-                class="ant-popconfirm-message-title"
+            </span>
+          </span>
+        </div>
+        <div
+          class="ant-transfer-list-body-not-found"
+        >
+          <div
+            class="ant-empty ant-empty-normal ant-empty-small"
+          >
+            <div
+              class="ant-empty-image"
+            >
+              <svg
+                height="41"
+                viewBox="0 0 64 41"
+                width="64"
+                xmlns="http://www.w3.org/2000/svg"
               >
-                Question?
-              </div>
+                <g
+                  fill="none"
+                  fill-rule="evenodd"
+                  transform="translate(0 1)"
+                >
+                  <ellipse
+                    cx="32"
+                    cy="33"
+                    fill="#f5f5f5"
+                    rx="32"
+                    ry="7"
+                  />
+                  <g
+                    fill-rule="nonzero"
+                    stroke="#d9d9d9"
+                  >
+                    <path
+                      d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
+                    />
+                    <path
+                      d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
+                      fill="#fafafa"
+                    />
+                  </g>
+                </g>
+              </svg>
             </div>
             <div
-              class="ant-popconfirm-buttons"
+              class="ant-empty-description"
             >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Cancelar
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  OK
-                </span>
-              </button>
+              Não há dados
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-  <div
-    class="ant-transfer"
-  >
-    <div
-      class="ant-transfer-list"
-    >
-      <div
-        class="ant-transfer-list-header"
-      >
-        <label
-          class="ant-checkbox-wrapper ant-transfer-list-checkbox"
-        >
-          <span
-            class="ant-checkbox"
-          >
-            <input
-              class="ant-checkbox-input"
-              type="checkbox"
-              value=""
-            />
-            <span
-              class="ant-checkbox-inner"
-            />
-          </span>
-        </label>
-        <span
-          aria-label="down"
-          class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="down"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-            />
-          </svg>
-        </span>
-        <span
-          class="ant-transfer-list-header-selected"
-        >
-          0
-          item
-        </span>
-        <span
-          class="ant-transfer-list-header-title"
-        />
-      </div>
-      <div
-        class="ant-transfer-list-body ant-transfer-list-body-with-search"
-      >
-        <div
-          class="ant-transfer-list-body-search-wrapper"
-        >
-          <span
-            class="ant-input-affix-wrapper ant-transfer-list-search"
-          >
-            <span
-              class="ant-input-prefix"
-            >
-              <span
-                aria-label="search"
-                class="anticon anticon-search"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="search"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
-                  />
-                </svg>
-              </span>
-            </span>
-            <input
-              class="ant-input"
-              placeholder="Procurar"
-              type="text"
-              value=""
-            />
-            <span
-              class="ant-input-suffix"
-            >
-              <span
-                class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
-              >
-                <span
-                  aria-label="close-circle"
-                  class="anticon anticon-close-circle"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="close-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </span>
-          </span>
-        </div>
-        <div
-          class="ant-transfer-list-body-not-found"
-        >
-          <div
-            class="ant-empty ant-empty-normal ant-empty-small"
-          >
-            <div
-              class="ant-empty-image"
-            >
-              <svg
-                height="41"
-                viewBox="0 0 64 41"
-                width="64"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <g
-                  fill="none"
-                  fill-rule="evenodd"
-                  transform="translate(0 1)"
-                >
-                  <ellipse
-                    cx="32"
-                    cy="33"
-                    fill="#f5f5f5"
-                    rx="32"
-                    ry="7"
-                  />
-                  <g
-                    fill-rule="nonzero"
-                    stroke="#d9d9d9"
-                  >
-                    <path
-                      d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
-                    />
-                    <path
-                      d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
-                      fill="#fafafa"
-                    />
-                  </g>
-                </g>
-              </svg>
-            </div>
-            <div
-              class="ant-empty-description"
-            >
-              Não há dados
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="ant-transfer-operation"
-    >
-      <button
-        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
-        disabled=""
-        type="button"
-      >
-        <span
-          aria-label="right"
-          class="anticon anticon-right"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="right"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-            />
-          </svg>
-        </span>
-      </button>
-      <button
-        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
-        disabled=""
-        type="button"
-      >
-        <span
-          aria-label="left"
-          class="anticon anticon-left"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="left"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-            />
-          </svg>
-        </span>
-      </button>
-    </div>
+    <div
+      class="ant-transfer-operation"
+    >
+      <button
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
+        disabled=""
+        type="button"
+      >
+        <span
+          aria-label="right"
+          class="anticon anticon-right"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="right"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+            />
+          </svg>
+        </span>
+      </button>
+      <button
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
+        disabled=""
+        type="button"
+      >
+        <span
+          aria-label="left"
+          class="anticon anticon-left"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="left"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
     <div
       class="ant-transfer-list"
     >
@@ -260490,60 +260690,64 @@ exports[`Locale Provider should display the text as ro 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
             >
-              <span
-                class="ant-popconfirm-message-icon"
+              <div
+                class="ant-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="ant-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
               <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-buttons"
               >
-                Question?
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Anulare
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    OK
+                  </span>
+                </button>
               </div>
             </div>
-            <div
-              class="ant-popconfirm-buttons"
-            >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Anulare
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  OK
-                </span>
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -265593,60 +265797,64 @@ exports[`Locale Provider should display the text as ru 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
             >
-              <span
-                class="ant-popconfirm-message-icon"
+              <div
+                class="ant-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="ant-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
               <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-buttons"
               >
-                Question?
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Отмена
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    OK
+                  </span>
+                </button>
               </div>
             </div>
-            <div
-              class="ant-popconfirm-buttons"
-            >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Отмена
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  OK
-                </span>
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -270696,22 +270904,177 @@ exports[`Locale Provider should display the text as si 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
+            >
+              <div
+                class="ant-popconfirm-message"
+              >
+                <span
+                  class="ant-popconfirm-message-icon"
+                >
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
+              <div
+                class="ant-popconfirm-buttons"
+              >
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    අවලංගු කරන්න
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    හරි
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-transfer"
+  >
+    <div
+      class="ant-transfer-list"
+    >
+      <div
+        class="ant-transfer-list-header"
+      >
+        <label
+          class="ant-checkbox-wrapper ant-transfer-list-checkbox"
+        >
+          <span
+            class="ant-checkbox"
+          >
+            <input
+              class="ant-checkbox-input"
+              type="checkbox"
+              value=""
+            />
+            <span
+              class="ant-checkbox-inner"
+            />
+          </span>
+        </label>
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+        <span
+          class="ant-transfer-list-header-selected"
+        >
+          0
+          අථකය
+        </span>
+        <span
+          class="ant-transfer-list-header-title"
+        />
+      </div>
+      <div
+        class="ant-transfer-list-body ant-transfer-list-body-with-search"
+      >
+        <div
+          class="ant-transfer-list-body-search-wrapper"
+        >
+          <span
+            class="ant-input-affix-wrapper ant-transfer-list-search"
+          >
+            <span
+              class="ant-input-prefix"
             >
               <span
-                class="ant-popconfirm-message-icon"
+                aria-label="search"
+                class="anticon anticon-search"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="search"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+                  />
+                </svg>
+              </span>
+            </span>
+            <input
+              class="ant-input"
+              placeholder="මෙතැන සොයන්න"
+              type="text"
+              value=""
+            />
+            <span
+              class="ant-input-suffix"
+            >
+              <span
+                class="ant-input-clear-icon ant-input-clear-icon-hidden"
+                role="button"
+                tabindex="-1"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
+                  aria-label="close-circle"
+                  class="anticon anticon-close-circle"
                   role="img"
                 >
                   <svg
                     aria-hidden="true"
-                    data-icon="exclamation-circle"
+                    data-icon="close-circle"
                     fill="currentColor"
                     focusable="false"
                     height="1em"
@@ -270719,270 +271082,119 @@ exports[`Locale Provider should display the text as si 1`] = `
                     width="1em"
                   >
                     <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
                     />
                   </svg>
                 </span>
               </span>
-              <div
-                class="ant-popconfirm-message-title"
+            </span>
+          </span>
+        </div>
+        <div
+          class="ant-transfer-list-body-not-found"
+        >
+          <div
+            class="ant-empty ant-empty-normal ant-empty-small"
+          >
+            <div
+              class="ant-empty-image"
+            >
+              <svg
+                height="41"
+                viewBox="0 0 64 41"
+                width="64"
+                xmlns="http://www.w3.org/2000/svg"
               >
-                Question?
-              </div>
+                <g
+                  fill="none"
+                  fill-rule="evenodd"
+                  transform="translate(0 1)"
+                >
+                  <ellipse
+                    cx="32"
+                    cy="33"
+                    fill="#f5f5f5"
+                    rx="32"
+                    ry="7"
+                  />
+                  <g
+                    fill-rule="nonzero"
+                    stroke="#d9d9d9"
+                  >
+                    <path
+                      d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
+                    />
+                    <path
+                      d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
+                      fill="#fafafa"
+                    />
+                  </g>
+                </g>
+              </svg>
             </div>
             <div
-              class="ant-popconfirm-buttons"
+              class="ant-empty-description"
             >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  අවලංගු කරන්න
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  හරි
-                </span>
-              </button>
+              දත්ත නැත
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-  <div
-    class="ant-transfer"
-  >
-    <div
-      class="ant-transfer-list"
-    >
-      <div
-        class="ant-transfer-list-header"
-      >
-        <label
-          class="ant-checkbox-wrapper ant-transfer-list-checkbox"
-        >
-          <span
-            class="ant-checkbox"
-          >
-            <input
-              class="ant-checkbox-input"
-              type="checkbox"
-              value=""
-            />
-            <span
-              class="ant-checkbox-inner"
-            />
-          </span>
-        </label>
-        <span
-          aria-label="down"
-          class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="down"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-            />
-          </svg>
-        </span>
-        <span
-          class="ant-transfer-list-header-selected"
-        >
-          0
-          අථකය
-        </span>
-        <span
-          class="ant-transfer-list-header-title"
-        />
-      </div>
-      <div
-        class="ant-transfer-list-body ant-transfer-list-body-with-search"
-      >
-        <div
-          class="ant-transfer-list-body-search-wrapper"
-        >
-          <span
-            class="ant-input-affix-wrapper ant-transfer-list-search"
-          >
-            <span
-              class="ant-input-prefix"
-            >
-              <span
-                aria-label="search"
-                class="anticon anticon-search"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="search"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
-                  />
-                </svg>
-              </span>
-            </span>
-            <input
-              class="ant-input"
-              placeholder="මෙතැන සොයන්න"
-              type="text"
-              value=""
-            />
-            <span
-              class="ant-input-suffix"
-            >
-              <span
-                class="ant-input-clear-icon ant-input-clear-icon-hidden"
-                role="button"
-                tabindex="-1"
-              >
-                <span
-                  aria-label="close-circle"
-                  class="anticon anticon-close-circle"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="close-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </span>
-          </span>
-        </div>
-        <div
-          class="ant-transfer-list-body-not-found"
-        >
-          <div
-            class="ant-empty ant-empty-normal ant-empty-small"
-          >
-            <div
-              class="ant-empty-image"
-            >
-              <svg
-                height="41"
-                viewBox="0 0 64 41"
-                width="64"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <g
-                  fill="none"
-                  fill-rule="evenodd"
-                  transform="translate(0 1)"
-                >
-                  <ellipse
-                    cx="32"
-                    cy="33"
-                    fill="#f5f5f5"
-                    rx="32"
-                    ry="7"
-                  />
-                  <g
-                    fill-rule="nonzero"
-                    stroke="#d9d9d9"
-                  >
-                    <path
-                      d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
-                    />
-                    <path
-                      d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
-                      fill="#fafafa"
-                    />
-                  </g>
-                </g>
-              </svg>
-            </div>
-            <div
-              class="ant-empty-description"
-            >
-              දත්ත නැත
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="ant-transfer-operation"
-    >
-      <button
-        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
-        disabled=""
-        type="button"
-      >
-        <span
-          aria-label="right"
-          class="anticon anticon-right"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="right"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-            />
-          </svg>
-        </span>
-      </button>
-      <button
-        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
-        disabled=""
-        type="button"
-      >
-        <span
-          aria-label="left"
-          class="anticon anticon-left"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="left"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-            />
-          </svg>
-        </span>
-      </button>
-    </div>
+    <div
+      class="ant-transfer-operation"
+    >
+      <button
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
+        disabled=""
+        type="button"
+      >
+        <span
+          aria-label="right"
+          class="anticon anticon-right"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="right"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+            />
+          </svg>
+        </span>
+      </button>
+      <button
+        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
+        disabled=""
+        type="button"
+      >
+        <span
+          aria-label="left"
+          class="anticon anticon-left"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="left"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
     <div
       class="ant-transfer-list"
     >
@@ -275799,60 +276011,64 @@ exports[`Locale Provider should display the text as sk 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
             >
-              <span
-                class="ant-popconfirm-message-icon"
+              <div
+                class="ant-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="ant-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
               <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-buttons"
               >
-                Question?
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Zrušiť
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    OK
+                  </span>
+                </button>
               </div>
             </div>
-            <div
-              class="ant-popconfirm-buttons"
-            >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Zrušiť
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  OK
-                </span>
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -280902,60 +281118,64 @@ exports[`Locale Provider should display the text as sl 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
             >
-              <span
-                class="ant-popconfirm-message-icon"
+              <div
+                class="ant-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="ant-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
               <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-buttons"
               >
-                Question?
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Prekliči
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    v redu
+                  </span>
+                </button>
               </div>
             </div>
-            <div
-              class="ant-popconfirm-buttons"
-            >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Prekliči
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  v redu
-                </span>
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -286005,60 +286225,64 @@ exports[`Locale Provider should display the text as sr 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
             >
-              <span
-                class="ant-popconfirm-message-icon"
+              <div
+                class="ant-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="ant-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
               <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-buttons"
               >
-                Question?
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Otkaži
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    U redu
+                  </span>
+                </button>
               </div>
             </div>
-            <div
-              class="ant-popconfirm-buttons"
-            >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Otkaži
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  U redu
-                </span>
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -291108,60 +291332,64 @@ exports[`Locale Provider should display the text as sv 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
             >
-              <span
-                class="ant-popconfirm-message-icon"
+              <div
+                class="ant-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="ant-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
               <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-buttons"
               >
-                Question?
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Avbryt
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    OK
+                  </span>
+                </button>
               </div>
             </div>
-            <div
-              class="ant-popconfirm-buttons"
-            >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Avbryt
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  OK
-                </span>
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -296211,60 +296439,64 @@ exports[`Locale Provider should display the text as ta 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
             >
-              <span
-                class="ant-popconfirm-message-icon"
+              <div
+                class="ant-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="ant-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
               <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-buttons"
               >
-                Question?
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    ரத்து செய்யவும்
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    சரி
+                  </span>
+                </button>
               </div>
             </div>
-            <div
-              class="ant-popconfirm-buttons"
-            >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  ரத்து செய்யவும்
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  சரி
-                </span>
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -301314,60 +301546,64 @@ exports[`Locale Provider should display the text as th 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
             >
-              <span
-                class="ant-popconfirm-message-icon"
+              <div
+                class="ant-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="ant-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
               <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-buttons"
               >
-                Question?
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    ยกเลิก
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    ตกลง
+                  </span>
+                </button>
               </div>
             </div>
-            <div
-              class="ant-popconfirm-buttons"
-            >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  ยกเลิก
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  ตกลง
-                </span>
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -306417,60 +306653,64 @@ exports[`Locale Provider should display the text as tk 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
             >
-              <span
-                class="ant-popconfirm-message-icon"
+              <div
+                class="ant-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="ant-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
               <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-buttons"
               >
-                Question?
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Ýatyr
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Bolýar
+                  </span>
+                </button>
               </div>
             </div>
-            <div
-              class="ant-popconfirm-buttons"
-            >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Ýatyr
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Bolýar
-                </span>
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -311520,60 +311760,64 @@ exports[`Locale Provider should display the text as tr 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
             >
-              <span
-                class="ant-popconfirm-message-icon"
+              <div
+                class="ant-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="ant-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
               <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-buttons"
               >
-                Question?
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    İptal
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Tamam
+                  </span>
+                </button>
               </div>
             </div>
-            <div
-              class="ant-popconfirm-buttons"
-            >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  İptal
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Tamam
-                </span>
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -316623,60 +316867,64 @@ exports[`Locale Provider should display the text as uk 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
             >
-              <span
-                class="ant-popconfirm-message-icon"
+              <div
+                class="ant-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="ant-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
               <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-buttons"
               >
-                Question?
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Скасувати
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Гаразд
+                  </span>
+                </button>
               </div>
             </div>
-            <div
-              class="ant-popconfirm-buttons"
-            >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Скасувати
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Гаразд
-                </span>
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -321726,60 +321974,64 @@ exports[`Locale Provider should display the text as ur 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
             >
-              <span
-                class="ant-popconfirm-message-icon"
+              <div
+                class="ant-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="ant-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
               <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-buttons"
               >
-                Question?
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    منسوخ کریں
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    ٹھیک ہے
+                  </span>
+                </button>
               </div>
             </div>
-            <div
-              class="ant-popconfirm-buttons"
-            >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  منسوخ کریں
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  ٹھیک ہے
-                </span>
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -326829,60 +327081,64 @@ exports[`Locale Provider should display the text as vi 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
             >
-              <span
-                class="ant-popconfirm-message-icon"
+              <div
+                class="ant-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="ant-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
               <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-buttons"
               >
-                Question?
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Hủy
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Đồng ý
+                  </span>
+                </button>
               </div>
             </div>
-            <div
-              class="ant-popconfirm-buttons"
-            >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Hủy
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Đồng ý
-                </span>
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -331932,60 +332188,64 @@ exports[`Locale Provider should display the text as zh-cn 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
             >
-              <span
-                class="ant-popconfirm-message-icon"
+              <div
+                class="ant-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="ant-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
               <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-buttons"
               >
-                Question?
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    取 消
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    确 定
+                  </span>
+                </button>
               </div>
             </div>
-            <div
-              class="ant-popconfirm-buttons"
-            >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  取 消
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  确 定
-                </span>
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -337035,60 +337295,64 @@ exports[`Locale Provider should display the text as zh-hk 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
             >
-              <span
-                class="ant-popconfirm-message-icon"
+              <div
+                class="ant-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="ant-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
               <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-buttons"
               >
-                Question?
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    取 消
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    確 定
+                  </span>
+                </button>
               </div>
             </div>
-            <div
-              class="ant-popconfirm-buttons"
-            >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  取 消
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  確 定
-                </span>
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -342138,60 +342402,64 @@ exports[`Locale Provider should display the text as zh-tw 1`] = `
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
             >
-              <span
-                class="ant-popconfirm-message-icon"
+              <div
+                class="ant-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="ant-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Question?
+                </div>
+              </div>
               <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-buttons"
               >
-                Question?
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    取 消
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    確 定
+                  </span>
+                </button>
               </div>
             </div>
-            <div
-              class="ant-popconfirm-buttons"
-            >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  取 消
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  確 定
-                </span>
-              </button>
-            </div>
           </div>
         </div>
       </div>
diff --git a/components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap
index 20d798fe889e..c252f2f0f23a 100644
--- a/components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -584,3 +584,245 @@ exports[`renders ./components/modal/demo/width.tsx extend context correctly 1`]
   </span>
 </button>
 `;
+
+exports[`renders ./components/modal/demo/wireframe.tsx extend context correctly 1`] = `
+<div
+  style="display:flex;flex-direction:column;row-gap:16px"
+>
+  <div
+    aria-modal="true"
+    class="ant-modal ant-modal-pure-panel"
+    role="dialog"
+    style="width:100%;height:200px"
+  >
+    <div
+      aria-hidden="true"
+      style="width:0;height:0;overflow:hidden;outline:none"
+      tabindex="0"
+    />
+    <div
+      class="ant-modal-content"
+    >
+      <button
+        aria-label="Close"
+        class="ant-modal-close"
+        type="button"
+      >
+        <span
+          class="ant-modal-close-x"
+        >
+          <span
+            aria-label="close"
+            class="anticon anticon-close ant-modal-close-icon"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="close"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+              />
+            </svg>
+          </span>
+        </span>
+      </button>
+      <div
+        class="ant-modal-header"
+      >
+        <div
+          class="ant-modal-title"
+        >
+          Hello World!
+        </div>
+      </div>
+      <div
+        class="ant-modal-body"
+      >
+        Hello World?!
+      </div>
+      <div
+        class="ant-modal-footer"
+      >
+        <button
+          class="ant-btn ant-btn-default"
+          type="button"
+        >
+          <span>
+            Cancel
+          </span>
+        </button>
+        <button
+          class="ant-btn ant-btn-primary"
+          type="button"
+        >
+          <span>
+            OK
+          </span>
+        </button>
+      </div>
+    </div>
+    <div
+      aria-hidden="true"
+      style="width:0;height:0;overflow:hidden;outline:none"
+      tabindex="0"
+    />
+  </div>
+  <div
+    aria-modal="true"
+    class="ant-modal ant-modal-pure-panel ant-modal-confirm ant-modal-confirm-success"
+    role="dialog"
+    style="width:200px;height:150px"
+  >
+    <div
+      aria-hidden="true"
+      style="width:0;height:0;overflow:hidden;outline:none"
+      tabindex="0"
+    />
+    <div
+      class="ant-modal-content"
+    >
+      <div
+        class="ant-modal-body"
+      >
+        <div
+          class="ant-modal-confirm-body-wrapper"
+        >
+          <div
+            class="ant-modal-confirm-body"
+          >
+            <span
+              aria-label="check-circle"
+              class="anticon anticon-check-circle"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="check-circle"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
+                />
+              </svg>
+            </span>
+            <div
+              class="ant-modal-confirm-content"
+            >
+              A good news!
+            </div>
+          </div>
+          <div
+            class="ant-modal-confirm-btns"
+          >
+            <button
+              class="ant-btn ant-btn-primary"
+              type="button"
+            >
+              <span>
+                OK
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-hidden="true"
+      style="width:0;height:0;overflow:hidden;outline:none"
+      tabindex="0"
+    />
+  </div>
+  <div
+    aria-modal="true"
+    class="ant-modal ant-modal-pure-panel ant-modal-confirm ant-modal-confirm-confirm"
+    role="dialog"
+    style="width:300px;height:200px"
+  >
+    <div
+      aria-hidden="true"
+      style="width:0;height:0;overflow:hidden;outline:none"
+      tabindex="0"
+    />
+    <div
+      class="ant-modal-content"
+    >
+      <div
+        class="ant-modal-body"
+      >
+        <div
+          class="ant-modal-confirm-body-wrapper"
+        >
+          <div
+            class="ant-modal-confirm-body"
+          >
+            <span
+              aria-label="exclamation-circle"
+              class="anticon anticon-exclamation-circle"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="exclamation-circle"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                />
+              </svg>
+            </span>
+            <span
+              class="ant-modal-confirm-title"
+            >
+              Confirm This?
+            </span>
+            <div
+              class="ant-modal-confirm-content"
+            >
+              Some descriptions.
+            </div>
+          </div>
+          <div
+            class="ant-modal-confirm-btns"
+          >
+            <button
+              class="ant-btn ant-btn-default"
+              type="button"
+            >
+              <span>
+                Cancel
+              </span>
+            </button>
+            <button
+              class="ant-btn ant-btn-primary"
+              type="button"
+            >
+              <span>
+                OK
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-hidden="true"
+      style="width:0;height:0;overflow:hidden;outline:none"
+      tabindex="0"
+    />
+  </div>
+</div>
+`;
diff --git a/components/modal/__tests__/__snapshots__/demo.test.ts.snap b/components/modal/__tests__/__snapshots__/demo.test.ts.snap
index e868f9b4bff7..0cd379ef1393 100644
--- a/components/modal/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/modal/__tests__/__snapshots__/demo.test.ts.snap
@@ -584,3 +584,245 @@ exports[`renders ./components/modal/demo/width.tsx correctly 1`] = `
   </span>
 </button>
 `;
+
+exports[`renders ./components/modal/demo/wireframe.tsx correctly 1`] = `
+<div
+  style="display:flex;flex-direction:column;row-gap:16px"
+>
+  <div
+    aria-modal="true"
+    class="ant-modal ant-modal-pure-panel"
+    role="dialog"
+    style="width:100%;height:200px"
+  >
+    <div
+      aria-hidden="true"
+      style="width:0;height:0;overflow:hidden;outline:none"
+      tabindex="0"
+    />
+    <div
+      class="ant-modal-content"
+    >
+      <button
+        aria-label="Close"
+        class="ant-modal-close"
+        type="button"
+      >
+        <span
+          class="ant-modal-close-x"
+        >
+          <span
+            aria-label="close"
+            class="anticon anticon-close ant-modal-close-icon"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="close"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+              />
+            </svg>
+          </span>
+        </span>
+      </button>
+      <div
+        class="ant-modal-header"
+      >
+        <div
+          class="ant-modal-title"
+        >
+          Hello World!
+        </div>
+      </div>
+      <div
+        class="ant-modal-body"
+      >
+        Hello World?!
+      </div>
+      <div
+        class="ant-modal-footer"
+      >
+        <button
+          class="ant-btn ant-btn-default"
+          type="button"
+        >
+          <span>
+            Cancel
+          </span>
+        </button>
+        <button
+          class="ant-btn ant-btn-primary"
+          type="button"
+        >
+          <span>
+            OK
+          </span>
+        </button>
+      </div>
+    </div>
+    <div
+      aria-hidden="true"
+      style="width:0;height:0;overflow:hidden;outline:none"
+      tabindex="0"
+    />
+  </div>
+  <div
+    aria-modal="true"
+    class="ant-modal ant-modal-pure-panel ant-modal-confirm ant-modal-confirm-success"
+    role="dialog"
+    style="width:200px;height:150px"
+  >
+    <div
+      aria-hidden="true"
+      style="width:0;height:0;overflow:hidden;outline:none"
+      tabindex="0"
+    />
+    <div
+      class="ant-modal-content"
+    >
+      <div
+        class="ant-modal-body"
+      >
+        <div
+          class="ant-modal-confirm-body-wrapper"
+        >
+          <div
+            class="ant-modal-confirm-body"
+          >
+            <span
+              aria-label="check-circle"
+              class="anticon anticon-check-circle"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="check-circle"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
+                />
+              </svg>
+            </span>
+            <div
+              class="ant-modal-confirm-content"
+            >
+              A good news!
+            </div>
+          </div>
+          <div
+            class="ant-modal-confirm-btns"
+          >
+            <button
+              class="ant-btn ant-btn-primary"
+              type="button"
+            >
+              <span>
+                OK
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-hidden="true"
+      style="width:0;height:0;overflow:hidden;outline:none"
+      tabindex="0"
+    />
+  </div>
+  <div
+    aria-modal="true"
+    class="ant-modal ant-modal-pure-panel ant-modal-confirm ant-modal-confirm-confirm"
+    role="dialog"
+    style="width:300px;height:200px"
+  >
+    <div
+      aria-hidden="true"
+      style="width:0;height:0;overflow:hidden;outline:none"
+      tabindex="0"
+    />
+    <div
+      class="ant-modal-content"
+    >
+      <div
+        class="ant-modal-body"
+      >
+        <div
+          class="ant-modal-confirm-body-wrapper"
+        >
+          <div
+            class="ant-modal-confirm-body"
+          >
+            <span
+              aria-label="exclamation-circle"
+              class="anticon anticon-exclamation-circle"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="exclamation-circle"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                />
+              </svg>
+            </span>
+            <span
+              class="ant-modal-confirm-title"
+            >
+              Confirm This?
+            </span>
+            <div
+              class="ant-modal-confirm-content"
+            >
+              Some descriptions.
+            </div>
+          </div>
+          <div
+            class="ant-modal-confirm-btns"
+          >
+            <button
+              class="ant-btn ant-btn-default"
+              type="button"
+            >
+              <span>
+                Cancel
+              </span>
+            </button>
+            <button
+              class="ant-btn ant-btn-primary"
+              type="button"
+            >
+              <span>
+                OK
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-hidden="true"
+      style="width:0;height:0;overflow:hidden;outline:none"
+      tabindex="0"
+    />
+  </div>
+</div>
+`;
diff --git a/components/modal/demo/wireframe.md b/components/modal/demo/wireframe.md
new file mode 100644
index 000000000000..2153d9000cb7
--- /dev/null
+++ b/components/modal/demo/wireframe.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+线框风格。
+
+## en-US
+
+Wireframe.
diff --git a/components/modal/demo/wireframe.tsx b/components/modal/demo/wireframe.tsx
new file mode 100644
index 000000000000..12039c267333
--- /dev/null
+++ b/components/modal/demo/wireframe.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { ConfigProvider, Modal } from 'antd';
+
+/** Test usage. Do not use in your production. */
+const { _InternalPanelDoNotUseOrYouWillBeFired: InternalPanel } = Modal;
+
+export default () => (
+  <ConfigProvider theme={{ token: { wireframe: true } }}>
+    <div style={{ display: 'flex', flexDirection: 'column', rowGap: 16 }}>
+      <InternalPanel title="Hello World!" style={{ width: '100%', height: 200 }}>
+        Hello World?!
+      </InternalPanel>
+      <InternalPanel type="success" style={{ width: 200, height: 150 }}>
+        A good news!
+      </InternalPanel>
+      <InternalPanel title="Confirm This?" type="confirm" style={{ width: 300, height: 200 }}>
+        Some descriptions.
+      </InternalPanel>
+    </div>
+  </ConfigProvider>
+);
diff --git a/components/modal/index.en-US.md b/components/modal/index.en-US.md
index 305e3cdd3fd0..5c9f5379302f 100644
--- a/components/modal/index.en-US.md
+++ b/components/modal/index.en-US.md
@@ -31,7 +31,8 @@ When requiring users to interact with the application, but without jumping to a
 <code src="./demo/modal-render.tsx">Custom modal content render</code>
 <code src="./demo/width.tsx">To customize the width of modal</code>
 <code src="./demo/render-panel.tsx" debug>\_InternalPanelDoNotUseOrYouWillBeFired</code>
-<code src="./demo/custom-mouse-position.tsx" debug>控制弹框动画原点</code>
+<code src="./demo/custom-mouse-position.tsx" debug>Control modal's animation origin position</code>
+<code src="./demo/wireframe.tsx" debug>Wireframe</code>
 
 ## API
 
diff --git a/components/modal/index.zh-CN.md b/components/modal/index.zh-CN.md
index 071abebbb4bf..36cb3a5e84ec 100644
--- a/components/modal/index.zh-CN.md
+++ b/components/modal/index.zh-CN.md
@@ -34,7 +34,8 @@ demo:
 <code src="./demo/modal-render.tsx">自定义渲染对话框</code>
 <code src="./demo/width.tsx">自定义模态的宽度</code>
 <code src="./demo/render-panel.tsx" debug>\_InternalPanelDoNotUseOrYouWillBeFired</code>
-<code src="./demo/custom-mouse-position.tsx" debug>control modal's animation origin position</code>
+<code src="./demo/custom-mouse-position.tsx" debug>控制弹框动画原点</code>
+<code src="./demo/wireframe.tsx" debug>线框风格</code>
 
 ## API
 
diff --git a/components/pagination/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/pagination/__tests__/__snapshots__/demo-extend.test.ts.snap
index f4fe028d69b4..05a8a8d2261f 100644
--- a/components/pagination/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/pagination/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -4493,3 +4493,718 @@ Array [
   </ul>,
 ]
 `;
+
+exports[`renders ./components/pagination/demo/wireframe.tsx extend context correctly 1`] = `
+Array [
+  <ul
+    class="ant-pagination"
+  >
+    <li
+      aria-disabled="false"
+      class="ant-pagination-prev"
+      tabindex="0"
+      title="Previous Page"
+    >
+      <button
+        class="ant-pagination-item-link"
+        tabindex="-1"
+        type="button"
+      >
+        <span
+          aria-label="left"
+          class="anticon anticon-left"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="left"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
+            />
+          </svg>
+        </span>
+      </button>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-1"
+      tabindex="0"
+      title="1"
+    >
+      <a
+        rel="nofollow"
+      >
+        1
+      </a>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-2"
+      tabindex="0"
+      title="2"
+    >
+      <a
+        rel="nofollow"
+      >
+        2
+      </a>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-3 ant-pagination-item-active"
+      tabindex="0"
+      title="3"
+    >
+      <a
+        rel="nofollow"
+      >
+        3
+      </a>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-4"
+      tabindex="0"
+      title="4"
+    >
+      <a
+        rel="nofollow"
+      >
+        4
+      </a>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-5 ant-pagination-item-before-jump-next"
+      tabindex="0"
+      title="5"
+    >
+      <a
+        rel="nofollow"
+      >
+        5
+      </a>
+    </li>
+    <li
+      class="ant-pagination-jump-next ant-pagination-jump-next-custom-icon"
+      tabindex="0"
+      title="Next 5 Pages"
+    >
+      <a
+        class="ant-pagination-item-link"
+      >
+        <div
+          class="ant-pagination-item-container"
+        >
+          <span
+            aria-label="double-right"
+            class="anticon anticon-double-right ant-pagination-item-link-icon"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="double-right"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M533.2 492.3L277.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H188c-6.7 0-10.4 7.7-6.3 12.9L447.1 512 181.7 851.1A7.98 7.98 0 00188 864h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5zm304 0L581.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H492c-6.7 0-10.4 7.7-6.3 12.9L751.1 512 485.7 851.1A7.98 7.98 0 00492 864h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"
+              />
+            </svg>
+          </span>
+          <span
+            class="ant-pagination-item-ellipsis"
+          >
+            •••
+          </span>
+        </div>
+      </a>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-50"
+      tabindex="0"
+      title="50"
+    >
+      <a
+        rel="nofollow"
+      >
+        50
+      </a>
+    </li>
+    <li
+      aria-disabled="false"
+      class="ant-pagination-next"
+      tabindex="0"
+      title="Next Page"
+    >
+      <button
+        class="ant-pagination-item-link"
+        tabindex="-1"
+        type="button"
+      >
+        <span
+          aria-label="right"
+          class="anticon anticon-right"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="right"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+            />
+          </svg>
+        </span>
+      </button>
+    </li>
+    <li
+      class="ant-pagination-options"
+    >
+      <div
+        aria-label="Page Size"
+        class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow"
+      >
+        <div
+          class="ant-select-selector"
+        >
+          <span
+            class="ant-select-selection-search"
+          >
+            <input
+              aria-activedescendant="undefined_list_0"
+              aria-autocomplete="list"
+              aria-controls="undefined_list"
+              aria-expanded="false"
+              aria-haspopup="listbox"
+              aria-label="Page Size"
+              aria-owns="undefined_list"
+              autocomplete="off"
+              class="ant-select-selection-search-input"
+              readonly=""
+              role="combobox"
+              style="opacity:0"
+              type="search"
+              unselectable="on"
+              value=""
+            />
+          </span>
+          <span
+            class="ant-select-selection-item"
+            title="10 / page"
+          >
+            10 / page
+          </span>
+        </div>
+        <div>
+          <div
+            class="ant-select-dropdown"
+            style="opacity:0"
+          >
+            <div>
+              <div
+                id="undefined_list"
+                role="listbox"
+                style="height:0;width:0;overflow:hidden"
+              >
+                <div
+                  aria-label="10 / page"
+                  aria-selected="true"
+                  id="undefined_list_0"
+                  role="option"
+                >
+                  10
+                </div>
+                <div
+                  aria-label="20 / page"
+                  aria-selected="false"
+                  id="undefined_list_1"
+                  role="option"
+                >
+                  20
+                </div>
+              </div>
+              <div
+                class="rc-virtual-list"
+                style="position:relative"
+              >
+                <div
+                  class="rc-virtual-list-holder"
+                  style="max-height:256px;overflow-y:auto;overflow-anchor:none"
+                >
+                  <div>
+                    <div
+                      class="rc-virtual-list-holder-inner"
+                      style="display:flex;flex-direction:column"
+                    >
+                      <div
+                        aria-selected="true"
+                        class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
+                        title="10 / page"
+                      >
+                        <div
+                          class="ant-select-item-option-content"
+                        >
+                          10 / page
+                        </div>
+                        <span
+                          aria-hidden="true"
+                          class="ant-select-item-option-state"
+                          style="user-select:none;-webkit-user-select:none"
+                          unselectable="on"
+                        />
+                      </div>
+                      <div
+                        aria-selected="false"
+                        class="ant-select-item ant-select-item-option"
+                        title="20 / page"
+                      >
+                        <div
+                          class="ant-select-item-option-content"
+                        >
+                          20 / page
+                        </div>
+                        <span
+                          aria-hidden="true"
+                          class="ant-select-item-option-state"
+                          style="user-select:none;-webkit-user-select:none"
+                          unselectable="on"
+                        />
+                      </div>
+                      <div
+                        aria-selected="false"
+                        class="ant-select-item ant-select-item-option"
+                        title="50 / page"
+                      >
+                        <div
+                          class="ant-select-item-option-content"
+                        >
+                          50 / page
+                        </div>
+                        <span
+                          aria-hidden="true"
+                          class="ant-select-item-option-state"
+                          style="user-select:none;-webkit-user-select:none"
+                          unselectable="on"
+                        />
+                      </div>
+                      <div
+                        aria-selected="false"
+                        class="ant-select-item ant-select-item-option"
+                        title="100 / page"
+                      >
+                        <div
+                          class="ant-select-item-option-content"
+                        >
+                          100 / page
+                        </div>
+                        <span
+                          aria-hidden="true"
+                          class="ant-select-item-option-state"
+                          style="user-select:none;-webkit-user-select:none"
+                          unselectable="on"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <span
+          aria-hidden="true"
+          class="ant-select-arrow"
+          style="user-select:none;-webkit-user-select:none"
+          unselectable="on"
+        >
+          <span
+            aria-label="down"
+            class="anticon anticon-down ant-select-suffix"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="down"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
+    </li>
+  </ul>,
+  <br />,
+  <ul
+    class="ant-pagination ant-pagination-disabled"
+  >
+    <li
+      aria-disabled="false"
+      class="ant-pagination-prev"
+      tabindex="0"
+      title="Previous Page"
+    >
+      <button
+        class="ant-pagination-item-link"
+        tabindex="-1"
+        type="button"
+      >
+        <span
+          aria-label="left"
+          class="anticon anticon-left"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="left"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
+            />
+          </svg>
+        </span>
+      </button>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-1"
+      tabindex="0"
+      title="1"
+    >
+      <a
+        rel="nofollow"
+      >
+        1
+      </a>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-2"
+      tabindex="0"
+      title="2"
+    >
+      <a
+        rel="nofollow"
+      >
+        2
+      </a>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-3 ant-pagination-item-active"
+      tabindex="0"
+      title="3"
+    >
+      <a
+        rel="nofollow"
+      >
+        3
+      </a>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-4"
+      tabindex="0"
+      title="4"
+    >
+      <a
+        rel="nofollow"
+      >
+        4
+      </a>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-5 ant-pagination-item-before-jump-next"
+      tabindex="0"
+      title="5"
+    >
+      <a
+        rel="nofollow"
+      >
+        5
+      </a>
+    </li>
+    <li
+      class="ant-pagination-jump-next ant-pagination-jump-next-custom-icon"
+      tabindex="0"
+      title="Next 5 Pages"
+    >
+      <a
+        class="ant-pagination-item-link"
+      >
+        <div
+          class="ant-pagination-item-container"
+        >
+          <span
+            aria-label="double-right"
+            class="anticon anticon-double-right ant-pagination-item-link-icon"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="double-right"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M533.2 492.3L277.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H188c-6.7 0-10.4 7.7-6.3 12.9L447.1 512 181.7 851.1A7.98 7.98 0 00188 864h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5zm304 0L581.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H492c-6.7 0-10.4 7.7-6.3 12.9L751.1 512 485.7 851.1A7.98 7.98 0 00492 864h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"
+              />
+            </svg>
+          </span>
+          <span
+            class="ant-pagination-item-ellipsis"
+          >
+            •••
+          </span>
+        </div>
+      </a>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-50"
+      tabindex="0"
+      title="50"
+    >
+      <a
+        rel="nofollow"
+      >
+        50
+      </a>
+    </li>
+    <li
+      aria-disabled="false"
+      class="ant-pagination-next"
+      tabindex="0"
+      title="Next Page"
+    >
+      <button
+        class="ant-pagination-item-link"
+        tabindex="-1"
+        type="button"
+      >
+        <span
+          aria-label="right"
+          class="anticon anticon-right"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="right"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+            />
+          </svg>
+        </span>
+      </button>
+    </li>
+    <li
+      class="ant-pagination-options"
+    >
+      <div
+        aria-label="Page Size"
+        class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-disabled"
+      >
+        <div
+          class="ant-select-selector"
+        >
+          <span
+            class="ant-select-selection-search"
+          >
+            <input
+              aria-activedescendant="undefined_list_0"
+              aria-autocomplete="list"
+              aria-controls="undefined_list"
+              aria-expanded="false"
+              aria-haspopup="listbox"
+              aria-label="Page Size"
+              aria-owns="undefined_list"
+              autocomplete="off"
+              class="ant-select-selection-search-input"
+              disabled=""
+              readonly=""
+              role="combobox"
+              style="opacity:0"
+              type="search"
+              unselectable="on"
+              value=""
+            />
+          </span>
+          <span
+            class="ant-select-selection-item"
+            title="10 / page"
+          >
+            10 / page
+          </span>
+        </div>
+        <div>
+          <div
+            class="ant-select-dropdown"
+            style="opacity:0"
+          >
+            <div>
+              <div
+                id="undefined_list"
+                role="listbox"
+                style="height:0;width:0;overflow:hidden"
+              >
+                <div
+                  aria-label="10 / page"
+                  aria-selected="true"
+                  id="undefined_list_0"
+                  role="option"
+                >
+                  10
+                </div>
+                <div
+                  aria-label="20 / page"
+                  aria-selected="false"
+                  id="undefined_list_1"
+                  role="option"
+                >
+                  20
+                </div>
+              </div>
+              <div
+                class="rc-virtual-list"
+                style="position:relative"
+              >
+                <div
+                  class="rc-virtual-list-holder"
+                  style="max-height:256px;overflow-y:auto;overflow-anchor:none"
+                >
+                  <div>
+                    <div
+                      class="rc-virtual-list-holder-inner"
+                      style="display:flex;flex-direction:column"
+                    >
+                      <div
+                        aria-selected="true"
+                        class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
+                        title="10 / page"
+                      >
+                        <div
+                          class="ant-select-item-option-content"
+                        >
+                          10 / page
+                        </div>
+                        <span
+                          aria-hidden="true"
+                          class="ant-select-item-option-state"
+                          style="user-select:none;-webkit-user-select:none"
+                          unselectable="on"
+                        />
+                      </div>
+                      <div
+                        aria-selected="false"
+                        class="ant-select-item ant-select-item-option"
+                        title="20 / page"
+                      >
+                        <div
+                          class="ant-select-item-option-content"
+                        >
+                          20 / page
+                        </div>
+                        <span
+                          aria-hidden="true"
+                          class="ant-select-item-option-state"
+                          style="user-select:none;-webkit-user-select:none"
+                          unselectable="on"
+                        />
+                      </div>
+                      <div
+                        aria-selected="false"
+                        class="ant-select-item ant-select-item-option"
+                        title="50 / page"
+                      >
+                        <div
+                          class="ant-select-item-option-content"
+                        >
+                          50 / page
+                        </div>
+                        <span
+                          aria-hidden="true"
+                          class="ant-select-item-option-state"
+                          style="user-select:none;-webkit-user-select:none"
+                          unselectable="on"
+                        />
+                      </div>
+                      <div
+                        aria-selected="false"
+                        class="ant-select-item ant-select-item-option"
+                        title="100 / page"
+                      >
+                        <div
+                          class="ant-select-item-option-content"
+                        >
+                          100 / page
+                        </div>
+                        <span
+                          aria-hidden="true"
+                          class="ant-select-item-option-state"
+                          style="user-select:none;-webkit-user-select:none"
+                          unselectable="on"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <span
+          aria-hidden="true"
+          class="ant-select-arrow"
+          style="user-select:none;-webkit-user-select:none"
+          unselectable="on"
+        >
+          <span
+            aria-label="down"
+            class="anticon anticon-down ant-select-suffix"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="down"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
+    </li>
+  </ul>,
+]
+`;
diff --git a/components/pagination/__tests__/__snapshots__/demo.test.ts.snap b/components/pagination/__tests__/__snapshots__/demo.test.ts.snap
index a7724aea5c8a..665eeeadf73e 100644
--- a/components/pagination/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/pagination/__tests__/__snapshots__/demo.test.ts.snap
@@ -3217,3 +3217,486 @@ Array [
   </ul>,
 ]
 `;
+
+exports[`renders ./components/pagination/demo/wireframe.tsx correctly 1`] = `
+Array [
+  <ul
+    class="ant-pagination"
+  >
+    <li
+      aria-disabled="false"
+      class="ant-pagination-prev"
+      tabindex="0"
+      title="Previous Page"
+    >
+      <button
+        class="ant-pagination-item-link"
+        tabindex="-1"
+        type="button"
+      >
+        <span
+          aria-label="left"
+          class="anticon anticon-left"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="left"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
+            />
+          </svg>
+        </span>
+      </button>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-1"
+      tabindex="0"
+      title="1"
+    >
+      <a
+        rel="nofollow"
+      >
+        1
+      </a>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-2"
+      tabindex="0"
+      title="2"
+    >
+      <a
+        rel="nofollow"
+      >
+        2
+      </a>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-3 ant-pagination-item-active"
+      tabindex="0"
+      title="3"
+    >
+      <a
+        rel="nofollow"
+      >
+        3
+      </a>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-4"
+      tabindex="0"
+      title="4"
+    >
+      <a
+        rel="nofollow"
+      >
+        4
+      </a>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-5 ant-pagination-item-before-jump-next"
+      tabindex="0"
+      title="5"
+    >
+      <a
+        rel="nofollow"
+      >
+        5
+      </a>
+    </li>
+    <li
+      class="ant-pagination-jump-next ant-pagination-jump-next-custom-icon"
+      tabindex="0"
+      title="Next 5 Pages"
+    >
+      <a
+        class="ant-pagination-item-link"
+      >
+        <div
+          class="ant-pagination-item-container"
+        >
+          <span
+            aria-label="double-right"
+            class="anticon anticon-double-right ant-pagination-item-link-icon"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="double-right"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M533.2 492.3L277.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H188c-6.7 0-10.4 7.7-6.3 12.9L447.1 512 181.7 851.1A7.98 7.98 0 00188 864h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5zm304 0L581.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H492c-6.7 0-10.4 7.7-6.3 12.9L751.1 512 485.7 851.1A7.98 7.98 0 00492 864h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"
+              />
+            </svg>
+          </span>
+          <span
+            class="ant-pagination-item-ellipsis"
+          >
+            •••
+          </span>
+        </div>
+      </a>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-50"
+      tabindex="0"
+      title="50"
+    >
+      <a
+        rel="nofollow"
+      >
+        50
+      </a>
+    </li>
+    <li
+      aria-disabled="false"
+      class="ant-pagination-next"
+      tabindex="0"
+      title="Next Page"
+    >
+      <button
+        class="ant-pagination-item-link"
+        tabindex="-1"
+        type="button"
+      >
+        <span
+          aria-label="right"
+          class="anticon anticon-right"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="right"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+            />
+          </svg>
+        </span>
+      </button>
+    </li>
+    <li
+      class="ant-pagination-options"
+    >
+      <div
+        aria-label="Page Size"
+        class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow"
+      >
+        <div
+          class="ant-select-selector"
+        >
+          <span
+            class="ant-select-selection-search"
+          >
+            <input
+              aria-activedescendant="undefined_list_0"
+              aria-autocomplete="list"
+              aria-controls="undefined_list"
+              aria-expanded="false"
+              aria-haspopup="listbox"
+              aria-label="Page Size"
+              aria-owns="undefined_list"
+              autocomplete="off"
+              class="ant-select-selection-search-input"
+              readonly=""
+              role="combobox"
+              style="opacity:0"
+              type="search"
+              unselectable="on"
+              value=""
+            />
+          </span>
+          <span
+            class="ant-select-selection-item"
+            title="10 / page"
+          >
+            10 / page
+          </span>
+        </div>
+        <span
+          aria-hidden="true"
+          class="ant-select-arrow"
+          style="user-select:none;-webkit-user-select:none"
+          unselectable="on"
+        >
+          <span
+            aria-label="down"
+            class="anticon anticon-down ant-select-suffix"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="down"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
+    </li>
+  </ul>,
+  <br />,
+  <ul
+    class="ant-pagination ant-pagination-disabled"
+  >
+    <li
+      aria-disabled="false"
+      class="ant-pagination-prev"
+      tabindex="0"
+      title="Previous Page"
+    >
+      <button
+        class="ant-pagination-item-link"
+        tabindex="-1"
+        type="button"
+      >
+        <span
+          aria-label="left"
+          class="anticon anticon-left"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="left"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
+            />
+          </svg>
+        </span>
+      </button>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-1"
+      tabindex="0"
+      title="1"
+    >
+      <a
+        rel="nofollow"
+      >
+        1
+      </a>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-2"
+      tabindex="0"
+      title="2"
+    >
+      <a
+        rel="nofollow"
+      >
+        2
+      </a>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-3 ant-pagination-item-active"
+      tabindex="0"
+      title="3"
+    >
+      <a
+        rel="nofollow"
+      >
+        3
+      </a>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-4"
+      tabindex="0"
+      title="4"
+    >
+      <a
+        rel="nofollow"
+      >
+        4
+      </a>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-5 ant-pagination-item-before-jump-next"
+      tabindex="0"
+      title="5"
+    >
+      <a
+        rel="nofollow"
+      >
+        5
+      </a>
+    </li>
+    <li
+      class="ant-pagination-jump-next ant-pagination-jump-next-custom-icon"
+      tabindex="0"
+      title="Next 5 Pages"
+    >
+      <a
+        class="ant-pagination-item-link"
+      >
+        <div
+          class="ant-pagination-item-container"
+        >
+          <span
+            aria-label="double-right"
+            class="anticon anticon-double-right ant-pagination-item-link-icon"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="double-right"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M533.2 492.3L277.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H188c-6.7 0-10.4 7.7-6.3 12.9L447.1 512 181.7 851.1A7.98 7.98 0 00188 864h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5zm304 0L581.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H492c-6.7 0-10.4 7.7-6.3 12.9L751.1 512 485.7 851.1A7.98 7.98 0 00492 864h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"
+              />
+            </svg>
+          </span>
+          <span
+            class="ant-pagination-item-ellipsis"
+          >
+            •••
+          </span>
+        </div>
+      </a>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-50"
+      tabindex="0"
+      title="50"
+    >
+      <a
+        rel="nofollow"
+      >
+        50
+      </a>
+    </li>
+    <li
+      aria-disabled="false"
+      class="ant-pagination-next"
+      tabindex="0"
+      title="Next Page"
+    >
+      <button
+        class="ant-pagination-item-link"
+        tabindex="-1"
+        type="button"
+      >
+        <span
+          aria-label="right"
+          class="anticon anticon-right"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="right"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+            />
+          </svg>
+        </span>
+      </button>
+    </li>
+    <li
+      class="ant-pagination-options"
+    >
+      <div
+        aria-label="Page Size"
+        class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-disabled"
+      >
+        <div
+          class="ant-select-selector"
+        >
+          <span
+            class="ant-select-selection-search"
+          >
+            <input
+              aria-activedescendant="undefined_list_0"
+              aria-autocomplete="list"
+              aria-controls="undefined_list"
+              aria-expanded="false"
+              aria-haspopup="listbox"
+              aria-label="Page Size"
+              aria-owns="undefined_list"
+              autocomplete="off"
+              class="ant-select-selection-search-input"
+              disabled=""
+              readonly=""
+              role="combobox"
+              style="opacity:0"
+              type="search"
+              unselectable="on"
+              value=""
+            />
+          </span>
+          <span
+            class="ant-select-selection-item"
+            title="10 / page"
+          >
+            10 / page
+          </span>
+        </div>
+        <span
+          aria-hidden="true"
+          class="ant-select-arrow"
+          style="user-select:none;-webkit-user-select:none"
+          unselectable="on"
+        >
+          <span
+            aria-label="down"
+            class="anticon anticon-down ant-select-suffix"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="down"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
+    </li>
+  </ul>,
+]
+`;
diff --git a/components/pagination/demo/wireframe.md b/components/pagination/demo/wireframe.md
new file mode 100644
index 000000000000..15b453e7045d
--- /dev/null
+++ b/components/pagination/demo/wireframe.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+线框化样式。
+
+## en-US
+
+Wireframe style.
diff --git a/components/pagination/demo/wireframe.tsx b/components/pagination/demo/wireframe.tsx
new file mode 100644
index 000000000000..ba97dcd1a665
--- /dev/null
+++ b/components/pagination/demo/wireframe.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { ConfigProvider, Pagination } from 'antd';
+
+const App: React.FC = () => (
+  <ConfigProvider theme={{ token: { wireframe: true } }}>
+    <Pagination showSizeChanger defaultCurrent={3} total={500} />
+    <br />
+    <Pagination showSizeChanger defaultCurrent={3} total={500} disabled />
+  </ConfigProvider>
+);
+
+export default App;
diff --git a/components/pagination/index.en-US.md b/components/pagination/index.en-US.md
index 824f24175a80..30facff57d66 100644
--- a/components/pagination/index.en-US.md
+++ b/components/pagination/index.en-US.md
@@ -25,6 +25,7 @@ A long list can be divided into several pages using `Pagination`, and only one p
 <code src="./demo/total.tsx">Total number</code>
 <code src="./demo/all.tsx">Show All</code>
 <code src="./demo/itemRender.tsx">Prev and next</code>
+<code src="./demo/wireframe.tsx" debug>Wireframe</code>
 
 ## API
 
diff --git a/components/pagination/index.zh-CN.md b/components/pagination/index.zh-CN.md
index f124d7c3cde1..b4a03d1c5ddc 100644
--- a/components/pagination/index.zh-CN.md
+++ b/components/pagination/index.zh-CN.md
@@ -26,6 +26,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8y_iTJGY_aUAAAAAAA
 <code src="./demo/total.tsx">总数</code>
 <code src="./demo/all.tsx">全部展示</code>
 <code src="./demo/itemRender.tsx">上一步和下一步</code>
+<code src="./demo/wireframe.tsx" debug>线框风格</code>
 
 ## API
 
diff --git a/components/popconfirm/PurePanel.tsx b/components/popconfirm/PurePanel.tsx
index 58796e37d0fa..3a6bc0efc792 100644
--- a/components/popconfirm/PurePanel.tsx
+++ b/components/popconfirm/PurePanel.tsx
@@ -105,8 +105,7 @@ export default function PurePanel(props: PurePanelProps) {
       placement={placement}
       className={classNames(prefixCls, className)}
       style={style}
-    >
-      <Overlay {...restProps} prefixCls={prefixCls} />
-    </PopoverPurePanel>,
+      content={<Overlay prefixCls={prefixCls} {...restProps} />}
+    />,
   );
 }
diff --git a/components/popconfirm/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/popconfirm/__tests__/__snapshots__/demo-extend.test.ts.snap
index a0f5a47fee43..6b183a0b0356 100644
--- a/components/popconfirm/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/popconfirm/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -30,60 +30,64 @@ Array [
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
             >
-              <span
-                class="ant-popconfirm-message-icon"
+              <div
+                class="ant-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="ant-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
                   >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Title
+                </div>
+              </div>
               <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-buttons"
               >
-                Title
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Cancel
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    OK
+                  </span>
+                </button>
               </div>
             </div>
-            <div
-              class="ant-popconfirm-buttons"
-            >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Cancel
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  OK
-                </span>
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -119,60 +123,64 @@ Array [
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
             >
-              <span
-                class="ant-popconfirm-message-icon"
+              <div
+                class="ant-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="ant-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
                   >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Are you sure to delete this task?
+                </div>
+              </div>
               <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-buttons"
               >
-                Are you sure to delete this task?
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    No
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Yes
+                  </span>
+                </button>
               </div>
             </div>
-            <div
-              class="ant-popconfirm-buttons"
-            >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  No
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Yes
-                </span>
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -208,60 +216,64 @@ exports[`renders ./components/popconfirm/demo/dynamic-trigger.tsx extend context
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
             >
-              <span
-                class="ant-popconfirm-message-icon"
+              <div
+                class="ant-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="ant-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
                   >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Are you sure delete this task?
+                </div>
+              </div>
               <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-buttons"
               >
-                Are you sure delete this task?
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    No
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Yes
+                  </span>
+                </button>
               </div>
             </div>
-            <div
-              class="ant-popconfirm-buttons"
-            >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  No
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Yes
-                </span>
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -320,64 +332,68 @@ Array [
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
             >
-              <span
-                class="ant-popconfirm-message-icon"
+              <div
+                class="ant-popconfirm-message"
               >
                 <span
-                  aria-label="question-circle"
-                  class="anticon anticon-question-circle"
-                  role="img"
-                  style="color:red"
+                  class="ant-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="question-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
+                  <span
+                    aria-label="question-circle"
+                    class="anticon anticon-question-circle"
+                    role="img"
+                    style="color:red"
                   >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-                    />
-                    <path
-                      d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0130.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1080 0 40 40 0 10-80 0z"
-                    />
-                  </svg>
+                    <svg
+                      aria-hidden="true"
+                      data-icon="question-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+                      />
+                      <path
+                        d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0130.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1080 0 40 40 0 10-80 0z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Are you sure？
+                </div>
+              </div>
               <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-buttons"
               >
-                Are you sure？
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Cancel
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    OK
+                  </span>
+                </button>
               </div>
             </div>
-            <div
-              class="ant-popconfirm-buttons"
-            >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Cancel
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  OK
-                </span>
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -413,60 +429,64 @@ Array [
           role="tooltip"
         >
           <div
-            class="ant-popconfirm-inner-content"
+            class="ant-popover-inner-content"
           >
             <div
-              class="ant-popconfirm-message"
+              class="ant-popconfirm-inner-content"
             >
-              <span
-                class="ant-popconfirm-message-icon"
+              <div
+                class="ant-popconfirm-message"
               >
                 <span
-                  aria-label="exclamation-circle"
-                  class="anticon anticon-exclamation-circle"
-                  role="img"
+                  class="ant-popconfirm-message-icon"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="exclamation-circle"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
+                  <span
+                    aria-label="exclamation-circle"
+                    class="anticon anticon-exclamation-circle"
+                    role="img"
                   >
-                    <path
-                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                    />
-                  </svg>
+                    <svg
+                      aria-hidden="true"
+                      data-icon="exclamation-circle"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                      />
+                    </svg>
+                  </span>
                 </span>
-              </span>
+                <div
+                  class="ant-popconfirm-message-title"
+                >
+                  Are you sure？
+                </div>
+              </div>
               <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-buttons"
               >
-                Are you sure？
+                <button
+                  class="ant-btn ant-btn-default ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    No
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary ant-btn-sm"
+                  type="button"
+                >
+                  <span>
+                    Yes
+                  </span>
+                </button>
               </div>
             </div>
-            <div
-              class="ant-popconfirm-buttons"
-            >
-              <button
-                class="ant-btn ant-btn-default ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  No
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary ant-btn-sm"
-                type="button"
-              >
-                <span>
-                  Yes
-                </span>
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -510,60 +530,64 @@ exports[`renders ./components/popconfirm/demo/placement.tsx extend context corre
             role="tooltip"
           >
             <div
-              class="ant-popconfirm-inner-content"
+              class="ant-popover-inner-content"
             >
               <div
-                class="ant-popconfirm-message"
+                class="ant-popconfirm-inner-content"
               >
-                <span
-                  class="ant-popconfirm-message-icon"
+                <div
+                  class="ant-popconfirm-message"
                 >
                   <span
-                    aria-label="exclamation-circle"
-                    class="anticon anticon-exclamation-circle"
-                    role="img"
+                    class="ant-popconfirm-message-icon"
                   >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="exclamation-circle"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
+                    <span
+                      aria-label="exclamation-circle"
+                      class="anticon anticon-exclamation-circle"
+                      role="img"
                     >
-                      <path
-                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                      />
-                    </svg>
+                      <svg
+                        aria-hidden="true"
+                        data-icon="exclamation-circle"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                        />
+                      </svg>
+                    </span>
                   </span>
-                </span>
+                  <div
+                    class="ant-popconfirm-message-title"
+                  >
+                    Are you sure to delete this task?
+                  </div>
+                </div>
                 <div
-                  class="ant-popconfirm-message-title"
+                  class="ant-popconfirm-buttons"
                 >
-                  Are you sure to delete this task?
+                  <button
+                    class="ant-btn ant-btn-default ant-btn-sm"
+                    type="button"
+                  >
+                    <span>
+                      No
+                    </span>
+                  </button>
+                  <button
+                    class="ant-btn ant-btn-primary ant-btn-sm"
+                    type="button"
+                  >
+                    <span>
+                      Yes
+                    </span>
+                  </button>
                 </div>
               </div>
-              <div
-                class="ant-popconfirm-buttons"
-              >
-                <button
-                  class="ant-btn ant-btn-default ant-btn-sm"
-                  type="button"
-                >
-                  <span>
-                    No
-                  </span>
-                </button>
-                <button
-                  class="ant-btn ant-btn-primary ant-btn-sm"
-                  type="button"
-                >
-                  <span>
-                    Yes
-                  </span>
-                </button>
-              </div>
             </div>
           </div>
         </div>
@@ -597,59 +621,63 @@ exports[`renders ./components/popconfirm/demo/placement.tsx extend context corre
             role="tooltip"
           >
             <div
-              class="ant-popconfirm-inner-content"
+              class="ant-popover-inner-content"
             >
               <div
-                class="ant-popconfirm-message"
-              >
-                <span
-                  class="ant-popconfirm-message-icon"
-                >
-                  <span
-                    aria-label="exclamation-circle"
-                    class="anticon anticon-exclamation-circle"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="exclamation-circle"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <div
-                  class="ant-popconfirm-message-title"
-                >
-                  Are you sure to delete this task?
-                </div>
-              </div>
-              <div
-                class="ant-popconfirm-buttons"
-              >
-                <button
-                  class="ant-btn ant-btn-default ant-btn-sm"
-                  type="button"
+                class="ant-popconfirm-inner-content"
+              >
+                <div
+                  class="ant-popconfirm-message"
                 >
-                  <span>
-                    No
+                  <span
+                    class="ant-popconfirm-message-icon"
+                  >
+                    <span
+                      aria-label="exclamation-circle"
+                      class="anticon anticon-exclamation-circle"
+                      role="img"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-icon="exclamation-circle"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                        />
+                      </svg>
+                    </span>
                   </span>
-                </button>
-                <button
-                  class="ant-btn ant-btn-primary ant-btn-sm"
-                  type="button"
+                  <div
+                    class="ant-popconfirm-message-title"
+                  >
+                    Are you sure to delete this task?
+                  </div>
+                </div>
+                <div
+                  class="ant-popconfirm-buttons"
                 >
-                  <span>
-                    Yes
-                  </span>
-                </button>
+                  <button
+                    class="ant-btn ant-btn-default ant-btn-sm"
+                    type="button"
+                  >
+                    <span>
+                      No
+                    </span>
+                  </button>
+                  <button
+                    class="ant-btn ant-btn-primary ant-btn-sm"
+                    type="button"
+                  >
+                    <span>
+                      Yes
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
@@ -684,60 +712,64 @@ exports[`renders ./components/popconfirm/demo/placement.tsx extend context corre
             role="tooltip"
           >
             <div
-              class="ant-popconfirm-inner-content"
+              class="ant-popover-inner-content"
             >
               <div
-                class="ant-popconfirm-message"
+                class="ant-popconfirm-inner-content"
               >
-                <span
-                  class="ant-popconfirm-message-icon"
+                <div
+                  class="ant-popconfirm-message"
                 >
                   <span
-                    aria-label="exclamation-circle"
-                    class="anticon anticon-exclamation-circle"
-                    role="img"
+                    class="ant-popconfirm-message-icon"
                   >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="exclamation-circle"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
+                    <span
+                      aria-label="exclamation-circle"
+                      class="anticon anticon-exclamation-circle"
+                      role="img"
                     >
-                      <path
-                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                      />
-                    </svg>
+                      <svg
+                        aria-hidden="true"
+                        data-icon="exclamation-circle"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                        />
+                      </svg>
+                    </span>
                   </span>
-                </span>
+                  <div
+                    class="ant-popconfirm-message-title"
+                  >
+                    Are you sure to delete this task?
+                  </div>
+                </div>
                 <div
-                  class="ant-popconfirm-message-title"
+                  class="ant-popconfirm-buttons"
                 >
-                  Are you sure to delete this task?
+                  <button
+                    class="ant-btn ant-btn-default ant-btn-sm"
+                    type="button"
+                  >
+                    <span>
+                      No
+                    </span>
+                  </button>
+                  <button
+                    class="ant-btn ant-btn-primary ant-btn-sm"
+                    type="button"
+                  >
+                    <span>
+                      Yes
+                    </span>
+                  </button>
                 </div>
               </div>
-              <div
-                class="ant-popconfirm-buttons"
-              >
-                <button
-                  class="ant-btn ant-btn-default ant-btn-sm"
-                  type="button"
-                >
-                  <span>
-                    No
-                  </span>
-                </button>
-                <button
-                  class="ant-btn ant-btn-primary ant-btn-sm"
-                  type="button"
-                >
-                  <span>
-                    Yes
-                  </span>
-                </button>
-              </div>
             </div>
           </div>
         </div>
@@ -775,60 +807,64 @@ exports[`renders ./components/popconfirm/demo/placement.tsx extend context corre
             role="tooltip"
           >
             <div
-              class="ant-popconfirm-inner-content"
+              class="ant-popover-inner-content"
             >
               <div
-                class="ant-popconfirm-message"
+                class="ant-popconfirm-inner-content"
               >
-                <span
-                  class="ant-popconfirm-message-icon"
+                <div
+                  class="ant-popconfirm-message"
                 >
                   <span
-                    aria-label="exclamation-circle"
-                    class="anticon anticon-exclamation-circle"
-                    role="img"
+                    class="ant-popconfirm-message-icon"
                   >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="exclamation-circle"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
+                    <span
+                      aria-label="exclamation-circle"
+                      class="anticon anticon-exclamation-circle"
+                      role="img"
                     >
-                      <path
-                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                      />
-                    </svg>
+                      <svg
+                        aria-hidden="true"
+                        data-icon="exclamation-circle"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                        />
+                      </svg>
+                    </span>
                   </span>
-                </span>
+                  <div
+                    class="ant-popconfirm-message-title"
+                  >
+                    Are you sure to delete this task?
+                  </div>
+                </div>
                 <div
-                  class="ant-popconfirm-message-title"
+                  class="ant-popconfirm-buttons"
                 >
-                  Are you sure to delete this task?
+                  <button
+                    class="ant-btn ant-btn-default ant-btn-sm"
+                    type="button"
+                  >
+                    <span>
+                      No
+                    </span>
+                  </button>
+                  <button
+                    class="ant-btn ant-btn-primary ant-btn-sm"
+                    type="button"
+                  >
+                    <span>
+                      Yes
+                    </span>
+                  </button>
                 </div>
               </div>
-              <div
-                class="ant-popconfirm-buttons"
-              >
-                <button
-                  class="ant-btn ant-btn-default ant-btn-sm"
-                  type="button"
-                >
-                  <span>
-                    No
-                  </span>
-                </button>
-                <button
-                  class="ant-btn ant-btn-primary ant-btn-sm"
-                  type="button"
-                >
-                  <span>
-                    Yes
-                  </span>
-                </button>
-              </div>
             </div>
           </div>
         </div>
@@ -862,60 +898,64 @@ exports[`renders ./components/popconfirm/demo/placement.tsx extend context corre
             role="tooltip"
           >
             <div
-              class="ant-popconfirm-inner-content"
+              class="ant-popover-inner-content"
             >
               <div
-                class="ant-popconfirm-message"
+                class="ant-popconfirm-inner-content"
               >
-                <span
-                  class="ant-popconfirm-message-icon"
+                <div
+                  class="ant-popconfirm-message"
                 >
                   <span
-                    aria-label="exclamation-circle"
-                    class="anticon anticon-exclamation-circle"
-                    role="img"
+                    class="ant-popconfirm-message-icon"
                   >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="exclamation-circle"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
+                    <span
+                      aria-label="exclamation-circle"
+                      class="anticon anticon-exclamation-circle"
+                      role="img"
                     >
-                      <path
-                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                      />
-                    </svg>
+                      <svg
+                        aria-hidden="true"
+                        data-icon="exclamation-circle"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                        />
+                      </svg>
+                    </span>
                   </span>
-                </span>
+                  <div
+                    class="ant-popconfirm-message-title"
+                  >
+                    Are you sure to delete this task?
+                  </div>
+                </div>
                 <div
-                  class="ant-popconfirm-message-title"
+                  class="ant-popconfirm-buttons"
                 >
-                  Are you sure to delete this task?
+                  <button
+                    class="ant-btn ant-btn-default ant-btn-sm"
+                    type="button"
+                  >
+                    <span>
+                      No
+                    </span>
+                  </button>
+                  <button
+                    class="ant-btn ant-btn-primary ant-btn-sm"
+                    type="button"
+                  >
+                    <span>
+                      Yes
+                    </span>
+                  </button>
                 </div>
               </div>
-              <div
-                class="ant-popconfirm-buttons"
-              >
-                <button
-                  class="ant-btn ant-btn-default ant-btn-sm"
-                  type="button"
-                >
-                  <span>
-                    No
-                  </span>
-                </button>
-                <button
-                  class="ant-btn ant-btn-primary ant-btn-sm"
-                  type="button"
-                >
-                  <span>
-                    Yes
-                  </span>
-                </button>
-              </div>
             </div>
           </div>
         </div>
@@ -949,75 +989,170 @@ exports[`renders ./components/popconfirm/demo/placement.tsx extend context corre
             role="tooltip"
           >
             <div
-              class="ant-popconfirm-inner-content"
+              class="ant-popover-inner-content"
             >
               <div
-                class="ant-popconfirm-message"
+                class="ant-popconfirm-inner-content"
               >
-                <span
-                  class="ant-popconfirm-message-icon"
+                <div
+                  class="ant-popconfirm-message"
                 >
                   <span
-                    aria-label="exclamation-circle"
-                    class="anticon anticon-exclamation-circle"
-                    role="img"
+                    class="ant-popconfirm-message-icon"
                   >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="exclamation-circle"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
+                    <span
+                      aria-label="exclamation-circle"
+                      class="anticon anticon-exclamation-circle"
+                      role="img"
                     >
-                      <path
-                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                      />
-                    </svg>
+                      <svg
+                        aria-hidden="true"
+                        data-icon="exclamation-circle"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                        />
+                      </svg>
+                    </span>
                   </span>
-                </span>
+                  <div
+                    class="ant-popconfirm-message-title"
+                  >
+                    Are you sure to delete this task?
+                  </div>
+                </div>
                 <div
-                  class="ant-popconfirm-message-title"
+                  class="ant-popconfirm-buttons"
                 >
-                  Are you sure to delete this task?
+                  <button
+                    class="ant-btn ant-btn-default ant-btn-sm"
+                    type="button"
+                  >
+                    <span>
+                      No
+                    </span>
+                  </button>
+                  <button
+                    class="ant-btn ant-btn-primary ant-btn-sm"
+                    type="button"
+                  >
+                    <span>
+                      Yes
+                    </span>
+                  </button>
                 </div>
               </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    style="width:70px;margin-left:304px"
+  >
+    <button
+      class="ant-btn ant-btn-default"
+      type="button"
+    >
+      <span>
+        RT
+      </span>
+    </button>
+    <div>
+      <div
+        class="ant-popover ant-popconfirm"
+        style="opacity:0"
+      >
+        <div
+          class="ant-popover-content"
+        >
+          <div
+            class="ant-popover-arrow"
+          >
+            <span
+              class="ant-popover-arrow-content"
+            />
+          </div>
+          <div
+            class="ant-popover-inner"
+            role="tooltip"
+          >
+            <div
+              class="ant-popover-inner-content"
+            >
               <div
-                class="ant-popconfirm-buttons"
+                class="ant-popconfirm-inner-content"
               >
-                <button
-                  class="ant-btn ant-btn-default ant-btn-sm"
-                  type="button"
+                <div
+                  class="ant-popconfirm-message"
                 >
-                  <span>
-                    No
+                  <span
+                    class="ant-popconfirm-message-icon"
+                  >
+                    <span
+                      aria-label="exclamation-circle"
+                      class="anticon anticon-exclamation-circle"
+                      role="img"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-icon="exclamation-circle"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                        />
+                      </svg>
+                    </span>
                   </span>
-                </button>
-                <button
-                  class="ant-btn ant-btn-primary ant-btn-sm"
-                  type="button"
+                  <div
+                    class="ant-popconfirm-message-title"
+                  >
+                    Are you sure to delete this task?
+                  </div>
+                </div>
+                <div
+                  class="ant-popconfirm-buttons"
                 >
-                  <span>
-                    Yes
-                  </span>
-                </button>
+                  <button
+                    class="ant-btn ant-btn-default ant-btn-sm"
+                    type="button"
+                  >
+                    <span>
+                      No
+                    </span>
+                  </button>
+                  <button
+                    class="ant-btn ant-btn-primary ant-btn-sm"
+                    type="button"
+                  >
+                    <span>
+                      Yes
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-  <div
-    style="width:70px;margin-left:304px"
-  >
     <button
       class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
-        RT
+        Right
       </span>
     </button>
     <div>
@@ -1040,60 +1175,64 @@ exports[`renders ./components/popconfirm/demo/placement.tsx extend context corre
             role="tooltip"
           >
             <div
-              class="ant-popconfirm-inner-content"
+              class="ant-popover-inner-content"
             >
               <div
-                class="ant-popconfirm-message"
+                class="ant-popconfirm-inner-content"
               >
-                <span
-                  class="ant-popconfirm-message-icon"
+                <div
+                  class="ant-popconfirm-message"
                 >
                   <span
-                    aria-label="exclamation-circle"
-                    class="anticon anticon-exclamation-circle"
-                    role="img"
+                    class="ant-popconfirm-message-icon"
                   >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="exclamation-circle"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
+                    <span
+                      aria-label="exclamation-circle"
+                      class="anticon anticon-exclamation-circle"
+                      role="img"
                     >
-                      <path
-                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                      />
-                    </svg>
+                      <svg
+                        aria-hidden="true"
+                        data-icon="exclamation-circle"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                        />
+                      </svg>
+                    </span>
                   </span>
-                </span>
+                  <div
+                    class="ant-popconfirm-message-title"
+                  >
+                    Are you sure to delete this task?
+                  </div>
+                </div>
                 <div
-                  class="ant-popconfirm-message-title"
+                  class="ant-popconfirm-buttons"
                 >
-                  Are you sure to delete this task?
+                  <button
+                    class="ant-btn ant-btn-default ant-btn-sm"
+                    type="button"
+                  >
+                    <span>
+                      No
+                    </span>
+                  </button>
+                  <button
+                    class="ant-btn ant-btn-primary ant-btn-sm"
+                    type="button"
+                  >
+                    <span>
+                      Yes
+                    </span>
+                  </button>
                 </div>
               </div>
-              <div
-                class="ant-popconfirm-buttons"
-              >
-                <button
-                  class="ant-btn ant-btn-default ant-btn-sm"
-                  type="button"
-                >
-                  <span>
-                    No
-                  </span>
-                </button>
-                <button
-                  class="ant-btn ant-btn-primary ant-btn-sm"
-                  type="button"
-                >
-                  <span>
-                    Yes
-                  </span>
-                </button>
-              </div>
             </div>
           </div>
         </div>
@@ -1104,7 +1243,7 @@ exports[`renders ./components/popconfirm/demo/placement.tsx extend context corre
       type="button"
     >
       <span>
-        Right
+        RB
       </span>
     </button>
     <div>
@@ -1127,71 +1266,79 @@ exports[`renders ./components/popconfirm/demo/placement.tsx extend context corre
             role="tooltip"
           >
             <div
-              class="ant-popconfirm-inner-content"
+              class="ant-popover-inner-content"
             >
               <div
-                class="ant-popconfirm-message"
+                class="ant-popconfirm-inner-content"
               >
-                <span
-                  class="ant-popconfirm-message-icon"
+                <div
+                  class="ant-popconfirm-message"
                 >
                   <span
-                    aria-label="exclamation-circle"
-                    class="anticon anticon-exclamation-circle"
-                    role="img"
+                    class="ant-popconfirm-message-icon"
                   >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="exclamation-circle"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
+                    <span
+                      aria-label="exclamation-circle"
+                      class="anticon anticon-exclamation-circle"
+                      role="img"
                     >
-                      <path
-                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                      />
-                    </svg>
+                      <svg
+                        aria-hidden="true"
+                        data-icon="exclamation-circle"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                        />
+                      </svg>
+                    </span>
                   </span>
-                </span>
+                  <div
+                    class="ant-popconfirm-message-title"
+                  >
+                    Are you sure to delete this task?
+                  </div>
+                </div>
                 <div
-                  class="ant-popconfirm-message-title"
+                  class="ant-popconfirm-buttons"
                 >
-                  Are you sure to delete this task?
+                  <button
+                    class="ant-btn ant-btn-default ant-btn-sm"
+                    type="button"
+                  >
+                    <span>
+                      No
+                    </span>
+                  </button>
+                  <button
+                    class="ant-btn ant-btn-primary ant-btn-sm"
+                    type="button"
+                  >
+                    <span>
+                      Yes
+                    </span>
+                  </button>
                 </div>
               </div>
-              <div
-                class="ant-popconfirm-buttons"
-              >
-                <button
-                  class="ant-btn ant-btn-default ant-btn-sm"
-                  type="button"
-                >
-                  <span>
-                    No
-                  </span>
-                </button>
-                <button
-                  class="ant-btn ant-btn-primary ant-btn-sm"
-                  type="button"
-                >
-                  <span>
-                    Yes
-                  </span>
-                </button>
-              </div>
             </div>
           </div>
         </div>
       </div>
     </div>
+  </div>
+  <div
+    style="margin-left:70px;clear:both;white-space:nowrap"
+  >
     <button
       class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
-        RB
+        BL
       </span>
     </button>
     <div>
@@ -1214,75 +1361,75 @@ exports[`renders ./components/popconfirm/demo/placement.tsx extend context corre
             role="tooltip"
           >
             <div
-              class="ant-popconfirm-inner-content"
+              class="ant-popover-inner-content"
             >
               <div
-                class="ant-popconfirm-message"
+                class="ant-popconfirm-inner-content"
               >
-                <span
-                  class="ant-popconfirm-message-icon"
+                <div
+                  class="ant-popconfirm-message"
                 >
                   <span
-                    aria-label="exclamation-circle"
-                    class="anticon anticon-exclamation-circle"
-                    role="img"
+                    class="ant-popconfirm-message-icon"
                   >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="exclamation-circle"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
+                    <span
+                      aria-label="exclamation-circle"
+                      class="anticon anticon-exclamation-circle"
+                      role="img"
                     >
-                      <path
-                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                      />
-                    </svg>
+                      <svg
+                        aria-hidden="true"
+                        data-icon="exclamation-circle"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                        />
+                      </svg>
+                    </span>
                   </span>
-                </span>
+                  <div
+                    class="ant-popconfirm-message-title"
+                  >
+                    Are you sure to delete this task?
+                  </div>
+                </div>
                 <div
-                  class="ant-popconfirm-message-title"
+                  class="ant-popconfirm-buttons"
                 >
-                  Are you sure to delete this task?
+                  <button
+                    class="ant-btn ant-btn-default ant-btn-sm"
+                    type="button"
+                  >
+                    <span>
+                      No
+                    </span>
+                  </button>
+                  <button
+                    class="ant-btn ant-btn-primary ant-btn-sm"
+                    type="button"
+                  >
+                    <span>
+                      Yes
+                    </span>
+                  </button>
                 </div>
               </div>
-              <div
-                class="ant-popconfirm-buttons"
-              >
-                <button
-                  class="ant-btn ant-btn-default ant-btn-sm"
-                  type="button"
-                >
-                  <span>
-                    No
-                  </span>
-                </button>
-                <button
-                  class="ant-btn ant-btn-primary ant-btn-sm"
-                  type="button"
-                >
-                  <span>
-                    Yes
-                  </span>
-                </button>
-              </div>
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-  <div
-    style="margin-left:70px;clear:both;white-space:nowrap"
-  >
     <button
       class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
-        BL
+        Bottom
       </span>
     </button>
     <div>
@@ -1305,60 +1452,64 @@ exports[`renders ./components/popconfirm/demo/placement.tsx extend context corre
             role="tooltip"
           >
             <div
-              class="ant-popconfirm-inner-content"
+              class="ant-popover-inner-content"
             >
               <div
-                class="ant-popconfirm-message"
+                class="ant-popconfirm-inner-content"
               >
-                <span
-                  class="ant-popconfirm-message-icon"
+                <div
+                  class="ant-popconfirm-message"
                 >
                   <span
-                    aria-label="exclamation-circle"
-                    class="anticon anticon-exclamation-circle"
-                    role="img"
+                    class="ant-popconfirm-message-icon"
                   >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="exclamation-circle"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
+                    <span
+                      aria-label="exclamation-circle"
+                      class="anticon anticon-exclamation-circle"
+                      role="img"
                     >
-                      <path
-                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                      />
-                    </svg>
+                      <svg
+                        aria-hidden="true"
+                        data-icon="exclamation-circle"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                        />
+                      </svg>
+                    </span>
                   </span>
-                </span>
+                  <div
+                    class="ant-popconfirm-message-title"
+                  >
+                    Are you sure to delete this task?
+                  </div>
+                </div>
                 <div
-                  class="ant-popconfirm-message-title"
+                  class="ant-popconfirm-buttons"
                 >
-                  Are you sure to delete this task?
+                  <button
+                    class="ant-btn ant-btn-default ant-btn-sm"
+                    type="button"
+                  >
+                    <span>
+                      No
+                    </span>
+                  </button>
+                  <button
+                    class="ant-btn ant-btn-primary ant-btn-sm"
+                    type="button"
+                  >
+                    <span>
+                      Yes
+                    </span>
+                  </button>
                 </div>
               </div>
-              <div
-                class="ant-popconfirm-buttons"
-              >
-                <button
-                  class="ant-btn ant-btn-default ant-btn-sm"
-                  type="button"
-                >
-                  <span>
-                    No
-                  </span>
-                </button>
-                <button
-                  class="ant-btn ant-btn-primary ant-btn-sm"
-                  type="button"
-                >
-                  <span>
-                    Yes
-                  </span>
-                </button>
-              </div>
             </div>
           </div>
         </div>
@@ -1369,7 +1520,7 @@ exports[`renders ./components/popconfirm/demo/placement.tsx extend context corre
       type="button"
     >
       <span>
-        Bottom
+        BR
       </span>
     </button>
     <div>
@@ -1392,91 +1543,104 @@ exports[`renders ./components/popconfirm/demo/placement.tsx extend context corre
             role="tooltip"
           >
             <div
-              class="ant-popconfirm-inner-content"
+              class="ant-popover-inner-content"
             >
               <div
-                class="ant-popconfirm-message"
+                class="ant-popconfirm-inner-content"
               >
-                <span
-                  class="ant-popconfirm-message-icon"
+                <div
+                  class="ant-popconfirm-message"
                 >
                   <span
-                    aria-label="exclamation-circle"
-                    class="anticon anticon-exclamation-circle"
-                    role="img"
+                    class="ant-popconfirm-message-icon"
                   >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="exclamation-circle"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
+                    <span
+                      aria-label="exclamation-circle"
+                      class="anticon anticon-exclamation-circle"
+                      role="img"
                     >
-                      <path
-                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                      />
-                    </svg>
+                      <svg
+                        aria-hidden="true"
+                        data-icon="exclamation-circle"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                        />
+                      </svg>
+                    </span>
                   </span>
-                </span>
+                  <div
+                    class="ant-popconfirm-message-title"
+                  >
+                    Are you sure to delete this task?
+                  </div>
+                </div>
                 <div
-                  class="ant-popconfirm-message-title"
+                  class="ant-popconfirm-buttons"
                 >
-                  Are you sure to delete this task?
+                  <button
+                    class="ant-btn ant-btn-default ant-btn-sm"
+                    type="button"
+                  >
+                    <span>
+                      No
+                    </span>
+                  </button>
+                  <button
+                    class="ant-btn ant-btn-primary ant-btn-sm"
+                    type="button"
+                  >
+                    <span>
+                      Yes
+                    </span>
+                  </button>
                 </div>
               </div>
-              <div
-                class="ant-popconfirm-buttons"
-              >
-                <button
-                  class="ant-btn ant-btn-default ant-btn-sm"
-                  type="button"
-                >
-                  <span>
-                    No
-                  </span>
-                </button>
-                <button
-                  class="ant-btn ant-btn-primary ant-btn-sm"
-                  type="button"
-                >
-                  <span>
-                    Yes
-                  </span>
-                </button>
-              </div>
             </div>
           </div>
         </div>
       </div>
     </div>
-    <button
-      class="ant-btn ant-btn-default"
-      type="button"
+  </div>
+</div>
+`;
+
+exports[`renders ./components/popconfirm/demo/promise.tsx extend context correctly 1`] = `
+Array [
+  <button
+    class="ant-btn ant-btn-primary"
+    type="button"
+  >
+    <span>
+      Open Popconfirm with Promise
+    </span>
+  </button>,
+  <div>
+    <div
+      class="ant-popover ant-popconfirm"
+      style="opacity:0"
     >
-      <span>
-        BR
-      </span>
-    </button>
-    <div>
       <div
-        class="ant-popover ant-popconfirm"
-        style="opacity:0"
+        class="ant-popover-content"
       >
         <div
-          class="ant-popover-content"
+          class="ant-popover-arrow"
+        >
+          <span
+            class="ant-popover-arrow-content"
+          />
+        </div>
+        <div
+          class="ant-popover-inner"
+          role="tooltip"
         >
           <div
-            class="ant-popover-arrow"
-          >
-            <span
-              class="ant-popover-arrow-content"
-            />
-          </div>
-          <div
-            class="ant-popover-inner"
-            role="tooltip"
+            class="ant-popover-inner-content"
           >
             <div
               class="ant-popconfirm-inner-content"
@@ -1510,7 +1674,7 @@ exports[`renders ./components/popconfirm/demo/placement.tsx extend context corre
                 <div
                   class="ant-popconfirm-message-title"
                 >
-                  Are you sure to delete this task?
+                  Title
                 </div>
               </div>
               <div
@@ -1521,7 +1685,7 @@ exports[`renders ./components/popconfirm/demo/placement.tsx extend context corre
                   type="button"
                 >
                   <span>
-                    No
+                    Cancel
                   </span>
                 </button>
                 <button
@@ -1529,7 +1693,7 @@ exports[`renders ./components/popconfirm/demo/placement.tsx extend context corre
                   type="button"
                 >
                   <span>
-                    Yes
+                    OK
                   </span>
                 </button>
               </div>
@@ -1538,38 +1702,105 @@ exports[`renders ./components/popconfirm/demo/placement.tsx extend context corre
         </div>
       </div>
     </div>
-  </div>
-</div>
+  </div>,
+]
 `;
 
-exports[`renders ./components/popconfirm/demo/promise.tsx extend context correctly 1`] = `
+exports[`renders ./components/popconfirm/demo/render-panel.tsx extend context correctly 1`] = `
 Array [
-  <button
-    class="ant-btn ant-btn-primary"
-    type="button"
+  <div
+    class="ant-popover ant-popover-pure ant-popover-placement-top ant-popconfirm"
   >
-    <span>
-      Open Popconfirm with Promise
-    </span>
-  </button>,
-  <div>
     <div
-      class="ant-popover ant-popconfirm"
-      style="opacity:0"
+      class="ant-popover-content"
     >
       <div
-        class="ant-popover-content"
+        class="ant-popover-arrow"
+      />
+      <div
+        class="ant-popover-inner"
+        role="tooltip"
       >
         <div
-          class="ant-popover-arrow"
+          class="ant-popover-inner-content"
         >
-          <span
-            class="ant-popover-arrow-content"
-          />
+          <div
+            class="ant-popconfirm-inner-content"
+          >
+            <div
+              class="ant-popconfirm-message"
+            >
+              <span
+                class="ant-popconfirm-message-icon"
+              >
+                <span
+                  aria-label="exclamation-circle"
+                  class="anticon anticon-exclamation-circle"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="exclamation-circle"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                    />
+                  </svg>
+                </span>
+              </span>
+              <div
+                class="ant-popconfirm-message-title"
+              >
+                Are you OK?
+              </div>
+            </div>
+            <div
+              class="ant-popconfirm-buttons"
+            >
+              <button
+                class="ant-btn ant-btn-default ant-btn-sm"
+                type="button"
+              >
+                <span>
+                  Cancel
+                </span>
+              </button>
+              <button
+                class="ant-btn ant-btn-primary ant-btn-sm"
+                type="button"
+              >
+                <span>
+                  OK
+                </span>
+              </button>
+            </div>
+          </div>
         </div>
+      </div>
+    </div>
+  </div>,
+  <div
+    class="ant-popover ant-popover-pure ant-popover-placement-bottomRight ant-popconfirm"
+    style="width:250px"
+  >
+    <div
+      class="ant-popover-content"
+      style="width:250px"
+    >
+      <div
+        class="ant-popover-arrow"
+      />
+      <div
+        class="ant-popover-inner"
+        role="tooltip"
+      >
         <div
-          class="ant-popover-inner"
-          role="tooltip"
+          class="ant-popover-inner-content"
         >
           <div
             class="ant-popconfirm-inner-content"
@@ -1603,7 +1834,7 @@ Array [
               <div
                 class="ant-popconfirm-message-title"
               >
-                Title
+                Are you OK?
               </div>
             </div>
             <div
@@ -1634,7 +1865,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/popconfirm/demo/render-panel.tsx extend context correctly 1`] = `
+exports[`renders ./components/popconfirm/demo/wireframe.tsx extend context correctly 1`] = `
 Array [
   <div
     class="ant-popover ant-popover-pure ant-popover-placement-top ant-popconfirm"
@@ -1650,60 +1881,64 @@ Array [
         role="tooltip"
       >
         <div
-          class="ant-popconfirm-inner-content"
+          class="ant-popover-inner-content"
         >
           <div
-            class="ant-popconfirm-message"
+            class="ant-popconfirm-inner-content"
           >
-            <span
-              class="ant-popconfirm-message-icon"
+            <div
+              class="ant-popconfirm-message"
             >
               <span
-                aria-label="exclamation-circle"
-                class="anticon anticon-exclamation-circle"
-                role="img"
+                class="ant-popconfirm-message-icon"
               >
-                <svg
-                  aria-hidden="true"
-                  data-icon="exclamation-circle"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
+                <span
+                  aria-label="exclamation-circle"
+                  class="anticon anticon-exclamation-circle"
+                  role="img"
                 >
-                  <path
-                    d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                  />
-                </svg>
+                  <svg
+                    aria-hidden="true"
+                    data-icon="exclamation-circle"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                    />
+                  </svg>
+                </span>
               </span>
-            </span>
+              <div
+                class="ant-popconfirm-message-title"
+              >
+                Are you OK?
+              </div>
+            </div>
             <div
-              class="ant-popconfirm-message-title"
+              class="ant-popconfirm-buttons"
             >
-              Are you OK?
+              <button
+                class="ant-btn ant-btn-default ant-btn-sm"
+                type="button"
+              >
+                <span>
+                  Cancel
+                </span>
+              </button>
+              <button
+                class="ant-btn ant-btn-primary ant-btn-sm"
+                type="button"
+              >
+                <span>
+                  OK
+                </span>
+              </button>
             </div>
           </div>
-          <div
-            class="ant-popconfirm-buttons"
-          >
-            <button
-              class="ant-btn ant-btn-default ant-btn-sm"
-              type="button"
-            >
-              <span>
-                Cancel
-              </span>
-            </button>
-            <button
-              class="ant-btn ant-btn-primary ant-btn-sm"
-              type="button"
-            >
-              <span>
-                OK
-              </span>
-            </button>
-          </div>
         </div>
       </div>
     </div>
@@ -1724,60 +1959,64 @@ Array [
         role="tooltip"
       >
         <div
-          class="ant-popconfirm-inner-content"
+          class="ant-popover-inner-content"
         >
           <div
-            class="ant-popconfirm-message"
+            class="ant-popconfirm-inner-content"
           >
-            <span
-              class="ant-popconfirm-message-icon"
+            <div
+              class="ant-popconfirm-message"
             >
               <span
-                aria-label="exclamation-circle"
-                class="anticon anticon-exclamation-circle"
-                role="img"
+                class="ant-popconfirm-message-icon"
               >
-                <svg
-                  aria-hidden="true"
-                  data-icon="exclamation-circle"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
+                <span
+                  aria-label="exclamation-circle"
+                  class="anticon anticon-exclamation-circle"
+                  role="img"
                 >
-                  <path
-                    d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                  />
-                </svg>
+                  <svg
+                    aria-hidden="true"
+                    data-icon="exclamation-circle"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                    />
+                  </svg>
+                </span>
               </span>
-            </span>
+              <div
+                class="ant-popconfirm-message-title"
+              >
+                Are you OK?
+              </div>
+            </div>
             <div
-              class="ant-popconfirm-message-title"
+              class="ant-popconfirm-buttons"
             >
-              Are you OK?
+              <button
+                class="ant-btn ant-btn-default ant-btn-sm"
+                type="button"
+              >
+                <span>
+                  Cancel
+                </span>
+              </button>
+              <button
+                class="ant-btn ant-btn-primary ant-btn-sm"
+                type="button"
+              >
+                <span>
+                  OK
+                </span>
+              </button>
             </div>
           </div>
-          <div
-            class="ant-popconfirm-buttons"
-          >
-            <button
-              class="ant-btn ant-btn-default ant-btn-sm"
-              type="button"
-            >
-              <span>
-                Cancel
-              </span>
-            </button>
-            <button
-              class="ant-btn ant-btn-primary ant-btn-sm"
-              type="button"
-            >
-              <span>
-                OK
-              </span>
-            </button>
-          </div>
         </div>
       </div>
     </div>
diff --git a/components/popconfirm/__tests__/__snapshots__/demo.test.ts.snap b/components/popconfirm/__tests__/__snapshots__/demo.test.ts.snap
index 9f5cb0f01003..eb4fd32ea214 100644
--- a/components/popconfirm/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/popconfirm/__tests__/__snapshots__/demo.test.ts.snap
@@ -214,71 +214,156 @@ Array [
         role="tooltip"
       >
         <div
-          class="ant-popconfirm-inner-content"
+          class="ant-popover-inner-content"
         >
           <div
-            class="ant-popconfirm-message"
+            class="ant-popconfirm-inner-content"
           >
-            <span
-              class="ant-popconfirm-message-icon"
+            <div
+              class="ant-popconfirm-message"
             >
               <span
-                aria-label="exclamation-circle"
-                class="anticon anticon-exclamation-circle"
-                role="img"
+                class="ant-popconfirm-message-icon"
               >
-                <svg
-                  aria-hidden="true"
-                  data-icon="exclamation-circle"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
+                <span
+                  aria-label="exclamation-circle"
+                  class="anticon anticon-exclamation-circle"
+                  role="img"
                 >
-                  <path
-                    d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                  />
-                </svg>
+                  <svg
+                    aria-hidden="true"
+                    data-icon="exclamation-circle"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                    />
+                  </svg>
+                </span>
               </span>
-            </span>
+              <div
+                class="ant-popconfirm-message-title"
+              >
+                Are you OK?
+              </div>
+            </div>
             <div
-              class="ant-popconfirm-message-title"
+              class="ant-popconfirm-buttons"
             >
-              Are you OK?
+              <button
+                class="ant-btn ant-btn-default ant-btn-sm"
+                type="button"
+              >
+                <span>
+                  Cancel
+                </span>
+              </button>
+              <button
+                class="ant-btn ant-btn-primary ant-btn-sm"
+                type="button"
+              >
+                <span>
+                  OK
+                </span>
+              </button>
             </div>
           </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  <div
+    class="ant-popover ant-popover-pure ant-popover-placement-bottomRight ant-popconfirm"
+    style="width:250px"
+  >
+    <div
+      class="ant-popover-content"
+      style="width:250px"
+    >
+      <div
+        class="ant-popover-arrow"
+      />
+      <div
+        class="ant-popover-inner"
+        role="tooltip"
+      >
+        <div
+          class="ant-popover-inner-content"
+        >
           <div
-            class="ant-popconfirm-buttons"
+            class="ant-popconfirm-inner-content"
           >
-            <button
-              class="ant-btn ant-btn-default ant-btn-sm"
-              type="button"
+            <div
+              class="ant-popconfirm-message"
             >
-              <span>
-                Cancel
+              <span
+                class="ant-popconfirm-message-icon"
+              >
+                <span
+                  aria-label="exclamation-circle"
+                  class="anticon anticon-exclamation-circle"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="exclamation-circle"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                    />
+                  </svg>
+                </span>
               </span>
-            </button>
-            <button
-              class="ant-btn ant-btn-primary ant-btn-sm"
-              type="button"
+              <div
+                class="ant-popconfirm-message-title"
+              >
+                Are you OK?
+              </div>
+            </div>
+            <div
+              class="ant-popconfirm-buttons"
             >
-              <span>
-                OK
-              </span>
-            </button>
+              <button
+                class="ant-btn ant-btn-default ant-btn-sm"
+                type="button"
+              >
+                <span>
+                  Cancel
+                </span>
+              </button>
+              <button
+                class="ant-btn ant-btn-primary ant-btn-sm"
+                type="button"
+              >
+                <span>
+                  OK
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
     </div>
   </div>,
+]
+`;
+
+exports[`renders ./components/popconfirm/demo/wireframe.tsx correctly 1`] = `
+Array [
   <div
-    class="ant-popover ant-popover-pure ant-popover-placement-bottomRight ant-popconfirm"
-    style="width:250px"
+    class="ant-popover ant-popover-pure ant-popover-placement-top ant-popconfirm"
   >
     <div
       class="ant-popover-content"
-      style="width:250px"
     >
       <div
         class="ant-popover-arrow"
@@ -288,59 +373,141 @@ Array [
         role="tooltip"
       >
         <div
-          class="ant-popconfirm-inner-content"
+          class="ant-popover-inner-content"
         >
           <div
-            class="ant-popconfirm-message"
+            class="ant-popconfirm-inner-content"
           >
-            <span
-              class="ant-popconfirm-message-icon"
+            <div
+              class="ant-popconfirm-message"
             >
               <span
-                aria-label="exclamation-circle"
-                class="anticon anticon-exclamation-circle"
-                role="img"
+                class="ant-popconfirm-message-icon"
               >
-                <svg
-                  aria-hidden="true"
-                  data-icon="exclamation-circle"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
+                <span
+                  aria-label="exclamation-circle"
+                  class="anticon anticon-exclamation-circle"
+                  role="img"
                 >
-                  <path
-                    d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                  />
-                </svg>
+                  <svg
+                    aria-hidden="true"
+                    data-icon="exclamation-circle"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                    />
+                  </svg>
+                </span>
               </span>
-            </span>
+              <div
+                class="ant-popconfirm-message-title"
+              >
+                Are you OK?
+              </div>
+            </div>
             <div
-              class="ant-popconfirm-message-title"
+              class="ant-popconfirm-buttons"
             >
-              Are you OK?
+              <button
+                class="ant-btn ant-btn-default ant-btn-sm"
+                type="button"
+              >
+                <span>
+                  Cancel
+                </span>
+              </button>
+              <button
+                class="ant-btn ant-btn-primary ant-btn-sm"
+                type="button"
+              >
+                <span>
+                  OK
+                </span>
+              </button>
             </div>
           </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  <div
+    class="ant-popover ant-popover-pure ant-popover-placement-bottomRight ant-popconfirm"
+    style="width:250px"
+  >
+    <div
+      class="ant-popover-content"
+      style="width:250px"
+    >
+      <div
+        class="ant-popover-arrow"
+      />
+      <div
+        class="ant-popover-inner"
+        role="tooltip"
+      >
+        <div
+          class="ant-popover-inner-content"
+        >
           <div
-            class="ant-popconfirm-buttons"
+            class="ant-popconfirm-inner-content"
           >
-            <button
-              class="ant-btn ant-btn-default ant-btn-sm"
-              type="button"
+            <div
+              class="ant-popconfirm-message"
             >
-              <span>
-                Cancel
+              <span
+                class="ant-popconfirm-message-icon"
+              >
+                <span
+                  aria-label="exclamation-circle"
+                  class="anticon anticon-exclamation-circle"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="exclamation-circle"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                    />
+                  </svg>
+                </span>
               </span>
-            </button>
-            <button
-              class="ant-btn ant-btn-primary ant-btn-sm"
-              type="button"
+              <div
+                class="ant-popconfirm-message-title"
+              >
+                Are you OK?
+              </div>
+            </div>
+            <div
+              class="ant-popconfirm-buttons"
             >
-              <span>
-                OK
-              </span>
-            </button>
+              <button
+                class="ant-btn ant-btn-default ant-btn-sm"
+                type="button"
+              >
+                <span>
+                  Cancel
+                </span>
+              </button>
+              <button
+                class="ant-btn ant-btn-primary ant-btn-sm"
+                type="button"
+              >
+                <span>
+                  OK
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
diff --git a/components/popconfirm/__tests__/__snapshots__/index.test.tsx.snap b/components/popconfirm/__tests__/__snapshots__/index.test.tsx.snap
index a2f125ceb489..316c4e743529 100644
--- a/components/popconfirm/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/popconfirm/__tests__/__snapshots__/index.test.tsx.snap
@@ -2,8 +2,8 @@
 
 exports[`Popconfirm rtl render component should be rendered correctly in RTL direction 1`] = `<span />`;
 
-exports[`Popconfirm should show overlay when trigger is clicked 1`] = `"<div class="ant-popover-content"><div class="ant-popover-arrow"><span class="ant-popover-arrow-content"></span></div><div class="ant-popover-inner" role="tooltip"><div class="ant-popconfirm-inner-content"><div class="ant-popconfirm-message"><span class="ant-popconfirm-message-icon"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span></span><div class="ant-popconfirm-message-title">code</div></div><div class="ant-popconfirm-buttons"><button type="button" class="ant-btn ant-btn-default ant-btn-sm"><span>Cancel</span></button><button type="button" class="ant-btn ant-btn-primary ant-btn-sm"><span>OK</span></button></div></div></div></div>"`;
+exports[`Popconfirm should show overlay when trigger is clicked 1`] = `"<div class="ant-popover-content"><div class="ant-popover-arrow"><span class="ant-popover-arrow-content"></span></div><div class="ant-popover-inner" role="tooltip"><div class="ant-popover-inner-content"><div class="ant-popconfirm-inner-content"><div class="ant-popconfirm-message"><span class="ant-popconfirm-message-icon"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span></span><div class="ant-popconfirm-message-title">code</div></div><div class="ant-popconfirm-buttons"><button type="button" class="ant-btn ant-btn-default ant-btn-sm"><span>Cancel</span></button><button type="button" class="ant-btn ant-btn-primary ant-btn-sm"><span>OK</span></button></div></div></div></div></div>"`;
 
-exports[`Popconfirm should show overlay when trigger is clicked 2`] = `"<div class="ant-popover-content"><div class="ant-popover-arrow"><span class="ant-popover-arrow-content"></span></div><div class="ant-popover-inner" role="tooltip"><div class="ant-popconfirm-inner-content"><div class="ant-popconfirm-message"><span class="ant-popconfirm-message-icon"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span></span><div class="ant-popconfirm-message-title">code</div></div><div class="ant-popconfirm-buttons"><button type="button" class="ant-btn ant-btn-default ant-btn-sm"><span>Cancel</span></button><button type="button" class="ant-btn ant-btn-primary ant-btn-sm"><span>OK</span></button></div></div></div></div>"`;
+exports[`Popconfirm should show overlay when trigger is clicked 2`] = `"<div class="ant-popover-content"><div class="ant-popover-arrow"><span class="ant-popover-arrow-content"></span></div><div class="ant-popover-inner" role="tooltip"><div class="ant-popover-inner-content"><div class="ant-popconfirm-inner-content"><div class="ant-popconfirm-message"><span class="ant-popconfirm-message-icon"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span></span><div class="ant-popconfirm-message-title">code</div></div><div class="ant-popconfirm-buttons"><button type="button" class="ant-btn ant-btn-default ant-btn-sm"><span>Cancel</span></button><button type="button" class="ant-btn ant-btn-primary ant-btn-sm"><span>OK</span></button></div></div></div></div></div>"`;
 
-exports[`Popconfirm shows content for render functions 1`] = `"<div class="ant-popover-content"><div class="ant-popover-arrow"><span class="ant-popover-arrow-content"></span></div><div class="ant-popover-inner" role="tooltip"><div class="ant-popconfirm-inner-content"><div class="ant-popconfirm-message"><span class="ant-popconfirm-message-icon"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span></span><div class="ant-popconfirm-message-title">some-title</div></div><div class="ant-popconfirm-buttons"><button type="button" class="ant-btn ant-btn-default ant-btn-sm"><span>Cancel</span></button><button type="button" class="ant-btn ant-btn-primary ant-btn-sm"><span>OK</span></button></div></div></div></div>"`;
+exports[`Popconfirm shows content for render functions 1`] = `"<div class="ant-popover-content"><div class="ant-popover-arrow"><span class="ant-popover-arrow-content"></span></div><div class="ant-popover-inner" role="tooltip"><div class="ant-popover-inner-content"><div class="ant-popconfirm-inner-content"><div class="ant-popconfirm-message"><span class="ant-popconfirm-message-icon"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span></span><div class="ant-popconfirm-message-title">some-title</div></div><div class="ant-popconfirm-buttons"><button type="button" class="ant-btn ant-btn-default ant-btn-sm"><span>Cancel</span></button><button type="button" class="ant-btn ant-btn-primary ant-btn-sm"><span>OK</span></button></div></div></div></div></div>"`;
diff --git a/components/popconfirm/demo/wireframe.md b/components/popconfirm/demo/wireframe.md
new file mode 100644
index 000000000000..5dfe42d65559
--- /dev/null
+++ b/components/popconfirm/demo/wireframe.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+线框风格。
+
+## en-US
+
+Wireframe style.
diff --git a/components/popconfirm/demo/wireframe.tsx b/components/popconfirm/demo/wireframe.tsx
new file mode 100644
index 000000000000..1c6202f00a99
--- /dev/null
+++ b/components/popconfirm/demo/wireframe.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { ConfigProvider, Popconfirm } from 'antd';
+
+const { _InternalPanelDoNotUseOrYouWillBeFired: InternalPopconfirm } = Popconfirm;
+
+const App: React.FC = () => (
+  <ConfigProvider theme={{ token: { wireframe: true } }}>
+    <InternalPopconfirm title="Are you OK?" />
+    <InternalPopconfirm title="Are you OK?" placement="bottomRight" style={{ width: 250 }} />
+  </ConfigProvider>
+);
+
+export default App;
diff --git a/components/popconfirm/index.en-US.md b/components/popconfirm/index.en-US.md
index f3e73494c86c..00714547ace3 100644
--- a/components/popconfirm/index.en-US.md
+++ b/components/popconfirm/index.en-US.md
@@ -26,6 +26,7 @@ The difference with the `confirm` modal dialog is that it's more lightweight tha
 <code src="./demo/async.tsx">Asynchronously close</code>
 <code src="./demo/promise.tsx">Asynchronously close on Promise</code>
 <code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
+<code src="./demo/wireframe.tsx" debug>Wireframe</code>
 
 ## API
 
diff --git a/components/popconfirm/index.tsx b/components/popconfirm/index.tsx
index 858985c97e3f..cf0a4651ae1e 100644
--- a/components/popconfirm/index.tsx
+++ b/components/popconfirm/index.tsx
@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import KeyCode from 'rc-util/lib/KeyCode';
 import * as React from 'react';
+import omit from 'rc-util/lib/omit';
 import type { ButtonProps, LegacyButtonType } from '../button/button';
 import { ConfigContext } from '../config-provider';
 import Popover from '../popover';
@@ -10,7 +11,6 @@ import type { AbstractTooltipProps } from '../tooltip';
 import type { RenderFunction } from '../_util/getRenderPropValue';
 import { cloneElement } from '../_util/reactNode';
 import PurePanel, { Overlay } from './PurePanel';
-
 import usePopconfirmStyle from './style';
 
 export interface PopconfirmProps extends AbstractTooltipProps {
@@ -94,14 +94,14 @@ const Popconfirm = React.forwardRef<unknown, PopconfirmProps>((props, ref) => {
 
   return wrapSSR(
     <Popover
-      {...restProps}
+      {...omit(restProps, ['title'])}
       trigger={trigger}
       placement={placement}
       onOpenChange={onOpenChange}
       open={open}
       ref={ref}
       overlayClassName={overlayClassNames}
-      _overlay={
+      content={
         <Overlay
           okType={okType}
           icon={icon}
diff --git a/components/popconfirm/index.zh-CN.md b/components/popconfirm/index.zh-CN.md
index a595bebbcbd1..35b3768fd8e6 100644
--- a/components/popconfirm/index.zh-CN.md
+++ b/components/popconfirm/index.zh-CN.md
@@ -27,6 +27,7 @@ demo:
 <code src="./demo/async.tsx">异步关闭</code>
 <code src="./demo/promise.tsx">基于 Promise 的异步关闭</code>
 <code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
+<code src="./demo/wireframe.tsx" debug>线框风格</code>
 
 ## API
 
diff --git a/components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap
index 26071b35cb93..61409fa7d067 100644
--- a/components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1130,3 +1130,76 @@ exports[`renders ./components/popover/demo/triggerType.tsx extend context correc
   </div>
 </div>
 `;
+
+exports[`renders ./components/popover/demo/wireframe.tsx extend context correctly 1`] = `
+Array [
+  <div
+    class="ant-popover ant-popover-pure ant-popover-placement-top"
+  >
+    <div
+      class="ant-popover-content"
+    >
+      <div
+        class="ant-popover-arrow"
+      />
+      <div
+        class="ant-popover-inner"
+        role="tooltip"
+      >
+        <div
+          class="ant-popover-title"
+        >
+          Title
+        </div>
+        <div
+          class="ant-popover-inner-content"
+        >
+          <div>
+            <p>
+              Content
+            </p>
+            <p>
+              Content
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  <div
+    class="ant-popover ant-popover-pure ant-popover-placement-bottomLeft"
+    style="width:250px"
+  >
+    <div
+      class="ant-popover-content"
+      style="width:250px"
+    >
+      <div
+        class="ant-popover-arrow"
+      />
+      <div
+        class="ant-popover-inner"
+        role="tooltip"
+      >
+        <div
+          class="ant-popover-title"
+        >
+          Title
+        </div>
+        <div
+          class="ant-popover-inner-content"
+        >
+          <div>
+            <p>
+              Content
+            </p>
+            <p>
+              Content
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+]
+`;
diff --git a/components/popover/__tests__/__snapshots__/demo.test.ts.snap b/components/popover/__tests__/__snapshots__/demo.test.ts.snap
index 454226edea1b..746b1d070cd2 100644
--- a/components/popover/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/popover/__tests__/__snapshots__/demo.test.ts.snap
@@ -274,3 +274,76 @@ exports[`renders ./components/popover/demo/triggerType.tsx correctly 1`] = `
   </button>
 </div>
 `;
+
+exports[`renders ./components/popover/demo/wireframe.tsx correctly 1`] = `
+Array [
+  <div
+    class="ant-popover ant-popover-pure ant-popover-placement-top"
+  >
+    <div
+      class="ant-popover-content"
+    >
+      <div
+        class="ant-popover-arrow"
+      />
+      <div
+        class="ant-popover-inner"
+        role="tooltip"
+      >
+        <div
+          class="ant-popover-title"
+        >
+          Title
+        </div>
+        <div
+          class="ant-popover-inner-content"
+        >
+          <div>
+            <p>
+              Content
+            </p>
+            <p>
+              Content
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  <div
+    class="ant-popover ant-popover-pure ant-popover-placement-bottomLeft"
+    style="width:250px"
+  >
+    <div
+      class="ant-popover-content"
+      style="width:250px"
+    >
+      <div
+        class="ant-popover-arrow"
+      />
+      <div
+        class="ant-popover-inner"
+        role="tooltip"
+      >
+        <div
+          class="ant-popover-title"
+        >
+          Title
+        </div>
+        <div
+          class="ant-popover-inner-content"
+        >
+          <div>
+            <p>
+              Content
+            </p>
+            <p>
+              Content
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+]
+`;
diff --git a/components/popover/demo/wireframe.md b/components/popover/demo/wireframe.md
new file mode 100644
index 000000000000..da41370eba12
--- /dev/null
+++ b/components/popover/demo/wireframe.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+线框样式。
+
+## en-US
+
+Wireframe style.
diff --git a/components/popover/demo/wireframe.tsx b/components/popover/demo/wireframe.tsx
new file mode 100644
index 000000000000..c8cd85cef752
--- /dev/null
+++ b/components/popover/demo/wireframe.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { ConfigProvider, Popover } from 'antd';
+
+const { _InternalPanelDoNotUseOrYouWillBeFired: InternalPopover } = Popover;
+
+const content = (
+  <div>
+    <p>Content</p>
+    <p>Content</p>
+  </div>
+);
+
+const App: React.FC = () => (
+  <ConfigProvider theme={{ token: { wireframe: true } }}>
+    <InternalPopover content={content} title="Title" />
+    <InternalPopover
+      content={content}
+      title="Title"
+      placement="bottomLeft"
+      style={{ width: 250 }}
+    />
+  </ConfigProvider>
+);
+
+export default App;
diff --git a/components/popover/index.en-US.md b/components/popover/index.en-US.md
index 2eb08f0101dc..f39cdc7518db 100644
--- a/components/popover/index.en-US.md
+++ b/components/popover/index.en-US.md
@@ -25,6 +25,7 @@ Comparing with `Tooltip`, besides information `Popover` card can also provide ac
 <code src="./demo/arrow-point-at-center.tsx">Arrow pointing</code>
 <code src="./demo/hover-with-click.tsx">Hover with click popover</code>
 <code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
+<code src="./demo/wireframe.tsx" debug>Wireframe</code>
 
 ## API
 
diff --git a/components/popover/index.tsx b/components/popover/index.tsx
index b655890d2456..8112324070f7 100644
--- a/components/popover/index.tsx
+++ b/components/popover/index.tsx
@@ -13,8 +13,6 @@ import useStyle from './style';
 export interface PopoverProps extends AbstractTooltipProps {
   title?: React.ReactNode | RenderFunction;
   content?: React.ReactNode | RenderFunction;
-  /** @internal Used For Popconfirm. Safe to remove. */
-  _overlay?: React.ReactNode;
 }
 
 interface OverlayPorps {
@@ -41,7 +39,6 @@ const Popover = React.forwardRef<unknown, PopoverProps>((props, ref) => {
     title,
     content,
     overlayClassName,
-    _overlay,
     placement = 'top',
     trigger = 'hover',
     mouseEnterDelay = 0.1,
@@ -68,7 +65,7 @@ const Popover = React.forwardRef<unknown, PopoverProps>((props, ref) => {
       prefixCls={prefixCls}
       overlayClassName={overlayCls}
       ref={ref}
-      overlay={_overlay || <Overlay prefixCls={prefixCls} title={title} content={content} />}
+      overlay={<Overlay prefixCls={prefixCls} title={title} content={content} />}
       transitionName={getTransitionName(rootPrefixCls, 'zoom-big', otherProps.transitionName)}
       data-popover-inject
     />,
diff --git a/components/popover/index.zh-CN.md b/components/popover/index.zh-CN.md
index be19d9dd83f6..a0ae1def96c3 100644
--- a/components/popover/index.zh-CN.md
+++ b/components/popover/index.zh-CN.md
@@ -26,6 +26,7 @@ demo:
 <code src="./demo/arrow-point-at-center.tsx">箭头指向</code>
 <code src="./demo/hover-with-click.tsx">悬停点击弹出窗口</code>
 <code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
+<code src="./demo/wireframe.tsx" debug>线框风格</code>
 
 ## API
 
diff --git a/components/radio/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/radio/__tests__/__snapshots__/demo-extend.test.ts.snap
index 9058853ae15e..f04a2c2bbaad 100644
--- a/components/radio/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/radio/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1372,3 +1372,175 @@ Array [
   </div>,
 ]
 `;
+
+exports[`renders ./components/radio/demo/wireframe.tsx extend context correctly 1`] = `
+Array [
+  <div
+    class="ant-radio-group ant-radio-group-outline"
+  >
+    <label
+      class="ant-radio-wrapper ant-radio-wrapper-checked"
+    >
+      <span
+        class="ant-radio ant-radio-checked"
+      >
+        <input
+          checked=""
+          class="ant-radio-input"
+          type="radio"
+          value="1"
+        />
+        <span
+          class="ant-radio-inner"
+        />
+      </span>
+      <span>
+        A
+      </span>
+    </label>
+    <label
+      class="ant-radio-wrapper"
+    >
+      <span
+        class="ant-radio"
+      >
+        <input
+          class="ant-radio-input"
+          type="radio"
+          value="2"
+        />
+        <span
+          class="ant-radio-inner"
+        />
+      </span>
+      <span>
+        B
+      </span>
+    </label>
+    <label
+      class="ant-radio-wrapper"
+    >
+      <span
+        class="ant-radio"
+      >
+        <input
+          class="ant-radio-input"
+          type="radio"
+          value="3"
+        />
+        <span
+          class="ant-radio-inner"
+        />
+      </span>
+      <span>
+        C
+      </span>
+    </label>
+    <label
+      class="ant-radio-wrapper"
+    >
+      <span
+        class="ant-radio"
+      >
+        <input
+          class="ant-radio-input"
+          type="radio"
+          value="4"
+        />
+        <span
+          class="ant-radio-inner"
+        />
+      </span>
+      <span>
+        D
+      </span>
+    </label>
+  </div>,
+  <br />,
+  <div
+    class="ant-radio-group ant-radio-group-outline"
+  >
+    <label
+      class="ant-radio-wrapper ant-radio-wrapper-checked ant-radio-wrapper-disabled"
+    >
+      <span
+        class="ant-radio ant-radio-checked ant-radio-disabled"
+      >
+        <input
+          checked=""
+          class="ant-radio-input"
+          disabled=""
+          type="radio"
+          value="1"
+        />
+        <span
+          class="ant-radio-inner"
+        />
+      </span>
+      <span>
+        A
+      </span>
+    </label>
+    <label
+      class="ant-radio-wrapper ant-radio-wrapper-disabled"
+    >
+      <span
+        class="ant-radio ant-radio-disabled"
+      >
+        <input
+          class="ant-radio-input"
+          disabled=""
+          type="radio"
+          value="2"
+        />
+        <span
+          class="ant-radio-inner"
+        />
+      </span>
+      <span>
+        B
+      </span>
+    </label>
+    <label
+      class="ant-radio-wrapper ant-radio-wrapper-disabled"
+    >
+      <span
+        class="ant-radio ant-radio-disabled"
+      >
+        <input
+          class="ant-radio-input"
+          disabled=""
+          type="radio"
+          value="3"
+        />
+        <span
+          class="ant-radio-inner"
+        />
+      </span>
+      <span>
+        C
+      </span>
+    </label>
+    <label
+      class="ant-radio-wrapper ant-radio-wrapper-disabled"
+    >
+      <span
+        class="ant-radio ant-radio-disabled"
+      >
+        <input
+          class="ant-radio-input"
+          disabled=""
+          type="radio"
+          value="4"
+        />
+        <span
+          class="ant-radio-inner"
+        />
+      </span>
+      <span>
+        D
+      </span>
+    </label>
+  </div>,
+]
+`;
diff --git a/components/radio/__tests__/__snapshots__/demo.test.ts.snap b/components/radio/__tests__/__snapshots__/demo.test.ts.snap
index 1329b6fd0ce5..dba0a7465448 100644
--- a/components/radio/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/radio/__tests__/__snapshots__/demo.test.ts.snap
@@ -1372,3 +1372,175 @@ Array [
   </div>,
 ]
 `;
+
+exports[`renders ./components/radio/demo/wireframe.tsx correctly 1`] = `
+Array [
+  <div
+    class="ant-radio-group ant-radio-group-outline"
+  >
+    <label
+      class="ant-radio-wrapper ant-radio-wrapper-checked"
+    >
+      <span
+        class="ant-radio ant-radio-checked"
+      >
+        <input
+          checked=""
+          class="ant-radio-input"
+          type="radio"
+          value="1"
+        />
+        <span
+          class="ant-radio-inner"
+        />
+      </span>
+      <span>
+        A
+      </span>
+    </label>
+    <label
+      class="ant-radio-wrapper"
+    >
+      <span
+        class="ant-radio"
+      >
+        <input
+          class="ant-radio-input"
+          type="radio"
+          value="2"
+        />
+        <span
+          class="ant-radio-inner"
+        />
+      </span>
+      <span>
+        B
+      </span>
+    </label>
+    <label
+      class="ant-radio-wrapper"
+    >
+      <span
+        class="ant-radio"
+      >
+        <input
+          class="ant-radio-input"
+          type="radio"
+          value="3"
+        />
+        <span
+          class="ant-radio-inner"
+        />
+      </span>
+      <span>
+        C
+      </span>
+    </label>
+    <label
+      class="ant-radio-wrapper"
+    >
+      <span
+        class="ant-radio"
+      >
+        <input
+          class="ant-radio-input"
+          type="radio"
+          value="4"
+        />
+        <span
+          class="ant-radio-inner"
+        />
+      </span>
+      <span>
+        D
+      </span>
+    </label>
+  </div>,
+  <br />,
+  <div
+    class="ant-radio-group ant-radio-group-outline"
+  >
+    <label
+      class="ant-radio-wrapper ant-radio-wrapper-checked ant-radio-wrapper-disabled"
+    >
+      <span
+        class="ant-radio ant-radio-checked ant-radio-disabled"
+      >
+        <input
+          checked=""
+          class="ant-radio-input"
+          disabled=""
+          type="radio"
+          value="1"
+        />
+        <span
+          class="ant-radio-inner"
+        />
+      </span>
+      <span>
+        A
+      </span>
+    </label>
+    <label
+      class="ant-radio-wrapper ant-radio-wrapper-disabled"
+    >
+      <span
+        class="ant-radio ant-radio-disabled"
+      >
+        <input
+          class="ant-radio-input"
+          disabled=""
+          type="radio"
+          value="2"
+        />
+        <span
+          class="ant-radio-inner"
+        />
+      </span>
+      <span>
+        B
+      </span>
+    </label>
+    <label
+      class="ant-radio-wrapper ant-radio-wrapper-disabled"
+    >
+      <span
+        class="ant-radio ant-radio-disabled"
+      >
+        <input
+          class="ant-radio-input"
+          disabled=""
+          type="radio"
+          value="3"
+        />
+        <span
+          class="ant-radio-inner"
+        />
+      </span>
+      <span>
+        C
+      </span>
+    </label>
+    <label
+      class="ant-radio-wrapper ant-radio-wrapper-disabled"
+    >
+      <span
+        class="ant-radio ant-radio-disabled"
+      >
+        <input
+          class="ant-radio-input"
+          disabled=""
+          type="radio"
+          value="4"
+        />
+        <span
+          class="ant-radio-inner"
+        />
+      </span>
+      <span>
+        D
+      </span>
+    </label>
+  </div>,
+]
+`;
diff --git a/components/radio/demo/wireframe.md b/components/radio/demo/wireframe.md
new file mode 100644
index 000000000000..5dfe42d65559
--- /dev/null
+++ b/components/radio/demo/wireframe.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+线框风格。
+
+## en-US
+
+Wireframe style.
diff --git a/components/radio/demo/wireframe.tsx b/components/radio/demo/wireframe.tsx
new file mode 100644
index 000000000000..00c1581e779b
--- /dev/null
+++ b/components/radio/demo/wireframe.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { ConfigProvider, Radio } from 'antd';
+
+const App: React.FC = () => (
+  <ConfigProvider theme={{ token: { wireframe: true } }}>
+    <Radio.Group value={1}>
+      <Radio value={1}>A</Radio>
+      <Radio value={2}>B</Radio>
+      <Radio value={3}>C</Radio>
+      <Radio value={4}>D</Radio>
+    </Radio.Group>
+    <br />
+    <Radio.Group value={1} disabled>
+      <Radio value={1}>A</Radio>
+      <Radio value={2}>B</Radio>
+      <Radio value={3}>C</Radio>
+      <Radio value={4}>D</Radio>
+    </Radio.Group>
+  </ConfigProvider>
+);
+
+export default App;
diff --git a/components/radio/index.en-US.md b/components/radio/index.en-US.md
index 6055c61c0cc1..9743901483ec 100644
--- a/components/radio/index.en-US.md
+++ b/components/radio/index.en-US.md
@@ -26,7 +26,8 @@ Radio.
 <code src="./demo/radiogroup-with-name.tsx">Radio.Group with name</code>
 <code src="./demo/size.tsx">Size</code>
 <code src="./demo/radiobutton-solid.tsx">Solid radio button</code>
-<code src="./demo/badge.tsx" debug>测试 Badge 的样式</code>
+<code src="./demo/badge.tsx" debug>Badge style</code>
+<code src="./demo/wireframe.tsx" debug>Wireframe</code>
 
 ## API
 
diff --git a/components/radio/index.zh-CN.md b/components/radio/index.zh-CN.md
index c86d251da49b..40eb8a145873 100644
--- a/components/radio/index.zh-CN.md
+++ b/components/radio/index.zh-CN.md
@@ -27,7 +27,8 @@ demo:
 <code src="./demo/radiogroup-with-name.tsx">单选组合 - 配合 name 使用</code>
 <code src="./demo/size.tsx">大小</code>
 <code src="./demo/radiobutton-solid.tsx">填底的按钮样式</code>
-<code src="./demo/badge.tsx" debug>Badge style</code>
+<code src="./demo/badge.tsx" debug>测试 Badge 的样式</code>
+<code src="./demo/wireframe.tsx" debug>线框风格</code>
 
 ## API
 
diff --git a/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
index d0311c2e7157..a1e5c8d479fb 100644
--- a/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -259,60 +259,64 @@ exports[`renders ./components/space/demo/base.tsx extend context correctly 1`] =
             role="tooltip"
           >
             <div
-              class="ant-popconfirm-inner-content"
+              class="ant-popover-inner-content"
             >
               <div
-                class="ant-popconfirm-message"
+                class="ant-popconfirm-inner-content"
               >
-                <span
-                  class="ant-popconfirm-message-icon"
+                <div
+                  class="ant-popconfirm-message"
                 >
                   <span
-                    aria-label="exclamation-circle"
-                    class="anticon anticon-exclamation-circle"
-                    role="img"
+                    class="ant-popconfirm-message-icon"
                   >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="exclamation-circle"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                      />
-                    </svg>
+                    <span
+                      aria-label="exclamation-circle"
+                      class="anticon anticon-exclamation-circle"
+                      role="img"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-icon="exclamation-circle"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                        />
+                      </svg>
+                    </span>
                   </span>
-                </span>
+                  <div
+                    class="ant-popconfirm-message-title"
+                  >
+                    Are you sure delete this task?
+                  </div>
+                </div>
                 <div
-                  class="ant-popconfirm-message-title"
+                  class="ant-popconfirm-buttons"
                 >
-                  Are you sure delete this task?
+                  <button
+                    class="ant-btn ant-btn-default ant-btn-sm"
+                    type="button"
+                  >
+                    <span>
+                      No
+                    </span>
+                  </button>
+                  <button
+                    class="ant-btn ant-btn-primary ant-btn-sm"
+                    type="button"
+                  >
+                    <span>
+                      Yes
+                    </span>
+                  </button>
                 </div>
               </div>
-              <div
-                class="ant-popconfirm-buttons"
-              >
-                <button
-                  class="ant-btn ant-btn-default ant-btn-sm"
-                  type="button"
-                >
-                  <span>
-                    No
-                  </span>
-                </button>
-                <button
-                  class="ant-btn ant-btn-primary ant-btn-sm"
-                  type="button"
-                >
-                  <span>
-                    Yes
-                  </span>
-                </button>
-              </div>
             </div>
           </div>
         </div>
@@ -14477,60 +14481,64 @@ exports[`renders ./components/space/demo/debug.tsx extend context correctly 1`]
             role="tooltip"
           >
             <div
-              class="ant-popconfirm-inner-content"
+              class="ant-popover-inner-content"
             >
               <div
-                class="ant-popconfirm-message"
+                class="ant-popconfirm-inner-content"
               >
-                <span
-                  class="ant-popconfirm-message-icon"
+                <div
+                  class="ant-popconfirm-message"
                 >
                   <span
-                    aria-label="exclamation-circle"
-                    class="anticon anticon-exclamation-circle"
-                    role="img"
+                    class="ant-popconfirm-message-icon"
                   >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="exclamation-circle"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                      />
-                    </svg>
+                    <span
+                      aria-label="exclamation-circle"
+                      class="anticon anticon-exclamation-circle"
+                      role="img"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-icon="exclamation-circle"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                        />
+                      </svg>
+                    </span>
                   </span>
-                </span>
+                  <div
+                    class="ant-popconfirm-message-title"
+                  >
+                    Are you sure delete this task?
+                  </div>
+                </div>
                 <div
-                  class="ant-popconfirm-message-title"
+                  class="ant-popconfirm-buttons"
                 >
-                  Are you sure delete this task?
+                  <button
+                    class="ant-btn ant-btn-default ant-btn-sm"
+                    type="button"
+                  >
+                    <span>
+                      No
+                    </span>
+                  </button>
+                  <button
+                    class="ant-btn ant-btn-primary ant-btn-sm"
+                    type="button"
+                  >
+                    <span>
+                      Yes
+                    </span>
+                  </button>
                 </div>
               </div>
-              <div
-                class="ant-popconfirm-buttons"
-              >
-                <button
-                  class="ant-btn ant-btn-default ant-btn-sm"
-                  type="button"
-                >
-                  <span>
-                    No
-                  </span>
-                </button>
-                <button
-                  class="ant-btn ant-btn-primary ant-btn-sm"
-                  type="button"
-                >
-                  <span>
-                    Yes
-                  </span>
-                </button>
-              </div>
             </div>
           </div>
         </div>
@@ -14576,60 +14584,64 @@ exports[`renders ./components/space/demo/debug.tsx extend context correctly 1`]
             role="tooltip"
           >
             <div
-              class="ant-popconfirm-inner-content"
+              class="ant-popover-inner-content"
             >
               <div
-                class="ant-popconfirm-message"
+                class="ant-popconfirm-inner-content"
               >
-                <span
-                  class="ant-popconfirm-message-icon"
+                <div
+                  class="ant-popconfirm-message"
                 >
                   <span
-                    aria-label="exclamation-circle"
-                    class="anticon anticon-exclamation-circle"
-                    role="img"
+                    class="ant-popconfirm-message-icon"
                   >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="exclamation-circle"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                      />
-                    </svg>
+                    <span
+                      aria-label="exclamation-circle"
+                      class="anticon anticon-exclamation-circle"
+                      role="img"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-icon="exclamation-circle"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                        />
+                      </svg>
+                    </span>
                   </span>
-                </span>
+                  <div
+                    class="ant-popconfirm-message-title"
+                  >
+                    Are you sure delete this task?
+                  </div>
+                </div>
                 <div
-                  class="ant-popconfirm-message-title"
+                  class="ant-popconfirm-buttons"
                 >
-                  Are you sure delete this task?
+                  <button
+                    class="ant-btn ant-btn-default ant-btn-sm"
+                    type="button"
+                  >
+                    <span>
+                      No
+                    </span>
+                  </button>
+                  <button
+                    class="ant-btn ant-btn-primary ant-btn-sm"
+                    type="button"
+                  >
+                    <span>
+                      Yes
+                    </span>
+                  </button>
                 </div>
               </div>
-              <div
-                class="ant-popconfirm-buttons"
-              >
-                <button
-                  class="ant-btn ant-btn-default ant-btn-sm"
-                  type="button"
-                >
-                  <span>
-                    No
-                  </span>
-                </button>
-                <button
-                  class="ant-btn ant-btn-primary ant-btn-sm"
-                  type="button"
-                >
-                  <span>
-                    Yes
-                  </span>
-                </button>
-              </div>
             </div>
           </div>
         </div>
diff --git a/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap
index 1d4d7073f1b3..57a2c6e2ef11 100644
--- a/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -5137,3 +5137,136 @@ exports[`renders ./components/steps/demo/vertical-small.tsx extend context corre
   </div>
 </div>
 `;
+
+exports[`renders ./components/steps/demo/wireframe.tsx extend context correctly 1`] = `
+<div
+  class="ant-steps ant-steps-horizontal ant-steps-label-horizontal"
+>
+  <div
+    class="ant-steps-item ant-steps-item-finish"
+  >
+    <div
+      class="ant-steps-item-container"
+    >
+      <div
+        class="ant-steps-item-tail"
+      />
+      <div
+        class="ant-steps-item-icon"
+      >
+        <span
+          class="ant-steps-icon"
+        >
+          <span
+            aria-label="check"
+            class="anticon anticon-check ant-steps-finish-icon"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="check"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
+      <div
+        class="ant-steps-item-content"
+      >
+        <div
+          class="ant-steps-item-title"
+        >
+          Finished
+        </div>
+        <div
+          class="ant-steps-item-description"
+        >
+          This is a description.
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-steps-item ant-steps-item-process ant-steps-item-active"
+  >
+    <div
+      class="ant-steps-item-container"
+    >
+      <div
+        class="ant-steps-item-tail"
+      />
+      <div
+        class="ant-steps-item-icon"
+      >
+        <span
+          class="ant-steps-icon"
+        >
+          2
+        </span>
+      </div>
+      <div
+        class="ant-steps-item-content"
+      >
+        <div
+          class="ant-steps-item-title"
+        >
+          In Progress
+          <div
+            class="ant-steps-item-subtitle"
+            title="Left 00:00:08"
+          >
+            Left 00:00:08
+          </div>
+        </div>
+        <div
+          class="ant-steps-item-description"
+        >
+          This is a description.
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-steps-item ant-steps-item-wait"
+  >
+    <div
+      class="ant-steps-item-container"
+    >
+      <div
+        class="ant-steps-item-tail"
+      />
+      <div
+        class="ant-steps-item-icon"
+      >
+        <span
+          class="ant-steps-icon"
+        >
+          3
+        </span>
+      </div>
+      <div
+        class="ant-steps-item-content"
+      >
+        <div
+          class="ant-steps-item-title"
+        >
+          Waiting
+        </div>
+        <div
+          class="ant-steps-item-description"
+        >
+          This is a description.
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/components/steps/__tests__/__snapshots__/demo.test.ts.snap b/components/steps/__tests__/__snapshots__/demo.test.ts.snap
index ce211c156350..f1fa3caf3c5d 100644
--- a/components/steps/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/steps/__tests__/__snapshots__/demo.test.ts.snap
@@ -4705,3 +4705,136 @@ exports[`renders ./components/steps/demo/vertical-small.tsx correctly 1`] = `
   </div>
 </div>
 `;
+
+exports[`renders ./components/steps/demo/wireframe.tsx correctly 1`] = `
+<div
+  class="ant-steps ant-steps-horizontal ant-steps-label-horizontal"
+>
+  <div
+    class="ant-steps-item ant-steps-item-finish"
+  >
+    <div
+      class="ant-steps-item-container"
+    >
+      <div
+        class="ant-steps-item-tail"
+      />
+      <div
+        class="ant-steps-item-icon"
+      >
+        <span
+          class="ant-steps-icon"
+        >
+          <span
+            aria-label="check"
+            class="anticon anticon-check ant-steps-finish-icon"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="check"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
+      <div
+        class="ant-steps-item-content"
+      >
+        <div
+          class="ant-steps-item-title"
+        >
+          Finished
+        </div>
+        <div
+          class="ant-steps-item-description"
+        >
+          This is a description.
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-steps-item ant-steps-item-process ant-steps-item-active"
+  >
+    <div
+      class="ant-steps-item-container"
+    >
+      <div
+        class="ant-steps-item-tail"
+      />
+      <div
+        class="ant-steps-item-icon"
+      >
+        <span
+          class="ant-steps-icon"
+        >
+          2
+        </span>
+      </div>
+      <div
+        class="ant-steps-item-content"
+      >
+        <div
+          class="ant-steps-item-title"
+        >
+          In Progress
+          <div
+            class="ant-steps-item-subtitle"
+            title="Left 00:00:08"
+          >
+            Left 00:00:08
+          </div>
+        </div>
+        <div
+          class="ant-steps-item-description"
+        >
+          This is a description.
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-steps-item ant-steps-item-wait"
+  >
+    <div
+      class="ant-steps-item-container"
+    >
+      <div
+        class="ant-steps-item-tail"
+      />
+      <div
+        class="ant-steps-item-icon"
+      >
+        <span
+          class="ant-steps-icon"
+        >
+          3
+        </span>
+      </div>
+      <div
+        class="ant-steps-item-content"
+      >
+        <div
+          class="ant-steps-item-title"
+        >
+          Waiting
+        </div>
+        <div
+          class="ant-steps-item-description"
+        >
+          This is a description.
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/components/steps/demo/wireframe.md b/components/steps/demo/wireframe.md
new file mode 100644
index 000000000000..5dfe42d65559
--- /dev/null
+++ b/components/steps/demo/wireframe.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+线框风格。
+
+## en-US
+
+Wireframe style.
diff --git a/components/steps/demo/wireframe.tsx b/components/steps/demo/wireframe.tsx
new file mode 100644
index 000000000000..ef4281aeecd6
--- /dev/null
+++ b/components/steps/demo/wireframe.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { ConfigProvider, Steps } from 'antd';
+
+const description = 'This is a description.';
+const App: React.FC = () => (
+  <ConfigProvider theme={{ token: { wireframe: true } }}>
+    <Steps
+      current={1}
+      items={[
+        {
+          title: 'Finished',
+          description,
+        },
+        {
+          title: 'In Progress',
+          description,
+          subTitle: 'Left 00:00:08',
+        },
+        {
+          title: 'Waiting',
+          description,
+        },
+      ]}
+    />
+  </ConfigProvider>
+);
+
+export default App;
diff --git a/components/steps/index.en-US.md b/components/steps/index.en-US.md
index 017d405c6963..c9e5df795818 100644
--- a/components/steps/index.en-US.md
+++ b/components/steps/index.en-US.md
@@ -31,6 +31,7 @@ When a given task is complicated or has a certain sequence in the series of subt
 <code src="./demo/progress-debug.tsx" debug>Progress Debug</code>
 <code src="./demo/steps-in-steps.tsx" debug>Steps inside Steps</code>
 <code src="./demo/inline.tsx">Inline Steps</code>
+<code src="./demo/wireframe.tsx" debug>Wireframe</code>
 
 ## API
 
diff --git a/components/steps/index.zh-CN.md b/components/steps/index.zh-CN.md
index 8741dd8c4ec3..da5d632b86eb 100644
--- a/components/steps/index.zh-CN.md
+++ b/components/steps/index.zh-CN.md
@@ -32,6 +32,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*677sTqCpE3wAAAAAAA
 <code src="./demo/progress-debug.tsx" debug>Progress Debug</code>
 <code src="./demo/steps-in-steps.tsx" debug>Steps 嵌套 Steps</code>
 <code src="./demo/inline.tsx">内联步骤</code>
+<code src="./demo/wireframe.tsx" debug>线框风格</code>
 
 ## API
 
diff --git a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
index fe7fab85c7a0..ca17e1a3ccf9 100644
--- a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -4834,60 +4834,64 @@ exports[`renders ./components/table/demo/edit-cell.tsx extend context correctly
                               role="tooltip"
                             >
                               <div
-                                class="ant-popconfirm-inner-content"
+                                class="ant-popover-inner-content"
                               >
                                 <div
-                                  class="ant-popconfirm-message"
+                                  class="ant-popconfirm-inner-content"
                                 >
-                                  <span
-                                    class="ant-popconfirm-message-icon"
+                                  <div
+                                    class="ant-popconfirm-message"
                                   >
                                     <span
-                                      aria-label="exclamation-circle"
-                                      class="anticon anticon-exclamation-circle"
-                                      role="img"
+                                      class="ant-popconfirm-message-icon"
                                     >
-                                      <svg
-                                        aria-hidden="true"
-                                        data-icon="exclamation-circle"
-                                        fill="currentColor"
-                                        focusable="false"
-                                        height="1em"
-                                        viewBox="64 64 896 896"
-                                        width="1em"
+                                      <span
+                                        aria-label="exclamation-circle"
+                                        class="anticon anticon-exclamation-circle"
+                                        role="img"
                                       >
-                                        <path
-                                          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                                        />
-                                      </svg>
+                                        <svg
+                                          aria-hidden="true"
+                                          data-icon="exclamation-circle"
+                                          fill="currentColor"
+                                          focusable="false"
+                                          height="1em"
+                                          viewBox="64 64 896 896"
+                                          width="1em"
+                                        >
+                                          <path
+                                            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                                          />
+                                        </svg>
+                                      </span>
                                     </span>
-                                  </span>
+                                    <div
+                                      class="ant-popconfirm-message-title"
+                                    >
+                                      Sure to delete?
+                                    </div>
+                                  </div>
                                   <div
-                                    class="ant-popconfirm-message-title"
+                                    class="ant-popconfirm-buttons"
                                   >
-                                    Sure to delete?
+                                    <button
+                                      class="ant-btn ant-btn-default ant-btn-sm"
+                                      type="button"
+                                    >
+                                      <span>
+                                        Cancel
+                                      </span>
+                                    </button>
+                                    <button
+                                      class="ant-btn ant-btn-primary ant-btn-sm"
+                                      type="button"
+                                    >
+                                      <span>
+                                        OK
+                                      </span>
+                                    </button>
                                   </div>
                                 </div>
-                                <div
-                                  class="ant-popconfirm-buttons"
-                                >
-                                  <button
-                                    class="ant-btn ant-btn-default ant-btn-sm"
-                                    type="button"
-                                  >
-                                    <span>
-                                      Cancel
-                                    </span>
-                                  </button>
-                                  <button
-                                    class="ant-btn ant-btn-primary ant-btn-sm"
-                                    type="button"
-                                  >
-                                    <span>
-                                      OK
-                                    </span>
-                                  </button>
-                                </div>
                               </div>
                             </div>
                           </div>
@@ -4945,60 +4949,64 @@ exports[`renders ./components/table/demo/edit-cell.tsx extend context correctly
                               role="tooltip"
                             >
                               <div
-                                class="ant-popconfirm-inner-content"
+                                class="ant-popover-inner-content"
                               >
                                 <div
-                                  class="ant-popconfirm-message"
+                                  class="ant-popconfirm-inner-content"
                                 >
-                                  <span
-                                    class="ant-popconfirm-message-icon"
+                                  <div
+                                    class="ant-popconfirm-message"
                                   >
                                     <span
-                                      aria-label="exclamation-circle"
-                                      class="anticon anticon-exclamation-circle"
-                                      role="img"
+                                      class="ant-popconfirm-message-icon"
                                     >
-                                      <svg
-                                        aria-hidden="true"
-                                        data-icon="exclamation-circle"
-                                        fill="currentColor"
-                                        focusable="false"
-                                        height="1em"
-                                        viewBox="64 64 896 896"
-                                        width="1em"
+                                      <span
+                                        aria-label="exclamation-circle"
+                                        class="anticon anticon-exclamation-circle"
+                                        role="img"
                                       >
-                                        <path
-                                          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                                        />
-                                      </svg>
+                                        <svg
+                                          aria-hidden="true"
+                                          data-icon="exclamation-circle"
+                                          fill="currentColor"
+                                          focusable="false"
+                                          height="1em"
+                                          viewBox="64 64 896 896"
+                                          width="1em"
+                                        >
+                                          <path
+                                            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                                          />
+                                        </svg>
+                                      </span>
                                     </span>
-                                  </span>
+                                    <div
+                                      class="ant-popconfirm-message-title"
+                                    >
+                                      Sure to delete?
+                                    </div>
+                                  </div>
                                   <div
-                                    class="ant-popconfirm-message-title"
+                                    class="ant-popconfirm-buttons"
                                   >
-                                    Sure to delete?
+                                    <button
+                                      class="ant-btn ant-btn-default ant-btn-sm"
+                                      type="button"
+                                    >
+                                      <span>
+                                        Cancel
+                                      </span>
+                                    </button>
+                                    <button
+                                      class="ant-btn ant-btn-primary ant-btn-sm"
+                                      type="button"
+                                    >
+                                      <span>
+                                        OK
+                                      </span>
+                                    </button>
                                   </div>
                                 </div>
-                                <div
-                                  class="ant-popconfirm-buttons"
-                                >
-                                  <button
-                                    class="ant-btn ant-btn-default ant-btn-sm"
-                                    type="button"
-                                  >
-                                    <span>
-                                      Cancel
-                                    </span>
-                                  </button>
-                                  <button
-                                    class="ant-btn ant-btn-primary ant-btn-sm"
-                                    type="button"
-                                  >
-                                    <span>
-                                      OK
-                                    </span>
-                                  </button>
-                                </div>
                               </div>
                             </div>
                           </div>
diff --git a/components/timeline/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/timeline/__tests__/__snapshots__/demo-extend.test.ts.snap
index 8c31ff57db1b..f9846216b2ac 100644
--- a/components/timeline/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/timeline/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -804,3 +804,70 @@ exports[`renders ./components/timeline/demo/right.tsx extend context correctly 1
   </li>
 </ul>
 `;
+
+exports[`renders ./components/timeline/demo/wireframe.tsx extend context correctly 1`] = `
+<ul
+  class="ant-timeline"
+>
+  <li
+    class="ant-timeline-item"
+  >
+    <div
+      class="ant-timeline-item-tail"
+    />
+    <div
+      class="ant-timeline-item-head ant-timeline-item-head-blue"
+    />
+    <div
+      class="ant-timeline-item-content"
+    >
+      Create a services site 2015-09-01
+    </div>
+  </li>
+  <li
+    class="ant-timeline-item"
+  >
+    <div
+      class="ant-timeline-item-tail"
+    />
+    <div
+      class="ant-timeline-item-head ant-timeline-item-head-blue"
+    />
+    <div
+      class="ant-timeline-item-content"
+    >
+      Solve initial network problems 2015-09-01
+    </div>
+  </li>
+  <li
+    class="ant-timeline-item"
+  >
+    <div
+      class="ant-timeline-item-tail"
+    />
+    <div
+      class="ant-timeline-item-head ant-timeline-item-head-blue"
+    />
+    <div
+      class="ant-timeline-item-content"
+    >
+      Technical testing 2015-09-01
+    </div>
+  </li>
+  <li
+    class="ant-timeline-item ant-timeline-item-last"
+  >
+    <div
+      class="ant-timeline-item-tail"
+    />
+    <div
+      class="ant-timeline-item-head ant-timeline-item-head-blue"
+    />
+    <div
+      class="ant-timeline-item-content"
+    >
+      Network problems being solved 2015-09-01
+    </div>
+  </li>
+</ul>
+`;
diff --git a/components/timeline/__tests__/__snapshots__/demo.test.ts.snap b/components/timeline/__tests__/__snapshots__/demo.test.ts.snap
index 666716ca13db..19421493d424 100644
--- a/components/timeline/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/timeline/__tests__/__snapshots__/demo.test.ts.snap
@@ -804,3 +804,70 @@ exports[`renders ./components/timeline/demo/right.tsx correctly 1`] = `
   </li>
 </ul>
 `;
+
+exports[`renders ./components/timeline/demo/wireframe.tsx correctly 1`] = `
+<ul
+  class="ant-timeline"
+>
+  <li
+    class="ant-timeline-item"
+  >
+    <div
+      class="ant-timeline-item-tail"
+    />
+    <div
+      class="ant-timeline-item-head ant-timeline-item-head-blue"
+    />
+    <div
+      class="ant-timeline-item-content"
+    >
+      Create a services site 2015-09-01
+    </div>
+  </li>
+  <li
+    class="ant-timeline-item"
+  >
+    <div
+      class="ant-timeline-item-tail"
+    />
+    <div
+      class="ant-timeline-item-head ant-timeline-item-head-blue"
+    />
+    <div
+      class="ant-timeline-item-content"
+    >
+      Solve initial network problems 2015-09-01
+    </div>
+  </li>
+  <li
+    class="ant-timeline-item"
+  >
+    <div
+      class="ant-timeline-item-tail"
+    />
+    <div
+      class="ant-timeline-item-head ant-timeline-item-head-blue"
+    />
+    <div
+      class="ant-timeline-item-content"
+    >
+      Technical testing 2015-09-01
+    </div>
+  </li>
+  <li
+    class="ant-timeline-item ant-timeline-item-last"
+  >
+    <div
+      class="ant-timeline-item-tail"
+    />
+    <div
+      class="ant-timeline-item-head ant-timeline-item-head-blue"
+    />
+    <div
+      class="ant-timeline-item-content"
+    >
+      Network problems being solved 2015-09-01
+    </div>
+  </li>
+</ul>
+`;
diff --git a/components/timeline/demo/wireframe.md b/components/timeline/demo/wireframe.md
new file mode 100644
index 000000000000..2153d9000cb7
--- /dev/null
+++ b/components/timeline/demo/wireframe.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+线框风格。
+
+## en-US
+
+Wireframe.
diff --git a/components/timeline/demo/wireframe.tsx b/components/timeline/demo/wireframe.tsx
new file mode 100644
index 000000000000..e5b80493beed
--- /dev/null
+++ b/components/timeline/demo/wireframe.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { ConfigProvider, Timeline } from 'antd';
+
+const App: React.FC = () => (
+  <ConfigProvider theme={{ token: { wireframe: true } }}>
+    <Timeline>
+      <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
+      <Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
+      <Timeline.Item>Technical testing 2015-09-01</Timeline.Item>
+      <Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
+    </Timeline>
+  </ConfigProvider>
+);
+
+export default App;
diff --git a/components/timeline/index.en-US.md b/components/timeline/index.en-US.md
index 5b890a8a3915..67359349d4f2 100644
--- a/components/timeline/index.en-US.md
+++ b/components/timeline/index.en-US.md
@@ -24,6 +24,7 @@ Vertical display timeline.
 <code src="./demo/custom.tsx">Custom</code>
 <code src="./demo/right.tsx">Right alternate</code>
 <code src="./demo/label.tsx">Label</code>
+<code src="./demo/wireframe.tsx" debug>Wireframe</code>
 
 ## API
 
diff --git a/components/timeline/index.zh-CN.md b/components/timeline/index.zh-CN.md
index ddf9f5426b65..476a9030ccc3 100644
--- a/components/timeline/index.zh-CN.md
+++ b/components/timeline/index.zh-CN.md
@@ -25,6 +25,7 @@ demo:
 <code src="./demo/custom.tsx">自定义时间轴点</code>
 <code src="./demo/right.tsx">右侧时间轴点</code>
 <code src="./demo/label.tsx">标签</code>
+<code src="./demo/wireframe.tsx" debug>线框风格</code>
 
 ## API
 

From df41ff73a8a51bcc435942d6b400b5811f88b42d Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Tue, 6 Dec 2022 23:28:59 +0800
Subject: [PATCH 26/41] chore: improve size-limit-action (#39319)

* Update size-limit.yml

* Update size-limit.yml

* Update size-limit.yml

* Update package.json

* Update size-limit.yml

* Update package.json

* Update package.json

* Update package.json

* Update package.json

* Update size-limit.yml

* Update size-limit.yml

* Update size-limit.yml
---
 .github/workflows/size-limit.yml | 42 +++++++++++++++++++++++++++++---
 package.json                     |  5 ++--
 2 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/.github/workflows/size-limit.yml b/.github/workflows/size-limit.yml
index c03b16a832ea..bcce41cd74eb 100644
--- a/.github/workflows/size-limit.yml
+++ b/.github/workflows/size-limit.yml
@@ -22,7 +22,41 @@ jobs:
       CI_JOB_NUMBER: 1
 
     steps:
-    - uses: actions/checkout@v3
-    - uses: andresz1/size-limit-action@v1
-      with:
-        github_token: ${{ secrets.GITHUB_TOKEN }}
+      - name: checkout
+        uses: actions/checkout@v3
+
+      - name: cache package-lock.json
+        uses: actions/cache@v3
+        with:
+          path: package-temp-dir
+          key: lock-${{ github.sha }}
+
+      - name: create package-lock.json
+        run: npm i --package-lock-only --ignore-scripts
+
+      - name: hack for single file
+        run: |
+          if [ ! -d "package-temp-dir" ]; then
+            mkdir package-temp-dir
+          fi
+          cp package-lock.json package-temp-dir
+
+      - name: cache node_modules
+        id: node_modules_cache_id
+        uses: actions/cache@v3
+        with:
+          path: node_modules
+          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
+
+      - name: install
+        if: steps.node_modules_cache_id.outputs.cache-hit != 'true'
+        run: npm ci
+
+      - name: size-limit
+        uses: ant-design/size-limit-action@master
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          build_script: dist
+          skip_step: install
+        env:
+          NODE_OPTIONS: --max_old_space_size=4096
diff --git a/package.json b/package.json
index 48f590ecba58..a18fbea8d97f 100644
--- a/package.json
+++ b/package.json
@@ -167,7 +167,6 @@
     "@emotion/server": "^11.4.0",
     "@qixian.cs/github-contributors-list": "^1.0.3",
     "@size-limit/file": "^8.1.0",
-    "@size-limit/webpack-why": "^8.1.0",
     "@stackblitz/sdk": "^1.3.0",
     "@testing-library/dom": "^8.17.1",
     "@testing-library/jest-dom": "^5.16.3",
@@ -312,11 +311,11 @@
   "size-limit": [
     {
       "path": "./dist/antd.min.js",
-      "limit": "390 kB"
+      "limit": "377 KiB"
     },
     {
       "path": "./dist/antd-with-locales.min.js",
-      "limit": "450 kB"
+      "limit": "430 KiB"
     }
   ],
   "bundlesize": [

From a8dd587971049fc927a207de83601226fee09411 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Tue, 6 Dec 2022 23:29:38 +0800
Subject: [PATCH 27/41] style: fix Popover width in rtl mode (#39311)

close #39195
---
 components/popover/style/index.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/components/popover/style/index.tsx b/components/popover/style/index.tsx
index 6f5f250bc761..26d811b94f3e 100644
--- a/components/popover/style/index.tsx
+++ b/components/popover/style/index.tsx
@@ -36,7 +36,11 @@ const genBaseStyle: GenerateStyle<PopoverToken> = (token) => {
         ...resetComponent(token),
         position: 'absolute',
         top: 0,
-        insetInlineStart: 0,
+        // use `left` to fix https://github.com/ant-design/ant-design/issues/39195
+        left: {
+          _skip_check_: true,
+          value: 0,
+        },
         zIndex: zIndexPopup,
         fontWeight: 'normal',
         whiteSpace: 'normal',

From a9964d606b04a1327a20d661ae92035d59246afa Mon Sep 17 00:00:00 2001
From: vagusX <vagusX@users.noreply.github.com>
Date: Wed, 7 Dec 2022 11:39:03 +0800
Subject: [PATCH 28/41] docs: antd5 codemod (#39226)

* docs: antd5 codemod

* chore: update video url

* docs: update video style
---
 docs/react/migration-v5.en-US.md | 21 +++++++++++++++++++++
 docs/react/migration-v5.zh-CN.md | 19 +++++++++++++++++++
 2 files changed, 40 insertions(+)

diff --git a/docs/react/migration-v5.en-US.md b/docs/react/migration-v5.en-US.md
index 0981b2bcb519..7ba8c47be2f2 100644
--- a/docs/react/migration-v5.en-US.md
+++ b/docs/react/migration-v5.en-US.md
@@ -164,6 +164,27 @@ Use git to save your code and install latest version:
 npm install --save antd@5.x
 ```
 
+You can manually check the code one by one against the above list for modification. In addition, we also provide a codemod cli tool [@ant-design/codemod-v5](https://github.com/ant-design/codemod-v5) To help you quickly upgrade to v5.
+
+Before running codemod cli, please submit your local code changes.
+
+```shell
+# Run directly through npx
+npx -p @ant-design/codemod-v5 antd5-codemod src
+
+# Or run directly through pnpm
+pnpm --package=@ant-design/codemod-v5 dlx antd5-codemod src
+```
+
+<video autoplay="" loop="" style="width: 100%; max-height: 600px; object-fit: contain;">
+  <source src="https://mdn.alipayobjects.com/huamei_7uahnr/afts/file/A*Sjy5ToW6ow0AAAAAAAAAAAAADrJ8AQ" type="video/webm">
+  <source src="https://mdn.alipayobjects.com/huamei_7uahnr/afts/file/A*hTDYQJ2HFTYAAAAAAAAAAAAADrJ8AQ" type="video/mp4">
+</video>
+
+> Note that codemod cannot cover all scenarios, and it is recommended to check for incompatible changes one by one.
+
+### less migration
+
 If you using antd less variables, you can use compatible package to covert it into v4 less variables and use less-loader to inject them:
 
 ```js
diff --git a/docs/react/migration-v5.zh-CN.md b/docs/react/migration-v5.zh-CN.md
index c31c0e35c79e..c7be2d73186d 100644
--- a/docs/react/migration-v5.zh-CN.md
+++ b/docs/react/migration-v5.zh-CN.md
@@ -156,6 +156,25 @@ title: 从 v4 到 v5
 npm install --save antd@5.x
 ```
 
+你可以手动对照上面的列表逐条检查代码进行修改，另外，我们也提供了一个 codemod cli 工具 [@ant-design/codemod-v5](https://github.com/ant-design/codemod-v5) 以帮助你快速升级到 v5 版本。
+
+在运行 codemod cli 前，请先提交你的本地代码修改。
+
+```shell
+# 使用 npx 直接运行
+npx -p @ant-design/codemod-v5 antd5-codemod src
+
+# 或者使用 pnpm 直接运行
+pnpm --package=@ant-design/codemod-v5 dlx antd5-codemod src
+```
+
+<video autoplay="" loop="" style="width: 100%; max-height: 600px; object-fit: contain;">
+  <source src="https://mdn.alipayobjects.com/huamei_7uahnr/afts/file/A*Sjy5ToW6ow0AAAAAAAAAAAAADrJ8AQ" type="video/webm">
+  <source src="https://mdn.alipayobjects.com/huamei_7uahnr/afts/file/A*hTDYQJ2HFTYAAAAAAAAAAAAADrJ8AQ" type="video/mp4">
+</video>
+
+> 注意 codemod 不能涵盖所有场景，建议还是要按不兼容的变化逐条排查。
+
 ### less 迁移
 
 如果你使用到了 antd 的 less 变量，通过兼容包将 v5 变量转译成 v4 版本，并通过 less-loader 注入：

From 64744e8aa2043f9b004372d2adfab028bfc6bd16 Mon Sep 17 00:00:00 2001
From: wangxingkang <wang_xingkang@qq.com>
Date: Wed, 7 Dec 2022 11:52:17 +0800
Subject: [PATCH 29/41] chore: remove duplicate code (#39337)

---
 tests/utils.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/tests/utils.tsx b/tests/utils.tsx
index e1da0ba22393..a7245965db99 100644
--- a/tests/utils.tsx
+++ b/tests/utils.tsx
@@ -32,8 +32,6 @@ export const sleep = async (timeout = 0) => {
 const customRender = (ui: ReactElement, options?: Omit<RenderOptions, 'wrapper'>) =>
   render(ui, { wrapper: StrictMode, ...options });
 
-export * from '@testing-library/react';
-
 export function renderHook<T>(func: () => T): { result: React.RefObject<T> } {
   const result = React.createRef<T>();
 

From 6b44b33eaeb112e131356a982e839b25966f4440 Mon Sep 17 00:00:00 2001
From: lijianan <574980606@qq.com>
Date: Wed, 7 Dec 2022 12:05:30 +0800
Subject: [PATCH 30/41] test: update snap to fix ci fail (#39336)

---
 .../__tests__/__snapshots__/index.test.tsx.snap        | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/locale-provider/__tests__/__snapshots__/index.test.tsx.snap b/components/locale-provider/__tests__/__snapshots__/index.test.tsx.snap
index 5f2b78a01394..da1c6c0fec49 100644
--- a/components/locale-provider/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/locale-provider/__tests__/__snapshots__/index.test.tsx.snap
@@ -73709,7 +73709,7 @@ exports[`Locale Provider should display the text as fa 1`] = `
                     tabindex="-1"
                     type="button"
                   >
-                    سپتامبر
+                    آذر
                   </button>
                   <button
                     class="ant-picker-year-btn"
@@ -75772,7 +75772,7 @@ exports[`Locale Provider should display the text as fa 1`] = `
                           tabindex="-1"
                           type="button"
                         >
-                          سپتامبر
+                          آذر
                         </button>
                         <button
                           class="ant-picker-year-btn"
@@ -76310,7 +76310,7 @@ exports[`Locale Provider should display the text as fa 1`] = `
                           tabindex="-1"
                           type="button"
                         >
-                          اکتبر
+                          دی
                         </button>
                         <button
                           class="ant-picker-year-btn"
@@ -77397,9 +77397,9 @@ exports[`Locale Provider should display the text as fa 1`] = `
           </span>
           <span
             class="ant-select-selection-item"
-            title="سپتامبر"
+            title="آذر"
           >
-            سپتامبر
+            آذر
           </span>
         </div>
         <span

From a2305aa2916836f40955487265bf2e3332ce1617 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Wed, 7 Dec 2022 13:56:18 +0800
Subject: [PATCH 31/41] chore(deps): update dependency
 scroll-into-view-if-needed to v3 (#39230)

* chore(deps): update dependency scroll-into-view-if-needed to v3

* fix: ts error

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: afc163 <afc163@gmail.com>
---
 components/form/hooks/useForm.ts | 2 +-
 components/form/interface.ts     | 4 ++--
 package.json                     | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/form/hooks/useForm.ts b/components/form/hooks/useForm.ts
index 60d87383fcdf..a553a58902cd 100644
--- a/components/form/hooks/useForm.ts
+++ b/components/form/hooks/useForm.ts
@@ -50,7 +50,7 @@ export default function useForm<Values = any>(form?: FormInstance<Values>): [For
               scrollMode: 'if-needed',
               block: 'nearest',
               ...options,
-            });
+            } as any);
           }
         },
         getFieldInstance: (name: NamePath) => {
diff --git a/components/form/interface.ts b/components/form/interface.ts
index 53a4a0a86e48..d153f3722251 100644
--- a/components/form/interface.ts
+++ b/components/form/interface.ts
@@ -1,3 +1,3 @@
-export { InternalNamePath, NamePath, Store, StoreValue } from 'rc-field-form/lib/interface';
-export { Options as ScrollOptions } from 'scroll-into-view-if-needed';
+export type { InternalNamePath, NamePath, Store, StoreValue } from 'rc-field-form/lib/interface';
+export type { Options as ScrollOptions } from 'scroll-into-view-if-needed';
 export type FormLabelAlign = 'left' | 'right';
diff --git a/package.json b/package.json
index a18fbea8d97f..8fa0920a5167 100644
--- a/package.json
+++ b/package.json
@@ -153,7 +153,7 @@
     "rc-trigger": "^5.2.10",
     "rc-upload": "~4.3.0",
     "rc-util": "^5.25.2",
-    "scroll-into-view-if-needed": "^2.2.25",
+    "scroll-into-view-if-needed": "^3.0.3",
     "shallowequal": "^1.1.0"
   },
   "devDependencies": {

From 37c83beeca7683a02b421911c5a6703ddbc527b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?=
 =?UTF-8?q?=E5=8D=9C?= <smith3816@gmail.com>
Date: Wed, 7 Dec 2022 14:25:26 +0800
Subject: [PATCH 32/41] fix: Divider horizontal line align (#39339)

* fix: divider hor align

* test: Update snapshot
---
 .../__snapshots__/demo-extend.test.ts.snap        | 15 +++++++++++++++
 .../__tests__/__snapshots__/demo.test.ts.snap     | 15 +++++++++++++++
 components/divider/demo/customize-style.tsx       |  6 ++++++
 components/divider/style/index.tsx                |  6 +-----
 4 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/components/divider/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/divider/__tests__/__snapshots__/demo-extend.test.ts.snap
index aa54fa2d5f8e..563b0ba86959 100644
--- a/components/divider/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/divider/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -33,6 +33,21 @@ Array [
     role="separator"
     style="height:60px;border-color:#7cb305"
   />,
+  <div
+    style="display:flex;flex-direction:column;height:50px;box-shadow:0 0 1px red"
+  >
+    <div
+      class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
+      role="separator"
+      style="background:rgba(0,255,0,0.05)"
+    >
+      <span
+        class="ant-divider-inner-text"
+      >
+        Text
+      </span>
+    </div>
+  </div>,
 ]
 `;
 
diff --git a/components/divider/__tests__/__snapshots__/demo.test.ts.snap b/components/divider/__tests__/__snapshots__/demo.test.ts.snap
index 8af60aeef21c..72e62c427198 100644
--- a/components/divider/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/divider/__tests__/__snapshots__/demo.test.ts.snap
@@ -33,6 +33,21 @@ Array [
     role="separator"
     style="height:60px;border-color:#7cb305"
   />,
+  <div
+    style="display:flex;flex-direction:column;height:50px;box-shadow:0 0 1px red"
+  >
+    <div
+      class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
+      role="separator"
+      style="background:rgba(0,255,0,0.05)"
+    >
+      <span
+        class="ant-divider-inner-text"
+      >
+        Text
+      </span>
+    </div>
+  </div>,
 ]
 `;
 
diff --git a/components/divider/demo/customize-style.tsx b/components/divider/demo/customize-style.tsx
index d537eb0b547e..29621bb49838 100644
--- a/components/divider/demo/customize-style.tsx
+++ b/components/divider/demo/customize-style.tsx
@@ -10,6 +10,12 @@ const App: React.FC = () => (
     </Divider>
     <Divider type="vertical" style={{ height: 60, borderColor: '#7cb305' }} />
     <Divider type="vertical" style={{ height: 60, borderColor: '#7cb305' }} dashed />
+
+    <div style={{ display: 'flex', flexDirection: 'column', height: 50, boxShadow: '0 0 1px red' }}>
+      <Divider style={{ background: 'rgba(0,255,0,0.05)' }} orientation="left">
+        Text
+      </Divider>
+    </div>
   </>
 );
 
diff --git a/components/divider/style/index.tsx b/components/divider/style/index.tsx
index 118cfaabfd4f..ae8beabca275 100644
--- a/components/divider/style/index.tsx
+++ b/components/divider/style/index.tsx
@@ -45,6 +45,7 @@ const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject =>
 
       '&-horizontal&-with-text': {
         display: 'flex',
+        alignItems: 'center',
         margin: `${token.dividerHorizontalWithTextGutterMargin}px 0`,
         color: token.colorTextHeading,
         fontWeight: 500,
@@ -55,7 +56,6 @@ const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject =>
 
         '&::before, &::after': {
           position: 'relative',
-          top: '50%',
           width: '50%',
           borderBlockStart: `${lineWidth}px solid transparent`,
           // Chrome not accept `inherit` in `border-top`
@@ -68,24 +68,20 @@ const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject =>
 
       '&-horizontal&-with-text-left': {
         '&::before': {
-          top: '50%',
           width: '5%',
         },
 
         '&::after': {
-          top: '50%',
           width: '95%',
         },
       },
 
       '&-horizontal&-with-text-right': {
         '&::before': {
-          top: '50%',
           width: '95%',
         },
 
         '&::after': {
-          top: '50%',
           width: '5%',
         },
       },

From 0c3918a389d9a053e488c242b8fce4653a7495eb Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Wed, 7 Dec 2022 14:29:47 +0800
Subject: [PATCH 33/41] test: update bundlezie limit

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 3c3952b0cc42..50719d06b694 100644
--- a/package.json
+++ b/package.json
@@ -312,11 +312,11 @@
   "size-limit": [
     {
       "path": "./dist/antd.min.js",
-      "limit": "377 KiB"
+      "limit": "381 KiB"
     },
     {
       "path": "./dist/antd-with-locales.min.js",
-      "limit": "430 KiB"
+      "limit": "435 KiB"
     }
   ],
   "bundlesize": [

From d57f1c7d8af5cdf800cf1a65f668e718f219b50e Mon Sep 17 00:00:00 2001
From: Amumu <yoyo837@hotmail.com>
Date: Wed, 7 Dec 2022 15:35:41 +0800
Subject: [PATCH 34/41] feat: replace eslint-plugin-babel with
 @babel/eslint-plugin and enable new rules (#39335)

* feat: replace eslint-plugin-babel with @babel/eslint-plugin and enable new rules

* My empty commit with a message
---
 .eslintrc.js | 7 ++++++-
 package.json | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 2b8af60c8823..12628ed2b150 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -25,7 +25,7 @@ module.exports = {
     },
   },
   parser: '@typescript-eslint/parser',
-  plugins: ['react', 'babel', 'jest', '@typescript-eslint', 'react-hooks', 'unicorn', 'markdown'],
+  plugins: ['react', '@babel', 'jest', '@typescript-eslint', 'react-hooks', 'unicorn', 'markdown'],
   // https://github.com/typescript-eslint/typescript-eslint/issues/46#issuecomment-470486034
   overrides: [
     {
@@ -67,6 +67,11 @@ module.exports = {
       },
       rules: {
         indent: 0,
+        '@babel/new-cap': 0,
+        '@babel/no-invalid-this': 0,
+        '@babel/no-unused-expressions': 2,
+        '@babel/object-curly-spacing': 0,
+        '@babel/semi': 2,
         'default-case': 0,
         'eol-last': 0,
         'no-console': 0,
diff --git a/package.json b/package.json
index 8fa0920a5167..b37a1d841105 100644
--- a/package.json
+++ b/package.json
@@ -160,6 +160,7 @@
     "@ant-design/bisheng-plugin": "^3.3.0-alpha.4",
     "@ant-design/hitu": "^0.0.0-alpha.13",
     "@ant-design/tools": "^16.1.0-alpha.2",
+    "@babel/eslint-plugin": "^7.19.1",
     "@docsearch/css": "^3.0.0",
     "@emotion/babel-preset-css-prop": "^11.10.0",
     "@emotion/css": "^11.10.5",
@@ -215,7 +216,6 @@
     "eslint-config-airbnb": "^19.0.0",
     "eslint-config-prettier": "^8.0.0",
     "eslint-import-resolver-typescript": "^3.5.2",
-    "eslint-plugin-babel": "^5.3.0",
     "eslint-plugin-compat": "^4.0.0",
     "eslint-plugin-import": "^2.21.1",
     "eslint-plugin-jest": "^27.0.1",

From 52c50dfb577a26661cced6ea09d705346e8bb081 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=91=E9=9B=A8?= <wangning4567@163.com>
Date: Wed, 7 Dec 2022 15:44:24 +0800
Subject: [PATCH 35/41] fix: Tabs active bar missing (#39352)

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index b37a1d841105..9053ffcd4f4b 100644
--- a/package.json
+++ b/package.json
@@ -145,7 +145,7 @@
     "rc-steps": "~6.0.0-alpha.2",
     "rc-switch": "~4.0.0",
     "rc-table": "~7.26.0",
-    "rc-tabs": "~12.4.1",
+    "rc-tabs": "~12.4.2",
     "rc-textarea": "~0.4.5",
     "rc-tooltip": "~5.2.0",
     "rc-tree": "~5.7.0",

From 7641b2f9c5621bce7a4847e8afc2bc395eab883f Mon Sep 17 00:00:00 2001
From: lijianan <574980606@qq.com>
Date: Wed, 7 Dec 2022 16:49:45 +0800
Subject: [PATCH 36/41] refactoring: js => ts (#39355)

---
 .dumi/theme/builtins/Palette/index.tsx        |   1 -
 .dumi/theme/common/BrowserFrame.jsx           |   5 -
 .dumi/theme/common/BrowserFrame.tsx           |   7 +
 .../{CodePenIcon.jsx => CodePenIcon.tsx}      |   6 +-
 .../{CodePreview.jsx => CodePreview.tsx}      |  26 +-
 ...odeSandboxIcon.jsx => CodeSandboxIcon.tsx} |   6 +-
 .../Color/{ColorBlock.jsx => ColorBlock.tsx}  |  12 +-
 ...orPaletteTool.jsx => ColorPaletteTool.tsx} |  22 +-
 ...eToolDark.jsx => ColorPaletteToolDark.tsx} |  35 +-
 .dumi/theme/common/Color/ColorPalettes.jsx    |  94 ----
 .dumi/theme/common/Color/ColorPalettes.tsx    |  94 ++++
 .../{ColorPatterns.jsx => ColorPatterns.tsx}  |  12 +-
 .dumi/theme/common/Color/ColorPicker.tsx      |   8 +-
 .dumi/theme/common/Color/ColorStyle.tsx       | 430 +++++++++---------
 .../common/Color/{Palette.jsx => Palette.tsx} |  25 +-
 ...ernalLinkIcon.jsx => ExternalLinkIcon.tsx} |   6 +-
 .dumi/theme/common/PrevAndNext.tsx            |   2 +-
 .../common/{RiddleIcon.jsx => RiddleIcon.tsx} |   6 +-
 .dumi/theme/common/ThemeSwitch/ThemeIcon.tsx  |   2 +-
 .dumi/theme/common/ThemeSwitch/index.tsx      |   3 +-
 20 files changed, 413 insertions(+), 389 deletions(-)
 delete mode 100644 .dumi/theme/common/BrowserFrame.jsx
 create mode 100644 .dumi/theme/common/BrowserFrame.tsx
 rename .dumi/theme/common/{CodePenIcon.jsx => CodePenIcon.tsx} (91%)
 rename .dumi/theme/common/{CodePreview.jsx => CodePreview.tsx} (52%)
 rename .dumi/theme/common/{CodeSandboxIcon.jsx => CodeSandboxIcon.tsx} (76%)
 rename .dumi/theme/common/Color/{ColorBlock.jsx => ColorBlock.tsx} (80%)
 rename .dumi/theme/common/Color/{ColorPaletteTool.jsx => ColorPaletteTool.tsx} (73%)
 rename .dumi/theme/common/Color/{ColorPaletteToolDark.jsx => ColorPaletteToolDark.tsx} (77%)
 delete mode 100644 .dumi/theme/common/Color/ColorPalettes.jsx
 create mode 100644 .dumi/theme/common/Color/ColorPalettes.tsx
 rename .dumi/theme/common/Color/{ColorPatterns.jsx => ColorPatterns.tsx} (63%)
 rename .dumi/theme/common/Color/{Palette.jsx => Palette.tsx} (83%)
 rename .dumi/theme/common/{ExternalLinkIcon.jsx => ExternalLinkIcon.tsx} (79%)
 rename .dumi/theme/common/{RiddleIcon.jsx => RiddleIcon.tsx} (94%)

diff --git a/.dumi/theme/builtins/Palette/index.tsx b/.dumi/theme/builtins/Palette/index.tsx
index b94369dd0b0a..4dacea1bc6ba 100644
--- a/.dumi/theme/builtins/Palette/index.tsx
+++ b/.dumi/theme/builtins/Palette/index.tsx
@@ -1,4 +1,3 @@
-// @ts-ignore
 import Palette from '../../common/Color/Palette';
 
 export default Palette;
diff --git a/.dumi/theme/common/BrowserFrame.jsx b/.dumi/theme/common/BrowserFrame.jsx
deleted file mode 100644
index 642e372890fb..000000000000
--- a/.dumi/theme/common/BrowserFrame.jsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import React from 'react';
-
-const BrowserFrame = ({ children }) => <div className="browser-mockup with-url">{children}</div>;
-
-export default BrowserFrame;
diff --git a/.dumi/theme/common/BrowserFrame.tsx b/.dumi/theme/common/BrowserFrame.tsx
new file mode 100644
index 000000000000..385a23cf4100
--- /dev/null
+++ b/.dumi/theme/common/BrowserFrame.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const BrowserFrame: React.FC<{ children?: React.ReactNode }> = ({ children }) => (
+  <div className="browser-mockup with-url">{children}</div>
+);
+
+export default BrowserFrame;
diff --git a/.dumi/theme/common/CodePenIcon.jsx b/.dumi/theme/common/CodePenIcon.tsx
similarity index 91%
rename from .dumi/theme/common/CodePenIcon.jsx
rename to .dumi/theme/common/CodePenIcon.tsx
index cda997597eff..63ecd3d36655 100644
--- a/.dumi/theme/common/CodePenIcon.jsx
+++ b/.dumi/theme/common/CodePenIcon.tsx
@@ -1,12 +1,14 @@
 import React from 'react';
 import Icon from '@ant-design/icons';
 
-const SVGIcon = () => (
+const SVGIcon: React.FC = () => (
   <svg viewBox="0 0 15 15" fill="currentColor">
     <path d="M14.777304,4.75062256 L7.77734505,0.0839936563 C7.60939924,-0.0279665065 7.39060662,-0.0279665065 7.22266081,0.0839936563 L0.222701813,4.75062256 C0.0836082937,4.84334851 5.66973453e-05,4.99945222 4.6875e-05,5.16662013 L4.6875e-05,9.83324903 C4.6875e-05,10.0004355 0.0836088906,10.1565596 0.222701812,10.2492466 L7.22266081,14.9158755 C7.30662908,14.9718752 7.403316,14.999875 7.50000292,14.999875 C7.59668984,14.999875 7.69337678,14.9718752 7.77734505,14.9158755 L14.777304,10.2492466 C14.9163976,10.1565206 14.9999492,10.0004169 14.999959,9.83324903 L14.999959,5.16662013 C14.9999492,4.99945222 14.9163976,4.84334851 14.777304,4.75062256 Z M7.50000292,9.23237755 L4.90139316,7.4999502 L7.50000292,5.76755409 L10.0986127,7.4999502 L7.50000292,9.23237755 Z M8,4.89905919 L8,1.43423573 L13.598561,5.16665138 L10.9999824,6.89904747 L8,4.89905919 Z M7.00000586,4.89905919 L4.00002344,6.89904747 L1.40141366,5.16665138 L7.00000586,1.43423573 L7.00000586,4.89905919 Z M3.09865372,7.4999502 L1.00004102,8.89903575 L1.00004102,6.10089589 L3.09865372,7.4999502 Z M4.00002344,8.10085292 L7.00000586,10.1008412 L7.00000586,13.5656334 L1.40141366,9.83328028 L4.00002344,8.10085292 Z M8,10.1008412 L10.9999824,8.10085292 L13.5985922,9.83328028 L8,13.5656647 L8,10.1008412 L8,10.1008412 Z M11.9013521,7.4999502 L13.9999648,6.10089589 L13.9999648,8.899067 L11.9013521,7.4999502 Z" />
   </svg>
 );
 
-const CodePenIcon = (props) => <Icon component={SVGIcon} {...props} />;
+const CodePenIcon: React.FC<{ className?: string }> = (props) => (
+  <Icon component={SVGIcon} {...props} />
+);
 
 export default CodePenIcon;
diff --git a/.dumi/theme/common/CodePreview.jsx b/.dumi/theme/common/CodePreview.tsx
similarity index 52%
rename from .dumi/theme/common/CodePreview.jsx
rename to .dumi/theme/common/CodePreview.tsx
index 3624ec0fbb14..1f399a122163 100644
--- a/.dumi/theme/common/CodePreview.jsx
+++ b/.dumi/theme/common/CodePreview.tsx
@@ -8,31 +8,25 @@ const LANGS = {
   jsx: 'JavaScript',
 };
 
-const CodePreview = ({ toReactComponent, codes, onCodeTypeChange }) => {
+interface CodePreviewProps {
+  codes?: Record<PropertyKey, string>;
+  toReactComponent?: (node: any) => React.ReactNode;
+  onCodeTypeChange?: (activeKey: string) => void;
+}
+
+const CodePreview: React.FC<CodePreviewProps> = ({ toReactComponent, codes, onCodeTypeChange }) => {
   const langList = Object.keys(codes).sort().reverse();
 
-  let content;
+  let content: React.ReactNode;
 
   if (langList.length === 1) {
-    content = toReactComponent([
-      'pre',
-      {
-        lang: langList[0],
-        highlighted: codes[langList[0]],
-      },
-    ]);
+    content = toReactComponent(['pre', { lang: langList[0], highlighted: codes[langList[0]] }]);
   } else {
     content = (
       <Tabs centered onChange={onCodeTypeChange}>
         {langList.map((lang) => (
           <TabPane tab={LANGS[lang]} key={lang}>
-            {toReactComponent([
-              'pre',
-              {
-                lang,
-                highlighted: codes[lang],
-              },
-            ])}
+            {toReactComponent(['pre', { lang, highlighted: codes[lang] }])}
           </TabPane>
         ))}
       </Tabs>
diff --git a/.dumi/theme/common/CodeSandboxIcon.jsx b/.dumi/theme/common/CodeSandboxIcon.tsx
similarity index 76%
rename from .dumi/theme/common/CodeSandboxIcon.jsx
rename to .dumi/theme/common/CodeSandboxIcon.tsx
index 96ac3f53803e..24162f03be3f 100644
--- a/.dumi/theme/common/CodeSandboxIcon.jsx
+++ b/.dumi/theme/common/CodeSandboxIcon.tsx
@@ -1,12 +1,14 @@
 import React from 'react';
 import Icon from '@ant-design/icons';
 
-const SVGIcon = () => (
+const SVGIcon: React.FC = () => (
   <svg viewBox="0 0 1024 1024" fill="currentColor">
     <path d="M755 140.3l0.5-0.3h0.3L512 0 268.3 140h-0.3l0.8 0.4L68.6 256v512L512 1024l443.4-256V256L755 140.3z m-30 506.4v171.2L548 920.1V534.7L883.4 341v215.7l-158.4 90z m-584.4-90.6V340.8L476 534.4v385.7L300 818.5V646.7l-159.4-90.6zM511.7 280l171.1-98.3 166.3 96-336.9 194.5-337-194.6 165.7-95.7L511.7 280z" />
   </svg>
 );
 
-const CodeSandboxIcon = (props) => <Icon component={SVGIcon} {...props} />;
+const CodeSandboxIcon: React.FC<{ className?: string }> = (props) => (
+  <Icon component={SVGIcon} {...props} />
+);
 
 export default CodeSandboxIcon;
diff --git a/.dumi/theme/common/Color/ColorBlock.jsx b/.dumi/theme/common/Color/ColorBlock.tsx
similarity index 80%
rename from .dumi/theme/common/Color/ColorBlock.jsx
rename to .dumi/theme/common/Color/ColorBlock.tsx
index 282c6a6ca03f..aa981b763ba9 100644
--- a/.dumi/theme/common/Color/ColorBlock.jsx
+++ b/.dumi/theme/common/Color/ColorBlock.tsx
@@ -2,7 +2,13 @@ import React, { Component } from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import { message } from 'antd';
 
-export default class ColorBlock extends Component {
+interface ColorBlockProps {
+  color: string;
+  index: number;
+  dark?: boolean;
+}
+
+class ColorBlock extends Component<ColorBlockProps> {
   getTextStyle() {
     const { color, index, dark } = this.props;
     const colorMap = {
@@ -25,7 +31,7 @@ export default class ColorBlock extends Component {
   render() {
     const { color, index } = this.props;
     return (
-      <CopyToClipboard text={color} onCopy={this.onCopied} title="click to copy color">
+      <CopyToClipboard text={color} onCopy={this.onCopied}>
         <div className="main-color-item" style={this.getTextStyle()}>
           color-{index}
           <span className="main-color-value">{color.toLowerCase()}</span>
@@ -34,3 +40,5 @@ export default class ColorBlock extends Component {
     );
   }
 }
+
+export default ColorBlock;
diff --git a/.dumi/theme/common/Color/ColorPaletteTool.jsx b/.dumi/theme/common/Color/ColorPaletteTool.tsx
similarity index 73%
rename from .dumi/theme/common/Color/ColorPaletteTool.jsx
rename to .dumi/theme/common/Color/ColorPaletteTool.tsx
index 8a1936e1cde8..78cbe310a019 100644
--- a/.dumi/theme/common/Color/ColorPaletteTool.jsx
+++ b/.dumi/theme/common/Color/ColorPaletteTool.tsx
@@ -1,3 +1,4 @@
+import type { ChangeEvent } from 'react';
 import React, { Component } from 'react';
 import { FormattedMessage } from 'dumi';
 import ColorPicker from './ColorPicker';
@@ -6,18 +7,17 @@ import ColorPatterns from './ColorPatterns';
 const primaryMinSaturation = 70; // 主色推荐最小饱和度
 const primaryMinBrightness = 70; // 主色推荐最小亮度
 
-export default class ColorPaletteTool extends Component {
+class ColorPaletteTool extends Component {
   state = {
     primaryColor: '#1890ff',
     primaryColorInstance: null,
   };
 
-  handleChangeColor = (e, color) => {
-    const value = e.target ? e.target.value : e;
-    this.setState({
-      primaryColor: value,
-      primaryColorInstance: color,
-    });
+  handleChangeColor = (e: string | ChangeEvent, color: { hex: string }) => {
+    const value = (e as ChangeEvent<HTMLInputElement>).target
+      ? (e as ChangeEvent<HTMLInputElement>).target.value
+      : e;
+    this.setState({ primaryColor: value, primaryColorInstance: color });
   };
 
   renderColorValidation() {
@@ -45,12 +45,10 @@ export default class ColorPaletteTool extends Component {
         <div className="color-palette-pick">
           <FormattedMessage id="app.docs.color.pick-primary" />
         </div>
-        <div className="main-color">
-          <ColorPatterns color={primaryColor} />
-        </div>
+        <div className="main-color">{ColorPatterns({ color: primaryColor })}</div>
         <div className="color-palette-picker">
           <span style={{ display: 'inline-block', verticalAlign: 'middle' }}>
-            <ColorPicker type="chrome" color={primaryColor} onChange={this.handleChangeColor} />
+            <ColorPicker color={primaryColor} onChange={this.handleChangeColor} />
           </span>
           <span className="color-palette-picker-value">{primaryColor}</span>
           {this.renderColorValidation()}
@@ -59,3 +57,5 @@ export default class ColorPaletteTool extends Component {
     );
   }
 }
+
+export default ColorPaletteTool;
diff --git a/.dumi/theme/common/Color/ColorPaletteToolDark.jsx b/.dumi/theme/common/Color/ColorPaletteToolDark.tsx
similarity index 77%
rename from .dumi/theme/common/Color/ColorPaletteToolDark.jsx
rename to .dumi/theme/common/Color/ColorPaletteToolDark.tsx
index 2559b1afee24..fdcf68e6fdea 100644
--- a/.dumi/theme/common/Color/ColorPaletteToolDark.jsx
+++ b/.dumi/theme/common/Color/ColorPaletteToolDark.tsx
@@ -1,3 +1,4 @@
+import type { ChangeEvent } from 'react';
 import React, { Component } from 'react';
 import { FormattedMessage } from 'dumi';
 import { Row, Col } from 'antd';
@@ -7,26 +8,25 @@ import ColorPatterns from './ColorPatterns';
 const primaryMinSaturation = 70; // 主色推荐最小饱和度
 const primaryMinBrightness = 70; // 主色推荐最小亮度
 
-export default class ColorPaletteTool extends Component {
+class ColorPaletteTool extends Component {
   state = {
     primaryColor: '#1890ff',
     backgroundColor: '#141414',
     primaryColorInstance: null,
   };
 
-  handleChangeColor = (e, color) => {
-    const value = e.target ? e.target.value : e;
-    this.setState({
-      primaryColor: value,
-      primaryColorInstance: color,
-    });
+  handleChangeColor = (e: string | ChangeEvent, color: { hex: string }) => {
+    const value = (e as ChangeEvent<HTMLInputElement>).target
+      ? (e as ChangeEvent<HTMLInputElement>).target.value
+      : e;
+    this.setState({ primaryColor: value, primaryColorInstance: color });
   };
 
-  handleChangeBackgroundColor = (e) => {
-    const value = e.target ? e.target.value : e;
-    this.setState({
-      backgroundColor: value,
-    });
+  handleChangeBackgroundColor = (e: string | ChangeEvent) => {
+    const value = (e as ChangeEvent<HTMLInputElement>).target
+      ? (e as ChangeEvent<HTMLInputElement>).target.value
+      : e;
+    this.setState({ backgroundColor: value });
   };
 
   renderColorValidation() {
@@ -56,7 +56,7 @@ export default class ColorPaletteTool extends Component {
     return (
       <div className="color-palette-horizontal color-palette-horizontal-dark">
         <div className="main-color">
-          <ColorPatterns color={primaryColor} dark backgroundColor={backgroundColor} />
+          {ColorPatterns({ color: primaryColor, dark: true, backgroundColor })}
         </div>
         <div className="color-palette-picker">
           <Row>
@@ -67,11 +67,7 @@ export default class ColorPaletteTool extends Component {
               <span style={{ display: 'inline-block', verticalAlign: 'middle' }}>
                 <Row>
                   <Col span={18}>
-                    <ColorPicker
-                      type="chrome"
-                      color={primaryColor}
-                      onChange={this.handleChangeColor}
-                    />
+                    <ColorPicker color={primaryColor} onChange={this.handleChangeColor} />
                   </Col>
                   <Col span={6}>
                     <span className="color-palette-pick-hex">{primaryColor}</span>
@@ -87,7 +83,6 @@ export default class ColorPaletteTool extends Component {
                 <Row>
                   <Col span={18}>
                     <ColorPicker
-                      type="chrome"
                       color={backgroundColor}
                       onChange={this.handleChangeBackgroundColor}
                     />
@@ -105,3 +100,5 @@ export default class ColorPaletteTool extends Component {
     );
   }
 }
+
+export default ColorPaletteTool;
diff --git a/.dumi/theme/common/Color/ColorPalettes.jsx b/.dumi/theme/common/Color/ColorPalettes.jsx
deleted file mode 100644
index f7411668d6e9..000000000000
--- a/.dumi/theme/common/Color/ColorPalettes.jsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import React from 'react';
-import cls from 'classnames';
-import Palette from './Palette';
-
-const ColorPalettes = (props) => {
-  const { dark } = props;
-
-  const colors = [
-    {
-      name: 'red',
-      english: 'Dust Red',
-      chinese: '薄暮',
-      description: '斗志、奔放',
-    },
-    {
-      name: 'volcano',
-      english: 'Volcano',
-      chinese: '火山',
-      description: '醒目、澎湃',
-    },
-    {
-      name: 'orange',
-      english: 'Sunset Orange',
-      chinese: '日暮',
-      description: '温暖、欢快',
-    },
-    {
-      name: 'gold',
-      english: 'Calendula Gold',
-      chinese: '金盏花',
-      description: '活力、积极',
-    },
-    {
-      name: 'yellow',
-      english: 'Sunrise Yellow',
-      chinese: '日出',
-      description: '出生、阳光',
-    },
-    {
-      name: 'lime',
-      english: 'Lime',
-      chinese: '青柠',
-      description: '自然、生机',
-    },
-    {
-      name: 'green',
-      english: 'Polar Green',
-      chinese: '极光绿',
-      description: '健康、创新',
-    },
-    {
-      name: 'cyan',
-      english: 'Cyan',
-      chinese: '明青',
-      description: '希望、坚强',
-    },
-    {
-      name: 'blue',
-      english: 'Daybreak Blue',
-      chinese: '拂晓蓝',
-      description: '包容、科技、普惠',
-    },
-    {
-      name: 'geekblue',
-      english: 'Geek Blue',
-      chinese: '极客蓝',
-      description: '探索、钻研',
-    },
-    {
-      name: 'purple',
-      english: 'Golden Purple',
-      chinese: '酱紫',
-      description: '优雅、浪漫',
-    },
-    {
-      name: 'magenta',
-      english: 'Magenta',
-      chinese: '法式洋红',
-      description: '明快、感性',
-    },
-  ];
-  const colorCls = cls('color-palettes', {
-    'color-palettes-dark': !!dark,
-  });
-  return (
-    <div className={colorCls}>
-      {colors.map((color) => (
-        <Palette key={color.name} color={color} dark={dark} showTitle />
-      ))}
-    </div>
-  );
-};
-
-export default ColorPalettes;
diff --git a/.dumi/theme/common/Color/ColorPalettes.tsx b/.dumi/theme/common/Color/ColorPalettes.tsx
new file mode 100644
index 000000000000..b380e3f60da9
--- /dev/null
+++ b/.dumi/theme/common/Color/ColorPalettes.tsx
@@ -0,0 +1,94 @@
+import React from 'react';
+import cls from 'classnames';
+import Palette from './Palette';
+
+const colors = [
+  {
+    name: 'red',
+    english: 'Dust Red',
+    chinese: '薄暮',
+    description: '斗志、奔放',
+  },
+  {
+    name: 'volcano',
+    english: 'Volcano',
+    chinese: '火山',
+    description: '醒目、澎湃',
+  },
+  {
+    name: 'orange',
+    english: 'Sunset Orange',
+    chinese: '日暮',
+    description: '温暖、欢快',
+  },
+  {
+    name: 'gold',
+    english: 'Calendula Gold',
+    chinese: '金盏花',
+    description: '活力、积极',
+  },
+  {
+    name: 'yellow',
+    english: 'Sunrise Yellow',
+    chinese: '日出',
+    description: '出生、阳光',
+  },
+  {
+    name: 'lime',
+    english: 'Lime',
+    chinese: '青柠',
+    description: '自然、生机',
+  },
+  {
+    name: 'green',
+    english: 'Polar Green',
+    chinese: '极光绿',
+    description: '健康、创新',
+  },
+  {
+    name: 'cyan',
+    english: 'Cyan',
+    chinese: '明青',
+    description: '希望、坚强',
+  },
+  {
+    name: 'blue',
+    english: 'Daybreak Blue',
+    chinese: '拂晓蓝',
+    description: '包容、科技、普惠',
+  },
+  {
+    name: 'geekblue',
+    english: 'Geek Blue',
+    chinese: '极客蓝',
+    description: '探索、钻研',
+  },
+  {
+    name: 'purple',
+    english: 'Golden Purple',
+    chinese: '酱紫',
+    description: '优雅、浪漫',
+  },
+  {
+    name: 'magenta',
+    english: 'Magenta',
+    chinese: '法式洋红',
+    description: '明快、感性',
+  },
+];
+
+const ColorPalettes: React.FC<{ dark?: boolean }> = (props) => {
+  const { dark } = props;
+  const colorCls = cls('color-palettes', {
+    'color-palettes-dark': !!dark,
+  });
+  return (
+    <div className={colorCls}>
+      {colors.map((color) => (
+        <Palette key={color.name} color={color} dark={dark} showTitle />
+      ))}
+    </div>
+  );
+};
+
+export default ColorPalettes;
diff --git a/.dumi/theme/common/Color/ColorPatterns.jsx b/.dumi/theme/common/Color/ColorPatterns.tsx
similarity index 63%
rename from .dumi/theme/common/Color/ColorPatterns.jsx
rename to .dumi/theme/common/Color/ColorPatterns.tsx
index 6989b2021545..d40d88a0c997 100644
--- a/.dumi/theme/common/Color/ColorPatterns.jsx
+++ b/.dumi/theme/common/Color/ColorPatterns.tsx
@@ -3,9 +3,17 @@ import { generate } from '@ant-design/colors';
 import uniq from 'lodash/uniq';
 import ColorBlock from './ColorBlock';
 
-export default function ColorPatterns({ color, dark, backgroundColor }) {
+interface ColorPatternsProps {
+  color?: string;
+  dark?: boolean;
+  backgroundColor?: string;
+}
+
+const ColorPatterns = ({ color, dark, backgroundColor }: ColorPatternsProps) => {
   const colors = generate(color, dark ? { theme: 'dark', backgroundColor } : {});
   return uniq(colors).map((colorString, i) => (
     <ColorBlock color={colorString} index={i + 1} dark={dark} key={colorString} />
   ));
-}
+};
+
+export default ColorPatterns;
diff --git a/.dumi/theme/common/Color/ColorPicker.tsx b/.dumi/theme/common/Color/ColorPicker.tsx
index 5e7fe77f5ba6..e6b5d928713c 100644
--- a/.dumi/theme/common/Color/ColorPicker.tsx
+++ b/.dumi/theme/common/Color/ColorPicker.tsx
@@ -5,11 +5,11 @@ const noop = () => {};
 
 interface ColorPickerProps {
   color?: string;
-  small: boolean;
-  position: string;
+  small?: boolean;
+  position?: string;
   presetColors?: string[];
-  onChange: (hex: string, color: { hex: string }) => void;
-  onChangeComplete: (hex: string) => void;
+  onChange?: (hex: string, color: { hex: string }) => void;
+  onChangeComplete?: (hex: string) => void;
 }
 
 export default class ColorPicker extends Component<ColorPickerProps> {
diff --git a/.dumi/theme/common/Color/ColorStyle.tsx b/.dumi/theme/common/Color/ColorStyle.tsx
index 58ebe6d3aba7..9de6c08de0a2 100644
--- a/.dumi/theme/common/Color/ColorStyle.tsx
+++ b/.dumi/theme/common/Color/ColorStyle.tsx
@@ -48,89 +48,89 @@ ${makeGrayPalette(index + 1)}
   return (
     <Global
       styles={css`
-.color-palettes {
-  margin: 0 1%;
-
-  &-dark {
-    margin: 0;
-    padding: 0 28px;
-    background-color: #141414;
-
-    .color-title {
-      color: rgba(255, 255, 255, 0.85);
-    }
-
-    .color-description {
-      color: rgba(255, 255, 255, 0.45);
-    }
-
-    .color-palette {
-      margin: 45px 3.5% 45px 0;
-
-      &:nth-of-type(3n) {
-        margin-right: 0;
-      }
-
-      .main-color-item {
-        margin-right: 0;
-
-        &:hover {
-          margin-right: -8px;
+        .color-palettes {
+          margin: 0 1%;
+
+          &-dark {
+            margin: 0;
+            padding: 0 28px;
+            background-color: #141414;
+
+            .color-title {
+              color: rgba(255, 255, 255, 0.85);
+            }
+
+            .color-description {
+              color: rgba(255, 255, 255, 0.45);
+            }
+
+            .color-palette {
+              margin: 45px 3.5% 45px 0;
+
+              &:nth-of-type(3n) {
+                margin-right: 0;
+              }
+
+              .main-color-item {
+                margin-right: 0;
+
+                &:hover {
+                  margin-right: -8px;
+                }
+              }
+            }
+          }
         }
-      }
-    }
-  }
-}
 
-.color-palette {
-  display: inline-block;
-  width: 31%;
-  margin: 45px 1%;
-
-  &-pick {
-    margin: 0 0 20px;
-    font-size: 20px;
-    text-align: center;
-  }
-
-  &-picker {
-    margin: 24px 0;
-
-    &-value {
-      position: relative;
-      top: -3px;
-      margin-left: 16px;
-      font-size: 14px;
-      font-family: Consolas, sans-serif;
-
-      .ant-row-rtl & {
-        margin-right: 16px;
-        margin-left: 0;
-      }
-    }
-
-    &-validation {
-      position: relative;
-      top: -3px;
-      margin-left: 16px;
-      color: ${token.colorError};
-      font-size: 13px;
-
-      .ant-row-rtl & {
-        margin-right: 16px;
-        margin-left: 0;
-      }
-
-      &-dark {
-        margin-left: 0;
-      }
-    }
-  }
-}
+        .color-palette {
+          display: inline-block;
+          width: 31%;
+          margin: 45px 1%;
+
+          &-pick {
+            margin: 0 0 20px;
+            font-size: 20px;
+            text-align: center;
+          }
+
+          &-picker {
+            margin: 24px 0;
+
+            &-value {
+              position: relative;
+              top: -3px;
+              margin-left: 16px;
+              font-size: 14px;
+              font-family: Consolas, sans-serif;
+
+              .ant-row-rtl & {
+                margin-right: 16px;
+                margin-left: 0;
+              }
+            }
+
+            &-validation {
+              position: relative;
+              top: -3px;
+              margin-left: 16px;
+              color: ${token.colorError};
+              font-size: 13px;
+
+              .ant-row-rtl & {
+                margin-right: 16px;
+                margin-left: 0;
+              }
+
+              &-dark {
+                margin-left: 0;
+              }
+            }
+          }
+        }
 
-.main-color {
-  ${makePalette('blue')}
-  ${makePalette('purple')}
+        .main-color {
+          ${makePalette('blue')}
+          ${makePalette('purple')}
   ${makePalette('cyan')}
   ${makePalette('green')}
   ${makePalette('magenta')}
@@ -145,145 +145,145 @@ ${makeGrayPalette(index + 1)}
 
   text-align: left;
 
-  &-item {
-    position: relative;
-    height: 44px;
-    margin-right: 4px;
-    padding: 0 12px;
-    font-size: 14px;
-    font-family: Consolas, sans-serif;
-    line-height: 44px;
-    cursor: pointer;
-    transition: all 0.2s;
-
-    &:first-child {
-      border-radius: 4px 4px 0 0;
-    }
-
-    &:last-child {
-      border-radius: 0 0 4px 4px;
-    }
-
-    &:hover {
-      margin-right: -8px;
-      border-radius: 0 4px 4px 0;
-    }
-  }
-
-  &-item &-text {
-    float: left;
-    transition: all 0.3s;
-  }
-
-  &-item &-value {
-    position: relative;
-    left: 3px;
-    float: right;
-    transform: scale(0.85);
-    transform-origin: 100% 50%;
-    opacity: 0;
-    transition: all 0.3s;
-  }
-}
-
-.color-title {
-  margin: 0 0 24px;
-  color: #5c6b77;
-  font-weight: 500;
-  font-size: 22px;
-  text-align: center;
-  text-transform: capitalize;
-}
-
-.color-description {
-  display: block;
-  color: #777;
-  font-weight: lighter;
-  font-size: 14px;
-}
-
-.main-color:hover {
-  .main-color-value {
-    left: 0;
-    opacity: 0.7;
-  }
-}
-
-.color-palette-horizontal {
-  width: 100%;
-  box-sizing: border-box;
-
-  &-dark {
-    height: 303px;
-    padding: 32px 28px;
-    background-color: #141414;
-
-    .color-palette-picker {
-      margin-bottom: 0;
-    }
-
-    .color-palette-pick {
-      color: rgba(255, 255, 255, 0.65);
-      text-align: left;
-
-      &-hex {
-        color: rgba(255, 255, 255, 0.65);
-      }
+          &-item {
+            position: relative;
+            height: 44px;
+            margin-right: 4px;
+            padding: 0 12px;
+            font-size: 14px;
+            font-family: Consolas, sans-serif;
+            line-height: 44px;
+            cursor: pointer;
+            transition: all 0.2s;
+
+            &:first-child {
+              border-radius: 4px 4px 0 0;
+            }
+
+            &:last-child {
+              border-radius: 0 0 4px 4px;
+            }
+
+            &:hover {
+              margin-right: -8px;
+              border-radius: 0 4px 4px 0;
+            }
+          }
+
+          &-item &-text {
+            float: left;
+            transition: all 0.3s;
+          }
+
+          &-item &-value {
+            position: relative;
+            left: 3px;
+            float: right;
+            transform: scale(0.85);
+            transform-origin: 100% 50%;
+            opacity: 0;
+            transition: all 0.3s;
+          }
+        }
 
-      .ant-row-rtl & {
-        direction: rtl;
-        text-align: right;
-      }
-    }
-  }
-
-  .main-color {
-    display: flex;
-
-    &-item {
-      box-sizing: border-box;
-      position: relative;
-      flex: 1;
-      height: 86px;
-      margin-right: 0;
-      padding: 37px 0 0;
-      line-height: normal;
-      text-align: center;
-      border-radius: 0;
-
-      .main-color-text {
-        float: none;
-      }
-
-      &:hover {
-        height: 96px;
-        margin-top: -10px;
-        border-radius: 4px 4px 0 0;
-      }
-    }
+        .color-title {
+          margin: 0 0 24px;
+          color: #5c6b77;
+          font-weight: 500;
+          font-size: 22px;
+          text-align: center;
+          text-transform: capitalize;
+        }
 
-    &-value {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      text-align: center;
-      transform-origin: unset;
-    }
+        .color-description {
+          display: block;
+          color: #777;
+          font-weight: lighter;
+          font-size: 14px;
+        }
 
-    &:hover {
-      .main-color-item {
-        padding-top: 8px;
-      }
+        .main-color:hover {
+          .main-color-value {
+            left: 0;
+            opacity: 0.7;
+          }
+        }
 
-      .main-color-value {
-        bottom: 8px;
-        opacity: 0.7;
-      }
-    }
-  }
-}
-    `}
+        .color-palette-horizontal {
+          box-sizing: border-box;
+          width: 100%;
+
+          &-dark {
+            height: 303px;
+            padding: 32px 28px;
+            background-color: #141414;
+
+            .color-palette-picker {
+              margin-bottom: 0;
+            }
+
+            .color-palette-pick {
+              color: rgba(255, 255, 255, 0.65);
+              text-align: left;
+
+              &-hex {
+                color: rgba(255, 255, 255, 0.65);
+              }
+
+              .ant-row-rtl & {
+                direction: rtl;
+                text-align: right;
+              }
+            }
+          }
+
+          .main-color {
+            display: flex;
+
+            &-item {
+              position: relative;
+              flex: 1;
+              box-sizing: border-box;
+              height: 86px;
+              margin-right: 0;
+              padding: 37px 0 0;
+              line-height: normal;
+              text-align: center;
+              border-radius: 0;
+
+              .main-color-text {
+                float: none;
+              }
+
+              &:hover {
+                height: 96px;
+                margin-top: -10px;
+                border-radius: 4px 4px 0 0;
+              }
+            }
+
+            &-value {
+              position: absolute;
+              bottom: 0;
+              left: 0;
+              width: 100%;
+              text-align: center;
+              transform-origin: unset;
+            }
+
+            &:hover {
+              .main-color-item {
+                padding-top: 8px;
+              }
+
+              .main-color-value {
+                bottom: 8px;
+                opacity: 0.7;
+              }
+            }
+          }
+        }
+      `}
     />
   );
 };
diff --git a/.dumi/theme/common/Color/Palette.jsx b/.dumi/theme/common/Color/Palette.tsx
similarity index 83%
rename from .dumi/theme/common/Color/Palette.jsx
rename to .dumi/theme/common/Color/Palette.tsx
index 5b35b6a36595..3f5f6246534f 100644
--- a/.dumi/theme/common/Color/Palette.jsx
+++ b/.dumi/theme/common/Color/Palette.tsx
@@ -3,7 +3,7 @@ import { message } from 'antd';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import { presetDarkPalettes } from '@ant-design/colors';
 
-const rgbToHex = (rgbString) => {
+const rgbToHex = (rgbString: string): string => {
   const rgb = rgbString.match(/\d+/g);
   let r = parseInt(rgb[0], 10).toString(16);
   let g = parseInt(rgb[1], 10).toString(16);
@@ -14,10 +14,21 @@ const rgbToHex = (rgbString) => {
   return `#${r}${g}${b}`;
 };
 
-export default class Palette extends React.Component {
+interface PaletteProps {
+  showTitle?: boolean;
+  direction?: 'horizontal' | 'vertical';
+  dark?: boolean;
+  color?: any;
+}
+
+class Palette extends React.Component<PaletteProps> {
+  hexColors: Record<PropertyKey, string>;
+
+  colorNodes: Record<PropertyKey, Element>;
+
   componentDidMount() {
     this.hexColors = {};
-    Object.keys(this.colorNodes).forEach((key) => {
+    Object.keys(this.colorNodes || {}).forEach((key) => {
       const computedColor = getComputedStyle(this.colorNodes[key])['background-color'];
       if (computedColor.includes('rgba')) {
         this.hexColors[key] = computedColor;
@@ -34,10 +45,10 @@ export default class Palette extends React.Component {
       showTitle,
       direction,
       dark,
-      color: { name, description, english, chinese, count = 10 },
+      color: { name, description, english, chinese, count } = { name: 'gray', count: 13 },
     } = this.props;
     const className = direction === 'horizontal' ? 'color-palette-horizontal' : 'color-palette';
-    const colors = [];
+    const colors: React.ReactNode[] = [];
     const colorName = `${english} / ${chinese}`;
     const colorPaletteMap = {
       dark: ['#fff', 'unset'],
@@ -88,6 +99,4 @@ export default class Palette extends React.Component {
   }
 }
 
-Palette.defaultProps = {
-  color: { name: 'gray', count: 13 },
-};
+export default Palette;
diff --git a/.dumi/theme/common/ExternalLinkIcon.jsx b/.dumi/theme/common/ExternalLinkIcon.tsx
similarity index 79%
rename from .dumi/theme/common/ExternalLinkIcon.jsx
rename to .dumi/theme/common/ExternalLinkIcon.tsx
index a0429db503cd..f193d6a69559 100644
--- a/.dumi/theme/common/ExternalLinkIcon.jsx
+++ b/.dumi/theme/common/ExternalLinkIcon.tsx
@@ -1,13 +1,15 @@
 import React from 'react';
 import Icon from '@ant-design/icons';
 
-const SVGIcon = ({ color = 'currentColor' }) => (
+const SVGIcon: React.FC<{ color?: string }> = ({ color = 'currentColor' }) => (
   <svg viewBox="0 0 1024 1024" width="1em" height="1em" fill={color}>
     <path d="M853.333 469.333A42.667 42.667 0 0 0 810.667 512v256A42.667 42.667 0 0 1 768 810.667H256A42.667 42.667 0 0 1 213.333 768V256A42.667 42.667 0 0 1 256 213.333h256A42.667 42.667 0 0 0 512 128H256a128 128 0 0 0-128 128v512a128 128 0 0 0 128 128h512a128 128 0 0 0 128-128V512a42.667 42.667 0 0 0-42.667-42.667z" />
     <path d="M682.667 213.333h67.413L481.707 481.28a42.667 42.667 0 0 0 0 60.587 42.667 42.667 0 0 0 60.586 0L810.667 273.92v67.413A42.667 42.667 0 0 0 853.333 384 42.667 42.667 0 0 0 896 341.333V170.667A42.667 42.667 0 0 0 853.333 128H682.667a42.667 42.667 0 0 0 0 85.333z" />
   </svg>
 );
 
-const ExternalLinkIcon = (props) => <Icon component={SVGIcon} {...props} />;
+const ExternalLinkIcon: React.FC<{ className?: string }> = (props) => (
+  <Icon component={SVGIcon} {...props} />
+);
 
 export default ExternalLinkIcon;
diff --git a/.dumi/theme/common/PrevAndNext.tsx b/.dumi/theme/common/PrevAndNext.tsx
index 1a36a40a0dfb..4752705ee6d4 100644
--- a/.dumi/theme/common/PrevAndNext.tsx
+++ b/.dumi/theme/common/PrevAndNext.tsx
@@ -96,7 +96,7 @@ const flattenMenu = (menuItems: MenuProps['items']): MenuProps['items'] | null =
   return null;
 };
 
-const PrevAndNext = () => {
+const PrevAndNext: React.FC = () => {
   const styles = useStyle();
 
   const [menuItems, selectedKey] = useMenu({
diff --git a/.dumi/theme/common/RiddleIcon.jsx b/.dumi/theme/common/RiddleIcon.tsx
similarity index 94%
rename from .dumi/theme/common/RiddleIcon.jsx
rename to .dumi/theme/common/RiddleIcon.tsx
index e8efd77dc585..2c46a2415233 100644
--- a/.dumi/theme/common/RiddleIcon.jsx
+++ b/.dumi/theme/common/RiddleIcon.tsx
@@ -1,12 +1,14 @@
 import React from 'react';
 import Icon from '@ant-design/icons';
 
-const SVGIcon = () => (
+const SVGIcon: React.FC = () => (
   <svg viewBox="0 0 14 14" fill="currentColor">
     <path d="M13.8875145,13.1234844 C13.8687399,13.0691875 13.8499977,13.0329687 13.8312555,12.9786562 L11.3687445,8.83296875 C12.9187468,8.05754687 13.9640694,6.49009375 13.9640694,4.68728125 C13.9624994,2.09095312 11.7968694,0 9.10938728,0 L3.86404855,0 C3.04217572,0 2.37028902,0.648703125 2.37028902,1.44223437 L2.37028902,1.82090625 L0.746871676,1.82090625 C0.33593526,1.82090625 0,2.14526562 0,2.54203125 L0,13.4478437 C0,13.7540937 0.242191908,13.9879375 0.559368786,13.9879375 C0.615627746,13.9879375 0.67187052,13.9698281 0.72812948,13.9517187 L13.440615,13.9517187 C13.7578081,13.9517187 14,13.7178906 14,13.4116406 C14,13.321125 13.9624994,13.2125 13.8875145,13.1234844 Z M3.49061272,8.0394375 L3.49061272,2.9206875 L8.71719306,2.9206875 C9.74375723,2.9206875 10.5843723,3.73232812 10.5843723,4.7235 C10.5843723,5.71465625 9.76249942,6.5081875 8.71719306,6.5081875 L6.53280462,6.5081875 L6.53280462,6.52629688 C6.45781965,6.52629688 6.3828185,6.5625 6.3093711,6.59870313 C6.04843699,6.74354688 5.95469364,7.08598438 6.10467977,7.33792188 L8.3078104,11.0325469 L3.4906289,11.0325469 L3.4906289,8.0394375 L3.49061272,8.0394375 Z M1.1203237,12.8881406 L1.1203237,2.9206875 L2.3703052,2.9206875 L2.3703052,11.5545313 C2.3703052,11.8607813 2.61249711,12.0946094 2.92969017,12.0946094 L2.94843237,12.0946094 C2.98593295,12.1127188 3.04219191,12.1127188 3.09843468,12.1127188 L9.16563006,12.1127188 C9.48280694,12.1127188 9.72499884,11.878875 9.72499884,11.572625 L9.72499884,11.5364219 C9.76249942,11.3915938 9.74375723,11.2482813 9.66875607,11.1215469 L7.5593526,7.58835938 L8.6984185,7.58835938 C10.3406104,7.58835938 11.6843514,6.29095313 11.6843514,4.703875 C11.6843514,3.1168125 10.3406104,1.81939063 8.6984185,1.81939063 L3.4906289,1.81939063 L3.4906289,1.44073437 C3.4906289,1.24310937 3.65937341,1.08017187 3.86406474,1.08017187 L9.09061272,1.08017187 C11.143741,1.08017187 12.8234173,2.7019375 12.8234173,4.68578125 C12.8234173,6.21853125 11.8343538,7.5340625 10.4343538,8.05603125 C10.378111,8.07414063 10.3406104,8.09223438 10.2843514,8.11034375 C10.0234173,8.25517188 9.92967399,8.597625 10.0796763,8.8495625 L12.5062405,12.8881563 L1.12030751,12.8881563 L1.1203237,12.8881406 Z" />
   </svg>
 );
 
-const RiddleIcon = (props) => <Icon component={SVGIcon} {...props} />;
+const RiddleIcon: React.FC<{ className?: string }> = (props) => (
+  <Icon component={SVGIcon} {...props} />
+);
 
 export default RiddleIcon;
diff --git a/.dumi/theme/common/ThemeSwitch/ThemeIcon.tsx b/.dumi/theme/common/ThemeSwitch/ThemeIcon.tsx
index cbf413a5d3ee..724f5a8c84e7 100644
--- a/.dumi/theme/common/ThemeSwitch/ThemeIcon.tsx
+++ b/.dumi/theme/common/ThemeSwitch/ThemeIcon.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Icon from '@ant-design/icons';
 
-const ThemeIcon = (props: any) => {
+const ThemeIcon: React.FC<{ className?: string }> = (props) => {
   const SVGIcon = React.useCallback(
     () => (
       <svg width={21} height={21} viewBox="0 0 21 21" fill="currentColor" {...props}>
diff --git a/.dumi/theme/common/ThemeSwitch/index.tsx b/.dumi/theme/common/ThemeSwitch/index.tsx
index fe461cbbc558..c39092cb5060 100644
--- a/.dumi/theme/common/ThemeSwitch/index.tsx
+++ b/.dumi/theme/common/ThemeSwitch/index.tsx
@@ -1,4 +1,3 @@
-import type { FC } from 'react';
 import React from 'react';
 import { FloatButton, theme } from 'antd';
 import { DarkTheme, Light, CompactTheme } from 'antd-token-previewer/es/icons';
@@ -11,7 +10,7 @@ export type ThemeSwitchProps = {
   onChange: (value: typeof defaultAlgorithm[]) => void;
 };
 
-const ThemeSwitch: FC<ThemeSwitchProps> = ({ value, onChange }) => {
+const ThemeSwitch: React.FC<ThemeSwitchProps> = ({ value, onChange }) => {
   const handleLightSwitch = () => {
     let newValue = [...value];
     if (value.includes(darkAlgorithm)) {

From cccbab7c6d26686c378ccb95239913e2507d2a54 Mon Sep 17 00:00:00 2001
From: Yuki Zhang <foryuki@outlook.com>
Date: Wed, 7 Dec 2022 17:11:25 +0800
Subject: [PATCH 37/41] fix: disable button focus style in Space.Compact
 (#39157)

* fix: button hover style in Space.Compact

* fix: button hover style in Space.Compact

* style: disable button focus effect when in compact-item

* chore: update comments

* fix: improve key name

* fix: remove focus style
---
 components/button/style/index.tsx      |  6 ++--
 components/date-picker/style/index.tsx |  4 ++-
 components/select/style/index.tsx      | 10 +++---
 components/style/compact-item.tsx      | 48 +++++++++++++++-----------
 4 files changed, 38 insertions(+), 30 deletions(-)

diff --git a/components/button/style/index.tsx b/components/button/style/index.tsx
index 4a33aad71226..03a807c30f2a 100644
--- a/components/button/style/index.tsx
+++ b/components/button/style/index.tsx
@@ -50,7 +50,7 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
         ...genFocusStyle(token),
       },
 
-      ...genCompactItemStyle(token, componentCls),
+      ...genCompactItemStyle(token, componentCls, { focus: false }),
       ...genCompactItemVerticalStyle(token, componentCls),
 
       // make `btn-icon-only` not too narrow
@@ -69,7 +69,7 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
             display: 'inline-block',
             width: token.lineWidth,
             height: `calc(100% + ${token.lineWidth * 2}px)`,
-            backgroundColor: token.colorPrimaryBorder,
+            backgroundColor: token.colorPrimaryHover,
             content: '""',
           },
         },
@@ -87,7 +87,7 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
               display: 'inline-block',
               width: `calc(100% + ${token.lineWidth * 2}px)`,
               height: token.lineWidth,
-              backgroundColor: token.colorPrimaryBorder,
+              backgroundColor: token.colorPrimaryHover,
               content: '""',
             },
           },
diff --git a/components/date-picker/style/index.tsx b/components/date-picker/style/index.tsx
index ab950ec025c8..56d90c1206cb 100644
--- a/components/date-picker/style/index.tsx
+++ b/components/date-picker/style/index.tsx
@@ -974,7 +974,9 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
         transition: `border ${motionDurationMid}, box-shadow ${motionDurationMid}`,
 
         // Space.Compact
-        ...genCompactItemStyle(token, componentCls, '', `${componentCls}-focused`),
+        ...genCompactItemStyle(token, componentCls, {
+          focusElCls: `${componentCls}-focused`,
+        }),
 
         '&:hover, &-focused': {
           ...genHoverStyle(token),
diff --git a/components/select/style/index.tsx b/components/select/style/index.tsx
index adc262db5b29..511db27c18df 100644
--- a/components/select/style/index.tsx
+++ b/components/select/style/index.tsx
@@ -263,12 +263,10 @@ const genSelectStyle: GenerateStyle<SelectToken> = (token) => {
           width: '100%',
         },
         // Space.Compact
-        ...genCompactItemStyle(
-          token,
-          componentCls,
-          `${componentCls}-selector`,
-          `${componentCls}-focused`,
-        ),
+        ...genCompactItemStyle(token, componentCls, {
+          borderElCls: `${componentCls}-selector`,
+          focusElCls: `${componentCls}-focused`,
+        }),
       },
     },
 
diff --git a/components/style/compact-item.tsx b/components/style/compact-item.tsx
index 8165934c8cb1..236c79391363 100644
--- a/components/style/compact-item.tsx
+++ b/components/style/compact-item.tsx
@@ -2,26 +2,40 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { DerivativeToken } from '../theme/internal';
 
+interface CompactItemOptions {
+  focus?: boolean;
+  /**
+   * Some component borders are implemented on child elements
+   * like `Select`
+   */
+  borderElCls?: string;
+  /**
+   * Some components have special `focus` className especially with popovers
+   * like `Select` and `DatePicker`
+   */
+  focusElCls?: string;
+}
+
 // handle border collapse
-function compactItemBorder(
-  token: DerivativeToken,
-  borderedItemCls?: string,
-  popoverFocusedCls?: string,
-): CSSObject {
-  const childCombinator = borderedItemCls ? '> *' : '';
+function compactItemBorder(token: DerivativeToken, options: CompactItemOptions): CSSObject {
+  const childCombinator = options.borderElCls ? '> *' : '';
+  const hoverEffects = ['hover', options.focus ? 'focus' : null, 'active']
+    .filter(Boolean)
+    .map((n) => `&:${n} ${childCombinator}`)
+    .join(',');
   return {
     '&-item:not(&-last-item)': {
       marginInlineEnd: -token.lineWidth,
     },
 
     '&-item': {
-      [`&:hover ${childCombinator}, &:focus ${childCombinator}, &:active ${childCombinator}`]: {
+      [hoverEffects]: {
         zIndex: 2,
       },
 
-      ...(popoverFocusedCls
+      ...(options.focusElCls
         ? {
-            [`&${popoverFocusedCls}`]: {
+            [`&${options.focusElCls}`]: {
               zIndex: 2,
             },
           }
@@ -35,8 +49,8 @@ function compactItemBorder(
 }
 
 // handle border-radius
-function compactItemBorderRadius(prefixCls: string, borderedElementCls?: string): CSSObject {
-  const childCombinator = borderedElementCls ? `> ${borderedElementCls}` : '';
+function compactItemBorderRadius(prefixCls: string, options: CompactItemOptions): CSSObject {
+  const childCombinator = options.borderElCls ? `> ${options.borderElCls}` : '';
 
   return {
     [`&-item:not(&-first-item):not(&-last-item) ${childCombinator}`]: {
@@ -64,18 +78,12 @@ function compactItemBorderRadius(prefixCls: string, borderedElementCls?: string)
 export function genCompactItemStyle(
   token: DerivativeToken,
   prefixCls: string,
-  /** Some component borders are implemented on child elements like `Select` */
-  borderedElementCls?: string,
-  /**
-   * Some components have special `focus` className especially with popovers like `Select` and
-   * `DatePicker`
-   */
-  popoverFocusedCls?: string,
+  options: CompactItemOptions = { focus: true },
 ): CSSObject {
   return {
     '&-compact': {
-      ...compactItemBorder(token, borderedElementCls, popoverFocusedCls),
-      ...compactItemBorderRadius(prefixCls, borderedElementCls),
+      ...compactItemBorder(token, options),
+      ...compactItemBorderRadius(prefixCls, options),
     },
   };
 }

From 485cc8a3667e55df7625fe7119681b5d144586fe Mon Sep 17 00:00:00 2001
From: lijianan <574980606@qq.com>
Date: Wed, 7 Dec 2022 17:13:39 +0800
Subject: [PATCH 38/41] fix: delete comma (#39356)

---
 tests/shared/imageTest.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/tests/shared/imageTest.tsx b/tests/shared/imageTest.tsx
index 65a26b519b5b..317872e1907d 100644
--- a/tests/shared/imageTest.tsx
+++ b/tests/shared/imageTest.tsx
@@ -35,11 +35,14 @@ export default function imageTest(component: React.ReactElement) {
     await page.addStyleTag({ path: `${process.cwd()}/dist/reset.css` });
 
     const cache = createCache();
-    const html = ReactDOMServer.renderToString(
+
+    const element = (
       <App>
-        <StyleProvider cache={cache}>{component}</StyleProvider>,
-      </App>,
+        <StyleProvider cache={cache}>{component}</StyleProvider>
+      </App>
     );
+
+    const html = ReactDOMServer.renderToString(element);
     const styleStr = extractStyle(cache);
 
     await page.evaluate(

From f75cd075ecf567d1b3395b0a6448f6b4203764be Mon Sep 17 00:00:00 2001
From: lijianan <574980606@qq.com>
Date: Wed, 7 Dec 2022 18:27:02 +0800
Subject: [PATCH 39/41] style: code style optimization (#39331)

* style: code optimization

* fix

* add type
---
 components/app/index.en-US.md | 11 +++++++----
 components/app/index.tsx      |  9 ++++-----
 components/app/index.zh-CN.md | 11 +++++++----
 3 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/components/app/index.en-US.md b/components/app/index.en-US.md
index 0c9fbc26946e..691985be42f5 100644
--- a/components/app/index.en-US.md
+++ b/components/app/index.en-US.md
@@ -22,22 +22,25 @@ Static function in React 18 concurrent mode will not well support. In v5, we rec
 
 ## How to use
 
-```javascript
+```tsx
 import React from 'react';
 import { App } from 'antd';
-const MyPage = () => {
+
+const MyPage: React.FC = () => {
   const { message, notification, modal } = App.useApp();
   message.success('Good!');
   notification.info({ message: 'Good' });
   modal.warning({ title: 'Good' });
   // ....
-  // other message,notification,modal static function
+  // other message, notification, modal static function
   return <div>Hello word</div>;
 };
 
-const MyApp = () => (
+const MyApp: React.FC = () => (
   <App>
     <MyPage />
   </App>
 );
+
+export default MyApp;
 ```
diff --git a/components/app/index.tsx b/components/app/index.tsx
index 0e8add0cd98a..5b9a10c7a2f1 100644
--- a/components/app/index.tsx
+++ b/components/app/index.tsx
@@ -16,11 +16,9 @@ export type AppProps = {
   children?: ReactNode;
 };
 
-const useApp: () => useAppProps = () => React.useContext(AppContext);
+const useApp = () => React.useContext<useAppProps>(AppContext);
 
-const App: React.ForwardRefRenderFunction<HTMLDivElement, AppProps> & {
-  useApp: () => useAppProps;
-} = (props) => {
+const App: React.FC<AppProps> & { useApp: () => useAppProps } = (props) => {
   const { prefixCls: customizePrefixCls, children, className } = props;
   const { getPrefixCls } = useContext<ConfigConsumerProps>(ConfigContext);
   const prefixCls = getPrefixCls('app', customizePrefixCls);
@@ -31,7 +29,7 @@ const App: React.ForwardRefRenderFunction<HTMLDivElement, AppProps> & {
   const [notificationApi, notificationContextHolder] = useNotification();
   const [ModalApi, ModalContextHolder] = useModal();
 
-  const memoizedContextValue = React.useMemo(
+  const memoizedContextValue = React.useMemo<useAppProps>(
     () => ({
       message: messageApi,
       notification: notificationApi,
@@ -57,4 +55,5 @@ if (process.env.NODE_ENV !== 'production') {
 }
 
 App.useApp = useApp;
+
 export default App;
diff --git a/components/app/index.zh-CN.md b/components/app/index.zh-CN.md
index 2ac40509bf9d..32777ab6cbb7 100644
--- a/components/app/index.zh-CN.md
+++ b/components/app/index.zh-CN.md
@@ -24,22 +24,25 @@ demo:
 
 ## How to use
 
-```javascript
+```tsx
 import React from 'react';
 import { App } from 'antd';
-const MyPage = () => {
+
+const MyPage: React.FC = () => {
   const { message, notification, modal } = App.useApp();
   message.success('Good!');
   notification.info({ message: 'Good' });
   modal.warning({ title: 'Good' });
   // ....
-  // other message,notification,modal static function
+  // other message, notification, modal static function
   return <div>Hello word</div>;
 };
 
-const MyApp = () => (
+const MyApp: React.FC = () => (
   <App>
     <MyPage />
   </App>
 );
+
+export default MyApp;
 ```

From a836a3a3fe344c627e949c811614a6cde81fa9a7 Mon Sep 17 00:00:00 2001
From: Jung Min O <owjs3901@users.noreply.github.com>
Date: Wed, 7 Dec 2022 22:33:44 +0900
Subject: [PATCH 40/41] feat: Modal.xxx supports footer (#39048)

https://github.com/ant-design/ant-design/issues/16644
---
 components/modal/ConfirmDialog.tsx          | 32 ++++++++++++---------
 components/modal/Modal.tsx                  |  1 +
 components/modal/__tests__/confirm.test.tsx | 24 ++++++++++++++++
 components/modal/index.en-US.md             |  1 +
 components/modal/index.zh-CN.md             |  1 +
 5 files changed, 45 insertions(+), 14 deletions(-)

diff --git a/components/modal/ConfirmDialog.tsx b/components/modal/ConfirmDialog.tsx
index 2d4e9890be0a..5e4302d7514a 100644
--- a/components/modal/ConfirmDialog.tsx
+++ b/components/modal/ConfirmDialog.tsx
@@ -41,7 +41,7 @@ export function ConfirmContent(
     rootPrefixCls,
     type,
     okCancel,
-
+    footer,
     // Legacy for static function usage
     locale: staticLocale,
   } = props;
@@ -107,19 +107,23 @@ export function ConfirmContent(
               )}
               <div className={`${confirmPrefixCls}-content`}>{props.content}</div>
             </div>
-            <div className={`${confirmPrefixCls}-btns`}>
-              {cancelButton}
-              <ActionButton
-                type={okType}
-                actionFn={onOk}
-                close={close}
-                autoFocus={autoFocusButton === 'ok'}
-                buttonProps={okButtonProps}
-                prefixCls={`${rootPrefixCls}-btn`}
-              >
-                {okText || (mergedOkCancel ? mergedLocale?.okText : mergedLocale?.justOkText)}
-              </ActionButton>
-            </div>
+            {footer !== undefined ? (
+              footer
+            ) : (
+              <div className={`${confirmPrefixCls}-btns`}>
+                {cancelButton}
+                <ActionButton
+                  type={okType}
+                  actionFn={onOk}
+                  close={close}
+                  autoFocus={autoFocusButton === 'ok'}
+                  buttonProps={okButtonProps}
+                  prefixCls={`${rootPrefixCls}-btn`}
+                >
+                  {okText || (mergedOkCancel ? mergedLocale?.okText : mergedLocale?.justOkText)}
+                </ActionButton>
+              </div>
+            )}
           </div>
         );
       }}
diff --git a/components/modal/Modal.tsx b/components/modal/Modal.tsx
index e0962de51c0f..98898e8f7228 100644
--- a/components/modal/Modal.tsx
+++ b/components/modal/Modal.tsx
@@ -131,6 +131,7 @@ export interface ModalFuncProps {
   direction?: DirectionType;
   bodyStyle?: React.CSSProperties;
   closeIcon?: React.ReactNode;
+  footer?: React.ReactNode;
   modalRender?: (node: React.ReactNode) => React.ReactNode;
   focusTriggerAfterClose?: boolean;
 }
diff --git a/components/modal/__tests__/confirm.test.tsx b/components/modal/__tests__/confirm.test.tsx
index 67a688e2b1db..a33852be0c34 100644
--- a/components/modal/__tests__/confirm.test.tsx
+++ b/components/modal/__tests__/confirm.test.tsx
@@ -703,4 +703,28 @@ describe('Modal.confirm triggers callbacks correctly', () => {
     jest.useRealTimers();
     errSpy.mockRestore();
   });
+
+  it('null of Footer', async () => {
+    Modal.confirm({
+      footer: null,
+    });
+
+    await waitFakeTimer();
+
+    expect($$('.ant-modal-confirm-btns')).toHaveLength(0);
+  });
+
+  it('Update Footer', async () => {
+    Modal.confirm({
+      footer: (
+        <div>
+          <button className="custom-modal-footer" type="button">
+            Custom Modal Footer
+          </button>
+        </div>
+      ),
+    });
+    await waitFakeTimer();
+    expect($$('.custom-modal-footer')).toHaveLength(1);
+  });
 });
diff --git a/components/modal/index.en-US.md b/components/modal/index.en-US.md
index 5c9f5379302f..78482fbad2d5 100644
--- a/components/modal/index.en-US.md
+++ b/components/modal/index.en-US.md
@@ -98,6 +98,7 @@ The items listed above are all functions, expecting a settings object as paramet
 | closable | Whether a close (x) button is visible on top right of the confirm dialog or not | boolean | false | 4.9.0 |
 | closeIcon | Custom close icon | ReactNode | undefined | 4.9.0 |
 | content | Content | ReactNode | - |  |
+| footer | Footer content, set as `footer: null` when you don't need default buttons	| ReactNode | - | 5.1.0 |
 | getContainer | Return the mount node for Modal | HTMLElement \| () => HTMLElement \| Selectors \| false | document.body |  |
 | icon | Custom icon | ReactNode | &lt;QuestionCircle /> |  |
 | keyboard | Whether support press esc to close | boolean | true |  |
diff --git a/components/modal/index.zh-CN.md b/components/modal/index.zh-CN.md
index 36cb3a5e84ec..da5f803a5340 100644
--- a/components/modal/index.zh-CN.md
+++ b/components/modal/index.zh-CN.md
@@ -101,6 +101,7 @@ demo:
 | closable | 是否显示右上角的关闭按钮 | boolean | false | 4.9.0 |
 | closeIcon | 自定义关闭图标 | ReactNode | undefined | 4.9.0 |
 | content | 内容 | ReactNode | - |  |
+| footer | 底部内容，当不需要默认底部按钮时，可以设为 `footer: null` | ReactNode | - | 5.1.0  |
 | getContainer | 指定 Modal 挂载的 HTML 节点, false 为挂载在当前 dom | HTMLElement \| () => HTMLElement \| Selectors \| false | document.body |  |
 | icon | 自定义图标 | ReactNode | &lt;QuestionCircle /> |  |
 | keyboard | 是否支持键盘 esc 关闭 | boolean | true |  |

From 816cf1052482389739cfb518a480ce0d6f19291f Mon Sep 17 00:00:00 2001
From: lijianan <574980606@qq.com>
Date: Wed, 7 Dec 2022 23:32:04 +0800
Subject: [PATCH 41/41] fix: update demo (#39366)

* fix: update demo

* Update components/qrcode/index.tsx

Co-authored-by: MadCcc <1075746765@qq.com>

* Update index.test.tsx

Co-authored-by: MadCcc <1075746765@qq.com>
---
 components/qrcode/__tests__/index.test.tsx | 9 +++++++++
 components/qrcode/demo/customSize.tsx      | 1 +
 components/qrcode/demo/icon.tsx            | 1 +
 components/qrcode/index.tsx                | 8 ++++++++
 components/qrcode/interface.ts             | 1 -
 5 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/components/qrcode/__tests__/index.test.tsx b/components/qrcode/__tests__/index.test.tsx
index 6de938dab5a5..8cd91d3ce0d0 100644
--- a/components/qrcode/__tests__/index.test.tsx
+++ b/components/qrcode/__tests__/index.test.tsx
@@ -79,4 +79,13 @@ describe('QRCode test', () => {
       'ant-qrcode-borderless',
     );
   });
+
+  it('should console Error when icon exist && errorLevel is `L`', () => {
+    const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    render(<QRCode value="test" icon="test" errorLevel="L" />);
+    expect(errSpy).toHaveBeenCalledWith(
+      'Warning: [antd: QRCode] ErrorLevel `L` is not recommended to be used with `icon`, for scanning result would be affected by low level.',
+    );
+    errSpy.mockRestore();
+  });
 });
diff --git a/components/qrcode/demo/customSize.tsx b/components/qrcode/demo/customSize.tsx
index 35b06fff456f..d1ee8f6fa9fe 100644
--- a/components/qrcode/demo/customSize.tsx
+++ b/components/qrcode/demo/customSize.tsx
@@ -36,6 +36,7 @@ const App: React.FC = () => {
         </Button>
       </Button.Group>
       <QRCode
+        errorLevel="H"
         size={size}
         iconSize={size / 4}
         value="https://ant.design/"
diff --git a/components/qrcode/demo/icon.tsx b/components/qrcode/demo/icon.tsx
index 77a62185921e..5b251c49f69d 100644
--- a/components/qrcode/demo/icon.tsx
+++ b/components/qrcode/demo/icon.tsx
@@ -3,6 +3,7 @@ import { QRCode } from 'antd';
 
 const App: React.FC = () => (
   <QRCode
+    errorLevel="H"
     value="https://ant.design/"
     icon="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
   />
diff --git a/components/qrcode/index.tsx b/components/qrcode/index.tsx
index eec3f9e27f10..b47d7da9288f 100644
--- a/components/qrcode/index.tsx
+++ b/components/qrcode/index.tsx
@@ -59,6 +59,14 @@ const QRCode: React.FC<QRCodeProps> = (props) => {
     return null;
   }
 
+  if (process.env.NODE_ENV !== 'production') {
+    warning(
+      !(icon && errorLevel === 'L'),
+      'QRCode',
+      'ErrorLevel `L` is not recommended to be used with `icon`, for scanning result would be affected by low level.',
+    );
+  }
+
   const cls = classNames(prefixCls, className, hashId, {
     [`${prefixCls}-borderless`]: !bordered,
   });
diff --git a/components/qrcode/interface.ts b/components/qrcode/interface.ts
index 3371e0203521..bebeeacd78aa 100644
--- a/components/qrcode/interface.ts
+++ b/components/qrcode/interface.ts
@@ -12,7 +12,6 @@ interface ImageSettings {
 interface QRProps {
   value: string;
   size?: number;
-  level?: string;
   color?: string;
   style?: CSSProperties;
   includeMargin?: boolean;