diff --git a/src/avatar/__tests__/__snapshots__/avatar.test.tsx.snap b/src/avatar/__tests__/__snapshots__/avatar.test.tsx.snap
index 047df30d2..7da9bbbfd 100644
--- a/src/avatar/__tests__/__snapshots__/avatar.test.tsx.snap
+++ b/src/avatar/__tests__/__snapshots__/avatar.test.tsx.snap
@@ -3,37 +3,50 @@
 exports[`adjust.jsx 1`] = `
 <DocumentFragment>
   <div
-    class="demo-avatar"
+    class="t-space t-space-horizontal"
+    style="gap: 16px;"
   >
     <div
-      class="t-avatar t-avatar--circle"
-      style="margin-right: 40px;"
+      class="t-space-item"
     >
-      <span
-        style="transform: scale(1);"
+      <div
+        class="t-avatar t-avatar--circle"
+        style="margin-right: 40px;"
       >
-        王
-      </span>
+        <span
+          style="transform: scale(1);"
+        >
+          王
+        </span>
+      </div>
     </div>
     <div
-      class="t-avatar t-avatar--circle"
-      style="margin-right: 40px;"
+      class="t-space-item"
     >
-      <span
-        style="transform: scale(1);"
+      <div
+        class="t-avatar t-avatar--circle"
+        style="margin-right: 40px;"
       >
-        王亿
-      </span>
+        <span
+          style="transform: scale(1);"
+        >
+          王亿
+        </span>
+      </div>
     </div>
     <div
-      class="t-avatar t-avatar--circle"
-      style="margin-right: 40px;"
+      class="t-space-item"
     >
-      <span
-        style="transform: scale(1);"
+      <div
+        class="t-avatar t-avatar--circle"
+        style="margin-right: 40px;"
       >
-        王亿亿
-      </span>
+        <span
+          style="transform: scale(1);"
+        >
+          王亿亿
+        </span>
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -42,50 +55,41 @@ exports[`adjust.jsx 1`] = `
 exports[`base.jsx 1`] = `
 <DocumentFragment>
   <div
-    class="demo-avatar"
+    class="t-space t-space-horizontal"
+    style="gap: 16px;"
   >
     <div
-      class="t-avatar t-avatar--circle"
-      style="margin-right: 40px;"
+      class="t-space-item"
     >
-      <img
-        src="https://tdesign.gtimg.com/site/avatar.jpg"
-      />
-    </div>
-    <div
-      class="t-avatar t-avatar--circle"
-      style="margin-right: 40px;"
-    >
-      <span
-        style="transform: scale(1);"
+      <div
+        class="t-avatar t-avatar--circle"
+        style="margin-right: 40px;"
       >
-        W
-      </span>
+        <img
+          src="https://tdesign.gtimg.com/site/avatar.jpg"
+        />
+      </div>
     </div>
     <div
-      class="t-avatar t-avatar--circle t-avatar-icon"
-      style="margin-right: 40px;"
+      class="t-space-item"
     >
-      <svg
-        class="t-icon t-icon-user"
-        fill="none"
-        height="1em"
-        viewBox="0 0 16 16"
-        width="1em"
+      <div
+        class="t-avatar t-avatar--circle"
+        style="margin-right: 40px;"
       >
-        <path
-          d="M11.5 5a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0zm-1 0a2.5 2.5 0 10-5 0 2.5 2.5 0 005 0zM13.96 10.85c.34.16.54.5.54.87V14a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5v-2.28c0-.37.2-.7.54-.87a13.79 13.79 0 0111.92 0zM8 10.5c-1.97 0-3.83.45-5.5 1.24v1.76h11v-1.76A12.78 12.78 0 008 10.5z"
-          fill="currentColor"
-          fill-opacity="0.9"
-        />
-      </svg>
+        <span
+          style="transform: scale(1);"
+        >
+          W
+        </span>
+      </div>
     </div>
     <div
-      class="t-avatar t-avatar--circle"
-      style="margin-right: 40px;"
+      class="t-space-item"
     >
-      <span
-        style="transform: scale(1);"
+      <div
+        class="t-avatar t-avatar--circle t-avatar-icon"
+        style="margin-right: 40px;"
       >
         <svg
           class="t-icon t-icon-user"
@@ -100,7 +104,33 @@ exports[`base.jsx 1`] = `
             fill-opacity="0.9"
           />
         </svg>
-      </span>
+      </div>
+    </div>
+    <div
+      class="t-space-item"
+    >
+      <div
+        class="t-avatar t-avatar--circle"
+        style="margin-right: 40px;"
+      >
+        <span
+          style="transform: scale(1);"
+        >
+          <svg
+            class="t-icon t-icon-user"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M11.5 5a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0zm-1 0a2.5 2.5 0 10-5 0 2.5 2.5 0 005 0zM13.96 10.85c.34.16.54.5.54.87V14a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5v-2.28c0-.37.2-.7.54-.87a13.79 13.79 0 0111.92 0zM8 10.5c-1.97 0-3.83.45-5.5 1.24v1.76h11v-1.76A12.78 12.78 0 008 10.5z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </span>
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -109,11 +139,11 @@ exports[`base.jsx 1`] = `
 exports[`group.jsx 1`] = `
 <DocumentFragment>
   <div
-    class="demo-avatar"
+    class="t-space t-space-vertical"
+    style="gap: 16px;"
   >
     <div
-      class="demo-avatar-block"
-      style="margin-bottom: 40px;"
+      class="t-space-item"
     >
       <div
         class="t-avatar-group t-avatar--offset-right"
@@ -154,7 +184,7 @@ exports[`group.jsx 1`] = `
       </div>
     </div>
     <div
-      class="demo-avatar-block"
+      class="t-space-item"
     >
       <div
         class="t-avatar-group t-avatar--offset-right"
@@ -201,11 +231,11 @@ exports[`group.jsx 1`] = `
 exports[`group-cascading.jsx 1`] = `
 <DocumentFragment>
   <div
-    class="demo-avatar"
+    class="t-space t-space-vertical"
+    style="gap: 16px;"
   >
     <div
-      class="demo-avatar-block"
-      style="margin-bottom: 40px;"
+      class="t-space-item"
     >
       <div
         class="t-avatar-group t-avatar--offset-right"
@@ -246,8 +276,7 @@ exports[`group-cascading.jsx 1`] = `
       </div>
     </div>
     <div
