From 9a91b2b94a926da860b293abb970e5f9f2fd9aab Mon Sep 17 00:00:00 2001
From: southorange1228 <15280970040@163.com>
Date: Thu, 23 Jun 2022 11:43:10 +0800
Subject: [PATCH 1/2] =?UTF-8?q?style(alert):=20=E7=BB=9F=E4=B8=80=E4=BD=BF?=
 =?UTF-8?q?=E7=94=A8Space=E7=BB=84=E4=BB=B6=E5=AE=9E=E7=8E=B0example?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/alert/_example/base.jsx      |  6 +++---
 src/alert/_example/close.jsx     |  6 +++---
 src/alert/_example/icon.jsx      |  6 +++---
 src/alert/_example/operation.jsx |  6 +++---
 src/alert/_example/swiper.jsx    |  6 +++---
 src/alert/_example/title.jsx     | 12 +++++++-----
 6 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/src/alert/_example/base.jsx b/src/alert/_example/base.jsx
index f3f97e4f3..42b36697c 100644
--- a/src/alert/_example/base.jsx
+++ b/src/alert/_example/base.jsx
@@ -1,13 +1,13 @@
 import React from 'react';
-import { Alert } from 'tdesign-react';
+import { Alert, Space } from 'tdesign-react';
 
 export default function AlertBase() {
   return (
-    <div className="tdesign-demo-block-column">
+    <Space direction="vertical">
       <Alert theme="success" message="这是一条成功的消息提示" />
       <Alert theme="info" message="这是一条普通的消息提示" />
       <Alert theme="warning" message="这是一条警示消息" />
       <Alert theme="error" message="高危操作/出错信息提示" />
-    </div>
+    </Space>
   );
 }
diff --git a/src/alert/_example/close.jsx b/src/alert/_example/close.jsx
index 9f326ff6e..b75704329 100644
--- a/src/alert/_example/close.jsx
+++ b/src/alert/_example/close.jsx
@@ -1,13 +1,13 @@
 import React from 'react';
-import { Alert } from 'tdesign-react';
+import { Alert, Space } from 'tdesign-react';
 
 export default function AlertClose() {
   return (
-    <div className="tdesign-demo-block-column">
+    <Space direction="vertical">
       <Alert theme="success" message="这是一条成功的消息提示" close />
       <Alert theme="info" message="这是一条普通的消息提示" close="关闭" />
       <Alert theme="warning" message="这是一条警示消息" close="知道了" />
       <Alert theme="error" message="高危操作/出错信息提示" close={<span>自定义关闭</span>} />
-    </div>
+    </Space>
   );
 }
diff --git a/src/alert/_example/icon.jsx b/src/alert/_example/icon.jsx
index 6f7846e31..d7e8d3440 100644
--- a/src/alert/_example/icon.jsx
+++ b/src/alert/_example/icon.jsx
@@ -1,13 +1,13 @@
 import React from 'react';
-import { Alert } from 'tdesign-react';
+import { Alert, Space } from 'tdesign-react';
 
 export default function AlertIcon() {
   return (
-    <div className="tdesign-demo-block-column">
+    <Space direction="vertical">
       <Alert theme="success" message="这是一条成功的消息提示" />
       <Alert theme="info" message="这是一条普通的消息提示" />
       <Alert theme="warning" message="这是一条警示消息" />
       <Alert theme="error" message="高危操作/出错信息提示" />
-    </div>
+    </Space>
   );
 }
diff --git a/src/alert/_example/operation.jsx b/src/alert/_example/operation.jsx
index edf4ed186..01743f8b9 100644
--- a/src/alert/_example/operation.jsx
+++ b/src/alert/_example/operation.jsx
@@ -1,14 +1,14 @@
 import React from 'react';
-import { Alert } from 'tdesign-react';
+import { Alert, Space } from 'tdesign-react';
 
 export default function AlertOperation() {
   const operation = <span>相关操作</span>;
   return (
-    <div className="tdesign-demo-block-column">
+    <Space direction="vertical">
       <Alert theme="success" message="这是一条成功的消息提示" operation={operation} close />
       <Alert theme="info" message="这是一条普通的消息提示" operation={operation} close />
       <Alert theme="warning" message="这是一条警示消息" operation={operation} close />
       <Alert theme="error" message="高危操作/出错信息提示" operation={operation} close />
-    </div>
+    </Space>
   );
 }
diff --git a/src/alert/_example/swiper.jsx b/src/alert/_example/swiper.jsx
index f3f97e4f3..42b36697c 100644
--- a/src/alert/_example/swiper.jsx
+++ b/src/alert/_example/swiper.jsx
@@ -1,13 +1,13 @@
 import React from 'react';
-import { Alert } from 'tdesign-react';
+import { Alert, Space } from 'tdesign-react';
 
 export default function AlertBase() {
   return (
-    <div className="tdesign-demo-block-column">
+    <Space direction="vertical">
       <Alert theme="success" message="这是一条成功的消息提示" />
       <Alert theme="info" message="这是一条普通的消息提示" />
       <Alert theme="warning" message="这是一条警示消息" />
       <Alert theme="error" message="高危操作/出错信息提示" />
-    </div>
+    </Space>
   );
 }
diff --git a/src/alert/_example/title.jsx b/src/alert/_example/title.jsx
index f94bd7be7..21ebe0813 100644
--- a/src/alert/_example/title.jsx
+++ b/src/alert/_example/title.jsx
@@ -3,9 +3,11 @@ import { Alert } from 'tdesign-react';
 
 export default function AlertDescription() {
   const operation = <span>相关操作</span>;
-  return (<Alert
-    message="这是一条普通的消息提示描述，这是一条普通的消息提示描述"
-    title="这是一条普通的消息提示"
-    operation={operation}
-  />);
+  return (
+    <Alert
+      message="这是一条普通的消息提示描述，这是一条普通的消息提示描述"
+      title="这是一条普通的消息提示"
+      operation={operation}
+    />
+  );
 }

From 25ac904fbfd69b260b938c5947f7242ea40ee174 Mon Sep 17 00:00:00 2001
From: southorange1228 <15280970040@163.com>
Date: Thu, 23 Jun 2022 12:57:32 +0800
Subject: [PATCH 2/2] test(alert): update example unit test snapshot

---
 .../__snapshots__/alert.test.tsx.snap         | 1185 +++++++++--------
 test/ssr/__snapshots__/ssr.test.js.snap       |   10 +-
 2 files changed, 640 insertions(+), 555 deletions(-)

