diff --git a/src/_common b/src/_common
index cfcad47f..41d40c78 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit cfcad47f9c27eaf31ad50de07347f8c07685a090
+Subproject commit 41d40c788e2793b7707ee1ca0719d3d66bba838d
diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap
index fe16d4e4..8131c420 100644
--- a/test/snap/__snapshots__/csr.test.jsx.snap
+++ b/test/snap/__snapshots__/csr.test.jsx.snap
@@ -8826,6 +8826,361 @@ exports[`csr snapshot test > csr test src/overlay/_example/index.tsx 1`] = `
 </div>
 `;
 
+exports[`csr snapshot test > csr test src/popup/_example/base.tsx 1`] = `
+<div>
+  <div
+    style="padding: 0px 16px;"
+  >
+    <button
+      class="t-button t-button--outline t-button--primary t-size-l t-is-block t-button--shape-rectangle"
+      style="margin: 16px 0px;"
+      type="button"
+    >
+      <span
+        class="t-button__text"
+      >
+         
+        顶部弹出
+      </span>
+    </button>
+    <button
+      class="t-button t-button--outline t-button--primary t-size-l t-is-block t-button--shape-rectangle"
+      style="margin: 16px 0px;"
+      type="button"
+    >
+      <span
+        class="t-button__text"
+      >
+         
+        左侧弹出
+      </span>
+    </button>
+    <button
+      class="t-button t-button--outline t-button--primary t-size-l t-is-block t-button--shape-rectangle"
+      style="margin: 16px 0px;"
+      type="button"
+    >
+      <span
+        class="t-button__text"
+      >
+         
+        中间弹出
+      </span>
+    </button>
+    <button
+      class="t-button t-button--outline t-button--primary t-size-l t-is-block t-button--shape-rectangle"
+      style="margin: 16px 0px;"
+      type="button"
+    >
+      <span
+        class="t-button__text"
+      >
+         
+        底部弹出
+      </span>
+    </button>
+    <button
+      class="t-button t-button--outline t-button--primary t-size-l t-is-block t-button--shape-rectangle"
+      style="margin: 16px 0px;"
+      type="button"
+    >
+      <span
+        class="t-button__text"
+      >
+         
+        右侧弹出
+      </span>
+    </button>
+    <div
+      class="t-popup t-popup--top"
+      style="display: none; animation-fill-mode: forwards; padding: 100px;"
+    />
+  </div>
+</div>
+`;
+
+exports[`csr snapshot test > csr test src/popup/_example/custom-close.tsx 1`] = `
+<div>
+  <button
+    class="t-button t-button--outline t-button--primary t-size-l t-is-block t-button--shape-rectangle"
+    type="button"
+  >
+    <span
+      class="t-button__text"
+    >
+       
+      居中弹出层-带自定义关闭按钮
+    </span>
+  </button>
+  <div
+    class="t-popup t-popup--center"
+    style="display: none; animation-fill-mode: forwards; width: 240px; height: 240px;"
+  >
+    <svg
+      class="t-icon t-icon-close-circle design-mobile-popup-demo__custom-close close-btn"
+      color="#fff"
+      fill="none"
+      height="1em"
+      style="font-size: 32px;"
+      viewBox="0 0 24 24"
+      width="1em"
+    >
+      <path
+        d="M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zM7.4 15.18L10.6 12 7.4 8.82 8.82 7.4 12 10.6l3.18-3.19 1.42 1.42L13.4 12l3.19 3.18-1.42 1.42L12 13.4 8.82 16.6 7.4 15.18z"
+        fill="currentColor"
+      />
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`csr snapshot test > csr test src/popup/_example/index.tsx 1`] = `
+<div>
+  <div
+    class="tdesign-mobile-popup-demo"
+  >
+    <div
+      class="tdesign-mobile-demo-header"
+    >
+      <h1
+        class="tdesign-mobile-demo-header__title"
+      >
+        Popup 弹窗层
+      </h1>
+      <p
+        class="tdesign-mobile-demo-header__summary"
+      >
+        由其他控件触发，屏幕滑出或弹出一块自定义内容区域
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block"
+    >
+      <div
+        class="tdesign-mobile-demo-block__header"
+      >
+        <h2
+          class="tdesign-mobile-demo-block__title"
+        >
+          01 组件类型
+        </h2>
+        <p
+          class="tdesign-mobile-demo-block__summary"
+        >
+          基础弹出层
+        </p>
+      </div>
+      <div
+        class="tdesign-mobile-demo-block__slot with-padding"
+      >
+        <button
+          class="t-button t-button--outline t-button--primary t-size-l t-is-block t-button--shape-rectangle"
+          type="button"
+        >
+          <span
+            class="t-button__text"
+          >
+             
+            顶部弹出
+          </span>
+        </button>
+        <div
+          class="t-popup t-popup--top"
+          style="display: none; animation-fill-mode: forwards; padding: 100px;"
+        />
+        <button
+          class="t-button t-button--outline t-button--primary t-size-l t-is-block t-button--shape-rectangle"
+          type="button"
+        >
+          <span
+            class="t-button__text"
+          >
+             
+            左侧弹出
+          </span>
+        </button>
+        <div
+          class="t-popup t-popup--left"
+          style="display: none; animation-fill-mode: forwards; padding: 100px;"
+        />
+        <button
+          class="t-button t-button--outline t-button--primary t-size-l t-is-block t-button--shape-rectangle"
+          type="button"
+        >
+          <span
+            class="t-button__text"
+          >
+             
+            中间弹出
+          </span>
+        </button>
+        <div
+          class="t-popup t-popup--center"
+          style="display: none; animation-fill-mode: forwards; padding: 100px;"
+        />
+        <button
+          class="t-button t-button--outline t-button--primary t-size-l t-is-block t-button--shape-rectangle"
+          type="button"
+        >
+          <span
+            class="t-button__text"
+          >
+             
+            底部弹出
+          </span>
+        </button>
+        <div
+          class="t-popup t-popup--bottom"
+          style="display: none; animation-fill-mode: forwards; padding: 100px;"
+        />
+        <button
+          class="t-button t-button--outline t-button--primary t-size-l t-is-block t-button--shape-rectangle"
+          type="button"
+        >
+          <span
+            class="t-button__text"
+          >
+             
+            右侧弹出
+          </span>
+        </button>
+        <div
+          class="t-popup t-popup--right"
+          style="display: none; animation-fill-mode: forwards; padding: 100px;"
+        />
+      </div>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block"
+    >
+      <div
+        class="tdesign-mobile-demo-block__header"
+      >
+        <h2
+          class="tdesign-mobile-demo-block__title"
+        >
+          01 组件示例
+        </h2>
+        <p
+          class="tdesign-mobile-demo-block__summary"
+        >
+          应用示例
+        </p>
+      </div>
+      <div
+        class="tdesign-mobile-demo-block__slot with-padding"
+      >
+        <button
+          class="t-button t-button--outline t-button--primary t-size-l t-is-block t-button--shape-rectangle"
+          type="button"
+        >
+          <span
+            class="t-button__text"
+          >
+             
+            底部弹出层-带标题及操作
+          </span>
+        </button>
+        <div
+          class="t-popup t-popup--bottom"
+          style="display: none; animation-fill-mode: forwards; height: 258px;"
+        >
+          <div
+            class="tdesign-mobile-popup-demo__with-title header"
+          >
+            <div
+              class="btn btn--cancel"
+            >
+              取消
+            </div>
+            <div
+              class="title"
+            >
+              标题文字
+            </div>
+            <div
+              class="btn btn--confirm"
+            >
+              确定
+            </div>
+          </div>
+        </div>
+        <button
+          class="t-button t-button--outline t-button--primary t-size-l t-is-block t-button--shape-rectangle"
+          type="button"
+        >
+          <span
+            class="t-button__text"
+          >
+             
+            居中弹出层-带自定义关闭按钮
+          </span>
+        </button>
+        <div
+          class="t-popup t-popup--center"
+          style="display: none; animation-fill-mode: forwards; width: 240px; height: 240px;"
+        >
+          <svg
+            class="t-icon t-icon-close-circle design-mobile-popup-demo__custom-close close-btn"
+            color="#fff"
+            fill="none"
+            height="1em"
+            style="font-size: 32px;"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zM7.4 15.18L10.6 12 7.4 8.82 8.82 7.4 12 10.6l3.18-3.19 1.42 1.42L13.4 12l3.19 3.18-1.42 1.42L12 13.4 8.82 16.6 7.4 15.18z"
+              fill="currentColor"
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`csr snapshot test > csr test src/popup/_example/with-title.tsx 1`] = `
+<div>
+  <button
+    class="t-button t-button--outline t-button--primary t-size-l t-is-block t-button--shape-rectangle"
+    type="button"
+  >
+    <span
+      class="t-button__text"
+    >
+       
+      底部弹出层-带标题及操作
+    </span>
+  </button>
+  <div
+    class="t-popup t-popup--bottom"
+    style="display: none; animation-fill-mode: forwards; height: 258px;"
+  >
+    <div
+      class="tdesign-mobile-popup-demo__with-title header"
+    >
+      <div
+        class="btn btn--cancel"
+      >
+        取消
+      </div>
+      <div
+        class="title"
+      >
+        标题文字
+      </div>
+      <div
+        class="btn btn--confirm"
+      >
+        确定
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`csr snapshot test > csr test src/progress/_example/base.tsx 1`] = `
 <div>
   <div