-      class="demo-avatar-block"
-      style="margin-bottom: 40px;"
+      class="t-space-item"
     >
       <div
         class="t-avatar-group t-avatar--offset-left"
@@ -294,11 +323,11 @@ exports[`group-cascading.jsx 1`] = `
 exports[`group-max.jsx 1`] = `
 <DocumentFragment>
   <div
-    class="demo-avatar"
+    class="t-space t-space-vertical"
+    style="gap: 16px;"
   >
     <div
-      class="demo-avatar-block"
-      style="margin-bottom: 40px;"
+      class="t-space-item"
     >
       <div
         class="t-avatar-group t-avatar--offset-right"
@@ -335,8 +364,7 @@ exports[`group-max.jsx 1`] = `
       </div>
     </div>
     <div
-      class="demo-avatar-block"
-      style="margin-bottom: 40px;"
+      class="t-space-item"
     >
       <div
         class="t-avatar-group t-avatar--offset-right"
@@ -385,7 +413,7 @@ exports[`group-max.jsx 1`] = `
       </div>
     </div>
     <div
-      class="demo-avatar-block"
+      class="t-space-item"
     >
       <div
         class="t-avatar-group t-avatar--offset-right"
@@ -428,43 +456,14 @@ exports[`group-max.jsx 1`] = `
 exports[`shape.jsx 1`] = `
 <DocumentFragment>
   <div
-    class="demo-avatar"
+    class="t-space t-space-horizontal"
+    style="gap: 16px;"
   >
     <div
-      class="t-avatar t-avatar--circle"
-      style="margin-right: 40px;"
-    >
-      <span
-        style="transform: scale(1);"
-      >
-        W
-      </span>
-    </div>
-    <div
-      class="t-avatar t-avatar--round"
-      style="margin-right: 40px;"
-    >
-      <span
-        style="transform: scale(1);"
-      >
-        W
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`size.jsx 1`] = `
-<DocumentFragment>
-  <div
-    class="demo-avatar"
-  >
-    <div
-      class="demo-avatar-block"
-      style="margin-bottom: 40px;"
+      class="t-space-item"
     >
       <div
-        class="t-avatar t-size-s t-avatar--circle"
+        class="t-avatar t-avatar--circle"
         style="margin-right: 40px;"
       >
         <span
@@ -473,8 +472,12 @@ exports[`size.jsx 1`] = `
           W
         </span>
       </div>
+    </div>
+    <div
+      class="t-space-item"
+    >
       <div
-        class="t-avatar t-size-m t-avatar--circle"
+        class="t-avatar t-avatar--round"
         style="margin-right: 40px;"
       >
         <span
@@ -483,69 +486,145 @@ exports[`size.jsx 1`] = `
           W
         </span>
       </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`size.jsx 1`] = `
+<DocumentFragment>
+  <div
+    class="t-space t-space-vertical"
+    style="gap: 24px;"
+  >
+    <div
+      class="t-space-item"
+    >
       <div
-        class="t-avatar t-size-l t-avatar--circle"
-        style="margin-right: 40px;"
+        class="t-space t-space-align-center t-space-horizontal"
+        style="gap: 16px;"
       >
-        <span
-          style="transform: scale(1);"
+        <div
+          class="t-space-item"
         >
-          W
-        </span>
-      </div>
-      <div
-        class="t-avatar t-avatar--circle"
-        style="width: 100px; height: 100px; font-size: 50px; margin-right: 40px;"
-      >
-        <span
-          style="transform: scale(1);"
+          <div
+            class="t-avatar t-size-s t-avatar--circle"
+            style="margin-right: 40px;"
+          >
+            <span
+              style="transform: scale(1);"
+            >
+              W
+            </span>
+          </div>
+        </div>
+        <div
+          class="t-space-item"
         >
-          W
-        </span>
+          <div
+            class="t-avatar t-size-m t-avatar--circle"
+            style="margin-right: 40px;"
+          >
+            <span
+              style="transform: scale(1);"
+            >
+              W
+            </span>
+          </div>
+        </div>
+        <div
+          class="t-space-item"
+        >
+          <div
+            class="t-avatar t-size-l t-avatar--circle"
+            style="margin-right: 40px;"
+          >
+            <span
+              style="transform: scale(1);"
+            >
+              W
+            </span>
+          </div>
+        </div>
+        <div
+          class="t-space-item"
+        >
+          <div
+            class="t-avatar t-avatar--circle"
+            style="width: 100px; height: 100px; font-size: 50px; margin-right: 40px;"
+          >
+            <span
+              style="transform: scale(1);"
+            >
+              W
+            </span>
+          </div>
+        </div>
       </div>
     </div>
     <div
-      class="demo-avatar-block"
+      class="t-space-item"
     >
       <div
-        class="t-avatar t-size-s t-avatar--round"
-        style="margin-right: 40px;"
+        class="t-space t-space-align-center t-space-horizontal"
+        style="gap: 16px;"
       >
-        <span
-          style="transform: scale(1);"
+        <div
+          class="t-space-item"
         >
-          W
-        </span>
-      </div>
-      <div
-        class="t-avatar t-size-m t-avatar--round"
-        style="margin-right: 40px;"
-      >
-        <span
-          style="transform: scale(1);"
+          <div
+            class="t-avatar t-size-s t-avatar--round"
+            style="margin-right: 40px;"
+          >
+            <span
+              style="transform: scale(1);"
+            >
+              W
+            </span>
+          </div>
+        </div>
+        <div
+          class="t-space-item"
         >
-          W
-        </span>
-      </div>
-      <div
-        class="t-avatar t-size-l t-avatar--round"
-        style="margin-right: 40px;"
-      >
-        <span
-          style="transform: scale(1);"
+          <div
+            class="t-avatar t-size-m t-avatar--round"
+            style="margin-right: 40px;"
+          >
+            <span
+              style="transform: scale(1);"
+            >
+              W
+            </span>
+          </div>
+        </div>
+        <div
+          class="t-space-item"
         >