diff --git a/src/alert/__tests__/__snapshots__/alert.test.tsx.snap b/src/alert/__tests__/__snapshots__/alert.test.tsx.snap
index 68ad67ab9..71e27587d 100644
--- a/src/alert/__tests__/__snapshots__/alert.test.tsx.snap
+++ b/src/alert/__tests__/__snapshots__/alert.test.tsx.snap
@@ -229,140 +229,157 @@ exports[`Alert 组件测试 Alert 主题图标显示 6`] = `
 exports[`base.jsx 1`] = `
 <DocumentFragment>
   <div
-    class="tdesign-demo-block-column"
+    class="t-space t-space-vertical"
+    style="gap: 16px;"
   >
     <div
-      class="t-alert t-alert--success"
+      class="t-space-item"
     >
       <div
-        class="t-alert__icon"
+        class="t-alert t-alert--success"
       >
-        <svg
-          class="t-icon t-icon-check-circle-filled"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
+        <div
+          class="t-alert__icon"
         >
-          <path
-            d="M8 15A7 7 0 108 1a7 7 0 000 14zM4.5 8.2l.7-.7L7 9.3l3.8-3.8.7.7L7 10.7 4.5 8.2z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
-      </div>
-      <div
-        class="t-alert__content"
-      >
+          <svg
+            class="t-icon t-icon-check-circle-filled"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M8 15A7 7 0 108 1a7 7 0 000 14zM4.5 8.2l.7-.7L7 9.3l3.8-3.8.7.7L7 10.7 4.5 8.2z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
         <div
-          class="t-alert__message"
+          class="t-alert__content"
         >
           <div
-            class="t-alert__description"
+            class="t-alert__message"
           >
-            这是一条成功的消息提示
+            <div
+              class="t-alert__description"
+            >
+              这是一条成功的消息提示
+            </div>
           </div>
         </div>
       </div>
     </div>
     <div
-      class="t-alert t-alert--info"
+      class="t-space-item"
     >
       <div
-        class="t-alert__icon"
+        class="t-alert t-alert--info"
       >
-        <svg
-          class="t-icon t-icon-info-circle-filled"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
+        <div
+          class="t-alert__icon"
         >
-          <path
-            d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
-      </div>
-      <div
-        class="t-alert__content"
-      >
+          <svg
+            class="t-icon t-icon-info-circle-filled"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
         <div
-          class="t-alert__message"
+          class="t-alert__content"
         >
           <div
-            class="t-alert__description"
+            class="t-alert__message"
           >
-            这是一条普通的消息提示
+            <div
+              class="t-alert__description"
+            >
+              这是一条普通的消息提示
+            </div>
           </div>
         </div>
       </div>
     </div>
     <div
-      class="t-alert t-alert--warning"
+      class="t-space-item"
     >
       <div
-        class="t-alert__icon"
+        class="t-alert t-alert--warning"
       >
-        <svg
-          class="t-icon t-icon-error-circle-filled"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
+        <div
+          class="t-alert__icon"
         >
-          <path
-            d="M15 8A7 7 0 101 8a7 7 0 0014 0zM8.5 4v5.5h-1V4h1zm-1.1 7h1.2v1.2H7.4V11z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
-      </div>
-      <div
-        class="t-alert__content"
-      >
+          <svg
+            class="t-icon t-icon-error-circle-filled"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M15 8A7 7 0 101 8a7 7 0 0014 0zM8.5 4v5.5h-1V4h1zm-1.1 7h1.2v1.2H7.4V11z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
         <div
-          class="t-alert__message"
+          class="t-alert__content"
         >
           <div
-            class="t-alert__description"
+            class="t-alert__message"
           >
-            这是一条警示消息
+            <div
+              class="t-alert__description"
+            >
+              这是一条警示消息
+            </div>
           </div>
         </div>
       </div>
     </div>
     <div
-      class="t-alert t-alert--error"
+      class="t-space-item"
     >
       <div
-        class="t-alert__icon"
+        class="t-alert t-alert--error"
       >
-        <svg
-          class="t-icon t-icon-error-circle-filled"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
+        <div
+          class="t-alert__icon"
         >
-          <path
-            d="M15 8A7 7 0 101 8a7 7 0 0014 0zM8.5 4v5.5h-1V4h1zm-1.1 7h1.2v1.2H7.4V11z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
-      </div>
-      <div
-        class="t-alert__content"
-      >
+          <svg
+            class="t-icon t-icon-error-circle-filled"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M15 8A7 7 0 101 8a7 7 0 0014 0zM8.5 4v5.5h-1V4h1zm-1.1 7h1.2v1.2H7.4V11z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
         <div
-          class="t-alert__message"
+          class="t-alert__content"
         >
           <div
-            class="t-alert__description"
+            class="t-alert__message"
           >
-            高危操作/出错信息提示
+            <div
+              class="t-alert__description"
+            >
+              高危操作/出错信息提示
+            </div>
           </div>
         </div>
       </div>
@@ -374,176 +391,193 @@ exports[`base.jsx 1`] = `
 exports[`close.jsx 1`] = `
 <DocumentFragment>
   <div
-    class="tdesign-demo-block-column"
+    class="t-space t-space-vertical"
+    style="gap: 16px;"
   >
     <div
-      class="t-alert t-alert--success"
+      class="t-space-item"
     >
       <div
-        class="t-alert__icon"
+        class="t-alert t-alert--success"
       >
-        <svg
-          class="t-icon t-icon-check-circle-filled"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
+        <div
+          class="t-alert__icon"
         >
-          <path
-            d="M8 15A7 7 0 108 1a7 7 0 000 14zM4.5 8.2l.7-.7L7 9.3l3.8-3.8.7.7L7 10.7 4.5 8.2z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
-      </div>
-      <div
-        class="t-alert__content"
-      >
+          <svg
+            class="t-icon t-icon-check-circle-filled"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M8 15A7 7 0 108 1a7 7 0 000 14zM4.5 8.2l.7-.7L7 9.3l3.8-3.8.7.7L7 10.7 4.5 8.2z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
         <div
-          class="t-alert__message"
+          class="t-alert__content"
         >
           <div
-            class="t-alert__description"
+            class="t-alert__message"
           >
-            这是一条成功的消息提示
+            <div
+              class="t-alert__description"
+            >
+              这是一条成功的消息提示
+            </div>
           </div>
         </div>
-      </div>
-      <div
-        class="t-alert__close"
-      >
-        <svg
-          class="t-icon t-icon-close"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
+        <div
+          class="t-alert__close"
         >
-          <path
-            d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
+          <svg
+            class="t-icon t-icon-close"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
       </div>
     </div>
     <div
-      class="t-alert t-alert--info"
+      class="t-space-item"
     >
       <div