@@ -13028,6 +13383,14 @@ exports[`ssr snapshot test > ssr test src/overlay/_example/base.tsx 1`] = `"<div
 
 exports[`ssr snapshot test > ssr test src/overlay/_example/index.tsx 1`] = `"<div class="tdesign-mobile-demo" data-reactroot=""><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">Overlay 遮罩层</h1><p class="tdesign-mobile-demo-header__summary">通过遮罩层，可以强调部分内容</p></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">01 组件</h2><p class="tdesign-mobile-demo-block__summary">基础遮罩层</p></div><div class="tdesign-mobile-demo-block__slot with-padding"><div><button type="button" class="t-button t-button--outline t-button--primary t-size-l t-is-block t-button--shape-rectangle"><span class="t-button__text"> <!-- -->基础用法</span></button></div></div></div></div>"`;
 
+exports[`ssr snapshot test > ssr test src/popup/_example/base.tsx 1`] = `"<div style="padding:0 16px" data-reactroot=""><button type="button" class="t-button t-button--outline t-button--primary t-size-l t-is-block t-button--shape-rectangle" style="margin:16px 0"><span class="t-button__text"> <!-- -->顶部弹出</span></button><button type="button" class="t-button t-button--outline t-button--primary t-size-l t-is-block t-button--shape-rectangle" style="margin:16px 0"><span class="t-button__text"> <!-- -->左侧弹出</span></button><button type="button" class="t-button t-button--outline t-button--primary t-size-l t-is-block t-button--shape-rectangle" style="margin:16px 0"><span class="t-button__text"> <!-- -->中间弹出</span></button><button type="button" class="t-button t-button--outline t-button--primary t-size-l t-is-block t-button--shape-rectangle" style="margin:16px 0"><span class="t-button__text"> <!-- -->底部弹出</span></button><button type="button" class="t-button t-button--outline t-button--primary t-size-l t-is-block t-button--shape-rectangle" style="margin:16px 0"><span class="t-button__text"> <!-- -->右侧弹出</span></button><div class="t-popup t-popup--top" style="display:none;animation-fill-mode:forwards;padding:100px"></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/popup/_example/custom-close.tsx 1`] = `"<button type="button" class="t-button t-button--outline t-button--primary t-size-l t-is-block t-button--shape-rectangle"><span class="t-button__text"> <!-- -->居中弹出层-带自定义关闭按钮</span></button><div class="t-popup t-popup--center" style="display:none;animation-fill-mode:forwards;width:240px;height:240px"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close-circle design-mobile-popup-demo__custom-close close-btn" style="font-size:32px" color="#fff"><path fill="currentColor" d="M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zM7.4 15.18L10.6 12 7.4 8.82 8.82 7.4 12 10.6l3.18-3.19 1.42 1.42L13.4 12l3.19 3.18-1.42 1.42L12 13.4 8.82 16.6 7.4 15.18z"></path></svg></div>"`;
+
+exports[`ssr snapshot test > ssr test src/popup/_example/index.tsx 1`] = `"<div class="tdesign-mobile-popup-demo" data-reactroot=""><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">Popup 弹窗层</h1><p class="tdesign-mobile-demo-header__summary">由其他控件触发，屏幕滑出或弹出一块自定义内容区域</p></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">01 组件类型</h2><p class="tdesign-mobile-demo-block__summary">基础弹出层</p></div><div class="tdesign-mobile-demo-block__slot with-padding"><button type="button" class="t-button t-button--outline t-button--primary t-size-l t-is-block t-button--shape-rectangle"><span class="t-button__text"> <!-- -->顶部弹出</span></button><div class="t-popup t-popup--top" style="display:none;animation-fill-mode:forwards;padding:100px"></div><button type="button" class="t-button t-button--outline t-button--primary t-size-l t-is-block t-button--shape-rectangle"><span class="t-button__text"> <!-- -->左侧弹出</span></button><div class="t-popup t-popup--left" style="display:none;animation-fill-mode:forwards;padding:100px"></div><button type="button" class="t-button t-button--outline t-button--primary t-size-l t-is-block t-button--shape-rectangle"><span class="t-button__text"> <!-- -->中间弹出</span></button><div class="t-popup t-popup--center" style="display:none;animation-fill-mode:forwards;padding:100px"></div><button type="button" class="t-button t-button--outline t-button--primary t-size-l t-is-block t-button--shape-rectangle"><span class="t-button__text"> <!-- -->底部弹出</span></button><div class="t-popup t-popup--bottom" style="display:none;animation-fill-mode:forwards;padding:100px"></div><button type="button" class="t-button t-button--outline t-button--primary t-size-l t-is-block t-button--shape-rectangle"><span class="t-button__text"> <!-- -->右侧弹出</span></button><div class="t-popup t-popup--right" style="display:none;animation-fill-mode:forwards;padding:100px"></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">01 组件示例</h2><p class="tdesign-mobile-demo-block__summary">应用示例</p></div><div class="tdesign-mobile-demo-block__slot with-padding"><button type="button" class="t-button t-button--outline t-button--primary t-size-l t-is-block t-button--shape-rectangle"><span class="t-button__text"> <!-- -->底部弹出层-带标题及操作</span></button><div class="t-popup t-popup--bottom" style="display:none;animation-fill-mode:forwards;height:258px"><div class="tdesign-mobile-popup-demo__with-title header"><div class="btn btn--cancel">取消</div><div class="title">标题文字</div><div class="btn btn--confirm">确定</div></div></div><button type="button" class="t-button t-button--outline t-button--primary t-size-l t-is-block t-button--shape-rectangle"><span class="t-button__text"> <!-- -->居中弹出层-带自定义关闭按钮</span></button><div class="t-popup t-popup--center" style="display:none;animation-fill-mode:forwards;width:240px;height:240px"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close-circle design-mobile-popup-demo__custom-close close-btn" style="font-size:32px" color="#fff"><path fill="currentColor" d="M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zM7.4 15.18L10.6 12 7.4 8.82 8.82 7.4 12 10.6l3.18-3.19 1.42 1.42L13.4 12l3.19 3.18-1.42 1.42L12 13.4 8.82 16.6 7.4 15.18z"></path></svg></div></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/popup/_example/with-title.tsx 1`] = `"<button type="button" class="t-button t-button--outline t-button--primary t-size-l t-is-block t-button--shape-rectangle"><span class="t-button__text"> <!-- -->底部弹出层-带标题及操作</span></button><div class="t-popup t-popup--bottom" style="display:none;animation-fill-mode:forwards;height:258px"><div class="tdesign-mobile-popup-demo__with-title header"><div class="btn btn--cancel">取消</div><div class="title">标题文字</div><div class="btn btn--confirm">确定</div></div></div>"`;
+
 exports[`ssr snapshot test > ssr test src/progress/_example/base.tsx 1`] = `"<div class="example-progress" data-reactroot=""><div class="example-progress__item"><div class="t-progress"><div class="t-progress--thin t-progress--status-default"><div class="t-progress__bar"><div class="t-progress__inner" style="width:80%;background:"></div></div><div class="t-progress__info">80%</div></div></div></div><div class="example-progress__item"><div class="t-progress"><div class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status-default"><div class="t-progress__inner" style="width:80%;background:"><div class="t-progress__info">80%</div></div></div></div></div><div class="example-progress__item"><div><div class="t-progress--circle t-progress--status-default" style="width:112px;height:112px;font-size:17.5px"><div class="t-progress__info">30%</div><svg width="112" height="112" viewBox="0 0 118 118"><circle cx="59" cy="59" r="56" stroke-width="6" stroke="var(--td-bg-color-component)" fill="none" class="t-progress__circle-outer"></circle><circle cx="59" cy="59" r="56" stroke-width="6" fill="none" transform="matrix(0,-1,1,0,0,118)" stroke-dasharray="105.55751316061705  246.30086404143975" class="t-progress__circle-inner" style="stroke:;stroke-linecap:round"></circle></svg></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/progress/_example/circle.tsx 1`] = `"<div class="example-progress" data-reactroot=""><div class="example-progress__item"><div><div class="t-progress--circle t-progress--status-default" style="width:112px;height:112px;font-size:17.5px"><div class="t-progress__info">80%</div><svg width="112" height="112" viewBox="0 0 118 118"><circle cx="59" cy="59" r="56" stroke-width="6" stroke="var(--td-bg-color-component)" fill="none" class="t-progress__circle-outer"></circle><circle cx="59" cy="59" r="56" stroke-width="6" fill="none" transform="matrix(0,-1,1,0,0,118)" stroke-dasharray="281.48670176164546  70.37167544041135" class="t-progress__circle-inner" style="stroke:;stroke-linecap:round"></circle></svg></div></div></div><div class="example-progress__item"><div><div class="t-progress--circle t-progress--status-warning" style="width:112px;height:112px;font-size:17.5px"><div class="t-progress__info"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-error t-progress__icon"><path fill="currentColor" d="M13 2v14.5h-2V2h2zm-2 17h2v2h-2v-2z"></path></svg></div><svg width="112" height="112" viewBox="0 0 118 118"><circle cx="59" cy="59" r="56" stroke-width="6" stroke="var(--td-bg-color-component)" fill="none" class="t-progress__circle-outer"></circle><circle cx="59" cy="59" r="56" stroke-width="6" fill="none" transform="matrix(0,-1,1,0,0,118)" stroke-dasharray="281.48670176164546  70.37167544041135" class="t-progress__circle-inner" style="stroke:;stroke-linecap:round"></circle></svg></div></div></div><div class="example-progress__item"><div><div class="t-progress--circle t-progress--status-error" style="width:112px;height:112px;font-size:17.5px"><div class="t-progress__info"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-progress__icon"><path fill="currentColor" d="M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"></path></svg></div><svg width="112" height="112" viewBox="0 0 118 118"><circle cx="59" cy="59" r="56" stroke-width="6" stroke="var(--td-bg-color-component)" fill="none" class="t-progress__circle-outer"></circle><circle cx="59" cy="59" r="56" stroke-width="6" fill="none" transform="matrix(0,-1,1,0,0,118)" stroke-dasharray="281.48670176164546  70.37167544041135" class="t-progress__circle-inner" style="stroke:;stroke-linecap:round"></circle></svg></div></div></div><div class="example-progress__item"><div><div class="t-progress--circle t-progress--status-success" style="width:112px;height:112px;font-size:17.5px"><div class="t-progress__info"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check t-progress__icon"><path fill="currentColor" d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"></path></svg></div><svg width="112" height="112" viewBox="0 0 118 118"><circle cx="59" cy="59" r="56" stroke-width="6" stroke="var(--td-bg-color-component)" fill="none" class="t-progress__circle-outer"></circle><circle cx="59" cy="59" r="56" stroke-width="6" fill="none" transform="matrix(0,-1,1,0,0,118)" stroke-dasharray="281.48670176164546  70.37167544041135" class="t-progress__circle-inner" style="stroke:;stroke-linecap:round"></circle></svg></div></div></div></div>"`;
diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap
index f0d7165d..32938a5a 100644
--- a/test/snap/__snapshots__/ssr.test.jsx.snap
+++ b/test/snap/__snapshots__/ssr.test.jsx.snap
@@ -108,6 +108,14 @@ exports[`ssr snapshot test > ssr test src/overlay/_example/base.tsx 1`] = `"<div
 
 exports[`ssr snapshot test > ssr test src/overlay/_example/index.tsx 1`] = `"<div class="tdesign-mobile-demo" data-reactroot=""><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">Overlay 遮罩层</h1><p class="tdesign-mobile-demo-header__summary">通过遮罩层，可以强调部分内容</p></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">01 组件</h2><p class="tdesign-mobile-demo-block__summary">基础遮罩层</p></div><div class="tdesign-mobile-demo-block__slot with-padding"><div><button type="button" class="t-button t-button--outline t-button--primary t-size-l t-is-block t-button--shape-rectangle"><span class="t-button__text"> <!-- -->基础用法</span></button></div></div></div></div>"`;
 
+exports[`ssr snapshot test > ssr test src/popup/_example/base.tsx 1`] = `"<div style="padding:0 16px" data-reactroot=""><button type="button" class="t-button t-button--outline t-button--primary t-size-l t-is-block t-button--shape-rectangle" style="margin:16px 0"><span class="t-button__text"> <!-- -->顶部弹出</span></button><button type="button" class="t-button t-button--outline t-button--primary t-size-l t-is-block t-button--shape-rectangle" style="margin:16px 0"><span class="t-button__text"> <!-- -->左侧弹出</span></button><button type="button" class="t-button t-button--outline t-button--primary t-size-l t-is-block t-button--shape-rectangle" style="margin:16px 0"><span class="t-button__text"> <!-- -->中间弹出</span></button><button type="button" class="t-button t-button--outline t-button--primary t-size-l t-is-block t-button--shape-rectangle" style="margin:16px 0"><span class="t-button__text"> <!-- -->底部弹出</span></button><button type="button" class="t-button t-button--outline t-button--primary t-size-l t-is-block t-button--shape-rectangle" style="margin:16px 0"><span class="t-button__text"> <!-- -->右侧弹出</span></button><div class="t-popup t-popup--top" style="display:none;animation-fill-mode:forwards;padding:100px"></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/popup/_example/custom-close.tsx 1`] = `"<button type="button" class="t-button t-button--outline t-button--primary t-size-l t-is-block t-button--shape-rectangle"><span class="t-button__text"> <!-- -->居中弹出层-带自定义关闭按钮</span></button><div class="t-popup t-popup--center" style="display:none;animation-fill-mode:forwards;width:240px;height:240px"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close-circle design-mobile-popup-demo__custom-close close-btn" style="font-size:32px" color="#fff"><path fill="currentColor" d="M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zM7.4 15.18L10.6 12 7.4 8.82 8.82 7.4 12 10.6l3.18-3.19 1.42 1.42L13.4 12l3.19 3.18-1.42 1.42L12 13.4 8.82 16.6 7.4 15.18z"></path></svg></div>"`;
+
+exports[`ssr snapshot test > ssr test src/popup/_example/index.tsx 1`] = `"<div class="tdesign-mobile-popup-demo" data-reactroot=""><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">Popup 弹窗层</h1><p class="tdesign-mobile-demo-header__summary">由其他控件触发，屏幕滑出或弹出一块自定义内容区域</p></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">01 组件类型</h2><p class="tdesign-mobile-demo-block__summary">基础弹出层</p></div><div class="tdesign-mobile-demo-block__slot with-padding"><button type="button" class="t-button t-button--outline t-button--primary t-size-l t-is-block t-button--shape-rectangle"><span class="t-button__text"> <!-- -->顶部弹出</span></button><div class="t-popup t-popup--top" style="display:none;animation-fill-mode:forwards;padding:100px"></div><button type="button" class="t-button t-button--outline t-button--primary t-size-l t-is-block t-button--shape-rectangle"><span class="t-button__text"> <!-- -->左侧弹出</span></button><div class="t-popup t-popup--left" style="display:none;animation-fill-mode:forwards;padding:100px"></div><button type="button" class="t-button t-button--outline t-button--primary t-size-l t-is-block t-button--shape-rectangle"><span class="t-button__text"> <!-- -->中间弹出</span></button><div class="t-popup t-popup--center" style="display:none;animation-fill-mode:forwards;padding:100px"></div><button type="button" class="t-button t-button--outline t-button--primary t-size-l t-is-block t-button--shape-rectangle"><span class="t-button__text"> <!-- -->底部弹出</span></button><div class="t-popup t-popup--bottom" style="display:none;animation-fill-mode:forwards;padding:100px"></div><button type="button" class="t-button t-button--outline t-button--primary t-size-l t-is-block t-button--shape-rectangle"><span class="t-button__text"> <!-- -->右侧弹出</span></button><div class="t-popup t-popup--right" style="display:none;animation-fill-mode:forwards;padding:100px"></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">01 组件示例</h2><p class="tdesign-mobile-demo-block__summary">应用示例</p></div><div class="tdesign-mobile-demo-block__slot with-padding"><button type="button" class="t-button t-button--outline t-button--primary t-size-l t-is-block t-button--shape-rectangle"><span class="t-button__text"> <!-- -->底部弹出层-带标题及操作</span></button><div class="t-popup t-popup--bottom" style="display:none;animation-fill-mode:forwards;height:258px"><div class="tdesign-mobile-popup-demo__with-title header"><div class="btn btn--cancel">取消</div><div class="title">标题文字</div><div class="btn btn--confirm">确定</div></div></div><button type="button" class="t-button t-button--outline t-button--primary t-size-l t-is-block t-button--shape-rectangle"><span class="t-button__text"> <!-- -->居中弹出层-带自定义关闭按钮</span></button><div class="t-popup t-popup--center" style="display:none;animation-fill-mode:forwards;width:240px;height:240px"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close-circle design-mobile-popup-demo__custom-close close-btn" style="font-size:32px" color="#fff"><path fill="currentColor" d="M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zM7.4 15.18L10.6 12 7.4 8.82 8.82 7.4 12 10.6l3.18-3.19 1.42 1.42L13.4 12l3.19 3.18-1.42 1.42L12 13.4 8.82 16.6 7.4 15.18z"></path></svg></div></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/popup/_example/with-title.tsx 1`] = `"<button type="button" class="t-button t-button--outline t-button--primary t-size-l t-is-block t-button--shape-rectangle"><span class="t-button__text"> <!-- -->底部弹出层-带标题及操作</span></button><div class="t-popup t-popup--bottom" style="display:none;animation-fill-mode:forwards;height:258px"><div class="tdesign-mobile-popup-demo__with-title header"><div class="btn btn--cancel">取消</div><div class="title">标题文字</div><div class="btn btn--confirm">确定</div></div></div>"`;
+
 exports[`ssr snapshot test > ssr test src/progress/_example/base.tsx 1`] = `"<div class="example-progress" data-reactroot=""><div class="example-progress__item"><div class="t-progress"><div class="t-progress--thin t-progress--status-default"><div class="t-progress__bar"><div class="t-progress__inner" style="width:80%;background:"></div></div><div class="t-progress__info">80%</div></div></div></div><div class="example-progress__item"><div class="t-progress"><div class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status-default"><div class="t-progress__inner" style="width:80%;background:"><div class="t-progress__info">80%</div></div></div></div></div><div class="example-progress__item"><div><div class="t-progress--circle t-progress--status-default" style="width:112px;height:112px;font-size:17.5px"><div class="t-progress__info">30%</div><svg width="112" height="112" viewBox="0 0 118 118"><circle cx="59" cy="59" r="56" stroke-width="6" stroke="var(--td-bg-color-component)" fill="none" class="t-progress__circle-outer"></circle><circle cx="59" cy="59" r="56" stroke-width="6" fill="none" transform="matrix(0,-1,1,0,0,118)" stroke-dasharray="105.55751316061705  246.30086404143975" class="t-progress__circle-inner" style="stroke:;stroke-linecap:round"></circle></svg></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/progress/_example/circle.tsx 1`] = `"<div class="example-progress" data-reactroot=""><div class="example-progress__item"><div><div class="t-progress--circle t-progress--status-default" style="width:112px;height:112px;font-size:17.5px"><div class="t-progress__info">80%</div><svg width="112" height="112" viewBox="0 0 118 118"><circle cx="59" cy="59" r="56" stroke-width="6" stroke="var(--td-bg-color-component)" fill="none" class="t-progress__circle-outer"></circle><circle cx="59" cy="59" r="56" stroke-width="6" fill="none" transform="matrix(0,-1,1,0,0,118)" stroke-dasharray="281.48670176164546  70.37167544041135" class="t-progress__circle-inner" style="stroke:;stroke-linecap:round"></circle></svg></div></div></div><div class="example-progress__item"><div><div class="t-progress--circle t-progress--status-warning" style="width:112px;height:112px;font-size:17.5px"><div class="t-progress__info"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-error t-progress__icon"><path fill="currentColor" d="M13 2v14.5h-2V2h2zm-2 17h2v2h-2v-2z"></path></svg></div><svg width="112" height="112" viewBox="0 0 118 118"><circle cx="59" cy="59" r="56" stroke-width="6" stroke="var(--td-bg-color-component)" fill="none" class="t-progress__circle-outer"></circle><circle cx="59" cy="59" r="56" stroke-width="6" fill="none" transform="matrix(0,-1,1,0,0,118)" stroke-dasharray="281.48670176164546  70.37167544041135" class="t-progress__circle-inner" style="stroke:;stroke-linecap:round"></circle></svg></div></div></div><div class="example-progress__item"><div><div class="t-progress--circle t-progress--status-error" style="width:112px;height:112px;font-size:17.5px"><div class="t-progress__info"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-progress__icon"><path fill="currentColor" d="M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"></path></svg></div><svg width="112" height="112" viewBox="0 0 118 118"><circle cx="59" cy="59" r="56" stroke-width="6" stroke="var(--td-bg-color-component)" fill="none" class="t-progress__circle-outer"></circle><circle cx="59" cy="59" r="56" stroke-width="6" fill="none" transform="matrix(0,-1,1,0,0,118)" stroke-dasharray="281.48670176164546  70.37167544041135" class="t-progress__circle-inner" style="stroke:;stroke-linecap:round"></circle></svg></div></div></div><div class="example-progress__item"><div><div class="t-progress--circle t-progress--status-success" style="width:112px;height:112px;font-size:17.5px"><div class="t-progress__info"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check t-progress__icon"><path fill="currentColor" d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"></path></svg></div><svg width="112" height="112" viewBox="0 0 118 118"><circle cx="59" cy="59" r="56" stroke-width="6" stroke="var(--td-bg-color-component)" fill="none" class="t-progress__circle-outer"></circle><circle cx="59" cy="59" r="56" stroke-width="6" fill="none" transform="matrix(0,-1,1,0,0,118)" stroke-dasharray="281.48670176164546  70.37167544041135" class="t-progress__circle-inner" style="stroke:;stroke-linecap:round"></circle></svg></div></div></div></div>"`;