-          W
-        </span>
-      </div>
-      <div
-        class="t-avatar t-avatar--round"
-        style="width: 100px; height: 100px; font-size: 50px; margin-right: 40px;"
-      >
-        <span
-          style="transform: scale(1);"
+          <div
+            class="t-avatar t-size-l t-avatar--round"
+            style="margin-right: 40px;"
+          >
+            <span
+              style="transform: scale(1);"
+            >
+              W
+            </span>
+          </div>
+        </div>
+        <div
+          class="t-space-item"
         >
-          W
-        </span>
+          <div
+            class="t-avatar t-avatar--round"
+            style="width: 100px; height: 100px; font-size: 50px; margin-right: 40px;"
+          >
+            <span
+              style="transform: scale(1);"
+            >
+              W
+            </span>
+          </div>
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/avatar/_example/adjust.jsx b/src/avatar/_example/adjust.jsx
index c17b71710..14c1c6fae 100644
--- a/src/avatar/_example/adjust.jsx
+++ b/src/avatar/_example/adjust.jsx
@@ -1,12 +1,12 @@
 import React from 'react';
-import { Avatar } from 'tdesign-react';
+import { Avatar, Space } from 'tdesign-react';
 
 export default function AdjustAvatar() {
   return (
-    <div className="demo-avatar">
+    <Space>
       <Avatar style={{ marginRight: '40px' }}>王</Avatar>
       <Avatar style={{ marginRight: '40px' }}>王亿</Avatar>
       <Avatar style={{ marginRight: '40px' }}>王亿亿</Avatar>
-    </div>
+    </Space>
   );
 }
diff --git a/src/avatar/_example/base.jsx b/src/avatar/_example/base.jsx
index bbebc58e8..43b44dd46 100644
--- a/src/avatar/_example/base.jsx
+++ b/src/avatar/_example/base.jsx
@@ -1,10 +1,10 @@
 import React from 'react';