-        class="t-alert__icon"
+        class="t-alert t-alert--info"
       >
-        <svg
-          class="t-icon t-icon-info-circle-filled"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
+        <div
+          class="t-alert__icon"
         >
-          <path
-            d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
-      </div>
-      <div
-        class="t-alert__content"
-      >
+          <svg
+            class="t-icon t-icon-info-circle-filled"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
         <div
-          class="t-alert__message"
+          class="t-alert__content"
         >
           <div
-            class="t-alert__description"
+            class="t-alert__message"
           >
-            这是一条普通的消息提示
+            <div
+              class="t-alert__description"
+            >
+              这是一条普通的消息提示
+            </div>
           </div>
         </div>
-      </div>
-      <div
-        class="t-alert__close"
-      >
-        关闭
+        <div
+          class="t-alert__close"
+        >
+          关闭
+        </div>
       </div>
     </div>
     <div
-      class="t-alert t-alert--warning"
+      class="t-space-item"
     >
       <div
-        class="t-alert__icon"
+        class="t-alert t-alert--warning"
       >
-        <svg
-          class="t-icon t-icon-error-circle-filled"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
+        <div
+          class="t-alert__icon"
         >
-          <path
-            d="M15 8A7 7 0 101 8a7 7 0 0014 0zM8.5 4v5.5h-1V4h1zm-1.1 7h1.2v1.2H7.4V11z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
-      </div>
-      <div
-        class="t-alert__content"
-      >
+          <svg
+            class="t-icon t-icon-error-circle-filled"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M15 8A7 7 0 101 8a7 7 0 0014 0zM8.5 4v5.5h-1V4h1zm-1.1 7h1.2v1.2H7.4V11z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
         <div
-          class="t-alert__message"
+          class="t-alert__content"
         >
           <div
-            class="t-alert__description"
+            class="t-alert__message"
           >
-            这是一条警示消息
+            <div
+              class="t-alert__description"
+            >
+              这是一条警示消息
+            </div>
           </div>
         </div>
-      </div>
-      <div
-        class="t-alert__close"
-      >
-        知道了
+        <div
+          class="t-alert__close"
+        >
+          知道了
+        </div>
       </div>
     </div>
     <div
-      class="t-alert t-alert--error"
+      class="t-space-item"
     >
       <div
-        class="t-alert__icon"
+        class="t-alert t-alert--error"
       >
-        <svg
-          class="t-icon t-icon-error-circle-filled"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
+        <div
+          class="t-alert__icon"
         >
-          <path
-            d="M15 8A7 7 0 101 8a7 7 0 0014 0zM8.5 4v5.5h-1V4h1zm-1.1 7h1.2v1.2H7.4V11z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
-      </div>
-      <div
-        class="t-alert__content"
-      >
+          <svg
+            class="t-icon t-icon-error-circle-filled"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M15 8A7 7 0 101 8a7 7 0 0014 0zM8.5 4v5.5h-1V4h1zm-1.1 7h1.2v1.2H7.4V11z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
         <div
-          class="t-alert__message"
+          class="t-alert__content"
         >
           <div
-            class="t-alert__description"
+            class="t-alert__message"
           >
-            高危操作/出错信息提示
+            <div
+              class="t-alert__description"
+            >
+              高危操作/出错信息提示
+            </div>
           </div>
         </div>
-      </div>
-      <div
-        class="t-alert__close"
-      >
-        <span>
-          自定义关闭
-        </span>
+        <div
+          class="t-alert__close"
+        >
+          <span>
+            自定义关闭
+          </span>
+        </div>
       </div>
     </div>
   </div>
@@ -602,140 +636,157 @@ exports[`collapse.jsx 1`] = `
 exports[`icon.jsx 1`] = `
 <DocumentFragment>
   <div
-    class="tdesign-demo-block-column"
+    class="t-space t-space-vertical"
+    style="gap: 16px;"
   >
     <div
-      class="t-alert t-alert--success"
+      class="t-space-item"
     >
       <div
-        class="t-alert__icon"
+        class="t-alert t-alert--success"
       >
-        <svg
-          class="t-icon t-icon-check-circle-filled"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
+        <div
+          class="t-alert__icon"
         >
-          <path
-            d="M8 15A7 7 0 108 1a7 7 0 000 14zM4.5 8.2l.7-.7L7 9.3l3.8-3.8.7.7L7 10.7 4.5 8.2z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
-      </div>
-      <div
-        class="t-alert__content"
-      >
+          <svg
+            class="t-icon t-icon-check-circle-filled"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M8 15A7 7 0 108 1a7 7 0 000 14zM4.5 8.2l.7-.7L7 9.3l3.8-3.8.7.7L7 10.7 4.5 8.2z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
         <div
-          class="t-alert__message"
+          class="t-alert__content"
         >
           <div
-            class="t-alert__description"
+            class="t-alert__message"
           >
-            这是一条成功的消息提示
+            <div
+              class="t-alert__description"
+            >
+              这是一条成功的消息提示
+            </div>
           </div>
         </div>
       </div>
     </div>
     <div
-      class="t-alert t-alert--info"
+      class="t-space-item"
     >
       <div
-        class="t-alert__icon"
+        class="t-alert t-alert--info"
       >
-        <svg
-          class="t-icon t-icon-info-circle-filled"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
+        <div
+          class="t-alert__icon"
         >
-          <path
-            d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
-      </div>
-      <div
-        class="t-alert__content"
-      >
+          <svg
+            class="t-icon t-icon-info-circle-filled"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
         <div
-          class="t-alert__message"
+          class="t-alert__content"
         >
           <div
-            class="t-alert__description"
+            class="t-alert__message"
           >
-            这是一条普通的消息提示
+            <div
+              class="t-alert__description"
+            >
+              这是一条普通的消息提示
+            </div>
           </div>
         </div>
       </div>
     </div>
     <div
-      class="t-alert t-alert--warning"
+      class="t-space-item"
     >
       <div
-        class="t-alert__icon"
+        class="t-alert t-alert--warning"
       >
-        <svg
-          class="t-icon t-icon-error-circle-filled"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
+        <div
+          class="t-alert__icon"
         >
-          <path
-            d="M15 8A7 7 0 101 8a7 7 0 0014 0zM8.5 4v5.5h-1V4h1zm-1.1 7h1.2v1.2H7.4V11z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
-      </div>
-      <div
-        class="t-alert__content"
-      >
+          <svg
+            class="t-icon t-icon-error-circle-filled"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M15 8A7 7 0 101 8a7 7 0 0014 0zM8.5 4v5.5h-1V4h1zm-1.1 7h1.2v1.2H7.4V11z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
         <div