-import { Avatar } from 'tdesign-react';
+import { Avatar, Space } from 'tdesign-react';
 import { UserIcon } from 'tdesign-icons-react';
 
 export default function BasicAvatar() {
   return (
-    <div className="demo-avatar">
+    <Space>
       <Avatar
         image="https://tdesign.gtimg.com/site/avatar.jpg"
         hideOnLoadFailed="false"
@@ -15,6 +15,6 @@ export default function BasicAvatar() {
       <Avatar style={{ marginRight: '40px' }}>
         <UserIcon />
       </Avatar>
-    </div>
+    </Space>
   );
 }
diff --git a/src/avatar/_example/group-cascading.jsx b/src/avatar/_example/group-cascading.jsx
index 049d7f7d5..f19abbb08 100644
--- a/src/avatar/_example/group-cascading.jsx
+++ b/src/avatar/_example/group-cascading.jsx
@@ -1,26 +1,23 @@
 import React from 'react';
-import { Avatar } from 'tdesign-react';
+import { Avatar, Space } from 'tdesign-react';
 import { UserIcon } from 'tdesign-icons-react';
 
 const { Group: AvatarGroup } = Avatar;
 
 export default function GroupCascadingAvatar() {
   return (
-    <div className="demo-avatar">
-      <div className="demo-avatar-block" style={{ marginBottom: '40px' }}>
-        <AvatarGroup>
-          <Avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></Avatar>
-          <Avatar>W</Avatar>
-          <Avatar icon={<UserIcon />}></Avatar>
-        </AvatarGroup>
-      </div>
-      <div className="demo-avatar-block" style={{ marginBottom: '40px' }}>
-        <AvatarGroup cascading="left-up">
-          <Avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></Avatar>
-          <Avatar>W</Avatar>
-          <Avatar icon={<UserIcon />}></Avatar>
-        </AvatarGroup>
-      </div>
-    </div>
+    <Space direction="vertical">
+      <AvatarGroup>
+        <Avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></Avatar>
+        <Avatar>W</Avatar>
+        <Avatar icon={<UserIcon />}></Avatar>
+      </AvatarGroup>
+
+      <AvatarGroup cascading="left-up">
+        <Avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></Avatar>
+        <Avatar>W</Avatar>
+        <Avatar icon={<UserIcon />}></Avatar>
+      </AvatarGroup>
+    </Space>
   );
 }
diff --git a/src/avatar/_example/group-max.jsx b/src/avatar/_example/group-max.jsx
index 8450c4113..e59c21fe7 100644
--- a/src/avatar/_example/group-max.jsx
+++ b/src/avatar/_example/group-max.jsx
@@ -1,33 +1,29 @@
 import React from 'react';
-import { Avatar } from 'tdesign-react';
+import { Avatar, Space } from 'tdesign-react';
 import { UserIcon, EllipsisIcon } from 'tdesign-icons-react';
 
 const { Group: AvatarGroup } = Avatar;
 
 export default function GroupMaxAvatar() {
   return (
-    <div className="demo-avatar">
-      <div className="demo-avatar-block" style={{ marginBottom: '40px' }}>
-        <AvatarGroup size="large" max={2}>
-          <Avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></Avatar>
-          <Avatar>Avatar</Avatar>
-          <Avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></Avatar>
-        </AvatarGroup>
-      </div>
-      <div className="demo-avatar-block" style={{ marginBottom: '40px' }}>
-        <AvatarGroup size="large" max={2} collapseAvatar={<EllipsisIcon />}>
-          <Avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></Avatar>
-          <Avatar>Avatar</Avatar>
-          <Avatar icon={<UserIcon />}></Avatar>
-        </AvatarGroup>
-      </div>
-      <div className="demo-avatar-block">
-        <AvatarGroup size="large" max={2} collapseAvatar="more">
-          <Avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></Avatar>
-          <Avatar>Avatar</Avatar>
-          <Avatar icon={<UserIcon />}></Avatar>
-        </AvatarGroup>
-      </div>
-    </div>
+    <Space direction="vertical">
+      <AvatarGroup size="large" max={2}>
+        <Avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></Avatar>
+        <Avatar>Avatar</Avatar>
+        <Avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></Avatar>
+      </AvatarGroup>
+
+      <AvatarGroup size="large" max={2} collapseAvatar={<EllipsisIcon />}>
+        <Avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></Avatar>
+        <Avatar>Avatar</Avatar>
+        <Avatar icon={<UserIcon />}></Avatar>
+      </AvatarGroup>
+
+      <AvatarGroup size="large" max={2} collapseAvatar="more">
+        <Avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></Avatar>
+        <Avatar>Avatar</Avatar>
+        <Avatar icon={<UserIcon />}></Avatar>
+      </AvatarGroup>
+    </Space>
   );
 }
diff --git a/src/avatar/_example/group.jsx b/src/avatar/_example/group.jsx
index cc6401e26..654beaf40 100644
--- a/src/avatar/_example/group.jsx
+++ b/src/avatar/_example/group.jsx
@@ -1,26 +1,23 @@
 import React from 'react';
-import { Avatar } from 'tdesign-react';
+import { Avatar, Space } from 'tdesign-react';
 import { UserIcon } from 'tdesign-icons-react';
 
 const { Group: AvatarGroup } = Avatar;
 
 export default function GroupAvatar() {
   return (
-    <div className="demo-avatar">
-      <div className="demo-avatar-block" style={{ marginBottom: '40px' }}>
-        <AvatarGroup>
-          <Avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></Avatar>
-          <Avatar>W</Avatar>
-          <Avatar icon={<UserIcon />}></Avatar>
-        </AvatarGroup>
-      </div>
-      <div className="demo-avatar-block">
-        <AvatarGroup size="large">
-          <Avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></Avatar>
-          <Avatar>W</Avatar>
-          <Avatar icon={<UserIcon />}></Avatar>
-        </AvatarGroup>
-      </div>
-    </div>
+    <Space direction="vertical">
+      <AvatarGroup>
+        <Avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></Avatar>
+        <Avatar>W</Avatar>
+        <Avatar icon={<UserIcon />}></Avatar>
+      </AvatarGroup>
+
+      <AvatarGroup size="large">
+        <Avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></Avatar>
+        <Avatar>W</Avatar>
+        <Avatar icon={<UserIcon />}></Avatar>
+      </AvatarGroup>
+    </Space>
   );
 }
diff --git a/src/avatar/_example/shape.jsx b/src/avatar/_example/shape.jsx
index 11e08ea16..973c34222 100644
--- a/src/avatar/_example/shape.jsx
+++ b/src/avatar/_example/shape.jsx
@@ -1,13 +1,13 @@
 import React from 'react';
-import { Avatar } from 'tdesign-react';
+import { Avatar, Space } from 'tdesign-react';
 
 export default function ShapeAvatar() {
   return (
-    <div className="demo-avatar">
+    <Space>
       <Avatar style={{ marginRight: '40px' }}>W</Avatar>
       <Avatar shape="round" style={{ marginRight: '40px' }}>
         W
       </Avatar>
-    </div>
+    </Space>
   );
 }
diff --git a/src/avatar/_example/size.jsx b/src/avatar/_example/size.jsx
index 0fb95ac6e..e1003cf2b 100644
--- a/src/avatar/_example/size.jsx
+++ b/src/avatar/_example/size.jsx
@@ -1,10 +1,10 @@
 import React from 'react';
-import { Avatar } from 'tdesign-react';
+import { Avatar, Space } from 'tdesign-react';
 
 export default function SizeAvatar() {
   return (
-    <div className="demo-avatar">
-      <div className="demo-avatar-block" style={{ marginBottom: '40px' }}>
+    <Space direction="vertical" size="large">
+      <Space align="center">
         <Avatar size="small" style={{ marginRight: '40px' }}>
           W
         </Avatar>
@@ -17,8 +17,8 @@ export default function SizeAvatar() {
         <Avatar size="100px" style={{ marginRight: '40px' }}>
           W
         </Avatar>
-      </div>
-      <div className="demo-avatar-block">
+      </Space>
+      <Space align="center">
         <Avatar shape="round" size="small" style={{ marginRight: '40px' }}>
           W
         </Avatar>
@@ -31,7 +31,7 @@ export default function SizeAvatar() {
         <Avatar shape="round" size="100px" style={{ marginRight: '40px' }}>
           W
         </Avatar>
-      </div>
-    </div>
+      </Space>
+    </Space>
   );
 }
diff --git a/test/ssr/__snapshots__/ssr.test.js.snap b/test/ssr/__snapshots__/ssr.test.js.snap
index f03dfd376..67afdbe6a 100644
--- a/test/ssr/__snapshots__/ssr.test.js.snap
+++ b/test/ssr/__snapshots__/ssr.test.js.snap
@@ -32,19 +32,19 @@ exports[`ssr snapshot test renders ./src/anchor/_example/small.jsx correctly 1`]
 
 exports[`ssr snapshot test renders ./src/anchor/_example/target.jsx correctly 1`] = `"<div id=\\"/components/anchor/#anchor-target\\" class=\\"anchor-demo\\" data-reactroot=\\"\\"><h1 id=\\"/components/anchor/#default\\" class=\\"t-anchor__target\\">基础锚点<div class=\\"t-popup__reference\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-file-copy t-anchor__copy\\"><path fill=\\"currentColor\\" d=\\"M4 1.92C4 1.34 4.52 1 5 1h4.37a1 1 0 01.71.3L13.71 5a1 1 0 01.29.7v6.38c0 .58-.52.92-1 .92H5c-.48 0-1-.34-1-.92V1.92zM5 2v10h8V6.01H9V2H5zm5 .65V5h2.32L10 2.65z\\" fill-opacity=\\"0.9\\"></path><path fill=\\"currentColor\\" d=\\"M2 5v9.01a1 1 0 001 1h8v-1H3V5H2z\\" fill-opacity=\\"0.9\\"></path></svg></div></h1><h1 id=\\"/components/anchor/#multiple\\" class=\\"t-anchor__target\\">多级锚点<div class=\\"t-popup__reference\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-file-copy t-anchor__copy\\"><path fill=\\"currentColor\\" d=\\"M4 1.92C4 1.34 4.52 1 5 1h4.37a1 1 0 01.71.3L13.71 5a1 1 0 01.29.7v6.38c0 .58-.52.92-1 .92H5c-.48 0-1-.34-1-.92V1.92zM5 2v10h8V6.01H9V2H5zm5 .65V5h2.32L10 2.65z\\" fill-opacity=\\"0.9\\"></path><path fill=\\"currentColor\\" d=\\"M2 5v9.01a1 1 0 001 1h8v-1H3V5H2z\\" fill-opacity=\\"0.9\\"></path></svg></div></h1><h1 id=\\"/components/anchor/#size\\" class=\\"t-anchor__target\\">尺寸大小<div class=\\"t-popup__reference\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-file-copy t-anchor__copy\\"><path fill=\\"currentColor\\" d=\\"M4 1.92C4 1.34 4.52 1 5 1h4.37a1 1 0 01.71.3L13.71 5a1 1 0 01.29.7v6.38c0 .58-.52.92-1 .92H5c-.48 0-1-.34-1-.92V1.92zM5 2v10h8V6.01H9V2H5zm5 .65V5h2.32L10 2.65z\\" fill-opacity=\\"0.9\\"></path><path fill=\\"currentColor\\" d=\\"M2 5v9.01a1 1 0 001 1h8v-1H3V5H2z\\" fill-opacity=\\"0.9\\"></path></svg></div></h1><h1 id=\\"/components/anchor/#attach\\" class=\\"t-anchor__target\\">指定容器<div class=\\"t-popup__reference\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-file-copy t-anchor__copy\\"><path fill=\\"currentColor\\" d=\\"M4 1.92C4 1.34 4.52 1 5 1h4.37a1 1 0 01.71.3L13.71 5a1 1 0 01.29.7v6.38c0 .58-.52.92-1 .92H5c-.48 0-1-.34-1-.92V1.92zM5 2v10h8V6.01H9V2H5zm5 .65V5h2.32L10 2.65z\\" fill-opacity=\\"0.9\\"></path><path fill=\\"currentColor\\" d=\\"M2 5v9.01a1 1 0 001 1h8v-1H3V5H2z\\" fill-opacity=\\"0.9\\"></path></svg></div></h1></div>"`;
 
-exports[`ssr snapshot test renders ./src/avatar/_example/adjust.jsx correctly 1`] = `"<div class=\\"demo-avatar\\" data-reactroot=\\"\\"><div class=\\"t-avatar t-avatar--circle\\" style=\\"margin-right:40px\\"><span style=\\"transform:scale(1)\\">王</span></div><div class=\\"t-avatar t-avatar--circle\\" style=\\"margin-right:40px\\"><span style=\\"transform:scale(1)\\">王亿</span></div><div class=\\"t-avatar t-avatar--circle\\" style=\\"margin-right:40px\\"><span style=\\"transform:scale(1)\\">王亿亿</span></div></div>"`;
+exports[`ssr snapshot test renders ./src/avatar/_example/adjust.jsx correctly 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><div class=\\"t-avatar t-avatar--circle\\" style=\\"margin-right:40px\\"><span style=\\"transform:scale(1)\\">王</span></div></div><div class=\\"t-space-item\\"><div class=\\"t-avatar t-avatar--circle\\" style=\\"margin-right:40px\\"><span style=\\"transform:scale(1)\\">王亿</span></div></div><div class=\\"t-space-item\\"><div class=\\"t-avatar t-avatar--circle\\" style=\\"margin-right:40px\\"><span style=\\"transform:scale(1)\\">王亿亿</span></div></div></div>"`;
 
-exports[`ssr snapshot test renders ./src/avatar/_example/base.jsx correctly 1`] = `"<div class=\\"demo-avatar\\" data-reactroot=\\"\\"><div class=\\"t-avatar t-avatar--circle\\" style=\\"margin-right:40px\\"><img src=\\"https://tdesign.gtimg.com/site/avatar.jpg\\"/></div><div class=\\"t-avatar t-avatar--circle\\" style=\\"margin-right:40px\\"><span style=\\"transform:scale(1)\\">W</span></div><div class=\\"t-avatar t-avatar--circle t-avatar-icon\\" style=\\"margin-right:40px\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-user\\"><path fill=\\"currentColor\\" d=\\"M11.5 5a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0zm-1 0a2.5 2.5 0 10-5 0 2.5 2.5 0 005 0zM13.96 10.85c.34.16.54.5.54.87V14a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5v-2.28c0-.37.2-.7.54-.87a13.79 13.79 0 0111.92 0zM8 10.5c-1.97 0-3.83.45-5.5 1.24v1.76h11v-1.76A12.78 12.78 0 008 10.5z\\" fill-opacity=\\"0.9\\"></path></svg></div><div class=\\"t-avatar t-avatar--circle\\" style=\\"margin-right:40px\\"><span style=\\"transform:scale(1)\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-user\\"><path fill=\\"currentColor\\" d=\\"M11.5 5a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0zm-1 0a2.5 2.5 0 10-5 0 2.5 2.5 0 005 0zM13.96 10.85c.34.16.54.5.54.87V14a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5v-2.28c0-.37.2-.7.54-.87a13.79 13.79 0 0111.92 0zM8 10.5c-1.97 0-3.83.45-5.5 1.24v1.76h11v-1.76A12.78 12.78 0 008 10.5z\\" fill-opacity=\\"0.9\\"></path></svg></span></div></div>"`;
+exports[`ssr snapshot test renders ./src/avatar/_example/base.jsx correctly 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><div class=\\"t-avatar t-avatar--circle\\" style=\\"margin-right:40px\\"><img src=\\"https://tdesign.gtimg.com/site/avatar.jpg\\"/></div></div><div class=\\"t-space-item\\"><div class=\\"t-avatar t-avatar--circle\\" style=\\"margin-right:40px\\"><span style=\\"transform:scale(1)\\">W</span></div></div><div class=\\"t-space-item\\"><div class=\\"t-avatar t-avatar--circle t-avatar-icon\\" style=\\"margin-right:40px\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-user\\"><path fill=\\"currentColor\\" d=\\"M11.5 5a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0zm-1 0a2.5 2.5 0 10-5 0 2.5 2.5 0 005 0zM13.96 10.85c.34.16.54.5.54.87V14a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5v-2.28c0-.37.2-.7.54-.87a13.79 13.79 0 0111.92 0zM8 10.5c-1.97 0-3.83.45-5.5 1.24v1.76h11v-1.76A12.78 12.78 0 008 10.5z\\" fill-opacity=\\"0.9\\"></path></svg></div></div><div class=\\"t-space-item\\"><div class=\\"t-avatar t-avatar--circle\\" style=\\"margin-right:40px\\"><span style=\\"transform:scale(1)\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-user\\"><path fill=\\"currentColor\\" d=\\"M11.5 5a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0zm-1 0a2.5 2.5 0 10-5 0 2.5 2.5 0 005 0zM13.96 10.85c.34.16.54.5.54.87V14a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5v-2.28c0-.37.2-.7.54-.87a13.79 13.79 0 0111.92 0zM8 10.5c-1.97 0-3.83.45-5.5 1.24v1.76h11v-1.76A12.78 12.78 0 008 10.5z\\" fill-opacity=\\"0.9\\"></path></svg></span></div></div></div>"`;
 
-exports[`ssr snapshot test renders ./src/avatar/_example/group.jsx correctly 1`] = `"<div class=\\"demo-avatar\\" data-reactroot=\\"\\"><div class=\\"demo-avatar-block\\" style=\\"margin-bottom:40px\\"><div class=\\"t-avatar-group t-avatar--offset-right\\"><div class=\\"t-avatar t-avatar--circle\\"><img src=\\"https://tdesign.gtimg.com/site/avatar.jpg\\"/></div><div class=\\"t-avatar t-avatar--circle\\"><span style=\\"transform:scale(1)\\">W</span></div><div class=\\"t-avatar t-avatar--circle t-avatar-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-user\\"><path fill=\\"currentColor\\" d=\\"M11.5 5a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0zm-1 0a2.5 2.5 0 10-5 0 2.5 2.5 0 005 0zM13.96 10.85c.34.16.54.5.54.87V14a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5v-2.28c0-.37.2-.7.54-.87a13.79 13.79 0 0111.92 0zM8 10.5c-1.97 0-3.83.45-5.5 1.24v1.76h11v-1.76A12.78 12.78 0 008 10.5z\\" fill-opacity=\\"0.9\\"></path></svg></div></div></div><div class=\\"demo-avatar-block\\"><div class=\\"t-avatar-group t-avatar--offset-right\\"><div class=\\"t-avatar t-avatar--circle\\"><img src=\\"https://tdesign.gtimg.com/site/avatar.jpg\\"/></div><div class=\\"t-avatar t-avatar--circle\\"><span style=\\"transform:scale(1)\\">W</span></div><div class=\\"t-avatar t-avatar--circle t-avatar-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-user\\"><path fill=\\"currentColor\\" d=\\"M11.5 5a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0zm-1 0a2.5 2.5 0 10-5 0 2.5 2.5 0 005 0zM13.96 10.85c.34.16.54.5.54.87V14a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5v-2.28c0-.37.2-.7.54-.87a13.79 13.79 0 0111.92 0zM8 10.5c-1.97 0-3.83.45-5.5 1.24v1.76h11v-1.76A12.78 12.78 0 008 10.5z\\" fill-opacity=\\"0.9\\"></path></svg></div></div></div></div>"`;
+exports[`ssr snapshot test renders ./src/avatar/_example/group.jsx correctly 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-avatar-group t-avatar--offset-right\\"><div class=\\"t-avatar t-avatar--circle\\"><img src=\\"https://tdesign.gtimg.com/site/avatar.jpg\\"/></div><div class=\\"t-avatar t-avatar--circle\\"><span style=\\"transform:scale(1)\\">W</span></div><div class=\\"t-avatar t-avatar--circle t-avatar-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-user\\"><path fill=\\"currentColor\\" d=\\"M11.5 5a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0zm-1 0a2.5 2.5 0 10-5 0 2.5 2.5 0 005 0zM13.96 10.85c.34.16.54.5.54.87V14a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5v-2.28c0-.37.2-.7.54-.87a13.79 13.79 0 0111.92 0zM8 10.5c-1.97 0-3.83.45-5.5 1.24v1.76h11v-1.76A12.78 12.78 0 008 10.5z\\" fill-opacity=\\"0.9\\"></path></svg></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-avatar-group t-avatar--offset-right\\"><div class=\\"t-avatar t-avatar--circle\\"><img src=\\"https://tdesign.gtimg.com/site/avatar.jpg\\"/></div><div class=\\"t-avatar t-avatar--circle\\"><span style=\\"transform:scale(1)\\">W</span></div><div class=\\"t-avatar t-avatar--circle t-avatar-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-user\\"><path fill=\\"currentColor\\" d=\\"M11.5 5a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0zm-1 0a2.5 2.5 0 10-5 0 2.5 2.5 0 005 0zM13.96 10.85c.34.16.54.5.54.87V14a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5v-2.28c0-.37.2-.7.54-.87a13.79 13.79 0 0111.92 0zM8 10.5c-1.97 0-3.83.45-5.5 1.24v1.76h11v-1.76A12.78 12.78 0 008 10.5z\\" fill-opacity=\\"0.9\\"></path></svg></div></div></div></div>"`;
 
-exports[`ssr snapshot test renders ./src/avatar/_example/group-cascading.jsx correctly 1`] = `"<div class=\\"demo-avatar\\" data-reactroot=\\"\\"><div class=\\"demo-avatar-block\\" style=\\"margin-bottom:40px\\"><div class=\\"t-avatar-group t-avatar--offset-right\\"><div class=\\"t-avatar t-avatar--circle\\"><img src=\\"https://tdesign.gtimg.com/site/avatar.jpg\\"/></div><div class=\\"t-avatar t-avatar--circle\\"><span style=\\"transform:scale(1)\\">W</span></div><div class=\\"t-avatar t-avatar--circle t-avatar-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-user\\"><path fill=\\"currentColor\\" d=\\"M11.5 5a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0zm-1 0a2.5 2.5 0 10-5 0 2.5 2.5 0 005 0zM13.96 10.85c.34.16.54.5.54.87V14a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5v-2.28c0-.37.2-.7.54-.87a13.79 13.79 0 0111.92 0zM8 10.5c-1.97 0-3.83.45-5.5 1.24v1.76h11v-1.76A12.78 12.78 0 008 10.5z\\" fill-opacity=\\"0.9\\"></path></svg></div></div></div><div class=\\"demo-avatar-block\\" style=\\"margin-bottom:40px\\"><div class=\\"t-avatar-group t-avatar--offset-left\\"><div class=\\"t-avatar t-avatar--circle\\"><img src=\\"https://tdesign.gtimg.com/site/avatar.jpg\\"/></div><div class=\\"t-avatar t-avatar--circle\\"><span style=\\"transform:scale(1)\\">W</span></div><div class=\\"t-avatar t-avatar--circle t-avatar-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-user\\"><path fill=\\"currentColor\\" d=\\"M11.5 5a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0zm-1 0a2.5 2.5 0 10-5 0 2.5 2.5 0 005 0zM13.96 10.85c.34.16.54.5.54.87V14a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5v-2.28c0-.37.2-.7.54-.87a13.79 13.79 0 0111.92 0zM8 10.5c-1.97 0-3.83.45-5.5 1.24v1.76h11v-1.76A12.78 12.78 0 008 10.5z\\" fill-opacity=\\"0.9\\"></path></svg></div></div></div></div>"`;
+exports[`ssr snapshot test renders ./src/avatar/_example/group-cascading.jsx correctly 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-avatar-group t-avatar--offset-right\\"><div class=\\"t-avatar t-avatar--circle\\"><img src=\\"https://tdesign.gtimg.com/site/avatar.jpg\\"/></div><div class=\\"t-avatar t-avatar--circle\\"><span style=\\"transform:scale(1)\\">W</span></div><div class=\\"t-avatar t-avatar--circle t-avatar-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-user\\"><path fill=\\"currentColor\\" d=\\"M11.5 5a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0zm-1 0a2.5 2.5 0 10-5 0 2.5 2.5 0 005 0zM13.96 10.85c.34.16.54.5.54.87V14a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5v-2.28c0-.37.2-.7.54-.87a13.79 13.79 0 0111.92 0zM8 10.5c-1.97 0-3.83.45-5.5 1.24v1.76h11v-1.76A12.78 12.78 0 008 10.5z\\" fill-opacity=\\"0.9\\"></path></svg></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-avatar-group t-avatar--offset-left\\"><div class=\\"t-avatar t-avatar--circle\\"><img src=\\"https://tdesign.gtimg.com/site/avatar.jpg\\"/></div><div class=\\"t-avatar t-avatar--circle\\"><span style=\\"transform:scale(1)\\">W</span></div><div class=\\"t-avatar t-avatar--circle t-avatar-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-user\\"><path fill=\\"currentColor\\" d=\\"M11.5 5a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0zm-1 0a2.5 2.5 0 10-5 0 2.5 2.5 0 005 0zM13.96 10.85c.34.16.54.5.54.87V14a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5v-2.28c0-.37.2-.7.54-.87a13.79 13.79 0 0111.92 0zM8 10.5c-1.97 0-3.83.45-5.5 1.24v1.76h11v-1.76A12.78 12.78 0 008 10.5z\\" fill-opacity=\\"0.9\\"></path></svg></div></div></div></div>"`;
 
-exports[`ssr snapshot test renders ./src/avatar/_example/group-max.jsx correctly 1`] = `"<div class=\\"demo-avatar\\" data-reactroot=\\"\\"><div class=\\"demo-avatar-block\\" style=\\"margin-bottom:40px\\"><div class=\\"t-avatar-group t-avatar--offset-right\\"><div class=\\"t-avatar t-avatar--circle\\"><img src=\\"https://tdesign.gtimg.com/site/avatar.jpg\\"/></div><div class=\\"t-avatar t-avatar--circle\\"><span style=\\"transform:scale(1)\\">Avatar</span></div><div class=\\"t-popup__reference\\"><div class=\\"t-avatar t-size-l t-avatar--circle\\"><span style=\\"transform:scale(1)\\">+1</span></div></div></div></div><div class=\\"demo-avatar-block\\" style=\\"margin-bottom:40px\\"><div class=\\"t-avatar-group t-avatar--offset-right\\"><div class=\\"t-avatar t-avatar--circle\\"><img src=\\"https://tdesign.gtimg.com/site/avatar.jpg\\"/></div><div class=\\"t-avatar t-avatar--circle\\"><span style=\\"transform:scale(1)\\">Avatar</span></div><div class=\\"t-popup__reference\\"><div class=\\"t-avatar t-size-l t-avatar--circle\\"><span style=\\"transform:scale(1)\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-ellipsis\\"><path fill=\\"currentColor\\" d=\\"M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z\\" fill-opacity=\\"0.9\\"></path></svg></span></div></div></div></div><div class=\\"demo-avatar-block\\"><div class=\\"t-avatar-group t-avatar--offset-right\\"><div class=\\"t-avatar t-avatar--circle\\"><img src=\\"https://tdesign.gtimg.com/site/avatar.jpg\\"/></div><div class=\\"t-avatar t-avatar--circle\\"><span style=\\"transform:scale(1)\\">Avatar</span></div><div class=\\"t-popup__reference\\"><div class=\\"t-avatar t-size-l t-avatar--circle\\"><span style=\\"transform:scale(1)\\">more</span></div></div></div></div></div>"`;
+exports[`ssr snapshot test renders ./src/avatar/_example/group-max.jsx correctly 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-avatar-group t-avatar--offset-right\\"><div class=\\"t-avatar t-avatar--circle\\"><img src=\\"https://tdesign.gtimg.com/site/avatar.jpg\\"/></div><div class=\\"t-avatar t-avatar--circle\\"><span style=\\"transform:scale(1)\\">Avatar</span></div><div class=\\"t-popup__reference\\"><div class=\\"t-avatar t-size-l t-avatar--circle\\"><span style=\\"transform:scale(1)\\">+1</span></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-avatar-group t-avatar--offset-right\\"><div class=\\"t-avatar t-avatar--circle\\"><img src=\\"https://tdesign.gtimg.com/site/avatar.jpg\\"/></div><div class=\\"t-avatar t-avatar--circle\\"><span style=\\"transform:scale(1)\\">Avatar</span></div><div class=\\"t-popup__reference\\"><div class=\\"t-avatar t-size-l t-avatar--circle\\"><span style=\\"transform:scale(1)\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-ellipsis\\"><path fill=\\"currentColor\\" d=\\"M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z\\" fill-opacity=\\"0.9\\"></path></svg></span></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-avatar-group t-avatar--offset-right\\"><div class=\\"t-avatar t-avatar--circle\\"><img src=\\"https://tdesign.gtimg.com/site/avatar.jpg\\"/></div><div class=\\"t-avatar t-avatar--circle\\"><span style=\\"transform:scale(1)\\">Avatar</span></div><div class=\\"t-popup__reference\\"><div class=\\"t-avatar t-size-l t-avatar--circle\\"><span style=\\"transform:scale(1)\\">more</span></div></div></div></div></div>"`;
 
-exports[`ssr snapshot test renders ./src/avatar/_example/shape.jsx correctly 1`] = `"<div class=\\"demo-avatar\\" data-reactroot=\\"\\"><div class=\\"t-avatar t-avatar--circle\\" style=\\"margin-right:40px\\"><span style=\\"transform:scale(1)\\">W</span></div><div class=\\"t-avatar t-avatar--round\\" style=\\"margin-right:40px\\"><span style=\\"transform:scale(1)\\">W</span></div></div>"`;
+exports[`ssr snapshot test renders ./src/avatar/_example/shape.jsx correctly 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><div class=\\"t-avatar t-avatar--circle\\" style=\\"margin-right:40px\\"><span style=\\"transform:scale(1)\\">W</span></div></div><div class=\\"t-space-item\\"><div class=\\"t-avatar t-avatar--round\\" style=\\"margin-right:40px\\"><span style=\\"transform:scale(1)\\">W</span></div></div></div>"`;
 
-exports[`ssr snapshot test renders ./src/avatar/_example/size.jsx correctly 1`] = `"<div class=\\"demo-avatar\\" data-reactroot=\\"\\"><div class=\\"demo-avatar-block\\" style=\\"margin-bottom:40px\\"><div class=\\"t-avatar t-size-s t-avatar--circle\\" style=\\"margin-right:40px\\"><span style=\\"transform:scale(1)\\">W</span></div><div class=\\"t-avatar t-size-m t-avatar--circle\\" style=\\"margin-right:40px\\"><span style=\\"transform:scale(1)\\">W</span></div><div class=\\"t-avatar t-size-l t-avatar--circle\\" style=\\"margin-right:40px\\"><span style=\\"transform:scale(1)\\">W</span></div><div class=\\"t-avatar t-avatar--circle\\" style=\\"width:100px;height:100px;font-size:50px;margin-right:40px\\"><span style=\\"transform:scale(1)\\">W</span></div></div><div class=\\"demo-avatar-block\\"><div class=\\"t-avatar t-size-s t-avatar--round\\" style=\\"margin-right:40px\\"><span style=\\"transform:scale(1)\\">W</span></div><div class=\\"t-avatar t-size-m t-avatar--round\\" style=\\"margin-right:40px\\"><span style=\\"transform:scale(1)\\">W</span></div><div class=\\"t-avatar t-size-l t-avatar--round\\" style=\\"margin-right:40px\\"><span style=\\"transform:scale(1)\\">W</span></div><div class=\\"t-avatar t-avatar--round\\" style=\\"width:100px;height:100px;font-size:50px;margin-right:40px\\"><span style=\\"transform:scale(1)\\">W</span></div></div></div>"`;
+exports[`ssr snapshot test renders ./src/avatar/_example/size.jsx correctly 1`] = `"<div style=\\"gap:24px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><div class=\\"t-avatar t-size-s t-avatar--circle\\" style=\\"margin-right:40px\\"><span style=\\"transform:scale(1)\\">W</span></div></div><div class=\\"t-space-item\\"><div class=\\"t-avatar t-size-m t-avatar--circle\\" style=\\"margin-right:40px\\"><span style=\\"transform:scale(1)\\">W</span></div></div><div class=\\"t-space-item\\"><div class=\\"t-avatar t-size-l t-avatar--circle\\" style=\\"margin-right:40px\\"><span style=\\"transform:scale(1)\\">W</span></div></div><div class=\\"t-space-item\\"><div class=\\"t-avatar t-avatar--circle\\" style=\\"width:100px;height:100px;font-size:50px;margin-right:40px\\"><span style=\\"transform:scale(1)\\">W</span></div></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><div class=\\"t-avatar t-size-s t-avatar--round\\" style=\\"margin-right:40px\\"><span style=\\"transform:scale(1)\\">W</span></div></div><div class=\\"t-space-item\\"><div class=\\"t-avatar t-size-m t-avatar--round\\" style=\\"margin-right:40px\\"><span style=\\"transform:scale(1)\\">W</span></div></div><div class=\\"t-space-item\\"><div class=\\"t-avatar t-size-l t-avatar--round\\" style=\\"margin-right:40px\\"><span style=\\"transform:scale(1)\\">W</span></div></div><div class=\\"t-space-item\\"><div class=\\"t-avatar t-avatar--round\\" style=\\"width:100px;height:100px;font-size:50px;margin-right:40px\\"><span style=\\"transform:scale(1)\\">W</span></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test renders ./src/badge/_example/base.jsx correctly 1`] = `"<span class=\\"t-badge\\"><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base t-size-l\\"><span class=\\"t-button__text\\"> </span></button><span class=\\"t-badge--dot\\"></span></span><span class=\\"t-badge\\">解锁新徽章<span class=\\"t-badge--dot\\"></span></span><span class=\\"t-badge\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-user\\" style=\\"font-size:24px\\"><path fill=\\"currentColor\\" d=\\"M11.5 5a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0zm-1 0a2.5 2.5 0 10-5 0 2.5 2.5 0 005 0zM13.96 10.85c.34.16.54.5.54.87V14a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5v-2.28c0-.37.2-.7.54-.87a13.79 13.79 0 0111.92 0zM8 10.5c-1.97 0-3.83.45-5.5 1.24v1.76h11v-1.76A12.78 12.78 0 008 10.5z\\" fill-opacity=\\"0.9\\"></path></svg><span class=\\"t-badge--dot\\"></span></span>"`;