-          class="t-alert__message"
+          class="t-alert__content"
         >
           <div
-            class="t-alert__description"
+            class="t-alert__message"
           >
-            这是一条警示消息
+            <div
+              class="t-alert__description"
+            >
+              这是一条警示消息
+            </div>
           </div>
         </div>
       </div>
     </div>
     <div
-      class="t-alert t-alert--error"
+      class="t-space-item"
     >
       <div
-        class="t-alert__icon"
+        class="t-alert t-alert--error"
       >
-        <svg
-          class="t-icon t-icon-error-circle-filled"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
+        <div
+          class="t-alert__icon"
         >
-          <path
-            d="M15 8A7 7 0 101 8a7 7 0 0014 0zM8.5 4v5.5h-1V4h1zm-1.1 7h1.2v1.2H7.4V11z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
-      </div>
-      <div
-        class="t-alert__content"
-      >
+          <svg
+            class="t-icon t-icon-error-circle-filled"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M15 8A7 7 0 101 8a7 7 0 0014 0zM8.5 4v5.5h-1V4h1zm-1.1 7h1.2v1.2H7.4V11z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
         <div
-          class="t-alert__message"
+          class="t-alert__content"
         >
           <div
-            class="t-alert__description"
+            class="t-alert__message"
           >
-            高危操作/出错信息提示
+            <div
+              class="t-alert__description"
+            >
+              高危操作/出错信息提示
+            </div>
           </div>
         </div>
       </div>
@@ -747,238 +798,255 @@ exports[`icon.jsx 1`] = `
 exports[`operation.jsx 1`] = `
 <DocumentFragment>
   <div
-    class="tdesign-demo-block-column"
+    class="t-space t-space-vertical"
+    style="gap: 16px;"
   >
     <div
-      class="t-alert t-alert--success"
+      class="t-space-item"
     >
       <div
-        class="t-alert__icon"
-      >
-        <svg
-          class="t-icon t-icon-check-circle-filled"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
-        >
-          <path
-            d="M8 15A7 7 0 108 1a7 7 0 000 14zM4.5 8.2l.7-.7L7 9.3l3.8-3.8.7.7L7 10.7 4.5 8.2z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
-      </div>
-      <div
-        class="t-alert__content"
+        class="t-alert t-alert--success"
       >
         <div
-          class="t-alert__message"
+          class="t-alert__icon"
         >
-          <div
-            class="t-alert__description"
+          <svg
+            class="t-icon t-icon-check-circle-filled"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
           >
-            这是一条成功的消息提示
-          </div>
+            <path
+              d="M8 15A7 7 0 108 1a7 7 0 000 14zM4.5 8.2l.7-.7L7 9.3l3.8-3.8.7.7L7 10.7 4.5 8.2z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
+        <div
+          class="t-alert__content"
+        >
           <div
-            class="t-alert__operation"
+            class="t-alert__message"
           >
-            <span>
-              相关操作
-            </span>
+            <div
+              class="t-alert__description"
+            >
+              这是一条成功的消息提示
+            </div>
+            <div
+              class="t-alert__operation"
+            >
+              <span>
+                相关操作
+              </span>
+            </div>
           </div>
         </div>
-      </div>
-      <div
-        class="t-alert__close"
-      >
-        <svg
-          class="t-icon t-icon-close"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
+        <div
+          class="t-alert__close"
         >
-          <path
-            d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
+          <svg
+            class="t-icon t-icon-close"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
       </div>
     </div>
     <div
-      class="t-alert t-alert--info"
+      class="t-space-item"
     >
       <div
-        class="t-alert__icon"
-      >
-        <svg
-          class="t-icon t-icon-info-circle-filled"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
-        >
-          <path
-            d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
-      </div>
-      <div
-        class="t-alert__content"
+        class="t-alert t-alert--info"
       >
         <div
-          class="t-alert__message"
+          class="t-alert__icon"
         >
-          <div
-            class="t-alert__description"
+          <svg
+            class="t-icon t-icon-info-circle-filled"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
           >
-            这是一条普通的消息提示
-          </div>
+            <path
+              d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
+        <div
+          class="t-alert__content"
+        >
           <div
-            class="t-alert__operation"
+            class="t-alert__message"
           >
-            <span>
-              相关操作
-            </span>
+            <div
+              class="t-alert__description"
+            >
+              这是一条普通的消息提示
+            </div>
+            <div
+              class="t-alert__operation"
+            >
+              <span>
+                相关操作
+              </span>
+            </div>
           </div>
         </div>
-      </div>
-      <div
-        class="t-alert__close"
-      >
-        <svg
-          class="t-icon t-icon-close"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
+        <div
+          class="t-alert__close"
         >
-          <path
-            d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
+          <svg
+            class="t-icon t-icon-close"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
       </div>
     </div>
     <div
-      class="t-alert t-alert--warning"
+      class="t-space-item"
     >
       <div
-        class="t-alert__icon"
-      >
-        <svg
-          class="t-icon t-icon-error-circle-filled"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
-        >
-          <path
-            d="M15 8A7 7 0 101 8a7 7 0 0014 0zM8.5 4v5.5h-1V4h1zm-1.1 7h1.2v1.2H7.4V11z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
-      </div>
-      <div
-        class="t-alert__content"
+        class="t-alert t-alert--warning"
       >
         <div
-          class="t-alert__message"
+          class="t-alert__icon"
         >
-          <div
-            class="t-alert__description"
+          <svg
+            class="t-icon t-icon-error-circle-filled"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
           >
-            这是一条警示消息
-          </div>
+            <path
+              d="M15 8A7 7 0 101 8a7 7 0 0014 0zM8.5 4v5.5h-1V4h1zm-1.1 7h1.2v1.2H7.4V11z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
+        <div
+          class="t-alert__content"
+        >
           <div
-            class="t-alert__operation"
+            class="t-alert__message"
           >
-            <span>
-              相关操作
-            </span>
+            <div
+              class="t-alert__description"
+            >
+              这是一条警示消息
+            </div>
+            <div
+              class="t-alert__operation"
+            >
+              <span>
+                相关操作
+              </span>
+            </div>
           </div>
         </div>
-      </div>
-      <div
-        class="t-alert__close"
-      >
-        <svg
-          class="t-icon t-icon-close"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
+        <div
+          class="t-alert__close"
         >
-          <path
-            d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
+          <svg
+            class="t-icon t-icon-close"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
       </div>
     </div>
     <div
-      class="t-alert t-alert--error"
+      class="t-space-item"
     >
       <div
-        class="t-alert__icon"
-      >
-        <svg
-          class="t-icon t-icon-error-circle-filled"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
-        >
-          <path
-            d="M15 8A7 7 0 101 8a7 7 0 0014 0zM8.5 4v5.5h-1V4h1zm-1.1 7h1.2v1.2H7.4V11z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
-      </div>
-      <div
-        class="t-alert__content"
+        class="t-alert t-alert--error"
       >
         <div
-          class="t-alert__message"
+          class="t-alert__icon"
         >
-          <div
-            class="t-alert__description"
+          <svg
+            class="t-icon t-icon-error-circle-filled"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
           >
-            高危操作/出错信息提示
-          </div>
+            <path
+              d="M15 8A7 7 0 101 8a7 7 0 0014 0zM8.5 4v5.5h-1V4h1zm-1.1 7h1.2v1.2H7.4V11z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
+        <div
+          class="t-alert__content"
+        >
           <div
-            class="t-alert__operation"
+            class="t-alert__message"
           >
-            <span>
-              相关操作
-            </span>
+            <div
+              class="t-alert__description"
+            >
+              高危操作/出错信息提示
+            </div>
+            <div
+              class="t-alert__operation"
+            >
+              <span>
+                相关操作
+              </span>
+            </div>
           </div>
         </div>
-      </div>
-      <div
-        class="t-alert__close"
-      >
-        <svg
-          class="t-icon t-icon-close"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
+        <div
+          class="t-alert__close"
         >
-          <path
-            d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
+          <svg
+            class="t-icon t-icon-close"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
       </div>
     </div>
   </div>
@@ -988,140 +1056,157 @@ exports[`operation.jsx 1`] = `
 exports[`swiper.jsx 1`] = `
 <DocumentFragment>
   <div
-    class="tdesign-demo-block-column"
+    class="t-space t-space-vertical"
+    style="gap: 16px;"
   >
     <div
-      class="t-alert t-alert--success"
+      class="t-space-item"
     >
       <div
-        class="t-alert__icon"
+        class="t-alert t-alert--success"
       >
-        <svg
-          class="t-icon t-icon-check-circle-filled"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
+        <div
+          class="t-alert__icon"
         >
-          <path
-            d="M8 15A7 7 0 108 1a7 7 0 000 14zM4.5 8.2l.7-.7L7 9.3l3.8-3.8.7.7L7 10.7 4.5 8.2z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
-      </div>
-      <div
-        class="t-alert__content"
-      >
+          <svg
+            class="t-icon t-icon-check-circle-filled"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M8 15A7 7 0 108 1a7 7 0 000 14zM4.5 8.2l.7-.7L7 9.3l3.8-3.8.7.7L7 10.7 4.5 8.2z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
         <div
-          class="t-alert__message"
+          class="t-alert__content"
         >
           <div
-            class="t-alert__description"
+            class="t-alert__message"
           >
-            这是一条成功的消息提示
+            <div
+              class="t-alert__description"
+            >
+              这是一条成功的消息提示
+            </div>
           </div>
         </div>
       </div>
     </div>
     <div
-      class="t-alert t-alert--info"
+      class="t-space-item"
     >
       <div
-        class="t-alert__icon"
+        class="t-alert t-alert--info"
       >
-        <svg
-          class="t-icon t-icon-info-circle-filled"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
+        <div
+          class="t-alert__icon"
         >
-          <path
-            d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
-      </div>
-      <div
-        class="t-alert__content"
-      >
+          <svg
+            class="t-icon t-icon-info-circle-filled"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
         <div
-          class="t-alert__message"
+          class="t-alert__content"
         >
           <div
-            class="t-alert__description"
+            class="t-alert__message"
           >
-            这是一条普通的消息提示
+            <div
+              class="t-alert__description"
+            >
+              这是一条普通的消息提示
+            </div>
           </div>
         </div>
       </div>
     </div>
     <div
-      class="t-alert t-alert--warning"
+      class="t-space-item"
     >
       <div
-        class="t-alert__icon"
+        class="t-alert t-alert--warning"
       >
-        <svg
-          class="t-icon t-icon-error-circle-filled"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
+        <div
+          class="t-alert__icon"
         >
-          <path
-            d="M15 8A7 7 0 101 8a7 7 0 0014 0zM8.5 4v5.5h-1V4h1zm-1.1 7h1.2v1.2H7.4V11z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
-      </div>
-      <div
-        class="t-alert__content"
-      >
+          <svg
+            class="t-icon t-icon-error-circle-filled"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M15 8A7 7 0 101 8a7 7 0 0014 0zM8.5 4v5.5h-1V4h1zm-1.1 7h1.2v1.2H7.4V11z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
         <div
-          class="t-alert__message"
+          class="t-alert__content"
         >
           <div
-            class="t-alert__description"
+            class="t-alert__message"
           >
-            这是一条警示消息
+            <div
+              class="t-alert__description"
+            >
+              这是一条警示消息
+            </div>
           </div>
         </div>
       </div>
     </div>
     <div
-      class="t-alert t-alert--error"
+      class="t-space-item"
     >
       <div
-        class="t-alert__icon"
+        class="t-alert t-alert--error"
       >
-        <svg
-          class="t-icon t-icon-error-circle-filled"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
+        <div
+          class="t-alert__icon"
         >
-          <path
-            d="M15 8A7 7 0 101 8a7 7 0 0014 0zM8.5 4v5.5h-1V4h1zm-1.1 7h1.2v1.2H7.4V11z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
-      </div>
-      <div
-        class="t-alert__content"
-      >
+          <svg
+            class="t-icon t-icon-error-circle-filled"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M15 8A7 7 0 101 8a7 7 0 0014 0zM8.5 4v5.5h-1V4h1zm-1.1 7h1.2v1.2H7.4V11z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
         <div
-          class="t-alert__message"
+          class="t-alert__content"
         >
           <div
-            class="t-alert__description"
+            class="t-alert__message"
           >
-            高危操作/出错信息提示
+            <div
+              class="t-alert__description"
+            >
+              高危操作/出错信息提示
+            </div>
           </div>
         </div>
       </div>
diff --git a/test/ssr/__snapshots__/ssr.test.js.snap b/test/ssr/__snapshots__/ssr.test.js.snap
index f03dfd376..dd7444237 100644
--- a/test/ssr/__snapshots__/ssr.test.js.snap
+++ b/test/ssr/__snapshots__/ssr.test.js.snap
@@ -4,17 +4,17 @@ exports[`ssr snapshot test renders ./src/affix/_example/base.jsx correctly 1`] =
 
 exports[`ssr snapshot test renders ./src/affix/_example/container.jsx correctly 1`] = `"<div style=\\"border:1px solid var(--component-stroke);border-radius:3px;height:400px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:none\\" data-reactroot=\\"\\"><div style=\\"height:1500px;padding-top:700px;background-color:#eee;background-image:linear-gradient(45deg,#bbb 25%,transparent 0),linear-gradient(45deg,transparent 75%,#bbb 0),linear-gradient(45deg,#bbb 25%,transparent 0),linear-gradient(45deg,transparent 75%,#bbb 0);background-size:30px 30px;background-position:0 0,15px 15px,15px 15px,0 0\\"><div><div><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">affixed: <!-- -->false</span></button></div></div></div></div>"`;
 
-exports[`ssr snapshot test renders ./src/alert/_example/base.jsx correctly 1`] = `"<div class=\\"tdesign-demo-block-column\\" data-reactroot=\\"\\"><div class=\\"t-alert t-alert--success\\"><div class=\\"t-alert__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M8 15A7 7 0 108 1a7 7 0 000 14zM4.5 8.2l.7-.7L7 9.3l3.8-3.8.7.7L7 10.7 4.5 8.2z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-alert__content\\"><div class=\\"t-alert__message\\"><div class=\\"t-alert__description\\">这是一条成功的消息提示</div></div></div></div><div class=\\"t-alert t-alert--info\\"><div class=\\"t-alert__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-info-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-alert__content\\"><div class=\\"t-alert__message\\"><div class=\\"t-alert__description\\">这是一条普通的消息提示</div></div></div></div><div class=\\"t-alert t-alert--warning\\"><div class=\\"t-alert__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M15 8A7 7 0 101 8a7 7 0 0014 0zM8.5 4v5.5h-1V4h1zm-1.1 7h1.2v1.2H7.4V11z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-alert__content\\"><div class=\\"t-alert__message\\"><div class=\\"t-alert__description\\">这是一条警示消息</div></div></div></div><div class=\\"t-alert t-alert--error\\"><div class=\\"t-alert__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M15 8A7 7 0 101 8a7 7 0 0014 0zM8.5 4v5.5h-1V4h1zm-1.1 7h1.2v1.2H7.4V11z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-alert__content\\"><div class=\\"t-alert__message\\"><div class=\\"t-alert__description\\">高危操作/出错信息提示</div></div></div></div></div>"`;
+exports[`ssr snapshot test renders ./src/alert/_example/base.jsx correctly 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-alert t-alert--success\\"><div class=\\"t-alert__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M8 15A7 7 0 108 1a7 7 0 000 14zM4.5 8.2l.7-.7L7 9.3l3.8-3.8.7.7L7 10.7 4.5 8.2z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-alert__content\\"><div class=\\"t-alert__message\\"><div class=\\"t-alert__description\\">这是一条成功的消息提示</div></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-alert t-alert--info\\"><div class=\\"t-alert__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-info-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-alert__content\\"><div class=\\"t-alert__message\\"><div class=\\"t-alert__description\\">这是一条普通的消息提示</div></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-alert t-alert--warning\\"><div class=\\"t-alert__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M15 8A7 7 0 101 8a7 7 0 0014 0zM8.5 4v5.5h-1V4h1zm-1.1 7h1.2v1.2H7.4V11z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-alert__content\\"><div class=\\"t-alert__message\\"><div class=\\"t-alert__description\\">这是一条警示消息</div></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-alert t-alert--error\\"><div class=\\"t-alert__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M15 8A7 7 0 101 8a7 7 0 0014 0zM8.5 4v5.5h-1V4h1zm-1.1 7h1.2v1.2H7.4V11z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-alert__content\\"><div class=\\"t-alert__message\\"><div class=\\"t-alert__description\\">高危操作/出错信息提示</div></div></div></div></div></div>"`;
 
-exports[`ssr snapshot test renders ./src/alert/_example/close.jsx correctly 1`] = `"<div class=\\"tdesign-demo-block-column\\" data-reactroot=\\"\\"><div class=\\"t-alert t-alert--success\\"><div class=\\"t-alert__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M8 15A7 7 0 108 1a7 7 0 000 14zM4.5 8.2l.7-.7L7 9.3l3.8-3.8.7.7L7 10.7 4.5 8.2z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-alert__content\\"><div class=\\"t-alert__message\\"><div class=\\"t-alert__description\\">这是一条成功的消息提示</div></div></div><div class=\\"t-alert__close\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close\\"><path fill=\\"currentColor\\" d=\\"M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z\\" fill-opacity=\\"0.9\\"></path></svg></div></div><div class=\\"t-alert t-alert--info\\"><div class=\\"t-alert__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-info-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-alert__content\\"><div class=\\"t-alert__message\\"><div class=\\"t-alert__description\\">这是一条普通的消息提示</div></div></div><div class=\\"t-alert__close\\">关闭</div></div><div class=\\"t-alert t-alert--warning\\"><div class=\\"t-alert__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M15 8A7 7 0 101 8a7 7 0 0014 0zM8.5 4v5.5h-1V4h1zm-1.1 7h1.2v1.2H7.4V11z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-alert__content\\"><div class=\\"t-alert__message\\"><div class=\\"t-alert__description\\">这是一条警示消息</div></div></div><div class=\\"t-alert__close\\">知道了</div></div><div class=\\"t-alert t-alert--error\\"><div class=\\"t-alert__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M15 8A7 7 0 101 8a7 7 0 0014 0zM8.5 4v5.5h-1V4h1zm-1.1 7h1.2v1.2H7.4V11z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-alert__content\\"><div class=\\"t-alert__message\\"><div class=\\"t-alert__description\\">高危操作/出错信息提示</div></div></div><div class=\\"t-alert__close\\"><span>自定义关闭</span></div></div></div>"`;
+exports[`ssr snapshot test renders ./src/alert/_example/close.jsx correctly 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-alert t-alert--success\\"><div class=\\"t-alert__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M8 15A7 7 0 108 1a7 7 0 000 14zM4.5 8.2l.7-.7L7 9.3l3.8-3.8.7.7L7 10.7 4.5 8.2z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-alert__content\\"><div class=\\"t-alert__message\\"><div class=\\"t-alert__description\\">这是一条成功的消息提示</div></div></div><div class=\\"t-alert__close\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close\\"><path fill=\\"currentColor\\" d=\\"M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z\\" fill-opacity=\\"0.9\\"></path></svg></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-alert t-alert--info\\"><div class=\\"t-alert__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-info-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-alert__content\\"><div class=\\"t-alert__message\\"><div class=\\"t-alert__description\\">这是一条普通的消息提示</div></div></div><div class=\\"t-alert__close\\">关闭</div></div></div><div class=\\"t-space-item\\"><div class=\\"t-alert t-alert--warning\\"><div class=\\"t-alert__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M15 8A7 7 0 101 8a7 7 0 0014 0zM8.5 4v5.5h-1V4h1zm-1.1 7h1.2v1.2H7.4V11z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-alert__content\\"><div class=\\"t-alert__message\\"><div class=\\"t-alert__description\\">这是一条警示消息</div></div></div><div class=\\"t-alert__close\\">知道了</div></div></div><div class=\\"t-space-item\\"><div class=\\"t-alert t-alert--error\\"><div class=\\"t-alert__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M15 8A7 7 0 101 8a7 7 0 0014 0zM8.5 4v5.5h-1V4h1zm-1.1 7h1.2v1.2H7.4V11z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-alert__content\\"><div class=\\"t-alert__message\\"><div class=\\"t-alert__description\\">高危操作/出错信息提示</div></div></div><div class=\\"t-alert__close\\"><span>自定义关闭</span></div></div></div></div>"`;
 
 exports[`ssr snapshot test renders ./src/alert/_example/collapse.jsx correctly 1`] = `"<div class=\\"t-alert t-alert--info\\"><div class=\\"t-alert__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-info-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-alert__content\\"><div class=\\"t-alert__message\\"><div class=\\"t-alert__description\\"><div>1.这是一条普通的消息提示描述，</div><div>2.这是一条普通的消息提示描述，</div><div class=\\"t-alert__collapse\\">展开更多</div></div></div></div></div>"`;
 
-exports[`ssr snapshot test renders ./src/alert/_example/icon.jsx correctly 1`] = `"<div class=\\"tdesign-demo-block-column\\" data-reactroot=\\"\\"><div class=\\"t-alert t-alert--success\\"><div class=\\"t-alert__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M8 15A7 7 0 108 1a7 7 0 000 14zM4.5 8.2l.7-.7L7 9.3l3.8-3.8.7.7L7 10.7 4.5 8.2z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-alert__content\\"><div class=\\"t-alert__message\\"><div class=\\"t-alert__description\\">这是一条成功的消息提示</div></div></div></div><div class=\\"t-alert t-alert--info\\"><div class=\\"t-alert__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-info-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-alert__content\\"><div class=\\"t-alert__message\\"><div class=\\"t-alert__description\\">这是一条普通的消息提示</div></div></div></div><div class=\\"t-alert t-alert--warning\\"><div class=\\"t-alert__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M15 8A7 7 0 101 8a7 7 0 0014 0zM8.5 4v5.5h-1V4h1zm-1.1 7h1.2v1.2H7.4V11z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-alert__content\\"><div class=\\"t-alert__message\\"><div class=\\"t-alert__description\\">这是一条警示消息</div></div></div></div><div class=\\"t-alert t-alert--error\\"><div class=\\"t-alert__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M15 8A7 7 0 101 8a7 7 0 0014 0zM8.5 4v5.5h-1V4h1zm-1.1 7h1.2v1.2H7.4V11z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-alert__content\\"><div class=\\"t-alert__message\\"><div class=\\"t-alert__description\\">高危操作/出错信息提示</div></div></div></div></div>"`;
+exports[`ssr snapshot test renders ./src/alert/_example/icon.jsx correctly 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-alert t-alert--success\\"><div class=\\"t-alert__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M8 15A7 7 0 108 1a7 7 0 000 14zM4.5 8.2l.7-.7L7 9.3l3.8-3.8.7.7L7 10.7 4.5 8.2z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-alert__content\\"><div class=\\"t-alert__message\\"><div class=\\"t-alert__description\\">这是一条成功的消息提示</div></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-alert t-alert--info\\"><div class=\\"t-alert__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-info-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-alert__content\\"><div class=\\"t-alert__message\\"><div class=\\"t-alert__description\\">这是一条普通的消息提示</div></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-alert t-alert--warning\\"><div class=\\"t-alert__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M15 8A7 7 0 101 8a7 7 0 0014 0zM8.5 4v5.5h-1V4h1zm-1.1 7h1.2v1.2H7.4V11z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-alert__content\\"><div class=\\"t-alert__message\\"><div class=\\"t-alert__description\\">这是一条警示消息</div></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-alert t-alert--error\\"><div class=\\"t-alert__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M15 8A7 7 0 101 8a7 7 0 0014 0zM8.5 4v5.5h-1V4h1zm-1.1 7h1.2v1.2H7.4V11z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-alert__content\\"><div class=\\"t-alert__message\\"><div class=\\"t-alert__description\\">高危操作/出错信息提示</div></div></div></div></div></div>"`;
 
-exports[`ssr snapshot test renders ./src/alert/_example/operation.jsx correctly 1`] = `"<div class=\\"tdesign-demo-block-column\\" data-reactroot=\\"\\"><div class=\\"t-alert t-alert--success\\"><div class=\\"t-alert__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M8 15A7 7 0 108 1a7 7 0 000 14zM4.5 8.2l.7-.7L7 9.3l3.8-3.8.7.7L7 10.7 4.5 8.2z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-alert__content\\"><div class=\\"t-alert__message\\"><div class=\\"t-alert__description\\">这是一条成功的消息提示</div><div class=\\"t-alert__operation\\"><span>相关操作</span></div></div></div><div class=\\"t-alert__close\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close\\"><path fill=\\"currentColor\\" d=\\"M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z\\" fill-opacity=\\"0.9\\"></path></svg></div></div><div class=\\"t-alert t-alert--info\\"><div class=\\"t-alert__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-info-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-alert__content\\"><div class=\\"t-alert__message\\"><div class=\\"t-alert__description\\">这是一条普通的消息提示</div><div class=\\"t-alert__operation\\"><span>相关操作</span></div></div></div><div class=\\"t-alert__close\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close\\"><path fill=\\"currentColor\\" d=\\"M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z\\" fill-opacity=\\"0.9\\"></path></svg></div></div><div class=\\"t-alert t-alert--warning\\"><div class=\\"t-alert__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M15 8A7 7 0 101 8a7 7 0 0014 0zM8.5 4v5.5h-1V4h1zm-1.1 7h1.2v1.2H7.4V11z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-alert__content\\"><div class=\\"t-alert__message\\"><div class=\\"t-alert__description\\">这是一条警示消息</div><div class=\\"t-alert__operation\\"><span>相关操作</span></div></div></div><div class=\\"t-alert__close\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close\\"><path fill=\\"currentColor\\" d=\\"M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z\\" fill-opacity=\\"0.9\\"></path></svg></div></div><div class=\\"t-alert t-alert--error\\"><div class=\\"t-alert__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M15 8A7 7 0 101 8a7 7 0 0014 0zM8.5 4v5.5h-1V4h1zm-1.1 7h1.2v1.2H7.4V11z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-alert__content\\"><div class=\\"t-alert__message\\"><div class=\\"t-alert__description\\">高危操作/出错信息提示</div><div class=\\"t-alert__operation\\"><span>相关操作</span></div></div></div><div class=\\"t-alert__close\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close\\"><path fill=\\"currentColor\\" d=\\"M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z\\" fill-opacity=\\"0.9\\"></path></svg></div></div></div>"`;
+exports[`ssr snapshot test renders ./src/alert/_example/operation.jsx correctly 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-alert t-alert--success\\"><div class=\\"t-alert__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M8 15A7 7 0 108 1a7 7 0 000 14zM4.5 8.2l.7-.7L7 9.3l3.8-3.8.7.7L7 10.7 4.5 8.2z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-alert__content\\"><div class=\\"t-alert__message\\"><div class=\\"t-alert__description\\">这是一条成功的消息提示</div><div class=\\"t-alert__operation\\"><span>相关操作</span></div></div></div><div class=\\"t-alert__close\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close\\"><path fill=\\"currentColor\\" d=\\"M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z\\" fill-opacity=\\"0.9\\"></path></svg></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-alert t-alert--info\\"><div class=\\"t-alert__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-info-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-alert__content\\"><div class=\\"t-alert__message\\"><div class=\\"t-alert__description\\">这是一条普通的消息提示</div><div class=\\"t-alert__operation\\"><span>相关操作</span></div></div></div><div class=\\"t-alert__close\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close\\"><path fill=\\"currentColor\\" d=\\"M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z\\" fill-opacity=\\"0.9\\"></path></svg></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-alert t-alert--warning\\"><div class=\\"t-alert__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M15 8A7 7 0 101 8a7 7 0 0014 0zM8.5 4v5.5h-1V4h1zm-1.1 7h1.2v1.2H7.4V11z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-alert__content\\"><div class=\\"t-alert__message\\"><div class=\\"t-alert__description\\">这是一条警示消息</div><div class=\\"t-alert__operation\\"><span>相关操作</span></div></div></div><div class=\\"t-alert__close\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close\\"><path fill=\\"currentColor\\" d=\\"M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z\\" fill-opacity=\\"0.9\\"></path></svg></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-alert t-alert--error\\"><div class=\\"t-alert__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M15 8A7 7 0 101 8a7 7 0 0014 0zM8.5 4v5.5h-1V4h1zm-1.1 7h1.2v1.2H7.4V11z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-alert__content\\"><div class=\\"t-alert__message\\"><div class=\\"t-alert__description\\">高危操作/出错信息提示</div><div class=\\"t-alert__operation\\"><span>相关操作</span></div></div></div><div class=\\"t-alert__close\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close\\"><path fill=\\"currentColor\\" d=\\"M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z\\" fill-opacity=\\"0.9\\"></path></svg></div></div></div></div>"`;
 
-exports[`ssr snapshot test renders ./src/alert/_example/swiper.jsx correctly 1`] = `"<div class=\\"tdesign-demo-block-column\\" data-reactroot=\\"\\"><div class=\\"t-alert t-alert--success\\"><div class=\\"t-alert__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M8 15A7 7 0 108 1a7 7 0 000 14zM4.5 8.2l.7-.7L7 9.3l3.8-3.8.7.7L7 10.7 4.5 8.2z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-alert__content\\"><div class=\\"t-alert__message\\"><div class=\\"t-alert__description\\">这是一条成功的消息提示</div></div></div></div><div class=\\"t-alert t-alert--info\\"><div class=\\"t-alert__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-info-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-alert__content\\"><div class=\\"t-alert__message\\"><div class=\\"t-alert__description\\">这是一条普通的消息提示</div></div></div></div><div class=\\"t-alert t-alert--warning\\"><div class=\\"t-alert__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M15 8A7 7 0 101 8a7 7 0 0014 0zM8.5 4v5.5h-1V4h1zm-1.1 7h1.2v1.2H7.4V11z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-alert__content\\"><div class=\\"t-alert__message\\"><div class=\\"t-alert__description\\">这是一条警示消息</div></div></div></div><div class=\\"t-alert t-alert--error\\"><div class=\\"t-alert__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M15 8A7 7 0 101 8a7 7 0 0014 0zM8.5 4v5.5h-1V4h1zm-1.1 7h1.2v1.2H7.4V11z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-alert__content\\"><div class=\\"t-alert__message\\"><div class=\\"t-alert__description\\">高危操作/出错信息提示</div></div></div></div></div>"`;
+exports[`ssr snapshot test renders ./src/alert/_example/swiper.jsx correctly 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-alert t-alert--success\\"><div class=\\"t-alert__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M8 15A7 7 0 108 1a7 7 0 000 14zM4.5 8.2l.7-.7L7 9.3l3.8-3.8.7.7L7 10.7 4.5 8.2z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-alert__content\\"><div class=\\"t-alert__message\\"><div class=\\"t-alert__description\\">这是一条成功的消息提示</div></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-alert t-alert--info\\"><div class=\\"t-alert__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-info-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-alert__content\\"><div class=\\"t-alert__message\\"><div class=\\"t-alert__description\\">这是一条普通的消息提示</div></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-alert t-alert--warning\\"><div class=\\"t-alert__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M15 8A7 7 0 101 8a7 7 0 0014 0zM8.5 4v5.5h-1V4h1zm-1.1 7h1.2v1.2H7.4V11z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-alert__content\\"><div class=\\"t-alert__message\\"><div class=\\"t-alert__description\\">这是一条警示消息</div></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-alert t-alert--error\\"><div class=\\"t-alert__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M15 8A7 7 0 101 8a7 7 0 0014 0zM8.5 4v5.5h-1V4h1zm-1.1 7h1.2v1.2H7.4V11z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-alert__content\\"><div class=\\"t-alert__message\\"><div class=\\"t-alert__description\\">高危操作/出错信息提示</div></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test renders ./src/alert/_example/title.jsx correctly 1`] = `"<div class=\\"t-alert t-alert--info\\"><div class=\\"t-alert__icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-info-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-alert__content\\"><div class=\\"t-alert__title\\">这是一条普通的消息提示</div><div class=\\"t-alert__message\\"><div class=\\"t-alert__description\\">这是一条普通的消息提示描述，这是一条普通的消息提示描述</div><div class=\\"t-alert__operation\\"><span>相关操作</span></div></div></div></div>"`;